@poodle64/librarian 2026.9.1

package/dist/components/markdown/markdown.js

@@ -0,0 +1,132 @@
+/**
+ * Markdown for a STREAMING agent transcript.
+ *
+ * Two things separate this from calling `marked()` on a string, and both are
+ * what make a streaming transcript look finished rather than glitchy:
+ *
+ * 1. Half-arrived markdown is not valid markdown. A code fence that has opened
+ *    and not yet closed makes `marked` treat the rest of the answer as code, so
+ *    the message visibly flips between prose and a grey slab on every token.
+ *    Unterminated constructs are closed before parsing.
+ * 2. Highlighting every code block on every token is wasted work the user never
+ *    sees — the block changes again a few milliseconds later. Highlighting is a
+ *    separate pass the caller runs once the text has settled.
+ *
+ * Sanitised on the way out, always. The content is model output rendered as
+ * HTML, which is exactly the case DOMPurify exists for.
+ */
+import DOMPurify from 'isomorphic-dompurify';
+import { marked } from 'marked';
+marked.setOptions({ gfm: true, breaks: false });
+/** Close anything the stream has opened but not yet finished. */
+export function balance(markdown) {
+    let text = markdown;
+    // An odd number of ``` fences means one is still open.
+    const fences = text.match(/^```/gm)?.length ?? 0;
+    if (fences % 2 === 1)
+        text += '\n```';
+    // A trailing pipe row with no separator renders as a paragraph of pipes;
+    // leaving the partial row out reads as the table simply still growing.
+    const lines = text.split('\n');
+    const last = lines.at(-1) ?? '';
+    if (last.startsWith('|') && !last.endsWith('|') && lines.length > 1) {
+        lines.pop();
+        text = lines.join('\n');
+    }
+    return text;
+}
+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'],
+        FORBID_TAGS: ['style', 'form', 'input', 'button'],
+        FORBID_ATTR: ['style', 'onerror', 'onload']
+    });
+}
+let highlighterPromise = null;
+/** Loaded once, lazily — shiki's engine and grammars are not small. */
+async function getHighlighter() {
+    if (!highlighterPromise) {
+        highlighterPromise = import('shiki').then((shiki) => shiki.createHighlighter({
+            // Dual themes emit CSS variables, so one render serves both colour
+            // schemes and the app's existing theme switch drives it — no
+            // re-highlight on toggle, no second copy of the DOM.
+            themes: ['github-light', 'github-dark'],
+            langs: [
+                'bash',
+                'python',
+                'typescript',
+                'javascript',
+                'json',
+                'yaml',
+                'markdown',
+                'sql',
+                'html',
+                'css',
+                'diff'
+            ]
+        }));
+    }
+    return highlighterPromise;
+}
+/**
+ * Mark every inline `code` span that names a known collection.
+ *
+ * The agent puts identifiers in backticks — document titles, requirement
+ * numbers, collection names — and they all render alike. Matching against
+ * the caller's real list rather than a prompt convention means the prompt
+ * cannot drift out of sync with the rendering.
+ */
+export function markCollections(root, collections) {
+    if (collections.size === 0)
+        return;
+    for (const code of root.querySelectorAll('code')) {
+        if (code.parentElement?.tagName === 'PRE')
+            continue;
+        const name = (code.textContent ?? '').trim();
+        if (collections.has(name))
+            code.dataset.collection = 'true';
+    }
+}
+/**
+ * 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
+ * after paint without re-parsing the markdown.
+ */
+export async function highlight(root) {
+    const blocks = root.querySelectorAll('pre > code');
+    if (blocks.length === 0)
+        return;
+    const highlighter = await getHighlighter();
+    const supported = new Set(highlighter.getLoadedLanguages());
+    for (const block of blocks) {
+        const pre = block.parentElement;
+        if (!pre || pre.dataset.highlighted === 'true')
+            continue;
+        const declared = [...block.classList]
+            .find((c) => c.startsWith('language-'))
+            ?.slice('language-'.length);
+        const lang = declared && supported.has(declared) ? declared : 'text';
+        const code = block.textContent ?? '';
+        try {
+            const html = highlighter.codeToHtml(code, {
+                lang,
+                themes: { light: 'github-light', dark: 'github-dark' },
+                defaultColor: false
+            });
+            const replacement = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+            if (!replacement)
+                continue;
+            if (replacement instanceof HTMLElement) {
+                replacement.dataset.highlighted = 'true';
+                replacement.dataset.lang = lang;
+            }
+            pre.replaceWith(replacement);
+        }
+        catch {
+            // An unknown grammar is not worth failing a message over.
+            pre.dataset.highlighted = 'true';
+        }
+    }
+}

