@signal9/era-ui 34.2.9 → 34.3.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [34.3.0](https://github.com/sig-nine/era-ui/compare/v34.2.9...v34.3.0) (2026-08-25)
+
+### Features
+
+* **ai:** generalize durable provider primitives ([808f9e3](https://github.com/sig-nine/era-ui/commit/808f9e3ff5d0446cc80d9e020c9fdf1259ce934e))
+
 ## [34.2.9](https://github.com/sig-nine/era-ui/compare/v34.2.8...v34.2.9) (2026-08-25)
 
 ### Bug Fixes

package/dist/ai/conversation/conversation-scroll-button.svelte

@@ -16,9 +16,9 @@
 	>
 		<Button
 			icon
-			size="control"
+			size="pill"
 			aria-label="Scroll to bottom"
-			class="rounded-full shadow-lg"
+			class="shadow-lg"
 			onclick={() => stick.repin()}
 		>
 			<ArrowDown class="size-icon" />

package/dist/ai/conversations/conversations-item.svelte

@@ -13,10 +13,16 @@
 
 	let {
 		title = $bindable(''),
+		id,
 		starred = $bindable(false),
 		status,
+		childStatus,
+		role,
+		depth = 0,
+		rootActive = false,
 		active = false,
 		leading,
+		actions,
 		onSelect,
 		onRename,
 		onStar,
@@ -25,16 +31,28 @@
 		class: className,
 		...restProps
 	}: Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+		/** Stable consumer-owned identity, exposed as data-conversation-id. */
+		id?: string;
 		/** Conversation label; double-click to rename in place. Bindable. */
 		title?: string;
 		/** Bindable star state; the rail's star button toggles it. */
 		starred?: boolean;
 		/** Drives the status dot tone; omit for no dot. */
 		status?: ConversationStatus;
+		/** Separate delegated-child status mark. */
+		childStatus?: ConversationStatus;
+		/** Optional visible role label. */
+		role?: string;
+		/** Nesting depth; indentation follows the density axis. */
+		depth?: number;
+		/** Marks a root whose active child owns the current work. */
+		rootActive?: boolean;
 		/** Highlighted as the open conversation. */
 		active?: boolean;
 		/** Overrides the leading icon (e.g. an expand chevron). */
 		leading?: Snippet;
+		/** Consumer-owned actions, rendered ahead of built-in row actions. */
+		actions?: Snippet;
 		/** Row activated (click / Enter on the title). */
 		onSelect?: () => void;
 		/** Fired after a non-empty rename commits, with the new title. */
@@ -127,7 +145,13 @@
 </script>
 
 <div
+	data-conversation-id={id}
 	data-active={active || undefined}
+	data-root-active={rootActive || undefined}
+	data-depth={depth || undefined}
+	style:padding-inline-start={depth > 0
+		? `calc(var(--era-inset-control) + ${Math.max(0, depth)} * var(--era-sp))`
+		: undefined}
 	class={cn(
 		// The trailing buttons are pill-tier icon buttons: h-pill box + h-icon glyph =
 		// 2px of air around the glyph (the icon tier would hug it flush — density.css:
@@ -167,6 +191,20 @@
 			aria-hidden="true"
 		></span>
 	{/if}
+	{#if role}
+		<span
+			class="shrink-0 text-[0.625rem] era-text-trim-caps tracking-[0.12em] text-muted uppercase"
+		>
+			{role}
+		</span>
+	{/if}
+	{#if childStatus}
+		<span
+			class={cn('size-gutter shrink-0 rounded-full', DOT[childStatus].class)}
+			title={DOT[childStatus].label}
+			aria-label={`Child: ${DOT[childStatus].label}`}
+		></span>
+	{/if}
 
 	{#if editing}
 		<!-- `bare`: the row is already the field's container, so the input brings no
@@ -201,6 +239,7 @@
 		data-rail
 		class="flex shrink-0 items-center gap-gutter opacity-0 group-hover/row:opacity-100 focus-within:opacity-100"
 	>
+		{#if actions}{@render actions()}{/if}
 		<Button
 			icon
 			size="pill"

package/dist/ai/conversations/conversations-item.svelte.d.ts

@@ -2,16 +2,28 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ConversationStatus } from './conversations.svelte.js';
 type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /** Stable consumer-owned identity, exposed as data-conversation-id. */
+    id?: string;
     /** Conversation label; double-click to rename in place. Bindable. */
     title?: string;
     /** Bindable star state; the rail's star button toggles it. */
     starred?: boolean;
     /** Drives the status dot tone; omit for no dot. */
     status?: ConversationStatus;
+    /** Separate delegated-child status mark. */
+    childStatus?: ConversationStatus;
+    /** Optional visible role label. */
+    role?: string;
+    /** Nesting depth; indentation follows the density axis. */
+    depth?: number;
+    /** Marks a root whose active child owns the current work. */
+    rootActive?: boolean;
     /** Highlighted as the open conversation. */
     active?: boolean;
     /** Overrides the leading icon (e.g. an expand chevron). */
     leading?: Snippet;
+    /** Consumer-owned actions, rendered ahead of built-in row actions. */
+    actions?: Snippet;
     /** Row activated (click / Enter on the title). */
     onSelect?: () => void;
     /** Fired after a non-empty rename commits, with the new title. */

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

@@ -10,6 +10,12 @@ export interface ConversationEntry {
     updatedAt: number;
     starred?: boolean;
     status?: ConversationStatus;
+    /** Optional parent identity for consumer-owned nested conversation trees. */
+    parentId?: string;
+    /** Reader-facing role label, for example "Research" or "Sub-agent". */
+    role?: string;
+    /** Distinct child execution state when a root row summarizes delegated work. */
+    childStatus?: ConversationStatus;
 }
 /** A rendered section: a bucket, its display label, and its member rows. */
 export interface ConversationGroup {

package/dist/ai/index.d.ts

@@ -22,6 +22,7 @@ export * as Swarm from './swarm/index.js';
 export { Response, repairStreamingMarkdown } from './response/index.js';
 export { default as ContextGauge } from './context/context.svelte';
 export { default as ModelSelector } from './model-selector/model-selector.svelte';
+export type { ModelGroup, ModelOption } from './model-selector/index.js';
 export { default as OpenInChat, providers as openInProviders } from './open-in-chat/open-in-chat.svelte';
 export { default as WebPreview } from './web-preview/web-preview.svelte';
 export * as ChainOfThought from './chain-of-thought/index.js';
@@ -33,7 +34,7 @@ export { CopyButton } from '../ui/copy-button/index.js';
 export { StickToBottom } from './stick-to-bottom.svelte.js';
 export type { PromptAttachment, PromptMessage, ChatStatus } from './prompt-input/index.js';
 export type { MessageRole, MessageVersion } from './message/index.js';
-export type { ToolState } from './tool/index.js';
+export type { ToolState, ToolStatus } from './tool/index.js';
 export type { UsageBreakdown } from './message/index.js';
 export type { ConversationEntry, ConversationGroup, ConversationStatus, TimeBucket } from './conversations/index.js';
 export type { RunState, LogTone, RunTools } from './run-status/index.js';

package/dist/ai/model-selector/index.d.ts

@@ -1 +1,2 @@
 export { default as Root } from './model-selector.svelte';
+export type { ModelGroup, ModelOption } from './model-selector.svelte';

package/dist/ai/model-selector/model-selector.svelte

@@ -1,3 +1,25 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface ModelOption {
+		id: string;
+		name: string;
+		provider?: string;
+		/** Consumer-rendered local icon; preferred over any remote logo. */
+		icon?: Snippet;
+		/** Short, optional secondary detail such as context window or price tier. */
+		metadata?: string;
+		/** Optional remote logo for applications that explicitly permit it. */
+		logo?: string;
+	}
+
+	export interface ModelGroup {
+		id: string;
+		label: string;
+		models: ModelOption[];
+	}
+</script>
+
 <script lang="ts">
 	import * as Dialog from '../../ui/dialog/index.js';
 	import * as Command from '../../ui/command/index.js';
@@ -6,18 +28,26 @@
 
 	let {
 		open = $bindable(false),
-		models,
+		models = [],
+		groups,
 		value = $bindable(''),
+		offline = false,
 		onSelect,
 		class: className
 	}: {
 		open?: boolean;
-		/** `provider` keys models.dev logo slugs (e.g. `openai`, `anthropic`). */
-		models: { id: string; name: string; provider?: string }[];
+		/** Flat provider-neutral options; used as one ungrouped list unless groups is supplied. */
+		models?: ModelOption[];
+		/** Consumer-owned provider or capability groups. */
+		groups?: ModelGroup[];
 		value?: string;
-		onSelect?: (id: string) => void;
+		/** Never loads remote logo URLs; local icon snippets continue to render. */
+		offline?: boolean;
+		onSelect?: (id: string, model: ModelOption) => void;
 		class?: string;
 	} = $props();
+
+	const visibleGroups = $derived(groups ?? [{ id: 'models', label: 'Models', models }]);
 </script>
 
 <Dialog.Root bind:open>
@@ -27,33 +57,37 @@
 			<Command.List>
 				<Command.Viewport>
 					<Command.Empty>No models found.</Command.Empty>
-					<Command.Group>
-						<Command.GroupItems>
-							{#each models as m (m.id)}
-								<Command.Item
-									value={m.id}
-									keywords={[m.name, m.provider ?? '']}
-									onSelect={() => {
-										value = m.id;
-										onSelect?.(m.id);
-										open = false;
-									}}
-								>
-									{#if m.provider}
-										<img
-											src="https://models.dev/logos/{m.provider}.svg"
-											alt=""
-											class="size-icon shrink-0 dark:invert"
-										/>
-									{/if}
-									<span class="truncate">{m.name}</span>
-									{#if value === m.id}
-										<span class="ml-auto text-body text-muted">current</span>
-									{/if}
-								</Command.Item>
-							{/each}
-						</Command.GroupItems>
-					</Command.Group>
+					{#each visibleGroups as group (group.id)}
+						<Command.Group>
+							<Command.GroupHeading>{group.label}</Command.GroupHeading>
+							<Command.GroupItems>
+								{#each group.models as model (model.id)}
+									<Command.Item
+										value={model.id}
+										keywords={[model.name, model.provider ?? '', model.metadata ?? '']}
+										onSelect={() => {
+											value = model.id;
+											onSelect?.(model.id, model);
+											open = false;
+										}}
+									>
+										{#if model.icon}
+											{@render model.icon()}
+										{:else if model.logo && !offline}
+											<img src={model.logo} alt="" class="size-icon shrink-0 dark:invert" />
+										{/if}
+										<span class="min-w-0 flex-1 truncate">{model.name}</span>
+										{#if model.metadata}
+											<span class="shrink-0 text-body text-muted">{model.metadata}</span>
+										{/if}
+										{#if value === model.id}
+											<span class="shrink-0 text-body text-muted">current</span>
+										{/if}
+									</Command.Item>
+								{/each}
+							</Command.GroupItems>
+						</Command.Group>
+					{/each}
 				</Command.Viewport>
 			</Command.List>
 		</Command.Root>

package/dist/ai/model-selector/model-selector.svelte.d.ts

@@ -1,13 +1,30 @@
+import type { Snippet } from 'svelte';
+export interface ModelOption {
+    id: string;
+    name: string;
+    provider?: string;
+    /** Consumer-rendered local icon; preferred over any remote logo. */
+    icon?: Snippet;
+    /** Short, optional secondary detail such as context window or price tier. */
+    metadata?: string;
+    /** Optional remote logo for applications that explicitly permit it. */
+    logo?: string;
+}
+export interface ModelGroup {
+    id: string;
+    label: string;
+    models: ModelOption[];
+}
 type $$ComponentProps = {
     open?: boolean;
-    /** `provider` keys models.dev logo slugs (e.g. `openai`, `anthropic`). */
-    models: {
-        id: string;
-        name: string;
-        provider?: string;
-    }[];
+    /** Flat provider-neutral options; used as one ungrouped list unless groups is supplied. */
+    models?: ModelOption[];
+    /** Consumer-owned provider or capability groups. */
+    groups?: ModelGroup[];
     value?: string;
-    onSelect?: (id: string) => void;
+    /** Never loads remote logo URLs; local icon snippets continue to render. */
+    offline?: boolean;
+    onSelect?: (id: string, model: ModelOption) => void;
     class?: string;
 };
 declare const ModelSelector: import("svelte").Component<$$ComponentProps, {}, "value" | "open">;

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

@@ -1,2 +1,2 @@
 export { default as Root } from './queue.svelte';
-export { default as Item } from './queue-item.svelte';
+export { default as Item, type QueueStatus, type QueueTone } from './queue-item.svelte';

package/dist/ai/queue/queue-item.svelte

@@ -1,26 +1,83 @@
+<script lang="ts" module>
+	export type QueueStatus = 'queued' | 'running' | 'complete' | 'cancelled' | 'error';
+	export type QueueTone = 'default' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import X from '@lucide/svelte/icons/x';
+	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../utils/index.js';
 
 	let {
-		completed = false,
+		id,
+		status = 'queued',
+		tone,
+		label,
+		cancelLabel = 'Cancel queued work',
+		leading,
+		trailing,
 		children,
-		class: className
-	}: { completed?: boolean; children?: Snippet; class?: string } = $props();
+		onCancel,
+		class: className,
+		...restProps
+	}: Omit<HTMLAttributes<HTMLLIElement>, 'id'> & {
+		id: string;
+		status?: QueueStatus;
+		tone?: QueueTone;
+		label?: string;
+		cancelLabel?: string;
+		leading?: Snippet;
+		trailing?: Snippet;
+		children?: Snippet;
+		onCancel?: (id: string) => void;
+	} = $props();
+
+	const visual = $derived(
+		tone ??
+			(
+				{
+					queued: 'warning',
+					running: 'accent',
+					complete: 'success',
+					cancelled: 'default',
+					error: 'destructive'
+				} as const
+			)[status]
+	);
+	const cancellable = $derived(status === 'queued' || status === 'running');
 </script>
 
 <li
+	data-queue-id={id}
+	data-status={status}
+	aria-label={label}
 	class={cn(
-		'flex min-w-0 items-center gap-gutter rounded-control px-inset-control py-gutter text-body hover:bg-highlight',
-		completed ? 'text-muted line-through' : 'text-fg',
+		'flex min-w-0 items-center gap-gutter rounded-control px-inset-control py-gutter text-body hover:bg-highlight hover:shadow-highlight',
+		status === 'complete' || status === 'cancelled' ? 'text-muted line-through' : 'text-fg',
 		className
 	)}
+	{...restProps}
 >
+	{#if leading}{@render leading()}{/if}
 	<span
 		class={cn(
 			'size-2 shrink-0 rounded-full',
-			completed ? 'bg-success' : 'border border-divider bg-transparent'
+			visual === 'accent' && 'animate-pulse bg-primary',
+			visual === 'success' && 'bg-success',
+			visual === 'warning' && 'bg-warning',
+			visual === 'destructive' && 'bg-destructive',
+			visual === 'info' && 'bg-info',
+			visual === 'default' && 'border border-divider bg-transparent'
 		)}
+		aria-hidden="true"
 	></span>
 	<span class="min-w-0 flex-1 truncate">{@render children?.()}</span>
+	{#if trailing}{@render trailing()}{/if}
+	{#if cancellable && onCancel}
+		<Button icon size="pill" aria-label={cancelLabel} onclick={() => onCancel?.(id)}>
+			<X class="size-icon" />
+		</Button>
+	{/if}
 </li>

package/dist/ai/queue/queue-item.svelte.d.ts

@@ -1,8 +1,17 @@
+export type QueueStatus = 'queued' | 'running' | 'complete' | 'cancelled' | 'error';
+export type QueueTone = 'default' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    completed?: boolean;
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLLIElement>, 'id'> & {
+    id: string;
+    status?: QueueStatus;
+    tone?: QueueTone;
+    label?: string;
+    cancelLabel?: string;
+    leading?: Snippet;
+    trailing?: Snippet;
     children?: Snippet;
-    class?: string;
+    onCancel?: (id: string) => void;
 };
 declare const QueueItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type QueueItem = ReturnType<typeof QueueItem>;

package/dist/ai/queue/queue.svelte

@@ -1,14 +1,38 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../../utils/index.js';
-	let { children, class: className }: { children?: Snippet; class?: string } = $props();
+
+	let {
+		full = false,
+		fullLabel = 'Queue is full',
+		label = 'Queued work',
+		fullContent,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLUListElement> & {
+		full?: boolean;
+		fullLabel?: string;
+		label?: string;
+		fullContent?: Snippet;
+		children?: Snippet;
+	} = $props();
 </script>
 
-<ul
-	class={cn(
-		'flex max-h-48 flex-col gap-gutter overflow-y-auto rounded-bar bg-well p-panel shadow-sm',
-		className
-	)}
->
-	{@render children?.()}
-</ul>
+<div data-queue-full={full || undefined} class="flex min-w-0 flex-col gap-gutter">
+	{#if full}
+		{#if fullContent}
+			{@render fullContent()}
+		{:else}
+			<p role="status" class="px-inset-control text-body text-warning">{fullLabel}</p>
+		{/if}
+	{/if}
+	<ul
+		aria-label={label}
+		class={cn('flex max-h-48 flex-col gap-gutter rounded-bar bg-well p-panel shadow-sm', className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</ul>
+</div>

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

@@ -1,7 +1,11 @@
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLUListElement> & {
+    full?: boolean;
+    fullLabel?: string;
+    label?: string;
+    fullContent?: Snippet;
     children?: Snippet;
-    class?: string;
 };
 declare const Queue: import("svelte").Component<$$ComponentProps, {}, "">;
 type Queue = ReturnType<typeof Queue>;

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

@@ -1,4 +1,4 @@
-export { default as Root, type ToolState } from './tool.svelte';
+export { default as Root, toolStepStatus, type ToolState, type ToolStatus } from './tool.svelte';
 export { default as Header } from './tool-header.svelte';
 export { default as Input } from './tool-input.svelte';
 export { default as Output } from './tool-output.svelte';

package/dist/ai/tool/index.js

@@ -1,4 +1,4 @@
-export { default as Root } from './tool.svelte';
+export { default as Root, toolStepStatus } from './tool.svelte';
 export { default as Header } from './tool-header.svelte';
 export { default as Input } from './tool-input.svelte';
 export { default as Output } from './tool-output.svelte';

package/dist/ai/tool/tool-chip.svelte

@@ -2,7 +2,7 @@
 	import type { Component, Snippet } from 'svelte';
 	import Wrench from '@lucide/svelte/icons/wrench';
 	import { cn } from '../../utils/index.js';
-	import type { ToolState } from './tool.svelte';
+	import { toolStepStatus, type ToolState } from './tool.svelte';
 
 	let {
 		state: toolState = 'input-streaming',
@@ -25,17 +25,7 @@
 		class?: string;
 	} = $props();
 
-	// Same mapping tool.svelte uses to drive Step status.
-	const status = $derived(
-		(
-			{
-				'input-streaming': 'pending',
-				'input-available': 'running',
-				'output-available': 'done',
-				'output-error': 'error'
-			} as const
-		)[toolState]
-	);
+	const status = $derived(toolStepStatus(toolState));
 </script>
 
 <!-- Compact horizontal tool call: a quiet pill that brightens on hover and

package/dist/ai/tool/tool-chip.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-import type { ToolState } from './tool.svelte';
+import { type ToolState } from './tool.svelte';
 type $$ComponentProps = {
     /** AI-SDK tool lifecycle — drives the pulse and the failure dot. */
     state?: ToolState;

package/dist/ai/tool/tool.svelte

@@ -1,37 +1,67 @@
 <script lang="ts" module>
-	/** AI-SDK tool part lifecycle. */
+	export type ToolStatus =
+		'pending' | 'running' | 'complete' | 'error' | 'approval-required' | 'cancelled';
 	export type ToolState =
-		'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+		ToolStatus | 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+	export function toolStepStatus(state: ToolState): 'pending' | 'running' | 'done' | 'error' {
+		return (
+			{
+				pending: 'pending',
+				running: 'running',
+				complete: 'done',
+				error: 'error',
+				'approval-required': 'pending',
+				cancelled: 'done',
+				'input-streaming': 'pending',
+				'input-available': 'running',
+				'output-available': 'done',
+				'output-error': 'error'
+			} as const
+		)[state];
+	}
 </script>
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import * as Step from '../../ui/step/index.js';
-
 	let {
-		state: toolState = 'input-streaming',
+		status,
+		state = 'pending',
 		open = $bindable(false),
+		header,
+		input,
+		progress,
+		approval,
+		result,
+		error,
+		actions,
 		children,
 		class: className
 	}: {
+		status?: ToolStatus;
 		state?: ToolState;
 		open?: boolean;
+		header?: Snippet;
+		input?: Snippet;
+		progress?: Snippet;
+		approval?: Snippet;
+		result?: Snippet;
+		error?: Snippet;
+		actions?: Snippet;
 		children?: Snippet;
 		class?: string;
 	} = $props();
-
-	const status = $derived(
-		(
-			{
-				'input-streaming': 'pending',
-				'input-available': 'running',
-				'output-available': 'done',
-				'output-error': 'error'
-			} as const
-		)[toolState]
-	);
+	const resolved = $derived(status ?? state);
+	const stepStatus = $derived(toolStepStatus(resolved));
 </script>
 
-<Step.Root {status} bind:open class={className}>
+<Step.Root status={stepStatus} bind:open class={className} data-tool-status={resolved}>
+	{@render header?.()}
+	{@render input?.()}
+	{@render progress?.()}
+	{@render approval?.()}
+	{@render result?.()}
+	{@render error?.()}
+	{@render actions?.()}
 	{@render children?.()}
 </Step.Root>