react-native-inapp-inspector 1.1.11 → 1.1.13

package/dist/esm/components/ReduxTreeView.js

@@ -1,759 +1,1177 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, LayoutAnimation, Platform, Pressable, StyleSheet, Text, UIManager, View, } from 'react-native';
+import React, { useEffect, useState, useMemo } from 'react';
+import { LayoutAnimation, Platform, Pressable, StyleSheet, Text, TextInput, UIManager, View, ScrollView, ToastAndroid, Alert, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-import { ChevronIcon, CopyIcon, CheckIcon } from './NetworkIcons';
-import Svg, { Path } from 'react-native-svg';
-import AnimatedEntrance from './AnimatedEntrance';
-import { copyToClipboard } from '../helpers';
-// #15 — copy-to-clipboard control for a single dispatched action
-const ActionCopyButton = ({ value }) => {
-    const [copied, setCopied] = useState(false);
-    return (<Pressable hitSlop={10} onPress={() => {
-            copyToClipboard(value(), 'Action');
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1200);
-        }} style={{
-            width: 26,
-            height: 26,
-            borderRadius: 7,
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: copied
-                ? `${AppColors.greenColor}1A`
-                : AppColors.grayBackground,
-            borderWidth: 1,
-            borderColor: AppColors.dividerColor,
-        }}>
-      {copied ? (<CheckIcon color={AppColors.greenColor} size={13}/>) : (<CopyIcon color={AppColors.grayTextWeak} size={13}/>)}
-    </Pressable>);
+import { ChevronIcon, FolderIcon, TrashIcon, HeaderPauseIcon, CopyIcon, SearchIcon, ClearIcon, ClockIcon, ExpandCollapseIcon, SignalIcon, LayersIcon, TerminalIcon, RequestIcon, DiffIcon, SortIcon, CalendarIcon, } from './NetworkIcons';
+import JsonViewer from './JsonViewer';
+import DiffViewer from './DiffViewer';
+import TouchableScale from './TouchableScale';
+import { copyToClipboard, getSize } from '../helpers';
+import { getCustomStorage } from '../helpers/settingsStore';
+// Enable LayoutAnimation for Android
+if (Platform.OS === 'android') {
+    UIManager.setLayoutAnimationEnabledExperimental?.(true);
+}
+const animateLayout = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 };
-// #15 — derive the redux module / folder name from an action type.
-// Supports RTK slice convention ("booking/setDate" -> "Booking") and
-// falls back to the first affected slice.
-const getActionModule = (type, affectedSlices) => {
-    if (type && type.includes('/')) {
-        const prefix = type.split('/')[0];
-        if (prefix)
-            return prefix.charAt(0).toUpperCase() + prefix.slice(1);
+// Chevron pointing left (for back buttons)
+const BackChevronIcon = ({ color = AppColors.purple, size = 12 }) => (<View style={{ transform: [{ rotate: '180deg' }], marginRight: 4 }}>
+    <ChevronIcon color={color} size={size}/>
+  </View>);
+// Chevron pointing right (for list items)
+const ForwardChevronIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<View style={{ transform: [{ rotate: '0deg' }], marginLeft: 'auto' }}>
+    <ChevronIcon color={color} size={size}/>
+  </View>);
+// Helper: check if a value recursively contains a string term
+const valueContainsTerm = (val, term) => {
+    if (!term)
+        return true;
+    const t = term.toLowerCase();
+    if (val === null || val === undefined)
+        return false;
+    if (typeof val !== 'object') {
+        return String(val).toLowerCase().includes(t);
     }
-    if (affectedSlices && affectedSlices.length > 0) {
-        const s = affectedSlices[0];
-        return s.charAt(0).toUpperCase() + s.slice(1);
+    if (Array.isArray(val)) {
+        return val.some(item => valueContainsTerm(item, term));
     }
-    return null;
-};
-// Custom icons
-const DatabaseIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M2 12c0 2.8 4.5 5 10 5s10-2.2 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M2 7c0 2.8 4.5 5 10 5s10-2.2 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-const BoltIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-const FolderIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-// Exported icons so the Redux tab's section headers and sub-tab buttons can
-// render real vector icons instead of emoji (which fail to render on some
-// Android/font setups).
-export const ReduxStoreIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M3 9l1.5-5h15L21 9M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h18M7 9v3a2 2 0 0 0 4 0V9m2 0v3a2 2 0 0 0 4 0V9" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-export const ReduxBoltIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-// Action Timeline — a history/clock icon reads as "sequence over time".
-export const ReduxTimelineIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M12 7v5l3 2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-// Store Tree — a node hierarchy icon reads as "nested tree structure".
-export const ReduxTreeIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M9 4h6v4H9zM3 16h6v4H3zm12 0h6v4h-6z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-    <Path d="M12 8v4M6 16v-2h12v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-const animateTreeLayout = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    return Object.keys(val).some(key => key.toLowerCase().includes(t) || valueContainsTerm(val[key], term));
 };
-const AnimatedChevron = ({ color, expanded, size, style, }) => {
-    const progress = useRef(new Animated.Value(expanded ? 1 : 0)).current;
-    useEffect(() => {
-        Animated.timing(progress, {
-            toValue: expanded ? 1 : 0,
-            duration: 180,
-            useNativeDriver: true,
-        }).start();
-    }, [expanded, progress]);
-    const rotate = progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '90deg'],
-    });
-    return (<Animated.View style={[style, { transform: [{ rotate }] }]}>
-      <ChevronIcon color={color} size={size}/>
-    </Animated.View>);
-};
-const ReduxValueNode = ({ name, value, level, search }) => {
-    const [expanded, setExpanded] = useState(level < 1);
-    const isObject = typeof value === 'object' && value !== null;
-    const isArray = Array.isArray(value);
-    const nameStr = String(name);
-    // Filter check if search query matches key or value
-    const matchesSearch = (k, val) => {
-        if (!search)
-            return true;
-        const s = search.toLowerCase();
-        if (k.toLowerCase().includes(s))
-            return true;
-        if (typeof val !== 'object' && String(val).toLowerCase().includes(s))
-            return true;
-        if (typeof val === 'object' && val !== null) {
-            return Object.keys(val).some(key => matchesSearch(key, val[key]));
-        }
-        return false;
+export const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search = '', onSearchChange, autoRefresh = true, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey = null, onSelectSliceKey, selectedActionId = null, onSelectActionId, }) => {
+    const [activeTab, setActiveTab] = useState('state');
+    const [actionSubTab, setActionSubTab] = useState('payload');
+    // local fallbacks if props are not provided
+    const [localSliceKey, setLocalSliceKey] = useState(null);
+    const [localActionId, setLocalActionId] = useState(null);
+    const activeSliceKey = onSelectSliceKey ? selectedSliceKey : localSliceKey;
+    const activeActionId = onSelectActionId ? selectedActionId : localActionId;
+    const setActiveSliceKey = (key) => {
+        if (onSelectSliceKey)
+            onSelectSliceKey(key);
+        else
+            setLocalSliceKey(key);
     };
-    if (!matchesSearch(nameStr, value)) {
-        return null;
-    }
-    if (!isObject) {
-        const valStr = value === null
-            ? 'null'
-            : value === undefined
-                ? 'undefined'
-                : String(value);
-        // Pick different colors for primitives
-        let valColor = '#0D9488'; // String
-        if (value === null || value === undefined) {
-            valColor = AppColors.grayTextWeak;
-        }
-        else if (typeof value === 'number') {
-            valColor = '#D97706';
+    const setActiveActionId = (id) => {
+        if (onSelectActionId)
+            onSelectActionId(id);
+        else
+            setLocalActionId(id);
+    };
+    // Expand / collapse all states for detail views
+    const [sliceForceOpen, setSliceForceOpen] = useState(undefined);
+    const [actionForceOpen, setActionForceOpen] = useState(undefined);
+    const [searchModeType, setSearchModeType] = useState(true);
+    const [searchModeData, setSearchModeData] = useState(true);
+    // Sorting directions
+    const [stateSortAsc, setStateSortAsc] = useState(true);
+    const [actionSortAsc, setActionSortAsc] = useState(false);
+    // Persistence-related states for State Slice details
+    const [sliceDetailTab, setSliceDetailTab] = useState('live');
+    const [isPersisted, setIsPersisted] = useState(false);
+    const [persistedData, setPersistedData] = useState(null);
+    useEffect(() => {
+        if (activeSliceKey === null) {
+            setIsPersisted(false);
+            setPersistedData(null);
+            setSliceDetailTab('live');
+            return;
         }
-        else if (typeof value === 'boolean') {
-            valColor = '#4F46E5';
+        async function checkPersistence() {
+            try {
+                const storage = getCustomStorage();
+                if (!storage) {
+                    setIsPersisted(false);
+                    setPersistedData(null);
+                    return;
+                }
+                // Check direct key: persist:sliceKey
+                let raw = await storage.getItem(`persist:${activeSliceKey}`);
+                if (raw) {
+                    try {
+                        setPersistedData(JSON.parse(raw));
+                    }
+                    catch {
+                        setPersistedData(raw);
+                    }
+                    setIsPersisted(true);
+                    return;
+                }
+                // Check root key: persist:root
+                let rootRaw = await storage.getItem('persist:root');
+                if (rootRaw) {
+                    const parsedRoot = JSON.parse(rootRaw);
+                    if (parsedRoot && parsedRoot[activeSliceKey] !== undefined) {
+                        const nested = parsedRoot[activeSliceKey];
+                        try {
+                            setPersistedData(typeof nested === 'string' ? JSON.parse(nested) : nested);
+                        }
+                        catch {
+                            setPersistedData(nested);
+                        }
+                        setIsPersisted(true);
+                        return;
+                    }
+                }
+            }
+            catch (e) {
+                console.log('Error checking Redux persistence:', e);
+            }
+            setIsPersisted(false);
+            setPersistedData(null);
         }
-        return (<View style={[reduxValueStyles.treeRow, { paddingLeft: 12 }]}>
-        <View style={reduxValueStyles.treeLeafConnector}/>
-        <Text style={reduxValueStyles.keyText} selectable={true}>
-          {nameStr}
-          <Text style={reduxValueStyles.colonText}>: </Text>
-          <Text style={[reduxValueStyles.valText, { color: valColor }]} selectable={true}>
-            {valStr}
-          </Text>
-        </Text>
-      </View>);
-    }
-    const keys = Object.keys(value);
-    const summaryText = isArray
-        ? `Array [${keys.length}]`
-        : `Object {${keys.length}}`;
-    return (<View style={reduxValueStyles.treeNodeBlock}>
-      <Pressable onPress={() => {
-            animateTreeLayout();
-            setExpanded(!expanded);
-        }} style={reduxValueStyles.treeRow}>
-        <View style={reduxValueStyles.treeLeafConnector}/>
-        <AnimatedChevron color={AppColors.grayTextWeak} expanded={expanded} size={10} style={reduxValueStyles.chevronWrap}/>
-        <Text style={reduxValueStyles.keyText} selectable={true}>
-          {nameStr}
-          <Text style={reduxValueStyles.colonText}>: </Text>
-          <Text style={reduxValueStyles.summaryText}>{summaryText}</Text>
-        </Text>
-      </Pressable>
-      {expanded && (<View style={reduxValueStyles.treeChildrenContainer}>
-          {keys.map(key => (<ReduxValueNode key={key} name={key} value={value[key]} level={level + 1} search={search}/>))}
-        </View>)}
-    </View>);
-};
-export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
-    const [storeExpanded, setStoreExpanded] = useState(true);
-    const [reducerExpanded, setReducerExpanded] = useState({});
+        checkPersistence();
+    }, [activeSliceKey]);
+    const handleClearPersistence = () => {
+        Alert.alert('Clear Persisted State', `Are you sure you want to delete the persisted storage item for the slice "${activeSliceKey}"? This will clear the value from device storage, but the current active in-memory Redux state will remain unchanged until the next app reload.`, [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Delete',
+                style: 'destructive',
+                onPress: async () => {
+                    try {
+                        const storage = getCustomStorage();
+                        if (!storage)
+                            return;
+                        // Delete direct key
+                        if (typeof storage.removeItem === 'function') {
+                            await storage.removeItem(`persist:${activeSliceKey}`);
+                        }
+                        else {
+                            await storage.setItem(`persist:${activeSliceKey}`, '');
+                        }
+                        // Delete from root key
+                        let rootRaw = await storage.getItem('persist:root');
+                        if (rootRaw) {
+                            const parsed = JSON.parse(rootRaw);
+                            if (parsed && parsed[activeSliceKey] !== undefined) {
+                                delete parsed[activeSliceKey];
+                                await storage.setItem('persist:root', JSON.stringify(parsed));
+                            }
+                        }
+                        setIsPersisted(false);
+                        setPersistedData(null);
+                        setSliceDetailTab('live');
+                        if (Platform.OS === 'android') {
+                            ToastAndroid.show('Persisted state cleared', ToastAndroid.SHORT);
+                        }
+                        else {
+                            Alert.alert('Cleared', 'Persisted state has been cleared from device storage.');
+                        }
+                    }
+                    catch (err) {
+                        Alert.alert('Error', 'Failed to clear persisted state.');
+                    }
+                }
+            }
+        ]);
+    };
+    const isSearching = search.trim().length > 0;
     useEffect(() => {
-        if (Platform.OS === 'android') {
-            UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        onDetailOpenChange?.(activeSliceKey !== null || activeActionId !== null);
+        return () => {
+            onDetailOpenChange?.(false);
+        };
+    }, [activeSliceKey, activeActionId, onDetailOpenChange]);
+    // Reset details view when tab changes
+    const switchTab = (tab) => {
+        animateLayout();
+        setActiveTab(tab);
+        setActiveSliceKey(null);
+        setActiveActionId(null);
+        setSliceForceOpen(undefined);
+        setActionForceOpen(undefined);
+    };
+    const handleGoBackSlice = () => {
+        animateLayout();
+        setActiveSliceKey(null);
+        setSliceForceOpen(undefined);
+    };
+    const handleGoBackAction = () => {
+        animateLayout();
+        setActiveActionId(null);
+        setActionForceOpen(undefined);
+    };
+    // Filtered state keys based on search query
+    const filteredStateKeys = useMemo(() => {
+        if (!state || typeof state !== 'object')
+            return [];
+        const keys = Object.keys(state);
+        let result = keys;
+        if (isSearching) {
+            result = keys.filter(key => {
+                const typeMatch = searchModeType && key.toLowerCase().includes(search.toLowerCase());
+                const dataMatch = searchModeData && valueContainsTerm(state[key], search);
+                return typeMatch || dataMatch;
+            });
         }
-    }, []);
+        return [...result].sort((a, b) => {
+            const comparison = a.localeCompare(b);
+            return stateSortAsc ? comparison : -comparison;
+        });
+    }, [state, search, isSearching, searchModeType, searchModeData, stateSortAsc]);
+    // Filtered action history based on search query
+    const filteredActionHistory = useMemo(() => {
+        if (!actionHistory)
+            return [];
+        let result = actionHistory;
+        if (isSearching) {
+            result = actionHistory.filter(action => {
+                const typeMatch = searchModeType && action.type.toLowerCase().includes(search.toLowerCase());
+                const payloadMatch = searchModeData && action.payload && valueContainsTerm(action.payload, search);
+                return typeMatch || payloadMatch;
+            });
+        }
+        return [...result].sort((a, b) => {
+            const comparison = a.id - b.id;
+            return actionSortAsc ? comparison : -comparison;
+        });
+    }, [actionHistory, search, isSearching, searchModeType, searchModeData, actionSortAsc]);
+    // Find currently selected action object
+    const selectedAction = useMemo(() => {
+        if (activeActionId === null)
+            return null;
+        return actionHistory.find(a => a.id === activeActionId) || null;
+    }, [activeActionId, actionHistory]);
     if (!state || typeof state !== 'object') {
-        return (<Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 12,
-                color: AppColors.grayTextWeak,
-                padding: 12,
-            }}>
-        No state object to display.
-      </Text>);
+        return (<View style={styles.errorContainer}>
+        <Text style={styles.errorText}>No connected Redux store state found.</Text>
+      </View>);
     }
