@buoy-gg/redux 7.0.38 → 7.0.39

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

@@ -1 +1,698 @@
-"use strict";import{useState,useMemo,useRef,useCallback,useEffect}from"react";import{View,Text,StyleSheet,FlatList,TouchableOpacity}from"react-native";import{JsModal,ModalHeader,macOSColors,night,Search,Trash2,Power,Zap,CheckCircle,Copy,Lock,AlertTriangle,devToolsStorageKeys,copyToClipboard,ProUpgradeModal,PowerToggleButton,TickProvider,useLimit,TIER_LIMITS,windowDragProps,ToolEmptyState,resolveListEmptyState,EVENT_LIST_PRESET,monoFont}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import{useReduxActions}from"../hooks/useReduxActions";import{reduxActionStore}from"../utils/reduxActionStore";import{useAutoInstrumentRedux}from"../hooks/useAutoInstrumentRedux";import{ReduxActionItem}from"./ReduxActionItem";import{ReduxActionDetailContent,ReduxActionDetailFooter}from"./ReduxActionDetailContent";import{REDUX_TEST_ID,buildActionRowTestIDs}from"../utils/testIDs";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";export const FREE_TIER_ACTION_LIMIT=TIER_LIMITS["redux.actions"].free;function EmptyState({isEnabled:e,query:t,totalActions:o}){const r=resolveListEmptyState({subject:"actions",search:t,total:o,capturing:e,waiting:{otto:"waiting",title:"No Redux actions",message:"Actions will appear here as they are dispatched"},paused:{title:"No Redux actions",message:"Enable capture to start recording actions"}});return _jsx(ToolEmptyState,{...r,testID:`${REDUX_TEST_ID}-empty`})}export function ReduxModal({visible:e,onClose:t,onBack:o,onMinimize:r,enableSharedModalDimensions:i=!1,inline:n=!1,onActionSelect:s,initialSelectedActionId:l,initialDetailView:a}){const c=useIsPro(),d=useLimit("redux.actions"),[u,h]=useState(!1),{isInstrumented:g,isLoading:p,error:y,isReactReduxAvailable:x,captureMechanism:b}=useAutoInstrumentRedux(),{filteredActions:T,filter:m,setFilter:_,stats:S,clearActions:C,isEnabled:D,toggleCapture:I}=useReduxActions(),R=useMemo(()=>T.slice(0,d),[T,d]),f=useMemo(()=>Math.max(0,T.length-d),[T.length,d]),E=f>0,[j,A]=useState(null),w=useMemo(()=>{if(null===j)return null;const e=R.findIndex(e=>e.id===j);return e>=0?e:null},[j,R]),k=null!==w?R[w]:null,B=useRef(null);useEffect(()=>{if(!s)return;const e=k?.id??null;null!==e&&e!==B.current&&(B.current=e,s(k))},[k,s]);const v=useRef(null);useEffect(()=>{l&&v.current!==l&&(R.findIndex(e=>e.id===l)<0||(v.current=l,A(l)))},[l,R]);const[M,L]=useState(""),[P,U]=useState(!1),$=(useRef(null),useRef(null)),z=useCallback(e=>{},[]),V=e=>{L(e),_(t=>({...t,searchText:e}))},X=useCallback(()=>{L(""),_(e=>({...e,searchText:""})),U(!1)},[_]),W=useCallback(e=>{A(e.id)},[]),H=useCallback(()=>{h(!0)},[]),O=useCallback(()=>{A(null)},[]),F=useCallback(e=>{const t=R[e];t&&A(t.id)},[R]),N=async()=>{if(!c)return void h(!0);const e=T.map(e=>({id:e.id,type:e.type,...void 0!==e.payload&&{payload:e.payload},timestamp:e.timestamp,prevState:e.prevState,nextState:e.nextState,hasStateChange:e.hasStateChange}));await copyToClipboard(e)},q=useCallback(e=>e.id,[]),K=useMemo(()=>buildActionRowTestIDs(R),[R]),G=useMemo(()=>{const e=new Map;for(const t of reduxActionStore.getActions()){const o=t.meta?.requestId;o&&e.set(o,(e.get(o)??0)+1)}return e},[T]),J=useCallback(({item:e})=>{const t=e.meta?.requestId;return _jsx(ReduxActionItem,{action:e,onPress:W,linkedCount:t?G.get(t)??0:0,testID:K.get(e.id)})},[W,K,G]),Z=()=>_jsxs(ModalHeader,k?{children:[_jsx(ModalHeader.Navigation,{onBack:O}),_jsx(ModalHeader.Content,{title:k.type,centered:!0,testID:`${REDUX_TEST_ID}-detail-title`})]}:{children:[o&&_jsx(ModalHeader.Navigation,{onBack:o}),_jsx(ModalHeader.Content,{title:"",children:P?_jsx(ModalHeader.Search,{value:M,onChangeText:V,onCancel:X,placeholder:"Search action types...",accessibilityLabel:"Search action types",iconSize:14,testID:`${REDUX_TEST_ID}-search-field`,containerTestID:`${REDUX_TEST_ID}-search`,clearTestID:`${REDUX_TEST_ID}-search-clear`,onBlur:()=>{0===M.length&&U(!1)}}):_jsxs(View,{style:styles.headerChipRow,children:[_jsxs(TouchableOpacity,{style:[styles.headerChip,!m.onlyWithChanges&&styles.headerChipActive],onPress:()=>_(e=>({...e,onlyWithChanges:!1})),testID:`${REDUX_TEST_ID}-chip-all`,accessibilityRole:"button",accessibilityLabel:`Show all actions, ${S.totalActions} captured`,accessibilityState:{selected:!m.onlyWithChanges},children:[_jsx(Text,{style:styles.headerChipLabel,children:"ALL"}),_jsx(Text,{style:[styles.headerChipValue,{color:night.color.text}],testID:`${REDUX_TEST_ID}-chip-all-value`,children:S.totalActions})]}),_jsxs(TouchableOpacity,{style:[styles.headerChip,m.onlyWithChanges&&styles.headerChipActive],onPress:()=>_(e=>({...e,onlyWithChanges:!0})),testID:`${REDUX_TEST_ID}-chip-changed`,accessibilityRole:"button",accessibilityLabel:`Show only actions that changed state, ${S.actionsWithChanges} of them`,accessibilityState:{selected:!!m.onlyWithChanges},children:[_jsx(Zap,{size:12,color:macOSColors.semantic.warning}),_jsx(Text,{style:[styles.headerChipValue,{color:macOSColors.semantic.warning}],testID:`${REDUX_TEST_ID}-chip-changed-value`,children:S.actionsWithChanges})]}),_jsxs(View,{style:styles.headerChip,testID:`${REDUX_TEST_ID}-chip-types`,accessibilityLabel:`${S.uniqueActionTypes} distinct action types`,children:[_jsx(CheckCircle,{size:12,color:macOSColors.semantic.success}),_jsx(Text,{style:[styles.headerChipValue,{color:macOSColors.semantic.success}],testID:`${REDUX_TEST_ID}-chip-types-value`,children:S.uniqueActionTypes})]})]})}),_jsxs(ModalHeader.Actions,{children:[!P&&_jsx(TouchableOpacity,{onPress:()=>U(!0),style:[styles.headerActionButton,M.length>0&&styles.headerActionButtonActive],testID:`${REDUX_TEST_ID}-search-open`,accessibilityRole:"button",accessibilityLabel:"Search action types",children:_jsx(Search,{size:14,color:M.length>0?night.color.accent:night.color.textSecondary})}),_jsx(TouchableOpacity,{onPress:N,style:[styles.headerActionButton,0===T.length&&styles.headerActionButtonDisabled],disabled:0===T.length,testID:`${REDUX_TEST_ID}-copy`,accessibilityRole:"button",accessibilityLabel:"Copy all actions",accessibilityState:{disabled:0===T.length},children:_jsx(Copy,{size:14,color:T.length>0?night.color.textSecondary:night.color.textTertiary})}),_jsx(PowerToggleButton,{isEnabled:D,onToggle:I,accessibilityLabel:"Toggle Redux action capture",testID:`${REDUX_TEST_ID}-power`}),_jsx(TouchableOpacity,{onPress:C,style:[styles.headerActionButton,0===T.length&&styles.headerActionButtonDisabled],disabled:0===T.length,testID:`${REDUX_TEST_ID}-clear`,accessibilityRole:"button",accessibilityLabel:"Clear actions",accessibilityState:{disabled:0===T.length},children:_jsx(Trash2,{size:14,color:(T.length,night.color.textTertiary)})})]})]}),Q=i?devToolsStorageKeys.modal.root():"buoy-redux-modal";if(!e)return null;const Y=k&&null!==w?_jsx(ReduxActionDetailFooter,{action:k,actions:R,selectedIndex:w,onIndexChange:F}):null,ee=k&&R.length>1?68:0,te=null==k,oe=_jsx(View,{style:styles.container,children:k&&null!==w?_jsx(ReduxActionDetailContent,{action:k,actions:R,selectedIndex:w,onIndexChange:F,disableInternalFooter:!0,initialView:a}):_jsxs(_Fragment,{children:[y&&!g&&!reduxActionStore.isCaptureSuppressed()&&_jsxs(View,{style:styles.errorBanner,testID:`${REDUX_TEST_ID}-banner-error`,children:[_jsx(AlertTriangle,{size:14,color:night.color.danger}),_jsx(Text,{style:styles.errorText,children:x?"Not inside a Redux Provider. Wrap your app with <Provider store={store}>.":"react-redux not installed. Run: npm install react-redux"})]}),!D&&g&&_jsxs(View,{style:styles.disabledBanner,testID:`${REDUX_TEST_ID}-banner-disabled`,children:[_jsx(Power,{size:14,color:night.color.warning}),_jsx(Text,{style:styles.disabledText,children:"Action capture is disabled"})]}),"patch"===b&&!reduxActionStore.isCaptureSuppressed()&&_jsxs(View,{style:styles.disabledBanner,testID:`${REDUX_TEST_ID}-banner-patch`,children:[_jsx(AlertTriangle,{size:14,color:night.color.warning}),_jsx(Text,{style:styles.disabledText,children:"Top-level capture only — thunk/RTK Query internals aren't visible. Put import '@buoy-gg/redux' first in your app entry (or add buoyReduxMiddleware) for full capture."})]}),E&&_jsxs(TouchableOpacity,{style:styles.lockedBanner,onPress:H,activeOpacity:.8,testID:`${REDUX_TEST_ID}-locked`,accessibilityRole:"button",accessibilityLabel:`${f} older ${1===f?"action":"actions"} locked. Upgrade to see them.`,children:[_jsx(Lock,{size:14,color:night.color.accent}),_jsxs(Text,{style:styles.lockedText,testID:`${REDUX_TEST_ID}-locked-text`,children:[f," older ",1===f?"action":"actions"," locked"]}),_jsx(View,{style:styles.upgradeBadge,children:_jsx(Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),R.length>0?_jsx(FlatList,{ref:$,testID:`${REDUX_TEST_ID}-list`,data:R,renderItem:J,keyExtractor:q,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,...EVENT_LIST_PRESET}):_jsx(EmptyState,{isEnabled:D,query:M,totalActions:S.totalActions})]})}),re=_jsx(ProUpgradeModal,{visible:u,onClose:()=>h(!1),featureName:"Full Action History"});return _jsxs(TickProvider,n?{children:[_jsxs(View,{style:styles.inlineRoot,children:[_jsx(View,{style:styles.inlineHeader,...windowDragProps,children:Z()}),oe,Y]}),re]}:{children:[_jsx(JsModal,{visible:e,onClose:t,onMinimize:r,persistenceKey:Q,header:{showToggleButton:!0,customContent:Z()},onModeChange:z,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,disableScrollWrapper:te,styles:{},footer:Y,footerHeight:ee,children:oe}),re]})}export function ReduxToolView(e={}){return _jsx(ReduxModal,{...e,inline:!0,visible:!0,onClose:()=>{}})}const styles=StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:macOSColors.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerChipRow:{flexDirection:"row",alignItems:"center",gap:8},headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:night.color.surfaceElevated,paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:night.color.border},headerChipActive:{backgroundColor:night.color.accentSoft,borderColor:night.color.accentBorderStrong},headerChipLabel:{fontSize:10,fontWeight:"700",color:night.color.textTertiary},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:monoFont},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:night.color.surfaceElevated,borderWidth:1,borderColor:night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonActive:{backgroundColor:night.color.accentSoft,borderColor:night.color.accentBorderStrong},startButton:{backgroundColor:macOSColors.semantic.successBackground,borderColor:macOSColors.semantic.success+"40"},stopButton:{backgroundColor:macOSColors.semantic.errorBackground,borderColor:macOSColors.semantic.error+"40"},errorBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:night.color.dangerSoft,borderRadius:8,borderWidth:1,borderColor:night.color.danger+"20"},errorText:{color:night.color.danger,fontSize:11,flex:1},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:night.color.warning+"20"},disabledText:{color:night.color.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:night.color.accentSoft,borderRadius:8,borderWidth:1,borderColor:night.color.accentBorder},lockedText:{color:night.color.accent,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:night.color.onAccent,fontSize:9,fontWeight:"700",letterSpacing:.5}});
+"use strict";
+
+/**
+ * Main Redux DevTools modal
+ *
+ * This component auto-instruments the Redux store when it mounts,
+ * providing zero-config action capture for the DevTools.
+ */
+
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
+import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
+import { JsModal, ModalHeader, macOSColors, night, Search, Trash2, Power, Zap, CheckCircle, Copy, Lock, AlertTriangle, devToolsStorageKeys, copyToClipboard, ProUpgradeModal, PowerToggleButton, TickProvider, useLimit, TIER_LIMITS, windowDragProps, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET, monoFont } from "@buoy-gg/shared-ui";
+import { useIsPro } from "@buoy-gg/license";
+import { useReduxActions } from "../hooks/useReduxActions";
+import { reduxActionStore } from "../utils/reduxActionStore";
+import { useAutoInstrumentRedux } from "../hooks/useAutoInstrumentRedux";
+import { ReduxActionItem } from "./ReduxActionItem";
+import { ReduxActionDetailContent, ReduxActionDetailFooter } from "./ReduxActionDetailContent";
+import { REDUX_TEST_ID, buildActionRowTestIDs } from "../utils/testIDs";
+
+/**
+ * @deprecated Read the live limit with `useLimit("redux.actions")` — this
+ * constant only ever reports the FREE tier's value and is blind to the
+ * anonymous tier. Kept because it is part of the package's public exports.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const FREE_TIER_ACTION_LIMIT = TIER_LIMITS["redux.actions"].free;
+/**
+ * Why this takes the query as well as the enabled flag: "nothing was captured"
+ * and "nothing matched what you typed" are different problems, and an empty
+ * list under a live search reads as a dead tool. Naming the query back is what
+ * makes the difference legible without clearing the field to find out.
+ */
+function EmptyState({
+  isEnabled,
+  query,
+  totalActions
+}) {
+  const content = resolveListEmptyState({
+    subject: "actions",
+    search: query,
+    total: totalActions,
+    capturing: isEnabled,
+    waiting: {
+      otto: "waiting",
+      title: "No Redux actions",
+      message: "Actions will appear here as they are dispatched"
+    },
+    paused: {
+      title: "No Redux actions",
+      message: "Enable capture to start recording actions"
+    }
+  });
+  return /*#__PURE__*/_jsx(ToolEmptyState, {
+    ...content,
+    testID: `${REDUX_TEST_ID}-empty`
+  });
+}
+export function ReduxModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  inline = false,
+  onActionSelect,
+  initialSelectedActionId,
+  initialDetailView
+}) {
+  const isPro = useIsPro();
+  const actionLimit = useLimit("redux.actions");
+  const [showProModal, setShowProModal] = useState(false);
+
+  // Auto-instrument the Redux store (zero-config)
+  const {
+    isInstrumented,
+    isLoading: isInstrumentLoading,
+    error: instrumentError,
+    isReactReduxAvailable,
+    captureMechanism
+  } = useAutoInstrumentRedux();
+  const {
+    filteredActions,
+    filter,
+    setFilter,
+    stats,
+    clearActions,
+    isEnabled,
+    toggleCapture
+  } = useReduxActions();
+
+  // Pro is Infinity here, so slice() returns everything and the locked count
+  // floors at 0 — no tier branching needed at the call site.
+  const visibleActions = useMemo(() => filteredActions.slice(0, actionLimit), [filteredActions, actionLimit]);
+  const lockedActionCount = useMemo(() => Math.max(0, filteredActions.length - actionLimit), [filteredActions.length, actionLimit]);
+  const hasLockedActions = lockedActionCount > 0;
+
+  // Selection state, held as an action ID rather than as a list position.
+  //
+  // This list grows at the HEAD: every dispatch prepends a row and pushes
+  // everything below it down one. An index therefore names a different action
+  // a moment after it is taken — so a detail page opened while the app was
+  // still dispatching silently became a detail page for some OTHER action,
+  // with no transition and nothing to say it had happened. A devtool that
+  // quietly swaps what it is showing you is worse than one that shows nothing.
+  //
+  // The index is still what the stepper and the diff's "previous action" are
+  // expressed in — both are genuinely about position — so it is derived here
+  // and re-derived whenever the list moves.
+  const [selectedActionId, setSelectedActionId] = useState(null);
+  const selectedActionIndex = useMemo(() => {
+    if (selectedActionId === null) return null;
+    const index = visibleActions.findIndex(a => a.id === selectedActionId);
+    // Below zero means the action is gone — cleared, or aged out past the tier
+    // cap. Falling back to the list is the honest outcome; the alternative is
+    // showing whatever moved into its place.
+    return index >= 0 ? index : null;
+  }, [selectedActionId, visibleActions]);
+  const selectedAction = selectedActionIndex !== null ? visibleActions[selectedActionIndex] : null;
+
+  // Notify the host on selection (keyed by action id so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch state trees here).
+  const lastNotifiedSelectionRef = useRef(null);
+  useEffect(() => {
+    if (!onActionSelect) return;
+    const id = selectedAction?.id ?? null;
+    if (id === null || id === lastNotifiedSelectionRef.current) return;
+    lastNotifiedSelectionRef.current = id;
+    onActionSelect(selectedAction);
+  }, [selectedAction, onActionSelect]);
+
+  // Deep link into an action's detail (see initialSelectedActionId). Applied
+  // at most once per id, so the list re-rendering — or the user pressing Back
+  // — never re-opens it.
+  const appliedInitialSelectionRef = useRef(null);
+  useEffect(() => {
+    if (!initialSelectedActionId) return;
+    if (appliedInitialSelectionRef.current === initialSelectedActionId) return;
+    const index = visibleActions.findIndex(a => a.id === initialSelectedActionId);
+    if (index < 0) return;
+    appliedInitialSelectionRef.current = initialSelectedActionId;
+    setSelectedActionId(initialSelectedActionId);
+  }, [initialSelectedActionId, visibleActions]);
+  const [searchText, setSearchText] = useState("");
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const searchInputRef = useRef(null);
+  const flatListRef = useRef(null);
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const handleSearch = text => {
+    setSearchText(text);
+    setFilter(prev => ({
+      ...prev,
+      searchText: text
+    }));
+  };
+
+  /** Drop the query AND put the header back — the ✕ means "stop filtering". */
+  const closeSearch = useCallback(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
+  const handleActionPress = useCallback(action => {
+    setSelectedActionId(action.id);
+  }, []);
+  const handleUpgradePress = useCallback(() => {
+    setShowProModal(true);
+  }, []);
+  const handleBack = useCallback(() => {
+    setSelectedActionId(null);
+  }, []);
+
+  // The stepper and the async timeline both navigate by POSITION; the
+  // selection is kept by identity, so the position is resolved to an id here,
+  // once, at the moment of the tap.
+  const handleIndexChange = useCallback(newIndex => {
+    const next = visibleActions[newIndex];
+    if (next) setSelectedActionId(next.id);
+  }, [visibleActions]);
+  const handleCopyAll = async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    const actionsData = filteredActions.map(action => ({
+      id: action.id,
+      type: action.type,
+      ...(action.payload !== undefined && {
+        payload: action.payload
+      }),
+      timestamp: action.timestamp,
+      prevState: action.prevState,
+      nextState: action.nextState,
+      hasStateChange: action.hasStateChange
+    }));
+    await copyToClipboard(actionsData);
+  };
+
+  // FlatList optimization
+  const keyExtractor = useCallback(item => item.id, []);
+
+  // An action row's handle carries an ordinal among rows of the SAME type, and
+  // an ordinal is a fact about the list rather than about the row — see
+  // ../utils/testIDs.ts for why a type alone cannot address a redux row.
+  const rowTestIDs = useMemo(() => buildActionRowTestIDs(visibleActions), [visibleActions]);
+
+  // How many captured actions share each requestId, i.e. how far along each
+  // async operation is.
+  //
+  // Computed HERE rather than in the row, and passed down, because a row's
+  // async badge is a fact about OTHER rows. `pending` is captured and drawn
+  // while it is still alone in the world; `fulfilled` arrives a moment later
+  // and makes the earlier row's badge wrong. `ReduxActionItem` is memoized on
+  // its props and the action object it holds never changes identity, so
+  // nothing about that second arrival reached the first row — the pending half
+  // of every settled thunk permanently showed no flow badge, which is exactly
+  // backwards from what the badge is for.
+  //
+  // One pass over the store instead of a per-row scan: the previous shape was
+  // O(rows x actions) at 200 actions, on a list that re-renders on every
+  // dispatch.
+  const linkedCounts = useMemo(() => {
+    const counts = new Map();
+    for (const action of reduxActionStore.getActions()) {
+      const requestId = action.meta?.requestId;
+      if (!requestId) continue;
+      counts.set(requestId, (counts.get(requestId) ?? 0) + 1);
+    }
+    return counts;
+    // `filteredActions` takes a new identity whenever the store notifies, which
+    // is the only moment these counts can change.
+  }, [filteredActions]);
+  const renderItem = useCallback(({
+    item
+  }) => {
+    const requestId = item.meta?.requestId;
+    return /*#__PURE__*/_jsx(ReduxActionItem, {
+      action: item,
+      onPress: handleActionPress,
+      linkedCount: requestId ? linkedCounts.get(requestId) ?? 0 : 0,
+      testID: rowTestIDs.get(item.id)
+    });
+  }, [handleActionPress, rowTestIDs, linkedCounts]);
+  const renderHeaderContent = () => {
+    // Detail view header - show action type
+    if (selectedAction) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: selectedAction.type,
+          centered: true,
+          testID: `${REDUX_TEST_ID}-detail-title`
+        })]
+      });
+    }
+
+    // Main list view header
+    return /*#__PURE__*/_jsxs(ModalHeader, {
+      children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: "Search action types...",
+          accessibilityLabel: "Search action types",
+          iconSize: 14,
+          testID: `${REDUX_TEST_ID}-search-field`,
+          containerTestID: `${REDUX_TEST_ID}-search`,
+          clearTestID: `${REDUX_TEST_ID}-search-clear`
+          // Stay open while the query still filters the list.
+          //
+          // Collapsing it on blur hid the reason rows were missing: the
+          // header went back to its chips — which count the WHOLE
+          // capture, not the filtered list — while the list stayed
+          // narrowed, so the tool showed "4 actions" above a single row
+          // and offered nothing to explain the gap. The only way back
+          // was to reopen a field the user had no reason to think was
+          // still armed.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
+        }) : /*#__PURE__*/_jsxs(View, {
+          style: styles.headerChipRow,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.headerChip, !filter.onlyWithChanges && styles.headerChipActive],
+            onPress: () => setFilter(prev => ({
+              ...prev,
+              onlyWithChanges: false
+            })),
+            testID: `${REDUX_TEST_ID}-chip-all`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Show all actions, ${stats.totalActions} captured`,
+            accessibilityState: {
+              selected: !filter.onlyWithChanges
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.headerChipLabel,
+              children: "ALL"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerChipValue, {
+                color: night.color.text
+              }],
+              testID: `${REDUX_TEST_ID}-chip-all-value`,
+              children: stats.totalActions
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.headerChip, filter.onlyWithChanges && styles.headerChipActive],
+            onPress: () => setFilter(prev => ({
+              ...prev,
+              onlyWithChanges: true
+            })),
+            testID: `${REDUX_TEST_ID}-chip-changed`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Show only actions that changed state, ${stats.actionsWithChanges} of them`,
+            accessibilityState: {
+              selected: !!filter.onlyWithChanges
+            },
+            children: [/*#__PURE__*/_jsx(Zap, {
+              size: 12,
+              color: macOSColors.semantic.warning
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerChipValue, {
+                color: macOSColors.semantic.warning
+              }],
+              testID: `${REDUX_TEST_ID}-chip-changed-value`,
+              children: stats.actionsWithChanges
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.headerChip,
+            testID: `${REDUX_TEST_ID}-chip-types`,
+            accessibilityLabel: `${stats.uniqueActionTypes} distinct action types`,
+            children: [/*#__PURE__*/_jsx(CheckCircle, {
+              size: 12,
+              color: macOSColors.semantic.success
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerChipValue, {
+                color: macOSColors.semantic.success
+              }],
+              testID: `${REDUX_TEST_ID}-chip-types-value`,
+              children: stats.uniqueActionTypes
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+        children: [!isSearchActive && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: [styles.headerActionButton, searchText.length > 0 && styles.headerActionButtonActive],
+          testID: `${REDUX_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search action types",
+          children: /*#__PURE__*/_jsx(Search, {
+            size: 14,
+            color: searchText.length > 0 ? night.color.accent : night.color.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleCopyAll,
+          style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredActions.length === 0,
+          testID: `${REDUX_TEST_ID}-copy`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Copy all actions",
+          accessibilityState: {
+            disabled: filteredActions.length === 0
+          },
+          children: /*#__PURE__*/_jsx(Copy, {
+            size: 14,
+            color: filteredActions.length > 0 ? night.color.textSecondary : night.color.textTertiary
+          })
+        }), /*#__PURE__*/_jsx(PowerToggleButton, {
+          isEnabled: isEnabled,
+          onToggle: toggleCapture,
+          accessibilityLabel: "Toggle Redux action capture",
+          testID: `${REDUX_TEST_ID}-power`
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: clearActions,
+          style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredActions.length === 0,
+          testID: `${REDUX_TEST_ID}-clear`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear actions",
+          accessibilityState: {
+            disabled: filteredActions.length === 0
+          },
+          children: /*#__PURE__*/_jsx(Trash2, {
+            size: 14,
+            color: filteredActions.length > 0 ? night.color.textTertiary : night.color.textTertiary
+          })
+        })]
+      })]
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : "buoy-redux-modal";
+  if (!visible) return null;
+
+  // Footer for detail view navigation
+  const footerNode = selectedAction && selectedActionIndex !== null ? /*#__PURE__*/_jsx(ReduxActionDetailFooter, {
+    action: selectedAction,
+    actions: visibleActions,
+    selectedIndex: selectedActionIndex,
+    onIndexChange: handleIndexChange
+  }) : null;
+  const footerHeight = selectedAction && visibleActions.length > 1 ? 68 : 0;
+
+  // The action list owns its scrolling so FlatList virtualization works
+  // (see ZustandModal — same pattern, same tool-bench evidence).
+  const listOwnsScroll = selectedAction == null;
+  const body = /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: selectedAction && selectedActionIndex !== null ? /*#__PURE__*/_jsx(ReduxActionDetailContent, {
+      action: selectedAction,
+      actions: visibleActions,
+      selectedIndex: selectedActionIndex,
+      onIndexChange: handleIndexChange,
+      disableInternalFooter: true,
+      initialView: initialDetailView
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [instrumentError && !isInstrumented && !reduxActionStore.isCaptureSuppressed() && /*#__PURE__*/_jsxs(View, {
+        style: styles.errorBanner,
+        testID: `${REDUX_TEST_ID}-banner-error`,
+        children: [/*#__PURE__*/_jsx(AlertTriangle, {
+          size: 14,
+          color: night.color.danger
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.errorText,
+          children: isReactReduxAvailable ? "Not inside a Redux Provider. Wrap your app with <Provider store={store}>." : "react-redux not installed. Run: npm install react-redux"
+        })]
+      }), !isEnabled && isInstrumented && /*#__PURE__*/_jsxs(View, {
+        style: styles.disabledBanner,
+        testID: `${REDUX_TEST_ID}-banner-disabled`,
+        children: [/*#__PURE__*/_jsx(Power, {
+          size: 14,
+          color: night.color.warning
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.disabledText,
+          children: "Action capture is disabled"
+        })]
+      }), captureMechanism === "patch" && !reduxActionStore.isCaptureSuppressed() && /*#__PURE__*/_jsxs(View, {
+        style: styles.disabledBanner,
+        testID: `${REDUX_TEST_ID}-banner-patch`,
+        children: [/*#__PURE__*/_jsx(AlertTriangle, {
+          size: 14,
+          color: night.color.warning
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.disabledText,
+          children: "Top-level capture only \u2014 thunk/RTK Query internals aren't visible. Put import '@buoy-gg/redux' first in your app entry (or add buoyReduxMiddleware) for full capture."
+        })]
+      }), hasLockedActions && /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.lockedBanner,
+        onPress: handleUpgradePress,
+        activeOpacity: 0.8,
+        testID: `${REDUX_TEST_ID}-locked`,
+        accessibilityRole: "button",
+        accessibilityLabel: `${lockedActionCount} older ${lockedActionCount === 1 ? "action" : "actions"} locked. Upgrade to see them.`,
+        children: [/*#__PURE__*/_jsx(Lock, {
+          size: 14,
+          color: night.color.accent
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.lockedText,
+          testID: `${REDUX_TEST_ID}-locked-text`,
+          children: [lockedActionCount, " older ", lockedActionCount === 1 ? "action" : "actions", " locked"]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.upgradeBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.upgradeBadgeText,
+            children: "UPGRADE"
+          })
+        })]
+      }), visibleActions.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
+        ref: flatListRef,
+        testID: `${REDUX_TEST_ID}-list`,
+        data: visibleActions,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: true,
+        ...EVENT_LIST_PRESET
+      }) : /*#__PURE__*/_jsx(EmptyState, {
+        isEnabled: isEnabled,
+        query: searchText,
+        totalActions: stats.totalActions
+      })]
+    })
+  });
+  const upgradeModal = /*#__PURE__*/_jsx(ProUpgradeModal, {
+    visible: showProModal,
+    onClose: () => setShowProModal(false),
+    featureName: "Full Action History"
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/_jsxs(TickProvider, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.inlineHeader,
+          ...windowDragProps,
+          children: renderHeaderContent()
+        }), body, footerNode]
+      }), upgradeModal]
+    });
+  }
+  return /*#__PURE__*/_jsxs(TickProvider, {
+    children: [/*#__PURE__*/_jsx(JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      onModeChange: handleModeChange,
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
+      styles: {},
+      footer: footerNode,
+      footerHeight: footerHeight,
+      children: body
+    }), upgradeModal]
+  });
+}
+
+/**
+ * The same Redux tool as `ReduxModal`, rendered INLINE for hosts that place
+ * tools in a panel rather than a modal. Exists so there is exactly one
+ * implementation — the desktop dashboard used to ship its own copy of this
+ * component's header, action list and detail router.
+ */
+export function ReduxToolView(props = {}) {
+  return /*#__PURE__*/_jsx(ReduxModal, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
+const styles = StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default,
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
+  },
+  container: {
+    flex: 1,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
+  },
+  headerChipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: night.color.surfaceElevated,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  headerChipActive: {
+    // Active chip chrome takes the night accent, not info-cyan.
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
+  },
+  headerChipLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: night.color.textTertiary
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: monoFont
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: night.color.surfaceElevated,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  headerActionButtonActive: {
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
+  },
+  startButton: {
+    backgroundColor: macOSColors.semantic.successBackground,
+    borderColor: macOSColors.semantic.success + "40"
+  },
+  stopButton: {
+    backgroundColor: macOSColors.semantic.errorBackground,
+    borderColor: macOSColors.semantic.error + "40"
+  },
+  errorBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: night.color.dangerSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.danger + "20"
+  },
+  errorText: {
+    color: night.color.danger,
+    fontSize: 11,
+    flex: 1
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: night.color.warningSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.warning + "20"
+  },
+  disabledText: {
+    color: night.color.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  // Locked actions banner styles
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: night.color.accentSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: night.color.accentBorder
+  },
+  lockedText: {
+    color: night.color.accent,
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  upgradeBadge: {
+    backgroundColor: night.color.accent,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  upgradeBadgeText: {
+    // The night accent takes dark ink.
+    color: night.color.onAccent,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  }
+});