@buoy-gg/shared-ui 7.0.30 → 7.0.31

package/lib/module/dataViewer/useTreeEditor.js

@@ -0,0 +1,101 @@
+"use strict";
+
+/**
+ * Everything editing a tree document involves, minus how it looks.
+ *
+ * The phone and the dashboard run the same editor: one buffered draft, one
+ * write on save, a selection the structural actions operate on, a modal for
+ * typing a value, and a guard so closing can't silently drop unsaved work.
+ * What differs is presentation — thumb-sized tiles under a full screen versus
+ * chips docked in a panel — which is a rendering concern and nothing more.
+ *
+ * Keeping the rules here means the surfaces (and the tools — storage keys and
+ * zustand stores run this same hook) can't drift on the things that would
+ * actually hurt: whether a boolean opens an editor, whether a failed write
+ * closes the editor anyway, what "dirty" means.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { getAtPath } from "./jsonOps.js";
+import { useTreeDraft } from "./useTreeDraft.js";
+export function useTreeEditor({
+  value,
+  save,
+  onClose,
+  confirmDiscard
+}) {
+  const draft = useTreeDraft(value, save);
+  const [selection, setSelection] = useState(null);
+  const [valuePath, setValuePath] = useState(null);
+  const {
+    begin
+  } = draft;
+  useEffect(() => {
+    begin();
+    // Seed the draft ONCE, when the editor opens. `begin` closes over the live
+    // value, whose identity changes every time the list refreshes underneath
+    // us (a parsed JSON string is a new object each pass), so re-running would
+    // reset the draft mid-edit and discard the user's work.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /**
+   * "Change this node". For a boolean that's a flip rather than a modal — the
+   * same rule `treeActionsFor` applies to the action controls, so the gesture
+   * and the button can't mean different things.
+   */
+  const openValueEditor = useCallback(path => {
+    const current = getAtPath(draft.value, path);
+    if (typeof current === "boolean") {
+      draft.apply({
+        kind: "replace",
+        path,
+        value: !current
+      });
+      return;
+    }
+    setValuePath(path);
+  }, [draft]);
+  const applyValue = useCallback(next => {
+    draft.apply({
+      kind: "replace",
+      path: valuePath ?? [],
+      value: next
+    });
+    setValuePath(null);
+  }, [draft, valuePath]);
+
+  // Only leave once the write actually landed — `commit` resolves false and
+  // keeps the draft on screen when the owner refuses it, and closing anyway
+  // would throw the work away while showing an error nobody ever sees.
+  const saveAndClose = useCallback(() => {
+    void draft.commit().then(saved => saved && onClose());
+  }, [draft, onClose]);
+  const requestClose = useCallback(() => {
+    if (!draft.isDirty) {
+      onClose();
+      return;
+    }
+    // The draft is the only copy of this work, so closing over it silently is
+    // the one way this editor can lose something the user can't get back.
+    confirmDiscard({
+      save: saveAndClose,
+      discard: () => {
+        draft.discard();
+        onClose();
+      }
+    });
+  }, [confirmDiscard, draft, onClose, saveAndClose]);
+  return {
+    draft,
+    selection,
+    setSelection,
+    valuePath,
+    openValueEditor,
+    closeValueEditor: () => setValuePath(null),
+    applyValue,
+    openRawEditor: () => setValuePath([]),
+    requestClose,
+    saveAndClose
+  };
+}

package/lib/module/env/EnvironmentIndicator.js

