@cef-ai/widget-runtime 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+export { buildWidgetManifest, type BuildManifestInput } from './manifest.js';
+export { injectWidgetBridge, type BridgeInput } from './bridge.js';
+export type { WidgetManifest, WidgetRuntimeApi, Identity, QueryResult } from './types.js';
+export { AgentNotConnectedError } from './types.js';
+export { validateConfig } from './validate-config.js';
+export { mountKind } from './mount.js';
+export type { UploadAudioFn, MountDeps } from './mount.js';
+export { renderRecord } from './kinds/record.js';
+export { renderList } from './kinds/list.js';
+export { renderDashboard } from './kinds/dashboard.js';
+export { renderSubmit } from './kinds/submit.js';
+export { renderConversation } from './kinds/conversation.js';
+export { renderComposite, registerCompositePanel, getCompositePanel, type CompositePanelRenderer } from './kinds/composite.js';
+export * from './render-helpers.js';
+export type { WidgetKind, WidgetConfig, RecordConfig, ListConfig, DashboardConfig, SubmitConfig, ConversationConfig, CustomPanelConfig, CompositePanel, CompositeConfig } from './types.js';
+export { captureAndUploadAudio, createVaultUploader, createVaultObjectStore } from './audio/capture-upload.js';
+export type { CaptureUploadInput, CaptureUploadDeps, VaultUploaderConfig, VaultStoreConfig, VaultObjectStore } from './audio/capture-upload.js';
+export { mintDelegationToken, Operation } from './audio/ddc-delegation.js';
+export type { AsyncSignerPair, MintOpts } from './audio/ddc-delegation.js';
+export { encodeWav } from './audio/wav.js';
+export { segmentPcm, decodeToMono16k } from './audio/segment.js';
+export { requestMicStream } from './audio/mic.js';
+export { createHostBridge, type HostBridge } from './host-bridge.js';
+export { toVaultSdkSigner, toClientSdkWallet, toUploaderSignerPair, type VaultSignedWallet } from './bridge-wallet.js';
+export { connectStandaloneWallet, type StandaloneWallet } from './standalone-wallet.js';

package/dist/index.js

@@ -0,0 +1,21 @@
+// packages/widget-runtime/src/index.ts
+export { buildWidgetManifest } from './manifest.js';
+export { injectWidgetBridge } from './bridge.js';
+export { AgentNotConnectedError } from './types.js';
+export { validateConfig } from './validate-config.js';
+export { mountKind } from './mount.js';
+export { renderRecord } from './kinds/record.js';
+export { renderList } from './kinds/list.js';
+export { renderDashboard } from './kinds/dashboard.js';
+export { renderSubmit } from './kinds/submit.js';
+export { renderConversation } from './kinds/conversation.js';
+export { renderComposite, registerCompositePanel, getCompositePanel } from './kinds/composite.js';
+export * from './render-helpers.js';
+export { captureAndUploadAudio, createVaultUploader, createVaultObjectStore } from './audio/capture-upload.js';
+export { mintDelegationToken, Operation } from './audio/ddc-delegation.js';
+export { encodeWav } from './audio/wav.js';
+export { segmentPcm, decodeToMono16k } from './audio/segment.js';
+export { requestMicStream } from './audio/mic.js';
+export { createHostBridge } from './host-bridge.js';
+export { toVaultSdkSigner, toClientSdkWallet, toUploaderSignerPair } from './bridge-wallet.js';
+export { connectStandaloneWallet } from './standalone-wallet.js';

package/dist/kinds/composite.d.ts

@@ -0,0 +1,7 @@
+import type { CompositeConfig, WidgetRuntimeApi } from '../types.js';
+import { type MountDeps } from '../mount.js';
+/** A custom panel renderer registered by the host app bundle before boot. */
+export type CompositePanelRenderer = (root: HTMLElement, runtime: WidgetRuntimeApi, deps?: MountDeps) => void | Promise<void>;
+export declare function registerCompositePanel(name: string, fn: CompositePanelRenderer): void;
+export declare function getCompositePanel(name: string): CompositePanelRenderer | undefined;
+export declare function renderComposite(root: HTMLElement, config: CompositeConfig, runtime: WidgetRuntimeApi, deps?: MountDeps): Promise<void>;

package/dist/kinds/composite.js

