From d37eff6ddd08863cb192413536fffd7d50bbf08c Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Fri, 23 Oct 2026 09:36:39 +0700
Subject: [PATCH 1/4] feat(agents-builder): rail and ring status indicators

- `statusIndicator: 'rail' | 'rings'` on AgentsBuilder (default `rail`)
  picks how the sidebar and run panel show an agent's state
- Rail: each agent's stretch of its project rail lights up, seamless and
  centred on the line: a light travels down it while running, amber or
  blue breathes while waiting, red holds on failure, dashed when queued
- Rail, collapsed: a slim capsule beside each agent's square, the same
  size for every state, no words, nothing once a run is done
- Rings: a ring before each name whose arc is the run's progress; in the
  collapsed rail it circles the initials, with the tag word below
- `AgentSummary.progress` (0 to 1) feeds the arc; the template fills it
  from plan steps while a run plays
- Run panel status lines, header, and "Run complete" use the chosen
  indicator; in-flight names and initials keep their shimmer
---
 packages/ui/registry.json                     |  16 +
 .../agents-builder/agent-run-panel.tsx        | 100 +++----
 .../agents-builder/agent-status.tsx           | 273 ++++++++++++++----
 .../components/agents-builder/agent-view.tsx  |   7 +-
 .../agents-builder/agents-builder-context.tsx |   5 +-
 .../agents-builder/agents-builder.tsx         |  11 +-
 .../src/components/agents-builder/fixtures.ts |   8 +-
 .../ui/src/components/agents-builder/index.ts |   1 +
 .../src/components/agents-builder/sidebar.tsx | 130 +++++++--
 .../ui/src/components/agents-builder/types.ts |  12 +
 .../agents-builder/use-agent-run.ts           |   7 +
 .../ui/src/stories/AgentsBuilder.stories.tsx  |  14 +
 packages/ui/src/styles/globals.css            |  18 ++
 packages/ui/src/theme.ts                      |  10 +
 14 files changed, 464 insertions(+), 148 deletions(-)

diff --git a/packages/ui/registry.json b/packages/ui/registry.json
index 2d19508..8b5ea30 100644
--- a/packages/ui/registry.json
+++ b/packages/ui/registry.json
@@ -414,6 +414,22 @@
             "opacity": "0.95"
           }
         },
+        "@keyframes agent-rail-travel": {
+          "from": {
+            "top": "-1rem"
+          },
+          "to": {
+            "top": "100%"
+          }
+        },
+        "@keyframes agent-pill-breathe": {
+          "0%, 100%": {
+            "transform": "scaleY(0.55)"
+          },
+          "50%": {
+            "transform": "scaleY(1)"
+          }
+        },
         "@keyframes ai-fade-up": {
           "from": {
             "opacity": "0",
diff --git a/packages/ui/src/components/agents-builder/agent-run-panel.tsx b/packages/ui/src/components/agents-builder/agent-run-panel.tsx
index 35720d6..811cac9 100644
--- a/packages/ui/src/components/agents-builder/agent-run-panel.tsx
+++ b/packages/ui/src/components/agents-builder/agent-run-panel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Bot, Check, ChevronRight, CircleAlert, Clock3, Hand, MessageCircleQuestion, RotateCcw, Sparkles, Square, Zap } from 'lucide-react';
+import { Bot, Check, ChevronRight, RotateCcw, Sparkles, Square, Zap } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '../../lib/utils';
@@ -17,6 +17,7 @@ import { ThinkingStatus } from '../ai/thinking-status';
 import { ToolTrace } from '../ai/tool-trace';
 import { Button } from '../button';
 import { Spinner } from '../spinner';
+import { type StatusSignal, StatusGlyph, StatusLabel } from './agent-status';
 import { useAgentsBuilder } from './agents-builder-context';
 import { Composer } from './composer';
 import { IntegrationMark } from './integration-mark';
@@ -25,30 +26,28 @@ import { useLatest } from '../workspace-kit/use-latest';
 import { RevealText } from './reveal-text';
 import { usePlaybackClock } from './playback';
 import type { AgentRunScript, RunApproval, RunFailure, RunQuery, RunQuestion, ToolStep } from './types';
-import { type AgentRunState, RUN_TIMING, type RunGroupPlay } from './use-agent-run';
+import { type AgentRunState, RUN_TIMING, type RunGroupPlay, runProgress } from './use-agent-run';
 
 const GROUP_ICON = { subagents: <Bot />, skills: <Sparkles /> } as const;
 const GROUP_NOUN = { subagents: ['agent', 'agents'], skills: ['skill', 'skills'] } as const;
 
-// Status lines for the cards a run stops on. Static, so they are built once.
-const APPROVAL_EYEBROW = (
-	<>
-		<Hand aria-hidden="true" className="text-warning-foreground" />
-		Waiting for your approval
-	</>
-);
-const QUESTION_EYEBROW = (
-	<>
-		<MessageCircleQuestion aria-hidden="true" className="text-primary" />
-		Waiting for your answer
-	</>
-);
-const QUEUED_EYEBROW = (
-	<>
-		<Clock3 aria-hidden="true" />
-		Queued
-	</>
-);
+/**
+ * The line above a card a run stops on: the state's pixel mark, then the
+ * sentence in the state's tone, the one coloured line on the card.
+ */
+function StatusLine({ signal, children }: { signal: StatusSignal; children: React.ReactNode }) {
+	const { statusIndicator } = useAgentsBuilder();
+	return (
+		<StatusLabel indicator={statusIndicator} signal={signal} className="shrink-0">
+			{children}
+		</StatusLabel>
+	);
+}
+
+// Static, so they are built once.
+const APPROVAL_EYEBROW = <StatusLine signal="approval">Waiting for your approval</StatusLine>;
+const QUESTION_EYEBROW = <StatusLine signal="input">Waiting for your answer</StatusLine>;
+const QUEUED_EYEBROW = <StatusLine signal="queued">Queued</StatusLine>;
 
 type RunGroupProps = {
 	group: AgentRunScript['groups'][number];
@@ -329,8 +328,8 @@ function FailureBlock({ failure, step, onRetry }: { failure: RunFailure; step?:
 		<StopCard
 			eyebrow={
 				<>
-					<CircleAlert aria-hidden="true" className="text-destructive" />
-					<span className="truncate">{step ? `Failed at ${step.label}` : 'Run failed'}</span>
+					<StatusLine signal="failed">{step ? 'Failed at' : 'Run failed'}</StatusLine>
+					{step ? <span className="min-w-0 truncate">{step.label}</span> : null}
 				</>
 			}
 			title={failure.message}
@@ -361,12 +360,12 @@ function QueuedBlock({ note, plan, onStart }: { note?: string; plan?: string[];
 			{plan?.length ? (
 				<div className="flex flex-col gap-1">
 					<p className="text-xs text-muted-foreground">Up next</p>
-					{/* Hung from one rail, like the tool trace, with every step still to come. */}
-					<ol className="ms-2 flex flex-col border-s border-subtle-foreground/25">
+					{/* Hung from a rail like the tool trace's, dashed because none of it has run yet, with each number zero-padded. */}
+					<ol className="ms-2 flex flex-col border-s border-dashed border-subtle-foreground/35">
 						{plan.map((step, index) => (
 							<li key={step} className="flex min-h-7 items-center gap-2 ps-3 text-[0.8125rem] text-muted-foreground">
-								<span aria-hidden="true" className="w-3 shrink-0 text-xs text-subtle-foreground tabular-nums">
-									{index + 1}
+								<span aria-hidden="true" className="shrink-0 font-mono text-[0.6875rem] text-subtle-foreground tabular-nums">
+									{String(index + 1).padStart(2, '0')}
 								</span>
 								<span className="min-w-0 [overflow-wrap:anywhere]">{step}</span>
 							</li>
@@ -378,7 +377,8 @@ function QueuedBlock({ note, plan, onStart }: { note?: string; plan?: string[];
 	);
 }
 
-function CommandBar({ script, phase, onStop }: { script: AgentRunScript; phase: RunPhase; onStop: () => void }) {
+function CommandBar({ script, phase, progress, onStop }: { script: AgentRunScript; phase: RunPhase; progress?: number; onStop: () => void }) {
+	const { statusIndicator } = useAgentsBuilder();
 	return (
 		<div className="relative z-10 flex h-[50px] shrink-0 items-center gap-3 rounded-xl bg-card px-3 shadow-card">
 			<p title={`${script.command.verb} ${script.command.skill} ${script.command.scope}`} className="flex min-w-0 flex-1 items-center gap-1.5 text-sm whitespace-nowrap text-foreground">
@@ -390,30 +390,22 @@ function CommandBar({ script, phase, onStop }: { script: AgentRunScript; phase:
 				</ToneBadge>
 				<span title={script.command.scope} className="truncate">{script.command.scope}</span>
 			</p>
-			{phase === 'done' || phase === 'queued' ? (
-				<span className="inline-flex h-6 items-center gap-1 rounded-md bg-muted px-1.5 text-xs text-muted-foreground">
-					{phase === 'done' ? <Check aria-hidden="true" className={cn('size-3', iconEnterClass)} /> : <Clock3 aria-hidden="true" className="size-3" />}
-					{phase === 'done' ? 'Done' : 'Queued'}
+			{phase === 'running' ? (
+				<span className="flex shrink-0 items-center gap-2.5">
+					<StatusGlyph indicator={statusIndicator} signal="running" progress={progress} />
+					<TooltipIconButton
+						label="Stop run"
+						size="sm"
+						className="bg-foreground text-background hover:bg-foreground/90 hover:text-background"
+						onClick={onStop}
+					>
+						<Square aria-hidden="true" className="size-2.5 fill-current" />
+					</TooltipIconButton>
 				</span>
-			) : phase === 'approval' || phase === 'input' ? (
-				<ToneBadge tone={phase === 'approval' ? 'warning' : 'primary'} className="h-6">
-					{phase === 'approval' ? <Hand aria-hidden="true" /> : <MessageCircleQuestion aria-hidden="true" />}
-					Needs you
-				</ToneBadge>
-			) : phase === 'failed' ? (
-				<ToneBadge tone="danger" className="h-6">
-					<CircleAlert aria-hidden="true" />
-					Failed
-				</ToneBadge>
 			) : (
-				<TooltipIconButton
-					label="Stop run"
-					size="sm"
-					className="bg-foreground text-background hover:bg-foreground/90 hover:text-background"
-					onClick={onStop}
-				>
-					<Square aria-hidden="true" className="size-2.5 fill-current" />
-				</TooltipIconButton>
+				<StatusLabel indicator={statusIndicator} signal={phase} progress={progress} className="shrink-0 text-xs">
+					{RUN_PHASE_WORD[phase]}
+				</StatusLabel>
 			)}
 		</div>
 	);
@@ -422,6 +414,9 @@ function CommandBar({ script, phase, onStop }: { script: AgentRunScript; phase:
 /** Where the run stands, as the sidebar roster shows it. */
 type RunPhase = 'queued' | 'running' | 'approval' | 'input' | 'failed' | 'done';
 
+/** The header tag's word once the run stops. Both waits read the same here; the card below says which. */
+const RUN_PHASE_WORD = { queued: 'Queued', approval: 'Needs you', input: 'Needs you', failed: 'Failed', done: 'Done' } as const;
+
 type AgentRunPanelProps = {
 	script: AgentRunScript;
 	state: AgentRunState;
@@ -456,7 +451,7 @@ function AgentRunPanel({
 	onStart,
 	onRetry,
 }: AgentRunPanelProps) {
-	const { integration, emit, currentAgent } = useAgentsBuilder();
+	const { integration, emit, currentAgent, statusIndicator } = useAgentsBuilder();
 	const agentId = currentAgent.agent.id;
 	const [followUps, setFollowUps] = React.useState<string[]>([]);
 	// A past run settled its gate long ago: approved, or answered with the first options.
@@ -516,6 +511,7 @@ function AgentRunPanel({
 				<CommandBar
 					script={script}
 					phase={phase}
+					progress={runProgress(script, state)}
 					onStop={() => {
 						onStop();
 						emit({ type: 'stop-run' });
@@ -638,7 +634,7 @@ function AgentRunPanel({
 						{complete ? (
 							<div className={cn('flex items-center justify-between gap-2 px-3', enterClass)}>
 								<p className="flex h-7 items-center gap-2 text-[0.8125rem] text-muted-foreground">
-									<Check aria-hidden="true" className="size-3.5" />
+									<StatusGlyph indicator={statusIndicator} signal="done" />
 									Run complete
 								</p>
 								<FeedbackBar showRegenerate={false} copyText={script.findings?.paragraphs.join('\n\n')} />
diff --git a/packages/ui/src/components/agents-builder/agent-status.tsx b/packages/ui/src/components/agents-builder/agent-status.tsx
index 5c579c1..70cd9f2 100644
--- a/packages/ui/src/components/agents-builder/agent-status.tsx
+++ b/packages/ui/src/components/agents-builder/agent-status.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import * as React from 'react';
+
 import { cn } from '../../lib/utils';
-import type { AgentStatus, AgentSummary } from './types';
+import type { AgentStatus, AgentStatusIndicator, AgentSummary } from './types';
 
 /** Resolves the deprecated `running` flag into a status. */
 function agentStatus(agent: AgentSummary): AgentStatus {
@@ -51,87 +53,226 @@ type TaggedStatus = keyof typeof TAG_WORD;
 function hasStatusTag(status: AgentStatus): status is TaggedStatus {
 	return status in TAG_WORD;
 }
-/** The state's colour, only ever mixed in faintly: the tag stays nearly monochrome. */
-const TAG_TONE = {
-	approval: '[--tag:var(--warning)]',
-	input: '[--tag:var(--primary)]',
-	failed: '[--tag:var(--destructive)]',
-	queued: '[--tag:var(--muted-foreground)]',
+
+/** A state an indicator draws: an agent's status, or a finished run whose result waits to be read. */
+type StatusSignal = AgentStatus | 'done';
+
+/** What the roster draws for an agent: its status, or `done` while a fresh result is unread. */
+function agentSignal(agent: AgentSummary): StatusSignal {
+	const status = agentStatus(agent);
+	return status === 'idle' && agent.unread ? 'done' : status;
+}
+
+/** Colour belongs to the states that need you; everything else stays grey. */
+const SIGNAL_TONE: Partial<Record<StatusSignal, string>> = {
+	approval: 'var(--warning)',
+	input: 'var(--primary)',
+	failed: 'var(--destructive)',
+};
+
+/** Sets `--tone` for a toned state; calm states set nothing. */
+function toneStyle(signal: StatusSignal): React.CSSProperties | undefined {
+	const tone = SIGNAL_TONE[signal];
+	return tone ? ({ '--tone': tone } as React.CSSProperties) : undefined;
+}
+
+/** Text in the state's tone, mixed toward the text colour so it holds contrast in both themes. */
+const toneTextClass = 'text-[color-mix(in_oklab,var(--tone),var(--foreground)_28%)]';
+
+const RAIL_PLACEMENT = {
+	// Centred on a project's rail line: the list's 1px border, then 6px of padding before the row, so
+	// the line's centre is 6.5px before the row and a 2px bar starts 7.5px before it, overhanging the
+	// line by half a pixel each side. It reaches 1px past each end, half the 2px gap between rows, so
+	// neighbouring stretches meet.
+	rail: 'absolute -inset-y-px -start-[7.5px] w-0.5',
+	edge: 'absolute inset-y-1.5 start-0 w-0.5',
+	inline: 'relative h-3.5 w-0.5 shrink-0',
+	// A slim capsule 3px before the box it sits beside, centred on it. Every state draws the same size.
+	pill: 'absolute top-1/2 -start-[5px] h-5 w-0.5 -translate-y-1/2',
 } as const;
 
+type SignalRailProps = {
+	signal: StatusSignal;
+	/**
+	 * `rail` lies on the line a project's rows hang from; `edge` draws at the
+	 * row's own start edge where no line runs; `inline` is a short bar beside
+	 * text, as in a status line; `pill` is a capsule beside a square, as in
+	 * the icon rail.
+	 */
+	placement?: keyof typeof RAIL_PLACEMENT;
+	className?: string;
+};
+
 /**
- * What an agent needs from you, as one word: a tag shaped like a drop, sharp
- * at the corner nearest the name or initials it belongs to, with off-white
- * text and a faint wash of the state's colour. Light theme fills it with a
- * translucent mid grey so the light text holds; dark theme keeps it dark
- * with a tinted edge. An open run's border shimmers like its name; a failed
- * run's border holds still. A queued run gets the same shape as an outline
- * only, quieter than anything that needs you. Nothing for other agents.
+ * A stretch of rail as a status channel. While a run goes a light travels
+ * down it; waiting on you it becomes a bar in the state's tone that breathes;
+ * a failure holds the bar still; a queued run is dashed. An idle agent, or one
+ * whose run has finished, draws nothing and leaves the rail as it is.
  */
-function AgentStatusTag({ status }: { status: AgentStatus }) {
-	if (!hasStatusTag(status)) return null;
-	if (status === 'queued') {
+function SignalRail({ signal, placement = 'rail', className }: SignalRailProps) {
+	if (signal === 'idle' || signal === 'done') return null;
+	if (placement === 'pill') {
 		return (
-			<span
-				aria-hidden="true"
-				className="rounded-[7px] rounded-ss-[2px] border border-subtle-foreground/35 px-1 text-[0.5625rem] leading-[13px] font-medium tracking-tight whitespace-nowrap text-muted-foreground"
-			>
-				{TAG_WORD.queued}
+			<span aria-hidden="true" data-slot="signal-rail" data-signal={signal} style={toneStyle(signal)} className={cn(RAIL_PLACEMENT.pill, className)}>
+				<span
+					className={cn(
+						'absolute inset-0 rounded-full',
+						signal === 'running'
+							? 'bg-muted-foreground animate-[agent-pill-breathe_1.6s_ease-in-out_infinite] motion-reduce:animate-none'
+							: signal === 'queued'
+								? 'bg-[repeating-linear-gradient(to_bottom,var(--subtle-foreground)_0_2px,transparent_2px_4px)]'
+								: cn('bg-(--tone)', signal !== 'failed' && 'animate-pulse motion-reduce:animate-none'),
+					)}
+				/>
 			</span>
 		);
 	}
+	return (
+		<span aria-hidden="true" data-slot="signal-rail" data-signal={signal} style={toneStyle(signal)} className={cn(RAIL_PLACEMENT[placement], className)}>
+			{signal === 'running' ? (
+				// On the rail the project's own line is the track, so only the light is drawn over it.
+				<span
+					className={cn(
+						'absolute inset-y-0 left-1/2 w-px -translate-x-1/2 overflow-hidden',
+						placement !== 'rail' && 'bg-[color-mix(in_oklab,var(--foreground)_14%,transparent)]',
+					)}
+				>
+					<span className="absolute inset-x-0 h-4 bg-[linear-gradient(to_bottom,transparent,var(--foreground),transparent)] animate-[agent-rail-travel_1.6s_cubic-bezier(0.45,0,0.55,1)_infinite] motion-reduce:top-1/2 motion-reduce:h-1 motion-reduce:animate-none" />
+				</span>
+			) : signal === 'queued' ? (
+				// On the rail the gaps take the sidebar's colour so they cut its line; elsewhere they are clear.
+				<span
+					className={cn(
+						'absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[repeating-linear-gradient(to_bottom,var(--subtle-foreground)_0_2px,var(--rail-gap)_2px_5px)]',
+						placement === 'rail' ? '[--rail-gap:var(--sidebar)]' : '[--rail-gap:transparent]',
+					)}
+				/>
+			) : (
+				<span
+					className={cn(
+						// On the rail the bar fills its stretch with square ends, so it joins the line and its neighbours without a seam.
+						'absolute inset-0',
+						placement === 'rail' ? 'rounded-none' : 'rounded-full',
+						'bg-(--tone) shadow-[0_0_6px_color-mix(in_oklab,var(--tone)_45%,transparent)]',
+						signal !== 'failed' && 'animate-pulse motion-reduce:animate-none',
+					)}
+				/>
+			)}
+		</span>
+	);
+}
+
+const RING_SIZE = {
+	sm: { box: 14, r: 5.25, className: 'size-3.5' },
+	lg: { box: 24, r: 11, className: 'size-6' },
+} as const;
+
+type AgentRingProps = {
+	signal: StatusSignal;
+	/** How far the run got, from 0 to 1. Without it a stop closes the ring and a run only spins. */
+	progress?: number;
+	/** `sm`: a 14px glyph before a name. `lg`: a 24px ring round the initials in the icon rail. */
+	size?: keyof typeof RING_SIZE;
+	/** Drawn inside an `lg` ring, e.g. the initials. */
+	children?: React.ReactNode;
+	className?: string;
+};
+
+/**
+ * One drawn circle for every state, and its arc is how far the run got. A
+ * running ring spins a short highlight over the arc; a stop holds the arc in
+ * its tone with a centre dot, breathing while it waits on you; queued is a
+ * dashed ring; a fresh result closes the ring round a check; idle is the
+ * empty track.
+ */
+function AgentRing({ signal, progress, size = 'sm', children, className }: AgentRingProps) {
+	const { box, r, className: sizeClass } = RING_SIZE[size];
+	const length = 2 * Math.PI * r;
+	const stopped = signal === 'approval' || signal === 'input' || signal === 'failed';
+	const arc = signal === 'done' ? 1 : signal === 'running' || stopped ? Math.min(progress ?? (stopped ? 1 : 0), 1) : 0;
+	const circle = { cx: box / 2, cy: box / 2, r, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5 } as const;
 	return (
 		<span
 			aria-hidden="true"
+			data-slot="agent-ring"
+			data-signal={signal}
+			style={toneStyle(signal)}
 			className={cn(
-				'relative flex p-px',
-				TAG_TONE[status],
-				// Light: a mid grey with a little hue, translucent but dark enough that off-white text clears 4.5:1 on the sidebar.
-				'[--tag-fill:color-mix(in_oklab,color-mix(in_oklab,var(--tag)_16%,var(--muted-foreground))_94%,transparent)]',
-				'[--tag-edge:color-mix(in_oklab,color-mix(in_oklab,var(--tag)_20%,var(--muted-foreground))_45%,transparent)]',
-				'[--tag-glint:color-mix(in_oklab,var(--tag)_20%,var(--sidebar))]',
-				// Dark: an opaque dark fill, so in the rail it still covers the row's edge, with a softer tinted edge.
-				'dark:[--tag-fill:color-mix(in_oklab,var(--tag)_7%,var(--sidebar))]',
-				'dark:[--tag-edge:color-mix(in_oklab,var(--tag)_28%,transparent)]',
-				'dark:[--tag-glint:color-mix(in_oklab,var(--tag)_50%,var(--foreground))]',
+				'relative grid shrink-0 place-items-center',
+				sizeClass,
+				SIGNAL_TONE[signal] ? 'text-(--tone)' : signal === 'idle' ? 'text-subtle-foreground' : signal === 'done' ? 'text-foreground' : 'text-muted-foreground',
+				className,
 			)}
 		>
-			{/* The border: a ring masked to its 1px padding, so it sweeps like text shimmer without showing through the fill. */}
-			<span
-				className={cn(
-					'absolute inset-0 rounded-[7px] rounded-ss-[2px] p-px [mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] [mask-composite:exclude]',
-					isWaitingOnYou(status)
-						? [
-								'bg-[linear-gradient(90deg,var(--tag-edge)_30%,var(--tag-glint)_50%,var(--tag-edge)_70%)]',
-								'bg-size-[200%_100%] animate-[ai-shimmer-text_1.4s_linear_infinite]',
-								'motion-reduce:animate-none motion-reduce:bg-none motion-reduce:bg-(--tag-edge)',
-							]
-						: 'bg-(--tag-edge)',
-				)}
-			/>
-			{/* Inner radius = outer radius - the 1px ring, so the border keeps an even width round the curve. */}
-			<span className="relative rounded-[6px] rounded-ss-[1px] bg-(--tag-fill) px-1 text-[0.5625rem] leading-[13px] font-medium tracking-tight whitespace-nowrap text-[color-mix(in_oklab,var(--tag)_6%,white)]">
-				{TAG_WORD[status]}
-			</span>
+			<svg viewBox={`0 0 ${box} ${box}`} className="absolute inset-0 size-full -rotate-90">
+				<circle {...circle} strokeDasharray={signal === 'queued' ? '1.6 2' : undefined} opacity={signal === 'queued' ? 0.7 : 0.22} />
+				{arc > 0 ? (
+					<circle
+						{...circle}
+						strokeLinecap="round"
+						strokeDasharray={`${length * arc} ${length}`}
+						className="transition-[stroke-dasharray] duration-(--duration-slow) ease-(--ease-out) motion-reduce:transition-none"
+					/>
+				) : null}
+			</svg>
+			{signal === 'running' ? (
+				<svg viewBox={`0 0 ${box} ${box}`} className="absolute inset-0 size-full animate-spin text-foreground [animation-duration:1.2s] motion-reduce:hidden">
+					<circle {...circle} strokeLinecap="round" strokeDasharray={`${length * 0.14} ${length}`} />
+				</svg>
+			) : null}
+			{size === 'lg' ? (
+				children
+			) : stopped ? (
+				<span className={cn('size-1 rounded-full bg-current', signal !== 'failed' && 'animate-pulse motion-reduce:animate-none')} />
+			) : signal === 'done' ? (
+				<svg viewBox="0 0 14 14" className="absolute inset-0 size-full">
+					<path d="M4.6 7.2 6.3 8.9 9.5 5.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+				</svg>
+			) : null}
+		</span>
+	);
+}
+
+type StatusLabelProps = Omit<React.ComponentProps<'span'>, 'children'> & {
+	indicator: AgentStatusIndicator;
+	signal: StatusSignal;
+	progress?: number;
+	children: React.ReactNode;
+};
+
+/** A state's glyph in the chosen indicator: a ring, or a short bar of rail. */
+function StatusGlyph({ indicator, signal, progress }: Pick<StatusLabelProps, 'indicator' | 'signal' | 'progress'>) {
+	return indicator === 'rings' ? <AgentRing signal={signal} progress={progress} /> : <SignalRail signal={signal} placement="inline" />;
+}
+
+/** A state's glyph in the chosen indicator, then its words, in the state's tone when it needs you. */
+function StatusLabel({ indicator, signal, progress, children, className, style, ...props }: StatusLabelProps) {
+	return (
+		<span
+			{...props}
+			style={{ ...toneStyle(signal), ...style }}
+			className={cn('inline-flex min-w-0 items-center gap-1.5 font-medium', SIGNAL_TONE[signal] ? toneTextClass : 'text-muted-foreground', className)}
+		>
+			<StatusGlyph indicator={indicator} signal={signal} progress={progress} />
+			<span className="truncate">{children}</span>
 		</span>
 	);
 }
 
 /**
- * The tag's word on its own, for the collapsed rail, where a boxed tag
- * crowds the initials: small type under them, faintly tinted with the state's
- * colour. It shimmers while the run waits on you, like the initials above it,
- * and holds still once the run has failed or while it is queued.
+ * The tag word on its own, under the initials in the icon rail, in the
+ * state's tone. It shimmers while the run waits on you, like the initials
+ * above it, and holds still once the run has failed or while it is queued.
  */
 function AgentStatusWord({ status }: { status: AgentStatus }) {
 	if (!hasStatusTag(status)) return null;
 	return (
 		<span
 			aria-hidden="true"
+			style={toneStyle(status)}
 			className={cn(
-				'block text-[0.5rem] leading-none font-medium tracking-tight whitespace-nowrap',
-				TAG_TONE[status],
-				status === 'queued' ? '[--word:var(--subtle-foreground)]' : '[--word:color-mix(in_oklab,var(--tag)_40%,var(--muted-foreground))]',
+				'block text-[0.5625rem] leading-none font-medium tracking-tight whitespace-nowrap',
+				status === 'queued' ? '[--word:var(--subtle-foreground)]' : '[--word:color-mix(in_oklab,var(--tone),var(--foreground)_28%)]',
 				isWaitingOnYou(status)
 					? [
 							// Same sweep as TextShimmer: toward the page colour in light, toward the text colour in dark.
@@ -185,4 +326,22 @@ function visibleRoster(agents: AgentSummary[], limit: number): AgentSummary[] {
 	return [...kept, ...promoted];
 }
 
-export { AgentStatusTag, AgentStatusWord, agentLabel, agentStatus, hasStatusTag, isInFlight, isWaitingOnYou, mostUrgentTag, needsAttention, statusPhrase, visibleRoster };
+export {
+	AgentRing,
+	agentLabel,
+	agentSignal,
+	agentStatus,
+	AgentStatusWord,
+	hasStatusTag,
+	isInFlight,
+	isWaitingOnYou,
+	mostUrgentTag,
+	needsAttention,
+	SignalRail,
+	StatusGlyph,
+	StatusLabel,
+	statusPhrase,
+	TAG_WORD,
+	visibleRoster,
+};
+export type { AgentRingProps, SignalRailProps, StatusLabelProps, StatusSignal };
diff --git a/packages/ui/src/components/agents-builder/agent-view.tsx b/packages/ui/src/components/agents-builder/agent-view.tsx
index 97c8d2d..6b05c16 100644
--- a/packages/ui/src/components/agents-builder/agent-view.tsx
+++ b/packages/ui/src/components/agents-builder/agent-view.tsx
@@ -12,7 +12,7 @@ import { AgentsBuilderContext, useAgentsBuilder } from './agents-builder-context
 import { focusRingClass, NavMenuButton, pressClass, TooltipIconButton, useInert } from '../workspace-kit/primitives';
 import { useLatest } from '../workspace-kit/use-latest';
 import type { AgentRunScript, AgentStatus } from './types';
-import { useAgentRun } from './use-agent-run';
+import { runProgress, useAgentRun } from './use-agent-run';
 import { startViewTransition, ViewAnimation } from '../workspace-kit/view-transition';
 
 /** How a run opens. Replay plays it from the start; settled jumps to where it stopped; resolved shows a finished run. */
@@ -58,6 +58,11 @@ function AgentRunSession({ script, start, active, queuedNote, panelOpen, onToggl
 	const [queued, setQueued] = React.useState(start === 'queued');
 	const { state, stop } = useAgentRun(script, { autoplay: start === 'replay' || start === 'queued', paused: queued });
 	const panelRef = useInert<HTMLDivElement>(!panelOpen);
+	const progress = runProgress(script, state);
+	const updateAgentRef = useLatest(updateAgent);
+
+	// The roster's ring follows the run as it goes.
+	React.useEffect(() => updateAgentRef.current(agentId, { progress }), [agentId, progress, updateAgentRef]);
 
 	const onPhaseChange = (phase: RunPhase) => {
 		// A queued agent keeps what the host said about it, e.g. when it starts.
diff --git a/packages/ui/src/components/agents-builder/agents-builder-context.tsx b/packages/ui/src/components/agents-builder/agents-builder-context.tsx
index 7ba34de..fda1550 100644
--- a/packages/ui/src/components/agents-builder/agents-builder-context.tsx
+++ b/packages/ui/src/components/agents-builder/agents-builder-context.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import type {
 	AgentDetail,
+	AgentStatusIndicator,
 	AgentSummary,
 	AgentsBuilderAction,
 	AgentsBuilderData,
@@ -12,7 +13,7 @@ import type {
 	Integration,
 } from './types';
 
-type AgentPatch = Partial<Pick<AgentSummary, 'status' | 'unread' | 'statusNote'>>;
+type AgentPatch = Partial<Pick<AgentSummary, 'status' | 'unread' | 'statusNote' | 'progress'>>;
 
 type ConnectRequest = {
 	integrationId: string;
@@ -39,6 +40,8 @@ type AgentsBuilderContextValue = {
 	/** Opens the agent view for an agent with a detail (the featured one or `agentDetails`); asks the host for any other. */
 	openAgent: (id: string) => void;
 	emit: (action: AgentsBuilderAction) => void;
+	/** How the roster and the run panel show an agent's state. */
+	statusIndicator: AgentStatusIndicator;
 	theme: AgentsBuilderTheme;
 	setTheme: (theme: AgentsBuilderTheme) => void;
 	usageDismissed: boolean;
diff --git a/packages/ui/src/components/agents-builder/agents-builder.tsx b/packages/ui/src/components/agents-builder/agents-builder.tsx
index 080838a..d324b3e 100644
--- a/packages/ui/src/components/agents-builder/agents-builder.tsx
+++ b/packages/ui/src/components/agents-builder/agents-builder.tsx
@@ -15,6 +15,7 @@ import { AgentsBuilderSidebar } from './sidebar';
 import { SkillsView } from './skills-view';
 import type {
 	AgentDetail,
+	AgentStatusIndicator,
 	AgentSummary,
 	AgentsBuilderAction,
 	AgentsBuilderData,
@@ -46,6 +47,12 @@ type AgentsBuilderProps = {
 	 * agents open as they stand: queued, failed, waiting at the decision, or done.
 	 */
 	autoplayRun?: boolean;
+	/**
+	 * How the sidebar and the run panel show an agent's state: `rail` lights
+	 * each agent's stretch of its project's rail, `rings` draws a progress ring
+	 * before each name. Defaults to `rail`.
+	 */
+	statusIndicator?: AgentStatusIndicator;
 	className?: string;
 };
 
@@ -79,6 +86,7 @@ function AgentsBuilder({
 	defaultSidebarCollapsed = false,
 	framed,
 	autoplayRun = true,
+	statusIndicator = 'rail',
 	className,
 }: AgentsBuilderProps) {
 	const [view, setView] = useControllableState<AgentsBuilderView>({
@@ -163,12 +171,13 @@ function AgentsBuilder({
 				} else emit({ type: 'open-agent', agentId: id });
 			},
 			emit,
+			statusIndicator,
 			theme,
 			setTheme,
 			usageDismissed,
 			dismissUsage: () => setUsageDismissed(true),
 		};
-	}, [agentNames, agents, connected, currentAgent, data, details, integrations, onActionRef, setTheme, setView, theme, usageDismissed, view]);
+	}, [agentNames, agents, connected, currentAgent, data, details, integrations, onActionRef, setTheme, setView, statusIndicator, theme, usageDismissed, view]);
 
 	const connect = async (integration: Integration, toolIds: string[]) => {
 		await onConnectIntegration?.(integration, toolIds);
diff --git a/packages/ui/src/components/agents-builder/fixtures.ts b/packages/ui/src/components/agents-builder/fixtures.ts
index d870d51..496f998 100644
--- a/packages/ui/src/components/agents-builder/fixtures.ts
+++ b/packages/ui/src/components/agents-builder/fixtures.ts
@@ -128,10 +128,10 @@ export const DEMO_PROJECTS: AgentProject[] = [
 ];
 
 export const DEMO_AGENTS: AgentSummary[] = [
-	{ id: 'revenue-analyst', projectId: 'revenue', name: 'Revenue Analyst', status: 'approval', statusNote: 'Post the summary to #revenue?' },
-	{ id: 'churn-radar', projectId: 'revenue', name: 'Churn Radar', status: 'running' },
-	{ id: 'data-quality-monitor', projectId: 'data-platform', name: 'Data Quality Monitor', status: 'failed', statusNote: 'Column orders_daily.loaded_at no longer exists.' },
-	{ id: 'schema-steward', projectId: 'data-platform', name: 'Schema Steward', status: 'input', statusNote: 'Which schema should own the new billing tables?' },
+	{ id: 'revenue-analyst', projectId: 'revenue', name: 'Revenue Analyst', status: 'approval', progress: 5 / 6, statusNote: 'Post the summary to #revenue?' },
+	{ id: 'churn-radar', projectId: 'revenue', name: 'Churn Radar', status: 'running', progress: 0.4 },
+	{ id: 'data-quality-monitor', projectId: 'data-platform', name: 'Data Quality Monitor', status: 'failed', progress: 0.5, statusNote: 'Column orders_daily.loaded_at no longer exists.' },
+	{ id: 'schema-steward', projectId: 'data-platform', name: 'Schema Steward', status: 'input', progress: 0.75, statusNote: 'Which schema should own the new billing tables?' },
 	{ id: 'metrics-librarian', projectId: 'data-platform', name: 'Metrics Librarian', unread: true, statusNote: 'Renamed 3 metrics to match the finance glossary.' },
 	{ id: 'forecast-planner', projectId: 'revenue', name: 'Forecast Planner', status: 'queued', statusNote: 'The October forecast starts at 09:30 UTC.' },
 	{ id: 'board-report-writer', projectId: 'revenue', name: 'Board Report Writer' },
diff --git a/packages/ui/src/components/agents-builder/index.ts b/packages/ui/src/components/agents-builder/index.ts
index 50b562a..c36110e 100644
--- a/packages/ui/src/components/agents-builder/index.ts
+++ b/packages/ui/src/components/agents-builder/index.ts
@@ -13,6 +13,7 @@ export type {
 	AgentsBuilderView,
 	AgentProject,
 	AgentStatus,
+	AgentStatusIndicator,
 	AgentSummary,
 	AskBeatOption,
 	AskBeatQuestion,
diff --git a/packages/ui/src/components/agents-builder/sidebar.tsx b/packages/ui/src/components/agents-builder/sidebar.tsx
index 9b17747..bec7597 100644
--- a/packages/ui/src/components/agents-builder/sidebar.tsx
+++ b/packages/ui/src/components/agents-builder/sidebar.tsx
@@ -25,11 +25,28 @@ import { TextShimmer } from '../ai/text-shimmer';
 import { Kbd, KbdGroup } from '../kbd';
 import { NavCount, NavIcon, NavRow } from '../workspace-kit/nav';
 import { focusRingClass, SearchField, TooltipIconButton } from '../workspace-kit/primitives';
-import { AgentStatusTag, AgentStatusWord, agentLabel, agentStatus, hasStatusTag, isInFlight, isWaitingOnYou, mostUrgentTag, needsAttention, statusPhrase, visibleRoster } from './agent-status';
+import {
+	AgentRing,
+	agentLabel,
+	agentSignal,
+	agentStatus,
+	AgentStatusWord,
+	hasStatusTag,
+	isInFlight,
+	isWaitingOnYou,
+	mostUrgentTag,
+	needsAttention,
+	SignalRail,
+	StatusGlyph,
+	StatusLabel,
+	statusPhrase,
+	TAG_WORD,
+	visibleRoster,
+} from './agent-status';
 import { AppPicker } from './app-picker';
 import { useAgentsBuilder } from './agents-builder-context';
 import { IntegrationMark } from './integration-mark';
-import type { AgentProject, AgentSummary } from './types';
+import type { AgentProject, AgentStatusIndicator, AgentSummary } from './types';
 import { WorkspaceMenu } from './workspace-menu';
 
 /** Agents listed before "More agents". */
@@ -37,7 +54,8 @@ const SIDEBAR_AGENT_LIMIT = 6;
 
 /**
  * Agent roster label. Focus and unread results read through weight and colour
- * alone; an agent with an open run shimmers, so activity never needs a dot.
+ * alone; an agent with an open run shimmers while the indicator shows where
+ * it stands.
  */
 function AgentLabel({ agent, open }: { agent: AgentSummary; open: boolean }) {
 	const status = agentStatus(agent);
@@ -56,26 +74,46 @@ function AgentLabel({ agent, open }: { agent: AgentSummary; open: boolean }) {
 	);
 }
 
-/** Collapsed-rail stand-in for an agent: its initials, styled like the label. Its state hangs below as a word. */
-function AgentMonogram({ agent, open }: { agent: AgentSummary; open: boolean }) {
+/**
+ * Collapsed-rail stand-in for an agent: its initials. With `rings` they sit
+ * inside the agent's ring and the tag word hangs below; with `rail` they
+ * stand bare and a capsule beside the square is the only signal.
+ */
+function AgentMonogram({ agent, open, indicator }: { agent: AgentSummary; open: boolean; indicator: AgentStatusIndicator }) {
 	const text = initials(agent.name);
 	const status = agentStatus(agent);
-	const strong = open || isWaitingOnYou(status) || agent.unread;
+	const strong = open || agent.unread || needsAttention(status);
+	// An open run's initials shimmer like its name.
+	const glyph =
+		text === null ? (
+			<Bot className="size-3" />
+		) : isInFlight(status) ? (
+			<TextShimmer className={open || isWaitingOnYou(status) || agent.unread ? 'font-semibold' : 'font-medium'}>{text}</TextShimmer>
+		) : (
+			text
+		);
+	if (indicator === 'rings') {
+		return (
+			<AgentRing signal={agentSignal(agent)} progress={agent.progress} size="lg">
+				{/* A toned ring tints its initials too; otherwise they keep the row's weight and colour. */}
+				<span
+					className={cn(
+						'text-[0.625rem] tracking-tight tabular-nums',
+						strong ? 'font-semibold' : 'font-medium',
+						needsAttention(status) ? null : strong ? 'text-foreground' : 'text-sidebar-foreground',
+					)}
+				>
+					{glyph}
+				</span>
+			</AgentRing>
+		);
+	}
 	return (
 		<span
 			aria-hidden="true"
-			className={cn(
-				'relative grid size-5 shrink-0 place-items-center text-[0.6875rem] tracking-tight tabular-nums',
-				(agent.unread || status === 'failed') && 'font-medium text-foreground',
-			)}
+			className={cn('grid size-5 shrink-0 place-items-center text-[0.6875rem] tracking-tight tabular-nums', strong && 'font-semibold text-foreground')}
 		>
-			{text === null ? (
-				<Bot className="size-3.5" />
-			) : isInFlight(status) ? (
-				<TextShimmer className={strong ? 'font-semibold' : 'font-medium'}>{text}</TextShimmer>
-			) : (
-				text
-			)}
+			{glyph}
 		</span>
 	);
 }
@@ -108,17 +146,19 @@ function isLiveProject(agents: AgentSummary[], openAgentId: string | null) {
 /**
  * One project in the expanded sidebar: a disclosure row, then its agents hung
  * from a rail under the chevron, the way a tool trace hangs its calls. Folded,
- * the row carries its most pressing agent's tag, so nothing waiting on you
- * hides inside it. Past the limit, agents that need you still show and the
- * rest wait behind "Show N more".
+ * the row carries its most pressing agent's state in words, so nothing
+ * waiting on you hides inside it, or the running glyph while one of them runs. Past the limit,
+ * agents that need you still show and the rest wait behind "Show N more".
  */
 function ProjectGroup({
 	project,
 	agents,
 	openAgentId,
+	indicator,
 	renderAgent,
 }: {
 	project: AgentProject;
+	indicator: AgentStatusIndicator;
 	agents: AgentSummary[];
 	/** The agent on screen. Its project starts open, and unfolds whenever it is opened from elsewhere. */
 	openAgentId: string | null;
@@ -136,6 +176,7 @@ function ProjectGroup({
 	const hidden = agents.length - shown.length;
 	const urgent = mostUrgentTag(agents);
 	const waiting = agents.filter((agent) => needsAttention(agentStatus(agent))).length;
+	const running = agents.some((agent) => agentStatus(agent) === 'running');
 	return (
 		<li>
 			<button
@@ -156,7 +197,12 @@ function ProjectGroup({
 ) : null}
 				</span>
 				{open ? null : urgent ? (
-					<AgentStatusTag status={urgent} />
+					// The row's label already says how many need you, so the word is for sighted readers.
+					<StatusLabel aria-hidden="true" indicator={indicator} signal={urgent} className="shrink-0 text-xs">
+						{TAG_WORD[urgent]}
+					</StatusLabel>
+				) : running ? (
+					<StatusGlyph indicator={indicator} signal="running" />
 				) : (
 					<span aria-hidden="true" className="text-xs text-muted-foreground tabular-nums">
 						{formatCount(agents.length)}
@@ -201,7 +247,7 @@ type AgentsBuilderSidebarProps = {
  * expands it and focuses search.
  */
 function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedChange, drawer = false, onNavigate, className }: AgentsBuilderSidebarProps) {
-	const { data, agents, currentAgent, view, setView, emit, integration, openAgent } = useAgentsBuilder();
+	const { data, agents, currentAgent, view, setView, emit, integration, openAgent, statusIndicator } = useAgentsBuilder();
 	const asideRef = React.useRef<HTMLElement>(null);
 	const searchRef = React.useRef<HTMLInputElement>(null);
 	const [query, setQuery] = React.useState('');
@@ -246,9 +292,12 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 		return () => document.removeEventListener('keydown', onKeyDown);
 	}, [focusSearch]);
 
-	const agentRow = (agent: AgentSummary) => {
+	/** One agent. `hung` rows hang from a project's rail, so the rail indicator lights that line instead of the row's edge. */
+	const agentRow = (agent: AgentSummary, hung = false) => {
 		const open = agent.id === openAgentId;
 		const status = agentStatus(agent);
+		const signal = agentSignal(agent);
+		const rail = <SignalRail signal={signal} placement={hung ? 'rail' : 'edge'} />;
 		return (
 			<NavRow
 				key={agent.id}
@@ -256,13 +305,23 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 				labelNode={<AgentLabel agent={agent} open={open} />}
 				collapsed={collapsed}
 				active={open}
-				muted={!agent.unread && status !== 'failed'}
+				muted={!agent.unread && !needsAttention(status)}
 				tip={(collapsed ? agent.statusNote : statusPhrase(agent)) ? <AgentTip agent={agent} collapsed={collapsed} /> : undefined}
-				// The state reads at the end: a tag on the row, or in the rail its word, which NavRow stretches the square to hold.
-				// Expanded rows have no leading slot, so the name starts at the row's edge.
-				railBadge={hasStatusTag(status) ? <AgentStatusWord status={status} /> : undefined}
-				trailing={hasStatusTag(status) ? <AgentStatusTag status={status} /> : undefined}
-				leading={collapsed ? <AgentMonogram agent={agent} open={open} /> : null}
+				// With rings the tag word hangs under the initials, which NavRow stretches the square to hold; the rail needs no word.
+				railBadge={statusIndicator === 'rings' && hasStatusTag(status) ? <AgentStatusWord status={status} /> : undefined}
+				// Rings lead the name; the rail is drawn out of flow, so with it the name starts at the row's edge.
+				leading={
+					collapsed ? (
+						<>
+							{statusIndicator === 'rail' ? <SignalRail signal={signal} placement="pill" /> : null}
+							<AgentMonogram agent={agent} open={open} indicator={statusIndicator} />
+						</>
+					) : statusIndicator === 'rings' ? (
+						<AgentRing signal={signal} progress={agent.progress} />
+					) : (
+						rail
+					)
+				}
 				onClick={select(() => openAgent(agent.id))}
 			/>
 		);
@@ -396,13 +455,20 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 									{projects.map((project) => {
 										const members = projectAgents.byProject.get(project.id) ?? [];
 										return (
-											<ProjectGroup key={project.id} project={project} agents={members} openAgentId={openAgentId} renderAgent={agentRow} />
+											<ProjectGroup
+												key={project.id}
+												project={project}
+												agents={members}
+												openAgentId={openAgentId}
+												indicator={statusIndicator}
+												renderAgent={(agent) => agentRow(agent, true)}
+											/>
 										);
 									})}
-									{visibleRoster(projectAgents.loose, SIDEBAR_AGENT_LIMIT).map(agentRow)}
+									{visibleRoster(projectAgents.loose, SIDEBAR_AGENT_LIMIT).map((agent) => agentRow(agent))}
 								</>
 							) : (
-								roster.map(agentRow)
+								roster.map((agent) => agentRow(agent))
 							)}
 							<NavRow
 								label={projects ? 'All agents' : hiddenAgents > 0 ? `More agents, ${formatCount(hiddenAgents)} more` : 'More agents'}
diff --git a/packages/ui/src/components/agents-builder/types.ts b/packages/ui/src/components/agents-builder/types.ts
index 6ca3dae..cf7b441 100644
--- a/packages/ui/src/components/agents-builder/types.ts
+++ b/packages/ui/src/components/agents-builder/types.ts
@@ -57,8 +57,20 @@ export type AgentSummary = {
 	running?: boolean;
 	/** The project the agent belongs to. Agents without one list after the projects. */
 	projectId?: string;
+	/**
+	 * How far the current or last run got, from 0 to 1. The `rings` indicator
+	 * draws it as an arc; without it a running ring just spins.
+	 */
+	progress?: number;
 };
 
+/**
+ * How the roster shows each agent's state. `rail` lights the agent's stretch
+ * of the rail its row hangs from; `rings` draws a ring before the name whose
+ * arc is the run's progress.
+ */
+export type AgentStatusIndicator = 'rail' | 'rings';
+
 /** A group of agents in the sidebar, e.g. a team or a product area. */
 export type AgentProject = {
 	id: string;
diff --git a/packages/ui/src/components/agents-builder/use-agent-run.ts b/packages/ui/src/components/agents-builder/use-agent-run.ts
index 56365e4..2eeaac6 100644
--- a/packages/ui/src/components/agents-builder/use-agent-run.ts
+++ b/packages/ui/src/components/agents-builder/use-agent-run.ts
@@ -38,6 +38,13 @@ export type AgentRunState = {
 };
 
 /** Beat lengths for the scripted run, in milliseconds. */
+/** How far a run got, from 0 to 1: plan steps when there is a plan, tool calls otherwise, `undefined` with neither. */
+export function runProgress(script: AgentRunScript, state: AgentRunState): number | undefined {
+	if (script.plan?.length) return state.planDone / script.plan.length;
+	if (script.steps.length) return state.doneSteps / script.steps.length;
+	return undefined;
+}
+
 export const RUN_TIMING = {
 	reasoning: 1600,
 	afterReasoning: 280,
diff --git a/packages/ui/src/stories/AgentsBuilder.stories.tsx b/packages/ui/src/stories/AgentsBuilder.stories.tsx
index aa41b63..dfdbcc3 100644
--- a/packages/ui/src/stories/AgentsBuilder.stories.tsx
+++ b/packages/ui/src/stories/AgentsBuilder.stories.tsx
@@ -28,6 +28,7 @@ const meta: Meta<typeof AgentsBuilder> = {
 	argTypes: {
 		data: { control: false },
 		defaultView: { control: 'inline-radio', options: ['chat', 'inbox', 'schedules', 'integrations', 'skills', 'agent'] },
+		statusIndicator: { control: 'inline-radio', options: ['rail', 'rings'] },
 	},
 };
 
@@ -94,6 +95,13 @@ export const AgentRun: Story = {
 	render: (args) => <Frame {...args} />,
 };
 
+/** The same run with progress rings: each agent's ring before its name, and the header's ring filling as plan steps finish. */
+export const AgentRunRings: Story = {
+	name: 'Agent (live run, rings)',
+	args: { defaultView: 'agent', data: RUNNING_DEMO, statusIndicator: 'rings' },
+	render: (args) => <Frame {...args} />,
+};
+
 /** Approval, input, and failed agents past the six-row limit take the place of calm rows above them. */
 export const RosterOverflow: Story = {
 	name: 'Roster overflow',
@@ -124,6 +132,12 @@ export const CollapsedSidebar: Story = {
 	render: (args) => <Frame {...args} />,
 };
 
+export const CollapsedSidebarRings: Story = {
+	name: 'Collapsed sidebar (rings)',
+	args: { defaultView: 'chat', defaultSidebarCollapsed: true, statusIndicator: 'rings' },
+	render: (args) => <Frame {...args} />,
+};
+
 export const ControlledView: Story = {
 	render: function ControlledViewStory(args) {
 		const [view, setView] = useState<AgentsBuilderView>('integrations');
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 7c4ef26..0b2d24f 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -425,6 +425,24 @@
   }
 }
 
+@keyframes agent-rail-travel {
+  from {
+    top: -1rem;
+  }
+  to {
+    top: 100%;
+  }
+}
+
+@keyframes agent-pill-breathe {
+  0%, 100% {
+    transform: scaleY(0.55);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
 @keyframes ai-fade-up {
   from {
     opacity: 0;
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 198507a..2790653 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -415,6 +415,16 @@ export const constructiveTheme = {
 			'0%, 100%': { opacity: '0.15' },
 			'40%, 60%': { opacity: '0.95' },
 		},
+		// A short light running down a rail, from just above its top to past its bottom.
+		'agent-rail-travel': {
+			from: { top: '-1rem' },
+			to: { top: '100%' },
+		},
+		// A running capsule growing to full height and settling back, around its centre.
+		'agent-pill-breathe': {
+			'0%, 100%': { transform: 'scaleY(0.55)' },
+			'50%': { transform: 'scaleY(1)' },
+		},
 		'ai-fade-up': {
 			from: { opacity: '0', transform: 'translateY(6px)' },
 			to: { opacity: '1', transform: 'translateY(0)' },

From 95ef0620381c4ff5b9db3cdc7c2a987aa8fd7ec2 Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Fri, 23 Oct 2026 18:36:19 +0700
Subject: [PATCH 2/4] feat(ui): compact model selector and shared kit helpers

- ModelSelector: 30px rows, ring-shadow surface, side card no longer
  clipped by the popover, compact search and cost meter
- Popover exports popoverSurfaceClass; CommandList gains density="compact"
- FluidHighlight measures through a popup's scale-in (unscaledRect)
- Tool, PlanTracker, ApprovalCard, AskCard, Message: status icon sizing,
  wrapping, alignment and dir="auto" fixes
- ChatContainer merges a caller's ref with its own
- workspace-kit: iconButtonClass, useElementSize and useScrollbarInset
- agent-status: shared statusSignal; playback exports REDUCED_MOTION_DELAY
- Tabs: reveal tabs wider than the strip; never scroll vertically
- Theme: fine-pointer scrollbar styles move into the base layer so
  scrollbar-hide utilities win
---
 .../agents-builder/agent-status.tsx           |  14 +-
 .../src/components/agents-builder/playback.ts |   2 +-
 .../ui/src/components/ai/approval-card.tsx    |  10 +-
 packages/ui/src/components/ai/ask-card.tsx    |   4 +-
 .../ui/src/components/ai/chat-container.tsx   |   6 +-
 packages/ui/src/components/ai/inline-diff.tsx |   2 +-
 packages/ui/src/components/ai/message.tsx     |   4 +-
 .../ui/src/components/ai/model-selector.tsx   | 238 ++++++++++--------
 .../ui/src/components/ai/plan-tracker.tsx     |  12 +-
 packages/ui/src/components/ai/reasoning.tsx   |   2 +-
 .../ui/src/components/ai/scroll-button.tsx    |   2 +-
 packages/ui/src/components/ai/tool.tsx        |  28 +--
 packages/ui/src/components/button.tsx         |   6 +-
 packages/ui/src/components/collapsible.tsx    |   2 +-
 packages/ui/src/components/command.tsx        |  19 +-
 packages/ui/src/components/dropdown-menu.tsx  |   2 +-
 packages/ui/src/components/popover.tsx        |   9 +
 packages/ui/src/components/tabs.tsx           |   9 +-
 .../components/workspace-kit/primitives.tsx   |  44 ++--
 .../workspace-kit/use-element-size.ts         |  65 +++++
 .../ui/src/lib/motion/fluid-highlight.tsx     |  36 ++-
 packages/ui/src/styles/globals.css            |  50 ++--
 packages/ui/src/theme.ts                      |  57 ++---
 23 files changed, 403 insertions(+), 220 deletions(-)
 create mode 100644 packages/ui/src/components/workspace-kit/use-element-size.ts

diff --git a/packages/ui/src/components/agents-builder/agent-status.tsx b/packages/ui/src/components/agents-builder/agent-status.tsx
index 70cd9f2..a922f3d 100644
--- a/packages/ui/src/components/agents-builder/agent-status.tsx
+++ b/packages/ui/src/components/agents-builder/agent-status.tsx
@@ -16,7 +16,7 @@ function isInFlight(status: AgentStatus) {
 }
 
 /** Paused on a person: opening the agent jumps straight to the decision. */
-function isWaitingOnYou(status: AgentStatus) {
+function isWaitingOnYou(status: StatusSignal) {
 	return status === 'approval' || status === 'input';
 }
 
@@ -57,10 +57,17 @@ function hasStatusTag(status: AgentStatus): status is TaggedStatus {
 /** A state an indicator draws: an agent's status, or a finished run whose result waits to be read. */
 type StatusSignal = AgentStatus | 'done';
 
+/**
+ * What an indicator draws for anything that runs, such as an agent or a coding session: its status, or `done` while
+ * the result of a finished run is unread.
+ */
+function statusSignal({ status = 'idle', unread }: { status?: StatusSignal; unread?: boolean }): StatusSignal {
+	return status === 'idle' && unread ? 'done' : status;
+}
+
 /** What the roster draws for an agent: its status, or `done` while a fresh result is unread. */
 function agentSignal(agent: AgentSummary): StatusSignal {
-	const status = agentStatus(agent);
-	return status === 'idle' && agent.unread ? 'done' : status;
+	return statusSignal({ status: agentStatus(agent), unread: agent.unread });
 }
 
 /** Colour belongs to the states that need you; everything else stays grey. */
@@ -341,6 +348,7 @@ export {
 	StatusGlyph,
 	StatusLabel,
 	statusPhrase,
+	statusSignal,
 	TAG_WORD,
 	visibleRoster,
 };
diff --git a/packages/ui/src/components/agents-builder/playback.ts b/packages/ui/src/components/agents-builder/playback.ts
index 147cf13..3dbe413 100644
--- a/packages/ui/src/components/agents-builder/playback.ts
+++ b/packages/ui/src/components/agents-builder/playback.ts
@@ -7,7 +7,7 @@ import { prefersReducedMotion } from '../workspace-kit/reduced-motion';
 export { prefersReducedMotion, useReducedMotion } from '../workspace-kit/reduced-motion';
 
 /** Longest wait, in milliseconds, between scripted steps when reduced motion is requested. */
-const REDUCED_MOTION_DELAY = 40;
+export const REDUCED_MOTION_DELAY = 40;
 
 /**
  * Drives a queue of timed steps: waits `head.delay` and then calls `onDue`,
diff --git a/packages/ui/src/components/ai/approval-card.tsx b/packages/ui/src/components/ai/approval-card.tsx
index ccc7b70..74fe244 100644
--- a/packages/ui/src/components/ai/approval-card.tsx
+++ b/packages/ui/src/components/ai/approval-card.tsx
@@ -203,8 +203,8 @@ function ApprovalCard({
 				<div className="flex items-start justify-between gap-2">
 					<div className="min-w-0 text-[0.8125rem] font-medium text-pretty text-foreground [overflow-wrap:anywhere]">{question!.prompt}</div>
 					<div className="flex shrink-0 items-center gap-1">
-						{/* Progress pills */}
-						<div className="flex items-center gap-0.5" aria-hidden>
+						{/* Progress pills, only when there is progress to show. */}
+						<div className={cn('flex items-center gap-0.5', progress.length < 2 && 'hidden')} aria-hidden>
 							{progress.map((on, i) => (
 								<span
 									key={i}
@@ -233,7 +233,8 @@ function ApprovalCard({
 								onClick={() => toggleOption(option.id)}
 								className={cn(
 									// card rounded-lg + p-3 → option rows use rounded-md (concentric)
-									'-mx-1.5 flex min-h-10 items-start gap-2 rounded-md px-1.5 py-1.5 text-start text-[0.8125rem]',
+									'-mx-1.5 flex min-h-10 gap-2 rounded-md px-1.5 py-1.5 text-start text-[0.8125rem]',
+									option.description ? 'items-start' : 'items-center',
 									'transition-[box-shadow] duration-(--duration-moderate) hover:bg-accent',
 									'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
 									on && 'bg-accent',
@@ -241,7 +242,8 @@ function ApprovalCard({
 							>
 								<span
 									className={cn(
-										'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border',
+										'flex size-4 shrink-0 items-center justify-center rounded-full border',
+										option.description && 'mt-0.5',
 										on ? 'border-primary bg-primary text-primary-foreground' : 'border-border',
 									)}
 								>
diff --git a/packages/ui/src/components/ai/ask-card.tsx b/packages/ui/src/components/ai/ask-card.tsx
index d140062..a7c9f7f 100644
--- a/packages/ui/src/components/ai/ask-card.tsx
+++ b/packages/ui/src/components/ai/ask-card.tsx
@@ -63,7 +63,7 @@ function RadioMark({ checked }: { checked: boolean }) {
 		<span
 			aria-hidden="true"
 			className={cn(
-				'grid size-4 shrink-0 place-items-center rounded-full border',
+				'mt-0.5 grid size-4 shrink-0 place-items-center rounded-full border',
 				checked ? 'border-primary bg-primary' : 'border-subtle-foreground/50',
 			)}
 		>
@@ -91,7 +91,7 @@ function AskQuestionField({
 	const otherValue = choice && 'other' in choice ? choice.other : '';
 	// Card p-3 → rows bleed 6px into the padding and round at radius-md, so labels line up with the heading.
 	const rowClass =
-		'-mx-1.5 flex min-h-8 items-center gap-2.5 rounded-md px-1.5 py-1 text-start text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50';
+		'-mx-1.5 flex min-h-8 items-start gap-2.5 rounded-md px-1.5 py-1.5 text-start text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50';
 
 	return (
 		<div className="flex flex-col gap-2">
diff --git a/packages/ui/src/components/ai/chat-container.tsx b/packages/ui/src/components/ai/chat-container.tsx
index 3c28709..a67839f 100644
--- a/packages/ui/src/components/ai/chat-container.tsx
+++ b/packages/ui/src/components/ai/chat-container.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import { useMergedRefs } from '../../lib/compose-refs';
 import { cn } from '../../lib/utils';
 
 type ChatContainerContextValue = {
@@ -36,9 +37,12 @@ function ChatContainer({
 	children,
 	bottomThreshold = 48,
 	autoScroll = true,
+	ref,
 	...props
 }: ChatContainerProps) {
 	const scrollRef = React.useRef<HTMLDivElement>(null);
+	// The caller's ref joins the container's own, so passing one can't cut off the stick-to-bottom tracking.
+	const mergedRef = useMergedRefs(scrollRef, ref);
 	const [isAtBottom, setIsAtBottom] = React.useState(true);
 	const isAtBottomRef = React.useRef(true);
 
@@ -87,7 +91,7 @@ function ChatContainer({
 	return (
 		<ChatContainerContext.Provider value={{ scrollRef, isAtBottom, scrollToBottom }}>
 			<div
-				ref={scrollRef}
+				ref={mergedRef}
 				data-slot="chat-container"
 				data-at-bottom={isAtBottom ? 'true' : 'false'}
 				className={cn('relative min-h-0 flex-1 overflow-y-auto overscroll-contain', className)}
diff --git a/packages/ui/src/components/ai/inline-diff.tsx b/packages/ui/src/components/ai/inline-diff.tsx
index c38d119..53ce3c4 100644
--- a/packages/ui/src/components/ai/inline-diff.tsx
+++ b/packages/ui/src/components/ai/inline-diff.tsx
@@ -104,7 +104,7 @@ function InlineDiff({ source, className, maxLines = 40 }: InlineDiffProps) {
 			</pre>
 			{hidden > 0 ? (
 				<div className="border-t border-border px-2.5 py-1 text-[0.6875rem] text-muted-foreground">
-					+{hidden} more lines
+					{hidden} more {hidden === 1 ? 'line' : 'lines'}
 				</div>
 			) : null}
 		</div>
diff --git a/packages/ui/src/components/ai/message.tsx b/packages/ui/src/components/ai/message.tsx
index b864c54..9765737 100644
--- a/packages/ui/src/components/ai/message.tsx
+++ b/packages/ui/src/components/ai/message.tsx
@@ -75,6 +75,8 @@ function MessageContent({
 		return (
 			<Markdown
 				data-slot="message-content"
+				// Each message sets its own direction, so a reply in one script reads right inside a UI in another.
+				dir="auto"
 				streaming={streaming}
 				className={contentClassName}
 				{...props}
@@ -85,7 +87,7 @@ function MessageContent({
 	}
 
 	return (
-		<div data-slot="message-content" className={contentClassName} {...props}>
+		<div data-slot="message-content" dir="auto" className={contentClassName} {...props}>
 			{children}
 		</div>
 	);
diff --git a/packages/ui/src/components/ai/model-selector.tsx b/packages/ui/src/components/ai/model-selector.tsx
index 656543c..3825065 100644
--- a/packages/ui/src/components/ai/model-selector.tsx
+++ b/packages/ui/src/components/ai/model-selector.tsx
@@ -3,10 +3,11 @@
 import { Check, ChevronDown, CircleDollarSign } from 'lucide-react';
 import * as React from 'react';
 
+import { unscaledRect } from '../../lib/motion/fluid-highlight';
 import { cn } from '../../lib/utils';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../command';
 import { Kbd } from '../kbd';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Popover, PopoverContent, popoverSurfaceClass, PopoverTrigger } from '../popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import { formatCompact } from './context-ring';
 import { MarkTile } from './mark-tile';
@@ -68,6 +69,8 @@ type ModelSelectorProps = {
 	align?: 'start' | 'center' | 'end';
 	side?: 'top' | 'bottom';
 	triggerClassName?: string;
+	/** Classes for the reasoning level beside the model name, e.g. to hide it when the trigger is narrow. */
+	levelClassName?: string;
 	contentClassName?: string;
 	/** Accessible label prefix for the trigger. Defaults to "Model". */
 	label?: string;
@@ -121,22 +124,18 @@ function costTier(share: number, free: boolean) {
 }
 
 /**
- * Relative cost as a row of building blocks: one to four filled in the accent
- * color, stepping up in height like a stack being built. Discrete tiers read
- * faster than a continuous bar and keep the list calm while scanning.
+ * Relative cost as a row of building blocks: one to four filled, stepping up in height like a stack being built.
+ * Discrete tiers read faster than a continuous bar, and the muted fill keeps the list calm while scanning.
  */
 function CostBlocks({ tier }: { tier: number }) {
 	return (
-		<span role="img" aria-label={`Cost tier ${tier} of ${COST_TIERS}`} className="flex h-3 shrink-0 items-end gap-[3px]">
+		<span role="img" aria-label={`Cost tier ${tier} of ${COST_TIERS}`} className="flex h-2.5 shrink-0 items-end gap-0.5">
 			{Array.from({ length: COST_TIERS }, (_, index) => (
 				<span
 					key={index}
 					aria-hidden="true"
-					className={cn(
-						'w-1.5 rounded-[1.5px]',
-						index < tier ? 'bg-primary' : 'bg-[color-mix(in_oklab,currentColor_14%,transparent)]',
-					)}
-					style={{ height: `${6 + index * 2}px` }}
+					className={cn('w-[3px] rounded-[1px]', index < tier ? 'bg-muted-foreground' : 'bg-[color-mix(in_oklab,currentColor_14%,transparent)]')}
+					style={{ height: `${4 + index * 2}px` }}
 				/>
 			))}
 		</span>
@@ -145,7 +144,7 @@ function CostBlocks({ tier }: { tier: number }) {
 
 function PriceText({ pricing }: { pricing: AiModelPricing }) {
 	return (
-		<span className="text-xs text-muted-foreground tabular-nums">
+		<span className="text-[0.6875rem] text-muted-foreground tabular-nums">
 			{formatPrice(pricing.input, pricing.currency)}
 			<span className="text-subtle-foreground"> / </span>
 			{formatPrice(pricing.output, pricing.currency)}
@@ -160,8 +159,8 @@ function Tag({ tag }: { tag: AiModelTag }) {
 	return (
 		<span
 			className={cn(
-				'shrink-0 text-xs font-medium',
-				tag === 'deprecated' ? 'text-muted-foreground line-through' : 'text-link',
+				'shrink-0 text-[0.6875rem] font-medium',
+				tag === 'new' ? 'text-link' : tag === 'deprecated' ? 'text-subtle-foreground line-through' : 'text-muted-foreground',
 			)}
 		>
 			{TAG_LABEL[tag]}
@@ -175,7 +174,10 @@ function ModelGlyph({ model }: { model: AiModel }) {
 	);
 }
 
-/** A model's reasoning levels as a stacked menu: one row each, with its description and a check on the current one. */
+/**
+ * A model's reasoning levels as compact radio rows. The description of the level under the pointer (or the chosen
+ * one) shows once below them, in a slot sized to the longest so the card holds still while moving through them.
+ */
 function LevelMenu({
 	model,
 	levelId,
@@ -185,43 +187,64 @@ function LevelMenu({
 	levelId: string | undefined;
 	onPick: (levelId: string) => void;
 }) {
-	if (!model.levels?.length) {
-		return <p className="px-2 py-1.5 text-xs text-muted-foreground">One mode, no reasoning levels</p>;
-	}
+	const [peek, setPeek] = React.useState<string>();
+	const levels = model.levels ?? [];
+	const shown = peek ?? levelId;
+	const described = levels.some((level) => level.description);
 	return (
-		<div role="radiogroup" aria-label={`${model.name} reasoning level`} className="flex flex-col gap-px">
-			{model.levels.map((level) => {
-				const checked = level.id === levelId;
-				return (
-					<button
-						key={level.id}
-						type="button"
-						role="radio"
-						aria-checked={checked}
-						onMouseDown={(event) => event.preventDefault()}
-						onClick={() => onPick(level.id)}
-						className={cn(
-							'flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-start outline-none pointer-coarse:min-h-11',
-							'hover:bg-overlay-hover focus-visible:ring-[3px] focus-visible:ring-ring/50',
-							checked && 'bg-overlay-hover',
-						)}
-					>
-						<span className="flex min-w-0 flex-1 flex-col">
-							<span className={cn('text-[0.8125rem]', checked ? 'font-medium text-foreground' : 'text-foreground/85')}>{level.label}</span>
-							{level.description ? <span className="text-xs text-muted-foreground">{level.description}</span> : null}
-						</span>
-						<Check aria-hidden="true" className={cn('size-3.5 shrink-0 text-foreground', checked ? 'opacity-100' : 'opacity-0')} />
-					</button>
-				);
-			})}
+		<div>
+			<p className="flex h-6 items-center justify-between gap-2 px-2 text-[0.6875rem] text-subtle-foreground">
+				Reasoning
+				{levels.length > 1 ? (
+					<span aria-hidden="true" className="hidden items-center gap-0.5 pointer-fine:flex">
+						<Kbd className="h-4 min-w-4 text-[0.625rem]">←</Kbd>
+						<Kbd className="h-4 min-w-4 text-[0.625rem]">→</Kbd>
+					</span>
+				) : null}
+			</p>
+			<div role="radiogroup" aria-label={`${model.name} reasoning level`} onPointerLeave={() => setPeek(undefined)} className="flex flex-col">
+				{levels.map((level) => {
+					const checked = level.id === levelId;
+					return (
+						<button
+							key={level.id}
+							type="button"
+							role="radio"
+							aria-checked={checked}
+							onMouseDown={(event) => event.preventDefault()}
+							onPointerEnter={() => setPeek(level.id)}
+							onFocus={() => setPeek(level.id)}
+							onBlur={() => setPeek(undefined)}
+							onClick={() => onPick(level.id)}
+							className={cn(
+								'flex h-7 w-full cursor-pointer items-center gap-2 rounded-sm px-2 text-start text-[0.8125rem] outline-none pointer-coarse:h-11',
+								'hover:bg-overlay-hover focus-visible:ring-[3px] focus-visible:ring-ring/50',
+								checked ? 'font-medium text-foreground' : 'text-foreground/80',
+							)}
+						>
+							<span className="min-w-0 flex-1 truncate">{level.label}</span>
+							<Check aria-hidden="true" className={cn('size-3.5 shrink-0', checked ? 'opacity-100' : 'opacity-0')} />
+						</button>
+					);
+				})}
+			</div>
+			{described ? (
+				// Every description sits in the same cell; only the shown one is visible, so the slot keeps the height of the longest.
+				<div className="grid px-2 pt-1 pb-1.5 text-[0.6875rem] leading-4 text-pretty text-muted-foreground">
+					{levels.map((level) => (
+						<p key={level.id} aria-hidden={level.id !== shown} className={cn('[grid-area:1/1]', level.id === shown ? 'visible' : 'invisible')}>
+							{level.description}
+						</p>
+					))}
+				</div>
+			) : null}
 		</div>
 	);
 }
 
 /**
- * The side card for the active model: what it is, its reasoning levels as a
- * menu, and its prices. It opens beside the list like a submenu, so the list
- * never changes size while moving through it.
+ * The side card for the active model: what it is, its reasoning levels, and its prices. It opens beside the list like
+ * a submenu, so the list never changes size while moving through it.
  */
 function ModelDetails({
 	model,
@@ -246,35 +269,20 @@ function ModelDetails({
 
 	return (
 		<>
-			<div className="flex items-center gap-2 px-3 pt-3 pb-2">
-				<ModelGlyph model={model} />
-				<div className="min-w-0">
-					<p title={model.name} className="truncate text-[0.8125rem] font-medium text-foreground">{model.name}</p>
-					<p title={model.description ?? model.provider} className="truncate text-xs text-muted-foreground">{model.description ?? model.provider}</p>
-				</div>
-			</div>
-			<div className="px-1 pb-1">
-				<LevelMenu model={model} levelId={level?.id} onPick={onPickLevel} />
+			<div className="px-2 pt-1.5 pb-2">
+				<p dir="auto" title={model.name} className="truncate text-[0.8125rem] font-medium text-foreground">{model.name}</p>
+				<p className="line-clamp-2 text-[0.6875rem] leading-4 text-pretty text-muted-foreground">{model.description ?? model.provider}</p>
 			</div>
-			<dl className="grid grid-cols-2 gap-x-3 gap-y-2 border-t border-border px-3 py-2.5">
+			{model.levels?.length ? <LevelMenu model={model} levelId={level?.id} onPick={onPickLevel} /> : null}
+			<div aria-hidden="true" className="mx-2 h-px bg-border/70" />
+			<dl className="grid grid-cols-2 gap-x-3 gap-y-1.5 px-2 pt-2 pb-1.5">
 				{facts.map((fact) => (
 					<div key={fact.label} className="min-w-0">
-						<dt className="truncate text-[0.6875rem] leading-4 text-muted-foreground">{fact.label}</dt>
+						<dt className="truncate text-[0.6875rem] leading-4 text-subtle-foreground">{fact.label}</dt>
 						<dd className="truncate text-xs leading-4 text-foreground tabular-nums">{fact.value}</dd>
 					</div>
 				))}
 			</dl>
-			<p className="hidden h-8 items-center gap-1 border-t border-border px-3 text-[0.6875rem] text-muted-foreground pointer-fine:flex">
-				{model.levels && model.levels.length > 1 ? (
-					<>
-						<Kbd>←</Kbd>
-						<Kbd>→</Kbd>
-						<span className="me-2">level</span>
-					</>
-				) : null}
-				<Kbd>↵</Kbd>
-				<span>choose</span>
-			</p>
 		</>
 	);
 }
@@ -290,6 +298,9 @@ function inTriangle(point: Point, a: Point, b: Point, c: Point) {
 	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
 }
 
+/** One shared empty list, so leaving the section props out doesn't rebuild the sections on every render. */
+const NO_IDS: string[] = [];
+
 /** How long a row crossed on the way to the side card waits before taking it over. */
 const PANEL_INTENT_MS = 240;
 
@@ -304,15 +315,16 @@ function ModelSelector({
 	models,
 	value,
 	onValueChange,
-	pinnedIds = [],
-	recentIds = [],
-	recommendedIds = [],
+	pinnedIds = NO_IDS,
+	recentIds = NO_IDS,
+	recommendedIds = NO_IDS,
 	priceDisplay: priceDisplayProp = 'meter',
 	allowPriceToggle,
 	disabled,
 	align = 'start',
 	side = 'top',
 	triggerClassName,
+	levelClassName,
 	contentClassName,
 	label = 'Model',
 }: ModelSelectorProps) {
@@ -324,7 +336,10 @@ function ModelSelector({
 	/** The row the side card shows. Follows the highlight, except while the pointer heads for the card. */
 	const [active, setActive] = React.useState('');
 	const [panel, setPanel] = React.useState<{ top: number; side: 'left' | 'right' | 'below' }>({ top: 0, side: 'right' });
+	/** The list's height when filtering starts, held so a short result list doesn't move the search field. */
+	const [listHeight, setListHeight] = React.useState<number>();
 	const contentRef = React.useRef<HTMLDivElement>(null);
+	const listRef = React.useRef<HTMLDivElement>(null);
 	const panelRef = React.useRef<HTMLDivElement>(null);
 	const trail = React.useRef<Point[]>([]);
 	const intentTimer = React.useRef<number | undefined>(undefined);
@@ -405,7 +420,8 @@ function ModelSelector({
 		const row =
 			rows.find((element) => element.dataset.modelValue === active) ??
 			rows.find((element) => element.dataset.modelValue?.endsWith(`::${value.modelId}`));
-		const rowTop = row ? row.getBoundingClientRect().top - box.top - 4 : 0;
+		// The popup may still be scaling in, so the row is measured in its own unscaled units.
+		const rowTop = row ? unscaledRect(row, content, box).top - 4 : 0;
 		// Aligned with its row; only the viewport edges push it, not the list's own height.
 		const top = Math.round(Math.min(Math.max(8 - box.top, rowTop), window.innerHeight - box.top - card.offsetHeight - 8));
 		const side = box.right + card.offsetWidth + 8 > window.innerWidth ? 'left' : 'right';
@@ -436,9 +452,9 @@ function ModelSelector({
 
 	/** Right-aligned column with a fixed minimum width, so prices, blocks, and checks line up down the list. */
 	const trailing = (model: AiModel, pricing: AiModelPricing | undefined) => {
-		if (model.disabled && model.disabledReason) return <span title={model.disabledReason} className="truncate text-xs text-muted-foreground">{model.disabledReason}</span>;
+		if (model.disabled && model.disabledReason) return <span title={model.disabledReason} className="truncate text-[0.6875rem] text-muted-foreground">{model.disabledReason}</span>;
 		if (priceDisplay === 'none' || !pricing) return null;
-		if (isFree(pricing)) return <span className="text-xs font-medium text-link">Free</span>;
+		if (isFree(pricing)) return <span className="text-[0.6875rem] font-medium text-muted-foreground">Free</span>;
 		if (priceDisplay === 'price') return <PriceText pricing={pricing} />;
 		const share = maxCost > 0 ? Math.log1p(blendedCost(pricing)) / Math.log1p(maxCost) : 0;
 		return <CostBlocks tier={costTier(share, false)} />;
@@ -448,6 +464,7 @@ function ModelSelector({
 		const level = levelOf(model, levelFor(model));
 		const pricing = pricingOf(model, level);
 		const tags = model.tags?.filter((tag) => !(tag === 'free' && isFree(pricing) && priceDisplay !== 'none'));
+		const current = model.id === value.modelId;
 		return (
 			<CommandItem
 				key={`${section}::${model.id}`}
@@ -456,25 +473,23 @@ function ModelSelector({
 				keywords={[model.name, model.provider, ...(model.levels?.map((entry) => entry.label) ?? []), ...(model.tags ?? [])]}
 				disabled={model.disabled}
 				onSelect={() => choose(model)}
-				className="h-9 gap-2 rounded-sm pointer-coarse:h-11"
+				className="h-7.5 gap-2 rounded-sm px-2 py-0 pointer-coarse:h-11"
 			>
 				<ModelGlyph model={model} />
 				<span className="flex min-w-0 flex-1 items-baseline gap-1.5">
-					<span title={model.name} className="truncate text-foreground">{model.name}</span>
-					{level ? <span title={level.label} className="shrink truncate text-muted-foreground">{level.label}</span> : null}
+					{/* The level gives way well before the name does, so a long name stays readable on a narrow list. */}
+					<span dir="auto" title={model.name} className="min-w-0 truncate text-[0.8125rem] font-medium text-foreground">{model.name}</span>
+					{level ? <span title={level.label} className="min-w-0 shrink-[8] truncate text-[0.6875rem] text-muted-foreground">{level.label}</span> : null}
 					{/* Two tags at most, so a model with many of them cannot squeeze its own name out of the row. */}
 					{tags?.slice(0, MAX_ROW_TAGS).map((tag) => <Tag key={tag} tag={tag} />)}
 					{tags && tags.length > MAX_ROW_TAGS ? (
-						<span title={tags.slice(MAX_ROW_TAGS).map((tag) => TAG_LABEL[tag]).join(', ')} className="shrink-0 text-xs text-muted-foreground tabular-nums">
+						<span title={tags.slice(MAX_ROW_TAGS).map((tag) => TAG_LABEL[tag]).join(', ')} className="shrink-0 text-[0.6875rem] text-muted-foreground tabular-nums">
 							+{tags.length - MAX_ROW_TAGS}
 						</span>
 					) : null}
 				</span>
-				<span className="flex min-w-14 shrink-0 justify-end text-muted-foreground">{trailing(model, pricing)}</span>
-				<Check
-					aria-hidden="true"
-					className={cn('size-3.5 shrink-0 text-foreground', model.id === value.modelId ? 'opacity-100' : 'opacity-0')}
-				/>
+				<span className="flex min-w-10 shrink-0 justify-end text-muted-foreground">{trailing(model, pricing)}</span>
+				<Check aria-hidden="true" className={cn('size-3.5 shrink-0 text-foreground', current ? 'opacity-100' : 'opacity-0')} />
 			</CommandItem>
 		);
 	};
@@ -488,6 +503,7 @@ function ModelSelector({
 				setOpen(next);
 				if (next) {
 					setQuery('');
+					setListHeight(undefined);
 					setPendingLevels({});
 					// Open on the current model, so its card is the first one shown.
 					const home = [...sections.browsing, ...sections.all].find((section) =>
@@ -502,21 +518,29 @@ function ModelSelector({
 				disabled={disabled}
 				onClick={(event) => event.stopPropagation()}
 				className={cn(
-					'flex h-8 max-w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-[0.8125rem] text-foreground outline-none',
-					'hover:bg-overlay-hover focus-visible:ring-[3px] focus-visible:ring-ring/50 data-popup-open:bg-overlay-hover',
+					'relative flex h-7 max-w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-md px-1.5 text-xs font-medium text-foreground/85 outline-none',
+					'hover:bg-overlay-hover hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 data-popup-open:bg-overlay-hover data-popup-open:text-foreground',
+					// A 40px tall hit area without growing the chip; it stays inside the chip's own width so neighbours never overlap.
+					'before:absolute before:inset-x-0 before:-inset-y-1.5',
 					'transition-transform duration-(--duration-fast) motion-safe:active:scale-[0.96] disabled:cursor-not-allowed disabled:opacity-64',
 					triggerClassName,
 				)}
 			>
 				{selected ? <ModelGlyph model={selected} /> : null}
-				<span title={selected?.name ?? 'Choose a model'} className="truncate">{selected?.name ?? 'Choose a model'}</span>
-				{selectedLevel ? <span title={selectedLevel.label} className="truncate text-muted-foreground">{selectedLevel.label}</span> : null}
-				<ChevronDown aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+				<span dir="auto" title={selected?.name ?? 'Choose a model'} className="truncate">{selected?.name ?? 'Choose a model'}</span>
+				{selectedLevel ? <span title={selectedLevel.label} className={cn('truncate font-normal text-muted-foreground', levelClassName)}>{selectedLevel.label}</span> : null}
+				<ChevronDown aria-hidden="true" className="size-3 shrink-0 text-muted-foreground" />
 			</PopoverTrigger>
 			<PopoverContent
 				side={side}
 				align={align}
-				className={cn('relative w-[min(22rem,calc(100vw-1.5rem))] p-0', contentClassName)}
+				className={cn(
+					// The list and its side card share this one edge.
+					popoverSurfaceClass,
+					// The side card hangs outside the list, so the popup must not clip; on phones the card stacks below instead and the popup scrolls.
+					'relative w-[min(17rem,calc(100vw-1.5rem))] p-0 max-sm:overflow-y-auto sm:overflow-visible',
+					contentClassName,
+				)}
 			>
 				<div
 					ref={contentRef}
@@ -531,8 +555,18 @@ function ModelSelector({
 						loop
 						className="rounded-[inherit]"
 					>
-						<div className="relative border-b border-border">
-							<CommandInput value={query} onValueChange={setQuery} placeholder="Search models" className="pe-9" />
+						<div className="mx-1 flex items-center gap-1 border-b border-border/70 py-1 *:data-[slot=command-input-wrapper]:min-w-0 *:data-[slot=command-input-wrapper]:flex-1 *:data-[slot=command-input-wrapper]:p-0">
+							<CommandInput
+								value={query}
+								onValueChange={(next) => {
+									// Hold the list at its browsing height once filtering starts; release it when the field clears.
+									if (next && !query && listRef.current) setListHeight(listRef.current.offsetHeight);
+									if (!next) setListHeight(undefined);
+									setQuery(next);
+								}}
+								placeholder="Search models"
+								className="gap-2 px-2 [&_input]:h-7 [&_input]:text-[0.8125rem] [&_svg]:size-3.5"
+							/>
 							{canTogglePrice ? (
 								<Tooltip>
 									<TooltipTrigger
@@ -543,11 +577,11 @@ function ModelSelector({
 												aria-pressed={priceDisplay === 'price'}
 												onClick={() => setPriceDisplay((current) => (current === 'price' ? 'meter' : 'price'))}
 												className={cn(
-													'absolute top-1/2 end-2.5 grid size-7 -translate-y-1/2 cursor-pointer place-items-center rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
-													priceDisplay === 'price' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-overlay-hover hover:text-foreground',
+													'grid size-6 shrink-0 cursor-pointer place-items-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
+													priceDisplay === 'price' ? 'bg-overlay-hover text-foreground' : 'text-muted-foreground hover:bg-overlay-hover hover:text-foreground',
 												)}
 											>
-												<CircleDollarSign aria-hidden="true" className="size-4" />
+												<CircleDollarSign aria-hidden="true" className="size-3.5" />
 											</button>
 										}
 									/>
@@ -555,8 +589,14 @@ function ModelSelector({
 								</Tooltip>
 							) : null}
 						</div>
-						<CommandList className="h-[min(20rem,50vh)] max-h-none p-1 not-empty:p-1" onScroll={placePanel}>
-							<CommandEmpty className="py-6 text-center text-sm text-muted-foreground">No models matched</CommandEmpty>
+						<CommandList
+							ref={listRef}
+							density="compact"
+							style={listHeight ? { height: listHeight } : undefined}
+							className="max-h-[min(20rem,50vh)]"
+							onScroll={placePanel}
+						>
+							<CommandEmpty className="py-6 text-center text-[0.8125rem] text-muted-foreground">No models matched</CommandEmpty>
 							{visible.map((section) => (
 								<CommandGroup key={section.id} heading={section.label}>
 									{section.items.map((model) => renderItem(model, section.id))}
@@ -576,12 +616,10 @@ function ModelSelector({
 						}}
 						style={panel.side === 'below' ? undefined : { top: panel.top }}
 						className={cn(
+							'p-1',
 							panel.side === 'below'
-								? 'border-t border-border'
-								: cn(
-										'absolute w-64 rounded-lg border bg-popover text-popover-foreground shadow-lg',
-										panel.side === 'right' ? 'left-full ml-1.5' : 'right-full mr-1.5',
-									),
+								? 'mx-1 border-t border-border/70 px-0'
+								: cn(popoverSurfaceClass, 'absolute w-56', panel.side === 'right' ? 'left-full ml-1.5' : 'right-full mr-1.5'),
 						)}
 					>
 						<ModelDetails
diff --git a/packages/ui/src/components/ai/plan-tracker.tsx b/packages/ui/src/components/ai/plan-tracker.tsx
index 937452e..a0bf10b 100644
--- a/packages/ui/src/components/ai/plan-tracker.tsx
+++ b/packages/ui/src/components/ai/plan-tracker.tsx
@@ -63,7 +63,7 @@ function PlanTracker({
 						{complete ? (
 							<span className="min-w-0 flex-1 truncate font-medium tabular-nums">{`${total}/${total} done`}</span>
 						) : focusStep ? (
-							<span className="min-w-0 flex-1 truncate font-medium">
+							<span dir="auto" title={focusStep.label} className="min-w-0 flex-1 truncate font-medium [text-align:match-parent]">
 								<span className="me-1.5 font-mono text-[0.75rem] font-normal tabular-nums text-muted-foreground/60">
 									{focusIndex + 1}/{total}
 								</span>
@@ -92,11 +92,15 @@ function PlanTracker({
 
 function PlanRow({ step }: { step: PlanStep }) {
 	return (
-		<li className="flex items-center gap-2 rounded-md px-1.5 py-1 text-[0.8125rem]">
-			<StepIcon status={step.status} />
+		<li className="flex items-start gap-2 rounded-md px-1.5 py-1 text-[0.8125rem]">
+			<span className="flex h-5 shrink-0 items-center">
+				<StepIcon status={step.status} />
+			</span>
+			{/* Rows wrap: an expanded plan is where a long step gets read in full. */}
 			<span
+				dir="auto"
 				className={cn(
-					'min-w-0 flex-1 truncate',
+					'min-w-0 flex-1 leading-5 text-pretty [overflow-wrap:anywhere] [text-align:match-parent]',
 					step.status === 'done' ? 'text-muted-foreground line-through' : 'text-foreground',
 				)}
 			>
diff --git a/packages/ui/src/components/ai/reasoning.tsx b/packages/ui/src/components/ai/reasoning.tsx
index 6aaf04a..372cef2 100644
--- a/packages/ui/src/components/ai/reasoning.tsx
+++ b/packages/ui/src/components/ai/reasoning.tsx
@@ -94,7 +94,7 @@ function Reasoning({
 		>
 			<CollapsibleTrigger
 				className={cn(
-					'group flex w-fit max-w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-start text-[0.8125rem]',
+					'group -mx-1.5 flex w-fit max-w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-start text-[0.8125rem]',
 					'text-muted-foreground transition-[box-shadow] duration-(--duration-moderate) hover:bg-accent hover:text-foreground',
 					'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
 				)}
diff --git a/packages/ui/src/components/ai/scroll-button.tsx b/packages/ui/src/components/ai/scroll-button.tsx
index 1f96c6d..419d396 100644
--- a/packages/ui/src/components/ai/scroll-button.tsx
+++ b/packages/ui/src/components/ai/scroll-button.tsx
@@ -45,7 +45,7 @@ function ScrollButton({
 				'shadow-lg backdrop-blur-md',
 				'dark:border-border dark:bg-card/90 dark:shadow-black/40',
 				// Interaction
-				'outline-none transition-[transform,background-color,color,box-shadow,border-color] duration-(--duration-moderate) ease-out',
+				'outline-none transition-[transform,box-shadow] duration-(--duration-moderate) ease-out',
 				'hover:border-border hover:bg-accent hover:text-foreground hover:shadow-lg',
 				'focus-visible:ring-[3px] focus-visible:ring-ring/50',
 				'motion-safe:active:scale-[0.96]',
diff --git a/packages/ui/src/components/ai/tool.tsx b/packages/ui/src/components/ai/tool.tsx
index fdad98f..a07fdbc 100644
--- a/packages/ui/src/components/ai/tool.tsx
+++ b/packages/ui/src/components/ai/tool.tsx
@@ -1,13 +1,6 @@
 'use client';
 
-import {
-	CheckCircle2,
-	ChevronDown,
-	CircleX,
-	Loader2,
-	Settings2,
-	Wrench,
-} from 'lucide-react';
+import { Ban, CheckCircle2, ChevronDown, CircleDashed, CircleX, Loader2 } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '../../lib/utils';
@@ -52,16 +45,17 @@ function formatValue(value: unknown): string {
 
 function StatusIcon({ status }: { status: ReturnType<typeof normalizeToolStatus> }) {
 	switch (status) {
+		// shrink-0 throughout: a long summary beside the icon must never squeeze it.
 		case 'pending':
-			return <Loader2 className="size-3.5 animate-spin text-info motion-reduce:animate-none" />;
+			return <CircleDashed className="size-3.5 shrink-0 text-muted-foreground" />;
 		case 'running':
-			return <Settings2 className="size-3.5 text-warning" />;
+			return <Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground motion-reduce:animate-none" />;
 		case 'success':
-			return <CheckCircle2 className="size-3.5 text-success" />;
+			return <CheckCircle2 className="size-3.5 shrink-0 text-success" />;
 		case 'error':
-			return <CircleX className="size-3.5 text-destructive" />;
+			return <CircleX className="size-3.5 shrink-0 text-destructive" />;
 		case 'aborted':
-			return <Wrench className="size-3.5 text-muted-foreground" />;
+			return <Ban className="size-3.5 shrink-0 text-muted-foreground" />;
 	}
 }
 
@@ -121,7 +115,9 @@ function Tool({
 					{name}
 				</span>
 				{summary ? (
-					<span className="min-w-0 truncate font-mono text-muted-foreground">{summary}</span>
+					<span dir="auto" title={typeof summary === 'string' ? summary : undefined} className="min-w-0 truncate font-mono text-muted-foreground">
+						{summary}
+					</span>
 				) : null}
 			</div>
 		);
@@ -142,6 +138,8 @@ function Tool({
 				</span>
 				{summary ? (
 					<span
+						dir="auto"
+						title={typeof summary === 'string' ? summary : undefined}
 						className={cn(
 							'min-w-0 truncate rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.71875rem] text-muted-foreground',
 						)}
@@ -300,7 +298,7 @@ function ToolGroup({ label, children, defaultOpen = true, className }: ToolGroup
 						'text-muted-foreground hover:bg-accent hover:text-foreground',
 					)}
 				>
-					<ChevronDown data-slot="collapsible-icon" className="size-3" />
+					<ChevronDown data-slot="collapsible-icon" className="size-3.5 shrink-0" />
 					<span className="tabular-nums">{label}</span>
 				</CollapsibleTrigger>
 				<CollapsiblePanel innerClassName="py-1">
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index 6db69a1..bf2e2e1 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -24,15 +24,15 @@ const buttonVariants = cva(
 				icon: 'size-10 pointer-coarse:size-11',
 				'icon-lg': 'size-11',
 				'icon-sm': 'size-8 pointer-coarse:size-11',
-				'icon-xl': 'size-11 [&_svg:not([class*="size-"])]:size-5',
+				'icon-xl': "size-11 [&_svg:not([class*='size-'])]:size-5",
 				'icon-xs':
 					'size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] pointer-coarse:size-11 not-in-data-[slot=input-group]:[&_svg:not([class*="size-"])]:size-4',
 				lg: 'h-11 min-w-11 px-[calc(--spacing(3.5)-1px)]',
 				sm:
 					'h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] pointer-coarse:min-h-11 pointer-coarse:min-w-11',
-				xl: 'h-12 min-w-12 px-[calc(--spacing(4)-1px)] text-lg [&_svg:not([class*="size-"])]:size-5',
+				xl: "h-12 min-w-12 px-[calc(--spacing(4)-1px)] text-lg [&_svg:not([class*='size-'])]:size-5",
 				xs:
-					'h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] pointer-coarse:min-h-11 pointer-coarse:min-w-11 [&_svg:not([class*="size-"])]:size-3.5',
+					"h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] pointer-coarse:min-h-11 pointer-coarse:min-w-11 [&_svg:not([class*='size-'])]:size-3.5",
 			},
 			variant: {
 				default:
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index 31f8860..46300eb 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/packages/ui/src/components/collapsible.tsx
@@ -42,7 +42,7 @@ const CollapsibleTrigger = React.forwardRef<
   CollapsibleTriggerProps
 >(({ className, asChild, nativeButton, children, render, ...props }, ref) => {
   const triggerClassName = cn(
-    "group/trigger flex w-full cursor-pointer items-center justify-between text-start text-sm font-medium outline-none [overflow-wrap:anywhere] transition-[color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow]",
+    "group/trigger flex w-full cursor-pointer items-center justify-between text-start text-sm font-medium outline-none [overflow-wrap:anywhere] transition-[box-shadow]",
     "focus-visible:ring-[3px] focus-visible:ring-ring/50",
     "disabled:pointer-events-none disabled:opacity-64",
     "[&_[data-slot=collapsible-icon]]:transition-transform [&_[data-slot=collapsible-icon]]:duration-(--duration-slow)",
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
index d3d82e2..20fabb1 100644
--- a/packages/ui/src/components/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -85,14 +85,29 @@ function CommandInput({
   );
 }
 
+/**
+ * Small pickers such as a model or worktree list pack their rows tighter than a command palette: 4px of padding,
+ * a thin scrollbar, and group headings in small, quiet text so the rows carry the weight.
+ */
+const COMPACT_LIST_CLASS =
+  "[scrollbar-width:thin] scroll-py-1 p-1 not-empty:scroll-py-1 not-empty:p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-[0.6875rem] [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-subtle-foreground";
+
 function CommandList({
   className,
   children,
+  density = "default",
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+}: React.ComponentProps<typeof CommandPrimitive.List> & {
+  /** `compact` is for small pickers in a popover; the default suits a full command palette. */
+  density?: "default" | "compact";
+}) {
   return (
     <CommandPrimitive.List
-      className={cn("relative not-empty:scroll-py-2 not-empty:p-2 max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+      className={cn(
+        "relative not-empty:scroll-py-2 not-empty:p-2 max-h-[300px] overflow-y-auto overflow-x-hidden",
+        density === "compact" && COMPACT_LIST_CLASS,
+        className,
+      )}
       data-slot="command-list"
       {...props}
     >
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index 922bd9f..296d656 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -124,7 +124,7 @@ function DropdownMenuItem({
 		data-[variant=destructive]:data-[highlighted]:text-destructive
 		data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-default items-center gap-2 pointer-coarse:min-h-11
 		rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none
-		data-[disabled]:opacity-64 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+		data-[disabled]:opacity-64 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
 		className,
 	);
 
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
index 3b72ae1..34350da 100644
--- a/packages/ui/src/components/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -50,6 +50,14 @@ function PopoverClose({ asChild, children, render, nativeButton, ...props }: Pop
 	);
 }
 
+/**
+ * A lighter edge for compact menus that float over busy content: a hairline ring and a soft drop shadow in place of
+ * the border, on a 10px corner whose 4px inset gives rows a concentric 6px corner. Works on `PopoverContent` and on
+ * any panel that hangs beside one.
+ */
+const popoverSurfaceClass =
+	'rounded-lg border-0 bg-popover text-popover-foreground shadow-[0_0_0_1px_oklch(0_0_0/0.08),0_4px_16px_-4px_oklch(0_0_0/0.14)] dark:shadow-[0_0_0_1px_oklch(1_0_0/0.12),0_4px_16px_-4px_oklch(0_0_0/0.45)]';
+
 type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> & {
 	align?: 'start' | 'center' | 'end';
 	sideOffset?: number;
@@ -150,6 +158,7 @@ export {
 	PopoverClose,
 	PopoverContent,
 	PopoverDescription,
+	popoverSurfaceClass,
 	PopoverTitle,
 	PopoverTrigger,
 };
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 8fd4f85..4c0e279 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -15,7 +15,11 @@ function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive
 function revealInline(scroller: HTMLElement, target: HTMLElement) {
 	const frame = scroller.getBoundingClientRect();
 	const box = target.getBoundingClientRect();
-	if (box.left < frame.left) scroller.scrollBy({ left: box.left - frame.left - 8 });
+	// A tab wider than the list shows its start, where the label begins, rather than its end.
+	if (box.width >= frame.width) {
+		const rtl = getComputedStyle(scroller).direction === 'rtl';
+		scroller.scrollBy({ left: rtl ? box.right - frame.right : box.left - frame.left });
+	} else if (box.left < frame.left) scroller.scrollBy({ left: box.left - frame.left - 8 });
 	else if (box.right > frame.right) scroller.scrollBy({ left: box.right - frame.right + 8 });
 }
 
@@ -49,7 +53,8 @@ function TabsList({ className, children, style, ...props }: React.ComponentProps
 			className={cn(
 				'bg-muted text-muted-foreground/70 relative inline-flex w-fit max-w-full items-center justify-center rounded-md p-0.5',
 				// Scroll only when needed, so a list that fits keeps its focus rings uncropped.
-				overflowing && 'justify-start overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+				// Sideways only: a strip never scrolls vertically, and no bar takes height from the tabs.
+				overflowing && 'justify-start overflow-x-auto overflow-y-hidden overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
 				className,
 			)}
 			style={fade.style ? { ...style, ...fade.style } : style}
diff --git a/packages/ui/src/components/workspace-kit/primitives.tsx b/packages/ui/src/components/workspace-kit/primitives.tsx
index f96f4bd..2b1074c 100644
--- a/packages/ui/src/components/workspace-kit/primitives.tsx
+++ b/packages/ui/src/components/workspace-kit/primitives.tsx
@@ -29,15 +29,37 @@ const ICON_BUTTON_SIZE = {
 	lg: 'size-8',
 } as const;
 
-type TooltipIconButtonProps = Omit<React.ComponentProps<'button'>, 'aria-label'> & {
-	label: string;
-	side?: 'top' | 'right' | 'bottom' | 'left';
+type IconButtonOptions = {
 	variant?: keyof typeof ICON_BUTTON_VARIANT;
 	size?: keyof typeof ICON_BUTTON_SIZE;
 	/** Set false when neighbours sit closer than the extended hit area. */
 	extendHitArea?: boolean;
+	/** For a menu trigger: it keeps its hover fill while the menu is open, so the menu reads as coming from it. */
+	menu?: boolean;
 };
 
+/**
+ * The look of `TooltipIconButton`, for icon-only controls that render their own
+ * element, such as a menu trigger. Hover state is instant; press scales to 0.96.
+ */
+export function iconButtonClass({ variant = 'ghost', size = 'md', extendHitArea = true, menu = false }: IconButtonOptions = {}) {
+	return cn(
+		'grid shrink-0 cursor-pointer place-items-center rounded-md disabled:cursor-not-allowed disabled:opacity-40',
+		ICON_BUTTON_VARIANT[variant],
+		ICON_BUTTON_SIZE[size],
+		pressClass,
+		focusRingClass,
+		extendHitArea && hitAreaClass,
+		menu && 'data-popup-open:bg-overlay-hover',
+	);
+}
+
+type TooltipIconButtonProps = Omit<React.ComponentProps<'button'>, 'aria-label'> &
+	Omit<IconButtonOptions, 'menu'> & {
+		label: string;
+		side?: 'top' | 'right' | 'bottom' | 'left';
+	};
+
 /**
  * Icon-only button with a matching tooltip and accessible name. Hover state is
  * instant; press scales to 0.96.
@@ -45,9 +67,9 @@ type TooltipIconButtonProps = Omit<React.ComponentProps<'button'>, 'aria-label'>
 export function TooltipIconButton({
 	label,
 	side = 'top',
-	variant = 'ghost',
-	size = 'md',
-	extendHitArea = true,
+	variant,
+	size,
+	extendHitArea,
 	className,
 	children,
 	...props
@@ -59,15 +81,7 @@ export function TooltipIconButton({
 					<button
 						type="button"
 						aria-label={label}
-						className={cn(
-							'grid shrink-0 cursor-pointer place-items-center rounded-md disabled:cursor-not-allowed disabled:opacity-40',
-							ICON_BUTTON_VARIANT[variant],
-							ICON_BUTTON_SIZE[size],
-							pressClass,
-							focusRingClass,
-							extendHitArea && hitAreaClass,
-							className,
-						)}
+						className={cn(iconButtonClass({ variant, size, extendHitArea }), className)}
 						{...props}
 					>
 						{children}
diff --git a/packages/ui/src/components/workspace-kit/use-element-size.ts b/packages/ui/src/components/workspace-kit/use-element-size.ts
new file mode 100644
index 0000000..e9ad355
--- /dev/null
+++ b/packages/ui/src/components/workspace-kit/use-element-size.ts
@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+
+import { useLatest } from './use-latest';
+
+// Layout effects warn during React 18 server rendering; plain effects are enough there.
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+export type ElementSize = { width: number; height: number };
+
+/** The callback ref the hooks hand back; a plain function type so declaration builds can name it. */
+export type MeasureRef<T extends HTMLElement> = (node: T | null) => void;
+
+/** Before its first measurement an element reads as unbounded, so a layout starts roomy rather than cramped. */
+const UNMEASURED: ElementSize = { width: Infinity, height: Infinity };
+
+/**
+ * Observes whichever element the returned callback ref lands on. The ref binds again when that element is replaced,
+ * so a subtree that remounts (a layout switch, an empty state giving way to content) keeps being measured.
+ */
+function useResizeTarget<T extends HTMLElement>(onResize: (node: T, entry: ResizeObserverEntry) => void): MeasureRef<T> {
+	const [node, setNode] = React.useState<T | null>(null);
+	const latest = useLatest(onResize);
+	useIsomorphicLayoutEffect(() => {
+		if (!node) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) latest.current(node, entry);
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [node, latest]);
+	return setNode;
+}
+
+/**
+ * An element's content-box size, as `[ref, size]`. With `ignoreHidden`, a 0×0 report keeps the last real size: a
+ * hidden element (a background tab, an inactive panel) measures nothing, and re-laying it out for a size nobody
+ * sees would remount or repaint whatever depends on it.
+ */
+export function useElementSize<T extends HTMLElement = HTMLElement>({ ignoreHidden = false }: { ignoreHidden?: boolean } = {}): [MeasureRef<T>, ElementSize] {
+	const [size, setSize] = React.useState<ElementSize>(UNMEASURED);
+	const ref = useResizeTarget<T>((_, entry) => {
+		const { width, height } = entry.contentRect;
+		if (ignoreHidden && width === 0 && height === 0) return;
+		setSize((current) => (current.width === width && current.height === height ? current : { width, height }));
+	});
+	return [ref, size];
+}
+
+/**
+ * How much width a scroller's vertical scrollbar takes, as `[ref, inset]`; 0 where scrollbars overlay the content.
+ * Content outside the scroller can take the same inset to stay on the scrolled content's axis. The content box
+ * narrows when a scrollbar appears, so the scroller starting to scroll is caught too.
+ */
+export function useScrollbarInset<T extends HTMLElement = HTMLElement>(): [MeasureRef<T>, number] {
+	const [inset, setInset] = React.useState(0);
+	const ref = useResizeTarget<T>((node) => {
+		const style = getComputedStyle(node);
+		// Unset widths parse as NaN in some environments, which would poison the inset.
+		const borders = (parseFloat(style.borderInlineStartWidth) || 0) + (parseFloat(style.borderInlineEndWidth) || 0);
+		setInset(Math.max(0, node.offsetWidth - node.clientWidth - borders));
+	});
+	return [ref, inset];
+}
diff --git a/packages/ui/src/lib/motion/fluid-highlight.tsx b/packages/ui/src/lib/motion/fluid-highlight.tsx
index 6acb118..0ed0608 100644
--- a/packages/ui/src/lib/motion/fluid-highlight.tsx
+++ b/packages/ui/src/lib/motion/fluid-highlight.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { motion, useReducedMotion } from 'motion/react';
 
 import { cn } from '../utils';
@@ -23,6 +23,24 @@ const TARGET_SELECTOR =
 	'[data-highlighted]:not([data-highlighted="false"]), [data-selected="true"], [data-pressed]:not([data-pressed="false"])';
 const OBSERVED_ATTRIBUTES = ['data-highlighted', 'data-selected', 'data-pressed'];
 
+/**
+ * Where `target` sits inside `container`, in the container's own unscaled pixels. Popups scale in from 95%, and a
+ * transform changes no attribute or size to re-measure on, so a rect read on the first frame is shrunken; dividing
+ * by the container's current scale gives the size and offset it settles at. Pass `box` when the caller has already
+ * measured the container.
+ */
+export function unscaledRect(target: Element, container: HTMLElement, box = container.getBoundingClientRect()): Rect {
+	const t = target.getBoundingClientRect();
+	const scaleX = box.width / container.offsetWidth || 1;
+	const scaleY = box.height / container.offsetHeight || 1;
+	return {
+		top: (t.top - box.top) / scaleY,
+		left: (t.left - box.left) / scaleX,
+		width: t.width / scaleX,
+		height: t.height / scaleY,
+	};
+}
+
 /**
  * Track the highlighted descendant of `container` and return its rect in the
  * container's padding-box coordinates. Updates on highlight changes, DOM
@@ -40,14 +58,13 @@ function useFluidHighlight(container: HTMLElement | null): { rect: Rect; visible
 				setState((s) => (s ? { ...s, visible: false } : s));
 				return;
 			}
-			const t = target.getBoundingClientRect();
-			const c = container.getBoundingClientRect();
+			// Unscaled, or a popup still scaling in leaves the highlight at the shrunken size of its first frame.
+			const offset = unscaledRect(target, container);
 			setState({
 				rect: {
-					top: t.top - c.top - container.clientTop + container.scrollTop,
-					left: t.left - c.left - container.clientLeft,
-					width: t.width,
-					height: t.height,
+					...offset,
+					top: offset.top - container.clientTop + container.scrollTop,
+					left: offset.left - container.clientLeft,
 				},
 				visible: true,
 			});
@@ -96,9 +113,10 @@ export function FluidHighlight({ className, inset = 0 }: { className?: string; i
 	const reduce = useReducedMotion();
 	const tier = useSpringTiers().fast;
 
-	const mountRef = (el: HTMLElement | null) => {
+	// Stable, so React doesn't detach and reattach it (and set state again) on every render.
+	const mountRef = useCallback((el: HTMLElement | null) => {
 		setContainer((el?.offsetParent as HTMLElement | null) ?? el?.parentElement ?? null);
-	};
+	}, []);
 
 	const rect = state
 		? {
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 0b2d24f..a322af5 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -228,6 +228,31 @@
   #__next, [data-nextjs-root-layout] {
     isolation: isolate;
   }
+  @media (pointer: fine) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: color-mix(in oklch, var(--foreground) 14%, transparent) transparent;
+    }
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: color-mix(in oklch, var(--foreground) 14%, transparent);
+      border: 3px solid transparent;
+      background-clip: content-box;
+      border-radius: 9999px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: color-mix(in oklch, var(--foreground) 20%, transparent);
+    }
+    ::-webkit-scrollbar-thumb:active {
+      background-color: color-mix(in oklch, var(--foreground) 26%, transparent);
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       scroll-behavior: auto !important;
@@ -511,28 +536,3 @@
 [data-slot="portal-root"] > * {
   pointer-events: auto;
 }
-@media (pointer: fine) {
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in oklch, var(--foreground) 14%, transparent) transparent;
-  }
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: color-mix(in oklch, var(--foreground) 14%, transparent);
-    border: 3px solid transparent;
-    background-clip: content-box;
-    border-radius: 9999px;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in oklch, var(--foreground) 20%, transparent);
-  }
-  ::-webkit-scrollbar-thumb:active {
-    background-color: color-mix(in oklch, var(--foreground) 26%, transparent);
-  }
-}
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 2790653..aa40de1 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -293,6 +293,35 @@ export const constructiveTheme = {
 		'#__next, [data-nextjs-root-layout]': {
 			isolation: 'isolate',
 		},
+		// Thin overlay scrollbars on fine pointers — rests at a 14% foreground
+		// tint, deepens on hover/drag; touch keeps its native momentum bars. In the
+		// base layer, so a utility such as `scrollbar-hide` on one element still wins.
+		'@media (pointer: fine)': {
+			'*': {
+				'scrollbar-width': 'thin',
+				'scrollbar-color':
+					'color-mix(in oklch, var(--foreground) 14%, transparent) transparent',
+			},
+			'::-webkit-scrollbar': {
+				width: '10px',
+				height: '10px',
+			},
+			'::-webkit-scrollbar-track, ::-webkit-scrollbar-corner': {
+				background: 'transparent',
+			},
+			'::-webkit-scrollbar-thumb': {
+				'background-color': 'color-mix(in oklch, var(--foreground) 14%, transparent)',
+				border: '3px solid transparent',
+				'background-clip': 'content-box',
+				'border-radius': '9999px',
+			},
+			'::-webkit-scrollbar-thumb:hover': {
+				'background-color': 'color-mix(in oklch, var(--foreground) 20%, transparent)',
+			},
+			'::-webkit-scrollbar-thumb:active': {
+				'background-color': 'color-mix(in oklch, var(--foreground) 26%, transparent)',
+			},
+		},
 		'@media (prefers-reduced-motion: reduce)': {
 			'*, *::before, *::after': {
 				'scroll-behavior': 'auto !important',
@@ -455,34 +484,6 @@ export const constructiveTheme = {
 		'[data-slot="portal-root"] > *': {
 			'pointer-events': 'auto',
 		},
-		// Thin overlay scrollbars on fine pointers — rests at a 14% foreground
-		// tint, deepens on hover/drag; touch keeps its native momentum bars.
-		'@media (pointer: fine)': {
-			'*': {
-				'scrollbar-width': 'thin',
-				'scrollbar-color':
-					'color-mix(in oklch, var(--foreground) 14%, transparent) transparent',
-			},
-			'::-webkit-scrollbar': {
-				width: '10px',
-				height: '10px',
-			},
-			'::-webkit-scrollbar-track, ::-webkit-scrollbar-corner': {
-				background: 'transparent',
-			},
-			'::-webkit-scrollbar-thumb': {
-				'background-color': 'color-mix(in oklch, var(--foreground) 14%, transparent)',
-				border: '3px solid transparent',
-				'background-clip': 'content-box',
-				'border-radius': '9999px',
-			},
-			'::-webkit-scrollbar-thumb:hover': {
-				'background-color': 'color-mix(in oklch, var(--foreground) 20%, transparent)',
-			},
-			'::-webkit-scrollbar-thumb:active': {
-				'background-color': 'color-mix(in oklch, var(--foreground) 26%, transparent)',
-			},
-		},
 	},
 } as const satisfies ConstructiveThemeDefinition;
 

From 8b0d727446cb69324f3522659520a67f11f67e5b Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Fri, 23 Oct 2026 18:36:27 +0700
Subject: [PATCH 3/4] feat(coding-agent): add the coding agent workspace
 template

A workspace for running several coding sessions at once:

- Sessions in a tab strip or a project sidebar; each has a transcript
  built from the AI kit, a composer, a resizable side panel (diff review
  with line comments, file tabs, a browser tab, file tree) and a
  terminal dock
- Harness model: sessions play a script, or show a host's events
  (`events` array or `createHarnessStore()`), folded by the pure
  `reduceHarness`; controls reach the host through onAction
- Sub-agents, orchestrator/worker runs, messages between agents,
  handoffs, phases and a shared task board, with Agents and Tasks tabs
- Worktrees, pull requests and CI checks as events; changes are kept per
  worktree; a toolbar chip shows each worktree's PR and failing checks
- A conversation rail on the transcript's edge to preview and jump
  between turns; long threads render in chunks and diffs draw lazily
- Demo data, stories (including a 120-turn stress test), tests, and the
  registry item
---
 .agents/skills/constructive-blocks/SKILL.md   |   1 +
 .../references/surfaces-and-ownership.md      |   2 +
 AGENTS.md                                     |   2 +-
 apps/registry/REGISTRY.md                     |   1 +
 apps/registry/scripts/smoke-install.ts        |  57 ++
 packages/ui/package.json                      |   2 +
 packages/ui/registry.json                     | 263 ++++++-
 .../components/coding-agent/agents-panel.tsx  | 186 +++++
 .../components/coding-agent/browser-panel.tsx | 186 +++++
 .../coding-agent/code-surface-theme.ts        |  98 +++
 .../coding-agent/coding-agent-context.tsx     |  86 ++
 .../components/coding-agent/coding-agent.tsx  | 337 ++++++++
 .../components/coding-agent/command-menu.tsx  | 150 ++++
 .../components/coding-agent/demo-browser.tsx  | 129 +++
 .../coding-agent/demo-invitations.ts          | 596 ++++++++++++++
 .../src/components/coding-agent/demo-long.ts  | 136 ++++
 .../components/coding-agent/demo-security.ts  | 421 ++++++++++
 .../src/components/coding-agent/demo-shell.ts |  48 ++
 .../ui/src/components/coding-agent/demo.ts    | 527 +++++++++++++
 .../coding-agent/file-picker-dialog.tsx       |  50 ++
 .../components/coding-agent/harness-store.ts  |  56 ++
 .../ui/src/components/coding-agent/harness.ts | 732 ++++++++++++++++++
 .../src/components/coding-agent/home-view.tsx | 132 ++++
 .../ui/src/components/coding-agent/index.ts   |  45 ++
 .../components/coding-agent/new-session.tsx   | 129 +++
 .../components/coding-agent/request-dock.tsx  |  71 ++
 .../components/coding-agent/review-panel.tsx  | 445 +++++++++++
 .../coding-agent/run-presentation.tsx         |  70 ++
 .../coding-agent/session-composer.tsx         | 346 +++++++++
 .../components/coding-agent/session-glyph.tsx |  66 ++
 .../coding-agent/session-header.tsx           | 221 ++++++
 .../coding-agent/session-layout.tsx           |  76 ++
 .../coding-agent/session-sidebar.tsx          | 149 ++++
 .../coding-agent/session-surface.ts           |  50 ++
 .../components/coding-agent/session-tabs.tsx  | 163 ++++
 .../coding-agent/session-timeline.tsx         | 552 +++++++++++++
 .../components/coding-agent/session-view.tsx  | 348 +++++++++
 .../src/components/coding-agent/shortcuts.ts  |  40 +
 .../components/coding-agent/side-panel.tsx    | 339 ++++++++
 .../src/components/coding-agent/tab-strip.ts  |   9 +
 .../coding-agent/terminal-panel.tsx           | 162 ++++
 .../src/components/coding-agent/turn-rail.tsx | 325 ++++++++
 .../ui/src/components/coding-agent/types.ts   | 149 ++++
 .../coding-agent/use-draft-context.ts         |  99 +++
 .../components/coding-agent/use-harness.ts    | 572 ++++++++++++++
 .../components/coding-agent/use-panel-tabs.ts | 165 ++++
 .../coding-agent/workspace-tree.tsx           |  82 ++
 .../coding-agent/worktree-picker.tsx          | 406 ++++++++++
 .../ui/src/stories/CodingAgent.stories.tsx    | 112 +++
 .../stories/break-ui/CodingAgent.stories.tsx  |  38 +
 .../src/stories/break-ui/coding-worst-case.ts | 211 +++++
 packages/ui/test/coding-agent.test.tsx        | 491 ++++++++++++
 .../workspace-template-hydration.test.tsx     |  37 +
 pnpm-lock.yaml                                | 536 ++++++++++++-
 54 files changed, 10655 insertions(+), 47 deletions(-)
 create mode 100644 packages/ui/src/components/coding-agent/agents-panel.tsx
 create mode 100644 packages/ui/src/components/coding-agent/browser-panel.tsx
 create mode 100644 packages/ui/src/components/coding-agent/code-surface-theme.ts
 create mode 100644 packages/ui/src/components/coding-agent/coding-agent-context.tsx
 create mode 100644 packages/ui/src/components/coding-agent/coding-agent.tsx
 create mode 100644 packages/ui/src/components/coding-agent/command-menu.tsx
 create mode 100644 packages/ui/src/components/coding-agent/demo-browser.tsx
 create mode 100644 packages/ui/src/components/coding-agent/demo-invitations.ts
 create mode 100644 packages/ui/src/components/coding-agent/demo-long.ts
 create mode 100644 packages/ui/src/components/coding-agent/demo-security.ts
 create mode 100644 packages/ui/src/components/coding-agent/demo-shell.ts
 create mode 100644 packages/ui/src/components/coding-agent/demo.ts
 create mode 100644 packages/ui/src/components/coding-agent/file-picker-dialog.tsx
 create mode 100644 packages/ui/src/components/coding-agent/harness-store.ts
 create mode 100644 packages/ui/src/components/coding-agent/harness.ts
 create mode 100644 packages/ui/src/components/coding-agent/home-view.tsx
 create mode 100644 packages/ui/src/components/coding-agent/index.ts
 create mode 100644 packages/ui/src/components/coding-agent/new-session.tsx
 create mode 100644 packages/ui/src/components/coding-agent/request-dock.tsx
 create mode 100644 packages/ui/src/components/coding-agent/review-panel.tsx
 create mode 100644 packages/ui/src/components/coding-agent/run-presentation.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-composer.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-glyph.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-header.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-layout.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-sidebar.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-surface.ts
 create mode 100644 packages/ui/src/components/coding-agent/session-tabs.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-timeline.tsx
 create mode 100644 packages/ui/src/components/coding-agent/session-view.tsx
 create mode 100644 packages/ui/src/components/coding-agent/shortcuts.ts
 create mode 100644 packages/ui/src/components/coding-agent/side-panel.tsx
 create mode 100644 packages/ui/src/components/coding-agent/tab-strip.ts
 create mode 100644 packages/ui/src/components/coding-agent/terminal-panel.tsx
 create mode 100644 packages/ui/src/components/coding-agent/turn-rail.tsx
 create mode 100644 packages/ui/src/components/coding-agent/types.ts
 create mode 100644 packages/ui/src/components/coding-agent/use-draft-context.ts
 create mode 100644 packages/ui/src/components/coding-agent/use-harness.ts
 create mode 100644 packages/ui/src/components/coding-agent/use-panel-tabs.ts
 create mode 100644 packages/ui/src/components/coding-agent/workspace-tree.tsx
 create mode 100644 packages/ui/src/components/coding-agent/worktree-picker.tsx
 create mode 100644 packages/ui/src/stories/CodingAgent.stories.tsx
 create mode 100644 packages/ui/src/stories/break-ui/CodingAgent.stories.tsx
 create mode 100644 packages/ui/src/stories/break-ui/coding-worst-case.ts
 create mode 100644 packages/ui/test/coding-agent.test.tsx

diff --git a/.agents/skills/constructive-blocks/SKILL.md b/.agents/skills/constructive-blocks/SKILL.md
index b4126e4..37c0813 100644
--- a/.agents/skills/constructive-blocks/SKILL.md
+++ b/.agents/skills/constructive-blocks/SKILL.md
@@ -101,6 +101,7 @@ to endpoints, sessions, adapters, or tenant data.
 | Application shell (sidebar rail, drawer, views) | `workspace-kit` |
 | AI or agent UI | `ai` |
 | Complete agent workspace (chat, integrations, skills, agent canvas) | `agents-builder` |
+| Coding agent workspace (parallel sessions, diff review, file and browser tabs, terminal) | `coding-agent` |
 | Secure document rooms shared inside and outside an organization (roles, folder shares, agreements, Q&A, insights) | `data-rooms` |
 | Global commands and workflows | `command-palette` |
 | Metadata-driven data grid | `sheets` |
diff --git a/.agents/skills/constructive-blocks/references/surfaces-and-ownership.md b/.agents/skills/constructive-blocks/references/surfaces-and-ownership.md
index 8e8b93e..892fbc5 100644
--- a/.agents/skills/constructive-blocks/references/surfaces-and-ownership.md
+++ b/.agents/skills/constructive-blocks/references/surfaces-and-ownership.md
@@ -11,6 +11,7 @@ live `shadcn@latest search` and `view`.
 | Button, form, overlay, navigation, or layout | A primitive name, `form-kit`, `overlay-kit`, `layout-kit`, `workspace-kit` | Installed source owns presentation; the host owns application behavior. |
 | AI chat or agent traces | `ai` | Presentational only. The host owns the model runtime, streaming reducer, tools, IPC, and persistence. |
 | Agent workspace template | `agents-builder` | Installed source owns the chat, integrations, skills, and agent-canvas views plus scripted playback; the host supplies workspace data and owns OAuth, persistence, routing, and model runs. |
+| Coding agent workspace | `coding-agent` | Installed source owns session tabs and the sidebar layout, the transcript and composer, diff review with line comments, file and browser tabs, the terminal dock, and scripted playback; the host supplies projects and sessions and owns the agent runtime, the checkout, shell commands, browser previews, and persistence. |
 | Secure document rooms | `data-rooms` | Installed source owns the rooms, documents, people, Q&A, insights, settings, and access-map views, the access explanations and previews, optimistic local updates, and scripted assistant answers; the host supplies workspace data and owns storage, delivery, authorization, the activity log, and assistant runs. |
 | Searchable application commands | `command-palette` | The npm package owns the headless engine; installed source owns the dialog and task presentation; the host owns routing and actions. |
 | Arbitrary application-table CRUD | `sheets` | Installed source owns the grid; the data runtime interprets current `_meta`; the host owns endpoint and session discovery. |
@@ -72,6 +73,7 @@ and dependency closure. The public documentation provides richer examples:
 - Org Chart: `https://constructive-io.github.io/blocks/blocks/org-chart/`
 - Storage: `https://constructive-io.github.io/blocks/blocks/storage/` (Storage Browser at `/blocks/storage/browser/`, the feature pack at `/blocks/features/storage/`)
 - Agents Builder: `https://constructive-io.github.io/blocks/blocks/agents-builder/`
+- Coding Agent: `https://constructive-io.github.io/blocks/blocks/coding-agent/`
 - Data Rooms: `https://constructive-io.github.io/blocks/blocks/data-rooms/`
 - Billing: `https://constructive-io.github.io/blocks/blocks/billing/` (Billing Account at `/blocks/billing/account/`, Billing Console at `/blocks/billing/console/`)
 - Feature packs: `https://constructive-io.github.io/blocks/blocks/features/`
diff --git a/AGENTS.md b/AGENTS.md
index 148eefd..412f672 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -55,7 +55,7 @@ Use Node 24 LTS and pnpm 10.28.0, then run `pnpm check`, `pnpm build:pages`, and
   on `motion/react` or CSS, and keep npm package peers usable on React 18.
   jsdom lacks `CSS.escape`, which React's ViewTransition calls; polyfill it in
   tests that render these boundaries.
-- Workspace templates (`agents-builder`, `billing-account`, `billing-console`)
+- Workspace templates (`agents-builder`, `coding-agent`, `billing-account`, `billing-console`)
   share `packages/ui/src/components/workspace-kit` (shell, sidebar rail and
   drawer, view frames, filter pills, surfaces such as `Panel` and
   `TableSurface`, and the pan-and-zoom canvas used by Agents Builder and
diff --git a/apps/registry/REGISTRY.md b/apps/registry/REGISTRY.md
index 122850b..e18126c 100644
--- a/apps/registry/REGISTRY.md
+++ b/apps/registry/REGISTRY.md
@@ -41,6 +41,7 @@ pnpm dlx shadcn@latest add @constructive/workspace-kit
 pnpm dlx shadcn@latest add @constructive/billing-account
 pnpm dlx shadcn@latest add @constructive/account-phone-numbers
 pnpm dlx shadcn@latest add @constructive/agents-builder
+pnpm dlx shadcn@latest add @constructive/coding-agent
 ```
 
 `feature-pack-*` installs are standalone views and write their machine-readable
diff --git a/apps/registry/scripts/smoke-install.ts b/apps/registry/scripts/smoke-install.ts
index 9c133e0..eb8b7e7 100644
--- a/apps/registry/scripts/smoke-install.ts
+++ b/apps/registry/scripts/smoke-install.ts
@@ -482,6 +482,63 @@ export function AiRegistrySmokeConsumer() {
 		],
 		strictNullChecks: true,
 	},
+	{
+		name: 'coding-agent',
+		expected: [
+			'src/components/ui/coding-agent/browser-panel.tsx',
+			'src/components/ui/coding-agent/code-surface-theme.ts',
+			'src/components/ui/coding-agent/coding-agent-context.tsx',
+			'src/components/ui/coding-agent/coding-agent.tsx',
+			'src/components/ui/coding-agent/command-menu.tsx',
+			'src/components/ui/coding-agent/demo.ts',
+			'src/components/ui/coding-agent/home-view.tsx',
+			'src/components/ui/coding-agent/index.ts',
+			'src/components/ui/coding-agent/new-session.tsx',
+			'src/components/ui/coding-agent/review-panel.tsx',
+			'src/components/ui/coding-agent/session-composer.tsx',
+			'src/components/ui/coding-agent/session-glyph.tsx',
+			'src/components/ui/coding-agent/session-sidebar.tsx',
+			'src/components/ui/coding-agent/session-tabs.tsx',
+			'src/components/ui/coding-agent/session-timeline.tsx',
+			'src/components/ui/coding-agent/session-view.tsx',
+			'src/components/ui/coding-agent/shortcuts.ts',
+			'src/components/ui/coding-agent/side-panel.tsx',
+			'src/components/ui/coding-agent/terminal-panel.tsx',
+			'src/components/ui/coding-agent/types.ts',
+			'src/components/ui/coding-agent/use-harness.ts',
+			'src/components/ui/coding-agent/harness.ts',
+			'src/components/ui/coding-agent/harness-store.ts',
+			'src/components/ui/coding-agent/agents-panel.tsx',
+			'src/components/ui/coding-agent/worktree-picker.tsx',
+			'src/components/ui/coding-agent/turn-rail.tsx',
+			'src/components/ui/coding-agent/demo-invitations.ts',
+			'src/components/ui/coding-agent/demo-security.ts',
+			'src/components/ui/coding-agent/demo-long.ts',
+			'src/components/ui/coding-agent/demo-browser.tsx',
+			'src/components/ui/coding-agent/demo-shell.ts',
+			'src/components/ui/coding-agent/file-picker-dialog.tsx',
+			'src/components/ui/coding-agent/request-dock.tsx',
+			'src/components/ui/coding-agent/run-presentation.tsx',
+			'src/components/ui/coding-agent/session-header.tsx',
+			'src/components/ui/coding-agent/session-layout.tsx',
+			'src/components/ui/coding-agent/tab-strip.ts',
+			'src/components/ui/coding-agent/use-draft-context.ts',
+			'src/components/ui/coding-agent/use-panel-tabs.ts',
+			'src/components/ui/coding-agent/session-surface.ts',
+			'src/components/ui/coding-agent/workspace-tree.tsx',
+			'src/components/ui/agents-builder/agent-status.tsx',
+			'src/components/ui/agents-builder/mascot.tsx',
+			'src/components/ui/agents-builder/playback.ts',
+			'src/components/ui/ai/ask-card.tsx',
+			'src/components/ui/ai/model-selector.tsx',
+			'src/components/ui/workspace-kit/shell.tsx',
+			'src/components/ui/workspace-kit/primitives.tsx',
+			'src/components/ui/command.tsx',
+			'src/components/ui/resizable.tsx',
+		],
+		expectedPackages: ['@pierre/diffs', '@pierre/trees'],
+		strictNullChecks: true,
+	},
 	{
 		name: 'data-rooms',
 		expected: [
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f0cef7d..32d7e82 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -845,6 +845,8 @@
     "@base-ui/react": "^1.0.0",
     "@hookform/resolvers": "^5.2.2",
     "@internationalized/date": "^3.10.1",
+    "@pierre/diffs": "~1.5.2",
+    "@pierre/trees": "1.0.0-beta.6",
     "@remixicon/react": "^4.8.0",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
diff --git a/packages/ui/registry.json b/packages/ui/registry.json
index 8b5ea30..2eb048b 100644
--- a/packages/ui/registry.json
+++ b/packages/ui/registry.json
@@ -233,6 +233,31 @@
           "#__next, [data-nextjs-root-layout]": {
             "isolation": "isolate"
           },
+          "@media (pointer: fine)": {
+            "*": {
+              "scrollbar-width": "thin",
+              "scrollbar-color": "color-mix(in oklch, var(--foreground) 14%, transparent) transparent"
+            },
+            "::-webkit-scrollbar": {
+              "width": "10px",
+              "height": "10px"
+            },
+            "::-webkit-scrollbar-track, ::-webkit-scrollbar-corner": {
+              "background": "transparent"
+            },
+            "::-webkit-scrollbar-thumb": {
+              "background-color": "color-mix(in oklch, var(--foreground) 14%, transparent)",
+              "border": "3px solid transparent",
+              "background-clip": "content-box",
+              "border-radius": "9999px"
+            },
+            "::-webkit-scrollbar-thumb:hover": {
+              "background-color": "color-mix(in oklch, var(--foreground) 20%, transparent)"
+            },
+            "::-webkit-scrollbar-thumb:active": {
+              "background-color": "color-mix(in oklch, var(--foreground) 26%, transparent)"
+            }
+          },
           "@media (prefers-reduced-motion: reduce)": {
             "*, *::before, *::after": {
               "scroll-behavior": "auto !important",
@@ -491,31 +516,6 @@
         },
         "[data-slot=\"portal-root\"] > *": {
           "pointer-events": "auto"
-        },
-        "@media (pointer: fine)": {
-          "*": {
-            "scrollbar-width": "thin",
-            "scrollbar-color": "color-mix(in oklch, var(--foreground) 14%, transparent) transparent"
-          },
-          "::-webkit-scrollbar": {
-            "width": "10px",
-            "height": "10px"
-          },
-          "::-webkit-scrollbar-track, ::-webkit-scrollbar-corner": {
-            "background": "transparent"
-          },
-          "::-webkit-scrollbar-thumb": {
-            "background-color": "color-mix(in oklch, var(--foreground) 14%, transparent)",
-            "border": "3px solid transparent",
-            "background-clip": "content-box",
-            "border-radius": "9999px"
-          },
-          "::-webkit-scrollbar-thumb:hover": {
-            "background-color": "color-mix(in oklch, var(--foreground) 20%, transparent)"
-          },
-          "::-webkit-scrollbar-thumb:active": {
-            "background-color": "color-mix(in oklch, var(--foreground) 26%, transparent)"
-          }
         }
       },
       "files": []
@@ -3595,6 +3595,10 @@
           "path": "registry/constructive/blocks/workspace-kit/menu.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "registry/constructive/blocks/workspace-kit/use-element-size.ts",
+          "type": "registry:lib"
+        },
         {
           "path": "registry/constructive/blocks/workspace-kit/middle-truncate.tsx",
           "type": "registry:component"
@@ -3801,6 +3805,211 @@
         }
       ]
     },
+    {
+      "name": "coding-agent",
+      "type": "registry:block",
+      "title": "Coding Agent",
+      "description": "A coding agent workspace template: sessions in a tab strip or a project sidebar, each with a chat transcript, a resizable side panel for reviewing diffs, reading files, previewing the app, following the session's other agents and its shared tasks, and a terminal dock. Sub-agents, orchestrator/worker runs and messages between agents show in the transcript, and sessions flag when any of their agents needs an answer.",
+      "categories": [
+        "block",
+        "application",
+        "ai"
+      ],
+      "docs": "Import: `import { CodingAgent, CODING_AGENT_DEMO, createHarnessStore } from '@/components/ui/coding-agent'`. Pass your own `data`, handle side effects through `onAction`, and draw your app in the browser tab with `renderBrowserPage`. Each session plays a `script`, or shows a real harness: pass an `events` log, or a store from `createHarnessStore()` and push events as they happen. Sub-agents, messages between agents, handoffs, phases, shared tasks, worktrees, pull requests and CI checks are all events.",
+      "dependencies": [
+        "lucide-react",
+        "motion",
+        "@pierre/diffs@~1.5.2",
+        "@pierre/trees@1.0.0-beta.6"
+      ],
+      "registryDependencies": [
+        "cn",
+        "use-controllable-state",
+        "initials",
+        "ai",
+        "agents-builder",
+        "alert-dialog",
+        "workspace-kit",
+        "button",
+        "command",
+        "dropdown-menu",
+        "input",
+        "input-group",
+        "label",
+        "resizable",
+        "tabs",
+        "textarea",
+        "intl",
+        "popover",
+        "compose-refs"
+      ],
+      "files": [
+        {
+          "path": "registry/constructive/blocks/coding-agent/browser-panel.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/code-surface-theme.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/coding-agent-context.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/coding-agent.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/command-menu.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/demo.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/home-view.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/index.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/new-session.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/review-panel.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-composer.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-glyph.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-sidebar.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-tabs.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-timeline.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-view.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/shortcuts.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-surface.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/side-panel.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/terminal-panel.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/types.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/workspace-tree.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/agents-panel.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/worktree-picker.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/turn-rail.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/demo-invitations.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/demo-security.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/demo-long.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/demo-browser.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/demo-shell.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/file-picker-dialog.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/request-dock.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/run-presentation.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-header.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/session-layout.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/tab-strip.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/use-draft-context.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/use-panel-tabs.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/harness-store.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/harness.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/coding-agent/use-harness.ts",
+          "type": "registry:lib"
+        }
+      ]
+    },
     {
       "name": "data-rooms",
       "type": "registry:block",
@@ -4436,7 +4645,9 @@
         "spinner",
         "command",
         "popover",
-        "kbd"
+        "kbd",
+        "fluid-highlight",
+        "compose-refs"
       ],
       "files": [
         {
diff --git a/packages/ui/src/components/coding-agent/agents-panel.tsx b/packages/ui/src/components/coding-agent/agents-panel.tsx
new file mode 100644
index 0000000..64b3d1b
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/agents-panel.tsx
@@ -0,0 +1,186 @@
+'use client';
+
+import { ArrowRight, CornerDownRight, Pause, Play, Square, Users } from 'lucide-react';
+import * as React from 'react';
+
+import { plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { AgentRing } from '../agents-builder/agent-status';
+import { formatCompact } from '../ai/context-ring';
+import { TaskList, TaskRow } from '../ai/task-row';
+import { focusRingClass, Segmented, TooltipIconButton } from '../workspace-kit/primitives';
+import { EmptyState } from '../workspace-kit/surface';
+import { ACTIVE_STATUSES, awaitsPerson, descendants, type HarnessTask, type HarnessView, isWorking, type RunView, runSignal, runTokens } from './harness';
+import { toolbarButtonClass } from './session-surface';
+import { MessageRoute, nameOf, plainText, recipientNames, runStateLabel } from './run-presentation';
+import type { SessionHarness } from './use-harness';
+
+type Filter = 'all' | 'working' | 'you' | 'messages';
+
+function RunRow({
+	run,
+	view,
+	selected,
+	harness,
+	onOpen
+}: {
+	run: RunView;
+	view: HarnessView;
+	selected: boolean;
+	harness: SessionHarness;
+	onOpen: () => void;
+}) {
+	const live = ACTIVE_STATUSES.includes(run.status);
+	const isRoot = run.id === view.rootRunId;
+	return (
+		<li
+			data-selected={selected || undefined}
+			// Children hang under their parent, a step in per level of nesting.
+			style={{ paddingInlineStart: `${run.depth * 18}px` }}
+			className="group/run relative"
+		>
+			<div className={cn('flex min-h-12 items-center gap-2.5 rounded-md px-2 py-1.5', selected ? 'bg-sidebar-accent' : 'hover:bg-overlay-hover')}>
+				<span className="grid size-4 shrink-0 place-items-center">
+					<AgentRing signal={runSignal(run, view)} />
+				</span>
+				<button type="button" onClick={onOpen} className={cn('min-w-0 flex-1 text-start', focusRingClass, 'rounded-sm')}>
+					<span className="flex min-w-0 items-center gap-1.5 text-[0.8125rem]">
+						<span className="truncate font-medium text-foreground">{run.name}</span>
+						{run.kind ? <span className="shrink-0 text-xs text-muted-foreground">{run.kind}</span> : null}
+					</span>
+					<span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+						<span className="shrink-0">{runStateLabel(run, view)}</span>
+						{run.workspace?.branch ? <span className="min-w-0 truncate font-mono">· {run.workspace.branch}</span> : null}
+					</span>
+				</button>
+				<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+					{formatCompact(runTokens(run))}
+					{run.usage.costUsd !== undefined ? ` · $${run.usage.costUsd.toFixed(2)}` : ''}
+				</span>
+				<span className="flex shrink-0 items-center opacity-0 group-hover/run:opacity-100 group-focus-within/run:opacity-100 pointer-coarse:opacity-100">
+					{!isRoot && live && run.capabilities?.pause !== false ? (
+						run.status === 'paused' ? (
+							<TooltipIconButton label={`Resume ${run.name}`} size="sm" className={toolbarButtonClass} onClick={() => harness.resume(run.id)}>
+								<Play aria-hidden="true" className="size-3.5" />
+							</TooltipIconButton>
+						) : (
+							<TooltipIconButton label={`Pause ${run.name}`} size="sm" className={toolbarButtonClass} onClick={() => harness.pause(run.id)}>
+								<Pause aria-hidden="true" className="size-3.5" />
+							</TooltipIconButton>
+						)
+					) : null}
+					{live && run.capabilities?.stop !== false ? (
+						<TooltipIconButton label={`Stop ${run.name}`} size="sm" className={toolbarButtonClass} onClick={() => harness.stop(run.id)}>
+							<Square aria-hidden="true" className="size-3 fill-current" />
+						</TooltipIconButton>
+					) : null}
+					<TooltipIconButton label={`Open ${run.name}`} size="sm" className={toolbarButtonClass} onClick={onOpen}>
+						<ArrowRight aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
+					</TooltipIconButton>
+				</span>
+			</div>
+		</li>
+	);
+}
+
+/**
+ * Every agent in the session as a tree hanging from the session's own agent: what each is doing, where it works,
+ * what it has used, and stop, pause and open. A filter narrows to the working ones, the ones that need you, or the
+ * messages they've sent each other.
+ */
+export function AgentsPanel({ harness, viewRunId, onOpenRun }: { harness: SessionHarness; viewRunId: string; onOpenRun: (runId: string) => void }) {
+	const view = harness.view;
+	const [filter, setFilter] = React.useState<Filter>('all');
+	const tree = [view.runs[view.rootRunId], ...descendants(view, view.rootRunId)].filter((run): run is RunView => Boolean(run));
+	const working = tree.filter(isWorking);
+	const waiting = tree.filter(awaitsPerson);
+	const shown = filter === 'working' ? working : filter === 'you' ? waiting : tree;
+	const tokens = tree.reduce((sum, run) => sum + runTokens(run), 0);
+
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<div className="flex h-10 shrink-0 items-center gap-3 px-3">
+				<p className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+					<span className="tabular-nums">{tree.length}</span> {plural(tree.length, { one: 'agent', other: 'agents' })} · <span className="tabular-nums">{working.length}</span> working ·{' '}
+					<span className="tabular-nums">{formatCompact(tokens)}</span> tokens
+				</p>
+				<Segmented
+					label="Show"
+					value={filter}
+					onChange={setFilter}
+					options={[
+						{ value: 'all', label: 'All' },
+						{ value: 'working', label: 'Working' },
+						{ value: 'you', label: waiting.length ? `Needs you ${waiting.length}` : 'Needs you' },
+						{ value: 'messages', label: 'Messages' }
+					]}
+				/>
+			</div>
+			<div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
+				{filter === 'messages' ? (
+					view.messages.length === 0 ? (
+						<EmptyState icon={CornerDownRight} title="No messages yet" description="When agents write to each other, the messages collect here." />
+					) : (
+						<ol className="flex flex-col gap-3 px-1 pt-1">
+							{view.messages.map((message) => (
+								<li key={message.id} className="flex flex-col gap-1">
+									<MessageRoute from={nameOf(view, message.from)} to={recipientNames(view, message.to)} />
+									<p className="ms-6 line-clamp-3 text-[0.8125rem] text-pretty text-foreground [overflow-wrap:anywhere]">{plainText(message.text)}</p>
+								</li>
+							))}
+						</ol>
+					)
+				) : shown.length === 0 ? (
+					<EmptyState icon={Users} title={filter === 'you' ? 'Nothing needs you' : 'No agents working'} description="Agents show up here as the session starts them." />
+				) : (
+					<ul className="flex flex-col gap-0.5">
+						{shown.map((run) => (
+							<RunRow key={run.id} run={run} view={view} selected={run.id === viewRunId} harness={harness} onOpen={() => onOpenRun(run.id)} />
+						))}
+					</ul>
+				)}
+			</div>
+		</div>
+	);
+}
+
+const TASK_STATUS = { pending: 'pending', blocked: 'pending', in_progress: 'running', done: 'completed', failed: 'failed' } as const;
+
+/** The session's shared task board: who has each task, what it waits on, and how far it got. */
+export function TasksPanel({ tasks, view }: { tasks: HarnessTask[]; view: HarnessView }) {
+	if (tasks.length === 0) {
+		return (
+			<div className="grid h-full place-items-center">
+				<EmptyState icon={Users} title="No shared tasks" description="Tasks the agents split the work into show up here with their owners." />
+			</div>
+		);
+	}
+	const done = tasks.filter((task) => task.status === 'done').length;
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<p className="flex h-10 shrink-0 items-center px-3 text-xs text-muted-foreground">
+				<span className="tabular-nums">
+					{done}/{tasks.length}
+				</span>
+				&nbsp;done
+			</p>
+			<div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
+				<TaskList>
+					{tasks.map((task, index) => (
+						<TaskRow
+							key={task.id}
+							index={index}
+							label={task.title}
+							status={TASK_STATUS[task.status]}
+							meta={task.ownerRunId ? nameOf(view, task.ownerRunId) : 'Unassigned'}
+							details={[
+								...(task.status === 'blocked' ? [{ label: 'Blocked' }] : []),
+								...(task.dependsOn ?? []).map((id) => ({ label: 'Waits on', meta: tasks.find((entry) => entry.id === id)?.title ?? id }))
+							]}
+						/>
+					))}
+				</TaskList>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/browser-panel.tsx b/packages/ui/src/components/coding-agent/browser-panel.tsx
new file mode 100644
index 0000000..b39f8d1
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/browser-panel.tsx
@@ -0,0 +1,186 @@
+'use client';
+
+import { ArrowLeft, ArrowRight, Globe, Lock, RotateCw } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from '../button';
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../input-group';
+import { EmptyState } from '../workspace-kit/surface';
+import { TooltipIconButton } from '../workspace-kit/primitives';
+import { DEMO_QUICK_LINKS, renderDemoPage } from './demo-browser';
+import type { BrowserPageRenderer } from './types';
+
+/** One browser tab: where it is, where it's been, and the page's title when the agent or host knows it. */
+export type BrowserTabState = { url: string | null; title?: string; history: string[]; index: number; reloads: number };
+
+export function browserTab(url: string | null, title?: string): BrowserTabState {
+	return { url, title, history: url ? [url] : [], index: url ? 0 : -1, reloads: 0 };
+}
+
+export function navigate(tab: BrowserTabState, url: string, title?: string): BrowserTabState {
+	const history = [...tab.history.slice(0, tab.index + 1), url];
+	return { ...tab, url, title, history, index: history.length - 1 };
+}
+
+export function step(tab: BrowserTabState, by: -1 | 1): BrowserTabState {
+	const index = Math.min(Math.max(tab.index + by, 0), tab.history.length - 1);
+	return { ...tab, index, url: tab.history[index] ?? null, title: undefined };
+}
+
+/** "localhost:3000/login" → "http://localhost:3000/login"; bare words become a search. */
+function toUrl(input: string) {
+	const value = input.trim();
+	if (!value) return null;
+	if (/^[a-z]+:\/\//i.test(value)) return value;
+	const local = /^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?(\/|$)/i.test(value);
+	if (local || /^[\w-]+(\.[\w-]+)+(:\d+)?(\/|$)/.test(value)) {
+		return `${local ? 'http' : 'https'}://${local ? value.replace(/^localhost/i, 'localhost') : value}`;
+	}
+	return `https://search.example/?q=${encodeURIComponent(value)}`;
+}
+
+function hostOf(url: string) {
+	try {
+		return new URL(url).host;
+	} catch {
+		return url;
+	}
+}
+
+export function displayUrl(url: string) {
+	return url.replace(/^https?:\/\//, '');
+}
+
+/**
+ * A tab title for a page that hasn't given one: its last path segment as words ("/settings/team" reads "Team"), or
+ * its host for a site's front page.
+ */
+export function pageTitle(url: string) {
+	try {
+		const { host, pathname } = new URL(url);
+		const page = pathname.split('/').filter(Boolean).pop();
+		return page ? `${page.charAt(0).toUpperCase()}${page.slice(1).replace(/[-_]/g, ' ')}` : host;
+	} catch {
+		return url;
+	}
+}
+
+/**
+ * A browser tab inside the side panel: history, reload, an address bar, and a page area. The page comes from the
+ * host's renderer, or without one from the bundled demo app's preview; a page the renderer returns null for shows a
+ * note that it can't be shown here.
+ */
+export function BrowserPanel({
+	tab,
+	onChange,
+	renderPage
+}: {
+	tab: BrowserTabState;
+	onChange: (tab: BrowserTabState) => void;
+	renderPage?: BrowserPageRenderer;
+}) {
+	const [draft, setDraft] = React.useState(tab.url ? displayUrl(tab.url) : '');
+	// A new, empty tab is for typing an address, so the address bar takes focus.
+	React.useEffect(() => {
+		if (!tab.url) inputRef.current?.focus();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+	const [loading, setLoading] = React.useState(false);
+	const inputRef = React.useRef<HTMLInputElement>(null);
+
+	React.useEffect(() => {
+		setDraft(tab.url ? displayUrl(tab.url) : '');
+		if (!tab.url) return;
+		setLoading(true);
+		const timer = window.setTimeout(() => setLoading(false), 450);
+		return () => window.clearTimeout(timer);
+	}, [tab.url, tab.reloads]);
+
+	const go = (input: string) => {
+		const url = toUrl(input);
+		if (url) onChange(navigate(tab, url));
+		inputRef.current?.blur();
+	};
+
+	// The host's renderer runs once per address or reload, not on every render of the session around it.
+	const page = React.useMemo(() => (tab.url ? (renderPage ?? renderDemoPage)(tab.url) : null), [renderPage, tab.url]);
+	// The shortcuts point at the demo app's pages, so a host with its own renderer doesn't get them.
+	const quickLinks = renderPage ? [] : DEMO_QUICK_LINKS;
+	const secure = tab.url?.startsWith('https://');
+
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			{/* The page below is someone else's surface, so the browser's own controls end at a rule. */}
+			<div className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
+				<TooltipIconButton label="Back" size="sm" disabled={tab.index <= 0} onClick={() => onChange(step(tab, -1))}>
+					<ArrowLeft aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
+				</TooltipIconButton>
+				<TooltipIconButton label="Forward" size="sm" disabled={tab.index >= tab.history.length - 1} onClick={() => onChange(step(tab, 1))}>
+					<ArrowRight aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
+				</TooltipIconButton>
+				<TooltipIconButton label="Reload" size="sm" disabled={!tab.url} onClick={() => onChange({ ...tab, reloads: tab.reloads + 1 })}>
+					<RotateCw aria-hidden="true" className="size-3.5" />
+				</TooltipIconButton>
+				<form
+					className="ms-1 min-w-0 flex-1"
+					onSubmit={(event) => {
+						event.preventDefault();
+						go(draft);
+					}}
+				>
+					<InputGroup className="h-7 rounded-md border-transparent bg-muted shadow-none dark:bg-muted">
+						<InputGroupAddon className="text-muted-foreground">
+							{secure ? <Lock aria-hidden="true" className="size-3.5" /> : <Globe aria-hidden="true" className="size-3.5" />}
+						</InputGroupAddon>
+						<InputGroupInput
+							ref={inputRef}
+							dir="ltr"
+							size="sm"
+							aria-label="Address"
+							placeholder="Search or enter a URL"
+							value={draft}
+							onChange={(event) => setDraft(event.target.value)}
+							onFocus={(event) => event.target.select()}
+							className="text-xs"
+						/>
+					</InputGroup>
+				</form>
+			</div>
+			<div className="relative min-h-0 flex-1 overflow-auto">
+				{loading ? <div aria-hidden="true" className="absolute inset-x-0 top-0 z-10 h-0.5 animate-pulse bg-primary" /> : null}
+				{!tab.url ? (
+					<div className="grid h-full place-items-center">
+						<EmptyState
+							icon={Globe}
+							title="Open a page"
+							description="Preview your app, read docs, or browse the web."
+							action={
+								quickLinks.length > 0 ? (
+									<div className="flex flex-wrap justify-center gap-1.5">
+										{quickLinks.map((link) => (
+											<Button key={link} size="xs" variant="outline" className="font-mono" onClick={() => go(link)}>
+												{link}
+											</Button>
+										))}
+									</div>
+								) : undefined
+							}
+						/>
+					</div>
+				) : page ? (
+					<div key={`${tab.url}-${tab.reloads}`} className="h-full">
+						{page}
+					</div>
+				) : (
+					<div className="grid h-full place-items-center">
+						<EmptyState
+							icon={Globe}
+							title="This page can’t be previewed here"
+							description={<span className="[overflow-wrap:anywhere]">{hostOf(tab.url)} opens outside the preview, in a real browser.</span>}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/code-surface-theme.ts b/packages/ui/src/components/coding-agent/code-surface-theme.ts
new file mode 100644
index 0000000..e42d172
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/code-surface-theme.ts
@@ -0,0 +1,98 @@
+'use client';
+
+import * as React from 'react';
+
+export type ColorScheme = 'light' | 'dark';
+
+/**
+ * The diff and tree renderers draw inside shadow roots, so Tailwind classes never reach them. They do inherit CSS
+ * custom properties from their host, so these maps hand our tokens to the renderers' override variables. Colors
+ * stay `var()` references, which keeps both themes (and any host re-theme) working without re-rendering.
+ */
+export const DIFF_SURFACE_STYLE = {
+	'--diffs-font-family': 'var(--font-mono)',
+	'--diffs-header-font-family': 'var(--font-sans)',
+	'--diffs-font-size': '12px',
+	'--diffs-line-height': '20px',
+	'--diffs-light-bg': 'var(--background)',
+	'--diffs-dark-bg': 'var(--background)',
+	'--diffs-bg-context-override': 'var(--background)',
+	'--diffs-bg-buffer-override': 'var(--background)',
+	// Folded context reads as a faint band, a step off the page rather than a block.
+	'--diffs-bg-separator-override': 'color-mix(in oklab, var(--foreground) 3.5%, var(--background))',
+	'--diffs-fg-number-override': 'color-mix(in oklab, var(--muted-foreground) 70%, transparent)',
+	// Added and removed lines tint from these bases at the renderer's own strengths.
+	'--diffs-addition-color-override': 'var(--success)',
+	'--diffs-deletion-color-override': 'var(--destructive)',
+	'--diffs-modified-color-override': 'var(--warning)',
+	// Selection is primary, so it can't be mistaken for a modified line.
+	'--diffs-bg-selection-override': 'color-mix(in oklab, var(--primary) 14%, var(--background))',
+	'--diffs-bg-selection-number-override': 'color-mix(in oklab, var(--primary) 22%, var(--background))',
+	'--diffs-selection-color-override': 'var(--primary)',
+	// Tints run the full width of a line; the reserved scrollbar gutter left them short.
+	'--diffs-scrollbar-gutter-override': '0px'
+} as React.CSSProperties;
+
+/**
+ * Styles the renderer can't take as variables. The gutter's "add a comment" button is primary like the template's
+ * other actions, and folded context is a slim 24px band in 11px type, flush with the code, that unfolds on click.
+ */
+export const DIFF_UNSAFE_CSS = [
+	'[data-utility-button]{background:var(--primary);color:var(--primary-foreground)}',
+	'[data-separator=line-info-basic]{height:24px}',
+	'[data-separator=line-info-basic] [data-separator-content]{font-size:11px;letter-spacing:0;padding-inline:1.5ch}',
+	'[data-separator=line-info-basic] [data-separator-content]:hover{color:var(--diffs-fg);text-decoration:none}'
+].join('');
+
+export const TREE_SURFACE_STYLE = {
+	'--trees-font-family-override': 'var(--font-sans)',
+	'--trees-font-size-override': '13px',
+	// Opaque, not transparent: the tree's ellipsis marker covers overflowing text by painting this colour over it.
+	'--trees-bg-override': 'color-mix(in oklab, var(--foreground) 2.5%, var(--background))',
+	'--trees-fg-override': 'var(--foreground)',
+	'--trees-fg-muted-override': 'var(--muted-foreground)',
+	'--trees-bg-muted-override': 'color-mix(in oklab, var(--foreground) 5%, transparent)',
+	'--trees-border-color-override': 'var(--border)',
+	'--trees-accent-override': 'var(--primary)',
+	'--trees-focus-ring-color-override': 'var(--ring)',
+	'--trees-selected-bg-override': 'color-mix(in oklab, var(--foreground) 8%, transparent)',
+	'--trees-selected-fg-override': 'var(--foreground)',
+	'--trees-selected-focused-border-color-override': 'transparent',
+	'--trees-search-bg-override': 'var(--muted)',
+	'--trees-search-fg-override': 'var(--foreground)',
+	'--trees-input-bg-override': 'var(--muted)',
+	'--trees-indent-guide-bg-override': 'var(--border)',
+	'--trees-border-radius-override': 'calc(var(--radius) - 4px)',
+	'--trees-git-added-color-override': 'var(--success)',
+	'--trees-git-untracked-color-override': 'var(--success)',
+	'--trees-git-modified-color-override': 'var(--warning)',
+	'--trees-git-renamed-color-override': 'var(--info)',
+	'--trees-git-deleted-color-override': 'var(--destructive)',
+	'--trees-git-ignored-color-override': 'var(--muted-foreground)'
+} as React.CSSProperties;
+
+/** The file tree column's tone: a step off the page, so it reads as its own column without a dividing rule. */
+export const TREE_COLUMN_BG = 'color-mix(in oklab, var(--foreground) 2.5%, var(--background))';
+
+/** Syntax themes for the diff and file renderers; the pair is picked by `colorScheme`. */
+export const CODE_THEMES = { light: 'pierre-light', dark: 'pierre-dark' } as const;
+
+function schemeOf(node: Element | null): ColorScheme {
+	return node?.closest('.dark') ? 'dark' : 'light';
+}
+
+/**
+ * Follows the nearest `.dark` ancestor of `ref`, so code surfaces match a class-based theme (the renderers would
+ * otherwise follow the OS). Watches the root element's class for theme toggles.
+ */
+export function useColorScheme(ref: React.RefObject<Element | null>): ColorScheme {
+	const [scheme, setScheme] = React.useState<ColorScheme>('light');
+	React.useLayoutEffect(() => {
+		const sync = () => setScheme(schemeOf(ref.current));
+		sync();
+		const observer = new MutationObserver(sync);
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+		return () => observer.disconnect();
+	}, [ref]);
+	return scheme;
+}
diff --git a/packages/ui/src/components/coding-agent/coding-agent-context.tsx b/packages/ui/src/components/coding-agent/coding-agent-context.tsx
new file mode 100644
index 0000000..62a331a
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/coding-agent-context.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import * as React from 'react';
+
+import type {
+	BrowserPageRenderer,
+	CodingAgentAction,
+	CodingAgentData,
+	CodingAgentLayout,
+	CodingProject,
+	CodingSession,
+	SessionPatch,
+	WorkspaceLocation
+} from './types';
+
+/** A session as the shell sees it: the script plus whatever its live run has reported. */
+export type LiveSession = CodingSession & SessionPatch & { draft?: boolean };
+
+/** Commands the active session exposes to shortcuts and the command menu. */
+export type SessionHandle = {
+	togglePanel: () => void;
+	toggleTerminal: () => void;
+	toggleTree: () => void;
+	openBrowser: () => void;
+	openReview: () => void;
+	openFilePicker: () => void;
+};
+
+export type CodingAgentContextValue = {
+	data: CodingAgentData;
+	layout: CodingAgentLayout;
+	setLayout: (layout: CodingAgentLayout) => void;
+	sessions: LiveSession[];
+	session: (id: string) => LiveSession | undefined;
+	project: (id: string) => CodingProject;
+	openIds: string[];
+	/** The session in front, or null while the home list shows. */
+	activeId: string | null;
+	recentlyClosed: string[];
+	activate: (id: string) => void;
+	goHome: () => void;
+	newSession: () => void;
+	closeSession: (id: string) => void;
+	/** Removes a session for good, after the person confirmed it. */
+	deleteSession: (id: string) => void;
+	reopenClosed: (id?: string) => void;
+	patchSession: (id: string, patch: SessionPatch) => void;
+	startSession: (id: string, start: { text: string; projectId: string; location: WorkspaceLocation }) => void;
+	emit: (action: CodingAgentAction) => void;
+	renderBrowserPage?: BrowserPageRenderer;
+	/** The active session registers its handle here so shell-level shortcuts reach it. */
+	activeHandle: React.RefObject<SessionHandle | null>;
+	openCommandMenu: () => void;
+	/** A session whose title should switch to its rename field, from F2 or the command menu. */
+	renaming: string | null;
+	setRenaming: (id: string | null) => void;
+	/** Which agent a session shows: its own (undefined) or one of the agents it started. */
+	viewRun: (sessionId: string) => string | undefined;
+	openRun: (sessionId: string, runId: string | undefined) => void;
+};
+
+/**
+ * The part of the shell a session needs, none of which changes while sessions run. Kept apart from the live list, so
+ * one session reporting its progress doesn't re-render every other session.
+ */
+export type SessionShellValue = Pick<
+	CodingAgentContextValue,
+	'data' | 'layout' | 'project' | 'patchSession' | 'emit' | 'activeHandle' | 'renderBrowserPage' | 'deleteSession' | 'openRun'
+>;
+
+const CodingAgentContext = React.createContext<CodingAgentContextValue | null>(null);
+const SessionShellContext = React.createContext<SessionShellValue | null>(null);
+
+export function useCodingAgent() {
+	const context = React.useContext(CodingAgentContext);
+	if (!context) throw new Error('useCodingAgent must be used inside <CodingAgent>.');
+	return context;
+}
+
+export function useSessionShell() {
+	const context = React.useContext(SessionShellContext);
+	if (!context) throw new Error('useSessionShell must be used inside <CodingAgent>.');
+	return context;
+}
+
+export { CodingAgentContext, SessionShellContext };
diff --git a/packages/ui/src/components/coding-agent/coding-agent.tsx b/packages/ui/src/components/coding-agent/coding-agent.tsx
new file mode 100644
index 0000000..b9c8654
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/coding-agent.tsx
@@ -0,0 +1,337 @@
+'use client';
+
+import * as React from 'react';
+
+import { useControllableState } from '../../lib/use-controllable-state';
+import { NavMenuButton } from '../workspace-kit/primitives';
+import { WorkspaceShell } from '../workspace-kit/shell';
+import { useLatest } from '../workspace-kit/use-latest';
+import { CodingAgentContext, type CodingAgentContextValue, type LiveSession, type SessionHandle, SessionShellContext, type SessionShellValue } from './coding-agent-context';
+import { CommandMenu } from './command-menu';
+import { HomeView } from './home-view';
+import { NewSession } from './new-session';
+import { SessionSidebar } from './session-sidebar';
+import { SessionTabs } from './session-tabs';
+import { SessionView } from './session-view';
+import { matches, SHORTCUTS } from './shortcuts';
+import { withoutAndNeighbor } from './tab-strip';
+import type {
+	BrowserPageRenderer,
+	CodingAgentAction,
+	CodingAgentData,
+	CodingAgentLayout,
+	CodingSession,
+	SessionPatch
+} from './types';
+
+export type CodingAgentProps = {
+	data: CodingAgentData;
+	/** Sessions as a tab strip across the top (default) or a sidebar grouped by project. */
+	layout?: CodingAgentLayout;
+	defaultLayout?: CodingAgentLayout;
+	onLayoutChange?: (layout: CodingAgentLayout) => void;
+	/** The session in front on first render; defaults to the first open one. */
+	defaultActiveSessionId?: string;
+	/** Whether sessions open with the side panel showing. Defaults to true. */
+	defaultPanelOpen?: boolean;
+	/** Whether sessions open with the terminal dock showing. */
+	defaultTerminalOpen?: boolean;
+	/** Draws the page in a browser panel tab. Defaults to a preview of the demo app. */
+	renderBrowserPage?: BrowserPageRenderer;
+	onAction?: (action: CodingAgentAction) => void;
+	/** Sits the workspace in a rounded frame, for hosts that show it as an app window. */
+	framed?: boolean;
+	className?: string;
+};
+
+/** A first sentence, trimmed to fit a tab, becomes a new session's title. */
+function titleFrom(text: string) {
+	const first = text.split(/(?<=[.?!])\s|\n/)[0].trim();
+	return first.length > 48 ? `${first.slice(0, 47).trimEnd()}…` : first;
+}
+
+function sameRuns(a: SessionPatch['runs'], b: SessionPatch['runs']) {
+	if (a === b) return true;
+	if (!a || !b || a.length !== b.length) return false;
+	return a.every((run, index) => {
+		const other = b[index];
+		return run.id === other.id && run.name === other.name && run.status === other.status && run.depth === other.depth && run.parentRunId === other.parentRunId;
+	});
+}
+
+/** Whether a patch would change nothing, so a session reporting the same state twice doesn't re-render the shell. */
+function samePatch(current: SessionPatch | undefined, patch: SessionPatch) {
+	return Object.entries(patch).every(([key, value]) =>
+		key === 'runs' ? sameRuns(current?.runs, value as SessionPatch['runs']) : current?.[key as keyof SessionPatch] === value
+	);
+}
+
+let draftCounter = 0;
+
+/**
+ * A coding agent workspace. Sessions sit in a tab strip (or a sidebar), each with a chat column, a resizable side
+ * panel for reviewing diffs, reading files and previewing the app in a browser tab, and a terminal dock. Every open
+ * session keeps running in the background and marks its tab when it needs you or has something new.
+ */
+export function CodingAgent({
+	data,
+	layout: layoutProp,
+	defaultLayout = 'tabs',
+	onLayoutChange,
+	defaultActiveSessionId,
+	defaultPanelOpen = true,
+	defaultTerminalOpen = false,
+	renderBrowserPage,
+	onAction,
+	framed = false,
+	className
+}: CodingAgentProps) {
+	const [layout, setLayoutState] = useControllableState<CodingAgentLayout>({ prop: layoutProp, defaultProp: defaultLayout, onChange: onLayoutChange });
+	// With nothing open, the workspace starts on a fresh session, ready to type into.
+	const [created, setCreated] = React.useState<(CodingSession & { draft?: boolean })[]>(() =>
+		data.openSessionIds.length === 0 ? [{ id: 'draft-0', title: 'New session', projectId: data.projects[0].id, script: [], draft: true }] : []
+	);
+	const [patches, setPatches] = React.useState<Record<string, SessionPatch>>({});
+	const [openIds, setOpenIds] = React.useState(() => (data.openSessionIds.length === 0 ? ['draft-0'] : data.openSessionIds));
+	const [activeId, setActiveId] = React.useState<string | null>(() => defaultActiveSessionId ?? (data.openSessionIds[0] ?? 'draft-0'));
+	const [recentlyClosed, setRecentlyClosed] = React.useState<string[]>([]);
+	const [commandOpen, setCommandOpen] = React.useState(false);
+	const [renaming, setRenaming] = React.useState<string | null>(null);
+	const [deleted, setDeleted] = React.useState<string[]>([]);
+	const [viewRuns, setViewRuns] = React.useState<Record<string, string | undefined>>({});
+	const openRun = React.useCallback((sessionId: string, runId: string | undefined) => {
+		setViewRuns((current) => (current[sessionId] === runId ? current : { ...current, [sessionId]: runId }));
+	}, []);
+	const activeHandle = React.useRef<SessionHandle | null>(null);
+	const root = React.useRef<HTMLDivElement>(null);
+	const onActionRef = useLatest(onAction);
+	const emit = React.useCallback((action: CodingAgentAction) => onActionRef.current?.(action), [onActionRef]);
+
+	// Each live session keeps its identity until its own data or patch changes, so a memoized session view only
+	// re-renders for its own updates.
+	const merged = React.useRef(new Map<string, { base: CodingSession; patch: SessionPatch | undefined; live: LiveSession }>());
+	const sessions = React.useMemo<LiveSession[]>(() => {
+		const replaced = new Set(created.map((session) => session.id));
+		const removed = new Set(deleted);
+		const next = new Map<string, { base: CodingSession; patch: SessionPatch | undefined; live: LiveSession }>();
+		const list = [...data.sessions.filter((session) => !replaced.has(session.id)), ...created]
+			.filter((session) => !removed.has(session.id))
+			.map((session) => {
+				const patch = patches[session.id];
+				const cached = merged.current.get(session.id);
+				const live = cached && cached.base === session && cached.patch === patch ? cached.live : { ...session, ...patch };
+				next.set(session.id, { base: session, patch, live });
+				return live;
+			});
+		merged.current = next;
+		return list;
+	}, [created, data.sessions, deleted, patches]);
+	const sessionById = React.useMemo(() => new Map(sessions.map((session) => [session.id, session])), [sessions]);
+	const projectById = React.useMemo(() => new Map(data.projects.map((project) => [project.id, project])), [data.projects]);
+	const project = React.useCallback((id: string) => projectById.get(id) ?? data.projects[0], [data.projects, projectById]);
+	// Read by the callbacks below, which stay stable across the shell's frequent re-renders.
+	const sessionRef = useLatest(sessions);
+	const openIdsRef = useLatest(openIds);
+
+	const patchSession = React.useCallback((id: string, patch: SessionPatch) => {
+		setPatches((current) => (samePatch(current[id], patch) ? current : { ...current, [id]: { ...current[id], ...patch } }));
+	}, []);
+
+	const activate = React.useCallback((id: string) => {
+		setOpenIds((current) => (current.includes(id) ? current : [...current, id]));
+		setRecentlyClosed((current) => current.filter((entry) => entry !== id));
+		setActiveId(id);
+	}, []);
+
+	const newSession = React.useCallback(() => {
+		draftCounter += 1;
+		const id = `draft-${draftCounter}`;
+		const anchor = sessionRef.current.find((session) => session.id === activeId);
+		setCreated((current) => [...current, { id, title: 'New session', projectId: anchor?.projectId ?? data.projects[0].id, script: [], draft: true }]);
+		setOpenIds((current) => {
+			const index = activeId ? current.indexOf(activeId) : -1;
+			return index >= 0 ? [...current.slice(0, index + 1), id, ...current.slice(index + 1)] : [...current, id];
+		});
+		setActiveId(id);
+	}, [activeId, data.projects, sessionRef]);
+
+	const closeSession = React.useCallback(
+		(id: string) => {
+			const draft = sessionRef.current.find((session) => session.id === id)?.draft;
+			const { list, neighbor } = withoutAndNeighbor(openIdsRef.current, id);
+			setOpenIds(list);
+			setActiveId((active) => (active === id ? neighbor : active));
+			if (draft) setCreated((current) => current.filter((session) => session.id !== id));
+			else setRecentlyClosed((current) => [id, ...current.filter((entry) => entry !== id)].slice(0, 8));
+			emit({ type: 'close-session', sessionId: id });
+		},
+		[emit, openIdsRef, sessionRef]
+	);
+
+	const deleteSession = React.useCallback(
+		(id: string) => {
+			closeSession(id);
+			setRecentlyClosed((current) => current.filter((entry) => entry !== id));
+			setDeleted((current) => [...current, id]);
+			emit({ type: 'delete-session', sessionId: id });
+		},
+		[closeSession, emit]
+	);
+
+	const startSession = React.useCallback<CodingAgentContextValue['startSession']>(
+		(id, { text, projectId, location }) => {
+			setCreated((current) =>
+				current.map((session) =>
+					session.id === id
+						? {
+								id,
+								title: titleFrom(text),
+								projectId,
+								location,
+								branch: location === 'worktree' ? `agent/${id.replace('draft-', 'session-')}` : undefined,
+								updatedLabel: 'now',
+								script: [{ kind: 'user', text, delay: 0 }, ...data.newSessionScript(text)]
+							}
+						: session
+				)
+			);
+			emit({ type: 'new-session', sessionId: id, projectId, location });
+			emit({ type: 'send', sessionId: id, text, attachments: [] });
+		},
+		[data, emit]
+	);
+
+	const setLayout = React.useCallback(
+		(next: CodingAgentLayout) => {
+			setLayoutState(next);
+			emit({ type: 'layout', layout: next });
+		},
+		[emit, setLayoutState]
+	);
+
+	const context = React.useMemo<CodingAgentContextValue>(
+		() => ({
+			data,
+			layout,
+			setLayout,
+			sessions,
+			session: (id) => sessionById.get(id),
+			project,
+			openIds,
+			activeId,
+			recentlyClosed,
+			activate,
+			goHome: () => setActiveId(null),
+			newSession,
+			closeSession,
+			deleteSession,
+			reopenClosed: (id) => {
+				const target = id ?? recentlyClosed[0];
+				if (target) activate(target);
+			},
+			patchSession,
+			startSession,
+			emit,
+			renderBrowserPage,
+			activeHandle,
+			openCommandMenu: () => setCommandOpen(true),
+			renaming,
+			setRenaming,
+			viewRun: (sessionId) => viewRuns[sessionId],
+			openRun
+		}),
+		[activate, activeId, closeSession, data, deleteSession, emit, layout, newSession, openIds, openRun, patchSession, project, recentlyClosed, renaming, renderBrowserPage, sessionById, sessions, setLayout, startSession, viewRuns]
+	);
+	const shell = React.useMemo<SessionShellValue>(
+		() => ({ data, layout, project, patchSession, emit, activeHandle, renderBrowserPage, deleteSession, openRun }),
+		[data, deleteSession, emit, layout, openRun, patchSession, project, renderBrowserPage]
+	);
+
+	// Shortcuts work anywhere in the workspace, and from the page body when nothing else has focus.
+	React.useEffect(() => {
+		const onKeyDown = (event: KeyboardEvent) => {
+			const target = event.target as Node | null;
+			if (target !== document.body && !root.current?.contains(target)) return;
+			const handle = activeId ? activeHandle.current : null;
+			const actions: [keyof typeof SHORTCUTS, (() => void) | undefined][] = [
+				['commandMenu', () => setCommandOpen((open) => !open)],
+				['newSession', newSession],
+				['closeSession', activeId ? () => closeSession(activeId) : undefined],
+				['openFile', handle?.openFilePicker],
+				['browser', handle?.openBrowser],
+				['toggleTree', handle?.toggleTree],
+				['togglePanel', handle?.togglePanel],
+				['toggleTerminal', handle?.toggleTerminal]
+			];
+			for (const [id, run] of actions) {
+				if (run && matches(event, SHORTCUTS[id])) {
+					event.preventDefault();
+					run();
+					return;
+				}
+			}
+			// ⌃1–⌃9 jump to a tab by position.
+			if (event.ctrlKey && !event.metaKey && !event.altKey && /^Digit[1-9]$/.test(event.code)) {
+				const id = openIds[Number(event.code.slice(5)) - 1];
+				if (id) {
+					event.preventDefault();
+					setActiveId(id);
+				}
+			}
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	}, [activeId, closeSession, newSession, openIds]);
+
+	const surfaces = (
+		<>
+			{openIds.map((id) => {
+				const session = sessionById.get(id);
+				if (!session) return null;
+				return session.draft ? (
+					<NewSession key={id} session={session} active={id === activeId} />
+				) : (
+					<SessionView
+						key={id}
+						session={session}
+						active={id === activeId}
+						viewRunId={viewRuns[id]}
+						defaultPanelOpen={defaultPanelOpen}
+						defaultTerminalOpen={defaultTerminalOpen}
+					/>
+				);
+			})}
+			{activeId === null ? <HomeView /> : null}
+			<CommandMenu open={commandOpen} onOpenChange={setCommandOpen} />
+		</>
+	);
+
+	// One tree for both layouts, so switching keeps every session mounted and its run where it was.
+	return (
+		<CodingAgentContext.Provider value={context}>
+			<SessionShellContext.Provider value={shell}>
+				<WorkspaceShell
+					slot="coding-agent"
+					framed={framed}
+					className={className}
+					sidebar={(props) => (layout === 'sidebar' ? <SessionSidebar {...props} /> : null)}
+				>
+					<div ref={root} className="flex h-full min-h-0 w-full min-w-0 flex-col bg-sidebar">
+						{layout === 'tabs' ? (
+							<SessionTabs />
+						) : (
+							// Below the rail breakpoint the sidebar becomes a drawer, opened from here.
+							<div className="flex h-10 shrink-0 items-center gap-1 px-2 @3xl/ws:hidden">
+								<NavMenuButton />
+								<span dir="auto" title={data.brand} className="min-w-0 truncate text-sm font-medium text-foreground [text-align:match-parent]">
+									{data.brand}
+								</span>
+							</div>
+						)}
+						<div className="min-h-0 flex-1">{surfaces}</div>
+					</div>
+				</WorkspaceShell>
+			</SessionShellContext.Provider>
+		</CodingAgentContext.Provider>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/command-menu.tsx b/packages/ui/src/components/coding-agent/command-menu.tsx
new file mode 100644
index 0000000..a4283d3
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/command-menu.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import {
+	FileCode2,
+	FolderTree,
+	GitCompareArrows,
+	Globe,
+	LayoutGrid,
+	PanelLeft,
+	PanelRight,
+	PanelTop,
+	PenLine,
+	Plus,
+	SquareTerminal,
+	X
+} from 'lucide-react';
+import * as React from 'react';
+
+import {
+	Command,
+	CommandDialog,
+	CommandDialogPopup,
+	CommandEmpty,
+	CommandGroup,
+	CommandGroupLabel,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandPanel,
+	CommandSeparator,
+	CommandShortcut
+} from '../command';
+import { useCodingAgent } from './coding-agent-context';
+import { SessionGlyph } from './session-glyph';
+import { SHORTCUTS, type ShortcutId } from './shortcuts';
+
+type Entry = { id: string; label: string; icon: React.ComponentType<{ className?: string; 'aria-hidden'?: boolean }>; shortcut?: ShortcutId; run: () => void };
+
+/** Sessions listed before you type: the open ones, then the most recent. Typing searches them all. */
+const RECENT = 20;
+const MATCHES = 50;
+
+/** ⌘K: every action in the template with its shortcut, plus a jump to any session. */
+export function CommandMenu({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+	const { data, sessions, openIds, activeId, layout, setLayout, newSession, closeSession, activate, goHome, activeHandle, project, setRenaming } =
+		useCodingAgent();
+	const [query, setQuery] = React.useState('');
+	const handle = activeId ? activeHandle.current : null;
+	const run = (action: () => void) => () => {
+		onOpenChange(false);
+		action();
+	};
+
+	React.useEffect(() => {
+		if (!open) setQuery('');
+	}, [open]);
+
+	const sessionActions: Entry[] = handle
+		? [
+				{ id: 'review', label: 'Review changes', icon: GitCompareArrows, run: handle.openReview },
+				{ id: 'open-file', label: 'Open file…', icon: FileCode2, shortcut: 'openFile', run: handle.openFilePicker },
+				{ id: 'browser', label: 'New browser tab', icon: Globe, shortcut: 'browser', run: handle.openBrowser },
+				{ id: 'panel', label: 'Toggle side panel', icon: PanelRight, shortcut: 'togglePanel', run: handle.togglePanel },
+				{ id: 'tree', label: 'Toggle file tree', icon: FolderTree, shortcut: 'toggleTree', run: handle.toggleTree },
+				{ id: 'terminal', label: 'Toggle terminal', icon: SquareTerminal, shortcut: 'toggleTerminal', run: handle.toggleTerminal },
+				...(layout === 'tabs' ? [{ id: 'rename', label: 'Rename session', icon: PenLine, run: () => activeId && setRenaming(activeId) }] : []),
+				{ id: 'close', label: 'Close session', icon: X, shortcut: 'closeSession' as const, run: () => activeId && closeSession(activeId) }
+			]
+		: [];
+	const general: Entry[] = [
+		{ id: 'new', label: 'New session', icon: Plus, shortcut: 'newSession', run: newSession },
+		{ id: 'home', label: 'All sessions', icon: LayoutGrid, run: goHome },
+		layout === 'tabs'
+			? { id: 'layout', label: 'Show sessions in a sidebar', icon: PanelLeft, run: () => setLayout('sidebar') }
+			: { id: 'layout', label: 'Show sessions as tabs', icon: PanelTop, run: () => setLayout('tabs') }
+	];
+
+	// Rendering every session makes a large workspace slow to open and to type into, so the list is narrowed here.
+	// The menu stays mounted while closed and the shell re-renders as sessions report progress, so the list is only
+	// worked out while the menu is open.
+	const needle = query.trim().toLowerCase();
+	const listed = React.useMemo(() => {
+		if (!open) return [];
+		const openSet = new Set(openIds);
+		const candidates = sessions.filter((session) => !session.draft);
+		return needle
+			? candidates.filter((session) => session.title.toLowerCase().includes(needle)).slice(0, MATCHES)
+			: [...candidates.filter((session) => openSet.has(session.id)), ...candidates.filter((session) => !openSet.has(session.id)).slice(0, RECENT)];
+	}, [needle, open, openIds, sessions]);
+	const showProject = data.projects.length > 1;
+
+	const item = (entry: Entry) => (
+		<CommandItem key={entry.id} value={entry.label} onSelect={run(entry.run)}>
+			<span className="grid size-4 shrink-0 place-items-center">
+				<entry.icon aria-hidden className="size-3.5 text-muted-foreground" />
+			</span>
+			<span className="min-w-0 truncate">{entry.label}</span>
+			{entry.shortcut ? <CommandShortcut>{SHORTCUTS[entry.shortcut].label}</CommandShortcut> : null}
+		</CommandItem>
+	);
+
+	return (
+		<CommandDialog open={open} onOpenChange={onOpenChange}>
+			<CommandDialogPopup>
+				<Command>
+					<CommandInput placeholder="Search commands and sessions…" value={query} onValueChange={setQuery} />
+					<CommandPanel>
+						<CommandList>
+							<CommandEmpty>Nothing matches.</CommandEmpty>
+							{sessionActions.length ? (
+								<CommandGroup>
+									<CommandGroupLabel>This session</CommandGroupLabel>
+									{sessionActions.map(item)}
+								</CommandGroup>
+							) : null}
+							<CommandGroup>
+								<CommandGroupLabel>General</CommandGroupLabel>
+								{general.map(item)}
+							</CommandGroup>
+							{listed.length ? (
+								<>
+									<CommandSeparator />
+									<CommandGroup>
+										<CommandGroupLabel>Go to session</CommandGroupLabel>
+										{listed.map((session) => {
+											const projectName = project(session.projectId).name;
+											return (
+												<CommandItem key={session.id} value={`session ${session.id} ${session.title}`} title={session.title} onSelect={run(() => activate(session.id))}>
+													<SessionGlyph session={session} projectName={projectName} />
+													<span dir="auto" className="min-w-0 flex-1 truncate [text-align:match-parent]">
+														{session.title}
+													</span>
+													{showProject ? (
+														<span dir="auto" title={projectName} className="max-w-[40%] shrink-0 truncate text-xs text-muted-foreground">
+															{projectName}
+														</span>
+													) : null}
+												</CommandItem>
+											);
+										})}
+									</CommandGroup>
+								</>
+							) : null}
+						</CommandList>
+					</CommandPanel>
+				</Command>
+			</CommandDialogPopup>
+		</CommandDialog>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/demo-browser.tsx b/packages/ui/src/components/coding-agent/demo-browser.tsx
new file mode 100644
index 0000000..6983fc5
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/demo-browser.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import { ShieldCheck } from 'lucide-react';
+
+import { Button } from '../button';
+import { Input } from '../input';
+import { Label } from '../label';
+import type { BrowserPageRenderer } from './types';
+
+/** Addresses an empty browser tab offers while the bundled demo preview stands in for the host's renderer. */
+export const DEMO_QUICK_LINKS = ['localhost:3000/login', 'localhost:3000/dashboard'];
+
+/** The demo app runs on a local dev server, so any local address is one of its pages. */
+function isDemoUrl(url: string) {
+	try {
+		const { hostname } = new URL(url);
+		return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '[::1]';
+	} catch {
+		return false;
+	}
+}
+
+/** The bundled preview of the demo app: its sign-in page and a dashboard, drawn with the kit's own controls. */
+function DemoSite({ url }: { url: string }) {
+	const parsed = new URL(url);
+	const next = parsed.searchParams.get('next');
+	if (parsed.pathname.startsWith('/login')) {
+		return (
+			<div className="grid min-h-full place-items-center bg-muted/40 p-6">
+				<div className="w-full max-w-xs rounded-xl border border-border bg-card p-5 shadow-card">
+					<div className="mb-4 flex items-center gap-2">
+						<span className="grid size-6 place-items-center rounded-md bg-foreground text-[0.6875rem] font-semibold text-background">A</span>
+						<span className="text-sm font-medium text-foreground">Sign in to Acme</span>
+					</div>
+					<div className="flex flex-col gap-3">
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="demo-email" className="text-xs">Email</Label>
+							<Input id="demo-email" size="sm" defaultValue="dana@acme.dev" readOnly />
+						</div>
+						<div className="flex flex-col gap-1.5">
+							<Label htmlFor="demo-password" className="text-xs">Password</Label>
+							<Input id="demo-password" size="sm" type="password" defaultValue="hunter22" readOnly />
+						</div>
+						<Button size="sm" className="mt-1 w-full">Continue</Button>
+					</div>
+					{next ? (
+						<p className="mt-4 flex items-start gap-1.5 text-xs text-muted-foreground">
+							<ShieldCheck aria-hidden="true" className="mt-px size-3.5 shrink-0 text-success" />
+							<span>
+								<code className="font-mono text-foreground [overflow-wrap:anywhere]">next={next}</code> is off-site, so you’ll land on{' '}
+								<code className="font-mono text-foreground">/dashboard</code>.
+							</span>
+						</p>
+					) : null}
+				</div>
+			</div>
+		);
+	}
+	if (parsed.pathname.startsWith('/settings/team')) {
+		return (
+			<div className="flex min-h-full flex-col gap-5 bg-background p-6">
+				<div className="flex items-center justify-between gap-3">
+					<span className="text-sm font-medium text-foreground">Team</span>
+					<div className="flex items-center gap-1.5">
+						<Input size="sm" aria-label="Email to invite" placeholder="name@company.com" className="w-48" readOnly />
+						<Button size="sm">Invite</Button>
+					</div>
+				</div>
+				<ul className="flex flex-col text-[0.8125rem]">
+					{[
+						['dana@acme.dev', 'Owner'],
+						['sam@acme.dev', 'Admin'],
+						['jo@acme.dev', 'Member']
+					].map(([email, role]) => (
+						<li key={email} className="flex h-9 items-center justify-between border-b border-border last:border-b-0">
+							<span className="text-foreground">{email}</span>
+							<span className="text-muted-foreground">{role}</span>
+						</li>
+					))}
+				</ul>
+				<div className="flex flex-col gap-2">
+					<span className="text-xs font-medium text-muted-foreground">Pending invites</span>
+					<ul className="flex flex-col text-[0.8125rem]">
+						{[
+							['priya@acme.dev', 'Expires Oct 30'],
+							['lee@contractor.io', 'Expires Oct 28']
+						].map(([email, expiry]) => (
+							<li key={email} className="flex h-9 items-center justify-between gap-3">
+								<span className="min-w-0 truncate text-foreground">{email}</span>
+								<span className="flex shrink-0 items-center gap-3">
+									<span className="text-xs text-muted-foreground">{expiry}</span>
+									<Button size="xs" variant="ghost" className="text-destructive">
+										Revoke
+									</Button>
+								</span>
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+		);
+	}
+	return (
+		<div className="flex min-h-full flex-col gap-4 bg-background p-6">
+			<div className="flex items-center justify-between">
+				<span className="text-sm font-medium text-foreground">Dashboard</span>
+				<span className="text-xs text-muted-foreground">dana@acme.dev</span>
+			</div>
+			<div className="grid grid-cols-3 gap-3">
+				{[
+					['Orders', '1,284'],
+					['Revenue', '$48,210'],
+					['Refunds', '12']
+				].map(([label, value]) => (
+					<div key={label} className="rounded-lg border border-border bg-card p-3">
+						<p className="text-xs text-muted-foreground">{label}</p>
+						<p className="mt-1 text-lg font-medium text-foreground tabular-nums">{value}</p>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+/**
+ * The browser panel's renderer when the host passes none: local addresses draw the bundled demo app, and anything
+ * else shows the panel's "can't preview" note.
+ */
+export const renderDemoPage: BrowserPageRenderer = (url) => (isDemoUrl(url) ? <DemoSite url={url} /> : null);
diff --git a/packages/ui/src/components/coding-agent/demo-invitations.ts b/packages/ui/src/components/coding-agent/demo-invitations.ts
new file mode 100644
index 0000000..0466b12
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/demo-invitations.ts
@@ -0,0 +1,596 @@
+import type { Worktree } from './harness';
+import type { CodingSession, SessionBeat } from './types';
+
+const BRANCH = 'agent/team-invitations';
+
+/**
+ * A long, realistic session: team invitations built end to end over three turns. The first two turns are history
+ * (a dozen edits, a failing test fixed on the spot, a browser check); the third plays live and stops on a question.
+ */
+
+export const INVITE_BASE_FILES: Record<string, string> = {
+	'src/db/schema.ts': `import { index, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';
+
+export const teams = pgTable('teams', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  name: text('name').notNull(),
+  createdAt: timestamp('created_at').defaultNow().notNull()
+});
+
+export const memberships = pgTable(
+  'memberships',
+  {
+    teamId: uuid('team_id').references(() => teams.id).notNull(),
+    userId: uuid('user_id').notNull(),
+    role: text('role', { enum: ['owner', 'admin', 'member'] }).notNull()
+  },
+  (table) => [index('memberships_team_idx').on(table.teamId)]
+);
+`,
+	'src/lib/db.ts': `import { drizzle } from 'drizzle-orm/node-postgres';
+
+import * as schema from '../db/schema';
+
+export const db = drizzle(process.env.DATABASE_URL!, { schema });
+`,
+	'src/lib/email.ts': `type Email = { to: string; subject: string; html: string };
+
+/** Sends through the transactional provider; resolves once the provider accepts it. */
+export async function sendEmail(email: Email) {
+  const response = await fetch('https://email.internal/send', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(email)
+  });
+  if (!response.ok) throw new Error(\`Email rejected: \${response.status}\`);
+}
+`,
+	'src/app/settings/team/page.tsx': `import { getSession } from '../../../auth/session';
+import { listMembers } from '../../../lib/members';
+
+export default async function TeamSettings() {
+  const session = await getSession();
+  const members = await listMembers(session.teamId);
+  return (
+    <section>
+      <h1>Team</h1>
+      <ul>
+        {members.map((member) => (
+          <li key={member.userId}>{member.email} · {member.role}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+`,
+	'src/lib/members.ts': `import { eq } from 'drizzle-orm';
+
+import { memberships } from '../db/schema';
+import { db } from './db';
+
+export function listMembers(teamId: string) {
+  return db.query.memberships.findMany({ where: eq(memberships.teamId, teamId) });
+}
+`
+};
+
+const SCHEMA_WITH_INVITES = `${INVITE_BASE_FILES['src/db/schema.ts']}
+export const invitations = pgTable(
+  'invitations',
+  {
+    id: uuid('id').primaryKey().defaultRandom(),
+    teamId: uuid('team_id').references(() => teams.id).notNull(),
+    email: text('email').notNull(),
+    role: text('role', { enum: ['admin', 'member'] }).notNull(),
+    /** SHA-256 of the token in the link; the token itself is never stored. */
+    tokenHash: text('token_hash').notNull().unique(),
+    invitedBy: uuid('invited_by').notNull(),
+    expiresAt: timestamp('expires_at').notNull(),
+    acceptedAt: timestamp('accepted_at'),
+    revokedAt: timestamp('revoked_at')
+  },
+  (table) => [index('invitations_team_email_idx').on(table.teamId, table.email)]
+);
+`;
+
+const INVITATIONS_V1 = `import { createHash, randomBytes } from 'node:crypto';
+import { and, eq, isNull } from 'drizzle-orm';
+
+import { invitations, memberships } from '../db/schema';
+import { db } from './db';
+
+const TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+export class InviteError extends Error {
+  constructor(readonly code: 'duplicate' | 'expired' | 'revoked' | 'used' | 'not-found') {
+    super(code);
+  }
+}
+
+const hash = (token: string) => createHash('sha256').update(token).digest('hex');
+
+/** Creates an invite and returns the one-time token for the link. One pending invite per email per team. */
+export async function createInvite(input: { teamId: string; email: string; role: 'admin' | 'member'; invitedBy: string }) {
+  const email = input.email.trim().toLowerCase();
+  const pending = await db.query.invitations.findFirst({
+    where: and(eq(invitations.teamId, input.teamId), eq(invitations.email, input.email), isNull(invitations.acceptedAt), isNull(invitations.revokedAt))
+  });
+  if (pending) throw new InviteError('duplicate');
+
+  const token = randomBytes(32).toString('base64url');
+  await db.insert(invitations).values({
+    ...input,
+    email,
+    tokenHash: hash(token),
+    expiresAt: new Date(Date.now() + TTL_MS)
+  });
+  return token;
+}
+
+export async function revokeInvite(id: string, teamId: string) {
+  await db.update(invitations).set({ revokedAt: new Date() }).where(and(eq(invitations.id, id), eq(invitations.teamId, teamId)));
+}
+
+/** Accepts an invite for the signed-in user and adds them to the team. */
+export async function acceptInvite(token: string, userId: string) {
+  const invite = await db.query.invitations.findFirst({ where: eq(invitations.tokenHash, hash(token)) });
+  if (!invite) throw new InviteError('not-found');
+  if (invite.revokedAt) throw new InviteError('revoked');
+  if (invite.acceptedAt) throw new InviteError('used');
+  if (invite.expiresAt.getTime() < Date.now()) throw new InviteError('expired');
+
+  await db.transaction(async (tx) => {
+    await tx.insert(memberships).values({ teamId: invite.teamId, userId, role: invite.role });
+    await tx.update(invitations).set({ acceptedAt: new Date() }).where(eq(invitations.id, invite.id));
+  });
+  return invite.teamId;
+}
+`;
+
+const INVITATIONS_V2 = INVITATIONS_V1.replace('eq(invitations.email, input.email)', 'eq(invitations.email, email)');
+
+const INVITATIONS_V3 = INVITATIONS_V2.replace(
+	`  const token = randomBytes(32).toString('base64url');`,
+	`  // Twenty invites an hour per team keeps a compromised admin account from mailing the whole internet.
+  const recent = await db.$count(invitations, and(eq(invitations.teamId, input.teamId), gt(invitations.createdAt, new Date(Date.now() - HOUR_MS))));
+  if (recent >= INVITES_PER_HOUR) throw new InviteError('rate-limited');
+
+  const token = randomBytes(32).toString('base64url');`
+)
+	.replace(`import { and, eq, isNull } from 'drizzle-orm';`, `import { and, eq, gt, isNull } from 'drizzle-orm';`)
+	.replace(`const TTL_MS = 7 * 24 * 60 * 60 * 1000;`, `const TTL_MS = 7 * 24 * 60 * 60 * 1000;\nconst HOUR_MS = 60 * 60 * 1000;\nconst INVITES_PER_HOUR = 20;`)
+	.replace(`'duplicate' | 'expired' | 'revoked' | 'used' | 'not-found'`, `'duplicate' | 'expired' | 'revoked' | 'used' | 'not-found' | 'rate-limited'`)
+	.replace(
+		`export async function revokeInvite`,
+		`export function listPendingInvites(teamId: string) {
+  return db.query.invitations.findMany({
+    where: and(eq(invitations.teamId, teamId), isNull(invitations.acceptedAt), isNull(invitations.revokedAt), gt(invitations.expiresAt, new Date())),
+    orderBy: (table, { desc }) => [desc(table.expiresAt)]
+  });
+}
+
+export async function revokeInvite`
+	);
+
+const INVITATIONS_V4 = INVITATIONS_V3.replace(`import { db } from './db';`, `import { recordAudit } from './audit';\nimport { db } from './db';`)
+	.replace(
+		`    await tx.update(invitations).set({ acceptedAt: new Date() }).where(eq(invitations.id, invite.id));
+  });`,
+		`    await tx.update(invitations).set({ acceptedAt: new Date() }).where(eq(invitations.id, invite.id));
+    await recordAudit(tx, { teamId: invite.teamId, actorId: userId, action: 'invite.accepted', targetId: invite.id });
+  });`
+	)
+	.replace(
+		`export async function revokeInvite(id: string, teamId: string) {
+  await db.update(invitations).set({ revokedAt: new Date() }).where(and(eq(invitations.id, id), eq(invitations.teamId, teamId)));
+}`,
+		`export async function revokeInvite(id: string, teamId: string, actorId: string) {
+  await db.transaction(async (tx) => {
+    await tx.update(invitations).set({ revokedAt: new Date() }).where(and(eq(invitations.id, id), eq(invitations.teamId, teamId)));
+    await recordAudit(tx, { teamId, actorId, action: 'invite.revoked', targetId: id });
+  });
+}`
+	);
+
+const SCHEMA_WITH_AUDIT = `${SCHEMA_WITH_INVITES}
+export const auditEvents = pgTable(
+  'audit_events',
+  {
+    id: uuid('id').primaryKey().defaultRandom(),
+    teamId: uuid('team_id').references(() => teams.id).notNull(),
+    actorId: uuid('actor_id').notNull(),
+    action: text('action').notNull(),
+    targetId: uuid('target_id'),
+    at: timestamp('at').defaultNow().notNull()
+  },
+  (table) => [index('audit_events_team_at_idx').on(table.teamId, table.at)]
+);
+`;
+
+const AUDIT_TS = `import { auditEvents } from '../db/schema';
+import type { db } from './db';
+
+type Tx = Parameters<Parameters<typeof db.transaction>[0]>[0];
+
+export type AuditAction = 'invite.accepted' | 'invite.revoked';
+
+/** Writes inside the caller's transaction, so an event exists exactly when the change it describes does. */
+export async function recordAudit(tx: Tx, event: { teamId: string; actorId: string; action: AuditAction; targetId?: string }) {
+  await tx.insert(auditEvents).values(event);
+}
+`;
+
+const ROUTE_TS = `import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+import { getSession } from '../../../auth/session';
+import { createInvite, InviteError, revokeInvite } from '../../../lib/invitations';
+import { sendInviteEmail } from '../../../emails/invite';
+
+const Create = z.object({ email: z.string().email().max(254), role: z.enum(['admin', 'member']) });
+
+export async function POST(request: Request) {
+  const session = await getSession(request);
+  if (!session || session.role === 'member') return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+
+  const body = Create.safeParse(await request.json());
+  if (!body.success) return NextResponse.json({ error: 'Enter a valid email' }, { status: 400 });
+
+  try {
+    const token = await createInvite({ ...body.data, teamId: session.teamId, invitedBy: session.userId });
+    await sendInviteEmail({ to: body.data.email, token, teamName: session.teamName });
+    return NextResponse.json({ ok: true }, { status: 201 });
+  } catch (error) {
+    if (error instanceof InviteError && error.code === 'duplicate') {
+      return NextResponse.json({ error: 'That person already has a pending invite' }, { status: 409 });
+    }
+    throw error;
+  }
+}
+
+export async function DELETE(request: Request) {
+  const session = await getSession(request);
+  if (!session || session.role === 'member') return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+  const id = new URL(request.url).searchParams.get('id');
+  if (!id) return NextResponse.json({ error: 'Missing id' }, { status: 400 });
+  await revokeInvite(id, session.teamId);
+  return new NextResponse(null, { status: 204 });
+}
+`;
+
+const EMAIL_TSX = `import { sendEmail } from '../lib/email';
+
+const APP_URL = 'https://app.acme.dev';
+
+export function sendInviteEmail({ to, token, teamName }: { to: string; token: string; teamName: string }) {
+  const link = \`\${APP_URL}/invite/\${token}\`;
+  return sendEmail({
+    to,
+    subject: \`You're invited to \${teamName} on Acme\`,
+    html: \`<p>You've been invited to join <strong>\${teamName}</strong>.</p><p><a href="\${link}">Accept the invite</a> within 7 days.</p>\`
+  });
+}
+`;
+
+const ACCEPT_PAGE = `import { redirect } from 'next/navigation';
+
+import { getSession } from '../../../auth/session';
+import { acceptInvite, InviteError } from '../../../lib/invitations';
+
+const MESSAGES = {
+  expired: 'This invite has expired. Ask a team admin to send a new one.',
+  revoked: 'This invite was withdrawn.',
+  used: 'This invite has already been used.',
+  'not-found': 'We couldn’t find that invite.'
+} as const;
+
+export default async function AcceptInvite({ params }: { params: { token: string } }) {
+  const session = await getSession();
+  if (!session) redirect(\`/login?next=/invite/\${params.token}\`);
+
+  try {
+    await acceptInvite(params.token, session.userId);
+  } catch (error) {
+    if (error instanceof InviteError && error.code in MESSAGES) return <p>{MESSAGES[error.code as keyof typeof MESSAGES]}</p>;
+    throw error;
+  }
+  redirect('/dashboard?joined=1');
+}
+`;
+
+const INVITE_TESTS = `import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { acceptInvite, createInvite, InviteError, revokeInvite } from '../src/lib/invitations';
+import { pendingInvites, resetDb, seedTeam } from './helpers/db';
+
+const ADMIN = 'u_admin';
+let teamId: string;
+
+beforeEach(async () => {
+  await resetDb();
+  teamId = await seedTeam({ owner: ADMIN });
+});
+
+describe('invitations', () => {
+  it('lowercases the email and returns a token', async () => {
+    const token = await createInvite({ teamId, email: 'Dana@Example.com', role: 'member', invitedBy: ADMIN });
+    expect(token).toMatch(/^[\\w-]{43}$/);
+  });
+
+  it('refuses a second pending invite for the same email', async () => {
+    await createInvite({ teamId, email: 'dana@example.com', role: 'member', invitedBy: ADMIN });
+    await expect(createInvite({ teamId, email: 'DANA@example.com', role: 'admin', invitedBy: ADMIN })).rejects.toThrow(InviteError);
+  });
+
+  it('adds the member and marks the invite used', async () => {
+    const token = await createInvite({ teamId, email: 'dana@example.com', role: 'member', invitedBy: ADMIN });
+    await expect(acceptInvite(token, 'u_dana')).resolves.toBe(teamId);
+    await expect(acceptInvite(token, 'u_dana')).rejects.toMatchObject({ code: 'used' });
+  });
+
+  it('rejects an expired invite', async () => {
+    const token = await createInvite({ teamId, email: 'dana@example.com', role: 'member', invitedBy: ADMIN });
+    vi.useFakeTimers({ now: Date.now() + 8 * 24 * 60 * 60 * 1000 });
+    await expect(acceptInvite(token, 'u_dana')).rejects.toMatchObject({ code: 'expired' });
+    vi.useRealTimers();
+  });
+
+  it('rejects a revoked invite', async () => {
+    const token = await createInvite({ teamId, email: 'dana@example.com', role: 'member', invitedBy: ADMIN });
+    const [invite] = await pendingInvites(teamId);
+    await revokeInvite(invite.id, teamId);
+    await expect(acceptInvite(token, 'u_dana')).rejects.toMatchObject({ code: 'revoked' });
+  });
+
+  it('rejects an unknown token', async () => {
+    await expect(acceptInvite('nope', 'u_dana')).rejects.toMatchObject({ code: 'not-found' });
+  });
+});
+`;
+
+const TEAM_PAGE_V2 = `import { getSession } from '../../../auth/session';
+import { listPendingInvites } from '../../../lib/invitations';
+import { listMembers } from '../../../lib/members';
+import { InviteForm, RevokeButton } from './invite-controls';
+
+export default async function TeamSettings() {
+  const session = await getSession();
+  const [members, pending] = await Promise.all([listMembers(session.teamId), listPendingInvites(session.teamId)]);
+  return (
+    <section>
+      <h1>Team</h1>
+      {session.role !== 'member' ? <InviteForm /> : null}
+      <ul>
+        {members.map((member) => (
+          <li key={member.userId}>{member.email} · {member.role}</li>
+        ))}
+      </ul>
+      {pending.length > 0 ? (
+        <>
+          <h2>Pending invites</h2>
+          <ul>
+            {pending.map((invite) => (
+              <li key={invite.id}>
+                {invite.email} · expires {invite.expiresAt.toLocaleDateString()}
+                {session.role !== 'member' ? <RevokeButton id={invite.id} /> : null}
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+    </section>
+  );
+}
+`;
+
+const FAILING_RUN = ` RUN  v3.2.4 ~/code/acme-web
+
+ ✓ test/invitations.test.ts > invitations > lowercases the email and returns a token 9ms
+ × test/invitations.test.ts > invitations > refuses a second pending invite for the same email 6ms
+   → promise resolved "'q8Zr…'" instead of rejecting
+ ✓ test/invitations.test.ts > invitations > adds the member and marks the invite used 11ms
+ ✓ test/invitations.test.ts > invitations > rejects an expired invite 7ms
+ ✓ test/invitations.test.ts > invitations > rejects a revoked invite 8ms
+ ✓ test/invitations.test.ts > invitations > rejects an unknown token 2ms
+
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
+
+ FAIL  test/invitations.test.ts > invitations > refuses a second pending invite for the same email
+AssertionError: promise resolved "'q8Zr…'" instead of rejecting
+ ❯ test/invitations.test.ts:22:94
+
+ Test Files  1 failed (1)
+      Tests  1 failed | 5 passed (6)
+   Duration  1.18s`;
+
+const PASSING_RUN = ` RUN  v3.2.4 ~/code/acme-web
+
+ ✓ test/invitations.test.ts (6 tests) 41ms
+
+ Test Files  1 passed (1)
+      Tests  6 passed (6)
+   Duration  0.94s`;
+
+const PLAN = (statuses: ('done' | 'in_progress' | 'pending')[]) => {
+	const labels = [
+		'Read the team, membership and email code',
+		'Add an invitations table with hashed tokens',
+		'Create, revoke and accept invites in one module',
+		'API route, invite email and accept page',
+		'Tests for duplicates, expiry, revocation and reuse',
+		'Run the tests and check the team page'
+	];
+	return labels.map((label, index) => ({ label, status: statuses[index] }));
+};
+
+const turnOne: SessionBeat[] = [
+	{
+		kind: 'user',
+		text: 'We need team invitations. Admins on /settings/team should be able to invite people by email; the invitee gets a link, signs in or signs up, and lands in the team.\n\nInvites should expire after a week, be revocable, and an email should only ever have one pending invite per team. Please add tests.'
+	},
+	{
+		kind: 'reasoning',
+		text: 'Four pieces: storage, the invite lifecycle, delivery, and the accept flow. The token in the email link is a bearer credential, so only its hash should be stored and the comparison should go through the hash. "One pending invite per email per team" needs a normalised email, otherwise Dana@ and dana@ slip past each other. Accepting has to add the membership and mark the invite used atomically, or a double-click could add someone twice. Expiry, revocation and reuse each need their own error so the accept page can say what happened.',
+		durationMs: 2800
+	},
+	{ kind: 'plan', steps: PLAN(['in_progress', 'pending', 'pending', 'pending', 'pending', 'pending']) },
+	{
+		kind: 'tools',
+		calls: [
+			{ tool: 'read', target: 'src/db/schema.ts' },
+			{ tool: 'read', target: 'src/lib/db.ts' },
+			{ tool: 'read', target: 'src/lib/members.ts' },
+			{ tool: 'read', target: 'src/app/settings/team/page.tsx' },
+			{ tool: 'grep', target: 'sendEmail(' },
+			{ tool: 'read', target: 'src/lib/email.ts' },
+			{ tool: 'glob', target: 'src/app/api/**/route.ts' },
+			{ tool: 'read', target: 'src/auth/session.ts' }
+		]
+	},
+	{
+		kind: 'say',
+		text: 'Here’s what the codebase already gives us:\n\n- **Drizzle on Postgres** in `src/db/schema.ts`, with `teams` and `memberships` (roles `owner`, `admin`, `member`).\n- **`sendEmail`** in `src/lib/email.ts`, used by password reset, so invites can go through the same provider.\n- **`getSession`** returns `teamId`, `userId` and `role`, which is enough to gate invites to owners and admins.\n\nI’ll store only a SHA-256 of each invite token, normalise emails to lowercase, and accept inside a transaction.'
+	},
+	{ kind: 'plan', steps: PLAN(['done', 'in_progress', 'pending', 'pending', 'pending', 'pending']) },
+	{ kind: 'edit', path: 'src/db/schema.ts', after: SCHEMA_WITH_INVITES },
+	{ kind: 'plan', steps: PLAN(['done', 'done', 'in_progress', 'pending', 'pending', 'pending']) },
+	{ kind: 'edit', path: 'src/lib/invitations.ts', after: INVITATIONS_V1 },
+	{ kind: 'plan', steps: PLAN(['done', 'done', 'done', 'in_progress', 'pending', 'pending']) },
+	{ kind: 'edit', path: 'src/app/api/invitations/route.ts', after: ROUTE_TS },
+	{ kind: 'edit', path: 'src/emails/invite.tsx', after: EMAIL_TSX },
+	{ kind: 'edit', path: 'src/app/invite/[token]/page.tsx', after: ACCEPT_PAGE },
+	{ kind: 'plan', steps: PLAN(['done', 'done', 'done', 'done', 'in_progress', 'pending']) },
+	{ kind: 'edit', path: 'test/invitations.test.ts', after: INVITE_TESTS },
+	{ kind: 'plan', steps: PLAN(['done', 'done', 'done', 'done', 'done', 'in_progress']) },
+	{ kind: 'permission', title: 'Run a command', command: 'pnpm vitest run test/invitations.test.ts' },
+	{ kind: 'shell', command: 'pnpm vitest run test/invitations.test.ts', output: FAILING_RUN, exitCode: 1 },
+	{
+		kind: 'reasoning',
+		text: 'The duplicate check let `DANA@example.com` through after `dana@example.com` was invited. `email` is lowercased for the insert, but the lookup for a pending invite still compares `input.email`, the raw value. So the stored row never matches a differently-cased second request.',
+		durationMs: 1700
+	},
+	{
+		kind: 'say',
+		text: 'One failure, and it’s a real bug: the pending-invite lookup compared the **raw** email while the insert stored the lowercased one, so `DANA@example.com` could get a second invite. Using the normalised email in both places.'
+	},
+	{ kind: 'edit', path: 'src/lib/invitations.ts', after: INVITATIONS_V2 },
+	{ kind: 'shell', command: 'pnpm vitest run test/invitations.test.ts', output: PASSING_RUN, exitCode: 0 },
+	{ kind: 'shell', command: 'pnpm tsc --noEmit', output: '', exitCode: 0 },
+	{ kind: 'browse', url: 'http://localhost:3000/settings/team', title: 'Team settings · Acme' },
+	{ kind: 'plan', steps: PLAN(['done', 'done', 'done', 'done', 'done', 'done']) },
+	{
+		kind: 'say',
+		text: 'Team invitations are in. Admins and owners can invite from **Team settings**; the invitee gets a one-time link that expires after **7 days**.\n\n- `src/lib/invitations.ts` creates, revokes and accepts invites. Tokens are stored only as SHA-256 hashes, emails are lowercased, and accepting adds the membership and marks the invite used in one transaction.\n- `POST /api/invitations` validates with zod and returns **409** for a duplicate pending invite; `DELETE` revokes.\n- `/invite/[token]` sends signed-out people through `/login?next=…` and explains expired, revoked or used links.\n\nAll 6 tests pass and the project typechecks. The first run caught a differently-cased email slipping past the one-pending-invite rule, which is fixed.'
+	}
+];
+
+const turnTwo: SessionBeat[] = [
+	{ kind: 'user', text: 'Nice. Rate-limit invite creation to 20 an hour per team, and show pending invites with a revoke button on the team page.' },
+	{
+		kind: 'reasoning',
+		text: 'Counting the team’s invites from the last hour in the same query path is enough here, no new store needed. The page needs pending invites only: not accepted, not revoked, not expired.',
+		durationMs: 1300
+	},
+	{
+		kind: 'tools',
+		calls: [
+			{ tool: 'read', target: 'src/lib/invitations.ts' },
+			{ tool: 'read', target: 'src/app/settings/team/page.tsx' },
+			{ tool: 'grep', target: "'use client'" }
+		]
+	},
+	{ kind: 'edit', path: 'src/lib/invitations.ts', after: INVITATIONS_V3 },
+	{ kind: 'edit', path: 'src/app/settings/team/page.tsx', after: TEAM_PAGE_V2 },
+	{ kind: 'shell', command: 'pnpm vitest run test/invitations.test.ts', output: PASSING_RUN, exitCode: 0 },
+	{ kind: 'browse', url: 'http://localhost:3000/settings/team', title: 'Team settings · Acme' },
+	{
+		kind: 'say',
+		text: 'Done. Creating more than **20 invites in an hour** for one team now fails with `rate-limited`, and the team page lists pending invites with their expiry date and a **Revoke** button for admins.'
+	}
+];
+
+const turnThree: SessionBeat[] = [
+	{ kind: 'user', text: 'Last thing: record an audit event whenever an invite is accepted or revoked.', delay: 1200 },
+	{
+		kind: 'reasoning',
+		text: 'Look for an existing audit log before adding one. If there isn’t one, the event should be written in the same transaction as the change so the log can’t disagree with the data.',
+		durationMs: 1600
+	},
+	{
+		kind: 'tools',
+		calls: [
+			{ tool: 'grep', target: 'audit' },
+			{ tool: 'grep', target: 'track(' },
+			{ tool: 'read', target: 'src/db/schema.ts' }
+		]
+	},
+	// CI on the pull request finishes while the agent works, and a teammate approves.
+	{ kind: 'check', worktreeId: BRANCH, check: { id: 'e2e', status: 'passed', summary: undefined }, delay: 900 },
+	{ kind: 'pr', worktreeId: BRANCH, pr: { review: 'approved', merge: 'behind', unresolved: 0 } },
+	{
+		kind: 'question',
+		questions: [
+			{
+				id: 'sink',
+				question: 'There’s no audit log yet. Where should these events go?',
+				options: [
+					{ id: 'table', label: 'A new audit_events table, written in the same transaction' },
+					{ id: 'analytics', label: 'The product analytics stream (not guaranteed, but no migration)' }
+				]
+			}
+		]
+	},
+	{ kind: 'edit', path: 'src/db/schema.ts', after: SCHEMA_WITH_AUDIT },
+	{ kind: 'edit', path: 'src/lib/audit.ts', after: AUDIT_TS },
+	{ kind: 'edit', path: 'src/lib/invitations.ts', after: INVITATIONS_V4 },
+	{ kind: 'shell', command: 'pnpm drizzle-kit generate', output: '[✓] Your SQL migration file ➜ drizzle/0007_audit_events.sql 🚀', exitCode: 0 },
+	{ kind: 'shell', command: 'pnpm vitest run test/invitations.test.ts', output: PASSING_RUN, exitCode: 0 },
+	{
+		kind: 'say',
+		text: 'Accepting and revoking an invite now writes an `audit_events` row **in the same transaction** as the change, so the log can never disagree with the data. The migration is `drizzle/0007_audit_events.sql`; revoking now takes the acting user’s id, so `DELETE /api/invitations` passes `session.userId`.'
+	}
+];
+
+/** The session's worktree as it opens: five commits ahead of main, a pull request with CI green but for E2E, still running. */
+const INVITES_WORKTREE: Worktree = {
+	id: BRANCH,
+	branch: BRANCH,
+	base: 'main',
+	kind: 'worktree',
+	path: '~/code/acme-web/.worktrees/team-invitations',
+	ahead: 5,
+	behind: 2,
+	pr: {
+		number: 1287,
+		title: 'feat(team): invitations with expiring one-time links',
+		url: 'https://github.com/acme/web/pull/1287',
+		state: 'open',
+		review: 'pending',
+		merge: 'blocked',
+		unresolved: 2,
+		checks: [
+			{ id: 'typecheck', name: 'Typecheck', status: 'passed', required: true },
+			{ id: 'lint', name: 'Lint', status: 'passed', required: true },
+			{ id: 'unit', name: 'Unit tests', status: 'passed', required: true },
+			{ id: 'e2e', name: 'E2E', status: 'running', required: true, summary: '31 of 44 specs' },
+			{ id: 'migrations', name: 'Migrations', status: 'passed' },
+			{ id: 'coverage', name: 'Coverage', status: 'passed' },
+			{ id: 'bundle', name: 'Bundle size', status: 'passed' },
+			{ id: 'preview', name: 'Preview deploy', status: 'passed' },
+			{ id: 'audit', name: 'Dependency audit', status: 'skipped' }
+		]
+	}
+};
+
+export const invitationsSession: CodingSession = {
+	id: 'session-invites',
+	title: 'Team invitations end to end',
+	projectId: 'acme-web',
+	location: 'worktree',
+	branch: BRANCH,
+	worktrees: [INVITES_WORKTREE],
+	model: { modelId: 'opus-5', levelId: 'high' },
+	updatedLabel: 'now',
+	script: [...turnOne, ...turnTwo, ...turnThree],
+	played: turnOne.length + turnTwo.length
+};
diff --git a/packages/ui/src/components/coding-agent/demo-long.ts b/packages/ui/src/components/coding-agent/demo-long.ts
new file mode 100644
index 0000000..34c2afb
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/demo-long.ts
@@ -0,0 +1,136 @@
+import type { CodingSession, SessionBeat } from './types';
+
+/**
+ * A very long thread for stress-testing the transcript and the turn rail: a route-by-route migration of an API layer
+ * over 120 turns, each with reasoning, reads, an edit, a test run and a reply. It opens with all of it as history.
+ */
+
+const ROUTES = [
+	'accounts',
+	'audit-events',
+	'billing/invoices',
+	'billing/portal',
+	'checkout',
+	'comments',
+	'exports',
+	'feature-flags',
+	'files',
+	'health',
+	'imports',
+	'integrations/github',
+	'integrations/slack',
+	'invitations',
+	'members',
+	'notifications',
+	'orders',
+	'projects',
+	'reports',
+	'search',
+	'sessions',
+	'settings',
+	'tags',
+	'teams',
+	'tokens',
+	'uploads',
+	'usage',
+	'users',
+	'webhooks/stripe',
+	'workspaces'
+] as const;
+
+type Route = (typeof ROUTES)[number];
+
+const handlerName = (route: Route) =>
+	route
+		.split(/[/-]/)
+		.map((part, index) => (index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1)))
+		.join('');
+
+function routeFile(route: Route, step: number) {
+	const name = handlerName(route);
+	return `import { z } from 'zod';
+
+import { route } from '@/lib/typed-route';
+import { db } from '@/lib/db';
+
+const Query = z.object({ cursor: z.string().optional(), limit: z.coerce.number().int().min(1).max(${50 + step}).default(20) });
+
+/** GET /api/${route}: one page of ${route}, newest first. */
+export const GET = route({ query: Query }, async ({ query, session }) => {
+  const rows = await db.${name}.findMany({
+    where: { teamId: session.teamId },
+    take: query.limit + 1,
+    cursor: query.cursor ? { id: query.cursor } : undefined,
+    orderBy: { createdAt: 'desc' }
+  });
+  const next = rows.length > query.limit ? rows.pop()?.id : undefined;
+  return { items: rows, next };
+});
+`;
+}
+
+const ASKS: ((route: Route) => string)[] = [
+	(route) => `Move \`/api/${route}\` onto the typed route helper.`,
+	(route) => `The \`${route}\` handler still parses its query by hand. Use the zod schema like the others.`,
+	(route) => `Add pagination to \`/api/${route}\`, same cursor shape as \`/api/teams\`.`,
+	(route) => `\`/api/${route}\` returns 500 when \`limit\` is a string. Fix it and cover it with a test.`
+];
+
+const REPLIES: ((route: Route, step: number) => string)[] = [
+	(route) =>
+		`\`/api/${route}\` now goes through \`route()\`: the query is validated before the handler runs, and a bad one gets a **400** with the field that failed instead of a 500.`,
+	(_route, step) =>
+		`Done. The handler takes \`{ query, session }\` from the helper, so the hand-rolled parsing is gone. ${step % 3 === 0 ? 'One test needed updating because it relied on the old error text.' : 'Existing tests pass unchanged.'}`,
+	(route) =>
+		`\`/api/${route}\` pages with a cursor now:\n\n- \`limit\` defaults to **20** and is capped.\n- \`next\` is the id to pass as \`cursor\` for the following page, and is absent on the last one.`,
+	(route) =>
+		`Fixed: \`limit\` is coerced from the query string, so \`?limit=10\` works and \`?limit=ten\` is a **400**. Added a test for both in \`test/api/${route.replace('/', '-')}.test.ts\`.`
+];
+
+function turn(index: number): SessionBeat[] {
+	const route = ROUTES[index % ROUTES.length];
+	const kind = index % ASKS.length;
+	const test = `test/api/${route.replace('/', '-')}.test.ts`;
+	const passed = 3 + (index % 5);
+	return [
+		{ kind: 'user', text: ASKS[kind](route) },
+		{
+			kind: 'reasoning',
+			text: `Check how \`${route}\` reads its input today, then follow the pattern the migrated routes use so the error shape stays consistent.`,
+			durationMs: 600 + (index % 7) * 150
+		},
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'read', target: `src/app/api/${route}/route.ts` },
+				{ tool: 'grep', target: `/api/${route}` },
+				{ tool: 'read', target: 'src/lib/typed-route.ts' }
+			]
+		},
+		{ kind: 'edit', path: `src/app/api/${route}/route.ts`, after: routeFile(route, index) },
+		{
+			kind: 'shell',
+			command: `pnpm vitest run ${test}`,
+			output: ` ✓ ${test} (${passed} tests) ${12 + (index % 9)}ms\n\n Test Files  1 passed (1)\n      Tests  ${passed} passed (${passed})`,
+			exitCode: 0
+		},
+		{ kind: 'say', text: REPLIES[kind](route, index) }
+	];
+}
+
+/** How many turns the long thread has. */
+export const LONG_THREAD_TURNS = 120;
+
+const script: SessionBeat[] = Array.from({ length: LONG_THREAD_TURNS }, (_, index) => turn(index)).flat();
+
+export const longThreadSession: CodingSession = {
+	id: 'session-long',
+	title: 'Move the API layer to typed routes',
+	projectId: 'acme-web',
+	location: 'worktree',
+	branch: 'agent/typed-routes',
+	model: { modelId: 'sonnet-5', levelId: 'medium' },
+	updatedLabel: '3h',
+	script,
+	played: script.length
+};
diff --git a/packages/ui/src/components/coding-agent/demo-security.ts b/packages/ui/src/components/coding-agent/demo-security.ts
new file mode 100644
index 0000000..3acacc4
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/demo-security.ts
@@ -0,0 +1,421 @@
+import type { CICheck, Worktree } from './harness';
+import type { CodingSession, SessionBeat } from './types';
+
+/**
+ * The multi-agent showcase: a lead agent plans a security pass, a scout maps the code, three workers fix things in
+ * parallel in their own worktrees (talking to each other and to a shared task board), one hits a failing test and
+ * recovers, and a reviewer checks the combined result before the lead reports back.
+ */
+
+export const SECURITY_BASE_FILES: Record<string, string> = {
+	'src/auth/reset.ts': `import { randomBytes } from 'node:crypto';
+
+import { db } from '../lib/db';
+
+export async function createResetToken(userId: string) {
+  const token = randomBytes(16).toString('hex');
+  await db.passwordResets.insert({ userId, token, createdAt: new Date() });
+  return token;
+}
+
+export async function consumeResetToken(token: string) {
+  const row = await db.passwordResets.findFirst({ where: { token } });
+  return row?.userId ?? null;
+}
+`
+};
+
+const COOKIES_AFTER = `export function cookies(request: Request) {
+  const header = request.headers.get('cookie') ?? '';
+  const pairs = header.split(';').map((part) => part.trim().split('='));
+  return new Map(pairs.map(([key, value]) => [key, decodeURIComponent(value ?? '')]));
+}
+
+/** Session cookie flags: unreadable from scripts, HTTPS only, and not sent on cross-site POSTs. */
+export const SESSION_COOKIE = {
+  name: '__Host-acme_session',
+  httpOnly: true,
+  secure: true,
+  sameSite: 'lax',
+  path: '/',
+  maxAge: 60 * 60 * 24 * 7
+} as const;
+
+export function serializeSession(value: string) {
+  const { name, maxAge } = SESSION_COOKIE;
+  return \`\${name}=\${encodeURIComponent(value)}; Path=/; Max-Age=\${maxAge}; HttpOnly; Secure; SameSite=Lax\`;
+}
+`;
+
+const MIDDLEWARE_CSRF = `import { NextResponse, type NextRequest } from 'next/server';
+
+const UNSAFE = new Set(['POST', 'PUT', 'PATCH', 'DELETE']);
+
+/** Rejects state-changing API requests that don't come from our own pages. */
+export function middleware(request: NextRequest) {
+  if (UNSAFE.has(request.method)) {
+    const origin = request.headers.get('origin');
+    const expected = request.nextUrl.origin;
+    if (!origin || origin !== expected) {
+      return NextResponse.json({ error: 'Cross-site request blocked' }, { status: 403 });
+    }
+  }
+  return NextResponse.next();
+}
+
+export const config = { matcher: ['/api/:path*'] };
+`;
+
+const RESET_V1 = `import { createHash, randomBytes, timingSafeEqual } from 'node:crypto';
+
+import { db } from '../lib/db';
+
+const TTL_MS = 30 * 60 * 1000;
+const hash = (token: string) => createHash('sha256').update(token).digest();
+
+/** A 256-bit token for the email link; only its hash is stored. */
+export async function createResetToken(userId: string) {
+  const token = randomBytes(32).toString('base64url');
+  await db.passwordResets.insert({ userId, tokenHash: hash(token), expiresAt: new Date(Date.now() + TTL_MS) });
+  return token;
+}
+
+export async function consumeResetToken(token: string) {
+  const row = await db.passwordResets.findFirst({ where: { tokenHash: hash(token) } });
+  if (!row || row.expiresAt < new Date()) return null;
+  return row.userId;
+}
+`;
+
+const RESET_V2 = RESET_V1.replace(
+	`  if (!row || row.expiresAt < new Date()) return null;
+  return row.userId;`,
+	`  if (!row || row.usedAt || row.expiresAt < new Date()) return null;
+  // One use only: a link that leaked from an inbox can't be replayed.
+  await db.passwordResets.update({ where: { id: row.id }, data: { usedAt: new Date() } });
+  return row.userId;`
+);
+
+/** The reviewer's fix-up in the session cookie worktree: a malformed cookie shouldn't throw. */
+const COOKIES_SAFE = COOKIES_AFTER.replace(
+	`  return new Map(pairs.map(([key, value]) => [key, decodeURIComponent(value ?? '')]));
+}`,
+	`  return new Map(pairs.map(([key, value]) => [key, safeDecode(value ?? '')]));
+}
+
+/** A malformed cookie value shouldn't take the request down with a URIError. */
+function safeDecode(value: string) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}`
+);
+
+/** The reviewer's fix-up in the reset worktree: lookups go by hash, so the constant-time compare was never used. */
+const RESET_V3 = RESET_V2.replace(`import { createHash, randomBytes, timingSafeEqual } from 'node:crypto';`, `import { createHash, randomBytes } from 'node:crypto';`);
+
+const LEAD_BRANCH = 'security/launch-pass';
+const COOKIE_BRANCH = 'agent/session-cookie';
+const CSRF_BRANCH = 'agent/csrf-origin';
+const RESET_BRANCH = 'agent/reset-tokens';
+
+/** The CI every fix branch runs, all waiting to start. */
+const QUEUED_CHECKS: CICheck[] = [
+	{ id: 'typecheck', name: 'Typecheck', status: 'queued', required: true },
+	{ id: 'lint', name: 'Lint', status: 'queued', required: true },
+	{ id: 'unit', name: 'Unit tests', status: 'queued', required: true },
+	{ id: 'e2e', name: 'E2E', status: 'queued', required: true },
+	{ id: 'codeql', name: 'CodeQL', status: 'queued' }
+];
+
+const check = (worktreeId: string, id: string, status: CICheck['status'], extra: Partial<CICheck> = {}): SessionBeat => ({
+	kind: 'check',
+	worktreeId,
+	check: { id, status, ...extra }
+});
+
+/** The lead's own branch, which the fix branches merge into before it goes to main. */
+const LEAD_WORKTREE: Worktree = {
+	id: LEAD_BRANCH,
+	branch: LEAD_BRANCH,
+	base: 'main',
+	kind: 'checkout',
+	path: '~/code/acme-web',
+	ahead: 1,
+	pr: {
+		number: 1300,
+		title: 'Security pass on auth before launch',
+		url: 'https://github.com/acme/web/pull/1300',
+		state: 'draft',
+		review: 'pending',
+		merge: 'blocked',
+		checks: [
+			{ id: 'typecheck', name: 'Typecheck', status: 'passed', required: true },
+			{ id: 'lint', name: 'Lint', status: 'passed', required: true },
+			{ id: 'unit', name: 'Unit tests', status: 'passed', required: true },
+			{ id: 'e2e', name: 'E2E', status: 'skipped', required: true }
+		]
+	}
+};
+
+const RESET_TEST_FAIL = ` ✓ test/reset.test.ts > reset tokens > issues a 43-character token 4ms
+ ✓ test/reset.test.ts > reset tokens > expires after 30 minutes 3ms
+ × test/reset.test.ts > reset tokens > can only be used once 6ms
+   → expected 'u_42' to be null
+
+ Test Files  1 failed (1)
+      Tests  1 failed | 2 passed (3)`;
+
+const RESET_TEST_PASS = ` ✓ test/reset.test.ts (3 tests) 12ms
+
+ Test Files  1 passed (1)
+      Tests  3 passed (3)`;
+
+const TASKS = {
+	map: { id: 'map', title: 'Map auth entry points and session issuance' },
+	cookies: { id: 'cookies', title: 'Harden the session cookie', dependsOn: ['map'] },
+	csrf: { id: 'csrf', title: 'Block cross-site writes to /api', dependsOn: ['map'] },
+	reset: { id: 'reset', title: 'Make reset tokens single-use and short-lived', dependsOn: ['map'] },
+	review: { id: 'review', title: 'Review the three branches together', dependsOn: ['cookies', 'csrf', 'reset'] }
+};
+
+const scout: SessionBeat = {
+	kind: 'spawn',
+	agent: { id: 'scout', name: 'Scout', kind: 'Explore', role: 'worker', phase: 'Investigate', task: 'Map every auth entry point and how sessions are issued, read-only.' },
+	script: [
+		{ kind: 'task', task: { ...TASKS.map, status: 'in_progress', ownerRunId: 'scout' } },
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'glob', target: 'src/**/route.ts' },
+				{ tool: 'grep', target: 'acme_session' },
+				{ tool: 'read', target: 'src/auth/session.ts' },
+				{ tool: 'read', target: 'src/auth/cookies.ts' },
+				{ tool: 'read', target: 'src/middleware.ts' },
+				{ tool: 'read', target: 'src/auth/reset.ts' }
+			]
+		},
+		{
+			kind: 'say',
+			text: 'Three gaps: the session cookie is set without `HttpOnly`/`Secure`/`SameSite`; `/api` accepts cross-site POSTs (no origin check); reset tokens are 128-bit, stored in plain text, never expire and can be reused.'
+		},
+		{ kind: 'task', task: { ...TASKS.map, status: 'done', ownerRunId: 'scout' } }
+	]
+};
+
+const sessionsWorker: SessionBeat = {
+	kind: 'spawn',
+	agent: {
+		id: 'sessions',
+		name: 'Sessions',
+		kind: 'Implementer',
+		role: 'worker',
+		phase: 'Fix',
+		task: 'Set HttpOnly, Secure and SameSite on the session cookie and move it to a __Host- name.',
+		workspace: { kind: 'worktree', branch: 'agent/session-cookie' }
+	},
+	script: [
+		{ kind: 'task', task: { ...TASKS.cookies, status: 'in_progress', ownerRunId: 'sessions' } },
+		{ kind: 'tools', calls: [{ tool: 'read', target: 'src/auth/cookies.ts' }, { tool: 'grep', target: 'Set-Cookie' }] },
+		{ kind: 'edit', path: 'src/auth/cookies.ts', after: COOKIES_AFTER, delay: 2200 },
+		{
+			kind: 'message',
+			to: ['csrf'],
+			text: 'Heads up: I’m keeping `SameSite=Lax`, not `Strict`. `Strict` drops the cookie on the OAuth callback redirect and logs people out. Your origin check covers the POST case.',
+			delay: 1800
+		},
+		{ kind: 'shell', command: 'pnpm vitest run test/session.test.ts', output: ' ✓ test/session.test.ts (4 tests) 9ms\n\n Test Files  1 passed (1)', exitCode: 0 },
+		{ kind: 'worktree', worktree: { id: COOKIE_BRANCH, ahead: 1 } },
+		{
+			kind: 'pr',
+			worktreeId: COOKIE_BRANCH,
+			pr: {
+				number: 1301,
+				title: 'fix(auth): harden the session cookie',
+				url: 'https://github.com/acme/web/pull/1301',
+				state: 'open',
+				review: 'pending',
+				merge: 'checking',
+				checks: QUEUED_CHECKS
+			}
+		},
+		check(COOKIE_BRANCH, 'typecheck', 'running'),
+		{ kind: 'task', task: { ...TASKS.cookies, status: 'done', ownerRunId: 'sessions' } },
+		{ kind: 'say', text: 'Session cookie is now `__Host-acme_session` with `HttpOnly; Secure; SameSite=Lax`, so scripts can’t read it and cross-site POSTs don’t carry it.' }
+	]
+};
+
+const csrfWorker: SessionBeat = {
+	kind: 'spawn',
+	agent: {
+		id: 'csrf',
+		name: 'CSRF',
+		kind: 'Implementer',
+		role: 'worker',
+		phase: 'Fix',
+		task: 'Reject state-changing /api requests whose Origin isn’t our own.',
+		workspace: { kind: 'worktree', branch: 'agent/csrf-origin' }
+	},
+	script: [
+		{ kind: 'task', task: { ...TASKS.csrf, status: 'in_progress', ownerRunId: 'csrf' } },
+		{ kind: 'tools', calls: [{ tool: 'read', target: 'src/middleware.ts' }, { tool: 'glob', target: 'src/app/api/**/route.ts' }] },
+		{ kind: 'reasoning', text: 'An Origin check in middleware covers every route under /api at once. Same-origin fetches from our pages always send Origin on unsafe methods, so legitimate traffic passes.', durationMs: 1500 },
+		{ kind: 'edit', path: 'src/middleware.ts', after: MIDDLEWARE_CSRF },
+		{ kind: 'permission', title: 'Run a command', command: 'pnpm vitest run test/middleware.test.ts', delay: 2600 },
+		{ kind: 'shell', command: 'pnpm vitest run test/middleware.test.ts', output: ' ✓ test/middleware.test.ts (5 tests) 14ms\n\n Test Files  1 passed (1)', exitCode: 0 },
+		{ kind: 'message', to: ['sessions'], text: 'Agreed on Lax. The Origin check rejects cross-site writes before they reach a route, so Strict buys nothing here.' },
+		{ kind: 'worktree', worktree: { id: CSRF_BRANCH, ahead: 1, behind: 1 } },
+		{
+			kind: 'pr',
+			worktreeId: CSRF_BRANCH,
+			pr: {
+				number: 1302,
+				title: 'fix(api): block cross-site writes to /api',
+				url: 'https://github.com/acme/web/pull/1302',
+				state: 'open',
+				review: 'pending',
+				merge: 'checking',
+				checks: QUEUED_CHECKS
+			}
+		},
+		check(CSRF_BRANCH, 'typecheck', 'running'),
+		{ kind: 'task', task: { ...TASKS.csrf, status: 'done', ownerRunId: 'csrf' } },
+		{ kind: 'say', text: 'Every POST, PUT, PATCH and DELETE under `/api` now needs an `Origin` matching the app; anything else gets **403**. Five middleware tests cover same-site, cross-site, missing Origin and safe methods.' }
+	]
+};
+
+const resetWorker: SessionBeat = {
+	kind: 'spawn',
+	agent: {
+		id: 'reset',
+		name: 'Reset',
+		kind: 'Implementer',
+		role: 'worker',
+		phase: 'Fix',
+		task: 'Make password reset tokens 256-bit, hashed at rest, single-use and valid for 30 minutes.',
+		workspace: { kind: 'worktree', branch: 'agent/reset-tokens' }
+	},
+	script: [
+		{ kind: 'task', task: { ...TASKS.reset, status: 'in_progress', ownerRunId: 'reset' } },
+		{ kind: 'tools', calls: [{ tool: 'read', target: 'src/auth/reset.ts' }, { tool: 'grep', target: 'consumeResetToken' }] },
+		{ kind: 'edit', path: 'src/auth/reset.ts', after: RESET_V1, delay: 1800 },
+		{ kind: 'shell', command: 'pnpm vitest run test/reset.test.ts', output: RESET_TEST_FAIL, exitCode: 1 },
+		{ kind: 'reasoning', text: 'The token still works a second time: consuming it never marks it used. Record `usedAt` and refuse a used token.', durationMs: 1200 },
+		{ kind: 'edit', path: 'src/auth/reset.ts', after: RESET_V2 },
+		{ kind: 'shell', command: 'pnpm vitest run test/reset.test.ts', output: RESET_TEST_PASS, exitCode: 0 },
+		// Committed but not pushed for review yet, so this branch has no pull request.
+		{ kind: 'worktree', worktree: { id: RESET_BRANCH, ahead: 2 } },
+		{ kind: 'task', task: { ...TASKS.reset, status: 'done', ownerRunId: 'reset' } },
+		{ kind: 'say', text: 'Reset tokens are now 256-bit, stored only as SHA-256 hashes, expire after **30 minutes**, and work once. The first test run caught tokens being reusable, which is fixed.' }
+	]
+};
+
+const reviewer: SessionBeat = {
+	kind: 'spawn',
+	agent: {
+		id: 'reviewer',
+		name: 'Reviewer',
+		kind: 'Review',
+		role: 'worker',
+		phase: 'Review',
+		task: 'Review the three branches together: conflicts, missed routes, and anything the tests don’t cover.',
+		capabilities: { steer: true, stop: true }
+	},
+	script: [
+		{ kind: 'task', task: { ...TASKS.review, status: 'in_progress', ownerRunId: 'reviewer' } },
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'read', target: 'src/auth/cookies.ts' },
+				{ tool: 'read', target: 'src/middleware.ts' },
+				{ tool: 'read', target: 'src/auth/reset.ts' },
+				{ tool: 'grep', target: 'fetch(' }
+			]
+		},
+		check(COOKIE_BRANCH, 'typecheck', 'passed'),
+		check(COOKIE_BRANCH, 'lint', 'passed'),
+		check(CSRF_BRANCH, 'typecheck', 'passed'),
+		check(COOKIE_BRANCH, 'unit', 'running'),
+		check(CSRF_BRANCH, 'lint', 'passed'),
+		check(CSRF_BRANCH, 'unit', 'running'),
+		// One reviewer, two worktrees: small fix-ups land on the branches they belong to.
+		{ kind: 'edit', path: 'src/auth/cookies.ts', after: COOKIES_SAFE, worktree: COOKIE_BRANCH },
+		{ kind: 'edit', path: 'src/auth/reset.ts', after: RESET_V3, worktree: RESET_BRANCH },
+		check(COOKIE_BRANCH, 'unit', 'passed'),
+		check(COOKIE_BRANCH, 'e2e', 'running', { summary: '12 of 44 specs' }),
+		check(CSRF_BRANCH, 'unit', 'passed'),
+		check(CSRF_BRANCH, 'e2e', 'running', { summary: '9 of 44 specs' }),
+		check(COOKIE_BRANCH, 'codeql', 'passed'),
+		check(CSRF_BRANCH, 'e2e', 'failed', { summary: 'webhooks.spec.ts › Stripe webhook returns 200 (got 403)' }),
+		check(CSRF_BRANCH, 'codeql', 'passed'),
+		{
+			kind: 'pr',
+			worktreeId: CSRF_BRANCH,
+			pr: { review: 'changes-requested', merge: 'blocked', unresolved: 1 }
+		},
+		check(COOKIE_BRANCH, 'e2e', 'passed'),
+		{
+			kind: 'pr',
+			worktreeId: COOKIE_BRANCH,
+			pr: { review: 'approved', merge: 'clean' }
+		},
+		{ kind: 'message', to: ['root'], text: 'One follow-up: `src/app/api/webhooks/stripe/route.ts` receives server-to-server POSTs with no Origin, so the new check would block Stripe. It needs an exemption that verifies the Stripe signature instead.', protocol: 'result' },
+		{ kind: 'task', task: { ...TASKS.review, status: 'done', ownerRunId: 'reviewer' } },
+		{
+			kind: 'say',
+			text: 'The three branches merge cleanly and don’t overlap. I pushed two small fix-ups: a malformed cookie no longer throws (`agent/session-cookie`), and an unused `timingSafeEqual` import is gone (`agent/reset-tokens`). One real issue: the Stripe webhook is blocked by the Origin check, and E2E on #1302 confirms it.'
+		}
+	]
+};
+
+const script: SessionBeat[] = [
+	{
+		kind: 'user',
+		text: 'Before launch, do a security pass on auth: session handling, CSRF on the API, and password reset. Split it up and run the fixes in parallel; every fix needs tests, and have someone review the lot.'
+	},
+	{
+		kind: 'reasoning',
+		text: 'Mapping first, read-only, so the workers start from the same picture. The three fixes touch different files (cookies, middleware, reset), so they can run in parallel in separate worktrees without stepping on each other. A reviewer then looks at all three together, because the cookie and CSRF changes interact.',
+		durationMs: 2200
+	},
+	{ kind: 'task', task: { ...TASKS.map, status: 'pending' } },
+	{ kind: 'task', task: { ...TASKS.cookies, status: 'blocked' } },
+	{ kind: 'task', task: { ...TASKS.csrf, status: 'blocked' } },
+	{ kind: 'task', task: { ...TASKS.reset, status: 'blocked' } },
+	{ kind: 'task', task: { ...TASKS.review, status: 'blocked' } },
+	{ kind: 'phase', name: 'Investigate', status: 'running' },
+	scout,
+	{ kind: 'await', agents: ['scout'] },
+	{ kind: 'phase', name: 'Investigate', status: 'done' },
+	{ kind: 'phase', name: 'Fix in parallel', status: 'running' },
+	sessionsWorker,
+	csrfWorker,
+	resetWorker,
+	{ kind: 'await', agents: ['sessions', 'csrf', 'reset'] },
+	{ kind: 'phase', name: 'Fix in parallel', status: 'done' },
+	{ kind: 'route', to: 'reviewer', reason: 'The cookie and CSRF changes interact, so one agent reviews all three together.' },
+	{ kind: 'phase', name: 'Review', status: 'running' },
+	reviewer,
+	{ kind: 'await', agents: ['reviewer'] },
+	{ kind: 'phase', name: 'Review', status: 'done' },
+	{
+		kind: 'say',
+		text: 'The security pass is done, in three branches off `security/launch-pass`:\n\n- **Session cookie** (#1301, `agent/session-cookie`): `__Host-` name with `HttpOnly; Secure; SameSite=Lax`. CI is green and the reviewer approved.\n- **CSRF** (#1302, `agent/csrf-origin`): state-changing `/api` requests need a matching `Origin`, otherwise **403**. E2E fails on the Stripe webhook.\n- **Password reset** (`agent/reset-tokens`): 256-bit, hashed, single-use, 30-minute tokens. Committed, no pull request yet.\n\nThe failing E2E is the reviewer’s finding: Stripe’s server-to-server POSTs carry no Origin. I’d exempt that route and verify the Stripe signature instead. Want me to?'
+	}
+];
+
+export const securitySession: CodingSession = {
+	id: 'session-security',
+	title: 'Security pass on auth before launch',
+	projectId: 'acme-web',
+	agentName: 'Lead',
+	branch: LEAD_BRANCH,
+	worktrees: [LEAD_WORKTREE],
+	model: { modelId: 'opus-5', levelId: 'max' },
+	updatedLabel: 'now',
+	script,
+	// Opens with the scout's map done and the three workers about to start.
+	played: 11
+};
diff --git a/packages/ui/src/components/coding-agent/demo-shell.ts b/packages/ui/src/components/coding-agent/demo-shell.ts
new file mode 100644
index 0000000..d5c3772
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/demo-shell.ts
@@ -0,0 +1,48 @@
+import type { FileChange, TerminalLine } from './harness';
+
+/** What the demo shell can see: the session's files and changes, and where it runs. */
+type TerminalContext = { files: Record<string, string>; changes: FileChange[]; path: string; branch: string };
+
+/** A few read-only commands the demo shell answers from the session's own state; anything else is declined. */
+export function demoShell(command: string, context: TerminalContext): Pick<TerminalLine, 'kind' | 'text'>[] {
+	const [name, ...args] = command.trim().split(/\s+/);
+	const out = (text: string) => ({ kind: 'output' as const, text });
+	switch (name) {
+		case 'pwd':
+			return [out(context.path)];
+		case 'ls': {
+			const dir = (args[0] ?? '').replace(/\/$/, '');
+			const prefix = dir ? `${dir}/` : '';
+			const entries = new Set<string>();
+			for (const path of Object.keys(context.files)) {
+				if (!path.startsWith(prefix)) continue;
+				const [head, ...rest] = path.slice(prefix.length).split('/');
+				entries.add(rest.length ? `${head}/` : head);
+			}
+			return entries.size ? [out([...entries].sort().join('  '))] : [{ kind: 'error', text: `ls: ${dir}: No such file or directory` }];
+		}
+		case 'cat': {
+			const file = context.files[args[0] ?? ''];
+			return file === undefined ? [{ kind: 'error', text: `cat: ${args[0] ?? ''}: No such file or directory` }] : file.replace(/\n$/, '').split('\n').map(out);
+		}
+		case 'git':
+			if (args[0] === 'status') {
+				if (context.changes.length === 0) return [out(`On branch ${context.branch}`), out('nothing to commit, working tree clean')];
+				return [
+					out(`On branch ${context.branch}`),
+					out('Changes not staged for commit:'),
+					...context.changes.map((change) => out(`  ${change.before === null ? 'new file:' : 'modified:'}   ${change.path}`))
+				];
+			}
+			if (args[0] === 'diff' && args[1] === '--stat') {
+				return context.changes.map((change) => out(` ${change.path} | ${change.additions + change.deletions} ${'+'.repeat(Math.min(change.additions, 20))}${'-'.repeat(Math.min(change.deletions, 20))}`));
+			}
+			if (args[0] === 'branch') return [out(`* ${context.branch}`)];
+			break;
+		case 'echo':
+			return [out(args.join(' '))];
+		case 'help':
+			return [out('This preview shell answers: pwd, ls [dir], cat <file>, git status, git diff --stat, git branch, echo, clear')];
+	}
+	return [{ kind: 'error', text: `${name}: not available in the preview shell. Type help for what is.` }];
+}
diff --git a/packages/ui/src/components/coding-agent/demo.ts b/packages/ui/src/components/coding-agent/demo.ts
new file mode 100644
index 0000000..9f8e629
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/demo.ts
@@ -0,0 +1,527 @@
+import type { AiModel } from '../ai/model-selector';
+import { INVITE_BASE_FILES, invitationsSession } from './demo-invitations';
+import { longThreadSession } from './demo-long';
+import { SECURITY_BASE_FILES, securitySession } from './demo-security';
+import type { CodingAgentData, CodingProject, CodingSession, SessionBeat } from './types';
+
+const REASONING = [
+	{ id: 'low', label: 'Low', description: 'Fastest replies; light reasoning.' },
+	{ id: 'medium', label: 'Medium', description: 'Balanced reasoning for most tasks.' },
+	{ id: 'high', label: 'High', description: 'Deliberate reasoning for hard problems; slower.' },
+	{ id: 'max', label: 'Max', description: 'Largest thinking budget; billed as output.' }
+];
+
+export const CODING_AGENT_MODELS: AiModel[] = [
+	{
+		id: 'opus-5',
+		name: 'Opus 5',
+		provider: 'Anthropic',
+		levels: REASONING,
+		defaultLevel: 'high',
+		pricing: { input: 15, output: 75, cachedInput: 1.5 },
+		contextWindow: 200_000,
+		tags: ['new']
+	},
+	{
+		id: 'sonnet-5',
+		name: 'Sonnet 5',
+		provider: 'Anthropic',
+		levels: REASONING,
+		defaultLevel: 'medium',
+		pricing: { input: 3, output: 15, cachedInput: 0.3 },
+		contextWindow: 1_000_000
+	},
+	{
+		id: 'haiku-4-5',
+		name: 'Haiku 4.5',
+		provider: 'Anthropic',
+		description: 'Quick edits and lookups.',
+		pricing: { input: 1, output: 5, cachedInput: 0.1 },
+		contextWindow: 200_000
+	},
+	{
+		id: 'local-coder',
+		name: 'Local coder 32B',
+		provider: 'Local',
+		description: 'Runs on this machine. Nothing leaves it.',
+		contextWindow: 128_000,
+		tags: ['free']
+	}
+];
+
+const REDIRECT_BEFORE = `import { getSession } from './session';
+
+/**
+ * Sends a freshly signed-in user back to the page they came from.
+ */
+export async function redirectAfterLogin(request: Request) {
+  const session = await getSession(request);
+  if (!session) return Response.redirect(new URL('/login', request.url));
+
+  const next = new URL(request.url).searchParams.get('next');
+  return Response.redirect(next ?? '/');
+}
+`;
+
+const REDIRECT_AFTER = `import { getSession } from './session';
+
+/** Paths a user may land on after signing in. Anything else falls back to the dashboard. */
+const SAFE_PREFIXES = ['/dashboard', '/settings', '/projects'];
+
+/**
+ * Sends a freshly signed-in user back to the page they came from, as long as
+ * that page is on this site. Absolute and protocol-relative URLs are dropped.
+ */
+export async function redirectAfterLogin(request: Request) {
+  const session = await getSession(request);
+  if (!session) return Response.redirect(new URL('/login', request.url));
+
+  const origin = new URL(request.url).origin;
+  const next = new URL(request.url).searchParams.get('next') ?? '/dashboard';
+  const target = new URL(next, origin);
+
+  const sameSite = target.origin === origin;
+  const allowed = SAFE_PREFIXES.some((prefix) => target.pathname.startsWith(prefix));
+  return Response.redirect(sameSite && allowed ? target : new URL('/dashboard', origin));
+}
+`;
+
+const REDIRECT_TEST = `import { describe, expect, it, vi } from 'vitest';
+
+import { redirectAfterLogin } from '../src/auth/redirect';
+
+vi.mock('../src/auth/session', () => ({ getSession: async () => ({ userId: 'u_1' }) }));
+
+const login = (next: string) => redirectAfterLogin(new Request(\`https://app.acme.dev/login?next=\${encodeURIComponent(next)}\`));
+
+describe('redirectAfterLogin', () => {
+  it('keeps same-site paths', async () => {
+    expect((await login('/settings/billing')).headers.get('location')).toBe('https://app.acme.dev/settings/billing');
+  });
+
+  it('drops other origins', async () => {
+    expect((await login('https://evil.example/phish')).headers.get('location')).toBe('https://app.acme.dev/dashboard');
+  });
+
+  it('drops protocol-relative URLs', async () => {
+    expect((await login('//evil.example')).headers.get('location')).toBe('https://app.acme.dev/dashboard');
+  });
+});
+`;
+
+const SESSION_TS = `import { cookies } from './cookies';
+
+export type Session = { userId: string; expiresAt: number };
+
+export async function getSession(request: Request): Promise<Session | null> {
+  const token = cookies(request).get('acme_session');
+  if (!token) return null;
+  const session = await verify(token);
+  return session && session.expiresAt > Date.now() ? session : null;
+}
+
+async function verify(token: string): Promise<Session | null> {
+  const [payload] = token.split('.');
+  try {
+    return JSON.parse(atob(payload)) as Session;
+  } catch {
+    return null;
+  }
+}
+`;
+
+const RATE_LIMIT_AFTER = `/**
+ * Fixed-window limiter keyed by client IP. Good enough for a single region;
+ * swap the Map for a shared store before running more than one instance.
+ */
+const WINDOW_MS = 60_000;
+const LIMIT = 30;
+
+const hits = new Map<string, { count: number; resetAt: number }>();
+
+export function rateLimit(request: Request) {
+  const key = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ?? 'local';
+  const now = Date.now();
+  const entry = hits.get(key);
+
+  if (!entry || entry.resetAt <= now) {
+    hits.set(key, { count: 1, resetAt: now + WINDOW_MS });
+    return { ok: true, remaining: LIMIT - 1 };
+  }
+
+  entry.count += 1;
+  return { ok: entry.count <= LIMIT, remaining: Math.max(0, LIMIT - entry.count), retryAfter: entry.resetAt - now };
+}
+`;
+
+const MIDDLEWARE_BEFORE = `import { NextResponse, type NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  return NextResponse.next();
+}
+
+export const config = { matcher: ['/api/:path*'] };
+`;
+
+const MIDDLEWARE_AFTER = `import { NextResponse, type NextRequest } from 'next/server';
+
+import { rateLimit } from './lib/rate-limit';
+
+export function middleware(request: NextRequest) {
+  const result = rateLimit(request);
+  if (!result.ok) {
+    return NextResponse.json(
+      { error: 'Too many requests' },
+      { status: 429, headers: { 'retry-after': String(Math.ceil((result.retryAfter ?? 0) / 1000)) } }
+    );
+  }
+  const response = NextResponse.next();
+  response.headers.set('x-ratelimit-remaining', String(result.remaining));
+  return response;
+}
+
+export const config = { matcher: ['/api/:path*'] };
+`;
+
+const DATES_TS = `import { format, parseISO, differenceInCalendarDays } from 'date-fns';
+
+export const formatDay = (iso: string) => format(parseISO(iso), 'MMM d, yyyy');
+
+export const daysUntil = (iso: string) => differenceInCalendarDays(parseISO(iso), new Date());
+`;
+
+const CHECKOUT_SPEC = `import { expect, test } from '@playwright/test';
+
+test('checkout completes with a saved card', async ({ page }) => {
+  await page.goto('/cart');
+  await page.getByRole('button', { name: 'Checkout' }).click();
+  await page.getByLabel('Saved card ending 4242').check();
+  await page.getByRole('button', { name: 'Pay now' }).click();
+  await expect(page.getByText('Order confirmed')).toBeVisible();
+});
+`;
+
+const ACME_WEB: CodingProject = {
+	id: 'acme-web',
+	name: 'acme-web',
+	path: '~/code/acme-web',
+	branch: 'main',
+	files: {
+		'package.json': `{\n  "name": "acme-web",\n  "private": true,\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "test": "vitest run",\n    "e2e": "playwright test"\n  }\n}\n`,
+		'README.md': '# acme-web\n\nThe Acme customer app. `pnpm dev` starts it on http://localhost:3000.\n',
+		'tsconfig.json': '{\n  "compilerOptions": { "strict": true, "target": "ES2022", "moduleResolution": "bundler" }\n}\n',
+		'src/auth/redirect.ts': REDIRECT_BEFORE,
+		'src/auth/session.ts': SESSION_TS,
+		'src/auth/cookies.ts': `export function cookies(request: Request) {\n  const header = request.headers.get('cookie') ?? '';\n  const pairs = header.split(';').map((part) => part.trim().split('='));\n  return new Map(pairs.map(([key, value]) => [key, decodeURIComponent(value ?? '')]));\n}\n`,
+		'src/app/login/page.tsx': `export default function LoginPage() {\n  return <LoginForm />;\n}\n`,
+		'src/app/dashboard/page.tsx': `export default function Dashboard() {\n  return <h1>Dashboard</h1>;\n}\n`,
+		'src/app/api/orders/route.ts': `export async function GET() {\n  return Response.json({ orders: [] });\n}\n`,
+		'src/middleware.ts': MIDDLEWARE_BEFORE,
+		'src/lib/dates.ts': DATES_TS,
+		'src/lib/money.ts': `export const formatMoney = (cents: number, currency = 'USD') =>\n  new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(cents / 100);\n`,
+		'e2e/checkout.spec.ts': CHECKOUT_SPEC,
+		...INVITE_BASE_FILES,
+		...SECURITY_BASE_FILES,
+		'test/session.test.ts': `import { expect, it } from 'vitest';\n\nit('rejects a missing cookie', async () => {\n  expect(true).toBe(true);\n});\n`
+	}
+};
+
+const ACME_API: CodingProject = {
+	id: 'acme-api',
+	name: 'acme-api',
+	path: '~/code/acme-api',
+	branch: 'main',
+	files: {
+		'package.json': '{\n  "name": "acme-api",\n  "private": true\n}\n',
+		'src/server.ts': `import { serve } from './http';\n\nserve({ port: 4000 });\n`,
+		'src/http.ts': `export function serve({ port }: { port: number }) {\n  console.log(\`listening on \${port}\`);\n}\n`
+	}
+};
+
+const redirectSession: CodingSession = {
+	id: 'session-redirect',
+	title: 'Fix open redirect after login',
+	projectId: 'acme-web',
+	model: { modelId: 'opus-5', levelId: 'high' },
+	updatedLabel: 'now',
+	script: [
+		{
+			kind: 'user',
+			text: 'The `next` param on /login lets anyone bounce a user to another site after they sign in. Lock it down to our own pages and add tests.',
+			delay: 500
+		},
+		{
+			kind: 'reasoning',
+			text: 'The redirect reads `next` straight from the query string and hands it to `Response.redirect`. Anything absolute, or protocol-relative like `//evil.example`, leaves the site. I should resolve it against our own origin, check the origin still matches, and keep an allow-list of landing paths so a typo can’t land on an API route. Then cover the three cases with tests.',
+			durationMs: 2200
+		},
+		{
+			kind: 'plan',
+			steps: [
+				{ label: 'Read the login redirect and session helpers', status: 'in_progress' },
+				{ label: 'Resolve the next param against our origin and allow-list paths', status: 'pending' },
+				{ label: 'Add tests for same-site, cross-site and protocol-relative targets', status: 'pending' },
+				{ label: 'Run the auth tests', status: 'pending' },
+				{ label: 'Check the login page in the browser', status: 'pending' }
+			]
+		},
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'read', target: 'src/auth/redirect.ts' },
+				{ tool: 'read', target: 'src/auth/session.ts' },
+				{ tool: 'grep', target: 'redirectAfterLogin' },
+				{ tool: 'glob', target: 'test/**/*.test.ts' }
+			]
+		},
+		{
+			kind: 'say',
+			text: 'Found it: `redirectAfterLogin` passes `next` to `Response.redirect` untouched, so `?next=https://evil.example` signs someone in and then sends them away. I’ll resolve the target against our origin and only follow it when it stays on the site and lands on a known page.'
+		},
+		{
+			kind: 'plan',
+			steps: [
+				{ label: 'Read the login redirect and session helpers', status: 'done' },
+				{ label: 'Resolve the next param against our origin and allow-list paths', status: 'in_progress' },
+				{ label: 'Add tests for same-site, cross-site and protocol-relative targets', status: 'pending' },
+				{ label: 'Run the auth tests', status: 'pending' },
+				{ label: 'Check the login page in the browser', status: 'pending' }
+			]
+		},
+		{ kind: 'edit', path: 'src/auth/redirect.ts', after: REDIRECT_AFTER },
+		{ kind: 'edit', path: 'test/redirect.test.ts', after: REDIRECT_TEST },
+		{
+			kind: 'plan',
+			steps: [
+				{ label: 'Read the login redirect and session helpers', status: 'done' },
+				{ label: 'Resolve the next param against our origin and allow-list paths', status: 'done' },
+				{ label: 'Add tests for same-site, cross-site and protocol-relative targets', status: 'done' },
+				{ label: 'Run the auth tests', status: 'in_progress' },
+				{ label: 'Check the login page in the browser', status: 'pending' }
+			]
+		},
+		{ kind: 'permission', title: 'Run a command', command: 'pnpm vitest run test/redirect.test.ts' },
+		{
+			kind: 'shell',
+			command: 'pnpm vitest run test/redirect.test.ts',
+			output: ' ✓ test/redirect.test.ts (3 tests) 14ms\n   ✓ redirectAfterLogin > keeps same-site paths\n   ✓ redirectAfterLogin > drops other origins\n   ✓ redirectAfterLogin > drops protocol-relative URLs\n\n Test Files  1 passed (1)\n      Tests  3 passed (3)\n   Duration  412ms',
+			exitCode: 0
+		},
+		{ kind: 'browse', url: 'http://localhost:3000/login?next=//evil.example', title: 'Sign in · Acme' },
+		{
+			kind: 'plan',
+			steps: [
+				{ label: 'Read the login redirect and session helpers', status: 'done' },
+				{ label: 'Resolve the next param against our origin and allow-list paths', status: 'done' },
+				{ label: 'Add tests for same-site, cross-site and protocol-relative targets', status: 'done' },
+				{ label: 'Run the auth tests', status: 'done' },
+				{ label: 'Check the login page in the browser', status: 'done' }
+			]
+		},
+		{
+			kind: 'say',
+			text: 'Done. `next` is now resolved against our own origin and only followed when it stays on the site and starts with `/dashboard`, `/settings` or `/projects`; everything else lands on the dashboard. The three new tests pass, and the login page with `?next=//evil.example` now signs in to the dashboard. The diff is in **Files changed** on the right.'
+		}
+	]
+};
+
+const rateLimitSession: CodingSession = {
+	id: 'session-rate-limit',
+	title: 'Add rate limiting to API routes',
+	projectId: 'acme-web',
+	location: 'worktree',
+	branch: 'agent/rate-limit',
+	model: { modelId: 'sonnet-5', levelId: 'medium' },
+	updatedLabel: '1m',
+	played: 3,
+	script: [
+		{ kind: 'user', text: 'Add a simple per-IP rate limit to everything under /api. 30 requests a minute is fine for now.' },
+		{
+			kind: 'reasoning',
+			text: 'Middleware already matches `/api/:path*`, so the limiter belongs there. A fixed window in memory is enough for one region; I’ll say so in a comment.',
+			durationMs: 1400
+		},
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'read', target: 'src/middleware.ts' },
+				{ tool: 'list', target: 'src/app/api' }
+			]
+		},
+		{ kind: 'edit', path: 'src/lib/rate-limit.ts', after: RATE_LIMIT_AFTER, delay: 2600 },
+		{ kind: 'edit', path: 'src/middleware.ts', after: MIDDLEWARE_AFTER },
+		{
+			kind: 'shell',
+			command: 'pnpm tsc --noEmit',
+			output: '',
+			exitCode: 0
+		},
+		{
+			kind: 'say',
+			text: 'Added `src/lib/rate-limit.ts` (30 requests a minute per IP, fixed window) and wired it into the existing API middleware. Over the limit, routes answer `429` with a `retry-after` header, and every response carries `x-ratelimit-remaining`. It keeps counts in memory, so swap in a shared store before scaling past one instance.'
+		}
+	]
+};
+
+const temporalSession: CodingSession = {
+	id: 'session-temporal',
+	title: 'Move date helpers off date-fns',
+	projectId: 'acme-web',
+	model: { modelId: 'sonnet-5', levelId: 'low' },
+	updatedLabel: '4m',
+	played: 3,
+	script: [
+		{ kind: 'user', text: 'Can we drop date-fns? We only use it in a couple of helpers.' },
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'grep', target: "from 'date-fns'" },
+				{ tool: 'read', target: 'src/lib/dates.ts' }
+			]
+		},
+		{
+			kind: 'say',
+			text: 'Only `src/lib/dates.ts` imports it, for `formatDay` and `daysUntil`. Both are easy to rebuild on the platform.'
+		},
+		{
+			kind: 'question',
+			delay: 1800,
+			questions: [
+				{
+					id: 'runtime',
+					question: 'Which API should the helpers use?',
+					options: [
+						{ id: 'intl', label: 'Intl.DateTimeFormat and plain Date (works everywhere today)' },
+						{ id: 'temporal', label: 'Temporal, with the polyfill until browsers ship it' }
+					]
+				}
+			]
+		},
+		{
+			kind: 'edit',
+			path: 'src/lib/dates.ts',
+			after: `const dayFormat = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\n\nexport const formatDay = (iso: string) => dayFormat.format(new Date(iso));\n\nconst DAY_MS = 86_400_000;\nconst startOfDay = (date: Date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());\n\nexport const daysUntil = (iso: string) => Math.round((startOfDay(new Date(iso)) - startOfDay(new Date())) / DAY_MS);\n`
+		},
+		{ kind: 'shell', command: 'pnpm remove date-fns', output: 'Packages: -1\n-\nDone in 812ms', exitCode: 0 },
+		{ kind: 'say', text: 'Rewrote both helpers on `Intl.DateTimeFormat` and removed `date-fns`. Same output for every call site.' }
+	]
+};
+
+const checkoutSession: CodingSession = {
+	id: 'session-checkout',
+	title: 'Flaky checkout e2e test',
+	projectId: 'acme-web',
+	model: { modelId: 'haiku-4-5' },
+	updatedLabel: '12m',
+	played: 4,
+	script: [
+		{ kind: 'user', text: 'e2e/checkout.spec.ts fails about one run in five on CI. Find out why.' },
+		{ kind: 'tools', calls: [{ tool: 'read', target: 'e2e/checkout.spec.ts' }] },
+		{
+			kind: 'shell',
+			command: 'pnpm playwright test e2e/checkout.spec.ts --repeat-each 10',
+			output: '  8 passed\n  2 failed\n    checkout.spec.ts:7  Timed out 5000ms waiting for getByText("Order confirmed")',
+			exitCode: 1
+		},
+		{
+			kind: 'error',
+			title: 'The run stopped',
+			text: 'The model provider returned an overloaded error while reading the trace. Nothing was changed.'
+		},
+		{
+			kind: 'say',
+			text: 'The payment call sometimes takes longer than the five-second default. The test should wait for the confirmation request to finish instead of a fixed timeout; I can make that change if you want.'
+		}
+	]
+};
+
+const healthSession: CodingSession = {
+	id: 'session-health',
+	title: 'Add a health check endpoint',
+	projectId: 'acme-api',
+	model: { modelId: 'haiku-4-5' },
+	updatedLabel: '2h',
+	played: 4,
+	script: [
+		{ kind: 'user', text: 'Add GET /health that returns ok and the git sha.' },
+		{ kind: 'tools', calls: [{ tool: 'read', target: 'src/http.ts' }] },
+		{
+			kind: 'edit',
+			path: 'src/health.ts',
+			after: `export function health() {\n  return { ok: true, sha: process.env.GIT_SHA ?? 'dev' };\n}\n`
+		},
+		{ kind: 'say', text: 'Added `src/health.ts`; it reports `ok` and the `GIT_SHA` the deploy sets, or `dev` locally.' }
+	]
+};
+
+function followUp(text: string): SessionBeat[] {
+	const short = text.length > 60 ? `${text.slice(0, 57)}…` : text;
+	return [
+		{ kind: 'reasoning', text: `They asked: “${short}”. Check what it touches before answering.`, durationMs: 1200 },
+		{ kind: 'tools', calls: [{ tool: 'grep', target: short.split(' ').slice(0, 2).join(' ') || 'TODO' }, { tool: 'read', target: 'README.md' }] },
+		{
+			kind: 'say',
+			text: 'I looked through the files this would touch and nothing else depends on them, so it’s a contained change. Want me to go ahead, or keep it as a note on the diff for now?'
+		}
+	];
+}
+
+function newSessionScript(text: string): SessionBeat[] {
+	return [
+		{ kind: 'reasoning', text: 'Start by mapping the project, then make the smallest change that does it.', durationMs: 1500 },
+		{
+			kind: 'tools',
+			calls: [
+				{ tool: 'glob', target: 'src/**/*.ts' },
+				{ tool: 'read', target: 'package.json' },
+				{ tool: 'read', target: 'README.md' }
+			]
+		},
+		{
+			kind: 'plan',
+			steps: [
+				{ label: 'Map the project', status: 'done' },
+				{ label: 'Make the change', status: 'in_progress' },
+				{ label: 'Run the tests', status: 'pending' }
+			]
+		},
+		{
+			kind: 'edit',
+			path: 'README.md',
+			after: `# acme-web\n\nThe Acme customer app. \`pnpm dev\` starts it on http://localhost:3000.\n\n## Notes\n\n- ${text.replace(/\n/g, ' ')}\n`
+		},
+		{ kind: 'shell', command: 'pnpm test', output: ' Test Files  4 passed (4)\n      Tests  11 passed (11)', exitCode: 0 },
+		{
+			kind: 'plan',
+			steps: [
+				{ label: 'Map the project', status: 'done' },
+				{ label: 'Make the change', status: 'done' },
+				{ label: 'Run the tests', status: 'done' }
+			]
+		},
+		{ kind: 'say', text: 'Made a first pass and noted it in the README so it’s easy to review. Tests pass; the diff is under **Files changed**.' }
+	];
+}
+
+/** A small product codebase with sessions in every state: running live, running in the background, waiting on an answer, failed, and finished. */
+export const CODING_AGENT_DEMO: CodingAgentData = {
+	brand: 'Constructive',
+	projects: [ACME_WEB, ACME_API],
+	sessions: [invitationsSession, securitySession, redirectSession, rateLimitSession, temporalSession, checkoutSession, healthSession, longThreadSession],
+	openSessionIds: ['session-invites', 'session-security', 'session-redirect', 'session-rate-limit', 'session-temporal', 'session-checkout'],
+	models: CODING_AGENT_MODELS,
+	defaultModel: { modelId: 'opus-5', levelId: 'high' },
+	commands: [
+		{ name: 'new', description: 'Start a new session' },
+		{ name: 'review', description: 'Review the changes in this session' },
+		{ name: 'test', description: 'Run the test suite' },
+		{ name: 'compact', description: 'Summarise the conversation to free up context' },
+		{ name: 'undo', description: 'Revert the last turn’s changes' },
+		{ name: 'model', description: 'Switch model' },
+		{ name: 'export', description: 'Export this session as Markdown' }
+	],
+	contextWindow: 200_000,
+	usagePercent: 62,
+	followUp,
+	newSessionScript
+};
diff --git a/packages/ui/src/components/coding-agent/file-picker-dialog.tsx b/packages/ui/src/components/coding-agent/file-picker-dialog.tsx
new file mode 100644
index 0000000..cc6682e
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/file-picker-dialog.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { FileCode2 } from 'lucide-react';
+
+import { Command, CommandDialog, CommandDialogPopup, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPanel } from '../command';
+import { MiddleTruncate } from '../workspace-kit/middle-truncate';
+
+/** Open file (⌘P): a search over the checkout's paths that opens the one you pick in a pinned tab. */
+export function FilePickerDialog({
+	open,
+	onOpenChange,
+	paths,
+	onPick
+}: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	paths: string[];
+	onPick: (path: string) => void;
+}) {
+	return (
+		<CommandDialog open={open} onOpenChange={onOpenChange}>
+			<CommandDialogPopup>
+				<Command>
+					<CommandInput placeholder="Open a file…" />
+					<CommandPanel>
+						<CommandList>
+							<CommandEmpty>No matching files.</CommandEmpty>
+							<CommandGroup>
+								{paths.map((path) => (
+									<CommandItem
+										key={path}
+										value={path}
+										onSelect={() => {
+											onPick(path);
+											onOpenChange(false);
+										}}
+									>
+										<FileCode2 aria-hidden="true" className="size-3.5 text-muted-foreground" />
+										{/* Paths share long folders and differ at the end, so the file name stays visible. */}
+										<MiddleTruncate text={path} tail={Math.min((path.split('/').pop() ?? '').length, 28)} className="min-w-0 flex-1 font-mono text-[0.8125rem]" />
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</CommandPanel>
+				</Command>
+			</CommandDialogPopup>
+		</CommandDialog>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/harness-store.ts b/packages/ui/src/components/coding-agent/harness-store.ts
new file mode 100644
index 0000000..08f28a7
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/harness-store.ts
@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+
+import type { HarnessEvent } from './harness';
+
+/**
+ * A store a host pushes harness events into as they happen, for harnesses that stream rather than hand over a
+ * finished log. The template subscribes to it; nothing else is needed on the host's side.
+ */
+export type HarnessStore = {
+	push: (...events: HarnessEvent[]) => void;
+	/** The full log so far. The same array until something is pushed. */
+	getEvents: () => readonly HarnessEvent[];
+	subscribe: (listener: () => void) => () => void;
+	clear: () => void;
+};
+
+export function createHarnessStore(initial: readonly HarnessEvent[] = []): HarnessStore {
+	let events: readonly HarnessEvent[] = initial;
+	const listeners = new Set<() => void>();
+	const notify = () => {
+		for (const listener of listeners) listener();
+	};
+	return {
+		push: (...next) => {
+			if (next.length === 0) return;
+			events = [...events, ...next];
+			notify();
+		},
+		getEvents: () => events,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		clear: () => {
+			events = [];
+			notify();
+		}
+	};
+}
+
+const EMPTY: readonly HarnessEvent[] = [];
+
+/** The store's events, re-rendering as they arrive. */
+export function useHarnessStoreEvents(store: HarnessStore | undefined) {
+	return React.useSyncExternalStore(
+		store ? store.subscribe : noopSubscribe,
+		store ? store.getEvents : () => EMPTY,
+		store ? store.getEvents : () => EMPTY
+	);
+}
+
+function noopSubscribe() {
+	return () => {};
+}
diff --git a/packages/ui/src/components/coding-agent/harness.ts b/packages/ui/src/components/coding-agent/harness.ts
new file mode 100644
index 0000000..09826e0
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/harness.ts
@@ -0,0 +1,732 @@
+import type { AskAnswer, AskQuestion } from '../ai/ask-card';
+import { diffLines } from '../ai/line-diff';
+import type { PlanStep } from '../ai/types';
+
+/**
+ * The template's model of an agent harness. Whatever the host runs (one agent, sub-agents, a team that messages
+ * itself, an orchestrator with workers), it reports as a log of these events, and `reduceHarness` folds the log
+ * into what the views draw. The scripted demo is one producer of this log; a real harness is another.
+ */
+
+export type RunStatus = 'queued' | 'running' | 'waiting' | 'idle' | 'paused' | 'done' | 'failed' | 'cancelled';
+
+/** Why a run is waiting. One status with a reason keeps blocked states from multiplying. */
+export type WaitingOn =
+	| { kind: 'human'; requestId: string }
+	| { kind: 'agent'; runIds: string[] }
+	| { kind: 'task'; taskIds: string[] }
+	| { kind: 'limit'; reason: 'concurrency' | 'usage' | 'budget' };
+
+export type RunRole = 'root' | 'orchestrator' | 'worker' | 'teammate' | 'peer' | 'remote';
+
+export type RunUsage = { inputTokens: number; outputTokens: number; toolUses: number; durationMs: number; costUsd?: number };
+
+/** What a person may do to a run from the UI. The harness decides; by default a child can be steered and stopped. */
+export type RunCapabilities = { steer?: boolean; message?: boolean; stop?: boolean; pause?: boolean };
+
+export type AgentRun = {
+	id: string;
+	/** Stays the same when a run is resumed under a new run id. */
+	agentId?: string;
+	name: string;
+	/** The agent's definition, e.g. "Explore" or a custom agent. Shown beside the name. */
+	kind?: string;
+	parentRunId?: string;
+	role: RunRole;
+	phase?: string;
+	attempt?: number;
+	background?: boolean;
+	task?: string;
+	workspace?: { kind: 'shared' | 'worktree' | 'remote'; branch?: string; path?: string };
+	budget?: { maxCostUsd?: number };
+	capabilities?: RunCapabilities;
+};
+
+export type MessageProtocol = 'text' | 'steer' | 'result' | 'plan-approval' | 'shutdown';
+
+export type HarnessTask = {
+	id: string;
+	title: string;
+	status: 'pending' | 'in_progress' | 'blocked' | 'done' | 'failed';
+	ownerRunId?: string;
+	dependsOn?: string[];
+};
+
+export type HarnessRequest = { id: string; type: 'approval'; title: string; command: string } | { id: string; type: 'question'; questions: AskQuestion[] };
+
+export type PermissionDecision = 'once' | 'always' | 'deny';
+
+/** How a person settled a request: a decision on a command, or an answer to a question. */
+export type RequestResolution = { decision: PermissionDecision } | { answer: AskAnswer };
+
+export type CheckStatus = 'queued' | 'running' | 'passed' | 'failed' | 'skipped' | 'cancelled';
+
+/** One CI check on a pull request: a job, a status context, or a bot's verdict. */
+export type CICheck = {
+	id: string;
+	name: string;
+	status: CheckStatus;
+	/** Merging waits on it. */
+	required?: boolean;
+	/** One line of what it found, e.g. "2 failed in csrf.spec.ts". Shown for failures. */
+	summary?: string;
+};
+
+export type PullRequestState = 'draft' | 'open' | 'merged' | 'closed';
+
+/** Whether the pull request can merge right now, and if not, what's in the way. */
+export type MergeState = 'clean' | 'blocked' | 'behind' | 'conflicts' | 'checking';
+
+export type ReviewState = 'approved' | 'changes-requested' | 'commented' | 'pending';
+
+/** What the review needs at a glance: where the pull request stands and which checks failed or are still going. */
+export type PullRequest = {
+	number: number;
+	title: string;
+	url?: string;
+	state: PullRequestState;
+	/** The overall decision across reviewers. */
+	review?: ReviewState;
+	merge?: MergeState;
+	/** Review threads nobody has resolved yet. */
+	unresolved?: number;
+	checks?: CICheck[];
+};
+
+/**
+ * Where changes land: the session's own checkout, or a worktree on its own branch. Agents that work in a worktree
+ * register it when they spawn; a harness reports the rest (how far it is from its base, its pull request).
+ */
+export type Worktree = {
+	/** Stable key; the branch name unless two worktrees share one. */
+	id: string;
+	branch: string;
+	/** The branch it was cut from and its pull request merges into. */
+	base?: string;
+	kind: 'checkout' | 'worktree' | 'remote';
+	path?: string;
+	/** Commits ahead of and behind its base. */
+	ahead?: number;
+	behind?: number;
+	/** Files that conflict with its base. */
+	conflicts?: string[];
+	pr?: PullRequest;
+};
+
+export type WorktreePatch = Partial<Worktree> & { id: string };
+export type PullRequestPatch = Partial<PullRequest>;
+export type CheckPatch = Partial<CICheck> & { id: string };
+
+/** One read-only call in a batch, e.g. a read of `src/auth/session.ts`. */
+export type ToolCallBeat = {
+	tool: 'read' | 'grep' | 'glob' | 'list' | 'webfetch' | 'websearch';
+	target: string;
+};
+
+/** One step a run takes: what it said, read, changed or ran. Each is a row of its transcript, except the plan. */
+export type FlowBeat =
+	| { kind: 'user'; text: string }
+	| { kind: 'reasoning'; text: string; durationMs: number }
+	| { kind: 'say'; text: string }
+	| { kind: 'tools'; calls: ToolCallBeat[] }
+	/** Lands in the run's worktree, or in `worktree` when an agent edits one that isn't its own. */
+	| { kind: 'edit'; path: string; after: string; worktree?: string }
+	| { kind: 'shell'; command: string; output: string; exitCode?: number }
+	/** Docks on the composer instead of taking a row, so it updates in place as steps finish. */
+	| { kind: 'plan'; steps: PlanStep[] }
+	| { kind: 'browse'; url: string; title: string }
+	| { kind: 'notice'; text: string }
+	| { kind: 'error'; title: string; text: string };
+
+/** One thing that happened in a run. `runId` is who it happened to. */
+export type HarnessEvent = { id: string; runId: string } & (
+	| { kind: 'run.spawned'; run: AgentRun }
+	| { kind: 'run.status'; status: RunStatus; waitingOn?: WaitingOn; summary?: string; error?: string }
+	| { kind: 'run.progress'; usage: Partial<RunUsage>; lastTool?: string }
+	| { kind: 'beat'; beat: FlowBeat; live?: boolean; running?: boolean }
+	| { kind: 'beat.settled'; eventId: string }
+	| { kind: 'turn.end' }
+	/** From `runId` unless `from` says otherwise, e.g. `you` for a person steering a run. */
+	| { kind: 'message'; from?: string; to: string[] | 'all'; text: string; protocol?: MessageProtocol }
+	| { kind: 'handoff'; to: string; reason?: string }
+	| { kind: 'route'; to: string; reason?: string }
+	| { kind: 'phase'; name: string; status: 'running' | 'done' }
+	| { kind: 'fan-in'; runIds: string[] }
+	| { kind: 'task'; task: HarnessTask }
+	| { kind: 'request'; request: HarnessRequest }
+	/** Settles a request of `runId`'s; a run held at it carries on. */
+	| ({ kind: 'request.resolved'; requestId: string } & RequestResolution)
+	| { kind: 'terminal'; lines: { kind: 'command' | 'output' | 'error'; text: string }[] }
+	| { kind: 'terminal.clear' }
+	/** Adds a worktree or updates what's known about it. */
+	| { kind: 'worktree'; worktree: WorktreePatch }
+	/** Opens or updates the pull request for a worktree. Checks given here replace the list; use `check` for one. */
+	| { kind: 'pr'; worktreeId: string; pr: PullRequestPatch }
+	/** Adds or updates one CI check on a worktree's pull request. */
+	| { kind: 'check'; worktreeId: string; check: CheckPatch }
+);
+
+export type HarnessEventKind = HarnessEvent['kind'];
+
+/** One row of a run's transcript. Live rows arrived during playback and animate in; history rows land settled. */
+export type TimelineItem =
+	| { id: string; type: 'beat'; beat: Exclude<FlowBeat, { kind: 'plan' }>; live: boolean; running?: boolean; before?: string | null }
+	| { id: string; type: 'permission'; requestId: string; beat: { title: string; command: string }; decision?: PermissionDecision }
+	| { id: string; type: 'question'; requestId: string; beat: { questions: AskQuestion[] }; answer?: AskAnswer }
+	| { id: string; type: 'turn-end'; paths: string[]; additions: number; deletions: number }
+	| { id: string; type: 'spawn'; runId: string }
+	| { id: string; type: 'fan-in'; runIds: string[] }
+	| { id: string; type: 'message'; from: string; to: string[] | 'all'; text: string; protocol: MessageProtocol }
+	| { id: string; type: 'handoff'; to: string; reason?: string }
+	| { id: string; type: 'route'; to: string; reason?: string }
+	| { id: string; type: 'phase'; name: string; status: 'running' | 'done' };
+
+/** A file the session changed: its contents before the session touched it (null when it's new) and now. */
+export type FileChange = {
+	/** Unique across worktrees: the same path can change in two of them. */
+	key: string;
+	path: string;
+	/** The worktree the change landed in. */
+	worktreeId: string;
+	before: string | null;
+	after: string;
+	additions: number;
+	deletions: number;
+	runIds: string[];
+};
+
+export type TerminalLine = { id: string; kind: 'command' | 'output' | 'error'; text: string; runId: string };
+
+export type RunView = AgentRun & {
+	status: RunStatus;
+	waitingOn?: WaitingOn;
+	summary?: string;
+	error?: string;
+	lastTool?: string;
+	usage: RunUsage;
+	/** True once the harness reports usage itself; until then the view estimates tokens from the transcript. */
+	usageReported: boolean;
+	items: TimelineItem[];
+	plan: PlanStep[] | null;
+	/** Keys of the changes made since the turn began. */
+	turnPaths: string[];
+	depth: number;
+	/** The worktree it works in: its own, or the nearest ancestor's, or the session's checkout. Set when it spawns. */
+	worktreeId: string;
+};
+
+export type HarnessMessage = { id: string; from: string; to: string[] | 'all'; text: string; protocol: MessageProtocol };
+
+export type HarnessView = {
+	rootRunId: string;
+	runs: Record<string, RunView>;
+	/** Runs in the order they were spawned, the root first. */
+	runOrder: string[];
+	base: Record<string, string>;
+	/** The session's own checkout as it stands now. Edits in other worktrees stay in `changes`. */
+	files: Record<string, string>;
+	changes: Record<string, FileChange>;
+	terminal: TerminalLine[];
+	tasks: HarnessTask[];
+	messages: HarnessMessage[];
+	/** Requests still waiting on a person, oldest first. */
+	pending: { runId: string; request: HarnessRequest }[];
+	/** Every worktree the session's agents work in, the session's own checkout first. */
+	worktrees: Record<string, Worktree>;
+	worktreeOrder: string[];
+	/** The run that has control after a handoff, if any. */
+	activeRunId: string;
+	/** The page an agent last opened. A new object for each visit, so opening the same page again still shows it. */
+	browse: { url: string; title: string } | null;
+};
+
+const ZERO_USAGE: RunUsage = { inputTokens: 0, outputTokens: 0, toolUses: 0, durationMs: 0 };
+
+export function createRunView(run: AgentRun, depth: number, worktreeId: string): RunView {
+	return { status: 'queued', usage: ZERO_USAGE, usageReported: false, items: [], plan: null, turnPaths: [], depth, worktreeId, ...run };
+}
+
+/** The checkout a session works in when nothing says otherwise. */
+const DEFAULT_CHECKOUT: Worktree = { id: 'checkout', branch: 'main', kind: 'checkout' };
+
+/** The session's own checkout: the first worktree it knew about. */
+function checkoutOf(view: HarnessView) {
+	return view.worktreeOrder[0] ?? DEFAULT_CHECKOUT.id;
+}
+
+/**
+ * The empty view a session starts from: one root run, the project's files, and the worktrees already known, the
+ * session's own checkout first.
+ */
+export function createHarnessView(root: AgentRun, files: Record<string, string>, worktrees: readonly Worktree[] = [DEFAULT_CHECKOUT]): HarnessView {
+	const known = worktrees.length ? worktrees : [DEFAULT_CHECKOUT];
+	return {
+		rootRunId: root.id,
+		runs: { [root.id]: { ...createRunView(root, 0, known[0].id), status: 'idle', usage: { ...ZERO_USAGE, inputTokens: BASE_TOKENS.root } } },
+		runOrder: [root.id],
+		base: files,
+		files,
+		changes: {},
+		terminal: [],
+		tasks: [],
+		messages: [],
+		pending: [],
+		worktrees: Object.fromEntries(known.map((worktree) => [worktree.id, worktree])),
+		worktreeOrder: known.map((worktree) => worktree.id),
+		activeRunId: root.id,
+		browse: null
+	};
+}
+
+/** A file's lines, without the empty one a trailing newline would add. */
+function linesOf(text: string | null) {
+	if (!text) return [];
+	return (text.endsWith('\n') ? text.slice(0, -1) : text).split('\n');
+}
+
+export function countChange(before: string | null, after: string) {
+	let additions = 0;
+	let deletions = 0;
+	for (const line of diffLines(linesOf(before), linesOf(after))) {
+		if (line.type === 'add') additions += 1;
+		else if (line.type === 'del') deletions += 1;
+	}
+	return { additions, deletions };
+}
+
+/** A rough running total for runs whose harness doesn't report usage: about four characters a token. */
+function estimateBeat(beat: FlowBeat, files: Record<string, string>) {
+	switch (beat.kind) {
+		case 'say':
+		case 'reasoning':
+		case 'user':
+			return beat.text.length / 4;
+		case 'edit':
+			return beat.after.length / 4;
+		case 'shell':
+			return (beat.output.length + beat.command.length) / 4;
+		case 'tools':
+			return beat.calls.reduce((sum, call) => sum + (call.tool === 'read' ? (files[call.target]?.length ?? 800) : 600), 0) / 4;
+		default:
+			return 0;
+	}
+}
+
+/** What a step reports on its run's row: the tool calls it made and the last of them, or its reply as the summary. */
+function stepReport(beat: FlowBeat): { toolUses?: number; lastTool?: string; summary?: string } {
+	switch (beat.kind) {
+		case 'tools': {
+			const last = beat.calls[beat.calls.length - 1];
+			return { toolUses: beat.calls.length, lastTool: last ? `${last.tool} ${last.target}` : undefined };
+		}
+		case 'edit':
+			return { toolUses: 1, lastTool: `edit ${beat.path}` };
+		case 'shell':
+			return { toolUses: 1, lastTool: beat.command };
+		case 'say':
+			return { summary: beat.text };
+		default:
+			return {};
+	}
+}
+
+/** Prompt and tool definitions every run starts with, so a fresh agent doesn't read as empty. */
+export const BASE_TOKENS = { root: 14_200, child: 6_400 } as const;
+
+function patchRun(view: HarnessView, runId: string, patch: (run: RunView) => RunView) {
+	const run = view.runs[runId];
+	if (!run) return view;
+	return { ...view, runs: { ...view.runs, [runId]: patch(run) } };
+}
+
+function pushItem(run: RunView, item: TimelineItem): RunView {
+	return { ...run, items: [...run.items, item] };
+}
+
+function addTokens(run: RunView, tokens: number): RunView {
+	if (run.usageReported || !tokens) return run;
+	return { ...run, usage: { ...run.usage, inputTokens: run.usage.inputTokens + Math.round(tokens) } };
+}
+
+/** The key a change is stored under: its worktree and its path. */
+export function changeKey(worktreeId: string, path: string) {
+	return `${worktreeId}:${path}`;
+}
+
+/** Adds a worktree, or merges what's new into the one already known. */
+function upsertWorktree(view: HarnessView, patch: WorktreePatch): HarnessView {
+	const existing = view.worktrees[patch.id];
+	const worktree: Worktree = existing ? { ...existing, ...patch } : { branch: patch.id, kind: 'worktree', ...patch };
+	return {
+		...view,
+		worktrees: { ...view.worktrees, [patch.id]: worktree },
+		worktreeOrder: existing ? view.worktreeOrder : [...view.worktreeOrder, patch.id]
+	};
+}
+
+/** A pull request a patch opens before the harness has said what it is. */
+function placeholderPr(worktree: Worktree): PullRequest {
+	return { number: 0, title: worktree.branch, state: 'open' };
+}
+
+/**
+ * Lands an edit in the run's worktree, or in the one it names, so one agent can touch several. Every worktree keeps
+ * its own change; only an edit to the session's checkout changes the files the tree and the viewer show.
+ */
+function applyEdit(view: HarnessView, runId: string, beat: Extract<FlowBeat, { kind: 'edit' }>) {
+	const state = beat.worktree && !view.worktrees[beat.worktree] ? upsertWorktree(view, { id: beat.worktree }) : view;
+	const worktreeId = beat.worktree ?? view.runs[runId]?.worktreeId ?? checkoutOf(view);
+	const key = changeKey(worktreeId, beat.path);
+	const original = beat.path in view.base ? view.base[beat.path] : null;
+	const existing = view.changes[key];
+	const runIds = existing?.runIds.includes(runId) ? existing.runIds : [...(existing?.runIds ?? []), runId];
+	const change: FileChange = { key, path: beat.path, worktreeId, before: original, after: beat.after, runIds, ...countChange(original, beat.after) };
+	return {
+		key,
+		// The row's inline diff is against what the file held just before this edit.
+		before: existing ? existing.after : original,
+		view: {
+			...state,
+			files: worktreeId === checkoutOf(view) ? { ...view.files, [beat.path]: beat.after } : view.files,
+			changes: { ...view.changes, [key]: change }
+		}
+	};
+}
+
+/** A command's lines in the terminal: the command, what it printed, and how it ended if it failed. */
+function applyShell(view: HarnessView, eventId: string, runId: string, beat: Extract<FlowBeat, { kind: 'shell' }>): HarnessView {
+	const lines: TerminalLine[] = [{ id: `${eventId}-c`, kind: 'command', text: beat.command, runId }];
+	if (beat.output) {
+		beat.output
+			.replace(/\n+$/, '')
+			.split('\n')
+			.forEach((text, index) => lines.push({ id: `${eventId}-${index}`, kind: 'output', text, runId }));
+	}
+	// What the command printed stays as it was; only how it ended is marked as an error.
+	if (beat.exitCode) lines.push({ id: `${eventId}-x`, kind: 'error', text: `exited with code ${beat.exitCode}`, runId });
+	return { ...view, terminal: [...view.terminal, ...lines] };
+}
+
+/** Folds one event into the view. Pure, so a host can replay a stored log and get the same screen. */
+export function reduceHarness(view: HarnessView, event: HarnessEvent): HarnessView {
+	switch (event.kind) {
+		case 'run.spawned': {
+			const parent = event.run.parentRunId ? view.runs[event.run.parentRunId] : undefined;
+			let state = view;
+			// A run works where its parent does, unless it brings a worktree of its own.
+			let worktreeId = parent?.worktreeId ?? checkoutOf(view);
+			const workspace = event.run.workspace;
+			if (workspace && workspace.kind !== 'shared' && workspace.branch) {
+				worktreeId = workspace.branch;
+				// A new one joins the session, cut from the worktree its parent works in.
+				if (!view.worktrees[workspace.branch]) {
+					const base = parent ? view.worktrees[parent.worktreeId]?.branch : undefined;
+					state = upsertWorktree(state, { id: workspace.branch, branch: workspace.branch, kind: workspace.kind, path: workspace.path, base });
+				}
+			}
+			const existing = view.runs[event.run.id];
+			const run: RunView = existing
+				? { ...existing, ...event.run, worktreeId }
+				: { ...createRunView(event.run, parent ? parent.depth + 1 : 0, worktreeId), usage: { ...ZERO_USAGE, inputTokens: BASE_TOKENS.child } };
+			state = { ...state, runs: { ...state.runs, [run.id]: run }, runOrder: existing ? state.runOrder : [...state.runOrder, run.id] };
+			// The spawn shows in the parent's transcript as the card that opens the child.
+			return parent ? patchRun(state, parent.id, (owner) => pushItem(owner, { id: event.id, type: 'spawn', runId: run.id })) : state;
+		}
+		case 'run.status': {
+			const updated = patchRun(view, event.runId, (run) => ({
+				...run,
+				status: event.status,
+				waitingOn: event.status === 'waiting' ? event.waitingOn : undefined,
+				summary: event.summary ?? run.summary,
+				error: event.error ?? (event.status === 'failed' ? run.error : undefined)
+			}));
+			// A run that has ended can't act on an answer, so whatever it was still asking leaves the dock with it.
+			const ended = event.status === 'cancelled' || event.status === 'done' || event.status === 'failed';
+			return ended && view.pending.some((entry) => entry.runId === event.runId)
+				? { ...updated, pending: view.pending.filter((entry) => entry.runId !== event.runId) }
+				: updated;
+		}
+		case 'run.progress':
+			return patchRun(view, event.runId, (run) => ({
+				...run,
+				usage: { ...run.usage, ...event.usage },
+				usageReported: true,
+				lastTool: event.lastTool ?? run.lastTool
+			}));
+		case 'beat': {
+			const beat = event.beat;
+			// One tracker per turn, on the run: a later plan updates it in place.
+			if (beat.kind === 'plan') return patchRun(view, event.runId, (run) => ({ ...run, plan: beat.steps }));
+			let state = view;
+			let before: string | null | undefined;
+			let editKey: string | undefined;
+			if (beat.kind === 'edit') {
+				const edit = applyEdit(view, event.runId, beat);
+				state = edit.view;
+				before = edit.before;
+				editKey = edit.key;
+			}
+			if (beat.kind === 'shell') state = applyShell(state, event.id, event.runId, beat);
+			if (beat.kind === 'browse' && event.live) state = { ...state, browse: { url: beat.url, title: beat.title } };
+			const tokens = estimateBeat(beat, view.files);
+			const report = stepReport(beat);
+			return patchRun(state, event.runId, (run) => {
+				let updated = addTokens(run, tokens);
+				updated = {
+					...updated,
+					usage: report.toolUses && !updated.usageReported ? { ...updated.usage, toolUses: updated.usage.toolUses + report.toolUses } : updated.usage,
+					lastTool: report.lastTool ?? updated.lastTool,
+					summary: report.summary ?? updated.summary
+				};
+				if (beat.kind === 'user') updated = { ...updated, turnPaths: [], plan: null };
+				if (editKey && !updated.turnPaths.includes(editKey)) updated = { ...updated, turnPaths: [...updated.turnPaths, editKey] };
+				return pushItem(updated, { id: event.id, type: 'beat', beat, live: event.live ?? true, running: event.running, before });
+			});
+		}
+		case 'beat.settled':
+			return patchRun(view, event.runId, (run) => ({
+				...run,
+				items: run.items.map((item) => (item.id === event.eventId && item.type === 'beat' ? { ...item, running: false } : item))
+			}));
+		case 'turn.end':
+			return patchRun(view, event.runId, (run) => {
+				if (run.turnPaths.length === 0) return run;
+				const changes = run.turnPaths.flatMap((key) => view.changes[key] ?? []);
+				// The same path changed in two worktrees is one file to read about.
+				const paths = [...new Set(changes.map((change) => change.path))];
+				return { ...pushItem(run, { id: event.id, type: 'turn-end', paths, ...lineTotals(changes) }), turnPaths: [] };
+			});
+		case 'message': {
+			const from = event.from ?? event.runId;
+			const message: HarnessMessage = { id: event.id, from, to: event.to, text: event.text, protocol: event.protocol ?? 'text' };
+			const item: TimelineItem = { type: 'message', ...message };
+			let state: HarnessView = { ...view, messages: [...view.messages, message] };
+			// A message reads in the sender's transcript and in each recipient's.
+			const recipients = event.to === 'all' ? view.runOrder.filter((id) => id !== from) : event.to;
+			for (const runId of new Set([from, ...recipients])) {
+				if (state.runs[runId]) state = patchRun(state, runId, (run) => pushItem(run, item));
+			}
+			return state;
+		}
+		case 'handoff':
+			return { ...patchRun(view, event.runId, (run) => pushItem(run, { id: event.id, type: 'handoff', to: event.to, reason: event.reason })), activeRunId: event.to };
+		case 'route':
+			return patchRun(view, event.runId, (run) => pushItem(run, { id: event.id, type: 'route', to: event.to, reason: event.reason }));
+		case 'phase':
+			return patchRun(view, event.runId, (run) => {
+				const index = run.items.findIndex((item) => item.type === 'phase' && item.name === event.name);
+				if (index < 0) return pushItem(run, { id: event.id, type: 'phase', name: event.name, status: event.status });
+				return { ...run, items: run.items.map((item, at) => (at === index && item.type === 'phase' ? { ...item, status: event.status } : item)) };
+			});
+		case 'fan-in':
+			return patchRun(view, event.runId, (run) => pushItem(run, { id: event.id, type: 'fan-in', runIds: event.runIds }));
+		case 'task': {
+			const exists = view.tasks.some((task) => task.id === event.task.id);
+			return { ...view, tasks: exists ? view.tasks.map((task) => (task.id === event.task.id ? { ...task, ...event.task } : task)) : [...view.tasks, event.task] };
+		}
+		case 'request': {
+			const request = event.request;
+			const item: TimelineItem =
+				request.type === 'approval'
+					? { id: event.id, type: 'permission', requestId: request.id, beat: { title: request.title, command: request.command } }
+					: { id: event.id, type: 'question', requestId: request.id, beat: { questions: request.questions } };
+			const state = { ...view, pending: [...view.pending, { runId: event.runId, request }] };
+			return patchRun(state, event.runId, (run) => ({
+				...pushItem(run, item),
+				status: 'waiting',
+				waitingOn: { kind: 'human', requestId: request.id }
+			}));
+		}
+		case 'request.resolved': {
+			const state = { ...view, pending: view.pending.filter((entry) => entry.request.id !== event.requestId) };
+			return patchRun(state, event.runId, (run) => {
+				const items = run.items.map((item) => {
+					if (item.type === 'permission' && item.requestId === event.requestId && 'decision' in event) return { ...item, decision: event.decision };
+					if (item.type === 'question' && item.requestId === event.requestId && 'answer' in event) return { ...item, answer: event.answer };
+					return item;
+				});
+				// A run held at this request carries on; one that moved on meanwhile keeps the status it has.
+				if (awaitsPerson(run) && run.waitingOn.requestId === event.requestId) return { ...run, items, status: 'running', waitingOn: undefined };
+				return { ...run, items };
+			});
+		}
+		case 'terminal':
+			return {
+				...view,
+				terminal: [...view.terminal, ...event.lines.map((line, index) => ({ ...line, id: `${event.id}-${index}`, runId: event.runId }))]
+			};
+		case 'terminal.clear':
+			return { ...view, terminal: [] };
+		case 'worktree':
+			return upsertWorktree(view, event.worktree);
+		case 'pr': {
+			const state = view.worktrees[event.worktreeId] ? view : upsertWorktree(view, { id: event.worktreeId });
+			const worktree = state.worktrees[event.worktreeId];
+			return upsertWorktree(state, { id: worktree.id, pr: { ...(worktree.pr ?? placeholderPr(worktree)), ...event.pr } });
+		}
+		case 'check': {
+			const state = view.worktrees[event.worktreeId] ? view : upsertWorktree(view, { id: event.worktreeId });
+			const worktree = state.worktrees[event.worktreeId];
+			const pr = worktree.pr ?? placeholderPr(worktree);
+			const checks = pr.checks ?? [];
+			const found = checks.some((check) => check.id === event.check.id);
+			const nextChecks = found
+				? checks.map((check) => (check.id === event.check.id ? { ...check, ...event.check } : check))
+				: [...checks, { name: event.check.id, status: 'queued' as const, ...event.check }];
+			return upsertWorktree(state, { id: worktree.id, pr: { ...pr, checks: nextChecks } });
+		}
+	}
+}
+
+/** Lines added and removed across a set of changes. */
+export function lineTotals(changes: readonly FileChange[]) {
+	let additions = 0;
+	let deletions = 0;
+	for (const change of changes) {
+		additions += change.additions;
+		deletions += change.deletions;
+	}
+	return { additions, deletions };
+}
+
+export type CheckTally = { total: number; passed: number; failed: number; running: number; queued: number; skipped: number; requiredFailing: number };
+
+/** Counts a pull request's checks by outcome. */
+export function tallyChecks(checks: readonly CICheck[] = []): CheckTally {
+	const tally: CheckTally = { total: checks.length, passed: 0, failed: 0, running: 0, queued: 0, skipped: 0, requiredFailing: 0 };
+	for (const check of checks) {
+		if (check.status === 'passed') tally.passed += 1;
+		else if (check.status === 'failed') {
+			tally.failed += 1;
+			if (check.required) tally.requiredFailing += 1;
+		} else if (check.status === 'running') tally.running += 1;
+		else if (check.status === 'queued') tally.queued += 1;
+		else tally.skipped += 1;
+	}
+	return tally;
+}
+
+export type ChecksOutcome = 'failed' | 'running' | 'passed' | 'none';
+
+/** One word for a set of checks: any failure wins, then anything still going, then passed. */
+export function checksOutcome(tally: CheckTally): ChecksOutcome {
+	if (tally.total === 0) return 'none';
+	if (tally.failed) return 'failed';
+	if (tally.running || tally.queued) return 'running';
+	return 'passed';
+}
+
+export type WorktreeSummary = {
+	worktree: Worktree;
+	changes: FileChange[];
+	additions: number;
+	deletions: number;
+	/** Agents working in it or that changed files in it, in spawn order. */
+	runIds: string[];
+	checks: CheckTally;
+};
+
+/** Each worktree with the changes that landed in it and the agents involved, in the order they joined the session. */
+export function summarizeWorktrees(view: HarnessView): WorktreeSummary[] {
+	const changes = Object.values(view.changes);
+	return view.worktreeOrder.map((id) => {
+		const worktree = view.worktrees[id];
+		const own = changes.filter((change) => change.worktreeId === id);
+		const editors = new Set(own.flatMap((change) => change.runIds));
+		const runIds = view.runOrder.filter((runId) => editors.has(runId) || view.runs[runId]?.worktreeId === id);
+		return {
+			worktree,
+			changes: own,
+			...lineTotals(own),
+			runIds,
+			checks: tallyChecks(worktree.pr?.checks)
+		};
+	});
+}
+
+/** Across every pull request in the session: whether any check failed, any is still going, or all passed. */
+export function sessionChecks(worktrees: readonly WorktreeSummary[]) {
+	return checksOutcome(tallyChecks(worktrees.flatMap((entry) => entry.worktree.pr?.checks ?? [])));
+}
+
+/** Replays a log onto a starting view. */
+export function replayHarness(view: HarnessView, events: readonly HarnessEvent[]) {
+	return events.reduce(reduceHarness, view);
+}
+
+/** Tokens a run has used: what the harness reported, or the estimate. */
+export function runTokens(run: RunView) {
+	return run.usage.inputTokens + run.usage.outputTokens;
+}
+
+/** The run and everything it spawned, depth first. */
+export function descendants(view: HarnessView, runId: string): RunView[] {
+	const out: RunView[] = [];
+	const visit = (id: string) => {
+		for (const childId of view.runOrder) {
+			const child = view.runs[childId];
+			if (child?.parentRunId === id) {
+				out.push(child);
+				visit(childId);
+			}
+		}
+	};
+	visit(runId);
+	return out;
+}
+
+/** Runs from the root down to `runId`, for the breadcrumb. */
+export function ancestry(view: HarnessView, runId: string): RunView[] {
+	const out: RunView[] = [];
+	let current: RunView | undefined = view.runs[runId];
+	while (current) {
+		out.unshift(current);
+		current = current.parentRunId ? view.runs[current.parentRunId] : undefined;
+	}
+	return out;
+}
+
+export const ACTIVE_STATUSES: RunStatus[] = ['queued', 'running', 'waiting', 'paused'];
+
+/** The run is held until a person approves a command or answers a question. */
+export function awaitsPerson(run: RunView): run is RunView & { status: 'waiting'; waitingOn: { kind: 'human'; requestId: string } } {
+	return run.status === 'waiting' && run.waitingOn?.kind === 'human';
+}
+
+/** Still has work in hand: queued, running, paused, or waiting on other agents, tasks or limits. Not one held for a person. */
+export function isWorking(run: RunView) {
+	return ACTIVE_STATUSES.includes(run.status) && !awaitsPerson(run);
+}
+
+/** Live state a session reports back to the shell, for its tab, sidebar row and the home list. */
+export type SessionStatus = 'idle' | 'running' | 'approval' | 'input' | 'failed';
+
+/** A session's states, plus queued, and done once a run has reported back. */
+export type RunSignal = SessionStatus | 'queued' | 'done';
+
+/** What a run means for a tab, a row or a ring: running, waiting on a person, failed, or at rest. */
+export function runSignal(run: RunView, view: HarnessView): RunSignal {
+	if (awaitsPerson(run)) {
+		const request = view.pending.find((entry) => entry.request.id === run.waitingOn.requestId)?.request;
+		return request?.type === 'question' ? 'input' : 'approval';
+	}
+	if (run.status === 'running' || run.status === 'waiting') return 'running';
+	if (run.status === 'queued') return 'queued';
+	if (run.status === 'failed') return 'failed';
+	if (run.status === 'done') return 'done';
+	return 'idle';
+}
+
+/** The session's status for its tab: whatever needs a person most, across every run. */
+export function sessionStatus(view: HarnessView): SessionStatus {
+	const signals = view.runOrder.map((id) => runSignal(view.runs[id], view));
+	if (signals.includes('approval')) return 'approval';
+	if (signals.includes('input')) return 'input';
+	if (runSignal(view.runs[view.rootRunId], view) === 'failed') return 'failed';
+	if (signals.includes('running') || signals.includes('queued')) return 'running';
+	if (signals.includes('failed')) return 'failed';
+	return 'idle';
+}
+
+/** Where a sub-agent's transcript opens: the task its parent gave it, which is also its first turn on the rail. */
+export const TASK_TURN_ID = 'task';
diff --git a/packages/ui/src/components/coding-agent/home-view.tsx b/packages/ui/src/components/coding-agent/home-view.tsx
new file mode 100644
index 0000000..4e69af0
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/home-view.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { MessageSquarePlus, Plus } from 'lucide-react';
+import * as React from 'react';
+
+import { formatCount, plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { focusRingClass, SearchField } from '../workspace-kit/primitives';
+import { EmptyState, SectionHeading } from '../workspace-kit/surface';
+import { useCodingAgent } from './coding-agent-context';
+import { SessionGlyph, sessionStatusLabel, SessionTitle } from './session-glyph';
+import { frameClasses } from './session-surface';
+
+/** Rows shown per project before "Show all", so a workspace with thousands of sessions still opens at once. */
+const PAGE = 50;
+
+/** Every session, open or not, grouped by project and searchable. Choosing one opens it as a tab. */
+export function HomeView() {
+	const { data, sessions, activate, newSession, openIds, layout } = useCodingAgent();
+	const openSet = React.useMemo(() => new Set(openIds), [openIds]);
+	const frame = frameClasses(layout);
+	const [query, setQuery] = React.useState('');
+	const [expanded, setExpanded] = React.useState<string[]>([]);
+	const needle = query.trim().toLowerCase();
+	const all = sessions.filter((session) => !session.draft);
+	const visible = needle ? all.filter((session) => session.title.toLowerCase().includes(needle)) : all;
+
+	return (
+		<div className={cn('h-full min-h-0', frame.outer)}>
+			<section aria-label="All sessions" className={cn('@container/home h-full overflow-y-auto', frame.surface)}>
+				<div className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-6 py-10">
+					{all.length === 0 ? (
+						<EmptyState
+							icon={MessageSquarePlus}
+							title="No sessions yet"
+							description="Start one and it shows up here, grouped by project."
+							action={
+								<Button size="sm" onClick={newSession}>
+									<Plus aria-hidden="true" className="size-3.5" />
+									New session
+								</Button>
+							}
+						/>
+					) : (
+						<>
+							<div className="flex items-center gap-2">
+								<SearchField
+									label="Search sessions"
+									placeholder="Search sessions"
+									value={query}
+									onChange={(event) => setQuery(event.target.value)}
+									className="h-8 min-w-0 flex-1"
+								/>
+								<Button size="sm" aria-label="New session" onClick={newSession} className="shrink-0">
+									<Plus aria-hidden="true" className="size-3.5" />
+									<span className="sr-only @sm/home:not-sr-only">New session</span>
+								</Button>
+							</div>
+							{data.projects.map((entry) => {
+								const rows = visible.filter((session) => session.projectId === entry.id);
+								if (rows.length === 0) return null;
+								const shown = expanded.includes(entry.id) || needle ? rows : rows.slice(0, PAGE);
+								return (
+									<div key={entry.id} className="flex min-w-0 flex-col gap-2">
+										<SectionHeading
+											title={
+												<span dir="auto" title={entry.name} className="block truncate [text-align:match-parent]">
+													{entry.name}
+												</span>
+											}
+											description={
+												<span dir="auto" title={entry.path} className="block truncate font-mono text-xs [text-align:match-parent]">
+													{entry.path}
+												</span>
+											}
+										/>
+										<ul className="flex flex-col">
+											{shown.map((session) => {
+												const status = sessionStatusLabel(session);
+												return (
+													// Off-screen rows skip layout and paint until they scroll near.
+													<li key={session.id} className="[contain-intrinsic-size:auto_40px] [content-visibility:auto]">
+														<button
+															type="button"
+															title={status ? `${session.title} · ${status}` : session.title}
+															onClick={() => activate(session.id)}
+															className={cn('-mx-2 flex h-10 w-[calc(100%+1rem)] items-center gap-3 rounded-md px-2 text-start hover:bg-overlay-hover', focusRingClass)}
+														>
+															<SessionGlyph session={session} projectName={entry.name} />
+															<SessionTitle
+																session={session}
+																className={cn('min-w-16 flex-1 text-[0.8125rem]', session.status !== 'running' && 'text-foreground')}
+															/>
+															{/* The ring already carries the state, so the words make way first on a narrow screen. */}
+															{status ? <span className="hidden shrink-0 text-xs text-muted-foreground @lg/home:inline">{status}</span> : null}
+															{session.changedFiles ? (
+																<span className="hidden shrink-0 text-xs text-muted-foreground tabular-nums @sm/home:inline">
+																	{formatCount(session.changedFiles)} {plural(session.changedFiles, { one: 'file', other: 'files' })}
+																</span>
+															) : null}
+															<span className="min-w-8 shrink-0 text-end text-xs text-subtle-foreground tabular-nums">
+																{openSet.has(session.id) ? 'Open' : session.updatedLabel}
+															</span>
+														</button>
+													</li>
+												);
+											})}
+										</ul>
+										{shown.length < rows.length ? (
+											<Button
+												size="xs"
+												variant="ghost"
+												className="self-start text-muted-foreground"
+												onClick={() => setExpanded((current) => [...current, entry.id])}
+											>
+												Show all <span className="tabular-nums">{formatCount(rows.length)}</span>
+											</Button>
+										) : null}
+									</div>
+								);
+							})}
+							{needle && visible.length === 0 ? (
+								<p className="py-8 text-center text-[0.8125rem] text-muted-foreground [overflow-wrap:anywhere]">No sessions match “{query.trim()}”.</p>
+							) : null}
+						</>
+					)}
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/index.ts b/packages/ui/src/components/coding-agent/index.ts
new file mode 100644
index 0000000..253ef28
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/index.ts
@@ -0,0 +1,45 @@
+export { CodingAgent, type CodingAgentProps } from './coding-agent';
+export { CODING_AGENT_DEMO, CODING_AGENT_MODELS } from './demo';
+export {
+	type AgentRun,
+	type CheckPatch,
+	type CheckStatus,
+	type CICheck,
+	createHarnessView,
+	type HarnessEvent,
+	type HarnessRequest,
+	type HarnessTask,
+	type HarnessView,
+	type MergeState,
+	type MessageProtocol,
+	type PullRequest,
+	type PullRequestPatch,
+	type PullRequestState,
+	reduceHarness,
+	replayHarness,
+	type RunCapabilities,
+	type RunRole,
+	type RunStatus,
+	type ReviewState,
+	type RunUsage,
+	type WaitingOn,
+	type Worktree,
+	type WorktreePatch
+} from './harness';
+export { createHarnessStore, type HarnessStore } from './harness-store';
+export type {
+	BrowserPageRenderer,
+	CodingAgentAction,
+	CodingAgentData,
+	CodingAgentLayout,
+	CodingProject,
+	CodingSession,
+	RunSummary,
+	SessionBeat,
+	SessionPatch,
+	SessionStatus,
+	SlashCommand,
+	SpawnedAgent,
+	ToolCallBeat,
+	WorkspaceLocation
+} from './types';
diff --git a/packages/ui/src/components/coding-agent/new-session.tsx b/packages/ui/src/components/coding-agent/new-session.tsx
new file mode 100644
index 0000000..76a1967
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/new-session.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import { Check, ChevronDown, GitBranch, GitBranchPlus, Monitor } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { Mascot } from '../agents-builder/mascot';
+import type { ModelSelection } from '../ai/model-selector';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../dropdown-menu';
+import { focusRingClass } from '../workspace-kit/primitives';
+import { type LiveSession, useCodingAgent } from './coding-agent-context';
+import { ProjectMark } from './session-glyph';
+import { SessionComposer } from './session-composer';
+import { frameClasses } from './session-surface';
+import type { WorkspaceLocation } from './types';
+
+const chipClass = cn(
+	'flex h-7 min-w-0 max-w-full items-center gap-1.5 rounded-md px-2 text-[0.8125rem] text-muted-foreground hover:bg-overlay-hover hover:text-foreground data-popup-open:bg-overlay-hover pointer-coarse:h-10',
+	focusRingClass
+);
+
+const LOCATIONS: { value: WorkspaceLocation; label: string; description: string; icon: typeof Monitor }[] = [
+	{ value: 'local', label: 'Local', description: 'Work in the project checkout', icon: Monitor },
+	{ value: 'worktree', label: 'New worktree', description: 'Work on a fresh branch in its own folder', icon: GitBranchPlus }
+];
+
+/**
+ * A draft session: a greeting, the composer, and where the agent will work — which project, whether in the checkout
+ * or a new worktree, and on which branch. Sending turns the draft into a running session.
+ */
+export function NewSession({ session, active }: { session: LiveSession; active: boolean }) {
+	const { data, project: projectOf, startSession, layout } = useCodingAgent();
+	const frame = frameClasses(layout);
+	const [projectId, setProjectId] = React.useState(session.projectId);
+	const [location, setLocation] = React.useState<WorkspaceLocation>('local');
+	const [model, setModel] = React.useState<ModelSelection>(data.defaultModel);
+	const composerRef = React.useRef<HTMLDivElement>(null);
+	const project = projectOf(projectId);
+	const place = LOCATIONS.find((entry) => entry.value === location)!;
+	const files = React.useMemo(() => Object.keys(project.files).sort(), [project.files]);
+	const branch = location === 'worktree' ? `agent/${session.id.replace('draft-', 'session-')}` : project.branch;
+
+	React.useEffect(() => {
+		if (active) composerRef.current?.querySelector('textarea')?.focus();
+	}, [active]);
+
+	return (
+		<div hidden={!active} className={cn('h-full min-h-0', frame.outer)}>
+			<section
+				aria-label="New session"
+				className={cn('flex h-full min-h-0 flex-col items-center justify-center overflow-y-auto px-6', frame.surface)}
+			>
+				<div className="flex w-full max-w-2xl flex-col items-center gap-6 pb-[12vh]">
+					<div className="flex flex-col items-center gap-4">
+						<Mascot className="size-12 rounded-[14px]" />
+						<h2 className="text-center text-xl font-medium tracking-tight text-balance text-foreground [overflow-wrap:anywhere]">
+							What should we build in <bdi>{project.name}</bdi>?
+						</h2>
+					</div>
+					<SessionComposer
+						className="w-full"
+						inputRef={composerRef}
+						onSubmit={(text) => startSession(session.id, { text, projectId, location })}
+						commands={data.commands}
+						files={files}
+						models={data.models}
+						model={model}
+						onModelChange={setModel}
+					/>
+					<div className="flex w-full flex-wrap items-center justify-center gap-1">
+						<DropdownMenu>
+							<DropdownMenuTrigger aria-label={`Project: ${project.name}`} className={chipClass}>
+								<ProjectMark name={project.name} />
+								<span dir="auto" title={project.name} className="min-w-0 truncate text-foreground">
+									{project.name}
+								</span>
+								<ChevronDown aria-hidden="true" className="size-3 shrink-0" />
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="center" className="w-auto min-w-(--anchor-width) max-w-(--available-width)">
+								<DropdownMenuLabel>Project</DropdownMenuLabel>
+								{data.projects.map((entry) => (
+									<DropdownMenuItem key={entry.id} title={entry.name} onClick={() => setProjectId(entry.id)}>
+										<ProjectMark name={entry.name} />
+										<span dir="auto" className="min-w-0 flex-1 truncate [text-align:match-parent]">
+											{entry.name}
+										</span>
+										{entry.id === projectId ? <Check aria-hidden="true" className="size-3.5" /> : null}
+									</DropdownMenuItem>
+								))}
+							</DropdownMenuContent>
+						</DropdownMenu>
+						<span aria-hidden="true" className="text-subtle-foreground">/</span>
+						<DropdownMenu>
+							<DropdownMenuTrigger aria-label={`Run in: ${place.label}`} className={chipClass}>
+								<place.icon aria-hidden="true" className="size-3.5 shrink-0" />
+								<span className="shrink-0 text-foreground">{place.label}</span>
+								{location === 'local' ? <span aria-hidden="true" className="size-1.5 rounded-full bg-success" /> : null}
+								<ChevronDown aria-hidden="true" className="size-3 shrink-0" />
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="center" className="w-64">
+								<DropdownMenuLabel>Run in</DropdownMenuLabel>
+								{LOCATIONS.map((entry) => (
+									<DropdownMenuItem key={entry.value} onClick={() => setLocation(entry.value)} className="items-start">
+										<entry.icon aria-hidden="true" className="mt-0.5 size-3.5" />
+										<span className="min-w-0 flex-1">
+											<span className="block">{entry.label}</span>
+											<span className="block text-xs text-muted-foreground">{entry.description}</span>
+										</span>
+										{entry.value === location ? <Check aria-hidden="true" className="mt-0.5 size-3.5" /> : null}
+									</DropdownMenuItem>
+								))}
+							</DropdownMenuContent>
+						</DropdownMenu>
+						{/* Where the agent will commit; the location menu decides it, so this reads as a label rather than a control. */}
+						<span
+							title={branch}
+							className="flex h-7 min-w-0 max-w-full items-center gap-1.5 px-1.5 font-mono text-xs text-muted-foreground"
+						>
+							<GitBranch aria-hidden="true" className="size-3.5 shrink-0" />
+							<span dir="ltr" className="min-w-0 truncate">
+								{branch}
+							</span>
+						</span>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/request-dock.tsx b/packages/ui/src/components/coding-agent/request-dock.tsx
new file mode 100644
index 0000000..fa3c6a4
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/request-dock.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { ShieldAlert } from 'lucide-react';
+
+import { ApprovalCard } from '../ai/approval-card';
+import { AskCard } from '../ai/ask-card';
+import type { PermissionDecision } from './harness';
+import type { SessionHarness } from './use-harness';
+
+const APPROVAL_OPTIONS = [
+	{ id: 'once', label: 'Allow once' },
+	{ id: 'always', label: 'Always allow', description: 'Don’t ask again for this command in this session.' },
+	{ id: 'deny', label: 'Deny', description: 'The agent continues without running it.' }
+];
+
+/**
+ * The request waiting on you, docked above the composer. Requests from any agent surface where you are: all of them
+ * in the session's own view, a child's own in its view. A child's question waits here too in the session's view, so
+ * it doesn't sit unseen in a transcript you aren't reading; any other question is in the transcript on screen.
+ */
+export function RequestDock({ harness, viewRunId }: { harness: SessionHarness; viewRunId: string }) {
+	const view = harness.view;
+	const viewingChild = viewRunId !== view.rootRunId;
+	const pending = view.pending.find((entry) => (viewingChild ? entry.runId === viewRunId : true));
+	if (!pending) return null;
+	const from = pending.runId !== view.rootRunId ? view.runs[pending.runId] : undefined;
+	const request = pending.request;
+
+	if (request.type === 'question') {
+		if (!from || viewingChild) return null;
+		return (
+			<div className="mb-2 max-h-[40dvh] overflow-y-auto">
+				<AskCard
+					key={request.id}
+					eyebrow={`${from.name} has a question`}
+					questions={request.questions}
+					onSubmit={(choices) => harness.answer(request.id, { choices })}
+					onSkip={() => harness.answer(request.id, { skipped: true })}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		// Capped so a long command can't push the composer out of the card; the card scrolls instead.
+		<div className="mb-2 max-h-[40dvh] overflow-y-auto rounded-lg">
+			<ApprovalCard
+				key={request.id}
+				className="max-w-none border border-warning/30"
+				questions={[
+					{
+						id: 'decision',
+						prompt: (
+							<span className="flex flex-col gap-1">
+								<span className="flex items-center gap-1.5 text-xs font-normal text-muted-foreground">
+									<ShieldAlert aria-hidden="true" className="size-3.5 shrink-0 text-warning" />
+									{from ? `${from.name} wants to run a command` : 'The agent wants to run a command'}
+								</span>
+								<code dir="ltr" className="block text-start font-mono text-[0.8125rem] whitespace-pre-wrap text-foreground [overflow-wrap:anywhere]">
+									{request.command}
+								</code>
+							</span>
+						),
+						options: APPROVAL_OPTIONS
+					}
+				]}
+				onConfirm={({ answers }) => harness.resolvePermission(request.id, (answers?.decision?.[0] ?? 'once') as PermissionDecision)}
+			/>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/review-panel.tsx b/packages/ui/src/components/coding-agent/review-panel.tsx
new file mode 100644
index 0000000..040c8f1
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/review-panel.tsx
@@ -0,0 +1,445 @@
+'use client';
+
+import type { DiffLineAnnotation } from '@pierre/diffs';
+import { MultiFileDiff } from '@pierre/diffs/react';
+import { ChevronDown, ChevronUp, Columns2, FilePen, FilePlus2, GitCompareArrows, MessageSquare, Rows2 } from 'lucide-react';
+import * as React from 'react';
+
+import { plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Textarea } from '../textarea';
+import { MiddleTruncate } from '../workspace-kit/middle-truncate';
+import { Segmented, TooltipIconButton } from '../workspace-kit/primitives';
+import { EmptyState } from '../workspace-kit/surface';
+import { useElementSize } from '../workspace-kit/use-element-size';
+import { useLatest } from '../workspace-kit/use-latest';
+import { CODE_THEMES, type ColorScheme, DIFF_SURFACE_STYLE, DIFF_UNSAFE_CSS } from './code-surface-theme';
+import { toolbarButtonClass } from './session-surface';
+import { type FileChange, lineTotals, type WorktreeSummary } from './harness';
+import { type ChangeScope, scopeChanges, type WorktreeAction, WorktreePicker } from './worktree-picker';
+
+export type LineComment = { id: string; path: string; line: number; side: 'additions' | 'deletions'; text: string; sent?: boolean };
+
+type Annotation = { kind: 'comment'; comment: LineComment } | { kind: 'draft' };
+
+type DiffStyle = 'unified' | 'split';
+
+const STYLE_OPTIONS = [
+	{ value: 'unified' as const, label: 'Unified', icon: Rows2 },
+	{ value: 'split' as const, label: 'Split', icon: Columns2 }
+];
+
+/** Below this width two columns of code show too little of either side, so the review stays unified. */
+const SPLIT_MIN_WIDTH = 640;
+
+function DraftComment({ onSubmit, onCancel }: { onSubmit: (text: string) => void; onCancel: () => void }) {
+	const [text, setText] = React.useState('');
+	const field = React.useRef<HTMLTextAreaElement>(null);
+	// The diff takes focus back on pointer-up after the gutter click, so focus lands a frame later.
+	React.useEffect(() => {
+		const frame = requestAnimationFrame(() => field.current?.focus({ preventScroll: true }));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	return (
+		<form
+			dir="auto"
+			className="m-2 flex max-w-lg flex-col gap-2 rounded-lg border border-border bg-card p-2 font-sans shadow-xs"
+			onSubmit={(event) => {
+				event.preventDefault();
+				if (text.trim()) onSubmit(text.trim());
+			}}
+		>
+			<Textarea
+				ref={field}
+				aria-label="Comment for the agent"
+				placeholder="Add context for this change…"
+				value={text}
+				onChange={(event) => setText(event.target.value)}
+				onKeyDown={(event) => {
+					if (event.key === 'Escape') onCancel();
+					if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) event.currentTarget.form?.requestSubmit();
+				}}
+				className="min-h-16 text-[0.8125rem]"
+			/>
+			<div className="flex justify-end gap-1.5">
+				<Button type="button" size="sm" variant="ghost" onClick={onCancel}>
+					Cancel
+				</Button>
+				<Button type="submit" size="sm" disabled={!text.trim()}>
+					Add comment
+				</Button>
+			</div>
+		</form>
+	);
+}
+
+function SavedComment({ comment }: { comment: LineComment }) {
+	return (
+		<div dir="auto" className="m-2 flex max-w-lg items-start gap-2 rounded-lg border border-border bg-card px-2.5 py-2 font-sans text-[0.8125rem] shadow-xs">
+			<MessageSquare aria-hidden="true" className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+			<div className="min-w-0">
+				<p className="text-foreground [overflow-wrap:anywhere]">{comment.text}</p>
+				<p className="mt-0.5 text-xs text-muted-foreground">{comment.sent ? 'Sent with your message' : 'Attached to your next message'}</p>
+			</div>
+		</div>
+	);
+}
+
+/** The file's own header row, in the panel's type and icon sizes, with the path cut in the middle so the name shows. */
+function DiffHeader({ change, branch }: { change: FileChange; branch?: string }) {
+	const Icon = change.before === null ? FilePlus2 : FilePen;
+	return (
+		<div className="flex h-10 min-w-0 items-center gap-2 bg-muted px-3 font-sans text-[0.8125rem]">
+			<Icon aria-hidden="true" className={cn('size-3.5 shrink-0', change.before === null ? 'text-success' : 'text-warning')} />
+			<MiddleTruncate text={change.path} tail={Math.min((change.path.split('/').pop() ?? '').length, 28)} className="min-w-0 flex-1 text-foreground" />
+			{/* With several worktrees the same path can show twice, so each diff says which branch it's on. */}
+			{branch ? (
+				<span title={branch} className="max-w-[40%] shrink truncate font-mono text-xs text-muted-foreground">
+					{branch}
+				</span>
+			) : null}
+			<span className="shrink-0 font-mono text-xs tabular-nums">
+				{change.additions ? <span className="text-success">+{change.additions}</span> : null}
+				{change.additions && change.deletions ? ' ' : null}
+				{change.deletions ? <span className="text-destructive">−{change.deletions}</span> : null}
+			</span>
+		</div>
+	);
+}
+
+type Draft = { path: string; line: number; side: 'additions' | 'deletions' };
+
+/** Files drawn straight away; the rest draw as you scroll toward them. */
+const EAGER_FILES = 3;
+
+/** About how tall a file's diff will be before it's drawn: its header and its changed lines, at 20px a line. */
+function estimateHeight(change: FileChange, allLines: boolean) {
+	const lines = allLines ? change.after.split('\n').length : Math.min(change.additions + change.deletions + 6, 400);
+	return 40 + lines * 20;
+}
+
+/**
+ * One file's diff. Memoized with stable inputs, because the renderer re-diffs whenever its file objects change and
+ * repaints whenever its options do, and the session re-renders on every harness event.
+ */
+const ReviewFile = React.memo(function ReviewFile({
+	change,
+	index,
+	branch,
+	diffStyle,
+	scheme,
+	allLines,
+	wrap,
+	comments,
+	draft,
+	onDraft,
+	onComment,
+	onRegister,
+	onCurrent
+}: {
+	change: FileChange;
+	index: number;
+	branch?: string;
+	diffStyle: DiffStyle;
+	scheme: ColorScheme;
+	allLines: boolean;
+	wrap: boolean;
+	comments: LineComment[];
+	/** The open draft when it's on this file. */
+	draft: Draft | null;
+	onDraft: (draft: Draft | null) => void;
+	onComment: (comment: Omit<LineComment, 'id'>) => void;
+	onRegister: (key: string, node: HTMLElement | null) => void;
+	onCurrent: (index: number) => void;
+}) {
+	const { key, path } = change;
+	const oldFile = React.useMemo(() => ({ name: path, contents: change.before ?? '' }), [path, change.before]);
+	const newFile = React.useMemo(() => ({ name: path, contents: change.after }), [path, change.after]);
+	const options = React.useMemo(
+		() => ({
+			diffStyle,
+			theme: CODE_THEMES,
+			themeType: scheme,
+			expandUnchanged: allLines,
+			stickyHeader: true,
+			overflow: wrap ? ('wrap' as const) : ('scroll' as const),
+			lineDiffType: 'word' as const,
+			hunkSeparators: 'line-info-basic' as const,
+			enableGutterUtility: true,
+			unsafeCSS: DIFF_UNSAFE_CSS,
+			onGutterUtilityClick: (range: { end: number; endSide?: 'additions' | 'deletions'; side?: 'additions' | 'deletions' }) =>
+				onDraft({ path, line: range.end, side: range.endSide ?? range.side ?? 'additions' })
+		}),
+		[diffStyle, scheme, allLines, wrap, path, onDraft]
+	);
+	const annotations = React.useMemo(() => {
+		const out: DiffLineAnnotation<Annotation>[] = comments
+			.filter((comment) => comment.path === path)
+			.map((comment) => ({ side: comment.side, lineNumber: comment.line, metadata: { kind: 'comment', comment } }));
+		if (draft) out.push({ side: draft.side, lineNumber: draft.line, metadata: { kind: 'draft' } });
+		return out;
+	}, [comments, draft, path]);
+	const style = React.useMemo(() => ({ ...DIFF_SURFACE_STYLE, colorScheme: scheme }), [scheme]);
+	// Diffing and highlighting a file is the expensive part, so a file far below the fold waits until you scroll near
+	// it, holding about its own height meanwhile; once drawn it stays drawn.
+	const [near, setNear] = React.useState(index < EAGER_FILES);
+	const node = React.useRef<HTMLElement | null>(null);
+	const register = React.useCallback(
+		(element: HTMLElement | null) => {
+			node.current = element;
+			onRegister(key, element);
+		},
+		[onRegister, key]
+	);
+	React.useEffect(() => {
+		const element = node.current;
+		if (near || !element) return;
+		// Without an observer to say when it's close, draw it now rather than never.
+		if (typeof IntersectionObserver === 'undefined') {
+			setNear(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => entry?.isIntersecting && setNear(true), {
+			root: element.closest('[data-review-scroller]'),
+			rootMargin: '800px 0px'
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [near]);
+
+	return (
+		<section
+			aria-label={branch ? `${path} on ${branch}` : path}
+			data-key={key}
+			ref={register}
+			onFocusCapture={() => onCurrent(index)}
+			// Each file starts at its tinted header, so files need no rule between them.
+			className="pb-3 last:pb-0"
+		>
+			{near ? (
+				<MultiFileDiff<Annotation>
+					oldFile={oldFile}
+					newFile={newFile}
+					options={options}
+					renderCustomHeader={() => <DiffHeader change={change} branch={branch} />}
+					lineAnnotations={annotations}
+					renderAnnotation={(annotation) =>
+						annotation.metadata?.kind === 'comment' ? (
+							<SavedComment comment={annotation.metadata.comment} />
+						) : (
+							<DraftComment onCancel={() => onDraft(null)} onSubmit={(text) => onComment({ path, line: annotation.lineNumber, side: annotation.side, text })} />
+						)
+					}
+					style={style}
+				/>
+			) : (
+				<div style={{ height: estimateHeight(change, allLines) }}>
+					<DiffHeader change={change} branch={branch} />
+				</div>
+			)}
+		</section>
+	);
+});
+
+/**
+ * Every file the session changed, one diff each, with a split or unified view, collapsed or full context, wrapped
+ * or scrolling lines, previous/next file stepping that follows your scrolling, and line comments that ride along
+ * with the next message.
+ */
+export function ReviewPanel({
+	changes,
+	focusPath,
+	scheme,
+	comments,
+	onComment,
+	scopes,
+	worktrees,
+	names,
+	onWorktreeAction
+}: {
+	changes: FileChange[];
+	/** Agents that changed files. With more than one, the review can narrow to a single agent's changes. */
+	scopes: { id: string; name: string }[];
+	/** Where the changes landed, with each worktree's pull request and CI. With more than one, the review can narrow to one. */
+	worktrees: WorktreeSummary[];
+	/** Agent names by run id, for the worktree rows. */
+	names: Record<string, string>;
+	onWorktreeAction: (action: WorktreeAction) => void;
+	focusPath: { path: string; nonce: number } | null;
+	scheme: ColorScheme;
+	comments: LineComment[];
+	onComment: (comment: Omit<LineComment, 'id'>) => void;
+}) {
+	// Bound in the empty state too, so a session that opens with no changes is measured before its first diff lands.
+	const [root, { width }] = useElementSize<HTMLDivElement>({ ignoreHidden: true });
+	const scroller = React.useRef<HTMLDivElement>(null);
+	const [chosenStyle, setDiffStyle] = React.useState<DiffStyle>('unified');
+	const [scope, setScopeState] = React.useState<ChangeScope>({ kind: 'all' });
+	// Kept stable between harness events, so the scroll observer and file stepping aren't rebuilt each time.
+	const shown = React.useMemo(() => scopeChanges(changes, scope), [changes, scope]);
+	const several = worktrees.length > 1;
+	const branchOf = (id: string) => worktrees.find((entry) => entry.worktree.id === id)?.worktree.branch ?? id;
+	const [allLines, setAllLines] = React.useState(false);
+	const [wrap, setWrap] = React.useState(false);
+	const [current, setCurrent] = React.useState(0);
+	const setScope = (next: ChangeScope) => {
+		setScopeState(next);
+		setCurrent(0);
+		scroller.current?.scrollTo({ top: 0 });
+	};
+	const [draft, setDraft] = React.useState<Draft | null>(null);
+	const sections = React.useRef(new Map<string, HTMLElement>());
+	const registerSection = React.useCallback((key: string, node: HTMLElement | null) => {
+		if (node) sections.current.set(key, node);
+		else sections.current.delete(key);
+	}, []);
+	// The host's callback can change every render; the files get one that never does, so they can skip re-rendering.
+	const onCommentRef = useLatest(onComment);
+	const submitComment = React.useCallback(
+		(comment: Omit<LineComment, 'id'>) => {
+			onCommentRef.current(comment);
+			setDraft(null);
+		},
+		[onCommentRef]
+	);
+	const canSplit = width >= SPLIT_MIN_WIDTH;
+	const diffStyle = canSplit ? chosenStyle : 'unified';
+
+	const reveal = React.useCallback(
+		(index: number) => {
+			const change = shown[index];
+			if (!change) return;
+			setCurrent(index);
+			sections.current.get(change.key)?.scrollIntoView({ block: 'start' });
+		},
+		[shown]
+	);
+
+	React.useEffect(() => {
+		if (!focusPath) return;
+		const index = shown.findIndex((change) => change.path === focusPath.path);
+		if (index >= 0) reveal(index);
+		// Only a new focus request moves the view, not every change to the list.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [focusPath]);
+
+	// The counter follows your scrolling: the current file is the first one whose diff reaches the top quarter.
+	React.useEffect(() => {
+		const node = scroller.current;
+		if (!node || shown.length < 2) return;
+		const visible = new Map<string, boolean>();
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) visible.set((entry.target as HTMLElement).dataset.key ?? '', entry.isIntersecting);
+				const index = shown.findIndex((change) => visible.get(change.key));
+				if (index >= 0) setCurrent(index);
+			},
+			{ root: node, rootMargin: '0px 0px -75% 0px' }
+		);
+		for (const element of sections.current.values()) observer.observe(element);
+		return () => observer.disconnect();
+	}, [shown]);
+
+	// The scope chip: what's in view, its worktree's pull request and CI, and the menu to change it.
+	const picker = worktrees.length ? (
+		<WorktreePicker
+			worktrees={worktrees}
+			agents={scopes}
+			changes={changes}
+			names={names}
+			scope={scope}
+			onScope={setScope}
+			onAction={onWorktreeAction}
+		/>
+	) : null;
+
+	if (changes.length === 0) {
+		return (
+			<div ref={root} className="@container/review flex h-full min-h-0 flex-col">
+				{picker ? <div className="flex h-10 shrink-0 items-center px-3">{picker}</div> : null}
+				<div className="grid min-h-0 flex-1 place-items-center">
+					<EmptyState icon={GitCompareArrows} title="No changes yet" description="Files the agent edits in this session show up here as diffs." />
+				</div>
+			</div>
+		);
+	}
+
+	const { additions, deletions } = lineTotals(shown);
+
+	return (
+		<div ref={root} className="@container/review flex h-full min-h-0 flex-col">
+			<div className="flex h-10 shrink-0 items-center gap-2 px-3">
+				{picker ?? null}
+				{/* The file count keeps its room; the line totals give way first on a narrow panel. */}
+				{/* Beside the scope chip on a narrow panel the counts step aside; the chip's menu repeats them. */}
+				<p className={cn('flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-xs whitespace-nowrap text-muted-foreground', picker && '@max-lg/review:invisible')}>
+					<bdi className="shrink-0">
+						<span className="tabular-nums">{shown.length}</span> {plural(shown.length, { one: 'file', other: 'files' })}
+					</bdi>
+					<bdi className="min-w-0 truncate font-mono tabular-nums">
+						{additions ? <span className="text-success">+{additions}</span> : null} {deletions ? <span className="text-destructive">−{deletions}</span> : null}
+					</bdi>
+				</p>
+				{canSplit ? <Segmented label="Diff layout" value={chosenStyle} options={STYLE_OPTIONS} onChange={setDiffStyle} /> : null}
+				<Button
+					size="xs"
+					variant="ghost"
+					aria-pressed={wrap}
+					onClick={() => setWrap((value) => !value)}
+					className={cn('text-muted-foreground', wrap && 'bg-overlay-hover text-foreground')}
+				>
+					Wrap
+				</Button>
+				<Button
+					size="xs"
+					variant="ghost"
+					aria-pressed={allLines}
+					onClick={() => setAllLines((value) => !value)}
+					className={cn('text-muted-foreground', allLines && 'bg-overlay-hover text-foreground')}
+				>
+					All lines
+				</Button>
+				{shown.length > 1 ? (
+					<div className="flex items-center">
+						<TooltipIconButton label="Previous file" disabled={current === 0} onClick={() => reveal(current - 1)} className={toolbarButtonClass}>
+							<ChevronUp aria-hidden="true" className="size-3.5" />
+						</TooltipIconButton>
+						<span className="min-w-9 text-center text-xs text-muted-foreground tabular-nums">
+							{current + 1}/{shown.length}
+						</span>
+						<TooltipIconButton label="Next file" disabled={current === shown.length - 1} onClick={() => reveal(current + 1)} className={toolbarButtonClass}>
+							<ChevronDown aria-hidden="true" className="size-3.5" />
+						</TooltipIconButton>
+					</div>
+				) : null}
+			</div>
+			{/* Code reads left to right whatever the page direction. */}
+			<div ref={scroller} data-review-scroller="" dir="ltr" className="min-h-0 flex-1 overflow-y-auto">
+				{shown.length === 0 ? (
+					<div className="grid h-full place-items-center">
+						<EmptyState icon={GitCompareArrows} title="Nothing changed here yet" description="Changes land here as the agents in this worktree edit files." />
+					</div>
+				) : null}
+				{shown.map((change, index) => (
+					<ReviewFile
+						key={change.key}
+						change={change}
+						index={index}
+						branch={several ? branchOf(change.worktreeId) : undefined}
+						diffStyle={diffStyle}
+						scheme={scheme}
+						allLines={allLines}
+						wrap={wrap}
+						comments={comments}
+						draft={draft?.path === change.path ? draft : null}
+						onDraft={setDraft}
+						onComment={submitComment}
+						onRegister={registerSection}
+						onCurrent={setCurrent}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/run-presentation.tsx b/packages/ui/src/components/coding-agent/run-presentation.tsx
new file mode 100644
index 0000000..fb2d8f3
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/run-presentation.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { CornerDownRight } from 'lucide-react';
+
+import { initials } from '../../lib/initials';
+import { plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { MarkTile } from '../ai/mark-tile';
+import { type HarnessView, type RunView, runSignal } from './harness';
+
+/**
+ * How runs read wherever they show (transcript, agents panel, header, review scope): their names, their state in
+ * words, their marks, and who wrote to whom.
+ */
+
+const RUN_STATE: Record<string, string> = {
+	queued: 'Queued',
+	running: 'Working',
+	approval: 'Needs your approval',
+	input: 'Waiting for your answer',
+	failed: 'Failed',
+	done: 'Done',
+	idle: 'Done'
+};
+
+/** "Working", "Waiting for 2 agents", "Needs your approval": what a run is doing, in words. */
+export function runStateLabel(run: RunView, view: HarnessView) {
+	if (run.status === 'cancelled') return 'Stopped';
+	if (run.status === 'paused') return 'Paused';
+	if (run.status === 'waiting' && run.waitingOn?.kind === 'agent') {
+		const count = run.waitingOn.runIds.length;
+		return `Waiting for ${count} ${plural(count, { one: 'agent', other: 'agents' })}`;
+	}
+	return RUN_STATE[runSignal(run, view)] ?? '';
+}
+
+/** A run's display name, or "You" for messages a person sent, or "everyone" for a broadcast. */
+export function nameOf(view: HarnessView, id: string) {
+	if (id === 'you') return 'You';
+	if (id === 'all') return 'everyone';
+	return view.runs[id]?.name ?? id;
+}
+
+/** Who a message went to, as one line of names. */
+export function recipientNames(view: HarnessView, to: string[] | 'all') {
+	return to === 'all' ? nameOf(view, 'all') : to.map((id) => nameOf(view, id)).join(', ');
+}
+
+/** A reply as plain text, for places that show a clamped preview of it rather than the formatted reply. */
+export function plainText(text: string) {
+	return text.replace(/\*\*(.+?)\*\*/g, '$1').replace(/`([^`]+)`/g, '$1');
+}
+
+/** The monochrome mark for an agent: its initial in the kit's mark tile. */
+export function AgentMark({ name, className }: { name: string; className?: string }) {
+	return <MarkTile className={cn('font-medium text-foreground', className)}>{initials(name, { max: 1 })}</MarkTile>;
+}
+
+/** The line above a message between agents: the sender's mark and name, an arrow, the recipients, and its kind. */
+export function MessageRoute({ from, to, label }: { from: string; to: string; label?: string }) {
+	return (
+		<p className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+			<AgentMark name={from} />
+			<span className="font-medium text-foreground">{from}</span>
+			<CornerDownRight aria-hidden="true" className="size-3.5 shrink-0 rtl:-scale-x-100" />
+			<span className="min-w-0 truncate">{to}</span>
+			{label ? <span className="shrink-0 rounded-sm bg-muted px-1 text-[0.6875rem]">{label}</span> : null}
+		</p>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-composer.tsx b/packages/ui/src/components/coding-agent/session-composer.tsx
new file mode 100644
index 0000000..258259a
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-composer.tsx
@@ -0,0 +1,346 @@
+'use client';
+
+import { ArrowUp, AtSign, CornerDownRight, FileCode2, MessageSquare, Paperclip, Plus, Slash, Square, SquareTerminal, X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { type AiModel, type ModelSelection, ModelSelector } from '../ai/model-selector';
+import { PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea } from '../ai/prompt-input';
+import { PromptInputAttachment, PromptInputAttachments } from '../ai/prompt-input-attachment';
+import { PromptInputTray, PromptInputTrayRow } from '../ai/prompt-input-tray';
+import { UsageNotice, usageTone } from '../ai/usage-notice';
+import { Button } from '../button';
+import { Command, CommandGroup, CommandGroupLabel, CommandItem, CommandList } from '../command';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../dropdown-menu';
+import { iconButtonClass } from '../workspace-kit/primitives';
+import type { SlashCommand } from './types';
+
+export type ComposerAttachment = { id: string; kind: 'file' | 'comment'; label: string; detail?: string };
+
+type Suggestion = { id: string; kind: 'command' | 'file'; label: string; detail?: string };
+
+/** The `/command` or `@file` being typed at the caret, if any. */
+function activeTrigger(value: string, caret: number) {
+	const before = value.slice(0, caret);
+	const command = /^\/(\S*)$/.exec(before);
+	if (command) return { kind: 'command' as const, query: command[1], start: 0 };
+	const mention = /(?:^|\s)@([^\s@]*)$/.exec(before);
+	if (mention) return { kind: 'file' as const, query: mention[1], start: caret - mention[1].length - 1 };
+	return null;
+}
+
+const MAX_SUGGESTIONS = 8;
+
+/**
+ * The session composer, assembled from the AI kit's prompt input: a `/` command and `@` file menu at the caret, `!`
+ * shell mode, and the model picker. A running session adds attachment and comment chips, a queue of follow-ups typed
+ * while the agent works, an "Attach files" item, and a send button that turns into stop mid-run; each shows only
+ * when its props are passed, so a new-session draft leaves them out.
+ */
+export function SessionComposer({
+	placeholder: placeholderProp,
+	running = false,
+	onSubmit,
+	onStop,
+	attachments = [],
+	onRemoveAttachment,
+	queued = [],
+	onUnqueue,
+	commands,
+	files,
+	models,
+	model,
+	onModelChange,
+	usagePercent,
+	onAttachFiles,
+	inputRef,
+	className
+}: {
+	placeholder?: string;
+	running?: boolean;
+	onSubmit: (text: string) => void;
+	/** Shows the stop button while `running` and nothing is typed. */
+	onStop?: () => void;
+	attachments?: ComposerAttachment[];
+	/** Gives each attachment chip a remove button. */
+	onRemoveAttachment?: (id: string) => void;
+	queued?: { id: string; text: string }[];
+	/** Gives each queued follow-up a remove button. */
+	onUnqueue?: (id: string) => void;
+	commands: SlashCommand[];
+	files: string[];
+	models: AiModel[];
+	model: ModelSelection;
+	onModelChange: (model: ModelSelection) => void;
+	usagePercent?: number;
+	/** Adds "Attach files" to the add menu. */
+	onAttachFiles?: () => void;
+	inputRef?: React.RefObject<HTMLDivElement | null>;
+	className?: string;
+}) {
+	const [value, setValue] = React.useState('');
+	const [caret, setCaret] = React.useState(0);
+	const [highlight, setHighlight] = React.useState(0);
+	const [dismissed, setDismissed] = React.useState<string | null>(null);
+	const [usageDismissed, setUsageDismissed] = React.useState(false);
+	const wrapper = React.useRef<HTMLDivElement>(null);
+	const listId = React.useId();
+	// Only promise the shortcuts this workspace actually has.
+	const placeholder =
+		placeholderProp ??
+		['Ask anything', commands.length ? '/ for commands' : null, files.length ? '@ for context' : null].filter(Boolean).join(', ') + '…';
+
+	const trigger = activeTrigger(value, caret);
+	const triggerKey = trigger ? `${trigger.kind}:${trigger.start}` : null;
+	const suggestions = React.useMemo<Suggestion[]>(() => {
+		if (!trigger) return [];
+		const query = trigger.query.toLowerCase();
+		if (trigger.kind === 'command') {
+			return commands
+				.filter((command) => command.name.startsWith(query))
+				.map((command) => ({ id: command.name, kind: 'command' as const, label: `/${command.name}`, detail: command.description }));
+		}
+		return files
+			.filter((path) => path.toLowerCase().includes(query))
+			.slice(0, MAX_SUGGESTIONS)
+			.map((path) => ({ id: path, kind: 'file' as const, label: path.split('/').pop() ?? path, detail: path }));
+	}, [commands, files, trigger?.kind, trigger?.query]);
+	const menuOpen = suggestions.length > 0 && triggerKey !== dismissed;
+	const active = suggestions[Math.min(highlight, suggestions.length - 1)];
+
+	React.useEffect(() => setHighlight(0), [triggerKey, trigger?.query]);
+
+	const textarea = () => wrapper.current?.querySelector('textarea');
+
+	const pick = (suggestion: Suggestion) => {
+		if (!trigger) return;
+		const insert = suggestion.kind === 'command' ? `/${suggestion.id} ` : `@${suggestion.id} `;
+		const next = value.slice(0, trigger.start) + insert + value.slice(caret);
+		const position = trigger.start + insert.length;
+		setValue(next);
+		setCaret(position);
+		requestAnimationFrame(() => {
+			const node = textarea();
+			node?.focus();
+			node?.setSelectionRange(position, position);
+		});
+	};
+
+	const insertAtCaret = (text: string) => {
+		const next = value.slice(0, caret) + text + value.slice(caret);
+		setValue(next);
+		setCaret(caret + text.length);
+		requestAnimationFrame(() => {
+			const node = textarea();
+			node?.focus();
+			node?.setSelectionRange(caret + text.length, caret + text.length);
+		});
+	};
+
+	const submit = () => {
+		if (menuOpen && active) {
+			pick(active);
+			return;
+		}
+		const text = value.trim();
+		if (!text) return;
+		onSubmit(text);
+		setValue('');
+		setCaret(0);
+	};
+
+	const shell = value.startsWith('!');
+	const canSend = value.trim().length > 0;
+	const showUsage = usagePercent !== undefined && usagePercent >= 75 && !usageDismissed;
+	const header =
+		showUsage || queued.length > 0 ? (
+			<>
+				{showUsage ? <UsageNotice percent={usagePercent} onDismiss={() => setUsageDismissed(true)} /> : null}
+				{queued.map((entry) => (
+					<PromptInputTrayRow
+						key={entry.id}
+						icon={<CornerDownRight aria-hidden="true" className="size-3.5 text-muted-foreground" />}
+						actions={
+							onUnqueue ? (
+								<Button size="icon-xs" variant="ghost" aria-label="Remove from queue" className="size-6" onClick={() => onUnqueue(entry.id)}>
+									<X className="size-3.5" />
+								</Button>
+							) : undefined
+						}
+					>
+						<span dir="auto" title={entry.text} className="block min-w-0 truncate">
+							<span className="text-muted-foreground">Queued · </span>
+							{entry.text}
+						</span>
+					</PromptInputTrayRow>
+				))}
+			</>
+		) : null;
+
+	return (
+		<div ref={inputRef} className={cn('@container/composer relative', className)}>
+			{menuOpen ? (
+				// The textarea's aria-controls points here; the menu's own list id belongs to the menu library.
+				<div id={listId} className="absolute inset-x-0 bottom-full z-20 mb-2 overflow-hidden rounded-lg border border-border bg-popover shadow-lg">
+					<Command shouldFilter={false} value={active?.id} loop label={trigger?.kind === 'command' ? 'Commands' : 'Files'}>
+						<CommandList className="max-h-64">
+							<CommandGroup>
+								<CommandGroupLabel>{trigger?.kind === 'command' ? 'Commands' : 'Files'}</CommandGroupLabel>
+								{suggestions.map((suggestion, index) => (
+									<CommandItem
+										key={suggestion.id}
+										value={suggestion.id}
+										title={suggestion.detail ? `${suggestion.label} · ${suggestion.detail}` : suggestion.label}
+										onMouseEnter={() => setHighlight(index)}
+										onSelect={() => pick(suggestion)}
+										className="gap-2"
+									>
+										{suggestion.kind === 'command' ? (
+											<Slash aria-hidden="true" className="size-3.5 text-muted-foreground" />
+										) : (
+											<FileCode2 aria-hidden="true" className="size-3.5 text-muted-foreground" />
+										)}
+										{/* The name keeps priority but never more than 60%, so the detail always gets some room. */}
+										<span className={cn('max-w-[60%] shrink-0 truncate text-foreground', suggestion.kind === 'command' && 'font-mono text-[0.8125rem]')}>
+											{suggestion.label}
+										</span>
+										<span dir="auto" className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+											{suggestion.detail}
+										</span>
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</div>
+			) : null}
+			<PromptInputTray tone={showUsage ? usageTone(usagePercent) : 'neutral'} header={header}>
+				<div ref={wrapper}>
+					<PromptInput
+						value={value}
+						onValueChange={setValue}
+						onSubmit={submit}
+						// A long paste scrolls inside the box instead of pushing the send button out of view.
+						maxHeight="min(240px, 30dvh)"
+						// A ring and a soft drop instead of an outline, so the composer sits on the page rather than in a box.
+						className="rounded-xl border-transparent bg-card p-1.5 shadow-[0_0_0_1px_color-mix(in_oklab,var(--foreground)_8%,transparent),0_2px_8px_-2px_rgb(0_0_0/0.08)]"
+					>
+						{attachments.length > 0 ? (
+							<PromptInputAttachments>
+								{attachments.map((attachment) => (
+									<PromptInputAttachment
+										key={attachment.id}
+										name={attachment.label}
+										meta={attachment.detail}
+										icon={
+											attachment.kind === 'comment' ? (
+												<MessageSquare aria-hidden="true" className="size-3.5" />
+											) : (
+												<FileCode2 aria-hidden="true" className="size-3.5" />
+											)
+										}
+										onRemove={onRemoveAttachment ? () => onRemoveAttachment(attachment.id) : undefined}
+									/>
+								))}
+							</PromptInputAttachments>
+						) : null}
+						<PromptInputTextarea
+							aria-label="Message the agent"
+							aria-autocomplete="list"
+							aria-controls={menuOpen ? listId : undefined}
+							aria-expanded={menuOpen}
+							placeholder={placeholder}
+							// A dismissed menu stays closed until the caret moves into a different trigger.
+							onSelect={(event) => setCaret(event.currentTarget.selectionStart)}
+							onInput={(event) => setCaret(event.currentTarget.selectionStart)}
+							onKeyDown={(event) => {
+								if (!menuOpen) return;
+								if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+									event.preventDefault();
+									const by = event.key === 'ArrowDown' ? 1 : -1;
+									setHighlight((index) => (index + by + suggestions.length) % suggestions.length);
+								} else if (event.key === 'Tab' && active) {
+									event.preventDefault();
+									pick(active);
+								} else if (event.key === 'Escape') {
+									event.preventDefault();
+									setDismissed(triggerKey);
+								}
+							}}
+							className={cn('min-h-10 px-1.5 py-1', shell && 'font-mono')}
+						/>
+						<PromptInputActions className="justify-between px-0">
+							<div className="flex min-w-0 flex-1 items-center gap-0.5">
+								<DropdownMenu>
+									<DropdownMenuTrigger
+										aria-label="Add to message"
+										title="Add to message"
+										// Its neighbours sit 2px away, so the hit area stays inside the box; on touch screens the button grows to 44px instead.
+										className={cn(iconButtonClass({ menu: true, extendHitArea: false }), 'pointer-coarse:size-11')}
+									>
+										<Plus aria-hidden="true" className="size-3.5" />
+									</DropdownMenuTrigger>
+									<DropdownMenuContent align="start" side="top" className="w-52">
+										{onAttachFiles ? (
+											<DropdownMenuItem onClick={onAttachFiles}>
+												<Paperclip aria-hidden="true" />
+												Attach files
+											</DropdownMenuItem>
+										) : null}
+										<DropdownMenuItem onClick={() => insertAtCaret('@')}>
+											<AtSign aria-hidden="true" />
+											Mention a file
+										</DropdownMenuItem>
+										<DropdownMenuItem onClick={() => insertAtCaret(value ? '' : '/')}>
+											<Slash aria-hidden="true" />
+											Run a command
+										</DropdownMenuItem>
+										<DropdownMenuItem onClick={() => (shell ? null : setValue(`!${value}`))}>
+											<SquareTerminal aria-hidden="true" />
+											Shell command
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+								{shell ? (
+									<span className="flex h-6 shrink-0 items-center gap-1 rounded-md bg-muted px-1.5 font-mono text-xs text-muted-foreground">
+										<SquareTerminal aria-hidden="true" className="size-3.5 shrink-0" />
+										shell
+									</span>
+								) : null}
+								<ModelSelector
+									models={models}
+									value={model}
+									onValueChange={onModelChange}
+									side="top"
+									triggerClassName="h-7 min-w-0 px-1.5"
+									// On a narrow composer the model name gets the room; the level is one click away.
+									levelClassName="@max-sm/composer:hidden"
+								/>
+							</div>
+							{running && !canSend && onStop ? (
+								<PromptInputAction tooltip="Stop">
+									<Button size="icon-xs" variant="secondary" aria-label="Stop" className="size-7 shrink-0" onClick={onStop}>
+										<Square className="size-3.5 fill-current" />
+									</Button>
+								</PromptInputAction>
+							) : (
+								<PromptInputAction tooltip={running ? 'Queue for when the agent is done' : 'Send'}>
+									<Button
+										size="icon-xs"
+										variant={canSend ? 'default' : 'secondary'}
+										aria-label={running ? 'Queue message' : 'Send'}
+										disabled={!canSend}
+										className="size-7 shrink-0"
+										onClick={submit}
+									>
+										<ArrowUp className="size-3.5" />
+									</Button>
+								</PromptInputAction>
+							)}
+						</PromptInputActions>
+					</PromptInput>
+				</div>
+			</PromptInputTray>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-glyph.tsx b/packages/ui/src/components/coding-agent/session-glyph.tsx
new file mode 100644
index 0000000..c2771b6
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-glyph.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { PenLine } from 'lucide-react';
+
+import { initials } from '../../lib/initials';
+import { cn } from '../../lib/utils';
+import { AgentRing, type StatusSignal, statusSignal } from '../agents-builder/agent-status';
+import { MarkTile } from '../ai/mark-tile';
+import { TextShimmer } from '../ai/text-shimmer';
+import type { LiveSession } from './coding-agent-context';
+
+const STATUS_LABEL: Record<StatusSignal, string> = {
+	running: 'Working',
+	approval: 'Needs your approval',
+	input: 'Waiting for your answer',
+	failed: 'Failed',
+	queued: 'Queued',
+	done: 'New result',
+	idle: ''
+};
+
+export function sessionStatusLabel(session: LiveSession) {
+	return STATUS_LABEL[statusSignal(session)];
+}
+
+/** A project's one-letter tile, taken by grapheme so an emoji-first name keeps its emoji whole. */
+export function ProjectMark({ name, className }: { name: string; className?: string }) {
+	return <MarkTile className={cn('font-medium', className)}>{initials(name, { max: 1 })}</MarkTile>;
+}
+
+/**
+ * The mark before a session's title, always in the same 16px box so titles line up whatever the state: a ring
+ * while the agent works or waits on you, the project's initial at rest, and a pencil for an unsent draft.
+ */
+export function SessionGlyph({ session, projectName, className }: { session: LiveSession; projectName: string; className?: string }) {
+	const signal = statusSignal(session);
+	return (
+		<span className={cn('grid size-4 shrink-0 place-items-center', className)}>
+			{session.draft ? (
+				<PenLine aria-hidden="true" className="size-3.5 text-muted-foreground" />
+			) : signal === 'idle' ? (
+				<ProjectMark name={projectName} />
+			) : (
+				<AgentRing signal={signal} progress={session.progress} />
+			)}
+		</span>
+	);
+}
+
+/**
+ * A session title that shimmers while the agent works. It truncates in its own text direction (`dir="auto"`), so
+ * an Arabic title in an English workspace loses its end rather than its first word, while still aligning with
+ * the surrounding column.
+ */
+export function SessionTitle({ session, className }: { session: LiveSession; className?: string }) {
+	const shared = cn('block min-w-0 max-w-full truncate [text-align:match-parent]', className);
+	return session.status === 'running' ? (
+		<TextShimmer dir="auto" className={shared}>
+			{session.title}
+		</TextShimmer>
+	) : (
+		<span dir="auto" className={shared}>
+			{session.title}
+		</span>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-header.tsx b/packages/ui/src/components/coding-agent/session-header.tsx
new file mode 100644
index 0000000..092ed75
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-header.tsx
@@ -0,0 +1,221 @@
+'use client';
+
+import { Ellipsis, GitBranch, PanelRight, SquareTerminal } from 'lucide-react';
+import * as React from 'react';
+
+import { plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { AgentRing } from '../agents-builder/agent-status';
+import { ContextRing, formatCompact } from '../ai/context-ring';
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle
+} from '../alert-dialog';
+import { buttonVariants } from '../button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../dropdown-menu';
+import { focusRingClass, iconButtonClass, TooltipIconButton } from '../workspace-kit/primitives';
+import type { LiveSession } from './coding-agent-context';
+import { ancestry, type HarnessView, isWorking, runSignal, type RunView } from './harness';
+import { AgentMark, runStateLabel } from './run-presentation';
+import { SessionTitle } from './session-glyph';
+import { toolbarButtonClass } from './session-surface';
+import { withShortcut } from './shortcuts';
+
+/** Inside another agent: a trail back up through whoever started it, to the session itself. */
+function AgentTrail({ view, runId, sessionTitle, onShowRun }: { view: HarnessView; runId: string; sessionTitle: string; onShowRun: (runId: string) => void }) {
+	const crumbs = ancestry(view, runId);
+	return (
+		<nav aria-label="Agents" className="flex min-w-0 items-center gap-1 text-sm">
+			{crumbs.map((entry, index) => {
+				const last = index === crumbs.length - 1;
+				const label = entry.id === view.rootRunId ? sessionTitle : entry.name;
+				return (
+					<React.Fragment key={entry.id}>
+						{index > 0 ? (
+							<span aria-hidden="true" className="shrink-0 text-subtle-foreground">
+								/
+							</span>
+						) : null}
+						{last ? (
+							<h2 aria-current="page" title={label} className="flex min-w-0 items-center gap-1.5 font-medium text-foreground">
+								<AgentMark name={entry.name} />
+								<span className="truncate">{label}</span>
+							</h2>
+						) : (
+							<button
+								type="button"
+								title={label}
+								onClick={() => onShowRun(entry.id)}
+								className={cn('min-w-0 truncate rounded-sm text-muted-foreground hover:text-foreground', index === 0 ? 'max-w-56' : 'max-w-40', focusRingClass)}
+							>
+								{label}
+							</button>
+						)}
+					</React.Fragment>
+				);
+			})}
+		</nav>
+	);
+}
+
+/**
+ * The session's header: its title (or the trail into the agent on screen) and branch, the agents still at work,
+ * the context in use, and the session menu, terminal and panel toggles. Deleting asks first, here.
+ */
+export function SessionHeader({
+	session,
+	view,
+	viewRunId,
+	branch,
+	others,
+	tokens,
+	contextWindow,
+	terminalOpen,
+	panelOpen,
+	onToggleTerminal,
+	onTogglePanel,
+	onShowRun,
+	onShowAgents,
+	onReview,
+	onExport,
+	onDelete
+}: {
+	session: LiveSession;
+	view: HarnessView;
+	viewRunId: string;
+	/** The session's branch, for an agent that doesn't name its own. */
+	branch: string;
+	/** Every agent the session started, at any depth. */
+	others: RunView[];
+	/** Context the agent on screen has used. */
+	tokens: number;
+	contextWindow: number;
+	terminalOpen: boolean;
+	panelOpen: boolean;
+	onToggleTerminal: () => void;
+	onTogglePanel: () => void;
+	onShowRun: (runId: string) => void;
+	onShowAgents: () => void;
+	onReview: () => void;
+	onExport: () => void;
+	onDelete: () => void;
+}) {
+	const [confirmDelete, setConfirmDelete] = React.useState(false);
+	const viewed = view.runs[viewRunId];
+	const viewingChild = viewRunId !== view.rootRunId;
+	// Counted as the Agents panel counts them, the session's own agent included, so the two always agree.
+	const working = [view.runs[view.rootRunId], ...others].filter(isWorking);
+	const shownBranch = viewed.workspace?.branch ?? branch;
+
+	// Headers are the panes' edge with the content below, and at 48px their rule runs straight across the surface.
+	return (
+		<div className="flex h-12 shrink-0 items-center gap-2 border-b border-border ps-5 pe-2.5">
+			<div className="flex min-w-0 flex-1 items-center gap-2">
+				{viewingChild ? (
+					<AgentTrail view={view} runId={viewRunId} sessionTitle={session.title} onShowRun={onShowRun} />
+				) : (
+					<h2 title={session.title} className="min-w-0 shrink text-sm font-medium text-foreground">
+						<SessionTitle session={session} />
+					</h2>
+				)}
+				{/* The branch yields to the title: it shows only on a wide column and truncates before the title does. */}
+				<span title={shownBranch} className="hidden max-w-[40%] min-w-0 shrink-[2] items-center gap-1 text-xs text-muted-foreground @3xl/session:flex">
+					<GitBranch aria-hidden="true" className="size-3.5 shrink-0" />
+					<span dir="ltr" className="min-w-0 truncate font-mono">
+						{shownBranch}
+					</span>
+					{(viewingChild ? viewed.workspace?.kind === 'worktree' : session.location === 'worktree') ? <span className="shrink-0">· worktree</span> : null}
+				</span>
+			</div>
+			{others.length > 0 && working.length > 0 ? (
+				// Agents still at work, wherever they sit in the session, with a way to each.
+				<DropdownMenu>
+					<DropdownMenuTrigger
+						aria-label={`${working.length} ${plural(working.length, { one: 'agent', other: 'agents' })} working`}
+						className={cn(
+							'flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground hover:bg-overlay-hover hover:text-foreground data-popup-open:bg-overlay-hover',
+							focusRingClass
+						)}
+					>
+						<AgentRing signal="running" />
+						<span className="tabular-nums">{working.length}</span>
+						<span className="hidden @lg/session:inline">working</span>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-72 max-w-[calc(100vw-2rem)]">
+						{working.map((entry) => (
+							<DropdownMenuItem key={entry.id} title={entry.task} onClick={() => onShowRun(entry.id)} className="gap-2">
+								<span className="grid size-4 shrink-0 place-items-center">
+									<AgentRing signal={runSignal(entry, view)} />
+								</span>
+								<span className="min-w-0 flex-1">
+									<span className="block truncate text-foreground">{entry.name}</span>
+									<span className="block truncate text-xs text-muted-foreground">{runStateLabel(entry, view)}</span>
+								</span>
+							</DropdownMenuItem>
+						))}
+						<DropdownMenuSeparator />
+						<DropdownMenuItem onClick={onShowAgents}>Show all agents</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			) : null}
+			<div className={cn('flex shrink-0 items-center gap-1.5 px-1 text-xs', tokens > contextWindow ? 'text-destructive' : 'text-muted-foreground')}>
+				<ContextRing usage={{ tokens, contextWindow, percent: (tokens / contextWindow) * 100 }} size={16} />
+				<span className="tabular-nums">
+					{formatCompact(tokens)}
+					<span className="hidden text-subtle-foreground @lg/session:inline"> / {formatCompact(contextWindow)}</span>
+				</span>
+			</div>
+			<div className="flex shrink-0 items-center gap-1">
+				<DropdownMenu>
+					<DropdownMenuTrigger aria-label="Session actions" title="Session actions" className={cn(iconButtonClass({ menu: true }), toolbarButtonClass)}>
+						<Ellipsis aria-hidden="true" className="size-3.5" />
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-48">
+						<DropdownMenuItem onClick={onReview}>Review changes</DropdownMenuItem>
+						<DropdownMenuItem onClick={onExport}>Export as Markdown</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem variant="destructive" onClick={() => setConfirmDelete(true)}>
+							Delete session…
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+				<TooltipIconButton
+					label={withShortcut(terminalOpen ? 'Hide terminal' : 'Show terminal', 'toggleTerminal')}
+					aria-pressed={terminalOpen}
+					onClick={onToggleTerminal}
+					className={cn(toolbarButtonClass, terminalOpen && 'text-foreground')}
+				>
+					<SquareTerminal aria-hidden="true" className="size-3.5" />
+				</TooltipIconButton>
+				<TooltipIconButton
+					label={withShortcut(panelOpen ? 'Hide side panel' : 'Show side panel', 'togglePanel')}
+					aria-pressed={panelOpen}
+					onClick={onTogglePanel}
+					className={cn(toolbarButtonClass, panelOpen && 'text-foreground')}
+				>
+					<PanelRight aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
+				</TooltipIconButton>
+			</div>
+			<AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete this session?</AlertDialogTitle>
+						<AlertDialogDescription>The conversation is removed. Changes the agent already made to files stay where they are.</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction className={buttonVariants({ variant: 'destructive', wrap: true })} onClick={onDelete}>
+							Delete session
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-layout.tsx b/packages/ui/src/components/coding-agent/session-layout.tsx
new file mode 100644
index 0000000..f0d788f
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-layout.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import type * as React from 'react';
+
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../resizable';
+import { splitHandleClass } from './session-surface';
+
+/** Chat, panel and terminal are columns of one surface; each fills its slot and the hairlines between them do the rest. */
+export const columnClass = 'flex h-full min-h-0 flex-col bg-background';
+
+/** The chat keeps at least this much height, so dragging the terminal up never pushes the composer out of view. */
+const CHAT_MIN_HEIGHT = 360;
+
+/**
+ * Where a session's chat, side panel and terminal sit. Wide, they're resizable columns with the terminal docked
+ * along the bottom; narrow, the panel takes the chat's place while it's open and the terminal keeps its own slot.
+ */
+export function SessionLayout({
+	narrow,
+	height,
+	chat,
+	panel,
+	terminal,
+	panelOpen,
+	terminalOpen
+}: {
+	narrow: boolean;
+	/** The session's height, which caps how tall the terminal may get. */
+	height: number;
+	chat: React.ReactNode;
+	panel: React.ReactNode;
+	terminal: React.ReactNode;
+	panelOpen: boolean;
+	terminalOpen: boolean;
+}) {
+	if (narrow) {
+		return (
+			<div className="flex h-full min-h-0 flex-col">
+				<div className="relative min-h-0 flex-1">
+					{chat}
+					{panelOpen ? <div className="absolute inset-0 z-10">{panel}</div> : null}
+				</div>
+				{terminalOpen ? <div className="h-[min(14rem,30%)] shrink-0 border-t border-border">{terminal}</div> : null}
+			</div>
+		);
+	}
+
+	const terminalMax = Number.isFinite(height) ? Math.max(15, Math.min(70, 100 - (CHAT_MIN_HEIGHT / height) * 100)) : 70;
+	return (
+		<ResizablePanelGroup direction="vertical" autoSaveId={undefined}>
+			<ResizablePanel id="main" order={1} minSize={30} defaultSize={terminalOpen ? 70 : 100}>
+				<ResizablePanelGroup direction="horizontal">
+					<ResizablePanel id="chat" order={1} minSize={30} defaultSize={panelOpen ? 50 : 100}>
+						{chat}
+					</ResizablePanel>
+					{panelOpen ? (
+						<>
+							<ResizableHandle className={splitHandleClass} />
+							<ResizablePanel id="panel" order={2} minSize={28} defaultSize={50}>
+								{panel}
+							</ResizablePanel>
+						</>
+					) : null}
+				</ResizablePanelGroup>
+			</ResizablePanel>
+			{terminalOpen ? (
+				<>
+					<ResizableHandle className={splitHandleClass} />
+					<ResizablePanel id="terminal" order={2} minSize={15} maxSize={terminalMax} defaultSize={Math.min(30, terminalMax)}>
+						{terminal}
+					</ResizablePanel>
+				</>
+			) : null}
+		</ResizablePanelGroup>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-sidebar.tsx b/packages/ui/src/components/coding-agent/session-sidebar.tsx
new file mode 100644
index 0000000..e8cf6e9
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-sidebar.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import { ChevronDown, LayoutGrid, type LucideIcon, PanelTop, Plus, Search } from 'lucide-react';
+import * as React from 'react';
+
+import { initials } from '../../lib/initials';
+import { formatCount } from '../../lib/intl';
+import { NavIcon, NavRow, NavSection, SidebarFrame } from '../workspace-kit/nav';
+import type { WorkspaceSidebarRenderProps } from '../workspace-kit/shell';
+import { AgentRing, isWaitingOnYou, statusSignal } from '../agents-builder/agent-status';
+import { useCodingAgent } from './coding-agent-context';
+import { SessionGlyph, sessionStatusLabel, SessionTitle } from './session-glyph';
+import { withShortcut } from './shortcuts';
+
+/** Sessions shown per project before "Show all"; the active one and any that need you always show. */
+const ROWS_PER_PROJECT = 8;
+
+/** Nav icons sit in the same 16px box as the session glyphs, so every label in the sidebar starts on one line. */
+function RowIcon({ icon, active }: { icon: LucideIcon; active?: boolean }) {
+	return (
+		<span className="grid size-4 shrink-0 place-items-center">
+			<NavIcon icon={icon} active={active} />
+		</span>
+	);
+}
+
+/**
+ * The sidebar layout's navigation: new session, home and search, then every session grouped by project with its live
+ * status, and a way back to tabs. Collapses to an icon rail like the other workspace templates.
+ */
+export function SessionSidebar({ mode, collapsed, onCollapsedChange, onNavigate }: WorkspaceSidebarRenderProps) {
+	const { data, sessions, activeId, activate, goHome, newSession, setLayout, openCommandMenu, project, viewRun, openRun } = useCodingAgent();
+	const [expanded, setExpanded] = React.useState<string[]>([]);
+	const go = (action: () => void) => () => {
+		action();
+		onNavigate();
+	};
+	const brandTile = (
+		<span aria-hidden="true" className="grid size-5 shrink-0 place-items-center rounded-md bg-foreground text-[0.6875rem] font-semibold text-background">
+			{initials(data.brand, { max: 1 })}
+		</span>
+	);
+
+	return (
+		<SidebarFrame
+			label="Sessions"
+			collapsed={collapsed}
+			onCollapsedChange={onCollapsedChange}
+			drawer={mode === 'drawer'}
+			onClose={onNavigate}
+			menu={
+				collapsed ? (
+					<span title={data.brand}>{brandTile}</span>
+				) : (
+					<span className="flex min-w-0 flex-1 items-center gap-2 px-1.5">
+						{brandTile}
+						<span dir="auto" title={data.brand} className="min-w-0 truncate text-sm font-medium text-foreground [text-align:match-parent]">
+							{data.brand}
+						</span>
+					</span>
+				)
+			}
+			footer={
+				<ul className="flex flex-col gap-0.5 px-2.5 pb-3">
+					<NavRow label="Show sessions as tabs" collapsed={collapsed} muted leading={<RowIcon icon={PanelTop} />} onClick={go(() => setLayout('tabs'))} />
+				</ul>
+			}
+		>
+			<NavSection collapsed={collapsed}>
+				<NavRow label={withShortcut('New session', 'newSession')} labelNode="New session" collapsed={collapsed} leading={<RowIcon icon={Plus} />} onClick={go(newSession)} />
+				<NavRow label="All sessions" collapsed={collapsed} active={activeId === null} leading={<RowIcon icon={LayoutGrid} active={activeId === null} />} onClick={go(goHome)} />
+				<NavRow label={withShortcut('Search commands', 'commandMenu')} labelNode="Search" collapsed={collapsed} leading={<RowIcon icon={Search} />} onClick={go(openCommandMenu)} />
+			</NavSection>
+			{data.projects.map((entry) => {
+				const rows = sessions.filter((session) => session.projectId === entry.id);
+				if (rows.length === 0) return null;
+				const all = expanded.includes(entry.id);
+				const shown = all
+					? rows
+					: rows.filter((session, index) => index < ROWS_PER_PROJECT || session.id === activeId || isWaitingOnYou(statusSignal(session)));
+				return (
+					<NavSection key={entry.id} title={entry.name} collapsed={collapsed}>
+						{shown.flatMap((session) => {
+							const status = sessionStatusLabel(session);
+							const viewing = session.id === activeId ? viewRun(session.id) : undefined;
+							// The agents a session started hang under it, a step in per level, while the rail is open.
+							const runs = collapsed
+								? []
+								: (session.runs ?? []).map((run) => (
+										<NavRow
+											key={`${session.id}:${run.id}`}
+											label={run.name}
+											collapsed={collapsed}
+											active={viewing === run.id}
+											muted={!isWaitingOnYou(run.status)}
+											leading={
+												<span className="grid size-4 shrink-0 place-items-center" style={{ marginInlineStart: `${run.depth * 14}px` }}>
+													<AgentRing signal={run.status} />
+												</span>
+											}
+											onClick={go(() => {
+												activate(session.id);
+												openRun(session.id, run.id);
+											})}
+										/>
+									));
+							return [
+								<NavRow
+									key={session.id}
+									label={session.title}
+									labelNode={<SessionTitle session={session} />}
+									collapsed={collapsed}
+									active={session.id === activeId && !viewing}
+									muted={!session.unread && !isWaitingOnYou(statusSignal(session))}
+									leading={<SessionGlyph session={session} projectName={project(session.projectId).name} />}
+									trailing={<span className="min-w-8 shrink-0 text-end text-xs text-subtle-foreground tabular-nums">{session.updatedLabel}</span>}
+									// The tooltip carries the whole title as well as the state, since the row may truncate it.
+									tip={
+										status ? (
+											<>
+												{session.title}
+												<span className="block text-muted-foreground">{status}</span>
+											</>
+										) : undefined
+									}
+									onClick={go(() => {
+										activate(session.id);
+										openRun(session.id, undefined);
+									})}
+								/>,
+								...runs
+							];
+						})}
+						{shown.length < rows.length ? (
+							<NavRow
+								label={`Show all ${formatCount(rows.length)} sessions in ${entry.name}`}
+								labelNode={`Show all ${formatCount(rows.length)}`}
+								collapsed={collapsed}
+								muted
+								leading={<RowIcon icon={ChevronDown} />}
+								onClick={() => setExpanded((current) => [...current, entry.id])}
+							/>
+						) : null}
+					</NavSection>
+				);
+			})}
+		</SidebarFrame>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-surface.ts b/packages/ui/src/components/coding-agent/session-surface.ts
new file mode 100644
index 0000000..71e6cc2
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-surface.ts
@@ -0,0 +1,50 @@
+import { cn } from '../../lib/utils';
+import { focusRingClass } from '../workspace-kit/primitives';
+import type { CodingAgentLayout } from './types';
+
+/**
+ * Where a session's surface sits. In the tabs layout it's one rounded card under the strip, inset 6px plus a 1px
+ * edge inside a frame drawn with `--radius-xl`, so its corners are that radius less 7px and stay concentric. In the
+ * sidebar layout it sits flush beside the sidebar, the way the other workspace templates lay out their content.
+ * Inside, chat, panel and terminal are columns of the one surface, joined by hairlines rather than gaps.
+ */
+export function frameClasses(layout: CodingAgentLayout) {
+	return layout === 'tabs'
+		? {
+				outer: 'p-1.5 pt-0',
+				// The edge is drawn as a ring in the border colour, with a short shadow lifting it off the canvas.
+				surface: 'overflow-hidden rounded-[calc(var(--radius-xl)-7px)] bg-background shadow-[0_0_0_1px_var(--border),0_1px_3px_-1px_rgb(0_0_0/0.06)]'
+			}
+		: { outer: '', surface: 'overflow-hidden bg-background' };
+}
+
+/**
+ * The hairline between two columns, which is also how you resize them. It stays a 1px line; on hover or drag it
+ * darkens a step and shows a short grip in its middle, and the grab area is 9px wide. Hover is instant.
+ */
+export const splitHandleClass = cn(
+	// Above both neighbours, so the whole grab area works from either side of the line.
+	'z-10 w-px bg-border hover:bg-foreground/20 data-[resize-handle-state=drag]:bg-foreground/25 focus-visible:bg-ring focus-visible:ring-0',
+	'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full',
+	'after:w-[9px] data-[panel-group-direction=vertical]:after:h-[9px]',
+	"before:pointer-events-none before:absolute before:top-1/2 before:left-1/2 before:z-10 before:h-6 before:w-[3px] before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground/45 before:opacity-0 before:content-['']",
+	'data-[panel-group-direction=vertical]:before:h-[3px] data-[panel-group-direction=vertical]:before:w-6',
+	'hover:before:opacity-100 data-[resize-handle-state=drag]:before:opacity-100 focus-visible:before:opacity-100'
+);
+
+/** Toolbar buttons sit 4px apart, so their hit areas grow up and down but only 2px sideways and never overlap. */
+export const toolbarButtonClass = 'before:-inset-x-0.5';
+
+/**
+ * A tab's close button: hidden until the tab is hovered, focused or active, and only clickable then, so a stray
+ * click on a resting tab opens it instead of closing it. The hit area grows to 32px.
+ */
+export const tabCloseClass = cn(
+	"absolute end-1 top-1/2 z-[1] grid size-5 -translate-y-1/2 place-items-center rounded-[4px] text-muted-foreground before:absolute before:-inset-1.5 before:content-['']",
+	'pointer-events-none opacity-0 hover:bg-overlay-hover hover:text-foreground',
+	'group-hover/tab:pointer-events-auto group-hover/tab:opacity-100 group-focus-within/tab:pointer-events-auto group-focus-within/tab:opacity-100 group-data-[active]/tab:pointer-events-auto group-data-[active]/tab:opacity-100',
+	// With no hover to reveal it, a touch screen shows it on every tab.
+	'pointer-coarse:pointer-events-auto pointer-coarse:opacity-100',
+	focusRingClass
+);
+
diff --git a/packages/ui/src/components/coding-agent/session-tabs.tsx b/packages/ui/src/components/coding-agent/session-tabs.tsx
new file mode 100644
index 0000000..0453901
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-tabs.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { History, LayoutGrid, PanelLeft, Plus, Search, X } from 'lucide-react';
+import * as React from 'react';
+
+import { formatCount, plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { isWaitingOnYou, statusSignal } from '../agents-builder/agent-status';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../dropdown-menu';
+import { Tabs, TabsList, TabsTrigger } from '../tabs';
+import { MiddleTruncate } from '../workspace-kit/middle-truncate';
+import { iconButtonClass, TooltipIconButton } from '../workspace-kit/primitives';
+import { type LiveSession, useCodingAgent } from './coding-agent-context';
+import { SessionGlyph, sessionStatusLabel, SessionTitle } from './session-glyph';
+import { withShortcut } from './shortcuts';
+import { tabCloseClass, toolbarButtonClass } from './session-surface';
+
+
+function RenameField({ session, onDone }: { session: LiveSession; onDone: () => void }) {
+	const { patchSession, emit } = useCodingAgent();
+	const [value, setValue] = React.useState(session.title);
+	const commit = () => {
+		const title = value.trim();
+		if (title && title !== session.title) {
+			patchSession(session.id, { title });
+			emit({ type: 'rename-session', sessionId: session.id, title });
+		}
+		onDone();
+	};
+	return (
+		<input
+			autoFocus
+			dir="auto"
+			aria-label="Session title"
+			value={value}
+			onChange={(event) => setValue(event.target.value)}
+			onFocus={(event) => event.target.select()}
+			onBlur={commit}
+			onKeyDown={(event) => {
+				if (event.key === 'Enter') commit();
+				if (event.key === 'Escape') onDone();
+			}}
+			className="absolute inset-y-0.5 start-7 end-1 z-10 min-w-0 rounded-[5px] bg-background px-1.5 text-[0.8125rem] text-foreground shadow-xs outline-none ring-1 ring-ring/60"
+		/>
+	);
+}
+
+function SessionTab({ session, active }: { session: LiveSession; active: boolean }) {
+	const { project, closeSession, renaming, setRenaming } = useCodingAgent();
+	const status = sessionStatusLabel(session);
+	return (
+		<div data-active={active || undefined} className="group/tab relative flex shrink-0">
+			<TabsTrigger
+				value={session.id}
+				title={status ? `${session.title} · ${status}` : session.title}
+				aria-label={status ? `${session.title}, ${status}` : session.title}
+				onDoubleClick={() => setRenaming(session.id)}
+				onKeyDown={(event) => {
+					if (event.key === 'F2') {
+						event.preventDefault();
+						setRenaming(session.id);
+					} else if (event.key === 'Delete' || event.key === 'Backspace') {
+						// The close button stays out of the tab order, so the keyboard closes a tab from the tab itself.
+						event.preventDefault();
+						closeSession(session.id);
+					}
+				}}
+				// Middle-click closes, as in any tabbed app; holding the button down must not start autoscroll first.
+				onMouseDown={(event) => {
+					if (event.button === 1) event.preventDefault();
+				}}
+				onAuxClick={(event) => {
+					if (event.button === 1) closeSession(session.id);
+				}}
+				className={cn(
+					'h-7 min-h-7 w-48 justify-start gap-2 ps-2 pe-7 text-[0.8125rem] font-normal text-muted-foreground @max-md/ws:w-36',
+					'hover:text-foreground data-[active]:text-foreground pointer-coarse:min-h-9'
+				)}
+			>
+				<SessionGlyph session={session} projectName={project(session.projectId).name} />
+				<SessionTitle session={session} />
+			</TabsTrigger>
+			{renaming === session.id ? <RenameField session={session} onDone={() => setRenaming(null)} /> : null}
+			<button type="button" tabIndex={-1} aria-label={`Close ${session.title}`} onClick={() => closeSession(session.id)} className={tabCloseClass}>
+				<X aria-hidden="true" className="size-3.5" />
+			</button>
+		</div>
+	);
+}
+
+/**
+ * The window strip: a home toggle, one tab per open session with its live status, a new-session button, the
+ * recently closed menu, and the layout switch. Tabs scroll sideways with faded edges once they overflow, and a
+ * vertical wheel scrolls them too.
+ */
+export function SessionTabs() {
+	const { openIds, activeId, activate, goHome, newSession, recentlyClosed, reopenClosed, session, setLayout, openCommandMenu, project } =
+		useCodingAgent();
+	const open = openIds.map(session).filter((entry): entry is LiveSession => Boolean(entry));
+	const closed = recentlyClosed.map(session).filter((entry): entry is LiveSession => Boolean(entry));
+	const waiting = open.filter((entry) => isWaitingOnYou(statusSignal(entry))).length;
+
+	return (
+		<div role="toolbar" aria-label="Sessions" className="flex h-10 shrink-0 items-center gap-1 px-2">
+			<TooltipIconButton
+				label={waiting ? `All sessions (${formatCount(waiting)} ${plural(waiting, { one: 'needs', other: 'need' })} you)` : 'All sessions'}
+				aria-pressed={activeId === null}
+				onClick={goHome}
+				className={cn(toolbarButtonClass, activeId === null && 'bg-overlay-hover text-foreground')}
+			>
+				<LayoutGrid aria-hidden="true" className="size-3.5" />
+				{/* A session waiting on you may be scrolled out of the strip; this keeps it from going unnoticed. */}
+				{waiting ? <span aria-hidden="true" className="absolute end-1 top-1 size-1.5 rounded-full bg-warning ring-2 ring-sidebar" /> : null}
+			</TooltipIconButton>
+			<span aria-hidden="true" className="mx-1 h-4 w-px shrink-0 bg-border" />
+			<Tabs value={activeId ?? ''} onValueChange={(value) => value && activate(String(value))} className="min-w-0 shrink gap-0">
+				<TabsList
+					aria-label="Open sessions"
+					className="h-8 gap-0.5 rounded-lg bg-transparent p-0.5"
+					// A mouse wheel scrolls vertically; the strip turns that into sideways movement.
+					onWheel={(event) => {
+						if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) event.currentTarget.scrollLeft += event.deltaY;
+					}}
+				>
+					{open.map((entry) => (
+						<SessionTab key={entry.id} session={entry} active={entry.id === activeId} />
+					))}
+				</TabsList>
+			</Tabs>
+			<TooltipIconButton label={withShortcut('New session', 'newSession')} onClick={newSession} className={toolbarButtonClass}>
+				<Plus aria-hidden="true" className="size-3.5" />
+			</TooltipIconButton>
+			{closed.length > 0 ? (
+				<DropdownMenu>
+					<DropdownMenuTrigger
+						aria-label="Recently closed"
+						title="Recently closed"
+						className={cn(iconButtonClass({ menu: true }), toolbarButtonClass)}
+					>
+						<History aria-hidden="true" className="size-3.5" />
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="start" className="w-72 max-w-[calc(100vw-2rem)]">
+						<DropdownMenuLabel>Recently closed</DropdownMenuLabel>
+						{closed.map((entry) => (
+							<DropdownMenuItem key={entry.id} title={entry.title} onClick={() => reopenClosed(entry.id)}>
+								<SessionGlyph session={entry} projectName={project(entry.projectId).name} />
+								{/* Titles that share a long start differ at the end, so the end stays visible. */}
+								<MiddleTruncate text={entry.title} tail={14} title={false} className="flex-1" />
+							</DropdownMenuItem>
+						))}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			) : null}
+			<div className="min-w-2 flex-1" />
+			<TooltipIconButton label={withShortcut('Search commands', 'commandMenu')} onClick={openCommandMenu} className={toolbarButtonClass}>
+				<Search aria-hidden="true" className="size-3.5" />
+			</TooltipIconButton>
+			<TooltipIconButton label="Show sessions in a sidebar" onClick={() => setLayout('sidebar')} className={toolbarButtonClass}>
+				<PanelLeft aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
+			</TooltipIconButton>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-timeline.tsx b/packages/ui/src/components/coding-agent/session-timeline.tsx
new file mode 100644
index 0000000..88875f6
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-timeline.tsx
@@ -0,0 +1,552 @@
+'use client';
+
+import { ArrowRight, GitCompareArrows, Split } from 'lucide-react';
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+
+import { plural } from '../../lib/intl';
+import { AgentRing } from '../agents-builder/agent-status';
+import { type AskAnswer, AskCard } from '../ai/ask-card';
+import { formatCompact } from '../ai/context-ring';
+import { FeedbackBar } from '../ai/feedback-bar';
+import { InlineDiff } from '../ai/inline-diff';
+import { Message, MessageContent } from '../ai/message';
+import { Reasoning } from '../ai/reasoning';
+import { SystemMessage } from '../ai/system-message';
+import { ThinkingStatus } from '../ai/thinking-status';
+import { Tool, ToolGroup } from '../ai/tool';
+import type { ToolStatus } from '../ai/types';
+import { Button } from '../button';
+import { useLatest } from '../workspace-kit/use-latest';
+import { displayUrl } from './browser-panel';
+import { type HarnessView, type RunView, runTokens, TASK_TURN_ID, type TimelineItem } from './harness';
+import { AgentMark, MessageRoute, nameOf, plainText, recipientNames, runStateLabel } from './run-presentation';
+import type { SessionBeatKind } from './types';
+import { revealDuration, type SessionHarness } from './use-harness';
+
+const TOOL_NAME: Record<string, string> = {
+	read: 'Read',
+	grep: 'Grep',
+	glob: 'Glob',
+	list: 'List',
+	webfetch: 'Fetch',
+	websearch: 'Search'
+};
+
+/** Lines of command output shown in the transcript: the end, where the result is. */
+const SHELL_TAIL = 40;
+
+const DECISION_LABEL = { once: 'Allowed once', always: 'Always allowed', deny: 'Denied' } as const;
+
+/** The live line under the timeline names what the agent is about to do. */
+const UPCOMING_LABEL: Partial<Record<SessionBeatKind, string>> = {
+	reasoning: 'Thinking',
+	tools: 'Exploring',
+	edit: 'Making edits',
+	shell: 'Running commands',
+	browse: 'Opening the browser',
+	say: 'Writing',
+	plan: 'Planning',
+	spawn: 'Starting agents',
+	message: 'Writing to another agent',
+	route: 'Choosing an agent'
+};
+
+/** How a run's state reads in a tool card's status slot. */
+function toolStatus(run: RunView): ToolStatus {
+	if (run.status === 'done' || run.status === 'idle') return 'success';
+	if (run.status === 'failed') return 'error';
+	if (run.status === 'cancelled') return 'aborted';
+	if (run.status === 'queued') return 'pending';
+	return 'running';
+}
+
+/** Holds `live` true for `ms` after mount, so a beat that just landed can play out its reveal. */
+function useLiveFor(live: boolean, ms: number) {
+	const [active, setActive] = React.useState(live);
+	React.useEffect(() => {
+		if (!live) return;
+		const timer = window.setTimeout(() => setActive(false), ms);
+		return () => window.clearTimeout(timer);
+	}, [live, ms]);
+	return active;
+}
+
+/** Streams a reply in over its reveal time, rendering markdown as it grows, as a live token stream would. */
+function Say({ text, live }: { text: string; live: boolean }) {
+	const duration = revealDuration(text);
+	const [shown, setShown] = React.useState(live ? 0 : text.length);
+	React.useEffect(() => {
+		if (!live) return;
+		const start = performance.now();
+		let frame = 0;
+		const tick = (now: number) => {
+			const share = Math.min((now - start) / duration, 1);
+			setShown(Math.round(text.length * share));
+			if (share < 1) frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [duration, live, text]);
+	return (
+		<Message from="assistant">
+			<MessageContent markdown streaming={shown < text.length}>
+				{text.slice(0, shown)}
+			</MessageContent>
+		</Message>
+	);
+}
+
+function Thought({ text, durationMs, live }: { text: string; durationMs: number; live: boolean }) {
+	const streaming = useLiveFor(live, durationMs);
+	return <Reasoning content={text} isStreaming={streaming} durationMs={streaming ? null : durationMs} markdown />;
+}
+
+type Handlers = {
+	harness: SessionHarness;
+	runId: string;
+	onReview: (path?: string) => void;
+	onBrowse: (url: string) => void;
+	onOpenRun: (runId: string) => void;
+};
+
+/** Callbacks a row needs, kept stable for the life of the transcript so memoized rows skip unrelated updates. */
+type RowActions = {
+	review: (path?: string) => void;
+	browse: (url: string) => void;
+	openRun: (runId: string) => void;
+	stop: (runId: string) => void;
+	retry: () => void;
+	answer: (requestId: string, answer: AskAnswer) => void;
+};
+
+/**
+ * One step of the transcript. Memoized: the harness keeps an item's identity until it changes, so a new event
+ * re-renders only the rows it touched, not hundreds of earlier ones.
+ */
+const BeatRow = React.memo(function BeatRow({
+	item,
+	live,
+	final,
+	retryable,
+	actions
+}: {
+	item: Extract<TimelineItem, { type: 'beat' }>;
+	/** Landed since this transcript opened, so it plays its reveal. */
+	live: boolean;
+	/** The last reply of a finished turn, which gets the copy and feedback actions. */
+	final: boolean;
+	/** The run failed and can be retried from here. */
+	retryable: boolean;
+	actions: RowActions;
+}) {
+	return (
+		// The id anchors the turn rail's jumps; the margin keeps a jumped-to message clear of the top edge.
+		// Rows out of view skip layout and paint, sized from their last render, so a long thread scrolls smoothly.
+		<div
+			data-item-id={item.id}
+			className="min-w-0 scroll-mt-6 animate-[ai-fade-up_var(--duration-slow)_var(--ease-out)_both] [contain-intrinsic-size:auto_3rem] [content-visibility:auto] motion-reduce:animate-none"
+		>
+			<BeatBody item={item} live={live} retryable={retryable} actions={actions} />
+			{final && item.beat.kind === 'say' ? <FeedbackBar className="mt-1" copyText={item.beat.text} showRegenerate={false} /> : null}
+		</div>
+	);
+});
+
+function BeatBody({ item, live, retryable, actions }: { item: Extract<TimelineItem, { type: 'beat' }>; live: boolean; retryable: boolean; actions: RowActions }) {
+	const beat = item.beat;
+	switch (beat.kind) {
+		case 'user':
+			return (
+				<Message from="user">
+					<MessageContent>{beat.text}</MessageContent>
+				</Message>
+			);
+		case 'reasoning':
+			return <Thought text={beat.text} durationMs={beat.durationMs} live={live} />;
+		case 'say':
+			return <Say text={beat.text} live={live} />;
+		case 'tools': {
+			const names = [...new Set(beat.calls.map((call) => TOOL_NAME[call.tool]))].join(', ');
+			return (
+				<ToolGroup
+					defaultOpen={false}
+					className="max-w-none"
+					label={
+						<>
+							{item.running ? 'Running' : 'Used'} {beat.calls.length} <span className="font-medium text-foreground">{names}</span>
+						</>
+					}
+				>
+					{beat.calls.map((call, index) => (
+						<Tool key={index} name={TOOL_NAME[call.tool]} summary={call.target} status={item.running ? 'running' : 'success'} />
+					))}
+				</ToolGroup>
+			);
+		}
+		case 'edit': {
+			const created = item.before === null || item.before === undefined;
+			// The inline diff names the file and counts the lines, so the row doesn't repeat them.
+			return (
+				<Tool name={created ? 'Create' : 'Edit'} summary={beat.path} status="success">
+					<InlineDiff source={{ before: item.before ?? '', after: beat.after, fileName: beat.path }} maxLines={14} />
+					<Button size="xs" variant="ghost" className="-ms-2 text-muted-foreground" onClick={() => actions.review(beat.path)}>
+						<GitCompareArrows aria-hidden="true" />
+						Open in Files changed
+					</Button>
+				</Tool>
+			);
+		}
+		case 'shell': {
+			const lines = beat.output.replace(/\n+$/, '').split('\n');
+			const earlier = Math.max(lines.length - SHELL_TAIL, 0);
+			// Output can run to hundreds of lines; the end is where a failure says what went wrong, so that's what shows.
+			const output = beat.output
+				? earlier
+					? [`… ${earlier} earlier ${plural(earlier, { one: 'line', other: 'lines' })}`, ...lines.slice(earlier)].join('\n')
+					: lines.join('\n')
+				: undefined;
+			return (
+				<Tool
+					variant="card"
+					name="Shell"
+					summary={beat.command}
+					status={item.running ? 'running' : beat.exitCode ? 'error' : 'success'}
+					output={item.running ? undefined : output}
+					errorText={!item.running && beat.exitCode ? `Exited with code ${beat.exitCode}` : undefined}
+					defaultOpen={Boolean(beat.exitCode)}
+				>
+					<code dir="ltr" className="block text-start font-mono text-[0.75rem] whitespace-pre-wrap text-foreground [overflow-wrap:anywhere]">
+						<span aria-hidden="true" className="text-subtle-foreground select-none">
+							${' '}
+						</span>
+						{beat.command}
+					</code>
+				</Tool>
+			);
+		}
+		case 'browse':
+			return (
+				<Tool name="Browser" summary={displayUrl(beat.url)} status="success">
+					<Button size="xs" variant="ghost" className="-ms-2 text-muted-foreground" onClick={() => actions.browse(beat.url)}>
+						Show in the browser panel
+					</Button>
+				</Tool>
+			);
+		case 'notice':
+			return <p className="max-w-prose text-xs text-pretty text-muted-foreground [overflow-wrap:anywhere]">{beat.text}</p>;
+		case 'error': {
+			return (
+				<SystemMessage variant="destructive" title={beat.title}>
+					<p className="[overflow-wrap:anywhere]">{beat.text}</p>
+					{retryable ? (
+						<Button size="xs" variant="outline" className="mt-2" onClick={actions.retry}>
+							Retry
+						</Button>
+					) : null}
+				</SystemMessage>
+			);
+		}
+	}
+}
+
+/**
+ * A sub-agent the run started, where it started it: the agent, its task, what it's doing or what it found, and a
+ * way into its own transcript.
+ */
+const SpawnCard = React.memo(function SpawnCard({ child, stateLabel, actions }: { child: RunView; stateLabel: string; actions: RowActions }) {
+	const status = toolStatus(child);
+	const live = status === 'running' || status === 'pending';
+	const detail = live ? child.lastTool : child.summary && plainText(child.summary);
+	// A card opens if its agent was working when it appeared; after that it stays as you leave it.
+	const [openAtFirst] = React.useState(live);
+	return (
+		<Tool variant="card" name={child.name} summary={child.task} status={status} defaultOpen={openAtFirst}>
+			<div className="flex flex-col gap-2">
+				<p className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted-foreground">
+					<span>{stateLabel}</span>
+					{child.kind ? <span>· {child.kind}</span> : null}
+					{child.workspace?.branch ? <span className="font-mono">· {child.workspace.branch}</span> : null}
+					<span className="tabular-nums">· {formatCompact(runTokens(child))} tokens</span>
+					{child.background ? <span>· background</span> : null}
+				</p>
+				{detail ? <p className="line-clamp-3 text-[0.8125rem] text-pretty text-foreground [overflow-wrap:anywhere]">{detail}</p> : null}
+				<div className="-ms-2 flex flex-wrap gap-1">
+					<Button size="xs" variant="ghost" className="text-muted-foreground" onClick={() => actions.openRun(child.id)}>
+						Open {child.name}
+						<ArrowRight aria-hidden="true" className="rtl:-scale-x-100" />
+					</Button>
+					{live && child.capabilities?.stop !== false ? (
+						<Button size="xs" variant="ghost" className="text-muted-foreground" onClick={() => actions.stop(child.id)}>
+							Stop
+						</Button>
+					) : null}
+				</div>
+			</div>
+		</Tool>
+	);
+});
+
+/** Where a parent picks its workers' results back up: one line per worker with what it reported. */
+function FanIn({ runIds, view, onOpenRun }: { runIds: string[]; view: HarnessView; onOpenRun: (runId: string) => void }) {
+	const runs = runIds.map((id) => view.runs[id]).filter((run): run is RunView => Boolean(run));
+	return (
+		<ToolGroup
+			className="max-w-none"
+			defaultOpen
+			label={
+				<>
+					Results from <span className="tabular-nums">{runs.length}</span> {plural(runs.length, { one: 'agent', other: 'agents' })}
+				</>
+			}
+		>
+			{runs.map((run) => (
+				<button
+					key={run.id}
+					type="button"
+					onClick={() => onOpenRun(run.id)}
+					className="-mx-1 flex min-h-8 items-start gap-2 rounded-md px-1 py-1 text-start text-[0.8125rem] hover:bg-accent"
+				>
+					<AgentMark name={run.name} className="mt-0.5" />
+					<span className="min-w-0 flex-1">
+						<span className="font-medium text-foreground">{run.name}</span>{' '}
+						<span className="text-muted-foreground [overflow-wrap:anywhere]">{run.summary ? plainText(run.summary) : runStateLabel(run, view)}</span>
+					</span>
+				</button>
+			))}
+		</ToolGroup>
+	);
+}
+
+const PROTOCOL_LABEL = { 'plan-approval': 'Plan for approval', shutdown: 'Asks to wrap up', steer: 'Steer', result: 'Result', text: '' } as const;
+
+/** A message between agents, or from you to one: who to whom, then what was said. */
+const AgentMessage = React.memo(function AgentMessage({ item, from, to }: { item: Extract<TimelineItem, { type: 'message' }>; from: string; to: string }) {
+	const label = PROTOCOL_LABEL[item.protocol];
+	return (
+		<div className="flex flex-col gap-1.5">
+			<MessageRoute from={from} to={to} label={label} />
+			<div className="ms-6 rounded-lg bg-muted/50 px-3 py-2">
+				<MessageContent markdown>{item.text}</MessageContent>
+			</div>
+		</div>
+	);
+});
+
+/** The last reply of each finished turn, which gets the copy and feedback actions. */
+function settledReplies(items: TimelineItem[], running: boolean) {
+	const finals = new Set<string>();
+	let lastSay: string | null = null;
+	for (const item of items) {
+		if (item.type === 'beat' && item.beat.kind === 'user') {
+			if (lastSay) finals.add(lastSay);
+			lastSay = null;
+		} else if (item.type === 'beat' && item.beat.kind === 'say') {
+			lastSay = item.id;
+		}
+	}
+	if (lastSay && !running) finals.add(lastSay);
+	return finals;
+}
+
+/** What the live status line says: the step in progress if there is one, else the one about to start. */
+function statusLabel(run: RunView, upcoming: SessionBeatKind | undefined, view: HarnessView) {
+	if (run.status === 'waiting' && run.waitingOn?.kind === 'agent') return runStateLabel(run, view);
+	for (let index = run.items.length - 1; index >= 0; index -= 1) {
+		const item = run.items[index];
+		if (item.type === 'beat' && item.running) return UPCOMING_LABEL[item.beat.kind] ?? 'Working';
+	}
+	return UPCOMING_LABEL[upcoming ?? 'say'] ?? 'Working';
+}
+
+/** Rows a transcript renders when it opens, and how many more it adds each time you scroll near the top. */
+const HISTORY_CHUNK = 120;
+
+export type TimelineHandle = {
+	/** Renders history down to the row with this id if it isn't yet, and returns its element. */
+	reveal: (id: string) => HTMLElement | null;
+};
+
+/**
+ * One run's transcript, rendered entirely from AI kit parts: messages, reasoning, tool groups, edits with inline
+ * diffs, commands, questions, sub-agent cards and their results, messages between agents, handoffs, phases, and a
+ * summary of what each turn changed.
+ */
+export function SessionTimeline({
+	harness,
+	runId,
+	onReview,
+	onBrowse,
+	onOpenRun,
+	onAnswered,
+	scroller,
+	handle
+}: Handlers & {
+	onAnswered: () => void;
+	/** The transcript's scroller, which earlier history loads against as you scroll up. */
+	scroller: () => HTMLElement | null;
+	handle?: React.Ref<TimelineHandle>;
+}) {
+	const view = harness.view;
+	const run = view.runs[runId];
+	// Steps already in the transcript when it opens are history: they don't replay their reveal when you come back.
+	const [settledBefore] = React.useState(() => run?.items.length ?? 0);
+	// A long thread opens on its latest rows; earlier ones render in chunks as you scroll up, so opening it stays quick.
+	const [renderFrom, setRenderFrom] = React.useState(() => Math.max(0, (run?.items.length ?? 0) - HISTORY_CHUNK));
+	const root = React.useRef<HTMLDivElement>(null);
+	const sentinel = React.useRef<HTMLDivElement>(null);
+	const items = run?.items;
+	React.useImperativeHandle(
+		handle,
+		() => ({
+			reveal: (id) => {
+				const index = items?.findIndex((item) => item.id === id) ?? -1;
+				if (index >= 0 && index < renderFrom) flushSync(() => setRenderFrom(Math.max(0, index - 8)));
+				return root.current?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(id)}"]`) ?? null;
+			}
+		}),
+		[items, renderFrom]
+	);
+	React.useEffect(() => {
+		const node = sentinel.current;
+		if (!node || renderFrom === 0) return;
+		if (typeof IntersectionObserver === 'undefined') {
+			setRenderFrom(0);
+			return;
+		}
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				// The browser keeps the rows you're reading in place as earlier ones are added above them.
+				if (entry?.isIntersecting) setRenderFrom((from) => Math.max(0, from - HISTORY_CHUNK));
+			},
+			{ root: scroller(), rootMargin: '1200px 0px 0px 0px' }
+		);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [renderFrom, scroller]);
+	// The rows get callbacks that never change, so they can skip re-rendering; these read the newest props when called.
+	const latest = useLatest({ harness, runId, onReview, onBrowse, onOpenRun, onAnswered });
+	const actions = React.useMemo<RowActions>(
+		() => ({
+			review: (path) => latest.current.onReview(path),
+			browse: (url) => latest.current.onBrowse(url),
+			openRun: (id) => latest.current.onOpenRun(id),
+			stop: (id) => latest.current.harness.stop(id),
+			retry: () => latest.current.harness.retry(latest.current.runId),
+			answer: (requestId, answer) => {
+				latest.current.harness.answer(requestId, answer);
+				latest.current.onAnswered();
+			}
+		}),
+		[latest]
+	);
+	if (!run) return null;
+	const busy = run.status === 'running' || (run.status === 'waiting' && run.waitingOn?.kind === 'agent');
+	const lastIndex = run.items.length - 1;
+	const last = run.items[lastIndex];
+	const isLive = (item: TimelineItem, index: number) => item.type === 'beat' && item.live && index >= settledBefore;
+	// A reply or thought that is still playing speaks for itself, so the live status line steps aside.
+	const playing = last?.type === 'beat' && isLive(last, lastIndex) && (last.beat.kind === 'say' || last.beat.kind === 'reasoning');
+	const finals = settledReplies(run.items, busy);
+	const parent = run.parentRunId ? view.runs[run.parentRunId] : undefined;
+	const retryable = run.status === 'failed';
+
+	return (
+		<div ref={root} className="flex flex-col gap-3">
+			{renderFrom > 0 ? <div ref={sentinel} aria-hidden="true" className="h-px" /> : null}
+			{parent && run.task && renderFrom === 0 ? (
+				// A child's transcript opens with what it was asked to do, which is also its first turn on the rail.
+				<Message from="user" data-item-id={TASK_TURN_ID} className="scroll-mt-6">
+					<MessageContent>
+						<span className="mb-1 block text-xs text-muted-foreground">Task from {parent.name}</span>
+						{run.task}
+					</MessageContent>
+				</Message>
+			) : null}
+			{run.items.map((item, index) => {
+				if (index < renderFrom) return null;
+				if (item.type === 'beat') {
+					return (
+						<BeatRow
+							key={item.id}
+							item={item}
+							live={isLive(item, index)}
+							final={finals.has(item.id)}
+							retryable={item.beat.kind === 'error' && retryable}
+							actions={actions}
+						/>
+					);
+				}
+				if (item.type === 'spawn') {
+					const child = view.runs[item.runId];
+					return child ? <SpawnCard key={item.id} child={child} stateLabel={runStateLabel(child, view)} actions={actions} /> : null;
+				}
+				if (item.type === 'fan-in') return <FanIn key={item.id} runIds={item.runIds} view={view} onOpenRun={actions.openRun} />;
+				if (item.type === 'message') {
+					return (
+						<AgentMessage
+							key={item.id}
+							item={item}
+							from={nameOf(view, item.from)}
+							to={recipientNames(view, item.to)}
+						/>
+					);
+				}
+				if (item.type === 'handoff') {
+					return (
+						<p key={item.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+							<Split aria-hidden="true" className="size-3.5 shrink-0" />
+							<span>
+								Control passed to <span className="font-medium text-foreground">{nameOf(view, item.to)}</span>
+								{item.reason ? ` · ${item.reason}` : ''}
+							</span>
+						</p>
+					);
+				}
+				if (item.type === 'route') return <Tool key={item.id} name={`Chose ${nameOf(view, item.to)}`} summary={item.reason} status="success" />;
+				if (item.type === 'phase') {
+					return (
+						<div key={item.id} className="flex items-center gap-2 pt-2 text-xs font-medium text-muted-foreground">
+							<AgentRing signal={item.status === 'running' ? 'running' : 'done'} />
+							<span className="text-foreground">{item.name}</span>
+							<span aria-hidden="true" className="h-px flex-1 bg-border" />
+						</div>
+					);
+				}
+				if (item.type === 'permission') {
+					// A pending request waits in the dock above the composer; once decided it leaves a line here.
+					if (!item.decision) return null;
+					return <Tool key={item.id} name={DECISION_LABEL[item.decision]} summary={item.beat.command} status={item.decision === 'deny' ? 'aborted' : 'success'} />;
+				}
+				if (item.type === 'question') {
+					return (
+						<AskCard
+							key={item.id}
+							eyebrow={runId === view.rootRunId ? 'The agent has a question' : `${run.name} has a question`}
+							questions={item.beat.questions}
+							answer={item.answer}
+							onSubmit={(choices) => actions.answer(item.requestId, { choices })}
+							onSkip={() => actions.answer(item.requestId, { skipped: true })}
+						/>
+					);
+				}
+				return (
+					<div key={item.id}>
+						<Button size="xs" variant="outline" className="text-muted-foreground" onClick={() => actions.review(item.paths[0])}>
+							<GitCompareArrows aria-hidden="true" />
+							<span>
+								<span className="tabular-nums">{item.paths.length}</span> {plural(item.paths.length, { one: 'file', other: 'files' })} changed
+							</span>
+							{item.additions ? <span className="font-mono text-success tabular-nums">+{item.additions}</span> : null}
+							{item.deletions ? <span className="font-mono text-destructive tabular-nums">−{item.deletions}</span> : null}
+						</Button>
+					</div>
+				);
+			})}
+			{busy && !playing ? (
+				// One status line per run: its clock keeps counting as the label moves from step to step.
+				<ThinkingStatus label={statusLabel(run, harness.upcoming(runId), view)} tokens={runTokens(run)} tokensPerTick={0} className="px-0" />
+			) : null}
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/session-view.tsx b/packages/ui/src/components/coding-agent/session-view.tsx
new file mode 100644
index 0000000..3b64e69
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/session-view.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+import * as React from 'react';
+
+import { useMergedRefs } from '../../lib/compose-refs';
+import { cn } from '../../lib/utils';
+import { ChatContainer, ChatContainerContent } from '../ai/chat-container';
+import type { ModelSelection } from '../ai/model-selector';
+import { PlanTracker } from '../ai/plan-tracker';
+import { ScrollButton } from '../ai/scroll-button';
+import { Button } from '../button';
+import { useElementSize, useScrollbarInset } from '../workspace-kit/use-element-size';
+import { AgentsPanel, TasksPanel } from './agents-panel';
+import { useColorScheme } from './code-surface-theme';
+import { type LiveSession, type SessionHandle, useSessionShell } from './coding-agent-context';
+import { demoShell } from './demo-shell';
+import { FilePickerDialog } from './file-picker-dialog';
+import { descendants, runSignal, runTokens, sessionChecks } from './harness';
+import { RequestDock } from './request-dock';
+import { ReviewPanel } from './review-panel';
+import { nameOf } from './run-presentation';
+import { SessionComposer } from './session-composer';
+import { SessionHeader } from './session-header';
+import { columnClass, SessionLayout } from './session-layout';
+import { frameClasses } from './session-surface';
+import { SessionTimeline, type TimelineHandle } from './session-timeline';
+import { SidePanel, type SidePanelHandle } from './side-panel';
+import { TerminalPanel } from './terminal-panel';
+import { TurnRail } from './turn-rail';
+import { useDraftContext } from './use-draft-context';
+import { isHosted, useHarness } from './use-harness';
+import { usePanelTabs } from './use-panel-tabs';
+
+/** Below this width the chat and the side panel take turns instead of sitting side by side. */
+const SPLIT_MIN_WIDTH = 760;
+
+/**
+ * One session: the chat column (header, transcript, docks, composer), a resizable side panel with review, file and
+ * browser tabs, and a terminal dock along the bottom. Every session in the tab strip stays mounted, so background
+ * runs keep playing and report their status to the shell.
+ */
+export const SessionView = React.memo(function SessionView({
+	session,
+	active,
+	viewRunId: requested,
+	defaultPanelOpen,
+	defaultTerminalOpen
+}: {
+	session: LiveSession;
+	active: boolean;
+	/** The agent on screen, when it isn't the session's own. */
+	viewRunId?: string;
+	defaultPanelOpen: boolean;
+	defaultTerminalOpen: boolean;
+}) {
+	const { data, project: projectOf, patchSession, emit, activeHandle, renderBrowserPage, deleteSession, layout, openRun } = useSessionShell();
+	const frame = frameClasses(layout);
+	const project = projectOf(session.projectId);
+	const branch = session.branch ?? project.branch;
+	const harness = useHarness({ session, files: project.files, branch, followUp: data.followUp, emit });
+	const view = harness.view;
+	const rootId = view.rootRunId;
+	// The agent on screen: the session's own, or one of the agents it started.
+	const viewRunId = requested && view.runs[requested] ? requested : rootId;
+	const viewed = view.runs[viewRunId];
+	const viewingChild = viewRunId !== rootId;
+	const showRun = React.useCallback((runId: string) => openRun(session.id, runId === rootId ? undefined : runId), [openRun, rootId, session.id]);
+	const others = descendants(view, rootId);
+	const runNames = React.useMemo(() => Object.fromEntries(view.runOrder.map((id) => [id, view.runs[id]?.name ?? id])), [view.runOrder, view.runs]);
+	const paths = React.useMemo(() => Object.keys(harness.files).sort(), [harness.files]);
+
+	// The session's own size decides between side by side and one at a time, and how tall the terminal may get. In a
+	// background tab it measures 0×0; keeping its last real size stops it flipping to the narrow layout, which would
+	// remount the chat and panel and lose drafts and split sizes.
+	const rootRef = React.useRef<HTMLDivElement>(null);
+	const [sizeRef, size] = useElementSize<HTMLDivElement>({ ignoreHidden: true });
+	const root = useMergedRefs(rootRef, sizeRef);
+	const scheme = useColorScheme(rootRef);
+	const narrow = size.width < SPLIT_MIN_WIDTH;
+	// The composer sits outside the transcript's scroller, so it takes the scrollbar's width on that side to keep
+	// both columns on one axis. The ref follows the scroller when a layout switch remounts the chat.
+	const scrollerRef = React.useRef<HTMLDivElement>(null);
+	const [insetRef, scrollbarInset] = useScrollbarInset<HTMLDivElement>();
+	const scroller = useMergedRefs(scrollerRef, insetRef);
+	const chatScroller = React.useCallback(() => scrollerRef.current, []);
+	const timelineRef = React.useRef<TimelineHandle>(null);
+	const revealTurn = React.useCallback((id: string) => timelineRef.current?.reveal(id) ?? null, []);
+	const composerRef = React.useRef<HTMLDivElement>(null);
+	const focusComposer = () => composerRef.current?.querySelector('textarea')?.focus();
+
+	const panel = usePanelTabs({
+		defaultOpen: defaultPanelOpen,
+		narrow,
+		agents: others.length > 0,
+		tasks: view.tasks.length > 0,
+		onOpenFile: (path) => emit({ type: 'open-file', sessionId: session.id, path }),
+		onOpenUrl: (url) => emit({ type: 'open-url', sessionId: session.id, url })
+	});
+	const { show: showTab, openBrowser, setOpen: setPanelOpen, toggleOpen: togglePanel, toggleTree: toggleTreeColumn } = panel;
+	const sidePanel = React.useRef<SidePanelHandle>(null);
+	const draft = useDraftContext();
+	const [terminalOpen, setTerminalOpen] = React.useState(defaultTerminalOpen);
+	const [focusPath, setFocusPath] = React.useState<{ path: string; nonce: number } | null>(null);
+	const [model, setModel] = React.useState<ModelSelection>(session.model ?? data.defaultModel);
+	const [filePicker, setFilePicker] = React.useState(false);
+
+	// Report live state up, so the tab, sidebar rows and home list can show it, the session's other agents included.
+	const runsKey = others.map((entry) => `${entry.id}:${entry.status}:${entry.waitingOn?.kind ?? ''}`).join('|');
+	React.useEffect(() => {
+		patchSession(session.id, {
+			status: harness.status,
+			// Two-percent steps: the tab's ring can't show finer, and each step re-renders the shell.
+			progress: harness.progress === undefined ? undefined : Math.round(harness.progress * 50) / 50,
+			changedFiles: harness.changes.length,
+			runs: others.map((entry) => ({
+				id: entry.id,
+				name: entry.name,
+				parentRunId: entry.parentRunId,
+				depth: entry.depth,
+				status: runSignal(entry, view)
+			}))
+		});
+		// `runsKey` stands in for `others`, which is rebuilt every render.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [patchSession, session.id, harness.status, harness.progress, harness.changes.length, runsKey]);
+
+	// A run that stops while you look elsewhere leaves its tab marked until you come back.
+	const previousStatus = React.useRef(harness.status);
+	React.useEffect(() => {
+		if (previousStatus.current === 'running' && harness.status !== 'running' && !active) patchSession(session.id, { unread: true });
+		previousStatus.current = harness.status;
+	}, [active, patchSession, harness.status, session.id]);
+	React.useEffect(() => {
+		if (active && session.unread) patchSession(session.id, { unread: false });
+	}, [active, patchSession, session.id, session.unread]);
+
+	const openReview = React.useCallback(
+		(path?: string) => {
+			showTab('review');
+			if (path) setFocusPath({ path, nonce: Date.now() });
+		},
+		[showTab]
+	);
+
+	// The agent opening a page puts it in the browser panel.
+	React.useEffect(() => {
+		if (harness.browse) openBrowser(harness.browse.url, harness.browse.title);
+	}, [openBrowser, harness.browse]);
+
+	// What shortcuts and the command menu can do here. It's built once from actions that never change, and the shell
+	// holds it only while the session is in front, so a session that's hidden or gone never receives a shortcut.
+	const handle = React.useMemo<SessionHandle>(
+		() => ({
+			togglePanel,
+			toggleTerminal: () => setTerminalOpen((open) => !open),
+			toggleTree: () => {
+				// The panel on screen decides whether its tree is a column or an overlay; a closed one opens with its
+				// column toggled.
+				if (sidePanel.current) {
+					sidePanel.current.toggleTree();
+				} else {
+					setPanelOpen(true);
+					toggleTreeColumn();
+				}
+			},
+			openBrowser: () => openBrowser(),
+			openReview: () => openReview(),
+			openFilePicker: () => setFilePicker(true)
+		}),
+		[openBrowser, openReview, setPanelOpen, togglePanel, toggleTreeColumn]
+	);
+	React.useEffect(() => {
+		if (!active) return;
+		activeHandle.current = handle;
+		return () => {
+			if (activeHandle.current === handle) activeHandle.current = null;
+		};
+	}, [active, activeHandle, handle]);
+
+	const send = (text: string) => {
+		const attachments = draft.take();
+		// In another agent's view the composer steers that agent, attachments and all, rather than starting a turn of
+		// the session's own.
+		if (viewingChild) harness.steer(viewRunId, text, data.followUp(text), attachments);
+		else harness.send(rootId, text, data.followUp(text), attachments);
+	};
+
+	// The plan stays docked while the turn that made it is live; once the agent is idle it would only be stale.
+	const planLive = Boolean(viewed.plan) && (viewed.status === 'running' || viewed.status === 'waiting');
+	const steerable = !viewingChild || viewed.capabilities?.steer !== false;
+
+	const chatColumn = (
+		<section aria-label={session.title} className={cn(columnClass, '@container/session')}>
+			<SessionHeader
+				session={session}
+				view={view}
+				viewRunId={viewRunId}
+				branch={branch}
+				others={others}
+				tokens={viewingChild ? runTokens(viewed) : harness.tokens}
+				contextWindow={data.contextWindow}
+				terminalOpen={terminalOpen}
+				panelOpen={panel.open}
+				onToggleTerminal={handle.toggleTerminal}
+				onTogglePanel={togglePanel}
+				onShowRun={showRun}
+				onShowAgents={() => showTab('agents')}
+				onReview={handle.openReview}
+				onExport={() => emit({ type: 'export-session', sessionId: session.id })}
+				onDelete={() => deleteSession(session.id)}
+			/>
+			<div className="relative flex min-h-0 flex-1 flex-col">
+				<ChatContainer ref={scroller} className="min-h-0 flex-1 px-6">
+					<ChatContainerContent className="mx-auto w-full max-w-2xl gap-0 px-0 pt-8 pb-8">
+						<SessionTimeline
+							key={viewRunId}
+							handle={timelineRef}
+							harness={harness}
+							runId={viewRunId}
+							onReview={openReview}
+							onBrowse={(url) => openBrowser(url)}
+							onOpenRun={showRun}
+							onAnswered={focusComposer}
+							scroller={chatScroller}
+						/>
+					</ChatContainerContent>
+					{/* A zero-height sticky row centres the button in either direction without taking space in the transcript. */}
+					<div className="pointer-events-none sticky bottom-3 flex h-0 items-end justify-center">
+						<ScrollButton className="pointer-events-auto relative bottom-auto left-auto translate-x-0" />
+					</div>
+				</ChatContainer>
+				<TurnRail key={viewRunId} run={viewed} scroller={chatScroller} reveal={revealTurn} />
+			</div>
+			<div className="px-6 pb-5" style={scrollbarInset ? { paddingInlineEnd: `calc(1.5rem + ${scrollbarInset}px)` } : undefined}>
+				<div className="mx-auto w-full max-w-2xl">
+					<RequestDock harness={harness} viewRunId={viewRunId} />
+					{planLive && viewed.plan ? (
+						// Sits on the composer's top edge like a tab, so the plan reads as part of what you're steering.
+						<PlanTracker plan={{ steps: viewed.plan }} streaming={viewed.status === 'running'} className="px-3" />
+					) : null}
+					{steerable ? (
+						<SessionComposer
+							key={viewRunId}
+							placeholder={viewingChild ? `Steer ${viewed.name}…` : undefined}
+							inputRef={composerRef}
+							running={runSignal(viewed, view) === 'running'}
+							onSubmit={send}
+							onStop={() => harness.stop(viewRunId)}
+							attachments={draft.attachments}
+							onRemoveAttachment={draft.remove}
+							queued={harness.queued(viewRunId)}
+							onUnqueue={(id) => harness.unqueue(viewRunId, id)}
+							commands={data.commands}
+							files={paths}
+							models={data.models}
+							model={model}
+							onModelChange={setModel}
+							usagePercent={data.usagePercent}
+							onAttachFiles={() => emit({ type: 'open-file', sessionId: session.id, path: '' })}
+						/>
+					) : (
+						<div className="flex items-center justify-between gap-3 rounded-xl bg-muted/60 px-4 py-3 text-[0.8125rem] text-muted-foreground">
+							<span>{viewed.name} can’t take messages directly.</span>
+							<Button size="xs" variant="outline" onClick={() => showRun(viewed.parentRunId ?? rootId)}>
+								Back to {nameOf(view, viewed.parentRunId ?? rootId)}
+							</Button>
+						</div>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+
+	const panelColumn = (
+		<section aria-label="Side panel" className={columnClass}>
+			<SidePanel
+				handle={sidePanel}
+				panel={panel}
+				files={harness.files}
+				paths={paths}
+				changes={harness.changes}
+				checks={sessionChecks(harness.worktrees)}
+				scheme={scheme}
+				review={
+					<ReviewPanel
+						changes={harness.changes}
+						focusPath={focusPath}
+						scheme={scheme}
+						comments={draft.comments}
+						onComment={(comment) => {
+							draft.comment(comment);
+							emit({ type: 'comment', sessionId: session.id, ...comment });
+						}}
+						scopes={view.runOrder
+							.filter((id) => harness.changes.some((change) => change.runIds.includes(id)))
+							.map((id) => ({ id, name: view.runs[id]?.name ?? id }))}
+						worktrees={harness.worktrees}
+						names={runNames}
+						onWorktreeAction={(action) => emit({ ...action, sessionId: session.id })}
+					/>
+				}
+				agents={<AgentsPanel harness={harness} viewRunId={viewRunId} onOpenRun={showRun} />}
+				tasks={<TasksPanel tasks={view.tasks} view={view} />}
+				counts={{ agents: others.length, tasks: view.tasks.length }}
+				onOpenFilePicker={handle.openFilePicker}
+				onAttach={draft.attach}
+				renderBrowserPage={renderBrowserPage}
+			/>
+		</section>
+	);
+
+	const terminalColumn = (
+		<section aria-label="Terminal dock" className={columnClass}>
+			<TerminalPanel
+				lines={harness.terminal}
+				agentName={(runId) => (runId === rootId ? undefined : view.runs[runId]?.name)}
+				path={project.path}
+				branch={branch}
+				onClose={() => setTerminalOpen(false)}
+				onClear={harness.clearTerminal}
+				onCommand={(command) => {
+					emit({ type: 'terminal-command', sessionId: session.id, command });
+					// A host answers the command with terminal events; a scripted session answers from its own files.
+					if (isHosted(session)) return;
+					if (command === 'clear') return harness.clearTerminal();
+					harness.appendTerminal([{ kind: 'command', text: command }, ...demoShell(command, { files: harness.files, changes: harness.changes, path: project.path, branch })]);
+				}}
+			/>
+		</section>
+	);
+
+	return (
+		<div ref={root} hidden={!active} className={cn('h-full min-h-0', frame.outer)}>
+			<div className={cn('h-full min-h-0', frame.surface)}>
+				<SessionLayout
+					narrow={narrow}
+					height={size.height}
+					chat={chatColumn}
+					panel={panelColumn}
+					terminal={terminalColumn}
+					panelOpen={panel.open}
+					terminalOpen={terminalOpen}
+				/>
+			</div>
+			<FilePickerDialog open={filePicker} onOpenChange={setFilePicker} paths={paths} onPick={(path) => panel.openFile(path, false)} />
+		</div>
+	);
+});
diff --git a/packages/ui/src/components/coding-agent/shortcuts.ts b/packages/ui/src/components/coding-agent/shortcuts.ts
new file mode 100644
index 0000000..479ad96
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/shortcuts.ts
@@ -0,0 +1,40 @@
+/**
+ * Keyboard shortcuts. Picked to avoid the ones browsers keep for themselves (⌘T, ⌘W, ⌘N, ⌃Tab), so they work the
+ * same in a browser tab as in a desktop shell.
+ */
+export const SHORTCUTS = {
+	commandMenu: { key: 'k', mod: true, label: '⌘K' },
+	newSession: { key: 'n', mod: true, alt: true, label: '⌥⌘N' },
+	closeSession: { key: 'w', mod: true, alt: true, label: '⌥⌘W' },
+	openFile: { key: 'p', mod: true, label: '⌘P' },
+	browser: { key: 'b', mod: true, shift: true, label: '⇧⌘B' },
+	togglePanel: { key: '\\', mod: true, label: '⌘\\' },
+	toggleTree: { key: '\\', mod: true, shift: true, label: '⇧⌘\\' },
+	toggleTerminal: { key: '`', ctrl: true, label: '⌃`' }
+} as const;
+
+export type ShortcutId = keyof typeof SHORTCUTS;
+
+type Shortcut = { key: string; mod?: boolean; alt?: boolean; shift?: boolean; ctrl?: boolean };
+
+/** True when `event` is `shortcut`. `mod` is ⌘ on Apple platforms and Ctrl elsewhere. */
+export function matches(event: KeyboardEvent, shortcut: Shortcut) {
+	const apple = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+	const mod = apple ? event.metaKey : event.ctrlKey;
+	// ⌥ and ⇧ change `key` on some layouts, so letters are matched on the physical key.
+	const key = /^[a-z]$/.test(shortcut.key) ? event.code === `Key${shortcut.key.toUpperCase()}` : event.key === shortcut.key || (shortcut.key === '\\' && event.code === 'Backslash') || (shortcut.key === '`' && event.code === 'Backquote');
+	// A ⌃ shortcut is Ctrl everywhere; off Apple that is also `mod`, so the mod check would reject it.
+	const modMatches = shortcut.ctrl && !apple ? true : Boolean(shortcut.mod) === mod;
+	return (
+		key &&
+		modMatches &&
+		Boolean(shortcut.alt) === event.altKey &&
+		Boolean(shortcut.shift) === event.shiftKey &&
+		(shortcut.ctrl ? event.ctrlKey : true)
+	);
+}
+
+/** "New session (⌥⌘N)": the tooltip text for a control with a shortcut. */
+export function withShortcut(label: string, id: ShortcutId) {
+	return `${label} (${SHORTCUTS[id].label})`;
+}
diff --git a/packages/ui/src/components/coding-agent/side-panel.tsx b/packages/ui/src/components/coding-agent/side-panel.tsx
new file mode 100644
index 0000000..ffb1407
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/side-panel.tsx
@@ -0,0 +1,339 @@
+'use client';
+
+import { File as CodeFile } from '@pierre/diffs/react';
+import { FileCode2, FolderTree, GitCompareArrows, Globe, ListChecks, PanelRightClose, Plus, Users, X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut, DropdownMenuTrigger } from '../dropdown-menu';
+import { Tabs, TabsList, TabsTrigger } from '../tabs';
+import { MiddleTruncate } from '../workspace-kit/middle-truncate';
+import { iconButtonClass, TooltipIconButton } from '../workspace-kit/primitives';
+import { useElementSize } from '../workspace-kit/use-element-size';
+import { BrowserPanel, displayUrl, pageTitle } from './browser-panel';
+import { CODE_THEMES, type ColorScheme, DIFF_SURFACE_STYLE, TREE_COLUMN_BG } from './code-surface-theme';
+import type { ChecksOutcome, FileChange } from './harness';
+import { SHORTCUTS, withShortcut } from './shortcuts';
+import { tabCloseClass, toolbarButtonClass } from './session-surface';
+import type { BrowserPageRenderer } from './types';
+import type { FileReference } from './use-draft-context';
+import type { PanelTab, PanelTabs } from './use-panel-tabs';
+import { WorkspaceTree } from './workspace-tree';
+
+/** What the session can ask of the panel on screen. */
+export type SidePanelHandle = {
+	/** Shows or hides the file tree, as a column beside a wide panel or over a narrow one. */
+	toggleTree: () => void;
+};
+
+const basename = (path: string) => path.split('/').pop() ?? path;
+
+/** Below this panel width the tree no longer fits beside the content. */
+const TREE_COLUMN_MIN_WIDTH = 576;
+
+function FileView({
+	path,
+	contents,
+	change,
+	scheme,
+	onAttach
+}: {
+	path: string;
+	contents: string;
+	change?: FileChange;
+	scheme: ColorScheme;
+	onAttach: (file: FileReference) => void;
+}) {
+	const [range, setRange] = React.useState<{ start: number; end: number } | null>(null);
+	const lines = range ? (range.start === range.end ? `${range.start}` : `${Math.min(range.start, range.end)}–${Math.max(range.start, range.end)}`) : null;
+	// The renderer compares its options by identity and repaints the whole file when they change, so they stay stable
+	// across the session's frequent re-renders.
+	const file = React.useMemo(() => ({ name: path, contents }), [path, contents]);
+	const options = React.useMemo(
+		() => ({
+			theme: CODE_THEMES,
+			themeType: scheme,
+			disableFileHeader: true,
+			overflow: 'scroll' as const,
+			enableLineSelection: true,
+			onLineSelected: (selection: { start: number; end: number } | null) => setRange(selection ? { start: selection.start, end: selection.end } : null)
+		}),
+		[scheme]
+	);
+	const style = React.useMemo(() => ({ ...DIFF_SURFACE_STYLE, colorScheme: scheme }), [scheme]);
+
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<div className="flex h-10 shrink-0 items-center gap-2 ps-3 pe-2">
+				{/* The folders give way first, so the file name and its status always show. */}
+				<p dir="ltr" title={path} className="flex min-w-0 flex-1 items-center font-mono text-xs text-muted-foreground">
+					{path.includes('/') ? <span className="min-w-0 shrink truncate">{path.slice(0, -basename(path).length).replaceAll('/', ' / ')}</span> : null}
+					<MiddleTruncate text={basename(path)} title={false} className="max-w-[70%] shrink-0 text-foreground" />
+					{change ? (
+						<span title={change.before === null ? 'Added' : 'Modified'} className={cn('ms-2 shrink-0', change.before === null ? 'text-success' : 'text-warning')}>
+							<span aria-hidden="true">{change.before === null ? 'A' : 'M'}</span>
+							<span className="sr-only">{change.before === null ? 'Added' : 'Modified'}</span>
+						</span>
+					) : null}
+				</p>
+				<Button size="xs" variant="ghost" className="text-muted-foreground" onClick={() => onAttach(lines ? { path, lines } : { path })}>
+					{lines ? (
+						<>
+							Add lines <span className="tabular-nums">{lines}</span> to message
+						</>
+					) : (
+						'Add to message'
+					)}
+				</Button>
+			</div>
+			<div dir="ltr" className="min-h-0 flex-1 overflow-auto">
+				<CodeFile file={file} options={options} style={style} />
+			</div>
+		</div>
+	);
+}
+
+function TabLabel({ tab, changes, counts, checks }: { tab: PanelTab; changes: number; counts: { agents: number; tasks: number }; checks: ChecksOutcome }) {
+	if (tab.kind === 'agents' || tab.kind === 'tasks') {
+		const Icon = tab.kind === 'agents' ? Users : ListChecks;
+		const count = tab.kind === 'agents' ? counts.agents : counts.tasks;
+		return (
+			<>
+				<Icon aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+				<span>{tab.kind === 'agents' ? 'Agents' : 'Tasks'}</span>
+				{count > 0 ? <span className="text-muted-foreground tabular-nums">{count}</span> : null}
+			</>
+		);
+	}
+	if (tab.kind === 'review') {
+		return (
+			<>
+				<GitCompareArrows aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+				<span>Files changed</span>
+				{changes > 0 ? <span className="text-muted-foreground tabular-nums">{changes}</span> : null}
+				{/* A failing or running check on any of the session's pull requests shows from every tab. */}
+				{checks === 'failed' || checks === 'running' ? (
+					<span title={checks === 'failed' ? 'A check is failing' : 'Checks are running'} className={cn('size-1.5 shrink-0 rounded-full', checks === 'failed' ? 'bg-destructive' : 'bg-warning')}>
+						<span className="sr-only">{checks === 'failed' ? ', a check is failing' : ', checks are running'}</span>
+					</span>
+				) : null}
+			</>
+		);
+	}
+	if (tab.kind === 'file') {
+		// A preview tab is replaced by the next file you glance at; it reads quieter until you pin it.
+		return (
+			<>
+				<FileCode2 aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+				<MiddleTruncate
+					text={basename(tab.path)}
+					tail={10}
+					title={false}
+					className={cn(tab.preview && 'text-muted-foreground italic [font-synthesis-style:auto]')}
+				/>
+			</>
+		);
+	}
+	return (
+		<>
+			<Globe aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+			<span dir="auto" className="truncate">
+				{tab.browser.url ? (tab.browser.title ?? pageTitle(tab.browser.url)) : 'New tab'}
+			</span>
+		</>
+	);
+}
+
+/**
+ * The right-hand side of a session: a tab strip of review, file and browser tabs with a menu to open more, the
+ * active tab's content, and the checkout's file tree beside it. The tabs and whether the tree shows come from the
+ * session's `usePanelTabs`; the Files changed, Agents and Tasks tabs are the session's to fill.
+ */
+export function SidePanel({
+	panel,
+	files,
+	paths,
+	changes,
+	checks,
+	scheme,
+	review,
+	agents,
+	tasks,
+	counts,
+	onOpenFilePicker,
+	onAttach,
+	renderBrowserPage,
+	handle
+}: {
+	panel: PanelTabs;
+	files: Record<string, string>;
+	/** The checkout's paths, sorted, for the tree. */
+	paths: string[];
+	changes: FileChange[];
+	/** How the checks on the session's pull requests stand, shown from every tab. */
+	checks: ChecksOutcome;
+	scheme: ColorScheme;
+	/** The Files changed tab's content. */
+	review: React.ReactNode;
+	/** The Agents tab's content; the tab shows once the session has started other agents. */
+	agents: React.ReactNode;
+	/** The Tasks tab's content; the tab shows once the session keeps a shared task list. */
+	tasks: React.ReactNode;
+	counts: { agents: number; tasks: number };
+	onOpenFilePicker: () => void;
+	onAttach: (file: FileReference) => void;
+	renderBrowserPage?: BrowserPageRenderer;
+	handle?: React.Ref<SidePanelHandle>;
+}) {
+	const { tabs, treeOpen, toggleTree: toggleTreeColumn } = panel;
+	const activeTab = tabs.find((tab) => tab.id === panel.active) ?? tabs[0];
+	const [root, { width }] = useElementSize<HTMLDivElement>({ ignoreHidden: true });
+	const wide = width >= TREE_COLUMN_MIN_WIDTH;
+	// Beside a wide panel the tree is a column the session remembers; on a narrow one it opens over the content,
+	// closed until asked for, and the shortcut toggles whichever of the two is on screen.
+	const [overlayTree, setOverlayTree] = React.useState(false);
+	const showTree = wide ? treeOpen : overlayTree;
+	const toggleTree = React.useCallback(() => (wide ? toggleTreeColumn() : setOverlayTree((open) => !open)), [toggleTreeColumn, wide]);
+	React.useImperativeHandle(handle, () => ({ toggleTree }), [toggleTree]);
+	const tree =
+		paths.length === 0 ? (
+			<p className="px-3 py-4 text-xs text-muted-foreground">No files in this project yet.</p>
+		) : (
+			<WorkspaceTree
+				paths={paths}
+				changes={changes}
+				selected={activeTab.kind === 'file' ? activeTab.path : null}
+				scheme={scheme}
+				onOpen={(path) => {
+					panel.openFile(path);
+					if (!wide) setOverlayTree(false);
+				}}
+			/>
+		);
+
+	return (
+		<div ref={root} className="flex h-full min-h-0 flex-col">
+			<div className="flex h-12 shrink-0 items-center gap-1 border-b border-border px-2">
+				<Tabs value={activeTab.id} onValueChange={(value) => panel.show(String(value))} className="min-w-0 shrink gap-0">
+					<TabsList
+						aria-label="Panel tabs"
+						className="h-8 gap-0.5 bg-transparent p-0.5 [&_[data-slot=tabs-indicator]]:rounded-[4px]"
+						onWheel={(event) => {
+							if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) event.currentTarget.scrollLeft += event.deltaY;
+						}}
+					>
+						{tabs.map((tab) => {
+							const closable = tab.kind === 'file' || tab.kind === 'browser';
+							const title = tab.kind === 'file' ? tab.path : tab.kind === 'browser' && tab.browser.url ? displayUrl(tab.browser.url) : undefined;
+							return (
+								<div key={tab.id} data-active={tab.id === activeTab.id || undefined} className="group/tab relative flex shrink-0">
+									<TabsTrigger
+										value={tab.id}
+										title={title}
+										onDoubleClick={() => panel.pin(tab.id)}
+										onKeyDown={(event) => {
+											if (closable && (event.key === 'Delete' || event.key === 'Backspace')) {
+												event.preventDefault();
+												panel.close(tab.id);
+											}
+										}}
+										onMouseDown={(event) => {
+											if (event.button === 1) event.preventDefault();
+										}}
+										onAuxClick={(event) => {
+											if (event.button === 1 && closable) panel.close(tab.id);
+										}}
+										className={cn(
+											'h-7 min-h-7 max-w-48 justify-start gap-1.5 rounded-[4px] px-2 text-[0.8125rem] font-normal text-muted-foreground hover:text-foreground data-[active]:text-foreground pointer-coarse:min-h-9',
+											closable && 'pe-7'
+										)}
+									>
+										<TabLabel tab={tab} changes={changes.length} counts={counts} checks={checks} />
+									</TabsTrigger>
+									{closable ? (
+										<button type="button" tabIndex={-1} aria-label="Close tab" onClick={() => panel.close(tab.id)} className={tabCloseClass}>
+											<X aria-hidden="true" className="size-3.5" />
+										</button>
+									) : null}
+								</div>
+							);
+						})}
+					</TabsList>
+				</Tabs>
+				<DropdownMenu>
+					<DropdownMenuTrigger
+						aria-label="Open in panel"
+						title="Open in panel"
+						className={cn(iconButtonClass({ menu: true }), 'rounded-[4px]', toolbarButtonClass)}
+					>
+						<Plus aria-hidden="true" className="size-3.5" />
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="start" className="w-52">
+						<DropdownMenuItem onClick={onOpenFilePicker}>
+							<FileCode2 aria-hidden="true" />
+							Open file
+							<DropdownMenuShortcut>{SHORTCUTS.openFile.label}</DropdownMenuShortcut>
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={() => panel.openBrowser()}>
+							<Globe aria-hidden="true" />
+							Browser
+							<DropdownMenuShortcut>{SHORTCUTS.browser.label}</DropdownMenuShortcut>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+				<div className="flex-1" />
+				<TooltipIconButton
+					label={withShortcut(showTree ? 'Hide files' : 'Show files', 'toggleTree')}
+					aria-pressed={showTree}
+					onClick={toggleTree}
+					className={cn(toolbarButtonClass, showTree && 'text-foreground')}
+				>
+					<FolderTree aria-hidden="true" className="size-3.5" />
+				</TooltipIconButton>
+				<TooltipIconButton label={withShortcut('Hide side panel', 'togglePanel')} onClick={() => panel.setOpen(false)} className={toolbarButtonClass}>
+					<PanelRightClose aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
+				</TooltipIconButton>
+			</div>
+			<div className="relative flex min-h-0 flex-1">
+				<div className="min-w-0 flex-1">
+					{tabs.map((tab) => (
+						// Tabs stay mounted while hidden, so a diff keeps its layout and a page its history.
+						<div key={tab.id} hidden={tab.id !== activeTab.id} className="h-full">
+							{tab.kind === 'review' ? (
+								review
+							) : tab.kind === 'agents' ? (
+								agents
+							) : tab.kind === 'tasks' ? (
+								tasks
+							) : tab.kind === 'file' ? (
+								<FileView
+									path={tab.path}
+									contents={files[tab.path] ?? ''}
+									change={changes.find((change) => change.path === tab.path)}
+									scheme={scheme}
+									onAttach={onAttach}
+								/>
+							) : (
+								<BrowserPanel tab={tab.browser} onChange={(browser) => panel.changeBrowser(tab.id, browser)} renderPage={renderBrowserPage} />
+							)}
+						</div>
+					))}
+				</div>
+				{showTree ? (
+					<div
+						dir="ltr"
+						className={cn(
+							// Its own pane: a rule at the join and a step of tone, like the sidebar in the other templates.
+							'shrink-0 border-s border-border py-1',
+							wide ? 'w-[clamp(14rem,32%,20rem)]' : 'absolute inset-y-0 end-0 z-10 w-[min(18rem,85%)] shadow-lg'
+						)}
+						style={{ background: TREE_COLUMN_BG }}
+					>
+						{tree}
+					</div>
+				) : null}
+			</div>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/tab-strip.ts b/packages/ui/src/components/coding-agent/tab-strip.ts
new file mode 100644
index 0000000..7061ffd
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/tab-strip.ts
@@ -0,0 +1,9 @@
+/**
+ * Closes one tab of a strip: the ids left, and the one that takes its place if it was in front, which is the tab
+ * after it, or the one before when it was last. The neighbour is null when nothing is left or the id wasn't there.
+ */
+export function withoutAndNeighbor(list: readonly string[], id: string): { list: string[]; neighbor: string | null } {
+	const index = list.indexOf(id);
+	const rest = list.filter((entry) => entry !== id);
+	return { list: rest, neighbor: index < 0 ? null : (rest[index] ?? rest[index - 1] ?? null) };
+}
diff --git a/packages/ui/src/components/coding-agent/terminal-panel.tsx b/packages/ui/src/components/coding-agent/terminal-panel.tsx
new file mode 100644
index 0000000..1c4c20e
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/terminal-panel.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import { Eraser, GitBranch, SquareTerminal, X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { MiddleTruncate } from '../workspace-kit/middle-truncate';
+import { TooltipIconButton } from '../workspace-kit/primitives';
+import { toolbarButtonClass } from './session-surface';
+import type { TerminalLine } from './harness';
+
+/**
+ * The session's terminal dock: everything the agent ran, in order, then a prompt of your own. Where the shell is
+ * (folder and branch) sits in the dock header, so the prompt line keeps its full width for what you type. What
+ * a command prints is up to `onCommand`.
+ */
+export function TerminalPanel({
+	lines,
+	path,
+	branch,
+	onCommand,
+	onClear,
+	onClose,
+	agentName
+}: {
+	lines: TerminalLine[];
+	/** Another agent's name for lines it ran, so a shared terminal says who ran what. */
+	agentName?: (runId: string) => string | undefined;
+	path: string;
+	branch: string;
+	onCommand: (command: string) => void;
+	onClear: () => void;
+	onClose: () => void;
+}) {
+	const [value, setValue] = React.useState('');
+	// Your own commands, kept apart from the log so `clear` doesn't forget them, and the line you were typing.
+	const [history, setHistory] = React.useState<string[]>([]);
+	const [recall, setRecall] = React.useState<{ index: number; draft: string } | null>(null);
+	const scroller = React.useRef<HTMLDivElement>(null);
+	const input = React.useRef<HTMLInputElement>(null);
+	const pinned = React.useRef(true);
+
+	const pin = React.useCallback(() => {
+		const node = scroller.current;
+		if (node && pinned.current) node.scrollTop = node.scrollHeight;
+	}, []);
+	React.useLayoutEffect(pin, [lines.length, pin]);
+	// Resizing the dock keeps the prompt in view while you were at the bottom.
+	React.useEffect(() => {
+		const node = scroller.current;
+		if (!node) return;
+		const observer = new ResizeObserver(pin);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [pin]);
+
+	const step = (by: -1 | 1) => {
+		if (history.length === 0) return;
+		if (by === -1) {
+			const index = recall ? Math.max(recall.index - 1, 0) : history.length - 1;
+			setRecall({ index, draft: recall?.draft ?? value });
+			setValue(history[index]);
+		} else if (recall) {
+			const index = recall.index + 1;
+			if (index >= history.length) {
+				setValue(recall.draft);
+				setRecall(null);
+			} else {
+				setRecall({ ...recall, index });
+				setValue(history[index]);
+			}
+		}
+	};
+
+	return (
+		<section aria-label="Terminal" className="flex h-full min-h-0 flex-col">
+			<div className="flex h-10 shrink-0 items-center gap-2 ps-3 pe-1.5">
+				<SquareTerminal aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+				<span className="shrink-0 text-[0.8125rem] text-foreground">Terminal</span>
+				<span dir="ltr" className="flex min-w-0 flex-1 items-center gap-2 font-mono text-xs text-muted-foreground">
+					<MiddleTruncate text={path} tail={18} className="max-w-[60%]" />
+					<span title={branch} className="flex min-w-0 items-center gap-1">
+						<GitBranch aria-hidden="true" className="size-3.5 shrink-0" />
+						<span className="min-w-0 truncate">{branch}</span>
+					</span>
+				</span>
+				<TooltipIconButton label="Clear" onClick={onClear} className={toolbarButtonClass}>
+					<Eraser aria-hidden="true" className="size-3.5" />
+				</TooltipIconButton>
+				<TooltipIconButton label="Close terminal" onClick={onClose} className={toolbarButtonClass}>
+					<X aria-hidden="true" className="size-3.5" />
+				</TooltipIconButton>
+			</div>
+			{/* Shell text is always left to right, whatever the page direction. Clicking the log puts the cursor back in the prompt. */}
+			<div
+				ref={scroller}
+				dir="ltr"
+				role="log"
+				aria-live="polite"
+				onScroll={(event) => {
+					const node = event.currentTarget;
+					pinned.current = node.scrollHeight - node.scrollTop - node.clientHeight < 24;
+				}}
+				onMouseUp={() => {
+					if (!window.getSelection()?.toString()) input.current?.focus();
+				}}
+				className="min-h-0 flex-1 overflow-y-auto px-3 py-2 text-start font-mono text-xs leading-5"
+			>
+				{lines.map((line) => (
+					<div
+						key={line.id}
+						className={cn(
+							'min-h-5 whitespace-pre-wrap [overflow-wrap:anywhere]',
+							line.kind === 'command' ? 'text-foreground' : line.kind === 'error' ? 'text-destructive' : 'text-muted-foreground'
+						)}
+					>
+						{line.kind === 'command' ? (
+							<span aria-hidden="true" className="text-success select-none">
+								{agentName?.(line.runId) ? <span className="me-1.5 rounded-sm bg-muted px-1 text-muted-foreground">{agentName(line.runId)}</span> : null}❯{' '}
+							</span>
+						) : null}
+						{line.text}
+					</div>
+				))}
+				<form
+					className="flex items-baseline"
+					onSubmit={(event) => {
+						event.preventDefault();
+						const command = value.trim();
+						if (!command) return;
+						onCommand(command);
+						setHistory((current) => [...current, command]);
+						setValue('');
+						setRecall(null);
+						pinned.current = true;
+					}}
+				>
+					<span aria-hidden="true" className="shrink-0 text-success select-none">
+						❯{' '}
+					</span>
+					<input
+						ref={input}
+						aria-label="Terminal input"
+						autoComplete="off"
+						spellCheck={false}
+						value={value}
+						onChange={(event) => {
+							setValue(event.target.value);
+							setRecall(null);
+						}}
+						onKeyDown={(event) => {
+							if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+							event.preventDefault();
+							step(event.key === 'ArrowUp' ? -1 : 1);
+						}}
+						className="min-w-0 flex-1 bg-transparent text-foreground caret-foreground outline-none"
+					/>
+				</form>
+			</div>
+		</section>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/turn-rail.tsx b/packages/ui/src/components/coding-agent/turn-rail.tsx
new file mode 100644
index 0000000..640f244
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/turn-rail.tsx
@@ -0,0 +1,325 @@
+'use client';
+
+import { motion, type MotionValue, useMotionValue, useSpring, useTransform } from 'motion/react';
+import * as React from 'react';
+
+import { plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { popoverSurfaceClass } from '../popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
+import { useReducedMotion } from '../workspace-kit/reduced-motion';
+import { awaitsPerson, type RunView, TASK_TURN_ID } from './harness';
+import { plainText } from './run-presentation';
+
+type TurnState = 'done' | 'running' | 'waiting' | 'failed';
+
+export type Turn = {
+	/** The id of the message that opened the turn, which is also its anchor in the transcript. */
+	id: string;
+	prompt: string;
+	/** The agent's last reply in the turn. */
+	reply?: string;
+	state: TurnState;
+	files?: { count: number; additions: number; deletions: number };
+};
+
+/**
+ * Splits a run's transcript into turns: each of your messages and everything the agent did until the next one. A
+ * sub-agent's first turn is the task its parent gave it.
+ */
+export function turnsOf(run: RunView): Turn[] {
+	const turns: Turn[] = run.parentRunId && run.task ? [{ id: TASK_TURN_ID, prompt: run.task, state: 'done' }] : [];
+	for (const item of run.items) {
+		if (item.type === 'beat' && item.beat.kind === 'user') {
+			turns.push({ id: item.id, prompt: item.beat.text, state: 'done' });
+			continue;
+		}
+		const turn = turns[turns.length - 1];
+		if (!turn) continue;
+		if (item.type === 'beat' && item.beat.kind === 'say') {
+			turn.reply = item.beat.text;
+			// A reply after an error means the turn recovered, say after a retry.
+			if (turn.state === 'failed') turn.state = 'done';
+		}
+		else if (item.type === 'beat' && item.beat.kind === 'error') turn.state = 'failed';
+		else if (item.type === 'turn-end') turn.files = { count: item.paths.length, additions: item.additions, deletions: item.deletions };
+		else if ((item.type === 'question' && !item.answer) || (item.type === 'permission' && !item.decision)) turn.state = 'waiting';
+	}
+	const last = turns[turns.length - 1];
+	if (last && last.state === 'done' && (run.status === 'running' || run.status === 'waiting')) {
+		last.state = awaitsPerson(run) ? 'waiting' : 'running';
+	}
+	return turns;
+}
+
+/** Rest and peak tick lengths, and how far from the pointer a tick still swells. Subtle on purpose. */
+const REST = 16;
+const PEAK = 30;
+const REACH = 40;
+
+/** How close to either end of the rail the pointer has to be before it scrolls, and its top speed in px per frame. */
+const EDGE = 36;
+const EDGE_SPEED = 5;
+
+/** The fade at an end with more ticks past it. */
+const FADE = 28;
+
+function TurnTick({
+	turn,
+	index,
+	total,
+	active,
+	pointerY,
+	railScroll,
+	reduced,
+	onJump
+}: {
+	turn: Turn;
+	index: number;
+	total: number;
+	active: boolean;
+	pointerY: MotionValue<number>;
+	/** The rail's scroll offset, so ticks re-measure as the rail scrolls under a still pointer. */
+	railScroll: MotionValue<number>;
+	reduced: boolean;
+	onJump: (id: string) => void;
+}) {
+	const ref = React.useRef<HTMLButtonElement>(null);
+	// Like a dock: each tick swells with the pointer's distance from its centre, settling on a spring with no bounce.
+	const distance = useTransform([pointerY, railScroll], ([y]: number[]) => {
+		const box = ref.current?.getBoundingClientRect();
+		return box ? y - (box.top + box.height / 2) : Infinity;
+	});
+	const target = useTransform(distance, [-REACH, 0, REACH], [REST, PEAK, REST]);
+	const width = useSpring(target, { stiffness: 420, damping: 38, mass: 0.35 });
+
+	return (
+		<Tooltip>
+			<TooltipTrigger
+				delay={250}
+				render={
+					<button
+						ref={ref}
+						type="button"
+						aria-label={`Turn ${index + 1} of ${total}: ${turn.prompt}`}
+						aria-current={active ? 'step' : undefined}
+						data-turn-id={turn.id}
+						onClick={() => onJump(turn.id)}
+						// A fixed 10px pitch: when turns outnumber the room, the rail scrolls rather than packing them tighter.
+						className="group/tick flex h-2.5 w-9 shrink-0 cursor-pointer items-center justify-start rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					/>
+				}
+			>
+				<motion.span
+					aria-hidden="true"
+					style={{ width: reduced ? REST : width }}
+					className={cn(
+						'block h-px rounded-full',
+						turn.state === 'failed'
+							? 'bg-destructive'
+							: turn.state === 'waiting'
+								? 'bg-warning'
+								: active
+									? 'bg-foreground'
+									: 'bg-muted-foreground/50 group-hover/tick:bg-foreground/80 group-focus-visible/tick:bg-foreground/80',
+						turn.state === 'running' && !active && 'motion-safe:animate-pulse'
+					)}
+				/>
+			</TooltipTrigger>
+			<TooltipContent side="right" align="center" sideOffset={6} className={cn(popoverSurfaceClass, 'w-72 max-w-[calc(100vw-2rem)] px-3 py-2.5')}>
+				<p dir="auto" className="line-clamp-2 text-xs font-medium text-pretty text-foreground">
+					{plainText(turn.prompt)}
+				</p>
+				{turn.reply ? (
+					<p dir="auto" className="mt-1 line-clamp-3 text-xs text-pretty text-muted-foreground">
+						{plainText(turn.reply)}
+					</p>
+				) : null}
+				{turn.files ? (
+					<p className="mt-1.5 text-[0.6875rem] text-muted-foreground tabular-nums">
+						{turn.files.count} {plural(turn.files.count, { one: 'file', other: 'files' })} changed
+						{turn.files.additions ? <span className="ms-1.5 font-mono text-success">+{turn.files.additions}</span> : null}
+						{turn.files.deletions ? <span className="ms-1 font-mono text-destructive">−{turn.files.deletions}</span> : null}
+					</p>
+				) : null}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
+
+/**
+ * A conversation timeline along the transcript's leading edge, clear of the scrollbar: one hairline per turn, the one
+ * in view brighter, a turn waiting on you in amber and a failed one in red. Ticks near the pointer swell a little,
+ * dock-style; hovering one previews the turn, and clicking it scrolls there. A long thread's rail keeps a fixed
+ * height and scrolls, fading at an end with more past it and gliding on when the pointer rests near that end.
+ */
+export function TurnRail({
+	run,
+	scroller,
+	reveal
+}: {
+	run: RunView;
+	scroller: () => HTMLElement | null;
+	/** Renders a turn that the transcript hasn't rendered yet and returns its element. */
+	reveal?: (id: string) => HTMLElement | null;
+}) {
+	const turns = React.useMemo(() => turnsOf(run), [run]);
+	const pointerY = useMotionValue(Infinity);
+	const railScroll = useMotionValue(0);
+	const reduced = Boolean(useReducedMotion());
+	const [activeId, setActiveId] = React.useState<string | null>(null);
+	const nav = React.useRef<HTMLElement>(null);
+	const hovering = React.useRef(false);
+	const edgeFrame = React.useRef(0);
+	const [hidden, setHidden] = React.useState({ top: false, bottom: false });
+
+	/** Which ends have ticks past them, for the fades. */
+	const measureEnds = React.useCallback(() => {
+		const node = nav.current;
+		if (!node) return;
+		const top = node.scrollTop > 1;
+		const bottom = node.scrollHeight - node.scrollTop - node.clientHeight > 1;
+		setHidden((current) => (current.top === top && current.bottom === bottom ? current : { top, bottom }));
+	}, []);
+
+	React.useEffect(() => {
+		const node = nav.current;
+		if (!node) return;
+		measureEnds();
+		const observer = new ResizeObserver(measureEnds);
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(edgeFrame.current);
+		};
+	}, [measureEnds, turns.length]);
+
+	// Near an end, the rail keeps scrolling while the pointer rests there, faster the closer it is to the edge.
+	const edgeScroll = (clientY: number) => {
+		const node = nav.current;
+		cancelAnimationFrame(edgeFrame.current);
+		if (!node || node.scrollHeight <= node.clientHeight) return;
+		const box = node.getBoundingClientRect();
+		const fromTop = clientY - box.top;
+		const fromBottom = box.bottom - clientY;
+		const speed = fromTop < EDGE ? -EDGE_SPEED * (1 - fromTop / EDGE) : fromBottom < EDGE ? EDGE_SPEED * (1 - fromBottom / EDGE) : 0;
+		if (!speed) return;
+		const step = () => {
+			const before = node.scrollTop;
+			node.scrollTop += speed;
+			if (node.scrollTop !== before) edgeFrame.current = requestAnimationFrame(step);
+		};
+		edgeFrame.current = requestAnimationFrame(step);
+	};
+
+	const anchor = React.useCallback(
+		(id: string) => scroller()?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(id)}"]`) ?? null,
+		[scroller]
+	);
+
+	// The turn in view is the last one that starts above the upper third of the transcript, or the latest turn once
+	// you're at the bottom, however short it is.
+	const ids = turns.map((turn) => turn.id).join('|');
+	React.useEffect(() => {
+		const node = scroller();
+		if (!node || turns.length === 0) return;
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			const line = node.getBoundingClientRect().top + node.clientHeight / 3;
+			let current = turns[0]?.id ?? null;
+			if (node.scrollHeight - node.scrollTop - node.clientHeight < 4) {
+				setActiveId(turns[turns.length - 1]?.id ?? null);
+				return;
+			}
+			for (const turn of turns) {
+				const element = anchor(turn.id);
+				// A turn the transcript hasn't rendered yet is history above the rows in view.
+				if (!element || element.getBoundingClientRect().top <= line) current = turn.id;
+			}
+			setActiveId(current);
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(measure);
+		};
+		measure();
+		node.addEventListener('scroll', onScroll, { passive: true });
+		return () => {
+			node.removeEventListener('scroll', onScroll);
+			cancelAnimationFrame(frame);
+		};
+		// `ids` stands in for `turns`, which is rebuilt whenever the run changes.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [anchor, ids, scroller]);
+
+	// The rail follows the transcript: the turn in view stays in view on the rail, unless you're using the rail.
+	React.useEffect(() => {
+		const node = nav.current;
+		if (!node || !activeId || hovering.current) return;
+		const tick = node.querySelector<HTMLElement>(`[data-turn-id="${CSS.escape(activeId)}"]`);
+		if (!tick) return;
+		const top = tick.offsetTop - node.clientHeight / 2 + tick.offsetHeight / 2;
+		node.scrollTo({ top, behavior: reduced ? 'auto' : 'smooth' });
+	}, [activeId, reduced]);
+
+	const jump = (id: string) => {
+		const target = reveal?.(id) ?? anchor(id);
+		// A far jump goes straight there; smooth scrolling across hundreds of rows only makes you wait.
+		const far = target ? Math.abs(target.getBoundingClientRect().top) > (scroller()?.clientHeight ?? 0) * 3 : false;
+		target?.scrollIntoView({ block: 'start', behavior: reduced || far ? 'auto' : 'smooth' });
+		setActiveId(id);
+	};
+
+	if (turns.length === 0) return null;
+	return (
+		// On the leading edge, so ticks grow into the gutter beside the transcript and away from the scrollbar.
+		<div className="pointer-events-none absolute inset-y-0 start-0 flex items-center py-6 ps-1.5">
+			<TooltipProvider delay={250}>
+				<nav
+					ref={nav}
+					aria-label="Conversation turns"
+					onPointerEnter={() => {
+						hovering.current = true;
+					}}
+					onPointerMove={(event) => {
+						if (!reduced) pointerY.set(event.clientY);
+						edgeScroll(event.clientY);
+					}}
+					onPointerLeave={() => {
+						hovering.current = false;
+						pointerY.set(Infinity);
+						cancelAnimationFrame(edgeFrame.current);
+					}}
+					onScroll={(event) => {
+						railScroll.set(event.currentTarget.scrollTop);
+						measureEnds();
+					}}
+					// A capped height that scrolls on its own, with no scrollbar; an end fades out while more ticks are past it.
+					style={
+						hidden.top || hidden.bottom
+							? {
+									maskImage: `linear-gradient(to bottom, transparent, black ${hidden.top ? FADE : 0}px, black calc(100% - ${hidden.bottom ? FADE : 0}px), transparent)`,
+									WebkitMaskImage: `linear-gradient(to bottom, transparent, black ${hidden.top ? FADE : 0}px, black calc(100% - ${hidden.bottom ? FADE : 0}px), transparent)`
+								}
+							: undefined
+					}
+					className="pointer-events-auto flex max-h-[min(18rem,40vh)] flex-col overflow-y-auto overscroll-contain py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+				>
+					{turns.map((turn, index) => (
+						<TurnTick
+							key={turn.id}
+							turn={turn}
+							index={index}
+							total={turns.length}
+							active={turn.id === activeId}
+							pointerY={pointerY}
+							railScroll={railScroll}
+							reduced={reduced}
+							onJump={jump}
+						/>
+					))}
+				</nav>
+			</TooltipProvider>
+		</div>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/types.ts b/packages/ui/src/components/coding-agent/types.ts
new file mode 100644
index 0000000..7e6429a
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/types.ts
@@ -0,0 +1,149 @@
+import type * as React from 'react';
+
+import type { AgentRun, FlowBeat, HarnessEvent, PermissionDecision, RunRole, RunSignal, SessionStatus, Worktree } from './harness';
+import type { HarnessStore } from './harness-store';
+
+import type { AskAnswer, AskQuestion } from '../ai/ask-card';
+import type { AiModel, ModelSelection } from '../ai/model-selector';
+
+/** `tabs` puts sessions in a strip across the top; `sidebar` lists them by project down the left. */
+export type CodingAgentLayout = 'tabs' | 'sidebar';
+
+/** Where a session's agent works: the project checkout itself, or its own git worktree. */
+export type WorkspaceLocation = 'local' | 'worktree';
+
+export type CodingProject = {
+	id: string;
+	name: string;
+	/** Shown in the terminal prompt and the project menu, e.g. `~/code/acme-web`. */
+	path: string;
+	branch: string;
+	/** The checkout as the agent first sees it, keyed by path. Edits are layered on top per session. */
+	files: Record<string, string>;
+};
+
+export type { SessionStatus, ToolCallBeat } from './harness';
+
+/** Events a script plays as they are, from the run playing it: messages between agents and the state of their branches. */
+type CoordinationBeat = HarnessEvent extends infer E
+	? E extends { kind: 'message' | 'handoff' | 'route' | 'phase' | 'task' | 'worktree' | 'pr' | 'check' }
+		? Omit<E, 'id' | 'runId'>
+		: never
+	: never;
+
+/**
+ * One scripted step of a session. Each waits `delay` ms (or a sensible default for its kind) before it lands, and
+ * `permission` and `question` hold the run until they are answered.
+ */
+export type SessionBeat = { delay?: number } & (
+	| FlowBeat
+	| { kind: 'permission'; title: string; command: string }
+	| { kind: 'question'; questions: AskQuestion[] }
+	// Multi-agent beats. A spawn starts a child run with its own script, which plays alongside the parent.
+	| { kind: 'spawn'; agent: SpawnedAgent; script: SessionBeat[]; played?: number }
+	/** Waits for the named children (all of this run's children by default), then lands a row of their results. */
+	| { kind: 'await'; agents?: string[] }
+	| CoordinationBeat
+);
+
+/**
+ * A child agent a script spawns: the run it starts, as a worker unless it says otherwise. `id` is how other beats
+ * address it (`to`, `await`).
+ */
+export type SpawnedAgent = Pick<AgentRun, 'id' | 'name' | 'kind' | 'phase' | 'background' | 'workspace' | 'capabilities'> & { role?: RunRole; task: string };
+
+export type SessionBeatKind = SessionBeat['kind'];
+
+export type CodingSession = {
+	id: string;
+	title: string;
+	projectId: string;
+	location?: WorkspaceLocation;
+	/** Branch the session works on; defaults to the project's. */
+	branch?: string;
+	model?: ModelSelection;
+	/** Name of the session's own agent, shown when other agents are in play. Defaults to "Agent". */
+	agentName?: string;
+	/** A scripted run for demos and fixtures. A real harness passes `events` or `store` instead. */
+	script?: SessionBeat[];
+	/** How many beats already happened before the session opened; they land at once instead of playing. */
+	played?: number;
+	/** A host-controlled event log; the session shows exactly what it describes. */
+	events?: HarnessEvent[];
+	/** A store the host pushes events into as they happen. */
+	store?: HarnessStore;
+	/**
+	 * Worktrees known when the session opens, with their pull requests. The first is the session's own checkout;
+	 * without one it is the session's branch. Agents' own worktrees join as they spawn.
+	 */
+	worktrees?: Worktree[];
+	/** Short relative time for lists, e.g. "2m". */
+	updatedLabel?: string;
+};
+
+/** A run as the shell lists it under its session in the sidebar. */
+export type RunSummary = { id: string; name: string; parentRunId?: string; depth: number; status: RunSignal };
+
+export type SessionPatch = {
+	title?: string;
+	status?: SessionStatus;
+	unread?: boolean;
+	/** Share of the script played, 0 to 1. */
+	progress?: number;
+	changedFiles?: number;
+	/** The session's other agents, for the sidebar's indented rows. */
+	runs?: RunSummary[];
+};
+
+export type SlashCommand = {
+	name: string;
+	description: string;
+};
+
+export type CodingAgentData = {
+	/** Product name for the new-session screen and the sidebar header. */
+	brand: string;
+	projects: CodingProject[];
+	sessions: CodingSession[];
+	/** Sessions open (as tabs, or kept live in the sidebar layout) on first render, in order. */
+	openSessionIds: string[];
+	models: AiModel[];
+	defaultModel: ModelSelection;
+	commands: SlashCommand[];
+	/** Context window used by the header's context ring. */
+	contextWindow: number;
+	/** Share of the plan's usage spent, 0 to 100. Shows a notice above the composer from 80. */
+	usagePercent?: number;
+	/** Beats played after a message is sent once a session's script has finished. */
+	followUp: (text: string) => SessionBeat[];
+	/** Beats for a brand new session started from the new-session screen. */
+	newSessionScript: (text: string) => SessionBeat[];
+};
+
+/** Everything the template asks its host to do. The demo plays the result itself; a host wires real effects. */
+export type CodingAgentAction =
+	| { type: 'new-session'; sessionId: string; projectId: string; location: WorkspaceLocation }
+	| { type: 'close-session'; sessionId: string }
+	| { type: 'rename-session'; sessionId: string; title: string }
+	| { type: 'delete-session'; sessionId: string }
+	| { type: 'export-session'; sessionId: string }
+	| { type: 'send'; sessionId: string; text: string; attachments: string[] }
+	| { type: 'stop'; sessionId: string }
+	| { type: 'stop-run'; sessionId: string; runId: string }
+	| { type: 'pause-run'; sessionId: string; runId: string }
+	| { type: 'resume-run'; sessionId: string; runId: string }
+	| { type: 'steer-run'; sessionId: string; runId: string; text: string; attachments: string[] }
+	| { type: 'retry-run'; sessionId: string; runId: string }
+	| { type: 'permission'; sessionId: string; runId: string; requestId: string; decision: PermissionDecision; command: string }
+	| { type: 'answer'; sessionId: string; runId: string; requestId: string; answer: AskAnswer }
+	| { type: 'open-file'; sessionId: string; path: string }
+	| { type: 'open-url'; sessionId: string; url: string }
+	| { type: 'comment'; sessionId: string; path: string; line: number; text: string }
+	| { type: 'terminal-command'; sessionId: string; command: string }
+	| { type: 'open-pull-request'; sessionId: string; worktreeId: string; number: number; url?: string }
+	| { type: 'create-pull-request'; sessionId: string; worktreeId: string }
+	| { type: 'rerun-checks'; sessionId: string; worktreeId: string; checkIds: string[] }
+	| { type: 'layout'; layout: CodingAgentLayout };
+
+/** Renders the page shown in a browser panel tab for a URL. Return null to show the "can't preview" state. */
+export type BrowserPageRenderer = (url: string) => React.ReactNode | null;
diff --git a/packages/ui/src/components/coding-agent/use-draft-context.ts b/packages/ui/src/components/coding-agent/use-draft-context.ts
new file mode 100644
index 0000000..be46c0c
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/use-draft-context.ts
@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+
+import type { LineComment } from './review-panel';
+import type { ComposerAttachment } from './session-composer';
+
+/** A file, or a range of its lines ("12" or "12–18"), to send along with the next message. */
+export type FileReference = { path: string; lines?: string };
+
+/** Something waiting to go out with the next message: a file reference, or a comment on a line of the diff. */
+type DraftItem = ({ kind: 'file' } & FileReference) | { kind: 'comment'; comment: LineComment };
+
+type DraftState = {
+	pending: DraftItem[];
+	/** Comments that went out stay on the diff, marked as sent. */
+	sent: LineComment[];
+	/** Comments added so far, which numbers the next one. */
+	comments: number;
+};
+
+type DraftAction =
+	| { type: 'attach'; file: FileReference }
+	| { type: 'comment'; comment: Omit<LineComment, 'id' | 'sent'> }
+	| { type: 'remove'; id: string }
+	| { type: 'sent' };
+
+const basename = (path: string) => path.split('/').pop() ?? path;
+
+/** An item's chip id. It is only ever compared, so a path can hold any character without breaking it apart. */
+function itemId(item: DraftItem) {
+	return item.kind === 'comment' ? `comment:${item.comment.id}` : `file:${JSON.stringify([item.path, item.lines ?? ''])}`;
+}
+
+/** The composer chip: a file leads with its name, which tells files apart, and keeps its folder as the second line. */
+function chipOf(item: DraftItem): ComposerAttachment {
+	if (item.kind === 'comment') {
+		return { id: itemId(item), kind: 'comment', label: `${basename(item.comment.path)}:${item.comment.line}`, detail: item.comment.text };
+	}
+	const name = basename(item.path);
+	const folder = item.path.slice(0, -name.length - 1);
+	return { id: itemId(item), kind: 'file', label: item.lines ? `${name}:${item.lines}` : name, detail: folder || undefined };
+}
+
+/** What the host receives: a file as its full reference, a comment as the line it's on and what was said. */
+function serialize(item: DraftItem) {
+	if (item.kind === 'comment') return `${basename(item.comment.path)}:${item.comment.line}: ${item.comment.text}`;
+	return item.lines ? `${item.path}:${item.lines}` : item.path;
+}
+
+function draftReducer(state: DraftState, action: DraftAction): DraftState {
+	switch (action.type) {
+		case 'attach': {
+			const item: DraftItem = { kind: 'file', ...action.file };
+			return state.pending.some((entry) => itemId(entry) === itemId(item)) ? state : { ...state, pending: [...state.pending, item] };
+		}
+		case 'comment': {
+			const comments = state.comments + 1;
+			return { ...state, comments, pending: [...state.pending, { kind: 'comment', comment: { ...action.comment, id: `comment-${comments}` } }] };
+		}
+		case 'remove':
+			// Removing a comment's chip takes the comment off the diff too; one already sent has no chip to remove.
+			return { ...state, pending: state.pending.filter((item) => itemId(item) !== action.id) };
+		case 'sent':
+			return {
+				...state,
+				pending: [],
+				sent: [...state.sent, ...state.pending.flatMap((item) => (item.kind === 'comment' ? [{ ...item.comment, sent: true }] : []))]
+			};
+	}
+}
+
+const EMPTY: DraftState = { pending: [], sent: [], comments: 0 };
+
+/**
+ * What rides along with the next message: files and line ranges you attached and comments you left on the diff.
+ * The diff's comments and the composer's chips are both views of it, so removing a chip takes its comment off the
+ * diff, and sending marks the comments sent.
+ */
+export function useDraftContext() {
+	const [state, dispatch] = React.useReducer(draftReducer, EMPTY);
+	const comments = React.useMemo(
+		() => [...state.sent, ...state.pending.flatMap((item) => (item.kind === 'comment' ? [item.comment] : []))],
+		[state.sent, state.pending]
+	);
+	const attachments = React.useMemo(() => state.pending.map(chipOf), [state.pending]);
+	return {
+		comments,
+		attachments,
+		attach: (file: FileReference) => dispatch({ type: 'attach', file }),
+		comment: (comment: Omit<LineComment, 'id' | 'sent'>) => dispatch({ type: 'comment', comment }),
+		remove: (id: string) => dispatch({ type: 'remove', id }),
+		/** Everything pending, as the host receives it; the comments stay on the diff, marked as sent. */
+		take: () => {
+			dispatch({ type: 'sent' });
+			return state.pending.map(serialize);
+		}
+	};
+}
diff --git a/packages/ui/src/components/coding-agent/use-harness.ts b/packages/ui/src/components/coding-agent/use-harness.ts
new file mode 100644
index 0000000..d6a377f
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/use-harness.ts
@@ -0,0 +1,572 @@
+'use client';
+
+import * as React from 'react';
+
+import type { AskAnswer } from '../ai/ask-card';
+import { REDUCED_MOTION_DELAY } from '../agents-builder/playback';
+import { prefersReducedMotion } from '../workspace-kit/reduced-motion';
+import {
+	type AgentRun,
+	awaitsPerson,
+	createHarnessView,
+	type HarnessEvent,
+	type HarnessRequest,
+	type HarnessView,
+	type PermissionDecision,
+	reduceHarness,
+	type RequestResolution,
+	type RunCapabilities,
+	type RunStatus,
+	runTokens,
+	sessionStatus,
+	summarizeWorktrees,
+	type Worktree
+} from './harness';
+import { useHarnessStoreEvents } from './harness-store';
+import type { CodingAgentAction, CodingSession, SessionBeat, SessionBeatKind } from './types';
+
+/** Default wait before each kind lands, in ms. */
+const BEAT_DELAY: Record<SessionBeatKind, number> = {
+	user: 250,
+	reasoning: 500,
+	say: 450,
+	tools: 500,
+	edit: 900,
+	shell: 600,
+	plan: 400,
+	permission: 600,
+	question: 600,
+	browse: 600,
+	notice: 300,
+	error: 700,
+	spawn: 500,
+	await: 300,
+	message: 700,
+	handoff: 500,
+	route: 500,
+	phase: 300,
+	task: 250,
+	worktree: 200,
+	pr: 600,
+	check: 500
+};
+
+/** How long a running command or tool batch spins before it settles. */
+const SETTLE_MS = { shell: 1300, tools: 1100 } as const;
+
+
+/** What a scripted child may do unless its spawn says otherwise. */
+const CHILD_CAPABILITIES: RunCapabilities = { steer: true, stop: true, pause: true };
+
+/** Typewriter pace for replies: fast enough to read along, capped so long answers don't stall the run. */
+export function revealDuration(text: string) {
+	return Math.min(Math.max(text.length * 9, 450), 2400);
+}
+
+function holdFor(beat: SessionBeat) {
+	if (beat.kind === 'say') return revealDuration(beat.text);
+	if (beat.kind === 'reasoning') return beat.durationMs;
+	return 0;
+}
+
+type Op = { id: string; delay: number } & ({ op: 'beat'; beat: SessionBeat } | { op: 'settle'; eventId?: string });
+
+/**
+ * Where a scripted run is in its script. Everything the view also shows (its status, a pause, the request it is held
+ * at) lives in the harness view alone, so the two can't disagree.
+ */
+type Flow = {
+	queue: Op[];
+	/** Messages sent while the run was busy, waiting for its turn to end. */
+	queued: { id: string; text: string }[];
+	/** What a retry repeats. */
+	lastStep: SessionBeat | null;
+	played: number;
+	/** Children this run is waiting on before it continues. */
+	awaiting: string[] | null;
+};
+
+type ScriptState = { flows: Record<string, Flow>; view: HarnessView; nextId: number; followUp: (text: string) => SessionBeat[] };
+
+type ScriptAction =
+	| { type: 'due'; runId: string; opId: string }
+	| { type: 'resolve'; requestId: string; decision: PermissionDecision }
+	| { type: 'answer'; requestId: string; answer: AskAnswer }
+	| { type: 'send'; runId: string; text: string; beats: SessionBeat[]; attachments: string[]; steer?: boolean }
+	| { type: 'unqueue'; runId: string; id: string }
+	| { type: 'stop'; runId: string }
+	| { type: 'pause'; runId: string }
+	| { type: 'resume'; runId: string }
+	| { type: 'retry'; runId: string }
+	| { type: 'terminal'; lines: { kind: 'command' | 'output' | 'error'; text: string }[] }
+	| { type: 'clear-terminal' };
+
+const TERMINAL: RunStatus[] = ['done', 'failed', 'cancelled', 'idle'];
+
+/** Beats that report on the run instead of being a step it took. */
+const SIDE_BEATS: SessionBeatKind[] = ['error', 'notice', 'worktree', 'pr', 'check'];
+
+function nextId(state: ScriptState, prefix: string) {
+	state.nextId += 1;
+	return `${prefix}-${state.nextId}`;
+}
+
+type EventInput = HarnessEvent extends infer E ? (E extends HarnessEvent ? Omit<E, 'id'> : never) : never;
+
+function emit(state: ScriptState, event: EventInput) {
+	const id = nextId(state, 'e');
+	state.view = reduceHarness(state.view, { ...event, id } as HarnessEvent);
+	return id;
+}
+
+function statusOf(state: ScriptState, runId: string): RunStatus | undefined {
+	return state.view.runs[runId]?.status;
+}
+
+function isSettled(state: ScriptState, runId: string) {
+	return TERMINAL.includes(statusOf(state, runId) ?? 'done');
+}
+
+function setStatus(state: ScriptState, runId: string, status: RunStatus, extra: { waitingOn?: Extract<HarnessEvent, { kind: 'run.status' }>['waitingOn']; summary?: string } = {}) {
+	emit(state, { kind: 'run.status', runId, status, ...extra });
+}
+
+function op(state: ScriptState, beat: SessionBeat): Op {
+	return { id: nextId(state, 'op'), op: 'beat', beat, delay: beat.delay ?? BEAT_DELAY[beat.kind] };
+}
+
+function newFlow(): Flow {
+	return { queue: [], queued: [], lastStep: null, played: 0, awaiting: null };
+}
+
+function childrenOf(state: ScriptState, runId: string) {
+	return state.view.runOrder.filter((id) => state.view.runs[id]?.parentRunId === runId);
+}
+
+/**
+ * Holds a run on a person: a command to approve or a question to answer. In history the gate was settled long ago,
+ * so the command was allowed and each question took its first option.
+ */
+function raise(state: ScriptState, runId: string, beat: Extract<SessionBeat, { kind: 'permission' | 'question' }>, live: boolean) {
+	const id = nextId(state, 'req');
+	const request: HarnessRequest =
+		beat.kind === 'permission' ? { id, type: 'approval', title: beat.title, command: beat.command } : { id, type: 'question', questions: beat.questions };
+	emit(state, { kind: 'request', runId, request });
+	if (live) return;
+	const resolution: RequestResolution =
+		beat.kind === 'permission'
+			? { decision: 'once' }
+			: { answer: { choices: Object.fromEntries(beat.questions.map((question) => [question.id, { option: question.options[0]?.id ?? '' }])) } };
+	emit(state, { kind: 'request.resolved', runId, requestId: id, ...resolution });
+}
+
+/** Lands one beat for a run. `live` is false while replaying history, which lands at once and settles every gate. */
+function land(state: ScriptState, runId: string, beat: SessionBeat, live: boolean) {
+	const flow = state.flows[runId];
+	flow.played += 1;
+	// Retrying repeats the last thing the agent did, not a status report about its branch.
+	if (!SIDE_BEATS.includes(beat.kind)) flow.lastStep = beat;
+	switch (beat.kind) {
+		case 'permission':
+		case 'question':
+			raise(state, runId, beat, live);
+			return;
+		case 'spawn': {
+			const childId = beat.agent.id;
+			emit(state, {
+				kind: 'run.spawned',
+				runId: childId,
+				run: { ...beat.agent, role: beat.agent.role ?? 'worker', parentRunId: runId, capabilities: beat.agent.capabilities ?? CHILD_CAPABILITIES }
+			});
+			state.flows[childId] = newFlow();
+			// A spawn in history brought its child's whole script with it, unless it says how far the child got.
+			const played = beat.played ?? (live ? 0 : beat.script.length);
+			setStatus(state, childId, 'running');
+			for (const childBeat of beat.script.slice(0, played)) land(state, childId, childBeat, false);
+			state.flows[childId].queue = beat.script.slice(played).map((entry) => op(state, entry));
+			settle(state, childId);
+			return;
+		}
+		case 'await': {
+			const targets = beat.agents ?? childrenOf(state, runId);
+			const pending = targets.filter((id) => !isSettled(state, id));
+			if (!live || pending.length === 0) {
+				emit(state, { kind: 'fan-in', runId, runIds: targets });
+				return;
+			}
+			flow.awaiting = targets;
+			setStatus(state, runId, 'waiting', { waitingOn: { kind: 'agent', runIds: pending } });
+			return;
+		}
+		case 'error':
+			emit(state, { kind: 'beat', runId, beat, live });
+			setStatus(state, runId, 'failed');
+			return;
+		case 'user':
+		case 'reasoning':
+		case 'say':
+		case 'tools':
+		case 'edit':
+		case 'shell':
+		case 'plan':
+		case 'browse':
+		case 'notice': {
+			// A command or a batch of reads spins for a moment before it settles.
+			const spins = live && (beat.kind === 'shell' || beat.kind === 'tools') ? SETTLE_MS[beat.kind] : 0;
+			const eventId = emit(state, { kind: 'beat', runId, beat, live, running: spins > 0 });
+			if (spins) flow.queue.unshift({ id: nextId(state, 'op'), op: 'settle', eventId, delay: spins });
+			return;
+		}
+		default:
+			// The rest are harness events already, sent from this run.
+			emit(state, { ...beat, runId });
+	}
+}
+
+/** When every child a parent waits on has stopped, it gathers their results and carries on. */
+function releaseParent(state: ScriptState, childId: string) {
+	const parentId = state.view.runs[childId]?.parentRunId;
+	const parent = parentId ? state.flows[parentId] : undefined;
+	if (!parentId || !parent?.awaiting) return;
+	const pending = parent.awaiting.filter((id) => !isSettled(state, id));
+	if (pending.length > 0) {
+		emit(state, { kind: 'run.status', runId: parentId, status: 'waiting', waitingOn: { kind: 'agent', runIds: pending } });
+		return;
+	}
+	emit(state, { kind: 'fan-in', runId: parentId, runIds: parent.awaiting });
+	parent.awaiting = null;
+	setStatus(state, parentId, 'running');
+	settle(state, parentId);
+}
+
+/** Closes a turn once its queue is empty: summarises the changes, sends the next queued message, or rests. */
+function settle(state: ScriptState, runId: string) {
+	const flow = state.flows[runId];
+	if (!flow || statusOf(state, runId) !== 'running' || flow.queue.length > 0 || flow.awaiting) return;
+	emit(state, { kind: 'turn.end', runId });
+	const [next, ...rest] = flow.queued;
+	flow.queued = rest;
+	if (next) {
+		const beats: SessionBeat[] = [{ kind: 'user', text: next.text, delay: 200 }, ...state.followUp(next.text)];
+		flow.queue = beats.map((beat) => op(state, beat));
+		return;
+	}
+	const isRoot = runId === state.view.rootRunId;
+	// The session's own agent rests and can be messaged again; a child reports back and is done.
+	setStatus(state, runId, isRoot ? 'idle' : 'done', { summary: state.view.runs[runId]?.summary });
+	if (!isRoot) releaseParent(state, runId);
+}
+
+function stopRun(state: ScriptState, runId: string, note: string) {
+	const flow = state.flows[runId];
+	if (!flow) return;
+	// Dropped first, so the children stopping below don't hand their results back to a run that's stopping too.
+	flow.queue = [];
+	flow.queued = [];
+	flow.awaiting = null;
+	// Each child stops its own children; the status is read fresh, so nobody below is stopped twice.
+	for (const childId of childrenOf(state, runId)) {
+		if (!isSettled(state, childId)) stopRun(state, childId, 'Stopped with its parent.');
+	}
+	for (const item of state.view.runs[runId]?.items ?? []) {
+		if (item.type === 'beat' && item.running) emit(state, { kind: 'beat.settled', runId, eventId: item.id });
+	}
+	emit(state, { kind: 'beat', runId, beat: { kind: 'notice', text: note } });
+	const isRoot = runId === state.view.rootRunId;
+	setStatus(state, runId, isRoot ? 'idle' : 'cancelled');
+	if (!isRoot) releaseParent(state, runId);
+}
+
+function clone(state: ScriptState): ScriptState {
+	const flows: Record<string, Flow> = {};
+	for (const [id, flow] of Object.entries(state.flows)) flows[id] = { ...flow, queue: [...flow.queue], queued: [...flow.queued] };
+	return { ...state, flows };
+}
+
+function scriptReducer(current: ScriptState, action: ScriptAction): ScriptState {
+	const state = clone(current);
+	switch (action.type) {
+		case 'due': {
+			const flow = state.flows[action.runId];
+			const head = flow?.queue[0];
+			if (!flow || !head || head.id !== action.opId || statusOf(state, action.runId) !== 'running') return current;
+			flow.queue.shift();
+			if (head.op === 'settle') {
+				if (head.eventId) emit(state, { kind: 'beat.settled', runId: action.runId, eventId: head.eventId });
+			} else {
+				land(state, action.runId, head.beat, true);
+			}
+			// The beat that just landed holds the next one back while it reveals or thinks.
+			const hold = head.op === 'beat' ? holdFor(head.beat) : 0;
+			if (hold && flow.queue[0]) flow.queue[0] = { ...flow.queue[0], delay: flow.queue[0].delay + hold };
+			// The last beat of a turn still gets its hold, so the turn closes after the reply has revealed.
+			else if (hold && statusOf(state, action.runId) === 'running') flow.queue.push({ id: nextId(state, 'op'), op: 'settle', delay: hold });
+			settle(state, action.runId);
+			return state;
+		}
+		case 'resolve':
+		case 'answer': {
+			const runId = state.view.pending.find((entry) => entry.request.id === action.requestId)?.runId;
+			const run = runId ? state.view.runs[runId] : undefined;
+			const flow = runId ? state.flows[runId] : undefined;
+			// Only a run still held at this request picks back up; one stopped meanwhile stays stopped.
+			if (!runId || !run || !flow || !awaitsPerson(run) || run.waitingOn.requestId !== action.requestId) return current;
+			const resolution: RequestResolution = action.type === 'answer' ? { answer: action.answer } : { decision: action.decision };
+			emit(state, { kind: 'request.resolved', runId, requestId: action.requestId, ...resolution });
+			if (action.type === 'resolve' && action.decision === 'deny') {
+				// A denied command is skipped along with its output, and the agent says so.
+				if (flow.queue[0]?.op === 'beat' && flow.queue[0].beat.kind === 'shell') {
+					flow.queue.shift();
+					flow.played += 1;
+				}
+				flow.queue.unshift(op(state, { kind: 'notice', text: 'Command denied. Continuing without running it.', delay: 300 }));
+			}
+			settle(state, runId);
+			return state;
+		}
+		case 'send': {
+			const flow = state.flows[action.runId];
+			if (!flow) return current;
+			if (action.steer) emit(state, { kind: 'message', runId: action.runId, from: 'you', to: [action.runId], text: action.text, protocol: 'steer' });
+			const status = statusOf(state, action.runId);
+			const busy = status === 'running' || status === 'waiting';
+			if (busy && !action.steer) {
+				flow.queued.push({ id: nextId(state, 'queued'), text: action.text });
+				return state;
+			}
+			const beats: SessionBeat[] = action.steer ? action.beats : [{ kind: 'user', text: action.text, delay: 0 }, ...action.beats];
+			// Steering a busy run slots its reply in next; a resting run starts a new turn.
+			flow.queue = busy ? [...beats.map((beat) => op(state, beat)), ...flow.queue] : beats.map((beat) => op(state, beat));
+			if (!busy) setStatus(state, action.runId, 'running');
+			return state;
+		}
+		case 'unqueue': {
+			const flow = state.flows[action.runId];
+			if (flow) flow.queued = flow.queued.filter((entry) => entry.id !== action.id);
+			return state;
+		}
+		case 'stop': {
+			if (!state.flows[action.runId] || isSettled(state, action.runId)) return current;
+			stopRun(state, action.runId, action.runId === state.view.rootRunId ? 'Stopped. Send a message to pick it back up.' : 'Stopped.');
+			return state;
+		}
+		case 'pause': {
+			if (!state.flows[action.runId] || statusOf(state, action.runId) !== 'running') return current;
+			setStatus(state, action.runId, 'paused');
+			return state;
+		}
+		case 'resume': {
+			if (!state.flows[action.runId] || statusOf(state, action.runId) !== 'paused') return current;
+			setStatus(state, action.runId, 'running');
+			return state;
+		}
+		case 'retry': {
+			const flow = state.flows[action.runId];
+			if (!flow || statusOf(state, action.runId) !== 'failed') return current;
+			emit(state, { kind: 'beat', runId: action.runId, beat: { kind: 'notice', text: 'Retrying from the failed step.' } });
+			// The step that failed runs again before whatever was left of the script.
+			if (flow.lastStep && flow.lastStep.kind !== 'user') flow.queue.unshift(op(state, { ...flow.lastStep, delay: 500 }));
+			setStatus(state, action.runId, 'running');
+			settle(state, action.runId);
+			return state;
+		}
+		case 'terminal':
+			emit(state, { kind: 'terminal', runId: state.view.rootRunId, lines: action.lines });
+			return state;
+		case 'clear-terminal':
+			emit(state, { kind: 'terminal.clear', runId: state.view.rootRunId });
+			return state;
+	}
+}
+
+/** What a control asks the host to do, or null for the ones that only ever touch the local script. */
+function hostAction(control: ScriptAction, view: HarnessView, sessionId: string): CodingAgentAction | null {
+	switch (control.type) {
+		case 'send':
+			return control.steer
+				? { type: 'steer-run', sessionId, runId: control.runId, text: control.text, attachments: control.attachments }
+				: { type: 'send', sessionId, text: control.text, attachments: control.attachments };
+		case 'stop':
+			// Stopping the session's own agent stops the session; any other agent stops on its own.
+			return control.runId === view.rootRunId ? { type: 'stop', sessionId } : { type: 'stop-run', sessionId, runId: control.runId };
+		case 'pause':
+			return { type: 'pause-run', sessionId, runId: control.runId };
+		case 'resume':
+			return { type: 'resume-run', sessionId, runId: control.runId };
+		case 'retry':
+			return { type: 'retry-run', sessionId, runId: control.runId };
+		case 'resolve': {
+			const entry = view.pending.find((pending) => pending.request.id === control.requestId);
+			if (entry?.request.type !== 'approval') return null;
+			return { type: 'permission', sessionId, runId: entry.runId, requestId: control.requestId, decision: control.decision, command: entry.request.command };
+		}
+		case 'answer': {
+			const entry = view.pending.find((pending) => pending.request.id === control.requestId);
+			if (!entry) return null;
+			return { type: 'answer', sessionId, runId: entry.runId, requestId: control.requestId, answer: control.answer };
+		}
+		default:
+			return null;
+	}
+}
+
+function rootRun(session: CodingSession): AgentRun {
+	return { id: 'root', name: session.agentName ?? 'Agent', role: 'root', capabilities: { steer: true, stop: true } };
+}
+
+/** The session's own checkout and any worktrees it already knows about. */
+function sessionWorktrees(session: CodingSession, branch: string): Worktree[] {
+	const known = session.worktrees ?? [];
+	if (known.length) return known;
+	return [{ id: branch, branch, kind: session.location === 'worktree' ? 'worktree' : 'checkout' }];
+}
+
+function initialScript(session: CodingSession, files: Record<string, string>, branch: string, followUp: (text: string) => SessionBeat[]): ScriptState {
+	const script = session.script ?? [];
+	const state: ScriptState = { flows: {}, view: createHarnessView(rootRun(session), files, sessionWorktrees(session, branch)), nextId: 0, followUp };
+	const root = state.view.rootRunId;
+	state.flows[root] = newFlow();
+	setStatus(state, root, 'running');
+	const played = session.played ?? 0;
+	for (const beat of script.slice(0, played)) land(state, root, beat, false);
+	state.flows[root].queue = script.slice(played).map((beat) => op(state, beat));
+	settle(state, root);
+	return state;
+}
+
+/**
+ * Times each running run's next step. Every head keeps the moment it became due, so one run landing a step never
+ * restarts another run's wait.
+ */
+function useScheduler(state: ScriptState, dispatch: React.Dispatch<ScriptAction>) {
+	const dueAt = React.useRef(new Map<string, number>());
+	const heads = Object.entries(state.flows)
+		.filter(([runId, flow]) => flow.queue[0] && state.view.runs[runId]?.status === 'running')
+		.map(([runId, flow]) => ({ runId, op: flow.queue[0] }));
+	// A paused or held run keeps its head and the moment it was due; a head that left its queue never will be.
+	const queuedHeads = new Set(Object.values(state.flows).flatMap((flow) => (flow.queue[0] ? [flow.queue[0].id] : [])));
+	const key = heads.map((head) => `${head.runId}:${head.op.id}`).join('|');
+	React.useEffect(() => {
+		for (const id of dueAt.current.keys()) if (!queuedHeads.has(id)) dueAt.current.delete(id);
+		const now = performance.now();
+		const reduced = prefersReducedMotion();
+		const timers = heads.map(({ runId, op: head }) => {
+			if (!dueAt.current.has(head.id)) dueAt.current.set(head.id, now + (reduced ? Math.min(head.delay, REDUCED_MOTION_DELAY) : head.delay));
+			const wait = Math.max(0, (dueAt.current.get(head.id) ?? now) - now);
+			return window.setTimeout(() => {
+				dueAt.current.delete(head.id);
+				dispatch({ type: 'due', runId, opId: head.id });
+			}, wait);
+		});
+		return () => timers.forEach((timer) => window.clearTimeout(timer));
+		// `key` captures the heads; the arrays themselves are rebuilt every render.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [key, dispatch]);
+}
+
+/** Reduces a host's events incrementally: an append-only log only folds what's new since the last render. */
+function useHostView(events: readonly HarnessEvent[], initial: () => HarnessView) {
+	const cache = React.useRef<{ events: readonly HarnessEvent[]; view: HarnessView } | null>(null);
+	const cached = cache.current;
+	let view: HarnessView;
+	if (cached && cached.events === events) {
+		view = cached.view;
+	} else if (cached && events.length >= cached.events.length && (cached.events.length === 0 || events[cached.events.length - 1] === cached.events[cached.events.length - 1])) {
+		// An append-only log: if the last event seen is still in place, only what came after it needs folding.
+		view = events.slice(cached.events.length).reduce(reduceHarness, cached.view);
+	} else {
+		view = events.reduce(reduceHarness, initial());
+	}
+	cache.current = { events, view };
+	return view;
+}
+
+/** What's coming next for a run, for its live status line. */
+function upcoming(flow: Flow | undefined): SessionBeatKind | undefined {
+	for (const entry of flow?.queue ?? []) if (entry.op === 'beat') return entry.beat.kind;
+	return undefined;
+}
+
+/** Share of a run's script played so far, counting what it has been sent since. */
+function playedShare(flow: Flow | undefined) {
+	if (!flow) return 1;
+	const total = flow.played + flow.queue.filter((entry) => entry.op === 'beat').length;
+	return total ? flow.played / total : 1;
+}
+
+/** The host drives the session through its `events` log or `store`; without either, the session plays its script. */
+export function isHosted(session: Pick<CodingSession, 'events' | 'store'>) {
+	return Boolean(session.events || session.store);
+}
+
+/**
+ * The session's harness: a scripted run for demos, or the host's `events` log or `store`. Either way the views get
+ * one `HarnessView` and one set of controls. Every control reaches the host through `emit` as a `CodingAgentAction`;
+ * a scripted session also plays it out, while in host mode nothing changes until the host answers with events.
+ */
+export function useHarness({
+	session,
+	files,
+	branch,
+	followUp,
+	emit: emitAction
+}: {
+	session: CodingSession;
+	files: Record<string, string>;
+	/** The branch the session works on, for its checkout when `session.worktrees` doesn't name one. */
+	branch: string;
+	followUp: (text: string) => SessionBeat[];
+	emit: (action: CodingAgentAction) => void;
+}) {
+	const host = isHosted(session);
+	const [scripted, dispatch] = React.useReducer(scriptReducer, undefined, () => initialScript(host ? { ...session, script: [] } : session, files, branch, followUp));
+	useScheduler(scripted, dispatch);
+	const storeEvents = useHarnessStoreEvents(session.store);
+	const hostEvents = session.events ?? storeEvents;
+	const hostView = useHostView(host ? hostEvents : [], () => createHarnessView(rootRun(session), files, sessionWorktrees(session, branch)));
+	const view = host ? hostView : scripted.view;
+
+	const control = (action: ScriptAction) => {
+		const forHost = hostAction(action, view, session.id);
+		if (forHost) emitAction(forHost);
+		if (!host) dispatch(action);
+	};
+
+	const changes = React.useMemo(() => Object.values(view.changes), [view.changes]);
+	// Worktree rows only change with the worktrees, the changes or the runs, not with every step an agent takes.
+	const { worktrees: worktreeMap, worktreeOrder, changes: changeMap, runOrder, runs } = view;
+	const worktrees = React.useMemo(
+		() => summarizeWorktrees(view),
+		// The runs are read only for the worktree each works in, which is set when it spawns, so `runOrder` covers it.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[worktreeMap, worktreeOrder, changeMap, runOrder]
+	);
+	const tokens = React.useMemo(() => runOrder.reduce((sum, id) => sum + runTokens(runs[id]), 0), [runOrder, runs]);
+
+	return {
+		view,
+		status: sessionStatus(view),
+		progress: host ? undefined : playedShare(scripted.flows[view.rootRunId]),
+		files: view.files,
+		changes,
+		worktrees,
+		terminal: view.terminal,
+		browse: view.browse,
+		tokens,
+		queued: (runId: string) => (host ? [] : (scripted.flows[runId]?.queued ?? [])),
+		upcoming: (runId: string) => (host ? undefined : upcoming(scripted.flows[runId])),
+		send: (runId: string, text: string, beats: SessionBeat[], attachments: string[] = []) => control({ type: 'send', runId, text, beats, attachments }),
+		steer: (runId: string, text: string, beats: SessionBeat[], attachments: string[] = []) => control({ type: 'send', runId, text, beats, attachments, steer: true }),
+		unqueue: (runId: string, id: string) => control({ type: 'unqueue', runId, id }),
+		stop: (runId: string) => control({ type: 'stop', runId }),
+		pause: (runId: string) => control({ type: 'pause', runId }),
+		resume: (runId: string) => control({ type: 'resume', runId }),
+		retry: (runId: string) => control({ type: 'retry', runId }),
+		resolvePermission: (requestId: string, decision: PermissionDecision) => control({ type: 'resolve', requestId, decision }),
+		answer: (requestId: string, answer: AskAnswer) => control({ type: 'answer', requestId, answer }),
+		appendTerminal: (lines: { kind: 'command' | 'output' | 'error'; text: string }[]) => control({ type: 'terminal', lines }),
+		clearTerminal: () => control({ type: 'clear-terminal' })
+	};
+}
+
+export type SessionHarness = ReturnType<typeof useHarness>;
diff --git a/packages/ui/src/components/coding-agent/use-panel-tabs.ts b/packages/ui/src/components/coding-agent/use-panel-tabs.ts
new file mode 100644
index 0000000..ada7a92
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/use-panel-tabs.ts
@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+
+import { useLatest } from '../workspace-kit/use-latest';
+import { browserTab, type BrowserTabState, navigate } from './browser-panel';
+import { withoutAndNeighbor } from './tab-strip';
+
+/** A tab of the side panel. Review, Agents and Tasks are fixed; files and pages open and close. */
+export type PanelTab =
+	| { id: 'review'; kind: 'review' }
+	| { id: 'agents'; kind: 'agents' }
+	| { id: 'tasks'; kind: 'tasks' }
+	| { id: string; kind: 'file'; path: string; preview: boolean }
+	| { id: string; kind: 'browser'; browser: BrowserTabState };
+
+type ClosableTab = Extract<PanelTab, { kind: 'file' | 'browser' }>;
+
+type PanelState = {
+	/** The file and browser tabs, which follow the fixed ones. */
+	tabs: ClosableTab[];
+	active: string;
+	open: boolean;
+	/** Whether the panel was open when the session got too narrow for it, so it comes back that way. */
+	openBeforeNarrow: boolean | null;
+	/** Whether the file tree shows as a column beside a wide panel. */
+	tree: boolean;
+	/** Browser tabs opened so far, which numbers the next one. */
+	browsers: number;
+};
+
+type PanelAction =
+	| { type: 'open-file'; path: string; preview: boolean }
+	| { type: 'open-browser'; url: string | null; title?: string }
+	| { type: 'browser-change'; id: string; browser: BrowserTabState }
+	| { type: 'close'; id: string; fixed: readonly string[] }
+	| { type: 'pin'; id: string }
+	| { type: 'show'; id: string }
+	| { type: 'set-open'; open: boolean }
+	| { type: 'toggle-open' }
+	| { type: 'toggle-tree' }
+	| { type: 'narrow'; narrow: boolean };
+
+const REVIEW_TAB: PanelTab = { id: 'review', kind: 'review' };
+const AGENTS_TAB: PanelTab = { id: 'agents', kind: 'agents' };
+const TASKS_TAB: PanelTab = { id: 'tasks', kind: 'tasks' };
+
+/** A file has one tab at most, so its path is its id. */
+const fileTabId = (path: string) => `file:${path}`;
+
+function showing(state: PanelState, tabs: ClosableTab[], active: string): PanelState {
+	return { ...state, tabs, active, open: true };
+}
+
+function panelReducer(state: PanelState, action: PanelAction): PanelState {
+	switch (action.type) {
+		case 'open-file': {
+			const id = fileTabId(action.path);
+			if (state.tabs.some((tab) => tab.id === id)) {
+				// Opening a file you only glanced at for keeps pins its tab.
+				const tabs = action.preview ? state.tabs : state.tabs.map((tab) => (tab.id === id && tab.kind === 'file' ? { ...tab, preview: false } : tab));
+				return showing(state, tabs, id);
+			}
+			const tab: ClosableTab = { id, kind: 'file', path: action.path, preview: action.preview };
+			// A preview tab is reused by the next file you glance at; pinning it (double-click) keeps it.
+			const previewIndex = action.preview ? state.tabs.findIndex((entry) => entry.kind === 'file' && entry.preview) : -1;
+			return showing(state, previewIndex >= 0 ? state.tabs.map((entry, index) => (index === previewIndex ? tab : entry)) : [...state.tabs, tab], id);
+		}
+		case 'open-browser': {
+			const { url, title } = action;
+			// A page the agent opens reuses the browser tab you have; a new browser tab is always a new one.
+			const existing = url ? state.tabs.find((tab) => tab.kind === 'browser') : undefined;
+			if (url && existing?.kind === 'browser') {
+				return showing(state, state.tabs.map((tab) => (tab.id === existing.id ? { ...existing, browser: navigate(existing.browser, url, title) } : tab)), existing.id);
+			}
+			const browsers = state.browsers + 1;
+			const id = `browser-${browsers}`;
+			return { ...showing(state, [...state.tabs, { id, kind: 'browser', browser: browserTab(url, title) }], id), browsers };
+		}
+		case 'browser-change':
+			return { ...state, tabs: state.tabs.map((tab) => (tab.id === action.id && tab.kind === 'browser' ? { ...tab, browser: action.browser } : tab)) };
+		case 'close': {
+			if (!state.tabs.some((tab) => tab.id === action.id)) return state;
+			const { neighbor } = withoutAndNeighbor([...action.fixed, ...state.tabs.map((tab) => tab.id)], action.id);
+			return {
+				...state,
+				tabs: state.tabs.filter((tab) => tab.id !== action.id),
+				active: state.active === action.id ? (neighbor ?? REVIEW_TAB.id) : state.active
+			};
+		}
+		case 'pin':
+			return { ...state, tabs: state.tabs.map((tab) => (tab.id === action.id && tab.kind === 'file' ? { ...tab, preview: false } : tab)) };
+		case 'show':
+			return { ...state, active: action.id, open: true };
+		case 'set-open':
+			return state.open === action.open ? state : { ...state, open: action.open };
+		case 'toggle-open':
+			return { ...state, open: !state.open };
+		case 'toggle-tree':
+			return { ...state, tree: !state.tree };
+		case 'narrow':
+			// On a narrow screen the panel would cover the chat, so it closes there, and comes back as it was once
+			// there's room again. Repeats are ignored, so a remembered state is never overwritten.
+			if (action.narrow) return state.openBeforeNarrow === null ? { ...state, openBeforeNarrow: state.open, open: false } : state;
+			return state.openBeforeNarrow === null ? state : { ...state, open: state.openBeforeNarrow, openBeforeNarrow: null };
+	}
+}
+
+function initialPanel(open: boolean): PanelState {
+	return { tabs: [], active: REVIEW_TAB.id, open, openBeforeNarrow: null, tree: true, browsers: 0 };
+}
+
+/**
+ * The side panel's tabs and whether it's open. Review always leads, then Agents once the session has started other
+ * agents and Tasks once it keeps a shared list; the files and pages you open follow, each closable.
+ */
+export function usePanelTabs({
+	defaultOpen,
+	narrow,
+	agents,
+	tasks,
+	onOpenFile,
+	onOpenUrl
+}: {
+	defaultOpen: boolean;
+	/** The session is too narrow for the panel to sit beside the chat. */
+	narrow: boolean;
+	agents: boolean;
+	tasks: boolean;
+	/** A file opened in a tab, for the host. */
+	onOpenFile?: (path: string) => void;
+	/** A browser tab went to a page, for the host. */
+	onOpenUrl?: (url: string) => void;
+}) {
+	const [state, dispatch] = React.useReducer(panelReducer, defaultOpen, initialPanel);
+	React.useEffect(() => dispatch({ type: 'narrow', narrow }), [narrow]);
+	const fixed = React.useMemo(() => [REVIEW_TAB, ...(agents ? [AGENTS_TAB] : []), ...(tasks ? [TASKS_TAB] : [])], [agents, tasks]);
+	const tabs = React.useMemo<PanelTab[]>(() => [...fixed, ...state.tabs], [fixed, state.tabs]);
+	// The actions never change, so a session's handle and memoized children built on them don't either.
+	const latest = useLatest({ fixed, onOpenFile, onOpenUrl });
+	const actions = React.useMemo(
+		() => ({
+			openFile: (path: string, preview = true) => {
+				dispatch({ type: 'open-file', path, preview });
+				latest.current.onOpenFile?.(path);
+			},
+			openBrowser: (url: string | null = null, title?: string) => dispatch({ type: 'open-browser', url, title }),
+			changeBrowser: (id: string, browser: BrowserTabState) => {
+				dispatch({ type: 'browser-change', id, browser });
+				if (browser.url) latest.current.onOpenUrl?.(browser.url);
+			},
+			close: (id: string) => dispatch({ type: 'close', id, fixed: latest.current.fixed.map((tab) => tab.id) }),
+			pin: (id: string) => dispatch({ type: 'pin', id }),
+			/** Brings a tab to the front, opening the panel if it's closed. */
+			show: (id: string) => dispatch({ type: 'show', id }),
+			setOpen: (open: boolean) => dispatch({ type: 'set-open', open }),
+			toggleOpen: () => dispatch({ type: 'toggle-open' }),
+			toggleTree: () => dispatch({ type: 'toggle-tree' })
+		}),
+		[latest]
+	);
+	return { tabs, active: state.active, open: state.open, treeOpen: state.tree, ...actions };
+}
+
+export type PanelTabs = ReturnType<typeof usePanelTabs>;
diff --git a/packages/ui/src/components/coding-agent/workspace-tree.tsx b/packages/ui/src/components/coding-agent/workspace-tree.tsx
new file mode 100644
index 0000000..83ba56c
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/workspace-tree.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { FileTree, useFileTree } from '@pierre/trees/react';
+import * as React from 'react';
+
+import { useLatest } from '../workspace-kit/use-latest';
+import { type ColorScheme, TREE_SURFACE_STYLE } from './code-surface-theme';
+import type { FileChange } from './harness';
+
+function gitStatus(changes: FileChange[]) {
+	// The same path can change in two worktrees; the tree shows it once.
+	const byPath = new Map(changes.map((change) => [change.path, change.before === null ? ('added' as const) : ('modified' as const)]));
+	return [...byPath].map(([path, status]) => ({ path, status }));
+}
+
+/**
+ * The session's checkout as a searchable tree, with changed files marked and their folders rolled up. Choosing a
+ * file opens it in a preview tab.
+ */
+export function WorkspaceTree({
+	paths,
+	changes,
+	selected,
+	scheme,
+	onOpen
+}: {
+	paths: string[];
+	changes: FileChange[];
+	selected: string | null;
+	scheme: ColorScheme;
+	onOpen: (path: string) => void;
+}) {
+	// The tree's selection callback is fixed when its model is created, so it reads the newest handler and paths.
+	const onOpenRef = useLatest(onOpen);
+	const fileSet = useLatest(React.useMemo(() => new Set(paths), [paths]));
+	const { model } = useFileTree({
+		paths,
+		initialExpansion: 1,
+		// Deep single-child folders stay separate rows; joined into one they become unreadable slivers in a narrow column.
+		flattenEmptyDirectories: false,
+		search: true,
+		fileTreeSearchMode: 'hide-non-matches',
+		gitStatus: gitStatus(changes),
+		icons: { set: 'standard', colored: false },
+		itemHeight: 26,
+		initialSelectedPaths: selected ? [selected] : [],
+		onSelectionChange: (selection) => {
+			const path = selection[0];
+			// Folders select too; only files open.
+			if (path && fileSet.current.has(path)) onOpenRef.current(path);
+		}
+	});
+
+	// The model is created once, so later paths and statuses are pushed into it.
+	const pathsKey = paths.join('\n');
+	React.useEffect(() => {
+		model.resetPaths(paths);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [model, pathsKey]);
+	React.useEffect(() => {
+		model.setGitStatus(gitStatus(changes));
+	}, [model, changes]);
+	// The highlighted row follows the open file, however it was opened, so clicking it again always registers.
+	React.useEffect(() => {
+		for (const path of model.getSelectedPaths()) if (path !== selected) model.getItem(path)?.deselect();
+		if (!selected) return;
+		const item = model.getItem(selected);
+		if (item && !item.isSelected()) {
+			item.select();
+			model.scrollToPath(selected, { offset: 'nearest' });
+		}
+	}, [model, selected]);
+
+	return (
+		<FileTree
+			model={model}
+			aria-label="Files"
+			className="h-full"
+			style={{ ...TREE_SURFACE_STYLE, colorScheme: scheme }}
+		/>
+	);
+}
diff --git a/packages/ui/src/components/coding-agent/worktree-picker.tsx b/packages/ui/src/components/coding-agent/worktree-picker.tsx
new file mode 100644
index 0000000..563ff4a
--- /dev/null
+++ b/packages/ui/src/components/coding-agent/worktree-picker.tsx
@@ -0,0 +1,406 @@
+'use client';
+
+import { ArrowRight, Check, ChevronDown, ExternalLink, GitBranch, GitCompareArrows, GitPullRequest, RotateCcw, TriangleAlert } from 'lucide-react';
+import * as React from 'react';
+
+import { formatCount, plural } from '../../lib/intl';
+import { cn } from '../../lib/utils';
+import { StatusIcon } from '../ai/tool';
+import { Command, CommandGroup, CommandItem, CommandList } from '../command';
+import { Popover, PopoverContent, popoverSurfaceClass, PopoverTrigger } from '../popover';
+import { MiddleTruncate } from '../workspace-kit/middle-truncate';
+import { focusRingClass, TooltipIconButton } from '../workspace-kit/primitives';
+import { type CheckTally, type CICheck, checksOutcome, type FileChange, lineTotals, sessionChecks, type Worktree, type WorktreeSummary } from './harness';
+import { toolbarButtonClass } from './session-surface';
+import { AgentMark } from './run-presentation';
+
+/** What the picker asks the session to do; the session hands these to the host. */
+export type WorktreeAction =
+	| { type: 'open-pull-request'; worktreeId: string; number: number; url?: string }
+	| { type: 'create-pull-request'; worktreeId: string }
+	| { type: 'rerun-checks'; worktreeId: string; checkIds: string[] };
+
+/** What the review shows: every change, one worktree's, or one agent's. */
+export type ChangeScope = { kind: 'all' } | { kind: 'worktree'; id: string } | { kind: 'run'; id: string };
+
+/** The changes a scope keeps. */
+export function scopeChanges(changes: FileChange[], scope: ChangeScope) {
+	if (scope.kind === 'worktree') return changes.filter((change) => change.worktreeId === scope.id);
+	if (scope.kind === 'run') return changes.filter((change) => change.runIds.includes(scope.id));
+	return changes;
+}
+
+/** A scope as its row's value in the list, which is how the list tracks the row in focus. */
+function scopeValue(scope: ChangeScope) {
+	return scope.kind === 'all' ? 'all' : `${scope.kind}:${scope.id}`;
+}
+
+type Outcome = ReturnType<typeof checksOutcome>;
+
+const OUTCOME_ICON = { failed: 'error', running: 'running', passed: 'success' } as const;
+
+/** "1 file", "1,284 files". */
+function fileCount(count: number) {
+	return `${formatCount(count)} ${plural(count, { one: 'file', other: 'files' })}`;
+}
+
+function tallyText(tally: CheckTally) {
+	return [
+		tally.failed && `${tally.failed} failed`,
+		tally.running && `${tally.running} running`,
+		tally.queued && `${tally.queued} queued`,
+		tally.passed && `${tally.passed} passed`,
+		tally.skipped && `${tally.skipped} skipped`
+	]
+		.filter(Boolean)
+		.join(', ');
+}
+
+/** A worktree's state as one 16px glyph: its CI outcome, or a plain branch when there's nothing to check. */
+function OutcomeGlyph({ outcome }: { outcome: Outcome }) {
+	return (
+		<span className="grid size-4 shrink-0 place-items-center">
+			{outcome === 'none' ? <GitBranch aria-hidden="true" className="size-3.5 text-muted-foreground" /> : <StatusIcon status={OUTCOME_ICON[outcome]} />}
+		</span>
+	);
+}
+
+/** Where the pull request stands, as label and value pairs; colour only for what needs you. */
+function prFacts(worktree: Worktree): { label: string; value: string; tone?: 'bad' | 'good' }[] {
+	const pr = worktree.pr;
+	const position =
+		worktree.ahead || worktree.behind ? [worktree.ahead ? `↑${worktree.ahead}` : null, worktree.behind ? `↓${worktree.behind}` : null].filter(Boolean).join(' ') : 'Even';
+	if (!pr) return [{ label: 'Branch', value: position }];
+	const review =
+		pr.state === 'draft'
+			? { value: 'Draft' }
+			: pr.review === 'changes-requested'
+				? { value: 'Changes requested', tone: 'bad' as const }
+				: pr.review === 'approved'
+					? { value: 'Approved' }
+					: { value: 'Pending' };
+	const merge =
+		pr.state === 'merged'
+			? { value: 'Merged' }
+			: pr.merge === 'conflicts'
+				? { value: 'Conflicts', tone: 'bad' as const }
+				: pr.merge === 'behind'
+					? { value: 'Behind' }
+					: pr.merge === 'clean'
+						? { value: 'Ready', tone: 'good' as const }
+						: pr.merge === 'checking'
+							? { value: 'Checking' }
+							: { value: 'Blocked' };
+	return [{ label: 'Review', ...review }, { label: 'Merge', ...merge }, { label: 'Branch', value: position }];
+}
+
+/** A check that needs a look: why it failed, or how far a running one has got. */
+function CheckLine({ check, onRerun }: { check: CICheck; onRerun?: () => void }) {
+	const failed = check.status === 'failed';
+	return (
+		<li className="flex min-h-6 min-w-0 items-center gap-2 text-xs">
+			<span className="grid size-4 shrink-0 place-items-center">
+				<StatusIcon status={failed ? 'error' : 'running'} />
+			</span>
+			<span className="shrink-0 text-foreground">{check.name}</span>
+			<span title={check.summary} className="min-w-0 flex-1 truncate text-[0.6875rem] text-muted-foreground">
+				{check.summary ?? (failed ? 'Failed' : 'Running')}
+			</span>
+			{onRerun ? (
+				<TooltipIconButton label={`Re-run ${check.name}`} size="sm" className={cn(toolbarButtonClass, '-my-1 -me-1 size-6')} onClick={onRerun}>
+					<RotateCcw aria-hidden="true" className="size-3" />
+				</TooltipIconButton>
+			) : null}
+		</li>
+	);
+}
+
+/**
+ * The card under the list for the worktree in focus: its pull request and where it merges, review and merge state,
+ * the checks that failed or are still going (passed ones only counted), and the one action that fits.
+ */
+function WorktreeCard({
+	summary,
+	names,
+	showAgents,
+	onAction
+}: {
+	summary: WorktreeSummary;
+	names: Record<string, string>;
+	/** Who works in it, when there are several worktrees to tell apart. */
+	showAgents: boolean;
+	onAction: (action: WorktreeAction) => void;
+}) {
+	const { worktree, checks: tally } = summary;
+	const pr = worktree.pr;
+	const checks = pr?.checks ?? [];
+	const failed = checks.filter((check) => check.status === 'failed');
+	const running = checks.filter((check) => check.status === 'running');
+	const queued = checks.filter((check) => check.status === 'queued');
+	const settled = [tally.passed && `${tally.passed} passed`, tally.skipped && `${tally.skipped} skipped`].filter(Boolean).join(', ');
+	const agents = showAgents ? summary.runIds.map((id) => names[id]).filter((name): name is string => Boolean(name)) : [];
+
+	return (
+		<div className="flex flex-col gap-2 px-2 pt-2 pb-1.5">
+			<div className="min-w-0">
+				<p dir="auto" title={pr?.title} className="truncate text-[0.8125rem] font-medium text-foreground">
+					{pr ? pr.title : 'No pull request yet'}
+				</p>
+				<p className="flex min-w-0 items-center gap-1 text-[0.6875rem] text-muted-foreground">
+					<span className="min-w-0 truncate font-mono">{worktree.branch}</span>
+					{worktree.base ? (
+						<>
+							<ArrowRight aria-label="into" className="size-3 shrink-0 text-subtle-foreground rtl:-scale-x-100" />
+							<span className="min-w-0 shrink-[2] truncate font-mono">{worktree.base}</span>
+						</>
+					) : null}
+				</p>
+			</div>
+			<dl className="grid grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,0.8fr)] gap-x-3">
+				{prFacts(worktree).map((fact) => (
+					<div key={fact.label} className="min-w-0">
+						<dt className="text-[0.6875rem] leading-4 text-subtle-foreground">{fact.label}</dt>
+						<dd className={cn('truncate text-xs leading-4 tabular-nums', fact.tone === 'bad' ? 'text-destructive' : fact.tone === 'good' ? 'text-success' : 'text-foreground')}>
+							{fact.value}
+						</dd>
+					</div>
+				))}
+				{!pr ? (
+					<div className="min-w-0">
+						<dt className="text-[0.6875rem] leading-4 text-subtle-foreground">Changes</dt>
+						<dd className="truncate text-xs leading-4 text-foreground tabular-nums">{fileCount(summary.changes.length)}</dd>
+					</div>
+				) : null}
+			</dl>
+			{failed.length || running.length || queued.length || worktree.conflicts?.length ? (
+				<ul aria-label="Needs a look" className="flex flex-col">
+					{worktree.conflicts?.length ? (
+						<li title={worktree.conflicts.join(', ')} className="flex min-h-6 min-w-0 items-center gap-2 text-xs">
+							<span className="grid size-4 shrink-0 place-items-center">
+								<TriangleAlert aria-hidden="true" className="size-3.5 text-destructive" />
+							</span>
+							<span className="shrink-0 text-foreground">Conflicts</span>
+							<span className="min-w-0 truncate text-[0.6875rem] text-muted-foreground">{worktree.conflicts.join(', ')}</span>
+						</li>
+					) : null}
+					{failed.map((check) => (
+						<CheckLine key={check.id} check={check} onRerun={() => onAction({ type: 'rerun-checks', worktreeId: worktree.id, checkIds: [check.id] })} />
+					))}
+					{running.map((check) => (
+						<CheckLine key={check.id} check={check} />
+					))}
+					{/* Queued checks have nothing to say yet, so they share a line. */}
+					{queued.length ? (
+						<li title={queued.map((check) => check.name).join(', ')} className="flex min-h-6 min-w-0 items-center gap-2 text-xs">
+							<span className="grid size-4 shrink-0 place-items-center">
+								<StatusIcon status="pending" />
+							</span>
+							<span className="shrink-0 text-foreground">{queued.length === 1 ? queued[0].name : `${queued.length} queued`}</span>
+							<span className="min-w-0 truncate text-[0.6875rem] text-muted-foreground">{queued.length === 1 ? 'Queued' : queued.map((check) => check.name).join(', ')}</span>
+						</li>
+					) : null}
+				</ul>
+			) : null}
+			<div className="flex min-h-6 items-center gap-2 text-[0.6875rem] text-muted-foreground">
+				<span className="flex min-w-0 flex-1 gap-3 overflow-hidden whitespace-nowrap">
+					{settled ? <span className="shrink-0 tabular-nums">{settled}</span> : null}
+					{agents.length ? (
+						<span title={agents.join(', ')} className="min-w-0 truncate text-subtle-foreground">
+							{agents.join(', ')}
+						</span>
+					) : null}
+				</span>
+				<button
+					type="button"
+					onClick={() =>
+						pr
+							? onAction({ type: 'open-pull-request', worktreeId: worktree.id, number: pr.number, url: pr.url })
+							: onAction({ type: 'create-pull-request', worktreeId: worktree.id })
+					}
+					className={cn('-me-1 flex h-6 shrink-0 items-center gap-1 rounded-sm px-1 text-xs hover:bg-overlay-hover hover:text-foreground', focusRingClass)}
+				>
+					{pr ? (
+						<>
+							Open #{pr.number}
+							<ExternalLink aria-hidden="true" className="size-3" />
+						</>
+					) : (
+						<>
+							<GitPullRequest aria-hidden="true" className="size-3" />
+							Create pull request
+						</>
+					)}
+				</button>
+			</div>
+		</div>
+	);
+}
+
+/** Right-aligned row metadata: small, muted, steady digits. */
+function Meta({ children }: { children: React.ReactNode }) {
+	return <span className="shrink-0 text-[0.6875rem] text-muted-foreground tabular-nums">{children}</span>;
+}
+
+/**
+ * The review's scope, as one chip in its toolbar: what's in view (every change, a worktree, or an agent's work) with
+ * its CI glyph and pull request. It opens the same kind of menu as the model picker: worktrees and agents a line each,
+ * and under them a card for the worktree in focus with its pull request and the checks that need a look.
+ */
+export function WorktreePicker({
+	worktrees,
+	agents,
+	changes,
+	names,
+	scope,
+	onScope,
+	onAction
+}: {
+	worktrees: WorktreeSummary[];
+	/** Agents that changed files, when more than one did. */
+	agents: { id: string; name: string }[];
+	changes: FileChange[];
+	names: Record<string, string>;
+	scope: ChangeScope;
+	onScope: (scope: ChangeScope) => void;
+	onAction: (action: WorktreeAction) => void;
+}) {
+	const [open, setOpen] = React.useState(false);
+	const current = scopeValue(scope);
+	const [highlighted, setHighlighted] = React.useState(current);
+	// Focus lands on the list, so the arrow keys move through it and no button in the card lights up on open.
+	const commandRef = React.useRef<HTMLDivElement>(null);
+	// The card shows the worktree last in focus, so moving onto an agent or "All changes" doesn't empty it.
+	const [focusId, setFocusId] = React.useState<string | null>(null);
+	const single = worktrees.length === 1 ? worktrees[0] : undefined;
+	const byId = new Map(worktrees.map((entry) => [entry.worktree.id, entry]));
+	const scoped = scope.kind === 'worktree' ? byId.get(scope.id) : undefined;
+	const scopedAgent = scope.kind === 'run' ? agents.find((entry) => entry.id === scope.id) : undefined;
+	const shown = scoped ?? single;
+	const card = (focusId ? byId.get(focusId) : undefined) ?? scoped ?? single;
+
+	const label = scoped ? scoped.worktree.branch : scopedAgent ? scopedAgent.name : single ? single.worktree.branch : 'All changes';
+	// With the whole review in view, the trigger shows the worst outcome across every pull request.
+	const outcome = shown ? checksOutcome(shown.checks) : sessionChecks(worktrees);
+	const { additions, deletions } = lineTotals(changes);
+	// Rows are told apart by their values; a worktree row's value leads back to the worktree for the card.
+	const worktreeByValue = new Map(worktrees.map((entry) => [scopeValue({ kind: 'worktree', id: entry.worktree.id }), entry.worktree.id]));
+
+	const choose = (next: ChangeScope) => {
+		onScope(next);
+		setOpen(false);
+	};
+	const focus = (value: string) => {
+		setHighlighted(value);
+		const id = worktreeByValue.get(value);
+		if (id) setFocusId(id);
+	};
+
+	return (
+		<Popover
+			open={open}
+			onOpenChange={(next) => {
+				setOpen(next);
+				if (next) {
+					// Open on what's in view, with the worktree that most needs a look in the card.
+					const attention = worktrees.find((entry) => checksOutcome(entry.checks) === 'failed') ?? worktrees.find((entry) => checksOutcome(entry.checks) === 'running');
+					setHighlighted(current);
+					setFocusId((scoped ?? attention ?? worktrees[0])?.worktree.id ?? null);
+				}
+			}}
+		>
+			<PopoverTrigger
+				aria-label={`Showing ${label}${shown?.worktree.pr ? `, pull request #${shown.worktree.pr.number}` : ''}${shown ? `, checks: ${tallyText(shown.checks) || 'none'}` : ''}`}
+				className={cn(
+					'flex h-7 max-w-[min(18rem,55%)] min-w-0 shrink items-center gap-1.5 rounded-md px-1.5 text-xs text-foreground hover:bg-overlay-hover data-popup-open:bg-overlay-hover',
+					focusRingClass
+				)}
+			>
+				{scopedAgent ? <AgentMark name={scopedAgent.name} /> : <OutcomeGlyph outcome={outcome} />}
+				{scoped || (single && !scopedAgent) ? (
+					<MiddleTruncate text={label} tail={12} title={false} className="min-w-0 font-mono" />
+				) : (
+					<span className="min-w-0 truncate">{label}</span>
+				)}
+				{shown?.worktree.pr && !scopedAgent ? <span className="shrink-0 text-muted-foreground tabular-nums">#{shown.worktree.pr.number}</span> : null}
+				<ChevronDown aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground" />
+			</PopoverTrigger>
+			<PopoverContent
+				align="start"
+				sideOffset={6}
+				initialFocus={commandRef}
+				className={cn(popoverSurfaceClass, 'flex w-[min(22rem,calc(100vw-1.5rem))] flex-col p-0')}
+			>
+				<Command ref={commandRef} tabIndex={-1} value={highlighted} onValueChange={focus} loop className="rounded-[inherit] outline-none">
+					<CommandList density="compact" className="max-h-[min(19rem,45vh)]">
+						<CommandGroup>
+							<CommandItem value="all" onSelect={() => choose({ kind: 'all' })} className="h-7.5 gap-2 rounded-sm px-2 py-0 pointer-coarse:h-11">
+								<span className="grid size-4 shrink-0 place-items-center">
+									<GitCompareArrows aria-hidden="true" className="size-3.5 text-muted-foreground" />
+								</span>
+								<span className="min-w-0 flex-1 truncate text-[0.8125rem] font-medium">All changes</span>
+								<Meta>
+									{fileCount(changes.length)}
+									{additions ? <span className="ms-1.5 font-mono text-success">+{additions}</span> : null}
+									{deletions ? <span className="ms-1 font-mono text-destructive">−{deletions}</span> : null}
+								</Meta>
+								<Check aria-hidden="true" className={cn('size-3.5 shrink-0', scope.kind === 'all' ? 'opacity-100' : 'opacity-0')} />
+							</CommandItem>
+						</CommandGroup>
+						<CommandGroup heading={plural(worktrees.length, { one: 'Worktree', other: 'Worktrees' })}>
+							{worktrees.map((entry) => {
+								const option: ChangeScope = { kind: 'worktree', id: entry.worktree.id };
+								const value = scopeValue(option);
+								return (
+									<CommandItem
+										key={value}
+										value={value}
+										keywords={[entry.worktree.branch]}
+										onSelect={() => choose(option)}
+										onPointerMove={() => setFocusId(entry.worktree.id)}
+										className="h-7.5 gap-2 rounded-sm px-2 py-0 pointer-coarse:h-11"
+									>
+										<OutcomeGlyph outcome={checksOutcome(entry.checks)} />
+										<MiddleTruncate text={entry.worktree.branch} tail={12} title={false} className="min-w-0 flex-1 font-mono text-xs font-medium" />
+										{entry.worktree.pr ? <Meta>#{entry.worktree.pr.number}</Meta> : null}
+										{entry.checks.total ? (
+											<Meta>
+												<span title={tallyText(entry.checks)}>
+													{entry.checks.passed}/{entry.checks.total}
+												</span>
+											</Meta>
+										) : (
+											<Meta>{fileCount(entry.changes.length)}</Meta>
+										)}
+										<Check aria-hidden="true" className={cn('size-3.5 shrink-0', current === value ? 'opacity-100' : 'opacity-0')} />
+									</CommandItem>
+								);
+							})}
+						</CommandGroup>
+						{agents.length > 1 ? (
+							<CommandGroup heading="Agents">
+								{agents.map((entry) => {
+									const option: ChangeScope = { kind: 'run', id: entry.id };
+									const value = scopeValue(option);
+									const files = scopeChanges(changes, option).length;
+									return (
+										<CommandItem key={value} value={value} keywords={[entry.name]} onSelect={() => choose(option)} className="h-7.5 gap-2 rounded-sm px-2 py-0 pointer-coarse:h-11">
+											<AgentMark name={entry.name} />
+											<span className="min-w-0 flex-1 truncate text-[0.8125rem] font-medium">{entry.name}</span>
+											<Meta>{fileCount(files)}</Meta>
+											<Check aria-hidden="true" className={cn('size-3.5 shrink-0', current === value ? 'opacity-100' : 'opacity-0')} />
+										</CommandItem>
+									);
+								})}
+							</CommandGroup>
+						) : null}
+					</CommandList>
+				</Command>
+				{card ? (
+					<div className="mx-1 mb-1 border-t border-border/70">
+						<WorktreeCard summary={card} names={names} showAgents={worktrees.length > 1} onAction={onAction} />
+					</div>
+				) : null}
+			</PopoverContent>
+		</Popover>
+	);
+}
diff --git a/packages/ui/src/stories/CodingAgent.stories.tsx b/packages/ui/src/stories/CodingAgent.stories.tsx
new file mode 100644
index 0000000..259f548
--- /dev/null
+++ b/packages/ui/src/stories/CodingAgent.stories.tsx
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { CODING_AGENT_DEMO, CodingAgent, type CodingAgentAction, type CodingAgentProps } from '../components/coding-agent';
+
+const meta: Meta<typeof CodingAgent> = {
+	title: 'Templates/CodingAgent',
+	component: CodingAgent,
+	parameters: {
+		layout: 'fullscreen',
+		docs: {
+			description: {
+				component:
+					'A coding agent workspace. Sessions sit in a tab strip or a project sidebar; each has a chat column built from the AI kit, a resizable side panel with a review of every changed file, file tabs, a file tree and a browser preview, and a terminal dock. Open sessions keep running in the background: the demo has one working live, one finishing off screen, one waiting on your answer and one that failed.'
+			}
+		}
+	},
+	args: {
+		data: CODING_AGENT_DEMO
+	},
+	argTypes: {
+		data: { control: false },
+		layout: { control: 'inline-radio', options: ['tabs', 'sidebar'] },
+		renderBrowserPage: { control: false }
+	}
+};
+
+export default meta;
+type Story = StoryObj<typeof CodingAgent>;
+
+function Frame(props: CodingAgentProps) {
+	const [log, setLog] = useState<CodingAgentAction[]>([]);
+	return (
+		<div className="flex h-dvh min-h-[680px] flex-col gap-2 p-4">
+			<div className={props.framed ? 'min-h-0 flex-1 overflow-hidden' : 'min-h-0 flex-1 overflow-hidden rounded-xl border border-border shadow-sm'}>
+				<CodingAgent {...props} onAction={(action) => setLog((current) => [action, ...current].slice(0, 3))} />
+			</div>
+			<p className="truncate font-mono text-xs text-muted-foreground" aria-live="polite">
+				{log.length ? `onAction → ${log.map((action) => JSON.stringify(action)).join('  ·  ')}` : 'onAction → (send a message, open a file, run a command)'}
+			</p>
+		</div>
+	);
+}
+
+/** Tabs across the top. The first session plays live: it reads, edits, asks to run the tests, and opens the app. */
+export const Tabs: Story = {
+	render: (args) => <Frame {...args} />
+};
+
+/** The same sessions in a sidebar grouped by project. Switching layouts keeps every run where it was. */
+export const Sidebar: Story = {
+	args: { defaultLayout: 'sidebar' },
+	render: (args) => <Frame {...args} />
+};
+
+/** The terminal dock open under the session; type `help`, `git status` or `ls src`. */
+export const WithTerminal: Story = {
+	name: 'With terminal',
+	args: { defaultTerminalOpen: true },
+	render: (args) => <Frame {...args} />
+};
+
+/** A session waiting on your answer, with the side panel closed. */
+export const WaitingOnYou: Story = {
+	name: 'Waiting on you',
+	args: { defaultActiveSessionId: 'session-temporal', defaultPanelOpen: false },
+	render: (args) => <Frame {...args} />
+};
+
+/** With no sessions open, the workspace starts on a fresh one: pick a project and where to run, then send. */
+export const NewSession: Story = {
+	name: 'New session',
+	args: { data: { ...CODING_AGENT_DEMO, openSessionIds: [] } },
+	render: (args) => <Frame {...args} />
+};
+
+export const Framed: Story = {
+	name: 'Framed shell',
+	args: { framed: true },
+	render: (args) => <Frame {...args} />
+};
+
+/**
+ * Agents working together: a lead starts a scout, then three workers in their own worktrees that message each other
+ * and share a task board; one needs your approval, one fails a test and recovers, and a reviewer checks the lot.
+ * Open a worker from its card, the Agents tab, or the "working" menu in the header.
+ */
+export const MultiAgent: Story = {
+	name: 'Multi-agent',
+	args: { defaultActiveSessionId: 'session-security' },
+	render: (args) => <Frame {...args} />
+};
+
+/** The same multi-agent session in the sidebar layout, where each session's agents are indented under it. */
+export const MultiAgentSidebar: Story = {
+	name: 'Multi-agent (sidebar)',
+	args: { defaultActiveSessionId: 'session-security', defaultLayout: 'sidebar' },
+	render: (args) => <Frame {...args} />
+};
+
+/**
+ * A stress test: a thread of 120 turns (about 700 transcript rows, each turn with reasoning, reads, an edit, a
+ * test run and a reply) opened in front of the other sessions. Scroll it, and sweep the turn rail on its left edge.
+ */
+export const LongThread: Story = {
+	name: 'Long thread (stress test)',
+	args: {
+		data: { ...CODING_AGENT_DEMO, openSessionIds: ['session-long', ...CODING_AGENT_DEMO.openSessionIds] },
+		defaultActiveSessionId: 'session-long'
+	},
+	render: (args) => <Frame {...args} />
+};
diff --git a/packages/ui/src/stories/break-ui/CodingAgent.stories.tsx b/packages/ui/src/stories/break-ui/CodingAgent.stories.tsx
new file mode 100644
index 0000000..6c0f60e
--- /dev/null
+++ b/packages/ui/src/stories/break-ui/CodingAgent.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CODING_AGENT_DEMO, CodingAgent, type CodingAgentData, type CodingAgentLayout } from '../../components/coding-agent';
+import { emptyCodingAgent, hugeCodingAgent, oneCodingAgent, worstCodingAgent } from './coding-worst-case';
+import { pickDataset } from './dataset';
+
+const meta: Meta = {
+	title: 'Break UI/Coding Agent',
+	parameters: {
+		layout: 'fullscreen',
+		breakUi: { states: ['demo', 'worst', 'empty', 'one', 'huge'] }
+	}
+};
+export default meta;
+
+function Frame({ data, layout, terminal }: { data: CodingAgentData; layout: CodingAgentLayout; terminal?: boolean }) {
+	return (
+		<div className="h-dvh min-h-[640px] p-2">
+			{/* Keyed on the dataset so switching fixtures starts a fresh workspace. */}
+			<div className="h-full overflow-hidden rounded-xl border border-border shadow-sm">
+				<CodingAgent key={data.brand + data.sessions.length} data={data} defaultLayout={layout} defaultTerminalOpen={terminal} />
+			</div>
+		</div>
+	);
+}
+
+const story =
+	(layout: CodingAgentLayout, options: { terminal?: boolean } = {}): StoryObj =>
+	({
+		render: (_args, context) => {
+			const data = pickDataset(context, { demo: CODING_AGENT_DEMO, worst: worstCodingAgent, empty: emptyCodingAgent, one: oneCodingAgent, huge: hugeCodingAgent });
+			return <Frame data={data} layout={layout} {...options} />;
+		}
+	});
+
+export const Tabs: StoryObj = story('tabs');
+export const Sidebar: StoryObj = story('sidebar');
+export const WithTerminal: StoryObj = story('tabs', { terminal: true });
diff --git a/packages/ui/src/stories/break-ui/coding-worst-case.ts b/packages/ui/src/stories/break-ui/coding-worst-case.ts
new file mode 100644
index 0000000..d2afaf4
--- /dev/null
+++ b/packages/ui/src/stories/break-ui/coding-worst-case.ts
@@ -0,0 +1,211 @@
+/**
+ * Worst-case Coding Agent workspace, shaped exactly like `CODING_AGENT_DEMO`. Branch names, paths, commands and
+ * titles are the lengths real repositories produce: a ticket-numbered branch, a monorepo path five folders deep, a
+ * pasted URL with no break opportunity, a command that ran out of memory, a CJK title, an RTL project.
+ */
+import { CODING_AGENT_DEMO, type CodingAgentData, type CodingProject, type CodingSession, type SessionBeat } from '../../components/coding-agent';
+import { emails, identifiers, labels, manyRows, names } from './worst-case';
+
+const LONG_BRANCH = 'feature/JIRA-48213-migrate-billing-adjustment-line-items-to-usage-based-pricing';
+const DEEP_PATH = 'packages/billing-service/src/modules/subscriptions/adjustments/line-items/customer_subscription_billing_adjustment_line_items.repository.ts';
+const SPACED_FILE = 'docs/Q3 Board Deck — FINAL (revised) v12 [approved by legal].md';
+const LONG_COMMAND =
+	'pnpm --filter @northwind-industries-holdings/customer-portal-billing-service exec vitest run --reporter=verbose --coverage --coverage.reporter=text src/modules/subscriptions/adjustments/line-items/customer_subscription_billing_adjustment_line_items.repository.test.ts';
+const LONG_URL = `http://localhost:3000/settings/billing/adjustments?tab=line-items&filter=unresolved&owner=${emails.long}&redirect=${encodeURIComponent(identifiers.url)}`;
+
+/** A 140-column line, which formatters allow in many codebases. */
+const WIDE_LINE = `export const ${identifiers.snakeIdentifier}_query = sql\`select * from ${identifiers.snakeIdentifier} where customer_id = $1 and adjustment_reason <> 'migration' order by created_at desc\`;`;
+
+const repeatLines = (count: number, make: (index: number) => string) => manyRows(count, make).join('\n');
+
+const BIG_FILE_BEFORE = repeatLines(420, (index) => (index % 37 === 0 ? WIDE_LINE : `export const value${index} = compute(${index}, '${identifiers.uuid}');`));
+const BIG_FILE_AFTER = repeatLines(436, (index) =>
+	index % 37 === 0 ? WIDE_LINE.replace('desc', 'asc') : index % 11 === 0 ? `export const value${index} = await computeAsync(${index});` : `export const value${index} = compute(${index}, '${identifiers.uuid}');`
+);
+
+const OOM_OUTPUT = [
+	...manyRows(260, (index) => ` ✓ src/modules/subscriptions/adjustments/case-${String(index).padStart(3, '0')}.test.ts (12 tests) ${10 + (index % 90)}ms`),
+	'',
+	'<--- Last few GCs --->',
+	'FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory',
+	` 1: 0x1009b4c84 node::Abort() [/Users/${names.longHyphenated.toLowerCase().replace(/\s/g, '')}/.nvm/versions/node/v24.11.0/bin/node]`
+].join('\n');
+
+const worstFiles: Record<string, string> = {
+	'package.json': '{\n  "name": "@northwind-industries-holdings/customer-portal"\n}\n',
+	[DEEP_PATH]: BIG_FILE_BEFORE,
+	[SPACED_FILE]: `# ${identifiers.fileName}\n\n${labels.longDescription}\n`,
+	'src/i18n/de.json': `{ "settings": "${labels.german}" }\n`,
+	'src/i18n/fr.json': `{ "privacy": "${labels.french}" }\n`,
+	'src/markup.html': `<p>${labels.markup}</p>\n`,
+	...Object.fromEntries(manyRows(40, (index) => [`src/components/generated/Component${index}WithAVeryDescriptiveButStillRealisticName.tsx`, `export function C${index}() { return null; }\n`]))
+};
+
+export const worstProjects: CodingProject[] = [
+	{
+		id: 'portal',
+		name: 'northwind-industries-holdings-customer-portal-monorepo',
+		path: '~/Developer/clients/northwind-industries-holdings/customer-portal-monorepo',
+		branch: LONG_BRANCH,
+		files: worstFiles
+	},
+	{ id: 'j', name: 'j', path: '~/j', branch: 'main', files: { 'a.ts': 'export {};\n' } },
+	{ id: 'cjk', name: '王秀英的发票系统', path: '~/代码/发票系统', branch: '主分支', files: { 'src/发票.ts': 'export const 发票 = [];\n' } },
+	{ id: 'rtl', name: 'لوحة-تحكم-الفواتير', path: '~/مشاريع/لوحة-تحكم-الفواتير', branch: 'main', files: { 'src/index.ts': 'export {};\n' } }
+];
+
+const worstScript: SessionBeat[] = [
+	{
+		kind: 'user',
+		text: `${emails.long} reported that ${LONG_URL} 500s after the migration.\n\nSteps:\n1. Sign in as ${names.longSuffix}\n2. Open the link\n3. ${labels.markup}\n\nCan you fix ${DEEP_PATH} and run the tests?`
+	},
+	{ kind: 'reasoning', text: `${labels.longDescription} ${labels.longDescription}`, durationMs: 400 },
+	{
+		kind: 'plan',
+		steps: [
+			{ label: `Read ${DEEP_PATH} and the ${identifiers.snakeIdentifier} migration`, status: 'done' },
+			{ label: labels.longDescription, status: 'in_progress' },
+			{ label: 'J', status: 'pending' }
+		]
+	},
+	{
+		kind: 'tools',
+		calls: [
+			...manyRows(38, (index) => ({ tool: 'read' as const, target: `${DEEP_PATH.replace('.ts', '')}.part-${index}.ts` })),
+			{ tool: 'grep', target: identifiers.snakeIdentifier },
+			{ tool: 'webfetch', target: LONG_URL }
+		]
+	},
+	{
+		kind: 'say',
+		text: `The ${'`'}${identifiers.snakeIdentifier}${'`'} query sorts descending, so ${'`'}${DEEP_PATH}${'`'} returns the newest adjustment first. See ${identifiers.url} and ${LONG_URL}.\n\n${'```'}ts\n${WIDE_LINE}\n${'```'}\n\n${labels.markup}`
+	},
+	{ kind: 'edit', path: DEEP_PATH, after: BIG_FILE_AFTER },
+	{ kind: 'edit', path: SPACED_FILE, after: `# ${identifiers.fileName}\n\nUpdated.\n` },
+	{ kind: 'edit', path: 'src/i18n/de.json', after: `{ "settings": "${labels.german}", "privacy": "Datenschutz- und Sicherheitseinstellungen" }\n` },
+	{ kind: 'permission', title: 'Run a command', command: LONG_COMMAND },
+	{ kind: 'shell', command: LONG_COMMAND, output: OOM_OUTPUT, exitCode: 137 },
+	{ kind: 'browse', url: LONG_URL, title: labels.french },
+	{
+		kind: 'question',
+		questions: [
+			{
+				id: 'memory',
+				question: `The test run was killed for using too much memory (exit 137). ${labels.longDescription}`,
+				options: [
+					{ id: 'raise', label: 'Raise NODE_OPTIONS=--max-old-space-size=8192 for this package only and rerun the full suite' },
+					{ id: 'shard', label: labels.german },
+					{ id: 'j', label: 'J' }
+				]
+			}
+		]
+	},
+	{ kind: 'notice', text: `${labels.status}. ${labels.longDescription}` },
+	{ kind: 'error', title: labels.french, text: `${labels.longDescription} ${identifiers.url}` }
+];
+
+const titled = (id: string, title: string, projectId: string, extra: Partial<CodingSession> = {}): CodingSession => ({
+	id,
+	title,
+	projectId,
+	script: [{ kind: 'user', text: title }, { kind: 'say', text: 'Done.' }],
+	played: 2,
+	updatedLabel: '3w',
+	...extra
+});
+
+export const worstSessions: CodingSession[] = [
+	{
+		id: 'worst',
+		title: `Fix ${identifiers.snakeIdentifier} ordering after the usage-based pricing migration broke the EMEA invoices`,
+		projectId: 'portal',
+		location: 'worktree',
+		branch: LONG_BRANCH,
+		model: { modelId: 'long-model', levelId: 'max' },
+		updatedLabel: '11mo',
+		script: worstScript,
+		played: 8
+	},
+	titled('cjk', '修复发票导出时的时区问题并补充测试用例', 'cjk'),
+	titled('rtl', 'إصلاح خطأ في تصدير الفواتير', 'rtl'),
+	titled('one', 'J', 'j'),
+	titled('emoji', `${names.zwjEmoji} asked: why does checkout 500?`, 'portal'),
+	titled('running', `${labels.german} ${labels.french}`, 'portal', { played: 0, script: [{ kind: 'user', text: 'Go' }, { kind: 'say', text: labels.longDescription, delay: 60_000 }] }),
+	...manyRows(8, (index) => titled(`extra-${index}`, `${identifiers.cameraFile} follow-up ${index + 1}`, 'portal'))
+];
+
+export const worstCodingAgent: CodingAgentData = {
+	...CODING_AGENT_DEMO,
+	brand: 'Northwind Industries Holdings Engineering Workspace',
+	projects: worstProjects,
+	sessions: worstSessions,
+	openSessionIds: worstSessions.map((session) => session.id),
+	models: [
+		...CODING_AGENT_DEMO.models,
+		{
+			id: 'long-model',
+			name: 'Claude Opus 5.5 (1M context, extended thinking)',
+			provider: 'Anthropic',
+			levels: [{ id: 'max', label: 'Maximum reasoning budget (billed as output)' }],
+			defaultLevel: 'max',
+			contextWindow: 1_000_000
+		}
+	],
+	commands: [
+		...CODING_AGENT_DEMO.commands,
+		{ name: 'migrate-billing-adjustment-line-items', description: labels.longDescription }
+	],
+	contextWindow: 16_000,
+	usagePercent: 97
+};
+
+/** One of everything: one project with one file, one session that changed one file, so every count reads 1. */
+export const oneCodingAgent: CodingAgentData = {
+	...CODING_AGENT_DEMO,
+	projects: [{ id: 'j', name: 'j', path: '~/j', branch: 'main', files: { 'a.ts': 'export const a = 1;\n' } }],
+	sessions: [
+		{
+			id: 'one',
+			title: 'J',
+			projectId: 'j',
+			script: [
+				{ kind: 'user', text: 'J' },
+				{ kind: 'tools', calls: [{ tool: 'read', target: 'a.ts' }] },
+				{ kind: 'edit', path: 'a.ts', after: 'export const a = 2;\n' },
+				{ kind: 'say', text: 'J' }
+			],
+			played: 4
+		}
+	],
+	openSessionIds: ['one'],
+	models: [CODING_AGENT_DEMO.models[2]],
+	defaultModel: { modelId: CODING_AGENT_DEMO.models[2].id },
+	commands: [CODING_AGENT_DEMO.commands[0]]
+};
+
+/** Nothing yet: a project with no files and no sessions. */
+export const emptyCodingAgent: CodingAgentData = {
+	...CODING_AGENT_DEMO,
+	projects: [{ id: 'empty', name: 'new-project', path: '~/new-project', branch: 'main', files: {} }],
+	sessions: [],
+	openSessionIds: [],
+	commands: []
+};
+
+/** 40 open tabs, 1,000 sessions across projects, and a 1,000-file checkout. */
+export const hugeCodingAgent: CodingAgentData = (() => {
+	const files = Object.fromEntries(
+		manyRows(1000, (index) => [`src/modules/module-${Math.floor(index / 25)}/feature-${index % 25}/file-${index}.ts`, `export const value${index} = ${index};\n`])
+	);
+	const project: CodingProject = { ...worstProjects[0], files };
+	const sessions = manyRows(1000, (index) =>
+		titled(`huge-${index}`, `Session ${index + 1}: ${index % 3 === 0 ? identifiers.snakeIdentifier : 'tidy the release notes'}`, 'portal', {
+			script: [
+				{ kind: 'user', text: 'Go' },
+				...manyRows(60, (step): SessionBeat => (step % 2 ? { kind: 'say', text: `Step ${step} done.` } : { kind: 'tools', calls: [{ tool: 'read', target: `src/modules/module-${step}/feature-1/file-${step}.ts` }] }))
+			],
+			played: 61
+		})
+	);
+	return { ...CODING_AGENT_DEMO, projects: [project], sessions, openSessionIds: sessions.slice(0, 40).map((session) => session.id) };
+})();
diff --git a/packages/ui/test/coding-agent.test.tsx b/packages/ui/test/coding-agent.test.tsx
new file mode 100644
index 0000000..1281823
--- /dev/null
+++ b/packages/ui/test/coding-agent.test.tsx
@@ -0,0 +1,491 @@
+import * as React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { CODING_AGENT_DEMO, CodingAgent, type CodingAgentAction, type CodingAgentData, type CodingSession, type SessionBeat } from '../src/components/coding-agent';
+import { createHarnessStore } from '../src/components/coding-agent/harness-store';
+import { turnsOf } from '../src/components/coding-agent/turn-rail';
+import { ancestry, createHarnessView, type HarnessEvent, replayHarness, summarizeWorktrees } from '../src/components/coding-agent/harness';
+import { type SessionHarness, useHarness } from '../src/components/coding-agent/use-harness';
+
+// The diff and tree renderers draw into shadow roots with constructed stylesheets, which jsdom lacks. The shell's
+// behaviour doesn't depend on what they draw, so they render as plain stand-ins here.
+vi.mock('@pierre/diffs/react', () => ({
+	MultiFileDiff: ({ newFile }: { newFile: { name: string } }) => <div data-testid="diff">{newFile.name}</div>,
+	File: ({ file }: { file: { contents: string } }) => <pre>{file.contents}</pre>
+}));
+vi.mock('@pierre/trees/react', () => ({
+	useFileTree: () => ({ model: { resetPaths() {}, setGitStatus() {}, getSelectedPaths: () => [], getItem: () => null, scrollToPath() {} } }),
+	FileTree: () => <div data-testid="tree" />
+}));
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.CSS ??= {} as typeof CSS;
+CSS.escape ??= (value: string) => value.replace(/[^\w-]/g, (char) => `\\${char}`);
+globalThis.PointerEvent ??= MouseEvent as unknown as typeof PointerEvent;
+
+class NoopObserver {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+	takeRecords() {
+		return [];
+	}
+}
+
+let root: Root | undefined;
+let container: HTMLDivElement | undefined;
+
+beforeEach(() => {
+	vi.useFakeTimers();
+	vi.stubGlobal('ResizeObserver', NoopObserver);
+	vi.stubGlobal('IntersectionObserver', NoopObserver);
+	vi.stubGlobal(
+		'matchMedia',
+		(query: string) =>
+			({
+				matches: false,
+				media: query,
+				addEventListener() {},
+				removeEventListener() {},
+				addListener() {},
+				removeListener() {},
+				onchange: null,
+				dispatchEvent: () => false
+			}) as MediaQueryList
+	);
+	Element.prototype.scrollTo ??= function scrollTo() {};
+	Element.prototype.scrollIntoView ??= function scrollIntoView() {};
+});
+
+afterEach(() => {
+	act(() => root?.unmount());
+	container?.remove();
+	root = undefined;
+	vi.useRealTimers();
+	vi.unstubAllGlobals();
+});
+
+async function render(node: React.ReactNode) {
+	container = document.createElement('div');
+	document.body.appendChild(container);
+	root = createRoot(container);
+	await act(async () => root!.render(node));
+}
+
+/** Plays timers in 100ms slices until `done`, failing after `limit` ms of simulated time. */
+async function until(done: () => boolean, limit = 60_000) {
+	for (let elapsed = 0; !done(); elapsed += 100) {
+		if (elapsed > limit) throw new Error(`Still waiting after ${limit}ms`);
+		await act(async () => {
+			await vi.advanceTimersByTimeAsync(100);
+		});
+	}
+}
+
+async function click(element: Element | null | undefined) {
+	if (!element) throw new Error('Element not found');
+	await act(async () => (element as HTMLElement).click());
+}
+
+const FILES = { 'src/a.ts': 'export const a = 1;\n' };
+
+/** Renders the harness hook alone and hands back its latest state and what it sent the host. */
+async function renderHarness(session: Partial<CodingSession>) {
+	const latest: { harness?: SessionHarness } = {};
+	const emit = vi.fn<(action: CodingAgentAction) => void>();
+	function Harness() {
+		latest.harness = useHarness({
+			session: { id: 's', title: 'Test', projectId: 'acme-web', ...session },
+			files: FILES,
+			branch: 'main',
+			followUp: (text) => [{ kind: 'say', text: `Reply to ${text}` }],
+			emit
+		});
+		return null;
+	}
+	await render(<Harness />);
+	return Object.assign(latest as { harness: SessionHarness }, { emit });
+}
+
+const playScript = (script: SessionBeat[], played = 0) => renderHarness({ script, played });
+
+const rootRun = (state: { harness: SessionHarness }) => state.harness.view.runs.root!;
+const beats = (state: { harness: SessionHarness }, runId = 'root') =>
+	state.harness.view.runs[runId]!.items.flatMap((item) => (item.type === 'beat' ? [item.beat] : []));
+
+const GATED: SessionBeat[] = [
+	{ kind: 'user', text: 'Make a two' },
+	{ kind: 'edit', path: 'src/a.ts', after: 'export const a = 2;\n' },
+	{ kind: 'permission', title: 'Run a command', command: 'pnpm test' },
+	{ kind: 'shell', command: 'pnpm test', output: '1 passed', exitCode: 0 },
+	{ kind: 'say', text: 'Done.' }
+];
+
+describe('useHarness with a script', () => {
+	it('holds at a permission gate, then runs the command and closes the turn with what changed', async () => {
+		const state = await playScript(GATED);
+		await until(() => state.harness.status === 'approval');
+		expect(state.harness.changes).toEqual([expect.objectContaining({ path: 'src/a.ts', additions: 1, deletions: 1, runIds: ['root'] })]);
+		expect(state.harness.terminal).toEqual([]);
+
+		await act(async () => state.harness.resolvePermission(state.harness.view.pending[0]!.request.id, 'once'));
+		await until(() => state.harness.status === 'idle');
+		expect(state.harness.terminal.map((line) => line.text)).toEqual(['pnpm test', '1 passed']);
+		expect(rootRun(state).items.at(-1)).toMatchObject({ type: 'turn-end', paths: ['src/a.ts'], additions: 1, deletions: 1 });
+	});
+
+	it('skips a denied command and says so', async () => {
+		const state = await playScript(GATED);
+		await until(() => state.harness.status === 'approval');
+		await act(async () => state.harness.resolvePermission(state.harness.view.pending[0]!.request.id, 'deny'));
+		await until(() => state.harness.status === 'idle');
+		expect(state.harness.terminal).toEqual([]);
+		expect(beats(state).some((beat) => beat.kind === 'shell')).toBe(false);
+		expect(beats(state)).toContainEqual(expect.objectContaining({ kind: 'notice', text: 'Command denied. Continuing without running it.' }));
+	});
+
+	it('queues a message sent mid-run and sends it once the run settles', async () => {
+		const state = await playScript([
+			{ kind: 'user', text: 'Start' },
+			{ kind: 'say', text: 'Working on it.' }
+		]);
+		await act(async () => state.harness.send('root', 'Also add docs', []));
+		expect(state.harness.queued('root').map((entry) => entry.text)).toEqual(['Also add docs']);
+
+		await until(() => state.harness.status === 'idle');
+		expect(state.harness.queued('root')).toEqual([]);
+		expect(beats(state).slice(-2)).toEqual([
+			expect.objectContaining({ kind: 'user', text: 'Also add docs' }),
+			expect.objectContaining({ kind: 'say', text: 'Reply to Also add docs' })
+		]);
+	});
+
+	it('lands history at once and leaves a failed run waiting for a retry', async () => {
+		const state = await playScript(
+			[
+				{ kind: 'user', text: 'Fix it' },
+				{ kind: 'error', title: 'The run stopped', text: 'Overloaded.' },
+				{ kind: 'say', text: 'Fixed after the retry.' }
+			],
+			2
+		);
+		expect(state.harness.status).toBe('failed');
+		expect(beats(state).map((beat) => beat.kind)).toEqual(['user', 'error']);
+
+		await act(async () => state.harness.retry('root'));
+		await until(() => state.harness.status === 'idle');
+		expect(beats(state).at(-1)).toMatchObject({ kind: 'say', text: 'Fixed after the retry.' });
+	});
+
+	it('runs workers side by side, waits for them, and gathers their results', async () => {
+		const worker = (id: string, text: string): SessionBeat => ({
+			kind: 'spawn',
+			agent: { id, name: id.toUpperCase(), task: `Do ${id}` },
+			script: [
+				{ kind: 'tools', calls: [{ tool: 'read', target: 'src/a.ts' }] },
+				{ kind: 'say', text }
+			]
+		});
+		const state = await playScript([
+			{ kind: 'user', text: 'Split it' },
+			worker('a', 'A is done.'),
+			worker('b', 'B is done.'),
+			{ kind: 'await' },
+			{ kind: 'say', text: 'Both done.' }
+		]);
+		await until(() => rootRun(state).status === 'waiting');
+		expect(rootRun(state).waitingOn).toMatchObject({ kind: 'agent' });
+		expect(state.harness.view.runs.a!.status).toBe('running');
+		expect(state.harness.view.runs.b!.status).toBe('running');
+
+		await until(() => state.harness.status === 'idle');
+		expect(state.harness.view.runs.a).toMatchObject({ status: 'done', summary: 'A is done.', parentRunId: 'root', depth: 1 });
+		expect(state.harness.view.runs.b).toMatchObject({ status: 'done', summary: 'B is done.' });
+		expect(rootRun(state).items.filter((item) => item.type === 'spawn').map((item) => item.type === 'spawn' && item.runId)).toEqual(['a', 'b']);
+		expect(rootRun(state).items).toContainEqual(expect.objectContaining({ type: 'fan-in', runIds: ['a', 'b'] }));
+		expect(beats(state).at(-1)).toMatchObject({ kind: 'say', text: 'Both done.' });
+	});
+
+	it('brings a child agent’s approval to the session and lets it carry on once allowed', async () => {
+		const state = await playScript([
+			{ kind: 'user', text: 'Go' },
+			{
+				kind: 'spawn',
+				agent: { id: 'worker', name: 'Worker', task: 'Run the tests' },
+				script: [
+					{ kind: 'permission', title: 'Run a command', command: 'pnpm test' },
+					{ kind: 'shell', command: 'pnpm test', output: 'ok', exitCode: 0 },
+					{ kind: 'say', text: 'Tests pass.' }
+				]
+			},
+			{ kind: 'await' }
+		]);
+		await until(() => state.harness.status === 'approval');
+		expect(state.harness.view.pending).toEqual([expect.objectContaining({ runId: 'worker' })]);
+
+		await act(async () => state.harness.resolvePermission(state.harness.view.pending[0]!.request.id, 'once'));
+		await until(() => state.harness.status === 'idle');
+		expect(state.harness.view.runs.worker).toMatchObject({ status: 'done', summary: 'Tests pass.' });
+		expect(state.harness.terminal.find((line) => line.kind === 'command')).toMatchObject({ text: 'pnpm test', runId: 'worker' });
+	});
+
+	it('stops a worker and everything under it without stopping the session', async () => {
+		const state = await playScript([
+			{ kind: 'user', text: 'Go' },
+			{ kind: 'spawn', agent: { id: 'slow', name: 'Slow', task: 'Take a while' }, script: [{ kind: 'say', text: 'Still going.', delay: 60_000 }] },
+			{ kind: 'await' },
+			{ kind: 'say', text: 'Carried on without it.' }
+		]);
+		await until(() => state.harness.view.runs.slow?.status === 'running');
+		await act(async () => state.harness.stop('slow'));
+		expect(state.harness.view.runs.slow!.status).toBe('cancelled');
+		await until(() => state.harness.status === 'idle');
+		expect(beats(state).at(-1)).toMatchObject({ kind: 'say', text: 'Carried on without it.' });
+	});
+
+	it('plays a steer sent to a worker that was paused and then stopped', async () => {
+		const state = await playScript([
+			{ kind: 'user', text: 'Go' },
+			{ kind: 'spawn', agent: { id: 'slow', name: 'Slow', task: 'Take a while' }, script: [{ kind: 'say', text: 'Still going.', delay: 60_000 }] }
+		]);
+		await until(() => state.harness.view.runs.slow?.status === 'running');
+		await act(async () => state.harness.pause('slow'));
+		expect(state.harness.view.runs.slow!.status).toBe('paused');
+		await act(async () => state.harness.stop('slow'));
+		expect(state.harness.view.runs.slow!.status).toBe('cancelled');
+
+		await act(async () => state.harness.steer('slow', 'Try the cache instead', [{ kind: 'say', text: 'Using the cache.' }]));
+		await until(() => state.harness.view.runs.slow!.status === 'done');
+		expect(beats(state, 'slow').at(-1)).toMatchObject({ kind: 'say', text: 'Using the cache.' });
+		expect(state.emit).toHaveBeenLastCalledWith({ type: 'steer-run', sessionId: 's', runId: 'slow', text: 'Try the cache instead', attachments: [] });
+	});
+
+	it('stops a run, its workers and theirs once each, without gathering their results', async () => {
+		const slow = (id: string): SessionBeat => ({ kind: 'spawn', agent: { id, name: id, task: `Do ${id}` }, script: [{ kind: 'say', text: 'Still going.', delay: 60_000 }] });
+		const state = await playScript([
+			{ kind: 'user', text: 'Go' },
+			slow('a'),
+			{ kind: 'spawn', agent: { id: 'b', name: 'b', task: 'Split it again' }, script: [slow('c'), { kind: 'await' }] },
+			{ kind: 'await' }
+		]);
+		await until(() => rootRun(state).waitingOn?.kind === 'agent' && state.harness.view.runs.b?.waitingOn?.kind === 'agent');
+		await act(async () => state.harness.stop('root'));
+
+		const notices = (runId: string) => beats(state, runId).filter((beat) => beat.kind === 'notice').map((beat) => beat.kind === 'notice' && beat.text);
+		expect(notices('root')).toEqual(['Stopped. Send a message to pick it back up.']);
+		for (const id of ['a', 'b', 'c']) {
+			expect(state.harness.view.runs[id]!.status).toBe('cancelled');
+			expect(notices(id)).toEqual(['Stopped with its parent.']);
+		}
+		expect(rootRun(state).items.some((item) => item.type === 'fan-in')).toBe(false);
+		expect(state.harness.view.runs.b!.items.some((item) => item.type === 'fan-in')).toBe(false);
+		expect(state.harness.status).toBe('idle');
+	});
+});
+
+describe('useHarness with a host', () => {
+	it('sends every control to the host and leaves the view to the host’s events', async () => {
+		const store = createHarnessStore([
+			{ id: 'h1', runId: 'root', kind: 'run.status', status: 'running' },
+			{ id: 'h2', runId: 'w', kind: 'run.spawned', run: { id: 'w', name: 'Worker', role: 'worker', parentRunId: 'root', capabilities: { stop: true, pause: true } } },
+			{ id: 'h3', runId: 'w', kind: 'run.status', status: 'running' },
+			{ id: 'h4', runId: 'w', kind: 'request', request: { id: 'r1', type: 'approval', title: 'Run a command', command: 'pnpm test' } },
+			{ id: 'h5', runId: 'root', kind: 'request', request: { id: 'q1', type: 'question', questions: [] } }
+		]);
+		const state = await renderHarness({ id: 'hosted', store });
+		const before = state.harness.view;
+
+		await act(async () => {
+			state.harness.stop('root');
+			state.harness.stop('w');
+			state.harness.pause('w');
+			state.harness.resume('w');
+			state.harness.retry('w');
+			state.harness.resolvePermission('r1', 'deny');
+			state.harness.answer('q1', { skipped: true });
+		});
+		expect(state.emit.mock.calls.map(([action]) => action)).toEqual([
+			{ type: 'stop', sessionId: 'hosted' },
+			{ type: 'stop-run', sessionId: 'hosted', runId: 'w' },
+			{ type: 'pause-run', sessionId: 'hosted', runId: 'w' },
+			{ type: 'resume-run', sessionId: 'hosted', runId: 'w' },
+			{ type: 'retry-run', sessionId: 'hosted', runId: 'w' },
+			{ type: 'permission', sessionId: 'hosted', runId: 'w', requestId: 'r1', decision: 'deny', command: 'pnpm test' },
+			{ type: 'answer', sessionId: 'hosted', runId: 'root', requestId: 'q1', answer: { skipped: true } }
+		]);
+		expect(state.harness.view).toBe(before);
+		expect(state.harness.view.pending.map((entry) => entry.request.id)).toEqual(['r1', 'q1']);
+
+		// The host acts and reports back; resolving the request carries the worker on without a status of its own.
+		await act(async () => store.push({ id: 'h6', runId: 'w', kind: 'request.resolved', requestId: 'r1', decision: 'deny' }));
+		expect(state.harness.view.runs.w).toMatchObject({ status: 'running', waitingOn: undefined });
+		expect(state.harness.view.runs.w!.items).toContainEqual(expect.objectContaining({ type: 'permission', requestId: 'r1', decision: 'deny' }));
+	});
+});
+
+describe('reduceHarness', () => {
+	const view = () => createHarnessView({ id: 'root', name: 'Lead', role: 'root' }, FILES);
+	const events: HarnessEvent[] = [
+		{ id: '1', runId: 'w', kind: 'run.spawned', run: { id: 'w', name: 'Worker', role: 'worker', parentRunId: 'root', task: 'Fix it' } },
+		{ id: '2', runId: 'r', kind: 'run.spawned', run: { id: 'r', name: 'Reviewer', role: 'worker', parentRunId: 'w' } },
+		{ id: '3', runId: 'w', kind: 'message', from: 'w', to: ['r'], text: 'Please check this', protocol: 'text' },
+		{ id: '4', runId: 'w', kind: 'task', task: { id: 't', title: 'Fix it', status: 'in_progress', ownerRunId: 'w' } },
+		{ id: '5', runId: 'w', kind: 'task', task: { id: 't', title: 'Fix it', status: 'done', ownerRunId: 'w' } },
+		{ id: '6', runId: 'w', kind: 'run.progress', usage: { inputTokens: 1200, outputTokens: 300, costUsd: 0.04 } },
+		{ id: '7', runId: 'root', kind: 'handoff', to: 'w', reason: 'It owns the fix' }
+	];
+
+	it('builds the agent tree, threads messages to both ends, and keeps one row per task', () => {
+		const state = replayHarness(view(), events);
+		expect(ancestry(state, 'r').map((run) => run.name)).toEqual(['Lead', 'Worker', 'Reviewer']);
+		expect(state.runs.r!.depth).toBe(2);
+		expect(state.runs.w!.items.some((item) => item.type === 'message')).toBe(true);
+		expect(state.runs.r!.items.some((item) => item.type === 'message')).toBe(true);
+		expect(state.tasks).toEqual([expect.objectContaining({ id: 't', status: 'done' })]);
+		expect(state.runs.w!.usage).toMatchObject({ inputTokens: 1200, outputTokens: 300, costUsd: 0.04 });
+		expect(state.activeRunId).toBe('w');
+	});
+
+	it('splits a transcript into turns for the rail: a recovered error is done, an open question waits on you', () => {
+		const state = replayHarness(view(), [
+			{ id: 't1', runId: 'root', kind: 'beat', beat: { kind: 'user', text: 'Add invites' } },
+			{ id: 't2', runId: 'root', kind: 'beat', beat: { kind: 'error', title: 'Tests failed', text: '1 failing' } },
+			{ id: 't3', runId: 'root', kind: 'beat', beat: { kind: 'say', text: 'Fixed it.' } },
+			{ id: 't4', runId: 'root', kind: 'beat', beat: { kind: 'user', text: 'Now audit events' } },
+			{ id: 't5', runId: 'root', kind: 'request', request: { id: 'q', type: 'question', questions: [] } }
+		]);
+		expect(turnsOf(state.runs.root!)).toEqual([
+			{ id: 't1', prompt: 'Add invites', reply: 'Fixed it.', state: 'done' },
+			{ id: 't4', prompt: 'Now audit events', state: 'waiting' }
+		]);
+	});
+
+	it('keeps changes per worktree, so one agent can edit several and two can change the same file', () => {
+		const start = createHarnessView({ id: 'root', name: 'Lead', role: 'root' }, FILES, [{ id: 'main', branch: 'main', kind: 'checkout' }]);
+		const worktreeEvents: HarnessEvent[] = [
+			{ id: '1', runId: 'a', kind: 'run.spawned', run: { id: 'a', name: 'Cookies', role: 'worker', parentRunId: 'root', workspace: { kind: 'worktree', branch: 'fix/a' } } },
+			{ id: '2', runId: 'b', kind: 'run.spawned', run: { id: 'b', name: 'Csrf', role: 'worker', parentRunId: 'root', workspace: { kind: 'worktree', branch: 'fix/b' } } },
+			{ id: '3', runId: 'a', kind: 'beat', beat: { kind: 'edit', path: 'src/x.ts', after: 'a\n' } },
+			{ id: '4', runId: 'b', kind: 'beat', beat: { kind: 'edit', path: 'src/x.ts', after: 'b\n' } },
+			// The lead, working in the checkout, also fixes something on the first worker's branch.
+			{ id: '5', runId: 'root', kind: 'beat', beat: { kind: 'edit', path: 'src/y.ts', after: 'y\n', worktree: 'fix/a' } },
+			{ id: '6', runId: 'b', kind: 'pr', worktreeId: 'fix/b', pr: { number: 7, title: 'Block cross-site writes', state: 'open', checks: [{ id: 'e2e', name: 'E2E', status: 'running' }] } },
+			{ id: '7', runId: 'b', kind: 'check', worktreeId: 'fix/b', check: { id: 'e2e', status: 'failed', summary: 'webhook returns 403' } }
+		];
+		const state = replayHarness(start, worktreeEvents);
+		const summaries = summarizeWorktrees(state);
+
+		expect(summaries.map((entry) => entry.worktree.id)).toEqual(['main', 'fix/a', 'fix/b']);
+		expect(state.worktrees['fix/a']).toMatchObject({ base: 'main', kind: 'worktree' });
+		const [, first, second] = summaries;
+		expect(first!.changes.map((change) => change.path)).toEqual(['src/x.ts', 'src/y.ts']);
+		expect(first!.runIds).toEqual(['root', 'a']);
+		expect(second!.changes.map((change) => change.after)).toEqual(['b\n']);
+		expect(second!.worktree.pr?.checks).toEqual([{ id: 'e2e', name: 'E2E', status: 'failed', summary: 'webhook returns 403' }]);
+		expect(second!.checks).toMatchObject({ total: 1, failed: 1 });
+	});
+});
+
+const tab = (title: string) =>
+	[...container!.querySelectorAll<HTMLElement>('[role="tab"]')].find((element) => {
+		const name = element.getAttribute('aria-label') ?? '';
+		return name === title || name.startsWith(`${title}, `);
+	});
+const button = (label: string) => container!.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+
+/** Two sessions: a finished one in front and a short run in a background tab. */
+const TWO_SESSIONS: CodingAgentData = {
+	...CODING_AGENT_DEMO,
+	sessions: [
+		{ id: 'front', title: 'Front session', projectId: 'acme-web', script: [{ kind: 'user', text: 'Hello' }], played: 1 },
+		{
+			id: 'back',
+			title: 'Background session',
+			projectId: 'acme-web',
+			script: [
+				{ kind: 'user', text: 'Rename the helper' },
+				{ kind: 'say', text: 'Renamed it.' }
+			]
+		}
+	],
+	openSessionIds: ['front', 'back']
+};
+
+describe('CodingAgent', () => {
+	it('marks a session that finishes in a background tab until you open it', async () => {
+		await render(<CodingAgent data={TWO_SESSIONS} />);
+		expect(tab('Background session')?.getAttribute('aria-label')).toBe('Background session, Working');
+
+		await until(() => tab('Background session')?.getAttribute('aria-label') === 'Background session, New result');
+		await click(tab('Background session'));
+		expect(tab('Background session')?.getAttribute('aria-label')).toBe('Background session');
+	});
+
+	it('keeps a closed session reachable from the session list', async () => {
+		const onAction = vi.fn();
+		await render(<CodingAgent data={TWO_SESSIONS} onAction={onAction} />);
+		await click(button('Close Background session'));
+		expect(tab('Background session')).toBeUndefined();
+		expect(onAction).toHaveBeenCalledWith({ type: 'close-session', sessionId: 'back' });
+
+		await click(button('All sessions'));
+		const row = [...container!.querySelectorAll('button')].find((element) => element.textContent?.includes('Background session'));
+		await click(row);
+		expect(tab('Background session')?.getAttribute('aria-selected')).toBe('true');
+	});
+
+	it('keeps every session running when the layout switches', async () => {
+		await render(<CodingAgent data={TWO_SESSIONS} defaultActiveSessionId="back" />);
+		await until(() => Boolean(container!.textContent?.includes('Rename the helper')));
+		await click(button('Show sessions in a sidebar'));
+
+		expect(container!.querySelector('[role="toolbar"][aria-label="Sessions"]')).toBeNull();
+		expect(container!.querySelector('aside[aria-label="Sessions"]')).not.toBeNull();
+		// The same run carries on: the message already shown is still there and the reply still lands.
+		expect(container!.textContent).toContain('Rename the helper');
+		await until(() => Boolean(container!.textContent?.includes('Renamed it.')));
+	});
+
+	it('completes a slash command from the composer menu', async () => {
+		await render(<CodingAgent data={TWO_SESSIONS} />);
+		const textarea = [...container!.querySelectorAll<HTMLTextAreaElement>('textarea[aria-label="Message the agent"]')].find(
+			(element) => !element.closest('[hidden]')
+		)!;
+		await act(async () => {
+			const setValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!;
+			setValue.call(textarea, '/te');
+			textarea.setSelectionRange(3, 3);
+			textarea.dispatchEvent(new Event('input', { bubbles: true }));
+		});
+		expect([...container!.querySelectorAll('[cmdk-item]')].map((item) => item.textContent)).toContain('/testRun the test suite');
+
+		await act(async () => {
+			textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+		});
+		expect(textarea.value).toBe('/test ');
+	});
+
+	it('shows what a host pushes into a store, as it arrives', async () => {
+		const store = createHarnessStore();
+		const data: CodingAgentData = {
+			...CODING_AGENT_DEMO,
+			sessions: [{ id: 'hosted', title: 'Hosted session', projectId: 'acme-web', store }],
+			openSessionIds: ['hosted']
+		};
+		await render(<CodingAgent data={data} />);
+		expect(container!.textContent).not.toContain('Researcher');
+
+		await act(async () =>
+			store.push(
+				{ id: 'h1', runId: 'root', kind: 'beat', beat: { kind: 'user', text: 'Look into flaky tests' } },
+				{ id: 'h2', runId: 'res', kind: 'run.spawned', run: { id: 'res', name: 'Researcher', role: 'worker', parentRunId: 'root', task: 'Find the flaky tests' } },
+				{ id: 'h3', runId: 'res', kind: 'run.status', status: 'running' }
+			)
+		);
+		expect(container!.textContent).toContain('Look into flaky tests');
+		expect(container!.textContent).toContain('Researcher');
+		expect(tab('Hosted session')?.getAttribute('aria-label')).toBe('Hosted session, Working');
+	});
+});
diff --git a/packages/ui/test/workspace-template-hydration.test.tsx b/packages/ui/test/workspace-template-hydration.test.tsx
index 37a554e..93f2c35 100644
--- a/packages/ui/test/workspace-template-hydration.test.tsx
+++ b/packages/ui/test/workspace-template-hydration.test.tsx
@@ -7,8 +7,19 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { AGENTS_BUILDER_DEMO, AgentsBuilder, type AgentsBuilderAction } from '../src/components/agents-builder';
 import { BILLING_ACCOUNT_DEMO, BillingAccount, type PlanChangeRequest } from '../src/components/billing-account';
 import { DEMO_NOW } from '../src/components/billing-kit';
+import { CODING_AGENT_DEMO, CodingAgent, type CodingAgentAction, type CodingAgentData } from '../src/components/coding-agent';
 import { DATA_ROOMS_DEMO, DataRooms, type DataRoomsCommand } from '../src/components/data-rooms';
 
+// The diff and tree renderers draw into shadow roots with constructed stylesheets, which jsdom lacks.
+vi.mock('@pierre/diffs/react', () => ({
+	MultiFileDiff: ({ newFile }: { newFile: { name: string } }) => <div data-testid="diff">{newFile.name}</div>,
+	File: ({ file }: { file: { contents: string } }) => <pre>{file.contents}</pre>,
+}));
+vi.mock('@pierre/trees/react', () => ({
+	useFileTree: () => ({ model: { resetPaths() {}, setGitStatus() {}, getSelectedPaths: () => [], getItem: () => null, scrollToPath() {} } }),
+	FileTree: () => <div data-testid="tree" />,
+}));
+
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 globalThis.CSS ??= {} as typeof CSS;
 CSS.escape ??= (value: string) => value.replace(/[^\w-]/g, (char) => `\\${char}`);
@@ -150,6 +161,32 @@ describe('workspace templates hydrate into usable host integrations', () => {
 		expectCleanHydration();
 	});
 
+	it('hydrates a settled coding session and sends a follow-up once through the host', async () => {
+		const onAction = vi.fn<(action: CodingAgentAction) => void>();
+		const data: CodingAgentData = {
+			...CODING_AGENT_DEMO,
+			sessions: [{
+				id: 'hydrated-session',
+				title: 'Hydrated session',
+				projectId: CODING_AGENT_DEMO.projects[0]!.id,
+				script: [{ kind: 'user', text: 'Rename the helper.' }, { kind: 'say', text: 'Renamed it.' }],
+				played: 2,
+			}],
+			openSessionIds: ['hydrated-session'],
+		};
+		await hydrate(<CodingAgent data={data} onAction={onAction} />, (server) => {
+			expect(server.textContent).toContain('Renamed it.');
+		});
+		expect(onAction).not.toHaveBeenCalled();
+		await type('Message the agent', 'Add a changelog entry.');
+		await click(button('Send'));
+		expect(onAction.mock.calls).toEqual([[{
+			type: 'send', sessionId: 'hydrated-session', text: 'Add a changelog entry.', attachments: [],
+		}]]);
+		expect(container.textContent).toContain('Add a changelog entry.');
+		expectCleanHydration();
+	});
+
 	it('hydrates an agreement gate and preserves a question draft until the host accepts it', async () => {
 		const onCommand = vi.fn<(command: DataRoomsCommand) => Promise<void>>()
 			.mockResolvedValueOnce(undefined)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40c5d02..b7100de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -569,7 +569,7 @@ importers:
         version: 10.5.0(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))
       '@storybook/react-vite':
         specifier: ^10.1.11
-        version: 10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(esbuild@0.27.7)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+        version: 10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(esbuild@0.28.1)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       '@tailwindcss/postcss':
         specifier: ^4.1.18
         version: 4.3.2
@@ -646,6 +646,12 @@ importers:
       '@internationalized/date':
         specifier: ^3.10.1
         version: 3.12.2
+      '@pierre/diffs':
+        specifier: ~1.5.2
+        version: 1.5.2(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      '@pierre/trees':
+        specifier: 1.0.0-beta.6
+        version: 1.0.0-beta.6(@pierre/theme@2.0.0)(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(shiki@4.5.0)
       '@remixicon/react':
         specifier: ^4.8.0
         version: 4.9.0(react@19.3.0)
@@ -2455,6 +2461,67 @@ packages:
   '@pgsql/utils@18.1.1':
     resolution: {integrity: sha512-ltmbZOQQXKyPs94DDbDl+SQT9Wvf3B6oyT6vDf0dPbv/LOiGm5vD5SiUOofVPh9cTlX/QRVpOVJkhRsknIK8lg==}
 
+  '@pierre/diffs@1.5.2':
+    resolution: {integrity: sha512-QVxIWQEnNoko22k63maERzozd29+FtaUNpRrZiw603WMe5R1mFSED+jMtPkcVP3SDYS1DWg5K7sa7sJbr3xkNQ==}
+    peerDependencies:
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  '@pierre/theme@2.0.0':
+    resolution: {integrity: sha512-yNDd9GYLQl1mEUJR8AneJ5e4ohLIHQd/wZLWr4fagt78vS2RwwZNW530vVgHqXFAyFVcFlRmGUD5ramXH46OXw==}
+    engines: {vscode: ^1.0.0}
+
+  '@pierre/theming@1.0.0':
+    resolution: {integrity: sha512-WsdrnhKfjeyXGDikZmN9pkpeZ5S/cl6EE72feiSc0tlynT1tMYqXqouhuv/foK+PY9OEnebOAVRQn3+rAstR8g==}
+    peerDependencies:
+      '@pierre/theme': ^1.1.0
+      '@shikijs/themes': ^3.0.0 || ^4.0.0
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+      shiki: ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@pierre/theme':
+        optional: true
+      '@shikijs/themes':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      shiki:
+        optional: true
+
+  '@pierre/theming@1.0.1':
+    resolution: {integrity: sha512-WCI5Qd7iprDpISL9fBYOLe8RV53+b7mFNA3bPzl60/2CKCSrsKN8zEcep6Y3BAzvARlmca50zGjDodqPGiTUKA==}
+    peerDependencies:
+      '@pierre/theme': ^1.1.0 || ^2.0.0
+      '@shikijs/themes': ^3.0.0 || ^4.0.0
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+      shiki: ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@pierre/theme':
+        optional: true
+      '@shikijs/themes':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      shiki:
+        optional: true
+
+  '@pierre/trees@1.0.0-beta.6':
+    resolution: {integrity: sha512-zxeuSFM9TveM7b5XofweJALCtm/tGYV9HZzdbf7Uf+kBxIlUyz24/EHaGRjB0dsmmfDQl2ETz7AWwJ15lhSnpw==}
+    peerDependencies:
+      react: ^18.3.1 || ^19.0.0
+      react-dom: ^18.3.1 || ^19.0.0
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -3116,6 +3183,41 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
+  '@shikijs/core@4.5.0':
+    resolution: {integrity: sha512-6CIgwq+bt2JZ3OSjb/nBkkwEf/CfpHcbam+Mg5Pllco7HAGRQ2/EFhZrrJtbyNTgKwknfVS+llsXGygiDGwJWw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.5.0':
+    resolution: {integrity: sha512-Ed6UdEj84LyYkwnxM5CvSMWAD+id9ExTYri0/+x41U9zrgNifPSS9lZm0JqBP0VfYI8yr8tY5nbNq9+p9R0kFA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.5.0':
+    resolution: {integrity: sha512-dKVmbJecVdB9recl8a/CU4jdpNXyjJQrIcesIkpS70s5HS02ohpnCSpMUbotPnEUzbAcLQ+S4hwZYbkBBiTcJw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.5.0':
+    resolution: {integrity: sha512-wwBTqwduXSz0X4v9Qa2EWeFaYJEw1clCncWjoRNQRbVDu3SPRTRWucnouYapKj3b8Q+sk/41Vbc4B5c8nuYzLA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.5.0':
+    resolution: {integrity: sha512-UM7ShlA8oz0OWxLLO8BmO9Ip6fVqdkt8yF0EH7nOCqHfrx1eEAzF0ZUVK7L+I8NEgeu1PEWSRlxaiPPeCb4iDg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.5.0':
+    resolution: {integrity: sha512-zGb87H3UBbpuI4yoh5UguB1XbU+2BDU3kflM7UfZ+Cy2hWo9lBtqjSVK20gmLY6ukYl040hAypGXMgud9vul8Q==}
+    engines: {node: '>=20'}
+
+  '@shikijs/transformers@4.5.0':
+    resolution: {integrity: sha512-LM7twi043qCC3gRyGQfjoC2/sowzbEltWuruyRtT3RlBlk1hKzWk9ETnU7RcDBoVWQBmC8Mebnr7p28W7kPoaA==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.5.0':
+    resolution: {integrity: sha512-drtPrtD8N0DENyD2cyt6Ajy+IWsiCLgMxODwLTpvH1UsN6a9jf90tNTPjqwHvA+0Lzu9e0txk8DjfqH1p9UJRw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.1.0':
+    resolution: {integrity: sha512-cVBuhDQjBZaNMTwBquYfPydrUP+E3hE6oYGasx8h6ZrODIM7/r+gxLDXdd66oszbrggZHEntdE6j+5gYIVyMWQ==}
+
   '@sigstore/bundle@2.3.2':
     resolution: {integrity: sha512-wueKWDk70QixNLB363yHc2D2ItTgYiMTdPwK8D9dKQMR3ZQ0c35IxP5xnwQ8cNLoCgCRcHf14kE+CLIvNX1zmA==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3512,9 +3614,15 @@ packages:
   '@types/geojson@7946.0.16':
     resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
 
+  '@types/hast@3.0.5':
+    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
+
   '@types/leaflet@1.9.21':
     resolution: {integrity: sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/minimatch@3.0.5':
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
 
@@ -3565,9 +3673,15 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/validate-npm-package-name@4.0.2':
     resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
 
+  '@ungap/structured-clone@1.4.0':
+    resolution: {integrity: sha512-1mEZtMKPM09vDmQt5y7YvmN2+DFTP7Tg0EWXdic8/C6VRnpb33e4ghisCIE3WZjsE2N8mf+QV1Zqh7ZFYLWInQ==}
+
   '@use-gesture/core@10.3.1':
     resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==}
 
@@ -3660,123 +3774,145 @@ packages:
     resolution: {integrity: sha512-Ck0RmDBLc+R0dZpfTXmJFAvcuPf+npbJF1T/VhC9pPDGjNEOGwn4DwFcjhg//DfNIO+xgktsLSt5S4v0MFrToA==}
     cpu: [arm64]
     os: [darwin]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-darwin-x64@0.8.1':
     resolution: {integrity: sha512-6BDLLWi8wHbCghgkajS+OeVJX2jLY9pY9HV/qH9daLP1XCyMSPssEiXjKyPiJq+St5b+zcPgMEBF8cgJDNhMMQ==}
     cpu: [x64]
     os: [darwin]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-freebsd-x64@0.8.1':
     resolution: {integrity: sha512-Rd1PHfw2mxC8y00kWxYWDClnBC1NbSwPuq0zKLYPggE7mlOnV+eQ15futtaz/Q4BP+jOtEv9elxvP7by20h6Kw==}
     cpu: [x64]
     os: [freebsd]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-linux-arm-gnu@0.8.1':
     resolution: {integrity: sha512-/XGncN6jQ/CwXNgWwo+XnsUmILY1q1mbS1f38XnYOHw3DOKOISxVIAlD9IsmdrHLAUAncFlgFS3ky4OO9fvjyg==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-linux-arm-musl@0.8.1':
     resolution: {integrity: sha512-Rxut53qx3JbTkQ8+A6I8Lrplwz55HQVCjEsTsWF1uOpfgALdvuKSMPIE0gVqefEEcOSA9ASklbNacmXwiqnaMw==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-linux-arm64-gnu@0.8.1':
     resolution: {integrity: sha512-hBNkUPHX04BjB2oIIgIlYT2tog9x0rmBVkZep0f4LLYyFhdJfYM/s2pJ0c8ehQhhkQaJFokW4CxGhiVvVLlzWg==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-linux-arm64-musl@0.8.1':
     resolution: {integrity: sha512-ePZZnmOxArA4jA3AWlJj3WdY5z1ahQSLwAYrv7mozkJVcrBz2wZgy8l9ukcHFpTxPyhxCAea4gBSZEqqsCYE3A==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-linux-x64-gnu@0.8.1':
     resolution: {integrity: sha512-LGAEXnQ4Xg/BtOuEirABwa9ByUTXFjealqXXAHVFb8EEmZu5QeHLtsdB2MA2IcYVAgW/QPkyqfnd80R4FltI2A==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-linux-x64-musl@0.8.1':
     resolution: {integrity: sha512-PPDMcQIKCNTOaLBBKh9SBM1EAPcsvnlShMAxq2D/twnSCSEUI9LfrR+G9J4P3o+46ZS4WN8mjZsj8p4PKOnKgw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-win32-arm64@0.8.1':
     resolution: {integrity: sha512-W8A1QpstKYhg4e56s13L4ByQprQ1OXY3QFoNPIh6+4v/DEgqfhJ9ApU++e7zHQCQrhYjyQC/uWtxUcRqpyL/7Q==}
     cpu: [arm64]
     os: [win32]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-codegen/binding-win32-x64@0.8.1':
     resolution: {integrity: sha512-zH7g7pLjfl3uZaNvYzd1PnCerU9fvhS16B7Z0z4Ai0S/oaGI53Y2xh8ylFDvDvmquEP7vay4O/zuLgvZeEsxVA==}
     cpu: [x64]
     os: [win32]
+    deprecated: yuku-codegen is pure JavaScript since 0.14
 
   '@yuku-parser/binding-darwin-arm64@0.8.1':
     resolution: {integrity: sha512-iKQinrhsdxsGJ38msw4KaD7yotWw5N2nqMLeOPD+ttpZQKJc9nGL3VHMtISzCJ9Q09g0N3m91mYRFnIbXfhhig==}
     cpu: [arm64]
     os: [darwin]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-darwin-x64@0.8.1':
     resolution: {integrity: sha512-k7zt2H3sWbYzwTGAK2TT6ma18w1XpwFAWgmBHiaMGHVe63aArrtO+55r6g7chXJ4joB6lb8SxYFyRQ974xfawQ==}
     cpu: [x64]
     os: [darwin]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-freebsd-x64@0.8.1':
     resolution: {integrity: sha512-tQjrlkE/vYEBXZ+pM59FerIVD4Zfs2OpRvN3e8oo12pTcAbwTTxteZKWaedfUsZr+gKO4tLLAaFaFIwa5fQJFw==}
     cpu: [x64]
     os: [freebsd]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-linux-arm-gnu@0.8.1':
     resolution: {integrity: sha512-LZQgyer5d5i1f5oot+x6EhANXPD4FeCgz2CiSiWFSFBeG1U2m5jz65LD8gZwzy4CP4QVxQFyX9BazVRskTbwuQ==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-linux-arm-musl@0.8.1':
     resolution: {integrity: sha512-69G1N4bPkygrus/ahtFxVdv9lzfvS65fuyMdDknn5BZU/gfFGBJyHeJ8UGgLPTyR3YptlJMuZhEkdgp6Qhfz2g==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-linux-arm64-gnu@0.8.1':
     resolution: {integrity: sha512-XL5+JpKCl1ghQTnZezy41NzmPdk4rZ6s0Z8qvGsgNPJ6yrSD7Ne8iz20SZZd/nW720qHiJy/ux62rwzZ+/clMg==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-linux-arm64-musl@0.8.1':
     resolution: {integrity: sha512-Rj290yfrWlrV4/+HrAuoeJXMHdoNubJWKdhg1QDa/mvqa8MUYFd4IHuVYjP/WdQzEgOAWGrLC48vcnge6U3jbg==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-linux-x64-gnu@0.8.1':
     resolution: {integrity: sha512-d3IDkhAxiUTVuGI6BKIMKUyLe7ZxMY5yLqyvvTqJD1WPnE0eJTsLeRFRBv7/HXsnAzDs0IgvoG5bjvUkHZ5kSg==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-linux-x64-musl@0.8.1':
     resolution: {integrity: sha512-Oyp+2gGYKK/AvN2ZoauRn1LGPdkjME5/TE/l4a9mT0JdNeiRTvno42383bt04MWnAZcYS4Hv7YsiFOXUBeLdpA==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-win32-arm64@0.8.1':
     resolution: {integrity: sha512-H77lYgICWRZycGmLaojzg0aSs3Z3v8SZWkcEjl1Ql3s+Km2SyiQcZ7RGq++Wh5nJxpiDJGAzYDC74XqMNm2ZHg==}
     cpu: [arm64]
     os: [win32]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-parser/binding-win32-x64@0.8.1':
     resolution: {integrity: sha512-ABniFzqYYn64NUEgmHTb6JxEzAlpmPu4cpMFjMBlR6cJXqL+vd7K1ae/yrt+NhUduHkJWJqG4lbHbV2yp9el3w==}
     cpu: [x64]
     os: [win32]
+    deprecated: yuku-parser runs on yuku-core since 0.14
 
   '@yuku-toolchain/types@0.8.1':
     resolution: {integrity: sha512-HcGEV3kOn9evBTm2ARYOFNKAI7sY9twQozCVd9EVdlsBlnKi0a2iv8xXxYVHFCBQpX3SvvPXBhk8lcK6NUTdNg==}
@@ -4063,6 +4199,9 @@ packages:
   caniuse-lite@1.0.30001805:
     resolution: {integrity: sha512-52noaS3DubycKSXaU30TwPGIp+POyQSUVa5jBEq3vkRkY0kjyb3LQgvhU6WGyCcyXqVLWO0Cw0Q6BSdD0kUfVA==}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -4079,6 +4218,12 @@ packages:
     resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   chardet@2.2.0:
     resolution: {integrity: sha512-rddelWYNPRrXq6PtNEN2S3f6t9ILzvqaN5pVgi4kqt9jHQaXIial9PznB5iSPVlQSLNaaH22ItWz3EJtQ10+OA==}
 
@@ -4197,6 +4342,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -4490,6 +4638,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   dialkit@2.0.2:
     resolution: {integrity: sha512-D5ZFLBhcB8WVxI6Q8e7HuPPA4SKQBPfLHpvgZQ5V0ZrqohHjYjTR5JoLfXSCeN8tKvUdemyGnVHy/3EtsaliUw==}
     peerDependencies:
@@ -4527,6 +4678,10 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
+  diff@9.0.0:
+    resolution: {integrity: sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==}
+    engines: {node: '>=0.3.1'}
+
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -5366,6 +5521,12 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
   headers-polyfill@5.0.1:
     resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
 
@@ -5391,6 +5552,9 @@ packages:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
@@ -6001,6 +6165,9 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lru_map@0.4.1:
+    resolution: {integrity: sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==}
+
   lucide-react@0.525.0:
     resolution: {integrity: sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==}
     peerDependencies:
@@ -6053,6 +6220,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
@@ -6084,6 +6254,21 @@ packages:
       '@types/node':
         optional: true
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.3:
+    resolution: {integrity: sha512-oxB2Ik03hI0gv+VNn9tnh1t1YEe9MDPptViAEgfdf3YQHsn0pzGTgCdlSCJXcwhqm8phaEuM7zeEu3QQzVBrPg==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -6448,6 +6633,12 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -6840,6 +7031,14 @@ packages:
     resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
     engines: {node: '>=20'}
 
+  preact-render-to-string@6.6.5:
+    resolution: {integrity: sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==}
+    peerDependencies:
+      preact: '>=10 || >= 11.0.0-0'
+
+  preact@11.0.0-beta.0:
+    resolution: {integrity: sha512-IcODoASASYwJ9kxz7+MJeiJhvLriwSb4y4mHIyxdgaRZp6kPUud7xytrk/6GZw8U3y6EFJaRb5wi9SrEK+8+lg==}
+
   prettier@3.9.6:
     resolution: {integrity: sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==}
     engines: {node: '>=14'}
@@ -6897,6 +7096,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
@@ -7099,6 +7301,15 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   remove-accents@0.5.0:
     resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
 
@@ -7322,6 +7533,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@4.5.0:
+    resolution: {integrity: sha512-OcRW72ngQvc+MSVWBRIovC/BTW589iUE/Vxav7VeM4RcY9MUjqB+IR6ILG1k9nuW6LiG/nct9uma4/MBtnZbmQ==}
+    engines: {node: '>=20'}
+
   side-channel-list@1.0.1:
     resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
     engines: {node: '>= 0.4'}
@@ -7393,6 +7608,9 @@ packages:
     resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
     engines: {node: '>= 12'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -7475,6 +7693,9 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   stringify-object@5.0.0:
     resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
     engines: {node: '>=14.16'}
@@ -7702,6 +7923,9 @@ packages:
     resolution: {integrity: sha512-gcANaAnd2QDZFmHFEOF4k7uc1J/6a6z3DJMd/QwEyxLoKGiptJRwid582r7QIsFlFMIZ3SnxfS52S4hm2DHkuQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
   trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
@@ -7871,6 +8095,21 @@ packages:
     resolution: {integrity: sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
   universal-user-agent@6.0.1:
     resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==}
 
@@ -7960,6 +8199,12 @@ packages:
     resolution: {integrity: sha512-w2Eo8LSIIoW7qxNBzT7/17k+bh8plXo7G3dHjEIDqPlnluhzaxr9JX8F28VSYEtDvc1/a3WBDih6xNUZseebXg==}
     engines: {node: '>=18.12.0'}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite-node@3.2.4:
     resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -8264,6 +8509,9 @@ packages:
       use-sync-external-store:
         optional: true
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   12factor-env@1.17.1:
@@ -10151,6 +10399,51 @@ snapshots:
       '@pgsql/types': 18.0.0
       nested-obj: 0.2.2
 
+  '@pierre/diffs@1.5.2(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+    dependencies:
+      '@pierre/theme': 2.0.0
+      '@pierre/theming': 1.0.1(@pierre/theme@2.0.0)(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(shiki@4.5.0)
+      '@shikijs/transformers': 4.5.0
+      diff: 9.0.0
+      hast-util-to-html: 9.0.5
+      lru_map: 0.4.1
+      shiki: 4.5.0
+    optionalDependencies:
+      react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
+    transitivePeerDependencies:
+      - '@shikijs/themes'
+
+  '@pierre/theme@2.0.0': {}
+
+  '@pierre/theming@1.0.0(@pierre/theme@2.0.0)(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(shiki@4.5.0)':
+    optionalDependencies:
+      '@pierre/theme': 2.0.0
+      '@shikijs/themes': 4.5.0
+      react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
+      shiki: 4.5.0
+
+  '@pierre/theming@1.0.1(@pierre/theme@2.0.0)(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(shiki@4.5.0)':
+    optionalDependencies:
+      '@pierre/theme': 2.0.0
+      '@shikijs/themes': 4.5.0
+      react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
+      shiki: 4.5.0
+
+  '@pierre/trees@1.0.0-beta.6(@pierre/theme@2.0.0)(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(shiki@4.5.0)':
+    dependencies:
+      '@pierre/theming': 1.0.0(@pierre/theme@2.0.0)(@shikijs/themes@4.5.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(shiki@4.5.0)
+      preact: 11.0.0-beta.0
+      preact-render-to-string: 6.6.5(preact@11.0.0-beta.0)
+      react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
+    transitivePeerDependencies:
+      - '@pierre/theme'
+      - '@shikijs/themes'
+      - shiki
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -10675,6 +10968,51 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
+  '@shikijs/core@4.5.0':
+    dependencies:
+      '@shikijs/primitive': 4.5.0
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+
+  '@shikijs/langs@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+
+  '@shikijs/primitive@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
+  '@shikijs/themes@4.5.0':
+    dependencies:
+      '@shikijs/types': 4.5.0
+
+  '@shikijs/transformers@4.5.0':
+    dependencies:
+      '@shikijs/core': 4.5.0
+      '@shikijs/types': 4.5.0
+
+  '@shikijs/types@4.5.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
+  '@shikijs/vscode-textmate@10.1.0': {}
+
   '@sigstore/bundle@2.3.2':
     dependencies:
       '@sigstore/protobuf-specs': 0.3.3
@@ -10756,45 +11094,45 @@ snapshots:
       axe-core: 4.12.1
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
 
-  '@storybook/builder-vite@10.5.0(esbuild@0.27.7)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
+  '@storybook/builder-vite@10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
     dependencies:
-      '@storybook/csf-plugin': 10.5.0(esbuild@0.27.7)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+      '@storybook/csf-plugin': 10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
       ts-dedent: 2.3.0
-      vite: 7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
+      vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
     transitivePeerDependencies:
       - esbuild
       - rollup
       - webpack
 
-  '@storybook/builder-vite@10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
+  '@storybook/builder-vite@10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
     dependencies:
-      '@storybook/csf-plugin': 10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+      '@storybook/csf-plugin': 10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
       ts-dedent: 2.3.0
-      vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
+      vite: 7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
     transitivePeerDependencies:
       - esbuild
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.5.0(esbuild@0.27.7)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
+  '@storybook/csf-plugin@10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
     dependencies:
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
       unplugin: 2.3.11
     optionalDependencies:
-      esbuild: 0.27.7
+      esbuild: 0.28.1
       rollup: 4.62.2
-      vite: 7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
+      vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
 
-  '@storybook/csf-plugin@10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
+  '@storybook/csf-plugin@10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
     dependencies:
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.28.1
       rollup: 4.62.2
-      vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
+      vite: 7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
 
   '@storybook/global@5.0.0': {}
 
@@ -10811,11 +11149,11 @@ snapshots:
       '@types/react': 19.3.0
       '@types/react-dom': 19.2.3(@types/react@19.3.0)
 
-  '@storybook/react-vite@10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(esbuild@0.27.7)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
+  '@storybook/react-vite@10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(esbuild@0.28.1)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
-      '@storybook/builder-vite': 10.5.0(esbuild@0.27.7)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+      '@storybook/builder-vite': 10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       '@storybook/react': 10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)
       empathic: 2.0.1
       magic-string: 0.30.21
@@ -10825,7 +11163,7 @@ snapshots:
       resolve: 1.22.12
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
       tsconfig-paths: 4.2.0
-      vite: 7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
+      vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -10836,11 +11174,11 @@ snapshots:
       - supports-color
       - webpack
 
-  '@storybook/react-vite@10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(esbuild@0.28.1)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
+  '@storybook/react-vite@10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(esbuild@0.28.1)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       '@rollup/pluginutils': 5.4.0(rollup@4.62.2)
-      '@storybook/builder-vite': 10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
+      '@storybook/builder-vite': 10.5.0(esbuild@0.28.1)(rollup@4.62.2)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(vite@7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0))
       '@storybook/react': 10.5.0(@types/react-dom@19.2.3(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(storybook@10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0))(typescript@5.9.3)
       empathic: 2.0.1
       magic-string: 0.30.21
@@ -10850,7 +11188,7 @@ snapshots:
       resolve: 1.22.12
       storybook: 10.5.0(@types/react@19.3.0)(prettier@3.9.6)(react@19.3.0)
       tsconfig-paths: 4.2.0
-      vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
+      vite: 7.3.6(@types/node@24.13.3)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -11126,10 +11464,18 @@ snapshots:
 
   '@types/geojson@7946.0.16': {}
 
+  '@types/hast@3.0.5':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/leaflet@1.9.21':
     dependencies:
       '@types/geojson': 7946.0.16
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/minimatch@3.0.5': {}
 
   '@types/minimist@1.2.5': {}
@@ -11182,8 +11528,12 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
+  '@types/unist@3.0.3': {}
+
   '@types/validate-npm-package-name@4.0.2': {}
 
+  '@ungap/structured-clone@1.4.0': {}
+
   '@use-gesture/core@10.3.1': {}
 
   '@use-gesture/react@10.3.1(react@19.3.0)':
@@ -11660,6 +12010,8 @@ snapshots:
 
   caniuse-lite@1.0.30001805: {}
 
+  ccount@2.0.1: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -11680,6 +12032,10 @@ snapshots:
 
   chalk@5.6.2: {}
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   chardet@2.2.0: {}
 
   check-error@2.1.3: {}
@@ -11780,6 +12136,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   commander@11.1.0: {}
 
   commander@14.0.3: {}
@@ -12035,6 +12393,10 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   dialkit@2.0.2(motion@13.4.0(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     optionalDependencies:
       motion: 13.4.0(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
@@ -12047,6 +12409,8 @@ snapshots:
 
   diff@8.0.4: {}
 
+  diff@9.0.0: {}
+
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
@@ -13092,6 +13456,24 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
   headers-polyfill@5.0.1:
     dependencies:
       '@types/set-cookie-parser': 2.4.10
@@ -13116,6 +13498,8 @@ snapshots:
     dependencies:
       whatwg-encoding: 3.1.1
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.2.0: {}
 
   http-errors@2.0.1:
@@ -13751,6 +14135,8 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lru_map@0.4.1: {}
+
   lucide-react@0.525.0(react@19.3.0):
     dependencies:
       react: 19.3.0
@@ -13814,6 +14200,18 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.4.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
   mdurl@2.0.0: {}
 
   media-typer@1.1.0: {}
@@ -13842,6 +14240,23 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.13.3
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.3
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.3: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -14287,6 +14702,14 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@10.2.0:
     dependencies:
       default-browser: 5.5.0
@@ -14741,6 +15164,12 @@ snapshots:
 
   powershell-utils@0.1.0: {}
 
+  preact-render-to-string@6.6.5(preact@11.0.0-beta.0):
+    dependencies:
+      preact: 11.0.0-beta.0
+
+  preact@11.0.0-beta.0: {}
+
   prettier@3.9.6: {}
 
   pretty-format@27.5.1:
@@ -14791,6 +15220,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@7.2.0: {}
+
   protocols@2.0.2: {}
 
   proxy-addr@2.0.7:
@@ -15026,6 +15457,16 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   remove-accents@0.5.0: {}
 
   request-ip@3.3.0: {}
@@ -15359,6 +15800,17 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@4.5.0:
+    dependencies:
+      '@shikijs/core': 4.5.0
+      '@shikijs/engine-javascript': 4.5.0
+      '@shikijs/engine-oniguruma': 4.5.0
+      '@shikijs/langs': 4.5.0
+      '@shikijs/themes': 4.5.0
+      '@shikijs/types': 4.5.0
+      '@shikijs/vscode-textmate': 10.1.0
+      '@types/hast': 3.0.5
+
   side-channel-list@1.0.1:
     dependencies:
       es-errors: 1.3.0
@@ -15438,6 +15890,8 @@ snapshots:
 
   source-map@0.7.6: {}
 
+  space-separated-tokens@2.0.2: {}
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
@@ -15537,6 +15991,11 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   stringify-object@5.0.0:
     dependencies:
       get-own-enumerable-keys: 1.0.0
@@ -15727,6 +16186,8 @@ snapshots:
 
   treeverse@3.0.0: {}
 
+  trim-lines@3.0.1: {}
+
   trim-newlines@3.0.1: {}
 
   ts-dedent@2.3.0: {}
@@ -15873,6 +16334,29 @@ snapshots:
     dependencies:
       imurmurhash: 0.1.4
 
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   universal-user-agent@6.0.1: {}
 
   universalify@2.0.1: {}
@@ -15944,6 +16428,16 @@ snapshots:
 
   verkit@0.3.1: {}
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vite-node@3.2.4(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.23.1)(yaml@2.9.0):
     dependencies:
       cac: 6.7.14
@@ -16344,3 +16838,5 @@ snapshots:
       '@types/react': 19.3.0
       react: 19.3.0
       use-sync-external-store: 1.6.0(react@19.3.0)
+
+  zwitch@2.0.4: {}

From 25997fd13571ce30bd366bdb16df53a3b13b8d3f Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Fri, 23 Oct 2026 18:36:31 +0700
Subject: [PATCH 4/4] docs(blocks): document the coding agent template

- New /blocks/coding-agent page with a live preview whose example picker
  opens the tabs layout, the sidebar layout, or a sub-agents session
- "Driving sessions from your harness" guide with a store-based example
- Split lib/application-blocks into one module per template; building
  blocks carry their own intro instead of a billing default
---
 .../src/app/blocks/coding-agent/page.tsx      |  23 +
 .../app/blocks/coding-agent/preview/page.tsx  |  22 +
 apps/blocks/src/app/globals.css               |   1 +
 .../application-block-docs-page.tsx           |  24 +-
 .../application-block-showcase-canvas.tsx     |   4 +
 .../application-block-showcase-preview.tsx    |  39 +-
 .../coding-agent-preview.tsx                  | 103 +++
 .../src/components/site/registry-shell.tsx    |   2 +-
 apps/blocks/src/lib/application-blocks.ts     | 874 ------------------
 .../lib/application-blocks/agents-builder.ts  | 122 +++
 .../lib/application-blocks/billing-account.ts | 117 +++
 .../lib/application-blocks/billing-console.ts | 100 ++
 .../lib/application-blocks/coding-agent.ts    | 252 +++++
 .../src/lib/application-blocks/data-rooms.ts  | 117 +++
 .../src/lib/application-blocks/index.ts       |  43 +
 .../src/lib/application-blocks/org-chart.ts   | 149 +++
 .../lib/application-blocks/storage-browser.ts | 231 +++++
 .../src/lib/application-blocks/types.ts       |  44 +
 .../src/lib/application-doc-navigation.ts     |   2 +
 19 files changed, 1386 insertions(+), 883 deletions(-)
 create mode 100644 apps/blocks/src/app/blocks/coding-agent/page.tsx
 create mode 100644 apps/blocks/src/app/blocks/coding-agent/preview/page.tsx
 create mode 100644 apps/blocks/src/components/application-block-showcase/coding-agent-preview.tsx
 delete mode 100644 apps/blocks/src/lib/application-blocks.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/agents-builder.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/billing-account.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/billing-console.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/coding-agent.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/data-rooms.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/index.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/org-chart.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/storage-browser.ts
 create mode 100644 apps/blocks/src/lib/application-blocks/types.ts

diff --git a/apps/blocks/src/app/blocks/coding-agent/page.tsx b/apps/blocks/src/app/blocks/coding-agent/page.tsx
new file mode 100644
index 0000000..d32d069
--- /dev/null
+++ b/apps/blocks/src/app/blocks/coding-agent/page.tsx
@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+
+import { ApplicationBlockDocsPage } from '@/components/application-block-showcase/application-block-docs-page';
+import { getApplicationBlock } from '@/lib/application-blocks';
+import { OG_IMAGE, withBase } from '@/lib/site';
+
+const block = getApplicationBlock('coding-agent')!;
+
+export default function CodingAgentPage() {
+  return <ApplicationBlockDocsPage block={block} />;
+}
+
+export const metadata: Metadata = {
+  title: block.title,
+  description: block.description,
+  alternates: { canonical: withBase('/blocks/coding-agent') },
+  openGraph: {
+    title: block.title,
+    description: block.description,
+    url: withBase('/blocks/coding-agent'),
+    images: [OG_IMAGE],
+  },
+};
diff --git a/apps/blocks/src/app/blocks/coding-agent/preview/page.tsx b/apps/blocks/src/app/blocks/coding-agent/preview/page.tsx
new file mode 100644
index 0000000..b7d326f
--- /dev/null
+++ b/apps/blocks/src/app/blocks/coding-agent/preview/page.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+
+import { ApplicationBlockShowcaseCanvas } from '@/components/application-block-showcase/application-block-showcase-canvas';
+import { withBase } from '@/lib/site';
+
+export default function CodingAgentPreviewPage() {
+  return (
+    <>
+      <h1 className="sr-only">Coding Agent live preview</h1>
+      {/* The preview reads its example from the query string, which only exists in the browser. */}
+      <Suspense fallback={<div className="h-dvh bg-background" />}>
+        <ApplicationBlockShowcaseCanvas name="coding-agent" />
+      </Suspense>
+    </>
+  );
+}
+
+export const metadata: Metadata = {
+  alternates: { canonical: withBase('/blocks/coding-agent') },
+  robots: { follow: false, index: false },
+};
diff --git a/apps/blocks/src/app/globals.css b/apps/blocks/src/app/globals.css
index 49e3af7..82ed379 100644
--- a/apps/blocks/src/app/globals.css
+++ b/apps/blocks/src/app/globals.css
@@ -7,6 +7,7 @@
 
 @source '../';
 @source '../../../../packages/ui/src/components/agents-builder';
+@source '../../../../packages/ui/src/components/coding-agent';
 @source '../../../../packages/ui/src/components/data-rooms';
 @source '../../../../packages/ui/src/components/workspace-kit';
 @source '../../../../packages/ui/src/components/org-chart';
diff --git a/apps/blocks/src/components/application-block-showcase/application-block-docs-page.tsx b/apps/blocks/src/components/application-block-showcase/application-block-docs-page.tsx
index bb16212..04fea1b 100644
--- a/apps/blocks/src/components/application-block-showcase/application-block-docs-page.tsx
+++ b/apps/blocks/src/components/application-block-showcase/application-block-docs-page.tsx
@@ -129,6 +129,14 @@ export function ApplicationBlockDocsPage({
         </CodeBlock>
       </DocSection>
 
+      {block.guides?.map((guide) => (
+        <DocSection description={guide.description} id={guide.id} key={guide.id} title={guide.title}>
+          <CodeBlock label={guide.title} language="tsx">
+            {guide.example}
+          </CodeBlock>
+        </DocSection>
+      ))}
+
       <DocSection
         description={block.state.description}
         id="state"
@@ -148,15 +156,11 @@ export function ApplicationBlockDocsPage({
         <GuidanceList items={block.composition} />
       </DocSection>
 
-      {block.buildingBlocks?.length ? (
-        <DocSection
-          description="Each of these installs with billing-kit and works outside the template: pass data and callbacks, and wrap them in BillingFormatProvider for locale, time zone, and clock."
-          id="building-blocks"
-          title="Building blocks"
-        >
+      {block.buildingBlocks ? (
+        <DocSection description={block.buildingBlocks.description} id="building-blocks" title="Building blocks">
           <PublicContract
             block={block}
-            rows={block.buildingBlocks}
+            rows={block.buildingBlocks.components}
             caption={`Components ${block.title} is built from.`}
             columns={['Component', 'Group', 'What it shows']}
           />
@@ -170,6 +174,12 @@ export function ApplicationBlockDocsPage({
       >
         <GuidanceList
           items={[
+            ...(block.examples?.length
+              ? [
+                  'Choose an example from the menu above the live preview; it reloads the same source opened that way.',
+                  ...block.examples.map((example) => `${example.label}: ${example.description}`),
+                ]
+              : []),
             'Use the breakpoint controls to inspect the same source at desktop, tablet, and mobile widths.',
             'Open the full-screen preview when you need to test menus, sheets, panning, or dense table interactions without documentation chrome.',
           ]}
diff --git a/apps/blocks/src/components/application-block-showcase/application-block-showcase-canvas.tsx b/apps/blocks/src/components/application-block-showcase/application-block-showcase-canvas.tsx
index a105f19..58c66f5 100644
--- a/apps/blocks/src/components/application-block-showcase/application-block-showcase-canvas.tsx
+++ b/apps/blocks/src/components/application-block-showcase/application-block-showcase-canvas.tsx
@@ -8,6 +8,9 @@ import type { ApplicationBlockDoc } from '@/lib/application-blocks';
 const AgentsBuilderPreview = dynamic(() =>
   import('./agents-builder-preview').then((module) => module.AgentsBuilderPreview),
 );
+const CodingAgentPreview = dynamic(() =>
+  import('./coding-agent-preview').then((module) => module.CodingAgentPreview),
+);
 const DataRoomsPreview = dynamic(() =>
   import('./data-rooms-preview').then((module) => module.DataRoomsPreview),
 );
@@ -30,6 +33,7 @@ export function ApplicationBlockShowcaseCanvas({
   name: ApplicationBlockDoc['name'];
 }) {
   if (name === 'agents-builder') return <AgentsBuilderPreview />;
+  if (name === 'coding-agent') return <CodingAgentPreview />;
   if (name === 'data-rooms') return <DataRoomsPreview />;
   if (name === 'billing-account') return <BillingAccountPreview />;
   if (name === 'billing-console') return <BillingConsolePreview />;
diff --git a/apps/blocks/src/components/application-block-showcase/application-block-showcase-preview.tsx b/apps/blocks/src/components/application-block-showcase/application-block-showcase-preview.tsx
index f4bc728..a8dbecd 100644
--- a/apps/blocks/src/components/application-block-showcase/application-block-showcase-preview.tsx
+++ b/apps/blocks/src/components/application-block-showcase/application-block-showcase-preview.tsx
@@ -1,13 +1,20 @@
 'use client';
 
+import { useId, useState } from 'react';
+
 import { Badge } from '@constructive-io/ui/badge';
+import { Field } from '@constructive-io/ui/field';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@constructive-io/ui/select';
 
 import { LivePreview } from '@/components/docs/live-preview';
+import type { ApplicationBlockExample } from '@/lib/application-blocks';
 
 export type LivePreviewBlock = Readonly<{
   previewDescription: string;
   previewHeight: number;
   title: string;
+  /** Named ways to open the preview, passed to the preview route as `?example=`. The first is the default. */
+  examples?: readonly ApplicationBlockExample[];
 }>;
 
 export function ApplicationBlockShowcasePreview({
@@ -17,8 +24,38 @@ export function ApplicationBlockShowcasePreview({
   block: LivePreviewBlock;
   previewPath: string;
 }) {
+  const controlId = useId();
+  const examples = block.examples ?? [];
+  const [example, setExample] = useState(examples[0]?.value);
+  const selected = examples.find((option) => option.value === example);
+
   return (
     <LivePreview
+      controls={
+        examples.length > 1 ? (
+          <Field className="w-full sm:w-56" htmlFor={controlId} label="Example">
+            <Select
+              value={example}
+              onValueChange={(value) => {
+                if (examples.some((option) => option.value === value)) setExample(value as string);
+              }}
+            >
+              <SelectTrigger id={controlId} size="lg">
+                <SelectValue>{() => selected?.label ?? 'Choose an example'}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {examples.map((option) => (
+                    <SelectItem className="min-h-11 sm:min-h-11" key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </Field>
+        ) : undefined
+      }
       defaultViewport="mobile"
       frameSlot="application-block-preview-frame"
       height={block.previewHeight}
@@ -26,7 +63,7 @@ export function ApplicationBlockShowcasePreview({
       name={block.title}
       responsive
       slot="application-block-showcase-preview"
-      src={previewPath}
+      src={example ? `${previewPath}?example=${encodeURIComponent(example)}` : previewPath}
     />
   );
 }
diff --git a/apps/blocks/src/components/application-block-showcase/coding-agent-preview.tsx b/apps/blocks/src/components/application-block-showcase/coding-agent-preview.tsx
new file mode 100644
index 0000000..ecbbcdd
--- /dev/null
+++ b/apps/blocks/src/components/application-block-showcase/coding-agent-preview.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import {
+  CODING_AGENT_DEMO,
+  CodingAgent,
+  type CodingAgentAction,
+  type CodingAgentLayout,
+} from '@/components/ui/coding-agent';
+import type { CodingAgentExample } from '@/lib/application-blocks/coding-agent';
+
+/** The docs preview's examples, picked with `?example=`; each opens the same demo data a different way. */
+const EXAMPLES: Record<CodingAgentExample, { layout: CodingAgentLayout; sessionId: string; hint: string }> = {
+  tabs: {
+    layout: 'tabs',
+    sessionId: 'session-invites',
+    hint: 'Watch the first session run, approve its test command, review the diff, or answer the question waiting in another tab.',
+  },
+  sidebar: {
+    layout: 'sidebar',
+    sessionId: 'session-invites',
+    hint: 'Sessions sit under their project with their live status; collapse the sidebar to a rail or switch back to tabs from its footer.',
+  },
+  'sub-agents': {
+    layout: 'tabs',
+    sessionId: 'session-security',
+    hint: 'The lead agent runs three workers in parallel: open one from its card, approve the command one of them asks for, or follow them in the Agents tab.',
+  },
+};
+
+function describeCodingAgentAction(action: CodingAgentAction) {
+  switch (action.type) {
+    case 'new-session':
+      return `The host would start a session ${action.location === 'worktree' ? 'in a new worktree' : 'in the checkout'}.`;
+    case 'send':
+      return 'The host would send the message to the agent runtime.';
+    case 'stop':
+      return 'The host would stop the running agent.';
+    case 'stop-run':
+      return 'The host would stop that agent and everything it started.';
+    case 'pause-run':
+    case 'resume-run':
+      return `The host would ${action.type === 'pause-run' ? 'pause' : 'resume'} that agent.`;
+    case 'steer-run':
+      return 'The host would pass the message to that agent mid-run.';
+    case 'retry-run':
+      return 'The host would run that agent again.';
+    case 'permission':
+      return action.decision === 'deny'
+        ? `The host would tell the agent not to run ${action.command}.`
+        : `The host would let the agent run ${action.command}.`;
+    case 'open-pull-request':
+      return `The host would open pull request #${action.number}.`;
+    case 'create-pull-request':
+      return `The host would open a pull request for ${action.worktreeId}.`;
+    case 'rerun-checks':
+      return `The host would re-run ${action.checkIds.length === 1 ? 'the failed check' : `${action.checkIds.length} failed checks`} on ${action.worktreeId}.`;
+    case 'answer':
+      return 'The host would hand the answer back to the waiting agent.';
+    case 'comment':
+      return `The host would attach a comment on ${action.path}:${action.line} to the next message.`;
+    case 'terminal-command':
+      return `The host would run ${action.command} in the session's shell.`;
+    case 'open-file':
+      return `The host would read ${action.path} from the checkout.`;
+    case 'open-url':
+      return `The host would load ${action.url} in the browser tab.`;
+    case 'layout':
+      return `Sessions now show as ${action.layout === 'tabs' ? 'tabs' : 'a sidebar'}.`;
+    default:
+      return `The host received ${action.type}.`;
+  }
+}
+
+export function CodingAgentPreview() {
+  const requested = useSearchParams().get('example');
+  const example = requested && requested in EXAMPLES ? EXAMPLES[requested as CodingAgentExample] : EXAMPLES.tabs;
+  const [message, setMessage] = useState(example.hint);
+
+  return (
+    <div
+      className="flex h-dvh min-h-[640px] w-full flex-col"
+      data-slot="application-block-showcase-canvas"
+    >
+      <CodingAgent
+        className="min-h-0 flex-1"
+        data={CODING_AGENT_DEMO}
+        defaultLayout={example.layout}
+        defaultActiveSessionId={example.sessionId}
+        onAction={(action) => setMessage(describeCodingAgentAction(action))}
+      />
+      <p
+        aria-live="polite"
+        className="shrink-0 truncate border-t border-border bg-background px-3 py-1.5 text-xs text-muted-foreground"
+        role="status"
+      >
+        {message}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/blocks/src/components/site/registry-shell.tsx b/apps/blocks/src/components/site/registry-shell.tsx
index 5718502..4b8c0e5 100644
--- a/apps/blocks/src/components/site/registry-shell.tsx
+++ b/apps/blocks/src/components/site/registry-shell.tsx
@@ -41,7 +41,7 @@ export function RegistryShell({ children }: { children: ReactNode }) {
   const isConsoleKitProof = pathname === '/__integration/console-kit';
   const isStandalonePreview =
     isConsoleKitProof ||
-    /^\/blocks\/(?:features\/[^/]+|org-chart|storage\/browser|agents-builder|data-rooms|billing\/(?:account|console)|sheets|schema-builder|documents|create)\/preview\/?$/.test(pathname);
+    /^\/blocks\/(?:features\/[^/]+|org-chart|storage\/browser|agents-builder|coding-agent|data-rooms|billing\/(?:account|console)|sheets|schema-builder|documents|create)\/preview\/?$/.test(pathname);
   const menuButtonRef = useRef<HTMLButtonElement | null>(null);
   const sidebarRef = useRef<HTMLElement | null>(null);
   const previouslyFocusedRef = useRef<HTMLElement | null>(null);
diff --git a/apps/blocks/src/lib/application-blocks.ts b/apps/blocks/src/lib/application-blocks.ts
deleted file mode 100644
index a5eb94d..0000000
--- a/apps/blocks/src/lib/application-blocks.ts
+++ /dev/null
@@ -1,874 +0,0 @@
-import type { DocSectionId } from './doc-sections';
-
-export type ApplicationBlockApiRow = Readonly<{
-  name: string;
-  type: string;
-  behavior: string;
-}>;
-
-export type ApplicationBlockDoc = Readonly<{
-  name: 'org-chart' | 'storage-browser' | 'agents-builder' | 'data-rooms' | 'billing-account' | 'billing-console';
-  /** Docs route when it is not `/blocks/<name>`, e.g. inside a section such as Billing. */
-  href?: string;
-  /** Section hub the block is listed under instead of its own nav item. */
-  section?: DocSectionId;
-  title: string;
-  description: string;
-  previewDescription: string;
-  previewHeight: number;
-  whenToUse: readonly string[];
-  usage: Readonly<{
-    description: string;
-    example: string;
-  }>;
-  state: Readonly<{
-    title: string;
-    description: string;
-  }>;
-  composition: readonly string[];
-  accessibility: readonly string[];
-  api: readonly ApplicationBlockApiRow[];
-  /** Leaf components the template is built from, each usable on its own. */
-  buildingBlocks?: readonly ApplicationBlockApiRow[];
-}>;
-
-export const APPLICATION_BLOCKS: readonly ApplicationBlockDoc[] = [
-  {
-    name: 'org-chart',
-    title: 'Org Chart',
-    description:
-      'An interactive organization chart on the workspace canvas: automatic top-down layout, pan and zoom, folding teams, a details panel, and drag-to-reassign with a keyboard alternative.',
-    previewDescription:
-      'Select a person to see their manager and reports, fold a team away, or drag a card onto a new manager and watch the preview wire follow.',
-    previewHeight: 740,
-    whenToUse: [
-      'Use Org Chart when reporting relationships are central to understanding or managing an organization.',
-      'Use a table or tree when dense scanning, bulk editing, or keyboard-only hierarchy management is the primary task.',
-    ],
-    usage: {
-      description:
-        'Pass either controlled edges or defaultEdges. The component owns viewport and selection behavior while the host owns persistence and application workflows.',
-      example: `'use client';
-
-import {
-  OrgChart,
-  type OrgChartEdge
-} from '@/components/ui/org-chart';
-
-const reportingLines: OrgChartEdge[] = [
-  {
-    id: 'alex',
-    parentId: null,
-    displayName: 'Alex Morgan',
-    positionTitle: 'Chief Executive Officer',
-    avatarUrl: null
-  },
-  {
-    id: 'sam',
-    parentId: 'alex',
-    displayName: 'Sam Rivera',
-    positionTitle: 'VP of Product',
-    avatarUrl: null
-  }
-];
-
-type ReportingLineInput = Readonly<{
-  personId: string;
-  managerId: string;
-  positionTitle?: string | null;
-}>;
-
-type CompanyOrgChartProps = Readonly<{
-  saveReportingLine: (
-    reportingLine: ReportingLineInput
-  ) => void | Promise<void>;
-  openPositionEditor: (personId: string) => void;
-  openRemovalConfirmation: (personId: string) => void;
-}>;
-
-export function CompanyOrgChart({
-  saveReportingLine,
-  openPositionEditor,
-  openRemovalConfirmation
-}: CompanyOrgChartProps) {
-  return (
-    <OrgChart
-      defaultEdges={reportingLines}
-      onReparent={(personId, managerId, preserve) =>
-        saveReportingLine({
-          personId,
-          managerId,
-          positionTitle: preserve.positionTitle
-        })
-      }
-      onEditNode={(person) => openPositionEditor(person.id)}
-      onRemoveNode={(person) => openRemovalConfirmation(person.id)}
-    />
-  );
-}`,
-    },
-    state: {
-      title: 'Hierarchy and interaction state',
-      description:
-        'Use edges when the host owns the current hierarchy. Use defaultEdges for optimistic local reparenting, and persist each accepted move through onReparent.',
-    },
-    composition: [
-      'The workspace canvas (shared with Agents Builder) owns pan, pinch, wheel, and keyboard zoom; the block lays flat reporting edges out as a tidy top-down tree and draws bezier wires between cards. More than eight reports without a team of their own stack in columns of up to eight under their manager instead of running in one row.',
-      'Selecting a person highlights their reporting chain and opens a details panel with their manager, direct reports, and actions; folded teams show a stacked card edge and the team size.',
-      'Node menus delegate editing and removal to the host, so the chart never assumes a router, form system, or destructive-action policy.',
-      'Loading and empty states are built in, while success and error messaging remain injectable through observer callbacks.',
-    ],
-    accessibility: [
-      'Keep every displayName and positionTitle meaningful because the same labels identify node actions and reporting relationships.',
-      'The chart is an ARIA tree: Tab into it, move between people with the arrow keys (inside a stacked column, Up and Down move through the column and Left and Right move between columns), press Enter for details, and use Change manager to reassign without dragging.',
-      'Confirm removal in the host workflow before changing data; the node menu reports intent and does not delete records itself.',
-    ],
-    api: [
-      {
-        name: 'edges / defaultEdges',
-        type: 'OrgChartEdge[]',
-        behavior:
-          'Chooses controlled or uncontrolled hierarchy state. Supply exactly one of these properties.',
-      },
-      {
-        name: 'editable',
-        type: 'boolean',
-        behavior:
-          'Enables dragging and node actions. Defaults to true.',
-      },
-      {
-        name: 'isLoading',
-        type: 'boolean',
-        behavior:
-          'Replaces the chart with a bounded loading surface while hierarchy data is pending.',
-      },
-      {
-        name: 'onReparent',
-        type: '(childId, newParentId, preserve) => void | Promise<void>',
-        behavior:
-          'Persists a valid reporting-line change. Uncontrolled mode reverts its optimistic move when the promise rejects.',
-      },
-      {
-        name: 'onAddToChart / onEditNode / onRemoveNode',
-        type: 'Callbacks',
-        behavior:
-          'Delegates creation, editing, and removal workflows without coupling the chart to dialogs or routing.',
-      },
-      {
-        name: 'onReparentSuccess / onReparentError',
-        type: 'Observer callbacks',
-        behavior:
-          'Lets the host present localized feedback for accepted and rejected reporting-line changes.',
-      },
-      {
-        name: 'showDetails / onSelectNode',
-        type: 'boolean / (node | null) => void',
-        behavior:
-          'Shows the built-in details panel for the selected person (default true), and reports selection so a host can render its own panel instead.',
-      },
-      {
-        name: 'defaultCollapsedIds',
-        type: 'string[]',
-        behavior:
-          'People whose teams start folded away, useful for large organizations.',
-      },
-      {
-        name: 'className',
-        type: 'string',
-        behavior:
-          'Adds layout classes to the chart container; use a height utility to replace the default 600-pixel canvas.',
-      },
-    ],
-  },
-  {
-    name: 'storage-browser',
-    href: '/blocks/storage/browser',
-    section: 'storage',
-    title: 'Storage Browser',
-    description:
-      'A controlled storage workspace: buckets in the workspace sidebar, a file list with type-tinted glyphs, search, sort, drag-and-drop upload, a floating selection bar, detail and bucket sheets, and distinct empty states.',
-    previewDescription:
-      'Switch buckets, search and sort files, select a few to see the selection bar, drop files onto the list, or open one for its preview and details.',
-    previewHeight: 720,
-    whenToUse: [
-      'Use Storage Browser when people need to inspect and manage objects across several application buckets.',
-      'Install a focused storage leaf when the surrounding product already owns navigation, tables, or configuration surfaces.',
-    ],
-    usage: {
-      description:
-        'Map GraphQL results into the storage domain types and keep selection, search, sort, folders, and actions in the host. The browser performs no fetching or authorization checks.',
-      example: `'use client';
-
-import { useMemo, useState } from 'react';
-
-import {
-  ObjectDetailSheet,
-  StorageBrowser,
-  type ObjectSort,
-  type StorageBucket,
-  type StorageObject
-} from '@/components/ui/storage';
-
-type AssetBrowserActions = Readonly<{
-  confirmDelete: (objectIds: string[]) => void;
-  copyLink: (object: StorageObject) => void;
-  createBucket: () => void;
-  download: (object: StorageObject) => void;
-  rename: (objectId: string, filename?: string) => void;
-  upload: () => void;
-}>;
-
-function compareObjects(
-  left: StorageObject,
-  right: StorageObject,
-  sort: ObjectSort
-) {
-  let comparison = 0;
-  if (sort.column === 'filename') {
-    comparison = (left.filename ?? left.key).localeCompare(
-      right.filename ?? right.key
-    );
-  } else if (sort.column === 'mimeType') {
-    comparison = left.mimeType.localeCompare(right.mimeType);
-  } else if (sort.column === 'size') {
-    comparison = left.size - right.size;
-  } else {
-    comparison =
-      new Date(left.createdAt).getTime() -
-      new Date(right.createdAt).getTime();
-  }
-  return sort.direction === 'asc' ? comparison : -comparison;
-}
-
-export function AssetBrowser({
-  actions,
-  buckets,
-  objects
-}: Readonly<{
-  actions: AssetBrowserActions;
-  buckets: StorageBucket[];
-  objects: StorageObject[];
-}>) {
-  const [bucketId, setBucketId] = useState<string | null>(
-    buckets[0]?.id ?? null
-  );
-  const [openedObject, setOpenedObject] = useState<StorageObject | null>(null);
-  const [query, setQuery] = useState('');
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  const [sort, setSort] = useState<ObjectSort>({
-    column: 'createdAt',
-    direction: 'desc'
-  });
-  const visibleObjects = useMemo(() => {
-    const search = query.trim().toLocaleLowerCase();
-    return objects
-      .filter((object) => {
-        if (object.bucketId !== bucketId) return false;
-        if (!search) return true;
-        const searchable = [
-          object.filename ?? '',
-          object.key,
-          object.mimeType
-        ].join(' ');
-        return searchable.toLocaleLowerCase().includes(search);
-      })
-      .sort((left, right) => compareObjects(left, right, sort));
-  }, [bucketId, objects, query, sort]);
-
-  return (
-    <>
-      <StorageBrowser
-        buckets={buckets}
-        objects={visibleObjects}
-        query={query}
-        selectedBucketId={bucketId}
-        selectedIds={selectedIds}
-        sort={sort}
-        onBulkDelete={actions.confirmDelete}
-        onClearSelection={() => setSelectedIds([])}
-        onCopyLink={actions.copyLink}
-        onDelete={(object) => actions.confirmDelete([object.id])}
-        onDownload={actions.download}
-        onNewBucket={actions.createBucket}
-        onOpenObject={setOpenedObject}
-        onQueryChange={setQuery}
-        onRename={(object) => actions.rename(object.id)}
-        onSelectBucket={(nextBucketId) => {
-          setBucketId(nextBucketId);
-          setSelectedIds([]);
-        }}
-        onSelectionChange={setSelectedIds}
-        onSortChange={setSort}
-        onUpload={actions.upload}
-      />
-      <ObjectDetailSheet
-        object={openedObject}
-        open={openedObject !== null}
-        onCopyLink={actions.copyLink}
-        onDelete={(objectId) => {
-          actions.confirmDelete([objectId]);
-          setOpenedObject(null);
-        }}
-        onDownload={actions.download}
-        onOpenChange={(open) => {
-          if (!open) setOpenedObject(null);
-        }}
-        onRename={actions.rename}
-      />
-    </>
-  );
-}`,
-    },
-    state: {
-      title: 'Data and action boundaries',
-      description:
-        'Every collection, selection, filter, sort, and mutation callback is controlled. Filter and authorize records before passing them to the block, then refresh its props after a mutation succeeds.',
-    },
-    composition: [
-      'The storage-browser registry item installs the shared storage barrel and every leaf: bucket rail, object table, upload dropzone, detail sheet, bucket configuration sheet, and empty states.',
-      'StorageBrowser sits on the shared workspace shell (the same sidebar rail, drawer, and view header as Agents Builder and Billing) and composes the bucket rail, folder path, search, sort menu, object table, selection bar, and empty states; render the installed sheets and upload surface beside it.',
-      'The types mirror Constructive storage records, but the UI remains transport-neutral and does not bypass PostgreSQL privileges or RLS.',
-    ],
-    accessibility: [
-      'Preserve object filenames, MIME types, sizes, and dates as text so file state never depends on an icon or color alone.',
-      'Keep selection controlled and announce the resulting count; bulk deletion should open a confirmation before calling the mutation.',
-      'Treat unavailable storage, denied access, no buckets, and an empty bucket as distinct states because they require different recovery actions.',
-    ],
-    api: [
-      {
-        name: 'buckets / selectedBucketId / onSelectBucket',
-        type: 'StorageBucket[] / string | null / callback',
-        behavior:
-          'Supplies the bucket rail and keeps the active bucket controlled by the host.',
-      },
-      {
-        name: 'objects / selectedIds / onSelectionChange',
-        type: 'StorageObject[] / string[] / callback',
-        behavior:
-          'Supplies visible objects and controls row and bulk selection.',
-      },
-      {
-        name: 'sort / onSortChange',
-        type: 'ObjectSort / callback',
-        behavior:
-          'Reports the requested column and direction; the host returns objects in the corresponding order.',
-      },
-      {
-        name: 'query / onQueryChange',
-        type: 'string / callback',
-        behavior:
-          'Controls the search field while filtering or remote querying remains in the host.',
-      },
-      {
-        name: 'segments / onNavigate',
-        type: 'StorageBreadcrumbSegment[] / callback',
-        behavior:
-          'Adds optional folder navigation beneath the active bucket header.',
-      },
-      {
-        name: 'onUpload / onBulkDelete / object callbacks',
-        type: 'Callbacks',
-        behavior:
-          'Delegates upload, delete, open, download, copy-link, rename, and row-delete workflows.',
-      },
-      {
-        name: 'onDropFiles',
-        type: '(files: FileList) => void',
-        behavior:
-          'Turns the file list into a drop target: dragging files over it shows where they will land, and dropping hands the files to the host.',
-      },
-      {
-        name: 'locale',
-        type: 'string',
-        behavior:
-          'Formats the counts in the rail, toolbar and selection bar with the reader\'s own separators (for example "de-DE"). Counts render with "en-US" separators by default so the server and browser agree.',
-      },
-      {
-        name: 'title / defaultSidebarCollapsed',
-        type: 'string / boolean',
-        behavior:
-          'Names the workspace in the sidebar header (default "Storage") and starts the sidebar as an icon rail.',
-      },
-      {
-        name: 'isLoading / emptyState / emptyLabel',
-        type: 'boolean / StorageEmptyStateVariant / string',
-        behavior:
-          'Distinguishes pending results, empty table results, and full-pane storage states.',
-      },
-      {
-        name: 'bulkDeleteProgress',
-        type: '{ done: number; total: number; failed: string[] }',
-        behavior:
-          'Shows deterministic progress and partial failures while a host-owned bulk deletion is running.',
-      },
-      {
-        name: 'className',
-        type: 'string',
-        behavior:
-          'Adds layout classes to the outer storage workspace.',
-      },
-    ],
-  },
-  {
-    name: 'agents-builder',
-    title: 'Agents Builder',
-    description:
-      'A complete agent workspace template: chat with inline questions and tool traces, an integrations directory with a two-step connect flow, a skills library, and an agent detail view with a live run panel and pannable canvas.',
-    previewDescription:
-      'Start a recommended chat, answer the agent’s questions, connect a source, triage agent-drafted replies in the Inbox, pause or run schedules, then open Revenue Analyst to watch a run reason, query the warehouse, fan out across sub-agents and skills, and wait for your approval.',
-    previewHeight: 820,
-    whenToUse: [
-      'Use Agents Builder as the starting shell for a product where people chat with agents, connect the apps those agents read from, and inspect what each agent runs.',
-      'Install the AI kit primitives on their own when you only need a chat surface or a single agent card inside an existing layout.',
-    ],
-    usage: {
-      description:
-        'Pass workspace data and handle side effects through callbacks. The template owns navigation between its views, the connect dialog, and scripted playback; the host owns routing, OAuth, persistence, and model calls.',
-      example: `'use client';
-
-import { useRouter } from 'next/navigation';
-
-import {
-  AgentsBuilder,
-  type AgentsBuilderAction,
-  type AgentsBuilderData,
-  type Integration
-} from '@/components/ui/agents-builder';
-
-type AgentWorkspaceProps = Readonly<{
-  data: AgentsBuilderData;
-  startOAuth: (integration: Integration) => Promise<void>;
-  saveConnection: (
-    integrationId: string,
-    toolIds: string[]
-  ) => Promise<void>;
-}>;
-
-export function AgentWorkspace({
-  data,
-  startOAuth,
-  saveConnection
-}: AgentWorkspaceProps) {
-  const router = useRouter();
-
-  const handleAction = (action: AgentsBuilderAction) => {
-    if (action.type === 'navigate') router.push(\`/\${action.target}\`);
-    if (action.type === 'open-agent') router.push(\`/agents/\${action.agentId}\`);
-  };
-
-  return (
-    <div className="h-dvh">
-      <AgentsBuilder
-        data={data}
-        onAuthorizeIntegration={startOAuth}
-        onConnectIntegration={(integration, toolIds) =>
-          saveConnection(integration.id, toolIds)
-        }
-        onAction={handleAction}
-      />
-    </div>
-  );
-}`,
-    },
-    state: {
-      title: 'Views, connections, and playback',
-      description:
-        'The active view is uncontrolled by default; pass view and onViewChange to sync it with a router. Connections start from each integration’s connected flag and update only after onConnectIntegration resolves. Chat replies and the agent run play from scripted beats, so map live model and run events onto the same shapes when you connect a runtime.',
-    },
-    composition: [
-      'Built from the AI kit: PromptInput, ChatContainer, ToolTrace, ThinkingStatus, AskCard, ConnectPrompt, AgentDraftCard, and UsageNotice, so each surface can be reused outside the template.',
-      'Each view (ChatView, IntegrationsView, SkillsView, AgentView) and the ConnectIntegrationDialog is exported for hosts that want their own shell or router.',
-      'Integration marks fall back to tinted monograms; pass real brand marks through each integration’s mark field.',
-    ],
-    accessibility: [
-      'Every icon-only control has a label and a tooltip; the collapsed sidebar keeps labels available through tooltips and aria-label.',
-      'The agent canvas is a focusable region: arrow keys pan, plus and minus zoom, and zero resets to 100%.',
-      'Clarifying questions use radio semantics with lettered options and a labeled free-text row, and streamed status lines are announced politely.',
-      'Scripted playback shortens to near-instant steps when reduced motion is requested.',
-    ],
-    api: [
-      {
-        name: 'data',
-        type: 'AgentsBuilderData',
-        behavior:
-          'Workspace name, models, integrations and categories, agents, skills, starter packs, chat recommendations and replies, the agent blueprint, and its run script. AGENTS_BUILDER_DEMO is a complete example.',
-      },
-      {
-        name: 'view / defaultView / onViewChange',
-        type: "'chat' | 'integrations' | 'skills' | 'agent'",
-        behavior: 'Controls or seeds the active view.',
-      },
-      {
-        name: 'onAuthorizeIntegration',
-        type: '(integration) => Promise<void>',
-        behavior:
-          'Runs the provider consent handoff. Resolve to advance to tool selection; reject to return to sign-in.',
-      },
-      {
-        name: 'onConnectIntegration',
-        type: '(integration, toolIds) => void | Promise<void>',
-        behavior:
-          'Persists a connection with the tools left enabled. Rejecting keeps the dialog open on the tools step.',
-      },
-      {
-        name: 'onAction',
-        type: '(action: AgentsBuilderAction) => void',
-        behavior:
-          'Receives every host-owned control: navigation, search, sharing, skill and agent links, workspace menu items, stop, and follow-ups.',
-      },
-      {
-        name: 'theme / onThemeChange',
-        type: "'light' | 'dark' | 'system'",
-        behavior: 'Drives the appearance switch in the workspace menu.',
-      },
-      {
-        name: 'defaultSidebarCollapsed / autoplayRun',
-        type: 'boolean',
-        behavior:
-          'Starts with the icon rail, and chooses whether the agent run replays or opens settled.',
-      },
-    ],
-  },
-  {
-    name: 'data-rooms',
-    title: 'Data Rooms',
-    description:
-      'Secure document rooms for an organization and its sub-organizations: access that carries down the hierarchy, folder shares that expire, agreements before entry, view-only and watermarked documents, Q&A, reading insights, and a room assistant that only cites what the reader can open.',
-    previewDescription:
-      'Open Project Atlas, ask why someone can see a folder, preview the room as a bidder or a share-only advisor, share a folder until a date, accept the agreement as a guest, answer a question from a drafted reply, and follow who read what in Insights.',
-    previewHeight: 820,
-    whenToUse: [
-      'Use Data Rooms when documents must be shared with people inside and outside an organization under rules people can see and explain: deal rooms, board packs, fundraising, audits, client portals.',
-      'Use the Storage Browser block for plain file management without rooms, roles, agreements, or guests.',
-    ],
-    usage: {
-      description:
-        'Pass the workspace as one data object and handle every change through onCommand. The template owns navigation, dialogs, previews, and optimistic updates; the host owns storage, delivery, authorization, and the activity log.',
-      example: `'use client';
-
-import { useRouter } from 'next/navigation';
-
-import {
-  DataRooms,
-  type DataRoomsAction,
-  type DataRoomsCommand,
-  type DataRoomsData
-} from '@/components/ui/data-rooms';
-
-type DealRoomsProps = Readonly<{
-  data: DataRoomsData;
-  save: (command: DataRoomsCommand) => Promise<void>;
-  download: (documentId: string) => void;
-}>;
-
-export function DealRooms({ data, save, download }: DealRoomsProps) {
-  const router = useRouter();
-
-  const handleAction = (action: DataRoomsAction) => {
-    if (action.type === 'download') download(action.documentId);
-    if (action.type === 'org-menu' && action.item === 'log-out') router.push('/logout');
-  };
-
-  return (
-    <div className="h-dvh">
-      <DataRooms
-        data={data}
-        onCommand={async (command) => {
-          await save(command);
-          router.refresh();
-        }}
-        onAction={handleAction}
-      />
-    </div>
-  );
-}`,
-    },
-    state: {
-      title: 'Access, previews, and changes',
-      description:
-        'Access is worked out from data by the exported effectiveAccess helper: owners and admins carry down through sub-units into rooms, members only when inheritance allows and the room is not restricted, folder shares cover their subtree until they expire, read-only members lose every write, and view-only documents lose downloads. It drives which controls appear, the “Why can they?” trace, and Preview as, and your server still decides every request. Commands apply locally after onCommand resolves, and new data from the host replaces them.',
-    },
-    composition: [
-      'Built on the workspace kit (shell, sidebar, panels, tables, canvas) and the AI kit (prompt input, chat container, suggestions), so it matches Agents Builder and Billing.',
-      'Every view, tab, sheet, and dialog is exported, along with effectiveAccess, describeGrant, applyDataRoomsCommand, and answerFromScript for hosts that build their own shell or run the same rules on the server.',
-      'Pass renderPreview to draw real pages in the viewer and onAskAssistant to answer from your own runtime; without them the template draws placeholder pages and answers from data.assistant.',
-    ],
-    accessibility: [
-      'Room sections are a tab list with arrow-key navigation, and every icon-only control has a label and a tooltip.',
-      'The access map is a focusable canvas: arrow keys pan, plus and minus zoom, and zero resets to 100%.',
-      'Permissions are written out as labelled chips, never conveyed by colour alone, and watermarks are announced as text.',
-      'Assistant answers appear instantly when reduced motion is requested.',
-    ],
-    api: [
-      {
-        name: 'data',
-        type: 'DataRoomsData',
-        behavior:
-          'The organization and its units, people, roles, memberships, inheritance rules, rooms with their protections and agreement, documents and folders, folder shares, invites, acceptances, activity, questions, and assistant script. DATA_ROOMS_DEMO is a complete example.',
-      },
-      {
-        name: 'onCommand',
-        type: '(command: DataRoomsCommand) => Promise<void> | void',
-        behavior:
-          'Every change: create and update rooms, invite, change roles, share and revoke folders, upload, move, accept the agreement, ask and answer questions, edit roles and inheritance. Reject with an Error to keep the dialog open with its message.',
-      },
-      {
-        name: 'onAction',
-        type: '(action: DataRoomsAction) => void',
-        behavior: 'Downloads, document views for your access log, activity export, search, contact, and organization menu items.',
-      },
-      {
-        name: 'view / roomId / tab',
-        type: "'home' | 'access-map' | 'activity' | 'room'",
-        behavior: 'Each has a default and an onChange, so a router can control where the workspace is.',
-      },
-      {
-        name: 'previewAs / defaultPreviewAs',
-        type: 'string | null',
-        behavior: 'Shows the workspace as another person sees it. Changes are disabled while previewing.',
-      },
-      {
-        name: 'onAskAssistant',
-        type: '(request) => Promise<AssistantAnswer>',
-        behavior: 'Answers the room assistant from your runtime. Return only citations the asker may open.',
-      },
-      {
-        name: 'renderPreview',
-        type: '(document, context) => ReactNode',
-        behavior: 'Draws document pages in the viewer, given the reader and whether to watermark and block downloads.',
-      },
-      {
-        name: 'views / locale / timeZone',
-        type: 'DataRoomsView[] / string',
-        behavior: 'Limits the views to what your data can back, and sets date and number formatting (en-US in UTC by default).',
-      },
-    ],
-  },
-  {
-    name: 'billing-account',
-    href: '/blocks/billing/account',
-    section: 'billing',
-    title: 'Billing Account',
-    description:
-      'The customer side of Constructive billing: an account switcher and six views over one account’s plan, usage by credit pool, credits, invoices, and ledger. Works for Constructive’s own platform billing and for any tenant app billing its customers.',
-    previewDescription:
-      'Switch scenarios (overdue, suspended, checkout pending, scheduled downgrade, free, read-only member, tenant app), open a meter to see its daily usage and waterfall, preview a downgrade with its conflicts, buy a pack, redeem a gift code (try HACKWEEK-2026 or TEAM-SEATS), and filter the ledger.',
-    previewHeight: 820,
-    whenToUse: [
-      'Use Billing Account as the billing destination for a signed-in person or organization: what plan they are on, what they have used, what is left, and what they paid.',
-      'Use the Billing Console template for the operator side (catalog, customers, provider, standing), and billing-kit leaves when one card or table belongs inside an existing page.',
-    ],
-    usage: {
-      description:
-        'Map the account’s billing rows into BillingAccountData and hand purchases to your provider through callbacks. The template owns navigation, previews, and optimistic local state; the host owns checkout, the customer portal, and persistence.',
-      example: `'use client';
-
-import { useRouter } from 'next/navigation';
-
-import {
-  BillingAccount,
-  type BillingAccountAction,
-  type BillingAccountData,
-  type PlanChangeRequest,
-  type RedeemResult
-} from '@/components/ui/billing-account';
-
-type AccountBillingProps = Readonly<{
-  data: BillingAccountData;
-  now: string;
-  changePlan: (request: PlanChangeRequest) => Promise<{ checkoutUrl?: string }>;
-  checkoutPack: (slug: string) => Promise<string>;
-  redeem: (code: string) => Promise<RedeemResult>;
-  openPortal: () => Promise<string>;
-  /** From the \`?code=\` of a promo link, if any. */
-  promoCode?: string;
-}>;
-
-export function AccountBilling({ data, now, changePlan, checkoutPack, redeem, openPortal, promoCode }: AccountBillingProps) {
-  const router = useRouter();
-
-  const handleAction = async (action: BillingAccountAction) => {
-    if (action.type === 'open-portal') window.location.assign(await openPortal());
-    if (action.type === 'switch-account') router.push(\`/billing/\${action.accountId}\`);
-  };
-
-  return (
-    <div className="h-dvh">
-      <BillingAccount
-        data={data}
-        now={now}
-        onChangePlan={async (request) => {
-          const { checkoutUrl } = await changePlan(request);
-          if (checkoutUrl) window.location.assign(checkoutUrl);
-        }}
-        onBuyCredits={async (pack) => window.location.assign(await checkoutPack(pack.slug))}
-        onRedeemCode={redeem}
-        initialRedeemCode={promoCode}
-        onAction={handleAction}
-      />
-    </div>
-  );
-}`,
-    },
-    state: {
-      title: 'Views, previews, and optimistic state',
-      description:
-        'The view is uncontrolled by default; pass view and onViewChange to sync it with a router, and views to hide the ones your data cannot back. After a callback resolves the template shows the result locally (a scheduled change, a pending checkout, a new plan); passing new data resets it to the host’s truth.',
-    },
-    composition: [
-      'Built on workspace-kit (the same shell as Agents Builder: sidebar rail, drawer, view frames, filter pills) and billing-kit, so every card, table, and dialog is reusable on its own.',
-      'Overview: BillingStatusBanner (admin hold → suspension → grace → checkout pending → review → scheduled change), CurrentPlanCard, CreditWallet, PoolGrid, LimitList, LedgerTimeline, and FeatureCapList.',
-      'Usage: headline StatTiles with a projection to period end, UsageTree (universal → category pools → meters, each with plan marker and credit cost), MeterDetailSheet with daily Sparkline and request windows, LimitList, UsageAlertList, and FeatureCapList.',
-      'Plans: IntervalSwitch and PlanComparison, which hides plans with no active price except the account’s current one; choosing a plan opens PlanChangeDialog, which refuses a plan without an active price, which diffs entitlements, flags limits already exceeded, and offers “now” or “at period end” when the provider can schedule changes.',
-      'Gift codes: RedeemCodeDialog opens from the overview, the credits view, the account menu, or a ?code= link (initialRedeemCode). The host answers with the redemption or a typed refusal (not found, paused, expired, used up, already redeemed, not eligible); the dialog lists every grant, and the credits, balances, limits, and ledger update right away.',
-      'Credits: CreditWallet, RedeemCodeField, CreditPackGrid, CreditGrantList in draw-down order, and RedemptionList of codes this account redeemed. Invoices: payment method panel (PaymentMethodRow from the host’s paymentMethod summary, plus the provider portal), InvoiceTable with expandable lines, AdjustmentList. Activity: LedgerTimeline filtered by class.',
-      'Provider-neutral: the active BillingProviderDescriptor decides which actions appear (hosted checkout, customer portal, scheduled changes) and how the provider is named, including merchant-of-record copy. Customers see the provider by name only; object ids and dashboard links stay in the console. Stripe ships as STRIPE_PROVIDER; hosts register others the same way.',
-    ],
-    accessibility: [
-      'Status never relies on colour: every badge carries a label, meters expose values through the meter role, and warnings in the sidebar have screen-reader text.',
-      'The plan-change preview is a labelled dialog with radio choices for timing and inline error text when the host refuses the change.',
-      'The collapsed sidebar keeps labels through tooltips and aria-label; below the sidebar width navigation moves into a drawer.',
-      'Entrance motion and bar fills turn off under reduced motion; view swaps never animate the whole page.',
-    ],
-    api: [
-      { name: 'data', type: 'BillingAccountData', behavior: 'Accounts, plans and prices, comparison rows, meters and balances, the subscription, credit grants and packs, ledger, invoices, limits, caps, alerts, and (platform) database standing. BILLING_ACCOUNT_DEMO and billingAccountScenario() are complete examples.' },
-      { name: 'view / defaultView / onViewChange', type: "'overview' | 'usage' | 'plans' | 'credits' | 'invoices' | 'activity'", behavior: 'Controls or seeds the active view.' },
-      { name: 'views', type: 'BillingAccountView[]', behavior: 'Limits navigation to the views the host can back; defaults to all six.' },
-      { name: 'onChangePlan', type: '(request: PlanChangeRequest) => Promise<void>', behavior: 'Receives the plan, price, timing, and whether a hosted checkout is needed. Reject to keep the preview open with the message.' },
-      { name: 'onBuyCredits', type: '(pack) => Promise<void>', behavior: 'Starts a pack checkout.' },
-      { name: 'onRedeemCode', type: '(code: string) => Promise<RedeemResult>', behavior: 'Redeems a normalised gift code for this account. Resolve with { status: \'redeemed\', redemption } (what it granted, each grant\'s expiry resolved) or { status: \'refused\', reason, message? }. Without it, redeeming is hidden.' },
-      { name: 'initialRedeemCode', type: 'string', behavior: 'Opens the redeem dialog prefilled, e.g. from a promo link; a new value reopens it.' },
-      { name: 'onAlertsChange', type: '(alerts: UsageAlert[]) => void', behavior: 'Persists usage alert edits.' },
-      { name: 'onAction', type: '(action: BillingAccountAction) => void', behavior: 'Portal, invoice, pay, cancel scheduled change, contact sales or support, account switch, and account-menu items.' },
-      { name: 'locale / timeZone / now', type: 'string', behavior: 'Formatting; pass now from the server so relative dates render identically on both sides.' },
-      { name: 'theme / onThemeChange / defaultSidebarCollapsed', type: "'light' | 'dark' | 'system' / boolean", behavior: 'Drives the appearance switch in the account menu and the initial rail state.' },
-    ],
-    buildingBlocks: [
-      { name: 'BillingStatusBanner / Notice / LifecycleBadge', type: 'status', behavior: 'The one notice an account needs now, and lifecycle labels for active, grace, suspended, checkout pending, ended, and review required.' },
-      { name: 'CurrentPlanCard / PriceTag / IntervalSwitch', type: 'plan', behavior: 'Plan, price, period progress, next invoice, and scheduled change.' },
-      { name: 'PlanComparison / PlanChangeDialog', type: 'plan', behavior: 'Side-by-side plans (plans without an active price are hidden) and the preview that diffs entitlements and picks timing.' },
-      { name: 'UsageTree / PoolGrid / MeterDetailSheet', type: 'usage', behavior: 'The credit waterfall, busiest pools, and one meter in depth.' },
-      { name: 'AllowanceBar / UsageFigure / Sparkline / PeriodTrack', type: 'primitives', behavior: 'Bars with soft thresholds and plan markers, figures, daily bars, and the billing period as a thin segmented bar, one segment per day.' },
-      { name: 'CreditWallet / CreditGrantList / CreditPackGrid', type: 'credits', behavior: 'Balance composition, grants in spend order, and packs.' },
-      { name: 'RedeemCodeDialog / RedeemCodeField / RedemptionList / CodeGrantList', type: 'gift codes', behavior: 'Redeem a code, see exactly what it added (e.g. +25,000 compute credits for 30 days), typed refusals, and redeemed-code history.' },
-      { name: 'LimitList / FeatureCapList / UsageAlertList', type: 'entitlements', behavior: 'Counted limits, plan features, and usage alerts.' },
-      { name: 'InvoiceTable / AdjustmentList / LedgerTimeline', type: 'history', behavior: 'Invoices with lines, refunds and disputes, and the ledger by day.' },
-    ],
-  },
-  {
-    name: 'billing-console',
-    href: '/blocks/billing/console',
-    section: 'billing',
-    title: 'Billing Console',
-    description:
-      'The operator side of Constructive billing, for the platform or a tenant database: revenue and attention, the catalog (plans and prices, entitlements, meters, packs and codes), customers, the payment provider with readiness and the billing switch, and platform database standing.',
-    previewDescription:
-      'Switch between the platform console and a tenant setting up billing. Edit the entitlement matrix and save, open a customer and grant credits, run the readiness check, try the locked billing switch, change the credit rate, switch providers, create or bulk-create gift codes and see who redeemed them, and place or lift an admin hold.',
-    previewHeight: 820,
-    whenToUse: [
-      'Use Billing Console where operators manage what a billing module sells and to whom: Constructive’s platform team, or a developer running billing for their own app.',
-      'Use Billing Account for the customer side of the same module.',
-    ],
-    usage: {
-      description:
-        'Map the billing module’s catalog, customers, provider connection, readiness verdict, and settings into BillingConsoleData, and route every write to your API. Provider credentials are write-only: the console only learns whether each one is set.',
-      example: `'use client';
-
-import {
-  BillingConsole,
-  type BillingConsoleData
-} from '@/components/ui/billing-console';
-
-type OperatorBillingProps = Readonly<{
-  data: BillingConsoleData;
-  api: {
-    saveEntitlements: (changes: { planId: string; kind: string; key: string; value: number }[]) => Promise<void>;
-    storeProviderSecrets: (providerId: string, values: Record<string, string>) => Promise<void>;
-    enqueueReadinessCheck: () => Promise<void>;
-    setBillingEnabled: (enabled: boolean) => Promise<void>;
-    grantCredits: (customerId: string, meter: string, amount: number, reason: string) => Promise<void>;
-  };
-}>;
-
-export function OperatorBilling({ data, api }: OperatorBillingProps) {
-  return (
-    <div className="h-dvh">
-      <BillingConsole
-        data={data}
-        onSaveEntitlements={api.saveEntitlements}
-        onConnectProvider={api.storeProviderSecrets}
-        onRunReadinessCheck={api.enqueueReadinessCheck}
-        onToggleBilling={api.setBillingEnabled}
-        onGrantCredits={(request) =>
-          api.grantCredits(request.customerId, request.meterSlug, request.amount, request.reason)
-        }
-      />
-    </div>
-  );
-}`,
-    },
-    state: {
-      title: 'Drafts, gates, and optimistic state',
-      description:
-        'Entitlement edits stay a local draft with a save bar until onSaveEntitlements resolves. The billing switch refuses to turn on without a passing readiness verdict under 24 hours old, mirroring the database gate; turning it off is always allowed. Toggles, grants, holds, and provider connections show locally after the host resolves and reset with new data.',
-    },
-    composition: [
-      'Same shell as Billing Account and Agents Builder (workspace-kit), with a workspace menu that marks the scope as Platform or Tenant and a footer showing whether billing is live.',
-      'Overview: StatTiles for recurring revenue, customers, and revenue at risk; a “Needs attention” list (readiness, overdue customers, reviews, catalog sync, usage-sync failures, suspended databases); revenue bars; customers by plan.',
-      'Catalog: PlanPriceTable (immutable prices, sync state, provider ids), EntitlementMatrix (plans × limits, meter allowances, caps, editable with ∞), MeterCatalogTable grouped by pool, and CreditPackTable (flags packs priced below the credit rate).',
-      'Gift codes: CreditCodeTable with live, paused, expired, and used-up codes; CreditCodeDialog to create or edit one (generated or typed code, grants on meters such as the compute pool or on limits such as seats, redemption cap, expiry, pause); BulkCodeDialog for single-use batches with copy and CSV download; CreditCodeSheet with every redemption.',
-      'Customers: filters and search over CustomerTable; CustomerDetailSheet with balances, credits and GrantCreditsForm, overrides, request windows, the provider operations log, and invoices.',
-      'Provider: the active provider card with write-only credential state, ReadinessChecklist with “Check now”, the gated billing switch, the credit rate, usage sync, and ProviderConnectDialog for connecting or switching (one active provider at a time).',
-      'Standing (platform only): StandingTable with billing suspensions and admin holds, a reasoned hold dialog, and release.',
-    ],
-    accessibility: [
-      'Tables use real table semantics with scoped headers; switches have descriptive labels such as “Retire the monthly Pro price”.',
-      'Matrix cells are labelled inputs (“Databases for Team”) that commit on blur or Enter and cancel on Escape; the unlimited toggle is a pressed-state button.',
-      'The readiness checklist announces its running state, and every check keeps its text status.',
-      'Credential inputs never echo stored values; errors are tied to fields with aria-describedby.',
-    ],
-    api: [
-      { name: 'data', type: 'BillingConsoleData', behavior: 'Scope, workspace, providers and the active connection, readiness verdict, settings, usage sync, plans, entitlement groups, meters, packs, codes, customers, standing, and a revenue trend. BILLING_CONSOLE_DEMO and BILLING_CONSOLE_TENANT_DEMO are complete examples.' },
-      { name: 'view / defaultView / onViewChange / views', type: "'overview' | 'catalog' | 'customers' | 'provider' | 'standing'", behavior: 'Controls or seeds the active view and limits navigation; standing only appears at platform scope.' },
-      { name: 'onSaveEntitlements', type: '(changes: EntitlementChange[]) => Promise<void>', behavior: 'Persists the matrix draft; reject to keep it unsaved with the message.' },
-      { name: 'onConnectProvider', type: '(providerId, values) => Promise<void>', behavior: 'Stores credentials and makes the provider active.' },
-      { name: 'onRunReadinessCheck', type: '() => Promise<BillingHealth | void>', behavior: 'Enqueues the readiness job; resolve with the new verdict to show it.' },
-      { name: 'onToggleBilling / onCreditRateChange', type: '(enabled) / (creditsPerCent) => Promise<void>', behavior: 'Flip enable_billing and set credits_per_cent; reject with the gate’s error to show it.' },
-      { name: 'onGrantCredits', type: '(request: GrantCreditsRequest) => Promise<void>', behavior: 'Grants credits to one customer with a type, optional expiry, and a ledger reason.' },
-      { name: 'onSaveCode / onCreateCodes', type: '(draft, existing?) => Promise<CreditCode | void> / (drafts) => Promise<void>', behavior: 'Create or edit one gift code, or a bulk batch of single-use codes. Without them the code actions are hidden.' },
-      { name: 'onHoldDatabase / onReleaseDatabase', type: '(database, note?) => Promise<void>', behavior: 'Platform scope: place an admin hold or lift a suspension.' },
-      { name: 'onAction', type: '(action: BillingConsoleAction) => void', behavior: 'Plan, price, meter, pack, and code toggles; new plan, price, and pack; override removal; scheduled-change cancellation; workspace menu.' },
-    ],
-    buildingBlocks: [
-      { name: 'EntitlementMatrix / PlanPriceTable', type: 'catalog', behavior: 'Plans × entitlements with in-place editing, and plans with their immutable prices and provider mirror.' },
-      { name: 'MeterCatalogTable / CreditPackTable', type: 'catalog', behavior: 'Meters grouped by pool, and packs checked against the credit rate.' },
-      { name: 'CreditCodeTable / CreditCodeDialog / BulkCodeDialog / CreditCodeSheet / CodeItemsEditor', type: 'gift codes', behavior: 'List, create, bulk-create, pause, and inspect gift codes and their redemptions.' },
-      { name: 'CustomerTable / CustomerDetailSheet / GrantCreditsForm', type: 'customers', behavior: 'Subscribers, one customer in depth, and credit grants.' },
-      { name: 'ProviderConnectDialog / ProviderCredentialForm / ProviderCard / ProviderMark', type: 'provider', behavior: 'Pick or switch providers and store write-only credentials, driven by BillingProviderDescriptor.' },
-      { name: 'ReadinessChecklist / SyncBadge / ExternalRef', type: 'provider', behavior: 'Doctor checks with provider copy, catalog sync state, and provider ids with copy and deep links.' },
-      { name: 'StandingTable', type: 'platform', behavior: 'Billing suspensions and admin holds with hold and release.' },
-    ],
-  },
-];
-
-const APPLICATION_BLOCK_BY_NAME = new Map(
-  APPLICATION_BLOCKS.map((block) => [block.name, block] as const),
-);
-
-export function getApplicationBlock(name: string): ApplicationBlockDoc | undefined {
-  return APPLICATION_BLOCK_BY_NAME.get(name as ApplicationBlockDoc['name']);
-}
-
-/** The docs route for an application block. */
-export function applicationBlockHref(block: Pick<ApplicationBlockDoc, 'name' | 'href'>) {
-  return block.href ?? `/blocks/${block.name}`;
-}
-
-const APPLICATION_BLOCK_BY_HREF = new Map(
-  APPLICATION_BLOCKS.map((block) => [applicationBlockHref(block), block] as const),
-);
-
-/** The application block documented at a (normalised) path, if any. */
-export function getApplicationBlockByPath(path: string): ApplicationBlockDoc | undefined {
-  return APPLICATION_BLOCK_BY_HREF.get(path);
-}
diff --git a/apps/blocks/src/lib/application-blocks/agents-builder.ts b/apps/blocks/src/lib/application-blocks/agents-builder.ts
new file mode 100644
index 0000000..3adfe84
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/agents-builder.ts
@@ -0,0 +1,122 @@
+import type { ApplicationBlockDoc } from './types';
+
+export const agentsBuilderBlock: ApplicationBlockDoc = {
+  name: 'agents-builder',
+  title: 'Agents Builder',
+  description:
+    'A complete agent workspace template: chat with inline questions and tool traces, an integrations directory with a two-step connect flow, a skills library, and an agent detail view with a live run panel and pannable canvas.',
+  previewDescription:
+    'Start a recommended chat, answer the agent’s questions, connect a source, triage agent-drafted replies in the Inbox, pause or run schedules, then open Revenue Analyst to watch a run reason, query the warehouse, fan out across sub-agents and skills, and wait for your approval.',
+  previewHeight: 820,
+  whenToUse: [
+    'Use Agents Builder as the starting shell for a product where people chat with agents, connect the apps those agents read from, and inspect what each agent runs.',
+    'Install the AI kit primitives on their own when you only need a chat surface or a single agent card inside an existing layout.',
+  ],
+  usage: {
+    description:
+      'Pass workspace data and handle side effects through callbacks. The template owns navigation between its views, the connect dialog, and scripted playback; the host owns routing, OAuth, persistence, and model calls.',
+    example: `'use client';
+
+import { useRouter } from 'next/navigation';
+
+import {
+  AgentsBuilder,
+  type AgentsBuilderAction,
+  type AgentsBuilderData,
+  type Integration
+} from '@/components/ui/agents-builder';
+
+type AgentWorkspaceProps = Readonly<{
+  data: AgentsBuilderData;
+  startOAuth: (integration: Integration) => Promise<void>;
+  saveConnection: (
+    integrationId: string,
+    toolIds: string[]
+  ) => Promise<void>;
+}>;
+
+export function AgentWorkspace({
+  data,
+  startOAuth,
+  saveConnection
+}: AgentWorkspaceProps) {
+  const router = useRouter();
+
+  const handleAction = (action: AgentsBuilderAction) => {
+    if (action.type === 'navigate') router.push(\`/\${action.target}\`);
+    if (action.type === 'open-agent') router.push(\`/agents/\${action.agentId}\`);
+  };
+
+  return (
+    <div className="h-dvh">
+      <AgentsBuilder
+        data={data}
+        onAuthorizeIntegration={startOAuth}
+        onConnectIntegration={(integration, toolIds) =>
+          saveConnection(integration.id, toolIds)
+        }
+        onAction={handleAction}
+      />
+    </div>
+  );
+}`,
+  },
+  state: {
+    title: 'Views, connections, and playback',
+    description:
+      'The active view is uncontrolled by default; pass view and onViewChange to sync it with a router. Connections start from each integration’s connected flag and update only after onConnectIntegration resolves. Chat replies and the agent run play from scripted beats, so map live model and run events onto the same shapes when you connect a runtime.',
+  },
+  composition: [
+    'Built from the AI kit: PromptInput, ChatContainer, ToolTrace, ThinkingStatus, AskCard, ConnectPrompt, AgentDraftCard, and UsageNotice, so each surface can be reused outside the template.',
+    'Each view (ChatView, IntegrationsView, SkillsView, AgentView) and the ConnectIntegrationDialog is exported for hosts that want their own shell or router.',
+    'Integration marks fall back to tinted monograms; pass real brand marks through each integration’s mark field.',
+  ],
+  accessibility: [
+    'Every icon-only control has a label and a tooltip; the collapsed sidebar keeps labels available through tooltips and aria-label.',
+    'The agent canvas is a focusable region: arrow keys pan, plus and minus zoom, and zero resets to 100%.',
+    'Clarifying questions use radio semantics with lettered options and a labeled free-text row, and streamed status lines are announced politely.',
+    'Scripted playback shortens to near-instant steps when reduced motion is requested.',
+  ],
+  api: [
+    {
+      name: 'data',
+      type: 'AgentsBuilderData',
+      behavior:
+        'Workspace name, models, integrations and categories, agents, skills, starter packs, chat recommendations and replies, the agent blueprint, and its run script. AGENTS_BUILDER_DEMO is a complete example.',
+    },
+    {
+      name: 'view / defaultView / onViewChange',
+      type: "'chat' | 'integrations' | 'skills' | 'agent'",
+      behavior: 'Controls or seeds the active view.',
+    },
+    {
+      name: 'onAuthorizeIntegration',
+      type: '(integration) => Promise<void>',
+      behavior:
+        'Runs the provider consent handoff. Resolve to advance to tool selection; reject to return to sign-in.',
+    },
+    {
+      name: 'onConnectIntegration',
+      type: '(integration, toolIds) => void | Promise<void>',
+      behavior:
+        'Persists a connection with the tools left enabled. Rejecting keeps the dialog open on the tools step.',
+    },
+    {
+      name: 'onAction',
+      type: '(action: AgentsBuilderAction) => void',
+      behavior:
+        'Receives every host-owned control: navigation, search, sharing, skill and agent links, workspace menu items, stop, and follow-ups.',
+    },
+    {
+      name: 'theme / onThemeChange',
+      type: "'light' | 'dark' | 'system'",
+      behavior: 'Drives the appearance switch in the workspace menu.',
+    },
+    {
+      name: 'defaultSidebarCollapsed / autoplayRun',
+      type: 'boolean',
+      behavior:
+        'Starts with the icon rail, and chooses whether the agent run replays or opens settled.',
+    },
+  ],
+};
diff --git a/apps/blocks/src/lib/application-blocks/billing-account.ts b/apps/blocks/src/lib/application-blocks/billing-account.ts
new file mode 100644
index 0000000..5e201ea
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/billing-account.ts
@@ -0,0 +1,117 @@
+import type { ApplicationBlockDoc } from './types';
+
+export const billingAccountBlock: ApplicationBlockDoc = {
+  name: 'billing-account',
+  href: '/blocks/billing/account',
+  section: 'billing',
+  title: 'Billing Account',
+  description:
+    'The customer side of Constructive billing: an account switcher and six views over one account’s plan, usage by credit pool, credits, invoices, and ledger. Works for Constructive’s own platform billing and for any tenant app billing its customers.',
+  previewDescription:
+    'Switch scenarios (overdue, suspended, checkout pending, scheduled downgrade, free, read-only member, tenant app), open a meter to see its daily usage and waterfall, preview a downgrade with its conflicts, buy a pack, redeem a gift code (try HACKWEEK-2026 or TEAM-SEATS), and filter the ledger.',
+  previewHeight: 820,
+  whenToUse: [
+    'Use Billing Account as the billing destination for a signed-in person or organization: what plan they are on, what they have used, what is left, and what they paid.',
+    'Use the Billing Console template for the operator side (catalog, customers, provider, standing), and billing-kit leaves when one card or table belongs inside an existing page.',
+  ],
+  usage: {
+    description:
+      'Map the account’s billing rows into BillingAccountData and hand purchases to your provider through callbacks. The template owns navigation, previews, and optimistic local state; the host owns checkout, the customer portal, and persistence.',
+    example: `'use client';
+
+import { useRouter } from 'next/navigation';
+
+import {
+  BillingAccount,
+  type BillingAccountAction,
+  type BillingAccountData,
+  type PlanChangeRequest,
+  type RedeemResult
+} from '@/components/ui/billing-account';
+
+type AccountBillingProps = Readonly<{
+  data: BillingAccountData;
+  now: string;
+  changePlan: (request: PlanChangeRequest) => Promise<{ checkoutUrl?: string }>;
+  checkoutPack: (slug: string) => Promise<string>;
+  redeem: (code: string) => Promise<RedeemResult>;
+  openPortal: () => Promise<string>;
+  /** From the \`?code=\` of a promo link, if any. */
+  promoCode?: string;
+}>;
+
+export function AccountBilling({ data, now, changePlan, checkoutPack, redeem, openPortal, promoCode }: AccountBillingProps) {
+  const router = useRouter();
+
+  const handleAction = async (action: BillingAccountAction) => {
+    if (action.type === 'open-portal') window.location.assign(await openPortal());
+    if (action.type === 'switch-account') router.push(\`/billing/\${action.accountId}\`);
+  };
+
+  return (
+    <div className="h-dvh">
+      <BillingAccount
+        data={data}
+        now={now}
+        onChangePlan={async (request) => {
+          const { checkoutUrl } = await changePlan(request);
+          if (checkoutUrl) window.location.assign(checkoutUrl);
+        }}
+        onBuyCredits={async (pack) => window.location.assign(await checkoutPack(pack.slug))}
+        onRedeemCode={redeem}
+        initialRedeemCode={promoCode}
+        onAction={handleAction}
+      />
+    </div>
+  );
+}`,
+  },
+  state: {
+    title: 'Views, previews, and optimistic state',
+    description:
+      'The view is uncontrolled by default; pass view and onViewChange to sync it with a router, and views to hide the ones your data cannot back. After a callback resolves the template shows the result locally (a scheduled change, a pending checkout, a new plan); passing new data resets it to the host’s truth.',
+  },
+  composition: [
+    'Built on workspace-kit (the same shell as Agents Builder: sidebar rail, drawer, view frames, filter pills) and billing-kit, so every card, table, and dialog is reusable on its own.',
+    'Overview: BillingStatusBanner (admin hold → suspension → grace → checkout pending → review → scheduled change), CurrentPlanCard, CreditWallet, PoolGrid, LimitList, LedgerTimeline, and FeatureCapList.',
+    'Usage: headline StatTiles with a projection to period end, UsageTree (universal → category pools → meters, each with plan marker and credit cost), MeterDetailSheet with daily Sparkline and request windows, LimitList, UsageAlertList, and FeatureCapList.',
+    'Plans: IntervalSwitch and PlanComparison, which hides plans with no active price except the account’s current one; choosing a plan opens PlanChangeDialog, which refuses a plan without an active price, which diffs entitlements, flags limits already exceeded, and offers “now” or “at period end” when the provider can schedule changes.',
+    'Gift codes: RedeemCodeDialog opens from the overview, the credits view, the account menu, or a ?code= link (initialRedeemCode). The host answers with the redemption or a typed refusal (not found, paused, expired, used up, already redeemed, not eligible); the dialog lists every grant, and the credits, balances, limits, and ledger update right away.',
+    'Credits: CreditWallet, RedeemCodeField, CreditPackGrid, CreditGrantList in draw-down order, and RedemptionList of codes this account redeemed. Invoices: payment method panel (PaymentMethodRow from the host’s paymentMethod summary, plus the provider portal), InvoiceTable with expandable lines, AdjustmentList. Activity: LedgerTimeline filtered by class.',
+    'Provider-neutral: the active BillingProviderDescriptor decides which actions appear (hosted checkout, customer portal, scheduled changes) and how the provider is named, including merchant-of-record copy. Customers see the provider by name only; object ids and dashboard links stay in the console. Stripe ships as STRIPE_PROVIDER; hosts register others the same way.',
+  ],
+  accessibility: [
+    'Status never relies on colour: every badge carries a label, meters expose values through the meter role, and warnings in the sidebar have screen-reader text.',
+    'The plan-change preview is a labelled dialog with radio choices for timing and inline error text when the host refuses the change.',
+    'The collapsed sidebar keeps labels through tooltips and aria-label; below the sidebar width navigation moves into a drawer.',
+    'Entrance motion and bar fills turn off under reduced motion; view swaps never animate the whole page.',
+  ],
+  api: [
+    { name: 'data', type: 'BillingAccountData', behavior: 'Accounts, plans and prices, comparison rows, meters and balances, the subscription, credit grants and packs, ledger, invoices, limits, caps, alerts, and (platform) database standing. BILLING_ACCOUNT_DEMO and billingAccountScenario() are complete examples.' },
+    { name: 'view / defaultView / onViewChange', type: "'overview' | 'usage' | 'plans' | 'credits' | 'invoices' | 'activity'", behavior: 'Controls or seeds the active view.' },
+    { name: 'views', type: 'BillingAccountView[]', behavior: 'Limits navigation to the views the host can back; defaults to all six.' },
+    { name: 'onChangePlan', type: '(request: PlanChangeRequest) => Promise<void>', behavior: 'Receives the plan, price, timing, and whether a hosted checkout is needed. Reject to keep the preview open with the message.' },
+    { name: 'onBuyCredits', type: '(pack) => Promise<void>', behavior: 'Starts a pack checkout.' },
+    { name: 'onRedeemCode', type: '(code: string) => Promise<RedeemResult>', behavior: 'Redeems a normalised gift code for this account. Resolve with { status: \'redeemed\', redemption } (what it granted, each grant\'s expiry resolved) or { status: \'refused\', reason, message? }. Without it, redeeming is hidden.' },
+    { name: 'initialRedeemCode', type: 'string', behavior: 'Opens the redeem dialog prefilled, e.g. from a promo link; a new value reopens it.' },
+    { name: 'onAlertsChange', type: '(alerts: UsageAlert[]) => void', behavior: 'Persists usage alert edits.' },
+    { name: 'onAction', type: '(action: BillingAccountAction) => void', behavior: 'Portal, invoice, pay, cancel scheduled change, contact sales or support, account switch, and account-menu items.' },
+    { name: 'locale / timeZone / now', type: 'string', behavior: 'Formatting; pass now from the server so relative dates render identically on both sides.' },
+    { name: 'theme / onThemeChange / defaultSidebarCollapsed', type: "'light' | 'dark' | 'system' / boolean", behavior: 'Drives the appearance switch in the account menu and the initial rail state.' },
+  ],
+  buildingBlocks: {
+    description:
+      'Each of these installs with billing-kit and works outside the template: pass data and callbacks, and wrap them in BillingFormatProvider for locale, time zone, and clock.',
+    components: [
+      { name: 'BillingStatusBanner / Notice / LifecycleBadge', type: 'status', behavior: 'The one notice an account needs now, and lifecycle labels for active, grace, suspended, checkout pending, ended, and review required.' },
+      { name: 'CurrentPlanCard / PriceTag / IntervalSwitch', type: 'plan', behavior: 'Plan, price, period progress, next invoice, and scheduled change.' },
+      { name: 'PlanComparison / PlanChangeDialog', type: 'plan', behavior: 'Side-by-side plans (plans without an active price are hidden) and the preview that diffs entitlements and picks timing.' },
+      { name: 'UsageTree / PoolGrid / MeterDetailSheet', type: 'usage', behavior: 'The credit waterfall, busiest pools, and one meter in depth.' },
+      { name: 'AllowanceBar / UsageFigure / Sparkline / PeriodTrack', type: 'primitives', behavior: 'Bars with soft thresholds and plan markers, figures, daily bars, and the billing period as a thin segmented bar, one segment per day.' },
+      { name: 'CreditWallet / CreditGrantList / CreditPackGrid', type: 'credits', behavior: 'Balance composition, grants in spend order, and packs.' },
+      { name: 'RedeemCodeDialog / RedeemCodeField / RedemptionList / CodeGrantList', type: 'gift codes', behavior: 'Redeem a code, see exactly what it added (e.g. +25,000 compute credits for 30 days), typed refusals, and redeemed-code history.' },
+      { name: 'LimitList / FeatureCapList / UsageAlertList', type: 'entitlements', behavior: 'Counted limits, plan features, and usage alerts.' },
+      { name: 'InvoiceTable / AdjustmentList / LedgerTimeline', type: 'history', behavior: 'Invoices with lines, refunds and disputes, and the ledger by day.' },
+    ],
+  },
+};
diff --git a/apps/blocks/src/lib/application-blocks/billing-console.ts b/apps/blocks/src/lib/application-blocks/billing-console.ts
new file mode 100644
index 0000000..a7ab39c
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/billing-console.ts
@@ -0,0 +1,100 @@
+import type { ApplicationBlockDoc } from './types';
+
+export const billingConsoleBlock: ApplicationBlockDoc = {
+  name: 'billing-console',
+  href: '/blocks/billing/console',
+  section: 'billing',
+  title: 'Billing Console',
+  description:
+    'The operator side of Constructive billing, for the platform or a tenant database: revenue and attention, the catalog (plans and prices, entitlements, meters, packs and codes), customers, the payment provider with readiness and the billing switch, and platform database standing.',
+  previewDescription:
+    'Switch between the platform console and a tenant setting up billing. Edit the entitlement matrix and save, open a customer and grant credits, run the readiness check, try the locked billing switch, change the credit rate, switch providers, create or bulk-create gift codes and see who redeemed them, and place or lift an admin hold.',
+  previewHeight: 820,
+  whenToUse: [
+    'Use Billing Console where operators manage what a billing module sells and to whom: Constructive’s platform team, or a developer running billing for their own app.',
+    'Use Billing Account for the customer side of the same module.',
+  ],
+  usage: {
+    description:
+      'Map the billing module’s catalog, customers, provider connection, readiness verdict, and settings into BillingConsoleData, and route every write to your API. Provider credentials are write-only: the console only learns whether each one is set.',
+    example: `'use client';
+
+import {
+  BillingConsole,
+  type BillingConsoleData
+} from '@/components/ui/billing-console';
+
+type OperatorBillingProps = Readonly<{
+  data: BillingConsoleData;
+  api: {
+    saveEntitlements: (changes: { planId: string; kind: string; key: string; value: number }[]) => Promise<void>;
+    storeProviderSecrets: (providerId: string, values: Record<string, string>) => Promise<void>;
+    enqueueReadinessCheck: () => Promise<void>;
+    setBillingEnabled: (enabled: boolean) => Promise<void>;
+    grantCredits: (customerId: string, meter: string, amount: number, reason: string) => Promise<void>;
+  };
+}>;
+
+export function OperatorBilling({ data, api }: OperatorBillingProps) {
+  return (
+    <div className="h-dvh">
+      <BillingConsole
+        data={data}
+        onSaveEntitlements={api.saveEntitlements}
+        onConnectProvider={api.storeProviderSecrets}
+        onRunReadinessCheck={api.enqueueReadinessCheck}
+        onToggleBilling={api.setBillingEnabled}
+        onGrantCredits={(request) =>
+          api.grantCredits(request.customerId, request.meterSlug, request.amount, request.reason)
+        }
+      />
+    </div>
+  );
+}`,
+  },
+  state: {
+    title: 'Drafts, gates, and optimistic state',
+    description:
+      'Entitlement edits stay a local draft with a save bar until onSaveEntitlements resolves. The billing switch refuses to turn on without a passing readiness verdict under 24 hours old, mirroring the database gate; turning it off is always allowed. Toggles, grants, holds, and provider connections show locally after the host resolves and reset with new data.',
+  },
+  composition: [
+    'Same shell as Billing Account and Agents Builder (workspace-kit), with a workspace menu that marks the scope as Platform or Tenant and a footer showing whether billing is live.',
+    'Overview: StatTiles for recurring revenue, customers, and revenue at risk; a “Needs attention” list (readiness, overdue customers, reviews, catalog sync, usage-sync failures, suspended databases); revenue bars; customers by plan.',
+    'Catalog: PlanPriceTable (immutable prices, sync state, provider ids), EntitlementMatrix (plans × limits, meter allowances, caps, editable with ∞), MeterCatalogTable grouped by pool, and CreditPackTable (flags packs priced below the credit rate).',
+    'Gift codes: CreditCodeTable with live, paused, expired, and used-up codes; CreditCodeDialog to create or edit one (generated or typed code, grants on meters such as the compute pool or on limits such as seats, redemption cap, expiry, pause); BulkCodeDialog for single-use batches with copy and CSV download; CreditCodeSheet with every redemption.',
+    'Customers: filters and search over CustomerTable; CustomerDetailSheet with balances, credits and GrantCreditsForm, overrides, request windows, the provider operations log, and invoices.',
+    'Provider: the active provider card with write-only credential state, ReadinessChecklist with “Check now”, the gated billing switch, the credit rate, usage sync, and ProviderConnectDialog for connecting or switching (one active provider at a time).',
+    'Standing (platform only): StandingTable with billing suspensions and admin holds, a reasoned hold dialog, and release.',
+  ],
+  accessibility: [
+    'Tables use real table semantics with scoped headers; switches have descriptive labels such as “Retire the monthly Pro price”.',
+    'Matrix cells are labelled inputs (“Databases for Team”) that commit on blur or Enter and cancel on Escape; the unlimited toggle is a pressed-state button.',
+    'The readiness checklist announces its running state, and every check keeps its text status.',
+    'Credential inputs never echo stored values; errors are tied to fields with aria-describedby.',
+  ],
+  api: [
+    { name: 'data', type: 'BillingConsoleData', behavior: 'Scope, workspace, providers and the active connection, readiness verdict, settings, usage sync, plans, entitlement groups, meters, packs, codes, customers, standing, and a revenue trend. BILLING_CONSOLE_DEMO and BILLING_CONSOLE_TENANT_DEMO are complete examples.' },
+    { name: 'view / defaultView / onViewChange / views', type: "'overview' | 'catalog' | 'customers' | 'provider' | 'standing'", behavior: 'Controls or seeds the active view and limits navigation; standing only appears at platform scope.' },
+    { name: 'onSaveEntitlements', type: '(changes: EntitlementChange[]) => Promise<void>', behavior: 'Persists the matrix draft; reject to keep it unsaved with the message.' },
+    { name: 'onConnectProvider', type: '(providerId, values) => Promise<void>', behavior: 'Stores credentials and makes the provider active.' },
+    { name: 'onRunReadinessCheck', type: '() => Promise<BillingHealth | void>', behavior: 'Enqueues the readiness job; resolve with the new verdict to show it.' },
+    { name: 'onToggleBilling / onCreditRateChange', type: '(enabled) / (creditsPerCent) => Promise<void>', behavior: 'Flip enable_billing and set credits_per_cent; reject with the gate’s error to show it.' },
+    { name: 'onGrantCredits', type: '(request: GrantCreditsRequest) => Promise<void>', behavior: 'Grants credits to one customer with a type, optional expiry, and a ledger reason.' },
+    { name: 'onSaveCode / onCreateCodes', type: '(draft, existing?) => Promise<CreditCode | void> / (drafts) => Promise<void>', behavior: 'Create or edit one gift code, or a bulk batch of single-use codes. Without them the code actions are hidden.' },
+    { name: 'onHoldDatabase / onReleaseDatabase', type: '(database, note?) => Promise<void>', behavior: 'Platform scope: place an admin hold or lift a suspension.' },
+    { name: 'onAction', type: '(action: BillingConsoleAction) => void', behavior: 'Plan, price, meter, pack, and code toggles; new plan, price, and pack; override removal; scheduled-change cancellation; workspace menu.' },
+  ],
+  buildingBlocks: {
+    description:
+      'Each of these installs with billing-kit and works outside the template: pass data and callbacks, and wrap them in BillingFormatProvider for locale, time zone, and clock.',
+    components: [
+      { name: 'EntitlementMatrix / PlanPriceTable', type: 'catalog', behavior: 'Plans × entitlements with in-place editing, and plans with their immutable prices and provider mirror.' },
+      { name: 'MeterCatalogTable / CreditPackTable', type: 'catalog', behavior: 'Meters grouped by pool, and packs checked against the credit rate.' },
+      { name: 'CreditCodeTable / CreditCodeDialog / BulkCodeDialog / CreditCodeSheet / CodeItemsEditor', type: 'gift codes', behavior: 'List, create, bulk-create, pause, and inspect gift codes and their redemptions.' },
+      { name: 'CustomerTable / CustomerDetailSheet / GrantCreditsForm', type: 'customers', behavior: 'Subscribers, one customer in depth, and credit grants.' },
+      { name: 'ProviderConnectDialog / ProviderCredentialForm / ProviderCard / ProviderMark', type: 'provider', behavior: 'Pick or switch providers and store write-only credentials, driven by BillingProviderDescriptor.' },
+      { name: 'ReadinessChecklist / SyncBadge / ExternalRef', type: 'provider', behavior: 'Doctor checks with provider copy, catalog sync state, and provider ids with copy and deep links.' },
+      { name: 'StandingTable', type: 'platform', behavior: 'Billing suspensions and admin holds with hold and release.' },
+    ],
+  },
+};
diff --git a/apps/blocks/src/lib/application-blocks/coding-agent.ts b/apps/blocks/src/lib/application-blocks/coding-agent.ts
new file mode 100644
index 0000000..635dbf7
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/coding-agent.ts
@@ -0,0 +1,252 @@
+import type { ApplicationBlockDoc } from './types';
+
+/** The coding agent preview's examples, shared with the preview route so a renamed one can't silently fall back. */
+export type CodingAgentExample = 'tabs' | 'sidebar' | 'sub-agents';
+
+export const codingAgentBlock: ApplicationBlockDoc = {
+  name: 'coding-agent',
+  title: 'Coding Agent',
+  description:
+    'A coding agent workspace template: sessions in a tab strip or a project sidebar, each with a chat transcript, a resizable side panel for reviewing diffs by worktree with each branch’s pull request and failing or pending checks, reading files, previewing the app, and following the session’s other agents and shared tasks, and a terminal dock. Sub-agents, orchestrator/worker runs, and messages between agents show in the transcript, and a session flags when any of its agents needs an answer.',
+  previewDescription:
+    'Pick an example above the preview. In the tabs layout, watch the first session run, approve its test command, comment on a line of the diff, or answer the question waiting in another tab; the sub-agents example opens a lead agent running three workers in parallel.',
+  previewHeight: 820,
+  examples: ([
+    {
+      value: 'tabs',
+      label: 'Tabs layout',
+      description:
+        'Sessions as a tab strip across the top, each tab carrying its live status, with the chat, the review panel, and the file tree side by side under it.',
+    },
+    {
+      value: 'sidebar',
+      label: 'Sidebar layout',
+      description:
+        'The same sessions grouped by project in a collapsible sidebar, for products that keep many sessions around rather than a few open at once.',
+    },
+    {
+      value: 'sub-agents',
+      label: 'Sub-agents',
+      description:
+        'A lead agent splits a security pass across three workers in their own worktrees: their cards in the transcript, a worker asking for approval, messages between them, and the Agents and Tasks tabs.',
+    },
+  ] satisfies readonly { value: CodingAgentExample; label: string; description: string }[]),
+  whenToUse: [
+    'Use Coding Agent as the starting shell for a product where people run several coding sessions at once, review what each one changed, and approve the commands it wants to run.',
+    'Use Agents Builder for agents that work across connected apps instead of a code checkout, or install the AI kit primitives on their own when you only need a chat surface.',
+  ],
+  usage: {
+    description:
+      'Pass projects, sessions, models, and commands as one data object and handle side effects through onAction. The template owns tabs, panels, the terminal dock, and scripted playback; the host owns the agent runtime, the checkout, shell commands, and persistence.',
+    example: `'use client';
+
+import type { ReactNode } from 'react';
+
+import {
+  CodingAgent,
+  type CodingAgentAction,
+  type CodingAgentData
+} from '@/components/ui/coding-agent';
+
+type AgentWorkspaceProps = Readonly<{
+  data: CodingAgentData;
+  runtime: {
+    send: (sessionId: string, text: string, attachments: string[]) => void;
+    stop: (sessionId: string) => void;
+    decide: (sessionId: string, command: string, allow: boolean) => void;
+  };
+  renderPreview: (url: string) => ReactNode | null;
+}>;
+
+export function AgentWorkspace({
+  data,
+  runtime,
+  renderPreview
+}: AgentWorkspaceProps) {
+  const handleAction = (action: CodingAgentAction) => {
+    if (action.type === 'send') {
+      runtime.send(action.sessionId, action.text, action.attachments);
+    }
+    if (action.type === 'stop') runtime.stop(action.sessionId);
+    if (action.type === 'permission') {
+      runtime.decide(
+        action.sessionId,
+        action.command,
+        action.decision !== 'deny'
+      );
+    }
+  };
+
+  return (
+    <div className="h-dvh">
+      <CodingAgent
+        data={data}
+        renderBrowserPage={renderPreview}
+        onAction={handleAction}
+      />
+    </div>
+  );
+}`,
+  },
+  guides: [
+    {
+      id: 'harness',
+      title: 'Driving sessions from your harness',
+      description:
+        'Scripts are for demos. A real session takes the events your harness reports, either as an events array or a store you push into as they stream. The session’s own agent is the run "root"; every other agent is a run with a parent, and its status, messages, tasks, and approval requests are events too, so one-agent loops, sub-agents, and orchestrator/worker teams all draw from the same log.',
+      example: `'use client';
+
+import { useEffect, useMemo } from 'react';
+
+import {
+  CodingAgent,
+  createHarnessStore,
+  type CodingAgentAction,
+  type CodingAgentData,
+  type HarnessEvent
+} from '@/components/ui/coding-agent';
+
+type HarnessClient = {
+  /** Calls back with each event your harness reports for a session; returns an unsubscribe. */
+  subscribe: (sessionId: string, onEvent: (event: HarnessEvent) => void) => () => void;
+  /** Stop, pause, resume, steer, retry, approve, answer, send. */
+  control: (action: CodingAgentAction) => void;
+};
+
+type HostedWorkspaceProps = Readonly<{
+  data: CodingAgentData;
+  harness: HarnessClient;
+}>;
+
+export function HostedWorkspace({ data, harness }: HostedWorkspaceProps) {
+  // One store per session. The template re-renders a session as its events arrive.
+  const stores = useMemo(
+    () => new Map(data.sessions.map((session) => [session.id, createHarnessStore()])),
+    [data.sessions]
+  );
+
+  useEffect(() => {
+    const unsubscribes = [...stores].map(([sessionId, store]) =>
+      harness.subscribe(sessionId, (event) => store.push(event))
+    );
+    return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+  }, [harness, stores]);
+
+  return (
+    <div className="h-dvh">
+      <CodingAgent
+        data={{
+          ...data,
+          sessions: data.sessions.map((session) => ({
+            ...session,
+            store: stores.get(session.id)
+          }))
+        }}
+        // In host mode controls change nothing locally: your harness acts,
+        // then reports what happened as events.
+        onAction={harness.control}
+      />
+    </div>
+  );
+}
+
+// A lead agent starting a worker in its own worktree, which then asks to run a command.
+// The session's own agent is always the run "root".
+export const exampleEvents: HarnessEvent[] = [
+  { id: 'e1', runId: 'root', kind: 'beat', beat: { kind: 'user', text: 'Check every form posts a CSRF token' } },
+  {
+    id: 'e2',
+    runId: 'csrf',
+    kind: 'run.spawned',
+    run: {
+      id: 'csrf',
+      name: 'CSRF',
+      role: 'worker',
+      parentRunId: 'root',
+      task: 'Audit the forms under src/app',
+      workspace: { kind: 'worktree', branch: 'audit/csrf' }
+    }
+  },
+  { id: 'e3', runId: 'csrf', kind: 'run.status', status: 'running' },
+  {
+    id: 'e4',
+    runId: 'csrf',
+    kind: 'request',
+    request: { id: 'r1', type: 'approval', title: 'Run the form tests', command: 'pnpm test forms' }
+  },
+  { id: 'e5', runId: 'csrf', kind: 'run.status', status: 'waiting', waitingOn: { kind: 'human', requestId: 'r1' } },
+  { id: 'e6', runId: 'csrf', kind: 'message', from: 'csrf', to: ['root'], text: 'Two forms skip the token.', protocol: 'result' }
+];`,
+    },
+  ],
+  state: {
+    title: 'Sessions, panels, and playback',
+    description:
+      'The layout is uncontrolled by default; pass layout and onLayoutChange to persist it. Open tabs, the active session, recently closed sessions, and each session’s side panel and terminal are local state seeded by defaultActiveSessionId, defaultPanelOpen, and defaultTerminalOpen. Every open session stays mounted, so a run in a background tab keeps playing and marks its tab when it needs an answer, fails, or finishes. A session plays a scripted run, or shows a real harness: pass its events as an \`events\` array, or give it a store from \`createHarnessStore()\` and push events as they arrive. Runs (the session’s own agent and any it starts), their status and usage, messages between agents, handoffs, phases, shared tasks, and approval requests are all events, folded by \`reduceHarness\`; controls such as stop, pause, steer and approve reach the host through onAction. Worktrees are events too: agents with their own worktree register it as they start, \`worktree\`, \`pr\` and \`check\` events report how far each branch is from its base, its pull request and its CI, and changes are kept per worktree, so one agent can work in several and two can change the same file in different branches.',
+  },
+  composition: [
+    'Built on the workspace kit shell, so the sidebar layout collapses to the same icon rail and drawer as the other workspace templates.',
+    'The transcript and composer come from the AI kit: Message, Reasoning, ToolGroup, InlineDiff, PlanTracker, AskCard, and ApprovalCard in the timeline, and PromptInput with attachments, a follow-up queue, ModelSelector, ContextRing, and UsageNotice around it.',
+    'Diffs and file views render with @pierre/diffs and the file tree with @pierre/trees; both follow the nearest dark-mode class so code surfaces match the host theme.',
+    'Session status rings, the new-session mascot, and the playback clock are shared with Agents Builder, so installing Coding Agent also installs that template.',
+    'The browser tab draws each URL through renderBrowserPage. Return null to show a can’t-preview state; without a renderer it shows a bundled preview of the demo app.',
+  ],
+  accessibility: [
+    'Each session tab’s accessible name includes its live status, such as Working, Waiting for your answer, or New result, and every icon-only control has a label and a tooltip that names its shortcut.',
+    'Shortcuts avoid the ones browsers reserve: ⌘K opens the command menu, ⌥⌘N and ⌥⌘W open and close sessions, ⌘P opens a file, ⌘\\ and ⌃` toggle the side panel and terminal, and ⌃1 to ⌃9 jump to a tab. ⌘ is Ctrl outside Apple platforms.',
+    'The chat column, side panel, and terminal dock are labeled regions; terminal output is a polite live log, and the terminal input and composer have their own labels.',
+    'Line comments on a diff submit with ⌘ or Ctrl+Enter and cancel with Escape, and scripted playback shortens to near-instant steps when reduced motion is requested.',
+  ],
+  api: [
+    {
+      name: 'data',
+      type: 'CodingAgentData',
+      behavior:
+        'Product name, projects with their files, sessions and their scripts, the sessions open on first render, models and the default selection, slash commands, the context window, usage, and the scripts played for follow-ups and new sessions. CODING_AGENT_DEMO is a complete example.',
+    },
+    {
+      name: 'layout / defaultLayout / onLayoutChange',
+      type: "'tabs' | 'sidebar'",
+      behavior:
+        'Shows sessions as a tab strip across the top or grouped by project in a sidebar. Switching keeps every session mounted.',
+    },
+    {
+      name: 'defaultActiveSessionId',
+      type: 'string',
+      behavior: 'The session in front on first render; defaults to the first open one.',
+    },
+    {
+      name: 'defaultPanelOpen / defaultTerminalOpen',
+      type: 'boolean',
+      behavior: 'Whether sessions open with the side panel (default true) and the terminal dock (default false) showing.',
+    },
+    {
+      name: 'renderBrowserPage',
+      type: '(url: string) => ReactNode | null',
+      behavior: 'Draws the page for a URL in a browser tab. Return null to show the can’t-preview state.',
+    },
+    {
+      name: 'onAction',
+      type: '(action: CodingAgentAction) => void',
+      behavior:
+        'Receives every host-owned effect: new, closed, renamed, deleted, and exported sessions, sent messages, stop, permission decisions, answers, opened files and URLs, line comments, terminal commands, opening or creating a pull request, re-running failed checks, and layout changes.',
+    },
+    {
+      name: 'framed / className',
+      type: 'boolean / string',
+      behavior: 'Sits the workspace in a rounded frame for hosts that show it as an app window, and adds layout classes to the outer shell.',
+    },
+  ],
+  buildingBlocks: {
+    description:
+      'Each of these comes from the AI kit and installs with the template. They work outside it too: pass them data and callbacks in your own chat or agent surface.',
+    components: [
+      { name: 'PromptInput / PromptInputTray / PromptInputAttachments', type: 'composer', behavior: 'The message box with file and comment chips and the queue of follow-ups typed while the agent works.' },
+      { name: 'ModelSelector / ContextRing / UsageNotice', type: 'composer', behavior: 'The model and effort picker, the share of the context window used, and the plan usage warning above the composer.' },
+      { name: 'Message / Reasoning / ToolGroup / InlineDiff', type: 'transcript', behavior: 'Replies, collapsible reasoning, batches of read-only tool calls, and edits shown as inline diffs.' },
+      { name: 'PlanTracker / AskCard / ApprovalCard', type: 'gates', behavior: 'The agent’s plan, questions that hold the run until answered, and command approvals with allow once, always allow, and deny.' },
+      { name: 'Tool / TaskList / TaskRow', type: 'agents', behavior: 'Each sub-agent as a card with its task, live state, last step, and usage, and the shared task board with owners and what each task waits on.' },
+      { name: 'ThinkingStatus / SystemMessage / FeedbackBar', type: 'status', behavior: 'The live line naming the next step, a failed run with its retry, and copy controls under the last reply.' },
+    ],
+  },
+};
diff --git a/apps/blocks/src/lib/application-blocks/data-rooms.ts b/apps/blocks/src/lib/application-blocks/data-rooms.ts
new file mode 100644
index 0000000..56432c3
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/data-rooms.ts
@@ -0,0 +1,117 @@
+import type { ApplicationBlockDoc } from './types';
+
+export const dataRoomsBlock: ApplicationBlockDoc = {
+  name: 'data-rooms',
+  title: 'Data Rooms',
+  description:
+    'Secure document rooms for an organization and its sub-organizations: access that carries down the hierarchy, folder shares that expire, agreements before entry, view-only and watermarked documents, Q&A, reading insights, and a room assistant that only cites what the reader can open.',
+  previewDescription:
+    'Open Project Atlas, ask why someone can see a folder, preview the room as a bidder or a share-only advisor, share a folder until a date, accept the agreement as a guest, answer a question from a drafted reply, and follow who read what in Insights.',
+  previewHeight: 820,
+  whenToUse: [
+    'Use Data Rooms when documents must be shared with people inside and outside an organization under rules people can see and explain: deal rooms, board packs, fundraising, audits, client portals.',
+    'Use the Storage Browser block for plain file management without rooms, roles, agreements, or guests.',
+  ],
+  usage: {
+    description:
+      'Pass the workspace as one data object and handle every change through onCommand. The template owns navigation, dialogs, previews, and optimistic updates; the host owns storage, delivery, authorization, and the activity log.',
+    example: `'use client';
+
+import { useRouter } from 'next/navigation';
+
+import {
+  DataRooms,
+  type DataRoomsAction,
+  type DataRoomsCommand,
+  type DataRoomsData
+} from '@/components/ui/data-rooms';
+
+type DealRoomsProps = Readonly<{
+  data: DataRoomsData;
+  save: (command: DataRoomsCommand) => Promise<void>;
+  download: (documentId: string) => void;
+}>;
+
+export function DealRooms({ data, save, download }: DealRoomsProps) {
+  const router = useRouter();
+
+  const handleAction = (action: DataRoomsAction) => {
+    if (action.type === 'download') download(action.documentId);
+    if (action.type === 'org-menu' && action.item === 'log-out') router.push('/logout');
+  };
+
+  return (
+    <div className="h-dvh">
+      <DataRooms
+        data={data}
+        onCommand={async (command) => {
+          await save(command);
+          router.refresh();
+        }}
+        onAction={handleAction}
+      />
+    </div>
+  );
+}`,
+  },
+  state: {
+    title: 'Access, previews, and changes',
+    description:
+      'Access is worked out from data by the exported effectiveAccess helper: owners and admins carry down through sub-units into rooms, members only when inheritance allows and the room is not restricted, folder shares cover their subtree until they expire, read-only members lose every write, and view-only documents lose downloads. It drives which controls appear, the “Why can they?” trace, and Preview as, and your server still decides every request. Commands apply locally after onCommand resolves, and new data from the host replaces them.',
+  },
+  composition: [
+    'Built on the workspace kit (shell, sidebar, panels, tables, canvas) and the AI kit (prompt input, chat container, suggestions), so it matches Agents Builder and Billing.',
+    'Every view, tab, sheet, and dialog is exported, along with effectiveAccess, describeGrant, applyDataRoomsCommand, and answerFromScript for hosts that build their own shell or run the same rules on the server.',
+    'Pass renderPreview to draw real pages in the viewer and onAskAssistant to answer from your own runtime; without them the template draws placeholder pages and answers from data.assistant.',
+  ],
+  accessibility: [
+    'Room sections are a tab list with arrow-key navigation, and every icon-only control has a label and a tooltip.',
+    'The access map is a focusable canvas: arrow keys pan, plus and minus zoom, and zero resets to 100%.',
+    'Permissions are written out as labelled chips, never conveyed by colour alone, and watermarks are announced as text.',
+    'Assistant answers appear instantly when reduced motion is requested.',
+  ],
+  api: [
+    {
+      name: 'data',
+      type: 'DataRoomsData',
+      behavior:
+        'The organization and its units, people, roles, memberships, inheritance rules, rooms with their protections and agreement, documents and folders, folder shares, invites, acceptances, activity, questions, and assistant script. DATA_ROOMS_DEMO is a complete example.',
+    },
+    {
+      name: 'onCommand',
+      type: '(command: DataRoomsCommand) => Promise<void> | void',
+      behavior:
+        'Every change: create and update rooms, invite, change roles, share and revoke folders, upload, move, accept the agreement, ask and answer questions, edit roles and inheritance. Reject with an Error to keep the dialog open with its message.',
+    },
+    {
+      name: 'onAction',
+      type: '(action: DataRoomsAction) => void',
+      behavior: 'Downloads, document views for your access log, activity export, search, contact, and organization menu items.',
+    },
+    {
+      name: 'view / roomId / tab',
+      type: "'home' | 'access-map' | 'activity' | 'room'",
+      behavior: 'Each has a default and an onChange, so a router can control where the workspace is.',
+    },
+    {
+      name: 'previewAs / defaultPreviewAs',
+      type: 'string | null',
+      behavior: 'Shows the workspace as another person sees it. Changes are disabled while previewing.',
+    },
+    {
+      name: 'onAskAssistant',
+      type: '(request) => Promise<AssistantAnswer>',
+      behavior: 'Answers the room assistant from your runtime. Return only citations the asker may open.',
+    },
+    {
+      name: 'renderPreview',
+      type: '(document, context) => ReactNode',
+      behavior: 'Draws document pages in the viewer, given the reader and whether to watermark and block downloads.',
+    },
+    {
+      name: 'views / locale / timeZone',
+      type: 'DataRoomsView[] / string',
+      behavior: 'Limits the views to what your data can back, and sets date and number formatting (en-US in UTC by default).',
+    },
+  ],
+};
diff --git a/apps/blocks/src/lib/application-blocks/index.ts b/apps/blocks/src/lib/application-blocks/index.ts
new file mode 100644
index 0000000..069e252
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/index.ts
@@ -0,0 +1,43 @@
+import { agentsBuilderBlock } from './agents-builder';
+import { billingAccountBlock } from './billing-account';
+import { billingConsoleBlock } from './billing-console';
+import { codingAgentBlock } from './coding-agent';
+import { dataRoomsBlock } from './data-rooms';
+import { orgChartBlock } from './org-chart';
+import { storageBrowserBlock } from './storage-browser';
+import type { ApplicationBlockDoc } from './types';
+
+export type { ApplicationBlockApiRow, ApplicationBlockDoc, ApplicationBlockExample } from './types';
+
+/** Every application block's docs, one module each, in the order the docs list them. */
+export const APPLICATION_BLOCKS: readonly ApplicationBlockDoc[] = [
+  orgChartBlock,
+  storageBrowserBlock,
+  agentsBuilderBlock,
+  codingAgentBlock,
+  dataRoomsBlock,
+  billingAccountBlock,
+  billingConsoleBlock,
+];
+
+const APPLICATION_BLOCK_BY_NAME = new Map(
+  APPLICATION_BLOCKS.map((block) => [block.name, block] as const),
+);
+
+export function getApplicationBlock(name: string): ApplicationBlockDoc | undefined {
+  return APPLICATION_BLOCK_BY_NAME.get(name as ApplicationBlockDoc['name']);
+}
+
+/** The docs route for an application block. */
+export function applicationBlockHref(block: Pick<ApplicationBlockDoc, 'name' | 'href'>) {
+  return block.href ?? `/blocks/${block.name}`;
+}
+
+const APPLICATION_BLOCK_BY_HREF = new Map(
+  APPLICATION_BLOCKS.map((block) => [applicationBlockHref(block), block] as const),
+);
+
+/** The application block documented at a (normalised) path, if any. */
+export function getApplicationBlockByPath(path: string): ApplicationBlockDoc | undefined {
+  return APPLICATION_BLOCK_BY_HREF.get(path);
+}
diff --git a/apps/blocks/src/lib/application-blocks/org-chart.ts b/apps/blocks/src/lib/application-blocks/org-chart.ts
new file mode 100644
index 0000000..83edf64
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/org-chart.ts
@@ -0,0 +1,149 @@
+import type { ApplicationBlockDoc } from './types';
+
+export const orgChartBlock: ApplicationBlockDoc = {
+  name: 'org-chart',
+  title: 'Org Chart',
+  description:
+    'An interactive organization chart on the workspace canvas: automatic top-down layout, pan and zoom, folding teams, a details panel, and drag-to-reassign with a keyboard alternative.',
+  previewDescription:
+    'Select a person to see their manager and reports, fold a team away, or drag a card onto a new manager and watch the preview wire follow.',
+  previewHeight: 740,
+  whenToUse: [
+    'Use Org Chart when reporting relationships are central to understanding or managing an organization.',
+    'Use a table or tree when dense scanning, bulk editing, or keyboard-only hierarchy management is the primary task.',
+  ],
+  usage: {
+    description:
+      'Pass either controlled edges or defaultEdges. The component owns viewport and selection behavior while the host owns persistence and application workflows.',
+    example: `'use client';
+
+import {
+  OrgChart,
+  type OrgChartEdge
+} from '@/components/ui/org-chart';
+
+const reportingLines: OrgChartEdge[] = [
+  {
+    id: 'alex',
+    parentId: null,
+    displayName: 'Alex Morgan',
+    positionTitle: 'Chief Executive Officer',
+    avatarUrl: null
+  },
+  {
+    id: 'sam',
+    parentId: 'alex',
+    displayName: 'Sam Rivera',
+    positionTitle: 'VP of Product',
+    avatarUrl: null
+  }
+];
+
+type ReportingLineInput = Readonly<{
+  personId: string;
+  managerId: string;
+  positionTitle?: string | null;
+}>;
+
+type CompanyOrgChartProps = Readonly<{
+  saveReportingLine: (
+    reportingLine: ReportingLineInput
+  ) => void | Promise<void>;
+  openPositionEditor: (personId: string) => void;
+  openRemovalConfirmation: (personId: string) => void;
+}>;
+
+export function CompanyOrgChart({
+  saveReportingLine,
+  openPositionEditor,
+  openRemovalConfirmation
+}: CompanyOrgChartProps) {
+  return (
+    <OrgChart
+      defaultEdges={reportingLines}
+      onReparent={(personId, managerId, preserve) =>
+        saveReportingLine({
+          personId,
+          managerId,
+          positionTitle: preserve.positionTitle
+        })
+      }
+      onEditNode={(person) => openPositionEditor(person.id)}
+      onRemoveNode={(person) => openRemovalConfirmation(person.id)}
+    />
+  );
+}`,
+  },
+  state: {
+    title: 'Hierarchy and interaction state',
+    description:
+      'Use edges when the host owns the current hierarchy. Use defaultEdges for optimistic local reparenting, and persist each accepted move through onReparent.',
+  },
+  composition: [
+    'The workspace canvas (shared with Agents Builder) owns pan, pinch, wheel, and keyboard zoom; the block lays flat reporting edges out as a tidy top-down tree and draws bezier wires between cards. More than eight reports without a team of their own stack in columns of up to eight under their manager instead of running in one row.',
+    'Selecting a person highlights their reporting chain and opens a details panel with their manager, direct reports, and actions; folded teams show a stacked card edge and the team size.',
+    'Node menus delegate editing and removal to the host, so the chart never assumes a router, form system, or destructive-action policy.',
+    'Loading and empty states are built in, while success and error messaging remain injectable through observer callbacks.',
+  ],
+  accessibility: [
+    'Keep every displayName and positionTitle meaningful because the same labels identify node actions and reporting relationships.',
+    'The chart is an ARIA tree: Tab into it, move between people with the arrow keys (inside a stacked column, Up and Down move through the column and Left and Right move between columns), press Enter for details, and use Change manager to reassign without dragging.',
+    'Confirm removal in the host workflow before changing data; the node menu reports intent and does not delete records itself.',
+  ],
+  api: [
+    {
+      name: 'edges / defaultEdges',
+      type: 'OrgChartEdge[]',
+      behavior:
+        'Chooses controlled or uncontrolled hierarchy state. Supply exactly one of these properties.',
+    },
+    {
+      name: 'editable',
+      type: 'boolean',
+      behavior:
+        'Enables dragging and node actions. Defaults to true.',
+    },
+    {
+      name: 'isLoading',
+      type: 'boolean',
+      behavior:
+        'Replaces the chart with a bounded loading surface while hierarchy data is pending.',
+    },
+    {
+      name: 'onReparent',
+      type: '(childId, newParentId, preserve) => void | Promise<void>',
+      behavior:
+        'Persists a valid reporting-line change. Uncontrolled mode reverts its optimistic move when the promise rejects.',
+    },
+    {
+      name: 'onAddToChart / onEditNode / onRemoveNode',
+      type: 'Callbacks',
+      behavior:
+        'Delegates creation, editing, and removal workflows without coupling the chart to dialogs or routing.',
+    },
+    {
+      name: 'onReparentSuccess / onReparentError',
+      type: 'Observer callbacks',
+      behavior:
+        'Lets the host present localized feedback for accepted and rejected reporting-line changes.',
+    },
+    {
+      name: 'showDetails / onSelectNode',
+      type: 'boolean / (node | null) => void',
+      behavior:
+        'Shows the built-in details panel for the selected person (default true), and reports selection so a host can render its own panel instead.',
+    },
+    {
+      name: 'defaultCollapsedIds',
+      type: 'string[]',
+      behavior:
+        'People whose teams start folded away, useful for large organizations.',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      behavior:
+        'Adds layout classes to the chart container; use a height utility to replace the default 600-pixel canvas.',
+    },
+  ],
+};
diff --git a/apps/blocks/src/lib/application-blocks/storage-browser.ts b/apps/blocks/src/lib/application-blocks/storage-browser.ts
new file mode 100644
index 0000000..4845291
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/storage-browser.ts
@@ -0,0 +1,231 @@
+import type { ApplicationBlockDoc } from './types';
+
+export const storageBrowserBlock: ApplicationBlockDoc = {
+  name: 'storage-browser',
+  href: '/blocks/storage/browser',
+  section: 'storage',
+  title: 'Storage Browser',
+  description:
+    'A controlled storage workspace: buckets in the workspace sidebar, a file list with type-tinted glyphs, search, sort, drag-and-drop upload, a floating selection bar, detail and bucket sheets, and distinct empty states.',
+  previewDescription:
+    'Switch buckets, search and sort files, select a few to see the selection bar, drop files onto the list, or open one for its preview and details.',
+  previewHeight: 720,
+  whenToUse: [
+    'Use Storage Browser when people need to inspect and manage objects across several application buckets.',
+    'Install a focused storage leaf when the surrounding product already owns navigation, tables, or configuration surfaces.',
+  ],
+  usage: {
+    description:
+      'Map GraphQL results into the storage domain types and keep selection, search, sort, folders, and actions in the host. The browser performs no fetching or authorization checks.',
+    example: `'use client';
+
+import { useMemo, useState } from 'react';
+
+import {
+  ObjectDetailSheet,
+  StorageBrowser,
+  type ObjectSort,
+  type StorageBucket,
+  type StorageObject
+} from '@/components/ui/storage';
+
+type AssetBrowserActions = Readonly<{
+  confirmDelete: (objectIds: string[]) => void;
+  copyLink: (object: StorageObject) => void;
+  createBucket: () => void;
+  download: (object: StorageObject) => void;
+  rename: (objectId: string, filename?: string) => void;
+  upload: () => void;
+}>;
+
+function compareObjects(
+  left: StorageObject,
+  right: StorageObject,
+  sort: ObjectSort
+) {
+  let comparison = 0;
+  if (sort.column === 'filename') {
+    comparison = (left.filename ?? left.key).localeCompare(
+      right.filename ?? right.key
+    );
+  } else if (sort.column === 'mimeType') {
+    comparison = left.mimeType.localeCompare(right.mimeType);
+  } else if (sort.column === 'size') {
+    comparison = left.size - right.size;
+  } else {
+    comparison =
+      new Date(left.createdAt).getTime() -
+      new Date(right.createdAt).getTime();
+  }
+  return sort.direction === 'asc' ? comparison : -comparison;
+}
+
+export function AssetBrowser({
+  actions,
+  buckets,
+  objects
+}: Readonly<{
+  actions: AssetBrowserActions;
+  buckets: StorageBucket[];
+  objects: StorageObject[];
+}>) {
+  const [bucketId, setBucketId] = useState<string | null>(
+    buckets[0]?.id ?? null
+  );
+  const [openedObject, setOpenedObject] = useState<StorageObject | null>(null);
+  const [query, setQuery] = useState('');
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [sort, setSort] = useState<ObjectSort>({
+    column: 'createdAt',
+    direction: 'desc'
+  });
+  const visibleObjects = useMemo(() => {
+    const search = query.trim().toLocaleLowerCase();
+    return objects
+      .filter((object) => {
+        if (object.bucketId !== bucketId) return false;
+        if (!search) return true;
+        const searchable = [
+          object.filename ?? '',
+          object.key,
+          object.mimeType
+        ].join(' ');
+        return searchable.toLocaleLowerCase().includes(search);
+      })
+      .sort((left, right) => compareObjects(left, right, sort));
+  }, [bucketId, objects, query, sort]);
+
+  return (
+    <>
+      <StorageBrowser
+        buckets={buckets}
+        objects={visibleObjects}
+        query={query}
+        selectedBucketId={bucketId}
+        selectedIds={selectedIds}
+        sort={sort}
+        onBulkDelete={actions.confirmDelete}
+        onClearSelection={() => setSelectedIds([])}
+        onCopyLink={actions.copyLink}
+        onDelete={(object) => actions.confirmDelete([object.id])}
+        onDownload={actions.download}
+        onNewBucket={actions.createBucket}
+        onOpenObject={setOpenedObject}
+        onQueryChange={setQuery}
+        onRename={(object) => actions.rename(object.id)}
+        onSelectBucket={(nextBucketId) => {
+          setBucketId(nextBucketId);
+          setSelectedIds([]);
+        }}
+        onSelectionChange={setSelectedIds}
+        onSortChange={setSort}
+        onUpload={actions.upload}
+      />
+      <ObjectDetailSheet
+        object={openedObject}
+        open={openedObject !== null}
+        onCopyLink={actions.copyLink}
+        onDelete={(objectId) => {
+          actions.confirmDelete([objectId]);
+          setOpenedObject(null);
+        }}
+        onDownload={actions.download}
+        onOpenChange={(open) => {
+          if (!open) setOpenedObject(null);
+        }}
+        onRename={actions.rename}
+      />
+    </>
+  );
+}`,
+  },
+  state: {
+    title: 'Data and action boundaries',
+    description:
+      'Every collection, selection, filter, sort, and mutation callback is controlled. Filter and authorize records before passing them to the block, then refresh its props after a mutation succeeds.',
+  },
+  composition: [
+    'The storage-browser registry item installs the shared storage barrel and every leaf: bucket rail, object table, upload dropzone, detail sheet, bucket configuration sheet, and empty states.',
+    'StorageBrowser sits on the shared workspace shell (the same sidebar rail, drawer, and view header as Agents Builder and Billing) and composes the bucket rail, folder path, search, sort menu, object table, selection bar, and empty states; render the installed sheets and upload surface beside it.',
+    'The types mirror Constructive storage records, but the UI remains transport-neutral and does not bypass PostgreSQL privileges or RLS.',
+  ],
+  accessibility: [
+    'Preserve object filenames, MIME types, sizes, and dates as text so file state never depends on an icon or color alone.',
+    'Keep selection controlled and announce the resulting count; bulk deletion should open a confirmation before calling the mutation.',
+    'Treat unavailable storage, denied access, no buckets, and an empty bucket as distinct states because they require different recovery actions.',
+  ],
+  api: [
+    {
+      name: 'buckets / selectedBucketId / onSelectBucket',
+      type: 'StorageBucket[] / string | null / callback',
+      behavior:
+        'Supplies the bucket rail and keeps the active bucket controlled by the host.',
+    },
+    {
+      name: 'objects / selectedIds / onSelectionChange',
+      type: 'StorageObject[] / string[] / callback',
+      behavior:
+        'Supplies visible objects and controls row and bulk selection.',
+    },
+    {
+      name: 'sort / onSortChange',
+      type: 'ObjectSort / callback',
+      behavior:
+        'Reports the requested column and direction; the host returns objects in the corresponding order.',
+    },
+    {
+      name: 'query / onQueryChange',
+      type: 'string / callback',
+      behavior:
+        'Controls the search field while filtering or remote querying remains in the host.',
+    },
+    {
+      name: 'segments / onNavigate',
+      type: 'StorageBreadcrumbSegment[] / callback',
+      behavior:
+        'Adds optional folder navigation beneath the active bucket header.',
+    },
+    {
+      name: 'onUpload / onBulkDelete / object callbacks',
+      type: 'Callbacks',
+      behavior:
+        'Delegates upload, delete, open, download, copy-link, rename, and row-delete workflows.',
+    },
+    {
+      name: 'onDropFiles',
+      type: '(files: FileList) => void',
+      behavior:
+        'Turns the file list into a drop target: dragging files over it shows where they will land, and dropping hands the files to the host.',
+    },
+    {
+      name: 'locale',
+      type: 'string',
+      behavior:
+        'Formats the counts in the rail, toolbar and selection bar with the reader\'s own separators (for example "de-DE"). Counts render with "en-US" separators by default so the server and browser agree.',
+    },
+    {
+      name: 'title / defaultSidebarCollapsed',
+      type: 'string / boolean',
+      behavior:
+        'Names the workspace in the sidebar header (default "Storage") and starts the sidebar as an icon rail.',
+    },
+    {
+      name: 'isLoading / emptyState / emptyLabel',
+      type: 'boolean / StorageEmptyStateVariant / string',
+      behavior:
+        'Distinguishes pending results, empty table results, and full-pane storage states.',
+    },
+    {
+      name: 'bulkDeleteProgress',
+      type: '{ done: number; total: number; failed: string[] }',
+      behavior:
+        'Shows deterministic progress and partial failures while a host-owned bulk deletion is running.',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      behavior:
+        'Adds layout classes to the outer storage workspace.',
+    },
+  ],
+};
diff --git a/apps/blocks/src/lib/application-blocks/types.ts b/apps/blocks/src/lib/application-blocks/types.ts
new file mode 100644
index 0000000..97d42a1
--- /dev/null
+++ b/apps/blocks/src/lib/application-blocks/types.ts
@@ -0,0 +1,44 @@
+import type { DocSectionId } from '../doc-sections';
+
+export type ApplicationBlockApiRow = Readonly<{
+  name: string;
+  type: string;
+  behavior: string;
+}>;
+
+/** One way to open a block's live preview, passed to its preview route as `?example=`. */
+export type ApplicationBlockExample = Readonly<{
+  value: string;
+  label: string;
+  description: string;
+}>;
+
+export type ApplicationBlockDoc = Readonly<{
+  name: 'org-chart' | 'storage-browser' | 'agents-builder' | 'coding-agent' | 'data-rooms' | 'billing-account' | 'billing-console';
+  /** Docs route when it is not `/blocks/<name>`, e.g. inside a section such as Billing. */
+  href?: string;
+  /** Section hub the block is listed under instead of its own nav item. */
+  section?: DocSectionId;
+  title: string;
+  description: string;
+  previewDescription: string;
+  previewHeight: number;
+  whenToUse: readonly string[];
+  usage: Readonly<{
+    description: string;
+    example: string;
+  }>;
+  state: Readonly<{
+    title: string;
+    description: string;
+  }>;
+  composition: readonly string[];
+  accessibility: readonly string[];
+  api: readonly ApplicationBlockApiRow[];
+  /** Leaf components the template is built from, each usable on its own, and how they install. */
+  buildingBlocks?: Readonly<{ description: string; components: readonly ApplicationBlockApiRow[] }>;
+  /** Named ways to open the live preview, chosen above the frame; the first is the default. */
+  examples?: readonly ApplicationBlockExample[];
+  /** Integration guides after basic usage, each with its own code example. */
+  guides?: readonly Readonly<{ id: string; title: string; description: string; example: string }>[];
+}>;
diff --git a/apps/blocks/src/lib/application-doc-navigation.ts b/apps/blocks/src/lib/application-doc-navigation.ts
index 175b2e4..cee4333 100644
--- a/apps/blocks/src/lib/application-doc-navigation.ts
+++ b/apps/blocks/src/lib/application-doc-navigation.ts
@@ -2,6 +2,7 @@ export type ApplicationDocId =
   | 'org-chart'
   | 'storage-browser'
   | 'agents-builder'
+  | 'coding-agent'
   | 'data-rooms'
   | 'billing-account'
   | 'billing-console'
@@ -21,6 +22,7 @@ export const APPLICATION_DOC_SEQUENCE: readonly ApplicationDocLink[] = [
   { id: 'org-chart', title: 'Org Chart' },
   { id: 'storage-browser', title: 'Storage Browser', href: '/blocks/storage/browser' },
   { id: 'agents-builder', title: 'Agents Builder' },
+  { id: 'coding-agent', title: 'Coding Agent' },
   { id: 'data-rooms', title: 'Data Rooms' },
   { id: 'billing-account', title: 'Billing Account', href: '/blocks/billing/account' },
   { id: 'billing-console', title: 'Billing Console', href: '/blocks/billing/console' },