@protoyard/ai-ui 0.0.0-stage → 1.1.1

package/dist/approvals/SuggestionCard.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">
+import {
+  type ApprovalActor,
+  mayDecide,
+  type Suggestion,
+  type SuggestionTarget,
+  statusLine,
+} from '@protoyard/ai';
+import { Badge } from 'texuli/badge';
+import { Button } from 'texuli/button';
+import { Card } from 'texuli/card';
+import { Label } from 'texuli/field';
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue } from 'texuli/select';
+import { modeNeedsApproval, SUGGESTION_STATUS_LABELS } from './labels.js';
+
+/**
+ * Evidence-backed suggestion card. Every decision is an explicit callback the
+ * prototype routes through its services. Pending feedback is local UI only.
+ * Texuli card, badge, buttons and select.
+ * Simulated — not real authority or security.
+ */
+type Decision = 'confirm' | 'approve' | 'dismiss' | 'edit';
+
+let {
+  suggestion,
+  viewer,
+  targets = [],
+  notified = false,
+  resultHref,
+  onConfirm,
+  onApprove,
+  onDismiss,
+  onEdit,
+  class: className = '',
+}: {
+  suggestion: Suggestion;
+  viewer: ApprovalActor;
+  /** Optional retarget choices for Edit. */
+  targets?: readonly SuggestionTarget[];
+  /** Whether a notify audit row already exists (status line wording). */
+  notified?: boolean;
+  resultHref?: string;
+  onConfirm?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+  onApprove?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+  onDismiss?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+  onEdit?: (suggestion: Suggestion, target: SuggestionTarget) => unknown | Promise<unknown>;
+  class?: string;
+} = $props();
+
+let pending = $state<Decision | null>(null);
+let error = $state('');
+let editOpen = $state(false);
+let pickedId = $state<string | null>(null);
+
+const needsApproval = $derived(modeNeedsApproval(suggestion.mode));
+const waiting = $derived(suggestion.status === 'pending');
+const canConfirm = $derived(waiting && !needsApproval && mayDecide(viewer, suggestion, 'confirm'));
+const canApprove = $derived(waiting && needsApproval && mayDecide(viewer, suggestion, 'approve'));
+const canDismiss = $derived(waiting && mayDecide(viewer, suggestion, 'dismiss'));
+const canEdit = $derived(waiting && mayDecide(viewer, suggestion, 'edit') && targets.length > 0);
+const line = $derived(statusLine(suggestion, viewer, notified));
+const busy = $derived(pending !== null);
+
+async function run(decision: Decision, work: () => unknown | Promise<unknown>): Promise<void> {
+  if (busy) return;
+  pending = decision;
+  error = '';
+  try {
+    await Promise.resolve(work());
+  } catch (err) {
+    error = err instanceof Error ? err.message : 'The action could not be completed.';
+  } finally {
+    pending = null;
+  }
+}
+
+function openEdit(): void {
+  pickedId = suggestion.targetId ?? targets[0]?.targetId ?? null;
+  editOpen = true;
+}
+
+function saveEdit(): void {
+  const target = targets.find((row) => row.targetId === pickedId);
+  if (!target || !onEdit) return;
+  void run('edit', () => onEdit(suggestion, target)).then(() => {
+    if (!error) editOpen = false;
+  });
+}
+</script>
+
+<Card
+  class="grid gap-3 p-4 {className}"
+  data-py-suggestion-card
+  data-status={suggestion.status}
+  data-mode={suggestion.mode}
+  aria-labelledby="suggestion-{suggestion.id}-title"
+>
+  <header class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+    <Badge variant="secondary" data-py-agent-chip>Simulated agent</Badge>
+    <span>{SUGGESTION_STATUS_LABELS[suggestion.status]}</span>
+    <span class="ml-auto text-[0.7rem]">Simulated · no real authority</span>
+  </header>
+
+  <h3 id="suggestion-{suggestion.id}-title" class="m-0 text-base font-semibold text-foreground">
+    {suggestion.summary}
+  </h3>
+
+  {#if suggestion.targetLabel || suggestion.targetKey}
+    <p class="m-0 text-sm text-muted-foreground">
+      Target:
+      <span class="font-medium text-foreground"
+        >{suggestion.targetLabel ?? suggestion.targetKey}</span
+      >
+      {#if suggestion.targetKey && suggestion.targetLabel}
+        <span class="text-muted-foreground"> ({suggestion.targetKey})</span>
+      {/if}
+    </p>
+  {/if}
+
+  {#if suggestion.preparedApplySummary || suggestion.preparedNotifySummary}
+    <dl class="m-0 grid gap-1 rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm">
+      {#if suggestion.preparedApplySummary}
+        <div>
+          <dt class="font-medium text-foreground">Prepared change</dt>
+          <dd class="m-0 text-muted-foreground">{suggestion.preparedApplySummary}</dd>
+        </div>
+      {/if}
+      {#if suggestion.preparedNotifySummary}
+        <div>
+          <dt class="font-medium text-foreground">Prepared notification</dt>
+          <dd class="m-0 text-muted-foreground">{suggestion.preparedNotifySummary}</dd>
+        </div>
+      {/if}
+    </dl>
+  {/if}
+
+  {#if waiting && needsApproval && !viewer.canApprove}
+    <p class="m-0 text-sm text-muted-foreground" role="status">Waiting for an approver.</p>
+  {/if}
+
+  {#if waiting && (canApprove || canConfirm || canDismiss || canEdit)}
+    <div class="flex flex-wrap gap-2" aria-label="Suggestion actions">
+      {#if canApprove && onApprove}
+        <Button
+          variant="default"
+          autoLoading={false}
+          loading={pending === 'approve'}
+          disabled={busy}
+          onclick={() => run('approve', () => onApprove(suggestion))}
+        >
+          Approve
+        </Button>
+      {:else if canConfirm && onConfirm}
+        <Button
+          variant="default"
+          autoLoading={false}
+          loading={pending === 'confirm'}
+          disabled={busy}
+          onclick={() => run('confirm', () => onConfirm(suggestion))}
+        >
+          Confirm
+        </Button>
+      {/if}
+      {#if canEdit && onEdit}
+        <Button variant="outline" disabled={busy} onclick={openEdit}>Edit</Button>
+      {/if}
+      {#if canDismiss && onDismiss}
+        <Button
+          variant="outline"
+          autoLoading={false}
+          loading={pending === 'dismiss'}
+          disabled={busy}
+          onclick={() => run('dismiss', () => onDismiss(suggestion))}
+        >
+          Dismiss
+        </Button>
+      {/if}
+    </div>
+  {:else if !waiting}
+    <p class="m-0 text-sm text-muted-foreground" role="status">
+      {#if suggestion.status === 'confirmed' && resultHref}
+        <a class="font-medium text-primary underline" href={resultHref}>View result</a>
+      {:else}
+        {line}
+      {/if}
+    </p>
+  {/if}
+
+  {#if pending}
+    <p class="m-0 text-xs text-muted-foreground" role="status" aria-live="polite">
+      {pending === 'approve'
+        ? 'Approving…'
+        : pending === 'dismiss'
+          ? 'Dismissing…'
+          : pending === 'edit'
+            ? 'Saving…'
+            : 'Confirming…'}
+    </p>
+  {/if}
+  {#if error}
+    <p class="m-0 text-sm text-destructive" role="alert">{error}</p>
+  {/if}
+
+  {#if editOpen}
+    <div
+      class="grid gap-3 rounded-lg border border-border bg-muted/30 p-3"
+      data-py-suggestion-edit
+    >
+      <div class="grid gap-1 text-sm">
+        <Label for="suggestion-edit-{suggestion.id}">Link to target</Label>
+        <SelectRoot
+          items={targets.map((target) => ({
+            value: target.targetId,
+            label: `${target.targetKey} — ${target.targetLabel}`,
+          }))}
+          value={pickedId ?? undefined}
+          onValueChange={(next) => {
+            pickedId = next;
+          }}
+        >
+          <SelectTrigger id="suggestion-edit-{suggestion.id}">
+            <SelectValue placeholder="Choose a target" />
+          </SelectTrigger>
+          <SelectContent>
+            {#each targets as target (target.targetId)}
+              <SelectItem value={target.targetId} label={`${target.targetKey} — ${target.targetLabel}`}
+                >{target.targetKey} — {target.targetLabel}</SelectItem
+              >
+            {/each}
+          </SelectContent>
+        </SelectRoot>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <Button
+          autoLoading={false}
+          loading={pending === 'edit'}
+          disabled={busy || !pickedId}
+          onclick={saveEdit}
+        >
+          Save
+        </Button>
+        <Button variant="outline" disabled={busy} onclick={() => (editOpen = false)}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  {/if}
+</Card>

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

@@ -0,0 +1,18 @@
+import { type ApprovalActor, type Suggestion, type SuggestionTarget } from '@protoyard/ai';
+type $$ComponentProps = {
+    suggestion: Suggestion;
+    viewer: ApprovalActor;
+    /** Optional retarget choices for Edit. */
+    targets?: readonly SuggestionTarget[];
+    /** Whether a notify audit row already exists (status line wording). */
+    notified?: boolean;
+    resultHref?: string;
+    onConfirm?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+    onApprove?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+    onDismiss?: (suggestion: Suggestion) => unknown | Promise<unknown>;
+    onEdit?: (suggestion: Suggestion, target: SuggestionTarget) => unknown | Promise<unknown>;
+    class?: string;
+};
+declare const SuggestionCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type SuggestionCard = ReturnType<typeof SuggestionCard>;
+export default SuggestionCard;

package/dist/approvals/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Suggestion approval UI for `@protoyard/ai` approval loop. Lazy subpath
+ * `@protoyard/ai-ui/approvals`. Callbacks only — prototypes own services.
+ */
+export { default as AuditTrail } from './AuditTrail.svelte';
+export { default as AutonomyLevelPicker } from './AutonomyLevelPicker.svelte';
+export { default as ChatApprovalCard } from './ChatApprovalCard.svelte';
+export { AUDIT_ACTION_LABELS, AUTONOMY_AREA_LABELS, AUTONOMY_LEVEL_LABELS, AUTONOMY_LEVELS, areaLabel, modeNeedsApproval, SUGGESTION_STATUS_LABELS, } from './labels.ts';
+export { default as SuggestionCard } from './SuggestionCard.svelte';

package/dist/approvals/index.js

@@ -0,0 +1,9 @@
+/**
+ * Suggestion approval UI for `@protoyard/ai` approval loop. Lazy subpath
+ * `@protoyard/ai-ui/approvals`. Callbacks only — prototypes own services.
+ */
+export { default as AuditTrail } from './AuditTrail.svelte';
+export { default as AutonomyLevelPicker } from './AutonomyLevelPicker.svelte';
+export { default as ChatApprovalCard } from './ChatApprovalCard.svelte';
+export { AUDIT_ACTION_LABELS, AUTONOMY_AREA_LABELS, AUTONOMY_LEVEL_LABELS, AUTONOMY_LEVELS, areaLabel, modeNeedsApproval, SUGGESTION_STATUS_LABELS, } from "./labels.js";
+export { default as SuggestionCard } from './SuggestionCard.svelte';

package/dist/approvals/labels.d.ts

@@ -0,0 +1,12 @@
+import { AUTONOMY_AREAS, AUTONOMY_LEVELS, type AuditAction, type AutonomyLevel, type PolicyMode, type SuggestionStatus } from '@protoyard/ai';
+/** Human labels for the four autonomy levels (simulated product model). */
+export declare const AUTONOMY_LEVEL_LABELS: Record<AutonomyLevel, {
+    name: string;
+    definition: string;
+}>;
+export declare const AUTONOMY_AREA_LABELS: Record<(typeof AUTONOMY_AREAS)[number], string>;
+export declare const AUDIT_ACTION_LABELS: Record<AuditAction, string>;
+export declare const SUGGESTION_STATUS_LABELS: Record<SuggestionStatus, string>;
+export declare function modeNeedsApproval(mode: PolicyMode): boolean;
+export declare function areaLabel(area: string): string;
+export { AUTONOMY_LEVELS };

package/dist/approvals/labels.js

@@ -0,0 +1,53 @@
+import { AUTONOMY_AREAS, AUTONOMY_LEVELS, } from '@protoyard/ai';
+/** Human labels for the four autonomy levels (simulated product model). */
+export const AUTONOMY_LEVEL_LABELS = {
+    1: {
+        name: 'Inform',
+        definition: 'The agent only tells the team. No waiting card.',
+    },
+    2: {
+        name: 'Suggest',
+        definition: 'The agent proposes a change and waits for a person to confirm.',
+    },
+    3: {
+        name: 'Act with approval',
+        definition: 'The agent prepares the change; an approver must approve first.',
+    },
+    4: {
+        name: 'Act within limits',
+        definition: 'The agent may apply the change on its own (still simulated).',
+    },
+};
+export const AUTONOMY_AREA_LABELS = {
+    records: 'Records',
+    notifications: 'Notifications',
+    workspace: 'Workspace',
+    external: 'External messaging',
+};
+export const AUDIT_ACTION_LABELS = {
+    suggested: 'Suggested',
+    confirmed: 'Confirmed',
+    approved: 'Approved',
+    dismissed: 'Dismissed',
+    edited: 'Edited',
+    auto_handled: 'Handled automatically',
+    notified: 'Notified',
+    informed: 'Informed',
+};
+export const SUGGESTION_STATUS_LABELS = {
+    pending: 'Waiting',
+    confirmed: 'Confirmed',
+    dismissed: 'Dismissed',
+    auto: 'Handled automatically',
+    informed: 'Informed',
+};
+export function modeNeedsApproval(mode) {
+    return mode === 'act_with_approval';
+}
+export function areaLabel(area) {
+    if (AUTONOMY_AREAS.includes(area)) {
+        return AUTONOMY_AREA_LABELS[area];
+    }
+    return area;
+}
+export { AUTONOMY_LEVELS };

package/dist/components/AssistantComposer.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+import { Paperclip } from '@lucide/svelte';
+import { AI_MODELS, type AiModel } from '@protoyard/ai';
+import { Composer } from '@texuli/chat';
+import { Tag } from 'texuli/badge';
+import { Button, IconButton } from 'texuli/button';
+import { LucideIcon } from 'texuli/icons/lucide';
+import { Input } from 'texuli/input';
+import { Select } from 'texuli/select';
+import type { AssistantSendInput } from '../types.js';
+
+interface Props {
+  models?: readonly AiModel[];
+  modelId?: string;
+  value?: string;
+  streaming?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  slashCommands?: readonly string[];
+  mentions?: readonly { id: string; label: string }[];
+  onModelChange?: (modelId: string) => void;
+  onSubmit: (input: AssistantSendInput) => unknown;
+  onStop?: () => void;
+}
+
+let {
+  models = AI_MODELS,
+  modelId = models[0]?.id ?? '',
+  value = $bindable(''),
+  streaming = false,
+  disabled = false,
+  placeholder = 'Ask anything',
+  slashCommands = ['/summarize', '/brainstorm', '/explain'],
+  mentions = [],
+  onModelChange,
+  onSubmit,
+  onStop,
+}: Props = $props();
+
+let files = $state<File[]>([]);
+let picked = $state<FileList | null>(null);
+let picker = $state<HTMLElement | null>(null);
+let root = $state<HTMLDivElement | null>(null);
+let activeSuggestion = $state(0);
+const modelItems = $derived(
+  models.map((model) => ({ value: model.id, label: `${model.name} · Simulated` }))
+);
+const trigger = $derived(/(?:^|\s)([/@][\w-]*)$/.exec(value));
+const suggestions = $derived.by(() => {
+  if (!trigger?.[1]) return [];
+  const token = trigger[1].toLowerCase();
+  if (token.startsWith('/')) {
+    return slashCommands
+      .filter((command) => command.toLowerCase().startsWith(token))
+      .slice(0, 6)
+      .map((command) => ({ id: command, label: command, kind: 'command' as const }));
+  }
+  return mentions
+    .filter((mention) => mention.label.toLowerCase().startsWith(token.slice(1)))
+    .slice(0, 6)
+    .map((mention) => ({ ...mention, kind: 'mention' as const }));
+});
+const selectedModel = $derived(models.find((model) => model.id === modelId));
+
+function chooseSuggestion(item: (typeof suggestions)[number]): void {
+  if (!trigger?.[1]) return;
+  const start = value.lastIndexOf(trigger[1]);
+  const insertion = item.kind === 'mention' ? `@${item.label} ` : `${item.label} `;
+  value = `${value.slice(0, start)}${insertion}`;
+  activeSuggestion = 0;
+  requestAnimationFrame(() => root?.querySelector('textarea')?.focus());
+}
+
+/** The composer sends the trimmed text; the model and attachments travel with it. */
+async function send(prompt: string): Promise<unknown> {
+  if (!selectedModel) return false;
+  const result = await onSubmit({ prompt, model: selectedModel, attachments: files });
+  if (result !== false) files = [];
+  return result;
+}
+
+/** The suggestion list takes the arrows and Enter; Texuli's Composer keeps Enter to send and Escape to stop. */
+function handleKeydown(event: KeyboardEvent): void {
+  if (!suggestions.length) return;
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    activeSuggestion = (activeSuggestion + 1) % suggestions.length;
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    activeSuggestion = (activeSuggestion - 1 + suggestions.length) % suggestions.length;
+  } else if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+    event.preventDefault();
+    const item = suggestions[activeSuggestion];
+    if (item) chooseSuggestion(item);
+  }
+}
+
+function addFiles(event: Event): void {
+  const input = event.currentTarget;
+  if (input instanceof HTMLInputElement && input.files)
+    files = [...files, ...Array.from(input.files)];
+  picked = null;
+}
+</script>
+
+<!--
+  @texuli/chat's Composer: Enter to send, Shift+Enter for a new line, Stop and
+  Escape while a reply streams, pending and error states. ai-ui adds the
+  slash/mention list (through its keydown hook), attachments and the model
+  choice (through its attachments and actions snippets).
+-->
+<div bind:this={root} class="@container relative mx-auto w-full max-w-3xl">
+  {#if suggestions.length}
+    <div class="absolute bottom-full left-3 z-10 mb-2 max-h-52 w-64 overflow-y-auto rounded-xl border border-border bg-elevated p-1 shadow-float" role="listbox" aria-label={trigger?.[1]?.startsWith('/') ? 'Slash commands' : 'People'}>
+      {#each suggestions as item, index (`${item.kind}-${item.id}`)}
+        <Button variant="ghost" role="option" aria-selected={index === activeSuggestion} class={`w-full justify-start ${index === activeSuggestion ? 'bg-muted' : ''}`} onclick={() => chooseSuggestion(item)}>{item.kind === 'mention' ? `@${item.label}` : item.label}</Button>
+      {/each}
+    </div>
+  {/if}
+  <Composer
+    bind:value
+    onSubmit={send}
+    {streaming}
+    {onStop}
+    disabled={disabled || !selectedModel}
+    maxRows={8}
+    onkeydown={handleKeydown}
+    labels={{
+      input: 'Message the simulated assistant',
+      placeholder,
+      hint: 'Press Enter to send. Shift plus Enter starts a new line. Type slash for commands or at sign to mention a person.',
+      send: 'Send message',
+      sending: 'Sending message',
+      stop: 'Stop response',
+      sendError: 'The message could not be sent. Your draft is still here.',
+    }}
+    class="rounded-3xl bg-surface shadow-soft"
+  >
+    {#snippet attachments()}
+      <IconButton variant="ghost" class="rounded-full" label="Attach files" {disabled} onclick={() => picker?.click()}>
+        <LucideIcon icon={Paperclip} size="sm" />
+      </IconButton>
+      <Input type="file" multiple hidden tabindex={-1} aria-label="Choose attachments" bind:ref={picker} bind:files={picked} onchange={addFiles} />
+      {#if files.length}
+        <ul class="m-0 flex list-none flex-wrap gap-2 p-0" aria-label="Attachments">
+          {#each files as file, index (`${file.name}-${index}`)}
+            <li><Tag label={file.name} onRemove={() => (files = files.filter((_, itemIndex) => itemIndex !== index))} /></li>
+          {/each}
+        </ul>
+      {/if}
+    {/snippet}
+    {#snippet actions()}
+      <span class="hidden text-[0.7rem] text-muted-foreground @md:inline">Simulated AI · no provider connection</span>
+      <label for="assistant-model" class="sr-only">Simulated model</label>
+      <Select.Root
+        value={modelId}
+        items={modelItems}
+        disabled={disabled || streaming || !onModelChange}
+        onValueChange={(id) => onModelChange?.(id)}
+      >
+        <Select.Trigger id="assistant-model" aria-label="Simulated model" size="sm" class="min-w-0 max-w-48 rounded-full text-xs text-muted-foreground">
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {#each modelItems as item (item.value)}
+            <Select.Item value={item.value} label={item.label}>{item.label}</Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
+    {/snippet}
+  </Composer>
+</div>

package/dist/components/AssistantComposer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type AiModel } from '@protoyard/ai';
+import type { AssistantSendInput } from '../types.ts';
+interface Props {
+    models?: readonly AiModel[];
+    modelId?: string;
+    value?: string;
+    streaming?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    slashCommands?: readonly string[];
+    mentions?: readonly {
+        id: string;
+        label: string;
+    }[];
+    onModelChange?: (modelId: string) => void;
+    onSubmit: (input: AssistantSendInput) => unknown;
+    onStop?: () => void;
+}
+declare const AssistantComposer: import("svelte").Component<Props, {}, "value">;
+type AssistantComposer = ReturnType<typeof AssistantComposer>;
+export default AssistantComposer;