-    const reducers = Object.keys(state);
-    const toggleReducer = (key) => {
-        animateTreeLayout();
-        setReducerExpanded(prev => ({
-            ...prev,
-            [key]: !prev[key],
-        }));
-    };
-    return (<View style={styles.container}>
-      {/* Root Node: Store */}
-      <Pressable onPress={() => {
-            animateTreeLayout();
-            setStoreExpanded(!storeExpanded);
-        }} style={styles.storeHeader}>
-        <AnimatedChevron color="#FFFFFF" expanded={storeExpanded} size={12} style={styles.chevronWrap}/>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-          <ReduxStoreIcon color="#FFFFFF" size={14}/>
-          <Text style={styles.storeTitle}>Redux Store</Text>
+    // ── Render Detail View: State Slice ──
+    if (activeTab === 'state' && activeSliceKey !== null) {
+        const sliceData = state[activeSliceKey];
+        const fieldsCount = typeof sliceData === 'object' && sliceData !== null
+            ? Object.keys(sliceData).length
+            : 1;
+        return (<View style={{ flex: 1 }}>
+        {/* Non-scrollable header */}
+        <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+          <View style={styles.apiLikeInfoBar}>
+            <View style={styles.apiBadgeRow}>
+              <View style={[styles.apiMethodBadge, { backgroundColor: AppColors.purple }]}>
+                <Text style={styles.apiMethodBadgeText}>REDUX</Text>
+              </View>
+              <View style={[styles.apiMethodBadge, { backgroundColor: AppColors.purpleShade50, borderWidth: 1, borderColor: AppColors.purple + '30' }]}>
+                <Text style={[styles.apiMethodBadgeText, { color: AppColors.purple }]}>SLICE</Text>
+              </View>
+              {isPersisted && (<View style={[styles.apiMethodBadge, { backgroundColor: '#10B981' }]}>
+                  <Text style={styles.apiMethodBadgeText}>PERSISTED</Text>
+                </View>)}
+              <View style={styles.apiChip}>
+                <Text style={styles.apiChipText}>{getSize(sliceData)}</Text>
+              </View>
+              <View style={styles.apiChip}>
+                <Text style={styles.apiChipText}>{fieldsCount} {fieldsCount === 1 ? 'field' : 'fields'}</Text>
+              </View>
+            </View>
+
+            <Text style={styles.apiTitleText} selectable={true}>{activeSliceKey}</Text>
+
+            <View style={styles.apiMetaRow}>
+              <ClockIcon color={AppColors.grayTextWeak} size={10}/>
+              <Text style={styles.apiMetaText}>
+                Last updated: {lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].timestamp : 'Initial'}
+              </Text>
+            </View>
+          </View>
         </View>
-        <View style={styles.badge}>
-          <Text style={styles.badgeText}>{reducers.length} Reducers</Text>
+
+        {/* Segment Control */}
+        <View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors.grayBackground,
+                borderRadius: 10,
+                padding: 3,
+                marginHorizontal: 6,
+                marginBottom: 10,
+                marginTop: 6,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+            }}>
+          {(isPersisted ? ['live', 'persisted'] : ['live']).map(tab => {
+                const isActive = sliceDetailTab === tab;
+                const getLabel = () => {
+                    if (tab === 'live')
+                        return 'Live State';
+                    return `Persisted (${getSize(persistedData)})`;
+                };
+                const getIcon = () => {
+                    const iconColor = isActive ? '#FFFFFF' : AppColors.grayText;
+                    if (tab === 'live')
+                        return <LayersIcon color={iconColor} size={11}/>;
+                    return <CalendarIcon color={iconColor} size={11}/>;
+                };
+                return (<Pressable key={tab} onPress={() => {
+                        animateLayout();
+                        setSliceDetailTab(tab);
+                    }} style={{
+                        flex: 1,
+                        paddingVertical: 6,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: 8,
+                        backgroundColor: isActive ? AppColors.purple : 'transparent',
+                        gap: 4,
+                    }}>
+                {getIcon()}
+                <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: isActive ? '#FFFFFF' : AppColors.grayText,
+                    }}>
+                  {getLabel()}
+                </Text>
+              </Pressable>);
+            })}
         </View>
