@buoy-gg/redux 7.0.38 → 7.0.39

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

@@ -1 +1,330 @@
-"use strict";import{memo}from"react";import{View,Text,StyleSheet}from"react-native";import{ChangeRow,buoyColors,AlertCircle,monoFont}from"@buoy-gg/shared-ui";import{reduxActionStore}from"../utils/reduxActionStore";import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";const OPERATION_COLORS=[{bg:"rgba(99, 102, 241, 0.25)",text:"#818CF8"},{bg:"rgba(236, 72, 153, 0.25)",text:"#F472B6"},{bg:"rgba(14, 165, 233, 0.25)",text:"#38BDF8"},{bg:"rgba(245, 158, 11, 0.25)",text:"#FBBF24"},{bg:"rgba(16, 185, 129, 0.25)",text:"#34D399"},{bg:"rgba(168, 85, 247, 0.25)",text:"#C084FC"},{bg:"rgba(239, 68, 68, 0.25)",text:"#F87171"},{bg:"rgba(20, 184, 166, 0.25)",text:"#2DD4BF"}];function getOperationColor(e){return e<=0?{bg:"rgba(142, 142, 147, 0.2)",text:buoyColors.textSecondary}:OPERATION_COLORS[(e-1)%OPERATION_COLORS.length]}const SLICE_COLORS={cart:"#10B981",user:"#3B82F6",auth:"#8B5CF6",app:"#6366F1",ui:"#EC4899",settings:"#F59E0B",api:"#14B8A6",data:"#06B6D4"};function getSliceColor(e){if(!e)return"#6B7280";const t=e.toLowerCase();if(SLICE_COLORS[t])return SLICE_COLORS[t];for(const[e,r]of Object.entries(SLICE_COLORS))if(t.includes(e))return r;return`hsl(${137*e.split("").reduce((e,t)=>e+t.charCodeAt(0),0)%360}, 70%, 60%)`}function getStatusLabel(e,t){switch(e){case"pending":return"Pending";case"fulfilled":return"Success";case"rejected":return"Error";case"internal":return"Internal";case"query":return"Query";case"mutation":return"Mutation";default:return t?t.charAt(0).toUpperCase()+t.slice(1):"Action"}}function getStatusColor(e,t,r){switch(e){case"pending":return buoyColors.warning;case"fulfilled":return buoyColors.success;case"rejected":return buoyColors.error;case"internal":return buoyColors.textMuted;case"query":case"mutation":return buoyColors.info;default:return getSliceColor(r)}}function getSublabel(e){const t=[];return void 0!==e.duration&&e.duration>=.1&&t.push(`${e.duration.toFixed(1)}ms`),e.hasStateChange?e.changedKeysCount&&e.changedKeysCount>0?t.push(`${e.changedKeysCount} key${e.changedKeysCount>1?"s":""} changed`):t.push(e.diffSummary||"state changed"):t.push("no state change"),t.join(" · ")}function getActionBadge(e){return e.actionName?.toUpperCase()||e.type.split("/").pop()?.toUpperCase()||""}function getPrimaryText(e){return"internal"===e.category?e.type:e.sliceName?`${e.sliceName}/${e.actionName.toLowerCase()}`:e.type}export const ReduxActionItem=memo(function({action:e,onPress:t,linkedCount:r,testID:o}){const n=e.sliceName??void 0,a=getStatusColor(e.category,e.hasStateChange,n),s=getStatusLabel(e.category,n),i=getSublabel(e),c=getPrimaryText(e),u=getActionBadge(e),g=(r??0)>1,l=g?reduxActionStore.getLinkedActions(e):[],d=g?l.findIndex(t=>t.id===e.id)+1:0,C=g&&e.meta?.requestId?reduxActionStore.getAsyncOperationIndex(e.meta.requestId):0,x=getOperationColor(C),b=g?_jsx(View,{style:[styles.asyncSequenceBadge,{backgroundColor:x.bg}],children:_jsxs(Text,{style:[styles.asyncSequenceText,{color:x.text}],testID:o?`${o}-seq`:void 0,children:[d,"/",r," #",C]})}):void 0,y={statusColor:a,statusLabel:s,sublabel:i,primaryText:c,timestamp:e.timestamp,onPress:()=>t(e),testID:o,accessibilityLabel:`${c}, ${s}, ${i}`};return e.isSlowAction?_jsx(ChangeRow,{...y,badgePrefix:b,slow:!0}):"rejected"===e.category?_jsx(ChangeRow,{...y,customBadge:_jsxs(View,{style:styles.badgeContainer,children:[b,_jsx(View,{style:styles.errorBadge,testID:o?`${o}-error`:void 0,children:_jsx(AlertCircle,{size:12,color:buoyColors.error})})]})}):g?_jsx(ChangeRow,{...y,badgePrefix:b,changed:e.hasStateChange}):e.hasStateChange?_jsx(ChangeRow,{...y,badgeText:u,changed:!0}):_jsx(ChangeRow,{...y,plainBadgeText:u})});const styles=StyleSheet.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},errorBadge:{paddingHorizontal:4},asyncSequenceBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},asyncSequenceText:{fontSize:10,fontWeight:"600",fontFamily:monoFont}});
+"use strict";
+
+/**
+ * Compact list item for displaying a Redux action
+ * Uses shared CompactRow for consistent styling with React Query devtools
+ */
+
+import { memo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { ChangeRow, buoyColors, AlertCircle, monoFont } from "@buoy-gg/shared-ui";
+import { reduxActionStore } from "../utils/reduxActionStore";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Color palette for async operation badges
+ * Each operation gets a distinct color to make matching easy
+ */
+const OPERATION_COLORS = [{
+  bg: "rgba(99, 102, 241, 0.25)",
+  text: "#818CF8"
+},
+// indigo
+{
+  bg: "rgba(236, 72, 153, 0.25)",
+  text: "#F472B6"
+},
+// pink
+{
+  bg: "rgba(14, 165, 233, 0.25)",
+  text: "#38BDF8"
+},
+// sky
+{
+  bg: "rgba(245, 158, 11, 0.25)",
+  text: "#FBBF24"
+},
+// amber
+{
+  bg: "rgba(16, 185, 129, 0.25)",
+  text: "#34D399"
+},
+// emerald
+{
+  bg: "rgba(168, 85, 247, 0.25)",
+  text: "#C084FC"
+},
+// purple
+{
+  bg: "rgba(239, 68, 68, 0.25)",
+  text: "#F87171"
+},
+// red
+{
+  bg: "rgba(20, 184, 166, 0.25)",
+  text: "#2DD4BF"
+} // teal
+];
+function getOperationColor(index) {
+  if (index <= 0) return {
+    bg: "rgba(142, 142, 147, 0.2)",
+    text: buoyColors.textSecondary
+  };
+  return OPERATION_COLORS[(index - 1) % OPERATION_COLORS.length];
+}
+
+/**
+ * Slice color palette - consistent colors per slice name
+ * Makes it easy to visually track actions from the same slice
+ */
+const SLICE_COLORS = {
+  cart: "#10B981",
+  // emerald - shopping/commerce
+  user: "#3B82F6",
+  // blue - user related
+  auth: "#8B5CF6",
+  // purple - authentication
+  app: "#6366F1",
+  // indigo - app-wide
+  ui: "#EC4899",
+  // pink - UI state
+  settings: "#F59E0B",
+  // amber - settings
+  api: "#14B8A6",
+  // teal - API calls
+  data: "#06B6D4" // cyan - data management
+};
+
+/**
+ * Get consistent color for a slice based on its name
+ */
+function getSliceColor(sliceName) {
+  if (!sliceName) return "#6B7280"; // gray for unknown
+
+  const lowerSlice = sliceName.toLowerCase();
+
+  // Check for exact match first
+  if (SLICE_COLORS[lowerSlice]) {
+    return SLICE_COLORS[lowerSlice];
+  }
+
+  // Check for partial matches
+  for (const [key, color] of Object.entries(SLICE_COLORS)) {
+    if (lowerSlice.includes(key)) {
+      return color;
+    }
+  }
+
+  // Generate consistent color from slice name hash
+  const hash = sliceName.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const hue = hash * 137 % 360;
+  return `hsl(${hue}, 70%, 60%)`;
+}
+
+/**
+ * Get status label based on category and slice
+ */
+function getStatusLabel(category, sliceName) {
+  switch (category) {
+    case "pending":
+      return "Pending";
+    case "fulfilled":
+      return "Success";
+    case "rejected":
+      return "Error";
+    case "internal":
+      return "Internal";
+    case "query":
+      return "Query";
+    case "mutation":
+      return "Mutation";
+    default:
+      // For regular actions, show slice name if available
+      return sliceName ? sliceName.charAt(0).toUpperCase() + sliceName.slice(1) : "Action";
+  }
+}
+
+/**
+ * Get color for action category
+ */
+function getStatusColor(category, hasStateChange, sliceName) {
+  switch (category) {
+    case "pending":
+      return buoyColors.warning;
+    case "fulfilled":
+      return buoyColors.success;
+    case "rejected":
+      return buoyColors.error;
+    case "internal":
+      return buoyColors.textMuted;
+    case "query":
+      return buoyColors.info;
+    case "mutation":
+      return buoyColors.info;
+    default:
+      // For regular actions, use slice-based color
+      return getSliceColor(sliceName);
+  }
+}
+
+/**
+ * Get sublabel with duration and diff info
+ */
+function getSublabel(action) {
+  const parts = [];
+
+  // Add duration if available and meaningful
+  if (action.duration !== undefined && action.duration >= 0.1) {
+    parts.push(`${action.duration.toFixed(1)}ms`);
+  }
+
+  // Add diff summary - be more descriptive
+  if (action.hasStateChange) {
+    if (action.changedKeysCount && action.changedKeysCount > 0) {
+      parts.push(`${action.changedKeysCount} key${action.changedKeysCount > 1 ? 's' : ''} changed`);
+    } else {
+      parts.push(action.diffSummary || "state changed");
+    }
+  } else {
+    parts.push("no state change");
+  }
+  return parts.join(" · ");
+}
+
+/**
+ * Get action name badge text
+ */
+function getActionBadge(action) {
+  // Show the action name in uppercase (e.g., ADDITEM, ORDERCOMPLETED)
+  return action.actionName?.toUpperCase() || action.type.split('/').pop()?.toUpperCase() || "";
+}
+
+/**
+ * Get primary text - use action name for cleaner display
+ */
+function getPrimaryText(action) {
+  // For internal actions, show the full type
+  if (action.category === "internal") {
+    return action.type;
+  }
+
+  // For others, show slice/actionName format
+  if (action.sliceName) {
+    return `${action.sliceName}/${action.actionName.toLowerCase()}`;
+  }
+  return action.type;
+}
+
+// Memo justified by profiling (tool-bench 2026-07-06): ReduxActionItem
+// x172 renders during a 5s idle dwell at 200 seeded actions. The relative
+// timestamp is delegated to the shared <RelativeTime/> leaf so the 5s
+// tick re-renders only that Text, not this row.
+export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
+  action,
+  onPress,
+  linkedCount,
+  testID
+}) {
+  const sliceName = action.sliceName ?? undefined;
+  const statusColor = getStatusColor(action.category, action.hasStateChange, sliceName);
+  const statusLabel = getStatusLabel(action.category, sliceName);
+  const sublabel = getSublabel(action);
+  const primaryText = getPrimaryText(action);
+  const actionBadge = getActionBadge(action);
+
+  // 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;
+
+  // Get sequential operation index to distinguish concurrent requests (#1, #2, etc.)
+  const operationIndex = hasLinkedActions && action.meta?.requestId ? reduxActionStore.getAsyncOperationIndex(action.meta.requestId) : 0;
+
+  // Get color for this operation's badge
+  const opColor = getOperationColor(operationIndex);
+
+  // 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) {
+    // Slow action warning (with the sequence chip when part of a flow).
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      slow: true
+    });
+  }
+  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
+          })
+        })]
+      })
+    });
+  }
+  if (hasLinkedActions) {
+    // Linked indicator for async actions.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      changed: action.hasStateChange
+    });
+  }
+  if (action.hasStateChange) {
+    // State change indicator with the action verb.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgeText: actionBadge,
+      changed: true
+    });
+  }
+  // Nothing special: CompactRow's plain badge with the action verb.
+  return /*#__PURE__*/_jsx(ChangeRow, {
+    ...common,
+    plainBadgeText: actionBadge
+  });
+});
+const styles = StyleSheet.create({
+  badgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  errorBadge: {
+    paddingHorizontal: 4
+  },
+  asyncSequenceBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  asyncSequenceText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: monoFont
+  }
+});

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

