@principal-ai/principal-view-react 0.15.9 → 0.16.0

package/dist/components/session-events/SessionEventFeed.js

@@ -0,0 +1,656 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SessionEventFeed — a three-column diagnostic feed over one agent session's
+ * events, showing the raw V1 event → repo-normalized → accumulated (UI) pipeline
+ * for every row.
+ *
+ * Input rows match the trail-viewer's `SessionEventRow` wire shape:
+ *   { seq, type, raw, normalized, accumulated }
+ * `raw` is the raw V1 event payload, `normalized` its repo-normalized form, and
+ * `accumulated` the AgentSessionEvent the File City UI actually renders (null
+ * when the accumulator drops the event).
+ *
+ * Dark diagnostic palette — intentionally self-contained rather than themed.
+ */
+import { useCallback, useMemo, useState } from 'react';
+/** Shared collapse state keyed by row seq. */
+function useCollapse(seqs, defaultCollapsed = false) {
+    const [collapsed, setCollapsed] = useState(() => (defaultCollapsed ? new Set(seqs) : new Set()));
+    const toggle = useCallback((seq) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(seq))
+                next.delete(seq);
+            else
+                next.add(seq);
+            return next;
+        });
+    }, []);
+    const setAll = useCallback((value) => setCollapsed(value ? new Set(seqs) : new Set()), [seqs]);
+    return { collapsed, toggle, setAll };
+}
+function toRaw(raw) {
+    return raw;
+}
+function toNormalized(normalized) {
+    return normalized;
+}
+// =============================================================================
+// Raw event → presentable pieces
+// =============================================================================
+function dataOf(e) {
+    return (e.data ?? {});
+}
+function partOf(e) {
+    return dataOf(e).part;
+}
+function eventTimestamp(e) {
+    const d = dataOf(e);
+    if (typeof d.time === 'number')
+        return d.time;
+    const info = d.info;
+    const infoTime = info?.time;
+    if (typeof infoTime?.created === 'number')
+        return infoTime.created;
+    const part = partOf(e);
+    if (typeof part?.time === 'number')
+        return part.time;
+    const state = part?.state;
+    const stateTime = state?.time;
+    if (typeof stateTime?.start === 'number')
+        return stateTime.start;
+    if (typeof stateTime?.end === 'number')
+        return stateTime.end;
+    return 0;
+}
+const ALL_CATEGORIES = [
+    'session',
+    'conversation',
+    'tool',
+    'step',
+    'patch',
+    'compaction',
+];
+function eventCategory(e) {
+    switch (e.type) {
+        case 'session.created.1':
+        case 'session.updated.1':
+            return 'session';
+        case 'message.updated.1':
+        case 'message.removed.1':
+        case 'message.part.updated.1': {
+            const partType = partOf(e)?.type;
+            switch (partType) {
+                case 'text':
+                case 'reasoning':
+                    return 'conversation';
+                case 'tool':
+                    return 'tool';
+                case 'step-start':
+                case 'step-finish':
+                    return 'step';
+                case 'patch':
+                    return 'patch';
+                case 'compaction':
+                    return 'compaction';
+                default:
+                    return 'conversation';
+            }
+        }
+        default:
+            return 'conversation';
+    }
+}
+const PRESETS = [
+    { id: 'all', label: 'All', include: ALL_CATEGORIES },
+    { id: 'activity', label: 'Activity', include: ['conversation', 'tool', 'patch'] },
+    { id: 'conversation', label: 'Conversation', include: ['conversation'] },
+    { id: 'tools', label: 'Tools', include: ['tool'] },
+    { id: 'noise', label: 'Session & steps', include: ['session', 'step', 'compaction'] },
+];
+/** Granular key for a card (raw event type, or part type for parts). */
+function eventKind(e) {
+    if (e.type === 'message.part.updated.1') {
+        return `part:${partOf(e)?.type ?? 'unknown'}`;
+    }
+    return e.type;
+}
+function kindLabel(kind) {
+    if (kind.startsWith('part:'))
+        return `part · ${kind.slice(5)}`;
+    return kind;
+}
+const KIND_COLORS = {
+    'session.created.1': '#64748b',
+    'session.updated.1': '#94a3b8',
+    'message.updated.1': '#06b6d4',
+    'message.removed.1': '#ef4444',
+    'part:text': '#10b981',
+    'part:reasoning': '#8b5cf6',
+    'part:tool': '#3b82f6',
+    'part:step-start': '#f59e0b',
+    'part:step-finish': '#f59e0b',
+    'part:patch': '#ef4444',
+    'part:compaction': '#ec4899',
+    'part:unknown': '#6b7280',
+};
+function kindColor(kind) {
+    return KIND_COLORS[kind] ?? '#6b7280';
+}
+function describe(e) {
+    const d = dataOf(e);
+    const info = d.info;
+    const part = partOf(e);
+    const state = part?.state;
+    switch (e.type) {
+        case 'session.created.1':
+            return info?.title ?? 'Session created';
+        case 'session.updated.1': {
+            const bits = [];
+            const tokens = info?.tokens;
+            if (typeof info?.cost === 'number')
+                bits.push(`$${info.cost.toFixed(4)}`);
+            if (typeof tokens?.input === 'number')
+                bits.push(`${tokens.input} in`);
+            if (typeof tokens?.output === 'number')
+                bits.push(`${tokens.output} out`);
+            return bits.length > 0 ? `Session updated · ${bits.join(' · ')}` : 'Session updated';
+        }
+        case 'message.updated.1': {
+            const role = info?.role ?? 'message';
+            const model = info?.model?.modelID;
+            return model ? `${role} message · ${model}` : `${role} message`;
+        }
+        case 'message.removed.1':
+            return `Removed ${d.messageID}`;
+        case 'message.part.updated.1': {
+            const partType = part?.type;
+            const toolName = part?.tool;
+            const status = state?.status;
+            switch (partType) {
+                case 'text':
+                    return part?.text ?? 'Text';
+                case 'reasoning':
+                    return part?.text || 'Reasoning';
+                case 'tool':
+                    return [toolName, status].filter(Boolean).join(' · ') || 'Tool';
+                case 'step-start':
+                    return 'Step start';
+                case 'step-finish':
+                    return part?.reason ? `Step finish · ${part.reason}` : 'Step finish';
+                case 'patch': {
+                    const files = part?.files;
+                    return `Patch · ${files?.length ?? 0} file${(files?.length ?? 0) === 1 ? '' : 's'}`;
+                }
+                case 'compaction':
+                    return `Compaction${part?.auto ? ' · auto' : ''}`;
+                default:
+                    return partType ?? 'Part';
+            }
+        }
+        default:
+            return e.type;
+    }
+}
+function toolSummary(input) {
+    if (input === null || input === undefined)
+        return '';
+    if (typeof input === 'string')
+        return input;
+    if (Array.isArray(input))
+        return JSON.stringify(input).slice(0, 120);
+    const obj = input;
+    for (const key of ['command', 'filePath', 'file_path', 'path', 'pattern', 'include', 'tool']) {
+        if (typeof obj[key] === 'string' && obj[key] !== '')
+            return obj[key];
+    }
+    return JSON.stringify(input).slice(0, 120);
+}
+// =============================================================================
+// Cards
+// =============================================================================
+function formatTime(ts) {
+    if (!ts)
+        return '';
+    return new Date(ts).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+}
+function RawEventCard({ event, expanded, onToggle, }) {
+    const kind = eventKind(event);
+    const d = dataOf(event);
+    const part = partOf(event);
+    const state = part?.state;
+    const color = kindColor(kind);
+    const body = useMemo(() => (() => {
+        switch (event.type) {
+            case 'session.created.1': {
+                const info = d.info;
+                return (_jsx(MetaRows, { rows: [
+                        ['agent', info?.agent],
+                        ['model', info?.model?.id ?? info?.model?.modelID],
+                        ['directory', info?.directory],
+                        ['version', info?.version],
+                        ['slug', info?.slug],
+                    ] }));
+            }
+            case 'session.updated.1': {
+                const info = d.info;
+                return (_jsx(MetaRows, { rows: [
+                        ['cost', typeof info?.cost === 'number' ? `$${info.cost.toFixed(4)}` : undefined],
+                        ['tokens', info?.tokens],
+                        ['title', info?.title],
+                    ] }));
+            }
+            case 'message.updated.1': {
+                const info = d.info;
+                return (_jsx(MetaRows, { rows: [
+                        ['role', info?.role],
+                        ['agent', info?.agent],
+                        ['model', info?.model],
+                        ['tokens', info?.tokens],
+                        ['messageID', info?.id],
+                    ] }));
+            }
+            case 'message.removed.1':
+                return _jsx(MetaRows, { rows: [['messageID', d.messageID]] });
+            case 'message.part.updated.1': {
+                switch (part?.type) {
+                    case 'text':
+                    case 'reasoning':
+                        return _jsx(TextView, { text: part?.text });
+                    case 'tool':
+                        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { style: { fontSize: 12, color: '#9ca3af' }, children: ["callID ", String(part?.callID ?? ''), " \u00B7 ", String(state?.status ?? '')] }), _jsx(ToolIO, { input: state?.input, output: state?.status === 'error' ? state?.error : state?.output })] }));
+                    case 'step-start':
+                        return _jsx(MetaRows, { rows: [['snapshot', part?.snapshot]] });
+                    case 'step-finish':
+                        return (_jsx(MetaRows, { rows: [
+                                ['reason', part?.reason],
+                                ['cost', typeof part?.cost === 'number' ? `$${part.cost.toFixed(4)}` : undefined],
+                                ['tokens', part?.tokens],
+                            ] }));
+                    case 'patch':
+                        return (_jsx(MetaRows, { rows: [
+                                ['files', part?.files],
+                                ['hash', part?.hash],
+                            ] }));
+                    case 'compaction':
+                        return (_jsx(MetaRows, { rows: [
+                                ['auto', typeof part?.auto === 'boolean' ? String(part.auto) : undefined],
+                                ['overflow', typeof part?.overflow === 'boolean' ? String(part.overflow) : undefined],
+                            ] }));
+                    default:
+                        return _jsx(JsonView, { value: d });
+                }
+            }
+            default:
+                return _jsx(JsonView, { value: d });
+        }
+    })(), [event]);
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: expanded ? 8 : 0,
+            padding: '10px 14px',
+            borderRadius: 0,
+            minWidth: 0,
+            overflow: 'hidden',
+            backgroundColor: expanded ? '#111827' : '#161b26',
+            fontFamily: 'system-ui, sans-serif',
+            fontSize: 13,
+        }, children: [_jsxs("button", { onClick: onToggle, "aria-expanded": expanded, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    width: '100%',
+                    border: 'none',
+                    background: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    fontFamily: 'inherit',
+                    textAlign: 'left',
+                }, children: [_jsxs("span", { style: { color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }, children: ["#", event.seq] }), _jsx("span", { style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.5,
+                            color,
+                            whiteSpace: 'nowrap',
+                        }, children: kindLabel(kind) }), _jsx("span", { style: {
+                            flex: 1,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: '#e5e7eb',
+                        }, children: describe(event) }), _jsx("span", { style: { color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }, children: formatTime(eventTimestamp(event)) })] }), expanded ? body : null] }));
+}
+function prettifyEventType(t) {
+    return t.replace(/-/g, ' ');
+}
+function normalizedDescribe(n) {
+    if (n.toolName)
+        return [n.toolName, n.operation].filter(Boolean).join(' · ');
+    if (n.operation)
+        return n.operation;
+    const d = n.data;
+    if (typeof d?.message === 'string')
+        return d.message.slice(0, 90);
+    return prettifyEventType(n.eventType);
+}
+function repoLabel(repo) {
+    const identity = repo.owner && repo.repo ? `${repo.owner}/${repo.repo}` : repo.repo ?? '';
+    return identity && repo.root ? `${identity} @ ${repo.root}` : repo.root ?? '';
+}
+function NormalizedEventCard({ event, seq, color, expanded, onToggle, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: expanded ? 8 : 0,
+            padding: '10px 14px',
+            borderRadius: 0,
+            minWidth: 0,
+            overflow: 'hidden',
+            backgroundColor: expanded ? '#0d1520' : '#101722',
+            fontFamily: 'system-ui, sans-serif',
+            fontSize: 13,
+        }, children: [_jsxs("button", { onClick: onToggle, "aria-expanded": expanded, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    width: '100%',
+                    border: 'none',
+                    background: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    fontFamily: 'inherit',
+                    textAlign: 'left',
+                }, children: [_jsxs("span", { style: { color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }, children: ["#", seq] }), _jsx("span", { style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.5,
+                            color,
+                            whiteSpace: 'nowrap',
+                        }, children: prettifyEventType(event.eventType) }), _jsx("span", { style: {
+                            flex: 1,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: '#e5e7eb',
+                        }, children: normalizedDescribe(event) }), _jsx("span", { style: { color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }, children: formatTime(event.timestamp) })] }), expanded ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx(MetaRows, { rows: [
+                            ['eventType', event.eventType],
+                            ['operation', event.operation],
+                            ['toolName', event.toolName],
+                            ['sessionId', event.sessionId],
+                            ['workingDir', event.normalizedWorkingDirectory],
+                            ['repository', event.repository ? repoLabel(event.repository) : undefined],
+                        ] }), event.files && event.files.length > 0 ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs("div", { style: { fontSize: 11, color: '#6b7280' }, children: ["files (", event.files.length, ")"] }), event.files.map((file, i) => (_jsx(FileRow, { file: file }, i)))] })) : null, event.toolInput !== undefined ? (_jsx(ToolIO, { input: event.toolInput, output: event.toolOutput })) : null] })) : null] }));
+}
+function FileRow({ file }) {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx("div", { style: {
+                    color: '#93c5fd',
+                    fontSize: 12,
+                    wordBreak: 'break-word',
+                    fontFamily: 'monospace',
+                }, children: file.displayPath }), _jsxs("div", { style: { color: '#6b7280', fontSize: 11, wordBreak: 'break-word' }, children: [file.context, file.repository
+                        ? ` · ${file.repository.gitRoot} → ${file.repository.relativePath}`
+                        : ` · ${file.absolutePath}`] })] }));
+}
+const OPERATION_COLORS = {
+    starting: '#6b7280',
+    prompting: '#a78bfa',
+    reading: '#a855f7',
+    grepping: '#e879f9',
+    editing: '#22c55e',
+    tool: '#3b82f6',
+    errored: '#ef4444',
+    waiting: '#9ca3af',
+    finished: '#10b981',
+    compacting: '#ec4899',
+    subagent: '#f59e0b',
+};
+function AccumulatedEventCard({ event, seq, expanded, onToggle, }) {
+    if (!event) {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                padding: '10px 14px',
+                borderRadius: 0,
+                minWidth: 0,
+                overflow: 'hidden',
+                border: '1px dashed #1f2937',
+                backgroundColor: '#0d1117',
+                fontFamily: 'system-ui, sans-serif',
+                fontSize: 12,
+            }, children: [_jsxs("span", { style: { color: '#374151', whiteSpace: 'nowrap' }, children: ["#", seq] }), _jsx("span", { style: { color: '#4b5563', fontStyle: 'italic' }, children: "no UI event (accumulator dropped)" })] }));
+    }
+    const opColor = OPERATION_COLORS[event.operation] ?? '#6b7280';
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: expanded ? 8 : 0,
+            padding: '10px 14px',
+            borderRadius: 0,
+            minWidth: 0,
+            overflow: 'hidden',
+            backgroundColor: expanded ? '#121a13' : '#141b16',
+            fontFamily: 'system-ui, sans-serif',
+            fontSize: 13,
+        }, children: [_jsxs("button", { onClick: onToggle, "aria-expanded": expanded, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    width: '100%',
+                    border: 'none',
+                    background: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    fontFamily: 'inherit',
+                    textAlign: 'left',
+                }, children: [_jsx("span", { style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            flexShrink: 0,
+                            backgroundColor: event.sessionColor,
+                        } }), _jsxs("span", { style: { color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }, children: ["#", seq] }), _jsx("span", { style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.5,
+                            color: opColor,
+                            whiteSpace: 'nowrap',
+                        }, children: event.operation }), _jsx("span", { style: {
+                            flex: 1,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: '#e5e7eb',
+                        }, children: event.description }), _jsx("span", { style: { color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }, children: formatTime(event.timestamp) })] }), expanded ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx(MetaRows, { rows: [
+                            ['operation', event.operation],
+                            ['session', event.sessionName],
+                            ['contextTokens', event.contextTokens],
+                            ['toolName', event.toolName],
+                            ['subagent', event.subagentType],
+                            ['childSessionId', event.childSessionId],
+                        ] }), _jsx("div", { style: { fontSize: 12, color: '#6b7280' }, children: event.description }), event.files.length > 0 ? _jsx(PathList, { label: "files", paths: event.files }) : null, event.dependencies.length > 0 ? (_jsx(PathList, { label: "dependencies", paths: event.dependencies })) : null, event.layers.length > 0 ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx("div", { style: { fontSize: 11, color: '#6b7280' }, children: "layers" }), event.layers.map((layer) => (_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center', fontSize: 12 }, children: [_jsx("span", { style: {
+                                            width: 8,
+                                            height: 8,
+                                            borderRadius: '50%',
+                                            backgroundColor: layer.color,
+                                            opacity: 0.8,
+                                        } }), _jsxs("span", { style: { color: '#d1d5db' }, children: [layer.name, " (", layer.items.length, ")"] })] }, layer.id)))] })) : null] })) : null] }));
+}
+function PathList({ label, paths }) {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx("div", { style: { fontSize: 11, color: '#6b7280' }, children: label }), paths.map((p, i) => (_jsx("div", { style: { color: '#93c5fd', fontSize: 11.5, fontFamily: 'monospace', wordBreak: 'break-word' }, children: p.displayPath }, i)))] }));
+}
+function TextView({ text }) {
+    if (!text)
+        return _jsx("div", { style: { color: '#6b7280', fontSize: 12 }, children: "(empty)" });
+    return (_jsx("div", { style: {
+            color: '#d1d5db',
+            fontSize: 12.5,
+            lineHeight: 1.5,
+            maxHeight: 120,
+            overflowY: 'auto',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+        }, children: text }));
+}
+function ToolIO({ input, output }) {
+    const summary = toolSummary(input);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [summary ? (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontSize: 11, color: '#60a5fa', fontWeight: 600 }, children: "IN" }), _jsx("code", { style: { color: '#93c5fd', fontSize: 12, wordBreak: 'break-word' }, children: summary })] })) : null, input !== undefined && input !== null && typeof input === 'object' ? (_jsx(CodeBlock, { value: JSON.stringify(input, null, 2) })) : null, output !== undefined && output !== null ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontSize: 11, color: '#34d399', fontWeight: 600 }, children: "OUT" }), _jsx("span", { style: { fontSize: 11, color: '#6b7280' }, children: typeof output === 'string' ? `${output.length.toLocaleString()} chars` : 'object' })] }), _jsx(CodeBlock, { value: typeof output === 'string' ? output : JSON.stringify(output, null, 2) })] })) : null] }));
+}
+function CodeBlock({ value }) {
+    return (_jsx("pre", { style: {
+            margin: 0,
+            padding: 8,
+            borderRadius: 6,
+            backgroundColor: '#0b1220',
+            color: '#9ca3af',
+            fontSize: 11.5,
+            lineHeight: 1.45,
+            maxHeight: 180,
+            overflow: 'auto',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+        }, children: value }));
+}
+function MetaRows({ rows }) {
+    const present = rows.filter(([, v]) => v !== undefined && v !== null && v !== '');
+    if (present.length === 0)
+        return null;
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 3 }, children: present.map(([label, value]) => (_jsxs("div", { style: { display: 'flex', gap: 8, fontSize: 12 }, children: [_jsx("span", { style: { color: '#6b7280', minWidth: 76, whiteSpace: 'nowrap' }, children: label }), _jsx("span", { style: {
+                        color: '#d1d5db',
+                        wordBreak: 'break-word',
+                        whiteSpace: typeof value === 'string' ? 'pre-wrap' : 'nowrap',
+                    }, children: typeof value === 'string'
+                        ? value
+                        : Array.isArray(value)
+                            ? value.join(', ')
+                            : JSON.stringify(value) })] }, label))) }));
+}
+function JsonView({ value }) {
+    return _jsx(CodeBlock, { value: JSON.stringify(value, null, 2) });
+}
+// =============================================================================
+// Feed
+// =============================================================================
+export function SessionEventFeed({ title, rows }) {
+    const items = useMemo(() => [...rows].sort((a, b) => a.seq - b.seq), [rows]);
+    const seqs = useMemo(() => items.map((r) => r.seq), [items]);
+    const { collapsed, toggle, setAll } = useCollapse(seqs, true);
+    const [active, setActive] = useState('activity');
+    const activePreset = PRESETS.find((p) => p.id === active) ?? PRESETS[0];
+    const isVisible = (raw) => activePreset.include.includes(eventCategory(raw));
+    const visibleEvents = items.filter((r) => isVisible(toRaw(r.raw)));
+    const presetCounts = useMemo(() => {
+        const map = new Map();
+        for (const preset of PRESETS) {
+            map.set(preset.id, items.filter((r) => preset.include.includes(eventCategory(toRaw(r.raw)))).length);
+        }
+        return map;
+    }, [items]);
+    const expandedCount = visibleEvents.filter((r) => !collapsed.has(r.seq)).length;
+    return (_jsxs("div", { style: { padding: 24, backgroundColor: '#0d1117', minHeight: '100vh' }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    gap: 12,
+                    marginBottom: 4,
+                    fontFamily: 'system-ui, sans-serif',
+                }, children: [_jsx("h1", { style: { margin: 0, color: '#f3f4f6', fontSize: 18, fontWeight: 600 }, children: title }), _jsxs("span", { style: { color: '#6b7280', fontSize: 12 }, children: [items.length, " raw events \u00B7 ", visibleEvents.length, " visible \u00B7 ", expandedCount, " expanded"] })] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    gap: 6,
+                    flexWrap: 'wrap',
+                    marginBottom: 16,
+                    fontFamily: 'system-ui, sans-serif',
+                }, children: [_jsx(FilterChip, { label: "all", active: active === 'all', onClick: () => setActive('all') }), PRESETS.filter((p) => p.id !== 'all').map((preset) => (_jsx(FilterChip, { label: `${preset.label} (${presetCounts.get(preset.id) ?? 0})`, active: active === preset.id, onClick: () => setActive(preset.id) }, preset.id))), _jsx("span", { style: { flex: 1 } }), _jsx(FilterChip, { label: "Expand all", active: false, onClick: () => setAll(false) }), _jsx(FilterChip, { label: "Collapse all", active: false, onClick: () => setAll(true) })] }), _jsx(ColumnHeaders, {}), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 1300 }, children: items.map((r) => (_jsx(EventRow, { row: r, visible: isVisible(toRaw(r.raw)), expanded: !collapsed.has(r.seq), onToggle: () => toggle(r.seq) }, r.seq))) })] }));
+}
+export function SessionEventFeedGrouped({ title, rows }) {
+    const items = useMemo(() => [...rows].sort((a, b) => a.seq - b.seq), [rows]);
+    const byKind = useMemo(() => {
+        const map = new Map();
+        for (const r of items) {
+            const kind = eventKind(toRaw(r.raw));
+            map.set(kind, [...(map.get(kind) ?? []), r]);
+        }
+        return map;
+    }, [items]);
+    return (_jsxs("div", { style: { padding: 24, backgroundColor: '#0d1117', minHeight: '100vh' }, children: [title ? (_jsx("h1", { style: { margin: '0 0 12px', color: '#f3f4f6', fontSize: 18, fontWeight: 600, fontFamily: 'system-ui, sans-serif' }, children: title })) : null, _jsx(ColumnHeaders, {}), Array.from(byKind.entries())
+                .sort((a, b) => b[1].length - a[1].length)
+                .map(([kind, group]) => (_jsx(GroupSection, { kind: kind, group: group }, kind)))] }));
+}
+function GroupSection({ kind, group }) {
+    const seqs = useMemo(() => group.map((r) => r.seq), [group]);
+    const { collapsed, toggle, setAll } = useCollapse(seqs, true);
+    return (_jsxs("div", { style: { marginBottom: 20 }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    marginBottom: 8,
+                    fontFamily: 'system-ui, sans-serif',
+                }, children: [_jsx("span", { style: { color: kindColor(kind), fontWeight: 600, fontSize: 13 }, children: kindLabel(kind) }), _jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: group.length }), _jsx("span", { style: { flex: 1 } }), _jsx(FilterChip, { label: "Expand all", active: false, onClick: () => setAll(false) }), _jsx(FilterChip, { label: "Collapse all", active: false, onClick: () => setAll(true) })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 1300 }, children: group.map((r) => (_jsx(EventRow, { row: r, visible: true, expanded: !collapsed.has(r.seq), onToggle: () => toggle(r.seq) }, r.seq))) })] }));
+}
+function ColumnHeaders() {
+    return (_jsxs("div", { style: {
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+            display: 'grid',
+            gridTemplateColumns: '3px 1fr 1fr 1fr',
+            gap: 8,
+            maxWidth: 1300,
+            padding: '8px 14px',
+            marginBottom: 8,
+            backgroundColor: '#0d1117',
+            borderBottom: '1px solid #1f2937',
+            fontFamily: 'system-ui, sans-serif',
+        }, children: [_jsx("span", {}), _jsx(HeaderLabel, { children: "Raw event" }), _jsx(HeaderLabel, { children: "Repo-normalized" }), _jsx(HeaderLabel, { children: "UI event (accumulated)" })] }));
+}
+function HeaderLabel({ children }) {
+    return (_jsx("span", { style: {
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color: '#9ca3af',
+        }, children: children }));
+}
+function EventRow({ row, visible, expanded, onToggle, }) {
+    const raw = toRaw(row.raw);
+    const normalized = toNormalized(row.normalized);
+    if (!visible)
+        return _jsx(FilteredOutLine, { raw: raw });
+    const color = kindColor(eventKind(raw));
+    const files = normalized?.files;
+    const hasPaths = !!files && files.length > 0;
+    return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '3px 1fr 1fr 1fr', gap: 8 }, children: [_jsx("div", { title: hasPaths ? `${files.length} normalized path(s)` : 'no paths to normalize', style: {
+                    backgroundColor: hasPaths ? '#10b981' : '#232c39',
+                    minHeight: '100%',
+                } }), _jsx(RawEventCard, { event: raw, expanded: expanded, onToggle: onToggle }), normalized ? (_jsx(NormalizedEventCard, { event: normalized, seq: row.seq, color: color, expanded: expanded, onToggle: onToggle })) : null, _jsx(AccumulatedEventCard, { event: row.accumulated, seq: row.seq, expanded: expanded, onToggle: onToggle })] }));
+}
+function FilteredOutLine({ raw }) {
+    const color = kindColor(eventKind(raw));
+    return (_jsx("div", { title: describe(raw), style: {
+            height: 2,
+            backgroundColor: color,
+            opacity: 0.16,
+            cursor: 'default',
+        } }));
+}
+function FilterChip({ label, active, color, onClick, }) {
+    return (_jsx("button", { onClick: onClick, style: {
+            padding: '4px 10px',
+            borderRadius: 999,
+            border: `1px solid ${active ? color ?? '#3b82f6' : '#1f2937'}`,
+            backgroundColor: active ? (color ?? '#3b82f6') + '22' : 'transparent',
+            color: active ? '#f3f4f6' : '#9ca3af',
+            fontSize: 11.5,
+            cursor: 'pointer',
+            fontFamily: 'inherit',
+        }, children: label }));
+}
+//# sourceMappingURL=SessionEventFeed.js.map