@ggui-ai/iframe-runtime 0.12.0 → 0.14.0

package/dist/system-cards/UiFeedbackCard.js

@@ -1,17 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * UiFeedbackCard — the runtime's in-iframe UI-feedback affordance
  * ("did this generated UI work for you?").
  *
  * The in-iframe twin of the host-chrome `UiFeedback` component in
- * `@ggui-ai/mcp-apps-react`: same three verdicts — Love / Dislike / Other
- * (free-text comment) — same acknowledgement after submit, same
- * dismiss control, same payload semantics (trimmed comment only on
- * `verdict: 'other'`, context stamps present exactly when known).
- * Where the host-chrome twin hands a payload to an `onUiFeedback`
- * callback, this card builds a {@link UiFeedbackEvent} and hands it to
- * the injected {@link ObservabilityEmitter} — production binds the
- * `ggui:observe` postMessage-to-parent default, tests record.
+ * `@ggui-ai/mcp-apps-react`: same two verdicts — thumbs up / thumbs
+ * down (#653) — same acknowledgement after submit, same dismiss
+ * control, same payload semantics (context stamps present exactly when
+ * known). Where the host-chrome twin hands a payload to an
+ * `onUiFeedback` callback, this card builds a {@link UiFeedbackEvent}
+ * and hands it to the injected {@link ObservabilityEmitter} —
+ * production binds the `ggui:observe` postMessage-to-parent default,
+ * tests record.
+ *
+ * The verdict buttons are icon-only: monochrome stroked SVGs drawn in
+ * `currentColor`, so the icon ink follows the button's `--ggui-*`
+ * color token in both modes (the #653 theme-applicability
+ * requirement). The verdict's name lives in the `aria-label`.
  *
  * This is CHROME the runtime mounts adjacent to the session root
  * (see `ui-feedback-chrome.ts`), NOT a system card: it has no
@@ -56,6 +61,8 @@ function buildStyles(scheme) {
         },
         verdictButton: {
             appearance: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
             background: dark
                 ? 'var(--ggui-color-neutral-50, #1f2937)'
                 : 'var(--ggui-color-neutral-50, #f9fafb)',
@@ -63,9 +70,10 @@ function buildStyles(scheme) {
                 ? '1px solid var(--ggui-color-neutral-200, #374151)'
                 : '1px solid var(--ggui-color-neutral-200, #e5e7eb)',
             borderRadius: 'var(--ggui-shape-radius-sm, 4px)',
-            padding: '2px 8px',
+            padding: '3px 7px',
             fontFamily: 'inherit',
             fontSize: 'inherit',
+            // The icons stroke in currentColor — this token IS the icon ink.
             color: dark
                 ? 'var(--ggui-color-neutral-600, #d1d5db)'
                 : 'var(--ggui-color-neutral-600, #4b5563)',
@@ -83,51 +91,34 @@ function buildStyles(scheme) {
                 : 'var(--ggui-color-neutral-400, #9ca3af)',
             cursor: 'pointer',
         },
-        commentForm: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 4,
-            margin: 0,
-        },
-        commentInput: {
-            fontFamily: 'inherit',
-            fontSize: 'inherit',
-            padding: '2px 6px',
-            minWidth: 140,
-            border: dark
-                ? '1px solid var(--ggui-color-neutral-200, #374151)'
-                : '1px solid var(--ggui-color-neutral-200, #e5e7eb)',
-            borderRadius: 'var(--ggui-shape-radius-sm, 4px)',
-            background: dark
-                ? 'var(--ggui-color-neutral-50, #111827)'
-                : 'var(--ggui-color-neutral-50, #ffffff)',
-            color: dark
-                ? 'var(--ggui-color-neutral-800, #e5e7eb)'
-                : 'var(--ggui-color-neutral-800, #1f2937)',
-        },
     };
 }
