react-native-inapp-inspector 1.1.26 → 1.1.28

package/dist/commonjs/components/ErrorBoundary.js

@@ -1,45 +1,110 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorBoundary = void 0;
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
+const i18n_1 = require("../i18n");
+const NetworkIcons_1 = require("./NetworkIcons");
 const crashHandler_1 = require("../customHooks/crashHandler");
 const enums_1 = require("../types/enums");
 function parseStackTrace(stack) {
     if (!stack)
-        return null;
+        return { rootFrame: null, frames: [] };
     const lines = stack.split('\n');
+    const frames = [];
     for (const line of lines) {
         if (line.includes('ErrorBoundary') ||
             line.includes('getDerivedStateFromError') ||
-            line.includes('componentDidCatch')) {
+            line.includes('componentDidCatch') ||
+            line.includes('handleInterceptedCrash')) {
             continue;
         }
-        // Matching ios format: method@url:line:col
-        const iosMatch = line.match(/^([^@]+)@(.*):(\d+):(\d+)$/);
+        // iOS format: method@url:line:col
+        const iosMatch = line.match(/^([^@]*)@(.*):(\d+):(\d+)$/);
         if (iosMatch) {
-            const [, method, file, lineNum, colNum] = iosMatch;
-            const cleanFile = file.split('?')[0].split('/').pop() || file;
-            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+            const [, method, fullPath, lineNum, colNum] = iosMatch;
+            const cleanFile = fullPath.split('?')[0].split('/').pop() || fullPath;
+            const isProject = !fullPath.includes('node_modules') && !fullPath.includes('Libraries/Core');
+            frames.push({
+                method: method.trim() || 'anonymous',
+                file: cleanFile,
+                fullPath: fullPath.split('?')[0],
+                line: lineNum,
+                column: colNum,
+                isProjectFile: isProject,
+            });
+            continue;
         }
-        // Matching android format: at method (url:line:col) or at url:line:col
+        // Android format: at method (url:line:col) or at url:line:col
         const androidMatch = line.match(/^\s*at\s+(.+)\s+\((.+):(\d+):(\d+)\)$/);
         if (androidMatch) {
-            const [, method, file, lineNum, colNum] = androidMatch;
-            const cleanFile = file.split('?')[0].split('/').pop() || file;
-            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+            const [, method, fullPath, lineNum, colNum] = androidMatch;
+            const cleanFile = fullPath.split('?')[0].split('/').pop() || fullPath;
+            const isProject = !fullPath.includes('node_modules') && !fullPath.includes('Libraries/Core');
+            frames.push({
+                method: method.trim(),
+                file: cleanFile,
+                fullPath: fullPath.split('?')[0],
+                line: lineNum,
+                column: colNum,
+                isProjectFile: isProject,
+            });
+            continue;
         }
         const androidMatchSimple = line.match(/^\s*at\s+(.+):(\d+):(\d+)$/);
         if (androidMatchSimple) {
-            const [, file, lineNum, colNum] = androidMatchSimple;
-            const cleanFile = file.split('?')[0].split('/').pop() || file;
-            return { method: 'anonymous', file: cleanFile, line: lineNum, column: colNum };
+            const [, fullPath, lineNum, colNum] = androidMatchSimple;
+            const cleanFile = fullPath.split('?')[0].split('/').pop() || fullPath;
+            const isProject = !fullPath.includes('node_modules') && !fullPath.includes('Libraries/Core');
+            frames.push({
+                method: 'anonymous',
+                file: cleanFile,
+                fullPath: fullPath.split('?')[0],
+                line: lineNum,
+                column: colNum,
+                isProjectFile: isProject,
+            });
         }
     }
-    return null;
+    // Find topmost project frame, or fallback to first frame
+    const rootFrame = frames.find(f => f.isProjectFile) || frames[0] || null;
+    return { rootFrame, frames };
 }
 class ErrorBoundary extends react_1.Component {
     constructor() {
@@ -57,14 +122,19 @@ class ErrorBoundary extends react_1.Component {
         this.handleCopyTrace = () => {
             const error = this.state.error;
             if (error) {
-                const isNativeCrash = error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java');
-                const parsed = error.stack ? parseStackTrace(error.stack) : null;
-                const detailStr = `Crash Source: ${isNativeCrash ? 'Native Crash' : 'JavaScript Crash'}
+                const { rootFrame } = parseStackTrace(error.stack || '');
+                const detailStr = `─────────────────────────────────────────────────────────────
+IN-APP INSPECTOR • INTERCEPTED CRASH REPORT
+─────────────────────────────────────────────────────────────
+Error: ${error.name || 'Error'}
 Message: ${error.message}
-${parsed ? `Method: ${parsed.method}\nFile: ${parsed.file}\nLine: ${parsed.line}:${parsed.column}` : ''}
+${rootFrame ? `Location: ${rootFrame.file}:${rootFrame.line}:${rootFrame.column}\nMethod: ${rootFrame.method}\nPath: ${rootFrame.fullPath}` : ''}
+Timestamp: ${new Date().toISOString()}
+
 Stack Trace:
-${error.stack}`;
-                (0, helpers_1.copyToClipboard)(detailStr, 'Crash traceback');
+${error.stack || 'No stack trace available'}
+─────────────────────────────────────────────────────────────`;
+                (0, helpers_1.copyToClipboard)(detailStr, (0, i18n_1.t)('errors.errorReport'));
             }
         };
     }
@@ -73,133 +143,493 @@ ${error.stack}`;
     }
     componentDidCatch(error, errorInfo) {
         try {
-            const stack = error?.stack || errorInfo?.componentStack;
+            const stack = error?.stack || errorInfo?.componentStack || '';
             (0, crashHandler_1.handleInterceptedCrash)(error, stack, false, enums_1.CrashType.Render, errorInfo?.componentStack);
         }
         catch { }
     }
     render() {
-        if (this.state.hasError) {
-            return null;
+        const { hasError, error } = this.state;
+        if (!hasError || !error) {
+            return this.props.children;
+        }
+        const { rootFrame, frames } = parseStackTrace(error.stack || '');
+        const errorType = error.name || (0, i18n_1.t)('errors.title');
+        const isSyntaxOrType = errorType.includes('Syntax') ||
+            errorType.includes('Type') ||
+            errorType.includes('Reference');
+        // ─── Inline Fallback View ─────────────────────────────────────────────
+        if (this.props.fallbackType === 'inline') {
+            return (<react_native_1.View style={styles.inlineContainer}>
+          <react_native_1.View style={styles.inlineHeader}>
+            <NetworkIcons_1.WarningTriangleIcon color={AppColors_1.AppColors.red600} size={18}/>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={styles.inlineTitle} numberOfLines={1}>
+                {errorType}: {error.message}
+              </react_native_1.Text>
+              {rootFrame && (<react_native_1.Text style={styles.inlineLoc} numberOfLines={1}>
+                  {rootFrame.file}:{rootFrame.line} ({rootFrame.method})
+                </react_native_1.Text>)}
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.View style={styles.inlineActions}>
+            <react_native_1.TouchableOpacity onPress={this.handleReset} style={styles.inlineBtn} activeOpacity={0.7}>
+              <NetworkIcons_1.RefreshCcwIcon size={12} color={AppColors_1.AppColors.white}/>
+              <react_native_1.Text style={styles.inlineBtnText}>{(0, i18n_1.t)('errors.retry')}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity onPress={this.handleCopyTrace} style={styles.inlineCopyBtn} activeOpacity={0.7}>
+              <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.redErrorText}/>
+              <react_native_1.Text style={styles.inlineCopyBtnText}>{(0, i18n_1.t)('errors.copy')}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>);
         }
-        return this.props.children;
+        // ─── Full-Screen Custom Native Recovery Modal ─────────────────────────
+        return (<react_native_1.SafeAreaView style={styles.safeArea}>
+        <react_native_1.View style={styles.container}>
+          {/* Header Banner */}
+          <react_native_1.View style={styles.header}>
+            <react_native_1.View style={styles.iconGlowWrap}>
+              <NetworkIcons_1.WarningTriangleIcon color={AppColors_1.AppColors.red500} size={28}/>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.View style={styles.badgeRow}>
+                <react_native_1.View style={styles.crashBadge}>
+                  <react_native_1.Text style={styles.crashBadgeText}>
+                    {isSyntaxOrType ? `JS ${errorType.toUpperCase()}` : (0, i18n_1.t)('errors.crashIntercepted')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.shieldBadge}>
+                  <react_native_1.Text style={styles.shieldBadgeText}>{(0, i18n_1.t)('errors.protected')}</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.title}>{(0, i18n_1.t)('errors.rootCauseTitle')}</react_native_1.Text>
+              <react_native_1.Text style={styles.subtitle}>{(0, i18n_1.t)('errors.rootCauseSubtitle')}</react_native_1.Text>
+            </react_native_1.View>
+            {this.props.onClose && (<react_native_1.TouchableOpacity onPress={this.props.onClose} style={styles.closeIconBtn} activeOpacity={0.7}>
+                <NetworkIcons_1.ClearIcon size={16} color={AppColors_1.AppColors.slate400}/>
+              </react_native_1.TouchableOpacity>)}
+          </react_native_1.View>
+
+          <react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+            {/* Error Message Box */}
+            <react_native_1.View style={styles.errorBox}>
+              <react_native_1.View style={styles.errorBoxHeader}>
+                <NetworkIcons_1.CircleAlertIcon size={14} color={AppColors_1.AppColors.red500}/>
+                <react_native_1.Text style={styles.errorBoxTitle}>{errorType}</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.errorMessage}>{error.message}</react_native_1.Text>
+            </react_native_1.View>
+
+            {/* Root Cause Location Card */}
+            {rootFrame && (<react_native_1.View style={styles.locationCard}>
+                <react_native_1.Text style={styles.cardHeaderTitle}>{(0, i18n_1.t)('errors.exactLocation')}</react_native_1.Text>
+                <react_native_1.View style={styles.locRow}>
+                  <react_native_1.Text style={styles.locLabel}>{(0, i18n_1.t)('errors.file')}</react_native_1.Text>
+                  <react_native_1.Text style={styles.locValFile} numberOfLines={1}>
+                    {rootFrame.file}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.locRow}>
+                  <react_native_1.Text style={styles.locLabel}>{(0, i18n_1.t)('errors.lineCol')}</react_native_1.Text>
+                  <react_native_1.Text style={styles.locValNum}>
+                    {(0, i18n_1.t)('errors.lineColVal', { line: rootFrame.line, col: rootFrame.column })}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.locRow}>
+                  <react_native_1.Text style={styles.locLabel}>{(0, i18n_1.t)('errors.function')}</react_native_1.Text>
+                  <react_native_1.Text style={styles.locValMethod}>{rootFrame.method}()</react_native_1.Text>
+                </react_native_1.View>
+                {rootFrame.fullPath ? (<react_native_1.Text style={styles.fullPathText} numberOfLines={2}>
+                    {rootFrame.fullPath}
+                  </react_native_1.Text>) : null}
+              </react_native_1.View>)}
+
+            {/* Formatted Stack Frames */}
+            <react_native_1.View style={styles.stackCard}>
+              <react_native_1.View style={styles.stackCardHeader}>
+                <react_native_1.Text style={styles.cardHeaderTitle}>{(0, i18n_1.t)('errors.callStack')}</react_native_1.Text>
+                <react_native_1.Text style={styles.frameCountText}>
+                  {(0, i18n_1.t)('errors.framesCount', { count: frames.length })}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {frames.slice(0, 8).map((frame, idx) => (<react_native_1.View key={idx} style={[
+                    styles.frameItem,
+                    frame.isProjectFile && styles.frameItemProject,
+                ]}>
+                  <react_native_1.View style={styles.frameNumBadge}>
+                    <react_native_1.Text style={[
+                    styles.frameNumText,
+                    frame.isProjectFile && { color: AppColors_1.AppColors.sky400 },
+                ]}>
+                      #{idx + 1}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={[
+                    styles.frameMethod,
+                    frame.isProjectFile && styles.frameMethodProject,
+                ]} numberOfLines={1}>
+                      {frame.method}
+                    </react_native_1.Text>
+                    <react_native_1.Text style={styles.frameLoc} numberOfLines={1}>
+                      {frame.file}:{frame.line}:{frame.column}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  {frame.isProjectFile && (<react_native_1.View style={styles.appTag}>
+                      <react_native_1.Text style={styles.appTagText}>{(0, i18n_1.t)('errors.appTag')}</react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>))}
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+
+          {/* Action Buttons Footer */}
+          <react_native_1.View style={styles.footer}>
+            <react_native_1.TouchableOpacity onPress={this.handleReset} style={styles.retryBtn} activeOpacity={0.8}>
+              <NetworkIcons_1.RefreshCcwIcon size={16} color={AppColors_1.AppColors.white}/>
+              <react_native_1.Text style={styles.retryBtnText}>{(0, i18n_1.t)('errors.tryAgainRecover')}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity onPress={this.handleCopyTrace} style={styles.copyBtn} activeOpacity={0.8}>
+              <NetworkIcons_1.CopyIcon size={16} color={AppColors_1.AppColors.slate900}/>
+              <react_native_1.Text style={styles.copyBtnText}>{(0, i18n_1.t)('errors.copyDiagnostics')}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.SafeAreaView>);
     }
 }
 exports.ErrorBoundary = ErrorBoundary;
-const monoFont = AppFonts_1.AppFonts.interRegular;
 const styles = react_native_1.StyleSheet.create({
+    safeArea: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.slate850,
+    },
     container: {
         flex: 1,
-        backgroundColor: `${AppColors_1.AppColors.black}4D`,
-        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.slate850,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        paddingHorizontal: 16,
+        paddingTop: 14,
+        paddingBottom: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.slate800,
+        gap: 12,
+    },
+    iconGlowWrap: {
+        width: 44,
+        height: 44,
+        borderRadius: 12,
+        backgroundColor: `${AppColors_1.AppColors.red500}26`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}59`,
         alignItems: 'center',
-        padding: 16,
+        justifyContent: 'center',
+        marginTop: 2,
     },
-    card: {
-        width: '100%',
-        maxWidth: 400,
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 16,
-        padding: 20,
+    badgeRow: {
+        flexDirection: 'row',
         alignItems: 'center',
-        shadowColor: AppColors_1.AppColors.black,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.1,
-        shadowRadius: 12,
-        elevation: 8,
+        gap: 6,
+        marginBottom: 4,
+    },
+    crashBadge: {
+        backgroundColor: `${AppColors_1.AppColors.red500}33`,
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}66`,
+    },
+    crashBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.red500,
+        letterSpacing: 0.5,
+    },
+    shieldBadge: {
+        backgroundColor: `${AppColors_1.AppColors.emerald500}26`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.emerald500}4D`,
+    },
+    shieldBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.emerald500,
+        letterSpacing: 0.5,
     },
     title: {
-        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
-        fontSize: 18,
-        color: AppColors_1.AppColors.slate900,
-        marginBottom: 8,
-        textAlign: 'center',
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 16,
+        color: AppColors_1.AppColors.white,
+        letterSpacing: -0.2,
     },
     subtitle: {
-        fontFamily: AppFonts_1.AppFonts.interRegular || 'System',
-        fontSize: 12,
-        color: AppColors_1.AppColors.slate500,
-        lineHeight: 18,
-        textAlign: 'center',
-        marginBottom: 16,
-    },
-    scroll: {
-        width: '100%',
-        maxHeight: 180,
-        backgroundColor: AppColors_1.AppColors.slate50,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.slate400,
+        marginTop: 1,
+    },
+    closeIconBtn: {
+        padding: 6,
         borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.slate200,
-        padding: 10,
-        marginBottom: 20,
+        backgroundColor: AppColors_1.AppColors.slate800,
+    },
+    scrollArea: {
+        flex: 1,
     },
     scrollContent: {
-        paddingBottom: 10,
+        padding: 16,
+        gap: 12,
     },
