Agents

Everything an agent interface needs: composers, streamed conversations, reasoning, tool calls, working indicators, approvals, code diffs, and session history.

Components

Composed UI blocks you drop into a product: layouts, navigation, guidance, and actions.

Composer

Prompt Composer

The message field an agent conversation is driven from, with attachments, tools, a model picker, and a send button that becomes stop while the agent responds.

Conversation

Chat

A full agent conversation: user turns, reasoning summaries, formatted responses with actions, and a docked composer.

Streaming Response

An agent response that writes itself in, word by word, with a live caret, a stop control, and actions once it settles.

Activity

Reasoning

The agent's thinking, shown live while it works and folded into a one-line summary once it answers.

Tool Calls

Each tool the agent invokes, with its target, live status, duration, and the input and output behind it.

PlannerThinkingmigration order12s
ResearcherSearching4 sources41s
WriterWritingMIGRATION.md1m 08s
TesterRunningpnpm test db23s
DeployerNeeds approvalprisma migrate deploy

Working Indicator

Motion that tells the user the agent is busy and what kind of work it is doing, without a spinner in sight.

Review

Run this command?

The build fails on missing Node types. The agent wants to add them.

$ pnpm add -D @types/node@22

Modifies package.json and pnpm-lock.yaml
Downloads from registry.npmjs.org

Approval

A pause where the agent asks before acting: running a command, touching files, or executing a plan.

@@ -1,4 +1,5 @@
1	1	import { issue } from './issue';
2	2	import type { Token } from './token';
	3	Added:
	4	Added: const GRACE_MS = 30_000;
3	5

@@ -40,6 +42,8 @@ export async function refreshSession
40	42	export async function refreshSession(token: Token) {
41		Removed: if (token.expiresAt < Date.now()) return null;
	43	Added: const now = Date.now();
	44	Added: // Allow a short grace window so in-flight requests can still refresh.
	45	Added: if (token.expiresAt + GRACE_MS <= now) return null;
42	46	return issue(token.userId);
43		Removed: }
	47	Added: }

Code Diff

Edits the agent proposes, shown as line-level diffs the user can keep or undo per file or all at once.

Sessions

History

Past conversations grouped by recency, ready to reopen, rename, or remove.

Sessions

Agent sessions running in the background, each with its live state, progress, and anything waiting on the user.

Utility

Hooks, helpers, and scripts the package's components rely on.

Streaming

Elapsed

A hook that counts the seconds since an agent started working and formats them as 12s or 1m 04s.

Text Stream

A hook that reveals text in word-sized steps at a steady pace, for replaying or smoothing a streamed agent response.

Skills

Instructions and prompts that teach an agent how to build and maintain this package's UI.

No skills in this package yet.

Templates

Whole pages and starting points assembled from the package's components.

No templates in this package yet.