Reasoning activity / trace block

Live reasoning activity is shown while the assistant is thinking or searching. Trace blocks remain the quieter archived view for detailed reasoning after the step finishes.

Included in the single kansho full pack. Components are not offered as separate installs.

Live reasoning activity

Shown while the assistant is working

Searching "JWT auth vulnerabilities and middleware security best practices"

JWT verification best practices·auth0.com/blog/jwt-security-best-practices

Node.js authentication security guide·owasp.org/www-project-nodejs-goat

JWT attacks · Web Security Academy·portswigger.net/web-security/jwt

Compact thinking state

Before sources appear

Reading repository context

Collapsed (default)

Expanded

Inspecting the schema: invoices.due_date is nullable, so the
filter should also exclude rows where due_date is null. Customer names should
be looked up from customers.name via the customer_id foreign key. I'll cap the
output at 25 rows to keep token cost predictable and add a "show all" suggestion
in the assistant reply if the count exceeds that.

Markdown reasoning stream

I should answer with the safe storage pattern first, then show the exact Route Handler shape because the user mentioned Next.js.

Prefer HttpOnly cookies over localStorage.
Include Secure, SameSite=Lax, and a server-side expiry.
Mention CSRF only after the basic recommendation is clear.

Streaming and error states

Checking the local auth helpers before drafting the final answer.

Stacked alongside tool calls

In a real timeline

The user wants to know which Stripe invoices are overdue.
I should query the Stripe API filtered by status = "open" and due_date < today,
then group by customer so the message draft has one line per account.

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Reasoning activity

components/agent/reasoning-activity.tsx

Component documentation

Reasoning activity

components/agent/reasoning-activity.tsx

Purpose

Shows a collapsible reasoning activity with action, query, sources, running state, and stop control.

Appropriate use

Use for a concise live activity trace when exposing this level of reasoning detail is appropriate.

Example

components/agent/reasoning-activity.tsx has a representative live example in the "Live reasoning activity" section on /components/trace-block.

States

Supports running or complete presentation, controlled initial expansion, optional query and sources, and complete or active source rows.

API and props

ReasoningActivity accepts thoughtFor, action, query, sources, expanded, running, onStop, and className.

Dependencies

Direct imports are React, Lucide icons, StatusGlyph, Disclosure, and cn.

Accessibility

Disclosure supplies keyboard and expanded-state semantics; source titles remain visible and Stop is a native button when supplied.

Limitations

expanded is used as an initial disclosure value rather than a controlled prop; the host owns activity updates and stop results.

Source

Source: components/agent/reasoning-activity.tsx.

Full pack

components/agent/reasoning-activity.tsx is documented at /components/trace-block and installs only through the single Kansho full pack; no individual component install is offered.

Trace Block

components/agent/trace-block.tsx

Purpose

Applies a dashed archived-trace skin to ThinkingProcess with a required numeric duration.

Appropriate use

Use for a concise reasoning trace that should visually recede from the primary response.

Example

components/agent/trace-block.tsx has a representative live example in the "Collapsed (default)" section on /components/trace-block.

States

Statuses are thinking, complete, or error; content can be plain body text or React children and disclosure may start open.

API and props

TraceBlock accepts thoughtForMs, body, children, defaultOpen, status, label, and className.

Dependencies

Direct imports are React and ThinkingProcess.

Accessibility

It inherits ThinkingProcess disclosure and status behavior; visible labels and elapsed text carry meaning.

Limitations

It is a thin presentational adapter and does not expose the full structured ThinkingProcess step API.

Source

Source: components/agent/trace-block.tsx.

Full pack

components/agent/trace-block.tsx is documented at /components/trace-block and installs only through the single Kansho full pack; no individual component install is offered.