@poodle64/librarian 2026.9.6 → 2026.9.8

package/dist/components/activity-group/activity-group.svelte

@@ -1,11 +1,12 @@
 <!--
-  A whole investigation, as one line the reader can open.
+  A whole investigation, as ONE line the reader can open.
 
-  Fifteen tool rows stood between the question and the first word of the
-  answer, so the answer had to be scrolled to. While the agent is working the
-  steps are worth watching, so they show live. The moment prose starts
-  arriving they fold to a single summary — the same move Claude makes with
-  "Researched for 49s".
+  Not a stack. Fifteen tool rows between the question and the first word of the
+  answer is the machine room on show, and a running commentary of "Let me
+  check…" is worse: it narrates a mechanism Milton is under instruction never
+  to mention. So there is exactly one row in every state — "Working…" while it
+  runs, a count of what was done once it settles — and the steps are behind a
+  disclosure for the reader who wants them.
 -->
 <script lang="ts">
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
@@ -15,49 +16,40 @@
 
 	interface Props {
 		group: ActivityGroup;
-		/** True while this group is the live one — it stays open. */
+		/** True while this group is the live one. */
 		live: boolean;
 	}
 
 	let { group, live }: Props = $props();
 	let expanded = $state(false);
-	const open = $derived(live || expanded);
+
+	// A live group has nothing to count yet, so counting it reads as "0
+	// searches" flickering up to the real number.
+	const label = $derived(live ? 'Working…' : summariseActivity(group));
 </script>
 
