AI Interfaces block

Collapsible Thinking Trace

The "thought for 5s" panel: a native details/summary outside, individually expandable steps inside — buttons rather than nested disclosures, which are announced as a disclosure within a disclosure.

256 lineslucide-reactAdded 13 Aug 2026Updated 11 Sept 2026

reasoning
thinking
trace
steps
disclosure

What's included

components/agent-thinking-trace.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add agent-thinking-trace

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Thought for 5.1 seconds5 steps

Dropping the largest single cancellation moves the under-20 figure from 6.1% to 5.4%. The pattern holds, so it is a cohort effect and not an outlier.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/agent-thinking-trace.tsx

/**
 * <AgentThinkingTrace> — the collapsible "thought for 12s" panel: what the
 * model considered, in order, expandable step by step.
 *
 * Two accessibility decisions carry this block.
 *
 * The outer summary is a real `<details>`/`<summary>`. Trace panels are the
 * classic case for it — a disclosure with no requirement to be controlled —
 * and using the element means the open state survives with JavaScript off,
 * responds to Enter and Space for free, and is exposed as a disclosure to
 * assistive tech without a single ARIA attribute.
 *
 * The steps are a different problem and get a different answer. Each one is
 * a button controlling its own region, because they need to be individually
 * expandable *and* individually addressable, and nested `<details>` inside
 * an open `<details>` gets announced as a disclosure inside a disclosure —
 * technically right, unbearable to listen to. So: `aria-expanded`,
 * `aria-controls`, and an ordered list, since the order is the meaning.
 *
 * Elapsed time is rendered as a `<time>` with a machine-readable `dateTime`,
 * not a bare string, and the status dots carry `sr-only` text — a coloured
 * ring is not a state for anyone who cannot see it.
 */

'use client'

import * as React from 'react'
import {
  Brain,
  ChevronRight,
  Code2,
  Database,
  FileSearch,
  Globe,
  ListChecks,
} from 'lucide-react'

export type ThinkingKind = 'plan' | 'search' | 'query' | 'code' | 'read'
export type ThinkingState = 'done' | 'active' | 'pending'

export interface ThinkingStep {
  id: string
  kind: ThinkingKind
  title: string
  /** The reasoning under the step, revealed when it is expanded. */
  detail: string
  state?: ThinkingState
  duration?: string
}

export interface AgentThinkingTraceProps {
  summary?: string
  elapsed?: string
  steps?: ThinkingStep[]
  /** Start with the trace open. */
  defaultOpen?: boolean
  className?: string
}

const KIND_ICON = {
  plan: ListChecks,
  search: Globe,
  query: Database,
  code: Code2,
  read: FileSearch,
} as const

const KIND_LABEL = {
  plan: 'Planning',
  search: 'Web search',
  query: 'Database',
  code: 'Code',
  read: 'Reading',
} as const

const DEFAULT_STEPS: ThinkingStep[] = [
  {
    id: 'plan',
    kind: 'plan',
    title: 'Decide what "churn" means here',
    detail:
      'The question is ambiguous between logo churn and revenue churn. Revenue churn is the one the finance dashboard reports, so I will use that and say so in the answer rather than asking and stalling.',
    state: 'done',
    duration: '0.4s',
  },
  {
    id: 'schema',
    kind: 'read',
    title: 'Check which tables carry cancellation dates',
    detail:
      'subscriptions.canceled_at is populated for 98% of rows; the gap is trials, which never had revenue attached. Excluding trials rather than imputing them.',
    state: 'done',
    duration: '1.1s',
  },
  {
    id: 'query',
    kind: 'query',
    title: 'Aggregate lost ARR by seat band',
    detail:
      'Grouped into <20, 20–99 and 100+ seats. The under-20 band is 6.1% against 1.4% elsewhere, which is large enough that I should check it is not one account before reporting it.',
    state: 'done',
    duration: '2.7s',
  },
  {
    id: 'verify',
    kind: 'code',
    title: 'Test whether one account explains the spike',
    detail:
      'Dropping the largest single cancellation moves the under-20 figure from 6.1% to 5.4%. The pattern holds, so it is a cohort effect and not an outlier.',
    state: 'active',
    duration: '0.9s',
  },
  {
    id: 'cite',
    kind: 'search',
    title: 'Pull exit-survey text for the same accounts',
    detail: 'Queued — will attach verbatim reasons to the three largest cancellations.',
    state: 'pending',
  },
]

const DOT = {
  done: 'bg-emerald-500',
  active: 'bg-primary motion-safe:animate-pulse',
  pending: 'bg-muted-foreground/40',
} as const

