@poodle64/librarian 2026.9.5 → 2026.9.7

package/dist/components/composer/composer.svelte

@@ -1,18 +1,27 @@
 <!--
-  The composer: one rounded box holding the input AND a footer row.
+  The composer: one rounded box holding attachments, the input AND a footer row.
 
-  Two things carry it: the chips sit BELOW the input inside the same box
-  rather than beside it, and the trailing control is a circular filled accent
-  button. The empty→typing transition lives almost entirely in that control —
-  the box chrome does not resize.
+  Two things carry it: the chips sit BELOW the input inside the same box rather
+  than beside it, and the trailing control is a circular filled accent button.
+  The empty→typing transition lives almost entirely in that control — the box
+  chrome grows with the text and nothing else moves.
 
-  The composer stays enabled while the agent works. Queuing the next message
-  is not built yet; disabling the box would be a different and worse
-  behaviour than the one being copied, so it is not disabled.
+  While Milton is answering the box is disabled and the send button becomes a
+  stop button. Queuing the next message is not built, and a box that takes
+  typing it will then discard is worse than one that plainly waits.
 -->
 <script lang="ts">
 	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import PaperclipIcon from '@lucide/svelte/icons/paperclip';
 	import SquareIcon from '@lucide/svelte/icons/square';
+	import XIcon from '@lucide/svelte/icons/x';
+	import {
+		ACCEPT_ATTRIBUTE,
+		acceptFiles,
+		formatSize,
+		MAX_FILES,
+		rejectionMessage
+	} from '../../attachments';
 
 	export type Scope = 'document' | 'collection' | 'library';
 
@@ -20,9 +29,13 @@
 		value: string;
 		running: boolean;
 		scope: Scope;
+		/** Files to send with the next question. Cleared by the caller on send. */
+		files?: File[];
 		/** Names for the two narrower scopes; absent means that scope is unavailable. */
 		documentName?: string;
 		collectionName?: string;
+		/** Hides the paperclip for a host whose ask route takes no files. */
+		attachments?: boolean;
 		onscope: (scope: Scope) => void;
 		onsubmit: () => void;
 		onstop: () => void;
@@ -32,23 +45,25 @@
 		value = $bindable(),
 		running,
 		scope,
+		files = $bindable([]),
 		documentName,
 		collectionName,
+		attachments = true,
 		onscope,
 		onsubmit,
 		onstop
 	}: Props = $props();
 
-	// What the agent is being asked about — chat with this document, this
-	// collection, or the whole library. Callers that have no narrower scope
-	// pass neither name, leaving "All collections" the sole entry — and a
-	// sole entry is not a choice, so `hasChoice` below hides it rather than
-	// rendering a chip with nothing to switch to.
+	// What Milton is being asked about — this document, this collection, or
+	// the whole library. Callers that have no narrower scope pass neither
+	// name, leaving "The whole library" the sole entry — and a sole entry is
+	// not a choice, so `hasChoice` below hides it rather than rendering a
+	// chip with nothing to switch to.
 	const choices = $derived(
 		[
 			documentName ? { id: 'document' as const, label: documentName } : null,
 			collectionName ? { id: 'collection' as const, label: collectionName } : null,
-			{ id: 'library' as const, label: 'All collections' }
+			{ id: 'library' as const, label: 'The whole library' }
 		].filter((c) => c !== null)
 	);
 
@@ -62,64 +77,202 @@
 	// ("defence-s…", "All colle…"). Wrapping beats truncating: a chip a reader
 	// cannot finish reading is not a control, it is decoration.
 
