From fd2219c935df402acf77b6218dbac1268ceaa1a1 Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Tue, 27 Oct 2026 22:34:00 -0700
Subject: [PATCH] Share one shell between thought and tool steps

StepDetails holds the row, chevron, timer, and open-once body. Thought
builds its own label, the rail dot and badge read lookup tables, and
one hook keeps the finished summary.
---
 apps/web/src/parts/WorkSteps.tsx | 239 +++++++++++++++++--------------
 1 file changed, 134 insertions(+), 105 deletions(-)

diff --git a/apps/web/src/parts/WorkSteps.tsx b/apps/web/src/parts/WorkSteps.tsx
index 1e25131..80363bb 100644
--- a/apps/web/src/parts/WorkSteps.tsx
+++ b/apps/web/src/parts/WorkSteps.tsx
@@ -86,16 +86,21 @@ function Activity(props: ActivityProps) {
   )
 }
 
-/** What some finished steps did, totalling the thinking time when every step was timed. */
-const finishedSummary = (steps: Step[], scope: string | undefined) =>
-  stepsSummary(
-    steps,
-    (step) => {
-      const id = clockId(scope, step)
-      return id ? stepDuration(id) : undefined
-    },
-    formatSeconds,
-    (tool) => toolEntry(tool).label,
+/**
+ * What some finished steps did, totalling the thinking time when every step was timed, and kept up
+ * to date as each step records its time when it stops.
+ */
+const useFinishedSummary = (steps: Step[], scope: string | undefined) =>
+  useStepDurations(() =>
+    stepsSummary(
+      steps,
+      (step) => {
+        const id = clockId(scope, step)
+        return id ? stepDuration(id) : undefined
+      },
+      formatSeconds,
+      (tool) => toolEntry(tool).label,
+    ),
   )
 
 /**
@@ -113,8 +118,7 @@ const stepRow = cn(
 
 /** A run of reasoning and tool use, shown as it happens. */
 export function WorkSteps(props: Props) {
-  // The finished summary totals the thinking time, which a step records when it stops.
-  const finished = useStepDurations(() => finishedSummary(props.steps, props.scope))
+  const finished = useFinishedSummary(props.steps, props.scope)
   const last = props.steps.length - 1
   const views = props.steps.map((step, i) => (
     <StepView
@@ -172,8 +176,7 @@ interface WorkButtonProps {
 
 /** The footer button that opens a finished reply's steps under it, named by what they did. */
 export function WorkButton(props: WorkButtonProps) {
-  // The summary totals the thinking time, which a step records when it stops.
-  const label = useStepDurations(() => finishedSummary(props.steps, props.scope))
+  const label = useFinishedSummary(props.steps, props.scope)
   return (
     <button
       type="button"
@@ -214,27 +217,28 @@ interface RailDotProps {
   record: MessageRecord
 }
 
+/** A rail dot's color for each tool status, and for a thought, which has none. */
+const dotColors: Record<ToolStatus | 'thought', string> = {
+  done: 'bg-accent-border',
+  error: 'bg-danger-border',
+  incomplete: 'bg-danger-border',
+  running: 'bg-author-dot',
+  thought: 'bg-author-dot',
+}
+
 /**
  * A step's light dot on the rail: green when its tool finished, red when it failed, and grey for
  * a thought. A failed step also says so in its badge, so the dot is never the only sign.
  */
 function RailDot(props: RailDotProps) {
-  const status = props.step.kind === 'tool' ? toolStatus(props.step.result, props.record) : null
+  const status =
+    props.step.kind === 'tool' ? toolStatus(props.step.result, props.record) : 'thought'
   return (
     <span
       aria-hidden="true"
       className="absolute -start-6.5 top-1 z-1 flex h-5.5 w-5 items-center justify-center"
     >
-      <span
-        className={cn(
-          'size-2 rounded-full ring-3 ring-panel',
-          status === 'error' || status === 'incomplete'
-            ? 'bg-danger-border'
-            : status === 'done'
-              ? 'bg-accent-border'
-              : 'bg-author-dot',
-        )}
-      />
+      <span className={cn('size-2 rounded-full ring-3 ring-panel', dotColors[status])} />
     </span>
   )
 }
@@ -290,7 +294,7 @@ const StepView = memo(
         <Thought
           text={step.text}
           current={props.current}
-          label={props.current ? 'Thinking' : <ReasoningLabel duration={clock.duration} />}
+          duration={clock.duration}
           elapsed={clock.elapsed}
         />
       )
@@ -329,57 +333,86 @@ function useOpened() {
   }
 }
 
-interface ThoughtProps {
-  text: string
-  /** Whether the model is still thinking it. */
-  current: boolean
-  /** "Thinking" while it runs, or "Thought for 12s" once it is done. */
-  label: ReactNode
-  /** Seconds it has been thinking, while it runs. */
+interface DetailsProps {
+  /** What the step is, for its styles and tests: a thought or a tool. */
+  kind: 'reasoning' | 'tool'
+  /** Whether the model is still thinking it, for a thought. */
+  current?: boolean
+  /** How the tool call went, for a tool step. */
+  state?: ToolStatus
+  /** The row naming the step, after its chevron. */
+  summary: ReactNode
+  /** Seconds it has been running, while it runs. */
   elapsed?: number
+  /** What it opens onto, rendered only once someone opens it. */
+  children: ReactNode
 }
 
-/**
- * A reasoning step, as a tool step is: a row naming the thought with a glimpse of its first line,
- * which opens onto the whole thought. Open, the thought shows its first line itself, so the glimpse
- * goes.
- */
-function Thought(props: ThoughtProps) {
+/** A step's row, which opens onto its body: a thought's text, or a tool's view. */
+function StepDetails(props: DetailsProps) {
   const body = useOpened()
   return (
     <Disclosure.Root
-      data-step="reasoning"
+      data-step={props.kind}
       data-current={props.current || undefined}
+      data-state={props.state}
       className="group/step"
       onToggle={body.onToggle}
     >
       <Disclosure.Summary className={cn(summary, 'gap-1 truncate py-0.5 group-open/step:text-ink')}>
         <Disclosure.Chevron className={chevron} />
-        <span className="flex-none text-ink">{props.label}</span>{' '}
-        <span dir="auto" className="truncate font-normal text-muted group-open/step:hidden">
-          {thoughtGlimpse(props.text)}
-        </span>
+        {props.summary}
         {props.elapsed !== undefined && <Elapsed seconds={props.elapsed} />}
       </Disclosure.Summary>
-      {body.opened && (
-        <Markdown
-          text={props.text}
-          streaming={props.current}
-          className="mt-1 mb-1 text-muted leading-relaxed [font-size:inherit] [&>*>:first-child]:mt-0 [&>*>:last-child]:mb-0 [&_strong]:text-ink"
-        />
-      )}
+      {body.opened && props.children}
     </Disclosure.Root>
   )
 }
 
-interface ReasoningLabelProps {
+interface ThoughtProps {
+  text: string
+  /** Whether the model is still thinking it. */
+  current: boolean
+  /** Seconds it took, once done, when it was watched. */
   duration?: number
+  /** Seconds it has been thinking, while it runs. */
+  elapsed?: number
 }
 
-/** "Thought for 12s" when the thinking was timed, or "Thought" when it wasn't watched. */
-function ReasoningLabel(props: ReasoningLabelProps) {
-  if (props.duration === undefined) return <>Thought</>
-  return <>{thoughtFor(props.duration, formatSeconds)}</>
+/** "Thinking" while it runs, then "Thought for 12s", or "Thought" when it wasn't watched. */
+function thoughtLabel(props: ThoughtProps) {
+  if (props.current) return 'Thinking'
+  if (props.duration === undefined) return 'Thought'
+  return thoughtFor(props.duration, formatSeconds)
+}
+
+/**
+ * A reasoning step, as a tool step is: a row naming the thought with a glimpse of its first line,
+ * which opens onto the whole thought. Open, the thought shows its first line itself, so the glimpse
+ * goes.
+ */
+function Thought(props: ThoughtProps) {
+  return (
+    <StepDetails
+      kind="reasoning"
+      current={props.current}
+      elapsed={props.elapsed}
+      summary={
+        <>
+          <span className="flex-none text-ink">{thoughtLabel(props)}</span>{' '}
+          <span dir="auto" className="truncate font-normal text-muted group-open/step:hidden">
+            {thoughtGlimpse(props.text)}
+          </span>
+        </>
+      }
+    >
+      <Markdown
+        text={props.text}
+        streaming={props.current}
+        className="mt-1 mb-1 text-muted leading-relaxed [font-size:inherit] [&>*>:first-child]:mt-0 [&>*>:last-child]:mb-0 [&_strong]:text-ink"
+      />
+    </StepDetails>
+  )
 }
 
 interface ToolStepProps {
@@ -391,11 +424,11 @@ interface ToolStepProps {
   elapsed?: number
 }
 
-/** What a tool's badge says, for each status but done, which needs none. */
-const badges: Record<Exclude<ToolStatus, 'done'>, string> = {
-  running: 'running',
-  error: 'failed',
-  incomplete: 'incomplete',
+/** What a tool's badge says, and its tone, for each status but done, which needs none. */
+const badges: Record<Exclude<ToolStatus, 'done'>, { text: string; tone?: 'good' | 'danger' }> = {
+  running: { text: 'running', tone: 'good' },
+  error: { text: 'failed', tone: 'danger' },
+  incomplete: { text: 'incomplete' },
 }
 
 /**
@@ -406,51 +439,47 @@ function ToolStep(props: ToolStepProps) {
   const { call, result } = props.step
   const entry = toolEntry(call.tool as string)
   const status = props.status
-  const body = useOpened()
   return (
-    <Disclosure.Root
-      data-step="tool"
-      data-state={status}
-      className="group/step"
-      onToggle={body.onToggle}
-    >
-      <Disclosure.Summary className={cn(summary, 'gap-1 truncate py-0.5 group-open/step:text-ink')}>
-        <Disclosure.Chevron className={chevron} />
-        {entry.code ? (
-          <Code className="text-ink">{entry.label}</Code>
-        ) : (
-          <span className="text-ink">{entry.label}</span>
-        )}{' '}
-        {/* The glimpse of the input stands in for the input the default view shows in full, so
-            there it goes once open. A tool's own view shows what it found, not what it asked. */}
-        <span
-          dir="auto"
-          className={cn(
-            'truncate font-normal text-muted',
-            entry.code && 'font-mono text-caption group-open/step:hidden',
-          )}
-        >
-          {entry.glimpse((call.input as string | undefined) ?? '')}
-        </span>{' '}
-        {status !== 'done' && (
-          <Badge
-            tone={status === 'running' ? 'good' : status === 'error' ? 'danger' : undefined}
-            className={cn('ms-1', status === 'running' && breathe)}
+    <StepDetails
+      kind="tool"
+      state={status}
+      elapsed={props.elapsed}
+      summary={
+        <>
+          {entry.code ? (
+            <Code className="text-ink">{entry.label}</Code>
+          ) : (
+            <span className="text-ink">{entry.label}</span>
+          )}{' '}
+          {/* The glimpse of the input stands in for the input the default view shows in full, so
+              there it goes once open. A tool's own view shows what it found, not what it asked. */}
+          <span
+            dir="auto"
+            className={cn(
+              'truncate font-normal text-muted',
+              entry.code && 'font-mono text-caption group-open/step:hidden',
+            )}
           >
-            {badges[status]}
-          </Badge>
-        )}
-        {props.elapsed !== undefined && <Elapsed seconds={props.elapsed} />}
-      </Disclosure.Summary>
-      {body.opened && (
-        <entry.View
-          call={call}
-          result={result}
-          status={status}
-          record={props.record}
-          blobUrl={props.blobUrl}
-        />
-      )}
-    </Disclosure.Root>
+            {entry.glimpse((call.input as string | undefined) ?? '')}
+          </span>{' '}
+          {status !== 'done' && (
+            <Badge
+              tone={badges[status].tone}
+              className={cn('ms-1', status === 'running' && breathe)}
+            >
+              {badges[status].text}
+            </Badge>
+          )}
+        </>
+      }
+    >
+      <entry.View
+        call={call}
+        result={result}
+        status={status}
+        record={props.record}
+        blobUrl={props.blobUrl}
+      />
+    </StepDetails>
   )
 }
-- 
knotmirror 0.0.1