@ggui-ai/iframe-runtime 0.1.0-rc.1

package/dist/stack.js

@@ -0,0 +1,118 @@
+/**
+ * In-memory model of the visible stack. Owned by the runtime; mutated
+ * via the methods (no setter — keeps the "model is the truth" doctrine
+ * obvious in code reviews).
+ */
+export class StackModel {
+    items = [];
+    filterToItemId;
+    constructor(options = {}) {
+        this.filterToItemId = options.filterToItemId;
+    }
+    /**
+     * Replace the entire stack — used after the subscribe ack lands.
+     *
+     * Under `filterToItemId` (single-item mode), the incoming list is
+     * filtered to just the matching entry. If no entry matches, the
+     * model ends up empty — the server no longer includes the pinned
+     * item and the renderer's empty-state is the correct surface.
+     */
+    setAll(items) {
+        if (this.filterToItemId !== undefined) {
+            const target = this.filterToItemId;
+            this.items = items.filter((item) => item.id === target);
+            return;
+        }
+        this.items = [...items];
+    }
+    /**
+     * Upsert a stack item. If an entry with the same id already exists
+     * its slot is replaced in place (preserves ordering); otherwise the
+     * item is appended at the tail. Mirrors `GguiSession.tsx`'s push
+     * reducer.
+     *
+     * Under `filterToItemId` (single-item mode): entries whose id does
+     * not match the filter are ignored. The renderer's live-channel
+     * subscription still delivers every push for the session (subscribe
+     * remains session-scoped); this filter is the client-side pin that
+     * keeps the per-card iframe bound to its one stack entry.
+     */
+    upsert(item) {
+        if (this.filterToItemId !== undefined && item.id !== this.filterToItemId) {
+            return;
+        }
+        const idx = this.items.findIndex((existing) => existing.id === item.id);
+        if (idx >= 0) {
+            const next = [...this.items];
+            next[idx] = item;
+            this.items = next;
+            return;
+        }
+        this.items = [...this.items, item];
+    }
+    /** Read-only view — callers MUST NOT mutate. */
+    snapshot() {
+        return this.items;
+    }
+    /** Item count — convenience for status-line rendering. */
+    size() {
+        return this.items.length;
+    }
+}
+/**
+ * Best-effort textual label for a stack item — title-ish for the
+ * placeholder UI. Tries `description` → `prompt` → a generic fallback.
+ *
+ * The wire shape keeps these fields optional on every entry kind
+ * (generated, McpApps), so the absence-handling has to be honest.
+ */
+function labelFor(item) {
+    if (typeof item.description === 'string' && item.description.length > 0) {
+        return item.description;
+    }
+    // Only generated component items carry `prompt`. McpApps + system
+    // variants surface their own description (or a generic fallback).
+    if (item.type !== 'mcpApps' && item.type !== 'system') {
+        if (typeof item.prompt === 'string' && item.prompt.length > 0) {
+            return item.prompt;
+        }
+    }
+    return '(untitled stack item)';
+}
+/**
+ * Render the stack model into the target list element as structural
+ * `<li data-ggui-stack-item="<id>">` placeholders. Idempotent — every
+ * call replaces the element's children based on the current model.
+ *
+ * The DOM shape (data attributes + classnames) is intentionally
+ * stable: E2E tests and the React-mount path both need to address
+ * stack-item rows by `data-ggui-stack-item` selector.
+ */
+export function renderStackInto(target, model) {
+    // Replace children rather than mutate-in-place — the placeholder
+    // doesn't need diffing, and the wire-frame burst rate is low enough
+    // (push events arrive roughly per agent turn) that full-replace is
+    // cheap.
+    target.replaceChildren();
+    const items = model.snapshot();
+    if (items.length === 0) {
+        const empty = target.ownerDocument.createElement('li');
+        empty.textContent = '(no stack items yet)';
+        empty.setAttribute('data-ggui-empty', 'true');
+        target.appendChild(empty);
+        return;
+    }
+    for (const item of items) {
+        const li = target.ownerDocument.createElement('li');
+        li.setAttribute('data-ggui-stack-item', item.id);
+        const idEl = target.ownerDocument.createElement('span');
+        idEl.className = 'id';
+        idEl.textContent = item.id;
+        li.appendChild(idEl);
+        const labelEl = target.ownerDocument.createElement('span');
+        labelEl.className = 'label';
+        labelEl.textContent = labelFor(item);
+        li.appendChild(labelEl);
+        target.appendChild(li);
+    }
+}

