From bf55106c99efd9b11dce28b2e1f42edd1be6cb72 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 5 May 2026 16:15:05 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20stabilize=20chat=20input?=
 =?UTF-8?q?=20status=20indicators?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reserve collapsed decoration rail space above the workspace chat input so automatic TODO and background bash indicators can appear without resizing the transcript viewport.

Default newly-created pinned TODO indicators to collapsed while preserving persisted user expansion, and cover the stable rail behavior with focused UI tests.

---

_Generated with `mux` • Model: `openai:gpt-5.5` • Thinking: `xhigh` • Cost: `1466331{MUX_COSTS_USD:-unknown}`_

<!-- mux-attribution: model=openai:gpt-5.5 thinking=xhigh costs=5.51 -->
---
 .../ChatPane/ChatInputDecoration.tsx          |  5 +-
 src/browser/components/ChatPane/ChatPane.tsx  | 59 +++++++++++++------
 .../PinnedTodoList/PinnedTodoList.test.tsx    | 35 +++++------
 .../PinnedTodoList/PinnedTodoList.tsx         |  4 +-
 4 files changed, 66 insertions(+), 37 deletions(-)

diff --git a/src/browser/components/ChatPane/ChatInputDecoration.tsx b/src/browser/components/ChatPane/ChatInputDecoration.tsx
index b2a5032bdc..fc13a12171 100644
--- a/src/browser/components/ChatPane/ChatInputDecoration.tsx
+++ b/src/browser/components/ChatPane/ChatInputDecoration.tsx
@@ -22,7 +22,10 @@ interface ChatInputDecorationProps {
 export function ChatInputDecoration(props: ChatInputDecorationProps) {
   return (
     <div
-      className={cn("border-border bg-surface-primary border-t px-4", props.className)}
+      className={cn(
+        "border-border bg-surface-primary pointer-events-auto border-t px-4",
+        props.className
+      )}
       data-component={props.dataComponent}
     >
       <button
diff --git a/src/browser/components/ChatPane/ChatPane.tsx b/src/browser/components/ChatPane/ChatPane.tsx
index 29e2a086dc..afb4fe1694 100644
--- a/src/browser/components/ChatPane/ChatPane.tsx
+++ b/src/browser/components/ChatPane/ChatPane.tsx
@@ -1101,13 +1101,14 @@ interface ChatInputPaneProps {
 
 const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
   const { reviews } = props;
-
-  // Keep optional banners/warnings on one shared lane so the seam right above the textarea is
-  // owned by a single component boundary. That lets hydration reserve only the volatile
-  // workspace-specific decoration stack instead of the whole composer pane.
-  const decorationEntries: LayoutStackItem[] = [];
+  // Keep user-facing warnings in normal flow because they are intentional layout
+  // changes. Automatic status rows float only when they are the sole chrome above
+  // the composer, so they cannot shrink the transcript or cover action banners.
+  const topFlowDecorationEntries: LayoutStackItem[] = [];
+  const automaticDecorationEntries: LayoutStackItem[] = [];
+  const lowerFlowDecorationEntries: LayoutStackItem[] = [];
   if (props.shouldShowCompactionWarning) {
-    decorationEntries.push({
+    topFlowDecorationEntries.push({
       key: "compaction-warning",
       node: (
         <CompactionWarning
@@ -1119,7 +1120,7 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
     });
   }
   if (props.contextSwitchWarning) {
-    decorationEntries.push({
+    topFlowDecorationEntries.push({
       key: "context-switch-warning",
       node: (
         <ContextSwitchWarningBanner
@@ -1131,23 +1132,23 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
     });
   }
   if (props.shouldShowPinnedTodoList) {
-    decorationEntries.push({
+    automaticDecorationEntries.push({
       key: "pinned-todo-list",
       node: <PinnedTodoList workspaceId={props.workspaceId} />,
     });
   }
-  decorationEntries.push({
+  automaticDecorationEntries.push({
     key: "background-processes",
     node: <BackgroundProcessesBanner workspaceId={props.workspaceId} />,
   });
   if (props.shouldShowReviewsBanner) {
-    decorationEntries.push({
+    lowerFlowDecorationEntries.push({
       key: "reviews-banner",
       node: <ReviewsBanner workspaceId={props.workspaceId} />,
     });
   }
   if (props.queuedMessage) {
-    decorationEntries.push({
+    lowerFlowDecorationEntries.push({
       key: "queued-message",
       node: (
         <QueuedMessage
@@ -1159,7 +1160,7 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
     });
   }
   if (props.isQueuedAgentTask) {
-    decorationEntries.push({
+    lowerFlowDecorationEntries.push({
       key: "queued-agent-task",
       node: (
         <div className="border-border-medium bg-background-secondary text-muted rounded-md border px-3 py-2 text-xs">
@@ -1168,17 +1169,39 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
       ),
     });
   }
-  // The decoration lane changes the transcript viewport height from below; the
-  // scrollport ResizeObserver inside useAutoScroll owns any required bottom pin.
+  const hasFlowDecorations =
+    topFlowDecorationEntries.length > 0 || lowerFlowDecorationEntries.length > 0;
 
   return (
-    <>
+    <div className="relative">
+      <LayoutStackLane
+        workspaceId={props.workspaceId}
+        isHydrating={props.isHydratingTranscript}
+        align="end"
+        dataComponent="ChatInputTopFlowDecorationStack"
+        items={topFlowDecorationEntries}
+      />
+      <div
+        className={cn(
+          !hasFlowDecorations && "pointer-events-none absolute inset-x-0 bottom-full z-10"
+        )}
+      >
+        <div>
+          <LayoutStackLane
+            workspaceId={props.workspaceId}
+            isHydrating={props.isHydratingTranscript}
+            align="end"
+            dataComponent="ChatInputAutomaticDecorationStack"
+            items={automaticDecorationEntries}
+          />
+        </div>
+      </div>
       <LayoutStackLane
         workspaceId={props.workspaceId}
         isHydrating={props.isHydratingTranscript}
         align="end"
-        dataComponent="ChatInputDecorationStack"
-        items={decorationEntries}
+        dataComponent="ChatInputLowerFlowDecorationStack"
+        items={lowerFlowDecorationEntries}
       />
       <ChatInput
         key={props.workspaceId}
@@ -1210,6 +1233,6 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
         onDeleteReview={reviews.removeReview}
         onUpdateReviewNote={reviews.updateReviewNote}
       />
-    </>
+    </div>
   );
 };
diff --git a/src/browser/components/PinnedTodoList/PinnedTodoList.test.tsx b/src/browser/components/PinnedTodoList/PinnedTodoList.test.tsx
index e0a88d9b24..bedc6199a8 100644
--- a/src/browser/components/PinnedTodoList/PinnedTodoList.test.tsx
+++ b/src/browser/components/PinnedTodoList/PinnedTodoList.test.tsx
@@ -124,12 +124,13 @@ describe("PinnedTodoList", () => {
     workspaceSubscribers.clear();
   });
 
-  test("renders expanded by default when todos exist", () => {
-    seedWorkspaceState("ws-expanded", { todos: defaultTodos });
+  test("renders collapsed by default when todos exist", () => {
+    seedWorkspaceState("ws-collapsed-default", { todos: defaultTodos });
 
-    const renderResult = renderPinnedTodoList("ws-expanded");
+    const renderResult = renderPinnedTodoList("ws-collapsed-default");
 
-    expect(renderResult.getByText("Add tests")).toBeTruthy();
+    expect(getHeader(renderResult)).toBeTruthy();
+    expect(renderResult.queryByText("Add tests")).toBeNull();
   });
 
   test("renders nothing when there are no todos", () => {
@@ -140,29 +141,29 @@ describe("PinnedTodoList", () => {
     expect(renderResult.container.firstChild).toBeNull();
   });
 
-  test("reads a persisted collapsed state on mount", () => {
-    const workspaceId = "ws-collapsed";
+  test("reads a persisted expanded state on mount", () => {
+    const workspaceId = "ws-expanded";
     seedWorkspaceState(workspaceId, { todos: defaultTodos });
-    globalThis.localStorage.setItem(getPinnedTodoExpandedKey(workspaceId), JSON.stringify(false));
+    globalThis.localStorage.setItem(getPinnedTodoExpandedKey(workspaceId), JSON.stringify(true));
 
     const renderResult = renderPinnedTodoList(workspaceId);
 
-    expect(renderResult.queryByText("Add tests")).toBeNull();
+    expect(renderResult.getByText("Add tests")).toBeTruthy();
   });
 
-  test("manual header click collapses and re-expands while persisting state", () => {
+  test("manual header click expands and re-collapses while persisting state", () => {
     const workspaceId = "ws-toggle";
     seedWorkspaceState(workspaceId, { todos: defaultTodos });
 
     const renderResult = renderPinnedTodoList(workspaceId);
 
-    fireEvent.click(getHeader(renderResult));
-    expect(renderResult.queryByText("Add tests")).toBeNull();
-    expect(readPersistedState(getPinnedTodoExpandedKey(workspaceId), true)).toBe(false);
-
     fireEvent.click(getHeader(renderResult));
     expect(renderResult.getByText("Add tests")).toBeTruthy();
     expect(readPersistedState(getPinnedTodoExpandedKey(workspaceId), false)).toBe(true);
+
+    fireEvent.click(getHeader(renderResult));
+    expect(renderResult.queryByText("Add tests")).toBeNull();
+    expect(readPersistedState(getPinnedTodoExpandedKey(workspaceId), true)).toBe(false);
   });
 
   test("persists expansion state per workspace instead of globally", () => {
@@ -172,13 +173,13 @@ describe("PinnedTodoList", () => {
     const firstRender = renderPinnedTodoList("ws-a");
     fireEvent.click(getHeader(firstRender));
 
-    expect(firstRender.queryByText("Add tests")).toBeNull();
-    expect(readPersistedState(getPinnedTodoExpandedKey("ws-a"), true)).toBe(false);
-    expect(readPersistedState(getPinnedTodoExpandedKey("ws-b"), true)).toBe(true);
+    expect(firstRender.getByText("Add tests")).toBeTruthy();
+    expect(readPersistedState(getPinnedTodoExpandedKey("ws-a"), false)).toBe(true);
+    expect(readPersistedState(getPinnedTodoExpandedKey("ws-b"), false)).toBe(false);
 
     firstRender.unmount();
     const secondRender = renderPinnedTodoList("ws-b");
 
-    expect(secondRender.getByText("Add tests")).toBeTruthy();
+    expect(secondRender.queryByText("Add tests")).toBeNull();
   });
 });
diff --git a/src/browser/components/PinnedTodoList/PinnedTodoList.tsx b/src/browser/components/PinnedTodoList/PinnedTodoList.tsx
index 134e6255ae..316dfed3d1 100644
--- a/src/browser/components/PinnedTodoList/PinnedTodoList.tsx
+++ b/src/browser/components/PinnedTodoList/PinnedTodoList.tsx
@@ -23,7 +23,9 @@ interface PinnedTodoListProps {
  * - MapStore caches WorkspaceState per version, avoiding unnecessary recomputation
  */
 export const PinnedTodoList: React.FC<PinnedTodoListProps> = ({ workspaceId }) => {
-  const [expanded, setExpanded] = usePersistedState(getPinnedTodoExpandedKey(workspaceId), true);
+  // Default to the reserved collapsed rail so a newly-created TODO list does not
+  // resize the transcript. A user's persisted expansion still wins.
+  const [expanded, setExpanded] = usePersistedState(getPinnedTodoExpandedKey(workspaceId), false);
 
   const workspaceStore = useWorkspaceStoreRaw();
   const subscribeToWorkspace = (callback: () => void) =>