@poodle64/librarian 2026.10.4 → 2026.10.6

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

@@ -12,6 +12,10 @@
   only ever one, in the same place, closing whichever was there.
 -->
 <script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import DownloadIcon from '@lucide/svelte/icons/download';
 	import XIcon from '@lucide/svelte/icons/x';
 	import { untrack } from 'svelte';
 	import { segment, type TextBlock, type Turn } from '../../transcript.svelte';
@@ -21,6 +25,8 @@
 		downloads,
 		framed,
 		isHtml,
+		kindLabel,
+		stripFrontMatter,
 		writtenKey,
 		type LoadWritten,
 		type Written,
@@ -65,7 +71,11 @@
 	// The newest, until the reader picks another.
 	const current = $derived(versions.find((v) => v.version === version) ?? versions.at(-1));
 	const currentKey = $derived(current ? writtenKey(current) : '');
+	// The one before it, whose blocks this one is marked against.
+	const before = $derived(current ? versions.filter((v) => v.version < current.version).at(-1) : undefined);
+	const beforeKey = $derived(before ? writtenKey(before) : '');
 	let source = $state<{ text: string; mediaType: string } | null>(null);
+	let earlier = $state<string | null>(null);
 	let failed = $state(false);
 
 	// Keyed on the version alone: a new version of the same name arriving in
@@ -85,6 +95,21 @@
 		return () => (live = false);
 	});
 
+	$effect(() => {
+		earlier = null;
+		if (!beforeKey) return;
+		const prior = untrack(() => before);
+		const load = untrack(() => loadWritten);
+		if (!prior || !load || isHtml(prior.media_type)) return;
+		let live = true;
+		// A version that cannot be read is no reason to mark nothing else.
+		load(prior.name, prior.version).then(
+			(read) => live && (earlier = stripFrontMatter(read.text)),
+			() => {}
+		);
+		return () => (live = false);
+	});
+
 	const texts = $derived(
 		segment(turn?.blocks ?? []).filter((s): s is TextBlock => s.kind === 'text')
 	);
@@ -92,6 +117,37 @@
 	const split = $derived(splitSources(rawAnswer));
 	const sources = $derived(resolveCitations(turn?.citations ?? [], split.citations));
 
+	const links = $derived(current && writtenUrl ? downloads(current, words) : []);
+	// The one download the bar offers directly: Word where there is one, else the source.
+	const primary = $derived(links.find((link) => link.format === 'docx') ?? links[0]);
+	const sub = $derived.by(() => {
+		if (!current) return '';
+		const fresh = current.at !== undefined && Date.now() - current.at < 120_000;
+		const when = fresh
+			? fill(current.version > 1 ? words.paneEdited : words.paneWritten, { when: words.justNow })
+			: '';
+		return [kindLabel(current, words), when].filter(Boolean).join(' · ');
+	});
+	const changed = $derived(
+		current?.changes && before
+			? fill(words.changedSince, { n: before.version, changes: current.changes })
+			: ''
+	);
+
+	let menu = $state(false);
+	let copied = $state(false);
+
+	async function copyDocument() {
+		if (!source) return;
+		try {
+			await navigator.clipboard.writeText(stripFrontMatter(source.text));
+			copied = true;
+			setTimeout(() => (copied = false), 1600);
+		} catch {
+			// A denied clipboard is not worth an error state on text the reader can select.
+		}
+	}
+
 	let closeButton = $state<HTMLButtonElement | null>(null);
 
 	// Opening a pane a reader reached with the keyboard must move focus into
@@ -103,74 +159,113 @@
 	});
 
 	function keydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			event.stopPropagation();
-			onclose();
-		}
+		if (event.key !== 'Escape') return;
+		event.stopPropagation();
+		if (menu) menu = false;
+		else onclose();
 	}
 </script>
 
 <svelte:window onkeydown={keydown} />
 
-<aside aria-label={current?.name ?? 'Study artefact'} class="ds-lib-pane">
+<aside aria-label={current?.title ?? 'Study artefact'} class="ds-lib-pane">
 	<!-- The sheet's grabber. On a phone this is an overlay a reader has to be
 	     able to see the top edge of; on a desktop it is a column, so there is
 	     nothing here to grab. -->
 	<div class="ds-lib-pane-grabber" aria-hidden="true"><span></span></div>
 
 	<header class="ds-lib-pane-header">