@@ -1 +1,17 @@
-"use strict";import{useAutoInstrumentRedux}from"../hooks/useAutoInstrumentRedux";export function ReduxAutoInstrument(){return useAutoInstrumentRedux(),null}
+"use strict";
+
+import { useAutoInstrumentRedux } from "../hooks/useAutoInstrumentRedux";
+
+/**
+ * Headless startup instrumentation. Auto-rendered by FloatingDevTools (same
+ * pattern as RouteTracker & the overlay tools) so the Redux store is bound
+ * from app mount — action log, MCP getState/dispatch, and desktop sync all
+ * work WITHOUT the user ever opening the Redux tool. Renders nothing.
+ *
+ * Safe anywhere: if react-redux is missing or there's no Provider above, the
+ * hook records the diagnostic and fails gracefully.
+ */
+export function ReduxAutoInstrument() {
+  useAutoInstrumentRedux();
+  return null;
+}

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

@@ -1 +1,45 @@
-"use strict";import React,{memo}from"react";import{DetailViewToggle,FileText,Database,GitBranch}from"@buoy-gg/shared-ui";import{jsx as _jsx}from"react/jsx-runtime";const VIEWS=[{key:"action",label:"ACTION",description:"View action details",icon:FileText},{key:"state",label:"STATE",description:"View current state",icon:Database},{key:"diff",label:"DIFF",description:"Compare changes",icon:GitBranch}],DIFF_DISABLED=["diff"];export const ReduxDetailViewToggle=memo(function({activeView:e,onViewChange:i,diffDisabled:t=!1}){return _jsx(DetailViewToggle,{views:VIEWS,activeView:e,onViewChange:i,disabledKeys:t?DIFF_DISABLED:void 0,testIDPrefix:"buoy-redux"})});
+"use strict";
+
+/**
+ * ReduxDetailViewToggle
+ *
+ * Three-card toggle for switching between Action, State, and Diff views.
+ * The cards themselves are the shared `DetailViewToggle`; this file owns
+ * the redux view list and testID prefix.
+ */
+
+import React, { memo } from "react";
+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
+}, {
+  key: "state",
+  label: "STATE",
+  description: "View current state",
+  icon: Database
+}, {
+  key: "diff",
+  label: "DIFF",
+  description: "Compare changes",
+  icon: GitBranch
+}];
+const DIFF_DISABLED = ["diff"];
+export const ReduxDetailViewToggle = /*#__PURE__*/memo(function ReduxDetailViewToggle({
+  activeView,
+  onViewChange,
+  diffDisabled = false
+}) {
+  return /*#__PURE__*/_jsx(DetailViewToggle, {
+    views: VIEWS,
+    activeView: activeView,
+    onViewChange: onViewChange,
+    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
+    testIDPrefix: "buoy-redux"
+  });
+});

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

@@ -1 +1,8 @@
-"use strict";export{ReduxIcon,REDUX_ICON_COLOR}from"@buoy-gg/floating-tools-core";
+"use strict";
+
+/**
+ * Redux DevTools icon
+ * Re-exports from floating-tools-core for consistency
+ */
+
+export { ReduxIcon, REDUX_ICON_COLOR } from "@buoy-gg/floating-tools-core";