package/dist/status-dom.d.ts

@@ -0,0 +1,72 @@
+/**
+ * In-iframe status DOM. Extracted from `runtime.ts` in B3b so the
+ * channel-client handlers can import the `setStatus` + status-refs
+ * helpers without a circular dep on the runtime module (which imports
+ * the handlers for registration at boot).
+ *
+ * Operators see the boot state at a glance; failures land here with a
+ * prefix that makes them grep-able in dev consoles.
+ *
+ * The status DOM is a `<div data-ggui-status>` + `<ul data-ggui-stack>`
+ * pair built once at boot and reused for the iframe's lifetime. The
+ * `data-ggui-status` attribute carries a {@link StatusKind} value so
+ * operator stylesheets + e2e specs can pin assertions against the
+ * narrow union rather than reading the text content.
+ */
+import type { StackModel } from './stack.js';
+/**
+ * Closed union of values the `data-ggui-status` attribute carries.
+ *
+ *   - `idle` — initial state before any boot IO. Default text reads
+ *     "Initializing renderer…"; set by {@link ensureStatusDom}.
+ *   - `initializing` — same as `idle` (legacy alias kept for the rare
+ *     external CSS hook in `e2e/`).
+ *   - `connecting` — ui/initialize fired or WS handshake in flight.
+ *   - `connected` — first ack landed + every subsequent successful
+ *     push. Text shows the live stack count.
+ *   - `reconnecting` — WS dropped; the reconnect ladder is running.
+ *   - `disconnected` — terminal close + ladder exhausted, or a graceful
+ *     stop. Authors may layer reload UX here.
+ *   - `upgrade-required` — version handshake failed; operator should
+ *     upgrade the client.
+ *   - `error` — every other failure (ui/initialize, bootstrap parse,
+ *     WS handshake non-version).
+ *
+ * Closed at this layer; new values require a code change here PLUS
+ * any e2e specs / CSS that pattern-match against the attribute.
+ */
+export type StatusKind = 'idle' | 'initializing' | 'connecting' | 'connected' | 'reconnecting' | 'disconnected' | 'upgrade-required' | 'error';
+/**
+ * Refs handed back from {@link ensureStatusDom}. Stays narrow (two
+ * elements) so the channel handlers can close over them without
+ * pulling other runtime state.
+ */
+export interface StatusRefs {
+    readonly status: HTMLElement;
+    readonly stack: HTMLElement;
+}
+/**
+ * Build the minimum viable status DOM the runtime owns. Adopters can
+ * style via the `data-ggui-status` / `data-ggui-stack` attributes; the
+ * bundle ships zero CSS so hosts see only the structure.
+ */
+export declare function ensureStatusDom(doc: Document): StatusRefs;
+/**
+ * Set the status text + the `data-ggui-status` attribute. Centralised
+ * so every caller stays consistent across the runtime + the channel
+ * handlers (push handler keeps the count fresh on every fold).
+ */
+export declare function setStatus(refs: StatusRefs, text: string, state: StatusKind): void;
+/**
+ * Convenience — render the `connected (N items)` status line based on
+ * the current stack model size. Used by the push handler on every
+ * successful upsert + by the boot sequence on first ack.
+ */
+export declare function setConnectedStatus(refs: StatusRefs, model: StackModel): void;
+/**
+ * Re-render the stack DOM into the placeholder element. Wraps the
+ * standalone {@link renderStackInto} so callers can pass refs + model
+ * without unpacking; the standalone export stays for the legacy
+ * callers that have only the bare element in scope.
+ */
+export declare function refreshStackDom(refs: StatusRefs, model: StackModel): void;

package/dist/status-dom.js

