@ggui-ai/ui-visual-tester 0.24.0 → 0.25.0

package/fixture/fixture-runtime.js

@@ -28577,6 +28577,7 @@
     buildWireConfig: () => buildWireConfig,
     connectionSource: () => connectionSource,
     useAction: () => useAction,
+    useActionPending: () => useActionPending,
     useActionSpent: () => useActionSpent,
     useApp: () => useApp,
     useAuth: () => useAuth,
@@ -28679,8 +28680,19 @@
     return (0, import_react35.useSyncExternalStore)(subscribe, read, read);
   }
 
-  // ../wire/dist/useGguiContext.js
+  // ../wire/dist/action-pending.js
   var import_react36 = __toESM(require_react(), 1);
+  var ActionPendingContext = (0, import_react36.createContext)(null);
+  var noSubscription2 = () => () => void 0;
+  function useActionPending(actionName) {
+    const source = (0, import_react36.useContext)(ActionPendingContext);
+    const subscribe = (0, import_react36.useCallback)((listener) => source === null ? noSubscription2() : source.subscribe(listener), [source]);
+    const read = (0, import_react36.useCallback)(() => source === null ? false : source.isPending(actionName), [source, actionName]);
+    return (0, import_react36.useSyncExternalStore)(subscribe, read, read);
+  }
+
+  // ../wire/dist/useGguiContext.js
+  var import_react37 = __toESM(require_react(), 1);
   function useGguiContext(slotName) {
     const contextName = slotName.length === 0 ? "Context" : slotName.charAt(0).toUpperCase() + slotName.slice(1) + "Context";
     const registry = globalThis.__ggui__?.contexts;
@@ -28688,19 +28700,19 @@
     if (!ctx) {
       throw new Error(`[ggui] useGguiContext('${slotName}'): no Context registered. The contract must declare 'contextSpec.${slotName}' AND the runtime must have synthesized the per-slot React Context at boot. If you see this in production code generated by the LLM, the boilerplate's destructure line drifted from the contract.`);
     }
-    return (0, import_react36.useContext)(ctx);
+    return (0, import_react37.useContext)(ctx);
   }
 
   // ../wire/dist/useStream.js
