@poodle64/librarian 2026.9.17 → 2026.9.19

package/README.md

@@ -16,8 +16,9 @@ there.
 
 ```text
 src/lib/
-  client.ts                ask(): streams Claude Code's OWN events, unaltered
+  client.ts                ask() and watch(): Claude Code's OWN events, unaltered
   transcript.svelte.ts     Transcript state, the fold/segment/describe helpers
+  session.svelte.ts        Session: a whole stream of runs, as turns
   citations.ts             the Citation shape, `[n]` markers, the trust mark
   copy.ts                  every word this package says, and the host's overrides
   attachments.ts           what a reader may attach, and the limits
@@ -28,9 +29,9 @@ src/lib/
     scope-statement/       what this room answers from, and what it does not hold
     agent-transcript/      one question and everything Milton did answering it
     document-pane/         the cited document, open at the cited passage
-    artefact-card/         a study artefact's card in the transcript
-    artefact-pane/         a study artefact, open in the reading column
-    composer/              the input box: attachments, scope chips, send/stop
+    artefact-card/         an artefact's card, in the host's words
+    artefact-pane/         an artefact that is its answer's prose, in the column
+    composer/              the input box: attachments, scope chips, a note, send/stop
     markdown/              sanitised, streaming-safe markdown + highlighting
     activity-group/        a whole investigation, as one quiet line
     tool-row/              one tool call
@@ -41,12 +42,12 @@ src/lib/
 ## Installation
 
 ```bash
-pnpm add @poodle64/librarian @poodle64/ui @lucide/svelte
+pnpm add @poodle64/librarian @lucide/svelte
 ```
 
-`svelte`, `@poodle64/ui`, `@lucide/svelte`, `marked`, `isomorphic-dompurify`
-and `shiki` are peer dependencies: declare them yourself so Renovate tracks
-their versions and `pnpm ls` shows them.
+`svelte`, `@lucide/svelte`, `marked`, `isomorphic-dompurify` and `shiki` are
+peer dependencies: declare them yourself so Renovate tracks their versions and
+`pnpm ls` shows them.
 
 **No Tailwind content-scan line, and deliberately none.** These components
 carry their own CSS, written against the `--ds-*` tokens and compiled by
@@ -65,9 +66,6 @@ What it does need is the token layer every app already imports:
 @import '@poodle64/design-tokens/tokens.css';
 ```
 
-The composed page chrome this package borrows from `@poodle64/ui` (`Panel`)
-still follows that package's own `@source` line, which every app has.
-
 One knob: `--ds-lib-measure` (default `46rem`) sets the transcript's reading
 column. Set it on any ancestor.
 
@@ -153,8 +151,6 @@ gives it a height and a composer and nothing else:
 				bind:value={question}
 				bind:files
 				{running}
-				scope="library"
-				onscope={() => {}}
 				onsubmit={submit}
 				onstop={() => controller?.abort()}
 			/>
@@ -184,6 +180,71 @@ Nothing here fetches on its own behalf. The library's document read is
 authenticated, and a package that called it directly would be reaching past
 the app's proxy with a session it has no business holding.
 
+### Watching a session somebody else started
+
+A session the APP started — a persona reading a document with nobody asking —
+is watched rather than asked. `watch()` GETs its stream; `Session` folds it
+into turns: the prompt and every later message on the reader's side (the CLI
+echoes each one back under `--replay-user-messages`), each run's answer on the
+persona's, each settled by its own `result`. A stream without deltas is folded
+from its whole messages. Events are deduped by `uuid`, so opening the watch
+again after sending a message folds only what is new.
+
+```svelte
+<script lang="ts">
+	import { watch } from '@poodle64/librarian/client';
+	import { Session } from '@poodle64/librarian/session';
+
+	const session = new Session();
+	let watching = $state(false);
+
+	async function follow(signal: AbortSignal) {
+		watching = true;
+		try {
+			for await (const event of watch({ endpoint: `/api/agent/${persona}/jobs/${id}/watch`, signal }))
+				session.apply(event);
+		} finally {
+			watching = false;
+		}
+	}
+
+	// The host's own additions: what a run handed in, carded under its answer.
+	const turns = $derived(
+		session.turns.map((turn) =>
+			turn.outcome?.structuredOutput ? { ...turn, artefact: artefactFrom(turn) } : turn
+		)
+	);
+</script>
+
+<Conversation
+	{turns}
+	running={watching && session.working}
+	version={session.version}
+	{name}
+	{describeTool}
+	copy={{ sources: 'Read from', notHeld: '' }}
+	onopenartefact={(turn) => (showing = turn.id)}
+	{showing}
+	oncite={(citation) => showPage(citation.document_id)}
+>
+	{#snippet composer()}
+		<Composer bind:value {running} {name} note="It carries on from where it stopped." {onsubmit} {onstop} />
+	{/snippet}
+</Conversation>
+```
+
+`watch()` differs from `ask()` in one way: a clean close with no `result` is
+not a failure, because a stopped run and a session waiting between runs both
+end that way.
+
+| Concern                | How                                                                                                                                                                  |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| The persona's tools    | `describeTool(block) => ToolWords \| undefined`: the row (`verb`, `object`, `detail`), the activity line's counts (`tally`), and what it read (`source`). `undefined` leaves a call to the package's own words |
+| What an answer read    | `ToolWords.source` lists under the answer, under `copy.sources`; tapping one calls `oncite`. Nothing checked it, so it carries no trust mark                          |
+| 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 |
+| "Answered without a source" | `copy.notHeld: ''` for a persona that answers from no shelf                                                                                                     |
+
 ### Citations
 
 The library emits one SSE frame after the final assistant text:
