@buoy-gg/redux 7.0.30 → 7.0.31

package/lib/commonjs/redux/utils/testIDs.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REDUX_TEST_ID = void 0;
+exports.actionRowTestID = actionRowTestID;
+exports.buildActionRowTestIDs = buildActionRowTestIDs;
+exports.slugForTestID = slugForTestID;
+/**
+ * Redux tool test handles.
+ *
+ * Every tappable and every value the e2e suite reads back is addressed
+ * `buoy-redux-<thing>`. One rule in here needs explaining, because it is the
+ * opposite of what the Events tool does and the difference is not cosmetic:
+ *
+ * **A redux row's handle carries an ORDINAL.** The Events tool can address a
+ * row by what it is about, because an event is a thing that happened to a
+ * named subject — one key, one URL, one atom. A redux action is not: an app
+ * dispatches `counter/increment` fifty times and every one of them is a
+ * separate, equally real row. Addressing them by type alone would give fifty
+ * views one handle, and Detox fails a *matcher* that hits more than one
+ * element — so the suite would break on `toExist()`, before any assertion,
+ * with an error that says nothing about duplicate actions.
+ *
+ * So the handle is `buoy-redux-row-<slug(type)>-<n>`, where n counts back from
+ * the newest row of that type (1 = newest). It is deliberately relative to the
+ * list rather than absolute: an action has no identity of its own that a host
+ * could know in advance — `id` is a timestamp plus a per-process counter, and
+ * the counter's value depends on how many actions the app happened to dispatch
+ * before the test looked. What a test CAN know is "the increment I just fired
+ * is the newest increment", which is exactly what `-1` means.
+ *
+ * The consequence, and it is the same one the Events tool documents for its
+ * positional-free handles: read and tap in one beat. A row's ordinal changes
+ * the moment another action of that type arrives.
+ *
+ * The suite mirrors these rules in CommonJS (`example-dev-build/utils/
+ * reduxBench.js`) and asserts the two agree — Detox runs in Node on the host
+ * and cannot import TypeScript.
+ */
+
+/** Prefix every handle in this tool shares. */
+const REDUX_TEST_ID = exports.REDUX_TEST_ID = "buoy-redux";
+
+/** `counter/increment` → `counter-increment`. Shared with every Buoy tool. */
+function slugForTestID(value) {
+  return String(value ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "unknown";
+}
+
+/**
+ * Handle for one action row: `buoy-redux-row-counter-increment-1`.
+ *
+ * `ordinal` is 1-based and counts back from the newest row of this type.
+ */
+function actionRowTestID(type, ordinal) {
+  return `${REDUX_TEST_ID}-row-${slugForTestID(type)}-${ordinal}`;
+}
+
+/**
+ * Row handle per action id for one rendered list, newest-first.
+ *
+ * Built once for the whole list rather than per row, because an ordinal is a
+ * fact about the list and a row cannot compute its own.
+ */
+function buildActionRowTestIDs(actions) {
+  const seen = new Map();
+  const handles = new Map();
+  for (const action of actions) {
+    const ordinal = (seen.get(action.type) ?? 0) + 1;
+    seen.set(action.type, ordinal);
+    handles.set(action.id, actionRowTestID(action.type, ordinal));
+  }
+  return handles;
+}

package/lib/module/index.js

@@ -109,6 +109,11 @@ export { ReduxIcon } from "./redux/components/ReduxIcon";
 // FloatingDevTools; exported for hosts that mount devtools their own way.
 export { ReduxAutoInstrument } from "./redux/components/ReduxAutoInstrument";
 
+// =============================================================================
+// TEST HANDLES (shared with the e2e suite and the website's live tour)
+// =============================================================================
+export { REDUX_TEST_ID, actionRowTestID, buildActionRowTestIDs, slugForTestID } from "./redux/utils/testIDs";
+
 // =============================================================================
 // TYPES
 // =============================================================================

package/lib/module/redux/components/ReduxActionButton.js

@@ -54,10 +54,12 @@ export function ReduxActionButton({
   onPress,
   text,
   type,
-  disabled = false
+  disabled = false,
+  testID
 }) {
   const config = buttonConfigs[type];
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    testID: testID,
     disabled: disabled,
     onPress: onPress,
     style: [styles.button, {

package/lib/module/redux/components/ReduxActionDetailContent.js

@@ -16,6 +16,8 @@ import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-g
 import { ReduxDetailViewToggle } from "./ReduxDetailViewToggle";
 import { ReduxActionInfoView } from "./ReduxActionInfoView";
 import { DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
+import { REDUX_TEST_ID } from "../utils/testIDs";
+import { isEvictedState, STATE_RETENTION_LIMIT } from "../utils/reduxActionStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Get color for action type
@@ -85,6 +87,20 @@ export function ReduxActionDetailContent({
   const [activeView, setActiveView] = useState(initialView);
   const [diffMode, setDiffMode] = useState("tree");
   const totalActions = actions.length;
+  /**
+   * The state trees this action was recorded with are gone.
+   *
+   * Not a failure: the store keeps raw prev/next state for the most recent
+   * actions only, because with structural sharing broken (a store switch, a
+   * rehydration) each retained action pins a distinct multi-MB subtree and a
+   * few dozen of them are enough to OOM-kill a large app. But it has to be
+   * SAID. The sentinel left behind is an ordinary object, so a state view that
+   * just rendered it showed `{ __buoyStateEvicted: true, … }` under the
+   * heading "STATE AFTER ACTION" — which reads as the app's actual state — and
+   * a diff of two identical sentinels reported "no changes", which is a lie
+   * about the app rather than about the recording.
+   */
+  const stateEvicted = isEvictedState(action.nextState);
   const actionColor = getActionColor(action.type);
   const actionLabel = getActionLabel(action.type);
   const stateType = getValueType(parseValue(action.nextState));
@@ -135,9 +151,26 @@ export function ReduxActionDetailContent({
 
   // Render state view
   const renderStateView = useCallback(() => {
+    if (stateEvicted) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.contentCard,
+        testID: `${REDUX_TEST_ID}-state-evicted`,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.valueHeader,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.valueLabel,
+            children: "STATE AFTER ACTION"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.evictedText,
+          children: `Not retained. Raw state is kept for the ${STATE_RETENTION_LIMIT} most recent actions, so this action's before/after trees have been released.`
+        })]
+      });
+    }
     const parsed = parseValue(action.nextState);
     return /*#__PURE__*/_jsxs(View, {
       style: styles.contentCard,
+      testID: `${REDUX_TEST_ID}-state-card`,
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.valueHeader,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -159,6 +192,7 @@ export function ReduxActionDetailContent({
             style: styles.typeBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.typeText,
+              testID: `${REDUX_TEST_ID}-state-type`,
               children: stateType.toUpperCase()
             })
           })]
@@ -174,7 +208,7 @@ export function ReduxActionDetailContent({
         })
       })]
     });
