{logs.map((log) => ( ))}

); } // --- Network Components --- function NetworkView({ logs, t, isDark, }: { logs: NetworkLog[]; t: ThemeColors; isDark: boolean; }) { const [selectedId, setSelectedId] = useState(null); const [filter, setFilter] = useState(''); const [groupByDomain, setGroupByDomain] = useState(true); const [expandedGroups, setExpandedGroups] = useState>( {}, ); const [sidebarWidth, setSidebarWidth] = useState(400); const isResizing = useRef(false); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isResizing.current) return; const newWidth = Math.max( 200, Math.min(e.clientX, window.innerWidth - 200), ); setSidebarWidth(newWidth); }; const handleMouseUp = () => { isResizing.current = false; document.body.style.cursor = 'default'; document.body.style.userSelect = 'auto'; }; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); return () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; }, []); const startResizing = () => { isResizing.current = true; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; }; const filteredLogs = useMemo(() => { let result = logs; if (filter) { const lower = filter.toLowerCase(); result = logs.filter((l) => l.url.toLowerCase().includes(lower)); } return result; }, [logs, filter]); const groupedLogs = useMemo(() => { if (!groupByDomain) return null; const groups: Record = {}; filteredLogs.forEach((log) => { let groupKey = 'Other'; try { const url = new URL(log.url); const lastSlashIndex = url.pathname.lastIndexOf('/'); const basePath = lastSlashIndex !== -1 ? url.pathname.substring(0, lastSlashIndex + 1) : '/'; groupKey = url.hostname + basePath; } catch { /* ignore */ } if (!groups[groupKey]) groups[groupKey] = []; groups[groupKey].push(log); }); return groups; }, [filteredLogs, groupByDomain]); useEffect(() => { if (groupedLogs) { setExpandedGroups((prev) => { const next = { ...prev }; Object.keys(groupedLogs).forEach((key) => { if (next[key] === undefined) { // Collapse play.googleapis.com by default next[key] = !key.includes('play.googleapis.com'); } }); return next; }); } }, [groupedLogs]); const toggleGroup = (key: string) => { setExpandedGroups((prev) => ({ ...prev, [key]: !prev[key] })); }; // --- Context Menu --- (reserved for future actions) const selectedLog = logs.find((l) => l.id === selectedId); const renderLogItem = (log: NetworkLog, nameOverride?: string) => { const isPending = log.pending; const status = log.response ? log.response.status : log.error ? 'ERR' : '...'; const isError = log.error || (log.response && log.response.status >= 400); let name = nameOverride || log.url; if (!nameOverride) { try { const urlObj = new URL(log.url); name = urlObj.pathname + urlObj.search; } catch { /* ignore */ } } const isSelected = log.id === selectedId; return (

setSelectedId(log.id)} style={{ padding: '8px 12px', cursor: 'pointer', borderBottom: `1px solid ${t.rowBorder}`, display: 'flex', flexDirection: 'column', fontSize: '12px', backgroundColor: isSelected ? t.bgHover : 'transparent', color: isError ? '#f28b82' : t.text, paddingLeft: nameOverride ? '24px' : '12px', }} >

{log.method} {name} {isPending ? '⏳' : status}

); }; if (logs.length === 0) { return (

No network activity in this session

); } return (

{/* List */}

setFilter(e.target.value)} style={{ flex: 1, boxSizing: 'border-box', padding: '4px 10px', background: t.bg, color: t.text, border: `1px solid ${t.border}`, borderRadius: '4px', fontSize: '12px', }} />

{groupByDomain && groupedLogs ? Object.keys(groupedLogs).map((groupKey) => (

toggleGroup(groupKey)} style={{ padding: '6px 12px', background: t.bgSecondary, fontWeight: 'bold', fontSize: '11px', borderBottom: `1px solid ${t.rowBorder}`, wordBreak: 'break-all', cursor: 'pointer', display: 'flex', alignItems: 'center', userSelect: 'none', }} > {expandedGroups[groupKey] ? '▼' : '▶'} {groupKey} {groupedLogs[groupKey].length}

{expandedGroups[groupKey] && groupedLogs[groupKey].map((log) => { let displayName = log.url; try { const url = new URL(log.url); const lastSlashIndex = url.pathname.lastIndexOf('/'); const suffix = url.pathname.substring( lastSlashIndex + 1, ); displayName = (suffix || '/') + url.search; } catch { /* ignore */ } return renderLogItem(log, displayName); })}

)) : filteredLogs.map((log) => renderLogItem(log))}

{/* Resizer */}

{/* Detail */}

