@joewinke/jatui 0.56.0 → 0.57.0

package/CLAUDE.md

@@ -110,7 +110,7 @@ Then import:
 
 ### Agent surfaces (BoardUI wave 2)
 
-"Agent is working" UI. Free BoardUI items (agent-thinking, agent-log, composer-loader, notification-center) were ported under MIT — see `THIRD_PARTY_NOTICES.md`; AgentTaskList, Questionnaire and ContextMeter are clean-room. Demos: `/components/agent-thinking`, `agent-log`, `agent-task-list`, `questionnaire`, `context-meter`, `notification-center`, `composer-glow`, `streamed-text`.
+"Agent is working" UI. Free BoardUI items (agent-thinking, agent-log, composer-loader, notification-center) were ported under MIT — see `THIRD_PARTY_NOTICES.md`; AgentTaskList, Questionnaire and ContextMeter are clean-room. Demos: `/components/agent-thinking`, `agent-log`, `agent-task-list`, `questionnaire`, `context-meter`, `notification-center`, `composer-glow`, `streamed-text`, `chat-transcript`.
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
@@ -124,6 +124,7 @@ Then import:
 | `NotificationCenter` | Inbox panel: title + "N unread" + "Mark all read"; a tab list with count chips (default All / Mentions / System by `category`; `bind:tab` or uncontrolled `defaultTab`; arrows / Home / End switch tabs). Items are newest first under Today / Yesterday / This week / Earlier headers (`groupNotificationsByDate`, `now` injectable). Roving focus via `createListNav`, scoped to the list: j/k/arrows move, Enter opens → `onOpen(item)` or follows `href`. Opening an item or clicking one of its actions marks it read. The host owns read state (`read`); the component also tracks read ids locally, so it works uncontrolled. The unread dot is announced (sr-only "Unread"). Status glyph or `Avatar`; `<time>` via `formatRelativeTime`, refreshed each minute. Empty state via `Empty` ("You're all caught up"). | `items: NotificationItem[]`, `tabs?: {id, label, filter?}[]`, `tab` (bindable), `defaultTab?`, `onTabChange?`, `onOpen?`, `onMarkRead?(ids)`, `onMarkAllRead?` (omitted → `onMarkRead` gets every unread id), `groupByDate?` (true), `now?`, `maxHeight?` ('32rem'), `title?`, `emptyTitle?`, `emptyDescription?` |
 | `ComposerGlow` | Opt-in ambient rim light around a composer while the agent works: an SVG `<rect rx>` stroke with a pathLength=100 dash laps the box in three layers (crisp line, glow, bloom clipped inside; SVG `feGaussianBlur`, so iOS stays soft); a ResizeObserver keeps the viewBox equal to the px box. Token colours only (info → primary → `color-mix` midpoint → secondary → accent). Fades in/out on `active`; the lap runs only while visible. Under `data-motion="calm"` / reduced motion there is no frozen arc: it shows a static primary focus-ring tint. Paints a `--color-base-100` surface, so the wrapped composer must be transparent. | `active`, `speed?` (4.5 s/lap), `intensity?` ('subtle'\|'normal'\|'vivid'), `radius?` (px or CSS; default box radius), `class?`, `children` |
 | `StreamedText` | Streamed assistant text revealed per paragraph/line, never per token: an append-only splitter (`splitStreamedText`, index keys, code fences kept whole) mounts each block once with a short fade + un-blur on motion tokens, after which it only grows. History doesn't animate; reduced motion is static; a subtle caret shows while `streaming`. `renderBlock` lets the host render markdown per block. Recipe: show `AgentThinking` until the first *text* part exists, not while the request status is "submitted". | `text`, `streaming?`, `split?` ('paragraph'\|'line'), `as?`, `class?`, `renderBlock?: Snippet<[string, number]>` |
