From 408d63013b6deff3a179d497992baaa6443fef69 Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Thu, 22 Oct 2026 10:15:59 +0700
Subject: [PATCH 1/2] feat(ai): page AskCard questions, add card eyebrows, and
 rail the tool trace

- AskCard shows one question at a time with a footer pager, radio rows,
  and Skip/Continue on the right; `eyebrow` and `icon` props
- ApprovalCard takes an `eyebrow` and uses a secondary skip button
- ToolTrace hangs its calls from one continuous rail and gains an
  `error` status
---
 .../ui/src/components/ai/approval-card.tsx    |  10 +-
 packages/ui/src/components/ai/ask-card.tsx    | 172 +++++++++++-------
 packages/ui/src/components/ai/tool-trace.tsx  |  22 ++-
 packages/ui/test/ai-ask-card.test.tsx         |  25 +++
 4 files changed, 153 insertions(+), 76 deletions(-)

diff --git a/packages/ui/src/components/ai/approval-card.tsx b/packages/ui/src/components/ai/approval-card.tsx
index 14f1a382..ccc7b707 100644
--- a/packages/ui/src/components/ai/approval-card.tsx
+++ b/packages/ui/src/components/ai/approval-card.tsx
@@ -30,6 +30,8 @@ type ApprovalCardProps = {
 	destructive?: boolean;
 	/** Preview node under the title (tables, diffs, etc.). */
 	preview?: React.ReactNode;
+	/** A small line above the title in single-confirm mode, e.g. why the run paused. */
+	eyebrow?: React.ReactNode;
 	onConfirm?: (payload: { answers?: Record<string, string[]> }) => void;
 	onSkip?: () => void;
 	onDismiss?: () => void;
@@ -49,6 +51,7 @@ function ApprovalCard({
 	skipLabel = 'Skip',
 	destructive = false,
 	preview,
+	eyebrow,
 	onConfirm,
 	onSkip,
 	onDismiss,
@@ -135,6 +138,9 @@ function ApprovalCard({
 			>
 				<div className="flex items-start justify-between gap-2 px-3 pt-3">
 					<div className="min-w-0 space-y-1">
+						{eyebrow ? (
+							<div className="mb-1.5 flex min-h-4 items-center gap-1.5 text-xs text-muted-foreground [&_svg]:size-3.5 [&_svg]:shrink-0">{eyebrow}</div>
+						) : null}
 						{title ? (
 							<div className="text-[0.8125rem] font-medium text-pretty text-foreground [overflow-wrap:anywhere]">{title}</div>
 						) : null}
@@ -155,9 +161,9 @@ function ApprovalCard({
 					) : null}
 				</div>
 				{preview ? <div className="min-w-0 overflow-x-auto px-3 pt-2 [overflow-wrap:anywhere]">{preview}</div> : null}
-				<div className="flex flex-wrap items-center justify-end gap-1.5 px-3 py-2.5">
+				<div className="flex flex-wrap items-center justify-end gap-1.5 p-3">
 					{onSkip ? (
-						<Button type="button" variant="ghost" size="sm" wrap onClick={onSkip}>
+						<Button type="button" variant="secondary" size="sm" wrap onClick={onSkip}>
 							{skipLabel}
 						</Button>
 					) : null}
diff --git a/packages/ui/src/components/ai/ask-card.tsx b/packages/ui/src/components/ai/ask-card.tsx
index 5c9383a3..d1400628 100644
--- a/packages/ui/src/components/ai/ask-card.tsx
+++ b/packages/ui/src/components/ai/ask-card.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { CircleCheck, CircleHelp } from 'lucide-react';
+import { ChevronDown, ChevronUp, CircleCheck, CircleHelp } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '../../lib/utils';
@@ -34,32 +34,40 @@ type AskCardProps = Omit<React.ComponentProps<'div'>, 'onSubmit'> & {
 	skipLabel?: React.ReactNode;
 	/** Name and placeholder of the free-text row. */
 	otherLabel?: string;
+	/** A small line above the question, e.g. who is asking or why the run paused. */
+	eyebrow?: React.ReactNode;
+	/** Glyph beside each question. Defaults to a help circle; `null` leaves the question bare, e.g. under an eyebrow. */
+	icon?: React.ReactNode;
 	disabled?: boolean;
 };
 
-const KEYS = 'ABCDEFGHIJ';
-
-function QuestionHeading({ id, children }: { id?: string; children: React.ReactNode }) {
+function QuestionHeading({ id, icon, children }: { id?: string; icon?: React.ReactNode; children: React.ReactNode }) {
+	const glyph = icon === undefined ? <CircleHelp /> : icon;
 	return (
-		<div className="flex min-h-7 items-start gap-2 px-1 py-1">
-			<CircleHelp aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-			<p id={id} className="min-w-0 text-pretty text-sm text-foreground [overflow-wrap:anywhere]">
+		<div className="flex items-start gap-2">
+			{glyph ? (
+				<span aria-hidden="true" className="flex h-5 shrink-0 items-center text-muted-foreground [&_svg]:size-4">
+					{glyph}
+				</span>
+			) : null}
+			<p id={id} className="min-w-0 text-pretty text-sm font-medium text-foreground [overflow-wrap:anywhere]">
 				{children}
 			</p>
 		</div>
 	);
 }
 
-function KeyBadge({ children, active }: { children: React.ReactNode; active?: boolean }) {
+/** Radio dot: a ring at rest, a filled disc with a pip once chosen. */
+function RadioMark({ checked }: { checked: boolean }) {
 	return (
 		<span
 			aria-hidden="true"
 			className={cn(
-				'grid size-5 shrink-0 place-items-center rounded-[5px] border text-[0.6875rem] font-medium tabular-nums',
-				active ? 'border-primary bg-primary text-primary-foreground' : 'border-border bg-muted text-muted-foreground',
+				'grid size-4 shrink-0 place-items-center rounded-full border',
+				checked ? 'border-primary bg-primary' : 'border-subtle-foreground/50',
 			)}
 		>
-			{children}
+			{checked ? <span className={cn('size-1.5 rounded-full bg-primary-foreground', iconEnterClass)} /> : null}
 		</span>
 	);
 }
@@ -69,24 +77,29 @@ function AskQuestionField({
 	choice,
 	onChoose,
 	otherLabel,
+	icon,
 	disabled,
 }: {
 	question: AskQuestion;
 	choice: AskChoice | undefined;
 	onChoose: (choice: AskChoice | undefined) => void;
 	otherLabel: string;
+	icon?: React.ReactNode;
 	disabled?: boolean;
 }) {
 	const headingId = React.useId();
 	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 =
-		'flex min-h-9 w-full items-center gap-2.5 rounded-sm border px-2 py-1.5 text-start text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50';
+		'-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';
 
 	return (
-		<div className="flex flex-col gap-1.5">
-			<QuestionHeading id={headingId}>{question.question}</QuestionHeading>
-			<div role="radiogroup" aria-labelledby={headingId} className="flex flex-col gap-1.5">
-				{question.options.map((option, index) => {
+		<div className="flex flex-col gap-2">
+			<QuestionHeading id={headingId} icon={icon}>
+				{question.question}
+			</QuestionHeading>
+			<div role="radiogroup" aria-labelledby={headingId} className="flex flex-col gap-0.5">
+				{question.options.map((option) => {
 					const checked = Boolean(choice && 'option' in choice && choice.option === option.id);
 					return (
 						<button
@@ -98,26 +111,18 @@ function AskQuestionField({
 							onClick={() => onChoose({ option: option.id })}
 							className={cn(
 								rowClass,
-								'cursor-pointer disabled:cursor-not-allowed disabled:opacity-64',
-								checked
-									? 'border-primary/40 bg-primary/6 text-foreground'
-									: 'border-border bg-card text-foreground hover:bg-overlay-hover',
+								'cursor-pointer hover:bg-overlay-hover disabled:cursor-not-allowed disabled:opacity-64',
+								checked ? 'bg-overlay-hover text-foreground' : 'text-muted-foreground hover:text-foreground',
 							)}
 						>
-							<KeyBadge active={checked}>{KEYS[index]}</KeyBadge>
+							<RadioMark checked={checked} />
 							<span className="min-w-0 flex-1 [overflow-wrap:anywhere]">{option.label}</span>
 						</button>
 					);
 				})}
 				{question.allowOther !== false ? (
-					<label
-						className={cn(
-							rowClass,
-							'cursor-text focus-within:ring-[3px] focus-within:ring-ring/50',
-							otherValue ? 'border-primary/40 bg-primary/6' : 'border-border bg-card',
-						)}
-					>
-						<KeyBadge active={Boolean(otherValue)}>{KEYS[question.options.length]}</KeyBadge>
+					<label className={cn(rowClass, 'cursor-text focus-within:bg-overlay-hover', otherValue && 'bg-overlay-hover')}>
+						<RadioMark checked={Boolean(otherValue)} />
 						<input
 							type="text"
 							value={otherValue}
@@ -153,9 +158,10 @@ function AnswerChip({ children, muted }: { children: React.ReactNode; muted?: bo
 }
 
 /**
- * Inline clarifying questions from an agent. Each question offers lettered
- * options plus a free-text row; the card settles into a one-line summary per
- * question once answered or skipped.
+ * Inline clarifying questions from an agent, one at a time. Each question
+ * offers its options as radio rows plus a free-text row; Continue moves to the
+ * next question and submits after the last. The card settles into a one-line
+ * summary per question once answered or skipped.
  */
 function AskCard({
 	questions,
@@ -165,15 +171,22 @@ function AskCard({
 	continueLabel = 'Continue',
 	skipLabel = 'Skip',
 	otherLabel = 'Something else',
+	eyebrow,
+	icon,
 	disabled,
 	className,
 	...props
 }: AskCardProps) {
 	const [choices, setChoices] = React.useState<Record<string, AskChoice>>({});
-	const complete = questions.every((question) => {
-		const choice = choices[question.id];
-		return choice && ('option' in choice || choice.other.trim().length > 0);
-	});
+	const [page, setPage] = React.useState(0);
+	const answered = (question: AskQuestion | undefined) => {
+		const choice = question ? choices[question.id] : undefined;
+		return Boolean(choice && ('option' in choice || choice.other.trim().length > 0));
+	};
+	const complete = questions.every(answered);
+	const current = questions[Math.min(page, questions.length - 1)];
+	const last = page >= questions.length - 1;
+	const paged = questions.length > 1;
 
 	if (answer) {
 		return (
@@ -191,10 +204,13 @@ function AskCard({
 							: `“${choice.other}”`
 						: undefined;
 					return (
-						<div key={question.id} className="flex flex-wrap items-center gap-x-2 gap-y-1">
-							<CircleHelp aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
-							<p className="min-w-0 text-pretty text-sm text-foreground [overflow-wrap:anywhere]">{question.question}</p>
-							{label ? <AnswerChip>{label}</AnswerChip> : <AnswerChip muted>Skipped</AnswerChip>}
+						// The icon keeps its own column, so a long question wraps beside it instead of below it.
+						<div key={question.id} className="flex items-start gap-2">
+							<CircleHelp aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+							<div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+								<p className="min-w-0 text-pretty text-sm text-foreground [overflow-wrap:anywhere]">{question.question}</p>
+								{label ? <AnswerChip>{label}</AnswerChip> : <AnswerChip muted>Skipped</AnswerChip>}
+							</div>
 						</div>
 					);
 				})}
@@ -206,35 +222,61 @@ function AskCard({
 		<div
 			data-slot="ask-card"
 			data-state="open"
-			className={cn('flex animate-[ai-fade-up_var(--duration-slow)_var(--ease-out)_both] flex-col gap-3 rounded-xl bg-card p-2 shadow-card motion-reduce:animate-none', className)}
+			className={cn('flex animate-[ai-fade-up_var(--duration-slow)_var(--ease-out)_both] flex-col gap-3 rounded-xl bg-card p-3 shadow-card motion-reduce:animate-none', className)}
 			{...props}
 		>
-			{questions.map((question) => (
-				<AskQuestionField
-					key={question.id}
-					question={question}
-					choice={choices[question.id]}
-					disabled={disabled}
-					otherLabel={otherLabel}
-					onChoose={(choice) =>
-						setChoices((current) => {
-							const next = { ...current };
-							if (choice) next[question.id] = choice;
-							else delete next[question.id];
-							return next;
-						})
-					}
-				/>
-			))}
+			{eyebrow ? <div className="-mb-1 flex min-h-4 items-center gap-1.5 text-xs text-muted-foreground [&_svg]:size-3.5 [&_svg]:shrink-0">{eyebrow}</div> : null}
+			{current ? (
+				// Keyed by question, so each page enters on its own.
+				<div key={current.id} className="animate-[ai-fade-up_var(--duration-slow)_var(--ease-out)_both] motion-reduce:animate-none">
+					<AskQuestionField
+						question={current}
+						choice={choices[current.id]}
+						disabled={disabled}
+						otherLabel={otherLabel}
+						icon={icon}
+						onChoose={(choice) =>
+							setChoices((value) => {
+								const next = { ...value };
+								if (choice) next[current.id] = choice;
+								else delete next[current.id];
+								return next;
+							})
+						}
+					/>
+				</div>
+			) : null}
 			<div className="flex flex-wrap items-center gap-2">
-				<Button size="xs" disabled={disabled || !complete} onClick={() => onSubmit?.(choices)}>
-					{continueLabel}
-				</Button>
-				{onSkip ? (
-					<Button size="xs" variant="outline" disabled={disabled} onClick={onSkip}>
-						{skipLabel}
-					</Button>
+				{paged ? (
+					<div className="-ms-1 flex items-center text-xs text-muted-foreground tabular-nums">
+						<Button size="icon-xs" variant="ghost" aria-label="Previous question" disabled={page === 0} onClick={() => setPage(page - 1)}>
+							<ChevronUp aria-hidden="true" />
+						</Button>
+						<span aria-hidden="true">
+							{page + 1}/{questions.length}
+						</span>
+						<span className="sr-only">
+							Question {page + 1} of {questions.length}
+						</span>
+						<Button size="icon-xs" variant="ghost" aria-label="Next question" disabled={last || !answered(current)} onClick={() => setPage(page + 1)}>
+							<ChevronDown aria-hidden="true" />
+						</Button>
+					</div>
 				) : null}
+				<div className="ms-auto flex flex-wrap items-center gap-1.5">
+					{onSkip ? (
+						<Button size="sm" variant="secondary" disabled={disabled} onClick={onSkip}>
+							{skipLabel}
+						</Button>
+					) : null}
+					<Button
+						size="sm"
+						disabled={disabled || (last ? !complete : !answered(current))}
+						onClick={() => (last ? onSubmit?.(choices) : setPage(page + 1))}
+					>
+						{continueLabel}
+					</Button>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/packages/ui/src/components/ai/tool-trace.tsx b/packages/ui/src/components/ai/tool-trace.tsx
index 2da9ef62..5511d4e4 100644
--- a/packages/ui/src/components/ai/tool-trace.tsx
+++ b/packages/ui/src/components/ai/tool-trace.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { BookOpen, Check } from 'lucide-react';
+import { BookOpen, Check, CircleAlert } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 import { Spinner } from '../spinner';
 import { iconEnterClass, MarkTile } from './mark-tile';
 
-type ToolTraceStatus = 'pending' | 'running' | 'done';
+type ToolTraceStatus = 'pending' | 'running' | 'done' | 'error';
 
 type ToolTraceStep = {
 	id: string;
@@ -29,19 +29,21 @@ const STATUS_LABEL: Record<ToolTraceStatus, string> = {
 	pending: 'Queued',
 	running: 'Running',
 	done: 'Done',
+	error: 'Failed',
 };
 
 /** Delay between rows as a trace enters, so it reads top to bottom. */
 const ROW_STAGGER_MS = 80;
 
 /**
- * Quiet tool-call trace: a heading row followed by one row per call, joined by
- * short connectors. Each row morphs from spinner to check as the call settles.
+ * Quiet tool-call trace: a heading row, then one row per call hung from a
+ * single rail under the heading glyph. Each row morphs from spinner to check
+ * as the call settles, or to an alert when it fails.
  */
 function ToolTrace({ title = 'Read tools', icon, steps, className, ...props }: ToolTraceProps) {
 	return (
-		<ol data-slot="tool-trace" className={cn('flex flex-col gap-2', className)} {...props}>
-			<li className="flex h-7 items-center gap-2">
+		<ol data-slot="tool-trace" className={cn('flex flex-col', className)} {...props}>
+			<li className="mb-1 flex h-7 items-center gap-2">
 				<MarkTile>{icon ?? <BookOpen />}</MarkTile>
 				<span className="text-[0.8125rem] text-foreground">{title}</span>
 			</li>
@@ -52,12 +54,14 @@ function ToolTrace({ title = 'Read tools', icon, steps, className, ...props }: T
 						key={step.id}
 						data-status={status}
 						style={{ animationDelay: `${(index + 1) * ROW_STAGGER_MS}ms` }}
-						className="relative flex h-7 animate-[ai-fade-up_var(--duration-slow)_var(--ease-out)_both] items-center gap-2 motion-reduce:animate-none"
+						// The rail sits on the heading glyph's centre line; rows touch, so it reads as one line.
+						className="ms-2 flex h-8 animate-[ai-fade-up_var(--duration-slow)_var(--ease-out)_both] items-center gap-2 border-s border-subtle-foreground/25 ps-3 motion-reduce:animate-none"
 					>
-						<span aria-hidden="true" className="absolute -top-2 left-2 h-2 w-px -translate-x-1/2 bg-subtle-foreground/35" />
 						<span className="grid size-4 shrink-0 place-items-center text-subtle-foreground">
 							{status === 'done' ? (
 								<Check aria-hidden="true" className={cn('size-3', iconEnterClass)} strokeWidth={2} />
+							) : status === 'error' ? (
+								<CircleAlert aria-hidden="true" className={cn('size-3.5 text-destructive', iconEnterClass)} />
 							) : (
 								<Spinner aria-hidden="true" role={undefined} className="size-3.5" strokeWidth={1.5} />
 							)}
@@ -67,7 +71,7 @@ function ToolTrace({ title = 'Read tools', icon, steps, className, ...props }: T
 						<span
 							className={cn(
 								'truncate text-[0.8125rem]',
-								status === 'running' ? 'text-foreground' : 'text-muted-foreground',
+								status === 'running' || status === 'error' ? 'text-foreground' : 'text-muted-foreground',
 							)}
 						>
 							{step.label}
diff --git a/packages/ui/test/ai-ask-card.test.tsx b/packages/ui/test/ai-ask-card.test.tsx
index 1b7bc3a8..9574dc64 100644
--- a/packages/ui/test/ai-ask-card.test.tsx
+++ b/packages/ui/test/ai-ask-card.test.tsx
@@ -87,6 +87,31 @@ describe('AskCard', () => {
 		expect(card.textContent).toContain('“Email it to me”');
 	});
 
+	it('pages through several questions and submits every answer after the last', async () => {
+		const onSubmit = vi.fn();
+		const questions = [
+			...QUESTIONS,
+			{ id: 'when', question: 'When should it go out?', options: [{ id: 'now', label: 'Now' }, { id: 'monday', label: 'Monday' }], allowOther: false },
+		];
+		await render(<AskCard questions={questions} onSubmit={onSubmit} />);
+
+		expect(button('Continue').disabled).toBe(true);
+		await click(radio('Keep it here'));
+		await click(button('Continue'));
+		expect(onSubmit).not.toHaveBeenCalled();
+		expect(container!.textContent).toContain('When should it go out?');
+		expect(radio('Keep it here')).toBeUndefined();
+
+		// Going back keeps the earlier choice.
+		await click(container!.querySelector<HTMLButtonElement>('[aria-label="Previous question"]')!);
+		expect(radio('Keep it here').getAttribute('aria-checked')).toBe('true');
+		await click(container!.querySelector<HTMLButtonElement>('[aria-label="Next question"]')!);
+
+		await click(radio('Monday'));
+		await click(button('Continue'));
+		expect(onSubmit).toHaveBeenCalledWith({ where: { option: 'here' }, when: { option: 'monday' } });
+	});
+
 	it('marks every question skipped', async () => {
 		await render(<Harness />);
 		await click(button('Skip'));

From 9e7034735f8026d0d959e2ae180a3773238c1f6f Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Thu, 22 Oct 2026 10:16:01 +0700
Subject: [PATCH 2/2] feat(agents-builder): simulate every agent, add status
 tags and projects

- Each roster agent opens its own blueprint and run via `agentDetails`:
  live replay, approval, question, failure with retry, queued, finished
- Opened agents stay mounted, so runs continue off screen and finishing
  marks the row unread
- Agent rows end in a status tag (Approve, Answer, Failed, Queued); the
  collapsed rail shows the word under the initials
- Run panel stops on shared cards for approval, question, failure, queued
- Optional `projects` group the sidebar roster; folded projects carry
  their most pressing tag, and the breadcrumb names the project
---
 packages/ui/registry.json                     |   8 +
 packages/ui/scripts/build-registry.ts         |   1 +
 .../agents-builder/agent-canvas.tsx           |   4 +-
 .../agents-builder/agent-run-panel.tsx        | 372 +++++++++++--
 .../agents-builder/agent-status.tsx           | 188 +++++++
 .../components/agents-builder/agent-view.tsx  | 178 +++++-
 .../agents-builder/agents-builder-context.tsx |  16 +-
 .../agents-builder/agents-builder.tsx         |  69 ++-
 .../agents-builder/canvas-nodes.tsx           |   6 +-
 .../components/agents-builder/demo-agents.ts  | 517 ++++++++++++++++++
 .../src/components/agents-builder/fixtures.ts |  38 +-
 .../ui/src/components/agents-builder/index.ts |  10 +-
 .../src/components/agents-builder/sidebar.tsx | 241 ++++++--
 .../ui/src/components/agents-builder/types.ts |  67 ++-
 .../agents-builder/use-agent-run.ts           |  27 +-
 .../ui/src/components/workspace-kit/nav.tsx   |  49 +-
 .../ui/src/stories/AgentsBuilder.stories.tsx  |  32 +-
 .../src/stories/break-ui/agents-worst-case.ts |  51 +-
 .../ui/test/agents-billing-workflows.test.tsx |  12 +-
 packages/ui/test/agents-builder.test.tsx      | 200 ++++++-
 20 files changed, 1905 insertions(+), 181 deletions(-)
 create mode 100644 packages/ui/src/components/agents-builder/agent-status.tsx
 create mode 100644 packages/ui/src/components/agents-builder/demo-agents.ts

diff --git a/packages/ui/registry.json b/packages/ui/registry.json
index 85522ea3..2d19508e 100644
--- a/packages/ui/registry.json
+++ b/packages/ui/registry.json
@@ -3655,6 +3655,10 @@
           "path": "registry/constructive/blocks/agents-builder/agent-run-panel.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "registry/constructive/blocks/agents-builder/agent-status.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/constructive/blocks/agents-builder/agent-view.tsx",
           "type": "registry:component"
@@ -3711,6 +3715,10 @@
           "path": "registry/constructive/blocks/agents-builder/demo-schedules.ts",
           "type": "registry:lib"
         },
+        {
+          "path": "registry/constructive/blocks/agents-builder/demo-agents.ts",
+          "type": "registry:lib"
+        },
         {
           "path": "registry/constructive/blocks/agents-builder/fixtures.ts",
           "type": "registry:lib"
diff --git a/packages/ui/scripts/build-registry.ts b/packages/ui/scripts/build-registry.ts
index d409a25a..74c51adf 100644
--- a/packages/ui/scripts/build-registry.ts
+++ b/packages/ui/scripts/build-registry.ts
@@ -96,6 +96,7 @@ const clientFiles = new Set([
 	'storage-empty-state.tsx',
 	'upload-dropzone.tsx',
 	'agent-canvas.tsx',
+	'agent-status.tsx',
 	'agent-run-panel.tsx',
 	'agent-view.tsx',
 	'agents-builder-context.tsx',
diff --git a/packages/ui/src/components/agents-builder/agent-canvas.tsx b/packages/ui/src/components/agents-builder/agent-canvas.tsx
index 0de12206..9649a104 100644
--- a/packages/ui/src/components/agents-builder/agent-canvas.tsx
+++ b/packages/ui/src/components/agents-builder/agent-canvas.tsx
@@ -71,8 +71,8 @@ type AgentCanvasProps = {
  * each new node on screen.
  */
 function AgentCanvas({ state, panelOpen, onTogglePanel }: AgentCanvasProps) {
-	const { data, integration, emit } = useAgentsBuilder();
-	const { agent } = data;
+	const { currentAgent, integration, emit } = useAgentsBuilder();
+	const { agent } = currentAgent;
 	const layerRef = React.useRef<HTMLDivElement>(null);
 	const viewport = useCanvasViewport(CONTENT_WIDTH);
 	const nodes = useCollapsed();
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 35233278..35720d6a 100644
--- a/packages/ui/src/components/agents-builder/agent-run-panel.tsx
+++ b/packages/ui/src/components/agents-builder/agent-run-panel.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { Bot, Check, ChevronRight, Hand, Sparkles, Square, Zap } from 'lucide-react';
+import { Bot, Check, ChevronRight, CircleAlert, Clock3, Hand, MessageCircleQuestion, RotateCcw, Sparkles, Square, Zap } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 import { ApprovalCard } from '../ai/approval-card';
+import { type AskChoice, AskCard } from '../ai/ask-card';
 import { ChatContainer } from '../ai/chat-container';
 import { CodeBlock } from '../ai/code-block';
 import { FeedbackBar } from '../ai/feedback-bar';
@@ -14,19 +15,41 @@ import { Reasoning } from '../ai/reasoning';
 import { Source, Sources } from '../ai/source';
 import { ThinkingStatus } from '../ai/thinking-status';
 import { ToolTrace } from '../ai/tool-trace';
+import { Button } from '../button';
 import { Spinner } from '../spinner';
 import { useAgentsBuilder } from './agents-builder-context';
 import { Composer } from './composer';
 import { IntegrationMark } from './integration-mark';
 import { enterClass, focusRingClass, SurfaceBody, surfaceInsetClass, ToneBadge, TooltipIconButton, useInert } from '../workspace-kit/primitives';
+import { useLatest } from '../workspace-kit/use-latest';
 import { RevealText } from './reveal-text';
 import { usePlaybackClock } from './playback';
-import type { AgentRunScript, RunApproval, RunQuery, ToolStep } from './types';
+import type { AgentRunScript, RunApproval, RunFailure, RunQuery, RunQuestion, ToolStep } from './types';
 import { type AgentRunState, RUN_TIMING, type RunGroupPlay } 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
+	</>
+);
+
 type RunGroupProps = {
 	group: AgentRunScript['groups'][number];
 	play: RunGroupPlay;
@@ -148,22 +171,51 @@ function ResultTable({ query }: { query: RunQuery }) {
 
 type Decision = 'approved' | 'skipped' | null;
 
-/** Plays the approved tool calls one by one, then reports whether they finished. */
-function useApprovedSteps(steps: ToolStep[], decision: Decision) {
-	const [done, setDone] = React.useState(0);
-	const running = decision === 'approved' && done < steps.length;
+/** Chosen option ids by question id, `'skipped'`, or `null` while unanswered. */
+type Answer = Record<string, string[]> | 'skipped' | null;
+
+/**
+ * Plays a gate's tool calls one by one once `active`, then reports whether
+ * they finished. `settled` starts with every call done, for a past run.
+ */
+function useGateSteps(steps: ToolStep[], active: boolean, settled: boolean) {
+	const [done, setDone] = React.useState(settled ? steps.length : 0);
+	const running = active && done < steps.length;
 	usePlaybackClock(running ? { delay: done === 0 ? RUN_TIMING.stepsSpin : RUN_TIMING.stepWork } : undefined, false, () =>
 		setDone((value) => value + 1),
 	);
-	return { done, finished: decision === 'skipped' || (decision === 'approved' && done >= steps.length) };
+	return { done, finished: done >= steps.length };
 }
 
-function ApprovalBlock({ approval, decision, done, onDecide }: { approval: RunApproval; decision: Decision; done: number; onDecide: (approved: boolean) => void }) {
+/** A gate's follow-up tool calls as a live trace, then the agent's reply once they finish. */
+function GateOutcome({ steps, done, reply }: { steps: ToolStep[] | null; done: number; reply: string }) {
 	const { integration } = useAgentsBuilder();
+	return (
+		<>
+			{steps ? (
+				<ToolTrace
+					title="Write tools"
+					steps={steps.map((step, index) => ({
+						id: step.id,
+						label: step.label,
+						icon: <IntegrationMark integration={integration(step.integrationId)} bare />,
+						status: index < done ? 'done' : index === done ? 'running' : 'pending',
+					}))}
+				/>
+			) : null}
+			{!steps || done >= steps.length ? (
+				<RevealText text={reply} revealing duration={reply.length * RUN_TIMING.charMs} className="leading-[22px] text-foreground" />
+			) : null}
+		</>
+	);
+}
+
+function ApprovalBlock({ approval, decision, done, onDecide }: { approval: RunApproval; decision: Decision; done: number; onDecide: (approved: boolean) => void }) {
 	if (!decision) {
 		return (
 			<ApprovalCard
-				className={cn('max-w-none', enterClass)}
+				className={cn('max-w-none rounded-xl', enterClass)}
+				eyebrow={APPROVAL_EYEBROW}
 				title={approval.title}
 				description={approval.description}
 				preview={<p className="rounded-md bg-muted/60 px-2.5 py-2 text-[0.8125rem] leading-5 text-pretty text-foreground [overflow-wrap:anywhere]">{approval.preview}</p>}
@@ -181,30 +233,152 @@ function ApprovalBlock({ approval, decision, done, onDecide }: { approval: RunAp
 				<Check aria-hidden="true" className={cn('size-3.5 shrink-0', iconEnterClass)} />
 				<span className="min-w-0">{approved ? `You approved: ${approval.confirmLabel}` : `You chose: ${approval.skipLabel}`}</span>
 			</p>
-			{approved ? (
-				<ToolTrace
-					title="Write tools"
-					steps={approval.steps.map((step, index) => ({
-						id: step.id,
-						label: step.label,
-						icon: <IntegrationMark integration={integration(step.integrationId)} bare />,
-						status: index < done ? 'done' : index === done ? 'running' : 'pending',
-					}))}
-				/>
-			) : null}
-			{!approved || done >= approval.steps.length ? (
-				<RevealText
-					text={approved ? approval.approvedText : approval.skippedText}
-					revealing
-					duration={(approved ? approval.approvedText : approval.skippedText).length * RUN_TIMING.charMs}
-					className="leading-[22px] text-foreground"
-				/>
-			) : null}
+			<GateOutcome steps={approved ? approval.steps : null} done={done} reply={approved ? approval.approvedText : approval.skippedText} />
+		</div>
+	);
+}
+
+function answerIds(choice: AskChoice) {
+	return 'option' in choice ? [choice.option] : [choice.other];
+}
+
+/** The question that ends a run: the ask card, then its summary, the follow-up calls, and the agent's reply. */
+function QuestionBlock({
+	question,
+	answer,
+	done,
+	onAnswer,
+}: {
+	question: RunQuestion;
+	answer: Answer;
+	done: number;
+	onAnswer: (answer: Exclude<Answer, null>) => void;
+}) {
+	const questions = question.questions.map((item) => ({
+		id: item.id,
+		question: item.question,
+		options: item.options.map((option) => ({ id: option.id, label: option.label })),
+		allowOther: false,
+	}));
+	if (answer === null) {
+		return (
+			<AskCard
+				className={cn('max-w-none', enterClass)}
+				eyebrow={QUESTION_EYEBROW}
+				icon={null}
+				questions={questions}
+				onSubmit={(choices) => onAnswer(Object.fromEntries(Object.entries(choices).map(([id, choice]) => [id, answerIds(choice)])))}
+				onSkip={() => onAnswer('skipped')}
+			/>
+		);
+	}
+	if (answer === 'skipped') {
+		return (
+			<div className="flex flex-col gap-3">
+				<AskCard className="max-w-none" questions={questions} answer={{ skipped: true }} />
+				<GateOutcome steps={null} done={0} reply={question.skippedText} />
+			</div>
+		);
+	}
+	// Each chosen option adds its own sentence; with none written, the generic reply stands in.
+	const replies = question.questions.flatMap((item) => item.options.filter((option) => answer[item.id]?.includes(option.id) && option.reply).map((option) => option.reply!));
+	const reply = replies.length ? replies.join(' ') : question.answeredText;
+	return (
+		<div className="flex flex-col gap-3">
+			<AskCard
+				className="max-w-none"
+				questions={questions}
+				answer={{ choices: Object.fromEntries(Object.entries(answer).map(([id, [option = '']]) => [id, { option }])) }}
+			/>
+			<GateOutcome steps={question.steps} done={done} reply={reply} />
+		</div>
+	);
+}
+
+/**
+ * The card a run stops on when it cannot go on by itself: a status line, a
+ * title, the body, and its actions on the right, like the approval and
+ * question cards.
+ */
+function StopCard({
+	eyebrow,
+	title,
+	actions,
+	children,
+}: {
+	eyebrow: React.ReactNode;
+	title: React.ReactNode;
+	actions: React.ReactNode;
+	children?: React.ReactNode;
+}) {
+	return (
+		<div className={cn('flex flex-col gap-3 rounded-xl bg-card p-3 shadow-card', enterClass)}>
+			<div className="flex flex-col gap-1.5">
+				<p className="flex min-h-4 min-w-0 items-center gap-1.5 text-xs text-muted-foreground [&_svg]:size-3.5 [&_svg]:shrink-0">{eyebrow}</p>
+				<p className="text-sm font-medium text-pretty text-foreground [overflow-wrap:anywhere]">{title}</p>
+			</div>
+			{children}
+			<div className="flex flex-wrap items-center justify-end gap-1.5">{actions}</div>
 		</div>
 	);
 }
 
-function CommandBar({ script, status, onStop }: { script: AgentRunScript; status: 'running' | 'awaiting' | 'done'; onStop: () => void }) {
+/** Where a failed run stopped: the call that failed, the error, its raw output, and a retry. */
+function FailureBlock({ failure, step, onRetry }: { failure: RunFailure; step?: ToolStep; onRetry?: () => void }) {
+	return (
+		<StopCard
+			eyebrow={
+				<>
+					<CircleAlert aria-hidden="true" className="text-destructive" />
+					<span className="truncate">{step ? `Failed at ${step.label}` : 'Run failed'}</span>
+				</>
+			}
+			title={failure.message}
+			actions={
+				<Button size="sm" onClick={onRetry}>
+					<RotateCcw aria-hidden="true" />
+					{failure.retryLabel ?? 'Retry run'}
+				</Button>
+			}
+		>
+			{failure.log ? <CodeBlock code={failure.log} filename="Output" highlight={false} maxCollapsedLines={false} /> : null}
+		</StopCard>
+	);
+}
+
+/** A run waiting for its slot: when it starts, the plan it will follow, and a way to start it now. */
+function QueuedBlock({ note, plan, onStart }: { note?: string; plan?: string[]; onStart?: () => void }) {
+	return (
+		<StopCard
+			eyebrow={QUEUED_EYEBROW}
+			title={note ?? 'Starts at its next scheduled time.'}
+			actions={
+				<Button size="sm" onClick={onStart}>
+					Run now
+				</Button>
+			}
+		>
+			{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">
+						{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>
+								<span className="min-w-0 [overflow-wrap:anywhere]">{step}</span>
+							</li>
+						))}
+					</ol>
+				</div>
+			) : null}
+		</StopCard>
+	);
+}
+
+function CommandBar({ script, phase, onStop }: { script: AgentRunScript; phase: RunPhase; onStop: () => void }) {
 	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">
@@ -216,16 +390,21 @@ function CommandBar({ script, status, onStop }: { script: AgentRunScript; status
 				</ToneBadge>
 				<span title={script.command.scope} className="truncate">{script.command.scope}</span>
 			</p>
-			{status === 'done' ? (
+			{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">
-					<Check aria-hidden="true" className={cn('size-3', iconEnterClass)} />
-					Done
+					{phase === 'done' ? <Check aria-hidden="true" className={cn('size-3', iconEnterClass)} /> : <Clock3 aria-hidden="true" className="size-3" />}
+					{phase === 'done' ? 'Done' : 'Queued'}
 				</span>
-			) : status === 'awaiting' ? (
-				<ToneBadge tone="warning" className="h-6">
-					<Hand aria-hidden="true" />
+			) : 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"
@@ -240,24 +419,90 @@ function CommandBar({ script, status, onStop }: { script: AgentRunScript; status
 	);
 }
 
+/** Where the run stands, as the sidebar roster shows it. */
+type RunPhase = 'queued' | 'running' | 'approval' | 'input' | 'failed' | 'done';
+
 type AgentRunPanelProps = {
 	script: AgentRunScript;
 	state: AgentRunState;
 	onStop: () => void;
+	/** Called whenever the run starts waiting on a person, resumes, or completes. */
+	onPhaseChange?: (phase: RunPhase) => void;
+	/** Brings the decision or the failure into view and focus once it shows, e.g. when the agent opened to decide. */
+	focusStop?: boolean;
+	/** A past run: its approval or question shows as already settled, with every follow-up call done. */
+	resolved?: boolean;
+	/** Holds the run before it starts; the panel offers "Run now". */
+	queued?: boolean;
+	/** When a queued run starts, e.g. "Starts at 09:00 UTC." */
+	queuedNote?: string;
+	onStart?: () => void;
+	onRetry?: () => void;
 };
 
 /**
  * The current run, narrated: command bar, streamed notes, the tool trace,
  * sub-agent and skill fan-out, live thinking status, and a follow-up composer.
  */
-function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
-	const { integration, emit, data } = useAgentsBuilder();
+function AgentRunPanel({
+	script,
+	state,
+	onStop,
+	onPhaseChange,
+	focusStop = false,
+	resolved = false,
+	queued = false,
+	queuedNote,
+	onStart,
+	onRetry,
+}: AgentRunPanelProps) {
+	const { integration, emit, currentAgent } = useAgentsBuilder();
+	const agentId = currentAgent.agent.id;
 	const [followUps, setFollowUps] = React.useState<string[]>([]);
-	const [decision, setDecision] = React.useState<Decision>(null);
-	const approvedSteps = useApprovedSteps(script.approval?.steps ?? [], decision);
+	// A past run settled its gate long ago: approved, or answered with the first options.
+	const [decision, setDecision] = React.useState<Decision>(resolved && script.approval ? 'approved' : null);
+	const [answer, setAnswer] = React.useState<Answer>(() =>
+		resolved && script.question && !script.approval
+			? Object.fromEntries(script.question.questions.map((item) => [item.id, item.options[0] ? [item.options[0].id] : []]))
+			: null,
+	);
+	const approvedSteps = useGateSteps(script.approval?.steps ?? [], decision === 'approved', resolved);
+	const answeredSteps = useGateSteps(script.question?.steps ?? [], answer !== null && answer !== 'skipped', resolved);
 	const startedGroups = script.groups.filter((group) => state[group.id].state !== 'waiting');
-	const awaiting = Boolean(script.approval) && state.approval && !decision;
-	const complete = state.settled && (!script.approval || approvedSteps.finished);
+	const failed = state.failedStep !== null;
+	const awaitingApproval = Boolean(script.approval) && state.approval && !decision;
+	const awaitingAnswer = Boolean(script.question) && state.question && answer === null;
+	const gateFinished = script.approval
+		? decision === 'skipped' || (decision === 'approved' && approvedSteps.finished)
+		: script.question
+			? answer === 'skipped' || (answer !== null && answeredSteps.finished)
+			: true;
+	const complete = state.settled && !failed && gateFinished;
+	const phase: RunPhase = queued
+		? 'queued'
+		: failed
+			? 'failed'
+			: complete
+				? 'done'
+				: awaitingApproval
+					? 'approval'
+					: awaitingAnswer
+						? 'input'
+						: 'running';
+	const stopped = phase === 'approval' || phase === 'input' || phase === 'failed';
+	const onPhaseChangeRef = useLatest(onPhaseChange);
+	const stopRef = React.useRef<HTMLDivElement>(null);
+	const stopFocused = React.useRef(false);
+
+	React.useEffect(() => onPhaseChangeRef.current?.(phase), [onPhaseChangeRef, phase]);
+
+	React.useEffect(() => {
+		// Only the first time the run stops; afterwards focus stays where the person put it.
+		if (!focusStop || !stopped || stopFocused.current) return;
+		stopFocused.current = true;
+		stopRef.current?.scrollIntoView({ block: 'center' });
+		stopRef.current?.focus({ preventScroll: true });
+	}, [focusStop, stopped]);
 	const plan = script.plan && {
 		steps: script.plan.map((label, index) => {
 			const done = index < state.planDone || (complete && index === script.plan!.length - 1);
@@ -270,7 +515,7 @@ function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
 			<div className="group/run relative flex min-h-0 flex-1 flex-col">
 				<CommandBar
 					script={script}
-					status={complete ? 'done' : awaiting ? 'awaiting' : 'running'}
+					phase={phase}
 					onStop={() => {
 						onStop();
 						emit({ type: 'stop-run' });
@@ -282,7 +527,7 @@ function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
 				/>
 				<ChatContainer className="-mt-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
 					<div className="flex flex-col gap-5 pt-6 pb-10">
-						{plan ? <PlanTracker plan={plan} streaming={!complete} flushBottom={false} className="px-3" /> : null}
+						{plan && !queued ? <PlanTracker plan={plan} streaming={!complete} flushBottom={false} className="px-3" /> : null}
 						{script.reasoning && state.reasoning !== 'hidden' ? (
 							<Reasoning
 								className="-my-2 px-1.5"
@@ -303,11 +548,13 @@ function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
 						{state.shownSteps > 0 ? (
 							<ToolTrace
 								className="px-3"
-								steps={script.steps.map((step, index) => ({
+								// Calls after a failure never ran, so they are not listed.
+								steps={script.steps.slice(0, failed ? state.failedStep! + 1 : undefined).map((step, index) => ({
 									id: step.id,
 									label: step.label,
 									icon: <IntegrationMark integration={integration(step.integrationId)} bare />,
-									status: index < state.doneSteps ? 'done' : index === state.doneSteps ? 'running' : 'pending',
+									status:
+										index === state.failedStep ? 'error' : index < state.doneSteps ? 'done' : index === state.doneSteps ? 'running' : 'pending',
 								}))}
 							/>
 						) : null}
@@ -348,18 +595,41 @@ function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
 							</Sources>
 						) : null}
 						{script.approval && state.approval ? (
-							<div className="px-3">
+							<div ref={stopRef} tabIndex={-1} role="group" aria-label={script.approval.title} className="px-3 outline-none">
 								<ApprovalBlock
 									approval={script.approval}
 									decision={decision}
 									done={approvedSteps.done}
 									onDecide={(approved) => {
 										setDecision(approved ? 'approved' : 'skipped');
-										emit({ type: 'approve-run', agentId: data.agent.id, approved });
+										emit({ type: 'approve-run', agentId, approved });
+									}}
+								/>
+							</div>
+						) : null}
+						{script.question && !script.approval && state.question ? (
+							<div ref={stopRef} tabIndex={-1} role="group" aria-label={script.question.title} className="px-3 outline-none">
+								<QuestionBlock
+									question={script.question}
+									answer={answer}
+									done={answeredSteps.done}
+									onAnswer={(next) => {
+										setAnswer(next);
+										emit({ type: 'answer-run', agentId, answers: next === 'skipped' ? null : next });
 									}}
 								/>
 							</div>
 						) : null}
+						{failed && script.failure ? (
+							<div ref={stopRef} tabIndex={-1} role="group" aria-label="Run failed" className="px-3 outline-none">
+								<FailureBlock failure={script.failure} step={script.steps.find((step) => step.id === script.failure?.stepId)} onRetry={onRetry} />
+							</div>
+						) : null}
+						{queued ? (
+							<div className="px-3">
+								<QueuedBlock note={queuedNote} plan={script.plan} onStart={onStart} />
+							</div>
+						) : null}
 						{followUps.map((text, index) => (
 							<div key={index} className={cn('mx-3 rounded-xl bg-card px-3 py-2 text-sm whitespace-pre-wrap text-foreground shadow-card [overflow-wrap:anywhere]', enterClass)}>
 								{text}
@@ -373,12 +643,7 @@ function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
 								</p>
 								<FeedbackBar showRegenerate={false} copyText={script.findings?.paragraphs.join('\n\n')} />
 							</div>
-						) : awaiting ? (
-							<p className="flex h-7 items-center gap-2 px-3 text-[0.8125rem] text-muted-foreground">
-								<Hand aria-hidden="true" className="size-3.5" />
-								Waiting for your approval
-							</p>
-						) : state.settled ? null : (
+						) : state.settled || queued || awaitingApproval || awaitingAnswer ? null : (
 							<ThinkingStatus
 								className="px-3"
 								elapsedSeconds={script.thinking.seconds}
@@ -407,3 +672,4 @@ function AgentRunPanel({ script, state, onStop }: AgentRunPanelProps) {
 }
 
 export { AgentRunPanel };
+export type { AgentRunPanelProps, RunPhase };
diff --git a/packages/ui/src/components/agents-builder/agent-status.tsx b/packages/ui/src/components/agents-builder/agent-status.tsx
new file mode 100644
index 00000000..5c579c12
--- /dev/null
+++ b/packages/ui/src/components/agents-builder/agent-status.tsx
@@ -0,0 +1,188 @@
+'use client';
+
+import { cn } from '../../lib/utils';
+import type { AgentStatus, AgentSummary } from './types';
+
+/** Resolves the deprecated `running` flag into a status. */
+function agentStatus(agent: AgentSummary): AgentStatus {
+	return agent.status ?? (agent.running ? 'running' : 'idle');
+}
+
+/** A run is still open: running, or paused on a person. These names shimmer. */
+function isInFlight(status: AgentStatus) {
+	return status === 'running' || status === 'approval' || status === 'input';
+}
+
+/** Paused on a person: opening the agent jumps straight to the decision. */
+function isWaitingOnYou(status: AgentStatus) {
+	return status === 'approval' || status === 'input';
+}
+
+/** Kept on screen even past the roster limit. */
+function needsAttention(status: AgentStatus) {
+	return isWaitingOnYou(status) || status === 'failed';
+}
+
+const STATUS_PHRASE: Record<AgentStatus, string | null> = {
+	idle: null,
+	queued: 'Queued',
+	running: 'Running',
+	approval: 'Waiting for your approval',
+	input: 'Waiting for your answer',
+	failed: 'Last run failed',
+};
+
+/** Sentence-case state for tooltips; `null` for an idle agent with nothing new. */
+function statusPhrase(agent: AgentSummary): string | null {
+	const status = agentStatus(agent);
+	return STATUS_PHRASE[status] ?? (agent.unread ? 'New result' : null);
+}
+
+/** Accessible name: "Revenue Analyst, waiting for your approval". */
+function agentLabel(agent: AgentSummary) {
+	const phrase = statusPhrase(agent);
+	return phrase ? `${agent.name}, ${phrase.toLowerCase()}` : agent.name;
+}
+
+const TAG_WORD = { approval: 'Approve', input: 'Answer', failed: 'Failed', queued: 'Queued' } as const;
+type TaggedStatus = keyof typeof TAG_WORD;
+
+/** States that show a word at the end of the row: the three that need you, and a queued run. */
+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)]',
+} as const;
+
+/**
+ * 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.
+ */
+function AgentStatusTag({ status }: { status: AgentStatus }) {
+	if (!hasStatusTag(status)) return null;
+	if (status === 'queued') {
+		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>
+		);
+	}
+	return (
+		<span
+			aria-hidden="true"
+			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))]',
+			)}
+		>
+			{/* 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>
+		</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.
+ */
+function AgentStatusWord({ status }: { status: AgentStatus }) {
+	if (!hasStatusTag(status)) return null;
+	return (
+		<span
+			aria-hidden="true"
+			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))]',
+				isWaitingOnYou(status)
+					? [
+							// Same sweep as TextShimmer: toward the page colour in light, toward the text colour in dark.
+							'bg-[linear-gradient(90deg,var(--word)_35%,color-mix(in_oklab,var(--word),var(--sidebar)_55%)_50%,var(--word)_65%)]',
+							'dark:bg-[linear-gradient(90deg,var(--word)_35%,var(--foreground)_50%,var(--word)_65%)]',
+							'bg-size-[200%_100%] bg-clip-text text-transparent animate-[ai-shimmer-text_1.4s_linear_infinite]',
+							'motion-reduce:animate-none motion-reduce:bg-none motion-reduce:text-(--word)',
+						]
+					: 'text-(--word)',
+			)}
+		>
+			{TAG_WORD[status]}
+		</span>
+	);
+}
+
+/** Most pressing first: a decision, then a question, then a failure, then a queued run. */
+const TAG_PRIORITY: TaggedStatus[] = ['approval', 'input', 'failed', 'queued'];
+
+/** The tag a folded group of agents shows: its most pressing agent's, or `null` when none has one. */
+function mostUrgentTag(agents: AgentSummary[]): TaggedStatus | null {
+	let best: TaggedStatus | null = null;
+	for (const agent of agents) {
+		const status = agentStatus(agent);
+		if (hasStatusTag(status) && (best === null || TAG_PRIORITY.indexOf(status) < TAG_PRIORITY.indexOf(best))) best = status;
+	}
+	return best;
+}
+
+/**
+ * The first `limit` agents in roster order, except that an agent needing
+ * attention past the limit takes the place of the last calm row above it.
+ * Only rows that need a person move, so the list never reshuffles on its own,
+ * and it never grows past `limit`: once every row needs you, the rest wait
+ * behind "More agents".
+ */
+function visibleRoster(agents: AgentSummary[], limit: number): AgentSummary[] {
+	if (agents.length <= limit) return agents;
+	const head = agents.slice(0, limit);
+	const calm = head.filter((agent) => !needsAttention(agentStatus(agent))).length;
+	const promoted = agents
+		.slice(limit)
+		.filter((agent) => needsAttention(agentStatus(agent)))
+		.slice(0, calm);
+	let room = promoted.length;
+	const kept: AgentSummary[] = [];
+	for (const agent of head.reverse()) {
+		if (room > 0 && !needsAttention(agentStatus(agent))) room -= 1;
+		else kept.unshift(agent);
+	}
+	return [...kept, ...promoted];
+}
+
+export { AgentStatusTag, AgentStatusWord, agentLabel, agentStatus, hasStatusTag, isInFlight, isWaitingOnYou, mostUrgentTag, needsAttention, statusPhrase, visibleRoster };
diff --git a/packages/ui/src/components/agents-builder/agent-view.tsx b/packages/ui/src/components/agents-builder/agent-view.tsx
index fdca4416..97c8d2dc 100644
--- a/packages/ui/src/components/agents-builder/agent-view.tsx
+++ b/packages/ui/src/components/agents-builder/agent-view.tsx
@@ -6,26 +6,149 @@ import * as React from 'react';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 import { AgentCanvas } from './agent-canvas';
-import { AgentRunPanel } from './agent-run-panel';
-import { useAgentsBuilder } from './agents-builder-context';
+import { AgentRunPanel, type RunPhase } from './agent-run-panel';
+import { agentStatus } from './agent-status';
+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 { startViewTransition, ViewAnimation } from '../workspace-kit/view-transition';
 
-/**
- * Agent detail: breadcrumb header, the live run panel, and the agent canvas.
- * The run replays from the start each time the view opens.
- */
-function AgentView({ autoplay = true }: { autoplay?: boolean }) {
-	const { data, emit } = useAgentsBuilder();
-	const { state, stop } = useAgentRun(data.run, { autoplay });
-	const [panelOpen, setPanelOpen] = React.useState(true);
+/** How a run opens. Replay plays it from the start; settled jumps to where it stopped; resolved shows a finished run. */
+type RunStart = 'replay' | 'settled' | 'resolved' | 'queued';
+
+function runStart(status: AgentStatus, autoplay: boolean): RunStart {
+	switch (status) {
+		case 'queued':
+			return 'queued';
+		case 'running':
+			return autoplay ? 'replay' : 'settled';
+		case 'idle':
+			return 'resolved';
+		default:
+			// Approval, input, and failed: open where the run stopped, at the decision or the error.
+			return 'settled';
+	}
+}
+
+/** What the sidebar row says while the run waits or after it fails. */
+function phaseNote(script: AgentRunScript, phase: RunPhase) {
+	if (phase === 'approval') return script.approval?.title;
+	if (phase === 'input') return script.question?.title;
+	if (phase === 'failed') return script.failure?.message;
+	return undefined;
+}
+
+type AgentRunSessionProps = {
+	script: AgentRunScript;
+	start: RunStart;
+	active: boolean;
+	queuedNote?: string;
+	panelOpen: boolean;
+	onTogglePanel: () => void;
+	onRestart: () => void;
+};
+
+/** One run of the agent: its panel and canvas share the replayed state, and its phase feeds the sidebar row. */
+function AgentRunSession({ script, start, active, queuedNote, panelOpen, onTogglePanel, onRestart }: AgentRunSessionProps) {
+	const { currentAgent, emit, updateAgent } = useAgentsBuilder();
+	const agentId = currentAgent.agent.id;
+	const activeRef = useLatest(active);
+	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 onPhaseChange = (phase: RunPhase) => {
+		// A queued agent keeps what the host said about it, e.g. when it starts.
+		if (phase === 'queued') return;
+		updateAgent(agentId, {
+			status: phase === 'done' ? 'idle' : phase,
+			statusNote: phase === 'done' || phase === 'running' ? undefined : phaseNote(script, phase),
+			// A run that finishes off screen leaves a result to read.
+			unread: phase === 'done' && !activeRef.current,
+		});
+	};
+
 	const layout = panelOpen
 		? { panel: 'w-full opacity-100 @4xl/view:w-[395px]', canvas: 'hidden @4xl/view:block' }
 		: { panel: 'hidden w-0 opacity-0 @4xl/view:flex', canvas: 'block' };
 
+	return (
+		<div className="flex min-h-0 flex-1">
+			<div
+				className={cn(
+					'flex shrink-0 overflow-hidden transition-[width,opacity] duration-(--duration-slow) ease-(--ease-out) motion-reduce:transition-none',
+					layout.panel,
+				)}
+				ref={panelRef}
+			>
+				<AgentRunPanel
+					script={script}
+					state={state}
+					onStop={stop}
+					onPhaseChange={onPhaseChange}
+					focusStop={start === 'settled' && active}
+					resolved={start === 'resolved'}
+					queued={queued}
+					queuedNote={queuedNote}
+					onStart={() => {
+						setQueued(false);
+						emit({ type: 'start-run', agentId });
+					}}
+					onRetry={() => {
+						emit({ type: 'retry-run', agentId });
+						onRestart();
+					}}
+				/>
+			</div>
+			<div className={cn('min-w-0 flex-1 p-3', layout.canvas)}>
+				<AgentCanvas state={state} panelOpen={panelOpen} onTogglePanel={onTogglePanel} />
+			</div>
+		</div>
+	);
+}
+
+type AgentViewProps = {
+	/** Replays a running agent's run from the start. Default true. */
+	autoplay?: boolean;
+	/** The agent to show. Defaults to the open agent. */
+	agentId?: string;
+	/** False while the view stays mounted off screen; a run finishing then leaves the agent unread. */
+	active?: boolean;
+};
+
+/**
+ * Agent detail: breadcrumb header, the run panel, and the agent canvas. The
+ * agent opens as it stands: a running agent replays its run, one waiting on
+ * you or failed opens where the run stopped, a queued one waits for its start,
+ * and an idle one shows its finished run. A retry plays the run again without
+ * its failure.
+ */
+function AgentView({ agentId, ...props }: AgentViewProps) {
+	const context = useAgentsBuilder();
+	const detail = (agentId === undefined ? undefined : context.agentDetail(agentId)) ?? context.currentAgent;
+	// Everything inside reads this agent as the current one, even while another agent is open.
+	const scoped = React.useMemo(() => ({ ...context, currentAgent: detail }), [context, detail]);
+	return (
+		<AgentsBuilderContext.Provider value={scoped}>
+			<AgentViewBody {...props} />
+		</AgentsBuilderContext.Provider>
+	);
+}
+
+function AgentViewBody({ autoplay = true, active = true }: Omit<AgentViewProps, 'agentId'>) {
+	const { data, currentAgent, agents, emit } = useAgentsBuilder();
+	const { agent, run } = currentAgent;
+	// The breadcrumb's scope: the agent's project when it has one.
+	const projectId = agents.find((candidate) => candidate.id === agent.id)?.projectId;
+	const scope = data.projects?.find((project) => project.id === projectId)?.name ?? 'Agents';
+	const [session, setSession] = React.useState(() => {
+		const summary = agents.find((candidate) => candidate.id === agent.id);
+		return { attempt: 0, start: runStart(summary ? agentStatus(summary) : 'idle', autoplay), queuedNote: summary?.statusNote };
+	});
+	const [panelOpen, setPanelOpen] = React.useState(true);
+
 	return (
 		<div className="flex min-w-0 flex-1 flex-col">
 			<header className="flex min-h-12 shrink-0 items-center gap-1 border-b border-border px-3">
@@ -39,16 +162,18 @@ function AgentView({ autoplay = true }: { autoplay?: boolean }) {
 					<ArrowLeft aria-hidden="true" className="size-3.5 rtl:-scale-x-100" />
 				</TooltipIconButton>
 				<nav aria-label="Breadcrumb" className="flex min-w-0 flex-1 items-center gap-1.5 ps-1">
-					<span className="hidden text-[0.8125rem] text-muted-foreground @md/view:inline">Agents</span>
+					<span className="hidden truncate text-[0.8125rem] text-muted-foreground @md/view:inline">
+	<bdi>{scope}</bdi>
+</span>
 					<span aria-hidden="true" className="hidden text-sm text-subtle-foreground @md/view:inline">
 						/
 					</span>
-					<h1 title={data.agent.name} className="truncate text-sm font-medium text-foreground">
-						<bdi>{data.agent.name}</bdi>
+					<h1 title={agent.name} className="truncate text-sm font-medium text-foreground">
+						<bdi>{agent.name}</bdi>
 					</h1>
 				</nav>
 				<div className="flex shrink-0 items-center gap-2">
-					<Button size="xs" variant="outline" onClick={() => emit({ type: 'share-agent', agentId: data.agent.id })}>
+					<Button size="xs" variant="outline" onClick={() => emit({ type: 'share-agent', agentId: agent.id })}>
 						Share
 					</Button>
 					<Button size="xs" variant="secondary" disabled>
@@ -85,23 +210,20 @@ function AgentView({ autoplay = true }: { autoplay?: boolean }) {
 				</div>
 			</div>
 			<ViewAnimation>
-				<div className="flex min-h-0 flex-1">
-					<div
-						className={cn(
-							'flex shrink-0 overflow-hidden transition-[width,opacity] duration-(--duration-slow) ease-(--ease-out) motion-reduce:transition-none',
-							layout.panel,
-						)}
-						ref={panelRef}
-					>
-						<AgentRunPanel script={data.run} state={state} onStop={stop} />
-					</div>
-					<div className={cn('min-w-0 flex-1 p-3', layout.canvas)}>
-						<AgentCanvas state={state} panelOpen={panelOpen} onTogglePanel={() => setPanelOpen((value) => !value)} />
-					</div>
-				</div>
+				<AgentRunSession
+					key={session.attempt}
+					script={session.attempt > 0 ? { ...run, failure: undefined } : run}
+					start={session.start}
+					active={active}
+					queuedNote={session.queuedNote}
+					panelOpen={panelOpen}
+					onTogglePanel={() => setPanelOpen((value) => !value)}
+					onRestart={() => setSession((current) => ({ ...current, attempt: current.attempt + 1, start: 'replay' }))}
+				/>
 			</ViewAnimation>
 		</div>
 	);
 }
 
 export { AgentView };
+export type { AgentViewProps };
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 0d97e09f..7ba34de2 100644
--- a/packages/ui/src/components/agents-builder/agents-builder-context.tsx
+++ b/packages/ui/src/components/agents-builder/agents-builder-context.tsx
@@ -3,6 +3,8 @@
 import * as React from 'react';
 
 import type {
+	AgentDetail,
+	AgentSummary,
 	AgentsBuilderAction,
 	AgentsBuilderData,
 	AgentsBuilderTheme,
@@ -10,6 +12,8 @@ import type {
 	Integration,
 } from './types';
 
+type AgentPatch = Partial<Pick<AgentSummary, 'status' | 'unread' | 'statusNote'>>;
+
 type ConnectRequest = {
 	integrationId: string;
 	onConnected?: () => void;
@@ -17,6 +21,14 @@ type ConnectRequest = {
 
 type AgentsBuilderContextValue = {
 	data: AgentsBuilderData;
+	/** The agent the agent view shows: the featured agent until another one with a detail opens. */
+	currentAgent: AgentDetail;
+	/** Blueprint and run for an agent the template can open itself. */
+	agentDetail: (id: string) => AgentDetail | undefined;
+	/** `data.agents` with the template's own changes applied: run progress and results seen. */
+	agents: AgentSummary[];
+	/** Records what the template learned about an agent, e.g. its run now waits on approval. */
+	updateAgent: (id: string, patch: AgentPatch) => void;
 	view: AgentsBuilderView;
 	setView: (view: AgentsBuilderView) => void;
 	integration: (id: string) => Integration | undefined;
@@ -24,7 +36,7 @@ type AgentsBuilderContextValue = {
 	/** Opens the connect flow for an integration. */
 	requestConnect: (request: ConnectRequest) => void;
 	agentName: (id: string) => string;
-	/** Opens the agent view for the blueprint agent; asks the host for any other. */
+	/** 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;
 	theme: AgentsBuilderTheme;
@@ -42,4 +54,4 @@ function useAgentsBuilder() {
 }
 
 export { AgentsBuilderContext, useAgentsBuilder };
-export type { AgentsBuilderContextValue, ConnectRequest };
+export type { AgentPatch, AgentsBuilderContextValue, ConnectRequest };
diff --git a/packages/ui/src/components/agents-builder/agents-builder.tsx b/packages/ui/src/components/agents-builder/agents-builder.tsx
index 393e709a..080838ac 100644
--- a/packages/ui/src/components/agents-builder/agents-builder.tsx
+++ b/packages/ui/src/components/agents-builder/agents-builder.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useControllableState } from '../../lib/use-controllable-state';
 import { WorkspaceShell } from '../workspace-kit/shell';
 import { AgentView } from './agent-view';
-import { AgentsBuilderContext, type AgentsBuilderContextValue, type ConnectRequest } from './agents-builder-context';
+import { type AgentPatch, AgentsBuilderContext, type AgentsBuilderContextValue, type ConnectRequest } from './agents-builder-context';
 import { ChatView } from './chat-view';
 import { ConnectIntegrationDialog } from './connect-integration-dialog';
 import { InboxView } from './inbox-view';
@@ -14,6 +14,8 @@ import { IntegrationsView } from './integrations-view';
 import { AgentsBuilderSidebar } from './sidebar';
 import { SkillsView } from './skills-view';
 import type {
+	AgentDetail,
+	AgentSummary,
 	AgentsBuilderAction,
 	AgentsBuilderData,
 	AgentsBuilderTheme,
@@ -39,11 +41,16 @@ type AgentsBuilderProps = {
 	defaultSidebarCollapsed?: boolean;
 	/** Shows the workspace as a rounded frame on a canvas instead of filling its container. */
 	framed?: boolean;
-	/** Replays the agent run when the agent view opens. Defaults to true. */
+	/**
+	 * Replays a running agent's run when its view opens. Defaults to true. Other
+	 * agents open as they stand: queued, failed, waiting at the decision, or done.
+	 */
 	autoplayRun?: boolean;
 	className?: string;
 };
 
+const NO_PATCHES: Record<string, AgentPatch> = {};
+
 /** Keeps the latest callback without re-creating anything that closes over it. */
 function useLatest<T>(value: T) {
 	const ref = React.useRef(value);
@@ -90,6 +97,12 @@ function AgentsBuilder({
 	const [request, setRequest] = React.useState<ConnectRequest | null>(null);
 	const [dialogOpen, setDialogOpen] = React.useState(false);
 	const [usageDismissed, setUsageDismissed] = React.useState(false);
+	// Template-side agent changes, dropped whenever the host sends a new roster.
+	const [agentPatches, setAgentPatches] = React.useState<{ source: AgentSummary[]; byId: Record<string, AgentPatch> }>(() => ({
+		source: data.agents,
+		byId: {},
+	}));
+	const patches = agentPatches.source === data.agents ? agentPatches.byId : NO_PATCHES;
 	const onActionRef = useLatest(onAction);
 
 	const integrations = React.useMemo(
@@ -97,11 +110,41 @@ function AgentsBuilder({
 		[data.integrations],
 	);
 	const agentNames = React.useMemo(() => new Map(data.agents.map((agent) => [agent.id, agent.name])), [data.agents]);
+	const details = React.useMemo(
+		() =>
+			new Map<string, AgentDetail>([
+				[data.agent.id, { agent: data.agent, run: data.run }],
+				...(data.agentDetails ?? []).map((detail): [string, AgentDetail] => [detail.agent.id, detail]),
+			]),
+		[data.agent, data.agentDetails, data.run],
+	);
+	const [openAgentId, setOpenAgentId] = React.useState(data.agent.id);
+	const currentAgent = details.get(openAgentId) ?? details.get(data.agent.id)!;
+	// Agents opened so far. Their views stay mounted, so a run keeps going while you look elsewhere. They hide
+	// with display:none, not <Activity>: a hidden Activity tears down effects, which would pause the run's clock.
+	const [keptAgentIds, setKeptAgentIds] = React.useState<string[]>([]);
+	if (view === 'agent' && !keptAgentIds.includes(currentAgent.agent.id)) setKeptAgentIds([...keptAgentIds, currentAgent.agent.id]);
+	const agents = React.useMemo(
+		() => data.agents.map((agent) => (patches[agent.id] ? { ...agent, ...patches[agent.id] } : agent)),
+		[data.agents, patches],
+	);
 
 	const context = React.useMemo<AgentsBuilderContextValue>(() => {
 		const emit = (action: AgentsBuilderAction) => onActionRef.current?.(action);
+		const updateAgent = (id: string, patch: AgentPatch) =>
+			setAgentPatches((current) => {
+				const byId = current.source === data.agents ? current.byId : {};
+				const base = { ...data.agents.find((agent) => agent.id === id), ...byId[id] };
+				// A run reports its phase on every mount; an unchanged patch keeps the state, so nothing re-renders.
+				if (current.source === data.agents && (Object.keys(patch) as (keyof AgentPatch)[]).every((key) => base[key] === patch[key])) return current;
+				return { source: data.agents, byId: { ...byId, [id]: { ...byId[id], ...patch } } };
+			});
 		return {
 			data,
+			currentAgent,
+			agentDetail: (id) => details.get(id),
+			agents,
+			updateAgent,
 			view,
 			setView,
 			integration: (id) => integrations.get(id),
@@ -111,14 +154,21 @@ function AgentsBuilder({
 				setDialogOpen(true);
 			},
 			agentName: (id) => agentNames.get(id) ?? id,
-			openAgent: (id) => (id === data.agent.id ? setView('agent') : emit({ type: 'open-agent', agentId: id })),
+			openAgent: (id) => {
+				// Opening an agent is reading its latest result.
+				if (agents.find((agent) => agent.id === id)?.unread) updateAgent(id, { unread: false });
+				if (details.has(id)) {
+					setOpenAgentId(id);
+					setView('agent');
+				} else emit({ type: 'open-agent', agentId: id });
+			},
 			emit,
 			theme,
 			setTheme,
 			usageDismissed,
 			dismissUsage: () => setUsageDismissed(true),
 		};
-	}, [agentNames, connected, data, integrations, onActionRef, setTheme, setView, theme, usageDismissed, view]);
+	}, [agentNames, agents, connected, currentAgent, data, details, integrations, onActionRef, setTheme, setView, theme, usageDismissed, view]);
 
 	const connect = async (integration: Integration, toolIds: string[]) => {
 		await onConnectIntegration?.(integration, toolIds);
@@ -150,7 +200,16 @@ function AgentsBuilder({
 				{view === 'schedules' ? <SchedulesView /> : null}
 				{view === 'integrations' ? <IntegrationsView /> : null}
 				{view === 'skills' ? <SkillsView /> : null}
-				{view === 'agent' ? <AgentView autoplay={autoplayRun} /> : null}
+				{keptAgentIds
+					.filter((id) => details.has(id))
+					.map((id) => {
+						const shown = view === 'agent' && id === currentAgent.agent.id;
+						return (
+							<div key={id} className={shown ? 'flex min-w-0 flex-1' : 'hidden'}>
+								<AgentView agentId={id} active={shown} autoplay={autoplayRun} />
+							</div>
+						);
+					})}
 			</WorkspaceShell>
 			<ConnectIntegrationDialog
 				integration={request ? integrations.get(request.integrationId) : undefined}
diff --git a/packages/ui/src/components/agents-builder/canvas-nodes.tsx b/packages/ui/src/components/agents-builder/canvas-nodes.tsx
index 25b6e550..bdb17591 100644
--- a/packages/ui/src/components/agents-builder/canvas-nodes.tsx
+++ b/packages/ui/src/components/agents-builder/canvas-nodes.tsx
@@ -143,9 +143,9 @@ export function CanvasNode({ id, title, icon, tone = 'plain', meta, badge, stage
 
 /** Scrollable system prompt with edge fades and a hover Edit action. */
 export function Instructions({ open, onToggle }: { open: boolean; onToggle: () => void }) {
-	const { data, emit } = useAgentsBuilder();
+	const { currentAgent, emit } = useAgentsBuilder();
 	const [edges, setEdges] = React.useState({ top: false, bottom: true });
-	const { instructions } = data.agent;
+	const { instructions } = currentAgent.agent;
 	const fade = 'pointer-events-none absolute inset-x-0 h-5 from-card to-transparent transition-opacity duration-(--duration-moderate)';
 
 	return (
@@ -186,7 +186,7 @@ export function Instructions({ open, onToggle }: { open: boolean; onToggle: () =
 					<span aria-hidden="true" className={cn(fade, 'bottom-0 bg-gradient-to-t', edges.bottom ? 'opacity-100' : 'opacity-0')} />
 					<button
 						type="button"
-						onClick={() => emit({ type: 'edit-instructions', agentId: data.agent.id })}
+						onClick={() => emit({ type: 'edit-instructions', agentId: currentAgent.agent.id })}
 						className={cn(
 							'pointer-events-none absolute top-0 end-2 cursor-pointer rounded-md bg-card px-1.5 py-0.5 text-xs text-foreground opacity-0 shadow-card hover:bg-muted',
 							'group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100 pointer-coarse:pointer-events-auto pointer-coarse:opacity-100',
diff --git a/packages/ui/src/components/agents-builder/demo-agents.ts b/packages/ui/src/components/agents-builder/demo-agents.ts
new file mode 100644
index 00000000..036f76de
--- /dev/null
+++ b/packages/ui/src/components/agents-builder/demo-agents.ts
@@ -0,0 +1,517 @@
+import type { AgentBlueprint, AgentDetail, AgentRunScript } from './types';
+
+// Roster agents the demo opens on its own: each blueprint and its latest run.
+
+const CHURN_RADAR: AgentBlueprint = {
+	id: 'churn-radar',
+	name: 'Churn Radar',
+	title: 'Churn Radar Agent',
+	tagline: 'Finds accounts going quiet before they renew',
+	instructions: {
+		heading: 'Churn Radar Agent',
+		meta: 'Full system prompt. Version 1.6 · owner: Theo · last change: billing changes dropped before scoring.',
+		paragraphs: [
+			'You are Churn Radar. Every weekday you score the accounts renewing in the next 90 days on how their usage moved over the last 30, and hand customer success a short list of the ones that need a call.',
+			'A 25% drop in active usage is a flag; 40% is high. Weigh seat cuts and open support tickets, but never score on revenue alone: a large account holding steady is not at risk.',
+			'Check every Stripe cancellation against billing-exceptions and the CRM before counting it. A move to annual invoicing or to a reseller is a billing change, not churn.',
+			'Post the list to #customer-success with each account’s owner. Never contact a customer, and never change a subscription.',
+		],
+	},
+	schedule: { when: 'Weekdays 10:00 AM', label: 'at-risk scan', cron: 'cron 0 10 * * 1-5', zone: 'UTC' },
+	trigger: { integrationId: 'stripe', label: 'Stripe webhook', conditions: ['type=subscription.updated', 'seats_delta<0'] },
+	channelsNotice: 'Set an agent identity to configure channels',
+	memory: ['risk-thresholds', 'billing-exceptions'],
+	tools: [
+		{ id: 'snowflake-usage', label: 'Snowflake Query usage_30d', integrationId: 'snowflake' },
+		{ id: 'stripe-renewals', label: 'Stripe List upcoming renewals', integrationId: 'stripe' },
+		{ id: 'hubspot-owners', label: 'HubSpot Read account owners', integrationId: 'hubspot' },
+		{ id: 'zendesk-tickets', label: 'Zendesk Read open tickets', integrationId: 'zendesk' },
+		{ id: 'amplitude-seats', label: 'Amplitude Read active seats', integrationId: 'amplitude' },
+	],
+	subagents: ['usage_scorer', 'renewal_matcher', 'billing_change_filter', 'owner_router'],
+	skills: ['churn-scoring', 'cohort-analysis'],
+};
+
+const CHURN_RADAR_RUN: AgentRunScript = {
+	command: { verb: 'Run', skill: 'at-risk-scan', scope: 'for Sep 24' },
+	reasoning: {
+		seconds: 11,
+		text: 'Kestrel Bank cut 12 seats in Stripe this morning, which is what started this run. A seat cut alone is not risk; usage falling ahead of a renewal is. So score everyone renewing in the next 90 days on 30-day usage, then drop billing changes like Halcyon before anything reaches customer success.',
+	},
+	plan: [
+		'Load risk thresholds and exceptions',
+		'Pull usage, renewals and owners',
+		'Score accounts renewing in 90 days',
+		'Drop billing changes and route owners',
+		'Write the at-risk list',
+	],
+	paragraphs: [
+		'Starting the at-risk scan for Sep 24. Kestrel Bank cut 12 seats in Stripe at 08:52, which started this run early; the scan still covers every account renewing before Dec 23, not only Kestrel.',
+		'risk-thresholds flags a 25% usage drop over 30 days and calls 40% high. billing-exceptions lists accounts whose Stripe cancellations are invoicing changes, so those come off before anyone is asked to call.',
+	],
+	steps: CHURN_RADAR.tools,
+	query: {
+		name: 'at_risk_accounts.sql',
+		sql: [
+			'select a.name             as account,',
+			'       u.usage_change_30d,',
+			'       r.renews_on,',
+			'       r.mrr,',
+			'       s.risk',
+			'from analytics.usage_30d u',
+			'join billing.upcoming_renewals r using (account_id)',
+			'join analytics.accounts a using (account_id)',
+			'join analytics.churn_scores s using (account_id)',
+			'where r.renews_on < current_date + 90',
+			'  and u.usage_change_30d <= -0.25',
+			'  and not r.billing_change',
+			'order by s.score desc;',
+		].join('\n'),
+		columns: ['Account', 'Usage 30d', 'Renews', 'MRR', 'Risk'],
+		rows: [
+			['Brightline Freight', '−52%', 'Nov 14', '$9,800', 'High'],
+			['Corvid Labs', '−47%', 'Dec 2', '$7,200', 'High'],
+			['Pelican Dental', '−41%', 'Nov 30', '$6,450', 'High'],
+			['Kestrel Bank', '−33%', 'Oct 19', '$12,600', 'Medium'],
+			['Orchard Schools', '−29%', 'Dec 18', '$4,150', 'Medium'],
+		],
+		caption: '$40,200 MRR renewing by Dec 23 · 5 rows · 486 ms',
+	},
+	groups: [
+		{ id: 'subagents', label: 'Sub-agents', items: CHURN_RADAR.subagents },
+		{ id: 'skills', label: 'Skills', items: CHURN_RADAR.skills },
+	],
+	findings: {
+		paragraphs: [
+			'Five accounts renewing by Dec 23 lost 25% or more of their usage, $40.2k MRR between them. The three high-risk ones were on Tuesday’s list. Kestrel Bank is new and renews first, Oct 19: 19 of its 58 seats stopped logging in after Sep 8.',
+			'Kestrel’s admin contact in HubSpot has bounced since Sep 9, so the drop likely follows a champion leaving. Halcyon Logistics is left off: its Stripe cancellation is the move to annual invoicing, already on billing-exceptions.',
+		],
+		sources: [
+			{ title: 'usage_30d', description: 'Snowflake · analytics.usage_30d, refreshed 09:00 UTC' },
+			{ title: 'Upcoming renewals', description: 'Stripe · 112 subscriptions renewing by Dec 23' },
+			{ title: 'Kestrel Bank', description: 'HubSpot company · admin contact bounced Sep 9' },
+		],
+	},
+	thinking: { seconds: 48, tokens: 2700 },
+};
+
+const DATA_QUALITY_MONITOR: AgentBlueprint = {
+	id: 'data-quality-monitor',
+	name: 'Data Quality Monitor',
+	title: 'Data Quality Monitor Agent',
+	tagline: 'Catches late tables before the dashboards do',
+	instructions: {
+		heading: 'Data Quality Monitor Agent',
+		meta: 'Full system prompt. Version 2.0 · owner: Jonas · last change: late tables traced to a change before alerting.',
+		paragraphs: [
+			'You are the Data Quality Monitor. Every hour you check the 14 tables in freshness-slas against their SLA and say which are late, by how much, and why.',
+			'Read freshness from the load column each table declares. When a column is renamed upstream, map it in column-mappings and say so; never skip a table to make a check pass.',
+			'Trace anything late to the dbt run, merge or upstream incident behind it before alerting. An alert without a cause is a page someone has to repeat.',
+			'Post to #data-alerts only. Never rerun a job or merge a fix without approval.',
+		],
+	},
+	schedule: { when: 'Every hour', label: 'freshness checks', cron: 'cron 0 * * * *', zone: 'UTC' },
+	trigger: { integrationId: 'dbt', label: 'dbt job finished', conditions: ['status=error', 'job=nightly'] },
+	channelsNotice: 'Set an agent identity to configure channels',
+	memory: ['freshness-slas', 'column-mappings'],
+	tools: [
+		{ id: 'dbt-runs', label: 'dbt Read model runs', integrationId: 'dbt' },
+		{ id: 'postgres-slas', label: 'Postgres Read freshness SLAs', integrationId: 'postgres' },
+		{ id: 'postgres-freshness', label: 'Postgres Check loaded_at on 14 tables', integrationId: 'postgres' },
+		{ id: 'github-merges', label: 'GitHub Read merged PRs · warehouse', integrationId: 'github' },
+		{ id: 'datadog-monitors', label: 'Datadog Read ingestion monitors', integrationId: 'datadog' },
+	],
+	subagents: ['freshness_checker', 'lineage_tracer', 'change_matcher'],
+	skills: ['anomaly-detection', 'sql-review', 'schema-migration'],
+};
+
+const DATA_QUALITY_MONITOR_RUN: AgentRunScript = {
+	command: { verb: 'Run', skill: 'freshness-check', scope: 'for Sep 24 · 08:00' },
+	reasoning: {
+		seconds: 8,
+		text: 'The 08:00 freshness check is due. Fourteen tables, each with its own SLA in freshness-slas, from 1h for payments to 6h for invoices. Read the newest load per table, compare it with the SLA, and if anything is late, match it to the dbt run or merge behind it before posting, so the alert says why and not only what.',
+	},
+	plan: [
+		'Read the overnight dbt runs',
+		'Check freshness against each SLA',
+		'Rank tables by age',
+		'Trace anything late to its change',
+		'Summarise for #data-alerts',
+	],
+	paragraphs: [
+		'Starting the 08:00 freshness check. Reading the overnight dbt runs first, so a late table can be tied to the job that should have loaded it rather than reported on its own.',
+		'freshness-slas covers 14 tables. Each check reads the newest value of the table’s load column against its SLA; anything late gets traced to the change behind it before an alert goes to #data-alerts.',
+	],
+	steps: DATA_QUALITY_MONITOR.tools,
+	query: {
+		name: 'table_freshness.sql',
+		sql: [
+			'select table_name,',
+			'       max_loaded_at,',
+			'       now() - max_loaded_at as age,',
+			'       sla',
+			'from monitoring.table_freshness',
+			'order by age desc',
+			'limit 5;',
+		].join('\n'),
+		columns: ['Table', 'Last loaded', 'Age', 'SLA'],
+		rows: [
+			['invoices', '07:45 UTC', '1h 33m', '6h'],
+			['payments', '08:47 UTC', '31m', '1h'],
+			['subscriptions', '08:58 UTC', '20m', '2h'],
+			['orders_daily', '09:06 UTC', '12m', '2h'],
+			['events_hourly', '09:10 UTC', '8m', '1h'],
+		],
+		caption: '14 of 14 tables inside SLA · 5 rows · 208 ms',
+	},
+	groups: [
+		{ id: 'subagents', label: 'Sub-agents', items: DATA_QUALITY_MONITOR.subagents },
+		{ id: 'skills', label: 'Skills', items: DATA_QUALITY_MONITOR.skills },
+	],
+	findings: {
+		paragraphs: [
+			'All 14 tables are inside their SLA. The 08:00 check failed because PR #412 renamed orders_daily.loaded_at to ingested_at. The check now reads ingested_at for orders_daily, which last loaded at 09:06 UTC, 12 minutes ago against a 2h SLA.',
+			'The oldest load is invoices at 1h 33m, well inside its 6h SLA. column-mappings now records the rename, so the next column change on orders shows up as a mapping to confirm instead of a failed run.',
+		],
+		sources: [
+			{ title: 'table_freshness', description: 'Postgres · monitoring.table_freshness, 14 tables' },
+			{ title: 'PR #412', description: 'GitHub · Rename order columns, merged Sep 24' },
+			{ title: 'orders_daily', description: 'dbt Cloud · last build 09:06 UTC' },
+		],
+	},
+	failure: {
+		stepId: 'postgres-freshness',
+		message: 'Column orders_daily.loaded_at no longer exists.',
+		log: [
+			'08:00:41 UTC  freshness  analytics.orders_daily  ERROR',
+			'ERROR:  column "loaded_at" does not exist',
+			'LINE 1: select max(loaded_at) as last_loaded from analytics.orders_daily',
+			'                   ^',
+			'HINT:  Perhaps you meant to reference the column "orders_daily.ingested_at".',
+		].join('\n'),
+		retryLabel: 'Retry run',
+	},
+	thinking: { seconds: 35, tokens: 1900 },
+};
+
+const SCHEMA_STEWARD: AgentBlueprint = {
+	id: 'schema-steward',
+	name: 'Schema Steward',
+	title: 'Schema Steward Agent',
+	tagline: 'Keeps every migration in the right schema',
+	instructions: {
+		heading: 'Schema Steward Agent',
+		meta: 'Full system prompt. Version 1.4 · owner: Ines · last change: billing tables live in billing with RLS on.',
+		paragraphs: [
+			'You are the Schema Steward. Nightly, you compare production with the migrations on main; on every pull request that touches migrations/, you check the new migration before it merges.',
+			'Every table belongs to a domain schema. Tables holding customer or billing data need RLS on and grants only to their service role; public is for shared lookups.',
+			'Use schema-migration to check locks, backfills and RLS. When the branch has a migrated preview database, read it instead of parsing the SQL.',
+			'Comment on the pull request and file drift in Linear · Data platform. Ask before suggesting a schema the author did not choose, and never push to someone else’s branch.',
+		],
+	},
+	schedule: { when: 'Daily 02:00 AM', label: 'nightly drift check', cron: 'cron 0 2 * * *', zone: 'UTC' },
+	trigger: { integrationId: 'github', label: 'GitHub pull request', conditions: ['path=migrations/**', 'base=main'] },
+	channelsNotice: 'Set an agent identity to configure channels',
+	memory: ['schema-conventions', 'drift-history'],
+	tools: [
+		{ id: 'github-pr', label: 'GitHub Read pull request #427', integrationId: 'github' },
+		{ id: 'github-migrations', label: 'GitHub Read migrations on main', integrationId: 'github' },
+		{ id: 'postgres-schema', label: 'Postgres List schemas', integrationId: 'postgres' },
+		{ id: 'postgres-grants', label: 'Postgres Read grants and RLS policies', integrationId: 'postgres' },
+		{ id: 'dbt-sources', label: 'dbt Read sources', integrationId: 'dbt' },
+	],
+	subagents: ['migration_reader', 'drift_differ', 'grant_auditor', 'lock_checker'],
+	skills: ['schema-migration', 'sql-review'],
+};
+
+const SCHEMA_STEWARD_RUN: AgentRunScript = {
+	command: { verb: 'Run', skill: 'migration-review', scope: 'for PR #427' },
+	reasoning: {
+		seconds: 16,
+		text: 'PR #427 adds a migration that creates three billing_ tables. Every other billing table lives in the billing schema with RLS on and only billing_service granted; if these land in public, app_user can read invoices across tenants. Check main and production for the convention first, then ask, since where the tables live is the author’s call.',
+	},
+	plan: [
+		'Read the migration in PR #427',
+		'Compare with main and production',
+		'Check schemas, grants and RLS',
+		'Review locks and backfills',
+		'Write up the drift',
+		'Ask where the tables belong',
+	],
+	paragraphs: [
+		'Reviewing PR #427 (feat/usage-billing) against the schema rules. Its migration, 0142_usage_billing.sql, creates three tables and grants nothing explicitly, so where they land is the first thing to check.',
+		'Main and production matched at last night’s drift check, so anything new comes from this branch. The preview database already has the migration applied, which shows the real result instead of a guess from the SQL.',
+	],
+	steps: SCHEMA_STEWARD.tools,
+	query: {
+		name: 'billing_tables.sql',
+		sql: [
+			'select c.relname        as table_name,',
+			'       n.nspname        as schema,',
+			'       c.relrowsecurity as rls,',
+			"       string_agg(g.grantee, ', ') as grants",
+			'from pg_class c',
+			'join pg_namespace n on n.oid = c.relnamespace',
+			'left join information_schema.role_table_grants g',
+			'  on g.table_schema = n.nspname and g.table_name = c.relname',
+			"where c.relkind = 'r'",
+			"  and (c.relname like 'billing_%' or n.nspname = 'billing')",
+			'group by 1, 2, 3',
+			'order by 2 desc, 1;',
+		].join('\n'),
+		columns: ['Table', 'Schema', 'RLS', 'Grants'],
+		rows: [
+			['billing_credits', 'public', 'off', 'app_user'],
+			['billing_invoices', 'public', 'off', 'app_user'],
+			['billing_line_items', 'public', 'off', 'app_user'],
+			['payment_methods', 'billing', 'on', 'billing_service'],
+			['subscriptions', 'billing', 'on', 'billing_service'],
+		],
+		caption: '3 of 5 billing tables outside billing · 5 rows · 94 ms',
+	},
+	groups: [
+		{ id: 'subagents', label: 'Sub-agents', items: SCHEMA_STEWARD.subagents },
+		{ id: 'skills', label: 'Skills', items: SCHEMA_STEWARD.skills },
+	],
+	findings: {
+		paragraphs: [
+			'Three new tables, billing_invoices, billing_line_items and billing_credits, land in public with RLS off and a grant to app_user. The other billing tables live in billing with RLS on, so as written any signed-in user could read every tenant’s invoices.',
+			'The rest of the migration is safe: no locks on existing tables and no backfill. Moving the tables is a two-line change, but it changes what the app queries, so it is Leo’s call where they belong.',
+		],
+		sources: [
+			{ title: 'PR #427', description: 'GitHub · feat/usage-billing, 0142_usage_billing.sql' },
+			{ title: 'Schema conventions', description: 'Notion · Data platform / Schemas' },
+			{ title: 'Preview database', description: 'Postgres · pr-427 branch, migrated 08:51 UTC' },
+		],
+	},
+	question: {
+		title: 'Which schema should own the new billing tables?',
+		questions: [
+			{
+				id: 'owner-schema',
+				question: 'Where should billing_invoices, billing_line_items and billing_credits live?',
+				options: [
+					{
+						id: 'billing',
+						label: 'Move them to billing',
+						reply: 'Moving all three to billing, next to subscriptions and payment_methods. The comment on #427 has the edited migration ready to commit.',
+					},
+					{
+						id: 'public',
+						label: 'Keep them in public',
+						reply: 'Keeping them in public as Leo wrote them. The comment still asks for RLS, since app_user can read every row as it stands.',
+					},
+					{
+						id: 'usage-billing',
+						label: 'New usage_billing schema',
+						reply: 'Proposing a usage_billing schema with its own service role. It is a bigger change, so it goes on #427 as a suggestion.',
+					},
+				],
+			},
+			{
+				id: 'rls',
+				question: 'Turn on row-level security in the same migration?',
+				options: [
+					{ id: 'same-pr', label: 'Yes, in this PR', reply: 'RLS goes into 0142 itself, so the tables never exist without it.' },
+					{
+						id: 'follow-up',
+						label: 'In a follow-up PR',
+						reply: 'Filed the RLS work in Linear and linked it from #427, so it cannot merge unnoticed.',
+					},
+				],
+			},
+		],
+		steps: [
+			{ id: 'github-comment', label: 'GitHub Comment on PR #427', integrationId: 'github' },
+			{ id: 'linear-issue', label: 'Linear Create issue · Data platform', integrationId: 'linear' },
+		],
+		answeredText:
+			'Commented on PR #427 with the change and filed it in Linear · Data platform. Tonight’s drift check flags it again if it merges as is.',
+		skippedText: 'Left PR #427 without a comment. The three tables stay on tonight’s drift report until someone picks a schema.',
+	},
+	thinking: { seconds: 52, tokens: 3000 },
+};
+
+const METRICS_LIBRARIAN: AgentBlueprint = {
+	id: 'metrics-librarian',
+	name: 'Metrics Librarian',
+	title: 'Metrics Librarian Agent',
+	tagline: 'One name for every metric, the one finance uses',
+	instructions: {
+		heading: 'Metrics Librarian Agent',
+		meta: 'Full system prompt. Version 1.2 · owner: Mira · last change: old names kept as aliases for 90 days.',
+		paragraphs: [
+			'You are the Metrics Librarian. You keep metric names in dbt, Metabase and Notion matching the finance glossary, which is the source of truth.',
+			'When the glossary changes, rename the dbt metric to the glossary term and keep the old name as an alias for 90 days. Count every Metabase question on the old name first.',
+			'A rename never changes what a metric counts. If the glossary definition differs from dbt, stop and raise it in #data-team instead of renaming.',
+			'Open renames as pull requests and record each one in Metrics / Glossary.',
+		],
+	},
+	schedule: { when: 'Fri 04:00 PM', label: 'weekly glossary sync', cron: 'cron 0 16 * * 5', zone: 'UTC' },
+	trigger: { integrationId: 'notion', label: 'Notion page updated', conditions: ['page=Finance / Glossary', 'status=approved'] },
+	channelsNotice: 'Set an agent identity to configure channels',
+	memory: ['metric-definitions', 'finance-glossary'],
+	tools: [
+		{ id: 'notion-glossary', label: 'Notion Read Finance / Glossary', integrationId: 'notion' },
+		{ id: 'dbt-metrics', label: 'dbt Read metric definitions', integrationId: 'dbt' },
+		{ id: 'metabase-questions', label: 'Metabase List questions by metric', integrationId: 'metabase' },
+		{ id: 'github-pr', label: 'GitHub Open PR · metric renames', integrationId: 'github' },
+		{ id: 'notion-metrics', label: 'Notion Update Metrics / Glossary', integrationId: 'notion' },
+	],
+	subagents: ['glossary_reader', 'name_differ', 'usage_counter', 'alias_writer'],
+	skills: ['metric-definitions', 'glossary-sync'],
+};
+
+const METRICS_LIBRARIAN_RUN: AgentRunScript = {
+	command: { verb: 'Run', skill: 'glossary-sync', scope: 'for Sep 23' },
+	reasoning: {
+		seconds: 9,
+		text: 'Finance approved the new glossary, which is what the paused sync was waiting on. Three dbt metric names no longer match it. A rename is safe only if nothing downstream breaks, so count every Metabase question on the old names, keep aliases, and confirm each definition is unchanged before touching a name.',
+	},
+	plan: [
+		'Read the approved glossary',
+		'Compare dbt metric names',
+		'Count questions on each old name',
+		'Rename with 90-day aliases',
+		'Update Metrics / Glossary',
+	],
+	paragraphs: [
+		'Syncing metric names with the finance glossary Ana approved on Sep 23. Reading the glossary first, then the five revenue metrics in dbt it covers, so each name is compared with the term finance signs off on.',
+		'Renames are cheap in dbt and expensive in dashboards. Every Metabase question on an old name gets counted before anything changes, and the old names stay as aliases for 90 days so nothing goes blank.',
+	],
+	steps: METRICS_LIBRARIAN.tools,
+	query: {
+		name: 'metric_names.sql',
+		sql: [
+			'select m.name      as dbt_metric,',
+			'       g.term      as glossary_term,',
+			'       count(q.id) as questions,',
+			"       case when m.name = g.term then 'match' else 'rename' end as status",
+			'from governance.dbt_metrics m',
+			'join governance.finance_glossary g using (metric_key)',
+			'left join governance.metabase_questions q using (metric_key)',
+			'group by 1, 2',
+			'order by status desc, questions desc;',
+		].join('\n'),
+		columns: ['dbt metric', 'Glossary term', 'Questions', 'Status'],
+		rows: [
+			['nrr', 'net_revenue_retention', '14', 'Rename'],
+			['gross_churn', 'gross_revenue_churn', '9', 'Rename'],
+			['active_customers', 'paying_accounts', '6', 'Rename'],
+			['mrr', 'mrr', '31', 'Match'],
+			['arr', 'arr', '12', 'Match'],
+		],
+		caption: '3 renames · 29 questions affected · 5 rows · 141 ms',
+	},
+	groups: [
+		{ id: 'subagents', label: 'Sub-agents', items: METRICS_LIBRARIAN.subagents },
+		{ id: 'skills', label: 'Skills', items: METRICS_LIBRARIAN.skills },
+	],
+	findings: {
+		paragraphs: [
+			'Renamed 3 metrics to match the finance glossary: nrr, gross_churn and active_customers are now net_revenue_retention, gross_revenue_churn and paying_accounts in PR #431. The old names stay as aliases until Dec 22, so all 29 Metabase questions keep working.',
+			'Each glossary term has the same definition as the metric it replaces, so no number changes. Metrics / Glossary in Notion lists the old names under each term until the aliases drop.',
+		],
+		sources: [
+			{ title: 'Finance glossary', description: 'Notion · Finance / Glossary, approved Sep 23' },
+			{ title: 'PR #431', description: 'GitHub · Rename 3 metrics to glossary terms' },
+			{ title: 'Metabase', description: '29 questions on the renamed metrics' },
+		],
+	},
+	thinking: { seconds: 41, tokens: 2300 },
+};
+
+const FORECAST_PLANNER: AgentBlueprint = {
+	id: 'forecast-planner',
+	name: 'Forecast Planner',
+	title: 'Forecast Planner Agent',
+	tagline: 'Forecasts MRR with a range, every month',
+	instructions: {
+		heading: 'Forecast Planner Agent',
+		meta: 'Full system prompt. Version 3.1 · owner: Sana · last change: signed renewals treated as kept.',
+		paragraphs: [
+			'You are the Forecast Planner. On the 1st of each month you forecast MRR to the end of the next quarter, month by month, with an 80% range and the gap to the FY26 plan.',
+			'Fit on MRR history as metric-definitions defines it. Count pipeline at stage-weighted odds and treat signed renewals as kept, whatever Stripe shows.',
+			'Explain every move from last month’s forecast larger than $5k, and name the cohort or deal behind it.',
+			'Post to #finance. Never change the plan, and never share a forecast outside finance without approval.',
+		],
+	},
+	schedule: { when: '1st 08:00 AM', label: 'monthly forecast', cron: 'cron 0 8 1 * *', zone: 'UTC' },
+	trigger: { integrationId: 'hubspot', label: 'HubSpot deal stage', conditions: ['stage=closed_won', 'amount>50000'] },
+	channelsNotice: 'Set an agent identity to configure channels',
+	memory: ['metric-definitions', 'fy26-plan'],
+	tools: [
+		{ id: 'snowflake-history', label: 'Snowflake Query mrr_history', integrationId: 'snowflake' },
+		{ id: 'hubspot-pipeline', label: 'HubSpot Read pipeline', integrationId: 'hubspot' },
+		{ id: 'stripe-renewals', label: 'Stripe List upcoming renewals', integrationId: 'stripe' },
+		{ id: 'google-drive-plan', label: 'Google Drive Read FY26 operating plan', integrationId: 'google-drive' },
+		{ id: 'notion-pricing', label: 'Notion Read Pricing log', integrationId: 'notion' },
+	],
+	subagents: ['history_loader', 'pipeline_weigher', 'scenario_builder', 'variance_explainer'],
+	skills: ['metric-definitions', 'scenario-modeling', 'board-report'],
+};
+
+const FORECAST_PLANNER_RUN: AgentRunScript = {
+	command: { verb: 'Run', skill: 'monthly-forecast', scope: 'for Oct–Dec' },
+	reasoning: {
+		seconds: 18,
+		text: 'Last month put Q4 exit MRR at $1.46M, 2.8% above plan. Since then Halcyon moved to annual invoicing and the 2025-Q2 Team cohort started contracting. Halcyon’s renewal is signed, so it should not move the forecast; the contraction should, if it holds. Refit on actuals through Sep 23, weigh the pipeline, then compare with the plan month by month.',
+	},
+	plan: [
+		'Load MRR history and the FY26 plan',
+		'Pull pipeline and renewals',
+		'Fit the forecast by month',
+		'Run scenarios and explain variance',
+		'Write the forecast for #finance',
+	],
+	paragraphs: [
+		'Starting the monthly forecast for Oct–Dec. Loading MRR history through Sep 23 and the FY26 operating plan, so each month is set against the number finance committed to, not against last month’s forecast.',
+		'metric-definitions spreads annual plans monthly, so Halcyon’s move to annual invoicing nets to zero here. Pipeline counts only at stage-weighted odds, and renewals signed in HubSpot are treated as kept.',
+	],
+	steps: FORECAST_PLANNER.tools,
+	query: {
+		name: 'mrr_forecast.sql',
+		sql: [
+			'select month,',
+			'       forecast_mrr,',
+			'       lower_80,',
+			'       upper_80,',
+			'       forecast_mrr / plan_mrr - 1 as vs_plan',
+			'from planning.mrr_forecast',
+			'where run_date = current_date',
+			'order by month;',
+		].join('\n'),
+		columns: ['Month', 'Forecast MRR', '80% range', 'vs plan'],
+		rows: [
+			['Sep', '$1.400M', '$1.394M–$1.406M', '+2.0%'],
+			['Oct', '$1.412M', '$1.391M–$1.433M', '+1.7%'],
+			['Nov', '$1.431M', '$1.395M–$1.467M', '+1.9%'],
+			['Dec', '$1.452M', '$1.401M–$1.503M', '+2.3%'],
+		],
+		caption: 'Dec exit $1.452M (±3.5%) · 4 rows · 1.2 s',
+	},
+	groups: [
+		{ id: 'subagents', label: 'Sub-agents', items: FORECAST_PLANNER.subagents },
+		{ id: 'skills', label: 'Skills', items: FORECAST_PLANNER.skills },
+	],
+	findings: {
+		paragraphs: [
+			'Q4 exit MRR is forecast at $1.452M (80% range $1.401M–$1.503M), 2.3% above plan and $8k below last month’s $1.46M. The $8k is the Team-plan contraction in the 2025-Q2 cohort, carried forward at its September rate.',
+			'Halcyon nets to zero: its renewal is signed and annual billing is spread monthly. Weighted enterprise pipeline is $188k new MRR across 14 deals, unchanged since Sep 1, so the range widens with time, not with new risk.',
+		],
+		sources: [
+			{ title: 'mrr_history', description: 'Snowflake · finance.mrr_history, through Sep 23' },
+			{ title: 'Q4 pipeline', description: 'HubSpot · 14 open deals, stage-weighted' },
+			{ title: 'FY26 operating plan', description: 'Google Drive · Finance / Plans' },
+		],
+	},
+	thinking: { seconds: 74, tokens: 4100 },
+};
+
+export const DEMO_AGENT_DETAILS: AgentDetail[] = [
+	{ agent: CHURN_RADAR, run: CHURN_RADAR_RUN },
+	{ agent: DATA_QUALITY_MONITOR, run: DATA_QUALITY_MONITOR_RUN },
+	{ agent: SCHEMA_STEWARD, run: SCHEMA_STEWARD_RUN },
+	{ agent: METRICS_LIBRARIAN, run: METRICS_LIBRARIAN_RUN },
+	{ agent: FORECAST_PLANNER, run: FORECAST_PLANNER_RUN },
+];
diff --git a/packages/ui/src/components/agents-builder/fixtures.ts b/packages/ui/src/components/agents-builder/fixtures.ts
index 7af83ce4..d870d513 100644
--- a/packages/ui/src/components/agents-builder/fixtures.ts
+++ b/packages/ui/src/components/agents-builder/fixtures.ts
@@ -1,8 +1,10 @@
 import { DEMO_FALLBACK_REPLY, DEMO_FOLLOW_UP_REPLY, DEMO_RECOMMENDATIONS } from './demo-conversations';
 import { DEMO_INBOX } from './demo-inbox';
+import { DEMO_AGENT_DETAILS } from './demo-agents';
 import { DEMO_CLOCK, DEMO_SCHEDULES } from './demo-schedules';
 import { DEMO_INTEGRATIONS } from './demo-integrations';
 import type {
+	AgentProject,
 	AgentBlueprint,
 	AgentRunScript,
 	AgentsBuilderData,
@@ -14,7 +16,7 @@ import type {
 	StarterPack,
 } from './types';
 
-export { DEMO_CLOCK, DEMO_FALLBACK_REPLY, DEMO_FOLLOW_UP_REPLY, DEMO_INBOX, DEMO_INTEGRATIONS, DEMO_RECOMMENDATIONS, DEMO_SCHEDULES };
+export { DEMO_AGENT_DETAILS, DEMO_CLOCK, DEMO_FALLBACK_REPLY, DEMO_FOLLOW_UP_REPLY, DEMO_INBOX, DEMO_INTEGRATIONS, DEMO_RECOMMENDATIONS, DEMO_SCHEDULES };
 
 // Demo workspace for docs, Storybook, and local exploration. Replace every
 // collection with host data; nothing here is fetched or persisted.
@@ -119,20 +121,26 @@ export const DEMO_MODELS: ModelOption[] = [
 	},
 ];
 
+export const DEMO_PROJECTS: AgentProject[] = [
+	{ id: 'revenue', name: 'Revenue' },
+	{ id: 'data-platform', name: 'Data platform' },
+	{ id: 'governance', name: 'Governance' },
+];
+
 export const DEMO_AGENTS: AgentSummary[] = [
-	{ id: 'revenue-analyst', name: 'Revenue Analyst', running: true },
-	{ id: 'churn-radar', name: 'Churn Radar' },
-	{ id: 'data-quality-monitor', name: 'Data Quality Monitor', running: true },
-	{ id: 'schema-steward', name: 'Schema Steward' },
-	{ id: 'metrics-librarian', name: 'Metrics Librarian' },
-	{ id: 'forecast-planner', name: 'Forecast Planner' },
-	{ id: 'board-report-writer', name: 'Board Report Writer' },
-	{ id: 'query-optimizer', name: 'Query Optimizer' },
-	{ id: 'cohort-builder', name: 'Cohort Builder' },
-	{ id: 'access-auditor', name: 'Access Auditor' },
-	{ id: 'pipeline-doctor', name: 'Pipeline Doctor' },
-	{ id: 'dashboard-curator', name: 'Dashboard Curator' },
-	{ id: 'anomaly-watch', name: 'Anomaly Watch' },
+	{ 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: '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' },
+	{ id: 'query-optimizer', projectId: 'data-platform', name: 'Query Optimizer' },
+	{ id: 'cohort-builder', projectId: 'revenue', name: 'Cohort Builder' },
+	{ id: 'access-auditor', projectId: 'governance', name: 'Access Auditor' },
+	{ id: 'pipeline-doctor', projectId: 'data-platform', name: 'Pipeline Doctor' },
+	{ id: 'dashboard-curator', projectId: 'governance', name: 'Dashboard Curator' },
+	{ id: 'anomaly-watch', projectId: 'data-platform', name: 'Anomaly Watch' },
 ];
 
 export const DEMO_SKILLS: Skill[] = [
@@ -352,6 +360,7 @@ export const AGENTS_BUILDER_DEMO: AgentsBuilderData = {
 	categories: DEMO_CATEGORIES,
 	featuredIntegrationIds: ['postgres', 'snowflake', 'stripe', 'dbt', 'hubspot', 'slack', 'notion', 'github'],
 	agents: DEMO_AGENTS,
+	projects: DEMO_PROJECTS,
 	inbox: DEMO_INBOX,
 	schedules: DEMO_SCHEDULES,
 	clock: DEMO_CLOCK,
@@ -362,6 +371,7 @@ export const AGENTS_BUILDER_DEMO: AgentsBuilderData = {
 	followUpReply: DEMO_FOLLOW_UP_REPLY,
 	agent: DEMO_AGENT,
 	run: DEMO_RUN,
+	agentDetails: DEMO_AGENT_DETAILS,
 	heroHighlights: DEMO_HERO_HIGHLIGHTS,
 	usage: { percent: 80 },
 };
diff --git a/packages/ui/src/components/agents-builder/index.ts b/packages/ui/src/components/agents-builder/index.ts
index d115bdaa..50b562a5 100644
--- a/packages/ui/src/components/agents-builder/index.ts
+++ b/packages/ui/src/components/agents-builder/index.ts
@@ -3,6 +3,7 @@
 
 export type {
 	AgentBlueprint,
+	AgentDetail,
 	AgentSchedule,
 	AgentDraft,
 	AgentRunScript,
@@ -10,6 +11,8 @@ export type {
 	AgentsBuilderData,
 	AgentsBuilderTheme,
 	AgentsBuilderView,
+	AgentProject,
+	AgentStatus,
 	AgentSummary,
 	AskBeatOption,
 	AskBeatQuestion,
@@ -27,6 +30,8 @@ export type {
 	ModelOption,
 	PromptPart,
 	RunApproval,
+	RunFailure,
+	RunQuestion,
 	RunQuery,
 	RunSource,
 	ScheduleRunStatus,
@@ -44,9 +49,9 @@ export { InboxView } from './inbox-view';
 export { SchedulesView } from './schedules-view';
 export { IntegrationsView } from './integrations-view';
 export { SkillsView } from './skills-view';
-export { AgentView } from './agent-view';
+export { AgentView, type AgentViewProps } from './agent-view';
 export { AgentCanvas } from './agent-canvas';
-export { AgentRunPanel } from './agent-run-panel';
+export { AgentRunPanel, type AgentRunPanelProps, type RunPhase } from './agent-run-panel';
 export { ConnectIntegrationDialog, type ConnectIntegrationDialogProps } from './connect-integration-dialog';
 export { IntegrationMark, type IntegrationMarkProps } from './integration-mark';
 export { Mascot } from './mascot';
@@ -70,6 +75,7 @@ export {
 export {
 	AGENTS_BUILDER_DEMO,
 	DEMO_AGENT,
+	DEMO_AGENT_DETAILS,
 	DEMO_AGENTS,
 	DEMO_CLOCK,
 	DEMO_CATEGORIES,
diff --git a/packages/ui/src/components/agents-builder/sidebar.tsx b/packages/ui/src/components/agents-builder/sidebar.tsx
index 73d6f80a..9b177477 100644
--- a/packages/ui/src/components/agents-builder/sidebar.tsx
+++ b/packages/ui/src/components/agents-builder/sidebar.tsx
@@ -5,6 +5,7 @@ import {
 	Bot,
 	CalendarClock,
 	ChartColumn,
+	ChevronRight,
 	GraduationCap,
 	Inbox,
 	type LucideIcon,
@@ -22,42 +23,167 @@ import { initials } from '../../lib/initials';
 import { cn } from '../../lib/utils';
 import { TextShimmer } from '../ai/text-shimmer';
 import { Kbd, KbdGroup } from '../kbd';
-import { NavIcon, NavRow } from '../workspace-kit/nav';
-import { SearchField, TooltipIconButton } from '../workspace-kit/primitives';
+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 { AppPicker } from './app-picker';
 import { useAgentsBuilder } from './agents-builder-context';
 import { IntegrationMark } from './integration-mark';
-import type { AgentSummary } from './types';
+import type { AgentProject, AgentSummary } from './types';
 import { WorkspaceMenu } from './workspace-menu';
 
 /** Agents listed before "More agents". */
 const SIDEBAR_AGENT_LIMIT = 6;
 
 /**
- * Agent roster label. Focus reads through weight and colour alone; a running
- * agent's name shimmers, so activity never needs a coloured dot.
+ * 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.
  */
 function AgentLabel({ agent, open }: { agent: AgentSummary; open: boolean }) {
-	return agent.running ? (
+	const status = agentStatus(agent);
+	const phrase = statusPhrase(agent);
+	// Waiting on you lifts the shimmering name a weight, like an unread one.
+	const weight = open || isWaitingOnYou(status) || agent.unread ? 'font-medium' : 'font-normal';
+	return (
 		<>
-			<TextShimmer className={cn('block truncate', open ? 'font-medium' : 'font-normal')}>{agent.name}</TextShimmer>
-			<span className="sr-only">, running</span>
+			{isInFlight(status) ? (
+				<TextShimmer className={cn('block truncate', weight)}>{agent.name}</TextShimmer>
+			) : (
+				<span className={cn(weight, (agent.unread || status === 'failed') && 'text-foreground')}>{agent.name}</span>
+			)}
+			{phrase ? <span className="sr-only">, {phrase.toLowerCase()}</span> : null}
 		</>
-	) : (
-		agent.name
 	);
 }
 
-/** Collapsed-rail stand-in for an agent: its initials, styled like the label. */
+/** 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 }) {
 	const text = initials(agent.name);
+	const status = agentStatus(agent);
+	const strong = open || isWaitingOnYou(status) || agent.unread;
 	return (
-		<span aria-hidden="true" className="grid size-5 shrink-0 place-items-center text-[0.6875rem] tracking-tight tabular-nums">
-			{text === null ? <Bot className="size-3.5" /> : agent.running ? <TextShimmer className={open ? 'font-semibold' : 'font-medium'}>{text}</TextShimmer> : text}
+		<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',
+			)}
+		>
+			{text === null ? (
+				<Bot className="size-3.5" />
+			) : isInFlight(status) ? (
+				<TextShimmer className={strong ? 'font-semibold' : 'font-medium'}>{text}</TextShimmer>
+			) : (
+				text
+			)}
 		</span>
 	);
 }
 
+/**
+ * Tooltip detail. Expanded, it leads with the full name, since a tooltip
+ * replaces the truncation title; the rail's label already names both.
+ */
+function AgentTip({ agent, collapsed }: { agent: AgentSummary; collapsed: boolean }) {
+	if (collapsed) return agent.statusNote ?? null;
+	return (
+		<>
+			<span className="block font-medium">
+				<bdi>{agent.name}</bdi>
+			</span>
+			<span className="block text-muted-foreground">{statusPhrase(agent)}</span>
+			{agent.statusNote ? <span className="line-clamp-3 text-pretty text-muted-foreground">{agent.statusNote}</span> : null}
+		</>
+	);
+}
+
+/** Agents an open project lists before its "Show N more" row. */
+const PROJECT_AGENT_LIMIT = 4;
+
+/** A project shows open by default when something in it is happening or open. */
+function isLiveProject(agents: AgentSummary[], openAgentId: string | null) {
+	return agents.some((agent) => agent.id === openAgentId || agent.unread || agentStatus(agent) !== 'idle');
+}
+
+/**
+ * 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".
+ */
+function ProjectGroup({
+	project,
+	agents,
+	openAgentId,
+	renderAgent,
+}: {
+	project: AgentProject;
+	agents: AgentSummary[];
+	/** The agent on screen. Its project starts open, and unfolds whenever it is opened from elsewhere. */
+	openAgentId: string | null;
+	renderAgent: (agent: AgentSummary) => React.ReactNode;
+}) {
+	const [open, setOpen] = React.useState(() => isLiveProject(agents, openAgentId));
+	const [revealedFor, setRevealedFor] = React.useState(openAgentId);
+	if (openAgentId !== revealedFor) {
+		setRevealedFor(openAgentId);
+		if (agents.some((agent) => agent.id === openAgentId)) setOpen(true);
+	}
+	const [showAll, setShowAll] = React.useState(false);
+	const listId = React.useId();
+	const shown = showAll ? agents : visibleRoster(agents, PROJECT_AGENT_LIMIT);
+	const hidden = agents.length - shown.length;
+	const urgent = mostUrgentTag(agents);
+	const waiting = agents.filter((agent) => needsAttention(agentStatus(agent))).length;
+	return (
+		<li>
+			<button
+				type="button"
+				aria-expanded={open}
+				aria-controls={open ? listId : undefined}
+				onClick={() => setOpen((value) => !value)}
+				// Instant like every sidebar row: a project is folded and unfolded far too often to animate.
+				className={cn('flex h-8 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-start text-sm text-sidebar-foreground hover:bg-overlay-hover pointer-coarse:h-10', focusRingClass)}
+			>
+				<ChevronRight aria-hidden="true" className={cn('size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100', open && 'rotate-90 rtl:rotate-90')} />
+				<span title={project.name} className="min-w-0 flex-1 truncate">
+					<bdi>{project.name}</bdi>
+					{waiting > 0 ? (
+	<span className="sr-only">
+		, {formatCount(waiting)} {waiting === 1 ? 'needs' : 'need'} you
+	</span>
+) : null}
+				</span>
+				{open ? null : urgent ? (
+					<AgentStatusTag status={urgent} />
+				) : (
+					<span aria-hidden="true" className="text-xs text-muted-foreground tabular-nums">
+						{formatCount(agents.length)}
+					</span>
+				)}
+			</button>
+			{open ? (
+				// The rail sits on the chevron's centre line (8px padding + half of 14px), so names line up with the project's.
+				<ul id={listId} aria-label={project.name} className="ms-[15px] mt-0.5 flex flex-col gap-0.5 border-s border-sidebar-border ps-1.5">
+					{shown.map(renderAgent)}
+					{hidden > 0 ? (
+						<NavRow
+							label={`Show ${formatCount(hidden)} more`}
+							// Smaller and quieter than an agent's name, so it never reads as one.
+							labelNode={<span className="text-xs text-subtle-foreground">Show {formatCount(hidden)} more</span>}
+							collapsed={false}
+							muted
+							leading={null}
+							onClick={() => setShowAll(true)}
+						/>
+					) : null}
+				</ul>
+			) : null}
+		</li>
+	);
+}
+
 type AgentsBuilderSidebarProps = {
 	/** Icon-rail mode. Ignored in the drawer, which is always expanded. */
 	collapsed?: boolean;
@@ -75,7 +201,7 @@ type AgentsBuilderSidebarProps = {
  * expands it and focuses search.
  */
 function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedChange, drawer = false, onNavigate, className }: AgentsBuilderSidebarProps) {
-	const { data, view, setView, emit, integration, openAgent } = useAgentsBuilder();
+	const { data, agents, currentAgent, view, setView, emit, integration, openAgent } = useAgentsBuilder();
 	const asideRef = React.useRef<HTMLElement>(null);
 	const searchRef = React.useRef<HTMLInputElement>(null);
 	const [query, setQuery] = React.useState('');
@@ -83,6 +209,21 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 	const headingId = React.useId();
 	const connectId = React.useId();
 	const needsYou = data.inbox.filter((thread) => thread.status === 'needs-you').length;
+	const roster = visibleRoster(agents, SIDEBAR_AGENT_LIMIT);
+	const hiddenAgents = agents.length - roster.length;
+	// Grouped only in the expanded sidebar; the icon rail keeps the flat roster, where a heading has no room.
+	const projects = collapsed || !data.projects?.length ? null : data.projects;
+	const projectAgents = React.useMemo(() => {
+		const byProject = new Map<string, AgentSummary[]>((data.projects ?? []).map((project) => [project.id, []]));
+		const loose: AgentSummary[] = [];
+		for (const agent of agents) {
+			const group = agent.projectId ? byProject.get(agent.projectId) : undefined;
+			if (group) group.push(agent);
+			else loose.push(agent);
+		}
+		return { byProject, loose };
+	}, [agents, data.projects]);
+	const openAgentId = view === 'agent' ? currentAgent.agent.id : null;
 
 	const select = (action: () => void) => () => {
 		action();
@@ -105,6 +246,28 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 		return () => document.removeEventListener('keydown', onKeyDown);
 	}, [focusSearch]);
 
+	const agentRow = (agent: AgentSummary) => {
+		const open = agent.id === openAgentId;
+		const status = agentStatus(agent);
+		return (
+			<NavRow
+				key={agent.id}
+				label={agentLabel(agent)}
+				labelNode={<AgentLabel agent={agent} open={open} />}
+				collapsed={collapsed}
+				active={open}
+				muted={!agent.unread && status !== 'failed'}
+				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}
+				onClick={select(() => openAgent(agent.id))}
+			/>
+		);
+	};
+
 	const nav = (label: string, icon: LucideIcon, onClick: () => void, active = false) => (
 		<NavRow
 			key={label}
@@ -216,7 +379,7 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 						<div className={cn('flex h-7 items-center gap-2 ps-2', collapsed && 'justify-center ps-0')}>
 							{collapsed ? null : (
 								<h2 id={headingId} className="flex-1 truncate text-xs text-muted-foreground">
-									Agents
+									{projects ? 'Projects' : 'Agents'}
 								</h2>
 							)}
 							<TooltipIconButton label="New agent" side={collapsed ? 'right' : 'top'} size="sm" onClick={select(() => emit({ type: 'new-agent' }))}>
@@ -228,24 +391,36 @@ function AgentsBuilderSidebar({ collapsed: collapsedProp = false, onCollapsedCha
 							aria-label={collapsed ? 'Agents' : undefined}
 							className="flex flex-col gap-0.5"
 						>
-							{data.agents.slice(0, SIDEBAR_AGENT_LIMIT).map((agent) => {
-								const open = view === 'agent' && agent.id === data.agent.id;
-								return (
-									<NavRow
-										key={agent.id}
-										label={agent.running ? `${agent.name}, running` : agent.name}
-										labelNode={<AgentLabel agent={agent} open={open} />}
-										collapsed={collapsed}
-										active={open}
-										muted
-										leading={
-											collapsed ? <AgentMonogram agent={agent} open={open} /> : <span aria-hidden="true" className="size-3.5 shrink-0" />
-										}
-										onClick={select(() => openAgent(agent.id))}
-									/>
-								);
-							})}
-							{nav('More agents', Plus, () => emit({ type: 'navigate', target: 'more-agents' }))}
+							{projects ? (
+								<>
+									{projects.map((project) => {
+										const members = projectAgents.byProject.get(project.id) ?? [];
+										return (
+											<ProjectGroup key={project.id} project={project} agents={members} openAgentId={openAgentId} renderAgent={agentRow} />
+										);
+									})}
+									{visibleRoster(projectAgents.loose, SIDEBAR_AGENT_LIMIT).map(agentRow)}
+								</>
+							) : (
+								roster.map(agentRow)
+							)}
+							<NavRow
+								label={projects ? 'All agents' : hiddenAgents > 0 ? `More agents, ${formatCount(hiddenAgents)} more` : 'More agents'}
+								labelNode={
+									projects ? (
+										'All agents'
+									) : (
+										<>
+											More agents
+											{hiddenAgents > 0 ? <span className="sr-only">, {formatCount(hiddenAgents)} more</span> : null}
+										</>
+									)
+								}
+								collapsed={collapsed}
+								leading={<NavIcon icon={Plus} />}
+								trailing={!projects && hiddenAgents > 0 ? <NavCount value={hiddenAgents} /> : null}
+								onClick={select(() => emit({ type: 'navigate', target: 'more-agents' }))}
+							/>
 						</ul>
 					</div>
 				</nav>
diff --git a/packages/ui/src/components/agents-builder/types.ts b/packages/ui/src/components/agents-builder/types.ts
index 0a1b4de9..6ca3dae4 100644
--- a/packages/ui/src/components/agents-builder/types.ts
+++ b/packages/ui/src/components/agents-builder/types.ts
@@ -38,11 +38,31 @@ export type IntegrationCategory = {
 	label: string;
 };
 
+/**
+ * The most urgent state across an agent's runs. Queued: about to start.
+ * Approval and input: a run is still open but paused on a person.
+ */
+export type AgentStatus = 'idle' | 'queued' | 'running' | 'approval' | 'input' | 'failed';
+
 export type AgentSummary = {
 	id: string;
 	name: string;
-	/** Running agents shimmer in the sidebar. */
+	/** Merged across the agent's runs by the host. Default `idle`. */
+	status?: AgentStatus;
+	/** A run finished since the agent was last opened. Cleared when the agent opens. */
+	unread?: boolean;
+	/** What the agent waits on or why it failed, shown in the row tooltip, e.g. "Post the summary to #revenue". */
+	statusNote?: string;
+	/** @deprecated Use `status: 'running'`. */
 	running?: boolean;
+	/** The project the agent belongs to. Agents without one list after the projects. */
+	projectId?: string;
+};
+
+/** A group of agents in the sidebar, e.g. a team or a product area. */
+export type AgentProject = {
+	id: string;
+	name: string;
 };
 
 export type SkillType = 'Analysis' | 'Modeling' | 'Governance' | 'Workflow';
@@ -153,6 +173,32 @@ export type RunApproval = {
 	skippedText: string;
 };
 
+export type RunQuestion = {
+	/** One line for the roster tooltip, e.g. "Which schema should own the billing tables?" */
+	title: string;
+	questions: {
+		id: string;
+		question: string;
+		/** `reply` is the agent's sentence for this choice; chosen replies are joined, and `answeredText` stands in when none has one. */
+		options: { id: string; label: string; reply?: string }[];
+	}[];
+	/** Tool calls made once answered. */
+	steps: ToolStep[];
+	answeredText: string;
+	skippedText: string;
+};
+
+export type RunFailure = {
+	/** The tool call that fails. Calls after it never run. */
+	stepId: string;
+	/** One line for the error block and the roster tooltip. */
+	message: string;
+	/** Raw error output, shown as a log excerpt. */
+	log?: string;
+	/** The retry succeeds, as if the cause was fixed. Default "Retry run". */
+	retryLabel?: string;
+};
+
 export type AgentRunScript = {
 	command: { verb: string; skill: string; scope: string };
 	/** Collapsed reasoning shown before the narration. */
@@ -166,6 +212,10 @@ export type AgentRunScript = {
 	findings?: { paragraphs: string[]; sources: RunSource[] };
 	/** Human-in-the-loop step that ends the run. */
 	approval?: RunApproval;
+	/** A question that ends the run instead of an approval. */
+	question?: RunQuestion;
+	/** Stops the run at one of its tool calls with an error. */
+	failure?: RunFailure;
 	thinking: { seconds: number; tokens: number };
 };
 
@@ -184,6 +234,12 @@ export type AgentBlueprint = {
 	skills: string[];
 };
 
+/** An agent the template can open on its own: its blueprint and its latest run. */
+export type AgentDetail = {
+	agent: AgentBlueprint;
+	run: AgentRunScript;
+};
+
 export type InboxChannel = 'sms' | 'email' | 'slack';
 
 /** Needs you: waiting on a person. Working: an agent is on it. Done: resolved. */
@@ -267,6 +323,8 @@ export type AgentsBuilderData = {
 	/** Integrations teased in the sidebar "Connect more apps" card. */
 	featuredIntegrationIds: string[];
 	agents: AgentSummary[];
+	/** Groups the sidebar roster by project. Without it the roster is one flat list. */
+	projects?: AgentProject[];
 	/** Agent-handled conversations for the Inbox view. */
 	inbox: InboxThread[];
 	schedules: AgentSchedule[];
@@ -279,8 +337,11 @@ export type AgentsBuilderData = {
 	fallbackReply: ConversationBeat[];
 	/** Reply to any follow-up after the first turn. */
 	followUpReply: ConversationBeat[];
+	/** The featured agent, opened by default. */
 	agent: AgentBlueprint;
 	run: AgentRunScript;
+	/** More agents the template opens itself; any other roster agent is handed to the host via `open-agent`. */
+	agentDetails?: AgentDetail[];
 	heroHighlights: HeroHighlight[];
 	usage: { percent: number };
 };
@@ -301,6 +362,10 @@ export type AgentsBuilderAction =
 	| { type: 'send-follow-up'; surface: 'run'; text: string }
 	| { type: 'stop-run' }
 	| { type: 'approve-run'; agentId: string; approved: boolean }
+	/** `answers` maps question ids to the chosen option ids; `null` when skipped. */
+	| { type: 'answer-run'; agentId: string; answers: Record<string, string[]> | null }
+	| { type: 'retry-run'; agentId: string }
+	| { type: 'start-run'; agentId: string }
 	| { type: 'send-reply'; threadId: string; text: string; drafted: boolean }
 	| { type: 'approve-thread-action'; threadId: string }
 	| { type: 'new-schedule' }
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 7d1eec7f..56365e4b 100644
--- a/packages/ui/src/components/agents-builder/use-agent-run.ts
+++ b/packages/ui/src/components/agents-builder/use-agent-run.ts
@@ -29,6 +29,10 @@ export type AgentRunState = {
 	sources: boolean;
 	/** The approval card is on screen, waiting on a person. */
 	approval: boolean;
+	/** The question card is on screen, waiting on a person. */
+	question: boolean;
+	/** Index of the tool call that failed and stopped the run. */
+	failedStep: number | null;
 	nodes: { tools: NodeStage; subagents: NodeStage; skills: NodeStage };
 	settled: boolean;
 };
@@ -65,6 +69,8 @@ const INITIAL: AgentRunState = {
 	typingFinding: null,
 	sources: false,
 	approval: false,
+	question: false,
+	failedStep: null,
 	nodes: { tools: 'absent', subagents: 'absent', skills: 'absent' },
 	settled: false,
 };
@@ -74,8 +80,9 @@ type Frame = { delay: number; apply: (state: AgentRunState) => AgentRunState };
 /**
  * The whole run as a flat list of timed patches: reasoning, narration, the
  * tool trace, the query and its rows, each group fanning out, the findings,
- * then the approval request. Canvas nodes move from absent to loading to
- * ready, and each phase ticks one plan item. Each frame waits `delay`.
+ * then the approval request or question. Canvas nodes move from absent to
+ * loading to ready, and each phase ticks one plan item. Each frame waits
+ * `delay`. A `failure` ends the timeline at its tool call.
  */
 export function buildRunTimeline(script: AgentRunScript): Frame[] {
 	const frames: Frame[] = [];
@@ -99,10 +106,16 @@ export function buildRunTimeline(script: AgentRunScript): Frame[] {
 
 	at((state) => ({ ...state, nodes: { ...state.nodes, tools: 'loading' } }), RUN_TIMING.stepIn);
 	at((state) => ({ ...state, shownSteps: script.steps.length }), RUN_TIMING.stepsSpin + RUN_TIMING.stepWork);
-	script.steps.forEach((_, index) => {
+	const failedStep = script.failure ? script.steps.findIndex((step) => step.id === script.failure!.stepId) : -1;
+	for (const [index] of script.steps.entries()) {
+		if (index === failedStep) {
+			at((state) => ({ ...state, failedStep: index, nodes: { ...state.nodes, tools: 'ready' } }), RUN_TIMING.stepMorph);
+			at((state) => ({ ...state, settled: true }));
+			return frames;
+		}
 		const last = index === script.steps.length - 1;
 		at((state) => ({ ...state, doneSteps: index + 1 }), RUN_TIMING.stepMorph + (last ? 0 : RUN_TIMING.stepWork));
-	});
+	}
 	at((state) => tick({ ...state, nodes: { ...state.nodes, tools: 'ready' } }), RUN_TIMING.handover);
 
 	if (script.query) {
@@ -139,6 +152,7 @@ export function buildRunTimeline(script: AgentRunScript): Frame[] {
 	});
 	if (script.findings) at((state) => tick({ ...state, sources: true }), RUN_TIMING.handover);
 	if (script.approval) at((state) => ({ ...state, approval: true }), RUN_TIMING.afterParagraph);
+	else if (script.question) at((state) => ({ ...state, question: true }), RUN_TIMING.afterParagraph);
 
 	at((state) => ({ ...state, settled: true }));
 	return frames;
@@ -150,15 +164,16 @@ function settledState(script: AgentRunScript): AgentRunState {
 
 /**
  * Replays an agent run from its script. `stop` settles everything at once.
+ * `paused` holds the run before its first frame, e.g. while it is queued.
  * Replace with live run events in production by producing the same state.
  */
-export function useAgentRun(script: AgentRunScript, { autoplay = true }: { autoplay?: boolean } = {}) {
+export function useAgentRun(script: AgentRunScript, { autoplay = true, paused = false }: { autoplay?: boolean; paused?: boolean } = {}) {
 	const timeline = React.useMemo(() => buildRunTimeline(script), [script]);
 	const [run, setRun] = React.useState(() =>
 		autoplay ? { state: INITIAL, next: 0 } : { state: settledState(script), next: timeline.length },
 	);
 
-	usePlaybackClock(timeline[run.next], false, () =>
+	usePlaybackClock(timeline[run.next], paused, () =>
 		setRun((current) => {
 			const frame = timeline[current.next];
 			return frame ? { state: frame.apply(current.state), next: current.next + 1 } : current;
diff --git a/packages/ui/src/components/workspace-kit/nav.tsx b/packages/ui/src/components/workspace-kit/nav.tsx
index 8470de9d..7e520e70 100644
--- a/packages/ui/src/components/workspace-kit/nav.tsx
+++ b/packages/ui/src/components/workspace-kit/nav.tsx
@@ -10,16 +10,37 @@ import { focusRingClass, TooltipIconButton } from './primitives';
 
 const ROW = cn('relative flex h-8 cursor-pointer items-center rounded-md text-start text-sm pointer-coarse:h-10', focusRingClass);
 
-/** Full-width row with a label, or a centred square matching the rail's icon buttons. */
-const rowShape = (collapsed: boolean) => (collapsed ? 'size-8 shrink-0 justify-center pointer-coarse:size-10' : 'w-full gap-2 px-2');
+/**
+ * Full-width row with a label, or a centred square matching the rail's icon
+ * buttons. A rail badge stretches the square into a capsule: the glyph, then
+ * the word, filling the rail's width so the word never overhangs the fill.
+ */
+const rowShape = (collapsed: boolean, badge = false) =>
+	collapsed
+		? badge
+			? 'h-auto w-full shrink-0 flex-col justify-center gap-0.5 py-1.5'
+			: 'size-8 shrink-0 justify-center pointer-coarse:size-10'
+		: 'w-full gap-2 px-2';
 
-/** Labels a rail control with a tooltip only while the sidebar is collapsed. */
-function RailTip({ label, collapsed, children }: { label: string; collapsed: boolean; children: React.ReactElement }) {
-	if (!collapsed) return children;
+/**
+ * Labels a rail control with a tooltip while the sidebar is collapsed. A `tip`
+ * adds a line under the label there, and is the whole tooltip when expanded.
+ */
+function RailTip({ label, collapsed, tip, children }: { label: string; collapsed: boolean; tip?: React.ReactNode; children: React.ReactElement }) {
+	if (!collapsed && !tip) return children;
 	return (
 		<Tooltip>
 			<TooltipTrigger render={children} />
-			<TooltipContent side="right">{label}</TooltipContent>
+			<TooltipContent side="right">
+				{collapsed ? (
+					<>
+						{label}
+						{tip ? <span className="block text-pretty text-muted-foreground">{tip}</span> : null}
+					</>
+				) : (
+					tip
+				)}
+			</TooltipContent>
 		</Tooltip>
 	);
 }
@@ -34,6 +55,10 @@ type NavRowProps = {
 	labelNode?: React.ReactNode;
 	/** Quiet trailing value such as a count. */
 	trailing?: React.ReactNode;
+	/** Tooltip detail, e.g. what an agent waits on. Shown expanded too; replaces the truncation title. */
+	tip?: React.ReactNode;
+	/** A short word under the collapsed square's glyph, e.g. "Approve". The square stretches into a capsule to hold it. */
+	railBadge?: React.ReactNode;
 	/** Row tone when not active. */
 	muted?: boolean;
 	/** Not choosable right now, e.g. while another row loads or policy forbids it. */
@@ -54,13 +79,15 @@ type NavRowLinkProps = Omit<React.ComponentProps<'a'>, 'href'> & { href: string
  * One sidebar row. Focus reads through weight and a tinted fill, never a
  * coloured dot; hover is instant because rows are clicked constantly.
  */
-function NavRow({ label, collapsed, active, leading, labelNode, trailing, muted, disabled, busy, onClick, href, renderLink }: NavRowProps) {
+function NavRow({ label, collapsed, active, leading, labelNode, trailing, tip, railBadge, muted, disabled, busy, onClick, href, renderLink }: NavRowProps) {
+	const badge = collapsed ? railBadge : null;
 	const content = (
 		<>
 			{leading}
+			{badge}
 			{collapsed ? null : (
 				<>
-					<span title={label} className="min-w-0 flex-1 truncate">
+					<span title={tip ? undefined : label} className="min-w-0 flex-1 truncate">
 						<bdi>{labelNode ?? label}</bdi>
 					</span>
 					{busy ? <Loader2 aria-hidden="true" className="size-3.5 shrink-0 text-muted-foreground motion-safe:animate-spin" /> : trailing}
@@ -91,7 +118,7 @@ function NavRow({ label, collapsed, active, leading, labelNode, trailing, muted,
 			},
 			className: cn(
 				ROW,
-				rowShape(collapsed),
+				rowShape(collapsed, Boolean(badge)),
 				'no-underline',
 				disabled ? 'cursor-not-allowed opacity-50' : cn('hover:bg-overlay-hover', muted && !active && 'hover:text-foreground'),
 				tone,
@@ -108,7 +135,7 @@ function NavRow({ label, collapsed, active, leading, labelNode, trailing, muted,
 				onClick={onClick}
 				className={cn(
 					ROW,
-					rowShape(collapsed),
+					rowShape(collapsed, Boolean(badge)),
 					'disabled:cursor-not-allowed disabled:opacity-50',
 					active ? tone : cn('enabled:hover:bg-overlay-hover', tone, muted && 'enabled:hover:text-foreground'),
 				)}
@@ -119,7 +146,7 @@ function NavRow({ label, collapsed, active, leading, labelNode, trailing, muted,
 	}
 	return (
 		<li className={collapsed ? 'flex justify-center' : undefined}>
-			<RailTip label={label} collapsed={collapsed}>
+			<RailTip label={label} collapsed={collapsed} tip={tip}>
 				{row}
 			</RailTip>
 		</li>
diff --git a/packages/ui/src/stories/AgentsBuilder.stories.tsx b/packages/ui/src/stories/AgentsBuilder.stories.tsx
index d4e9640d..aa41b639 100644
--- a/packages/ui/src/stories/AgentsBuilder.stories.tsx
+++ b/packages/ui/src/stories/AgentsBuilder.stories.tsx
@@ -5,6 +5,7 @@ import {
 	AGENTS_BUILDER_DEMO,
 	AgentsBuilder,
 	type AgentsBuilderAction,
+	type AgentsBuilderData,
 	type AgentsBuilderProps,
 	type AgentsBuilderView,
 } from '../components/agents-builder';
@@ -17,7 +18,7 @@ const meta: Meta<typeof AgentsBuilder> = {
 		docs: {
 			description: {
 				component:
-					'A complete agent workspace: chat with scripted replies, an integrations directory with a connect flow, a skills library, and an agent detail view with a live run panel and canvas.',
+					'A complete agent workspace: chat with scripted replies, an integrations directory with a connect flow, a skills library, and an agent detail view with a live run panel and canvas. Every agent in the sidebar opens its own run as it stands: running, waiting on your approval or answer, failed with a retry, queued with "Run now", or finished. Runs keep going while you look elsewhere, and a result that lands off screen marks its agent unread.',
 			},
 		},
 	},
@@ -79,9 +80,36 @@ export const Skills: Story = {
 	render: (args) => <Frame {...args} />,
 };
 
+/** The demo opens Revenue Analyst at its pending approval; here it starts mid-run so the whole replay plays. */
+const RUNNING_DEMO: AgentsBuilderData = {
+	...AGENTS_BUILDER_DEMO,
+	agents: AGENTS_BUILDER_DEMO.agents.map((agent) =>
+		agent.id === AGENTS_BUILDER_DEMO.agent.id ? { ...agent, status: 'running', statusNote: undefined } : agent,
+	),
+};
+
 export const AgentRun: Story = {
 	name: 'Agent (live run)',
-	args: { defaultView: 'agent' },
+	args: { defaultView: 'agent', data: RUNNING_DEMO },
+	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',
+	args: {
+		defaultView: 'chat',
+		data: {
+			...AGENTS_BUILDER_DEMO,
+			// The flat roster: without projects, agents past the limit that need you take the place of calm rows.
+			projects: undefined,
+			agents: AGENTS_BUILDER_DEMO.agents.map((agent) => {
+				if (agent.id === 'access-auditor') return { ...agent, status: 'approval', statusNote: 'Revoke 4 dormant admin keys in Snowflake?' };
+				if (agent.id === 'anomaly-watch') return { ...agent, status: 'failed', statusNote: 'Lost the Stripe webhook at 08:12.' };
+				return agent;
+			}),
+		},
+	},
 	render: (args) => <Frame {...args} />,
 };
 
diff --git a/packages/ui/src/stories/break-ui/agents-worst-case.ts b/packages/ui/src/stories/break-ui/agents-worst-case.ts
index 089b1b52..465a9c89 100644
--- a/packages/ui/src/stories/break-ui/agents-worst-case.ts
+++ b/packages/ui/src/stories/break-ui/agents-worst-case.ts
@@ -8,6 +8,7 @@
 import {
 	AGENTS_BUILDER_DEMO,
 	type AgentBlueprint,
+	type AgentProject,
 	type AgentRunScript,
 	type AgentSchedule,
 	type AgentsBuilderData,
@@ -34,20 +35,34 @@ const UNBROKEN_URL = 'https://example.com/workspaces/acme/projects/q3-launch/doc
  * Agents (sidebar roster, schedules, skills)
  * ------------------------------------------------------------------ */
 
-export const worstAgents: AgentSummary[] = [
-	{ id: 'revenue-analyst', name: 'Revenue Analyst', running: true },
-	{ id: 'board-reporting', name: 'Aleksandra Wiśniewska-Kowalczyk, Quarterly Board Reporting and Variance Commentary Agent', running: true },
-	{ id: 'cjk', name: names.cjk },
-	{ id: 'emoji', name: names.emojiFirst },
+/** Long, CJK, RTL, emoji, and one-letter project names; "J" has no agents, and one agent belongs to no project. */
+export const worstProjects: AgentProject[] = [
+	{ id: 'board', name: 'Quarterly Board Reporting and Variance Commentary for Multinational Holding Companies' },
+	{ id: 'cjk', name: '数据平台与治理' },
 	{ id: 'rtl', name: names.rtl },
-	{ id: 'one-letter', name: names.oneLetter },
-	{ id: 'spaces', name: names.extraSpaces },
-	{ id: 'lowercase', name: names.lowercase },
-	{ id: 'snake', name: identifiers.snakeIdentifier },
+	{ id: 'emoji', name: '🧪 Experiments' },
+	{ id: 'empty', name: names.oneLetter },
+];
+
+export const worstAgents: AgentSummary[] = [
+	{ id: 'revenue-analyst', projectId: 'board', name: 'Revenue Analyst', status: 'running' },
+	{
+		id: 'board-reporting', projectId: 'board',
+		name: 'Aleksandra Wiśniewska-Kowalczyk, Quarterly Board Reporting and Variance Commentary Agent',
+		status: 'approval',
+		statusNote: `Send the variance commentary for every legal entity to ${emails.long} and #board-reporting-and-variance-commentary-for-multinational-holding-companies?`,
+	},
+	{ id: 'cjk', projectId: 'cjk', name: names.cjk, status: 'failed', statusNote: UNBROKEN_URL },
+	{ id: 'emoji', projectId: 'emoji', name: names.emojiFirst, status: 'queued' },
+	{ id: 'rtl', projectId: 'rtl', name: names.rtl, status: 'input', statusNote: names.rtl },
+	{ id: 'one-letter', projectId: 'board', name: names.oneLetter },
+	{ id: 'spaces', projectId: 'board', name: names.extraSpaces },
+	{ id: 'lowercase', projectId: 'board', name: names.lowercase },
+	{ id: 'snake', projectId: 'cjk', name: identifiers.snakeIdentifier },
 	{ id: 'email-name', name: emails.long },
-	{ id: 'vietnamese', name: names.vietnamese },
-	{ id: 'zwj', name: names.zwjEmoji },
-	{ id: 'churn-radar', name: 'Churn Radar' },
+	{ id: 'vietnamese', projectId: 'cjk', name: names.vietnamese },
+	{ id: 'zwj', projectId: 'emoji', name: names.zwjEmoji },
+	{ id: 'churn-radar', projectId: 'board', name: 'Churn Radar', status: 'approval', statusNote: 'Close the 3 duplicate churn tickets in Zendesk?' },
 ];
 
 /* ------------------------------------------------------------------ *
@@ -323,6 +338,7 @@ export const worstAgentsBuilder: AgentsBuilderData = {
 	categories: worstCategories,
 	featuredIntegrationIds: ['dynamics', 'dingtalk', 'vk', 'evernote', 'a', 'postgres', 'snowflake', 'stripe', 'dbt', 'hubspot', 'slack', 'notion', 'github'],
 	agents: worstAgents,
+	projects: worstProjects,
 	inbox: worstInbox,
 	schedules: worstSchedules,
 	skills: worstSkills,
@@ -346,6 +362,7 @@ export const emptyAgentsBuilder: AgentsBuilderData = {
 	categories: [],
 	featuredIntegrationIds: [],
 	agents: [],
+	projects: [],
 	inbox: [],
 	schedules: [],
 	skills: [],
@@ -360,6 +377,7 @@ export const emptyAgentsBuilder: AgentsBuilderData = {
 export const oneAgentsBuilder: AgentsBuilderData = {
 	...AGENTS_BUILDER_DEMO,
 	agents: AGENTS_BUILDER_DEMO.agents.slice(0, 1),
+	projects: AGENTS_BUILDER_DEMO.projects?.slice(0, 1),
 	inbox: AGENTS_BUILDER_DEMO.inbox.slice(0, 1),
 	schedules: AGENTS_BUILDER_DEMO.schedules.slice(0, 1),
 	skills: AGENTS_BUILDER_DEMO.skills.slice(0, 1),
@@ -372,7 +390,14 @@ export const oneAgentsBuilder: AgentsBuilderData = {
 
 export const hugeAgentsBuilder: AgentsBuilderData = {
 	...AGENTS_BUILDER_DEMO,
-	agents: manyRows(1_000, (index): AgentSummary => ({ id: `agent-${index}`, name: `Agent ${index + 1}`, running: index % 7 === 0 })),
+	agents: manyRows(1_000, (index): AgentSummary => ({
+		id: `agent-${index}`,
+		name: `Agent ${index + 1}`,
+		status: (['running', 'idle', 'approval', 'idle', 'failed', 'queued', 'input'] as const)[index % 7],
+		unread: index % 5 === 0,
+		// Spread across the demo's three projects, with every tenth agent in none.
+		projectId: index % 10 === 9 ? undefined : AGENTS_BUILDER_DEMO.projects?.[index % 3]?.id,
+	})),
 	skills: manyRows(1_000, (index): Skill => ({
 		id: `skill-${index}`,
 		name: `skill-${index + 1}`,
diff --git a/packages/ui/test/agents-billing-workflows.test.tsx b/packages/ui/test/agents-billing-workflows.test.tsx
index b8190d73..6e799c94 100644
--- a/packages/ui/test/agents-billing-workflows.test.tsx
+++ b/packages/ui/test/agents-billing-workflows.test.tsx
@@ -101,6 +101,12 @@ async function untilVisible(predicate: () => boolean) {
 	expect(predicate()).toBe(true);
 }
 
+/** The demo's blueprint agent waits on approval and would open settled; these runs start from the top. */
+const RUNNING_DEMO = {
+	...AGENTS_BUILDER_DEMO,
+	agents: AGENTS_BUILDER_DEMO.agents.map((agent) => (agent.id === AGENTS_BUILDER_DEMO.agent.id ? { ...agent, status: 'running' as const } : agent)),
+};
+
 function artifact(name: string, actions: unknown) {
 	const directory = process.env.BLOCKS_TEST_ARTIFACTS ?? '/tmp/blocks-test-audit/agents-billing-artifacts';
 	mkdirSync(directory, { recursive: true });
@@ -112,7 +118,7 @@ describe('agent run and billing operator workflows', () => {
 	it('runs an agent to approval, exposes its evidence and canvas, and only writes after approval', async () => {
 		vi.useFakeTimers();
 		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
-		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} defaultView="agent" onAction={onAction} />);
+		await render(<AgentsBuilder data={RUNNING_DEMO} defaultView="agent" onAction={onAction} />);
 		const run = () => document.body.querySelector<HTMLElement>('aside[aria-label="Current run"]')!;
 		expect(buttonNamed('Stop run', run())).toBeDefined();
 		expect(document.body.querySelector('section[aria-label="Tools"]')).toBeNull();
@@ -155,12 +161,12 @@ describe('agent run and billing operator workflows', () => {
 		expect(run().querySelector<HTMLTextAreaElement>('textarea')?.value).toBe('');
 		expect(run().textContent).toContain('Explain the cohort change');
 		artifact('agent-approved', onAction.mock.calls);
-	});
+	}, 15_000);
 
 	it('stops the preview without approving writes and preserves the draft when approval is declined', async () => {
 		vi.useFakeTimers();
 		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
-		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} defaultView="agent" onAction={onAction} />);
+		await render(<AgentsBuilder data={RUNNING_DEMO} defaultView="agent" onAction={onAction} />);
 		const run = document.body.querySelector<HTMLElement>('aside[aria-label="Current run"]')!;
 		await click(buttonNamed('Stop run', run));
 		expect(onAction).toHaveBeenCalledExactlyOnceWith({ type: 'stop-run' });
diff --git a/packages/ui/test/agents-builder.test.tsx b/packages/ui/test/agents-builder.test.tsx
index 7d363ec9..6fdd62ba 100644
--- a/packages/ui/test/agents-builder.test.tsx
+++ b/packages/ui/test/agents-builder.test.tsx
@@ -3,7 +3,13 @@ import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { AGENTS_BUILDER_DEMO, AgentsBuilder, type AgentsBuilderAction } from '../src/components/agents-builder';
+import {
+	AGENTS_BUILDER_DEMO,
+	AgentsBuilder,
+	type AgentsBuilderAction,
+	DEMO_AGENT_DETAILS,
+} from '../src/components/agents-builder';
+import { visibleRoster } from '../src/components/agents-builder/agent-status';
 import { CONVERSATION_TIMING, sayDuration } from '../src/components/agents-builder/use-scripted-conversation';
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -65,8 +71,18 @@ async function render(node: React.ReactNode) {
 const headingNamed = (name: string) =>
 	[...container!.querySelectorAll('h2')].find((element) => element.textContent?.trim() === name);
 const byLabel = (label: string) => container!.querySelector<HTMLElement>(`[aria-label="${label}"]`);
-const buttonNamed = (name: string) =>
-	[...container!.querySelectorAll<HTMLButtonElement>('button')].find((element) => element.textContent?.trim() === name);
+/** What a screen reader announces: the aria-label, else the text without its aria-hidden parts (like a row's status tag). */
+function accessibleName(element: HTMLElement) {
+	const label = element.getAttribute('aria-label');
+	if (label) return label;
+	const copy = element.cloneNode(true) as HTMLElement;
+	for (const hidden of copy.querySelectorAll('[aria-hidden="true"]')) hidden.remove();
+	return copy.textContent?.trim();
+}
+const buttonNamed = (name: string) => [...container!.querySelectorAll<HTMLButtonElement>('button')].find((element) => accessibleName(element) === name);
+
+const roster = () => [...container!.querySelectorAll<HTMLButtonElement>('nav button')].map(accessibleName);
+const detail = (agentId: string) => DEMO_AGENT_DETAILS.find((entry) => entry.agent.id === agentId)!;
 
 async function click(element: HTMLElement | null | undefined) {
 	if (!element) throw new Error('Element not found');
@@ -85,6 +101,18 @@ async function advance(ms: number, slack = 200, slice = 20) {
 	}
 }
 
+/** Plays timers in 100ms slices until `done`, failing after `limit` ms of simulated time. */
+async function until(done: () => boolean, limit = 120_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);
+		});
+	}
+}
+
+const runComplete = () => Boolean(container!.textContent?.includes('Run complete'));
+
 describe('AgentsBuilder', () => {
 	it('switches views from the sidebar and filters integrations to connected apps', async () => {
 		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} autoplayRun={false} />);
@@ -163,4 +191,170 @@ describe('AgentsBuilder', () => {
 		expect(container!.textContent).toContain('Stripe and Snowflake only, then.');
 		expect(byLabel('Stop')).toBeNull();
 	}, 15_000);
+
+	it('names each agent row by its state and resumes a waiting agent at its approval card', async () => {
+		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} onAction={onAction} />);
+
+		expect(roster()).toEqual(
+			expect.arrayContaining([
+				'Revenue Analyst, waiting for your approval',
+				'Churn Radar, running',
+				'Data Quality Monitor, last run failed',
+				'Schema Steward, waiting for your answer',
+				'Metrics Librarian, new result',
+				'Forecast Planner, queued',
+			]),
+		);
+
+		// Autoplay is on, yet the agent opens settled with the decision focused rather than replaying.
+		await click(buttonNamed('Revenue Analyst, waiting for your approval'));
+		const card = byLabel(AGENTS_BUILDER_DEMO.run.approval!.title);
+		expect(card).not.toBeNull();
+		expect(document.activeElement).toBe(card);
+
+		await click(buttonNamed(AGENTS_BUILDER_DEMO.run.approval!.skipLabel));
+		expect(onAction).toHaveBeenCalledWith({ type: 'approve-run', agentId: 'revenue-analyst', approved: false });
+		expect(roster()).toContain('Revenue Analyst');
+	}, 15_000);
+
+	it('groups the roster by project and keeps what needs you visible in a folded project', async () => {
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} />);
+		const project = (name: string) =>
+			[...container!.querySelectorAll<HTMLButtonElement>('nav button[aria-expanded]')].find((button) => accessibleName(button)?.startsWith(name))!;
+
+		// Projects with something happening start open; a quiet one starts folded.
+		expect(project('Revenue').getAttribute('aria-expanded')).toBe('true');
+		expect(project('Governance').getAttribute('aria-expanded')).toBe('false');
+		expect(roster()).not.toContain('Access Auditor');
+
+		// Folded, the project still says how many of its agents wait on you.
+		await click(project('Data platform'));
+		expect(accessibleName(project('Data platform'))).toBe('Data platform, 2 need you');
+		expect(roster()).not.toContain('Schema Steward, waiting for your answer');
+
+		// Past the per-project limit, calm agents wait behind "Show N more".
+		expect(roster()).not.toContain('Cohort Builder');
+		await click(buttonNamed('Show 1 more'));
+		expect(roster()).toContain('Cohort Builder');
+	});
+
+	it('hands an agent without a detail to the host and clears its unread result', async () => {
+		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
+		await render(<AgentsBuilder data={{ ...AGENTS_BUILDER_DEMO, agentDetails: undefined }} autoplayRun={false} onAction={onAction} />);
+
+		await click(buttonNamed('Metrics Librarian, new result'));
+		expect(onAction).toHaveBeenCalledWith({ type: 'open-agent', agentId: 'metrics-librarian' });
+		expect(buttonNamed('Metrics Librarian')).toBeDefined();
+	});
+
+	it('opens a finished agent at its latest result without replaying it', async () => {
+		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} onAction={onAction} />);
+
+		await click(buttonNamed('Metrics Librarian, new result'));
+		expect(onAction).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'open-agent' }));
+		expect([...container!.querySelectorAll('h1')].map((heading) => heading.textContent)).toContain('Metrics Librarian');
+		expect(container!.textContent).toContain('Run complete');
+		expect(roster()).toContain('Metrics Librarian');
+	});
+
+	it('stops a failed run at its tool call and plays it through on retry', async () => {
+		vi.useFakeTimers();
+		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
+		const { failure, steps } = detail('data-quality-monitor').run;
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} onAction={onAction} />);
+
+		await click(buttonNamed('Data Quality Monitor, last run failed'));
+		const stop = byLabel('Run failed');
+		expect(stop?.textContent).toContain(failure!.message);
+		expect(document.activeElement).toBe(stop);
+		const failedCall = steps.find((step) => step.id === failure!.stepId)!;
+		expect(container!.querySelector('[data-status="error"]')?.textContent).toContain(failedCall.label);
+		// Calls after the failure never ran.
+		expect(container!.textContent).not.toContain(steps.at(-1)!.label);
+
+		await click(buttonNamed('Retry run'));
+		expect(onAction).toHaveBeenCalledWith({ type: 'retry-run', agentId: 'data-quality-monitor' });
+		expect(roster()).toContain('Data Quality Monitor, running');
+
+		await until(runComplete);
+		expect(byLabel('Run failed')).toBeNull();
+		expect(roster()).toContain('Data Quality Monitor');
+	}, 20_000);
+
+	it('asks its question, then makes the follow-up calls for the chosen answers', async () => {
+		vi.useFakeTimers();
+		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
+		const { question } = detail('schema-steward').run;
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} onAction={onAction} />);
+
+		await click(buttonNamed('Schema Steward, waiting for your answer'));
+		expect(document.activeElement).toBe(byLabel(question!.title));
+		const option = (label: string) =>
+			[...container!.querySelectorAll<HTMLButtonElement>('[role="radio"]')].find((radio) => radio.textContent?.includes(label));
+		// One question at a time: Continue moves to the second, then submits both.
+		await click(option('Move them to billing'));
+		await click(buttonNamed('Continue'));
+		expect(onAction).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'answer-run' }));
+		await click(option('Yes, in this PR'));
+		await click(buttonNamed('Continue'));
+		expect(onAction).toHaveBeenCalledWith({
+			type: 'answer-run',
+			agentId: 'schema-steward',
+			answers: { 'owner-schema': ['billing'], rls: ['same-pr'] },
+		});
+		expect(roster()).toContain('Schema Steward, running');
+
+		await until(runComplete, 10_000);
+		expect(container!.textContent).toContain(question!.steps.at(-1)!.label);
+		expect(roster()).toContain('Schema Steward');
+	}, 20_000);
+
+	it('keeps a run going after you leave its agent and leaves the result unread', async () => {
+		vi.useFakeTimers();
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} />);
+
+		await click(buttonNamed('Churn Radar, running'));
+		await advance(1_000, 0, 100);
+		await click(buttonNamed('Chat'));
+		await until(() => roster().includes('Churn Radar, new result'));
+
+		// Back in the agent, the finished run is still there instead of a replay.
+		await click(buttonNamed('Churn Radar, new result'));
+		expect(container!.textContent).toContain('Run complete');
+		expect(roster()).toContain('Churn Radar');
+	}, 20_000);
+
+	it('holds a queued run until it is started', async () => {
+		vi.useFakeTimers();
+		const onAction = vi.fn<(action: AgentsBuilderAction) => void>();
+		await render(<AgentsBuilder data={AGENTS_BUILDER_DEMO} onAction={onAction} />);
+
+		await click(buttonNamed('Forecast Planner, queued'));
+		expect(container!.textContent).toContain('The October forecast starts at 09:30 UTC.');
+		await advance(2_000, 0, 100);
+		expect(roster()).toContain('Forecast Planner, queued');
+
+		await click(buttonNamed('Run now'));
+		expect(onAction).toHaveBeenCalledWith({ type: 'start-run', agentId: 'forecast-planner' });
+		expect(roster()).toContain('Forecast Planner, running');
+		await until(runComplete);
+		expect(roster()).toContain('Forecast Planner');
+	}, 20_000);
+});
+
+describe('visibleRoster', () => {
+	const agent = (id: string, status?: 'approval' | 'failed' | 'running') => ({ id, name: id, status });
+	const ids = (agents: { id: string }[]) => agents.map((entry) => entry.id);
+
+	it('swaps the last calm rows for agents past the limit that need a person', () => {
+		const agents = [agent('a', 'approval'), agent('b'), agent('c', 'running'), agent('d'), agent('e', 'failed'), agent('f')];
+		expect(ids(visibleRoster(agents, 4))).toEqual(['a', 'b', 'c', 'e']);
+	});
+
+	it('never grows past the limit when every visible row already needs a person', () => {
+		const agents = [agent('a', 'approval'), agent('b', 'failed'), agent('c', 'approval'), agent('d', 'failed')];
+		expect(ids(visibleRoster(agents, 2))).toEqual(['a', 'b']);
+	});
 });