-      </Pressable>
 
-      {storeExpanded && (<View style={styles.storeChildren}>
-          {reducers.map((reducerKey, index) => {
-                const isLastReducer = index === reducers.length - 1;
-                const isExpanded = !!reducerExpanded[reducerKey];
-                const sliceData = state[reducerKey];
-                const lastAction = lastActionMap[reducerKey];
-                return (<View key={reducerKey} style={styles.reducerContainer}>
-                {/* Visual Branch Line for Reducer */}
-                <View style={[
-                        styles.reducerVerticalLine,
-                        isLastReducer && { bottom: '50%' },
-                    ]}/>
+        {/* Scrollable Tab Content */}
+        <View style={{ flex: 1, paddingHorizontal: 6 }}>
+          {/* Back button + controls */}
+          <View style={styles.contentDetailSubHeader}>
+            <TouchableScale onPress={handleGoBackSlice} style={styles.backBtn} hitSlop={12}>
+              <BackChevronIcon color={AppColors.purple} size={11}/>
+              <Text style={styles.backBtnText}>State Slices</Text>
+            </TouchableScale>
 
-                {/* Reducer Header */}
-                <Pressable onPress={() => toggleReducer(reducerKey)} style={styles.reducerHeader}>
-                  <View style={styles.reducerHorizontalLine}/>
-                  <AnimatedChevron color={AppColors.purple} expanded={isExpanded} size={10} style={styles.chevronWrap}/>
-                  <View style={styles.iconWrap}>
-                    <FolderIcon color={AppColors.purple} size={11}/>
-                  </View>
-                  <Text style={styles.reducerText}>{reducerKey}</Text>
-                </Pressable>
+            <View style={styles.detailHeaderActions}>
+              {isPersisted && sliceDetailTab === 'persisted' && (<TouchableScale onPress={handleClearPersistence} style={[styles.detailHeaderBtn, { marginRight: 8 }]} hitSlop={8}>
+                  <TrashIcon color={AppColors.errorColor} size={14}/>
+                </TouchableScale>)}
 
-                {isExpanded && (<View style={styles.reducerChildren}>
-                    {/* Vertical line connecting children */}
-                    <View style={styles.childrenVerticalLine}/>
+              <TouchableScale onPress={() => {
+                animateLayout();
+                setSliceForceOpen(prev => (prev === true ? false : prev === false ? undefined : true));
+            }} style={styles.detailHeaderBtn} hitSlop={8}>
+                <ExpandCollapseIcon expanded={sliceForceOpen !== false} color={AppColors.purple} size={14}/>
+              </TouchableScale>
 
-                    {/* Node 1: Last Action */}
-                    <View style={styles.childItem}>
-                      <View style={styles.childHorizontalLine}/>
-                      <View style={[styles.iconWrap, { backgroundColor: '#FDF2F8' }]}>
-                        <BoltIcon color="#DB2777" size={11}/>
-                      </View>
-                      <View style={{ flex: 1 }}>
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            flexWrap: 'wrap',
-                            gap: 6,
-                        }}>
-                          <Text style={styles.childLabel}>Last Action:</Text>
-                          {lastAction ? (<View style={styles.actionTypeBadge}>
-                              <Text style={styles.actionTypeText}>
-                                {lastAction.type}
-                              </Text>
-                            </View>) : (<Text style={styles.noActionText}>
-                              None dispatched
-                            </Text>)}
-                        </View>
-                        {lastAction && (<Text style={styles.timestampText}>
-                            Dispatched: {lastAction.timestamp}
-                          </Text>)}
-                        {lastAction && lastAction.payload !== null && (<View style={{ marginTop: 6 }}>
-                            <ReduxValueNode name="payload" value={lastAction.payload} level={0} search={search}/>
-                          </View>)}
-                      </View>
-                    </View>
+              <TouchableScale onPress={() => {
+                const dataToCopy = sliceDetailTab === 'live' ? sliceData : persistedData;
+                copyToClipboard(dataToCopy, `Redux Slice '${activeSliceKey}' (${sliceDetailTab})`);
+            }} style={styles.detailHeaderBtn} hitSlop={8}>
+                <CopyIcon color={AppColors.purple} size={14}/>
+              </TouchableScale>
+            </View>
+          </View>
 
-                    {/* Node 2: State Data */}
-                    <View style={styles.childItem}>
-                      <View style={[styles.childHorizontalLine, { bottom: '50%' }]}/>
-                      <View style={[styles.iconWrap, { backgroundColor: '#ECFDF5' }]}>
-                        <DatabaseIcon color="#059669" size={11}/>
-                      </View>
-                      <View style={{ flex: 1 }}>
-                        <Text style={styles.childLabel}>State Slice Data</Text>
-                        <View style={{ marginTop: 6 }}>
-                          <ReduxValueNode name="state" value={sliceData} level={0} search={search}/>
-                        </View>
-                      </View>
-                    </View>
-                  </View>)}
-              </View>);
-            })}
-        </View>)}
-    </View>);
-};
-export const ReduxActionTimeline = ({ history, onClear, search, }) => {
-    const [expandedActionId, setExpandedActionId] = useState(null);
-    const toggleExpand = (id) => {
-        animateTreeLayout();
-        setExpandedActionId(prev => (prev === id ? null : id));
-    };
-    const filteredHistory = history.filter(action => {
-        if (!search)
-            return true;
-        const s = search.toLowerCase();
-        if (action.type.toLowerCase().includes(s))
-            return true;
-        if (action.affectedSlices.some(slice => slice.toLowerCase().includes(s)))
-            return true;
-        if (action.payload && typeof action.payload === 'object') {
-            return JSON.stringify(action.payload).toLowerCase().includes(s);
-        }
-        return false;
-    });
-    return (<View style={timelineStyles.container}>
-      <View style={timelineStyles.headerRow}>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-          <ReduxBoltIcon color={AppColors.purple} size={15}/>
-          <Text style={timelineStyles.headerTitle}>
-            Dispatched Actions ({filteredHistory.length})
-          </Text>
+          <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
+            <View style={{ padding: 12 }}>
+              <JsonViewer data={sliceDetailTab === 'live' ? sliceData : (persistedData ?? 'No persisted data')} search={search} forceOpen={sliceForceOpen !== undefined ? sliceForceOpen : (isSearching ? true : undefined)} fullHeight={true}/>
+            </View>
+          </ScrollView>
         </View>
-        {history.length > 0 && (<Pressable onPress={onClear} style={timelineStyles.clearBtn}>
-            <Text style={timelineStyles.clearBtnText}>Clear Log</Text>
-          </Pressable>)}
-      </View>
+      </View>);
+    }
+    // ── Render Detail View: Timeline Action ──
+    if (activeTab === 'timeline' && selectedAction !== null) {
+        const affectedSlices = selectedAction.affectedSlices || [];
+        return (<View style={{ flex: 1 }}>
+        {/* Non-scrollable header */}
+        <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+          <View style={styles.apiLikeInfoBar}>
+            <View style={styles.apiBadgeRow}>
+              <View style={[styles.apiMethodBadge, { backgroundColor: AppColors.purple }]}>
+                <Text style={styles.apiMethodBadgeText}>REDUX</Text>
+              </View>
+              <View style={[styles.apiMethodBadge, { backgroundColor: '#F59E0B' }]}>
+                <Text style={styles.apiMethodBadgeText}>ACTION</Text>
+              </View>
+              <View style={styles.apiChip}>
+                <Text style={styles.apiChipText}>#{selectedAction.id}</Text>
+              </View>
+              <View style={styles.apiChip}>
+                <Text style={styles.apiChipText}>{getSize(selectedAction.payload)}</Text>
+              </View>
+            </View>
 
-      {filteredHistory.length === 0 ? (<View style={timelineStyles.emptyContainer}>
-          <Text style={timelineStyles.emptyText}>
-            {history.length === 0
-                ? 'No actions dispatched yet.\nDispatch actions in your application to see the timeline.'
-                : 'No matching actions found.'}
-          </Text>
-        </View>) : (<View style={timelineStyles.listContainer}>
-          {filteredHistory.map((item, index) => {
-                const isLast = index === filteredHistory.length - 1;
-                const isExpanded = expandedActionId === item.id;
-                return (<AnimatedEntrance key={item.id} index={index} distance={8} style={timelineStyles.timelineItem}>
-                {/* Visual Line */}
-                <View style={[
-                        timelineStyles.verticalLine,
-                        isLast && { bottom: '50%' },
-                    ]}/>
-                <View style={timelineStyles.circleIndicator}>
-                  <View style={timelineStyles.circleInner}/>
-                </View>
+            <Text style={styles.apiTitleText} selectable={true}>{selectedAction.type}</Text>
 
-                {/* Card */}
-                <Pressable onPress={() => toggleExpand(item.id)} style={[
-                        timelineStyles.card,
-                        isExpanded && {
-                            borderColor: AppColors.purple,
-                            backgroundColor: AppColors.purpleShade50,
-                        },
-                    ]}>
-                  <View style={timelineStyles.cardHeader}>
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
+            <View style={styles.apiMetaRow}>
+              <ClockIcon color={AppColors.grayTextWeak} size={10}/>
+              <Text style={styles.apiMetaText}>Dispatched: {selectedAction.timestamp}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Affected Slices Tags list */}
+        {affectedSlices.length > 0 && (<View style={styles.detailAffectedTags}>
+            <Text style={styles.affectedTagsLabel}>AFFECTED SLICES:</Text>
+            <View style={styles.detailTagsList}>
+              {affectedSlices.map(slice => (<View key={slice} style={styles.sliceTag}>
+                  <Text style={styles.sliceTagText}>{slice}</Text>
+                </View>))}
+            </View>
+          </View>)}
+
+        {/* Segment Control */}
+        <View style={{
+                flexDirection: 'row',
+                backgroundColor: AppColors.grayBackground,
+                borderRadius: 10,
+                padding: 3,
+                marginHorizontal: 6,
+                marginBottom: 10,
+                marginTop: 6,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+            }}>
+          {['payload', 'diff', 'state'].map(tab => {
+                const isActive = actionSubTab === tab;
+                const getLabel = () => {
+                    if (tab === 'payload')
+                        return 'Payload';
+                    if (tab === 'diff')
+                        return 'Diff Changes';
+                    return 'Snapshot';
+                };
+                const getIcon = () => {
+                    const iconColor = isActive ? '#FFFFFF' : AppColors.grayText;
+                    if (tab === 'payload')
+                        return <RequestIcon color={iconColor} size={11}/>;
+                    if (tab === 'diff')
+                        return <DiffIcon color={iconColor} size={11}/>;
+                    return <LayersIcon color={iconColor} size={11}/>;
+                };
+                return (<Pressable key={tab} onPress={() => {
+                        animateLayout();
+                        setActionSubTab(tab);
+                    }} style={{
                         flex: 1,
-                    }}>
-                      {(() => {
-                        const moduleName = getActionModule(item.type, item.affectedSlices);
-                        return moduleName ? (<View style={{
-                                paddingHorizontal: 7,
-                                paddingVertical: 2,
-                                borderRadius: 6,
-                                backgroundColor: `${AppColors.purple}14`,
-                                borderWidth: 1,
-                                borderColor: `${AppColors.purple}33`,
-                            }}>
-                            <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 9.5,
-                                color: AppColors.purple,
-                                letterSpacing: 0.2,
-                            }}>
-                              {moduleName}
-                            </Text>
-                          </View>) : null;
-                    })()}
-                      <View style={timelineStyles.typeBadge}>
-                        <Text style={timelineStyles.typeText}>{item.type}</Text>
-                      </View>
-                    </View>
-                    <View style={{
+                        paddingVertical: 6,
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: 8,
+                        justifyContent: 'center',
+                        borderRadius: 8,
+                        backgroundColor: isActive ? AppColors.purple : 'transparent',
+                        gap: 4,
                     }}>
-                      <Text style={timelineStyles.timestamp}>
-                        {item.timestamp}
-                      </Text>
-                      <ActionCopyButton value={() => ({
-                        type: item.type,
-                        payload: item.payload,
-                    })}/>
-                    </View>
-                  </View>
+                {getIcon()}
+                <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: isActive ? '#FFFFFF' : AppColors.grayText,
+                    }}>
+                  {getLabel()}
+                </Text>
+              </Pressable>);
+            })}
+        </View>
 
-                  {item.affectedSlices.length > 0 && (<View style={timelineStyles.slicesRow}>
-                      <Text style={timelineStyles.slicesLabel}>Affected:</Text>
-                      {item.affectedSlices.map(slice => (<View key={slice} style={timelineStyles.slicePill}>
-                          <Text style={timelineStyles.sliceText}>{slice}</Text>
-                        </View>))}
-                    </View>)}
+        {/* Scrollable Tab Content */}
+        <View style={{ flex: 1, paddingHorizontal: 6 }}>
+          {/* Back button + controls */}
+          <View style={styles.contentDetailSubHeader}>
+            <TouchableScale onPress={handleGoBackAction} style={styles.backBtn} hitSlop={12}>
+              <BackChevronIcon color={AppColors.purple} size={11}/>
+              <Text style={styles.backBtnText}>Actions</Text>
+            </TouchableScale>
 
-                  {isExpanded && (<View style={timelineStyles.payloadContainer}>
-                      <Text style={timelineStyles.payloadTitle}>Payload</Text>
-                      {item.payload !== null &&
-                            typeof item.payload === 'object' ? (<ReduxValueNode name="action.payload" value={item.payload} level={0} search={search}/>) : (<Text style={timelineStyles.primitivePayload}>
-                          {item.payload === null
-                                ? 'null'
-                                : String(item.payload)}
-                        </Text>)}
-                    </View>)}
-                </Pressable>
-              </AnimatedEntrance>);
-            })}
+            {(actionSubTab === 'payload' || actionSubTab === 'state') && (<View style={styles.detailHeaderActions}>
+                <TouchableScale onPress={() => {
+                    animateLayout();
+                    setActionForceOpen(prev => (prev === true ? false : prev === false ? undefined : true));
+                }} style={styles.detailHeaderBtn} hitSlop={8}>
+                  <ExpandCollapseIcon expanded={actionForceOpen !== false} color={AppColors.purple} size={14}/>
+                </TouchableScale>
+
+                <TouchableScale onPress={() => {
+                    const dataToCopy = actionSubTab === 'payload' ? selectedAction.payload : selectedAction.nextState;
+                    copyToClipboard(dataToCopy, actionSubTab === 'payload' ? 'Action payload' : 'State snapshot');
+                }} style={styles.detailHeaderBtn} hitSlop={8}>
+                  <CopyIcon color={AppColors.purple} size={14}/>
+                </TouchableScale>
+              </View>)}
+          </View>
+
+          <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 24 }} showsVerticalScrollIndicator={true}>
+            {actionSubTab === 'payload' && (<View style={{ padding: 12 }}>
+                <JsonViewer data={selectedAction.payload ?? 'No payload data'} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>
+              </View>)}
+
+            {actionSubTab === 'diff' && (<View style={{ padding: 12 }}>
+                <DiffViewer oldData={selectedAction.prevState} newData={selectedAction.nextState}/>
+              </View>)}
+
+            {actionSubTab === 'state' && (<View style={{ padding: 12 }}>
+                <JsonViewer data={selectedAction.nextState} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>
+              </View>)}
+          </ScrollView>
+        </View>
+      </View>);
+    }
+    // ── Render List Views (Default) ──
+    return (<View style={styles.container}>
+      {/* ── Control Bar ── */}
+      <View style={styles.toolbar}>
+        <View style={styles.statusSection}>
+          <View style={[styles.statusBadge, autoRefresh ? styles.statusBadgeActive : styles.statusBadgePaused]}>
+            <View style={[styles.statusDot, autoRefresh ? styles.statusDotActive : styles.statusDotPaused]}/>
+            <Text style={[styles.statusBadgeText, autoRefresh ? styles.statusTextActive : styles.statusTextPaused]}>
+              {autoRefresh ? 'LIVE' : 'PAUSED'}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.toolbarActions}>
+          {/* Sorting Toggle Button */}
+          <TouchableScale onPress={() => {
+            animateLayout();
+            if (activeTab === 'state') {
+                setStateSortAsc(prev => !prev);
+            }
+            else {
+                setActionSortAsc(prev => !prev);
+            }
+        }} style={styles.iconBtn} hitSlop={8}>
+            <SortIcon ascending={activeTab === 'state' ? stateSortAsc : actionSortAsc} color={AppColors.purple} size={15}/>
+          </TouchableScale>
+
+          {onToggleAutoRefresh && (<TouchableScale onPress={onToggleAutoRefresh} style={styles.iconBtn} hitSlop={8}>
+              <HeaderPauseIcon isPaused={!autoRefresh} color={AppColors.purple} size={15}/>
+            </TouchableScale>)}
+          {onClearHistory && (<TouchableScale onPress={onClearHistory} style={[styles.iconBtn, { borderColor: AppColors.errorColor + '40', backgroundColor: AppColors.errorColor + '08' }]} hitSlop={8}>
+              <TrashIcon color={AppColors.errorColor} size={15}/>
+            </TouchableScale>)}
+        </View>
+      </View>
+
+      {/* ── Search Bar ── */}
+      {onSearchChange && (<View style={styles.searchContainer}>
+          <View style={styles.searchBar}>
+            <SearchIcon color={AppColors.grayTextWeak} size={14}/>
+            <TextInput placeholder="Search keys, values, or action payloads..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={onSearchChange} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {search.length > 0 && (<TouchableScale onPress={() => onSearchChange('')} hitSlop={10}>
+                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+              </TouchableScale>)}
+          </View>
+          <View style={styles.filterChipRow}>
+            <Text style={styles.filterChipLabel}>FILTER BY:</Text>
+            <Pressable onPress={() => {
+                animateLayout();
+                if (searchModeType && !searchModeData)
+                    return; // Prevent disabling both
+                setSearchModeType(!searchModeType);
+            }} style={[styles.filterChip, searchModeType && styles.filterChipActive]}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <SignalIcon color={searchModeType ? AppColors.purple : AppColors.grayText} size={11}/>
+                <Text style={[styles.filterChipText, searchModeType && styles.filterChipTextActive]}>
+                  Type / Key
+                </Text>
+              </View>
+            </Pressable>
+            <Pressable onPress={() => {
+                animateLayout();
+                if (!searchModeType && searchModeData)
+                    return; // Prevent disabling both
+                setSearchModeData(!searchModeData);
+            }} style={[styles.filterChip, searchModeData && styles.filterChipActive]}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <LayersIcon color={searchModeData ? AppColors.purple : AppColors.grayText} size={11}/>
+                <Text style={[styles.filterChipText, searchModeData && styles.filterChipTextActive]}>
+                  Payload Data
+                </Text>
+              </View>
+            </Pressable>
+          </View>
         </View>)}