@@ -0,0 +1,206 @@
+import { esc } from '../render-helpers.js';
+import { mountKind } from '../mount.js';
+const REGISTRY = new Map();
+export function registerCompositePanel(name, fn) {
+    REGISTRY.set(name, fn);
+}
+export function getCompositePanel(name) {
+    return REGISTRY.get(name);
+}
+async function isUnlocked(config, runtime) {
+    const { statusQuery, unlockWhen } = config.gating;
+    try {
+        const res = await runtime.query(statusQuery);
+        const idx = res.columns.findIndex((c) => c.toLowerCase() === unlockWhen.column.toLowerCase());
+        if (idx === -1 || res.rows.length === 0)
+            return false;
+        return String(res.rows[0][idx] ?? '') === unlockWhen.equals;
+    }
+    catch {
+        return false;
+    }
+}
+async function hasBadge(panel, runtime) {
+    if (!panel.badgeWhen)
+        return false;
+    try {
+        const res = await runtime.query(panel.badgeWhen.query);
+        const idx = res.columns.findIndex((c) => c.toLowerCase() === panel.badgeWhen.column.toLowerCase());
+        if (idx === -1 || res.rows.length === 0)
+            return false;
+        return String(res.rows[0][idx] ?? '') === panel.badgeWhen.equals;
+    }
+    catch {
+        return false;
+    }
+}
+export async function renderComposite(root, config, runtime, deps) {
+    // Resolve gating + badges concurrently so the first paint waits on one
+    // round-trip phase, not two serial ones.
+    const badges = new Map();
+    // unlocked is mutable: a panel (e.g. the intake conversation) can flip the
+    // gate to confirmed mid-session via deps.onDone → recheckGate, unlocking the
+    // rail without a page reload.
+    let [unlocked] = await Promise.all([
+        isUnlocked(config, runtime),
+        Promise.all(config.panels.map(async (p) => badges.set(p.id, await hasBadge(p, runtime)))),
+    ]);
+    let activeId = unlocked ? config.defaultPanel : config.gating.firstRunPanel;
+    let panelController = null;
+    const panelById = (id) => config.panels.find((p) => p.id === id);
+    const isPanelLocked = (p) => !!p.gated && !unlocked;
+    function railHtml() {
+        const groups = config.groups.map((g) => {
+            const items = config.panels.filter((p) => p.group === g.id).map((p) => {
+                const locked = isPanelLocked(p);
+                const badge = badges.get(p.id) ? ' <span class="dc-badge">new</span>' : '';
+                const check = !locked && p.gated ? ' <span class="dc-check">✓</span>' : '';
+                const lock = locked ? ' 🔒' : '';
+                return `<div data-rail-item data-panel="${esc(p.id)}" data-locked="${locked}"
+          class="dc-rail-item${p.id === activeId ? ' active' : ''}${locked ? ' locked' : ''}"
+          role="button" tabindex="0">${p.icon ? esc(p.icon) + ' ' : ''}${esc(p.label)}${check}${badge}${lock}</div>`;
+            }).join('');
+            return `<div class="dc-rail-group" data-rail-group>${esc(g.label)}</div>${items}`;
+        }).join('');
+        const menuBtn = config.menu?.length ? `<button data-menu-toggle class="dc-gear" aria-label="Menu">⚙</button>` : '';
+        return `<div class="dc-rail">${groups}</div>${menuBtn}`;
+    }
+    function menuHtml() {
+        if (!config.menu?.length)
+            return '';
+        const items = config.menu.map((m, i) => `<div data-menu-action="${i}" class="dc-menu-item" role="button" tabindex="0">${esc(m.label)}</div>`).join('');
+        return `<div data-menu class="dc-menu" hidden>${items}</div>`;
+    }
+    function shellHtml() {
+        return `
+      <div class="dc-shell">
+        <aside class="dc-aside">${railHtml()}${menuHtml()}</aside>
+        <main class="dc-content" data-content></main>
+      </div>`;
+    }
+    async function mountPanel(id) {
+        activeId = id;
+        panelController?.abort();
+        panelController = new AbortController();
+        const panel = panelById(id);
+        const content = root.querySelector('[data-content]');
+        const host = document.createElement('div');
+        host.setAttribute('data-active-panel', id);
+        content.replaceChildren(host);
+        const panelDeps = { ...deps, signal: panelController.signal, onDone: () => void recheckGate() };
+        if (isPanelLocked(panel)) {
+            host.innerHTML = `<p class="dc-muted">Finish intake first to unlock this.</p>`;
+            return;
+        }
+        if (panel.config.kind === 'custom') {
+            const fn = getCompositePanel(panel.config.renderer);
+            if (!fn) {
+                host.innerHTML = `<p class="error">Unknown panel renderer.</p>`;
+                return;
+            }
+            await fn(host, runtime, panelDeps);
+            return;
+        }
+        await mountKind(host, panel.config, runtime, panelDeps);
+    }
+    function heroHtml() {
+        const h = config.gating.hero;
+        if (!h)
+            return '';
+        return `<div class="dc-hero" data-hero>
+      <h2>${esc(h.title)}</h2><p>${esc(h.body)}</p>
+      <button data-hero-cta class="dc-cta">${esc(h.cta)}</button>
+    </div>`;
+    }
+    // In-DOM confirmation. The widget runs in a sandboxed iframe without
+    // `allow-modals`, so native confirm()/alert()/prompt() are ignored ("Ignored
+    // call to 'confirm()'. The document is sandboxed…") and would silently cancel
+    // the action. Inline-styled so it renders without depending on host CSS.
+    function confirmDialog(message) {
+        return new Promise((resolve) => {
+            const overlay = document.createElement('div');
+            overlay.setAttribute('data-confirm', '');
+            overlay.style.cssText =
+                'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:50;padding:16px;';
+            const box = document.createElement('div');
+            box.setAttribute('role', 'dialog');
+            box.setAttribute('aria-modal', 'true');
+            box.style.cssText =
+                'background:Canvas;color:CanvasText;border:1px solid color-mix(in srgb, currentColor 18%, transparent);border-radius:12px;padding:18px;max-width:340px;box-shadow:0 8px 28px rgba(0,0,0,0.25);';
+            box.innerHTML =
+                `<p style="margin:0 0 14px">${esc(message)}</p>` +
+                    `<div style="display:flex;gap:8px;justify-content:flex-end">` +
+                    `<button data-cancel style="padding:7px 14px;border-radius:8px;border:1px solid currentColor;background:transparent;cursor:pointer">Cancel</button>` +
+                    `<button data-ok style="padding:7px 14px;border-radius:8px;border:none;background:#ff5e8a;color:#fff;font-weight:600;cursor:pointer">Confirm</button>` +
+                    `</div>`;
+            overlay.appendChild(box);
+            const done = (v) => { overlay.remove(); resolve(v); };
+            box.querySelector('[data-cancel]').addEventListener('click', () => done(false));
+            box.querySelector('[data-ok]').addEventListener('click', () => done(true));
+            overlay.addEventListener('click', (e) => { if (e.target === overlay)
+                done(false); });
+            root.appendChild(overlay);
+        });
+    }
+    function wireRail() {
+        root.querySelectorAll('[data-rail-item]').forEach((el) => {
+            el.addEventListener('click', () => {
+                const id = el.getAttribute('data-panel');
+                if (isPanelLocked(panelById(id)))
+                    return;
+                renderActive(id);
+            });
+        });
+        root.querySelector('[data-menu-toggle]')?.addEventListener('click', () => {
+            const menu = root.querySelector('[data-menu]');
+            if (menu)
+                menu.toggleAttribute('hidden');
+        });
+        config.menu?.forEach((m, i) => {
+            root.querySelector(`[data-menu-action="${i}"]`)?.addEventListener('click', async () => {
+                root.querySelector('[data-menu]')?.setAttribute('hidden', '');
+                if (m.kind === 'goto') {
+                    renderActive(m.panel);
+                    return;
+                }
+                if (m.confirm && !(await confirmDialog(m.confirm)))
+                    return;
+                await runtime.publish(m.event.type, { schema_version: 1, ...(m.event.payload ?? {}) }, undefined);
+            });
+        });
+        root.querySelector('[data-hero-cta]')?.addEventListener('click', () => renderActive(config.gating.firstRunPanel));
+    }
+    // showHero is the landing state shown ONCE while locked. Navigations (hero
+    // CTA, rail, menu-goto) pass showHero=false so they mount the requested
+    // panel — the firstRunPanel (intake) is un-gated and reachable while locked,
+    // which is how the user unlocks the rest. Without this, renderActive re-drew
+    // the hero on every call whenever !unlocked, so the CTA/rail were no-ops.
+    function renderActive(id, showHero = false) {
+        root.innerHTML = shellHtml();
+        const content = root.querySelector('[data-content]');
+        if (showHero && !unlocked && config.gating.hero) {
+            content.innerHTML = heroHtml();
+            activeId = config.gating.firstRunPanel;
+        }
+        else {
+            void mountPanel(id);
+        }
+        wireRail();
+    }
+    // After a panel signals done (e.g. the intake conversation completes),
+    // re-check the gate and unlock the rail without a page reload. The gate
+    // (statusQuery) can lag the panel's own done signal by a beat, so retry a
+    // few times before giving up.
+    async function recheckGate(attempt = 0) {
+        if (unlocked)
+            return;
+        if (await isUnlocked(config, runtime)) {
+            unlocked = true;
+            renderActive(config.defaultPanel);
+            return;
+        }
+        if (attempt < 5)
+            setTimeout(() => void recheckGate(attempt + 1), 1500);
+    }
+    renderActive(activeId, !unlocked);
+}

package/dist/kinds/conversation.d.ts

@@ -0,0 +1,7 @@
+import type { ConversationConfig, WidgetRuntimeApi } from '../types.js';
+import type { UploadAudioFn } from '../mount.js';
+export declare function renderConversation(root: HTMLElement, config: ConversationConfig, runtime: WidgetRuntimeApi, deps?: {
+    uploadAudio?: UploadAudioFn;
+    signal?: AbortSignal;
+    onDone?: () => void;
+}): void;