@poodle64/librarian 2026.10.3 → 2026.10.5

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

@@ -1,40 +1,68 @@
 <!--
-  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
-  package's own `describe()`. Expanding a settled row shows what came back,
-  never what was typed.
+  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; 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;
 		running: boolean;
-		/** Identical consecutive steps folded into this row — five pages of one
-		 *  document is one act of reading to a human. */
-		repeats?: number;
 		/** The call in the persona's words. Absent takes the package's own. */
 		words?: ToolWords;
+		copy?: Partial<ChatCopy>;
 	}
 
-	let { block, running, repeats = 1, words }: Props = $props();
+	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');
-	const again = $derived(
-		said.repeat
-			? `· ${repeats} ${repeats === 1 ? said.repeat[0] : said.repeat[1]}`
-			: `× ${repeats}`
-	);
+	// Pretty while it parses; the raw text while it is still arriving.
+	const input = $derived.by(() => {
+		try {
+			const parsed: unknown = JSON.parse(block.rawInput);
+			return typeof parsed === 'object' && parsed !== null && Object.keys(parsed).length === 0
+				? ''
+				: JSON.stringify(parsed, null, 2);
+		} catch {
+			return block.rawInput;
+		}
+	});
 </script>
 
 <div class="ds-lib-tool">
@@ -42,24 +70,45 @@
 		type="button"
 		class="ds-lib-tool-row"
 		onclick={() => (open = !open)}
-		disabled={!settled}
 		aria-expanded={open}
 	>
-		<span class="ds-lib-tool-chevron" class:is-open={open}>
-			{#if settled}<ChevronRightIcon size={12} />{/if}
+		<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}
-			{#if repeats > 1}<span>{again}</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 block.result}
-				<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}
@@ -77,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;
@@ -87,16 +136,23 @@
 		cursor: pointer;
 	}
 
-	.ds-lib-tool-row:disabled {
-		cursor: default;
+	.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;
 	}
@@ -105,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;
@@ -144,14 +242,14 @@
 
 	.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 {
-		margin-top: 0.25rem;
-		max-height: 18rem;
+		margin: 0.125rem 0 0;
+		max-height: 12rem;
 		overflow: auto;
 		color: var(--ds-color-muted-foreground);
 		font-family: var(--ds-font-code);
@@ -159,9 +257,23 @@
 		white-space: pre-wrap;
 	}
 
+	.ds-lib-tool-label {
+		margin: 0.25rem 0 0;
+		color: var(--ds-color-muted-foreground);
+		font-size: var(--ds-text-2xs);
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	.ds-lib-tool-failed {
+		flex: none;
+		color: var(--ds-color-status-error);
+		font-size: var(--ds-text-2xs);
+	}
+
 	.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);
 	}
@@ -173,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/tool-row/tool-row.svelte.d.ts

@@ -1,12 +1,11 @@
 import { type ToolBlock, type ToolWords } from '../../transcript.svelte';
+import { type ChatCopy } from '../../copy';
 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;
     /** The call in the persona's words. Absent takes the package's own. */
     words?: ToolWords;
+    copy?: Partial<ChatCopy>;
 }
 declare const ToolRow: import("svelte").Component<Props, {}, "">;
 type ToolRow = ReturnType<typeof ToolRow>;

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;

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