const DOT_LABEL = {
  done: 'Finished',
  active: 'In progress',
  pending: 'Not started',
} as const

export function AgentThinkingTrace({
  summary = 'Thought for 5.1 seconds',
  elapsed = '5.1s',
  steps = DEFAULT_STEPS,
  defaultOpen = true,
  className = '',
}: AgentThinkingTraceProps) {
  const [expanded, setExpanded] = React.useState<string[]>([steps[3]?.id ?? ''])

  function toggle(id: string) {
    setExpanded((open) => (open.includes(id) ? open.filter((x) => x !== id) : [...open, id]))
  }

  const baseId = React.useId()

  return (
    <div className={`mx-auto w-full max-w-2xl p-6 ${className}`}>
      <details
        open={defaultOpen}
        className="group overflow-hidden rounded-2xl border border-border/60 bg-card"
      >
        <summary className="flex cursor-pointer list-none items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
            <Brain aria-hidden className="h-3.5 w-3.5" />
          </span>

          <span className="text-sm font-medium">{summary}</span>

          <time dateTime={`PT${elapsed.replace('s', 'S')}`} className="sr-only">
            {elapsed}
          </time>

          <span className="ms-auto text-xs text-muted-foreground">{steps.length} steps</span>

          {/*
            Only the CLOSED state is mirrored for RTL, and the asymmetry is
            the whole point: closed, the chevron points at the content it
            would reveal, which is the start edge — right in Arabic. Open, it
            points down, and down is down in every writing direction. So the
            open rule is restated under `rtl:` to beat `rtl:rotate-180`
            rather than being flipped to some RTL value of its own.
          */}
          <ChevronRight
            aria-hidden
            className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-90 rtl:rotate-180 rtl:group-open:rotate-90"
          />
        </summary>

        <ol className="border-t border-border/60 px-4 py-3">
          {steps.map((step, i) => {
            const state = step.state ?? 'done'
            const Icon = KIND_ICON[step.kind]
            const open = expanded.includes(step.id)
            const panelId = `${baseId}-${step.id}`
            const last = i === steps.length - 1

            return (
              <li key={step.id} className="relative ps-7">
                {/* The rail is drawn per step and stops on the last one, so
                    it does not trail off under nothing. */}
                {last ? null : (
                  <span
                    aria-hidden
                    className="absolute start-[7px] top-6 h-[calc(100%-1rem)] w-px bg-border"
                  />
                )}

                <span
                  aria-hidden
                  className={`absolute start-1 top-[15px] h-2 w-2 rounded-full border border-transparent ring-4 ring-card ${DOT[state]}`}
                />

                <button
                  type="button"
                  aria-expanded={open}
                  aria-controls={panelId}
                  onClick={() => toggle(step.id)}
                  className="flex w-full items-center gap-2.5 rounded-lg py-2 ps-1 pe-2 text-start transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <Icon aria-hidden className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />

                  <span className="min-w-0 flex-1 truncate text-sm">
                    <span className="sr-only">
                      {KIND_LABEL[step.kind]}, {DOT_LABEL[state]}:{' '}
                    </span>
                    {step.title}
                  </span>

                  {step.duration ? (
                    <span className="shrink-0 font-mono text-[11px] text-muted-foreground">
                      {step.duration}
                    </span>
                  ) : null}

                  <ChevronRight
                    aria-hidden
                    className={`h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${
                      // Closed points at the content, which is the start edge.
                      open ? 'rotate-90' : 'rtl:rotate-180'
                    }`}
                  />
                </button>

                {/* Unmounted when closed rather than hidden with CSS — a
                    `display: none` panel is still in the accessibility tree
                    in enough readers to matter. */}
                {open ? (
                  <div
                    id={panelId}
                    className="mb-1 ms-1 rounded-lg border-s-2 border-border bg-muted/40 px-3 py-2 text-xs leading-relaxed text-muted-foreground"
                  >
                    {step.detail}
                  </div>
                ) : null}
              </li>
            )
          })}
        </ol>
      </details>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/agent-thinking-trace.tsx and import it where you need the section:

import { AgentThinkingTrace } from '@/components/agent-thinking-trace'

Customize

3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`summary`	`string`	`'Thought for 5.1 seconds'`
`elapsed`	`string`	`'5.1s'`
`steps`	`ThinkingStep[]`	`DEFAULT_STEPS`
`defaultOpen`Start with the trace open.	`boolean`	`true`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

agent-thinking-trace.html

<!--
  Collapsible Thinking Trace — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="mx-auto w-full max-w-2xl p-6 ">
  <details open="" class="group overflow-hidden rounded-2xl border border-border/60 bg-card">
    <summary class="flex cursor-pointer list-none items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
      <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain h-3.5 w-3.5" aria-hidden="true">
          <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path>
          <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"></path>
          <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"></path>
          <path d="M17.599 6.5a3 3 0 0 0 .399-1.375"></path>
          <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path>
          <path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path>
          <path d="M19.938 10.5a4 4 0 0 1 .585.396"></path>
          <path d="M6 18a4 4 0 0 1-1.967-.516"></path>
          <path d="M19.967 17.484A4 4 0 0 1 18 18"></path>
        </svg>
      </span>
      <span class="text-sm font-medium">Thought for 5.1 seconds</span>
      <time dateTime="PT5.1S" class="sr-only">5.1s</time>
      <span class="ms-auto text-xs text-muted-foreground">5 steps</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-90 rtl:rotate-180 rtl:group-open:rotate-90" aria-hidden="true">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </summary>
    <ol class="border-t border-border/60 px-4 py-3">
      <li class="relative ps-7">
        <span aria-hidden="true" class="absolute start-[7px] top-6 h-[calc(100%-1rem)] w-px bg-border"></span>
        <span aria-hidden="true" class="absolute start-1 top-[15px] h-2 w-2 rounded-full border border-transparent ring-4 ring-card bg-emerald-500"></span>
        <button type="button" aria-expanded="false" aria-controls="_R_0_-plan" class="flex w-full items-center gap-2.5 rounded-lg py-2 ps-1 pe-2 text-start transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-checks h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true">
            <path d="m3 17 2 2 4-4"></path>
            <path d="m3 7 2 2 4-4"></path>
            <path d="M13 6h8"></path>
            <path d="M13 12h8"></path>
            <path d="M13 18h8"></path>
          </svg>
          <span class="min-w-0 flex-1 truncate text-sm"><span class="sr-only">Planning, Finished: </span>Decide what &quot;churn&quot; means here</span>
          <span class="shrink-0 font-mono text-[11px] text-muted-foreground">0.4s</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform rtl:rotate-180" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </button>
      </li>
      <li class="relative ps-7">
        <span aria-hidden="true" class="absolute start-[7px] top-6 h-[calc(100%-1rem)] w-px bg-border"></span>
        <span aria-hidden="true" class="absolute start-1 top-[15px] h-2 w-2 rounded-full border border-transparent ring-4 ring-card bg-emerald-500"></span>
        <button type="button" aria-expanded="false" aria-controls="_R_0_-schema" class="flex w-full items-center gap-2.5 rounded-lg py-2 ps-1 pe-2 text-start transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-search h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true">
            <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
            <path d="M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"></path>
            <path d="m9 18-1.5-1.5"></path>
            <circle cx="5" cy="14" r="3"></circle>
          </svg>
          <span class="min-w-0 flex-1 truncate text-sm"><span class="sr-only">Reading, Finished: </span>Check which tables carry cancellation dates</span>
          <span class="shrink-0 font-mono text-[11px] text-muted-foreground">1.1s</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform rtl:rotate-180" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </button>
      </li>
      <li class="relative ps-7">
        <span aria-hidden="true" class="absolute start-[7px] top-6 h-[calc(100%-1rem)] w-px bg-border"></span>
        <span aria-hidden="true" class="absolute start-1 top-[15px] h-2 w-2 rounded-full border border-transparent ring-4 ring-card bg-emerald-500"></span>
        <button type="button" aria-expanded="false" aria-controls="_R_0_-query" class="flex w-full items-center gap-2.5 rounded-lg py-2 ps-1 pe-2 text-start transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true">
            <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
            <path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
            <path d="M3 12A9 3 0 0 0 21 12"></path>
          </svg>
          <span class="min-w-0 flex-1 truncate text-sm"><span class="sr-only">Database, Finished: </span>Aggregate lost ARR by seat band</span>
          <span class="shrink-0 font-mono text-[11px] text-muted-foreground">2.7s</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform rtl:rotate-180" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </button>
      </li>
      <li class="relative ps-7">
        <span aria-hidden="true" class="absolute start-[7px] top-6 h-[calc(100%-1rem)] w-px bg-border"></span>
        <span aria-hidden="true" class="absolute start-1 top-[15px] h-2 w-2 rounded-full border border-transparent ring-4 ring-card bg-primary motion-safe:animate-pulse"></span>
        <button type="button" aria-expanded="true" aria-controls="_R_0_-verify" class="flex w-full items-center gap-2.5 rounded-lg py-2 ps-1 pe-2 text-start transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true">
            <path d="m18 16 4-4-4-4"></path>
            <path d="m6 8-4 4 4 4"></path>
            <path d="m14.5 4-5 16"></path>
          </svg>
          <span class="min-w-0 flex-1 truncate text-sm"><span class="sr-only">Code, In progress: </span>Test whether one account explains the spike</span>
          <span class="shrink-0 font-mono text-[11px] text-muted-foreground">0.9s</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform rotate-90" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </button>
        <div id="_R_0_-verify" class="mb-1 ms-1 rounded-lg border-s-2 border-border bg-muted/40 px-3 py-2 text-xs leading-relaxed text-muted-foreground">Dropping the largest single cancellation moves the under-20 figure from 6.1% to 5.4%. The pattern holds, so it is a cohort effect and not an outlier.</div>
      </li>
      <li class="relative ps-7">
        <span aria-hidden="true" class="absolute start-1 top-[15px] h-2 w-2 rounded-full border border-transparent ring-4 ring-card bg-muted-foreground/40"></span>
        <button type="button" aria-expanded="false" aria-controls="_R_0_-cite" class="flex w-full items-center gap-2.5 rounded-lg py-2 ps-1 pe-2 text-start transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
            <path d="M2 12h20"></path>
          </svg>
          <span class="min-w-0 flex-1 truncate text-sm"><span class="sr-only">Web search, Not started: </span>Pull exit-survey text for the same accounts</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform rtl:rotate-180" aria-hidden="true">
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </button>
      </li>
    </ol>
  </details>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in Agent Reasoning

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Agent Reasoning

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Agent Reasoning blocks

View category

Tool Call Chips

Dense tool invocations that open into their arguments and result, with status carried by icon and word rather than colour, and errors marked as alerts only once the user opens them.

Agent Reasoning258 lines1 dep10 Sept

Quarterly churn review

2 of 5 complete · 1 failed

Complete: Pull cancellations for Q3
2,481 rows from warehouse.subscriptions
2.7s
Complete: Join to account seat counts
Matched 2,463 of 2,481 — 18 accounts deleted
1.4s
Failed: Fetch exit-survey responses
CRM returned 429 — rate limited after 40 of 300
Running: Score accounts by churn risk
Running the model over the joined cohort
62%
Queued: Draft the summary

Live Agent Task List

Run status as rows — done, running, failed, queued — with native progress elements, per-task retry buttons that name their task, and progress announced from one small status region instead of every row.

Agent Reasoning234 lines1 dep

Working Indicator with Elapsed Time

The gap before the first token: a shimmer grid, a phase label that advances as the wait lengthens, and a running counter — which is the only honest answer to "is it stuck". The timer is hidden from the live region on purpose.

Agent Reasoning120 lines1 dep

Deploy api-gateway to staging

Paused on step 3 of 5 · 211s · $0.14 spent so far

Read the deploy manifest — Done
infra/deploy.yaml, 240 lines
Resolve the image tag — Recovered
Registry timed out; used the digest pinned in the lockfile instead.
Recovered — what the later steps used came from the fallback, not from the registry.
Apply the migration — Failed
Blocked. The migration wants a lock the reporting job is holding.
- Attempt 1Lock not available after 60s60s · $0.04
- Attempt 2Lock not available after 60s60s · $0.04
- Attempt 3Lock not available after 60s60s · $0.04
Restart the workers — Waiting
Not started — blocked by the step above.
Verify the health check — Waiting
Not started.

Apply the migration could not complete

What the tool returned

ERROR: could not obtain lock on relation "orders" (SQLSTATE 55P03)
  detail: process 4417 holds AccessExclusiveLock
  hint: retrying will queue behind the same lock

What the agent thinks that means

The nightly reporting job took an exclusive lock on orders at 02:00 and has not released it. Retrying as-is will queue behind the same lock and time out again. Either wait for that job, or run the migration with a lock timeout and accept a partial apply.

Failed Run Trace

The trace after something broke: retries counted in the open with what each one cost, a step that was silently worked around drawn in amber rather than green, and the raw error kept apart from the agent’s reading of it.

Agent Reasoning337 lines1 dep2 Sept

What it tried before this answer

A retried step that is invisible reads as a slow agent. A retried step that is shown reads as a careful one, and it is the same run either way.

Agent Retry Log

What the agent tried, what failed, and what it did about it — the run history a user needs before they trust a second attempt.

Agent Reasoning153 linesNo deps10 Sept

What this run cost

Per step, not per month. A bill that only arrives in aggregate cannot be acted on — the useful version says which step was expensive and whether it needed to be.

Agent Cost Breakdown

What one run cost, per step, so an expensive answer is attributable rather than a monthly surprise.

Agent Reasoning149 linesNo deps10 Sept