🤖 refactor: trim chat transcript scroll cleanup (#3210)

## Summary

Follow-up cleanup after #3201: trims maintenance-only code in the chat
transcript bottom-lock and bash auto-expand paths while preserving the
validated behavior. After a 4-lane sub-agent review, this PR also
consolidates duplicated scroll-metric test scaffolding and removes a few
small dead/indirect code paths.

## Background

#3201 stabilized transcript bottom ownership and bash row expansion.
This PR keeps that behavior but reduces surface area in the related code
paths. Cleanup candidates were split across sub-agent lanes for
auto-scroll, bash/tool rows, ChatPane/LayoutStack, and related renderer
test helpers; the accepted low-risk findings were consolidated here.

## Implementation

- Replaces the bash auto-expand hook's raw latest-bash id input with a
direct `hasReplacementStreamingBash` boolean.
- Consolidates bash auto-expand timer cleanup into the layout effect and
removes the separate unmount-only effect.
- Simplifies local Bash row derived state for output/background results.
- Removes the unused `observedHeightRef` writes from `LayoutStackLane`.
- Drops an unused auto-scroll distance helper.
- Removes dead `todoCount` prop plumbing from `ChatInputPane`.
- Shares the happy-dom scroll-metric shim between hook and integration
tests.
- Reuses the scroll-metric helper in the bottom-layout integration test
and makes the viewport-resize case actually shrink the viewport.

## Validation

- `make fmt`
- `bun test src/browser/hooks/useAutoScroll.test.tsx`
- `bun test
src/browser/features/Tools/Shared/useBashAutoExpand.test.tsx`
- `bun test src/browser/components/ChatPane/LayoutStackLane.test.tsx`
- `TEST_INTEGRATION=1 bun x jest tests/ui/chat/bottomLayoutShift.test.ts
--runInBand --silent`
- `make static-check`

## Risks

Low. The production changes are small refactors in already-covered
paths. The most behavior-adjacent changes are the bash auto-expand hook
API and shared test scroll shim, both covered by targeted tests plus
`make static-check`.

---

_Generated with `mux` • Model: `openai:gpt-5.5` • Thinking: `xhigh` •
Cost: `$386.28`_

<!-- mux-attribution: model=openai:gpt-5.5 thinking=xhigh costs=386.28
-->

Author: ammar-agent

src/browser/components/ChatPane/ChatPane.tsx

@@ -284,8 +284,7 @@ export const ChatPane: React.FC<ChatPaneProps> = (props) => {
     hasOlderHistory,
     loadingOlderHistory,
   } = workspaceState;
-  const todoCount = workspaceState.todos.length;
-  const shouldShowPinnedTodoList = todoCount > 0;
+  const shouldShowPinnedTodoList = workspaceState.todos.length > 0;
   const shouldShowReviewsBanner = reviews.reviews.length > 0;
   const shouldRenderLoadOlderMessagesButton = hasOlderHistory && !isChromaticStorybookEnvironment();
   const loadOlderMessagesShortcutLabel = formatKeybind(KEYBINDS.LOAD_OLDER_MESSAGES);
@@ -1025,7 +1024,6 @@ export const ChatPane: React.FC<ChatPaneProps> = (props) => {
               isQueuedAgentTask={isQueuedAgentTask}
               isCompacting={isCompacting}
               shouldShowPinnedTodoList={shouldShowPinnedTodoList}
-              todoCount={todoCount}
               shouldShowReviewsBanner={shouldShowReviewsBanner}
               canInterrupt={canInterrupt}
               autoCompactionResult={autoCompactionResult}
@@ -1078,7 +1076,6 @@ interface ChatInputPaneProps {
   isStreamStarting: boolean;
   isHydratingTranscript: boolean;
   shouldShowPinnedTodoList: boolean;
-  todoCount: number;
   shouldShowReviewsBanner: boolean;
   canInterrupt: boolean;
   autoCompactionResult: ReturnType<typeof checkAutoCompaction>;

src/browser/components/ChatPane/LayoutStackLane.tsx

@@ -37,7 +37,6 @@ export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const stackHeightByWorkspaceIdRef = useRef(new Map<string, number>());
   const lastMeasuredStackHeightRef = useRef(0);
-  const observedHeightRef = useRef<number | null>(null);
 
   const hasItems = props.items.length > 0;
   const reservedStackHeightPx = getReservedLayoutStackHeightPx({
@@ -50,14 +49,11 @@ export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
   useLayoutEffect(() => {
     const content = contentRef.current;
     if (!content) {
-      observedHeightRef.current = null;
       return;
     }
 
     const observer = new ResizeObserver((entries) => {
       const nextHeight = measureLayoutStackHeightPx(content, entries[0]?.contentRect.height);
-      observedHeightRef.current = nextHeight;
-
       if (nextHeight === 0) {
         // Some owners (e.g. background-process dialogs) stay mounted while
         // rendering nothing. Only drop the reservation after hydration ends —
@@ -94,7 +90,6 @@ export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
     }
 
     if (!hasItems) {
-      observedHeightRef.current = 0;
       clearLayoutStackHeight(
         props.workspaceId,
         stackHeightByWorkspaceIdRef.current,
@@ -109,7 +104,6 @@ export const LayoutStackLane: React.FC<LayoutStackLaneProps> = (props) => {
     }
 
     const settledHeightPx = measureLayoutStackHeightPx(content);
-    observedHeightRef.current = settledHeightPx;
     if (settledHeightPx === 0) {
       clearLayoutStackHeight(
         props.workspaceId,

src/browser/features/Tools/BashToolCall.tsx

@@ -55,7 +55,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
   const { expanded, setExpanded, toggleExpanded } = useToolExpansion();
   const [outputDialogOpen, setOutputDialogOpen] = useState(false);
 
-  const resultHasOutput = typeof (result as { output?: unknown } | undefined)?.output === "string";
+  const resultHasOutput = typeof result?.output === "string";
   const shouldTrackLiveBashState = Boolean(
     workspaceId &&
     toolCallId &&
@@ -78,6 +78,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
     shouldTrackLatestStreamingBash ? workspaceId : undefined
   );
   const isLatestStreamingBash = latestStreamingBashId === toolCallId;
+  const hasReplacementStreamingBash = latestStreamingBashId !== null && !isLatestStreamingBash;
 
   const outputRef = useRef<HTMLPreElement>(null);
   const outputPinnedRef = useRef(true);
@@ -94,7 +95,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
   const userToggledRef = useRef(false);
   useBashAutoExpand({
     isLatestStreamingBash,
-    latestStreamingBashId,
+    hasReplacementStreamingBash,
     status,
     startedAt,
     setExpanded,
@@ -109,7 +110,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
   // Override status for backgrounded processes: the aggregator sees success=true and marks "completed",
   // but for a foreground→background migration we want to show "backgrounded"
   const effectiveStatus: ToolStatus =
-    status === "completed" && result && "backgroundProcessId" in result ? "backgrounded" : status;
+    status === "completed" && backgroundProcessId !== null ? "backgrounded" : status;
 
   const showLiveOutput =
     !isBackground && (status === "executing" || (Boolean(liveOutput) && !resultHasOutput));
@@ -134,7 +135,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
   const truncatedInfo = result && "truncated" in result ? result.truncated : undefined;
   const note = result && "note" in result ? result.note : undefined;
 
-  const isBackgroundResult = Boolean(result && "backgroundProcessId" in result);
+  const isBackgroundResult = backgroundProcessId !== null;
   const completedOutput = isBackgroundResult ? undefined : result?.output;
   const completedHasOutput = typeof completedOutput === "string" && completedOutput.length > 0;
   const showCompletedOutputSection = !isBackgroundResult && (completedHasOutput || Boolean(note));
@@ -311,12 +312,12 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
           )}
 
           {/* Background process info */}
-          {result && "backgroundProcessId" in result && (
+          {backgroundProcessId && (
             <div className="flex items-center gap-2 text-[11px]">
               <Layers size={12} className="text-muted shrink-0" />
               <span className="text-muted">Background process</span>
               <code className="rounded bg-[var(--color-bg-tertiary)] px-1.5 py-0.5 font-mono text-[10px]">
-                {result.backgroundProcessId}
+                {backgroundProcessId}
               </code>
             </div>
           )}

src/browser/features/Tools/Shared/useBashAutoExpand.test.tsx

@@ -1,15 +1,14 @@
 import { afterEach, beforeEach, describe, expect, test } from "bun:test";
 import { act, cleanup, renderHook } from "@testing-library/react";
-import type { Dispatch, SetStateAction, MutableRefObject } from "react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { installDom } from "../../../../../tests/ui/dom";
 import { useBashAutoExpand } from "./useBashAutoExpand";
 import type { ToolStatus } from "./toolUtils";
 
 interface HarnessOptions {
   isLatestStreamingBash: boolean;
-  latestStreamingBashId: string | null;
+  hasReplacementStreamingBash?: boolean;
   status: ToolStatus;
   startedAt?: number;
   initialExpanded?: boolean;
@@ -18,27 +17,23 @@ interface HarnessOptions {
 
 interface HarnessResult {
   expanded: boolean;
-  setExpanded: Dispatch<SetStateAction<boolean>>;
-  userToggledRef: MutableRefObject<boolean>;
 }
 
 function useTestHarness(options: HarnessOptions): HarnessResult {
   const [expanded, setExpanded] = useState(options.initialExpanded ?? false);
   // Stable ref across renders so the harness simulates the parent component.
-  const userToggledRef = useState(() => ({
-    current: options.initialUserToggled ?? false,
-  }))[0] as MutableRefObject<boolean>;
+  const userToggledRef = useRef(options.initialUserToggled ?? false);
 
   useBashAutoExpand({
     isLatestStreamingBash: options.isLatestStreamingBash,
-    latestStreamingBashId: options.latestStreamingBashId,
+    hasReplacementStreamingBash: options.hasReplacementStreamingBash ?? false,
     status: options.status,
     startedAt: options.startedAt,
     setExpanded,
     userToggledRef,
   });
 
-  return { expanded, setExpanded, userToggledRef };
+  return { expanded };
 }
 
 let cleanupDom: (() => void) | null = null;
@@ -58,7 +53,6 @@ describe("useBashAutoExpand", () => {
     const { result } = renderHook(() =>
       useTestHarness({
         isLatestStreamingBash: true,
-        latestStreamingBashId: "tool-bash-1",
         status: "executing",
         startedAt: 0,
       })
@@ -73,7 +67,6 @@ describe("useBashAutoExpand", () => {
     const { result } = renderHook(() =>
       useTestHarness({
         isLatestStreamingBash: true,
-        latestStreamingBashId: "tool-bash-1",
         status: "executing",
         startedAt: Date.now(),
       })
@@ -90,7 +83,6 @@ describe("useBashAutoExpand", () => {
   test("delays expand by 300ms for new in-chat bash transitions", async () => {
     const initialProps: HarnessOptions = {
       isLatestStreamingBash: false,
-      latestStreamingBashId: null,
       status: "pending",
     };
     const { result, rerender } = renderHook((p: HarnessOptions) => useTestHarness(p), {
@@ -104,7 +96,6 @@ describe("useBashAutoExpand", () => {
     // expand immediately (flash protection).
     rerender({
       isLatestStreamingBash: true,
-      latestStreamingBashId: "tool-bash-1",
       status: "executing",
     });
     expect(result.current.expanded).toBe(false);
@@ -120,7 +111,6 @@ describe("useBashAutoExpand", () => {
     const { result } = renderHook(() =>
       useTestHarness({
         isLatestStreamingBash: true,
-        latestStreamingBashId: "tool-bash-1",
         status: "executing",
         initialUserToggled: true,
       })
@@ -132,7 +122,6 @@ describe("useBashAutoExpand", () => {
   test("auto-collapses when a different bash takes over", () => {
     const initialProps: HarnessOptions = {
       isLatestStreamingBash: true,
-      latestStreamingBashId: "tool-bash-1",
       status: "executing",
       startedAt: 0,
     };
@@ -142,10 +131,10 @@ describe("useBashAutoExpand", () => {
     expect(result.current.expanded).toBe(true);
 
     // A NEW bash starts streaming. From this row's perspective, it stops being
-    // the latest streaming bash and a non-null id replaces it.
+    // the latest streaming bash and should collapse back to its default state.
     rerender({
       isLatestStreamingBash: false,
-      latestStreamingBashId: "tool-bash-2",
+      hasReplacementStreamingBash: true,
       status: "executing",
     });
 
@@ -155,7 +144,6 @@ describe("useBashAutoExpand", () => {
   test("does NOT auto-collapse when the bash itself completes", () => {
     const initialProps: HarnessOptions = {
       isLatestStreamingBash: true,
-      latestStreamingBashId: "tool-bash-1",
       status: "executing",
       startedAt: 0,
     };
@@ -164,12 +152,10 @@ describe("useBashAutoExpand", () => {
     });
     expect(result.current.expanded).toBe(true);
 
-    // Bash finishes: latestStreamingBashId becomes null because there's no
-    // bash currently streaming. The row should keep its expanded state so the
-    // user can read the completed output without re-clicking.
+    // Bash finishes with no replacement streaming. The row should stay expanded
+    // so the user can read the completed output without re-clicking.
     rerender({
       isLatestStreamingBash: false,
-      latestStreamingBashId: null,
       status: "completed",
     });
 
@@ -180,7 +166,6 @@ describe("useBashAutoExpand", () => {
     const { result } = renderHook(() =>
       useTestHarness({
         isLatestStreamingBash: false,
-        latestStreamingBashId: null,
         status: "pending",
       })
     );

src/browser/features/Tools/Shared/useBashAutoExpand.ts

@@ -1,33 +1,19 @@
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 
 import type { ToolStatus } from "./toolUtils";
 
 const FAST_COMMAND_FLASH_DELAY_MS = 300;
 
 /**
- * Manages auto-expand/collapse of a bash tool row based on whether it's the
- * latest streaming bash in the workspace.
- *
- * Two distinct cases:
- *
- * 1. **Chat-open with an already-streaming bash.** The row mounts with
- *    `isLatestStreamingBash && status === "executing"`. The bash has clearly
- *    been running for some time (otherwise the chat wouldn't be in this
- *    state when opened), so flash protection is not needed. Expand immediately
- *    in a layout effect so the user does not perceive a delay between the chat
- *    appearing and the bash output being readable.
- *
- * 2. **In-chat new bash.** A bash transitions to executing while the user is
- *    already mounted in the chat. Delay the expand by 300 ms so commands that
- *    complete in under that window don't briefly expand and re-collapse,
- *    preventing a layout flash for fast-completing commands.
- *
- * The hook also auto-collapses the row when a new bash takes over and respects
- * any manual user toggle (a manual click pins the row's expanded state).
+ * Keeps the latest streaming bash readable without flashing short commands:
+ * hydrated rows that already outlived the flash window expand before paint,
+ * while freshly-started rows wait for that same window before expanding.
+ * Manual user toggles pin the row, and auto-expanded rows collapse only when a
+ * different bash becomes the latest streaming bash.
  */
 export function useBashAutoExpand(options: {
   isLatestStreamingBash: boolean;
-  latestStreamingBashId: string | null;
+  hasReplacementStreamingBash: boolean;
   status: ToolStatus;
   /** Timestamp from the tool part. Used to distinguish hydrated long-running rows from fresh mounts. */
   startedAt?: number;
@@ -37,7 +23,7 @@ export function useBashAutoExpand(options: {
 }): void {
   const {
     isLatestStreamingBash,
-    latestStreamingBashId,
+    hasReplacementStreamingBash,
     status,
     startedAt,
     setExpanded,
@@ -51,60 +37,52 @@ export function useBashAutoExpand(options: {
   const isFreshMountRef = useRef(true);
 
   useLayoutEffect(() => {
+    const clearExpandTimer = () => {
+      if (expandTimerRef.current) {
+        clearTimeout(expandTimerRef.current);
+        expandTimerRef.current = null;
+      }
+    };
     const isFreshMount = isFreshMountRef.current;
     isFreshMountRef.current = false;
 
-    if (userToggledRef.current) return;
+    if (userToggledRef.current) {
+      return clearExpandTimer;
+    }
 
     if (isLatestStreamingBash && status === "executing") {
       const hasOutlivedFlashWindow =
         typeof startedAt === "number" && Date.now() - startedAt >= FAST_COMMAND_FLASH_DELAY_MS;
       if (isFreshMount && hasOutlivedFlashWindow) {
-        // Chat-open with an already-running bash: expand synchronously before paint.
-        // Fresh in-chat tool mounts have a current timestamp and still take the
-        // delayed path below to preserve fast-command flash protection.
         setExpanded(true);
         wasAutoExpandedRef.current = true;
-        return;
+        return clearExpandTimer;
       }
 
-      if (wasAutoExpandedRef.current || expandTimerRef.current) return;
-
-      // In-chat new bash: delay expand to suppress flash for fast-completing commands.
-      expandTimerRef.current = setTimeout(() => {
-        expandTimerRef.current = null;
-        if (!userToggledRef.current) {
-          setExpanded(true);
-          wasAutoExpandedRef.current = true;
-        }
-      }, FAST_COMMAND_FLASH_DELAY_MS);
-      return;
+      if (!wasAutoExpandedRef.current && !expandTimerRef.current) {
+        expandTimerRef.current = setTimeout(() => {
+          expandTimerRef.current = null;
+          if (!userToggledRef.current) {
+            setExpanded(true);
+            wasAutoExpandedRef.current = true;
+          }
+        }, FAST_COMMAND_FLASH_DELAY_MS);
+      }
+      return clearExpandTimer;
     }
 
-    // No longer the latest streaming bash: cancel any pending expand and collapse
-    // if a NEW bash took over (latestStreamingBashId !== null && !== us).
-    if (expandTimerRef.current) {
-      clearTimeout(expandTimerRef.current);
-      expandTimerRef.current = null;
-    }
-    if (wasAutoExpandedRef.current && latestStreamingBashId !== null) {
+    clearExpandTimer();
+    if (wasAutoExpandedRef.current && hasReplacementStreamingBash) {
       setExpanded(false);
       wasAutoExpandedRef.current = false;
     }
+    return undefined;
   }, [
     isLatestStreamingBash,
-    latestStreamingBashId,
+    hasReplacementStreamingBash,
     status,
     startedAt,
     setExpanded,
     userToggledRef,
   ]);
-
-  useEffect(() => {
-    return () => {
-      if (expandTimerRef.current) {
-        clearTimeout(expandTimerRef.current);
-      }
-    };
-  }, []);
 }