react-native-debug-toolkit 3.3.8 → 3.5.0

package/lib/module/features/sessionHistory/SessionHistoryTab.js

@@ -0,0 +1,1039 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, Text, StyleSheet, Pressable, ScrollView, ActivityIndicator } from 'react-native';
+import { Colors, getMethodColor } from '../../ui/theme/colors';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import { safeStringify } from '../../utils/safeStringify';
+import { fmt } from '../../utils/copyToComputer';
+import { LEVEL_COLORS, LEVEL_ICONS } from '../../constants/logLevels';
+
+// ── Types ──────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// ── Constants ──────────────────────────────────────────────────────────
+
+const FEATURE_LABELS = {
+  console_logs: 'Console',
+  network_logs: 'Network',
+  track_logs: 'Track'
+};
+const FEATURE_COLORS = {
+  console_logs: Colors.info,
+  network_logs: Colors.success,
+  track_logs: Colors.purple
+};
+const FEATURE_KEYS = Object.keys(FEATURE_LABELS);
+
+// ── Helpers ────────────────────────────────────────────────────────────
+
+function relativeTime(ts) {
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'Just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return 'Yesterday';
+  if (days < 7) return `${days}d ago`;
+  return new Date(ts).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric'
+  });
+}
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+function formatFullDate(ts) {
+  const d = new Date(ts);
+  const now = new Date();
+  const isToday = d.toDateString() === now.toDateString();
+  const time = d.toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+  if (isToday) return `Today ${time}`;
+  return d.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric'
+  }) + ' ' + time;
+}
+function totalCounts(counts) {
+  return (counts.console_logs ?? 0) + (counts.network_logs ?? 0) + (counts.track_logs ?? 0);
+}
+function totalLogs(logs) {
+  return Object.values(logs).reduce((sum, arr) => sum + arr.length, 0);
+}
+function shortId(id) {
+  return id.slice(-6).toUpperCase();
+}
+function flattenLogs(logs, filter) {
+  const keys = filter === 'all' ? ['console_logs', 'network_logs', 'track_logs'] : [filter];
+  const entries = [];
+  for (const key of keys) {
+    const items = logs[key] ?? [];
+    items.forEach((raw, i) => {
+      const e = raw;
+      entries.push({
+        id: `${key}-${i}`,
+        type: key,
+        timestamp: e.timestamp ?? 0,
+        raw
+      });
+    });
+  }
+  entries.sort((a, b) => b.timestamp - a.timestamp);
+  return entries;
+}
+function toRecord(entry) {
+  return entry.raw;
+}
+function shortenUrl(url) {
+  try {
+    const u = new URL(url);
+    return u.pathname + u.search;
+  } catch {
+    return url;
+  }
+}
+
+// ── Main Tab ───────────────────────────────────────────────────────────
+
+export const SessionHistoryTab = /*#__PURE__*/React.memo(({
+  snapshot,
+  feature
+}) => {
+  const {
+    sessions,
+    currentSessionId,
+    loading,
+    selectedSession,
+    logCounts
+  } = snapshot;
+  const handleSelectSession = useCallback(session => {
+    if (session.id === currentSessionId) return;
+    feature.loadSession(session.id);
+  }, [feature, currentSessionId]);
+  const handleBack = useCallback(() => {
+    feature.loadSession(null);
+  }, [feature]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(View, {
+      style: s.center,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: Colors.primary
+      })
+    });
+  }
+  if (selectedSession) {
+    return /*#__PURE__*/_jsx(SessionDetail, {
+      logs: selectedSession.logs,
+      sessionId: selectedSession.sessionId,
+      onBack: handleBack
+    });
+  }
+  const previousSessions = sessions.filter(s => s.id !== currentSessionId);
+  const currentSession = sessions.find(s => s.id === currentSessionId);
+  if (previousSessions.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: s.center,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: s.emptyClock,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.emptyClockText,
+          children: "\u23F1"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: s.emptyTitle,
+        children: "No session history"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: s.emptySub,
+        children: "Previous sessions will appear here after you restart the app."
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: s.container,
+    contentContainerStyle: s.scrollContent,
+    children: [currentSession && /*#__PURE__*/_jsxs(View, {
+      style: s.currentCard,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.currentRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: s.pulseDot
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.currentLabel,
+          children: "CURRENT"
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: s.currentTime,
+        children: formatFullDate(currentSession.startedAt)
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: s.timelineSection,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: s.timelineHeader,
+        children: "PREVIOUS SESSIONS"
+      }), previousSessions.map((session, idx) => {
+        const counts = logCounts[session.id];
+        const total = counts ? totalCounts(counts) : 0;
+        return /*#__PURE__*/_jsxs(Pressable, {
+          style: s.timelineRow,
+          onPress: () => handleSelectSession(session),
+          android_ripple: {
+            color: 'rgba(0,0,0,0.04)'
+          },
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: s.railCol,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: s.railDot
+            }), idx < previousSessions.length - 1 && /*#__PURE__*/_jsx(View, {
+              style: s.railLine
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: s.historyCard,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: s.cardTop,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: s.cardTime,
+                children: formatTime(session.startedAt)
+              }), /*#__PURE__*/_jsx(Text, {
+                style: s.cardRelative,
+                children: relativeTime(session.startedAt)
+              })]
+            }), counts && total > 0 ? /*#__PURE__*/_jsx(View, {
+              style: s.pillRow,
+              children: FEATURE_KEYS.map(key => {
+                const c = counts[key] ?? 0;
+                if (c === 0) return null;
+                return /*#__PURE__*/_jsxs(View, {
+                  style: [s.pill, {
+                    backgroundColor: FEATURE_COLORS[key] + '18'
+                  }],
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: [s.pillDot, {
+                      backgroundColor: FEATURE_COLORS[key]
+                    }]
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    style: [s.pillText, {
+                      color: FEATURE_COLORS[key]
+                    }],
+                    children: [c, " ", FEATURE_LABELS[key]]
+                  })]
+                }, key);
+              })
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: s.cardEmpty,
+              children: "No logs recorded"
+            }), /*#__PURE__*/_jsxs(View, {
+              style: s.cardFooter,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: s.cardId,
+                children: ["#", shortId(session.id)]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: s.cardChevron,
+                children: "\u203A"
+              })]
+            })]
+          })]
+        }, session.id);
+      })]
+    })]
+  });
+});
+
+// ── Session Detail (uses LogListScreen for tap-to-detail) ──────────────
+
+const SessionDetail = /*#__PURE__*/React.memo(({
+  logs,
+  sessionId,
+  onBack
+}) => {
+  const [filter, setFilter] = useState('all');
+  const total = totalLogs(logs);
+  const flatEntries = useMemo(() => flattenLogs(logs, filter), [logs, filter]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: s.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: s.sessionHeader,
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        onPress: onBack,
+        hitSlop: 12,
+        style: s.headerBackBtn,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.headerArrow,
+          children: "\u2039"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.headerBackLabel,
+          children: "Sessions"
+        })]
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: s.headerMeta,
+        children: ["#", shortId(sessionId)]
+      })]
+    }), /*#__PURE__*/_jsx(LogListScreen, {
+      data: flatEntries,
+      reversed: false,
+      emptyText: filter === 'all' ? 'No logs in this session' : `No ${FEATURE_LABELS[filter]} logs`,
+      renderListHeader: () => /*#__PURE__*/_jsxs(View, {
+        style: s.filterBar,
+        children: [/*#__PURE__*/_jsx(FilterChip, {
+          label: "All",
+          count: total,
+          active: filter === 'all',
+          onPress: () => setFilter('all'),
+          color: Colors.text
+        }), FEATURE_KEYS.map(key => {
+          const c = (logs[key] ?? []).length;
+          return /*#__PURE__*/_jsx(FilterChip, {
+            label: FEATURE_LABELS[key],
+            count: c,
+            active: filter === key,
+            onPress: () => setFilter(key),
+            color: FEATURE_COLORS[key]
+          }, key);
+        })]
+      }),
+      renderRow: item => /*#__PURE__*/_jsx(LogRow, {
+        entry: item
+      }),
+      renderDetailHeader: item => /*#__PURE__*/_jsx(LogDetailHeader, {
+        entry: item
+      }),
+      renderDetailBody: item => /*#__PURE__*/_jsx(LogDetailBody, {
+        entry: item
+      })
+    })]
+  });
+});
+
+// ── Filter Chips ───────────────────────────────────────────────────────
+
+const FilterChip = /*#__PURE__*/React.memo(({
+  label,
+  count,
+  active,
+  onPress,
+  color
+}) => /*#__PURE__*/_jsx(Pressable, {
+  onPress: onPress,
+  style: [s.chip, active && {
+    backgroundColor: color
+  }],
+  hitSlop: 4,
+  children: /*#__PURE__*/_jsxs(Text, {
+    style: [s.chipLabel, active && s.chipLabelActive],
+    children: [label, " ", /*#__PURE__*/_jsx(Text, {
+      style: [s.chipCount, active && s.chipCountActive],
+      children: count
+    })]
+  })
+}));
+
+// ── Log List Row ───────────────────────────────────────────────────────
+
+const LogRow = /*#__PURE__*/React.memo(({
+  entry
+}) => {
+  const e = toRecord(entry);
+  if (entry.type === 'console_logs') {
+    const level = e.level ?? 'log';
+    const msg = Array.isArray(e.data) ? e.data.map(d => typeof d === 'string' ? d : safeStringify(d)).join(' ') : safeStringify(e.data);
+    return /*#__PURE__*/_jsxs(View, {
+      style: s.rowContent,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [s.levelDot, {
+          backgroundColor: LEVEL_COLORS[level] ?? '#8E8E93'
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.levelIcon,
+          children: LEVEL_ICONS[level] ?? '●'
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: s.rowBody,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.rowMsg,
+          numberOfLines: 2,
+          children: msg
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.rowTime,
+          children: new Date(e.timestamp).toLocaleTimeString()
+        })]
+      })]
+    });
+  }
+  if (entry.type === 'network_logs') {
+    const method = e.request?.method ?? '?';
+    const url = e.request?.url ?? '';
+    const status = e.response?.status;
+    const ok = !e.error && (!status || status < 400);
+    return /*#__PURE__*/_jsxs(View, {
+      style: s.rowContent,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [s.statusBar, {
+          backgroundColor: ok ? Colors.success : Colors.error
+        }]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: s.rowBody,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: s.rowMeta,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [s.methodText, {
+              color: getMethodColor(method)
+            }],
+            children: method
+          }), status != null && /*#__PURE__*/_jsx(View, {
+            style: [s.miniPill, {
+              backgroundColor: ok ? Colors.success : Colors.error
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: s.miniPillText,
+              children: status
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [s.rowMsg, !ok && {
+            color: Colors.error
+          }],
+          numberOfLines: 1,
+          children: shortenUrl(url)
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.rowTime,
+          children: new Date(e.timestamp).toLocaleTimeString()
+        })]
+      })]
+    });
+  }
+
+  // track_logs
+  const name = e.eventName ?? e.action ?? 'Event';
+  return /*#__PURE__*/_jsxs(View, {
+    style: s.rowContent,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: s.trackDot
+    }), /*#__PURE__*/_jsxs(View, {
+      style: s.rowBody,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: s.rowMsg,
+        numberOfLines: 1,
+        children: name
+      }), /*#__PURE__*/_jsx(Text, {
+        style: s.rowTime,
+        children: e.timestamp ? new Date(e.timestamp).toLocaleTimeString() : ''
+      })]
+    })]
+  });
+});
+
+// ── Log Detail Header ──────────────────────────────────────────────────
+
+const LogDetailHeader = /*#__PURE__*/React.memo(({
+  entry
+}) => {
+  const e = toRecord(entry);
+  if (entry.type === 'console_logs') {
+    const level = e.level ?? 'log';
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [s.levelBadge, {
+          backgroundColor: LEVEL_COLORS[level] ?? '#8E8E93'
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.levelBadgeText,
+          children: level.toUpperCase()
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: s.detailTimestamp,
+        children: new Date(e.timestamp).toLocaleString()
+      })]
+    });
+  }
+  if (entry.type === 'network_logs') {
+    const method = e.request?.method ?? '?';
+    const status = e.response?.status;
+    const ok = !e.error && (!status || status < 400);
+    return /*#__PURE__*/_jsxs(View, {
+      style: s.networkHeaderBadges,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [s.methodBadge, {
+          backgroundColor: getMethodColor(method)
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.methodBadgeText,
+          children: method
+        })
+      }), status != null && /*#__PURE__*/_jsx(View, {
+        style: [s.statusPill, {
+          backgroundColor: ok ? Colors.success : Colors.error
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: s.statusPillText,
+          children: status
+        })
+      }), e.duration != null && /*#__PURE__*/_jsxs(Text, {
+        style: s.durationText,
+        children: [e.duration, "ms"]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    style: s.detailTimestamp,
+    children: new Date(e.timestamp).toLocaleString()
+  });
+});
+
+// ── Log Detail Body ────────────────────────────────────────────────────
+
+const LogDetailBody = /*#__PURE__*/React.memo(({
+  entry
+}) => {
+  const e = toRecord(entry);
+  if (entry.type === 'console_logs') {
+    const data = Array.isArray(e.data) ? e.data : [e.data];
+    return /*#__PURE__*/_jsx(ScrollView, {
+      style: s.detailBody,
+      contentContainerStyle: s.detailBodyContent,
+      children: data.map((d, i) => {
+        const formatted = typeof d === 'object' && d !== null ? fmt(d) : String(d);
+        return /*#__PURE__*/_jsx(CollapsibleSection, {
+          title: typeof d === 'object' && d !== null ? `Arg ${i + 1} (object)` : `Arg ${i + 1}`,
+          initiallyExpanded: i === 0,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: s.sectionWithCopy,
+            children: [/*#__PURE__*/_jsx(CopyButton, {
+              text: formatted,
+              label: `Arg ${i + 1}`
+            }), typeof d === 'object' && d !== null ? /*#__PURE__*/_jsx(JsonView, {
+              data: d,
+              maxHeight: 250
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: s.plainText,
+              selectable: true,
+              children: String(d)
+            })]
+          })
+        }, i);
+      })
+    });
+  }
+  if (entry.type === 'network_logs') {
+    return /*#__PURE__*/_jsxs(ScrollView, {
+      style: s.detailBody,
+      contentContainerStyle: s.detailBodyContent,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.urlCard,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.urlText,
+          selectable: true,
+          numberOfLines: 3,
+          children: e.request?.url
+        }), /*#__PURE__*/_jsx(CopyButton, {
+          text: e.request?.url ?? '',
+          label: "URL"
+        })]
+      }), e.error && /*#__PURE__*/_jsxs(View, {
+        style: s.errorBox,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: s.errorIcon,
+          children: "\u26A0"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: s.errorText,
+          children: e.error
+        })]
+      }), /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Request Body",
+        initiallyExpanded: true,
+        children: e.request?.body != null ? /*#__PURE__*/_jsxs(View, {
+          style: s.sectionWithCopy,
+          children: [/*#__PURE__*/_jsx(CopyButton, {
+            text: fmt(e.request.body),
+            label: "Request Body"
+          }), /*#__PURE__*/_jsx(JsonView, {
+            data: e.request.body,
+            maxHeight: 250
+          })]
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: s.emptySection,
+          children: "No request body"
+        })
+      }), e.request?.headers && /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Request Headers",
+        children: /*#__PURE__*/_jsxs(View, {
+          style: s.sectionWithCopy,
+          children: [/*#__PURE__*/_jsx(CopyButton, {
+            text: fmt(e.request.headers),
+            label: "Request Headers"
+          }), /*#__PURE__*/_jsx(JsonView, {
+            data: e.request.headers,
+            maxHeight: 200
+          })]
+        })
+      }), /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Response Body",
+        initiallyExpanded: true,
+        children: e.response?.data != null ? /*#__PURE__*/_jsxs(View, {
+          style: s.sectionWithCopy,
+          children: [/*#__PURE__*/_jsx(CopyButton, {
+            text: fmt(e.response.data),
+            label: "Response Body"
+          }), /*#__PURE__*/_jsx(JsonView, {
+            data: e.response.data,
+            maxHeight: 300
+          })]
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: s.emptySection,
+          children: "No response body"
+        })
+      }), e.response?.headers && /*#__PURE__*/_jsx(CollapsibleSection, {
+        title: "Response Headers",
+        children: /*#__PURE__*/_jsxs(View, {
+          style: s.sectionWithCopy,
+          children: [/*#__PURE__*/_jsx(CopyButton, {
+            text: fmt(e.response.headers),
+            label: "Response Headers"
+          }), /*#__PURE__*/_jsx(JsonView, {
+            data: e.response.headers,
+            maxHeight: 200
+          })]
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    style: s.detailBody,
+    contentContainerStyle: s.detailBodyContent,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: s.sectionWithCopy,
+      children: [/*#__PURE__*/_jsx(CopyButton, {
+        text: fmt(entry.raw),
+        label: "Event"
+      }), /*#__PURE__*/_jsx(JsonView, {
+        data: entry.raw,
+        maxHeight: 400
+      })]
+    })
+  });
+});
+
+// ── Styles ─────────────────────────────────────────────────────────────
+
+const s = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background
+  },
+  scrollContent: {
+    paddingTop: 12,
+    paddingBottom: 60
+  },
+  // Center (loading / empty)
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.background,
+    padding: 32
+  },
+  emptyClock: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: Colors.surface,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: Colors.border,
+    marginBottom: 16
+  },
+  emptyClockText: {
+    fontSize: 28
+  },
+  emptyTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: Colors.text,
+    marginBottom: 6
+  },
+  emptySub: {
+    fontSize: 14,
+    color: Colors.textSecondary,
+    textAlign: 'center',
+    lineHeight: 20
+  },
+  // Current session
+  currentCard: {
+    backgroundColor: Colors.primary,
+    marginHorizontal: 16,
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 20
+  },
+  currentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 6
+  },
+  pulseDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#4CD964',
+    marginRight: 8
+  },
+  currentLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: 'rgba(255,255,255,0.7)',
+    letterSpacing: 0.8
+  },
+  currentTime: {
+    fontSize: 15,
+    color: '#FFFFFF',
+    fontWeight: '500'
+  },
+  // Timeline
+  timelineSection: {
+    paddingHorizontal: 16
+  },
+  timelineHeader: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: Colors.textLight,
+    letterSpacing: 0.8,
+    marginBottom: 12
+  },
+  timelineRow: {
+    flexDirection: 'row'
+  },
+  railCol: {
+    width: 24,
+    alignItems: 'center',
+    paddingTop: 14
+  },
+  railDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: Colors.surface,
+    borderWidth: 2,
+    borderColor: Colors.textLight,
+    zIndex: 1
+  },
+  railLine: {
+    width: 2,
+    flex: 1,
+    backgroundColor: Colors.border,
+    marginTop: -1
+  },
+  historyCard: {
+    flex: 1,
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 10,
+    marginLeft: 8
+  },
+  cardTop: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    marginBottom: 8
+  },
+  cardTime: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: Colors.text
+  },
+  cardRelative: {
+    fontSize: 13,
+    color: Colors.textSecondary
+  },
+  cardEmpty: {
+    fontSize: 13,
+    color: Colors.textLight,
+    marginBottom: 4
+  },
+  pillRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginBottom: 8
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6
+  },
+  pillDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 5
+  },
+  pillText: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  cardFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 4
+  },
+  cardId: {
+    fontSize: 11,
+    color: Colors.textLight,
+    fontFamily: 'Courier',
+    fontWeight: '500'
+  },
+  cardChevron: {
+    fontSize: 20,
+    color: Colors.textLight,
+    fontWeight: '400'
+  },
+  // ── Session detail header ──
+  sessionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border
+  },
+  headerBackBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4
+  },
+  headerArrow: {
+    fontSize: 22,
+    color: Colors.primary,
+    fontWeight: '400',
+    marginRight: 2
+  },
+  headerBackLabel: {
+    fontSize: 15,
+    color: Colors.primary,
+    fontWeight: '600'
+  },
+  headerMeta: {
+    fontSize: 12,
+    color: Colors.textSecondary,
+    fontFamily: 'Courier'
+  },
+  // ── Filter bar ──
+  filterBar: {
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: Colors.background,
+    gap: 6
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: Colors.surface
+  },
+  chipLabel: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: Colors.textSecondary
+  },
+  chipLabelActive: {
+    color: '#FFFFFF'
+  },
+  chipCount: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: Colors.textLight
+  },
+  chipCountActive: {
+    color: 'rgba(255,255,255,0.8)'
+  },
+  // ── Log rows (inside LogListScreen cards) ──
+  rowContent: {
+    flexDirection: 'row',
+    padding: 14,
+    alignItems: 'flex-start'
+  },
+  levelDot: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+    marginTop: 1
+  },
+  levelIcon: {
+    color: '#FFF',
+    fontSize: 11,
+    fontWeight: '700'
+  },
+  statusBar: {
+    width: 3,
+    borderRadius: 2,
+    marginRight: 12,
+    minHeight: 36
+  },
+  rowBody: {
+    flex: 1
+  },
+  rowMsg: {
+    fontSize: 14,
+    color: Colors.text,
+    lineHeight: 20
+  },
+  rowTime: {
+    fontSize: 12,
+    color: Colors.textSecondary,
+    marginTop: 4
+  },
+  rowMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+    gap: 6
+  },
+  methodText: {
+    fontSize: 13,
+    fontWeight: '700'
+  },
+  miniPill: {
+    paddingHorizontal: 7,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  miniPillText: {
+    color: '#FFF',
+    fontSize: 10,
+    fontWeight: '700'
+  },
+  trackDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: Colors.purple,
+    marginRight: 10,
+    marginTop: 5
+  },
+  // ── Log detail header ──
+  levelBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6
+  },
+  levelBadgeText: {
+    color: '#FFF',
+    fontSize: 12,
+    fontWeight: '700'
+  },
+  detailTimestamp: {
+    flex: 1,
+    fontSize: 13,
+    color: Colors.textSecondary,
+    textAlign: 'right'
+  },
+  networkHeaderBadges: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1
+  },
+  methodBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6
+  },
+  methodBadgeText: {
+    color: '#FFF',
+    fontSize: 12,
+    fontWeight: '700'
+  },
+  statusPill: {
+    paddingHorizontal: 9,
+    paddingVertical: 3,
+    borderRadius: 6
+  },
+  statusPillText: {
+    color: '#FFF',
+    fontSize: 11,
+    fontWeight: '700'
+  },
+  durationText: {
+    fontSize: 12,
+    color: Colors.textSecondary,
+    fontWeight: '500'
+  },
+  // ── Log detail body ──
+  detailBody: {
+    flex: 1
+  },
+  detailBodyContent: {
+    padding: 12,
+    paddingBottom: 40
+  },
+  sectionWithCopy: {
+    gap: 8
+  },
+  plainText: {
+    fontFamily: 'Courier',
+    fontSize: 13,
+    color: Colors.text,
+    lineHeight: 20
+  },
+  urlCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+    gap: 8
+  },
+  urlText: {
+    flex: 1,
+    fontSize: 13,
+    color: Colors.textSecondary,
+    lineHeight: 18
+  },
+  emptySection: {
+    fontSize: 13,
+    color: Colors.textLight,
+    paddingVertical: 4
+  },
+  errorBox: {
+    backgroundColor: 'rgba(255,59,48,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,59,48,0.15)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8
+  },
+  errorIcon: {
+    fontSize: 14,
+    color: Colors.error
+  },
+  errorText: {
+    flex: 1,
+    fontSize: 13,
+    color: Colors.error,
+    lineHeight: 18
+  }
+});
+//# sourceMappingURL=SessionHistoryTab.js.map