From d033c214942e2ad23d97ce60ba1e930a9b9ba5e4 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Wed, 29 Jul 2026 14:46:37 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A4=96=20fix:=20drop=20the=20creation?=
 =?UTF-8?q?=20headline=20and=20align=20the=20composer=20with=20the=20trans?=
 =?UTF-8?q?cript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Let's get building." headline gave a static string the largest type on the
creation page, so remove it.

The composer dock cancels the transcript scrollport's gutter so it can paint
full-bleed, and every surface inside it re-applied that gutter as px-4 (16px)
with a hardcoded max-w-4xl column. In full-width mode the transcript is no
longer capped, so the composer, its decorations, and the warning banners stayed
896px wide inside a much wider transcript. Share the gutter and the width mode
through one hook so docked surfaces track the transcript column in both modes.
---
 .../ChatPane/ChatInputDecoration.tsx          | 15 +++--
 src/browser/components/ChatPane/ChatPane.tsx  | 12 +++-
 .../ConcurrentLocalWarning.tsx                | 10 ++-
 .../components/ProjectPage/ProjectPage.tsx    | 11 ----
 .../features/ChatInput/ChatInput.stories.tsx  | 66 +++++++++++++++++++
 src/browser/features/ChatInput/index.tsx      | 10 ++-
 src/browser/hooks/useChatDockColumn.ts        | 14 ++++
 src/browser/stories/helpers/chatSetup.ts      |  3 +
 8 files changed, 119 insertions(+), 22 deletions(-)
 create mode 100644 src/browser/hooks/useChatDockColumn.ts

diff --git a/src/browser/components/ChatPane/ChatInputDecoration.tsx b/src/browser/components/ChatPane/ChatInputDecoration.tsx
index ac8dfe3fe4..fabec46fef 100644
--- a/src/browser/components/ChatPane/ChatInputDecoration.tsx
+++ b/src/browser/components/ChatPane/ChatInputDecoration.tsx
@@ -1,6 +1,10 @@
 import type { ReactNode } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/common/lib/utils";
