@signal9/era-ui 23.1.0 → 23.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [23.2.0](https://github.com/sig-nine/era-ui/compare/v23.1.1...v23.2.0) (2026-08-09)
+
+### Features
+
+* **ai:** Timeline — a build bar whose segment widths ARE the durations ([47a5304](https://github.com/sig-nine/era-ui/commit/47a5304d362b7dab57d905f998be54694d6c3e03))
+* **ai:** Todo — an agent's plan board, ported from term the era way ([d1f39cd](https://github.com/sig-nine/era-ui/commit/d1f39cd82f538ad1711f0c092c77c221338193af))
+
+## [23.1.1](https://github.com/sig-nine/era-ui/compare/v23.1.0...v23.1.1) (2026-08-09)
+
+### Bug Fixes
+
+* **docs:** hoist the embedded example out of a mustache ([4da5ee0](https://github.com/sig-nine/era-ui/commit/4da5ee0a911970f009acd967e0b10e3c6aa5723d))
+* **typography:** close the token-cell half of anonymous-text — 106 findings to 26 ([682c5df](https://github.com/sig-nine/era-ui/commit/682c5df012547ad191a9034a3acf880e832a5b69))
+
 ## [23.1.0](https://github.com/sig-nine/era-ui/compare/v23.0.0...v23.1.0) (2026-08-09)
 
 ### Features

package/dist/ai/index.d.ts

@@ -9,6 +9,8 @@ export * as Suggestions from './suggestion/index.js';
 export * as Actions from './actions/index.js';
 export * as Artifact from './artifact/index.js';
 export * as Plan from './plan/index.js';
+export * as Todo from './todo/index.js';
+export * as Timeline from './timeline/index.js';
 export * as Queue from './queue/index.js';
 export * as Confirmation from './confirmation/index.js';
 export * as InlineCitation from './inline-citation/index.js';

package/dist/ai/index.js

@@ -14,6 +14,8 @@ export * as Suggestions from './suggestion/index.js';
 export * as Actions from './actions/index.js';
 export * as Artifact from './artifact/index.js';
 export * as Plan from './plan/index.js';
+export * as Todo from './todo/index.js';
+export * as Timeline from './timeline/index.js';
 export * as Queue from './queue/index.js';
 export * as Confirmation from './confirmation/index.js';
 export * as InlineCitation from './inline-citation/index.js';

package/dist/ai/timeline/context.svelte.d.ts

@@ -0,0 +1,67 @@
+/** A step's lifecycle. `running` is the only one that ticks. */
+export declare const TIMELINE_STATES: readonly ["pending", "running", "done", "failed"];
+export type TimelineState = (typeof TIMELINE_STATES)[number];
+export interface TimelineStep {
+    id?: string | number;
+    label: string;
+    state: TimelineState;
+    /** Final duration in ms. Omit while running — it is derived from `startedAt`. */
+    durationMs?: number;
+    /** Epoch ms. Required for a running step's live counter; also drives the caption. */
+    startedAt?: number;
+}
+/**
+ * WHY WIDTH IS SHARED STATE RATHER THAN A PER-STEP PROP.
+ *
+ * The whole point of this bar is that a step's WIDTH is its duration — you read
+ * "installing took three times as long as cloning" without reading a number. A
+ * step cannot compute that alone; it needs the total. So the root owns the
+ * steps, and each step asks for its share.
+ *
+ * A step that took 200ms next to one that took 60s would otherwise get 0.3% of
+ * the width — narrower than its own label, and an invisible sliver is not
+ * information. That is handled by a min-width on the item rather than by
+ * adjusting the share: flexbox reserves min-widths before distributing the
+ * rest, so the short step stays legible AND the remaining steps keep their true
+ * ratios. See `grow`.
+ */
+export declare class TimelineData {
+    steps: TimelineStep[];
+    /** Live clock, ticked by the root while any step is running. */
+    now: number;
+    /** A step's elapsed ms: its final duration, or live if still running. */
+    elapsed(step: TimelineStep): number;
+    get total(): number;
+    get running(): boolean;
+    /**
+     * This step's GROW FACTOR — its duration, straight.
+     *
+     * The first version computed a percentage with a minimum share baked in, so
+     * a short step stayed clickable. It worked and it lied: with five steps the
+     * 8% floor spent 40% of the bar, so the Cloudflare run this was modelled on
+     * (6s / 2s / 19s / 16s / 4s) rendered its 9.5:1 ratio as about 3:1. Damping
+     * the proportions is not a rounding error here — the proportion IS the
+     * component. Caught by rendering it beside the reference, not by reading it.
+     *
+     * Flexbox already solves this exactly. `flex: <duration> 1 0` makes width
+     * strictly proportional to duration, and a `min-width` on the item is taken
+     * out of the distributable space FIRST by the layout algorithm — so short
+     * steps stay legible and the survivors keep their true ratios, with no floor
+     * stolen from the pool and no chance of the row overflowing.
+     *
+     * A pending step returns 0 and collapses to its min-width, which is what you
+     * want: it has taken no time, so it has earned no width.
+     */
+    grow(step: TimelineStep): number;
+}
+export declare function setTimelineData(data: TimelineData): TimelineData;
+export declare function getTimelineData(): TimelineData | null;
+/**
+ * Compact duration, the way a build log writes it: 6s, 1m 04s, 340ms.
+ *
+ * Sub-second is shown in ms because a step that takes 340ms reading as "0s" is
+ * the one case where rounding destroys the only information present.
+ */
+export declare function formatDuration(ms: number): string;
+/** Wall-clock caption under a step, matching the bar's own precision. */
+export declare function formatClock(epochMs: number): string;

package/dist/ai/timeline/context.svelte.js

@@ -0,0 +1,99 @@
+import { getContext, setContext } from 'svelte';
+/** A step's lifecycle. `running` is the only one that ticks. */
+export const TIMELINE_STATES = ['pending', 'running', 'done', 'failed'];
+/**
+ * WHY WIDTH IS SHARED STATE RATHER THAN A PER-STEP PROP.
+ *
+ * The whole point of this bar is that a step's WIDTH is its duration — you read
+ * "installing took three times as long as cloning" without reading a number. A
+ * step cannot compute that alone; it needs the total. So the root owns the
+ * steps, and each step asks for its share.
+ *
+ * A step that took 200ms next to one that took 60s would otherwise get 0.3% of
+ * the width — narrower than its own label, and an invisible sliver is not
+ * information. That is handled by a min-width on the item rather than by
+ * adjusting the share: flexbox reserves min-widths before distributing the
+ * rest, so the short step stays legible AND the remaining steps keep their true
+ * ratios. See `grow`.
+ */
+export class TimelineData {
+    steps = $state([]);
+    /** Live clock, ticked by the root while any step is running. */
+    now = $state(0);
+    /** A step's elapsed ms: its final duration, or live if still running. */
+    elapsed(step) {
+        if (step.state === 'running' && step.startedAt) {
+            return Math.max(0, this.now - step.startedAt);
+        }
+        return step.durationMs ?? 0;
+    }
+    get total() {
+        return this.steps.reduce((sum, s) => sum + this.elapsed(s), 0);
+    }
+    get running() {
+        return this.steps.some((s) => s.state === 'running');
+    }
+    /**
+     * This step's GROW FACTOR — its duration, straight.
+     *
+     * The first version computed a percentage with a minimum share baked in, so
+     * a short step stayed clickable. It worked and it lied: with five steps the
+     * 8% floor spent 40% of the bar, so the Cloudflare run this was modelled on
+     * (6s / 2s / 19s / 16s / 4s) rendered its 9.5:1 ratio as about 3:1. Damping
+     * the proportions is not a rounding error here — the proportion IS the
+     * component. Caught by rendering it beside the reference, not by reading it.
+     *
+     * Flexbox already solves this exactly. `flex: <duration> 1 0` makes width
+     * strictly proportional to duration, and a `min-width` on the item is taken
+     * out of the distributable space FIRST by the layout algorithm — so short
+     * steps stay legible and the survivors keep their true ratios, with no floor
+     * stolen from the pool and no chance of the row overflowing.
+     *
+     * A pending step returns 0 and collapses to its min-width, which is what you
+     * want: it has taken no time, so it has earned no width.
+     */
+    grow(step) {
+        return this.elapsed(step);
+    }
+}
+const KEY = Symbol('era.timeline');
+export function setTimelineData(data) {
+    setContext(KEY, data);
+    return data;
+}
+export function getTimelineData() {
+    return getContext(KEY) ?? null;
+}
+/**
+ * Compact duration, the way a build log writes it: 6s, 1m 04s, 340ms.
+ *
+ * Sub-second is shown in ms because a step that takes 340ms reading as "0s" is
+ * the one case where rounding destroys the only information present.
+ */
+export function formatDuration(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    const secs = ms / 1000;
+    if (secs < 60)
+        return `${secs < 10 ? secs.toFixed(1).replace(/\.0$/, '') : Math.round(secs)}s`;
+    const m = Math.floor(secs / 60);
+    const s = Math.round(secs % 60);
+    return `${m}m ${String(s).padStart(2, '0')}s`;
+}
+/** Wall-clock caption under a step, matching the bar's own precision. */
+export function formatClock(epochMs) {
+    // Intl rather than `new Date(...)` getters: the lint rightly bans a mutable
+    // Date here (a reactive component holding one is a stale-read waiting to
+    // happen), and this is a pure format of a number that is never stored.
+    // hourCycle h23 keeps it 24-hour regardless of locale, because this caption
+    // is read against a log file, not a wall clock.
+    const parts = new Intl.DateTimeFormat(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        fractionalSecondDigits: 3,
+        hourCycle: 'h23'
+    }).formatToParts(epochMs);
+    const at = (type) => parts.find((p) => p.type === type)?.value ?? '00';
+    return `${at('hour')}:${at('minute')}:${at('second')}.${at('fractionalSecond')}`;
+}

package/dist/ai/timeline/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from './timeline.svelte';
+export { default as Step } from './timeline-step.svelte';
+export { TimelineData, TIMELINE_STATES, formatDuration, formatClock, type TimelineState, type TimelineStep } from './context.svelte.js';

package/dist/ai/timeline/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './timeline.svelte';
+export { default as Step } from './timeline-step.svelte';
+export { TimelineData, TIMELINE_STATES, formatDuration, formatClock } from './context.svelte.js';

package/dist/ai/timeline/timeline-step.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+	import type { TimelineState } from './context.svelte.js';
+
+	/** Semantic tokens only — the bar follows theme and surface. */
+	const TONE: Record<TimelineState, { label: string; bar: string; icon: string }> = {
+		pending: { label: 'text-muted/60', bar: 'bg-elevated opacity-60', icon: 'text-muted' },
+		running: { label: 'text-bright', bar: 'bg-elevated', icon: 'text-primary' },
+		done: { label: 'text-muted', bar: 'bg-elevated', icon: 'text-success' },
+		failed: { label: 'text-destructive', bar: 'bg-elevated', icon: 'text-destructive' }
+	};
+
+	const ANNOUNCE: Record<TimelineState, string> = {
+		pending: 'not started',
+		running: 'in progress',
+		done: 'completed',
+		failed: 'failed'
+	};
+</script>
+
+<script lang="ts">
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { cn } from '../../utils/index.js';
+	import {
+		getTimelineData,
+		formatDuration,
+		formatClock,
+		type TimelineStep
+	} from './context.svelte.js';
+
+	let {
+		step,
+		showClock = true,
+		class: className
+	}: { step: TimelineStep; showClock?: boolean; class?: string } = $props();
+
+	const data = getTimelineData();
+	const tone = $derived(TONE[step.state]);
+	const elapsed = $derived(data?.elapsed(step) ?? step.durationMs ?? 0);
+	const grow = $derived(data?.grow(step) ?? 0);
+</script>
+
+<!--
+	One column: label above, bar, clock below — the three rows the Cloudflare
+	build timeline uses, because each answers a different question. The label is
+	WHAT, the bar's width is HOW LONG relative to the rest, and the caption is
+	WHEN in wall-clock, which is the one you need when correlating against logs.
+
+	flex-grow IS the duration, with a zero basis, so width is strictly
+	proportional. The min-width keeps a 200ms step readable beside a 60s one —
+	flexbox reserves it before distributing the rest, so the short step stays
+	legible without stealing proportion from the others. ch rather than a tier
+	rung because the constraint is "wide enough for its own text", which is a
+	text measure, not a step on era's ladder.
+
+	It is wider when the clock shows, because the caption is the whole reason the
+	clock is there: a timestamp is what you correlate against a log, and
+	`16:20:14.…` correlates against nothing. 7ch fits the duration alone; 12ch
+	fits `16:20:14.538`.
+-->
+<div
+	class={cn('flex flex-col gap-gutter', showClock ? 'min-w-[12ch]' : 'min-w-[7ch]')}
+	style="flex: {grow} 1 0"
+>
+	<span class={cn('truncate text-body', tone.label)}>{step.label}</span>
+
+	<div
+		class={cn(
+			'flex h-control items-center justify-end gap-inset-control rounded-control px-inset-control shadow-sm outline outline-divider',
+			tone.bar,
+			className
+		)}
+	>
+		<!-- Tabular figures: the counter ticks every 100ms while running, and
+		     proportional digits make it jitter horizontally as 1s becomes 8s. -->
+		<span class="truncate font-mono text-body tabular-nums {tone.label}">
+			{elapsed > 0 || step.state !== 'pending' ? formatDuration(elapsed) : '—'}
+		</span>
+		{#if step.state === 'running'}
+			<LoaderCircle
+				class="size-icon shrink-0 {tone.icon} [animation-duration:calc(var(--era-duration)*8)] motion-safe:animate-spin"
+				aria-hidden="true"
+			/>
+		{:else if step.state === 'done'}
+			<CircleCheck class="size-icon shrink-0 {tone.icon}" aria-hidden="true" />
+		{:else if step.state === 'failed'}
+			<CircleX class="size-icon shrink-0 {tone.icon}" aria-hidden="true" />
+		{/if}
+	</div>
+
+	{#if showClock}
+		<span class="truncate font-mono text-micro text-muted tabular-nums">
+			{step.startedAt ? formatClock(step.startedAt) : ''}
+		</span>
+	{/if}
+	<span class="sr-only">{step.label}: {ANNOUNCE[step.state]}, {formatDuration(elapsed)}</span>
+</div>

package/dist/ai/timeline/timeline-step.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type TimelineStep } from './context.svelte.js';
+type $$ComponentProps = {
+    step: TimelineStep;
+    showClock?: boolean;
+    class?: string;
+};
+declare const TimelineStep: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimelineStep = ReturnType<typeof TimelineStep>;
+export default TimelineStep;

package/dist/ai/timeline/timeline.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	import { TimelineData, setTimelineData, type TimelineStep } from './context.svelte.js';
+	import Step from './timeline-step.svelte';
+
+	let {
+		steps = [],
+		tick = 100,
+		showClock = true,
+		children,
+		class: className
+	}: {
+		steps?: TimelineStep[];
+		/** Live counter interval in ms. 0 stops the clock (the counter freezes). */
+		tick?: number;
+		showClock?: boolean;
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	const data = setTimelineData(new TimelineData());
+	$effect(() => {
+		data.steps = steps;
+	});
+
+	/*
+	 * ONE CLOCK FOR THE WHOLE BAR, and only while something is running.
+	 *
+	 * The naive version puts an interval in each running step. There is only
+	 * ever one running step in a build, so that looks equivalent — until a step
+	 * finishes and the next starts, and the two intervals overlap, drift, and
+	 * update on different frames, which is visible as the counter stuttering at
+	 * every handover. One clock on the root also means the bar stops ticking
+	 * entirely once the run is done: no timer outlives the thing it measures.
+	 */
+	let timer: ReturnType<typeof setInterval> | null = null;
+	$effect(() => {
+		const shouldRun = tick > 0 && data.running;
+		if (!shouldRun) {
+			if (timer) clearInterval(timer);
+			timer = null;
+			// Settle on a final reading rather than leaving the last tick's value.
+			data.now = Date.now();
+			return;
+		}
+		data.now = Date.now();
+		timer = setInterval(() => (data.now = Date.now()), tick);
+		return () => {
+			if (timer) clearInterval(timer);
+			timer = null;
+		};
+	});
+	onDestroy(() => {
+		if (timer) clearInterval(timer);
+	});
+</script>
+
+<!--
+	A build timeline: one full-width bar cut into a segment per step, where a
+	segment's WIDTH is how long that step took. You read "installing took three
+	times as long as cloning" without reading a number — which is the thing a
+	list of durations cannot do and the reason this is a component rather than a
+	table.
+
+	role="list" with the steps as items: this is a sequence of labelled states,
+	and without it a screen reader gets a wall of unrelated numbers. Each step
+	carries its own sr-only summary because the visual encoding — width — is
+	exactly the part that does not survive being read aloud.
+-->
+<div
+	role="list"
+	aria-label="Build timeline"
+	class={cn('flex w-full items-start gap-gutter', className)}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#each data.steps as step, i (step.id ?? i)}
+			<div role="listitem" class="contents"><Step {step} {showClock} /></div>
+		{/each}
+	{/if}
+</div>

package/dist/ai/timeline/timeline.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type TimelineStep } from './context.svelte.js';
+type $$ComponentProps = {
+    steps?: TimelineStep[];
+    /** Live counter interval in ms. 0 stops the clock (the counter freezes). */
+    tick?: number;
+    showClock?: boolean;
+    children?: Snippet;
+    class?: string;
+};
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/ai/todo/context.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The four states a plan item can be in.
+ *
+ * Deliberately the same four (and the same spellings) that agent runtimes
+ * already emit — `pending` / `in_progress` / `completed` / `cancelled` — so a
+ * consumer maps nothing. A UI vocabulary that disagrees with the protocol's is
+ * a translation layer every call site has to write.
+ */
+export declare const TODO_STATUSES: readonly ["pending", "in_progress", "completed", "cancelled"];
+export type TodoStatus = (typeof TODO_STATUSES)[number];
+export interface TodoItem {
+    /** Stable identity. Falls back to the index when absent. */
+    id?: string | number;
+    content: string;
+    status: TodoStatus;
+}
+/**
+ * WHY THE COUNTS COME FROM CONTEXT RATHER THAN FROM THE CALLER.
+ *
+ * The obvious shape is `<Todo.Header done={3} total={5} />`, and it is wrong in
+ * the specific way this library keeps finding: it is a second copy of a derived
+ * truth. The header and the list would each be told the plan separately, and
+ * they drift the first time a caller filters the list, or renders a subset, or
+ * updates one and not the other — a progress count that disagrees with the rows
+ * under it, with nothing to catch it.
+ *
+ * Root owns the array; the header and the list read the SAME array. There is
+ * one plan and every part renders from it.
+ */
+export declare class TodoState {
+    todos: TodoItem[];
+    /** Cancelled counts as resolved: it is done being worked on. */
+    get done(): number;
+    get total(): number;
+    /** The one item being worked on, or null. */
+    get active(): TodoItem | null;
+    get complete(): boolean;
+    /** 0–100, for the progress meter. */
+    get percent(): number;
+}
+export declare function setTodoState(state: TodoState): TodoState;
+/** Null outside a Todo.Root, so a part used standalone degrades rather than throws. */
+export declare function getTodoState(): TodoState | null;

package/dist/ai/todo/context.svelte.js

@@ -0,0 +1,53 @@
+import { getContext, setContext } from 'svelte';
+/**
+ * The four states a plan item can be in.
+ *
+ * Deliberately the same four (and the same spellings) that agent runtimes
+ * already emit — `pending` / `in_progress` / `completed` / `cancelled` — so a
+ * consumer maps nothing. A UI vocabulary that disagrees with the protocol's is
+ * a translation layer every call site has to write.
+ */
+export const TODO_STATUSES = ['pending', 'in_progress', 'completed', 'cancelled'];
+/**
+ * WHY THE COUNTS COME FROM CONTEXT RATHER THAN FROM THE CALLER.
+ *
+ * The obvious shape is `<Todo.Header done={3} total={5} />`, and it is wrong in
+ * the specific way this library keeps finding: it is a second copy of a derived
+ * truth. The header and the list would each be told the plan separately, and
+ * they drift the first time a caller filters the list, or renders a subset, or
+ * updates one and not the other — a progress count that disagrees with the rows
+ * under it, with nothing to catch it.
+ *
+ * Root owns the array; the header and the list read the SAME array. There is
+ * one plan and every part renders from it.
+ */
+export class TodoState {
+    todos = $state([]);
+    /** Cancelled counts as resolved: it is done being worked on. */
+    get done() {
+        return this.todos.filter((t) => t.status === 'completed' || t.status === 'cancelled').length;
+    }
+    get total() {
+        return this.todos.length;
+    }
+    /** The one item being worked on, or null. */
+    get active() {
+        return this.todos.find((t) => t.status === 'in_progress') ?? null;
+    }
+    get complete() {
+        return this.total > 0 && this.done === this.total;
+    }
+    /** 0–100, for the progress meter. */
+    get percent() {
+        return this.total === 0 ? 0 : (this.done / this.total) * 100;
+    }
+}
+const KEY = Symbol('era.todo');
+export function setTodoState(state) {
+    setContext(KEY, state);
+    return state;
+}
+/** Null outside a Todo.Root, so a part used standalone degrades rather than throws. */
+export function getTodoState() {
+    return getContext(KEY) ?? null;
+}

package/dist/ai/todo/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './todo.svelte';
+export { default as Header } from './todo-header.svelte';
+export { default as List } from './todo-list.svelte';
+export { default as Item } from './todo-item.svelte';
+export { TodoState, TODO_STATUSES, type TodoStatus, type TodoItem } from './context.svelte.js';

package/dist/ai/todo/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './todo.svelte';
+export { default as Header } from './todo-header.svelte';
+export { default as List } from './todo-list.svelte';
+export { default as Item } from './todo-item.svelte';
+export { TodoState, TODO_STATUSES } from './context.svelte.js';

package/dist/ai/todo/todo-header.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Collapsible } from 'bits-ui';
+	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { Badge } from '../../ui/badge/index.js';
+	import { cn } from '../../utils/index.js';
+	import { getTodoState } from './context.svelte.js';
+
+	let {
+		title = 'Plan',
+		children,
+		class: className
+	}: { title?: string; children?: Snippet; class?: string } = $props();
+
+	const state = getTodoState();
+</script>
+
+<!--
+	THE COLLAPSED STATE HAS TO CARRY THE ACTIVE ITEM, which is the one thing
+	term's board got exactly right and the reason it can sit collapsed above a
+	conversation indefinitely: a header reading "Plan 3/7" tells you nothing you
+	act on, while "Plan 3/7 · running tests" is a status line. It renders only
+	when collapsed, so it never duplicates a row that is already visible.
+-->
+<Collapsible.Trigger
+	class={cn(
+		'group/todo flex h-control w-full era-interactive cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body hover:bg-highlight',
+		className
+	)}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if state?.complete}
+			<CircleCheck class="size-icon shrink-0 text-success" aria-hidden="true" />
+		{:else if state?.active}
+			<LoaderCircle
+				class="size-icon shrink-0 text-primary [animation-duration:calc(var(--era-duration)*8)] motion-safe:animate-spin"
+				aria-hidden="true"
+			/>
+		{/if}
+		<span class="font-medium text-bright">{title}</span>
+		<Badge tone={state?.complete ? 'success' : 'default'}>
+			{state?.done ?? 0}/{state?.total ?? 0}
+		</Badge>
+		<!-- Only while collapsed: expanded, the active row is right there. -->
+		{#if state?.active}
+			<span class="min-w-0 truncate text-muted group-data-[state=open]/todo:hidden">
+				{state.active.content}
+			</span>
+		{/if}
+	{/if}
+	<ChevronsUpDown class="ml-auto size-icon shrink-0 text-muted" aria-hidden="true" />
+</Collapsible.Trigger>

package/dist/ai/todo/todo-header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    children?: Snippet;
+    class?: string;
+};
+declare const TodoHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type TodoHeader = ReturnType<typeof TodoHeader>;
+export default TodoHeader;