react-native-inapp-inspector 1.1.29 → 1.1.32

package/dist/commonjs/components/NetworkIcons.js

@@ -463,16 +463,22 @@ exports.ForwardChevronIcon = ForwardChevronIcon;
 exports.BundleIcon = exports.PackageIcon;
 const LiveStateIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <react_native_svg_1.Path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
-      <react_native_svg_1.Circle cx="12" cy="12" r="3.5" stroke={color} strokeWidth="1.8" fill={`${color}22`}/>
-      <react_native_svg_1.Circle cx="12" cy="12" r="1.5" fill={color}/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8" strokeDasharray="3 3" opacity={0.6}/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="4.5" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="2" fill={color}/>
+      <react_native_svg_1.Path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
     </react_native_svg_1.default>);
 };
 exports.LiveStateIcon = LiveStateIcon;
 const TimelineIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <react_native_svg_1.Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
-      <react_native_svg_1.Path d="M12 7.5v4.5l3 2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M6 3v18" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="6" cy="6" r="2.5" stroke={color} strokeWidth="1.8" fill={`${color}25`}/>
+      <react_native_svg_1.Path d="M6 12h5a3 3 0 0 0 3-3V6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="14" cy="6" r="2.5" stroke={color} strokeWidth="1.8" fill={color}/>
+      <react_native_svg_1.Circle cx="6" cy="18" r="2.5" stroke={color} strokeWidth="1.8" fill={color}/>
+      <react_native_svg_1.Path d="M6 18h8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="17" cy="18" r="2.5" stroke={color} strokeWidth="1.8" fill={`${color}25`}/>
     </react_native_svg_1.default>);
 };
 exports.TimelineIcon = TimelineIcon;
@@ -484,16 +490,19 @@ const RefreshCcwIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14,
 exports.RefreshCcwIcon = RefreshCcwIcon;
 const StorageIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <react_native_svg_1.Ellipse cx="12" cy="6" rx="8" ry="2.8" stroke={color} strokeWidth="1.8"/>
-      <react_native_svg_1.Path d="M20 12c0 1.55-3.58 2.8-8 2.8s-8-1.25-8-2.8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
-      <react_native_svg_1.Path d="M4 6v12c0 1.55 3.58 2.8 8 2.8s8-1.25 8-2.8V6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Ellipse cx="12" cy="5" rx="8" ry="2.5" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Path d="M4 5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M4 9.5v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5v-4.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M4 14v4.5c0 1.38 3.58 2.5 8 2.5s8-1.12 8-2.5V14" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
     </react_native_svg_1.default>);
 };
 exports.StorageIcon = StorageIcon;
 const MetadataIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <react_native_svg_1.Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
-      <react_native_svg_1.Path d="M12 16v-4M12 8.2h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Path d="M7 8h10M7 12h6M7 16h7" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="16.5" cy="12" r="1.5" fill={color}/>
+      <react_native_svg_1.Circle cx="16.5" cy="16" r="1.5" fill={color}/>
     </react_native_svg_1.default>);
 };
 exports.MetadataIcon = MetadataIcon;

package/dist/commonjs/components/TreeNode.js