@@ -89,7 +89,13 @@ export function EnvironmentIndicator({
       style: {
         fontSize: 11,
         fontWeight: "600",
-        fontFamily: "Poppins-SemiBold",
+        // No fontFamily on purpose: the platform UI font (SF Pro / Roboto)
+        // is what this badge is meant to look like, and it is what the DOM
+        // twin in EnvironmentIndicator.web.tsx has always rendered. This
+        // used to name "Poppins-SemiBold" — a family no app, package or
+        // example in the repo has ever loaded, so it resolved nowhere:
+        // silently the system font on device, and the browser's default
+        // SERIF under react-native-web (the docs demo).
         color: gameUIColors.primaryLight,
         letterSpacing: 0.5
       },

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-24T23:44:23.535Z
+ * Generated at: 2026-08-29T17:41:46.184Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/index.js

@@ -6,6 +6,8 @@ export * from "./ui/index.js";
 // Store base classes
 export * from "./stores/index.js";
 export * from "./sync/wireBudget.js";
+export * from "./sync/toolActionRegistry.js";
+export * from "./sync/toolUiBridge.js";
 
 // Utils exports - selectively export to avoid conflicts
 export {

package/lib/module/license/tierLimits.js

@@ -100,6 +100,20 @@ const LIMITS = {
     anonymous: 1,
     free: 3,
     pro: Infinity
+  },
+  // ── scenarios ─────────────────────────────────────────────────────────────
+  // The SCENARIO is the unit, not the rules it creates: a free user's
+  // three-endpoint scenario either runs whole or refuses up front, and is never
+  // silently trimmed to one rule mid-run. Enforcement is atomic in pre-flight.
+  "scenarios.saved": {
+    anonymous: 1,
+    free: 3,
+    pro: Infinity
+  },
+  "scenarios.active": {
+    anonymous: 1,
+    free: 1,
+    pro: 3
   }
 };
 export const TIER_LIMITS = LIMITS;

package/lib/module/storage/devToolsStorageKeys.js

@@ -128,6 +128,18 @@ export const devToolsStorageKeys = {
     root: () => `${devToolsStorageKeys.base}_time_machine`,
     diffViewerMode: () => `${devToolsStorageKeys.timeMachine.root()}_diff_viewer_mode` // 'split' | 'tree'
   },
+  /**
+   * Scenarios storage keys. The library (saved + draft scenarios) and the
+   * active-scenario record live in separate keys deliberately: the active
+   * record is written on every run and deactivation, while the library changes
+   * rarely, and a single blob would rewrite the whole library each run.
+   */
+  scenarios: {
+    root: () => `${devToolsStorageKeys.base}_scenarios`,
+    modal: () => `${devToolsStorageKeys.scenarios.root()}_modal`,
+    library: () => `${devToolsStorageKeys.scenarios.root()}_library`,
+    active: () => `${devToolsStorageKeys.scenarios.root()}_active`
+  },
   /**
    * React Query-related storage keys
    */
@@ -202,16 +214,40 @@ export const devToolsStorageKeys = {
     settings: () => `${devToolsStorageKeys.benchmark.root()}_settings`,
     selectedReports: () => `${devToolsStorageKeys.benchmark.root()}_selected_reports`
   },
+  /**
+   * Debug Borders overlay keys
+   */
+  debugBorders: {
+    root: () => `${devToolsStorageKeys.base}_debug_borders`,
+    /** JsModal `persistenceKey` for the overlay's info window. */
+    infoModal: () => `${devToolsStorageKeys.debugBorders.root()}_info_modal`
+  },
   /**
    * Unified events-related storage keys
    */
   events: {
     root: () => `${devToolsStorageKeys.base}_events`,
+    /**
+     * NOT what the Events tool uses. Its preset passes the literal
+     * `"buoy-events-modal"` to JsModal, and three things outside this repo's
+     * runtime now pin that string: the website's live tour, its QA script, and
+     * the e2e runner's reset. `isDevToolsStorageKey` treats the `buoy-` prefix
+     * as internal, so nothing leaks — this is a naming inconsistency, not a
+     * bug, and moving the key would cost a coordinated change across four
+     * surfaces to buy tidiness. Kept so the shape of this file stays uniform.
+     */
     modal: () => `${devToolsStorageKeys.events.root()}_modal`,
     /** Selected badge/source filters */
     enabledSources: () => `${devToolsStorageKeys.events.root()}_enabled_sources`,
     /** Whether event capturing is active */
     isCapturing: () => `${devToolsStorageKeys.events.root()}_is_capturing`,
+    /**
+     * When capture was last switched off (ms epoch). Persisted with the
+     * capturing flag so a remount/relaunch while paused keeps hiding events
+     * captured into the shared store after the ORIGINAL pause moment (a
+     * watching dashboard keeps sources alive through the device's pause).
+     */
+    pausedAt: () => `${devToolsStorageKeys.events.root()}_paused_at`,
     /** Copy/export settings */
     copySettings: () => `${devToolsStorageKeys.events.root()}_copy_settings`
   }

package/lib/module/sync/toolActionRegistry.js

@@ -0,0 +1,154 @@
+"use strict";
+
+/**
+ * toolActionRegistry — the on-device twin of the broker's action dispatch.
+ *
+ * Buoy already has exactly one place where `{toolId, action, params}` becomes a
+ * real call into a tool: `handleAction` in external-sync, fed by the adapter
+ * map that `autoExternalSync` assembles. That map was private to the React
+ * tree, so anything running ON the device (the Scenarios runner) had no way to
+ * reach it and would have had to duplicate the map — two dispatch paths that
+ * drift the first time an adapter changes.
+ *
+ * This module publishes the SAME map through a global seam, so a scenario step,
+ * a desktop click and an MCP call are one code path with two entry points.
+ *
+ * WHY A GLOBAL, NOT AN IMPORT: the map is built inside a component (the
+ * react-query adapter is a hook, the env adapter is a factory closed over a
+ * prop, and custom tools arrive as props), so it cannot be a module constant.
+ * Meanwhile the consumer must not import `@buoy-gg/core` — that package imports
+ * the tools, and a tool importing it back is the require cycle that puts a
+ * LogBox on every reload. Same reasoning, and the same shape, as
+ * `crashFlush.ts` in external-sync.
+ *
+ * WE STORE A GETTER, NOT A SNAPSHOT, for the reason `attachDeviceSync` does:
+ * the adapter map is re-created on renders that change its inputs, and a stale
+ * captured copy would keep dispatching into adapters the tree has replaced.
+ *
+ * SAFETY: this registry is populated only while `AutoExternalSync` is mounted,
+ * which is itself gated (dev, or release + an explicit opt-in + a real Pro
+ * license). It is deliberately NOT a substitute for a caller's own production
+ * gate — anything that bends app state through it must check `__DEV__` itself,
+ * because the actions reachable here (network overrides, storage writes,
+ * impersonation) have no business running in a shipped app.
+ */
+
+const REGISTRY_KEY = "__buoyToolActionRegistry";
+
+/** The duck-typed adapter shape, matching external-sync's `ToolSyncAdapter`. */
+
+/**
+ * A SET of getters, not one slot — React can briefly mount two providers, or
+ * re-run an effect's setup before the previous cleanup. A last-writer-wins slot
+ * would let the second registration silently blank the first.
+ */
+
+function sources() {
+  const g = globalThis;
+  if (!g[REGISTRY_KEY]) g[REGISTRY_KEY] = new Set();
+  return g[REGISTRY_KEY];
+}
+
+/**
+ * Publish the live adapter map. Called by `autoExternalSync` with a getter that
+ * reads its current `useMemo` value. Returns the unregister function.
+ */
+export function registerToolAdapters(getTools) {
+  const set = sources();
+  set.add(getTools);
+  return () => {
+    set.delete(getTools);
+  };
+}
+
+/** The merged adapter map across every live source. */
+export function getToolAdapters() {
+  const merged = {};
+  for (const get of sources()) {
+    try {
+      Object.assign(merged, get());
+    } catch {
+      // A source that throws must not take the whole registry down.
+    }
+  }
+  return merged;
+}
+
+/** Tool ids currently dispatchable. */
+export function listToolIds() {
+  return Object.keys(getToolAdapters());
+}
+
+/** `toolId -> action names`, for pre-flight validation and capability display. */
+export function listToolActions() {
+  const out = {};
+  for (const [id, adapter] of Object.entries(getToolAdapters())) {
+    out[id] = Object.keys(adapter.actions ?? {});
+  }
+  return out;
+}
+
+/**
+ * Tool ids whose adapter publishes a `getSnapshot`.
+ *
+ * Buoy's read surface is split in two: some tools answer through `actions`
+ * (`listQueries`, `async.getAllKeys`), and some answer only through the
+ * snapshot the sync layer polls — console entries, network events, the route
+ * sitemap, the env table. Anything driving tools ON the device sees only the
+ * first half unless it asks for the second, which is why the console and
+ * network panels look empty to an in-app agent that has an action for
+ * everything except reading them.
+ */
+export function listSnapshotToolIds() {
+  return Object.entries(getToolAdapters()).filter(([, adapter]) => typeof adapter.getSnapshot === "function").map(([id]) => id);
+}
+
+/**
+ * Read one tool's snapshot — the same value `attachDeviceSync` puts on the wire
+ * for MCP's `get_snapshot`, without a socket.
+ *
+ * Async to match {@link dispatchToolAction}: every caller already awaits, and
+ * an adapter is free to make this a promise later without breaking them.
+ */
+export async function readToolSnapshot(toolId) {
+  const tools = getToolAdapters();
+  const adapter = tools[toolId];
+  if (!adapter) throw new Error(`Unknown tool "${toolId}"`);
+  if (typeof adapter.getSnapshot !== "function") {
+    throw new Error(`Tool "${toolId}" has no snapshot to read`);
+  }
+  return await adapter.getSnapshot();
+}
+export function isToolRegistryReady() {
+  return sources().size > 0;
+}
+
+/**
+ * Dispatch one action, shaping failures exactly as `handleAction` does: an
+ * unknown tool and an unknown action are distinguishable, and adapter errors
+ * surface as plain messages rather than objects nobody can read on a phone.
+ */
+export async function dispatchToolAction(toolId, action, params) {
+  const tools = getToolAdapters();
+  const tool = tools[toolId];
+  const fn = tool?.actions?.[action];
+  if (!fn) {
+    throw new Error(tool ? `Unknown action "${action}" on tool "${toolId}"` : `Unknown tool "${toolId}"`);
+  }
+  return await fn(params);
+}
+
+/**
+ * Wait for the registry to be populated, for the narrow window between first
+ * frame and `AutoExternalSync` mounting. Resolves false on timeout so the
+ * caller can say "Buoy tools are still starting up" instead of "unknown tool".
+ */
+export async function waitForToolRegistry(timeoutMs = 2000) {
+  if (isToolRegistryReady()) return true;
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    await new Promise(r => setTimeout(r, 50));
+    if (isToolRegistryReady()) return true;
+  }
+  return false;
+}

package/lib/module/sync/toolUiBridge.js

@@ -0,0 +1,68 @@
+"use strict";
+
+/**
+ * toolUiBridge — let a tool ask the host to bring another tool back on screen.
+ *
+ * WHY THIS EXISTS. Buoy's tool overlays (the SIMULATED banner, the recording
+ * banner, the perf HUD) render as siblings of `AppHostProvider`, not inside it,
+ * so none of them can reach the host that knows how to open and restore tools.
+ * That is usually fine — an overlay's job is to be seen, not to navigate. It
+ * stops being fine the moment an overlay is the ONLY thing on screen and the
+ * next step lives inside a tool: the macro recorder minimizes Scenarios so a
+ * tester can drive the app, and when they stop, the review screen they need is
+ * behind a tool icon they have to know to hunt for.
+ *
+ * The alternative was moving every overlay inside the provider, which would
+ * re-order the stacking of six unrelated tools to fix one banner's button. This
+ * is the same global-seam shape `toolActionRegistry` already uses for the same
+ * reason: the capability lives inside a component tree, the caller must not
+ * import `@buoy-gg/core` (that package imports the tools, and a tool importing
+ * it back is a require cycle), so it is published through a global.
+ *
+ * A SET of openers, not one slot, for the reason the action registry keeps one:
+ * React can briefly mount two providers, or re-run an effect's setup before the
+ * previous cleanup, and a last-writer-wins slot lets the second registration
+ * silently blank the first.
+ */
+
+const BRIDGE_KEY = "__buoyToolUiBridge";
+
+/** Returns true when the tool was actually brought back on screen. */
+
+function openers() {
+  const g = globalThis;
+  if (!g[BRIDGE_KEY]) g[BRIDGE_KEY] = new Set();
+  return g[BRIDGE_KEY];
+}
+
+/** Published by the host, inside the provider that owns open tools. */
+export function registerToolOpener(opener) {
+  const set = openers();
+  set.add(opener);
+  return () => {
+    set.delete(opener);
+  };
+}
+
+/**
+ * Ask the host to show a tool.
+ *
+ * Returns false when nothing could do it — no host mounted, or the tool isn't
+ * open for it to restore. Callers must treat that as a real answer and say so,
+ * rather than rendering a button that silently does nothing.
+ */
+export function openBuoyTool(toolId) {
+  for (const opener of openers()) {
+    try {
+      if (opener(toolId)) return true;
+    } catch {
+      // A host that throws must not stop another from answering.
+    }
+  }
+  return false;
+}
+
+/** True when some host is listening — for deciding whether to offer the button. */
+export function canOpenBuoyTools() {
+  return openers().size > 0;
+}

package/lib/module/ui/components/CompactRow.js

@@ -25,6 +25,8 @@ export function CompactRow({
   testID,
   statusTestID,
   statusSublabelTestID,
+  primaryTestID,
+  secondaryTestID,
   accessibilityLabel
 }) {
   return /*#__PURE__*/_jsx(View, {
@@ -78,12 +80,14 @@ export function CompactRow({
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.queryHash,
               numberOfLines: isExpanded ? undefined : 2,
+              testID: primaryTestID,
               children: primaryText
             }), !isExpanded && (secondaryText || secondaryAccessory) ? /*#__PURE__*/_jsxs(View, {
               style: styles.secondaryRow,
               children: [secondaryText ? /*#__PURE__*/_jsx(Text, {
                 style: styles.secondaryText,
                 numberOfLines: 1,
+                testID: secondaryTestID,
                 children: secondaryText
               }) : null, secondaryAccessory]
             }) : null]

package/lib/module/ui/components/EventHistoryViewer/DiffModeTabs.js

@@ -19,7 +19,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
   tabs,
   activeTab,
-  onTabChange
+  onTabChange,
+  testIDPrefix
 }) {
   return /*#__PURE__*/_jsx(View, {
     style: styles.container,
@@ -31,6 +32,13 @@ export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
         onPress: () => !isDisabled && onTabChange(tab.key),
         activeOpacity: isDisabled ? 1 : 0.7,
         disabled: isDisabled,
+        testID: testIDPrefix ? `${testIDPrefix}-${tab.key}` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: tab.label,
+        accessibilityState: {
+          selected: isActive,
+          disabled: isDisabled
+        },
         children: /*#__PURE__*/_jsx(Text, {
           style: [styles.tabText, isActive && styles.tabTextActive, isDisabled && styles.tabTextDisabled],
           children: tab.label

package/lib/module/ui/components/ExpandedInfoRow.js

@@ -40,7 +40,8 @@ export function PillBadge({
   color,
   children,
   icon,
-  size = "md"
+  size = "md",
+  testID
 }) {
   const isSm = size === "sm";
   return /*#__PURE__*/_jsxs(View, {
@@ -55,6 +56,7 @@ export function PillBadge({
       style: [styles.pillText, isSm && styles.pillTextSm, {
         color
       }],
+      testID: testID,
       children: children
     })]
   });

package/lib/module/ui/components/ModalHeader.js

@@ -182,10 +182,13 @@ const styles = StyleSheet.create({
     flex: 1,
     gap: 8,
     minHeight: 32,
-    paddingLeft: 4,
-    // Traffic-light window controls sit absolutely in this corner. Reserve
-    // space so Copy / search / extra actions never paint under them.
-    paddingRight: 56
+    paddingLeft: 4
+    // No right inset: the traffic-light window controls are cleared
+    // VERTICALLY — JsModal's drag-indicator strip owns their band (see
+    // WINDOW_CONTROLS_BAND) — so nothing here has to be pushed sideways to
+    // stay out from under them. `headerActions` already ends 4pt off the
+    // edge, matching the left, and hosts that render this header with no
+    // window controls at all (the desktop inline panels) get no phantom gap.
   },
   navigationButton: {
     padding: 4