@@ -0,0 +1,51 @@
+import { renderStackInto } from './stack.js';
+/**
+ * Build the minimum viable status DOM the runtime owns. Adopters can
+ * style via the `data-ggui-status` / `data-ggui-stack` attributes; the
+ * bundle ships zero CSS so hosts see only the structure.
+ */
+export function ensureStatusDom(doc) {
+    // Reuse pre-existing nodes if the thin shell wrote them — lets the
+    // shell inline a status line if it wants to.
+    const existingStatus = doc.querySelector('[data-ggui-status]');
+    const existingStack = doc.querySelector('[data-ggui-stack]');
+    if (existingStatus !== null && existingStack !== null) {
+        return { status: existingStatus, stack: existingStack };
+    }
+    const root = doc.body;
+    const status = doc.createElement('div');
+    status.setAttribute('data-ggui-status', 'idle');
+    status.textContent = 'Initializing renderer…';
+    const stack = doc.createElement('ul');
+    stack.setAttribute('data-ggui-stack', '');
+    root.appendChild(status);
+    root.appendChild(stack);
+    return { status, stack };
+}
+/**
+ * Set the status text + the `data-ggui-status` attribute. Centralised
+ * so every caller stays consistent across the runtime + the channel
+ * handlers (push handler keeps the count fresh on every fold).
+ */
+export function setStatus(refs, text, state) {
+    refs.status.textContent = text;
+    refs.status.setAttribute('data-ggui-status', state);
+}
+/**
+ * Convenience — render the `connected (N items)` status line based on
+ * the current stack model size. Used by the push handler on every
+ * successful upsert + by the boot sequence on first ack.
+ */
+export function setConnectedStatus(refs, model) {
+    const size = model.size();
+    setStatus(refs, `Connected (${size} item${size === 1 ? '' : 's'}).`, 'connected');
+}
+/**
+ * Re-render the stack DOM into the placeholder element. Wraps the
+ * standalone {@link renderStackInto} so callers can pass refs + model
+ * without unpacking; the standalone export stays for the legacy
+ * callers that have only the bare element in scope.
+ */
+export function refreshStackDom(refs, model) {
+    renderStackInto(refs.stack, model);
+}

package/dist/system-cards/NoCredentialsCard.d.ts

@@ -0,0 +1,33 @@
+/**
+ * No-credentials system card.
+ *
+ * Rendered when the server processed a `ggui_push` for a session whose
+ * LLM credentials are missing or unresolvable. The user needs to open
+ * the server's `/settings` page in a real browser tab to paste an API
+ * key.
+ *
+ * Open-url strategy is delegated to {@link requestOpenUrl} — fires
+ * `window.open`, programmatic anchor click, `ui/request/open-url`
+ * postMessage, and `tools/call:open_url` postMessage in parallel,
+ * with `clipboard.writeText` as the guaranteed-floor fallback. The
+ * card observes the `{outcome, mechanism}` result and shows distinct
+ * copy for opened / copied / unsupported so the user understands
+ * what happened. Hosts that block popups (claude.ai's
+ * `claudemcpcontent.com` iframe sandbox) gracefully degrade to the
+ * clipboard path; the URL block's `user-select: all` covers the
+ * worst case.
+ */
+import * as React from 'react';
+export interface NoCredentialsCardProps {
+    /**
+     * Absolute URL of the server's settings page. Constructed at boot
+     * from `--public-base-url` (or falls back to `host:port`). MUST be
+     * absolute — host iframes resolve relative URLs against their own
+     * sandbox origin (e.g. `claudemcpcontent.com`), where `/settings`
+     * goes to a 404.
+     */
+    readonly settingsUrl: string;
+    /** Optional: the original prompt that triggered the gen, surfaced as a footnote. */
+    readonly intent?: string;
+}
+export declare function NoCredentialsCard({ settingsUrl, intent, }: NoCredentialsCardProps): React.JSX.Element;

