@buoy-gg/redux 7.0.33 → 7.0.34

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

@@ -7,7 +7,7 @@
 
 import { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, Zap, AlertCircle, Clock, RelativeTime } from "@buoy-gg/shared-ui";
+import { ChangeRow, buoyColors, AlertCircle } from "@buoy-gg/shared-ui";
 import { reduxActionStore } from "../utils/reduxActionStore";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -236,119 +236,76 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
   // Get color for this operation's badge
   const opColor = getOperationColor(operationIndex);
 
-  // Custom badge showing state change, slow action, or linked indicator
-  let customBadge = undefined;
+  // The async-sequence chip ("1/2 #3") sits in front of whatever indicator
+  // the row shows; the ⚡ / 🕒 indicators and the mono action verb are drawn
+  // by the shared ChangeRow.
+  const sequenceChip = hasLinkedActions ? /*#__PURE__*/_jsx(View, {
+    style: [styles.asyncSequenceBadge, {
+      backgroundColor: opColor.bg
+    }],
+    children: /*#__PURE__*/_jsxs(Text, {
+      style: [styles.asyncSequenceText, {
+        color: opColor.text
+      }],
+      testID: testID ? `${testID}-seq` : undefined,
+      children: [asyncPosition, "/", linkedCount, " #", operationIndex]
+    })
+  }) : undefined;
+  const common = {
+    statusColor,
+    statusLabel,
+    sublabel,
+    primaryText,
+    timestamp: action.timestamp,
+    onPress: () => onPress(action),
+    testID,
+    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`
+  };
   if (action.isSlowAction) {
-    // Show slow action warning
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/_jsx(View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/_jsxs(Text, {
-          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
-        })
-      })]
+    // Slow action warning (with the sequence chip when part of a flow).
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      slow: true
     });
-  } else if (action.category === "rejected") {
-    // Show error badge for rejected actions
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/_jsx(View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/_jsxs(Text, {
-          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
-        })
-      })]
+  }
+  if (action.category === "rejected") {
+    // Error badge for rejected actions.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      customBadge: /*#__PURE__*/_jsxs(View, {
+        style: styles.badgeContainer,
+        children: [sequenceChip, /*#__PURE__*/_jsx(View, {
+          style: styles.errorBadge,
+          testID: testID ? `${testID}-error` : undefined,
+          children: /*#__PURE__*/_jsx(AlertCircle, {
+            size: 12,
+            color: buoyColors.error
+          })
+        })]
+      })
     });
-  } else if (hasLinkedActions) {
-    // Show linked indicator for async actions
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/_jsxs(Text, {
-          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
-        })
-      })]
+  }
+  if (hasLinkedActions) {
+    // Linked indicator for async actions.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      changed: action.hasStateChange
     });
-  } else if (action.hasStateChange) {
-    // Show state change indicator with action badge
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        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
-        })
-      })]
+  }
+  if (action.hasStateChange) {
+    // State change indicator with the action verb.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgeText: actionBadge,
+      changed: true
     });
   }
-  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,
-    primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
-      timestamp: action.timestamp
-    })
-    // Use customBadge if we have special indicators, otherwise show action badge as text
-    ,
-    customBadge: customBadge,
-    badgeText: customBadge ? undefined : actionBadge,
-    badgeColor: statusColor,
-    showChevron: true,
-    onPress: () => onPress(action)
+  // Nothing special: CompactRow's plain badge with the action verb.
+  return /*#__PURE__*/_jsx(ChangeRow, {
+    ...common,
+    plainBadgeText: actionBadge
   });
 });
 const styles = StyleSheet.create({
@@ -357,17 +314,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 4
   },
-  actionBadgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  },
   errorBadge: {
     paddingHorizontal: 4
   },

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

@@ -4,136 +4,42 @@
  * ReduxDetailViewToggle
  *
  * Three-card toggle for switching between Action, State, and Diff views.
- * Redux-specific component for the enhanced detail view.
+ * The cards themselves are the shared `DetailViewToggle`; this file owns
+ * the redux view list and testID prefix.
  */
 
 import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { night, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VIEW_CONFIGS = [{
+import { DetailViewToggle, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Active-card chrome takes the single night accent (the per-view
+// warning/info/success tints were selection chrome, not data).
+const VIEWS = [{
   key: "action",
   label: "ACTION",
   description: "View action details",
-  icon: FileText,
-  // Active-card chrome takes the single night accent (the per-view
-  // warning/info/success tints were selection chrome, not data).
-  activeColor: night.color.accent
+  icon: FileText
 }, {
   key: "state",
   label: "STATE",
   description: "View current state",
-  icon: Database,
-  activeColor: night.color.accent
+  icon: Database
 }, {
   key: "diff",
   label: "DIFF",
   description: "Compare changes",
-  icon: GitBranch,
-  activeColor: night.color.accent
+  icon: GitBranch
 }];
+const DIFF_DISABLED = ["diff"];
 export const ReduxDetailViewToggle = /*#__PURE__*/memo(function ReduxDetailViewToggle({
   activeView,
   onViewChange,
   diffDisabled = false
 }) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.card, isActive && [styles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && styles.cardDisabled],
-        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, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? night.color.textTertiary : night.color.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
-              color: config.activeColor
-            }], isDisabled && styles.cardLabelDisabled],
-            children: config.label
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
-          children: config.description
-        })]
-      }, config.key);
-    })
+  return /*#__PURE__*/_jsx(DetailViewToggle, {
+    views: VIEWS,
+    activeView: activeView,
+    onViewChange: onViewChange,
+    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
+    testIDPrefix: "buoy-redux"
   });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  card: {
-    flex: 1,
-    backgroundColor: night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: night.color.accentSoft,
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: night.color.textSecondary
-  },
-  cardLabelActive: {
-    color: night.color.text
-  },
-  cardLabelDisabled: {
-    color: night.color.textTertiary
-  },
-  cardDescription: {
-    fontSize: 9,
-    color: night.color.textTertiary,
-    lineHeight: 12
-  },
-  cardDescriptionActive: {
-    color: night.color.textSecondary
-  },
-  cardDescriptionDisabled: {
-    color: night.color.textTertiary
-  }
 });

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

@@ -8,8 +8,8 @@
  */
 
 import { useState, useMemo, useRef, useCallback, useEffect } from "react";
-import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, macOSColors, night, Search, Trash2, Power, X, Zap, CheckCircle, Copy, Lock, AlertTriangle, devToolsStorageKeys, copyToClipboard, ProUpgradeModal, PowerToggleButton, TickProvider, useLimit, TIER_LIMITS, windowDragProps, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
+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 } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useReduxActions } from "../hooks/useReduxActions";
 import { reduxActionStore } from "../utils/reduxActionStore";
@@ -266,49 +266,29 @@ export function ReduxModal({
         onBack: onBack
       }), /*#__PURE__*/_jsx(ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-          style: styles.headerSearchContainer,
-          testID: `${REDUX_TEST_ID}-search`,
-          children: [/*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ref: searchInputRef,
-            testID: `${REDUX_TEST_ID}-search-field`,
-            style: styles.headerSearchInput,
-            placeholder: "Search action types...",
-            placeholderTextColor: night.color.textTertiary,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => searchInputRef.current?.blur()
-            // 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);
-            },
-            accessibilityLabel: "Search action types",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: closeSearch,
-            style: styles.headerSearchClear,
-            testID: `${REDUX_TEST_ID}-search-clear`,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close search",
-            children: /*#__PURE__*/_jsx(X, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          })]
+        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, {
@@ -503,11 +483,7 @@ export function ReduxModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ...EVENT_LIST_PRESET
       }) : /*#__PURE__*/_jsx(EmptyState, {
         isEnabled: isEnabled,
         query: searchText,
@@ -593,27 +569,6 @@ const styles = StyleSheet.create({
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
     backgroundColor: "transparent"
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerChipRow: {
     flexDirection: "row",
     alignItems: "center",

package/lib/module/redux/hooks/useReduxActions.js

@@ -2,40 +2,30 @@
 
 /**
  * Hook for consuming Redux actions from the store
+ *
+ * The subscribe / filter / pause / clear plumbing is shared `useChangeLog`;
+ * this file owns the redux-specific stats, action types and selection.
  */
 
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useMemo, useCallback } from "react";
+import { useChangeLog } from "@buoy-gg/shared-ui";
 import { reduxActionStore } from "../utils/reduxActionStore";
+const filterActions = (_actions, filter) => reduxActionStore.filterActions(filter);
 export function useReduxActions() {
-  const [actions, setActions] = useState(() => reduxActionStore.getActions());
-  const [filter, setFilter] = useState({});
-  const [isEnabled, setIsEnabled] = useState(() => reduxActionStore.getEnabled());
+  const log = useChangeLog(reduxActionStore, {
+    filterItems: filterActions
+  });
   const [selectedAction, setSelectedAction] = useState(null);
 
-  // Subscribe to store changes
-  useEffect(() => {
-    const unsubscribe = reduxActionStore.subscribe(newActions => {
-      setActions(newActions);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  // Filter actions based on current filter
-  const filteredActions = useMemo(() => {
-    return reduxActionStore.filterActions(filter);
-  }, [actions, filter]);
-
   // Get stats
   const stats = useMemo(() => {
     return reduxActionStore.getStats();
-  }, [actions]);
+  }, [log.items]);
 
   // Get unique action types
   const actionTypes = useMemo(() => {
     return reduxActionStore.getUniqueActionTypes();
-  }, [actions]);
+  }, [log.items]);
 
   // Clear actions
   const clearActions = useCallback(() => {
@@ -43,26 +33,19 @@ export function useReduxActions() {
     setSelectedAction(null);
   }, []);
 
-  // Toggle capture
-  const toggleCapture = useCallback(() => {
-    const newEnabled = !isEnabled;
-    reduxActionStore.setEnabled(newEnabled);
-    setIsEnabled(newEnabled);
-  }, [isEnabled]);
-
   // Get action by ID
   const getActionById = useCallback(id => {
     return reduxActionStore.getActionById(id);
   }, []);
   return {
-    actions,
-    filteredActions,
-    filter,
-    setFilter,
+    actions: log.items,
+    filteredActions: log.filteredItems,
+    filter: log.filter,
+    setFilter: log.setFilter,
     stats,
     clearActions,
-    isEnabled,
-    toggleCapture,
+    isEnabled: log.isEnabled,
+    toggleCapture: log.toggleCapture,
     actionTypes,
     getActionById,
     selectedAction,