@happyvertical/smrt-personas 0.38.19 → 0.38.21

package/dist/svelte/components/DirectiveReviewQueue.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+/**
+ * DirectiveReviewQueue — the minimal human-in-the-loop surface for the persona
+ * learning loop (#1889).
+ *
+ * Renders pending {@link DirectiveProposalView}s with their rationale and a
+ * current-vs-proposed diff, and lets a reviewer approve (optionally editing the
+ * proposed text) or reject. It is purely presentational — approval/rejection are
+ * delegated to the `onApprove` / `onReject` callbacks, which a host wires to the
+ * permission-gated `DirectiveApprovalService`.
+ */
+import { Textarea } from '@happyvertical/smrt-ui/forms';
+import { Badge, Button, Card } from '@happyvertical/smrt-ui/ui';
+import type { DirectiveProposalView } from '../types.js';
+import { confidencePercent, statusBadgeVariant } from '../types.js';
+
+export interface Props {
+  /** Proposals to review (typically the pending queue). */
+  proposals?: DirectiveProposalView[];
+  /** Disable actions while a review is in flight. */
+  busy?: boolean;
+  /** Approve a proposal, optionally with reviewer-edited instructions. */
+  onApprove?: (id: string, editedInstructions?: string) => void;
+  /** Reject a proposal. */
+  onReject?: (id: string) => void;
+}
+
+const { proposals = [], busy = false, onApprove, onReject }: Props = $props();
+
+// Reviewer edits, keyed by proposal id.
+let edits = $state<Record<string, string>>({});
+
+function draftFor(proposal: DirectiveProposalView): string {
+  return edits[proposal.id] ?? proposal.proposedInstructions;
+}
+
+function onEdit(id: string, value: string): void {
+  edits = { ...edits, [id]: value };
+}
+
+function approve(proposal: DirectiveProposalView): void {
+  const edited = edits[proposal.id];
+  const changed =
+    edited !== undefined && edited !== proposal.proposedInstructions;
+  onApprove?.(proposal.id, changed ? edited : undefined);
+}
+</script>
+
+<section class="directive-review-queue">
+  {#if proposals.length === 0}
+    <p class="dq-empty">No directive proposals awaiting review.</p>
+  {:else}
+    {#each proposals as proposal (proposal.id)}
+      {@const locked = busy || proposal.status !== 'pending'}
+      <Card variant="outlined">
+        <div class="dq-head">
+          <span class="dq-title">
+            {proposal.personaName ?? proposal.agentClass ?? 'Persona directive'}
+          </span>
+          <span class="dq-badges">
+            {#if proposal.confidence != null}
+              <Badge variant="info" size="sm">
+                {confidencePercent(proposal.confidence)} confidence
+              </Badge>
+            {/if}
+            <Badge variant={statusBadgeVariant(proposal.status)} size="sm">
+              {proposal.status}
+            </Badge>
+          </span>
+        </div>
+
+        <p class="dq-rationale">{proposal.rationale}</p>
+
+        <div class="dq-diff">
+          <div class="dq-col">
+            <h4 class="dq-col-title">Current</h4>
+            <pre class="dq-pre">{proposal.currentInstructions || '(none)'}</pre>
+          </div>
+          <div class="dq-col">
+            <h4 class="dq-col-title">Proposed</h4>
+            <Textarea
+              value={draftFor(proposal)}
+              rows={5}
+              disabled={locked}
+              oninput={(event) =>
+                onEdit(
+                  proposal.id,
+                  (event.currentTarget as HTMLTextAreaElement).value,
+                )}
+            />
+          </div>
+        </div>
+
+        <div class="dq-actions">
+          <Button
+            variant="primary"
+            size="sm"
+            disabled={locked}
+            onclick={() => approve(proposal)}
+          >
+            Approve
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            disabled={locked}
+            onclick={() => onReject?.(proposal.id)}
+          >
+            Reject
+          </Button>
+        </div>
+      </Card>
+    {/each}
+  {/if}
+</section>
+
+<style>
+  .directive-review-queue {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .dq-empty {
+    color: var(--color-text-muted, #6b7280);
+    font-style: italic;
+  }
+
+  .dq-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .dq-title {
+    font-weight: 600;
+  }
+
+  .dq-badges {
+    display: inline-flex;
+    gap: 0.375rem;
+  }
+
+  .dq-rationale {
+    margin: 0 0 0.75rem;
+  }
+
+  .dq-diff {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  @media (max-width: 640px) {
+    .dq-diff {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .dq-col-title {
+    margin: 0 0 0.25rem;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-muted, #6b7280);
+  }
+
+  .dq-pre {
+    margin: 0;
+    padding: 0.5rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+    background: var(--color-surface-muted, #f3f4f6);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+  }
+
+  .dq-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { DirectiveProposalView } from '../types.js';
+export interface Props {
+    /** Proposals to review (typically the pending queue). */
+    proposals?: DirectiveProposalView[];
+    /** Disable actions while a review is in flight. */
+    busy?: boolean;
+    /** Approve a proposal, optionally with reviewer-edited instructions. */
+    onApprove?: (id: string, editedInstructions?: string) => void;
+    /** Reject a proposal. */
+    onReject?: (id: string) => void;
+}
+declare const DirectiveReviewQueue: import("svelte").Component<Props, {}, "">;
+type DirectiveReviewQueue = ReturnType<typeof DirectiveReviewQueue>;
+export default DirectiveReviewQueue;
+//# sourceMappingURL=DirectiveReviewQueue.svelte.d.ts.map

package/dist/svelte/components/DirectiveReviewQueue.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectiveReviewQueue.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DirectiveReviewQueue.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAIzD,MAAM,WAAW,KAAK;IACpB,yDAAyD;IACzD,SAAS,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACpC,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,kBAAkB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAuFD,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @happyvertical/smrt-personas/svelte
+ *
+ * Optional Svelte 5 UI for the persona learning loop (#1889): a minimal
+ * directive review queue. Presentational only — approval/rejection are
+ * delegated to callbacks a host wires to the permission-gated
+ * `DirectiveApprovalService`.
+ *
+ * @packageDocumentation
+ */
+import type { ComponentProps } from 'svelte';
+import DirectiveReviewQueue from './components/DirectiveReviewQueue.svelte';
+export { DirectiveReviewQueue };
+export type DirectiveReviewQueueProps = ComponentProps<typeof DirectiveReviewQueue>;
+export { confidencePercent, type DirectiveProposalView, type DirectiveReviewStatus, statusBadgeVariant, toDirectiveProposalView, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAChC,MAAM,MAAM,yBAAyB,GAAG,cAAc,CACpD,OAAO,oBAAoB,CAC5B,CAAC;AAEF,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,YAAY,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,13 @@
+/**
+ * @happyvertical/smrt-personas/svelte
+ *
+ * Optional Svelte 5 UI for the persona learning loop (#1889): a minimal
+ * directive review queue. Presentational only — approval/rejection are
+ * delegated to callbacks a host wires to the permission-gated
+ * `DirectiveApprovalService`.
+ *
+ * @packageDocumentation
+ */
+import DirectiveReviewQueue from './components/DirectiveReviewQueue.svelte';
+export { DirectiveReviewQueue };
+export { confidencePercent, statusBadgeVariant, toDirectiveProposalView, } from './types.js';

package/dist/svelte/types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Presentational types for the directive review-queue UI (#1889).
+ *
+ * Kept free of the `@smrt()` model classes so the Svelte bundle stays a thin
+ * presentation layer — consumers map their {@link DirectiveProposal} rows to
+ * {@link DirectiveProposalView} via {@link toDirectiveProposalView}.
+ *
+ * @module
+ */
+/** The proposal lifecycle statuses the queue renders. */
+export type DirectiveReviewStatus = 'pending' | 'approved' | 'rejected' | 'superseded';
+/** A plain, render-ready view of a directive proposal. */
+export interface DirectiveProposalView {
+    /** Proposal id. */
+    id: string;
+    /** Persona display name, if known. */
+    personaName?: string;
+    /** Canonical agent class the persona configures. */
+    agentClass?: string;
+    /** Lifecycle status. */
+    status: DirectiveReviewStatus;
+    /** Model-authored rationale for the change. */
+    rationale: string;
+    /** Current instructions (for the review diff). */
+    currentInstructions: string;
+    /** Proposed replacement instructions. */
+    proposedInstructions: string;
+    /** Aggregate confidence in `[0, 1]`, if known. */
+    confidence?: number;
+}
+/** Map a proposal-shaped record onto a render-ready view. */
+export declare function toDirectiveProposalView(proposal: {
+    id?: string | null;
+    status?: string;
+    rationale?: string;
+    currentInstructions?: string;
+    proposedInstructions?: string;
+    confidence?: number;
+    agentClass?: string;
+    personaName?: string;
+}): DirectiveProposalView;
+/** Badge variant for a proposal status (matches `@happyvertical/smrt-ui`). */
+export declare function statusBadgeVariant(status: DirectiveReviewStatus): 'default' | 'success' | 'warning' | 'error';
+/** Format a `[0, 1]` confidence as a rounded percentage string. */
+export declare function confidencePercent(confidence: number): string;
+//# sourceMappingURL=types.d.ts.map

package/dist/svelte/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/svelte/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,yDAAyD;AACzD,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,0DAA0D;AAC1D,MAAM,WAAW,qBAAqB;IACpC,mBAAmB;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,6DAA6D;AAC7D,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,qBAAqB,CAWxB;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,qBAAqB,GAC5B,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAW7C;AAED,mEAAmE;AACnE,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAE5D"}

package/dist/svelte/types.js

@@ -0,0 +1,39 @@
+/**
+ * Presentational types for the directive review-queue UI (#1889).
+ *
+ * Kept free of the `@smrt()` model classes so the Svelte bundle stays a thin
+ * presentation layer — consumers map their {@link DirectiveProposal} rows to
+ * {@link DirectiveProposalView} via {@link toDirectiveProposalView}.
+ *
+ * @module
+ */
+/** Map a proposal-shaped record onto a render-ready view. */
+export function toDirectiveProposalView(proposal) {
+    return {
+        id: proposal.id ?? '',
+        personaName: proposal.personaName,
+        agentClass: proposal.agentClass,
+        status: proposal.status ?? 'pending',
+        rationale: proposal.rationale ?? '',
+        currentInstructions: proposal.currentInstructions ?? '',
+        proposedInstructions: proposal.proposedInstructions ?? '',
+        confidence: proposal.confidence,
+    };
+}
+/** Badge variant for a proposal status (matches `@happyvertical/smrt-ui`). */
+export function statusBadgeVariant(status) {
+    switch (status) {
+        case 'approved':
+            return 'success';
+        case 'rejected':
+            return 'error';
+        case 'pending':
+            return 'warning';
+        default:
+            return 'default';
+    }
+}
+/** Format a `[0, 1]` confidence as a rounded percentage string. */
+export function confidencePercent(confidence) {
+    return `${Math.round(confidence * 100)}%`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-personas",
-  "version": "0.38.19",
+  "version": "0.38.21",
   "description": "Tenant-owned, context-scoped agent personas and resolution for the SMRT framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,20 +15,36 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/svelte/index.js"
+    },
     "./manifest": "./dist/manifest.json",
     "./manifest.json": "./dist/manifest.json"
   },
   "dependencies": {
-    "@happyvertical/smrt-agents": "0.38.19",
-    "@happyvertical/smrt-core": "0.38.19",
-    "@happyvertical/smrt-tenancy": "0.38.19"
+    "@happyvertical/sql": "^0.77.0",
+    "@happyvertical/smrt-core": "0.38.21",
+    "@happyvertical/smrt-prompts": "0.38.21",
+    "@happyvertical/smrt-tenancy": "0.38.21",
+    "@happyvertical/smrt-agents": "0.38.21",
+    "@happyvertical/smrt-ui": "0.38.21",
+    "@happyvertical/smrt-users": "0.38.21"
+  },
+  "peerDependencies": {
+    "svelte": "^5.56.4"
   },
   "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@types/node": "24.13.2",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
     "typescript": "^5.9.3",
     "vite": "^8.1.3",
     "vitest": "^4.1.9",
-    "@happyvertical/smrt-vitest": "0.38.19"
+    "@happyvertical/smrt-vitest": "0.38.21"
   },
   "keywords": [
     "smrt",
@@ -49,13 +65,13 @@
     "directory": "packages/personas"
   },
   "scripts": {
-    "build": "vite build --mode library",
+    "build": "vite build --mode library && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json",
     "build:watch": "vite build --mode library --watch",
     "clean": "rm -rf dist",
     "dev": "vite dev",
     "test": "vitest run",
     "test:watch": "vitest",
-    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json && node ../../scripts/svelte-check-a11y.mjs --tsconfig ./tsconfig.svelte.json",
     "verify:pack": "node ../../scripts/verify-package-types-exports.js ."
   }
 }