@buoy-gg/redux 7.0.40 → 7.0.42

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

@@ -1,433 +1 @@
-"use strict";
-
-/**
- * ReduxActionDetailContent
- *
- * Enhanced detail view for a Redux action with 3 view modes:
- * - ACTION: View action details, payload, meta, error
- * - STATE: View current state after action
- * - DIFF: Compare prev vs next state
- */
-
-import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { useState, useCallback, useMemo } from "react";
-import { macOSColors, night, EventStepperFooter, formatRelativeTime, parseValue, monoFont } from "@buoy-gg/shared-ui";
-import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
-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
- */
-function getActionColor(type) {
-  if (type.includes("/pending")) return macOSColors.semantic.warning;
-  if (type.includes("/fulfilled")) return macOSColors.semantic.success;
-  if (type.includes("/rejected")) return macOSColors.semantic.error;
-  if (type.startsWith("@@")) return macOSColors.text.muted;
-  return macOSColors.semantic.info;
-}
-
-/**
- * Get short action label
- */
-function getActionLabel(type) {
-  if (type.includes("/pending")) return "PENDING";
-  if (type.includes("/fulfilled")) return "FULFILLED";
-  if (type.includes("/rejected")) return "REJECTED";
-  if (type.startsWith("@@")) return "INTERNAL";
-  const parts = type.split("/");
-  return parts[parts.length - 1]?.toUpperCase() || "ACTION";
-}
-
-/**
- * Get the type (object, array, string, etc.)
- */
-function getValueType(value) {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (Array.isArray(value)) return "array";
-  return typeof value;
-}
-
-/**
- * Format timestamp for display
- */
-function formatTimestamp(timestamp) {
-  const date = new Date(timestamp);
-  return date.toLocaleTimeString("en-US", {
-    hour12: false,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-}
-
-/**
- * Diff mode tabs configuration
- */
-const DIFF_MODE_TABS = [{
-  key: "tree",
-  label: "TREE VIEW"
-}, {
-  key: "split",
-  label: "SPLIT VIEW"
-}];
-export function ReduxActionDetailContent({
-  action,
-  actions,
-  selectedIndex,
-  onIndexChange,
-  disableInternalFooter = false,
-  initialView = "action"
-}) {
-  // View state (initialView seeds it once; taps own it afterwards)
-  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));
-
-  // Actions are in reverse chronological order (newest first, oldest last)
-  const chronologicalNumber = totalActions - selectedIndex;
-  const prevChronologicalNumber = chronologicalNumber - 1;
-
-  // Get the previous action in chronological order (which is the NEXT index in the array)
-  const prevActionIndex = selectedIndex < totalActions - 1 ? selectedIndex + 1 : null;
-  const prevAction = prevActionIndex !== null ? actions[prevActionIndex] : null;
-
-  // Compare bar info for diff view
-  const leftEvent = useMemo(() => ({
-    index: prevActionIndex ?? 0,
-    label: prevChronologicalNumber > 0 ? `#${prevChronologicalNumber}` : "Initial",
-    timestamp: prevAction ? formatTimestamp(prevAction.timestamp) : "",
-    relativeTime: prevAction ? formatRelativeTime(new Date(prevAction.timestamp)) : "state",
-    badge: prevAction ? /*#__PURE__*/_jsx(View, {
-      style: [styles.actionBadgeSmall, {
-        backgroundColor: `${getActionColor(prevAction.type)}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.actionTextSmall, {
-          color: getActionColor(prevAction.type)
-        }],
-        children: getActionLabel(prevAction.type)
-      })
-    }) : undefined
-  }), [prevActionIndex, prevAction, prevChronologicalNumber]);
-  const rightEvent = useMemo(() => ({
-    index: selectedIndex,
-    label: `#${chronologicalNumber}`,
-    timestamp: formatTimestamp(action.timestamp),
-    relativeTime: formatRelativeTime(new Date(action.timestamp)),
-    badge: /*#__PURE__*/_jsx(View, {
-      style: [styles.actionBadgeSmall, {
-        backgroundColor: `${actionColor}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.actionTextSmall, {
-          color: actionColor
-        }],
-        children: actionLabel
-      })
-    })
-  }), [selectedIndex, action.timestamp, actionColor, actionLabel, chronologicalNumber]);
-
-  // 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, {
-          style: styles.valueLabel,
-          children: "STATE AFTER ACTION"
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.valueHeaderBadges,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.actionBadge, {
-              backgroundColor: `${actionColor}20`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionText, {
-                color: actionColor
-              }],
-              children: actionLabel
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.typeText,
-              testID: `${REDUX_TEST_ID}-state-type`,
-              children: stateType.toUpperCase()
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: parsed,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  }, [action.nextState, actionColor, actionLabel, stateType, stateEvicted]);
-
-  // Render diff content
-  const renderDiffContent = useCallback(() => {
-    const prevState = parseValue(action.prevState);
-    const nextState = parseValue(action.nextState);
-    if (diffMode === "split") {
-      return /*#__PURE__*/_jsx(ScrollView, {
-        style: {
-          flex: 1
-        },
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/_jsx(SplitDiffViewer, {
-          oldValue: prevState,
-          newValue: nextState,
-          theme: diffThemes.devToolsDefault,
-          options: {
-            hideLineNumbers: false,
-            disableWordDiff: false,
-            showDiffOnly: false,
-            compareMethod: "words",
-            contextLines: 3
-          },
-          showThemeName: false
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(TreeDiffViewer, {
-      oldValue: prevState,
-      newValue: nextState
-    });
-  }, [action.prevState, action.nextState, diffMode]);
-
-  // Navigation handlers
-  const handleFooterPrevious = useCallback(() => {
-    onIndexChange(Math.min(totalActions - 1, selectedIndex + 1));
-  }, [selectedIndex, totalActions, onIndexChange]);
-  const handleFooterNext = useCallback(() => {
-    onIndexChange(Math.max(0, selectedIndex - 1));
-  }, [selectedIndex, onIndexChange]);
-
-  // 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, {
-      activeView: activeView,
-      onViewChange: setActiveView,
-      diffDisabled: diffDisabled
-    }), /*#__PURE__*/_jsxs(View, {
-      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
-      children: [activeView === "action" && /*#__PURE__*/_jsx(ReduxActionInfoView, {
-        action: action
-      }), activeView === "state" && /*#__PURE__*/_jsx(View, {
-        style: styles.stateContainer,
-        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,
-          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()
-        })]
-      })]
-    }), showInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
-      currentIndex: chronologicalNumber - 1,
-      totalItems: totalActions,
-      onPrevious: handleFooterPrevious,
-      onNext: handleFooterNext,
-      itemLabel: "Action",
-      subtitle: formatRelativeTime(new Date(action.timestamp)),
-      absolute: true
-    })]
-  });
-}
-
-/**
- * External footer component for modal use
- */
-export function ReduxActionDetailFooter({
-  action,
-  actions,
-  selectedIndex,
-  onIndexChange
-}) {
-  const totalActions = actions.length;
-  if (totalActions <= 1) return null;
-  const chronologicalNumber = totalActions - selectedIndex;
-  return /*#__PURE__*/_jsx(EventStepperFooter, {
-    currentIndex: chronologicalNumber - 1,
-    totalItems: totalActions,
-    onPrevious: () => onIndexChange(Math.min(totalActions - 1, selectedIndex + 1)),
-    onNext: () => onIndexChange(Math.max(0, selectedIndex - 1)),
-    itemLabel: "Action",
-    subtitle: formatRelativeTime(new Date(action.timestamp))
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  contentArea: {
-    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
-  stateContainer: {
-    flex: 1,
-    padding: 14
-  },
-  contentCard: {
-    backgroundColor: night.color.surface,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    letterSpacing: 0.5,
-    fontWeight: "600"
-  },
-  valueHeaderBadges: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  actionBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  actionText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 0.3
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  },
-  valueBox: {
-    // Inset code box — darker than the card, the night track color.
-    backgroundColor: night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 8
-  },
-  evictedText: {
-    fontSize: 12,
-    color: night.color.textSecondary,
-    lineHeight: 18
-  },
-  valueText: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    lineHeight: 18
-  },
-  // Diff view styles
-  diffContainer: {
-    flex: 1
-  },
-  diffContent: {
-    flex: 1,
-    paddingHorizontal: 14
-  },
-  // Action badges for compare bar
-  actionBadgeSmall: {
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  actionTextSmall: {
-    fontSize: 8,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  }
-});
+"use strict";import{View as o,Text as d,StyleSheet as X,ScrollView as q}from"react-native";import{useState as L,useCallback as v,useMemo as B}from"react";import{macOSColors as g,night as l,EventStepperFooter as H,formatRelativeTime as D,parseValue as w,monoFont as h}from"@buoy-gg/shared-ui";import{DataViewer as K,SplitDiffViewer as Q,TreeDiffViewer as Y,diffThemes as Z}from"@buoy-gg/shared-ui/dataViewer";import{ReduxDetailViewToggle as ee}from"./ReduxDetailViewToggle";import{ReduxActionInfoView as te}from"./ReduxActionInfoView";import{DiffModeTabs as re,CompareBar as oe}from"@buoy-gg/shared-ui";import{REDUX_TEST_ID as p}from"../utils/testIDs";import{isEvictedState as M,STATE_RETENTION_LIMIT as ne}from"../utils/reduxActionStore";import{jsx as t,jsxs as c}from"react/jsx-runtime";function F(e){if(e.includes("/pending"))return g.semantic.warning;if(e.includes("/fulfilled"))return g.semantic.success;if(e.includes("/rejected"))return g.semantic.error;if(e.startsWith("@@"))return g.text.muted;return g.semantic.info}function $(e){if(e.includes("/pending"))return"PENDING";if(e.includes("/fulfilled"))return"FULFILLED";if(e.includes("/rejected"))return"REJECTED";if(e.startsWith("@@"))return"INTERNAL";const i=e.split("/");return i[i.length-1]?.toUpperCase()||"ACTION"}function ie(e){if(e===null)return"null";if(e===void 0)return"undefined";if(Array.isArray(e))return"array";return typeof e}function k(e){const i=new Date(e);return i.toLocaleTimeString("en-US",{hour12:false,hour:"2-digit",minute:"2-digit",second:"2-digit"})}const ae=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}];export function ReduxActionDetailContent({action:e,actions:i,selectedIndex:n,onIndexChange:s,disableInternalFooter:f=false,initialView:C="action"}){const[b,z]=L(C);const[E,W]=L("tree");const u=i.length;const A=M(e.nextState);const m=F(e.type);const T=$(e.type);const N=ie(w(e.nextState));const y=u-n;const V=y-1;const S=n<u-1?n+1:null;const a=S!==null?i[S]:null;const P=B(()=>({index:S??0,label:V>0?`#${V}`:"Initial",timestamp:a?k(a.timestamp):"",relativeTime:a?D(new Date(a.timestamp)):"state",badge:a?t(o,{style:[r.actionBadgeSmall,{backgroundColor:`${F(a.type)}20`}],children:t(d,{style:[r.actionTextSmall,{color:F(a.type)}],children:$(a.type)})}):void 0}),[S,a,V]);const _=B(()=>({index:n,label:`#${y}`,timestamp:k(e.timestamp),relativeTime:D(new Date(e.timestamp)),badge:t(o,{style:[r.actionBadgeSmall,{backgroundColor:`${m}20`}],children:t(d,{style:[r.actionTextSmall,{color:m}],children:T})})}),[n,e.timestamp,m,T,y]);const j=v(()=>{if(A){return c(o,{style:r.contentCard,testID:`${p}-state-evicted`,children:[t(o,{style:r.valueHeader,children:t(d,{style:r.valueLabel,children:"STATE AFTER ACTION"})}),t(d,{style:r.evictedText,children:`Not retained. Raw state is kept for the ${ne} most recent actions, so this action's before/after trees have been released.`})]})}const x=w(e.nextState);return c(o,{style:r.contentCard,testID:`${p}-state-card`,children:[c(o,{style:r.valueHeader,children:[t(d,{style:r.valueLabel,children:"STATE AFTER ACTION"}),c(o,{style:r.valueHeaderBadges,children:[t(o,{style:[r.actionBadge,{backgroundColor:`${m}20`}],children:t(d,{style:[r.actionText,{color:m}],children:T})}),t(o,{style:r.typeBadge,children:t(d,{style:r.typeText,testID:`${p}-state-type`,children:N.toUpperCase()})})]})]}),t(o,{style:r.dataViewerContainer,children:t(K,{title:"",data:x,showTypeFilter:true,rawMode:true,initialExpanded:true})})]})},[e.nextState,m,T,N,A]);const O=v(()=>{const x=w(e.prevState);const I=w(e.nextState);if(E==="split"){return t(q,{style:{flex:1},showsVerticalScrollIndicator:true,children:t(Q,{oldValue:x,newValue:I,theme:Z.devToolsDefault,options:{hideLineNumbers:false,disableWordDiff:false,showDiffOnly:false,compareMethod:"words",contextLines:3},showThemeName:false})})}return t(Y,{oldValue:x,newValue:I})},[e.prevState,e.nextState,E]);const U=v(()=>{s(Math.min(u-1,n+1))},[n,u,s]);const G=v(()=>{s(Math.max(0,n-1))},[n,s]);const J=A||M(e.prevState)||e.prevState===void 0;const R=!f&&u>1;return c(o,{style:r.container,children:[t(ee,{activeView:b,onViewChange:z,diffDisabled:J}),c(o,{style:[r.contentArea,R&&r.contentAreaFooterPad],children:[b==="action"&&t(te,{action:e}),b==="state"&&t(o,{style:r.stateContainer,children:j()}),b==="diff"&&c(o,{style:r.diffContainer,testID:`${p}-diff`,children:[t(re,{tabs:ae,activeTab:E,onTabChange:W,testIDPrefix:`${p}-diff-tab`}),t(oe,{leftEvent:P,rightEvent:_}),t(o,{style:r.diffContent,testID:`${p}-diff-content`,children:O()})]})]}),R&&t(H,{currentIndex:y-1,totalItems:u,onPrevious:U,onNext:G,itemLabel:"Action",subtitle:D(new Date(e.timestamp)),absolute:true})]})}export function ReduxActionDetailFooter({action:e,actions:i,selectedIndex:n,onIndexChange:s}){const f=i.length;if(f<=1)return null;const C=f-n;return t(H,{currentIndex:C-1,totalItems:f,onPrevious:()=>s(Math.min(f-1,n+1)),onNext:()=>s(Math.max(0,n-1)),itemLabel:"Action",subtitle:D(new Date(e.timestamp))})}const r=X.create({container:{flex:1,backgroundColor:"transparent"},contentArea:{flex:1},contentAreaFooterPad:{paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:l.color.surface,borderRadius:14,padding:14,borderWidth:1,borderColor:l.color.border},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:l.color.textSecondary,fontFamily:h,letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},actionBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},actionText:{fontSize:9,fontWeight:"700",fontFamily:h,letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:l.color.surfaceElevated},typeText:{fontSize:9,fontWeight:"600",color:l.color.textTertiary,fontFamily:h},valueBox:{backgroundColor:l.color.bg,borderRadius:6,borderWidth:1,borderColor:l.color.border,padding:8},evictedText:{fontSize:12,color:l.color.textSecondary,lineHeight:18},valueText:{fontSize:12,color:l.color.text,fontFamily:h,lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},actionBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},actionTextSmall:{fontSize:8,fontWeight:"700",fontFamily:h},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});