+import {
+  CHAT_DOCK_GUTTER_CLASS,
+  useChatDockColumnWidthClass,
+} from "@/browser/hooks/useChatDockColumn";
 
 interface ChatInputDecorationProps {
   expanded: boolean;
@@ -27,9 +31,11 @@ interface ChatInputDecorationProps {
 // drifting again as individual decorations evolve, while `renderExpanded`
 // keeps large hidden detail trees out of collapsed rerenders.
 export function ChatInputDecoration(props: ChatInputDecorationProps) {
+  const columnWidthClass = useChatDockColumnWidthClass();
+
   return (
     <div
-      className={cn("bg-surface-primary px-4", props.className)}
+      className={cn("bg-surface-primary", CHAT_DOCK_GUTTER_CLASS, props.className)}
       data-component={props.dataComponent}
     >
       <button
@@ -38,7 +44,8 @@ export function ChatInputDecoration(props: ChatInputDecorationProps) {
         className={cn(
           // Use a fixed collapsed row height so every decoration reads with the
           // same top/bottom breathing room regardless of icon/text mix.
-          "group mx-auto flex h-6 w-full max-w-4xl items-center gap-2 text-xs leading-none transition-colors",
+          "group flex h-6 items-center gap-2 text-xs leading-none transition-colors",
+          columnWidthClass,
           props.summaryClassName
         )}
       >
@@ -53,9 +60,7 @@ export function ChatInputDecoration(props: ChatInputDecorationProps) {
         </div>
       </button>
       {props.expanded && props.renderExpanded && (
-        <div className={cn("mx-auto max-w-4xl", props.contentClassName)}>
-          {props.renderExpanded()}
-        </div>
+        <div className={cn(columnWidthClass, props.contentClassName)}>{props.renderExpanded()}</div>
       )}
     </div>
   );
diff --git a/src/browser/components/ChatPane/ChatPane.tsx b/src/browser/components/ChatPane/ChatPane.tsx
index d658d5d92b..b719a0272d 100644
--- a/src/browser/components/ChatPane/ChatPane.tsx
+++ b/src/browser/components/ChatPane/ChatPane.tsx
@@ -86,6 +86,10 @@ import { useSendMessageOptions } from "@/browser/hooks/useSendMessageOptions";
 import type { TerminalSessionCreateOptions } from "@/browser/utils/terminal";
 import { useAPI } from "@/browser/contexts/API";
 import { useChatTranscriptFullWidth } from "@/browser/hooks/useChatTranscriptFullWidth";
+import {
+  CHAT_DOCK_GUTTER_CLASS,
+  useChatDockColumnWidthClass,
+} from "@/browser/hooks/useChatDockColumn";
 import { useTranscriptDensity } from "@/browser/hooks/useTranscriptDensity";
 import { useReviews } from "@/browser/hooks/useReviews";
 import { ReviewsBanner } from "../ReviewsBanner/ReviewsBanner";
@@ -1833,9 +1837,13 @@ const ChatPaneContent: React.FC<ChatPaneContentProps> = (props) => {
 };
 
 const TranscriptOnlyNoticePane: React.FC = () => {
+  const columnWidthClass = useChatDockColumnWidthClass();
+
   return (
-    <div className="bg-surface-primary border-border-light border-t px-4 pb-2">
-      <div className="mx-auto max-w-4xl py-4">
+    <div
+      className={cn("bg-surface-primary border-border-light border-t pb-2", CHAT_DOCK_GUTTER_CLASS)}
+    >
+      <div className={cn("py-4", columnWidthClass)}>
         <p role="note" className="text-muted text-sm leading-6">
           {TRANSCRIPT_ONLY_NOTICE}
         </p>
diff --git a/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx b/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx
index 3182b7a963..365872d170 100644
--- a/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx
+++ b/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx
@@ -2,6 +2,10 @@ import React, { useMemo, useSyncExternalStore } from "react";
 import { AlertTriangle } from "lucide-react";
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { useWorkspaceStoreRaw } from "@/browser/stores/WorkspaceStore";
+import {
+  CHAT_DOCK_GUTTER_CLASS,
+  useChatDockColumnWidthClass,
+} from "@/browser/hooks/useChatDockColumn";
 import { cn } from "@/common/lib/utils";
 import { isLocalProjectRuntime } from "@/common/types/runtime";
 import type { RuntimeConfig } from "@/common/types/runtime";
@@ -85,11 +89,13 @@ export const ConcurrentLocalWarningView: React.FC<ConcurrentLocalWarningViewProp
 export const ConcurrentLocalWarningDecoration: React.FC<ConcurrentLocalWarningViewProps> = (
   props
 ) => {
+  const columnWidthClass = useChatDockColumnWidthClass();
+
   return (
-    <div className="bg-surface-primary px-4 py-1.5">
+    <div className={cn("bg-surface-primary py-1.5", CHAT_DOCK_GUTTER_CLASS)}>
       <ConcurrentLocalWarningView
         streamingWorkspaceName={props.streamingWorkspaceName}
-        className={cn("mx-auto max-w-4xl", props.className)}
+        className={cn(columnWidthClass, props.className)}
       />
     </div>
   );
diff --git a/src/browser/components/ProjectPage/ProjectPage.tsx b/src/browser/components/ProjectPage/ProjectPage.tsx
index 5100124161..c1105d7665 100644
--- a/src/browser/components/ProjectPage/ProjectPage.tsx
+++ b/src/browser/components/ProjectPage/ProjectPage.tsx
@@ -290,17 +290,6 @@ export const ProjectPage: React.FC<ProjectPageProps> = ({
                 {isNonGitRepo && (
                   <GitInitBanner projectPath={projectPath} onSuccess={handleGitInitSuccess} />
                 )}
-                {/* Keep the heading outside the provider branch to prevent layout shifts during setup. */}
-                <h1
-                  className={cn(
-                    "text-foreground px-1 text-[32px] leading-10 font-semibold",
-                    // Narrow screens have no vertical room to spend on a decorative headline, but it
-                    // is the page's only h1, so keep it for assistive tech instead of removing it.
-                    "[@media(max-width:768px)]:sr-only"
-                  )}
-                >
-                  Let&rsquo;s get building.
-                </h1>
                 {/* Show configure prompt when no providers, otherwise show ChatInput */}
                 {!providersLoading && !hasProviders ? (
                   <ConfigureProvidersPrompt />
diff --git a/src/browser/features/ChatInput/ChatInput.stories.tsx b/src/browser/features/ChatInput/ChatInput.stories.tsx
index 00fba7f6a0..f80f067504 100644
--- a/src/browser/features/ChatInput/ChatInput.stories.tsx
+++ b/src/browser/features/ChatInput/ChatInput.stories.tsx
@@ -13,6 +13,9 @@ import {
 } from "@/browser/stories/storyPlayHelpers.js";
 import { within, userEvent, waitFor } from "@storybook/test";
 
+// Tailwind's `max-w-4xl`, which the centered transcript and composer columns both cap at.
+const CENTERED_TRANSCRIPT_MAX_WIDTH_PX = 896;
+
 const meta = { ...appMeta, title: "App/Chat/Input" };
 export default meta;
 
@@ -338,3 +341,66 @@ export const EditingMessage: AppStory = {
     },
   },
 };
+
+/**
+ * The composer dock cancels the transcript scrollport's gutter, so every docked surface has to
+ * re-apply it and follow the transcript's width mode to line up. Full width is the mode where a
+ * mismatch is visible, since centered mode hides it by sharing a center line.
+ */
+export const FullWidthTranscriptAlignment: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        collapseLeftSidebar();
+        return setupSimpleChatStory({
+          workspaceId: "ws-full-width-alignment",
+          chatTranscriptFullWidth: true,
+          messages: [
+            createUserMessage("msg-1", "Widen the transcript and check the composer edges", {
+              historySequence: 1,
+            }),
+            createAssistantMessage("msg-2", "The composer should span the same column.", {
+              historySequence: 2,
+            }),
+          ],
+        });
+      }}
+    />
+  ),
+  parameters: {
+    ...appMeta.parameters,
+    pixel: PIXEL_DISABLED,
+  },
+  play: async ({ canvasElement }) => {
+    const storyRoot = document.getElementById("storybook-root") ?? canvasElement;
+    await waitForChatInputAutofocusDone(storyRoot);
+    blurActiveElement();
+
+    const transcript = storyRoot.querySelector<HTMLElement>(
+      '[aria-label="Conversation transcript"]'
+    );
+    if (!transcript) throw new Error("Transcript column not rendered");
+    const surface = storyRoot.querySelector<HTMLElement>('[data-component="ChatInputSurface"]');
+    if (!surface) throw new Error("Composer surface not rendered");
+
+    await waitFor(() => {
+      const column = transcript.getBoundingClientRect();
+      // Without this the story would still pass while centered, where both columns share a center
+      // line and the widths agree by accident.
+      if (column.width <= CENTERED_TRANSCRIPT_MAX_WIDTH_PX) {
+        throw new Error(
+          `Transcript is ${Math.round(column.width)}px wide, so this story is not in full-width mode`
+        );
+      }
+
+      const composer = surface.getBoundingClientRect();
+      const leftGap = Math.round(composer.left - column.left);
+      const rightGap = Math.round(column.right - composer.right);
+      if (leftGap !== 0 || rightGap !== 0) {
+        throw new Error(
+          `Composer is inset from the transcript column by ${leftGap}px left and ${rightGap}px right`
+        );
+      }
+    });
+  },
+};
diff --git a/src/browser/features/ChatInput/index.tsx b/src/browser/features/ChatInput/index.tsx
index 3e40990448..f3b85a6e73 100644
--- a/src/browser/features/ChatInput/index.tsx
+++ b/src/browser/features/ChatInput/index.tsx
@@ -227,6 +227,10 @@ import {
   COMPOSER_WORKSPACE_ICON_ONLY_HIDE_CLASS,
   CREATION_COLUMN_MAX_WIDTH_CLASS,
 } from "@/constants/layout";
+import {
+  CHAT_DOCK_GUTTER_CLASS,
+  useChatDockColumnWidthClass,
+} from "@/browser/hooks/useChatDockColumn";
 
 // localStorage quotas are environment-dependent and relatively small.
 // Be conservative here so we can warn the user before writes start failing.
@@ -1262,6 +1266,8 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
     }
   }, [agentAiDefaults, agentId, creationParentProjectPath, defaultModel, variant]);
 
+  const chatDockColumnWidthClass = useChatDockColumnWidthClass();
+
   // Expose ChatInput auto-focus completion for Storybook/tests.
   const chatInputSectionRef = useRef<HTMLDivElement | null>(null);
   const setChatInputAutoFocusState = useCallback((state: "pending" | "done") => {
@@ -3234,12 +3240,12 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
           variant === "creation"
             ? `w-full ${CREATION_COLUMN_MAX_WIDTH_CLASS}`
             : // WorkspaceFooterBar owns the bottom safe-area inset.
-              "bg-surface-primary px-4 pb-2"
+              `bg-surface-primary pb-2 ${CHAT_DOCK_GUTTER_CLASS}`
         )}
         data-component="ChatInputSection"
         data-autofocus-state="done"
       >
-        <div className={cn("w-full", variant !== "creation" && "mx-auto max-w-4xl")}>
+        <div className={cn(variant === "creation" ? "w-full" : chatDockColumnWidthClass)}>
           {/* Toasts (overlay) */}
           <div className="pointer-events-none absolute right-[15px] bottom-full left-[15px] z-[1000] mb-2 flex flex-col gap-2 [&>*]:pointer-events-auto">
             <ConnectionStatusToast wrap={false} />
diff --git a/src/browser/hooks/useChatDockColumn.ts b/src/browser/hooks/useChatDockColumn.ts
new file mode 100644
index 0000000000..fc42574e63
--- /dev/null
+++ b/src/browser/hooks/useChatDockColumn.ts
@@ -0,0 +1,14 @@
+import { useChatTranscriptFullWidth } from "./useChatTranscriptFullWidth";
+
+// The composer dock cancels the transcript scrollport's horizontal padding so it can paint
+// full-bleed, so every surface inside it re-applies this gutter to land on the same left/right edge
+// as transcript rows. Tailwind scans source text, so it has to be a literal class string.
+export const CHAT_DOCK_GUTTER_CLASS = "px-[15px]";
+
+/**
+ * Width class for surfaces docked with the composer (the composer itself, its decorations, warning
+ * banners) so they track the transcript column in both centered and full-width modes.
+ */
+export function useChatDockColumnWidthClass(): string {
+  return useChatTranscriptFullWidth() ? "w-full" : "mx-auto w-full max-w-4xl";
+}
diff --git a/src/browser/stories/helpers/chatSetup.ts b/src/browser/stories/helpers/chatSetup.ts
index 3dedc32c52..707173de06 100644
--- a/src/browser/stories/helpers/chatSetup.ts
+++ b/src/browser/stories/helpers/chatSetup.ts
@@ -88,6 +88,8 @@ export interface SimpleChatSetupOptions {
   }>;
   /** Mock clearLogs result */
   clearLogsResult?: { success: boolean; error?: string | null };
+  /** Backend-synced full-width transcript preference, which overrides any locally persisted value. */
+  chatTranscriptFullWidth?: boolean;
 }
 
 /**
@@ -177,6 +179,7 @@ export function setupSimpleChatStory(opts: SimpleChatSetupOptions): APIClient {
     invalidAgentSkills: opts.invalidAgentSkills,
     logEntries: opts.logEntries,
     clearLogsResult: opts.clearLogsResult,
+    chatTranscriptFullWidth: opts.chatTranscriptFullWidth,
   });
 }
 

From 0d8e9328f91aed383d93add586284771ac9850c4 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Wed, 29 Jul 2026 15:13:51 +0000
Subject: [PATCH 2/2] fix: sweep the remaining composer-dock surfaces onto the
 shared column

Review of the first commit found three dock entries it missed: the compaction
warning and context-switch banner carried their own mx-4, and the pre-stream
task card had no gutter at all, so none of them tracked the transcript column in
either width mode. Wrap all three in a ChatDockSurface.

Resolve the width mode through a context the dock provides rather than calling
the preference hook per surface, since that hook also fetches and subscribes to
the backend config.
---
 .../ChatPane/ChatInputDecoration.tsx          |   6 +-
 src/browser/components/ChatPane/ChatPane.tsx  | 178 +++++++++---------
 .../components/ChatPane/chatDockColumn.tsx    |  26 +++
 .../CompactionWarning/CompactionWarning.tsx   |   2 +-
 .../ConcurrentLocalWarning.tsx                |   6 +-
 .../ContextSwitchWarning.tsx                  |   2 +-
 .../features/ChatInput/ChatInput.stories.tsx  | 159 +++++++++++-----
 src/browser/features/ChatInput/index.tsx      |   6 +-
 src/browser/hooks/useChatDockColumn.ts        |  14 --
 src/browser/stories/helpers/chatSetup.ts      |   2 +-
 src/constants/layout.ts                       |   5 +
 11 files changed, 245 insertions(+), 161 deletions(-)
 create mode 100644 src/browser/components/ChatPane/chatDockColumn.tsx
 delete mode 100644 src/browser/hooks/useChatDockColumn.ts

diff --git a/src/browser/components/ChatPane/ChatInputDecoration.tsx b/src/browser/components/ChatPane/ChatInputDecoration.tsx
index fabec46fef..b9e4a9c02d 100644
--- a/src/browser/components/ChatPane/ChatInputDecoration.tsx
+++ b/src/browser/components/ChatPane/ChatInputDecoration.tsx
@@ -1,10 +1,8 @@
 import type { ReactNode } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/common/lib/utils";
-import {
-  CHAT_DOCK_GUTTER_CLASS,
-  useChatDockColumnWidthClass,
-} from "@/browser/hooks/useChatDockColumn";
+import { CHAT_DOCK_GUTTER_CLASS } from "@/constants/layout";
+import { useChatDockColumnWidthClass } from "./chatDockColumn";
 
 interface ChatInputDecorationProps {
   expanded: boolean;
diff --git a/src/browser/components/ChatPane/ChatPane.tsx b/src/browser/components/ChatPane/ChatPane.tsx
index b719a0272d..bd466497a5 100644
--- a/src/browser/components/ChatPane/ChatPane.tsx
+++ b/src/browser/components/ChatPane/ChatPane.tsx
@@ -86,10 +86,12 @@ import { useSendMessageOptions } from "@/browser/hooks/useSendMessageOptions";
 import type { TerminalSessionCreateOptions } from "@/browser/utils/terminal";
 import { useAPI } from "@/browser/contexts/API";
 import { useChatTranscriptFullWidth } from "@/browser/hooks/useChatTranscriptFullWidth";
+import { CHAT_DOCK_GUTTER_CLASS } from "@/constants/layout";
 import {
-  CHAT_DOCK_GUTTER_CLASS,
+  ChatDockColumnProvider,
+  ChatDockSurface,
   useChatDockColumnWidthClass,
-} from "@/browser/hooks/useChatDockColumn";
+} from "./chatDockColumn";
 import { useTranscriptDensity } from "@/browser/hooks/useTranscriptDensity";
 import { useReviews } from "@/browser/hooks/useReviews";
 import { ReviewsBanner } from "../ReviewsBanner/ReviewsBanner";
@@ -1760,73 +1762,75 @@ const ChatPaneContent: React.FC<ChatPaneContentProps> = (props) => {
                   of the scrollport never changes with dock height (send-flash
                   invariant). `bg-surface-primary` keeps transcript content from
                   showing through gaps between decoration banners. */}
-              <div
-                ref={composerDockRef}
-                data-testid="chat-composer-dock"
-                className="bg-surface-primary sticky bottom-0 z-10 mx-[-15px] break-normal whitespace-normal"
-                style={COMPOSER_DOCK_STYLE}
-              >
-                {!autoScroll && (
-                  <button
-                    onClick={handleJumpToBottom}
-                    type="button"
-                    // Sit just above the composer dock (8px gap), tracking its live
-                    // height through normal layout instead of a measured offset.
-                    className="assistant-chip font-primary text-foreground hover:assistant-chip-hover absolute bottom-full left-1/2 z-20 mb-2 -translate-x-1/2 cursor-pointer rounded-[20px] px-2 py-1 text-xs font-medium shadow-[0_4px_12px_rgba(0,0,0,0.3)] backdrop-blur-[1px] transition-transform duration-200 hover:scale-105 active:scale-95"
-                  >
-                    Jump to bottom{" "}
-                    <span className="mobile-hide-shortcut-hints">
-                      ({formatKeybind(KEYBINDS.JUMP_TO_BOTTOM)})
-                    </span>
-                  </button>
-                )}
-                {transcriptOnly ? (
-                  // Transcript-only workspaces keep their historical transcript, but the whole
-                  // composer surface is replaced with a single read-only notice.
-                  <TranscriptOnlyNoticePane />
-                ) : (
-                  <ChatInputPane
-                    kind={meta?.kind}
-                    workspaceId={workspaceId}
-                    projectName={projectName}
-                    workspaceName={workspaceName}
-                    revealDecorations={revealDecorations}
-                    isStreamStarting={isStreamStarting}
-                    isTranscriptCaughtUp={isTranscriptCaughtUp}
-                    runtimeConfig={runtimeConfig}
-                    isPreStreamAgentTask={isPreStreamAgentTask}
-                    preStreamAgentTaskStatus={
-                      meta?.taskStatus === "starting" ? "starting" : "queued"
-                    }
-                    isCompacting={isCompacting}
-                    shouldShowPinnedTodoList={shouldShowPinnedTodoList}
-                    shouldShowReviewsBanner={shouldShowReviewsBanner}
-                    concurrentLocalStreamingWorkspaceName={concurrentLocalStreamingWorkspaceName}
-                    canInterrupt={canInterrupt}
-                    autoCompactionResult={autoCompactionResult}
-                    shouldShowCompactionWarning={shouldShowCompactionWarning}
-                    contextSwitchWarning={contextSwitchWarning}
-                    onContextSwitchCompact={handleContextSwitchCompact}
-                    onContextSwitchDismiss={handleContextSwitchDismiss}
-                    onModelChange={handleModelChange}
-                    onMessageSendStarted={handleMessageSendStarted}
-                    onMessageSent={handleMessageSent}
-                    onResetContext={handleResetContext}
-                    onTruncateHistory={handleClearHistory}
-                    editingMessage={editingMessage}
-                    onCancelEdit={handleCancelEdit}
-                    onEditLastUserMessage={handleEditLastUserMessageClick}
-                    onChatInputReady={handleChatInputReady}
-                    queuedMessage={workspaceState?.queuedMessage ?? null}
-                    onEditQueuedMessage={() => void handleEditQueuedMessage()}
-                    onSendQueuedImmediately={
-                      workspaceState?.canInterrupt ? handleSendQueuedImmediately : undefined
-                    }
-                    reviews={reviews}
-                    onCheckReviews={handleCheckReviews}
-                  />
-                )}
-              </div>
+              <ChatDockColumnProvider value={chatTranscriptFullWidth}>
+                <div
+                  ref={composerDockRef}
+                  data-testid="chat-composer-dock"
+                  className="bg-surface-primary sticky bottom-0 z-10 mx-[-15px] break-normal whitespace-normal"
+                  style={COMPOSER_DOCK_STYLE}
+                >
+                  {!autoScroll && (
+                    <button
+                      onClick={handleJumpToBottom}
+                      type="button"
+                      // Sit just above the composer dock (8px gap), tracking its live
+                      // height through normal layout instead of a measured offset.
+                      className="assistant-chip font-primary text-foreground hover:assistant-chip-hover absolute bottom-full left-1/2 z-20 mb-2 -translate-x-1/2 cursor-pointer rounded-[20px] px-2 py-1 text-xs font-medium shadow-[0_4px_12px_rgba(0,0,0,0.3)] backdrop-blur-[1px] transition-transform duration-200 hover:scale-105 active:scale-95"
+                    >
+                      Jump to bottom{" "}
+                      <span className="mobile-hide-shortcut-hints">
+                        ({formatKeybind(KEYBINDS.JUMP_TO_BOTTOM)})
+                      </span>
+                    </button>
+                  )}
+                  {transcriptOnly ? (
+                    // Transcript-only workspaces keep their historical transcript, but the whole
+                    // composer surface is replaced with a single read-only notice.
+                    <TranscriptOnlyNoticePane />
+                  ) : (
+                    <ChatInputPane
+                      kind={meta?.kind}
+                      workspaceId={workspaceId}
+                      projectName={projectName}
+                      workspaceName={workspaceName}
+                      revealDecorations={revealDecorations}
+                      isStreamStarting={isStreamStarting}
+                      isTranscriptCaughtUp={isTranscriptCaughtUp}
+                      runtimeConfig={runtimeConfig}
+                      isPreStreamAgentTask={isPreStreamAgentTask}
+                      preStreamAgentTaskStatus={
+                        meta?.taskStatus === "starting" ? "starting" : "queued"
+                      }
+                      isCompacting={isCompacting}
+                      shouldShowPinnedTodoList={shouldShowPinnedTodoList}
+                      shouldShowReviewsBanner={shouldShowReviewsBanner}
+                      concurrentLocalStreamingWorkspaceName={concurrentLocalStreamingWorkspaceName}
+                      canInterrupt={canInterrupt}
+                      autoCompactionResult={autoCompactionResult}
+                      shouldShowCompactionWarning={shouldShowCompactionWarning}
+                      contextSwitchWarning={contextSwitchWarning}
+                      onContextSwitchCompact={handleContextSwitchCompact}
+                      onContextSwitchDismiss={handleContextSwitchDismiss}
+                      onModelChange={handleModelChange}
+                      onMessageSendStarted={handleMessageSendStarted}
+                      onMessageSent={handleMessageSent}
+                      onResetContext={handleResetContext}
+                      onTruncateHistory={handleClearHistory}
+                      editingMessage={editingMessage}
+                      onCancelEdit={handleCancelEdit}
+                      onEditLastUserMessage={handleEditLastUserMessageClick}
+                      onChatInputReady={handleChatInputReady}
+                      queuedMessage={workspaceState?.queuedMessage ?? null}
+                      onEditQueuedMessage={() => void handleEditQueuedMessage()}
+                      onSendQueuedImmediately={
+                        workspaceState?.canInterrupt ? handleSendQueuedImmediately : undefined
+                      }
+                      reviews={reviews}
+                      onCheckReviews={handleCheckReviews}
+                    />
+                  )}
+                </div>
+              </ChatDockColumnProvider>
             </PerfRenderMarker>
           </div>
           {transcriptContextMenu.menu}
@@ -1909,11 +1913,13 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
     addDecorationEntry({
       key: "compaction-warning",
       node: (
-        <CompactionWarning
-          usagePercentage={props.autoCompactionResult.usagePercentage}
-          thresholdPercentage={props.autoCompactionResult.thresholdPercentage}
-          isStreaming={props.canInterrupt}
-        />
+        <ChatDockSurface>
+          <CompactionWarning
+            usagePercentage={props.autoCompactionResult.usagePercentage}
+            thresholdPercentage={props.autoCompactionResult.thresholdPercentage}
+            isStreaming={props.canInterrupt}
+          />
+        </ChatDockSurface>
       ),
     });
   }