package/dist/components/markdown/markdown.svelte

@@ -0,0 +1,221 @@
+<!--
+  Rendered markdown for a streaming agent message.
+
+  Prose styling lives here rather than in a global stylesheet because the
+  content is untrusted HTML with no classes on it — every rule targets a bare
+  tag, and letting those rules escape this component would restyle the whole
+  consuming app.
+-->
+<script lang="ts">
+	import { highlight, 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>;
+	}
+
+	let { content, streaming = false, collectionNames = new Set() }: Props = $props();
+	let host = $state<HTMLElement | null>(null);
+
+	const html = $derived(render(content, { streaming }));
+
+	// Highlight only once the text has settled. Re-running per token would
+	// re-parse grammars for a block that changes again milliseconds later.
+	$effect(() => {
+		if (!host || !html) return;
+		// Chips are cheap and wanted DURING streaming; highlighting is not.
+		markCollections(host, collectionNames);
+		if (streaming) return;
+		void highlight(host);
+	});
+</script>
+
+<div bind:this={host} class="agent-prose text-foreground text-base leading-7">
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in render() -->
+	{@html html}
+</div>
+
+<style>
+	.agent-prose :global(> *:first-child) {
+		margin-top: 0;
+	}
+
+	.agent-prose :global(> *:last-child) {
+		margin-bottom: 0;
+	}
+
+	.agent-prose :global(p),
+	.agent-prose :global(ul),
+	.agent-prose :global(ol),
+	.agent-prose :global(blockquote),
+	.agent-prose :global(pre),
+	.agent-prose :global(table) {
+		margin-block: 0.75em;
+	}
+
+	.agent-prose :global(h1),
+	.agent-prose :global(h2),
+	.agent-prose :global(h3),
+	.agent-prose :global(h4) {
+		font-family: var(--ds-font-display, inherit);
+		font-weight: 600;
+		line-height: 1.3;
+		margin-block: 1.6em 0.6em;
+	}
+
+	/* A hairline above each section. The palette's surfaces sit within ~1.2:1
+	   of the page (measured, both themes), so weight and rule do the work that
+	   a background tint cannot. */
+	.agent-prose :global(h2) {
+		border-top: 1px solid var(--border);
+		padding-top: 0.8em;
+	}
+
+	.agent-prose :global(h2:first-child) {
+		border-top: 0;
+		padding-top: 0;
+	}
+
+	.agent-prose :global(h1) {
+		font-size: 1.35em;
+	}
+
+	.agent-prose :global(h2) {
+		font-size: 1.2em;
+	}
+
+	.agent-prose :global(h3) {
+		font-size: 1.05em;
+	}
+
+	.agent-prose :global(h4) {
+		font-size: 1em;
+	}
+
+	.agent-prose :global(ul),
+	.agent-prose :global(ol) {
+		padding-inline-start: 1.4em;
+	}
+
+	.agent-prose :global(ul) {
+		list-style: disc;
+	}
+
+	.agent-prose :global(ol) {
+		list-style: decimal;
+	}
+
+	.agent-prose :global(li) {
+		margin-block: 0.3em;
+	}
+
+	.agent-prose :global(li > ul),
+	.agent-prose :global(li > ol) {
+		margin-block: 0.3em;
+	}
+
+	/* Lead paragraph: the answer someone could act on without reading on. */
+	.agent-prose :global(> p:first-child) {
+		font-size: 1.0625em;
+		line-height: 1.65;
+	}
+
+	.agent-prose :global(strong) {
+		font-weight: 600;
+		color: var(--foreground);
+	}
+
+	.agent-prose :global(a) {
+		color: var(--ds-color-primary, currentColor);
+		text-underline-offset: 0.2em;
+		text-decoration-line: underline;
+	}
+
+	.agent-prose :global(blockquote) {
+		border-inline-start: 2px solid var(--primary);
+		padding-inline: 1em 0;
+		color: var(--muted-foreground);
+		font-style: italic;
+	}
+
+	/* Inline code only — the fenced case is the `pre >` rule below. */
+
+	/* Inline code carries IDENTIFIERS here — document titles, collection names,
+	   requirement numbers — so it is the main way a reader picks a reference
+	   out of a paragraph. Bordered rather than merely tinted, because a tint
+	   alone is invisible against this palette's flat surfaces. */
+	.agent-prose :global(code) {
+		font-family: var(--ds-font-mono, monospace);
+		font-size: 0.8125em;
+		background: var(--muted);
+		border: 1px solid var(--border);
+		border-radius: 0.35em;
+		padding: 0.1em 0.35em;
+		white-space: nowrap;
+	}
+
+	.agent-prose :global(pre) {
+		background: var(--muted);
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		padding: 0.85em 1em;
+		overflow-x: auto;
+	}
+
+	.agent-prose :global(pre code) {
+		background: none;
+		padding: 0;
+		font-size: 0.8125em;
+		line-height: 1.6;
+	}
+
+	/* Shiki's dual-theme output: one DOM, both colour schemes, switched by the
+	   app's own theme rather than by re-highlighting. */
+	.agent-prose :global(pre.shiki),
+	.agent-prose :global(pre.shiki span) {
+		color: var(--shiki-light);
+	}
+
+	:global(.dark) .agent-prose :global(pre.shiki),
+	:global(.dark) .agent-prose :global(pre.shiki span) {
+		color: var(--shiki-dark);
+	}
+
+	.agent-prose :global(table) {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.9em;
+		display: block;
+		overflow-x: auto;
+	}
+
+	.agent-prose :global(th),
+	.agent-prose :global(td) {
+		border: 1px solid var(--border);
+		padding: 0.4em 0.6em;
+		text-align: start;
+	}
+
+	.agent-prose :global(th) {
+		background: var(--muted);
+		font-weight: 600;
+	}
+
+	/* A collection reads as an entity rather than another monospace token when
+	   the caller passes `collectionNames`. Accent-tinted rather than the flat
+	   muted surface every other identifier sits on. */
+	.agent-prose :global(code[data-collection]) {
+		background: color-mix(in oklab, var(--primary) 16%, transparent);
+		border-color: color-mix(in oklab, var(--primary) 45%, transparent);
+		color: var(--foreground);
+		font-weight: 500;
+	}
+
+	.agent-prose :global(hr) {
+		border: 0;
+		border-top: 1px solid var(--border);
+		margin-block: 1.5em;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    content: string;
+    streaming?: boolean;
+    /** Collection names to chip in backticks; omit if the caller has none. */
+    collectionNames?: Set<string>;
+}
+declare const Markdown: import("svelte").Component<Props, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

