@cef-ai/widget-runtime 0.2.0

package/dist/kinds/dashboard.js

@@ -0,0 +1,53 @@
+import { esc, colIndex, formatValue } from '../render-helpers.js';
+async function renderPanelBody(panel, runtime) {
+    const { columns, rows } = await runtime.query(panel.query);
+    switch (panel.render) {
+        case 'metric': {
+            const i = panel.value ? colIndex(columns, panel.value) : 0;
+            if (i === -1)
+                return `<p class="error">Panel '${esc(panel.title)}': column '${esc(panel.value ?? '')}' not in result.</p>`;
+            const v = rows.length ? rows[0][i] : 0;
+            return `<div class="metric">${esc(formatValue(v, 'number'))}</div>`;
+        }
+        case 'bar': {
+            const li = colIndex(columns, panel.label ?? columns[0]);
+            const vi = colIndex(columns, panel.value ?? columns[1]);
+            if (li === -1 || vi === -1)
+                return `<p class="error">Panel '${esc(panel.title)}': label/value column not in result.</p>`;
+            const max = Math.max(1, ...rows.map((r) => Number(r[vi]) || 0));
+            return rows.map((r) => {
+                const pct = Math.round(((Number(r[vi]) || 0) / max) * 100);
+                return `<div class="bar-row"><span class="bar-label">${esc(r[li])}</span><span class="bar" style="width:${pct}%"></span><span class="bar-val">${esc(r[vi])}</span></div>`;
+            }).join('');
+        }
+        case 'list':
+            return rows.map((r) => {
+                const t = panel.item ? r[colIndex(columns, panel.item.title)] : r[0];
+                const s = panel.item?.subtitle ? r[colIndex(columns, panel.item.subtitle)] : null;
+                return `<div class="list-item"><div class="li-title">${esc(t)}</div>${s != null ? `<div class="li-sub">${esc(s)}</div>` : ''}</div>`;
+            }).join('');
+        case 'table': {
+            const cols = panel.columns ?? columns;
+            const idx = cols.map((c) => colIndex(columns, c));
+            const head = cols.map((c) => `<th>${esc(c)}</th>`).join('');
+            const body = rows.map((r) => `<tr>${idx.map((i) => `<td>${esc(r[i])}</td>`).join('')}</tr>`).join('');
+            return `<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
+        }
+        default: return '';
+    }
+}
+export async function renderDashboard(root, config, runtime) {
+    const bodies = await Promise.all(config.panels.map(async (panel) => {
+        try {
+            return { panel, html: await renderPanelBody(panel, runtime) };
+        }
+        catch (err) {
+            // Not-connected must bubble up so mountKind renders the unified Connect CTA
+            // (consistent with record/list). Only other errors render inline per-panel.
+            if (err && err.name === 'AgentNotConnectedError')
+                throw err;
+            return { panel, html: `<p class="error">${esc(err instanceof Error ? err.message : String(err))}</p>` };
+        }
+    }));
+    root.innerHTML = bodies.map(({ panel, html }) => `<section class="panel"><h2 class="panel-title">${esc(panel.title)}</h2>${html}</section>`).join('');
+}

package/dist/kinds/list.d.ts

@@ -0,0 +1,2 @@
+import type { ListConfig, WidgetRuntimeApi } from '../types.js';
+export declare function renderList(root: HTMLElement, config: ListConfig, runtime: WidgetRuntimeApi): Promise<void>;

package/dist/kinds/list.js

@@ -0,0 +1,22 @@
+import { esc, colIndex, formatValue, parseColumnSpec } from '../render-helpers.js';
+function cell(columns, row, spec) {
+    if (!spec)
+        return '';
+    const { column, format } = parseColumnSpec(spec);
+    const i = colIndex(columns, column);
+    return formatValue(i === -1 ? null : row[i], format);
+}
+export async function renderList(root, config, runtime) {
+    const { columns, rows } = await runtime.query(config.query);
+    const limited = config.limit ? rows.slice(0, config.limit) : rows;
+    if (!limited.length) {
+        root.innerHTML = `<p class="muted">${esc(config.empty ?? 'Nothing here yet.')}</p>`;
+        return;
+    }
+    root.innerHTML = limited.map((row) => `
+    <div class="list-item">
+      <div class="li-title">${esc(cell(columns, row, config.item.title))}</div>
+      ${config.item.subtitle ? `<div class="li-sub">${esc(cell(columns, row, config.item.subtitle))}</div>` : ''}
+      ${config.item.meta ? `<div class="li-meta">${esc(cell(columns, row, config.item.meta))}</div>` : ''}
+    </div>`).join('');
+}

package/dist/kinds/record.d.ts

@@ -0,0 +1,2 @@
+import type { RecordConfig, WidgetRuntimeApi } from '../types.js';
+export declare function renderRecord(root: HTMLElement, config: RecordConfig, runtime: WidgetRuntimeApi): Promise<void>;

package/dist/kinds/record.js

@@ -0,0 +1,14 @@
+import { esc, colIndex, formatValue } from '../render-helpers.js';
+export async function renderRecord(root, config, runtime) {
+    const { columns, rows } = await runtime.query(config.query);
+    if (!rows.length) {
+        root.innerHTML = `<p class="muted">${esc(config.empty ?? 'Nothing here yet.')}</p>`;
+        return;
+    }
+    const row = rows[0];
+    root.innerHTML = config.fields.map((f) => {
+        const i = colIndex(columns, f.column);
+        const value = i === -1 ? null : row[i];
+        return `<section class="card"><div class="label">${esc(f.label)}</div><p>${esc(formatValue(value, f.format))}</p></section>`;
+    }).join('');
+}

package/dist/kinds/submit.d.ts

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

package/dist/kinds/submit.js

@@ -0,0 +1,481 @@
+import { esc } from '../render-helpers.js';
+import { requestMicStream } from '../audio/mic.js';
+// ── dot-path helper ────────────────────────────────────────────────────────────
+function dotGet(obj, path) {
+    return path.split('.').reduce((cur, key) => {
+        if (cur == null || typeof cur !== 'object')
+            return undefined;
+        return cur[key];
+    }, obj);
+}
+// ── main renderer ─────────────────────────────────────────────────────────────
+export function renderSubmit(root, config, runtime, deps) {
+    // Runtime state
+    let state = { phase: 'idle' };
+    let audioBlob = null;
+    let mediaRecorder = null;
+    let recordChunks = [];
+    let pollTimer = null;
+    let pollStarted = 0;
+    // ── teardown helpers ─────────────────────────────────────────────────────────
+    function stopPolling() {
+        if (pollTimer) {
+            clearTimeout(pollTimer);
+            pollTimer = null;
+        }
+    }
+    function stopRecordingTimer(s) {
+        clearInterval(s.timerId);
+    }
+    function abortTeardown() {
+        stopPolling();
+        if (state.phase === 'recording')
+            stopRecordingTimer(state);
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+            try {
+                mediaRecorder.stop();
+            }
+            catch { /* ignore */ }
+        }
+    }
+    if (deps?.signal) {
+        if (deps.signal.aborted) {
+            abortTeardown();
+            return;
+        }
+        deps.signal.addEventListener('abort', () => abortTeardown(), { once: true });
+    }
+    // ── form value collector ─────────────────────────────────────────────────────
+    function collectFormValues() {
+        const vals = {};
+        for (const field of config.form ?? []) {
+            const el = root.querySelector(`[name="${field.name}"]`);
+            if (!el)
+                continue;
+            const raw = el.value.trim();
+            if (field.type === 'number') {
+                const n = parseFloat(raw);
+                if (!isNaN(n))
+                    vals[field.name] = n;
+            }
+            else if (raw) {
+                vals[field.name] = raw;
+            }
+        }
+        return vals;
+    }
+    function isFormValid() {
+        for (const field of config.form ?? []) {
+            if (!field.required)
+                continue;
+            const el = root.querySelector(`[name="${field.name}"]`);
+            if (!el || !el.value.trim())
+                return false;
+        }
+        return true;
+    }
+    // ── transition: start upload+submit pipeline ─────────────────────────────────
+    async function runSubmit(blob) {
+        const uploadFn = deps?.uploadAudio;
+        if (!uploadFn) {
+            transition({ phase: 'error', message: 'Audio upload not configured.' });
+            return;
+        }
+        // Collect form values NOW (before any re-render destroys the inputs).
+        const formValues = collectFormValues();
+        // UPLOAD
+        transition({ phase: 'uploading', progress: 'Uploading…' });
+        let uploadWarn;
+        let urls;
+        try {
+            urls = await uploadFn(blob, {
+                segmentSeconds: config.audio.segmentSeconds,
+                softCapSeconds: config.audio.softCapSeconds,
+                onProgress: (done, total) => {
+                    if (state.phase === 'uploading') {
+                        transition({ phase: 'uploading', progress: `Uploading ${done}/${total}…`, warn: uploadWarn });
+                    }
+                },
+                onWarn: (m) => {
+                    uploadWarn = m;
+                    if (state.phase === 'uploading') {
+                        transition({ phase: 'uploading', progress: state.progress, warn: m });
+                    }
+                },
+            });
+        }
+        catch (err) {
+            handleError(err);
+            return;
+        }
+        // PUBLISH
+        const sessionId = crypto.randomUUID();
+        transition({ phase: 'analyzing', sessionId });
+        try {
+            const payload = { schema_version: 1, session_id: sessionId, [config.event.audioField]: urls };
+            if (Object.keys(formValues).length) {
+                if (config.event.formEnvelope)
+                    payload[config.event.formEnvelope] = formValues;
+                else
+                    Object.assign(payload, formValues);
+            }
+            await runtime.publish(config.event.type, payload, sessionId);
+        }
+        catch (err) {
+            handleError(err);
+            return;
+        }
+        // POLL
+        pollStarted = Date.now();
+        schedulePoll(sessionId);
+    }
+    function schedulePoll(sessionId) {
+        const { intervalMs, timeoutMs, doneWhen } = config.result.poll;
+        // Timeout is checked at schedule time (not inside the timer), so the
+        // worst-case overshoot past timeoutMs is ~one intervalMs.
+        if (Date.now() - pollStarted > timeoutMs) {
+            transition({ phase: 'error', message: 'Analysis timed out. Please try again.' });
+            return;
+        }
+        pollTimer = setTimeout(async () => {
+            try {
+                const result = await runtime.query(config.result.query, [sessionId]);
+                const colIdx = result.columns.findIndex((c) => c.toLowerCase() === doneWhen.column.toLowerCase());
+                if (colIdx !== -1 && result.rows.length > 0) {
+                    const val = String(result.rows[0][colIdx] ?? '');
+                    if (val === doneWhen.equals) {
+                        transition({ phase: 'done', row: result.rows[0], columns: result.columns });
+                        return;
+                    }
+                }
+                if (state.phase === 'analyzing')
+                    schedulePoll(sessionId);
+            }
+            catch (err) {
+                handleError(err);
+            }
+        }, intervalMs);
+    }
+    // ── error handler ─────────────────────────────────────────────────────────────
+    function handleError(err) {
+        stopPolling();
+        if (err && err.name === 'AgentNotConnectedError') {
+            transition({ phase: 'not-connected' });
+        }
+        else {
+            transition({ phase: 'error', message: err?.message ?? String(err) });
+        }
+    }
+    // ── transition + render ───────────────────────────────────────────────────────
+    function transition(next) {
+        // Clean up old state
+        if (state.phase === 'recording')
+            stopRecordingTimer(state);
+        if (next.phase !== 'analyzing')
+            stopPolling();
+        state = next;
+        render();
+    }
+    function render() {
+        switch (state.phase) {
+            case 'idle': return renderIdle();
+            case 'recording': return renderRecording(state);
+            case 'uploading': return renderUploading(state);
+            case 'analyzing': return renderAnalyzing();
+            case 'done': return renderDone(state);
+            case 'error': return renderError(state);
+            case 'not-connected': return renderNotConnected();
+        }
+    }
+    // ── idle ──────────────────────────────────────────────────────────────────────
+    function renderIdle() {
+        const titleHtml = config.title
+            ? `<h2 style="margin:0 0 .25rem">${esc(config.title)}</h2>`
+            : '';
+        const introHtml = config.intro
+            ? `<p class="muted" style="margin:0 0 1rem">${esc(config.intro)}</p>`
+            : '';
+        const formHtml = (config.form ?? []).map((f) => {
+            const req = f.required ? ' <span aria-hidden="true" style="color:red">*</span>' : '';
+            const reqAttr = f.required ? ' required' : '';
+            if (f.type === 'select' && f.options?.length) {
+                const opts = f.options.map((o) => `<option value="${esc(o)}">${esc(o)}</option>`).join('');
+                return `<div style="margin-bottom:.75rem">
+          <label class="label" for="f_${esc(f.name)}">${esc(f.label)}${req}</label>
+          <select id="f_${esc(f.name)}" name="${esc(f.name)}"${reqAttr} style="display:block;width:100%;padding:.35rem .5rem;margin-top:.25rem">
+            <option value="">— choose —</option>${opts}
+          </select>
+        </div>`;
+            }
+            const inputType = f.type === 'number' ? 'number' : 'text';
+            return `<div style="margin-bottom:.75rem">
+        <label class="label" for="f_${esc(f.name)}">${esc(f.label)}${req}</label>
+        <input id="f_${esc(f.name)}" name="${esc(f.name)}" type="${inputType}"${reqAttr}
+          style="display:block;width:100%;padding:.35rem .5rem;margin-top:.25rem;box-sizing:border-box" />
+      </div>`;
+        }).join('');
+        const mode = config.audio.mode;
+        const uploadSection = (mode === 'upload' || mode === 'both')
+            ? `<div style="margin-bottom:.5rem">
+          <label class="label" for="audio_file">
+            ${mode === 'both' ? 'Upload a file' : 'Audio file'}
+            ${config.audio.required ? '<span aria-hidden="true" style="color:red"> *</span>' : ''}
+          </label>
+          <input id="audio_file" type="file" accept="audio/*"
+            style="display:block;margin-top:.25rem" />
+        </div>`
+            : '';
+        const recordSection = (mode === 'record' || mode === 'both')
+            ? `<div style="margin-bottom:.5rem">
+          ${mode === 'both' ? '<div class="label" style="margin-bottom:.25rem">Or record now</div>' : ''}
+          <button id="record_btn" type="button" class="button" aria-label="Start recording">
+            ● Record
+          </button>
+        </div>`
+            : '';
+        const audioPreview = audioBlob
+            ? `<p style="color:green;margin:.5rem 0 0" role="status">✓ Audio ready (${Math.round(audioBlob.size / 1024)} KB)</p>`
+            : '';
+        const canSubmit = audioBlob !== null || (config.audio.required === false);
+        root.innerHTML = `
+      <div class="card">
+        ${titleHtml}${introHtml}
+        <form id="submit_form" novalidate>
+          ${formHtml}
+          <fieldset style="border:1px solid #ccc;border-radius:6px;padding:.75rem;margin-bottom:1rem">
+            <legend class="label">Audio recording</legend>
+            ${uploadSection}
+            ${recordSection}
+            ${audioPreview}
+          </fieldset>
+          <div aria-live="polite" id="status_region"></div>
+          <button id="analyze_btn" type="button" class="button"
+            ${canSubmit ? '' : 'disabled'}
+            style="width:100%;padding:.6rem;font-size:1rem;margin-top:.25rem">
+            ${esc(config.submitLabel ?? 'Submit')}
+          </button>
+        </form>
+      </div>`;
+        // Wire file input
+        if (mode === 'upload' || mode === 'both') {
+            root.querySelector('#audio_file')?.addEventListener('change', (e) => {
+                const file = e.target.files?.[0] ?? null;
+                audioBlob = file;
+                updateAnalyzeBtn();
+                const preview = root.querySelector('#status_region');
+                if (preview) {
+                    preview.textContent = file ? `✓ File selected: ${file.name}` : '';
+                }
+            });
+        }
+        // Wire record button
+        if (mode === 'record' || mode === 'both') {
+            root.querySelector('#record_btn')?.addEventListener('click', () => {
+                const b = root.querySelector('#record_btn');
+                if (b instanceof HTMLButtonElement)
+                    b.disabled = true;
+                void startRecording();
+            });
+        }
+        // Wire form field changes for required-field validation
+        for (const f of config.form ?? []) {
+            if (f.required) {
+                const el = root.querySelector(`[name="${f.name}"]`);
+                el?.addEventListener('input', () => updateAnalyzeBtn());
+                el?.addEventListener('change', () => updateAnalyzeBtn());
+            }
+        }
+        // Wire submit via the button's click handler (NOT the form's submit event):
+        // the Vault iframe sandbox lacks allow-forms, so a native form submission is
+        // blocked by the browser even with preventDefault. A type="button" click
+        // works in any sandbox.
+        root.querySelector('#analyze_btn')?.addEventListener('click', () => {
+            if (!audioBlob)
+                return;
+            if (!isFormValid()) {
+                const region = root.querySelector('#status_region');
+                if (region)
+                    region.textContent = 'Please fill in all required fields.';
+                return;
+            }
+            void runSubmit(audioBlob);
+        });
+    }
+    function updateAnalyzeBtn() {
+        const btn = root.querySelector('#analyze_btn');
+        if (!btn)
+            return;
+        btn.disabled = !(audioBlob !== null || config.audio.required === false) || !isFormValid();
+    }
+    // ── recording ────────────────────────────────────────────────────────────────
+    async function startRecording() {
+        recordChunks = [];
+        let stream;
+        try {
+            stream = await requestMicStream();
+        }
+        catch (err) {
+            transition({ phase: 'error', message: `Microphone access denied: ${err.message}` });
+            return;
+        }
+        mediaRecorder = new MediaRecorder(stream);
+        mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0)
+            recordChunks.push(e.data); };
+        mediaRecorder.onstop = () => {
+            stream.getTracks().forEach((t) => t.stop());
+            audioBlob = new Blob(recordChunks, { type: 'audio/webm' });
+            transition({ phase: 'idle' });
+        };
+        mediaRecorder.start(500);
+        const startedAt = Date.now();
+        const timerId = setInterval(() => {
+            const elapsed = Math.floor((Date.now() - startedAt) / 1000);
+            const elEl = root.querySelector('#elapsed');
+            if (elEl)
+                elEl.textContent = `${elapsed}s`;
+            // Soft cap warning
+            if (config.audio.softCapSeconds && elapsed === config.audio.softCapSeconds) {
+                const warn = root.querySelector('#rec_warn');
+                if (warn) {
+                    warn.textContent = `Recording is getting long (${Math.round(elapsed / 60)} min). Stop when ready.`;
+                }
+            }
+        }, 1000);
+        transition({ phase: 'recording', startedAt, timerId });
+    }
+    function renderRecording(s) {
+        const elapsed = Math.floor((Date.now() - s.startedAt) / 1000);
+        root.innerHTML = `
+      <div class="card">
+        <h2 style="margin:0 0 .5rem">${esc(config.title ?? 'Recording…')}</h2>
+        <p class="muted">Recording in progress.</p>
+        <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem">
+          <span style="color:red;font-size:1.25rem" aria-hidden="true">●</span>
+          <span id="elapsed" style="font-size:1.5rem;font-weight:600">${elapsed}s</span>
+        </div>
+        <p id="rec_warn" aria-live="polite" style="color:#b45309;min-height:1.25rem"></p>
+        <button id="stop_btn" type="button" class="button"
+          style="width:100%;padding:.6rem;font-size:1rem">
+          ■ Stop recording
+        </button>
+      </div>`;
+        root.querySelector('#stop_btn')?.addEventListener('click', () => {
+            mediaRecorder?.stop();
+            // onstop → transitions to idle with audioBlob set
+        });
+    }
+    // ── uploading ────────────────────────────────────────────────────────────────
+    function renderUploading(s) {
+        root.innerHTML = `
+      <div class="card">
+        <h2 style="margin:0 0 .5rem">${esc(config.title ?? 'Uploading…')}</h2>
+        <p aria-live="polite" id="upload_status">${esc(s.progress)}</p>
+        ${s.warn ? `<p aria-live="polite" style="color:#b45309">${esc(s.warn)}</p>` : ''}
+        <div style="margin-top:.5rem;height:4px;background:#e5e7eb;border-radius:2px">
+          <div style="height:100%;width:60%;background:#6366f1;border-radius:2px;animation:pulse 1.2s ease-in-out infinite"></div>
+        </div>
+        <p class="muted" style="margin-top:.75rem">Please wait — do not close this window.</p>
+      </div>`;
+    }
+    // ── analyzing ────────────────────────────────────────────────────────────────
+    function renderAnalyzing() {
+        root.innerHTML = `
+      <div class="card" style="text-align:center">
+        <div style="font-size:2rem;margin-bottom:.75rem" aria-hidden="true">🔍</div>
+        <h2 style="margin:0 0 .25rem">${esc(config.processingLabel ?? config.title ?? 'Processing…')}</h2>
+        <p class="muted">This usually takes 30–60 seconds.</p>
+        <p aria-live="polite" style="margin-top:.5rem;color:#6366f1">Processing…</p>
+      </div>`;
+    }
+    // ── done ──────────────────────────────────────────────────────────────────────
+    function renderDone(s) {
+        if (config.result.render === 'summary' && config.result.summary?.length) {
+            const reportColIdx = s.columns.findIndex((c) => c.toLowerCase() === 'report_json');
+            let parsed = null;
+            if (reportColIdx !== -1 && s.row[reportColIdx]) {
+                try {
+                    parsed = JSON.parse(String(s.row[reportColIdx]));
+                }
+                catch { /* ignore */ }
+            }
+            const summaryHtml = config.result.summary.map((item) => {
+                const value = parsed ? dotGet(parsed, item.path) : null;
+                const displayVal = value != null ? String(value) : '—';
+                return `<div style="display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f3f4f6">
+          <span class="label" style="margin:0">${esc(item.label)}</span>
+          <span style="font-weight:600;color:#111">${esc(displayVal)}</span>
+        </div>`;
+            }).join('');
+            root.innerHTML = `
+        <div class="card">
+          <h2 style="margin:0 0 .25rem;color:#059669">✓ Analysis complete</h2>
+          <p class="muted" style="margin:0 0 1rem">Here's what we found.</p>
+          ${summaryHtml}
+          <p class="muted" style="margin-top:.75rem;font-size:.85rem">Full report in your Date report widget.</p>
+          <button id="again_btn" type="button" class="button"
+            style="margin-top:1rem;width:100%;padding:.5rem">
+            Analyze another date
+          </button>
+        </div>`;
+        }
+        else {
+            root.innerHTML = `
+        <div class="card" style="text-align:center">
+          <div style="font-size:2rem;margin-bottom:.5rem" aria-hidden="true">✓</div>
+          <h2 style="margin:0 0 .25rem;color:#059669">Date submitted successfully!</h2>
+          <p class="muted">Your date has been sent for analysis. Check back in your Date report widget.</p>
+          <button id="again_btn" type="button" class="button"
+            style="margin-top:1rem;padding:.5rem 1.5rem">
+            Analyze another date
+          </button>
+        </div>`;
+        }
+        root.querySelector('#again_btn')?.addEventListener('click', () => {
+            audioBlob = null;
+            transition({ phase: 'idle' });
+        });
+    }
+    // ── error ─────────────────────────────────────────────────────────────────────
+    function renderError(s) {
+        root.innerHTML = `
+      <div class="card">
+        <p class="error">${esc(s.message)}</p>
+        <button id="retry_btn" type="button" class="button" style="margin-top:.75rem">
+          Try again
+        </button>
+      </div>`;
+        root.querySelector('#retry_btn')?.addEventListener('click', () => {
+            audioBlob = null;
+            transition({ phase: 'idle' });
+        });
+    }
+    // ── not-connected ─────────────────────────────────────────────────────────────
+    function renderNotConnected() {
+        root.innerHTML = `
+      <div class="card">
+        <h2 style="margin:0 0 .25rem">Connect your account</h2>
+        <p class="muted">${esc(config.connectPrompt ?? 'Connect your account to continue.')}</p>
+        <button id="connect_btn" type="button" class="button"
+          style="width:100%;padding:.6rem;font-size:1rem;margin-top:.75rem">
+          Connect
+        </button>
+      </div>`;
+        root.querySelector('#connect_btn')?.addEventListener('click', async () => {
+            const btn = root.querySelector('#connect_btn');
+            if (btn) {
+                btn.disabled = true;
+                btn.textContent = 'Connecting…';
+            }
+            try {
+                await runtime.connectAgent();
+                audioBlob = null;
+                transition({ phase: 'idle' });
+            }
+            catch (err) {
+                transition({ phase: 'error', message: err?.message ?? String(err) });
+            }
+        });
+    }
+    // ── initial render ────────────────────────────────────────────────────────────
+    render();
+}

package/dist/manifest.d.ts

@@ -0,0 +1,32 @@
+import type { WidgetManifest, WidgetKind, WidgetConfig } from './types.js';
+export interface BuildManifestInput {
+    widgetId: string;
+    name: string;
+    agentId: string;
+    scope?: string;
+    cubbyAlias: string;
+    wallet: {
+        appId: string;
+        env: string;
+    };
+    endpoints: WidgetManifest['endpoints'];
+    /** Single-query shorthand — kept for backwards compat. Either query or queries may be supplied. */
+    query?: {
+        sql: string;
+        label?: string;
+        timeoutMs?: number;
+    };
+    /** Multi-query list — takes precedence over query when provided. */
+    queries?: Array<{
+        id: string;
+        label?: string;
+        sql: string;
+        timeoutMs?: number;
+    }>;
+    events?: WidgetManifest['events'];
+    /** Config-driven kind. When provided, validateConfig is called to fail fast. */
+    kind?: WidgetKind;
+    /** Per-kind render config. */
+    config?: WidgetConfig;
+}
+export declare function buildWidgetManifest(input: BuildManifestInput): WidgetManifest;

package/dist/manifest.js

@@ -0,0 +1,47 @@
+import { validateConfig } from './validate-config.js';
+export function buildWidgetManifest(input) {
+    if (!input.agentId)
+        throw new Error('buildWidgetManifest: agentId is required.');
+    // Build queries[]: explicit array takes priority; otherwise fall back to single query shorthand.
+    let resolvedQueries;
+    if (input.queries && input.queries.length > 0) {
+        resolvedQueries = input.queries.map((q) => ({
+            id: q.id,
+            label: q.label ?? q.id,
+            sql: q.sql,
+            timeoutMs: q.timeoutMs ?? 60000,
+        }));
+    }
+    else if (input.query) {
+        resolvedQueries = [{
+                id: input.widgetId,
+                label: input.query.label ?? input.name,
+                sql: input.query.sql,
+                timeoutMs: input.query.timeoutMs ?? 60000,
+            }];
+    }
+    else {
+        resolvedQueries = [];
+    }
+    // Validate kind/config pair if provided.
+    if (input.kind && input.kind !== 'custom' && input.config) {
+        validateConfig(input.kind, input.config);
+    }
+    if (resolvedQueries.length === 0 && input.kind && input.kind !== 'custom') {
+        throw new Error(`buildWidgetManifest: kind '${input.kind}' widget requires at least one query (via 'query' or 'queries[]').`);
+    }
+    return {
+        schemaVersion: 1,
+        widgetId: input.widgetId,
+        name: input.name,
+        agentId: input.agentId,
+        scope: input.scope ?? 'default',
+        cubbyAlias: input.cubbyAlias,
+        wallet: input.wallet,
+        endpoints: input.endpoints,
+        queries: resolvedQueries,
+        ...(input.events ? { events: input.events } : {}),
+        ...(input.kind ? { kind: input.kind } : {}),
+        ...(input.config ? { config: input.config } : {}),
+    };
+}