🤖 fix: stabilize chat input status indicators

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 -->

Author: ibetitsmike

src/browser/components/ChatPane/ChatInputDecoration.tsx

@@ -2,6 +2,10 @@ import type { ReactNode } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 
+// Share the collapsed row height with layout reservations so automatic
+// indicators can mount without resizing the transcript viewport.
+export const CHAT_INPUT_DECORATION_COLLAPSED_ROW_HEIGHT_PX = 25;
+
 interface ChatInputDecorationProps {
   expanded: boolean;
   onToggle: () => void;

src/browser/components/ChatPane/ChatPane.tsx

@@ -21,6 +21,7 @@ import { RetryBarrier } from "@/browser/features/Messages/ChatBarrier/RetryBarri
 import { PinnedTodoList } from "../PinnedTodoList/PinnedTodoList";
 import { LayoutStackLane } from "./LayoutStackLane";
 import type { LayoutStackItem } from "./layoutStack";
+import { CHAT_INPUT_DECORATION_COLLAPSED_ROW_HEIGHT_PX } from "./ChatInputDecoration";
 import { VIM_ENABLED_KEY } from "@/common/constants/storage";
 import { ChatInput, type ChatInputAPI } from "@/browser/features/ChatInput/index";
 import type { QueueDispatchMode } from "@/browser/features/ChatInput/types";
@@ -1101,6 +1102,12 @@ interface ChatInputPaneProps {
 
 const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
   const { reviews } = props;
+  // Reserve only the TODO row we already know is visible. Background bash state
+  // stays colocated in BackgroundProcessesBanner so process updates do not rerender
+  // the whole input pane, and hidden background rows no longer leave an empty rail.
+  const automaticDecorationRailHeightPx = props.shouldShowPinnedTodoList
+    ? CHAT_INPUT_DECORATION_COLLAPSED_ROW_HEIGHT_PX
+    : 0;
 
   // 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
@@ -1178,6 +1185,7 @@ const ChatInputPane: React.FC<ChatInputPaneProps> = (props) => {
         isHydrating={props.isHydratingTranscript}
         align="end"
         dataComponent="ChatInputDecorationStack"
+        minReservedHeightPx={automaticDecorationRailHeightPx}
         items={decorationEntries}
       />
       <ChatInput

src/browser/components/ChatPane/LayoutStackLane.test.tsx

@@ -238,6 +238,47 @@ describe("LayoutStackLane", () => {
     });
   });
 
+  it("lets callers drop unused automatic rail space", () => {
+    const view = render(
+      <LayoutStackLane
+        workspaceId="workspace-a"
+        isHydrating={false}
+        align="end"
+        dataComponent="decoration-lane"
+        minReservedHeightPx={50}
+        items={[createTextItem("todo", "TODO status row"), createTextItem("bash", "Bash row")]}
+      />
+    );
+
+    expect(getRenderedStack(view.container, "decoration-lane").style.minHeight).toBe("50px");
+
+    view.rerender(
+      <LayoutStackLane
+        workspaceId="workspace-a"
+        isHydrating={false}
+        align="end"
+        dataComponent="decoration-lane"
+        minReservedHeightPx={25}
+        items={[createTextItem("todo", "TODO status row")]}
+      />
+    );
+
+    expect(getRenderedStack(view.container, "decoration-lane").style.minHeight).toBe("25px");
+
+    view.rerender(
+      <LayoutStackLane
+        workspaceId="workspace-a"
+        isHydrating={false}
+        align="end"
+        dataComponent="decoration-lane"
+        minReservedHeightPx={0}
+        items={[createHiddenItem()]}
+      />
+    );
+
+    expect(getRenderedStack(view.container, "decoration-lane").style.minHeight).toBe("");
+  });
+
   it("attaches ResizeObserver when items mount after an empty null lane", async () => {
     const view = render(
       <LayoutStackLane

src/browser/components/ChatPane/LayoutStackLane.tsx

@@ -20,6 +20,8 @@ import {
  *  - `overflowAnchor="none"` opts the tail lane out of browser scroll anchoring
  *    so a newly-inserted tail row (streaming barrier, etc.) can't win the anchor
  *    heuristic and flash the layout underneath.
+ *  - `minReservedHeightPx` keeps known volatile lanes from resizing the transcript
+ *    when automatic chrome appears after the initial layout has settled.
  *
  * Height changes are observed by the transcript scroll owner; this lane only
  * handles reservation and alignment.
@@ -31,6 +33,7 @@ interface LayoutStackLaneProps {
   align: "start" | "end";
   overflowAnchor?: "none";
   dataComponent?: string;
+  minReservedHeightPx?: number;
 }
 
 export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
@@ -39,12 +42,17 @@ export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
   const lastMeasuredStackHeightRef = useRef(0);
 
   const hasItems = props.items.length > 0;
-  const reservedStackHeightPx = getReservedLayoutStackHeightPx({
+  const hydratedReservedStackHeightPx = getReservedLayoutStackHeightPx({
     workspaceId: props.workspaceId,
     isHydrating: props.isHydrating,
     stackHeightByWorkspaceId: stackHeightByWorkspaceIdRef.current,
     fallbackStackHeightPx: lastMeasuredStackHeightRef.current,
   });
+  const minReservedHeightPx = Math.max(0, Math.round(props.minReservedHeightPx ?? 0));
+  const reservedStackHeightPx =
+    hydratedReservedStackHeightPx === null
+      ? minReservedHeightPx
+      : Math.max(hydratedReservedStackHeightPx, minReservedHeightPx);
 
   useLayoutEffect(() => {
     const content = contentRef.current;
@@ -113,12 +121,12 @@ export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
     }
   }, [hasItems, props.isHydrating, props.workspaceId]);
 
-  if (!hasItems && reservedStackHeightPx === null) {
+  if (!hasItems && reservedStackHeightPx === 0) {
     return null;
   }
 
   const style: React.CSSProperties = {};
-  if (reservedStackHeightPx !== null) {
+  if (reservedStackHeightPx > 0) {
     style.minHeight = `${reservedStackHeightPx}px`;
   }
   if (props.overflowAnchor === "none") {

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();
   });
 });

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) =>