@buoy-gg/shared-ui 7.0.30 → 7.0.31

package/lib/commonjs/dataViewer/useTreeDraft.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeDraft = useTreeDraft;
+var _react = require("react");
+var _jsonOps = require("./jsonOps.js");
+/**
+ * A local draft of a tree value, edited in place and written ONCE.
+ *
+ * Applying each tree op straight to the owning document was the obvious first
+ * cut and it behaves badly for two compounding reasons:
+ *
+ * 1. **Every op is a round trip.** The write lands, the owner emits an event,
+ *    a snapshot comes back, and the browser re-reads everything — so a six-tap
+ *    reorder is six writes and six full refreshes. The tree rebuilds under the
+ *    user mid-gesture.
+ * 2. **The highlight and the value fall out of step.** Selection is local and
+ *    moves instantly; the value it points at only catches up when the round
+ *    trip completes, so for a beat the highlight sits on the old contents.
+ *
+ * Optimistic updates — the React Query pattern of rendering the expected result
+ * and reconciling later — fix (2) but not (1): they still write per change.
+ * Buffering fixes both, and it's what every editor that owns a document does
+ * (a form's dirty state, an IDE's unsaved buffer, JSON Editor's in-memory doc
+ * with an explicit save).
+ *
+ * The trade is that the buffer can go stale if the owner writes the same
+ * document while you're editing. That's the same last-write-wins a text editor
+ * has, and `isDirty` at least makes it visible that you're holding unsaved
+ * changes.
+ *
+ * Grew up as the Storage tool's key editor; hoisted here so the Zustand store
+ * editor is the same editor rather than a drifting copy. The save contract
+ * takes the VALUE — a storage host stringifies it, a zustand host diffs it
+ * into a merge partial.
+ */
+
+/**
+ * @param liveValue  the value as its owner currently holds it (already parsed)
+ * @param save       persists the draft VALUE; rejecting keeps edit mode open
+ */
+function useTreeDraft(liveValue, save) {
+  const [draft, setDraft] = (0, _react.useState)(undefined);
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const [isSaving, setIsSaving] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)(null);
+  const [selectPath, setSelectPath] = (0, _react.useState)();
+  /**
+   * The value as it was when editing began. Compared against for dirtiness
+   * rather than against `liveValue`, which can move underneath us if the owner
+   * writes the same document — that would otherwise flip a clean draft to
+   * dirty.
+   */
+  const [baseline, setBaseline] = (0, _react.useState)("");
+  const value = isEditing && draft !== undefined ? draft : liveValue;
+  const isDirty = isEditing && JSON.stringify(draft) !== baseline;
+  const begin = (0, _react.useCallback)(() => {
+    setDraft(liveValue);
+    setBaseline(JSON.stringify(liveValue));
+    setSelectPath(undefined);
+    setError(null);
+    setIsEditing(true);
+  }, [liveValue]);
+  const apply = (0, _react.useCallback)(op => {
+    // Purely local — this is the whole point. No write, so no event, no
+    // snapshot, no refresh, and the tree re-renders from state synchronously.
+    setDraft(prev => (0, _jsonOps.applyJsonOp)(prev, op));
+    const next = (0, _jsonOps.selectionPathAfterOp)(op);
+    if (next !== undefined) setSelectPath(next);
+  }, []);
+  const selectAt = (0, _react.useCallback)(path => {
+    setSelectPath(path);
+  }, []);
+
+  /** Leave edit mode entirely. Only correct on the way out (after a write). */
+  const reset = (0, _react.useCallback)(() => {
+    setIsEditing(false);
+    setDraft(undefined);
+    setSelectPath(undefined);
+    setError(null);
+  }, []);
+
+  /** Re-seed the draft from what's stored, staying in edit mode. */
+  const discard = (0, _react.useCallback)(() => {
+    setDraft(liveValue);
+    setBaseline(JSON.stringify(liveValue));
+    setSelectPath(undefined);
+    setError(null);
+    setIsEditing(true);
+  }, [liveValue]);
+  const commit = (0, _react.useCallback)(async () => {
+    if (!isDirty || !save) {
+      reset();
+      return true;
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      await save(draft);
+      reset();
+      return true;
+    } catch (e) {
+      // Stay in edit mode so the work isn't lost to a failed write.
+      setError(e instanceof Error ? e.message : String(e));
+      return false;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [draft, isDirty, reset, save]);
+  return {
+    isEditing,
+    value,
+    isDirty,
+    isSaving,
+    error,
+    selectPath,
+    begin,
+    apply,
+    selectAt,
+    commit,
+    discard
+  };
+}

package/lib/commonjs/dataViewer/useTreeEditor.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeEditor = useTreeEditor;
+var _react = require("react");
+var _jsonOps = require("./jsonOps.js");
+var _useTreeDraft = require("./useTreeDraft.js");
+/**
+ * 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.
+ */
+
+function useTreeEditor({
+  value,
+  save,
+  onClose,
+  confirmDiscard
+}) {
+  const draft = (0, _useTreeDraft.useTreeDraft)(value, save);
+  const [selection, setSelection] = (0, _react.useState)(null);
+  const [valuePath, setValuePath] = (0, _react.useState)(null);
+  const {
+    begin
+  } = draft;
+  (0, _react.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 = (0, _react.useCallback)(path => {
+    const current = (0, _jsonOps.getAtPath)(draft.value, path);
+    if (typeof current === "boolean") {
+      draft.apply({
+        kind: "replace",
+        path,
+        value: !current
+      });
+      return;
+    }
+    setValuePath(path);
+  }, [draft]);
+  const applyValue = (0, _react.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 = (0, _react.useCallback)(() => {
+    void draft.commit().then(saved => saved && onClose());
+  }, [draft, onClose]);
+  const requestClose = (0, _react.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/commonjs/env/EnvironmentIndicator.js

@@ -93,7 +93,13 @@ 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.gameUIColors.primaryLight,
         letterSpacing: 0.5
       },

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

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * 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/commonjs/index.js

@@ -720,6 +720,30 @@ Object.keys(_wireBudget).forEach(function (key) {
     }
   });
 });
+var _toolActionRegistry = require("./sync/toolActionRegistry.js");
+Object.keys(_toolActionRegistry).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _toolActionRegistry[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toolActionRegistry[key];
+    }
+  });
+});
+var _toolUiBridge = require("./sync/toolUiBridge.js");
+Object.keys(_toolUiBridge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _toolUiBridge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toolUiBridge[key];
+    }
+  });
+});
 var _index3 = require("./utils/index.js");
 var _index4 = require("./utils/formatting/index.js");
 Object.keys(_index4).forEach(function (key) {

package/lib/commonjs/license/tierLimits.js

@@ -107,6 +107,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
   }
 };
 const TIER_LIMITS = exports.TIER_LIMITS = LIMITS;

