@twoux/ui 0.0.0-stage → 0.1.1

package/agent/docs-md/button.md

@@ -0,0 +1,293 @@
+# Button
+
+Starts an action on the current page, such as saving, exporting or opening a menu.
+
+Kind: component · Group: Actions and inputs · Status: built, import from @twoux/ui
+
+## When to use
+
+- To start an action on the current page: New listing, Export, Save view.
+- To open a menu or popover of more actions, with a chevron on the right.
+- For the one step most people take next in a view, using the primary style.
+- As an icon-only ghost button for frequent, well-known row actions where space is tight.
+
+## When not to use
+
+- To go to another page or URL. Use a link (button-link style) instead.
+- To switch between views of the same data. Use the Segmented control.
+- To turn a setting on or off. Use a Switch, not a button whose label flips.
+- For a long set of secondary actions on one object. Group them in a Dropdown menu.
+
+## Structure
+
+1. Container
+2. Icon (optional)
+3. Label
+4. Shortcut hint (optional)
+5. Chevron (menu buttons only)
+
+## Guidelines
+
+- Seven variants, using shadcn names: default (the primary), outline (white with a light border), secondary (grey fill), ghost (no fill until hover), warning (risky but reversible, a TwoUX addition), destructive (red, inside a confirmation) and link. Pick by importance in the view, not by looks.
+- Only one primary button per view. In a dialog or side panel with its own task, that container may have its own primary.
+- Four sizes: 24px inside rows, 28px in toolbars and filter bars, 32px by default, 36px only for the single action of an empty state or sign-in page. Icon-only buttons are square at the same height.
+- States: default, hover, focus (2px primary ring with a 2px white gap), pressed, disabled (45% opacity), loading.
+- Avoid disabled buttons in forms. Keep Publish pressable and show what is missing through validation.
+- When a button must be disabled, give the reason in a tooltip or nearby text.
+- While an action runs, use loading: the spinner replaces the leading icon, the button ignores clicks and stays focusable, so it cannot be pressed twice and keyboard users keep their place.
+
+## Content
+
+- Start with a verb and say what happens: Publish listing, Export 2 rows, Close listings.
+- Sentence case, no full stop, no articles: Save view, not Save The View.
+- Two to four words. Add the object for destructive actions: Delete listing, not Delete.
+- Add an ellipsis when the action needs more input before it runs: Extend to a date…
+- Never OK or Yes in a dialog. Name both outcomes: Close listings and Keep open.
+
+## Accessibility
+
+- Use a native button element. Enter and Space activate it.
+- Icon-only buttons need an aria-label naming the action, plus a tooltip showing the same words.
+- The accessible name must contain the visible label so voice users can say what they see.
+- Focus ring and secondary border need at least 3:1 against the background; label text at least 4.5:1, white on primary included.
+- The 28px small button meets the 24px minimum target. Do not shrink icon buttons below 24px.
+- Menu buttons set aria-haspopup and aria-expanded.
+
+## Keyboard
+
+| Keys | Action |
+|---|---|
+| Enter / Space | Activate the focused button |
+| Shortcut shown on the button | Run the action from anywhere in the view |
+
+## Examples
+
+### disabled
+
+```tsx
+import { Button } from "@twoux/ui";
+
+export const meta = {
+	title: "Disabled",
+	description: "Prefer leaving the button enabled and explaining what is missing when pressed. Disable only when the reason is visible next to it.",
+	order: 6,
+};
+
+export default function Example() {
+	return (
+		<div className="flex flex-col items-start gap-1.5">
+			<Button variant="default" disabled>
+				Run task
+			</Button>
+			<span className="text-sm text-bad">Choose who gets the titles before you run this.</span>
+		</div>
+	);
+}
+```
+
+### icon-only
+
+```tsx
+import { Button } from "@twoux/ui";
+import { MoreHorizontal, Pencil, X } from "lucide-react";
+
+export const meta = {
+	title: "Icon only",
+	description: "For well-known actions in dense places. The aria-label names the action and its target, not the icon, and a tooltip shows the same words.",
+	order: 7,
+};
+
+export default function Example() {
+	return (
+		<div className="flex items-center gap-4">
+			<Button variant="ghost" size="icon-xs" aria-label="Edit Junior Product Designer" title="Edit"><Pencil /></Button>
+			<Button variant="ghost" size="icon-sm" aria-label="More actions for this listing" title="More actions"><MoreHorizontal /></Button>
+			<Button variant="ghost" size="icon" aria-label="Close details" title="Close (Esc)"><X /></Button>
+		</div>
+	);
+}
+```
+
+### icons
+
+```tsx
+import { Button } from "@twoux/ui";
+import { ChevronDown, ExternalLink, Plus } from "lucide-react";
+
+export const meta = {
+	title: "With icons",
+	description: "An icon before the label clarifies the action. An icon after it says what happens next: a chevron opens a menu, an arrow leaves the app.",
+	order: 4,
+};
+
+export default function Example() {
+	return (
+		<div className="flex flex-wrap items-center gap-2">
+			<Button variant="default"><Plus />New listing</Button>
+			<Button variant="outline">Status<ChevronDown /></Button>
+			<Button variant="ghost">View public page<ExternalLink /></Button>
+		</div>
+	);
+}
+```
+
+### loading
+
+```tsx
+import { Button } from "@twoux/ui";
+import { useState } from "react";
+
+export const meta = {
+	title: "Loading",
+	description: "While an action runs, the button shows a spinner and ignores clicks but stays focusable, so keyboard users keep their place. Press it to try.",
+	order: 6,
+};
+
+export default function Example() {
+	const [busy, setBusy] = useState(false);
+	return (
+		<div className="flex items-center gap-2">
+			<Button variant="default" loading={busy} onClick={() => { setBusy(true); setTimeout(() => setBusy(false), 1800); }}>
+				{busy ? "Publishing…" : "Publish listing"}
+			</Button>
+			<Button variant="outline" size="sm" loading>Saving…</Button>
+		</div>
+	);
+}
+```
+
+### matrix
+
+```tsx
+import { Button } from "@twoux/ui";
+
+export const meta = { title: "All sizes and variants", description: "Every combination, for checking alignment. Rows share a baseline at each size.", order: 9 };
+
+const variants = ["default", "outline", "secondary", "ghost", "warning", "destructive"] as const;
+const sizes = ["xs", "sm", "default", "lg"] as const;
+
+export default function Example() {
+	return (
+		<div className="grid grid-cols-[auto_repeat(6,auto)] items-center gap-x-3 gap-y-3">
+			<span />
+			{variants.map((v) => (
+				<span key={v} className="text-sm text-ink-3">{v}</span>
+			))}
+			{sizes.map((s) => (
+				<div key={s} className="contents">
+					<span className="font-mono text-sm text-ink-3">{s}</span>
+					{variants.map((v) => (
+						<Button key={v} size={s} variant={v}>Button</Button>
+					))}
+				</div>
+			))}
+		</div>
+	);
+}
+```
+
+### primary
+
+```tsx
+import { Button } from "@twoux/ui";
+import { Plus } from "lucide-react";
+
+export const meta = {
+	title: "One primary action per view",
+	description: "The main action of the page is the only indigo button. Everything else is secondary or ghost.",
+	order: 1,
+};
+
+export default function Example() {
+	return (
+		<div className="flex items-center gap-2">
+			<Button variant="outline">Export</Button>
+			<Button variant="default" shortcut="C"><Plus />
+				New listing
+			</Button>
+		</div>
+	);
+}
+```
+
+### shortcut
+
+```tsx
+import { Button } from "@twoux/ui";
+import { Clock, Copy } from "lucide-react";
+
+export const meta = {
+	title: "With keyboard shortcut",
+	description: "Every frequent action shows its key, so people learn it by using it. The key is also in the tooltip for screen readers.",
+	order: 4,
+};
+
+export default function Example() {
+	return (
+		<div className="flex items-center gap-1 rounded-sm bg-surface p-1 shadow-pop">
+			<Button variant="ghost" size="sm" shortcut="T" title="Extend 30 days (T)"><Clock />
+				Extend 30 days
+			</Button>
+			<Button variant="ghost" size="sm" shortcut="D" title="Duplicate (D)"><Copy />
+				Duplicate
+			</Button>
+		</div>
+	);
+}
+```
+
+### sizes
+
+```tsx
+import { Button } from "@twoux/ui";
+import { Download } from "lucide-react";
+
+export const meta = {
+	title: "Sizes",
+	description: "Four compact sizes. 32px is the default. 28px in toolbars and filter bars, 24px inside table rows, 36px only for the single action of an empty state or sign-in page.",
+	order: 3,
+};
+
+export default function Example() {
+	return (
+		<div className="flex flex-wrap items-center gap-2">
+			<Button size="xs" variant="outline"><Download />Export</Button>
+			<Button size="sm" variant="outline"><Download />Export</Button>
+			<Button variant="outline"><Download />Export</Button>
+			<Button size="lg" variant="outline"><Download />Export</Button>
+		</div>
+	);
+}
+```
+
+### variants
+
+```tsx
+import { Button } from "@twoux/ui";
+
+export const meta = {
+	title: "Variants",
+	description: "Primary for the one main action, secondary for supporting actions, tertiary in toolbars and rows, warning for risky but reversible actions, destructive only inside a confirmation, link for navigation.",
+	order: 2,
+};
+
+export default function Example() {
+	return (
+		<div className="flex flex-wrap items-center gap-2">
+			<Button variant="default">Publish listing</Button>
+			<Button variant="outline">Save draft</Button>
+			<Button variant="ghost">Cancel</Button>
+			<Button variant="warning">Close early</Button>
+			<Button variant="destructive">Delete listing</Button>
+			<Button variant="link">View all listings</Button>
+		</div>
+	);
+}
+```
+
+## Related
+
+- Keyboard shortcut hint
+- Dropdown menu
+- Tooltip
+- Form validation