+
+      {/* ── Tab Selector ── */}
+      <View style={styles.tabContainer}>
+        <Pressable style={[styles.tabButton, activeTab === 'state' && styles.tabButtonActive]} onPress={() => switchTab('state')}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <LayersIcon color={activeTab === 'state' ? AppColors.purple : AppColors.grayText} size={12}/>
+            <Text style={[styles.tabButtonText, activeTab === 'state' && styles.tabButtonTextActive]}>
+              State Slices ({filteredStateKeys.length})
+            </Text>
+          </View>
+        </Pressable>
+        <Pressable style={[styles.tabButton, activeTab === 'timeline' && styles.tabButtonActive]} onPress={() => switchTab('timeline')}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <TerminalIcon color={activeTab === 'timeline' ? AppColors.purple : AppColors.grayText} size={12}/>
+            <Text style={[styles.tabButtonText, activeTab === 'timeline' && styles.tabButtonTextActive]}>
+              Actions ({filteredActionHistory.length})
+            </Text>
+          </View>
+        </Pressable>
+      </View>
+
+      {/* ── State List View ── */}
+      {activeTab === 'state' && (<ScrollView style={styles.scrollList} contentContainerStyle={styles.scrollContent}>
+          {filteredStateKeys.length === 0 ? (<View style={styles.emptyState}>
+              <Text style={styles.emptyStateText}>
+                {isSearching ? 'No store slices match your search.' : 'Redux store contains no state.'}
+              </Text>
+            </View>) : (filteredStateKeys.map(reducerKey => {
+                const sliceData = state[reducerKey];
+                const fieldsCount = typeof sliceData === 'object' && sliceData !== null
+                    ? Object.keys(sliceData).length
+                    : 1;
+                const lastAction = lastActionMap[reducerKey];
+                const lastUpdatedTime = lastAction ? lastAction.timestamp : 'Initial';
+                return (<TouchableScale key={reducerKey} onPress={() => {
+                        animateLayout();
+                        setActiveSliceKey(reducerKey);
+                    }} style={styles.listRow}>
+                  <View style={styles.sliceIcon}>
+                    <FolderIcon color={AppColors.purple} size={11}/>
+                  </View>
+                  <View style={styles.rowMain}>
+                    <Text style={styles.rowTitle}>{reducerKey}</Text>
+                    <Text style={styles.rowSub}>
+                      {getSize(sliceData)} • {fieldsCount} {fieldsCount === 1 ? 'field' : 'fields'} • Updated: {lastUpdatedTime}
+                    </Text>
+                  </View>
+                  <ForwardChevronIcon color={AppColors.grayTextWeak} size={10}/>
+                </TouchableScale>);
+            }))}
+        </ScrollView>)}
+
+      {/* ── Timeline List View ── */}
+      {activeTab === 'timeline' && (<ScrollView style={styles.scrollList} contentContainerStyle={styles.scrollContent}>
+          {filteredActionHistory.length === 0 ? (<View style={styles.emptyState}>
+              <Text style={styles.emptyStateText}>
+                {isSearching
+                    ? 'No actions match your search.'
+                    : 'No actions dispatched yet. Trigger an action in the app to populate history.'}
+              </Text>
+            </View>) : (filteredActionHistory.map((action, index) => {
+                const id = action.id;
+                const affectedSlices = action.affectedSlices || [];
+                return (<TouchableScale key={id} onPress={() => {
+                        animateLayout();
+                        setActiveActionId(id);
+                    }} style={styles.listRow}>
+                  <View style={styles.seqBadge}>
+                    <Text style={styles.seqText}>#{action.id}</Text>
+                  </View>
+                  <View style={styles.rowMain}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      <TerminalIcon color={AppColors.purple} size={11}/>
+                      <Text style={styles.actionTitleText} numberOfLines={1}>{action.type}</Text>
+                    </View>
+                    <View style={styles.actionMetaRow}>
+                      <ClockIcon color={AppColors.grayTextWeak} size={9}/>
+                      <Text style={styles.actionTimeText}>{action.timestamp} • {getSize(action.payload)}</Text>
+                    </View>
+                    {affectedSlices.length > 0 && (<View style={styles.tagsContainer}>
+                        {affectedSlices.map(slice => (<View key={slice} style={styles.sliceTagMini}>
+                            <Text style={styles.sliceTagMiniText}>{slice}</Text>
+                          </View>))}
+                      </View>)}
+                  </View>
+                  <ForwardChevronIcon color={AppColors.grayTextWeak} size={10}/>
+                </TouchableScale>);
+            }))}
+        </ScrollView>)}
     </View>);
 };
