🤖 refactor: clean up workspace status handoff rendering

Remove the mirrored timeout from the sidebar handoff slot, and clear the transient collapse state when another status row hides the slot before its transition can finish.

---

_Generated with `mux` • Model: `openai:gpt-5.4` • Thinking: `xhigh` • Cost: `$16.21`_

<!-- mux-attribution: model=openai:gpt-5.4 thinking=xhigh costs=16.21 -->

Author: ammar-agent

src/browser/components/WorkspaceStatusIndicator/WorkspaceStatusIndicator.test.tsx

@@ -1,7 +1,7 @@
 import "../../../../tests/ui/dom";
 
 import { afterEach, beforeEach, describe, expect, mock, spyOn, test } from "bun:test";
-import { cleanup, render } from "@testing-library/react";
+import { cleanup, fireEvent, render } from "@testing-library/react";
 import { installDom } from "../../../../tests/ui/dom";
 import * as WorkspaceStoreModule from "@/browser/stores/WorkspaceStore";
 
@@ -142,8 +142,72 @@ describe("WorkspaceStatusIndicator", () => {
     expect(getPhaseSlot()?.getAttribute("class") ?? "").toContain("w-0");
     expect(getPhaseSlot()?.getAttribute("class") ?? "").toContain("mr-0");
     expect(getPhaseIcon()?.getAttribute("class") ?? "").not.toContain("animate-spin");
+    fireEvent.transitionEnd(getPhaseSlot()!, { propertyName: "width" });
+
+    expect(getPhaseSlot()).toBeNull();
     expect(getModelDisplay()?.textContent ?? "").toContain(pendingDisplayName);
     expect(getModelDisplay()?.textContent ?? "").not.toContain(fallbackDisplayName);
     expect(view.container.textContent?.toLowerCase()).toContain("streaming");
   });
+
+  test("does not leak the collapsed handoff slot after agent status hides it", () => {
+    const pendingModel = "openai:gpt-4o-mini";
+    const fallbackModel = "anthropic:claude-sonnet-4-5";
+    const pendingDisplayName = formatModelDisplayName(getModelName(pendingModel));
+    const state: WorkspaceStoreModule.WorkspaceSidebarState = {
+      canInterrupt: false,
+      isStarting: true,
+      awaitingUserQuestion: false,
+      lastAbortReason: null,
+      currentModel: null,
+      pendingStreamModel: pendingModel,
+      recencyTimestamp: null,
+      loadedSkills: [],
+      skillLoadErrors: [],
+      agentStatus: undefined,
+      terminalActiveCount: 0,
+      terminalSessionCount: 0,
+    };
+    spyOn(WorkspaceStoreModule, "useWorkspaceSidebarState").mockImplementation(() => state);
+
+    const view = render(
+      <WorkspaceStatusIndicator
+        workspaceId="workspace-status-handoff-starting"
+        fallbackModel={fallbackModel}
+      />
+    );
+
+    expect(
+      view.container.querySelector("[data-phase-slot]")?.getAttribute("class") ?? ""
+    ).toContain("w-3");
+
+    state.isStarting = false;
+    state.canInterrupt = true;
+    state.currentModel = pendingModel;
+    state.pendingStreamModel = null;
+    state.agentStatus = { emoji: "🔄", message: "Run checks" };
+    view.rerender(
+      <WorkspaceStatusIndicator
+        workspaceId="workspace-status-handoff-status"
+        fallbackModel={fallbackModel}
+      />
+    );
+
+    expect(view.container.querySelector("[data-phase-slot]")).toBeNull();
+    expect(view.container.textContent ?? "").toContain("Run checks");
+
+    state.agentStatus = undefined;
+    view.rerender(
+      <WorkspaceStatusIndicator
+        workspaceId="workspace-status-handoff-streaming"
+        fallbackModel={fallbackModel}
+      />
+    );
+
+    expect(view.container.querySelector("[data-phase-slot]")).toBeNull();
+    expect(view.container.querySelector("[data-model-display]")?.textContent ?? "").toContain(
+      pendingDisplayName
+    );
+    expect(view.container.textContent?.toLowerCase()).toContain("streaming");
+  });
 });

src/browser/components/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx

@@ -29,23 +29,37 @@ export const WorkspaceStatusIndicator = memo<{
 
   const previousPhaseRef = useRef<typeof phase>(phase);
   const [isCollapsingPhaseSlot, setIsCollapsingPhaseSlot] = useState(false);
+  const phaseSlotBlocked = awaitingUserQuestion || Boolean(agentStatus);
   const shouldCollapsePhaseSlot =
     isCollapsingPhaseSlot || (previousPhaseRef.current === "starting" && phase === "streaming");
+  const showPhaseSlot = !phaseSlotBlocked && (phase === "starting" || shouldCollapsePhaseSlot);
 
   useEffect(() => {
     const previousPhase = previousPhaseRef.current;
     previousPhaseRef.current = phase;
 
+    if (phaseSlotBlocked) {
+      setIsCollapsingPhaseSlot(false);
+      return;
+    }
+
     if (previousPhase === "starting" && phase === "streaming") {
       setIsCollapsingPhaseSlot(true);
-      const timeoutId = window.setTimeout(() => {
-        setIsCollapsingPhaseSlot(false);
-      }, 150);
-      return () => window.clearTimeout(timeoutId);
+      return;
+    }
+
+    if (phase !== "streaming") {
+      setIsCollapsingPhaseSlot(false);
     }
+  }, [phase, phaseSlotBlocked]);
 
-    setIsCollapsingPhaseSlot(false);
-  }, [phase]);
+  // Let the CSS transition decide when the handoff slot can disappear so the JS logic
+  // does not need a mirrored timeout that can drift from the rendered duration.
+  const handlePhaseSlotTransitionEnd = () => {
+    if (phase === "streaming" && isCollapsingPhaseSlot) {
+      setIsCollapsingPhaseSlot(false);
+    }
+  };
 
   // Show prompt when ask_user_question is pending - make it prominent
   if (awaitingUserQuestion) {
@@ -109,35 +123,19 @@ export const WorkspaceStatusIndicator = memo<{
       : (currentModel ?? pendingStreamModel ?? fallbackModel);
   const suffix = phase === "starting" ? "- starting..." : "- streaming...";
 
-  if (phase === "streaming" && !shouldCollapsePhaseSlot) {
-    return (
-      <div className="text-muted flex min-w-0 items-center gap-1.5 text-xs">
-        {modelToShow ? (
-          <>
-            <span className="min-w-0 truncate">
-              <ModelDisplay modelString={modelToShow} showTooltip={false} />
-            </span>
-            <span className="shrink-0 opacity-70">{suffix}</span>
-          </>
-        ) : (
-          <span className="min-w-0 truncate">Assistant - streaming...</span>
-        )}
-      </div>
-    );
-  }
-
   return (
     <div className="text-muted flex min-w-0 items-center text-xs">
       {/* Keep the old steady-state layout, but hold the spinner slot just long enough to
           animate the start -> stream handoff instead of flashing the label left. */}
-      {(phase === "starting" || shouldCollapsePhaseSlot) && (
+      {showPhaseSlot && (
         <span
           className={
             phase === "starting"
               ? "mr-1.5 inline-flex w-3 shrink-0 overflow-hidden opacity-100"
               : "mr-0 inline-flex w-0 shrink-0 overflow-hidden opacity-0 transition-[margin,width,opacity] duration-150 ease-out"
           }
           data-phase-slot
+          onTransitionEnd={handlePhaseSlotTransitionEnd}
         >
           <Loader2
             aria-hidden="true"