package/dist/components/thinking-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThinkingRow } from './thinking-row.svelte';
+export { default } from './thinking-row.svelte';

package/dist/components/thinking-row/index.js

@@ -0,0 +1,2 @@
+export { default as ThinkingRow } from './thinking-row.svelte';
+export { default } from './thinking-row.svelte';

package/dist/components/thinking-row/thinking-row.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import type { ThinkingBlock } from '../../transcript.svelte';
+
+	interface Props {
+		block: ThinkingBlock;
+		active: boolean;
+	}
+
+	let { block, active }: Props = $props();
+	let open = $state(false);
+</script>
+
+<div class="text-sm">
+	<button
+		type="button"
+		class="flex items-center gap-2 py-0.5 text-left"
+		onclick={() => (open = !open)}
+		aria-expanded={open}
+	>
+		<ChevronRightIcon
+			class="text-muted-foreground size-3 transition-transform {open ? 'rotate-90' : ''}"
+		/>
+		<span class={active ? 'text-foreground font-medium' : 'text-muted-foreground'}>
+			{active ? 'Thinking…' : 'Thought'}
+		</span>
+	</button>
+	{#if open}
+		<p
+			class="text-muted-foreground border-border mt-1 ml-1.25 border-l pl-3 text-sm whitespace-pre-wrap"
+		>
+			{block.text}
+		</p>
+	{/if}
+</div>

package/dist/components/thinking-row/thinking-row.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ThinkingBlock } from '../../transcript.svelte';
+interface Props {
+    block: ThinkingBlock;
+    active: boolean;
+}
+declare const ThinkingRow: import("svelte").Component<Props, {}, "">;
+type ThinkingRow = ReturnType<typeof ThinkingRow>;
+export default ThinkingRow;

package/dist/components/tool-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToolRow } from './tool-row.svelte';
+export { default } from './tool-row.svelte';

package/dist/components/tool-row/index.js