-  }, [action.nextState, actionColor, actionLabel, stateType]);
+  }, [action.nextState, actionColor, actionLabel, stateType, stateEvicted]);
 
   // Render diff content
   const renderDiffContent = useCallback(() => {
@@ -214,7 +248,15 @@ export function ReduxActionDetailContent({
   const handleFooterNext = useCallback(() => {
     onIndexChange(Math.max(0, selectedIndex - 1));
   }, [selectedIndex, onIndexChange]);
-  const diffDisabled = totalActions <= 1;
+
+  // A diff needs two real trees, and both live on THIS action
+  // (prevState/nextState) — no siblings needed, so the action count says
+  // nothing (gating on it greyed DIFF out for every redux event opened from
+  // the Events timeline, which passes a one-element array). Eviction of
+  // EITHER side does disable it: two identical sentinels diff cleanly to
+  // "no changes", which reads as a lie.
+  const diffDisabled = stateEvicted || isEvictedState(action.prevState) || action.prevState === undefined;
+  const showInternalFooter = !disableInternalFooter && totalActions > 1;
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [/*#__PURE__*/_jsx(ReduxDetailViewToggle, {
@@ -222,7 +264,7 @@ export function ReduxActionDetailContent({
       onViewChange: setActiveView,
       diffDisabled: diffDisabled
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.contentArea,
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
       children: [activeView === "action" && /*#__PURE__*/_jsx(ReduxActionInfoView, {
         action: action
       }), activeView === "state" && /*#__PURE__*/_jsx(View, {
@@ -230,19 +272,22 @@ export function ReduxActionDetailContent({
         children: renderStateView()
       }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
         style: styles.diffContainer,
+        testID: `${REDUX_TEST_ID}-diff`,
         children: [/*#__PURE__*/_jsx(DiffModeTabs, {
           tabs: DIFF_MODE_TABS,
           activeTab: diffMode,
-          onTabChange: setDiffMode
+          onTabChange: setDiffMode,
+          testIDPrefix: `${REDUX_TEST_ID}-diff-tab`
         }), /*#__PURE__*/_jsx(CompareBar, {
           leftEvent: leftEvent,
           rightEvent: rightEvent
         }), /*#__PURE__*/_jsx(View, {
           style: styles.diffContent,
+          testID: `${REDUX_TEST_ID}-diff-content`,
           children: renderDiffContent()
         })]
       })]
-    }), !disableInternalFooter && totalActions > 1 && /*#__PURE__*/_jsx(EventStepperFooter, {
+    }), showInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
       currentIndex: chronologicalNumber - 1,
       totalItems: totalActions,
       onPrevious: handleFooterPrevious,
@@ -282,7 +327,11 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent"
   },
   contentArea: {
-    flex: 1,
+    flex: 1
+  },
+  // Clearance for the absolute EventStepperFooter — only when it renders,
+  // otherwise hosts like the Events tool get a dead band at the sheet bottom.
+  contentAreaFooterPad: {
     paddingBottom: 96
   },
   // State view styles
@@ -346,6 +395,11 @@ const styles = StyleSheet.create({
     borderColor: night.color.border,
     padding: 8
   },
+  evictedText: {
+    fontSize: 12,
+    color: night.color.textSecondary,
+    lineHeight: 18
+  },
   valueText: {
     fontSize: 12,
     color: night.color.text,

package/lib/module/redux/components/ReduxActionInfoView.js

@@ -15,9 +15,10 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-nati
 import { buoyColors, night, Clock, AlertTriangle, Zap, Hash, Info, Box, AlertCircle, FileText, parseValue, ProUpgradeModal, copyToClipboard } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { reduxActionStore } from "../utils/reduxActionStore";
-import { jumpToState, replayAction } from "../utils/buoyReduxMiddleware";
+import { reduxActionStore, isEvictedState } from "../utils/reduxActionStore";
+import { jumpToState, replayAction, isTimeTravelAvailable } from "../utils/buoyReduxMiddleware";
 import { ReduxActionButton } from "./ReduxActionButton";
+import { REDUX_TEST_ID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Get category display info
@@ -84,10 +85,12 @@ function formatDuration(duration) {
 function SectionHeader({
   icon: Icon,
   title,
-  badge
+  badge,
+  testID
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.sectionHeader,
+    testID: testID,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.sectionHeaderLeft,
       children: [/*#__PURE__*/_jsx(Icon, {
@@ -108,7 +111,8 @@ function InfoRow({
   label,
   value,
   valueColor,
-  mono = false
+  mono = false,
+  testID
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: styles.infoRow,
@@ -118,9 +122,14 @@ function InfoRow({
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.infoValue, mono && styles.infoValueMono, valueColor && {
         color: valueColor
-      }],
+      }]
+      // `ellipsizeMode="middle"` truncates the RENDERED text and iOS reports
+      // the truncated string back, so anything a test reads off one of these
+      // rows has to be short enough to fit on the line.
+      ,
       numberOfLines: 1,
       ellipsizeMode: "middle",
+      testID: testID,
       children: value
     })]
   });
@@ -151,6 +160,18 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
     }
   }, [showProModal, isPro]);
   const categoryInfo = getCategoryInfo(action.category);
+  // Time travel needs a REAL tree. The store releases raw state for older
+  // actions (see ReduxActionDetailContent), and `jumpToState` refuses the
+  // sentinel — but it refused into a console warning, so from the screen the
+  // button simply did nothing at all. A disabled button that says why is the
+  // difference between a limit and a bug.
+  const stateEvicted = isEvictedState(action.nextState);
+  // Whether this app wired time travel at all. Capture and time travel are
+  // separate: an app can be fully captured through `buoyReduxMiddleware` and
+  // still have no reducer that answers a jump, in which case the press
+  // dispatched, was ignored, and left the screen exactly as it was.
+  const canTimeTravel = isTimeTravelAvailable();
+  const jumpDisabled = stateEvicted || !canTimeTravel;
   const hasPayload = action.payload !== undefined;
   const hasMeta = action.meta && Object.keys(action.meta).length > 0;
   const hasError = action.error !== undefined;
@@ -191,11 +212,13 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
     }
   }, [action]);
   return /*#__PURE__*/_jsxs(ScrollView, {
+    testID: `${REDUX_TEST_ID}-detail-scroll`,
     style: styles.container,
     contentContainerStyle: styles.contentContainer,
     showsVerticalScrollIndicator: false,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${REDUX_TEST_ID}-info-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Info,
         title: "ACTION INFO"
@@ -204,15 +227,18 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
         children: [/*#__PURE__*/_jsx(InfoRow, {
           label: "Type",
           value: action.type,
-          mono: true
+          mono: true,
+          testID: `${REDUX_TEST_ID}-info-type`
         }), action.sliceName && /*#__PURE__*/_jsx(InfoRow, {
           label: "Slice",
           value: action.sliceName,
-          mono: true
+          mono: true,
+          testID: `${REDUX_TEST_ID}-info-slice`
         }), /*#__PURE__*/_jsx(InfoRow, {
           label: "Action",
           value: action.actionName,
-          mono: true
+          mono: true,
+          testID: `${REDUX_TEST_ID}-info-action`
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.badgeRow,
           children: [/*#__PURE__*/_jsx(View, {
@@ -223,6 +249,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
               style: [styles.categoryText, {
                 color: categoryInfo.color
               }],
+              testID: `${REDUX_TEST_ID}-info-category`,
               children: categoryInfo.label
             })
           }), /*#__PURE__*/_jsxs(View, {
@@ -232,6 +259,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
               color: action.isSlowAction ? buoyColors.error : night.color.textSecondary
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.durationText, action.isSlowAction && styles.durationTextSlow],
+              testID: `${REDUX_TEST_ID}-info-duration`,
               children: formatDuration(action.duration)
             }), action.isSlowAction && /*#__PURE__*/_jsx(AlertTriangle, {
               size: 10,
@@ -244,12 +272,14 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
               color: buoyColors.success
             }), /*#__PURE__*/_jsx(Text, {
               style: styles.changesText,
+              testID: `${REDUX_TEST_ID}-info-changes`,
               children: action.diffSummary || "changed"
             })]
           }) : /*#__PURE__*/_jsx(View, {
             style: styles.noChangesBadge,
             children: /*#__PURE__*/_jsx(Text, {
               style: styles.noChangesText,
+              testID: `${REDUX_TEST_ID}-info-no-changes`,
               children: "no change"
             })
           })]
@@ -257,6 +287,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
       })]
     }), hasRelatedActions && /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${REDUX_TEST_ID}-async-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Hash,
         title: "ASYNC FLOW",