package/lib/commonjs/storage/devToolsStorageKeys.js

@@ -135,6 +135,18 @@ const devToolsStorageKeys = exports.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
    */
@@ -209,16 +221,40 @@ const devToolsStorageKeys = exports.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/commonjs/sync/toolActionRegistry.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dispatchToolAction = dispatchToolAction;
+exports.getToolAdapters = getToolAdapters;
+exports.isToolRegistryReady = isToolRegistryReady;
+exports.listSnapshotToolIds = listSnapshotToolIds;
+exports.listToolActions = listToolActions;
+exports.listToolIds = listToolIds;
+exports.readToolSnapshot = readToolSnapshot;
+exports.registerToolAdapters = registerToolAdapters;
+exports.waitForToolRegistry = waitForToolRegistry;
+/**
+ * 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.
+ */
+function registerToolAdapters(getTools) {
+  const set = sources();
+  set.add(getTools);
+  return () => {
+    set.delete(getTools);
+  };
+}
+
+/** The merged adapter map across every live source. */
+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. */
+function listToolIds() {
+  return Object.keys(getToolAdapters());
+}
+
+/** `toolId -> action names`, for pre-flight validation and capability display. */
+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.
+ */
+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.
+ */
+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();
+}
+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.
+ */
+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".
+ */
+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/commonjs/sync/toolUiBridge.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.canOpenBuoyTools = canOpenBuoyTools;
+exports.openBuoyTool = openBuoyTool;
+exports.registerToolOpener = registerToolOpener;
+/**
+ * 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. */
+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.
+ */
+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. */
+function canOpenBuoyTools() {
+  return openers().size > 0;
+}

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

@@ -29,6 +29,8 @@ function CompactRow({
   testID,
   statusTestID,
   statusSublabelTestID,
+  primaryTestID,
+  secondaryTestID,
   accessibilityLabel
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -82,12 +84,14 @@ function CompactRow({
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.queryHash,
               numberOfLines: isExpanded ? undefined : 2,
+              testID: primaryTestID,
               children: primaryText
             }), !isExpanded && (secondaryText || secondaryAccessory) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.secondaryRow,
               children: [secondaryText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.secondaryText,
                 numberOfLines: 1,
+                testID: secondaryTestID,
                 children: secondaryText
               }) : null, secondaryAccessory]
             }) : null]

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

@@ -24,7 +24,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const DiffModeTabs = exports.DiffModeTabs = /*#__PURE__*/(0, _react.memo)(function DiffModeTabs({
   tabs,
   activeTab,
-  onTabChange
+  onTabChange,
+  testIDPrefix
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
@@ -36,6 +37,13 @@ const DiffModeTabs = exports.DiffModeTabs = /*#__PURE__*/(0, _react.memo)(functi
         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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.tabText, isActive && styles.tabTextActive, isDisabled && styles.tabTextDisabled],
           children: tab.label

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

@@ -45,7 +45,8 @@ function PillBadge({
   color,
   children,
   icon,
-  size = "md"
+  size = "md",
+  testID
 }) {
   const isSm = size === "sm";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -60,6 +61,7 @@ function PillBadge({
       style: [styles.pillText, isSm && styles.pillTextSm, {
         color
       }],
+      testID: testID,
       children: children
     })]
   });