@poodle64/librarian 2026.10.2 → 2026.10.4

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

@@ -1,7 +1,9 @@
 import { type Artefact, type Block, type DescribeTool, type Outcome } from '../../transcript.svelte';
 import { type Citation } from '../../citations';
 import { type ChatCopy } from '../../copy';
+import { type Written, type WrittenUrl } from '../../written';
 import type { Verdict } from '../../chat.svelte';
+import type { Fences } from '../markdown/markdown';
 /** Everything one turn renders from: what `Conversation` hands a host's
  *  own `turn` snippet, so it can render this component or its own. */
 export interface AgentTranscriptProps {
@@ -35,6 +37,22 @@ export interface AgentTranscriptProps {
     onopenartefact?: () => void;
     /** The persona's own words for its tools, and what they read. */
     describeTool?: DescribeTool;
+    /** The names of the files that went with the question, shown as chips. */
+    files?: string[];
+    /** Replaces this question with `text` and asks it again from here
+     *  (`Chat.edit`), resolving false when that did not go through. Omit
+     *  and no edit control renders: not while an answer is being written. */
+    onedit?: (text: string) => Promise<boolean>;
+    /** The documents the persona wrote answering it, carded under the answer. */
+    written?: Written[];
+    /** The version the reading column shows now, by `writtenKey`. */
+    showingWritten?: string;
+    /** Opens a version in the reading column. Omit and the cards only link. */
+    onopenwritten?: (written: Written) => void;
+    /** Where a version downloads. Omit and no download links render. */
+    writtenUrl?: WrittenUrl;
+    /** Languages of fenced code the host draws with its own component. */
+    fences?: Fences;
     /** When an answer this page did not start began, epoch ms: it is still
      *  being written, and the clock counts from then. */
     answering?: number;

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

@@ -1,5 +1,10 @@
 <!--
-  An artefact that is its answer's own prose, open in the reading column.
+  An artefact that is its answer's own prose, or one version of a document the
+  persona wrote, open in the reading column.
+
+  A written document is shown from its source: Markdown through the package's
+  sanitising renderer, HTML only inside a sandboxed frame with no permissions
+  (no scripts, no same origin), never injected into the page.
 
   The same shell shape `DocumentPane` uses (a column at 64rem, a bottom sheet
   below it) because decision 2 of the agent surface is that a colleague never
@@ -8,14 +13,33 @@
 -->
 <script lang="ts">
 	import XIcon from '@lucide/svelte/icons/x';
+	import { untrack } from 'svelte';
 	import { segment, type TextBlock, type Turn } from '../../transcript.svelte';
 	import { resolveCitations, splitSources, type Citation } from '../../citations';
-	import { resolveCopy, type ChatCopy } from '../../copy';
+	import { fill, resolveCopy, type ChatCopy } from '../../copy';
+	import {
+		downloads,
+		framed,
+		isHtml,
+		writtenKey,
+		type LoadWritten,
+		type Written,
+		type WrittenUrl
+	} from '../../written';
 	import Markdown from '../markdown/markdown.svelte';
 	import SourceList from '../source-list/source-list.svelte';
 
+
 	interface Props {
-		turn: Turn;
+		/** The turn whose answer is the artefact. Absent when `versions` is given. */
+		turn?: Turn;
+		/** Every version of one written document, oldest first: the pane shows
+		 *  `version` of them, with a switcher. */
+		versions?: Written[];
+		version?: number;
+		onversion?: (version: number) => void;
+		loadWritten?: LoadWritten;
+		writtenUrl?: WrittenUrl;
 		onclose: () => void;
 		/** Opens the cited document instead — swapping the column back, never
 		 *  stacking it beside the artefact. Omit and the sources still list, but
@@ -24,14 +48,49 @@
 		copy?: Partial<ChatCopy>;
 	}
 
-	let { turn, onclose, oncite, copy }: Props = $props();
+	let {
+		turn,
+		versions = [],
+		version,
+		onversion,
+		loadWritten,
+		writtenUrl,
+		onclose,
+		oncite,
+		copy
+	}: Props = $props();
 
 	const words = $derived(resolveCopy(copy));
 
-	const texts = $derived(segment(turn.blocks).filter((s): s is TextBlock => s.kind === 'text'));
+	// 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) : '');
+	let source = $state<{ text: string; mediaType: string } | null>(null);
+	let failed = $state(false);
+
+	// Keyed on the version alone: a new version of the same name arriving in
+	// the stream must not read this one again.
+	$effect(() => {
+		if (!currentKey) return;
+		const shown = untrack(() => current);
+		const load = untrack(() => loadWritten);
+		if (!shown || !load) return;
+		let live = true;
+		source = null;
+		failed = false;
+		load(shown.name, shown.version).then(
+			(read) => live && (source = read),
+			() => live && (failed = true)
+		);
+		return () => (live = false);
+	});
+
+	const texts = $derived(
+		segment(turn?.blocks ?? []).filter((s): s is TextBlock => s.kind === 'text')
+	);
 	const rawAnswer = $derived(texts.map((t) => t.text).join('\n\n'));
 	const split = $derived(splitSources(rawAnswer));
-	const sources = $derived(resolveCitations(turn.citations ?? [], split.citations));
+	const sources = $derived(resolveCitations(turn?.citations ?? [], split.citations));
 
 	let closeButton = $state<HTMLButtonElement | null>(null);
 
@@ -53,7 +112,7 @@
 
 <svelte:window onkeydown={keydown} />
 
-<aside aria-label="Study artefact" class="ds-lib-pane">
+<aside aria-label={current?.name ?? '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. -->
@@ -61,9 +120,34 @@
 
 	<header class="ds-lib-pane-header">
 		<div class="ds-lib-pane-heading">
-			<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 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))}
+					>
+						{#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>
+								</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}
 			{/if}
 		</div>
 		<button
@@ -77,15 +161,29 @@
 		</button>
 	</header>
 
-	<div class="ds-lib-pane-body">
-		<Markdown content={split.citations.length > 0 ? split.body : rawAnswer} />
+	{#if current}
+		{@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>
+			{:else if source && html}
+				<iframe class="ds-lib-pane-frame" sandbox="" srcdoc={framed(source.text)} title={current.name}
+				></iframe>
+			{:else if source}
+				<Markdown content={source.text} />
+			{/if}
+		</div>
+	{:else}
+		<div class="ds-lib-pane-body">
+			<Markdown content={split.citations.length > 0 ? split.body : rawAnswer} />
 
-		{#if sources.length > 0}
-			<div class="ds-lib-pane-sources">
-				<SourceList {sources} {words} {oncite} level={3} />
-			</div>
-		{/if}
-	</div>
+			{#if sources.length > 0}
+				<div class="ds-lib-pane-sources">
+					<SourceList {sources} {words} {oncite} level={3} />
+				</div>
+			{/if}
+		</div>
+	{/if}
 </aside>
 
 <style>
@@ -187,6 +285,52 @@
 		padding: 0.75rem 1rem;
 	}
 
+	.ds-lib-pane-tools {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem 0.75rem;
+		margin-top: 0.25rem;
+	}
+
+	.ds-lib-pane-versions {
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-md);
+		background: var(--ds-color-surface-1);
+		padding: 0.125rem 0.25rem;
+		color: var(--ds-color-foreground);
+		font: inherit;
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-pane-links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		margin: 0;
+		padding: 0;
+		font-size: var(--ds-text-2xs);
+		list-style: none;
+	}
+
+	.ds-lib-pane-links a {
+		color: var(--ds-color-muted-foreground);
+		text-decoration: underline;
+	}
+
+	.ds-lib-pane-body.is-frame {
+		overflow: hidden;
+		padding: 0;
+	}
+
+	.ds-lib-pane-frame {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border: 0;
+		background: #fff;
+	}
+
 	.ds-lib-pane-sources {
 		margin-top: 1.5rem;
 	}

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

@@ -1,8 +1,17 @@
 import { type Turn } from '../../transcript.svelte';
 import { type Citation } from '../../citations';
 import { type ChatCopy } from '../../copy';
+import { type LoadWritten, type Written, type WrittenUrl } from '../../written';
 interface Props {
-    turn: Turn;
+    /** The turn whose answer is the artefact. Absent when `versions` is given. */
+    turn?: Turn;
+    /** Every version of one written document, oldest first: the pane shows
+     *  `version` of them, with a switcher. */
+    versions?: Written[];
+    version?: number;
+    onversion?: (version: number) => void;
+    loadWritten?: LoadWritten;
+    writtenUrl?: WrittenUrl;
     onclose: () => void;
     /** Opens the cited document instead — swapping the column back, never
      *  stacking it beside the artefact. Omit and the sources still list, but

package/dist/components/conversation/conversation.svelte

@@ -20,19 +20,32 @@
 	import type { DescribeTool, Turn } from '../../transcript.svelte';
 	import type { Verdict } from '../../chat.svelte';
 	import type { Citation, LoadDocument } from '../../citations';
+	import {
+		writtenKey,
+		writtenVersions,
+		type LoadWritten,
+		type Written,
+		type WrittenUrl
+	} from '../../written';
 	import { DEFAULT_PERSONA, personaName, resolveCopy, type ChatCopy } from '../../copy';
 	import { FollowScroll } from '../../follow-scroll.svelte';
 	import AgentTranscript, {
 		type AgentTranscriptProps
 	} from '../agent-transcript/agent-transcript.svelte';
 	import ArtefactPane from '../artefact-pane/artefact-pane.svelte';
+	import type { Fences } from '../markdown/markdown';
 	import DocumentPane from '../document-pane/document-pane.svelte';
 	import ScopeStatement from '../scope-statement/scope-statement.svelte';
 
-	/** What the reading column holds — a cited document or a study artefact,
-	 *  never both and never two panes: whichever the reader last opened
-	 *  replaces whatever was there. */
-	type Column = { kind: 'document'; citation: Citation } | { kind: 'artefact'; turn: Turn } | null;
+	/** What the reading column holds — a cited document, a study artefact or a
+	 *  document the persona wrote, never two at once and never two panes:
+	 *  whichever the reader last opened replaces whatever was there. A written
+	 *  document's `version` is null while the reader follows the newest. */
+	type Column =
+		| { kind: 'document'; citation: Citation }
+		| { kind: 'artefact'; turn: Turn }
+		| { kind: 'written'; name: string; version: number | null }
+		| null;
 
 	interface Props {
 		turns: Turn[];
@@ -86,6 +99,19 @@
 		showing?: string;
 		/** The persona's own words for its tools, and what they read. */
 		describeTool?: DescribeTool;
+		/** Replaces the question at `position` (its place among `turns`) with
+		 *  `text` and asks it again from there (`Chat.edit`). Offered on every
+		 *  plain question while no answer is being written; without it no turn
+		 *  can be edited. */
+		onedit?: (position: number, text: string) => Promise<boolean>;
+		/** Reads one version of a document the persona wrote, to show it in the
+		 *  column. Without it its cards link but do not open. */
+		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;
 		/** 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
@@ -133,6 +159,10 @@
 		onopenartefact,
 		showing,
 		describeTool,
+		onedit,
+		loadWritten,
+		writtenUrl,
+		fences,
 		collectionNames = new Set(),
 		composer,
 		turn: presentTurn,
@@ -252,6 +282,24 @@
 		return undefined;
 	}
 
+	/** Opens a written version, following the newest if it is the newest. */
+	function openWritten(written: Written) {
+		const newest = writtenVersions(turns, written.name).at(-1)?.version;
+		column = {
+			kind: 'written',
+			name: written.name,
+			version: written.version === newest ? null : written.version
+		};
+	}
+
+	const shownWritten = $derived.by(() => {
+		const open = column;
+		if (open?.kind !== 'written') return undefined;
+		const versions = writtenVersions(turns, open.name);
+		const shown = versions.find((v) => v.version === open.version) ?? versions.at(-1);
+		return { versions, version: shown?.version, key: shown ? writtenKey(shown) : undefined };
+	});
+
 	function isShowing(turn: Turn): boolean {
 		if (onopenartefact) return showing === turn.id;
 		return column?.kind === 'artefact' && column.turn.id === turn.id;
@@ -311,7 +359,7 @@
 						     Centred, both sit under the composer instead. -->
 						{#if !centred}
 							{#if scope}
-								<ScopeStatement statement={scope} expanded={empty} copy={words} />
+								<ScopeStatement statement={scope} expanded={false} copy={words} />
 							{/if}
 							{@render lead?.()}
 						{/if}
@@ -333,6 +381,16 @@
 								artefactOpen: isShowing(turn),
 								onopenartefact: opener(turn),
 								describeTool,
+								files: turn.files,
+								written: turn.written,
+								showingWritten: shownWritten?.key,
+								onopenwritten: loadWritten ? openWritten : undefined,
+								writtenUrl,
+								fences,
+								onedit:
+									onedit && !running && !turn.kind && turn.question
+										? (text: string) => onedit(index, text)
+										: undefined,
 								formatCost,
 								oncite: oncite || loadDocument ? cite : undefined,
 								onregenerate: last && !running ? onregenerate : undefined,
@@ -367,7 +425,9 @@
 							<div class="ds-lib-after">
 								{@render suggestions()}
 								{#if scope}
-									<ScopeStatement statement={scope} expanded={false} copy={words} />
+									<div class="ds-lib-after-scope">
+										<ScopeStatement statement={scope} expanded={false} copy={words} />
+									</div>
 								{/if}
 								{@render lead?.()}
 							</div>
@@ -385,6 +445,18 @@
 			copy={words}
 			onclose={() => (column = null)}
 		/>
+	{:else if column?.kind === 'written' && shownWritten && shownWritten.versions.length > 0}
+		<ArtefactPane
+			versions={shownWritten.versions}
+			version={shownWritten.version}
+			onversion={(version) => {
+				if (column?.kind === 'written') column = { ...column, version };
+			}}
+			{loadWritten}
+			{writtenUrl}
+			copy={words}
+			onclose={() => (column = null)}
+		/>
 	{:else if column?.kind === 'artefact'}
 		<ArtefactPane
 			turn={column.turn}
@@ -532,6 +604,11 @@
 		padding-top: 1rem;
 	}
 
+	.ds-lib-after-scope {
+		display: flex;
+		justify-content: center;
+	}
+
 	.ds-lib-after .ds-lib-chips {
 		flex-flow: row wrap;
 		justify-content: center;

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

@@ -2,8 +2,10 @@ import type { Snippet } from 'svelte';
 import type { DescribeTool, Turn } from '../../transcript.svelte';
 import type { Verdict } from '../../chat.svelte';
 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';
 interface Props {
     turns: Turn[];
     running: boolean;
@@ -56,6 +58,19 @@ interface Props {
     showing?: string;
     /** The persona's own words for its tools, and what they read. */
     describeTool?: DescribeTool;
+    /** Replaces the question at `position` (its place among `turns`) with
+     *  `text` and asks it again from there (`Chat.edit`). Offered on every
+     *  plain question while no answer is being written; without it no turn
+     *  can be edited. */
+    onedit?: (position: number, text: string) => Promise<boolean>;
+    /** Reads one version of a document the persona wrote, to show it in the
+     *  column. Without it its cards link but do not open. */
+    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;
     /** 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/fair-use-notice/fair-use-notice.svelte

@@ -79,7 +79,7 @@
 	}
 
 	.ds-lib-fair-use a {
-		color: var(--ds-color-primary);
+		color: var(--ds-color-primary-ink, var(--ds-color-primary));
 		text-decoration: underline;
 		text-underline-offset: 2px;
 	}

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

@@ -15,6 +15,7 @@
  * 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 }?: {
@@ -42,6 +43,16 @@ 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<{
+    source: string;
+}>>;
+/**
+ * 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.
+ */
+export declare function mountFences(root: HTMLElement, fences: Fences): () => 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

@@ -17,6 +17,7 @@
  */
 import DOMPurify from 'isomorphic-dompurify';
 import { marked } from 'marked';
+import { mount, unmount } from 'svelte';
 marked.setOptions({ gfm: true, breaks: false });
 /** Close anything the stream has opened but not yet finished. */
 export function balance(markdown) {
@@ -35,14 +36,52 @@ export function balance(markdown) {
     }
     return text;
 }
+const FETCHERS = 'img, picture, source, video, audio, track, iframe, object, embed, link, style, image, use';
+const URL_ATTRS = ['src', 'href', 'xlink:href', 'poster', 'data', 'srcset'];
+/** Only what cannot leave the origin: a data URL, a same-origin path, a fragment. */
+function stays(url) {
+    const u = url.trim();
+    return /^data:/i.test(u) || (u.startsWith('/') && !u.startsWith('//')) || u.startsWith('#');
+}
+/**
+ * A rendered answer must not fetch from anywhere: a remote image or url() in
+ * agent output is a beacon that carries the conversation out in its query.
+ * A remote image degrades to its alt text (or its address as a link).
+ */
+function dropFetchers(root) {
+    for (const el of root.querySelectorAll(FETCHERS)) {
+        const urls = URL_ATTRS.map((a) => el.getAttribute(a)).filter((v) => v !== null);
+        if (urls.every(stays))
+            continue;
+        if (el.tagName === 'IMG') {
+            const alt = el.getAttribute('alt')?.trim();
+            const src = el.getAttribute('src')?.trim() ?? '';
+            if (alt)
+                el.replaceWith(root.ownerDocument.createTextNode(alt));
+            else if (/^https?:\/\//i.test(src)) {
+                const a = root.ownerDocument.createElement('a');
+                a.setAttribute('href', src);
+                a.textContent = src;
+                el.replaceWith(a);
+            }
+            else
+                el.remove();
+        }
+        else
+            el.remove();
+    }
+}
 export function render(markdown, { streaming = false } = {}) {
     const source = streaming ? balance(markdown) : markdown;
     const html = marked.parse(source, { async: false });
-    return DOMPurify.sanitize(html, {
+    const body = DOMPurify.sanitize(html, {
         ADD_ATTR: ['target', 'rel', 'data-cite', 'tabindex', 'role'],
         FORBID_TAGS: ['style', 'form', 'input', 'button'],
-        FORBID_ATTR: ['style', 'onerror', 'onload']
+        FORBID_ATTR: ['style', 'srcset', 'onerror', 'onload'],
+        RETURN_DOM: true
     });
+    dropFetchers(body);
+    return body.innerHTML;
 }
 let highlighterPromise = null;
 /** Loaded once, lazily — shiki's engine and grammars are not small. */
@@ -137,6 +176,27 @@ export function markCitations(root, valid) {
         text.replaceWith(fragment);
     }
 }
+/**
+ * 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.
+ */
+export function mountFences(root, fences) {
+    const drawn = [];
+    for (const code of root.querySelectorAll('pre > code')) {
+        const lang = [...code.classList].find((c) => c.startsWith('language-'))?.slice(9);
+        const pre = code.parentElement;
+        if (!lang || !pre || !Object.hasOwn(fences, lang))
+            continue;
+        const target = document.createElement('div');
+        pre.replaceWith(target);
+        drawn.push(mount(fences[lang], { target, props: { source: code.textContent ?? '' } }));
+    }
+    return () => {
+        for (const one of drawn)
+            void unmount(one);
+    };
+}
 /**
  * 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,7 +7,14 @@
   consuming app.
 -->
 <script lang="ts">
-	import { highlight, markCitations, markCollections, render } from './markdown';
+	import {
+		highlight,
+		markCitations,
+		markCollections,
+		mountFences,
+		render,
+		type Fences
+	} from './markdown';
 
 	interface Props {
 		content: string;
@@ -20,6 +27,9 @@
 		/** A step down, for prose that is reference material beside an answer
 		 *  rather than the answer itself — the source pane's sections. */
 		dense?: boolean;
+		/** A language to draw with the host's own component instead of as code.
+		 *  Absent, every fence renders as code. */
+		fences?: Fences;
 	}
 
 	let {
@@ -28,12 +38,22 @@
 		collectionNames = new Set(),
 		citationNumbers = new Set(),
 		oncite,
-		dense = false
+		dense = false,
+		fences
 	}: Props = $props();
 	let host = $state<HTMLElement | null>(null);
 
 	const html = $derived(render(content, { streaming }));
 
+	// Once settled (a half-written fence is not a chart), and before the
+	// highlight below, which would otherwise take the block first. Its own
+	// effect, so a change to the chips never unmounts what it drew.
+	$effect(() => {
+		void html;
+		if (!host || streaming || !fences) return;
+		return mountFences(host, fences);
+	});
+
 	// Highlight only once the text has settled. Re-running per token would
 	// re-parse grammars for a block that changes again milliseconds later.
 	$effect(() => {
@@ -214,8 +234,9 @@
 		color: var(--ds-color-foreground);
 	}
 
+	/* The accent as text: an app whose accent fails as text sets the ink. */
 	.agent-prose :global(a) {
-		color: var(--ds-color-primary);
+		color: var(--ds-color-primary-ink, var(--ds-color-primary));
 		text-underline-offset: 0.2em;
 		text-decoration-line: underline;
 	}

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

@@ -1,3 +1,4 @@
+import { type Fences } from './markdown';
 interface Props {
     content: string;
     streaming?: boolean;
@@ -9,6 +10,9 @@ interface Props {
     /** A step down, for prose that is reference material beside an answer
      *  rather than the answer itself — the source pane's sections. */
     dense?: boolean;
+    /** A language to draw with the host's own component instead of as code.
+     *  Absent, every fence renders as code. */
+    fences?: Fences;
 }
 declare const Markdown: import("svelte").Component<Props, {}, "">;
 type Markdown = ReturnType<typeof Markdown>;