@@ -264,6 +295,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
           style: styles.asyncBadge,
           children: /*#__PURE__*/_jsxs(Text, {
             style: styles.asyncBadgeText,
+            testID: `${REDUX_TEST_ID}-async-count`,
             children: [relatedActions.length, " ACTIONS"]
           })
         })
@@ -271,6 +303,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
         style: styles.cardContent,
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.baseActionType,
+          testID: `${REDUX_TEST_ID}-async-base`,
           children: baseActionType
         }), totalDuration !== null && /*#__PURE__*/_jsxs(View, {
           style: styles.totalDurationRow,
@@ -279,6 +312,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
             children: "Total Duration"
           }), /*#__PURE__*/_jsxs(Text, {
             style: styles.totalDurationValue,
+            testID: `${REDUX_TEST_ID}-async-total`,
             children: [totalDuration, "ms"]
           })]
         }), /*#__PURE__*/_jsx(View, {
@@ -291,6 +325,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
               onPress: () => onNavigateToAction?.(relatedAction),
               disabled: isCurrent || !onNavigateToAction,
               activeOpacity: 0.7,
+              testID: `${REDUX_TEST_ID}-async-step-${index}`,
               children: [index < relatedActions.length - 1 && /*#__PURE__*/_jsx(View, {
                 style: styles.timelineConnector
               }), /*#__PURE__*/_jsx(View, {
@@ -309,10 +344,12 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
                       style: [styles.timelineStatusText, {
                         color: relatedCategoryInfo.color
                       }],
+                      testID: `${REDUX_TEST_ID}-async-step-${index}-status`,
                       children: relatedCategoryInfo.label
                     })
                   }), isCurrent && /*#__PURE__*/_jsx(View, {
                     style: styles.currentBadge,
+                    testID: `${REDUX_TEST_ID}-async-step-${index}-current`,
                     children: /*#__PURE__*/_jsx(Text, {
                       style: styles.currentBadgeText,
                       children: "CURRENT"
@@ -329,6 +366,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
       })]
     }), hasPayload && /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${REDUX_TEST_ID}-payload-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Box,
         title: "PAYLOAD",
