@poodle64/librarian 2026.10.4 → 2026.10.6

package/README.md

@@ -35,8 +35,9 @@ src/lib/
     document-pane/         the cited document, open at the cited passage
     artefact-card/         an artefact's card, in the host's words
     artefact-pane/         an artefact that is its answer's prose, or one version of a written document, in the column
-    written-card/          a document the persona wrote: version, Open, downloads
-    web-list/              the web pages an answer drew on, apart from its numbered sources
+    written-card/          a document the persona wrote: kind, pages, version, Open, and a download chip
+    source-fold/           what an answer drew on, folded: the library's numbered sources, then the web pages numbered on from them
+    visual-block/          a fenced block of a registered language: its renderer, Drawing… while it arrives, its code when invalid
     composer/              the input box: attachments, one collection control, a note, send/stop
     markdown/              sanitised, streaming-safe markdown + highlighting
     activity-group/        what the persona did, one collapsed row per step
@@ -178,7 +179,7 @@ on it fires once and never again.
 | Asking again             | `onregenerate`: re-send the last question as a NEW turn; the package exposes the action and never re-asks by itself                                                                         |
 | Choosing a collection    | `Composer`'s `collections` (`{ name, title?, description? }[]`, the ones the person may read) and `collection` (the chosen name; undefined is all of them), with `oncollection(name \| undefined)`. From two collections up it is ONE control naming the choice, opening a listbox (searchable from eight) where each shows by its title (the name made readable where there is none) over its description, never a retrieval summary |
 | The empty state          | `welcome` and up to three `examples`. With a composer, the opening and the composer sit together in the middle of the panel, the examples, the folded scope and `lead` under it; the first turn docks the composer at the foot |
-| Conversation controls    | `toolbar`: a snippet at the measure's trailing edge above the transcript, outside its scroll (the room page's Past questions and New question)                                               |
+| Conversation controls    | `toolbar`: a snippet at the measure's trailing edge above the transcript, outside its scroll (the chat page's Past questions and New question)                                               |
 | What this surface covers | `scope`: one statement per persona, in the host's own words. Rendered above the first turn and folded to a line once the conversation starts                                                   |
 | The words themselves     | `copy`: a partial of `ChatCopy`. Every component resolves it itself, so overriding one line does not mean restating the rest                                                           |
 | An answer its own way    | `turn`: a snippet given each turn's `AgentTranscriptProps` in place of `AgentTranscript`. Render your own from the parts, or `AgentTranscript` inside your own to add to it               |
@@ -401,9 +402,10 @@ end that way.
 | An artefact            | `turn.artefact = { title, summary }` cards under the prose once the turn settles; `isAnswer: true` is an artefact that IS the prose, and replaces it                  |
 | Opening it             | `onopenartefact(turn)` and `showing` (the turn id the host shows). Without a handler, an `isAnswer` artefact opens in `ArtefactPane` and any other offers no action |
 | Editing a question     | `Conversation`'s `onedit(position, text)` (`Chat.edit`) offers an edit control on each plain question while nothing is being answered; the turns from there on are dropped and the new question streams in at that position (`ask({ edit })`). Files are not sent again |
