@poodle64/librarian 2026.10.4 → 2026.10.6

package/dist/components/source-list/source-list.svelte

@@ -17,16 +17,18 @@
 		oncite?: (citation: Citation) => void;
 		/** `h2` in a transcript turn, `h3` under the artefact's own title. */
 		level?: 2 | 3;
+		/** The heading, where it is not "Sources". */
+		heading?: string;
 	}
 
-	let { sources, words, oncite, level = 2 }: Props = $props();
+	let { sources, words, oncite, level = 2, heading = words.sources }: Props = $props();
 </script>
 
 <section class="ds-lib-sources">
 	{#if level === 2}
-		<h2 class="ds-lib-sources-heading">{words.sources}</h2>
+		<h2 class="ds-lib-sources-heading">{heading}</h2>
 	{:else}
-		<h3 class="ds-lib-sources-heading">{words.sources}</h3>
+		<h3 class="ds-lib-sources-heading">{heading}</h3>
 	{/if}
 	<ol class="ds-lib-sources-list">
 		{#each sources as source (source.n)}

package/dist/components/source-list/source-list.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props {
     oncite?: (citation: Citation) => void;
     /** `h2` in a transcript turn, `h3` under the artefact's own title. */
     level?: 2 | 3;
+    /** The heading, where it is not "Sources". */
+    heading?: string;
 }
 declare const SourceList: import("svelte").Component<Props, {}, "">;
 type SourceList = ReturnType<typeof SourceList>;

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

@@ -11,16 +11,30 @@
 -->
 <script lang="ts">
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import LightbulbIcon from '@lucide/svelte/icons/lightbulb';
+	import { fill, resolveCopy, type ChatCopy } from '../../copy';
+	import { thoughtSeconds } from '../../steps';
 	import type { TextBlock, ThinkingBlock } from '../../transcript.svelte';
 
 	interface Props {
 		block: ThinkingBlock | TextBlock;
 		/** Still being written: "Thinking…" rather than "Thought". */
 		active: boolean;
+		copy?: Partial<ChatCopy>;
 	}
 
-	let { block, active }: Props = $props();
+	let { block, active, copy }: Props = $props();
 	let open = $state(false);
+
+	const words = $derived(resolveCopy(copy));
+	const seconds = $derived(thoughtSeconds(block));
+	const label = $derived(
+		active
+			? words.thinking
+			: seconds === undefined
+				? words.thought
+				: fill(words.thoughtFor, { n: seconds })
+	);
 </script>
 
 <div class="ds-lib-thinking">
@@ -30,11 +44,10 @@
 		onclick={() => (open = !open)}
 		aria-expanded={open}
 	>
-		<span class="ds-lib-thinking-chevron" class:is-open={open}>
-			<ChevronRightIcon size={12} />
-		</span>
-		<span class="ds-lib-thinking-label" class:is-active={active}>
-			{active ? 'Thinking…' : 'Thought'}
+		<span class="ds-lib-thinking-icon" aria-hidden="true"><LightbulbIcon size={14} /></span>
+		<span class="ds-lib-thinking-label" class:is-active={active}>{label}</span>
+		<span class="ds-lib-thinking-chevron" class:is-open={open} aria-hidden="true">
+			<ChevronRightIcon size={14} />
 		</span>
 	</button>
 	{#if open}
@@ -50,9 +63,10 @@
 
 	.ds-lib-thinking-row {
 		display: flex;
+		width: 100%;
 		align-items: center;
-		gap: 0.5rem;
-		padding-block: 0.125rem;
+		gap: 0.625rem;
+		padding-block: 0.25rem;
 		border: 0;
 		background: none;
 		color: inherit;
@@ -61,18 +75,14 @@
 		cursor: pointer;
 	}
 
-	.ds-lib-thinking-chevron {
+	.ds-lib-thinking-icon {
 		display: flex;
 		flex: none;
 		color: var(--ds-color-muted-foreground);
-		transition: transform 150ms ease;
-	}
-
-	.ds-lib-thinking-chevron.is-open {
-		transform: rotate(90deg);
 	}
 
 	.ds-lib-thinking-label {
+		flex: 1;
 		color: var(--ds-color-muted-foreground);
 	}
 
@@ -81,11 +91,22 @@
 		font-weight: 500;
 	}
 
+	.ds-lib-thinking-chevron {
+		display: flex;
+		flex: none;
+		color: var(--ds-color-muted-foreground);
+		transition: transform 150ms ease;
+	}
+
+	.ds-lib-thinking-chevron.is-open {
+		transform: rotate(90deg);
+	}
+
 	.ds-lib-thinking-text {
 		margin: 0.25rem 0 0;
-		margin-inline-start: 0.3125rem;
+		margin-inline-start: 0.4375rem;
 		border-inline-start: 1px solid var(--ds-color-border);
-		padding-inline-start: 0.75rem;
+		padding-inline-start: 1rem;
 		color: var(--ds-color-muted-foreground);
 		white-space: pre-wrap;
 	}

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

@@ -1,8 +1,10 @@
+import { type ChatCopy } from '../../copy';
 import type { TextBlock, ThinkingBlock } from '../../transcript.svelte';
 interface Props {
     block: ThinkingBlock | TextBlock;
     /** Still being written: "Thinking…" rather than "Thought". */
     active: boolean;
+    copy?: Partial<ChatCopy>;
 }
 declare const ThinkingRow: import("svelte").Component<Props, {}, "">;
 type ThinkingRow = ReturnType<typeof ThinkingRow>;

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

@@ -1,19 +1,27 @@
 <!--
-  One tool call, as a row in the transcript.
+  One tool call, as a row in the turn's fold.
 
-  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 persona DID, in a reader's own words — never the
-  tool's name or the raw command it ran: the host's `DescribeTool`, or the
+  Not a card: the kind of step as an icon, an action in bold, its target
+  beside it, and at the right hand what the result counted ("9 found") and a
+  chevron. The row says what the persona DID, in a reader's own words — never
+  the tool's name or the raw command it ran: the host's `DescribeTool`, or the
   package's own `describe()`. Expanding it shows what went in and what came
-  back, the way Claude Code's own panel does.
+  back, the way Claude Code's own panel does; a web search shows the pages it
+  found instead, as small cards.
 -->
 <script lang="ts">
+	import BookOpenTextIcon from '@lucide/svelte/icons/book-open-text';
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import FilePenIcon from '@lucide/svelte/icons/file-pen';
+	import FileTextIcon from '@lucide/svelte/icons/file-text';
+	import GlobeIcon from '@lucide/svelte/icons/globe';
+	import LibraryIcon from '@lucide/svelte/icons/library';
+	import PencilIcon from '@lucide/svelte/icons/pencil';
 	import { describe, type ToolBlock, type ToolWords } from '../../transcript.svelte';
 	import { resolveCopy, type ChatCopy } from '../../copy';
+	import { stepKind, stepMeta, type StepKind } from '../../steps';
+	import { searchPages } from '../../web-sources';
 
 	interface Props {
 		block: ToolBlock;
@@ -26,9 +34,23 @@
 	let { block, running, words, copy }: Props = $props();
 	let open = $state(false);
 
+	const ICONS = {
+		attachment: FileTextIcon,
+		library: LibraryIcon,
+		web: GlobeIcon,
+		open: BookOpenTextIcon,
+		write: FilePenIcon,
+		edit: PencilIcon,
+		thought: CircleIcon,
+		other: CircleIcon
+	} satisfies Record<StepKind, unknown>;
+
 	const label = $derived(resolveCopy(copy));
 	const settled = $derived(block.result !== undefined);
 	const said = $derived(words ?? describe(block));
+	const Icon = $derived(ICONS[stepKind(block)]);
+	const meta = $derived(stepMeta(block, label));
+	const pages = $derived(searchPages(block));
 	const tone = $derived(block.isError ? 'error' : settled ? 'success' : 'info');
 	// Pretty while it parses; the raw text while it is still arriving.
 	const input = $derived.by(() => {
@@ -50,26 +72,43 @@
 		onclick={() => (open = !open)}
 		aria-expanded={open}
 	>
-		<span class="ds-lib-tool-chevron" class:is-open={open}>
-			<ChevronRightIcon size={12} />
+		<span class="ds-lib-tool-icon" data-tone={tone} class:is-live={!settled && running} aria-hidden="true">
+			<Icon size={14} />
 		</span>
-		<span class="ds-lib-tool-dot" data-tone={tone} class:is-live={!settled && running}></span>
 		<span class="ds-lib-tool-said">
 			<span class="ds-lib-tool-verb">{said.verb}</span>
 			{#if said.object}<span class="ds-lib-tool-object">{said.object}</span>{/if}
 		</span>
 		{#if block.isError}<span class="ds-lib-tool-failed">{label.stepFailed}</span>{/if}
+		{#if meta}<span class="ds-lib-tool-meta">{meta}</span>{/if}
+		<span class="ds-lib-tool-chevron" class:is-open={open} aria-hidden="true">
+			<ChevronRightIcon size={14} />
+		</span>
 	</button>
 
 	{#if open}
 		<div class="ds-lib-tool-body">
-			{#if input}
-				<p class="ds-lib-tool-label">{label.stepInput}</p>
-				<pre class="ds-lib-tool-result">{input}</pre>
-			{/if}
-			{#if block.result}
-				<p class="ds-lib-tool-label">{label.stepResult}</p>
-				<pre class="ds-lib-tool-result">{block.result}</pre>
+			{#if pages.length > 0}
+				<ul class="ds-lib-tool-pages">
+					{#each pages as page (page.url)}
+						<li>
+							<a class="ds-lib-tool-page" href={page.url} target="_blank" rel="noopener noreferrer">
+								<span class="ds-lib-tool-page-host"><GlobeIcon size={11} />{page.host}</span>
+								<span class="ds-lib-tool-page-title">{page.title}</span>
+								{#if page.snippet}<span class="ds-lib-tool-page-snippet">{page.snippet}</span>{/if}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				{#if input}
+					<p class="ds-lib-tool-label">{label.stepInput}</p>
+					<pre class="ds-lib-tool-result">{input}</pre>
+				{/if}
+				{#if block.result}
+					<p class="ds-lib-tool-label">{label.stepResult}</p>
+					<pre class="ds-lib-tool-result">{block.result}</pre>
+				{/if}
 			{/if}
 		</div>
 	{:else if said.detail}
@@ -87,8 +126,8 @@
 		display: flex;
 		width: 100%;
 		align-items: center;
-		gap: 0.5rem;
-		padding-block: 0.125rem;
+		gap: 0.625rem;
+		padding-block: 0.25rem;
 		border: 0;
 		background: none;
 		color: inherit;
@@ -97,12 +136,23 @@
 		cursor: pointer;
 	}
 
+	.ds-lib-tool-icon {
+		display: flex;
+		flex: none;
+		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-tool-icon[data-tone='error'] {
+		color: var(--ds-color-status-error);
+	}
+
+	.ds-lib-tool-icon.is-live {
+		animation: ds-lib-tool-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
 	.ds-lib-tool-chevron {
 		display: flex;
-		width: 0.75rem;
 		flex: none;
-		align-items: center;
-		justify-content: center;
 		color: var(--ds-color-muted-foreground);
 		transition: transform 150ms ease;
 	}
@@ -111,28 +161,70 @@
 		transform: rotate(90deg);
 	}
 
-	.ds-lib-tool-dot {
-		width: 0.375rem;
-		height: 0.375rem;
+	.ds-lib-tool-meta {
 		flex: none;
-		border-radius: var(--ds-radius-full);
-		background: var(--ds-color-status-info);
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+		font-variant-numeric: tabular-nums;
 	}
 
-	.ds-lib-tool-dot[data-tone='error'] {
-		background: var(--ds-color-status-error);
+	.ds-lib-tool-pages {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
 	}
 
-	.ds-lib-tool-dot[data-tone='success'] {
-		background: var(--ds-color-status-success);
+	.ds-lib-tool-page {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		gap: 0.125rem;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-md);
+		padding: 0.5rem 0.625rem;
+		color: inherit;
+		font-size: var(--ds-text-2xs);
+		line-height: 1.35;
+		text-decoration: none;
 	}
 
-	.ds-lib-tool-dot.is-live {
-		animation: ds-lib-tool-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	.ds-lib-tool-page:hover {
+		background: var(--ds-color-surface-2);
+	}
+
+	.ds-lib-tool-page:focus-visible {
+		outline: 2px solid var(--ds-color-ring);
+		outline-offset: 2px;
+	}
+
+	.ds-lib-tool-page-host {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-tool-page-title {
+		color: var(--ds-color-foreground);
+		font-size: 0.8125rem;
+		font-weight: 600;
+	}
+
+	.ds-lib-tool-page-snippet {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		overflow: hidden;
+		color: var(--ds-color-muted-foreground);
 	}
 
 	.ds-lib-tool-said {
 		min-width: 0;
+		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -150,9 +242,9 @@
 
 	.ds-lib-tool-body {
 		margin-top: 0.25rem;
-		margin-inline-start: 1.375rem;
+		margin-inline-start: 0.4375rem;
 		border-inline-start: 1px solid var(--ds-color-border);
-		padding-inline-start: 0.75rem;
+		padding-inline-start: 1rem;
 	}
 
 	.ds-lib-tool-result {
@@ -181,7 +273,7 @@
 
 	.ds-lib-tool-lines {
 		margin: 0;
-		padding-inline-start: 1.375rem;
+		padding-inline-start: 1.5rem;
 		color: var(--ds-color-muted-foreground);
 		font-size: var(--ds-text-2xs);
 	}
@@ -193,7 +285,7 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.ds-lib-tool-dot.is-live {
+		.ds-lib-tool-icon.is-live {
 			animation: none;
 		}
 

package/dist/components/visual-block/chart-draw.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { AreaChart, BarChart, LineChart } from 'layerchart';
+	import type { ChartValue } from '../../visuals';
+
+	let { value }: { value: ChartValue } = $props();
+
+	// `--chart-1` to `--chart-5` are the app's own series colours.
+	const series = $derived(
+		value.y.map((key, index) => ({ key, label: key, color: `var(--chart-${index + 1})` }))
+	);
+	const legend = $derived(series.length > 1);
+	// A line or area over ISO dates is a time axis; anything else is the label it says.
+	const data = $derived(
+		value.type !== 'bar' && value.data.every((row) => /^\d{4}-\d{2}(-\d{2})?$/.test(String(row[value.x])))
+			? value.data.map((row) => ({ ...row, [value.x]: new Date(String(row[value.x])) }))
+			: value.data
+	);
+</script>
+
+{#if value.type === 'bar'}
+	<BarChart {data} x={value.x} {series} {legend} seriesLayout="group" props={{ bars: { strokeWidth: 0, radius: 2 } }} />
+{:else if value.type === 'line'}
+	<LineChart {data} x={value.x} {series} {legend} />
+{:else}
+	<AreaChart {data} x={value.x} {series} {legend} />
+{/if}

package/dist/components/visual-block/chart-draw.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ChartValue } from '../../visuals';
+type $$ComponentProps = {
+    value: ChartValue;
+};
+declare const ChartDraw: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartDraw = ReturnType<typeof ChartDraw>;
+export default ChartDraw;

package/dist/components/visual-block/chart.svelte

@@ -0,0 +1,73 @@
+<!--
+  One chart block, drawn with LayerChart in the app's chart tokens. The persona
+  writes the data and the kind; colour, type, axes and size come from here.
+  LayerChart is loaded when an answer carries a chart, never with the page.
+-->
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import type { ChartValue } from '../../visuals';
+
+	interface Props {
+		value: unknown;
+		source: string;
+	}
+
+	let { value, source }: Props = $props();
+	const chart = $derived(value as ChartValue);
+	let Draw = $state<Component<{ value: ChartValue }> | null>(null);
+	let failed = $state(false);
+
+	$effect(() => {
+		if (Draw || failed) return;
+		import('./chart-draw.svelte').then(
+			(module) => (Draw = module.default),
+			() => (failed = true)
+		);
+	});
+</script>
+
+{#if failed}
+	<pre data-highlighted="true"><code>{source}</code></pre>
+{:else}
+	<figure class="ds-lib-chart">
+		{#if chart.title}<figcaption class="ds-lib-chart-title">{chart.title}</figcaption>{/if}
+		<div class="ds-lib-chart-host">
+			{#if Draw}<Draw value={chart} />{/if}
+		</div>
+	</figure>
+{/if}
+
+<style>
+	.ds-lib-chart {
+		margin: 0.75em 0;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-lg);
+		background: var(--ds-color-surface-1);
+		padding: 0.75rem 0.875rem;
+	}
+
+	.ds-lib-chart-title {
+		margin-bottom: 0.5rem;
+		color: var(--ds-color-foreground);
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.ds-lib-chart-host {
+		width: 100%;
+		height: 16rem;
+	}
+
+	.ds-lib-chart-host :global(text) {
+		fill: var(--ds-color-muted-foreground);
+		stroke: none;
+		font-size: 12px;
+	}
+
+	.ds-lib-chart-host :global(.lc-rule),
+	.ds-lib-chart-host :global(.lc-axis-tick),
+	.ds-lib-chart-host :global(.lc-grid-x-line),
+	.ds-lib-chart-host :global(.lc-grid-y-line) {
+		stroke: var(--ds-color-border-strong);
+	}
+</style>

package/dist/components/visual-block/chart.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte';
+interface Props {
+    value: unknown;
+    source: string;
+}
+declare const Chart: Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/visual-block/entity-card.svelte

@@ -0,0 +1,94 @@
+<!--
+  One thing, its kind, a line on it, and its facts.
+-->
+<script lang="ts">
+	import type { CardValue } from '../../visuals';
+
+	interface Props {
+		value: unknown;
+		source: string;
+	}
+
+	let { value }: Props = $props();
+	const card = $derived(value as CardValue);
+</script>
+
+<figure class="ds-lib-entity">
+	<header class="ds-lib-entity-head">
+		<span class="ds-lib-entity-name">{card.name}</span>
+		{#if card.kind}<span class="ds-lib-entity-kind">{card.kind}</span>{/if}
+	</header>
+	{#if card.summary}<p class="ds-lib-entity-summary">{card.summary}</p>{/if}
+	{#if card.facts.length > 0}
+		<dl class="ds-lib-entity-facts">
+			{#each card.facts as fact, i (i)}
+				<div class="ds-lib-entity-fact">
+					<dt>{fact.label}</dt>
+					<dd>{fact.value}</dd>
+				</div>
+			{/each}
+		</dl>
+	{/if}
+</figure>
+
+<style>
+	.ds-lib-entity {
+		margin: 0.75em 0;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-lg);
+		background: var(--ds-color-surface-1);
+		padding: 0.75rem 1rem;
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+
+	.ds-lib-entity-head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0.25rem 0.625rem;
+	}
+
+	.ds-lib-entity-name {
+		color: var(--ds-color-foreground);
+		font-size: 1rem;
+		font-weight: 600;
+	}
+
+	.ds-lib-entity-kind {
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	.ds-lib-entity-summary {
+		margin: 0.25rem 0 0;
+		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-entity-facts {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+		gap: 0.5rem 1rem;
+		margin: 0.625rem 0 0;
+		border-top: 1px solid var(--ds-color-border);
+		padding-top: 0.625rem;
+	}
+
+	.ds-lib-entity-fact {
+		margin: 0;
+	}
+
+	.ds-lib-entity-fact dt {
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-entity-fact dd {
+		margin: 0;
+		color: var(--ds-color-foreground);
+		font-weight: 500;
+		overflow-wrap: anywhere;
+	}
+</style>

package/dist/components/visual-block/entity-card.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: unknown;
+    source: string;
+}
+declare const EntityCard: import("svelte").Component<Props, {}, "">;
+type EntityCard = ReturnType<typeof EntityCard>;
+export default EntityCard;