@@ -1921,11 +1927,13 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
     addDecorationEntry({
       key: "context-switch-warning",
       node: (
-        <ContextSwitchWarningBanner
-          warning={props.contextSwitchWarning}
-          onCompact={props.onContextSwitchCompact}
-          onDismiss={props.onContextSwitchDismiss}
-        />
+        <ChatDockSurface>
+          <ContextSwitchWarningBanner
+            warning={props.contextSwitchWarning}
+            onCompact={props.onContextSwitchCompact}
+            onDismiss={props.onContextSwitchDismiss}
+          />
+        </ChatDockSurface>
       ),
     });
   }
@@ -1983,11 +1991,13 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
     addDecorationEntry({
       key: "pre-stream-agent-task",
       node: (
-        <div className="border-border-medium bg-background-secondary text-muted rounded-md border px-3 py-2 text-xs">
-          {props.preStreamAgentTaskStatus === "starting"
-            ? "This agent task is starting and will become editable after launch accepts the initial prompt."
-            : "This agent task is queued and will start automatically when a parallel slot is available."}
-        </div>
+        <ChatDockSurface>
+          <div className="border-border-medium bg-background-secondary text-muted rounded-md border px-3 py-2 text-xs">
+            {props.preStreamAgentTaskStatus === "starting"
+              ? "This agent task is starting and will become editable after launch accepts the initial prompt."
+              : "This agent task is queued and will start automatically when a parallel slot is available."}
+          </div>
+        </ChatDockSurface>
       ),
     });
   }