@@ -343,7 +404,7 @@ pnpm run test         # build + vitest
 pnpm run screenshots  # the state grid, real engine (see below)
 ```
 
-`docs/screenshots/` is thirteen states x three widths x both themes, taken by
+`docs/screenshots/` is sixteen states x three widths x both themes, taken by
 `scripts/screenshots.mjs` against the console's `/librarian` lab route
 running from its own static build. The same script asserts what a screenshot
 cannot: that nothing scrolls sideways at any width, that the source pane
@@ -352,8 +413,11 @@ really draggable, that the scope statement folds once there is a
 conversation over it and reopens from that line, that a follow-up chip asks
 its question and takes the rest of the row with it, that the persona's
 between-tool narration is nowhere in the answer prose before the activity
-line is opened, and that the reading column holds its 46rem measure and stays
-centred at every width. It exits non-zero on any of them.
+line is opened, that a job's artefact and the pages it read open in the
+host's own columns and never in a pane of the package's, and that the reading
+column holds its 46rem measure and stays centred at every width. It exits
+non-zero on any of them. The job states fold a stream captured from the real
+CLI (`src/test/fixtures/`).
 
 The console's `app.css` deliberately does NOT scan this package's `dist`, so
 the grid is taken in a consumer that compiles none of its Tailwind classes —

package/dist/citations.d.ts

@@ -26,7 +26,9 @@ export interface Citation {
      * as null.
      */
     verified_at?: string | null;
-    /** True when this came from the prose block rather than the wire event. */
+    /** True when read off the stream — the prose's Sources block, or a call
+     *  that read it — rather than the library's own frame. Nothing checked it,
+     *  so it carries no trust mark. */
     derived?: boolean;
 }
 /** Inline `[n]` markers, in order of first appearance.

package/dist/client.d.ts

@@ -27,15 +27,25 @@ export interface AgentEvent {
             id?: string;
         };
     };
+    /** A whole message; `content` is a plain string only on a user frame. */
     message?: {
-        content?: Array<Record<string, unknown>>;
+        id?: string;
+        content?: Array<Record<string, unknown>> | string;
     };
+    /** A user frame the CLI echoed back as the turn that consumes it starts
+     *  (`--replay-user-messages`): the reader's side of a session. */
+    isReplay?: boolean;
+    uuid?: string;
+    /** ISO 8601, on every user and assistant frame. */
+    timestamp?: string;
     session_id?: string;
     result?: string;
     num_turns?: number;
     total_cost_usd?: number;
     duration_ms?: number;
     is_error?: boolean;
+    /** What a run returned under `--json-schema`, on its `result`. */
+    structured_output?: unknown;
     error?: string;
     detail?: string;
     tools?: string[];
@@ -85,3 +95,20 @@ export interface AskOptions {
  * where the turn is rendered.
  */
 export declare function ask(options: AskOptions): AsyncGenerator<AgentEvent>;
+export interface WatchOptions {
+    /** The session's watch route, e.g. `/api/agent/{persona}/jobs/{id}/watch`. */
+    endpoint: string;
+    signal?: AbortSignal;
+    fetch?: typeof fetch;
+}
+/**
+ * Async-iterate a session somebody else started: every event from the first,
+ * then live while it runs.
+ *
+ * The same frames and the same never-throw contract as `ask()`, with one
+ * difference: a clean close with no `result` is not a failure. A run the
+ * reader stopped ends exactly that way, and so does a session that is
+ * waiting between runs, so only a stream that would not open, or broke,
+ * yields `library_error`. Fold the events with `Session`.
+ */
+export declare function watch(options: WatchOptions): AsyncGenerator<AgentEvent>;

package/dist/client.js

@@ -64,14 +64,35 @@ function requestInit(options, signal) {
  * where the turn is rendered.
  */
 export async function* ask(options) {
-    const doFetch = options.fetch ?? fetch;
+    yield* read(() => (options.fetch ?? fetch)(options.endpoint ?? '/api/agent/ask', requestInit(options, options.signal)), options.signal, true);
+}
+/**
+ * Async-iterate a session somebody else started: every event from the first,
+ * then live while it runs.
+ *
+ * The same frames and the same never-throw contract as `ask()`, with one
+ * difference: a clean close with no `result` is not a failure. A run the
+ * reader stopped ends exactly that way, and so does a session that is
+ * waiting between runs, so only a stream that would not open, or broke,
+ * yields `library_error`. Fold the events with `Session`.
+ */
+export async function* watch(options) {
+    yield* read(() => (options.fetch ?? fetch)(options.endpoint, {
+        headers: { Accept: 'text/event-stream' },
+        credentials: 'include',
+        signal: options.signal
+    }), options.signal, false);
+}
+/** One SSE response, as Claude Code's own events. `terminal` demands a
+ *  `result` before the stream closes. */
+async function* read(open, signal, terminal) {
     let response;
     try {
-        response = await doFetch(options.endpoint ?? '/api/agent/ask', requestInit(options, options.signal));
+        response = await open();
     }
     catch {
         // A reader who pressed stop asked for this one; it is not a failure.
-        if (options.signal?.aborted)
+        if (signal?.aborted)
             return;
         yield { type: 'library_error' };
         return;
@@ -97,7 +118,7 @@ export async function* ask(options) {
     // A turn that ends with no terminal frame ended by accident. Tracked here
     // rather than left to the renderer, which cannot tell a stream that died
     // from one still arriving.
-    let terminal = false;
+    let ended = false;
     /** One frame's `data:` lines, as the event they carry. */
     function parse(frame) {
         // `data:` only — the type lives inside the payload where Claude Code
@@ -123,7 +144,7 @@ export async function* ask(options) {
             chunk = await reader.read();
         }
         catch {
-            if (options.signal?.aborted)
+            if (signal?.aborted)
                 return;
             yield { type: 'library_error' };
             return;
@@ -140,7 +161,7 @@ export async function* ask(options) {
             if (!event)
                 continue;
             if (event.type === 'result' || event.type === 'library_error')
-                terminal = true;
+                ended = true;
             yield event;
         }
     }
@@ -151,9 +172,9 @@ export async function* ask(options) {
     const last = parse(buffered);
     if (last) {
         if (last.type === 'result' || last.type === 'library_error')
-            terminal = true;
+            ended = true;
         yield last;
     }
-    if (!terminal && !options.signal?.aborted)
+    if (terminal && !ended && !signal?.aborted)
         yield { type: 'library_error' };
 }

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

@@ -52,7 +52,12 @@
 		<div class="ds-lib-activity-steps">
 			{#each group.steps as step (step.block.index)}
 				{#if step.block.kind === 'tool'}
-					<ToolRow block={step.block} repeats={step.repeats} running={live} />
+					<ToolRow
+						block={step.block}
+						repeats={step.repeats}
+						words={step.words}
+						running={live}
+					/>
 				{:else}
 					<ThinkingRow block={step.block} active={false} />
 				{/if}

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

@@ -18,8 +18,11 @@
 	import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
 	import {
 		readerQuestion,
+		readFrom,
 		segment,
+		type Artefact,
 		type Block,
+		type DescribeTool,
 		type Outcome,
 		type TextBlock
 	} from '../../transcript.svelte';
@@ -64,14 +67,15 @@
 		 *  and a reader scanning back for "what did I ask after lunch" needs the
 		 *  first one. Absent renders no time rather than a guess. */
 		at?: number;
-		/** A study artefact rather than an ordinary answer: once settled, this
-		 *  renders as a card instead of prose. */
-		kind?: 'answer' | 'artefact';
-		/** The artefact's own name, for the card. */
-		title?: string;
-		/** Opens the artefact in the reading column. Required wherever `kind`
-		 *  is `'artefact'`. */
+		/** What this turn produced for the reader to open, carded once it
+		 *  settles: under the prose, or in its place when it IS the prose. */
+		artefact?: Artefact;
+		/** The artefact is open now. */
+		artefactOpen?: boolean;
+		/** Opens it. Omit and the card informs but does not open. */
 		onopenartefact?: () => void;
+		/** The persona's own words for its tools, and what they read. */
+		describeTool?: DescribeTool;
 	}
 
 	let {
@@ -88,12 +92,15 @@
 		copy,
 		name = DEFAULT_PERSONA,
 		at,
-		kind = 'answer',
-		title,
-		onopenartefact
+		artefact,
+		artefactOpen = false,
+		onopenartefact,
+		describeTool
 	}: Props = $props();
 
-	const isArtefact = $derived(kind === 'artefact');
+	// The prose IS the artefact: it reads in the column, and the transcript
+	// shows the card alone.
+	const isArtefact = $derived(artefact?.isAnswer === true);
 
 	const words = $derived(resolveCopy(copy, name));
 	const who = $derived(personaName(name));
@@ -120,7 +127,7 @@
 	// An activity group stays live — and therefore labelled "Working…" — only
 	// while it is the last thing in the turn. As soon as prose arrives, it
 	// settles into its count.
-	const segments = $derived(segment(blocks));
+	const segments = $derived(segment(blocks, describeTool));
 	const lastIndex = $derived(segments.at(-1)?.index ?? -1);
 
 	// An answer can arrive as SEVERAL text blocks with tool calls between them,
@@ -135,7 +142,11 @@
 	const split = $derived(
 		running ? { body: '', citations: [] } : splitSources(texts.at(-1)?.text ?? '')
 	);
-	const sources = $derived(resolveCitations(citations, split.citations));
+	// What the calls read, when the answer names no source of its own.
+	const read = $derived(running ? [] : readFrom(blocks, describeTool));
+	const sources = $derived(
+		resolveCitations(citations, split.citations.length > 0 ? split.citations : read)
+	);
 
 	/** The answer as a reader would paste it: every block, Sources stripped. */
 	const answer = $derived(
@@ -218,13 +229,16 @@
 <article class="ds-lib-turn">
 	<!-- Trailing-edge bubble, following Claude and ChatGPT rather than a
 	     VS Code-style panel: this surface is read by people who arrive with
-	     those two as their model of what a chat looks like. -->
-	<div class="ds-lib-ask">
-		<div class="ds-lib-bubble">{asked}</div>
-		{#if clock}
-			<time class="ds-lib-ask-time" datetime={clock.iso}>{clock.text}</time>
-		{/if}
-	</div>
+	     those two as their model of what a chat looks like. A session whose
+	     stream never carried its prompt has no words to put here. -->
+	{#if asked}
+		<div class="ds-lib-ask">
+			<div class="ds-lib-bubble">{asked}</div>
+			{#if clock}
+				<time class="ds-lib-ask-time" datetime={clock.iso}>{clock.text}</time>
+			{/if}
+		</div>
+	{/if}
 
 	<div class="ds-lib-answer">
 		<header class="ds-lib-answer-head">
@@ -258,19 +272,17 @@
 			{/if}
 		{/each}
 
-		{#if isArtefact && settled}
-			<ArtefactCard
-				title={title ?? 'Briefing'}
-				citationCount={sources.length}
-				onopen={() => onopenartefact?.()}
-			/>
+		{#if artefact && settled}
+			<ArtefactCard {artefact} open={artefactOpen} onopen={onopenartefact} copy={words} />
 		{/if}
 
 		{#if !isArtefact && sources.length > 0}
 			<SourceList {sources} {words} {oncite} />
 		{/if}
 
-		{#if !isArtefact && notHeld}
+		<!-- An empty `notHeld` is a host whose persona answers from no shelf,
+		     where "without a source" would be a claim about nothing. -->
+		{#if !isArtefact && notHeld && words.notHeld}
 			<p class="ds-lib-not-held">{words.notHeld}</p>
 		{/if}
 
@@ -356,8 +368,14 @@
 	/* The reader's own words carry the consuming app's hue, the way every chat
 	   a person already uses colours THEIR side and leaves the other party
 	   neutral. It is an identity mark, not decoration: scanning back for "what
-	   did I ask" is a colour search, not a reading task. The hue is whatever
-	   the host set --ds-color-primary to, so no consumer is named here.
+	   did I ask" is a colour search, not a reading task.
+
+	   --ds-color-primary-solid, falling back to --ds-color-primary, because a
+	   dark-mode palette lightens its primary so the SAME token can serve as
+	   coloured text on a dark page. A fill behind light text and text on a dark
+	   ground want opposite lightness, and a brand asked to be both comes out
+	   washed — a deep red reads as salmon. An app with a fill-grade brand
+	   colour declares the solid pair; one that has not is unaffected.
 	   It stays on the SHORT side of the transcript on purpose — a question is
 	   a line or two, an answer is paragraphs, so filling the question is an
 	   accent and filling the answer would be a wall. */
@@ -365,9 +383,9 @@
 		max-width: 85%;
 		border: 1px solid transparent;
 		border-radius: var(--ds-radius-xl);
-		background: var(--ds-color-primary);
+		background: var(--ds-color-primary-solid, var(--ds-color-primary));
 		padding: 0.625rem 1rem;
-		color: var(--ds-color-primary-foreground);
+		color: var(--ds-color-primary-solid-foreground, var(--ds-color-primary-foreground));
 		font-size: 1rem;
 		line-height: 1.5rem;
 		overflow-wrap: break-word;
@@ -414,8 +432,8 @@
 		   under the 3:1 floor for a non-text graphic and read as a smudge —
 		   measured 2.55:1 on a dark-mode host. A solid fill carries the hue AND
 		   the contrast. */
-		background: var(--ds-color-primary);
-		color: var(--ds-color-primary-foreground);
+		background: var(--ds-color-primary-solid, var(--ds-color-primary));
+		color: var(--ds-color-primary-solid-foreground, var(--ds-color-primary-foreground));
 		font-size: var(--ds-text-2xs);
 		font-weight: 600;
 		text-transform: uppercase;

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

@@ -1,4 +1,4 @@
-import { type Block, type Outcome } from '../../transcript.svelte';
+import { type Artefact, type Block, type DescribeTool, type Outcome } from '../../transcript.svelte';
 import { type Citation } from '../../citations';
 import { type LibrarianCopy } from '../../copy';
 interface Props {
@@ -29,14 +29,15 @@ interface Props {
      *  and a reader scanning back for "what did I ask after lunch" needs the
      *  first one. Absent renders no time rather than a guess. */
     at?: number;
-    /** A study artefact rather than an ordinary answer: once settled, this
-     *  renders as a card instead of prose. */
-    kind?: 'answer' | 'artefact';
-    /** The artefact's own name, for the card. */
-    title?: string;
-    /** Opens the artefact in the reading column. Required wherever `kind`
-     *  is `'artefact'`. */
+    /** What this turn produced for the reader to open, carded once it
+     *  settles: under the prose, or in its place when it IS the prose. */
+    artefact?: Artefact;
+    /** The artefact is open now. */
+    artefactOpen?: boolean;
+    /** Opens it. Omit and the card informs but does not open. */
     onopenartefact?: () => void;
+    /** The persona's own words for its tools, and what they read. */
+    describeTool?: DescribeTool;
 }
 declare const AgentTranscript: import("svelte").Component<Props, {}, "">;
 type AgentTranscript = ReturnType<typeof AgentTranscript>;

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

@@ -1,68 +1,129 @@
 <!--
-  A study artefact's card in the transcript: what a colleague taps to read it.
-  It is not the artefact itself — that lives in the reading column
-  (`ArtefactPane`), never stacked beside this card and never inline as prose,
-  which is the whole of the one-surface decision this package exists to keep
-  every consumer honest about.
+  An artefact's card in the transcript: what a reader taps to open it.
+
+  It is not the artefact itself. Every word on it is the host's — what the
+  thing is called and what it holds — and opening it is the host's too, in
+  whatever column the host keeps for it; the package's own `ArtefactPane` is
+  one such column, for an artefact that is the answer's own prose.
+
+  One button, not a card with a button in it: the whole row is the target,
+  so a thumb that lands on the summary still opens it.
 -->
 <script lang="ts">
 	import FileTextIcon from '@lucide/svelte/icons/file-text';
-	import Panel from '@poodle64/ui/panel';
+	import type { Artefact } from '../../transcript.svelte';
+	import { resolveCopy, type LibrarianCopy } from '../../copy';
 
 	interface Props {
-		title: string;
-		citationCount: number;
-		onopen: () => void;
+		artefact: Artefact;
+		/** The host is showing it now. */
+		open?: boolean;
+		/** Omit and the card informs but does not open: a host with nowhere
+		 *  to show the artefact offers no action rather than a dead one. */
+		onopen?: () => void;
+		copy?: Partial<LibrarianCopy>;
 	}
 
-	let { title, citationCount, onopen }: Props = $props();
+	let { artefact, open = false, onopen, copy }: Props = $props();
+
+	const words = $derived(resolveCopy(copy));
 </script>
 
-<Panel
-	icon={FileTextIcon}
-	{title}
-	subtitle="Briefing doc"
-	role="button"
-	tabindex={0}
-	onclick={onopen}
-	onkeydown={(event: KeyboardEvent) => {
-		if (event.key !== 'Enter' && event.key !== ' ') return;
-		event.preventDefault();
-		onopen();
-	}}
-	class="ds-lib-artefact-card"
+<button
+	type="button"
+	class="ds-lib-artefact"
+	class:is-open={open}
+	onclick={() => onopen?.()}
+	disabled={!onopen}
 >
-	{#snippet children()}
-		<p class="ds-lib-artefact-count">
-			{citationCount} source{citationCount === 1 ? '' : 's'}
-		</p>
-	{/snippet}
-</Panel>
+	<span class="ds-lib-artefact-icon" aria-hidden="true"><FileTextIcon size={16} /></span>
+	<span class="ds-lib-artefact-text">
+		<span class="ds-lib-artefact-title">{artefact.title}</span>
+		{#if artefact.summary}<span class="ds-lib-artefact-summary">{artefact.summary}</span>{/if}
+	</span>
+	{#if onopen}
+		<span class="ds-lib-artefact-action">{open ? words.showingArtefact : words.openArtefact}</span>
+	{/if}
+</button>
 
 <style>
-	/* `:global`, and the only one in this package that is not prose inside
-	   `{@html}`: the class goes to another component's root element, which
-	   Svelte's scoping hash never reaches. */
-	:global(.ds-lib-artefact-card) {
+	.ds-lib-artefact {
+		display: flex;
 		width: 100%;
-		max-width: 28rem;
-		cursor: pointer;
+		align-items: center;
+		gap: 0.75rem;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-lg);
+		background: var(--ds-color-surface-1);
+		padding: 0.625rem 0.75rem;
+		color: var(--ds-color-foreground);
+		font: inherit;
 		text-align: start;
+		cursor: pointer;
 		transition: border-color 150ms ease;
 	}
 
-	:global(.ds-lib-artefact-card:hover) {
+	.ds-lib-artefact:hover:not(:disabled) {
 		border-color: var(--ds-color-border-strong);
 	}
 
-	:global(.ds-lib-artefact-card:focus-visible) {
+	.ds-lib-artefact:disabled {
+		cursor: default;
+	}
+
+	.ds-lib-artefact:focus-visible {
 		outline: 2px solid var(--ds-color-ring);
 		outline-offset: 2px;
 	}
 
-	.ds-lib-artefact-count {
-		margin: 0;
+	/* The primary edge, not a fill: the card says "this is what is open" and
+	   the column beside it carries the weight. */
+	.ds-lib-artefact.is-open {
+		border-color: var(--ds-color-primary);
+	}
+
+	.ds-lib-artefact-icon {
+		display: flex;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-md);
+		color: var(--ds-color-muted-foreground);
+	}
+
+	.ds-lib-artefact-text {
+		display: flex;
+		min-width: 0;
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.ds-lib-artefact-title {
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25rem;
+	}
+
+	.ds-lib-artefact-summary {
 		color: var(--ds-color-muted-foreground);
 		font-size: var(--ds-text-2xs);
+		overflow-wrap: anywhere;
+	}
+
+	.ds-lib-artefact-action {
+		flex: none;
+		border: 1px solid var(--ds-color-border);
+		border-radius: var(--ds-radius-md);
+		padding: 0.25rem 0.625rem;
+		font-size: 0.8125rem;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ds-lib-artefact {
+			transition: none;
+		}
 	}
 </style>