package/agent/docs-md/card.md

@@ -0,0 +1,115 @@
+# Card
+
+A white container that groups one object or one task, such as a settings section, a sign-in form or a summary, with an optional header, actions and footer.
+
+Kind: component · Group: Content · Status: built, import from @twoux/ui
+
+## When to use
+
+- To group the fields and actions of one settings section or one form, so it reads as one unit.
+- To show one summary of an object, such as a listing's status and owner, on a page that holds several.
+
+## When not to use
+
+- For rows of a list or table. Use the List table; cards break scanning and comparison across rows.
+- Inside another card. Use a Separator or a heading to divide the content instead.
+- To make text stand out. Use a Banner for a condition, or plain hierarchy.
+
+## Structure
+
+1. Container: white, light edge, 6px corners, resting shadow
+2. Header: title and optional description
+3. Action (optional): one button or menu, top right
+4. Content
+5. Footer (optional): actions on the right, or a tinted band with one secondary line
+
+## Guidelines
+
+- One card is one object or one task. If the content splits into two jobs, use two cards.
+- Keep the header short: a title, an optional one-line description, and at most one action on the right.
+- Put primary actions in the footer, right-aligned, with the main action last.
+- Use the footer band for a single secondary line, such as “Already have an account? Sign in”.
+- Cards on a white page keep their edge; cards on the grey app background can drop the shadow but keep the edge.
+
+## Content
+
+- Title in sentence case naming the object or task: “Notifications”, “Salary bands”.
+- The description says what the section controls, not how to use the card.
+
+## Accessibility
+
+- When a card holds a section, give the title a real heading element at the right level, so it appears in the heading list.
+- Do not make the whole card clickable when it contains other controls; link the title instead, so each target has one purpose.
+- The card edge is decorative; the content does not rely on it to be understood.
+
+## Keyboard
+
+| Keys | Action |
+|---|---|
+| Tab | Moves through the card's own controls in reading order; the card itself is not a stop |
+
+## Examples
+
+### settings
+
+```tsx
+import { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, SwitchField } from "@twoux/ui";
+
+export const meta = { title: "Settings section", description: "One card, one task. The title names it, the description says what it controls, and the footer holds the save action on the right.", order: 1 };
+
+export default function Example() {
+	return (
+		<Card className="w-full max-w-md">
+			<CardHeader>
+				<CardTitle>Applicant emails</CardTitle>
+				<CardDescription>Choose when hiring managers hear about new applicants.</CardDescription>
+				<CardAction>
+					<Button variant="ghost" size="sm">Reset</Button>
+				</CardAction>
+			</CardHeader>
+			<CardContent className="grid gap-3">
+				<SwitchField id="email-each" label="Each new applicant" defaultChecked />
+				<SwitchField id="email-digest" label="Daily digest at 9:00" />
+			</CardContent>
+			<CardFooter className="justify-end gap-2 border-t pt-4">
+				<Button variant="outline" size="sm">Cancel</Button>
+				<Button size="sm">Save</Button>
+			</CardFooter>
+		</Card>
+	);
+}
+```
+
+### sign-in
+
+```tsx
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, FieldSeparator, TextField } from "@twoux/ui";
+
+export const meta = { title: "Sign in, with a footer band", description: "The band holds one secondary line, apart from the main action. The labelled separator divides the two ways in.", order: 2 };
+
+export default function Example() {
+	return (
+		<Card className="w-full max-w-sm">
+			<CardHeader className="text-center">
+				<CardTitle>Sign in to TwoUX Hiring</CardTitle>
+				<CardDescription>Welcome back. Sign in to continue.</CardDescription>
+			</CardHeader>
+			<CardContent className="grid gap-4">
+				<Button variant="outline" className="w-full">Continue with Google</Button>
+				<FieldSeparator>or</FieldSeparator>
+				<TextField id="signin-email" label="Work email" type="email" placeholder="name@company.co.uk" />
+				<Button className="w-full">Continue</Button>
+			</CardContent>
+			<CardFooter band>
+				Don't have an account?&nbsp;<a href="#signup" className="font-medium text-primary-ink hover:underline">Sign up</a>
+			</CardFooter>
+		</Card>
+	);
+}
+```
+
+## Related
+
+- Banner (inline alert)
+- Separator
+- Empty state