-  var import_react37 = __toESM(require_react(), 1);
+  var import_react38 = __toESM(require_react(), 1);
   function useStream(channelName) {
     const { subscribe } = useWireContext();
-    const [latest, setLatest] = (0, import_react37.useState)(null);
-    const [all, setAll] = (0, import_react37.useState)([]);
-    const [isComplete, setIsComplete] = (0, import_react37.useState)(false);
-    const allRef = (0, import_react37.useRef)(all);
+    const [latest, setLatest] = (0, import_react38.useState)(null);
+    const [all, setAll] = (0, import_react38.useState)([]);
+    const [isComplete, setIsComplete] = (0, import_react38.useState)(false);
+    const allRef = (0, import_react38.useRef)(all);
     allRef.current = all;
-    (0, import_react37.useEffect)(() => {
+    (0, import_react38.useEffect)(() => {
       return subscribe(channelName, (delivery) => {
         const typed = delivery.payload;
         setLatest(typed);
@@ -28738,7 +28750,7 @@
   }
 
   // ../wire/dist/useRender.js
-  var import_react38 = __toESM(require_react(), 1);
+  var import_react39 = __toESM(require_react(), 1);
 
   // ../wire/dist/connection-store.js
   var ConnectionWriterConflictError = class extends Error {
@@ -28835,7 +28847,7 @@
   // ../wire/dist/useRender.js
   function useRender() {
     const { render } = useWireContext();
-    const isConnected = (0, import_react38.useSyncExternalStore)(connectionSource.subscribe, connectionSource.getSnapshot, connectionSource.getSnapshot);
+    const isConnected = (0, import_react39.useSyncExternalStore)(connectionSource.subscribe, connectionSource.getSnapshot, connectionSource.getSnapshot);
     return { sessionId: render.sessionId, isConnected };
   }
 
@@ -29411,6 +29423,7 @@
       }
     }
   };
+  var DEFAULT_ACTION_PENDING_BOUND_MS = 2e4;
   function buildWireConfig(opts) {
     let internalSeq = 0;
     const nextClientSeq = opts.nextClientSeq ?? (() => {
@@ -29435,8 +29448,43 @@
       }
     };
     opts.spentInputsChanged?.(notifySpent);
+    const pendingBoundMs = opts.actionPendingBoundMs ?? DEFAULT_ACTION_PENDING_BOUND_MS;
+    const pending = /* @__PURE__ */ new Map();
+    const pendingListeners = /* @__PURE__ */ new Set();
+    const notifyPending = () => {
+      for (const listener of [...pendingListeners])
+        listener();
+    };
+    const markPending = (actionName) => {
+      const previous = pending.get(actionName);
+      if (previous !== void 0)
+        clearTimeout(previous);
+      pending.set(actionName, setTimeout(() => {
+        pending.delete(actionName);
+        notifyPending();
+      }, pendingBoundMs));
+      notifyPending();
+    };
+    const actionPending = {
+      isPending: (actionName) => pending.has(actionName),
+      subscribe: (listener) => {
+        pendingListeners.add(listener);
+        return () => {
+          pendingListeners.delete(listener);
+        };
+      }
+    };
+    opts.pendingInputsChanged?.(() => {
+      if (pending.size === 0)
+        return;
+      for (const timer of pending.values())
+        clearTimeout(timer);
+      pending.clear();
+      notifyPending();
+    });
     return {
       actionSpent,
+      actionPending,
       app: opts.app,
       render: opts.render,
       auth: opts.auth,
@@ -29476,6 +29524,7 @@
           notifySpent();
         }
         opts.emitEnvelope(envelope);
+        markPending(actionName);
       },
       subscribe: (channelName, handler) => {
         return opts.streamBus.subscribe(channelName, (env) => {
@@ -32469,12 +32518,18 @@
 
   // ../design/dist/themes/ThemeProvider.js
   var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
-  var import_react39 = __toESM(require_react(), 1);
-  var ThemeContext = (0, import_react39.createContext)(null);
+  var import_react40 = __toESM(require_react(), 1);
+  var ThemeContext = (0, import_react40.createContext)(null);
 
   // ../design/dist/rendering/css-tokens.js
   var EXPANDED_FRAME = { outerRadiusVar: "--ggui-shape-radius-xl", insetPx: 16 };
   var EXPANDED_FRAME_INNER_RADIUS = `max(0px, calc(var(${EXPANDED_FRAME.outerRadiusVar}) - ${EXPANDED_FRAME.insetPx}px))`;
+  var EXPANDED_FRAME_CHROME = {
+    radius: `var(${EXPANDED_FRAME.outerRadiusVar})`,
+    hairline: "color-mix(in srgb, var(--ggui-color-onGround) 6%, transparent)",
+    shadowVar: "--ggui-shape-shadow-sm",
+    ground: "var(--ggui-color-neutral-50)"
+  };
 
   // ../design/dist/rendering/rewrite-imports.js
   var WIRE_EXPORTS = [
@@ -32494,6 +32549,10 @@
     // its runtime's shim lacks fails at module link. A card generated to use it
     // must never meet a runtime without it.
     "useActionSpent",
+    // ggui#1398: whether a dispatched action is waiting for the agent's answer,
+    // as data. Served one release before the triad teaches it, for the same
+    // reason as `useActionSpent` above.
+    "useActionPending",
     // Provider component
     "GguiWireProvider"
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/ui-visual-tester",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Behavioral validator for ggui-generated component code. Renders a component in real Chromium via Playwright, clicks each action declared in its contract, and verifies the action actually does something — mutating bound state or dispatching to the agent. Catches buttons wired to no-op handlers that structural validators miss. Playwright is an optional peer dependency, injected by the caller.",
   "keywords": [
     "ggui",
@@ -53,9 +53,9 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@ggui-ai/design": "0.24.0",
-    "@ggui-ai/protocol": "0.24.0",
-    "@ggui-ai/wire": "0.24.0"
+    "@ggui-ai/protocol": "0.25.0",
+    "@ggui-ai/wire": "0.25.0",
+    "@ggui-ai/design": "0.25.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",