-{#if live}
-	<div class="flex flex-col gap-1.5">
-		{#each group.steps as step (step.block.index)}
-			{#if step.block.kind === 'tool'}
-				<ToolRow block={step.block} repeats={step.repeats} running={true} />
-			{:else}
-				<ThinkingRow
-					block={step.block}
-					active={step.block.index === group.steps.at(-1)?.block.index}
-				/>
-			{/if}
-		{/each}
-	</div>
-{:else}
-	<div>
-		<button
-			type="button"
-			class="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors"
-			onclick={() => (expanded = !expanded)}
-			aria-expanded={expanded}
-		>
-			<ChevronRightIcon class="size-3.5 transition-transform {expanded ? 'rotate-90' : ''}" />
-			<span>{summariseActivity(group)}</span>
-		</button>
-		{#if open}
-			<div class="border-border mt-2 ml-1.75 flex flex-col gap-1.5 border-l pl-3">
-				{#each group.steps as step (step.block.index)}
-					{#if step.block.kind === 'tool'}
-						<ToolRow block={step.block} repeats={step.repeats} running={false} />
-					{:else}
-						<ThinkingRow block={step.block} active={false} />
-					{/if}
-				{/each}
-			</div>
+<div>
+	<button
+		type="button"
+		class="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors"
+		onclick={() => (expanded = !expanded)}
+		aria-expanded={expanded}
+	>
+		<ChevronRightIcon class="size-3.5 transition-transform {expanded ? 'rotate-90' : ''}" />
+		{#if live}
+			<span class="bg-status-info size-1.5 shrink-0 animate-pulse rounded-full"></span>
 		{/if}
-	</div>
-{/if}
+		<span>{label}</span>
+	</button>
+	{#if expanded}
+		<div class="border-border mt-2 ml-1.75 flex flex-col gap-1.5 border-l pl-3">
+			{#each group.steps as step (step.block.index)}
+				{#if step.block.kind === 'tool'}
+					<ToolRow block={step.block} repeats={step.repeats} running={live} />
+				{:else}
+					<ThinkingRow block={step.block} active={false} />
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/components/activity-group/activity-group.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type ActivityGroup } from '../../transcript.svelte';
 interface Props {
     group: ActivityGroup;
-    /** True while this group is the live one — it stays open. */
+    /** True while this group is the live one. */
     live: boolean;
 }
 declare const ActivityGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/agent-transcript/agent-transcript.svelte

@@ -1,12 +1,29 @@
 <!--
-  One question and everything the agent did answering it.
+  One question and everything Milton did answering it.
 
-  User turn as a rounded bubble, assistant prose led by a status dot, tool
-  calls as rows in the flow, thinking as stacked phase labels that dim once
-  superseded.
+  Three things carry the shape. The question is a bubble against the edge, so a
+  reader scanning back finds their own words without reading any of the answer.
+  The answer is plain prose held to a reading measure, because a full-width
+  line at 1440 is the single clearest tell that a surface was never read on.
+  Everything Milton DID is one quiet line above it, never a stack.
 -->
 <script lang="ts">
-	import { segment, type Block, type Outcome } from '../../transcript.svelte';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
+	import {
+		readerQuestion,
+		segment,
+		type Block,
+		type Outcome,
+		type TextBlock
+	} from '../../transcript.svelte';
+	import {
+		citationMarkers,
+		resolveCitations,
+		splitSources,
+		type Citation
+	} from '../../citations';
 	import Working from '../working/working.svelte';
 	import ActivityGroup from '../activity-group/activity-group.svelte';
 	import Markdown from '../markdown/markdown.svelte';
@@ -16,16 +33,79 @@
 		blocks: Block[];
 		outcome: Outcome | null;
 		running: boolean;
+		/** Sources from the library's `citations` frame. Absent falls back to
+		 *  whatever a "## Sources" block in the prose says. */
+		citations?: Citation[];
 		/** Forwarded to Markdown; omit if the caller has no collections to chip. */
 		collectionNames?: Set<string>;
+		/** Opens the document pane. Omit and chips render but do not open. */
+		oncite?: (citation: Citation) => void;
+		/** Offered on the LAST answer only — re-asks the same question. */
+		onregenerate?: () => void;
 	}
 
-	let { question, blocks, outcome, running, collectionNames = new Set() }: Props = $props();
+	let {
+		question,
+		blocks,
+		outcome,
+		running,
+		citations = [],
+		collectionNames = new Set(),
+		oncite,
+		onregenerate
+	}: Props = $props();
 
-	// An activity group stays live — and therefore open — only while it is the
-	// last thing in the turn. As soon as prose arrives after it, it folds.
+	const asked = $derived(readerQuestion(question));
+
+	// An activity group stays live — and therefore labelled "Working…" — only
+	// while it is the last thing in the turn. As soon as prose arrives, it
+	// settles into its count.
 	const segments = $derived(segment(blocks));
 	const lastIndex = $derived(segments.at(-1)?.index ?? -1);
+
+	// An answer can arrive as SEVERAL text blocks with tool calls between them,
+	// so the Sources block is at the end of the LAST one. It is split off that
+	// block alone: splitting the joined answer and substituting the result back
+	// into one segment would print every earlier block twice.
+	//
+	// And only once the answer has settled — mid-stream the "## Sources" heading
+	// may be all that has arrived, with the list still to come.
+	const texts = $derived(segments.filter((s): s is TextBlock => s.kind === 'text'));
+	const lastTextIndex = $derived(texts.at(-1)?.index ?? -1);
+	const split = $derived(
+		running ? { body: '', citations: [] } : splitSources(texts.at(-1)?.text ?? '')
+	);
+	const sources = $derived(resolveCitations(citations, split.citations));
+
+	/** The answer as a reader would paste it: every block, Sources stripped. */
+	const answer = $derived(
+		texts
+			.map((s) => (s.index === lastTextIndex && split.citations.length > 0 ? split.body : s.text))
+			.join('\n\n')
+	);
+
+	// Only a number the prose actually marks becomes a chip; a source list may
+	// legitimately carry an entry the answer never points at inline.
+	const numbers = $derived(
+		new Set(citationMarkers(answer).filter((n) => sources.some((c) => c.n === n)))
+	);
+
+	const hasAnswer = $derived(texts.length > 0);
+	// A failed turn settles too, and "Ask again" is the one thing a reader wants
+	// from it — there is just nothing to copy.
+	const settled = $derived(!running && (hasAnswer || Boolean(outcome?.error)));
+
+	let copied = $state(false);
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(answer);
+			copied = true;
+			setTimeout(() => (copied = false), 1600);
+		} catch {
+			// A denied clipboard permission is not worth an error state on an
+			// answer the reader can still select by hand.
+		}
+	}
 </script>
 
 <article class="flex flex-col gap-3">
@@ -33,9 +113,9 @@
 	     panel: this surface is read by people who arrive with those two as
 	     their model of what a chat looks like. -->
 	<div
-		class="bg-surface-3 text-foreground border-border max-w-[85%] self-end rounded-2xl border px-4 py-2.5 text-base"
+		class="bg-surface-3 text-foreground border-border max-w-[85%] self-end rounded-2xl border px-4 py-2.5 text-base break-words whitespace-pre-wrap"
 	>
-		{question}
+		{asked}
 	</div>
 
 	{#if running && segments.length === 0}
@@ -46,26 +126,92 @@
 		{#if seg.kind === 'activity'}
 			<ActivityGroup group={seg} live={running && seg.index === lastIndex} />
 		{:else}
-			<div class="flex gap-2.5">
-				<span class="bg-muted-foreground/40 mt-2.5 size-1.5 shrink-0 rounded-full"></span>
-				<div class="min-w-0 flex-1">
-					<Markdown
-						content={seg.text}
-						streaming={running && seg.index === lastIndex}
-						{collectionNames}
-					/>
-				</div>
+			<div class="max-w-[72ch] min-w-0">
+				<Markdown
+					content={seg.index === lastTextIndex && split.citations.length > 0
+						? split.body
+						: seg.text}
+					streaming={running && seg.index === lastIndex}
+					{collectionNames}
+					citationNumbers={numbers}
+					oncite={(n) => {
+						const found = sources.find((c) => c.n === n);
+						if (found) oncite?.(found);
+					}}
+				/>
 			</div>
 		{/if}
 	{/each}
 
-	{#if outcome}
-		<p class="text-muted-foreground pl-4 font-mono text-xs tabular-nums">
-			{#if outcome.error}
-				{outcome.error}
-			{:else}
-				{outcome.turns} turns · {((outcome.durationMs ?? 0) / 1000).toFixed(1)}s
-			{/if}
+	{#if sources.length > 0}
+		<section class="max-w-[72ch]">
+			<h2 class="text-muted-foreground mb-1.5 text-xs font-medium tracking-wide uppercase">
+				Sources
+			</h2>
+			<ol class="flex flex-col gap-1">
+				{#each sources as source (source.n)}
+					<li>
+						<button
+							type="button"
+							onclick={() => oncite?.(source)}
+							disabled={!source.document_id || !oncite}
+							class="border-border hover:border-border-strong hover:bg-surface-2 focus-visible:ring-ring flex w-full items-baseline gap-2 rounded-lg border px-2.5 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-default disabled:hover:bg-transparent"
+						>
+							<span
+								class="bg-primary/15 text-foreground shrink-0 rounded px-1.5 font-mono text-xs tabular-nums"
+								>{source.n}</span
+							>
+							<span class="min-w-0">
+								<span class="text-foreground">{source.title}</span>
+								{#if source.section}<span class="text-muted-foreground">
+										· {source.section}</span
+									>{/if}
+							</span>
+						</button>
+					</li>
+				{/each}
+			</ol>
+		</section>
+	{/if}
+
+	{#if outcome?.error}
+		<p
+			class="border-status-error/40 bg-status-error/10 text-foreground max-w-[72ch] rounded-lg border px-3 py-2 text-sm"
+			role="alert"
+		>
+			{outcome.error}
 		</p>
 	{/if}
+
+	{#if settled}
+		<div class="text-muted-foreground -ml-1.5 flex items-center gap-1">
+			{#if hasAnswer}
+				<button
+					type="button"
+					onclick={copy}
+					aria-label={copied ? 'Copied' : 'Copy answer'}
+					class="hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring flex items-center gap-1.5 rounded-md px-1.5 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
+				>
+					{#if copied}<CheckIcon class="size-3.5" />{:else}<CopyIcon class="size-3.5" />{/if}
+					<span>{copied ? 'Copied' : 'Copy'}</span>
+				</button>
+			{/if}
+			{#if onregenerate}
+				<button
+					type="button"
+					onclick={onregenerate}
+					aria-label="Ask again"
+					class="hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring flex items-center gap-1.5 rounded-md px-1.5 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
+				>
+					<RefreshCwIcon class="size-3.5" />
+					<span>Ask again</span>
+				</button>
+			{/if}
+			{#if outcome && !outcome.error}
+				<span class="pl-1 font-mono text-xs tabular-nums opacity-70">
+					{((outcome.durationMs ?? 0) / 1000).toFixed(1)}s
+				</span>
+			{/if}
+		</div>
+	{/if}
 </article>

package/dist/components/agent-transcript/agent-transcript.svelte.d.ts

@@ -1,11 +1,19 @@
 import { type Block, type Outcome } from '../../transcript.svelte';
+import { type Citation } from '../../citations';
 interface Props {
     question: string;
     blocks: Block[];
     outcome: Outcome | null;
     running: boolean;
+    /** Sources from the library's `citations` frame. Absent falls back to
+     *  whatever a "## Sources" block in the prose says. */
+    citations?: Citation[];
     /** Forwarded to Markdown; omit if the caller has no collections to chip. */
     collectionNames?: Set<string>;
+    /** Opens the document pane. Omit and chips render but do not open. */
+    oncite?: (citation: Citation) => void;
+    /** Offered on the LAST answer only — re-asks the same question. */
+    onregenerate?: () => void;
 }
 declare const AgentTranscript: import("svelte").Component<Props, {}, "">;
 type AgentTranscript = ReturnType<typeof AgentTranscript>;

package/dist/components/composer/composer.svelte

@@ -1,18 +1,27 @@
 <!--
-  The composer: one rounded box holding the input AND a footer row.
+  The composer: one rounded box holding attachments, the input AND a footer row.
 
-  Two things carry it: the chips sit BELOW the input inside the same box
-  rather than beside it, and the trailing control is a circular filled accent
-  button. The empty→typing transition lives almost entirely in that control —
-  the box chrome does not resize.
+  Two things carry it: the chips sit BELOW the input inside the same box rather
+  than beside it, and the trailing control is a circular filled accent button.
+  The empty→typing transition lives almost entirely in that control — the box
+  chrome grows with the text and nothing else moves.
 
-  The composer stays enabled while the agent works. Queuing the next message
-  is not built yet; disabling the box would be a different and worse
-  behaviour than the one being copied, so it is not disabled.
+  While Milton is answering the box is disabled and the send button becomes a
+  stop button. Queuing the next message is not built, and a box that takes
+  typing it will then discard is worse than one that plainly waits.
 -->
 <script lang="ts">
 	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import PaperclipIcon from '@lucide/svelte/icons/paperclip';
 	import SquareIcon from '@lucide/svelte/icons/square';
+	import XIcon from '@lucide/svelte/icons/x';
+	import {
+		ACCEPT_ATTRIBUTE,
+		acceptFiles,
+		formatSize,
+		MAX_FILES,
+		rejectionMessage
+	} from '../../attachments';
 
 	export type Scope = 'document' | 'collection' | 'library';
 
@@ -20,9 +29,13 @@
 		value: string;
 		running: boolean;
 		scope: Scope;
+		/** Files to send with the next question. Cleared by the caller on send. */
+		files?: File[];
 		/** Names for the two narrower scopes; absent means that scope is unavailable. */
 		documentName?: string;
 		collectionName?: string;
+		/** Hides the paperclip for a host whose ask route takes no files. */
+		attachments?: boolean;
 		onscope: (scope: Scope) => void;
 		onsubmit: () => void;
 		onstop: () => void;
@@ -32,8 +45,10 @@
 		value = $bindable(),
 		running,
 		scope,
+		files = $bindable([]),
 		documentName,
 		collectionName,
+		attachments = true,
 		onscope,
 		onsubmit,
 		onstop
@@ -62,64 +77,205 @@
 	// ("defence-s…", "All colle…"). Wrapping beats truncating: a chip a reader
 	// cannot finish reading is not a control, it is decoration.
 
+	let textarea = $state<HTMLTextAreaElement | null>(null);
+	let picker = $state<HTMLInputElement | null>(null);
+	let rejected = $state('');
+
+	/** Six lines, then it scrolls. A `rows` attribute cannot express that —
+	 *  it sets the floor, not the ceiling — so the height is measured from the
+	 *  content and capped. `height: auto` first, or `scrollHeight` reports the
+	 *  height the box already has and the box can only ever grow. */
+	function grow() {
+		const el = textarea;
+		if (!el) return;
+		el.style.height = 'auto';
+		const line = parseFloat(getComputedStyle(el).lineHeight) || 24;
+		el.style.height = `${Math.min(el.scrollHeight, line * 6 + 20)}px`;
+	}
+
+	$effect(() => {
+		// Read `value` so a programmatic change (an example question tapped in
+		// the empty state) resizes the box too, not only typing.
+		void value;
+		grow();
+	});
+
+	// Focus comes back once Milton is done, so a reader can keep going without
+	// reaching for the mouse. It has to be the transition OUT of `running`: a
+	// disabled element cannot hold focus, so the focus call in `submit()` below
+	// survives only for a host that never sets `running` — measured, focus lands
+	// on `body` the frame the box disables and comes back here.
+	//
+	// Plain, not `$state`: read and written in the same effect, which would
+	// otherwise re-trigger itself forever.
+	let wasRunning = false;
+	$effect(() => {
+		if (wasRunning && !running) textarea?.focus();
+		wasRunning = running;
+	});
+
+	function submit() {
+		if (!value.trim() || running) return;
+		onsubmit();
+		textarea?.focus();
+	}
+
 	function keydown(event: KeyboardEvent) {
 		// Enter sends, Shift+Enter breaks the line — the convention in every
 		// reference and the one a user will try first.
 		if (event.key === 'Enter' && !event.shiftKey) {
 			event.preventDefault();
-			if (value.trim()) onsubmit();
+			submit();
 		}
 	}
+
+	function take(list: FileList | File[] | null) {
+		if (!list) return;
+		const check = acceptFiles(files, list);
+		files = check.accepted;
+		rejected = rejectionMessage(check.rejected);
+	}
+
+	function pick(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		take(input.files);
+		// Same file twice in a row fires no change event unless the value is
+		// cleared, so removing a chip and re-adding it would silently do nothing.
+		input.value = '';
+	}
+
+	function remove(index: number) {
+		files = files.filter((_, i) => i !== index);
+		rejected = '';
+	}
+
+	// The keyboard does not shrink the layout viewport on iOS, so a composer at
+	// the bottom of a full-height column sits UNDER it. The visual viewport is
+	// the one that moves; the overlap between the two is exactly how far the
+	// box must rise.
+	let lift = $state(0);
+	$effect(() => {
+		const viewport = globalThis.visualViewport;
+		if (!viewport) return;
+		const measure = () => {
+			lift = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
+		};
+		measure();
+		viewport.addEventListener('resize', measure);
+		viewport.addEventListener('scroll', measure);
+		return () => {
+			viewport.removeEventListener('resize', measure);
+			viewport.removeEventListener('scroll', measure);
+		};
+	});
 </script>
 
 <div
-	class="border-border bg-surface-1 focus-within:border-primary/60 rounded-xl border transition-colors"
+	style="transform: translateY(-{lift}px); padding-bottom: {lift
+		? '0px'
+		: 'env(safe-area-inset-bottom, 0px)'}"
+	class="transition-transform duration-150"
 >
-	<textarea
-		bind:value
-		onkeydown={keydown}
-		rows="2"
-		placeholder={running ? 'Queue another message…' : 'Ask Milton…'}
-		class="text-foreground placeholder:text-muted-foreground max-h-52 w-full resize-none bg-transparent px-4 pt-3 pb-2 text-base outline-none"
-	></textarea>
-
-	<div class="flex items-center gap-2 px-3 pb-2.5">
-		{#if hasChoice}
-			<div class="flex min-w-0 flex-wrap items-center gap-1">
-				{#each choices as choice (choice.id)}
-					<button
-						type="button"
-						onclick={() => onscope(choice.id)}
-						class="max-w-full truncate rounded-full px-2 py-0.5 text-xs transition-colors {scope ===
-						choice.id
-							? 'bg-primary/15 text-foreground border-primary/40 border'
-							: 'text-muted-foreground hover:text-foreground border border-transparent'}"
+	<div
+		class="border-border bg-surface-1 focus-within:border-primary/60 rounded-xl border transition-colors"
+	>
+		{#if files.length > 0}
+			<ul class="flex flex-wrap gap-1.5 px-3 pt-3">
+				{#each files as file, index (file.name + file.size)}
+					<li
+						class="border-border bg-surface-2 flex max-w-full items-center gap-1.5 rounded-lg border py-1 pr-1 pl-2 text-xs"
 					>
-						{choice.label}
-					</button>
+						<span class="text-foreground truncate">{file.name}</span>
+						<span class="text-muted-foreground shrink-0 tabular-nums">{formatSize(file.size)}</span
+						>
+						<button
+							type="button"
+							onclick={() => remove(index)}
+							aria-label="Remove {file.name}"
+							class="text-muted-foreground hover:text-foreground hover:bg-surface-3 focus-visible:ring-ring flex size-5 shrink-0 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
+						>
+							<XIcon class="size-3" />
+						</button>
+					</li>
 				{/each}
-			</div>
-		{/if}
-		<span class="flex-1"></span>
-		{#if running}
-			<button
-				type="button"
-				onclick={onstop}
-				aria-label="Stop"
-				class="bg-foreground text-background hover:bg-foreground/90 flex size-8 items-center justify-center rounded-full transition-colors"
-			>
-				<SquareIcon class="size-3.5 fill-current" />
-			</button>
-		{:else}
-			<button
-				type="button"
-				onclick={onsubmit}
-				disabled={!value.trim()}
-				aria-label="Send"
-				class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:hover:bg-primary flex size-8 items-center justify-center rounded-full transition-all disabled:opacity-30"
-			>
-				<ArrowUpIcon class="size-4" />
-			</button>
+			</ul>
 		{/if}
+
+		<textarea
+			bind:this={textarea}
+			bind:value
+			oninput={grow}
+			onkeydown={keydown}
+			rows="1"
+			disabled={running}
+			placeholder={running ? 'Milton is answering…' : 'Ask Milton…'}
+			class="text-foreground placeholder:text-muted-foreground w-full resize-none bg-transparent px-4 pt-3 pb-2 text-base outline-none disabled:opacity-60"
+		></textarea>
+
+		<div class="flex items-center gap-2 px-3 pb-2.5">
+			{#if attachments}
+				<input
+					bind:this={picker}
+					type="file"
+					multiple
+					accept={ACCEPT_ATTRIBUTE}
+					onchange={pick}
+					class="hidden"
+					tabindex="-1"
+					aria-hidden="true"
+				/>
+				<button
+					type="button"
+					onclick={() => picker?.click()}
+					disabled={running || files.length >= MAX_FILES}
+					aria-label="Attach a file"
+					class="text-muted-foreground hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring flex size-8 shrink-0 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30"
+				>
+					<PaperclipIcon class="size-4" />
+				</button>
+			{/if}
+
+			{#if hasChoice}
+				<div class="flex min-w-0 flex-wrap items-center gap-1">
+					{#each choices as choice (choice.id)}
+						<button
+							type="button"
+							onclick={() => onscope(choice.id)}
+							class="max-w-full truncate rounded-full px-2 py-0.5 text-xs transition-colors {scope ===
+							choice.id
+								? 'bg-primary/15 text-foreground border-primary/40 border'
+								: 'text-muted-foreground hover:text-foreground border border-transparent'}"
+						>
+							{choice.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+			<span class="flex-1"></span>
+			{#if running}
+				<button
+					type="button"
+					onclick={onstop}
+					aria-label="Stop"
+					class="bg-foreground text-background hover:bg-foreground/90 flex size-8 items-center justify-center rounded-full transition-colors"
+				>
+					<SquareIcon class="size-3.5 fill-current" />
+				</button>
+			{:else}
+				<button
+					type="button"
+					onclick={submit}
+					disabled={!value.trim()}
+					aria-label="Send"
+					class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:hover:bg-primary flex size-8 items-center justify-center rounded-full transition-all disabled:opacity-30"
+				>
+					<ArrowUpIcon class="size-4" />
+				</button>
+			{/if}
+		</div>
 	</div>
+
+	{#if rejected}
+		<p class="text-status-error px-1 pt-1.5 text-xs" role="status" aria-live="polite">{rejected}</p>
+	{/if}
 </div>