@protoyard/ai-ui 0.0.0-stage → 1.1.0

package/LICENSE

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

package/README.md

@@ -1,3 +1,153 @@
-# Temporary Holding Version
+# @protoyard/ai-ui
+
+Svelte 5 components for prototypes that simulate AI assistants. The package renders conversations and interaction controls; it does not call a model provider, create database rows, or implement sharing itself. Mutations are callback props so the prototype can route them through its own services. Model labels and UI copy keep the simulated boundary visible.
+
+**Platform guide:** [docs/AI_KITS.md](../../docs/AI_KITS.md) (workspace, virtual threads, widget launcher→sidebar→fullscreen, voice panel). **Measured bundles and long threads:** [docs/PERFORMANCE.md → AI kits](../../docs/PERFORMANCE.md#ai-kits).
+
+## Install in a workspace prototype
+
+Add `"@protoyard/ai-ui": "workspace:*"` to the prototype dependencies. Import the styles after Tailwind and the theme/UI styles:
+
+```css
+@import 'tailwindcss';
+@import '@protoyard/themes/base.css';
+@import '@protoyard/ui/styles.css';
+@import '@protoyard/ai-ui/styles.css';
+```
+
+## Assistant workspace
+
+`AssistantWorkspace` accepts conversation summaries and the active branch's messages. Send, stop, rename, pin, folder, feedback, branch, regenerate, edit and share operations are callbacks. The component does not persist changes. `onShare` must return a URL created by the consuming prototype; the UI then offers a copy action.
+
+The workspace renders its conversation through `MessageList`, which is `@texuli/chat`'s `MessageList`: it virtualizes long threads, keeps the visible message anchored as streamed content changes and offers "Jump to latest". ai-ui restores the first message in view and its offset from session storage when the same conversation is reopened in the tab (and reopens at the latest message when the reader left it at the bottom). A reopened position is held until it settles, even when late content (a chart answer, an image) resizes the thread. Editing a message calls `onEditMessage` only when its text changed: "Save and resend" with the same text closes the editor (`@texuli/chat`'s inline edit), and Regenerate is the way to ask again for the last reply. The saved position is presentation state; conversation messages remain owned by the prototype.
+
+```svelte
+<script lang="ts">
+  import { AssistantWorkspace, type AssistantConversation, type AssistantMessage, type AssistantSendInput } from '@protoyard/ai-ui';
+
+  let conversations: AssistantConversation[] = $state([]);
+  let messages: AssistantMessage[] = $state([]);
+  let streaming = $state(false);
+
+  async function send(conversationId: string, input: AssistantSendInput) {
+    // A real prototype calls its own service and persists its own attachment metadata.
+    await assistantService.send(conversationId, input);
+  }
+</script>
+
+<AssistantWorkspace
+  {conversations}
+  {messages}
+  {streaming}
+  onSend={send}
+  onStop={() => assistantService.stop()}
+  onRenameConversation={(id, title) => assistantService.rename(id, title)}
+  onTogglePin={(id) => assistantService.togglePin(id)}
+/>
+```
+
+The composer supports Enter to send, Shift+Enter for a newline, Escape to stop a stream, model selection, file selection, slash-command suggestions, and @mention suggestions. The parent owns streaming state and should update `messages` as deterministic chunks arrive. `RichAnswer` renders the plain-data AST from `parseMarkdown` using text nodes and Svelte elements; it never uses `{@html}`. `CanvasPanel` displays code or editable document text in a responsive side panel.
+
+**Scrollable code regions.** Overflowing `<pre>` blocks in `RichAnswer` (fenced code), `ChartAnswer` (invalid chart data), and `CanvasPanel` (code kind) use `tabindex="0"` and an `aria-label`, matching the ui-kit `CodeBlock` pattern, so keyboard users can reach them (axe `scrollable-region-focusable` / WCAG 2.1.1). Covered by `packages/ai-ui/tests/scroll-regions.test.ts`.
+
+**Chart answers.** `RichAnswer` parses with `{ charts: true }`.
+- A ```` ```chart ```` fence (see `@protoyard/ai/chart`) shows "Preparing
+  chart…" while it streams.
+- When the fence closes, `ChartAnswer` loads on demand. It validates the spec,
+  shows a table of the values at once, then the matching `@protoyard/charts-ui`
+  chart (bar, line, area, donut, pie or funnel), which brings keyboard
+  navigation, tooltips and its own table toggle.
+- An invalid spec shows a note with the reason and the raw data as text.
+- The charts kit and the zod schema are lazy chunks; only the small parser and
+  renderer branch ship with `RichAnswer`. In nova-assistant-demo initial JS
+  went from 169.40 KB to 169.93 KB gzip.
+- `styles.css` registers the charts-ui class sources, so prototypes need no
+  extra import.
+
+Conversation folder controls require `folders`, `onCreateFolder`, and `onMoveToFolder` callbacks. Features without a callback are disabled. The caller supplies `onRegenerate`, `onEditMessage`, `onBranchChange`, `onFeedback`, and `onShare` only when those operations are implemented.
+
+All components use Svelte 5 runes and theme token utility classes. Import `styles.css` to register this package's class sources with Tailwind.
+
+### Built on Texuli
+
+The list is `@texuli/chat`'s `MessageList` (per-message actions snippet, inline edit, stream follow) and the composer is its `Composer` (stop and Escape while streaming, keydown hook, attachments and actions snippets), and every control is a `texuli` component: `Button`/`IconButton`, `CopyButton`, `Textarea`/`Input` (the attachment picker is a file `Input`), `Select`, `Checkbox`/`RadioGroup`, `Field`, `Card`, `Badge`/`Tag`, `Table`, `Code`, `Kbd`, `DropdownMenu` and `EmptyState`. Lucide glyphs render through `LucideIcon` from `texuli/icons/lucide` (or `Icon` for Texuli's built-in names). ai-ui keeps what is assistant-specific: slash and mention suggestions, the model choice, feedback, branches and regenerate, and the reading position per conversation; the public props are unchanged. Rich answers are still parsed by `@protoyard/ai` (`parseMarkdown`) and render as text, never HTML. Components accept data-only messages from `@protoyard/ai`; no credentials, provider SDKs, generated models or external network calls are included.
+
+## Simulated voice mode
+
+Load the voice panel from its lazy subpath when the user opens voice mode:
+
+```ts
+const { VoiceMode } = await import('@protoyard/ai-ui/voice');
+```
+
+Pass the injected `AiClock`, scripted transcript options, the latest simulated assistant reply and an `onTranscript` handler. Captions are always visible. Browser `speechSynthesis` speaks replies locally when available; otherwise output stays muted and the reply caption remains visible. The panel does not request a microphone by default. A consumer may opt into showing the local mic level meter; enabling it asks for microphone permission and reads amplitude only with Web Audio, without recording, storing or uploading audio. Stop the meter to release its stream; component teardown also stops it.
+
+## Widget modes
+
+```ts
+const { AssistantWidget } = await import('@protoyard/ai-ui/widget');
+```
+
+`AssistantWidget` hosts the same workspace callbacks inside **launcher → sidebar → fullscreen** chrome. The panel module loads on first open. Mode is stored per `prototypeId` in `localStorage` when the browser allows it. Escape collapses one level. No model or network call is introduced by the widget shell.
+
+## Package output
+
+The repository keeps source exports for workspace development. `pnpm build:packages --filter svelte` creates the compiled ESM, declarations and Svelte components under `dist/` that the packed manifest exposes.
+
+
+## Suggestion approvals (lazy)
+
+Import from `@protoyard/ai-ui/approvals` so the approval surface stays out of the
+assistant boot chunk. Pair with `@protoyard/ai/approvals` pure helpers.
+
+| Export | Purpose |
+| --- | --- |
+| `SuggestionCard` | Waiting or decided suggestion with evidence and decision buttons |
+| `ChatApprovalCard` | Compact chat-row approval |
+| `AutonomyLevelPicker` | Per-area autonomy radios (`setLevel` via `onChange`) |
+| `AuditTrail` | Newest-first audit table |
+
+Callbacks are required for every decision. Show pending state is built in.
+Label the UI as simulated — these controls are prototype UX, not security.
+
+```ts
+import {
+  AuditTrail,
+  AutonomyLevelPicker,
+  ChatApprovalCard,
+  SuggestionCard,
+} from '@protoyard/ai-ui/approvals';
+```
+
+Bundle note: the approvals subpath is optional; assistant workspace entry graphs
+do not import it until a screen does.
+
+## Chat message blocks (lazy)
+
+Import `ChatMessageBlocks` from `@protoyard/ai-ui/messages` to render
+`protoyard.message@1` messages from `@protoyard/ai/messages`. It renders text
+(plain or safe markdown), buttons with inline confirmations, selects, forms,
+tables, link previews, attachments and the fallback for unknown blocks.
+
+```svelte
+<script lang="ts">
+import { ChatMessageBlocks, type MessageActionEvent } from '@protoyard/ai-ui/messages';
+
+let { message, services } = $props();
+const onAction = (event: MessageActionEvent) => services.chat.respond(event);
+</script>
+
+<ChatMessageBlocks {message} {onAction} onOpenAttachment={(file) => services.files.open(file.id)} />
+```
+
+- **Validation:** input is always validated with `parseChatMessage`. An invalid
+  message shows a short note and none of its content.
+- **Actions:** buttons, selects and forms report one typed `MessageActionEvent`
+  (`kind: "button" | "select" | "form"`) through `onAction`. The returned
+  promise drives pending, error and done feedback. Without `onAction` the
+  controls are disabled with a note.
+- **No data writes:** the component never writes data. Route every action
+  through a service (`session.assert` → zod → `environment.run`).
+- **Size:** about 13.6 KB gzip over `RichAnswer` (zod external), and only for
+  screens that import the subpath.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/MessageList.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+import { ArrowLeft, ArrowRight, ChevronUp, RefreshCw, ThumbsDown, ThumbsUp } from '@lucide/svelte';
+import { type ChatMessage, MessageList as TexuliMessageList } from '@texuli/chat';
+import { Badge } from 'texuli/badge';
+import { Button, IconButton } from 'texuli/button';
+import { LucideIcon } from 'texuli/icons/lucide';
+import RichAnswer from './components/RichAnswer.svelte';
+import { loadReadingAnchor, readingAnchorKey, saveReadingAnchor } from './scroll-anchor.js';
+import type { AssistantMessage, FeedbackRating } from './types.js';
+
+interface Props {
+  messages: readonly AssistantMessage[];
+  conversationId: string;
+  streaming?: boolean;
+  onRegenerate?: () => void;
+  onEditMessage?: (messageId: string, content: string) => void;
+  onBranchChange?: (messageId: string, direction: -1 | 1) => void;
+  onFeedback?: (messageId: string, rating: FeedbackRating) => void;
+}
+
+let {
+  messages,
+  conversationId,
+  streaming = false,
+  onRegenerate,
+  onEditMessage,
+  onBranchChange,
+  onFeedback,
+}: Props = $props();
+
+const USER = { id: 'user', name: 'You' };
+const ASSISTANT = { id: 'assistant', name: 'Assistant' };
+
+const lastAssistantId = $derived(
+  [...messages].reverse().find((message) => message.role === 'assistant')?.id
+);
+const byId = $derived(new Map(messages.map((message) => [message.id, message])));
+const chatMessages = $derived(
+  messages.map(
+    (message): ChatMessage => ({
+      id: message.id,
+      author: message.role === 'user' ? USER : ASSISTANT,
+      body: message.content,
+      at: message.createdAt,
+      streaming: streaming && message.id === lastAssistantId,
+    })
+  )
+);
+const storageKey = $derived(readingAnchorKey(conversationId));
+</script>
+
+<!--
+  @texuli/chat's MessageList: virtual window, stream follow, jump to latest,
+  per-message actions, inline edit, full-width day separators (G70) and the
+  reading position (G71). ai-ui keeps its names ("Conversation messages",
+  "Your message", "Assistant message") that hosts and E2E address, the rich
+  answer body, and where each conversation's position is stored: the list is
+  keyed by conversation, so switching remounts it with that conversation's
+  saved anchor, and Texuli restores it.
+-->
+<div class="@container flex min-h-0 flex-1 flex-col overflow-hidden">
+  {#key conversationId}
+    <TexuliMessageList
+      messages={chatMessages}
+      currentUserId={USER.id}
+      label="Conversation messages"
+      emptyText="No messages yet. Ask the simulated assistant anything."
+      labels={{ editInput: 'Edit your message', saveEdit: 'Save and resend' }}
+      onEdit={onEditMessage ? (message, body) => onEditMessage(message.id, body) : undefined}
+      anchor={loadReadingAnchor(storageKey)}
+      onAnchorChange={(next) => saveReadingAnchor(storageKey, next)}
+      class="px-4 py-5 @xl:px-8"
+    >
+      {#snippet body(chat)}
+        {@const message = byId.get(chat.id)}
+        {#if message?.role === 'assistant'}
+          <article class="min-w-0 whitespace-normal" aria-label="Assistant message" data-message-role="assistant" data-py-message-id={chat.id}>
+            <Badge variant="outline" label="Simulated" class="mb-1" />
+            <RichAnswer content={chat.body} />
+            {#if chat.streaming}<p class="mt-2 text-xs text-muted-foreground">Writing…</p>{/if}
+          </article>
+        {:else}
+          <article class="min-w-0" aria-label="Your message" data-message-role="user" data-py-message-id={chat.id}>{chat.body}</article>
+        {/if}
+      {/snippet}
+      {#snippet actions(chat, controls)}
+        {@const message = byId.get(chat.id)}
+        {#if message?.role === 'user'}
+          {#if controls.canEdit}
+            <Button variant="ghost" size="sm" class="text-xs" aria-label="Edit your message" onclick={controls.edit}><LucideIcon icon={ChevronUp} size="xs" /> Edit</Button>
+          {/if}
+        {:else if message}
+          <div class="flex flex-wrap items-center gap-1 text-xs text-muted-foreground">
+            {#if onFeedback}
+              <Button variant="ghost" size="sm" class={message.feedback === 'up' ? 'text-primary' : ''} aria-label="Helpful response" aria-pressed={message.feedback === 'up'} onclick={() => onFeedback?.(message.id, 'up')}><LucideIcon icon={ThumbsUp} size="xs" />Helpful</Button>
+              <Button variant="ghost" size="sm" class={message.feedback === 'down' ? 'text-primary' : ''} aria-label="Not helpful response" aria-pressed={message.feedback === 'down'} onclick={() => onFeedback?.(message.id, 'down')}><LucideIcon icon={ThumbsDown} size="xs" />Not helpful</Button>
+            {/if}
+            {#if message.branchCount && message.branchCount > 1}
+              <span class="ml-1 inline-flex items-center gap-1">
+                <IconButton variant="ghost" size="sm" label="Previous response version" disabled={message.branchIndex === 0 || !onBranchChange} onclick={() => onBranchChange?.(message.id, -1)}><LucideIcon icon={ArrowLeft} size="xs" /></IconButton>
+                <span>{(message.branchIndex ?? 0) + 1} / {message.branchCount}</span>
+                <IconButton variant="ghost" size="sm" label="Next response version" disabled={(message.branchIndex ?? 0) >= message.branchCount - 1 || !onBranchChange} onclick={() => onBranchChange?.(message.id, 1)}><LucideIcon icon={ArrowRight} size="xs" /></IconButton>
+              </span>
+            {/if}
+            {#if lastAssistantId === message.id && onRegenerate}
+              <Button variant="ghost" size="sm" disabled={streaming} aria-label="Regenerate response" onclick={onRegenerate}><LucideIcon icon={RefreshCw} size="xs" /> Regenerate</Button>
+            {/if}
+          </div>
+        {/if}
+      {/snippet}
+    </TexuliMessageList>
+  {/key}
+</div>

package/dist/MessageList.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AssistantMessage, FeedbackRating } from './types.ts';
+interface Props {
+    messages: readonly AssistantMessage[];
+    conversationId: string;
+    streaming?: boolean;
+    onRegenerate?: () => void;
+    onEditMessage?: (messageId: string, content: string) => void;
+    onBranchChange?: (messageId: string, direction: -1 | 1) => void;
+    onFeedback?: (messageId: string, rating: FeedbackRating) => void;
+}
+declare const MessageList: import("svelte").Component<Props, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;

package/dist/approvals/AuditTrail.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { type AuditEntry, sortAudit } from '@protoyard/ai';
+import { EmptyState } from 'texuli/empty';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'texuli/table';
+import { AUDIT_ACTION_LABELS } from './labels.js';
+
+/**
+ * Newest-first audit table for suggestion decisions, on Texuli's table and
+ * empty state. Pure presentation of engine AuditEntry rows.
+ */
+let {
+  entries,
+  emptyTitle = 'No audit entries yet',
+  emptyDescription = 'When the simulated agent suggests something and people decide, rows appear here.',
+  actorName = (entry: AuditEntry) =>
+    entry.actor === 'agent' ? 'Simulated agent' : (entry.actorId ?? 'Person'),
+  formatWhen = (iso: string) => {
+    try {
+      return new Intl.DateTimeFormat(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+      }).format(new Date(iso));
+    } catch {
+      return iso;
+    }
+  },
+  class: className = '',
+}: {
+  entries: readonly AuditEntry[];
+  emptyTitle?: string;
+  emptyDescription?: string;
+  actorName?: (entry: AuditEntry) => string;
+  formatWhen?: (iso: string) => string;
+  class?: string;
+} = $props();
+
+const rows = $derived(sortAudit(entries));
+</script>
+
+<section class="grid gap-3 {className}" data-py-audit-trail aria-label="Approval audit trail">
+  <p class="m-0 text-xs text-muted-foreground">
+    Simulated audit log. Not a compliance or security record.
+  </p>
+  {#if rows.length === 0}
+    <EmptyState title={emptyTitle} description={emptyDescription} size="sm" />
+  {:else}
+    <Table density="compact" stack="sm" aria-label="Approval audit entries">
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col">When</TableHead>
+          <TableHead scope="col">Who</TableHead>
+          <TableHead scope="col">What</TableHead>
+          <TableHead scope="col">Detail</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {#each rows as entry (entry.id)}
+          <TableRow data-py-audit-row={entry.id} data-action={entry.action}>
+            <TableCell class="whitespace-nowrap text-muted-foreground">
+              <time datetime={entry.at}>{formatWhen(entry.at)}</time>
+            </TableCell>
+            <TableCell>{actorName(entry)}</TableCell>
+            <TableCell>{AUDIT_ACTION_LABELS[entry.action]}</TableCell>
+            <TableCell class="text-muted-foreground">{entry.detail}</TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  {/if}
+</section>

package/dist/approvals/AuditTrail.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type AuditEntry } from '@protoyard/ai';
+type $$ComponentProps = {
+    entries: readonly AuditEntry[];
+    emptyTitle?: string;
+    emptyDescription?: string;
+    actorName?: (entry: AuditEntry) => string;
+    formatWhen?: (iso: string) => string;
+    class?: string;
+};
+declare const AuditTrail: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuditTrail = ReturnType<typeof AuditTrail>;
+export default AuditTrail;

package/dist/approvals/AutonomyLevelPicker.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+import {
+  AUTONOMY_LEVELS,
+  type AutonomyConfig,
+  type AutonomyLevel,
+  CAP_REASON,
+  setLevel,
+} from '@protoyard/ai';
+import { Radio, RadioGroup } from 'texuli/choice';
+import { AUTONOMY_LEVEL_LABELS, areaLabel } from './labels.js';
+
+/**
+ * Per-area autonomy level radios (Texuli's card radio group). Calls `onChange`
+ * with the next config from `setLevel` (pure). Caps disable higher options.
+ * Simulated product settings.
+ */
+let {
+  config,
+  area,
+  legend = 'Autonomy level',
+  disabled = false,
+  onChange,
+  class: className = '',
+}: {
+  config: AutonomyConfig;
+  area: string;
+  legend?: string;
+  disabled?: boolean;
+  /** Required: receive the next AutonomyConfig after a level pick. */
+  onChange: (next: AutonomyConfig, level: AutonomyLevel) => unknown | Promise<unknown>;
+  class?: string;
+} = $props();
+
+let pending = $state(false);
+let error = $state('');
+const current = $derived(config.levels[area] ?? 1);
+const cap = $derived(config.caps[area]);
+
+async function pick(level: AutonomyLevel): Promise<void> {
+  if (disabled || pending || level === current) return;
+  pending = true;
+  error = '';
+  try {
+    const next = setLevel(config, area, level);
+    await Promise.resolve(onChange(next, level));
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'Could not update autonomy.';
+  } finally {
+    pending = false;
+  }
+}
+</script>
+
+<fieldset
+  class="m-0 grid gap-2 border-0 p-0 {className}"
+  data-py-autonomy-picker
+  data-area={area}
+  disabled={disabled || pending}
+>
+  <legend class="mb-1 px-0 text-sm font-semibold text-foreground">
+    {legend}
+    <span class="font-normal text-muted-foreground"> · {areaLabel(area)}</span>
+  </legend>
+  <p class="m-0 text-xs text-muted-foreground">
+    Simulated settings. Levels are not security boundaries.
+  </p>
+  <RadioGroup
+    class="grid gap-2 sm:grid-cols-2"
+    variant="card"
+    name="autonomy-{area}"
+    value={String(current)}
+    disabled={disabled || pending}
+    aria-label="{legend} for {areaLabel(area)}"
+    onValueChange={(value) => void pick(Number(value) as AutonomyLevel)}
+  >
+    {#each AUTONOMY_LEVELS as level (level)}
+      {@const meta = AUTONOMY_LEVEL_LABELS[level]}
+      {@const capped = cap !== undefined && level > cap}
+      <Radio
+        card
+        value={String(level)}
+        label={`Level ${level}: ${meta.name}`}
+        description={meta.definition}
+        disabled={capped || disabled || pending}
+      >
+        {#if capped}
+          <span class="text-xs text-muted-foreground"
+            >{area === 'external' ? CAP_REASON : `Capped at level ${String(cap)}.`}</span
+          >
+        {/if}
+      </Radio>
+    {/each}
+  </RadioGroup>
+  {#if pending}
+    <p class="m-0 text-xs text-muted-foreground" role="status" aria-live="polite">Saving…</p>
+  {/if}
+  {#if error}
+    <p class="m-0 text-sm text-destructive" role="alert">{error}</p>
+  {/if}
+</fieldset>

package/dist/approvals/AutonomyLevelPicker.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AutonomyConfig, type AutonomyLevel } from '@protoyard/ai';
+type $$ComponentProps = {
+    config: AutonomyConfig;
+    area: string;
+    legend?: string;
+    disabled?: boolean;
+    /** Required: receive the next AutonomyConfig after a level pick. */
+    onChange: (next: AutonomyConfig, level: AutonomyLevel) => unknown | Promise<unknown>;
+    class?: string;
+};
+declare const AutonomyLevelPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type AutonomyLevelPicker = ReturnType<typeof AutonomyLevelPicker>;
+export default AutonomyLevelPicker;

package/dist/approvals/ChatApprovalCard.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+import { type ApprovalActor, mayDecide, type Suggestion } from '@protoyard/ai';
+import { Button } from 'texuli/button';
+import { Card } from 'texuli/card';
+import { modeNeedsApproval } from './labels.js';
+
+/**
+ * Compact chat-row approval for a pending suggestion. Same decision callbacks
+ * as SuggestionCard; designed to sit inside a message list. Texuli card and
+ * buttons; a decision shows its pending state on its own button.
+ */
+let {
+  suggestion,
+  viewer,
+  onConfirm,
+  onApprove,
+  onDismiss,
+  class: className = '',
+}: {
+  suggestion: Suggestion;
+  viewer: ApprovalActor;
+  onConfirm?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+  onApprove?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+  onDismiss?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+  class?: string;
+} = $props();
+
+let pending = $state<'confirm' | 'approve' | 'dismiss' | null>(null);
+let error = $state('');
+
+const needsApproval = $derived(modeNeedsApproval(suggestion.mode));
+const waiting = $derived(suggestion.status === 'pending');
+
+async function run(
+  kind: 'confirm' | 'approve' | 'dismiss',
+  work: () => unknown | Promise<unknown>
+): Promise<void> {
+  if (pending) return;
+  pending = kind;
+  error = '';
+  try {
+    await Promise.resolve(work());
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'The action could not be completed.';
+  } finally {
+    pending = null;
+  }
+}
+</script>
+
+<Card
+  class="grid gap-2 p-3 text-sm {className}"
+  data-py-chat-approval
+  data-status={suggestion.status}
+  role="group"
+  aria-label="Simulated approval request"
+>
+  <p class="m-0 font-medium text-foreground">{suggestion.summary}</p>
+  {#if suggestion.preparedApplySummary}
+    <p class="m-0 text-xs text-muted-foreground">
+      Prepared: {suggestion.preparedApplySummary}
+    </p>
+  {/if}
+  <p class="m-0 text-[0.7rem] text-muted-foreground">Simulated approval · not security</p>
+
+  {#if waiting}
+    <div class="flex flex-wrap gap-2" aria-label="Approval actions">
+      {#if needsApproval && mayDecide(viewer, suggestion, 'approve') && onApprove}
+        <Button
+          size="sm"
+          variant="default"
+          autoLoading={false}
+          loading={pending === 'approve'}
+          disabled={pending !== null}
+          onclick={() => run('approve', () => onApprove(suggestion))}
+        >
+          Approve
+        </Button>
+      {:else if !needsApproval && mayDecide(viewer, suggestion, 'confirm') && onConfirm}
+        <Button
+          size="sm"
+          variant="default"
+          autoLoading={false}
+          loading={pending === 'confirm'}
+          disabled={pending !== null}
+          onclick={() => run('confirm', () => onConfirm(suggestion))}
+        >
+          Confirm
+        </Button>
+      {:else if needsApproval && !viewer.canApprove}
+        <span class="text-xs text-muted-foreground" role="status">Waiting for an approver</span>
+      {/if}
+      {#if mayDecide(viewer, suggestion, 'dismiss') && onDismiss}
+        <Button
+          size="sm"
+          variant="outline"
+          autoLoading={false}
+          loading={pending === 'dismiss'}
+          disabled={pending !== null}
+          onclick={() => run('dismiss', () => onDismiss(suggestion))}
+        >
+          Dismiss
+        </Button>
+      {/if}
+    </div>
+  {:else}
+    <p class="m-0 text-xs text-muted-foreground" role="status">
+      {suggestion.status === 'confirmed' || suggestion.status === 'auto'
+        ? 'Decided'
+        : suggestion.status === 'dismissed'
+          ? 'Dismissed'
+          : suggestion.status}
+    </p>
+  {/if}
+  {#if error}
+    <p class="m-0 text-xs text-destructive" role="alert">{error}</p>
+  {/if}
+</Card>

package/dist/approvals/ChatApprovalCard.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ApprovalActor, type Suggestion } from '@protoyard/ai';
+type $$ComponentProps = {
+    suggestion: Suggestion;
+    viewer: ApprovalActor;
+    onConfirm?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+    onApprove?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+    onDismiss?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+    class?: string;
+};
+declare const ChatApprovalCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatApprovalCard = ReturnType<typeof ChatApprovalCard>;
+export default ChatApprovalCard;