@principal-ai/subsystems-react 0.17.0

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

@@ -0,0 +1,1196 @@
+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 → repo-normalized → accumulated (UI) pipeline
+ * for every row.
+ *
+ * Input rows match the principal-studio's `SessionEventRow` wire shape:
+ *   { seq, type, raw, normalized, accumulated }
+ * `raw` is the agent-specific payload (opencode V1 sqlite rows, or durable
+ * reader blobs such as Cursor store.db messages), `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, useEffect, useMemo, useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { Check, Copy } from 'lucide-react';
+/** Shared collapse state keyed by row seq. */
+function useCollapse(seqs, defaultCollapsed = false) {
+    const [collapsed, setCollapsed] = useState(() => (defaultCollapsed ? new Set(seqs) : new Set()));
+    // When the feed grows (incremental paging appends rows), default newly added
+    // rows to collapsed so the invariant holds for rows that arrive after mount.
+    useEffect(() => {
+        if (!defaultCollapsed)
+            return;
+        setCollapsed((prev) => {
+            let changed = false;
+            const next = new Set(prev);
+            for (const seq of seqs) {
+                if (!next.has(seq)) {
+                    next.add(seq);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [seqs, defaultCollapsed]);
+    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) {
+    if (raw === null || raw === undefined || typeof raw !== 'object')
+        return null;
+    return raw;
+}
+function toNormalized(normalized) {
+    return normalized;
+}
+// =============================================================================
+// Raw event → presentable pieces
+// =============================================================================
+function dataOf(e) {
+    return (e?.data ?? {});
+}
+function partOf(e) {
+    return dataOf(e).part;
+}
+/** True when the payload looks like an opencode V1 sqlite event row. */
+function isV1RawEvent(e) {
+    return typeof e?.type === 'string' && e.type.length > 0;
+}
+/**
+ * Cursor store.db blobs (and other durable readers) put the whole message in
+ * `raw` — no `type` / `data` envelope. Pull a presentable kind + summary from
+ * the common shapes CursorSessionReader emits:
+ *   - chat message: `{ role, content, id? }`
+ *   - tool wrapper: `{ message, block }` where block is tool-call / tool-result
+ *   - session meta: `{ title?, cwd?, schemaVersion? }`
+ */
+function durableRawKind(e) {
+    const block = e.block;
+    if (block && typeof block === 'object') {
+        const toolName = (block.toolName ?? block.name);
+        const blockType = block.type;
+        if (blockType === 'tool-call' || blockType === 'tool_use') {
+            return toolName ? `tool-call:${toolName}` : 'tool-call';
+        }
+        if (blockType === 'tool-result' || blockType === 'tool_result') {
+            return toolName ? `tool-result:${toolName}` : 'tool-result';
+        }
+        if (typeof blockType === 'string')
+            return blockType;
+    }
+    if (typeof e.role === 'string')
+        return e.role;
+    if (typeof e.title === 'string' || typeof e.cwd === 'string' || typeof e.schemaVersion === 'number') {
+        return 'session-meta';
+    }
+    return 'durable-raw';
+}
+function durableRawDescribe(e) {
+    const block = e.block;
+    if (block && typeof block === 'object') {
+        const toolName = (block.toolName ?? block.name);
+        const blockType = block.type;
+        if (blockType === 'tool-call' || blockType === 'tool_use') {
+            const args = block.args ?? block.input;
+            const summary = toolSummary(args);
+            return [toolName, summary].filter(Boolean).join(' · ') || 'tool call';
+        }
+        if (blockType === 'tool-result' || blockType === 'tool_result') {
+            const result = block.result;
+            const text = typeof result === 'string'
+                ? result.slice(0, 120)
+                : result !== undefined
+                    ? JSON.stringify(result).slice(0, 120)
+                    : '';
+            return [toolName, text].filter(Boolean).join(' · ') || 'tool result';
+        }
+    }
+    if (typeof e.role === 'string') {
+        const content = e.content;
+        if (typeof content === 'string') {
+            const tagged = content.match(/<user_query>\s*([\s\S]*?)\s*<\/user_query>/i);
+            const text = (tagged?.[1] ?? content).trim().replace(/\s+/g, ' ');
+            return text.slice(0, 120) || e.role;
+        }
+        if (Array.isArray(content)) {
+            const texts = content
+                .filter((c) => !!c && typeof c === 'object')
+                .map((c) => (typeof c.text === 'string' ? c.text : c.toolName ?? c.name ?? c.type))
+                .filter(Boolean);
+            return texts.join(' · ').slice(0, 120) || e.role;
+        }
+        return e.role;
+    }
+    if (typeof e.title === 'string')
+        return e.title;
+    if (typeof e.cwd === 'string')
+        return e.cwd;
+    return 'durable raw event';
+}
+function eventTimestamp(e) {
+    if (!e)
+        return 0;
+    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) {
+    if (!e)
+        return 'session';
+    if (!isV1RawEvent(e)) {
+        const kind = durableRawKind(e);
+        if (kind.startsWith('tool-call') || kind.startsWith('tool-result') || kind.startsWith('tool')) {
+            return 'tool';
+        }
+        if (kind === 'session-meta')
+            return 'session';
+        return 'conversation';
+    }
+    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)
+        return 'no-raw';
+    if (!isV1RawEvent(e))
+        return durableRawKind(e);
+    if (e.type === 'message.part.updated.1') {
+        return `part:${partOf(e)?.type ?? 'unknown'}`;
+    }
+    return e.type;
+}
+function kindLabel(kind) {
+    if (!kind)
+        return 'unknown';
+    if (kind.startsWith('part:'))
+        return `part · ${kind.slice(5)}`;
+    if (kind.startsWith('tool-call:'))
+        return `call · ${kind.slice('tool-call:'.length)}`;
+    if (kind.startsWith('tool-result:'))
+        return `result · ${kind.slice('tool-result:'.length)}`;
+    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) {
+    if (!e)
+        return 'finished';
+    if (!isV1RawEvent(e))
+        return durableRawDescribe(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': {
+                    const bits = [toolName, status];
+                    const n = todoCountOf(state?.input);
+                    if (n > 0)
+                        bits.push(`${n} todo${n === 1 ? '' : 's'}`);
+                    return bits.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;
+    }
+}
+/** Number of todos carried by a todowrite tool input, if any. */
+function todoCountOf(input) {
+    if (input && typeof input === 'object') {
+        const todos = input['todos'];
+        if (Array.isArray(todos))
+            return todos.length;
+    }
+    return 0;
+}
+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;
+    // A todowrite input carries the full todo list — summarize by count rather
+    // than dumping truncated JSON.
+    if (Array.isArray(obj['todos']))
+        return `${obj['todos'].length} todos`;
+    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, runCount, snapshotCount, expanded, onToggle, }) {
+    const { theme } = useTheme();
+    const kind = eventKind(event);
+    const d = dataOf(event);
+    const part = partOf(event);
+    const state = part?.state;
+    const color = kindColor(kind);
+    if (!event) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                padding: '10px 14px',
+                borderRadius: 0,
+                minWidth: 0,
+                overflow: 'hidden',
+                border: '1px dashed #1f2937',
+                backgroundColor: '#0d1117',
+                fontFamily: theme.fonts.body,
+                fontSize: 12,
+            }, children: _jsx("span", { style: { color: '#4b5563', fontStyle: 'italic' }, children: "no raw payload" }) }));
+    }
+    const body = (() => {
+        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': {
+                        const todos = state?.input?.['todos'];
+                        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 ?? '')] }), Array.isArray(todos) ? _jsx(TodosView, { todos: todos }) : null, _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:
+                // Durable-agent raw blobs (Cursor store.db, etc.) have no V1 `data`
+                // envelope — dump the whole payload so the expanded card isn't empty.
+                return _jsx(JsonView, { value: isV1RawEvent(event) ? 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: theme.fonts.body,
+            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) }), runCount && runCount > 1 ? (_jsxs("span", { title: `${runCount} separate runs of this command`, style: {
+                            fontSize: 11,
+                            fontWeight: 700,
+                            color: '#f59e0b',
+                            whiteSpace: 'nowrap',
+                        }, children: ["\u00D7", runCount] })) : null, snapshotCount && snapshotCount > 1 ? (_jsxs("span", { title: `${snapshotCount} raw event snapshots collapsed into this row`, style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            color: '#60a5fa',
+                            whiteSpace: 'nowrap',
+                        }, children: [snapshotCount, " events"] })) : null, _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, }) {
+    const { theme } = useTheme();
+    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: theme.fonts.body,
+            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 }) {
+    const { theme } = useTheme();
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx("div", { style: {
+                    color: '#93c5fd',
+                    fontSize: 12,
+                    wordBreak: 'break-word',
+                    fontFamily: theme.fonts.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',
+    globbing: '#14b8a6',
+    listing: '#f97316',
+    editing: '#22c55e',
+    tool: '#3b82f6',
+    errored: '#ef4444',
+    waiting: '#9ca3af',
+    finished: '#10b981',
+    compacting: '#ec4899',
+    subagent: '#f59e0b',
+};
+function AccumulatedEventCard({ event, seq, dropReason, expanded, onToggle, }) {
+    const { theme } = useTheme();
+    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: theme.fonts.body,
+                fontSize: 12,
+            }, children: [_jsxs("span", { style: { color: '#374151', whiteSpace: 'nowrap' }, children: ["#", seq] }), _jsx("span", { style: { color: dropReason ? '#b45309' : '#4b5563', fontStyle: 'italic' }, children: dropReason ?? '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: theme.fonts.body,
+            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 }) {
+    const { theme } = useTheme();
+    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: theme.fonts.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 }));
+}
+const TODO_STATUS_COLORS = {
+    completed: '#22c55e',
+    in_progress: '#f59e0b',
+    pending: '#6b7280',
+};
+function TodosView({ todos }) {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs("div", { style: { fontSize: 11, color: '#6b7280' }, children: ["todos (", todos.length, ")"] }), todos.map((t, i) => (_jsxs("div", { style: { display: 'flex', gap: 8, fontSize: 12, alignItems: 'baseline' }, children: [_jsx("span", { style: {
+                            color: TODO_STATUS_COLORS[String(t.status ?? '')] ?? '#6b7280',
+                            fontWeight: 600,
+                            minWidth: 84,
+                            whiteSpace: 'nowrap',
+                        }, children: String(t.status ?? '') }), _jsx("span", { style: { color: '#d1d5db', wordBreak: 'break-word' }, children: String(t.content ?? '') }), typeof t.priority === 'string' && t.priority ? (_jsxs("span", { style: { color: '#6b7280', whiteSpace: 'nowrap' }, children: ["\u00B7 ", t.priority] })) : null] }, i)))] }));
+}
+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) });
+}
+/**
+ * Why the accumulator dropped a row's UI event, derived from the raw event
+ * alone (no stream context needed). Rows that don't match a known category keep
+ * the generic "dropped" label.
+ */
+function dropReasonFor(raw) {
+    if (!raw)
+        return null;
+    if (raw.type === 'message.updated.1') {
+        const role = dataOf(raw).info?.role;
+        if (role === 'assistant') {
+            return 'assistant message — metadata only (feeds context/token tracking)';
+        }
+        return null; // user messages are handled by the re-save pass below
+    }
+    if (raw.type === 'message.removed.1')
+        return 'message removed — no UI event';
+    if (raw.type === 'message.part.updated.1') {
+        switch (partOf(raw)?.type) {
+            case 'reasoning':
+                return 'model reasoning — not surfaced in the UI';
+            case 'step-start':
+            case 'step-finish':
+                return 'step lifecycle — not surfaced in the UI';
+            case 'text':
+                return 'text content — not surfaced in the UI';
+            case 'tool':
+                return 'tool snapshot — folded into the tool run';
+            default:
+                return null;
+        }
+    }
+    return null;
+}
+/**
+ * Annotate rows the accumulator drops with *why* they were dropped, walking in
+ * stream order. opencode re-saves a user message on every change (seq 1, 6, 24,
+ * 39, 51… share one messageID), so the first occurrence becomes the `prompting`
+ * UI event and every re-save is deduped away — those read "re-save, ignored"
+ * instead of a generic "dropped".
+ */
+function annotateDrops(items) {
+    const seenUserMessageIDs = new Set();
+    return items.map((item) => {
+        const raw = toRaw(item.raw);
+        if (!raw)
+            return item;
+        // Track user message IDs on every occurrence — the first one is the real
+        // prompt (it carries the accumulated UI event); later re-saves are deduped.
+        if (raw.type === 'message.updated.1') {
+            const info = dataOf(raw).info;
+            const messageID = info?.id;
+            const role = info?.role;
+            if (typeof messageID === 'string' && role === 'user') {
+                if (seenUserMessageIDs.has(messageID)) {
+                    if (item.accumulated === null) {
+                        return {
+                            ...item,
+                            dropReason: 're-save of user message — already counted as a prompt',
+                        };
+                    }
+                    return item;
+                }
+                seenUserMessageIDs.add(messageID);
+            }
+        }
+        if (item.accumulated !== null)
+            return item;
+        const reason = dropReasonFor(raw);
+        if (reason)
+            return { ...item, dropReason: reason };
+        return item;
+    });
+}
+/**
+ * Collapse a tool invocation's snapshots into a single row. The raw V1 stream
+ * emits one part update per status flip (pending → running → completed) — and
+ * those flips can be interleaved with other events (reasoning, text, session
+ * bookkeeping) — so snapshots are matched by callID across the whole stream,
+ * not just when consecutive. Distinct calls that repeat the same command and
+ * are consecutive still fold into one ×N row.
+ *
+ * The merged row keeps the run's first seq as a stable key and adopts the
+ * **latest** snapshot's raw/normalized payload (the completed/errored part
+ * carries the tool output). The UI (accumulated) column instead prefers the
+ * group's one non-null accumulated event — the accumulator dedupes to at most
+ * one per invocation, and it's usually the *first* snapshot (e.g. todowrite's
+ * pending emits the `tool` event; running/completed are dropped).
+ */
+function groupToolRuns(items) {
+    const out = [];
+    const byCallID = new Map();
+    let lastGroup = null;
+    let lastGroupCmd = null;
+    const adopt = (group, r, cmd) => {
+        group.snapshotCount = (group.snapshotCount ?? 1) + 1;
+        group.raw = r.raw;
+        group.normalized = r.normalized;
+        const acc = r.accumulated;
+        if (acc !== null) {
+            // Prefer the run's meaningful accumulated. The pending snapshot of a
+            // bash `ls` (empty input) emits a generic `tool` before the completed
+            // snapshot's `listing` arrives — replace a generic `tool` with a more
+            // specific operation, and never downgrade a specific one.
+            if (group.accumulated === null ||
+                (group.accumulated.operation === 'tool' && acc.operation !== 'tool')) {
+                group.accumulated = acc;
+            }
+        }
+        group.type = r.type;
+        lastGroup = group;
+        lastGroupCmd = cmd;
+    };
+    for (const r of items) {
+        const raw = toRaw(r.raw);
+        const isTool = !!raw && raw.type === 'message.part.updated.1' && partOf(raw)?.type === 'tool';
+        const part = partOf(raw);
+        const cmd = isTool
+            ? toolSummary(part?.state?.input)
+            : null;
+        const callID = isTool ? part?.callID : undefined;
+        if (!isTool) {
+            out.push(r);
+            lastGroup = null;
+            lastGroupCmd = null;
+            continue;
+        }
+        // Same invocation — fold this status snapshot in wherever it appears.
+        const existing = callID ? byCallID.get(callID) : undefined;
+        if (existing) {
+            adopt(existing, r, cmd);
+            continue;
+        }
+        // A distinct call repeating the previous group's command folds into it.
+        if (lastGroup && cmd !== null && cmd !== '' && cmd === lastGroupCmd) {
+            if (callID) {
+                lastGroup.callIDs = lastGroup.callIDs ?? new Set();
+                lastGroup.callIDs.add(callID);
+                byCallID.set(callID, lastGroup);
+            }
+            lastGroup.runCount = lastGroup.callIDs ? lastGroup.callIDs.size : 1;
+            adopt(lastGroup, r, cmd);
+            continue;
+        }
+        const group = {
+            ...r,
+            runCount: 1,
+            snapshotCount: 1,
+            callIDs: new Set(callID ? [callID] : []),
+        };
+        if (callID)
+            byCallID.set(callID, group);
+        out.push(group);
+        lastGroup = group;
+        lastGroupCmd = cmd;
+    }
+    return out;
+}
+/**
+ * Fold a user message's events into a single row keyed by messageID: the
+ * original `message.updated.1` (which carries the `prompting` accumulated
+ * event), every re-save of the same message (opencode re-saves a user message
+ * on each change), and the text part(s) that carry its content (the
+ * `notification` events sharing the same messageID). They all resolve to the
+ * one `prompting` accumulated event, so they render as one row with a snapshot
+ * count instead of a wall of "re-save" rows.
+ */
+function groupPromptParts(items) {
+    const out = [];
+    const byMessageID = new Map();
+    for (const item of items) {
+        const raw = toRaw(item.raw);
+        if (!raw) {
+            out.push(item);
+            continue;
+        }
+        if (raw.type === 'message.updated.1') {
+            const info = dataOf(raw).info;
+            const messageID = info?.id;
+            const role = info?.role;
+            if (typeof messageID === 'string' && role === 'user') {
+                const existing = byMessageID.get(messageID);
+                if (existing) {
+                    // re-save of the same user message — fold into its prompt row
+                    existing.snapshotCount = (existing.snapshotCount ?? 1) + 1;
+                    if (existing.accumulated === null && item.accumulated !== null) {
+                        existing.accumulated = item.accumulated;
+                    }
+                    continue;
+                }
+                byMessageID.set(messageID, item);
+            }
+            out.push(item);
+            continue;
+        }
+        if (raw.type === 'message.part.updated.1') {
+            const part = partOf(raw);
+            const messageID = part?.messageID;
+            if (part?.type === 'text' && typeof messageID === 'string') {
+                const existing = byMessageID.get(messageID);
+                if (existing) {
+                    existing.snapshotCount = (existing.snapshotCount ?? 1) + 1;
+                    if (existing.accumulated === null && item.accumulated !== null) {
+                        existing.accumulated = item.accumulated;
+                    }
+                    continue; // absorb the text part into its message row
+                }
+            }
+            out.push(item);
+            continue;
+        }
+        out.push(item);
+    }
+    return out;
+}
+export function SessionEventFeed({ title, rows }) {
+    const { theme } = useTheme();
+    const items = useMemo(() => [...rows].sort((a, b) => a.seq - b.seq), [rows]);
+    const [active, setActive] = useState('activity');
+    const [groupTools, setGroupTools] = useState(true);
+    const displayItems = useMemo(() => annotateDrops(groupPromptParts(groupTools ? groupToolRuns(items) : items)), [items, groupTools]);
+    const seqs = useMemo(() => displayItems.map((r) => r.seq), [displayItems]);
+    const { collapsed, toggle, setAll } = useCollapse(seqs, true);
+    const activePreset = PRESETS.find((p) => p.id === active) ?? PRESETS[0];
+    // "Generic tools" surfaces the improvement backlog: tool rows whose
+    // accumulated operation is still the generic `tool` fallback (e.g. bash
+    // commands that haven't been given a listing/reading/… type yet).
+    const [unprocessedOnly, setUnprocessedOnly] = useState(false);
+    const isVisible = (r) => unprocessedOnly
+        ? r.accumulated?.operation === 'tool'
+        : activePreset.include.includes(eventCategory(toRaw(r.raw)));
+    const visibleEvents = displayItems.filter(isVisible);
+    const presetCounts = useMemo(() => {
+        const map = new Map();
+        for (const preset of PRESETS) {
+            map.set(preset.id, displayItems.filter((r) => preset.include.includes(eventCategory(toRaw(r.raw)))).length);
+        }
+        return map;
+    }, [displayItems]);
+    const unprocessedCount = useMemo(() => displayItems.filter((r) => r.accumulated?.operation === 'tool').length, [displayItems]);
+    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: theme.fonts.body,
+                }, 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: theme.fonts.body,
+                }, 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: `Generic tools (${unprocessedCount})`, active: unprocessedOnly, onClick: () => setUnprocessedOnly((v) => !v) }), _jsx(FilterChip, { label: groupTools ? 'Group tool runs: on' : 'Group tool runs: off', active: groupTools, onClick: () => setGroupTools((v) => !v) }), _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 }, children: displayItems.map((r) => (_jsx(EventRow, { row: r, sessionTitle: title, runCount: r.runCount, snapshotCount: r.snapshotCount, visible: isVisible(r), expanded: !collapsed.has(r.seq), onToggle: () => toggle(r.seq) }, r.seq))) })] }));
+}
+export function SessionEventFeedGrouped({ title, rows }) {
+    const { theme } = useTheme();
+    const items = useMemo(() => annotateDrops(groupPromptParts([...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: theme.fonts.body }, 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, sessionTitle: title }, kind)))] }));
+}
+function GroupSection({ kind, group, sessionTitle, }) {
+    const { theme } = useTheme();
+    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: theme.fonts.body,
+                }, 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 }, children: group.map((r) => (_jsx(EventRow, { row: r, sessionTitle: sessionTitle, visible: true, expanded: !collapsed.has(r.seq), onToggle: () => toggle(r.seq) }, r.seq))) })] }));
+}
+function ColumnHeaders() {
+    const { theme } = useTheme();
+    return (_jsxs("div", { style: {
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+            display: 'grid',
+            gridTemplateColumns: '3px 1fr 1fr 1fr 28px',
+            gap: 8,
+            padding: '8px 14px',
+            marginBottom: 8,
+            backgroundColor: '#0d1117',
+            borderBottom: '1px solid #1f2937',
+            fontFamily: theme.fonts.body,
+        }, children: [_jsx("span", {}), _jsx(HeaderLabel, { children: "Raw event" }), _jsx(HeaderLabel, { children: "Repo-normalized" }), _jsx(HeaderLabel, { children: "UI event (accumulated)" }), _jsx("span", {})] }));
+}
+function HeaderLabel({ children }) {
+    return (_jsx("span", { style: {
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color: '#9ca3af',
+        }, children: children }));
+}
+/**
+ * Assemble a self-contained, discussion-ready text block for one row: enough
+ * identifiers and detail (session, seq, raw → normalized → UI) that the block
+ * carries the whole issue without the viewer open. Paste this into a chat, an
+ * agent conversation, or an issue to talk about the event.
+ */
+function buildRowContext(row, sessionTitle) {
+    const raw = toRaw(row.raw);
+    const d = dataOf(raw);
+    const part = partOf(raw);
+    const state = part?.state;
+    const normalized = toNormalized(row.normalized);
+    const acc = row.accumulated;
+    const lines = [];
+    const runCount = row.runCount;
+    const snapshotCount = row.snapshotCount;
+    const runLabel = runCount && runCount > 1 ? ` ×${runCount} runs` : '';
+    const snapLabel = snapshotCount && snapshotCount > 1 ? ` · ${snapshotCount} snapshots collapsed` : '';
+    lines.push(`## Event #${row.seq} — ${kindLabel(eventKind(raw))}${runLabel}${snapLabel}`);
+    lines.push(`_${formatTime(eventTimestamp(raw))} · \`${row.type}\`_`);
+    lines.push('');
+    if (sessionTitle)
+        lines.push(`**Session:** ${sessionTitle}`);
+    const sessionID = d.sessionID ?? normalized?.sessionId ?? acc?.sessionId;
+    if (sessionID)
+        lines.push(`Session id: \`${sessionID}\``);
+    lines.push('');
+    lines.push('**Raw:**');
+    if (!raw) {
+        lines.push('- no raw payload');
+    }
+    else {
+        lines.push(`- event type: \`${raw.type}\``);
+        if (typeof part?.type === 'string')
+            lines.push(`- part type: \`${part.type}\``);
+        if (typeof part?.callID === 'string')
+            lines.push(`- callID: \`${part.callID}\``);
+        if (typeof part?.tool === 'string')
+            lines.push(`- tool: \`${part.tool}\``);
+        if (typeof state?.status === 'string')
+            lines.push(`- status: \`${state.status}\``);
+        const inSummary = toolSummary(state?.input);
+        if (inSummary)
+            lines.push(`- input: \`${inSummary}\``);
+        const out = state?.status === 'error' ? state?.error : state?.output;
+        if (typeof out === 'string') {
+            const preview = out.length > 500 ? `${out.slice(0, 500)}\n…[+${out.length - 500} chars]` : out;
+            lines.push(`- output (${out.length.toLocaleString()} chars):\n\`\`\`\n${preview}\n\`\`\``);
+        }
+    }
+    lines.push('');
+    if (normalized && typeof normalized.eventType === 'string') {
+        lines.push('**Normalized:**');
+        lines.push(`- eventType: \`${normalized.eventType}\``);
+        if (typeof normalized.operation === 'string' && normalized.operation) {
+            lines.push(`- operation: \`${normalized.operation}\``);
+        }
+        if (typeof normalized.toolName === 'string' && normalized.toolName) {
+            lines.push(`- toolName: \`${normalized.toolName}\``);
+        }
+        const files = normalized.files ?? [];
+        if (files.length > 0) {
+            lines.push(`- files: ${files.map((f) => `\`${f.displayPath}\``).join(', ')}`);
+        }
+        lines.push('');
+    }
+    if (acc) {
+        lines.push('**UI event (accumulated):**');
+        lines.push(`- operation: \`${acc.operation}\``);
+        lines.push(`- description: ${acc.description}`);
+        if (typeof acc.contextTokens === 'number' && acc.contextTokens > 0) {
+            lines.push(`- contextTokens: ${acc.contextTokens}`);
+        }
+        if (acc.files.length > 0) {
+            lines.push(`- files: ${acc.files.map((f) => f.displayPath).join(', ')}`);
+        }
+    }
+    else {
+        const dropReason = row.dropReason;
+        lines.push(`**UI event:** ${dropReason ?? 'none (accumulator dropped this event)'}`);
+    }
+    return lines.join('\n');
+}
+async function copyRowContext(row, sessionTitle) {
+    const text = buildRowContext(row, sessionTitle);
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch (err) {
+        console.error('[session-events] copy failed:', err);
+        return false;
+    }
+}
+function EventRow({ row, sessionTitle, runCount, snapshotCount, visible, expanded, onToggle, }) {
+    const raw = toRaw(row.raw);
+    const normalized = toNormalized(row.normalized);
+    const { theme } = useTheme();
+    const [copied, setCopied] = useState(false);
+    if (!visible)
+        return _jsx(FilteredOutLine, { raw: raw });
+    const color = kindColor(eventKind(raw));
+    const files = normalized?.files;
+    const hasPaths = !!files && files.length > 0;
+    const onCopy = () => {
+        void copyRowContext(row, sessionTitle).then((ok) => {
+            if (!ok)
+                return;
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    };
+    return (_jsxs("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: '3px 1fr 1fr 1fr 28px',
+            gridAutoRows: 'min-content',
+            gap: 8,
+        }, children: [_jsx("div", { title: hasPaths ? `${files.length} normalized path(s)` : 'no paths to normalize', style: {
+                    backgroundColor: hasPaths ? '#10b981' : '#232c39',
+                } }), _jsx(RawEventCard, { event: raw, runCount: runCount, snapshotCount: snapshotCount, 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, dropReason: row.dropReason, expanded: expanded, onToggle: onToggle }), _jsx("button", { type: "button", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onCopy();
+                }, title: "Copy this row's context for a discussion", "aria-label": "Copy row context", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    alignSelf: 'stretch',
+                    padding: 0,
+                    border: 'none',
+                    borderRadius: 4,
+                    appearance: 'none',
+                    cursor: 'pointer',
+                    background: copied ? 'rgba(16,185,129,0.12)' : 'transparent',
+                    color: copied ? '#10b981' : theme.colors.textTertiary,
+                    fontSize: 12,
+                }, children: copied ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }) })] }));
+}
+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