diff --git a/src/browser/components/ChatPane/chatDockColumn.tsx b/src/browser/components/ChatPane/chatDockColumn.tsx
new file mode 100644
index 0000000000..f79b48926d
--- /dev/null
+++ b/src/browser/components/ChatPane/chatDockColumn.tsx
@@ -0,0 +1,26 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { CHAT_DOCK_GUTTER_CLASS } from "@/constants/layout";
+
+// Read from context rather than useChatTranscriptFullWidth because that hook also syncs the backend
+// config, and one fetch plus subscription per docked surface would be wasteful.
+const ChatDockFullWidthContext = createContext(false);
+
+export const ChatDockColumnProvider = ChatDockFullWidthContext.Provider;
+
+/** Lines a docked surface up with the transcript column in whichever width mode is active. */
+export function useChatDockColumnWidthClass(): string {
+  return useContext(ChatDockFullWidthContext) ? "w-full" : "mx-auto w-full max-w-4xl";
+}
+
+/** Gutter plus column for docked surfaces that carry no padding of their own. */
+export function ChatDockSurface(props: { children: ReactNode }) {
+  const columnWidthClass = useChatDockColumnWidthClass();
+
+  return (
+    <div className={CHAT_DOCK_GUTTER_CLASS}>
+      <div className={columnWidthClass} data-component="ChatDockSurface">
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/browser/components/CompactionWarning/CompactionWarning.tsx b/src/browser/components/CompactionWarning/CompactionWarning.tsx
index 94a8ee4e4c..a8ac6fa417 100644
--- a/src/browser/components/CompactionWarning/CompactionWarning.tsx
+++ b/src/browser/components/CompactionWarning/CompactionWarning.tsx
@@ -44,7 +44,7 @@ export const CompactionWarning: React.FC<{
 
   return (
     <div
-      className={`mx-4 text-right text-[10px] ${
+      className={`text-right text-[10px] ${
         isUrgent ? "text-plan-mode font-semibold" : "text-muted"
       }`}
     >
diff --git a/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx b/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx
index 365872d170..f03497e15e 100644
--- a/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx
+++ b/src/browser/components/ConcurrentLocalWarning/ConcurrentLocalWarning.tsx
@@ -2,10 +2,8 @@ import React, { useMemo, useSyncExternalStore } from "react";
 import { AlertTriangle } from "lucide-react";
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { useWorkspaceStoreRaw } from "@/browser/stores/WorkspaceStore";
-import {
-  CHAT_DOCK_GUTTER_CLASS,
-  useChatDockColumnWidthClass,
-} from "@/browser/hooks/useChatDockColumn";
+import { CHAT_DOCK_GUTTER_CLASS } from "@/constants/layout";
+import { useChatDockColumnWidthClass } from "@/browser/components/ChatPane/chatDockColumn";
 import { cn } from "@/common/lib/utils";
 import { isLocalProjectRuntime } from "@/common/types/runtime";
 import type { RuntimeConfig } from "@/common/types/runtime";
diff --git a/src/browser/components/ContextSwitchWarning/ContextSwitchWarning.tsx b/src/browser/components/ContextSwitchWarning/ContextSwitchWarning.tsx
index 84e8bb4553..14d5cfc6f3 100644
--- a/src/browser/components/ContextSwitchWarning/ContextSwitchWarning.tsx
+++ b/src/browser/components/ContextSwitchWarning/ContextSwitchWarning.tsx
@@ -27,7 +27,7 @@ export const ContextSwitchWarning: React.FC<Props> = (props) => {
   return (
     <div
       data-testid="context-switch-warning"
-      className="bg-background-secondary border-plan-mode mx-4 rounded-md border px-4 py-3"
+      className="bg-background-secondary border-plan-mode rounded-md border px-4 py-3"
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1">
diff --git a/src/browser/features/ChatInput/ChatInput.stories.tsx b/src/browser/features/ChatInput/ChatInput.stories.tsx
index f80f067504..09e5245c79 100644
--- a/src/browser/features/ChatInput/ChatInput.stories.tsx
+++ b/src/browser/features/ChatInput/ChatInput.stories.tsx
@@ -13,8 +13,8 @@ import {
 } from "@/browser/stories/storyPlayHelpers.js";
 import { within, userEvent, waitFor } from "@storybook/test";
 
-// Tailwind's `max-w-4xl`, which the centered transcript and composer columns both cap at.
-const CENTERED_TRANSCRIPT_MAX_WIDTH_PX = 896;
+// Tailwind's `max-w-4xl` in px, the cap the centered transcript and composer columns share.
+const CENTERED_COLUMN_MAX_WIDTH_PX = 896;
 
 const meta = { ...appMeta, title: "App/Chat/Input" };
 export default meta;
@@ -342,31 +342,104 @@ export const EditingMessage: AppStory = {
   },
 };
 
+const DOCK_ALIGNMENT_MESSAGES = [
+  createUserMessage("msg-1", "Widen the transcript and check the composer edges", {
+    historySequence: 1,
+  }),
+  createAssistantMessage("msg-2", "The composer should span the same column.", {
+    historySequence: 2,
+    // 64% of the default model's 1M window: past the auto-compaction warning point (threshold 70
+    // minus a 10 point advance) without reaching force-compaction. The warning is one of the
+    // surfaces wrapped in ChatDockSurface rather than in a decoration of its own.
+    contextUsage: { inputTokens: 640_000, outputTokens: 4_000 },
+  }),
+];
+
+// Renders a ChatInputDecoration, so the assertions cover a decoration and not only the composer.
+const DOCK_ALIGNMENT_BACKGROUND_PROCESS = {
+  id: "bash_1",
+  pid: 4242,
+  script: "npm run dev",
+  displayName: "Dev Server",
+  startTime: STABLE_TIMESTAMP,
+  status: "running" as const,
+};
+
+function setupDockAlignmentStory(fullWidth: boolean) {
+  collapseLeftSidebar();
+  return setupSimpleChatStory({
+    workspaceId: fullWidth ? "ws-dock-align-full" : "ws-dock-align-centered",
+    messages: DOCK_ALIGNMENT_MESSAGES,
+    backgroundProcesses: [DOCK_ALIGNMENT_BACKGROUND_PROCESS],
+    chatTranscriptFullWidth: fullWidth,
+  });
+}
+
 /**
- * The composer dock cancels the transcript scrollport's gutter, so every docked surface has to
- * re-apply it and follow the transcript's width mode to line up. Full width is the mode where a
- * mismatch is visible, since centered mode hides it by sharing a center line.
+ * Asserts every surface in the composer dock shares the transcript column's left and right edges.
+ * The dock cancels the transcript scrollport's gutter to paint full-bleed, so each surface inside it
+ * has to re-apply that gutter and follow the transcript's width mode.
  */
+async function assertDockSurfacesMatchTranscript(
+  storyRoot: HTMLElement,
+  expectation: "capped" | "full-width"
+) {
+  const transcript = storyRoot.querySelector<HTMLElement>('[aria-label="Conversation transcript"]');
+  if (!transcript) throw new Error("Transcript column not rendered");
+  const scrollport = transcript.parentElement;
+  if (!scrollport) throw new Error("Transcript scrollport not rendered");
+
+  const surfaces: Array<[string, HTMLElement]> = [];
+  const addSurface = (label: string, selector: string) => {
+    const element = storyRoot.querySelector<HTMLElement>(selector);
+    if (!element) throw new Error(`Docked ${label} not rendered`);
+    surfaces.push([label, element]);
+  };
+  addSurface("composer", '[data-component="ChatInputSurface"]');
+  addSurface("decoration", '[data-component="ChatInputDecorationStack"] button');
+  const wrapped = storyRoot.querySelectorAll<HTMLElement>('[data-component="ChatDockSurface"]');
+  if (wrapped.length === 0) throw new Error("No ChatDockSurface-wrapped entry rendered");
+  wrapped.forEach((element, index) => surfaces.push([`wrapped surface ${index}`, element]));
+
+  await waitFor(() => {
+    const column = transcript.getBoundingClientRect();
+    const available = scrollport.clientWidth;
+    if (expectation === "full-width") {
+      // Docked surfaces used to hardcode the same 4xl cap the centered column uses, so below that
+      // width they line up regardless and the regression would pass unnoticed.
+      if (column.width <= CENTERED_COLUMN_MAX_WIDTH_PX) {
+        throw new Error(
+          `Transcript is ${Math.round(column.width)}px wide, so this story is not in full-width mode`
+        );
+      }
+    } else {
+      if (available <= CENTERED_COLUMN_MAX_WIDTH_PX) {
+        throw new Error(
+          `Scrollport is only ${available}px wide, so the centered cap is not what limits the column`
+        );
+      }
+      if (Math.round(column.width) !== CENTERED_COLUMN_MAX_WIDTH_PX) {
+        throw new Error(
+          `Centered transcript should stop at the cap, measured ${Math.round(column.width)}px`
+        );
+      }
+    }
+
+    for (const [label, element] of surfaces) {
+      const bounds = element.getBoundingClientRect();
+      const leftGap = Math.round(bounds.left - column.left);
+      const rightGap = Math.round(column.right - bounds.right);
+      if (leftGap !== 0 || rightGap !== 0) {
+        throw new Error(
+          `Docked ${label} is inset from the transcript column by ${leftGap}px left and ${rightGap}px right`
+        );
+      }
+    }
+  });
+}
+
 export const FullWidthTranscriptAlignment: AppStory = {
-  render: () => (
-    <AppWithMocks
-      setup={() => {
-        collapseLeftSidebar();
-        return setupSimpleChatStory({
-          workspaceId: "ws-full-width-alignment",
-          chatTranscriptFullWidth: true,
-          messages: [
-            createUserMessage("msg-1", "Widen the transcript and check the composer edges", {
-              historySequence: 1,
-            }),
-            createAssistantMessage("msg-2", "The composer should span the same column.", {
-              historySequence: 2,
-            }),
-          ],
-        });
-      }}
-    />
-  ),
+  render: () => <AppWithMocks setup={() => setupDockAlignmentStory(true)} />,
   parameters: {
     ...appMeta.parameters,
     pixel: PIXEL_DISABLED,
@@ -376,31 +449,21 @@ export const FullWidthTranscriptAlignment: AppStory = {
     await waitForChatInputAutofocusDone(storyRoot);
     blurActiveElement();
 
-    const transcript = storyRoot.querySelector<HTMLElement>(
-      '[aria-label="Conversation transcript"]'
-    );
-    if (!transcript) throw new Error("Transcript column not rendered");
-    const surface = storyRoot.querySelector<HTMLElement>('[data-component="ChatInputSurface"]');
-    if (!surface) throw new Error("Composer surface not rendered");
+    await assertDockSurfacesMatchTranscript(storyRoot, "full-width");
+  },
+};
 
-    await waitFor(() => {
-      const column = transcript.getBoundingClientRect();
-      // Without this the story would still pass while centered, where both columns share a center
-      // line and the widths agree by accident.
-      if (column.width <= CENTERED_TRANSCRIPT_MAX_WIDTH_PX) {
-        throw new Error(
-          `Transcript is ${Math.round(column.width)}px wide, so this story is not in full-width mode`
-        );
-      }
+export const CenteredTranscriptAlignment: AppStory = {
+  render: () => <AppWithMocks setup={() => setupDockAlignmentStory(false)} />,
+  parameters: {
+    ...appMeta.parameters,
+    pixel: PIXEL_DISABLED,
+  },
+  play: async ({ canvasElement }) => {
+    const storyRoot = document.getElementById("storybook-root") ?? canvasElement;
+    await waitForChatInputAutofocusDone(storyRoot);
+    blurActiveElement();
 
-      const composer = surface.getBoundingClientRect();
-      const leftGap = Math.round(composer.left - column.left);
-      const rightGap = Math.round(column.right - composer.right);
-      if (leftGap !== 0 || rightGap !== 0) {
-        throw new Error(
-          `Composer is inset from the transcript column by ${leftGap}px left and ${rightGap}px right`
-        );
-      }
-    });
+    await assertDockSurfacesMatchTranscript(storyRoot, "capped");
   },
 };
diff --git a/src/browser/features/ChatInput/index.tsx b/src/browser/features/ChatInput/index.tsx
index f3b85a6e73..bcf4bc035c 100644
--- a/src/browser/features/ChatInput/index.tsx
+++ b/src/browser/features/ChatInput/index.tsx
@@ -225,12 +225,10 @@ import {
   COMPOSER_ICON_ONLY_HIDE_CLASS,
   COMPOSER_PRO_HIDE_CLASS,
   COMPOSER_WORKSPACE_ICON_ONLY_HIDE_CLASS,
+  CHAT_DOCK_GUTTER_CLASS,
   CREATION_COLUMN_MAX_WIDTH_CLASS,
 } from "@/constants/layout";
-import {
-  CHAT_DOCK_GUTTER_CLASS,
-  useChatDockColumnWidthClass,
-} from "@/browser/hooks/useChatDockColumn";
+import { useChatDockColumnWidthClass } from "@/browser/components/ChatPane/chatDockColumn";
 
 // localStorage quotas are environment-dependent and relatively small.
 // Be conservative here so we can warn the user before writes start failing.
diff --git a/src/browser/hooks/useChatDockColumn.ts b/src/browser/hooks/useChatDockColumn.ts
deleted file mode 100644
index fc42574e63..0000000000
--- a/src/browser/hooks/useChatDockColumn.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useChatTranscriptFullWidth } from "./useChatTranscriptFullWidth";
-
-// The composer dock cancels the transcript scrollport's horizontal padding so it can paint
-// full-bleed, so every surface inside it re-applies this gutter to land on the same left/right edge
-// as transcript rows. Tailwind scans source text, so it has to be a literal class string.
-export const CHAT_DOCK_GUTTER_CLASS = "px-[15px]";
-
-/**
- * Width class for surfaces docked with the composer (the composer itself, its decorations, warning
- * banners) so they track the transcript column in both centered and full-width modes.
- */
-export function useChatDockColumnWidthClass(): string {
-  return useChatTranscriptFullWidth() ? "w-full" : "mx-auto w-full max-w-4xl";
-}
diff --git a/src/browser/stories/helpers/chatSetup.ts b/src/browser/stories/helpers/chatSetup.ts
index 707173de06..81c2ed8e97 100644
--- a/src/browser/stories/helpers/chatSetup.ts
+++ b/src/browser/stories/helpers/chatSetup.ts
@@ -88,7 +88,7 @@ export interface SimpleChatSetupOptions {
   }>;
   /** Mock clearLogs result */
   clearLogsResult?: { success: boolean; error?: string | null };
-  /** Backend-synced full-width transcript preference, which overrides any locally persisted value. */
+  /** Full-width transcript preference returned by the mock config API. */
   chatTranscriptFullWidth?: boolean;
 }
 
diff --git a/src/constants/layout.ts b/src/constants/layout.ts
index 43aed5dbf0..e0a8acf259 100644
--- a/src/constants/layout.ts
+++ b/src/constants/layout.ts
@@ -7,6 +7,11 @@ export const LEFT_SIDEBAR_COLLAPSED_WIDTH_PX = 20;
 // floating reopen affordance so the header content doesn't sit underneath it.
 export const WORKSPACE_MENU_BAR_LEFT_SIDEBAR_COLLAPSED_PADDING_PX = 60;
 export const CREATION_COLUMN_MAX_WIDTH_CLASS = "max-w-[67rem]";
+
+// The composer dock cancels the transcript scrollport's padding to paint full-bleed, so surfaces
+// inside it re-apply this gutter to land on the same edges as transcript rows. Tailwind scans source
+// text, so this has to stay a literal class string.
+export const CHAT_DOCK_GUTTER_CLASS = "px-[15px]";
 // Minimum height globals.css gives touch targets on coarse-pointer viewports. Shared so tests can
 // reproduce that environment, which Storybook and Pixel cannot: neither emulates `pointer: coarse`.
 export const MOBILE_TOUCH_TARGET_PX = 44;