-| Documents it wrote     | `artefact` frames and a stored turn's `artefacts` become `turn.written`, carded with Open and downloads. `loadWritten(name, version)` and `writtenUrl(name, version, format)` (`Chat.loadArtefact` / `Chat.artefactUrl` over the transport) let the pane show a version: Markdown sanitised, HTML only in a `sandbox=""` frame |
-| Web sources            | Pages from the turn's supacrawl calls and the answer's Markdown links list under `copy.fromTheWeb`, unnumbered, apart from the library's `[n]` sources |
-| Drawing a fence        | `fences={{ chart: Chart }}` on `Conversation` draws a fenced block of that language with the host's component (`source` is its text), once the answer has settled |
+| Documents it wrote     | `artefact` frames and a stored turn's `artefacts` (each with `title`, `kind`, `changes`, `pages`) become `turn.written`: the newest version of each is a card with Open and a download chip (Word where `formats` has it, else the source). The pane marks what a version changed since the one before: a "Changed since vN" line from `changes`, and a bar beside each changed block. `loadWritten(name, version)` and `writtenUrl(name, version, format)` (`Chat.loadArtefact` / `Chat.artefactUrl` over the transport) let the pane show a version: Markdown sanitised, HTML only in a `sandbox=""` frame |
+| The turn's steps       | One fold, "Read your attachment, searched the library and the web, and wrote a minute · 6 steps", composed from the steps (`stepsSummary`); it says what is happening now while the turn runs, and opens on one row per step (a search row counts what it found, a web search opens on the pages it found) |
+| Web sources            | Pages from the turn's supacrawl calls and the answer's Markdown links fold with the library's sources ("6 sources · 4 library · 2 web"), numbered on from the library's, and a link to one in the answer reads as that number's chip |
+| Drawing a fence        | `visuals` on `Conversation` is a registry keyed on a fence's language, `{ component, parse }` each; `defaultVisuals` (from `@poodle64/librarian/visuals`) draws `chart` (`{title, type: bar | line | area, x, y: [fields], data}` on LayerChart, in the app's `--chart-1`…`--chart-5` tokens, loaded when an answer carries one), `timeline` and `card`. An app passes `{ ...defaultVisuals, openui }`. A block whose closing fence has not arrived is "Drawing…", one that does not parse is its code |
 | "Answered without a source" | `copy.notHeld: ''` for a persona that answers from no sources                                                                                                     |
 | Saying something mid-run | `Composer`'s `sendWhileRunning`: while the session works the box stays open and Send sits beside Stop. For a route that reads a message while the run works; a chat leaves it off and waits for its answer |
 

package/dist/components/activity-group/activity-group.svelte

@@ -1,10 +1,11 @@
 <!--
-  What the persona did before it answered, one collapsed row per step, in
-  order — the way Claude Code's own panel lists them.
+  What the persona did before it answered, folded behind one line.
 
-  Each row says what the step did in a reader's words and opens on what went
-  in and what came back. A thinking block is a folded row too: "Thinking…"
-  while it streams, "Thought" once done.
+  The line is a sentence composed from the steps ("Read your attachment,
+  searched the library and the web, and wrote a minute · 6 steps"), and while
+  the turn runs it says what is happening now. It opens on one row per step,
+  in order, the way Claude Code's own panel lists them: each says what the step
+  did in a reader's words and opens on what went in and what came back.
 
   The persona's between-tool commentary is a step in here as well. It reaches
   the caller as an ordinary `text` block, not a `thinking` one, so `segment()`
@@ -12,8 +13,12 @@
   as a ThinkingRow beside the tools, folded like the rest.
 -->
 <script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 	import type { ActivityGroup } from '../../transcript.svelte';
-	import type { ChatCopy } from '../../copy';
+	import { resolveCopy, type ChatCopy } from '../../copy';
+	import { stepsNow, stepsSummary } from '../../steps';
+	import type { Written } from '../../written';
 	import ToolRow from '../tool-row/tool-row.svelte';
 	import ThinkingRow from '../thinking-row/thinking-row.svelte';
 
@@ -21,26 +26,103 @@
 		group: ActivityGroup;
 		/** True while this group is the live one. */
 		live: boolean;
+		/** The documents the turn wrote: a step that wrote one says its kind. */
+		written?: Written[];
 		copy?: Partial<ChatCopy>;
 	}
 
-	let { group, live, copy }: Props = $props();
+	let { group, live, written = [], copy }: Props = $props();
+	let open = $state(false);
+
+	const words = $derived(resolveCopy(copy));
+	const summary = $derived(stepsSummary(group.steps, written, words));
+	const now = $derived(stepsNow(group.steps, written, words));
 </script>
 
