react-native-inapp-inspector 1.1.12 → 1.1.13

package/dist/esm/components/ReduxTreeView.js

@@ -1,361 +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 } from './NetworkIcons';
-import Svg, { Path } from 'react-native-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>);
-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>);
-const animateTreeLayout = () => {
-    if (Platform.OS === 'ios') {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+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);
+};
+// 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 (Array.isArray(val)) {
+        return val.some(item => valueContainsTerm(item, term));
     }
+    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;
+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);
+    };
+    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(() => {
-        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, lastAction }) => {
-    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]));
+        if (activeSliceKey === null) {
+            setIsPersisted(false);
+            setPersistedData(null);
+            setSliceDetailTab('live');
+            return;
         }
-        return false;
-    };
-    if (!matchesSearch(nameStr, value)) {
-        return null;
-    }
-    if (!isObject) {
-        const valStr = value === null
-            ? 'null'
-            : value === undefined
-                ? 'undefined'
-                : String(value);
-        let valColor = '#0D9488'; // String
-        if (value === null || value === undefined) {
-            valColor = AppColors.grayTextWeak;
+        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);
         }
-        else if (typeof value === 'number') {
-            valColor = '#D97706';
+        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(() => {
+        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;
+            });
         }
-        else if (typeof value === 'boolean') {
-            valColor = '#4F46E5';
+        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 (<View style={[reduxValueStyles.treeRow, { paddingLeft: 12 }]}>
-        <View style={reduxValueStyles.treeLeafConnector}/>
-        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, flexWrap: 'wrap', gap: 6 }}>
-          <Text style={reduxValueStyles.keyText} selectable={true}>
-            {nameStr}
-            <Text style={reduxValueStyles.colonText}>: </Text>
-            <Text style={[reduxValueStyles.valText, { color: valColor }]} selectable={true}>
-              {valStr}
-            </Text>
-          </Text>
-          {lastAction && (<View style={styles.actionTypeBadge}>
-              <Text style={styles.actionTypeText} numberOfLines={1}>
-                {lastAction.type}
+        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 (<View style={styles.errorContainer}>
+        <Text style={styles.errorText}>No connected Redux store state found.</Text>
+      </View>);
+    }
+    // ── 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>
+
+        {/* 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>
+
+        {/* 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>
+
+            <View style={styles.detailHeaderActions}>
+              {isPersisted && sliceDetailTab === 'persisted' && (<TouchableScale onPress={handleClearPersistence} style={[styles.detailHeaderBtn, { marginRight: 8 }]} hitSlop={8}>
+                  <TrashIcon color={AppColors.errorColor} size={14}/>
+                </TouchableScale>)}
+
+              <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>
+
+              <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>
+
+          <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>
       </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}/>
-        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, flexWrap: 'wrap', gap: 6 }}>
-          <Text style={reduxValueStyles.keyText} selectable={true}>
-            {nameStr}
-            <Text style={reduxValueStyles.colonText}>: </Text>
-            <Text style={reduxValueStyles.summaryText}>{summaryText}</Text>
-          </Text>
-          {lastAction && (<View style={styles.actionTypeBadge}>
-              <Text style={styles.actionTypeText} numberOfLines={1}>
-                {lastAction.type}
-              </Text>
-            </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>
+
+            <Text style={styles.apiTitleText} selectable={true}>{selectedAction.type}</Text>
+
+            <View style={styles.apiMetaRow}>
+              <ClockIcon color={AppColors.grayTextWeak} size={10}/>
+              <Text style={styles.apiMetaText}>Dispatched: {selectedAction.timestamp}</Text>
+            </View>
+          </View>
         </View>
-      </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({});
-    useEffect(() => {
-        if (Platform.OS === 'android') {
-            UIManager.setLayoutAnimationEnabledExperimental?.(true);
-        }
-    }, []);
-    if (!state || typeof state !== 'object') {
-        return (<Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 12,
-                color: AppColors.grayTextWeak,
-                padding: 12,
+
+        {/* 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,
             }}>
-        No state object to display.
-      </Text>);
+          {['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,
+                        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>
+
+        {/* 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>
+
+            {(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>);
     }
-    const reducers = Object.keys(state);
-    const toggleReducer = (key) => {
-        animateTreeLayout();
-        setReducerExpanded(prev => ({
-            ...prev,
-            [key]: !prev[key],
-        }));
-    };
+    // ── Render List Views (Default) ──
     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>
+      {/* ── 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.badge}>
-          <Text style={styles.badgeText}>{reducers.length} Slices</Text>
+
+        <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>
-      </Pressable>
+      </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>)}
 
-      {storeExpanded && (<View style={styles.storeChildren}>
-          {reducers.map((reducerKey, index) => {
-                const isLastReducer = index === reducers.length - 1;
-                const isExpanded = !!reducerExpanded[reducerKey];
+      {/* ── 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];
-                return (<View key={reducerKey} style={styles.reducerContainer}>
-                {/* Visual Branch Line for Reducer */}
-                <View style={[
-                        styles.reducerVerticalLine,
-                        isLastReducer && !isExpanded && { bottom: '50%' },
-                    ]}/>
-
-                {/* 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}>
+                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={{ flexDirection: 'row', alignItems: 'center', flex: 1, flexWrap: 'wrap', gap: 6 }}>
-                    <Text style={styles.reducerText}>{reducerKey}</Text>
-                    {lastAction && (<View style={styles.actionTypeBadge}>
-                        <Text style={styles.actionTypeText} numberOfLines={1}>
-                          {lastAction.type}
-                        </Text>
-                      </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>
-                </Pressable>
+                  <ForwardChevronIcon color={AppColors.grayTextWeak} size={10}/>
+                </TouchableScale>);
+            }))}
+        </ScrollView>)}
 
-                {isExpanded && (<View style={styles.reducerChildren}>
-                    {/* Vertical line connecting children */}
-                    <View style={styles.childrenVerticalLine}/>
-                    {typeof sliceData === 'object' && sliceData !== null ? (Object.keys(sliceData).map(k => (<ReduxValueNode key={k} name={k} value={sliceData[k]} level={0} search={search}/>))) : (<ReduxValueNode name={reducerKey} value={sliceData} level={0} search={search} lastAction={lastAction}/>)}
-                  </View>)}
-              </View>);
-            })}
-        </View>)}
+      {/* ── 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',
+    },
+    errorText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.grayTextWeak,
+    },
+    toolbar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
     },
-    treeRow: {
+    statusSection: {
         flexDirection: 'row',
         alignItems: 'center',
+    },
+    statusBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
         paddingVertical: 3,
-        gap: 4,
-        position: 'relative',
-    },
-    treeLeafConnector: {
-        position: 'absolute',
-        left: -12,
-        top: '50%',
-        width: 8,
-        height: 1,
+        borderRadius: 12,
+        borderWidth: 1,
+    },
+    statusBadgeActive: {
+        backgroundColor: AppColors.greenStatus,
+        borderColor: AppColors.greenColor + '30',
+    },
+    statusBadgePaused: {
+        backgroundColor: AppColors.grayBackground,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        marginRight: 6,
+    },
+    statusDotActive: {
+        backgroundColor: AppColors.greenBaggageText,
+    },
+    statusDotPaused: {
+        backgroundColor: AppColors.grayTextWeak,
+    },
+    statusBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        letterSpacing: 0.5,
+    },
+    statusTextActive: {
+        color: AppColors.greenBaggageText,
+    },
+    statusTextPaused: {
+        color: AppColors.grayText,
+    },
+    toolbarActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    iconBtn: {
+        width: 28,
+        height: 28,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: AppColors.purple + '40',
+        backgroundColor: AppColors.purpleShade50,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    searchContainer: {
+        backgroundColor: AppColors.primaryLight,
         borderBottomWidth: 1,
         borderBottomColor: AppColors.dividerColor,
-        opacity: 0.5,
+        paddingBottom: 10,
+    },
+    searchBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        marginTop: 10,
+        marginBottom: 8,
+        paddingHorizontal: 10,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+        height: 36,
     },
-    treeChildrenContainer: {
-        paddingLeft: 14,
-        borderLeftWidth: 1,
-        borderLeftColor: AppColors.dividerColor,
+    filterChipRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        gap: 8,
+    },
+    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: AppColors.grayText,
+    },
+    filterChipTextActive: {
+        color: AppColors.purple,
+        fontFamily: AppFonts.interBold,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors.grayTextStrong,
         marginLeft: 6,
+        padding: 0,
+    },
+    tabContainer: {
+        flexDirection: 'row',
+        backgroundColor: AppColors.dividerColor,
+        borderRadius: 8,
+        padding: 3,
+        marginHorizontal: 12,
+        marginTop: 10,
+        marginBottom: 10,
     },
-    chevronWrap: {
-        width: 10,
-        height: 10,
+    tabButton: {
+        flex: 1,
+        paddingVertical: 7,
         alignItems: 'center',
         justifyContent: 'center',
+        borderRadius: 6,
     },
-    keyText: {
+    tabButtonActive: {
+        backgroundColor: AppColors.primaryLight,
+        shadowColor: AppColors.shadowColorString,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    tabButtonText: {
         fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayTextStrong,
+        fontSize: 12,
+        color: AppColors.grayText,
     },
-    colonText: {
-        color: AppColors.grayTextWeak,
+    tabButtonTextActive: {
+        color: AppColors.purple,
+        fontFamily: AppFonts.interBold,
     },
-    valText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
+    scrollContent: {
+        paddingBottom: 24,
+        paddingHorizontal: 12,
+    },
+    emptyState: {
+        padding: 24,
+        alignItems: 'center',
     },
-    summaryText: {
+    emptyStateText: {
         fontFamily: AppFonts.interRegular,
-        fontSize: 11,
+        fontSize: 12,
         color: AppColors.grayTextWeak,
+        textAlign: 'center',
     },
-});
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    storeHeader: {
+    listRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: AppColors.purple,
-        borderRadius: 8,
-        paddingVertical: 10,
+        backgroundColor: AppColors.primaryLight,
         paddingHorizontal: 12,
-        gap: 8,
+        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,
     },
-    chevronWrap: {
-        width: 12,
-        height: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
+    rowMain: {
+        flex: 1,
+        marginLeft: 10,
     },
-    storeTitle: {
+    rowTitle: {
         fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: '#FFFFFF',
+        fontSize: 13.5,
+        color: AppColors.primaryBlack,
     },
-    badge: {
-        backgroundColor: 'rgba(255,255,255,0.2)',
-        paddingHorizontal: 8,
+    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,
+        borderRadius: 4,
+        paddingHorizontal: 5,
         paddingVertical: 2,
-        borderRadius: 12,
-        marginLeft: 'auto',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 28,
     },
-    badgeText: {
+    seqText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: '#FFFFFF',
+        fontSize: 9.5,
+        color: AppColors.grayText,
+    },
+    actionTitleText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.purple,
+    },
+    actionMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        marginTop: 2,
+    },
+    actionTimeText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 9.5,
+        color: AppColors.grayTextWeak,
     },
-    storeChildren: {
-        paddingLeft: 12,
+    tagsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
         marginTop: 4,
     },
-    reducerContainer: {
-        position: 'relative',
-        paddingLeft: 16,
-        paddingVertical: 4,
+    sliceTagMini: {
+        backgroundColor: AppColors.purpleShade50,
+        borderColor: AppColors.purple + '20',
+        borderWidth: 1,
+        borderRadius: 3,
+        paddingHorizontal: 4,
+        paddingVertical: 0.5,
     },
-    reducerVerticalLine: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 1,
-        backgroundColor: AppColors.dividerColor,
+    sliceTagMiniText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 8.5,
+        color: AppColors.purple,
     },
-    reducerHorizontalLine: {
-        position: 'absolute',
-        left: -16,
-        top: '50%',
-        width: 16,
-        height: 1,
-        backgroundColor: AppColors.dividerColor,
+    // ── Detail Views Styles ──
+    detailHeaderBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
     },
-    reducerHeader: {
+    backBtn: {
         flexDirection: 'row',
         alignItems: 'center',
         paddingVertical: 6,
+        paddingRight: 8,
+    },
+    backBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.purple,
+    },
+    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,
+    },
+    detailHeaderActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
         gap: 6,
     },
-    iconWrap: {
-        width: 18,
-        height: 18,
-        borderRadius: 4,
+    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',
+        gap: 4,
+        marginTop: 1,
+    },
+    detailTimeText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
     },
-    reducerText: {
+    detailAffectedTags: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        backgroundColor: AppColors.grayBackground,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    affectedTagsLabel: {
         fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
+        fontSize: 9,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+        marginBottom: 4,
     },
-    reducerChildren: {
-        paddingLeft: 20,
-        position: 'relative',
-        marginTop: 4,
-        gap: 10,
-    },
-    childrenVerticalLine: {
-        position: 'absolute',
-        left: 8,
-        top: 0,
-        bottom: 16,
-        width: 1,
-        backgroundColor: AppColors.dividerColor,
+    detailTagsList: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
     },
-    actionTypeBadge: {
-        backgroundColor: '#FCE7F3',
-        borderColor: '#FBCFE8',
+    sliceTag: {
+        backgroundColor: AppColors.purpleShade50,
+        borderColor: AppColors.purple + '20',
         borderWidth: 1,
-        borderRadius: 6,
+        borderRadius: 4,
         paddingHorizontal: 6,
-        paddingVertical: 2,
-        alignSelf: 'flex-start',
+        paddingVertical: 1.5,
+    },
+    sliceTagText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9.5,
+        color: AppColors.purple,
+    },
+    subTabRow: {
+        flexDirection: 'row',
+        padding: 8,
+        gap: 8,
+        backgroundColor: AppColors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    subTabPill: {
+        paddingHorizontal: 12,
+        paddingVertical: 5,
+        borderRadius: 12,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    subTabPillActive: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+    },
+    subTabPillText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors.grayText,
+    },
+    subTabPillTextActive: {
+        color: '#FFFFFF',
+        fontFamily: AppFonts.interBold,
     },
-    actionTypeText: {
+    detailScrollContent: {
+        paddingBottom: 24,
+    },
+    jsonViewerContainer: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    detailBox: {
+        padding: 10,
+    },
+    detailBoxHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+        paddingHorizontal: 4,
+    },
+    detailBoxTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 10,
-        color: '#BE185D',
+        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',
+        gap: 6,
+        marginBottom: 8,
+    },
+    apiMethodBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    apiMethodBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#FFFFFF',
+        letterSpacing: 0.5,
+    },
+    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',
+    },
+    apiChipText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.purple,
+    },
+    apiTitleText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 16,
+        color: AppColors.primaryBlack,
+        marginBottom: 8,
+    },
+    apiMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    apiMetaText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+    },
+    contentDetailSubHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        backgroundColor: AppColors.primaryLight,
     },
 });