From 7ec52cb7bb420329c14868d171c6147b55f20825 Mon Sep 17 00:00:00 2001
From: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Date: Fri, 16 Oct 2026 18:53:18 +1100
Subject: [PATCH] Keep a single tool call open and focused as it finishes

Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
---
 src/components/ui/tool-steps.tsx |  4 +++-
 src/examples/tool-steps-demo.tsx | 34 +++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/tool-steps.tsx b/src/components/ui/tool-steps.tsx
index 6d9071e..0078cf3 100644
--- a/src/components/ui/tool-steps.tsx
+++ b/src/components/ui/tool-steps.tsx
@@ -136,7 +136,9 @@ function StepGroup({
   const [open, setOpen] = React.useState(defaultOpen)
   const stats = totalStats(steps)
 
-  if (steps.length === 1 && !running) return <StepRow step={steps[0]} labels={labels} />
+  // Finishing the same call must not close its details or remove its focused
+  // button. A different call starts closed instead of inheriting that state.
+  if (steps.length === 1) return <StepRow key={steps[0].id} step={steps[0]} labels={labels} />
 
   return (
     <div data-slot="step-group" className="flex flex-col gap-1.5">
diff --git a/src/examples/tool-steps-demo.tsx b/src/examples/tool-steps-demo.tsx
index 3f23963..1ff4d00 100644
--- a/src/examples/tool-steps-demo.tsx
+++ b/src/examples/tool-steps-demo.tsx
@@ -1,3 +1,8 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
 import { StepGroup, type Step } from "@/components/ui/tool-steps"
 
 const PATCH = `@@ -12,7 +12,9 @@
@@ -16,9 +21,36 @@ const steps: Step[] = [
 ]
 
 export default function ToolStepsDemo() {
+  const [status, setStatus] = React.useState<Step["status"]>("running")
+  const timer = React.useRef(0)
+  React.useEffect(() => () => window.clearTimeout(timer.current), [])
+
+  const finish = (next: "done" | "error") => {
+    window.clearTimeout(timer.current)
+    setStatus("running")
+    timer.current = window.setTimeout(() => setStatus(next), 2000)
+  }
+  const single: Step = {
+    id: "single-run",
+    label: status === "running" ? "Running python research.py" : "Ran python research.py",
+    status,
+    detail: "python research.py",
+    detailLabel: "Command",
+    output: status === "running" ? "Checking sources…" : "3 sources checked",
+    error: status === "error" ? "One source could not be reached" : undefined,
+  }
+
   return (
-    <div className="w-full max-w-md">
+    <div className="flex w-full max-w-md flex-col gap-4">
       <StepGroup steps={steps} />
+      <div className="flex flex-col gap-2">
+        <p className="text-xs text-muted-foreground">Schedule a result, then open the call while it runs.</p>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => finish("done")}>Finish after 2s</Button>
+          <Button variant="outline" size="sm" onClick={() => finish("error")}>Fail after 2s</Button>
+        </div>
+        <StepGroup steps={[single]} />
+      </div>
     </div>
   )
 }