@@ -0,0 +1,99 @@
+<!--
+  A run of dated events, as a vertical line with a mark at each.
+-->
+<script lang="ts">
+	import type { TimelineValue } from '../../visuals';
+
+	interface Props {
+		value: unknown;
+		source: string;
+	}
+
+	let { value }: Props = $props();
+	const timeline = $derived(value as TimelineValue);
+</script>
+
+<figure class="ds-lib-timeline">
+	{#if timeline.title}<figcaption class="ds-lib-timeline-title">{timeline.title}</figcaption>{/if}
+	<ol class="ds-lib-timeline-events">
+		{#each timeline.events as event, i (i)}
+			<li class="ds-lib-timeline-event">
+				{#if event.date}<time class="ds-lib-timeline-date">{event.date}</time>{/if}
+				<span class="ds-lib-timeline-name">{event.title}</span>
+				{#if event.detail}<span class="ds-lib-timeline-detail">{event.detail}</span>{/if}
+			</li>
+		{/each}
+	</ol>
+</figure>
+
+<style>
+	.ds-lib-timeline {
+		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-timeline-title {
+		margin-bottom: 0.5rem;
+		color: var(--ds-color-foreground);
+		font-weight: 600;
+	}
+
+	.ds-lib-timeline-events {
+		position: relative;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.ds-lib-timeline-events::before {
+		content: '';
+		position: absolute;
+		inset-block: 0.5rem;
+		inset-inline-start: 0.28125rem;
+		width: 1px;
+		background: var(--ds-color-border-strong, var(--ds-color-border));
+	}
+
+	.ds-lib-timeline-event {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		padding: 0 0 0.75rem 1.5rem;
+	}
+
+	.ds-lib-timeline-event:last-child {
+		padding-bottom: 0;
+	}
+
+	.ds-lib-timeline-event::before {
+		content: '';
+		position: absolute;
+		inset-block-start: 0.4rem;
+		inset-inline-start: 0;
+		width: 0.5625rem;
+		height: 0.5625rem;
+		border-radius: var(--ds-radius-full);
+		background: var(--chart-1, var(--ds-color-primary));
+	}
+
+	.ds-lib-timeline-date {
+		color: var(--ds-color-muted-foreground);
+		font-family: var(--ds-font-code);
+		font-size: var(--ds-text-2xs);
+	}
+
+	.ds-lib-timeline-name {
+		color: var(--ds-color-foreground);
+		font-weight: 600;
+	}
+
+	.ds-lib-timeline-detail {
+		color: var(--ds-color-muted-foreground);
+	}
+</style>

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

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

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

@@ -0,0 +1,110 @@
+<!--
+  One Vega-Lite v5 spec, drawn with the app's own tokens. The persona writes
+  the data and the marks; colour, type, axes and size come from here and
+  override whatever the spec says. Loaded on demand: vega is not small.
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		value: unknown;
+		source: string;
+	}
+
+	let { value, source }: Props = $props();
+	let host = $state<HTMLDivElement | null>(null);
+	let failed = $state(false);
+
+	const css = (name: string): string =>
+		getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+
+	function config() {
+		const ink = css('--ds-color-foreground') || '#231f20';
+		const muted = css('--ds-color-muted-foreground') || '#57595c';
+		const line = css('--ds-color-border-strong') || '#00000038';
+		const font = getComputedStyle(document.body).fontFamily;
+		const series = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => css(`--chart-${i}`)).filter(Boolean);
+		return {
+			background: null,
+			font,
+			...(series.length > 0 ? { range: { category: series } } : {}),
+			mark: { color: series[0] ?? ink },
+			bar: { cornerRadius: 1 },
+			view: { stroke: null },
+			axis: {
+				labelColor: muted,
+				titleColor: muted,
+				domainColor: line,
+				tickColor: line,
+				gridColor: line,
+				gridOpacity: 0.5,
+				labelFont: font,
+				titleFont: font,
+				labelFontSize: 12,
+				titleFontSize: 12,
+				titleFontWeight: 600
+			},
+			legend: { labelColor: ink, titleColor: muted, labelFont: font, titleFont: font },
+			title: { color: ink, font, fontSize: 14, fontWeight: 600, anchor: 'start' }
+		};
+	}
+
+	let latest = 0;
+	// The view drawn last, ended before the next is drawn and when the chart goes.
+	let drawn: { finalize: () => void } | undefined;
+	async function draw() {
+		if (!host) return;
+		const mine = ++latest;
+		try {
+			const { default: embed } = await import('vega-embed');
+			if (mine !== latest) return;
+			const { $schema: _schema, config: _config, usermeta: _usermeta, ...spec } = value as Record<string, unknown>;
+			drawn?.finalize();
+			drawn = await embed(
+				host,
+				{ ...spec, width: 'container', autosize: { type: 'fit', contains: 'padding' } } as never,
+				{ actions: false, renderer: 'svg', config: config() as never }
+			);
+			failed = false;
+		} catch {
+			if (mine === latest) failed = true;
+		}
+	}
+
+	onMount(() => {
+		// The palette follows the theme, and the theme is a class on the root.
+		const watch = new MutationObserver(() => void draw());
+		watch.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+		return () => {
+			watch.disconnect();
+			drawn?.finalize();
+		};
+	});
+
+	$effect(() => {
+		void value;
+		void host;
+		void draw();
+	});
+</script>
+
+{#if failed}
+	<pre data-highlighted="true"><code>{source}</code></pre>
+{:else}
+	<figure class="ds-lib-chart"><div bind:this={host} class="ds-lib-chart-host"></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-host {
+		width: 100%;
+		min-height: 6rem;
+	}
+</style>

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

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