react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/Inspector/LogDetail.js

@@ -0,0 +1,963 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const react_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const HighlightText_1 = __importDefault(require("../HighlightText"));
+const JsonViewer_1 = __importDefault(require("../JsonViewer"));
+const CopyButton_1 = __importDefault(require("../CopyButton"));
+const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
+const NetworkIcons_1 = require("../NetworkIcons");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const styles_1 = __importDefault(require("../../styles"));
+const helpers_1 = require("../../helpers");
+const getRelativeTime = (timestamp) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (seconds < 60)
+        return `${seconds}s ago`;
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${days}d ago`;
+};
+const LogDetail = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { selectedLog } = (0, InspectorContext_1.useInspector)();
+    const [activeTab, setActiveTab] = (0, react_1.useState)('output');
+    const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
+    const [viewMode, setViewMode] = (0, react_1.useState)('pretty');
+    const jsonContent = (0, react_1.useMemo)(() => (selectedLog ? (0, helpers_1.getJsonContent)(selectedLog.message) : null), [selectedLog]);
+    const [stackViewMode, setStackViewMode] = (0, react_1.useState)('structured');
+    const [stackSource, setStackSource] = (0, react_1.useState)('caller');
+    const activeStackString = (0, react_1.useMemo)(() => {
+        if (!selectedLog)
+            return '';
+        if (stackSource === 'error' && selectedLog.errorStack) {
+            return selectedLog.errorStack;
+        }
+        return selectedLog.stack || selectedLog.caller || '';
+    }, [selectedLog, stackSource]);
+    const originFrame = (0, react_1.useMemo)(() => {
+        if (!selectedLog)
+            return null;
+        if (selectedLog.caller && selectedLog.caller !== 'Unknown') {
+            return (0, helpers_1.parseStackLine)(selectedLog.caller, true);
+        }
+        if (selectedLog.stack) {
+            const firstLine = selectedLog.stack
+                .split('\n')
+                .find(l => l.trim().length > 0);
+            if (firstLine)
+                return (0, helpers_1.parseStackLine)(firstLine, true);
+        }
+        return null;
+    }, [selectedLog]);
+    const parsedStackFrames = (0, react_1.useMemo)(() => {
+        if (!activeStackString)
+            return [];
+        return activeStackString
+            .split('\n')
+            .map(l => l.trim())
+            .filter(l => l.length > 0)
+            .map((line, idx) => (0, helpers_1.parseStackLine)(line, idx === 0));
+    }, [activeStackString]);
+    if (!selectedLog)
+        return null;
+    const isDark = AppColors_1.AppColors.primaryLight !== AppColors_1.AppColors.white;
+    const getTypeColors = () => {
+        if (selectedLog.type === 'error') {
+            return {
+                border: AppColors_1.AppColors.errorColor,
+                badgeBg: `${AppColors_1.AppColors.errorColor}15`,
+                badgeText: AppColors_1.AppColors.errorColor,
+                label: 'ERROR',
+            };
+        }
+        if (selectedLog.type === 'warn') {
+            return {
+                border: AppColors_1.AppColors.lightOrange,
+                badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
+                badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
+                label: 'WARN',
+            };
+        }
+        return {
+            border: AppColors_1.AppColors.purple,
+            badgeBg: `${AppColors_1.AppColors.purple}15`,
+            badgeText: AppColors_1.AppColors.purple,
+            label: 'INFO',
+        };
+    };
+    const typeColors = getTypeColors();
+    const hasMultipleArgs = selectedLog.rawArgs != null && selectedLog.rawArgs.length > 1;
+    const hasStack = Boolean(selectedLog.stack && selectedLog.stack.trim().length > 0);
+    const subTabs = [
+        {
+            key: 'output',
+            label: 'Output',
+            icon: (isActive) => (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+        },
+        ...(hasMultipleArgs
+            ? [
+                {
+                    key: 'arguments',
+                    label: `Args (${selectedLog.rawArgs?.length})`,
+                    icon: (isActive) => (<NetworkIcons_1.RequestIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                },
+            ]
+            : []),
+        ...(hasStack
+            ? [
+                {
+                    key: 'stack',
+                    label: 'Stack Trace',
+                    icon: (isActive) => (<NetworkIcons_1.LayersIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                },
+            ]
+            : []),
+        {
+            key: 'metadata',
+            label: 'Metadata',
+            icon: (isActive) => (<NetworkIcons_1.InfoCircleIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+        },
+    ];
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* Enhanced details header bar */}
+      <react_native_1.View style={styles_1.default.detailInfoBar}>
+        <react_native_1.View style={{ flexDirection: 'column', gap: 10 }}>
+          {/* Top Row: Type badge, method, content pill & Copy button */}
+          <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+        }}>
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            flex: 1,
+            flexWrap: 'wrap',
+        }}>
+              {/* Type Badge */}
+              <react_native_1.View style={[
+            styles_1.default.typeChip,
+            {
+                backgroundColor: typeColors.badgeBg,
+                borderWidth: 1,
+                borderColor: `${typeColors.border}40`,
+                paddingHorizontal: 8,
+                paddingVertical: 3,
+            },
+        ]}>
+                <react_native_1.View style={[
+            styles_1.default.typeDot,
+            { backgroundColor: typeColors.badgeText },
+        ]}/>
+                <react_native_1.Text style={[
+            styles_1.default.typeChipText,
+            { color: typeColors.badgeText, fontSize: 10 },
+        ]}>
+                  {typeColors.label}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {/* Method chip */}
+              <react_native_1.View style={[
+            styles_1.default.metaChip,
+            {
+                backgroundColor: `${AppColors_1.AppColors.brandPurple}12`,
+                borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+            },
+        ]}>
+                <react_native_1.Text style={[
+            styles_1.default.metaChipText,
+            { color: AppColors_1.AppColors.brandPurple, fontSize: 10 },
+        ]}>
+                  console.
+                  {selectedLog.sourceMethod || selectedLog.type || 'log'}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {/* JSON content type chip */}
+              {jsonContent && (<react_native_1.View style={[
+                styles_1.default.metaChip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.teal600}12`,
+                    borderColor: `${AppColors_1.AppColors.teal600}2B`,
+                },
+            ]}>
+                  <react_native_1.Text style={[
+                styles_1.default.metaChipText,
+                { color: AppColors_1.AppColors.teal600, fontSize: 10 },
+            ]}>
+                    {Array.isArray(jsonContent.data)
+                ? `Array[${jsonContent.data.length}]`
+                : `Object{${Object.keys(jsonContent.data).length}}`}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              {/* Duplicate count chip */}
+              {selectedLog.duplicateCount != null &&
+            selectedLog.duplicateCount > 1 && (<react_native_1.View style={[
+                styles_1.default.metaChip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.purple}1A`,
+                    borderColor: `${AppColors_1.AppColors.purple}3D`,
+                },
+            ]}>
+                    <react_native_1.Text style={[
+                styles_1.default.metaChipText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                      {t('console.duplicates', {
+                count: selectedLog.duplicateCount,
+            })}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+            </react_native_1.View>
+
+            {/* Quick Copy button */}
+            <CopyButton_1.default value={selectedLog.message} label={t('console.logMessage')}/>
+          </react_native_1.View>
+
+          {/* Caller & Trace origin info */}
+          <react_native_1.View style={{ gap: 4 }}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+              {originFrame?.fileExt && originFrame.fileExt !== 'other' && (<react_native_1.View style={{
+                backgroundColor: originFrame.fileExt === 'tsx' || originFrame.fileExt === 'ts'
+                    ? AppColors_1.AppColors.brandPurple
+                    : AppColors_1.AppColors.teal600,
+                borderRadius: 4,
+                paddingHorizontal: 5,
+                paddingVertical: 1.5,
+            }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.white,
+                letterSpacing: 0.5,
+            }}>
+                    {originFrame.fileExt.toUpperCase()}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              <react_native_1.Text selectable style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 13,
+            color: AppColors_1.AppColors.primaryBlack,
+            lineHeight: 18,
+        }} numberOfLines={1}>
+                {originFrame?.functionName && originFrame.functionName !== '<anonymous>'
+            ? `${originFrame.functionName}()`
+            : originFrame?.fileName || t('console.consoleLog')}
+              </react_native_1.Text>
+
+              {originFrame?.fileName && (<react_native_1.View style={[
+                styles_1.default.metaChip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}12`,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                    paddingHorizontal: 7,
+                    paddingVertical: 2,
+                },
+            ]}>
+                  <react_native_1.Text style={[
+                styles_1.default.metaChipText,
+                { color: AppColors_1.AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts_1.AppFonts.interBold },
+            ]}>
+                    📄 {originFrame.fileName}
+                    {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}
+                    {originFrame.columnNumber ? `:${originFrame.columnNumber}` : ''}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+
+            {/* Enhanced metadata metrics row */}
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            flexWrap: 'wrap',
+        }}>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+                #{selectedLog.id + 1}
+              </react_native_1.Text>
+              <react_native_1.Text style={detailStyles.metaDot}>•</react_native_1.Text>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+                {(0, helpers_1.formatDateTime)(selectedLog.timestamp)} ({getRelativeTime(selectedLog.timestamp)})
+              </react_native_1.Text>
+              <react_native_1.Text style={detailStyles.metaDot}>•</react_native_1.Text>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+                {(0, helpers_1.getSize)(selectedLog.message)}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* Sub-tabs header */}
+      <react_native_1.View style={detailStyles.tabsHeaderWrap}>
+        <SegmentedTabs_1.default tabs={subTabs} activeKey={activeTab} onChange={key => setActiveTab(key)}/>
+      </react_native_1.View>
+
+      {/* Search row (only for output/arguments/stack tabs) */}
+      {activeTab !== 'metadata' && (<react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 4 }}>
+          <react_native_1.View style={[styles_1.default.detailSearchRow, { marginBottom: 0 }]}>
+            <react_native_1.View style={[
+                styles_1.default.detailSearchBox,
+                {
+                    backgroundColor: isDark
+                        ? `${AppColors_1.AppColors.brandPurple}10`
+                        : AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                },
+            ]}>
+              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
+              <react_native_1.TextInput placeholder="Search in log details..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+              {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 6 }}>
+                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+                </react_native_1.Pressable>)}
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {/* Tab Content Container */}
+      <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{
+            paddingHorizontal: 12,
+            paddingTop: 6,
+            paddingBottom: 28,
+            flexGrow: 1,
+        }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
+        {/* Tab 1: Output / Message */}
+        {activeTab === 'output' && (<react_native_1.View style={[
+                styles_1.default.sectionContainer,
+                {
+                    backgroundColor: isDark
+                        ? `${AppColors_1.AppColors.purple}12`
+                        : AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    borderRadius: 12,
+                    overflow: 'hidden',
+                    flex: 1,
+                },
+            ]}>
+            {/* Section Header with View Modes */}
+            <react_native_1.View style={{
+                flexDirection: 'column',
+                gap: 8,
+                paddingHorizontal: 12,
+                paddingVertical: 10,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
+                backgroundColor: isDark
+                    ? AppColors_1.AppColors.primaryLight
+                    : AppColors_1.AppColors.grayBackground,
+            }}>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.purple,
+                letterSpacing: 0.4,
+                textTransform: 'uppercase',
+            }}>
+                  {jsonContent
+                ? t('console.jsonTitle')
+                : t('console.messageTitle')}
+                </react_native_1.Text>
+                <CopyButton_1.default value={selectedLog.message} label={t('console.logMessage')}/>
+              </react_native_1.View>
+
+              {jsonContent && (<SegmentedTabs_1.default tabs={[
+                    {
+                        key: 'pretty',
+                        label: t('network.jsonViewer.pretty'),
+                        icon: (isActive) => (<NetworkIcons_1.PrettyIcon color={isActive
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                    },
+                    {
+                        key: 'raw',
+                        label: t('network.jsonViewer.raw'),
+                        icon: (isActive) => (<NetworkIcons_1.RawIcon color={isActive
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                    },
+                    {
+                        key: 'table',
+                        label: t('network.jsonViewer.table'),
+                        icon: (isActive) => (<NetworkIcons_1.TableIcon color={isActive
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                    },
+                ]} activeKey={viewMode} onChange={key => setViewMode(key)}/>)}
+            </react_native_1.View>
+
+            {/* Content Body */}
+            <react_native_1.View style={{ padding: 12, flex: 1 }}>
+              {jsonContent ? (<>
+                  {jsonContent.header ? (<react_native_1.View style={{
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.dividerColor,
+                        padding: 10,
+                        marginBottom: 8,
+                    }}>
+                      <react_native_1.Text selectable style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 12,
+                        color: AppColors_1.AppColors.primaryBlack,
+                        lineHeight: 17,
+                    }}>
+                        {jsonContent.header}
+                      </react_native_1.Text>
+                    </react_native_1.View>) : null}
+                  <JsonViewer_1.default data={jsonContent.data} search={detailSearch} wrap forceOpen hideTabs fullHeight mode={viewMode} defaultExpandDepth={jsonContent.data &&
+                    typeof jsonContent.data === 'object' &&
+                    Object.keys(jsonContent.data).length > 10
+                    ? 1
+                    : 2}/>
+                </>) : (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    padding: 10,
+                }}>
+                  <HighlightText_1.default text={selectedLog.message} search={detailSearch} style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 12,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    lineHeight: 18,
+                }} highlightStyle={{
+                    backgroundColor: AppColors_1.AppColors.yellowHighlight,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    borderRadius: 3,
+                    paddingHorizontal: 2,
+                }} detectLinks={true}/>
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+        {/* Tab 2: Individual Arguments */}
+        {activeTab === 'arguments' && selectedLog.rawArgs && (<react_native_1.View style={{ gap: 10 }}>
+            {selectedLog.rawArgs.map((arg, idx) => {
+                const argType = arg === null
+                    ? 'null'
+                    : Array.isArray(arg)
+                        ? `Array[${arg.length}]`
+                        : typeof arg === 'object'
+                            ? `Object{${Object.keys(arg).length}}`
+                            : typeof arg;
+                const isObj = arg != null &&
+                    (typeof arg === 'object' || Array.isArray(arg));
+                const argStr = isObj
+                    ? JSON.stringify(arg, null, 2)
+                    : String(arg);
+                return (<react_native_1.View key={idx} style={[
+                        styles_1.default.sectionContainer,
+                        {
+                            backgroundColor: AppColors_1.AppColors.primaryLight,
+                            borderRadius: 10,
+                            borderWidth: 1,
+                            borderColor: AppColors_1.AppColors.dividerColor,
+                            overflow: 'hidden',
+                        },
+                    ]}>
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderBottomWidth: 1,
+                        borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    }}>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                      <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.purple,
+                    }}>
+                        Arg #{idx + 1}
+                      </react_native_1.Text>
+                      <react_native_1.View style={[
+                        styles_1.default.metaChip,
+                        {
+                            backgroundColor: `${AppColors_1.AppColors.teal600}12`,
+                            borderColor: `${AppColors_1.AppColors.teal600}2B`,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                        },
+                    ]}>
+                        <react_native_1.Text style={[
+                        styles_1.default.metaChipText,
+                        { color: AppColors_1.AppColors.teal600, fontSize: 9 },
+                    ]}>
+                          {argType}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.View>
+                    <CopyButton_1.default value={argStr} label={`Arg #${idx + 1}`}/>
+                  </react_native_1.View>
+
+                  <react_native_1.View style={{ padding: 10 }}>
+                    {isObj ? (<JsonViewer_1.default data={arg} search={detailSearch} wrap forceOpen hideTabs defaultExpandDepth={2}/>) : (<HighlightText_1.default text={argStr} search={detailSearch} style={{
+                            fontFamily: AppFonts_1.AppFonts.interRegular,
+                            fontSize: 12,
+                            color: AppColors_1.AppColors.primaryBlack,
+                            lineHeight: 17,
+                        }} highlightStyle={{
+                            backgroundColor: AppColors_1.AppColors.yellowHighlight,
+                            color: AppColors_1.AppColors.primaryBlack,
+                        }}/>)}
+                  </react_native_1.View>
+                </react_native_1.View>);
+            })}
+          </react_native_1.View>)}
+
+        {/* Tab 3: Call Stack Trace */}
+        {activeTab === 'stack' && (<react_native_1.View style={[
+                styles_1.default.sectionContainer,
+                {
+                    backgroundColor: isDark
+                        ? `${AppColors_1.AppColors.purple}12`
+                        : AppColors_1.AppColors.purpleShade50,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    borderRadius: 12,
+                    overflow: 'hidden',
+                },
+            ]}>
+            {/* Section Header with Mode Switch */}
+            <react_native_1.View style={{
+                flexDirection: 'column',
+                gap: 8,
+                paddingHorizontal: 12,
+                paddingVertical: 10,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
+                backgroundColor: isDark
+                    ? AppColors_1.AppColors.primaryLight
+                    : AppColors_1.AppColors.grayBackground,
+            }}>
+              <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.purple,
+                textTransform: 'uppercase',
+                letterSpacing: 0.4,
+            }}>
+                  {stackSource === 'error' ? 'Error Exception Stack' : 'Call Stack'} ({parsedStackFrames.length} frames)
+                </react_native_1.Text>
+                <CopyButton_1.default value={activeStackString} label="Full Stack Trace"/>
+              </react_native_1.View>
+
+              {/* Source Switcher if Error Stack exists */}
+              {selectedLog.errorStack && (<SegmentedTabs_1.default tabs={[
+                    {
+                        key: 'caller',
+                        label: 'Call Origin Stack',
+                    },
+                    {
+                        key: 'error',
+                        label: 'Error Thrown Stack',
+                    },
+                ]} activeKey={stackSource} onChange={key => setStackSource(key)}/>)}
+
+              {/* Structured vs Raw View Mode Tabs */}
+              <SegmentedTabs_1.default tabs={[
+                {
+                    key: 'structured',
+                    label: 'Structured Cards',
+                    icon: (isActive) => (<NetworkIcons_1.LayersIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                },
+                {
+                    key: 'raw',
+                    label: 'Raw Trace',
+                    icon: (isActive) => (<NetworkIcons_1.RawIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak} size={12}/>),
+                },
+            ]} activeKey={stackViewMode} onChange={key => setStackViewMode(key)}/>
+            </react_native_1.View>
+
+            {/* Stack Content: Structured Cards or Raw Full Trace */}
+            {stackViewMode === 'structured' ? (<react_native_1.View style={{ padding: 12, gap: 10 }}>
+                {parsedStackFrames.length > 0 ? (parsedStackFrames.map((frame, frameIdx) => {
+                    const isTopFrame = frameIdx === 0;
+                    return (<react_native_1.View key={frameIdx} style={{
+                            backgroundColor: isTopFrame
+                                ? `${AppColors_1.AppColors.brandPurple}0A`
+                                : AppColors_1.AppColors.primaryLight,
+                            borderRadius: 8,
+                            borderWidth: 1,
+                            borderColor: isTopFrame
+                                ? `${AppColors_1.AppColors.brandPurple}30`
+                                : AppColors_1.AppColors.dividerColor,
+                            padding: 10,
+                            gap: 5,
+                        }}>
+                        {/* Frame Header Row */}
+                        <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: 6,
+                        }}>
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1 }}>
+                            <react_native_1.View style={{
+                            backgroundColor: isTopFrame
+                                ? AppColors_1.AppColors.brandPurple
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                            borderRadius: 4,
+                            paddingHorizontal: 5,
+                            paddingVertical: 1.5,
+                        }}>
+                              <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 9,
+                            color: isTopFrame
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayTextStrong,
+                        }}>
+                                #{frameIdx + 1}
+                                {isTopFrame ? ' ORIGIN' : ''}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+
+                            <HighlightText_1.default text={frame.functionName !== '<anonymous>' ? `${frame.functionName}()` : '<anonymous>'} search={detailSearch} style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 12,
+                            color: isTopFrame
+                                ? AppColors_1.AppColors.primaryBlack
+                                : AppColors_1.AppColors.grayTextStrong,
+                        }} highlightStyle={{
+                            backgroundColor: AppColors_1.AppColors.yellowHighlight,
+                            color: AppColors_1.AppColors.primaryBlack,
+                        }}/>
+                          </react_native_1.View>
+
+                          {frame.lineNumber && (<react_native_1.View style={{
+                                backgroundColor: `${AppColors_1.AppColors.teal600}15`,
+                                borderColor: `${AppColors_1.AppColors.teal600}30`,
+                                borderWidth: 1,
+                                borderRadius: 4,
+                                paddingHorizontal: 6,
+                                paddingVertical: 1.5,
+                            }}>
+                              <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors_1.AppColors.teal600,
+                            }}>
+                                L{frame.lineNumber}
+                                {frame.columnNumber ? `:C${frame.columnNumber}` : ''}
+                              </react_native_1.Text>
+                            </react_native_1.View>)}
+                        </react_native_1.View>
+
+                        {/* File Path Row */}
+                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                          {frame.fileExt && frame.fileExt !== 'other' && (<react_native_1.View style={{
+                                backgroundColor: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
+                                    ? `${AppColors_1.AppColors.brandPurple}18`
+                                    : `${AppColors_1.AppColors.teal600}18`,
+                                borderRadius: 3,
+                                paddingHorizontal: 4,
+                                paddingVertical: 1,
+                            }}>
+                              <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8.5,
+                                color: frame.fileExt === 'tsx' || frame.fileExt === 'ts'
+                                    ? AppColors_1.AppColors.brandPurple
+                                    : AppColors_1.AppColors.teal600,
+                            }}>
+                                {frame.fileExt.toUpperCase()}
+                              </react_native_1.Text>
+                            </react_native_1.View>)}
+                          <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            fontSize: 10.5,
+                            color: isTopFrame
+                                ? AppColors_1.AppColors.brandPurple
+                                : AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                            📄 {frame.fileName}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+
+                        {/* Full path */}
+                        {frame.fullPath && frame.fullPath !== frame.fileName && (<react_native_1.Text selectable style={{
+                                fontFamily: AppFonts_1.AppFonts.interRegular,
+                                fontSize: 9.5,
+                                color: AppColors_1.AppColors.grayTextWeak,
+                                lineHeight: 14,
+                            }} numberOfLines={2}>
+                            {frame.fullPath}
+                          </react_native_1.Text>)}
+                      </react_native_1.View>);
+                })) : (<react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11.5,
+                        color: AppColors_1.AppColors.grayTextWeak,
+                        textAlign: 'center',
+                        paddingVertical: 16,
+                    }}>
+                    No call stack trace available for this log.
+                  </react_native_1.Text>)}
+              </react_native_1.View>) : (
+            /* Raw Full Trace Monospace Block */
+            <react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    padding: 12,
+                }}>
+                {activeStackString.split('\n').filter(l => l.trim().length > 0).map((line, lineIdx) => (<react_native_1.View key={lineIdx} style={{
+                        flexDirection: 'row',
+                        alignItems: 'flex-start',
+                        paddingVertical: 2,
+                    }}>
+                    <react_native_1.Text style={{
+                        width: 28,
+                        textAlign: 'right',
+                        paddingRight: 8,
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.grayTextWeak,
+                        lineHeight: 17,
+                    }}>
+                      {lineIdx + 1}
+                    </react_native_1.Text>
+                    <HighlightText_1.default text={line.trim()} search={detailSearch} style={{
+                        flex: 1,
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 12,
+                        color: AppColors_1.AppColors.primaryBlack,
+                        lineHeight: 17,
+                    }} highlightStyle={{
+                        backgroundColor: AppColors_1.AppColors.yellowHighlight,
+                        color: AppColors_1.AppColors.primaryBlack,
+                    }}/>
+                  </react_native_1.View>))}
+              </react_native_1.View>)}
+          </react_native_1.View>)}
+
+        {/* Tab 4: Structured Metadata */}
+        {activeTab === 'metadata' && (<react_native_1.View style={[
+                styles_1.default.sectionContainer,
+                {
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.dividerColor,
+                    overflow: 'hidden',
+                },
+            ]}>
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingHorizontal: 12,
+                paddingVertical: 9,
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
+            }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors_1.AppColors.purple,
+                textTransform: 'uppercase',
+                letterSpacing: 0.4,
+            }}>
+                Log Properties
+              </react_native_1.Text>
+              <CopyButton_1.default value={JSON.stringify({
+                id: selectedLog.id + 1,
+                type: selectedLog.type,
+                sourceMethod: selectedLog.sourceMethod || 'log',
+                timestamp: selectedLog.timestamp,
+                dateTime: (0, helpers_1.formatDateTime)(selectedLog.timestamp),
+                caller: selectedLog.caller,
+                triggerFile: originFrame?.fileName,
+                triggerLine: originFrame?.lineNumber,
+                triggerFunction: originFrame?.functionName,
+                charCount: selectedLog.message.length,
+                size: (0, helpers_1.getSize)(selectedLog.message),
+                duplicates: selectedLog.duplicateCount || 1,
+            }, null, 2)} label="Metadata JSON"/>
+            </react_native_1.View>
+
+            <react_native_1.View style={{ paddingHorizontal: 12, paddingVertical: 4 }}>
+              {[
+                { label: 'Log ID', value: `#${selectedLog.id + 1}` },
+                { label: 'Level', value: selectedLog.type.toUpperCase() },
+                {
+                    label: 'Source Method',
+                    value: `console.${selectedLog.sourceMethod || selectedLog.type || 'log'}`,
+                },
+                {
+                    label: 'Triggered At',
+                    value: `${(0, helpers_1.formatDateTime)(selectedLog.timestamp)} (${getRelativeTime(selectedLog.timestamp)})`,
+                },
+                { label: 'Timestamp (ms)', value: String(selectedLog.timestamp) },
+                {
+                    label: 'Trigger File',
+                    value: originFrame?.fileName || 'Unknown',
+                },
+                ...(originFrame?.lineNumber
+                    ? [
+                        {
+                            label: 'Trigger Location',
+                            value: `Line ${originFrame.lineNumber}, Col ${originFrame.columnNumber || 0}`,
+                        },
+                    ]
+                    : []),
+                ...(originFrame?.functionName && originFrame.functionName !== '<anonymous>'
+                    ? [
+                        {
+                            label: 'Trigger Function',
+                            value: `${originFrame.functionName}()`,
+                        },
+                    ]
+                    : []),
+                {
+                    label: 'Full Location',
+                    value: selectedLog.caller || 'Unknown',
+                },
+                {
+                    label: 'Character Length',
+                    value: `${selectedLog.message.length} chars`,
+                },
+                {
+                    label: 'Approx. Size',
+                    value: (0, helpers_1.getSize)(selectedLog.message),
+                },
+                {
+                    label: 'Duplicate Count',
+                    value: String(selectedLog.duplicateCount || 1),
+                },
+                ...(hasMultipleArgs
+                    ? [
+                        {
+                            label: 'Arguments Count',
+                            value: `${selectedLog.rawArgs?.length} arguments`,
+                        },
+                    ]
+                    : []),
+            ].map((row, rIdx, arr) => (<react_native_1.View key={rIdx} style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    paddingVertical: 8,
+                    borderBottomWidth: rIdx < arr.length - 1 ? 1 : 0,
+                    borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
+                }}>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 11.5,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                }}>
+                    {row.label}
+                  </react_native_1.Text>
+                  <react_native_1.Text selectable style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11.5,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    maxWidth: '60%',
+                    textAlign: 'right',
+                }} numberOfLines={2}>
+                    {row.value}
+                  </react_native_1.Text>
+                </react_native_1.View>))}
+            </react_native_1.View>
+          </react_native_1.View>)}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+};
+const detailStyles = react_native_1.StyleSheet.create({
+    metaDot: {
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        opacity: 0.7,
+    },
+    tabsHeaderWrap: {
+        paddingHorizontal: 12,
+        paddingTop: 8,
+        paddingBottom: 4,
+    },
+});
+exports.default = LogDetail;