+		<button
+			bind:this={closeButton}
+			type="button"
+			class="ds-lib-pane-close"
+			onclick={onclose}
+			aria-label={words.closeSource}
+		>
+			<XIcon size={16} />
+		</button>
 		<div class="ds-lib-pane-heading">
 			{#if current}
-				<h2 class="ds-lib-pane-title">{current.name}</h2>
-				<div class="ds-lib-pane-tools">
-					<select
-						class="ds-lib-pane-versions"
-						aria-label={words.writtenVersions}
-						value={current.version}
-						onchange={(event) => onversion?.(Number(event.currentTarget.value))}
+				<h2 class="ds-lib-pane-title">{current.title}</h2>
+				{#if sub}<p class="ds-lib-pane-subtitle">{sub}</p>{/if}
+			{:else}
+				<h2 class="ds-lib-pane-title">{turn?.artefact?.title}</h2>
+				{#if turn?.artefact?.summary}
+					<p class="ds-lib-pane-subtitle">{turn.artefact.summary}</p>
+				{/if}
+			{/if}
+		</div>
+		{#if current}
+			<select
+				class="ds-lib-pane-versions"
+				aria-label={words.writtenVersions}
+				value={current.version}
+				onchange={(event) => onversion?.(Number(event.currentTarget.value))}
+			>
+				{#each versions as option (option.version)}
+					<option value={option.version}>{fill(words.writtenVersion, { n: option.version })}</option>
+				{/each}
+			</select>
+			{#if source && !failed}
+				<button
+					type="button"
+					class="ds-lib-pane-tool ds-lib-pane-copy"
+					onclick={copyDocument}
+					aria-label={copied ? words.copiedDocument : words.copyDocument}
+				>
+					{#if copied}<CheckIcon size={15} />{:else}<CopyIcon size={15} />{/if}
+				</button>
+			{/if}
+			{#if writtenUrl && links.length > 0}
+				<div class="ds-lib-pane-menu">
+					<button
+						type="button"
+						class="ds-lib-pane-tool"
+						aria-haspopup="menu"
+						aria-expanded={menu}
+						onclick={() => (menu = !menu)}
 					>
-						{#each versions as option (option.version)}
-							<option value={option.version}>{fill(words.writtenVersion, { n: option.version })}</option>
-						{/each}
-					</select>
-					{#if writtenUrl}
-						<ul class="ds-lib-pane-links" aria-label={words.download}>
-							{#each downloads(current, words) as link (link.format)}
-								<li>
-									<a href={writtenUrl(current.name, current.version, link.format)}>{link.label}</a>
+						<DownloadIcon size={15} />{words.download}<ChevronDownIcon size={14} />
+					</button>
+					{#if menu}
+						<ul class="ds-lib-pane-links" role="menu" aria-label={words.download}>
+							{#each links as link (link.format)}
+								<li role="none">
+									<a
+										role="menuitem"
+										href={writtenUrl(current.name, current.version, link.format)}
+										onclick={() => (menu = false)}>{link.label}</a
+									>
 								</li>
 							{/each}
 						</ul>
 					{/if}
 				</div>
-			{:else}
-				<h2 class="ds-lib-pane-title">{turn?.artefact?.title}</h2>
-				{#if turn?.artefact?.summary}
-					<p class="ds-lib-pane-subtitle">{turn.artefact.summary}</p>
+				{#if primary}
+					<a
+						class="ds-lib-pane-tool ds-lib-pane-quick"
+						href={writtenUrl(current.name, current.version, primary.format)}
+					>
+						<DownloadIcon size={15} />{primary.label}
+					</a>
 				{/if}
 			{/if}
-		</div>
-		<button
-			bind:this={closeButton}
-			type="button"
-			class="ds-lib-pane-close"
-			onclick={onclose}
-			aria-label={words.closeSource}
-		>
-			<XIcon size={16} />
-		</button>
+		{/if}
 	</header>
 
 	{#if current}
+		{#if changed}<p class="ds-lib-pane-changed">{changed}</p>{/if}
 		{@const html = source !== null && isHtml(source.mediaType || current.media_type)}
 		<div class="ds-lib-pane-body" class:is-frame={html}>
 			{#if failed}
-				<p class="ds-lib-pane-subtitle">{words.documentUnavailable}</p>
+				<p class="ds-lib-pane-note">{words.documentUnavailable}</p>
 			{:else if source && html}
-				<iframe class="ds-lib-pane-frame" sandbox="" srcdoc={framed(source.text)} title={current.name}
+				<iframe class="ds-lib-pane-frame" sandbox="" srcdoc={framed(source.text)} title={current.title}
 				></iframe>
 			{:else if source}
-				<Markdown content={source.text} />
+				<div class="ds-lib-pane-paper">
+					<Markdown content={stripFrontMatter(source.text)} previous={earlier ?? undefined} />
+				</div>
 			{/if}
 		</div>
 	{:else}
@@ -189,17 +284,12 @@
 <style>
 	.ds-lib-pane {
 		position: fixed;
-		inset-inline: 0;
-		bottom: 0;
+		inset: 0;
 		z-index: 40;
 		display: flex;
-		height: 80svh;
+		height: 100dvh;
 		flex-direction: column;
-		border-top: 1px solid var(--ds-color-border);
-		border-start-start-radius: var(--ds-radius-xl);
-		border-start-end-radius: var(--ds-radius-xl);
 		background: var(--ds-color-surface-1);
-		box-shadow: 0 -12px 40px rgb(0 0 0 / 0.25);
 	}
 
 	.ds-lib-pane-grabber {
@@ -216,17 +306,19 @@
 		background: var(--ds-color-border);
 	}
 
+	/* A phone's sheet leads with Close; the column ends with it. */
 	.ds-lib-pane-header {
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
 		gap: 0.5rem;
 		border-bottom: 1px solid var(--ds-color-border);
-		padding: 0.75rem 1rem;
+		padding: 0.5rem 1rem 0.75rem;
 	}
 
 	.ds-lib-pane-heading {
 		min-width: 0;
 		flex: 1;
+		order: 1;
 	}
 
 	.ds-lib-pane-title,
@@ -240,23 +332,24 @@
 	.ds-lib-pane-title {
 		color: var(--ds-color-foreground);
 		font-family: inherit;
-		font-size: 0.875rem;
+		font-size: 0.9375rem;
 		font-weight: 600;
 	}
 
 	.ds-lib-pane-subtitle {
+		display: none;
 		color: var(--ds-color-muted-foreground);
 		font-size: var(--ds-text-2xs);
 	}
 
 	.ds-lib-pane-close {
 		display: flex;
-		width: 2rem;
-		height: 2rem;
+		width: 2.5rem;
+		height: 2.5rem;
 		flex: none;
 		align-items: center;
 		justify-content: center;
-		margin-top: -0.25rem;
+		order: 0;
 		border: 0;
 		border-radius: var(--ds-radius-lg);
 		background: none;
@@ -272,50 +365,135 @@
 		color: var(--ds-color-foreground);
 	}
 
-	.ds-lib-pane-close:focus-visible {
+	.ds-lib-pane-close:focus-visible,
+	.ds-lib-pane-tool:focus-visible,
+	.ds-lib-pane-versions:focus-visible {
 		outline: 2px solid var(--ds-color-ring);
 		outline-offset: 2px;
 	}
 
-	.ds-lib-pane-body {
-		min-height: 0;
-		flex: 1;
-		overflow-y: auto;
-		overscroll-behavior: contain;
-		padding: 0.75rem 1rem;
+	.ds-lib-pane-versions {
+		order: 2;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-md);
+		background: var(--ds-color-surface-1);
+		padding: 0.375rem 0.5rem;
+		color: var(--ds-color-foreground);
+		font: inherit;
+		font-size: 0.8125rem;
 	}
 
-	.ds-lib-pane-tools {
-		display: flex;
-		flex-wrap: wrap;
+	.ds-lib-pane-tool {
+		display: inline-flex;
+		min-height: 2.25rem;
 		align-items: center;
-		gap: 0.25rem 0.75rem;
-		margin-top: 0.25rem;
-	}
-
-	.ds-lib-pane-versions {
+		gap: 0.375rem;
 		border: 1px solid var(--ds-color-border);
 		border-radius: var(--ds-radius-md);
-		background: var(--ds-color-surface-1);
-		padding: 0.125rem 0.25rem;
+		background: none;
+		padding: 0.25rem 0.625rem;
 		color: var(--ds-color-foreground);
 		font: inherit;
-		font-size: var(--ds-text-2xs);
+		font-size: 0.8125rem;
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	.ds-lib-pane-tool:hover {
+		background: var(--ds-color-surface-2);
+	}
+
+	.ds-lib-pane-copy {
+		display: none;
+		order: 3;
+	}
+
+	.ds-lib-pane-menu {
+		position: relative;
+		display: none;
+		order: 4;
+	}
+
+	.ds-lib-pane-quick {
+		order: 3;
 	}
 
 	.ds-lib-pane-links {
+		position: absolute;
+		inset-block-start: calc(100% + 0.25rem);
+		inset-inline-end: 0;
+		z-index: 2;
 		display: flex;
-		flex-wrap: wrap;
-		gap: 0.75rem;
+		min-width: 9rem;
+		flex-direction: column;
 		margin: 0;
-		padding: 0;
-		font-size: var(--ds-text-2xs);
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-md);
+		background: var(--ds-color-surface-1);
+		padding: 0.25rem;
+		box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
 		list-style: none;
 	}
 
 	.ds-lib-pane-links a {
+		display: block;
+		border-radius: var(--ds-radius-sm);
+		padding: 0.5rem 0.625rem;
+		color: var(--ds-color-foreground);
+		font-size: 0.8125rem;
+		text-decoration: none;
+	}
+
+	.ds-lib-pane-links a:hover,
+	.ds-lib-pane-links a:focus-visible {
+		background: var(--ds-color-surface-2);
+	}
+
+	.ds-lib-pane-changed {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin: 0;
+		border-bottom: 1px solid var(--ds-color-border);
+		padding: 0.5rem 1rem;
 		color: var(--ds-color-muted-foreground);
-		text-decoration: underline;
+		font-size: 0.8125rem;
+	}
+
+	.ds-lib-pane-changed::before {
+		content: '';
+		width: 2px;
+		height: 0.875rem;
+		flex: none;
+		background: var(--ds-color-foreground);
+	}
+
+	.ds-lib-pane-body {
+		min-height: 0;
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0.75rem 1rem;
+	}
+
+	.ds-lib-pane-note {
+		margin: 0;
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+	}
+
+	/* The document is paper, light in either theme: its own ink and rules
+	   replace the app's, so a dark page does not paint it grey on grey. */
+	.ds-lib-pane-paper {
+		--ds-color-foreground: var(--ds-paper-ink, #1b1c1e);
+		--ds-color-muted-foreground: var(--ds-paper-muted, #5f6368);
+		--ds-color-border: var(--ds-paper-rule, #c4c7cc);
+		--ds-color-surface-1: var(--ds-paper-shade, #dcdee2);
+		--ds-color-primary-ink: var(--ds-paper-ink, #1b1c1e);
+		border-radius: var(--ds-radius-sm);
+		background: var(--ds-paper, #e9eaec);
+		padding: 1.25rem 1.5rem;
+		color: var(--ds-color-foreground);
 	}
 
 	.ds-lib-pane-body.is-frame {
@@ -340,16 +518,38 @@
 			position: relative;
 			inset: auto;
 			height: auto;
-			width: 35rem;
+			width: 42rem;
 			flex: none;
-			border-top: 0;
 			border-inline-start: 1px solid var(--ds-color-border);
-			border-radius: 0;
-			box-shadow: none;
 		}
 
 		.ds-lib-pane-grabber {
 			display: none;
 		}
+
+		.ds-lib-pane-header {
+			padding-top: 0.75rem;
+		}
+
+		.ds-lib-pane-heading {
+			order: 0;
+		}
+
+		.ds-lib-pane-subtitle {
+			display: block;
+		}
+
+		.ds-lib-pane-copy,
+		.ds-lib-pane-menu {
+			display: inline-flex;
+		}
+
+		.ds-lib-pane-quick {
+			display: none;
+		}
+
+		.ds-lib-pane-close {
+			order: 5;
+		}
 	}
 </style>

package/dist/components/conversation/conversation.svelte

@@ -33,7 +33,7 @@
 		type AgentTranscriptProps
 	} from '../agent-transcript/agent-transcript.svelte';
 	import ArtefactPane from '../artefact-pane/artefact-pane.svelte';
-	import type { Fences } from '../markdown/markdown';
+	import type { Visual } from '../../visuals';
 	import DocumentPane from '../document-pane/document-pane.svelte';
 	import ScopeStatement from '../scope-statement/scope-statement.svelte';
 
@@ -109,9 +109,9 @@
 		loadWritten?: LoadWritten;
 		/** Where a version downloads. Without it no download links render. */
 		writtenUrl?: WrittenUrl;
-		/** Languages of fenced code the host draws with its own component
-		 *  rather than as code. */
-		fences?: Fences;
+		/** Renderers by a fence's language (`defaultVisuals`, and the app's own):
+		 *  a block of one is drawn by its component rather than as code. */
+		visuals?: Record<string, Visual>;
 		/** Prices a turn's `outcome.costUsd` in the host's own currency and
 		 *  words ("about A$0.34"), for the footer's cost line beside a turn's
 		 *  duration. The package never converts currency itself; omitted, the
@@ -162,7 +162,7 @@
 		onedit,
 		loadWritten,
 		writtenUrl,
-		fences,
+		visuals,
 		collectionNames = new Set(),
 		composer,
 		turn: presentTurn,
@@ -386,7 +386,7 @@
 								showingWritten: shownWritten?.key,
 								onopenwritten: loadWritten ? openWritten : undefined,
 								writtenUrl,
-								fences,
+								visuals,
 								onedit:
 									onedit && !running && !turn.kind && turn.question
 										? (text: string) => onedit(index, text)

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

@@ -5,7 +5,7 @@ import type { Citation, LoadDocument } from '../../citations';
 import { type LoadWritten, type WrittenUrl } from '../../written';
 import { type ChatCopy } from '../../copy';
 import { type AgentTranscriptProps } from '../agent-transcript/agent-transcript.svelte';
-import type { Fences } from '../markdown/markdown';
+import type { Visual } from '../../visuals';
 interface Props {
     turns: Turn[];
     running: boolean;
@@ -68,9 +68,9 @@ interface Props {
     loadWritten?: LoadWritten;
     /** Where a version downloads. Without it no download links render. */
     writtenUrl?: WrittenUrl;
-    /** Languages of fenced code the host draws with its own component
-     *  rather than as code. */
-    fences?: Fences;
+    /** Renderers by a fence's language (`defaultVisuals`, and the app's own):
+     *  a block of one is drawn by its component rather than as code. */
+    visuals?: Record<string, Visual>;
     /** Prices a turn's `outcome.costUsd` in the host's own currency and
      *  words ("about A$0.34"), for the footer's cost line beside a turn's
      *  duration. The package never converts currency itself; omitted, the

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

@@ -15,11 +15,15 @@
  * Sanitised on the way out, always. The content is model output rendered as
  * HTML, which is exactly the case DOMPurify exists for.
  */
-import { type Component } from 'svelte';
 /** Close anything the stream has opened but not yet finished. */
 export declare function balance(markdown: string): string;
-export declare function render(markdown: string, { streaming }?: {
-    streaming?: boolean | undefined;
+/**
+ * `markdown` as sanitised HTML. With `previous`, the version before it, each
+ * block it changed is marked on the sanitised DOM, before its one serialisation.
+ */
+export declare function render(markdown: string, { streaming, previous }?: {
+    streaming?: boolean;
+    previous?: string;
 }): string;
 /**
  * Mark every inline `code` span that names a known collection.
@@ -43,16 +47,29 @@ export declare function markCollections(root: HTMLElement, collections: Set<stri
  * button ROLE and a tab stop, and the component delegates the events.
  */
 export declare function markCitations(root: HTMLElement, valid: Set<number>): void;
-/** Fenced code blocks of a language a host names, drawn by its own component. */
-export type Fences = Record<string, Component<{
+/** A turn's prose and the fenced blocks of a registered language, in order. */
+export type Part = {
+    kind: 'md';
+    text: string;
+} | {
+    kind: 'visual';
+    lang: string;
     source: string;
-}>>;
+    closed: boolean;
+};
+/**
+ * Cut `markdown` at each fenced block whose language `has` a renderer for.
+ * A fence of another language (or none) is ordinary code and stays in the
+ * prose, and so does anything inside one: an example of a visual's fence in a
+ * code block is text. A block still open at the end is `closed: false`.
+ */
+export declare function splitVisuals(markdown: string, has: (lang: string) => boolean): Part[];
 /**
- * Draw every fenced block whose language the host registered with the host's
- * component, in place of the code block. The source is the block's text, never
- * HTML. Returns what unmounts them.
+ * Turn each link to a numbered web page into its citation chip: the link's
+ * text stays, unlinked, and the chip after it carries the page's number and
+ * opens the page. Against the rendered DOM, for the reason `markCitations` is.
  */
-export declare function mountFences(root: HTMLElement, fences: Fences): () => void;
+export declare function markWebLinks(root: HTMLElement, numbers: Map<string, 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