From 3d32797f6f4614205debf8a61f09e950f5f9a81c Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 29 Aug 2026 16:38:04 -0700
Subject: [PATCH] fix(web): unify activity logs and composer banners (#8693)

---
 apps/web/src/components/BranchToolbar.tsx     |   6 +-
 .../web/src/components/ChatView.logic.test.ts |  19 -
 apps/web/src/components/ChatView.logic.ts     |  11 -
 apps/web/src/components/ChatView.tsx          | 149 ++---
 apps/web/src/components/chat/ChatComposer.tsx | 391 +++++++------
 .../chat/ComposerActivityStatus.tsx           | 106 ++++
 .../src/components/chat/ComposerBanner.tsx    | 330 +++++++++++
 .../chat/ComposerBannerStack.test.tsx         | 108 ----
 .../components/chat/ComposerBannerStack.tsx   | 306 +++++-----
 .../chat/ComposerCommandMenu.test.tsx         |   2 -
 .../components/chat/ComposerCommandMenu.tsx   |   7 +-
 .../chat/ComposerPendingApprovalPanel.tsx     |   4 +-
 .../chat/ComposerPendingUserInputPanel.tsx    |  67 +--
 .../chat/ComposerPlanFollowUpBanner.tsx       |  17 +-
 .../chat/ComposerServerUpdateStatus.tsx       |  49 ++
 .../chat/ComposerStashBadge.test.tsx          |  68 ---
 .../components/chat/ComposerStashBadge.tsx    |  54 +-
 .../chat/ComposerStashMenu.test.tsx           |  44 --
 .../src/components/chat/ComposerStashMenu.tsx | 168 +++---
 .../src/components/chat/ComposerSurface.tsx   |  99 ++++
 .../chat/ComposerTasksBadge.test.tsx          | 190 -------
 .../components/chat/ComposerTasksBadge.tsx    | 337 ++++++-----
 .../chat/MessagesTimeline.logic.test.ts       |  61 +-
 .../components/chat/MessagesTimeline.logic.ts | 159 ++----
 .../components/chat/MessagesTimeline.test.tsx |  29 +-
 .../src/components/chat/MessagesTimeline.tsx  | 186 +------
 .../chat/ThreadSyncStatusPill.test.tsx        |  22 -
 .../components/chat/ThreadSyncStatusPill.tsx  |  19 -
 apps/web/src/index.css                        | 524 ------------------
 apps/web/src/session-logic.test.ts            |  28 +
 apps/web/src/session-logic.ts                 |   1 +
 apps/web/src/versionSkew.test.ts              |  36 ++
 apps/web/src/versionSkew.ts                   |  13 +
 33 files changed, 1511 insertions(+), 2099 deletions(-)
 create mode 100644 apps/web/src/components/chat/ComposerActivityStatus.tsx
 create mode 100644 apps/web/src/components/chat/ComposerBanner.tsx
 delete mode 100644 apps/web/src/components/chat/ComposerBannerStack.test.tsx
 create mode 100644 apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
 delete mode 100644 apps/web/src/components/chat/ComposerStashBadge.test.tsx
 create mode 100644 apps/web/src/components/chat/ComposerSurface.tsx
 delete mode 100644 apps/web/src/components/chat/ComposerTasksBadge.test.tsx
 delete mode 100644 apps/web/src/components/chat/ThreadSyncStatusPill.test.tsx
 delete mode 100644 apps/web/src/components/chat/ThreadSyncStatusPill.tsx

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index 5d11cce11fbe61c483d1013cc8daeae59e94fbdb..8a4dc581992325a5f17c86468d567a88bcb51cf5 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -40,6 +40,7 @@ import {
   MenuTrigger,
 } from "./ui/menu";
 import { Separator } from "./ui/separator";
+import { ComposerSurface } from "./chat/ComposerSurface";
 
 interface BranchToolbarProps {
   environmentId: EnvironmentId;
@@ -466,10 +467,9 @@ export const BranchToolbar = memo(function BranchToolbar({
   if (!hasActiveThread || !activeProject) return null;
 
   return (
-    <div
+    <ComposerSurface.ContextStrip
       ref={setStripElement}
       data-compact={labelsOverflow ? "" : undefined}
-      className="chat-composer-context-strip group/composer-context -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 overflow-x-clip overflow-y-visible ps-1 pe-2 pt-5 pb-1"
     >
       {isMobile && showGitControls ? (
         <MobileRunContextSelector
@@ -534,6 +534,6 @@ export const BranchToolbar = memo(function BranchToolbar({
           {...(onComposerFocusRequest ? { onComposerFocusRequest } : {})}
         />
       ) : null}
-    </div>
+    </ComposerSurface.ContextStrip>
   );
 });
diff --git a/apps/web/src/components/ChatView.logic.test.ts b/apps/web/src/components/ChatView.logic.test.ts
index 5ff86bb2381b3a1880973148ed73d28725cfa3f0..6586c62d2f130cf698356534a6d62bc20d3324d1 100644
--- a/apps/web/src/components/ChatView.logic.test.ts
+++ b/apps/web/src/components/ChatView.logic.test.ts
@@ -32,7 +32,6 @@ import {
   resolveSendEnvMode,
   resolveDraftHeroState,
   scheduleEnvironmentReconnectWarning,
-  shoulderTabReserve,
   startNewThreadForProject,
   shouldDockDraftHeroForSubmission,
   shouldReleaseTimelineAnchorForToolActivity,
@@ -46,24 +45,6 @@ const projectId = ProjectId.make("project-1");
 const threadId = ThreadId.make("thread-1");
 const now = "2026-03-29T00:00:00.000Z";
 
-describe("shoulderTabReserve", () => {
-  it("ignores the top drawer when measuring the shoulder tab band", () => {
-    const elementAt = (top: number) => ({ getBoundingClientRect: () => ({ top }) }) as HTMLElement;
-    const elements = new Map<string, HTMLElement>([
-      ['[data-chat-composer-form="true"]', elementAt(20)],
-      [".chat-composer-shoulder-tab", elementAt(100)],
-      ['[data-chat-composer-main-surface="true"]', elementAt(128)],
-    ]);
-    const overlay = {
-      querySelector: (selector: string) => elements.get(selector) ?? null,
-    } as HTMLElement;
-
-    expect(shoulderTabReserve(overlay)).toBe(28);
-    elements.set(".chat-composer-tasks-tab", elementAt(100));
-    expect(shoulderTabReserve(overlay)).toBe(0);
-  });
-});
-
 describe("draft hero submission transition", () => {
   it("does not dock the composer before a background submission", () => {
     expect(
diff --git a/apps/web/src/components/ChatView.logic.ts b/apps/web/src/components/ChatView.logic.ts
index 25a49f3efa2cbf354a5a3ba28230d79d4fe5520b..b435e7021c9b37127acbbeb0725086f08470e9cc 100644
--- a/apps/web/src/components/ChatView.logic.ts
+++ b/apps/web/src/components/ChatView.logic.ts
@@ -39,17 +39,6 @@ export const ENVIRONMENT_RECONNECT_WARNING_GRACE_MS = 2_000;
 
 export const LastInvokedScriptByProjectSchema = Schema.Record(ProjectId, Schema.String);
 
-export function shoulderTabReserve(overlay: HTMLElement): number {
-  if (overlay.querySelector(".chat-composer-tasks-tab")) return 0;
-  const tab = overlay.querySelector<HTMLElement>(".chat-composer-shoulder-tab");
-  const surface = overlay.querySelector<HTMLElement>('[data-chat-composer-main-surface="true"]');
-  if (!tab || !surface) return 0;
-  return Math.max(
-    0,
-    Math.round(surface.getBoundingClientRect().top - tab.getBoundingClientRect().top),
-  );
-}
-
 export function shouldDockDraftHeroForSubmission(input: {
   isDraftHeroState: boolean;
   activeThreadKey: string | null;
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index a027a1848b30f269be0b48a358595b38a606c8c2..7f953cfd8300cb2933c3f544964c66663e611fd9 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -183,6 +183,7 @@ import {
   CheckCircle2Icon,
   ChevronDownIcon,
   GitBranchIcon,
+  InfoIcon,
   Minimize2Icon,
   PaperclipIcon,
   WifiOffIcon,
@@ -316,14 +317,14 @@ import {
   threadChangeRequestSnapshotsAtom,
   useLinkedThreadPullRequest,
 } from "./ThreadStatusIndicators";
-import { ComposerBannerStack, type ComposerBannerStackItem } from "./chat/ComposerBannerStack";
+import type { ComposerBannerStackItem } from "./chat/ComposerBannerStack";
+import { ComposerSurface } from "./chat/ComposerSurface";
 import {
   hasAvailableClaudeCompactionProvider,
   hasDismissedResumeCompaction,
   shouldOfferResumeCompaction,
 } from "./chat/ContextWindowMeter.logic";
 import { deriveLatestContextWindowSnapshot, formatContextWindowTokens } from "../lib/contextWindow";
-import { ThreadSyncStatusPill } from "./chat/ThreadSyncStatusPill";
 import {
   DRAFT_HERO_TRANSITION_ANIMATION_ID,
   DRAFT_HERO_TRANSITION_DURATION_MS,
@@ -350,7 +351,6 @@ import {
   shouldDockDraftHeroForSubmission,
   shouldReleaseTimelineAnchorForToolActivity,
   shouldShowBranchMismatchBanner,
-  shoulderTabReserve,
   shouldShowPlanFollowUpPrompt,
   getStartedThreadModelChangeBlockReason,
   LAST_INVOKED_SCRIPT_BY_PROJECT_KEY,
@@ -401,10 +401,13 @@ import {
   AlertDialogTitle,
 } from "./ui/alert-dialog";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { ServerUpdateAction, ServerUpdateProgress } from "./ServerUpdateAction";
+import { ServerUpdateAction } from "./ServerUpdateAction";
+import { ComposerServerUpdateStatus } from "./chat/ComposerServerUpdateStatus";
 import {
   buildVersionMismatchDismissalKey,
+  dismissServerUpdateFailure,
   dismissVersionMismatch,
+  isServerUpdateFailureDismissed,
   isVersionMismatchDismissed,
   resolveServerConfigVersionMismatch,
   resolveServerSelfUpdateCapability,
@@ -2156,6 +2159,12 @@ function ChatViewContent(props: ChatViewProps) {
   const serverUpdateState = useAtomValue(
     serverEnvironment.updateStateAtom(serverUpdateEnvironmentId),
   );
+  const [dismissedServerUpdateState, setDismissedServerUpdateState] = useState<
+    typeof serverUpdateState | null
+  >(null);
+  const serverUpdateFailureDismissed =
+    serverUpdateState === dismissedServerUpdateState ||
+    isServerUpdateFailureDismissed(serverUpdateState);
   const systemComposerBannerItems = useMemo<ComposerBannerStackItem[]>(() => {
     const items: ComposerBannerStackItem[] = [];
     const updateRunning = serverUpdateState.status === "running";
@@ -2183,8 +2192,8 @@ function ChatViewContent(props: ChatViewProps) {
         items.push({
           id: `environment-unavailable:${activeEnvironmentUnavailableState.environmentId}`,
           variant: "default",
-          // Live connection status: calm styling, but it must front the stack.
-          urgent: true,
+          // Prioritize live connection progress among the notices.
+          priority: "urgent",
           icon: (
             <span
               className="size-1.5 animate-status-pulse rounded-full bg-foreground"
@@ -2231,29 +2240,24 @@ function ChatViewContent(props: ChatViewProps) {
     if (
       serverUpdateEnvironmentId &&
       !reconnectingThroughVersionSkew &&
-      (serverUpdateState.status !== "idle" ||
-        (showVersionMismatchBanner && versionMismatch && versionMismatchDismissKey))
+      (serverUpdateState.status === "idle"
+        ? showVersionMismatchBanner
+        : !serverUpdateFailureDismissed)
     ) {
       const updateInProgress = serverUpdateState.status === "running";
       const updateFailed = serverUpdateState.status === "failed";
       items.push({
         id: `server-version:${serverUpdateEnvironmentId}`,
         variant: updateFailed ? "error" : "default",
-        // A running update is live progress the user is waiting on; only the
-        // idle "update available" offer is calm enough to stack behind.
-        urgent: updateInProgress,
-        // In-flight and failed states carry their own status dot inside
-        // ServerUpdateProgress; only the idle offer needs an icon.
-        icon:
-          updateInProgress || updateFailed ? null : (
-            <span
-              className="size-1.5 rounded-full border border-muted-foreground/40"
-              aria-hidden="true"
-            />
-          ),
+        // Prioritize update progress over passive notices, but keep activity attached.
+        priority: updateInProgress ? "urgent" : "notice",
+        icon: <InfoIcon aria-hidden />,
         title:
           updateInProgress || updateFailed ? (
-            `${updateFailed ? "Could not update" : "Updating"} ${versionMismatchServerLabel}`
+            <ComposerServerUpdateStatus
+              state={serverUpdateState}
+              serverLabel={versionMismatchServerLabel}
+            />
           ) : versionMismatch ? (
             <Tooltip>
               <TooltipTrigger
@@ -2272,11 +2276,9 @@ function ChatViewContent(props: ChatViewProps) {
             "Server update available"
           ),
         description:
-          updateInProgress || updateFailed ? (
-            <ServerUpdateProgress state={serverUpdateState} />
-          ) : versionMismatchSelfUpdate === "desktop-managed" ? (
-            serverUpdateGuidance(versionMismatchSelfUpdate, versionMismatchServerLabel)
-          ) : null,
+          !updateInProgress && !updateFailed && versionMismatchSelfUpdate === "desktop-managed"
+            ? serverUpdateGuidance(versionMismatchSelfUpdate, versionMismatchServerLabel)
+            : undefined,
         // The desktop-managed guidance is already the description; the action
         // slot would only repeat it.
         actions:
@@ -2291,11 +2293,15 @@ function ChatViewContent(props: ChatViewProps) {
               label={updateFailed ? "Retry" : "Update"}
             />
           ),
-        ...(updateInProgress || updateFailed || !versionMismatchDismissKey
+        ...(updateInProgress || (!updateFailed && !versionMismatchDismissKey)
           ? {}
           : {
               dismissLabel: "Dismiss update notice",
               onDismiss: () => {
+                if (updateFailed) {
+                  dismissServerUpdateFailure(serverUpdateState);
+                  setDismissedServerUpdateState(serverUpdateState);
+                }
                 dismissVersionMismatch(versionMismatchDismissKey);
                 setDismissedVersionMismatchKey(versionMismatchDismissKey);
               },
@@ -2310,6 +2316,7 @@ function ChatViewContent(props: ChatViewProps) {
     navigate,
     setDismissedVersionMismatchKey,
     showVersionMismatchBanner,
+    serverUpdateFailureDismissed,
     serverUpdateState,
     versionMismatch,
     versionMismatchDismissKey,
@@ -2397,21 +2404,6 @@ function ChatViewContent(props: ChatViewProps) {
     () => deriveActivePlanState(threadActivities, activeLatestTurn?.turnId ?? undefined),
     [activeLatestTurn?.turnId, threadActivities],
   );
-  // Current step for the in-chat working row: only for the running turn's own
-  // plan (deriveActivePlanState falls back to older turns' plans, which must
-  // not label fresh work). Falls back to the first pending step so an
-  // all-pending freshly written plan labels the row, matching the chip and
-  // the server's planProgress.
-  const workingStepLabel = useMemo(() => {
-    if (!activePlan || activePlan.turnId !== (activeLatestTurn?.turnId ?? null)) {
-      return null;
-    }
-    return (
-      activePlan.steps.find((step) => step.status === "inProgress")?.step ??
-      activePlan.steps.find((step) => step.status === "pending")?.step ??
-      null
-    );
-  }, [activeLatestTurn?.turnId, activePlan]);
   const showPlanFollowUpPrompt = shouldShowPlanFollowUpPrompt({
     pendingUserInputCount: pendingUserInputs.length,
     interactionMode,
@@ -4442,10 +4434,20 @@ function ChatViewContent(props: ChatViewProps) {
   // partition (same shell, same capability gate, same PR auto-settle input)
   // so the banner and the sidebar row never disagree.
   const activeThreadShell = useThreadShell(isServerThread ? activeThreadRef : null);
-  const activeComposerTasksProgress =
-    activeLatestTurn !== null && !latestTurnSettled
-      ? (activeThreadShell?.planProgress ?? null)
-      : null;
+  const activeComposerTasksProgress = useMemo(() => {
+    if (!activeLatestTurn || latestTurnSettled || activePlan?.turnId !== activeLatestTurn.turnId) {
+      return null;
+    }
+    const currentStep =
+      activePlan.steps.find((step) => step.status === "inProgress") ??
+      activePlan.steps.find((step) => step.status === "pending");
+    if (!currentStep) return null;
+    return {
+      step: currentStep.step,
+      completedSteps: activePlan.steps.filter((step) => step.status === "completed").length,
+      totalSteps: activePlan.steps.length,
+    };
+  }, [activeLatestTurn, activePlan, latestTurnSettled]);
   const activeComposerTaskSteps =
     activeComposerTasksProgress && activePlan && activePlan.turnId === activeLatestTurn?.turnId
       ? activePlan.steps
@@ -4460,9 +4462,8 @@ function ChatViewContent(props: ChatViewProps) {
       setComposerOverlayHeight((currentHeight) =>
         currentHeight === nextHeight ? currentHeight : nextHeight,
       );
-      const nextClearance = Math.max(0, nextHeight - shoulderTabReserve(composerOverlayElement));
       setScrollToEndClearance((currentClearance) =>
-        currentClearance === nextClearance ? currentClearance : nextClearance,
+        currentClearance === nextHeight ? currentClearance : nextHeight,
       );
     };
 
@@ -4471,11 +4472,8 @@ function ChatViewContent(props: ChatViewProps) {
 
     const resizeObserver = new ResizeObserver(updateHeight);
     resizeObserver.observe(composerOverlayElement);
-    const tabObserver = new MutationObserver(updateHeight);
-    tabObserver.observe(composerOverlayElement, { childList: true, subtree: true });
     return () => {
       resizeObserver.disconnect();
-      tabObserver.disconnect();
     };
   }, [composerOverlayElement]);
 
@@ -4803,6 +4801,7 @@ function ChatViewContent(props: ChatViewProps) {
     return {
       id: `background-liveness:${activeThread.id}`,
       variant: "default",
+      priority: "activity",
       icon: (
         <span
           className={cn("size-1.5 rounded-full bg-foreground", working && "animate-status-pulse")}
@@ -4849,13 +4848,6 @@ function ChatViewContent(props: ChatViewProps) {
       onDismiss: acknowledgeActiveThreadWoke,
     };
   }, [acknowledgeActiveThreadWoke, activeThread?.id, activeThreadWokeVisible]);
-  // The stack renders items[0] front-most and tucks the rest behind hover, so
-  // ordering is priority: urgent system banners (error/warning variants plus
-  // calm-styled live states flagged `urgent`, like update progress), then
-  // background liveness — its Stop button is the only stop affordance for
-  // settled turns, so a passive "update available" notice must not cover it —
-  // then calm system banners, the woke and branch-mismatch notices, and the
-  // informational parked-thread banner last — it must never cover another.
   const parkedThreadBannerItem = useMemo<ComposerBannerStackItem | null>(() => {
     if (!activeThreadSnoozed && !activeThreadSettled) {
       return null;
@@ -5006,10 +4998,6 @@ function ChatViewContent(props: ChatViewProps) {
     void handleSwitchCheckoutToThread();
   }, [gitStatusQuery.data?.hasWorkingTreeChanges, handleSwitchCheckoutToThread]);
   const composerBannerItems = useMemo<ComposerBannerStackItem[]>(() => {
-    const isUrgentSystemItem = (item: ComposerBannerStackItem) =>
-      item.urgent === true || item.variant === "error" || item.variant === "warning";
-    const urgentSystemItems = systemComposerBannerItems.filter(isUrgentSystemItem);
-    const calmSystemItems = systemComposerBannerItems.filter((item) => !isUrgentSystemItem(item));
     const backgroundLivenessItems =
       backgroundLivenessBannerItem === null ? [] : [backgroundLivenessBannerItem];
     const resumeCompactionItems =
@@ -5018,18 +5006,16 @@ function ChatViewContent(props: ChatViewProps) {
     const parkedThreadItems = parkedThreadBannerItem === null ? [] : [parkedThreadBannerItem];
     if (!localCheckoutBranchMismatch || !showBranchMismatchBanner || !activeBranchMismatchKey) {
       return [
-        ...urgentSystemItems,
+        ...systemComposerBannerItems,
         ...backgroundLivenessItems,
-        ...calmSystemItems,
         ...resumeCompactionItems,
         ...wokeThreadItems,
         ...parkedThreadItems,
       ];
     }
     return [
-      ...urgentSystemItems,
+      ...systemComposerBannerItems,
       ...backgroundLivenessItems,
-      ...calmSystemItems,
       ...resumeCompactionItems,
       ...wokeThreadItems,
       {
@@ -7026,8 +7012,6 @@ function ChatViewContent(props: ChatViewProps) {
     setDragActive: setIsWorkspaceFileDragActive,
     addFiles: (files) => composerRef.current?.addDroppedFiles(files),
   });
-  const externalComposerDrawerAttached =
-    composerBannerItems.length > 0 || Boolean(threadSyncPhase && !activeEnvironmentUnavailable);
 
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
@@ -7125,8 +7109,6 @@ function ChatViewContent(props: ChatViewProps) {
                 onOpenAgents={addAgentsSurface}
                 key={activeThread.id}
                 isWorking={isWorking}
-                workingStepLabel={workingStepLabel}
-                activeTurnStartedAt={activeWorkStartedAt}
                 listRef={legendListRef}
                 timelineEntries={timelineEntries}
                 latestTurn={activeLatestTurn}
@@ -7194,7 +7176,7 @@ function ChatViewContent(props: ChatViewProps) {
                   {isDraftHeroState ? (
                     <div className="absolute inset-x-0 bottom-full z-0">
                       <div
-                        className="pb-8 group-has-[.chat-composer-shoulder-tab]/composer-stack:pb-4"
+                        className="pb-8 group-has-data-[composer-shoulder-tab]/composer-stack:pb-4"
                         style={
                           forceExpandedMobileComposer
                             ? {
@@ -7208,13 +7190,7 @@ function ChatViewContent(props: ChatViewProps) {
                           activeProjectTitle={activeProject?.title ?? null}
                         />
                       </div>
-                      <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
                     </div>
-                  ) : (
-                    <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
-                  )}
-                  {threadSyncPhase && !activeEnvironmentUnavailable ? (
-                    <ThreadSyncStatusPill phase={threadSyncPhase} />
                   ) : null}
                   <div
                     className="relative"
@@ -7224,14 +7200,8 @@ function ChatViewContent(props: ChatViewProps) {
                         : undefined
                     }
                   >
-                    <div
-                      className={cn(
-                        "chat-composer-glass-shell relative mx-auto w-full max-w-3xl",
-                        externalComposerDrawerAttached && "chat-composer-glass-shell-attached",
-                        showComposerContextStrip && "chat-composer-glass-shell-with-context",
-                      )}
-                    >
-                      <div className="chat-composer-glass-host relative z-10 w-full rounded-[22px]">
+                    <ComposerSurface.Shell contextStrip={showComposerContextStrip}>
+                      <ComposerSurface.Host>
                         <div ref={attachDraftHeroComposerAnchorRef} className="relative z-10">
                           <ChatComposer
                             composerRef={composerRef}
@@ -7261,7 +7231,7 @@ function ChatViewContent(props: ChatViewProps) {
                                   : null
                             }
                             isPreparingWorktree={isPreparingWorktree}
-                            externalDrawerAttached={externalComposerDrawerAttached}
+                            bannerItems={composerBannerItems}
                             environmentUnavailable={activeEnvironmentUnavailableState}
                             activePendingApproval={activePendingApproval}
                             pendingApprovals={pendingApprovals}
@@ -7276,6 +7246,9 @@ function ChatViewContent(props: ChatViewProps) {
                             activeProposedPlan={activeProposedPlan}
                             activeTasksProgress={activeComposerTasksProgress}
                             activeTaskSteps={activeComposerTaskSteps}
+                            isWorking={isWorking}
+                            activeWorkStartedAt={activeWorkStartedAt}
+                            threadSyncPhase={activeEnvironmentUnavailable ? null : threadSyncPhase}
                             runtimeMode={runtimeMode}
                             interactionMode={interactionMode}
                             lockedProvider={lockedProvider}
@@ -7322,7 +7295,7 @@ function ChatViewContent(props: ChatViewProps) {
                             onExpandImage={onExpandTimelineImage}
                           />
                         </div>
-                      </div>
+                      </ComposerSurface.Host>
                       <div className="min-h-0">
                         <div
                           data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
@@ -7360,7 +7333,7 @@ function ChatViewContent(props: ChatViewProps) {
                           )}
                         </div>
                       </div>
-                    </div>
+                    </ComposerSurface.Shell>
                     <div
                       aria-hidden
                       className="h-[calc(env(safe-area-inset-bottom)+1rem)] sm:h-[calc(env(safe-area-inset-bottom)+1.25rem)]"
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 9a8908bb139a7a3786a6e96f6fd5e59544d19384..2877f27788badf59780547de5ec18c2ce25e020e 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -10,7 +10,6 @@ import type {
   ScopedThreadRef,
   ServerProvider,
   ThreadId,
-  TurnId,
 } from "@t3tools/contracts";
 import {
   ProviderDriverKind,
@@ -72,10 +71,20 @@ import { ComposerStashBadge } from "./ComposerStashBadge";
 import { ComposerStashMenu } from "./ComposerStashMenu";
 import {
   ComposerTasksBadge,
+  ComposerTasksContent,
   ComposerTasksDrawer,
   type ComposerTaskStep,
   type ComposerTasksProgress,
 } from "./ComposerTasksBadge";
+import { ComposerActivityRow, type ComposerActivityStatus } from "./ComposerActivityStatus";
+import type { ThreadSyncPhase } from "../../threadSync";
+import { ComposerBanner } from "./ComposerBanner";
+import { ComposerSurface } from "./ComposerSurface";
+import {
+  ComposerBannerStack,
+  type ComposerBannerStackContent,
+  type ComposerBannerStackItem,
+} from "./ComposerBannerStack";
 import { compressImageForStash, prepareImageForAttachment } from "../../lib/imageCompression";
 import {
   fileAttachmentTooLargeMessage,
@@ -595,7 +604,7 @@ export interface ChatComposerProps {
   isSendBusy: boolean;
   sendDisabledReason: string | null;
   isPreparingWorktree: boolean;
-  externalDrawerAttached: boolean;
+  bannerItems: readonly ComposerBannerStackItem[];
   environmentUnavailable: {
     readonly label: string;
     readonly connection: EnvironmentConnectionPresentation;
@@ -623,6 +632,9 @@ export interface ChatComposerProps {
   activeProposedPlan: Thread["proposedPlans"][number] | null;
   activeTasksProgress: ComposerTasksProgress | null;
   activeTaskSteps: readonly ComposerTaskStep[] | null;
+  isWorking: boolean;
+  activeWorkStartedAt: string | null;
+  threadSyncPhase: ThreadSyncPhase | null;
 
   // Mode
   runtimeMode: RuntimeMode;
@@ -723,8 +735,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     respondingRequestIds,
     showPlanFollowUpPrompt,
     activeProposedPlan,
-    activeTasksProgress,
-    activeTaskSteps,
+    isWorking,
+    activeWorkStartedAt,
     runtimeMode,
     interactionMode,
     lockedProvider,
@@ -763,6 +775,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     setThreadError,
     onExpandImage,
   } = props;
+  const activeTasksProgress = props.threadSyncPhase === null ? props.activeTasksProgress : null;
+  const activeTaskSteps = props.threadSyncPhase === null ? props.activeTaskSteps : null;
   // ------------------------------------------------------------------
   // Store subscriptions (prompt / images / terminal contexts)
   // ------------------------------------------------------------------
@@ -1164,7 +1178,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const [composerMenuAnchor, setComposerMenuAnchor] = useState<HTMLDivElement | null>(null);
   const [isStashMenuOpen, setIsStashMenuOpen] = useState(false);
   const [isTasksDrawerOpen, setIsTasksDrawerOpen] = useState(false);
-  const [dismissedTasksTurnId, setDismissedTasksTurnId] = useState<TurnId | null>(null);
   const [stashPulse, setStashPulse] = useState<{ key: number; active: boolean }>({
     key: 0,
     active: false,
@@ -2574,6 +2587,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const deleteStashEntry = useCallback(
     (entry: PromptStashEntry) => {
       const { entry: removed, durable } = takeStashEntry(entry.id);
+      if (!stashQueue.some((candidate) => candidate.id !== entry.id)) {
+        setIsStashMenuOpen(false);
+      }
       if (durable && removed) {
         for (const file of removed.files ?? []) {
           releasePersistedAttachmentUpload({
@@ -2593,7 +2609,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         });
       }
     },
-    [takeStashEntry],
+    [stashQueue, takeStashEntry],
   );
 
   const stashCurrentPrompt = useCallback(async () => {
@@ -2806,26 +2822,22 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   const toggleTasksDrawer = useCallback(() => {
     setIsTasksDrawerOpen((open) => !open);
   }, []);
-  const activeTasksTurnId = activeThread?.latestTurn?.turnId ?? null;
-  const tasksDismissedForActiveTurn =
-    activeTasksTurnId !== null && dismissedTasksTurnId === activeTasksTurnId;
-  const visibleTasksProgress = tasksDismissedForActiveTurn ? null : activeTasksProgress;
-  const visibleTaskSteps = tasksDismissedForActiveTurn ? null : activeTaskSteps;
+  const activityStatus = useMemo<ComposerActivityStatus | undefined>(
+    () =>
+      props.threadSyncPhase
+        ? { kind: "sync", phase: props.threadSyncPhase }
+        : isWorking
+          ? { kind: "working", startedAt: activeWorkStartedAt }
+          : undefined,
+    [props.threadSyncPhase, isWorking, activeWorkStartedAt],
+  );
+  const hasBannerItems = props.bannerItems.length > 0;
   const hasBlockingComposerTopDrawer =
     activePendingApproval !== null || pendingUserInputs.length > 0;
-  const dismissTasks = useCallback(() => {
-    if (activeTasksTurnId !== null) {
-      setDismissedTasksTurnId(activeTasksTurnId);
-    }
-    setIsTasksDrawerOpen(false);
-  }, [activeTasksTurnId]);
   const showInlineStashBadge =
     stashQueue.length > 0 &&
     !isComposerApprovalState &&
-    (props.externalDrawerAttached ||
-      showComposerTopDrawer ||
-      isTasksDrawerOpen ||
-      isComposerCollapsedMobile);
+    (hasBannerItems || showComposerTopDrawer || isTasksDrawerOpen || isMobileViewport);
   const inlineStashBadge = showInlineStashBadge ? (
     <ComposerStashBadge
       count={stashQueue.length}
@@ -2837,37 +2849,66 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     />
   ) : null;
   const showInlineTasksBadge =
-    visibleTasksProgress !== null &&
-    visibleTaskSteps !== null &&
+    activeTasksProgress !== null &&
+    activeTaskSteps !== null &&
     !isTasksDrawerOpen &&
     !hasBlockingComposerTopDrawer &&
-    (props.externalDrawerAttached || showComposerTopDrawer || isComposerCollapsedMobile);
+    (hasBannerItems || showComposerTopDrawer || isComposerCollapsedMobile);
   const inlineTasksBadge = showInlineTasksBadge ? (
     <ComposerTasksBadge
       expanded={false}
-      onDismiss={dismissTasks}
       onToggle={toggleTasksDrawer}
       placement="inline"
-      progress={visibleTasksProgress}
-      steps={visibleTaskSteps}
+      progress={activeTasksProgress}
+      steps={activeTaskSteps}
+      activityStatus={activityStatus}
     />
   ) : null;
   const showShoulderTabs =
-    !props.externalDrawerAttached &&
-    !showComposerTopDrawer &&
-    !isTasksDrawerOpen &&
-    !isComposerCollapsedMobile;
+    !hasBannerItems && !showComposerTopDrawer && !isTasksDrawerOpen && !isComposerCollapsedMobile;
   const hasShoulderTab =
     showShoulderTabs &&
-    (stashQueue.length > 0 ||
-      (visibleTasksProgress !== null &&
-        visibleTaskSteps !== null &&
-        visibleTasksProgress.totalSteps > 0));
+    (activityStatus !== undefined ||
+      (stashQueue.length > 0 && !showInlineStashBadge) ||
+      (activeTasksProgress !== null &&
+        activeTaskSteps !== null &&
+        activeTasksProgress.totalSteps > 0));
+  const tasksHostActivityStatus =
+    activeTasksProgress !== null &&
+    activeTasksProgress.totalSteps > 0 &&
+    activeTaskSteps !== null &&
+    !hasBlockingComposerTopDrawer &&
+    (showShoulderTabs || showInlineTasksBadge || isTasksDrawerOpen);
+  const standaloneActivityStatus = !tasksHostActivityStatus ? activityStatus : undefined;
+  const activityStackContent = hasBannerItems ? (
+    !hasBlockingComposerTopDrawer && activeTasksProgress && activeTaskSteps ? (
+      <ComposerTasksContent
+        expanded={isTasksDrawerOpen}
+        onToggle={toggleTasksDrawer}
+        progress={activeTasksProgress}
+        steps={activeTaskSteps}
+        activityStatus={activityStatus}
+      />
+    ) : activityStatus ? (
+      <ComposerActivityRow status={activityStatus} />
+    ) : null
+  ) : null;
+  const activityStackItem: ComposerBannerStackContent | null = activityStackContent
+    ? {
+        id: "composer-activity",
+        variant: "default",
+        priority: "activity",
+        content: activityStackContent,
+      }
+    : null;
+  const bannerStackItems = activityStackItem
+    ? [...props.bannerItems, activityStackItem]
+    : props.bannerItems;
   useEffect(() => {
-    if (visibleTasksProgress === null || visibleTaskSteps === null) {
+    if (activeTasksProgress === null || activeTaskSteps === null) {
       setIsTasksDrawerOpen(false);
     }
-  }, [visibleTaskSteps, visibleTasksProgress]);
+  }, [activeTaskSteps, activeTasksProgress]);
 
   useEffect(() => {
     if (hasBlockingComposerTopDrawer) {
@@ -3374,62 +3415,49 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       onDragOverCapture={composerMentionDragHandlers.onDragOver}
       onDragLeaveCapture={onComposerMentionDragLeaveCapture}
       onDropCapture={composerMentionDragHandlers.onDrop}
-      className={cn("mx-auto w-full min-w-0 max-w-3xl", hasShoulderTab && "pt-7")}
+      className="mx-auto w-full min-w-0 max-w-3xl"
       data-chat-composer-form="true"
     >
+      <ComposerBannerStack key={activeThreadId} className="relative z-0" items={bannerStackItems} />
+      {!activityStackItem &&
+      (inlineTasksBadge || (standaloneActivityStatus && !showShoulderTabs)) ? (
+        <ComposerBanner.Attachment>
+          <ComposerBanner.Root data-chat-composer-activity-strip="true">
+            {inlineTasksBadge ??
+              (standaloneActivityStatus ? (
+                <ComposerActivityRow status={standaloneActivityStatus} />
+              ) : null)}
+          </ComposerBanner.Root>
+        </ComposerBanner.Attachment>
+      ) : null}
       {showComposerTopDrawer && (!isTasksDrawerOpen || hasBlockingComposerTopDrawer) ? (
-        <div
-          className="chat-composer-top-drawer"
-          data-chat-composer-top-drawer="true"
-          data-variant={activePendingApproval ? "warning" : "info"}
-        >
-          {!isComposerCollapsedMobile && activePendingApproval ? (
-            <div className="flex min-w-0 flex-wrap items-center gap-1 px-3 py-1.5 sm:px-4">
-              <ComposerPendingApprovalPanel
-                approval={activePendingApproval}
-                pendingCount={pendingApprovals.length}
-              />
-              <div className="flex min-w-0 flex-wrap items-center gap-0.5">
-                <ComposerPendingApprovalActions
-                  requestId={activePendingApproval.requestId}
-                  isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
-                  options={activePendingApproval.options}
-                  onRespondToApproval={onRespondToApproval}
-                />
-              </div>
-            </div>
-          ) : !isComposerCollapsedMobile && pendingUserInputs.length > 0 ? (
-            <ComposerPendingUserInputPanel
-              pendingUserInputs={pendingUserInputs}
-              respondingRequestIds={respondingRequestIds}
-              answers={activePendingDraftAnswers}
-              questionIndex={activePendingQuestionIndex}
-              onToggleOption={onSelectActivePendingUserInputOption}
-              onAdvance={onAdvanceActivePendingUserInput}
-            />
-          ) : !isComposerCollapsedMobile && showPlanFollowUpPrompt && activeProposedPlan ? (
-            <ComposerPlanFollowUpBanner
-              key={activeProposedPlan.id}
-              planTitle={proposedPlanTitle(activeProposedPlan.planMarkdown) ?? null}
-            />
-          ) : isComposerCollapsedMobile && activePendingApproval ? (
-            <div data-chat-composer-collapsed-controls="true">
-              <ComposerPendingApprovalPanel
-                approval={activePendingApproval}
-                pendingCount={pendingApprovals.length}
-                className="px-3 pt-2 sm:px-4"
-              />
-              <div className="flex flex-wrap items-center justify-end gap-1 px-3 pt-2 pb-3 sm:px-4">
-                <ComposerPendingApprovalActions
-                  requestId={activePendingApproval.requestId}
-                  isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
-                  options={activePendingApproval.options}
-                  onRespondToApproval={onRespondToApproval}
-                />
-              </div>
-            </div>
-          ) : isComposerCollapsedMobile && pendingUserInputs.length > 0 ? (
-            <div data-chat-composer-collapsed-controls="true">
+        <ComposerBanner.Attachment>
+          <ComposerBanner.Root
+            data-chat-composer-top-drawer="true"
+            variant={activePendingApproval ? "warning" : "info"}
+          >
+            {activePendingApproval ? (
+              <ComposerBanner.Row
+                layout="wrap-actions"
+                data-chat-composer-collapsed-controls="true"
+              >
+                <ComposerBanner.Icon />
+                <ComposerBanner.Content>
+                  <ComposerPendingApprovalPanel
+                    approval={activePendingApproval}
+                    pendingCount={pendingApprovals.length}
+                  />
+                </ComposerBanner.Content>
+                <ComposerBanner.Actions>
+                  <ComposerPendingApprovalActions
+                    requestId={activePendingApproval.requestId}
+                    isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}
+                    options={activePendingApproval.options}
+                    onRespondToApproval={onRespondToApproval}
+                  />
+                </ComposerBanner.Actions>
+              </ComposerBanner.Row>
+            ) : !isComposerCollapsedMobile && pendingUserInputs.length > 0 ? (
               <ComposerPendingUserInputPanel
                 pendingUserInputs={pendingUserInputs}
                 respondingRequestIds={respondingRequestIds}
@@ -3438,96 +3466,116 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 onToggleOption={onSelectActivePendingUserInputOption}
                 onAdvance={onAdvanceActivePendingUserInput}
               />
-              <div className="px-3 pb-3 sm:px-4">
-                <div
-                  data-chat-composer-mobile-pending-compact="true"
-                  className={cn(
-                    "flex min-w-0 items-center gap-2 rounded-lg border border-border/55 bg-background/55 p-1.5 pl-3 transition-colors hover:bg-background/80",
-                    !activePendingProgress?.activeQuestion?.multiSelect && "p-0",
-                  )}
-                >
-                  <button
-                    type="button"
+            ) : !isComposerCollapsedMobile && showPlanFollowUpPrompt && activeProposedPlan ? (
+              <ComposerPlanFollowUpBanner
+                key={activeProposedPlan.id}
+                planTitle={proposedPlanTitle(activeProposedPlan.planMarkdown) ?? null}
+              />
+            ) : isComposerCollapsedMobile && pendingUserInputs.length > 0 ? (
+              <div data-chat-composer-collapsed-controls="true">
+                <ComposerPendingUserInputPanel
+                  pendingUserInputs={pendingUserInputs}
+                  respondingRequestIds={respondingRequestIds}
+                  answers={activePendingDraftAnswers}
+                  questionIndex={activePendingQuestionIndex}
+                  onToggleOption={onSelectActivePendingUserInputOption}
+                  onAdvance={onAdvanceActivePendingUserInput}
+                />
+                <ComposerBanner.Body>
+                  <div
+                    data-chat-composer-mobile-pending-compact="true"
                     className={cn(
-                      "min-w-0 flex-1 truncate bg-transparent py-1.5 text-left text-sm",
-                      activePendingProgress?.customAnswer ? "text-foreground" : "text-placeholder",
-                      !activePendingProgress?.activeQuestion?.multiSelect && "px-3 py-2",
+                      "flex min-w-0 items-center gap-2 rounded-lg border border-border/55 bg-background/55 p-1.5 pl-3 transition-colors hover:bg-background/80",
+                      !activePendingProgress?.activeQuestion?.multiSelect && "p-0",
                     )}
-                    onPointerDown={(event) => event.preventDefault()}
-                    onClick={expandMobileComposer}
-                    aria-label="Write custom answer"
                   >
-                    {activePendingProgress?.customAnswer || "Write custom answer"}
-                  </button>
-                  {inlineTasksBadge}
-                  {inlineStashBadge}
-                  {activePendingProgress?.activeQuestion?.multiSelect ? (
-                    <ComposerPrimaryActions
-                      compact
-                      pendingAction={pendingPrimaryAction}
-                      isRunning={false}
-                      showPlanFollowUpPrompt={false}
-                      promptHasText={false}
-                      isSendBusy={isSendBusy}
-                      sendDisabledReason={sendDisabledReason}
-                      isConnecting={isConnecting}
-                      isEnvironmentUnavailable={
-                        environmentUnavailable !== null ||
-                        noProviderAvailable ||
-                        projectSelectionRequired
-                      }
-                      isPreparingWorktree={false}
-                      hasSendableContent={false}
-                      preserveComposerFocusOnPointerDown
-                      onPreviousPendingQuestion={onPreviousActivePendingUserInputQuestion}
-                      onInterrupt={handleInterruptPrimaryAction}
-                      onImplementPlanInNewThread={handleImplementPlanInNewThreadPrimaryAction}
-                    />
-                  ) : null}
-                </div>
+                    <button
+                      type="button"
+                      className={cn(
+                        "min-w-0 flex-1 truncate bg-transparent py-1.5 text-left text-sm",
+                        activePendingProgress?.customAnswer
+                          ? "text-foreground"
+                          : "text-placeholder",
+                        !activePendingProgress?.activeQuestion?.multiSelect && "px-3 py-2",
+                      )}
+                      onPointerDown={(event) => event.preventDefault()}
+                      onClick={expandMobileComposer}
+                      aria-label="Write custom answer"
+                    >
+                      {activePendingProgress?.customAnswer || "Write custom answer"}
+                    </button>
+                    {inlineStashBadge}
+                    {activePendingProgress?.activeQuestion?.multiSelect ? (
+                      <ComposerPrimaryActions
+                        compact
+                        pendingAction={pendingPrimaryAction}
+                        isRunning={false}
+                        showPlanFollowUpPrompt={false}
+                        promptHasText={false}
+                        isSendBusy={isSendBusy}
+                        sendDisabledReason={sendDisabledReason}
+                        isConnecting={isConnecting}
+                        isEnvironmentUnavailable={
+                          environmentUnavailable !== null ||
+                          noProviderAvailable ||
+                          projectSelectionRequired
+                        }
+                        isPreparingWorktree={false}
+                        hasSendableContent={false}
+                        preserveComposerFocusOnPointerDown
+                        onPreviousPendingQuestion={onPreviousActivePendingUserInputQuestion}
+                        onInterrupt={handleInterruptPrimaryAction}
+                        onImplementPlanInNewThread={handleImplementPlanInNewThreadPrimaryAction}
+                      />
+                    ) : null}
+                  </div>
+                </ComposerBanner.Body>
               </div>
-            </div>
-          ) : null}
-        </div>
+            ) : null}
+          </ComposerBanner.Root>
+        </ComposerBanner.Attachment>
       ) : null}
-      {isTasksDrawerOpen &&
+      {!activityStackItem &&
+      isTasksDrawerOpen &&
       !hasBlockingComposerTopDrawer &&
-      visibleTasksProgress &&
-      visibleTaskSteps ? (
+      activeTasksProgress &&
+      activeTaskSteps ? (
         <ComposerTasksDrawer
-          onDismiss={dismissTasks}
           onCollapse={toggleTasksDrawer}
-          progress={visibleTasksProgress}
-          steps={visibleTaskSteps}
+          progress={activeTasksProgress}
+          steps={activeTaskSteps}
+          activityStatus={activityStatus}
         />
       ) : null}
+      {hasShoulderTab ? (
+        <ComposerBanner.Dock>
+          {standaloneActivityStatus ? (
+            <ComposerBanner.Root width="content" data-composer-shoulder-tab>
+              <ComposerActivityRow status={standaloneActivityStatus} />
+            </ComposerBanner.Root>
+          ) : null}
+          {activeTasksProgress && activeTaskSteps ? (
+            <ComposerTasksBadge
+              expanded={false}
+              onToggle={toggleTasksDrawer}
+              progress={activeTasksProgress}
+              steps={activeTaskSteps}
+              activityStatus={activityStatus}
+            />
+          ) : null}
+          {!showInlineStashBadge ? (
+            <ComposerStashBadge
+              count={stashQueue.length}
+              menuOpen={isStashMenuOpen}
+              pulseKey={stashPulse.key}
+              pulsing={stashPulse.active}
+              onToggleMenu={toggleStashMenu}
+            />
+          ) : null}
+        </ComposerBanner.Dock>
+      ) : null}
       <div className="relative">
-        {showShoulderTabs && visibleTasksProgress && visibleTaskSteps ? (
-          <ComposerTasksBadge
-            expanded={false}
-            hasTrailingShoulder={stashQueue.length > 0}
-            onDismiss={dismissTasks}
-            onToggle={toggleTasksDrawer}
-            progress={visibleTasksProgress}
-            steps={visibleTaskSteps}
-          />
-        ) : null}
-        {showShoulderTabs ? (
-          <ComposerStashBadge
-            count={stashQueue.length}
-            menuOpen={isStashMenuOpen}
-            pulseKey={stashPulse.key}
-            pulsing={stashPulse.active}
-            onToggleMenu={toggleStashMenu}
-          />
-        ) : null}
-        <div
-          data-chat-composer-main-surface="true"
-          className={cn(
-            "group relative z-10 rounded-[22px] p-px transition-colors duration-200",
-            composerProviderState.composerFrameClassName,
-          )}
-        >
+        <ComposerSurface.Main className={composerProviderState.composerFrameClassName}>
           <div
             ref={composerSurfaceRef}
             data-chat-composer-surface="true"
@@ -3559,7 +3607,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     : prompt.trim() ||
                       (noProviderAvailable ? "Enable a provider in Settings" : "Ask anything...")}
                 </button>
-                {inlineTasksBadge}
                 {inlineStashBadge}
                 <button
                   type="button"
@@ -3920,7 +3967,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     data-chat-composer-mobile-pending-actions="true"
                     className="absolute bottom-0 right-0 flex items-center justify-end gap-1"
                   >
-                    {inlineTasksBadge}
                     {inlineStashBadge}
                     <ComposerPrimaryActions
                       compact
@@ -4078,7 +4124,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                       </Tooltip>
                     </>
                   ) : null}
-                  {showMobilePendingAnswerActions ? null : inlineTasksBadge}
                   {showMobilePendingAnswerActions ? null : inlineStashBadge}
                   <ComposerFooterPrimaryActions
                     compact={isComposerPrimaryActionsCompact}
@@ -4117,7 +4162,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
               </div>
             )}
           </div>
-        </div>
+        </ComposerSurface.Main>
       </div>
     </form>
   );
diff --git a/apps/web/src/components/chat/ComposerActivityStatus.tsx b/apps/web/src/components/chat/ComposerActivityStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..23de4fcc344a9968dc44390baaa8488ac09359f1
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerActivityStatus.tsx
@@ -0,0 +1,106 @@
+import { LoaderCircleIcon } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
+import { ComposerBanner } from "./ComposerBanner";
+
+export type ComposerActivityStatus =
+  | { readonly kind: "working"; readonly startedAt: string | null }
+  | { readonly kind: "sync"; readonly phase: ThreadSyncPhase };
+
+export function ComposerActivityIcon({ status }: { readonly status: ComposerActivityStatus }) {
+  if (status.kind !== "sync") return null;
+  return (
+    <ComposerBanner.Icon>
+      <LoaderCircleIcon className="motion-safe:animate-spin" />
+    </ComposerBanner.Icon>
+  );
+}
+
+export function ComposerActivityRow({ status }: { readonly status: ComposerActivityStatus }) {
+  return (
+    <ComposerBanner.Row>
+      <ComposerActivityIcon status={status} />
+      <ComposerBanner.Content>
+        <ComposerActivityLabel status={status} />
+      </ComposerBanner.Content>
+    </ComposerBanner.Row>
+  );
+}
+
+export function ComposerActivityLabel({ status }: { readonly status: ComposerActivityStatus }) {
+  if (status.kind === "sync") {
+    return (
+      <span
+        className="shrink-0 whitespace-nowrap text-muted-foreground"
+        data-composer-sync-status={status.phase}
+        role="status"
+      >
+        {threadSyncLabel(status.phase)}
+      </span>
+    );
+  }
+  return (
+    <span
+      className="shrink-0 whitespace-nowrap text-muted-foreground"
+      data-composer-working-status="true"
+    >
+      {status.startedAt ? (
+        <>
+          Working for <WorkingTimer createdAt={status.startedAt} />
+        </>
+      ) : (
+        "Working…"
+      )}
+    </span>
+  );
+}
+
+/** Updates only the elapsed text, without committing the composer or timeline each second. */
+function WorkingTimer({ createdAt }: { createdAt: string }) {
+  const textRef = useRef<HTMLSpanElement>(null);
+  const initialText = formatWorkingTimerNow(createdAt);
+
+  useEffect(() => {
+    const updateText = () => {
+      if (textRef.current) {
+        textRef.current.textContent = formatWorkingTimerNow(createdAt);
+      }
+    };
+    updateText();
+    const id = setInterval(updateText, 1000);
+    return () => clearInterval(id);
+  }, [createdAt]);
+
+  return (
+    <span ref={textRef} className="tabular-nums">
+      {initialText}
+    </span>
+  );
+}
+
+function formatWorkingTimer(startIso: string, endIso: string): string | null {
+  const startedAtMs = Date.parse(startIso);
+  const endedAtMs = Date.parse(endIso);
+  if (!Number.isFinite(startedAtMs) || !Number.isFinite(endedAtMs)) {
+    return null;
+  }
+
+  const elapsedSeconds = Math.max(0, Math.floor((endedAtMs - startedAtMs) / 1000));
+  if (elapsedSeconds < 60) {
+    return `${elapsedSeconds}s`;
+  }
+
+  const hours = Math.floor(elapsedSeconds / 3600);
+  const minutes = Math.floor((elapsedSeconds % 3600) / 60);
+  const seconds = elapsedSeconds % 60;
+
+  if (hours > 0) {
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+}
+
+function formatWorkingTimerNow(startIso: string): string {
+  return formatWorkingTimer(startIso, new Date().toISOString()) ?? "0s";
+}
diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e7601ec465eec6e499f4e29d7938a7ca1d348ac
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -0,0 +1,330 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "~/lib/utils";
+import { Button, buttonVariants } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+
+export type ComposerBannerVariant = "default" | "error" | "info" | "success" | "warning";
+
+const surfaceColors = cn(
+  "[--chat-composer-attached-surface:var(--chat-composer-glass-surface,var(--card))]",
+  "dark:[--chat-composer-attached-surface:var(--chat-composer-glass-surface,color-mix(in_srgb,var(--background)_96%,var(--color-white)))]",
+  "[html[data-theme-id]_&]:[--chat-composer-attached-surface:var(--app-theme-surface-raised)]",
+);
+
+const neutralOutline = cn(
+  "[--chat-composer-attached-outline:var(--chat-composer-outline,color-mix(in_srgb,var(--contrast-foreground)_8%,transparent))]",
+  "dark:[--chat-composer-attached-outline:var(--chat-composer-outline,color-mix(in_srgb,var(--color-white)_5%,transparent))]",
+  "[html[data-theme-id]_&]:[--chat-composer-attached-outline:var(--chat-composer-outline,var(--app-theme-toolbar-border))]",
+  "dark:[html[data-theme-id]:not([data-theme-id=t3-chat])_&]:[--chat-composer-attached-outline:var(--chat-composer-outline,color-mix(in_srgb,var(--app-theme-input)_30%,var(--background)))]",
+  "dark:[html[data-theme-id=t3-chat]_&]:[--chat-composer-attached-outline:#241e28]",
+);
+
+const variantColors: Record<ComposerBannerVariant, string> = {
+  default: neutralOutline,
+  error:
+    "[--chat-composer-attached-outline:color-mix(in_srgb,var(--error)_32%,transparent)] [--chat-composer-attached-tint:color-mix(in_srgb,var(--error)_8%,transparent)]",
+  info: "[--chat-composer-attached-outline:color-mix(in_srgb,var(--info)_32%,transparent)] [--chat-composer-attached-tint:color-mix(in_srgb,var(--info)_4%,transparent)]",
+  success:
+    "[--chat-composer-attached-outline:color-mix(in_srgb,var(--success)_32%,transparent)] [--chat-composer-attached-tint:color-mix(in_srgb,var(--success)_4%,transparent)]",
+  warning:
+    "[--chat-composer-attached-outline:color-mix(in_srgb,var(--warning)_28%,transparent)] [--chat-composer-attached-tint:color-mix(in_srgb,var(--warning)_8%,transparent)]",
+};
+
+/** Shared glass and attachment seam, also used by the command menu without banner row padding. */
+function Surface({
+  placement = "attached",
+  variant = "default",
+  className,
+  ...props
+}: ComponentProps<"div"> & {
+  placement?: "attached" | "floating";
+  variant?: ComposerBannerVariant;
+}) {
+  return (
+    <div
+      data-composer-banner-surface={placement}
+      data-variant={variant}
+      className={cn(
+        surfaceColors,
+        "relative isolate border-0 bg-transparent shadow-none [--chat-composer-attached-tint:transparent]",
+        variantColors[variant],
+        placement === "attached"
+          ? "[--chat-composer-attachment-overlap:calc(1rem+1px)] before:rounded-t-[16px]"
+          : "[--chat-composer-attachment-overlap:0px] before:rounded-[1rem]",
+        "before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:border before:border-(--chat-composer-attached-outline)",
+        "before:bg-[color-mix(in_srgb,var(--chat-composer-attached-surface)_var(--glass-opacity),transparent)] before:bg-[linear-gradient(var(--chat-composer-attached-tint),var(--chat-composer-attached-tint))] before:backdrop-blur-(--glass-blur) before:backdrop-saturate-(--glass-saturation)",
+        "before:mask-[linear-gradient(to_top,transparent_0_var(--chat-composer-attachment-overlap),black_var(--chat-composer-attachment-overlap))] before:shadow-[0_12px_28px_-18px_rgb(0_0_0/40%)] dark:before:shadow-[0_14px_32px_-18px_rgb(0_0_0/75%)]",
+        "dark:supports-[(backdrop-filter:blur(1px))_or_(-webkit-backdrop-filter:blur(1px))]:before:bg-[linear-gradient(var(--chat-composer-attached-tint),var(--chat-composer-attached-tint)),linear-gradient(to_top,transparent_0_var(--chat-composer-attachment-overlap),rgb(0_0_0/18%)_var(--chat-composer-attachment-overlap),transparent_calc(var(--chat-composer-attachment-overlap)+10px))]",
+        "not-supports-[(backdrop-filter:blur(1px))_or_(-webkit-backdrop-filter:blur(1px))]:before:bg-(--chat-composer-attached-surface)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// A peeking notice uses the first hidden notice's severity, never the attached row's.
+const peekBorder: Record<ComposerBannerVariant, string> = {
+  default: "border-(--chat-composer-attached-outline)",
+  error: "border-destructive/24",
+  info: "border-info/24",
+  success: "border-success/24",
+  warning: "border-warning/24",
+};
+
+function Peek({
+  className,
+  variant = "default",
+  ...props
+}: ComponentProps<"button"> & { variant?: ComposerBannerVariant }) {
+  return (
+    <button
+      type="button"
+      data-slot="composer-banner-peek"
+      className={cn(
+        surfaceColors,
+        neutralOutline,
+        "absolute inset-x-0 bottom-0 z-0 mx-auto h-3 w-[96%] cursor-pointer rounded-t-2xl border border-b-0 shadow-[0_6px_18px_rgb(0_0_0/6%)]",
+        "bg-[color-mix(in_srgb,var(--chat-composer-attached-surface)_var(--glass-opacity),transparent)] backdrop-blur-(--glass-blur) backdrop-saturate-(--glass-saturation)",
+        "not-supports-[(backdrop-filter:blur(1px))_or_(-webkit-backdrop-filter:blur(1px))]:bg-(--chat-composer-attached-surface)",
+        "transition-opacity duration-150 ease-out focus-visible:outline-2 focus-visible:outline-ring",
+        peekBorder[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Attachment({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="composer-banner-attachment"
+      className={cn(
+        "mx-auto -mb-[calc(1rem+1px)] w-[calc(100%-2.75rem)] max-w-[45.25rem]",
+        // Adjacent attachments share their outline, including notices outside the form.
+        "[&+[data-slot=composer-banner-attachment]_[data-composer-banner-surface=attached]]:before:rounded-none [&+[data-slot=composer-banner-attachment]_[data-composer-banner-surface=attached]]:before:border-t-0",
+        "[&+:has([data-chat-composer-form])_[data-chat-composer-form]>[data-slot=composer-banner-attachment]:first-child_[data-composer-banner-surface=attached]]:before:rounded-none [&+:has([data-chat-composer-form])_[data-chat-composer-form]>[data-slot=composer-banner-attachment]:first-child_[data-composer-banner-surface=attached]]:before:border-t-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Dock({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <Attachment
+      className={cn("flex items-end gap-1 *:data-[composer-banner-width=fill]:flex-1", className)}
+      {...props}
+    />
+  );
+}
+
+function Root({
+  className,
+  placement = "attached",
+  variant = "default",
+  width = "fill",
+  ...props
+}: ComponentProps<"div"> & {
+  placement?: "attached" | "floating";
+  variant?: ComposerBannerVariant;
+  width?: "fill" | "content";
+}) {
+  return (
+    <Surface
+      className={cn(
+        "min-w-0 p-1 pb-[calc(var(--chat-composer-attachment-overlap)+(--spacing(1)))] text-xs/4 [--composer-banner-icon-column:--spacing(7)] sm:[--composer-banner-icon-column:--spacing(6)]",
+        width === "content" ? "w-fit max-w-full flex-none" : "@container",
+        className,
+      )}
+      data-slot="composer-banner"
+      placement={placement}
+      data-composer-banner-width={width}
+      variant={variant}
+      {...props}
+    />
+  );
+}
+
+/** The same row can be a status, a list item, or an entire disclosure button. */
+function Row({
+  className,
+  render,
+  layout = "inline",
+  ...props
+}: useRender.ComponentProps<"div"> & {
+  layout?: "inline" | "wrap-actions";
+}) {
+  const rowProps = {
+    className: cn(
+      "group/banner-row grid min-h-(--composer-banner-icon-column) w-full min-w-0 grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)_auto] items-center gap-x-1 text-start",
+      "not-has-[>[data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]",
+      "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-[0.5rem] [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring",
+      layout === "wrap-actions" &&
+        "@max-[400px]:flex @max-[400px]:flex-wrap @max-[400px]:gap-y-1 @max-[400px]:*:data-[slot=composer-banner-actions]:ms-auto @max-[400px]:*:data-[slot=composer-banner-actions]:max-w-full @max-[400px]:has-[>[data-slot=composer-banner-icon]]:*:data-[slot=composer-banner-actions]:max-w-[calc(100%-var(--composer-banner-icon-column)-(--spacing(1)))] @max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column) @max-[400px]:*:data-[slot=composer-banner-content]:flex-[1_1_10rem]",
+      className,
+    ),
+    "data-composer-banner-row": "true",
+    "data-composer-banner-layout": layout,
+  };
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(rowProps, props),
+  });
+}
+
+function Icon({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="composer-banner-icon"
+      className={cn(
+        "col-start-1 row-start-1 flex w-(--composer-banner-icon-column) min-w-0 flex-none items-center justify-center text-muted-foreground [&>svg]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Content({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="composer-banner-content"
+      className={cn(
+        "col-start-2 row-start-1 flex min-w-0 items-center gap-1 *:data-[slot=composer-banner-separator]:mx-0",
+        "group-not-has-[>[data-slot=composer-banner-icon]]/banner-row:col-[1/3] group-not-has-[>[data-slot=composer-banner-icon]]/banner-row:ps-2 sm:group-not-has-[>[data-slot=composer-banner-icon]]/banner-row:ps-1.5",
+        "group-not-has-[>[data-slot=composer-banner-icon],>[data-slot=composer-banner-actions]]/banner-row:pe-2 sm:group-not-has-[>[data-slot=composer-banner-icon],>[data-slot=composer-banner-actions]]/banner-row:pe-1.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Separator() {
+  return (
+    <span
+      aria-hidden
+      data-slot="composer-banner-separator"
+      className="mx-1 inline-block flex-none text-muted-foreground/40"
+    >
+      ·
+    </span>
+  );
+}
+
+function Actions({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="composer-banner-actions"
+      className={cn(
+        "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Child rows keep their parent's columns and begin immediately after its header. */
+function Children({ className, render, ...props }: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(
+      { className: cn("grid gap-px [&_[data-composer-banner-row]]:min-h-5", className) },
+      props,
+    ),
+  });
+}
+
+/** Bounded banner content uses the app's scroll area and fades only overflowing edges. */
+function Scroll({ className, ...props }: ComponentProps<typeof ScrollArea>) {
+  return (
+    <ScrollArea
+      scrollFade
+      className={cn(
+        "h-auto max-h-[min(24rem,40dvh)] rounded-none [&>[data-slot=scroll-area-viewport][data-has-overflow-y]]:pe-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Count({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "inline-flex min-w-(--composer-banner-icon-column,1em) flex-none justify-center font-medium text-muted-foreground tabular-nums",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Body({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "min-w-0 ps-[calc(var(--composer-banner-icon-column)+(--spacing(1)))]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Dot({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span className={cn("size-1.5 flex-none rounded-full bg-current", className)} {...props} />
+  );
+}
+
+function ToggleIcon({ expanded, className }: { expanded: boolean; className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(buttonVariants({ size: "icon-xs", variant: "ghost" }), className)}
+    >
+      <ChevronDownIcon className={cn("size-3.5", !expanded && "rotate-180")} />
+    </span>
+  );
+}
+
+function Dismiss({ className, children, ...props }: ComponentProps<typeof Button>) {
+  return (
+    <Button size="icon-xs" variant="ghost" className={className} {...props}>
+      {children ?? <XIcon className="size-3.5" />}
+    </Button>
+  );
+}
+
+export const ComposerBanner = {
+  Surface,
+  Peek,
+  Attachment,
+  Dock,
+  Root,
+  Row,
+  Icon,
+  Content,
+  Separator,
+  Actions,
+  Children,
+  Scroll,
+  Count,
+  Body,
+  Dot,
+  ToggleIcon,
+  Dismiss,
+};
diff --git a/apps/web/src/components/chat/ComposerBannerStack.test.tsx b/apps/web/src/components/chat/ComposerBannerStack.test.tsx
deleted file mode 100644
index 33d0d17eed7d8bf2d6fb9878fd2eb3eaf8114fd9..0000000000000000000000000000000000000000
--- a/apps/web/src/components/chat/ComposerBannerStack.test.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vite-plus/test";
-
-import { ComposerBannerStack, type ComposerBannerStackItem } from "./ComposerBannerStack";
-
-const banner = (
-  id: string,
-  variant: ComposerBannerStackItem["variant"] = "warning",
-): ComposerBannerStackItem => ({
-  id,
-  variant,
-  icon: <span aria-hidden="true">!</span>,
-  title: `${id} warning`,
-});
-
-describe("ComposerBannerStack", () => {
-  it("keeps expanded banners in layout flow so surrounding content moves out of their way", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerBannerStack items={[banner("front"), banner("stacked")]} />,
-    );
-
-    const expandedItems = markup.match(
-      /<div data-composer-banner-stack-expanded-items="true" class="([^"]+)">/,
-    );
-
-    expect(expandedItems?.[1]).toContain("grid-rows-[0fr]");
-    expect(expandedItems?.[1]).toContain("group-hover/banner-stack:grid-rows-[1fr]");
-    expect(expandedItems?.[1]).toContain("z-20");
-    expect(expandedItems?.[1]).not.toContain("absolute");
-    expect(markup.indexOf("front warning")).toBeLessThan(markup.indexOf("stacked warning"));
-    expect(markup).toContain("invisible pointer-events-none");
-    expect(markup).toContain("group-focus-within/banner-stack:visible");
-  });
-
-  it("colors the collapsed stack cap by the hidden banner's variant, not a fixed warning", () => {
-    const neutralBehind = renderToStaticMarkup(
-      <ComposerBannerStack items={[banner("front", "default"), banner("stacked", "default")]} />,
-    );
-    expect(neutralBehind).toContain("chat-composer-banner-stack-cap");
-    expect(neutralBehind).toContain("border-[var(--chat-composer-attached-outline)]");
-    expect(neutralBehind).not.toContain("border-border");
-    expect(neutralBehind).not.toContain("border-warning/24");
-
-    const warningBehind = renderToStaticMarkup(
-      <ComposerBannerStack items={[banner("front", "default"), banner("stacked", "warning")]} />,
-    );
-    expect(warningBehind).toContain("border-warning/24");
-  });
-
-  it("does not render an expandable region for a single banner", () => {
-    const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />);
-
-    expect(markup).not.toContain("data-composer-banner-stack-expanded-items");
-    expect(markup).toContain("chat-composer-drawer-surface");
-    expect(markup).toContain("chat-composer-drawer-attached");
-    expect(markup).not.toContain("before:mask-none");
-    expect(markup).toContain("text-xs");
-    expect(markup).toContain('data-composer-banner-drawer="true"');
-    expect(markup).toContain('data-variant="warning"');
-    expect(markup).toContain("transform:none");
-    expect(markup).not.toContain("will-change:transform");
-  });
-  it("applies item-specific surface and action layout classes", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerBannerStack
-        items={[
-          {
-            ...banner("branch"),
-            className: "branch-surface",
-            actionClassName: "branch-actions",
-            actions: <button type="button">Repair</button>,
-          },
-        ]}
-      />,
-    );
-
-    expect(markup).toContain("branch-surface");
-    expect(markup).toContain("branch-actions");
-  });
-
-  it("renders a disabled compaction action on the shared accessible banner surface", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerBannerStack
-        items={[
-          {
-            id: "resume-compaction",
-            variant: "info",
-            icon: <span aria-hidden="true">!</span>,
-            title: "Resume with less context",
-            description: "250k tokens from an older session",
-            actions: (
-              <button type="button" disabled>
-                Compact
-              </button>
-            ),
-            dismissLabel: "Keep full history",
-            onDismiss: () => {},
-          },
-        ]}
-      />,
-    );
-
-    expect(markup).toContain('role="alert"');
-    expect(markup).toContain("chat-composer-drawer-attached");
-    expect(markup).toContain('disabled=""');
-    expect(markup).toContain('aria-label="Keep full history"');
-  });
-});
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index d8b8761447cbd9d1595ae8f04c91b02c3ad7bd74..95aa605df2ba35b9f01d100c980f8ad203ae738e 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -1,60 +1,52 @@
-import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import { XIcon } from "lucide-react";
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 
 import { cn } from "~/lib/utils";
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "../ui/alert";
-import { Button } from "../ui/button";
+import { ComposerBanner, type ComposerBannerVariant } from "./ComposerBanner";
 
+// Match the duration-220 exit transition before removing a dismissed notice.
 const DISMISS_TRANSITION_MS = 220;
-const frontExitStyle = {
-  opacity: 0,
-  transform: "translate3d(0, 4rem, 0)",
-} satisfies CSSProperties;
-const stackedExitStyle = {
-  opacity: 0,
-  transform: "translate3d(0, 7rem, 0)",
-} satisfies CSSProperties;
-const restingStyle = {
-  opacity: 1,
-  transform: "none",
-} satisfies CSSProperties;
-const exitTransitionStyle = {
-  transition: `transform ${DISMISS_TRANSITION_MS}ms ease-in, opacity ${DISMISS_TRANSITION_MS}ms ease-in`,
-} satisfies CSSProperties;
-
-// The collapsed cap peeking above the front banner is the only hint that more
-// banners are stacked behind it, so its border must match the severity of the
-// first hidden banner — a neutral banner must not masquerade as a warning.
-const stackCapBorderClass: Record<ComposerBannerStackItem["variant"], string> = {
-  default: "border-[var(--chat-composer-attached-outline)]",
-  error: "border-destructive/24",
-  info: "border-info/24",
-  success: "border-success/24",
-  warning: "border-warning/24",
-};
 
 export interface ComposerBannerStackItem {
   readonly id: string;
-  readonly variant: "default" | "error" | "info" | "success" | "warning";
-  // Ordering hint for stack assemblers: front this banner even though its
-  // variant is calm (e.g. live update progress). The stack itself ignores it.
-  readonly urgent?: boolean;
+  readonly variant: ComposerBannerVariant;
+  readonly priority?: "urgent" | "activity" | "notice";
   readonly icon: ReactNode;
   readonly title: ReactNode;
   readonly description?: ReactNode;
+  readonly children?: ReactNode;
   readonly actions?: ReactNode;
   readonly className?: string;
-  readonly actionClassName?: string;
   readonly dismissLabel?: string;
   readonly onDismiss?: () => void;
 }
 
+export type ComposerBannerStackContent = Pick<
+  ComposerBannerStackItem,
+  "id" | "variant" | "priority" | "className"
+> & { readonly content: ReactNode };
+
+type ComposerBannerStackEntry = ComposerBannerStackItem | ComposerBannerStackContent;
+
+function bannerPriority(item: ComposerBannerStackEntry) {
+  if (item.priority === "activity") {
+    return 0;
+  }
+  if (item.priority === "urgent" || item.variant === "error" || item.variant === "warning") {
+    return 1;
+  }
+  return 2;
+}
+
 interface ComposerBannerStackProps {
   readonly className?: string;
-  readonly items: ReadonlyArray<ComposerBannerStackItem>;
+  readonly items: ReadonlyArray<ComposerBannerStackEntry>;
 }
 
 export function ComposerBannerStack({ className, items }: ComposerBannerStackProps) {
+  const [stackExpanded, setStackExpanded] = useState(false);
+  const noticesRef = useRef<HTMLDivElement>(null);
+  const peekRef = useRef<HTMLButtonElement>(null);
+  const expandedItemsId = useId();
   const [requestedExitingItemId, setExitingItemId] = useState<string | null>(null);
   const dismissTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const exitingItemId =
@@ -70,21 +62,27 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
     };
   }, []);
 
+  useEffect(() => {
+    if (items.length < 2) setStackExpanded(false);
+  }, [items.length]);
+
   if (items.length === 0) {
     return null;
   }
 
-  const frontItem = items[0];
+  // Activity stays attached. Urgency and severity only order the notices behind it.
+  const orderedItems = items.toSorted((a, b) => bannerPriority(a) - bannerPriority(b));
+  const frontItem = orderedItems[0];
   if (!frontItem) {
     return null;
   }
-  const stackedItems = items.slice(1);
+  const stackedItems = orderedItems.slice(1);
   const hasStack = stackedItems.length > 0;
   const showCollapsedStackCap = hasStack && exitingItemId !== frontItem.id;
   const firstStackedItem = stackedItems[0];
 
-  const requestDismiss = (item: ComposerBannerStackItem) => {
-    if (!item.onDismiss || exitingItemId) {
+  const requestDismiss = (item: ComposerBannerStackEntry) => {
+    if (!("onDismiss" in item) || !item.onDismiss || exitingItemId) {
       return;
     }
     setExitingItemId(item.id);
@@ -98,37 +96,28 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
   };
 
   return (
-    <div
-      className={cn("group/banner-stack chat-composer-drawer-slot", className)}
+    <ComposerBanner.Attachment
+      className={className}
       data-composer-banner-drawer="true"
+      data-chat-composer-collapsed-controls="true"
     >
-      <div
-        className={cn(
-          "relative flex flex-col-reverse",
-          hasStack ? "group-hover/banner-stack:z-50 group-focus-within/banner-stack:z-50" : null,
-        )}
-      >
-        {showCollapsedStackCap && firstStackedItem ? (
-          <div
-            className={cn(
-              "pointer-events-none absolute inset-x-0 -top-3 z-0 mx-auto h-3 rounded-t-2xl",
-              "chat-composer-banner-stack-cap border border-b-0 shadow-[0_6px_18px_rgba(0,0,0,0.06)]",
-              stackCapBorderClass[firstStackedItem.variant],
-              "transition-opacity duration-150 ease-out",
-              "group-hover/banner-stack:opacity-0 group-focus-within/banner-stack:opacity-0",
-            )}
-            style={{ width: "96%" }}
-            aria-hidden="true"
-          />
-        ) : null}
+      <div className={cn("relative flex flex-col-reverse", hasStack && stackExpanded && "z-50")}>
         <div
           className={cn(
-            "relative z-10",
-            exitingItemId === frontItem.id ? "pointer-events-none" : null,
+            "relative z-10 transition-[translate,opacity] duration-220 ease-in",
+            exitingItemId === frontItem.id
+              ? "pointer-events-none translate-y-16 opacity-0"
+              : "opacity-100",
           )}
-          style={{
-            ...exitTransitionStyle,
-            ...(exitingItemId === frontItem.id ? frontExitStyle : restingStyle),
+          onPointerDownCapture={() => {
+            setStackExpanded(false);
+            const activeElement = document.activeElement;
+            if (
+              activeElement instanceof HTMLElement &&
+              noticesRef.current?.contains(activeElement)
+            ) {
+              activeElement.blur();
+            }
           }}
         >
           <ComposerBannerStackAlert
@@ -140,44 +129,86 @@ export function ComposerBannerStack({ className, items }: ComposerBannerStackPro
         </div>
         {hasStack ? (
           <div
-            data-composer-banner-stack-expanded-items="true"
-            className={cn(
-              "relative z-20 grid grid-rows-[0fr] transition-[grid-template-rows] duration-150 ease-out",
-              "group-hover/banner-stack:grid-rows-[1fr] group-focus-within/banner-stack:grid-rows-[1fr]",
-            )}
+            ref={noticesRef}
+            className="relative z-20"
+            onPointerEnter={(event) => {
+              if (event.pointerType !== "touch") setStackExpanded(true);
+            }}
+            onPointerLeave={(event) => {
+              if (!event.currentTarget.contains(document.activeElement)) setStackExpanded(false);
+            }}
+            onFocusCapture={() => setStackExpanded(true)}
+            onBlurCapture={(event) => {
+              if (
+                !event.currentTarget.contains(event.relatedTarget) &&
+                !event.currentTarget.matches(":hover")
+              ) {
+                setStackExpanded(false);
+              }
+            }}
+            onKeyDown={(event) => {
+              if (event.key !== "Escape") return;
+              event.stopPropagation();
+              peekRef.current?.focus({ preventScroll: true });
+              setStackExpanded(false);
+            }}
           >
-            <div className="min-h-0 overflow-hidden">
-              <div
-                className={cn(
-                  "invisible pointer-events-none space-y-2 pb-2 opacity-0",
-                  "translate-y-1 transform-gpu transition-[opacity,transform] duration-150 ease-out will-change-[opacity,transform]",
-                  "group-hover/banner-stack:visible group-hover/banner-stack:pointer-events-auto group-hover/banner-stack:translate-y-0 group-hover/banner-stack:opacity-100",
-                  "group-focus-within/banner-stack:visible group-focus-within/banner-stack:pointer-events-auto group-focus-within/banner-stack:translate-y-0 group-focus-within/banner-stack:opacity-100",
-                )}
-              >
-                {stackedItems.map((item) => (
-                  <div
-                    key={item.id}
-                    className={cn(exitingItemId === item.id ? "pointer-events-none" : null)}
-                    style={{
-                      ...exitTransitionStyle,
-                      ...(exitingItemId === item.id ? stackedExitStyle : restingStyle),
-                    }}
-                  >
-                    <ComposerBannerStackAlert
-                      item={item}
-                      attached={false}
-                      exiting={exitingItemId === item.id}
-                      onDismissRequest={() => requestDismiss(item)}
-                    />
-                  </div>
-                ))}
+            {showCollapsedStackCap && firstStackedItem ? (
+              <ComposerBanner.Peek
+                ref={peekRef}
+                variant={firstStackedItem.variant}
+                aria-label="Show other notices"
+                aria-expanded={stackExpanded}
+                aria-controls={expandedItemsId}
+                onClick={(event) => {
+                  event.currentTarget.focus({ preventScroll: true });
+                  setStackExpanded(true);
+                }}
+                className={cn(stackExpanded && "opacity-0")}
+              />
+            ) : null}
+            <div
+              id={expandedItemsId}
+              data-composer-banner-stack-expanded-items="true"
+              className={cn(
+                "grid transition-[grid-template-rows] duration-150 ease-out",
+                stackExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+              )}
+            >
+              <div className="min-h-0 overflow-hidden">
+                <div
+                  className={cn(
+                    "transform-gpu space-y-2 pb-2 transition-[opacity,transform] duration-150 ease-out will-change-[opacity,transform]",
+                    stackExpanded
+                      ? "pointer-events-auto visible translate-y-0 opacity-100"
+                      : "pointer-events-none invisible translate-y-1 opacity-0",
+                  )}
+                >
+                  {stackedItems.map((item) => (
+                    <div
+                      key={item.id}
+                      className={cn(
+                        "transition-[translate,opacity] duration-220 ease-in",
+                        exitingItemId === item.id
+                          ? "pointer-events-none translate-y-28 opacity-0"
+                          : "opacity-100",
+                      )}
+                    >
+                      <ComposerBannerStackAlert
+                        item={item}
+                        attached={false}
+                        exiting={exitingItemId === item.id}
+                        onDismissRequest={() => requestDismiss(item)}
+                      />
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
           </div>
         ) : null}
       </div>
-    </div>
+    </ComposerBanner.Attachment>
   );
 }
 
@@ -187,50 +218,59 @@ function ComposerBannerStackAlert({
   exiting,
   onDismissRequest,
 }: {
-  readonly item: ComposerBannerStackItem;
+  readonly item: ComposerBannerStackEntry;
   readonly attached: boolean;
   readonly exiting: boolean;
   readonly onDismissRequest: () => void;
 }) {
-  const dismissOnly = item.onDismiss && !item.actions;
+  if ("content" in item) {
+    return (
+      <ComposerBanner.Root
+        placement={attached ? "attached" : "floating"}
+        variant={item.variant}
+        className={item.className}
+      >
+        {item.content}
+      </ComposerBanner.Root>
+    );
+  }
 
   return (
-    <Alert
+    <ComposerBanner.Root
+      role="alert"
+      placement={attached ? "attached" : "floating"}
       variant={item.variant}
-      className={cn(
-        attached
-          ? "chat-composer-drawer-surface chat-composer-drawer-attached px-3 pt-2 pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)] text-xs sm:px-4"
-          : "alert-glass rounded-[22px]",
-        item.className,
-      )}
-      data-variant={item.variant}
+      className={item.className}
     >
-      {item.icon}
-      <AlertTitle>{item.title}</AlertTitle>
-      {item.description ? <AlertDescription>{item.description}</AlertDescription> : null}
-      {item.actions || item.onDismiss ? (
-        <AlertAction
-          className={cn(
-            item.actionClassName,
-            dismissOnly
-              ? "max-sm:col-start-3 max-sm:row-start-1 max-sm:mt-0 max-sm:self-start"
-              : undefined,
-          )}
-        >
-          {item.actions}
-          {item.onDismiss ? (
-            <Button
-              size="icon-xs"
-              variant="ghost"
-              aria-label={item.dismissLabel ?? "Dismiss warning"}
-              disabled={exiting}
-              onClick={onDismissRequest}
-            >
-              <XIcon className="size-3.5" />
-            </Button>
+      <ComposerBanner.Row layout="wrap-actions">
+        <ComposerBanner.Icon>{item.icon}</ComposerBanner.Icon>
+        <ComposerBanner.Content className="font-medium">{item.title}</ComposerBanner.Content>
+        {item.actions || item.onDismiss ? (
+          <ComposerBanner.Actions>
+            {item.actions}
+            {item.onDismiss ? (
+              <ComposerBanner.Dismiss
+                aria-label={item.dismissLabel ?? "Dismiss warning"}
+                disabled={exiting}
+                onClick={onDismissRequest}
+              />
+            ) : null}
+          </ComposerBanner.Actions>
+        ) : null}
+      </ComposerBanner.Row>
+      {item.description || item.children ? (
+        <ComposerBanner.Children>
+          {item.description ? (
+            <ComposerBanner.Row>
+              <ComposerBanner.Icon />
+              <ComposerBanner.Content className="text-muted-foreground">
+                {item.description}
+              </ComposerBanner.Content>
+            </ComposerBanner.Row>
           ) : null}
-        </AlertAction>
+          {item.children}
+        </ComposerBanner.Children>
       ) : null}
-    </Alert>
+    </ComposerBanner.Root>
   );
 }
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.test.tsx b/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
index cf0a1747dd4c0c1a1b3d0842f25cac1fd175f476..6435820c2e7b65fea8026d9f59cd4cd39a4c5e46 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
@@ -19,8 +19,6 @@ describe("ComposerCommandMenu", () => {
     );
 
     expect(markup).toContain('data-composer-command-drawer="true"');
-    expect(markup).toContain("chat-composer-drawer-surface");
-    expect(markup).toContain("chat-composer-drawer-attached");
     expect(markup).not.toContain("dropdown-glass");
   });
 
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 72267fcc994855e6ebb0c58cbdfdc649bae15609..74cd98f361bcd7fd377454bd98b14b4875b31d68 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -24,6 +24,7 @@ import { cn } from "~/lib/utils";
 import { Badge } from "../ui/badge";
 import { Command, CommandGroup, CommandItem, CommandList } from "../ui/command";
 import { PierreEntryIcon } from "./PierreEntryIcon";
+import { ComposerBanner } from "./ComposerBanner";
 
 export type ComposerCommandItem =
   | {
@@ -88,9 +89,9 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
         );
       }}
     >
-      <div
+      <ComposerBanner.Surface
         ref={listRef}
-        className="chat-composer-drawer-surface chat-composer-drawer-attached relative w-full overflow-hidden **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4"
+        className="w-full overflow-hidden pb-(--chat-composer-attachment-overlap) **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4"
         data-composer-command-drawer="true"
       >
         {props.items.length > 0 ? (
@@ -125,7 +126,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
             </p>
           </div>
         )}
-      </div>
+      </ComposerBanner.Surface>
     </Command>
   );
 });
diff --git a/apps/web/src/components/chat/ComposerPendingApprovalPanel.tsx b/apps/web/src/components/chat/ComposerPendingApprovalPanel.tsx
index 5c6aedb040c591b8f9670ad0b82092f10336ceb4..deb5ba54c53ce60184602013ebab66f0acbbc961 100644
--- a/apps/web/src/components/chat/ComposerPendingApprovalPanel.tsx
+++ b/apps/web/src/components/chat/ComposerPendingApprovalPanel.tsx
@@ -31,7 +31,7 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova
           : "File change";
 
   return (
-    <div
+    <span
       aria-label={fallbackLabel}
       className={cn("flex min-w-0 flex-1 items-center gap-2", className)}
       role="group"
@@ -54,6 +54,6 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova
           1/{pendingCount}
         </span>
       ) : null}
-    </div>
+    </span>
   );
 });
diff --git a/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx b/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
index c121110bb3f0f825765682f687bf2e144a964a32..596fd93a68b7320996cee4f27abe9a6718c52147 100644
--- a/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
+++ b/apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx
@@ -5,9 +5,10 @@ import {
   derivePendingUserInputProgress,
   type PendingUserInputDraftAnswer,
 } from "../../pendingUserInput";
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
 import { cn } from "~/lib/utils";
+import { ComposerBanner } from "./ComposerBanner";
 
 interface PendingUserInputPanelProps {
   pendingUserInputs: PendingUserInput[];
@@ -167,58 +168,40 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
 
   return (
     <Collapsible
-      className="py-2"
       open={!isCollapsed}
       onOpenChange={(open) => {
         setCollapsedQuestionId(open ? null : activeQuestion.id);
       }}
     >
-      {/* The trigger's wrapper is inset less than the card's text column, and
-          the trigger pays the difference back as padding: the hover background
-          and focus ring bleed 10px past that column on both sides, while the
-          header label and the chevron still line up with the left and right
-          edges of the question text below. The negative block margin keeps the
-          taller hit area from pushing the panel down. */}
-      <div className="flex items-center gap-1 px-1 sm:px-2">
-        <CollapsibleTrigger
-          title={
-            isCollapsed ? "Show the question and its options" : "Hide the question and its options"
-          }
-          data-pending-user-input-toggle={isCollapsed ? "collapsed" : "expanded"}
-          className="group -my-1 flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none transition-colors duration-150 hover:bg-muted/35 focus-visible:ring-1 focus-visible:ring-primary/25"
-        >
-          <span className="text-xs font-medium text-muted-foreground group-hover:text-foreground/85">
+      <CollapsibleTrigger
+        render={<ComposerBanner.Row render={<button type="button" />} />}
+        title={
+          isCollapsed ? "Show the question and its options" : "Hide the question and its options"
+        }
+        data-pending-user-input-toggle={isCollapsed ? "collapsed" : "expanded"}
+      >
+        <ComposerBanner.Icon />
+        <ComposerBanner.Content>
+          <span className="shrink-0 font-medium text-muted-foreground">
             {activeQuestion.header}
           </span>
+          {isCollapsed ? (
+            <span className="min-w-0 flex-1 truncate text-secondary-label">
+              {activeQuestion.question}
+            </span>
+          ) : null}
+        </ComposerBanner.Content>
+        <ComposerBanner.Actions>
           {prompt.questions.length > 1 ? (
             <span className="text-[10px] font-medium text-muted-foreground tabular-nums">
               {questionIndex + 1}/{prompt.questions.length}
             </span>
           ) : null}
-          {/* Collapsed, the header is otherwise just a section label and a
-              counter, so the question itself is echoed here as a one-line
-              reminder of what is being asked. */}
-          {isCollapsed ? (
-            <span className="min-w-0 flex-1 truncate text-secondary-label text-xs">
-              {activeQuestion.question}
-            </span>
-          ) : null}
-          {/* The chevron points at the body: down while it is open below the
-              header, up while it is collapsed into it. */}
-          <ChevronDownIcon
-            aria-hidden="true"
-            className={cn(
-              "ml-auto size-3.5 shrink-0 text-secondary-label transition-transform duration-150 group-hover:text-foreground",
-              isCollapsed && "rotate-180",
-            )}
-          />
-        </CollapsibleTrigger>
-      </div>
-      {/* The panel carries the horizontal padding itself: it clips its content
-          while the height animates, so the option buttons have to sit inside
-          that padding or their focus rings get shaved off at the edges. */}
-      <CollapsiblePanel className="px-3 sm:px-4">
-        <div className="pt-2 pb-0.5">
+          <ComposerBanner.ToggleIcon expanded={!isCollapsed} />
+        </ComposerBanner.Actions>
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <ComposerBanner.Body>
           <p className="text-sm text-foreground/85">{activeQuestion.question}</p>
           {activeQuestion.multiSelect ? (
             <p className="mt-1 text-secondary-label text-xs">Select one or more options.</p>
@@ -276,7 +259,7 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
               );
             })}
           </div>
-        </div>
+        </ComposerBanner.Body>
       </CollapsiblePanel>
     </Collapsible>
   );
diff --git a/apps/web/src/components/chat/ComposerPlanFollowUpBanner.tsx b/apps/web/src/components/chat/ComposerPlanFollowUpBanner.tsx
index b734a9eaea8fdf67cff1320bdfb1ac103d40005e..aeffd9638065c65470e23facebbf0d3e0c8c0aab 100644
--- a/apps/web/src/components/chat/ComposerPlanFollowUpBanner.tsx
+++ b/apps/web/src/components/chat/ComposerPlanFollowUpBanner.tsx
@@ -1,4 +1,5 @@
 import { memo } from "react";
+import { ComposerBanner } from "./ComposerBanner";
 
 export const ComposerPlanFollowUpBanner = memo(function ComposerPlanFollowUpBanner({
   planTitle,
@@ -6,16 +7,14 @@ export const ComposerPlanFollowUpBanner = memo(function ComposerPlanFollowUpBann
   planTitle: string | null;
 }) {
   return (
-    <div className="px-3 py-2 sm:px-4">
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-xs font-medium text-muted-foreground">Plan ready</span>
+    <ComposerBanner.Row>
+      <ComposerBanner.Icon />
+      <ComposerBanner.Content>
+        <span className="shrink-0 font-medium text-muted-foreground">Plan ready</span>
         {planTitle ? (
-          <span className="min-w-0 flex-1 truncate text-xs text-foreground/85">{planTitle}</span>
+          <span className="min-w-0 flex-1 truncate text-foreground/85">{planTitle}</span>
         ) : null}
-      </div>
-      {/* <div className="mt-2 text-xs text-muted-foreground">
-        Review the plan
-      </div> */}
-    </div>
+      </ComposerBanner.Content>
+    </ComposerBanner.Row>
   );
 });
diff --git a/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx b/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4133bde44b2dc2b7df0d35a87dca1e6a574c07e5
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
@@ -0,0 +1,49 @@
+import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
+import { useId, useState } from "react";
+
+import { serverUpdateStageLabel } from "../ServerUpdateAction";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { ComposerBanner } from "./ComposerBanner";
+
+/** One text line, clipped at the end so the error detail never squeezes its title. */
+export function ComposerServerUpdateStatus({
+  state,
+  serverLabel = "server",
+}: {
+  readonly state: Exclude<ServerUpdateState, { status: "idle" }>;
+  readonly serverLabel?: string;
+}) {
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const triggerId = useId();
+  const title = `${state.status === "failed" ? "Could not update" : "Updating"} ${serverLabel}`;
+  const detail = state.status === "failed" ? state.message : serverUpdateStageLabel(state.stage);
+  return (
+    <span
+      role={state.status === "failed" ? "alert" : "status"}
+      className="min-w-0"
+      data-composer-server-update-status={state.status}
+    >
+      <Tooltip open={detailsOpen} onOpenChange={setDetailsOpen} triggerId={triggerId}>
+        <TooltipTrigger
+          id={triggerId}
+          closeOnClick={false}
+          render={
+            <button
+              type="button"
+              aria-label={`${title}: ${detail}`}
+              className="block max-w-full cursor-help truncate rounded-sm text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => setDetailsOpen(true)}
+            >
+              {title}
+              <ComposerBanner.Separator />
+              <span className="font-normal text-muted-foreground">{detail}</span>
+            </button>
+          }
+        />
+        <TooltipPopup side="top" className="max-w-80">
+          {title}: {detail}
+        </TooltipPopup>
+      </Tooltip>
+    </span>
+  );
+}
diff --git a/apps/web/src/components/chat/ComposerStashBadge.test.tsx b/apps/web/src/components/chat/ComposerStashBadge.test.tsx
deleted file mode 100644
index 0e3839e6e02e8022b4bb854e39e950f9464eb720..0000000000000000000000000000000000000000
--- a/apps/web/src/components/chat/ComposerStashBadge.test.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vite-plus/test";
-
-import { ComposerStashBadge } from "./ComposerStashBadge";
-
-describe("ComposerStashBadge", () => {
-  it("renders as an attached composer tab instead of a floating pill", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerStashBadge
-        count={3}
-        menuOpen={false}
-        pulseKey={0}
-        pulsing={false}
-        onToggleMenu={() => {}}
-      />,
-    );
-
-    expect(markup).toContain("chat-composer-stash-tab");
-    expect(markup).toContain("rounded-t-xl");
-    expect(markup).toContain("border-b-0");
-    expect(markup).toContain("items-center");
-    expect(markup).not.toContain("items-start");
-    expect(markup).not.toContain("rounded-full");
-    expect(markup).not.toContain("opacity-70");
-    expect(markup).not.toContain("border-border");
-    expect(markup).toContain('aria-expanded="false"');
-  });
-
-  it("reports when the stash drawer is open", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerStashBadge
-        count={3}
-        menuOpen
-        pulseKey={0}
-        pulsing={false}
-        onToggleMenu={() => {}}
-      />,
-    );
-
-    expect(markup).toContain('aria-expanded="true"');
-    expect(markup).toContain("text-foreground");
-    expect(markup).toContain("pointer-events-none");
-    expect(markup).not.toContain("invisible");
-  });
-
-  it("keeps a compact inline entry point when a drawer occupies the tab", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerStashBadge
-        count={3}
-        menuOpen
-        placement="inline"
-        pulseKey={0}
-        pulsing={false}
-        onToggleMenu={() => {}}
-      />,
-    );
-
-    expect(markup).toContain('data-slot="button"');
-    expect(markup).toContain("rounded-sm");
-    expect(markup).toContain("focus-visible:ring-2");
-    expect(markup).toContain("pointer-coarse:after:min-h-11");
-    expect(markup).toContain("Stashed prompts: 3. Open stash.");
-    expect(markup).toContain('aria-expanded="true"');
-    expect(markup).not.toContain("chat-composer-stash-tab");
-    expect(markup).not.toContain("rounded-t-xl");
-    expect(markup).not.toContain(" pointer-events-none ");
-  });
-});
diff --git a/apps/web/src/components/chat/ComposerStashBadge.tsx b/apps/web/src/components/chat/ComposerStashBadge.tsx
index 7682ab562fd5693b59634e9754ea07beafa65c1b..4b83701b858b50ca88eb3151b6dd7685df4a70c1 100644
--- a/apps/web/src/components/chat/ComposerStashBadge.tsx
+++ b/apps/web/src/components/chat/ComposerStashBadge.tsx
@@ -3,6 +3,7 @@ import { memo } from "react";
 
 import { cn } from "~/lib/utils";
 import { Button } from "../ui/button";
+import { ComposerBanner } from "./ComposerBanner";
 
 /**
  * Bookmark control that shows the stash count and opens the stash menu. It
@@ -24,17 +25,16 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
   if (props.count === 0) return null;
   const inline = props.placement === "inline";
   const count = (
-    <span
+    <ComposerBanner.Count
       key={props.pulseKey}
       className={cn(
-        "text-[10px] font-medium leading-none tabular-nums",
         props.pulsing
           ? "animate-[prompt-stash-count-enter_180ms_ease-out_both] text-primary motion-reduce:animate-none"
           : "text-muted-foreground",
       )}
     >
       {props.count}
-    </span>
+    </ComposerBanner.Count>
   );
 
   if (inline) {
@@ -46,7 +46,7 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
         aria-label={`Stashed prompts: ${props.count}. Open stash.`}
         aria-expanded={props.menuOpen}
         className={cn(
-          "shrink-0 gap-1 px-1.5",
+          "shrink-0 gap-1 px-1.5 text-xs sm:text-xs",
           (props.menuOpen || props.pulsing) &&
             "[--control-icon-color:currentColor] text-foreground",
         )}
@@ -60,28 +60,28 @@ export const ComposerStashBadge = memo(function ComposerStashBadge(props: {
   }
 
   return (
-    <button
-      type="button"
-      data-prompt-stash-badge="true"
-      aria-label={`Stashed prompts: ${props.count}. Open stash.`}
-      aria-expanded={props.menuOpen}
-      className={cn(
-        "chat-composer-shoulder-tab chat-composer-stash-tab absolute -top-7 right-5.5 z-0 inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-t-xl border border-b-0 px-3 pb-1 text-xs leading-none",
-        "transition-[color,border-color] duration-200",
-        props.menuOpen && "pointer-events-none",
-        props.menuOpen || props.pulsing
-          ? "text-foreground"
-          : "text-muted-foreground hover:text-foreground",
-      )}
-      onPointerDown={(event) => {
-        // Keep composer focus so Escape/typing flows stay intact.
-        event.preventDefault();
-      }}
-      onClick={props.onToggleMenu}
-    >
-      <BookmarkIcon className="size-3 shrink-0" aria-hidden="true" />
-      Stash
-      {count}
-    </button>
+    <ComposerBanner.Root width="content" data-composer-shoulder-tab className="ml-auto">
+      <ComposerBanner.Row
+        render={<button type="button" />}
+        data-prompt-stash-badge="true"
+        aria-label={`Stashed prompts: ${props.count}. Open stash.`}
+        aria-expanded={props.menuOpen}
+        className={cn(
+          "transition-colors duration-200",
+          props.menuOpen && "pointer-events-none",
+          props.menuOpen || props.pulsing
+            ? "text-foreground"
+            : "text-muted-foreground hover:text-foreground",
+        )}
+        onPointerDown={(event) => event.preventDefault()}
+        onClick={props.onToggleMenu}
+      >
+        <ComposerBanner.Icon>
+          <BookmarkIcon />
+        </ComposerBanner.Icon>
+        <ComposerBanner.Content>Stash</ComposerBanner.Content>
+        <ComposerBanner.Actions>{count}</ComposerBanner.Actions>
+      </ComposerBanner.Row>
+    </ComposerBanner.Root>
   );
 });
diff --git a/apps/web/src/components/chat/ComposerStashMenu.test.tsx b/apps/web/src/components/chat/ComposerStashMenu.test.tsx
index 517a027d886c2b7da8a8da284ae7acb56c5ea6b0..47b59a7f592fcda42b4199e0e915f5e10ad8f2e2 100644
--- a/apps/web/src/components/chat/ComposerStashMenu.test.tsx
+++ b/apps/web/src/components/chat/ComposerStashMenu.test.tsx
@@ -5,41 +5,6 @@ import { describe, expect, it } from "vite-plus/test";
 import { ComposerStashMenu } from "./ComposerStashMenu";
 
 describe("ComposerStashMenu", () => {
-  it("renders saved prompts as an attached composer drawer", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerStashMenu
-        entries={[]}
-        stashShortcutLabel="Ctrl+S"
-        onRestore={() => {}}
-        onDelete={() => {}}
-        onClose={() => {}}
-      />,
-    );
-
-    expect(markup).toContain('data-composer-stash-drawer="true"');
-    expect(markup).toContain("chat-composer-drawer-surface");
-    expect(markup).toContain("chat-composer-drawer-attached");
-    expect(markup).toContain('aria-label="Close stash"');
-    expect(markup).not.toContain("dropdown-glass");
-    expect(markup).not.toContain("Stashed prompts");
-    expect(markup).toContain("Press Ctrl+S with a prompt in the composer to stash it.");
-  });
-
-  it("does not advertise a shortcut when stash is unbound", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerStashMenu
-        entries={[]}
-        stashShortcutLabel={null}
-        onRestore={() => {}}
-        onDelete={() => {}}
-        onClose={() => {}}
-      />,
-    );
-
-    expect(markup).toContain("Nothing stashed yet.");
-    expect(markup).not.toContain("Press");
-  });
-
   it("shows saved image thumbnails and incomplete image states", () => {
     const markup = renderToStaticMarkup(
       <ComposerStashMenu
@@ -81,14 +46,6 @@ describe("ComposerStashMenu", () => {
     expect(markup).toContain('src="data:image/png;base64,AA=="');
     expect(markup).toContain("1 image dropped");
     expect(markup).toContain("saving 1 image");
-    expect(markup).not.toContain("absolute top-1/2 right-2");
-    expect(markup).toContain("pointer-events-none");
-    expect(markup).toContain("pointer-coarse:pointer-events-auto");
-    expect(markup).toContain("pointer-coarse:opacity-100");
-    expect(markup).not.toContain("bg-popover!");
-    expect(markup).toContain("[--control-icon-color:currentColor]");
-    expect(markup).toContain("size-3.5 stroke-2");
-    expect(markup).not.toContain("bg-background/90");
   });
 
   it("labels mixed file and image stashes without treating images as files", () => {
@@ -129,7 +86,6 @@ describe("ComposerStashMenu", () => {
     );
 
     expect(markup).toContain("(2 attachments)");
-    expect(markup).toContain("size-3.5 text-secondary-label");
     expect(markup).not.toContain("(2 files)");
   });
 });
diff --git a/apps/web/src/components/chat/ComposerStashMenu.tsx b/apps/web/src/components/chat/ComposerStashMenu.tsx
index f719e563d2338efbbeb27afcec1f2266f82704d3..d769c9823ab85fc2bc0fb521fa3a79a5d580a201 100644
--- a/apps/web/src/components/chat/ComposerStashMenu.tsx
+++ b/apps/web/src/components/chat/ComposerStashMenu.tsx
@@ -1,11 +1,10 @@
-import { FileIcon, XIcon } from "lucide-react";
+import { BookmarkIcon, FileIcon, FileTextIcon } from "lucide-react";
 import { memo, useEffect, useRef, useState } from "react";
 
 import { formatRelativeTimeLabel } from "../../timestampFormat";
 import { cn } from "~/lib/utils";
 import { type PromptStashEntry } from "../../promptStashStore";
-import { Command, CommandGroup, CommandItem, CommandList } from "../ui/command";
-import { Button } from "../ui/button";
+import { ComposerBanner } from "./ComposerBanner";
 
 const SNIPPET_MAX_CHARS = 90;
 
@@ -30,7 +29,7 @@ function stashEntrySnippet(entry: PromptStashEntry): string {
 }
 
 /**
- * Popover listing the stashed prompts. Keyboard-first: opened by ⌘S on an
+ * Attached banner listing the stashed prompts. Keyboard-first: opened by ⌘S on an
  * empty composer, navigated with arrows, restored with Enter, dismissed
  * with Escape. The listener runs capture-phase on window so it wins over
  * the Lexical editor's handlers while the menu is open.
@@ -64,13 +63,6 @@ export const ComposerStashMenu = memo(function ComposerStashMenu(props: {
     return () => document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
   }, [onClose]);
 
-  useEffect(() => {
-    if (entries.length === 0) return;
-    if (!entries.some((entry) => entry.id === highlightedId)) {
-      setHighlightedId(entries[0]?.id ?? null);
-    }
-  }, [entries, highlightedId]);
-
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
@@ -83,11 +75,17 @@ export const ComposerStashMenu = memo(function ComposerStashMenu(props: {
         if (entries.length === 0) return;
         event.preventDefault();
         event.stopPropagation();
-        const currentIndex = entries.findIndex((entry) => entry.id === highlightedId);
+        const currentIndex = entries.findIndex((entry) => entry.id === highlightedEntry?.id);
         const offset = event.key === "ArrowDown" ? 1 : -1;
         const normalizedIndex = currentIndex >= 0 ? currentIndex : offset === 1 ? -1 : 0;
         const nextIndex = (normalizedIndex + offset + entries.length) % entries.length;
         setHighlightedId(entries[nextIndex]?.id ?? null);
+        const nextButton =
+          drawerRef.current?.querySelectorAll<HTMLButtonElement>("[data-stash-restore]")[nextIndex];
+        nextButton?.scrollIntoView({ block: "nearest" });
+        if (drawerRef.current?.contains(document.activeElement)) {
+          nextButton?.focus({ preventScroll: true });
+        }
         return;
       }
       if (event.key === "Enter") {
@@ -111,64 +109,77 @@ export const ComposerStashMenu = memo(function ComposerStashMenu(props: {
     };
     window.addEventListener("keydown", handler, true);
     return () => window.removeEventListener("keydown", handler, true);
-  }, [entries, highlightedEntry, highlightedId, onClose, onDelete, onRestore]);
+  }, [entries, highlightedEntry, onClose, onDelete, onRestore]);
 
   return (
-    <Command autoHighlight={false} mode="none">
-      <div
-        ref={drawerRef}
-        className="chat-composer-drawer-surface chat-composer-drawer-attached relative w-full overflow-hidden"
-        data-composer-stash-drawer="true"
+    <ComposerBanner.Root ref={drawerRef} data-composer-stash-drawer="true">
+      <ComposerBanner.Row
+        render={<button type="button" />}
+        aria-label="Close stash"
+        aria-expanded="true"
+        onPointerDown={(event) => event.preventDefault()}
+        onClick={onClose}
       >
-        <div className="flex h-7 items-center justify-end px-2 pt-1">
-          <Button
-            variant="ghost-muted"
-            size="icon-micro"
-            aria-label="Close stash"
-            onPointerDown={(event) => event.preventDefault()}
-            onClick={onClose}
-          >
-            <XIcon className="size-3" />
-          </Button>
-        </div>
-        <CommandList className="max-h-64 scroll-pb-6">
-          <CommandGroup>
-            {entries.length === 0 ? (
-              <p className="px-3 py-1.5 text-secondary-label text-xs">
+        <ComposerBanner.Icon>
+          <BookmarkIcon />
+        </ComposerBanner.Icon>
+        <ComposerBanner.Content className="text-muted-foreground">Stash</ComposerBanner.Content>
+        <ComposerBanner.Actions>
+          <ComposerBanner.Count>{entries.length}</ComposerBanner.Count>
+          <ComposerBanner.ToggleIcon expanded />
+        </ComposerBanner.Actions>
+      </ComposerBanner.Row>
+      <ComposerBanner.Scroll>
+        <ComposerBanner.Children render={<ul />} aria-label="Stashed prompts">
+          {entries.length === 0 ? (
+            <ComposerBanner.Row render={<li />}>
+              <ComposerBanner.Icon />
+              <ComposerBanner.Content className="text-muted-foreground">
                 Nothing stashed yet.
                 {stashShortcutLabel
                   ? ` Press ${stashShortcutLabel} with a prompt in the composer to stash it.`
                   : null}
-              </p>
-            ) : (
-              entries.map((entry) => (
-                <CommandItem
-                  key={entry.id}
-                  value={entry.id}
-                  className={cn(
-                    "group/stash relative cursor-pointer select-none gap-3 rounded-lg px-3 py-1.5! hover:bg-transparent hover:text-inherit data-highlighted:bg-transparent data-highlighted:text-inherit",
-                    highlightedId === entry.id && "bg-accent! text-accent-foreground!",
-                  )}
-                  onMouseMove={() => {
-                    if (highlightedId !== entry.id) setHighlightedId(entry.id);
-                  }}
-                  onMouseDown={(event) => {
-                    event.preventDefault();
-                  }}
-                  onClick={() => {
-                    onRestore(entry);
-                  }}
-                >
-                  <span className="min-w-0 flex-1 truncate text-xs">
+              </ComposerBanner.Content>
+            </ComposerBanner.Row>
+          ) : (
+            entries.map((entry) => (
+              <ComposerBanner.Row
+                render={<li />}
+                key={entry.id}
+                data-stash-entry={entry.id}
+                data-highlighted={highlightedEntry?.id === entry.id || undefined}
+                className={cn(
+                  "relative rounded-sm",
+                  highlightedEntry?.id === entry.id && "bg-accent text-accent-foreground",
+                )}
+                onMouseMove={() => {
+                  if (highlightedId !== entry.id) setHighlightedId(entry.id);
+                }}
+                onFocus={() => setHighlightedId(entry.id)}
+              >
+                <ComposerBanner.Icon>
+                  <FileTextIcon />
+                </ComposerBanner.Icon>
+                <ComposerBanner.Content>
+                  <button
+                    type="button"
+                    className="min-w-0 flex-1 cursor-pointer truncate text-left text-foreground/80 outline-none before:absolute before:inset-0 before:rounded-sm focus-visible:before:ring-2 focus-visible:before:ring-ring"
+                    data-stash-restore={entry.id}
+                    aria-label={`Restore stashed prompt: ${stashEntrySnippet(entry)}`}
+                    onPointerDown={(event) => event.preventDefault()}
+                    onClick={() => onRestore(entry)}
+                  >
                     {stashEntrySnippet(entry)}
-                  </span>
+                  </button>
+                </ComposerBanner.Content>
+                <ComposerBanner.Actions>
                   {entry.pendingImageCount ? (
-                    <span className="shrink-0 text-[10px] text-secondary-label">
+                    <span className="shrink-0 text-muted-foreground">
                       saving {entry.pendingImageCount} image
                       {entry.pendingImageCount === 1 ? "" : "s"}…
                     </span>
                   ) : missingImageCount(entry) > 0 ? (
-                    <span className="shrink-0 text-[10px] text-warning-foreground">
+                    <span className="shrink-0 text-warning-foreground">
                       {missingImageCount(entry)} image
                       {missingImageCount(entry) === 1 ? "" : "s"} dropped
                     </span>
@@ -181,38 +192,35 @@ export const ComposerStashMenu = memo(function ComposerStashMenu(props: {
                           src={attachment.dataUrl}
                           alt=""
                           aria-hidden="true"
-                          className="size-5 rounded border border-border/70 object-cover"
+                          className="size-4 rounded border border-border/70 object-cover"
                         />
                       ))}
                     </span>
                   ) : null}
                   {(entry.files?.length ?? 0) > 0 ? (
-                    <span className="flex shrink-0 items-center gap-1 text-secondary-label text-xs">
-                      <FileIcon className="size-3.5 text-secondary-label" />
+                    <span className="flex shrink-0 items-center gap-1 text-muted-foreground">
+                      <FileIcon className="size-3" aria-hidden />
                       {entry.files!.length}
                     </span>
                   ) : null}
-                  <span className="shrink-0 text-secondary-label text-xs max-sm:hidden">
+                  <time
+                    dateTime={entry.createdAt}
+                    className="shrink-0 text-muted-foreground tabular-nums max-sm:hidden"
+                  >
                     {formatRelativeTimeLabel(entry.createdAt)}
-                  </span>
-                  <Button
-                    variant="ghost"
-                    size="icon-xs"
-                    className="pointer-events-none shrink-0 [--control-icon-color:currentColor] opacity-0 shadow-none! transition-opacity pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 group-hover/stash:pointer-events-auto group-hover/stash:opacity-100 group-focus-within/stash:pointer-events-auto group-focus-within/stash:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
+                  </time>
+                  <ComposerBanner.Dismiss
+                    className="z-10"
                     aria-label="Delete stashed prompt"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onDelete(entry);
-                    }}
-                  >
-                    <XIcon className="size-3.5 stroke-2" />
-                  </Button>
-                </CommandItem>
-              ))
-            )}
-          </CommandGroup>
-        </CommandList>
-      </div>
-    </Command>
+                    onPointerDown={(event) => event.preventDefault()}
+                    onClick={() => onDelete(entry)}
+                  />
+                </ComposerBanner.Actions>
+              </ComposerBanner.Row>
+            ))
+          )}
+        </ComposerBanner.Children>
+      </ComposerBanner.Scroll>
+    </ComposerBanner.Root>
   );
 });
diff --git a/apps/web/src/components/chat/ComposerSurface.tsx b/apps/web/src/components/chat/ComposerSurface.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..80a9a6c2d5d46010170b2659f7e5f75c24c38cbb
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerSurface.tsx
@@ -0,0 +1,99 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "~/lib/utils";
+
+/** One glass backdrop until a top attachment needs the composer to cover its overlap. */
+function Shell({
+  contextStrip = false,
+  className,
+  ...props
+}: ComponentProps<"div"> & { contextStrip?: boolean }) {
+  return (
+    <div
+      data-slot="composer-shell"
+      data-with-context={contextStrip || undefined}
+      className={cn(
+        "group/composer-surface relative isolate mx-auto w-full max-w-3xl",
+        "[--chat-composer-glass-surface:var(--card)] [--chat-composer-outline:rgb(0_0_0/8%)]",
+        "dark:[--chat-composer-glass-surface:color-mix(in_srgb,var(--background)_96%,var(--color-white))] dark:[--chat-composer-highlight:rgb(255_255_255/3%)] dark:[--chat-composer-outline:color-mix(in_srgb,var(--color-white)_5%,transparent)]",
+        "[html[data-theme-id]_&]:[--chat-composer-glass-surface:var(--app-theme-surface-raised)] [html[data-theme-id]_&]:[--chat-composer-outline:var(--app-theme-toolbar-border)]",
+        "dark:[html[data-theme-id]:not([data-theme-id=t3-chat])_&]:[--chat-composer-highlight:color-mix(in_srgb,var(--app-theme-input)_12%,transparent)] dark:[html[data-theme-id]:not([data-theme-id=t3-chat])_&]:[--chat-composer-outline:color-mix(in_srgb,var(--app-theme-input)_30%,var(--background))]",
+        "dark:[html[data-theme-id=t3-chat]_&]:[--chat-composer-highlight:color-mix(in_srgb,#432d48_12%,transparent)] dark:[html[data-theme-id=t3-chat]_&]:[--chat-composer-outline:#241e28]",
+        "before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[22px] before:bg-[color-mix(in_srgb,var(--chat-composer-glass-surface)_var(--glass-opacity),transparent)] before:backdrop-blur-(--glass-blur) before:backdrop-saturate-(--glass-saturation)",
+        "not-supports-[(backdrop-filter:blur(1px))_or_(-webkit-backdrop-filter:blur(1px))]:before:bg-(--chat-composer-glass-surface)",
+        "has-data-[composer-banner-surface=attached]:before:hidden",
+        contextStrip && [
+          "[--chat-composer-context-extension:2.25rem] sm:[--chat-composer-context-extension:2rem]",
+          // Keep one continuous backdrop around the fixed-pixel corners and rem-sized strip inset.
+          "supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:rounded-none",
+          "before:[clip-path:shape(from_0_22px,curve_to_22px_0_with_0_9.85px/9.85px_0,line_to_calc(100%-22px)_0,curve_to_100%_22px_with_calc(100%-9.85px)_0/100%_9.85px,line_to_100%_calc(100%-var(--chat-composer-context-extension)-1.375rem),curve_to_calc(100%-1.375rem)_calc(100%-var(--chat-composer-context-extension))_with_100%_calc(100%-var(--chat-composer-context-extension)-0.6156rem)/calc(100%-0.6156rem)_calc(100%-var(--chat-composer-context-extension)),line_to_calc(100%-1.375rem)_calc(100%-16px),curve_to_calc(100%-1.375rem-16px)_100%_with_calc(100%-1.375rem)_calc(100%-7.16px)/calc(100%-1.375rem-7.16px)_100%,line_to_calc(1.375rem+16px)_100%,curve_to_1.375rem_calc(100%-16px)_with_calc(1.375rem+7.16px)_100%/1.375rem_calc(100%-7.16px),line_to_1.375rem_calc(100%-var(--chat-composer-context-extension)),curve_to_0_calc(100%-var(--chat-composer-context-extension)-1.375rem)_with_0.6156rem_calc(100%-var(--chat-composer-context-extension))/0_calc(100%-var(--chat-composer-context-extension)-0.6156rem),line_to_0_22px,close)]",
+          "not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:bottom-(--chat-composer-context-extension)",
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const outlineClasses =
+  "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-(--chat-composer-outline) dark:after:shadow-[inset_0_1px_var(--chat-composer-highlight)]";
+
+// The bottom strip continues the outline, so leave the seam between its corners open.
+const contextSeamClasses =
+  "group-data-with-context/composer-surface:after:[clip-path:polygon(0_0,100%_0,100%_100%,calc(100%-22px)_100%,calc(100%-22px)_calc(100%-2px),22px_calc(100%-2px),22px_100%,0_100%)]";
+
+function Host({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="composer-host"
+      className={cn(
+        "relative z-10 w-full rounded-[22px] shadow-[0_12px_28px_-18px_rgb(0_0_0/40%)] after:z-1 dark:shadow-none",
+        outlineClasses,
+        contextSeamClasses,
+        "group-has-data-[composer-banner-surface=attached]/composer-surface:shadow-none group-has-data-[composer-banner-surface=attached]/composer-surface:after:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Main({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-chat-composer-main-surface="true"
+      className={cn(
+        "group relative z-10 rounded-[22px] p-px transition-colors duration-200",
+        outlineClasses,
+        contextSeamClasses,
+        "after:z-20 after:hidden group-has-data-[composer-banner-surface=attached]/composer-surface:after:block",
+        "group-has-data-[composer-banner-surface=attached]/composer-surface:bg-[color-mix(in_srgb,var(--chat-composer-glass-surface)_var(--glass-opacity),transparent)] group-has-data-[composer-banner-surface=attached]/composer-surface:backdrop-blur-(--glass-blur) group-has-data-[composer-banner-surface=attached]/composer-surface:backdrop-saturate-(--glass-saturation)",
+        "group-has-data-[composer-banner-surface=attached]/composer-surface:shadow-[0_12px_28px_-18px_rgb(0_0_0/40%)] dark:group-has-data-[composer-banner-surface=attached]/composer-surface:shadow-none",
+        "not-supports-[(backdrop-filter:blur(1px))_or_(-webkit-backdrop-filter:blur(1px))]:group-has-data-[composer-banner-surface=attached]/composer-surface:bg-(--chat-composer-glass-surface)",
+        "group-has-data-[composer-banner-surface=attached]/composer-surface:**:data-[chat-composer-mobile-collapsed=true]:min-h-[calc(1rem+1px)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextStrip({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="composer-context-strip"
+      className={cn(
+        "group/composer-context relative isolate mx-auto -mt-4 flex w-[calc(100%-2.75rem)] max-w-181 items-center gap-2 overflow-x-clip overflow-y-visible ps-1 pe-2 pt-5 pb-1",
+        "before:absolute before:inset-0 before:-z-1 before:rounded-b-[16px] before:border before:border-(--chat-composer-outline) before:mask-[linear-gradient(to_bottom,transparent_0_1rem,black_1rem)] before:shadow-[0_12px_28px_-18px_rgb(0_0_0/40%)]",
+        "dark:before:border-white/7 dark:before:bg-[linear-gradient(to_bottom,transparent_0_1rem,rgb(0_0_0/18%)_1rem,transparent_calc(1rem+10px)),linear-gradient(rgb(255_255_255/2%),rgb(255_255_255/2%))] dark:before:shadow-[0_14px_32px_-18px_rgb(0_0_0/75%)]",
+        "group-has-data-[composer-banner-surface=attached]/composer-surface:before:bg-[color-mix(in_srgb,var(--chat-composer-glass-surface)_var(--glass-opacity),transparent)] group-has-data-[composer-banner-surface=attached]/composer-surface:before:backdrop-blur-(--glass-blur) group-has-data-[composer-banner-surface=attached]/composer-surface:before:backdrop-saturate-(--glass-saturation)",
+        "not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:bg-[color-mix(in_srgb,var(--chat-composer-glass-surface)_var(--glass-opacity),transparent)] not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:backdrop-blur-(--glass-blur) not-supports-[clip-path:shape(from_0_0,line_to_1px_1px)]:before:backdrop-saturate-(--glass-saturation)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export const ComposerSurface = { Shell, Host, Main, ContextStrip };
diff --git a/apps/web/src/components/chat/ComposerTasksBadge.test.tsx b/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
deleted file mode 100644
index 3f17143e53e93ba4a2d6d9448fee12038a20b1ad..0000000000000000000000000000000000000000
--- a/apps/web/src/components/chat/ComposerTasksBadge.test.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vite-plus/test";
-
-import { ComposerTasksBadge, ComposerTasksDrawer } from "./ComposerTasksBadge";
-
-const progress = {
-  step: "Attach task progress",
-  completedSteps: 1,
-  totalSteps: 3,
-};
-const steps = [
-  { durationMs: 4_000, step: "Inspect the composer", status: "completed" as const },
-  { step: "Attach task progress", status: "inProgress" as const },
-  { step: "Verify the result", status: "pending" as const },
-];
-
-describe("ComposerTasksBadge", () => {
-  it("renders active progress as an attached composer tab", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerTasksBadge
-        expanded={false}
-        onDismiss={() => undefined}
-        onToggle={() => undefined}
-        progress={progress}
-        steps={steps}
-      />,
-    );
-
-    expect(markup).toContain('data-composer-tasks-badge="true"');
-    expect(markup).toContain('aria-expanded="false"');
-    expect(markup).toContain("chat-composer-shoulder-tab");
-    expect(markup).toContain("chat-composer-tasks-tab");
-    expect(markup).toContain("rounded-t-xl");
-    expect(markup).toContain("border-b-0");
-    expect(markup).toContain("left-5.5");
-    expect(markup).toContain("right-5.5");
-    expect(markup).toContain('data-composer-task-current="true"');
-    expect(markup).toContain("min-w-0 flex-1 truncate");
-    expect(markup).toContain("w-20");
-    expect(markup).toContain("Tasks");
-    expect(markup).toContain("Attach task progress");
-    expect(markup).not.toContain("·");
-    expect(markup).toContain("1/3");
-    expect(markup).toContain("Current task: Attach task progress");
-    expect(markup).toContain("lucide-list-todo");
-    expect(markup).toContain('aria-label="Dismiss tasks for this turn"');
-    expect(markup).toContain("lucide-x");
-    expect(markup).not.toContain("lucide-chevron");
-    expect(markup).toContain("bg-success");
-    expect(markup).toContain("bg-primary");
-    expect(markup).toContain("bg-muted-foreground/25");
-  });
-
-  it("leaves room for the stash tab when both shoulders are present", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerTasksBadge
-        expanded={false}
-        hasTrailingShoulder
-        onDismiss={() => undefined}
-        onToggle={() => undefined}
-        progress={progress}
-        steps={steps}
-      />,
-    );
-
-    expect(markup).toContain("right-30");
-    expect(markup).not.toContain("right-5.5");
-  });
-
-  it("has a compact inline fallback for occupied composer shoulders", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerTasksBadge
-        expanded={false}
-        onDismiss={() => undefined}
-        onToggle={() => undefined}
-        placement="inline"
-        progress={progress}
-        steps={steps}
-      />,
-    );
-
-    expect(markup).toContain("rounded-sm");
-    expect(markup).toContain("1/3");
-    expect(markup).not.toContain("chat-composer-shoulder-tab");
-    expect(markup).not.toContain("rounded-t-xl");
-  });
-
-  it("expands into a read-only attached task list", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerTasksDrawer
-        onCollapse={() => undefined}
-        onDismiss={() => undefined}
-        progress={progress}
-        steps={steps}
-      />,
-    );
-
-    expect(markup).toContain('data-chat-composer-tasks-drawer="true"');
-    expect(markup).toContain('data-chat-composer-collapsed-controls="true"');
-    expect(markup).not.toContain("data-variant");
-    expect(markup).toContain('aria-expanded="true"');
-    expect(markup).toContain('aria-label="Collapse tasks. 1 of 3 complete."');
-    expect(markup).toContain('aria-label="Task list. 1 of 3 complete."');
-    expect(markup).toContain('role="list"');
-    expect(markup).toContain('data-composer-tasks-list="true"');
-    expect(markup).toContain('tabindex="0"');
-    expect(markup).toContain("max-h-[min(24rem,40dvh)]");
-    expect(markup).toContain("overflow-y-auto");
-    expect(markup).toContain("overscroll-contain");
-    expect(markup).toContain("focus-visible:ring-2");
-    expect(markup).toContain("focus-visible:ring-inset");
-    expect(markup).toContain("Inspect the composer");
-    expect(markup).toContain('data-composer-task-duration="true"');
-    expect(markup).toContain("ml-auto w-10");
-    expect(markup).toContain("4.0s");
-    expect(markup).toContain("now");
-    expect(markup).toContain("Attach task progress");
-    expect(markup).toContain("Verify the result");
-    expect(markup).toContain("lucide-list-todo");
-    expect(markup).toContain("lucide-chevron-down");
-    expect(markup).toContain('aria-label="Dismiss tasks for this turn"');
-    expect(markup).not.toContain("bg-success");
-    expect(markup).not.toContain("bg-primary");
-    expect(markup).not.toContain("bg-muted-foreground/25");
-  });
-
-  it("drops the step segments when they would render as a blank gap", () => {
-    const manySteps = Array.from({ length: 24 }, (_, index) => ({
-      step: `Step ${index + 1}`,
-      status: "pending" as const,
-    }));
-    const tab = renderToStaticMarkup(
-      <ComposerTasksBadge
-        expanded={false}
-        onDismiss={() => undefined}
-        onToggle={() => undefined}
-        progress={{ ...progress, totalSteps: manySteps.length }}
-        steps={manySteps}
-      />,
-    );
-    const inline = renderToStaticMarkup(
-      <ComposerTasksBadge
-        expanded={false}
-        onDismiss={() => undefined}
-        onToggle={() => undefined}
-        placement="inline"
-        progress={{ ...progress, totalSteps: manySteps.length }}
-        steps={manySteps}
-      />,
-    );
-
-    expect(tab).not.toContain("w-20");
-    expect(tab).toContain("1/24");
-    expect(inline).not.toContain("w-10");
-    expect(inline).toContain("1/24");
-  });
-
-  it("keeps every long-list task inside the bounded scroll region", () => {
-    const longSteps = Array.from({ length: 20 }, (_, index) => ({
-      step: `Task ${index + 1}`,
-      status: index === 0 ? ("inProgress" as const) : ("pending" as const),
-    }));
-    const markup = renderToStaticMarkup(
-      <ComposerTasksDrawer
-        onCollapse={() => undefined}
-        onDismiss={() => undefined}
-        progress={{ step: "Task 1", completedSteps: 0, totalSteps: longSteps.length }}
-        steps={longSteps}
-      />,
-    );
-
-    const listStart = markup.indexOf('data-composer-tasks-list="true"');
-    expect(listStart).toBeGreaterThan(markup.indexOf('aria-label="Collapse tasks.'));
-    expect(markup.slice(listStart)).toContain("Task 20");
-  });
-
-  it("does not render an empty task count", () => {
-    const markup = renderToStaticMarkup(
-      <ComposerTasksBadge
-        expanded={false}
-        onDismiss={() => undefined}
-        onToggle={() => undefined}
-        progress={{ ...progress, totalSteps: 0 }}
-        steps={steps}
-      />,
-    );
-
-    expect(markup).toBe("");
-  });
-});
diff --git a/apps/web/src/components/chat/ComposerTasksBadge.tsx b/apps/web/src/components/chat/ComposerTasksBadge.tsx
index d73ce819d82a12ae62f91640e66fdaa3ef030cb8..b93143afeda81f84bb7229d85763a12ef8549766 100644
--- a/apps/web/src/components/chat/ComposerTasksBadge.tsx
+++ b/apps/web/src/components/chat/ComposerTasksBadge.tsx
@@ -1,9 +1,14 @@
-import { ChevronDownIcon, ListTodoIcon, XIcon } from "lucide-react";
-import { memo } from "react";
+import { ListTodoIcon } from "lucide-react";
+import { memo, type ComponentProps } from "react";
 
 import { formatDuration } from "../../session-logic";
 import { cn } from "~/lib/utils";
-import { Button } from "../ui/button";
+import { ComposerBanner } from "./ComposerBanner";
+import {
+  ComposerActivityIcon,
+  ComposerActivityLabel,
+  type ComposerActivityStatus,
+} from "./ComposerActivityStatus";
 
 export interface ComposerTasksProgress {
   readonly step: string;
@@ -56,205 +61,185 @@ function TaskSegments({
   );
 }
 
-export const ComposerTasksBadge = memo(function ComposerTasksBadge({
+function TaskSummary({
   expanded,
-  hasTrailingShoulder = false,
-  onDismiss,
-  onToggle,
-  placement = "tab",
   progress,
   steps,
+  activityStatus,
 }: {
   readonly expanded: boolean;
-  readonly hasTrailingShoulder?: boolean;
-  readonly onDismiss: () => void;
-  readonly onToggle: () => void;
-  readonly placement?: "inline" | "tab";
   readonly progress: ComposerTasksProgress;
   readonly steps: readonly ComposerTaskStep[];
+  readonly activityStatus: ComposerActivityStatus | undefined;
 }) {
-  if (progress.totalSteps <= 0) return null;
-
-  const allDone = progress.completedSteps >= progress.totalSteps;
-  const label = `Tasks: ${progress.completedSteps} of ${progress.totalSteps} complete. Current task: ${progress.step}`;
-  if (placement === "inline") {
-    return (
-      <span className="inline-flex shrink-0 items-center gap-0.5" data-composer-tasks-badge="true">
-        <Button
-          size="micro"
-          variant="ghost-muted"
-          aria-expanded={expanded}
-          aria-label={label}
-          className="shrink-0 gap-1 px-1.5"
-          onClick={onToggle}
-          onPointerDown={(event) => event.preventDefault()}
-        >
-          <ListTodoIcon aria-hidden className="size-3 shrink-0" />
-          <span>Tasks</span>
-          <TaskSegments steps={steps} />
-          <span
-            className={cn(
-              "font-medium tabular-nums",
-              allDone ? "text-success" : "text-muted-foreground",
-            )}
-          >
-            {progress.completedSteps}/{progress.totalSteps}
-          </span>
-        </Button>
-        <Button
-          size="icon-micro"
-          variant="ghost-muted"
-          aria-label="Dismiss tasks for this turn"
-          className="shrink-0"
-          onClick={onDismiss}
-          onPointerDown={(event) => event.preventDefault()}
-        >
-          <XIcon aria-hidden className="size-2.5" />
-        </Button>
-      </span>
-    );
-  }
-
   return (
-    <div
-      className={cn(
-        "chat-composer-shoulder-tab chat-composer-tasks-tab absolute -top-7 left-5.5 z-0 flex h-8 items-center gap-1 rounded-t-xl border border-b-0 px-2 pb-1 text-xs leading-none text-muted-foreground",
-        hasTrailingShoulder ? "right-30" : "right-5.5",
-        allDone && "text-foreground",
+    <>
+      {activityStatus !== undefined ? (
+        <ComposerActivityIcon status={activityStatus} />
+      ) : (
+        <ComposerBanner.Icon>
+          <ListTodoIcon />
+        </ComposerBanner.Icon>
       )}
-      data-composer-tasks-badge="true"
-    >
-      <button
-        type="button"
-        aria-expanded={expanded}
-        aria-label={label}
-        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch text-muted-foreground hover:text-foreground"
-        onClick={onToggle}
-        onPointerDown={(event) => event.preventDefault()}
-      >
-        <ListTodoIcon aria-hidden className="size-3.5 shrink-0" />
-        <span className="shrink-0">Tasks</span>
+      <ComposerBanner.Content>
+        {activityStatus !== undefined ? (
+          <ComposerActivityLabel status={activityStatus} />
+        ) : (
+          <span className="shrink-0 text-muted-foreground">Tasks</span>
+        )}
+        {activityStatus !== undefined ? <ComposerBanner.Separator /> : null}
         <span
           className="min-w-0 flex-1 truncate text-left font-medium text-foreground/80"
           data-composer-task-current="true"
         >
           {progress.step}
         </span>
-        <span
-          className={cn(
-            "shrink-0 font-medium tabular-nums",
-            allDone ? "text-success" : "text-muted-foreground",
-          )}
+      </ComposerBanner.Content>
+      <ComposerBanner.Actions>
+        <ComposerBanner.Count
+          className={progress.completedSteps >= progress.totalSteps ? "text-success" : undefined}
+          data-composer-task-progress="true"
         >
           {progress.completedSteps}/{progress.totalSteps}
-        </span>
-        <TaskSegments className="w-20" steps={steps} />
-      </button>
-      <Button
-        size="icon-micro"
-        variant="ghost-muted"
-        aria-label="Dismiss tasks for this turn"
-        className="shrink-0"
-        onClick={onDismiss}
-        onPointerDown={(event) => event.preventDefault()}
-      >
-        <XIcon aria-hidden className="size-3" />
-      </Button>
+        </ComposerBanner.Count>
+        <TaskSegments className="hidden w-20 sm:flex" steps={steps} />
+        <ComposerBanner.ToggleIcon expanded={expanded} />
+      </ComposerBanner.Actions>
+    </>
+  );
+}
+
+export const ComposerTasksBadge = memo(function ComposerTasksBadge({
+  expanded,
+  onToggle,
+  placement = "tab",
+  progress,
+  steps,
+  activityStatus,
+}: {
+  readonly expanded: boolean;
+  readonly onToggle: () => void;
+  readonly placement?: "inline" | "tab";
+  readonly progress: ComposerTasksProgress;
+  readonly steps: readonly ComposerTaskStep[];
+  readonly activityStatus?: ComposerActivityStatus | undefined;
+}) {
+  if (progress.totalSteps <= 0) return null;
+
+  const row = (
+    <ComposerBanner.Row
+      render={<button type="button" />}
+      aria-expanded={expanded}
+      aria-label={`${expanded ? "Collapse tasks" : "Tasks"}: ${progress.completedSteps} of ${progress.totalSteps} complete. Current task: ${progress.step}`}
+      data-composer-tasks-badge="true"
+      onClick={onToggle}
+      onPointerDown={(event) => event.preventDefault()}
+    >
+      <TaskSummary
+        expanded={expanded}
+        progress={progress}
+        steps={steps}
+        activityStatus={activityStatus}
+      />
+    </ComposerBanner.Row>
+  );
+  return placement === "inline" ? (
+    row
+  ) : (
+    <ComposerBanner.Root data-composer-shoulder-tab>{row}</ComposerBanner.Root>
+  );
+});
+
+export const ComposerTasksContent = memo(function ComposerTasksContent({
+  expanded,
+  onToggle,
+  progress,
+  steps,
+  activityStatus,
+}: {
+  readonly expanded: boolean;
+  readonly onToggle: () => void;
+  readonly progress: ComposerTasksProgress;
+  readonly steps: readonly ComposerTaskStep[];
+  readonly activityStatus?: ComposerActivityStatus | undefined;
+}) {
+  return (
+    <div
+      data-chat-composer-collapsed-controls="true"
+      data-chat-composer-tasks-drawer={expanded ? "true" : undefined}
+    >
+      <ComposerTasksBadge
+        expanded={expanded}
+        onToggle={onToggle}
+        placement="inline"
+        progress={progress}
+        steps={steps}
+        activityStatus={activityStatus}
+      />
+      {expanded ? (
+        <ComposerBanner.Scroll data-composer-tasks-scroll="true">
+          <ComposerBanner.Children
+            render={<ul />}
+            aria-label={`Task list. ${progress.completedSteps} of ${progress.totalSteps} complete.`}
+            data-composer-tasks-list="true"
+          >
+            {keyedTaskSteps(steps).map(({ key, step }) => (
+              <ComposerBanner.Row key={key} render={<li />}>
+                <ComposerBanner.Icon
+                  className={cn(
+                    "font-mono text-[10px]",
+                    step.status === "completed"
+                      ? "text-success"
+                      : step.status === "inProgress"
+                        ? "text-primary"
+                        : "text-muted-foreground/40",
+                  )}
+                >
+                  {step.status === "completed" ? "✓" : step.status === "inProgress" ? "●" : "○"}
+                </ComposerBanner.Icon>
+                <ComposerBanner.Content
+                  className={cn(
+                    step.status === "completed"
+                      ? "text-muted-foreground/55"
+                      : step.status === "inProgress"
+                        ? "text-foreground/90"
+                        : "text-muted-foreground/70",
+                  )}
+                >
+                  {step.step}
+                </ComposerBanner.Content>
+                <ComposerBanner.Actions>
+                  <span
+                    className="w-10 text-right text-[10px] text-muted-foreground/45 tabular-nums"
+                    data-composer-task-duration="true"
+                  >
+                    {step.durationMs !== undefined
+                      ? formatDuration(step.durationMs)
+                      : step.status === "inProgress"
+                        ? "now"
+                        : null}
+                  </span>
+                </ComposerBanner.Actions>
+              </ComposerBanner.Row>
+            ))}
+          </ComposerBanner.Children>
+        </ComposerBanner.Scroll>
+      ) : null}
     </div>
   );
 });
 
 export const ComposerTasksDrawer = memo(function ComposerTasksDrawer({
-  onDismiss,
   onCollapse,
-  progress,
-  steps,
-}: {
-  readonly onDismiss: () => void;
+  ...props
+}: Omit<ComponentProps<typeof ComposerTasksContent>, "expanded" | "onToggle"> & {
   readonly onCollapse: () => void;
-  readonly progress: ComposerTasksProgress;
-  readonly steps: readonly ComposerTaskStep[];
 }) {
   return (
-    <div
-      className="chat-composer-top-drawer"
-      data-chat-composer-collapsed-controls="true"
-      data-chat-composer-tasks-drawer="true"
-    >
-      <div className="flex items-center gap-1 px-3 py-1.5 sm:px-4">
-        <button
-          type="button"
-          aria-expanded="true"
-          aria-label={`Collapse tasks. ${progress.completedSteps} of ${progress.totalSteps} complete.`}
-          className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch text-left text-xs text-muted-foreground hover:text-foreground"
-          onClick={onCollapse}
-          onPointerDown={(event) => event.preventDefault()}
-        >
-          <ListTodoIcon aria-hidden className="size-3.5 shrink-0" />
-          <span className="font-medium text-foreground">Tasks</span>
-          <span className="tabular-nums">
-            {progress.completedSteps}/{progress.totalSteps}
-          </span>
-          <ChevronDownIcon aria-hidden className="ml-auto size-3.5 shrink-0" />
-        </button>
-        <Button
-          size="icon-micro"
-          variant="ghost-muted"
-          aria-label="Dismiss tasks for this turn"
-          className="shrink-0"
-          onClick={onDismiss}
-          onPointerDown={(event) => event.preventDefault()}
-        >
-          <XIcon aria-hidden className="size-3" />
-        </Button>
-      </div>
-      <div
-        aria-label={`Task list. ${progress.completedSteps} of ${progress.totalSteps} complete.`}
-        className="max-h-[min(24rem,40dvh)] space-y-px overflow-y-auto overscroll-contain px-3 pb-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70 sm:px-4"
-        data-composer-tasks-list="true"
-        role="list"
-        tabIndex={0}
-      >
-        {keyedTaskSteps(steps).map(({ key, step }) => (
-          <div key={key} className="flex items-baseline gap-2 text-xs leading-5" role="listitem">
-            <span
-              aria-hidden
-              className={cn(
-                "w-3 shrink-0 text-center font-mono text-[10px]",
-                step.status === "completed"
-                  ? "text-success"
-                  : step.status === "inProgress"
-                    ? "text-primary"
-                    : "text-muted-foreground/40",
-              )}
-            >
-              {step.status === "completed" ? "✓" : step.status === "inProgress" ? "●" : "○"}
-            </span>
-            <span
-              className={cn(
-                "min-w-0 flex-1",
-                step.status === "completed"
-                  ? "text-muted-foreground/55"
-                  : step.status === "inProgress"
-                    ? "text-foreground/90"
-                    : "text-muted-foreground/70",
-              )}
-            >
-              {step.step}
-            </span>
-            <span
-              className="ml-auto w-10 shrink-0 text-right text-[10px] text-muted-foreground/45 tabular-nums"
-              data-composer-task-duration="true"
-            >
-              {step.durationMs !== undefined
-                ? formatDuration(step.durationMs)
-                : step.status === "inProgress"
-                  ? "now"
-                  : null}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
+    <ComposerBanner.Attachment>
+      <ComposerBanner.Root>
+        <ComposerTasksContent {...props} expanded onToggle={onCollapse} />
+      </ComposerBanner.Root>
+    </ComposerBanner.Attachment>
   );
 });
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
index 81c9fdacdb9a0da75c6ffd7802714d544247fad3..bd6ffffe15dce9ae7ec60c8428076c54e0da0354 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -321,7 +321,6 @@ describe("deriveMessagesTimelineRows", () => {
       ],
       expandedTurnIds: new Set(["turn-1" as never]),
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -375,7 +374,6 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -432,7 +430,6 @@ describe("deriveMessagesTimelineRows", () => {
         },
       ],
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map([
         ["assistant-1" as never, assistantTurnDiffSummary],
       ]),
@@ -513,7 +510,6 @@ describe("deriveMessagesTimelineRows", () => {
     const collapsedRows = deriveMessagesTimelineRows({
       timelineEntries,
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -537,7 +533,6 @@ describe("deriveMessagesTimelineRows", () => {
       timelineEntries,
       expandedTurnIds: new Set(["turn-1" as never]),
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -603,7 +598,6 @@ describe("deriveMessagesTimelineRows", () => {
     const rows = deriveMessagesTimelineRows({
       timelineEntries,
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -698,7 +692,6 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:14Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -735,7 +728,6 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: "2026-01-01T00:00:47Z",
       },
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -803,7 +795,6 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: "2026-01-01T00:00:22Z",
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:01:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -812,7 +803,6 @@ describe("deriveMessagesTimelineRows", () => {
       "turn-fold:turn-1",
       "assistant-final-entry",
       "user-followup-entry",
-      "working-indicator-row",
     ]);
     const finalRow = rows.find((row) => row.id === "assistant-final-entry");
     expect(finalRow?.kind === "message" && finalRow.showAssistantMeta).toBe(true);
@@ -855,14 +845,12 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
 
     expect(rows.some((row) => row.kind === "turn-fold")).toBe(false);
     expect(rows.map((row) => row.id)).toEqual([
-      "working-indicator-row",
       "assistant-thought-entry",
       "work-live:work-entry-1",
     ]);
@@ -924,12 +912,11 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
 
-    expect(rows.map((row) => row.kind)).toEqual(["working", "work-live"]);
+    expect(rows.map((row) => row.kind)).toEqual(["work-live"]);
     expect(rows.find((row) => row.kind === "work-live")).toMatchObject({
       entry: { id: "running-command" },
       groupedEntries: [
@@ -995,12 +982,11 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
 
-    expect(rows.map((row) => row.kind)).toEqual(["working", "work-toggle", "message", "work-live"]);
+    expect(rows.map((row) => row.kind)).toEqual(["work-toggle", "message", "work-live"]);
     expect(rows.find((row) => row.kind === "work-toggle")).toMatchObject({
       hiddenCount: 1,
       summary: "Ran 1 command",
@@ -1062,12 +1048,11 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
 
-    expect(rows.map((row) => row.kind)).toEqual(["working", "work-live", "message", "work-live"]);
+    expect(rows.map((row) => row.kind)).toEqual(["work-live", "message", "work-live"]);
     expect(rows.filter((row) => row.kind === "work-live").map((row) => row.entry.id)).toEqual([
       "first-running",
       "second-running",
@@ -1109,7 +1094,6 @@ describe("deriveMessagesTimelineRows", () => {
       ],
       latestTurn: null,
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:01:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1170,7 +1154,6 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1206,12 +1189,11 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
 
-    expect(rows.map((row) => row.kind)).toEqual(["working", "work-live"]);
+    expect(rows.map((row) => row.kind)).toEqual(["work-live"]);
     expect(rows.find((row) => row.kind === "work-live")).toMatchObject({
       entry: { id: "latest-command" },
       groupedEntries: [{ id: "latest-command" }],
@@ -1268,7 +1250,6 @@ describe("deriveMessagesTimelineRows", () => {
       },
       runningTurnId: "turn-2" as never,
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:01:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1313,7 +1294,6 @@ describe("deriveMessagesTimelineRows", () => {
       ],
       expandedTurnIds: new Set(["turn-1" as never]),
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1351,7 +1331,6 @@ describe("deriveMessagesTimelineRows", () => {
         completedAt: null,
       },
       isWorking: true,
-      activeTurnStartedAt: "2026-01-01T00:00:00Z",
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1365,7 +1344,10 @@ describe("deriveMessagesTimelineRows", () => {
     expect(assistantRow?.showAssistantCopyButton).toBe(false);
   });
 
-  it("models work log overflow expansion as inserted list rows", () => {
+  it.each([
+    ["tools", "tool", "Used 3 tools"],
+    ["tools and status updates", "info", "Used 2 tools and received 1 update"],
+  ] as const)("expands %s through the same activity group", (_, middleTone, summary) => {
     const timelineEntries = [
       {
         id: "work-entry-1",
@@ -1386,9 +1368,9 @@ describe("deriveMessagesTimelineRows", () => {
         entry: {
           id: "work-2",
           createdAt: "2026-01-01T00:00:02Z",
-          label: "edit",
+          label: "Status updated",
           detail: "Editing MessagesTimeline.tsx",
-          tone: "tool" as const,
+          tone: middleTone,
         },
       },
       {
@@ -1408,7 +1390,6 @@ describe("deriveMessagesTimelineRows", () => {
     const baseInput = {
       timelineEntries,
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     };
@@ -1423,8 +1404,7 @@ describe("deriveMessagesTimelineRows", () => {
       groupId: "work-group:work-entry-1",
       hiddenCount: 3,
       expanded: false,
-      onlyToolEntries: true,
-      summary: "Used 3 tools",
+      summary,
     });
     expect(expandedRows.map((row) => row.id)).toEqual([
       "work-toggle:work-entry-1",
@@ -1459,7 +1439,6 @@ describe("deriveMessagesTimelineRows", () => {
     const rows = deriveMessagesTimelineRows({
       timelineEntries,
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1476,7 +1455,7 @@ describe("deriveMessagesTimelineRows", () => {
     ["an error-toned entry recovers", ["error", "info", "completed"], false],
     ["the final failure is hidden", ["completed", "failed", "info"], true],
     ["the final failure is visible", ["failed", "info", "failed"], true],
-    ["the only failure is visible", ["completed", "info", "failed"], false],
+    ["the only failure is visible", ["completed", "info", "failed"], true],
   ] as const)(
     "uses the final tool call for mixed work groups when %s",
     (_, statuses, hasFailure) => {
@@ -1506,16 +1485,23 @@ describe("deriveMessagesTimelineRows", () => {
       const rows = deriveMessagesTimelineRows({
         timelineEntries,
         isWorking: false,
-        activeTurnStartedAt: null,
         turnDiffSummaryByAssistantMessageId: new Map(),
         revertTurnCountByUserMessageId: new Map(),
       });
 
       expect(rows.find((row) => row.kind === "work-toggle")).toMatchObject({
-        hiddenCount: 2,
-        summary: null,
+        hiddenCount: statuses.some((status) => status === "error") ? 2 : 3,
+        summary: statuses.some((status) => status === "error")
+          ? "Received 1 update and used 1 tool"
+          : "Used 2 tools and received 1 update",
         hasFailure,
       });
+      if (statuses.some((status) => status === "error")) {
+        expect(rows[0]).toMatchObject({
+          kind: "work",
+          groupedEntries: [{ tone: "error", label: "Command failed" }],
+        });
+      }
     },
   );
 });
@@ -1557,7 +1543,6 @@ describe("computeStableMessagesTimelineRows", () => {
         },
       ],
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
@@ -1606,7 +1591,6 @@ describe("computeStableMessagesTimelineRows", () => {
           },
         ],
         isWorking: false,
-        activeTurnStartedAt: null,
         turnDiffSummaryByAssistantMessageId: new Map(),
         revertTurnCountByUserMessageId: new Map(),
       });
@@ -1662,7 +1646,6 @@ describe("computeStableMessagesTimelineRows", () => {
         },
       ],
       isWorking: false,
-      activeTurnStartedAt: null,
       turnDiffSummaryByAssistantMessageId: new Map(),
       revertTurnCountByUserMessageId: new Map(),
     });
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index d398583430f55ecba7f81961d499f4222b991024..895141f2bef143f1bb30a61611a85c41a099b5d4 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -11,7 +11,6 @@ import {
 import { type ChatMessage, type ProposedPlan, type TurnDiffSummary } from "../../types";
 import { type MessageId, type OrchestrationLatestTurn, type TurnId } from "@t3tools/contracts";
 
-export const MAX_VISIBLE_WORK_LOG_ENTRIES = 1;
 export const TIMELINE_MINIMAP_ITEM_SPACING = 8;
 export const TIMELINE_MINIMAP_MIN_ITEMS = 2;
 export const TIMELINE_MINIMAP_MAX_HEIGHT_CSS = "calc(100vh - 18rem)";
@@ -202,9 +201,8 @@ export type MessagesTimelineRow =
       groupId: string;
       hiddenCount: number;
       expanded: boolean;
-      onlyToolEntries: boolean;
-      summary: string | null;
-      summaryKind: ToolGroupSummaryKind | null;
+      summary: string;
+      summaryKind: ToolGroupSummaryKind;
       hasFailure: boolean;
     }
   | {
@@ -238,12 +236,6 @@ export type MessagesTimelineRow =
       id: string;
       createdAt: string;
       turnPlan: TurnPlanEntry;
-    }
-  | {
-      kind: "working";
-      id: string;
-      createdAt: string | null;
-      showThinking: boolean;
     };
 
 export interface StableMessagesTimelineRowsState {
@@ -274,7 +266,7 @@ export function normalizeCompactToolLabel(value: string): string {
   return value.replace(/\s+(?:complete|completed)\s*$/i, "").trim();
 }
 
-type ToolGroupAction = "read" | "edit" | "command" | "code-search" | "search" | "other";
+type ToolGroupAction = "read" | "edit" | "command" | "code-search" | "search" | "other" | "update";
 type ToolGroupSummaryKind = ToolGroupAction | "dynamic-tool" | "agent-tool" | "tone-tool" | "mixed";
 
 export function workLogEntryIsLocalCodeSearch(entry: WorkLogEntry): boolean {
@@ -304,7 +296,7 @@ export function toolGroupAction(entry: WorkLogEntry): ToolGroupAction {
   }
   if (workLogEntryIsLocalCodeSearch(entry)) return "code-search";
   if (entry.itemType === "web_search") return "search";
-  return "other";
+  return workLogEntryIsToolLike(entry) ? "other" : "update";
 }
 
 function toolGroupActionCount(
@@ -339,6 +331,8 @@ function toolGroupActionLabel(action: ToolGroupAction, count: number): string {
       return `Searched code ${count} ${count === 1 ? "time" : "times"}`;
     case "other":
       return `Used ${count} ${count === 1 ? "tool" : "tools"}`;
+    case "update":
+      return `Received ${count} ${count === 1 ? "update" : "updates"}`;
   }
 }
 
@@ -664,7 +658,6 @@ export function deriveMessagesTimelineRows(input: {
   expandedTurnIds?: ReadonlySet<TurnId>;
   expandedWorkGroupIds?: ReadonlySet<string>;
   isWorking: boolean;
-  activeTurnStartedAt: string | null;
   turnDiffSummaryByAssistantMessageId: ReadonlyMap<MessageId, TurnDiffSummary>;
   revertTurnCountByUserMessageId: ReadonlyMap<MessageId, number>;
 }): MessagesTimelineRow[] {
@@ -714,26 +707,6 @@ export function deriveMessagesTimelineRows(input: {
     unsettledTurnId !== null &&
     entry.toolLifecycleStatus === "inProgress" &&
     entry.turnId === unsettledTurnId;
-  const isVisibleActiveToolEntry = (entry: WorkLogEntry) =>
-    workLogEntryIsToolLike(entry) && workEntryIsVisibleInGroup(entry, true);
-  const activeEntries = input.isWorking
-    ? input.timelineEntries.filter((entry, index) => entryBelongsToActiveTurn(entry, index))
-    : [];
-  const activeTurnHasVisibleContent = activeEntries.some((entry) => {
-    if (entry.kind === "message") {
-      return entry.message.role === "assistant" && (entry.message.text?.trim().length ?? 0) > 0;
-    }
-    if (entry.kind === "work") {
-      return (
-        entry.entry.agentSpawn === undefined &&
-        workLogEntryIsToolLike(entry.entry) &&
-        entry.entry.toolLifecycleStatus === "inProgress"
-      );
-    }
-    if (entry.kind === "proposed-plan" || entry.kind === "turn-plan") return true;
-    return false;
-  });
-
   const activeToolEntries: Array<Extract<TimelineEntry, { kind: "work" }>> = [];
   for (let index = input.timelineEntries.length - 1; index >= activeTurnHeaderIndex; index -= 1) {
     const entry = input.timelineEntries[index]!;
@@ -741,8 +714,7 @@ export function deriveMessagesTimelineRows(input: {
       !entryBelongsToActiveTurn(entry, index) ||
       entry.kind !== "work" ||
       entry.entry.agentSpawn !== undefined ||
-      entry.entry.tone === "error" ||
-      !workLogEntryIsToolLike(entry.entry)
+      entry.entry.tone === "error"
     ) {
       break;
     }
@@ -750,7 +722,7 @@ export function deriveMessagesTimelineRows(input: {
   }
   const activeWorkEntryIds = new Set(activeToolEntries.map((entry) => entry.id));
   const visibleActiveToolEntries = omitSupersededLifecycleMarkers(
-    activeToolEntries.filter((entry) => isVisibleActiveToolEntry(entry.entry)),
+    activeToolEntries.filter((entry) => workEntryIsVisibleInGroup(entry.entry, true)),
     (entry) => entry.entry,
   );
   const activeWorkAnchor = activeToolEntries[0];
@@ -771,14 +743,6 @@ export function deriveMessagesTimelineRows(input: {
           };
         })()
       : null;
-  const appendWorkingRow = () => {
-    nextRows.push({
-      kind: "working",
-      id: "working-indicator-row",
-      createdAt: input.activeTurnStartedAt,
-      showThinking: activeWorkRow === null && !activeTurnHasVisibleContent,
-    });
-  };
   const appendActiveWorkRows = () => {
     if (activeWorkRow === null) return;
     nextRows.push(activeWorkRow);
@@ -801,10 +765,6 @@ export function deriveMessagesTimelineRows(input: {
       continue;
     }
 
-    if (input.isWorking && index === activeTurnHeaderIndex) {
-      appendWorkingRow();
-    }
-
     if (timelineEntry.id === activeWorkPlacementEntryId) {
       appendActiveWorkRows();
     }
@@ -830,6 +790,17 @@ export function deriveMessagesTimelineRows(input: {
     }
 
     if (timelineEntry.kind === "work") {
+      if (timelineEntry.entry.agentSpawn !== undefined || timelineEntry.entry.tone === "error") {
+        nextRows.push({
+          kind: "work",
+          id: timelineEntry.id,
+          createdAt: timelineEntry.createdAt,
+          groupedEntries: [timelineEntry.entry],
+          isExpandedToolGroupEntry: false,
+          isLastExpandedToolGroupEntry: false,
+        });
+        continue;
+      }
       const groupedEntries = [timelineEntry.entry];
       let cursor = index + 1;
       while (cursor < input.timelineEntries.length) {
@@ -837,6 +808,8 @@ export function deriveMessagesTimelineRows(input: {
         if (
           !nextEntry ||
           nextEntry.kind !== "work" ||
+          nextEntry.entry.agentSpawn !== undefined ||
+          nextEntry.entry.tone === "error" ||
           activeWorkEntryIds.has(nextEntry.id) ||
           collapsedEntryIds.has(nextEntry.id) ||
           foldsByAnchorEntryId.has(nextEntry.id)
@@ -853,14 +826,8 @@ export function deriveMessagesTimelineRows(input: {
         (entry) => entry,
       );
       if (visibleGroupedEntries.length > 0) {
-        const onlyToolEntries = visibleGroupedEntries.every(
-          (entry) =>
-            workLogEntryIsToolLike(entry) &&
-            entry.agentSpawn === undefined &&
-            entry.tone !== "error",
-        );
         const activeInProgressToolEntries = visibleGroupedEntries.filter(workEntryIsInActiveRun);
-        if (onlyToolEntries && activeInProgressToolEntries.length > 0) {
+        if (activeInProgressToolEntries.length > 0) {
           const groupId = workGroupId(timelineEntry.id, timelineEntry.entry);
           const expanded = input.expandedWorkGroupIds?.has(groupId) ?? false;
           const latestActiveToolEntry = activeInProgressToolEntries.at(-1)!;
@@ -885,10 +852,11 @@ export function deriveMessagesTimelineRows(input: {
               });
             }
           }
-        } else if (onlyToolEntries) {
+        } else {
           const groupId = workGroupId(timelineEntry.id, timelineEntry.entry);
           const expanded = input.expandedWorkGroupIds?.has(groupId) ?? false;
           const summaryKind = toolGroupSummaryKind(visibleGroupedEntries);
+          const latestToolEntry = visibleGroupedEntries.findLast(workLogEntryIsToolLike);
           nextRows.push({
             kind: "work-toggle",
             id: `work-toggle:${timelineEntry.id}`,
@@ -896,10 +864,15 @@ export function deriveMessagesTimelineRows(input: {
             groupId,
             hiddenCount: visibleGroupedEntries.length,
             expanded,
-            onlyToolEntries: true,
-            summary: summarizeToolGroup(visibleGroupedEntries),
+            summary:
+              visibleGroupedEntries.length === 1 &&
+              !workLogEntryIsToolLike(visibleGroupedEntries[0]!)
+                ? visibleGroupedEntries[0]!.label
+                : summarizeToolGroup(visibleGroupedEntries),
             summaryKind,
-            hasFailure: workEntryDisplayIndicatesToolFailure(visibleGroupedEntries.at(-1)!),
+            hasFailure:
+              latestToolEntry !== undefined &&
+              workEntryDisplayIndicatesToolFailure(latestToolEntry),
           });
           if (expanded) {
             for (const [entryIndex, workEntry] of visibleGroupedEntries.entries()) {
@@ -913,64 +886,6 @@ export function deriveMessagesTimelineRows(input: {
               });
             }
           }
-        } else if (visibleGroupedEntries.length <= MAX_VISIBLE_WORK_LOG_ENTRIES) {
-          nextRows.push({
-            kind: "work",
-            id: timelineEntry.id,
-            createdAt: timelineEntry.createdAt,
-            groupedEntries: visibleGroupedEntries,
-            isExpandedToolGroupEntry: false,
-            isLastExpandedToolGroupEntry: false,
-          });
-        } else {
-          const groupId = workGroupId(timelineEntry.id, timelineEntry.entry);
-          const expanded = input.expandedWorkGroupIds?.has(groupId) ?? false;
-          // Agent-spawn CTA rows are always visible: a running fleet must
-          // never hide behind a "+N tool calls" toggle. Selection is by
-          // membership (spawn OR recent-tail), preserving the group's
-          // chronological order in both collapsed and expanded states
-          // (review finding: concatenating two filtered lists moved a
-          // mid-group spawn row above earlier tool rows).
-          const overflowCandidates = visibleGroupedEntries.filter(
-            (entry) => entry.agentSpawn === undefined,
-          );
-          const hiddenEntries = overflowCandidates.slice(0, -MAX_VISIBLE_WORK_LOG_ENTRIES);
-          const hiddenIds = new Set(hiddenEntries.map((entry) => entry.id));
-          const visibleEntries = visibleGroupedEntries.filter(
-            (entry) => entry.agentSpawn !== undefined || !hiddenIds.has(entry.id),
-          );
-          const renderedEntries = expanded ? visibleGroupedEntries : visibleEntries;
-
-          for (const workEntry of renderedEntries) {
-            nextRows.push({
-              kind: "work",
-              id: workEntry.id,
-              createdAt: workEntry.createdAt,
-              groupedEntries: [workEntry],
-              isExpandedToolGroupEntry: false,
-              isLastExpandedToolGroupEntry: false,
-            });
-          }
-
-          if (hiddenEntries.length > 0) {
-            const latestToolEntry = visibleGroupedEntries.findLast(workLogEntryIsToolLike);
-
-            nextRows.push({
-              kind: "work-toggle",
-              id: `work-toggle:${timelineEntry.id}`,
-              createdAt: timelineEntry.createdAt,
-              groupId,
-              hiddenCount: hiddenEntries.length,
-              expanded,
-              onlyToolEntries: hiddenEntries.every(workLogEntryIsToolLike),
-              summary: null,
-              summaryKind: null,
-              hasFailure:
-                latestToolEntry !== undefined &&
-                workEntryDisplayIndicatesToolFailure(latestToolEntry) &&
-                hiddenEntries.some(workEntryDisplayIndicatesToolFailure),
-            });
-          }
         }
       }
       index = cursor - 1;
@@ -1033,10 +948,6 @@ export function deriveMessagesTimelineRows(input: {
     });
   }
 
-  if (input.isWorking && activeTurnHeaderIndex === input.timelineEntries.length) {
-    appendWorkingRow();
-  }
-
   return nextRows;
 }
 
@@ -1065,11 +976,6 @@ function isRowUnchanged(a: MessagesTimelineRow, b: MessagesTimelineRow): boolean
   if (a.kind !== b.kind || a.id !== b.id) return false;
 
   switch (a.kind) {
-    case "working":
-      return (
-        a.createdAt === (b as typeof a).createdAt && a.showThinking === (b as typeof a).showThinking
-      );
-
     case "turn-fold": {
       const bf = b as typeof a;
       return a.createdAt === bf.createdAt && a.label === bf.label && a.expanded === bf.expanded;
@@ -1112,7 +1018,6 @@ function isRowUnchanged(a: MessagesTimelineRow, b: MessagesTimelineRow): boolean
         a.groupId === bw.groupId &&
         a.hiddenCount === bw.hiddenCount &&
         a.expanded === bw.expanded &&
-        a.onlyToolEntries === bw.onlyToolEntries &&
         a.summary === bw.summary &&
         a.summaryKind === bw.summaryKind &&
         a.hasFailure === bw.hasFailure
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 4c7cf29969d9612f721542e59c9b720f07852635..67060a28d64795ce7e6fcf57e7ebb62f2539102f 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -177,7 +177,6 @@ const MESSAGE_CREATED_AT = "2026-03-17T19:12:28.000Z";
 function buildProps() {
   return {
     isWorking: false,
-    activeTurnStartedAt: null,
     listRef: createRef<LegendListRef | null>(),
     latestTurn: null,
     runningTurnId: null,
@@ -675,7 +674,6 @@ describe("MessagesTimeline", () => {
       <MessagesTimeline
         {...buildProps()}
         isWorking
-        activeTurnStartedAt={MESSAGE_CREATED_AT}
         latestTurn={{
           turnId,
           state: "running",
@@ -1015,7 +1013,6 @@ describe("MessagesTimeline", () => {
     );
 
     expect(markup).toContain("Context compacted");
-    expect(markup).toContain("Work Log");
   });
 
   it("summarizes changed files in one line", () => {
@@ -1172,7 +1169,7 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain("+2 previous log entries");
+    expect(markup).toContain("Ran 2 commands and received 1 update");
     expect(markup).not.toContain('aria-label="Hidden work includes a failure"');
   });
 
@@ -1182,7 +1179,6 @@ describe("MessagesTimeline", () => {
       <MessagesTimeline
         {...buildProps()}
         isWorking
-        activeTurnStartedAt={MESSAGE_CREATED_AT}
         latestTurn={{
           turnId,
           state: "running",
@@ -1211,7 +1207,6 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain("Working for");
     expect(markup).toContain("Running pnpm");
     expect(markup).toContain("live-activity-focus");
   });
@@ -1222,7 +1217,6 @@ describe("MessagesTimeline", () => {
       <MessagesTimeline
         {...buildProps()}
         isWorking
-        activeTurnStartedAt={MESSAGE_CREATED_AT}
         latestTurn={{
           turnId,
           state: "running",
@@ -1277,7 +1271,6 @@ describe("MessagesTimeline", () => {
       <MessagesTimeline
         {...buildProps()}
         isWorking
-        activeTurnStartedAt={MESSAGE_CREATED_AT}
         latestTurn={{
           turnId,
           state: "running",
@@ -1310,21 +1303,6 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("tool call failed");
   });
 
-  it("aligns the iconless Thinking row with the working timer", () => {
-    const markup = renderToStaticMarkup(
-      <MessagesTimeline
-        {...buildProps()}
-        isWorking
-        activeTurnStartedAt={MESSAGE_CREATED_AT}
-        timelineEntries={[]}
-      />,
-    );
-
-    expect(markup).toContain("Working for");
-    expect(markup).toContain("Thinking");
-    expect(markup).toContain("gap-1.5 py-0.5 px-1");
-  });
-
   it("renders review comment contexts as structured cards instead of raw tags", () => {
     const markup = renderToStaticMarkup(
       <MessagesTimeline
@@ -1402,7 +1380,7 @@ describe("MessagesTimeline", () => {
     expect(markup).not.toContain('data-testid="file-diff"');
   });
 
-  it("renders a muted failure marker for failed tool lifecycle entries", () => {
+  it("keeps failed lifecycle entries discoverable in mixed activity summaries", () => {
     const markup = renderToStaticMarkup(
       <MessagesTimeline
         {...buildProps()}
@@ -1435,8 +1413,7 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain("lucide-x");
-    expect(markup).toContain('aria-label="Tool call failed"');
+    expect(markup).toContain('aria-label="Received 1 update and used 1 tool, tool call failed"');
     // Ordinary tool failures render muted, not red.
     expect(markup).not.toContain("text-destructive");
   });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index dc0c03709e6ca0c3c349c27332551d640c4f1728..d8c88c088648519be0192e90ec818c4a87b1bd27 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -138,7 +138,7 @@ import {
 // Context — shared state consumed by every row component via Context.
 // Propagates through LegendList's memo boundaries for shared callbacks and
 // non-row-scoped state. `nowIso` is intentionally excluded — self-ticking
-// components (WorkingTimer, LiveElapsed) handle it.
+// components (LiveElapsed) handle it.
 // ---------------------------------------------------------------------------
 
 interface TimelineRowSharedState {
@@ -164,8 +164,6 @@ interface TimelineRowActivityState {
   isWorking: boolean;
   isRevertingCheckpoint: boolean;
   latestTurnId: TurnId | null;
-  /** Current plan step label for the working row, when the turn has a plan. */
-  workingStepLabel: string | null;
 }
 
 const TimelineRowCtx = createContext<TimelineRowSharedState>(null!);
@@ -218,8 +216,6 @@ interface MessagesTimelineProps {
   agentPanelModel?: AgentPanelModel;
   onOpenAgents?: () => void;
   isWorking: boolean;
-  workingStepLabel?: string | null;
-  activeTurnStartedAt: string | null;
   listRef: React.RefObject<LegendListRef | null>;
   timelineEntries: ReturnType<typeof deriveTimelineEntries>;
   latestTurn: TimelineLatestTurn | null;
@@ -262,8 +258,6 @@ interface MessagesTimelineProps {
 
 export const MessagesTimeline = memo(function MessagesTimeline({
   isWorking,
-  workingStepLabel = null,
-  activeTurnStartedAt,
   agentPanelModel = EMPTY_AGENT_PANEL_MODEL,
   onOpenAgents = NOOP_OPEN_AGENTS,
   listRef,
@@ -426,7 +420,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         expandedTurnIds,
         expandedWorkGroupIds,
         isWorking,
-        activeTurnStartedAt,
         turnDiffSummaryByAssistantMessageId,
         revertTurnCountByUserMessageId,
       }),
@@ -437,7 +430,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       expandedTurnIds,
       expandedWorkGroupIds,
       isWorking,
-      activeTurnStartedAt,
       turnDiffSummaryByAssistantMessageId,
       revertTurnCountByUserMessageId,
     ],
@@ -566,9 +558,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({
       isWorking,
       isRevertingCheckpoint,
       latestTurnId: latestTurn?.turnId ?? null,
-      workingStepLabel,
     }),
-    [isRevertingCheckpoint, isWorking, latestTurn?.turnId, workingStepLabel],
+    [isRevertingCheckpoint, isWorking, latestTurn?.turnId],
   );
 
   // Stable renderItem — no closure deps. Row components read shared state
@@ -946,8 +937,7 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
   const isExpandedToolGroupEntry = row.kind === "work" && row.isExpandedToolGroupEntry;
   const isLastExpandedToolGroupEntry = row.kind === "work" && row.isLastExpandedToolGroupEntry;
   const isExpandedToolGroupHeader =
-    (row.kind === "work-toggle" && row.summary !== null && row.onlyToolEntries && row.expanded) ||
-    (row.kind === "work-live" && row.expanded);
+    (row.kind === "work-toggle" && row.expanded) || (row.kind === "work-live" && row.expanded);
 
   return (
     <div
@@ -960,7 +950,7 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
             : "pb-0"
           : isExpandedToolGroupHeader
             ? "pb-0"
-            : row.kind === "turn-fold" || row.kind === "working"
+            : row.kind === "turn-fold"
               ? "pb-1.5"
               : (row.kind === "message" &&
                     row.message.role === "assistant" &&
@@ -993,7 +983,6 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
       ) : null}
       {row.kind === "proposed-plan" ? <ProposedPlanTimelineRow row={row} /> : null}
       {row.kind === "turn-plan" ? <TurnPlanTimelineRow row={row} /> : null}
-      {row.kind === "working" ? <WorkingTimelineRow row={row} /> : null}
     </div>
   );
 });
@@ -1277,7 +1266,7 @@ function ProposedPlanTimelineRow({
 
 /**
  * Inline folded plan chip: one row per turn that produced plan/todo steps.
- * Collapsed by default — a segment bar plus the in-progress step label —
+ * Collapsed by default, with a segment bar and the current step label,
  * and expands in place to the full step list. Replaces the old plan sidebar.
  */
 const TurnPlanTimelineRow = memo(function TurnPlanTimelineRow({
@@ -1299,15 +1288,19 @@ const TurnPlanTimelineRow = memo(function TurnPlanTimelineRow({
   const Chevron = expanded ? ChevronDownIcon : ChevronRightIcon;
 
   return (
-    <div className="min-w-0 px-1 py-0.5">
+    <div className="min-w-0 py-0.5">
       <button
         type="button"
-        className="flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-md px-0.5 py-0.5 text-left text-[12px] leading-5 transition-colors duration-150 hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
+        className="flex min-h-6 w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-md px-0.5 py-0.5 text-left text-[12px] leading-5 transition-colors duration-150 hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
         aria-expanded={expanded}
         onClick={() => setExpanded((value) => !value)}
       >
-        <Chevron className="size-3.5 shrink-0 text-muted-foreground/65" />
-        {steps.length > 1 ? (
+        <span className="flex h-5 w-6 shrink-0 items-center justify-center text-muted-foreground/65">
+          <Chevron
+            className={cn("size-4 shrink-0", expanded ? "-translate-x-0.5" : "-translate-x-1")}
+          />
+        </span>
+        {steps.length > 1 && steps.length <= 10 ? (
           <span aria-hidden className="flex shrink-0 items-center gap-0.5">
             {steps.map((step) => (
               <span
@@ -1339,7 +1332,7 @@ const TurnPlanTimelineRow = memo(function TurnPlanTimelineRow({
         ) : null}
       </button>
       {expanded ? (
-        <div className="mt-0.5 space-y-px pl-6">
+        <div className="mt-0.5 space-y-px pl-8">
           {steps.map((step) => (
             <div key={step.step} className="flex items-baseline gap-2 text-[12px] leading-5">
               <span
@@ -1375,61 +1368,6 @@ const TurnPlanTimelineRow = memo(function TurnPlanTimelineRow({
   );
 });
 
-function WorkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "working" }> }) {
-  const { workingStepLabel } = use(TimelineRowActivityCtx);
-  return (
-    <div>
-      <div className="border-b border-border/60 pb-2 pt-1">
-        <div className="px-1 text-sm leading-relaxed text-muted-foreground tabular-nums">
-          {row.createdAt ? (
-            <>
-              Working for <WorkingTimer createdAt={row.createdAt} />
-            </>
-          ) : (
-            "Working..."
-          )}
-          {workingStepLabel ? (
-            <span className="ml-2 text-muted-foreground/55">· {workingStepLabel}</span>
-          ) : null}
-        </div>
-      </div>
-      {row.showThinking ? (
-        <div className="mt-1">
-          <ThinkingActivityRow />
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Self-ticking labels — update their own text nodes so elapsed-time display
-// does not create a React commit every second while a response is streaming.
-// ---------------------------------------------------------------------------
-
-/** Live "Working for Xs" label. */
-function WorkingTimer({ createdAt }: { createdAt: string }) {
-  const textRef = useRef<HTMLSpanElement>(null);
-  const initialText = formatWorkingTimerNow(createdAt);
-
-  useEffect(() => {
-    const updateText = () => {
-      if (textRef.current) {
-        textRef.current.textContent = formatWorkingTimerNow(createdAt);
-      }
-    };
-    updateText();
-    const id = setInterval(updateText, 1000);
-    return () => clearInterval(id);
-  }, [createdAt]);
-
-  return (
-    <span ref={textRef} className="tabular-nums">
-      {initialText}
-    </span>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Extracted row sections — own their state / store subscriptions so changes
 // re-render only the affected row, not the entire list.
@@ -1449,12 +1387,6 @@ const WorkGroupSection = memo(function WorkGroupSection({
       groupedEntries.filter((entry) => workEntryIsVisibleInGroup(entry, isExpandedToolGroupEntry)),
     [groupedEntries, isExpandedToolGroupEntry],
   );
-  const onlyToolEntries = nonEmptyEntries.every((entry) => workLogEntryIsToolLike(entry));
-  const groupLabel = onlyToolEntries
-    ? nonEmptyEntries.length === 1
-      ? "1 tool call"
-      : `${nonEmptyEntries.length} tool calls`
-    : "Work Log";
   const GroupContainer = isExpandedToolGroupEntry ? "div" : "section";
 
   if (nonEmptyEntries.length === 0) return null;
@@ -1462,11 +1394,8 @@ const WorkGroupSection = memo(function WorkGroupSection({
   return (
     <GroupContainer
       className={cn("-mx-1 px-1", isExpandedToolGroupEntry ? "py-0" : "space-y-0.5 py-0.5")}
-      aria-label={isExpandedToolGroupEntry ? undefined : groupLabel}
+      aria-label={isExpandedToolGroupEntry ? undefined : "Activity"}
     >
-      {!onlyToolEntries && (
-        <p className="px-0.5 pb-0.5 font-medium text-secondary-label text-[11px]">{groupLabel}</p>
-      )}
       <div className="space-y-px">
         {nonEmptyEntries.map((workEntry) => (
           <SimpleWorkEntryRow
@@ -1512,10 +1441,6 @@ function LiveActivityRow({
   );
 }
 
-function ThinkingActivityRow() {
-  return <LiveActivityRow label="Thinking" />;
-}
-
 function LiveActivityContent({
   label,
   iconName,
@@ -1599,8 +1524,8 @@ function toolGroupSummaryIconName(
       return "bot";
     case "tone-tool":
       return "zap";
+    case "update":
     case "mixed":
-    case null:
       return "hammer";
   }
 }
@@ -1611,61 +1536,21 @@ function WorkGroupToggleTimelineRow({
   row: Extract<TimelineRow, { kind: "work-toggle" }>;
 }) {
   const ctx = use(TimelineRowCtx);
-  if (row.onlyToolEntries && row.summary) {
-    return (
-      <button
-        type="button"
-        className="group/tool-group flex min-h-6 w-full cursor-pointer items-center gap-1.5 rounded-md px-0.5 py-0.5 text-left text-sm leading-relaxed transition-colors duration-150 hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
-        aria-label={row.hasFailure ? `${row.summary}, tool call failed` : undefined}
-        aria-expanded={row.expanded}
-        onClick={() => ctx.onToggleWorkGroup(row.groupId, row.id)}
-      >
-        <span className="flex size-6 shrink-0 items-center justify-center text-icon-muted">
-          <WorkEntryIconSvg
-            name={toolGroupSummaryIconName(row.summaryKind)}
-            className="size-4 shrink-0 stroke-[1.8] opacity-70"
-          />
-        </span>
-        <span className="min-w-0 flex-1 truncate text-secondary-label">{row.summary}</span>
-      </button>
-    );
-  }
-  const labelNoun = row.onlyToolEntries
-    ? row.hiddenCount === 1
-      ? "tool call"
-      : "tool calls"
-    : row.hiddenCount === 1
-      ? "log entry"
-      : "log entries";
   return (
     <button
       type="button"
-      className="flex min-h-6 w-full cursor-pointer items-center gap-1.5 rounded-md px-0.5 py-0.5 text-left text-sm leading-relaxed transition-colors duration-150 hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
-      aria-label={
-        row.hasFailure && !row.expanded
-          ? `+${row.hiddenCount} previous ${labelNoun}, includes a failure`
-          : undefined
-      }
+      className="group/tool-group flex min-h-6 w-full cursor-pointer items-center gap-1.5 rounded-md px-0.5 py-0.5 text-left text-sm leading-relaxed transition-colors duration-150 hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70"
+      aria-label={row.hasFailure ? `${row.summary}, tool call failed` : undefined}
       aria-expanded={row.expanded}
       onClick={() => ctx.onToggleWorkGroup(row.groupId, row.id)}
     >
       <span className="flex size-6 shrink-0 items-center justify-center text-icon-muted">
-        <ChevronDownIcon
-          className={cn(
-            "size-4 shrink-0 opacity-70 transition-transform duration-200",
-            row.expanded && "rotate-180",
-          )}
+        <WorkEntryIconSvg
+          name={toolGroupSummaryIconName(row.summaryKind)}
+          className="size-4 shrink-0 stroke-[1.8] opacity-70"
         />
       </span>
-      {row.expanded ? (
-        <span className="font-medium text-foreground">
-          Show fewer {row.onlyToolEntries ? "tool calls" : "log entries"}
-        </span>
-      ) : (
-        <span className="font-medium text-foreground">
-          +{row.hiddenCount} previous {labelNoun}
-        </span>
-      )}
+      <span className="min-w-0 flex-1 truncate text-secondary-label">{row.summary}</span>
     </button>
   );
 }
@@ -2163,33 +2048,6 @@ function useStableRows(rows: MessagesTimelineRow[]): MessagesTimelineRow[] {
 // Pure helpers
 // ---------------------------------------------------------------------------
 
-function formatWorkingTimer(startIso: string, endIso: string): string | null {
-  const startedAtMs = Date.parse(startIso);
-  const endedAtMs = Date.parse(endIso);
-  if (!Number.isFinite(startedAtMs) || !Number.isFinite(endedAtMs)) {
-    return null;
-  }
-
-  const elapsedSeconds = Math.max(0, Math.floor((endedAtMs - startedAtMs) / 1000));
-  if (elapsedSeconds < 60) {
-    return `${elapsedSeconds}s`;
-  }
-
-  const hours = Math.floor(elapsedSeconds / 3600);
-  const minutes = Math.floor((elapsedSeconds % 3600) / 60);
-  const seconds = elapsedSeconds % 60;
-
-  if (hours > 0) {
-    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
-  }
-
-  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-}
-
-function formatWorkingTimerNow(startIso: string): string {
-  return formatWorkingTimer(startIso, new Date().toISOString()) ?? "0s";
-}
-
 type WorkEntryIconName =
   | "bot"
   | "check"
diff --git a/apps/web/src/components/chat/ThreadSyncStatusPill.test.tsx b/apps/web/src/components/chat/ThreadSyncStatusPill.test.tsx
deleted file mode 100644
index 2a6a28b2becd50368c705e84ab73e834208b0181..0000000000000000000000000000000000000000
--- a/apps/web/src/components/chat/ThreadSyncStatusPill.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vite-plus/test";
-
-import { ThreadSyncStatusPill } from "./ThreadSyncStatusPill";
-
-describe("ThreadSyncStatusPill", () => {
-  it.each([
-    ["loading", "Loading messages..."],
-    ["syncing", "Syncing messages..."],
-  ] as const)("renders the %s message sync phase", (phase, label) => {
-    const markup = renderToStaticMarkup(<ThreadSyncStatusPill phase={phase} />);
-
-    expect(markup).toContain('role="status"');
-    expect(markup).toContain('data-thread-sync-drawer="true"');
-    expect(markup).toContain("chat-composer-drawer-surface");
-    expect(markup).toContain("chat-composer-drawer-attached");
-    expect(markup).toContain("chat-composer-drawer-slot");
-    expect(markup).toContain("pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)]");
-    expect(markup).toContain(label);
-    expect(markup).not.toContain("animate-");
-  });
-});
diff --git a/apps/web/src/components/chat/ThreadSyncStatusPill.tsx b/apps/web/src/components/chat/ThreadSyncStatusPill.tsx
deleted file mode 100644
index 31b5dc184191b399d9981cb80cc714b4c8f071dd..0000000000000000000000000000000000000000
--- a/apps/web/src/components/chat/ThreadSyncStatusPill.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { LoaderCircleIcon } from "lucide-react";
-
-import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
-
-export function ThreadSyncStatusPill({ phase }: { readonly phase: ThreadSyncPhase }) {
-  const label = threadSyncLabel(phase);
-
-  return (
-    <div
-      aria-label={label}
-      className="chat-composer-drawer-surface chat-composer-drawer-attached chat-composer-drawer-slot pointer-events-none flex items-center gap-2 px-3 pt-2 pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)] text-foreground text-xs font-medium sm:px-4"
-      data-thread-sync-drawer="true"
-      role="status"
-    >
-      <LoaderCircleIcon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
-      <span className="truncate">{label}</span>
-    </div>
-  );
-}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index d43475f901cc32ba13f6f8778ef782cdeface90b..7653ce9bd9efc066f9f3333b9603fecb2ea5e04f 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -763,472 +763,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     outline: none;
   }
 
-  .chat-composer-shoulder-tab {
-    border-color: var(
-      --chat-composer-outline,
-      color-mix(in srgb, var(--contrast-foreground) 8%, transparent)
-    );
-    background: color-mix(
-      in srgb,
-      var(--chat-composer-glass-surface, var(--card)) var(--glass-opacity),
-      transparent
-    );
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    box-shadow: 0 -8px 24px -18px rgb(0 0 0 / 45%);
-
-    @variant dark {
-      box-shadow: 0 -10px 28px -18px rgb(0 0 0 / 80%);
-    }
-
-    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-      background: var(--chat-composer-glass-surface, var(--card));
-    }
-  }
-
-  .chat-composer-banner-stack-cap {
-    --chat-composer-attached-surface: var(--chat-composer-glass-surface, var(--card));
-    --chat-composer-attached-outline: var(
-      --chat-composer-outline,
-      color-mix(in srgb, var(--contrast-foreground) 8%, transparent)
-    );
-    background: color-mix(
-      in srgb,
-      var(--chat-composer-attached-surface) var(--glass-opacity),
-      transparent
-    );
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-
-    @variant dark {
-      --chat-composer-attached-surface: var(
-        --chat-composer-glass-surface,
-        color-mix(in srgb, var(--background) 96%, var(--color-white))
-      );
-      --chat-composer-attached-outline: var(
-        --chat-composer-outline,
-        color-mix(in srgb, var(--color-white) 5%, transparent)
-      );
-    }
-
-    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-      background: var(--chat-composer-attached-surface);
-    }
-  }
-
-  /* Mirror the run-context strip above the composer. These surfaces deliberately
-     own no card fill or border themselves: a masked pseudo-element draws the
-     same inset glass, 16px outer corners, quiet outline, and open attachment
-     seam as the strip below. */
-  .chat-composer-drawer-surface,
-  .chat-composer-top-drawer {
-    --chat-composer-attachment-overlap: calc(1rem + 1px);
-    --chat-composer-attached-surface: var(--chat-composer-glass-surface, var(--card));
-    --chat-composer-attached-outline: var(
-      --chat-composer-outline,
-      color-mix(in srgb, var(--contrast-foreground) 8%, transparent)
-    );
-    --chat-composer-attached-tint: transparent;
-    position: relative;
-    isolation: isolate;
-    border: 0 !important;
-    background: transparent !important;
-    box-shadow: none;
-
-    @variant dark {
-      --chat-composer-attached-surface: var(
-        --chat-composer-glass-surface,
-        color-mix(in srgb, var(--background) 96%, var(--color-white))
-      );
-      --chat-composer-attached-outline: var(
-        --chat-composer-outline,
-        color-mix(in srgb, var(--color-white) 5%, transparent)
-      );
-
-      &::before {
-        background:
-          linear-gradient(var(--chat-composer-attached-tint), var(--chat-composer-attached-tint)),
-          linear-gradient(
-            to top,
-            transparent 0 var(--chat-composer-attachment-overlap),
-            rgb(0 0 0 / 18%) var(--chat-composer-attachment-overlap),
-            transparent calc(var(--chat-composer-attachment-overlap) + 10px)
-          ),
-          color-mix(
-            in srgb,
-            var(--chat-composer-attached-surface) var(--glass-opacity),
-            transparent
-          );
-        box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
-      }
-    }
-  }
-
-  .chat-composer-drawer-attached,
-  .chat-composer-top-drawer {
-    padding-bottom: var(--chat-composer-attachment-overlap);
-  }
-
-  [data-chat-composer-form="true"],
-  .chat-composer-drawer-slot,
-  .chat-composer-top-drawer {
-    --chat-composer-drawer-inset: 1.375rem;
-  }
-
-  .chat-composer-drawer-slot,
-  .chat-composer-top-drawer {
-    --chat-composer-attachment-overlap: calc(1rem + 1px);
-    width: calc(100% - var(--chat-composer-drawer-inset) - var(--chat-composer-drawer-inset));
-    max-width: calc(48rem - var(--chat-composer-drawer-inset) - var(--chat-composer-drawer-inset));
-    margin-inline: auto;
-    margin-bottom: calc(-1 * var(--chat-composer-attachment-overlap));
-  }
-
-  :is(.chat-composer-drawer-surface, .chat-composer-top-drawer)::before {
-    pointer-events: none;
-    position: absolute;
-    z-index: -1;
-    inset: 0;
-    border: 1px solid var(--chat-composer-attached-outline);
-    border-radius: 16px 16px 0 0;
-    background:
-      linear-gradient(var(--chat-composer-attached-tint), var(--chat-composer-attached-tint)),
-      color-mix(in srgb, var(--chat-composer-attached-surface) var(--glass-opacity), transparent);
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    -webkit-mask-image: linear-gradient(
-      to top,
-      transparent 0 var(--chat-composer-attachment-overlap),
-      black var(--chat-composer-attachment-overlap)
-    );
-    mask-image: linear-gradient(
-      to top,
-      transparent 0 var(--chat-composer-attachment-overlap),
-      black var(--chat-composer-attachment-overlap)
-    );
-    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
-    content: "";
-
-    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-      background:
-        linear-gradient(var(--chat-composer-attached-tint), var(--chat-composer-attached-tint)),
-        var(--chat-composer-attached-surface) !important;
-    }
-  }
-
-  .chat-composer-drawer-slot + .chat-composer-drawer-slot::before,
-  .chat-composer-drawer-slot + :has(.chat-composer-top-drawer) .chat-composer-top-drawer::before {
-    border-top: 0;
-    border-radius: 0;
-  }
-
-  .chat-composer-top-drawer {
-    z-index: 0;
-  }
-
-  :is(.chat-composer-drawer-surface, .chat-composer-top-drawer)[data-variant="error"] {
-    --chat-composer-attached-outline: color-mix(in srgb, var(--error) 32%, transparent);
-    --chat-composer-attached-tint: color-mix(in srgb, var(--error) 8%, transparent);
-  }
-
-  :is(.chat-composer-drawer-surface, .chat-composer-top-drawer)[data-variant="info"] {
-    --chat-composer-attached-outline: color-mix(in srgb, var(--info) 32%, transparent);
-    --chat-composer-attached-tint: color-mix(in srgb, var(--info) 4%, transparent);
-  }
-
-  :is(.chat-composer-drawer-surface, .chat-composer-top-drawer)[data-variant="success"] {
-    --chat-composer-attached-outline: color-mix(in srgb, var(--success) 32%, transparent);
-    --chat-composer-attached-tint: color-mix(in srgb, var(--success) 4%, transparent);
-  }
-
-  :is(.chat-composer-drawer-surface, .chat-composer-top-drawer)[data-variant="warning"] {
-    --chat-composer-attached-outline: color-mix(in srgb, var(--warning) 28%, transparent);
-    --chat-composer-attached-tint: color-mix(in srgb, var(--warning) 8%, transparent);
-  }
-
-  .chat-composer-glass-shell {
-    --chat-composer-attachment-overlap: calc(1rem + 1px);
-    --chat-composer-glass-surface: var(--card);
-    --chat-composer-outline: rgb(0 0 0 / 8%);
-
-    isolation: isolate;
-
-    @variant dark {
-      --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));
-      --chat-composer-outline: color-mix(in srgb, var(--color-white) 5%, transparent);
-      --chat-composer-highlight: rgb(255 255 255 / 3%);
-    }
-  }
-
-  .chat-composer-glass-shell::before {
-    pointer-events: none;
-    position: absolute;
-    z-index: 0;
-    inset: 0;
-    border-radius: 22px;
-    background: color-mix(
-      in srgb,
-      var(--chat-composer-glass-surface) var(--glass-opacity),
-      transparent
-    );
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    content: "";
-  }
-
-  .chat-composer-glass-shell-with-context {
-    --chat-composer-context-extension: 2.25rem;
-  }
-
-  .chat-composer-glass-shell-with-context::before {
-    border-radius: 0;
-    /*
-     * One continuous glass layer: a 22px composer joined to a 16px strip. The
-     * strip is inset 1.375rem per side, so the step-in positions and their
-     * curve controls stay in rem to keep tracking it at non-default interface
-     * font sizes; the composer's 22px top radius and the strip's 16px bottom
-     * radius are px by design.
-     */
-    clip-path: shape(
-      from 0 22px,
-      curve to 22px 0 with 0 9.85px / 9.85px 0,
-      line to calc(100% - 22px) 0,
-      curve to 100% 22px with calc(100% - 9.85px) 0 / 100% 9.85px,
-      line to 100% calc(100% - var(--chat-composer-context-extension) - 1.375rem),
-      curve to calc(100% - 1.375rem) calc(100% - var(--chat-composer-context-extension)) with 100%
-        calc(100% - var(--chat-composer-context-extension) - 0.6156rem) / calc(100% - 0.6156rem)
-        calc(100% - var(--chat-composer-context-extension)),
-      line to calc(100% - 1.375rem) calc(100% - 16px),
-      curve to calc(100% - 1.375rem - 16px) 100% with calc(100% - 1.375rem) calc(100% - 7.16px) /
-        calc(100% - 1.375rem - 7.16px) 100%,
-      line to calc(1.375rem + 16px) 100%,
-      curve to 1.375rem calc(100% - 16px) with calc(1.375rem + 7.16px) 100% / 1.375rem
-        calc(100% - 7.16px),
-      line to 1.375rem calc(100% - var(--chat-composer-context-extension)),
-      curve to 0 calc(100% - var(--chat-composer-context-extension) - 1.375rem) with 0.6156rem
-        calc(100% - var(--chat-composer-context-extension)) / 0
-        calc(100% - var(--chat-composer-context-extension) - 0.6156rem),
-      line to 0 22px,
-      close
-    );
-  }
-
-  @media (min-width: 40rem) {
-    .chat-composer-glass-shell-with-context {
-      /* The xs toolbar controls shrink by 4px at Tailwind's sm breakpoint. */
-      --chat-composer-context-extension: 2rem;
-    }
-  }
-
-  .chat-composer-glass-host {
-    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
-
-    @variant dark {
-      box-shadow: none;
-
-      &::after {
-        box-shadow: inset 0 1px var(--chat-composer-highlight);
-      }
-    }
-  }
-
-  .chat-composer-glass-host::after {
-    pointer-events: none;
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    border: 1px solid var(--chat-composer-outline);
-    border-radius: inherit;
-    content: "";
-  }
-
-  /* A top attachment cannot share the shell's single clipped backdrop: it
-     needs the composer surface and outline to paint in front of its overlap.
-     Split the glass into exact surfaces while a drawer or tab is present; the
-     default composer keeps the cheaper continuous layer. */
-  .chat-composer-glass-shell:is(
-    .chat-composer-glass-shell-attached,
-    :has(:is(.chat-composer-top-drawer, .chat-composer-shoulder-tab))
-  )::before,
-  .chat-composer-glass-shell:is(
-      .chat-composer-glass-shell-attached,
-      :has(:is(.chat-composer-top-drawer, .chat-composer-shoulder-tab))
-    )
-    .chat-composer-glass-host::after {
-    display: none;
-  }
-
-  .chat-composer-glass-shell:is(
-      .chat-composer-glass-shell-attached,
-      :has(:is(.chat-composer-top-drawer, .chat-composer-shoulder-tab))
-    )
-    .chat-composer-glass-host {
-    box-shadow: none;
-  }
-
-  .chat-composer-glass-shell:is(
-      .chat-composer-glass-shell-attached,
-      :has(:is(.chat-composer-top-drawer, .chat-composer-shoulder-tab))
-    )
-    .chat-composer-glass-host
-    [data-chat-composer-main-surface="true"] {
-    background: color-mix(
-      in srgb,
-      var(--chat-composer-glass-surface) var(--glass-opacity),
-      transparent
-    );
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
-
-    &::after {
-      pointer-events: none;
-      position: absolute;
-      z-index: 20;
-      inset: 0;
-      border: 1px solid var(--chat-composer-outline);
-      border-radius: inherit;
-      content: "";
-    }
-
-    @variant dark {
-      box-shadow: none;
-
-      &::after {
-        box-shadow: inset 0 1px var(--chat-composer-highlight);
-      }
-    }
-
-    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-      background: var(--chat-composer-glass-surface);
-    }
-  }
-
-  .chat-composer-glass-shell:is(
-      .chat-composer-glass-shell-attached,
-      :has(.chat-composer-top-drawer)
-    )
-    .chat-composer-glass-host
-    [data-chat-composer-mobile-collapsed="true"] {
-    min-height: var(--chat-composer-attachment-overlap);
-  }
-
-  .chat-composer-glass-shell-with-context .chat-composer-glass-host::after,
-  .chat-composer-glass-shell-with-context:is(
-      .chat-composer-glass-shell-attached,
-      :has(:is(.chat-composer-top-drawer, .chat-composer-shoulder-tab))
-    )
-    [data-chat-composer-main-surface="true"]::after {
-    /* Keep the attachment seam open; the strip continues the outer outline below. */
-    clip-path: polygon(
-      0 0,
-      100% 0,
-      100% 100%,
-      calc(100% - 22px) 100%,
-      calc(100% - 22px) calc(100% - 2px),
-      22px calc(100% - 2px),
-      22px 100%,
-      0 100%
-    );
-  }
-
-  .chat-composer-context-strip {
-    position: relative;
-    isolation: isolate;
-
-    @variant dark {
-      &::before {
-        border-color: rgb(255 255 255 / 7%);
-        background:
-          linear-gradient(
-            to bottom,
-            transparent 0 1rem,
-            rgb(0 0 0 / 18%) 1rem,
-            transparent calc(1rem + 10px)
-          ),
-          rgb(255 255 255 / 2%);
-        box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
-      }
-    }
-  }
-
-  .chat-composer-context-strip::before {
-    position: absolute;
-    z-index: -1;
-    inset: 0;
-    border: 1px solid var(--chat-composer-outline);
-    border-radius: 0 0 16px 16px;
-    /* Start the strip outline exactly where the composer's 22px curve reaches its tangent. */
-    -webkit-mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem);
-    mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem);
-    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
-    content: "";
-  }
-
-  .chat-composer-glass-shell:is(
-      .chat-composer-glass-shell-attached,
-      :has(:is(.chat-composer-top-drawer, .chat-composer-shoulder-tab))
-    )
-    .chat-composer-context-strip {
-    &::before {
-      background: color-mix(
-        in srgb,
-        var(--chat-composer-glass-surface) var(--glass-opacity),
-        transparent
-      );
-      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    }
-
-    @variant dark {
-      &::before {
-        background:
-          linear-gradient(
-            to bottom,
-            transparent 0 1rem,
-            rgb(0 0 0 / 18%) 1rem,
-            transparent calc(1rem + 10px)
-          ),
-          linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 2%)),
-          color-mix(in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent);
-      }
-    }
-  }
-
-  @supports not (clip-path: shape(from 0 0, line to 1px 1px)) {
-    .chat-composer-glass-shell-with-context::before {
-      inset-block-end: var(--chat-composer-context-extension);
-      border-radius: 22px;
-      clip-path: none;
-    }
-
-    .chat-composer-context-strip::before {
-      background: color-mix(
-        in srgb,
-        var(--chat-composer-glass-surface) var(--glass-opacity),
-        transparent
-      );
-      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    }
-
-    .chat-composer-context-strip {
-      @variant dark {
-        &::before {
-          background:
-            linear-gradient(
-              to bottom,
-              transparent 0 1rem,
-              rgb(0 0 0 / 18%) 1rem,
-              transparent calc(1rem + 10px)
-            ),
-            linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 2%)),
-            color-mix(in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent);
-        }
-      }
-    }
-  }
-
   .settings-slider {
     --settings-slider-progress: 0%;
     --settings-slider-fill-offset: 0.5rem;
@@ -1343,12 +877,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
       all: revert;
     }
   }
-
-  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .chat-composer-glass-shell::before {
-      background: var(--chat-composer-glass-surface);
-    }
-  }
 }
 
 /* Safe-area inset utilities for surfaces that opt into edge-to-edge rendering.
@@ -1615,58 +1143,6 @@ html[data-theme-id]:not([data-theme-id=""]) {
   --terminal-selection-background: var(--app-theme-terminal-selection-background);
 }
 
-/* T3 Chat's composer is a translucent lift over --chat-background. Route its
-   measured flattened color through the raised-surface role instead of deriving
-   another tint from the canvas, which made the dark composer too red. */
-html[data-theme-id] .chat-composer-glass-shell {
-  --chat-composer-glass-surface: var(--app-theme-surface-raised);
-  --chat-composer-outline: var(--app-theme-toolbar-border);
-
-  @variant dark {
-    --chat-composer-outline: color-mix(in srgb, var(--app-theme-input) 30%, var(--background));
-    --chat-composer-highlight: color-mix(in srgb, var(--app-theme-input) 12%, transparent);
-  }
-}
-
-html[data-theme-id]
-  :is(.chat-composer-banner-stack-cap, .chat-composer-drawer-surface, .chat-composer-top-drawer) {
-  --chat-composer-attached-surface: var(--app-theme-surface-raised);
-}
-
-html[data-theme-id]
-  :is(.chat-composer-banner-stack-cap, .chat-composer-drawer-surface, .chat-composer-top-drawer):is(
-    :not([data-variant]),
-    [data-variant="default"]
-  ) {
-  --chat-composer-attached-outline: var(--chat-composer-outline, var(--app-theme-toolbar-border));
-
-  @variant dark {
-    --chat-composer-attached-outline: var(
-      --chat-composer-outline,
-      color-mix(in srgb, var(--app-theme-input) 30%, var(--background))
-    );
-  }
-}
-
-html[data-theme-id="t3-chat"] .chat-composer-glass-shell {
-  /* T3 Chat's visible composer edge is a dark plum, not the stock translucent
-     white outline. Its highlight is derived from --chat-input-gradient. */
-  @variant dark {
-    --chat-composer-outline: #241e28;
-    --chat-composer-highlight: color-mix(in srgb, #432d48 12%, transparent);
-  }
-}
-
-html[data-theme-id="t3-chat"]
-  :is(.chat-composer-banner-stack-cap, .chat-composer-drawer-surface, .chat-composer-top-drawer):is(
-    :not([data-variant]),
-    [data-variant="default"]
-  ) {
-  @variant dark {
-    --chat-composer-attached-outline: #241e28;
-  }
-}
-
 /* Theme-token dependency probes are restored synchronously, before paint. Keep
    transitions from observing the temporary sentinel color in between. */
 html[data-theme-token-probe],
diff --git a/apps/web/src/session-logic.test.ts b/apps/web/src/session-logic.test.ts
index 432c8aa801b7ea89a1496a2847a774569a48cb57..5a2b998704f376c7d8e9e9acbf226cd8a1d67e71 100644
--- a/apps/web/src/session-logic.test.ts
+++ b/apps/web/src/session-logic.test.ts
@@ -915,6 +915,34 @@ describe("workEntryIndicatesToolFailure", () => {
 });
 
 describe("deriveWorkLogEntries", () => {
+  it("keeps the latest task progress without emitting plan-update log entries", () => {
+    const activities = [
+      makeActivity({ id: "before", kind: "tool.completed", summary: "Read files", sequence: 0 }),
+      makeActivity({
+        id: "plan-1",
+        kind: "turn.plan.updated",
+        summary: "Plan updated",
+        turnId: "turn-1",
+        sequence: 1,
+        payload: { plan: [{ step: "Verify the composer", status: "inProgress" }] },
+      }),
+      makeActivity({
+        id: "plan-2",
+        kind: "turn.plan.updated",
+        summary: "Plan updated",
+        turnId: "turn-1",
+        sequence: 2,
+        payload: { plan: [{ step: "Verify the composer", status: "completed" }] },
+      }),
+      makeActivity({ id: "after", kind: "tool.completed", summary: "Ran tests", sequence: 3 }),
+    ];
+    expect(deriveWorkLogEntries(activities).map((entry) => entry.id)).toEqual(["before", "after"]);
+    expect(deriveTurnPlans(activities)).toHaveLength(1);
+    expect(deriveTurnPlans(activities)[0]?.plan.steps).toMatchObject([
+      { step: "Verify the composer", status: "completed" },
+    ]);
+  });
+
   it("omits tool started entries and keeps completed entries", () => {
     const activities: OrchestrationThreadActivity[] = [
       makeActivity({
diff --git a/apps/web/src/session-logic.ts b/apps/web/src/session-logic.ts
index 4b35a6e24cc08698ebd7a9dc6c8befdb71278a2a..5796cda979b88c9389934774b10edf9fb03781fe 100644
--- a/apps/web/src/session-logic.ts
+++ b/apps/web/src/session-logic.ts
@@ -880,6 +880,7 @@ export function deriveWorkLogEntries(
     if (activity.kind === "task.updated") continue;
     if (activity.kind === "tool.progress") continue;
     if (activity.kind === "context-window.updated") continue;
+    if (activity.kind === "turn.plan.updated") continue;
     if (activity.summary === "Checkpoint captured") continue;
     if (isNoContentRuntimeWarning(activity)) continue;
     if (isPlanBoundaryToolActivity(activity)) continue;
diff --git a/apps/web/src/versionSkew.test.ts b/apps/web/src/versionSkew.test.ts
index 708ebc69269ac2987f66b3d48eec2b28b93c0323..82a5563a86c3191df21f06b619d4839debc05ad2 100644
--- a/apps/web/src/versionSkew.test.ts
+++ b/apps/web/src/versionSkew.test.ts
@@ -1,4 +1,5 @@
 import { EnvironmentId } from "@t3tools/contracts";
+import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
 import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
 // Pinned so the direction cases below read as fixed versions instead of
@@ -10,7 +11,9 @@ import { APP_VERSION } from "./branding";
 import {
   appendVersionMismatchHint,
   buildVersionMismatchDismissalKey,
+  dismissServerUpdateFailure,
   dismissVersionMismatch,
+  isServerUpdateFailureDismissed,
   isVersionMismatchDismissed,
   resolveServerConfigVersionMismatch,
   resolveServerSelfUpdateCapability,
@@ -26,6 +29,39 @@ describe("versionSkew", () => {
     branding.APP_VERSION = "0.0.34";
   });
 
+  it("dismisses only the current failed attempt without clearing its retry state", () => {
+    const failure = {
+      status: "failed",
+      stage: "downloading",
+      fromVersion: "0.0.33",
+      targetVersion: "0.0.34",
+      message: "Download failed.",
+    } as const satisfies ServerUpdateState;
+    const retryFailure = { ...failure };
+    const otherEnvironmentFailure = { ...failure };
+
+    dismissServerUpdateFailure(failure);
+
+    expect(isServerUpdateFailureDismissed(failure)).toBe(true);
+    expect(failure.status).toBe("failed");
+    expect(failure.message).toBe("Download failed.");
+    expect(isServerUpdateFailureDismissed(retryFailure)).toBe(false);
+    expect(isServerUpdateFailureDismissed(otherEnvironmentFailure)).toBe(false);
+  });
+
+  it("does not dismiss an update that is still running", () => {
+    const running = {
+      status: "running",
+      stage: "resuming",
+      fromVersion: "0.0.33",
+      targetVersion: "0.0.34",
+    } as const satisfies ServerUpdateState;
+
+    dismissServerUpdateFailure(running);
+
+    expect(isServerUpdateFailureDismissed(running)).toBe(false);
+  });
+
   it("does not warn when versions match", () => {
     expect(resolveVersionMismatch(APP_VERSION)).toBeNull();
   });
diff --git a/apps/web/src/versionSkew.ts b/apps/web/src/versionSkew.ts
index 594bff08168b37af3ed40af0d961b8e526aec1ba..38905cc090f5cba46809c074273f063511956716 100644
--- a/apps/web/src/versionSkew.ts
+++ b/apps/web/src/versionSkew.ts
@@ -1,4 +1,5 @@
 import type { EnvironmentId, ServerConfig, ServerSelfUpdateCapability } from "@t3tools/contracts";
+import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
 import { compareSemverVersions, parseSemver } from "@t3tools/shared/semver";
 import * as Schema from "effect/Schema";
 
@@ -13,6 +14,18 @@ export interface VersionMismatch {
 
 export const VERSION_MISMATCH_DISMISSALS_STORAGE_KEY = "t3code:version-mismatch-dismissals:v1";
 
+// Runtime failures retain their identity until the next attempt. Dismiss only
+// that attempt, across chat remounts, without clearing the error in Settings.
+const dismissedServerUpdateFailures = new WeakSet<ServerUpdateState>();
+
+export function isServerUpdateFailureDismissed(state: ServerUpdateState): boolean {
+  return state.status === "failed" && dismissedServerUpdateFailures.has(state);
+}
+
+export function dismissServerUpdateFailure(state: ServerUpdateState): void {
+  if (state.status === "failed") dismissedServerUpdateFailures.add(state);
+}
+
 const VersionMismatchDismissalsSchema = Schema.Struct({
   keys: Schema.Array(Schema.String),
 });
-- 
2.54.0