-const reduxValueStyles = StyleSheet.create({
-    treeNodeBlock: {
-        marginTop: 4,
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors.grayBackground,
+    },
+    scrollList: {
+        flex: 1,
+    },
+    errorContainer: {
+        padding: 24,
+        alignItems: 'center',
     },
-    treeRow: {
+    errorText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.grayTextWeak,
+    },
+    toolbar: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 3,
-        gap: 4,
-        position: 'relative',
-    },
-    treeLeafConnector: {
-        position: 'absolute',
-        left: -12,
-        top: '50%',
-        width: 8,
-        height: 1,
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        backgroundColor: AppColors.primaryLight,
         borderBottomWidth: 1,
         borderBottomColor: AppColors.dividerColor,
-        opacity: 0.5,
     },
-    treeChildrenContainer: {
-        paddingLeft: 14,
-        borderLeftWidth: 1,
-        borderLeftColor: AppColors.dividerColor,
-        marginLeft: 6,
+    statusSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
     },
-    chevronWrap: {
-        width: 10,
-        height: 10,
+    statusBadge: {
+        flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 12,
+        borderWidth: 1,
     },
-    keyText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayTextStrong,
+    statusBadgeActive: {
+        backgroundColor: AppColors.greenStatus,
+        borderColor: AppColors.greenColor + '30',
     },
-    colonText: {
-        color: AppColors.grayTextWeak,
+    statusBadgePaused: {
+        backgroundColor: AppColors.grayBackground,
+        borderColor: AppColors.grayBorderSecondary,
     },
-    valText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        marginRight: 6,
     },
-    summaryText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
+    statusDotActive: {
+        backgroundColor: AppColors.greenBaggageText,
     },
-});
-const timelineStyles = StyleSheet.create({
-    container: {
-        flex: 1,
+    statusDotPaused: {
+        backgroundColor: AppColors.grayTextWeak,
+    },
+    statusBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        letterSpacing: 0.5,
+    },
+    statusTextActive: {
+        color: AppColors.greenBaggageText,
+    },
+    statusTextPaused: {
+        color: AppColors.grayText,
     },
-    headerRow: {
+    toolbarActions: {
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 12,
+        gap: 8,
     },
-    headerTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
+    iconBtn: {
+        width: 28,
+        height: 28,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: AppColors.purple + '40',
+        backgroundColor: AppColors.purpleShade50,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    clearBtn: {
-        backgroundColor: 'rgba(239, 68, 68, 0.08)',
-        borderColor: 'rgba(239, 68, 68, 0.2)',
+    searchContainer: {
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        paddingBottom: 10,
+    },
+    searchBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        marginTop: 10,
+        marginBottom: 8,
+        paddingHorizontal: 10,
         borderWidth: 1,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
+        borderColor: AppColors.dividerColor,
+        height: 36,
+    },
+    filterChipRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        gap: 8,
     },
-    clearBtnText: {
+    filterChipLabel: {
         fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+        marginRight: 2,
+    },
+    filterChip: {
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 12,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    filterChipActive: {
+        backgroundColor: AppColors.purpleShade50,
+        borderColor: AppColors.purple,
+    },
+    filterChipText: {
+        fontFamily: AppFonts.interMedium,
         fontSize: 10,
-        color: '#EF4444',
+        color: AppColors.grayText,
+    },
+    filterChipTextActive: {
+        color: AppColors.purple,
+        fontFamily: AppFonts.interBold,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.grayTextStrong,
+        marginLeft: 6,
+        padding: 0,
     },
-    emptyContainer: {
-        paddingVertical: 32,
+    tabContainer: {
+        flexDirection: 'row',
+        backgroundColor: AppColors.dividerColor,
+        borderRadius: 8,
+        padding: 3,
+        marginHorizontal: 12,
+        marginTop: 10,
+        marginBottom: 10,
+    },
+    tabButton: {
+        flex: 1,
+        paddingVertical: 7,
         alignItems: 'center',
         justifyContent: 'center',
+        borderRadius: 6,
+    },
+    tabButtonActive: {
+        backgroundColor: AppColors.primaryLight,
+        shadowColor: AppColors.shadowColorString,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    tabButtonText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors.grayText,
     },
-    emptyText: {
+    tabButtonTextActive: {
+        color: AppColors.purple,
+        fontFamily: AppFonts.interBold,
+    },
+    scrollContent: {
+        paddingBottom: 24,
+        paddingHorizontal: 12,
+    },
+    emptyState: {
+        padding: 24,
+        alignItems: 'center',
+    },
+    emptyStateText: {
         fontFamily: AppFonts.interRegular,
         fontSize: 12,
         color: AppColors.grayTextWeak,
         textAlign: 'center',
-        lineHeight: 18,
-    },
-    listContainer: {
-        paddingLeft: 12,
-    },
-    timelineItem: {
-        position: 'relative',
-        paddingLeft: 20,
-        marginBottom: 12,
-    },
-    verticalLine: {
-        position: 'absolute',
-        left: 4,
-        top: 0,
-        bottom: -12,
-        width: 1,
-        backgroundColor: AppColors.dividerColor,
     },
-    circleIndicator: {
-        position: 'absolute',
-        left: 0,
-        top: 10,
-        width: 9,
-        height: 9,
-        borderRadius: 4.5,
+    listRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.primaryLight,
+        paddingHorizontal: 12,
+        paddingVertical: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        marginBottom: 8,
+        shadowColor: AppColors.shadowColorString,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    rowMain: {
+        flex: 1,
+        marginLeft: 10,
+    },
+    rowTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors.primaryBlack,
+    },
+    rowSub: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+        marginTop: 2,
+    },
+    sliceIcon: {
+        width: 22,
+        height: 22,
+        borderRadius: 6,
         backgroundColor: AppColors.purpleShade50,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    seqBadge: {
+        backgroundColor: AppColors.grayBackground,
+        borderColor: AppColors.grayBorderSecondary,
         borderWidth: 1,
-        borderColor: AppColors.purple,
+        borderRadius: 4,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
         alignItems: 'center',
         justifyContent: 'center',
+        minWidth: 28,
     },
-    circleInner: {
-        width: 3,
-        height: 3,
-        borderRadius: 1.5,
-        backgroundColor: AppColors.purple,
+    seqText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.grayText,
     },
-    card: {
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        borderRadius: 8,
-        padding: 10,
+    actionTitleText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.purple,
     },
-    cardHeader: {
+    actionMetaRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 12,
+        gap: 4,
+        marginTop: 2,
     },
-    typeBadge: {
-        backgroundColor: 'rgba(104,75,155,0.08)',
-        borderColor: 'rgba(104,75,155,0.18)',
+    actionTimeText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 9.5,
+        color: AppColors.grayTextWeak,
+    },
+    tagsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 4,
+    },
+    sliceTagMini: {
+        backgroundColor: AppColors.purpleShade50,
+        borderColor: AppColors.purple + '20',
         borderWidth: 1,
-        borderRadius: 6,
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-        flexShrink: 1,
+        borderRadius: 3,
+        paddingHorizontal: 4,
+        paddingVertical: 0.5,
+    },
+    sliceTagMiniText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 8.5,
+        color: AppColors.purple,
+    },
+    // ── Detail Views Styles ──
+    detailHeaderBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    backBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingRight: 8,
     },
-    typeText: {
+    backBtnText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11,
+        fontSize: 12.5,
         color: AppColors.purple,
     },
-    timestamp: {
+    detailHeaderInfo: {
+        flex: 1,
+        marginLeft: 10,
+        marginRight: 10,
+    },
+    detailTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors.primaryBlack,
+    },
+    detailSub: {
         fontFamily: AppFonts.interRegular,
         fontSize: 10,
         color: AppColors.grayTextWeak,
+        marginTop: 2,
     },
-    slicesRow: {
+    detailHeaderActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    detailHeaderBtn: {
+        padding: 6,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: AppColors.purple + '20',
+        backgroundColor: AppColors.purpleShade50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 28,
+        height: 28,
+    },
+    detailCopyBtn: {
+        padding: 6,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: AppColors.purple + '20',
+        backgroundColor: AppColors.purpleShade50,
+    },
+    detailTimeRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        flexWrap: 'wrap',
         gap: 4,
-        marginTop: 6,
+        marginTop: 1,
     },
-    slicesLabel: {
-        fontFamily: AppFonts.interMedium,
+    detailTimeText: {
+        fontFamily: AppFonts.interRegular,
         fontSize: 10,
         color: AppColors.grayTextWeak,
-        marginRight: 2,
     },
-    slicePill: {
+    detailAffectedTags: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
         backgroundColor: AppColors.grayBackground,
-        borderColor: AppColors.dividerColor,
-        borderWidth: 1,
-        borderRadius: 4,
-        paddingHorizontal: 4,
-        paddingVertical: 1,
-    },
-    sliceText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9,
-        color: AppColors.grayText,
-    },
-    payloadContainer: {
-        marginTop: 10,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-        paddingTop: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
     },
-    payloadTitle: {
+    affectedTagsLabel: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10,
+        fontSize: 9,
         color: AppColors.grayTextWeak,
-        textTransform: 'uppercase',
+        letterSpacing: 0.5,
         marginBottom: 4,
     },
-    primitivePayload: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
+    detailTagsList: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
     },
-});
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
+    sliceTag: {
+        backgroundColor: AppColors.purpleShade50,
+        borderColor: AppColors.purple + '20',
+        borderWidth: 1,
+        borderRadius: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+    },
+    sliceTagText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9.5,
+        color: AppColors.purple,
     },