@@ -45,9 +45,19 @@ const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const TreeNode = react_1.default.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth, }) {
-    const [localOpen, setLocalOpen] = (0, react_1.useState)(forceOpen || (defaultExpandDepth !== undefined ? level < defaultExpandDepth : false));
+const TreeNode = react_1.default.memo(function TreeNode({ data, name, level = 0, search, forceOpen, defaultExpandDepth = 1, }) {
+    const [localOpen, setLocalOpen] = (0, react_1.useState)(() => {
+        if (forceOpen !== undefined) {
+            return forceOpen;
+        }
+        return defaultExpandDepth !== undefined ? level < defaultExpandDepth : level < 1;
+    });
     const open = localOpen;
+    (0, react_1.useEffect)(() => {
+        if (forceOpen !== undefined) {
+            setLocalOpen(forceOpen);
+        }
+    }, [forceOpen]);
     const isObject = typeof data === 'object' && data !== null;
     const isArray = Array.isArray(data);
     // Declare all hooks at the top unconditionally (prevents "Rendered fewer hooks than expected" error)

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.29";
+export declare const LIB_VERSION = "1.1.32";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.29';
+exports.LIB_VERSION = '1.1.32';

package/dist/commonjs/customHooks/reduxLogger.js

@@ -14,6 +14,7 @@
 //      and per-reducer "last action" consistently.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.connectReduxStore = exports.inspectorReduxMiddleware = exports.subscribeReduxState = exports.setReduxState = exports.clearActionHistory = exports.getActionHistory = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = exports.isReduxConnected = void 0;
+const helpers_1 = require("../helpers");
 let currentReduxState = null;
 const listeners = new Set();
 let globalReduxAutoRefresh = true;
@@ -76,7 +77,106 @@ function actionTypeOf(action) {
     }
     return 'UNKNOWN_ACTION';
 }
-function recordAction(action, prevState, nextState) {
+function detectActionOrigin(stack, actionType, actionObj) {
+    const stackLower = (stack || '').toLowerCase();
+    const typeLower = (actionType || '').toLowerCase();
+    // Explicit hint on action if developer tagged it
+    if (actionObj && actionObj.__origin) {
+        const raw = String(actionObj.__origin).toLowerCase();
+        if (raw.includes('saga'))
+            return { originType: 'saga' };
+        if (raw.includes('thunk'))
+            return { originType: 'thunk' };
+        if (raw.includes('ui'))
+            return { originType: 'ui' };
+    }
+    // 1. Saga Detection (Stack + Action naming conventions)
+    const isSaga = stackLower.includes('redux-saga') ||
+        stackLower.includes('runputeffect') ||
+        stackLower.includes('proc.js') ||
+        stackLower.includes('effects.js') ||
+        stackLower.includes('sagamiddleware') ||
+        stackLower.includes('saga.ts') ||
+        stackLower.includes('saga.js') ||
+        stackLower.includes('sagas') ||
+        typeLower.includes('saga') ||
+        typeLower.startsWith('saga/') ||
+        typeLower.startsWith('@saga/');
+    // 2. Thunk / RTK Query Detection
+    const isThunk = stackLower.includes('createasyncthunk') ||
+        stackLower.includes('redux-thunk') ||
+        stackLower.includes('rtk-query') ||
+        stackLower.includes('thunkmiddleware') ||
+        stackLower.includes('actioncreator') ||
+        typeLower.includes('thunk') ||
+        typeLower.endsWith('/pending') ||
+        typeLower.endsWith('/fulfilled') ||
+        typeLower.endsWith('/rejected');
+    // 3. Parse Stack Frames to find best application caller
+    const lines = (stack || '').split('\n').map(l => l.trim()).filter(Boolean);
+    let bestFrame = null;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Ignore logger / middleware lines inside inspector
+        if (line.includes('reduxLogger') ||
+            line.includes('inspectorReduxMiddleware') ||
+            line.includes('recordAction') ||
+            line.includes('redux.js') ||
+            line.includes('redux.cjs')) {
+            continue;
+        }
+        const parsed = (0, helpers_1.parseStackLine)(line, false);
+        if (parsed.frameType === 'app' || (!parsed.isRuntimeNoise && parsed.fileName !== 'Unknown')) {
+            bestFrame = parsed;
+            break;
+        }
+    }
+    if (!bestFrame && lines.length > 0) {
+        for (let i = 0; i < lines.length; i++) {
+            if (!lines[i].includes('reduxLogger') && !lines[i].includes('inspectorReduxMiddleware')) {
+                bestFrame = (0, helpers_1.parseStackLine)(lines[i], false);
+                break;
+            }
+        }
+    }
+    let originType = 'direct';
+    if (isSaga || (bestFrame && bestFrame.fileName?.toLowerCase().includes('saga'))) {
+        originType = 'saga';
+    }
+    else if (isThunk || (bestFrame && bestFrame.fileName?.toLowerCase().includes('thunk'))) {
+        originType = 'thunk';
+    }
+    else if (bestFrame &&
+        (bestFrame.fileName?.endsWith('.tsx') ||
+            bestFrame.functionName?.includes('onPress') ||
+            bestFrame.functionName?.includes('touchable') ||
+            bestFrame.functionName?.includes('Effect'))) {
+        originType = 'ui';
+    }
+    else if (stackLower.includes('listener') || stackLower.includes('subscribe')) {
+        originType = 'listener';
+    }
+    return {
+        originType,
+        caller: bestFrame?.copyableLocation || bestFrame?.raw || undefined,
+        callerFile: bestFrame?.fullPath || bestFrame?.fileName || undefined,
+        callerLine: bestFrame?.lineNumber ? Number(bestFrame.lineNumber) : undefined,
+        callerCol: bestFrame?.columnNumber ? Number(bestFrame.columnNumber) : undefined,
+    };
+}
+function extractSliceName(actionType, affectedSlices) {
+    if (affectedSlices && affectedSlices.length > 0) {
+        return affectedSlices[0];
+    }
+    // If Redux Toolkit action format: e.g. "users/fetchById" -> "users"
+    const match = actionType.match(/^([a-zA-Z0-9_\-]+)\//);
+    if (match && match[1] && !match[1].startsWith('@@')) {
+        return match[1];
+    }
+    return undefined;
+}
+function recordAction(action, prevState, nextState, rawStack) {
+    const stack = rawStack || new Error().stack || '';
     const type = actionTypeOf(action);
     const payload = action && typeof action === 'object' && action.payload !== undefined
         ? action.payload
@@ -84,13 +184,26 @@ function recordAction(action, prevState, nextState) {
     const now = Date.now();
     const timestamp = new Date(now).toLocaleTimeString();
     const affectedSlices = [];
+    const origin = detectActionOrigin(stack, type, action);
+    const sliceName = extractSliceName(type, affectedSlices);
     if (prevState &&
         nextState &&
         typeof prevState === 'object' &&
         typeof nextState === 'object') {
         Object.keys(nextState).forEach(key => {
             if (prevState[key] !== nextState[key]) {
-                lastActionForReducer[key] = { type, payload, timestamp, updatedAt: now };
+                lastActionForReducer[key] = {
+                    type,
+                    payload,
+                    timestamp,
+                    updatedAt: now,
+                    originType: origin.originType,
+                    callerFile: origin.callerFile,
+                    callerLine: origin.callerLine,
+                    callerCol: origin.callerCol,
+                    caller: origin.caller,
+                    stack,
+                };
                 affectedSlices.push(key);
             }
         });
@@ -104,6 +217,13 @@ function recordAction(action, prevState, nextState) {
         affectedSlices,
         prevState,
         nextState,
+        stack,
+        caller: origin.caller,
+        callerFile: origin.callerFile,
+        callerLine: origin.callerLine,
+        callerCol: origin.callerCol,
+        originType: origin.originType,
+        sliceName,
     });
     if (actionHistory.length > MAX_HISTORY) {
         actionHistory.length = MAX_HISTORY;
@@ -129,6 +249,7 @@ function recordAction(action, prevState, nextState) {
  */
 const inspectorReduxMiddleware = (storeApi) => (next) => (action) => {
     middlewareAttached = true;
+    const capturedStack = new Error().stack || '';
     // Thunks are functions — let them run; their inner plain-action dispatches
     // pass back through this same middleware, so nothing is lost.
     if (typeof action === 'function') {
@@ -139,7 +260,7 @@ const inspectorReduxMiddleware = (storeApi) => (next) => (action) => {
     const nextState = storeApi.getState();
     if (currentReduxState == null)
         currentReduxState = nextState;
-    recordAction(action, prevState, nextState);
+    recordAction(action, prevState, nextState, capturedStack);
     return result;
 };
 exports.inspectorReduxMiddleware = inspectorReduxMiddleware;
@@ -162,6 +283,7 @@ const connectReduxStore = (store) => {
     const originalDispatch = store.dispatch.bind(store);
     let inWrappedDispatch = false;
     store.dispatch = (action) => {
+        const capturedStack = new Error().stack || '';
         if (middlewareAttached || typeof action === 'function') {
             // Middleware handles recording, or it's a thunk whose inner dispatches
             // will be picked up individually.
@@ -182,7 +304,7 @@ const connectReduxStore = (store) => {
         finally {
             inWrappedDispatch = false;
         }
-        recordAction(action, prevState, store.getState());
+        recordAction(action, prevState, store.getState(), capturedStack);
         return result;
     };
     (0, exports.setReduxState)(store.getState());
@@ -206,7 +328,8 @@ const connectReduxStore = (store) => {
         }
         // Change arrived outside the wrapped dispatch — record it so the
         // timeline stays consistent, even without the original action type.
-        recordAction({ type: '@@inspector/EXTERNAL_STATE_CHANGE' }, prevState, nextState);
+        const subStack = new Error().stack || '';
+        recordAction({ type: '@@inspector/EXTERNAL_STATE_CHANGE' }, prevState, nextState, subStack);
     });
 };
 exports.connectReduxStore = connectReduxStore;

package/dist/commonjs/helpers/index.d.ts

@@ -53,7 +53,7 @@ export interface ParsedStackFrame {
 }
 /** Parses a stack trace line to extract function name, file name, extension (.tsx/.jsx/.ts), line, and column numbers */
 export declare const parseStackLine: (rawLine: string, isOrigin?: boolean) => ParsedStackFrame;
-/** Opens a file and line number directly in VS Code */
+/** Opens a file and line number directly in VS Code / system editor */
 export declare const openInVSCode: (filePath: string, lineNumber?: string | number, columnNumber?: string | number) => void;
 export declare const ANALYTICS_EVENT_PALETTE: string[];
 export declare const getEventColor: (name: string) => string;

package/dist/commonjs/helpers/index.js

@@ -576,28 +576,44 @@ const parseStackLine = (rawLine, isOrigin = false) => {
     };
 };
 exports.parseStackLine = parseStackLine;
-/** Opens a file and line number directly in VS Code */
+/** Opens a file and line number directly in VS Code / system editor */
 const openInVSCode = (filePath, lineNumber, columnNumber) => {
+    const numLine = lineNumber ? Number(lineNumber) : 1;
+    const numCol = columnNumber ? Number(columnNumber) : 1;
     const line = lineNumber ? `:${lineNumber}` : '';
     const col = columnNumber ? `:${columnNumber}` : '';
     const cleanPath = filePath.replace(/^file:\/\//, '');
-    const vscodeUrl = `vscode://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
-    react_native_1.Linking.canOpenURL(vscodeUrl)
-        .then(supported => {
-        if (supported) {
-            react_native_1.Linking.openURL(vscodeUrl);
+    // 1. Notify Metro dev server on host to launch editor directly on local system
+    const metroHosts = [
+        'http://localhost:8081',
+        'http://127.0.0.1:8081',
+        'http://10.0.2.2:8081',
+    ];
+    metroHosts.forEach(host => {
+        try {
+            fetch(`${host}/open-stack-frame`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file: cleanPath,
+                    lineNumber: numLine,
+                    column: numCol,
+                }),
+            }).catch(() => { });
         }
-        else {
-            react_native_1.Linking.openURL(vscodeUrl).catch(() => {
-                const insidersUrl = `vscode-insiders://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
-                react_native_1.Linking.openURL(insidersUrl).catch(() => {
-                    react_native_1.Alert.alert('Open in VS Code', `Target location:\n${cleanPath}${line}${col}\n\nPlease ensure VS Code is installed.`, [{ text: 'OK' }]);
-                });
+        catch { }
+    });
+    // 2. Also invoke native URL scheme handlers
+    const vscodeUrl = `vscode://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    const cursorUrl = `cursor://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    const vscodeInsidersUrl = `vscode-insiders://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    react_native_1.Linking.openURL(vscodeUrl).catch(() => {
+        react_native_1.Linking.openURL(cursorUrl).catch(() => {
+            react_native_1.Linking.openURL(vscodeInsidersUrl).catch(() => {
+                // Fallback: Copy to clipboard so user can jump immediately
+                (0, exports.copyToClipboard)(`${cleanPath}${line}${col}`, 'Location');
             });
-        }
-    })
-        .catch(() => {
-        react_native_1.Linking.openURL(vscodeUrl).catch(() => { });
+        });
     });
 };
 exports.openInVSCode = openInVSCode;

package/dist/commonjs/i18n/locales/en.json

@@ -282,7 +282,19 @@
         "timeNow": "NOW",
         "selectedBucket": "Bucket: {{time}} ({{count}} events)",
         "totalRevenue": "Revenue",
-        "activeDistribution": "Category Split"
+        "activeDistribution": "Category Split",
+        "allCategory": "All",
+        "screensCategory": "Screens",
+        "overviewTab": "Overview",
+        "jsonTreeTab": "JSON Tree",
+        "rawPayloadTab": "Raw Payload",
+        "sessionContext": "Session Context",
+        "userPropertiesSnapshot": "User Properties Snapshot",
+        "parameterKeys": "Parameters ({{count}})",
+        "searchParameters": "Search parameters...",
+        "noParamsFound": "No parameters match your search",
+        "sourceFirebase": "FIREBASE GA4",
+        "sourceCustom": "CUSTOM / MANUAL"
     },
     "redux": {
         "title": "Redux",
@@ -308,7 +320,38 @@
         "connectionStatus": "Connected",
         "connectionStatusNone": "Not connected",
         "autoRefresh": "Auto-refresh",
-        "paused": "Paused"
+        "paused": "Paused",
+        "liveState": "Live State",
+        "timeline": "Timeline",
+        "persisted": "Persisted",
+        "storage": "Storage",
+        "metadata": "Metadata",
+        "inMemory": "In-Memory",
+        "slice": "SLICE",
+        "rootKeys": "Root Keys",
+        "size": "Size",
+        "actions": "actions",
+        "keys": "Keys",
+        "last": "Last",
+        "live": "Live",
+        "loading": "Loading",
+        "error": "Error",
+        "empty": "Empty",
+        "payload": "Payload",
+        "actionPayload": "Action Payload:",
+        "stateChangesDiff": "State Changes (Diff):",
+        "tapToInspectAction": "Tap to inspect action payload & diff changes",
+        "noDispatchedActions": "No dispatched actions recorded for this slice yet.",
+        "sliceJson": "Slice JSON",
+        "originSaga": "SAGA",
+        "originThunk": "THUNK",
+        "originUi": "UI",
+        "originDirect": "DIRECT",
+        "originListener": "LISTENER",
+        "triggeredFrom": "Triggered From:",
+        "openInEditor": "Open in Editor",
+        "callStack": "Call Stack Trace",
+        "sliceOrigin": "Slice / Origin"
     },
     "performance": {
         "title": "Performance",

package/dist/commonjs/styles/AppColors.d.ts

@@ -124,6 +124,9 @@ declare const LightColors: {
     emerald700: string;
     pink100: string;
     sky100: string;
+    teal100: string;
+    teal700: string;
+    purple700: string;
     indigo50: string;
     gray100: string;
     gray200: string;
@@ -279,6 +282,9 @@ export declare const getThemeColors: (isDark: boolean) => {
     emerald700: string;
     pink100: string;
     sky100: string;
+    teal100: string;
+    teal700: string;
+    purple700: string;
     indigo50: string;
     gray100: string;
     gray200: string;

package/dist/commonjs/styles/AppColors.js

@@ -133,6 +133,9 @@ const LightColors = {
     emerald700: '#047857',
     pink100: '#FCE7F3',
     sky100: '#E0F2FE',
+    teal100: '#CCFBF1',
+    teal700: '#0F766E',
+    purple700: '#6D28D9',
     indigo50: '#EEF2FF',
     gray100: '#F3F4F6',
     gray200: '#E5E7EB',
@@ -303,6 +306,9 @@ const DarkColors = {
     emerald700: '#34D399',
     pink100: '#341626',
     sky100: '#0C2744',
+    teal100: '#134E4A',
+    teal700: '#2DD4BF',
+    purple700: '#8B5CF6',
     indigo50: '#1E1B3A',
     gray100: '#2A2438',
     gray200: '#362C4E',

package/dist/commonjs/styles/index.d.ts

@@ -427,6 +427,12 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         borderWidth: number;
         borderColor: string;
     };
+    domainHeaderCardExpanded: {
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        borderBottomWidth: number;
+        marginBottom: number;
+    };
     domainHeaderTopRow: {
         flexDirection: string;
         alignItems: string;
@@ -436,6 +442,8 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         flex: number;
+        minWidth: number;
+        marginRight: number;
         gap: number;
     };
     domainIconWrap: {
@@ -502,6 +510,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     domainStatsGroup: {
         flexDirection: string;
         alignItems: string;
+        flexShrink: number;
         gap: number;
     };
     domainStatPill: {
@@ -522,8 +531,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     treeNodeRow: {
         flexDirection: string;
         alignItems: string;
-        paddingLeft: number;
+        marginHorizontal: number;
         paddingRight: number;
+        paddingLeft: number;
+        backgroundColor: string;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        borderColor: string;
+    };
+    treeNodeRowLast: {
+        borderBottomWidth: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        marginBottom: number;
+        paddingBottom: number;
     };
     treeLines: {
         width: number;

package/dist/commonjs/styles/index.js

@@ -43,8 +43,8 @@ const getRawStyles = (colors) => ({
     header: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 10,
-        paddingVertical: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
         zIndex: 10,
         minHeight: 56,
         shadowColor: colors.black,
@@ -424,6 +424,12 @@ const getRawStyles = (colors) => ({
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
     },
+    domainHeaderCardExpanded: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        borderBottomWidth: 0,
+        marginBottom: 0,
+    },
     domainHeaderTopRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -433,6 +439,8 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         flex: 1,
+        minWidth: 0,
+        marginRight: 6,
         gap: 8,
     },
     domainIconWrap: {
@@ -499,6 +507,7 @@ const getRawStyles = (colors) => ({
     domainStatsGroup: {
         flexDirection: 'row',
         alignItems: 'center',
+        flexShrink: 0,
         gap: 4,
     },
     domainStatPill: {
@@ -519,8 +528,20 @@ const getRawStyles = (colors) => ({
     treeNodeRow: {
         flexDirection: 'row',
         alignItems: 'stretch',
-        paddingLeft: 12,
-        paddingRight: 12,
+        marginHorizontal: 12,
+        paddingRight: 8,
+        paddingLeft: 4,
+        backgroundColor: colors.grayBackground,
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+    },
+    treeNodeRowLast: {
+        borderBottomWidth: 1,
+        borderBottomLeftRadius: 10,
+        borderBottomRightRadius: 10,
+        marginBottom: 8,
+        paddingBottom: 6,
     },
     treeLines: {
         width: 28,

package/dist/commonjs/types/interfaces.d.ts

@@ -119,6 +119,13 @@ export interface ReduxHistoryEntry {
     affectedSlices: string[];
     prevState?: any;
     nextState?: any;
+    stack?: string;
+    caller?: string;
+    callerFile?: string;
+    callerLine?: number;
+    callerCol?: number;
+    originType?: 'saga' | 'thunk' | 'ui' | 'direct' | 'listener';
+    sliceName?: string;
 }
 export interface InspectorStorage {
     getItem: (key: string) => string | null | Promise<string | null>;