+	let textarea = $state<HTMLTextAreaElement | null>(null);
+	let picker = $state<HTMLInputElement | null>(null);
+	let rejected = $state('');
+
+	/** Six lines, then it scrolls. A `rows` attribute cannot express that —
+	 *  it sets the floor, not the ceiling — so the height is measured from the
+	 *  content and capped. `height: auto` first, or `scrollHeight` reports the
+	 *  height the box already has and the box can only ever grow. */
+	function grow() {
+		const el = textarea;
+		if (!el) return;
+		el.style.height = 'auto';
+		const line = parseFloat(getComputedStyle(el).lineHeight) || 24;
+		el.style.height = `${Math.min(el.scrollHeight, line * 6 + 20)}px`;
+	}
+
+	$effect(() => {
+		// Read `value` so a programmatic change (an example question tapped in
+		// the empty state) resizes the box too, not only typing.
+		void value;
+		grow();
+	});
+
+	// Focus comes back once Milton is done, so a reader can keep going without
+	// reaching for the mouse. Focusing at send is pointless — the box is
+	// disabled a frame later — so the transition out of `running` is the hook.
+	// Plain, not `$state`: read and written in the same effect, which would
+	// otherwise re-trigger itself forever.
+	let wasRunning = false;
+	$effect(() => {
+		if (wasRunning && !running) textarea?.focus();
+		wasRunning = running;
+	});
+
+	function submit() {
+		if (!value.trim() || running) return;
+		onsubmit();
+		textarea?.focus();
+	}
+
 	function keydown(event: KeyboardEvent) {
 		// Enter sends, Shift+Enter breaks the line — the convention in every
 		// reference and the one a user will try first.
 		if (event.key === 'Enter' && !event.shiftKey) {
 			event.preventDefault();
-			if (value.trim()) onsubmit();
+			submit();
 		}
 	}
+
+	function take(list: FileList | File[] | null) {
+		if (!list) return;
+		const check = acceptFiles(files, list);
+		files = check.accepted;
+		rejected = rejectionMessage(check.rejected);
+	}
+
+	function pick(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		take(input.files);
+		// Same file twice in a row fires no change event unless the value is
+		// cleared, so removing a chip and re-adding it would silently do nothing.
+		input.value = '';
+	}
+
+	function remove(index: number) {
+		files = files.filter((_, i) => i !== index);
+		rejected = '';
+	}
+
+	// The keyboard does not shrink the layout viewport on iOS, so a composer at
+	// the bottom of a full-height column sits UNDER it. The visual viewport is
+	// the one that moves; the overlap between the two is exactly how far the
+	// box must rise.
+	let lift = $state(0);
+	$effect(() => {
+		const viewport = globalThis.visualViewport;
+		if (!viewport) return;
+		const measure = () => {
+			lift = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
+		};
+		measure();
+		viewport.addEventListener('resize', measure);
+		viewport.addEventListener('scroll', measure);
+		return () => {
+			viewport.removeEventListener('resize', measure);
+			viewport.removeEventListener('scroll', measure);
+		};
+	});
 </script>
 
 <div
-	class="border-border bg-surface-1 focus-within:border-primary/60 rounded-xl border transition-colors"
+	style="transform: translateY(-{lift}px); padding-bottom: {lift
+		? '0px'
+		: 'env(safe-area-inset-bottom, 0px)'}"
+	class="transition-transform duration-150"
 >