-    code: {
-        fontFamily: monoFont,
-        fontSize: 11,
-        color: AppColors_1.AppColors.rose600,
+    errorBox: {
+        backgroundColor: `${AppColors_1.AppColors.red500}1A`,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.red500}40`,
+        padding: 14,
+        gap: 6,
     },
-    btnRow: {
+    errorBoxHeader: {
         flexDirection: 'row',
-        gap: 12,
-        width: '100%',
+        alignItems: 'center',
+        gap: 6,
+    },
+    errorBoxTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.red500,
+        letterSpacing: 0.3,
+    },
+    errorMessage: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors_1.AppColors.red100,
+        lineHeight: 19,
+    },
+    locationCard: {
+        backgroundColor: AppColors_1.AppColors.slate800,
+        borderRadius: 12,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.slate700,
+        gap: 8,
+    },
+    cardHeaderTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.slate400,
+        letterSpacing: 0.8,
+    },
+    locRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    locLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.slate400,
+        minWidth: 80,
     },
-    resetBtn: {
+    locValFile: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.sky400,
         flex: 1,
-        backgroundColor: AppColors_1.AppColors.purple,
-        height: 40,
+        textAlign: 'right',
+    },
+    locValNum: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.white,
+    },
+    locValMethod: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.purple400,
+    },
+    fullPathText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.slate500,
+        marginTop: 2,
+        paddingTop: 6,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.slate700,
+    },
+    stackCard: {
+        backgroundColor: AppColors_1.AppColors.slate800,
+        borderRadius: 12,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.slate700,
+        gap: 8,
+    },
+    stackCardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    frameCountText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.slate400,
+    },
+    frameItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.slate850,
+        padding: 10,
         borderRadius: 8,
-        justifyContent: 'center',
+        gap: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.slate800,
+    },
+    frameItemProject: {
+        borderColor: `${AppColors_1.AppColors.sky400}4D`,
+        backgroundColor: `${AppColors_1.AppColors.sky400}0D`,
+    },
+    frameNumBadge: {
+        width: 24,
+        alignItems: 'center',
+    },
+    frameNumText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.slate500,
+    },
+    frameMethod: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.slate200,
+    },
+    frameMethodProject: {
+        color: AppColors_1.AppColors.white,
+    },
+    frameLoc: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.slate400,
+        marginTop: 1,
+    },
+    appTag: {
+        backgroundColor: `${AppColors_1.AppColors.sky400}33`,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    appTagText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors_1.AppColors.sky400,
+    },
+    footer: {
+        flexDirection: 'row',
+        padding: 14,
+        backgroundColor: AppColors_1.AppColors.slate800,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.slate700,
+        gap: 10,
+    },
+    retryBtn: {
+        flex: 1.2,
+        flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        backgroundColor: AppColors_1.AppColors.purple,
+        height: 44,
+        borderRadius: 10,
     },
-    resetBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+    retryBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 13,
         color: AppColors_1.AppColors.white,
     },
-    closeBtn: {
+    copyBtn: {
         flex: 1,
-        backgroundColor: AppColors_1.AppColors.slate100,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.slate200,
-        height: 40,
-        borderRadius: 8,
-        justifyContent: 'center',
+        flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        backgroundColor: AppColors_1.AppColors.slate100,
+        height: 44,
+        borderRadius: 10,
     },
-    closeBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+    copyBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 13,
-        color: AppColors_1.AppColors.slate600,
+        color: AppColors_1.AppColors.slate900,
     },
     inlineContainer: {
-        padding: 8,
-        backgroundColor: AppColors_1.AppColors.roseBg,
+        padding: 12,
+        backgroundColor: AppColors_1.AppColors.red50,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.errorBorder,
-        borderRadius: 8,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
+        borderRadius: 10,
         margin: 8,
+        gap: 10,
+    },
+    inlineHeader: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 10,
     },
     inlineTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
-        fontSize: 11,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.red600,
+    },
+    inlineLoc: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
         color: AppColors_1.AppColors.redErrorText,
+        marginTop: 2,
     },
-    inlineResetBtn: {
-        backgroundColor: AppColors_1.AppColors.redErrorText,
+    inlineActions: {
+        flexDirection: 'row',
+        gap: 8,
+        justifyContent: 'flex-end',
+    },
+    inlineBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.red600,
         paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 4,
+        paddingVertical: 5,
+        borderRadius: 6,
     },
-    inlineResetText: {
-        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
-        fontSize: 10,
+    inlineBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
         color: AppColors_1.AppColors.white,
     },
+    inlineCopyBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.red100,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.errorBorder,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+    },
+    inlineCopyBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.redErrorText,
+    },
 });
 exports.default = ErrorBoundary;