@@ -0,0 +1,2 @@
+export { default as ToolRow } from './tool-row.svelte';
+export { default } from './tool-row.svelte';

package/dist/components/tool-row/tool-row.svelte

@@ -0,0 +1,77 @@
+<!--
+  One tool call, as a row in the transcript.
+
+  Not a card: a status dot, an action in bold, its target beside it, one
+  dimmed sub-line. Borders and badge pills make a run of five calls read as
+  five separate events rather than one train of thought.
+
+  The row says what the agent is DOING, not what it typed. A reader here is
+  asking about documents, not reading a terminal, and `Bash ls -1 .` looks
+  like a leak from the machine room. The raw command is one click away, so
+  nothing is hidden from anyone who wants it.
+-->
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { describe, summarise, type ToolBlock } from '../../transcript.svelte';
+
+	interface Props {
+		block: ToolBlock;
+		running: boolean;
+		/** Identical consecutive steps folded into this row — five pages of one
+		 *  document is one act of reading to a human. */
+		repeats?: number;
+	}
+
+	let { block, running, repeats = 1 }: Props = $props();
+	let open = $state(false);
+
+	const settled = $derived(block.result !== undefined);
+	const said = $derived(describe(block));
+	const tone = $derived(
+		block.isError ? 'bg-status-error' : settled ? 'bg-status-success' : 'bg-status-info'
+	);
+	const lines = $derived(block.result ? block.result.split('\n').length : 0);
+</script>
+
+<div class="text-sm">
+	<button
+		type="button"
+		class="flex w-full items-center gap-2 rounded py-0.5 text-left"
+		onclick={() => (open = !open)}
+		disabled={!settled}
+		aria-expanded={open}
+	>
+		<span class="flex w-3 shrink-0 items-center justify-center">
+			{#if settled}
+				<ChevronRightIcon
+					class="text-muted-foreground size-3 transition-transform {open ? 'rotate-90' : ''}"
+				/>
+			{/if}
+		</span>
+		<span class="size-1.5 shrink-0 rounded-full {tone} {!settled && running ? 'animate-pulse' : ''}"
+		></span>
+		<span class="text-muted-foreground truncate">
+			<span class="text-foreground font-medium">{said.verb}</span>
+			{#if said.object}<span class="text-foreground/80">{said.object}</span>{/if}
+			{#if repeats > 1}<span class="text-muted-foreground">· {repeats} sections</span>{/if}
+		</span>
+	</button>
+
+	{#if open}
+		<div class="border-border mt-1 ml-5.5 border-l pl-3">
+			<!-- The real command, for anyone who wants it. -->
+			<p class="text-muted-foreground font-mono text-xs break-all">
+				{block.name}
+				{summarise(block)}
+			</p>
+			{#if block.result}
+				<pre
+					class="text-muted-foreground mt-1 max-h-72 overflow-auto font-mono text-xs whitespace-pre-wrap">{block.result}</pre>
+			{/if}
+		</div>
+	{:else if settled && lines > 0}
+		<p class="text-muted-foreground pl-5.5 text-xs">
+			{lines === 1 ? '1 line' : `${lines} lines`}
+		</p>
+	{/if}
+</div>

package/dist/components/tool-row/tool-row.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type ToolBlock } from '../../transcript.svelte';
+interface Props {
+    block: ToolBlock;
+    running: boolean;
+    /** Identical consecutive steps folded into this row — five pages of one
+     *  document is one act of reading to a human. */
+    repeats?: number;
+}
+declare const ToolRow: import("svelte").Component<Props, {}, "">;
+type ToolRow = ReturnType<typeof ToolRow>;
+export default ToolRow;

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

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

package/dist/components/working/index.js

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

package/dist/components/working/working.svelte

@@ -0,0 +1,50 @@
+<!--
+  Something is happening, and you can see it.
+
+  The CLI takes ~2.6s to boot before its first event and the model another
+  ~1.5s to its first token, so a naive transcript shows NOTHING for about four
+  seconds. Measured, and the operator counted it out loud. The lag itself is
+  mostly not ours to remove; a screen that visibly does nothing is.
+
+  Two moving parts, deliberately: a word that changes so the page is evidently
+  alive, and a clock that only goes up so a long wait still reads as progress
+  rather than as a hang.
+-->
+<script lang="ts">
+	interface Props {
+		/** Shown instead of the cycling word once real work is identifiable. */
+		label?: string;
+	}
+
+	let { label }: Props = $props();
+
+	const WORDS = [
+		'Starting',
+		'Reading the shelves',
+		'Rummaging',
+		'Cross-checking',
+		'Thumbing pages',
+		'Following a reference',
+		'Chasing it down'
+	];
+
+	let tick = $state(0);
+	let elapsed = $state(0);
+
+	$effect(() => {
+		const word = setInterval(() => (tick += 1), 2600);
+		const clock = setInterval(() => (elapsed += 1), 1000);
+		return () => {
+			clearInterval(word);
+			clearInterval(clock);
+		};
+	});
+
+	const word = $derived(label ?? WORDS[tick % WORDS.length]);
+</script>
+
+<div class="text-muted-foreground flex items-center gap-2 text-sm">
+	<span class="bg-status-info size-1.5 animate-pulse rounded-full"></span>
+	<span>{word}…</span>
+	<span class="text-muted-foreground/70 font-mono text-xs tabular-nums">{elapsed}s</span>
+</div>

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

@@ -0,0 +1,7 @@
+interface Props {
+    /** Shown instead of the cycling word once real work is identifiable. */
+    label?: string;
+}
+declare const Working: import("svelte").Component<Props, {}, "">;
+type Working = ReturnType<typeof Working>;
+export default Working;

package/dist/history.svelte.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Past conversations.
+ *
+ * Held in the browser, deliberately and provisionally. The agent's own session
+ * survives server-side — Claude Code keeps it and `--resume` reaches it — so
+ * what is missing is only the RENDERED transcript, which is a display concern.
+ * Persisting that here needs no schema, no migration and no decision about
+ * whose conversation it is.
+ *
+ * Namespaced by the caller: two apps, or two rooms in one app, must not share
+ * a `localStorage` key, so the namespace is a constructor argument rather than
+ * a module-level constant.
+ */
+export interface StoredTurn {
+    question: string;
+    answer: string;
+}
+export interface Conversation {
+    id: string;
+    /** The agent's session id, which is what `--resume` needs. */
+    sessionId: string | null;
+    title: string;
+    updated: number;
+    turns: StoredTurn[];
+}
+export declare class History {
+    #private;
+    items: Conversation[];
+    constructor(namespace: string);
+    load(): void;
+    save(conversation: Conversation): void;
+    remove(id: string): void;
+}
+/** One store per namespace — a distinct `localStorage` key per app or room. */
+export declare function createHistory(namespace: string): History;
+/** A conversation is named by its first question, trimmed to something legible. */
+export declare function titleFrom(question: string): string;

package/dist/history.svelte.js

@@ -0,0 +1,59 @@
+/**
+ * Past conversations.
+ *
+ * Held in the browser, deliberately and provisionally. The agent's own session
+ * survives server-side — Claude Code keeps it and `--resume` reaches it — so
+ * what is missing is only the RENDERED transcript, which is a display concern.
+ * Persisting that here needs no schema, no migration and no decision about
+ * whose conversation it is.
+ *
+ * Namespaced by the caller: two apps, or two rooms in one app, must not share
+ * a `localStorage` key, so the namespace is a constructor argument rather than
+ * a module-level constant.
+ */
+const LIMIT = 40;
+export class History {
+    items = $state([]);
+    #key;
+    constructor(namespace) {
+        this.#key = namespace;
+    }
+    load() {
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            this.items = JSON.parse(localStorage.getItem(this.#key) ?? '[]');
+        }
+        catch {
+            this.items = [];
+        }
+    }
+    save(conversation) {
+        const rest = this.items.filter((c) => c.id !== conversation.id);
+        this.items = [conversation, ...rest].slice(0, LIMIT);
+        this.#flush();
+    }
+    remove(id) {
+        this.items = this.items.filter((c) => c.id !== id);
+        this.#flush();
+    }
+    #flush() {
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            localStorage.setItem(this.#key, JSON.stringify(this.items));
+        }
+        catch {
+            // A full quota costs history, never the conversation in progress.
+        }
+    }
+}
+/** One store per namespace — a distinct `localStorage` key per app or room. */
+export function createHistory(namespace) {
+    return new History(namespace);
+}
+/** A conversation is named by its first question, trimmed to something legible. */
+export function titleFrom(question) {
+    const flat = question.replace(/\s+/g, ' ').trim();
+    return flat.length > 60 ? `${flat.slice(0, 57)}…` : flat;
+}