@poodle64/librarian 2026.10.4 → 2026.10.5

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/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;