🤖 refactor: clean up workspace status handoff rendering

Remove the mirrored timeout from the sidebar handoff slot and keep the cleanup tied to the CSS transition end.

---

_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,6 +142,9 @@ 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");

src/browser/components/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx

@@ -31,22 +31,30 @@ export const WorkspaceStatusIndicator = memo<{
   const [isCollapsingPhaseSlot, setIsCollapsingPhaseSlot] = useState(false);
   const shouldCollapsePhaseSlot =
     isCollapsingPhaseSlot || (previousPhaseRef.current === "starting" && phase === "streaming");
+  const showPhaseSlot = phase === "starting" || shouldCollapsePhaseSlot;
 
   useEffect(() => {
     const previousPhase = previousPhaseRef.current;
     previousPhaseRef.current = phase;
 
     if (previousPhase === "starting" && phase === "streaming") {
       setIsCollapsingPhaseSlot(true);
-      const timeoutId = window.setTimeout(() => {
-        setIsCollapsingPhaseSlot(false);
-      }, 150);
-      return () => window.clearTimeout(timeoutId);
+      return;
     }
 
-    setIsCollapsingPhaseSlot(false);
+    if (phase !== "streaming") {
+      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) {
     return (
@@ -109,35 +117,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"