{selectedLog ? ( ) : (

Select a request to view details

)}

); } type Tab = 'headers' | 'payload' | 'response'; function NetworkDetail({ log, t }: { log: NetworkLog; t: ThemeColors }) { const [activeTab, setActiveTab] = useState('headers'); const status = log.response ? log.pending ? '⏳' : log.response.status : log.error ? 'Error' : '⏳'; return (

{log.url}

{log.method} • {status} • {new Date(log.timestamp).toLocaleTimeString()} {log.response && ( <> • {log.response.durationMs}ms )}

{(['headers', 'payload', 'response'] as const).map((tab) => (

setActiveTab(tab)} style={{ padding: '8px 16px', cursor: 'pointer', fontWeight: 600, fontSize: '12px', textTransform: 'capitalize', borderBottom: activeTab === tab ? `2px solid ${t.accent}` : '2px solid transparent', color: activeTab === tab ? t.accent : t.textSecondary, transition: 'all 0.2s', }} > {tab}

))}

{activeTab === 'headers' && (

{log.error && ( )}

{log.response ? ( ) : ( (no response yet) )}

)} {activeTab === 'payload' && } {activeTab === 'response' && ( )}

); } function Section({ title, children, t, }: { title: string; children: React.ReactNode; t: ThemeColors; }) { const [collapsed, setCollapsed] = useState(false); return (

setCollapsed(!collapsed)} style={{ padding: '8px 12px', background: t.bgSecondary, fontWeight: 'bold', fontSize: '11px', cursor: 'pointer', userSelect: 'none', display: 'flex', alignItems: 'center', gap: '8px', }} > {collapsed ? '▶' : '▼'} {title}

{!collapsed && (

{children}

)}

); } function Pair({ k, v, color, t, }: { k: string; v: string; color?: string; t: ThemeColors; }) { return (

{k}:

{v}

); } function HeadersMap({ headers, t, }: { headers: Record | undefined; t: ThemeColors; }) { if (!headers) return

(none)

; return ( <> {Object.entries(headers).map(([k, v]) => ( ))} ); } function BodyView({ content, chunks, t, }: { content?: string; chunks?: Array<{ index: number; data: string; timestamp: number }>; t: ThemeColors; }) { const [mode, setMode] = useState<'json' | 'raw'>('json'); const hasChunks = chunks && chunks.length > 0; const safeContent = hasChunks ? chunks.map((c) => c.data).join('') : content || ''; const getFormattedJson = () => { try { return JSON.stringify(JSON.parse(safeContent), null, 2); } catch { return safeContent; } }; const copyJson = () => { navigator.clipboard.writeText(getFormattedJson()).catch(() => { // Clipboard API unavailable — silently ignore }); }; const downloadJson = () => { const blob = new Blob([getFormattedJson()], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'body.json'; a.click(); URL.revokeObjectURL(url); }; if (!safeContent && !hasChunks) return (

(No content)

); const iconBtn = { background: 'none', border: 'none', cursor: 'pointer', color: t.textSecondary, padding: '2px', borderRadius: '4px', display: 'flex', alignItems: 'center', } as const; return (

{(['json', 'raw'] as const).map((m) => ( ))}

{hasChunks && mode === 'raw' ? (

{chunks.map((chunk, i) => (

[ {new Date(chunk.timestamp).toLocaleTimeString('en-US', { hour12: false, })} .{String(chunk.timestamp % 1000).padStart(3, '0')}]

                  {chunk.data}

))}

) : mode === 'raw' ? (

            {safeContent}

) : ( )}

); } function JsonViewer({ content, t }: { content: string; t: ThemeColors }) { const safeContent = content || ''; if (safeContent.includes('data:')) { const chunks = safeContent .split(/\n\s*\n/) .map((eventBlock, i) => ({ index: i + 1, jsonStr: eventBlock .split('\n') .filter((line) => line.trim().startsWith('data:')) .map((line) => line.trim().substring(5).trim()) .join(''), })) .filter((c) => c.jsonStr); if (chunks.length > 0) { return (

{chunks.map((chunk) => (

CHUNK {chunk.index}

))}

); } } return ; } function tryParse(str: string) { try { return JSON.parse(str); } catch { return str; } } interface JsonLine { text: string; foldStart: boolean; foldEnd: number; // -1 if not a fold start closingBracket: string; // '}' or ']' for fold starts } function jsonToLines(data: unknown): JsonLine[] { const str = typeof data === 'string' && !data.startsWith('{') && !data.startsWith('[') ? data : JSON.stringify(data, null, 2); if (str == null) return [ { text: 'undefined', foldStart: false, foldEnd: -1, closingBracket: '' }, ]; const raw = str.split('\n'); const lines: JsonLine[] = raw.map((text) => ({ text, foldStart: false, foldEnd: -1, closingBracket: '', })); // Match opening brackets to closing brackets using a stack const stack: Array<{ index: number; bracket: string }> = []; for (let i = 0; i < raw.length; i++) { const trimmed = raw[i].trimEnd(); const last = trimmed[trimmed.length - 1]; if (last === '{' || last === '[') { stack.push({ index: i, bracket: last === '{' ? '}' : ']' }); } // Check for closing bracket (with or without trailing comma) const stripped = trimmed.replace(/,\s*$/, ''); const closeChar = stripped[stripped.length - 1]; if ( (closeChar === '}' || closeChar === ']') && stack.length > 0 && stack[stack.length - 1].bracket === closeChar ) { const open = stack.pop()!; lines[open.index].foldStart = true; lines[open.index].foldEnd = i; lines[open.index].closingBracket = open.bracket; } } return lines; } // Tokenize a JSON line for syntax highlighting const TOKEN_RE = /("(?:[^"\\]|\\.)*")\s*(?=:)|("(?:[^"\\]|\\.)*")|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b)|(\bnull\b)|([{}[\]:,])/g; function highlightLine(text: string, t: ThemeColors): React.ReactNode { const parts: React.ReactNode[] = []; let lastIndex = 0; let match: RegExpExecArray | null; TOKEN_RE.lastIndex = 0; while ((match = TOKEN_RE.exec(text)) !== null) { // Push any unmatched text before this token (whitespace/other) if (match.index > lastIndex) { parts.push(text.slice(lastIndex, match.index)); } const [full, key, str, num, bool, nul] = match; if (key) { parts.push( {full} , ); } else if (str) { // Unescape JSON string escapes so \n renders as actual newlines. // Use JSON.parse to handle all escape sequences correctly in one pass // (manual chained .replace() can double-unescape e.g. \\n → \). let unescaped: string; try { unescaped = JSON.parse(full) as string; } catch { unescaped = full.slice(1, -1); } const strLines = unescaped.split('\n'); if (strLines.length <= 1) { parts.push( {full} , ); } else { const indent = ' '.repeat(match.index + 1); parts.push( , ); } } else if (num) { parts.push( {full} , ); } else if (bool) { parts.push( {full} , ); } else if (nul) { parts.push( {full} , ); } else { // punctuation parts.push({full}); } lastIndex = match.index + full.length; } // Remaining text if (lastIndex < text.length) { parts.push(text.slice(lastIndex)); } return parts; } const STRING_LINE_THRESHOLD = 20; function CollapsibleString({ lines, indent, t, }: { lines: string[]; indent: string; t: ThemeColors; }) { const [expanded, setExpanded] = useState(false); const needsTruncation = lines.length > STRING_LINE_THRESHOLD; const displayLines = needsTruncation && !expanded ? lines.slice(0, STRING_LINE_THRESHOLD) : lines; return ( "{displayLines[0]} {displayLines.slice(1).map((sl, si) => ( {'\n'} {indent} {sl} ))} {needsTruncation && ( <> {'\n'} {indent} setExpanded(!expanded)} style={{ color: t.accent, cursor: 'pointer', fontStyle: 'italic', userSelect: 'none', }} > {expanded ? '▲ collapse' : `... ${lines.length - STRING_LINE_THRESHOLD} more lines`} )} " ); } function CodeView({ data, t }: { data: unknown; t: ThemeColors }) { const lines = useMemo(() => jsonToLines(data), [data]); const [collapsed, setCollapsed] = useState>(() => new Set()); const contentRef = useRef(null); const toggleFold = (lineIndex: number) => { setCollapsed((prev) => { const next = new Set(prev); if (next.has(lineIndex)) { next.delete(lineIndex); } else { next.add(lineIndex); } return next; }); }; const handleKeyDown = (e: React.KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === 'a') { e.preventDefault(); const sel = window.getSelection(); if (sel && contentRef.current) { sel.removeAllRanges(); const range = document.createRange(); range.selectNodeContents(contentRef.current); sel.addRange(range); } } }; // Build visible lines, skipping folded regions const visibleLines: Array<{ index: number; content: React.ReactNode; foldable: boolean; isCollapsed: boolean; }> = []; let i = 0; while (i < lines.length) { const line = lines[i]; const isCollapsed = collapsed.has(i); if (line.foldStart && isCollapsed) { // Show the opening line with collapsed indicator const indent = line.text.match(/^(\s*)/)?.[1] || ''; const trimmed = line.text.trimStart(); visibleLines.push({ index: i, content: ( <> {indent.length > 0 && {indent}} {highlightLine(trimmed, t)} {' '} ... {line.closingBracket} ), foldable: true, isCollapsed: true, }); // Skip to the line after foldEnd i = line.foldEnd + 1; } else { visibleLines.push({ index: i, content: highlightLine(line.text, t), foldable: line.foldStart, isCollapsed: false, }); i++; } } return (

{visibleLines.map((vl) => ( {/* Gutter cell */}

toggleFold(vl.index) : undefined} > {vl.foldable ? ( {vl.isCollapsed ? '▶' : '▼'} ) : ( '' )}

{/* Content cell */}

{vl.content}

))}

); }