package/agent/docs-md/change-list.md

@@ -0,0 +1,99 @@
+# Change list
+
+Ticker rows for indices, prices or rates: name and code, value with unit, change by arrow, sign and colour, an optional sparkline, and a See all link.
+
+Kind: component · Group: Data visualisation · Status: built, import from @twoux/ui
+
+## When to use
+
+- A short dashboard list of instruments or metrics where today's level and change matter most.
+- Several numbers that move together, each too small for its own stat tile.
+
+## When not to use
+
+- For one headline number. Use the TwoUX Stat compare.
+- To rank items by a share of a total. Use the TwoUX Ranked list.
+
+## Structure
+
+1. Title and subtitle (period, delay)
+2. Row: name and code
+3. Optional sparkline of the period
+4. Value with unit, tabular
+5. Change: arrow, sign and percentage
+6. Footer: See all link
+
+## Guidelines
+
+- Keep to about five to seven rows and link to the full list with See all.
+- Change shows an arrow, a sign and a colour; colour alone is never the signal.
+- Values align in tabular figures with their unit after the number.
+- Sparklines use one colour and no axis; they show shape, the number gives the level.
+- Say how fresh the data is in the subtitle, such as 15 minutes delayed.
+- Use ChartFrame for the four states: loading keeps the frame, an error says what failed with Try again, an empty period says so, and no match offers Clear filters.
+
+## Content
+
+- Name first, code second in smaller text: people scan names, specialists scan codes.
+- Use a real minus sign for falls and two decimals for percentage change.
+
+## Accessibility
+
+- 1.4.1 Use of Color: arrow and sign carry direction; screen readers hear up or down with the value.
+- 1.4.11 Non-text Contrast: arrows use the status text colours, which meet 4.5:1.
+- 4.1.2 Name, Role, Value: each row is one link named by its whole content.
+
+## Keyboard
+
+| Keys | Action |
+|---|---|
+| Tab | Move to the next row, then See all |
+| Enter | Open the row |
+
+## Examples
+
+### indices
+
+```tsx
+import { ChangeList } from "@twoux/ui";
+
+export const meta = { title: "Market indices", description: "Name and code, value with unit, change by arrow, sign and colour, and today's line. The footer links to the full list.", order: 1 };
+
+// Intraday path: 48 five-minute points from a seeded walk that ends at today's change, so each line has real ups and downs.
+function intraday(value: number, changePct: number, volatility: number, seed: number) {
+	const rand = () => ((seed = (seed * 16807) % 2147483647) / 2147483647);
+	const open = value / (1 + changePct / 100);
+	const n = 48;
+	const walk = [0];
+	for (let i = 1; i < n; i++) walk.push(walk[i - 1] + (rand() - 0.5) * 2);
+	const end = walk[n - 1];
+	return walk.map((w, i) => open + (w - (end * i) / (n - 1)) * open * volatility + ((value - open) * i) / (n - 1));
+}
+
+const ROWS = [
+	{ id: "uk100", name: "UK 100", symbol: "UKX", value: 8412.36, unit: "pts", change: 0.42, spark: intraday(8412.36, 0.42, 0.0011, 11) },
+	{ id: "uk250", name: "UK 250", symbol: "MCX", value: 20184.9, unit: "pts", change: -0.31, spark: intraday(20184.9, -0.31, 0.001, 23) },
+	{ id: "eu600", name: "Europe 600", symbol: "SXXP", value: 512.07, unit: "pts", change: 0.18, spark: intraday(512.07, 0.18, 0.0009, 37) },
+	{ id: "gilt10", name: "UK gilt, 10 year", symbol: "GUKG10", value: 4.12, unit: "%", change: 0.0, spark: intraday(4.12, 0.0, 0.0016, 53) },
+	{ id: "gbpusd", name: "Pound to dollar", symbol: "GBP/USD", value: 1.2846, unit: "USD", change: -0.12, spark: intraday(1.2846, -0.12, 0.0004, 71) },
+];
+
+export default function Example() {
+	return (
+		<ChangeList
+			className="w-full max-w-md"
+			title="Major indices"
+			description="Today, 15 minutes delayed"
+			items={ROWS.map((r) => ({ ...r, href: `#${r.id}` }))}
+			format={(n) => n.toLocaleString("en-GB", { minimumFractionDigits: 2, maximumFractionDigits: n < 10 ? 4 : 2 })}
+			seeAll={{ href: "#markets", label: "See all markets" }}
+		/>
+	);
+}
+```
+
+## Related
+
+- Ranked list
+- Stat card with comparison
+- Price chart

package/agent/docs-md/change-request.md

@@ -0,0 +1,166 @@
+# Change review
+
+The review queue for changes an agent proposes to records, procedures, prompts, tools or another agent: the reason, the diff, and test results, approved or rejected by a person.
+
+Kind: component · Group: AI and agents · Status: built, import from @twoux/ui
+
+## When to use
+
+- When an agent proposes to change how something works: a procedure, a prompt, a tool, a rule, or another agent's instructions.
+- When a change can be tested against a set of known cases (a regression set) before it goes live.
+- When many agent changes arrive together and a person has to work through them in order.
+
+## When not to use
+
+- Changes to a few records a person asked for. Use Suggested changes (suggested-changes).
+- Plans for work that has not started. Use the Plan preview (plan-card).
+- Actions set to Allow in Agent permissions (agent-permissions). Those run and appear in the Activity log with Undo.
+
+## Structure
+
+1. Header (title, status badge, origin label, reason in plain words)
+2. Diff view (files changed, +/− counts, unified diff)
+3. Simulation results ("228 of 240 pass", failures first, newly failing called out)
+4. Footer (note, Reject, Approve change) or the Reject reason field
+5. Resolved line (who decided and when)
+
+## Guidelines
+
+- Nothing goes live until a person approves. Say so in the footer.
+- State the reason in plain words and what the proposal is based on (the origin label), for example "14 conversations this week".
+- Show the diff and the simulation results in the same card, so the person can decide without opening anything else.
+- Run the change against a regression set. Failures come first, and a case that passed before and fails now is called out in words ("Newly failing"), with a count in the footer.
+- Rejecting needs a reason the agent can learn from. If the box is empty, say why it is needed, next to the field.
+- Every decision leaves a resolved line with who decided and when. Changes are logged and attributable to the agent that proposed them and the person who approved.
+- A change one agent proposes to another agent's procedures is reviewed in the same way, with the proposing agent named as the origin.
+- Group many changes by batch, each batch with a stated rationale. Stage risky ones with a traffic split or a gradual ramp, not all at once.
+
+## Content
+
+- Title the change by what it does: "Reply in the applicant's language", not "Update prompt v14".
+- Write the reason as cause and effect: "Applicants wrote in Welsh in 6 of 14 conversations and the assistant replied in English."
+- Name failures in words: "2 conversations that passed before now fail." Do not rely on a coloured count.
+- Resolved line: "Approved by Imogen Hart · 10:42" or "Rejected by Imogen Hart · 10:42", with the reason kept in the log.
+
+## Accessibility
+
+- Each card is an article labelled with the change title, so people can move through a queue of changes by heading (SC 1.3.1).
+- Added and removed lines carry a + or − marker and a hidden word ("Added", "Removed"), not colour alone (SC 1.4.1).
+- File rows are disclosure buttons with aria-expanded (SC 4.1.2).
+- The Reject reason field has a visible label, and a missing reason is an error shown beside it as text (SC 3.3.1, 3.3.2).
+- Approving puts a change live, so the review step, the simulation results and the logged decision satisfy error prevention (SC 3.3.4). The resolved line is a role="status" message (SC 4.1.3).
+
+## Keyboard
+
+| Keys | Action |
+|---|---|
+| Tab | Move through file rows, then Reject and Approve change |
+| Enter / Space | Open or close a file's diff, or press the focused button |
+| Enter (in Reject) | New line in the reason field; Tab to Reject change to send it |
+
+## Examples
+
+### agent-to-agent
+
+```tsx
+import { ChangeRequest, toast } from "@twoux/ui";
+import { useState } from "react";
+
+export const meta = { title: "One agent changes another's procedure", description: "A reviewing agent proposes an edit to the Listing checker's steps. It is reviewed like any change, with the proposing agent named and a staged ramp.", order: 2 };
+
+export default function Example() {
+	const [state, setState] = useState<"open" | "approved" | "rejected">("open");
+	return (
+		<div className="w-full max-w-2xl">
+			<ChangeRequest
+				title="Listing checker: ask before closing a listing with applicants"
+				from="9 listings closed with active applicants last month, found by the Quality reviewer agent"
+				reason="The Listing checker closed 3 listings that still had active applicants. This adds a step to ask for approval first. It would start with 10% of runs, then ramp up over a week."
+				files={[
+					{
+						path: "agents/listing-checker/steps.md",
+						lines: [
+							{ type: "ctx", text: "1. Find listings past their closing date." },
+							{ type: "add", text: "2. If a listing has active applicants, ask for approval." },
+							{ type: "del", text: "2. Close the listing." },
+							{ type: "add", text: "3. Close the listing." },
+						],
+					},
+				]}
+				simulation={{
+					suite: "Regression set, 60 listings",
+					cases: [
+						{ name: "Listing with 12 active applicants", status: "fixed" },
+						{ name: "Listing with no applicants", status: "pass" },
+						{ name: "Listing closed by a person yesterday", status: "pass" },
+					],
+				}}
+				state={state}
+				decidedBy={state === "approved" ? "Approved by Imogen Hart · 14:05 · ramping from 10%" : "Rejected by Imogen Hart · 14:05"}
+				onApprove={() => { setState("approved"); toast.success("Approved. Starting with 10% of runs."); }}
+				onReject={(why) => { setState("rejected"); toast("Rejected", { description: why }); }}
+			/>
+		</div>
+	);
+}
+```
+
+### review
+
+```tsx
+import { ChangeRequest, toast } from "@twoux/ui";
+import { useState } from "react";
+
+export const meta = { title: "Review a change to a prompt", description: "The reason, the diff and the test results in one card. Two cases that passed before now fail, so the footer says so. Reject asks for a reason.", order: 1 };
+
+export default function Example() {
+	const [state, setState] = useState<"open" | "approved" | "rejected">("open");
+	const [by, setBy] = useState<string>();
+	return (
+		<div className="w-full max-w-2xl">
+			<ChangeRequest
+				title="Reply in the applicant's language"
+				from="14 conversations this week"
+				reason="Applicants wrote in Welsh in 6 of 14 conversations and the assistant replied in English. This adds a line telling it to reply in the language the applicant used."
+				files={[
+					{
+						path: "prompts/applicant-reply.md",
+						lines: [
+							{ type: "ctx", text: "You answer applicants for Harbour Recruitment." },
+							{ type: "del", text: "Always reply in English." },
+							{ type: "add", text: "Reply in the language the applicant wrote in." },
+							{ type: "add", text: "If you are unsure of the language, reply in English." },
+							{ type: "ctx", text: "Never promise an interview date." },
+						],
+					},
+					{ path: "prompts/shortlist-summary.md", lines: [{ type: "add", text: "Summaries stay in English for the hiring team." }] },
+				]}
+				simulation={{
+					suite: "Golden set, 240 conversations",
+					cases: [
+						{ name: "Applicant asks about the closing date, in Welsh", status: "fixed" },
+						{ name: "Applicant asks about visa support, in Polish", status: "fixed" },
+						{ name: "Applicant mixes English and Welsh", status: "new-fail", detail: "Replied in Welsh only. Passed before this change." },
+						{ name: "Applicant writes only 'hi'", status: "new-fail", detail: "Replied in Welsh. Passed before this change." },
+						{ name: "Applicant asks for a call back", status: "fail", detail: "Still promises a date." },
+						{ name: "Applicant withdraws", status: "pass" },
+						{ name: "Applicant asks about pay", status: "pass" },
+					]}}
+				state={state}
+				decidedBy={by}
+				onApprove={() => { setState("approved"); setBy("Approved by Imogen Hart · 10:42"); toast.success("Approved. The change is live."); }}
+				onReject={(why) => { setState("rejected"); setBy("Rejected by Imogen Hart · 10:42"); toast("Rejected", { description: why }); }}
+			/>
+		</div>
+	);
+}
+```
+
+## Related
+
+- Suggested changes
+- Agent permissions
+- Agent run timeline
+- Confidence note
+- Plan preview
+- Prompt editor with fields