@ruckc/truss-chat 0.0.0-stage → 1.12.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2026 Curtis Ruck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The bundled fonts, Inter and JetBrains Mono, are licensed separately under the
+SIL Open Font License 1.1; see src/lib/fonts/LICENSE-*.txt.

package/dist/ChatComposer.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button, Textarea } from '@ruckc/truss-ui';
+
+	let {
+		value = $bindable(''),
+		onsend,
+		busy = false,
+		sendOn = 'enter',
+		placeholder = 'Message',
+		maxRows = 8,
+		disabled = false,
+		label = 'Message',
+		sendLabel = 'Send',
+		actions,
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'onkeydown'> & {
+		/** The draft text. Bindable; cleared after a send. */
+		value?: string;
+		/** Called with the trimmed text when the user sends. Not called while `busy` or when the draft is blank. */
+		onsend?: (text: string) => void;
+		/** A reply is in progress: the send button shows a spinner and is disabled, and sending does nothing. The text stays editable. */
+		busy?: boolean;
+		/** `enter`: Enter sends and Shift+Enter adds a newline. `mod-enter`: Ctrl/Cmd+Enter sends and Enter adds a newline. Enter never sends while an IME composition is in progress. */
+		sendOn?: 'enter' | 'mod-enter';
+		placeholder?: string;
+		/** The field grows with its content up to this many rows, then scrolls. */
+		maxRows?: number;
+		/** Disables the field and the send button. */
+		disabled?: boolean;
+		/** Accessible name of the text field. */
+		label?: string;
+		/** Accessible name of the send button. */
+		sendLabel?: string;
+		/** Extra buttons placed between the field and the send button (attach, stop, voice, ...). */
+		actions?: Snippet;
+		/** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+		class?: string;
+	} = $props();
+
+	const empty = $derived(!value.trim());
+
+	function send() {
+		if (busy || disabled || empty) return;
+		const text = value.trim();
+		value = '';
+		onsend?.(text);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		// keyCode 229 is the IME's "processing" key on browsers that report isComposing too late
+		if (e.key !== 'Enter' || e.isComposing || e.keyCode === 229) return;
+		const wanted = sendOn === 'enter' ? !e.shiftKey : e.ctrlKey || e.metaKey;
+		if (!wanted) return;
+		e.preventDefault();
+		send();
+	}
+</script>
+
+<div {...rest} class={['composer', klass]} style:--rows={maxRows} aria-busy={busy}>
+	<Textarea bind:value rows={1} autosize {placeholder} {disabled} aria-label={label} {onkeydown} class="field" />
+	{#if actions}<div class="actions">{@render actions()}</div>{/if}
+	<Button icon="send" aria-label={sendLabel} loading={busy} disabled={disabled || busy || empty} onclick={send} />
+</div>
+
+<style>
+	.composer { display: flex; align-items: flex-end; gap: var(--tr-space-2); min-width: 0; }
+	.composer :global(.field) { flex: 1; min-width: 0; }
+	.composer :global(textarea) { max-height: calc(var(--rows) * 1.4em); overflow-y: auto; }
+	.actions { display: flex; align-items: center; gap: var(--tr-space-1); flex: none; }
+</style>

package/dist/ChatComposer.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'onkeydown'> & {
+    /** The draft text. Bindable; cleared after a send. */
+    value?: string;
+    /** Called with the trimmed text when the user sends. Not called while `busy` or when the draft is blank. */
+    onsend?: (text: string) => void;
+    /** A reply is in progress: the send button shows a spinner and is disabled, and sending does nothing. The text stays editable. */
+    busy?: boolean;
+    /** `enter`: Enter sends and Shift+Enter adds a newline. `mod-enter`: Ctrl/Cmd+Enter sends and Enter adds a newline. Enter never sends while an IME composition is in progress. */
+    sendOn?: 'enter' | 'mod-enter';
+    placeholder?: string;
+    /** The field grows with its content up to this many rows, then scrolls. */
+    maxRows?: number;
+    /** Disables the field and the send button. */
+    disabled?: boolean;
+    /** Accessible name of the text field. */
+    label?: string;
+    /** Accessible name of the send button. */
+    sendLabel?: string;
+    /** Extra buttons placed between the field and the send button (attach, stop, voice, ...). */
+    actions?: Snippet;
+    /** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+    class?: string;
+};
+declare const ChatComposer: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ChatComposer = ReturnType<typeof ChatComposer>;
+export default ChatComposer;

package/dist/ChatMessage.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Icon } from '@ruckc/truss-ui';
+	import { Markdown } from '@ruckc/truss-markdown';
+	import { useThread } from './internal/chat-context.js';
+
+	let {
+		role = 'assistant',
+		text,
+		content,
+		plain = false,
+		markdown,
+		streaming = false,
+		typing = true,
+		announce = false,
+		label,
+		onfinish,
+		tools,
+		reasoning,
+		showReasoning = $bindable(),
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+		/** `user` messages are right-aligned bubbles; `assistant` messages are full-width prose. */
+		role?: 'user' | 'assistant';
+		/** The message text. Assistant messages render it as Markdown (paragraphs, headings, emphasis, code, lists, quotes, http/https/mailto links; nothing is injected as HTML), user messages as plain text with whitespace and line breaks preserved. See `plain` and `markdown`. Used when neither `content` nor `children` is given. */
+		text?: string;
+		/** The message body in place of `text`, chosen per message: `{#snippet content()}<Markdown text={m.text} />{/snippet}`. Takes precedence over `children`, `plain` and `markdown`. */
+		content?: Snippet;
+		/** The reply is still arriving. Sets `aria-busy`. When it turns `false` the message is finished: `onfinish` fires and, inside a `ChatThread`, the reply is announced once to screen readers. */
+		streaming?: boolean;
+		/** Show a typing indicator while `streaming`. */
+		typing?: boolean;
+		/** Announce the message when it first appears (inside a `ChatThread`), for a reply delivered whole instead of streamed. */
+		announce?: boolean;
+		/** Accessible name, and the speaker named in the announcement. Defaults to "You" or "Assistant". */
+		label?: string;
+		/** Called once when `streaming` changes from `true` to `false`. */
+		onfinish?: () => void;
+		/** Tool calls (typically `ToolCall` rows) shown under the text. */
+		tools?: Snippet;
+		/**
+		 * The model's reasoning or thinking, streamed incrementally like `text` (pass the text so far). Rendered as Markdown in a subdued block (muted colour, left border, smaller text) above the answer,
+		 * behind a "Show reasoning" / "Hide reasoning" button. It is hidden by default (see `showReasoning`), and while it is hidden and `streaming` the button shows "Thinking…". Reasoning is never announced by the thread's live region, only the answer is.
+		 */
+		reasoning?: string;
+		/**
+		 * Whether the reasoning is shown. Bindable. Leave it `undefined` (the default) to follow the thread: `ChatThread`'s `showReasoning`, which is hidden unless set, and which this message's button updates for every message.
+		 * Set it to `true` or `false` to control this message alone: the button then changes only this value. Precedence: this prop, then the thread's setting, then hidden.
+		 */
+		showReasoning?: boolean;
+		/** Other attributes (`data-testid`, `id`, ...) go to the root `<article>`. `class` is added to it. */
+		class?: string;
+		/** Show `text` as plain text even for an assistant message. */
+		plain?: boolean;
+		/** Render `text` as Markdown even for a user message (they are plain text by default, since people type literal asterisks and underscores). Ignored when `plain` is set. */
+		markdown?: boolean;
+		/** The message body in place of `text`, for anything it cannot express. Same as `content`. */
+		children?: Snippet;
+	} = $props();
+
+	const thread = useThread();
+	let body: HTMLDivElement;
+	const rich = $derived(!plain && (markdown ?? role === 'assistant'));
+	let localShow = $state(false);
+	const shown = $derived(showReasoning ?? (thread ? thread.showReasoning : localShow));
+	function toggleReasoning() {
+		const next = !shown;
+		if (showReasoning !== undefined) showReasoning = next;
+		else if (thread) thread.setShowReasoning(next);
+		else localShow = next;
+	}
+	const rid = $props.id();
+	const name = $derived(label ?? (role === 'user' ? 'You' : 'Assistant'));
+
+	/** At most this many characters are read out; the full reply stays in the log. */
+	const MAX = 300;
+	function speak() {
+		const said = body.textContent!.replace(/\s+/g, ' ').trim();
+		thread?.announce(`${name}: ${said.length > MAX ? `${said.slice(0, MAX)}…` : said}`);
+	}
+
+	let was = false;
+	$effect(() => {
+		const now = streaming;
+		if (was && !now)
+			untrack(() => {
+				onfinish?.();
+				if (role === 'assistant') speak();
+			});
+		was = now;
+	});
+	$effect(() => {
+		if (announce) untrack(speak);
+	});
+</script>
+
+<article {...rest} class={['msg', klass]} data-role={role} data-streaming={streaming} aria-label={name} aria-busy={streaming}>
+	{#if reasoning}
+		<div class="reasoning" data-open={shown}>
+			<button type="button" class="rtoggle" aria-expanded={shown} aria-controls="{rid}-reasoning" onclick={toggleReasoning}>
+				<span class="chev" data-open={shown}><Icon name="chevron-down" /></span>
+				{shown ? 'Hide reasoning' : 'Show reasoning'}
+				{#if streaming && !shown}<span class="thinking">Thinking…</span>{/if}
+			</button>
+			<div class="rbody" id="{rid}-reasoning" hidden={!shown}>{#if shown}<Markdown text={reasoning} />{/if}</div>
+		</div>
+	{/if}
+	<div class="body" bind:this={body}>
+		{#if content}{@render content()}{:else if children}{@render children()}{:else if text}{#if rich}<Markdown {text} />{:else}<div class="plain">{text}</div>{/if}{/if}
+		{#if streaming && typing}<span class="typing" aria-hidden="true"><i></i><i></i><i></i></span>{/if}
+	</div>
+	{#if tools}<div class="tools">{@render tools()}</div>{/if}
+</article>
+
+<style>
+	.msg { display: flex; flex-direction: column; gap: var(--tr-space-2); min-width: 0; max-width: 100%; }
+	.msg[data-role='user'] { align-self: flex-end; align-items: flex-end; max-width: min(85%, 60ch); }
+	.body { min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.5; color: var(--tr-on-surface); }
+	[data-role='user'] .body { padding: var(--tr-space-2) var(--tr-space-3); border-radius: var(--tr-radius-lg) var(--tr-radius-lg) var(--tr-radius-sm) var(--tr-radius-lg); background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
+	[data-role='assistant'] .body { width: 100%; }
+	[data-role='user'] .body :global(a) { color: inherit; }
+	.plain { white-space: pre-wrap; }
+	.reasoning { min-width: 0; max-width: 100%; width: 100%; font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); }
+	.rtoggle { display: inline-flex; align-items: center; gap: var(--tr-space-1); min-height: var(--tr-control-h-sm); max-width: 100%; padding: 0 var(--tr-space-1); border: 0; border-radius: var(--tr-radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
+	.rtoggle:hover { color: var(--tr-on-surface); }
+	.rtoggle:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.chev { display: inline-flex; transition: transform var(--tr-dur) var(--tr-ease); }
+	.chev[data-open='true'] { transform: rotate(180deg); }
+	.thinking { font-style: italic; opacity: 0.85; animation: pulse 1.6s infinite ease-in-out; }
+	.rbody { margin-top: var(--tr-space-1); padding-inline-start: var(--tr-space-3); border-inline-start: 2px solid var(--tr-outline-variant); min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
+	@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
+	@media (prefers-reduced-motion: reduce) { .thinking { animation: none; } }
+	.tools { display: flex; flex-direction: column; gap: var(--tr-space-1); width: 100%; min-width: 0; }
+
+	.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.5em; vertical-align: bottom; }
+	.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tr-on-surface-variant); animation: bounce 1.2s infinite ease-in-out; }
+	.typing i:nth-child(2) { animation-delay: 0.15s; }
+	.typing i:nth-child(3) { animation-delay: 0.3s; }
+	@keyframes bounce { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
+	@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: 0.7; } }
+</style>

package/dist/ChatMessage.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+    /** `user` messages are right-aligned bubbles; `assistant` messages are full-width prose. */
+    role?: 'user' | 'assistant';
+    /** The message text. Assistant messages render it as Markdown (paragraphs, headings, emphasis, code, lists, quotes, http/https/mailto links; nothing is injected as HTML), user messages as plain text with whitespace and line breaks preserved. See `plain` and `markdown`. Used when neither `content` nor `children` is given. */
+    text?: string;
+    /** The message body in place of `text`, chosen per message: `{#snippet content()}<Markdown text={m.text} />{/snippet}`. Takes precedence over `children`, `plain` and `markdown`. */
+    content?: Snippet;
+    /** The reply is still arriving. Sets `aria-busy`. When it turns `false` the message is finished: `onfinish` fires and, inside a `ChatThread`, the reply is announced once to screen readers. */
+    streaming?: boolean;
+    /** Show a typing indicator while `streaming`. */
+    typing?: boolean;
+    /** Announce the message when it first appears (inside a `ChatThread`), for a reply delivered whole instead of streamed. */
+    announce?: boolean;
+    /** Accessible name, and the speaker named in the announcement. Defaults to "You" or "Assistant". */
+    label?: string;
+    /** Called once when `streaming` changes from `true` to `false`. */
+    onfinish?: () => void;
+    /** Tool calls (typically `ToolCall` rows) shown under the text. */
+    tools?: Snippet;
+    /**
+     * The model's reasoning or thinking, streamed incrementally like `text` (pass the text so far). Rendered as Markdown in a subdued block (muted colour, left border, smaller text) above the answer,
+     * behind a "Show reasoning" / "Hide reasoning" button. It is hidden by default (see `showReasoning`), and while it is hidden and `streaming` the button shows "Thinking…". Reasoning is never announced by the thread's live region, only the answer is.
+     */
+    reasoning?: string;
+    /**
+     * Whether the reasoning is shown. Bindable. Leave it `undefined` (the default) to follow the thread: `ChatThread`'s `showReasoning`, which is hidden unless set, and which this message's button updates for every message.
+     * Set it to `true` or `false` to control this message alone: the button then changes only this value. Precedence: this prop, then the thread's setting, then hidden.
+     */
+    showReasoning?: boolean;
+    /** Other attributes (`data-testid`, `id`, ...) go to the root `<article>`. `class` is added to it. */
+    class?: string;
+    /** Show `text` as plain text even for an assistant message. */
+    plain?: boolean;
+    /** Render `text` as Markdown even for a user message (they are plain text by default, since people type literal asterisks and underscores). Ignored when `plain` is set. */
+    markdown?: boolean;
+    /** The message body in place of `text`, for anything it cannot express. Same as `content`. */
+    children?: Snippet;
+};
+declare const ChatMessage: import("svelte").Component<$$ComponentProps, {}, "showReasoning">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/ChatStatus.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Icon } from '@ruckc/truss-ui';
+
+	let {
+		label,
+		variant = 'progress',
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role'> & {
+		/** The status text, e.g. "Starting…" or "Thinking…". Use `children` for richer content. */
+		label?: string;
+		/** `progress` shows a spinner and is announced politely (`role="status"`); `error` shows an error icon and is announced at once (`role="alert"`). */
+		variant?: 'progress' | 'error';
+		/** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+		class?: string;
+		/** Status content, shown after `label`. */
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div {...rest} class={['cs', klass]} data-variant={variant} role={variant === 'error' ? 'alert' : 'status'}>
+	<span class="icon"><Icon name={variant === 'error' ? 'error' : 'refresh'} spin={variant === 'progress'} /></span>
+	<span class="text">{label}{@render children?.()}</span>
+</div>
+
+<style>
+	.cs { display: inline-flex; align-items: center; gap: var(--tr-space-2); max-width: 100%; color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
+	.icon { display: inline-flex; flex: none; color: var(--tr-primary); }
+	.text { min-width: 0; overflow-wrap: anywhere; }
+	[data-variant='error'] { color: var(--tr-danger); }
+	[data-variant='error'] .icon { color: var(--tr-danger); }
+</style>

package/dist/ChatStatus.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role'> & {
+    /** The status text, e.g. "Starting…" or "Thinking…". Use `children` for richer content. */
+    label?: string;
+    /** `progress` shows a spinner and is announced politely (`role="status"`); `error` shows an error icon and is announced at once (`role="alert"`). */
+    variant?: 'progress' | 'error';
+    /** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+    class?: string;
+    /** Status content, shown after `label`. */
+    children?: Snippet;
+};
+declare const ChatStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatStatus = ReturnType<typeof ChatStatus>;
+export default ChatStatus;

package/dist/ChatThread.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { onDestroy, onMount, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button } from '@ruckc/truss-ui';
+	import { provideThread } from './internal/chat-context.js';
+
+	let {
+		label = 'Conversation',
+		jumpLabel = 'Jump to latest',
+		follow = $bindable(true),
+		showReasoning = $bindable(false),
+		reasoningStorageKey,
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role'> & {
+		/** Accessible name of the scrolling log. */
+		label?: string;
+		/** Text of the button shown once the reader has scrolled away from the latest message. */
+		jumpLabel?: string;
+		/** Whether the thread is following the bottom. It sticks to the bottom while content grows, turns `false` when the reader scrolls up and `true` again at the bottom or on "Jump to latest". Bindable: set it to `true` to scroll to the latest message. */
+		follow?: boolean;
+		/**
+		 * Whether the messages' reasoning blocks are shown. Bindable. Hidden (`false`) by default. It is the default for every `ChatMessage` in the thread, and the Show/Hide reasoning button on any message updates it,
+		 * so one choice applies to the whole thread. A message that sets its own `showReasoning` overrides it. Precedence: the message's `showReasoning`, then this, then hidden.
+		 */
+		showReasoning?: boolean;
+		/**
+		 * A `localStorage` key that remembers the reader's choice across visits. When set, a stored `"true"` or `"false"` replaces `showReasoning` after mount (so server-rendered HTML shows the default), and every toggle by the reader is stored.
+		 * Unavailable, blocked or throwing storage and unrecognised stored values are ignored. Changing `showReasoning` from code does not write to storage.
+		 */
+		reasoningStorageKey?: string;
+		/** Other attributes (`data-testid`, `id`, `style`, ...) go to the root `<div>`. `class` is added to it. */
+		class?: string;
+		/** The messages: `ChatMessage`, `ChatStatus` and anything else. A `ChatMessage` inside reports its finished reply to the thread's live region. */
+		children: Snippet;
+	} = $props();
+
+	let log: HTMLDivElement;
+	let content: HTMLDivElement;
+	let live = $state('');
+	let timer: ReturnType<typeof setTimeout>;
+
+	/** Clears, then sets, so the same text can be announced twice in a row. */
+	provideThread({
+		announce(text) {
+			live = '';
+			clearTimeout(timer);
+			timer = setTimeout(() => (live = text), 50);
+		},
+		get showReasoning() {
+			return showReasoning;
+		},
+		setShowReasoning(show) {
+			showReasoning = show;
+			try {
+				if (reasoningStorageKey) localStorage.setItem(reasoningStorageKey, String(show));
+			} catch {
+				/* storage unavailable or full: the choice still applies to this visit */
+			}
+		}
+	});
+	onMount(() => {
+		try {
+			const stored = reasoningStorageKey ? localStorage.getItem(reasoningStorageKey) : null;
+			if (stored === 'true' || stored === 'false') showReasoning = stored === 'true';
+		} catch {
+			/* storage unavailable: keep the default */
+		}
+	});
+	onDestroy(() => clearTimeout(timer));
+
+	// the handlers take their element as an argument: a scroll or resize that is already queued can arrive after the thread is gone
+	// Only a scroll *up* means the reader left the bottom. A scroll event is delivered after the fact, so the one caused by
+	// pinning can arrive once streamed content has already grown the log: judged by position alone it would look like
+	// "not at the bottom" and stop following mid-stream.
+	let lastTop = 0;
+	const pin = (el: HTMLElement) => {
+		el.scrollTop = el.scrollHeight;
+		lastTop = el.scrollTop;
+	};
+	const onscroll = (e: Event & { currentTarget: HTMLElement }) => {
+		const el = e.currentTarget;
+		const top = el.scrollTop;
+		if (el.scrollHeight - top - el.clientHeight <= 8) follow = true;
+		else if (top < lastTop) follow = false;
+		lastTop = top;
+	};
+	const jump = () => {
+		follow = true;
+		pin(log);
+	};
+
+	// following: scroll now (mount, jump, `follow` set from outside) and again whenever the content or the viewport resizes
+	$effect(() => {
+		if (follow) pin(log);
+	});
+	$effect(() => {
+		const el = log;
+		const ro = new ResizeObserver(() => follow && pin(el));
+		ro.observe(content);
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+</script>
+
+<div {...rest} class={['thread', klass]}>
+	<!-- aria-live="off": a log is implicitly polite, which would announce every streamed token; finished replies go through the live region below instead -->
+	<div class="log" role="log" aria-live="off" aria-label={label} bind:this={log} {onscroll}>
+		<div class="content" bind:this={content}>{@render children()}</div>
+	</div>
+	{#if !follow}
+		<div class="jump"><Button size="sm" variant="tonal" icon="arrow-down" onclick={jump}>{jumpLabel}</Button></div>
+	{/if}
+	<div class="tr-visually-hidden" role="status" aria-live="polite" aria-atomic="true">{live}</div>
+</div>
+
+<style>
+	.thread { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
+	.log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--tr-radius-md); }
+	.content { display: flex; flex-direction: column; gap: var(--tr-space-4); padding: var(--tr-space-3); min-width: 0; }
+	.jump { position: absolute; inset-inline: 0; bottom: var(--tr-space-3); display: flex; justify-content: center; pointer-events: none; }
+	.jump :global(.tr-btn) { pointer-events: auto; box-shadow: var(--tr-elevation-2); }
+</style>

package/dist/ChatThread.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role'> & {
+    /** Accessible name of the scrolling log. */
+    label?: string;
+    /** Text of the button shown once the reader has scrolled away from the latest message. */
+    jumpLabel?: string;
+    /** Whether the thread is following the bottom. It sticks to the bottom while content grows, turns `false` when the reader scrolls up and `true` again at the bottom or on "Jump to latest". Bindable: set it to `true` to scroll to the latest message. */
+    follow?: boolean;
+    /**
+     * Whether the messages' reasoning blocks are shown. Bindable. Hidden (`false`) by default. It is the default for every `ChatMessage` in the thread, and the Show/Hide reasoning button on any message updates it,
+     * so one choice applies to the whole thread. A message that sets its own `showReasoning` overrides it. Precedence: the message's `showReasoning`, then this, then hidden.
+     */
+    showReasoning?: boolean;
+    /**
+     * A `localStorage` key that remembers the reader's choice across visits. When set, a stored `"true"` or `"false"` replaces `showReasoning` after mount (so server-rendered HTML shows the default), and every toggle by the reader is stored.
+     * Unavailable, blocked or throwing storage and unrecognised stored values are ignored. Changing `showReasoning` from code does not write to storage.
+     */
+    reasoningStorageKey?: string;
+    /** Other attributes (`data-testid`, `id`, `style`, ...) go to the root `<div>`. `class` is added to it. */
+    class?: string;
+    /** The messages: `ChatMessage`, `ChatStatus` and anything else. A `ChatMessage` inside reports its finished reply to the thread's live region. */
+    children: Snippet;
+};
+declare const ChatThread: import("svelte").Component<$$ComponentProps, {}, "showReasoning" | "follow">;
+type ChatThread = ReturnType<typeof ChatThread>;
+export default ChatThread;

package/dist/QuestionForm.svelte

@@ -0,0 +1,203 @@
+<script lang="ts" module>
+	/** One question: a prompt with options to pick from. */
+	export type Question = {
+		/** A short topic shown above the question, e.g. "Auth method". */
+		header?: string;
+		question: string;
+		options: { label: string; description?: string }[];
+		/** Several options can be chosen. Otherwise exactly one. */
+		multiSelect?: boolean;
+		/** The question can be passed without an answer. */
+		optional?: boolean;
+	};
+	/** What was answered to one question. `selected` holds option labels; `other` is the free-text answer. */
+	export type QuestionAnswer = { selected: string[]; other?: string };
+</script>
+
+<script lang="ts">
+	import { tick, untrack } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button, Checkbox, RadioGroup, Textarea } from '@ruckc/truss-ui';
+
+	let {
+		questions,
+		allowOther = true,
+		onsubmit,
+		onskip,
+		submitLabel = 'Submit',
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'onkeydown' | 'onsubmit'> & {
+		/** The questions, shown one per page. Read once when the form mounts: to ask a different set, mount a new form (for example in a `{#key}`). */
+		questions: Question[];
+		/** Offer a free-text "Other" answer. For a single-choice question it replaces the chosen option; for `multiSelect` it is added to the chosen ones. */
+		allowOther?: boolean;
+		/** Called from the review page with one answer per question, in order: `{ selected: string[]; other?: string }`. `other` is left out when empty. */
+		onsubmit?: (answers: QuestionAnswer[]) => void;
+		/** Called when the user skips the whole form (the Skip button or Escape). Without it there is no Skip button and Escape does nothing. */
+		onskip?: () => void;
+		/** Text of the final button on the review page. */
+		submitLabel?: string;
+		/** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+		class?: string;
+	} = $props();
+
+	const uid = $props.id();
+	const qs = untrack(() => questions);
+	const total = qs.length;
+	let page = $state(0); // `total` is the review page
+	let editing = $state(false);
+	let picked = $state<string[][]>(qs.map(() => []));
+	let others = $state<string[]>(qs.map(() => ''));
+	let head = $state<HTMLElement>();
+
+	const review = $derived(page === total);
+	const q = $derived(qs[page]);
+	const isAnswered = (i: number) => picked[i].length > 0 || others[i].trim() !== '';
+	const canNext = $derived(isAnswered(page) || !!q.optional);
+
+	async function go(p: number) {
+		page = p;
+		await tick();
+		head?.focus();
+	}
+	const next = () => {
+		if (!canNext) return;
+		if (editing) {
+			editing = false;
+			go(total);
+		} else go(page + 1);
+	};
+	const back = () => {
+		editing = false;
+		go(page - 1);
+	};
+	const edit = (i: number) => {
+		editing = true;
+		go(i);
+	};
+
+	const order = (i: number, labels: string[]) => qs[i].options.map((o) => o.label).filter((l) => labels.includes(l));
+	const setSingle = (i: number, v: string) => {
+		picked[i] = [v];
+		others[i] = '';
+	};
+	const toggle = (i: number, label: string, on: boolean) => {
+		picked[i] = order(i, on ? [...picked[i], label] : picked[i].filter((l) => l !== label));
+	};
+	const setOther = (i: number, v: string) => {
+		others[i] = v;
+		if (!qs[i].multiSelect && v.trim()) picked[i] = [];
+	};
+
+	const answers = $derived(
+		qs.map((_, i): QuestionAnswer => {
+			const other = others[i].trim();
+			return other ? { selected: picked[i], other } : { selected: picked[i] };
+		})
+	);
+	const summary = (a: QuestionAnswer) => [...a.selected, ...(a.other ? [`Other: ${a.other}`] : [])].join(', ') || 'No answer';
+	const submit = () => onsubmit?.($state.snapshot(answers));
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			if (!onskip) return;
+			e.preventDefault();
+			onskip();
+			return;
+		}
+		if (e.key !== 'Enter' || e.isComposing || e.keyCode === 229 || e.shiftKey) return;
+		const t = e.target as HTMLElement;
+		// buttons activate themselves; a multi-line "Other" answer keeps its Enter for the newline
+		if (t.closest('button') || (t instanceof HTMLTextAreaElement && t.value.includes('\n'))) return;
+		e.preventDefault();
+		if (review) submit();
+		else next();
+	}
+
+	/** Checkboxes have no arrow-key behaviour of their own: Up/Down (and Left/Right) move between the options. */
+	function arrows(node: HTMLElement) {
+		const onArrow = (e: KeyboardEvent) => {
+			const move = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[e.key];
+			const t = e.target as HTMLElement;
+			if (!move || !t.matches('input[type="checkbox"]')) return;
+			const boxes = [...node.querySelectorAll<HTMLElement>('input[type="checkbox"]')];
+			e.preventDefault();
+			boxes[(boxes.indexOf(t) + move + boxes.length) % boxes.length].focus();
+		};
+		node.addEventListener('keydown', onArrow);
+		return () => node.removeEventListener('keydown', onArrow);
+	}
+</script>
+
+<!-- the keydown handler lives on the wrapper so Enter and Escape work from any control inside -->
+<div {...rest} class={['qf', klass]} role="group" aria-label="Questions" {onkeydown}>
+	{#if review}
+		<p class="step">Review</p>
+		<h3 class="title" tabindex="-1" bind:this={head}>Review your answers</h3>
+		<ol class="review">
+			{#each qs as item, i (i)}
+				<li>
+					<div class="ra">
+						<span class="rq">{item.question}</span>
+						<span class="rv">{summary(answers[i])}</span>
+					</div>
+					<Button size="sm" variant="minimal" onclick={() => edit(i)} aria-label={`Edit answer: ${item.question}`}>Edit</Button>
+				</li>
+			{/each}
+		</ol>
+	{:else}
+		{#key page}
+			<p class="step">Question {page + 1} of {total}{#if q.optional} · optional{/if}</p>
+			{#if q.header}<p class="header">{q.header}</p>{/if}
+			<h3 class="title" id="{uid}-q" tabindex="-1" bind:this={head}>{q.question}</h3>
+			{#if q.multiSelect}
+				<fieldset class="opts" aria-labelledby="{uid}-q" {@attach arrows}>
+					{#each q.options as o (o.label)}
+						<Checkbox label={o.label} description={o.description} bind:checked={() => picked[page].includes(o.label), (on) => toggle(page, o.label, on)} />
+					{/each}
+				</fieldset>
+			{:else}
+				<RadioGroup
+					aria-labelledby="{uid}-q"
+					options={q.options.map((o) => ({ value: o.label, label: o.label, description: o.description }))}
+					bind:value={() => picked[page][0], (v) => setSingle(page, v as string)}
+				/>
+			{/if}
+			{#if allowOther}
+				<Textarea label="Other" placeholder="Type your own answer" rows={1} autosize bind:value={() => others[page], (v) => setOther(page, v)} />
+			{/if}
+		{/key}
+	{/if}
+
+	<div class="nav">
+		{#if onskip}<Button variant="minimal" onclick={onskip}>Skip</Button>{/if}
+		<span class="grow"></span>
+		{#if review}
+			<Button variant="outlined" onclick={() => go(total - 1)}>Back</Button>
+			<Button onclick={submit}>{submitLabel}</Button>
+		{:else}
+			<Button variant="outlined" disabled={page === 0} onclick={back}>Back</Button>
+			<Button disabled={!canNext} onclick={next}>Next</Button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.qf { display: flex; flex-direction: column; gap: var(--tr-space-3); min-width: 0; max-width: 100%; padding: var(--tr-space-4); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-lg); background: var(--tr-surface-container-low); }
+	.step { margin: 0; color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-variant-numeric: tabular-nums; }
+	.header { margin: 0; color: var(--tr-primary-text, var(--tr-primary)); font-size: var(--tr-text-sm); font-weight: 600; }
+	.title { margin: 0; font-size: var(--tr-text-lg); line-height: 1.3; overflow-wrap: anywhere; }
+	.title:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); border-radius: var(--tr-radius-sm); }
+	.opts { display: flex; flex-direction: column; gap: var(--tr-space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
+	/* long labels wrap inside the narrowest column instead of widening the form */
+	.qf :global(.cb), .qf :global(.opt) { max-width: 100%; }
+	.qf :global(.text) { min-width: 0; overflow-wrap: anywhere; }
+	.review { display: flex; flex-direction: column; gap: var(--tr-space-2); margin: 0; padding: 0; list-style: none; }
+	.review li { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-2); padding-bottom: var(--tr-space-2); border-bottom: 1px solid var(--tr-outline-variant); }
+	.ra { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
+	.rq { font-weight: 600; }
+	.rv { color: var(--tr-on-surface-variant); }
+	.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tr-space-2); margin-top: var(--tr-space-1); }
+	.grow { flex: 1; }
+</style>

package/dist/QuestionForm.svelte.d.ts

@@ -0,0 +1,37 @@
+/** One question: a prompt with options to pick from. */
+export type Question = {
+    /** A short topic shown above the question, e.g. "Auth method". */
+    header?: string;
+    question: string;
+    options: {
+        label: string;
+        description?: string;
+    }[];
+    /** Several options can be chosen. Otherwise exactly one. */
+    multiSelect?: boolean;
+    /** The question can be passed without an answer. */
+    optional?: boolean;
+};
+/** What was answered to one question. `selected` holds option labels; `other` is the free-text answer. */
+export type QuestionAnswer = {
+    selected: string[];
+    other?: string;
+};
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'onkeydown' | 'onsubmit'> & {
+    /** The questions, shown one per page. Read once when the form mounts: to ask a different set, mount a new form (for example in a `{#key}`). */
+    questions: Question[];
+    /** Offer a free-text "Other" answer. For a single-choice question it replaces the chosen option; for `multiSelect` it is added to the chosen ones. */
+    allowOther?: boolean;
+    /** Called from the review page with one answer per question, in order: `{ selected: string[]; other?: string }`. `other` is left out when empty. */
+    onsubmit?: (answers: QuestionAnswer[]) => void;
+    /** Called when the user skips the whole form (the Skip button or Escape). Without it there is no Skip button and Escape does nothing. */
+    onskip?: () => void;
+    /** Text of the final button on the review page. */
+    submitLabel?: string;
+    /** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+    class?: string;
+};
+declare const QuestionForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type QuestionForm = ReturnType<typeof QuestionForm>;
+export default QuestionForm;

package/dist/ToolCall.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Button, Dialog, Icon, Tooltip } from '@ruckc/truss-ui';
+	import { formatValue, previewInput } from './chat.js';
+
+	type Status = 'pending' | 'in_progress' | 'completed' | 'failed';
+
+	let {
+		name,
+		status = 'pending',
+		variant = 'row',
+		formatName,
+		labels,
+		input,
+		output,
+		error,
+		open = $bindable(false),
+		details,
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+		/** The tool's display name. Pass a raw identifier together with `formatName` to tidy it. */
+		name: string;
+		/** Where the call is. Shown as an icon (a spinner while `in_progress`) and always as text (the row's label, the chip's accessible name and tooltip), never by colour alone. */
+		status?: Status;
+		/** `row` (default) is a full-width line with the status text, for a list of calls. `chip` is a compact pill coloured by status with a tooltip, for many calls side by side (wrap them in `ToolCalls`). */
+		variant?: 'row' | 'chip';
+		/** Turns `name` into what is displayed, e.g. `formatToolName`, which strips an `mcp__server__` prefix and replaces underscores with spaces (`mcp__github__create_issue` becomes `create issue`). */
+		formatName?: (name: string) => string;
+		/** Replaces the status texts, e.g. for another language. Missing keys keep the defaults: Pending, Running, Done, Failed. */
+		labels?: Partial<Record<Status, string>>;
+		/** What the tool was called with: a string or any JSON-able value. Shown as a one-line preview in the chip's tooltip (see `previewInput`) and in full, pretty-printed, in the details. */
+		input?: unknown;
+		/** What the tool returned: a string or any JSON-able value. Pretty-printed in the details. */
+		output?: unknown;
+		/** Why the call failed. Shown in the details as an "Error" section. */
+		error?: string;
+		/** Whether the details are shown (the dialog is open, or the inline block is unfolded). Bindable. Only used when there is something to show: `input`, `output`, `error` or a `details` snippet. */
+		open?: boolean;
+		/**
+		 * Either where the details appear, or a snippet that is the details.
+		 * - `'dialog'` opens a modal `Dialog` (in the browser's top layer, so it stacks above a modal `Drawer`, sheet or bottom sheet). The default for `variant="chip"`.
+		 * - `'inline'` unfolds them under the chip or row, which becomes a disclosure button with `aria-expanded`. The default for `variant="row"`.
+		 * - A `Snippet` is a custom body (shown after the status line, before the Input, Output and Error sections) and uses the default mode for the variant.
+		 */
+		details?: 'dialog' | 'inline' | Snippet;
+		/** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+		class?: string;
+	} = $props();
+
+	const uid = $props.id();
+	const DEFAULTS: Record<Status, string> = { pending: 'Pending', in_progress: 'Running', completed: 'Done', failed: 'Failed' };
+	const ICONS = { pending: 'clock', in_progress: 'refresh', completed: 'success', failed: 'error' } as const;
+	const shown = $derived(formatName ? formatName(name) : name);
+	const statusText = $derived(labels?.[status] ?? DEFAULTS[status]);
+
+	const custom = $derived(typeof details === 'function' ? details : undefined);
+	const mode = $derived(typeof details === 'string' ? details : variant === 'chip' ? 'dialog' : 'inline');
+	const present = (v: unknown) => v !== undefined && v !== null;
+	const sections = $derived(
+		[
+			present(input) && { key: 'input', title: 'Input', text: formatValue(input) },
+			present(output) && { key: 'output', title: 'Output', text: formatValue(output) },
+			!!error && { key: 'error', title: 'Error', text: error }
+		].filter((s) => !!s)
+	);
+	const hasBody = $derived(!!custom || sections.length > 0);
+	const preview = $derived(previewInput(input));
+	const tip = $derived(preview ? `${statusText}: ${preview}` : statusText);
+
+	// the dialog is created on first use, so a long list of calls does not render every call's details up front
+	let mounted = $state(false);
+	$effect(() => {
+		if (open) mounted = true;
+	});
+
+	let copied = $state<{ key: string; ok: boolean } | undefined>();
+	let timer: ReturnType<typeof setTimeout>;
+	onDestroy(() => clearTimeout(timer));
+	async function copy(key: string, text: string) {
+		let ok = true;
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch {
+			ok = false;
+		}
+		copied = { key, ok };
+		clearTimeout(timer);
+		timer = setTimeout(() => (copied = undefined), 2000);
+	}
+
+	/** A scrolling region must be reachable by keyboard so it can be scrolled with the arrow keys. */
+	const focusable = (node: HTMLElement) => void (node.tabIndex = 0);
+</script>
+
+{#snippet icon()}
+	<span class="icon"><Icon name={ICONS[status]} spin={status === 'in_progress'} /></span>
+{/snippet}
+
+{#snippet body()}
+	<p class="line">Status: <strong>{statusText}</strong></p>
+	{#if custom}{@render custom()}{/if}
+	{#each sections as s (s.key)}
+		<section class="sec" data-section={s.key}>
+			<div class="sec-head">
+				<span class="sec-title">{s.title}</span>
+				<Button variant="minimal" size="sm" icon={copied?.key === s.key && copied.ok ? 'tick' : 'copy'} aria-label="Copy {s.title.toLowerCase()}" onclick={() => copy(s.key, s.text)} />
+			</div>
+			<pre {@attach focusable} role="region" aria-label={s.title}>{s.text}</pre>
+		</section>
+	{/each}
+	<span class="tr-visually-hidden" role="status" aria-live="polite">{copied ? (copied.ok ? 'Copied' : 'Copy failed') : ''}</span>
+{/snippet}
+
+<div {...rest} class={['tool', klass]} data-status={status} data-variant={variant} data-open={open && hasBody && mode === 'inline'}>
+	{#if variant === 'chip'}
+		<Tooltip text={tip}>
+			{#if hasBody}
+				<button
+					type="button"
+					class="chip"
+					aria-label="{shown}, {statusText}"
+					aria-haspopup={mode === 'dialog' ? 'dialog' : undefined}
+					aria-expanded={mode === 'inline' ? open : undefined}
+					aria-controls={mode === 'inline' ? `${uid}-details` : undefined}
+					onclick={() => (open = !open)}
+				>
+					{@render icon()}<span class="name">{shown}</span>
+				</button>
+			{:else}
+				<span class="chip" role="group" aria-label="{shown}, {statusText}">{@render icon()}<span class="name">{shown}</span></span>
+			{/if}
+		</Tooltip>
+	{:else if hasBody}
+		<button
+			type="button"
+			class="row"
+			aria-haspopup={mode === 'dialog' ? 'dialog' : undefined}
+			aria-expanded={mode === 'inline' ? open : undefined}
+			aria-controls={mode === 'inline' ? `${uid}-details` : undefined}
+			onclick={() => (open = !open)}
+		>
+			{@render icon()}<span class="name">{shown}</span><span class="status">{statusText}</span>
+			{#if mode === 'inline'}<span class="chev" data-open={open}><Icon name="chevron-down" /></span>{/if}
+		</button>
+	{:else}
+		<div class="row">{@render icon()}<span class="name">{shown}</span><span class="status">{statusText}</span></div>
+	{/if}
+	{#if hasBody && mode === 'inline' && open}
+		<div class="details" id="{uid}-details">{@render body()}</div>
+	{/if}
+</div>
+{#if hasBody && mode === 'dialog' && mounted}
+	<Dialog bind:open title={shown} size="lg" data-testid="tool-dialog">{@render body()}</Dialog>
+{/if}
+
+<style>
+	.tool { max-width: 100%; min-width: 0; font-size: var(--tr-text-sm); }
+	.tool[data-variant='row'] { border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface-container-low); }
+	.tool[data-variant='chip'] { display: inline-flex; flex-direction: column; align-items: flex-start; }
+	.tool[data-variant='chip'][data-open='true'] { flex: 1 1 100%; }
+	/* the Tooltip's host span sits between the root and the chip: let it shrink so a long name is cut instead of overflowing */
+	.tool[data-variant='chip'] > :global(span) { max-width: 100%; min-width: 0; }
+	.row { display: flex; align-items: center; gap: var(--tr-space-2); width: 100%; min-height: var(--tr-control-h-sm); padding: 2px var(--tr-space-2); box-sizing: border-box; border: 0; background: none; color: var(--tr-on-surface); font: inherit; text-align: start; }
+	button.row { cursor: pointer; border-radius: var(--tr-radius-md); }
+	button.row:hover { background: var(--tr-surface-container); }
+	button.row:focus-visible, button.chip:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.icon { display: inline-flex; flex: none; color: var(--tr-on-surface-variant); }
+	[data-status='completed'] .icon { color: var(--tr-success); }
+	[data-status='failed'] .icon { color: var(--tr-danger); }
+	[data-status='in_progress'] .icon { color: var(--tr-primary); }
+	.name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+	.status { flex: none; color: var(--tr-on-surface-variant); }
+	[data-status='failed'] .status { color: var(--tr-danger); font-weight: 600; }
+	.chev { display: inline-flex; flex: none; color: var(--tr-on-surface-variant); transition: transform var(--tr-dur) var(--tr-ease); }
+	.chev[data-open='true'] { transform: rotate(180deg); }
+	.details { width: 100%; box-sizing: border-box; padding: var(--tr-space-2) var(--tr-space-3) var(--tr-space-3); overflow-x: auto; overflow-wrap: anywhere; }
+	.tool[data-variant='row'] .details { border-top: 1px solid var(--tr-outline-variant); }
+	.tool[data-variant='chip'] .details { margin-top: var(--tr-space-1); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface-container-low); }
+
+	/* chip: a pill tinted by status; the icon, the name and the accessible status text carry the meaning, the colour only reinforces it */
+	.chip { display: inline-flex; align-items: center; gap: var(--tr-space-1); max-width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--tr-control-h-sm); padding: 0 var(--tr-space-2); border: 1px solid var(--tr-outline-variant); border-radius: 999px; background: var(--tr-surface-container); color: var(--tr-on-surface); font: inherit; }
+	button.chip { cursor: pointer; }
+	button.chip:hover { filter: brightness(0.96); }
+	.chip .name { flex: 0 1 auto; max-width: 24ch; font-weight: 500; }
+	.chip .icon { color: inherit; }
+	[data-status='in_progress'] .chip { background: var(--tr-primary-container); color: var(--tr-on-primary-container); border-color: transparent; }
+	[data-status='completed'] .chip { background: var(--tr-success-container); color: var(--tr-on-success-container); border-color: transparent; }
+	[data-status='failed'] .chip { background: var(--tr-danger-container); color: var(--tr-on-danger-container); border-color: transparent; }
+	[data-status='pending'] .chip { color: var(--tr-on-surface-variant); border-style: dashed; }
+
+	.line { margin: 0 0 var(--tr-space-2); color: var(--tr-on-surface-variant); }
+	.line strong { color: var(--tr-on-surface); }
+	.sec { margin-top: var(--tr-space-2); }
+	.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-2); }
+	.sec-title { font-weight: 600; font-size: var(--tr-text-sm); }
+	pre { margin: 0; max-width: 100%; max-height: min(40vh, 320px); overflow: auto; box-sizing: border-box; padding: var(--tr-space-2) var(--tr-space-3); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface-container); color: var(--tr-on-surface); font-family: var(--tr-font-mono); font-size: var(--tr-text-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
+	pre:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	[data-section='error'] pre { border-color: var(--tr-danger); }
+</style>

package/dist/ToolCall.svelte.d.ts

@@ -0,0 +1,35 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Status = 'pending' | 'in_progress' | 'completed' | 'failed';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+    /** The tool's display name. Pass a raw identifier together with `formatName` to tidy it. */
+    name: string;
+    /** Where the call is. Shown as an icon (a spinner while `in_progress`) and always as text (the row's label, the chip's accessible name and tooltip), never by colour alone. */
+    status?: Status;
+    /** `row` (default) is a full-width line with the status text, for a list of calls. `chip` is a compact pill coloured by status with a tooltip, for many calls side by side (wrap them in `ToolCalls`). */
+    variant?: 'row' | 'chip';
+    /** Turns `name` into what is displayed, e.g. `formatToolName`, which strips an `mcp__server__` prefix and replaces underscores with spaces (`mcp__github__create_issue` becomes `create issue`). */
+    formatName?: (name: string) => string;
+    /** Replaces the status texts, e.g. for another language. Missing keys keep the defaults: Pending, Running, Done, Failed. */
+    labels?: Partial<Record<Status, string>>;
+    /** What the tool was called with: a string or any JSON-able value. Shown as a one-line preview in the chip's tooltip (see `previewInput`) and in full, pretty-printed, in the details. */
+    input?: unknown;
+    /** What the tool returned: a string or any JSON-able value. Pretty-printed in the details. */
+    output?: unknown;
+    /** Why the call failed. Shown in the details as an "Error" section. */
+    error?: string;
+    /** Whether the details are shown (the dialog is open, or the inline block is unfolded). Bindable. Only used when there is something to show: `input`, `output`, `error` or a `details` snippet. */
+    open?: boolean;
+    /**
+     * Either where the details appear, or a snippet that is the details.
+     * - `'dialog'` opens a modal `Dialog` (in the browser's top layer, so it stacks above a modal `Drawer`, sheet or bottom sheet). The default for `variant="chip"`.
+     * - `'inline'` unfolds them under the chip or row, which becomes a disclosure button with `aria-expanded`. The default for `variant="row"`.
+     * - A `Snippet` is a custom body (shown after the status line, before the Input, Output and Error sections) and uses the default mode for the variant.
+     */
+    details?: 'dialog' | 'inline' | Snippet;
+    /** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+    class?: string;
+};
+declare const ToolCall: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ToolCall = ReturnType<typeof ToolCall>;
+export default ToolCall;

package/dist/ToolCalls.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		label = 'Tool calls',
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+		/** Accessible name of the group. */
+		label?: string;
+		/** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+		class?: string;
+		/** The `ToolCall`s. Chips wrap onto new lines, so many of them fit a narrow sidebar or a phone. */
+		children: Snippet;
+	} = $props();
+</script>
+
+<div {...rest} class={['calls', klass]} role="group" aria-label={label}>{@render children()}</div>
+
+<style>
+	.calls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tr-space-1); width: 100%; min-width: 0; max-width: 100%; }
+</style>

package/dist/ToolCalls.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> & {
+    /** Accessible name of the group. */
+    label?: string;
+    /** Other attributes (`data-testid`, `id`, ...) go to the root `<div>`. `class` is added to it. */
+    class?: string;
+    /** The `ToolCall`s. Chips wrap onto new lines, so many of them fit a narrow sidebar or a phone. */
+    children: Snippet;
+};
+declare const ToolCalls: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolCalls = ReturnType<typeof ToolCalls>;
+export default ToolCalls;

package/dist/chat.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Turns a raw tool identifier into a readable name: drops an `mcp__server__` prefix and replaces underscores with spaces.
+ * `mcp__github__create_issue` becomes `create issue`. Pass it as `ToolCall`'s `formatName`.
+ */
+export declare function formatToolName(name: string): string;
+/**
+ * A single-line preview of a tool's input, for tooltips. Strings have their whitespace collapsed; JSON text and other values are compacted
+ * (no indentation); anything longer than `max` characters is cut with an ellipsis, so the result is never longer than `max`.
+ * `undefined` and `null` give an empty string.
+ */
+export declare function previewInput(input: unknown, max?: number): string;
+/** The full text of a tool's input, output or error: strings as they are, everything else pretty-printed with two-space indentation. */
+export declare function formatValue(v: unknown): string;

package/dist/chat.js

@@ -0,0 +1,46 @@
+/**
+ * Turns a raw tool identifier into a readable name: drops an `mcp__server__` prefix and replaces underscores with spaces.
+ * `mcp__github__create_issue` becomes `create issue`. Pass it as `ToolCall`'s `formatName`.
+ */
+export function formatToolName(name) {
+    return name.replace(/^mcp__.+?__/, '').replace(/_+/g, ' ').trim();
+}
+/** JSON text of `v`, or `String(v)` for what JSON cannot express (circular objects, functions, symbols, bigints). */
+function stringify(v, indent) {
+    try {
+        return JSON.stringify(v, null, indent) ?? String(v);
+    }
+    catch {
+        return String(v);
+    }
+}
+/**
+ * A single-line preview of a tool's input, for tooltips. Strings have their whitespace collapsed; JSON text and other values are compacted
+ * (no indentation); anything longer than `max` characters is cut with an ellipsis, so the result is never longer than `max`.
+ * `undefined` and `null` give an empty string.
+ */
+export function previewInput(input, max = 80) {
+    if (input === undefined || input === null)
+        return '';
+    let s;
+    if (typeof input === 'string') {
+        s = input;
+        if (/^\s*[[{]/.test(s))
+            try {
+                s = JSON.stringify(JSON.parse(s));
+            }
+            catch {
+                /* not JSON: keep the text */
+            }
+        s = s.replace(/\s+/g, ' ').trim();
+    }
+    else
+        s = stringify(input);
+    return s.length > max ? `${s.slice(0, Math.max(0, max - 1)).trimEnd()}…` : s;
+}
+/** The full text of a tool's input, output or error: strings as they are, everything else pretty-printed with two-space indentation. */
+export function formatValue(v) {
+    if (v === undefined || v === null)
+        return '';
+    return typeof v === 'string' ? v : stringify(v, 2);
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as ChatThread } from './ChatThread.svelte';
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { default as ToolCall } from './ToolCall.svelte';
+export { default as ToolCalls } from './ToolCalls.svelte';
+export { default as ChatComposer } from './ChatComposer.svelte';
+export { default as ChatStatus } from './ChatStatus.svelte';
+export { default as QuestionForm } from './QuestionForm.svelte';
+export type { Question, QuestionAnswer } from './QuestionForm.svelte';
+export { formatToolName, previewInput, formatValue } from './chat.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+export { default as ChatThread } from './ChatThread.svelte';
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { default as ToolCall } from './ToolCall.svelte';
+export { default as ToolCalls } from './ToolCalls.svelte';
+export { default as ChatComposer } from './ChatComposer.svelte';
+export { default as ChatStatus } from './ChatStatus.svelte';
+export { default as QuestionForm } from './QuestionForm.svelte';
+export { formatToolName, previewInput, formatValue } from './chat.js';

package/dist/internal/chat-context.d.ts

@@ -0,0 +1,11 @@
+/** What a ChatThread offers the messages inside it. */
+export type ChatThreadContext = {
+    /** Queue text for the thread's polite live region. */
+    announce: (text: string) => void;
+    /** The thread-wide default for showing reasoning blocks. */
+    readonly showReasoning: boolean;
+    /** The user chose to show or hide reasoning: update the thread setting (and its storage). */
+    setShowReasoning: (show: boolean) => void;
+};
+export declare const provideThread: (c: ChatThreadContext) => ChatThreadContext;
+export declare const useThread: () => ChatThreadContext | undefined;

package/dist/internal/chat-context.js

@@ -0,0 +1,4 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('truss-chat-thread');
+export const provideThread = (c) => setContext(KEY, c);
+export const useThread = () => getContext(KEY);

package/package.json

@@ -1,6 +1,49 @@
 {
-  "name": "@ruckc/truss-chat",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ruckc/truss-chat",
+	"version": "1.12.0",
+	"description": "Chat building blocks for Truss UI: thread, messages, tool calls, composer, status line and a question form",
+	"type": "module",
+	"license": "MIT",
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.20.0",
+		"@ruckc/truss-ui": "^1.0.0"
+	},
+	"dependencies": {
+		"@ruckc/truss-markdown": "^1.12.0"
+	},
+	"author": "Curtis Ruck",
+	"homepage": "https://truss.ruck.io",
+	"bugs": {
+		"url": "https://github.com/ruckc/truss-ui/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruckc/truss-ui.git",
+		"directory": "packages/chat"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"truss",
+		"chat",
+		"agent",
+		"ai"
+	]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.