diff --git a/apps/vis/server/src/app.ts b/apps/vis/server/src/app.ts
index 41b9abb..e2670b1 100644
--- a/apps/vis/server/src/app.ts
+++ b/apps/vis/server/src/app.ts
@@ -8,7 +8,6 @@ import { contextRoute } from './routes/context';
 import { sessionDetailRoute } from './routes/session-detail';
 import { sessionsRoute } from './routes/sessions';
 import { subagentsRoute } from './routes/subagents';
-import { toolResultsRoute } from './routes/tool-results';
 import { wireRoute } from './routes/wire';
 
 /** Resolve the SPA bundle directory next to the compiled server.mjs, if it
@@ -87,9 +86,11 @@ export async function createApp(options: CreateAppOptions = {}): Promise<Hono> {
   api.route('/sessions', sessionsRoute());
   api.route('/sessions', sessionDetailRoute());
   api.route('/sessions', wireRoute());
-  api.route('/sessions', contextRoute());
   api.route('/sessions', subagentsRoute());
-  api.route('/sessions', toolResultsRoute());
+  // Mount contextRoute last because it currently uses a catch-all stub
+  // (Phase C scope) that would otherwise shadow more specific routes
+  // registered below it.
+  api.route('/sessions', contextRoute());
 
   app.route('/api', api);
 
diff --git a/apps/vis/server/src/config.ts b/apps/vis/server/src/config.ts
index 7c9421c..1a719f3 100644
--- a/apps/vis/server/src/config.ts
+++ b/apps/vis/server/src/config.ts
@@ -1,4 +1,3 @@
-import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
 
@@ -53,104 +52,3 @@ export function resolveVisAuthToken(host: string = resolveHost()): string | unde
 }
 
 export const KIMI_CODE_HOME: string = resolveKimiCodeHome();
-
-export class VisPathConfig {
-  readonly sessionsDir: string;
-
-  constructor(readonly home: string) {
-    this.sessionsDir = join(home, 'sessions');
-  }
-
-  sessionDir(sessionId: string): string {
-    return (
-      this.findIndexedSessionDir(sessionId) ??
-      this.findNestedSessionDir(sessionId) ??
-      join(this.sessionsDir, sessionId)
-    );
-  }
-
-  statePath(sessionId: string): string {
-    return join(this.sessionDir(sessionId), 'state.json');
-  }
-
-  mainAgentDir(sessionId: string): string {
-    const sessionDir = this.sessionDir(sessionId);
-    const mainDir = join(sessionDir, 'agents', 'main');
-    return isDirectory(mainDir) ? mainDir : sessionDir;
-  }
-
-  wirePath(sessionId: string): string {
-    return join(this.mainAgentDir(sessionId), 'wire.jsonl');
-  }
-
-  subagentDir(sessionId: string, agentId: string): string {
-    const sessionDir = this.sessionDir(sessionId);
-    const agentDir = join(sessionDir, 'agents', agentId);
-    return isDirectory(agentDir) ? agentDir : join(sessionDir, 'subagents', agentId);
-  }
-
-  toolResultArchivePath(sessionId: string, toolCallId: string): string {
-    const sessionDir = this.sessionDir(sessionId);
-    const mainPath = join(sessionDir, 'agents', 'main', 'tool-results', `${toolCallId}.txt`);
-    return existsSync(mainPath) ? mainPath : join(sessionDir, 'tool-results', `${toolCallId}.txt`);
-  }
-
-  private findIndexedSessionDir(sessionId: string): string | null {
-    const indexPath = join(this.home, 'session_index.jsonl');
-    let raw: string;
-    try {
-      raw = readFileSync(indexPath, 'utf8');
-    } catch {
-      return null;
-    }
-    for (const line of raw.split(/\r?\n/)) {
-      if (line.trim().length === 0) continue;
-      try {
-        const parsed = JSON.parse(line) as {
-          sessionId?: unknown;
-          session_id?: unknown;
-          sessionDir?: unknown;
-          session_dir?: unknown;
-        };
-        const id = stringValue(parsed.sessionId) ?? stringValue(parsed.session_id);
-        if (id !== sessionId) continue;
-        const dir = stringValue(parsed.sessionDir) ?? stringValue(parsed.session_dir);
-        if (dir !== null && isDirectory(dir)) return dir;
-      } catch {
-        // Ignore malformed index lines.
-      }
-    }
-    return null;
-  }
-
-  private findNestedSessionDir(sessionId: string): string | null {
-    const direct = join(this.sessionsDir, sessionId);
-    if (isDirectory(direct)) return direct;
-    let entries: string[];
-    try {
-      entries = readdirSync(this.sessionsDir);
-    } catch {
-      return null;
-    }
-    for (const entry of entries) {
-      const candidate = join(this.sessionsDir, entry, sessionId);
-      if (isDirectory(candidate)) return candidate;
-    }
-    return null;
-  }
-}
-
-function stringValue(value: unknown): string | null {
-  return typeof value === 'string' && value.length > 0 ? value : null;
-}
-
-function isDirectory(path: string): boolean {
-  try {
-    return statSync(path).isDirectory();
-  } catch {
-    return false;
-  }
-}
-
-/** Singleton path config pinned to the resolved KIMI_CODE_HOME. */
-export const pathConfig = new VisPathConfig(KIMI_CODE_HOME);
diff --git a/apps/vis/server/src/lib/agent-record-types.ts b/apps/vis/server/src/lib/agent-record-types.ts
new file mode 100644
index 0000000..af3f10c
--- /dev/null
+++ b/apps/vis/server/src/lib/agent-record-types.ts
@@ -0,0 +1,104 @@
+// apps/vis/server/src/lib/agent-record-types.ts
+// Single source of truth: everything below comes from agent-core directly.
+// Do NOT add local interfaces that duplicate upstream shapes.
+
+export type {
+  AgentRecord,
+  AgentRecordEvents,
+  AgentRecordOf,
+  AgentConfigUpdateData,
+  CompactionBeginData,
+  CompactionResult,
+  PermissionApprovalResultRecord,
+  PermissionMode,
+  UsageRecordScope,
+  ToolStoreUpdate,
+  LoopRecordedEvent,
+  ContextMessage,
+  PromptOrigin,
+} from '@moonshot-ai/agent-core';
+export { AGENT_WIRE_PROTOCOL_VERSION } from '@moonshot-ai/agent-core';
+export type { Message, ContentPart, ToolCall, TokenUsage } from '@moonshot-ai/kosong';
+
+// ── vis-only DTOs ──────────────────────────────────────────────────────────
+
+export interface ApiError {
+  error: string;
+  code:
+    | 'NOT_FOUND'
+    | 'BAD_REQUEST'
+    | 'UNAUTHORIZED'
+    | 'READ_ERROR'
+    | 'PARSE_ERROR'
+    | 'DELETE_ERROR'
+    | 'UNSUPPORTED_PROTOCOL';
+}
+
+export type SessionHealth =
+  | 'ok'
+  | 'broken_state'
+  | 'broken_main_wire'
+  | 'missing_main_wire'
+  | 'unsupported_protocol';
+
+export interface SessionSummary {
+  sessionId: string;
+  sessionDir: string;
+  workDir: string;
+  title: string | null;
+  lastPrompt: string | null;
+  isCustomTitle: boolean;
+  createdAt: number;
+  updatedAt: number;
+  agentCount: number;
+  mainAgentExists: boolean;
+  mainWireRecordCount: number;
+  wireProtocolVersion: string | null;
+  health: SessionHealth;
+}
+
+export interface AgentInfo {
+  agentId: string;
+  type: 'main' | 'sub' | 'independent';
+  parentAgentId: string | null;
+  homedir: string;
+  wireExists: boolean;
+  wireRecordCount: number;
+  wireProtocolVersion: string | null;
+}
+
+export interface SessionDetail {
+  sessionId: string;
+  /** Canonical on-disk session directory. Routes derive agent wire paths
+   *  from this rather than the mutable `homedir` field inside `state.json`,
+   *  which can drift after fork/rename. */
+  sessionDir: string;
+  workDir: string;
+  state: unknown; // 原样透传，前端按 state.json 真实形状渲染
+  agents: AgentInfo[];
+}
+
+export type WireLine = { _lineNo: number } & {
+  // structural unification with AgentRecord; preserves discriminant
+  [K in keyof import('@moonshot-ai/agent-core').AgentRecordEvents]: import('@moonshot-ai/agent-core').AgentRecordOf<K> & {
+    _lineNo: number;
+  };
+}[keyof import('@moonshot-ai/agent-core').AgentRecordEvents];
+
+export interface WireResponse {
+  sessionId: string;
+  agentId: string;
+  protocolVersion: string;
+  metadata: { protocolVersion: string; createdAt: number };
+  records: readonly WireLine[];
+  warnings: string[];
+}
+
+export interface AgentNode extends AgentInfo {
+  children: AgentNode[];
+}
+
+export interface AgentTreeResponse {
+  sessionId: string;
+  tree: AgentNode[];
+}
diff --git a/apps/vis/server/src/lib/agent-tree.ts b/apps/vis/server/src/lib/agent-tree.ts
new file mode 100644
index 0000000..baa09f4
--- /dev/null
+++ b/apps/vis/server/src/lib/agent-tree.ts
@@ -0,0 +1,33 @@
+import type { AgentInfo } from './agent-record-types';
+
+export interface AgentNode extends AgentInfo {
+  children: AgentNode[];
+}
+
+/**
+ * Build a parent/child tree from the flat agent inventory found on
+ * `state.json.agents`. Roots are agents with no `parentAgentId`, plus any
+ * agent whose `parentAgentId` does not resolve in the inventory (orphans).
+ * The returned roots are sorted so that the `main` agent always appears
+ * first; remaining roots fall back to a stable lexicographic order.
+ */
+export function buildAgentTree(agents: ReadonlyArray<AgentInfo>): AgentNode[] {
+  const byId = new Map<string, AgentNode>();
+  for (const a of agents) byId.set(a.agentId, { ...a, children: [] });
+
+  const roots: AgentNode[] = [];
+  for (const node of byId.values()) {
+    if (node.parentAgentId !== null && byId.has(node.parentAgentId)) {
+      byId.get(node.parentAgentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  return roots.sort(sortAgents);
+}
+
+function sortAgents(a: AgentNode, b: AgentNode): number {
+  if (a.agentId === 'main') return -1;
+  if (b.agentId === 'main') return 1;
+  return a.agentId.localeCompare(b.agentId);
+}
diff --git a/apps/vis/server/src/lib/context-builder.ts b/apps/vis/server/src/lib/context-builder.ts
deleted file mode 100644
index 9cfdbe8..0000000
--- a/apps/vis/server/src/lib/context-builder.ts
+++ /dev/null
@@ -1,498 +0,0 @@
-import type {
-  AnnotatedMessage,
-  ContentPart,
-  NotificationRecord,
-  ProjectedStateSummary,
-  SessionInitializedRecord,
-  SessionState,
-  ToolCallEntry,
-  UserInputPart,
-  VisWireRecord,
-} from './types';
-
-const PERSISTED_OUTPUT_RE = /^<persisted-output path="([^"]+)">/;
-
-/**
- * Extract the on-disk path from a `<persisted-output path="...">` marker
- * at the start of a tool-result output. Returns null when no marker is
- * present.
- */
-export function extractPersistedOutputPath(text: string): string | null {
-  const m = PERSISTED_OUTPUT_RE.exec(text.trimStart());
-  return m?.[1] ?? null;
-}
-
-/**
- * Render a notification's `data` payload as the XML string that the live
- * ContextMemory would inject as a user-role message.
- */
-export function renderNotificationXml(data: NotificationRecord['data']): string {
-  const id = escAttr(data.id);
-  const category = escAttr(data.category);
-  const type = escAttr(data.type);
-  const sourceKind = escAttr(data.source_kind);
-  const sourceId = escAttr(data.source_id);
-  const title = data.title;
-  const severity = data.severity;
-  const body = data.body;
-
-  const lines: string[] = [
-    `<notification id="${id}" category="${category}" type="${type}" source_kind="${sourceKind}" source_id="${sourceId}">`,
-  ];
-  if (title.length > 0) lines.push(`Title: ${title}`);
-  if (severity.length > 0) lines.push(`Severity: ${severity}`);
-  if (body.length > 0) lines.push(body);
-
-  // background_task notifications append a <task-notification> block
-  // with the last 20 lines / 3000 chars of tail_output, matching what
-  // the live projector would emit.
-  if (data.source_kind === 'background_task') {
-    const tail = (data as { tail_output?: string }).tail_output ?? '';
-    if (tail.length > 0) {
-      const tailLines = tail.split('\n');
-      const trimmed = (tailLines.length > 20 ? tailLines.slice(-20) : tailLines)
-        .join('\n')
-        .slice(-3000);
-      lines.push('<task-notification>', trimmed, '</task-notification>');
-    }
-  }
-
-  lines.push('</notification>');
-  return lines.join('\n');
-}
-
-function escAttr(s: string): string {
-  if (s.length === 0) return 'unknown';
-  return s.replaceAll('&', '&amp;').replaceAll('"', '&quot;');
-}
-
-export interface BuildAnnotatedOptions {
-  /** When true (default), rewind-orphaned records are kept with `out_of_context: true`. */
-  preserveOutOfContext?: boolean;
-}
-
-/**
- * Walk `records` in order and emit an `AnnotatedMessage[]` that includes
- * notification and system_reminder synthetic user messages. Tracks a
- * numeric turn counter so `context_edit operation:'rewind' to_turn:N`
- * can flag later messages as out-of-context.
- */
-export function buildAnnotatedMessages(
-  records: readonly VisWireRecord[],
-  options?: BuildAnnotatedOptions,
-): AnnotatedMessage[] {
-  const preserveOutOfContext = options?.preserveOutOfContext ?? true;
-
-  // Track (messageIndex -> turnCounterAtEmission) so a rewind can mark
-  // later emissions as out_of_context.
-  let annotated: AnnotatedMessage[] = [];
-  const msgTurnIdx: number[] = [];
-
-  let turnCounter = 0;
-
-  // An assistant message is not a single record — it's coalesced from
-  // `step_begin → (content_part|tool_call)* → step_end` atoms anchored
-  // by `step_uuid`. We buffer the in-flight step here and emit a
-  // synthetic assistant message on step_end.
-  interface StepBuffer {
-    seq: number;
-    step_uuid: string;
-    text: string;
-    think: string;
-    think_encrypted?: string | undefined;
-    tool_calls: ToolCallEntry[];
-  }
-  let currentStep: StepBuffer | null = null;
-
-  const flushStep = (): void => {
-    if (currentStep === null) return;
-    const s = currentStep;
-    const content: ContentPart[] = [];
-    if (s.think.length > 0) {
-      const part: ContentPart = { type: 'think', think: s.think };
-      if (s.think_encrypted !== undefined) part['encrypted'] = s.think_encrypted;
-      content.push(part);
-    }
-    if (s.text.length > 0) content.push({ type: 'text', text: s.text });
-    if (content.length > 0 || s.tool_calls.length > 0) {
-      pushMsg({
-        seq: s.seq,
-        message: { role: 'assistant', content, tool_calls: s.tool_calls },
-        origin: { kind: 'assistant' },
-        is_ephemeral: false,
-        out_of_context: false,
-      });
-    }
-    currentStep = null;
-  };
-
-  const pushMsg = (m: AnnotatedMessage): void => {
-    annotated.push(m);
-    msgTurnIdx.push(turnCounter);
-  };
-
-  for (const r of records) {
-    switch (r.type) {
-      case 'turn_begin': {
-        // Close any dangling step so turn boundaries stay clean.
-        flushStep();
-        turnCounter += 1;
-        break;
-      }
-
-      case 'user_message': {
-        const text = userContentToText(r.content);
-        pushMsg({
-          seq: r.seq,
-          message: {
-            role: 'user',
-            content: [{ type: 'text', text }],
-            tool_calls: [],
-          },
-          origin: { kind: 'user' },
-          is_ephemeral: false,
-          out_of_context: false,
-        });
-        break;
-      }
-
-      case 'step_begin': {
-        // Any prior unclosed step gets flushed; protocol guarantees order
-        // step_begin → … → step_end, but crashes can leave orphans.
-        flushStep();
-        currentStep = {
-          seq: r.seq,
-          step_uuid: r.uuid,
-          text: '',
-          think: '',
-          tool_calls: [],
-        };
-        break;
-      }
-
-      case 'content_part': {
-        if (currentStep === null) break;
-        if (currentStep.step_uuid !== r.step_uuid) break;
-        if (r.part.kind === 'text') {
-          currentStep.text += r.part.text;
-        } else {
-          currentStep.think += r.part.think;
-          if (r.part.encrypted !== undefined) {
-            currentStep.think_encrypted = r.part.encrypted;
-          }
-        }
-        break;
-      }
-
-      case 'tool_call': {
-        if (currentStep === null) break;
-        if (currentStep.step_uuid !== r.step_uuid) break;
-        currentStep.tool_calls.push({
-          type: 'function',
-          id: r.data.tool_call_id,
-          name: r.data.tool_name,
-          arguments: r.data.args === undefined ? null : JSON.stringify(r.data.args),
-        });
-        break;
-      }
-
-      case 'step_end': {
-        // step_end may carry usage; we drop it here since the annotated
-        // message already represents what the LLM emitted. Usage lives
-        // on the wire record itself for the Wire tab to show.
-        flushStep();
-        break;
-      }
-
-      case 'tool_result': {
-        const text = typeof r.output === 'string' ? r.output : JSON.stringify(r.output);
-        const msg: AnnotatedMessage = {
-          seq: r.seq,
-          message: {
-            role: 'tool',
-            content: [{ type: 'text', text }],
-            tool_calls: [],
-            tool_call_id: r.tool_call_id,
-          },
-          origin: { kind: 'tool', tool_call_id: r.tool_call_id },
-          is_ephemeral: false,
-          out_of_context: false,
-        };
-        if (typeof r.output === 'string') {
-          const persistedPath = extractPersistedOutputPath(r.output);
-          if (persistedPath !== null) {
-            msg.persisted_output_path = persistedPath;
-          }
-        }
-        pushMsg(msg);
-        break;
-      }
-
-      case 'system_reminder': {
-        const text = `<system-reminder>\n${r.content}\n</system-reminder>`;
-        pushMsg({
-          seq: r.seq,
-          message: { role: 'user', content: [{ type: 'text', text }], tool_calls: [] },
-          origin: { kind: 'system_reminder', seq: r.seq },
-          is_ephemeral: true,
-          out_of_context: false,
-        });
-        break;
-      }
-
-      case 'notification': {
-        if (!isLlmVisibleNotification(r)) break;
-        const text = renderNotificationXml(r.data);
-        pushMsg({
-          seq: r.seq,
-          message: { role: 'user', content: [{ type: 'text', text }], tool_calls: [] },
-          origin: {
-            kind: 'notification',
-            seq: r.seq,
-            notification_id: r.data.id,
-            severity: r.data.severity,
-          },
-          is_ephemeral: true,
-          out_of_context: false,
-        });
-        break;
-      }
-
-      case 'compaction': {
-        // Wholesale replacement. Drops any open step buffer — atoms
-        // before compaction are superseded by the summary.
-        currentStep = null;
-        annotated = [];
-        msgTurnIdx.length = 0;
-        pushMsg({
-          seq: r.seq,
-          message: {
-            role: 'assistant',
-            content: [{ type: 'text', text: r.summary }],
-            tool_calls: [],
-          },
-          origin: { kind: 'assistant' },
-          is_ephemeral: false,
-          out_of_context: false,
-        });
-        break;
-      }
-
-      case 'context_cleared': {
-        currentStep = null;
-        annotated = [];
-        msgTurnIdx.length = 0;
-        break;
-      }
-
-      case 'context_edit': {
-        if (r.operation === 'rewind' && typeof r.to_turn === 'number') {
-          const toTurn = r.to_turn;
-          if (preserveOutOfContext) {
-            for (let i = 0; i < annotated.length; i += 1) {
-              const emittedAtTurn = msgTurnIdx[i] ?? 0;
-              if (emittedAtTurn > toTurn) {
-                // Replace with a marked copy (immutability not required but
-                // makes the "after rewind" behaviour obvious to readers).
-                const m = annotated[i];
-                if (m !== undefined) {
-                  annotated[i] = { ...m, out_of_context: true };
-                }
-              }
-            }
-          } else {
-            // Drop messages emitted in turns past `to_turn`.
-            const keep: AnnotatedMessage[] = [];
-            const keepTurns: number[] = [];
-            for (let i = 0; i < annotated.length; i += 1) {
-              const emittedAtTurn = msgTurnIdx[i] ?? 0;
-              if (emittedAtTurn <= toTurn) {
-                const m = annotated[i];
-                if (m !== undefined) {
-                  keep.push(m);
-                  keepTurns.push(emittedAtTurn);
-                }
-              }
-            }
-            annotated = keep;
-            msgTurnIdx.length = 0;
-            msgTurnIdx.push(...keepTurns);
-          }
-        }
-        break;
-      }
-
-      case 'approval_request':
-      case 'approval_response':
-      case 'metadata':
-      case 'ownership_changed':
-      case 'session_initialized':
-      case 'skill_completed':
-      case 'skill_invoked':
-      case 'subagent_completed':
-      case 'subagent_failed':
-      case 'subagent_spawned':
-      case 'system_prompt_changed':
-      case 'team_mail':
-      case 'tool_denied':
-      case 'tools_changed':
-      case 'turn_end':
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  // Flush any trailing open step (session ended mid-step).
-  flushStep();
-
-  return annotated;
-}
-
-function userContentToText(content: string | readonly UserInputPart[]): string {
-  if (typeof content === 'string') return content;
-  return content
-    .map((p) => {
-      if (p.type === 'text') return p.text;
-      if (p.type === 'image_url') return `<image url="${p.image_url.url}">`;
-      return `<video url="${p.video_url.url}">`;
-    })
-    .join('');
-}
-
-function isLlmVisibleNotification(r: NotificationRecord): boolean {
-  const targets = r.data.targets;
-  if (!targets.includes('llm')) return false;
-  // Optimistic: an absent `delivered_at` means a legacy record from before
-  // delivery tracking was added (delivery actually happened); a value of
-  // `0` means the LLM sink was intentionally skipped.
-  const deliveredAt = r.data.delivered_at;
-  if (deliveredAt === undefined) return true;
-  return deliveredAt.llm !== 0;
-}
-
-/**
- * Build the projected-state summary by walking the wire records locally.
- * Only the config-class state is materialized (model, system prompt,
- * active tools, permission/plan mode, last seq, token totals).
- */
-export function buildProjectedStateSummary(
-  records: readonly VisWireRecord[],
-  sessionInitialized: SessionInitializedRecord | null,
-  state?: SessionState | null,
-): ProjectedStateSummary {
-  const baseline =
-    sessionInitialized ??
-    ({
-      type: 'session_initialized',
-      seq: 0,
-      time: 0,
-      agent_type: 'main',
-      session_id: state?.session_id ?? 'unknown',
-      system_prompt: '',
-      active_tools: [],
-      model: state?.model,
-      permission_mode: state?.permission_mode,
-      plan_mode: state?.plan_mode,
-      workspace_dir: state?.workspace_dir,
-    } satisfies SessionInitializedRecord);
-  const breakdown = sumTokenBreakdown(records);
-  const projected = projectStateLocally(records, baseline, state);
-  return {
-    model: projected.model,
-    system_prompt: projected.system_prompt,
-    active_tools: projected.active_tools,
-    last_seq: projected.last_seq,
-    token_count: breakdown.input_tokens + breakdown.output_tokens,
-    permission_mode: projected.permission_mode,
-    plan_mode: projected.plan_mode,
-    ...breakdown,
-  };
-}
-
-function projectStateLocally(
-  records: readonly VisWireRecord[],
-  sessionInitialized: SessionInitializedRecord,
-  state?: SessionState | null,
-): Pick<
-  ProjectedStateSummary,
-  'model' | 'system_prompt' | 'active_tools' | 'last_seq' | 'permission_mode' | 'plan_mode'
-> {
-  let systemPrompt: string | null = sessionInitialized.system_prompt;
-  let activeTools = [...sessionInitialized.active_tools];
-  let model: string | null = state?.model ?? sessionInitialized.model ?? null;
-  let permissionMode: string | null = sessionInitialized.permission_mode ?? null;
-  let planMode = sessionInitialized.plan_mode ?? false;
-  let lastSeq = sessionInitialized.seq;
-  for (const record of records) {
-    lastSeq = Math.max(lastSeq, record.seq ?? 0);
-    if (record.type === 'system_prompt_changed') {
-      systemPrompt = record.new_prompt;
-    } else if (record.type === 'tools_changed') {
-      activeTools = [...record.tools];
-    } else if (record.type === 'notification') {
-      const payload = record.data.payload;
-      if (record.data.type === 'config.update' && isRecord(payload)) {
-        model = configModel(payload) ?? model;
-      } else if (record.data.type === 'permission.update' && isRecord(payload)) {
-        permissionMode = stringValue(payload['mode']) ?? permissionMode;
-      }
-    }
-  }
-  return {
-    model,
-    system_prompt: systemPrompt,
-    active_tools: activeTools,
-    last_seq: lastSeq,
-    permission_mode: state?.permission_mode ?? permissionMode,
-    plan_mode: state?.plan_mode ?? planMode,
-  };
-}
-
-function configModel(payload: Record<string, unknown>): string | null {
-  const alias = stringValue(payload['modelAlias']);
-  if (alias !== null) return alias;
-  const provider = payload['provider'];
-  if (isRecord(provider)) return stringValue(provider['model']);
-  return null;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
-}
-
-function stringValue(value: unknown): string | null {
-  return typeof value === 'string' && value.length > 0 ? value : null;
-}
-
-/** Sum `step_end.usage` across all records. Mirrors the core projector's
- *  tokenCount logic (step-level) so partial/running turns are still counted
- *  — turn_end.usage is the turn total but it arrives only after the turn
- *  closes, so step_end sums stay responsive on live sessions. */
-function sumTokenBreakdown(records: readonly VisWireRecord[]): {
-  input_tokens: number;
-  output_tokens: number;
-  cache_read_tokens: number;
-  cache_write_tokens: number;
-} {
-  let input = 0;
-  let output = 0;
-  let cacheRead = 0;
-  let cacheWrite = 0;
-  for (const r of records) {
-    if (r.type !== 'step_end') continue;
-    const usage = (r as { usage?: Record<string, number | undefined> }).usage;
-    if (usage === undefined) continue;
-    input += usage['input_tokens'] ?? 0;
-    output += usage['output_tokens'] ?? 0;
-    cacheRead += usage['cache_read_tokens'] ?? 0;
-    cacheWrite += usage['cache_write_tokens'] ?? 0;
-  }
-  return {
-    input_tokens: input,
-    output_tokens: output,
-    cache_read_tokens: cacheRead,
-    cache_write_tokens: cacheWrite,
-  };
-}
diff --git a/apps/vis/server/src/lib/context-projector.ts b/apps/vis/server/src/lib/context-projector.ts
new file mode 100644
index 0000000..be5f3ec
--- /dev/null
+++ b/apps/vis/server/src/lib/context-projector.ts
@@ -0,0 +1,123 @@
+import type {
+  AgentRecord,
+  ContextMessage,
+  PermissionMode,
+  AgentConfigUpdateData,
+  TokenUsage,
+} from './agent-record-types';
+
+type WireLine = AgentRecord & { _lineNo: number };
+
+export interface ProjectedMessage {
+  lineNo: number;
+  time?: number;
+  source: 'append_message' | 'compaction_summary';
+  message: ContextMessage;
+  toolStepUuids: string[];
+}
+
+export interface UsageTotals {
+  byScope: { session: TokenUsage; turn: TokenUsage };
+  byModel: Record<string, TokenUsage>;
+}
+
+export interface ConfigSnapshot {
+  cwd?: string;
+  modelAlias?: string;
+  profileName?: string;
+  thinkingLevel?: string;
+  systemPrompt?: string;
+}
+
+export interface ContextProjection {
+  messages: ProjectedMessage[];
+  usage: UsageTotals;
+  config: ConfigSnapshot;
+  permission: { mode: PermissionMode | null };
+  planMode: { active: boolean; id?: string };
+}
+
+const ZERO: TokenUsage = { inputOther: 0, output: 0, inputCacheRead: 0, inputCacheCreation: 0 };
+
+export function projectContext(records: ReadonlyArray<WireLine>): ContextProjection {
+  let messages: ProjectedMessage[] = [];
+  const usage: UsageTotals = {
+    byScope: { session: { ...ZERO }, turn: { ...ZERO } },
+    byModel: {},
+  };
+  const config: ConfigSnapshot = {};
+  let permissionMode: PermissionMode | null = null;
+  let planActive = false;
+  let planId: string | undefined;
+
+  for (const rec of records) {
+    switch (rec.type) {
+      case 'context.append_message':
+        messages.push({
+          lineNo: rec._lineNo,
+          time: rec.time,
+          source: 'append_message',
+          message: rec.message,
+          toolStepUuids: [],
+        });
+        break;
+      case 'context.clear':
+        messages = [];
+        break;
+      case 'context.apply_compaction':
+        messages = [{
+          lineNo: rec._lineNo,
+          time: rec.time,
+          source: 'compaction_summary',
+          message: {
+            role: 'system',
+            content: [{ type: 'text', text: rec.summary }],
+            toolCalls: [],
+          } as ContextMessage,
+          toolStepUuids: [],
+        }];
+        break;
+      case 'usage.record': {
+        const scope = rec.usageScope ?? 'session';
+        addUsage(usage.byScope[scope], rec.usage);
+        if (!usage.byModel[rec.model]) usage.byModel[rec.model] = { ...ZERO };
+        addUsage(usage.byModel[rec.model]!, rec.usage);
+        break;
+      }
+      case 'config.update': {
+        const upd = rec as AgentConfigUpdateData & { type: 'config.update' };
+        if (upd.cwd !== undefined) config.cwd = upd.cwd;
+        if (upd.modelAlias !== undefined) config.modelAlias = upd.modelAlias;
+        if (upd.profileName !== undefined) config.profileName = upd.profileName;
+        if (upd.thinkingLevel !== undefined) config.thinkingLevel = upd.thinkingLevel;
+        if (upd.systemPrompt !== undefined) config.systemPrompt = upd.systemPrompt;
+        break;
+      }
+      case 'permission.set_mode':
+        permissionMode = rec.mode;
+        break;
+      case 'plan_mode.enter':
+        planActive = true; planId = rec.id; break;
+      case 'plan_mode.cancel':
+      case 'plan_mode.exit':
+        planActive = false; planId = undefined; break;
+      default:
+        break;
+    }
+  }
+
+  return {
+    messages,
+    usage,
+    config,
+    permission: { mode: permissionMode },
+    planMode: { active: planActive, id: planId },
+  };
+}
+
+function addUsage(into: TokenUsage, src: TokenUsage): void {
+  (into as any).inputOther += src.inputOther;
+  (into as any).output += src.output;
+  (into as any).inputCacheRead += src.inputCacheRead;
+  (into as any).inputCacheCreation += src.inputCacheCreation;
+}
diff --git a/apps/vis/server/src/lib/session-delete.ts b/apps/vis/server/src/lib/session-delete.ts
deleted file mode 100644
index c6e6010..0000000
--- a/apps/vis/server/src/lib/session-delete.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { rm, stat } from 'node:fs/promises';
-import { basename, isAbsolute, relative, resolve } from 'node:path';
-
-import { pathConfig } from '../config';
-import { listSessions } from './session-lister';
-import type { ClearSessionsResponse, DeleteSessionResponse } from './types';
-
-export const SESSION_ID_RE = /^session_[a-zA-Z0-9_-]+$/;
-
-function isInside(root: string, target: string): boolean {
-  const rel = relative(root, target);
-  return rel === '' || (!rel.startsWith('..') && !isAbsolute(rel));
-}
-
-function resolveSafeSessionDir(sessionId: string): string {
-  const sessionsRoot = resolve(pathConfig.sessionsDir);
-  const sessionDir = resolve(pathConfig.sessionDir(sessionId));
-  if (!isInside(sessionsRoot, sessionDir) || basename(sessionDir) !== sessionId) {
-    throw new Error(`refusing to delete unsafe session path: ${sessionDir}`);
-  }
-  return sessionDir;
-}
-
-export async function deleteSession(sessionId: string): Promise<DeleteSessionResponse | null> {
-  const sessionDir = resolveSafeSessionDir(sessionId);
-  const info = await stat(sessionDir).catch(() => null);
-  if (info?.isDirectory() !== true) return null;
-  await rm(sessionDir, { recursive: true, force: true });
-  return { session_id: sessionId, deleted: true };
-}
-
-export async function clearSessions(): Promise<ClearSessionsResponse> {
-  const sessions = await listSessions(pathConfig.sessionsDir);
-  const failed: ClearSessionsResponse['failed'] = [];
-  let deleted_count = 0;
-
-  for (const session of sessions) {
-    try {
-      const result = await deleteSession(session.session_id);
-      if (result?.deleted === true) deleted_count += 1;
-    } catch (error) {
-      failed.push({
-        session_id: session.session_id,
-        error: error instanceof Error ? error.message : String(error),
-      });
-    }
-  }
-
-  return { deleted_count, failed };
-}
diff --git a/apps/vis/server/src/lib/session-lister.ts b/apps/vis/server/src/lib/session-lister.ts
deleted file mode 100644
index c07ec2e..0000000
--- a/apps/vis/server/src/lib/session-lister.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import { createReadStream } from 'node:fs';
-import { readFile, readdir, stat } from 'node:fs/promises';
-import { join } from 'node:path';
-import { createInterface } from 'node:readline';
-
-import type { SessionState, SessionSummary, WireFileMetadata } from './types';
-import { readSessionLastPrompt, readSessionTitle } from './session-title';
-
-const ARCHIVE_RE = /^wire\.\d+\.jsonl$/;
-const SESSION_ID_RE = /^session_[a-zA-Z0-9_-]+$/;
-
-/** Count NDJSON body lines (excluding metadata header) without loading the
- * full file into memory. Returns `null` if the file is unreadable. */
-async function countWireBodyLines(wirePath: string): Promise<{
-  count: number;
-  metadata: WireFileMetadata | null;
-} | null> {
-  try {
-    const stream = createReadStream(wirePath, { encoding: 'utf8' });
-    const rl = createInterface({ input: stream, crlfDelay: Infinity });
-
-    let headerConsumed = false;
-    let count = 0;
-    let metadata: WireFileMetadata | null = null;
-
-    for await (const line of rl) {
-      if (line.length === 0) continue;
-      if (!headerConsumed) {
-        headerConsumed = true;
-        try {
-          const parsed = JSON.parse(line) as unknown;
-          if (
-            typeof parsed === 'object' &&
-            parsed !== null &&
-            (parsed as { type?: unknown }).type === 'metadata'
-          ) {
-            metadata = parsed as WireFileMetadata;
-          }
-        } catch {
-          // first line malformed — session is broken, not missing
-        }
-        continue;
-      }
-      count += 1;
-    }
-    return { count, metadata };
-  } catch {
-    return null;
-  }
-}
-
-async function readStateJson(statePath: string): Promise<SessionState | null> {
-  try {
-    const raw = await readFile(statePath, 'utf8');
-    return JSON.parse(raw) as SessionState;
-  } catch {
-    return null;
-  }
-}
-
-async function countSubagents(sessionDir: string): Promise<number> {
-  const agentCount = await countAgentSubagents(sessionDir);
-  if (agentCount > 0) return agentCount;
-  try {
-    const entries = await readdir(join(sessionDir, 'subagents'), { withFileTypes: true });
-    return entries.filter((e) => e.isDirectory()).length;
-  } catch {
-    return 0;
-  }
-}
-
-async function countAgentSubagents(sessionDir: string): Promise<number> {
-  try {
-    const entries = await readdir(join(sessionDir, 'agents'), { withFileTypes: true });
-    return entries.filter((e) => e.isDirectory() && e.name !== 'main').length;
-  } catch {
-    return 0;
-  }
-}
-
-async function resolveMainAgentDir(sessionDir: string): Promise<string> {
-  const mainDir = join(sessionDir, 'agents', 'main');
-  const info = await stat(mainDir).catch(() => null);
-  return info?.isDirectory() === true ? mainDir : sessionDir;
-}
-
-async function countArchives(sessionDir: string): Promise<number> {
-  try {
-    const entries = await readdir(sessionDir);
-    return entries.filter((e) => ARCHIVE_RE.test(e)).length;
-  } catch {
-    return 0;
-  }
-}
-
-/**
- * Build a `SessionSummary` from a single session directory. Malformed
- * state.json / missing wire.jsonl yield health markers rather than errors.
- */
-export async function loadSessionSummary(sessionDir: string): Promise<SessionSummary> {
-  const sessionId = sessionDir.split('/').pop() ?? sessionDir;
-  const statePath = join(sessionDir, 'state.json');
-  const mainAgentDir = await resolveMainAgentDir(sessionDir);
-  const wirePath = join(mainAgentDir, 'wire.jsonl');
-
-  const state = await readStateJson(statePath);
-  const wireStat = await stat(wirePath).catch(() => null);
-  const wireInfo = wireStat === null ? null : await countWireBodyLines(wirePath);
-  const subagent_count = await countSubagents(sessionDir);
-  const archive_count = await countArchives(mainAgentDir);
-
-  let health: SessionSummary['health'];
-  if (wireStat === null) {
-    health = 'missing_wire';
-  } else if (wireInfo === null) {
-    health = 'broken';
-  } else if (state === null) {
-    // state.json missing / unreadable — still usable, flag as broken.
-    health = 'broken';
-  } else {
-    health = 'ok';
-  }
-
-  return {
-    session_id: state?.session_id ?? sessionId,
-    title: readSessionTitle(state),
-    last_prompt: readSessionLastPrompt(state),
-    created_at: state?.created_at ?? 0,
-    updated_at: state?.updated_at ?? 0,
-    last_turn_time: state?.last_turn_time ?? null,
-    model: state?.model ?? null,
-    permission_mode: state?.permission_mode ?? null,
-    last_exit_code: state?.last_exit_code ?? null,
-    custom_title: state?.custom_title ?? null,
-    tags: state?.tags ?? [],
-    archived: state?.archived ?? false,
-    workspace_dir: state?.workspace_dir ?? null,
-    wire_protocol_version: wireInfo?.metadata?.protocol_version ?? null,
-    wire_record_count: wireInfo?.count ?? 0,
-    archive_count,
-    subagent_count,
-    health,
-  };
-}
-
-/**
- * Enumerate sessions under `sessionsDir`. Current dev stores sessions under a
- * workdir bucket (`sessions/<workdir-key>/<sessionId>`), while older fixtures
- * may still be direct `sessions/<sessionId>` directories.
- */
-export async function listSessions(sessionsDir: string): Promise<SessionSummary[]> {
-  const candidates: string[] = [];
-  let entries: string[];
-  try {
-    entries = await readdir(sessionsDir);
-  } catch {
-    return [];
-  }
-  for (const entry of entries) {
-    const sessionDir = join(sessionsDir, entry);
-    const s = await stat(sessionDir).catch(() => null);
-    if (s?.isDirectory() !== true) continue;
-    if (SESSION_ID_RE.test(entry)) {
-      candidates.push(sessionDir);
-      continue;
-    }
-    let children: string[];
-    try {
-      children = await readdir(sessionDir);
-    } catch {
-      continue;
-    }
-    for (const child of children) {
-      if (!SESSION_ID_RE.test(child)) continue;
-      const childDir = join(sessionDir, child);
-      const childStat = await stat(childDir).catch(() => null);
-      if (childStat?.isDirectory() === true) candidates.push(childDir);
-    }
-  }
-
-  // Cheap pre-filter on state.json producer before doing any wire I/O.
-  const keep = await Promise.all(
-    candidates.map(async (dir) => {
-      const state = await readStateJson(join(dir, 'state.json'));
-      if (state === null) return null;
-      return state.producer?.kind === 'python' ? null : dir;
-    }),
-  );
-
-  const summaries = await Promise.all(
-    keep.filter((d): d is string => d !== null).map((dir) => loadSessionSummary(dir)),
-  );
-
-  summaries.sort((a, b) => b.updated_at - a.updated_at);
-  return summaries;
-}
diff --git a/apps/vis/server/src/lib/session-store.ts b/apps/vis/server/src/lib/session-store.ts
new file mode 100644
index 0000000..e329547
--- /dev/null
+++ b/apps/vis/server/src/lib/session-store.ts
@@ -0,0 +1,231 @@
+import { createReadStream } from 'node:fs';
+import { readdir, readFile, stat } from 'node:fs/promises';
+import { join } from 'node:path';
+import { createInterface } from 'node:readline';
+
+import type { SessionSummary, SessionDetail, AgentInfo, SessionHealth } from './agent-record-types';
+
+const SESSION_ID_RE = /^session_[A-Za-z0-9._-]+$/;
+const SUPPORTED_PROTOCOL = '1.1';
+
+interface StateJson {
+  createdAt?: string;
+  updatedAt?: string;
+  title?: string;
+  isCustomTitle?: boolean;
+  lastPrompt?: string;
+  agents?: Record<string, { homedir: string; type: 'main' | 'sub' | 'independent'; parentAgentId: string | null }>;
+  custom?: Record<string, unknown>;
+}
+
+export async function listSessions(home: string): Promise<SessionSummary[]> {
+  const sessionsDir = join(home, 'sessions');
+  const buckets = await readdir(sessionsDir, { withFileTypes: true }).catch(() => []);
+  const index = await readSessionIndex(home);
+  const out: SessionSummary[] = [];
+  for (const bucket of buckets) {
+    if (!bucket.isDirectory()) continue;
+    const bucketDir = join(sessionsDir, bucket.name);
+    const sessionDirs = await readdir(bucketDir, { withFileTypes: true }).catch(() => []);
+    for (const entry of sessionDirs) {
+      if (!entry.isDirectory() || !SESSION_ID_RE.test(entry.name)) continue;
+      const sessionDir = join(bucketDir, entry.name);
+      const workDir = index.get(entry.name)?.workDir ?? '';
+      const summary = await tryReadSummary(sessionDir, entry.name, workDir);
+      if (summary !== null) out.push(summary);
+    }
+  }
+  out.sort((a, b) => b.updatedAt - a.updatedAt);
+  return out;
+}
+
+export async function readSessionDetail(home: string, sessionId: string): Promise<SessionDetail | null> {
+  const sessionDir = await findSessionDir(home, sessionId);
+  if (sessionDir === null) return null;
+  const index = await readSessionIndex(home);
+  const workDir = index.get(sessionId)?.workDir ?? '';
+  const state = await readState(sessionDir);
+  // Mirror the list path: when state.json is unreadable, still return a
+  // SessionDetail so callers can render a broken-state diagnostic instead of
+  // a hard 404. Agents inventory requires state.agents, so it is empty here.
+  if (state === null) {
+    return { sessionId, sessionDir, workDir, state: null, agents: [] };
+  }
+  if (state.custom?.['imported_from_kimi_cli'] === true) return null;
+  const agents = await inventoryAgents(sessionDir, state);
+  return { sessionId, sessionDir, workDir, state, agents };
+}
+
+async function tryReadSummary(sessionDir: string, sessionId: string, workDir: string): Promise<SessionSummary | null> {
+  const state = await readState(sessionDir);
+  if (state === null) {
+    return brokenStateSummary(sessionDir, sessionId, workDir);
+  }
+  if (state.custom?.['imported_from_kimi_cli'] === true) return null;
+
+  const mainWirePath = join(sessionDir, 'agents', 'main', 'wire.jsonl');
+  const mainExists = await pathExists(mainWirePath);
+  let mainCount = 0;
+  let protocolVersion: string | null = null;
+  let health: SessionHealth = 'ok';
+  if (!mainExists) {
+    health = 'missing_main_wire';
+  } else {
+    try {
+      const info = await scanWire(mainWirePath);
+      mainCount = info.count;
+      protocolVersion = info.protocolVersion;
+      if (protocolVersion !== null && protocolVersion !== SUPPORTED_PROTOCOL) {
+        health = 'unsupported_protocol';
+      }
+    } catch {
+      // A single unreadable wire file must not fail the whole list.
+      health = 'broken_main_wire';
+    }
+  }
+
+  return {
+    sessionId,
+    sessionDir,
+    workDir,
+    title: state.title ?? null,
+    lastPrompt: state.lastPrompt ?? null,
+    isCustomTitle: state.isCustomTitle ?? false,
+    createdAt: parseTs(state.createdAt),
+    updatedAt: parseTs(state.updatedAt),
+    agentCount: Object.keys(state.agents ?? {}).length,
+    mainAgentExists: mainExists,
+    mainWireRecordCount: mainCount,
+    wireProtocolVersion: protocolVersion,
+    health,
+  };
+}
+
+function brokenStateSummary(sessionDir: string, sessionId: string, workDir: string): SessionSummary {
+  return {
+    sessionId, sessionDir, workDir,
+    title: null, lastPrompt: null, isCustomTitle: false,
+    createdAt: 0, updatedAt: 0,
+    agentCount: 0, mainAgentExists: false, mainWireRecordCount: 0,
+    wireProtocolVersion: null, health: 'broken_state',
+  };
+}
+
+interface SessionIndexEntry {
+  sessionDir: string;
+  workDir: string;
+}
+
+async function readSessionIndex(home: string): Promise<Map<string, SessionIndexEntry>> {
+  const out = new Map<string, SessionIndexEntry>();
+  let raw: string;
+  try {
+    raw = await readFile(join(home, 'session_index.jsonl'), 'utf8');
+  } catch { return out; }
+  for (const line of raw.split(/\r?\n/)) {
+    if (!line.trim()) continue;
+    try {
+      const entry = JSON.parse(line) as { sessionId?: string; sessionDir?: string; workDir?: string };
+      if (typeof entry.sessionId === 'string' && typeof entry.sessionDir === 'string') {
+        out.set(entry.sessionId, {
+          sessionDir: entry.sessionDir,
+          workDir: typeof entry.workDir === 'string' ? entry.workDir : '',
+        });
+      }
+    } catch { /* skip malformed */ }
+  }
+  return out;
+}
+
+async function inventoryAgents(sessionDir: string, state: StateJson): Promise<AgentInfo[]> {
+  const result: AgentInfo[] = [];
+  for (const [id, meta] of Object.entries(state.agents ?? {})) {
+    const wirePath = join(sessionDir, 'agents', id, 'wire.jsonl');
+    const exists = await pathExists(wirePath);
+    let info: { count: number; protocolVersion: string | null } = { count: 0, protocolVersion: null };
+    if (exists) {
+      try {
+        info = await scanWire(wirePath);
+      } catch {
+        // Surface as wireExists=false rather than throwing; callers
+        // already render a "no wire" badge for that case.
+        info = { count: 0, protocolVersion: null };
+      }
+    }
+    result.push({
+      agentId: id,
+      type: meta.type,
+      parentAgentId: meta.parentAgentId,
+      homedir: meta.homedir,
+      wireExists: exists,
+      wireRecordCount: info.count,
+      wireProtocolVersion: info.protocolVersion,
+    });
+  }
+  return result.sort((a, b) => {
+    if (a.agentId === 'main') return -1;
+    if (b.agentId === 'main') return 1;
+    return a.agentId.localeCompare(b.agentId);
+  });
+}
+
+async function readState(sessionDir: string): Promise<StateJson | null> {
+  try {
+    return JSON.parse(await readFile(join(sessionDir, 'state.json'), 'utf8')) as StateJson;
+  } catch { return null; }
+}
+
+async function findSessionDir(home: string, sessionId: string): Promise<string | null> {
+  if (!SESSION_ID_RE.test(sessionId)) return null;
+  // Try index first
+  try {
+    const indexLines = (await readFile(join(home, 'session_index.jsonl'), 'utf8')).split(/\r?\n/);
+    for (const line of indexLines) {
+      if (!line.trim()) continue;
+      const entry = JSON.parse(line) as { sessionId?: string; sessionDir?: string };
+      if (entry.sessionId === sessionId && entry.sessionDir && await pathExists(entry.sessionDir)) {
+        return entry.sessionDir;
+      }
+    }
+  } catch { /* no index */ }
+  // Fall back to scanning buckets
+  const buckets = await readdir(join(home, 'sessions'), { withFileTypes: true }).catch(() => []);
+  for (const bucket of buckets) {
+    if (!bucket.isDirectory()) continue;
+    const candidate = join(home, 'sessions', bucket.name, sessionId);
+    if (await pathExists(candidate)) return candidate;
+  }
+  return null;
+}
+
+async function scanWire(path: string): Promise<{ count: number; protocolVersion: string | null }> {
+  const stream = createReadStream(path, { encoding: 'utf8' });
+  const rl = createInterface({ input: stream, crlfDelay: Infinity });
+  let count = 0;
+  let protocolVersion: string | null = null;
+  let first = true;
+  for await (const line of rl) {
+    if (line.length === 0) continue;
+    if (first) {
+      first = false;
+      try {
+        const meta = JSON.parse(line) as { type?: string; protocol_version?: string };
+        if (meta.type === 'metadata' && typeof meta.protocol_version === 'string') {
+          protocolVersion = meta.protocol_version;
+        }
+      } catch { /* malformed metadata */ }
+    }
+    count += 1;
+  }
+  return { count, protocolVersion };
+}
+
+function parseTs(input: string | undefined): number {
+  if (!input) return 0;
+  const n = Date.parse(input);
+  return Number.isFinite(n) ? n : 0;
+}
+
+async function pathExists(p: string): Promise<boolean> {
+  try { await stat(p); return true; } catch { return false; }
+}
diff --git a/apps/vis/server/src/lib/session-title.ts b/apps/vis/server/src/lib/session-title.ts
deleted file mode 100644
index bd06a90..0000000
--- a/apps/vis/server/src/lib/session-title.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SessionState } from './types';
-
-function titleString(value: unknown): string | null {
-  if (typeof value !== 'string') return null;
-  const trimmed = value.trim();
-  return trimmed.length > 0 ? trimmed : null;
-}
-
-export function readSessionTitle(state: SessionState | null | undefined): string | null {
-  if (state === null || state === undefined) return null;
-  if (typeof state.isCustomTitle === 'boolean') {
-    const title = titleString(state.title);
-    if (title !== null) return title;
-  }
-  return (
-    titleString(state.customTitle) ??
-    titleString(state.custom_title) ??
-    titleString(state.title)
-  );
-}
-
-export function readSessionLastPrompt(state: SessionState | null | undefined): string | null {
-  if (state === null || state === undefined) return null;
-  return titleString(state.lastPrompt) ?? titleString(state.last_prompt);
-}
diff --git a/apps/vis/server/src/lib/subagent-loader.ts b/apps/vis/server/src/lib/subagent-loader.ts
deleted file mode 100644
index 84b3160..0000000
--- a/apps/vis/server/src/lib/subagent-loader.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { readFile, readdir, stat } from 'node:fs/promises';
-import { join } from 'node:path';
-
-import type {
-  SubagentCompletedRecord,
-  SubagentFailedRecord,
-  SubagentNode,
-  SubagentSpawnedRecord,
-  VisWireRecord,
-} from './types';
-import { loadWireRecords } from './wire-loader';
-
-interface LifecyclePair {
-  spawned: SubagentSpawnedRecord;
-  completed: SubagentCompletedRecord | null;
-  failed: SubagentFailedRecord | null;
-}
-
-/** Directly list subagent ids for a session (only names, no tree build). */
-export async function listSubagents(sessionDir: string): Promise<string[]> {
-  try {
-    const entries = await readdir(join(sessionDir, 'agents'));
-    const out: string[] = [];
-    for (const e of entries) {
-      if (e === 'main') continue;
-      const s = await stat(join(sessionDir, 'agents', e)).catch(() => null);
-      if (s?.isDirectory()) out.push(e);
-    }
-    if (out.length > 0) return out;
-  } catch {
-    // Fall back to legacy subagents/ below.
-  }
-  try {
-    const entries = await readdir(join(sessionDir, 'subagents'));
-    const out: string[] = [];
-    for (const e of entries) {
-      const s = await stat(join(sessionDir, 'subagents', e)).catch(() => null);
-      if (s?.isDirectory()) out.push(e);
-    }
-    return out;
-  } catch {
-    return [];
-  }
-}
-
-function extractLifecycleRecords(records: readonly VisWireRecord[]): Map<string, LifecyclePair> {
-  const map = new Map<string, LifecyclePair>();
-  for (const r of records) {
-    if (r.type === 'subagent_spawned') {
-      const existing = map.get(r.data.agent_id);
-      if (existing === undefined) {
-        map.set(r.data.agent_id, { spawned: r, completed: null, failed: null });
-      } else {
-        existing.spawned = r;
-      }
-    } else if (r.type === 'subagent_completed') {
-      const existing = map.get(r.data.agent_id);
-      if (existing === undefined) {
-        // Rare: completion without spawn in this wire — create skeleton.
-        const fakeSpawn: SubagentSpawnedRecord = {
-          type: 'subagent_spawned',
-          seq: 0,
-          time: 0,
-          data: {
-            agent_id: r.data.agent_id,
-            parent_tool_call_id: r.data.parent_tool_call_id,
-            run_in_background: false,
-          },
-        };
-        map.set(r.data.agent_id, { spawned: fakeSpawn, completed: r, failed: null });
-      } else {
-        existing.completed = r;
-      }
-    } else if (r.type === 'subagent_failed') {
-      const existing = map.get(r.data.agent_id);
-      if (existing === undefined) {
-        const fakeSpawn: SubagentSpawnedRecord = {
-          type: 'subagent_spawned',
-          seq: 0,
-          time: 0,
-          data: {
-            agent_id: r.data.agent_id,
-            parent_tool_call_id: r.data.parent_tool_call_id,
-            run_in_background: false,
-          },
-        };
-        map.set(r.data.agent_id, { spawned: fakeSpawn, completed: null, failed: r });
-      } else {
-        existing.failed = r;
-      }
-    }
-  }
-  return map;
-}
-
-async function readSubagentMeta(
-  sessionDir: string,
-  agentId: string,
-): Promise<{ subagent_type: string | null; status: string | null }> {
-  try {
-    const raw = await readFile(join(await resolveSubagentDir(sessionDir, agentId), 'meta.json'), 'utf8');
-    const parsed = JSON.parse(raw) as { subagent_type?: unknown; status?: unknown };
-    return {
-      subagent_type: typeof parsed.subagent_type === 'string' ? parsed.subagent_type : null,
-      status: typeof parsed.status === 'string' ? parsed.status : null,
-    };
-  } catch {
-    return { subagent_type: null, status: null };
-  }
-}
-
-async function resolveSubagentDir(sessionDir: string, agentId: string): Promise<string> {
-  const agentDir = join(sessionDir, 'agents', agentId);
-  const agentStat = await stat(agentDir).catch(() => null);
-  return agentStat?.isDirectory() === true ? agentDir : join(sessionDir, 'subagents', agentId);
-}
-
-function deriveStatus(pair: LifecyclePair, metaStatus: string | null): SubagentNode['status'] {
-  if (pair.failed !== null) return 'failed';
-  if (pair.completed !== null) return 'completed';
-  if (metaStatus !== null) {
-    const allowed: ReadonlyArray<SubagentNode['status']> = [
-      'running',
-      'completed',
-      'failed',
-      'killed',
-      'lost',
-    ];
-    if ((allowed as string[]).includes(metaStatus)) {
-      return metaStatus as SubagentNode['status'];
-    }
-  }
-  return 'unknown';
-}
-
-/**
- * Build the subagent tree for a session, recursing into each subagent's
- * wire.jsonl to discover nested spawns. Depth-capped at `maxDepth`
- * (default 5) to prevent runaway recursion on corrupt fixtures.
- */
-export async function buildSubagentTree(
-  sessionDir: string,
-  mainWireRecords: readonly VisWireRecord[],
-  maxDepth = 5,
-): Promise<SubagentNode[]> {
-  const visited = new Set<string>();
-
-  async function buildLevel(
-    records: readonly VisWireRecord[],
-    depth: number,
-    parentAgentId: string | null,
-  ): Promise<SubagentNode[]> {
-    if (depth > maxDepth) return [];
-    const pairs = extractLifecycleRecords(records);
-
-    // Reserve all agentIds at this level synchronously so parallel recursion
-    // cannot re-visit a cousin branch's already-claimed agent.
-    const toProcess: Array<[string, LifecyclePair]> = [];
-    for (const [agentId, pair] of pairs) {
-      if (visited.has(agentId)) continue;
-      visited.add(agentId);
-      toProcess.push([agentId, pair]);
-    }
-
-    const nodes = await Promise.all(
-      toProcess.map(async ([agentId, pair]): Promise<SubagentNode> => {
-        const meta = await readSubagentMeta(sessionDir, agentId);
-        let children: SubagentNode[] = [];
-        const subDir = await resolveSubagentDir(sessionDir, agentId);
-        const dirStat = await stat(subDir).catch(() => null);
-        if (dirStat?.isDirectory() && depth < maxDepth) {
-          try {
-            const sub = await loadWireRecords(subDir);
-            children = await buildLevel(sub.records, depth + 1, agentId);
-          } catch {
-            // ignore — leave children empty
-          }
-        }
-
-        const status = deriveStatus(pair, meta.status);
-        let success: boolean | null;
-        if (pair.completed !== null) success = true;
-        else if (pair.failed !== null) success = false;
-        else success = null;
-
-        const resolvedParent =
-          pair.spawned.data.parent_agent_id ?? parentAgentId;
-
-        return {
-          agent_id: agentId,
-          agent_name: pair.spawned.data.agent_name ?? null,
-          subagent_type: meta.subagent_type,
-          run_in_background: pair.spawned.data.run_in_background,
-          parent_agent_id: resolvedParent,
-          depth,
-          status,
-          success,
-          result_summary: pair.completed?.data.result_summary ?? null,
-          error: pair.failed?.data.error ?? null,
-          spawn_seq: pair.spawned.seq,
-          spawn_time: pair.spawned.time,
-          children,
-        };
-      }),
-    );
-
-    // Sort deterministically — earliest spawn first.
-    nodes.sort((a, b) => a.spawn_seq - b.spawn_seq);
-    return nodes;
-  }
-
-  return buildLevel(mainWireRecords, 0, null);
-}
diff --git a/apps/vis/server/src/lib/types.ts b/apps/vis/server/src/lib/types.ts
deleted file mode 100644
index de98d1a..0000000
--- a/apps/vis/server/src/lib/types.ts
+++ /dev/null
@@ -1,725 +0,0 @@
-// Vis-local mirror of the core WireRecord interfaces. Copied so the
-// `VisWireRecord` union stays structurally equal to the core `WireRecord`
-// union; the sole cast lives in `lib/wire-loader.ts` and is safe because
-// these interfaces are field-for-field compatible.
-//
-// Plus the vis-specific response types consumed by `server/src/routes/*`
-// and the `web/` SPA.
-
-// ── Supporting types (subset of core helpers) ────────────────────────────
-
-export interface TextPart {
-  type: 'text';
-  text: string;
-}
-export interface ImageURLPart {
-  type: 'image_url';
-  image_url: { url: string };
-}
-export interface VideoURLPart {
-  type: 'video_url';
-  video_url: { url: string };
-}
-export type UserInputPart = TextPart | ImageURLPart | VideoURLPart;
-
-export interface TokenUsage {
-  input: number;
-  output: number;
-  cache_read?: number | undefined;
-  cache_write?: number | undefined;
-}
-
-// ── File metadata header ────────────────────────────────────────────────
-
-export interface WireFileMetadata {
-  type: 'metadata';
-  protocol_version: string;
-  created_at: number;
-  kimi_version?: string | undefined;
-  /** Implementation that wrote the wire file. Present on TS-native sessions. */
-  producer?: WireProducer | undefined;
-}
-
-/** Implementation that wrote the wire file (Python migration vs native TS). */
-export interface WireProducer {
-  kind: 'python' | 'typescript';
-  name: string;
-  version: string;
-}
-
-// ── Vis-synthetic timeline records ─────────────────────────────────────
-// `replayWire()` strips the file header (line 1) and session_initialized
-// (line 2) out of `records[]` and exposes them separately. To make the
-// Wire tab show EVERYTHING that lives in wire.jsonl, we splice them back
-// in as synthetic timeline records, with `seq`/`time` synthesised where
-// the on-disk record lacks them.
-
-export interface MetadataRecord {
-  type: 'metadata';
-  /** Synthetic: 0 (placed just before session_initialized). */
-  seq: number;
-  /** Synthetic: mirrors `created_at`. */
-  time: number;
-  protocol_version: string;
-  created_at: number;
-  kimi_version?: string | undefined;
-  producer?: WireProducer | undefined;
-  /** Vis-only: which wire file this header came from (useful across archives). */
-  file_name?: string | undefined;
-}
-
-// ── session_initialized ───────────────────────────────────────────────
-// Line 2 of every TS-native wire.jsonl. Carries startup baseline that
-// the projector reads as authoritative — extracted by replayWire out of
-// `records[]` onto `ReplayResult.sessionInitialized`.
-
-interface SessionInitializedCommonFields {
-  type: 'session_initialized';
-  seq: number;
-  time: number;
-  system_prompt: string;
-  active_tools: string[];
-  model?: string | undefined;
-  permission_mode?: 'default' | 'acceptEdits' | 'bypassPermissions' | undefined;
-  plan_mode?: boolean | undefined;
-  workspace_dir?: string | undefined;
-  thinking_level?: string | undefined;
-}
-
-export interface SessionInitializedMainRecord extends SessionInitializedCommonFields {
-  agent_type: 'main';
-  session_id: string;
-}
-
-export interface SessionInitializedSubRecord extends SessionInitializedCommonFields {
-  agent_type: 'sub';
-  agent_id: string;
-  agent_name?: string | undefined;
-  parent_session_id: string;
-  parent_agent_id?: string | undefined;
-  parent_tool_call_id: string;
-  run_in_background: boolean;
-}
-
-export interface SessionInitializedIndependentRecord extends SessionInitializedCommonFields {
-  agent_type: 'independent';
-  agent_id: string;
-  agent_name?: string | undefined;
-}
-
-export type SessionInitializedRecord =
-  | SessionInitializedMainRecord
-  | SessionInitializedSubRecord
-  | SessionInitializedIndependentRecord;
-
-// ── Record branches ──────────────────────────────────────────────────
-
-export interface TurnBeginRecord {
-  type: 'turn_begin';
-  seq: number;
-  time: number;
-  turn_id: string;
-  agent_type: 'main' | 'sub' | 'independent';
-  user_input?: string | undefined;
-  input_kind: 'user' | 'system_trigger';
-  trigger_source?: string | undefined;
-}
-
-export interface TurnEndRecord {
-  type: 'turn_end';
-  seq: number;
-  time: number;
-  turn_id: string;
-  agent_type: 'main' | 'sub' | 'independent';
-  success: boolean;
-  reason: 'done' | 'cancelled' | 'error' | 'interrupted';
-  usage?:
-    | {
-        input_tokens: number;
-        output_tokens: number;
-        cache_read_tokens?: number | undefined;
-        cache_write_tokens?: number | undefined;
-        cost_usd?: number | undefined;
-      }
-    | undefined;
-  synthetic?: boolean | undefined;
-}
-
-export interface UserMessageRecord {
-  type: 'user_message';
-  seq: number;
-  time: number;
-  turn_id: string;
-  content: string | readonly UserInputPart[];
-  uuid?: string | undefined;
-}
-
-// ── Atomic streaming records (replaces assistant_message) ─────────────
-// Each LLM step is a sequence: step_begin → (content_part|tool_call)* → step_end.
-// An "assistant message" is reconstructed by coalescing these atoms by step_uuid.
-
-export interface StepBeginRecord {
-  type: 'step_begin';
-  seq: number;
-  time: number;
-  /** Unique id for this step (anchor for its content_part / tool_call atoms). */
-  uuid: string;
-  turn_id: string;
-  step: number;
-}
-
-export interface StepEndRecord {
-  type: 'step_end';
-  seq: number;
-  time: number;
-  uuid: string;
-  turn_id: string;
-  step: number;
-  usage?:
-    | {
-        input_tokens: number;
-        output_tokens: number;
-        cache_read_tokens?: number | undefined;
-        cache_write_tokens?: number | undefined;
-      }
-    | undefined;
-  finish_reason?: string | undefined;
-}
-
-export interface ContentPartRecord {
-  type: 'content_part';
-  seq: number;
-  time: number;
-  uuid: string;
-  turn_id: string;
-  step: number;
-  /** Anchors to the step_begin.uuid that opened this step. */
-  step_uuid: string;
-  role: 'assistant';
-  /** Inner key is `kind` (not `type`) to avoid outer-union collision. */
-  part:
-    | { kind: 'text'; text: string }
-    | { kind: 'think'; think: string; encrypted?: string | undefined };
-}
-
-export interface ToolResultRecord {
-  type: 'tool_result';
-  seq: number;
-  time: number;
-  turn_id: string;
-  tool_call_id: string;
-  output: unknown;
-  is_error?: boolean | undefined;
-  synthetic?: boolean | undefined;
-  uuid?: string | undefined;
-  parent_uuid?: string | undefined;
-}
-
-export interface CompactionRecord {
-  type: 'compaction';
-  seq: number;
-  time: number;
-  summary: string;
-  pre_compact_tokens: number;
-  post_compact_tokens: number;
-  uuid?: string | undefined;
-}
-
-export interface SystemPromptChangedRecord {
-  type: 'system_prompt_changed';
-  seq: number;
-  time: number;
-  new_prompt: string;
-}
-
-export interface ToolsChangedRecord {
-  type: 'tools_changed';
-  seq: number;
-  time: number;
-  operation: 'register' | 'remove' | 'set_active';
-  tools: string[];
-}
-
-export interface SystemReminderRecord {
-  type: 'system_reminder';
-  seq: number;
-  time: number;
-  content: string;
-  consumed_at_turn?: number | undefined;
-}
-
-export interface NotificationRecord {
-  type: 'notification';
-  seq: number;
-  time: number;
-  data: {
-    id: string;
-    category: 'task' | 'agent' | 'system' | 'team';
-    type: string;
-    source_kind: string;
-    source_id: string;
-    title: string;
-    body: string;
-    severity: 'info' | 'success' | 'warning' | 'error';
-    payload?: Record<string, unknown> | undefined;
-    targets: Array<'llm' | 'wire' | 'shell'>;
-    dedupe_key?: string | undefined;
-    delivered_at?:
-      | {
-          llm?: number | undefined;
-          wire?: number | undefined;
-          shell?: number | undefined;
-        }
-      | undefined;
-    envelope_id?: string | undefined;
-    // background_task notifications attach streamed tail output that the
-    // live projector renders into a <task-notification> block.
-    tail_output?: string | undefined;
-  };
-}
-
-// First-class tool-call record (was once telemetry-only under a different name).
-export interface ToolCallRecord {
-  type: 'tool_call';
-  seq: number;
-  time: number;
-  uuid: string;
-  turn_id: string;
-  step: number;
-  /** Anchors to the step_begin.uuid that opened this step. */
-  step_uuid: string;
-  data: {
-    tool_call_id: string;
-    tool_name: string;
-    args: unknown;
-    description?: string | undefined;
-    display?: ApprovalDisplay;
-  };
-}
-
-export interface ToolDeniedRecord {
-  type: 'tool_denied';
-  seq: number;
-  time: number;
-  turn_id: string;
-  step: number;
-  data: {
-    tool_call_id: string;
-    tool_name: string;
-    rule_id: string;
-    reason: string;
-  };
-}
-
-export type McpApprovalReason = 'elicitation' | 'auth' | 'tool_call';
-
-export type ApprovalSource =
-  | { kind: 'loop'; agent_id: string }
-  | { kind: 'subagent'; agent_id: string; subagent_type?: string | undefined }
-  | { kind: 'turn'; turn_id: string }
-  | { kind: 'session'; session_id: string }
-  | { kind: 'mcp'; server_id: string; reason: McpApprovalReason };
-
-// `ApprovalDisplay` is `ToolInputDisplay` in core. We intentionally keep the
-// shape opaque here — vis only passes it through to the UI.
-export type ApprovalDisplay = unknown;
-
-export type SkillInvocationTrigger = 'user-slash' | 'model-tool' | 'nested-skill';
-
-export interface SkillInvokedRecord {
-  type: 'skill_invoked';
-  seq: number;
-  time: number;
-  turn_id: string;
-  agent_type?: 'main' | 'sub' | 'independent' | undefined;
-  data: {
-    skill_name: string;
-    execution_mode: 'inline' | 'fork';
-    original_input: string;
-    sub_agent_id?: string | undefined;
-    invocation_trigger?: SkillInvocationTrigger | undefined;
-    query_depth?: number | undefined;
-  };
-}
-
-export interface SkillCompletedRecord {
-  type: 'skill_completed';
-  seq: number;
-  time: number;
-  turn_id: string;
-  agent_type?: 'main' | 'sub' | 'independent' | undefined;
-  data: {
-    skill_name: string;
-    execution_mode: 'inline' | 'fork';
-    success: boolean;
-    error?: string | undefined;
-    sub_agent_id?: string | undefined;
-    invocation_trigger?: SkillInvocationTrigger | undefined;
-    query_depth?: number | undefined;
-  };
-}
-
-export interface ApprovalRequestRecord {
-  type: 'approval_request';
-  seq: number;
-  time: number;
-  turn_id: string;
-  step: number;
-  data: {
-    request_id: string;
-    tool_call_id: string;
-    tool_name: string;
-    action: string;
-    display: ApprovalDisplay;
-    source: ApprovalSource;
-  };
-}
-
-export interface ApprovalResponseRecord {
-  type: 'approval_response';
-  seq: number;
-  time: number;
-  turn_id: string;
-  step: number;
-  data: {
-    request_id: string;
-    response: 'approved' | 'rejected' | 'cancelled';
-    feedback?: string | undefined;
-    selected_label?: string | undefined;
-    synthetic?: boolean | undefined;
-  };
-}
-
-export interface TeamMailRecord {
-  type: 'team_mail';
-  seq: number;
-  time: number;
-  data: {
-    mail_id: string;
-    reply_to?: string | undefined;
-    from_agent: string;
-    to_agent: string;
-    content: string;
-    summary?: string | undefined;
-  };
-}
-
-export interface SubagentSpawnedRecord {
-  type: 'subagent_spawned';
-  seq: number;
-  time: number;
-  uuid?: string | undefined;
-  data: {
-    agent_id: string;
-    agent_name?: string | undefined;
-    parent_tool_call_id: string;
-    parent_agent_id?: string | undefined;
-    parent_tool_call_uuid?: string | undefined;
-    run_in_background: boolean;
-  };
-}
-
-export interface SubagentCompletedRecord {
-  type: 'subagent_completed';
-  seq: number;
-  time: number;
-  uuid?: string | undefined;
-  parent_uuid?: string | undefined;
-  data: {
-    agent_id: string;
-    parent_tool_call_id: string;
-    result_summary: string;
-    usage?: TokenUsage | undefined;
-  };
-}
-
-export interface SubagentFailedRecord {
-  type: 'subagent_failed';
-  seq: number;
-  time: number;
-  uuid?: string | undefined;
-  parent_uuid?: string | undefined;
-  data: {
-    agent_id: string;
-    parent_tool_call_id: string;
-    error: string;
-  };
-}
-
-export interface OwnershipChangedRecord {
-  type: 'ownership_changed';
-  seq: number;
-  time: number;
-  old_owner: string | null;
-  new_owner: string;
-}
-
-export interface ContextEditRecord {
-  type: 'context_edit';
-  seq: number;
-  time: number;
-  operation: 'edit_message' | 'delete_message' | 'rewind' | 'insert_message' | 'replace_message';
-  target_seq?: number | undefined;
-  to_turn?: number | undefined;
-  after_seq?: number | undefined;
-  new_content?: string | undefined;
-  new_role?: 'user' | 'assistant' | 'system' | undefined;
-  cascade?: boolean | undefined;
-}
-
-export interface ContextClearedRecord {
-  type: 'context_cleared';
-  seq: number;
-  time: number;
-}
-
-// ── Union ─────────────────────────────────────────────────────────────
-
-export type VisWireRecord =
-  | MetadataRecord
-  | SessionInitializedRecord
-  | TurnBeginRecord
-  | TurnEndRecord
-  | UserMessageRecord
-  | ToolResultRecord
-  | CompactionRecord
-  | SystemPromptChangedRecord
-  | ToolsChangedRecord
-  | SystemReminderRecord
-  | NotificationRecord
-  | StepBeginRecord
-  | StepEndRecord
-  | ContentPartRecord
-  | ToolCallRecord
-  | ToolDeniedRecord
-  | SkillInvokedRecord
-  | SkillCompletedRecord
-  | ApprovalRequestRecord
-  | ApprovalResponseRecord
-  | TeamMailRecord
-  | SubagentSpawnedRecord
-  | SubagentCompletedRecord
-  | SubagentFailedRecord
-  | OwnershipChangedRecord
-  | ContextEditRecord
-  | ContextClearedRecord;
-
-// ── Vis-specific response types ─────────────────────────────────────────
-
-export interface ApiError {
-  error: string;
-  code:
-    | 'NOT_FOUND'
-    | 'BAD_REQUEST'
-    | 'UNAUTHORIZED'
-    | 'READ_ERROR'
-    | 'PARSE_ERROR'
-    | 'DELETE_ERROR';
-}
-
-export interface DeleteSessionResponse {
-  session_id: string;
-  deleted: true;
-}
-
-export interface ClearSessionsResponse {
-  deleted_count: number;
-  failed: Array<{ session_id: string; error: string }>;
-}
-
-export interface SessionState {
-  session_id: string;
-  title?: string;
-  isCustomTitle?: boolean;
-  customTitle?: string;
-  lastPrompt?: string;
-  last_prompt?: string;
-  model?: string;
-  last_turn_id?: string;
-  last_turn_time?: number;
-  turn_count?: number;
-  created_at: number;
-  updated_at: number;
-  workspace_dir?: string;
-  auto_approve_actions?: string[];
-  permission_mode?: 'default' | 'acceptEdits' | 'bypassPermissions';
-  thinking_level?: string;
-  custom_title?: string;
-  plan_mode?: boolean;
-  plan_slug?: string;
-  tags?: string[];
-  description?: string;
-  archived?: boolean;
-  color?: string;
-  last_exit_code?: 'clean' | 'dirty';
-  /** Implementation that wrote this session. Vis only surfaces sessions
-   *  with `kind === 'typescript'`. */
-  producer?: WireProducer;
-}
-
-export interface SessionSummary {
-  session_id: string;
-  title: string | null;
-  last_prompt: string | null;
-  created_at: number;
-  updated_at: number;
-  last_turn_time: number | null;
-  model: string | null;
-  permission_mode: string | null;
-  last_exit_code: 'clean' | 'dirty' | null;
-  custom_title: string | null;
-  tags: string[];
-  archived: boolean;
-  workspace_dir: string | null;
-  wire_protocol_version: string | null;
-  wire_record_count: number;
-  archive_count: number;
-  subagent_count: number;
-  health: 'ok' | 'broken' | 'missing_wire';
-}
-
-export interface SessionDetail {
-  session_id: string;
-  title: string | null;
-  last_prompt: string | null;
-  state: SessionState;
-  subagent_ids: string[];
-  archive_files: string[];
-  tool_result_ids: string[];
-  wire_metadata: WireFileMetadata | null;
-}
-
-export interface WireResponse {
-  session_id: string;
-  agent_id: string | null;
-  files_read: string[];
-  health: 'ok' | 'broken';
-  broken_reason?: string;
-  warnings: string[];
-  records: VisWireRecord[];
-}
-
-export interface ContentPart {
-  type: 'text' | 'think' | 'image_url' | 'video_url';
-  [key: string]: unknown;
-}
-
-export interface ToolCallEntry {
-  type: 'function';
-  id: string;
-  name: string; arguments: string | null;
-}
-
-export type MessageOrigin =
-  | { kind: 'user' }
-  | { kind: 'assistant' }
-  | { kind: 'tool'; tool_call_id: string }
-  | { kind: 'system_reminder'; seq: number }
-  | { kind: 'notification'; seq: number; notification_id: string; severity: string };
-
-export interface AnnotatedMessage {
-  seq: number;
-  message: {
-    role: 'user' | 'assistant' | 'tool';
-    content: ContentPart[];
-    tool_calls: ToolCallEntry[];
-    tool_call_id?: string;
-  };
-  origin: MessageOrigin;
-  is_ephemeral: boolean;
-  out_of_context: boolean;
-  persisted_output_path?: string;
-}
-
-export interface ProjectedStateSummary {
-  model: string | null;
-  system_prompt: string | null;
-  active_tools: string[];
-  last_seq: number;
-  token_count: number;
-  permission_mode: string | null;
-  plan_mode: boolean;
-  /** Token breakdown, summed from every `step_end.usage` in the session.
-   *  Provides the 4-segment bar shown at the top of the Context tab.
-   *  Zero when no step_ends have been observed (e.g. pre-protocol session). */
-  input_tokens: number;
-  output_tokens: number;
-  cache_read_tokens: number;
-  cache_write_tokens: number;
-}
-
-export interface ContextResponse {
-  session_id: string;
-  agent_id: string | null;
-  annotated_messages: AnnotatedMessage[];
-  projected_state: ProjectedStateSummary;
-}
-
-export interface SubagentNode {
-  agent_id: string;
-  agent_name: string | null;
-  subagent_type: string | null;
-  run_in_background: boolean;
-  parent_agent_id: string | null;
-  depth: number;
-  status: 'running' | 'completed' | 'failed' | 'killed' | 'lost' | 'unknown';
-  success: boolean | null;
-  result_summary: string | null;
-  error: string | null;
-  spawn_seq: number;
-  spawn_time: number;
-  children: SubagentNode[];
-}
-
-export interface SubagentTreeResponse {
-  session_id: string;
-  tree: SubagentNode[];
-}
-
-export interface SubagentMetaResponse {
-  agent_id: string;
-  session_id: string;
-  meta_json: {
-    agent_id: string;
-    subagent_type: string;
-    status: string;
-    description: string;
-    parent_tool_call_id: string;
-    created_at: number;
-    updated_at: number;
-  } | null;
-  spawned_record: {
-    agent_name?: string;
-    parent_tool_call_id: string;
-    parent_agent_id?: string;
-    run_in_background: boolean;
-    seq: number;
-    time: number;
-  } | null;
-  completed_record: {
-    parent_tool_call_id: string;
-    result_summary: string;
-    usage?: {
-      input_tokens: number;
-      output_tokens: number;
-      cache_read_tokens?: number;
-      cache_write_tokens?: number;
-    };
-    seq: number;
-    time: number;
-  } | null;
-  failed_record: {
-    parent_tool_call_id: string;
-    error: string;
-    seq: number;
-    time: number;
-  } | null;
-  depth: number;
-}
-
-export interface ToolResultFileResponse {
-  tool_call_id: string;
-  session_id: string;
-  size_bytes: number;
-  content: string;
-}
diff --git a/apps/vis/server/src/lib/wire-loader.ts b/apps/vis/server/src/lib/wire-loader.ts
deleted file mode 100644
index 3f29eaf..0000000
--- a/apps/vis/server/src/lib/wire-loader.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { readdir, readFile } from 'node:fs/promises';
-import { basename, join } from 'node:path';
-
-import type {
-  MetadataRecord,
-  SessionInitializedRecord,
-  VisWireRecord,
-  WireFileMetadata,
-} from './types';
-import { replayWire } from './wire-replay';
-
-const ARCHIVE_RE = /^wire\.(\d+)\.jsonl$/;
-
-export interface WireLoadResult {
-  records: VisWireRecord[];
-  /** session_initialized from the newest wire file's line 2.
-   *  `null` when the session predates the line-2 header convention or
-   *  the file lacks a `session_initialized` line. */
-  session_initialized: SessionInitializedRecord | null;
-  health: 'ok' | 'broken';
-  broken_reason?: string;
-  warnings: string[];
-  files_read: string[];
-}
-
-/**
- * Enumerate all wire files in `agentDir` (archives first, ascending by N;
- * then current `wire.jsonl`). Re-implemented locally because the
- * corresponding helper inside `@moonshot-ai/agent-core` is not exported.
- */
-export async function listWireFilesManually(agentDir: string): Promise<string[]> {
-  const wireDir = await resolveWireDir(agentDir);
-  let entries: string[];
-  try {
-    entries = await readdir(wireDir);
-  } catch {
-    return [];
-  }
-
-  const archives: { path: string; n: number }[] = [];
-  let current: string | null = null;
-  for (const entry of entries) {
-    if (entry === 'wire.jsonl') {
-      current = join(wireDir, entry);
-      continue;
-    }
-    const m = ARCHIVE_RE.exec(entry);
-    if (m?.[1] !== undefined) {
-      archives.push({ path: join(wireDir, entry), n: Number.parseInt(m[1], 10) });
-    }
-  }
-  archives.sort((a, b) => a.n - b.n);
-  const out = archives.map((a) => a.path);
-  if (current !== null) {
-    out.push(current);
-  }
-  return out;
-}
-
-async function resolveWireDir(agentDir: string): Promise<string> {
-  const mainDir = join(agentDir, 'agents', 'main');
-  try {
-    const entries = await readdir(mainDir);
-    if (entries.includes('wire.jsonl')) return mainDir;
-  } catch {
-    // `agentDir` is already an agent dir or has no main agent.
-  }
-  return agentDir;
-}
-
-/**
- * Load all wire records for an agent (main or subagent) in age order.
- *
- * Calls `replayWire()` per file and concatenates — core only exports the
- * single-file replay primitive, so multi-file replay is composed here.
- *
- * The cast to `VisWireRecord[]` is the sole trust boundary in vis. Safe
- * because the vis mirror types are field-for-field identical to the core
- * `WireRecord` union and `replayWire()` only emits validated records.
- */
-export async function loadWireRecords(agentDir: string): Promise<WireLoadResult> {
-  const files = await listWireFilesManually(agentDir);
-
-  if (files.length === 0) {
-    return {
-      records: [],
-      session_initialized: null,
-      health: 'broken',
-      broken_reason: `no wire files found under ${agentDir}`,
-      warnings: [],
-      files_read: [],
-    };
-  }
-
-  const records: VisWireRecord[] = [];
-  const warnings: string[] = [];
-  let overallHealth: 'ok' | 'broken' = 'ok';
-  let brokenReason: string | undefined;
-  const filesRead: string[] = [];
-  // session_initialized is the line-2 truth source. Keep the most-recent
-  // (current wire's) value, not archive values, so post-compaction the
-  // live model/prompt is reflected.
-  let sessionInitialized: SessionInitializedRecord | null = null;
-
-  for (const filePath of files) {
-    try {
-      const result = await replayWire(filePath);
-      filesRead.push(filePath);
-      const fileMeta = await readMetadataLine(filePath);
-      const init = result.sessionInitialized;
-      // Splice the two wire.jsonl header lines back into the timeline so
-      // the Wire tab shows EVERYTHING in the file (including system_prompt).
-      if (fileMeta !== null) {
-        const metaRecord: MetadataRecord = {
-          type: 'metadata',
-          seq: 0,
-          time: fileMeta.created_at,
-          protocol_version: fileMeta.protocol_version,
-          created_at: fileMeta.created_at,
-          file_name: basename(filePath),
-        };
-        if (fileMeta.kimi_version !== undefined) metaRecord.kimi_version = fileMeta.kimi_version;
-        if (fileMeta.producer !== undefined) metaRecord.producer = fileMeta.producer;
-        records.push(metaRecord);
-      }
-      if (init !== null) records.push(init);
-      records.push(...(result.records));
-      sessionInitialized = init;
-      for (const w of result.warnings) warnings.push(`${filePath}: ${w}`);
-      if (result.health === 'broken') {
-        overallHealth = 'broken';
-        brokenReason ??= result.brokenReason ?? `broken wire file: ${filePath}`;
-      }
-    } catch (error) {
-      // Filesystem / unexpected errors surface as a soft broken state —
-      // vis still lists the session and shows its raw records if we
-      // have any.
-      overallHealth = 'broken';
-      const reason = error instanceof Error ? error.message : String(error);
-      brokenReason ??= `${filePath}: ${reason}`;
-      warnings.push(`${filePath}: ${reason}`);
-    }
-  }
-
-  const out: WireLoadResult = {
-    records,
-    session_initialized: sessionInitialized,
-    health: overallHealth,
-    warnings,
-    files_read: filesRead,
-  };
-  if (brokenReason !== undefined) out.broken_reason = brokenReason;
-  return out;
-}
-
-/** Parse line 1 of a wire.jsonl as the file-header metadata record.
- *  Returns null on any read/parse failure — the caller already ran
- *  `replayWire()`, which validates the header independently, so this
- *  helper stays forgiving: missing metadata just means we can't splice
- *  it into the timeline, not that the session is broken. */
-async function readMetadataLine(filePath: string): Promise<WireFileMetadata | null> {
-  try {
-    const text = await readFile(filePath, 'utf8');
-    const nl = text.indexOf('\n');
-    const first = nl === -1 ? text : text.slice(0, nl);
-    if (first.length === 0) return null;
-    const parsed = JSON.parse(first) as unknown;
-    if (
-      typeof parsed !== 'object' ||
-      parsed === null ||
-      (parsed as { type?: unknown }).type !== 'metadata'
-    ) {
-      return null;
-    }
-    return parsed as WireFileMetadata;
-  } catch {
-    return null;
-  }
-}
diff --git a/apps/vis/server/src/lib/wire-reader.ts b/apps/vis/server/src/lib/wire-reader.ts
new file mode 100644
index 0000000..83bc598
--- /dev/null
+++ b/apps/vis/server/src/lib/wire-reader.ts
@@ -0,0 +1,66 @@
+import { createReadStream } from 'node:fs';
+import { createInterface } from 'node:readline';
+
+import type { AgentRecord } from './agent-record-types';
+
+// Hardcoded to keep vitest from pulling agent-core's full runtime (which
+// imports a .yaml asset) when this module is loaded in test environments.
+// Kept in sync with agent-core's AGENT_WIRE_PROTOCOL_VERSION constant.
+const AGENT_WIRE_PROTOCOL_VERSION = '1.1';
+
+export interface WireReadResult {
+  metadata: { protocolVersion: string; createdAt: number };
+  records: ReadonlyArray<AgentRecord & { _lineNo: number }>;
+  warnings: string[];
+}
+
+export async function readAgentWire(path: string): Promise<WireReadResult> {
+  const stream = createReadStream(path, { encoding: 'utf8' });
+  const rl = createInterface({ input: stream, crlfDelay: Infinity });
+  let lineNo = 0;
+  let metadata: WireReadResult['metadata'] | null = null;
+  const records: (AgentRecord & { _lineNo: number })[] = [];
+  const warnings: string[] = [];
+
+  for await (const line of rl) {
+    lineNo += 1;
+    if (line.length === 0) continue;
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(line);
+    } catch (err) {
+      warnings.push(`line ${lineNo}: invalid JSON (${(err as Error).message})`);
+      continue;
+    }
+    if (!isObject(parsed) || typeof parsed.type !== 'string') {
+      warnings.push(`line ${lineNo}: missing 'type' field`);
+      continue;
+    }
+    if (metadata === null) {
+      if (parsed.type !== 'metadata') {
+        throw new Error(`Wire file missing metadata header at line ${lineNo}`);
+      }
+      const pv = parsed['protocol_version'];
+      const ca = parsed['created_at'];
+      if (typeof pv !== 'string' || typeof ca !== 'number') {
+        throw new Error(`Wire metadata malformed at line ${lineNo}`);
+      }
+      if (pv !== AGENT_WIRE_PROTOCOL_VERSION) {
+        throw new Error(
+          `Unsupported protocol version "${pv}" (vis supports ${AGENT_WIRE_PROTOCOL_VERSION})`,
+        );
+      }
+      metadata = { protocolVersion: pv, createdAt: ca };
+      continue;
+    }
+    records.push({ ...(parsed as AgentRecord), _lineNo: lineNo });
+  }
+  if (metadata === null) {
+    throw new Error('Wire file is empty (no metadata)');
+  }
+  return { metadata, records, warnings };
+}
+
+function isObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
diff --git a/apps/vis/server/src/lib/wire-replay.ts b/apps/vis/server/src/lib/wire-replay.ts
deleted file mode 100644
index d338816..0000000
--- a/apps/vis/server/src/lib/wire-replay.ts
+++ /dev/null
@@ -1,509 +0,0 @@
-import { readFile } from 'node:fs/promises';
-
-import {
-  migrateWireRecords,
-  type WireMigrationRecord,
-} from '@moonshot-ai/agent-core/agent/records/migration';
-
-import type {
-  ContentPartRecord,
-  NotificationRecord,
-  SessionInitializedRecord,
-  StepBeginRecord,
-  StepEndRecord,
-  SystemReminderRecord,
-  SystemPromptChangedRecord,
-  ToolCallRecord,
-  ToolResultRecord,
-  ToolsChangedRecord,
-  TurnBeginRecord,
-  UserInputPart,
-  UserMessageRecord,
-  VisWireRecord,
-  WireFileMetadata,
-} from './types';
-
-export interface ReplayWireResult {
-  health: 'ok' | 'broken';
-  brokenReason?: string;
-  warnings: string[];
-  metadata: WireFileMetadata | null;
-  sessionInitialized: SessionInitializedRecord | null;
-  records: VisWireRecord[];
-}
-
-export async function replayWire(wirePath: string): Promise<ReplayWireResult> {
-  const raw = await readFile(wirePath, 'utf8');
-  const lines = raw.split(/\r?\n/).filter((line) => line.length > 0);
-  const warnings: string[] = [];
-  const records: VisWireRecord[] = [];
-  const rawRecords: RawWireRecord[] = [];
-  let metadata: WireFileMetadata | null = null;
-  let sessionInitialized: SessionInitializedRecord | null = null;
-  let nextTurnIndex = 0;
-  let currentTurnId = '0';
-
-  for (const [index, line] of lines.entries()) {
-    const seq = index + 1;
-    let parsed: unknown;
-    try {
-      parsed = JSON.parse(line) as unknown;
-    } catch (error) {
-      warnings.push(`line ${index + 1}: ${error instanceof Error ? error.message : String(error)}`);
-      continue;
-    }
-    if (!isRecord(parsed) || typeof parsed['type'] !== 'string') {
-      warnings.push(`line ${index + 1}: missing record type`);
-      continue;
-    }
-    rawRecords.push({ seq, raw: parsed });
-  }
-
-  // Extract source version from metadata (if any) and apply wire migrations.
-  let sourceVersion: string | undefined;
-  for (const record of rawRecords) {
-    if (record.raw['type'] === 'metadata') {
-      const meta = record.raw as unknown as WireFileMetadata;
-      sourceVersion ??= meta.protocol_version;
-    }
-  }
-  const migrated = migrateWireRecords(
-    rawRecords.map((r) => r.raw as WireMigrationRecord),
-    sourceVersion,
-  );
-  for (const [i, rawRecord] of rawRecords.entries()) {
-    rawRecord.raw = migrated[i]!;
-  }
-
-  for (const [recordIndex, record] of rawRecords.entries()) {
-    const parsed = record.raw;
-    const seq = record.seq;
-    if (parsed['type'] === 'metadata') {
-      metadata ??= parsed as unknown as WireFileMetadata;
-      continue;
-    }
-    if (parsed['type'] === 'session_initialized') {
-      sessionInitialized = parsed as unknown as SessionInitializedRecord;
-      continue;
-    }
-    const normalized = normalizeRecord(
-      parsed,
-      seq,
-      currentTurnId,
-      nextTurnIndex,
-      rawRecords,
-      recordIndex,
-    );
-    records.push(...normalized.records);
-    if (normalized.currentTurnId !== undefined) currentTurnId = normalized.currentTurnId;
-    if (normalized.nextTurnIndex !== undefined) nextTurnIndex = normalized.nextTurnIndex;
-  }
-
-  const out: ReplayWireResult = {
-    health: warnings.length === 0 ? 'ok' : 'broken',
-    warnings,
-    metadata,
-    sessionInitialized,
-    records,
-  };
-  if (warnings.length > 0) out.brokenReason = warnings[0];
-  return out;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
-}
-
-interface RawWireRecord {
-  seq: number;
-  raw: Record<string, unknown>;
-}
-
-interface NormalizeResult {
-  records: VisWireRecord[];
-  currentTurnId?: string;
-  nextTurnIndex?: number;
-}
-
-function normalizeRecord(
-  raw: Record<string, unknown>,
-  fallbackSeq: number,
-  currentTurnId: string,
-  nextTurnIndex: number,
-  rawRecords: readonly RawWireRecord[],
-  recordIndex: number,
-): NormalizeResult {
-  const seq = numberValue(raw['seq']) ?? fallbackSeq;
-  const time = numberValue(raw['time']) ?? 0;
-  const type = stringValue(raw['type']) ?? 'unknown';
-
-  switch (type) {
-    case 'turn.prompt':
-      return normalizeTurnStart(raw, seq, time, nextTurnIndex);
-
-    case 'turn.steer': {
-      const turnId = inferSteerStartedTurnId(rawRecords, recordIndex, currentTurnId, nextTurnIndex);
-      if (turnId === undefined) return { records: [] };
-      return normalizeTurnStart(raw, seq, time, nextTurnIndex, turnId);
-    }
-
-    case 'context.user_message':
-    case 'context.append_message': {
-      // `context.append_message` (newer producer) nests `{role, content}`
-      // under a `message` field; `context.user_message` (older) puts
-      // `content` at the top level. Only surface user-authored messages —
-      // assistant messages are already represented by content.part events
-      // inside loop events.
-      if (!isUserAuthoredAppendMessage(raw)) {
-        return { records: [notificationFromRaw(raw, seq, time)] };
-      }
-      const message = isRecord(raw['message']) ? raw['message'] : undefined;
-      const rawContent = message !== undefined ? message['content'] : raw['content'];
-      const content = Array.isArray(rawContent)
-        ? (rawContent as readonly UserInputPart[])
-        : (stringValue(rawContent) ?? '');
-      const record: UserMessageRecord = {
-        type: 'user_message',
-        seq,
-        time,
-        turn_id: currentTurnId,
-        content,
-      };
-      return { records: [record] };
-    }
-
-    case 'context.delta':
-    case 'context.append_loop_event': {
-      const event = raw['event'];
-      if (!isRecord(event)) return { records: [notificationFromRaw(raw, seq, time)] };
-      const eventTurnId = stringValue(event['turnId']);
-      const records = normalizeLoopEvent(event, seq, time, currentTurnId);
-      return {
-        records,
-        currentTurnId: eventTurnId,
-      };
-    }
-
-    case 'config.update': {
-      const prompt = stringValue(raw['systemPrompt']);
-      if (prompt !== undefined) {
-        const record: SystemPromptChangedRecord = {
-          type: 'system_prompt_changed',
-          seq,
-          time,
-          new_prompt: prompt,
-        };
-        return { records: [record] };
-      }
-      return { records: [notificationFromRaw(raw, seq, time)] };
-    }
-
-    case 'tool.set_active':
-    case 'tools.set_active_tools': {
-      const names = Array.isArray(raw['names'])
-        ? raw['names'].filter((name): name is string => typeof name === 'string')
-        : [];
-      const record: ToolsChangedRecord = {
-        type: 'tools_changed',
-        seq,
-        time,
-        operation: 'set_active',
-        tools: names,
-      };
-      return { records: [record] };
-    }
-
-    case 'context.system_reminder': {
-      const record: SystemReminderRecord = {
-        type: 'system_reminder',
-        seq,
-        time,
-        content: stringValue(raw['content']) ?? '',
-      };
-      return { records: [record] };
-    }
-
-    case 'context.clear':
-      return { records: [{ type: 'context_cleared', seq, time }] };
-
-    case 'context.mark_last_user_prompt_blocked':
-      return { records: [] };
-
-    default:
-      return {
-        records: [
-          hasLegacyShape(raw)
-            ? (raw as unknown as VisWireRecord)
-            : notificationFromRaw(raw, seq, time),
-        ],
-      };
-  }
-}
-
-function normalizeTurnStart(
-  raw: Record<string, unknown>,
-  seq: number,
-  time: number,
-  nextTurnIndex: number,
-  turnId = String(nextTurnIndex),
-): NormalizeResult {
-  const input = Array.isArray(raw['input']) ? (raw['input'] as readonly UserInputPart[]) : [];
-  const record: TurnBeginRecord = {
-    type: 'turn_begin',
-    seq,
-    time,
-    turn_id: turnId,
-    agent_type: 'main',
-    input_kind: 'user',
-    user_input: inputToText(input),
-  };
-  return {
-    records: [record],
-    currentTurnId: turnId,
-    nextTurnIndex: nextTurnIndexAfter(turnId, nextTurnIndex),
-  };
-}
-
-function inferSteerStartedTurnId(
-  rawRecords: readonly RawWireRecord[],
-  recordIndex: number,
-  currentTurnId: string,
-  nextTurnIndex: number,
-): string | undefined {
-  let sawUserMessage = false;
-
-  // Wire does not persist turn.ended, so past records cannot prove whether
-  // core still had an active turn. The next explicit loop turnId is the durable
-  // signal for whether this steer stayed buffered or launched a fresh turn.
-  for (let index = recordIndex + 1; index < rawRecords.length; index += 1) {
-    const raw = rawRecords[index]?.raw;
-    if (raw === undefined) continue;
-
-    const type = stringValue(raw['type']);
-    if (type === 'turn.prompt' || type === 'turn.steer') break;
-    if (type === 'context.user_message' || type === 'context.append_message') {
-      // Only an actual user message should count as evidence that the
-      // steer launched a fresh turn. The newer `context.append_message`
-      // producer carries assistant / system roles too, and
-      // `ContextMemory.appendSystemReminder()` persists injected
-      // reminders with role: 'user' but a non-user origin — both of
-      // those would fabricate a fresh turn ID below and mis-tag
-      // subsequent records.
-      if (isUserAuthoredAppendMessage(raw)) {
-        sawUserMessage = true;
-      }
-      continue;
-    }
-    if (type !== 'context.delta' && type !== 'context.append_loop_event') continue;
-
-    const event = raw['event'];
-    if (!isRecord(event)) continue;
-
-    const eventTurnId = stringValue(event['turnId']);
-    if (eventTurnId === undefined) continue;
-    return eventTurnId === currentTurnId ? undefined : eventTurnId;
-  }
-
-  return sawUserMessage ? String(nextTurnIndex) : undefined;
-}
-
-// Distinguishes real user input from non-user content that shares the
-// `role: 'user'` slot for the LLM (system reminders, skill activation
-// payloads, injection content, compaction summaries). The older
-// `context.user_message` shape has no `origin`, so absence is treated
-// as user authorship to preserve back-compat with older wire logs.
-function isUserAuthoredAppendMessage(raw: Record<string, unknown>): boolean {
-  const message = isRecord(raw['message']) ? raw['message'] : undefined;
-  const role = stringValue(message?.['role']) ?? stringValue(raw['role']);
-  if (role !== undefined && role !== 'user') return false;
-  const origin = isRecord(message?.['origin']) ? message['origin'] : undefined;
-  const originKind = stringValue(origin?.['kind']);
-  if (originKind !== undefined && originKind !== 'user') return false;
-  return true;
-}
-
-function nextTurnIndexAfter(turnId: string, nextTurnIndex: number): number {
-  const parsed = Number.parseInt(turnId, 10);
-  if (String(parsed) === turnId && parsed >= nextTurnIndex) return parsed + 1;
-  return nextTurnIndex + 1;
-}
-
-function normalizeLoopEvent(
-  event: Record<string, unknown>,
-  seq: number,
-  time: number,
-  currentTurnId: string,
-): VisWireRecord[] {
-  const eventType = stringValue(event['type']);
-  const turnId = stringValue(event['turnId']) ?? currentTurnId;
-
-  switch (eventType) {
-    case undefined:
-      return [notificationFromRaw({ type: 'context.delta', event }, seq, time)];
-
-    case 'step.begin': {
-      const record: StepBeginRecord = {
-        type: 'step_begin',
-        seq,
-        time,
-        uuid: stringValue(event['uuid']) ?? `step_${seq}`,
-        turn_id: turnId,
-        step: numberValue(event['step']) ?? 0,
-      };
-      return [record];
-    }
-
-    case 'content.part': {
-      const rawPart = isRecord(event['part']) ? event['part'] : {};
-      const kind = rawPart['type'] === 'think' || rawPart['kind'] === 'think' ? 'think' : 'text';
-      const record: ContentPartRecord = {
-        type: 'content_part',
-        seq,
-        time,
-        uuid: stringValue(event['uuid']) ?? `part_${seq}`,
-        turn_id: turnId,
-        step: numberValue(event['step']) ?? 0,
-        step_uuid: stringValue(event['stepUuid']) ?? '',
-        role: 'assistant',
-        part:
-          kind === 'think'
-            ? { kind, think: stringValue(rawPart['think']) ?? '' }
-            : { kind, text: stringValue(rawPart['text']) ?? '' },
-      };
-      return [record];
-    }
-
-    case 'tool.call': {
-      const record: ToolCallRecord = {
-        type: 'tool_call',
-        seq,
-        time,
-        uuid: stringValue(event['uuid']) ?? `tool_${seq}`,
-        turn_id: turnId,
-        step: numberValue(event['step']) ?? 0,
-        step_uuid: stringValue(event['stepUuid']) ?? '',
-        data: {
-          tool_call_id: stringValue(event['toolCallId']) ?? `tool_${seq}`,
-          tool_name: stringValue(event['name']) ?? 'unknown',
-          args: event['args'],
-          description: stringValue(event['description']),
-          display: event['display'],
-        },
-      };
-      return [record];
-    }
-
-    case 'tool.result': {
-      const result = isRecord(event['result']) ? event['result'] : {};
-      const record: ToolResultRecord = {
-        type: 'tool_result',
-        seq,
-        time,
-        turn_id: turnId,
-        tool_call_id: stringValue(event['toolCallId']) ?? `tool_${seq}`,
-        output: result['output'],
-        is_error: result['isError'] === true,
-        parent_uuid: stringValue(event['parentUuid']),
-      };
-      return [record];
-    }
-
-    case 'step.end': {
-      const record: StepEndRecord = {
-        type: 'step_end',
-        seq,
-        time,
-        uuid: stringValue(event['uuid']) ?? `step_${seq}`,
-        turn_id: turnId,
-        step: numberValue(event['step']) ?? 0,
-        usage: normalizeUsage(event['usage']),
-        finish_reason: stringValue(event['finishReason']),
-      };
-      return [record];
-    }
-
-    default:
-      return [notificationFromRaw({ type: 'context.delta', event }, seq, time)];
-  }
-}
-
-function notificationFromRaw(
-  raw: Record<string, unknown>,
-  seq: number,
-  time: number,
-): NotificationRecord {
-  const type = stringValue(raw['type']) ?? 'unknown';
-  return {
-    type: 'notification',
-    seq,
-    time,
-    data: {
-      id: `${seq}:${type}`,
-      category: 'system',
-      type,
-      source_kind: 'wire',
-      source_id: 'vis',
-      title: type,
-      body: stringify(raw),
-      severity: 'info',
-      payload: raw,
-      targets: ['wire'],
-    },
-  };
-}
-
-function hasLegacyShape(raw: Record<string, unknown>): boolean {
-  const type = stringValue(raw['type']);
-  return (
-    type !== undefined &&
-    !type.includes('.') &&
-    typeof raw['seq'] === 'number' &&
-    typeof raw['time'] === 'number'
-  );
-}
-
-function normalizeUsage(value: unknown): StepEndRecord['usage'] {
-  if (!isRecord(value)) return undefined;
-  return {
-    input_tokens:
-      numberValue(value['input_tokens']) ??
-      numberValue(value['input']) ??
-      numberValue(value['inputOther']) ??
-      0,
-    output_tokens: numberValue(value['output_tokens']) ?? numberValue(value['output']) ?? 0,
-    cache_read_tokens:
-      numberValue(value['cache_read_tokens']) ??
-      numberValue(value['cache_read']) ??
-      numberValue(value['inputCacheRead']),
-    cache_write_tokens:
-      numberValue(value['cache_write_tokens']) ??
-      numberValue(value['cache_write']) ??
-      numberValue(value['inputCacheCreation']),
-  };
-}
-
-function inputToText(input: readonly UserInputPart[]): string {
-  return input
-    .map((part) => {
-      if (part.type === 'text') return part.text;
-      if (part.type === 'image_url') return '<image>';
-      return '<video>';
-    })
-    .join('');
-}
-
-function stringValue(value: unknown): string | undefined {
-  return typeof value === 'string' && value.length > 0 ? value : undefined;
-}
-
-function numberValue(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-
-function stringify(value: unknown): string {
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return '[unserializable]';
-  }
-}
diff --git a/apps/vis/server/src/routes/context.ts b/apps/vis/server/src/routes/context.ts
index fdb1d56..8d8b2c8 100644
--- a/apps/vis/server/src/routes/context.ts
+++ b/apps/vis/server/src/routes/context.ts
@@ -1,57 +1,45 @@
-import { readFile, stat } from 'node:fs/promises';
-
 import { Hono } from 'hono';
+import { join } from 'node:path';
 
-import { pathConfig } from '../config';
-import { buildAnnotatedMessages, buildProjectedStateSummary } from '../lib/context-builder';
-import type { ContextResponse, SessionState } from '../lib/types';
-import { loadWireRecords } from '../lib/wire-loader';
-
-const SESSION_ID_RE = /^session_[a-zA-Z0-9_-]+$/;
+import { KIMI_CODE_HOME } from '../config';
+import { readSessionDetail } from '../lib/session-store';
+import { readAgentWire } from '../lib/wire-reader';
+import { projectContext } from '../lib/context-projector';
 
 export function contextRoute(): Hono {
-  const app = new Hono();
-
-  app.get('/:id/context', async (c) => {
+  const r = new Hono();
+  r.get('/:id/context', async (c) => {
     const id = c.req.param('id');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
+    const agentId = c.req.query('agent') ?? 'main';
+    const detail = await readSessionDetail(KIMI_CODE_HOME, id);
+    if (!detail) {
+      return c.json({ error: 'session not found', code: 'NOT_FOUND' }, 404);
     }
-    const sessionDir = pathConfig.sessionDir(id);
-    try {
-      const dirStat = await stat(sessionDir);
-      if (!dirStat.isDirectory()) {
-        return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
-      }
-    } catch {
-      return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
+    const agent = detail.agents.find((a) => a.agentId === agentId);
+    if (!agent || !agent.wireExists) {
+      return c.json({ error: 'agent wire not found', code: 'NOT_FOUND' }, 404);
     }
-
     try {
-      const load = await loadWireRecords(sessionDir);
-      const state = await readSessionState(id);
-      const annotated = buildAnnotatedMessages(load.records);
-      const projected = buildProjectedStateSummary(load.records, load.session_initialized, state);
-      const body: ContextResponse = {
-        session_id: id,
-        agent_id: null,
-        annotated_messages: annotated,
-        projected_state: projected,
-      };
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to build context: ${msg}`, code: 'READ_ERROR' }, 500);
+      const wire = await readAgentWire(
+        join(detail.sessionDir, 'agents', agentId, 'wire.jsonl'),
+      );
+      const proj = projectContext(wire.records);
+      return c.json({
+        sessionId: id,
+        agentId,
+        messages: proj.messages,
+        usage: proj.usage,
+        config: proj.config,
+        permission: proj.permission,
+        planMode: proj.planMode,
+      });
+    } catch (err) {
+      const msg = (err as Error).message;
+      if (msg.toLowerCase().includes('unsupported protocol')) {
+        return c.json({ error: msg, code: 'UNSUPPORTED_PROTOCOL' }, 400);
+      }
+      return c.json({ error: msg, code: 'READ_ERROR' }, 500);
     }
   });
-
-  return app;
-}
-
-async function readSessionState(sessionId: string): Promise<SessionState | null> {
-  try {
-    return JSON.parse(await readFile(pathConfig.statePath(sessionId), 'utf8')) as SessionState;
-  } catch {
-    return null;
-  }
+  return r;
 }
diff --git a/apps/vis/server/src/routes/session-detail.ts b/apps/vis/server/src/routes/session-detail.ts
index 3ab0897..53ba061 100644
--- a/apps/vis/server/src/routes/session-detail.ts
+++ b/apps/vis/server/src/routes/session-detail.ts
@@ -1,155 +1,14 @@
-import { createReadStream } from 'node:fs';
-import { readFile, readdir, stat } from 'node:fs/promises';
-import { join } from 'node:path';
-import { createInterface } from 'node:readline';
-
 import { Hono } from 'hono';
-
-import { pathConfig } from '../config';
-import { deleteSession, SESSION_ID_RE } from '../lib/session-delete';
-import { readSessionLastPrompt, readSessionTitle } from '../lib/session-title';
-import type { SessionDetail, SessionState, WireFileMetadata } from '../lib/types';
-
-const ARCHIVE_RE = /^wire\.\d+\.jsonl$/;
-
-async function readFirstLine(path: string): Promise<string | null> {
-  try {
-    const stream = createReadStream(path, { encoding: 'utf8' });
-    const rl = createInterface({ input: stream, crlfDelay: Infinity });
-    for await (const line of rl) {
-      rl.close();
-      stream.close();
-      return line;
-    }
-  } catch {
-    return null;
-  }
-  return null;
-}
+import { KIMI_CODE_HOME } from '../config';
+import { readSessionDetail } from '../lib/session-store';
 
 export function sessionDetailRoute(): Hono {
-  const app = new Hono();
-
-  app.get('/:id', async (c) => {
+  const r = new Hono();
+  r.get('/:id', async (c) => {
     const id = c.req.param('id');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
-    }
-    const sessionDir = pathConfig.sessionDir(id);
-
-    let dirStat;
-    try {
-      dirStat = await stat(sessionDir);
-    } catch {
-      return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
-    }
-    if (!dirStat.isDirectory()) {
-      return c.json({ error: `session not a directory: ${id}`, code: 'NOT_FOUND' }, 404);
-    }
-
-    // state.json (best-effort).
-    let state: SessionState;
-    try {
-      const raw = await readFile(pathConfig.statePath(id), 'utf8');
-      state = JSON.parse(raw) as SessionState;
-    } catch {
-      state = {
-        session_id: id,
-        created_at: 0,
-        updated_at: 0,
-      };
-    }
-
-    // Directory listings.
-    const mainAgentDir = pathConfig.mainAgentDir(id);
-    const mainEntries = await readdir(mainAgentDir).catch(() => [] as string[]);
-    const archive_files = mainEntries.filter((e) => ARCHIVE_RE.test(e)).toSorted();
-
-    const subagent_ids: string[] = [];
-    try {
-      const subs = await readdir(join(sessionDir, 'agents'));
-      for (const s of subs) {
-        if (s === 'main') continue;
-        const ss = await stat(join(sessionDir, 'agents', s)).catch(() => null);
-        if (ss?.isDirectory()) subagent_ids.push(s);
-      }
-    } catch {
-      try {
-        const subs = await readdir(join(sessionDir, 'subagents'));
-        for (const s of subs) {
-          const ss = await stat(join(sessionDir, 'subagents', s)).catch(() => null);
-          if (ss?.isDirectory()) subagent_ids.push(s);
-        }
-      } catch {
-        // subagents dir missing is fine
-      }
-    }
-
-    const tool_result_ids: string[] = [];
-    try {
-      const files = await readdir(join(mainAgentDir, 'tool-results'));
-      for (const f of files) {
-        if (f.endsWith('.txt')) tool_result_ids.push(f.slice(0, -4));
-      }
-    } catch {
-      try {
-        const files = await readdir(join(sessionDir, 'tool-results'));
-        for (const f of files) {
-          if (f.endsWith('.txt')) tool_result_ids.push(f.slice(0, -4));
-        }
-      } catch {
-        // tool-results dir missing is fine
-      }
-    }
-
-    // wire metadata (first line of wire.jsonl)
-    let wire_metadata: WireFileMetadata | null = null;
-    const firstLine = await readFirstLine(pathConfig.wirePath(id));
-    if (firstLine !== null) {
-      try {
-        const parsed = JSON.parse(firstLine) as unknown;
-        if (
-          typeof parsed === 'object' &&
-          parsed !== null &&
-          (parsed as { type?: unknown }).type === 'metadata'
-        ) {
-          wire_metadata = parsed as WireFileMetadata;
-        }
-      } catch {
-        // ignore malformed header
-      }
-    }
-
-    const detail: SessionDetail = {
-      session_id: id,
-      title: readSessionTitle(state),
-      last_prompt: readSessionLastPrompt(state),
-      state,
-      subagent_ids,
-      archive_files,
-      tool_result_ids,
-      wire_metadata,
-    };
+    const detail = await readSessionDetail(KIMI_CODE_HOME, id);
+    if (!detail) return c.json({ error: 'session not found', code: 'NOT_FOUND' }, 404);
     return c.json(detail);
   });
-
-  app.delete('/:id', async (c) => {
-    const id = c.req.param('id');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
-    }
-
-    try {
-      const result = await deleteSession(id);
-      if (result === null) {
-        return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
-      }
-      return c.json(result);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to delete session: ${msg}`, code: 'DELETE_ERROR' }, 500);
-    }
-  });
-
-  return app;
+  return r;
 }
diff --git a/apps/vis/server/src/routes/sessions.ts b/apps/vis/server/src/routes/sessions.ts
index 4b44d47..4c6c459 100644
--- a/apps/vis/server/src/routes/sessions.ts
+++ b/apps/vis/server/src/routes/sessions.ts
@@ -1,28 +1,21 @@
 import { Hono } from 'hono';
-
-import { pathConfig } from '../config';
-import { clearSessions } from '../lib/session-delete';
-import { listSessions } from '../lib/session-lister';
+import { rm } from 'node:fs/promises';
+import { KIMI_CODE_HOME } from '../config';
+import { listSessions } from '../lib/session-store';
 
 export function sessionsRoute(): Hono {
-  const app = new Hono();
-  app.get('/', async (c) => {
-    try {
-      const summaries = await listSessions(pathConfig.sessionsDir);
-      return c.json(summaries);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to list sessions: ${msg}`, code: 'READ_ERROR' }, 500);
-    }
+  const r = new Hono();
+  r.get('/', async (c) => {
+    const sessions = await listSessions(KIMI_CODE_HOME);
+    return c.json({ sessions });
   });
-  app.delete('/', async (c) => {
-    try {
-      const result = await clearSessions();
-      return c.json(result);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to clear sessions: ${msg}`, code: 'DELETE_ERROR' }, 500);
-    }
+  r.delete('/:id', async (c) => {
+    const id = c.req.param('id');
+    const all = await listSessions(KIMI_CODE_HOME);
+    const target = all.find((s) => s.sessionId === id);
+    if (!target) return c.json({ error: 'session not found', code: 'NOT_FOUND' }, 404);
+    await rm(target.sessionDir, { recursive: true, force: true });
+    return c.json({ sessionId: id, deleted: true });
   });
-  return app;
+  return r;
 }
diff --git a/apps/vis/server/src/routes/subagents.ts b/apps/vis/server/src/routes/subagents.ts
index 5a8ee47..736bfd3 100644
--- a/apps/vis/server/src/routes/subagents.ts
+++ b/apps/vis/server/src/routes/subagents.ts
@@ -1,226 +1,17 @@
-import { readFile, stat } from 'node:fs/promises';
-
 import { Hono } from 'hono';
-
-import { pathConfig } from '../config';
-import { buildAnnotatedMessages, buildProjectedStateSummary } from '../lib/context-builder';
-import { buildSubagentTree } from '../lib/subagent-loader';
-import type {
-  ContextResponse,
-  SubagentMetaResponse,
-  SubagentNode,
-  SubagentTreeResponse,
-  WireResponse
-} from '../lib/types';
-import { loadWireRecords } from '../lib/wire-loader';
-
-const SESSION_ID_RE = /^session_[a-zA-Z0-9_-]+$/;
-// Subagent ids in the wild look like "sub_<uuid-ish>" — allow word chars and dashes.
-const AGENT_ID_RE = /^[a-zA-Z0-9_-]+$/;
-
-function findNode(tree: SubagentNode[], agentId: string): SubagentNode | null {
-  for (const node of tree) {
-    if (node.agent_id === agentId) return node;
-    const found = findNode(node.children, agentId);
-    if (found !== null) return found;
-  }
-  return null;
-}
+import { KIMI_CODE_HOME } from '../config';
+import { readSessionDetail } from '../lib/session-store';
+import { buildAgentTree } from '../lib/agent-tree';
 
 export function subagentsRoute(): Hono {
-  const app = new Hono();
-
-  app.get('/:id/subagents', async (c) => {
+  const r = new Hono();
+  r.get('/:id/agents', async (c) => {
     const id = c.req.param('id');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
-    }
-    const sessionDir = pathConfig.sessionDir(id);
-    try {
-      const s = await stat(sessionDir);
-      if (!s.isDirectory())
-        return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
-    } catch {
-      return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
-    }
-
-    try {
-      const main = await loadWireRecords(sessionDir);
-      const tree = await buildSubagentTree(sessionDir, main.records);
-      const body: SubagentTreeResponse = { session_id: id, tree };
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to build subagent tree: ${msg}`, code: 'READ_ERROR' }, 500);
+    const detail = await readSessionDetail(KIMI_CODE_HOME, id);
+    if (!detail) {
+      return c.json({ error: 'session not found', code: 'NOT_FOUND' }, 404);
     }
+    return c.json({ sessionId: id, tree: buildAgentTree(detail.agents) });
   });
-
-  app.get('/:id/subagents/:agentId/wire', async (c) => {
-    const id = c.req.param('id');
-    const agentId = c.req.param('agentId');
-    if (!SESSION_ID_RE.test(id) || !AGENT_ID_RE.test(agentId)) {
-      return c.json({ error: 'invalid session or agent id', code: 'BAD_REQUEST' }, 400);
-    }
-    const subDir = pathConfig.subagentDir(id, agentId);
-    try {
-      const s = await stat(subDir);
-      if (!s.isDirectory())
-        return c.json({ error: `subagent not found: ${agentId}`, code: 'NOT_FOUND' }, 404);
-    } catch {
-      return c.json({ error: `subagent not found: ${agentId}`, code: 'NOT_FOUND' }, 404);
-    }
-
-    try {
-      const result = await loadWireRecords(subDir);
-      const body: WireResponse = {
-        session_id: id,
-        agent_id: agentId,
-        files_read: result.files_read,
-        health: result.health,
-        warnings: result.warnings,
-        records: result.records,
-      };
-      if (result.broken_reason !== undefined) body.broken_reason = result.broken_reason;
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to load subagent wire: ${msg}`, code: 'READ_ERROR' }, 500);
-    }
-  });
-
-  app.get('/:id/subagents/:agentId/context', async (c) => {
-    const id = c.req.param('id');
-    const agentId = c.req.param('agentId');
-    if (!SESSION_ID_RE.test(id) || !AGENT_ID_RE.test(agentId)) {
-      return c.json({ error: 'invalid session or agent id', code: 'BAD_REQUEST' }, 400);
-    }
-    const subDir = pathConfig.subagentDir(id, agentId);
-    try {
-      const s = await stat(subDir);
-      if (!s.isDirectory())
-        return c.json({ error: `subagent not found: ${agentId}`, code: 'NOT_FOUND' }, 404);
-    } catch {
-      return c.json({ error: `subagent not found: ${agentId}`, code: 'NOT_FOUND' }, 404);
-    }
-
-    try {
-      const load = await loadWireRecords(subDir);
-      const annotated = buildAnnotatedMessages(load.records);
-      const projected = buildProjectedStateSummary(load.records, load.session_initialized);
-      const body: ContextResponse = {
-        session_id: id,
-        agent_id: agentId,
-        annotated_messages: annotated,
-        projected_state: projected,
-      };
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to build subagent context: ${msg}`, code: 'READ_ERROR' }, 500);
-    }
-  });
-
-  app.get('/:id/subagents/:agentId/meta', async (c) => {
-    const id = c.req.param('id');
-    const agentId = c.req.param('agentId');
-    if (!SESSION_ID_RE.test(id) || !AGENT_ID_RE.test(agentId)) {
-      return c.json({ error: 'invalid session or agent id', code: 'BAD_REQUEST' }, 400);
-    }
-    const sessionDir = pathConfig.sessionDir(id);
-    const subDir = pathConfig.subagentDir(id, agentId);
-    try {
-      const s = await stat(subDir);
-      if (!s.isDirectory())
-        return c.json({ error: `subagent not found: ${agentId}`, code: 'NOT_FOUND' }, 404);
-    } catch {
-      return c.json({ error: `subagent not found: ${agentId}`, code: 'NOT_FOUND' }, 404);
-    }
-
-    let meta_json: SubagentMetaResponse['meta_json'] = null;
-    try {
-      const raw = await readFile(`${subDir}/meta.json`, 'utf8');
-      meta_json = JSON.parse(raw) as SubagentMetaResponse['meta_json'];
-    } catch {
-      meta_json = null;
-    }
-
-    // Find the agent in the tree, then scan its direct parent's wire for
-    // lifecycle records. For nested subagents (depth >= 1), lifecycle records
-    // live on the intermediate parent's wire, not the main session wire.
-    let spawned_record: SubagentMetaResponse['spawned_record'] = null;
-    let completed_record: SubagentMetaResponse['completed_record'] = null;
-    let failed_record: SubagentMetaResponse['failed_record'] = null;
-    let depth = 0;
-
-    try {
-      const main = await loadWireRecords(sessionDir);
-      const tree = await buildSubagentTree(sessionDir, main.records);
-      const node = findNode(tree, agentId);
-      if (node !== null) depth = node.depth;
-
-      // Pick the correct wire to scan: main wire for depth 0, else the parent
-      // subagent's wire (which contains this child's spawn/complete records).
-      const parentAgentId = node?.parent_agent_id ?? null;
-      const scanRecords =
-        parentAgentId === null
-          ? main.records
-          : (await loadWireRecords(pathConfig.subagentDir(id, parentAgentId))).records;
-
-      for (const r of scanRecords) {
-        if (r.type === 'subagent_spawned' && r.data.agent_id === agentId) {
-          const entry: NonNullable<SubagentMetaResponse['spawned_record']> = {
-            parent_tool_call_id: r.data.parent_tool_call_id,
-            run_in_background: r.data.run_in_background,
-            seq: r.seq,
-            time: r.time,
-          };
-          if (r.data.agent_name !== undefined) entry.agent_name = r.data.agent_name;
-          if (r.data.parent_agent_id !== undefined) entry.parent_agent_id = r.data.parent_agent_id;
-          spawned_record = entry;
-        } else if (r.type === 'subagent_completed' && r.data.agent_id === agentId) {
-          const entry: NonNullable<SubagentMetaResponse['completed_record']> = {
-            parent_tool_call_id: r.data.parent_tool_call_id,
-            result_summary: r.data.result_summary,
-            seq: r.seq,
-            time: r.time,
-          };
-          if (r.data.usage !== undefined) {
-            const u = r.data.usage;
-            const usage: {
-              input_tokens: number;
-              output_tokens: number;
-              cache_read_tokens?: number;
-              cache_write_tokens?: number;
-            } = { input_tokens: u.input, output_tokens: u.output };
-            if (u.cache_read !== undefined) usage.cache_read_tokens = u.cache_read;
-            if (u.cache_write !== undefined) usage.cache_write_tokens = u.cache_write;
-            entry.usage = usage;
-          }
-          completed_record = entry;
-        } else if (r.type === 'subagent_failed' && r.data.agent_id === agentId) {
-          failed_record = {
-            parent_tool_call_id: r.data.parent_tool_call_id,
-            error: r.data.error,
-            seq: r.seq,
-            time: r.time,
-          };
-        }
-      }
-    } catch {
-      // Fall through — partial response is still useful.
-    }
-
-    const body: SubagentMetaResponse = {
-      agent_id: agentId,
-      session_id: id,
-      meta_json,
-      spawned_record,
-      completed_record,
-      failed_record,
-      depth,
-    };
-    return c.json(body);
-  });
-
-  return app;
+  return r;
 }
diff --git a/apps/vis/server/src/routes/tool-results.ts b/apps/vis/server/src/routes/tool-results.ts
deleted file mode 100644
index 30b67da..0000000
--- a/apps/vis/server/src/routes/tool-results.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { readFile, stat } from 'node:fs/promises';
-
-import { Hono } from 'hono';
-
-import { pathConfig } from '../config';
-import type { ToolResultFileResponse } from '../lib/types';
-
-const SESSION_ID_RE = /^session_[a-zA-Z0-9_-]+$/;
-// Tool call ids observed in the wild: simple identifiers, "call_..." or
-// "Agent:7". Allow a conservative character set including colon.
-const TOOL_CALL_ID_RE = /^[a-zA-Z0-9_:.-]+$/;
-
-export function toolResultsRoute(): Hono {
-  const app = new Hono();
-
-  app.get('/:id/tool-results/:toolCallId', async (c) => {
-    const id = c.req.param('id');
-    const toolCallId = c.req.param('toolCallId');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
-    }
-    if (!TOOL_CALL_ID_RE.test(toolCallId)) {
-      return c.json({ error: `invalid tool call id: ${toolCallId}`, code: 'BAD_REQUEST' }, 400);
-    }
-    const filePath = pathConfig.toolResultArchivePath(id, toolCallId);
-    let s;
-    try {
-      s = await stat(filePath);
-    } catch {
-      return c.json({ error: `tool result not found: ${toolCallId}`, code: 'NOT_FOUND' }, 404);
-    }
-    try {
-      const content = await readFile(filePath, 'utf8');
-      const body: ToolResultFileResponse = {
-        tool_call_id: toolCallId,
-        session_id: id,
-        size_bytes: s.size,
-        content,
-      };
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to read tool result: ${msg}`, code: 'READ_ERROR' }, 500);
-    }
-  });
-
-  return app;
-}
diff --git a/apps/vis/server/src/routes/wire.ts b/apps/vis/server/src/routes/wire.ts
index 4bd6479..1365137 100644
--- a/apps/vis/server/src/routes/wire.ts
+++ b/apps/vis/server/src/routes/wire.ts
@@ -1,84 +1,45 @@
-import { stat } from 'node:fs/promises';
-import { join } from 'node:path';
-
 import { Hono } from 'hono';
+import { join } from 'node:path';
 
-import { pathConfig } from '../config';
-import type { WireResponse } from '../lib/types';
-import { loadWireRecords } from '../lib/wire-loader';
-import { replayWire } from '../lib/wire-replay';
-
-const SESSION_ID_RE = /^session_[a-zA-Z0-9_-]+$/;
-const ARCHIVE_FILE_RE = /^wire\.\d+\.jsonl$/;
+import { KIMI_CODE_HOME } from '../config';
+import { readSessionDetail } from '../lib/session-store';
+import { readAgentWire } from '../lib/wire-reader';
 
 export function wireRoute(): Hono {
-  const app = new Hono();
-
-  app.get('/:id/wire', async (c) => {
+  const r = new Hono();
+  r.get('/:id/wire', async (c) => {
     const id = c.req.param('id');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
+    const agentId = c.req.query('agent') ?? 'main';
+    const detail = await readSessionDetail(KIMI_CODE_HOME, id);
+    if (!detail) {
+      return c.json({ error: 'session not found', code: 'NOT_FOUND' }, 404);
     }
-    const sessionDir = pathConfig.sessionDir(id);
-    try {
-      const dirStat = await stat(sessionDir);
-      if (!dirStat.isDirectory()) {
-        return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
-      }
-    } catch {
-      return c.json({ error: `session not found: ${id}`, code: 'NOT_FOUND' }, 404);
+    const agent = detail.agents.find((a) => a.agentId === agentId);
+    if (!agent) {
+      return c.json({ error: `agent "${agentId}" not found`, code: 'NOT_FOUND' }, 404);
     }
-
-    try {
-      const result = await loadWireRecords(sessionDir);
-      const body: WireResponse = {
-        session_id: id,
-        agent_id: null,
-        files_read: result.files_read,
-        health: result.health,
-        warnings: result.warnings,
-        records: result.records,
-      };
-      if (result.broken_reason !== undefined) body.broken_reason = result.broken_reason;
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to load wire: ${msg}`, code: 'READ_ERROR' }, 500);
+    if (!agent.wireExists) {
+      return c.json({ error: 'wire missing', code: 'NOT_FOUND' }, 404);
     }
-  });
-
-  app.get('/:id/archives/:filename', async (c) => {
-    const id = c.req.param('id');
-    const filename = c.req.param('filename');
-    if (!SESSION_ID_RE.test(id)) {
-      return c.json({ error: `invalid session id: ${id}`, code: 'BAD_REQUEST' }, 400);
-    }
-    if (!ARCHIVE_FILE_RE.test(filename)) {
-      return c.json({ error: `invalid archive filename: ${filename}`, code: 'BAD_REQUEST' }, 400);
-    }
-    const archivePath = join(pathConfig.mainAgentDir(id), filename);
     try {
-      await stat(archivePath);
-    } catch {
-      return c.json({ error: `archive not found: ${filename}`, code: 'NOT_FOUND' }, 404);
-    }
-    try {
-      const result = await replayWire(archivePath);
-      const body: WireResponse = {
-        session_id: id,
-        agent_id: null,
-        files_read: [archivePath],
-        health: result.health,
-        warnings: [...result.warnings],
+      const result = await readAgentWire(
+        join(detail.sessionDir, 'agents', agentId, 'wire.jsonl'),
+      );
+      return c.json({
+        sessionId: id,
+        agentId,
+        protocolVersion: result.metadata.protocolVersion,
+        metadata: result.metadata,
         records: result.records,
-      };
-      if (result.brokenReason !== undefined) body.broken_reason = result.brokenReason;
-      return c.json(body);
-    } catch (error) {
-      const msg = error instanceof Error ? error.message : String(error);
-      return c.json({ error: `failed to replay archive: ${msg}`, code: 'READ_ERROR' }, 500);
+        warnings: result.warnings,
+      });
+    } catch (err) {
+      const msg = (err as Error).message;
+      if (msg.toLowerCase().includes('unsupported protocol')) {
+        return c.json({ error: msg, code: 'UNSUPPORTED_PROTOCOL' }, 400);
+      }
+      return c.json({ error: msg, code: 'READ_ERROR' }, 500);
     }
   });
-
-  return app;
+  return r;
 }
diff --git a/apps/vis/server/test/_fixture.ts b/apps/vis/server/test/_fixture.ts
deleted file mode 100644
index 95cde6b..0000000
--- a/apps/vis/server/test/_fixture.ts
+++ /dev/null
@@ -1,251 +0,0 @@
-import { randomBytes } from 'node:crypto';
-import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
-
-/** Minimal synthetic session dir using the current atomic wire protocol.
- *  Real on-disk sessions under `~/.kimi-code/sessions/` use a legacy layout
- *  that can no longer be replayed, so tests use synthetic fixtures. */
-export interface SyntheticOptions {
-  withReminder?: boolean;
-  withTools?: boolean;
-  withSubagent?: boolean;
-}
-
-export interface SyntheticResult {
-  dir: string;
-  sessionId: string;
-  cleanup(): void;
-}
-
-export function createSyntheticSession(opts: SyntheticOptions = {}): SyntheticResult {
-  const sessionId = `session_${randomBytes(6).toString('hex')}`;
-  const dir = join(tmpdir(), `vis-test-${sessionId}`);
-  mkdirSync(dir, { recursive: true });
-
-  const lines: string[] = [];
-  let seq = 1;
-  const push = (rec: Record<string, unknown>): void => {
-    lines.push(JSON.stringify(rec));
-  };
-
-  push({
-    type: 'metadata',
-    protocol_version: '1.0',
-    created_at: Date.now(),
-    producer: {
-      kind: 'typescript',
-      name: '@moonshot-ai/agent-core',
-      version: '0.0.1',
-    },
-  });
-
-  push({
-    type: 'session_initialized',
-    seq: seq++,
-    time: Date.now(),
-    agent_type: 'main',
-    session_id: sessionId,
-    system_prompt: 'You are a test assistant.',
-    model: 'test-model',
-    active_tools: opts.withTools ? ['Bash'] : [],
-    permission_mode: 'default',
-    plan_mode: false,
-    workspace_dir: '/tmp',
-  });
-
-  push({
-    type: 'turn_begin',
-    seq: seq++,
-    time: Date.now(),
-    turn_id: 'turn_1',
-    agent_type: 'main',
-    input_kind: 'user',
-    user_input: 'hi',
-  });
-
-  push({
-    type: 'user_message',
-    seq: seq++,
-    time: Date.now(),
-    turn_id: 'turn_1',
-    content: 'hi',
-  });
-
-  if (opts.withReminder) {
-    push({
-      type: 'system_reminder',
-      seq: seq++,
-      time: Date.now(),
-      content: 'test reminder',
-      consumed_at_turn: 1,
-    });
-  }
-
-  const stepUuid = 'step-1';
-  push({
-    type: 'step_begin',
-    seq: seq++,
-    time: Date.now(),
-    uuid: stepUuid,
-    turn_id: 'turn_1',
-    step: 0,
-  });
-  push({
-    type: 'content_part',
-    seq: seq++,
-    time: Date.now(),
-    uuid: 'cp-1',
-    turn_id: 'turn_1',
-    step: 0,
-    step_uuid: stepUuid,
-    role: 'assistant',
-    part: { kind: 'text', text: 'hello!' },
-  });
-
-  if (opts.withTools) {
-    push({
-      type: 'tool_call',
-      seq: seq++,
-      time: Date.now(),
-      uuid: 'tc-wire-1',
-      turn_id: 'turn_1',
-      step: 0,
-      step_uuid: stepUuid,
-      data: {
-        tool_call_id: 'tc_abc',
-        tool_name: 'Bash',
-        args: { cmd: 'echo hi' },
-      },
-    });
-  }
-
-  push({
-    type: 'step_end',
-    seq: seq++,
-    time: Date.now(),
-    uuid: stepUuid,
-    turn_id: 'turn_1',
-    step: 0,
-    usage: { input_tokens: 10, output_tokens: 5 },
-  });
-
-  if (opts.withTools) {
-    push({
-      type: 'tool_result',
-      seq: seq++,
-      time: Date.now(),
-      turn_id: 'turn_1',
-      tool_call_id: 'tc_abc',
-      output: 'hi\n',
-    });
-  }
-
-  if (opts.withSubagent) {
-    push({
-      type: 'subagent_spawned',
-      seq: seq++,
-      time: Date.now(),
-      data: {
-        agent_id: 'sub_test-1',
-        agent_name: 'coder',
-        parent_tool_call_id: 'tc_sub',
-        run_in_background: false,
-      },
-    });
-    // Write the subagent's own wire.jsonl
-    const subDir = join(dir, 'subagents', 'sub_test-1');
-    mkdirSync(subDir, { recursive: true });
-    const subLines: string[] = [
-      JSON.stringify({
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: Date.now(),
-        producer: {
-          kind: 'typescript',
-          name: '@moonshot-ai/agent-core',
-          version: '0.0.1',
-        },
-      }),
-      JSON.stringify({
-        type: 'session_initialized',
-        seq: 1,
-        time: Date.now(),
-        agent_type: 'sub',
-        agent_id: 'sub_test-1',
-        agent_name: 'coder',
-        parent_session_id: sessionId,
-        parent_tool_call_id: 'tc_sub',
-        run_in_background: false,
-        system_prompt: 'You are a subagent.',
-        model: 'test-model',
-        active_tools: [],
-        permission_mode: 'default',
-        plan_mode: false,
-        workspace_dir: '/tmp',
-      }),
-    ];
-    writeFileSync(join(subDir, 'wire.jsonl'), subLines.join('\n') + '\n');
-    writeFileSync(
-      join(subDir, 'meta.json'),
-      JSON.stringify({
-        agent_id: 'sub_test-1',
-        subagent_type: 'coder',
-        status: 'completed',
-        description: 'test subagent',
-        parent_tool_call_id: 'tc_sub',
-        created_at: Date.now() / 1000,
-        updated_at: Date.now() / 1000,
-      }),
-    );
-
-    push({
-      type: 'subagent_completed',
-      seq: seq++,
-      time: Date.now(),
-      data: {
-        agent_id: 'sub_test-1',
-        parent_tool_call_id: 'tc_sub',
-        result_summary: 'all done',
-        usage: { input: 100, output: 50 },
-      },
-    });
-  }
-
-  push({
-    type: 'turn_end',
-    seq: seq++,
-    time: Date.now(),
-    turn_id: 'turn_1',
-    agent_type: 'main',
-    success: true,
-    reason: 'done',
-  });
-
-  writeFileSync(join(dir, 'wire.jsonl'), lines.join('\n') + '\n');
-  writeFileSync(
-    join(dir, 'state.json'),
-    JSON.stringify({
-      session_id: sessionId,
-      model: 'test-model',
-      status: 'idle',
-      created_at: Date.now(),
-      updated_at: Date.now(),
-      workspace_dir: '/tmp',
-      // Required for listSessions() producer filter.
-      producer: { kind: 'typescript', name: '@moonshot-ai/agent-core', version: '0.0.1' },
-    }),
-  );
-
-  return {
-    dir,
-    sessionId,
-    cleanup: () => {
-      try {
-        rmSync(dir, { recursive: true, force: true });
-      } catch {
-        /* ignore */
-      }
-    },
-  };
-}
diff --git a/apps/vis/server/test/app.test.ts b/apps/vis/server/test/app.test.ts
deleted file mode 100644
index 23b4cbf..0000000
--- a/apps/vis/server/test/app.test.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-
-import { createApp } from '../src/app';
-import { resolveHost, resolveVisAuthToken } from '../src/config';
-import { formatStartupBanner } from '../src/startup-banner';
-
-describe('vis server access controls', () => {
-  const savedEnv = { ...process.env };
-
-  afterEach(() => {
-    process.env = { ...savedEnv };
-  });
-
-  it('binds to loopback by default', () => {
-    delete process.env['VIS_HOST'];
-    delete process.env['HOST'];
-
-    expect(resolveHost()).toBe('127.0.0.1');
-  });
-
-  it('allows an explicit bind host', () => {
-    process.env['VIS_HOST'] = '0.0.0.0';
-
-    expect(resolveHost()).toBe('0.0.0.0');
-  });
-
-  it('requires a token when binding outside loopback', () => {
-    delete process.env['VIS_AUTH_TOKEN'];
-
-    expect(() => resolveVisAuthToken('0.0.0.0')).toThrow(/VIS_AUTH_TOKEN/);
-
-    process.env['VIS_AUTH_TOKEN'] = 'secret-token';
-    expect(resolveVisAuthToken('0.0.0.0')).toBe('secret-token');
-  });
-
-  it('requires bearer auth for API routes when a token is configured', async () => {
-    const app = await createApp({ authToken: 'secret-token' });
-
-    const anonymous = await app.request('/api/sessions');
-    expect(anonymous.status).toBe(401);
-    await expect(anonymous.json()).resolves.toMatchObject({ code: 'UNAUTHORIZED' });
-
-    const wrong = await app.request('/api/sessions', {
-      headers: { authorization: 'Bearer wrong-token' },
-    });
-    expect(wrong.status).toBe(401);
-
-    const allowed = await app.request('/api/sessions', {
-      headers: { authorization: 'Bearer secret-token' },
-    });
-    expect(allowed.status).toBe(200);
-  });
-
-  it('keeps loopback-only local API access open when no token is configured', async () => {
-    const app = await createApp();
-
-    const response = await app.request('/api/sessions');
-
-    expect(response.status).toBe(200);
-  });
-
-  it('does not include the bearer token in the startup banner', () => {
-    const banner = formatStartupBanner({
-      authToken: 'secret-token',
-      host: '127.0.0.1',
-      kimiCodeHome: '/tmp/kimi-code',
-      port: 3001,
-    });
-
-    expect(banner).toContain('auth=required');
-    expect(banner).not.toContain('secret-token');
-    expect(banner).not.toContain('token=');
-  });
-});
diff --git a/apps/vis/server/test/context-builder.test.ts b/apps/vis/server/test/context-builder.test.ts
deleted file mode 100644
index 130fb8d..0000000
--- a/apps/vis/server/test/context-builder.test.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-
-import {
-  buildAnnotatedMessages,
-  buildProjectedStateSummary,
-  extractPersistedOutputPath,
-  renderNotificationXml,
-} from '../src/lib/context-builder';
-import type { NotificationRecord, SystemReminderRecord, VisWireRecord } from '../src/lib/types';
-import { loadWireRecords } from '../src/lib/wire-loader';
-import { createSyntheticSession, type SyntheticResult } from './_fixture';
-
-describe('context-builder', () => {
-  let fixture: SyntheticResult | null = null;
-  afterEach(() => {
-    fixture?.cleanup();
-    fixture = null;
-  });
-
-  it('extracts persisted-output path when marker is present', () => {
-    const text =
-      '<persisted-output path="/tmp/sessions/ses_foo/tool-results/call_1.txt">\nlorem ipsum\n</persisted-output>';
-    expect(extractPersistedOutputPath(text)).toBe('/tmp/sessions/ses_foo/tool-results/call_1.txt');
-  });
-
-  it('returns null when no persisted-output marker', () => {
-    expect(extractPersistedOutputPath('plain output')).toBeNull();
-  });
-
-  it('renders notification XML with attributes and body', () => {
-    const data: NotificationRecord['data'] = {
-      id: 'n1',
-      category: 'task',
-      type: 'tick',
-      source_kind: 'background_task',
-      source_id: 'bg-1',
-      title: 'Test',
-      body: 'Hello',
-      severity: 'info',
-      targets: ['llm'],
-    };
-    const xml = renderNotificationXml(data);
-    expect(xml).toContain('<notification id="n1"');
-    expect(xml).toContain('category="task"');
-    expect(xml).toContain('Title: Test');
-    expect(xml).toContain('Severity: info');
-    expect(xml).toContain('Hello');
-    expect(xml).toContain('</notification>');
-  });
-
-  it('includes synthetic system_reminder messages in the annotated stream', () => {
-    const reminder: SystemReminderRecord = {
-      type: 'system_reminder',
-      seq: 1,
-      time: 0,
-      content: 'please remember',
-    };
-    const records: VisWireRecord[] = [reminder];
-    const annotated = buildAnnotatedMessages(records);
-    expect(annotated).toHaveLength(1);
-    const m = annotated[0];
-    expect(m?.is_ephemeral).toBe(true);
-    expect(m?.origin.kind).toBe('system_reminder');
-    const content = m?.message.content[0];
-    if (content !== undefined && 'text' in content) {
-      expect(String(content['text'])).toContain('<system-reminder>');
-    }
-  });
-
-  it('includes llm-target notifications as ephemeral messages', () => {
-    const notif: NotificationRecord = {
-      type: 'notification',
-      seq: 2,
-      time: 0,
-      data: {
-        id: 'n2',
-        category: 'system',
-        type: 'info',
-        source_kind: 'system',
-        source_id: 's',
-        title: 't',
-        body: 'b',
-        severity: 'warning',
-        targets: ['llm'],
-      },
-    };
-    const annotated = buildAnnotatedMessages([notif]);
-    expect(annotated).toHaveLength(1);
-    const m = annotated[0];
-    expect(m?.origin.kind).toBe('notification');
-    if (m?.origin.kind === 'notification') {
-      expect(m.origin.severity).toBe('warning');
-    }
-    expect(m?.is_ephemeral).toBe(true);
-  });
-
-  it('drops notifications without llm in targets', () => {
-    const notif: NotificationRecord = {
-      type: 'notification',
-      seq: 2,
-      time: 0,
-      data: {
-        id: 'n3',
-        category: 'system',
-        type: 'info',
-        source_kind: 's',
-        source_id: 's',
-        title: 't',
-        body: 'b',
-        severity: 'info',
-        targets: ['wire'],
-      },
-    };
-    const annotated = buildAnnotatedMessages([notif]);
-    expect(annotated).toHaveLength(0);
-  });
-
-  it('drops notifications whose delivered_at.llm === 0', () => {
-    const notif: NotificationRecord = {
-      type: 'notification',
-      seq: 2,
-      time: 0,
-      data: {
-        id: 'n4',
-        category: 'system',
-        type: 'info',
-        source_kind: 's',
-        source_id: 's',
-        title: 't',
-        body: 'b',
-        severity: 'info',
-        targets: ['llm'],
-        delivered_at: { llm: 0 },
-      },
-    };
-    const annotated = buildAnnotatedMessages([notif]);
-    expect(annotated).toHaveLength(0);
-  });
-
-  it('marks rewind-orphaned messages as out_of_context', () => {
-    const records: VisWireRecord[] = [
-      {
-        type: 'turn_begin',
-        seq: 1,
-        time: 0,
-        turn_id: 't1',
-        agent_type: 'main',
-        input_kind: 'user',
-      },
-      { type: 'user_message', seq: 2, time: 0, turn_id: 't1', content: 'hi' },
-      {
-        type: 'turn_begin',
-        seq: 3,
-        time: 0,
-        turn_id: 't2',
-        agent_type: 'main',
-        input_kind: 'user',
-      },
-      { type: 'user_message', seq: 4, time: 0, turn_id: 't2', content: 'again' },
-      { type: 'context_edit', seq: 5, time: 0, operation: 'rewind', to_turn: 1 },
-    ];
-    const annotated = buildAnnotatedMessages(records);
-    expect(annotated).toHaveLength(2);
-    expect(annotated[0]?.out_of_context).toBe(false);
-    expect(annotated[1]?.out_of_context).toBe(true);
-  });
-
-  it('resets messages on context_cleared', () => {
-    const records: VisWireRecord[] = [
-      {
-        type: 'turn_begin',
-        seq: 1,
-        time: 0,
-        turn_id: 't1',
-        agent_type: 'main',
-        input_kind: 'user',
-      },
-      { type: 'user_message', seq: 2, time: 0, turn_id: 't1', content: 'hi' },
-      { type: 'context_cleared', seq: 3, time: 0 },
-      { type: 'user_message', seq: 4, time: 0, turn_id: 't1', content: 'after' },
-    ];
-    const annotated = buildAnnotatedMessages(records);
-    expect(annotated).toHaveLength(1);
-    const content = annotated[0]?.message.content[0];
-    if (content !== undefined && 'text' in content) {
-      expect(content['text']).toBe('after');
-    }
-  });
-
-  it('sets persisted_output_path when tool output references a file', () => {
-    const records: VisWireRecord[] = [
-      {
-        type: 'tool_result',
-        seq: 1,
-        time: 0,
-        turn_id: 't',
-        tool_call_id: 'Agent:1',
-        output:
-          '<persisted-output path="/tmp/ses_x/tool-results/Agent:1.txt">\npreview...\n</persisted-output>',
-      },
-    ];
-    const annotated = buildAnnotatedMessages(records);
-    expect(annotated[0]?.persisted_output_path).toBe('/tmp/ses_x/tool-results/Agent:1.txt');
-  });
-
-  it('coalesces step_begin / content_part / tool_call / step_end into one assistant message', async () => {
-    fixture = createSyntheticSession({ withTools: true });
-    const load = await loadWireRecords(fixture.dir);
-    const annotated = buildAnnotatedMessages(load.records);
-    const asst = annotated.filter((m) => m.origin.kind === 'assistant');
-    expect(asst.length).toBe(1);
-    const m = asst[0];
-    const text = m?.message.content.find((p) => p.type === 'text') as
-      | { type: 'text'; text: string }
-      | undefined;
-    expect(text?.text).toBe('hello!');
-    expect(m?.message.tool_calls).toHaveLength(1);
-    expect(m?.message.tool_calls[0]?.name).toBe('Bash');
-  });
-
-  it('builds correct origin tagging on a synthetic session with system_reminder', async () => {
-    fixture = createSyntheticSession({ withReminder: true });
-    const load = await loadWireRecords(fixture.dir);
-    const annotated = buildAnnotatedMessages(load.records);
-    const hasReminder = annotated.some((m) => m.origin.kind === 'system_reminder');
-    expect(hasReminder).toBe(true);
-    const hasUser = annotated.some((m) => m.origin.kind === 'user');
-    const hasAssistant = annotated.some((m) => m.origin.kind === 'assistant');
-    expect(hasUser).toBe(true);
-    expect(hasAssistant).toBe(true);
-  });
-
-  it('produces a projected state summary from a synthetic session', async () => {
-    fixture = createSyntheticSession({ withTools: true });
-    const load = await loadWireRecords(fixture.dir);
-    const projected = buildProjectedStateSummary(load.records, load.session_initialized);
-    expect(typeof projected.last_seq).toBe('number');
-    expect(typeof projected.token_count).toBe('number');
-    expect(Array.isArray(projected.active_tools)).toBe(true);
-    expect(projected.model).toBe('test-model');
-  });
-});
diff --git a/apps/vis/server/test/fixtures/build.ts b/apps/vis/server/test/fixtures/build.ts
new file mode 100644
index 0000000..e0149c0
--- /dev/null
+++ b/apps/vis/server/test/fixtures/build.ts
@@ -0,0 +1,48 @@
+import { cp, mkdir, readFile, writeFile, rm } from 'node:fs/promises';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+
+/** Copy a fixture session into a temp dir, rewriting state.json.agents.*.homedir
+ *  to the real path so wire-reader / agent-tree can resolve them. */
+export async function buildSessionFixture(name: string): Promise<{
+  home: string;
+  sessionDir: string;
+  cleanup: () => Promise<void>;
+}> {
+  const src = new URL(`./sessions/${name}`, import.meta.url).pathname;
+  const home = await mkdtemp();
+  const sessionsDir = join(home, 'sessions', 'wd_test_000000000000');
+  const sessionDir = join(sessionsDir, 'session_fixture');
+  await mkdir(sessionsDir, { recursive: true });
+  await cp(src, sessionDir, { recursive: true });
+
+  // Rewrite homedir placeholders.
+  const statePath = join(sessionDir, 'state.json');
+  const state = JSON.parse(await readFile(statePath, 'utf8'));
+  for (const id of Object.keys(state.agents)) {
+    state.agents[id].homedir = join(sessionDir, 'agents', id);
+  }
+  await writeFile(statePath, JSON.stringify(state, null, 2));
+
+  // Write session_index.jsonl.
+  await writeFile(
+    join(home, 'session_index.jsonl'),
+    JSON.stringify({
+      sessionId: 'session_fixture',
+      sessionDir,
+      workDir: '/tmp/work',
+    }) + '\n',
+  );
+
+  return {
+    home,
+    sessionDir,
+    cleanup: () => rm(home, { recursive: true, force: true }),
+  };
+}
+
+async function mkdtemp(): Promise<string> {
+  const base = join(tmpdir(), `vis-fixture-${process.pid}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`);
+  await mkdir(base, { recursive: true });
+  return base;
+}
diff --git a/apps/vis/server/test/fixtures/sessions/sample-main/agents/agent-0/wire.jsonl b/apps/vis/server/test/fixtures/sessions/sample-main/agents/agent-0/wire.jsonl
new file mode 100644
index 0000000..f7fed10
--- /dev/null
+++ b/apps/vis/server/test/fixtures/sessions/sample-main/agents/agent-0/wire.jsonl
@@ -0,0 +1,2 @@
+{"type":"metadata","protocol_version":"1.1","created_at":1779256900000}
+{"type":"config.update","cwd":"/tmp/work","profileName":"sub","systemPrompt":"You are a sub-agent.","time":1779256900001}
diff --git a/apps/vis/server/test/fixtures/sessions/sample-main/agents/main/wire.jsonl b/apps/vis/server/test/fixtures/sessions/sample-main/agents/main/wire.jsonl
new file mode 100644
index 0000000..6a4cf27
--- /dev/null
+++ b/apps/vis/server/test/fixtures/sessions/sample-main/agents/main/wire.jsonl
@@ -0,0 +1,11 @@
+{"type":"metadata","protocol_version":"1.1","created_at":1779256791085}
+{"type":"config.update","cwd":"/tmp/work","profileName":"agent","systemPrompt":"You are Kimi.","time":1779256791100}
+{"type":"tools.set_active_tools","names":["Read","Write"],"time":1779256791101}
+{"type":"permission.set_mode","mode":"manual","time":1779256791102}
+{"type":"turn.prompt","input":[{"type":"text","text":"hi"}],"origin":{"kind":"user"},"time":1779256800000}
+{"type":"context.append_message","message":{"role":"user","content":[{"type":"text","text":"hi"}],"toolCalls":[]},"time":1779256800001}
+{"type":"context.append_loop_event","event":{"type":"step.begin","uuid":"s1","turnId":"t1","step":0},"time":1779256800100}
+{"type":"context.append_loop_event","event":{"type":"content.part","uuid":"c1","turnId":"t1","step":0,"stepUuid":"s1","part":{"type":"text","text":"hello"}},"time":1779256800200}
+{"type":"context.append_loop_event","event":{"type":"step.end","uuid":"s1","turnId":"t1","step":0,"usage":{"inputOther":10,"output":5,"inputCacheRead":0,"inputCacheCreation":0},"finishReason":"end_turn"},"time":1779256800300}
+{"type":"context.append_message","message":{"role":"assistant","content":[{"type":"text","text":"hello"}],"toolCalls":[]},"time":1779256800301}
+{"type":"usage.record","model":"kimi-k2","usage":{"inputOther":10,"output":5,"inputCacheRead":0,"inputCacheCreation":0},"usageScope":"turn","time":1779256800302}
diff --git a/apps/vis/server/test/fixtures/sessions/sample-main/state.json b/apps/vis/server/test/fixtures/sessions/sample-main/state.json
new file mode 100644
index 0000000..5350132
--- /dev/null
+++ b/apps/vis/server/test/fixtures/sessions/sample-main/state.json
@@ -0,0 +1,20 @@
+{
+  "createdAt": "2026-05-20T05:59:51.085Z",
+  "updatedAt": "2026-05-21T03:12:08.000Z",
+  "title": "fixture: hello world",
+  "isCustomTitle": false,
+  "lastPrompt": "say hi",
+  "agents": {
+    "main": {
+      "homedir": "<resolved-at-runtime>",
+      "type": "main",
+      "parentAgentId": null
+    },
+    "agent-0": {
+      "homedir": "<resolved-at-runtime>",
+      "type": "sub",
+      "parentAgentId": "main"
+    }
+  },
+  "custom": {}
+}
diff --git a/apps/vis/server/test/lib/agent-tree.test.ts b/apps/vis/server/test/lib/agent-tree.test.ts
new file mode 100644
index 0000000..fcfff49
--- /dev/null
+++ b/apps/vis/server/test/lib/agent-tree.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest';
+import { buildAgentTree } from '../../src/lib/agent-tree';
+import type { AgentInfo } from '../../src/lib/agent-record-types';
+
+function info(overrides: Partial<AgentInfo> & Pick<AgentInfo, 'agentId'>): AgentInfo {
+  return {
+    type: 'sub',
+    parentAgentId: null,
+    homedir: `/tmp/${overrides.agentId}`,
+    wireExists: true,
+    wireRecordCount: 0,
+    wireProtocolVersion: '1.1',
+    ...overrides,
+  };
+}
+
+describe('agent-tree', () => {
+  it('returns single main agent as the only root', () => {
+    const tree = buildAgentTree([info({ agentId: 'main', type: 'main' })]);
+    expect(tree).toHaveLength(1);
+    expect(tree[0]!.agentId).toBe('main');
+    expect(tree[0]!.children).toEqual([]);
+  });
+
+  it('attaches a sub agent to its main parent', () => {
+    const tree = buildAgentTree([
+      info({ agentId: 'main', type: 'main' }),
+      info({ agentId: 'agent-0', type: 'sub', parentAgentId: 'main' }),
+    ]);
+    expect(tree).toHaveLength(1);
+    expect(tree[0]!.agentId).toBe('main');
+    expect(tree[0]!.children).toHaveLength(1);
+    expect(tree[0]!.children[0]!.agentId).toBe('agent-0');
+    expect(tree[0]!.children[0]!.parentAgentId).toBe('main');
+  });
+
+  it('treats orphan parentAgentId as a root node', () => {
+    const tree = buildAgentTree([
+      info({ agentId: 'main', type: 'main' }),
+      info({ agentId: 'agent-0', type: 'sub', parentAgentId: 'does-not-exist' }),
+    ]);
+    expect(tree).toHaveLength(2);
+    const ids = tree.map((n) => n.agentId).sort();
+    expect(ids).toEqual(['agent-0', 'main']);
+    // orphan is still a root, no children attached anywhere
+    const orphan = tree.find((n) => n.agentId === 'agent-0')!;
+    expect(orphan.children).toEqual([]);
+  });
+
+  it('sorts main as the first root regardless of input order', () => {
+    const tree = buildAgentTree([
+      info({ agentId: 'agent-1', type: 'sub', parentAgentId: 'orphan' }),
+      info({ agentId: 'main', type: 'main' }),
+      info({ agentId: 'agent-2', type: 'sub', parentAgentId: 'orphan' }),
+    ]);
+    expect(tree[0]!.agentId).toBe('main');
+  });
+});
diff --git a/apps/vis/server/test/lib/context-projector.test.ts b/apps/vis/server/test/lib/context-projector.test.ts
new file mode 100644
index 0000000..1e39d39
--- /dev/null
+++ b/apps/vis/server/test/lib/context-projector.test.ts
@@ -0,0 +1,57 @@
+// apps/vis/server/test/lib/context-projector.test.ts
+import { describe, it, expect, afterEach } from 'vitest';
+import { buildSessionFixture } from '../fixtures/build';
+import { projectContext } from '../../src/lib/context-projector';
+import { readAgentWire } from '../../src/lib/wire-reader';
+import { join } from 'node:path';
+
+describe('context-projector', () => {
+  let cleanup: (() => Promise<void>) | null = null;
+  afterEach(async () => { if (cleanup) await cleanup(); cleanup = null; });
+
+  it('projects messages and aggregates usage', async () => {
+    const { sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const wire = await readAgentWire(join(sessionDir, 'agents', 'main', 'wire.jsonl'));
+    const proj = projectContext(wire.records);
+
+    expect(proj.messages).toHaveLength(2);
+    expect(proj.messages[0]!.message.role).toBe('user');
+    expect(proj.messages[1]!.message.role).toBe('assistant');
+
+    expect(proj.usage.byScope.turn).toEqual({
+      inputOther: 10, output: 5, inputCacheRead: 0, inputCacheCreation: 0,
+    });
+    expect(proj.usage.byModel['kimi-k2']).toEqual({
+      inputOther: 10, output: 5, inputCacheRead: 0, inputCacheCreation: 0,
+    });
+
+    expect(proj.config.systemPrompt).toBe('You are Kimi.');
+    expect(proj.config.profileName).toBe('agent');
+    expect(proj.permission.mode).toBe('manual');
+    expect(proj.planMode.active).toBe(false);
+  });
+
+  it('clears messages on context.clear', async () => {
+    const records = [
+      { type: 'context.append_message' as const, message: { role: 'user' as const, content: [{ type: 'text' as const, text: 'a' }], toolCalls: [] }, _lineNo: 2 },
+      { type: 'context.clear' as const, _lineNo: 3 },
+      { type: 'context.append_message' as const, message: { role: 'user' as const, content: [{ type: 'text' as const, text: 'b' }], toolCalls: [] }, _lineNo: 4 },
+    ];
+    const proj = projectContext(records as any);
+    expect(proj.messages).toHaveLength(1);
+    expect(proj.messages[0]!.message.content[0]).toMatchObject({ text: 'b' });
+  });
+
+  it('applies compaction summary as a synthetic message', async () => {
+    const records = [
+      { type: 'context.append_message' as const, message: { role: 'user' as const, content: [{ type: 'text' as const, text: 'old' }], toolCalls: [] }, _lineNo: 2 },
+      { type: 'context.apply_compaction' as const, summary: 'old stuff', compactedCount: 1, tokensBefore: 100, tokensAfter: 30, _lineNo: 3 },
+      { type: 'context.append_message' as const, message: { role: 'user' as const, content: [{ type: 'text' as const, text: 'new' }], toolCalls: [] }, _lineNo: 4 },
+    ];
+    const proj = projectContext(records as any);
+    expect(proj.messages[0]!.source).toBe('compaction_summary');
+    expect(proj.messages[0]!.message.content[0]).toMatchObject({ text: 'old stuff' });
+    expect(proj.messages[1]!.message.content[0]).toMatchObject({ text: 'new' });
+  });
+});
diff --git a/apps/vis/server/test/lib/session-store.test.ts b/apps/vis/server/test/lib/session-store.test.ts
new file mode 100644
index 0000000..d797ed6
--- /dev/null
+++ b/apps/vis/server/test/lib/session-store.test.ts
@@ -0,0 +1,107 @@
+// apps/vis/server/test/lib/session-store.test.ts
+import { describe, it, expect, afterEach } from 'vitest';
+import { buildSessionFixture } from '../fixtures/build';
+import { listSessions, readSessionDetail } from '../../src/lib/session-store';
+
+describe('session-store', () => {
+  let cleanup: (() => Promise<void>) | null = null;
+  afterEach(async () => { if (cleanup) await cleanup(); cleanup = null; });
+
+  it('lists native session with correct timestamps and counts', async () => {
+    const { home, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const sessions = await listSessions(home);
+    expect(sessions).toHaveLength(1);
+    const s = sessions[0]!;
+    expect(s.sessionId).toBe('session_fixture');
+    expect(s.title).toBe('fixture: hello world');
+    expect(s.lastPrompt).toBe('say hi');
+    expect(s.agentCount).toBe(2);
+    expect(s.mainAgentExists).toBe(true);
+    expect(s.mainWireRecordCount).toBe(11);  // 11 lines in main wire incl. metadata
+    expect(s.wireProtocolVersion).toBe('1.1');
+    expect(s.health).toBe('ok');
+    expect(s.workDir).toBe('/tmp/work');
+    expect(s.createdAt).toBe(Date.parse('2026-05-20T05:59:51.085Z'));
+    expect(s.updatedAt).toBe(Date.parse('2026-05-21T03:12:08.000Z'));
+  });
+
+  it('falls back to empty workDir when session is not in the index', async () => {
+    const { home, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const { rm } = await import('node:fs/promises');
+    const { join } = await import('node:path');
+    await rm(join(home, 'session_index.jsonl'));
+    const sessions = await listSessions(home);
+    expect(sessions).toHaveLength(1);
+    expect(sessions[0]!.workDir).toBe('');
+  });
+
+  it('skips imported_from_kimi_cli sessions', async () => {
+    const { home, sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    // mark as imported
+    const { readFile, writeFile } = await import('node:fs/promises');
+    const { join } = await import('node:path');
+    const state = JSON.parse(await readFile(join(sessionDir, 'state.json'), 'utf8'));
+    state.custom = { imported_from_kimi_cli: true };
+    await writeFile(join(sessionDir, 'state.json'), JSON.stringify(state));
+    const sessions = await listSessions(home);
+    expect(sessions).toHaveLength(0);
+  });
+
+  it('marks a session broken_main_wire when its wire file cannot be scanned', async () => {
+    const { home, sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const { rm, mkdir } = await import('node:fs/promises');
+    const { join } = await import('node:path');
+    // Replace the wire FILE with a directory of the same name, so the
+    // createReadStream below will reject with EISDIR.
+    const wirePath = join(sessionDir, 'agents', 'main', 'wire.jsonl');
+    await rm(wirePath);
+    await mkdir(wirePath);
+    const sessions = await listSessions(home);
+    expect(sessions).toHaveLength(1);
+    expect(sessions[0]!.health).toBe('broken_main_wire');
+    expect(sessions[0]!.mainWireRecordCount).toBe(0);
+  });
+
+  it('exposes the canonical session directory in detail responses', async () => {
+    const { home, sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const d = await readSessionDetail(home, 'session_fixture');
+    expect(d!.sessionDir).toBe(sessionDir);
+  });
+
+  it('returns broken-state detail consistent with the listed broken summary', async () => {
+    const { home, sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const { writeFile } = await import('node:fs/promises');
+    const { join } = await import('node:path');
+    await writeFile(join(sessionDir, 'state.json'), '{ this is not json');
+    const summaries = await listSessions(home);
+    expect(summaries).toHaveLength(1);
+    expect(summaries[0]!.health).toBe('broken_state');
+    const d = await readSessionDetail(home, 'session_fixture');
+    expect(d).not.toBeNull();
+    expect(d!.state).toBeNull();
+    expect(d!.agents).toEqual([]);
+    expect(d!.workDir).toBe('/tmp/work');
+  });
+
+  it('reads session detail with full agent inventory', async () => {
+    const { home, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const d = await readSessionDetail(home, 'session_fixture');
+    expect(d).not.toBeNull();
+    expect(d!.workDir).toBe('/tmp/work');
+    expect(d!.agents.map((a) => a.agentId).sort()).toEqual(['agent-0', 'main']);
+    const main = d!.agents.find((a) => a.agentId === 'main')!;
+    expect(main.type).toBe('main');
+    expect(main.parentAgentId).toBeNull();
+    expect(main.wireExists).toBe(true);
+    expect(main.wireRecordCount).toBe(11);
+    const sub = d!.agents.find((a) => a.agentId === 'agent-0')!;
+    expect(sub.parentAgentId).toBe('main');
+  });
+});
diff --git a/apps/vis/server/test/lib/wire-reader.test.ts b/apps/vis/server/test/lib/wire-reader.test.ts
new file mode 100644
index 0000000..1d8b4b6
--- /dev/null
+++ b/apps/vis/server/test/lib/wire-reader.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { join } from 'node:path';
+import { buildSessionFixture } from '../fixtures/build';
+import { readAgentWire } from '../../src/lib/wire-reader';
+
+describe('wire-reader', () => {
+  let cleanup: (() => Promise<void>) | null = null;
+  afterEach(async () => {
+    if (cleanup) await cleanup();
+    cleanup = null;
+  });
+
+  it('reads main agent wire and assigns line numbers', async () => {
+    const { sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const result = await readAgentWire(join(sessionDir, 'agents', 'main', 'wire.jsonl'));
+    expect(result.metadata.protocolVersion).toBe('1.1');
+    expect(result.records[0]!._lineNo).toBe(2); // metadata is line 1, first record is line 2
+    expect(result.records.at(-1)!._lineNo).toBe(11);
+    expect(result.records.map((r) => r.type)).toEqual([
+      'config.update',
+      'tools.set_active_tools',
+      'permission.set_mode',
+      'turn.prompt',
+      'context.append_message',
+      'context.append_loop_event',
+      'context.append_loop_event',
+      'context.append_loop_event',
+      'context.append_message',
+      'usage.record',
+    ]);
+  });
+
+  it('rejects unsupported protocol version', async () => {
+    const { sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const path = join(sessionDir, 'agents', 'main', 'wire.jsonl');
+    const { writeFile, readFile } = await import('node:fs/promises');
+    const lines = (await readFile(path, 'utf8')).split('\n');
+    lines[0] = '{"type":"metadata","protocol_version":"2.2","created_at":1}';
+    await writeFile(path, lines.join('\n'));
+    await expect(readAgentWire(path)).rejects.toThrow(/unsupported protocol/i);
+  });
+
+  it('collects warnings for malformed body lines', async () => {
+    const { sessionDir, cleanup: c } = await buildSessionFixture('sample-main');
+    cleanup = c;
+    const path = join(sessionDir, 'agents', 'main', 'wire.jsonl');
+    const { appendFile } = await import('node:fs/promises');
+    await appendFile(path, 'not json\n');
+    const result = await readAgentWire(path);
+    expect(result.warnings.length).toBe(1);
+    expect(result.warnings[0]).toMatch(/line 12/);
+  });
+});
diff --git a/apps/vis/server/test/session-lister.test.ts b/apps/vis/server/test/session-lister.test.ts
deleted file mode 100644
index e2123e9..0000000
--- a/apps/vis/server/test/session-lister.test.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { randomBytes } from 'node:crypto';
-import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
-
-import { afterEach, describe, expect, it } from 'vitest';
-
-import { listSessions, loadSessionSummary } from '../src/lib/session-lister';
-import { createSyntheticSession, type SyntheticResult } from './_fixture';
-
-describe('session-lister', () => {
-  let fixture: SyntheticResult | null = null;
-  const fixtureRoots: string[] = [];
-
-  afterEach(() => {
-    fixture?.cleanup();
-    fixture = null;
-    // Cleanup enumeration roots from the second test
-    for (const root of fixtureRoots) {
-      try {
-        rmSync(root, { recursive: true, force: true });
-      } catch {
-        /* ignore */
-      }
-    }
-    fixtureRoots.length = 0;
-  });
-
-  it('loads a single SessionSummary from a synthetic session dir', async () => {
-    fixture = createSyntheticSession({ withSubagent: true });
-    const summary = await loadSessionSummary(fixture.dir);
-    expect(summary.session_id).toBe(fixture.sessionId);
-    expect(summary.model).toBe('test-model');
-    expect(summary.workspace_dir).toBe('/tmp');
-    expect(summary.subagent_count).toBe(1);
-    expect(summary.wire_protocol_version).toBe('1.0');
-    expect(summary.wire_record_count).toBeGreaterThan(0);
-    expect(summary.health).toBe('ok');
-  });
-
-  it('enumerates session_* subdirs and sorts by updated_at desc', async () => {
-    const root = join(tmpdir(), `vis-list-${randomBytes(4).toString('hex')}`);
-    mkdirSync(root, { recursive: true });
-    fixtureRoots.push(root);
-
-    // Seed three synthetic sessions with staggered updated_at
-    for (let i = 0; i < 3; i += 1) {
-      const sessionId = `session_${randomBytes(6).toString('hex')}`;
-      const dir = join(root, sessionId);
-      mkdirSync(dir, { recursive: true });
-      writeFileSync(
-        join(dir, 'wire.jsonl'),
-        JSON.stringify({
-          type: 'metadata',
-          protocol_version: '1.0',
-          created_at: Date.now(),
-          producer: { kind: 'typescript', name: '@moonshot-ai/agent-core', version: '0.0.1' },
-        }) + '\n',
-      );
-      writeFileSync(
-        join(dir, 'state.json'),
-        JSON.stringify({
-          session_id: sessionId,
-          model: 'test-model',
-          status: 'idle',
-          created_at: Date.now() - i * 1000,
-          updated_at: Date.now() - i * 1000,
-          workspace_dir: '/tmp',
-          producer: { kind: 'typescript', name: '@moonshot-ai/agent-core', version: '0.0.1' },
-        }),
-      );
-    }
-
-    // Drop a non-session_* entry to verify it is ignored
-    writeFileSync(join(root, 'random-file.txt'), 'x');
-
-    // Drop a session_* dir with a non-TS producer — must be filtered out
-    const pySessionId = `session_${randomBytes(6).toString('hex')}`;
-    const pyDir = join(root, pySessionId);
-    mkdirSync(pyDir, { recursive: true });
-    writeFileSync(join(pyDir, 'wire.jsonl'), '{}\n');
-    writeFileSync(
-      join(pyDir, 'state.json'),
-      JSON.stringify({
-        session_id: pySessionId,
-        created_at: Date.now(),
-        updated_at: Date.now(),
-        producer: { kind: 'python', name: 'kimi-cli', version: '0.9.0' },
-      }),
-    );
-
-    // Drop a session_* dir with no state.json — must be filtered out
-    const oldSessionId = `session_${randomBytes(6).toString('hex')}`;
-    const oldDir = join(root, oldSessionId);
-    mkdirSync(oldDir, { recursive: true });
-    writeFileSync(join(oldDir, 'wire.jsonl'), '{}\n');
-
-    const summaries = await listSessions(root);
-    expect(summaries.length).toBe(3);
-    // None of the filtered sessions should have leaked through.
-    expect(summaries.some((s) => s.session_id === pySessionId)).toBe(false);
-    expect(summaries.some((s) => s.session_id === oldSessionId)).toBe(false);
-    for (const s of summaries) {
-      expect(s.session_id.startsWith('session_')).toBe(true);
-    }
-    for (let i = 1; i < summaries.length; i += 1) {
-      const prev = summaries[i - 1];
-      const cur = summaries[i];
-      if (prev === undefined || cur === undefined) continue;
-      expect(prev.updated_at).toBeGreaterThanOrEqual(cur.updated_at);
-    }
-    for (const s of summaries) {
-      expect(['ok', 'broken', 'missing_wire']).toContain(s.health);
-    }
-  });
-});
diff --git a/apps/vis/server/test/subagent-loader.test.ts b/apps/vis/server/test/subagent-loader.test.ts
deleted file mode 100644
index 978e621..0000000
--- a/apps/vis/server/test/subagent-loader.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-
-import { buildSubagentTree, listSubagents } from '../src/lib/subagent-loader';
-import { loadWireRecords } from '../src/lib/wire-loader';
-import { createSyntheticSession, type SyntheticResult } from './_fixture';
-
-describe('subagent-loader', () => {
-  let fixture: SyntheticResult | null = null;
-  afterEach(() => {
-    fixture?.cleanup();
-    fixture = null;
-  });
-
-  it('lists subagent ids for a session with subagents', async () => {
-    fixture = createSyntheticSession({ withSubagent: true });
-    const ids = await listSubagents(fixture.dir);
-    expect(ids.length).toBe(1);
-    expect(ids[0]?.startsWith('sub_')).toBe(true);
-  });
-
-  it('builds a tree rooted at main', async () => {
-    fixture = createSyntheticSession({ withSubagent: true });
-    const main = await loadWireRecords(fixture.dir);
-    const tree = await buildSubagentTree(fixture.dir, main.records);
-    expect(tree.length).toBe(1);
-    const node = tree[0];
-    expect(node?.depth).toBe(0);
-    expect(node?.agent_id.startsWith('sub_')).toBe(true);
-    expect(node?.parent_agent_id).toBeNull();
-  });
-
-  it('pairs spawn with completed lifecycle records', async () => {
-    fixture = createSyntheticSession({ withSubagent: true });
-    const main = await loadWireRecords(fixture.dir);
-    const tree = await buildSubagentTree(fixture.dir, main.records);
-    const node = tree[0];
-    expect(node?.status).toBe('completed');
-    expect(node?.result_summary).toBe('all done');
-  });
-
-  it('returns empty tree for sessions without subagents', async () => {
-    fixture = createSyntheticSession();
-    const main = await loadWireRecords(fixture.dir);
-    const tree = await buildSubagentTree(fixture.dir, main.records);
-    expect(tree).toHaveLength(0);
-  });
-});
diff --git a/apps/vis/server/test/wire-loader.test.ts b/apps/vis/server/test/wire-loader.test.ts
deleted file mode 100644
index c1b3357..0000000
--- a/apps/vis/server/test/wire-loader.test.ts
+++ /dev/null
@@ -1,558 +0,0 @@
-import { writeFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, it, afterEach } from 'vitest';
-
-import { listWireFilesManually, loadWireRecords } from '../src/lib/wire-loader';
-import { createSyntheticSession, type SyntheticResult } from './_fixture';
-
-describe('wire-loader', () => {
-  let fixture: SyntheticResult | null = null;
-  afterEach(() => {
-    fixture?.cleanup();
-    fixture = null;
-  });
-
-  it('lists wire.jsonl after any archives, current file last', async () => {
-    fixture = createSyntheticSession();
-    const files = await listWireFilesManually(fixture.dir);
-    expect(files.length).toBeGreaterThan(0);
-    expect((files.at(-1) ?? '').endsWith('wire.jsonl')).toBe(true);
-  });
-
-  it('loads records from a synthetic session', async () => {
-    fixture = createSyntheticSession({ withTools: true });
-    const result = await loadWireRecords(fixture.dir);
-    expect(result.health).toBe('ok');
-    expect(result.records.length).toBeGreaterThan(0);
-    expect(result.files_read.length).toBe(1);
-    expect(result.session_initialized).not.toBeNull();
-    expect(result.session_initialized?.agent_type).toBe('main');
-  });
-
-  it('yields seq-ordered records', async () => {
-    fixture = createSyntheticSession({ withTools: true });
-    const result = await loadWireRecords(fixture.dir);
-    for (let i = 1; i < result.records.length; i += 1) {
-      const prev = result.records[i - 1];
-      const cur = result.records[i];
-      if (prev === undefined || cur === undefined) continue;
-      expect(cur.seq).toBeGreaterThanOrEqual(prev.seq);
-    }
-  });
-
-  it('splices metadata + session_initialized into records so the Wire tab can show them', async () => {
-    fixture = createSyntheticSession();
-    const result = await loadWireRecords(fixture.dir);
-    expect(result.health).toBe('ok');
-    // metadata comes first, session_initialized second.
-    expect(result.records[0]?.type).toBe('metadata');
-    expect(result.records[1]?.type).toBe('session_initialized');
-    const meta = result.records[0] as {
-      protocol_version?: string;
-      producer?: { kind?: string };
-    };
-    expect(meta.protocol_version).toBe('1.0');
-    expect(meta.producer?.kind).toBe('typescript');
-    const init = result.records[1] as { system_prompt?: string };
-    expect(init.system_prompt).toBe('You are a test assistant.');
-  });
-
-  it('returns health=broken with a message for a non-existent dir', async () => {
-    const result = await loadWireRecords('/tmp/vis-test-does-not-exist-xxxxx');
-    expect(result.health).toBe('broken');
-    expect(result.records.length).toBe(0);
-    expect(result.broken_reason).toBeTruthy();
-    expect(result.session_initialized).toBeNull();
-  });
-
-  it('treats idle turn.steer as a turn start without splitting active steer', async () => {
-    fixture = createSyntheticSession();
-    writeWire(fixture.dir, [
-      {
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: 1,
-        producer: {
-          kind: 'typescript',
-          name: '@moonshot-ai/agent-core',
-          version: '0.0.1',
-        },
-      },
-      {
-        type: 'session_initialized',
-        seq: 1,
-        time: 1,
-        agent_type: 'main',
-        session_id: fixture.sessionId,
-        system_prompt: 'You are a test assistant.',
-        model: 'test-model',
-        active_tools: [],
-      },
-      {
-        type: 'turn.prompt',
-        seq: 2,
-        time: 2,
-        input: [{ type: 'text', text: 'first' }],
-      },
-      {
-        type: 'context.user_message',
-        seq: 3,
-        time: 3,
-        content: [{ type: 'text', text: 'first' }],
-      },
-      {
-        type: 'context.delta',
-        seq: 4,
-        time: 4,
-        event: { type: 'step.begin', uuid: 'step-1', turnId: '0', step: 1 },
-      },
-      {
-        type: 'turn.steer',
-        seq: 5,
-        time: 5,
-        input: [{ type: 'text', text: 'active steer' }],
-      },
-      {
-        type: 'context.delta',
-        seq: 6,
-        time: 6,
-        event: { type: 'step.end', uuid: 'step-1', turnId: '0', step: 1, finishReason: 'tool_use' },
-      },
-      {
-        type: 'context.user_message',
-        seq: 7,
-        time: 7,
-        content: [{ type: 'text', text: 'active steer' }],
-      },
-      {
-        type: 'context.delta',
-        seq: 8,
-        time: 8,
-        event: { type: 'step.begin', uuid: 'step-2', turnId: '0', step: 2 },
-      },
-      {
-        type: 'context.delta',
-        seq: 9,
-        time: 9,
-        event: { type: 'step.end', uuid: 'step-2', turnId: '0', step: 2, finishReason: 'end_turn' },
-      },
-      {
-        type: 'turn.steer',
-        seq: 10,
-        time: 10,
-        input: [{ type: 'text', text: 'terminal gap steer' }],
-      },
-      {
-        type: 'context.user_message',
-        seq: 11,
-        time: 11,
-        content: [{ type: 'text', text: 'terminal gap steer' }],
-      },
-      {
-        type: 'context.delta',
-        seq: 12,
-        time: 12,
-        event: { type: 'step.begin', uuid: 'step-3', turnId: '0', step: 3 },
-      },
-      {
-        type: 'context.delta',
-        seq: 13,
-        time: 13,
-        event: { type: 'step.end', uuid: 'step-3', turnId: '0', step: 3, finishReason: 'end_turn' },
-      },
-      {
-        type: 'turn.steer',
-        seq: 14,
-        time: 14,
-        input: [{ type: 'text', text: 'idle steer' }],
-      },
-      {
-        type: 'context.user_message',
-        seq: 15,
-        time: 15,
-        content: [{ type: 'text', text: 'idle steer' }],
-      },
-      {
-        type: 'context.delta',
-        seq: 16,
-        time: 16,
-        event: { type: 'step.begin', uuid: 'step-4', turnId: '1', step: 1 },
-      },
-      {
-        type: 'context.delta',
-        seq: 17,
-        time: 17,
-        event: {
-          type: 'tool.result',
-          parentUuid: 'tool-1',
-          toolCallId: 'tool-1',
-          result: { output: 'idle result' },
-        },
-      },
-    ]);
-
-    const result = await loadWireRecords(fixture.dir);
-    const turnBegins = result.records.filter((record) => record.type === 'turn_begin');
-    const userMessages = result.records.filter((record) => record.type === 'user_message');
-    const toolResult = result.records.find((record) => record.type === 'tool_result');
-
-    expect(turnBegins.map((record) => [record.turn_id, record.user_input])).toEqual([
-      ['0', 'first'],
-      ['1', 'idle steer'],
-    ]);
-    expect(userMessages.map((record) => record.turn_id)).toEqual(['0', '0', '0', '1']);
-    expect(toolResult).toMatchObject({ turn_id: '1' });
-  });
-
-  it('treats idle turn.steer after a failed pre-step turn as a new turn', async () => {
-    fixture = createSyntheticSession();
-    writeWire(fixture.dir, [
-      {
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: 1,
-        producer: {
-          kind: 'typescript',
-          name: '@moonshot-ai/agent-core',
-          version: '0.0.1',
-        },
-      },
-      {
-        type: 'session_initialized',
-        seq: 1,
-        time: 1,
-        agent_type: 'main',
-        session_id: fixture.sessionId,
-        system_prompt: 'You are a test assistant.',
-        active_tools: [],
-      },
-      {
-        type: 'turn.prompt',
-        seq: 2,
-        time: 2,
-        input: [{ type: 'text', text: 'missing model' }],
-      },
-      {
-        type: 'context.user_message',
-        seq: 3,
-        time: 3,
-        content: [{ type: 'text', text: 'missing model' }],
-      },
-      {
-        type: 'turn.steer',
-        seq: 4,
-        time: 4,
-        input: [{ type: 'text', text: 'after failure' }],
-      },
-      {
-        type: 'context.user_message',
-        seq: 5,
-        time: 5,
-        content: [{ type: 'text', text: 'after failure' }],
-      },
-      {
-        type: 'context.delta',
-        seq: 6,
-        time: 6,
-        event: { type: 'step.begin', uuid: 'step-1', turnId: '1', step: 1 },
-      },
-    ]);
-
-    const result = await loadWireRecords(fixture.dir);
-    const turnBegins = result.records.filter((record) => record.type === 'turn_begin');
-    const userMessages = result.records.filter((record) => record.type === 'user_message');
-
-    expect(turnBegins.map((record) => [record.turn_id, record.user_input])).toEqual([
-      ['0', 'missing model'],
-      ['1', 'after failure'],
-    ]);
-    expect(userMessages.map((record) => record.turn_id)).toEqual(['0', '1']);
-  });
-  it('unwraps the newer dot-namespaced record names (append_loop_event, append_message, set_active_tools)', async () => {
-    fixture = createSyntheticSession();
-    writeWire(fixture.dir, [
-      {
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: 1,
-        producer: { kind: 'typescript', name: '@moonshot-ai/core', version: '0.0.1' },
-      },
-      {
-        type: 'session_initialized',
-        seq: 1,
-        time: 1,
-        agent_type: 'main',
-        session_id: fixture.sessionId,
-        system_prompt: 'You are a test assistant.',
-        active_tools: [],
-      },
-      {
-        type: 'turn.prompt',
-        seq: 2,
-        time: 2,
-        input: [{ type: 'text', text: 'hi' }],
-      },
-      {
-        type: 'context.append_message',
-        seq: 3,
-        time: 3,
-        message: { role: 'user', content: [{ type: 'text', text: 'hi' }] },
-      },
-      {
-        type: 'tools.set_active_tools',
-        seq: 4,
-        time: 4,
-        names: ['Read', 'Write', 'Bash'],
-      },
-      {
-        type: 'context.append_loop_event',
-        seq: 5,
-        time: 5,
-        event: { type: 'step.begin', uuid: 'step-1', turnId: '0', step: 1 },
-      },
-      {
-        type: 'context.append_loop_event',
-        seq: 6,
-        time: 6,
-        event: {
-          type: 'tool.call',
-          uuid: 'tc-1',
-          turnId: '0',
-          step: 1,
-          stepUuid: 'step-1',
-          toolCallId: 'call-1',
-          name: 'Write',
-          args: { path: '/tmp/x', content: 'hello' },
-        },
-      },
-      {
-        type: 'context.append_loop_event',
-        seq: 7,
-        time: 7,
-        event: { type: 'step.end', uuid: 'step-1', turnId: '0', step: 1, finishReason: 'tool_use' },
-      },
-    ]);
-
-    const result = await loadWireRecords(fixture.dir);
-    expect(result.health).toBe('ok');
-    const types = result.records.map((r) => r.type);
-    expect(types).toContain('turn_begin');
-    expect(types).toContain('user_message');
-    expect(types).toContain('tools_changed');
-    expect(types).toContain('step_begin');
-    expect(types).toContain('tool_call');
-    expect(types).toContain('step_end');
-    expect(types).not.toContain('notification');
-
-    const toolCall = result.records.find((r) => r.type === 'tool_call');
-    expect(toolCall).toMatchObject({ turn_id: '0', data: { tool_name: 'Write' } });
-    const toolsChanged = result.records.find((r) => r.type === 'tools_changed');
-    expect(toolsChanged).toMatchObject({ operation: 'set_active', tools: ['Read', 'Write', 'Bash'] });
-  });
-
-  // The newer `context.append_message` producer carries assistant /
-  // system roles too. Without a role filter, inferSteerStartedTurnId
-  // would see any append_message in the lookahead window and conclude
-  // that the steer launched a fresh turn, fabricating a turn id.
-  it('ignores non-user append_message when inferring whether a turn.steer launched a fresh turn', async () => {
-    fixture = createSyntheticSession();
-    writeWire(fixture.dir, [
-      {
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: 1,
-        producer: { kind: 'typescript', name: '@moonshot-ai/core', version: '0.0.1' },
-      },
-      {
-        type: 'session_initialized',
-        seq: 1,
-        time: 1,
-        agent_type: 'main',
-        session_id: fixture.sessionId,
-        system_prompt: 'You are a test assistant.',
-        active_tools: [],
-      },
-      {
-        type: 'turn.prompt',
-        seq: 2,
-        time: 2,
-        input: [{ type: 'text', text: 'first' }],
-      },
-      {
-        type: 'context.append_message',
-        seq: 3,
-        time: 3,
-        message: { role: 'user', content: [{ type: 'text', text: 'first' }] },
-      },
-      {
-        type: 'context.append_loop_event',
-        seq: 4,
-        time: 4,
-        event: { type: 'step.begin', uuid: 'step-1', turnId: '0', step: 1 },
-      },
-      // Steer arrives during an active turn (no later loop event reveals
-      // a new turnId, no later user message follows). Only an assistant
-      // append_message lands in the lookahead window.
-      {
-        type: 'turn.steer',
-        seq: 5,
-        time: 5,
-        input: [{ type: 'text', text: 'buffered steer' }],
-      },
-      {
-        type: 'context.append_message',
-        seq: 6,
-        time: 6,
-        message: { role: 'assistant', content: [{ type: 'text', text: 'thinking out loud' }] },
-      },
-    ]);
-
-    const result = await loadWireRecords(fixture.dir);
-    const turnBegins = result.records.filter((record) => record.type === 'turn_begin');
-    // Only the original turn.prompt should produce a turn_begin. The
-    // steer must stay buffered because the lookahead contains no user
-    // message — assistant append_messages don't count.
-    expect(turnBegins.map((record) => record.turn_id)).toEqual(['0']);
-  });
-
-  // ContextMemory.appendSystemReminder() persists injected reminders /
-  // skill activations / system triggers as role: 'user' messages for the
-  // LLM, but their origin.kind is not 'user'. Replay must not surface
-  // these as user_message records or count them when inferring whether
-  // a turn.steer launched a fresh turn.
-  it('does not surface non-user-origin append_message as user_message', async () => {
-    fixture = createSyntheticSession();
-    writeWire(fixture.dir, [
-      {
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: 1,
-        producer: { kind: 'typescript', name: '@moonshot-ai/core', version: '0.0.1' },
-      },
-      {
-        type: 'session_initialized',
-        seq: 1,
-        time: 1,
-        agent_type: 'main',
-        session_id: fixture.sessionId,
-        system_prompt: 'You are a test assistant.',
-        active_tools: [],
-      },
-      {
-        type: 'turn.prompt',
-        seq: 2,
-        time: 2,
-        input: [{ type: 'text', text: 'hi' }],
-      },
-      {
-        type: 'context.append_message',
-        seq: 3,
-        time: 3,
-        message: {
-          role: 'user',
-          content: [{ type: 'text', text: 'hi' }],
-          origin: { kind: 'user' },
-        },
-      },
-      // System reminder: role: 'user' for the LLM, but origin.kind says
-      // it's an injection, not a real user message.
-      {
-        type: 'context.append_message',
-        seq: 4,
-        time: 4,
-        message: {
-          role: 'user',
-          content: [{ type: 'text', text: '<system-reminder>be careful</system-reminder>' }],
-          origin: { kind: 'injection', variant: 'safety' },
-        },
-      },
-      // Skill activation payload: also role: 'user' under the hood.
-      {
-        type: 'context.append_message',
-        seq: 5,
-        time: 5,
-        message: {
-          role: 'user',
-          content: [{ type: 'text', text: 'skill bootstrap' }],
-          origin: { kind: 'skill_activation', activationId: 'a1', skillName: 'plan', trigger: 'user-slash' },
-        },
-      },
-    ]);
-
-    const result = await loadWireRecords(fixture.dir);
-    const userMessages = result.records.filter((record) => record.type === 'user_message');
-    // Only the real user message at seq 3 should surface — the injection
-    // and skill_activation entries must not show as user_message.
-    expect(userMessages.map((record) => record.seq)).toEqual([3]);
-  });
-
-  it('ignores non-user-origin append_message when inferring whether a turn.steer launched a fresh turn', async () => {
-    fixture = createSyntheticSession();
-    writeWire(fixture.dir, [
-      {
-        type: 'metadata',
-        protocol_version: '1.0',
-        created_at: 1,
-        producer: { kind: 'typescript', name: '@moonshot-ai/core', version: '0.0.1' },
-      },
-      {
-        type: 'session_initialized',
-        seq: 1,
-        time: 1,
-        agent_type: 'main',
-        session_id: fixture.sessionId,
-        system_prompt: 'You are a test assistant.',
-        active_tools: [],
-      },
-      {
-        type: 'turn.prompt',
-        seq: 2,
-        time: 2,
-        input: [{ type: 'text', text: 'first' }],
-      },
-      {
-        type: 'context.append_message',
-        seq: 3,
-        time: 3,
-        message: { role: 'user', content: [{ type: 'text', text: 'first' }], origin: { kind: 'user' } },
-      },
-      {
-        type: 'context.append_loop_event',
-        seq: 4,
-        time: 4,
-        event: { type: 'step.begin', uuid: 'step-1', turnId: '0', step: 1 },
-      },
-      {
-        type: 'turn.steer',
-        seq: 5,
-        time: 5,
-        input: [{ type: 'text', text: 'buffered steer' }],
-      },
-      // Injected system reminder lands in the lookahead window. It has
-      // role: 'user' but origin.kind: 'system_trigger', so it must NOT
-      // count as evidence of a user-launched fresh turn.
-      {
-        type: 'context.append_message',
-        seq: 6,
-        time: 6,
-        message: {
-          role: 'user',
-          content: [{ type: 'text', text: '<system-reminder>focus</system-reminder>' }],
-          origin: { kind: 'system_trigger', name: 'focus-reminder' },
-        },
-      },
-    ]);
-
-    const result = await loadWireRecords(fixture.dir);
-    const turnBegins = result.records.filter((record) => record.type === 'turn_begin');
-    expect(turnBegins.map((record) => record.turn_id)).toEqual(['0']);
-  });
-});
-
-function writeWire(dir: string, records: readonly Record<string, unknown>[]): void {
-  writeFileSync(
-    join(dir, 'wire.jsonl'),
-    `${records.map((record) => JSON.stringify(record)).join('\n')}\n`,
-  );
-}
diff --git a/apps/vis/web/src/App.tsx b/apps/vis/web/src/App.tsx
index 4843b67..7e1df25 100644
--- a/apps/vis/web/src/App.tsx
+++ b/apps/vis/web/src/App.tsx
@@ -11,7 +11,7 @@ export function App() {
         <Route path="/" element={<SessionListPage />} />
         <Route path="/sessions/:sessionId" element={<SessionDetailPage />} />
         <Route
-          path="/sessions/:sessionId/subagents/:agentId"
+          path="/sessions/:sessionId/agents/:agentId"
           element={<SubagentDetailPage />}
         />
       </Routes>
diff --git a/apps/vis/web/src/api.ts b/apps/vis/web/src/api.ts
index 6634669..18e5d76 100644
--- a/apps/vis/web/src/api.ts
+++ b/apps/vis/web/src/api.ts
@@ -1,13 +1,10 @@
 import type {
   SessionSummary,
   SessionDetail,
+  DeleteSessionResponse,
   WireResponse,
   ContextResponse,
-  SubagentTreeResponse,
-  SubagentMetaResponse,
-  ToolResultFileResponse,
-  DeleteSessionResponse,
-  ClearSessionsResponse,
+  AgentTreeResponse,
   ApiError,
 } from './types';
 
@@ -87,33 +84,26 @@ function del<T>(path: string): Promise<T> {
 
 const enc = encodeURIComponent;
 
+interface SessionsListResponse {
+  sessions: SessionSummary[];
+}
+
 export const api = {
-  listSessions: () => get<SessionSummary[]>('/api/sessions'),
+  listSessions: async (): Promise<SessionSummary[]> => {
+    const r = await get<SessionsListResponse>('/api/sessions');
+    return r.sessions;
+  },
 
   getSession: (id: string) => get<SessionDetail>(`/api/sessions/${enc(id)}`),
 
-  deleteSession: (id: string) => del<DeleteSessionResponse>(`/api/sessions/${enc(id)}`),
-
-  clearSessions: () => del<ClearSessionsResponse>('/api/sessions'),
+  getWire: (id: string, agentId: string) =>
+    get<WireResponse>(`/api/sessions/${enc(id)}/wire?agent=${enc(agentId)}`),
 
-  getWire: (id: string) => get<WireResponse>(`/api/sessions/${enc(id)}/wire`),
+  getContext: (id: string, agentId: string) =>
+    get<ContextResponse>(`/api/sessions/${enc(id)}/context?agent=${enc(agentId)}`),
 
-  getContext: (id: string) => get<ContextResponse>(`/api/sessions/${enc(id)}/context`),
+  getAgentTree: (id: string) =>
+    get<AgentTreeResponse>(`/api/sessions/${enc(id)}/agents`),
 
-  getSubagents: (id: string) => get<SubagentTreeResponse>(`/api/sessions/${enc(id)}/subagents`),
-
-  getSubagentWire: (id: string, agentId: string) =>
-    get<WireResponse>(`/api/sessions/${enc(id)}/subagents/${enc(agentId)}/wire`),
-
-  getSubagentContext: (id: string, agentId: string) =>
-    get<ContextResponse>(`/api/sessions/${enc(id)}/subagents/${enc(agentId)}/context`),
-
-  getSubagentMeta: (id: string, agentId: string) =>
-    get<SubagentMetaResponse>(`/api/sessions/${enc(id)}/subagents/${enc(agentId)}/meta`),
-
-  getToolResult: (id: string, toolCallId: string) =>
-    get<ToolResultFileResponse>(`/api/sessions/${enc(id)}/tool-results/${enc(toolCallId)}`),
-
-  getArchive: (id: string, filename: string) =>
-    get<WireResponse>(`/api/sessions/${enc(id)}/archives/${enc(filename)}`),
+  deleteSession: (id: string) => del<DeleteSessionResponse>(`/api/sessions/${enc(id)}`),
 };
diff --git a/apps/vis/web/src/components/context/CompactionRibbon.tsx b/apps/vis/web/src/components/context/CompactionRibbon.tsx
index ca0a0f8..78bbfc3 100644
--- a/apps/vis/web/src/components/context/CompactionRibbon.tsx
+++ b/apps/vis/web/src/components/context/CompactionRibbon.tsx
@@ -1,28 +1,39 @@
+import type { ProjectedMessage } from '../../types';
+
 interface CompactionRibbonProps {
-  summary: string;
-  seq: number;
+  /** The synthetic compaction-summary message emitted by the projector. */
+  message: ProjectedMessage;
 }
 
 /**
- * Horizontal ribbon marker where a compaction occurred in the message stream.
- * Derivation is best-effort from the annotated message stream; if a compaction
- * was applied, buildAnnotatedMessages emits a summary assistant message. We
- * detect the prior "break" via seq discontinuity, but for now we render a
- * stand-alone banner wherever the caller places it.
+ * Horizontal ribbon that marks where a `context.apply_compaction` record
+ * collapsed earlier messages into a single summary. Receives the
+ * `ProjectedMessage` whose `source === 'compaction_summary'` so we can
+ * render the summary text inline.
  */
-export function CompactionRibbon({ summary, seq }: CompactionRibbonProps) {
+export function CompactionRibbon({ message }: CompactionRibbonProps) {
+  const summary = extractSummary(message);
   return (
-    <div className="my-3 flex items-center gap-3">
-      <span className="h-px flex-1 bg-[var(--color-compaction)] opacity-50" />
-      <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--color-compaction)]">
-        ⏪ compacted · seq {seq}
-      </span>
-      <span className="h-px flex-1 bg-[var(--color-compaction)] opacity-50" />
-      {summary ? (
-        <div className="mt-2 text-fg-2">
-          <pre className="whitespace-pre-wrap font-mono text-[12px]">{summary}</pre>
-        </div>
+    <div className="my-3 flex flex-col gap-2">
+      <div className="flex items-center gap-3">
+        <span className="h-px flex-1 bg-[var(--color-compaction)] opacity-50" />
+        <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--color-compaction)]">
+          prior context compacted · line {message.lineNo}
+        </span>
+        <span className="h-px flex-1 bg-[var(--color-compaction)] opacity-50" />
+      </div>
+      {summary.length > 0 ? (
+        <pre className="whitespace-pre-wrap break-words font-mono text-[12px] text-fg-2">
+          {summary}
+        </pre>
       ) : null}
     </div>
   );
 }
+
+function extractSummary(message: ProjectedMessage): string {
+  for (const part of message.message.content) {
+    if (part.type === 'text') return part.text;
+  }
+  return '';
+}
diff --git a/apps/vis/web/src/components/context/ContextTab.tsx b/apps/vis/web/src/components/context/ContextTab.tsx
index cedb1fc..37b4092 100644
--- a/apps/vis/web/src/components/context/ContextTab.tsx
+++ b/apps/vis/web/src/components/context/ContextTab.tsx
@@ -1,70 +1,100 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import type { AnnotatedMessage, ProjectedStateSummary } from '../../types';
+import { useContext } from '../../hooks/useContext';
+import { useSession } from '../../hooks/useSession';
+import type { TokenUsage } from '../../types';
 import { Pill } from '../shared/Pill';
-import { formatBytes } from '../shared/SizePreview';
-import { EphemeralBubble } from './EphemeralBubble';
+import { CompactionRibbon } from './CompactionRibbon';
 import { MessageBubble } from './MessageBubble';
 
 interface ContextTabProps {
   sessionId: string;
-  messages: AnnotatedMessage[];
-  projectedState: ProjectedStateSummary;
+  /** Override starting agentId; defaults to 'main'. */
+  initialAgentId?: string;
 }
 
-export function ContextTab({ sessionId, messages, projectedState }: ContextTabProps) {
-  const [hideOutOfContext, setHideOutOfContext] = useState(false);
-
-  const visible = hideOutOfContext ? messages.filter((m) => !m.out_of_context) : messages;
-
-  const stats = countKinds(messages);
+export function ContextTab({ sessionId, initialAgentId = 'main' }: ContextTabProps) {
+  const [agentId, setAgentId] = useState<string>(initialAgentId);
+  // Re-sync when the route changes the prop while this component stays
+  // mounted (e.g. navigating between /sessions/x/agents/a → /agents/b).
+  useEffect(() => {
+    setAgentId(initialAgentId);
+  }, [initialAgentId]);
+  const { data: detail } = useSession(sessionId);
+  const { data: ctx, isLoading, error } = useContext(sessionId, agentId);
+
+  const agents = detail?.agents ?? [];
+  const messages = ctx?.messages ?? [];
+  const session = ctx?.usage.byScope.session ?? EMPTY_USAGE;
+  const config = ctx?.config ?? {};
+  const permissionMode = ctx?.permission.mode ?? null;
+  const planActive = ctx?.planMode.active ?? false;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      {/* Header strip */}
-      <div className="flex shrink-0 items-center gap-3 bg-surface-1 px-3 py-2 font-mono text-[11px] text-fg-2">
-        <span className="tabular text-fg-0">{messages.length}</span>
-        <span>messages</span>
-        <span className="text-fg-3">·</span>
-        <span>model</span>
-        <span className="text-fg-0">{projectedState.model ?? 'unknown'}</span>
-        <span className="text-fg-3">·</span>
-        <TokenDots breakdown={projectedState} />
-        <span className="ml-auto flex items-center gap-3">
-          <LegendDot color="var(--color-user)" label="user" count={stats.user} />
-          <LegendDot color="var(--color-assistant)" label="asst" count={stats.assistant} />
-          <LegendDot color="var(--color-tool)" label="tool" count={stats.tool} />
-          <LegendDot color="var(--color-cat-ephemeral)" label="reminder" count={stats.reminder} />
-          <LegendDot color="var(--color-cat-meta)" label="notif" count={stats.notif} />
-          <label className="flex items-center gap-1 text-fg-2 hover:text-fg-1">
-            <input
-              type="checkbox"
-              checked={hideOutOfContext}
-              onChange={(e) =>{  setHideOutOfContext(e.target.checked); }}
-              className="accent-[var(--color-cat-conversation)]"
-            />
-            hide out-of-context
-          </label>
+      {/* Toolbar — agent selector + status pills */}
+      <div className="flex shrink-0 items-center gap-3 border-b border-border bg-surface-1 px-3 py-2">
+        <label className="flex items-center gap-2 font-mono text-[11px] text-fg-2">
+          <span className="text-fg-3">agent</span>
+          <select
+            value={agentId}
+            onChange={(e) => {
+              setAgentId(e.target.value);
+            }}
+            className="border border-border bg-surface-0 px-2 py-1 font-mono text-[12px] text-fg-0 focus:border-border-strong focus:outline-none"
+          >
+            {agents.length === 0 ? <option value={agentId}>{agentId}</option> : null}
+            {agents.map((a) => (
+              <option key={a.agentId} value={a.agentId}>
+                {a.agentId} ({a.type}
+                {a.parentAgentId ? ` ← ${a.parentAgentId}` : ''})
+              </option>
+            ))}
+          </select>
+        </label>
+        <span className="font-mono text-[11px] text-fg-2">
+          <span className="tabular text-fg-0">{messages.length}</span>
+          <span className="ml-1 text-fg-3">messages</span>
         </span>
+        {config.modelAlias ? (
+          <span className="font-mono text-[11px] text-fg-2">
+            <span className="text-fg-3">model</span>{' '}
+            <span className="text-fg-0">{config.modelAlias}</span>
+          </span>
+        ) : null}
+        <div className="ml-auto flex items-center gap-2">
+          {permissionMode ? (
+            <Pill tone="approval" variant="outline">permission: {permissionMode}</Pill>
+          ) : null}
+          {planActive ? (
+            <Pill tone="info" variant="solid">plan mode</Pill>
+          ) : null}
+        </div>
       </div>
-      {/* Token stacked bar — 2px hairline under the header. Replaces the
-       *  border-b so the bar itself is the separator. */}
-      <TokenBar breakdown={projectedState} />
+
+      {/* 4-segment token bar pulled from byScope.session */}
+      <TokenBar usage={session} />
 
       {/* Message stream */}
       <div className="min-h-0 flex-1 overflow-y-auto">
         <div className="flex flex-col gap-3 px-3 py-4">
-          <SystemPromptBubble text={projectedState.system_prompt} />
-          {visible.length === 0 ? (
+          {config.systemPrompt ? <SystemPromptBubble text={config.systemPrompt} /> : null}
+          {isLoading ? (
+            <div className="px-3 py-2 font-mono text-[12px] text-fg-3">loading context…</div>
+          ) : error ? (
+            <div className="px-3 py-2 font-mono text-[12px] text-[var(--color-sev-error)]">
+              {(error as Error).message}
+            </div>
+          ) : messages.length === 0 ? (
             <div className="px-3 py-2 font-mono text-[12px] text-fg-3">
               no messages — session has only lifecycle/config records so far.
             </div>
           ) : (
-            visible.map((m) => {
-              if (m.is_ephemeral) {
-                return <EphemeralBubble key={m.seq} message={m} />;
+            messages.map((m) => {
+              if (m.source === 'compaction_summary') {
+                return <CompactionRibbon key={m.lineNo} message={m} />;
               }
-              return <MessageBubble key={m.seq} message={m} sessionId={sessionId} />;
+              return <MessageBubble key={m.lineNo} message={m} />;
             })
           )}
         </div>
@@ -73,26 +103,73 @@ export function ContextTab({ sessionId, messages, projectedState }: ContextTabPr
   );
 }
 
-function SystemPromptBubble({ text }: { text: string | null }) {
-  const [open, setOpen] = useState(false);
-  const hasText = text !== null && text.length > 0;
+const EMPTY_USAGE: TokenUsage = {
+  inputOther: 0,
+  output: 0,
+  inputCacheRead: 0,
+  inputCacheCreation: 0,
+};
 
-  if (!hasText) {
-    return (
-      <article
-        className="relative flex max-w-full min-w-0 flex-col border-l-[3px] bg-surface-1 px-3 py-2"
-        style={{ borderLeftColor: 'var(--color-cat-config)' }}
-      >
-        <header className="flex items-center gap-2">
-          <Pill tone="config" variant="solid">
-            system
-          </Pill>
-          <span className="font-mono text-[12px] text-fg-3">(no system prompt)</span>
-        </header>
-      </article>
-    );
+// Colors are chosen from the existing semantic palette so the bar reads
+// coherently with the rest of the app:
+//   inputCacheRead     = success   (cache hit — the "good" share)
+//   inputOther         = info      (billed input)
+//   output             = assistant (what the model produced)
+//   inputCacheCreation = warning   (billed once, amortised next call)
+const SEG_COLORS = {
+  inputCacheRead: 'var(--color-sev-success)',
+  inputOther: 'var(--color-sev-info)',
+  output: 'var(--color-assistant)',
+  inputCacheCreation: 'var(--color-sev-warning)',
+} as const;
+
+function TokenBar({ usage }: { usage: TokenUsage }) {
+  const total =
+    usage.inputOther + usage.output + usage.inputCacheRead + usage.inputCacheCreation;
+  if (total === 0) {
+    return <div className="h-[2px] shrink-0 bg-border" />;
   }
+  const seg = (n: number) => (n / total) * 100;
+  return (
+    <div
+      className="flex h-[3px] w-full shrink-0"
+      title={
+        `cache_read ${usage.inputCacheRead.toLocaleString()} · ` +
+        `input ${usage.inputOther.toLocaleString()} · ` +
+        `output ${usage.output.toLocaleString()} · ` +
+        `cache_create ${usage.inputCacheCreation.toLocaleString()}`
+      }
+    >
+      {usage.inputCacheRead > 0 ? (
+        <div
+          style={{
+            width: `${seg(usage.inputCacheRead)}%`,
+            backgroundColor: SEG_COLORS.inputCacheRead,
+          }}
+        />
+      ) : null}
+      {usage.inputOther > 0 ? (
+        <div
+          style={{ width: `${seg(usage.inputOther)}%`, backgroundColor: SEG_COLORS.inputOther }}
+        />
+      ) : null}
+      {usage.output > 0 ? (
+        <div style={{ width: `${seg(usage.output)}%`, backgroundColor: SEG_COLORS.output }} />
+      ) : null}
+      {usage.inputCacheCreation > 0 ? (
+        <div
+          style={{
+            width: `${seg(usage.inputCacheCreation)}%`,
+            backgroundColor: SEG_COLORS.inputCacheCreation,
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
 
+function SystemPromptBubble({ text }: { text: string }) {
+  const [open, setOpen] = useState(false);
   return (
     <article
       className="relative flex max-w-full min-w-0 flex-col border-l-[3px] bg-surface-1"
@@ -100,15 +177,15 @@ function SystemPromptBubble({ text }: { text: string | null }) {
     >
       <button
         type="button"
-        onClick={() =>{  setOpen((v) => !v); }}
+        onClick={() => {
+          setOpen((v) => !v);
+        }}
         className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left hover:bg-surface-2"
       >
         <span className="flex items-center gap-2">
-          <Pill tone="config" variant="solid">
-            system
-          </Pill>
+          <Pill tone="config" variant="solid">system</Pill>
           <span className="font-mono text-[10px] text-fg-3 tabular">
-            {formatBytes(text.length)} · {text.length.toLocaleString()} chars
+            {text.length.toLocaleString()} chars
           </span>
         </span>
         <span className="font-mono text-[11px] text-fg-1">
@@ -137,145 +214,3 @@ function SystemPromptBubble({ text }: { text: string | null }) {
     </article>
   );
 }
-
-function LegendDot({ color, label, count }: { color: string; label: string; count: number }) {
-  if (count === 0) return null;
-  return (
-    <span className="flex items-center gap-1 text-fg-3">
-      <span
-        className="inline-block h-[6px] w-[6px] rounded-full"
-        style={{ backgroundColor: color }}
-      />
-      <span>{label}</span>
-      <span className="tabular text-fg-2">{count}</span>
-    </span>
-  );
-}
-
-// ─── token breakdown (input / output / cache_read / cache_write) ───
-// Colors are chosen from the existing semantic palette so the bar reads
-// coherently with the rest of the app:
-//   cache_read   = success   (saved / cached — the "good" share)
-//   input        = info      (billed input)
-//   output       = assistant (what the model produced)
-//   cache_write  = warning   (billed once, amortised next call)
-
-const TOK_COLORS = {
-  cache_read: 'var(--color-sev-success)',
-  input: 'var(--color-sev-info)',
-  output: 'var(--color-assistant)',
-  cache_write: 'var(--color-sev-warning)',
-} as const;
-
-interface TokenBreakdown {
-  input_tokens: number;
-  output_tokens: number;
-  cache_read_tokens: number;
-  cache_write_tokens: number;
-}
-
-function formatTokens(n: number): string {
-  if (n < 1000) return String(n);
-  if (n < 10_000) return (n / 1000).toFixed(1) + 'K';
-  if (n < 1_000_000) return Math.round(n / 1000) + 'K';
-  return (n / 1_000_000).toFixed(1) + 'M';
-}
-
-function TokenDots({ breakdown }: { breakdown: TokenBreakdown }) {
-  const { input_tokens, output_tokens, cache_read_tokens, cache_write_tokens } = breakdown;
-  const billedIn = input_tokens + cache_read_tokens;
-  const hitPct = billedIn > 0 ? Math.round((cache_read_tokens / billedIn) * 100) : 0;
-  const hasAny =
-    input_tokens > 0 || output_tokens > 0 || cache_read_tokens > 0 || cache_write_tokens > 0;
-  if (!hasAny) {
-    return <span className="text-fg-3">(no tokens yet)</span>;
-  }
-  return (
-    <span className="flex items-center gap-2">
-      <TokenDot color={TOK_COLORS.input} label="in" value={input_tokens} />
-      <TokenDot color={TOK_COLORS.output} label="out" value={output_tokens} />
-      <TokenDot color={TOK_COLORS.cache_read} label="cache" value={cache_read_tokens} />
-      {cache_write_tokens > 0 ? (
-        <TokenDot color={TOK_COLORS.cache_write} label="cw" value={cache_write_tokens} />
-      ) : null}
-      {cache_read_tokens > 0 ? <span className="text-fg-3 tabular">({hitPct}% hit)</span> : null}
-    </span>
-  );
-}
-
-function TokenDot({ color, label, value }: { color: string; label: string; value: number }) {
-  return (
-    <span className="flex items-center gap-1" title={`${label}: ${value.toLocaleString()}`}>
-      <span
-        className="inline-block h-[6px] w-[6px] rounded-full"
-        style={{ backgroundColor: color }}
-      />
-      <span className="tabular text-fg-0">{formatTokens(value)}</span>
-      <span className="text-fg-3">{label}</span>
-    </span>
-  );
-}
-
-/** 2px stacked bar that visually shows the 4-way token composition.
- *  Proportions use (input + output + cache_read + cache_write) as the
- *  total so cache_read's share is honest (it's not in the "billed"
- *  tokenCount but it's real work done on the request). */
-function TokenBar({ breakdown }: { breakdown: TokenBreakdown }) {
-  const { input_tokens, output_tokens, cache_read_tokens, cache_write_tokens } = breakdown;
-  const total = input_tokens + output_tokens + cache_read_tokens + cache_write_tokens;
-  if (total === 0) {
-    return <div className="h-[2px] shrink-0 bg-border" />;
-  }
-  const seg = (n: number) => (n / total) * 100;
-  return (
-    <div
-      className="flex h-[2px] w-full shrink-0"
-      title={`cache_read ${cache_read_tokens.toLocaleString()} · input ${input_tokens.toLocaleString()} · output ${output_tokens.toLocaleString()} · cache_write ${cache_write_tokens.toLocaleString()}`}
-    >
-      {cache_read_tokens > 0 ? (
-        <div
-          style={{ width: `${seg(cache_read_tokens)}%`, backgroundColor: TOK_COLORS.cache_read }}
-        />
-      ) : null}
-      {input_tokens > 0 ? (
-        <div style={{ width: `${seg(input_tokens)}%`, backgroundColor: TOK_COLORS.input }} />
-      ) : null}
-      {output_tokens > 0 ? (
-        <div style={{ width: `${seg(output_tokens)}%`, backgroundColor: TOK_COLORS.output }} />
-      ) : null}
-      {cache_write_tokens > 0 ? (
-        <div
-          style={{ width: `${seg(cache_write_tokens)}%`, backgroundColor: TOK_COLORS.cache_write }}
-        />
-      ) : null}
-    </div>
-  );
-}
-
-function countKinds(messages: AnnotatedMessage[]) {
-  let user = 0,
-    assistant = 0,
-    tool = 0,
-    reminder = 0,
-    notif = 0;
-  for (const m of messages) {
-    switch (m.origin.kind) {
-      case 'user':
-        user++;
-        break;
-      case 'assistant':
-        assistant++;
-        break;
-      case 'tool':
-        tool++;
-        break;
-      case 'system_reminder':
-        reminder++;
-        break;
-      case 'notification':
-        notif++;
-        break;
-    }
-  }
-  return { user, assistant, tool, reminder, notif };
-}
diff --git a/apps/vis/web/src/components/context/EphemeralBubble.tsx b/apps/vis/web/src/components/context/EphemeralBubble.tsx
deleted file mode 100644
index 17a5555..0000000
--- a/apps/vis/web/src/components/context/EphemeralBubble.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { AnnotatedMessage } from '../../types';
-import { Pill } from '../shared/Pill';
-
-interface EphemeralBubbleProps {
-  message: AnnotatedMessage;
-}
-
-/**
- * Ephemeral-injected message (system_reminder or notification).
- * Rendered with dashed border + inset — unambiguous signal that this
- * is NOT a real user turn.
- */
-export function EphemeralBubble({ message }: EphemeralBubbleProps) {
-  const { origin } = message;
-  if (origin.kind === 'system_reminder') {
-    return <SystemReminderBubble m={message} />;
-  }
-  if (origin.kind === 'notification') {
-    return <NotificationBubble m={message} severity={origin.severity} />;
-  }
-  return null;
-}
-
-function SystemReminderBubble({ m }: { m: AnnotatedMessage }) {
-  const text = extractText(m);
-  // Strip XML wrapper for display (show just the inner content)
-  const inner = text
-    .replace(/^\s*<system-reminder>\n?/, '')
-    .replace(/\n?<\/system-reminder>\s*$/, '');
-
-  return (
-    <article
-      className={[
-        'ml-4 flex max-w-full min-w-0 flex-col bg-surface-2 px-3 py-2',
-        'ephemeral-border',
-        m.out_of_context ? 'opacity-50' : '',
-      ].join(' ')}
-    >
-      <header className="mb-1 flex items-center gap-2">
-        <Pill tone="ephemeral" variant="solid">system_reminder</Pill>
-        <span className="font-mono text-[10px] text-fg-3 tabular">
-          injected @ seq {m.seq}
-        </span>
-      </header>
-      <pre className="whitespace-pre-wrap break-words font-mono text-[12.5px] leading-[1.55] text-fg-1">
-        {inner}
-      </pre>
-    </article>
-  );
-}
-
-function NotificationBubble({ m, severity }: { m: AnnotatedMessage; severity: string }) {
-  const text = extractText(m);
-  // Strip <notification ...> wrapper
-  const inner = text
-    .replace(/^\s*<notification[^>]*>\n?/, '')
-    .replace(/\n?<\/notification>\s*$/, '');
-  const tone =
-    severity === 'error'
-      ? 'error'
-      : severity === 'warning'
-        ? 'warning'
-        : severity === 'success'
-          ? 'success'
-          : 'info';
-  const borderClass =
-    severity === 'error'
-      ? 'ephemeral-border-error'
-      : severity === 'warning'
-        ? 'ephemeral-border-warning'
-        : severity === 'success'
-          ? 'ephemeral-border-success'
-          : 'ephemeral-border-info';
-
-  return (
-    <article
-      className={[
-        'ml-4 flex max-w-full min-w-0 flex-col bg-surface-2 px-3 py-2',
-        'ephemeral-border',
-        borderClass,
-        m.out_of_context ? 'opacity-50' : '',
-      ].join(' ')}
-    >
-      <header className="mb-1 flex items-center gap-2">
-        <Pill tone="meta" variant="solid">notification</Pill>
-        <Pill tone={tone} variant="soft">{severity}</Pill>
-        <span className="font-mono text-[10px] text-fg-3 tabular">
-          injected @ seq {m.seq}
-        </span>
-      </header>
-      <pre className="whitespace-pre-wrap break-words font-mono text-[12.5px] leading-[1.55] text-fg-1">
-        {inner}
-      </pre>
-    </article>
-  );
-}
-
-function extractText(m: AnnotatedMessage): string {
-  const p = m.message.content.find((x) => x.type === 'text');
-  return p ? ((p['text'] as string | undefined) ?? '') : '';
-}
diff --git a/apps/vis/web/src/components/context/MessageBubble.tsx b/apps/vis/web/src/components/context/MessageBubble.tsx
index f818bcc..28769a2 100644
--- a/apps/vis/web/src/components/context/MessageBubble.tsx
+++ b/apps/vis/web/src/components/context/MessageBubble.tsx
@@ -1,104 +1,105 @@
 import { useState, type ReactNode } from 'react';
-import type { AnnotatedMessage, ContentPart, ToolCallEntry } from '../../types';
+
+import type {
+  ContentPart,
+  ProjectedMessage,
+  ToolCall,
+} from '../../types';
 import { Pill } from '../shared/Pill';
-import { PersistedOutputLink } from './PersistedOutputLink';
 
 interface MessageBubbleProps {
-  message: AnnotatedMessage;
-  sessionId: string;
+  message: ProjectedMessage;
 }
 
-export function MessageBubble({ message, sessionId }: MessageBubbleProps) {
-  const { role } = message.message;
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const role = message.message.role;
   if (role === 'user') return <UserBubble m={message} />;
   if (role === 'assistant') return <AssistantBubble m={message} />;
-  return <ToolBubble m={message} sessionId={sessionId} />;
+  if (role === 'tool') return <ToolBubble m={message} />;
+  return <SystemBubble m={message} />;
 }
 
-function baseClass(out: boolean): string {
-  return [
-    'relative flex max-w-full min-w-0 flex-col border-l-[3px] bg-surface-1 px-3 py-2',
-    out ? 'opacity-50 line-through decoration-[var(--color-sev-error)] decoration-dashed' : '',
-  ].join(' ');
+function baseClass(): string {
+  return 'relative flex max-w-full min-w-0 flex-col border-l-[3px] bg-surface-1 px-3 py-2';
 }
 
-function UserBubble({ m }: { m: AnnotatedMessage }) {
+function UserBubble({ m }: { m: ProjectedMessage }) {
+  const origin = m.message.origin;
+  const originKind = origin?.kind;
+  const showsOriginBadge =
+    originKind === 'system_trigger' || originKind === 'injection' || originKind === 'hook_result';
   return (
-    <article
-      className={baseClass(m.out_of_context)}
-      style={{ borderLeftColor: 'var(--color-user)' }}
-    >
+    <article className={baseClass()} style={{ borderLeftColor: 'var(--color-user)' }}>
       <header className="mb-1 flex items-center gap-2">
         <Pill tone="user" variant="solid">user</Pill>
-        <span className="font-mono text-[10px] text-fg-3 tabular">seq {m.seq}</span>
-        {m.out_of_context ? <Pill tone="error" variant="outline">out-of-context</Pill> : null}
+        <span className="font-mono text-[10px] text-fg-3 tabular">line {m.lineNo}</span>
+        {showsOriginBadge ? (
+          <Pill tone="meta" variant="outline">{originKind}</Pill>
+        ) : null}
+        {m.message.isError ? <Pill tone="error" variant="outline">error</Pill> : null}
       </header>
       <MessageContent parts={m.message.content} />
     </article>
   );
 }
 
-function AssistantBubble({ m }: { m: AnnotatedMessage }) {
+function AssistantBubble({ m }: { m: ProjectedMessage }) {
   const thinkPart = m.message.content.find((p) => p.type === 'think');
-  const think = thinkPart ? (thinkPart['think'] as string | undefined) : undefined;
-  const textParts = m.message.content.filter((p) => p.type !== 'think');
+  const think = thinkPart && thinkPart.type === 'think' ? thinkPart.think : undefined;
+  const visibleParts = m.message.content.filter((p) => p.type !== 'think');
+  const toolCalls = m.message.toolCalls;
   return (
-    <article
-      className={baseClass(m.out_of_context)}
-      style={{ borderLeftColor: 'var(--color-assistant)' }}
-    >
+    <article className={baseClass()} style={{ borderLeftColor: 'var(--color-assistant)' }}>
       <header className="mb-1 flex items-center gap-2">
         <Pill tone="assistant" variant="solid">assistant</Pill>
-        <span className="font-mono text-[10px] text-fg-3 tabular">seq {m.seq}</span>
+        <span className="font-mono text-[10px] text-fg-3 tabular">line {m.lineNo}</span>
         {think ? <Pill tone="config" variant="outline">think</Pill> : null}
-        {m.message.tool_calls.length > 0 ? (
+        {toolCalls.length > 0 ? (
           <Pill tone="tools" variant="outline">
-            {m.message.tool_calls.length} tool call{m.message.tool_calls.length > 1 ? 's' : ''}
+            {toolCalls.length} tool call{toolCalls.length > 1 ? 's' : ''}
           </Pill>
         ) : null}
-        {m.out_of_context ? <Pill tone="error" variant="outline">out-of-context</Pill> : null}
+        {m.message.partial ? <Pill tone="warning" variant="outline">partial</Pill> : null}
       </header>
       {think ? <ThinkBlock text={think} /> : null}
-      <MessageContent parts={textParts} />
-      {m.message.tool_calls.length > 0 ? (
+      <MessageContent parts={visibleParts} />
+      {toolCalls.length > 0 ? (
         <div className="mt-2 space-y-1">
-          {m.message.tool_calls.map((tc) => <ToolCallCard key={tc.id} call={tc} />)}
+          {toolCalls.map((tc) => (
+            <ToolCallCard key={tc.id} call={tc} />
+          ))}
         </div>
       ) : null}
     </article>
   );
 }
 
-function ToolBubble({ m, sessionId }: { m: AnnotatedMessage; sessionId: string }) {
-  const firstTextPart = m.message.content.find((p) => p.type === 'text');
-  const text = firstTextPart ? ((firstTextPart['text'] as string | undefined) ?? '') : '';
-  const hasPersisted = !!m.persisted_output_path && m.message.tool_call_id;
+function ToolBubble({ m }: { m: ProjectedMessage }) {
   return (
-    <article
-      className={baseClass(m.out_of_context)}
-      style={{ borderLeftColor: 'var(--color-tool)' }}
-    >
+    <article className={baseClass()} style={{ borderLeftColor: 'var(--color-tool)' }}>
       <header className="mb-1 flex items-center gap-2">
         <Pill tone="tool" variant="solid">tool</Pill>
-        {m.message.tool_call_id ? (
+        {m.message.toolCallId ? (
           <span className="font-mono text-[11px] text-fg-1">
-            call {m.message.tool_call_id.slice(0, 12)}
+            call {m.message.toolCallId.slice(0, 12)}
           </span>
         ) : null}
-        <span className="font-mono text-[10px] text-fg-3 tabular">seq {m.seq}</span>
-        {m.out_of_context ? <Pill tone="error" variant="outline">out-of-context</Pill> : null}
+        <span className="font-mono text-[10px] text-fg-3 tabular">line {m.lineNo}</span>
+        {m.message.isError ? <Pill tone="error" variant="outline">error</Pill> : null}
       </header>
-      {hasPersisted ? (
-        <PersistedOutputLink
-          sessionId={sessionId}
-          toolCallId={m.message.tool_call_id!}
-          path={m.persisted_output_path!}
-        />
-      ) : (
-        <pre className="whitespace-pre-wrap break-words font-mono text-[12px] text-fg-1">
-          {text}
-        </pre>
-      )}
+      <MessageContent parts={m.message.content} />
+    </article>
+  );
+}
+
+function SystemBubble({ m }: { m: ProjectedMessage }) {
+  return (
+    <article className={baseClass()} style={{ borderLeftColor: 'var(--color-cat-config)' }}>
+      <header className="mb-1 flex items-center gap-2">
+        <Pill tone="config" variant="solid">system</Pill>
+        <span className="font-mono text-[10px] text-fg-3 tabular">line {m.lineNo}</span>
+      </header>
+      <MessageContent parts={m.message.content} />
     </article>
   );
 }
@@ -108,7 +109,9 @@ function ThinkBlock({ text }: { text: string }) {
   return (
     <div className="mb-2 border border-border bg-surface-0">
       <button
-        onClick={() =>{  setOpen((v) => !v); }}
+        onClick={() => {
+          setOpen((v) => !v);
+        }}
         className="flex w-full items-center gap-2 px-2 py-1 text-left font-mono text-[11px] text-fg-2 hover:text-fg-1"
       >
         <span className="text-fg-3">{open ? '▾' : '▸'}</span>
@@ -124,13 +127,15 @@ function ThinkBlock({ text }: { text: string }) {
   );
 }
 
-function ToolCallCard({ call }: { call: ToolCallEntry }) {
+function ToolCallCard({ call }: { call: ToolCall }) {
   const [open, setOpen] = useState(false);
   const argsStr = call.arguments ?? '';
   return (
     <div className="border border-border bg-surface-0">
       <button
-        onClick={() =>{  setOpen((v) => !v); }}
+        onClick={() => {
+          setOpen((v) => !v);
+        }}
         className="flex w-full items-center gap-2 px-2 py-1 text-left font-mono text-[11px] hover:bg-surface-2"
       >
         <span className="text-fg-3">{open ? '▾' : '▸'}</span>
@@ -158,21 +163,38 @@ function MessageContent({ parts }: { parts: readonly ContentPart[] }): ReactNode
               key={i}
               className="whitespace-pre-wrap break-words font-mono text-[12.5px] leading-[1.55] text-fg-0"
             >
-              {(p['text'] as string) ?? ''}
+              {p.text}
             </pre>
           );
         }
+        if (p.type === 'think') {
+          return <ThinkBlock key={i} text={p.think} />;
+        }
         if (p.type === 'image_url') {
-          const url = (p['image_url'] as { url?: string } | undefined)?.url;
-          return <div key={i} className="text-fg-2 font-mono text-[11px]">[image: {url ?? '—'}]</div>;
+          return (
+            <div key={i} className="font-mono text-[11px] text-fg-2">
+              [image: {p.imageUrl.url}]
+            </div>
+          );
+        }
+        if (p.type === 'audio_url') {
+          return (
+            <div key={i} className="font-mono text-[11px] text-fg-2">
+              [audio: {p.audioUrl.url}]
+            </div>
+          );
         }
         if (p.type === 'video_url') {
-          const url = (p['video_url'] as { url?: string } | undefined)?.url;
-          return <div key={i} className="text-fg-2 font-mono text-[11px]">[video: {url ?? '—'}]</div>;
+          return (
+            <div key={i} className="font-mono text-[11px] text-fg-2">
+              [video: {p.videoUrl.url ?? '—'}]
+            </div>
+          );
         }
+        // Exhaustive — anything else is unexpected for ContentPart.
         return (
-          <div key={i} className="text-fg-3 font-mono text-[11px]">
-            [{p.type}]
+          <div key={i} className="font-mono text-[11px] text-fg-3">
+            [{(p as { type: string }).type}]
           </div>
         );
       })}
diff --git a/apps/vis/web/src/components/context/PersistedOutputLink.tsx b/apps/vis/web/src/components/context/PersistedOutputLink.tsx
deleted file mode 100644
index 598a11b..0000000
--- a/apps/vis/web/src/components/context/PersistedOutputLink.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useState } from 'react';
-import { useToolResult } from '../../hooks/useContext';
-import { formatBytes } from '../shared/SizePreview';
-
-interface PersistedOutputLinkProps {
-  sessionId: string;
-  toolCallId: string;
-  path: string;
-}
-
-export function PersistedOutputLink({
-  sessionId,
-  toolCallId,
-  path,
-}: PersistedOutputLinkProps) {
-  const [load, setLoad] = useState(false);
-  const { data, isLoading, error } = useToolResult(sessionId, toolCallId, load);
-  const basename = path.split('/').pop() ?? path;
-
-  return (
-    <div className="my-1 border border-border bg-surface-0">
-      <button
-        onClick={() =>{  setLoad((v) => !v); }}
-        className="flex w-full items-center gap-2 px-2 py-1 text-left font-mono text-[11px] text-fg-2 hover:bg-surface-2 hover:text-fg-1"
-      >
-        <span className="text-fg-3">{load ? '▾' : '▸'}</span>
-        <span className="pill" style={{
-          backgroundColor: 'color-mix(in oklab, var(--color-compaction) 18%, transparent)',
-          color: 'var(--color-compaction)',
-        }}>
-          persisted
-        </span>
-        <span className="truncate">{basename}</span>
-        {data ? <span className="ml-auto text-fg-3 tabular">{formatBytes(data.size_bytes)}</span> : null}
-      </button>
-      {load ? (
-        <div className="border-t border-border">
-          {isLoading ? (
-            <div className="px-2 py-1 font-mono text-[11px] text-fg-3">loading…</div>
-          ) : error ? (
-            <div className="px-2 py-1 font-mono text-[11px] text-[var(--color-sev-error)]">
-              {(error).message}
-            </div>
-          ) : data ? (
-            <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-words px-2 py-1 font-mono text-[12px] text-fg-1">
-              {data.content}
-            </pre>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/apps/vis/web/src/components/files/FilesTab.tsx b/apps/vis/web/src/components/files/FilesTab.tsx
deleted file mode 100644
index f3bae94..0000000
--- a/apps/vis/web/src/components/files/FilesTab.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-
-import { useToolResult } from '../../hooks/useContext';
-import { useArchive } from '../../hooks/useWire';
-import type { SessionDetail } from '../../types';
-import { Drawer } from '../shared/Drawer';
-import { Pill } from '../shared/Pill';
-import { formatBytes } from '../shared/SizePreview';
-import { WireTab } from '../wire/WireTab';
-
-interface FilesTabProps {
-  sessionId: string;
-  detail: SessionDetail;
-}
-
-export function FilesTab({ sessionId, detail }: FilesTabProps) {
-  const [openArchive, setOpenArchive] = useState<string | null>(null);
-  const [openResult, setOpenResult] = useState<string | null>(null);
-
-  return (
-    <div className="min-h-0 flex-1 overflow-y-auto p-4">
-      {/* Archives */}
-      <section>
-        <h2 className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
-          wire archives · {detail.archive_files.length}
-        </h2>
-        {detail.archive_files.length === 0 ? (
-          <p className="mt-2 font-mono text-[12px] text-fg-3">no compaction archives</p>
-        ) : (
-          <ul className="mt-2 border border-border bg-surface-0">
-            {detail.archive_files.map((f) => (
-              <li
-                key={f}
-                className="flex items-center gap-3 border-b border-border px-3 py-2 last:border-b-0"
-              >
-                <Pill tone="compaction" variant="soft">
-                  archive
-                </Pill>
-                <span className="font-mono text-[12px] text-fg-0">{f}</span>
-                <button
-                  onClick={() =>{  setOpenArchive(f); }}
-                  className="ml-auto border border-border px-2 py-0.5 font-mono text-[11px] text-fg-2 hover:border-border-strong hover:text-fg-0"
-                >
-                  view records
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-
-      {/* External tool results */}
-      <section className="mt-6">
-        <h2 className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
-          external tool results · {detail.tool_result_ids.length}
-        </h2>
-        {detail.tool_result_ids.length === 0 ? (
-          <p className="mt-2 font-mono text-[12px] text-fg-3">none</p>
-        ) : (
-          <ul className="mt-2 border border-border bg-surface-0">
-            {detail.tool_result_ids.map((id) => (
-              <li
-                key={id}
-                className="flex items-center gap-3 border-b border-border px-3 py-2 last:border-b-0"
-              >
-                <Pill tone="tool" variant="soft">
-                  file
-                </Pill>
-                <span className="truncate font-mono text-[12px] text-fg-0">{id}.txt</span>
-                <button
-                  onClick={() =>{  setOpenResult(id); }}
-                  className="ml-auto border border-border px-2 py-0.5 font-mono text-[11px] text-fg-2 hover:border-border-strong hover:text-fg-0"
-                >
-                  view
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-
-      {/* Subagent directories — click a tile to drill into that subagent's
-          own wire + context + meta. Mirrors the Subagents tab tree but in
-          a flat, filesystem-ish view. */}
-      <section className="mt-6">
-        <h2 className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
-          subagent directories · {detail.subagent_ids.length}
-        </h2>
-        {detail.subagent_ids.length === 0 ? (
-          <p className="mt-2 font-mono text-[12px] text-fg-3">none</p>
-        ) : (
-          <ul className="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2">
-            {detail.subagent_ids.map((id) => (
-              <li key={id}>
-                <Link
-                  to={`/sessions/${sessionId}/subagents/${id}`}
-                  className="group block border border-border bg-surface-0 px-3 py-2 transition-colors hover:border-border-strong hover:bg-surface-1"
-                >
-                  <div className="flex items-center gap-2">
-                    <Pill tone="subagent" variant="soft">
-                      subagent
-                    </Pill>
-                    <span className="truncate font-mono text-[12px] text-fg-0">
-                      {id.replace(/^sub_/, '').slice(0, 12)}
-                    </span>
-                    <span className="ml-auto font-mono text-[10px] text-fg-3 group-hover:text-fg-1">
-                      open →
-                    </span>
-                  </div>
-                  <div className="mt-1 truncate font-mono text-[10.5px] text-fg-3">{id}</div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-
-      {openArchive ? (
-        <ArchiveDrawer
-          sessionId={sessionId}
-          filename={openArchive}
-          onClose={() =>{  setOpenArchive(null); }}
-        />
-      ) : null}
-      {openResult ? (
-        <ToolResultDrawer
-          sessionId={sessionId}
-          toolCallId={openResult}
-          onClose={() =>{  setOpenResult(null); }}
-        />
-      ) : null}
-    </div>
-  );
-}
-
-function ArchiveDrawer({
-  sessionId,
-  filename,
-  onClose,
-}: {
-  sessionId: string;
-  filename: string;
-  onClose: () => void;
-}) {
-  const { data, isLoading, error } = useArchive(sessionId, filename);
-  return (
-    <Drawer open onClose={onClose} title={<span>archive · {filename}</span>} width={900}>
-      {isLoading ? (
-        <div className="p-4 font-mono text-[11px] text-fg-3">loading…</div>
-      ) : error ? (
-        <div className="p-4 font-mono text-[11px] text-[var(--color-sev-error)]">
-          {(error).message}
-        </div>
-      ) : data ? (
-        <WireTab
-          records={data.records}
-          health={data.health}
-          brokenReason={data.broken_reason}
-          warnings={data.warnings}
-        />
-      ) : null}
-    </Drawer>
-  );
-}
-
-function ToolResultDrawer({
-  sessionId,
-  toolCallId,
-  onClose,
-}: {
-  sessionId: string;
-  toolCallId: string;
-  onClose: () => void;
-}) {
-  const { data, isLoading, error } = useToolResult(sessionId, toolCallId, true);
-  return (
-    <Drawer
-      open
-      onClose={onClose}
-      title={
-        <span>
-          tool-result · {toolCallId}.txt
-          {data ? <span className="ml-2 text-fg-3">{formatBytes(data.size_bytes)}</span> : null}
-        </span>
-      }
-      width={780}
-    >
-      {isLoading ? (
-        <div className="p-4 font-mono text-[11px] text-fg-3">loading…</div>
-      ) : error ? (
-        <div className="p-4 font-mono text-[11px] text-[var(--color-sev-error)]">
-          {(error).message}
-        </div>
-      ) : data ? (
-        <pre className="whitespace-pre-wrap break-words p-4 font-mono text-[12.5px] text-fg-0">
-          {data.content}
-        </pre>
-      ) : null}
-    </Drawer>
-  );
-}
diff --git a/apps/vis/web/src/components/sessions/SessionCard.tsx b/apps/vis/web/src/components/sessions/SessionCard.tsx
index 590c158..3def306 100644
--- a/apps/vis/web/src/components/sessions/SessionCard.tsx
+++ b/apps/vis/web/src/components/sessions/SessionCard.tsx
@@ -2,7 +2,6 @@ import type { MouseEvent } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import type { SessionSummary } from '../../types';
 import { formatRelativeTime } from '../../util/time';
-import { Pill } from '../shared/Pill';
 
 interface SessionCardProps {
   session: SessionSummary;
@@ -12,13 +11,13 @@ interface SessionCardProps {
 
 export function SessionCard({ session, onDelete, deleting }: SessionCardProps) {
   const { sessionId } = useParams<{ sessionId: string }>();
-  const selected = sessionId === session.session_id;
-  const dirty = session.last_exit_code === 'dirty';
-  const workspaceLabel = session.workspace_dir
-    ? session.workspace_dir.split('/').slice(-2).join('/')
+  const selected = sessionId === session.sessionId;
+  const workspaceLabel = session.workDir
+    ? session.workDir.split('/').slice(-2).join('/')
     : '(no workspace)';
-  const shortId = session.session_id.replace(/^session_/, '').slice(0, 10);
-  const title = session.title ?? session.custom_title;
+  const shortId = session.sessionId.replace(/^session_/, '').slice(0, 10);
+  const title = session.title;
+  const subagentCount = Math.max(0, session.agentCount - 1);
 
   function handleDeleteClick(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
@@ -30,56 +29,35 @@ export function SessionCard({ session, onDelete, deleting }: SessionCardProps) {
     <div
       className={[
         'group relative border-b border-border transition-colors',
-        selected
-          ? 'bg-surface-2'
-          : 'hover:bg-surface-1',
-        session.archived ? 'opacity-60' : '',
+        selected ? 'bg-surface-2' : 'hover:bg-surface-1',
       ].join(' ')}
     >
       {selected ? (
         <span className="absolute inset-y-0 left-0 w-[2px] bg-[var(--color-cat-conversation)]" />
       ) : null}
-      <Link to={`/sessions/${session.session_id}`} className="block px-3 py-2 pr-10">
+      <Link to={`/sessions/${session.sessionId}`} className="block px-3 py-2 pr-10">
         <div className="flex items-center justify-between gap-2">
           <div className="flex min-w-0 items-center gap-2">
             <span
               className="inline-block h-[7px] w-[7px] shrink-0 rounded-full"
-              style={{
-                backgroundColor: dirty ? 'var(--color-sev-warning)' : 'var(--color-fg-3)',
-              }}
-              title={dirty ? 'dirty exit' : 'clean or unknown exit'}
+              style={{ backgroundColor: 'var(--color-fg-3)' }}
             />
             <span className="shrink-0 font-mono text-[12px] text-fg-0">{shortId}</span>
-            {session.model ? (
-              <Pill tone="config" variant="soft" className="!py-0">
-                {session.model}
-              </Pill>
-            ) : null}
-            {session.archived ? (
-              <Pill tone="warning" variant="soft" className="!py-0">
-                archived
-              </Pill>
-            ) : null}
           </div>
           <span className="shrink-0 font-mono text-[10.5px] text-fg-3 tabular">
-            {formatRelativeTime(session.updated_at)}
+            {formatRelativeTime(session.updatedAt)}
           </span>
         </div>
         <div className="mt-1 flex items-center gap-3 font-mono text-[10.5px] text-fg-2">
-          <span className="truncate" title={session.workspace_dir ?? ''}>
+          <span className="truncate" title={session.workDir ?? ''}>
             {workspaceLabel}
           </span>
           <span className="tabular text-fg-3">
-            {session.wire_record_count}ev
+            {session.mainWireRecordCount}ev
           </span>
-          {session.subagent_count > 0 ? (
+          {subagentCount > 0 ? (
             <span className="tabular text-[var(--color-cat-subagent)]">
-              {session.subagent_count}sub
-            </span>
-          ) : null}
-          {session.archive_count > 0 ? (
-            <span className="tabular text-[var(--color-compaction)]">
-              {session.archive_count}arch
+              {subagentCount}sub
             </span>
           ) : null}
           {session.health !== 'ok' ? (
@@ -93,9 +71,9 @@ export function SessionCard({ session, onDelete, deleting }: SessionCardProps) {
             {title}
           </div>
         ) : null}
-        {session.last_prompt ? (
-          <div className="mt-1 truncate font-mono text-[10.5px] text-fg-3" title={session.last_prompt}>
-            prompt · {session.last_prompt}
+        {session.lastPrompt ? (
+          <div className="mt-1 truncate font-mono text-[10.5px] text-fg-3" title={session.lastPrompt}>
+            prompt · {session.lastPrompt}
           </div>
         ) : null}
       </Link>
@@ -104,8 +82,8 @@ export function SessionCard({ session, onDelete, deleting }: SessionCardProps) {
         onClick={handleDeleteClick}
         disabled={deleting}
         className="absolute right-2 top-2 flex h-5 w-5 items-center justify-center border border-transparent text-fg-3 transition-colors hover:border-[var(--color-sev-error)] hover:text-[var(--color-sev-error)] disabled:cursor-not-allowed disabled:opacity-40"
-        title={`Delete session ${session.session_id}`}
-        aria-label={`Delete session ${session.session_id}`}
+        title={`Delete session ${session.sessionId}`}
+        aria-label={`Delete session ${session.sessionId}`}
       >
         <TrashIcon />
       </button>
diff --git a/apps/vis/web/src/components/sessions/SessionFilter.tsx b/apps/vis/web/src/components/sessions/SessionFilter.tsx
index 79581c5..4ac69d6 100644
--- a/apps/vis/web/src/components/sessions/SessionFilter.tsx
+++ b/apps/vis/web/src/components/sessions/SessionFilter.tsx
@@ -3,17 +3,12 @@ import type { SessionSortKey, HealthFilter } from './SessionRail';
 interface SessionFilterProps {
   search: string;
   onSearchChange: (v: string) => void;
-  showArchived: boolean;
-  onShowArchivedChange: (v: boolean) => void;
   sortKey: SessionSortKey;
   onSortChange: (v: SessionSortKey) => void;
   healthFilter: HealthFilter;
   onHealthChange: (v: HealthFilter) => void;
   totalCount: number;
   filteredCount: number;
-  onClearSessions: () => void;
-  clearDisabled: boolean;
-  clearBusy: boolean;
 }
 
 const SORT_OPTIONS: { value: SessionSortKey; label: string }[] = [
@@ -26,24 +21,20 @@ const SORT_OPTIONS: { value: SessionSortKey; label: string }[] = [
 const HEALTH_OPTIONS: { value: HealthFilter; label: string }[] = [
   { value: 'all', label: 'any' },
   { value: 'ok', label: 'ok' },
-  { value: 'broken', label: 'broken' },
-  { value: 'missing_wire', label: 'no wire' },
+  { value: 'broken_state', label: 'broken' },
+  { value: 'missing_main_wire', label: 'no wire' },
+  { value: 'unsupported_protocol', label: 'old proto' },
 ];
 
 export function SessionFilter({
   search,
   onSearchChange,
-  showArchived,
-  onShowArchivedChange,
   sortKey,
   onSortChange,
   healthFilter,
   onHealthChange,
   totalCount,
   filteredCount,
-  onClearSessions,
-  clearDisabled,
-  clearBusy,
 }: SessionFilterProps) {
   return (
     <div className="border-b border-border bg-surface-1 px-3 py-2">
@@ -51,7 +42,7 @@ export function SessionFilter({
         <input
           type="text"
           value={search}
-          onChange={(e) =>{  onSearchChange(e.target.value); }}
+          onChange={(e) => { onSearchChange(e.target.value); }}
           placeholder="search id / title / workspace"
           className="w-full border border-border bg-surface-0 px-2 py-1 font-mono text-[12px] text-fg-0 placeholder:text-fg-3 focus:border-border-strong focus:outline-none"
         />
@@ -61,7 +52,7 @@ export function SessionFilter({
           <span className="text-fg-3">sort</span>
           <select
             value={sortKey}
-            onChange={(e) =>{  onSortChange(e.target.value as SessionSortKey); }}
+            onChange={(e) => { onSortChange(e.target.value as SessionSortKey); }}
             className="flex-1 border border-border bg-surface-0 px-1 py-0.5 text-fg-1 focus:border-border-strong focus:outline-none"
           >
             {SORT_OPTIONS.map((o) => (
@@ -75,7 +66,7 @@ export function SessionFilter({
           <span className="text-fg-3">health</span>
           <select
             value={healthFilter}
-            onChange={(e) =>{  onHealthChange(e.target.value as HealthFilter); }}
+            onChange={(e) => { onHealthChange(e.target.value as HealthFilter); }}
             className="flex-1 border border-border bg-surface-0 px-1 py-0.5 text-fg-1 focus:border-border-strong focus:outline-none"
           >
             {HEALTH_OPTIONS.map((o) => (
@@ -86,42 +77,11 @@ export function SessionFilter({
           </select>
         </label>
       </div>
-      <div className="mt-2 flex items-center justify-between">
-        <label className="flex items-center gap-1.5 font-mono text-[10.5px] text-fg-2 hover:text-fg-1 select-none">
-          <input
-            type="checkbox"
-            checked={showArchived}
-            onChange={(e) =>{  onShowArchivedChange(e.target.checked); }}
-            className="accent-[var(--color-cat-conversation)]"
-          />
-          show archived
-        </label>
-        <div className="flex items-center gap-2">
-          <span className="font-mono text-[10px] text-fg-3 tabular">
-            {filteredCount} / {totalCount}
-          </span>
-          <button
-            type="button"
-            onClick={onClearSessions}
-            disabled={clearDisabled}
-            className="flex items-center gap-1 border border-border px-1.5 py-0.5 font-mono text-[10px] text-fg-2 transition-colors hover:border-[var(--color-sev-error)] hover:text-[var(--color-sev-error)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-border disabled:hover:text-fg-2"
-            title="Delete all sessions shown by vis"
-          >
-            <TrashIcon />
-            {clearBusy ? 'clearing' : 'clear all'}
-          </button>
-        </div>
+      <div className="mt-2 flex items-center justify-end">
+        <span className="font-mono text-[10px] text-fg-3 tabular">
+          {filteredCount} / {totalCount}
+        </span>
       </div>
     </div>
   );
 }
-
-function TrashIcon() {
-  return (
-    <svg width="10" height="10" viewBox="0 0 12 12" aria-hidden="true">
-      <path d="M2 3 H10" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />
-      <path d="M4 3 V2 H8 V3" stroke="currentColor" strokeWidth="1.2" fill="none" />
-      <path d="M3 4 H9 L8.5 10 H3.5 Z" stroke="currentColor" strokeWidth="1.2" fill="none" />
-    </svg>
-  );
-}
diff --git a/apps/vis/web/src/components/sessions/SessionRail.tsx b/apps/vis/web/src/components/sessions/SessionRail.tsx
index 2a73817..69ddfe9 100644
--- a/apps/vis/web/src/components/sessions/SessionRail.tsx
+++ b/apps/vis/web/src/components/sessions/SessionRail.tsx
@@ -1,40 +1,38 @@
 import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useClearSessions, useDeleteSession, useSessions } from '../../hooks/useSession';
-import type { SessionSummary } from '../../types';
+import { useDeleteSession, useSessions } from '../../hooks/useSession';
+import type { SessionSummary, SessionHealth } from '../../types';
 import { SessionCard } from './SessionCard';
 import { SessionFilter } from './SessionFilter';
 
 export type SessionSortKey = 'recent' | 'oldest' | 'most_records' | 'most_subagents';
-export type HealthFilter = 'all' | 'ok' | 'broken' | 'missing_wire';
+export type HealthFilter = 'all' | SessionHealth;
 
 function workspaceKey(s: SessionSummary): string {
-  if (!s.workspace_dir) return '(no workspace)';
-  return s.workspace_dir.split('/').slice(-2).join('/');
+  if (!s.workDir) return '(no workspace)';
+  return s.workDir.split('/').slice(-2).join('/');
 }
 
 function sortSessions(sessions: readonly SessionSummary[], key: SessionSortKey): SessionSummary[] {
   switch (key) {
     case 'recent':
-      return sessions.toSorted((a, b) => b.updated_at - a.updated_at);
+      return sessions.toSorted((a, b) => b.updatedAt - a.updatedAt);
     case 'oldest':
-      return sessions.toSorted((a, b) => a.created_at - b.created_at);
+      return sessions.toSorted((a, b) => a.createdAt - b.createdAt);
     case 'most_records':
-      return sessions.toSorted((a, b) => b.wire_record_count - a.wire_record_count);
+      return sessions.toSorted((a, b) => b.mainWireRecordCount - a.mainWireRecordCount);
     case 'most_subagents':
-      return sessions.toSorted((a, b) => b.subagent_count - a.subagent_count);
+      return sessions.toSorted((a, b) => (b.agentCount - 1) - (a.agentCount - 1));
   }
 }
 
 export function SessionRail() {
   const { data, isLoading, error } = useSessions();
   const deleteSession = useDeleteSession();
-  const clearSessions = useClearSessions();
   const navigate = useNavigate();
   const { sessionId } = useParams<{ sessionId: string }>();
   const [search, setSearch] = useState('');
-  const [showArchived, setShowArchived] = useState(false);
   const [sortKey, setSortKey] = useState<SessionSortKey>('recent');
   const [healthFilter, setHealthFilter] = useState<HealthFilter>('all');
 
@@ -42,27 +40,20 @@ export function SessionRail() {
     if (!data) return [];
     const q = search.trim().toLowerCase();
     return data.filter((s) => {
-      if (!showArchived && s.archived) return false;
       if (healthFilter !== 'all' && s.health !== healthFilter) return false;
       if (!q) return true;
       const hay = [
-        s.session_id,
+        s.sessionId,
         s.title ?? '',
-        s.last_prompt ?? '',
-        s.custom_title ?? '',
-        s.workspace_dir ?? '',
-        s.model ?? '',
-        ...s.tags,
+        s.lastPrompt ?? '',
+        s.workDir ?? '',
       ]
         .join(' ')
         .toLowerCase();
       return hay.includes(q);
     });
-  }, [data, search, showArchived, healthFilter]);
+  }, [data, search, healthFilter]);
 
-  // Grouping-by-workspace only makes sense when sorted by time — for any
-  // other sort the user asked for a particular total ordering across
-  // sessions, so we honour it and display a flat list.
   const grouped = useMemo(() => {
     if (sortKey !== 'recent') return null;
     const map = new Map<string, SessionSummary[]>();
@@ -77,12 +68,12 @@ export function SessionRail() {
     }
     return [...map.entries()]
       .map(([group, items]) => {
-        const sorted = items.toSorted((a, b) => b.updated_at - a.updated_at);
+        const sorted = items.toSorted((a, b) => b.updatedAt - a.updatedAt);
         return [group, sorted] as const;
       })
       .toSorted(([, a], [, b]) => {
-        const ua = a[0]?.updated_at ?? 0;
-        const ub = b[0]?.updated_at ?? 0;
+        const ua = a[0]?.updatedAt ?? 0;
+        const ub = b[0]?.updatedAt ?? 0;
         return ub - ua;
       });
   }, [filtered, sortKey]);
@@ -93,13 +84,13 @@ export function SessionRail() {
   );
 
   async function handleDeleteSession(session: SessionSummary) {
-    const label = session.title ?? session.last_prompt ?? session.session_id;
+    const label = session.title ?? session.lastPrompt ?? session.sessionId;
     if (!window.confirm(`Delete session "${label}"?\n\nThis removes its files from KIMI_CODE_HOME.`)) {
       return;
     }
     try {
-      await deleteSession.mutateAsync(session.session_id);
-      if (sessionId === session.session_id) {
+      await deleteSession.mutateAsync(session.sessionId);
+      if (sessionId === session.sessionId) {
         void navigate('/');
       }
     } catch (deleteError) {
@@ -107,48 +98,24 @@ export function SessionRail() {
     }
   }
 
-  async function handleClearSessions() {
-    const total = data?.length ?? 0;
-    if (total === 0) return;
-    if (!window.confirm(`Clear all ${total} sessions shown by vis?\n\nThis removes their files from KIMI_CODE_HOME.`)) {
-      return;
-    }
-    try {
-      const result = await clearSessions.mutateAsync();
-      void navigate('/');
-      if (result.failed.length > 0) {
-        window.alert(`Deleted ${result.deleted_count} sessions; ${result.failed.length} failed.`);
-      }
-    } catch (clearError) {
-      window.alert(clearError instanceof Error ? clearError.message : String(clearError));
-    }
-  }
-
   return (
     <aside className="flex h-full min-h-0 w-[320px] shrink-0 flex-col border-r border-border bg-surface-1">
       <SessionFilter
         search={search}
         onSearchChange={setSearch}
-        showArchived={showArchived}
-        onShowArchivedChange={setShowArchived}
         sortKey={sortKey}
         onSortChange={setSortKey}
         healthFilter={healthFilter}
         onHealthChange={setHealthFilter}
         totalCount={data?.length ?? 0}
         filteredCount={filtered.length}
-        onClearSessions={() => {
-          void handleClearSessions();
-        }}
-        clearDisabled={(data?.length ?? 0) === 0 || clearSessions.isPending}
-        clearBusy={clearSessions.isPending}
       />
       <div className="min-h-0 flex-1 overflow-y-auto">
         {isLoading ? (
           <div className="p-3 font-mono text-[11px] text-fg-3">loading…</div>
         ) : error ? (
           <div className="p-3 font-mono text-[11px] text-[var(--color-sev-error)]">
-            {(error).message}
+            {error.message}
           </div>
         ) : filtered.length === 0 ? (
           <div className="p-3 font-mono text-[11px] text-fg-3">no sessions match</div>
@@ -160,12 +127,12 @@ export function SessionRail() {
               </div>
               {items.map((s) => (
                 <SessionCard
-                  key={s.session_id}
+                  key={s.sessionId}
                   session={s}
                   onDelete={(target) => {
                     void handleDeleteSession(target);
                   }}
-                  deleting={deleteSession.isPending && deleteSession.variables === s.session_id}
+                  deleting={deleteSession.isPending && deleteSession.variables === s.sessionId}
                 />
               ))}
             </div>
@@ -173,12 +140,12 @@ export function SessionRail() {
         ) : (
           flat?.map((s) => (
             <SessionCard
-              key={s.session_id}
+              key={s.sessionId}
               session={s}
               onDelete={(target) => {
                 void handleDeleteSession(target);
               }}
-              deleting={deleteSession.isPending && deleteSession.variables === s.session_id}
+              deleting={deleteSession.isPending && deleteSession.variables === s.sessionId}
             />
           ))
         )}
diff --git a/apps/vis/web/src/components/state/StateTab.tsx b/apps/vis/web/src/components/state/StateTab.tsx
index 39a105d..ca1cbe9 100644
--- a/apps/vis/web/src/components/state/StateTab.tsx
+++ b/apps/vis/web/src/components/state/StateTab.tsx
@@ -1,217 +1,181 @@
-import { useState, type ReactNode } from 'react';
+import { useMemo } from 'react';
 
-import type { SessionState } from '../../types';
 import { formatAbsoluteTime, formatRelativeTime } from '../../util/time';
 import { CopyButton } from '../shared/CopyButton';
 import { JsonViewer } from '../shared/JsonViewer';
+import { Pill } from '../shared/Pill';
 
 interface StateTabProps {
-  state: SessionState;
-  protocolVersion: string | null;
+  state: unknown;
 }
 
-/** Keys whose values should be interpreted as epoch milliseconds and
- *  decorated with both an absolute time and "2h ago" style relative label.
- *  Matches the shape of state.json written by `@moonshot-ai/agent-core`. */
-const EPOCH_MS_KEYS = new Set(['created_at', 'updated_at', 'last_turn_time']);
-
-/** Keys whose values tend to be long paths worth copying with one click. */
-const COPY_KEYS = new Set(['workspace_dir', 'plan_slug', 'session_id']);
+interface StateJsonShape {
+  title?: string;
+  isCustomTitle?: boolean;
+  lastPrompt?: string;
+  forkedFrom?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  agents?: Record<string, unknown>;
+  custom?: Record<string, unknown> & { imported_from_kimi_cli?: boolean };
+}
 
-export function StateTab({ state, protocolVersion }: StateTabProps) {
-  const [showRaw, setShowRaw] = useState(false);
-  const entries = Object.entries(state);
+/** State tab — renders the raw `state.json` blob from session detail.
+ *  At the top, a handful of highlight cards surface the most-asked fields
+ *  (title / lastPrompt / created / updated / agent count). Below that, the
+ *  full JSON is shown via the shared JsonViewer so any custom fields the
+ *  upstream writer adds remain readable without code changes. */
+export function StateTab({ state }: StateTabProps) {
+  const s = useMemo<StateJsonShape>(() => {
+    return (state ?? {}) as StateJsonShape;
+  }, [state]);
+
+  const createdMs = parseIso(s.createdAt);
+  const updatedMs = parseIso(s.updatedAt);
+  const agentIds = s.agents !== undefined ? Object.keys(s.agents) : [];
+  const importedFromKimiCli = s.custom?.imported_from_kimi_cli === true;
 
   return (
     <div className="min-h-0 flex-1 overflow-y-auto p-4">
       <div className="flex items-center justify-between">
         <div className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
           state.json
-          {protocolVersion ? ` · wire protocol ${protocolVersion}` : ''}
-        </div>
-        <div className="flex items-center gap-3">
-          <CopyButton value={JSON.stringify(state, null, 2)} label="copy json" />
-          <button
-            onClick={() =>{  setShowRaw((v) => !v); }}
-            className="font-mono text-[10px] text-fg-3 hover:text-fg-1"
-          >
-            {showRaw ? '[ hide raw ]' : '[ {…} raw json ]'}
-          </button>
         </div>
+        <CopyButton value={JSON.stringify(s, null, 2)} label="copy json" />
       </div>
 
-      <DurationRow state={state} />
-
-      <div className="mt-4 border border-border bg-surface-0">
-        <table className="w-full font-mono text-[12px]">
-          <tbody>
-            {entries.map(([k, v]) => (
-              <StateRow key={k} keyName={k} value={v} />
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {showRaw ? (
-        <div className="mt-4 border border-border bg-surface-0 p-3">
-          <JsonViewer value={state} defaultOpenDepth={3} />
+      {importedFromKimiCli ? (
+        <div className="mt-3 border border-[var(--color-sev-warning)] bg-[color-mix(in_oklab,var(--color-sev-warning)_10%,transparent)] px-3 py-2 font-mono text-[11px] text-[var(--color-sev-warning)]">
+          warning · this session is marked
+          <code className="mx-1 px-1 bg-surface-0">imported_from_kimi_cli</code>
+          and would normally be filtered out of the list.
         </div>
       ) : null}
-    </div>
-  );
-}
 
-/** Derive a human duration from created_at + updated_at when both are
- *  valid epoch-ms numbers. Rendered just under the header as a single dim
- *  line — omitted silently when data is missing. */
-function DurationRow({ state }: { state: SessionState }) {
-  const created = state.created_at;
-  const updated = state.updated_at;
-  if (typeof created !== 'number' || typeof updated !== 'number') return null;
-  if (updated < created) return null;
-  const ms = updated - created;
-  return (
-    <div className="mt-2 font-mono text-[11px] text-fg-3">
-      duration <span className="text-fg-1">{formatDuration(ms)}</span>
-      {' · '}
-      from <span className="text-fg-1">{formatAbsoluteTime(created)}</span>
-      {' → '}
-      <span className="text-fg-1">{formatAbsoluteTime(updated)}</span>
-    </div>
-  );
-}
-
-function StateRow({ keyName, value }: { keyName: string; value: unknown }) {
-  return (
-    <tr className="border-b border-border last:border-b-0 align-top">
-      <td className="w-[200px] border-r border-border bg-surface-1 px-3 py-1.5 text-right text-fg-2">
-        {keyName}
-      </td>
-      <td className="px-3 py-1.5 text-fg-0 break-words">
-        <ValueCell keyName={keyName} value={value} />
-      </td>
-    </tr>
-  );
-}
-
-function ValueCell({ keyName, value }: { keyName: string; value: unknown }) {
-  if (value === null || value === undefined) return <span className="text-fg-3">null</span>;
-
-  if (typeof value === 'boolean') {
-    return (
-      <span className={value ? 'text-[var(--color-sev-success)]' : 'text-fg-3'}>
-        {String(value)}
-      </span>
-    );
-  }
+      {/* Highlight cards */}
+      <div className="mt-3 grid grid-cols-1 gap-2 md:grid-cols-2">
+        <Card label="title">
+          {s.title !== undefined && s.title !== '' ? (
+            <span className="font-mono text-[12px] text-fg-0">"{s.title}"</span>
+          ) : (
+            <span className="font-mono text-[12px] text-fg-3">(none)</span>
+          )}
+          {s.isCustomTitle === true ? (
+            <Pill tone="config" variant="outline">
+              custom
+            </Pill>
+          ) : null}
+        </Card>
+
+        <Card label="forkedFrom">
+          {s.forkedFrom !== undefined && s.forkedFrom !== '' ? (
+            <span className="font-mono text-[12px] text-fg-0 break-all">
+              {s.forkedFrom}
+            </span>
+          ) : (
+            <span className="font-mono text-[12px] text-fg-3">(none)</span>
+          )}
+        </Card>
 
-  if (typeof value === 'number') {
-    if (EPOCH_MS_KEYS.has(keyName) && value > 1_000_000_000_000) {
-      return (
-        <span className="flex flex-wrap items-center gap-2">
-          <span className="text-[var(--color-sev-info)] tabular">{formatAbsoluteTime(value)}</span>
-          <span className="text-fg-3">·</span>
-          <span className="text-fg-2">{formatRelativeTime(value)}</span>
-          <span className="text-fg-3">·</span>
-          <span className="text-fg-3 tabular">{value}</span>
-        </span>
-      );
-    }
-    return <span className="text-[var(--color-sev-info)] tabular">{value}</span>;
-  }
+        <Card label="createdAt">
+          <TsValue ms={createdMs} raw={s.createdAt} />
+        </Card>
 
-  if (typeof value === 'string') {
-    const withCopy = COPY_KEYS.has(keyName);
-    return (
-      <span className="flex flex-wrap items-center gap-2">
-        <span className="text-[var(--color-cat-ephemeral)] break-all">"{value}"</span>
-        {withCopy ? <CopyButton value={value} /> : null}
-      </span>
-    );
-  }
+        <Card label="updatedAt">
+          <TsValue ms={updatedMs} raw={s.updatedAt} />
+        </Card>
 
-  if (Array.isArray(value)) {
-    if (value.length === 0) return <span className="text-fg-3">[]</span>;
-    // Arrays of primitives render inline; arrays of objects use JsonViewer.
-    const allPrim = value.every((v) => typeof v !== 'object' || v === null);
-    if (allPrim) {
-      return (
-        <span className="flex flex-wrap items-center gap-1">
-          {(value as unknown[]).map((v, i) => (
+        <Card label="lastPrompt">
+          {s.lastPrompt !== undefined && s.lastPrompt !== '' ? (
             <span
-              key={i}
-              className="border border-border bg-surface-1 px-1.5 py-0.5 text-[11px] text-fg-1"
+              className="font-mono text-[12px] text-fg-0 line-clamp-3"
+              title={s.lastPrompt}
             >
-              {typeof v === 'string' ? v : String(v)}
+              {s.lastPrompt}
             </span>
-          ))}
-        </span>
-      );
-    }
-    return <JsonViewer value={value} defaultOpenDepth={2} />;
-  }
+          ) : (
+            <span className="font-mono text-[12px] text-fg-3">(none)</span>
+          )}
+        </Card>
+
+        <Card label={`agents (${agentIds.length})`}>
+          {agentIds.length === 0 ? (
+            <span className="font-mono text-[12px] text-fg-3">(none)</span>
+          ) : (
+            <span className="flex flex-wrap items-center gap-1">
+              {agentIds.map((id) => (
+                <span
+                  key={id}
+                  className="border border-border bg-surface-1 px-1.5 py-0.5 font-mono text-[11px] text-fg-1"
+                >
+                  {id}
+                </span>
+              ))}
+            </span>
+          )}
+        </Card>
+      </div>
 
-  // Nested object: render as a compact sub-table so fields like `producer`
-  // read as structured data instead of a JSON.stringify blob.
-  return <NestedObject value={value as Record<string, unknown>} />;
+      {/* Custom blob */}
+      <section className="mt-6">
+        <h3 className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
+          custom
+        </h3>
+        <div className="mt-2 border border-border bg-surface-0 p-3">
+          {s.custom === undefined || Object.keys(s.custom).length === 0 ? (
+            <span className="font-mono text-[11px] text-fg-3">(empty)</span>
+          ) : (
+            <JsonViewer value={s.custom} defaultOpenDepth={2} />
+          )}
+        </div>
+      </section>
+
+      {/* Raw JSON */}
+      <section className="mt-6">
+        <h3 className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
+          raw state.json
+        </h3>
+        <div className="mt-2 border border-border bg-surface-0 p-3">
+          <JsonViewer value={s} defaultOpenDepth={2} />
+        </div>
+      </section>
+    </div>
+  );
 }
 
-function NestedObject({ value }: { value: Record<string, unknown> }) {
-  const entries = Object.entries(value);
-  if (entries.length === 0) return <span className="text-fg-3">{'{}'}</span>;
+function Card({ label, children }: { label: string; children: import('react').ReactNode }) {
   return (
-    <div className="inline-block border border-border bg-surface-1">
-      <table className="font-mono text-[11.5px]">
-        <tbody>
-          {entries.map(([k, v]) => (
-            <tr key={k} className="border-b border-border last:border-b-0 align-top">
-              <td className="border-r border-border px-2 py-0.5 text-right text-fg-3">{k}</td>
-              <td className="px-2 py-0.5 text-fg-0 break-all">
-                <NestedValue value={v} />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+    <div className="border border-border bg-surface-0 px-3 py-2">
+      <div className="font-mono text-[10px] uppercase tracking-[0.1em] text-fg-3">
+        {label}
+      </div>
+      <div className="mt-1 flex flex-wrap items-center gap-2">{children}</div>
     </div>
   );
 }
 
-function NestedValue({ value }: { value: unknown }): ReactNode {
-  if (value === null || value === undefined) return <span className="text-fg-3">null</span>;
-  if (typeof value === 'boolean') {
-    return (
-      <span className={value ? 'text-[var(--color-sev-success)]' : 'text-fg-3'}>
-        {String(value)}
-      </span>
+function TsValue({ ms, raw }: { ms: number | null; raw: string | undefined }) {
+  if (ms === null) {
+    return raw !== undefined && raw !== '' ? (
+      <span className="font-mono text-[12px] text-fg-3 break-all">{raw}</span>
+    ) : (
+      <span className="font-mono text-[12px] text-fg-3">(none)</span>
     );
   }
-  if (typeof value === 'number')
-    return <span className="text-[var(--color-sev-info)] tabular">{value}</span>;
-  if (typeof value === 'string')
-    return <span className="text-[var(--color-cat-ephemeral)]">"{value}"</span>;
-  if (Array.isArray(value)) {
-    return (
-      <span className="text-fg-1">
-        [{value.length} item{value.length === 1 ? '' : 's'}]
+  return (
+    <span className="flex flex-wrap items-center gap-2">
+      <span className="font-mono text-[12px] text-fg-0 tabular">
+        {formatAbsoluteTime(ms)}
       </span>
-    );
-  }
-  return <NestedObject value={value as Record<string, unknown>} />;
+      <span className="font-mono text-[11px] text-fg-3">
+        ({formatRelativeTime(ms)})
+      </span>
+    </span>
+  );
 }
 
-/** Format a duration in ms as "3h 14m" / "12m 30s" / "45s". */
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  const s = Math.round(ms / 1000);
-  if (s < 60) return `${s}s`;
-  const m = Math.floor(s / 60);
-  const rs = s % 60;
-  if (m < 60) return rs > 0 ? `${m}m ${rs}s` : `${m}m`;
-  const h = Math.floor(m / 60);
-  const rm = m % 60;
-  if (h < 24) return rm > 0 ? `${h}h ${rm}m` : `${h}h`;
-  const d = Math.floor(h / 24);
-  const rh = h % 24;
-  return rh > 0 ? `${d}d ${rh}h` : `${d}d`;
+function parseIso(input: string | undefined): number | null {
+  if (input === undefined || input === '') return null;
+  const n = Date.parse(input);
+  return Number.isFinite(n) ? n : null;
 }
diff --git a/apps/vis/web/src/components/subagents/SubagentNode.tsx b/apps/vis/web/src/components/subagents/SubagentNode.tsx
index 4fedaa4..f989603 100644
--- a/apps/vis/web/src/components/subagents/SubagentNode.tsx
+++ b/apps/vis/web/src/components/subagents/SubagentNode.tsx
@@ -1,92 +1,70 @@
 import { Link, useParams } from 'react-router-dom';
-import type { SubagentNode as SubagentNodeT } from '../../types';
+import type { AgentNode } from '../../types';
 import { Pill, type PillTone } from '../shared/Pill';
-import { formatRelativeTime } from '../../util/time';
 
-const STATUS_TONE: Record<SubagentNodeT['status'], PillTone> = {
-  running: 'info',
-  completed: 'success',
-  failed: 'error',
-  killed: 'neutral',
-  lost: 'warning',
-  unknown: 'neutral',
+const TYPE_TONE: Record<AgentNode['type'], PillTone> = {
+  main: 'conversation',
+  sub: 'subagent',
+  independent: 'tools',
 };
 
 interface Props {
-  node: SubagentNodeT;
+  node: AgentNode;
   sessionId: string;
 }
 
 export function SubagentNode({ node, sessionId }: Props) {
   const { agentId: activeAgentId } = useParams<{ agentId?: string }>();
-  const selected = activeAgentId === node.agent_id;
-  const shortId = node.agent_id.replace(/^sub_/, '').slice(0, 10);
+  const selected = activeAgentId === node.agentId;
+  const broken = !node.wireExists;
 
   return (
     <div className="my-1">
       <Link
-        to={`/sessions/${sessionId}/subagents/${node.agent_id}`}
+        to={`/sessions/${sessionId}/agents/${node.agentId}`}
         className={[
           'relative flex items-start gap-3 border border-border bg-surface-0 px-3 py-2 transition-colors hover:bg-surface-1',
           selected ? 'border-[var(--color-cat-subagent)]' : '',
         ].join(' ')}
       >
-        <span
-          className="mt-[3px] inline-block h-[7px] w-[7px] rounded-full shrink-0"
-          style={{
-            backgroundColor: `var(${STATUS_COLOR_VAR[node.status]})`,
-          }}
-          title={node.status}
-        />
         <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <Pill tone="subagent" variant="soft">
-              {node.subagent_type ?? 'unknown'}
+          <div className="flex flex-wrap items-center gap-2">
+            <Pill tone={TYPE_TONE[node.type]} variant="soft">
+              {node.type}
             </Pill>
-            <span className="font-mono text-[12px] text-fg-0">{shortId}</span>
-            <Pill tone={STATUS_TONE[node.status]} variant="outline">
-              {node.status}
-            </Pill>
-            {node.run_in_background ? (
-              <Pill tone="subagent" variant="outline">bg</Pill>
+            <span className="font-mono text-[12px] text-fg-0">{node.agentId}</span>
+            {node.parentAgentId !== null ? (
+              <span className="font-mono text-[10.5px] text-fg-3">
+                ← {node.parentAgentId}
+              </span>
+            ) : null}
+            {broken ? (
+              <Pill tone="warning" variant="outline">
+                no wire
+              </Pill>
             ) : null}
             <span className="ml-auto font-mono text-[10.5px] text-fg-3 tabular">
-              depth {node.depth} · {formatRelativeTime(node.spawn_time)}
+              {node.wireRecordCount} rec{node.wireRecordCount === 1 ? '' : 's'}
+              {node.wireProtocolVersion !== null
+                ? ` · v${node.wireProtocolVersion}`
+                : ''}
             </span>
           </div>
-          {node.agent_name ? (
-            <div className="mt-0.5 font-mono text-[11px] text-fg-2">
-              {node.agent_name}
-            </div>
-          ) : null}
-          {node.result_summary ? (
-            <div className="mt-1 font-mono text-[12px] text-fg-1 line-clamp-3">
-              {node.result_summary}
-            </div>
-          ) : null}
-          {node.error ? (
-            <div className="mt-1 font-mono text-[12px] text-[var(--color-sev-error)] line-clamp-3">
-              {node.error}
-            </div>
-          ) : null}
+          <div
+            className="mt-1 truncate font-mono text-[10.5px] text-fg-3"
+            title={node.homedir}
+          >
+            {node.homedir}
+          </div>
         </div>
       </Link>
       {node.children.length > 0 ? (
         <div className="mt-1 border-l border-border pl-3 ml-3">
           {node.children.map((c) => (
-            <SubagentNode key={c.agent_id} node={c} sessionId={sessionId} />
+            <SubagentNode key={c.agentId} node={c} sessionId={sessionId} />
           ))}
         </div>
       ) : null}
     </div>
   );
 }
-
-const STATUS_COLOR_VAR: Record<SubagentNodeT['status'], string> = {
-  running: '--color-sev-info',
-  completed: '--color-sev-success',
-  failed: '--color-sev-error',
-  killed: '--color-fg-3',
-  lost: '--color-sev-warning',
-  unknown: '--color-fg-3',
-};
diff --git a/apps/vis/web/src/components/subagents/SubagentTree.tsx b/apps/vis/web/src/components/subagents/SubagentTree.tsx
index 40f8e7f..371dac0 100644
--- a/apps/vis/web/src/components/subagents/SubagentTree.tsx
+++ b/apps/vis/web/src/components/subagents/SubagentTree.tsx
@@ -1,8 +1,8 @@
-import type { SubagentNode as SubagentNodeT } from '../../types';
+import type { AgentNode } from '../../types';
 import { SubagentNode } from './SubagentNode';
 
 interface SubagentTreeProps {
-  tree: SubagentNodeT[];
+  tree: AgentNode[];
   sessionId: string;
 }
 
@@ -10,14 +10,14 @@ export function SubagentTree({ tree, sessionId }: SubagentTreeProps) {
   if (tree.length === 0) {
     return (
       <div className="p-6 font-mono text-[12px] text-fg-3">
-        no subagents spawned in this session
+        no agents found in state.json
       </div>
     );
   }
   return (
     <div className="p-3">
       {tree.map((node) => (
-        <SubagentNode key={node.agent_id} node={node} sessionId={sessionId} />
+        <SubagentNode key={node.agentId} node={node} sessionId={sessionId} />
       ))}
     </div>
   );
diff --git a/apps/vis/web/src/components/subagents/SubagentsTab.tsx b/apps/vis/web/src/components/subagents/SubagentsTab.tsx
index 1f9879d..8ea0030 100644
--- a/apps/vis/web/src/components/subagents/SubagentsTab.tsx
+++ b/apps/vis/web/src/components/subagents/SubagentsTab.tsx
@@ -1,4 +1,4 @@
-import { useSubagents } from '../../hooks/useSubagents';
+import { useAgentTree } from '../../hooks/useSubagents';
 import { SubagentTree } from './SubagentTree';
 
 interface SubagentsTabProps {
@@ -6,15 +6,15 @@ interface SubagentsTabProps {
 }
 
 export function SubagentsTab({ sessionId }: SubagentsTabProps) {
-  const { data, isLoading, error } = useSubagents(sessionId);
+  const { data, isLoading, error } = useAgentTree(sessionId);
 
   if (isLoading) {
-    return <div className="p-6 font-mono text-[12px] text-fg-3">loading subagents…</div>;
+    return <div className="p-6 font-mono text-[12px] text-fg-3">loading agents…</div>;
   }
   if (error) {
     return (
       <div className="p-6 font-mono text-[12px] text-[var(--color-sev-error)]">
-        {(error).message}
+        {(error as Error).message}
       </div>
     );
   }
diff --git a/apps/vis/web/src/components/wire/IssuesDrawer.tsx b/apps/vis/web/src/components/wire/IssuesDrawer.tsx
index d7cbd1d..4f9223f 100644
--- a/apps/vis/web/src/components/wire/IssuesDrawer.tsx
+++ b/apps/vis/web/src/components/wire/IssuesDrawer.tsx
@@ -5,11 +5,11 @@ import type { Issue, IssueSeverity } from '../../lib/issues';
 interface IssuesDrawerProps {
   issues: Issue[];
   onClose: () => void;
-  onJumpTo?: (seq: number) => void;
-  /** Optional predicate: "is this seq currently visible under the active
-   *  filter?". When provided, jump buttons for filtered-out seqs are
+  onJumpTo?: (lineNo: number) => void;
+  /** Optional predicate: "is this line currently visible under the active
+   *  filter?". When provided, jump buttons for filtered-out lines are
    *  disabled and flagged. */
-  isSeqVisible?: (seq: number) => boolean;
+  isLineVisible?: (lineNo: number) => boolean;
 }
 
 const SEV_COLOR: Record<IssueSeverity, string> = {
@@ -19,35 +19,35 @@ const SEV_COLOR: Record<IssueSeverity, string> = {
 };
 
 const KIND_LABEL: Record<Issue['kind'], string> = {
-  subagent_failed: 'subagent failed',
-  tool_error: 'tool error',
-  tool_denied: 'tool denied',
-  turn_failed: 'turn failed',
-  step_truncated: 'step truncated',
+  orphan_tool_call: 'orphan tool.call',
+  missing_tool_result: 'missing tool.result',
+  incomplete_step: 'incomplete step',
+  incomplete_compaction: 'incomplete compaction',
+  active_plan_mode: 'plan mode active',
+  rejected_approval: 'approval rejected',
   wire_warning: 'wire warning',
 };
 
-export function IssuesDrawer({ issues, onClose, onJumpTo, isSeqVisible }: IssuesDrawerProps) {
+export function IssuesDrawer({ issues, onClose, onJumpTo, isLineVisible }: IssuesDrawerProps) {
   // ESC closes — standard drawer affordance.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
     };
     window.addEventListener('keydown', onKey);
-    return () =>{  window.removeEventListener('keydown', onKey); };
+    return () => {
+      window.removeEventListener('keydown', onKey);
+    };
   }, [onClose]);
 
   return (
     <>
-      {/* Backdrop — click outside drawer to dismiss. Subtle tint so the
-          underlying Wire timeline is still readable. */}
       <button
         type="button"
         aria-label="close issues"
         onClick={onClose}
         className="absolute inset-0 z-10 bg-black/20"
       />
-      {/* Drawer — slides from the right. 320px wide, full height. */}
       <aside
         className="absolute right-0 top-0 bottom-0 z-20 flex w-[360px] flex-col border-l border-border bg-surface-1 shadow-[-8px_0_32px_rgba(0,0,0,0.25)]"
         role="dialog"
@@ -74,11 +74,11 @@ export function IssuesDrawer({ issues, onClose, onJumpTo, isSeqVisible }: Issues
             <ul className="divide-y divide-border">
               {issues.map((iss, i) => (
                 <IssueItem
-                  key={`${iss.kind}-${iss.seq ?? 'w'}-${i}`}
+                  key={`${iss.kind}-${iss.lineNo ?? 'w'}-${i}`}
                   issue={iss}
                   onJumpTo={onJumpTo}
                   onClose={onClose}
-                  isSeqVisible={isSeqVisible}
+                  isLineVisible={isLineVisible}
                 />
               ))}
             </ul>
@@ -93,17 +93,17 @@ function IssueItem({
   issue,
   onJumpTo,
   onClose,
-  isSeqVisible,
+  isLineVisible,
 }: {
   issue: Issue;
-  onJumpTo?: (seq: number) => void;
+  onJumpTo?: (lineNo: number) => void;
   onClose: () => void;
-  isSeqVisible?: (seq: number) => boolean;
+  isLineVisible?: (lineNo: number) => boolean;
 }) {
   const color = SEV_COLOR[issue.severity];
-  const seq = issue.seq;
-  const hidden = seq !== null && isSeqVisible !== undefined && !isSeqVisible(seq);
-  const canJump = seq !== null && onJumpTo !== undefined && !hidden;
+  const lineNo = issue.lineNo;
+  const hidden = lineNo !== null && isLineVisible !== undefined && !isLineVisible(lineNo);
+  const canJump = lineNo !== null && onJumpTo !== undefined && !hidden;
   return (
     <li className="px-3 py-2 hover:bg-surface-2">
       <div className="flex items-center gap-2 font-mono text-[11px]">
@@ -113,19 +113,19 @@ function IssueItem({
           aria-hidden="true"
         />
         <span className="text-fg-1">{KIND_LABEL[issue.kind]}</span>
-        {seq !== null ? (
+        {lineNo !== null ? (
           <>
             <span className="text-fg-3">·</span>
-            <span className="tabular text-fg-3">seq {seq}</span>
+            <span className="tabular text-fg-3">line {lineNo}</span>
           </>
         ) : null}
         {hidden ? <span className="text-fg-3">(filtered out)</span> : null}
-        {seq !== null ? (
+        {lineNo !== null ? (
           <button
             type="button"
             disabled={!canJump}
             onClick={() => {
-              if (canJump) onJumpTo?.(seq);
+              if (canJump) onJumpTo?.(lineNo);
               onClose();
             }}
             className="ml-auto text-fg-3 hover:text-fg-0 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-3"
diff --git a/apps/vis/web/src/components/wire/TypeBadge.tsx b/apps/vis/web/src/components/wire/TypeBadge.tsx
index fbd1af1..8a0872a 100644
--- a/apps/vis/web/src/components/wire/TypeBadge.tsx
+++ b/apps/vis/web/src/components/wire/TypeBadge.tsx
@@ -1,20 +1,19 @@
-import type { WireRecordType } from '../../types';
+import type { AgentRecord } from '../../types';
 import { Pill } from '../shared/Pill';
-import { TYPE_ICON, TYPE_TONE } from './typeMeta';
+import { TYPE_LABEL, TYPE_TONE } from './typeMeta';
+
+type RecordType = AgentRecord['type'];
 
 interface TypeBadgeProps {
-  type: WireRecordType;
+  type: RecordType;
 }
 
 export function TypeBadge({ type }: TypeBadgeProps) {
-  const icon = TYPE_ICON[type];
-  const tone = TYPE_TONE[type];
+  const label = TYPE_LABEL[type] ?? type;
+  const tone = TYPE_TONE[type] ?? 'neutral';
   return (
-    <Pill tone={tone} variant="soft">
-      <span className="tabular" aria-hidden="true">
-        {icon}
-      </span>
-      <span>{type}</span>
+    <Pill tone={tone} variant="soft" title={type}>
+      {label}
     </Pill>
   );
 }
diff --git a/apps/vis/web/src/components/wire/WireHeadline.tsx b/apps/vis/web/src/components/wire/WireHeadline.tsx
index 2ff6126..2f4ab72 100644
--- a/apps/vis/web/src/components/wire/WireHeadline.tsx
+++ b/apps/vis/web/src/components/wire/WireHeadline.tsx
@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 
-import { useFocus, type FocusKind } from '../../lib/focus-context';
-import type { VisWireRecord } from '../../types';
+import type { AgentRecord, ContentPart, LoopRecordedEvent } from '../../types';
 import { Pill } from '../shared/Pill';
 import { formatBytes } from '../shared/SizePreview';
 
@@ -29,662 +28,328 @@ function truncate(s: unknown, n: number): string {
   return str.slice(0, n) + '…';
 }
 
-/** Narrow an `unknown` to a string — used for wire-record field values that
- *  are typed `unknown` but practically always string/null in the field we read. */
-function asStr(v: unknown, fallback = '—'): string {
-  if (typeof v === 'string') return v;
-  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
-  return fallback;
+/** Pull the first text segment from a ContentPart[] for one-line preview. */
+function firstText(parts: readonly ContentPart[]): string {
+  for (const p of parts) {
+    if (p.type === 'text' && typeof p.text === 'string') return p.text;
+  }
+  return '(non-text)';
 }
 
-function byteLength(v: unknown): number {
-  if (typeof v === 'string') return v.length;
-  if (v === undefined || v === null) return 0;
-  try {
-    return JSON.stringify(v).length;
-  } catch {
-    return 0;
+/** One-line description of the embedded LoopRecordedEvent. */
+function loopEventSummary(ev: LoopRecordedEvent): string {
+  switch (ev.type) {
+    case 'step.begin':
+      return `step ${ev.step} (turn ${ev.turnId})`;
+    case 'step.end':
+      return `step ${ev.step} → ${ev.finishReason ?? '?'}`;
+    case 'content.part': {
+      const len =
+        ev.part.type === 'text'
+          ? ev.part.text.length
+          : ev.part.type === 'think'
+            ? ev.part.think.length
+            : 0;
+      return `${ev.part.type}${len ? ` (${len}b)` : ''}`;
+    }
+    case 'tool.call':
+      return `${ev.name}#${ev.toolCallId.slice(-8)}`;
+    case 'tool.result':
+      return `result#${ev.toolCallId.slice(-8)}${ev.result.isError === true ? ' (error)' : ''}`;
+    default: {
+      const exhaustive: never = ev;
+      return String((exhaustive as { type?: string }).type ?? 'unknown');
+    }
   }
 }
 
 /** Render the collapsed-headline for a wire record. */
-export function renderHeadline(r: VisWireRecord): HeadlineRender {
+export function renderHeadline(r: AgentRecord): HeadlineRender {
   switch (r.type) {
-    // ─── FILE HEADER / STARTUP BASELINE ───
-    case 'metadata': {
-      const pv = r['protocol_version'] as string | undefined;
-      const producer = r['producer'] as
-        | { kind?: string; name?: string; version?: string }
-        | undefined;
-      const kimiVer = r['kimi_version'] as string | undefined;
-      const fileName = r['file_name'] as string | undefined;
-      const prodStr = producer ? `${producer.name ?? '?'}@${producer.version ?? '?'}` : 'legacy';
+    case 'metadata':
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
-            <Mono>protocol v{pv ?? '?'}</Mono>
+            <Mono>protocol v{r.protocol_version}</Mono>
             <Dim>·</Dim>
-            <Mono className="truncate">{prodStr}</Mono>
-            {kimiVer ? <Dim className="truncate">· kimi {kimiVer}</Dim> : null}
+            <Mono>created {new Date(r.created_at).toLocaleString()}</Mono>
           </span>
         ),
-        right: fileName ? <Dim>{fileName}</Dim> : null,
       };
-    }
 
-    case 'session_initialized': {
-      const agentType = r['agent_type'] as string | undefined;
-      const model = r['model'] as string | undefined;
-      const sysPrompt = r['system_prompt'] as string | undefined;
-      const tools = (r['active_tools'] as string[] | undefined) ?? [];
-      const permMode = r['permission_mode'] as string | undefined;
-      const planMode = r['plan_mode'] as boolean | undefined;
+    case 'config.update': {
+      const parts: string[] = [];
+      if (r.profileName !== undefined) parts.push(`profile=${r.profileName}`);
+      if (r.modelAlias !== undefined) parts.push(`model=${r.modelAlias}`);
+      if (r.cwd !== undefined) parts.push(`cwd=${r.cwd}`);
+      if (r.thinkingLevel !== undefined) parts.push(`thinking=${r.thinkingLevel}`);
+      if (r.systemPrompt !== undefined) parts.push(`system(${r.systemPrompt.length}b)`);
       return {
         main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <Mono>{model ?? '—'}</Mono>
-            <Dim>·</Dim>
-            <Mono>{tools.length} tools</Mono>
-            <Dim>·</Dim>
-            <Mono>{permMode ?? '—'}</Mono>
-            {planMode ? (
-              <Pill tone="config" variant="soft">
-                plan
-              </Pill>
-            ) : null}
-            <Dim>·</Dim>
-            <span className="truncate text-fg-1">
-              sp: {truncate(sysPrompt ?? '', 70) || <Dim>(empty)</Dim>}
-            </span>
+          <span className="truncate text-fg-0">
+            {parts.length === 0 ? <Dim>(no fields)</Dim> : parts.join(' · ')}
           </span>
         ),
-        right: (
-          <Pill
-            tone={
-              agentType === 'sub'
-                ? 'subagent'
-                : agentType === 'independent'
-                  ? 'lifecycle'
-                  : 'config'
-            }
-            variant="outline"
-          >
-            {agentType ?? 'main'}
-          </Pill>
-        ),
       };
     }
 
-    // ─── CONVERSATION ───
-    case 'turn_begin': {
-      const agentType = r['agent_type'] as string | undefined;
-      const kind = r['input_kind'] as string | undefined;
-      const input = r['user_input'] as string | undefined;
-      const turnId = r['turn_id'] as string | undefined;
+    case 'turn.prompt':
+    case 'turn.steer': {
+      const text = firstText(r.input);
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
-            <Mono>turn #</Mono>
-            <IdBadge kind="turn_id" value={turnId} />
-            <Dim>kind={kind ?? '—'}</Dim>
-            {input ? <span className="truncate text-fg-1">· {truncate(input, 80)}</span> : null}
-          </span>
-        ),
-        right: (
-          <Pill
-            tone={
-              agentType === 'sub' ? 'subagent' : agentType === 'independent' ? 'lifecycle' : 'turn'
-            }
-            variant="outline"
-          >
-            {agentType ?? 'main'}
-          </Pill>
-        ),
-      };
-    }
-
-    case 'turn_end': {
-      const reason = r['reason'] as string | undefined;
-      const success = r['success'] as boolean | undefined;
-      const usage = r['usage'] as Record<string, unknown> | undefined;
-      const synthetic = r['synthetic'] as boolean | undefined;
-      const outputTokens = usage?.['output_tokens'] as number | undefined;
-      const cost = usage?.['cost_usd'] as number | undefined;
-      const turnId = r['turn_id'] as string | undefined;
-      return {
-        main: (
-          <span className="flex items-center gap-2">
-            <Mono>turn #</Mono>
-            <IdBadge kind="turn_id" value={turnId} />
-            <span
-              className={
-                success ? 'text-[var(--color-sev-success)]' : 'text-[var(--color-sev-error)]'
-              }
-            >
-              {reason}
-            </span>
-          </span>
-        ),
-        right: (
-          <span className="flex items-center gap-2">
-            {synthetic ? (
-              <Pill tone="warning" variant="outline">
-                synthetic
-              </Pill>
-            ) : null}
-            {outputTokens !== undefined ? <Dim>{outputTokens}tok</Dim> : null}
-            {cost !== undefined ? <Dim>${cost.toFixed(4)}</Dim> : null}
+            <Pill tone="turn" variant="soft">
+              {r.origin.kind}
+            </Pill>
+            <span className="truncate text-fg-1">→ {truncate(text, 80)}</span>
           </span>
         ),
       };
     }
 
-    case 'user_message': {
-      const content = r['content'];
-      const text =
-        typeof content === 'string'
-          ? content
-          : Array.isArray(content)
-            ? (content as { type: string; text?: string }[])
-                .map((p) => (p.type === 'text' ? (p.text ?? '') : `<${p.type}>`))
-                .join('')
-            : '';
-      const parts = Array.isArray(content) ? content.length : 1;
+    case 'turn.cancel':
       return {
-        main: (
-          <span className="truncate text-fg-0">{truncate(text, 120) || <Dim>(empty)</Dim>}</span>
-        ),
-        right: parts > 1 ? <Dim>{parts} parts</Dim> : undefined,
+        main: <Mono>{r.turnId !== undefined ? `turn ${r.turnId}` : '(latest)'}</Mono>,
       };
-    }
 
-    // An "assistant message" is now a sequence of atoms: step_begin →
-    // (content_part | tool_call)* → step_end. Render each atom distinctly so
-    // the wire timeline stays a 1:1 view of the underlying records.
-    case 'step_begin': {
-      const uuid = r['uuid'] as string | undefined;
-      const step = r['step'] as number | undefined;
+    case 'context.append_message': {
+      const m = r.message;
+      const tc = m.toolCalls.length > 0 ? `${m.toolCalls.length} tool_call(s)` : '';
       return {
         main: (
-          <span className="flex items-center gap-2">
-            <Mono>step #{step ?? '—'}</Mono>
-            <IdBadge kind="step_uuid" value={uuid} shortenTo={10} />
+          <span className="flex items-center gap-2 min-w-0">
+            <Pill
+              tone={
+                m.role === 'user'
+                  ? 'user'
+                  : m.role === 'assistant'
+                    ? 'assistant'
+                    : m.role === 'tool'
+                      ? 'tool'
+                      : 'meta'
+              }
+              variant="soft"
+            >
+              {m.role}
+            </Pill>
+            <Dim>({m.content.length} part{m.content.length === 1 ? '' : 's'})</Dim>
+            {tc ? <Dim>· {tc}</Dim> : null}
+            {m.origin?.kind ? <Dim>· origin={m.origin.kind}</Dim> : null}
           </span>
         ),
+        right: m.isError === true ? (
+          <Pill tone="error" variant="solid">
+            error
+          </Pill>
+        ) : undefined,
       };
     }
 
-    case 'step_end': {
-      const step = r['step'] as number | undefined;
-      const finish = r['finish_reason'] as string | undefined;
-      const usage = r['usage'] as Record<string, unknown> | undefined;
-      const outputTokens = usage?.['output_tokens'] as number | undefined;
+    case 'context.append_loop_event':
       return {
         main: (
-          <span className="flex items-center gap-2">
-            <Mono>step #{step ?? '—'}</Mono>
-            {finish ? <Dim>{finish}</Dim> : null}
+          <span className="flex items-center gap-2 min-w-0">
+            <Mono>{r.event.type}</Mono>
+            <Dim className="truncate">{loopEventSummary(r.event)}</Dim>
           </span>
         ),
-        right: outputTokens !== undefined ? <Dim>{outputTokens}tok</Dim> : undefined,
       };
-    }
 
-    case 'content_part': {
-      const part = r['part'] as
-        | { kind: 'text' | 'think'; text?: string; think?: string }
-        | undefined;
-      if (part === undefined) {
-        return { main: <Dim>(empty part)</Dim> };
-      }
-      const body = part.kind === 'text' ? (part.text ?? '') : (part.think ?? '');
+    case 'context.mark_last_user_prompt_blocked':
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
-            <Pill tone={part.kind === 'think' ? 'config' : 'assistant'} variant="soft">
-              {part.kind}
+            <Pill tone="warning" variant="soft">
+              blocked
             </Pill>
-            <span className="truncate text-fg-0">{truncate(body, 100) || <Dim>(empty)</Dim>}</span>
+            <Dim>hook: {r.hookEvent}</Dim>
           </span>
         ),
-        right: <Dim>{formatBytes(body.length)}</Dim>,
       };
-    }
 
-    case 'tool_call': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const name = d['tool_name'] as string | undefined;
-      const args = d['args'];
-      const preview =
-        typeof args === 'string' ? args : args !== undefined ? JSON.stringify(args) : '';
-      const activity = d['description'] as string | undefined;
-      const callId = d['tool_call_id'] as string | undefined;
-      const step = r['step'] as number | undefined;
+    case 'context.clear':
+      return { main: <Dim>context cleared</Dim> };
+
+    case 'context.apply_compaction':
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
-            <Mono className="text-[var(--color-cat-tools)]">{name ?? '—'}</Mono>
-            {activity ? (
-              <span className="truncate text-fg-1">— {truncate(activity, 60)}</span>
-            ) : (
-              <span className="truncate font-mono text-[12px] text-fg-1">
-                ({truncate(preview, 60)})
-              </span>
-            )}
-          </span>
-        ),
-        right: (
-          <span className="flex items-center gap-2">
-            {callId ? (
-              <span className="flex items-center gap-1">
-                <Dim>call=</Dim>
-                <IdBadge kind="tool_call_id" value={callId} shortenTo={10} />
-              </span>
-            ) : null}
-            {step !== undefined ? <Dim>step={step}</Dim> : null}
+            <Pill tone="compaction" variant="soft">
+              compacted
+            </Pill>
+            <Dim>
+              summary {r.summary.length}b · {r.tokensBefore}→{r.tokensAfter} tok · {r.compactedCount} msgs
+            </Dim>
           </span>
         ),
       };
-    }
 
-    case 'tool_result': {
-      const output = r['output'];
-      const isError = r['is_error'] as boolean | undefined;
-      const synthetic = r['synthetic'] as boolean | undefined;
-      const callId = r['tool_call_id'] as string | undefined;
-      const outputBytes = byteLength(output);
-      const isPersisted =
-        typeof output === 'string' && output.trimStart().startsWith('<persisted-output');
+    case 'tools.set_active_tools': {
+      const head = r.names.slice(0, 3).join(', ');
+      const rest = r.names.length > 3 ? ` +${r.names.length - 3} more` : '';
       return {
         main: (
-          <span className="flex items-center gap-2">
-            <Mono>call=</Mono>
-            <IdBadge kind="tool_call_id" value={callId} shortenTo={10} />
-            <Dim>
-              {typeof output === 'string'
-                ? 'string'
-                : Array.isArray(output)
-                  ? 'array'
-                  : typeof output}
-            </Dim>
-            <Dim>{formatBytes(outputBytes)}</Dim>
-            {isPersisted ? (
-              <Pill tone="compaction" variant="outline">
-                persisted
-              </Pill>
-            ) : null}
-          </span>
-        ),
-        right: (
-          <span className="flex items-center gap-2">
-            {synthetic ? (
-              <Pill tone="warning" variant="outline">
-                synthetic
-              </Pill>
-            ) : null}
-            {isError ? (
-              <Pill tone="error" variant="solid">
-                error
-              </Pill>
-            ) : null}
-          </span>
+          <Mono className="truncate">
+            {head}
+            {rest}
+          </Mono>
         ),
+        right: <Dim>{r.names.length} tools</Dim>,
       };
     }
 
-    case 'compaction': {
-      const summary = r['summary'] as string | undefined;
-      const pre = r['pre_compact_tokens'] as number | undefined;
-      const post = r['post_compact_tokens'] as number | undefined;
+    case 'tools.register_user_tool':
       return {
         main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <Pill tone="compaction" variant="solid">
-              summary
-            </Pill>
-            {summary ? <span className="truncate text-fg-1">{truncate(summary, 80)}</span> : null}
-            {pre !== undefined && post !== undefined ? (
-              <Dim>
-                · {pre}→{post} tok
-              </Dim>
-            ) : null}
+          <span className="flex items-center gap-2">
+            <Mono className="text-[var(--color-cat-tools)]">+ {r.name}</Mono>
           </span>
         ),
       };
-    }
 
-    // ─── CONFIG ───
-    case 'system_prompt_changed': {
-      const prompt = r['new_prompt'] as string | undefined;
+    case 'tools.unregister_user_tool':
       return {
         main: (
-          <span className="truncate text-fg-0">
-            {truncate(prompt ?? '', 60) || <Dim>(empty)</Dim>}
+          <span className="flex items-center gap-2">
+            <Mono className="text-[var(--color-sev-warning)]">- {r.name}</Mono>
           </span>
         ),
-        right: <Dim>{formatBytes(byteLength(prompt))}</Dim>,
       };
-    }
 
-    case 'tools_changed': {
-      const op = r['operation'] as string | undefined;
-      const tools = (r['tools'] as string[] | undefined) ?? [];
-      const head = tools.slice(0, 3).join(', ');
-      const rest = tools.length > 3 ? ` +${tools.length - 3} more` : '';
+    case 'tools.update_store': {
+      const valuePreview =
+        typeof r.value === 'object' && r.value !== null
+          ? '(object)'
+          : truncate(String(r.value), 60);
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
-            <Pill tone="config" variant="soft">
-              {op ?? '—'}
-            </Pill>
-            <Mono className="truncate">
-              {head}
-              {rest}
-            </Mono>
+            <Mono>{r.key}</Mono>
+            <Dim>= {valuePreview}</Dim>
           </span>
         ),
       };
     }
 
-    // ─── EPHEMERAL ───
-    case 'system_reminder': {
-      const content = r['content'] as string | undefined;
-      const consumed = r['consumed_at_turn'] as number | undefined;
-      return {
-        main: <span className="truncate text-fg-0">{truncate(content ?? '', 80)}</span>,
-        right:
-          consumed !== undefined ? (
-            <Dim>consumed@turn{consumed}</Dim>
-          ) : (
-            <Pill tone="ephemeral" variant="outline">
-              pending
-            </Pill>
-          ),
-      };
-    }
-
-    // ─── META ───
-    case 'notification': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const severity = d['severity'] as string | undefined;
-      const title = d['title'] as string | undefined;
-      const category = d['category'] as string | undefined;
-      const targets = (d['targets'] as string[] | undefined) ?? [];
-      const sevTone =
-        severity === 'error'
-          ? 'error'
-          : severity === 'warning'
-            ? 'warning'
-            : severity === 'success'
-              ? 'success'
-              : 'info';
+    case 'permission.set_mode':
       return {
         main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <Pill tone={sevTone} variant="soft">
-              {severity ?? '—'}
+          <span className="flex items-center gap-2">
+            <Dim>mode →</Dim>
+            <Pill tone="approval" variant="soft">
+              {r.mode}
             </Pill>
-            <span className="truncate text-fg-0">{truncate(title ?? '', 80)}</span>
-            {category ? <Dim>({category})</Dim> : null}
           </span>
         ),
-        right:
-          targets.length > 0 ? (
-            <span className="flex items-center gap-1">
-              {targets.map((t) => (
-                <Pill key={t} tone="meta" variant="outline">
-                  {t}
-                </Pill>
-              ))}
-            </span>
-          ) : undefined,
       };
-    }
 
-    case 'team_mail': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
+    case 'permission.record_approval_result': {
+      const tone =
+        r.result.decision === 'approved'
+          ? 'success'
+          : r.result.decision === 'rejected'
+            ? 'error'
+            : 'neutral';
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
             <Mono>
-              {asStr(d['from_agent'])} → {asStr(d['to_agent'])}
+              {r.toolName}#{r.toolCallId.slice(-8)}
             </Mono>
-            <span className="truncate text-fg-1">{truncate(d['content'], 60)}</span>
+            <Pill tone={tone} variant="soft">
+              {r.result.decision}
+            </Pill>
+            {r.result.scope ? <Dim>({r.result.scope})</Dim> : null}
           </span>
         ),
       };
     }
 
-    // ─── TOOLS ───
-    // Note: the `tool_call` case is handled in the conversation section
-    // above (alongside step_begin / step_end / content_part).
-
-    case 'tool_denied': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const name = d['tool_name'] as string | undefined;
-      const reason = d['reason'] as string | undefined;
-      const rule = d['rule_id'] as string | undefined;
+    case 'usage.record':
       return {
         main: (
           <span className="flex items-center gap-2 min-w-0">
-            <Mono className="text-[var(--color-sev-error)]">{name ?? '—'}</Mono>
-            <Dim className="truncate">— {truncate(reason ?? '', 80)}</Dim>
+            <Mono>{r.model}</Mono>
+            <Dim>
+              in {r.usage.inputOther} / out {r.usage.output} / cache r{r.usage.inputCacheRead} w
+              {r.usage.inputCacheCreation}
+            </Dim>
           </span>
         ),
-        right: rule ? (
-          <Pill tone="error" variant="outline">
-            rule={rule}
+        right: r.usageScope ? (
+          <Pill tone="meta" variant="outline">
+            {r.usageScope}
           </Pill>
         ) : undefined,
       };
-    }
 
-    case 'skill_invoked': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const name = d['skill_name'] as string | undefined;
-      const mode = d['execution_mode'] as string | undefined;
-      const trigger = d['invocation_trigger'] as string | undefined;
-      const depth = d['query_depth'] as number | undefined;
+    case 'full_compaction.begin':
       return {
         main: (
-          <span className="flex items-center gap-2">
-            <Mono className="text-[var(--color-cat-tools)]">{name ?? '—'}</Mono>
-            <Pill tone="tools" variant="outline">
-              {mode ?? 'inline'}
+          <span className="flex items-center gap-2 min-w-0">
+            <Pill tone="compaction" variant="soft">
+              {r.source}
             </Pill>
-            {trigger ? <Dim>{trigger}</Dim> : null}
+            {r.instruction ? (
+              <Dim className="truncate">"{truncate(r.instruction, 40)}"</Dim>
+            ) : null}
           </span>
         ),
-        right: depth !== undefined && depth > 0 ? <Dim>depth={depth}</Dim> : undefined,
       };
-    }
 
-    case 'skill_completed': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const name = d['skill_name'] as string | undefined;
-      const success = d['success'] as boolean | undefined;
-      const error = d['error'] as string | undefined;
-      return {
-        main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <Mono className="text-[var(--color-cat-tools)]">{name ?? '—'}</Mono>
-            <span
-              className={
-                success ? 'text-[var(--color-sev-success)]' : 'text-[var(--color-sev-error)]'
-              }
-            >
-              {success ? 'ok' : error ? truncate(error, 60) : 'failed'}
-            </span>
-          </span>
-        ),
-      };
-    }
+    case 'full_compaction.cancel':
+      return { main: <Dim>cancelled</Dim> };
 
-    // ─── APPROVAL ───
-    case 'approval_request': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const tool = d['tool_name'] as string | undefined;
-      const action = d['action'] as string | undefined;
-      const source = d['source'] as Record<string, unknown> | undefined;
-      const display = d['display'] as Record<string, unknown> | undefined;
+    case 'full_compaction.complete':
       return {
         main: (
           <span className="flex items-center gap-2">
-            <Mono>{tool ?? '—'}</Mono>
-            <Dim>· {action ?? '—'}</Dim>
-            {source ? (
-              <Pill tone="approval" variant="outline">
-                {asStr(source['kind'], '?')}
-              </Pill>
-            ) : null}
+            <Dim>
+              {r.compactedCount} msgs · {r.tokensBefore}→{r.tokensAfter} tok
+            </Dim>
+            <Dim>· summary {formatBytes(r.summary.length)}</Dim>
           </span>
         ),
-        right: display ? <Dim>display={asStr(display['kind'], '?')}</Dim> : undefined,
       };
-    }
 
-    case 'approval_response': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const response = d['response'] as string | undefined;
-      const feedback = d['feedback'] as string | undefined;
-      const selectedLabel = d['selected_label'] as string | undefined;
-      const synthetic = d['synthetic'] as boolean | undefined;
-      const tone =
-        response === 'approved' ? 'success' : response === 'rejected' ? 'error' : 'neutral';
+    case 'plan_mode.enter':
       return {
         main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <Pill tone={tone} variant="soft">
-              {response ?? '—'}
+          <span className="flex items-center gap-2">
+            <Pill tone="lifecycle" variant="soft">
+              enter
             </Pill>
-            {selectedLabel ? <Dim>· {selectedLabel}</Dim> : null}
-            {feedback ? <Dim className="truncate">· {truncate(feedback, 40)}</Dim> : null}
+            <Mono>{r.id}</Mono>
           </span>
         ),
-        right: synthetic ? (
-          <Pill tone="warning" variant="outline">
-            synthetic
-          </Pill>
-        ) : undefined,
       };
-    }
 
-    // ─── SUBAGENT ───
-    case 'subagent_spawned': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const id = d['agent_id'] as string | undefined;
-      const name = d['agent_name'] as string | undefined;
-      const bg = d['run_in_background'] as boolean | undefined;
-      const parent = d['parent_agent_id'] as string | undefined;
+    case 'plan_mode.cancel':
+    case 'plan_mode.exit':
       return {
         main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <Pill tone="subagent" variant="soft">
-              {name ?? 'subagent'}
-            </Pill>
-            <IdBadge kind="agent_id" value={id} shortenTo={10} />
-          </span>
-        ),
-        right: (
           <span className="flex items-center gap-2">
-            {bg ? (
-              <Pill tone="subagent" variant="outline">
-                bg
-              </Pill>
-            ) : null}
-            {parent ? (
-              <span className="flex items-center gap-1">
-                <Dim>parent=</Dim>
-                <IdBadge kind="agent_id" value={parent} shortenTo={8} />
-              </span>
-            ) : null}
-          </span>
-        ),
-      };
-    }
-
-    case 'subagent_completed': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const id = d['agent_id'] as string | undefined;
-      const summary = d['result_summary'] as string | undefined;
-      const usage = d['usage'] as Record<string, unknown> | undefined;
-      const out = (usage?.['output'] ?? usage?.['output_tokens']) as number | undefined;
-      return {
-        main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <IdBadge kind="agent_id" value={id} shortenTo={10} />
-            <span className="truncate text-fg-1">{truncate(summary ?? '', 80)}</span>
-          </span>
-        ),
-        right: out !== undefined ? <Dim>{out}tok</Dim> : undefined,
-      };
-    }
-
-    case 'subagent_failed': {
-      const d = (r as { data?: Record<string, unknown> }).data ?? {};
-      const id = d['agent_id'] as string | undefined;
-      const error = d['error'] as string | undefined;
-      return {
-        main: (
-          <span className="flex items-center gap-2 min-w-0">
-            <IdBadge kind="agent_id" value={id} shortenTo={10} />
-            <span className="truncate text-[var(--color-sev-error)]">
-              {truncate(error ?? '', 80)}
-            </span>
+            <Pill
+              tone={r.type === 'plan_mode.exit' ? 'success' : 'warning'}
+              variant="soft"
+            >
+              {r.type === 'plan_mode.exit' ? 'exit' : 'cancel'}
+            </Pill>
+            <Mono>{r.id ?? '(latest)'}</Mono>
           </span>
         ),
       };
-    }
 
-    // ─── LIFECYCLE ───
-    case 'ownership_changed': {
-      const oldO = r['old_owner'] as string | null | undefined;
-      const newO = r['new_owner'] as string | undefined;
-      return {
-        main: (
-          <Mono>
-            {oldO ?? '(none)'} → {newO ?? '—'}
-          </Mono>
-        ),
-      };
-    }
-
-    case 'context_cleared': {
-      return { main: <Dim>context history cleared</Dim> };
-    }
-
-    case 'context_edit': {
-      const op = r['operation'] as string | undefined;
-      const target = r['target_seq'] as number | undefined;
-      const toTurn = r['to_turn'] as number | undefined;
-      const cascade = r['cascade'] as boolean | undefined;
-      const ref =
-        target !== undefined
-          ? `target=${target}`
-          : toTurn !== undefined
-            ? `to_turn=${toTurn}`
-            : '—';
+    case 'background.stop':
       return {
         main: (
           <span className="flex items-center gap-2">
-            <Pill tone="lifecycle" variant="soft">
-              {op ?? '—'}
-            </Pill>
-            <Mono>{ref}</Mono>
+            <Mono>task</Mono>
+            <Mono>{r.taskId}</Mono>
           </span>
         ),
-        right: cascade ? (
-          <Pill tone="warning" variant="outline">
-            cascade
-          </Pill>
-        ) : undefined,
       };
-    }
-
-    default: {
-      const t = (r as Record<string, unknown>)['type'];
-      return { main: <Dim>unknown type: {String(t)}</Dim> };
-    }
   }
 }
 
@@ -696,38 +361,3 @@ function Mono({ children, className = '' }: { children: ReactNode; className?: s
 function Dim({ children, className = '' }: { children: ReactNode; className?: string }) {
   return <span className={`font-mono text-[11px] text-fg-3 ${className}`}>{children}</span>;
 }
-
-/** A click-to-focus id badge. Clicking toggles a global focus that dims
- *  non-related rows. Re-clicking the same id (or pressing ESC) clears. */
-function IdBadge({
-  kind,
-  value,
-  shortenTo = 8,
-}: {
-  kind: FocusKind;
-  value: string | undefined;
-  shortenTo?: number;
-}) {
-  const { focus, toggle } = useFocus();
-  if (!value) return <Mono>—</Mono>;
-  const isFocused = focus?.kind === kind && focus.value === value;
-  const display = value.length > shortenTo ? value.slice(0, shortenTo) : value;
-  return (
-    <button
-      type="button"
-      onClick={(e) => {
-        e.stopPropagation();
-        toggle({ kind, value });
-      }}
-      title={`${kind}=${value} · click to focus related`}
-      className={[
-        'font-mono text-[12px] underline decoration-dotted underline-offset-2',
-        isFocused
-          ? 'text-[var(--color-sev-info)] decoration-[var(--color-sev-info)]'
-          : 'text-fg-1 decoration-fg-3 hover:text-fg-0 hover:decoration-fg-1',
-      ].join(' ')}
-    >
-      {display}
-    </button>
-  );
-}
diff --git a/apps/vis/web/src/components/wire/WireRow.tsx b/apps/vis/web/src/components/wire/WireRow.tsx
index 5111865..73118bf 100644
--- a/apps/vis/web/src/components/wire/WireRow.tsx
+++ b/apps/vis/web/src/components/wire/WireRow.tsx
@@ -1,75 +1,48 @@
 import { memo } from 'react';
 
-import { recordMatchesFocus, useFocus } from '../../lib/focus-context';
-import type { VisWireRecord } from '../../types';
-import { TYPE_CATEGORY, TYPE_CTX_EFFECT } from '../../types';
+import type { WireLine } from '../../types';
 import { formatWallClock } from '../../util/time';
 import { TypeBadge } from './TypeBadge';
 import { renderHeadline } from './WireHeadline';
 import { WireRowDetail } from './WireRowDetail';
 
-const CAT_COLOR_VAR: Record<string, string> = {
-  conversation: '--color-cat-conversation',
-  config: '--color-cat-config',
-  lifecycle: '--color-cat-lifecycle',
-  subagent: '--color-cat-subagent',
-  approval: '--color-cat-approval',
-  ephemeral: '--color-cat-ephemeral',
-  meta: '--color-cat-meta',
-  tools: '--color-cat-tools',
-};
-
 interface WireRowProps {
-  record: VisWireRecord;
+  record: WireLine;
   expanded: boolean;
   onToggle: () => void;
-  /** For tool_call / tool_result — the counterpart record (if any). */
-  paired?: VisWireRecord | undefined;
-  /** null when `paired` is undefined; true/false when the counterpart exists. */
-  pairedInFiltered?: boolean | null;
-  /** Scroll to a seq and expand it — wired by the Wire tab via the virtualizer. */
-  onJumpTo?: (seq: number) => void;
+  /** Scroll to a line and expand it — wired by the Wire tab via the virtualizer. */
+  onJumpTo?: (lineNo: number) => void;
 }
 
 export const WireRow = memo(function WireRow({
   record,
   expanded,
   onToggle,
-  paired,
-  pairedInFiltered,
   onJumpTo,
 }: WireRowProps) {
-  const cat = TYPE_CATEGORY[record.type];
-  const accentVar = CAT_COLOR_VAR[cat] ?? '--color-fg-3';
-  const ctx = TYPE_CTX_EFFECT[record.type];
   const h = renderHeadline(record);
-  const { focus } = useFocus();
-  const related = focus === null ? true : recordMatchesFocus(record, focus);
   const timeTitle = formatTimeTitle(record.time);
 
   return (
     <div
       className={[
-        'flex items-stretch border-b border-border transition-opacity',
+        'flex items-stretch border-b border-border',
         expanded ? 'bg-surface-1' : 'bg-surface-0 hover:bg-surface-1',
-        focus !== null && !related ? 'opacity-30' : '',
-        focus !== null && related ? 'ring-1 ring-inset ring-[var(--color-sev-info)]/40' : '',
       ].join(' ')}
     >
-      <div className="accent-bar" style={{ backgroundColor: `var(${accentVar})` }} />
       <div className="min-w-0 flex-1">
         <button
           onClick={onToggle}
           className="flex w-full items-center gap-3 px-2 py-[5px] text-left min-h-[28px]"
         >
           <span className="font-mono text-[11px] text-fg-3 tabular w-[52px] shrink-0 text-right">
-            {record.seq}
+            {record._lineNo}
           </span>
           <span
             className="font-mono text-[11px] text-fg-3 tabular w-[68px] shrink-0"
             title={timeTitle}
           >
-            {formatWallClock(record.time)}
+            {record.time !== undefined ? formatWallClock(record.time) : '--:--:--'}
           </span>
           <span className="shrink-0">
             <TypeBadge type={record.type} />
@@ -77,18 +50,12 @@ export const WireRow = memo(function WireRow({
           <span className="flex-1 min-w-0 flex items-center gap-2">{h.main}</span>
           <span className="flex items-center gap-2 shrink-0">
             {h.right}
-            <CtxMarker effect={ctx} />
             <Chevron open={expanded} />
           </span>
         </button>
         {expanded ? (
           <div className="border-t border-border bg-surface-1 px-2 pb-2 pt-1">
-            <WireRowDetail
-              record={record}
-              paired={paired}
-              pairedInFiltered={pairedInFiltered ?? null}
-              onJumpTo={onJumpTo}
-            />
+            <WireRowDetail record={record} onJumpTo={onJumpTo} />
           </div>
         ) : null}
       </div>
@@ -96,8 +63,8 @@ export const WireRow = memo(function WireRow({
   );
 });
 
-function formatTimeTitle(epochMs: number): string {
-  if (!epochMs || !Number.isFinite(epochMs)) return 'missing time';
+function formatTimeTitle(epochMs: number | undefined): string {
+  if (epochMs === undefined || !Number.isFinite(epochMs)) return 'missing time';
   const date = new Date(epochMs);
   if (!Number.isFinite(date.getTime())) return 'invalid time';
   return date.toISOString();
@@ -116,19 +83,3 @@ function Chevron({ open }: { open: boolean }) {
     </svg>
   );
 }
-
-function CtxMarker({ effect }: { effect: boolean | 'conditional' }) {
-  const title =
-    effect === true
-      ? 'affects LLM context'
-      : effect === 'conditional'
-        ? 'conditionally affects LLM context'
-        : 'telemetry only — no context effect';
-  const symbol = effect === true ? '●' : effect === 'conditional' ? '◑' : '○';
-  const color = effect ? 'text-[var(--color-cat-conversation)]' : 'text-fg-3';
-  return (
-    <span className={`font-mono text-[11px] ${color}`} title={title}>
-      {symbol}
-    </span>
-  );
-}
diff --git a/apps/vis/web/src/components/wire/WireRowDetail.tsx b/apps/vis/web/src/components/wire/WireRowDetail.tsx
index 118c751..1ddfa90 100644
--- a/apps/vis/web/src/components/wire/WireRowDetail.tsx
+++ b/apps/vis/web/src/components/wire/WireRowDetail.tsx
@@ -1,70 +1,34 @@
-import { useState, type ReactNode } from 'react';
+import { useState } from 'react';
 
-import type { VisWireRecord } from '../../types';
+import type {
+  ContentPart,
+  ContextMessage,
+  LoopRecordedEvent,
+  ToolCall,
+  WireLine,
+} from '../../types';
 import { CopyButton } from '../shared/CopyButton';
 import { JsonViewer } from '../shared/JsonViewer';
 import { SizePreview } from '../shared/SizePreview';
 
 interface WireRowDetailProps {
-  record: VisWireRecord;
-  /** Counterpart in a tool_call ↔ tool_result pair (if applicable). */
-  paired?: VisWireRecord | undefined;
-  /** Whether the counterpart is visible in the current filter. null when
-   *  there is no counterpart at all. */
-  pairedInFiltered?: boolean | null;
-  /** Scroll to + expand a given seq. */
-  onJumpTo?: (seq: number) => void;
+  record: WireLine;
+  /** Scroll to + expand a given line. */
+  onJumpTo?: (lineNo: number) => void;
 }
 
-/** Fields that are best rendered as collapsible large-payload blocks rather than
- *  as key-value pairs. Keyed by the path (dot-separated) from record root. */
-const LARGE_FIELDS: Record<string, true> = {
-  new_prompt: true,
-  system_prompt: true,
-  summary: true,
-  think: true,
-  text: true,
-  content: true,
-  output: true,
-  user_input: true,
-  'data.body': true,
-  'data.args': true,
-  'data.payload': true,
-  'data.tail_output': true,
-  'data.result_summary': true,
-  'data.error': true,
-  'data.reason': true,
-  'data.content': true,
-  'data.summary': true,
-  result_summary: true,
-  new_content: true,
-};
-
-const TOP_LEVEL_META = new Set(['type', 'seq', 'time']);
-
-export function WireRowDetail({ record, paired, pairedInFiltered, onJumpTo }: WireRowDetailProps) {
+export function WireRowDetail({ record }: WireRowDetailProps) {
   const [showRaw, setShowRaw] = useState(false);
-  const entries = Object.entries(record as Record<string, unknown>).filter(
-    ([k]) => !TOP_LEVEL_META.has(k),
-  );
 
   return (
     <div className="pl-[120px] pr-2 py-1 font-mono text-[12px]">
-      <div className="grid grid-cols-[140px_1fr] gap-x-3 gap-y-[2px]">
-        {entries.map(([key, value]) => renderField(key, value, key))}
-      </div>
-      {paired !== undefined ? (
-        <PairedSection
-          self={record}
-          paired={paired}
-          pairedInFiltered={pairedInFiltered ?? null}
-          onJumpTo={onJumpTo}
-        />
-      ) : null}
+      {renderFriendly(record)}
       <div className="mt-2 flex items-center justify-end gap-3">
         <CopyButton value={JSON.stringify(record, null, 2)} label="copy record json" />
         <button
-          onClick={() =>{  setShowRaw((v) => !v); }}
+          onClick={() => {
+            setShowRaw((v) => !v);
+          }}
           className="font-mono text-[10px] text-fg-3 hover:text-fg-1"
         >
           {showRaw ? '[ hide raw json ]' : '[ {…} raw json ]'}
@@ -79,137 +43,266 @@ export function WireRowDetail({ record, paired, pairedInFiltered, onJumpTo }: Wi
   );
 }
 
-/** Renders the "↳ paired with tool_result (seq N)" section below a
- *  tool_call row (or the reverse). Shows a compact preview of the
- *  counterpart and a jump button that scrolls-to + expands that row. */
-function PairedSection({
-  self,
-  paired,
-  pairedInFiltered,
-  onJumpTo,
-}: {
-  self: VisWireRecord;
-  paired: VisWireRecord;
-  pairedInFiltered: boolean | null;
-  onJumpTo?: (seq: number) => void;
-}) {
-  const selfIsCall = self.type === 'tool_call';
-  const preview = selfIsCall ? previewToolResult(paired) : previewToolCallArgs(paired);
-  const isError =
-    paired.type === 'tool_result' && (paired as { is_error?: boolean }).is_error === true;
-  const hidden = pairedInFiltered === false;
+function renderFriendly(record: WireLine) {
+  switch (record.type) {
+    case 'context.append_message':
+      return <MessageDetail message={record.message} />;
+    case 'context.append_loop_event':
+      return <LoopEventDetail event={record.event} />;
+    case 'context.apply_compaction':
+    case 'full_compaction.complete':
+      return (
+        <div className="grid grid-cols-[140px_1fr] gap-x-3 gap-y-[2px]">
+          <FieldRow label="summary" wide>
+            <SizePreview label="summary" sizeBytes={record.summary.length} preview={record.summary}>
+              <pre className="whitespace-pre-wrap break-words text-fg-1">{record.summary}</pre>
+            </SizePreview>
+          </FieldRow>
+          <FieldRow label="compactedCount">
+            <span className="text-[var(--color-sev-info)]">{record.compactedCount}</span>
+          </FieldRow>
+          <FieldRow label="tokensBefore">
+            <span className="text-[var(--color-sev-info)]">{record.tokensBefore}</span>
+          </FieldRow>
+          <FieldRow label="tokensAfter">
+            <span className="text-[var(--color-sev-info)]">{record.tokensAfter}</span>
+          </FieldRow>
+        </div>
+      );
+    default:
+      return <JsonViewer value={record} defaultOpenDepth={2} />;
+  }
+}
+
+function MessageDetail({ message }: { message: ContextMessage }) {
   return (
-    <div className="mt-3 border-t border-border pt-2">
-      <div className="flex items-center gap-2 font-mono text-[11px]">
-        <span className="text-fg-3">↳ paired</span>
-        <span className="text-fg-1">{paired.type}</span>
-        <span className="text-fg-3">seq</span>
-        <span className="tabular text-fg-0">{paired.seq}</span>
-        {isError ? (
-          <span className="border border-[var(--color-sev-error)] px-1 text-[10px] text-[var(--color-sev-error)]">
-            error
-          </span>
+    <div className="space-y-2">
+      <div className="grid grid-cols-[140px_1fr] gap-x-3 gap-y-[2px]">
+        <FieldRow label="role">
+          <span className="text-[var(--color-cat-ephemeral)]">"{message.role}"</span>
+        </FieldRow>
+        {message.toolCallId ? (
+          <FieldRow label="toolCallId">
+            <Mono>{message.toolCallId}</Mono>
+          </FieldRow>
+        ) : null}
+        {message.origin ? (
+          <FieldRow label="origin" wide>
+            <JsonViewer value={message.origin} defaultOpenDepth={2} />
+          </FieldRow>
+        ) : null}
+        {message.isError === true ? (
+          <FieldRow label="isError">
+            <span className="text-[var(--color-sev-error)]">true</span>
+          </FieldRow>
+        ) : null}
+        {message.partial === true ? (
+          <FieldRow label="partial">
+            <span className="text-[var(--color-sev-warning)]">true</span>
+          </FieldRow>
         ) : null}
-        {hidden ? <span className="text-fg-3">(hidden by filter)</span> : null}
-        <button
-          type="button"
-          onClick={() => onJumpTo?.(paired.seq)}
-          disabled={hidden || onJumpTo === undefined}
-          className="ml-auto border border-border px-2 py-0.5 text-fg-2 hover:border-border-strong hover:text-fg-0 disabled:opacity-40 disabled:hover:border-border disabled:hover:text-fg-2"
-          title={
-            hidden ? 'counterpart is currently filtered out' : 'scroll to + expand counterpart'
-          }
-        >
-          jump →
-        </button>
       </div>
-      {preview.length > 0 ? (
-        <pre className="mt-1 max-h-[5.5em] overflow-hidden whitespace-pre-wrap break-words font-mono text-[11.5px] text-fg-1">
-          {preview.length > 400 ? preview.slice(0, 400) + '…' : preview}
-        </pre>
-      ) : (
-        <div className="mt-1 font-mono text-[11px] text-fg-3">(empty)</div>
-      )}
+
+      {message.content.length > 0 ? (
+        <div>
+          <div className="mb-1 text-fg-2">content ({message.content.length} part{message.content.length === 1 ? '' : 's'})</div>
+          <div className="space-y-1">
+            {message.content.map((part, i) => (
+              <ContentPartView key={i} part={part} />
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {message.toolCalls.length > 0 ? (
+        <div>
+          <div className="mb-1 text-fg-2">
+            toolCalls ({message.toolCalls.length})
+          </div>
+          <div className="space-y-1">
+            {message.toolCalls.map((tc) => (
+              <ToolCallView key={tc.id} call={tc} />
+            ))}
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }
 
-function previewToolCallArgs(call: VisWireRecord): string {
-  const args = (call as { data?: { args?: unknown } }).data?.args;
-  if (args === undefined) return '';
-  if (typeof args === 'string') return args;
-  try {
-    return JSON.stringify(args, null, 2);
-  } catch {
-    // Circular refs / BigInt / etc. — don't fall through to String(unknown)
-    // which produces "[object Object]" and hides the actual problem.
-    return '(unserialisable args)';
+function ContentPartView({ part }: { part: ContentPart }) {
+  switch (part.type) {
+    case 'text':
+      return (
+        <div className="border border-border bg-surface-0 p-2">
+          <div className="mb-1 text-fg-3">text · {part.text.length}b</div>
+          <pre className="whitespace-pre-wrap break-words text-fg-1">{part.text}</pre>
+        </div>
+      );
+    case 'think':
+      return (
+        <div className="border border-[var(--color-cat-config)]/40 bg-surface-0 p-2">
+          <div className="mb-1 text-[var(--color-cat-config)]">think · {part.think.length}b</div>
+          <pre className="whitespace-pre-wrap break-words text-fg-1">{part.think}</pre>
+        </div>
+      );
+    case 'image_url':
+      return (
+        <div className="border border-border bg-surface-0 p-2">
+          <div className="mb-1 text-fg-3">image_url</div>
+          <Mono className="break-all">{part.imageUrl.url}</Mono>
+        </div>
+      );
+    case 'audio_url':
+      return (
+        <div className="border border-border bg-surface-0 p-2">
+          <div className="mb-1 text-fg-3">audio_url</div>
+          <Mono className="break-all">{part.audioUrl.url}</Mono>
+        </div>
+      );
+    case 'video_url':
+      return (
+        <div className="border border-border bg-surface-0 p-2">
+          <div className="mb-1 text-fg-3">video_url</div>
+          <Mono className="break-all">{part.videoUrl.url}</Mono>
+        </div>
+      );
+    default:
+      return <JsonViewer value={part} defaultOpenDepth={1} />;
   }
 }
 
-function previewToolResult(result: VisWireRecord): string {
-  const out = (result as { output?: unknown }).output;
-  if (out === undefined || out === null) return '';
-  if (typeof out === 'string') return out;
-  try {
-    return JSON.stringify(out, null, 2);
-  } catch {
-    return '(unserialisable output)';
+function ToolCallView({ call }: { call: ToolCall }) {
+  const args = call.arguments ?? '';
+  let parsed: unknown = null;
+  if (typeof args === 'string' && args.length > 0) {
+    try {
+      parsed = JSON.parse(args);
+    } catch {
+      parsed = null;
+    }
   }
+  return (
+    <div className="border border-[var(--color-cat-tools)]/40 bg-surface-0 p-2">
+      <div className="flex items-center justify-between gap-2">
+        <Mono className="text-[var(--color-cat-tools)]">{call.name}</Mono>
+        <Mono className="text-fg-3 text-[10px]">#{call.id}</Mono>
+      </div>
+      <div className="mt-1">
+        {parsed !== null ? (
+          <JsonViewer value={parsed} defaultOpenDepth={1} />
+        ) : (
+          <pre className="whitespace-pre-wrap break-words text-fg-1">{args}</pre>
+        )}
+      </div>
+    </div>
+  );
 }
 
-function renderField(key: string, value: unknown, path: string) {
-  // Null / undefined
-  if (value === null || value === undefined) {
-    return (
-      <FieldRow key={path} label={key}>
-        <span className="text-fg-3">null</span>
-      </FieldRow>
-    );
-  }
-
-  // Large-payload fields: render via SizePreview with JsonViewer inside
-  if (LARGE_FIELDS[path] || LARGE_FIELDS[key]) {
-    if (typeof value === 'string') {
+function LoopEventDetail({ event }: { event: LoopRecordedEvent }) {
+  switch (event.type) {
+    case 'tool.call': {
+      let parsed: unknown = event.args;
+      if (typeof event.args === 'string') {
+        try {
+          parsed = JSON.parse(event.args);
+        } catch {
+          parsed = event.args;
+        }
+      }
       return (
-        <FieldRow key={path} label={key} wide>
-          <SizePreview label={key} sizeBytes={value.length} preview={value}>
-            <pre className="whitespace-pre-wrap break-words text-fg-1">{value}</pre>
-          </SizePreview>
-        </FieldRow>
+        <div className="space-y-2">
+          <div className="grid grid-cols-[140px_1fr] gap-x-3 gap-y-[2px]">
+            <FieldRow label="name">
+              <Mono className="text-[var(--color-cat-tools)]">{event.name}</Mono>
+            </FieldRow>
+            <FieldRow label="toolCallId">
+              <Mono>{event.toolCallId}</Mono>
+            </FieldRow>
+            <FieldRow label="step">
+              <span className="text-[var(--color-sev-info)]">{event.step}</span>
+            </FieldRow>
+            <FieldRow label="turnId">
+              <Mono>{event.turnId}</Mono>
+            </FieldRow>
+            {event.description ? (
+              <FieldRow label="description" wide>
+                <pre className="whitespace-pre-wrap break-words text-fg-1">
+                  {event.description}
+                </pre>
+              </FieldRow>
+            ) : null}
+          </div>
+          <div>
+            <div className="mb-1 text-fg-2">args</div>
+            <JsonViewer value={parsed} defaultOpenDepth={2} />
+          </div>
+          {event.display ? (
+            <div>
+              <div className="mb-1 text-fg-2">display</div>
+              <JsonViewer value={event.display} defaultOpenDepth={1} />
+            </div>
+          ) : null}
+        </div>
       );
     }
-    // non-string large fields: JSON tree
-    return (
-      <FieldRow key={path} label={key} wide>
-        <SizePreview label={key} sizeBytes={JSON.stringify(value).length}>
-          <JsonViewer value={value} defaultOpenDepth={1} />
-        </SizePreview>
-      </FieldRow>
-    );
-  }
-
-  // Primitive
-  if (typeof value !== 'object') {
-    const repr =
-      typeof value === 'string'
-        ? `"${truncate(value, 160)}"`
-        : typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint'
-          ? String(value)
-          : typeof value;
-    return (
-      <FieldRow key={path} label={key}>
-        <span className={typeColor(value)}>{repr}</span>
-      </FieldRow>
-    );
+    case 'tool.result': {
+      const isError = event.result.isError === true;
+      const output = event.result.output;
+      return (
+        <div className="space-y-2">
+          <div className="grid grid-cols-[140px_1fr] gap-x-3 gap-y-[2px]">
+            <FieldRow label="toolCallId">
+              <Mono>{event.toolCallId}</Mono>
+            </FieldRow>
+            <FieldRow label="parentUuid">
+              <Mono>{event.parentUuid}</Mono>
+            </FieldRow>
+            <FieldRow label="isError">
+              <span
+                className={
+                  isError ? 'text-[var(--color-sev-error)]' : 'text-[var(--color-sev-success)]'
+                }
+              >
+                {String(isError)}
+              </span>
+            </FieldRow>
+            {event.result.message !== undefined ? (
+              <FieldRow label="message" wide>
+                <pre className="whitespace-pre-wrap break-words text-fg-1">
+                  {event.result.message}
+                </pre>
+              </FieldRow>
+            ) : null}
+          </div>
+          <div>
+            <div className="mb-1 text-fg-2">output</div>
+            {typeof output === 'string' ? (
+              <SizePreview label="output" sizeBytes={output.length} preview={output}>
+                <pre className="whitespace-pre-wrap break-words text-fg-1">{output}</pre>
+              </SizePreview>
+            ) : (
+              <div className="space-y-1">
+                {output.map((p, i) => (
+                  <ContentPartView key={i} part={p} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+    case 'step.begin':
+    case 'step.end':
+    case 'content.part':
+      return <JsonViewer value={event} defaultOpenDepth={2} />;
+    default:
+      return <JsonViewer value={event} defaultOpenDepth={2} />;
   }
+}
 
-  // Nested object: inline JsonViewer
-  return (
-    <FieldRow key={path} label={key} wide>
-      <JsonViewer value={value} defaultOpenDepth={1} />
-    </FieldRow>
-  );
+function Mono({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <span className={`font-mono text-[12px] text-fg-0 ${className}`}>{children}</span>;
 }
 
 function FieldRow({
@@ -218,19 +311,17 @@ function FieldRow({
   wide = false,
 }: {
   label: string;
-  children: ReactNode;
+  children: React.ReactNode;
   wide?: boolean;
 }) {
   if (wide) {
     return (
-      <>
-        <div className="col-span-2 flex items-baseline gap-3">
-          <span className="w-[140px] shrink-0 font-mono text-[11px] text-fg-2 text-right">
-            {label}
-          </span>
-          <div className="flex-1 min-w-0">{children}</div>
-        </div>
-      </>
+      <div className="col-span-2 flex items-baseline gap-3">
+        <span className="w-[140px] shrink-0 font-mono text-[11px] text-fg-2 text-right">
+          {label}
+        </span>
+        <div className="flex-1 min-w-0">{children}</div>
+      </div>
     );
   }
   return (
@@ -240,14 +331,3 @@ function FieldRow({
     </>
   );
 }
-
-function typeColor(v: unknown): string {
-  if (typeof v === 'boolean') return 'text-[var(--color-cat-config)]';
-  if (typeof v === 'number') return 'text-[var(--color-sev-info)]';
-  if (typeof v === 'string') return 'text-[var(--color-cat-ephemeral)]';
-  return 'text-fg-0';
-}
-
-function truncate(s: string, n: number): string {
-  return s.length <= n ? s : s.slice(0, n) + '…';
-}
diff --git a/apps/vis/web/src/components/wire/WireTab.tsx b/apps/vis/web/src/components/wire/WireTab.tsx
index 45b515d..30feb07 100644
--- a/apps/vis/web/src/components/wire/WireTab.tsx
+++ b/apps/vis/web/src/components/wire/WireTab.tsx
@@ -1,265 +1,140 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { FocusProvider, useFocus } from '../../lib/focus-context';
+import { useSession } from '../../hooks/useSession';
+import { useWire } from '../../hooks/useWire';
 import { computeIssues, topSeverity } from '../../lib/issues';
-import {
-  buildMatchContext,
-  matchesQuery,
-  parseQuery,
-  type ParsedQuery,
-  type QueryToken,
-} from '../../lib/query-parser';
-import type { VisWireRecord, WireCategory } from '../../types';
-import { TYPE_CATEGORY } from '../../types';
+import type { WireLine } from '../../types';
 import { IssuesDrawer } from './IssuesDrawer';
 import { WireRow } from './WireRow';
 
 interface WireTabProps {
-  records: VisWireRecord[];
-  health?: 'ok' | 'broken';
-  brokenReason?: string;
-  warnings?: string[];
+  sessionId: string;
+  /** Override starting agentId; defaults to 'main'. */
+  initialAgentId?: string;
 }
 
-const CATEGORIES: WireCategory[] = [
-  'conversation',
-  'tools',
-  'approval',
-  'subagent',
-  'ephemeral',
-  'meta',
-  'config',
-  'lifecycle',
-];
-
-const CAT_COLOR_VAR: Record<WireCategory, string> = {
-  conversation: '--color-cat-conversation',
-  config: '--color-cat-config',
-  lifecycle: '--color-cat-lifecycle',
-  subagent: '--color-cat-subagent',
-  approval: '--color-cat-approval',
-  ephemeral: '--color-cat-ephemeral',
-  meta: '--color-cat-meta',
-  tools: '--color-cat-tools',
-};
-
-export function WireTab(props: WireTabProps) {
-  // The FocusProvider wraps the entire tab so IdBadge clicks deep inside
-  // the virtualized rows can update (and be read by) the toolbar status
-  // indicator without prop-drilling.
-  return (
-    <FocusProvider>
-      <WireTabInner {...props} />
-    </FocusProvider>
-  );
-}
+export function WireTab({ sessionId, initialAgentId = 'main' }: WireTabProps) {
+  const [agentId, setAgentId] = useState<string>(initialAgentId);
+  // Re-sync when the route changes the prop while this component stays
+  // mounted (e.g. navigating between /sessions/x/agents/a → /agents/b).
+  useEffect(() => {
+    setAgentId(initialAgentId);
+  }, [initialAgentId]);
+  const { data: detail } = useSession(sessionId);
+  const { data: wire, isLoading, error } = useWire(sessionId, agentId);
+  const parentRef = useRef<HTMLDivElement>(null);
 
-function WireTabInner({ records, health, brokenReason, warnings = [] }: WireTabProps) {
   const [search, setSearch] = useState('');
-  const [excluded, setExcluded] = useState(new Set());
-  const [expanded, setExpanded] = useState(new Set());
-  const [showHelp, setShowHelp] = useState(false);
+  const [expanded, setExpanded] = useState<Set<number>>(new Set());
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const parentRef = useRef<HTMLDivElement>(null);
 
-  const query = useMemo<ParsedQuery>(() => parseQuery(search), [search]);
-
-  const matchCtx = useMemo(() => buildMatchContext(records, query), [records, query]);
+  const records: WireLine[] = useMemo(() => {
+    return (wire?.records ?? []) as WireLine[];
+  }, [wire?.records]);
+  const warnings = wire?.warnings ?? [];
 
   const filtered = useMemo(() => {
+    if (search.length === 0) return records;
+    const needle = search.toLowerCase();
     return records.filter((r) => {
-      const cat = TYPE_CATEGORY[r.type];
-      if (excluded.has(cat)) return false;
-      return matchesQuery(r, query, matchCtx);
-    });
-  }, [records, excluded, query, matchCtx]);
-
-  // Pair map: tool_call_id → the two sides. Built from the full records[]
-  // (not `filtered`) so jumping from a filtered view still works when the
-  // counterpart has been filtered out — the detail panel will just mark it
-  // "(hidden by current filter)".
-  const pairMap = useMemo(() => {
-    const m = new Map<string, { call?: VisWireRecord; result?: VisWireRecord }>();
-    for (const r of records) {
-      if (r.type === 'tool_call') {
-        const id = (r as { data?: { tool_call_id?: string } }).data?.tool_call_id;
-        if (id !== undefined) {
-          const slot = m.get(id) ?? {};
-          slot.call = r;
-          m.set(id, slot);
-        }
-      } else if (r.type === 'tool_result') {
-        const id = (r as { tool_call_id?: string }).tool_call_id;
-        if (id !== undefined) {
-          const slot = m.get(id) ?? {};
-          slot.result = r;
-          m.set(id, slot);
-        }
-      }
-    }
-    return m;
-  }, [records]);
-
-  /** Find the counterpart for a tool_call / tool_result row (undefined otherwise). */
-  const pairedFor = useCallback(
-    (r: VisWireRecord): VisWireRecord | undefined => {
-      if (r.type === 'tool_call') {
-        const id = (r as { data?: { tool_call_id?: string } }).data?.tool_call_id;
-        return id === undefined ? undefined : pairMap.get(id)?.result;
+      if (r.type.toLowerCase().includes(needle)) return true;
+      try {
+        return JSON.stringify(r).toLowerCase().includes(needle);
+      } catch {
+        return false;
       }
-      if (r.type === 'tool_result') {
-        const id = (r as { tool_call_id?: string }).tool_call_id;
-        return id === undefined ? undefined : pairMap.get(id)?.call;
-      }
-      return undefined;
-    },
-    [pairMap],
-  );
-
-  // Compute per-category counts over the unfiltered set
-  const catCounts = useMemo(() => {
-    const m = new Map<WireCategory, number>();
-    for (const r of records) {
-      const c = TYPE_CATEGORY[r.type];
-      m.set(c, (m.get(c) ?? 0) + 1);
-    }
-    return m;
-  }, [records]);
-
-  const turnCount = useMemo(() => records.filter((r) => r.type === 'turn_begin').length, [records]);
+    });
+  }, [records, search]);
 
-  // Issues are computed over the full records[] + file warnings (not the
-  // filter result) so the pill keeps showing real problems even when the
-  // user has narrowed their query. Jumping to an issue scrolls the Wire
-  // list — if the issue's seq is currently filtered out, `jumpToSeq` is
-  // a no-op and the drawer just closes.
   const issues = useMemo(() => computeIssues(records, warnings), [records, warnings]);
   const issuesSeverity = topSeverity(issues);
 
-  // Stable estimate — ResizeObserver (wired via `virt.measureElement` ref
-  // on each item) refines to the actual rendered height. Do NOT vary the
-  // estimate based on `expanded`: that fights the library's measurement
-  // cache and produces layout gaps when the two race.
   const virt = useVirtualizer({
     count: filtered.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 28,
     overscan: 10,
-    getItemKey: (i) => filtered[i]?.seq ?? i,
+    getItemKey: (i) => filtered[i]?._lineNo ?? i,
   });
 
-  const toggle = useCallback((seq: number) => {
-    // Trust the library's ResizeObserver to catch the new content size —
-    // calling `virt.measure()` manually here races with the observer and
-    // can clear freshly-written cache entries, stranding items at their
-    // `estimateSize` value and producing visible gaps.
+  const toggle = useCallback((lineNo: number) => {
     setExpanded((prev) => {
       const next = new Set(prev);
-      if (next.has(seq)) next.delete(seq);
-      else next.add(seq);
+      if (next.has(lineNo)) next.delete(lineNo);
+      else next.add(lineNo);
       return next;
     });
   }, []);
 
-  /** Seq → index lookup built from the filtered list. Doubles as the
-   *  "is this seq currently visible?" test used by pairing + issues jumps. */
-  const filteredSeqIdx = useMemo(() => {
+  const filteredLineIdx = useMemo(() => {
     const m = new Map<number, number>();
     for (let i = 0; i < filtered.length; i += 1) {
       const r = filtered[i];
-      if (r !== undefined) m.set(r.seq, i);
+      if (r !== undefined) m.set(r._lineNo, i);
     }
     return m;
   }, [filtered]);
 
-  /** Jump to a specific seq: scroll the row into view and expand it.
-   *  No-op if the seq isn't in the current filtered set — callers can
-   *  check `filteredSeqIdx.has(seq)` ahead of time and disable the link. */
-  const jumpToSeq = useCallback(
-    (seq: number) => {
-      const idx = filteredSeqIdx.get(seq);
+  const jumpToLine = useCallback(
+    (lineNo: number) => {
+      const idx = filteredLineIdx.get(lineNo);
       if (idx === undefined) return;
       virt.scrollToIndex(idx, { align: 'center' });
-      setExpanded((prev) => (prev.has(seq) ? prev : new Set(prev).add(seq)));
+      setExpanded((prev) => (prev.has(lineNo) ? prev : new Set(prev).add(lineNo)));
     },
-    [filteredSeqIdx, virt],
+    [filteredLineIdx, virt],
   );
 
-  const toggleCat = (c: WireCategory) => {
-    setExcluded((prev) => {
-      const next = new Set(prev);
-      if (next.has(c)) next.delete(c);
-      else next.add(c);
-      return next;
-    });
+  const expandAll = () => {
+    setExpanded(new Set(filtered.map((r) => r._lineNo)));
+  };
+  const collapseAll = () => {
+    setExpanded(new Set());
   };
 
-  const expandAll = () =>{  setExpanded(new Set(filtered.map((r) => r.seq))); };
-  const collapseAll = () =>{  setExpanded(new Set()); };
-
-  const hasStructuredTokens = query.tokens.some((t) => t.key !== null) || query.errors.length > 0;
+  const agents = detail?.agents ?? [];
 
   return (
     <div className="relative flex min-h-0 flex-1 flex-col">
       {/* Toolbar */}
       <div className="flex shrink-0 items-center gap-3 border-b border-border bg-surface-1 px-3 py-2">
-        <div className="relative flex items-center">
-          <input
-            type="text"
-            placeholder="type:tool_call tool:Bash error:true …"
-            value={search}
-            onChange={(e) =>{  setSearch(e.target.value); }}
-            className="w-80 border border-border bg-surface-0 px-2 py-1 pr-7 font-mono text-[12px] text-fg-0 placeholder:text-fg-3 focus:border-border-strong focus:outline-none"
-          />
-          <button
-            type="button"
-            onClick={() =>{  setShowHelp((v) => !v); }}
-            title="query syntax cheatsheet"
-            className="absolute right-1 top-1/2 -translate-y-1/2 font-mono text-[11px] text-fg-3 hover:text-fg-0"
+        <label className="flex items-center gap-2 font-mono text-[11px] text-fg-2">
+          <span className="text-fg-3">agent</span>
+          <select
+            value={agentId}
+            onChange={(e) => {
+              setAgentId(e.target.value);
+            }}
+            className="border border-border bg-surface-0 px-2 py-1 font-mono text-[12px] text-fg-0 focus:border-border-strong focus:outline-none"
           >
-            ?
-          </button>
-          {showHelp ? <QueryHelp onClose={() =>{  setShowHelp(false); }} /> : null}
-        </div>
-        <div className="flex items-center gap-1">
-          {CATEGORIES.map((c) => {
-            const count = catCounts.get(c) ?? 0;
-            if (count === 0) return null;
-            const on = !excluded.has(c);
-            const color = `var(${CAT_COLOR_VAR[c]})`;
-            return (
-              <button
-                key={c}
-                onClick={() =>{  toggleCat(c); }}
-                title={`Toggle ${c} (${count})`}
-                className="pill"
-                style={
-                  on
-                    ? {
-                        backgroundColor: `color-mix(in oklab, ${color} 18%, transparent)`,
-                        color,
-                      }
-                    : {
-                        border: '1px solid var(--color-border)',
-                        color: 'var(--color-fg-3)',
-                      }
-                }
-              >
-                <span>{c}</span>
-                <span className="tabular">{count}</span>
-              </button>
-            );
-          })}
-        </div>
+            {agents.length === 0 ? <option value={agentId}>{agentId}</option> : null}
+            {agents.map((a) => (
+              <option key={a.agentId} value={a.agentId}>
+                {a.agentId} ({a.type}
+                {a.parentAgentId ? ` ← ${a.parentAgentId}` : ''})
+              </option>
+            ))}
+          </select>
+        </label>
+        <input
+          type="text"
+          placeholder="search records (substring)"
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+          className="w-80 border border-border bg-surface-0 px-2 py-1 font-mono text-[12px] text-fg-0 placeholder:text-fg-3 focus:border-border-strong focus:outline-none"
+        />
         <div className="ml-auto flex items-center gap-3 font-mono text-[11px] text-fg-2">
           <span className="tabular">
             {filtered.length} / {records.length} ev
           </span>
-          <span className="tabular text-fg-3">{turnCount} turns</span>
           {issues.length > 0 && issuesSeverity !== null ? (
             <button
-              onClick={() =>{  setDrawerOpen(true); }}
+              onClick={() => {
+                setDrawerOpen(true);
+              }}
               title={`${issues.length} issue${issues.length > 1 ? 's' : ''} — click to inspect`}
               className="flex items-center gap-1 border px-2 py-0.5"
               style={{
@@ -289,236 +164,73 @@ function WireTabInner({ records, health, brokenReason, warnings = [] }: WireTabP
         </div>
       </div>
 
-      {/* Query chips — one-line summary of parsed filters, each removable */}
-      {hasStructuredTokens ? (
-        <div className="flex shrink-0 flex-wrap items-center gap-1 border-b border-border bg-surface-1 px-3 py-1">
-          {query.tokens
-            .filter((t) => t.key !== null)
-            .map((t, i) => {
-              const invalid = query.errors.some((e) => e.token === t.raw);
-              return (
-                <QueryChip
-                  key={`${t.raw}-${i}`}
-                  token={t}
-                  invalid={invalid}
-                  onRemove={() =>{  setSearch((s) => removeToken(s, t.raw)); }}
-                />
-              );
-            })}
-          {query.errors.length > 0 ? (
-            <span
-              className="font-mono text-[10px] text-[var(--color-sev-warning)]"
-              title={query.errors.map((e) => `${e.token}: ${e.reason}`).join('\n')}
-            >
-              · {query.errors.length} unknown
-            </span>
-          ) : null}
-        </div>
-      ) : null}
-
-      <FocusStatus />
-
-      {/* Health warning */}
-      {health === 'broken' ? (
-        <div className="shrink-0 border-b border-[var(--color-sev-error)] bg-[color-mix(in_oklab,var(--color-sev-error)_12%,transparent)] px-3 py-1 font-mono text-[11px] text-[var(--color-sev-error)]">
-          broken: {brokenReason ?? 'unknown reason'}
-        </div>
-      ) : null}
       {warnings.length > 0 ? (
         <div className="shrink-0 border-b border-[var(--color-sev-warning)] bg-[color-mix(in_oklab,var(--color-sev-warning)_8%,transparent)] px-3 py-1 font-mono text-[11px] text-[var(--color-sev-warning)]">
           {warnings.length} warning{warnings.length > 1 ? 's' : ''} · first: {warnings[0]}
         </div>
       ) : null}
 
-      {/* Virtualized list */}
-      <div ref={parentRef} className="min-h-0 flex-1 overflow-y-auto">
-        {filtered.length === 0 ? (
-          <div className="p-6 font-mono text-[12px] text-fg-3">
-            no records match the current filter
-          </div>
-        ) : (
-          <div
-            style={{
-              height: virt.getTotalSize(),
-              position: 'relative',
-            }}
-          >
-            {virt.getVirtualItems().map((vi) => {
-              const r = filtered[vi.index];
-              if (!r) return null;
-              // Compute the counterpart once per row — paired lookup runs
-              // inside a virtualized render loop, so duplicating the call
-              // meant ~40 redundant ops per scroll tick on deep sessions.
-              const paired = pairedFor(r);
-              const pairedInFiltered = paired === undefined ? null : filteredSeqIdx.has(paired.seq);
-              return (
-                <div
-                  key={vi.key}
-                  data-index={vi.index}
-                  ref={virt.measureElement}
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    transform: `translateY(${vi.start}px)`,
-                  }}
-                >
-                  <WireRow
-                    record={r}
-                    expanded={expanded.has(r.seq)}
-                    onToggle={() =>{  toggle(r.seq); }}
-                    paired={paired}
-                    pairedInFiltered={pairedInFiltered}
-                    onJumpTo={jumpToSeq}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
+      {isLoading ? (
+        <div className="p-6 font-mono text-[12px] text-fg-3">loading wire…</div>
+      ) : error ? (
+        <div className="p-6 font-mono text-[12px] text-[var(--color-sev-error)]">
+          {(error as Error).message}
+        </div>
+      ) : (
+        <div ref={parentRef} className="min-h-0 flex-1 overflow-y-auto">
+          {filtered.length === 0 ? (
+            <div className="p-6 font-mono text-[12px] text-fg-3">
+              no records match the current filter
+            </div>
+          ) : (
+            <div
+              style={{
+                height: virt.getTotalSize(),
+                position: 'relative',
+              }}
+            >
+              {virt.getVirtualItems().map((vi) => {
+                const r = filtered[vi.index];
+                if (!r) return null;
+                return (
+                  <div
+                    key={vi.key}
+                    data-index={vi.index}
+                    ref={virt.measureElement}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${vi.start}px)`,
+                    }}
+                  >
+                    <WireRow
+                      record={r}
+                      expanded={expanded.has(r._lineNo)}
+                      onToggle={() => {
+                        toggle(r._lineNo);
+                      }}
+                      onJumpTo={jumpToLine}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
       {drawerOpen ? (
         <IssuesDrawer
           issues={issues}
-          onClose={() =>{  setDrawerOpen(false); }}
-          onJumpTo={jumpToSeq}
-          isSeqVisible={(seq) => filteredSeqIdx.has(seq)}
+          onClose={() => {
+            setDrawerOpen(false);
+          }}
+          onJumpTo={jumpToLine}
+          isLineVisible={(lineNo) => filteredLineIdx.has(lineNo)}
         />
       ) : null}
     </div>
   );
 }
-
-// ──────── helper subcomponents ────────
-
-function QueryChip({
-  token,
-  invalid,
-  onRemove,
-}: {
-  token: QueryToken;
-  invalid: boolean;
-  onRemove: () => void;
-}) {
-  const label = `${token.key}${token.op === '=' ? ':' : token.op}${token.values.join(',')}`;
-  return (
-    <span
-      className={[
-        'inline-flex items-center gap-1 border px-1.5 py-0.5 font-mono text-[10px]',
-        invalid
-          ? 'border-[var(--color-sev-error)] text-[var(--color-sev-error)]'
-          : 'border-border bg-surface-0 text-fg-1',
-      ].join(' ')}
-    >
-      <span>{label}</span>
-      <button
-        type="button"
-        onClick={onRemove}
-        className="text-fg-3 hover:text-fg-0"
-        title="remove filter"
-      >
-        ×
-      </button>
-    </span>
-  );
-}
-
-function QueryHelp({ onClose }: { onClose: () => void }) {
-  // Dismiss on: ESC, or outside click. `onMouseLeave` was too twitchy —
-  // the panel would flash shut on mouse tremor near its edge.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    const onDocClick = (e: MouseEvent) => {
-      const t = e.target as HTMLElement | null;
-      if (t?.closest('[data-query-help-root]')) return;
-      onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    // defer doc listener one tick so the opening click doesn't immediately close us
-    const id = window.setTimeout(() => {
-      document.addEventListener('mousedown', onDocClick);
-    }, 0);
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      window.clearTimeout(id);
-      document.removeEventListener('mousedown', onDocClick);
-    };
-  }, [onClose]);
-  return (
-    <div
-      data-query-help-root="true"
-      className="absolute left-0 top-full z-20 mt-1 w-[420px] border border-border bg-surface-0 p-3 font-mono text-[11px] text-fg-1 shadow-lg"
-    >
-      <div className="mb-1 text-fg-0">query syntax</div>
-      <ul className="space-y-0.5 text-fg-2">
-        <li>
-          <span className="text-fg-0">type:</span>tool_call · type:user_message,tool_result ·
-          type:!compaction
-        </li>
-        <li>
-          <span className="text-fg-0">tool:</span>Bash · tool:Read,Write
-        </li>
-        <li>
-          <span className="text-fg-0">turn:</span>3 · turn:turn_5
-        </li>
-        <li>
-          <span className="text-fg-0">seq:</span>
-          {'>'}100 · seq:&lt;50 · seq:&gt;=200
-        </li>
-        <li>
-          <span className="text-fg-0">error:</span>true · error:false
-        </li>
-        <li>
-          <span className="text-fg-0">agent:</span>sub_abc123 (substring)
-        </li>
-        <li>
-          <span className="text-fg-0">id:</span>abc123 (matches any id field)
-        </li>
-        <li>
-          <span className="text-fg-3">bare words → JSON substring (AND)</span>
-        </li>
-      </ul>
-      <div className="mt-2 text-fg-3">
-        tip: click an underlined id in any row to focus all related records · ESC to clear
-      </div>
-    </div>
-  );
-}
-
-function FocusStatus() {
-  const { focus, clear } = useFocus();
-  if (focus === null) return null;
-  return (
-    <div className="flex shrink-0 items-center gap-2 border-b border-[var(--color-sev-info)]/40 bg-[color-mix(in_oklab,var(--color-sev-info)_8%,transparent)] px-3 py-1 font-mono text-[11px] text-fg-1">
-      <span className="text-[var(--color-sev-info)]">◎ focus</span>
-      <span className="text-fg-2">{focus.kind}</span>
-      <span className="text-fg-3">=</span>
-      <span className="text-fg-0">
-        {focus.value.length > 24 ? focus.value.slice(0, 24) + '…' : focus.value}
-      </span>
-      <button
-        type="button"
-        onClick={clear}
-        className="ml-auto text-fg-3 hover:text-fg-0"
-        title="clear focus (ESC)"
-      >
-        clear
-      </button>
-    </div>
-  );
-}
-
-/** Remove a single structured token from the raw search string. Used when
- *  the user clicks the × on a chip. Matches the token's `raw` text exactly,
- *  trimming adjacent whitespace. */
-function removeToken(input: string, raw: string): string {
-  const re = new RegExp(`(^|\\s)${escapeRegExp(raw)}(?=\\s|$)`);
-  return input.replace(re, '').replaceAll(/\s+/g, ' ').trim();
-}
-
-function escapeRegExp(s: string): string {
-  return s.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
-}
diff --git a/apps/vis/web/src/components/wire/typeMeta.ts b/apps/vis/web/src/components/wire/typeMeta.ts
index d965a2b..2f02bf0 100644
--- a/apps/vis/web/src/components/wire/typeMeta.ts
+++ b/apps/vis/web/src/components/wire/typeMeta.ts
@@ -1,67 +1,60 @@
-import type { WireCategory, WireRecordType } from '../../types';
+import type { AgentRecord } from '../../types';
+import type { PillTone } from '../shared/Pill';
 
-/** Unicode icon for each wire type. Chosen for distinguishability in a dense list. */
-export const TYPE_ICON: Record<WireRecordType, string> = {
-  metadata: '§',
-  session_initialized: '✧',
-  turn_begin: '▶',
-  turn_end: '◼',
-  user_message: '▷',
-  tool_result: '✓',
-  compaction: '⏪',
-  system_prompt_changed: '¶',
-  tools_changed: '⚙',
-  system_reminder: '!',
-  notification: '◉',
-  // Streaming atoms: step boundary, streamed part, tool call
-  step_begin: '┌',
-  step_end: '┘',
-  content_part: '◆',
-  tool_call: '→',
-  tool_denied: '⊘',
-  skill_invoked: '★',
-  skill_completed: '★',
-  approval_request: '?',
-  approval_response: '·',
-  team_mail: '✉',
-  subagent_spawned: '┬',
-  subagent_completed: '└',
-  subagent_failed: '×',
-  ownership_changed: '↔',
-  context_edit: '✂',
-  context_cleared: '∅',
+type RecordType = AgentRecord['type'];
+
+/** Visual tone for each record type. */
+export const TYPE_TONE: Record<RecordType, PillTone> = {
+  'metadata':                              'meta',
+  'config.update':                         'config',
+  'turn.prompt':                           'turn',
+  'turn.steer':                            'turn',
+  'turn.cancel':                           'warning',
+  'context.append_message':                'assistant',
+  'context.append_loop_event':             'meta',
+  'context.mark_last_user_prompt_blocked': 'warning',
+  'context.clear':                         'warning',
+  'context.apply_compaction':              'compaction',
+  'tools.register_user_tool':              'tools',
+  'tools.unregister_user_tool':            'tools',
+  'tools.set_active_tools':                'tools',
+  'tools.update_store':                    'meta',
+  'permission.set_mode':                   'approval',
+  'permission.record_approval_result':     'approval',
+  'usage.record':                          'meta',
+  'full_compaction.begin':                 'compaction',
+  'full_compaction.cancel':                'warning',
+  'full_compaction.complete':              'success',
+  'plan_mode.enter':                       'lifecycle',
+  'plan_mode.cancel':                      'warning',
+  'plan_mode.exit':                        'success',
+  'background.stop':                       'warning',
 };
 
-/** Tone key used by <Pill/>. Most types fall back to their category color. */
-export const TYPE_TONE: Record<
-  WireRecordType,
-  WireCategory | 'user' | 'assistant' | 'tool' | 'compaction' | 'turn'
-> = {
-  metadata: 'meta',
-  session_initialized: 'config',
-  turn_begin: 'turn',
-  turn_end: 'turn',
-  user_message: 'user',
-  tool_result: 'tool',
-  compaction: 'compaction',
-  system_prompt_changed: 'config',
-  tools_changed: 'config',
-  system_reminder: 'ephemeral',
-  notification: 'meta',
-  step_begin: 'turn',
-  step_end: 'turn',
-  content_part: 'assistant',
-  tool_call: 'tools',
-  tool_denied: 'approval',
-  skill_invoked: 'tools',
-  skill_completed: 'tools',
-  approval_request: 'approval',
-  approval_response: 'approval',
-  team_mail: 'meta',
-  subagent_spawned: 'subagent',
-  subagent_completed: 'subagent',
-  subagent_failed: 'subagent',
-  ownership_changed: 'lifecycle',
-  context_edit: 'lifecycle',
-  context_cleared: 'lifecycle',
+/** Compact human label for each record type (used in the type badge). */
+export const TYPE_LABEL: Record<RecordType, string> = {
+  'metadata': 'meta',
+  'config.update': 'config',
+  'turn.prompt': 'prompt',
+  'turn.steer': 'steer',
+  'turn.cancel': 'cancel',
+  'context.append_message': 'message',
+  'context.append_loop_event': 'loop',
+  'context.mark_last_user_prompt_blocked': 'blocked',
+  'context.clear': 'clear',
+  'context.apply_compaction': 'compacted',
+  'tools.register_user_tool': 'tool+',
+  'tools.unregister_user_tool': 'tool-',
+  'tools.set_active_tools': 'tools',
+  'tools.update_store': 'store',
+  'permission.set_mode': 'perm',
+  'permission.record_approval_result': 'approval',
+  'usage.record': 'usage',
+  'full_compaction.begin': 'compact↻',
+  'full_compaction.cancel': 'compact×',
+  'full_compaction.complete': 'compact✓',
+  'plan_mode.enter': 'plan↻',
+  'plan_mode.cancel': 'plan×',
+  'plan_mode.exit': 'plan✓',
+  'background.stop': 'bg-stop',
 };
diff --git a/apps/vis/web/src/hooks/useContext.ts b/apps/vis/web/src/hooks/useContext.ts
index 3b98ee9..ab0208a 100644
--- a/apps/vis/web/src/hooks/useContext.ts
+++ b/apps/vis/web/src/hooks/useContext.ts
@@ -1,34 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../api';
 
-export function useSessionContext(sessionId: string | undefined, enabled = true) {
+/**
+ * Fetch the projected context for a given agent in a session.
+ *
+ * The `/api/sessions/:id/context?agent=<agentId>` route returns the
+ * full `ContextProjection` (messages, usage totals, config snapshot,
+ * permission mode, plan mode). Defaults to `main` when no agent id
+ * is provided, but callers should pass an explicit id for clarity.
+ */
+export function useContext(sessionId: string, agentId: string) {
   return useQuery({
-    queryKey: ['session', sessionId, 'context'] as const,
-    queryFn: () => api.getContext(sessionId!),
-    enabled: !!sessionId && enabled,
-  });
-}
-
-export function useSubagentContext(
-  sessionId: string | undefined,
-  agentId: string | undefined,
-  enabled = true,
-) {
-  return useQuery({
-    queryKey: ['session', sessionId, 'subagent', agentId, 'context'] as const,
-    queryFn: () => api.getSubagentContext(sessionId!, agentId!),
-    enabled: !!sessionId && !!agentId && enabled,
-  });
-}
-
-export function useToolResult(
-  sessionId: string | undefined,
-  toolCallId: string | undefined,
-  enabled = true,
-) {
-  return useQuery({
-    queryKey: ['session', sessionId, 'tool-result', toolCallId] as const,
-    queryFn: () => api.getToolResult(sessionId!, toolCallId!),
-    enabled: !!sessionId && !!toolCallId && enabled,
+    queryKey: ['context', sessionId, agentId] as const,
+    queryFn: () => api.getContext(sessionId, agentId),
+    enabled: sessionId.length > 0 && agentId.length > 0,
   });
 }
diff --git a/apps/vis/web/src/hooks/useSession.ts b/apps/vis/web/src/hooks/useSession.ts
index 339541e..798bf65 100644
--- a/apps/vis/web/src/hooks/useSession.ts
+++ b/apps/vis/web/src/hooks/useSession.ts
@@ -23,24 +23,10 @@ export function useDeleteSession() {
     mutationFn: (sessionId: string) => api.deleteSession(sessionId),
     onSuccess: (_result, sessionId) => {
       qc.setQueryData<SessionSummary[]>(['sessions'], (old) =>
-        old?.filter((s) => s.session_id !== sessionId),
+        old?.filter((s) => s.sessionId !== sessionId),
       );
       qc.removeQueries({ queryKey: ['session', sessionId] });
       void qc.invalidateQueries({ queryKey: ['sessions'] });
     },
   });
 }
-
-export function useClearSessions() {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: () => api.clearSessions(),
-    onSuccess: (result) => {
-      if (result.failed.length === 0) {
-        qc.setQueryData<SessionSummary[]>(['sessions'], []);
-        qc.removeQueries({ queryKey: ['session'] });
-      }
-      void qc.invalidateQueries({ queryKey: ['sessions'] });
-    },
-  });
-}
diff --git a/apps/vis/web/src/hooks/useSubagents.ts b/apps/vis/web/src/hooks/useSubagents.ts
index 075a19a..013a077 100644
--- a/apps/vis/web/src/hooks/useSubagents.ts
+++ b/apps/vis/web/src/hooks/useSubagents.ts
@@ -1,21 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../api';
 
-export function useSubagents(sessionId: string | undefined, enabled = true) {
+export function useAgentTree(sessionId: string | undefined, enabled = true) {
   return useQuery({
-    queryKey: ['session', sessionId, 'subagents'] as const,
-    queryFn: () => api.getSubagents(sessionId!),
+    queryKey: ['session', sessionId, 'agents'] as const,
+    queryFn: () => api.getAgentTree(sessionId!),
     enabled: !!sessionId && enabled,
   });
 }
-
-export function useSubagentMeta(
-  sessionId: string | undefined,
-  agentId: string | undefined,
-) {
-  return useQuery({
-    queryKey: ['session', sessionId, 'subagent', agentId, 'meta'] as const,
-    queryFn: () => api.getSubagentMeta(sessionId!, agentId!),
-    enabled: !!sessionId && !!agentId,
-  });
-}
diff --git a/apps/vis/web/src/hooks/useWire.ts b/apps/vis/web/src/hooks/useWire.ts
index 44b3b97..ccd55bc 100644
--- a/apps/vis/web/src/hooks/useWire.ts
+++ b/apps/vis/web/src/hooks/useWire.ts
@@ -1,33 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../api';
 
-export function useWire(sessionId: string | undefined, enabled = true) {
-  return useQuery({
-    queryKey: ['session', sessionId, 'wire'] as const,
-    queryFn: () => api.getWire(sessionId!),
-    enabled: !!sessionId && enabled,
-  });
-}
-
-export function useSubagentWire(
+export function useWire(
   sessionId: string | undefined,
   agentId: string | undefined,
   enabled = true,
 ) {
   return useQuery({
-    queryKey: ['session', sessionId, 'subagent', agentId, 'wire'] as const,
-    queryFn: () => api.getSubagentWire(sessionId!, agentId!),
+    queryKey: ['session', sessionId, 'wire', agentId] as const,
+    queryFn: () => api.getWire(sessionId!, agentId!),
     enabled: !!sessionId && !!agentId && enabled,
   });
 }
-
-export function useArchive(
-  sessionId: string | undefined,
-  filename: string | undefined,
-) {
-  return useQuery({
-    queryKey: ['session', sessionId, 'archive', filename] as const,
-    queryFn: () => api.getArchive(sessionId!, filename!),
-    enabled: !!sessionId && !!filename,
-  });
-}
diff --git a/apps/vis/web/src/lib/focus-context.tsx b/apps/vis/web/src/lib/focus-context.tsx
deleted file mode 100644
index 4174ba1..0000000
--- a/apps/vis/web/src/lib/focus-context.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
-
-import type { VisWireRecord } from '../types';
-
-export type FocusKind = 'turn_id' | 'tool_call_id' | 'agent_id' | 'step_uuid';
-
-export interface Focus {
-  kind: FocusKind;
-  value: string;
-}
-
-interface FocusContextShape {
-  focus: Focus | null;
-  /** Toggle — clicking the same focused id again clears it. */
-  toggle: (f: Focus) => void;
-  clear: () => void;
-}
-
-const FocusCtx = createContext<FocusContextShape | null>(null);
-
-export function FocusProvider({ children }: { children: ReactNode }) {
-  const [focus, setFocus] = useState<Focus | null>(null);
-  const toggle = useCallback((f: Focus) => {
-    setFocus((prev) =>
-      prev !== null && prev.kind === f.kind && prev.value === f.value ? null : f,
-    );
-  }, []);
-  const clear = useCallback(() =>{  setFocus(null); }, []);
-  // ESC clears the focus — one-liner keyboard affordance.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') clear();
-    };
-    window.addEventListener('keydown', onKey);
-    return () =>{  window.removeEventListener('keydown', onKey); };
-  }, [clear]);
-  const value = useMemo<FocusContextShape>(
-    () => ({ focus, toggle, clear }),
-    [focus, toggle, clear],
-  );
-  return <FocusCtx.Provider value={value}>{children}</FocusCtx.Provider>;
-}
-
-export function useFocus(): FocusContextShape {
-  const ctx = useContext(FocusCtx);
-  if (ctx === null) {
-    // Safe default so components outside a provider don't crash.
-    return { focus: null, toggle: () => {}, clear: () => {} };
-  }
-  return ctx;
-}
-
-/**
- * A record "belongs to" the focused id when any of its identifiers matches.
- * Scope is intentionally broad per id kind so click-to-focus behaves like
- * "show me everything related to this thing":
- *
- *   turn_id      → all records with r.turn_id === value
- *   tool_call_id → the tool_call, its tool_result, any approval linked by id
- *   agent_id     → spawn/completed/failed + mail records mentioning this agent
- *   step_uuid    → the step_begin/end + content_parts + tool_calls under it
- */
-export function recordMatchesFocus(r: VisWireRecord, focus: Focus | null): boolean {
-  if (focus === null) return true;
-  const { kind, value } = focus;
-  const rec = r as Record<string, unknown>;
-  const data = (rec['data'] as Record<string, unknown> | undefined) ?? undefined;
-
-  switch (kind) {
-    case 'turn_id':
-      return rec['turn_id'] === value;
-
-    case 'tool_call_id': {
-      if (rec['tool_call_id'] === value) return true;
-      if (data?.['tool_call_id'] === value) return true;
-      if (data?.['parent_tool_call_id'] === value) return true;
-      return false;
-    }
-
-    case 'agent_id': {
-      if (rec['agent_id'] === value) return true;
-      if (data?.['agent_id'] === value) return true;
-      if (data?.['parent_agent_id'] === value) return true;
-      if (data?.['from_agent'] === value) return true;
-      if (data?.['to_agent'] === value) return true;
-      return false;
-    }
-
-    case 'step_uuid':
-      return rec['uuid'] === value || rec['step_uuid'] === value;
-  }
-  // Unreachable — `FocusKind` is exhausted above. Here to satisfy
-  // consistent-return (switch-exhaustiveness isn't narrowed by the rule).
-  return false;
-}
diff --git a/apps/vis/web/src/lib/issues.ts b/apps/vis/web/src/lib/issues.ts
index 6bde9d7..565107d 100644
--- a/apps/vis/web/src/lib/issues.ts
+++ b/apps/vis/web/src/lib/issues.ts
@@ -1,22 +1,34 @@
 // Aggregate every "something went wrong" signal from a wire timeline
 // into a flat list consumable by the Issues drawer. Pure — no React.
+//
+// Detection rules for the new agent-core wire protocol:
+//   - tool.call without paired tool.result (orphan tool.call)
+//   - tool.result without preceding tool.call (orphan tool.result)
+//   - step.begin without paired step.end (incomplete step)
+//   - full_compaction.begin without complete/cancel (incomplete compaction)
+//   - plan_mode.enter without exit/cancel (still in plan mode)
+//   - permission.record_approval_result with decision='rejected' (info)
+//
+// Wire-file parse warnings are appended as info-level entries with no lineNo.
 
-import type { VisWireRecord } from '../types';
+import type { WireLine } from '../types';
 
 export type IssueSeverity = 'error' | 'warning' | 'info';
 
+export type IssueKind =
+  | 'orphan_tool_call'
+  | 'missing_tool_result'
+  | 'incomplete_step'
+  | 'incomplete_compaction'
+  | 'active_plan_mode'
+  | 'rejected_approval'
+  | 'wire_warning';
+
 export interface Issue {
   severity: IssueSeverity;
-  /** Human-readable kind — shown as the row's title. */
-  kind:
-    | 'subagent_failed'
-    | 'tool_error'
-    | 'tool_denied'
-    | 'turn_failed'
-    | 'step_truncated'
-    | 'wire_warning';
-  /** Seq of the offending record. `null` for file-level warnings. */
-  seq: number | null;
+  kind: IssueKind;
+  /** _lineNo of the offending record. `null` for file-level warnings. */
+  lineNo: number | null;
   /** Short summary shown on a single line. */
   summary: string;
   /** Optional second line / tooltip detail. */
@@ -30,127 +42,126 @@ const SEVERITY_ORDER: Record<IssueSeverity, number> = {
 };
 
 /** Scan `records` + `warnings` and produce an ordered issue list.
- *  Sorted by severity first, then seq ascending. Warnings (no seq) go last. */
+ *  Sorted by severity first, then lineNo ascending. Warnings (no lineNo) go last. */
 export function computeIssues(
-  records: readonly VisWireRecord[],
+  records: readonly WireLine[],
   warnings: readonly string[],
 ): Issue[] {
   const out: Issue[] = [];
 
+  // Track in-flight tool calls keyed by toolCallId, step begins by uuid,
+  // compaction begin lineNo, and plan mode enter id.
+  const toolCallById = new Map<string, { lineNo: number; name: string }>();
+  const stepBeginByUuid = new Map<string, { lineNo: number; step: number; turnId: string }>();
+  let lastCompactionBegin: { lineNo: number; source: string } | null = null;
+  let lastPlanEnter: { lineNo: number; id: string } | null = null;
+
   for (const r of records) {
     switch (r.type) {
-      case 'subagent_failed': {
-        const d = (r as { data?: { error?: string; agent_id?: string } }).data ?? {};
-        out.push({
-          severity: 'error',
-          kind: 'subagent_failed',
-          seq: r.seq,
-          summary: firstLine(d.error ?? '(no error message)'),
-          detail: d.agent_id ? `agent ${d.agent_id}` : undefined,
-        });
-        break;
-      }
-      case 'tool_result': {
-        const rec = r as { is_error?: boolean; output?: unknown; tool_call_id?: string };
-        if (rec.is_error === true) {
-          const text =
-            typeof rec.output === 'string'
-              ? rec.output
-              : rec.output !== undefined
-                ? (() => {
-                    try {
-                      return JSON.stringify(rec.output);
-                    } catch {
-                      return '(unserializable output)';
-                    }
-                  })()
-                : '';
-          out.push({
-            severity: 'error',
-            kind: 'tool_error',
-            seq: r.seq,
-            summary: firstLine(text) || '(no output)',
-            detail: rec.tool_call_id ? `call ${rec.tool_call_id}` : undefined,
+      case 'context.append_loop_event': {
+        const ev = r.event;
+        if (ev.type === 'tool.call') {
+          // New in-flight tool call.
+          toolCallById.set(ev.toolCallId, { lineNo: r._lineNo, name: ev.name });
+        } else if (ev.type === 'tool.result') {
+          const open = toolCallById.get(ev.toolCallId);
+          if (open !== undefined) {
+            toolCallById.delete(ev.toolCallId);
+          } else {
+            out.push({
+              severity: 'warning',
+              kind: 'missing_tool_result',
+              lineNo: r._lineNo,
+              summary: `orphan tool.result for #${ev.toolCallId.slice(-8)}`,
+              detail: 'no preceding tool.call seen',
+            });
+          }
+        } else if (ev.type === 'step.begin') {
+          stepBeginByUuid.set(ev.uuid, {
+            lineNo: r._lineNo,
+            step: ev.step,
+            turnId: ev.turnId,
           });
+        } else if (ev.type === 'step.end') {
+          stepBeginByUuid.delete(ev.uuid);
         }
         break;
       }
-      case 'tool_denied': {
-        const d =
-          (r as { data?: { tool_name?: string; reason?: string; rule_id?: string } }).data ?? {};
-        out.push({
-          severity: 'warning',
-          kind: 'tool_denied',
-          seq: r.seq,
-          summary: `${d.tool_name ?? 'tool'} — ${firstLine(d.reason ?? '(no reason)')}`,
-          detail: d.rule_id ? `rule ${d.rule_id}` : undefined,
-        });
+
+      case 'full_compaction.begin':
+        lastCompactionBegin = { lineNo: r._lineNo, source: r.source };
         break;
-      }
-      case 'turn_end': {
-        const rec = r as {
-          success?: boolean;
-          reason?: string;
-          turn_id?: string;
-          synthetic?: boolean;
-        };
-        if (rec.success === false || rec.reason === 'error' || rec.reason === 'interrupted') {
-          out.push({
-            severity: 'warning',
-            kind: 'turn_failed',
-            seq: r.seq,
-            summary: `turn ${rec.turn_id ?? ''} — ${rec.reason ?? 'unknown'}`,
-            detail: rec.synthetic === true ? 'synthetic' : undefined,
-          });
-        }
+      case 'full_compaction.complete':
+      case 'full_compaction.cancel':
+        lastCompactionBegin = null;
         break;
-      }
-      case 'step_end': {
-        const rec = r as { finish_reason?: string; turn_id?: string };
-        if (rec.finish_reason === 'length' || rec.finish_reason === 'error') {
+
+      case 'plan_mode.enter':
+        lastPlanEnter = { lineNo: r._lineNo, id: r.id };
+        break;
+      case 'plan_mode.cancel':
+      case 'plan_mode.exit':
+        lastPlanEnter = null;
+        break;
+
+      case 'permission.record_approval_result':
+        if (r.result.decision === 'rejected') {
           out.push({
             severity: 'info',
-            kind: 'step_truncated',
-            seq: r.seq,
-            summary: `step finished with "${rec.finish_reason}"`,
-            detail: rec.turn_id ? `turn ${rec.turn_id}` : undefined,
+            kind: 'rejected_approval',
+            lineNo: r._lineNo,
+            summary: `${r.toolName}#${r.toolCallId.slice(-8)} rejected`,
+            detail: r.result.feedback,
           });
         }
         break;
-      }
-      case 'approval_request':
-      case 'approval_response':
-      case 'compaction':
-      case 'content_part':
-      case 'context_cleared':
-      case 'context_edit':
-      case 'metadata':
-      case 'notification':
-      case 'ownership_changed':
-      case 'session_initialized':
-      case 'skill_completed':
-      case 'skill_invoked':
-      case 'step_begin':
-      case 'subagent_completed':
-      case 'subagent_spawned':
-      case 'system_prompt_changed':
-      case 'system_reminder':
-      case 'team_mail':
-      case 'tool_call':
-      case 'tools_changed':
-      case 'turn_begin':
-      case 'user_message':
-        break;
+
       default:
         break;
     }
   }
 
-  for (const w of warnings) {
+  // Drain unmatched in-flight entries.
+  for (const [id, info] of toolCallById) {
+    out.push({
+      severity: 'warning',
+      kind: 'orphan_tool_call',
+      lineNo: info.lineNo,
+      summary: `${info.name}#${id.slice(-8)} has no tool.result`,
+      detail: 'tool.call recorded but no matching tool.result found',
+    });
+  }
+  for (const [uuid, info] of stepBeginByUuid) {
+    out.push({
+      severity: 'warning',
+      kind: 'incomplete_step',
+      lineNo: info.lineNo,
+      summary: `step ${info.step} (turn ${info.turnId}) has no step.end`,
+      detail: `uuid ${uuid.slice(-8)}`,
+    });
+  }
+  if (lastCompactionBegin !== null) {
     out.push({
       severity: 'warning',
+      kind: 'incomplete_compaction',
+      lineNo: lastCompactionBegin.lineNo,
+      summary: `${lastCompactionBegin.source} compaction never completed`,
+    });
+  }
+  if (lastPlanEnter !== null) {
+    out.push({
+      severity: 'info',
+      kind: 'active_plan_mode',
+      lineNo: lastPlanEnter.lineNo,
+      summary: `plan mode still active: ${lastPlanEnter.id}`,
+    });
+  }
+
+  for (const w of warnings) {
+    out.push({
+      severity: 'info',
       kind: 'wire_warning',
-      seq: null,
+      lineNo: null,
       summary: firstLine(w),
     });
   }
@@ -158,8 +169,8 @@ export function computeIssues(
   out.sort((a, b) => {
     const d = SEVERITY_ORDER[a.severity] - SEVERITY_ORDER[b.severity];
     if (d !== 0) return d;
-    const sa = a.seq ?? Number.POSITIVE_INFINITY;
-    const sb = b.seq ?? Number.POSITIVE_INFINITY;
+    const sa = a.lineNo ?? Number.POSITIVE_INFINITY;
+    const sb = b.lineNo ?? Number.POSITIVE_INFINITY;
     return sa - sb;
   });
 
diff --git a/apps/vis/web/src/lib/query-parser.ts b/apps/vis/web/src/lib/query-parser.ts
deleted file mode 100644
index 67c6691..0000000
--- a/apps/vis/web/src/lib/query-parser.ts
+++ /dev/null
@@ -1,295 +0,0 @@
-// Structured query language for the Wire tab's search box.
-//
-// Grammar (whitespace-separated; AND between tokens):
-//   key:value            exact/contains match on a specific field
-//   key:a,b,c            OR across values
-//   key:!value           NOT match
-//   key:>N / <N / >=N / <=N   numeric comparison (seq only)
-//   bare word            substring match on full record JSON (fallback)
-//
-// Supported keys:
-//   type   — r.type exact (OR-able, NOT-able)
-//   tool   — tool_call.data.tool_name substring (also matches paired tool_result)
-//   turn   — r.turn_id substring
-//   seq    — numeric compare on r.seq
-//   error  — boolean; true → records that represent failure/error states
-//   agent  — substring over any agent_id field
-//   id     — substring over any *_id / uuid field
-//
-// Unknown keys become `errors[]` entries; chip UI shows them in red.
-
-import type { VisWireRecord, WireRecordType } from '../types';
-
-export type TokenOp = '=' | '!=' | '>' | '<' | '>=' | '<=' | '~';
-
-export interface QueryToken {
-  /** null = bare text token (substring across whole record). */
-  key: string | null;
-  op: TokenOp;
-  /** Comma-split values; length >= 1 always. */
-  values: string[];
-  /** Source slice in the query string; useful to rewrite/remove a single chip. */
-  raw: string;
-}
-
-export interface ParsedQuery {
-  tokens: QueryToken[];
-  errors: { token: string; reason: string }[];
-}
-
-const KNOWN_KEYS = new Set(['type', 'tool', 'turn', 'seq', 'error', 'agent', 'id']);
-
-export function parseQuery(input: string): ParsedQuery {
-  const tokens: QueryToken[] = [];
-  const errors: { token: string; reason: string }[] = [];
-  // Simple whitespace split — no quoted-string support yet (keep it minimal).
-  const parts = input.split(/\s+/).filter((s) => s.length > 0);
-  for (const raw of parts) {
-    const colon = raw.indexOf(':');
-    if (colon <= 0) {
-      tokens.push({ key: null, op: '~', values: [raw], raw });
-      continue;
-    }
-    const key = raw.slice(0, colon);
-    let rest = raw.slice(colon + 1);
-    let op: TokenOp = '=';
-    if (rest.startsWith('!')) {
-      op = '!=';
-      rest = rest.slice(1);
-    } else if (rest.startsWith('>=')) {
-      op = '>=';
-      rest = rest.slice(2);
-    } else if (rest.startsWith('<=')) {
-      op = '<=';
-      rest = rest.slice(2);
-    } else if (rest.startsWith('>')) {
-      op = '>';
-      rest = rest.slice(1);
-    } else if (rest.startsWith('<')) {
-      op = '<';
-      rest = rest.slice(1);
-    }
-    const values = rest.split(',').filter((s) => s.length > 0);
-    if (values.length === 0) {
-      errors.push({ token: raw, reason: 'missing value' });
-      continue;
-    }
-    if (!KNOWN_KEYS.has(key)) {
-      errors.push({
-        token: raw,
-        reason: `unknown key "${key}" — try: ${[...KNOWN_KEYS].join(', ')}`,
-      });
-      // Still push so the chip can render (in red) and be removable.
-      tokens.push({ key, op, values, raw });
-      continue;
-    }
-    tokens.push({ key, op, values, raw });
-  }
-  return { tokens, errors };
-}
-
-/** Pre-compute helper sets used by some matchers. Call once per records[] + query. */
-export interface MatchContext {
-  /** tool_call_ids of tool_call records whose tool_name matches a `tool:` token. */
-  toolMatchingCallIds: Set<string>;
-}
-
-export function buildMatchContext(
-  records: readonly VisWireRecord[],
-  query: ParsedQuery,
-): MatchContext {
-  const ctx: MatchContext = { toolMatchingCallIds: new Set() };
-  const toolTokens = query.tokens.filter((t) => t.key === 'tool');
-  if (toolTokens.length === 0) return ctx;
-  for (const r of records) {
-    if (r.type !== 'tool_call') continue;
-    const name = getToolName(r);
-    if (name === null) continue;
-    const lower = name.toLowerCase();
-    const anyMatch = toolTokens.every((t) => matchTextToken(lower, t));
-    if (!anyMatch) continue;
-    const id = getToolCallId(r);
-    if (id !== null) ctx.toolMatchingCallIds.add(id);
-  }
-  return ctx;
-}
-
-export function matchesQuery(
-  record: VisWireRecord,
-  query: ParsedQuery,
-  ctx: MatchContext,
-): boolean {
-  if (query.tokens.length === 0) return true;
-  for (const token of query.tokens) {
-    if (!matchesOne(record, token, ctx)) return false;
-  }
-  return true;
-}
-
-function matchesOne(r: VisWireRecord, t: QueryToken, ctx: MatchContext): boolean {
-  if (t.key === null) {
-    // Bare text — fallback to JSON substring, case-insensitive.
-    const needle = (t.values[0] ?? '').toLowerCase();
-    if (needle.length === 0) return true;
-    try {
-      return JSON.stringify(r).toLowerCase().includes(needle);
-    } catch {
-      return false;
-    }
-  }
-  switch (t.key) {
-    case 'type':
-      return matchType(r.type, t);
-    case 'tool':
-      return matchTool(r, t, ctx);
-    case 'turn':
-      return matchText(getField(r, 'turn_id'), t);
-    case 'seq':
-      return matchNumber(r.seq, t);
-    case 'error':
-      return matchError(r, t);
-    case 'agent':
-      return matchAgent(r, t);
-    case 'id':
-      return matchAnyId(r, t);
-    default:
-      // Unknown key — treat as no-match so chip is clearly inert.
-      return false;
-  }
-}
-
-function matchType(type: WireRecordType, t: QueryToken): boolean {
-  const hit = t.values.includes(type);
-  return t.op === '!=' ? !hit : hit;
-}
-
-function matchTool(r: VisWireRecord, t: QueryToken, ctx: MatchContext): boolean {
-  if (r.type === 'tool_call') {
-    const name = getToolName(r);
-    return name !== null && matchTextToken(name.toLowerCase(), t);
-  }
-  if (r.type === 'tool_result') {
-    const id = getField(r, 'tool_call_id');
-    return id !== null && ctx.toolMatchingCallIds.has(id);
-  }
-  if (r.type === 'tool_denied') {
-    const name = (getField(r, 'data.tool_name') ?? '').toLowerCase();
-    return matchTextToken(name, t);
-  }
-  return false;
-}
-
-function matchText(value: string | null, t: QueryToken): boolean {
-  if (value === null) return t.op === '!=';
-  return matchTextToken(value.toLowerCase(), t);
-}
-
-function matchTextToken(haystackLower: string, t: QueryToken): boolean {
-  const hit = textHit(haystackLower, t);
-  return t.op === '!=' ? !hit : hit;
-}
-
-/** Pure "does this haystack contain any of the token values?" — no op
- *  inversion. Callers that check multiple candidate fields must invert
- *  the combined result themselves, otherwise `agent:!abc` over a record
- *  that has one matching field and three null fields would incorrectly
- *  flip for the null fields and report success. */
-function textHit(haystackLower: string, t: QueryToken): boolean {
-  return t.values.some((v) => haystackLower.includes(v.toLowerCase()));
-}
-
-function matchNumber(value: number, t: QueryToken): boolean {
-  const n = Number(t.values[0]);
-  if (!Number.isFinite(n)) return false;
-  switch (t.op) {
-    case '>':
-      return value > n;
-    case '<':
-      return value < n;
-    case '>=':
-      return value >= n;
-    case '<=':
-      return value <= n;
-    case '!=':
-      return value !== n;
-    case '=':
-    case '~':
-      return value === n;
-    default:
-      return false;
-  }
-}
-
-function matchError(r: VisWireRecord, t: QueryToken): boolean {
-  const want = (t.values[0] ?? 'true').toLowerCase() !== 'false';
-  const isError =
-    r.type === 'subagent_failed' ||
-    r.type === 'tool_denied' ||
-    (r.type === 'tool_result' && (r as { is_error?: boolean }).is_error === true) ||
-    (r.type === 'turn_end' && (r as { success?: boolean }).success === false);
-  return want ? isError : !isError;
-}
-
-function matchAgent(r: VisWireRecord, t: QueryToken): boolean {
-  const candidates: string[] = [
-    getField(r, 'agent_id'),
-    getField(r, 'data.agent_id'),
-    getField(r, 'parent_agent_id'),
-    getField(r, 'data.parent_agent_id'),
-  ].filter((c): c is string => c !== null);
-  return matchAcrossCandidates(candidates, t);
-}
-
-function matchAnyId(r: VisWireRecord, t: QueryToken): boolean {
-  const candidates: string[] = [
-    getField(r, 'uuid'),
-    getField(r, 'step_uuid'),
-    getField(r, 'turn_id'),
-    getField(r, 'tool_call_id'),
-    getField(r, 'session_id'),
-    getField(r, 'agent_id'),
-    getField(r, 'data.agent_id'),
-    getField(r, 'data.tool_call_id'),
-    getField(r, 'data.mail_id'),
-  ].filter((c): c is string => c !== null);
-  return matchAcrossCandidates(candidates, t);
-}
-
-/** op='=' : any candidate contains any token value
- *  op='!=': NO candidate contains any token value
- *  Handles the op inversion at the aggregate level so records with
- *  multiple candidate fields behave sanely (the per-field `matchTextToken`
- *  would flip on each null/non-match independently — wrong for multi-field
- *  records). */
-function matchAcrossCandidates(candidates: string[], t: QueryToken): boolean {
-  const anyHit = candidates.some((c) => textHit(c.toLowerCase(), t));
-  return t.op === '!=' ? !anyHit : anyHit;
-}
-
-// ── field access helpers ─────────────────────────────────────────────
-
-function getField(r: VisWireRecord, path: string): string | null {
-  const parts = path.split('.');
-  let cur: unknown = r;
-  for (const p of parts) {
-    if (cur === null || cur === undefined || typeof cur !== 'object') return null;
-    cur = (cur as Record<string, unknown>)[p];
-  }
-  return typeof cur === 'string' ? cur : null;
-}
-
-function getToolName(r: VisWireRecord): string | null {
-  // Prefer `tool_call.data.tool_name`; fall back to a legacy top-level field
-  // for older records.
-  const data = (r as { data?: Record<string, unknown> }).data;
-  if (data && typeof data['tool_name'] === 'string') return data['tool_name'];
-  const top = (r as Record<string, unknown>)['tool_name'];
-  return typeof top === 'string' ? top : null;
-}
-
-function getToolCallId(r: VisWireRecord): string | null {
-  const data = (r as { data?: Record<string, unknown> }).data;
-  if (data && typeof data['tool_call_id'] === 'string') return data['tool_call_id'];
-  const top = (r as Record<string, unknown>)['tool_call_id'];
-  return typeof top === 'string' ? top : null;
-}
diff --git a/apps/vis/web/src/pages/SessionDetailPage.tsx b/apps/vis/web/src/pages/SessionDetailPage.tsx
index 649b3cb..8335fea 100644
--- a/apps/vis/web/src/pages/SessionDetailPage.tsx
+++ b/apps/vis/web/src/pages/SessionDetailPage.tsx
@@ -1,80 +1,71 @@
 import { useParams } from 'react-router-dom';
-import { useSession } from '../hooks/useSession';
-import { useWire } from '../hooks/useWire';
-import { useSessionContext } from '../hooks/useContext';
-import { useSubagents } from '../hooks/useSubagents';
+
+import { CopyButton } from '../components/shared/CopyButton';
 import { TabBar, useActiveTab } from '../components/layout/TabBar';
-import { WireTab } from '../components/wire/WireTab';
 import { ContextTab } from '../components/context/ContextTab';
-import { SubagentsTab } from '../components/subagents/SubagentsTab';
 import { StateTab } from '../components/state/StateTab';
-import { FilesTab } from '../components/files/FilesTab';
-import { CopyButton } from '../components/shared/CopyButton';
-import { Pill } from '../components/shared/Pill';
+import { SubagentsTab } from '../components/subagents/SubagentsTab';
+import { WireTab } from '../components/wire/WireTab';
+import { useSession } from '../hooks/useSession';
 import { formatAbsoluteTime, formatRelativeTime } from '../util/time';
 
-type TabId = 'wire' | 'context' | 'subagents' | 'state' | 'files';
+type TabId = 'wire' | 'context' | 'agents' | 'state';
 
 export function SessionDetailPage() {
   const { sessionId } = useParams<{ sessionId: string }>();
   const active = useActiveTab('wire') as TabId;
-
-  const { data: session, isLoading: sessionLoading, error: sessionError } = useSession(sessionId);
-
-  // Eagerly count subagents from the session detail; fetch wire/context/subagents
-  // only when their tab is open.
-  const wireQ = useWire(sessionId, active === 'wire');
-  const contextQ = useSessionContext(sessionId, active === 'context');
-  const subQ = useSubagents(sessionId, active === 'subagents');
+  const { data: session, isLoading, error } = useSession(sessionId);
 
   if (!sessionId) return <div className="p-6 text-fg-3">(no session id)</div>;
-  if (sessionLoading) return <div className="p-6 font-mono text-[12px] text-fg-3">loading session…</div>;
-  if (sessionError)
+  if (isLoading) {
+    return <div className="p-6 font-mono text-[12px] text-fg-3">loading session…</div>;
+  }
+  if (error) {
     return (
       <div className="p-6 font-mono text-[12px] text-[var(--color-sev-error)]">
-        {(sessionError).message}
+        {error.message}
       </div>
     );
+  }
   if (!session) return null;
 
+  const state = (session.state ?? null) as {
+    title?: string;
+    lastPrompt?: string;
+    updatedAt?: string;
+  } | null;
+
+  const mainAgent = session.agents.find((a) => a.agentId === 'main') ?? null;
+  const subagentCount = session.agents.filter((a) => a.agentId !== 'main').length;
+  const wireRecords = mainAgent?.wireRecordCount ?? null;
+
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      {/* Detail header */}
+      {/* Header */}
       <div className="shrink-0 border-b border-border bg-surface-1 px-4 py-3">
         <div className="flex items-center gap-3">
-          <span className="font-mono text-[14px] text-fg-0">{session.session_id}</span>
-          <CopyButton value={session.session_id} />
-          {session.state.model ? (
-            <Pill tone="config" variant="soft">{session.state.model}</Pill>
-          ) : null}
-          {session.state.archived ? (
-            <Pill tone="warning" variant="outline">archived</Pill>
-          ) : null}
-          {session.state.permission_mode === 'bypassPermissions' ? (
-            <Pill tone="error" variant="outline">yolo</Pill>
-          ) : null}
-          {session.title ? (
-            <span className="font-mono text-[12px] text-fg-1">
-              "{session.title}"
-            </span>
+          <span className="font-mono text-[14px] text-fg-0">{session.sessionId}</span>
+          <CopyButton value={session.sessionId} />
+          {state?.title ? (
+            <span className="font-mono text-[12px] text-fg-1">"{state.title}"</span>
           ) : null}
         </div>
         <div className="mt-1 flex items-center gap-3 font-mono text-[11px] text-fg-2">
-          {session.state.workspace_dir ? (
-            <span className="truncate" title={session.state.workspace_dir}>
-              {session.state.workspace_dir}
+          {state?.updatedAt ? (
+            <span className="text-fg-3 tabular">
+              updated {formatRelativeTime(Date.parse(state.updatedAt))} ·{' '}
+              {formatAbsoluteTime(Date.parse(state.updatedAt))}
             </span>
           ) : null}
-          {session.state.updated_at ? (
-            <span className="text-fg-3 tabular">
-              updated {formatRelativeTime(session.state.updated_at)} ·{' '}
-              {formatAbsoluteTime(session.state.updated_at)}
+          {session.workDir ? (
+            <span className="text-fg-3 truncate" title={session.workDir}>
+              · {session.workDir}
             </span>
           ) : null}
         </div>
-        {session.last_prompt ? (
-          <div className="mt-1 truncate font-mono text-[11px] text-fg-3" title={session.last_prompt}>
-            prompt · {session.last_prompt}
+        {state?.lastPrompt ? (
+          <div className="mt-1 truncate font-mono text-[11px] text-fg-3" title={state.lastPrompt}>
+            prompt · {state.lastPrompt}
           </div>
         ) : null}
       </div>
@@ -82,77 +73,19 @@ export function SessionDetailPage() {
       <TabBar
         defaultTab="wire"
         tabs={[
-          { id: 'wire', label: 'Wire', count: wireQ.data?.records.length ?? null },
-          { id: 'context', label: 'Context', count: contextQ.data?.annotated_messages.length ?? null },
-          { id: 'subagents', label: 'Subagents', count: session.subagent_ids.length },
+          { id: 'wire', label: 'Wire', count: wireRecords },
+          { id: 'context', label: 'Context', count: null },
+          { id: 'agents', label: 'Agents', count: subagentCount },
           { id: 'state', label: 'State', count: null },
-          { id: 'files', label: 'Files', count: session.archive_files.length + session.tool_result_ids.length },
         ]}
       />
 
       <div className="flex min-h-0 flex-1 flex-col">
-        {active === 'wire' ? (
-          wireQ.isLoading ? (
-            <Centered>loading wire…</Centered>
-          ) : wireQ.error ? (
-            <ErrorView msg={(wireQ.error).message} />
-          ) : wireQ.data ? (
-            <WireTab
-              records={wireQ.data.records}
-              health={wireQ.data.health}
-              brokenReason={wireQ.data.broken_reason}
-              warnings={wireQ.data.warnings}
-            />
-          ) : null
-        ) : null}
-
-        {active === 'context' ? (
-          contextQ.isLoading ? (
-            <Centered>loading context…</Centered>
-          ) : contextQ.error ? (
-            <ErrorView msg={(contextQ.error).message} />
-          ) : contextQ.data ? (
-            <ContextTab
-              sessionId={sessionId}
-              messages={contextQ.data.annotated_messages}
-              projectedState={contextQ.data.projected_state}
-            />
-          ) : null
-        ) : null}
-
-        {active === 'subagents' ? (
-          subQ.isLoading ? (
-            <Centered>loading subagents…</Centered>
-          ) : (
-            <SubagentsTab sessionId={sessionId} />
-          )
-        ) : null}
-
-        {active === 'state' ? (
-          <StateTab
-            state={session.state}
-            protocolVersion={session.wire_metadata?.protocol_version ?? null}
-          />
-        ) : null}
-
-        {active === 'files' ? (
-          <FilesTab sessionId={sessionId} detail={session} />
-        ) : null}
+        {active === 'wire' ? <WireTab sessionId={sessionId} /> : null}
+        {active === 'context' ? <ContextTab sessionId={sessionId} /> : null}
+        {active === 'agents' ? <SubagentsTab sessionId={sessionId} /> : null}
+        {active === 'state' ? <StateTab state={session.state} /> : null}
       </div>
     </div>
   );
 }
-
-function Centered({ children }: { children: import('react').ReactNode }) {
-  return (
-    <div className="flex flex-1 items-center justify-center p-6 font-mono text-[12px] text-fg-3">
-      {children}
-    </div>
-  );
-}
-
-function ErrorView({ msg }: { msg: string }) {
-  return (
-    <div className="p-6 font-mono text-[12px] text-[var(--color-sev-error)]">{msg}</div>
-  );
-}
diff --git a/apps/vis/web/src/pages/SubagentDetailPage.tsx b/apps/vis/web/src/pages/SubagentDetailPage.tsx
index c5ef486..37f9a82 100644
--- a/apps/vis/web/src/pages/SubagentDetailPage.tsx
+++ b/apps/vis/web/src/pages/SubagentDetailPage.tsx
@@ -1,196 +1,125 @@
 import { Link, useParams } from 'react-router-dom';
-import { useSubagentWire } from '../hooks/useWire';
-import { useSubagentContext } from '../hooks/useContext';
-import { useSubagentMeta } from '../hooks/useSubagents';
+import { useSession } from '../hooks/useSession';
 import { TabBar, useActiveTab } from '../components/layout/TabBar';
-import { WireTab } from '../components/wire/WireTab';
 import { ContextTab } from '../components/context/ContextTab';
-import { JsonViewer } from '../components/shared/JsonViewer';
-import { Pill } from '../components/shared/Pill';
-import { formatAbsoluteTime, formatRelativeTime } from '../util/time';
+import { WireTab } from '../components/wire/WireTab';
+import { Pill, type PillTone } from '../components/shared/Pill';
+import type { AgentInfo } from '../types';
+
+type TabId = 'wire' | 'context';
 
-type TabId = 'wire' | 'context' | 'meta';
+const TYPE_TONE: Record<AgentInfo['type'], PillTone> = {
+  main: 'conversation',
+  sub: 'subagent',
+  independent: 'tools',
+};
 
 export function SubagentDetailPage() {
   const { sessionId, agentId } = useParams<{ sessionId: string; agentId: string }>();
   const active = useActiveTab('wire') as TabId;
-
-  const wireQ = useSubagentWire(sessionId, agentId, active === 'wire');
-  const contextQ = useSubagentContext(sessionId, agentId, active === 'context');
-  const metaQ = useSubagentMeta(sessionId, agentId);
+  const { data: detail, isLoading, error } = useSession(sessionId);
 
   if (!sessionId || !agentId) return null;
+  if (isLoading) {
+    return <div className="p-6 font-mono text-[12px] text-fg-3">loading agent…</div>;
+  }
+  if (error) {
+    return (
+      <div className="p-6 font-mono text-[12px] text-[var(--color-sev-error)]">
+        {(error as Error).message}
+      </div>
+    );
+  }
+  if (!detail) return null;
+
+  const agent = detail.agents.find((a) => a.agentId === agentId) ?? null;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       {/* Breadcrumb + header */}
       <div className="shrink-0 border-b border-border bg-surface-1 px-4 py-3">
         <div className="flex items-center gap-2 font-mono text-[11px] text-fg-2">
-          <Link to={`/sessions/${sessionId}?tab=subagents`} className="hover:text-fg-0">
-            ‹ back to subagents
+          <Link
+            to={`/sessions/${sessionId}?tab=agents`}
+            className="hover:text-fg-0"
+          >
+            ‹ back to agents
           </Link>
           <span className="text-fg-3">·</span>
-          <Link to={`/sessions/${sessionId}`} className="hover:text-fg-0">main</Link>
+          <Link to={`/sessions/${sessionId}`} className="hover:text-fg-0">
+            session
+          </Link>
           <span className="text-fg-3">›</span>
-          <span className="text-fg-0">
-            {agentId.replace(/^sub_/, '').slice(0, 12)}
-          </span>
+          <span className="text-fg-0">{agentId}</span>
         </div>
-        <div className="mt-2 flex items-center gap-3">
+        <div className="mt-2 flex flex-wrap items-center gap-3">
           <span className="font-mono text-[14px] text-fg-0">{agentId}</span>
-          {metaQ.data?.meta_json?.subagent_type ? (
-            <Pill tone="subagent" variant="soft">
-              {metaQ.data.meta_json.subagent_type}
-            </Pill>
-          ) : null}
-          {metaQ.data?.meta_json?.status ? (
-            <Pill tone="neutral" variant="outline">
-              {metaQ.data.meta_json.status}
+          {agent !== null ? (
+            <>
+              <Pill tone={TYPE_TONE[agent.type]} variant="soft">
+                {agent.type}
+              </Pill>
+              {agent.parentAgentId !== null ? (
+                <span className="font-mono text-[11px] text-fg-3">
+                  parent ·{' '}
+                  <Link
+                    to={`/sessions/${sessionId}/agents/${agent.parentAgentId}`}
+                    className="text-fg-1 hover:text-fg-0"
+                  >
+                    {agent.parentAgentId}
+                  </Link>
+                </span>
+              ) : null}
+              <span className="font-mono text-[11px] text-fg-3 tabular">
+                {agent.wireRecordCount} record
+                {agent.wireRecordCount === 1 ? '' : 's'}
+                {agent.wireProtocolVersion !== null
+                  ? ` · v${agent.wireProtocolVersion}`
+                  : ''}
+              </span>
+              {!agent.wireExists ? (
+                <Pill tone="warning" variant="outline">
+                  no wire
+                </Pill>
+              ) : null}
+            </>
+          ) : (
+            <Pill tone="error" variant="outline">
+              agent not found
             </Pill>
-          ) : null}
-          {metaQ.data?.depth !== undefined ? (
-            <span className="font-mono text-[11px] text-fg-3 tabular">
-              depth {metaQ.data.depth}
-            </span>
-          ) : null}
+          )}
         </div>
-        {metaQ.data?.meta_json?.description ? (
-          <div className="mt-1 font-mono text-[12px] text-fg-1">
-            {metaQ.data.meta_json.description}
-          </div>
-        ) : null}
       </div>
 
       <TabBar
         defaultTab="wire"
         tabs={[
-          { id: 'wire', label: 'Wire', count: wireQ.data?.records.length ?? null },
-          { id: 'context', label: 'Context', count: contextQ.data?.annotated_messages.length ?? null },
-          { id: 'meta', label: 'Meta', count: null },
+          { id: 'wire', label: 'Wire', count: agent?.wireRecordCount ?? null },
+          { id: 'context', label: 'Context', count: null },
         ]}
       />
 
       <div className="flex min-h-0 flex-1 flex-col">
         {active === 'wire' ? (
-          wireQ.isLoading ? (
-            <Centered>loading wire…</Centered>
-          ) : wireQ.error ? (
-            <ErrorView msg={(wireQ.error).message} />
-          ) : wireQ.data ? (
-            <WireTab
-              records={wireQ.data.records}
-              health={wireQ.data.health}
-              brokenReason={wireQ.data.broken_reason}
-              warnings={wireQ.data.warnings}
-            />
-          ) : null
+          agent === null || !agent.wireExists ? (
+            <Centered>no wire records for this agent</Centered>
+          ) : (
+            <WireTab sessionId={sessionId} initialAgentId={agentId} />
+          )
         ) : null}
 
         {active === 'context' ? (
-          contextQ.isLoading ? (
-            <Centered>loading context…</Centered>
-          ) : contextQ.error ? (
-            <ErrorView msg={(contextQ.error).message} />
-          ) : contextQ.data ? (
-            <ContextTab
-              sessionId={sessionId}
-              messages={contextQ.data.annotated_messages}
-              projectedState={contextQ.data.projected_state}
-            />
-          ) : null
+          agent === null || !agent.wireExists ? (
+            <Centered>no context for this agent</Centered>
+          ) : (
+            <ContextTab sessionId={sessionId} initialAgentId={agentId} />
+          )
         ) : null}
-
-        {active === 'meta' ? <MetaView meta={metaQ.data} error={metaQ.error} /> : null}
       </div>
     </div>
   );
 }
 
-function MetaView({ meta, error }: { meta: unknown; error: unknown }) {
-  if (error) {
-    return <ErrorView msg={(error as Error).message} />;
-  }
-  if (!meta) return <Centered>loading meta…</Centered>;
-  const m = meta as {
-    meta_json: unknown;
-    spawned_record: unknown;
-    completed_record: unknown;
-    failed_record: unknown;
-  };
-  return (
-    <div className="flex-1 min-h-0 overflow-y-auto p-4 space-y-6">
-      <MetaSection title="meta.json" value={m.meta_json} />
-      <MetaSection title="spawn record" subtitle="from parent wire" value={m.spawned_record} />
-      <MetaSection title="completion record" subtitle="from parent wire" value={m.completed_record} />
-      <MetaSection title="failure record" subtitle="from parent wire" value={m.failed_record} />
-      <TimestampsSection spawned={m.spawned_record} completed={m.completed_record} failed={m.failed_record} />
-    </div>
-  );
-}
-
-function MetaSection({
-  title,
-  subtitle,
-  value,
-}: {
-  title: string;
-  subtitle?: string;
-  value: unknown;
-}) {
-  return (
-    <section>
-      <h2 className="flex items-baseline gap-3 font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">
-        {title}
-        {subtitle ? <span className="text-fg-3/70">{subtitle}</span> : null}
-      </h2>
-      <div className="mt-2 border border-border bg-surface-0 p-3">
-        {value === null || value === undefined ? (
-          <span className="font-mono text-[11px] text-fg-3">(not present)</span>
-        ) : (
-          <JsonViewer value={value} defaultOpenDepth={2} />
-        )}
-      </div>
-    </section>
-  );
-}
-
-function TimestampsSection({ spawned, completed, failed }: { spawned: unknown; completed: unknown; failed: unknown }) {
-  const rows = [
-    spawned ? ['spawn', (spawned as { time?: number }).time] : null,
-    completed ? ['complete', (completed as { time?: number }).time] : null,
-    failed ? ['failure', (failed as { time?: number }).time] : null,
-  ].filter(Boolean) as [string, number | undefined][];
-  if (rows.length === 0) return null;
-  return (
-    <section>
-      <h2 className="font-mono text-[11px] uppercase tracking-[0.12em] text-fg-3">timeline</h2>
-      <div className="mt-2 border border-border bg-surface-0">
-        <table className="w-full font-mono text-[12px]">
-          <tbody>
-            {rows.map(([label, t]) => (
-              <tr key={label} className="border-b border-border last:border-b-0">
-                <td className="w-[120px] border-r border-border bg-surface-1 px-3 py-1.5 text-right text-fg-2">
-                  {label}
-                </td>
-                <td className="px-3 py-1.5 text-fg-0 tabular">
-                  {t !== undefined ? (
-                    <>
-                      {formatAbsoluteTime(t)}{' '}
-                      <span className="text-fg-3">({formatRelativeTime(t)})</span>
-                    </>
-                  ) : (
-                    <span className="text-fg-3">—</span>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  );
-}
-
 function Centered({ children }: { children: import('react').ReactNode }) {
   return (
     <div className="flex flex-1 items-center justify-center p-6 font-mono text-[12px] text-fg-3">
@@ -198,9 +127,3 @@ function Centered({ children }: { children: import('react').ReactNode }) {
     </div>
   );
 }
-
-function ErrorView({ msg }: { msg: string }) {
-  return (
-    <div className="p-6 font-mono text-[12px] text-[var(--color-sev-error)]">{msg}</div>
-  );
-}
diff --git a/apps/vis/web/src/types.ts b/apps/vis/web/src/types.ts
index 34dfd82..c9dbc86 100644
--- a/apps/vis/web/src/types.ts
+++ b/apps/vis/web/src/types.ts
@@ -1,359 +1,52 @@
-// Client-side types mirroring the server API contract.
-// Kept in sync manually — the server owns the source of truth.
-
-export type WireRecordType =
-  // File-header (line 1) and startup baseline (line 2) — vis splices
-  // these back into the timeline so the Wire tab shows every line of
-  // wire.jsonl, including the system_prompt.
-  | 'metadata'
-  | 'session_initialized'
-  | 'turn_begin'
-  | 'turn_end'
-  | 'user_message'
-  | 'tool_result'
-  | 'compaction'
-  | 'system_prompt_changed'
-  | 'tools_changed'
-  | 'system_reminder'
-  | 'notification'
-  // Atomic streaming records (replace assistant_message + tool_call_dispatched).
-  | 'step_begin'
-  | 'step_end'
-  | 'content_part'
-  | 'tool_call'
-  | 'tool_denied'
-  | 'skill_invoked'
-  | 'skill_completed'
-  | 'approval_request'
-  | 'approval_response'
-  | 'team_mail'
-  | 'subagent_spawned'
-  | 'subagent_completed'
-  | 'subagent_failed'
-  | 'ownership_changed'
-  | 'context_edit'
-  | 'context_cleared';
-
-export type WireCategory =
-  | 'conversation'
-  | 'config'
-  | 'lifecycle'
-  | 'subagent'
-  | 'approval'
-  | 'ephemeral'
-  | 'meta'
-  | 'tools';
-
-// Discriminated union — loosely typed so we can dispatch on .type without
-// needing server-synchronized exact interfaces in the client. The server's
-// own `types.ts` has the precise field types.
-export interface VisWireRecordBase {
-  type: WireRecordType;
-  seq: number;
-  time: number;
-  [key: string]: unknown;
-}
-
-export type VisWireRecord = VisWireRecordBase;
-
-export interface WireFileMetadata {
-  type: 'metadata';
-  protocol_version: string;
-  created_at: number;
-  kimi_version?: string;
-  producer?: {
-    kind: 'python' | 'typescript';
-    name: string;
-    version: string;
-  };
-}
-
-// ──────────── Session ────────────
-
-export interface SessionSummary {
-  session_id: string;
-  title: string | null;
-  last_prompt: string | null;
-  created_at: number;
-  updated_at: number;
-  last_turn_time: number | null;
-  model: string | null;
-  permission_mode: string | null;
-  last_exit_code: 'clean' | 'dirty' | null;
-  custom_title: string | null;
-  tags: string[];
-  archived: boolean;
-  workspace_dir: string | null;
-  wire_protocol_version: string | null;
-  wire_record_count: number;
-  archive_count: number;
-  subagent_count: number;
-  health: 'ok' | 'broken' | 'missing_wire';
-}
-
-export interface SessionState {
-  session_id: string;
-  title?: string;
-  isCustomTitle?: boolean;
-  customTitle?: string;
-  lastPrompt?: string;
-  last_prompt?: string;
-  model?: string;
-  last_turn_id?: string;
-  last_turn_time?: number;
-  turn_count?: number;
-  created_at: number;
-  updated_at: number;
-  workspace_dir?: string;
-  auto_approve_actions?: string[];
-  permission_mode?: 'default' | 'acceptEdits' | 'bypassPermissions';
-  thinking_level?: string;
-  custom_title?: string;
-  plan_mode?: boolean;
-  plan_slug?: string;
-  tags?: string[];
-  description?: string;
-  archived?: boolean;
-  color?: string;
-  last_exit_code?: 'clean' | 'dirty';
-  [key: string]: unknown;
-}
-
-export interface SessionDetail {
-  session_id: string;
-  title: string | null;
-  last_prompt: string | null;
-  state: SessionState;
-  subagent_ids: string[];
-  archive_files: string[];
-  tool_result_ids: string[];
-  wire_metadata: WireFileMetadata | null;
-}
-
-// ──────────── Wire ────────────
-
-export interface WireResponse {
-  session_id: string;
-  agent_id: string | null;
-  files_read: string[];
-  health: 'ok' | 'broken';
-  broken_reason?: string;
-  warnings: string[];
-  records: VisWireRecord[];
-}
-
-// ──────────── Context ────────────
-
-export type MessageOrigin =
-  | { kind: 'user' }
-  | { kind: 'assistant' }
-  | { kind: 'tool'; tool_call_id: string }
-  | { kind: 'system_reminder'; seq: number }
-  | { kind: 'notification'; seq: number; notification_id: string; severity: string };
-
-export interface ContentPart {
-  type: 'text' | 'think' | 'image_url' | 'video_url';
-  [key: string]: unknown;
-}
-
-export interface ToolCallEntry {
-  type: 'function';
-  id: string;
-  name: string; arguments: string | null;
-}
-
-export interface AnnotatedMessage {
-  seq: number;
-  message: {
-    role: 'user' | 'assistant' | 'tool';
-    content: ContentPart[];
-    tool_calls: ToolCallEntry[];
-    tool_call_id?: string;
-  };
-  origin: MessageOrigin;
-  is_ephemeral: boolean;
-  out_of_context: boolean;
-  persisted_output_path?: string;
-}
-
-export interface ProjectedStateSummary {
-  model: string | null;
-  system_prompt: string | null;
-  active_tools: string[];
-  last_seq: number;
-  token_count: number;
-  permission_mode: string | null;
-  plan_mode: boolean;
-  input_tokens: number;
-  output_tokens: number;
-  cache_read_tokens: number;
-  cache_write_tokens: number;
-}
-
-export interface ContextResponse {
-  session_id: string;
-  agent_id: string | null;
-  annotated_messages: AnnotatedMessage[];
-  projected_state: ProjectedStateSummary;
-}
-
-// ──────────── Subagents ────────────
-
-export interface SubagentNode {
-  agent_id: string;
-  agent_name: string | null;
-  subagent_type: string | null;
-  run_in_background: boolean;
-  parent_agent_id: string | null;
-  depth: number;
-  status: 'running' | 'completed' | 'failed' | 'killed' | 'lost' | 'unknown';
-  success: boolean | null;
-  result_summary: string | null;
-  error: string | null;
-  spawn_seq: number;
-  spawn_time: number;
-  children: SubagentNode[];
-}
-
-export interface SubagentTreeResponse {
-  session_id: string;
-  tree: SubagentNode[];
-}
-
-export interface SubagentMetaResponse {
-  agent_id: string;
-  session_id: string;
-  meta_json: {
-    agent_id: string;
-    subagent_type: string;
-    status: string;
-    description: string;
-    parent_tool_call_id: string;
-    created_at: number;
-    updated_at: number;
-  } | null;
-  spawned_record: {
-    agent_name?: string;
-    parent_tool_call_id: string;
-    parent_agent_id?: string;
-    run_in_background: boolean;
-    seq: number;
-    time: number;
-  } | null;
-  completed_record: {
-    parent_tool_call_id: string;
-    result_summary: string;
-    usage?: {
-      input_tokens: number;
-      output_tokens: number;
-      cache_read_tokens?: number;
-      cache_write_tokens?: number;
-    };
-    seq: number;
-    time: number;
-  } | null;
-  failed_record: {
-    parent_tool_call_id: string;
-    error: string;
-    seq: number;
-    time: number;
-  } | null;
-  depth: number;
-}
-
-export interface ToolResultFileResponse {
-  tool_call_id: string;
-  session_id: string;
-  size_bytes: number;
-  content: string;
-}
-
-export interface ApiError {
-  error: string;
-  code:
-    | 'NOT_FOUND'
-    | 'BAD_REQUEST'
-    | 'UNAUTHORIZED'
-    | 'READ_ERROR'
-    | 'PARSE_ERROR'
-    | 'DELETE_ERROR';
-}
+// Client-side types — re-export server DTOs (type-only cross-package import).
+// The server's `agent-record-types.ts` is the single source of truth for
+// all session / agent / wire shapes.
+
+export type {
+  SessionSummary,
+  SessionDetail,
+  AgentInfo,
+  AgentNode,
+  AgentTreeResponse,
+  SessionHealth,
+  WireResponse,
+  WireLine,
+  ApiError,
+  AgentRecord,
+  ContextMessage,
+  PromptOrigin,
+  TokenUsage,
+  PermissionMode,
+  LoopRecordedEvent,
+  ContentPart,
+  Message,
+  ToolCall,
+} from '../../server/src/lib/agent-record-types';
+
+export type {
+  ProjectedMessage,
+  UsageTotals,
+  ConfigSnapshot,
+  ContextProjection,
+} from '../../server/src/lib/context-projector';
 
 export interface DeleteSessionResponse {
-  session_id: string;
+  sessionId: string;
   deleted: true;
 }
 
-export interface ClearSessionsResponse {
-  deleted_count: number;
-  failed: Array<{ session_id: string; error: string }>;
+/**
+ * Shape returned by `GET /api/sessions/:id/context?agent=<agentId>`.
+ *
+ * Mirrors `ContextProjection` from context-projector, plus the `sessionId`
+ * and `agentId` echoed by the route.
+ */
+export interface ContextResponse {
+  sessionId: string;
+  agentId: string;
+  messages: import('../../server/src/lib/context-projector').ProjectedMessage[];
+  usage: import('../../server/src/lib/context-projector').UsageTotals;
+  config: import('../../server/src/lib/context-projector').ConfigSnapshot;
+  permission: { mode: import('../../server/src/lib/agent-record-types').PermissionMode | null };
+  planMode: { active: boolean; id?: string };
 }
-
-// ──────────── Category mapping ────────────
-
-export const TYPE_CATEGORY: Record<WireRecordType, WireCategory> = {
-  metadata: 'meta',
-  session_initialized: 'config',
-  turn_begin: 'conversation',
-  turn_end: 'conversation',
-  user_message: 'conversation',
-  tool_result: 'conversation',
-  compaction: 'conversation',
-  system_prompt_changed: 'config',
-  tools_changed: 'config',
-  system_reminder: 'ephemeral',
-  notification: 'meta',
-  step_begin: 'conversation',
-  step_end: 'conversation',
-  content_part: 'conversation',
-  tool_call: 'tools',
-  tool_denied: 'approval',
-  skill_invoked: 'tools',
-  skill_completed: 'tools',
-  approval_request: 'approval',
-  approval_response: 'approval',
-  team_mail: 'meta',
-  subagent_spawned: 'subagent',
-  subagent_completed: 'subagent',
-  subagent_failed: 'subagent',
-  ownership_changed: 'lifecycle',
-  context_edit: 'lifecycle',
-  context_cleared: 'lifecycle',
-};
-
-// Context-effect marker — `true` if the record mutates the live context,
-// `false` if it is telemetry-only, `'conditional'` for records that depend
-// on per-record fields (notification targets, system_reminder delivery, …).
-export const TYPE_CTX_EFFECT: Record<WireRecordType, boolean | 'conditional'> = {
-  // File header — purely informational, not a context event.
-  metadata: false,
-  // Startup baseline — seeds system_prompt / model / active_tools that
-  // the projector uses as the context floor.
-  session_initialized: true,
-  turn_begin: false,
-  turn_end: false,
-  user_message: true,
-  tool_result: true,
-  compaction: true,
-  system_prompt_changed: true,
-  tools_changed: true,
-  system_reminder: 'conditional',
-  notification: 'conditional',
-  // Streaming atoms together rebuild an assistant message → context-affecting.
-  step_begin: true,
-  step_end: false,
-  content_part: true,
-  tool_call: true,
-  tool_denied: false,
-  skill_invoked: false,
-  skill_completed: false,
-  approval_request: false,
-  approval_response: false,
-  team_mail: false,
-  subagent_spawned: false,
-  subagent_completed: false,
-  subagent_failed: false,
-  ownership_changed: false,
-  context_edit: true,
-  context_cleared: true,
-};
diff --git a/packages/agent-core/src/index.ts b/packages/agent-core/src/index.ts
index 5e972d9..36a44a7 100644
--- a/packages/agent-core/src/index.ts
+++ b/packages/agent-core/src/index.ts
@@ -43,3 +43,33 @@ export type {
   BearerTokenProvider,
   OAuthTokenProviderResolver,
 } from './providers/runtime-provider';
+
+// ─── Wire records (for in-monorepo consumers like apps/vis) ────────────────
+export type {
+  AgentRecord,
+  AgentRecordEvents,
+  AgentRecordOf,
+  AgentRecordPersistence,
+} from './agent/records';
+export { AGENT_WIRE_PROTOCOL_VERSION } from './agent/records';
+export type { AgentConfigUpdateData } from './agent/config';
+export type { CompactionBeginData, CompactionResult } from './agent/compaction';
+export type {
+  PermissionApprovalResultRecord,
+  PermissionMode,
+} from './agent/permission';
+export type { UsageRecordScope } from './agent/usage';
+export type { ToolStoreUpdate } from './tools/store';
+export type {
+  LoopRecordedEvent,
+  LoopStepBeginEvent,
+  LoopStepEndEvent,
+  LoopContentPartEvent,
+  LoopToolCallEvent,
+  LoopToolResultEvent,
+} from './loop';
+export type {
+  ExecutableToolResult,
+  ExecutableToolSuccessResult,
+  ExecutableToolErrorResult,
+} from './loop/types';