@signal9/era-ui 3.12.4 → 3.13.1

package/dist/apps/index.d.ts

@@ -16,4 +16,5 @@
  * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
  * a second app can land without a namespace churn.
  */
+export * from './llm-shell/index.js';
 export * from './notes/index.js';

package/dist/apps/index.js

@@ -16,4 +16,5 @@
  * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
  * a second app can land without a namespace churn.
  */
+export * from './llm-shell/index.js';
 export * from './notes/index.js';

package/dist/apps/llm-shell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LlmShell } from './llm-shell.svelte';
+export type { LlmBlock, LlmConversation, LlmMessage, LlmToolChip, LlmUsage } from './types.js';

package/dist/apps/llm-shell/index.js

@@ -0,0 +1 @@
+export { default as LlmShell } from './llm-shell.svelte';

package/dist/apps/llm-shell/llm-shell.svelte

@@ -0,0 +1,291 @@
+<script lang="ts">
+	/**
+	 * LLM Shell — a streaming chat console, assembled entirely from the AI suite.
+	 *
+	 * A conversation rail (rename / star / delete / time buckets), a run-status
+	 * strip, reasoning and tool steps with structured output and a runtime feed,
+	 * an editable approval gate, an error panel, a compact chip row, a markdown
+	 * response with a stream cursor, and a per-turn usage footer.
+	 *
+	 * The app owns PRESENTATION and interaction wiring only — it is deliberately
+	 * backend-free. The host owns the model: it passes conversations in, and gets
+	 * `onSend` / `onNewChat` / `onDelete` / `onStop` back. That is the same split
+	 * Notes draws with its adapter, and it is why the docs demo can drive this
+	 * with a canned stream while a real app drives it from an SDK without
+	 * touching the component.
+	 *
+	 * Every presentation the suite offers is reachable through the LlmBlock union
+	 * (see types.ts), so a host maps its stream into blocks rather than composing
+	 * AI parts by hand.
+	 */
+	import type { Snippet } from 'svelte';
+	import * as AI from '../../ai/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import Copy from '@lucide/svelte/icons/copy';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+	import Sparkles from '@lucide/svelte/icons/sparkles';
+	import Plus from '@lucide/svelte/icons/plus';
+	import { cn } from '../../utils/index.js';
+	import type { ChatStatus, LlmBlock, LlmConversation, LlmMessage, RunState } from './types.js';
+
+	let {
+		conversations = $bindable([]),
+		activeId = $bindable(''),
+		status = 'ready',
+		runStatus = 'idle',
+		suggestions = [],
+		/** Consumer owns the clock — the time bucketer takes it as an argument. */
+		now = Date.now(),
+		emptyTitle = 'LLM Shell',
+		emptyDescription = 'Ask something to get started.',
+		approvalState = $bindable('requested'),
+		placeholder = 'Send a message…',
+		onSend,
+		onNewChat,
+		onDelete,
+		onStop,
+		empty,
+		class: className
+	}: {
+		conversations?: LlmConversation[];
+		activeId?: string;
+		status?: ChatStatus;
+		runStatus?: RunState;
+		suggestions?: string[];
+		now?: number;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		approvalState?: AI.Confirmation.ApprovalState;
+		placeholder?: string;
+		onSend?: (text: string) => void;
+		onNewChat?: () => void;
+		onDelete?: (id: string) => void;
+		onStop?: () => void;
+		/** Replaces the built-in empty state for a conversation with no messages. */
+		empty?: Snippet;
+		class?: string;
+	} = $props();
+
+	const active = $derived(conversations.find((c) => c.id === activeId) ?? conversations[0]);
+	const groups = $derived(AI.Conversations.bucketConversations(conversations, now));
+
+	// One open chip per row is plenty — the expansion area is shared, so tracking
+	// more than the current index would render two bodies into one slot.
+	let openChip = $state<string | null>(null);
+
+	function copyText(text: string) {
+		void navigator.clipboard?.writeText(text);
+	}
+</script>
+
+<div class={cn('flex h-full min-h-0', className)}>
+	<!-- Conversation rail. The gutter (p-gutter) matches the inter-row gap so the
+	     rows sit an even gap from every edge — the same treatment the docs Library
+	     window gets via its pane bodyClass. -->
+	<aside class="hidden w-64 shrink-0 flex-col border-r border-divider p-gutter md:flex">
+		<AI.Conversations.Root>
+			{#snippet header()}
+				<Button class="w-full justify-start" onclick={() => onNewChat?.()}>
+					<Plus class="size-xs" aria-hidden="true" />
+					New chat
+				</Button>
+			{/snippet}
+			{#each groups as group (group.bucket)}
+				<AI.Conversations.Group label={group.label}>
+					{#each group.items as entry (entry.id)}
+						{@const convo = conversations.find((c) => c.id === entry.id)}
+						{#if convo}
+							<AI.Conversations.Item
+								bind:title={convo.title}
+								bind:starred={convo.starred}
+								status={convo.status}
+								active={convo.id === active?.id}
+								onSelect={() => (activeId = convo.id)}
+								onDelete={() => onDelete?.(convo.id)}
+							/>
+						{/if}
+					{/each}
+				</AI.Conversations.Group>
+			{/each}
+		</AI.Conversations.Root>
+	</aside>
+
+	<!-- Thread -->
+	<div class="flex min-w-0 flex-1 flex-col">
+		{#if runStatus !== 'idle'}
+			<div class="shrink-0 border-b border-divider px-(--era-pad-md) py-gutter">
+				<AI.RunStatus.Root
+					status={runStatus}
+					tools={{
+						complete: runStatus === 'running' ? 1 : 0,
+						total: 1,
+						running: runStatus === 'running' ? 0 : 1
+					}}
+					latest={{
+						tone: 'muted',
+						text: runStatus === 'running' ? 'streaming response…' : 'thinking…'
+					}}
+					oncancel={() => onStop?.()}
+				/>
+			</div>
+		{/if}
+
+		<AI.Conversation.Root>
+			<AI.Conversation.Content>
+				{#if !active || active.messages.length === 0}
+					{#if empty}
+						{@render empty()}
+					{:else}
+						<AI.Conversation.EmptyState title={emptyTitle} description={emptyDescription}>
+							{#snippet icon()}
+								<Sparkles class="size-md text-muted" />
+							{/snippet}
+						</AI.Conversation.EmptyState>
+					{/if}
+				{:else}
+					{#each active.messages as message (message.id)}
+						{@render messageView(message)}
+					{/each}
+				{/if}
+			</AI.Conversation.Content>
+			<AI.Conversation.ScrollButton />
+		</AI.Conversation.Root>
+
+		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-md) pt-0">
+			{#if active && active.messages.length === 0 && suggestions.length > 0}
+				<div class="pb-(--era-gap)">
+					<AI.Suggestions.Root>
+						{#each suggestions as s (s)}
+							<AI.Suggestions.Suggestion suggestion={s} onSelect={(t) => onSend?.(t)} />
+						{/each}
+					</AI.Suggestions.Root>
+				</div>
+			{/if}
+			<AI.PromptInput.Root accept="image/*" onSubmit={(m) => onSend?.(m.text)}>
+				<AI.PromptInput.Attachments />
+				<AI.PromptInput.Toolbar>
+					<AI.PromptInput.AddAttachments />
+					<AI.PromptInput.Textarea {placeholder} />
+					<AI.PromptInput.Submit {status} onStop={() => onStop?.()} />
+				</AI.PromptInput.Toolbar>
+			</AI.PromptInput.Root>
+		</div>
+	</div>
+</div>
+
+<!-- ── Render snippets ─────────────────────────────────────────────────── -->
+
+{#snippet messageView(message: LlmMessage)}
+	{#if message.role === 'user'}
+		<AI.Message.Root from="user">
+			<AI.Message.Content>{message.text}</AI.Message.Content>
+		</AI.Message.Root>
+	{:else}
+		<AI.Message.Root from="assistant">
+			{#each message.blocks ?? [] as block, i (i)}
+				{@render blockView(block)}
+			{/each}
+		</AI.Message.Root>
+	{/if}
+{/snippet}
+
+{#snippet blockView(block: LlmBlock)}
+	{#if block.kind === 'reasoning'}
+		<AI.Reasoning.Root streaming={block.streaming} bind:duration={block.duration}>
+			<AI.Reasoning.Trigger streaming={block.streaming} duration={block.duration} />
+			<AI.Reasoning.Content>
+				<p class="text-body leading-relaxed text-muted">{block.text}</p>
+			</AI.Reasoning.Content>
+		</AI.Reasoning.Root>
+	{:else if block.kind === 'tool'}
+		<AI.Tool.Root state={block.state}>
+			<AI.Tool.Header type={block.name} />
+			<AI.Tool.Content>
+				<AI.Tool.Input input={block.input} />
+				{#if block.feed}
+					<AI.Tool.Section label="trace">
+						<AI.RuntimeFeed.Root items={block.feed} />
+					</AI.Tool.Section>
+				{/if}
+				{#if block.output !== undefined}
+					<AI.Tool.Section label="output">
+						<AI.StructuredValue.Root value={block.output} />
+					</AI.Tool.Section>
+				{/if}
+			</AI.Tool.Content>
+		</AI.Tool.Root>
+	{:else if block.kind === 'tool-row'}
+		<AI.Tool.Chips>
+			{#each block.tools as tool (tool.id)}
+				<AI.Tool.Chip
+					state={tool.state}
+					active={openChip === tool.id}
+					icon={tool.icon}
+					onclick={() => (openChip = openChip === tool.id ? null : tool.id)}
+				>
+					{tool.name}
+				</AI.Tool.Chip>
+			{/each}
+			{#snippet expanded()}
+				{@const tool = block.tools.find((t) => t.id === openChip)}
+				{#if tool}
+					<div
+						class="flex min-w-0 flex-col gap-(--era-pad-sm) rounded-md bg-well p-(--era-pad-sm) shadow-well"
+					>
+						<AI.Tool.Input input={tool.input} />
+						<AI.Tool.Output output={tool.output} />
+					</div>
+				{/if}
+			{/snippet}
+		</AI.Tool.Chips>
+	{:else if block.kind === 'exec'}
+		<AI.Tool.Root state={block.exitCode ? 'output-error' : 'output-available'}>
+			<AI.Tool.Header type={block.command} />
+			<AI.Tool.Content>
+				<AI.Tool.Exec
+					command={block.command}
+					stdout={block.stdout}
+					stderr={block.stderr}
+					exitCode={block.exitCode}
+				/>
+			</AI.Tool.Content>
+		</AI.Tool.Root>
+	{:else if block.kind === 'approval'}
+		<AI.Confirmation.Root state={approvalState}>
+			Approve <span class="font-mono text-fg">{block.toolName}</span>? Review the arguments before
+			it runs.
+			<AI.Confirmation.Args controller={block.controller} />
+			<AI.Confirmation.Actions>
+				<Button variant="link" onclick={() => (approvalState = 'rejected')}>Reject</Button>
+				<Button tone="accent" onclick={() => (approvalState = 'approved')}>Approve</Button>
+			</AI.Confirmation.Actions>
+		</AI.Confirmation.Root>
+	{:else if block.kind === 'error'}
+		<AI.ErrorPanel.Root error={block.error} />
+	{:else if block.kind === 'answer'}
+		{#if block.text || block.streaming}
+			<AI.Message.Content>
+				<AI.Response content={block.text} streaming={block.streaming} />
+			</AI.Message.Content>
+		{/if}
+		{#if !block.streaming && block.text}
+			<AI.Message.Toolbar>
+				<AI.Actions.Action tooltip="Copy" onclick={() => copyText(block.text)}>
+					<Copy class="size-xs" />
+				</AI.Actions.Action>
+				<AI.Actions.Action tooltip="Regenerate" onclick={() => copyText(block.text)}>
+					<RotateCcw class="size-xs" />
+				</AI.Actions.Action>
+			</AI.Message.Toolbar>
+			{#if block.usage}
+				<AI.Message.Usage
+					tokensIn={block.usage.tokensIn}
+					tokensOut={block.usage.tokensOut}
+					model={block.usage.model}
+					cost={block.usage.cost}
+					breakdown={block.usage.breakdown}
+				/>
+			{/if}
+		{/if}
+	{/if}
+{/snippet}

package/dist/apps/llm-shell/llm-shell.svelte.d.ts

@@ -0,0 +1,44 @@
+/**
+     * LLM Shell — a streaming chat console, assembled entirely from the AI suite.
+     *
+     * A conversation rail (rename / star / delete / time buckets), a run-status
+     * strip, reasoning and tool steps with structured output and a runtime feed,
+     * an editable approval gate, an error panel, a compact chip row, a markdown
+     * response with a stream cursor, and a per-turn usage footer.
+     *
+     * The app owns PRESENTATION and interaction wiring only — it is deliberately
+     * backend-free. The host owns the model: it passes conversations in, and gets
+     * `onSend` / `onNewChat` / `onDelete` / `onStop` back. That is the same split
+     * Notes draws with its adapter, and it is why the docs demo can drive this
+     * with a canned stream while a real app drives it from an SDK without
+     * touching the component.
+     *
+     * Every presentation the suite offers is reachable through the LlmBlock union
+     * (see types.ts), so a host maps its stream into blocks rather than composing
+     * AI parts by hand.
+     */
+import type { Snippet } from 'svelte';
+import * as AI from '../../ai/index.js';
+import type { ChatStatus, LlmConversation, RunState } from './types.js';
+type $$ComponentProps = {
+    conversations?: LlmConversation[];
+    activeId?: string;
+    status?: ChatStatus;
+    runStatus?: RunState;
+    suggestions?: string[];
+    now?: number;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    approvalState?: AI.Confirmation.ApprovalState;
+    placeholder?: string;
+    onSend?: (text: string) => void;
+    onNewChat?: () => void;
+    onDelete?: (id: string) => void;
+    onStop?: () => void;
+    /** Replaces the built-in empty state for a conversation with no messages. */
+    empty?: Snippet;
+    class?: string;
+};
+declare const LlmShell: import("svelte").Component<$$ComponentProps, {}, "conversations" | "activeId" | "approvalState">;
+type LlmShell = ReturnType<typeof LlmShell>;
+export default LlmShell;

package/dist/apps/llm-shell/types.d.ts

@@ -0,0 +1,79 @@
+import type { Component } from 'svelte';
+import type { IconProps } from '@lucide/svelte';
+import type { ChatStatus, ConversationStatus, RunState, ToolState, UsageBreakdown } from '../../ai/index.js';
+import type { ApprovalController } from '../../ai/confirmation/index.js';
+import type { RuntimeFeedItemData } from '../../ai/runtime-feed/index.js';
+/** Per-turn cost footer under a finished answer. */
+export type LlmUsage = {
+    tokensIn: number;
+    tokensOut: number;
+    model: string;
+    cost: number;
+    breakdown?: UsageBreakdown;
+};
+/** One tool in a compact chip row — the projectMessages "tool burst" shape. */
+export type LlmToolChip = {
+    id: string;
+    name: string;
+    state: ToolState;
+    icon?: Component<IconProps>;
+    input?: unknown;
+    output?: unknown;
+};
+/**
+ * Everything an assistant turn can contain.
+ *
+ * The union is the app's contract: it covers every presentation the AI suite
+ * has, so a host maps its own stream into these and never renders AI parts by
+ * hand. `tool-row` is the compact chips view (one shared expansion area);
+ * `tool` is the full expanded step with input, trace and output.
+ */
+export type LlmBlock = {
+    kind: 'reasoning';
+    text: string;
+    duration: number;
+    streaming: boolean;
+} | {
+    kind: 'tool';
+    name: string;
+    input: unknown;
+    output?: unknown;
+    state: ToolState;
+    feed?: RuntimeFeedItemData[];
+} | {
+    kind: 'tool-row';
+    tools: LlmToolChip[];
+} | {
+    kind: 'exec';
+    command: string;
+    stdout?: string;
+    stderr?: string;
+    exitCode?: number;
+} | {
+    kind: 'approval';
+    toolName: string;
+    controller: ApprovalController;
+} | {
+    kind: 'error';
+    error: unknown;
+} | {
+    kind: 'answer';
+    text: string;
+    streaming: boolean;
+    usage?: LlmUsage;
+};
+export type LlmMessage = {
+    id: number | string;
+    role: 'user' | 'assistant';
+    text?: string;
+    blocks?: LlmBlock[];
+};
+export type LlmConversation = {
+    id: string;
+    title: string;
+    updatedAt: number;
+    starred?: boolean;
+    status?: ConversationStatus;
+    messages: LlmMessage[];
+};
+export type { ChatStatus, RunState };

package/dist/apps/llm-shell/types.js

@@ -0,0 +1 @@
+export {};

package/dist/apps/notes/note-editor.svelte

@@ -457,7 +457,17 @@
 	.era-notes-prose :global(.tiptap .column-resize-handle) {
 		background-color: var(--color-primary);
 	}
-	.era-notes-prose :global(.tiptap ::selection) {
-		background: var(--color-4);
-	}
+	/* NO ::selection rule here, deliberately.
+	 *
+	 * era owns text selection as a surface token contract — --era-selection-bg /
+	 * -fg / -shadow (surfaces/base.css), which is how flat gets inverse video,
+	 * glass a glowing wash, and bevel an opaque accent bar. This file used to
+	 * override it with `background: var(--color-4)` and no `color`, which threw
+	 * all of that away AND left body text on a mid-scale grey: the band barely
+	 * separated from the page and the glyphs sat on top of it at whatever
+	 * contrast happened to fall out. Dropping the override restores both the
+	 * contrast (bright fill, --color-1 glyphs) and the per-surface treatment.
+	 *
+	 * The ProseMirror overrides above are still needed — those replace hardcoded
+	 * library chrome that no era token would otherwise reach. */
 </style>

package/dist/apps/notes/notes.svelte

@@ -223,7 +223,7 @@
 									{#if note.icon}
 										{note.icon}
 									{:else}
-										<FileText class="size-xs text-muted" />
+										<FileText class="size-(--era-icon-xxs) text-muted" />
 									{/if}
 								</span>
 
@@ -232,7 +232,9 @@
 								<!-- One cell, three occupants: the age at rest, the actions on
 								     hover. Swapping them in place keeps the row from reflowing. -->
 								<span class="shrink-0 text-muted group-hover:hidden">
-									{#if note.pinned}<Pin class="size-xs" />{:else}{formatAge(note.updatedAt)}{/if}
+									{#if note.pinned}<Pin class="size-(--era-icon-xxs)" />{:else}{formatAge(
+											note.updatedAt
+										)}{/if}
 								</span>
 								<span class="hidden shrink-0 items-center gap-(--era-xs-inset-md) group-hover:flex">
 									<Button
@@ -276,9 +278,15 @@
 	<!-- Document pane -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if selected}
-			<Bar class="shrink-0 rounded-none border-b border-divider-faded">
+			<!-- md and xxs-padded, exactly like the sidebar's filter bar: the two
+			     headers sit side by side across the top of the app, so an lg bar
+			     here left the document header 8px taller than the list header. -->
+			<Bar
+				size="md"
+				class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
+			>
 				<Popover.Root bind:open={iconPickerOpen}>
-					<Popover.Trigger icon aria-label="Change icon" title="Change icon">
+					<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
 						{#if selected.icon}
 							<span aria-hidden="true">{selected.icon}</span>
 						{:else}
@@ -321,8 +329,11 @@
 					</Popover.Content>
 				</Popover.Root>
 
+				<!-- Chromeless, like the filter input: an h-md Input inside an h-md bar
+				     fills it edge to edge, so the well would draw a box with no room
+				     around it. The bar is the container. -->
 				<Input
-					class="min-w-0 flex-1 bg-transparent shadow-none"
+					class="h-full min-w-0 flex-1 bg-transparent px-0 shadow-none"
 					aria-label="Note title"
 					placeholder="Untitled"
 					value={selected.title}

package/dist/generated-docs/llms-full.txt

@@ -566,14 +566,6 @@ Make any element draggable with @neodrag/svelte v3.
 
 <!-- end: draggable -->
 
-<!-- begin: llm-shell -->
-
-# LLM Shell
-
-A full chat console — conversation rail, streaming, tools, approvals.
-
-<!-- end: llm-shell -->
-
 <!-- begin: os -->
 
 # OS Shell
@@ -590,6 +582,14 @@ Release history — every version, grouped by change type.
 
 <!-- end: changelog -->
 
+<!-- begin: llm-shell -->
+
+# LLM Shell
+
+A full chat console — conversation rail, streaming, tools, approvals.
+
+<!-- end: llm-shell -->
+
 <!-- begin: notes -->
 
 # Notes

package/dist/generated-docs/llms.txt

@@ -31,7 +31,7 @@ Full concatenated reference: `{{ORIGIN}}/llms-full.txt`.
 
 ## Components
 
-getting-started, spacing, surfaces, measurements, text, utilities, draggable, llm-shell, os, changelog, notes, aspect-ratio, badge, avatar, bar, button, button-group, pane, card, chip, code-block, copy-button, cycle, kv, separator, sheet, skeleton, switch, toggle, accordion, alert-dialog, calendar, checkbox, collapsible, combobox, command, command-bar, step, context-menu, date-field, date-picker, date-range-field, date-range-picker, dialog, dropdown-menu, file-upload, scroll-area, input, link-preview, label, logo, menu, menubar, meter, navigation-menu, mode, pagination, pin-input, popover, progress, range-calendar, radio-group, rating-group, select, slider, table, tabs, time-field, time-range-field, toggle-group, toolbar, video-player, tooltip
+getting-started, spacing, surfaces, measurements, text, utilities, draggable, os, changelog, llm-shell, notes, aspect-ratio, badge, avatar, bar, button, button-group, pane, card, chip, code-block, copy-button, cycle, kv, separator, sheet, skeleton, switch, toggle, accordion, alert-dialog, calendar, checkbox, collapsible, combobox, command, command-bar, step, context-menu, date-field, date-picker, date-range-field, date-range-picker, dialog, dropdown-menu, file-upload, scroll-area, input, link-preview, label, logo, menu, menubar, meter, navigation-menu, mode, pagination, pin-input, popover, progress, range-calendar, radio-group, rating-group, select, slider, table, tabs, time-field, time-range-field, toggle-group, toolbar, video-player, tooltip
 
 ## CSS utilities
 

package/dist/generated-docs/manifest.json

@@ -76,14 +76,6 @@
       "sections": [],
       "file": "draggable.md"
     },
-    {
-      "slug": "llm-shell",
-      "title": "LLM Shell",
-      "summary": "A full chat console — conversation rail, streaming, tools, approvals.",
-      "tokenEstimate": 21,
-      "sections": [],
-      "file": "llm-shell.md"
-    },
     {
       "slug": "os",
       "title": "OS Shell",
@@ -100,6 +92,14 @@
       "sections": [],
       "file": "changelog.md"
     },
+    {
+      "slug": "llm-shell",
+      "title": "LLM Shell",
+      "summary": "A full chat console — conversation rail, streaming, tools, approvals.",
+      "tokenEstimate": 21,
+      "sections": [],
+      "file": "llm-shell.md"
+    },
     {
       "slug": "notes",
       "title": "Notes",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "3.12.4",
+	"version": "3.13.1",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -68,6 +68,11 @@
 			"svelte": "./dist/apps/index.js",
 			"default": "./dist/apps/index.js"
 		},
+		"./apps/llm-shell": {
+			"types": "./dist/apps/llm-shell/index.d.ts",
+			"svelte": "./dist/apps/llm-shell/index.js",
+			"default": "./dist/apps/llm-shell/index.js"
+		},
 		"./apps/notes": {
 			"types": "./dist/apps/notes/index.d.ts",
 			"svelte": "./dist/apps/notes/index.js",