-<div class="ds-lib-activity-steps">
-	{#each group.steps as step, i (step.block.index)}
-		{#if step.block.kind === 'tool'}
-			<ToolRow block={step.block} words={step.words} running={live} {copy} />
-		{:else}
-			<ThinkingRow block={step.block} active={live && i === group.steps.length - 1} />
-		{/if}
-	{/each}
+<div class="ds-lib-steps">
+	<button
+		type="button"
+		class="ds-lib-steps-head"
+		onclick={() => (open = !open)}
+		aria-expanded={open}
+	>
+		<span class="ds-lib-steps-line">
+			{#if live}
+				<span class="ds-lib-steps-now">{now}</span>
+			{:else}
+				{summary.sentence}<span class="ds-lib-steps-trail">{` · ${summary.trail}`}</span>
+			{/if}
+		</span>
+		<span class="ds-lib-steps-chevron" aria-hidden="true">
+			{#if open}<ChevronUpIcon size={15} />{:else}<ChevronDownIcon size={15} />{/if}
+		</span>
+	</button>
+
+	{#if open}
+		<div class="ds-lib-steps-rows">
+			{#each group.steps as step, i (step.block.index)}
+				{#if step.block.kind === 'tool'}
+					<ToolRow block={step.block} words={step.words} running={live} {copy} />
+				{:else}
+					<ThinkingRow block={step.block} active={live && i === group.steps.length - 1} {copy} />
+				{/if}
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
-	.ds-lib-activity-steps {
+	.ds-lib-steps-head {
+		display: flex;
+		width: 100%;
+		align-items: flex-start;
+		gap: 0.5rem;
+		border: 0;
+		background: none;
+		padding: 0.25rem 0;
+		color: var(--ds-color-muted-foreground);
+		font: inherit;
+		font-size: 0.875rem;
+		line-height: 1.375rem;
+		text-align: start;
+		cursor: pointer;
+	}
+
+	.ds-lib-steps-head:hover {
+		color: var(--ds-color-foreground);
+	}
+
+	.ds-lib-steps-head:focus-visible {
+		outline: 2px solid var(--ds-color-ring);
+		outline-offset: 2px;
+	}
+
+	.ds-lib-steps-line {
+		flex: 1;
+	}
+
+	.ds-lib-steps-now {
+		color: var(--ds-color-foreground);
+		font-weight: 500;
+	}
+
+	.ds-lib-steps-trail {
+		font-size: var(--ds-text-2xs);
+		opacity: 0.8;
+	}
+
+	.ds-lib-steps-chevron {
+		display: flex;
+		flex: none;
+		padding-top: 0.25rem;
+	}
+
+	.ds-lib-steps-rows {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.125rem;
+		margin-top: 0.25rem;
+		border-inline-start: 1px solid var(--ds-color-border);
+		padding-inline-start: 0.75rem;
 	}
 </style>

package/dist/components/activity-group/activity-group.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { ActivityGroup } from '../../transcript.svelte';
-import type { ChatCopy } from '../../copy';
+import { type ChatCopy } from '../../copy';
+import type { Written } from '../../written';
 interface Props {
     group: ActivityGroup;
     /** True while this group is the live one. */
     live: boolean;
+    /** The documents the turn wrote: a step that wrote one says its kind. */
+    written?: Written[];
     copy?: Partial<ChatCopy>;
 }
 declare const ActivityGroup: import("svelte").Component<Props, {}, "">;

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

@@ -16,7 +16,7 @@
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import CopyIcon from '@lucide/svelte/icons/copy';
 	import PencilIcon from '@lucide/svelte/icons/pencil';
-	import PaperclipIcon from '@lucide/svelte/icons/paperclip';
+	import FileTextIcon from '@lucide/svelte/icons/file-text';
 	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
 	import {
 		outcomeLine,
@@ -35,9 +35,10 @@
 		splitSources,
 		type Citation
 	} from '../../citations';
-	import { DEFAULT_PERSONA, personaName, resolveCopy, type ChatCopy } from '../../copy';
-	import { webSources } from '../../web-sources';
-	import { writtenKey, type Written, type WrittenUrl } from '../../written';
+	import { DEFAULT_PERSONA, fill, personaName, resolveCopy, type ChatCopy } from '../../copy';
+	import { webKey, webSources } from '../../web-sources';
+	import { newestPerName, writtenKey, type Written, type WrittenUrl } from '../../written';
+	import type { Visual } from '../../visuals';
 	import type { Verdict } from '../../chat.svelte';
 	import AnswerMark from '../answer-mark/answer-mark.svelte';
 	import AnswerShare from '../answer-share/answer-share.svelte';
@@ -45,9 +46,7 @@
 	import ActivityGroup from '../activity-group/activity-group.svelte';
 	import ArtefactCard from '../artefact-card/artefact-card.svelte';
 	import Markdown from '../markdown/markdown.svelte';
-	import type { Fences } from '../markdown/markdown';
-	import SourceList from '../source-list/source-list.svelte';
-	import WebList from '../web-list/web-list.svelte';
+	import SourceFold from '../source-fold/source-fold.svelte';
 	import WrittenCard from '../written-card/written-card.svelte';
 
 	/** Everything one turn renders from: what `Conversation` hands a host's
@@ -97,8 +96,9 @@
 		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;
+		/** Renderers by a fence's language: a block of one is drawn by its
+		 *  component in the answer. Absent, every fence is code. */
+		visuals?: Record<string, Visual>;
 		/** When an answer this page did not start began, epoch ms: it is still
 		 *  being written, and the clock counts from then. */
 		answering?: number;
@@ -140,7 +140,7 @@
 		showingWritten,
 		onopenwritten,
 		writtenUrl,
-		fences,
+		visuals,
 		answering,
 		onmark,
 		shared,
@@ -214,8 +214,31 @@
 	const hasAnswer = $derived(texts.length > 0);
 
 	// Pages the answer drew on, once it has settled: a link still being typed
-	// is not a source.
-	const web = $derived(running ? [] : webSources(blocks, answer));
+	// is not a source. They are numbered on from the library's, and a link to
+	// one reads as the same chip.
+	const web = $derived.by(() => {
+		if (running) return [];
+		const from = Math.max(0, ...sources.map((c) => c.n));
+		return webSources(blocks, answer).map((page, i) => ({ ...page, n: from + i + 1 }));
+	});
+	const webNumbers = $derived(new Map(web.map((page) => [webKey(page.url), page.n])));
+
+	// Which day the pages were read: today only for a turn asked today.
+	const readWhen = $derived.by(() => {
+		if (at === undefined) return '';
+		const when = new Date(at);
+		if (new Date().toDateString() === when.toDateString()) return words.readToday;
+		return fill(words.readOn, {
+			date: when.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })
+		});
+	});
+
+	const cards = $derived(newestPerName(written));
+
+	const fileType = (file: string): string => {
+		const ext = /\.([A-Za-z0-9]{1,5})$/.exec(file)?.[1];
+		return ext ? ext.toUpperCase() : '';
+	};
 
 	let editing = $state(false);
 	let edited = $state('');
@@ -329,14 +352,20 @@
 		</form>
 	{:else if asked}
 		<div class="ds-lib-ask">
-			<div class="ds-lib-bubble">{asked}</div>
 			{#if files.length > 0}
 				<ul class="ds-lib-ask-files">
 					{#each files as file, i (i)}
-						<li class="ds-lib-ask-file"><PaperclipIcon size={12} />{file}</li>
+						<li class="ds-lib-ask-file">
+							<span class="ds-lib-ask-file-icon" aria-hidden="true"><FileTextIcon size={16} /></span>
+							<span class="ds-lib-ask-file-text">
+								<span class="ds-lib-ask-file-name">{file}</span>
+								{#if fileType(file)}<span class="ds-lib-ask-file-type">{fileType(file)}</span>{/if}
+							</span>
+						</li>
 					{/each}
 				</ul>
 			{/if}
+			<div class="ds-lib-bubble">{asked}</div>
 			<div class="ds-lib-ask-meta">
 				{#if onedit && !running}
 					<button type="button" class="ds-lib-action" onclick={startEdit}>
@@ -370,7 +399,12 @@
 
 		{#each segments as seg (seg.index)}
 			{#if seg.kind === 'activity'}
-				<ActivityGroup group={seg} live={running && seg.index === lastIndex} copy={words} />
+				<ActivityGroup
+					group={seg}
+					live={running && seg.index === lastIndex}
+					{written}
+					copy={words}
+				/>
 			{:else if !isArtefact}
 				<Markdown
 					content={seg.index === lastTextIndex && split.citations.length > 0
@@ -378,8 +412,10 @@
 						: seg.text}
 					streaming={running && seg.index === lastIndex}
 					{collectionNames}
-					{fences}
+					{visuals}
+					copy={words}
 					citationNumbers={numbers}
+					{webNumbers}
 					oncite={(n) => {
 						const found = sources.find((c) => c.n === n);
 						if (found) oncite?.(found);
@@ -392,7 +428,7 @@
 			<ArtefactCard {artefact} open={artefactOpen} onopen={onopenartefact} copy={words} />
 		{/if}
 
-		{#each written as doc (writtenKey(doc))}
+		{#each cards as doc (writtenKey(doc))}
 			<WrittenCard
 				written={doc}
 				open={showingWritten === writtenKey(doc)}
@@ -402,12 +438,8 @@
 			/>
 		{/each}
 
-		{#if !isArtefact && sources.length > 0}
-			<SourceList {sources} {words} {oncite} />
-		{/if}
-
-		{#if !isArtefact && web.length > 0}
-			<WebList sources={web} {words} />
+		{#if !isArtefact && (sources.length > 0 || web.length > 0)}
+			<SourceFold library={sources} {web} {words} {oncite} {readWhen} />
 		{/if}
 
 		<!-- An empty `notHeld` is a host whose persona answers from no sources,
@@ -519,13 +551,37 @@
 
 	.ds-lib-ask-file {
 		display: flex;
+		max-width: 100%;
 		align-items: center;
-		gap: 0.25rem;
+		gap: 0.625rem;
 		border: 1px solid var(--ds-color-border);
-		border-radius: var(--ds-radius-md);
-		padding: 0.125rem 0.5rem;
+		border-radius: var(--ds-radius-full);
+		padding: 0.375rem 0.875rem 0.375rem 0.5rem;
+	}
+
+	.ds-lib-ask-file-icon {
+		display: flex;
+		flex: none;
 		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-ask-file-text {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
 		font-size: var(--ds-text-2xs);
+		line-height: 1.25;
+	}
+
+	.ds-lib-ask-file-name {
+		color: var(--ds-color-foreground);
+		font-size: 0.8125rem;
+		font-weight: 600;
+		overflow-wrap: anywhere;
+	}
+
+	.ds-lib-ask-file-type {
+		color: var(--ds-color-muted-foreground);
 	}
 
 	.ds-lib-edit {

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

@@ -2,8 +2,8 @@ import { type Artefact, type Block, type DescribeTool, type Outcome } from '../.
 import { type Citation } from '../../citations';
 import { type ChatCopy } from '../../copy';
 import { type Written, type WrittenUrl } from '../../written';
+import type { Visual } from '../../visuals';
 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 {
@@ -51,8 +51,9 @@ export interface AgentTranscriptProps {
     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;
+    /** Renderers by a fence's language: a block of one is drawn by its
+     *  component in the answer. Absent, every fence is code. */
+    visuals?: Record<string, Visual>;
     /** When an answer this page did not start began, epoch ms: it is still
      *  being written, and the clock counts from then. */
     answering?: number;