@buoy-gg/redux 2.1.9 → 2.1.11

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

@@ -1 +1,838 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ReduxActionInfoView=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_reduxActionStore=require("../utils/reduxActionStore"),_buoyReduxMiddleware=require("../utils/buoyReduxMiddleware"),_ReduxActionButton=require("./ReduxActionButton"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var o=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=t?r:o){if(i.has(e))return i.get(e);i.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?i(s,t,a):s[t]=e[t]);return s})(e,t)}function getCategoryInfo(e){switch(e){case"pending":return{label:"PENDING",color:_sharedUi.buoyColors.warning,bgColor:_sharedUi.buoyColors.warning+"26"};case"fulfilled":return{label:"FULFILLED",color:_sharedUi.buoyColors.success,bgColor:_sharedUi.buoyColors.success+"26"};case"rejected":return{label:"REJECTED",color:_sharedUi.buoyColors.error,bgColor:_sharedUi.buoyColors.error+"26"};case"internal":return{label:"INTERNAL",color:_sharedUi.buoyColors.textMuted,bgColor:_sharedUi.buoyColors.textMuted+"26"};case"query":return{label:"QUERY",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"};case"mutation":return{label:"MUTATION",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"};default:return{label:"ACTION",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"}}}function formatDuration(e){return void 0===e?"N/A":e<1?"<1ms":`${e.toFixed(1)}ms`}function SectionHeader({icon:e,title:t,badge:o}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeader,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeaderLeft,children:[(0,_jsxRuntime.jsx)(e,{size:14,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionTitle,children:t})]}),o]})}function InfoRow({label:e,value:t,valueColor:o,mono:r=!1}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.infoValue,r&&styles.infoValueMono,o&&{color:o}],numberOfLines:1,ellipsizeMode:"middle",children:t})]})}function formatTime(e){const t=new Date(e);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}:${t.getSeconds().toString().padStart(2,"0")}.${t.getMilliseconds().toString().padStart(3,"0")}`}const ReduxActionInfoView=exports.ReduxActionInfoView=(0,_react.memo)(function({action:e,onNavigateToAction:t}){const o=(0,_license.useIsPro)(),[r,i]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{r&&o&&i(!1)},[r,o]);const a=getCategoryInfo(e.category),s=void 0!==e.payload,n=e.meta&&Object.keys(e.meta).length>0,l=void 0!==e.error,d=(0,_react.useMemo)(()=>_reduxActionStore.reduxActionStore.getLinkedActions(e),[e]),c=d.length>1,u=c?_reduxActionStore.reduxActionStore.getBaseActionType(e.type):null,y=e.meta?.requestId?_reduxActionStore.reduxActionStore.getAsyncOperationDuration(e.meta.requestId):null,x=(0,_react.useCallback)(async()=>{o?await(0,_sharedUi.copyToClipboard)(e.action):i(!0)},[e,o]),_=(0,_react.useCallback)(async()=>{o?await(0,_sharedUi.copyToClipboard)(e.payload):i(!0)},[e.payload,o]),m=(0,_react.useCallback)(()=>{e.action&&"object"==typeof e.action&&"type"in e.action&&(0,_buoyReduxMiddleware.replayAction)(e.action)},[e]),g=(0,_react.useCallback)(()=>{void 0!==e.nextState&&(0,_buoyReduxMiddleware.jumpToState)(e.nextState)},[e]);return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:!1,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Info,title:"ACTION INFO"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(InfoRow,{label:"Type",value:e.type,mono:!0}),e.sliceName&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Slice",value:e.sliceName,mono:!0}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Action",value:e.actionName,mono:!0}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadge,{backgroundColor:a.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryText,{color:a.color}],children:a.label})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.durationBadge,e.isSlowAction&&styles.durationBadgeSlow],children:[(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:10,color:e.isSlowAction?_sharedUi.buoyColors.error:_sharedUi.buoyColors.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.durationText,e.isSlowAction&&styles.durationTextSlow],children:formatDuration(e.duration)}),e.isSlowAction&&(0,_jsxRuntime.jsx)(_sharedUi.AlertTriangle,{size:10,color:_sharedUi.buoyColors.error})]}),e.hasStateChange?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.changesBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:10,color:_sharedUi.buoyColors.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.changesText,children:e.diffSummary||"changed"})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noChangesBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noChangesText,children:"no change"})})]})]})]}),c&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Hash,title:"ASYNC FLOW",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.asyncBadge,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.asyncBadgeText,children:[d.length," ACTIONS"]})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.baseActionType,children:u}),null!==y&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.totalDurationRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.totalDurationLabel,children:"Total Duration"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.totalDurationValue,children:[y,"ms"]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.timeline,children:d.map((o,r)=>{const i=getCategoryInfo(o.category),a=o.id===e.id;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.timelineItem,a&&styles.timelineItemCurrent],onPress:()=>t?.(o),disabled:a||!t,activeOpacity:.7,children:[r<d.length-1&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.timelineConnector}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.timelineDot,{backgroundColor:i.color}]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.timelineContent,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.timelineHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.timelineStatusBadge,{backgroundColor:i.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.timelineStatusText,{color:i.color}],children:i.label})}),a&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.currentBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.currentBadgeText,children:"CURRENT"})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.timelineTime,children:formatTime(o.timestamp)})]})]},o.id)})})]})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Box,title:"PAYLOAD",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,children:Array.isArray(e.payload)?"ARRAY":"object"==typeof e.payload?"OBJECT":typeof e.payload?.toString().toUpperCase()})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.payload),showTypeFilter:!1})})]}),n&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Hash,title:"ASYNC METADATA",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadge,{backgroundColor:a.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryText,{color:a.color}],children:"RTK THUNK"})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[e.meta?.requestId&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Request ID",value:e.meta.requestId,mono:!0}),e.meta?.requestStatus&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Status",value:e.meta.requestStatus.toUpperCase(),valueColor:a.color}),void 0!==e.meta?.arg&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.argSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.argLabel,children:"Original Argument"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.argValueContainer,children:"object"==typeof e.meta.arg?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.meta.arg),showTypeFilter:!1}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.argValue,children:JSON.stringify(e.meta.arg)})})]}),e.meta?.rejectedWithValue&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Rejected With Value",value:"true",valueColor:_sharedUi.buoyColors.error}),e.meta?.aborted&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Aborted",value:"true",valueColor:_sharedUi.buoyColors.warning}),e.meta?.condition&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Condition",value:"true",valueColor:_sharedUi.buoyColors.textMuted})]})]}),l&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.card,styles.errorCard],children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.AlertCircle,title:"ERROR",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.errorBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorBadgeText,children:"REJECTED"})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:"object"==typeof e.error?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.error),showTypeFilter:!1}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorText,children:String(e.error)})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.FileText,title:"FULL ACTION OBJECT"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.action),showTypeFilter:!1})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionFooter,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionsGrid,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"replay",text:"REPLAY",onPress:m}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:"Dispatch again"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"jump",text:"JUMP",onPress:g}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:"Restore this state"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"copy",text:"COPY ACTION",onPress:x}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:o?"Copy to clipboard":"Pro feature"})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"copy",text:"COPY PAYLOAD",onPress:_}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:o?"Copy payload only":"Pro feature"})]})]})}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:r,onClose:()=>i(!1),featureName:"Copy"})]})}),styles=_reactNative.StyleSheet.create({container:{flex:1},contentContainer:{padding:8,paddingBottom:100,gap:16},card:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"4D",overflow:"hidden",shadowColor:_sharedUi.buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},errorCard:{borderColor:_sharedUi.buoyColors.error+"4D",shadowColor:_sharedUi.buoyColors.error},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.primary+"33",backgroundColor:_sharedUi.buoyColors.primary+"15"},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:12,fontWeight:"600",letterSpacing:.5,color:_sharedUi.buoyColors.primary,fontFamily:"monospace"},cardContent:{padding:14,gap:10},infoRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},infoLabel:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontWeight:"500"},infoValue:{fontSize:11,color:_sharedUi.buoyColors.text,fontWeight:"500",flex:1,textAlign:"right",marginLeft:12},infoValueMono:{fontFamily:"monospace"},badgeRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:6},categoryBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4},categoryText:{fontSize:9,fontWeight:"700",letterSpacing:.3},durationBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.input},durationBadgeSlow:{backgroundColor:_sharedUi.buoyColors.error+"26"},durationText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,fontFamily:"monospace"},durationTextSlow:{color:_sharedUi.buoyColors.error},changesBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.success+"26"},changesText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.success},noChangesBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.input},noChangesText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.textMuted},typeBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:3,backgroundColor:_sharedUi.buoyColors.input},typeText:{fontSize:8,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},dataViewerContainer:{backgroundColor:_sharedUi.buoyColors.base,minHeight:60},argSection:{marginTop:4},argLabel:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontWeight:"500",marginBottom:6},argValueContainer:{backgroundColor:_sharedUi.buoyColors.base,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden"},argValue:{fontSize:11,color:_sharedUi.buoyColors.text,fontFamily:"monospace",padding:10},errorBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.error+"26"},errorBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.error,letterSpacing:.3},errorText:{fontSize:12,color:_sharedUi.buoyColors.error,fontFamily:"monospace",padding:14},asyncBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.primary+"26"},asyncBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.primary,letterSpacing:.3},baseActionType:{fontSize:12,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace",marginBottom:8},totalDurationRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:12,paddingBottom:12,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.border},totalDurationLabel:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontWeight:"500"},totalDurationValue:{fontSize:14,fontWeight:"700",color:_sharedUi.buoyColors.success,fontFamily:"monospace"},timeline:{gap:0},timelineItem:{flexDirection:"row",alignItems:"flex-start",paddingVertical:8,paddingHorizontal:8,borderRadius:8,position:"relative"},timelineItemCurrent:{backgroundColor:_sharedUi.buoyColors.primary+"15"},timelineConnector:{position:"absolute",left:13,top:24,bottom:-8,width:2,backgroundColor:_sharedUi.buoyColors.border},timelineDot:{width:12,height:12,borderRadius:6,marginRight:10,marginTop:2},timelineContent:{flex:1},timelineHeader:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:2},timelineStatusBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},timelineStatusText:{fontSize:9,fontWeight:"700",letterSpacing:.3},currentBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:_sharedUi.buoyColors.primary},currentBadgeText:{fontSize:8,fontWeight:"700",color:"#fff",letterSpacing:.3},timelineTime:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},actionFooter:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"4D",paddingVertical:12,paddingHorizontal:12,shadowColor:_sharedUi.buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},actionsGrid:{flexDirection:"row",flexWrap:"wrap",gap:12,justifyContent:"flex-start"},actionButtonWrapper:{alignItems:"center",gap:4},actionDescription:{fontSize:9,color:_sharedUi.buoyColors.textMuted,textAlign:"center"}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReduxActionInfoView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _reduxActionStore = require("../utils/reduxActionStore");
+var _buoyReduxMiddleware = require("../utils/buoyReduxMiddleware");
+var _ReduxActionButton = require("./ReduxActionButton");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ReduxActionInfoView
+ *
+ * Displays comprehensive action information including:
+ * - Action metadata (type, slice, category, duration)
+ * - Payload data
+ * - Async thunk metadata (requestId, status, arg)
+ * - Error details for rejected actions
+ */
+
+/**
+ * Get category display info
+ */
+function getCategoryInfo(category) {
+  switch (category) {
+    case "pending":
+      return {
+        label: "PENDING",
+        color: _sharedUi.buoyColors.warning,
+        bgColor: _sharedUi.buoyColors.warning + "26"
+      };
+    case "fulfilled":
+      return {
+        label: "FULFILLED",
+        color: _sharedUi.buoyColors.success,
+        bgColor: _sharedUi.buoyColors.success + "26"
+      };
+    case "rejected":
+      return {
+        label: "REJECTED",
+        color: _sharedUi.buoyColors.error,
+        bgColor: _sharedUi.buoyColors.error + "26"
+      };
+    case "internal":
+      return {
+        label: "INTERNAL",
+        color: _sharedUi.buoyColors.textMuted,
+        bgColor: _sharedUi.buoyColors.textMuted + "26"
+      };
+    case "query":
+      return {
+        label: "QUERY",
+        color: _sharedUi.buoyColors.info,
+        bgColor: _sharedUi.buoyColors.info + "26"
+      };
+    case "mutation":
+      return {
+        label: "MUTATION",
+        color: _sharedUi.buoyColors.info,
+        bgColor: _sharedUi.buoyColors.info + "26"
+      };
+    default:
+      return {
+        label: "ACTION",
+        color: _sharedUi.buoyColors.info,
+        bgColor: _sharedUi.buoyColors.info + "26"
+      };
+  }
+}
+
+/**
+ * Format duration for display
+ */
+function formatDuration(duration) {
+  if (duration === undefined) return "N/A";
+  if (duration < 1) return "<1ms";
+  return `${duration.toFixed(1)}ms`;
+}
+
+/**
+ * Section header component - matches React Query DevTools styling
+ */
+function SectionHeader({
+  icon: Icon,
+  title,
+  badge
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.sectionHeader,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.sectionHeaderLeft,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        size: 14,
+        color: _sharedUi.buoyColors.primary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: title
+      })]
+    }), badge]
+  });
+}
+
+/**
+ * Info row component for key-value display
+ */
+function InfoRow({
+  label,
+  value,
+  valueColor,
+  mono = false
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.infoRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.infoLabel,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.infoValue, mono && styles.infoValueMono, valueColor && {
+        color: valueColor
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "middle",
+      children: value
+    })]
+  });
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const seconds = date.getSeconds().toString().padStart(2, "0");
+  const ms = date.getMilliseconds().toString().padStart(3, "0");
+  return `${hours}:${minutes}:${seconds}.${ms}`;
+}
+const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _react.memo)(function ReduxActionInfoView({
+  action,
+  onNavigateToAction
+}) {
+  const isPro = (0, _license.useIsPro)();
+  const [showProModal, setShowProModal] = (0, _react.useState)(false);
+
+  // Auto-close modal when user becomes Pro
+  (0, _react.useEffect)(() => {
+    if (showProModal && isPro) {
+      setShowProModal(false);
+    }
+  }, [showProModal, isPro]);
+  const categoryInfo = getCategoryInfo(action.category);
+  const hasPayload = action.payload !== undefined;
+  const hasMeta = action.meta && Object.keys(action.meta).length > 0;
+  const hasError = action.error !== undefined;
+
+  // Get related async actions
+  const relatedActions = (0, _react.useMemo)(() => {
+    return _reduxActionStore.reduxActionStore.getLinkedActions(action);
+  }, [action]);
+  const hasRelatedActions = relatedActions.length > 1;
+  const baseActionType = hasRelatedActions ? _reduxActionStore.reduxActionStore.getBaseActionType(action.type) : null;
+  const totalDuration = action.meta?.requestId ? _reduxActionStore.reduxActionStore.getAsyncOperationDuration(action.meta.requestId) : null;
+
+  // Action handlers - copy requires Pro
+  const handleCopyAction = (0, _react.useCallback)(async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    await (0, _sharedUi.copyToClipboard)(action.action);
+  }, [action, isPro]);
+  const handleCopyPayload = (0, _react.useCallback)(async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    await (0, _sharedUi.copyToClipboard)(action.payload);
+  }, [action.payload, isPro]);
+  const handleReplay = (0, _react.useCallback)(() => {
+    // Replay the original action
+    if (action.action && typeof action.action === "object" && "type" in action.action) {
+      (0, _buoyReduxMiddleware.replayAction)(action.action);
+    }
+  }, [action]);
+  const handleJump = (0, _react.useCallback)(() => {
+    // Jump to the state after this action was applied
+    if (action.nextState !== undefined) {
+      (0, _buoyReduxMiddleware.jumpToState)(action.nextState);
+    }
+  }, [action]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.contentContainer,
+    showsVerticalScrollIndicator: false,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.card,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
+        icon: _sharedUi.Info,
+        title: "ACTION INFO"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Type",
+          value: action.type,
+          mono: true
+        }), action.sliceName && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Slice",
+          value: action.sliceName,
+          mono: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Action",
+          value: action.actionName,
+          mono: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.badgeRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.categoryBadge, {
+              backgroundColor: categoryInfo.bgColor
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.categoryText, {
+                color: categoryInfo.color
+              }],
+              children: categoryInfo.label
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.durationBadge, action.isSlowAction && styles.durationBadgeSlow],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
+              size: 10,
+              color: action.isSlowAction ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.durationText, action.isSlowAction && styles.durationTextSlow],
+              children: formatDuration(action.duration)
+            }), action.isSlowAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+              size: 10,
+              color: _sharedUi.buoyColors.error
+            })]
+          }), action.hasStateChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.changesBadge,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+              size: 10,
+              color: _sharedUi.buoyColors.success
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.changesText,
+              children: action.diffSummary || "changed"
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.noChangesBadge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.noChangesText,
+              children: "no change"
+            })
+          })]
+        })]
+      })]
+    }), hasRelatedActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.card,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
+        icon: _sharedUi.Hash,
+        title: "ASYNC FLOW",
+        badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.asyncBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.asyncBadgeText,
+            children: [relatedActions.length, " ACTIONS"]
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.baseActionType,
+          children: baseActionType
+        }), totalDuration !== null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.totalDurationRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.totalDurationLabel,
+            children: "Total Duration"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.totalDurationValue,
+            children: [totalDuration, "ms"]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.timeline,
+          children: relatedActions.map((relatedAction, index) => {
+            const relatedCategoryInfo = getCategoryInfo(relatedAction.category);
+            const isCurrent = relatedAction.id === action.id;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              style: [styles.timelineItem, isCurrent && styles.timelineItemCurrent],
+              onPress: () => onNavigateToAction?.(relatedAction),
+              disabled: isCurrent || !onNavigateToAction,
+              activeOpacity: 0.7,
+              children: [index < relatedActions.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.timelineConnector
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.timelineDot, {
+                  backgroundColor: relatedCategoryInfo.color
+                }]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.timelineContent,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.timelineHeader,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: [styles.timelineStatusBadge, {
+                      backgroundColor: relatedCategoryInfo.bgColor
+                    }],
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: [styles.timelineStatusText, {
+                        color: relatedCategoryInfo.color
+                      }],
+                      children: relatedCategoryInfo.label
+                    })
+                  }), isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: styles.currentBadge,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: styles.currentBadgeText,
+                      children: "CURRENT"
+                    })
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.timelineTime,
+                  children: formatTime(relatedAction.timestamp)
+                })]
+              })]
+            }, relatedAction.id);
+          })
+        })]
+      })]
+    }), hasPayload && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.card,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
+        icon: _sharedUi.Box,
+        title: "PAYLOAD",
+        badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.typeBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.typeText,
+            children: Array.isArray(action.payload) ? "ARRAY" : typeof action.payload === "object" ? "OBJECT" : typeof action.payload?.toString().toUpperCase()
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          title: "",
+          data: (0, _sharedUi.parseValue)(action.payload),
+          showTypeFilter: true,
+          rawMode: true,
+          initialExpanded: true
+        })
+      })]
+    }), hasMeta && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.card,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
+        icon: _sharedUi.Hash,
+        title: "ASYNC METADATA",
+        badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.categoryBadge, {
+            backgroundColor: categoryInfo.bgColor
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.categoryText, {
+              color: categoryInfo.color
+            }],
+            children: "RTK THUNK"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardContent,
+        children: [action.meta?.requestId && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Request ID",
+          value: action.meta.requestId,
+          mono: true
+        }), action.meta?.requestStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Status",
+          value: action.meta.requestStatus.toUpperCase(),
+          valueColor: categoryInfo.color
+        }), action.meta?.arg !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.argSection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.argLabel,
+            children: "Original Argument"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.argValueContainer,
+            children: typeof action.meta.arg === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+              title: "",
+              data: (0, _sharedUi.parseValue)(action.meta.arg),
+              showTypeFilter: true,
+              rawMode: true,
+              initialExpanded: true
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.argValue,
+              children: JSON.stringify(action.meta.arg)
+            })
+          })]
+        }), action.meta?.rejectedWithValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Rejected With Value",
+          value: "true",
+          valueColor: _sharedUi.buoyColors.error
+        }), action.meta?.aborted && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Aborted",
+          value: "true",
+          valueColor: _sharedUi.buoyColors.warning
+        }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+          label: "Condition",
+          value: "true",
+          valueColor: _sharedUi.buoyColors.textMuted
+        })]
+      })]
+    }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.card, styles.errorCard],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
+        icon: _sharedUi.AlertCircle,
+        title: "ERROR",
+        badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.errorBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.errorBadgeText,
+            children: "REJECTED"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dataViewerContainer,
+        children: typeof action.error === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          title: "",
+          data: (0, _sharedUi.parseValue)(action.error),
+          showTypeFilter: true,
+          rawMode: true,
+          initialExpanded: true
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.errorText,
+          children: String(action.error)
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.card,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
+        icon: _sharedUi.FileText,
+        title: "FULL ACTION OBJECT"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          title: "",
+          data: (0, _sharedUi.parseValue)(action.action),
+          showTypeFilter: true,
+          rawMode: true,
+          initialExpanded: true
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.actionFooter,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.actionsGrid,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.actionButtonWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
+            type: "replay",
+            text: "REPLAY",
+            onPress: handleReplay
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.actionDescription,
+            children: "Dispatch again"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.actionButtonWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
+            type: "jump",
+            text: "JUMP",
+            onPress: handleJump
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.actionDescription,
+            children: "Restore this state"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.actionButtonWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
+            type: "copy",
+            text: "COPY ACTION",
+            onPress: handleCopyAction
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.actionDescription,
+            children: isPro ? "Copy to clipboard" : "Pro feature"
+          })]
+        }), hasPayload && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.actionButtonWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
+            type: "copy",
+            text: "COPY PAYLOAD",
+            onPress: handleCopyPayload
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.actionDescription,
+            children: isPro ? "Copy payload only" : "Pro feature"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+      visible: showProModal,
+      onClose: () => setShowProModal(false),
+      featureName: "Copy"
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: 8,
+    paddingBottom: 100,
+    gap: 16
+  },
+  // Card styling - matches React Query DevTools
+  card: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "4D",
+    overflow: "hidden",
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  errorCard: {
+    borderColor: _sharedUi.buoyColors.error + "4D",
+    shadowColor: _sharedUi.buoyColors.error
+  },
+  // Section header - green tinted like React Query
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.primary + "33",
+    backgroundColor: _sharedUi.buoyColors.primary + "15"
+  },
+  sectionHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    color: _sharedUi.buoyColors.primary,
+    fontFamily: "monospace"
+  },
+  cardContent: {
+    padding: 14,
+    gap: 10
+  },
+  infoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  infoLabel: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontWeight: "500"
+  },
+  infoValue: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.text,
+    fontWeight: "500",
+    flex: 1,
+    textAlign: "right",
+    marginLeft: 12
+  },
+  infoValueMono: {
+    fontFamily: "monospace"
+  },
+  badgeRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 6
+  },
+  categoryBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  categoryText: {
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.3
+  },
+  durationBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.input
+  },
+  durationBadgeSlow: {
+    backgroundColor: _sharedUi.buoyColors.error + "26"
+  },
+  durationText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  durationTextSlow: {
+    color: _sharedUi.buoyColors.error
+  },
+  changesBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.success + "26"
+  },
+  changesText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.success
+  },
+  noChangesBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.input
+  },
+  noChangesText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted
+  },
+  typeBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3,
+    backgroundColor: _sharedUi.buoyColors.input
+  },
+  typeText: {
+    fontSize: 8,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  dataViewerContainer: {
+    backgroundColor: _sharedUi.buoyColors.base,
+    minHeight: 60
+  },
+  argSection: {
+    marginTop: 4
+  },
+  argLabel: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontWeight: "500",
+    marginBottom: 6
+  },
+  argValueContainer: {
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    overflow: "hidden"
+  },
+  argValue: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    padding: 10
+  },
+  errorBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.error + "26"
+  },
+  errorBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.error,
+    letterSpacing: 0.3
+  },
+  errorText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.error,
+    fontFamily: "monospace",
+    padding: 14
+  },
+  // Async Operation / Related Actions styles
+  asyncBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.primary + "26"
+  },
+  asyncBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.primary,
+    letterSpacing: 0.3
+  },
+  baseActionType: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    marginBottom: 8
+  },
+  totalDurationRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.border
+  },
+  totalDurationLabel: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontWeight: "500"
+  },
+  totalDurationValue: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.success,
+    fontFamily: "monospace"
+  },
+  timeline: {
+    gap: 0
+  },
+  timelineItem: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    position: "relative"
+  },
+  timelineItemCurrent: {
+    backgroundColor: _sharedUi.buoyColors.primary + "15"
+  },
+  timelineConnector: {
+    position: "absolute",
+    left: 13,
+    top: 24,
+    bottom: -8,
+    width: 2,
+    backgroundColor: _sharedUi.buoyColors.border
+  },
+  timelineDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    marginRight: 10,
+    marginTop: 2
+  },
+  timelineContent: {
+    flex: 1
+  },
+  timelineHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 2
+  },
+  timelineStatusBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  timelineStatusText: {
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.3
+  },
+  currentBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.primary
+  },
+  currentBadgeText: {
+    fontSize: 8,
+    fontWeight: "700",
+    color: "#fff",
+    letterSpacing: 0.3
+  },
+  timelineTime: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  // Action footer - matches React Query DevTools
+  actionFooter: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "4D",
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  actionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    justifyContent: "flex-start"
+  },
+  actionButtonWrapper: {
+    alignItems: "center",
+    gap: 4
+  },
+  actionDescription: {
+    fontSize: 9,
+    color: _sharedUi.buoyColors.textMuted,
+    textAlign: "center"
+  }
+});