—kit

Thinking

The agent's working state as a log. Steps come from the agent's events, durations from the clock.

# Preview

Demo [scripted]

Press start

# Install

shell
npx shadcn@latest add https://kit.ulasalyesil.com/r/thinking.json

Add @import "../styles/hud.css"; to your global CSS, after @import "tailwindcss". Zero dependencies beyond React.

# Usage

tsx
import { Thinking } from "@/components/ui/thinking";

<Thinking
  state="thinking"
  startedAt={turnStartedAt}
  steps={[
    { id: "r1", label: "REASONING", status: "done", startedAt: t0, endedAt: t1 },
    { id: "t1", label: "TOOL SEARCH", status: "active", startedAt: t1 },
  ]}
/>

# Props

PropTypeDefaultDescription
state"thinking" | "done" | "error"Done folds to THOUGHT [4.1s] · 3 STEPS behind a real button.
stepsThinkingStep[]{ id, label, status, startedAt?, endedAt? }. Labels come from data, never a script.
startedAtnumberWithout it there is no ELAPSED reading.
endedAtnumberSettles ELAPSED and the folded duration.
tokensnumberReasoning tokens from server usage. Without it there is no TOKENS reading. Never estimated.
collapseOnDonebooleantrueFold to one line when done.
defaultOpenbooleanfalseStart unfolded.
clock() => numberperformance.nowTimebase for every time prop.

# Presets

Done thinking, 3 steps
Folded<Thinking state="done" steps={steps} startedAt={0} endedAt={4100} />
Thinking
  1. 001REASONING
  2. 002TOOL SEARCH
  3. 003WRITING
Steps
[3]
Done thinking, 3 steps
Log, no timings<Thinking state="done" collapseOnDone={false} steps={steps} />

# Agent prompt

Paste into Claude Code, Cursor or any coding agent to wire it in.

prompt
Add the —kit Thinking component to this project.
1. Run: npx shadcn@latest add https://kit.ulasalyesil.com/r/thinking.json
2. Make sure the global CSS imports styles/hud.css after tailwindcss.
3. Import: import { Thinking } from "@/components/ui/thinking";
4. Props:
   - state: "thinking" | "done" | "error". Done folds to THOUGHT [4.1s] · 3 STEPS behind a real button.
   - steps: ThinkingStep[]. { id, label, status, startedAt?, endedAt? }. Labels come from data, never a script.
   - startedAt: number. Without it there is no ELAPSED reading.
   - endedAt: number. Settles ELAPSED and the folded duration.
   - tokens: number. Reasoning tokens from server usage. Without it there is no TOKENS reading. Never estimated.
   - collapseOnDone: boolean. Fold to one line when done.
   - defaultOpen: boolean. Start unfolded.
   - clock: () => number. Timebase for every time prop.
5. Truth rule: only pass values you actually have. Leave a prop out rather than
   passing a placeholder; its readout will not render.
6. With the Vercel AI SDK: npx shadcn@latest add https://kit.ulasalyesil.com/r/ai-sdk.json
   then: const turn = useKitTurn({ message: lastAssistant, status })