react-native-inapp-inspector 2.2.2 → 2.2.4

package/src/components/Inspector/CrashDetail.tsx

@@ -0,0 +1,941 @@
+import React, {useMemo, useState} from 'react';
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {useTranslation} from '../../i18n';
+import {useInspector} from './InspectorContext';
+import TouchableScale from '../TouchableScale';
+import SegmentedTabs from '../SegmentedTabs';
+import HighlightText from '../HighlightText';
+import JsonViewer from '../JsonViewer';
+import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
+import {
+  ParsedStackFrame,
+} from '../../types';
+import {
+  CrashDetailSubTab,
+} from '../../types/enums';
+import {
+  exportCrashReport,
+  parseCrashStackTrace,
+} from '../../customHooks/crashHandler';
+import {copyToClipboard} from '../../helpers';
+import {
+  SearchIcon,
+  ClearIcon,
+  CopyIcon,
+  TerminalIcon,
+  LayersIcon,
+  ClockIcon,
+  CircleCheckIcon,
+  GlobeIcon,
+  AppleIcon,
+  AndroidIcon,
+  StackTraceIcon,
+  DiagnosticsIcon,
+  TrailIcon,
+  RawJsonIcon,
+  AppFramesIcon,
+  AllFramesIcon,
+} from '../NetworkIcons';
+
+
+
+const CrashDetail: React.FC = React.memo(() => {
+  const {t} = useTranslation();
+  const {selectedCrash} = useInspector();
+
+  const [activeSubTab, setActiveSubTab] = useState<CrashDetailSubTab>('stack');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [stackFilter, setStackFilter] = useState<'app' | 'all'>('app');
+  const [copiedSuccess, setCopiedSuccess] = useState(false);
+  const [copiedFrameIndex, setCopiedFrameIndex] = useState<number | null>(null);
+
+  if (!selectedCrash) return null;
+
+  const stackFrames: ParsedStackFrame[] = useMemo(() => {
+    if (selectedCrash.parsedStack && selectedCrash.parsedStack.length > 0) {
+      return selectedCrash.parsedStack;
+    }
+    if (selectedCrash.stack) {
+      return parseCrashStackTrace(selectedCrash.stack);
+    }
+    return [];
+  }, [selectedCrash]);
+
+  // Strip keys holding explicit undefined values (e.g. componentStack) so the
+  // Raw JSON tab never renders a literal "undefined".
+  const rawCrashData = useMemo(() => {
+    try {
+      return JSON.parse(JSON.stringify(selectedCrash));
+    } catch {
+      return selectedCrash;
+    }
+  }, [selectedCrash]);
+
+  const appStackFrames = useMemo(() => {
+    return stackFrames.filter(f => f.isAppCode);
+  }, [stackFrames]);
+
+  const displayedFrames = useMemo(() => {
+    if (stackFilter === 'app' && appStackFrames.length > 0) {
+      return appStackFrames;
+    }
+    return stackFrames;
+  }, [stackFilter, appStackFrames, stackFrames]);
+
+  const originFrame = useMemo(() => {
+    return appStackFrames[0] || stackFrames[0] || null;
+  }, [appStackFrames, stackFrames]);
+
+  const handleCopyReport = () => {
+    const report = exportCrashReport(selectedCrash);
+    copyToClipboard(report, 'Crash Report');
+    setCopiedSuccess(true);
+    setTimeout(() => setCopiedSuccess(false), 2000);
+  };
+
+  const handleCopyFrame = (frame: ParsedStackFrame, index: number) => {
+    const text = frame.raw || `${frame.method}@${frame.file}:${frame.lineNumber}:${frame.column}`;
+    copyToClipboard(text, 'Stack Frame');
+    setCopiedFrameIndex(index);
+    setTimeout(() => setCopiedFrameIndex(null), 1500);
+  };
+
+  const tabsConfig = [
+    {
+      key: 'stack',
+      label: t('crash.tabStack', {count: stackFrames.length}),
+      icon: (isActive: boolean) => (
+        <StackTraceIcon
+          size={12}
+          color={isActive ? AppColors.white : AppColors.grayText}
+        />
+      ),
+    },
+    {
+      key: 'diagnostics',
+      label: t('crash.tabDiagnostics'),
+      icon: (isActive: boolean) => (
+        <DiagnosticsIcon
+          size={12}
+          color={isActive ? AppColors.white : AppColors.grayText}
+        />
+      ),
+    },
+    {
+      key: 'breadcrumbs',
+      label: t('crash.tabTrail', {count: selectedCrash.breadcrumbs?.length || 0}),
+      icon: (isActive: boolean) => (
+        <TrailIcon
+          size={12}
+          color={isActive ? AppColors.white : AppColors.grayText}
+        />
+      ),
+    },
+    {
+      key: 'raw',
+      label: t('crash.tabRawJson'),
+      icon: (isActive: boolean) => (
+        <RawJsonIcon
+          size={12}
+          color={isActive ? AppColors.white : AppColors.grayText}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <View style={{flex: 1, backgroundColor: AppColors.grayBackground}}>
+      {/* ─── Top Info Bar (Similar to NetworkDetail / LogDetail) ─── */}
+      <View style={{paddingHorizontal: 8, paddingTop: 6}}>
+        <View style={localStyles.infoBar}>
+          {/* Top Status Badges Row */}
+          <View style={localStyles.badgeRow}>
+            {/* Fatal / Non-fatal Pill */}
+            <View
+              style={[
+                localStyles.pillBadge,
+                {
+                  backgroundColor: selectedCrash.isFatal
+                    ? AppColors.errorCardBg
+                    : AppColors.amberBg,
+                  borderColor: selectedCrash.isFatal
+                    ? AppColors.errorBorder
+                    : AppColors.amberWarmBorder,
+                },
+              ]}>
+              <View
+                style={[
+                  localStyles.statusDot,
+                  {
+                    backgroundColor: selectedCrash.isFatal
+                      ? AppColors.red600
+                      : AppColors.amber600,
+                  },
+                ]}
+              />
+              <Text
+                style={[
+                  localStyles.pillBadgeText,
+                  {
+                    color: selectedCrash.isFatal
+                      ? AppColors.redErrorText
+                      : AppColors.amberWarmText,
+                  },
+                ]}>
+                {selectedCrash.isFatal ? t('crash.fatalCrash') : t('crash.handledException')}
+              </Text>
+            </View>
+
+            {/* Type Pill */}
+            <View
+              style={[
+                localStyles.pillBadge,
+                {
+                  backgroundColor: AppColors.violetSoftBg,
+                  borderColor: AppColors.violetSoftBorder,
+                },
+              ]}>
+              <Text style={[localStyles.pillBadgeText, {color: AppColors.purple700}]}>
+                {selectedCrash.type.toUpperCase()}
+              </Text>
+            </View>
+
+            <View style={{flex: 1}} />
+
+            {/* Copy Report Action */}
+            <TouchableScale
+              onPress={handleCopyReport}
+              hitSlop={10}
+              style={[
+                localStyles.actionButton,
+                copiedSuccess && {backgroundColor: AppColors.mintGreenBg, borderColor: AppColors.mintGreenBorder},
+              ]}>
+              {copiedSuccess ? (
+                <CircleCheckIcon color={AppColors.mintGreenText} size={12} />
+              ) : (
+                <CopyIcon color={AppColors.purple} size={12} />
+              )}
+              <Text
+                style={[
+                  localStyles.actionButtonText,
+                  copiedSuccess && {color: AppColors.mintGreenText},
+                ]}>
+                {copiedSuccess ? t('crash.copied') : t('crash.copyReport')}
+              </Text>
+            </TouchableScale>
+          </View>
+
+          {/* Crash Title / Message */}
+          <Text style={localStyles.titleText}>
+            {selectedCrash.message}
+          </Text>
+
+          {/* Metadata Row */}
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={localStyles.metaRow}>
+            {originFrame && (
+              <View style={localStyles.metaChip}>
+                <TerminalIcon color={AppColors.grayText} size={11} />
+                <Text style={localStyles.metaChipText} numberOfLines={2}>
+                  {originFrame.file}:{originFrame.lineNumber}
+                </Text>
+              </View>
+            )}
+
+            <View style={localStyles.metaChip}>
+              <ClockIcon color={AppColors.grayText} size={11} />
+              <Text style={localStyles.metaChipText}>
+                {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+              </Text>
+            </View>
+
+            {selectedCrash.deviceInfo?.platform && (
+              <View style={localStyles.metaChip}>
+                {selectedCrash.deviceInfo.platform === 'ios' ? (
+                  <AppleIcon color={AppColors.grayText} size={11} />
+                ) : (
+                  <AndroidIcon color={AppColors.grayText} size={11} />
+                )}
+                <Text style={localStyles.metaChipText}>
+                  {selectedCrash.deviceInfo.platform.toUpperCase()} {selectedCrash.deviceInfo.osVersion}
+                </Text>
+              </View>
+            )}
+          </ScrollView>
+        </View>
+      </View>
+
+      {/* ─── Segmented Sub Tabs ─── */}
+      <View style={{paddingHorizontal: 8, paddingTop: 6, paddingBottom: 4}}>
+        <SegmentedTabs
+          tabs={tabsConfig}
+          activeKey={activeSubTab}
+          onChange={tab => setActiveSubTab(tab as CrashDetailSubTab)}
+        />
+      </View>
+
+      {/* ─── Search Bar (for Stack & Raw tabs) ─── */}
+      {(activeSubTab === 'stack' || activeSubTab === 'raw') && (
+        <View style={{paddingHorizontal: 12, paddingBottom: 6}}>
+          <View style={localStyles.searchContainer}>
+            <SearchIcon color={AppColors.grayText} size={14} />
+            <TextInput
+              style={localStyles.searchInput}
+              placeholder={t('crash.searchDetailPlaceholder')}
+              placeholderTextColor={AppColors.grayTextWeak}
+              value={searchQuery}
+              onChangeText={setSearchQuery}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+            {searchQuery.length > 0 && (
+              <TouchableScale onPress={() => setSearchQuery('')} hitSlop={10}>
+                <ClearIcon color={AppColors.grayText} size={13} />
+              </TouchableScale>
+            )}
+          </View>
+        </View>
+      )}
+
+      {/* ─── Tab Content ScrollView ─── */}
+      <ScrollView
+        style={{flex: 1}}
+        contentContainerStyle={{padding: 12, paddingBottom: 40, gap: 12}}>
+        {/* 1. STACK TRACE TAB */}
+        {activeSubTab === 'stack' && (
+          <View style={{gap: 10}}>
+            {/* Filter Chips (App Code vs All Frames) */}
+            <View style={localStyles.filterChipsRow}>
+              <TouchableScale
+                onPress={() => setStackFilter('app')}
+                style={[
+                  localStyles.filterChip,
+                  stackFilter === 'app' && localStyles.filterChipActive,
+                ]}>
+                <AppFramesIcon
+                  size={12}
+                  color={
+                    stackFilter === 'app'
+                      ? AppColors.white
+                      : AppColors.purple
+                  }
+                />
+                <Text
+                  style={[
+                    localStyles.filterChipText,
+                    stackFilter === 'app' && localStyles.filterChipTextActive,
+                  ]}>
+                  {t('crash.appFrames', {count: appStackFrames.length})}
+                </Text>
+              </TouchableScale>
+
+              <TouchableScale
+                onPress={() => setStackFilter('all')}
+                style={[
+                  localStyles.filterChip,
+                  stackFilter === 'all' && localStyles.filterChipActive,
+                ]}>
+                <AllFramesIcon
+                  size={12}
+                  color={
+                    stackFilter === 'all'
+                      ? AppColors.white
+                      : AppColors.purple
+                  }
+                />
+                <Text
+                  style={[
+                    localStyles.filterChipText,
+                    stackFilter === 'all' && localStyles.filterChipTextActive,
+                  ]}>
+                  {t('crash.allFrames', {count: stackFrames.length})}
+                </Text>
+              </TouchableScale>
+            </View>
+
+            {/* Frames List */}
+            {displayedFrames.length > 0 ? (
+              displayedFrames
+                .filter(frame => {
+                  if (!searchQuery.trim()) return true;
+                  const q = searchQuery.toLowerCase();
+                  return (
+                    frame.method.toLowerCase().includes(q) ||
+                    frame.file.toLowerCase().includes(q)
+                  );
+                })
+                .map((frame, index) => {
+                  const isOrigin = index === 0 && frame.isAppCode;
+                  return (
+                    <View
+                      key={`frame_${index}`}
+                      style={[
+                        localStyles.frameCard,
+                        isOrigin && localStyles.originFrameCard,
+                      ]}>
+                      <View style={localStyles.frameCardHeader}>
+                        <View style={localStyles.frameIndexBadge}>
+                          <Text style={localStyles.frameIndexBadgeText}>
+                            #{index + 1}
+                          </Text>
+                        </View>
+                        <View
+                          style={[
+                            localStyles.frameTypeBadge,
+                            frame.isAppCode
+                              ? {backgroundColor: '#ECFDF5', borderColor: '#A7F3D0'}
+                              : {backgroundColor: '#F1F5F9', borderColor: '#E2E8F0'},
+                          ]}>
+                          <Text
+                            style={[
+                              localStyles.frameTypeBadgeText,
+                              frame.isAppCode
+                                ? {color: '#059669'}
+                                : {color: '#64748B'},
+                            ]}>
+                            {frame.isAppCode ? t('crash.frameApp') : t('crash.frameLib')}
+                          </Text>
+                        </View>
+
+                        <Text style={localStyles.frameMethodText} numberOfLines={1}>
+                          <HighlightText
+                            text={frame.method || t('crash.anonymous')}
+                            highlight={searchQuery}
+                          />
+                        </Text>
+
+                        <TouchableScale
+                          onPress={() => handleCopyFrame(frame, index)}
+                          hitSlop={8}
+                          style={localStyles.frameCopyBtn}>
+                          {copiedFrameIndex === index ? (
+                            <CircleCheckIcon color={AppColors.greenColor} size={12} />
+                          ) : (
+                            <CopyIcon color={AppColors.grayText} size={12} />
+                          )}
+                          <Text style={localStyles.frameCopyBtnText}>
+                            {copiedFrameIndex === index
+                              ? t('crash.frameCopied')
+                              : t('crash.frameCopy')}
+                          </Text>
+                        </TouchableScale>
+                      </View>
+
+                      <View style={localStyles.frameLocationRow}>
+                        <Text style={localStyles.frameFileText} numberOfLines={1}>
+                          <HighlightText
+                            text={frame.file}
+                            highlight={searchQuery}
+                          />
+                        </Text>
+                        <Text style={localStyles.frameLineText}>
+                          :{frame.lineNumber}
+                          {frame.column ? `:${frame.column}` : ''}
+                        </Text>
+                      </View>
+
+                      {frame.raw && (
+                        <Text
+                          style={localStyles.frameRawText}
+                          numberOfLines={2}>
+                          {frame.raw}
+                        </Text>
+                      )}
+                    </View>
+                  );
+                })
+            ) : (
+              <View style={localStyles.emptyContainer}>
+                <Text style={localStyles.emptyText}>
+                  {selectedCrash.stack
+                    ? selectedCrash.stack
+                    : t('crash.noStackTrace')}
+                </Text>
+              </View>
+            )}
+
+            {selectedCrash.componentStack && (
+              <View style={localStyles.sectionCard}>
+                <View style={localStyles.sectionCardHeader}>
+                  <LayersIcon color={AppColors.purple} size={14} />
+                  <Text style={localStyles.sectionCardTitle}>
+                    {t('crash.componentHierarchy')}
+                  </Text>
+                </View>
+                <Text style={localStyles.componentStackText}>
+                  {selectedCrash.componentStack}
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+
+        {/* 2. DIAGNOSTICS TAB */}
+        {activeSubTab === 'diagnostics' && (
+          <View style={{gap: 12}}>
+            {/* Device & OS Diagnostics Card */}
+            <View style={localStyles.sectionCard}>
+              <View style={localStyles.sectionCardHeader}>
+                <GlobeIcon color={AppColors.purple} size={14} />
+                <Text style={localStyles.sectionCardTitle}>{t('crash.deviceEnvironment')}</Text>
+              </View>
+
+              <View style={localStyles.diagGrid}>
+                <View style={localStyles.diagItem}>
+                  <Text style={localStyles.diagLabel}>{t('crash.platform')}</Text>
+                  <Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.platform?.toUpperCase() || Platform.OS.toUpperCase()}
+                  </Text>
+                </View>
+
+                <View style={localStyles.diagItem}>
+                  <Text style={localStyles.diagLabel}>{t('crash.osVersion')}</Text>
+                  <Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.osVersion || String(Platform.Version)}
+                  </Text>
+                </View>
+
+                <View style={localStyles.diagItem}>
+                  <Text style={localStyles.diagLabel}>{t('crash.reactNative')}</Text>
+                  <Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.rnVersion || '0.74+'}
+                  </Text>
+                </View>
+
+                <View style={localStyles.diagItem}>
+                  <Text style={localStyles.diagLabel}>{t('crash.jsEngine')}</Text>
+                  <Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.isHermes ? t('crash.hermesEngine') : t('crash.jsc')}
+                  </Text>
+                </View>
+
+                <View style={localStyles.diagItem}>
+                  <Text style={localStyles.diagLabel}>{t('crash.architecture')}</Text>
+                  <Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.isFabric ? t('crash.fabricNewArch') : t('crash.paperLegacy')}
+                  </Text>
+                </View>
+
+                <View style={localStyles.diagItem}>
+                  <Text style={localStyles.diagLabel}>{t('crash.appState')}</Text>
+                  <Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.appState || 'active'}
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            {/* Memory Metrics Card */}
+            {selectedCrash.memoryInfo && (
+              <View style={localStyles.sectionCard}>
+                <View style={localStyles.sectionCardHeader}>
+                  <LayersIcon color={AppColors.purple} size={14} />
+                  <Text style={localStyles.sectionCardTitle}>{t('crash.jsHeapMemory')}</Text>
+                </View>
+
+                <View style={localStyles.diagGrid}>
+                  <View style={localStyles.diagItem}>
+                    <Text style={localStyles.diagLabel}>{t('crash.usedHeap')}</Text>
+                    <Text style={localStyles.diagValue}>
+                      {selectedCrash.memoryInfo.usedJSHeapSize} MB
+                    </Text>
+                  </View>
+
+                  <View style={localStyles.diagItem}>
+                    <Text style={localStyles.diagLabel}>{t('crash.totalHeap')}</Text>
+                    <Text style={localStyles.diagValue}>
+                      {selectedCrash.memoryInfo.totalJSHeapSize} MB
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            )}
+          </View>
+        )}
+
+        {/* 3. BREADCRUMBS TAB */}
+        {activeSubTab === 'breadcrumbs' && (
+          <View style={{gap: 10}}>
+            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 ? (
+              selectedCrash.breadcrumbs.map((b, idx) => (
+                <View key={`crumb_${idx}`} style={localStyles.breadcrumbCard}>
+                  <View style={localStyles.breadcrumbHeader}>
+                    <View style={localStyles.breadcrumbTag}>
+                      <Text style={localStyles.breadcrumbTagText}>
+                        {b.type.toUpperCase()}
+                      </Text>
+                    </View>
+                    <Text style={localStyles.breadcrumbTime}>
+                      {new Date(b.timestamp).toLocaleTimeString()}
+                    </Text>
+                  </View>
+                  <Text style={localStyles.breadcrumbMessage}>{b.message}</Text>
+                  {b.data && (
+                    <View style={{marginTop: 6}}>
+                      <JsonViewer data={b.data} search="" wrap />
+                    </View>
+                  )}
+                </View>
+              ))
+            ) : (
+              <View style={localStyles.emptyContainer}>
+                <Text style={localStyles.emptyText}>
+                  {t('crash.noBreadcrumbs')}
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+
+        {/* 4. RAW JSON TAB */}
+        {activeSubTab === 'raw' && (
+          <View style={localStyles.rawContainer}>
+            <JsonViewer
+              data={rawCrashData}
+              search={searchQuery}
+              wrap
+            />
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+});
+
+export default CrashDetail;
+
+const localStyles = StyleSheet.create({
+  infoBar: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 12,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: 1},
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 2,
+    gap: 8,
+  },
+  badgeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  pillBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 5,
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  pillBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9.5,
+    letterSpacing: 0.4,
+  },
+  actionButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    backgroundColor: `${AppColors.purple}14`,
+    borderColor: `${AppColors.purple}33`,
+    borderWidth: 1,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  actionButtonText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 10.5,
+    color: AppColors.purple,
+  },
+  titleText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 14,
+    color: AppColors.primaryBlack,
+    lineHeight: 19,
+  },
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 2,
+  },
+  metaChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    backgroundColor: AppColors.grayBackground,
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  metaChipText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 10,
+    color: AppColors.grayText,
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: AppColors.primaryLight,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    height: 36,
+    gap: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontFamily: AppFonts.interRegular,
+    fontSize: 12,
+    color: AppColors.primaryBlack,
+    paddingVertical: 0,
+  },
+  filterChipsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  filterChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 8,
+    backgroundColor: AppColors.primaryLight,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+  },
+  filterChipActive: {
+    backgroundColor: AppColors.purple,
+    borderColor: AppColors.purple,
+  },
+  filterChipText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 11,
+    color: AppColors.grayText,
+  },
+  filterChipTextActive: {
+    fontFamily: AppFonts.interBold,
+    color: AppColors.white,
+  },
+  frameCard: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 8,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    gap: 4,
+  },
+  originFrameCard: {
+    borderColor: '#6EE7B7',
+    backgroundColor: '#F0FDF4',
+  },
+  frameCardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  frameIndexBadge: {
+    minWidth: 24,
+    height: 18,
+    paddingHorizontal: 4,
+    borderRadius: 4,
+    backgroundColor: `${AppColors.purple}14`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  frameIndexBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9,
+    color: AppColors.purple,
+  },
+  frameTypeBadge: {
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+  },
+  frameTypeBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 8.5,
+  },
+  frameMethodText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 12,
+    color: AppColors.primaryBlack,
+    flex: 1,
+  },
+  frameLocationRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  frameFileText: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 11,
+    color: AppColors.grayText,
+    flex: 1,
+  },
+  frameLineText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 11,
+    color: AppColors.purple,
+  },
+  frameCopyBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 5,
+    backgroundColor: AppColors.grayBackground,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  frameCopyBtnText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9,
+    color: AppColors.grayText,
+  },
+  frameRawText: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 9.5,
+    color: AppColors.grayTextWeak,
+    backgroundColor: `${AppColors.primaryBlack}06`,
+    borderRadius: 5,
+    paddingHorizontal: 7,
+    paddingVertical: 4,
+    overflow: 'hidden',
+  },
+  componentStackText: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 11,
+    lineHeight: 16,
+    color: AppColors.grayText,
+    backgroundColor: `${AppColors.primaryBlack}06`,
+    borderRadius: 6,
+    padding: 10,
+  },
+  sectionCard: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 10,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    gap: 10,
+  },
+  sectionCardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingBottom: 6,
+    borderBottomWidth: 1,
+    borderBottomColor: AppColors.dividerColor,
+  },
+  sectionCardTitle: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 12.5,
+    color: AppColors.primaryBlack,
+  },
+  diagGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    rowGap: 8,
+    columnGap: 12,
+  },
+  diagItem: {
+    width: '47%',
+    gap: 2,
+  },
+  diagLabel: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 10,
+    color: AppColors.grayTextWeak,
+  },
+  diagValue: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 11.5,
+    color: AppColors.primaryBlack,
+  },
+  breadcrumbCard: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 8,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    gap: 4,
+  },
+  breadcrumbHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  breadcrumbTag: {
+    backgroundColor: `${AppColors.purple}14`,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  breadcrumbTagText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9,
+    color: AppColors.purple,
+  },
+  breadcrumbTime: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 10,
+    color: AppColors.grayTextWeak,
+  },
+  breadcrumbMessage: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 11.5,
+    color: AppColors.primaryBlack,
+    marginTop: 2,
+  },
+  rawContainer: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 10,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+  },
+  emptyContainer: {
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+  },
+  emptyText: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 11,
+    color: AppColors.grayText,
+    textAlign: 'center',
+  },
+});