From 40fe7dce092392ea4091923c2838eac6e27af451 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 3 Aug 2026 19:07:28 -0400
Subject: [PATCH 1/2] feat(chat): refine V2 conversation UI

---
 README.md                                     |   1 +
 .../settings/DesktopClientSettings.test.ts    |   1 +
 apps/mobile/src/lib/threadActivity.test.ts    |  41 +++++
 apps/mobile/src/lib/threadActivity.ts         |   7 +
 .../BranchToolbarBranchSelector.tsx           |  16 +-
 .../web/src/components/ChatView.logic.test.ts |  24 ++-
 apps/web/src/components/ChatView.logic.ts     |   9 +-
 apps/web/src/components/ChatView.tsx          |  99 +++++++-----
 .../components/ProjectScriptsControl.test.tsx |  34 ++++
 .../src/components/ProjectScriptsControl.tsx  |  92 ++++++++---
 .../chat/MessagesTimeline.logic.test.ts       |   8 +-
 .../components/chat/MessagesTimeline.logic.ts |   9 ++
 .../components/chat/MessagesTimeline.test.tsx |  62 ++++++-
 .../src/components/chat/MessagesTimeline.tsx  | 152 ++++++++++++++----
 .../components/chat/ThreadDetailsPanel.tsx    |   2 +-
 .../components/chat/TimelineSystemDivider.tsx |   8 +-
 .../src/components/chat/V2LifecycleRow.tsx    |  20 ++-
 .../src/components/chat/providerIconUtils.ts  |  53 ++++++
 .../components/settings/SettingsPanels.tsx    |  34 ++++
 .../settings/settingsSearch.test.ts           |   4 +
 .../src/components/settings/settingsSearch.ts |   5 +
 apps/web/src/index.css                        |  26 +--
 apps/web/src/session-logic.test.ts            |   9 ++
 apps/web/src/session-logic.ts                 |   2 +
 docs/README.md                                |   1 +
 docs/user/appearance.md                       |  11 ++
 packages/client-runtime/package.json          |   4 +
 .../src/state/turnItemPresentation.test.ts    |  36 +++++
 .../src/state/turnItemPresentation.ts         |   8 +
 packages/contracts/src/settings.test.ts       |   9 ++
 packages/contracts/src/settings.ts            |   4 +
 31 files changed, 642 insertions(+), 149 deletions(-)
 create mode 100644 docs/user/appearance.md
 create mode 100644 packages/client-runtime/src/state/turnItemPresentation.test.ts
 create mode 100644 packages/client-runtime/src/state/turnItemPresentation.ts

diff --git a/README.md b/README.md
index 1e9b0517945..6364f6eac3f 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ Full docs live in [docs/](./docs). There's no docs site yet.
 - [Install and first run](./docs/user/install.md)
 - [Permission modes](./docs/user/permission-modes.md)
 - [Keyboard shortcuts](./docs/user/keybindings.md)
+- [Appearance preferences](./docs/user/appearance.md)
 - [Remote access from a phone or another machine](./docs/user/remote-access.md)
 - [Keeping app and server in sync](./docs/user/updating.md)
 - [Source control integrations](./docs/user/source-control.md)
diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts
index 8d76ea83a33..34097d3688f 100644
--- a/apps/desktop/src/settings/DesktopClientSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts
@@ -21,6 +21,7 @@ const clientSettings: ClientSettings = {
   environmentIdentificationMode: "artwork",
   favorites: [],
   glassOpacity: 80,
+  persistComposerContextStrip: true,
   providerModelPreferences: {},
   sidebarAutoSettleAfterDays: 3,
   sidebarProjectGroupingMode: "repository_path",
diff --git a/apps/mobile/src/lib/threadActivity.test.ts b/apps/mobile/src/lib/threadActivity.test.ts
index 4d5f258a285..38e15e46197 100644
--- a/apps/mobile/src/lib/threadActivity.test.ts
+++ b/apps/mobile/src/lib/threadActivity.test.ts
@@ -89,6 +89,20 @@ function assistantMessage(updatedAt = "2026-06-20T00:00:03.000Z") {
 }
 
 describe("buildThreadFeed", () => {
+  it("hides synthetic workspace preparation activity", () => {
+    const workspacePreparation = projected(
+      {
+        ...command(),
+        title: "Workspace ready",
+        input: "Preparing workspace",
+        output: "Workspace preparation completed.",
+      },
+      0,
+    );
+
+    expect(buildThreadFeed([workspacePreparation])).toEqual([]);
+  });
+
   it("does not treat a queued-only run as live feed activity", () => {
     expect(
       threadFeedRunIsUnsettled({
@@ -131,6 +145,33 @@ describe("buildThreadFeed", () => {
     ).toBe("turn_start");
   });
 
+  it("hides the interruption request and keeps the terminal result", () => {
+    const request = projected(
+      {
+        ...base("item-interrupt-request", "2026-06-20T00:00:02.000Z", 1),
+        type: "run_interrupt_request",
+        message: "Interrupt requested",
+      },
+      0,
+    );
+    const result = projected(
+      {
+        ...base("item-interrupt-result", "2026-06-20T00:00:03.000Z", 2),
+        type: "run_interrupt_result",
+        message: "Run interrupted before provider start",
+      },
+      1,
+    );
+
+    const activities = buildThreadFeed([request, result]).flatMap((entry) =>
+      entry.type === "activity-group" ? entry.activities : [],
+    );
+
+    expect(activities).toHaveLength(1);
+    expect(activities[0]?.summary).toBe("Run interrupted");
+    expect(activities[0]?.detail).toBe("Run interrupted before provider start");
+  });
+
   it("preserves authoritative V2 order instead of sorting reconstructed collections", () => {
     const rows = [
       projected(userMessage("2026-06-20T00:00:03.000Z"), 0),
diff --git a/apps/mobile/src/lib/threadActivity.ts b/apps/mobile/src/lib/threadActivity.ts
index e5729d85776..6742b60bf06 100644
--- a/apps/mobile/src/lib/threadActivity.ts
+++ b/apps/mobile/src/lib/threadActivity.ts
@@ -3,6 +3,7 @@ import type {
   ThreadPendingUserInput,
   ThreadUserInputQuestion,
 } from "@t3tools/client-runtime/state/thread-requests";
+import { turnItemIsWorkspacePreparation } from "@t3tools/client-runtime/state/turn-item-presentation";
 import {
   resolveT3McpToolPresentation,
   type T3McpToolLogo,
@@ -683,6 +684,12 @@ export function buildThreadFeed(
   const entries: RawThreadFeedEntry[] = [];
   for (const row of visibleTurnItems) {
     const item = row.item;
+    if (turnItemIsWorkspacePreparation(item)) continue;
+    // Match the web timeline: only the terminal interrupt result is useful to
+    // users; the preceding request is transient bookkeeping.
+    if (item.type === "run_interrupt_request") {
+      continue;
+    }
     const createdAt = DateTime.formatIso(item.startedAt ?? item.updatedAt);
     if (item.type === "user_message" || item.type === "assistant_message") {
       const updatedAt = DateTime.formatIso(item.updatedAt);
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
index 77f8ffd49ec..f578cd9af32 100644
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -37,6 +37,7 @@ import {
   THREAD_DETAILS_PANEL_ICON_CLASS,
   THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
   THREAD_DETAILS_PANEL_ROW_CLASS,
+  THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
 } from "./chat/threadDetailsPanelStyles";
 import { parsePullRequestReference } from "../pullRequestReference";
 import { getSourceControlPresentation } from "../sourceControlPresentation";
@@ -761,7 +762,7 @@ export function BranchToolbarBranchSelector({
             render={<Button variant="ghost" size={displayMode === "panel" ? "sm" : "xs"} />}
             className={cn(
               "min-w-0 max-w-full text-muted-foreground/70 hover:text-foreground/80",
-              displayMode === "panel" && THREAD_DETAILS_PANEL_ROW_CLASS,
+              displayMode === "panel" && THREAD_DETAILS_PANEL_SELECT_ROW_CLASS,
             )}
             disabled={isInitialBranchesLoadPending || isBranchActionPending}
           >
@@ -779,12 +780,13 @@ export function BranchToolbarBranchSelector({
             >
               {triggerLabel}
             </span>
-            <ChevronDownIcon
-              className={cn(
-                "size-3 shrink-0 opacity-50",
-                displayMode === "panel" && THREAD_DETAILS_PANEL_CHEVRON_CLASS,
-              )}
-            />
+            {displayMode === "panel" ? (
+              <span data-slot="select-icon">
+                <ChevronDownIcon className={THREAD_DETAILS_PANEL_CHEVRON_CLASS} />
+              </span>
+            ) : (
+              <ChevronDownIcon className="size-3 shrink-0 opacity-50" />
+            )}
           </ComboboxTrigger>
         </span>
         {displayMode === "panel" && branchPr && branchPrStatus ? (
diff --git a/apps/web/src/components/ChatView.logic.test.ts b/apps/web/src/components/ChatView.logic.test.ts
index 279b1381863..b90b65694a7 100644
--- a/apps/web/src/components/ChatView.logic.test.ts
+++ b/apps/web/src/components/ChatView.logic.test.ts
@@ -115,22 +115,32 @@ describe("resolveThreadMetadataUpdateForNextTurn", () => {
 });
 
 describe("shouldShowComposerContextStrip", () => {
-  it("shows git context on a draft with an active project", () => {
+  it("shows git context while composing a new thread", () => {
     expect(
       shouldShowComposerContextStrip({
-        routeKind: "draft",
+        isDraftHeroState: true,
         isGitRepo: true,
         hasActiveProject: true,
+        persistInActiveThreads: false,
       }),
     ).toBe(true);
   });
 
-  it("hides git context after the draft becomes a thread", () => {
+  it("keeps git context in an active thread only when requested", () => {
     expect(
       shouldShowComposerContextStrip({
-        routeKind: "server",
+        isDraftHeroState: false,
         isGitRepo: true,
         hasActiveProject: true,
+        persistInActiveThreads: true,
+      }),
+    ).toBe(true);
+    expect(
+      shouldShowComposerContextStrip({
+        isDraftHeroState: false,
+        isGitRepo: true,
+        hasActiveProject: true,
+        persistInActiveThreads: false,
       }),
     ).toBe(false);
   });
@@ -138,16 +148,18 @@ describe("shouldShowComposerContextStrip", () => {
   it("hides git context without a git-backed project", () => {
     expect(
       shouldShowComposerContextStrip({
-        routeKind: "draft",
+        isDraftHeroState: true,
         isGitRepo: false,
         hasActiveProject: true,
+        persistInActiveThreads: true,
       }),
     ).toBe(false);
     expect(
       shouldShowComposerContextStrip({
-        routeKind: "draft",
+        isDraftHeroState: true,
         isGitRepo: true,
         hasActiveProject: false,
+        persistInActiveThreads: true,
       }),
     ).toBe(false);
   });
diff --git a/apps/web/src/components/ChatView.logic.ts b/apps/web/src/components/ChatView.logic.ts
index 3264951bedd..0b72621a9ac 100644
--- a/apps/web/src/components/ChatView.logic.ts
+++ b/apps/web/src/components/ChatView.logic.ts
@@ -236,11 +236,16 @@ export function resolveSendEnvMode(input: {
 }
 
 export function shouldShowComposerContextStrip(input: {
-  routeKind: "draft" | "server";
+  isDraftHeroState: boolean;
   isGitRepo: boolean;
   hasActiveProject: boolean;
+  persistInActiveThreads: boolean;
 }): boolean {
-  return input.routeKind === "draft" && input.isGitRepo && input.hasActiveProject;
+  return (
+    input.isGitRepo &&
+    input.hasActiveProject &&
+    (input.isDraftHeroState || input.persistInActiveThreads)
+  );
 }
 
 export function cloneComposerImageForRetry(
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index f108a56dfda..0628a362913 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -2659,10 +2659,15 @@ function ChatViewContent(props: ChatViewProps) {
   // Default true while loading to avoid toolbar flicker.
   const isGitRepo = gitStatusQuery.data?.isRepo ?? true;
   const showComposerContextStrip = shouldShowComposerContextStrip({
-    routeKind,
+    isDraftHeroState,
     isGitRepo,
     hasActiveProject: activeProject !== null,
+    persistInActiveThreads: settings.persistComposerContextStrip,
   });
+  const renderComposerContextStrip =
+    isGitRepo &&
+    activeProject !== null &&
+    (routeKind === "draft" || settings.persistComposerContextStrip);
   const initialDiffPanelGitScope =
     gitStatusQuery.data?.hasWorkingTreeChanges === true ? "unstaged" : "branch";
   const diffPanelGitStatusResolutionKey = gitStatusQuery.data ? "resolved" : "pending";
@@ -6192,7 +6197,6 @@ function ChatViewContent(props: ChatViewProps) {
       ref={workspaceLayoutRef}
       className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden bg-background"
     >
-      {rightPanelOpen && !shouldUsePlanSidebarSheet ? panelLayoutControls : null}
       <div
         className={cn(
           "flex min-h-0 min-w-0 flex-col overflow-x-hidden",
@@ -6205,10 +6209,10 @@ function ChatViewContent(props: ChatViewProps) {
           ref={threadPanelPopoverAnchorRef}
           data-chat-header
           className={cn(
-            "bg-background transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none",
+            "relative bg-background transition-[padding-left] duration-200 ease-linear motion-reduce:transition-none",
             isElectron
               ? cn(
-                  "workspace-topbar drag-region relative px-3 sm:px-5",
+                  "workspace-topbar drag-region px-3 sm:px-5",
                   reserveTitleBarControlInset &&
                     !inlineRightPanelOwnsTitleBar &&
                     "wco:pr-[var(--workspace-native-controls-inset)]",
@@ -6451,40 +6455,58 @@ function ChatViewContent(props: ChatViewProps) {
                           />
                         </div>
                       </div>
-                      <div className="min-h-0">
-                        <div
-                          data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
-                          className="relative z-0"
-                        >
-                          {showComposerContextStrip && (
-                            <div className="pointer-events-auto">
-                              <BranchToolbar
-                                environmentId={activeThread.environmentId}
-                                threadId={activeThread.id}
-                                {...(routeKind === "draft" && draftId ? { draftId } : {})}
-                                onEnvModeChange={onEnvModeChange}
-                                startFromOrigin={startFromOrigin}
-                                onStartFromOriginChange={onStartFromOriginChange}
-                                {...(canOverrideServerThreadEnvMode
-                                  ? { effectiveEnvModeOverride: envMode }
-                                  : {})}
-                                {...(canOverrideServerThreadEnvMode
-                                  ? {
-                                      activeThreadBranchOverride: activeThreadBranch,
-                                      onActiveThreadBranchOverrideChange:
-                                        setPendingServerThreadBranch,
-                                    }
-                                  : {})}
-                                envLocked={envLocked}
-                                onComposerFocusRequest={scheduleComposerFocus}
-                                {...(canCheckoutPullRequestIntoThread
-                                  ? { onCheckoutPullRequestRequest: openPullRequestDialog }
-                                  : {})}
-                                {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
-                                availableEnvironments={logicalProjectEnvironments}
-                              />
-                            </div>
-                          )}
+                      <div
+                        aria-hidden={!showComposerContextStrip}
+                        className={cn(
+                          "grid transition-[grid-template-rows,opacity,transform] motion-reduce:transition-none",
+                          showComposerContextStrip
+                            ? "grid-rows-[1fr] translate-y-0 opacity-100"
+                            : "pointer-events-none grid-rows-[0fr] -translate-y-1 opacity-0",
+                        )}
+                        data-composer-context-strip={
+                          showComposerContextStrip ? "expanded" : "collapsed"
+                        }
+                        inert={showComposerContextStrip ? undefined : true}
+                        style={{
+                          transitionDuration: `${DRAFT_HERO_TRANSITION_DURATION_MS}ms`,
+                          transitionTimingFunction: DRAFT_HERO_TRANSITION_EASING,
+                        }}
+                      >
+                        <div className="min-h-0 overflow-hidden">
+                          <div
+                            data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
+                            className="relative z-0"
+                          >
+                            {renderComposerContextStrip && (
+                              <div className="pointer-events-auto">
+                                <BranchToolbar
+                                  environmentId={activeThread.environmentId}
+                                  threadId={activeThread.id}
+                                  {...(routeKind === "draft" && draftId ? { draftId } : {})}
+                                  onEnvModeChange={onEnvModeChange}
+                                  startFromOrigin={startFromOrigin}
+                                  onStartFromOriginChange={onStartFromOriginChange}
+                                  {...(canOverrideServerThreadEnvMode
+                                    ? { effectiveEnvModeOverride: envMode }
+                                    : {})}
+                                  {...(canOverrideServerThreadEnvMode
+                                    ? {
+                                        activeThreadBranchOverride: activeThreadBranch,
+                                        onActiveThreadBranchOverrideChange:
+                                          setPendingServerThreadBranch,
+                                      }
+                                    : {})}
+                                  envLocked={envLocked}
+                                  onComposerFocusRequest={scheduleComposerFocus}
+                                  {...(canCheckoutPullRequestIntoThread
+                                    ? { onCheckoutPullRequestRequest: openPullRequestDialog }
+                                    : {})}
+                                  {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
+                                  availableEnvironments={logicalProjectEnvironments}
+                                />
+                              </div>
+                            )}
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -6585,6 +6607,7 @@ function ChatViewContent(props: ChatViewProps) {
           mode="inline"
           maximized={rightPanelMaximized}
           inlineSize={previewPanelInlineSize}
+          layoutControls={panelLayoutControls}
           surfaces={rightPanelState.surfaces}
           activeSurfaceId={activeRightPanelSurface?.id ?? null}
           pendingSurfaceIds={pendingFileSurfaceIds}
diff --git a/apps/web/src/components/ProjectScriptsControl.test.tsx b/apps/web/src/components/ProjectScriptsControl.test.tsx
index d9f3e7e69f0..8e5c0b9a53a 100644
--- a/apps/web/src/components/ProjectScriptsControl.test.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.test.tsx
@@ -26,6 +26,28 @@ function renderControl(scripts: ReadonlyArray<ProjectScript>) {
   );
 }
 
+function renderPanelControlWithImportedAction() {
+  return renderToStaticMarkup(
+    <ProjectScriptsControl
+      displayMode="panel"
+      scripts={[]}
+      fileScripts={[
+        {
+          name: "Setup Worktree",
+          command: "vp i",
+          icon: "configure",
+          runOnWorktreeCreate: true,
+        },
+      ]}
+      keybindings={EMPTY_KEYBINDINGS}
+      onRunScript={() => {}}
+      onAddScript={async () => undefined as never}
+      onUpdateScript={async () => undefined as never}
+      onDeleteScript={async () => undefined as never}
+    />,
+  );
+}
+
 function buttonTag(html: string, ariaLabel: string) {
   return html.match(new RegExp(`<button[^>]*aria-label="${ariaLabel}"[^>]*>`))?.[0];
 }
@@ -62,4 +84,16 @@ describe("ProjectScriptsControl compact controls", () => {
       'class="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5"',
     );
   });
+
+  it("renders available project actions as a full panel row", () => {
+    const html = renderPanelControlWithImportedAction();
+    const primary = buttonTag(html, "Project actions");
+    const menuTrigger = buttonTag(html, "Choose project action");
+
+    expect(primary).toContain("flex-1");
+    expect(primary).toContain("justify-start");
+    expect(menuTrigger).toContain("w-8");
+    expect(html).toContain("h-4 w-px");
+    expect(html).toContain(">Actions</span>");
+  });
 });
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index fb5804be7b7..581c5268ac5 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -465,26 +465,78 @@ export default function ProjectScriptsControl({
           </Menu>
         </ActionGroup>
       ) : importableScripts.length > 0 ? (
-        <Menu
-          highlightItemOnHover={false}
-          open={actionsMenuOpen.imports}
-          onOpenChange={(open) => setActionsMenuOpen({ scripts: false, imports: open })}
-        >
-          <MenuTrigger render={<Button size="xs" variant="outline" aria-label="Project actions" />}>
-            <PlusIcon className="size-3.5" />
-            <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
-              Add action
-            </span>
-            <ChevronDownIcon className="size-3.5" />
-          </MenuTrigger>
-          <MenuPopup align="end">
-            {importMenuItems}
-            <MenuItem className={dropdownItemClassName} onClick={openAddDialog}>
-              <PlusIcon className="size-4" />
-              Add action
-            </MenuItem>
-          </MenuPopup>
-        </Menu>
+        isPanel ? (
+          <div
+            role="group"
+            aria-label="Project actions"
+            className={THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS}
+            ref={panelAnchorRef}
+          >
+            <Button
+              size="sm"
+              variant="ghost"
+              className={THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS}
+              aria-label="Project actions"
+              onClick={() => setActionsMenuOpen({ scripts: false, imports: true })}
+            >
+              <WrenchIcon className={THREAD_DETAILS_PANEL_ICON_CLASS} />
+              <span className="ml-0.5 min-w-0 truncate">Actions</span>
+            </Button>
+            <span aria-hidden="true" className={THREAD_DETAILS_PANEL_SPLIT_SEPARATOR_CLASS} />
+            <Menu
+              highlightItemOnHover={false}
+              open={actionsMenuOpen.imports}
+              onOpenChange={(open) => setActionsMenuOpen({ scripts: false, imports: open })}
+            >
+              <MenuTrigger
+                render={
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className={THREAD_DETAILS_PANEL_SPLIT_SECONDARY_CLASS}
+                    aria-label="Choose project action"
+                  />
+                }
+              >
+                <ChevronDownIcon className={THREAD_DETAILS_PANEL_CHEVRON_CLASS} />
+              </MenuTrigger>
+              <MenuPopup
+                align="end"
+                anchor={panelAnchorRef}
+                className={THREAD_DETAILS_PANEL_ROW_POPUP_CLASS}
+              >
+                {importMenuItems}
+                <MenuItem className={dropdownItemClassName} onClick={openAddDialog}>
+                  <PlusIcon className="size-4" />
+                  Add action
+                </MenuItem>
+              </MenuPopup>
+            </Menu>
+          </div>
+        ) : (
+          <Menu
+            highlightItemOnHover={false}
+            open={actionsMenuOpen.imports}
+            onOpenChange={(open) => setActionsMenuOpen({ scripts: false, imports: open })}
+          >
+            <MenuTrigger
+              render={<Button size="xs" variant="outline" aria-label="Project actions" />}
+            >
+              <WrenchIcon className="size-3.5" />
+              <span className="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5">
+                Actions
+              </span>
+              <ChevronDownIcon className="size-3.5" />
+            </MenuTrigger>
+            <MenuPopup align="end">
+              {importMenuItems}
+              <MenuItem className={dropdownItemClassName} onClick={openAddDialog}>
+                <PlusIcon className="size-4" />
+                Add action
+              </MenuItem>
+            </MenuPopup>
+          </Menu>
+        )
       ) : (
         <Tooltip>
           <TooltipTrigger
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
index 47a157f9c5f..ce3afe9e3c9 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.test.ts
@@ -939,7 +939,7 @@ describe("deriveMessagesTimelineRows", () => {
     ]);
   });
 
-  it("keeps interruption request, intervening work, and result visible in order", () => {
+  it("hides the interruption request while keeping intervening work and the result", () => {
     const runId = "turn-1" as never;
     const interruptEvent = (type: "run_interrupt_request" | "run_interrupt_result") => ({
       position: type === "run_interrupt_request" ? 0 : 2,
@@ -1004,11 +1004,7 @@ describe("deriveMessagesTimelineRows", () => {
       revertTurnCountByUserMessageId: new Map(),
     });
 
-    expect(rows.map((row) => row.id)).toEqual([
-      "interrupt-request",
-      "work-entry",
-      "interrupt-result",
-    ]);
+    expect(rows.map((row) => row.id)).toEqual(["work-entry", "interrupt-result"]);
     expect(rows.some((row) => row.kind === "turn-fold")).toBe(false);
   });
 
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index a57c402671a..3377cacfa51 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -528,6 +528,15 @@ export function deriveMessagesTimelineRows(input: {
       continue;
     }
 
+    // The terminal interrupt result is the useful timeline marker. The
+    // preceding request is transient bookkeeping and duplicates that marker.
+    if (
+      timelineEntry.kind === "event" &&
+      timelineEntry.projectedItem.item.type === "run_interrupt_request"
+    ) {
+      continue;
+    }
+
     const turnFold = foldsByAnchorEntryId.get(timelineEntry.id);
     if (turnFold) {
       nextRows.push({
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 6e14d304d03..2b3cefcf8af 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -493,7 +493,55 @@ describe("MessagesTimeline", () => {
     );
 
     expect(markup).toContain("Steered the active turn");
-    expect(markup).toContain(">steer<");
+    expect(markup).toContain("lucide-redo-2");
+    expect(markup).toContain('data-user-message-intent="steer"');
+    expect(markup).toContain("items-center justify-end gap-1");
+    expect(markup).toContain("gap-1 text-xs leading-none text-muted-foreground");
+    expect(markup.indexOf("Steer")).toBeLessThan(markup.indexOf("Adjust the current turn"));
+  });
+
+  it("does not add redundant space below a collapsed turn divider", () => {
+    const runId = RunId.make("run-collapsed-spacing");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        timelineEntries={[
+          buildUserTimelineEntry("Investigate spacing"),
+          {
+            id: "assistant-commentary-spacing",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:30.000Z",
+            message: {
+              id: MessageId.make("assistant-commentary-spacing"),
+              role: "assistant",
+              text: "Checking the layout.",
+              runId,
+              createdAt: "2026-03-17T19:12:30.000Z",
+              updatedAt: "2026-03-17T19:12:31.000Z",
+              streaming: false,
+            },
+          },
+          {
+            id: "assistant-final-spacing",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:32.000Z",
+            message: {
+              id: MessageId.make("assistant-final-spacing"),
+              role: "assistant",
+              text: "Spacing fixed.",
+              runId,
+              createdAt: "2026-03-17T19:12:32.000Z",
+              updatedAt: "2026-03-17T19:12:33.000Z",
+              streaming: false,
+            },
+          },
+        ]}
+      />,
+    );
+
+    expect(markup).toContain('class="pb-0" data-timeline-row-id="turn-fold:');
+    expect(markup).toContain('data-timeline-row-kind="turn-fold"');
+    expect(markup).not.toContain("border-b border-border/60");
   });
 
   it("shows a collapsed disclosure for superseded attempt output", async () => {
@@ -710,7 +758,7 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Work Log");
   });
 
-  it("renders V2 interruption lifecycle entries as standalone rows", async () => {
+  it("does not render the transient V2 interruption request", async () => {
     const { MessagesTimeline } = await import("./MessagesTimeline");
     const markup = renderToStaticMarkup(
       <MessagesTimeline
@@ -749,9 +797,9 @@ describe("MessagesTimeline", () => {
       />,
     );
 
-    expect(markup).toContain('data-v2-item-type="run_interrupt_request"');
-    expect(markup).toContain("Interrupt requested");
-    expect(markup).toContain("Waiting for the provider to stop.");
+    expect(markup).not.toContain('data-v2-item-type="run_interrupt_request"');
+    expect(markup).not.toContain("Interrupt requested");
+    expect(markup).not.toContain("Waiting for the provider to stop.");
     expect(markup).not.toContain("Structured details");
   });
 
@@ -841,6 +889,8 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("GPT 5.6 Sol");
     expect(markup).toContain("Claude Fable 5");
     expect(markup).not.toContain("Full conversation context");
+    expect(markup).not.toContain("·");
+    expect(markup).toContain("--provider-icon-average-color-light:#d97757");
 
     // Items persisted before models were stamped recover them from the
     // projection runs: the handoff's run is the target, the newest earlier
@@ -1307,6 +1357,8 @@ describe("MessagesTimeline", () => {
     );
 
     expect(markup).toContain('data-v2-item-type="error"');
+    expect(markup).toContain('data-v2-event-disclosure="true"');
+    expect(markup).toContain("<summary");
     expect(markup).toContain("Provider error");
     expect(markup).toContain("Invalid reasoning effort.");
   });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 9d585ffdd96..78c858be6d8 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -59,6 +59,7 @@ import {
   MousePointerClickIcon,
   PaintbrushIcon,
   MinusIcon,
+  Redo2Icon,
   SquarePenIcon,
   TerminalIcon,
   Undo2Icon,
@@ -916,12 +917,16 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
       className={cn(
         // Commentary (non-terminal assistant) rows carry no metadata row, so
         // they sit closer to the work that follows them.
-        (row.kind === "message" && row.message.role === "assistant" && !row.showAssistantMeta) ||
-          row.kind === "work" ||
-          row.kind === "event" ||
-          row.kind === "attempt-fold"
-          ? "pb-2"
-          : "pb-4",
+        row.kind === "turn-fold"
+          ? "pb-0"
+          : (row.kind === "message" &&
+                row.message.role === "assistant" &&
+                !row.showAssistantMeta) ||
+              row.kind === "work" ||
+              row.kind === "event" ||
+              row.kind === "attempt-fold"
+            ? "pb-2"
+            : "pb-4",
         row.kind === "message" && row.message.role === "assistant" ? "group/assistant" : null,
       )}
       data-timeline-row-id={row.id}
@@ -975,6 +980,9 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           Sent by another agent
         </p>
       ) : null}
+      {row.message.inputIntent && row.message.inputIntent !== "turn_start" ? (
+        <UserMessageIntentMarker intent={row.message.inputIntent} />
+      ) : null}
       <div className="relative max-w-[80%] rounded-2xl bg-accent p-3">
         {regularImages.length > 0 && (
           <div className="mb-2 grid max-w-[420px] grid-cols-2 gap-2">
@@ -1033,23 +1041,14 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           markdownCwd={ctx.markdownCwd}
         />
       </div>
-      {(row.message.inputIntent && row.message.inputIntent !== "turn_start") ||
-      (row.projectedItem &&
-        row.projectedItem.item.status !== "completed" &&
-        row.projectedItem.item.status !== "pending" &&
-        row.projectedItem.item.status !== "waiting") ? (
+      {row.projectedItem &&
+      row.projectedItem.item.status !== "completed" &&
+      row.projectedItem.item.status !== "pending" &&
+      row.projectedItem.item.status !== "waiting" ? (
         <div className="me-1 flex items-center gap-1.5">
-          {row.message.inputIntent && row.message.inputIntent !== "turn_start" ? (
-            <UserMessageIntentBadge intent={row.message.inputIntent} />
-          ) : null}
-          {row.projectedItem &&
-          row.projectedItem.item.status !== "completed" &&
-          row.projectedItem.item.status !== "pending" &&
-          row.projectedItem.item.status !== "waiting" ? (
-            <span className="rounded-full border border-destructive/25 bg-destructive/8 px-1.5 py-0.5 text-[10px] font-medium text-destructive">
-              {row.projectedItem.item.status}
-            </span>
-          ) : null}
+          <span className="rounded-full border border-destructive/25 bg-destructive/8 px-1.5 py-0.5 text-[10px] font-medium text-destructive">
+            {row.projectedItem.item.status}
+          </span>
         </div>
       ) : null}
       <div className="flex w-full max-w-[80%] items-center justify-end pe-1 text-xs tabular-nums opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100">
@@ -1074,26 +1073,31 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   );
 }
 
-function UserMessageIntentBadge({
+function UserMessageIntentMarker({
   intent,
 }: {
   readonly intent: NonNullable<TimelineMessage["inputIntent"]>;
 }) {
   const presentation =
     intent === "queued_turn"
-      ? { label: "queued", className: "border-amber-500/25 bg-amber-500/8 text-amber-700" }
+      ? {
+          label: "Queued",
+          icon: null,
+        }
       : intent === "promoted_queued_to_steer"
         ? {
-            label: "queued → steer",
-            className: "border-sky-500/25 bg-sky-500/8 text-sky-700",
+            label: "Steer",
+            icon: Redo2Icon,
           }
-        : { label: "steer", className: "border-sky-500/25 bg-sky-500/8 text-sky-700" };
+        : {
+            label: "Steer",
+            icon: Redo2Icon,
+          };
+  const IntentIcon = presentation.icon;
   return (
-    <span
-      className={cn(
-        "me-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium tracking-wide",
-        presentation.className,
-      )}
+    <div
+      className="me-1 flex items-center justify-end gap-1 text-xs leading-none text-muted-foreground"
+      data-user-message-intent={intent}
       title={
         intent === "queued_turn"
           ? "Queued behind the active turn"
@@ -1102,8 +1106,9 @@ function UserMessageIntentBadge({
             : "Steered the active turn"
       }
     >
+      {IntentIcon ? <IntentIcon aria-hidden="true" className="size-3" /> : null}
       {presentation.label}
-    </span>
+    </div>
   );
 }
 
@@ -1137,7 +1142,7 @@ function TurnFoldTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "turn-
   const Icon = row.expanded ? ChevronDownIcon : ChevronRightIcon;
 
   return (
-    <div className="border-b border-border/60 pb-2 pt-1">
+    <div className="pb-2 pt-1">
       <button
         type="button"
         aria-expanded={row.expanded}
@@ -1416,6 +1421,85 @@ function V2EventTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "event"
   }
   const presentation = v2EventPresentation(item);
   const Icon = presentation.icon;
+  if (item.type === "error") {
+    return (
+      <details
+        className={cn(
+          "group rounded-md border",
+          presentation.tone === "warning" && "border-amber-500/25 bg-amber-500/5",
+          presentation.tone === "danger" && "border-destructive/25 bg-destructive/5",
+          presentation.tone === "success" && "border-emerald-500/20 bg-emerald-500/5",
+        )}
+        data-v2-item-type={item.type}
+        data-v2-item-visibility={visibility}
+        data-v2-event-disclosure="true"
+      >
+        <summary className="flex min-w-0 cursor-pointer list-none items-center gap-2 px-2.5 py-1.5 text-xs [&::-webkit-details-marker]:hidden">
+          <Icon
+            className={cn(
+              "size-3.5 shrink-0",
+              presentation.tone === "warning" && "text-amber-600 dark:text-amber-400",
+              presentation.tone === "danger" && "text-destructive",
+              presentation.tone === "success" && "text-emerald-600 dark:text-emerald-400",
+            )}
+          />
+          <span className="shrink-0 font-medium text-foreground/90">{presentation.label}</span>
+          {item.status !== "completed" ? (
+            <span
+              className={cn(
+                "shrink-0 rounded-full border px-1.5 py-0.5 font-mono text-[10px]",
+                item.status === "failed"
+                  ? "border-destructive/40 text-destructive"
+                  : "border-border/70 text-muted-foreground",
+              )}
+            >
+              {item.status}
+            </span>
+          ) : null}
+          {presentation.detail ? (
+            <span className="min-w-0 flex-1 truncate text-muted-foreground/65">
+              {presentation.detail}
+            </span>
+          ) : null}
+          {visibility !== "local" ? (
+            <span className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+              {visibility === "inherited" ? "Inherited" : "Synthetic"}
+            </span>
+          ) : null}
+          <ChevronDownIcon className="size-3 shrink-0 text-muted-foreground/60 transition-transform group-open:rotate-180" />
+        </summary>
+        <div className="border-t border-border/45 px-3 py-2 ps-8">
+          {presentation.detail ? (
+            <div className="text-xs leading-relaxed text-muted-foreground">
+              <ChatMarkdown
+                text={presentation.detail}
+                cwd={ctx.markdownCwd}
+                threadRef={ctx.threadRef ?? undefined}
+                skills={ctx.skills}
+                lineBreaks
+              />
+            </div>
+          ) : null}
+          {visibility === "inherited" ? (
+            <p className="mt-1 font-mono text-[10px] text-muted-foreground/65">
+              From {sourceThreadId}
+            </p>
+          ) : null}
+          <div className={presentation.detail ? "mt-2" : undefined}>
+            <V2ItemInspector
+              projectedItem={row.projectedItem}
+              environmentId={ctx.activeThreadEnvironmentId}
+              cwd={ctx.markdownCwd}
+              workspaceRoot={ctx.workspaceRoot}
+              onOpenThread={ctx.onOpenThread}
+              onOpenTurnDiff={ctx.onOpenTurnDiff}
+              onRollbackCheckpoint={ctx.onRollbackCheckpoint}
+            />
+          </div>
+        </div>
+      </details>
+    );
+  }
   return (
     <section
       className={cn(
diff --git a/apps/web/src/components/chat/ThreadDetailsPanel.tsx b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
index cb01abe28a7..f199e199df9 100644
--- a/apps/web/src/components/chat/ThreadDetailsPanel.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
@@ -108,7 +108,7 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
   const card = (
     <div
       className={cn(
-        "panel-glass overflow-hidden rounded-[20px]",
+        "dropdown-glass isolate contain-paint overflow-hidden rounded-[20px]",
         props.mode === "inline" ? "max-h-full" : "max-h-[calc(100dvh-6.5rem)]",
       )}
       data-thread-details-card
diff --git a/apps/web/src/components/chat/TimelineSystemDivider.tsx b/apps/web/src/components/chat/TimelineSystemDivider.tsx
index 4ab074c1c28..d34fd6a3af3 100644
--- a/apps/web/src/components/chat/TimelineSystemDivider.tsx
+++ b/apps/web/src/components/chat/TimelineSystemDivider.tsx
@@ -8,6 +8,7 @@ export function TimelineSystemDivider(props: {
   readonly detail?: ReactNode | null;
   readonly tone?: "neutral" | "danger";
   readonly icon?: LucideIcon;
+  readonly showDetailSeparator?: boolean;
   readonly actionLabel?: string;
   readonly onAction?: () => void;
 }) {
@@ -16,7 +17,12 @@ export function TimelineSystemDivider(props: {
     <>
       {Icon ? <Icon className="size-3 shrink-0" /> : null}
       <span className="font-medium">{props.label}</span>
-      {props.detail ? <span className="max-w-80 truncate opacity-70">· {props.detail}</span> : null}
+      {props.detail ? (
+        <span className="inline-flex min-w-0 max-w-80 items-center truncate opacity-70">
+          {props.showDetailSeparator === false ? null : "·\u00a0"}
+          {props.detail}
+        </span>
+      ) : null}
     </>
   );
 
diff --git a/apps/web/src/components/chat/V2LifecycleRow.tsx b/apps/web/src/components/chat/V2LifecycleRow.tsx
index 10794046946..4f71b2ca0ad 100644
--- a/apps/web/src/components/chat/V2LifecycleRow.tsx
+++ b/apps/web/src/components/chat/V2LifecycleRow.tsx
@@ -8,6 +8,7 @@ import type {
 } from "@t3tools/contracts";
 import type { TimestampFormat } from "@t3tools/contracts/settings";
 import {
+  ArrowRightLeftIcon,
   ArrowRightIcon,
   BotIcon,
   ChevronDownIcon,
@@ -17,12 +18,15 @@ import {
   MinusIcon,
   type LucideIcon,
   XIcon,
-  ZapIcon,
 } from "lucide-react";
 
 import { getProviderInstanceEntry } from "../../providerInstances";
 import { formatShortTimestamp } from "../../timestampFormat";
-import { PROVIDER_ICON_BY_PROVIDER, getTriggerDisplayModelName } from "./providerIconUtils";
+import {
+  PROVIDER_ICON_BY_PROVIDER,
+  getProviderIconAverageColorStyle,
+  getTriggerDisplayModelName,
+} from "./providerIconUtils";
 import { TimelineSystemDivider } from "./TimelineSystemDivider";
 
 const LIFECYCLE_TYPES = new Set<OrchestrationV2TurnItem["type"]>([
@@ -142,7 +146,8 @@ export function V2LifecycleRow(props: {
     return (
       <TimelineSystemDivider
         label="Context handoff"
-        icon={ZapIcon}
+        icon={ArrowRightLeftIcon}
+        showDetailSeparator={false}
         tone={item.status === "failed" ? "danger" : "neutral"}
         detail={
           <span className="inline-flex min-w-0 items-center gap-1.5">
@@ -337,6 +342,8 @@ function HandoffEndpoint(props: {
 }) {
   const entry = getProviderInstanceEntry(props.providers, props.instanceId);
   const Icon = entry === undefined ? null : (PROVIDER_ICON_BY_PROVIDER[entry.driverKind] ?? null);
+  const colorStyle =
+    entry === undefined ? undefined : getProviderIconAverageColorStyle(entry.driverKind);
   const model = props.model?.trim();
   const providerModel =
     model === undefined || model.length === 0
@@ -351,7 +358,12 @@ function HandoffEndpoint(props: {
   return (
     <span className="inline-flex min-w-0 items-center gap-1">
       {Icon === null ? null : <Icon aria-hidden="true" className="size-3 shrink-0" />}
-      <span className="max-w-40 truncate">{label}</span>
+      <span
+        className="max-w-40 truncate text-[var(--provider-icon-average-color-light)] dark:text-[var(--provider-icon-average-color-dark)]"
+        style={colorStyle}
+      >
+        {label}
+      </span>
     </span>
   );
 }
diff --git a/apps/web/src/components/chat/providerIconUtils.ts b/apps/web/src/components/chat/providerIconUtils.ts
index 842c616fe1f..9fa81d68458 100644
--- a/apps/web/src/components/chat/providerIconUtils.ts
+++ b/apps/web/src/components/chat/providerIconUtils.ts
@@ -1,4 +1,5 @@
 import { ProviderDriverKind } from "@t3tools/contracts";
+import type { CSSProperties } from "react";
 import { ClaudeAI, CursorIcon, GrokIcon, Icon, OpenAI, OpenCodeIcon } from "../Icons";
 import { PROVIDER_OPTIONS } from "../../session-logic";
 
@@ -10,6 +11,58 @@ export const PROVIDER_ICON_BY_PROVIDER: Partial<Record<ProviderDriverKind, Icon>
   [ProviderDriverKind.make("grok")]: GrokIcon,
 };
 
+type ProviderIconAverageColor = {
+  readonly light: string;
+  readonly dark: string;
+};
+
+function averageHexColors(colors: ReadonlyArray<string>): string {
+  const channels = colors.reduce<[number, number, number]>(
+    (sum, color) => {
+      const value = color.slice(1);
+      return [
+        sum[0] + Number.parseInt(value.slice(0, 2), 16),
+        sum[1] + Number.parseInt(value.slice(2, 4), 16),
+        sum[2] + Number.parseInt(value.slice(4, 6), 16),
+      ];
+    },
+    [0, 0, 0],
+  );
+  return `#${channels
+    .map((channel) =>
+      Math.round(channel / colors.length)
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}`;
+}
+
+/** Average of the fill colors used by each provider SVG in Icons.tsx. */
+const PROVIDER_ICON_AVERAGE_COLOR_BY_PROVIDER: Partial<
+  Record<ProviderDriverKind, ProviderIconAverageColor>
+> = {
+  [ProviderDriverKind.make("codex")]: { light: "#000000", dark: "#ffffff" },
+  [ProviderDriverKind.make("claudeAgent")]: { light: "#d97757", dark: "#d97757" },
+  [ProviderDriverKind.make("cursor")]: { light: "#26251e", dark: "#edecec" },
+  [ProviderDriverKind.make("grok")]: { light: "#0f0f0f", dark: "#f5f5f5" },
+  [ProviderDriverKind.make("opencode")]: {
+    light: averageHexColors(["#cfcecd", "#211e1e"]),
+    dark: averageHexColors(["#4b4646", "#f1ecec"]),
+  },
+};
+
+export function getProviderIconAverageColorStyle(
+  driverKind: ProviderDriverKind,
+): CSSProperties | undefined {
+  const color = PROVIDER_ICON_AVERAGE_COLOR_BY_PROVIDER[driverKind];
+  return color === undefined
+    ? undefined
+    : ({
+        "--provider-icon-average-color-light": color.light,
+        "--provider-icon-average-color-dark": color.dark,
+      } as CSSProperties);
+}
+
 function isAvailableProviderOption(option: (typeof PROVIDER_OPTIONS)[number]): option is {
   value: ProviderDriverKind;
   label: string;
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index bd18539c616..8be921f5321 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -588,6 +588,10 @@ export function useSettingsRestore(onRestored?: () => void) {
         ? ["Project Grouping"]
         : []),
       ...(settings.wordWrap !== DEFAULT_UNIFIED_SETTINGS.wordWrap ? ["Word wrap"] : []),
+      ...(settings.persistComposerContextStrip !==
+      DEFAULT_UNIFIED_SETTINGS.persistComposerContextStrip
+        ? ["Composer context"]
+        : []),
       ...(settings.diffIgnoreWhitespace !== DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace
         ? ["Diff whitespace changes"]
         : []),
@@ -632,6 +636,7 @@ export function useSettingsRestore(onRestored?: () => void) {
       settings.diffIgnoreWhitespace,
       settings.environmentIdentificationMode,
       settings.glassOpacity,
+      settings.persistComposerContextStrip,
       settings.enableAssistantStreaming,
       settings.enableProviderUpdateChecks,
       settings.sidebarProjectGroupingMode,
@@ -656,6 +661,7 @@ export function useSettingsRestore(onRestored?: () => void) {
     updateSettings({
       timestampFormat: DEFAULT_UNIFIED_SETTINGS.timestampFormat,
       wordWrap: DEFAULT_UNIFIED_SETTINGS.wordWrap,
+      persistComposerContextStrip: DEFAULT_UNIFIED_SETTINGS.persistComposerContextStrip,
       diffIgnoreWhitespace: DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace,
       environmentIdentificationMode: DEFAULT_UNIFIED_SETTINGS.environmentIdentificationMode,
       glassOpacity: DEFAULT_UNIFIED_SETTINGS.glassOpacity,
@@ -1111,6 +1117,34 @@ export function AppearanceSettingsPanel() {
             />
           }
         />
+
+        <SettingsRow
+          {...searchableSetting("composer-context")}
+          description="Keep branch and worktree controls below the composer after a thread starts."
+          resetAction={
+            settings.persistComposerContextStrip !==
+            DEFAULT_UNIFIED_SETTINGS.persistComposerContextStrip ? (
+              <SettingResetButton
+                label="composer context"
+                onClick={() =>
+                  updateSettings({
+                    persistComposerContextStrip:
+                      DEFAULT_UNIFIED_SETTINGS.persistComposerContextStrip,
+                  })
+                }
+              />
+            ) : null
+          }
+          control={
+            <Switch
+              checked={settings.persistComposerContextStrip}
+              onCheckedChange={(checked) =>
+                updateSettings({ persistComposerContextStrip: Boolean(checked) })
+              }
+              aria-label="Keep composer context visible in active threads"
+            />
+          }
+        />
       </SettingsSection>
     </SettingsPageContainer>
   );
diff --git a/apps/web/src/components/settings/settingsSearch.test.ts b/apps/web/src/components/settings/settingsSearch.test.ts
index 464f92547e5..cd71a0e6276 100644
--- a/apps/web/src/components/settings/settingsSearch.test.ts
+++ b/apps/web/src/components/settings/settingsSearch.test.ts
@@ -78,6 +78,10 @@ describe("searchSettings", () => {
       id: "word-wrap",
       to: "/settings/appearance",
     });
+    expect(searchSettings("composer context")[0]).toMatchObject({
+      id: "composer-context",
+      to: "/settings/appearance",
+    });
     expect(searchSettings("environment identification")[0]).toMatchObject({
       id: "environment-identification",
       to: "/settings/appearance",
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index 7a820514d89..48e209a3ce0 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -62,6 +62,11 @@ export const SETTINGS_SEARCH_ITEMS = [
     title: "Word wrap",
     to: "/settings/appearance",
   },
+  {
+    id: "composer-context",
+    title: "Composer context",
+    to: "/settings/appearance",
+  },
   {
     id: "project-grouping",
     title: "Project grouping",
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 537807cb525..5b429014e60 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -699,25 +699,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%);
   }
 
-  .panel-glass {
-    position: relative;
-    isolation: isolate;
-    contain: paint;
-    clip-path: inset(0 round 20px);
-    border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
-    box-shadow: inset 0 1px rgb(255 255 255 / 8%);
-  }
-
-  .panel-glass::before {
-    position: absolute;
-    z-index: -1;
-    inset: 0;
-    background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-    content: "";
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-  }
-
   .dialog-glass {
     border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
     box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
@@ -727,10 +708,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%);
   }
 
-  .dark .panel-glass {
-    box-shadow: inset 0 1px rgb(255 255 255 / 4%);
-  }
-
   .dark .model-picker-surface.model-picker-surface {
     background: color-mix(
       in srgb,
@@ -895,8 +872,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     }
 
     .dialog-glass,
-    .dropdown-glass,
-    .panel-glass::before {
+    .dropdown-glass {
       background: var(--popover) !important;
     }
   }
diff --git a/apps/web/src/session-logic.test.ts b/apps/web/src/session-logic.test.ts
index 1f5ad1943a5..49ed876de76 100644
--- a/apps/web/src/session-logic.test.ts
+++ b/apps/web/src/session-logic.test.ts
@@ -297,6 +297,14 @@ describe("V2 session presentation", () => {
       targetProviderInstanceId: ProviderInstanceId.make("claude-default"),
       targetModel: "claude-sonnet-4-6",
     } satisfies OrchestrationV2TurnItem;
+    const workspacePreparationItem = {
+      ...base("item-workspace-preparation", 7),
+      type: "command_execution" as const,
+      title: "Workspace ready",
+      input: "Preparing workspace",
+      output: "Workspace preparation completed.",
+      exitCode: 0,
+    } satisfies OrchestrationV2TurnItem;
     const visibleTurnItems: ReadonlyArray<OrchestrationV2ProjectedTurnItem> = [
       userItem,
       requestItem,
@@ -305,6 +313,7 @@ describe("V2 session presentation", () => {
       todoItem,
       errorItem,
       threadCreatedItem,
+      workspacePreparationItem,
     ].map((item, position) => ({
       position,
       visibility: "local" as const,
diff --git a/apps/web/src/session-logic.ts b/apps/web/src/session-logic.ts
index e989f045d29..a12b2db048b 100644
--- a/apps/web/src/session-logic.ts
+++ b/apps/web/src/session-logic.ts
@@ -16,6 +16,7 @@ import type {
   ThreadPendingUserInput,
 } from "@t3tools/client-runtime/state/thread-requests";
 import type { ThreadRunSummary, ThreadRuntimeSummary } from "@t3tools/client-runtime/state/shell";
+import { turnItemIsWorkspacePreparation } from "@t3tools/client-runtime/state/turn-item-presentation";
 
 import type { ChatMessage, ProposedPlan, SessionPhase, TurnDiffSummary } from "./types";
 import * as DateTime from "effect/DateTime";
@@ -553,6 +554,7 @@ export function deriveTimelineEntriesFromVisibleTurnItems(input: {
 
   for (const row of input.visibleTurnItems) {
     const { item } = row;
+    if (turnItemIsWorkspacePreparation(item)) continue;
     const createdAt = projectedItemCreatedAt(row);
     const attempt = resolveAttempt(item);
     const attemptMetadata = attempt === undefined ? {} : { attempt };
diff --git a/docs/README.md b/docs/README.md
index bc359826a04..84ae40aa0c5 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -6,6 +6,7 @@
 - [Permission modes](./user/permission-modes.md)
 - [Keyboard shortcuts](./user/keybindings.md)
 - [Remote access](./user/remote-access.md)
+- [Appearance](./user/appearance.md)
 - [Keeping app and server in sync](./user/updating.md)
 - [Source control integrations](./user/source-control.md)
 - [Background service (Linux)](./user/background-service.md)
diff --git a/docs/user/appearance.md b/docs/user/appearance.md
new file mode 100644
index 00000000000..21102873af2
--- /dev/null
+++ b/docs/user/appearance.md
@@ -0,0 +1,11 @@
+# Appearance
+
+Open **Settings → Appearance** to change how T3 Code presents the interface.
+
+## Composer context
+
+Git-backed projects show branch and worktree controls below the composer while you create a thread.
+The controls retreat as the composer docks after you send the first message.
+
+Turn on **Composer context** to keep those controls visible after the thread starts. This preference
+applies to the web and desktop clients.
diff --git a/packages/client-runtime/package.json b/packages/client-runtime/package.json
index 2c154401610..dee9848f9c3 100644
--- a/packages/client-runtime/package.json
+++ b/packages/client-runtime/package.json
@@ -163,6 +163,10 @@
       "types": "./src/state/threadSearch.ts",
       "default": "./src/state/threadSearch.ts"
     },
+    "./state/turn-item-presentation": {
+      "types": "./src/state/turnItemPresentation.ts",
+      "default": "./src/state/turnItemPresentation.ts"
+    },
     "./state/vcs": {
       "types": "./src/state/vcs.ts",
       "default": "./src/state/vcs.ts"
diff --git a/packages/client-runtime/src/state/turnItemPresentation.test.ts b/packages/client-runtime/src/state/turnItemPresentation.test.ts
new file mode 100644
index 00000000000..af2b9fcbe83
--- /dev/null
+++ b/packages/client-runtime/src/state/turnItemPresentation.test.ts
@@ -0,0 +1,36 @@
+import { RunId, ThreadId, TurnItemId, type OrchestrationV2TurnItem } from "@t3tools/contracts";
+import * as DateTime from "effect/DateTime";
+import { describe, expect, it } from "vite-plus/test";
+
+import { turnItemIsWorkspacePreparation } from "./turnItemPresentation.ts";
+
+function command(input: string): OrchestrationV2TurnItem {
+  const now = DateTime.makeUnsafe("2026-08-03T00:00:00.000Z");
+  return {
+    id: TurnItemId.make("item-command"),
+    threadId: ThreadId.make("thread-1"),
+    runId: RunId.make("run-1"),
+    nodeId: null,
+    providerThreadId: null,
+    providerTurnId: null,
+    nativeItemRef: null,
+    parentItemId: null,
+    ordinal: 1,
+    status: "completed",
+    title: "Workspace ready",
+    startedAt: now,
+    completedAt: now,
+    updatedAt: now,
+    type: "command_execution",
+    input,
+    output: "Workspace preparation completed.",
+    exitCode: 0,
+  };
+}
+
+describe("turnItemIsWorkspacePreparation", () => {
+  it("identifies the synthetic workspace preparation command", () => {
+    expect(turnItemIsWorkspacePreparation(command("Preparing workspace"))).toBe(true);
+    expect(turnItemIsWorkspacePreparation(command("prepare workspace"))).toBe(false);
+  });
+});
diff --git a/packages/client-runtime/src/state/turnItemPresentation.ts b/packages/client-runtime/src/state/turnItemPresentation.ts
new file mode 100644
index 00000000000..fe306c92ae3
--- /dev/null
+++ b/packages/client-runtime/src/state/turnItemPresentation.ts
@@ -0,0 +1,8 @@
+import type { OrchestrationV2TurnItem } from "@t3tools/contracts";
+
+const WORKSPACE_PREPARATION_INPUT = "Preparing workspace";
+
+/** Workspace setup is client bookkeeping; preparation failures have their own error item. */
+export function turnItemIsWorkspacePreparation(item: OrchestrationV2TurnItem): boolean {
+  return item.type === "command_execution" && item.input === WORKSPACE_PREPARATION_INPUT;
+}
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index bc5d50975fd..6a02c103a86 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -16,6 +16,15 @@ const decodeServerSettings = Schema.decodeUnknownSync(ServerSettings);
 const decodeServerSettingsPatch = Schema.decodeUnknownSync(ServerSettingsPatch);
 const encodeServerSettings = Schema.encodeSync(ServerSettings);
 
+describe("ClientSettings composer context strip", () => {
+  it("defaults to draft-only and accepts a persistent strip preference", () => {
+    expect(decodeClientSettings({}).persistComposerContextStrip).toBe(false);
+    expect(
+      decodeClientSettingsPatch({ persistComposerContextStrip: true }).persistComposerContextStrip,
+    ).toBe(true);
+  });
+});
+
 describe("ClientSettings word wrap", () => {
   it("defaults word wrap on", () => {
     expect(decodeClientSettings({}).wordWrap).toBe(true);
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index a98d8fe2e4b..e72ff0651f7 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -76,6 +76,9 @@ export const ClientSettingsSchema = Schema.Struct({
   glassOpacity: GlassOpacity.pipe(
     Schema.withDecodingDefault(Effect.succeed(DEFAULT_GLASS_OPACITY)),
   ),
+  persistComposerContextStrip: Schema.Boolean.pipe(
+    Schema.withDecodingDefault(Effect.succeed(false)),
+  ),
   // Model favorites. Historically keyed by provider kind, now
   // widened to `ProviderInstanceId` so users can favorite a specific model
   // on a custom provider instance (e.g. "Codex Personal · gpt-5") without
@@ -710,6 +713,7 @@ export const ClientSettingsPatch = Schema.Struct({
   diffIgnoreWhitespace: Schema.optionalKey(Schema.Boolean),
   environmentIdentificationMode: Schema.optionalKey(EnvironmentIdentificationMode),
   glassOpacity: Schema.optionalKey(GlassOpacity),
+  persistComposerContextStrip: Schema.optionalKey(Schema.Boolean),
   favorites: Schema.optionalKey(
     Schema.Array(
       Schema.Struct({

From fc05872302d00f013729a57216b7b3f66c8db737 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 3 Aug 2026 19:18:40 -0400
Subject: [PATCH 2/2] refactor(chat): simplify handoff styling

---
 .../components/chat/MessagesTimeline.test.tsx |  1 -
 .../src/components/chat/V2LifecycleRow.tsx    | 15 +-----
 .../src/components/chat/providerIconUtils.ts  | 53 -------------------
 3 files changed, 2 insertions(+), 67 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 2b3cefcf8af..9c03f9fe423 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -890,7 +890,6 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Claude Fable 5");
     expect(markup).not.toContain("Full conversation context");
     expect(markup).not.toContain("·");
-    expect(markup).toContain("--provider-icon-average-color-light:#d97757");
 
     // Items persisted before models were stamped recover them from the
     // projection runs: the handoff's run is the target, the newest earlier
diff --git a/apps/web/src/components/chat/V2LifecycleRow.tsx b/apps/web/src/components/chat/V2LifecycleRow.tsx
index 4f71b2ca0ad..079ddc8a62d 100644
--- a/apps/web/src/components/chat/V2LifecycleRow.tsx
+++ b/apps/web/src/components/chat/V2LifecycleRow.tsx
@@ -22,11 +22,7 @@ import {
 
 import { getProviderInstanceEntry } from "../../providerInstances";
 import { formatShortTimestamp } from "../../timestampFormat";
-import {
-  PROVIDER_ICON_BY_PROVIDER,
-  getProviderIconAverageColorStyle,
-  getTriggerDisplayModelName,
-} from "./providerIconUtils";
+import { PROVIDER_ICON_BY_PROVIDER, getTriggerDisplayModelName } from "./providerIconUtils";
 import { TimelineSystemDivider } from "./TimelineSystemDivider";
 
 const LIFECYCLE_TYPES = new Set<OrchestrationV2TurnItem["type"]>([
@@ -342,8 +338,6 @@ function HandoffEndpoint(props: {
 }) {
   const entry = getProviderInstanceEntry(props.providers, props.instanceId);
   const Icon = entry === undefined ? null : (PROVIDER_ICON_BY_PROVIDER[entry.driverKind] ?? null);
-  const colorStyle =
-    entry === undefined ? undefined : getProviderIconAverageColorStyle(entry.driverKind);
   const model = props.model?.trim();
   const providerModel =
     model === undefined || model.length === 0
@@ -358,12 +352,7 @@ function HandoffEndpoint(props: {
   return (
     <span className="inline-flex min-w-0 items-center gap-1">
       {Icon === null ? null : <Icon aria-hidden="true" className="size-3 shrink-0" />}
-      <span
-        className="max-w-40 truncate text-[var(--provider-icon-average-color-light)] dark:text-[var(--provider-icon-average-color-dark)]"
-        style={colorStyle}
-      >
-        {label}
-      </span>
+      <span className="max-w-40 truncate">{label}</span>
     </span>
   );
 }
diff --git a/apps/web/src/components/chat/providerIconUtils.ts b/apps/web/src/components/chat/providerIconUtils.ts
index 9fa81d68458..842c616fe1f 100644
--- a/apps/web/src/components/chat/providerIconUtils.ts
+++ b/apps/web/src/components/chat/providerIconUtils.ts
@@ -1,5 +1,4 @@
 import { ProviderDriverKind } from "@t3tools/contracts";
-import type { CSSProperties } from "react";
 import { ClaudeAI, CursorIcon, GrokIcon, Icon, OpenAI, OpenCodeIcon } from "../Icons";
 import { PROVIDER_OPTIONS } from "../../session-logic";
 
@@ -11,58 +10,6 @@ export const PROVIDER_ICON_BY_PROVIDER: Partial<Record<ProviderDriverKind, Icon>
   [ProviderDriverKind.make("grok")]: GrokIcon,
 };
 
-type ProviderIconAverageColor = {
-  readonly light: string;
-  readonly dark: string;
-};
-
-function averageHexColors(colors: ReadonlyArray<string>): string {
-  const channels = colors.reduce<[number, number, number]>(
-    (sum, color) => {
-      const value = color.slice(1);
-      return [
-        sum[0] + Number.parseInt(value.slice(0, 2), 16),
-        sum[1] + Number.parseInt(value.slice(2, 4), 16),
-        sum[2] + Number.parseInt(value.slice(4, 6), 16),
-      ];
-    },
-    [0, 0, 0],
-  );
-  return `#${channels
-    .map((channel) =>
-      Math.round(channel / colors.length)
-        .toString(16)
-        .padStart(2, "0"),
-    )
-    .join("")}`;
-}
-
-/** Average of the fill colors used by each provider SVG in Icons.tsx. */
-const PROVIDER_ICON_AVERAGE_COLOR_BY_PROVIDER: Partial<
-  Record<ProviderDriverKind, ProviderIconAverageColor>
-> = {
-  [ProviderDriverKind.make("codex")]: { light: "#000000", dark: "#ffffff" },
-  [ProviderDriverKind.make("claudeAgent")]: { light: "#d97757", dark: "#d97757" },
-  [ProviderDriverKind.make("cursor")]: { light: "#26251e", dark: "#edecec" },
-  [ProviderDriverKind.make("grok")]: { light: "#0f0f0f", dark: "#f5f5f5" },
-  [ProviderDriverKind.make("opencode")]: {
-    light: averageHexColors(["#cfcecd", "#211e1e"]),
-    dark: averageHexColors(["#4b4646", "#f1ecec"]),
-  },
-};
-
-export function getProviderIconAverageColorStyle(
-  driverKind: ProviderDriverKind,
-): CSSProperties | undefined {
-  const color = PROVIDER_ICON_AVERAGE_COLOR_BY_PROVIDER[driverKind];
-  return color === undefined
-    ? undefined
-    : ({
-        "--provider-icon-average-color-light": color.light,
-        "--provider-icon-average-color-dark": color.dark,
-      } as CSSProperties);
-}
-
 function isAvailableProviderOption(option: (typeof PROVIDER_OPTIONS)[number]): option is {
   value: ProviderDriverKind;
   label: string;