package/dist/system-cards/NoCredentialsCard.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * No-credentials system card.
+ *
+ * Rendered when the server processed a `ggui_push` for a session whose
+ * LLM credentials are missing or unresolvable. The user needs to open
+ * the server's `/settings` page in a real browser tab to paste an API
+ * key.
+ *
+ * Open-url strategy is delegated to {@link requestOpenUrl} — fires
+ * `window.open`, programmatic anchor click, `ui/request/open-url`
+ * postMessage, and `tools/call:open_url` postMessage in parallel,
+ * with `clipboard.writeText` as the guaranteed-floor fallback. The
+ * card observes the `{outcome, mechanism}` result and shows distinct
+ * copy for opened / copied / unsupported so the user understands
+ * what happened. Hosts that block popups (claude.ai's
+ * `claudemcpcontent.com` iframe sandbox) gracefully degrade to the
+ * clipboard path; the URL block's `user-select: all` covers the
+ * worst case.
+ */
+import * as React from 'react';
+import { Card, Stack, Heading, Text, Button, Badge, } from '@ggui-ai/design/primitives';
+import { requestOpenUrl } from './host-intents.js';
+import { QrCode } from './QrCode.js';
+const BUILD_ID = typeof __GGUI_RUNTIME_BUILD_ID__ === 'string'
+    ? __GGUI_RUNTIME_BUILD_ID__
+    : 'dev';
+/**
+ * ggui wordmark — `g g u i` in the brand's two-tone alternation.
+ * Inlined SVG (24px tall) so the bundle picks up no asset dependency.
+ * Colors track theme tokens: `chrome` ≈ surface, `ink` ≈ onSurface.
+ * Each glyph sits in a 50×50 box with 8px gaps.
+ */
+function GguiWordmark() {
+    // `text-primary` flips dark↔light per theme mode (charcoal in light,
+    // off-white in dark). `gray-300` flips too — the gray scale in
+    // `darkTheme` is intentionally inverted, so the wordmark's
+    // contrasting "chrome" tone reads correctly under either theme.
+    const ink = 'var(--ggui-color-onSurface, #292929)';
+    const chrome = 'var(--ggui-color-neutral-300, #d1d5db)';
+    return (_jsxs("svg", { viewBox: "0 0 224 50", width: "72", height: "16", role: "img", "aria-label": "ggui", style: { display: 'block', flexShrink: 0 }, children: [_jsx("path", { d: "M 0 0 H 50 V 25 H 25 V 50 H 0 Z", fill: chrome }), _jsx("rect", { x: "33", y: "33", width: "17", height: "17", fill: ink }), _jsx("path", { d: "M 58 0 H 108 V 25 H 83 V 50 H 58 Z", fill: ink }), _jsx("rect", { x: "91", y: "33", width: "17", height: "17", fill: chrome }), _jsx("path", { d: "M 141 50 C 154.807 50 166 38.8071 166 25 V 0 H 116 V 25 C 116 38.8071 127.193 50 141 50 Z", fill: ink }), _jsx("rect", { x: "174", y: "0", width: "50", height: "50", fill: chrome })] }));
+}
+const OUTCOME_TTL_MS = 4000;
+export function NoCredentialsCard({ settingsUrl, intent, }) {
+    const [ctaState, setCtaState] = React.useState('idle');
+    const onPrimary = React.useCallback(() => {
+        // Diagnostic logging — surfaces in the iframe's devtools console
+        // (claude.ai web: "Open frame in new tab" then DevTools; desktop:
+        // sandboxed and console-less, so we ALSO surface state in the
+        // CTA label). The `[ggui:no-creds-card]` prefix makes these
+        // greppable.
+        if (typeof console !== 'undefined') {
+            // eslint-disable-next-line no-console -- diagnostic trace, see helper docstring
+            console.log('[ggui:no-creds-card] click → settingsUrl =', settingsUrl);
+        }
+        setCtaState('working');
+        void requestOpenUrl(settingsUrl).then((result) => {
+            if (typeof console !== 'undefined') {
+                // eslint-disable-next-line no-console -- diagnostic trace, see helper docstring
+                console.log('[ggui:no-creds-card] requestOpenUrl resolved →', result);
+            }
+            const next = result.outcome === 'opened'
+                ? 'opened'
+                : result.outcome === 'copied'
+                    ? 'copied'
+                    : 'manual';
+            setCtaState(next);
+            if (typeof window !== 'undefined') {
+                window.setTimeout(() => setCtaState('idle'), OUTCOME_TTL_MS);
+            }
+        });
+    }, [settingsUrl]);
+    const ctaLabel = ctaState === 'working'
+        ? 'Opening…'
+        : ctaState === 'opened'
+            ? 'Opened in browser ✓'
+            : ctaState === 'copied'
+                ? 'URL copied — paste in your browser'
+                : ctaState === 'manual'
+                    ? 'Tap the URL above to copy'
+                    : 'Open settings';
+    const ctaDisabled = ctaState === 'working';
+    // Color tokens that auto-flip between light + dark mode. Only the
+    // tokens defined in BOTH `lightTheme` and `darkTheme` are safe to
+    // use without fallback divergence — `surface`, `text-primary`,
+    // `text-secondary`, and the gray scale (which is intentionally
+    // INVERTED in darkTheme so `gray-100` is light-on-dark when in
+    // dark mode and dark-on-light when in light mode).
+    //
+    //   - `--ggui-color-surface` — opaque card surface (white in light,
+    //     slate-800 in dark). Used for the URL block + QR backdrop.
+    //   - `--ggui-color-onSurface` — high-contrast body text.
+    //   - `--ggui-color-onSurfaceVariant` — muted captions/headings.
+    //   - `--ggui-color-neutral-100` — subtle tinted background that
+    //     auto-flips. Used for the inner "details" panel — slightly
+    //     differentiated from outer transparent canvas without being
+    //     a hard surface.
+    //   - `--ggui-color-neutral-200` — subtle outline that auto-flips.
+    return (
+    // Outer Card is forced transparent — when this card renders inside
+    // an MCP App iframe (claude.ai web, Claude Desktop), the host
+    // already draws its own chat-bubble surface. A second opaque
+    // background creates a card-on-card look. Padding stays so content
+    // doesn't crowd the iframe edges. Outside Claude (preview iframe,
+    // console inspector), the ThemeProvider's body background is the
+    // theme's `--ggui-color-surface`, so a transparent card just
+    // shows the theme's canvas behind it — also fine.
+    _jsx(Card, { padding: "lg", border: false, shadow: "none", style: { backgroundColor: 'transparent' }, children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "md", children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                gap: 'var(--ggui-spacing-3, 12px)',
+                            }, children: [_jsx(GguiWordmark, {}), _jsx(Badge, { variant: "info", children: "Setup needed" })] }), _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'baseline',
+                                gap: 'var(--ggui-spacing-3, 12px)',
+                                flexWrap: 'wrap',
+                            }, children: [_jsx(Heading, { level: 3, children: "Connect an LLM provider" }), _jsx("code", { style: {
+                                        fontFamily: 'var(--ggui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+                                        fontSize: 'var(--ggui-font-size-xs, 11px)',
+                                        color: 'var(--ggui-color-onSurfaceVariant, #71717a)',
+                                        opacity: 0.7,
+                                        userSelect: 'all',
+                                    }, title: "iframe-runtime build identifier \u2014 useful for diagnosing stale caches", children: BUILD_ID })] }), _jsx(Text, { style: {
+                                color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                lineHeight: '1.55',
+                            }, children: "ggui needs an LLM key to render UIs. Open this server\u2019s settings page to paste an Anthropic, OpenAI, Google, or OpenRouter API key." })] }), _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 'var(--ggui-spacing-3, 12px)',
+                        padding: 'var(--ggui-spacing-4, 16px)',
+                        background: 'var(--ggui-color-neutral-100, #f4f4f5)',
+                        border: '1px solid var(--ggui-color-neutral-200, #e4e4e7)',
+                        borderRadius: 'var(--ggui-shape-radius-md, 10px)',
+                    }, children: _jsxs("div", { style: {
+                            display: 'flex',
+                            gap: 'var(--ggui-spacing-4, 16px)',
+                            alignItems: 'flex-start',
+                            flexWrap: 'wrap',
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    gap: 'var(--ggui-spacing-2, 8px)',
+                                }, children: [_jsx("div", { style: {
+                                            padding: 'var(--ggui-spacing-2, 8px)',
+                                            background: '#ffffff',
+                                            borderRadius: 'var(--ggui-shape-radius-sm, 6px)',
+                                            lineHeight: 0,
+                                        }, children: _jsx(QrCode, { value: settingsUrl, size: 120, foreground: "#000000", background: "#ffffff" }) }), _jsx(Text, { variant: "caption", style: {
+                                            color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                            fontSize: 'var(--ggui-font-size-xs, 11px)',
+                                            textAlign: 'center',
+                                        }, children: "Scan with your phone" })] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 'var(--ggui-spacing-2, 8px)',
+                                    flex: '1 1 240px',
+                                    minWidth: '200px',
+                                }, children: [_jsx(Text, { variant: "caption", style: {
+                                            color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                            fontWeight: 'var(--ggui-font-weight-semibold, 600)',
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.06em',
+                                            fontSize: 'var(--ggui-font-size-xs, 11px)',
+                                        }, children: "Or open this URL in your browser" }), _jsx("div", { style: {
+                                            fontFamily: 'var(--ggui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+                                            fontSize: 'var(--ggui-font-size-sm, 13px)',
+                                            color: 'var(--ggui-color-onSurface, #111)',
+                                            wordBreak: 'break-all',
+                                            userSelect: 'all',
+                                            padding: 'var(--ggui-spacing-3, 12px)',
+                                            background: 'var(--ggui-color-surface, #fff)',
+                                            border: '1px solid var(--ggui-color-neutral-200, #e4e4e7)',
+                                            borderRadius: 'var(--ggui-shape-radius-sm, 6px)',
+                                            lineHeight: '1.45',
+                                        }, children: settingsUrl }), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 'var(--ggui-spacing-3, 12px)',
+                                            flexWrap: 'wrap',
+                                        }, children: [_jsx(Button, { variant: "primary", size: "md", onClick: onPrimary, disabled: ctaDisabled, children: ctaLabel }), ctaState === 'idle' || ctaState === 'working' ? (_jsx(Text, { variant: "caption", style: {
+                                                    color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                                                    opacity: 0.85,
+                                                }, children: "or tap-and-hold the URL above to copy" })) : null] })] })] }) }), intent ? (_jsxs(Text, { variant: "caption", style: {
+                        color: 'var(--ggui-color-onSurfaceVariant, #52525b)',
+                        opacity: 0.7,
+                    }, children: ["Pending prompt: ", intent] })) : null] }) }));
+}