-	<textarea
-		bind:value
-		onkeydown={keydown}
-		rows="2"
-		placeholder={running ? 'Queue another message…' : 'Ask anything'}
-		class="text-foreground placeholder:text-muted-foreground max-h-52 w-full resize-none bg-transparent px-4 pt-3 pb-2 text-base outline-none"
-	></textarea>
-
-	<div class="flex items-center gap-2 px-3 pb-2.5">
-		{#if hasChoice}
-			<div class="flex min-w-0 flex-wrap items-center gap-1">
-				{#each choices as choice (choice.id)}
-					<button
-						type="button"
-						onclick={() => onscope(choice.id)}
-						class="max-w-full truncate rounded-full px-2 py-0.5 text-xs transition-colors {scope ===
-						choice.id
-							? 'bg-primary/15 text-foreground border-primary/40 border'
-							: 'text-muted-foreground hover:text-foreground border border-transparent'}"
+	<div
+		class="border-border bg-surface-1 focus-within:border-primary/60 rounded-xl border transition-colors"
+	>
+		{#if files.length > 0}
+			<ul class="flex flex-wrap gap-1.5 px-3 pt-3">
+				{#each files as file, index (file.name + file.size)}
+					<li
+						class="border-border bg-surface-2 flex max-w-full items-center gap-1.5 rounded-lg border py-1 pr-1 pl-2 text-xs"
 					>
-						{choice.label}
-					</button>
+						<span class="text-foreground truncate">{file.name}</span>
+						<span class="text-muted-foreground shrink-0 tabular-nums">{formatSize(file.size)}</span
+						>
+						<button
+							type="button"
+							onclick={() => remove(index)}
+							aria-label="Remove {file.name}"
+							class="text-muted-foreground hover:text-foreground hover:bg-surface-3 focus-visible:ring-ring flex size-5 shrink-0 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
+						>
+							<XIcon class="size-3" />
+						</button>
+					</li>
 				{/each}
-			</div>
-		{/if}
-		<span class="flex-1"></span>
-		{#if running}
-			<button
-				type="button"
-				onclick={onstop}
-				aria-label="Stop"
-				class="bg-foreground text-background hover:bg-foreground/90 flex size-8 items-center justify-center rounded-full transition-colors"
-			>
-				<SquareIcon class="size-3.5 fill-current" />
-			</button>
-		{:else}
-			<button
-				type="button"
-				onclick={onsubmit}
-				disabled={!value.trim()}
-				aria-label="Send"
-				class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:hover:bg-primary flex size-8 items-center justify-center rounded-full transition-all disabled:opacity-30"
-			>
-				<ArrowUpIcon class="size-4" />
-			</button>
+			</ul>
 		{/if}
+
+		<textarea
+			bind:this={textarea}
+			bind:value
+			oninput={grow}
+			onkeydown={keydown}
+			rows="1"
+			disabled={running}
+			placeholder={running ? 'Milton is answering…' : 'Ask Milton…'}
+			class="text-foreground placeholder:text-muted-foreground w-full resize-none bg-transparent px-4 pt-3 pb-2 text-base outline-none disabled:opacity-60"
+		></textarea>
+
+		<div class="flex items-center gap-2 px-3 pb-2.5">
+			{#if attachments}
+				<input
+					bind:this={picker}
+					type="file"
+					multiple
+					accept={ACCEPT_ATTRIBUTE}
+					onchange={pick}
+					class="hidden"
+					tabindex="-1"
+					aria-hidden="true"
+				/>
+				<button
+					type="button"
+					onclick={() => picker?.click()}
+					disabled={running || files.length >= MAX_FILES}
+					aria-label="Attach a file"
+					class="text-muted-foreground hover:text-foreground hover:bg-surface-2 focus-visible:ring-ring flex size-8 shrink-0 items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30"
+				>
+					<PaperclipIcon class="size-4" />
+				</button>
+			{/if}
+
+			{#if hasChoice}
+				<div class="flex min-w-0 flex-wrap items-center gap-1">
+					{#each choices as choice (choice.id)}
+						<button
+							type="button"
+							onclick={() => onscope(choice.id)}
+							class="max-w-full truncate rounded-full px-2 py-0.5 text-xs transition-colors {scope ===
+							choice.id
+								? 'bg-primary/15 text-foreground border-primary/40 border'
+								: 'text-muted-foreground hover:text-foreground border border-transparent'}"
+						>
+							{choice.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+			<span class="flex-1"></span>
+			{#if running}
+				<button
+					type="button"
+					onclick={onstop}
+					aria-label="Stop"
+					class="bg-foreground text-background hover:bg-foreground/90 flex size-8 items-center justify-center rounded-full transition-colors"
+				>
+					<SquareIcon class="size-3.5 fill-current" />
+				</button>
+			{:else}
+				<button
+					type="button"
+					onclick={submit}
+					disabled={!value.trim()}
+					aria-label="Send"
+					class="bg-primary text-primary-foreground hover:bg-primary/90 disabled:hover:bg-primary flex size-8 items-center justify-center rounded-full transition-all disabled:opacity-30"
+				>
+					<ArrowUpIcon class="size-4" />
+				</button>
+			{/if}
+		</div>
 	</div>
+
+	{#if rejected}
+		<p class="text-status-error px-1 pt-1.5 text-xs" role="status" aria-live="polite">{rejected}</p>
+	{/if}
 </div>

package/dist/components/composer/composer.svelte.d.ts

@@ -3,13 +3,17 @@ interface Props {
     value: string;
     running: boolean;
     scope: Scope;
+    /** Files to send with the next question. Cleared by the caller on send. */
+    files?: File[];
     /** Names for the two narrower scopes; absent means that scope is unavailable. */
     documentName?: string;
     collectionName?: string;
+    /** Hides the paperclip for a host whose ask route takes no files. */
+    attachments?: boolean;
     onscope: (scope: Scope) => void;
     onsubmit: () => void;
     onstop: () => void;
 }
-declare const Composer: import("svelte").Component<Props, {}, "value">;
+declare const Composer: import("svelte").Component<Props, {}, "value" | "files">;
 type Composer = ReturnType<typeof Composer>;
 export default Composer;

package/dist/components/conversation/conversation.svelte

@@ -0,0 +1,179 @@
+<!--
+  The whole reading surface: every turn, the scroll that follows the stream,
+  and the source pane beside it.
+
+  This owns the SCROLL CONTAINER, which is the reason it exists rather than the
+  host composing `AgentTranscript` in a div of its own. Follow-scroll, the
+  jump-to-latest pill and a document pane that narrows the transcript instead
+  of covering it are all one question — where the overflow lives — and three
+  hosts answering it separately is three chances to answer it differently.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+	import type { Turn } from '../../transcript.svelte';
+	import type { Citation, LoadDocument } from '../../citations';
+	import { FollowScroll } from '../../follow-scroll.svelte';
+	import AgentTranscript from '../agent-transcript/agent-transcript.svelte';
+	import DocumentPane from '../document-pane/document-pane.svelte';
+
+	interface Props {
+		turns: Turn[];
+		running: boolean;
+		/** `Transcript.version` — bumped per event. Text grows in place, so a
+		 *  count of turns is not enough to keep the scroll following. */
+		version?: number;
+		welcome?: string;
+		/** Up to three, shown in the empty state as tappable pills. */
+		examples?: string[];
+		onexample?: (question: string) => void;
+		/** Re-asks the last question. Offered on the last answer only. */
+		onregenerate?: () => void;
+		/** Enables the source pane. Without it, chips render but do not open. */
+		loadDocument?: LoadDocument;
+		collectionNames?: Set<string>;
+		/** The composer, rendered INSIDE the transcript column so the source
+		 *  pane narrows it too — a composer the host places outside slides
+		 *  under the pane the moment one opens. */
+		composer?: Snippet;
+	}
+
+	let {
+		turns,
+		running,
+		version = 0,
+		welcome = 'Ask Milton a question about the library.',
+		examples = [],
+		onexample,
+		onregenerate,
+		loadDocument,
+		collectionNames = new Set(),
+		composer
+	}: Props = $props();
+
+	let viewport = $state<HTMLElement | null>(null);
+	let open = $state<Citation | null>(null);
+	const follow = new FollowScroll();
+
+	function metrics(el: HTMLElement) {
+		return {
+			scrollTop: el.scrollTop,
+			clientHeight: el.clientHeight,
+			scrollHeight: el.scrollHeight
+		};
+	}
+
+	// A new question re-pins: the reader asked for the thing about to arrive,
+	// even if they were reading something further up when they asked.
+	//
+	// Deliberately NOT `$state`: an effect that both reads and writes one piece
+	// of reactive state re-triggers itself, which Svelte stops with
+	// `effect_update_depth_exceeded` — measured, on this component. Nothing
+	// renders this, so a plain variable is both correct and enough.
+	let seen = 0;
+	$effect(() => {
+		if (turns.length > seen) follow.pin();
+		seen = turns.length;
+	});
+
+	$effect(() => {
+		// Both dependencies are deliberate: `version` for text growing inside an
+		// existing block, `turns.length` for a whole new turn.
+		void version;
+		void turns.length;
+		if (!viewport || !follow.following) return;
+		viewport.scrollTop = viewport.scrollHeight;
+	});
+
+	function scrolled() {
+		if (viewport) follow.measure(metrics(viewport));
+	}
+
+	function jump() {
+		if (!viewport) return;
+		follow.pin();
+		viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
+	}
+
+	function cite(citation: Citation) {
+		// A citation derived from the prose has no id to read, so its chip is
+		// legible but inert rather than opening an empty pane.
+		if (loadDocument && citation.document_id) open = citation;
+	}
+</script>
+
+<div class="flex min-h-0 flex-1">
+	<div class="flex min-h-0 min-w-0 flex-1 flex-col">
+		<!-- The pill is positioned against the SCROLL region, not the column: the
+		     composer is in the column too, and a pill over the input is a pill in
+		     the way. -->
+		<div class="relative flex min-h-0 flex-1 flex-col">
+		<div
+			bind:this={viewport}
+			onscroll={scrolled}
+			role="log"
+			aria-live="polite"
+			aria-label="Conversation with Milton"
+			class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+		>
+			<div class="mx-auto flex w-full max-w-[46rem] flex-col gap-8 px-4 py-6">
+				{#if turns.length === 0}
+					<div class="flex flex-col items-start gap-4 py-8">
+						<p class="text-foreground max-w-[46ch] text-lg leading-snug">{welcome}</p>
+						{#if examples.length > 0}
+							<ul class="flex flex-col items-start gap-2">
+								{#each examples.slice(0, 3) as example (example)}
+									<li class="max-w-full">
+										<button
+											type="button"
+											onclick={() => onexample?.(example)}
+											class="border-border hover:border-border-strong hover:bg-surface-2 focus-visible:ring-ring text-foreground max-w-full rounded-full border px-3.5 py-2 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
+										>
+											{example}
+										</button>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</div>
+				{/if}
+
+				{#each turns as turn, index (turn.id)}
+					<AgentTranscript
+						question={turn.question}
+						blocks={turn.blocks}
+						outcome={turn.outcome}
+						running={running && index === turns.length - 1}
+						citations={turn.citations ?? []}
+						{collectionNames}
+						oncite={cite}
+						onregenerate={index === turns.length - 1 && !running ? onregenerate : undefined}
+					/>
+				{/each}
+			</div>
+		</div>
+
+		{#if !follow.following && turns.length > 0}
+			<button
+				type="button"
+				onclick={jump}
+				class="border-border bg-surface-1 text-foreground hover:bg-surface-2 focus-visible:ring-ring absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs shadow-lg transition-colors focus-visible:ring-2 focus-visible:outline-none"
+			>
+				<ArrowDownIcon class="size-3.5" />
+				Jump to latest
+			</button>
+		{/if}
+		</div>
+
+		{#if composer}
+			<div class="shrink-0 px-4 pb-3">
+				<div class="mx-auto w-full max-w-[46rem]">{@render composer()}</div>
+			</div>
+		{/if}
+
+	</div>
+
+	{#if open && loadDocument}
+		<DocumentPane citation={open} {loadDocument} onclose={() => (open = null)} />
+	{/if}
+</div>

package/dist/components/conversation/conversation.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { Turn } from '../../transcript.svelte';
+import type { LoadDocument } from '../../citations';
+interface Props {
+    turns: Turn[];
+    running: boolean;
+    /** `Transcript.version` — bumped per event. Text grows in place, so a
+     *  count of turns is not enough to keep the scroll following. */
+    version?: number;
+    welcome?: string;
+    /** Up to three, shown in the empty state as tappable pills. */
+    examples?: string[];
+    onexample?: (question: string) => void;
+    /** Re-asks the last question. Offered on the last answer only. */
+    onregenerate?: () => void;
+    /** Enables the source pane. Without it, chips render but do not open. */
+    loadDocument?: LoadDocument;
+    collectionNames?: Set<string>;
+    /** The composer, rendered INSIDE the transcript column so the source
+     *  pane narrows it too — a composer the host places outside slides
+     *  under the pane the moment one opens. */
+    composer?: Snippet;
+}
+declare const Conversation: import("svelte").Component<Props, {}, "">;
+type Conversation = ReturnType<typeof Conversation>;
+export default Conversation;

package/dist/components/conversation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Conversation } from './conversation.svelte';
+export { default } from './conversation.svelte';

package/dist/components/conversation/index.js

@@ -0,0 +1,2 @@
+export { default as Conversation } from './conversation.svelte';
+export { default } from './conversation.svelte';