@poodle64/librarian 2026.9.6 → 2026.9.7

package/dist/components/composer/composer.svelte.d.ts

@@ -3,13 +3,17 @@ interface Props {
     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;
 }
-declare const Composer: import("svelte").Component<Props, {}, "value">;
+declare const Composer: import("svelte").Component<Props, {}, "value" | "files">;
 type Composer = ReturnType<typeof Composer>;
 export default Composer;

package/dist/components/conversation/conversation.svelte

@@ -0,0 +1,179 @@
+<!--
+  The whole reading surface: every turn, the scroll that follows the stream,
+  and the source pane beside it.
+
+  This owns the SCROLL CONTAINER, which is the reason it exists rather than the
+  host composing `AgentTranscript` in a div of its own. Follow-scroll, the
+  jump-to-latest pill and a document pane that narrows the transcript instead
+  of covering it are all one question — where the overflow lives — and three
+  hosts answering it separately is three chances to answer it differently.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+	import type { Turn } from '../../transcript.svelte';
+	import type { Citation, LoadDocument } from '../../citations';
+	import { FollowScroll } from '../../follow-scroll.svelte';
+	import AgentTranscript from '../agent-transcript/agent-transcript.svelte';
+	import DocumentPane from '../document-pane/document-pane.svelte';
+
+	interface Props {
+		turns: Turn[];
+		running: boolean;
+		/** `Transcript.version` — bumped per event. Text grows in place, so a
+		 *  count of turns is not enough to keep the scroll following. */
+		version?: number;
+		welcome?: string;
+		/** Up to three, shown in the empty state as tappable pills. */
+		examples?: string[];
+		onexample?: (question: string) => void;
+		/** Re-asks the last question. Offered on the last answer only. */
+		onregenerate?: () => void;
+		/** Enables the source pane. Without it, chips render but do not open. */
+		loadDocument?: LoadDocument;
+		collectionNames?: Set<string>;
+		/** The composer, rendered INSIDE the transcript column so the source
+		 *  pane narrows it too — a composer the host places outside slides
+		 *  under the pane the moment one opens. */
+		composer?: Snippet;
+	}
+
+	let {
+		turns,
+		running,
+		version = 0,
+		welcome = 'Ask Milton a question about the library.',
+		examples = [],
+		onexample,
+		onregenerate,
+		loadDocument,
+		collectionNames = new Set(),
+		composer
+	}: Props = $props();
+
+	let viewport = $state<HTMLElement | null>(null);
+	let open = $state<Citation | null>(null);
+	const follow = new FollowScroll();
+
+	function metrics(el: HTMLElement) {
+		return {
+			scrollTop: el.scrollTop,
+			clientHeight: el.clientHeight,
+			scrollHeight: el.scrollHeight
+		};
+	}
+
+	// A new question re-pins: the reader asked for the thing about to arrive,
+	// even if they were reading something further up when they asked.
+	//
+	// Deliberately NOT `$state`: an effect that both reads and writes one piece
+	// of reactive state re-triggers itself, which Svelte stops with
+	// `effect_update_depth_exceeded` — measured, on this component. Nothing
+	// renders this, so a plain variable is both correct and enough.
+	let seen = 0;
+	$effect(() => {
+		if (turns.length > seen) follow.pin();
+		seen = turns.length;
+	});
+
+	$effect(() => {
+		// Both dependencies are deliberate: `version` for text growing inside an
+		// existing block, `turns.length` for a whole new turn.
+		void version;
+		void turns.length;
+		if (!viewport || !follow.following) return;
+		viewport.scrollTop = viewport.scrollHeight;
+	});
+
+	function scrolled() {
+		if (viewport) follow.measure(metrics(viewport));
+	}
+
+	function jump() {
+		if (!viewport) return;
+		follow.pin();
+		viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
+	}
+
+	function cite(citation: Citation) {
+		// A citation derived from the prose has no id to read, so its chip is
+		// legible but inert rather than opening an empty pane.
+		if (loadDocument && citation.document_id) open = citation;
+	}
+</script>
+
+<div class="flex min-h-0 flex-1">
+	<div class="flex min-h-0 min-w-0 flex-1 flex-col">
+		<!-- The pill is positioned against the SCROLL region, not the column: the
+		     composer is in the column too, and a pill over the input is a pill in
+		     the way. -->
+		<div class="relative flex min-h-0 flex-1 flex-col">
+		<div
+			bind:this={viewport}
+			onscroll={scrolled}
+			role="log"
+			aria-live="polite"
+			aria-label="Conversation with Milton"
+			class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+		>
+			<div class="mx-auto flex w-full max-w-[46rem] flex-col gap-8 px-4 py-6">
+				{#if turns.length === 0}
+					<div class="flex flex-col items-start gap-4 py-8">
+						<p class="text-foreground max-w-[46ch] text-lg leading-snug">{welcome}</p>
+						{#if examples.length > 0}
+							<ul class="flex flex-col items-start gap-2">
+								{#each examples.slice(0, 3) as example (example)}
+									<li class="max-w-full">
+										<button
+											type="button"
+											onclick={() => onexample?.(example)}
+											class="border-border hover:border-border-strong hover:bg-surface-2 focus-visible:ring-ring text-foreground max-w-full rounded-full border px-3.5 py-2 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
+										>
+											{example}
+										</button>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</div>
+				{/if}
+
+				{#each turns as turn, index (turn.id)}
+					<AgentTranscript
+						question={turn.question}
+						blocks={turn.blocks}
+						outcome={turn.outcome}
+						running={running && index === turns.length - 1}
+						citations={turn.citations ?? []}
+						{collectionNames}
+						oncite={cite}
+						onregenerate={index === turns.length - 1 && !running ? onregenerate : undefined}
+					/>
+				{/each}
+			</div>
+		</div>
+
+		{#if !follow.following && turns.length > 0}
+			<button
+				type="button"
+				onclick={jump}
+				class="border-border bg-surface-1 text-foreground hover:bg-surface-2 focus-visible:ring-ring absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs shadow-lg transition-colors focus-visible:ring-2 focus-visible:outline-none"
+			>
+				<ArrowDownIcon class="size-3.5" />
+				Jump to latest
+			</button>
+		{/if}
+		</div>
+
+		{#if composer}
+			<div class="shrink-0 px-4 pb-3">
+				<div class="mx-auto w-full max-w-[46rem]">{@render composer()}</div>
+			</div>
+		{/if}
+
+	</div>
+
+	{#if open && loadDocument}
+		<DocumentPane citation={open} {loadDocument} onclose={() => (open = null)} />
+	{/if}
+</div>

package/dist/components/conversation/conversation.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { Turn } from '../../transcript.svelte';
+import type { LoadDocument } from '../../citations';
+interface Props {
+    turns: Turn[];
+    running: boolean;
+    /** `Transcript.version` — bumped per event. Text grows in place, so a
+     *  count of turns is not enough to keep the scroll following. */
+    version?: number;
+    welcome?: string;
+    /** Up to three, shown in the empty state as tappable pills. */
+    examples?: string[];
+    onexample?: (question: string) => void;
+    /** Re-asks the last question. Offered on the last answer only. */
+    onregenerate?: () => void;
+    /** Enables the source pane. Without it, chips render but do not open. */
+    loadDocument?: LoadDocument;
+    collectionNames?: Set<string>;
+    /** The composer, rendered INSIDE the transcript column so the source
+     *  pane narrows it too — a composer the host places outside slides
+     *  under the pane the moment one opens. */
+    composer?: Snippet;
+}
+declare const Conversation: import("svelte").Component<Props, {}, "">;
+type Conversation = ReturnType<typeof Conversation>;
+export default Conversation;

package/dist/components/conversation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Conversation } from './conversation.svelte';
+export { default } from './conversation.svelte';

package/dist/components/conversation/index.js

@@ -0,0 +1,2 @@
+export { default as Conversation } from './conversation.svelte';
+export { default } from './conversation.svelte';

package/dist/components/document-pane/document-pane.svelte

@@ -0,0 +1,177 @@
+<!--
+  The cited document, open at the cited passage.
+
+  One element, two shapes. On a desktop it is a real column in the flow at
+  about 40% of the width and draggable — the transcript narrows beside it and
+  nothing is covered. Below `lg` there is no width to give it, so the same
+  element becomes a bottom sheet over the conversation. Two components would
+  have meant two behaviours to keep honest; a class list is cheaper than that.
+-->
+<script lang="ts">
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Citation, LoadDocument, LoadedDocument } from '../../citations';
+	import Markdown from '../markdown/markdown.svelte';
+
+	interface Props {
+		citation: Citation;
+		loadDocument: LoadDocument;
+		onclose: () => void;
+	}
+
+	let { citation, loadDocument, onclose }: Props = $props();
+
+	const MIN_WIDTH = 320;
+	/** ~40% of a 1440 desktop, which is the width the pane is designed at. */
+	const DEFAULT_WIDTH = 560;
+
+	let width = $state(DEFAULT_WIDTH);
+	let document_ = $state<LoadedDocument | null>(null);
+	let failed = $state(false);
+	let scroller = $state<HTMLElement | null>(null);
+	let closeButton = $state<HTMLButtonElement | null>(null);
+
+	// Keyed on the id, so re-citing the same document while the pane is open
+	// moves to the new section without a second fetch and without a flash of
+	// the loading state.
+	// Plain, not `$state`: the effect below both reads and writes it, and
+	// nothing renders it.
+	let loadedId: string | null = null;
+
+	$effect(() => {
+		const id = citation.document_id;
+		if (!id || id === loadedId) return;
+		let cancelled = false;
+		document_ = null;
+		failed = false;
+		loadDocument(id)
+			.then((doc) => {
+				if (cancelled) return;
+				document_ = doc;
+				loadedId = id;
+			})
+			.catch(() => {
+				if (!cancelled) failed = true;
+			});
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	// The anchor is the citation's own address; the section heading is the
+	// fallback for a citation that carries only prose-derived words.
+	const activeAnchor = $derived.by(() => {
+		const sections = document_?.sections ?? [];
+		if (citation.anchor && sections.some((s) => s.anchor === citation.anchor))
+			return citation.anchor;
+		return sections.find((s) => s.heading === citation.section)?.anchor ?? sections[0]?.anchor ?? '';
+	});
+
+	$effect(() => {
+		if (!scroller || !activeAnchor) return;
+		const target = scroller.querySelector(`[data-anchor="${CSS.escape(activeAnchor)}"]`);
+		target?.scrollIntoView({ block: 'center' });
+	});
+
+	// Opening a pane a reader reached with the keyboard must move focus into
+	// it, or Escape and Tab both act on the transcript behind it.
+	$effect(() => {
+		const returnTo = globalThis.document?.activeElement as HTMLElement | null;
+		closeButton?.focus();
+		return () => returnTo?.focus?.();
+	});
+
+	function keydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.stopPropagation();
+			onclose();
+		}
+	}
+
+	let dragFrom: { x: number; width: number } | null = null;
+
+	function startDrag(event: PointerEvent) {
+		dragFrom = { x: event.clientX, width };
+		(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+	}
+
+	function drag(event: PointerEvent) {
+		if (!dragFrom) return;
+		// The handle is on the pane's LEFT edge, so dragging left widens it.
+		const next = dragFrom.width - (event.clientX - dragFrom.x);
+		width = Math.max(MIN_WIDTH, Math.min(next, window.innerWidth * 0.7));
+	}
+
+	function endDrag(event: PointerEvent) {
+		dragFrom = null;
+		(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);
+	}
+</script>
+
+<svelte:window onkeydown={keydown} />
+
+<aside
+	style="--pane-width: {width}px"
+	aria-label="Source document"
+	class="bg-surface-1 border-border fixed inset-x-0 bottom-0 z-40 flex h-[80svh] flex-col rounded-t-2xl border-t shadow-2xl lg:static lg:h-auto lg:w-[var(--pane-width)] lg:shrink-0 lg:rounded-none lg:border-t-0 lg:border-l lg:shadow-none"
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -- a pointer-only
+	     affordance for a width that has a keyboard-independent default; the
+	     pane is fully usable without ever touching it. -->
+	<div
+		onpointerdown={startDrag}
+		onpointermove={drag}
+		onpointerup={endDrag}
+		class="hover:bg-primary/40 absolute inset-y-0 left-0 hidden w-1.5 cursor-col-resize lg:block"
+	></div>
+
+	<!-- The sheet's grabber. Below `lg` this is an overlay a reader has to be
+	     able to see the top edge of; on a desktop it is a column, and a column
+	     with a handle on it reads as draggable in the wrong axis. -->
+	<div class="flex justify-center pt-2 pb-1 lg:hidden" aria-hidden="true">
+		<span class="bg-border h-1 w-9 rounded-full"></span>
+	</div>
+
+	<header class="border-border flex items-start gap-2 border-b px-4 py-3 lg:pt-3">
+		<div class="min-w-0 flex-1">
+			<h2 class="text-foreground truncate text-sm font-semibold">
+				{document_?.title ?? citation.title}
+			</h2>
+			{#if citation.section}
+				<p class="text-muted-foreground truncate text-xs">{citation.section}</p>
+			{/if}
+		</div>
+		<button
+			bind:this={closeButton}
+			type="button"
+			onclick={onclose}
+			aria-label="Close source"
+			class="text-muted-foreground hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring -mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none"
+		>
+			<XIcon class="size-4" />
+		</button>
+	</header>
+
+	<div bind:this={scroller} class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-3">
+		{#if failed}
+			<p class="text-muted-foreground text-sm">That document can't be opened right now.</p>
+		{:else if !document_}
+			<div class="flex flex-col gap-2" aria-hidden="true">
+				{#each [0, 1, 2, 3] as row (row)}
+					<div class="bg-muted h-4 animate-pulse rounded" style="width: {90 - row * 12}%"></div>
+				{/each}
+			</div>
+		{:else}
+			{#each document_.sections as section (section.anchor)}
+				<section
+					data-anchor={section.anchor}
+					class="scroll-mt-4 rounded-lg px-3 py-2 {section.anchor === activeAnchor
+						? 'border-primary/50 bg-primary/8 border-l-2'
+						: ''}"
+				>
+					<h3 class="text-foreground mb-1 text-sm font-semibold">{section.heading}</h3>
+					<Markdown content={section.text} dense />
+				</section>
+			{/each}
+		{/if}
+	</div>
+</aside>

package/dist/components/document-pane/document-pane.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Citation, LoadDocument } from '../../citations';
+interface Props {
+    citation: Citation;
+    loadDocument: LoadDocument;
+    onclose: () => void;
+}
+declare const DocumentPane: import("svelte").Component<Props, {}, "">;
+type DocumentPane = ReturnType<typeof DocumentPane>;
+export default DocumentPane;

package/dist/components/document-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DocumentPane } from './document-pane.svelte';
+export { default } from './document-pane.svelte';

package/dist/components/document-pane/index.js

@@ -0,0 +1,2 @@
+export { default as DocumentPane } from './document-pane.svelte';
+export { default } from './document-pane.svelte';

package/dist/components/markdown/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Markdown } from './markdown.svelte';
 export { default } from './markdown.svelte';
-export { balance, render, markCollections, highlight } from './markdown';
+export { balance, render, markCollections, markCitations, highlight } from './markdown';

package/dist/components/markdown/index.js

@@ -1,3 +1,3 @@
 export { default as Markdown } from './markdown.svelte';
 export { default } from './markdown.svelte';
-export { balance, render, markCollections, highlight } from './markdown';
+export { balance, render, markCollections, markCitations, highlight } from './markdown';

package/dist/components/markdown/markdown.d.ts

@@ -29,6 +29,19 @@ export declare function render(markdown: string, { streaming }?: {
  * cannot drift out of sync with the rendering.
  */
 export declare function markCollections(root: HTMLElement, collections: Set<string>): void;
+/**
+ * Turn every inline `[n]` marker into a citation chip.
+ *
+ * Done against the rendered DOM rather than the markdown string, for the same
+ * reason `markCollections` is: a `[3]` inside a fenced code block or a link
+ * label is not a citation, and `closest()` settles that in one call where a
+ * string-level regex would need to re-implement the parser to know.
+ *
+ * `sup` rather than `button`: the sanitiser strips `button` (it is in
+ * `FORBID_TAGS`, and rightly — this is model output), so the chip carries the
+ * button ROLE and a tab stop, and the component delegates the events.
+ */
+export declare function markCitations(root: HTMLElement, valid: Set<number>): void;
 /**
  * Replace every `<pre><code>` in a rendered fragment with a highlighted one.
  * Runs against the DOM node rather than the HTML string so it can be applied

package/dist/components/markdown/markdown.js

@@ -39,7 +39,7 @@ export function render(markdown, { streaming = false } = {}) {
     const source = streaming ? balance(markdown) : markdown;
     const html = marked.parse(source, { async: false });
     return DOMPurify.sanitize(html, {
-        ADD_ATTR: ['target', 'rel'],
+        ADD_ATTR: ['target', 'rel', 'data-cite', 'tabindex', 'role'],
         FORBID_TAGS: ['style', 'form', 'input', 'button'],
         FORBID_ATTR: ['style', 'onerror', 'onload']
     });
@@ -89,6 +89,54 @@ export function markCollections(root, collections) {
             code.dataset.collection = 'true';
     }
 }
+/**
+ * Turn every inline `[n]` marker into a citation chip.
+ *
+ * Done against the rendered DOM rather than the markdown string, for the same
+ * reason `markCollections` is: a `[3]` inside a fenced code block or a link
+ * label is not a citation, and `closest()` settles that in one call where a
+ * string-level regex would need to re-implement the parser to know.
+ *
+ * `sup` rather than `button`: the sanitiser strips `button` (it is in
+ * `FORBID_TAGS`, and rightly — this is model output), so the chip carries the
+ * button ROLE and a tab stop, and the component delegates the events.
+ */
+export function markCitations(root, valid) {
+    if (valid.size === 0)
+        return;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const targets = [];
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const text = node;
+        if (text.parentElement?.closest('pre, code, a, sup'))
+            continue;
+        if (/\[\d{1,3}\]/.test(text.data))
+            targets.push(text);
+    }
+    for (const text of targets) {
+        const fragment = document.createDocumentFragment();
+        let cursor = 0;
+        for (const match of text.data.matchAll(/\[(\d{1,3})\]/g)) {
+            const n = Number(match[1]);
+            if (!valid.has(n) || match.index === undefined)
+                continue;
+            fragment.append(text.data.slice(cursor, match.index));
+            const chip = document.createElement('sup');
+            chip.className = 'ds-cite';
+            chip.dataset.cite = String(n);
+            chip.setAttribute('role', 'button');
+            chip.setAttribute('tabindex', '0');
+            chip.setAttribute('aria-label', `Source ${n}`);
+            chip.textContent = String(n);
+            fragment.append(chip);
+            cursor = match.index + match[0].length;
+        }
+        if (cursor === 0)
+            continue;
+        fragment.append(text.data.slice(cursor));
+        text.replaceWith(fragment);
+    }
+}
 /**
  * Replace every `<pre><code>` in a rendered fragment with a highlighted one.
  * Runs against the DOM node rather than the HTML string so it can be applied

package/dist/components/markdown/markdown.svelte

@@ -7,16 +7,29 @@
   consuming app.
 -->
 <script lang="ts">
-	import { highlight, markCollections, render } from './markdown';
+	import { highlight, markCitations, markCollections, render } from './markdown';
 
 	interface Props {
 		content: string;
 		streaming?: boolean;
 		/** Collection names to chip in backticks; omit if the caller has none. */
 		collectionNames?: Set<string>;
+		/** `[n]` markers to turn into chips; omit and the markers stay as text. */
+		citationNumbers?: Set<number>;
+		oncite?: (n: number) => void;
+		/** A step down, for prose that is reference material beside an answer
+		 *  rather than the answer itself — the source pane's sections. */
+		dense?: boolean;
 	}
 
-	let { content, streaming = false, collectionNames = new Set() }: Props = $props();
+	let {
+		content,
+		streaming = false,
+		collectionNames = new Set(),
+		citationNumbers = new Set(),
+		oncite,
+		dense = false
+	}: Props = $props();
 	let host = $state<HTMLElement | null>(null);
 
 	const html = $derived(render(content, { streaming }));
@@ -27,12 +40,42 @@
 		if (!host || !html) return;
 		// Chips are cheap and wanted DURING streaming; highlighting is not.
 		markCollections(host, collectionNames);
+		markCitations(host, citationNumbers);
 		if (streaming) return;
 		void highlight(host);
 	});
+
+	// Delegated, because the chips are created by the sanitiser's output rather
+	// than by this template — there is no element here to put a handler on.
+	function citeFrom(target: EventTarget | null): number | null {
+		const chip = (target as HTMLElement | null)?.closest?.('[data-cite]');
+		const n = Number((chip as HTMLElement | undefined)?.dataset.cite);
+		return Number.isFinite(n) && n > 0 ? n : null;
+	}
+
+	function click(event: MouseEvent) {
+		const n = citeFrom(event.target);
+		if (n !== null) oncite?.(n);
+	}
+
+	function keydown(event: KeyboardEvent) {
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		const n = citeFrom(event.target);
+		if (n === null) return;
+		event.preventDefault();
+		oncite?.(n);
+	}
 </script>
 
-<div bind:this={host} class="agent-prose text-foreground text-base leading-7">
+<!-- svelte-ignore a11y_no_static_element_interactions -- the interactive
+     elements are the sanitiser-created chips, which carry role and tabindex;
+     this element only delegates their events. -->
+<div
+	bind:this={host}
+	onclick={click}
+	onkeydown={keydown}
+	class="agent-prose text-foreground {dense ? 'text-sm leading-6' : 'text-base leading-7'}"
+>
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in render() -->
 	{@html html}
 </div>
@@ -169,6 +212,10 @@
 		border-radius: var(--radius);
 		padding: 0.85em 1em;
 		overflow-x: auto;
+		/* A fenced block is the one thing here allowed to be wider than the
+		   measure, so it must scroll INSIDE itself: without this a 90-column
+		   line makes the whole transcript scroll sideways at 390px. */
+		max-width: 100%;
 	}
 
 	.agent-prose :global(pre code) {
@@ -190,8 +237,11 @@
 		color: var(--shiki-dark);
 	}
 
+	/* `display: block` is what makes the overflow scroll: a real `table` box
+	   ignores overflow-x and widens its container instead. */
 	.agent-prose :global(table) {
 		width: 100%;
+		max-width: 100%;
 		border-collapse: collapse;
 		font-size: 0.9em;
 		display: block;
@@ -203,6 +253,9 @@
 		border: 1px solid var(--border);
 		padding: 0.4em 0.6em;
 		text-align: start;
+		/* A cell must not be squeezed to one character per line by a narrow
+		   viewport; the table scrolls instead. */
+		white-space: nowrap;
 	}
 
 	.agent-prose :global(th) {
@@ -220,6 +273,35 @@
 		font-weight: 500;
 	}
 
+	/* The citation chip. A superscript number a reader can press: small enough
+	   to sit inside a sentence without breaking its rhythm, big enough that a
+	   thumb finds it — the padding, not the glyph, carries the target size. */
+	.agent-prose :global(sup.ds-cite) {
+		display: inline-block;
+		min-width: 1.35em;
+		margin-inline: 0.15em;
+		padding: 0.1em 0.3em;
+		border-radius: 0.4em;
+		background: color-mix(in oklab, var(--primary) 16%, transparent);
+		color: var(--foreground);
+		font-family: var(--ds-font-mono, monospace);
+		font-size: 0.7em;
+		font-weight: 600;
+		line-height: 1.4;
+		text-align: center;
+		vertical-align: 0.35em;
+		cursor: pointer;
+	}
+
+	.agent-prose :global(sup.ds-cite:hover) {
+		background: color-mix(in oklab, var(--primary) 30%, transparent);
+	}
+
+	.agent-prose :global(sup.ds-cite:focus-visible) {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+
 	.agent-prose :global(hr) {
 		border: 0;
 		border-top: 1px solid var(--border);

package/dist/components/markdown/markdown.svelte.d.ts

@@ -3,6 +3,12 @@ interface Props {
     streaming?: boolean;
     /** Collection names to chip in backticks; omit if the caller has none. */
     collectionNames?: Set<string>;
+    /** `[n]` markers to turn into chips; omit and the markers stay as text. */
+    citationNumbers?: Set<number>;
+    oncite?: (n: number) => void;
+    /** A step down, for prose that is reference material beside an answer
+     *  rather than the answer itself — the source pane's sections. */
+    dense?: boolean;
 }
 declare const Markdown: import("svelte").Component<Props, {}, "">;
 type Markdown = ReturnType<typeof Markdown>;