+| `ChatTranscript` | Read-only, two-sided transcript of NAMED speakers — a live phone call (caller vs. the assistant's persona), a Scribe dictation, a meeting recording. Not a chat client (no composer/reactions/edit/delete, no HTML in the words; for a channel use `MessageThread`). Speakers sit on opposite sides (first listed `start`, second `end`, or `side`); consecutive turns group into a run (name + avatar once, tail on the last bubble; a grouped bubble carries the name sr-only). Label speakers by real names ("Dana Testwell", "Ruby"), never role words. `streaming` reveals the LAST turn per line through `StreamedText` with a caret. New turns slide in from their own side on motion tokens (history doesn't animate; calm/reduced motion honoured). Follows the live edge via `createStickToBottom`, `JumpToLatest` when scrolled away. Polite `role="log"`, keyboard-scrollable, `<time>` stamps (offset ms → "1:05", ISO → clock). Bubble tints are `color-mix` of a token family (`tone`: neutral/primary/secondary/accent/info). `meta` snippet (latency, flags — in words), `actions` snippet (hover/focus toolbar, none by default), `onTurnClick` (bubble becomes a button, e.g. seek) + `activeId`. Pure helpers: `buildTranscriptRows`, `resolveSpeakerSides`, `formatTurnTime`. | `turns: TranscriptTurn[]` (`{id, speaker, text \| null, at?, placeholder?}`), `speakers: TranscriptSpeaker[]` (`{id, name, side?, avatarUrl?, tone?}`), `streaming?`, `group?` (true), `avatars?` (true), `live?` (true), `follow?` (true), `ariaLabel?`, `formatTime?`, `emptyText?`, `meta?`/`actions?` (snippets), `onTurnClick?`, `activeId?`, `maxHeight?`, `class?` |
 
 **Upgrades in this wave (all additive):**
 - **`Steps`** (`progress/Steps.svelte`) — `collapsible?`, `collapsed?` (bindable), `summary?: string | Snippet` (default "3 steps left" / "All steps done", live while folded; the header is a real `aria-expanded` / `aria-controls` button), `orientation?` ('horizontal'\|'vertical'; vertical also shows descriptions), `activeProgress?` (0–1, a mini ProgressRing on the active node and in the folded header), `completionDelay?` + `onFinished?` (fires once after `current` passes the last step; re-arms if `current` drops back). Unset, the markup is unchanged. Helpers: `stepsSummary`, `stepsRemaining`, `isStepsFinished`, `clampStepProgress`.

package/dist/components/messaging/ChatTranscript.svelte

