@jini-ai/chat 0.5.6 → 0.5.8

package/dist/embed-widget/vanilla/index.d.ts

@@ -0,0 +1,63 @@
+import type { VanillaChatControllerArgs, VanillaChatState } from './state.js';
+export { createVanillaChatController } from './state.js';
+export type { VanillaChatControllerArgs, VanillaChatState } from './state.js';
+export interface VanillaChatCopy {
+    readonly title: string;
+    readonly fabLabel: string;
+    readonly placeholder: string;
+    readonly send: string;
+    readonly stop: string;
+    readonly close: string;
+    readonly reset: string;
+    readonly resetQuestion: string;
+    readonly confirm: string;
+    readonly confirmDraft?: string;
+    readonly keep: string;
+    readonly proposalGo: string;
+    readonly proposalLabel: (args: {
+        title: string;
+    }) => string;
+    readonly thinking: string;
+    readonly greeting?: string;
+    readonly suggestionsLabel?: string;
+}
+export interface MountVanillaChatArgs extends Omit<VanillaChatControllerArgs, 'onChange'> {
+    readonly element: HTMLElement;
+    readonly document: Document;
+    readonly copy: VanillaChatCopy;
+    readonly suggestions?: readonly string[];
+    /** Host renderer must escape raw HTML and reject unsafe link protocols. */
+    readonly renderMarkdown: (args: {
+        content: string;
+        element: HTMLElement;
+    }) => void;
+    readonly scheduleFrame: (args: {
+        callback: () => void;
+    }) => () => void;
+}
+/**
+ * Mounts a DOM-only chat panel. Native buttons/forms supply keyboard semantics;
+ * explicitly opened dialogs trap focus, restore the bubble on close and announce settled replies.
+ * Restored panels leave page focus alone. Streaming markdown is rendered at most once per frame.
+ * All listeners, scheduled page effects and runs belong to this mount and are disposed.
+ * Markdown is an injected host capability; no framework or icon font enters this graph.
+ */
+export declare function mountVanillaChat(args: MountVanillaChatArgs, options?: {
+    initialOpen?: boolean;
+}): {
+    controller: {
+        getState(_input?: Record<string, never>, _opts?: {}): VanillaChatState;
+        setOpen({ open }: {
+            open: boolean;
+        }, _opts?: {}): void;
+        send({ text }: {
+            text: string;
+        }, _opts?: {}): Promise<boolean>;
+        acceptProposal(_input?: Record<string, never>, _opts?: {}): void;
+        cancel(_input?: Record<string, never>, _opts?: {}): void;
+        reset(_input?: Record<string, never>, _opts?: {}): void;
+        dispose(_input?: Record<string, never>, _opts?: {}): void;
+    };
+    unmount(_input?: Record<string, never>, _opts?: {}): void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/embed-widget/vanilla/index.js

@@ -0,0 +1,319 @@
+import { CHAT_BUBBLE_STYLE } from '../browser/lazy-loader.js';
+import { createVanillaChatController } from './state.js';
+import { isQueuedPageAction } from '../../core/browser/page-actions.js';
+export { createVanillaChatController } from './state.js';
+function svgIcon({ document, path }) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('aria-hidden', 'true');
+    const shape = document.createElementNS(svg.namespaceURI, 'path');
+    shape.setAttribute('d', path);
+    shape.setAttribute('fill', 'none');
+    shape.setAttribute('stroke', 'currentColor');
+    shape.setAttribute('stroke-width', '2');
+    svg.append(shape);
+    return svg;
+}
+/**
+ * Mounts a DOM-only chat panel. Native buttons/forms supply keyboard semantics;
+ * explicitly opened dialogs trap focus, restore the bubble on close and announce settled replies.
+ * Restored panels leave page focus alone. Streaming markdown is rendered at most once per frame.
+ * All listeners, scheduled page effects and runs belong to this mount and are disposed.
+ * Markdown is an injected host capability; no framework or icon font enters this graph.
+ */
+export function mountVanillaChat(args, options = {}) {
+    const { document, element, copy } = args;
+    const node = (tag, className, text = '') => {
+        const result = document.createElement(tag);
+        result.className = className;
+        result.textContent = text;
+        return result;
+    };
+    const button = (label) => {
+        const result = node('button', 'jini-chat-vanilla__button', label);
+        result.type = 'button';
+        return result;
+    };
+    const shell = node('div', 'jini-chat-vanilla');
+    const fab = button('');
+    fab.className = 'jini-chat-bubble';
+    fab.setAttribute('aria-label', copy.fabLabel);
+    fab.setAttribute('aria-haspopup', 'dialog');
+    fab.append(svgIcon({ document, path: 'M4 4h16v12H9l-5 4V4z' }));
+    const panel = node('section', 'jini-chat-vanilla__panel');
+    panel.id = `jini-chat-${args.ids({})}`;
+    fab.setAttribute('aria-controls', panel.id);
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-modal', 'false');
+    panel.setAttribute('aria-label', copy.title);
+    const header = node('header', 'jini-chat-vanilla__header');
+    const title = node('strong', 'jini-chat-vanilla__title', copy.title);
+    const reset = button(copy.reset);
+    const close = button('');
+    close.setAttribute('aria-label', copy.close);
+    close.append(svgIcon({ document, path: 'M6 6l12 12M18 6L6 18' }));
+    header.append(title, reset, close);
+    const confirmation = node('div', 'jini-chat-vanilla__confirmation');
+    const confirm = button(copy.confirm);
+    confirm.classList.add('jini-chat-vanilla__discard');
+    const keep = button(copy.keep);
+    confirmation.append(node('span', '', copy.resetQuestion), confirm, keep);
+    confirmation.hidden = true;
+    const log = node('div', 'jini-chat-vanilla__messages');
+    log.setAttribute('role', 'log');
+    log.setAttribute('aria-live', 'off');
+    log.setAttribute('aria-relevant', 'additions text');
+    log.setAttribute('aria-label', copy.title);
+    log.tabIndex = 0;
+    const status = node('div', 'jini-chat-vanilla__status');
+    status.setAttribute('role', 'status');
+    const announcements = node('div', 'jini-chat-vanilla__announcements');
+    announcements.setAttribute('role', 'log');
+    announcements.setAttribute('aria-live', 'polite');
+    announcements.setAttribute('aria-relevant', 'additions');
+    announcements.setAttribute('aria-atomic', 'false');
+    const error = node('div', 'jini-chat-vanilla__error');
+    error.setAttribute('role', 'alert');
+    const proposal = node('div', 'jini-chat-vanilla__proposal');
+    const proposalText = node('span', '');
+    const go = button(copy.proposalGo);
+    proposal.append(proposalText, go);
+    const form = node('form', 'jini-chat-vanilla__composer');
+    const input = node('textarea', 'jini-chat-vanilla__input');
+    input.placeholder = copy.placeholder;
+    input.setAttribute('aria-label', copy.placeholder);
+    input.maxLength = 8000;
+    input.rows = 2;
+    const send = button(copy.send);
+    send.type = 'submit';
+    send.classList.add('jini-chat-vanilla__send');
+    send.setAttribute('aria-label', copy.send);
+    send.replaceChildren(svgIcon({ document, path: 'M5 4l15 8-15 8v-6l9-2-9-2V4z' }));
+    const stop = button(copy.stop);
+    form.append(input, send, stop);
+    const greeting = node('p', 'jini-chat-vanilla__greeting', copy.greeting);
+    const suggestions = node('div', 'jini-chat-vanilla__suggestions');
+    if (copy.suggestionsLabel)
+        suggestions.setAttribute('aria-label', copy.suggestionsLabel);
+    const suggestionButtons = (args.suggestions ?? []).map(text => button(text));
+    suggestions.append(...suggestionButtons);
+    log.append(greeting, suggestions);
+    panel.append(header, confirmation, log, status, announcements, error, proposal, form);
+    const bubbleStyle = node('style', '', CHAT_BUBBLE_STYLE);
+    shell.append(bubbleStyle, fab, panel);
+    element.replaceChildren(shell);
+    const rows = new Map();
+    let wasOpen = false;
+    let initialized = false;
+    const liveReplies = new Set();
+    const renderChrome = ({ state }) => {
+        panel.hidden = !state.open;
+        panel.setAttribute('aria-modal', String(state.open));
+        fab.setAttribute('aria-expanded', String(state.open));
+        fab.querySelector('path')?.setAttribute('d', state.open ? 'M6 6l12 12M18 6L6 18' : 'M4 4h16v12H9l-5 4V4z');
+        greeting.hidden = !copy.greeting || state.messages.length > 0;
+        suggestions.hidden = suggestionButtons.length === 0 || state.messages.length > 0;
+        suggestionButtons.forEach(button => { button.disabled = state.busy; });
+        error.textContent = state.error ?? '';
+        error.hidden = !state.error;
+        status.textContent = state.busy ? copy.thinking : '';
+        send.disabled = state.busy || !input.value.trim();
+        input.disabled = state.busy;
+        stop.hidden = !state.busy;
+        proposal.hidden = state.proposal === null;
+        proposalText.textContent = state.proposal ? copy.proposalLabel({ title: state.proposal.navigate.target.title }) : '';
+    };
+    const renderRows = ({ state }) => {
+        const pinned = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
+        const ids = new Set(state.messages.map(message => message.id));
+        for (const [id, row] of rows)
+            if (!ids.has(id)) {
+                row.element.remove();
+                rows.delete(id);
+            }
+        for (const message of state.messages) {
+            let row = rows.get(message.id);
+            if (!row) {
+                row = { element: node('div', `jini-chat-vanilla__message jini-chat-vanilla__message--${message.role}`), content: '\0' };
+                rows.set(message.id, row);
+                log.append(row.element);
+            }
+            if (row.content !== message.content) {
+                if (message.role === 'user')
+                    row.element.textContent = message.content;
+                else
+                    args.renderMarkdown({ content: message.content, element: row.element });
+                row.content = message.content;
+            }
+        }
+        // A dedicated additions-only region announces each LIVE settled reply once. Markdown rows
+        // may be rebuilt while streaming, but restored transcripts and old text stay silent.
+        for (const message of state.messages) {
+            if (message.role !== 'assistant' || message.runStatus === 'running' || !liveReplies.delete(message.id))
+                continue;
+            const text = rows.get(message.id)?.element.textContent;
+            if (text) {
+                announcements.append(node('span', '', text));
+                // Bound the additions-only live region without replaying earlier replies.
+                while (announcements.childElementCount > 2)
+                    announcements.firstElementChild.remove();
+            }
+        }
+        if (state.messages.length === 0)
+            announcements.replaceChildren();
+        if (pinned)
+            log.scrollTop = log.scrollHeight;
+    };
+    const renderFocus = ({ state, composerHadFocus, stopHadFocus, panelHadFocus }) => {
+        if (state.open && !wasOpen && initialized) {
+            if (state.busy)
+                close.focus();
+            else
+                input.focus();
+        }
+        else if (state.open && state.busy && composerHadFocus)
+            stop.focus();
+        else if (state.open && !state.busy && stopHadFocus)
+            input.focus();
+        if (!state.open && wasOpen) {
+            confirmation.hidden = true;
+            panel.setAttribute('aria-modal', 'false');
+            if (panelHadFocus)
+                fab.focus();
+        }
+        wasOpen = state.open;
+    };
+    let latestState;
+    let framePending = false;
+    let cancelRenderFrame = () => { };
+    const render = ({ state }) => {
+        latestState = state;
+        const panelHadFocus = panel.contains(document.activeElement);
+        const composerHadFocus = document.activeElement === input;
+        const stopHadFocus = document.activeElement === stop;
+        renderChrome({ state });
+        renderFocus({ state, composerHadFocus, stopHadFocus, panelHadFocus });
+        if (initialized && state.busy) {
+            for (const message of state.messages)
+                if (message.role === 'assistant' && message.runStatus === 'running')
+                    liveReplies.add(message.id);
+            if (framePending)
+                return;
+            framePending = true;
+            cancelRenderFrame = args.scheduleFrame({ callback: () => {
+                    framePending = false;
+                    renderRows({ state: latestState });
+                } });
+            return;
+        }
+        cancelRenderFrame();
+        framePending = false;
+        renderRows({ state });
+    };
+    const controller = createVanillaChatController({ ...args, onChange: render });
+    const listeners = [];
+    const listen = (target, type, handler) => {
+        target.addEventListener(type, handler);
+        listeners.push(() => target.removeEventListener(type, handler));
+    };
+    suggestionButtons.forEach(button => listen(button, 'click', () => {
+        input.value = button.textContent ?? '';
+        renderChrome({ state: controller.getState({}) });
+        input.focus();
+    }));
+    listen(input, 'input', () => renderChrome({ state: controller.getState({}) }));
+    listen(fab, 'click', () => controller.setOpen({ open: !controller.getState({}).open }));
+    listen(close, 'click', () => controller.setOpen({ open: false }));
+    listen(reset, 'click', () => {
+        if (controller.getState({}).messages.length === 0 && input.value.length === 0) {
+            controller.reset({});
+            input.focus();
+            return;
+        }
+        confirm.textContent = controller.getState({}).messages.length === 0 ? copy.confirmDraft ?? copy.confirm : copy.confirm;
+        confirmation.hidden = false;
+        keep.focus();
+    });
+    listen(keep, 'click', () => { confirmation.hidden = true; reset.focus(); });
+    listen(confirm, 'click', () => { confirmation.hidden = true; input.value = ''; controller.reset({}); input.focus(); });
+    listen(go, 'click', () => controller.acceptProposal({}));
+    listen(stop, 'click', () => controller.cancel({}));
+    listen(form, 'submit', event => {
+        event.preventDefault();
+        const text = input.value;
+        if (!text.trim() || controller.getState({}).busy)
+            return;
+        input.value = '';
+        void controller.send({ text }).then(() => {
+            const state = controller.getState({});
+            if (state.open && !state.busy && panel.contains(document.activeElement))
+                input.focus();
+        });
+    });
+    listen(input, 'keydown', event => {
+        const key = event;
+        if (key.key === 'Enter' && !key.shiftKey && !key.isComposing) {
+            key.preventDefault();
+            form.requestSubmit();
+        }
+    });
+    listen(document, 'keydown', event => {
+        if (!controller.getState({}).open || !panel.contains(document.activeElement))
+            return;
+        const key = event;
+        if (key.key === 'Escape') {
+            key.preventDefault();
+            if (!confirmation.hidden) {
+                confirmation.hidden = true;
+                reset.focus();
+            }
+            else
+                controller.setOpen({ open: false });
+            return;
+        }
+        if (key.key !== 'Tab')
+            return;
+        const focusable = Array.from(panel.querySelectorAll('button:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]'))
+            .filter(candidate => !candidate.closest('[hidden]'));
+        const first = focusable[0];
+        const last = focusable.at(-1);
+        if (key.shiftKey && (document.activeElement === first || !panel.contains(document.activeElement))) {
+            key.preventDefault();
+            last?.focus();
+        }
+        else if (!key.shiftKey && (document.activeElement === last || !panel.contains(document.activeElement))) {
+            key.preventDefault();
+            first?.focus();
+        }
+    });
+    listen(element, 'jini-chat-open', () => {
+        controller.setOpen({ open: true });
+        if (controller.getState({}).busy)
+            close.focus();
+        else
+            input.focus();
+    });
+    const queued = { value: args.session.drain({}) };
+    let cancelFrame = () => { };
+    if (isQueuedPageAction(queued) && queued.value.type !== 'navigate') {
+        const action = queued.value;
+        cancelFrame = args.scheduleFrame({ callback: () => { args.pageActions.execute({ action }); } });
+    }
+    controller.setOpen({ open: options.initialOpen ?? controller.getState({}).open });
+    initialized = true;
+    element.dataset.chatMounted = 'true';
+    element.dispatchEvent(new (document.defaultView?.Event ?? Event)('jini-chat-mounted'));
+    return {
+        controller,
+        unmount(_input = {}, _opts = {}) {
+            listeners.forEach(dispose => dispose());
+            cancelFrame();
+            cancelRenderFrame();
+            delete element.dataset.chatMounted;
+            controller.dispose({});
+            args.pageActions.clearHighlight({});
+            shell.remove();
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/embed-widget/vanilla/state.d.ts

@@ -0,0 +1,48 @@
+import type { ChatMessage } from '../../core/messages.js';
+import type { ChatTransport } from '../../core/transport.js';
+import type { BrowserSessionStore } from '../browser/session-store.js';
+import type { PageActionPort, NavigateAction, NonNavigateAction } from '../../core/browser/page-actions.js';
+export interface VanillaChatState {
+    readonly open: boolean;
+    readonly messages: ChatMessage[];
+    readonly busy: boolean;
+    readonly error: string | null;
+    readonly proposal: {
+        navigate: NavigateAction;
+        bundled: NonNavigateAction | null;
+    } | null;
+}
+export interface VanillaChatControllerArgs {
+    readonly transport: ChatTransport;
+    readonly session: BrowserSessionStore;
+    readonly pageActions: PageActionPort;
+    readonly directiveEventName: string;
+    readonly agentId: string;
+    readonly ids: (args: Record<string, never>) => string;
+    readonly createAbortController: (args: Record<string, never>) => AbortController;
+    readonly onChange: (args: {
+        state: VanillaChatState;
+    }) => void;
+}
+/**
+ * Framework-free visitor state over the existing transport/session/page-action owners.
+ * Restored messages never replay directives. Only a successful live settlement can act;
+ * persistence and queued effects finish synchronously before navigation tears down the page.
+ * Reset invalidates callbacks before aborting, preventing late chunks from reviving a thread.
+ * @complexity O(retained transcript + reply events + reply characters) per update; storage writes
+ * occur only on settle/open/reset/navigation, never per streamed chunk. Session bounds persisted bytes.
+ */
+export declare function createVanillaChatController(args: VanillaChatControllerArgs, _options?: {}): {
+    getState(_input?: Record<string, never>, _opts?: {}): VanillaChatState;
+    setOpen({ open }: {
+        open: boolean;
+    }, _opts?: {}): void;
+    send({ text }: {
+        text: string;
+    }, _opts?: {}): Promise<boolean>;
+    acceptProposal(_input?: Record<string, never>, _opts?: {}): void;
+    cancel(_input?: Record<string, never>, _opts?: {}): void;
+    reset(_input?: Record<string, never>, _opts?: {}): void;
+    dispose(_input?: Record<string, never>, _opts?: {}): void;
+};
+//# sourceMappingURL=state.d.ts.map

package/dist/embed-widget/vanilla/state.js

@@ -0,0 +1,120 @@
+import { assistantContentFromEvents } from '../../core/assistant-content.js';
+import { extractPageActions, splitPageActions } from '../../core/browser/page-actions.js';
+/**
+ * Framework-free visitor state over the existing transport/session/page-action owners.
+ * Restored messages never replay directives. Only a successful live settlement can act;
+ * persistence and queued effects finish synchronously before navigation tears down the page.
+ * Reset invalidates callbacks before aborting, preventing late chunks from reviving a thread.
+ * @complexity O(retained transcript + reply events + reply characters) per update; storage writes
+ * occur only on settle/open/reset/navigation, never per streamed chunk. Session bounds persisted bytes.
+ */
+export function createVanillaChatController(args, _options = {}) {
+    const initial = args.session.load({});
+    let state = { ...initial, busy: false, error: null, proposal: null };
+    let generation = 0;
+    let active = null;
+    const publish = ({ persist = true } = {}) => {
+        if (persist)
+            args.session.save({ state: { open: state.open, messages: state.messages } });
+        args.onChange({ state });
+    };
+    const go = (proposal) => {
+        if (!args.pageActions.allows({ action: proposal.navigate }))
+            return;
+        if (proposal.bundled && args.pageActions.allows({ action: proposal.bundled }))
+            args.session.enqueue({ action: proposal.bundled });
+        state = { ...state, proposal: null };
+        publish();
+        args.pageActions.navigate({ action: proposal.navigate });
+    };
+    const settleActions = (events) => {
+        const actions = extractPageActions({ events, directiveEventName: args.directiveEventName })
+            .filter(action => args.pageActions.allows({ action }));
+        const { navigate, other } = splitPageActions({ actions });
+        if (!navigate) {
+            if (other)
+                args.pageActions.execute({ action: other });
+            return;
+        }
+        const proposal = { navigate, bundled: other };
+        if (navigate.auto)
+            go(proposal);
+        else {
+            state = { ...state, proposal };
+            publish();
+        }
+    };
+    return {
+        getState(_input = {}, _opts = {}) { return state; },
+        setOpen({ open }, _opts = {}) { state = { ...state, open }; publish(); },
+        async send({ text }, _opts = {}) {
+            const content = text.trim();
+            if (!content || state.busy)
+                return false;
+            const token = ++generation;
+            const abort = args.createAbortController({});
+            active = abort;
+            const history = [...state.messages, { id: args.ids({}), role: 'user', content }];
+            const reply = { id: args.ids({}), role: 'assistant', content: '', events: [], runStatus: 'running' };
+            state = { ...state, messages: [...history, reply], busy: true, error: null, proposal: null };
+            publish({ persist: false });
+            let events = [];
+            let failed = false;
+            let settled = false;
+            const current = () => token === generation && !settled;
+            const updateReply = (next, { persist = false } = {}) => {
+                state = { ...state, messages: state.messages.map(message => message.id === reply.id ? next : message) };
+                publish({ persist });
+            };
+            const fail = (error) => {
+                if (!current())
+                    return;
+                failed = true;
+                state = { ...state, error: error.message };
+                updateReply({ ...reply, content: assistantContentFromEvents({ events }), events: [...events], runStatus: 'failed' });
+            };
+            const done = (final) => {
+                if (!current())
+                    return;
+                settled = true;
+                active = null;
+                events = final;
+                state = { ...state, busy: false };
+                updateReply({ ...reply, content: assistantContentFromEvents({ events }), events: [...events],
+                    runStatus: failed ? 'failed' : abort.signal.aborted ? 'canceled' : 'succeeded' }, { persist: true });
+                if (!failed && !abort.signal.aborted)
+                    settleActions(events);
+            };
+            try {
+                await args.transport.startRun({ history, agentId: args.agentId, assistantMessageId: reply.id, signal: abort.signal }, {
+                    onEvent(event) {
+                        if (!current())
+                            return;
+                        events = [...events, event];
+                        updateReply({ ...reply, content: assistantContentFromEvents({ events }), events: [...events], runStatus: failed ? 'failed' : 'running' });
+                    },
+                    onError: fail,
+                    onDone: done,
+                });
+            }
+            catch (error) {
+                fail(error instanceof Error ? error : new Error(String(error)));
+                done(events);
+            }
+            return true;
+        },
+        acceptProposal(_input = {}, _opts = {}) { if (state.proposal)
+            go(state.proposal); },
+        cancel(_input = {}, _opts = {}) { active?.abort(); },
+        reset(_input = {}, _opts = {}) {
+            generation += 1;
+            active?.abort();
+            active = null;
+            args.session.clear({});
+            state = { open: state.open, messages: [], busy: false, error: null, proposal: null };
+            publish();
+        },
+        dispose(_input = {}, _opts = {}) { generation += 1; active?.abort(); active = null; },
+    };
+}
+//# sourceMappingURL=state.js.map

package/dist/embed-widget/vanilla/style.css

@@ -0,0 +1,29 @@
+.jini-chat-bubble{position:fixed;right:var(--jini-embed-right,24px);bottom:24px;width:56px;height:56px;border:0;border-radius:50%;background:var(--jini-chat-accent,var(--color-primary,#2563eb));color:var(--jini-chat-accent-text,#fff);box-shadow:0 4px 16px #0003;cursor:pointer;z-index:var(--jini-embed-z-index,1000);display:grid;place-items:center}
+.jini-chat-bubble[hidden]{display:none!important}
+.jini-chat-bubble svg{width:24px;height:24px}
+.jini-chat-bubble:focus-visible{outline:3px solid var(--jini-chat-accent,#2563eb);outline-offset:3px}
+@media(max-width:480px){.jini-chat-bubble{right:16px;bottom:16px}}
+.jini-chat-bubble[aria-busy="true"]{cursor:progress;opacity:.65}
+.jini-chat-bubble[data-load-failed="true"]{outline:2px solid var(--jini-chat-error,#b91c1c);outline-offset:3px}
+.jini-chat-vanilla [hidden]{display:none!important}
+.jini-chat-vanilla svg{width:24px;height:24px}
+.jini-chat-vanilla :focus-visible{outline:3px solid var(--jini-chat-accent,#2563eb);outline-offset:3px}
+.jini-chat-vanilla{font:14px/1.5 var(--font-body,system-ui,sans-serif);color:var(--jini-chat-text,var(--color-text,CanvasText))}
+.jini-chat-vanilla__panel{position:fixed;right:var(--jini-embed-right,24px);bottom:88px;width:min(var(--jini-embed-width,440px),calc(100vw - 32px));height:min(var(--jini-embed-height,620px),calc(100dvh - 120px));z-index:var(--jini-embed-z-index,1000);display:flex;flex-direction:column;background:var(--jini-chat-background,var(--color-background,Canvas));border:1px solid var(--jini-chat-border,#767676);border-radius:16px;box-shadow:0 12px 48px #0003;overflow:hidden}
+.jini-chat-vanilla__header,.jini-chat-vanilla__composer,.jini-chat-vanilla__confirmation,.jini-chat-vanilla__proposal{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--jini-chat-border,#767676)}
+.jini-chat-vanilla__title{flex:1}
+.jini-chat-vanilla__button{font:inherit;color:inherit;background:transparent;border:1px solid var(--jini-chat-border,#767676);border-radius:8px;padding:6px 10px;cursor:pointer}
+.jini-chat-vanilla__button:disabled{opacity:.5;cursor:default}
+.jini-chat-vanilla__messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px}
+.jini-chat-vanilla__message{margin-bottom:16px;overflow-wrap:anywhere}
+.jini-chat-vanilla__message--user{white-space:pre-wrap;padding:10px;border-radius:8px;background:var(--jini-chat-user-background,#8882)}
+.jini-chat-vanilla__message p{margin:0 0 8px}
+.jini-chat-vanilla__message pre{overflow:auto;padding:8px;background:#8882;border-radius:8px}
+.jini-chat-vanilla__message a{color:var(--jini-chat-accent,var(--color-primary,#2563eb));text-decoration:underline}
+.jini-chat-vanilla__input{flex:1;min-width:0;resize:none;font:inherit;font-size:16px;color:inherit;background:transparent;border:1px solid var(--jini-chat-border,#767676);border-radius:8px;padding:8px}
+.jini-chat-vanilla__status,.jini-chat-vanilla__error{padding:0 12px}
+.jini-chat-vanilla__error{color:var(--jini-chat-error,#b91c1c)}
+.jini-chat-vanilla__confirmation{flex-wrap:wrap}
+@media(max-width:480px){.jini-chat-vanilla__panel{right:8px;bottom:88px;width:calc(100vw - 16px);height:calc(100dvh - 104px)}}
+
+.jini-chat-vanilla__announcements{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

package/dist/react/chat-pane.d.ts

@@ -16,6 +16,6 @@
  * `@deprecated`, so every existing `import { ChatPane } from '@jini-ai/chat/react'` keeps working
  * unchanged. New code should import from this subpath directly.
  */
-export { AgentRuntimePicker, CHAT_PANE_AGENT_TOOLS, ChatPane, createDaemonAttachmentUploader, createMcpUiToolCaller, createTypedAnswerPoster, defaultChatPaneSelection, orderChatPaneAgents, resolveChatPaneSelection, useChatPane, useChatPaneAgentControl, useChatPaneRuntimeInventory, useChatPaneWorkingDirectory, } from './features/chat-pane/index.js';
-export type { AgentRuntimePickerProps, ByokRuntimeSummary, ChatPaneActivity, ChatPaneAgent, ChatPaneAgentBridgeAccess, ChatPaneAgentControlOptions, ChatPaneAgentOption, ChatPaneAgentSelection, ChatPaneAgentToolAction, ChatPaneAgentToolDef, ChatPaneAgentToolInputSchema, ChatPaneAgentToolRisk, ChatPaneAttachmentUploadOptions, ChatPaneComposerHandle, ChatPaneProps, ChatPaneRunContext, ChatPaneRunContextInput, ChatPaneRuntimeAccess, ChatPaneVariant, ChatPaneWorkingDirectoryAccess, CreateDaemonAttachmentUploaderOptions, CreateMcpUiToolCallerOptions, CreateTypedAnswerPosterOptions, DeliverTypedAnswer, McpUiToolCallRequest, RuntimePickerPlacement, TypedAnswerDelivery, TypedAnswerNotice, UseChatPaneAgentControlOptions, UseChatPaneOptions, UseChatPaneResult, UseChatPaneRuntimeInventoryOptions, UseChatPaneRuntimeInventoryResult, UseChatPaneWorkingDirectoryOptions, UseChatPaneWorkingDirectoryResult, } from './features/chat-pane/index.js';
+export { AgentRuntimePicker, CHAT_PANE_AGENT_TOOLS, ChatPane, createDaemonAttachmentUploader, createMcpUiToolCaller, createMidRunMessagePoster, createTypedAnswerPoster, defaultChatPaneSelection, orderChatPaneAgents, resolveChatPaneSelection, useChatPane, useChatPaneAgentControl, useChatPaneRuntimeInventory, useChatPaneWorkingDirectory, } from './features/chat-pane/index.js';
+export type { AgentRuntimePickerProps, ByokRuntimeSummary, ChatPaneActivity, ChatPaneAgent, ChatPaneAgentBridgeAccess, ChatPaneAgentControlOptions, ChatPaneAgentOption, ChatPaneAgentSelection, ChatPaneAgentToolAction, ChatPaneAgentToolDef, ChatPaneAgentToolInputSchema, ChatPaneAgentToolRisk, ChatPaneAttachmentUploadOptions, ChatPaneComposerHandle, ChatPaneProps, ChatPaneRunContext, ChatPaneRunContextInput, ChatPaneRuntimeAccess, ChatPaneVariant, ChatPaneWorkingDirectoryAccess, CreateDaemonAttachmentUploaderOptions, CreateMcpUiToolCallerOptions, CreateMidRunMessagePosterOptions, CreateTypedAnswerPosterOptions, DeliverMidRunMessage, DeliverTypedAnswer, McpUiToolCallRequest, MidRunMessageDelivery, RuntimePickerPlacement, TypedAnswerDelivery, TypedAnswerNotice, UseChatPaneAgentControlOptions, UseChatPaneOptions, UseChatPaneResult, UseChatPaneRuntimeInventoryOptions, UseChatPaneRuntimeInventoryResult, UseChatPaneWorkingDirectoryOptions, UseChatPaneWorkingDirectoryResult, } from './features/chat-pane/index.js';
 //# sourceMappingURL=chat-pane.d.ts.map

package/dist/react/chat-pane.js

@@ -16,5 +16,5 @@
  * `@deprecated`, so every existing `import { ChatPane } from '@jini-ai/chat/react'` keeps working
  * unchanged. New code should import from this subpath directly.
  */
-export { AgentRuntimePicker, CHAT_PANE_AGENT_TOOLS, ChatPane, createDaemonAttachmentUploader, createMcpUiToolCaller, createTypedAnswerPoster, defaultChatPaneSelection, orderChatPaneAgents, resolveChatPaneSelection, useChatPane, useChatPaneAgentControl, useChatPaneRuntimeInventory, useChatPaneWorkingDirectory, } from './features/chat-pane/index.js';
+export { AgentRuntimePicker, CHAT_PANE_AGENT_TOOLS, ChatPane, createDaemonAttachmentUploader, createMcpUiToolCaller, createMidRunMessagePoster, createTypedAnswerPoster, defaultChatPaneSelection, orderChatPaneAgents, resolveChatPaneSelection, useChatPane, useChatPaneAgentControl, useChatPaneRuntimeInventory, useChatPaneWorkingDirectory, } from './features/chat-pane/index.js';
 //# sourceMappingURL=chat-pane.js.map

package/dist/react/components/A2uiSurfaceCard.d.ts

@@ -1,3 +1,4 @@
+import { type InteractiveUiRegistry } from '@jini-ai/ui/interactive-ui';
 import type { ExtEventRenderProps } from '../ext-event-renderer-registry.js';
 /**
  * What a host reports back after attempting to deliver an agent-directed action. Returned (not
@@ -12,6 +13,9 @@ export type A2uiAgentActionOutcome = {
     readonly reason: string;
 };
 export interface A2uiSurfaceCardProps extends ExtEventRenderProps {
+    /** Host registry used for both wire validation and rendering. Defaults to ui's built-ins.
+     * Supply a stable registry for the card's lifetime; remount the card to switch catalogs. */
+    registry?: Pick<InteractiveUiRegistry, 'list' | 'resolveById'>;
     /**
      * Called when a rendered surface produces a `message`-shaped action meant for the agent (as
      * opposed to a `local` client-side function call, which this component already resolves and
@@ -31,5 +35,5 @@ export interface A2uiSurfaceCardProps extends ExtEventRenderProps {
     onAgentAction?: (runId: string | undefined, message: unknown) => void | Promise<A2uiAgentActionOutcome>;
 }
 /** Registered against `ext-event-renderer-registry.ts`'s `'a2ui'` name — see module doc. */
-export declare function A2uiSurfaceCard({ events, runId, onAgentAction }: A2uiSurfaceCardProps): import("react").JSX.Element;
+export declare function A2uiSurfaceCard({ events, runId, onAgentAction, registry }: A2uiSurfaceCardProps): import("react").JSX.Element;
 //# sourceMappingURL=A2uiSurfaceCard.d.ts.map