@@ -351,6 +389,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
       })]
     }), hasMeta && /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${REDUX_TEST_ID}-meta-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: Hash,
         title: "ASYNC METADATA",
@@ -374,7 +413,8 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
         }), action.meta?.requestStatus && /*#__PURE__*/_jsx(InfoRow, {
           label: "Status",
           value: action.meta.requestStatus.toUpperCase(),
-          valueColor: categoryInfo.color
+          valueColor: categoryInfo.color,
+          testID: `${REDUX_TEST_ID}-meta-status`
         }), action.meta?.arg !== undefined && /*#__PURE__*/_jsxs(View, {
           style: styles.argSection,
           children: [/*#__PURE__*/_jsx(Text, {
@@ -409,6 +449,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
       })]
     }), hasError && /*#__PURE__*/_jsxs(View, {
       style: [styles.card, styles.errorCard],
+      testID: `${REDUX_TEST_ID}-error-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: AlertCircle,
         title: "ERROR",
@@ -416,6 +457,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
           style: styles.errorBadge,
           children: /*#__PURE__*/_jsx(Text, {
             style: styles.errorBadgeText,
+            testID: `${REDUX_TEST_ID}-error-badge`,
             children: "REJECTED"
           })
         })
@@ -434,6 +476,7 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.card,
+      testID: `${REDUX_TEST_ID}-full-action-card`,
       children: [/*#__PURE__*/_jsx(SectionHeader, {
         icon: FileText,
         title: "FULL ACTION OBJECT"
@@ -456,7 +499,8 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
           children: [/*#__PURE__*/_jsx(ReduxActionButton, {
             type: "replay",
             text: "REPLAY",
-            onPress: handleReplay
+            onPress: handleReplay,
+            testID: `${REDUX_TEST_ID}-replay`
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.actionDescription,
             children: "Dispatch again"
@@ -466,17 +510,21 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
           children: [/*#__PURE__*/_jsx(ReduxActionButton, {
             type: "jump",
             text: "JUMP",
-            onPress: handleJump
+            onPress: handleJump,
+            disabled: jumpDisabled,
+            testID: `${REDUX_TEST_ID}-jump`
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.actionDescription,
-            children: "Restore this state"
+            testID: `${REDUX_TEST_ID}-jump-description`,
+            children: stateEvicted ? "State not retained" : canTimeTravel ? "Restore this state" : "Time travel not wired"
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.actionButtonWrapper,
           children: [/*#__PURE__*/_jsx(ReduxActionButton, {
             type: "copy",
             text: "COPY ACTION",
-            onPress: handleCopyAction
+            onPress: handleCopyAction,
+            testID: `${REDUX_TEST_ID}-copy-action`
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.actionDescription,
             children: isPro ? "Copy to clipboard" : "Pro feature"
@@ -486,7 +534,8 @@ export const ReduxActionInfoView = /*#__PURE__*/memo(function ReduxActionInfoVie
           children: [/*#__PURE__*/_jsx(ReduxActionButton, {
             type: "copy",
             text: "COPY PAYLOAD",
-            onPress: handleCopyPayload
+            onPress: handleCopyPayload,
+            testID: `${REDUX_TEST_ID}-copy-payload`
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.actionDescription,
             children: isPro ? "Copy payload only" : "Pro feature"

package/lib/module/redux/components/ReduxActionItem.js

@@ -210,7 +210,9 @@ function getPrimaryText(action) {
 // tick re-renders only that Text, not this row.
 export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
   action,
-  onPress
+  onPress,
+  linkedCount,
+  testID
 }) {
   const sliceName = action.sliceName ?? undefined;
   const statusColor = getStatusColor(action.category, action.hasStateChange, sliceName);
@@ -219,10 +221,11 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
   const primaryText = getPrimaryText(action);
   const actionBadge = getActionBadge(action);
 
-  // Check for linked async actions
-  const linkedActions = reduxActionStore.getLinkedActions(action);
-  const linkedCount = linkedActions.length;
-  const hasLinkedActions = linkedCount > 1;
+  // Check for linked async actions. The COUNT comes from the list (see the
+  // prop's doc); the ordered list is only needed to say where in the flow this
+  // action sits, and only when there is a flow at all.
+  const hasLinkedActions = (linkedCount ?? 0) > 1;
+  const linkedActions = hasLinkedActions ? reduxActionStore.getLinkedActions(action) : [];
 
   // Get position in async sequence (1/2, 2/2, etc.)
   const asyncPosition = hasLinkedActions ? linkedActions.findIndex(a => a.id === action.id) + 1 : 0;
@@ -247,10 +250,12 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
           style: [styles.asyncSequenceText, {
             color: opColor.text
           }],
+          testID: testID ? `${testID}-seq` : undefined,
           children: [asyncPosition, "/", linkedCount, " #", operationIndex]
         })
       }), /*#__PURE__*/_jsx(View, {
         style: styles.slowBadge,
+        testID: testID ? `${testID}-slow` : undefined,
         children: /*#__PURE__*/_jsx(Clock, {
           size: 12,
           color: buoyColors.error
@@ -269,10 +274,12 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
           style: [styles.asyncSequenceText, {
             color: opColor.text
           }],
+          testID: testID ? `${testID}-seq` : undefined,
           children: [asyncPosition, "/", linkedCount, " #", operationIndex]
         })
       }), /*#__PURE__*/_jsx(View, {
         style: styles.errorBadge,
+        testID: testID ? `${testID}-error` : undefined,
         children: /*#__PURE__*/_jsx(AlertCircle, {
           size: 12,
           color: buoyColors.error
@@ -291,10 +298,12 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
           style: [styles.asyncSequenceText, {
             color: opColor.text
           }],
+          testID: testID ? `${testID}-seq` : undefined,
           children: [asyncPosition, "/", linkedCount, " #", operationIndex]
         })
       }), action.hasStateChange && /*#__PURE__*/_jsx(View, {
         style: styles.changeBadge,
+        testID: testID ? `${testID}-change` : undefined,
         children: /*#__PURE__*/_jsx(Zap, {
           size: 12,
           color: buoyColors.warning
@@ -309,9 +318,11 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
         style: [styles.actionBadgeText, {
           color: statusColor
         }],
+        testID: testID ? `${testID}-badge` : undefined,
         children: actionBadge
       }), /*#__PURE__*/_jsx(View, {
         style: styles.changeBadge,
+        testID: testID ? `${testID}-change` : undefined,
         children: /*#__PURE__*/_jsx(Zap, {
           size: 12,
           color: buoyColors.warning
@@ -320,6 +331,10 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
     });
   }
   return /*#__PURE__*/_jsx(CompactRow, {
+    testID: testID,
+    statusTestID: testID ? `${testID}-status` : undefined,
+    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
+    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`,
     statusDotColor: statusColor,
     statusLabel: statusLabel,
     statusSublabel: sublabel,

package/lib/module/redux/components/ReduxDetailViewToggle.js

@@ -50,6 +50,13 @@ export const ReduxDetailViewToggle = /*#__PURE__*/memo(function ReduxDetailViewT
         onPress: () => !isDisabled && onViewChange(config.key),
         activeOpacity: isDisabled ? 1 : 0.8,
         disabled: isDisabled,
+        testID: `buoy-redux-view-${config.key}`,
+        accessibilityRole: "button",
+        accessibilityLabel: config.label,
+        accessibilityState: {
+          selected: isActive,
+          disabled: isDisabled
+        },
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.cardContent,
           children: [/*#__PURE__*/_jsx(IconComponent, {