@@ -0,0 +1,414 @@
+<!--
+  ChatTranscript — a read-only, two-sided transcript of NAMED speakers: a live
+  phone call (caller vs. the assistant's persona), a Scribe dictation, a
+  meeting recording. Not a chat client: no composer, no reactions, no edit or
+  delete, no HTML in the words. For a Slack-style channel use MessageThread /
+  MessageItem; for an agent's tool log use AgentLog.
+
+  - Speakers sit on opposite sides (the first listed at `start`, the second at
+    `end`; set `side` to choose). Consecutive turns by one speaker group into a
+    run: the name and avatar show once, the tail on the last bubble.
+  - Each speaker's name is the label. Pass real names ("Dana Testwell",
+    "Ruby"), never role words ("Patient", "AI assistant").
+  - `streaming`: the LAST turn is still being spoken; its words reveal per line
+    through StreamedText, with a caret.
+  - New turns slide in from their own side on the motion tokens; turns present
+    on first render don't animate; reduced motion / data-motion="calm" is
+    honoured by resolveMotionTiming.
+  - Follows the live edge with createStickToBottom only while the reader is at
+    it; scrolled away, a JumpToLatest pill counts what arrived.
+  - A11y: the scroller is a polite role="log" (set `live={false}` for a
+    finished recording), keyboard-scrollable (tabindex 0); every bubble's
+    speaker is in its text (a grouped bubble carries it sr-only); timestamps
+    are <time> elements; a slow or flagged turn belongs in `meta` as words, not
+    only colour.
+  - Optional per-turn `meta` (e.g. "1.2 s" reply latency) and `actions` (a
+    hover / focus toolbar the host fills — none by default) snippets.
+    `onTurnClick` makes each bubble a button (e.g. seek a recording);
+    `activeId` marks the turn playing now.
+
+  Token-only colour (bubble tints are color-mix of a token family over
+  base-100), logical properties so RTL mirrors.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Avatar from './Avatar.svelte';
+	import StreamedText from '../agent/StreamedText.svelte';
+	import JumpToLatest from '../basic/JumpToLatest.svelte';
+	import { createStickToBottom, type StickState } from '../../actions/stickToBottom';
+	import { resolveMotionTiming } from '../../motion/transitions';
+	import {
+		buildTranscriptRows,
+		formatTurnTime,
+		turnDatetime,
+		type TranscriptSide,
+		type TranscriptSpeaker,
+		type TranscriptTurn
+	} from './chatTranscript';
+
+	interface Props {
+		turns: TranscriptTurn[];
+		speakers: TranscriptSpeaker[];
+		/** The last turn is still arriving: reveal it per line with a caret. */
+		streaming?: boolean;
+		/** Group consecutive turns by one speaker (name once per run). Default true. */
+		group?: boolean;
+		/** Show speaker avatars beside the first bubble of a run. Default true. */
+		avatars?: boolean;
+		/** Polite live region (new turns are announced). Default true. */
+		live?: boolean;
+		/** Follow the live edge + JumpToLatest. Default true. */
+		follow?: boolean;
+		/** Accessible name of the log. */
+		ariaLabel?: string;
+		/** Turn timestamp text; default formatTurnTime (offset "1:05" / clock "10:42 AM"). */
+		formatTime?: (at: TranscriptTurn['at']) => string | null;
+		/** Shown when there are no turns. */
+		emptyText?: string;
+		/** Extra line under a bubble (latency, a flag). Words, not colour alone. */
+		meta?: Snippet<[TranscriptTurn]>;
+		/** Hover / focus toolbar for a bubble. None by default. */
+		actions?: Snippet<[TranscriptTurn]>;
+		/** Makes every bubble a button (e.g. seek a recording to `turn.at`). */
+		onTurnClick?: (turn: TranscriptTurn) => void;
+		/** The turn playing now (recordings): marked with aria-current. */
+		activeId?: string | number | null;
+		/** Height bound of the scroller (CSS). Default: fill the parent. */
+		maxHeight?: string;
+		class?: string;
+	}
+
+	let {
+		turns,
+		speakers,
+		streaming = false,
+		group = true,
+		avatars = true,
+		live = true,
+		follow = true,
+		ariaLabel = 'Transcript',
+		formatTime = (at) => formatTurnTime(at),
+		emptyText = 'Waiting for the first words.',
+		meta,
+		actions,
+		onTurnClick,
+		activeId = null,
+		maxHeight,
+		class: className = ''
+	}: Props = $props();
+
+	const rows = $derived(buildTranscriptRows(turns, speakers, group));
+
+	let stick = $state<StickState>({ atBottom: true, pinnedUp: false, unread: 0 });
+	const scroller = createStickToBottom({ onState: (s) => (stick = s) });
+
+	// Follow new turns and a growing live line (gated: never against the reader).
+	$effect(() => {
+		const last = turns[turns.length - 1];
+		void turns.length;
+		void last?.text?.length;
+		if (follow) scroller.requestStick();
+	});
+
+	/** A new bubble slides in from its own side: opacity + 8px, on the motion tokens. */
+	function bubbleIn(node: Element, { side }: { side: TranscriptSide }) {
+		// Svelte runs `css` transitions through Element.animate; plain jsdom
+		// (consumers' component tests) has none, so skip the motion there.
+		if (typeof node.animate !== 'function') return { duration: 0 };
+		const { delay, duration, easing } = resolveMotionTiming(node, {}, {
+			duration: 'enter',
+			easing: 'glide'
+		});
+		const rtl = typeof getComputedStyle === 'function' && getComputedStyle(node).direction === 'rtl';
+		const sign = (side === 'end' ? 1 : -1) * (rtl ? -1 : 1);
+		return {
+			delay,
+			duration,
+			easing,
+			css: (t: number, u: number) =>
+				`opacity: ${t}; transform: translate(${(u * 8 * sign).toFixed(2)}px, ${(u * 4).toFixed(2)}px);`
+		};
+	}
+
+	function placeholderFor(turn: TranscriptTurn, name: string): string {
+		return turn.placeholder ?? `${name} spoke`;
+	}
+</script>
+
+{#snippet bubbleBody(row: (typeof rows)[number], isLast: boolean)}
+	{@const name = row.speaker.name}
+	{@const empty = !row.turn.text || !row.turn.text.trim()}
+	{#if !row.first}<span class="sr-only">{name}:</span>{/if}
+	<!-- Phrasing content only (a bubble may be a <button>): spans, and
+	     StreamedText's block markup only on a non-button bubble. -->
+	{#if streaming && isLast && !empty && !onTurnClick}
+		<StreamedText text={row.turn.text ?? ''} streaming split="line" class="ct-words" />
+	{:else if empty}
+		<span class="ct-words ct-placeholder">{placeholderFor(row.turn, name)}</span>
+	{:else}
+		<span class="ct-words">{row.turn.text}</span>
+	{/if}
+{/snippet}
+
+<div class="ct relative flex min-h-0 flex-col {className}" style:max-height={maxHeight}>
+	<!-- A scrollable region must be reachable by keyboard to scroll it. -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		use:scroller.action
+		class="ct-scroll min-h-0 flex-1 overflow-y-auto"
+		role="log"
+		aria-live={live ? 'polite' : 'off'}
+		aria-label={ariaLabel}
+		tabindex="0"
+	>
+		{#if rows.length === 0}
+			<p class="ct-empty">{emptyText}</p>
+		{:else}
+			<ol class="ct-list">
+				{#each rows as row, i (row.turn.id)}
+					{@const isLast = i === rows.length - 1}
+					{@const time = formatTime(row.turn.at)}
+					<li
+						class="ct-row"
+						class:ct-end={row.side === 'end'}
+						class:ct-first={row.first}
+						data-tone={row.tone}
+						aria-current={activeId != null && row.turn.id === activeId ? 'true' : undefined}
+						in:bubbleIn={{ side: row.side }}
+					>
+						{#if avatars}
+							<div class="ct-avatar" aria-hidden="true">
+								{#if row.first}
+									<Avatar name={row.speaker.name} avatarUrl={row.speaker.avatarUrl} size="small" />
+								{/if}
+							</div>
+						{/if}
+						<div class="ct-stack">
+							{#if row.first}
+								<div class="ct-head">
+									<span class="ct-name">{row.speaker.name}</span>
+									{#if time}
+										<time class="ct-time" datetime={turnDatetime(row.turn.at)}>{time}</time>
+									{/if}
+								</div>
+							{/if}
+							<div class="ct-bubble-wrap">
+								{#if onTurnClick}
+									<button
+										type="button"
+										class="ct-bubble ct-bubble-btn"
+										class:ct-tail={row.last}
+										onclick={() => onTurnClick(row.turn)}
+									>
+										{@render bubbleBody(row, isLast)}
+									</button>
+								{:else}
+									<div class="ct-bubble" class:ct-tail={row.last}>
+										{@render bubbleBody(row, isLast)}
+									</div>
+								{/if}
+								{#if !row.first && time}
+									<time class="ct-time ct-time-hover" datetime={turnDatetime(row.turn.at)}>{time}</time>
+								{/if}
+								{#if actions}
+									<div class="ct-actions">{@render actions(row.turn)}</div>
+								{/if}
+							</div>
+							{#if meta}
+								<div class="ct-meta">{@render meta(row.turn)}</div>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ol>
+		{/if}
+	</div>
+	{#if follow}
+		<JumpToLatest
+			visible={!stick.atBottom}
+			unreadCount={stick.unread}
+			label="Jump to the latest turn"
+			onclick={scroller.jumpToLatest}
+		/>
+	{/if}
+</div>
+
+<style>
+	.ct-scroll {
+		padding: 0.5rem;
+	}
+
+	.ct-empty {
+		margin: 0;
+		padding: 0.5rem;
+		font-size: 0.875rem;
+		color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
+	}
+
+	.ct-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.ct-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		max-width: 100%;
+	}
+	.ct-row.ct-first {
+		margin-block-start: 0.5rem;
+	}
+	.ct-row.ct-first:first-child {
+		margin-block-start: 0;
+	}
+	.ct-row.ct-end {
+		flex-direction: row-reverse;
+	}
+
+	.ct-avatar {
+		flex: none;
+		width: 2rem;
+	}
+
+	.ct-stack {
+		display: flex;
+		min-width: 0;
+		max-width: min(80%, 36rem);
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.125rem;
+	}
+	.ct-end .ct-stack {
+		align-items: flex-end;
+	}
+
+	.ct-head {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		padding-inline: 0.25rem;
+		font-size: 0.75rem;
+	}
+	.ct-end .ct-head {
+		flex-direction: row-reverse;
+	}
+	.ct-name {
+		font-weight: 600;
+		color: var(--color-base-content);
+	}
+	.ct-time {
+		font-variant-numeric: tabular-nums;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+	}
+
+	.ct-bubble-wrap {
+		position: relative;
+		display: flex;
+		max-width: 100%;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	.ct-end .ct-bubble-wrap {
+		flex-direction: row-reverse;
+	}
+
+	.ct-bubble {
+		--ct-tint: var(--color-base-200);
+		min-width: 0;
+		border-radius: var(--radius-box, 0.75rem);
+		background: var(--ct-tint);
+		color: var(--color-base-content);
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		text-align: start;
+		overflow-wrap: anywhere;
+	}
+	[data-tone='primary'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-primary) 16%, var(--color-base-100));
+	}
+	[data-tone='secondary'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-secondary) 16%, var(--color-base-100));
+	}
+	[data-tone='accent'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-accent) 16%, var(--color-base-100));
+	}
+	[data-tone='info'] .ct-bubble {
+		--ct-tint: color-mix(in oklch, var(--color-info) 16%, var(--color-base-100));
+	}
+	/* The run's last bubble points at its speaker: a tighter corner on their side. */
+	.ct-bubble.ct-tail {
+		border-end-start-radius: 0.25rem;
+	}
+	.ct-end .ct-bubble.ct-tail {
+		border-end-start-radius: var(--radius-box, 0.75rem);
+		border-end-end-radius: 0.25rem;
+	}
+
+	.ct-bubble-btn {
+		cursor: pointer;
+		border: 0;
+		font: inherit;
+		transition: background-color var(--motion-fast, 120ms) ease;
+	}
+	.ct-bubble-btn:hover {
+		--ct-tint: color-mix(in oklch, var(--color-base-content) 10%, var(--color-base-100));
+	}
+	.ct-bubble-btn:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	.ct-row[aria-current='true'] .ct-bubble {
+		box-shadow: inset 0 0 0 2px var(--color-primary);
+	}
+
+	.ct-bubble :global(.ct-words) {
+		display: block;
+		margin: 0;
+		white-space: pre-wrap;
+	}
+	.ct-placeholder {
+		font-style: italic;
+		color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
+	}
+
+	/* Grouped bubbles: the time and the host's actions appear on hover / focus. */
+	.ct-time-hover,
+	.ct-actions {
+		flex: none;
+		opacity: 0;
+		transition: opacity var(--motion-fast, 120ms) ease;
+	}
+	.ct-row:hover .ct-time-hover,
+	.ct-row:focus-within .ct-time-hover,
+	.ct-row:hover .ct-actions,
+	.ct-row:focus-within .ct-actions {
+		opacity: 1;
+	}
+
+	.ct-meta {
+		padding-inline: 0.25rem;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 80%, transparent);
+	}
+
+	@media (hover: none) {
+		.ct-time-hover,
+		.ct-actions {
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ct-time-hover,
+		.ct-actions,
+		.ct-bubble-btn {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/messaging/ChatTranscript.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import { type TranscriptSpeaker, type TranscriptTurn } from './chatTranscript';
+interface Props {
+    turns: TranscriptTurn[];
+    speakers: TranscriptSpeaker[];
+    /** The last turn is still arriving: reveal it per line with a caret. */
+    streaming?: boolean;
+    /** Group consecutive turns by one speaker (name once per run). Default true. */
+    group?: boolean;
+    /** Show speaker avatars beside the first bubble of a run. Default true. */
+    avatars?: boolean;
+    /** Polite live region (new turns are announced). Default true. */
+    live?: boolean;
+    /** Follow the live edge + JumpToLatest. Default true. */
+    follow?: boolean;
+    /** Accessible name of the log. */
+    ariaLabel?: string;
+    /** Turn timestamp text; default formatTurnTime (offset "1:05" / clock "10:42 AM"). */
+    formatTime?: (at: TranscriptTurn['at']) => string | null;
+    /** Shown when there are no turns. */
+    emptyText?: string;
+    /** Extra line under a bubble (latency, a flag). Words, not colour alone. */
+    meta?: Snippet<[TranscriptTurn]>;
+    /** Hover / focus toolbar for a bubble. None by default. */
+    actions?: Snippet<[TranscriptTurn]>;
+    /** Makes every bubble a button (e.g. seek a recording to `turn.at`). */
+    onTurnClick?: (turn: TranscriptTurn) => void;
+    /** The turn playing now (recordings): marked with aria-current. */
+    activeId?: string | number | null;
+    /** Height bound of the scroller (CSS). Default: fill the parent. */
+    maxHeight?: string;
+    class?: string;
+}
+declare const ChatTranscript: import("svelte").Component<Props, {}, "">;
+type ChatTranscript = ReturnType<typeof ChatTranscript>;
+export default ChatTranscript;

package/dist/components/messaging/chatTranscript.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Pure logic for `ChatTranscript` (a read-only, two-sided transcript of named
+ * speakers: a live phone call, a Scribe dictation, a meeting recording).
+ * Kept out of the component so it runs under `npm run test:unit` with no DOM.
+ */
+/** Which side of the thread a speaker's bubbles sit on (logical: RTL mirrors). */
+export type TranscriptSide = 'start' | 'end';
+export interface TranscriptSpeaker {
+    /** Matches `TranscriptTurn.speaker`. */
+    id: string;
+    /** Shown above the speaker's first bubble in a run: "Dana Testwell", "Ruby". */
+    name: string;
+    /** Default: the first speaker listed sits at `start`, the second at `end`, the rest at `start`. */
+    side?: TranscriptSide;
+    /** Portrait URL; initials from `name` otherwise. */
+    avatarUrl?: string | null;
+    /**
+     * Bubble colour, as a token family. Default: `neutral` (base-200) on the
+     * start side, `primary` (a primary tint) on the end side.
+     */
+    tone?: TranscriptTone;
+}
+export type TranscriptTone = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info';
+export interface TranscriptTurn {
+    /** Stable key: never reused for a different turn. */
+    id: string | number;
+    /** A `TranscriptSpeaker.id`. An unknown id renders at `start` under its own id. */
+    speaker: string;
+    /**
+     * The words. `null` or blank renders `placeholder` in italics (a line that
+     * keeps no words: "Ruby spoke").
+     */
+    text: string | null;
+    /**
+     * When it was said: a number is ms into the recording ("1:05"); a string
+     * is an ISO instant (local clock time). Omit for none.
+     */
+    at?: number | string | null;
+    /** Shown when `text` is empty. Default: "<name> spoke". */
+    placeholder?: string;
+}
+export interface TranscriptRow {
+    turn: TranscriptTurn;
+    speaker: TranscriptSpeaker;
+    side: TranscriptSide;
+    tone: TranscriptTone;
+    /** First bubble of a run by one speaker: carries the name (and avatar). */
+    first: boolean;
+    /** Last bubble of a run: carries the bubble tail. */
+    last: boolean;
+}
+/** Speaker id → side, by the rule documented on `TranscriptSpeaker.side`. */
+export declare function resolveSpeakerSides(speakers: readonly TranscriptSpeaker[]): Map<string, TranscriptSide>;
+/**
+ * The rows the component draws: each turn with its speaker, side and tone,
+ * and whether it opens or closes a run. `group: false` makes every turn its
+ * own run (a name on every bubble).
+ */
+export declare function buildTranscriptRows(turns: readonly TranscriptTurn[], speakers: readonly TranscriptSpeaker[], group?: boolean): TranscriptRow[];
+/** "m:ss" (or "h:mm:ss") for an offset in ms; negative or non-finite → null. */
+export declare function formatOffset(ms: number): string | null;
+/**
+ * The default timestamp: an offset as "1:05", an ISO instant as the local
+ * clock ("10:42 AM"), anything unreadable as null (nothing is shown).
+ */
+export declare function formatTurnTime(at: number | string | null | undefined, locale?: string): string | null;
+/** The machine-readable `datetime` for a `<time>`: ISO stays ISO, an offset becomes a duration. */
+export declare function turnDatetime(at: number | string | null | undefined): string | undefined;

package/dist/components/messaging/chatTranscript.js

@@ -0,0 +1,72 @@
+/**
+ * Pure logic for `ChatTranscript` (a read-only, two-sided transcript of named
+ * speakers: a live phone call, a Scribe dictation, a meeting recording).
+ * Kept out of the component so it runs under `npm run test:unit` with no DOM.
+ */
+/** Speaker id → side, by the rule documented on `TranscriptSpeaker.side`. */
+export function resolveSpeakerSides(speakers) {
+    const sides = new Map();
+    speakers.forEach((s, i) => {
+        sides.set(s.id, s.side ?? (i === 1 ? 'end' : 'start'));
+    });
+    return sides;
+}
+/**
+ * The rows the component draws: each turn with its speaker, side and tone,
+ * and whether it opens or closes a run. `group: false` makes every turn its
+ * own run (a name on every bubble).
+ */
+export function buildTranscriptRows(turns, speakers, group = true) {
+    const byId = new Map(speakers.map((s) => [s.id, s]));
+    const sides = resolveSpeakerSides(speakers);
+    const rows = turns.map((turn) => {
+        const speaker = byId.get(turn.speaker) ?? { id: turn.speaker, name: turn.speaker };
+        const side = sides.get(turn.speaker) ?? 'start';
+        const tone = speaker.tone ?? (side === 'end' ? 'primary' : 'neutral');
+        return { turn, speaker, side, tone, first: true, last: true };
+    });
+    if (!group)
+        return rows;
+    for (let i = 1; i < rows.length; i++) {
+        if (rows[i].turn.speaker === rows[i - 1].turn.speaker) {
+            rows[i].first = false;
+            rows[i - 1].last = false;
+        }
+    }
+    return rows;
+}
+/** "m:ss" (or "h:mm:ss") for an offset in ms; negative or non-finite → null. */
+export function formatOffset(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return null;
+    const total = Math.floor(ms / 1000);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = String(total % 60).padStart(2, '0');
+    return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${s}` : `${m}:${s}`;
+}
+/**
+ * The default timestamp: an offset as "1:05", an ISO instant as the local
+ * clock ("10:42 AM"), anything unreadable as null (nothing is shown).
+ */
+export function formatTurnTime(at, locale) {
+    if (at == null || at === '')
+        return null;
+    if (typeof at === 'number')
+        return formatOffset(at);
+    const d = new Date(at);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return d.toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' });
+}
+/** The machine-readable `datetime` for a `<time>`: ISO stays ISO, an offset becomes a duration. */
+export function turnDatetime(at) {
+    if (at == null || at === '')
+        return undefined;
+    if (typeof at === 'number') {
+        if (!Number.isFinite(at) || at < 0)
+            return undefined;
+        return `PT${(at / 1000).toFixed(3).replace(/\.?0+$/, '')}S`;
+    }
+    return Number.isNaN(new Date(at).getTime()) ? undefined : at;
+}

package/dist/index.d.ts

@@ -191,6 +191,9 @@ export { default as MessageItem } from './components/messaging/MessageItem.svelt
 export { default as MessageThread } from './components/messaging/MessageThread.svelte';
 export { default as QuotedMessageDisplay } from './components/messaging/QuotedMessageDisplay.svelte';
 export { default as ThreadPanel } from './components/messaging/ThreadPanel.svelte';
+export { default as ChatTranscript } from './components/messaging/ChatTranscript.svelte';
+export { buildTranscriptRows, resolveSpeakerSides, formatTurnTime, formatOffset, turnDatetime } from './components/messaging/chatTranscript';
+export type { TranscriptSpeaker, TranscriptTurn, TranscriptRow, TranscriptSide, TranscriptTone } from './components/messaging/chatTranscript';
 export { default as CreateChannelModal } from './components/messaging/CreateChannelModal.svelte';
 export { default as StartDMModal } from './components/messaging/StartDMModal.svelte';
 export { default as ChannelInfoModal } from './components/messaging/ChannelInfoModal.svelte';

package/dist/index.js

@@ -229,6 +229,9 @@ export { default as MessageItem } from './components/messaging/MessageItem.svelt
 export { default as MessageThread } from './components/messaging/MessageThread.svelte';
 export { default as QuotedMessageDisplay } from './components/messaging/QuotedMessageDisplay.svelte';
 export { default as ThreadPanel } from './components/messaging/ThreadPanel.svelte';
+// Read-only, two-sided transcript of named speakers (calls, dictation, meetings).
+export { default as ChatTranscript } from './components/messaging/ChatTranscript.svelte';
+export { buildTranscriptRows, resolveSpeakerSides, formatTurnTime, formatOffset, turnDatetime } from './components/messaging/chatTranscript';
 export { default as CreateChannelModal } from './components/messaging/CreateChannelModal.svelte';
 export { default as StartDMModal } from './components/messaging/StartDMModal.svelte';
 export { default as ChannelInfoModal } from './components/messaging/ChannelInfoModal.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",