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

package/src/components/session-events/SessionEventFeed.tsx

@@ -0,0 +1,1151 @@
+/**
+ * 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 React, { useCallback, useMemo, useState } from 'react';
+import type {
+  AgentSessionEvent,
+  NormalizedPathInfo,
+  RepoNormalizedUniversalAgentSessionEvent,
+  V1RawEvent,
+} from '@principal-ai/agent-monitoring';
+
+export interface SessionEventFeedRow {
+  seq: number;
+  type: string;
+  raw: unknown;
+  normalized?: Record<string, unknown>;
+  accumulated: AgentSessionEvent | null;
+}
+
+export interface SessionEventFeedProps {
+  title?: string;
+  rows: SessionEventFeedRow[];
+}
+
+export interface SessionEventFeedGroupedProps {
+  title?: string;
+  rows: SessionEventFeedRow[];
+}
+
+type AnyRecord = Record<string, unknown>;
+type NormalizedFeedEvent = Omit<RepoNormalizedUniversalAgentSessionEvent, 'raw'>;
+
+/** Shared collapse state keyed by row seq. */
+function useCollapse(seqs: number[], defaultCollapsed = false) {
+  const [collapsed, setCollapsed] = useState<Set<number>>(
+    () => (defaultCollapsed ? new Set(seqs) : new Set<number>()),
+  );
+  const toggle = useCallback((seq: number) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(seq)) next.delete(seq);
+      else next.add(seq);
+      return next;
+    });
+  }, []);
+  const setAll = useCallback(
+    (value: boolean) => setCollapsed(value ? new Set(seqs) : new Set<number>()),
+    [seqs],
+  );
+  return { collapsed, toggle, setAll };
+}
+
+function toRaw(raw: unknown): V1RawEvent {
+  return raw as V1RawEvent;
+}
+
+function toNormalized(normalized?: Record<string, unknown>): NormalizedFeedEvent | undefined {
+  return normalized as NormalizedFeedEvent | undefined;
+}
+
+// =============================================================================
+// Raw event → presentable pieces
+// =============================================================================
+
+function dataOf(e: V1RawEvent): AnyRecord {
+  return (e.data ?? {}) as AnyRecord;
+}
+
+function partOf(e: V1RawEvent): AnyRecord | undefined {
+  return dataOf(e).part as AnyRecord | undefined;
+}
+
+function eventTimestamp(e: V1RawEvent): number {
+  const d = dataOf(e);
+  if (typeof d.time === 'number') return d.time;
+  const info = d.info as AnyRecord | undefined;
+  const infoTime = info?.time as AnyRecord | undefined;
+  if (typeof infoTime?.created === 'number') return infoTime.created;
+  const part = partOf(e);
+  if (typeof part?.time === 'number') return part.time;
+  const state = part?.state as AnyRecord | undefined;
+  const stateTime = state?.time as AnyRecord | undefined;
+  if (typeof stateTime?.start === 'number') return stateTime.start;
+  if (typeof stateTime?.end === 'number') return stateTime.end;
+  return 0;
+}
+
+// =============================================================================
+// Event categorization (drives the preset filters)
+// =============================================================================
+
+type EventCategory = 'session' | 'conversation' | 'tool' | 'step' | 'patch' | 'compaction';
+
+const ALL_CATEGORIES: EventCategory[] = [
+  'session',
+  'conversation',
+  'tool',
+  'step',
+  'patch',
+  'compaction',
+];
+
+function eventCategory(e: V1RawEvent): EventCategory {
+  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: Array<{ id: string; label: string; include: EventCategory[] }> = [
+  { 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: V1RawEvent): string {
+  if (e.type === 'message.part.updated.1') {
+    return `part:${partOf(e)?.type ?? 'unknown'}`;
+  }
+  return e.type;
+}
+
+function kindLabel(kind: string): string {
+  if (kind.startsWith('part:')) return `part · ${kind.slice(5)}`;
+  return kind;
+}
+
+const KIND_COLORS: Record<string, string> = {
+  '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: string): string {
+  return KIND_COLORS[kind] ?? '#6b7280';
+}
+
+function describe(e: V1RawEvent): string {
+  const d = dataOf(e);
+  const info = d.info as AnyRecord | undefined;
+  const part = partOf(e);
+  const state = part?.state as AnyRecord | undefined;
+
+  switch (e.type) {
+    case 'session.created.1':
+      return (info?.title as string) ?? 'Session created';
+    case 'session.updated.1': {
+      const bits: string[] = [];
+      const tokens = info?.tokens as AnyRecord | undefined;
+      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 as string) ?? 'message';
+      const model = (info?.model as AnyRecord | undefined)?.modelID as string | undefined;
+      return model ? `${role} message · ${model}` : `${role} message`;
+    }
+    case 'message.removed.1':
+      return `Removed ${d.messageID as string}`;
+    case 'message.part.updated.1': {
+      const partType = part?.type as string;
+      const toolName = part?.tool as string | undefined;
+      const status = state?.status as string | undefined;
+      switch (partType) {
+        case 'text':
+          return (part?.text as string) ?? 'Text';
+        case 'reasoning':
+          return (part?.text as string) || '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 as string}` : 'Step finish';
+        case 'patch': {
+          const files = part?.files as string[] | undefined;
+          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: unknown): string {
+  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 as AnyRecord;
+  for (const key of ['command', 'filePath', 'file_path', 'path', 'pattern', 'include', 'tool']) {
+    if (typeof obj[key] === 'string' && obj[key] !== '') return obj[key] as string;
+  }
+  return JSON.stringify(input).slice(0, 120);
+}
+
+// =============================================================================
+// Cards
+// =============================================================================
+
+function formatTime(ts: number): string {
+  if (!ts) return '';
+  return new Date(ts).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+function RawEventCard({
+  event,
+  expanded,
+  onToggle,
+}: {
+  event: V1RawEvent;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  const kind = eventKind(event);
+  const d = dataOf(event);
+  const part = partOf(event);
+  const state = part?.state as AnyRecord | undefined;
+  const color = kindColor(kind);
+
+  const body = useMemo(
+    () =>
+      ((): React.ReactNode => {
+        switch (event.type) {
+          case 'session.created.1': {
+            const info = d.info as AnyRecord | undefined;
+            return (
+              <MetaRows
+                rows={[
+                  ['agent', info?.agent as string],
+                  ['model', ((info?.model as AnyRecord | undefined)?.id as string) ?? ((info?.model as AnyRecord | undefined)?.modelID as string)],
+                  ['directory', info?.directory as string],
+                  ['version', info?.version as string],
+                  ['slug', info?.slug as string],
+                ]}
+              />
+            );
+          }
+          case 'session.updated.1': {
+            const info = d.info as AnyRecord | undefined;
+            return (
+              <MetaRows
+                rows={[
+                  ['cost', typeof info?.cost === 'number' ? `$${info.cost.toFixed(4)}` : undefined],
+                  ['tokens', info?.tokens as AnyRecord | undefined],
+                  ['title', info?.title as string],
+                ]}
+              />
+            );
+          }
+          case 'message.updated.1': {
+            const info = d.info as AnyRecord | undefined;
+            return (
+              <MetaRows
+                rows={[
+                  ['role', info?.role as string],
+                  ['agent', info?.agent as string],
+                  ['model', info?.model as AnyRecord | undefined],
+                  ['tokens', info?.tokens as AnyRecord | undefined],
+                  ['messageID', info?.id as string],
+                ]}
+              />
+            );
+          }
+          case 'message.removed.1':
+            return <MetaRows rows={[['messageID', d.messageID as string]]} />;
+          case 'message.part.updated.1': {
+            switch (part?.type) {
+              case 'text':
+              case 'reasoning':
+                return <TextView text={part?.text as string | undefined} />;
+              case 'tool':
+                return (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <div style={{ fontSize: 12, color: '#9ca3af' }}>
+                      callID {String(part?.callID ?? '')} · {String(state?.status ?? '')}
+                    </div>
+                    <ToolIO
+                      input={state?.input}
+                      output={state?.status === 'error' ? state?.error : state?.output}
+                    />
+                  </div>
+                );
+              case 'step-start':
+                return <MetaRows rows={[['snapshot', part?.snapshot as string]]} />;
+              case 'step-finish':
+                return (
+                  <MetaRows
+                    rows={[
+                      ['reason', part?.reason as string],
+                      ['cost', typeof part?.cost === 'number' ? `$${part.cost.toFixed(4)}` : undefined],
+                      ['tokens', part?.tokens as AnyRecord | undefined],
+                    ]}
+                  />
+                );
+              case 'patch':
+                return (
+                  <MetaRows
+                    rows={[
+                      ['files', part?.files as string[] | undefined],
+                      ['hash', part?.hash as string],
+                    ]}
+                  />
+                );
+              case 'compaction':
+                return (
+                  <MetaRows
+                    rows={[
+                      ['auto', typeof part?.auto === 'boolean' ? String(part.auto) : undefined],
+                      ['overflow', typeof part?.overflow === 'boolean' ? String(part.overflow) : undefined],
+                    ]}
+                  />
+                );
+              default:
+                return <JsonView value={d} />;
+            }
+          }
+          default:
+            return <JsonView value={d} />;
+        }
+      })(),
+    [event],
+  );
+
+  return (
+    <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,
+      }}
+    >
+      <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',
+        }}
+      >
+        <span style={{ color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }}>#{event.seq}</span>
+        <span
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {kindLabel(kind)}
+        </span>
+        <span
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: '#e5e7eb',
+          }}
+        >
+          {describe(event)}
+        </span>
+        <span style={{ color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }}>
+          {formatTime(eventTimestamp(event))}
+        </span>
+      </button>
+      {expanded ? body : null}
+    </div>
+  );
+}
+
+function prettifyEventType(t: string): string {
+  return t.replace(/-/g, ' ');
+}
+
+function normalizedDescribe(n: NormalizedFeedEvent): string {
+  if (n.toolName) return [n.toolName, n.operation].filter(Boolean).join(' · ');
+  if (n.operation) return n.operation;
+  const d = n.data as AnyRecord | undefined;
+  if (typeof d?.message === 'string') return d.message.slice(0, 90);
+  return prettifyEventType(n.eventType);
+}
+
+function repoLabel(repo: {
+  root?: string;
+  owner?: string;
+  repo?: string;
+  remoteUrl?: string;
+}): string {
+  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,
+}: {
+  event: NormalizedFeedEvent;
+  seq: number;
+  color: string;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <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,
+      }}
+    >
+      <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',
+        }}
+      >
+        <span style={{ color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }}>#{seq}</span>
+        <span
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {prettifyEventType(event.eventType)}
+        </span>
+        <span
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: '#e5e7eb',
+          }}
+        >
+          {normalizedDescribe(event)}
+        </span>
+        <span style={{ color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }}>
+          {formatTime(event.timestamp)}
+        </span>
+      </button>
+      {expanded ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <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 ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+              <div style={{ fontSize: 11, color: '#6b7280' }}>files ({event.files.length})</div>
+              {event.files.map((file, i) => (
+                <FileRow key={i} file={file} />
+              ))}
+            </div>
+          ) : null}
+          {event.toolInput !== undefined ? (
+            <ToolIO input={event.toolInput} output={event.toolOutput} />
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function FileRow({ file }: { file: NormalizedPathInfo }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+      <div
+        style={{
+          color: '#93c5fd',
+          fontSize: 12,
+          wordBreak: 'break-word',
+          fontFamily: 'monospace',
+        }}
+      >
+        {file.displayPath}
+      </div>
+      <div style={{ color: '#6b7280', fontSize: 11, wordBreak: 'break-word' }}>
+        {file.context}
+        {file.repository
+          ? ` · ${file.repository.gitRoot} → ${file.repository.relativePath}`
+          : ` · ${file.absolutePath}`}
+      </div>
+    </div>
+  );
+}
+
+const OPERATION_COLORS: Record<string, string> = {
+  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,
+}: {
+  event: AgentSessionEvent | null;
+  seq: number;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  if (!event) {
+    return (
+      <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,
+        }}
+      >
+        <span style={{ color: '#374151', whiteSpace: 'nowrap' }}>#{seq}</span>
+        <span style={{ color: '#4b5563', fontStyle: 'italic' }}>
+          no UI event (accumulator dropped)
+        </span>
+      </div>
+    );
+  }
+
+  const opColor = OPERATION_COLORS[event.operation] ?? '#6b7280';
+
+  return (
+    <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,
+      }}
+    >
+      <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',
+        }}
+      >
+        <span
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            flexShrink: 0,
+            backgroundColor: event.sessionColor,
+          }}
+        />
+        <span style={{ color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }}>#{seq}</span>
+        <span
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color: opColor,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {event.operation}
+        </span>
+        <span
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: '#e5e7eb',
+          }}
+        >
+          {event.description}
+        </span>
+        <span style={{ color: '#6b7280', fontSize: 11, whiteSpace: 'nowrap' }}>
+          {formatTime(event.timestamp)}
+        </span>
+      </button>
+      {expanded ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <MetaRows
+            rows={[
+              ['operation', event.operation],
+              ['session', event.sessionName],
+              ['contextTokens', event.contextTokens],
+              ['toolName', event.toolName],
+              ['subagent', event.subagentType],
+              ['childSessionId', event.childSessionId],
+            ]}
+          />
+          <div style={{ fontSize: 12, color: '#6b7280' }}>{event.description}</div>
+          {event.files.length > 0 ? <PathList label="files" paths={event.files} /> : null}
+          {event.dependencies.length > 0 ? (
+            <PathList label="dependencies" paths={event.dependencies} />
+          ) : null}
+          {event.layers.length > 0 ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <div style={{ fontSize: 11, color: '#6b7280' }}>layers</div>
+              {event.layers.map((layer) => (
+                <div
+                  key={layer.id}
+                  style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 12 }}
+                >
+                  <span
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      backgroundColor: layer.color,
+                      opacity: 0.8,
+                    }}
+                  />
+                  <span style={{ color: '#d1d5db' }}>
+                    {layer.name} ({layer.items.length})
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function PathList({ label, paths }: { label: string; paths: NormalizedPathInfo[] }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <div style={{ fontSize: 11, color: '#6b7280' }}>{label}</div>
+      {paths.map((p, i) => (
+        <div
+          key={i}
+          style={{ color: '#93c5fd', fontSize: 11.5, fontFamily: 'monospace', wordBreak: 'break-word' }}
+        >
+          {p.displayPath}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TextView({ text }: { text?: string }) {
+  if (!text) return <div style={{ color: '#6b7280', fontSize: 12 }}>(empty)</div>;
+  return (
+    <div
+      style={{
+        color: '#d1d5db',
+        fontSize: 12.5,
+        lineHeight: 1.5,
+        maxHeight: 120,
+        overflowY: 'auto',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+      }}
+    >
+      {text}
+    </div>
+  );
+}
+
+function ToolIO({ input, output }: { input?: unknown; output?: unknown }) {
+  const summary = toolSummary(input);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      {summary ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 11, color: '#60a5fa', fontWeight: 600 }}>IN</span>
+          <code style={{ color: '#93c5fd', fontSize: 12, wordBreak: 'break-word' }}>{summary}</code>
+        </div>
+      ) : null}
+      {input !== undefined && input !== null && typeof input === 'object' ? (
+        <CodeBlock value={JSON.stringify(input, null, 2)} />
+      ) : null}
+      {output !== undefined && output !== null ? (
+        <>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{ fontSize: 11, color: '#34d399', fontWeight: 600 }}>OUT</span>
+            <span style={{ fontSize: 11, color: '#6b7280' }}>
+              {typeof output === 'string' ? `${output.length.toLocaleString()} chars` : 'object'}
+            </span>
+          </div>
+          <CodeBlock value={typeof output === 'string' ? output : JSON.stringify(output, null, 2)} />
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function CodeBlock({ value }: { value: string }) {
+  return (
+    <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',
+      }}
+    >
+      {value}
+    </pre>
+  );
+}
+
+function MetaRows({ rows }: { rows: Array<[string, unknown]> }) {
+  const present = rows.filter(([, v]) => v !== undefined && v !== null && v !== '');
+  if (present.length === 0) return null;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {present.map(([label, value]) => (
+        <div key={label} style={{ display: 'flex', gap: 8, fontSize: 12 }}>
+          <span style={{ color: '#6b7280', minWidth: 76, whiteSpace: 'nowrap' }}>{label}</span>
+          <span
+            style={{
+              color: '#d1d5db',
+              wordBreak: 'break-word',
+              whiteSpace: typeof value === 'string' ? 'pre-wrap' : 'nowrap',
+            }}
+          >
+            {typeof value === 'string'
+              ? value
+              : Array.isArray(value)
+                ? (value as unknown[]).join(', ')
+                : JSON.stringify(value)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function JsonView({ value }: { value: unknown }) {
+  return <CodeBlock value={JSON.stringify(value, null, 2)} />;
+}
+
+// =============================================================================
+// Feed
+// =============================================================================
+
+export function SessionEventFeed({ title, rows }: SessionEventFeedProps) {
+  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<string>('activity');
+
+  const activePreset = PRESETS.find((p) => p.id === active) ?? PRESETS[0];
+  const isVisible = (raw: V1RawEvent) => activePreset.include.includes(eventCategory(raw));
+  const visibleEvents = items.filter((r) => isVisible(toRaw(r.raw)));
+
+  const presetCounts = useMemo(() => {
+    const map = new Map<string, number>();
+    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 (
+    <div style={{ padding: 24, backgroundColor: '#0d1117', minHeight: '100vh' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 12,
+          marginBottom: 4,
+          fontFamily: 'system-ui, sans-serif',
+        }}
+      >
+        <h1 style={{ margin: 0, color: '#f3f4f6', fontSize: 18, fontWeight: 600 }}>{title}</h1>
+        <span style={{ color: '#6b7280', fontSize: 12 }}>
+          {items.length} raw events · {visibleEvents.length} visible · {expandedCount} expanded
+        </span>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          gap: 6,
+          flexWrap: 'wrap',
+          marginBottom: 16,
+          fontFamily: 'system-ui, sans-serif',
+        }}
+      >
+        <FilterChip label="all" active={active === 'all'} onClick={() => setActive('all')} />
+        {PRESETS.filter((p) => p.id !== 'all').map((preset) => (
+          <FilterChip
+            key={preset.id}
+            label={`${preset.label} (${presetCounts.get(preset.id) ?? 0})`}
+            active={active === preset.id}
+            onClick={() => setActive(preset.id)}
+          />
+        ))}
+        <span style={{ flex: 1 }} />
+        <FilterChip label="Expand all" active={false} onClick={() => setAll(false)} />
+        <FilterChip label="Collapse all" active={false} onClick={() => setAll(true)} />
+      </div>
+      <ColumnHeaders />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 1300 }}>
+        {items.map((r) => (
+          <EventRow
+            key={r.seq}
+            row={r}
+            visible={isVisible(toRaw(r.raw))}
+            expanded={!collapsed.has(r.seq)}
+            onToggle={() => toggle(r.seq)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SessionEventFeedGrouped({ title, rows }: SessionEventFeedGroupedProps) {
+  const items = useMemo(() => [...rows].sort((a, b) => a.seq - b.seq), [rows]);
+  const byKind = useMemo(() => {
+    const map = new Map<string, SessionEventFeedRow[]>();
+    for (const r of items) {
+      const kind = eventKind(toRaw(r.raw));
+      map.set(kind, [...(map.get(kind) ?? []), r]);
+    }
+    return map;
+  }, [items]);
+
+  return (
+    <div style={{ padding: 24, backgroundColor: '#0d1117', minHeight: '100vh' }}>
+      {title ? (
+        <h1 style={{ margin: '0 0 12px', color: '#f3f4f6', fontSize: 18, fontWeight: 600, fontFamily: 'system-ui, sans-serif' }}>
+          {title}
+        </h1>
+      ) : null}
+      <ColumnHeaders />
+      {Array.from(byKind.entries())
+        .sort((a, b) => b[1].length - a[1].length)
+        .map(([kind, group]) => (
+          <GroupSection key={kind} kind={kind} group={group} />
+        ))}
+    </div>
+  );
+}
+
+function GroupSection({ kind, group }: { kind: string; group: SessionEventFeedRow[] }) {
+  const seqs = useMemo(() => group.map((r) => r.seq), [group]);
+  const { collapsed, toggle, setAll } = useCollapse(seqs, true);
+
+  return (
+    <div style={{ marginBottom: 20 }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          marginBottom: 8,
+          fontFamily: 'system-ui, sans-serif',
+        }}
+      >
+        <span style={{ color: kindColor(kind), fontWeight: 600, fontSize: 13 }}>
+          {kindLabel(kind)}
+        </span>
+        <span style={{ color: '#6b7280', fontSize: 12 }}>{group.length}</span>
+        <span style={{ flex: 1 }} />
+        <FilterChip label="Expand all" active={false} onClick={() => setAll(false)} />
+        <FilterChip label="Collapse all" active={false} onClick={() => setAll(true)} />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 1300 }}>
+        {group.map((r) => (
+          <EventRow
+            key={r.seq}
+            row={r}
+            visible
+            expanded={!collapsed.has(r.seq)}
+            onToggle={() => toggle(r.seq)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ColumnHeaders() {
+  return (
+    <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',
+      }}
+    >
+      <span />
+      <HeaderLabel>Raw event</HeaderLabel>
+      <HeaderLabel>Repo-normalized</HeaderLabel>
+      <HeaderLabel>UI event (accumulated)</HeaderLabel>
+    </div>
+  );
+}
+
+function HeaderLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      style={{
+        fontSize: 11,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+        color: '#9ca3af',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function EventRow({
+  row,
+  visible,
+  expanded,
+  onToggle,
+}: {
+  row: SessionEventFeedRow;
+  visible: boolean;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  const raw = toRaw(row.raw);
+  const normalized = toNormalized(row.normalized);
+  if (!visible) return <FilteredOutLine raw={raw} />;
+  const color = kindColor(eventKind(raw));
+  const files = normalized?.files;
+  const hasPaths = !!files && files.length > 0;
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '3px 1fr 1fr 1fr', gap: 8 }}>
+      <div
+        title={hasPaths ? `${files.length} normalized path(s)` : 'no paths to normalize'}
+        style={{
+          backgroundColor: hasPaths ? '#10b981' : '#232c39',
+          minHeight: '100%',
+        }}
+      />
+      <RawEventCard event={raw} expanded={expanded} onToggle={onToggle} />
+      {normalized ? (
+        <NormalizedEventCard
+          event={normalized}
+          seq={row.seq}
+          color={color}
+          expanded={expanded}
+          onToggle={onToggle}
+        />
+      ) : null}
+      <AccumulatedEventCard
+        event={row.accumulated}
+        seq={row.seq}
+        expanded={expanded}
+        onToggle={onToggle}
+      />
+    </div>
+  );
+}
+
+function FilteredOutLine({ raw }: { raw: V1RawEvent }) {
+  const color = kindColor(eventKind(raw));
+  return (
+    <div
+      title={describe(raw)}
+      style={{
+        height: 2,
+        backgroundColor: color,
+        opacity: 0.16,
+        cursor: 'default',
+      }}
+    />
+  );
+}
+
+function FilterChip({
+  label,
+  active,
+  color,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  color?: string;
+  onClick: () => void;
+}) {
+  return (
+    <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',
+      }}
+    >
+      {label}
+    </button>
+  );
+}