+/**
+ * Monochrome stroked thumb icons. `stroke="currentColor"` is the
+ * theme-applicability contract: the glyph takes whatever ink the
+ * button's `color` token resolves to, in either mode.
+ */
+function ThumbIcon({ direction, }) {
+    return (_jsx("svg", { width: 13, height: 13, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: direction === 'up' ? (_jsxs(_Fragment, { children: [_jsx("path", { d: "M7 10v12" }), _jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: "M17 14V2" }), _jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })] })) }));
+}
+const VERDICT_LABELS = {
+    up: 'Thumbs up',
+    down: 'Thumbs down',
+};
 export function UiFeedbackCard({ emit, sessionId, toolName, }) {
     const [phase, setPhase] = React.useState('idle');
-    const [comment, setComment] = React.useState('');
     const scheme = useColorScheme();
     const styles = buildStyles(scheme);
-    const send = React.useCallback((verdict, commentText) => {
-        const trimmed = commentText?.trim();
+    const send = React.useCallback((verdict) => {
         emit({
             kind: 'ui-feedback',
             verdict,
-            ...(trimmed !== undefined && trimmed.length > 0 ? { comment: trimmed } : {}),
             ...(sessionId !== undefined ? { sessionId } : {}),
             ...(toolName !== undefined ? { toolName } : {}),
         });
         setPhase('sent');
     }, [emit, sessionId, toolName]);
-    const onCommentSubmit = React.useCallback((e) => {
-        e.preventDefault();
-        send('other', comment);
-    }, [send, comment]);
     if (phase === 'dismissed')
         return null;
-    return (_jsxs("div", { "data-ggui-ui-feedback": true, role: "group", "aria-label": "Share feedback on this UI", style: styles.root, children: [phase === 'sent' ? (_jsx("span", { "data-ggui-ui-feedback-thanks": true, children: "Thanks for the feedback" })) : phase === 'comment' ? (_jsxs("form", { onSubmit: onCommentSubmit, style: styles.commentForm, "data-ggui-ui-feedback-comment-form": true, children: [_jsx("input", { type: "text", value: comment, onChange: (e) => setComment(e.target.value), placeholder: "What happened?", "aria-label": "Feedback comment", "data-ggui-ui-feedback-comment": true, style: styles.commentInput, autoFocus: true }), _jsx("button", { type: "submit", style: styles.verdictButton, "data-ggui-ui-feedback-send": true, children: "Send" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", style: styles.verdictButton, "data-ggui-ui-feedback-verdict": "love", onClick: () => send('love'), children: "Love" }), _jsx("button", { type: "button", style: styles.verdictButton, "data-ggui-ui-feedback-verdict": "dislike", onClick: () => send('dislike'), children: "Dislike" }), _jsx("button", { type: "button", style: styles.verdictButton, "data-ggui-ui-feedback-verdict": "other", onClick: () => setPhase('comment'), children: "Other\u2026" })] })), _jsx("button", { type: "button", style: styles.dismissButton, "aria-label": "Dismiss feedback", "data-ggui-ui-feedback-dismiss": true, onClick: () => setPhase('dismissed'), children: '×' })] }));
+    return (_jsxs("div", { "data-ggui-ui-feedback": true, role: "group", "aria-label": "Share feedback on this UI", style: styles.root, children: [phase === 'sent' ? (_jsx("span", { "data-ggui-ui-feedback-thanks": true, children: "Thanks for the feedback" })) : (['up', 'down'].map((verdict) => (_jsx("button", { type: "button", style: styles.verdictButton, "data-ggui-ui-feedback-verdict": verdict, "aria-label": VERDICT_LABELS[verdict], title: VERDICT_LABELS[verdict], onClick: () => send(verdict), children: _jsx(ThumbIcon, { direction: verdict }) }, verdict)))), _jsx("button", { type: "button", style: styles.dismissButton, "aria-label": "Dismiss feedback", "data-ggui-ui-feedback-dismiss": true, onClick: () => setPhase('dismissed'), children: '×' })] }));
 }

package/dist/ui-feedback-chrome.d.ts

@@ -15,6 +15,36 @@ import type { ObservabilityEmitter } from './observability.js';
  */
 export declare const UI_FEEDBACK_CHROME_Z_INDEX = 2147483647;
 export declare const ACTION_TOAST_Z_INDEX = 2147483646;
+/** Inputs to the boot path's mount decision — see
+ * {@link shouldMountUiFeedbackChrome}. */
+export interface UiFeedbackMountDecisionInput {
+    /**
+     * The opt-in knob from the boot options (#653). Feedback chrome is
+     * DEFAULT OFF: only an explicit `true` can mount it.
+     */
+    readonly uiFeedback: boolean | undefined;
+    /** Whether the boot bound an `onObserve` emitter. */
+    readonly onObserveBound: boolean;
+    /** The MCP-Apps host's announced name, when known. */
+    readonly hostName: string | undefined;
+}
+/**
+ * Pure mount decision the boot path consults before touching the DOM.
+ * Two independent gates compose:
+ *
+ *   1. **The #653 opt-in knob** — the founder's default-off ruling:
+ *      generated-component cards carry NO feedback chrome unless the
+ *      embedding deployment explicitly opts in (`uiFeedback: true` on
+ *      the boot options). Absent or `false` ⇒ never mount, regardless
+ *      of sink state.
+ *   2. **The #471 live-sink gate** — even opted in, only a parent that
+ *      actually consumes the `ggui:observe` envelope gets the
+ *      affordance: a bound `onObserve` emitter, or the first-party
+ *      embed host. Third-party MCP-Apps hosts drop the envelope, and a
+ *      feedback control that can never deliver feedback is worse than
+ *      none.
+ */
+export declare function shouldMountUiFeedbackChrome(input: UiFeedbackMountDecisionInput): boolean;
 export interface UiFeedbackChromeOptions {
     /**
      * Observability sink the card emits `ui-feedback` events into.

package/dist/ui-feedback-chrome.js

@@ -52,6 +52,28 @@ import { createElement } from 'react';
  */
 export const UI_FEEDBACK_CHROME_Z_INDEX = 2147483647;
 export const ACTION_TOAST_Z_INDEX = 2147483646;
+/**
+ * Pure mount decision the boot path consults before touching the DOM.
+ * Two independent gates compose:
+ *
+ *   1. **The #653 opt-in knob** — the founder's default-off ruling:
+ *      generated-component cards carry NO feedback chrome unless the
+ *      embedding deployment explicitly opts in (`uiFeedback: true` on
+ *      the boot options). Absent or `false` ⇒ never mount, regardless
+ *      of sink state.
+ *   2. **The #471 live-sink gate** — even opted in, only a parent that
+ *      actually consumes the `ggui:observe` envelope gets the
+ *      affordance: a bound `onObserve` emitter, or the first-party
+ *      embed host. Third-party MCP-Apps hosts drop the envelope, and a
+ *      feedback control that can never deliver feedback is worse than
+ *      none.
+ */
+export function shouldMountUiFeedbackChrome(input) {
+    if (input.uiFeedback !== true)
+        return false;
+    return (input.onObserveBound ||
+        input.hostName === 'ggui-iframe-runtime-embed-host');
+}
 /**
  * Mount the in-iframe UI-feedback affordance, or do nothing.
  *

package/dist/wire-config.js

@@ -1,9 +1,12 @@
 import { buildWireConfig, StreamBus, } from '@ggui-ai/wire';
 import { validateOutboundActionEnvelope } from './validation.js';
 import { defaultProtocolErrorEmitter, fromClientContractViolation, } from './protocol-error.js';
-// `StreamBus` (and its bounded reserved-channel replay ring) was
-// hoisted into `@ggui-ai/wire` so `<GguiRender>` and this runtime share
-// one implementation. Re-exported for the runtime's internal modules.
+// `StreamBus` (and its bounded reserved-channel replay ring) lives in
+// `@ggui-ai/wire` (one implementation for every first-party renderer).
+// It was originally hoisted to share with `<GguiRender>` — that
+// component and its WS action path are DELETED (react host-helper
+// ruling; ggui#599 cycle-2 caught the stale reference here) — and the
+// hoist stands on its own merits. Re-exported for internal modules.
 export { StreamBus };
 /**
  * Build the per-render `WireConfig` for the iframe runtime.
@@ -44,6 +47,9 @@ export function buildRootWireConfig(opts) {
     }
     return buildWireConfig({
         app: { appId: opts.appId, appName: opts.appId },
+        // `isConnected` here is the static config field; `useRender()`
+        // reads the LIVE value from wire's document connection store,
+        // which the runtime writes at the relay latch's edges (ggui#670).
         render: { sessionId: opts.sessionId, isConnected: true },
         auth: { isAuthenticated: false },
         // Resolve the active render's actionSpec on every dispatch.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/iframe-runtime",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "The iframe-local ggui runtime: a self-contained ESM bundle that boots inside an MCP Apps host iframe, runs the protocol-version handshake, opens the live-channel WebSocket, and mounts the rendered UI. Bundles React, ReactDOM, and the ggui design system so generated component code has a single seam to read from.",
   "keywords": [
     "ggui",
@@ -28,6 +28,11 @@
       "types": "./dist/server.d.ts",
       "import": "./dist/server.js",
       "default": "./dist/server.js"
+    },
+    "./observability": {
+      "types": "./dist/observability.d.ts",
+      "import": "./dist/observability.js",
+      "default": "./dist/observability.js"
     }
   },
   "dependencies": {
@@ -36,12 +41,12 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.3.6",
-    "@ggui-ai/design": "0.12.0",
-    "@ggui-ai/live-channel": "0.12.0",
-    "@ggui-ai/gadgets": "0.12.0",
-    "@ggui-ai/preview-a2ui": "0.12.0",
-    "@ggui-ai/protocol": "0.12.0",
-    "@ggui-ai/wire": "0.12.0"
+    "@ggui-ai/gadgets": "0.14.0",
+    "@ggui-ai/preview-a2ui": "0.14.0",
+    "@ggui-ai/live-channel": "0.14.0",
+    "@ggui-ai/protocol": "0.14.0",
+    "@ggui-ai/design": "0.14.0",
+    "@ggui-ai/wire": "0.14.0"
   },
   "peerDependencies": {
     "@modelcontextprotocol/sdk": "^1.27.0"
@@ -52,7 +57,7 @@
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "esbuild": "^0.25.12",
+    "esbuild": "^0.28.2",
     "jsdom": "^24.0.0",
     "tsx": "^4.21.0",
     "typescript": "^5.0.0",
@@ -71,11 +76,11 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "author": "ggui contributors <hello@ggui.ai>",
   "scripts": {
-    "build": "rm -rf dist && node esbuild.config.mjs && tsc -p tsconfig.types.json && pnpm run check:bundle-size",
+    "build": "rm -rf dist.staging-$$ && tsc -p tsconfig.types.json --outDir dist.staging-$$ && GGUI_ESBUILD_OUT_DIR=dist.staging-$$ node esbuild.config.mjs && node ../scripts/atomic-swap.mjs dist.staging-$$ dist && pnpm run check:bundle-size",
     "check:bundle-size": "tsx scripts/check-bundle-size.ts",
     "check:bundle-size:self-test": "tsx scripts/check-bundle-size.ts --self-test",
     "typecheck": "tsc --noEmit",