-    storeHeader: {
+    subTabRow: {
         flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.purple,
-        borderRadius: 8,
-        paddingVertical: 10,
-        paddingHorizontal: 12,
+        padding: 8,
         gap: 8,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
     },
-    chevronWrap: {
-        width: 12,
-        height: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
+    subTabPill: {
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        borderRadius: 12,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
     },
-    storeTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: '#FFFFFF',
+    subTabPillActive: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
     },
-    badge: {
-        backgroundColor: 'rgba(255,255,255,0.2)',
-        paddingHorizontal: 8,
-        paddingVertical: 2,
-        borderRadius: 12,
-        marginLeft: 'auto',
+    subTabPillText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors.grayText,
     },
-    badgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
+    subTabPillTextActive: {
         color: '#FFFFFF',
+        fontFamily: AppFonts.interBold,
     },
-    storeChildren: {
-        paddingLeft: 12,
-        marginTop: 4,
+    detailScrollContent: {
+        paddingBottom: 24,
     },
-    reducerContainer: {
-        position: 'relative',
-        paddingLeft: 16,
-        paddingVertical: 4,
+    jsonViewerContainer: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
     },
-    reducerVerticalLine: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 1,
-        backgroundColor: AppColors.dividerColor,
+    detailBox: {
+        padding: 10,
     },
-    reducerHorizontalLine: {
-        position: 'absolute',
-        left: -16,
-        top: '50%',
-        width: 16,
-        height: 1,
-        backgroundColor: AppColors.dividerColor,
+    detailBoxHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+        paddingHorizontal: 4,
     },
-    reducerHeader: {
+    detailBoxTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+        textTransform: 'uppercase',
+    },
+    apiLikeInfoBar: {
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    apiBadgeRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 6,
         gap: 6,
+        marginBottom: 8,
     },
-    iconWrap: {
-        width: 18,
-        height: 18,
+    apiMethodBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 2,
         borderRadius: 4,
-        backgroundColor: AppColors.purpleShade50,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    reducerText: {
+    apiMethodBadgeText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    reducerChildren: {
-        paddingLeft: 20,
-        position: 'relative',
-        marginTop: 4,
-        gap: 10,
-    },
-    childrenVerticalLine: {
-        position: 'absolute',
-        left: 8,
-        top: 0,
-        bottom: 16,
-        width: 1,
-        backgroundColor: AppColors.dividerColor,
+        fontSize: 9.5,
+        color: '#FFFFFF',
+        letterSpacing: 0.5,
     },
-    childItem: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        gap: 8,
-        position: 'relative',
-        paddingLeft: 12,
-    },
-    childHorizontalLine: {
-        position: 'absolute',
-        left: -12,
-        top: 10,
-        width: 12,
-        height: 1,
-        backgroundColor: AppColors.dividerColor,
+    apiChip: {
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderRadius: 4,
+        backgroundColor: 'rgba(104,75,155,0.06)',
+        borderWidth: 1,
+        borderColor: 'rgba(104,75,155,0.15)',
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    childLabel: {
+    apiChipText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.grayText,
-        marginTop: 2,
-    },
-    actionTypeBadge: {
-        backgroundColor: '#FCE7F3',
-        borderColor: '#FBCFE8',
-        borderWidth: 1,
-        borderRadius: 6,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
+        fontSize: 9.5,
+        color: AppColors.purple,
     },
-    actionTypeText: {
+    apiTitleText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: '#BE185D',
+        fontSize: 16,
+        color: AppColors.primaryBlack,
+        marginBottom: 8,
+    },
+    apiMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
     },
-    noActionText: {
+    apiMetaText: {
         fontFamily: AppFonts.interRegular,
         fontSize: 11,
         color: AppColors.grayTextWeak,
     },
-    timestampText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        marginTop: 2,
+    contentDetailSubHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        backgroundColor: AppColors.primaryLight,
     },
 });