History

fix(web): widen sync banners and simplify the working timer (#8855)

Julius Marminge committed 2 months ago

Commit 3f62e6f1 parent 98425184 files · +6 −36Browse files

Unified · Split

4 files
  1. apps/web/src/components/ChatView.tsx +0 −16
  2. apps/web/src/components/chat/ChatComposer.tsx +1 −8
  3. apps/web/src/components/chat/MessagesTimeline.tsx +1 −12
  4. docs/user/composer.md +4 −0
apps/web/src/components/ChatView.tsx+0−16
@@ -2435,21 +2435,6 @@ function ChatViewContent(props: ChatViewProps) { · 2434 unmodified lines
24352435 () => deriveActivePlanState(threadActivities, activeLatestTurn?.turnId ?? undefined),
24362436 [activeLatestTurn?.turnId, threadActivities],
24372437 );
2438− // Current step for the in-chat working row: only for the running turn's own
2439− // plan (deriveActivePlanState falls back to older turns' plans, which must
2440− // not label fresh work). Falls back to the first pending step so an
2441− // all-pending freshly written plan labels the row, matching the composer and
2442− // the server's planProgress.
2443− const workingStepLabel = useMemo(() => {
2444− if (!activePlan || activePlan.turnId !== (activeLatestTurn?.turnId ?? null)) {
2445− return null;
2446− }
2447− return (
2448− activePlan.steps.find((step) => step.status === "inProgress")?.step ??
2449− activePlan.steps.find((step) => step.status === "pending")?.step ??
2450− null
2451− );
2452− }, [activeLatestTurn?.turnId, activePlan]);
24532438 const showPlanFollowUpPrompt = shouldShowPlanFollowUpPrompt({
24542439 pendingUserInputCount: pendingUserInputs.length,
24552440 interactionMode,
@@ -7240,7 +7225,6 @@ function ChatViewContent(props: ChatViewProps) { · 4784 unmodified lines
72407225 onOpenAgents={addAgentsSurface}
72417226 key={activeThread.id}
72427227 isWorking={isWorking}
7243− workingStepLabel={workingStepLabel}
72447228 activeTurnStartedAt={activeWorkStartedAt}
72457229 listRef={legendListRef}
72467230 timelineEntries={timelineEntries}
apps/web/src/components/chat/ChatComposer.tsx+1−8
@@ -3439,14 +3439,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) · 3438 unmodified lines
34393439 />
34403440 {!activityStackItem && (props.threadSyncPhase || inlineTasksBadge) ? (
34413441 <ComposerBanner.Attachment>
3442− <ComposerBanner.Root
3443− width={
3444− props.threadSyncPhase && !showComposerTopDrawer && !isComposerCollapsedMobile
3445− ? "content"
3446− : "fill"
3447− }
3448− data-chat-composer-activity-strip="true"
3449− >
3442+ <ComposerBanner.Root data-chat-composer-activity-strip="true">
34503443 {props.threadSyncPhase ? (
34513444 <ComposerActivityRow phase={props.threadSyncPhase} />
34523445 ) : (
apps/web/src/components/chat/MessagesTimeline.tsx+1−12
@@ -171,8 +171,6 @@ interface TimelineRowActivityState { · 170 unmodified lines
171171 isWorking: boolean;
172172 isRevertingCheckpoint: boolean;
173173 latestTurnId: TurnId | null;
174− /** Current plan step label for the working row, when the turn has a plan. */
175− workingStepLabel: string | null;
176174 }
177175
178176 const TimelineRowCtx = createContext<TimelineRowSharedState>(null!);
@@ -227,7 +225,6 @@ interface MessagesTimelineProps { · 48 unmodified lines
227225 agentPanelModel?: AgentPanelModel;
228226 onOpenAgents?: () => void;
229227 isWorking: boolean;
230− workingStepLabel?: string | null;
231228 activeTurnStartedAt: string | null;
232229 listRef: React.RefObject<LegendListRef | null>;
233230 timelineEntries: ReturnType<typeof deriveTimelineEntries>;
@@ -273,7 +270,6 @@ interface MessagesTimelineProps { · 39 unmodified lines
273270
274271 export const MessagesTimeline = memo(function MessagesTimeline({
275272 isWorking,
276− workingStepLabel = null,
277273 activeTurnStartedAt,
278274 agentPanelModel = EMPTY_AGENT_PANEL_MODEL,
279275 onOpenAgents = NOOP_OPEN_AGENTS,
@@ -583,9 +579,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({ · 303 unmodified lines
583579 isWorking,
584580 isRevertingCheckpoint,
585581 latestTurnId: latestTurn?.turnId ?? null,
586− workingStepLabel,
587582 }),
588− [isRevertingCheckpoint, isWorking, latestTurn?.turnId, workingStepLabel],
583+ [isRevertingCheckpoint, isWorking, latestTurn?.turnId],
589584 );
590585
591586 // Stable renderItem — no closure deps. Row components read shared state
@@ -1323,7 +1318,6 @@ function ProposedPlanTimelineRow({ · 731 unmodified lines
13231318 }
13241319
13251320 function WorkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "working" }> }) {
1326− const { workingStepLabel } = use(TimelineRowActivityCtx);
13271321 return (
13281322 <div>
13291323 <div className="border-b border-border/60 pb-2 pt-1">
@@ -1337,11 +1331,6 @@ function WorkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "workin · 7 unmodified lines
13371331 "Working..."
13381332 )}
13391333 </span>
1340− {workingStepLabel ? (
1341− <span className="ml-2 min-w-0 truncate text-muted-foreground/55">
1342− · {workingStepLabel}
1343− </span>
1344− ) : null}
13451334 </div>
13461335 </div>
13471336 {row.showThinking ? (
docs/user/composer.md+4−0
@@ -37,6 +37,10 @@ when starting a thread or changing an existing thread's model. · 36 unmodified lines
3737
3838 ## Notices above the composer
3939
40+On web and desktop, loading and syncing statuses fill the available banner width beside the
41+stash tab. Task progress appears above the composer, while the timeline's working timer shows
42+only elapsed time.
43+
4044 On web and desktop, additional notices peek out above the attached banner. Hover over the peek
4145 to reveal them, or focus **Show other notices** with `Tab` and press `Enter` or `Space`. Press
4246 `Escape` to close the stack and return focus to that control. On a touchscreen, tap the peek to