package/dist/system-cards/ProtocolProbeCard.d.ts

@@ -0,0 +1,64 @@
+/**
+ * MCP Apps protocol probe system card.
+ *
+ * Diagnostic + regression fixture exercising every gesture surface
+ * the iframe runtime routes:
+ *
+ *   1. **Pattern β bridge** — `tools/call ggui_runtime_submit_action` (audit) +
+ *      `ui/update-model-context` (silent context) + `ui/message`
+ *      (consent prompt). Fires for cross-server / non-app-visible
+ *      `actionSpec[name].dispatch.tool` targets, OR any
+ *      `dispatch.kind === 'agent'` entry. Empirical-first reproduction
+ *      of the production `dispatchWiredAction` path.
+ *   2. **Pattern α direct fire** — `tools/call ggui_runtime_submit_action`
+ *      (audit) + `tools/call <T>` (direct, no consent prompt). Fires
+ *      for same-server, app-visible target tools. Probes against
+ *      `ggui_runtime_submit_action` itself (the only universally-app-visible
+ *      tool the iframe can be sure exists).
+ *   3. **Native-idiom: anchor click** — `ui/open-link` paired with
+ *      `kind: 'openLink'` audit. Triggered by the runtime's
+ *      capture-phase `<a href>` interceptor (cross-origin or
+ *      `target="_blank"`). The probe row simulates the postMessage
+ *      directly so the operator sees the envelope without needing to
+ *      click an anchor.
+ *   4. **Native-idiom: fullscreen** — `ui/request-display-mode` +
+ *      `kind: 'requestDisplayMode'` audit. Triggered by the runtime's
+ *      `Element.prototype.requestFullscreen` /
+ *      `Document.prototype.exitFullscreen` overrides. The probe row
+ *      simulates the postMessage; the row labelled "exitFullscreen"
+ *      sends `mode: 'inline'` per the spec'd inverse mapping.
+ *
+ * Each button transitions through `idle → pending → success | error`
+ * so the operator can see exactly which methods the embedding host
+ * (claude.ai web, Claude Desktop, …) actually honors today. The
+ * persistent receive-log captures every `ui/notifications/*` and
+ * host-issued request seen while the card is mounted.
+ *
+ * Why this lives outside the wire-context: system cards (`kind:
+ * 'mcp-apps-probe'`, `'no-credentials'`, …) mount in a render-only
+ * branch of `bootSelfContained` that does NOT install
+ * `<GguiWireProvider>` — they exist precisely to surface protocol
+ * state when the wire-context might not be live (auth missing,
+ * compile failed, etc.). The probe card mirrors the postMessage
+ * envelopes the runtime's gesture surfaces would emit, derived from
+ * the canonical `SubmitActionEnvelope` shape in
+ * `@ggui-ai/protocol/integrations/mcp-apps`.
+ *
+ * Originating context: an earlier runtime posted its outbound
+ * action dispatch only as `{method:'tools/call',
+ * name:'ggui_runtime_submit_action', ...}`. Per MCP Apps spec §401, hosts MUST
+ * reject `tools/call` from views for tools without `'app'` in
+ * visibility — claude.ai silently dropped the call. The original
+ * probe diagnosed the gap; the routing simplification work landed
+ * Pattern α / Pattern β / native idioms in response.
+ */
+import * as React from 'react';
+export interface ProtocolProbeCardProps {
+    /**
+     * Optional: the original prompt that triggered the probe push.
+     * Surfaced as a footnote so the card matches the framing of other
+     * system cards (`NoCredentialsCard`).
+     */
+    readonly intent?: string;
+}
+export declare function ProtocolProbeCard({ intent, }: ProtocolProbeCardProps): React.JSX.Element;