diff --git a/apps/kimi-inspect/src/App.tsx b/apps/kimi-inspect/src/App.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..def8a9213fee03c9621ea48cb255280464d23eb7
--- /dev/null
+++ b/apps/kimi-inspect/src/App.tsx
@@ -0,0 +1,166 @@
+/**
+ * App shell — selection state and session resume. There is no live event
+ * push anymore: the v2 socket (`/api/v2/ws`) that fed the core/session/agent
+ * event streams was removed server-side, so Service panels and the pending
+ * interactions card fetch on demand and the sidebar polls.
+ * Layout: header / icon rail / view. The `chat` view is a strip of the
+ * left sidebar (a workspace → session tree), the chat column, and the
+ * right dock (`RightPanel`) merging the transcript audit, the agent
+ * inspector, and the session pane under Audit / Agent / State / Session
+ * tabs;
+ * the `models` view is the full-width model catalog; the `services` view is
+ * the full-width app-scope Service reflection (`AppServicesView`); the
+ * `workspace` view is the workspace-scope counterpart
+ * (`WorkspaceServicesView`, with a workspace picker on top); the
+ * `bash` view is the full-width `IBashParserService` playground
+ * (`BashParserView`); the `di` view is the engine's Service × Effect × DI
+ * debug surface (`DiInspectionView`); the `search` view is the full-width
+ * global message search (`SearchView`) whose hits navigate back into the
+ * chat timeline.
+ */
+
+import { ISessionManager } from '@moonshot-ai/agent-core-v2/app/sessionManager/sessionManager';
+import { useEffect, useState } from 'react';
+
+import type { AuditTrail } from './audit/trail';
+import { AppServicesView } from './components/AppServicesView';
+import { BashParserView } from './components/BashParserView';
+import { ChatView, type ChatJump } from './components/ChatView';
+import { DiInspectionView } from './components/DiInspectionView';
+import { FsSuggestView } from './components/FsSuggestView';
+import { ModelCatalogView } from './components/ModelCatalogView';
+import { NavRail, type AppView } from './components/NavRail';
+import { RightPanel } from './components/RightPanel';
+import { SearchView } from './components/SearchView';
+import { ServerSwitcher } from './components/ServerSwitcher';
+import { Sidebar } from './components/Sidebar';
+import { WorkspaceServicesView } from './components/WorkspaceServicesView';
+import { useConnection } from './connection';
+import type { SearchHit } from './search/api';
+import { errorMessage } from './ui';
+
+export function App() {
+  const { klient, baseUrl, disconnect } = useConnection();
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [agentId, setAgentId] = useState('main');
+  const [view, setView] = useState<AppView>('chat');
+  const [ready, setReady] = useState(false);
+  const [resumeError, setResumeError] = useState<unknown>(null);
+  /** Audit trail of the chat view's transcript channel, rendered in the right dock. */
+  const [trail, setTrail] = useState<AuditTrail | null>(null);
+  /** Pending chat navigation requested from another view (search result click). */
+  const [jump, setJump] = useState<ChatJump | null>(null);
+
+  // Resume (materialize) the session on the server when it is selected, so
+  // session / agent scoped Services become reachable. Session lifecycle lives
+  // on the workspace handler (Workspace scope): the index yields the
+  // session's workspaceId, then the handler resumes it.
+  useEffect(() => {
+    if (sessionId === null) return;
+    let cancelled = false;
+    setReady(false);
+    setResumeError(null);
+    klient
+      .core(ISessionManager)
+      .resume(sessionId)
+      .then((session) => {
+        if (session === undefined) throw new Error(`session ${sessionId} does not exist`);
+      })
+      .then(() => {
+        if (!cancelled) setReady(true);
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) setResumeError(error);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [klient, sessionId]);
+
+  // Switching servers invalidates every session/agent selection: sessions
+  // belong to the server they were listed from.
+  useEffect(() => {
+    setSessionId(null);
+    setAgentId('main');
+    setJump(null);
+  }, [baseUrl]);
+
+  // A search hit opens the chat view at its session / agent / turn / step.
+  // Title hits belong to the session (agent '') and carry no turn: switch
+  // over without a scroll target.
+  const openSearchHit = (hit: SearchHit): void => {
+    setSessionId(hit.sessionId);
+    setAgentId(hit.agentId === '' ? 'main' : hit.agentId);
+    setView('chat');
+    setJump({
+      turnId: hit.turn === undefined ? undefined : `t${hit.turn}`,
+      stepId: hit.stepId,
+      nonce: Date.now(),
+    });
+  };
+
+  return (
+    <div className="flex h-screen flex-col">
+      <header className="flex items-center gap-3 border-b border-neutral-800 px-4 py-1.5">
+        <span className="text-[12px] font-bold tracking-widest text-neutral-200">KIMI INSPECT</span>
+        <ServerSwitcher />
+        <div className="flex-1" />
+        <button
+          className="text-[11px] text-neutral-500 hover:text-neutral-300"
+          onClick={disconnect}
+        >
+          Disconnect
+        </button>
+      </header>
+      <div className="flex min-h-0 flex-1">
+        <NavRail view={view} onChange={setView} />
+        {view === 'services' ? (
+          <AppServicesView />
+        ) : view === 'workspace' ? (
+          <WorkspaceServicesView />
+        ) : view === 'suggest' ? (
+          <FsSuggestView />
+        ) : view === 'bash' ? (
+          <BashParserView />
+        ) : view === 'di' ? (
+          <DiInspectionView />
+        ) : view === 'models' ? (
+          <ModelCatalogView
+            onOpenSession={(id) => {
+              setSessionId(id);
+              setView('chat');
+            }}
+          />
+        ) : view === 'search' ? (
+          <SearchView onOpenResult={openSearchHit} />
+        ) : (
+          <>
+            <Sidebar activeSessionId={sessionId} onSelectSession={setSessionId} />
+            {resumeError !== null ? (
+              <div className="flex flex-1 items-center justify-center p-6 text-center text-[12px] text-red-400">
+                Failed to open session: {errorMessage(resumeError)}
+              </div>
+            ) : (
+              <ChatView
+                sessionId={sessionId}
+                agentId={agentId}
+                ready={ready}
+                onTrailChange={setTrail}
+                jump={jump}
+                onJumpHandled={() => setJump(null)}
+                onOpenSearchHit={openSearchHit}
+              />
+            )}
+            <RightPanel
+              sessionId={sessionId}
+              agentId={agentId}
+              onAgentChange={setAgentId}
+              ready={ready}
+              trail={trail}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/activity/di.ts b/apps/kimi-inspect/src/activity/di.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ed5b7e3f007b6e18ca43c856dd8fda9edcec14b4
--- /dev/null
+++ b/apps/kimi-inspect/src/activity/di.ts
@@ -0,0 +1,53 @@
+/**
+ * DI debug feed — a dedicated global-events socket for the DI view. The
+ * session activity hub (`useSessionActivities`) lives with the chat Sidebar,
+ * which unmounts when the DI view is active, so the DI view owns its own
+ * `GlobalEventsWs` (only one of the two is ever connected at a time).
+ *
+ * Every `event.di.unit_changed` frame invalidates the `['di']` query prefix
+ * (the same pattern as `event.session.created` invalidating `['sessions']`),
+ * so all DI panels refetch on unit transitions instead of waiting out their
+ * poll interval. Bursts (a cascade flipping many units at once) are coalesced
+ * with a short trailing throttle; a reconnect invalidates immediately, since
+ * live transitions were missed while the socket was down.
+ */
+
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import { useConnection } from '../connection';
+import { GlobalEventsWs } from './ws';
+
+const INVALIDATE_THROTTLE_MS = 250;
+
+export function useDiQueryInvalidation(): void {
+  const { baseUrl, config } = useConnection();
+  const queryClient = useQueryClient();
+  const token = config.token.trim();
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const invalidate = () => {
+      if (timer !== undefined) return;
+      timer = setTimeout(() => {
+        timer = undefined;
+        void queryClient.invalidateQueries({ queryKey: ['di'] });
+      }, INVALIDATE_THROTTLE_MS);
+    };
+    const ws = new GlobalEventsWs({
+      url: baseUrl,
+      token: token === '' ? undefined : token,
+      handlers: {
+        onWorkChanged: () => {},
+        onSessionCreated: () => {},
+        onMetaUpdated: () => {},
+        onDiUnitChanged: invalidate,
+        onReconnected: invalidate,
+      },
+    });
+    return () => {
+      if (timer !== undefined) clearTimeout(timer);
+      ws.close();
+    };
+  }, [baseUrl, token, queryClient]);
+}
diff --git a/apps/kimi-inspect/src/activity/store.test.ts b/apps/kimi-inspect/src/activity/store.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e600fe8122fe4a32e5f5e81b526493c4a181000
--- /dev/null
+++ b/apps/kimi-inspect/src/activity/store.test.ts
@@ -0,0 +1,227 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import type { WsLike, WsLikeCtor } from '../channel/wsLike';
+import { SessionActivityHub, SessionActivityStore, type SessionWorkFacts } from './store';
+
+function facts(partial: Partial<SessionWorkFacts> = {}): SessionWorkFacts {
+  return {
+    busy: false,
+    mainTurnActive: false,
+    pendingInteraction: 'none',
+    lastTurnReason: undefined,
+    ...partial,
+  };
+}
+
+class FakeWs implements WsLike {
+  static readonly OPEN = 1;
+  readyState = 1;
+  sent: string[] = [];
+  closed = false;
+  private readonly listeners = new Map<string, Array<(event: never) => void>>();
+
+  send(data: string): void {
+    this.sent.push(data);
+  }
+  close(): void {
+    this.closed = true;
+  }
+  addEventListener(type: string, listener: (event: never) => void): void {
+    const list = this.listeners.get(type) ?? [];
+    list.push(listener);
+    this.listeners.set(type, list);
+  }
+  emit(type: 'open' | 'message' | 'close' | 'error', event?: unknown): void {
+    for (const listener of this.listeners.get(type) ?? []) listener(event as never);
+  }
+  emitFrame(frame: Record<string, unknown>): void {
+    this.emit('message', { data: JSON.stringify(frame) });
+  }
+}
+
+function makeFakeWsCtor(): { ctor: WsLikeCtor; instances: FakeWs[] } {
+  const instances: FakeWs[] = [];
+  const ctor = class {
+    static readonly OPEN = 1;
+    constructor(_url: string, _protocols?: string | string[]) {
+      const ws = new FakeWs();
+      instances.push(ws);
+      return ws;
+    }
+  } as unknown as WsLikeCtor;
+  return { ctor, instances };
+}
+
+function seedFetch(items: Record<string, unknown>[]): typeof fetch {
+  return vi.fn(async () => ({
+    json: async () => ({ code: 0, data: { items, has_more: false } }),
+  })) as unknown as typeof fetch;
+}
+
+describe('SessionActivityStore', () => {
+  it('applies work facts and notifies with a version bump', () => {
+    const store = new SessionActivityStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.applyWorkChanged('s1', facts({ busy: true, mainTurnActive: true }));
+
+    expect(store.get('s1')).toEqual(facts({ busy: true, mainTurnActive: true }));
+    expect(store.getVersion()).toBe(1);
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores identical facts (no bump, no notify)', () => {
+    const store = new SessionActivityStore();
+    const listener = vi.fn();
+    store.applyWorkChanged('s1', facts({ busy: true }));
+    store.subscribe(listener);
+
+    store.applyWorkChanged('s1', facts({ busy: true }));
+
+    expect(store.getVersion()).toBe(1);
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('seed replaces the whole map', () => {
+    const store = new SessionActivityStore();
+    store.applyWorkChanged('stale', facts({ busy: true }));
+
+    store.seed([['s1', facts({ pendingInteraction: 'approval' })]]);
+
+    expect(store.get('stale')).toBeUndefined();
+    expect(store.get('s1')?.pendingInteraction).toBe('approval');
+  });
+});
+
+describe('SessionActivityHub', () => {
+  it('seeds the store from the REST session list when the socket opens', async () => {
+    const { ctor, instances } = makeFakeWsCtor();
+    const hub = new SessionActivityHub({
+      url: 'http://127.0.0.1:58627',
+      onListChanged: () => {},
+      WebSocketImpl: ctor,
+      fetchImpl: seedFetch([
+        { id: 's1', busy: true, main_turn_active: true, pending_interaction: 'none' },
+        { id: 's2', busy: false, main_turn_active: false, pending_interaction: 'approval' },
+      ]),
+    });
+
+    instances[0]!.emit('open');
+    await vi.waitFor(() => expect(hub.store.get('s1')).toBeDefined());
+
+    expect(hub.store.get('s1')).toEqual(facts({ busy: true, mainTurnActive: true }));
+    expect(hub.store.get('s2')?.pendingInteraction).toBe('approval');
+    // The hello goes out with no subscriptions — global facts flow regardless.
+    const hello = JSON.parse(instances[0]!.sent[0]!) as {
+      type: string;
+      payload: { subscriptions: string[] };
+    };
+    expect(hello.type).toBe('client_hello');
+    expect(hello.payload.subscriptions).toEqual([]);
+    hub.close();
+  });
+
+  it('applies live work_changed frames by session id', () => {
+    const { ctor, instances } = makeFakeWsCtor();
+    const hub = new SessionActivityHub({
+      url: 'http://127.0.0.1:58627',
+      onListChanged: () => {},
+      WebSocketImpl: ctor,
+      fetchImpl: seedFetch([]),
+    });
+    instances[0]!.emit('open');
+
+    instances[0]!.emitFrame({
+      type: 'event.session.work_changed',
+      session_id: 's1',
+      payload: {
+        type: 'event.session.work_changed',
+        busy: true,
+        main_turn_active: true,
+        pending_interaction: 'question',
+        last_turn_reason: null,
+      },
+    });
+
+    expect(hub.store.get('s1')).toEqual(
+      facts({ busy: true, mainTurnActive: true, pendingInteraction: 'question' }),
+    );
+    hub.close();
+  });
+
+  it('forwards created and meta updates as list-level signals', () => {
+    const { ctor, instances } = makeFakeWsCtor();
+    const onListChanged = vi.fn();
+    const hub = new SessionActivityHub({
+      url: 'http://127.0.0.1:58627',
+      onListChanged,
+      WebSocketImpl: ctor,
+      fetchImpl: seedFetch([]),
+    });
+    instances[0]!.emit('open');
+
+    instances[0]!.emitFrame({ type: 'event.session.created', session_id: 's1', payload: {} });
+    instances[0]!.emitFrame({ type: 'session.meta.updated', session_id: 's1', payload: {} });
+    // Agent-grained frames are ignored even if they somehow arrive.
+    instances[0]!.emitFrame({ type: 'turn.started', session_id: 's1', payload: {} });
+
+    expect(onListChanged).toHaveBeenCalledTimes(2);
+    expect(hub.store.get('s1')).toBeUndefined();
+    hub.close();
+  });
+
+  it('forwards archived and workspace frames as list-level signals and drops archived facts', () => {
+    const { ctor, instances } = makeFakeWsCtor();
+    const onListChanged = vi.fn();
+    const hub = new SessionActivityHub({
+      url: 'http://127.0.0.1:58627',
+      onListChanged,
+      WebSocketImpl: ctor,
+      fetchImpl: seedFetch([]),
+    });
+    instances[0]!.emit('open');
+
+    instances[0]!.emitFrame({
+      type: 'event.session.work_changed',
+      session_id: 's1',
+      payload: { type: 'event.session.work_changed', busy: true },
+    });
+    expect(hub.store.get('s1')).toBeDefined();
+
+    // Global-dispatched frames carry the __global__ watermark; the real
+    // session id rides in the payload.
+    instances[0]!.emitFrame({
+      type: 'event.session.archived',
+      session_id: '__global__',
+      payload: { type: 'event.session.archived', sessionId: 's1', workspace_id: 'wd_1' },
+    });
+    expect(hub.store.get('s1')).toBeUndefined();
+    expect(onListChanged).toHaveBeenCalledTimes(1);
+
+    instances[0]!.emitFrame({
+      type: 'event.session.work_changed',
+      session_id: 's2',
+      payload: { type: 'event.session.work_changed', busy: true },
+    });
+    expect(hub.store.get('s2')).toBeDefined();
+
+    instances[0]!.emitFrame({
+      type: 'event.session.deleted',
+      session_id: '__global__',
+      payload: { type: 'event.session.deleted', sessionId: 's2', workspace_id: 'wd_1' },
+    });
+    expect(hub.store.get('s2')).toBeUndefined();
+    expect(onListChanged).toHaveBeenCalledTimes(2);
+
+    for (const type of [
+      'event.workspace.created',
+      'event.workspace.updated',
+      'event.workspace.deleted',
+    ]) {
+      instances[0]!.emitFrame({ type, session_id: '__global__', payload: {} });
+    }
+    expect(onListChanged).toHaveBeenCalledTimes(5);
+    hub.close();
+  });
+});
diff --git a/apps/kimi-inspect/src/activity/store.ts b/apps/kimi-inspect/src/activity/store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af77ad6c0626cb0a65ee04e7933e0edbd510cd7a
--- /dev/null
+++ b/apps/kimi-inspect/src/activity/store.ts
@@ -0,0 +1,160 @@
+/**
+ * Session activity hub — owns the global-events socket and the per-session
+ * coarse activity map behind the Sidebar's status badges.
+ *
+ * Two data sources converge into one store: the initial / reconnect
+ * baseline comes from a single `GET /api/v1/sessions` page (every wire
+ * session carries `busy` / `main_turn_active` / `pending_interaction` /
+ * `last_turn_reason`), and live updates arrive as
+ * `event.session.work_changed` frames over the global WS channel (no
+ * subscription needed server-side). List-level facts (session created /
+ * retitled) are forwarded to the consumer as `onListChanged` so the
+ * react-query session list invalidates instead of waiting out its slow poll.
+ * The store is a plain subscribe/version store so React binds through
+ * `useSyncExternalStore`.
+ */
+
+import type { WsLikeCtor } from '../channel/wsLike';
+import { GlobalEventsWs, type SessionWorkFacts } from './ws';
+
+export type { SessionWorkFacts };
+
+export class SessionActivityStore {
+  private activities = new Map<string, SessionWorkFacts>();
+  private readonly listeners = new Set<() => void>();
+  private version = 0;
+
+  get(sessionId: string): SessionWorkFacts | undefined {
+    return this.activities.get(sessionId);
+  }
+
+  getVersion(): number {
+    return this.version;
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  applyWorkChanged(sessionId: string, facts: SessionWorkFacts): void {
+    const previous = this.activities.get(sessionId);
+    if (
+      previous !== undefined &&
+      previous.busy === facts.busy &&
+      previous.mainTurnActive === facts.mainTurnActive &&
+      previous.pendingInteraction === facts.pendingInteraction &&
+      previous.lastTurnReason === facts.lastTurnReason
+    ) {
+      return;
+    }
+    this.activities.set(sessionId, facts);
+    this.bump();
+  }
+
+  /** Replace the whole map with a REST baseline (initial load / re-seed). */
+  seed(entries: Iterable<readonly [string, SessionWorkFacts]>): void {
+    this.activities = new Map(entries);
+    this.bump();
+  }
+
+  /** Drop one session's live facts (e.g. it was archived — no further
+   *  work_changed frames will arrive to correct a stale badge). */
+  remove(sessionId: string): void {
+    if (this.activities.delete(sessionId)) this.bump();
+  }
+
+  private bump(): void {
+    this.version += 1;
+    for (const listener of this.listeners) listener();
+  }
+}
+
+export interface SessionActivityHubOptions {
+  /** Server base URL (`http(s)://host:port`). */
+  readonly url: string;
+  readonly token?: string | undefined;
+  /** List-level signal (session created / retitled) — invalidate the list. */
+  readonly onListChanged: () => void;
+  readonly WebSocketImpl?: WsLikeCtor;
+  readonly fetchImpl?: typeof fetch;
+}
+
+export class SessionActivityHub {
+  readonly store = new SessionActivityStore();
+  private readonly ws: GlobalEventsWs;
+  private readonly baseUrl: string;
+  private readonly token?: string;
+  private readonly fetchImpl: typeof fetch;
+
+  constructor(opts: SessionActivityHubOptions) {
+    this.baseUrl = opts.url.replace(/\/$/, '');
+    this.token = opts.token;
+    // Bind the default: `this.fetchImpl(...)` is a member call, and the
+    // browser's `fetch` throws Illegal invocation when its receiver is not
+    // the global object (Node's undici fetch does not care).
+    this.fetchImpl = opts.fetchImpl ?? fetch.bind(globalThis);
+    this.ws = new GlobalEventsWs({
+      url: opts.url,
+      token: opts.token,
+      WebSocketImpl: opts.WebSocketImpl,
+      handlers: {
+        onWorkChanged: (sessionId, facts) => this.store.applyWorkChanged(sessionId, facts),
+        onSessionCreated: () => opts.onListChanged(),
+        onMetaUpdated: () => opts.onListChanged(),
+        onSessionArchived: (sessionId) => {
+          this.store.remove(sessionId);
+          opts.onListChanged();
+        },
+        onSessionDeleted: (sessionId) => {
+          this.store.remove(sessionId);
+          opts.onListChanged();
+        },
+        onWorkspaceChanged: () => opts.onListChanged(),
+        onReconnected: () => void this.seed(),
+      },
+    });
+  }
+
+  close(): void {
+    this.ws.close();
+  }
+
+  private async seed(): Promise<void> {
+    const headers: Record<string, string> = {};
+    if (this.token !== undefined && this.token.length > 0) {
+      headers['authorization'] = `Bearer ${this.token}`;
+    }
+    try {
+      const res = await this.fetchImpl(`${this.baseUrl}/api/v1/sessions`, { headers });
+      const envelope = (await res.json()) as {
+        code: number;
+        data?: { items?: Record<string, unknown>[] };
+      };
+      if (envelope.code !== 0 || envelope.data?.items === undefined) return;
+      const entries: [string, SessionWorkFacts][] = [];
+      for (const item of envelope.data.items) {
+        const id = item['id'];
+        if (typeof id !== 'string' || typeof item['busy'] !== 'boolean') continue;
+        const pending = item['pending_interaction'];
+        const reason = item['last_turn_reason'];
+        entries.push([
+          id,
+          {
+            busy: item['busy'],
+            mainTurnActive: item['main_turn_active'] === true,
+            pendingInteraction: pending === 'approval' || pending === 'question' ? pending : 'none',
+            lastTurnReason:
+              reason === 'completed' || reason === 'cancelled' || reason === 'failed'
+                ? reason
+                : undefined,
+          },
+        ]);
+      }
+      this.store.seed(entries);
+    } catch {
+      // Seed is best-effort: live frames keep flowing, and the next reconnect
+      // re-seeds. A dead server surfaces through the connection layer anyway.
+    }
+  }
+}
diff --git a/apps/kimi-inspect/src/activity/useSessionActivity.ts b/apps/kimi-inspect/src/activity/useSessionActivity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..651cb6db8422769a5087c6857c8d69653ce464a6
--- /dev/null
+++ b/apps/kimi-inspect/src/activity/useSessionActivity.ts
@@ -0,0 +1,52 @@
+/**
+ * React binding for the session activity hub: one hub per (server, token),
+ * torn down on server switch or unmount. Consumers read per-session coarse
+ * activity (`get(sessionId)`) and re-render on every store bump; list-level
+ * signals invalidate the `['sessions']` / `['v2-sessions']` react-query lists
+ * directly.
+ *
+ * The hub is created inside `useEffect` (not `useMemo`): under StrictMode
+ * the mount → cleanup → re-mount cycle runs the cleanup of the FIRST mount,
+ * and a memo-created hub would stay closed for the rest of the page's life.
+ */
+
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+
+import { useConnection } from '../connection';
+import { SessionActivityHub, SessionActivityStore, type SessionWorkFacts } from './store';
+
+const EMPTY_STORE = new SessionActivityStore();
+
+export function useSessionActivities(): {
+  get(sessionId: string): SessionWorkFacts | undefined;
+} {
+  const { baseUrl, config } = useConnection();
+  const queryClient = useQueryClient();
+  const token = config.token.trim();
+  const [hub, setHub] = useState<SessionActivityHub | null>(null);
+
+  useEffect(() => {
+    const created = new SessionActivityHub({
+      url: baseUrl,
+      token: token === '' ? undefined : token,
+      onListChanged: () => {
+        void queryClient.invalidateQueries({ queryKey: ['sessions'] });
+        void queryClient.invalidateQueries({ queryKey: ['v2-sessions'] });
+        void queryClient.invalidateQueries({ queryKey: ['workspaces'] });
+      },
+    });
+    setHub(created);
+    return () => {
+      setHub(null);
+      created.close();
+    };
+  }, [baseUrl, token, queryClient]);
+
+  const store = hub?.store ?? EMPTY_STORE;
+  useSyncExternalStore(
+    (listener) => store.subscribe(listener),
+    () => store.getVersion(),
+  );
+  return store;
+}
diff --git a/apps/kimi-inspect/src/activity/ws.ts b/apps/kimi-inspect/src/activity/ws.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a1887f05c488a037f3f6563b6b645878e466f5c
--- /dev/null
+++ b/apps/kimi-inspect/src/activity/ws.ts
@@ -0,0 +1,308 @@
+/**
+ * Minimal `/api/v1/ws` client for GLOBAL session facts — no subscriptions.
+ *
+ * The server pushes every global event (`event.session.*` /
+ * `session.meta.updated` / `event.workspace.*` / `event.config.*`) to every
+ * established connection, so this client subscribes to nothing: it sends a
+ * `client_hello` with an empty subscription list (etiquette only — the
+ * delivery set does not depend on it) and dispatches the coarse per-session
+ * facts to the consumer:
+ *
+ *   - `event.session.work_changed` → `{busy, main_turn_active,
+ *     pending_interaction, last_turn_reason}` for one session;
+ *   - `event.session.created` / `session.meta.updated` → list-level signals
+ *     (a session appeared / retitled), forwarded for list invalidation;
+ *   - `event.session.archived` (live or cold) / `event.workspace.*` →
+ *     list-level signals, forwarded for list invalidation;
+ *   - `event.di.unit_changed` → one DI unit state transition of the engine's
+ *     scope tree (the debug-surface feed), forwarded for `['di']`
+ *     invalidation. Global like the rest: it carries the `__global__`
+ *     session watermark and fans out to every connection.
+ *
+ * Session/agent-grained events never arrive here (they stay subscribe-gated
+ * server-side); the transcript chat channel has its own socket. Global
+ * frames are live-only — a drop loses whatever fired meanwhile, so the
+ * consumer answers `onReconnected` with a REST re-seed.
+ *
+ * The bearer token is presented at the upgrade through the
+ * `kimi-code.bearer.<token>` subprotocol (the only credential channel a
+ * browser WebSocket has).
+ */
+
+import type { WsLike, WsLikeCtor } from '../channel/wsLike';
+
+export type SessionPendingInteraction = 'none' | 'approval' | 'question';
+export type SessionTurnOutcome = 'completed' | 'cancelled' | 'failed';
+
+export interface SessionWorkFacts {
+  readonly busy: boolean;
+  readonly mainTurnActive: boolean;
+  readonly pendingInteraction: SessionPendingInteraction;
+  readonly lastTurnReason?: SessionTurnOutcome | undefined;
+}
+
+export type DiUnitState = 'Pending' | 'Activating' | 'Active' | 'Unloading' | 'Failed';
+
+/** Wire payload of the `event.di.unit_changed` global event. */
+export interface DiUnitChangedPayload {
+  /** Scope path of the container owning the unit (`app` / `app/workspace:<id>` / …). */
+  readonly scope: string;
+  readonly token: string;
+  readonly state: DiUnitState;
+  /** Serialized sticky failure, present only on a Failed transition. */
+  readonly error?: string | undefined;
+}
+
+export interface GlobalEventsWsHandlers {
+  /** Coarse work-fact tuple for one session changed. */
+  onWorkChanged: (sessionId: string, facts: SessionWorkFacts) => void;
+  /** A session was created (list-level signal). */
+  onSessionCreated: (sessionId: string) => void;
+  /** A session's title/patch changed (list-level signal). */
+  onMetaUpdated: (sessionId: string) => void;
+  /** A session was archived, live or cold (list-level signal). The envelope
+   *  carries the `__global__` watermark; the real session id rides in the
+   *  payload. */
+  onSessionArchived?: ((sessionId: string) => void) | undefined;
+  /** A session was permanently deleted (list-level signal). Same envelope
+   *  shape as `event.session.archived`: the real session id rides in the
+   *  payload. */
+  onSessionDeleted?: (sessionId: string) => void;
+  /** A workspace was created / updated / deleted (list-level signal). */
+  onWorkspaceChanged?: (() => void) | undefined;
+  /** A DI unit of the engine's scope tree changed state (debug feed). */
+  onDiUnitChanged?: ((payload: DiUnitChangedPayload) => void) | undefined;
+  /** Socket established (initial connect and every reconnect) — the consumer
+   *  answers with a REST re-seed, since live facts are missed while down. */
+  onReconnected: () => void;
+}
+
+export interface GlobalEventsWsOptions {
+  /** Server base URL (`http(s)://host:port`) or a full `ws(s)://…/api/v1/ws` URL. */
+  readonly url: string;
+  readonly token?: string | undefined;
+  readonly handlers: GlobalEventsWsHandlers;
+  /** WebSocket implementation; defaults to the global `WebSocket`. */
+  readonly WebSocketImpl?: WsLikeCtor;
+  /** Base delay (ms) for the reconnect backoff. Default `500`. */
+  readonly reconnectDelayMs?: number;
+}
+
+interface ServerFrame {
+  readonly type: string;
+  readonly id?: string;
+  readonly session_id?: string;
+  readonly payload?: unknown;
+}
+
+const WS_BEARER_PROTOCOL_PREFIX = 'kimi-code.bearer.';
+
+export class GlobalEventsWs {
+  private readonly wsUrl: string;
+  private readonly token?: string;
+  private readonly handlers: GlobalEventsWsHandlers;
+  private readonly WsCtor: WsLikeCtor;
+  private readonly reconnectDelayMs: number;
+
+  private ws: WsLike | undefined;
+  private manualClose = false;
+  private reconnectAttempt = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+
+  constructor(opts: GlobalEventsWsOptions) {
+    this.wsUrl = toWsUrl(opts.url);
+    this.token = opts.token;
+    this.handlers = opts.handlers;
+    const ctor = opts.WebSocketImpl ?? (globalThis.WebSocket as unknown as WsLikeCtor | undefined);
+    if (ctor === undefined) {
+      throw new Error('no WebSocket implementation available; pass WebSocketImpl');
+    }
+    this.WsCtor = ctor;
+    this.reconnectDelayMs = opts.reconnectDelayMs ?? 500;
+    this.connect();
+  }
+
+  /** Tear the socket down permanently. */
+  close(): void {
+    this.manualClose = true;
+    if (this.reconnectTimer !== undefined) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = undefined;
+    }
+    const ws = this.ws;
+    this.ws = undefined;
+    ws?.close();
+  }
+
+  private connect(): void {
+    const protocols =
+      this.token !== undefined && this.token.length > 0
+        ? [`${WS_BEARER_PROTOCOL_PREFIX}${this.token}`]
+        : undefined;
+    let ws: WsLike;
+    try {
+      ws = new this.WsCtor(this.wsUrl, protocols);
+    } catch {
+      this.scheduleReconnect();
+      return;
+    }
+    this.ws = ws;
+    ws.addEventListener('open', () => {
+      this.reconnectAttempt = 0;
+      this.send({
+        type: 'client_hello',
+        id: `kimi-inspect-global-${Date.now().toString(36)}`,
+        payload: { client_id: 'kimi-inspect', subscriptions: [] },
+      });
+      // Established (first connect and every reconnect alike): live facts may
+      // have been missed — the consumer re-seeds from REST.
+      this.handlers.onReconnected();
+    });
+    ws.addEventListener('message', (event: { data: unknown }) => {
+      this.onMessage(event.data);
+    });
+    ws.addEventListener('close', () => {
+      // Stale socket (a manual close already cleared `this.ws`).
+      if (this.ws !== ws) return;
+      this.ws = undefined;
+      if (!this.manualClose) this.scheduleReconnect();
+    });
+    ws.addEventListener('error', () => {
+      // The 'close' event always follows 'error'; reconnect logic lives there.
+    });
+  }
+
+  private onMessage(raw: unknown): void {
+    let frame: ServerFrame;
+    try {
+      frame = JSON.parse(typeof raw === 'string' ? raw : String(raw)) as ServerFrame;
+    } catch {
+      return;
+    }
+    const sessionId = frame.session_id;
+    if (typeof sessionId !== 'string' || sessionId === '') return;
+    switch (frame.type) {
+      case 'event.session.work_changed': {
+        const facts = parseWorkFacts(frame.payload);
+        if (facts !== undefined) this.handlers.onWorkChanged(sessionId, facts);
+        return;
+      }
+      case 'event.session.created': {
+        this.handlers.onSessionCreated(sessionId);
+        return;
+      }
+      case 'event.session.archived': {
+        const payload = frame.payload as { sessionId?: unknown } | undefined;
+        const archivedId = payload?.sessionId;
+        if (typeof archivedId === 'string' && archivedId !== '') {
+          this.handlers.onSessionArchived?.(archivedId);
+        }
+        return;
+      }
+      case 'event.session.deleted': {
+        const payload = frame.payload as { sessionId?: unknown } | undefined;
+        const deletedId = payload?.sessionId;
+        if (typeof deletedId === 'string' && deletedId !== '') {
+          this.handlers.onSessionDeleted?.(deletedId);
+        }
+        return;
+      }
+      case 'event.workspace.created':
+      case 'event.workspace.updated':
+      case 'event.workspace.deleted': {
+        this.handlers.onWorkspaceChanged?.();
+        return;
+      }
+      case 'session.meta.updated': {
+        this.handlers.onMetaUpdated(sessionId);
+        return;
+      }
+      case 'event.di.unit_changed': {
+        const payload = parseDiUnitChangedPayload(frame.payload);
+        if (payload !== undefined) this.handlers.onDiUnitChanged?.(payload);
+        return;
+      }
+      case 'ping': {
+        const nonce = (frame.payload as { nonce?: unknown } | undefined)?.nonce;
+        this.send({ type: 'pong', payload: { nonce } });
+        return;
+      }
+      default:
+        return;
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.manualClose) return;
+    this.reconnectAttempt += 1;
+    const delay = Math.min(this.reconnectDelayMs * 2 ** (this.reconnectAttempt - 1), 10_000);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = undefined;
+      this.connect();
+    }, delay);
+    this.reconnectTimer.unref?.();
+  }
+
+  private send(frame: Record<string, unknown>): void {
+    const ws = this.ws;
+    if (ws === undefined || ws.readyState !== this.WsCtor.OPEN) return;
+    try {
+      ws.send(JSON.stringify(frame));
+    } catch {
+      // best-effort; the close handler handles teardown
+    }
+  }
+}
+
+function parseWorkFacts(payload: unknown): SessionWorkFacts | undefined {
+  if (typeof payload !== 'object' || payload === null) return undefined;
+  const p = payload as Record<string, unknown>;
+  if (typeof p['busy'] !== 'boolean') return undefined;
+  const pending = p['pending_interaction'];
+  const reason = p['last_turn_reason'];
+  return {
+    busy: p['busy'],
+    mainTurnActive: p['main_turn_active'] === true,
+    pendingInteraction: pending === 'approval' || pending === 'question' ? pending : 'none',
+    lastTurnReason:
+      reason === 'completed' || reason === 'cancelled' || reason === 'failed' ? reason : undefined,
+  };
+}
+
+const DI_UNIT_STATES: ReadonlySet<string> = new Set([
+  'Pending',
+  'Activating',
+  'Active',
+  'Unloading',
+  'Failed',
+]);
+
+function parseDiUnitChangedPayload(payload: unknown): DiUnitChangedPayload | undefined {
+  if (typeof payload !== 'object' || payload === null) return undefined;
+  const p = payload as Record<string, unknown>;
+  if (typeof p['scope'] !== 'string' || typeof p['token'] !== 'string') return undefined;
+  const state = p['state'];
+  if (typeof state !== 'string' || !DI_UNIT_STATES.has(state)) return undefined;
+  return {
+    scope: p['scope'],
+    token: p['token'],
+    state: state as DiUnitState,
+    error: typeof p['error'] === 'string' ? p['error'] : undefined,
+  };
+}
+
+/** Derive the `/api/v1/ws` WebSocket URL from a server base URL (or pass a full ws URL through). */
+function toWsUrl(base: string): string {
+  const url = new URL(base);
+  if (url.protocol === 'http:') url.protocol = 'ws:';
+  else if (url.protocol === 'https:') url.protocol = 'wss:';
+  if (url.protocol !== 'ws:' && url.protocol !== 'wss:') {
+    throw new Error(`unsupported URL scheme for WS transport: ${base}`);
+  }
+  if (!url.pathname.endsWith('/api/v1/ws')) {
+    url.pathname = `${url.pathname.replace(/\/$/, '')}/api/v1/ws`;
+  }
+  url.search = '';
+  url.hash = '';
+  return url.toString();
+}
diff --git a/apps/kimi-inspect/src/audit/audit.test.ts b/apps/kimi-inspect/src/audit/audit.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45c586c95c524b47018eb048738175d919322583
--- /dev/null
+++ b/apps/kimi-inspect/src/audit/audit.test.ts
@@ -0,0 +1,266 @@
+/**
+ * Audit-layer tests: the trail recorder, the structural diff, serialization,
+ * and tail-preserving truncation used by the chat view's audit panel.
+ */
+
+import type { StepMessage, TurnMessage } from '@moonshot-ai/kap-server/protocol';
+import { describe, expect, it } from 'vitest';
+
+import { EMPTY_CHAT_STATE, type ChatState } from '../transcript/store';
+import { diffValue, type DiffNode } from './diff';
+import { serializeState } from './serialize';
+import { AuditTrail, AUDIT_TRAIL_MAX_ENTRIES } from './trail';
+import { tailTrunc } from './truncate';
+
+const T0 = Date.parse('2026-01-01T00:00:00.000Z');
+let tick = 0;
+
+function ts(): number {
+  tick += 1;
+  return T0 + tick * 1000;
+}
+
+function turnMsg(n: number, status: 'running' | 'completed' = 'completed'): TurnMessage {
+  return {
+    type: 'turn',
+    session_id: 's1',
+    agent_id: 'main',
+    timestamp: ts(),
+    turn_id: `t${n}`,
+    ordinal: n,
+    status,
+    origin: { kind: 'user' },
+  };
+}
+
+function stepMsg(stepId: string, status: 'running' | 'completed'): StepMessage {
+  return {
+    type: 'step',
+    session_id: 's1',
+    agent_id: 'main',
+    timestamp: ts(),
+    step_id: stepId,
+    turn_id: stepId.split('.')[0] ?? 't1',
+    ordinal: Number(stepId.split('.')[1] ?? '1'),
+    status,
+  };
+}
+
+function stateWithTimeline(items: readonly (TurnMessage | StepMessage)[]): ChatState {
+  return {
+    ...EMPTY_CHAT_STATE,
+    entries: items.map((message) => ({
+      key: message.type === 'turn' ? `turn:${message.turn_id}` : `step:${message.step_id}`,
+      message,
+    })),
+  };
+}
+
+// ---------------------------------------------------------------- diff
+
+describe('diffValue', () => {
+  it('collapses reference-equal subtrees to unchanged without children', () => {
+    const shared = { a: 1, b: { c: 'x' } };
+    const node = diffValue({ v: shared }, { v: shared });
+    expect(node.status).toBe('unchanged');
+    expect(node.children?.get('v')?.children).toBeUndefined();
+  });
+
+  it('marks added, removed, and modified object keys', () => {
+    const node = diffValue(
+      { keep: 1, gone: 'x', changed: 'a' },
+      { keep: 1, fresh: true, changed: 'b' },
+    );
+    expect(node.status).toBe('modified');
+    expect(node.children?.get('keep')?.status).toBe('unchanged');
+    expect(node.children?.get('fresh')?.status).toBe('added');
+    expect(node.children?.get('gone')).toMatchObject({ status: 'removed', prev: 'x' });
+    expect(node.children?.get('changed')).toMatchObject({
+      status: 'modified',
+      prev: 'a',
+      value: 'b',
+    });
+  });
+
+  it('matches entity arrays by id instead of index', () => {
+    const t1 = turnMsg(1);
+    const t2 = turnMsg(2);
+    const prev = [t1, t2];
+    const next = [t1, { ...t2, status: 'running' as const }, turnMsg(3)];
+    const node = diffValue(prev, next);
+    expect(node.children?.get('t1')?.status).toBe('unchanged');
+    expect(node.children?.get('t2')?.status).toBe('modified');
+    expect(node.children?.get('t2')?.children?.get('status')).toMatchObject({
+      status: 'modified',
+      prev: 'completed',
+      value: 'running',
+    });
+    expect(node.children?.get('t3')?.status).toBe('added');
+  });
+
+  it('keys steps by step_id (not their shared turn_id) so siblings never collide', () => {
+    const done = stepMsg('t1.1', 'completed');
+    const node = diffValue(
+      [done, stepMsg('t1.2', 'completed')],
+      [done, stepMsg('t1.2', 'running')],
+    );
+    expect([...(node.children?.keys() ?? [])]).toEqual(['t1.1', 't1.2']);
+    expect(node.children?.get('t1.1')?.status).toBe('unchanged');
+    expect(node.children?.get('t1.2')?.status).toBe('modified');
+  });
+
+  it('marks removed array elements by id', () => {
+    const t2 = turnMsg(2);
+    const node = diffValue([turnMsg(1), t2], [t2]);
+    expect(node.children?.get('t1')).toMatchObject({ status: 'removed' });
+    expect(node.children?.get('t2')?.status).toBe('unchanged');
+  });
+
+  it('marks whole-subtree adds/removes without descending', () => {
+    const added = diffValue(undefined, { nested: { deep: 1 } });
+    expect(added.status).toBe('added');
+    expect(added.children).toBeUndefined();
+    const removed = diffValue({ nested: 1 }, undefined);
+    expect(removed.status).toBe('removed');
+    expect(removed.children).toBeUndefined();
+  });
+
+  it('treats type changes as leaf modifications', () => {
+    expect(diffValue('1', 1).status).toBe('modified');
+    expect(diffValue(null, {}).status).toBe('modified');
+    expect(diffValue([1], { 0: 1 }).status).toBe('modified');
+  });
+
+  it('diffs two serialized states with session.state changes visible', () => {
+    const base = stateWithTimeline([turnMsg(1)]);
+    const prev = serializeState(base);
+    const nextState: ChatState = {
+      ...base,
+      sessionState: {
+        type: 'session.state',
+        session_id: 's1',
+        timestamp: ts(),
+        status: 'running',
+        goal: { objective: 'ship it', status: 'active' },
+        modes: { plan: { review_path: '/tmp/plan.md' } },
+      },
+    };
+    const node: DiffNode = diffValue(prev, serializeState(nextState));
+    expect(node.children?.get('timeline')?.status).toBe('unchanged');
+    const sessionState = node.children?.get('sessionState');
+    expect(sessionState?.status).toBe('added');
+    expect(sessionState?.children).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------- serialize
+
+describe('serializeState', () => {
+  it('turns maps into sorted plain objects and flattens the timeline', () => {
+    const state: ChatState = {
+      ...EMPTY_CHAT_STATE,
+      entries: stateWithTimeline([turnMsg(1)]).entries,
+      tasks: new Map([
+        [
+          'b-task',
+          {
+            type: 'task',
+            session_id: 's1',
+            agent_id: 'main',
+            timestamp: ts(),
+            task_id: 'b-task',
+            kind: 'shell',
+            status: 'running',
+            detached: false,
+            output_tail: '',
+          },
+        ],
+        [
+          'a-task',
+          {
+            type: 'task',
+            session_id: 's1',
+            agent_id: 'main',
+            timestamp: ts(),
+            task_id: 'a-task',
+            kind: 'tool',
+            status: 'completed',
+            detached: false,
+            output_tail: '',
+          },
+        ],
+      ]),
+    };
+    const out = serializeState(state);
+    expect(Object.keys(out.tasks)).toEqual(['a-task', 'b-task']);
+    expect(out.timeline.map((m) => (m.type === 'turn' ? m.turn_id : ''))).toEqual(['t1']);
+    expect(out.hasMoreOlder).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------- truncate
+
+describe('tailTrunc', () => {
+  it('returns short strings unchanged', () => {
+    expect(tailTrunc('hello')).toBe('hello');
+    expect(tailTrunc('x'.repeat(500))).toBe('x'.repeat(500));
+  });
+
+  it('keeps the tail of long strings and reports the total length', () => {
+    const value = 'head-padding'.repeat(100) + 'THE-TAIL';
+    const out = tailTrunc(value, 50);
+    expect(out).toContain(`${value.length} chars total`);
+    expect(out.endsWith('THE-TAIL')).toBe(true);
+    expect(out).not.toContain('head-padding'.repeat(10));
+  });
+});
+
+// ---------------------------------------------------------------- trail
+
+describe('AuditTrail', () => {
+  it('records entries with increasing indices, timestamps, and state references', () => {
+    const trail = new AuditTrail();
+    const s1 = stateWithTimeline([turnMsg(1)]);
+    const s2 = stateWithTimeline([turnMsg(1), turnMsg(2)]);
+    trail.recordRest({ pageSize: 500 }, 'replace', 1, { turn_id: 't1', step_id: 't1.1' }, s1);
+    trail.recordWs(turnMsg(2, 'running'), s2);
+    trail.recordEvent('prompt', 'hello', s2);
+
+    const entries = trail.getEntries();
+    expect(entries.map((entry) => entry.kind)).toEqual(['rest', 'ws', 'event']);
+    expect(entries.map((entry) => entry.index)).toEqual([0, 1, 2]);
+    expect(entries[0]!.state).toBe(s1);
+    expect(entries[1]!.state).toBe(s2);
+    expect(entries[0]).toMatchObject({ mode: 'replace', messageCount: 1 });
+    expect(entries[2]).toMatchObject({ event: 'prompt', detail: 'hello' });
+    expect(entries.every((entry) => typeof entry.at === 'string' && entry.at.length > 0)).toBe(
+      true,
+    );
+    expect(entries.every((entry) => entry.summary.length > 0)).toBe(true);
+  });
+
+  it('notifies subscribers on each record', () => {
+    const trail = new AuditTrail();
+    let notified = 0;
+    const unsubscribe = trail.subscribe(() => {
+      notified += 1;
+    });
+    trail.recordEvent('cancel', undefined, EMPTY_CHAT_STATE);
+    trail.recordEvent('ack', undefined, EMPTY_CHAT_STATE);
+    expect(notified).toBe(2);
+    unsubscribe();
+    trail.recordEvent('reconnect', undefined, EMPTY_CHAT_STATE);
+    expect(notified).toBe(2);
+  });
+
+  it('drops the oldest entries beyond the cap while indices keep increasing', () => {
+    const trail = new AuditTrail();
+    for (let i = 0; i < AUDIT_TRAIL_MAX_ENTRIES + 10; i += 1) {
+      trail.recordEvent('prompt', `p${i}`, EMPTY_CHAT_STATE);
+    }
+    const entries = trail.getEntries();
+    expect(entries).toHaveLength(AUDIT_TRAIL_MAX_ENTRIES);
+    expect(entries[0]!.index).toBe(10);
+    expect(entries.at(-1)!.index).toBe(AUDIT_TRAIL_MAX_ENTRIES + 9);
+  });
+});
diff --git a/apps/kimi-inspect/src/audit/diff.ts b/apps/kimi-inspect/src/audit/diff.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13c1af72e1b41cac2e72048c061baea5522c9527
--- /dev/null
+++ b/apps/kimi-inspect/src/audit/diff.ts
@@ -0,0 +1,122 @@
+/**
+ * Structural diff over serialized `ChatState` values (see `serialize.ts`).
+ *
+ * The audit panel diffs two adjacent, immutable states. Because the store
+ * is copy-on-write, untouched subtrees share references — the reference
+ * equality fast path below collapses them to `unchanged` without walking.
+ *
+ * Arrays of protocol entities are matched by their id field (turn_id,
+ * step_id, message_id, tool_call_id, …) rather than by index, so an upsert
+ * in the middle of the timeline does not turn into a cascade of spurious
+ * modifications.
+ */
+
+export type DiffStatus = 'unchanged' | 'added' | 'removed' | 'modified';
+
+export interface DiffNode {
+  readonly status: DiffStatus;
+  /** Current value (`undefined` when removed). */
+  readonly value: unknown;
+  /** Previous value (`undefined` when added). */
+  readonly prev: unknown;
+  /**
+   * Object/array children — key is the object key, the entity id, or
+   * `#<index>` for plain arrays. Absent on leaves and on whole-subtree
+   * added/removed nodes (the renderer colors the subtree as one block).
+   */
+  readonly children?: ReadonlyMap<string, DiffNode>;
+}
+
+/**
+ * Id fields checked in priority order — MOST SPECIFIC FIRST. An interaction
+ * carries both `interaction_id` and `tool_call_id`, a tool call can carry
+ * `task_id` / `todo_id` alongside its `tool_call_id`, and every timeline
+ * entity carries `turn_id`; matching the wrong one mislabels the node and,
+ * worse, collides siblings in the children map (two tool calls of one task
+ * both keyed by that task id).
+ */
+const ID_FIELDS = [
+  'message_id',
+  'interaction_id',
+  'tool_call_id',
+  'task_id',
+  'todo_id',
+  'system_id',
+  'step_id',
+  'turn_id',
+] as const;
+
+function elementId(element: unknown): string | undefined {
+  if (typeof element !== 'object' || element === null) return undefined;
+  for (const field of ID_FIELDS) {
+    const value = (element as Record<string, unknown>)[field];
+    if (typeof value === 'string') return value;
+  }
+  return undefined;
+}
+
+/** Public for the audit UI: same id-priority keying used to match array elements. */
+export { elementId };
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function containerStatus(children: ReadonlyMap<string, DiffNode>): DiffStatus {
+  for (const child of children.values()) {
+    if (child.status !== 'unchanged') return 'modified';
+  }
+  return 'unchanged';
+}
+
+function diffObjects(prev: Record<string, unknown>, next: Record<string, unknown>): DiffNode {
+  const children = new Map<string, DiffNode>();
+  for (const key of Object.keys(next)) {
+    children.set(key, diffValue(prev[key], next[key]));
+  }
+  for (const key of Object.keys(prev)) {
+    if (!(key in next)) {
+      children.set(key, { status: 'removed', value: undefined, prev: prev[key] });
+    }
+  }
+  return { status: containerStatus(children), value: next, prev, children };
+}
+
+function diffArrays(prev: readonly unknown[], next: readonly unknown[]): DiffNode {
+  const children = new Map<string, DiffNode>();
+  const keyed =
+    prev.every((el) => elementId(el) !== undefined) &&
+    next.every((el) => elementId(el) !== undefined);
+
+  if (keyed) {
+    const prevById = new Map<string, unknown>();
+    for (const el of prev) prevById.set(elementId(el) as string, el);
+    const nextIds = new Set<string>();
+    for (const el of next) {
+      const id = elementId(el) as string;
+      nextIds.add(id);
+      children.set(id, diffValue(prevById.get(id), el));
+    }
+    for (const el of prev) {
+      const id = elementId(el) as string;
+      if (!nextIds.has(id)) children.set(id, { status: 'removed', value: undefined, prev: el });
+    }
+  } else {
+    for (let i = 0; i < next.length; i += 1) {
+      children.set(`#${i}`, diffValue(prev[i], next[i]));
+    }
+    for (let i = next.length; i < prev.length; i += 1) {
+      children.set(`#${i}`, { status: 'removed', value: undefined, prev: prev[i] });
+    }
+  }
+  return { status: containerStatus(children), value: next, prev, children };
+}
+
+export function diffValue(prev: unknown, next: unknown): DiffNode {
+  if (prev === next) return { status: 'unchanged', value: next, prev };
+  if (prev === undefined) return { status: 'added', value: next, prev: undefined };
+  if (next === undefined) return { status: 'removed', value: undefined, prev };
+  if (isPlainObject(prev) && isPlainObject(next)) return diffObjects(prev, next);
+  if (Array.isArray(prev) && Array.isArray(next)) return diffArrays(prev, next);
+  return { status: 'modified', value: next, prev };
+}
diff --git a/apps/kimi-inspect/src/audit/serialize.ts b/apps/kimi-inspect/src/audit/serialize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b2768b52e65ebd45d86b83ff2aa99e4edf780d5
--- /dev/null
+++ b/apps/kimi-inspect/src/audit/serialize.ts
@@ -0,0 +1,43 @@
+/**
+ * Serialize a `ChatState` into a plain, JSON-shaped object for the audit
+ * panel's state tree and structural diff. Maps become key-sorted plain
+ * objects (stable display order); everything else is passed through by
+ * reference (state is immutable, so sharing is safe and keeps the
+ * reference-equality fast path in `diffValue` useful).
+ */
+
+import type {
+  InteractionMessage,
+  SessionStateMessage,
+  TaskMessage,
+  TodoMessage,
+} from '@moonshot-ai/kap-server/protocol';
+
+import type { ChatState, TimelineMessage } from '../transcript/store';
+
+/** Plain-object view of a `ChatState` (Maps unwrapped). */
+export interface SerializedChatState {
+  readonly timeline: readonly TimelineMessage[];
+  readonly interactions: Record<string, InteractionMessage>;
+  readonly tasks: Record<string, TaskMessage>;
+  readonly todos: Record<string, TodoMessage>;
+  readonly sessionState: SessionStateMessage | undefined;
+  readonly hasMoreOlder: boolean;
+}
+
+function mapToSortedObject<V>(map: ReadonlyMap<string, V>): Record<string, V> {
+  const out: Record<string, V> = {};
+  for (const key of [...map.keys()].toSorted()) out[key] = map.get(key) as V;
+  return out;
+}
+
+export function serializeState(state: ChatState): SerializedChatState {
+  return {
+    timeline: state.entries.map((entry) => entry.message),
+    interactions: mapToSortedObject(state.interactions),
+    tasks: mapToSortedObject(state.tasks),
+    todos: mapToSortedObject(state.todos),
+    sessionState: state.sessionState,
+    hasMoreOlder: state.hasMoreOlder,
+  };
+}
diff --git a/apps/kimi-inspect/src/audit/trail.ts b/apps/kimi-inspect/src/audit/trail.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d69159bb7bdd7829be1f5603cff26be77b3ce24
--- /dev/null
+++ b/apps/kimi-inspect/src/audit/trail.ts
@@ -0,0 +1,198 @@
+/**
+ * Audit trail for the chat view's message-protocol channel.
+ *
+ * A pure observer: the chat pipeline (REST history loads, WS messages, user
+ * actions) calls the `record*` methods AFTER applying each step to the real
+ * `ChatStore`, passing the resulting immutable `ChatState` reference.
+ * Replaying the trail is therefore free — every entry already holds the
+ * exact state the store had at that point, ready for the timeline slider
+ * and the structural diff.
+ */
+
+import type { ServerMessage } from '@moonshot-ai/kap-server/protocol';
+
+import type { ChatState } from '../transcript/store';
+
+export const AUDIT_TRAIL_MAX_ENTRIES = 5000;
+
+interface AuditEntryBase {
+  /** Position in the trail (stable even when old entries are dropped). */
+  readonly index: number;
+  /** Local record time (ISO). */
+  readonly at: string;
+  /** Store state right after this entry was applied (immutable reference). */
+  readonly state: ChatState;
+  /** One-line summary for the timeline list. */
+  readonly summary: string;
+}
+
+export interface RestAuditEntry extends AuditEntryBase {
+  readonly kind: 'rest';
+  readonly request: {
+    readonly beforeTurn?: string | undefined;
+    readonly afterStep?: string | undefined;
+    readonly pageSize: number;
+  };
+  /** replace = newest page (initial/refresh); prepend = older page; tail = after_step catch-up. */
+  readonly mode: 'replace' | 'prepend' | 'tail';
+  readonly messageCount: number;
+  readonly inFlight?: { turn_id: string; step_id: string } | undefined;
+}
+
+export interface WsAuditEntry extends AuditEntryBase {
+  readonly kind: 'ws';
+  /** The raw server message as applied to the store (entity, delta, or state). */
+  readonly message: ServerMessage;
+}
+
+export interface EventAuditEntry extends AuditEntryBase {
+  readonly kind: 'event';
+  readonly event:
+    | 'ack'
+    | 'ack-error'
+    | 'reconnect'
+    | 'catchup-refresh'
+    | 'protocol-error'
+    | 'invalid-frame'
+    | 'prompt'
+    | 'cancel'
+    | 'older-error';
+  readonly detail?: string | undefined;
+}
+
+export type AuditEntry = RestAuditEntry | WsAuditEntry | EventAuditEntry;
+
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+
+/** Entry payload accepted by `push` (index/at are filled in there). */
+type AuditEntryInput = DistributiveOmit<AuditEntry, 'index' | 'at'>;
+
+export class AuditTrail {
+  private entryList: AuditEntry[] = [];
+  private nextIndex = 0;
+  private readonly listeners = new Set<() => void>();
+
+  /** `useSyncExternalStore`-compatible subscribe. */
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  getEntries(): readonly AuditEntry[] {
+    return this.entryList;
+  }
+
+  recordRest(
+    request: RestAuditEntry['request'],
+    mode: RestAuditEntry['mode'],
+    messageCount: number,
+    inFlight: RestAuditEntry['inFlight'],
+    state: ChatState,
+  ): void {
+    const cursor =
+      request.beforeTurn !== undefined
+        ? `?before_turn=${request.beforeTurn}`
+        : request.afterStep !== undefined
+          ? `?after_step=${request.afterStep}`
+          : '';
+    const flight = inFlight !== undefined ? ` (in_flight ${inFlight.step_id})` : '';
+    this.push({
+      kind: 'rest',
+      request,
+      mode,
+      messageCount,
+      inFlight,
+      state,
+      summary: `GET history${cursor} → ${messageCount} messages (${mode})${flight}`,
+    });
+  }
+
+  recordWs(message: ServerMessage, state: ChatState): void {
+    this.push({
+      kind: 'ws',
+      message,
+      state,
+      summary: summarizeMessage(message),
+    });
+  }
+
+  recordEvent(
+    event: EventAuditEntry['event'],
+    detail: string | undefined,
+    state: ChatState,
+  ): void {
+    const label =
+      event === 'ack'
+        ? 'subscribe ack → after_step catch-up'
+        : event === 'ack-error'
+          ? 'subscribe ack error'
+          : event === 'reconnect'
+            ? 'socket dropped → reconnecting'
+            : event === 'catchup-refresh'
+              ? 'catch-up anchor gone → full refresh'
+              : event === 'protocol-error'
+                ? 'protocol error frame'
+                : event === 'invalid-frame'
+                  ? 'invalid frame (server bug)'
+                  : event === 'prompt'
+                    ? 'prompt sent'
+                    : event === 'cancel'
+                      ? 'cancel sent'
+                      : 'older-page load failed';
+    this.push({
+      kind: 'event',
+      event,
+      detail,
+      state,
+      summary: detail !== undefined && detail !== '' ? `${label}: ${detail}` : label,
+    });
+  }
+
+  private push(entry: AuditEntryInput): void {
+    const full = { ...entry, index: this.nextIndex, at: new Date().toISOString() } as AuditEntry;
+    this.nextIndex += 1;
+    const kept =
+      this.entryList.length >= AUDIT_TRAIL_MAX_ENTRIES
+        ? this.entryList.slice(this.entryList.length - AUDIT_TRAIL_MAX_ENTRIES + 1)
+        : this.entryList;
+    this.entryList = [...kept, full];
+    for (const listener of this.listeners) listener();
+  }
+}
+
+function summarizeMessage(message: ServerMessage): string {
+  switch (message.type) {
+    case 'turn':
+      return `turn ${message.turn_id} (${message.status})`;
+    case 'step':
+      return `step ${message.step_id} (${message.status})`;
+    case 'user':
+      return `user ${message.message_id}`;
+    case 'assistant':
+    case 'thinking':
+      return `${message.type} ${message.message_id} (${message.status})`;
+    case 'assistant.delta':
+    case 'thinking.delta':
+      return `${message.type} ${message.message_id} +${message.text.length}ch`;
+    case 'tool_call':
+      return `tool_call ${message.name} ${message.tool_call_id} (${message.status})`;
+    case 'tool_call.delta':
+      return `tool_call.delta ${message.tool_call_id} +${message.input_text.length}ch`;
+    case 'tool.progress':
+      return `tool.progress ${message.tool_call_id} (${message.progress.kind})`;
+    case 'system':
+      return `system(${message.subtype}) ${message.system_id}`;
+    case 'interaction':
+      return `interaction ${message.interaction_id} (${message.kind}/${message.status})`;
+    case 'task':
+      return `task ${message.task_id} (${message.kind}/${message.status})`;
+    case 'todo':
+      return `todo ${message.todo_id} (${message.items.length} items)`;
+    case 'session.state':
+      return `session.state (${message.status})`;
+    default:
+      return message.type;
+  }
+}
diff --git a/apps/kimi-inspect/src/audit/truncate.ts b/apps/kimi-inspect/src/audit/truncate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..69a7c137c7bce5418dce52df8bbf1bf57d102f33
--- /dev/null
+++ b/apps/kimi-inspect/src/audit/truncate.ts
@@ -0,0 +1,14 @@
+/**
+ * Tail-preserving string truncation for the audit panel: long values are
+ * rendered with their total length plus the LAST `keep` characters (the
+ * tail is where streaming text, tool output, and prompts carry the newest
+ * information). Rendering-only — the underlying state is never truncated,
+ * and no field is ever dropped.
+ */
+
+export const TRUNCATE_KEEP = 500;
+
+export function tailTrunc(value: string, keep: number = TRUNCATE_KEEP): string {
+  if (value.length <= keep) return value;
+  return `… [${value.length} chars total, showing last ${keep}]\n${value.slice(-keep)}`;
+}
diff --git a/apps/kimi-inspect/src/channel/channel.test.ts b/apps/kimi-inspect/src/channel/channel.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fdf2de26c57eb3e577be95096edb957a2ba06cec
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/channel.test.ts
@@ -0,0 +1,199 @@
+/**
+ * Channel layer unit tests — `ProxyChannel` URL/envelope semantics,
+ * `makeProxy` routing, the HTTP-only `listen` failure, and the debug-surface
+ * probe (`/api/v1/debug` is the only RPC surface; there is no v2 fallback).
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { Event, IChannel } from './channel';
+import { probeDebugSurface } from './channels';
+import { createInspectClient } from './client';
+import { RPCError } from './errors';
+import {
+  fetchAgentRuntimeBinding,
+  fetchSessionWorkspaceAssociation,
+  fetchWorkspaceSnapshot,
+} from '../snapshots/api';
+import { makeProxy } from './proxy';
+import { ProxyChannel } from './proxyChannel';
+
+const ok = (data: unknown) => ({ code: 0, msg: 'success', data, request_id: 'r1' });
+
+function fakeFetch(envelope: unknown) {
+  const calls: { url: string; init?: RequestInit }[] = [];
+  const fetchImpl = (async (url: string | URL, init?: RequestInit) => {
+    calls.push({ url: String(url), init });
+    return { json: async () => envelope };
+  }) as unknown as typeof fetch;
+  return { calls, fetchImpl };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('ProxyChannel.call', () => {
+  it('POSTs the command to the service base URL; no body and no header without args/token', async () => {
+    const { calls, fetchImpl } = fakeFetch(ok({ id: 's1' }));
+    const channel = new ProxyChannel({
+      baseUrl: 'http://h:1/api/v1/debug/session/s%201/agent/main/agentLoopService',
+      fetch: fetchImpl,
+    });
+    const result = await channel.call('getModel', []);
+    expect(result).toEqual({ id: 's1' });
+    expect(calls).toHaveLength(1);
+    expect(calls[0]!.url).toBe(
+      'http://h:1/api/v1/debug/session/s%201/agent/main/agentLoopService/getModel',
+    );
+    expect(calls[0]!.init?.method).toBe('POST');
+    expect(calls[0]!.init?.body).toBeUndefined();
+  });
+
+  it('sends the complete argument array as the JSON body, plus the bearer token', async () => {
+    const { calls, fetchImpl } = fakeFetch(ok(null));
+    const channel = new ProxyChannel({
+      baseUrl: 'http://h:2/api/v1/debug/configService',
+      token: 'tok',
+      fetch: fetchImpl,
+    });
+    await channel.call('set', ['workspace', { theme: 'dark' }]);
+    expect(calls[0]!.init?.body).toBe(JSON.stringify(['workspace', { theme: 'dark' }]));
+    expect(calls[0]!.init?.headers).toEqual({
+      'content-type': 'application/json',
+      authorization: 'Bearer tok',
+    });
+  });
+
+  it('unwraps the envelope and throws RPCError on a non-zero code', async () => {
+    const { fetchImpl } = fakeFetch({
+      code: 40401,
+      msg: 'session not found',
+      data: null,
+      request_id: 'r2',
+      details: { id: 's9' },
+    });
+    const channel = new ProxyChannel({
+      baseUrl: 'http://h:3/api/v1/debug/sessionIndex',
+      fetch: fetchImpl,
+    });
+    const err: unknown = await channel.call('get', ['s9']).catch((error: unknown) => error);
+    expect(err).toBeInstanceOf(RPCError);
+    expect((err as RPCError).code).toBe(40401);
+    expect((err as RPCError).message).toBe('session not found');
+    expect((err as RPCError).details).toEqual({ id: 's9' });
+  });
+});
+
+describe('makeProxy', () => {
+  interface DemoService {
+    read(id: string, n: number): Promise<string>;
+    onDidChangeMetadata: Event<{ title: string }>;
+  }
+
+  it('routes methods to call and onXxx members to listen', async () => {
+    const seen = { calls: [] as [string, unknown[]][], listens: [] as string[] };
+    const channel: IChannel = {
+      call: async <T>(command: string, args?: unknown[]): Promise<T> => {
+        seen.calls.push([command, args ?? []]);
+        return 'ret' as T;
+      },
+      listen: <T>(event: string): Event<T> => {
+        seen.listens.push(event);
+        return () => ({ dispose: () => {} });
+      },
+    };
+    const svc = makeProxy<DemoService>(channel);
+    await expect(svc.read('a', 1)).resolves.toBe('ret');
+    expect(seen.calls).toEqual([['read', ['a', 1]]]);
+    const d = svc.onDidChangeMetadata(() => {});
+    d.dispose();
+    expect(seen.listens).toEqual(['onDidChangeMetadata']);
+  });
+});
+
+describe('ProxyChannel.listen', () => {
+  it('throws: the debug surface is HTTP-only, there is no event transport', () => {
+    const channel = new ProxyChannel({
+      baseUrl: 'http://h:4/api/v1/debug/configService',
+      fetch: fakeFetch(ok(null)).fetchImpl,
+    });
+    expect(() => channel.listen('onDidChangeConfiguration')).toThrow(/events are not supported/);
+  });
+});
+
+describe('business snapshots', () => {
+  it('uses explicit workspace, session association, and agent binding routes', async () => {
+    const calls: string[] = [];
+    vi.stubGlobal('fetch', async (url: string | URL) => {
+      const value = String(url);
+      calls.push(value);
+      if (value.endsWith('/workspace/w%201/snapshot')) {
+        return { json: async () => ok({ metadata: { id: 'w 1' } }) };
+      }
+      if (value.endsWith('/session/s%201/association')) {
+        return { json: async () => ok({ sessionId: 's 1', workspaceId: 'w 1', cwd: '/work' }) };
+      }
+      return {
+        json: async () => ok({
+          binding: { workspaceId: 'w 1', runtimeId: 'remote' },
+          available: true,
+          runtime: { runtimeId: 'remote', generation: 'g2', status: 'ready', capabilities: ['process'] },
+        }),
+      };
+    });
+    const client = createInspectClient({ url: 'http://h:9', token: 'tok' });
+
+    await expect(fetchWorkspaceSnapshot(client, 'w 1')).resolves.toMatchObject({ metadata: { id: 'w 1' } });
+    await expect(fetchSessionWorkspaceAssociation(client, 's 1')).resolves.toMatchObject({ workspaceId: 'w 1' });
+    await expect(fetchAgentRuntimeBinding(client, 's 1', 'main')).resolves.toMatchObject({
+      binding: { runtimeId: 'remote' },
+      runtime: { generation: 'g2' },
+    });
+    expect(calls).toEqual([
+      'http://h:9/api/v1/debug/workspace/w%201/snapshot',
+      'http://h:9/api/v1/debug/session/s%201/association',
+      'http://h:9/api/v1/debug/session/s%201/agent/main/runtime-binding',
+    ]);
+  });
+});
+
+describe('probeDebugSurface', () => {
+  function stubProbeFetch(impl: (url: string, init?: RequestInit) => unknown) {
+    const calls: { url: string; init?: RequestInit }[] = [];
+    vi.stubGlobal('fetch', async (url: string | URL, init?: RequestInit) => {
+      calls.push({ url: String(url), init });
+      return impl(String(url), init);
+    });
+    return calls;
+  }
+
+  it('resolves when /api/v1/debug/channels answers a zero-code envelope (with bearer header)', async () => {
+    const calls = stubProbeFetch(() => ({ ok: true, json: async () => ({ code: 0 }) }));
+    await expect(
+      probeDebugSurface({ baseUrl: 'http://h:5/', token: 'tok' }),
+    ).resolves.toBeUndefined();
+    expect(calls[0]!.url).toBe('http://h:5/api/v1/debug/channels');
+    expect(calls[0]!.init?.headers).toEqual({ authorization: 'Bearer tok' });
+  });
+
+  it('throws a --debug-endpoints hint when the surface is not mounted (HTTP 404)', async () => {
+    stubProbeFetch(() => ({ ok: false, status: 404 }));
+    await expect(probeDebugSurface({ baseUrl: 'http://h:6' })).rejects.toThrow(/--debug-endpoints/);
+  });
+
+  it('throws an unreachable-server error when fetch itself fails', async () => {
+    vi.stubGlobal('fetch', async () => {
+      throw new Error('ECONNREFUSED');
+    });
+    await expect(probeDebugSurface({ baseUrl: 'http://h:7' })).rejects.toThrow(/cannot reach/);
+  });
+
+  it('throws a token hint when the envelope carries a non-zero code', async () => {
+    stubProbeFetch(() => ({
+      ok: true,
+      json: async () => ({ code: 40101, msg: 'unauthorized' }),
+    }));
+    await expect(probeDebugSurface({ baseUrl: 'http://h:8' })).rejects.toThrow(/bearer token/);
+  });
+});
diff --git a/apps/kimi-inspect/src/channel/channel.ts b/apps/kimi-inspect/src/channel/channel.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d71e28912df2505b4dbdc49db080dde562ef501
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/channel.ts
@@ -0,0 +1,45 @@
+/**
+ * Transport-agnostic channel contract for the debug-RPC client — the
+ * old-klient / VS Code `ProxyChannel` model: the channel is bound to one
+ * Service (the URL carries the scope + the Service's decorator id) and
+ * `command` is the method name, invoked by reflection on the server.
+ *
+ * `listen` is kept for contract completeness (Service `onXxx` emitters map to
+ * it), but the `/api/v1/debug` surface is HTTP-only — the v2 event socket
+ * (`/api/v2/ws`) that used to serve it was removed — so the HTTP channel's
+ * `listen` throws and panels fetch on demand instead.
+ */
+
+import type { ServiceIdentifier } from '@moonshot-ai/agent-core-v2/_base/di/instantiation';
+
+export interface IDisposable {
+  dispose(): void;
+}
+
+export interface Event<T> {
+  (listener: (event: T) => unknown, thisArg?: unknown, disposables?: IDisposable[]): IDisposable;
+}
+
+/** The client-facing channel contract. Calls always carry the complete argument array. */
+export interface IChannel {
+  call<T>(command: string, args?: unknown[]): Promise<T>;
+  listen<T>(event: string, arg?: unknown): Event<T>;
+}
+
+/** A wire Service reference: a DI decorator (stringifies to the wire channel
+ * name) or the raw channel name as a string. */
+export type ServiceRef<T> = ServiceIdentifier<T> | string;
+
+/**
+ * Remote view of a Service contract: every method becomes an async wire call;
+ * `onXxx` event members (`Event<T>` — callables returning `IDisposable`) stay
+ * subscribable events; plain non-function members become zero-arg property
+ * reads (the dispatcher returns non-function members as-is).
+ */
+export type ServiceProxy<T> = {
+  [K in keyof T]: T[K] extends (...args: infer A) => infer R
+    ? R extends IDisposable
+      ? T[K]
+      : (...args: A) => Promise<Awaited<R>>
+    : () => Promise<Awaited<T[K]>>;
+};
diff --git a/apps/kimi-inspect/src/channel/channels.ts b/apps/kimi-inspect/src/channel/channels.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c97405f0815a752a2c4d143bf4c05e236b3d018d
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/channels.ts
@@ -0,0 +1,120 @@
+/**
+ * Protocol loading — the debug surface's `GET /api/v1/debug/channels`
+ * endpoint is the server's self-description of every wire-callable Service
+ * (name, scope, domain, methods + properties), whitelist-free. Paired with
+ * `serviceByName`, each descriptor materializes 1:1 into a typed proxy of
+ * the channel layer: same channel name, same scope route, methods invoked by
+ * reflection.
+ *
+ * `/api/v1/debug` is the ONLY RPC surface this app talks to (mounted by
+ * kap-server with `--debug-endpoints` on a loopback bind); the v2 surface
+ * (`/api/v2` + `/api/v2/ws`) was removed server-side, so there is no
+ * fallback — `probeDebugSurface` fails the connection with a clear error.
+ */
+
+import { createDecorator } from '@moonshot-ai/agent-core-v2/_base/di/instantiation';
+
+import type { ServiceProxy } from './channel';
+import { DEBUG_RPC_BASE, type InspectClient } from './client';
+import { RPCError } from './errors';
+
+/** Wire scope kinds reported by the channels endpoint (`app` ≡ the core route). */
+export type ChannelScope = 'app' | 'session' | 'agent';
+
+/** Mirror of `ChannelDescriptor` in kap-server (`GET /api/v1/debug/channels`). */
+export interface ChannelDescriptor {
+  readonly name: string;
+  readonly scope: ChannelScope;
+  readonly domain: string;
+  readonly methods: readonly {
+    readonly name: string;
+    readonly kind: 'method' | 'property';
+    readonly arity: number;
+    readonly params: string;
+  }[];
+}
+
+/** Fetch the dynamic channel list (unwrapped from the project envelope). */
+export async function fetchChannelDescriptors(
+  client: InspectClient,
+): Promise<readonly ChannelDescriptor[]> {
+  const headers: Record<string, string> = {};
+  if (client.token !== undefined && client.token !== '') {
+    headers['authorization'] = `Bearer ${client.token}`;
+  }
+  const res = await fetch(`${client.baseUrl}${DEBUG_RPC_BASE}/channels`, { headers });
+  const envelope = (await res.json()) as {
+    code: number;
+    msg: string;
+    data: readonly ChannelDescriptor[];
+  };
+  if (envelope.code !== 0) throw new RPCError(envelope.code, envelope.msg);
+  return envelope.data;
+}
+
+/**
+ * Verify the server mounts the debug RPC surface before the client is built.
+ * Resolves silently when `GET /api/v1/debug/channels` answers with a
+ * zero-code envelope; otherwise throws an `Error` whose message tells the
+ * user exactly what is wrong (unreachable server, surface not mounted →
+ * start kap-server with `--debug-endpoints`, or a rejected probe → check the
+ * token).
+ */
+export async function probeDebugSurface(options: {
+  readonly baseUrl: string;
+  readonly token?: string;
+}): Promise<void> {
+  const headers: Record<string, string> = {};
+  if (options.token !== undefined && options.token !== '') {
+    headers['authorization'] = `Bearer ${options.token}`;
+  }
+  const url = `${options.baseUrl.replace(/\/$/, '')}${DEBUG_RPC_BASE}/channels`;
+  let res: Response;
+  try {
+    res = await fetch(url, { headers });
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error);
+    throw new Error(`cannot reach ${options.baseUrl} — is kap-server running? (${reason})`);
+  }
+  if (!res.ok) {
+    throw new Error(
+      `GET ${DEBUG_RPC_BASE}/channels answered HTTP ${res.status} — this server does not ` +
+        'mount the debug RPC surface. Start kap-server with --debug-endpoints on a loopback bind.',
+    );
+  }
+  const envelope = (await res.json()) as { code?: number; msg?: string };
+  if (envelope.code !== 0) {
+    throw new Error(
+      `the debug surface rejected the probe (code ${envelope.code ?? '?'}: ${
+        envelope.msg ?? 'no message'
+      }) — check the bearer token.`,
+    );
+  }
+}
+
+export interface ServiceTarget {
+  readonly scope: ChannelScope;
+  readonly sessionId?: string;
+  readonly agentId?: string;
+}
+
+/**
+ * Resolve a Service proxy by wire channel name. The DI decorator registry keys
+ * identifiers by name, so re-creating the decorator resolves to the same token
+ * the server channel registry created — the name is the wire channel, which is
+ * all the proxy uses. Returns `undefined` when the target scope needs a
+ * workspace/session/agent id that isn't available.
+ */
+export function serviceByName<T extends object>(
+  client: InspectClient,
+  name: string,
+  target: ServiceTarget,
+): ServiceProxy<T> | undefined {
+  const id = createDecorator<T>(name);
+  if (target.scope === 'app') return client.core(id);
+  if (target.sessionId === undefined) return undefined;
+  const base = client.session(target.sessionId);
+  if (target.scope === 'session') return base.service(id);
+  if (target.agentId === undefined) return undefined;
+  return base.agent(target.agentId).service(id);
+}
diff --git a/apps/kimi-inspect/src/channel/client.ts b/apps/kimi-inspect/src/channel/client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f81265a7d395ac8906cbff84df8fe0483968301
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/client.ts
@@ -0,0 +1,81 @@
+/**
+ * Inspect client — the app's `/api/v1/debug` entry point, in the old-klient
+ * VS Code `ProxyChannel` model: a multi-level scope entry (`core` /
+ * `workspace` / `session` / `agent`) whose every Service handle is a
+ * `makeProxy`-materialized typed proxy over a service-bound HTTP channel.
+ *
+ *   const client = createInspectClient({ url: 'http://127.0.0.1:58627' });
+ *   await client.core(ISessionIndex).listRecent({});
+ *   await client.workspace('wd_1').service(ISessionLifecycleService).resume('s1');
+ *   await client.session('s1').service(ISessionMetadata).read();
+ *   await client.session('s1').agent('main').service(IAgentLoopService).cancel(undefined);
+ *
+ * The `agent-core-v2` service token is the whole key: its type parameter `T`
+ * types the returned proxy, and its decorator id (`String(id)`) is the channel
+ * name in the URL. Calls ride HTTP (`ProxyChannel`). There is no event
+ * transport: the v2 socket (`/api/v2/ws`) that used to carry Service `onXxx`
+ * emitters and scope event streams was removed server-side, so the UI reads
+ * Service state on demand. (The transcript's own `/api/v1/ws` delta channel
+ * lives in `src/transcript/` and is unrelated to this client.)
+ */
+
+import type { ServiceProxy, ServiceRef } from './channel';
+import { makeProxy } from './proxy';
+import { ProxyChannel } from './proxyChannel';
+
+/** The dev server's whitelist-free debug surface (`--debug-endpoints` + loopback). */
+export const DEBUG_RPC_BASE = '/api/v1/debug' as const;
+
+export interface InspectAgentHandle {
+  service<T extends object>(id: ServiceRef<T>): ServiceProxy<T>;
+}
+
+export interface InspectSessionHandle extends InspectAgentHandle {
+  agent(agentId: string): InspectAgentHandle;
+}
+
+export interface InspectClient {
+  /** Absolute server base URL, e.g. `http://127.0.0.1:58627`. */
+  readonly baseUrl: string;
+  /** Bearer token in use, when any. */
+  readonly token?: string;
+  core<T extends object>(id: ServiceRef<T>): ServiceProxy<T>;
+  session(sessionId: string): InspectSessionHandle;
+}
+
+export interface InspectClientOptions {
+  /** Base URL of the server, e.g. `http://127.0.0.1:58627`. */
+  readonly url: string;
+  /** Optional bearer token. */
+  readonly token?: string;
+}
+
+export function createInspectClient(options: InspectClientOptions): InspectClient {
+  const url = options.url.replace(/\/$/, '');
+
+  /** Materialize a typed proxy for one Service on one scope binding. */
+  function proxy<T extends object>(scopePath: string, id: ServiceRef<T>): ServiceProxy<T> {
+    const service = String(id);
+    return makeProxy<T>(
+      new ProxyChannel({
+        baseUrl: `${url}${DEBUG_RPC_BASE}${scopePath}/${service}`,
+        token: options.token,
+      }),
+    );
+  }
+
+  return {
+    baseUrl: url,
+    token: options.token,
+    core: (id) => proxy('', id),
+    session: (sessionId) => {
+      const scopePath = `/session/${encodeURIComponent(sessionId)}`;
+      return {
+        service: (id) => proxy(scopePath, id),
+        agent: (agentId) => ({
+          service: (subId) => proxy(`${scopePath}/agent/${encodeURIComponent(agentId)}`, subId),
+        }),
+      };
+    },
+  };
+}
diff --git a/apps/kimi-inspect/src/channel/errors.ts b/apps/kimi-inspect/src/channel/errors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1748e9ac59fc9c9abc93c1e962eadd371d1c587e
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/errors.ts
@@ -0,0 +1,16 @@
+/**
+ * Client-side RPC error surfaced when the debug-RPC envelope carries a
+ * non-zero `code`. Mirrors the server envelope (`{ code, msg, data,
+ * request_id }`) — the numeric `code` is the stable branch key across the
+ * wire, not `instanceof`.
+ */
+export class RPCError extends Error {
+  constructor(
+    readonly code: number,
+    message: string,
+    readonly details?: unknown,
+  ) {
+    super(message);
+    this.name = 'RPCError';
+  }
+}
diff --git a/apps/kimi-inspect/src/channel/index.ts b/apps/kimi-inspect/src/channel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4dadf528b823e2e054d04c25d4ecb6f03ff61db5
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/index.ts
@@ -0,0 +1,7 @@
+export * from './channel';
+export * from './channels';
+export * from './client';
+export * from './errors';
+export * from './proxy';
+export * from './proxyChannel';
+export * from './wsLike';
diff --git a/apps/kimi-inspect/src/channel/proxy.ts b/apps/kimi-inspect/src/channel/proxy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a0eb75187dcdd1fa70987f0661fd6a7653d6966
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/proxy.ts
@@ -0,0 +1,21 @@
+/**
+ * Typed proxy turning an `IChannel` (bound to one Service) into a value
+ * satisfying that Service's interface `T` — VS Code's `ProxyChannel.toService`.
+ *
+ * Members named `onUpperCase` become channel events; every other property access
+ * becomes a function forwarding its complete argument array to `channel.call`
+ * (the dispatcher also answers property reads this way). The shared interface
+ * `T` is the whole contract, with no per-method allowlist or renaming.
+ */
+
+import type { IChannel, ServiceProxy } from './channel';
+
+export function makeProxy<T extends object>(channel: IChannel): ServiceProxy<T> {
+  return new Proxy({} as ServiceProxy<T>, {
+    get(_target, prop) {
+      if (typeof prop !== 'string') return undefined;
+      if (/^on[A-Z]/.test(prop)) return channel.listen(prop);
+      return (...args: unknown[]) => channel.call(prop, args);
+    },
+  });
+}
diff --git a/apps/kimi-inspect/src/channel/proxyChannel.ts b/apps/kimi-inspect/src/channel/proxyChannel.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8ab9795d51cee4bc3512408825c5c5e2e8a4e380
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/proxyChannel.ts
@@ -0,0 +1,74 @@
+/**
+ * `ProxyChannel` — an `IChannel` bound to one Service, routing `call`s to
+ * kap-server's `/api/v1/debug` HTTP surface. Every call `POST`s the method
+ * name to the Service base URL with the complete argument array as the JSON
+ * body, then unwraps the project envelope: a non-zero `code` throws
+ * `RPCError`, otherwise `data` is returned. Non-function members answer as
+ * property reads through the same route (the dispatcher returns them as-is).
+ *
+ * `listen` cannot be served by HTTP: the v2 event socket (`/api/v2/ws`) that
+ * used to back Service emitter events was removed, so `listen` throws and
+ * the UI fetches Service state on demand instead.
+ */
+
+import type { Event, IChannel } from './channel';
+import { RPCError } from './errors';
+
+interface Envelope<T> {
+  readonly code: number;
+  readonly msg: string;
+  readonly data: T;
+  readonly request_id: string;
+  readonly details?: unknown;
+}
+
+export interface ProxyChannelOptions {
+  /** Service base URL, e.g. `http://127.0.0.1:58627/api/v1/debug[/session/:sid[/agent/:aid]]/:service`. */
+  readonly baseUrl: string;
+  /** Optional bearer token. */
+  readonly token?: string;
+  /** `fetch` implementation; defaults to the global `fetch`. */
+  readonly fetch?: typeof fetch;
+}
+
+export class ProxyChannel implements IChannel {
+  private readonly baseUrl: string;
+  private readonly token?: string;
+  private readonly fetchImpl: typeof fetch;
+
+  constructor(opts: ProxyChannelOptions) {
+    this.baseUrl = opts.baseUrl.replace(/\/$/, '');
+    this.token = opts.token;
+    // Bind the global fetch: browsers throw "Illegal invocation" when the
+    // native function is invoked with a non-Window receiver.
+    this.fetchImpl = opts.fetch ?? fetch.bind(globalThis);
+  }
+
+  async call<T>(command: string, args: unknown[] = []): Promise<T> {
+    const headers: Record<string, string> = {};
+    let body: string | undefined;
+    if (args.length > 0) {
+      headers['content-type'] = 'application/json';
+      body = JSON.stringify(args);
+    }
+    if (this.token !== undefined) {
+      headers['authorization'] = `Bearer ${this.token}`;
+    }
+    const res = await this.fetchImpl(`${this.baseUrl}/${command}`, {
+      method: 'POST',
+      headers,
+      body,
+    });
+    const envelope = (await res.json()) as Envelope<T>;
+    if (envelope.code !== 0) {
+      throw new RPCError(envelope.code, envelope.msg, envelope.details);
+    }
+    return envelope.data;
+  }
+
+  listen<T>(_event: string): Event<T> {
+    throw new Error(
+      'events are not supported on this channel (HTTP-only; the /api/v2/ws event socket was removed)',
+    );
+  }
+}
diff --git a/apps/kimi-inspect/src/channel/wsLike.ts b/apps/kimi-inspect/src/channel/wsLike.ts
new file mode 100644
index 0000000000000000000000000000000000000000..440a9e8c77f11d54f50954eb478a57aa1e176e81
--- /dev/null
+++ b/apps/kimi-inspect/src/channel/wsLike.ts
@@ -0,0 +1,20 @@
+/**
+ * Minimal DOM-compatible WebSocket surface shared by the app's socket
+ * clients (today only the transcript `/api/v1/ws` client). Coding against
+ * this structural type keeps the clients testable with an injected fake;
+ * the default is the global `WebSocket` (browsers, Node ≥ 21).
+ */
+export interface WsLike {
+  readonly readyState: number;
+  send(data: string): void;
+  close(code?: number, reason?: string): void;
+  addEventListener(
+    type: 'open' | 'message' | 'close' | 'error',
+    listener: (event: never) => void,
+  ): void;
+}
+
+export interface WsLikeCtor {
+  new (url: string, protocols?: string | string[]): WsLike;
+  readonly OPEN: number;
+}
diff --git a/apps/kimi-inspect/src/components/AppServicesView.tsx b/apps/kimi-inspect/src/components/AppServicesView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..98ae9aa3403df3933f7c1ac7d4720e6ddfbdab13
--- /dev/null
+++ b/apps/kimi-inspect/src/components/AppServicesView.tsx
@@ -0,0 +1,27 @@
+/**
+ * App Services view — the app-scope (server-level) Service reflection as a
+ * standalone rail view. Postman-style three-pane layout
+ * (`ScopePanelsScrollspy`): the Service list on the left, every Service's
+ * methods expanded in one continuously scrolling column in the middle
+ * (scroll position and left-side highlight kept in sync), and a
+ * request/response call history on the right. The proxies resolve on the
+ * `core` route, so this view works before any session is selected.
+ */
+
+import { useCallback } from 'react';
+
+import { serviceByName } from '../channel';
+import { useConnection } from '../connection';
+import type { AnyService } from '../panels';
+import { ScopePanelsScrollspy } from './ServicePanels';
+
+export function AppServicesView() {
+  const { klient } = useConnection();
+  const proxyFor = useCallback(
+    (name: string): AnyService | null =>
+      serviceByName<AnyService>(klient, name, { scope: 'app' }) ?? null,
+    [klient],
+  );
+
+  return <ScopePanelsScrollspy scope="app" title="App Services" proxyFor={proxyFor} />;
+}
diff --git a/apps/kimi-inspect/src/components/BashParserView.tsx b/apps/kimi-inspect/src/components/BashParserView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1532705722b42b83ed286a1a779f57075c6edf60
--- /dev/null
+++ b/apps/kimi-inspect/src/components/BashParserView.tsx
@@ -0,0 +1,279 @@
+/**
+ * Bash Parser view — a playground for the App-scope `IBashParserService`
+ * (the `bashParser` domain, a thin adapter over `@moonshot-ai/tree-sitter-bash`).
+ *
+ *   left:  the bash source textarea plus the parse budget (timeoutMs /
+ *          maxNodes, empty = package default); the `examples…` dropdown
+ *          fills the textarea with curated snippets from the parser's own
+ *          differential fixtures;
+ *   right: the parse result — status badges (hasError / aborted / node
+ *          count) and the syntax tree, one row per node with its type,
+ *          UTF-16 range and (for leaves) the source text. Anonymous tokens
+ *          are dimmed; rows expand/collapse.
+ *
+ * Parsing is debounced off the textarea and rides the same `/api/v1/debug`
+ * channel as every other panel (`klient.core(IBashParserService).parse`) —
+ * the budgeted parse never throws, `{ ok: false }` means budget exhaustion.
+ */
+
+import { useEffect, useState } from 'react';
+
+import {
+  IBashParserService,
+  type BashParseResult,
+  type BashSyntaxNode,
+} from '@moonshot-ai/agent-core-v2/app/bashParser/bashParser';
+
+import { useConnection } from '../connection';
+import { Badge, errorMessage } from '../ui';
+
+const DEFAULT_SOURCE = `if [ -f config.sh ]; then
+  source config.sh && echo "loaded" | tee -a setup.log
+else
+  echo "missing" >&2; exit 1
+fi
+`;
+
+const PARSE_DEBOUNCE_MS = 300;
+
+/**
+ * Quick-fill examples, adapted from the parser's own differential fixtures
+ * (`packages/tree-sitter-bash/test/fixtures/differential/*.txt`) — each one
+ * exercises a distinct area of the grammar. The last three probe the
+ * non-happy paths: deep nesting (a left-associative arithmetic chain, the
+ * case that once overflowed the DTO conversion) and the error-recovery
+ * paths that set `hasError`.
+ */
+const EXAMPLES: readonly { readonly name: string; readonly source: string }[] = [
+  {
+    name: 'deep arithmetic (1000 operands)',
+    // A thousand left-nested binary_expression levels. Deeper chains parse
+    // fine in-process, but past ~2500 levels the JSON RPC transport itself
+    // cannot serialize the tree (V8 call-stack limit in JSON.stringify).
+    source: `echo $((${'1+'.repeat(1000)}1))`,
+  },
+  {
+    name: 'pipeline & redirects',
+    source: `git log --oneline | head -20 | tee /tmp/log.txt
+find . -name '*.ts' -print0 2>/dev/null | xargs -0 grep -l TODO
+cmd <<< "$input" >out.txt 2>&1
+`,
+  },
+  {
+    name: 'case statement',
+    source: `case $x in
+  a) echo A ;;
+  b|c) echo BC ;&
+  foo*|bar) echo match ;;
+  [a-z]) echo lower ;;
+  *) echo other ;;
+esac
+`,
+  },
+  {
+    name: 'heredoc',
+    source: `foo() { cat <<EOF
+body $x
+EOF
+}
+
+cat <<-'RAW'
+	indented $notexpanded
+	RAW
+`,
+  },
+  {
+    name: 'expansions & arithmetic',
+    source: `echo "\${var:-default} \${#arr[@]} \${path##*/}"
+echo $((x << 2 | 1)) $[y + 1]
+result=$(command -v jq) && echo "$result"
+`,
+  },
+  {
+    name: 'process substitution',
+    source: `diff <(sort a.txt) <(sort b.txt)
+while read -r line; do echo "$line"; done < <(git status --short)
+`,
+  },
+  {
+    name: 'loops & conditions',
+    source: `for f in src/*.ts; do
+  [ -f "$f" ] || continue
+  grep -q FIXME "$f" && echo "$f has FIXME"
+done
+
+while IFS= read -r line; do printf '%s\\n' "$line"; done < list.txt
+until [ "$n" -le 0 ]; do n=$((n - 1)); done
+`,
+  },
+  {
+    name: 'error: unclosed substitution',
+    source: 'echo $(date | wc -l\n',
+  },
+  {
+    name: 'error: unterminated if',
+    source: `if cat <<EOF; then x; fi
+body
+EOF
+`,
+  },
+];
+
+function countNodes(node: BashSyntaxNode): number {
+  return 1 + node.children.reduce((sum, child) => sum + countNodes(child), 0);
+}
+
+export function BashParserView() {
+  const { klient } = useConnection();
+  const [source, setSource] = useState(DEFAULT_SOURCE);
+  const [timeoutMs, setTimeoutMs] = useState('');
+  const [maxNodes, setMaxNodes] = useState('');
+  const [result, setResult] = useState<BashParseResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      klient
+        .core(IBashParserService)
+        .parse(source, {
+          timeoutMs: timeoutMs === '' ? undefined : Number(timeoutMs),
+          maxNodes: maxNodes === '' ? undefined : Number(maxNodes),
+        })
+        .then(setResult, (e: unknown) => {
+          setResult(null);
+          setError(errorMessage(e));
+        });
+    }, PARSE_DEBOUNCE_MS);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [klient, source, timeoutMs, maxNodes]);
+
+  const nodeCount = result !== null && result.ok ? countNodes(result.root) : null;
+
+  return (
+    <div className="flex min-h-0 flex-1">
+      <div className="flex w-[44%] shrink-0 flex-col border-r border-neutral-800">
+        <div className="flex items-center gap-3 border-b border-neutral-800 px-3 py-2">
+          <span className="text-[11px] font-semibold text-neutral-300">bash source</span>
+          <select
+            className="rounded border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[11px] text-neutral-300 outline-none focus:border-sky-600"
+            value=""
+            onChange={(e) => {
+              const example = EXAMPLES.find((x) => x.name === e.target.value);
+              if (example !== undefined) setSource(example.source);
+            }}
+          >
+            <option value="" disabled>
+              examples…
+            </option>
+            {EXAMPLES.map((x) => (
+              <option key={x.name} value={x.name}>
+                {x.name}
+              </option>
+            ))}
+          </select>
+          <div className="flex-1" />
+          <label className="flex items-center gap-1 text-[10px] text-neutral-500">
+            timeoutMs
+            <input
+              className="w-16 rounded border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 font-mono text-[11px] text-neutral-200 outline-none focus:border-sky-600"
+              placeholder="50"
+              value={timeoutMs}
+              onChange={(e) => setTimeoutMs(e.target.value)}
+            />
+          </label>
+          <label className="flex items-center gap-1 text-[10px] text-neutral-500">
+            maxNodes
+            <input
+              className="w-20 rounded border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 font-mono text-[11px] text-neutral-200 outline-none focus:border-sky-600"
+              placeholder="50000"
+              value={maxNodes}
+              onChange={(e) => setMaxNodes(e.target.value)}
+            />
+          </label>
+        </div>
+        <textarea
+          className="min-h-0 flex-1 resize-none bg-neutral-950 p-3 font-mono text-[12px] leading-relaxed text-neutral-200 outline-none"
+          spellCheck={false}
+          value={source}
+          onChange={(e) => setSource(e.target.value)}
+        />
+      </div>
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <div className="flex items-center gap-2 border-b border-neutral-800 px-3 py-2">
+          <span className="text-[11px] font-semibold text-neutral-300">syntax tree</span>
+          {error !== null ? <Badge tone="red">rpc error</Badge> : null}
+          {result !== null && !result.ok ? <Badge tone="red">aborted</Badge> : null}
+          {result !== null && result.ok && result.hasError ? (
+            <Badge tone="amber">hasError</Badge>
+          ) : null}
+          {nodeCount !== null ? <Badge tone="neutral">{nodeCount} nodes</Badge> : null}
+        </div>
+        <div className="min-h-0 flex-1 overflow-auto p-2">
+          {error !== null ? (
+            <div className="rounded bg-red-950/50 px-2 py-1 text-[11px] text-red-400">{error}</div>
+          ) : result === null ? (
+            <div className="text-[11px] text-neutral-600 italic">parsing…</div>
+          ) : !result.ok ? (
+            <div className="text-[11px] text-neutral-500">
+              Parse budget exhausted (<span className="font-mono">reason: {result.reason}</span>) —
+              the tree cannot be analyzed; raise the budget or shrink the input.
+            </div>
+          ) : (
+            <SyntaxTreeNode node={result.root} depth={0} defaultDepth={2} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SyntaxTreeNode({
+  node,
+  depth,
+  defaultDepth,
+}: {
+  readonly node: BashSyntaxNode;
+  readonly depth: number;
+  readonly defaultDepth: number;
+}) {
+  const [open, setOpen] = useState(depth < defaultDepth);
+  const expandable = node.children.length > 0;
+  const range = `[${String(node.startIndex)}, ${String(node.endIndex)})`;
+  const text = node.text.length > 60 ? `${node.text.slice(0, 60)}…` : node.text;
+
+  return (
+    <div>
+      <div
+        className="flex cursor-pointer items-baseline gap-2 truncate rounded px-1 font-mono text-[11px] leading-[1.7] hover:bg-neutral-800/70"
+        style={{ paddingLeft: `${depth * 14 + 4}px` }}
+        onClick={() => {
+          if (expandable) setOpen((v) => !v);
+        }}
+        title={node.text}
+      >
+        <span className="select-none text-neutral-600">
+          {expandable ? (open ? '▾' : '▸') : '·'}
+        </span>
+        <span className={node.isNamed ? 'text-sky-300' : 'text-neutral-500'}>{node.type}</span>
+        <span className="text-neutral-600">{range}</span>
+        {!expandable ? (
+          <span className="truncate text-emerald-300/70">{JSON.stringify(text)}</span>
+        ) : null}
+      </div>
+      {open
+        ? node.children.map((child, index) => (
+            <SyntaxTreeNode
+              // Children are source-ordered and sibling ranges never overlap,
+              // so range + index is a stable key.
+              key={`${String(child.startIndex)}:${String(child.endIndex)}:${String(index)}`}
+              node={child}
+              depth={depth + 1}
+              defaultDepth={defaultDepth}
+            />
+          ))
+        : null}
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/ChatSearchBar.tsx b/apps/kimi-inspect/src/components/ChatSearchBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2d762f809c32ae3ab515145591b79ca1003d3f28
--- /dev/null
+++ b/apps/kimi-inspect/src/components/ChatSearchBar.tsx
@@ -0,0 +1,147 @@
+/**
+ * In-chat search bar — searches the messages of the CURRENT session only
+ * (`container: { session_id }` on `POST /api/v1/search`; the whole session,
+ * not just the active agent) and renders the first page as a dropdown under
+ * the input. Clicking a hit hands it to the app shell (`onOpenHit`), which
+ * switches the agent when the hit belongs to another one and jumps the
+ * transcript to the hit's turn / step. Esc or an outside click closes the
+ * panel.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { useConnection } from '../connection';
+import { fetchSearchPage, type SearchHit } from '../search/api';
+import { Badge, ErrorLine, relTime } from '../ui';
+
+const PAGE_SIZE = 20;
+
+export function ChatSearchBar({
+  sessionId,
+  onOpenHit,
+}: {
+  sessionId: string;
+  onOpenHit?: ((hit: SearchHit) => void) | undefined;
+}) {
+  const { baseUrl, config } = useConnection();
+  const [input, setInput] = useState('');
+  const [open, setOpen] = useState(false);
+  const [hits, setHits] = useState<readonly SearchHit[] | null>(null);
+  const [searching, setSearching] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // A session switch drops the previous session's query and results.
+  useEffect(() => {
+    setInput('');
+    setHits(null);
+    setError(null);
+    setOpen(false);
+  }, [sessionId]);
+
+  // Clicking outside the bar closes the result panel.
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event: MouseEvent) => {
+      if (rootRef.current !== null && !rootRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDown);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+    };
+  }, [open]);
+
+  const search = async () => {
+    const query = input.trim();
+    if (query === '' || searching) return;
+    setSearching(true);
+    setError(null);
+    setOpen(true);
+    try {
+      const token = config.token.trim();
+      const page = await fetchSearchPage({
+        baseUrl,
+        token: token === '' ? undefined : token,
+        query,
+        // Substring semantics (Ctrl+F-like): terms mode is whole-token matching,
+        // which surprises in an in-session search box.
+        mode: 'literal',
+        container: { sessionId },
+        pageSize: PAGE_SIZE,
+      });
+      setHits(page.items);
+    } catch (error) {
+      setHits(null);
+      setError(error);
+    } finally {
+      setSearching(false);
+    }
+  };
+
+  return (
+    <div ref={rootRef} className="relative border-b border-neutral-800 px-4 py-2">
+      <input
+        className="w-full rounded border border-neutral-700 bg-neutral-950 px-3 py-1.5 text-[13px] text-neutral-100 outline-none focus:border-sky-600"
+        placeholder="Search this session… (Enter to search, Esc to close)"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            void search();
+          } else if (e.key === 'Escape') {
+            setOpen(false);
+          }
+        }}
+        onFocus={() => {
+          if (hits !== null) setOpen(true);
+        }}
+      />
+      {open ? (
+        <div className="absolute inset-x-4 top-full z-10 mt-1 max-h-80 overflow-y-auto rounded-lg border border-neutral-800 bg-neutral-900 p-2 shadow-lg shadow-black/40">
+          {searching ? (
+            <div className="px-1 py-1 text-[12px] text-neutral-600 italic">Searching…</div>
+          ) : error !== null ? (
+            <ErrorLine error={error} />
+          ) : hits === null ? null : hits.length === 0 ? (
+            <div className="px-1 py-1 text-[12px] text-neutral-600 italic">
+              No hits in this session.
+            </div>
+          ) : (
+            <div className="flex flex-col gap-1">
+              {hits.map((hit, i) => (
+                <button
+                  key={`${hit.agentId}/${hit.time}/${i}`}
+                  type="button"
+                  className="w-full rounded border border-transparent px-2 py-1.5 text-left transition-colors hover:border-sky-800 hover:bg-neutral-800/60"
+                  onClick={() => {
+                    setOpen(false);
+                    onOpenHit?.(hit);
+                  }}
+                  title="Open in chat"
+                >
+                  <div className="mb-1 flex flex-wrap items-center gap-2">
+                    <Badge
+                      tone={
+                        hit.role === 'user' ? 'sky' : hit.role === 'assistant' ? 'green' : 'violet'
+                      }
+                    >
+                      {hit.role}
+                    </Badge>
+                    {hit.agentId !== '' ? <Badge tone="neutral">agent: {hit.agentId}</Badge> : null}
+                    <span className="ml-auto text-[10px] text-neutral-600">{relTime(hit.time)}</span>
+                  </div>
+                  <div className="whitespace-pre-wrap text-[12px] text-neutral-300">
+                    {hit.snippet}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/ChatView.tsx b/apps/kimi-inspect/src/components/ChatView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cf02e5704b8e697df32de38e8434df0d086c1bd1
--- /dev/null
+++ b/apps/kimi-inspect/src/components/ChatView.tsx
@@ -0,0 +1,1231 @@
+/**
+ * Main view — the conversation of the active session + agent, rendered from
+ * the message protocol (`/api/v3/ws` + `GET /api/v1/sessions/{id}/history`):
+ *
+ *  - Persisted state comes from the REST history endpoint only: the initial
+ *    load reads the newest page, a full refresh re-reads it and re-covers
+ *    the previously loaded window, and "load earlier" pages further with a
+ *    `before_turn` cursor.
+ *  - The WS channel carries the recovery payload and all live traffic; both
+ *    are applied to the store through the same idempotent replace-by-id
+ *    path (delta family appended by id, entity content authoritative), so
+ *    there is no reset/buffer/cursor machinery.
+ *  - Every subscribe ack (initial and reconnect) triggers an `after_step`
+ *    catch-up from the newest terminal step; an empty catch-up whose
+ *    anchor vanished (undo/clear while away) falls back to a full refresh.
+ *
+ * Rendering groups the flat timeline by turn (system markers stay
+ * standalone) and is typed entirely by the protocol schemas
+ * (`@moonshot-ai/kap-server/protocol`). Cancels go through the
+ * `agentLoopService` channel over the debug RPC
+ * surface (`/api/v1/debug`); interaction answers (approve/reject,
+ * answer/dismiss) go through the public REST endpoints
+ * (`src/interactions/api.ts`); the running indicator derives from
+ * `session.state`.
+ */
+
+import { IAgentLoopService } from '@moonshot-ai/agent-core-v2/agent/loop/loop';
+import type {
+  AssistantMessage,
+  ContentPart,
+  InteractionMessage,
+  InteractionQuestionItem,
+  SessionStateMessage,
+  StepMessage,
+  SystemMessage,
+  TaskMessage,
+  ThinkingMessage,
+  TodoMessage,
+  ToolCallMessage,
+  TurnMessage,
+  UserMessage,
+} from '@moonshot-ai/kap-server/protocol';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+
+import { AuditTrail } from '../audit/trail';
+import { useConnection } from '../connection';
+import {
+  answerQuestion,
+  decideApproval,
+  dismissQuestion,
+  type QuestionAnswerWire,
+} from '../interactions/api';
+import type { SearchHit } from '../search/api';
+import { ChatChannel } from '../transcript/channel';
+import {
+  EMPTY_CHAT_STATE,
+  hasTurnId,
+  type ChatState,
+  type TimelineEntry,
+} from '../transcript/store';
+import { ActionButton, Badge, ErrorLine, JsonView, relTime } from '../ui';
+import { ChatSearchBar } from './ChatSearchBar';
+
+const noopSubscribe = () => () => {};
+
+/** Active session id for deeply nested interaction views (approve/answer buttons). */
+const SessionContext = createContext<string>('');
+
+/**
+ * A navigation request into the chat timeline (e.g. from a search hit). The
+ * channel pages backwards until the turn enters the loaded window, then
+ * scrolls it into view and flashes it briefly.
+ */
+export interface ChatJump {
+  /** Turn to locate (`t<N>`); omitted = switch session/agent only, no scroll. */
+  readonly turnId?: string | undefined;
+  /** Step within the turn (`t<N>.<M>`); falls back to the turn card. */
+  readonly stepId?: string | undefined;
+  /** Changes on every request so re-clicking the same hit re-triggers. */
+  readonly nonce: number;
+}
+
+interface ChatChannelState {
+  /** Null until the effect has created the channel (pre-ready / no session). */
+  readonly channel: ChatChannel | null;
+  readonly state: ChatState;
+  /** Records every step that built the store (audit panel data source). */
+  readonly trail: AuditTrail | null;
+  /** True once the initial REST page load succeeded. */
+  readonly loaded: boolean;
+  /** Set when the initial/refresh load failed. */
+  readonly loadError: unknown;
+}
+
+/**
+ * Owns the channel (store + REST + WS) for one (sessionId, agentId) pair.
+ */
+function useChatChannel(
+  sessionId: string | null,
+  agentId: string,
+  ready: boolean,
+  captureAnchor: () => void,
+): ChatChannelState {
+  const { baseUrl, config } = useConnection();
+  const token = config.token.trim();
+  const [channel, setChannel] = useState<ChatChannel | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [loadError, setLoadError] = useState<unknown>(null);
+
+  useEffect(() => {
+    if (!ready || sessionId === null) return;
+    const authToken = token === '' ? undefined : token;
+    const next = new ChatChannel({
+      baseUrl,
+      token: authToken,
+      sessionId,
+      agentId,
+      onWillReplace: captureAnchor,
+      onLoaded: () => {
+        setLoaded(true);
+        setLoadError(null);
+      },
+      onLoadError: (error) => {
+        setLoadError(error);
+      },
+    });
+    setChannel(next);
+    setLoaded(false);
+    setLoadError(null);
+    next.start();
+    return () => {
+      next.close();
+      setChannel(null);
+    };
+  }, [sessionId, agentId, ready, baseUrl, token, captureAnchor]);
+
+  const state = useSyncExternalStore(
+    channel?.store.subscribe ?? noopSubscribe,
+    () => channel?.store.getState() ?? EMPTY_CHAT_STATE,
+  );
+  return {
+    channel,
+    state,
+    trail: channel?.trail ?? null,
+    loaded,
+    loadError,
+  };
+}
+
+export function ChatView({
+  sessionId,
+  agentId,
+  ready,
+  onTrailChange,
+  jump,
+  onJumpHandled,
+  onOpenSearchHit,
+}: {
+  sessionId: string | null;
+  agentId: string;
+  ready: boolean;
+  /** Hands the audit trail of the current channel up to the app shell (the audit panel lives in the right dock, not inside this view). */
+  onTrailChange?: (trail: AuditTrail | null) => void;
+  /** Pending navigation into the timeline (search result click). */
+  jump?: ChatJump | null | undefined;
+  /** Called once the jump has been processed (or found un-actionable). */
+  onJumpHandled?: (() => void) | undefined;
+  /** Hands an in-chat search hit up to the app shell (agent switch + jump). */
+  onOpenSearchHit?: ((hit: SearchHit) => void) | undefined;
+}) {
+  const { klient } = useConnection();
+  const [sendError, setSendError] = useState<unknown>(null);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [olderError, setOlderError] = useState<unknown>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  /** Distance from the scroll bottom captured before a prepend (restore anchor). */
+  const anchorRef = useRef<number | null>(null);
+  /** Whether the viewport was pinned to the bottom before the last update. */
+  const stickBottomRef = useRef(true);
+  /** The jump target being flashed (cleared on a timer). */
+  const [flash, setFlash] = useState<{ turnId: string; stepId?: string | undefined } | null>(null);
+
+  const captureAnchor = useCallback(() => {
+    const el = scrollRef.current;
+    if (el !== null) anchorRef.current = el.scrollHeight - el.scrollTop;
+  }, []);
+
+  const { channel, state, trail, loaded, loadError } = useChatChannel(
+    sessionId,
+    agentId,
+    ready,
+    captureAnchor,
+  );
+  const entries = state.entries;
+
+  // The audit panel is rendered by the app shell's right dock; report the
+  // trail (null while no channel exists) so it can subscribe to it there.
+  useEffect(() => {
+    onTrailChange?.(trail);
+  }, [onTrailChange, trail]);
+
+  // Jump navigation (search result click): once the channel has loaded, page
+  // backwards until the target turn enters the window, then scroll to the
+  // step (or the turn card) and flash it briefly. A turn that never appears
+  // (cut by an undo) degrades to no scroll.
+  useEffect(() => {
+    if (jump === null || jump === undefined || !loaded || channel === null || sessionId === null) {
+      return;
+    }
+    if (jump.turnId === undefined) {
+      onJumpHandled?.();
+      return;
+    }
+    let cancelled = false;
+    const isCancelled = (): boolean => cancelled;
+    const turnId = jump.turnId;
+    const stepId = jump.stepId;
+    void (async () => {
+      stickBottomRef.current = false;
+      const store = channel.store;
+      try {
+        while (
+          !hasTurnId(store.getState().entries, turnId) &&
+          store.getState().hasMoreOlder &&
+          !isCancelled()
+        ) {
+          const before = store.getState().entries.length;
+          await channel.loadOlder();
+          if (store.getState().entries.length === before) break;
+        }
+      } catch {
+        // A failed older-page load leaves the window as-is; degrade to no scroll.
+      }
+      if (cancelled) return;
+      if (!hasTurnId(store.getState().entries, turnId)) {
+        onJumpHandled?.();
+        return;
+      }
+      setFlash({ turnId, stepId });
+      // The prepend renders asynchronously; wait two frames before scrolling.
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (cancelled) return;
+          const root = scrollRef.current;
+          const stepEl =
+            stepId !== undefined
+              ? root?.querySelector(`[data-step-id="${CSS.escape(stepId)}"]`)
+              : undefined;
+          const target = stepEl ?? root?.querySelector(`[data-turn-id="${CSS.escape(turnId)}"]`);
+          target?.scrollIntoView({ block: 'start' });
+        });
+      });
+      onJumpHandled?.();
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [jump, loaded, channel, sessionId, onJumpHandled]);
+
+  // The flash highlight clears itself after a short moment.
+  useEffect(() => {
+    if (flash === null) return;
+    const timer = setTimeout(() => setFlash(null), 2400);
+    return () => clearTimeout(timer);
+  }, [flash]);
+
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el === null) return;
+    if (anchorRef.current !== null) {
+      el.scrollTop = el.scrollHeight - anchorRef.current;
+      anchorRef.current = null;
+      return;
+    }
+    if (stickBottomRef.current) el.scrollTop = el.scrollHeight;
+  }, [entries]);
+
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (el === null) return;
+    stickBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+  };
+
+  const loadOlder = async () => {
+    if (channel === null || loadingOlder) return;
+    captureAnchor();
+    setLoadingOlder(true);
+    setOlderError(null);
+    try {
+      await channel.loadOlder();
+    } catch (error) {
+      anchorRef.current = null;
+      setOlderError(error);
+      trail?.recordEvent(
+        'older-error',
+        error instanceof Error ? error.message : String(error),
+        channel.store.getState(),
+      );
+    } finally {
+      setLoadingOlder(false);
+    }
+  };
+
+  // Auto-paging: the top sentinel auto-loads the previous REST page when it
+  // approaches the viewport (paused while a previous load failed — the retry
+  // button re-arms it). This replaces any manual "load earlier" action.
+  const loadOlderRef = useRef(loadOlder);
+  loadOlderRef.current = loadOlder;
+  const topSentinelRef = useRef<HTMLDivElement>(null);
+  const hasMoreOlder = state.hasMoreOlder;
+  useEffect(() => {
+    const sentinel = topSentinelRef.current;
+    const root = scrollRef.current;
+    if (sentinel === null || root === null || olderError !== null) return;
+    const observer = new IntersectionObserver(
+      (observed) => {
+        if (observed.some((entry) => entry.isIntersecting)) void loadOlderRef.current();
+      },
+      { root, rootMargin: '400px 0px 0px 0px' },
+    );
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasMoreOlder, loaded, olderError, loadingOlder]);
+
+  const running =
+    (state.sessionState !== undefined && state.sessionState.status !== 'idle') ||
+    isAnyTurnRunning(entries);
+  const pendingCount = [...state.interactions.values()].filter(
+    (interaction) => interaction.status === 'pending',
+  ).length;
+
+  // Interactions render inline at their anchor tool call; entities without
+  // an anchor (or whose anchor is outside the loaded window) collect here
+  // and render floating at the bottom. Unanchored tasks (no tool call
+  // references them, e.g. shell-command tasks) do the same.
+  const anchoredToolCallIds = useMemo(() => collectToolCallIds(entries), [entries]);
+  const unanchoredInteractions = [...state.interactions.values()].filter(
+    (interaction) =>
+      interaction.tool_call_id === undefined || !anchoredToolCallIds.has(interaction.tool_call_id),
+  );
+  const anchoredTaskIds = useMemo(() => collectTaskIds(entries), [entries]);
+  const unanchoredTasks = [...state.tasks.values()].filter(
+    (task) => !anchoredTaskIds.has(task.task_id),
+  );
+  const latestTodo = latestTodoOf(state.todos);
+
+  const cancel = async () => {
+    if (sessionId === null) return;
+    try {
+      await klient.session(sessionId).agent(agentId).service(IAgentLoopService).cancel(undefined);
+      trail?.recordEvent('cancel', undefined, state);
+    } catch (error) {
+      setSendError(error);
+    }
+  };
+
+  if (sessionId === null) {
+    return (
+      <div className="flex flex-1 items-center justify-center text-sm text-neutral-600">
+        Select a session on the left to open its conversation.
+      </div>
+    );
+  }
+  if (!ready) {
+    return (
+      <div className="flex flex-1 items-center justify-center text-sm text-neutral-600">
+        Loading session…
+      </div>
+    );
+  }
+
+  return (
+    <SessionContext.Provider value={sessionId}>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex items-center gap-2 border-b border-neutral-800 px-4 py-2">
+          <span className="font-mono text-[11px] text-neutral-400">{sessionId}</span>
+          <Badge tone="sky">agent: {agentId}</Badge>
+          {running ? <Badge tone="amber">turn running</Badge> : <Badge tone="green">idle</Badge>}
+          {pendingCount > 0 ? <Badge tone="amber">{pendingCount} pending</Badge> : null}
+          {state.sessionState !== undefined ? (
+            <SessionStateBadges sessionState={state.sessionState} />
+          ) : null}
+        </div>
+
+        <ChatSearchBar sessionId={sessionId} onOpenHit={onOpenSearchHit} />
+
+        <div className="flex-1 overflow-y-auto px-4 py-3" ref={scrollRef} onScroll={onScroll}>
+          {state.hasMoreOlder ? (
+            <div ref={topSentinelRef} className="mb-3 flex justify-center">
+              <span className="text-[11px] text-neutral-600">
+                {loadingOlder ? 'Loading earlier turns…' : ''}
+              </span>
+            </div>
+          ) : null}
+          {olderError !== null ? (
+            <div className="mb-2">
+              <ErrorLine error={olderError} />
+              <div className="mt-1 flex justify-center">
+                <ActionButton
+                  onClick={() => {
+                    setOlderError(null);
+                    void loadOlder();
+                  }}
+                >
+                  Retry loading earlier turns
+                </ActionButton>
+              </div>
+            </div>
+          ) : null}
+          {loadError !== null ? (
+            <div className="mb-2">
+              <ErrorLine error={loadError} />
+              <div className="mt-1 text-[11px] text-neutral-600">
+                Failed to load the session history — the server may be too old to expose the
+                history API.
+              </div>
+            </div>
+          ) : null}
+          {entries.length === 0 && loadError === null ? (
+            <div className="text-[12px] text-neutral-600 italic">
+              {loaded ? 'Empty transcript.' : 'Loading transcript…'}
+            </div>
+          ) : null}
+          {latestTodo !== undefined && latestTodo.items.length > 0 ? (
+            <TodoCard todo={latestTodo} />
+          ) : null}
+          <Timeline items={entries} interactions={state.interactions} tasks={state.tasks} flash={flash} />
+          {unanchoredInteractions.map((interaction) => (
+            <InteractionEntityView key={interaction.interaction_id} interaction={interaction} />
+          ))}
+          {unanchoredTasks.map((task) => (
+            <TaskCard key={task.task_id} task={task} />
+          ))}
+        </div>
+
+        <div className="border-t border-neutral-800 p-3">
+          {sendError !== null ? (
+            <div className="mb-2">
+              <ErrorLine error={sendError} />
+            </div>
+          ) : null}
+          <div className="flex justify-end">
+            <ActionButton onClick={() => void cancel()} danger disabled={!running}>
+              Cancel
+            </ActionButton>
+          </div>
+        </div>
+      </div>
+    </SessionContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------- timeline
+
+type RenderItem =
+  | {
+      readonly kind: 'group';
+      readonly turnId: string;
+      readonly turn: TurnMessage | undefined;
+      readonly items: readonly TimelineEntry[];
+    }
+  | { readonly kind: 'system'; readonly key: string; readonly message: SystemMessage };
+
+/** Pseudo-turn grouping queued (unread) user messages, which carry no turn_id yet. */
+const QUEUED_TURN_ID = '$queued';
+
+function groupTimeline(entries: readonly TimelineEntry[]): RenderItem[] {
+  interface GroupDraft {
+    turn?: TurnMessage;
+    items: TimelineEntry[];
+  }
+  const drafts = new Map<string, GroupDraft>();
+  const order: (
+    | { kind: 'group'; turnId: string }
+    | { kind: 'system'; key: string; message: SystemMessage }
+  )[] = [];
+  for (const entry of entries) {
+    const message = entry.message;
+    if (message.type === 'system') {
+      order.push({ kind: 'system', key: entry.key, message });
+      continue;
+    }
+    const turnId = message.turn_id ?? QUEUED_TURN_ID;
+    let draft = drafts.get(turnId);
+    if (draft === undefined) {
+      draft = { items: [] };
+      drafts.set(turnId, draft);
+      order.push({ kind: 'group', turnId });
+    }
+    if (message.type === 'turn') draft.turn = message;
+    draft.items.push(entry);
+  }
+  return order.map((item) =>
+    item.kind === 'system'
+      ? item
+      : {
+          kind: 'group',
+          turnId: item.turnId,
+          turn: drafts.get(item.turnId)?.turn,
+          items: drafts.get(item.turnId)?.items ?? [],
+        },
+  );
+}
+
+function Timeline({
+  items,
+  interactions,
+  tasks,
+  flash,
+}: {
+  items: readonly TimelineEntry[];
+  interactions: ReadonlyMap<string, InteractionMessage>;
+  tasks: ReadonlyMap<string, TaskMessage>;
+  flash?: { turnId: string; stepId?: string | undefined } | null | undefined;
+}) {
+  const renderItems = useMemo(() => groupTimeline(items), [items]);
+  return (
+    <>
+      {renderItems.map((item) =>
+        item.kind === 'system' ? (
+          // Native virtual screen: the browser skips layout/paint for
+          // off-screen items and remembers their last rendered size.
+          <div
+            key={item.key}
+            style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 60px' }}
+          >
+            <SystemMarkerView message={item.message} />
+          </div>
+        ) : (
+          <div
+            key={`turn:${item.turnId}`}
+            style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 200px' }}
+          >
+            <TurnGroupView
+              turnId={item.turnId}
+              turn={item.turn}
+              items={item.items}
+              interactions={interactions}
+              tasks={tasks}
+              flash={flash}
+            />
+          </div>
+        ),
+      )}
+    </>
+  );
+}
+
+function isAnyTurnRunning(entries: readonly TimelineEntry[]): boolean {
+  return entries.some(
+    (entry) => entry.message.type === 'turn' && entry.message.status === 'running',
+  );
+}
+
+function collectToolCallIds(entries: readonly TimelineEntry[]): Set<string> {
+  const ids = new Set<string>();
+  for (const entry of entries) {
+    if (entry.message.type === 'tool_call') ids.add(entry.message.tool_call_id);
+  }
+  return ids;
+}
+
+function collectTaskIds(entries: readonly TimelineEntry[]): Set<string> {
+  const ids = new Set<string>();
+  for (const entry of entries) {
+    if (entry.message.type === 'tool_call' && entry.message.task_id !== undefined) {
+      ids.add(entry.message.task_id);
+    }
+  }
+  return ids;
+}
+
+function latestTodoOf(todos: ReadonlyMap<string, TodoMessage>): TodoMessage | undefined {
+  let latest: TodoMessage | undefined;
+  for (const todo of todos.values()) {
+    if (latest === undefined || todo.timestamp > latest.timestamp) latest = todo;
+  }
+  return latest;
+}
+
+// ---------------------------------------------------------------- turn group
+
+function TurnGroupView({
+  turnId,
+  turn,
+  items,
+  interactions,
+  tasks,
+  flash,
+}: {
+  turnId: string;
+  turn: TurnMessage | undefined;
+  items: readonly TimelineEntry[];
+  interactions: ReadonlyMap<string, InteractionMessage>;
+  tasks: ReadonlyMap<string, TaskMessage>;
+  flash?: { turnId: string; stepId?: string | undefined } | null | undefined;
+}) {
+  const turnFlashed = flash?.turnId === turnId && flash.stepId === undefined;
+  const queued = turnId === QUEUED_TURN_ID;
+  return (
+    <div
+      data-turn-id={turnId}
+      className={`mb-3 rounded-lg border bg-neutral-900/30 ${
+        turnFlashed ? 'border-sky-600' : 'border-neutral-800'
+      }`}
+    >
+      <div className="flex items-center gap-2 border-b border-neutral-800/60 px-3 py-1.5">
+        {queued ? (
+          <Badge tone="amber">queued</Badge>
+        ) : (
+          <span className="font-mono text-[10px] text-neutral-500">{turnId}</span>
+        )}
+        {turn !== undefined ? (
+          <>
+            <Badge tone={turn.origin.kind === 'user' ? 'sky' : 'neutral'}>{turn.origin.kind}</Badge>
+            <Badge tone={turn.status === 'running' ? 'amber' : 'green'}>{turn.status}</Badge>
+            {turn.started_at !== undefined ? (
+              <span className="text-[10px] text-neutral-600">
+                {relTime(Date.parse(turn.started_at))}
+              </span>
+            ) : null}
+            {turn.usage !== undefined ? (
+              <span className="ml-auto text-[10px] text-neutral-600">
+                {turnUsageText(turn.usage)}
+              </span>
+            ) : null}
+          </>
+        ) : queued ? (
+          <span className="text-[10px] text-neutral-600 italic">not consumed into a turn yet</span>
+        ) : (
+          <span className="text-[10px] text-neutral-700 italic">turn header outside the window</span>
+        )}
+      </div>
+      <div className="px-3 py-2">
+        {turn?.attachment_ids !== undefined && turn.attachment_ids.length > 0 ? (
+          <AttachmentChips ids={turn.attachment_ids} />
+        ) : null}
+        {items.map((entry) => (
+          <TimelineEntryView
+            key={entry.key}
+            entry={entry}
+            interactions={interactions}
+            tasks={tasks}
+            flash={flash}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function turnUsageText(usage: NonNullable<TurnMessage['usage']>): string {
+  const parts: string[] = [];
+  if (usage.input_tokens !== undefined) parts.push(`in ${usage.input_tokens}`);
+  if (usage.output_tokens !== undefined) parts.push(`out ${usage.output_tokens}`);
+  if (usage.cached_tokens !== undefined) parts.push(`cached ${usage.cached_tokens}`);
+  if (usage.cost !== undefined) parts.push(`$${usage.cost.toFixed(4)}`);
+  return parts.join(' / ');
+}
+
+function TimelineEntryView({
+  entry,
+  interactions,
+  tasks,
+  flash,
+}: {
+  entry: TimelineEntry;
+  interactions: ReadonlyMap<string, InteractionMessage>;
+  tasks: ReadonlyMap<string, TaskMessage>;
+  flash?: { turnId: string; stepId?: string | undefined } | null | undefined;
+}) {
+  const message = entry.message;
+  switch (message.type) {
+    case 'turn':
+      return null;
+    case 'step':
+      return <StepRow step={message} flashed={flash?.stepId === message.step_id} />;
+    case 'user':
+      return <UserMessageView message={message} />;
+    case 'assistant':
+      return <AssistantMessageView message={message} />;
+    case 'thinking':
+      return <ThinkingMessageView message={message} />;
+    case 'tool_call':
+      return <ToolCallView call={message} interactions={interactions} tasks={tasks} />;
+    case 'system':
+      return <SystemMarkerView message={message} />;
+  }
+}
+
+function StepRow({ step, flashed }: { step: StepMessage; flashed: boolean }) {
+  return (
+    <div
+      data-step-id={step.step_id}
+      className={`mb-2 flex flex-wrap items-center gap-2 rounded px-1 py-0.5 text-[10px] text-neutral-600 ${
+        flashed ? 'bg-sky-900/20' : ''
+      }`}
+    >
+      <span className="font-mono">{step.step_id}</span>
+      <Badge
+        tone={
+          step.status === 'failed'
+            ? 'red'
+            : step.status === 'running'
+              ? 'amber'
+              : step.status === 'interrupted'
+                ? 'neutral'
+                : 'green'
+        }
+      >
+        {step.status}
+      </Badge>
+      {step.retry !== undefined ? (
+        <Badge tone="red">
+          retry {step.retry.failed_attempt}→{step.retry.next_attempt}/{step.retry.max_attempts}:{' '}
+          {step.retry.error_name}
+        </Badge>
+      ) : null}
+      {step.finish_reason !== undefined ? <span>finish: {step.finish_reason}</span> : null}
+      {step.usage !== undefined ? (
+        <span>
+          in {step.usage.input_other + step.usage.input_cache_read + step.usage.input_cache_creation}{' '}
+          / out {step.usage.output}
+        </span>
+      ) : null}
+      {step.end_reason !== undefined ? <span className="italic">{step.end_reason}</span> : null}
+      {step.end_message !== undefined ? <span className="italic">{step.end_message}</span> : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- messages
+
+function UserMessageView({ message }: { message: UserMessage }) {
+  const isUserInput = message.origin === undefined || message.origin.kind === 'user';
+  return (
+    <div className="mb-2">
+      <div className="mb-0.5 flex items-center gap-2 text-[10px] text-neutral-600">
+        <span className="font-mono">{message.message_id}</span>
+        {message.origin !== undefined && message.origin.kind !== 'user' ? (
+          <Badge tone="neutral">{userOriginLabel(message.origin)}</Badge>
+        ) : null}
+        {message.status === 'unread' ? <span className="italic">queued</span> : null}
+      </div>
+      {isUserInput ? (
+        <div className="flex justify-end">
+          <div className="max-w-[80%] whitespace-pre-wrap rounded-lg bg-sky-900/40 px-3 py-2 text-[13px] text-neutral-100">
+            <UserContentParts parts={message.text} />
+          </div>
+        </div>
+      ) : (
+        <div className="whitespace-pre-wrap rounded-lg border border-neutral-800 px-3 py-2 text-[12px] text-neutral-400">
+          <UserContentParts parts={message.text} />
+        </div>
+      )}
+      {message.attachment_ids !== undefined && message.attachment_ids.length > 0 ? (
+        <AttachmentChips ids={message.attachment_ids} />
+      ) : null}
+      {message.skill_activations !== undefined && message.skill_activations.length > 0 ? (
+        <div className="mt-1 flex flex-wrap gap-1">
+          {message.skill_activations.map((skill) => (
+            <Badge key={skill.skill_name} tone="violet">
+              skill: {skill.skill_name}
+            </Badge>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function userOriginLabel(origin: Exclude<UserMessage['origin'], undefined>): string {
+  switch (origin.kind) {
+    case 'user':
+      return 'user';
+    case 'cron':
+      return `cron ${origin.cron_id ?? ''}`.trim();
+    case 'task':
+      return `task: ${origin.title}`;
+    case 'skill':
+      return `skill: ${origin.skill_name}`;
+  }
+}
+
+function UserContentParts({ parts }: { parts: readonly ContentPart[] }) {
+  const text = parts
+    .filter((part) => part.type === 'text' || part.type === 'think')
+    .map((part) => part.text)
+    .join('\n');
+  const media = parts.filter(
+    (part) => part.type === 'image' || part.type === 'audio' || part.type === 'video',
+  );
+  return (
+    <>
+      {text}
+      {media.length > 0 ? (
+        <span className="mt-1 flex flex-wrap gap-1">
+          {media.map((part, index) => (
+            <span
+              key={index}
+              title={part.text}
+              className="rounded border border-neutral-700 bg-neutral-900 px-1.5 py-0.5 text-[10px] text-neutral-400"
+            >
+              {part.type}: {mediaPartLabel(part)}
+            </span>
+          ))}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+function mediaPartLabel(part: ContentPart): string {
+  const name = part.meta['name'];
+  if (typeof name === 'string' && name !== '') return name;
+  const id = part.meta['id'];
+  if (typeof id === 'string' && id !== '') return id;
+  return part.text;
+}
+
+function AssistantMessageView({ message }: { message: AssistantMessage }) {
+  return (
+    <div className="mb-2 max-w-[85%]">
+      <div className="whitespace-pre-wrap rounded-lg bg-neutral-800/60 px-3 py-2 text-[13px] text-neutral-100">
+        {message.text}
+        {message.status === 'streaming' ? <span className="text-neutral-500"> ▍</span> : null}
+      </div>
+    </div>
+  );
+}
+
+function ThinkingMessageView({ message }: { message: ThinkingMessage }) {
+  return (
+    <div className="mb-2 max-w-[85%] whitespace-pre-wrap rounded-lg border border-dashed border-neutral-700 px-3 py-2 font-mono text-[11px] text-neutral-500">
+      {message.text}
+      {message.status === 'streaming' ? <span> ▍</span> : null}
+    </div>
+  );
+}
+
+function AttachmentChips({ ids }: { ids: readonly string[] }) {
+  return (
+    <div className="mb-2 flex flex-wrap gap-1">
+      {ids.map((id) => (
+        <span
+          key={id}
+          className="rounded border border-neutral-700 bg-neutral-900 px-2 py-0.5 text-[10px] text-neutral-400"
+        >
+          📎 {id}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- tool calls
+
+function ToolCallView({
+  call,
+  interactions,
+  tasks,
+}: {
+  call: ToolCallMessage;
+  interactions: ReadonlyMap<string, InteractionMessage>;
+  tasks: ReadonlyMap<string, TaskMessage>;
+}) {
+  const task = call.task_id !== undefined ? tasks.get(call.task_id) : undefined;
+  const linked = [...interactions.values()].filter(
+    (interaction) =>
+      interaction.interaction_id === call.approval_id ||
+      interaction.tool_call_id === call.tool_call_id,
+  );
+  return (
+    <div className="mb-2 max-w-[85%] rounded-lg border border-neutral-800 bg-neutral-900/50 px-3 py-2 font-mono text-[11px]">
+      <div className="mb-1 flex flex-wrap items-center gap-2">
+        <Badge
+          tone={call.status === 'error' ? 'red' : call.status === 'running' ? 'amber' : 'neutral'}
+        >
+          tool
+        </Badge>
+        <span className="text-neutral-300">{call.name}</span>
+        <span className="text-neutral-600 select-all">{call.tool_call_id}</span>
+        {call.view !== undefined && call.view !== call.name ? (
+          <span className="text-neutral-600">view: {call.view}</span>
+        ) : null}
+        {call.agent_refs?.map((ref) => (
+          <Badge key={ref.agent_id} tone="sky">
+            agent: {ref.agent_id}
+          </Badge>
+        ))}
+        {task !== undefined ? <span className="text-neutral-600">task: {task.status}</span> : null}
+        {call.todo_id !== undefined ? (
+          <span className="text-neutral-600">todo: {call.todo_id}</span>
+        ) : null}
+      </div>
+      {call.input !== undefined ? (
+        typeof call.input === 'string' ? (
+          <pre className="max-h-32 overflow-auto whitespace-pre-wrap text-neutral-500">
+            {call.input}
+          </pre>
+        ) : (
+          <JsonView data={call.input} />
+        )
+      ) : call.input_text !== undefined && call.input_text !== '' ? (
+        <pre className="max-h-32 overflow-auto whitespace-pre-wrap text-neutral-500">
+          {call.input_text}
+        </pre>
+      ) : null}
+      {call.output !== undefined ? (
+        typeof call.output === 'string' ? (
+          <pre
+            className={`max-h-40 overflow-auto whitespace-pre-wrap ${
+              call.status === 'error' ? 'text-red-400' : 'text-neutral-400'
+            }`}
+          >
+            {call.output}
+          </pre>
+        ) : (
+          <JsonView data={call.output} />
+        )
+      ) : task !== undefined && task.output_tail !== '' ? (
+        <pre className="max-h-40 overflow-auto whitespace-pre-wrap text-neutral-400">
+          {task.output_tail}
+        </pre>
+      ) : null}
+      {call.error !== undefined && call.error !== call.output ? (
+        <pre className="max-h-40 overflow-auto whitespace-pre-wrap text-red-400">{call.error}</pre>
+      ) : null}
+      {call.progress !== undefined ? (
+        <div className="mt-1 text-neutral-600">
+          progress ({call.progress.kind}):{' '}
+          {call.progress.text ?? (call.progress.percent !== undefined ? `${call.progress.percent}%` : call.progress.custom_kind ?? '')}
+        </div>
+      ) : null}
+      {linked.map((interaction) => (
+        <InteractionEntityView key={interaction.interaction_id} interaction={interaction} nested />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- interactions
+
+function InteractionEntityView({
+  interaction,
+  nested,
+}: {
+  interaction: InteractionMessage;
+  nested?: boolean;
+}) {
+  const { baseUrl, config } = useConnection();
+  const sessionId = useContext(SessionContext);
+  const [busy, setBusy] = useState(false);
+  const [respondError, setRespondError] = useState<unknown>(null);
+  /** Question answers in progress: question id → selected option labels. */
+  const [selections, setSelections] = useState<Readonly<Record<string, readonly string[]>>>({});
+  /** Question free-text ("Other") input: question id → draft. */
+  const [others, setOthers] = useState<Readonly<Record<string, string>>>({});
+
+  const pending = interaction.status === 'pending';
+  const questionRequest = interaction.kind === 'question' ? interaction.request : undefined;
+  const api = { baseUrl, token: config.token, sessionId };
+
+  const run = (fn: () => Promise<unknown>): void => {
+    setBusy(true);
+    setRespondError(null);
+    void fn()
+      .catch((error: unknown) => {
+        setRespondError(error);
+      })
+      .finally(() => {
+        setBusy(false);
+      });
+  };
+
+  const decide = (decision: 'approved' | 'rejected'): void => {
+    run(() => decideApproval(api, interaction.interaction_id, decision));
+  };
+
+  const toggleOption = (question: InteractionQuestionItem, label: string): void => {
+    setSelections((prev) => {
+      const current = prev[question.id] ?? [];
+      const next =
+        question.multi_select === true
+          ? current.includes(label)
+            ? current.filter((item) => item !== label)
+            : [...current, label]
+          : current.includes(label)
+            ? []
+            : [label];
+      return { ...prev, [question.id]: next };
+    });
+  };
+
+  const submitAnswers = (): void => {
+    const answers: Record<string, QuestionAnswerWire> = {};
+    for (const question of questionRequest?.questions ?? []) {
+      const selected = selections[question.id] ?? [];
+      const optionIds = selected.flatMap((label) => {
+        const match = question.options.find((option) => option.label === label);
+        return match === undefined ? [] : [match.id];
+      });
+      const other = (others[question.id] ?? '').trim();
+      if (other !== '' && optionIds.length > 0) {
+        answers[question.id] = {
+          kind: 'multi_with_other',
+          option_ids: optionIds,
+          other_text: other,
+        };
+      } else if (other !== '') {
+        answers[question.id] = { kind: 'other', text: other };
+      } else if (optionIds.length > 1 || (question.multi_select === true && optionIds.length > 0)) {
+        answers[question.id] = { kind: 'multi', option_ids: optionIds };
+      } else if (optionIds.length === 1) {
+        answers[question.id] = { kind: 'single', option_id: optionIds[0]! };
+      }
+    }
+    // Mirror the TUI adapter: no answers at all dismisses the question.
+    if (Object.keys(answers).length === 0) {
+      dismiss();
+      return;
+    }
+    run(() => answerQuestion(api, interaction.interaction_id, answers, 'enter'));
+  };
+
+  const dismiss = (): void => {
+    run(() => dismissQuestion(api, interaction.interaction_id));
+  };
+
+  return (
+    <div
+      className={`mb-2 max-w-[85%] rounded-lg border border-amber-900/50 bg-amber-950/20 px-3 py-2 text-[11px] ${
+        nested === true ? 'mt-2 max-w-full' : ''
+      }`}
+    >
+      <div className="mb-1 flex items-center gap-2">
+        <Badge tone={pending ? 'amber' : 'neutral'}>{interaction.kind}</Badge>
+        <span className="text-neutral-400">{interaction.status}</span>
+        <span className="text-neutral-600">tool: {interaction.tool_call_id}</span>
+      </div>
+      {interaction.request !== undefined && questionRequest === undefined ? (
+        <JsonView data={interaction.request} />
+      ) : null}
+      {questionRequest !== undefined && !pending ? <JsonView data={questionRequest} /> : null}
+      {interaction.response !== undefined ? <JsonView data={interaction.response} /> : null}
+      {pending && interaction.kind === 'approval' ? (
+        <div className="mt-2 flex gap-2">
+          <ActionButton onClick={() => decide('approved')} disabled={busy}>
+            Approve
+          </ActionButton>
+          <ActionButton onClick={() => decide('rejected')} danger disabled={busy}>
+            Reject
+          </ActionButton>
+        </div>
+      ) : null}
+      {pending && questionRequest !== undefined ? (
+        <div className="mt-2">
+          {questionRequest.questions.map((question) => (
+            <div key={question.id} className="mb-2">
+              <div className="text-neutral-300">{question.header ?? question.question}</div>
+              <div className="mt-1 flex flex-wrap gap-1">
+                {question.options.map((option) => {
+                  const selected = (selections[question.id] ?? []).includes(option.label);
+                  return (
+                    <button
+                      key={option.id}
+                      className={`rounded border px-2 py-0.5 text-[10px] transition-colors disabled:opacity-40 ${
+                        selected
+                          ? 'border-sky-600 bg-sky-900/50 text-sky-200'
+                          : 'border-neutral-700 text-neutral-400 hover:bg-neutral-800'
+                      }`}
+                      title={option.description}
+                      disabled={busy}
+                      onClick={() => toggleOption(question, option.label)}
+                    >
+                      {option.label}
+                    </button>
+                  );
+                })}
+              </div>
+              <input
+                className="mt-1 w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1 text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+                placeholder={question.other_label ?? 'Other…'}
+                value={others[question.id] ?? ''}
+                disabled={busy}
+                onChange={(e) => {
+                  setOthers((prev) => ({ ...prev, [question.id]: e.target.value }));
+                }}
+              />
+            </div>
+          ))}
+          <div className="flex gap-2">
+            <ActionButton onClick={submitAnswers} disabled={busy}>
+              Answer
+            </ActionButton>
+            <ActionButton onClick={dismiss} danger disabled={busy}>
+              Dismiss
+            </ActionButton>
+          </div>
+        </div>
+      ) : null}
+      {respondError !== null ? (
+        <div className="mt-2">
+          <ErrorLine error={respondError} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------- state entities
+
+function SystemMarkerView({ message }: { message: SystemMessage }) {
+  return (
+    <div className="mb-3">
+      <div className="flex items-center gap-2 text-[10px] text-neutral-600">
+        <div className="h-px flex-1 bg-neutral-800" />
+        <span className="font-mono">system({message.subtype})</span>
+        <span className="font-mono text-neutral-700">{message.system_id}</span>
+        {message.at !== undefined ? <span>{relTime(Date.parse(message.at))}</span> : null}
+        <div className="h-px flex-1 bg-neutral-800" />
+      </div>
+      {message.payload !== undefined ? <JsonView data={message.payload} /> : null}
+    </div>
+  );
+}
+
+function TaskCard({ task }: { task: TaskMessage }) {
+  const failed =
+    task.status === 'failed' || task.status === 'timed_out' || task.status === 'lost';
+  return (
+    <div className="mb-3 rounded-lg border border-neutral-800 bg-neutral-900/40 px-3 py-2 text-[11px]">
+      <div className="flex items-center gap-2">
+        <Badge tone={task.status === 'running' ? 'amber' : failed ? 'red' : 'neutral'}>
+          task: {task.kind}
+        </Badge>
+        <span className="text-neutral-300">{task.description ?? task.task_id}</span>
+        <span className="text-neutral-600">
+          {task.status}
+          {task.detached ? ' (detached)' : ''}
+        </span>
+        {task.child_agent_id !== undefined ? (
+          <Badge tone="sky">agent: {task.child_agent_id}</Badge>
+        ) : null}
+      </div>
+      {task.output_tail !== '' ? (
+        <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-neutral-500">
+          {task.output_tail}
+        </pre>
+      ) : null}
+      {task.error !== undefined ? (
+        <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-red-400">
+          {task.error}
+        </pre>
+      ) : null}
+      {task.result_summary !== undefined ? (
+        <div className="mt-1 text-neutral-500">{task.result_summary}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function TodoCard({ todo }: { todo: TodoMessage }) {
+  return (
+    <div className="mb-3 rounded-lg border border-neutral-800 bg-neutral-900/40 px-3 py-2 text-[11px]">
+      <div className="mb-1 text-neutral-500">todo (latest)</div>
+      {todo.items.map((entry, i) => (
+        <div key={i} className="flex gap-2">
+          <span
+            className={
+              entry.status === 'done'
+                ? 'text-green-500'
+                : entry.status === 'in_progress'
+                  ? 'text-sky-400'
+                  : 'text-neutral-600'
+            }
+          >
+            {entry.status === 'done' ? '✔' : entry.status === 'in_progress' ? '◐' : '□'}
+          </span>
+          <span
+            className={entry.status === 'done' ? 'text-neutral-600 line-through' : 'text-neutral-300'}
+          >
+            {entry.title}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SessionStateBadges({ sessionState }: { sessionState: SessionStateMessage }) {
+  return (
+    <>
+      {sessionState.pending_interaction !== undefined &&
+      sessionState.pending_interaction !== 'none' ? (
+        <Badge tone="amber">{sessionState.pending_interaction}</Badge>
+      ) : null}
+      {sessionState.model !== undefined ? <Badge tone="neutral">{sessionState.model}</Badge> : null}
+      {sessionState.permission !== undefined ? (
+        <Badge tone="neutral">perm: {sessionState.permission}</Badge>
+      ) : null}
+      {sessionState.modes?.plan !== undefined ? <Badge tone="violet">plan mode</Badge> : null}
+      {sessionState.modes?.swarm !== undefined ? <Badge tone="violet">swarm</Badge> : null}
+      {sessionState.goal !== undefined ? (
+        <Badge tone={sessionState.goal.status === 'active' ? 'sky' : 'neutral'}>
+          goal: {sessionState.goal.status}
+        </Badge>
+      ) : null}
+      {sessionState.context_tokens !== undefined ? (
+        <span className="text-[10px] text-neutral-600">
+          ctx {sessionState.context_tokens}
+          {sessionState.max_context_tokens !== undefined
+            ? `/${sessionState.max_context_tokens}`
+            : ''}
+        </span>
+      ) : null}
+    </>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/DiInspectionView.tsx b/apps/kimi-inspect/src/components/DiInspectionView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..93001b1b70860c6379bd057adebd2ab968212731
--- /dev/null
+++ b/apps/kimi-inspect/src/components/DiInspectionView.tsx
@@ -0,0 +1,635 @@
+/**
+ * DI view — the engine's "Service × Effect × DI" debug surface (the App-scope
+ * `debug` domain, exposed like every other Service over `/api/v1/debug`):
+ *
+ *   - Units: the unit tree = ledger tree (`IDebugLedgerService.tree`) — one
+ *     collapsible card per scope container, its units with the five-state
+ *     cascade badge and the unprovide / update / dispose triggers
+ *     (`IDebugCascadeService`), its ledger entries as a nested subtree;
+ *   - Deps: the persistent dependency DAG (`IDebugGraphService.graph`) as
+ *     root-based Miller columns (`di/DiGraphPanel.tsx`) — column 0 lists the
+ *     roots (services nothing consumes), each click opens the next column
+ *     with that service's direct dependencies; rows carry path-scoped
+ *     relation bars (one per path ancestor with a direct edge) and a
+ *     path-root background highlight;
+ *   - Events: event subscriptions (`IDebugEventsService.subscriptions`) —
+ *     unit-book ledger entries labeled `on:<name>` /
+ *     `disposable:EventSubscription` per scope, plus per-bus listener counts
+ *     as the fallback side (`di/DiEventsPanel.tsx`);
+ *   - Cascade: the cross-scope cascade history rings
+ *     (`IDebugCascadeService.history`), newest first;
+ *   - Pending: the waiting area + sticky failures per scope
+ *     (`IDebugCascadeService.pending`), with an `update` retry per failure.
+ *
+ * All five panels poll on a short interval and refresh eagerly when the
+ * global `event.di.unit_changed` WS frame fires (`useDiQueryInvalidation`
+ * invalidates the `['di']` query prefix).
+ */
+
+import type { UnitState } from '@moonshot-ai/agent-core-v2/_base/di/cascadeEngine';
+import type { LedgerEntryInfo } from '@moonshot-ai/agent-core-v2/_base/lifecycle/ledger';
+import {
+  IDebugCascadeService,
+  type DebugCascadeEntry,
+  type DebugPendingGroup,
+} from '@moonshot-ai/agent-core-v2/debug/debugCascade';
+import { IDebugGraphService, type DebugGraph } from '@moonshot-ai/agent-core-v2/debug/debugGraph';
+import {
+  IDebugEventsService,
+  type DebugEventSubscriptions,
+} from '@moonshot-ai/agent-core-v2/features/debugEvents/debugEvents';
+import {
+  IDebugLedgerService,
+  type DebugLedgerNode,
+  type DebugUnit,
+} from '@moonshot-ai/agent-core-v2/debug/debugLedger';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState, type ReactNode } from 'react';
+
+import { useDiQueryInvalidation } from '../activity/di';
+import type { InspectClient } from '../channel';
+import { useConnection } from '../connection';
+import { ActionButton, Badge, ErrorLine } from '../ui';
+import { DiEventsPanel } from './di/DiEventsPanel';
+import { DiGraphPanel } from './di/DiGraphPanel';
+
+type DiPanel = 'units' | 'graph' | 'events' | 'cascade' | 'pending';
+
+const PANELS: readonly { id: DiPanel; title: string }[] = [
+  { id: 'units', title: 'Units' },
+  { id: 'graph', title: 'Deps' },
+  { id: 'events', title: 'Events' },
+  { id: 'cascade', title: 'Cascade' },
+  { id: 'pending', title: 'Pending' },
+];
+
+const REFETCH_INTERVAL_MS = 3000;
+
+export function DiInspectionView() {
+  useDiQueryInvalidation();
+  const [panel, setPanel] = useState<DiPanel>('units');
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1">
+      <nav className="w-32 shrink-0 border-r border-neutral-800 py-2">
+        <div className="px-3 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+          DI
+        </div>
+        {PANELS.map((p) => (
+          <button
+            key={p.id}
+            type="button"
+            onClick={() => {
+              setPanel(p.id);
+            }}
+            className={`block w-full px-3 py-1 text-left text-[11px] transition-colors ${
+              panel === p.id
+                ? 'bg-neutral-800 text-sky-400'
+                : 'text-neutral-500 hover:bg-neutral-800/60 hover:text-neutral-300'
+            }`}
+          >
+            {p.title}
+          </button>
+        ))}
+      </nav>
+      <div className="min-w-0 flex-1 overflow-auto px-4 py-3">
+        {panel === 'units' ? (
+          <UnitsPanel />
+        ) : panel === 'graph' ? (
+          <GraphPanel />
+        ) : panel === 'events' ? (
+          <EventsPanel />
+        ) : panel === 'cascade' ? (
+          <CascadePanel />
+        ) : (
+          <PendingPanel />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared data plumbing
+// ---------------------------------------------------------------------------
+
+function useDiQuery<T>(panel: string, fetcher: (klient: InspectClient) => Promise<T>) {
+  const { klient } = useConnection();
+  return useQuery({
+    queryKey: ['di', klient.baseUrl, panel],
+    queryFn: () => fetcher(klient),
+    refetchInterval: REFETCH_INTERVAL_MS,
+  });
+}
+
+/** The loading / error gate shared by every panel. Returns null when data is ready. */
+function panelGate(query: { isError: boolean; error: unknown; data: unknown }): ReactNode | null {
+  if (query.isError) return <ErrorLine error={query.error} />;
+  if (query.data === undefined) {
+    return <div className="text-[11px] text-neutral-600 italic">loading…</div>;
+  }
+  return null;
+}
+
+type DiTriggerAction = 'unprovide' | 'update' | 'dispose';
+
+interface DiTrigger {
+  /** `${action}:${scopePath}:${token}` of the in-flight trigger, if any. */
+  readonly busy: string | null;
+  readonly error: unknown;
+  readonly run: (action: DiTriggerAction, scopePath: string, token: string) => Promise<void>;
+}
+
+function triggerKey(action: DiTriggerAction, scopePath: string, token: string): string {
+  return `${action}:${scopePath}:${token}`;
+}
+
+/**
+ * The destructive unit triggers (`IDebugCascadeService.unprovide` / `update`
+ * / `dispose`), confirm-gated like the ServiceCard danger actions; a settled
+ * trigger invalidates the `['di']` prefix so every panel converges.
+ */
+function useDiTrigger(): DiTrigger {
+  const { klient } = useConnection();
+  const queryClient = useQueryClient();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<unknown>(null);
+
+  const run = async (action: DiTriggerAction, scopePath: string, token: string): Promise<void> => {
+    if (!window.confirm(`${action} '${token}' @ ${scopePath}?`)) return;
+    setBusy(triggerKey(action, scopePath, token));
+    setError(null);
+    try {
+      const svc = klient.core(IDebugCascadeService);
+      if (action === 'unprovide') await svc.unprovide(scopePath, token);
+      else if (action === 'update') await svc.update(scopePath, token);
+      else await svc.dispose(scopePath, token);
+      await queryClient.invalidateQueries({ queryKey: ['di'] });
+    } catch (error) {
+      setError(error);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return { busy, error, run };
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+// ---------------------------------------------------------------------------
+// Units panel — the unit tree = ledger tree
+// ---------------------------------------------------------------------------
+
+const STATE_TONES: Record<UnitState, 'neutral' | 'sky' | 'green' | 'amber' | 'red'> = {
+  Pending: 'neutral',
+  Activating: 'sky',
+  Active: 'green',
+  Unloading: 'amber',
+  Failed: 'red',
+};
+
+function UnitStateBadge({ state }: { state?: UnitState }) {
+  if (state === undefined) return <Badge tone="neutral">unseen</Badge>;
+  return <Badge tone={STATE_TONES[state]}>{state}</Badge>;
+}
+
+function UnitsPanel() {
+  const query = useDiQuery('units', (klient) => klient.core(IDebugLedgerService).tree());
+  const trigger = useDiTrigger();
+  const gate = panelGate(query);
+  if (gate !== null) return gate;
+  const tree = query.data as DebugLedgerNode;
+  return (
+    <div>
+      {trigger.error !== null ? (
+        <div className="mb-2">
+          <ErrorLine error={trigger.error} />
+        </div>
+      ) : null}
+      <ScopeNodeCard node={tree} depth={0} trigger={trigger} />
+    </div>
+  );
+}
+
+function ScopeNodeCard({
+  node,
+  depth,
+  trigger,
+}: {
+  node: DebugLedgerNode;
+  depth: number;
+  trigger: DiTrigger;
+}) {
+  const [open, setOpen] = useState(depth < 2);
+  const counts = new Map<UnitState, number>();
+  for (const unit of node.units) {
+    if (unit.state === undefined) continue;
+    counts.set(unit.state, (counts.get(unit.state) ?? 0) + 1);
+  }
+  return (
+    <div className={depth === 0 ? '' : 'ml-3 border-l border-neutral-800/60 pl-2'}>
+      <div className="mb-2 rounded-lg border border-neutral-800 bg-neutral-900/60">
+        <div
+          className="flex cursor-pointer items-center gap-2 px-3 py-2 select-none"
+          onClick={() => {
+            setOpen((v) => !v);
+          }}
+        >
+          <span className="shrink-0 text-[10px] text-neutral-600">{open ? '▾' : '▸'}</span>
+          <span className="shrink-0 text-[12px] font-medium text-neutral-200">{node.label}</span>
+          <span
+            className="min-w-0 truncate font-mono text-[10px] text-neutral-600"
+            title={node.path}
+          >
+            {node.path}
+          </span>
+          <span className="ml-auto flex shrink-0 items-center gap-1">
+            <span className="text-[10px] text-neutral-600">{node.units.length} units</span>
+            {[...counts.entries()].map(([state, count]) => (
+              <Badge key={state} tone={STATE_TONES[state]}>
+                {count} {state}
+              </Badge>
+            ))}
+          </span>
+        </div>
+        {open ? (
+          <div className="border-t border-neutral-800/60 px-3 py-2">
+            {node.units.length === 0 ? (
+              <div className="text-[11px] text-neutral-600 italic">no units</div>
+            ) : (
+              node.units.map((unit) => (
+                <UnitRow key={unit.token} scopePath={node.path} unit={unit} trigger={trigger} />
+              ))
+            )}
+            <LedgerSection entries={node.ledger} />
+          </div>
+        ) : null}
+      </div>
+      {open
+        ? node.children.map((child) => (
+            <ScopeNodeCard key={child.path} node={child} depth={depth + 1} trigger={trigger} />
+          ))
+        : null}
+    </div>
+  );
+}
+
+function UnitRow({
+  scopePath,
+  unit,
+  trigger,
+}: {
+  scopePath: string;
+  unit: DebugUnit;
+  trigger: DiTrigger;
+}) {
+  const [errorOpen, setErrorOpen] = useState(false);
+  const actions: readonly DiTriggerAction[] = ['unprovide', 'update', 'dispose'];
+  return (
+    <div className="mb-1 rounded border border-neutral-800/70 bg-neutral-950/40 px-2 py-1.5">
+      <div className="flex items-center gap-2">
+        <span
+          className="min-w-0 truncate font-mono text-[11px] text-neutral-200"
+          title={unit.token}
+        >
+          {unit.token}
+        </span>
+        <span title={unit.everActive === undefined ? '' : `everActive: ${unit.everActive}`}>
+          <UnitStateBadge state={unit.state} />
+        </span>
+        {unit.inFlight === true ? <Badge tone="sky">in-flight</Badge> : null}
+        <span className="shrink-0 text-[10px] text-neutral-600">#{unit.uid}</span>
+        {unit.error !== undefined ? (
+          <button
+            type="button"
+            className="shrink-0 text-[10px] text-red-400 hover:text-red-300"
+            onClick={() => {
+              setErrorOpen((v) => !v);
+            }}
+          >
+            error {errorOpen ? '▾' : '▸'}
+          </button>
+        ) : null}
+        <span className="ml-auto flex shrink-0 gap-1">
+          {actions.map((action) => (
+            <ActionButton
+              key={action}
+              danger
+              disabled={trigger.busy !== null}
+              onClick={() => void trigger.run(action, scopePath, unit.token)}
+            >
+              {trigger.busy === triggerKey(action, scopePath, unit.token) ? '…' : action}
+            </ActionButton>
+          ))}
+        </span>
+      </div>
+      {errorOpen && unit.error !== undefined ? (
+        <pre className="mt-1 overflow-auto rounded bg-red-950/40 p-1.5 font-mono text-[10px] break-words whitespace-pre-wrap text-red-300">
+          {unit.error}
+        </pre>
+      ) : null}
+    </div>
+  );
+}
+
+const LEDGER_KIND_TONES: Record<LedgerEntryInfo['kind'], 'neutral' | 'sky' | 'violet'> = {
+  disposer: 'neutral',
+  effect: 'sky',
+  ledger: 'violet',
+};
+
+function LedgerSection({ entries }: { entries: readonly LedgerEntryInfo[] }) {
+  const [open, setOpen] = useState(false);
+  if (entries.length === 0) return null;
+  return (
+    <div className="mt-1">
+      <button
+        type="button"
+        className="text-[10px] text-neutral-500 select-none hover:text-neutral-300"
+        onClick={() => {
+          setOpen((v) => !v);
+        }}
+      >
+        {open ? '▾' : '▸'} ledger ({entries.length})
+      </button>
+      {open ? (
+        <div className="mt-1 border-l border-neutral-800/60 pl-2">
+          {entries.map((entry, i) => (
+            <LedgerEntryRow key={i} entry={entry} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function LedgerEntryRow({ entry }: { entry: LedgerEntryInfo }) {
+  return (
+    <div className="py-0.5">
+      <span className="font-mono text-[10px] text-neutral-400" title={entry.stack}>
+        {entry.label}
+      </span>
+      <span className="ml-1.5">
+        <Badge tone={LEDGER_KIND_TONES[entry.kind]}>{entry.kind}</Badge>
+      </span>
+      {entry.children !== undefined && entry.children.length > 0 ? (
+        <div className="ml-2 border-l border-neutral-800/60 pl-2">
+          {entry.children.map((child, i) => (
+            <LedgerEntryRow key={i} entry={child} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Graph panel — the dependency DAG; rendering lives in di/DiGraphPanel.tsx
+// ---------------------------------------------------------------------------
+
+function GraphPanel() {
+  const query = useDiQuery('graph', (klient) => klient.core(IDebugGraphService).graph());
+  const gate = panelGate(query);
+  if (gate !== null) return gate;
+  return <DiGraphPanel graph={query.data as DebugGraph} />;
+}
+
+// ---------------------------------------------------------------------------
+// Events panel — event subscriptions; rendering lives in di/DiEventsPanel.tsx
+// ---------------------------------------------------------------------------
+
+function EventsPanel() {
+  const query = useDiQuery('events', (klient) =>
+    klient.core(IDebugEventsService).subscriptions(),
+  );
+  const gate = panelGate(query);
+  if (gate !== null) return gate;
+  return <DiEventsPanel data={query.data as DebugEventSubscriptions} />;
+}
+
+// ---------------------------------------------------------------------------
+// Cascade panel — the cross-scope cascade history rings, newest first
+// ---------------------------------------------------------------------------
+
+function CascadePanel() {
+  const query = useDiQuery('cascade', (klient) => klient.core(IDebugCascadeService).history());
+  const gate = panelGate(query);
+  if (gate !== null) return gate;
+  // seq is a per-engine ring sequence; cross-scope ordering is approximate.
+  const entries = (query.data as DebugCascadeEntry[]).toReversed();
+  if (entries.length === 0) {
+    return <div className="text-[11px] text-neutral-600 italic">no cascade transactions yet</div>;
+  }
+  return (
+    <div>
+      {entries.map((entry, i) => (
+        <CascadeEntryCard key={`${entry.scopePath}:${entry.seq}:${i}`} entry={entry} />
+      ))}
+    </div>
+  );
+}
+
+function CascadeEntryCard({ entry }: { entry: DebugCascadeEntry }) {
+  const [open, setOpen] = useState(false);
+  const expandable =
+    entry.failed.length > 0 || entry.affected.length > 0 || entry.tornDown.length > 0;
+  return (
+    <div className="mb-2 rounded border border-neutral-800 bg-neutral-900/60">
+      <div
+        className={`flex items-center gap-2 px-2 py-1.5 ${expandable ? 'cursor-pointer select-none' : ''}`}
+        onClick={
+          expandable
+            ? () => {
+                setOpen((v) => !v);
+              }
+            : undefined
+        }
+      >
+        <span className="shrink-0 font-mono text-[11px] text-neutral-200">#{entry.seq}</span>
+        <span className="shrink-0 font-mono text-[10px] text-neutral-500" title={entry.scopePath}>
+          {truncate(entry.scopePath, 40)}
+        </span>
+        {entry.abortWaited ? <Badge tone="amber">abort waited</Badge> : null}
+        {entry.abortTimedOut ? <Badge tone="red">abort timed out</Badge> : null}
+        {entry.failed.length > 0 ? <Badge tone="red">{entry.failed.length} failed</Badge> : null}
+        <span className="min-w-0 flex-1 truncate text-[11px] text-neutral-400" title={entry.reason}>
+          {entry.reason}
+        </span>
+        <span className="shrink-0 text-[10px] text-neutral-600">{entry.durationMs}ms</span>
+        {expandable ? (
+          <span className="shrink-0 text-[10px] text-neutral-600">{open ? '▾' : '▸'}</span>
+        ) : null}
+      </div>
+      <div className="border-t border-neutral-800/60 px-2 py-1.5">
+        <div className="flex flex-wrap gap-1">
+          {entry.changes.map((change, i) => (
+            <span
+              key={i}
+              className="rounded bg-neutral-800 px-1.5 py-0.5 font-mono text-[10px] text-neutral-300"
+              title={change.token}
+            >
+              {change.action} {truncate(change.token, 48)}
+            </span>
+          ))}
+        </div>
+        <div className="mt-1 text-[10px] text-neutral-500">
+          affected {entry.affected.length} · torn down {entry.tornDown.length} · rebuilt{' '}
+          {entry.rebuilt.length} · failed {entry.failed.length}
+        </div>
+        {open ? (
+          <div className="mt-1.5 space-y-1">
+            {entry.affected.length > 0 ? (
+              <TokenList label="affected" tokens={entry.affected} />
+            ) : null}
+            {entry.tornDown.length > 0 ? (
+              <TokenList label="torn down" tokens={entry.tornDown} />
+            ) : null}
+            {entry.failed.length > 0 ? (
+              <TokenList label="failed" tokens={entry.failed} danger />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function TokenList({
+  label,
+  tokens,
+  danger,
+}: {
+  label: string;
+  tokens: readonly string[];
+  danger?: boolean;
+}) {
+  return (
+    <div>
+      <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+        {label}
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {tokens.map((token, i) => (
+          <span
+            key={i}
+            className={`rounded px-1.5 py-0.5 font-mono text-[10px] ${
+              danger === true ? 'bg-red-950/60 text-red-300' : 'bg-neutral-800 text-neutral-300'
+            }`}
+            title={token}
+          >
+            {truncate(token, 64)}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Pending panel — the waiting area + sticky failures per scope
+// ---------------------------------------------------------------------------
+
+function PendingPanel() {
+  const query = useDiQuery('pending', (klient) => klient.core(IDebugCascadeService).pending());
+  const trigger = useDiTrigger();
+  const gate = panelGate(query);
+  if (gate !== null) return gate;
+  const groups = query.data as DebugPendingGroup[];
+  return (
+    <div>
+      {trigger.error !== null ? (
+        <div className="mb-2">
+          <ErrorLine error={trigger.error} />
+        </div>
+      ) : null}
+      {groups.length === 0 ? (
+        <div className="text-[11px] text-neutral-600 italic">no waiting or failed units</div>
+      ) : (
+        groups.map((group) => (
+          <div
+            key={group.scopePath}
+            className="mb-2 rounded-lg border border-neutral-800 bg-neutral-900/60"
+          >
+            <div className="border-b border-neutral-800/60 px-3 py-2">
+              <span className="font-mono text-[11px] text-neutral-200">{group.scopePath}</span>
+            </div>
+            <div className="px-3 py-2">
+              {group.waiting.length > 0 ? (
+                <div className="mb-2">
+                  <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+                    waiting ({group.waiting.length})
+                  </div>
+                  {group.waiting.map((unit) => (
+                    <div
+                      key={unit.token}
+                      className="mb-1 flex items-center gap-2 rounded border border-neutral-800/70 bg-neutral-950/40 px-2 py-1.5"
+                    >
+                      <span
+                        className="min-w-0 truncate font-mono text-[11px] text-neutral-200"
+                        title={unit.token}
+                      >
+                        {unit.token}
+                      </span>
+                      <span className="shrink-0 text-[10px] text-neutral-600">missing:</span>
+                      <span className="flex min-w-0 flex-wrap gap-1">
+                        {unit.missing.map((dep, i) => (
+                          <span
+                            key={i}
+                            className="rounded bg-amber-950/60 px-1.5 py-0.5 font-mono text-[10px] text-amber-300"
+                            title={dep}
+                          >
+                            {truncate(dep, 48)}
+                          </span>
+                        ))}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+              {group.failed.length > 0 ? (
+                <div>
+                  <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+                    failed ({group.failed.length})
+                  </div>
+                  {group.failed.map((unit) => (
+                    <div
+                      key={unit.token}
+                      className="mb-1 rounded border border-red-900/50 bg-red-950/20 px-2 py-1.5"
+                    >
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="min-w-0 truncate font-mono text-[11px] text-neutral-200"
+                          title={unit.token}
+                        >
+                          {unit.token}
+                        </span>
+                        <span className="ml-auto shrink-0">
+                          <ActionButton
+                            danger
+                            disabled={trigger.busy !== null}
+                            onClick={() => void trigger.run('update', group.scopePath, unit.token)}
+                          >
+                            {trigger.busy === triggerKey('update', group.scopePath, unit.token)
+                              ? '…'
+                              : 'retry update'}
+                          </ActionButton>
+                        </span>
+                      </div>
+                      {unit.error !== undefined ? (
+                        <pre className="mt-1 overflow-auto rounded bg-red-950/40 p-1.5 font-mono text-[10px] break-words whitespace-pre-wrap text-red-300">
+                          {unit.error}
+                        </pre>
+                      ) : null}
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/FsSuggestView.tsx b/apps/kimi-inspect/src/components/FsSuggestView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ab5cf6f3fb07d495bde86b711583c972662d9fbb
--- /dev/null
+++ b/apps/kimi-inspect/src/components/FsSuggestView.tsx
@@ -0,0 +1,256 @@
+import { IWorkspaceService, type Workspace } from '@moonshot-ai/agent-core-v2/app/workspace/workspace';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { useConnection } from '../connection';
+import { fetchFsSuggest, type FsSuggestResult } from '../fs/api';
+import { Badge, ErrorLine } from '../ui';
+import { WorkspaceDirBrowser } from './WorkspaceDirBrowser';
+
+function parseGlobs(value: string): string[] | undefined {
+  const globs = value
+    .split(',')
+    .map((glob) => glob.trim())
+    .filter((glob) => glob.length > 0);
+  return globs.length === 0 ? undefined : globs;
+}
+
+function parseRoots(value: string): string[] {
+  return value
+    .split(/[\n,]/)
+    .map((root) => root.trim())
+    .filter((root) => root.length > 0);
+}
+
+export function FsSuggestView() {
+  const { klient, baseUrl } = useConnection();
+  const [workspace, setWorkspace] = useState<Workspace | null>(null);
+  const [rootsText, setRootsText] = useState('');
+  const [query, setQuery] = useState('');
+  const [limit, setLimit] = useState('50');
+  const [followGitignore, setFollowGitignore] = useState(true);
+  const [showHidden, setShowHidden] = useState(false);
+  const [includeGlobs, setIncludeGlobs] = useState('');
+  const [excludeGlobs, setExcludeGlobs] = useState('');
+
+  const workspaces = useQuery({
+    queryKey: ['workspaces', klient.baseUrl],
+    queryFn: () => klient.core(IWorkspaceService).list(),
+  });
+
+  const suggest = useMutation<FsSuggestResult, Error>({
+    mutationFn: async () => {
+      const roots = parseRoots(rootsText);
+      const parsedLimit = Number.parseInt(limit, 10);
+      const shared = {
+        baseUrl: klient.baseUrl,
+        token: klient.token,
+        query,
+        limit: Number.isFinite(parsedLimit) && parsedLimit > 0 ? parsedLimit : undefined,
+        followGitignore,
+        showHidden,
+        includeGlobs: parseGlobs(includeGlobs),
+        excludeGlobs: parseGlobs(excludeGlobs),
+      };
+      if (roots.length > 0) {
+        return fetchFsSuggest({ ...shared, roots });
+      }
+      if (workspace === null) throw new Error('select a workspace or enter roots first');
+      return fetchFsSuggest({ ...shared, roots: [workspace.root] });
+    },
+  });
+
+  useEffect(() => {
+    setWorkspace(null);
+    suggest.reset();
+  }, [baseUrl]);
+
+  const selectWorkspace = (next: Workspace) => {
+    setWorkspace(next);
+    suggest.reset();
+  };
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1">
+      <aside className="flex w-72 shrink-0 flex-col border-r border-neutral-800">
+        <div className="border-b border-neutral-800 px-3 py-2">
+          <div className="text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+            Workspace
+          </div>
+          <div title={workspace?.root} className="truncate font-mono text-[11px] text-neutral-300">
+            {workspace === null ? <span className="text-neutral-600 italic">none selected</span> : `${workspace.name} — ${workspace.root}`}
+          </div>
+          {workspaces.isError ? <ErrorLine error={workspaces.error} /> : null}
+        </div>
+        <WorkspaceDirBrowser
+          klient={klient}
+          workspaces={workspaces.data}
+          onSelect={selectWorkspace}
+        />
+      </aside>
+      <main className="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
+        <div className="mx-auto max-w-6xl space-y-4">
+          <div>
+            <h1 className="text-sm font-semibold text-neutral-200">Filesystem Suggest</h1>
+            <p className="mt-1 text-[11px] text-neutral-500">
+              Query file and directory completion candidates via the workspace-independent
+              fs:suggest API — the selected workspace supplies its root, or enter arbitrary
+              roots to override it.
+            </p>
+          </div>
+          <form
+            className="grid gap-3 rounded border border-neutral-800 bg-neutral-900/30 p-3 md:grid-cols-2"
+            onSubmit={(event) => {
+              event.preventDefault();
+              suggest.mutate();
+            }}
+          >
+            <label className="md:col-span-2">
+              <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+                Roots (absolute paths, one per line or comma-separated; overrides the workspace selection)
+              </span>
+              <textarea
+                className="h-16 w-full resize-y rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 font-mono text-[12px] text-neutral-100 outline-none focus:border-sky-600"
+                value={rootsText}
+                onChange={(event) => setRootsText(event.target.value)}
+                placeholder="/abs/primary-root&#10;/abs/additional-root"
+              />
+            </label>
+            <label className="md:col-span-2">
+              <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+                Query
+              </span>
+              <input
+                autoFocus
+                className="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 font-mono text-[12px] text-neutral-100 outline-none focus:border-sky-600"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="apps/de or README"
+              />
+            </label>
+            <label>
+              <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+                Limit
+              </span>
+              <input
+                className="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 font-mono text-[12px] text-neutral-100 outline-none focus:border-sky-600"
+                inputMode="numeric"
+                value={limit}
+                onChange={(event) => setLimit(event.target.value)}
+              />
+            </label>
+            <div className="flex items-end gap-4 pb-1 text-[11px] text-neutral-300">
+              <label className="flex items-center gap-1.5">
+                <input
+                  type="checkbox"
+                  checked={followGitignore}
+                  onChange={(event) => setFollowGitignore(event.target.checked)}
+                />
+                follow gitignore
+              </label>
+              <label className="flex items-center gap-1.5">
+                <input
+                  type="checkbox"
+                  checked={showHidden}
+                  onChange={(event) => setShowHidden(event.target.checked)}
+                />
+                show hidden
+              </label>
+            </div>
+            <label>
+              <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+                Include globs
+              </span>
+              <input
+                className="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 font-mono text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+                value={includeGlobs}
+                onChange={(event) => setIncludeGlobs(event.target.value)}
+                placeholder="**/*.ts, src/**"
+              />
+            </label>
+            <label>
+              <span className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+                Exclude globs
+              </span>
+              <input
+                className="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 font-mono text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+                value={excludeGlobs}
+                onChange={(event) => setExcludeGlobs(event.target.value)}
+                placeholder="dist/**, node_modules/**"
+              />
+            </label>
+            <div className="flex items-end md:col-span-2">
+              <button
+                type="submit"
+                disabled={(workspace === null && parseRoots(rootsText).length === 0) || suggest.isPending}
+                className="rounded bg-sky-600 px-3 py-1.5 text-[12px] font-medium text-white hover:bg-sky-500 disabled:opacity-40"
+              >
+                {suggest.isPending ? 'loading…' : 'Suggest'}
+              </button>
+              {workspace === null && parseRoots(rootsText).length === 0 ? (
+                <span className="ml-3 text-[11px] text-neutral-600">select a workspace or enter roots first</span>
+              ) : null}
+            </div>
+          </form>
+          {suggest.isError ? <ErrorLine error={suggest.error} /> : null}
+          {suggest.data === undefined && !suggest.isError ? (
+            <div className="rounded border border-dashed border-neutral-800 p-6 text-center text-[12px] text-neutral-600">
+              Submit a query to inspect the complete response.
+            </div>
+          ) : null}
+          {suggest.data !== undefined ? <SuggestResult result={suggest.data} /> : null}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function SuggestResult({ result }: { readonly result: FsSuggestResult }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 text-[11px] text-neutral-400">
+        <span>{result.items.length} items</span>
+        <Badge tone={result.truncated ? 'amber' : 'green'}>
+          {result.truncated ? 'truncated' : 'complete'}
+        </Badge>
+      </div>
+      <section className="overflow-x-auto rounded border border-neutral-800">
+        <table className="w-full min-w-[680px] text-left text-[11px]">
+          <thead className="border-b border-neutral-800 bg-neutral-900/50 text-neutral-500">
+            <tr>
+              <th className="px-2 py-1.5">path</th>
+              <th className="px-2 py-1.5">name</th>
+              <th className="px-2 py-1.5">kind</th>
+              <th className="px-2 py-1.5">score</th>
+              <th className="px-2 py-1.5">match positions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {result.items.map((item) => (
+              <tr key={item.path} className="border-b border-neutral-900 last:border-0">
+                <td className="px-2 py-1.5 font-mono text-neutral-200">{item.path}</td>
+                <td className="px-2 py-1.5 font-mono text-neutral-400">{item.name}</td>
+                <td className="px-2 py-1.5 text-neutral-400">{item.kind}</td>
+                <td className="px-2 py-1.5 font-mono text-neutral-400">{item.score}</td>
+                <td className="px-2 py-1.5 font-mono text-neutral-400">
+                  {item.matchPositions.join(', ') || '—'}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {result.items.length === 0 ? (
+          <div className="p-4 text-center text-[11px] text-neutral-600">no matching items</div>
+        ) : null}
+      </section>
+      <details className="rounded border border-neutral-800 bg-neutral-950/50">
+        <summary className="cursor-pointer px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-neutral-500">
+          Full JSON response
+        </summary>
+        <pre className="max-h-[420px] overflow-auto border-t border-neutral-800 p-3 text-[11px] leading-relaxed text-neutral-300">
+          {JSON.stringify(result, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/Inspector.tsx b/apps/kimi-inspect/src/components/Inspector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e8cbf72683b295de8af3ee3f3ca3d633a818db4f
--- /dev/null
+++ b/apps/kimi-inspect/src/components/Inspector.tsx
@@ -0,0 +1,308 @@
+/**
+ * Agent inspector — the `Agent` tab of the chat view's right dock
+ * (`RightPanel`; it used to be a standalone 420px column on the far right).
+ * Hosts the agent switcher, the Plan lookup card, and the agent Service
+ * panels (`ScopePanels`). The session scope lives in the `SessionPane`
+ * column next to the sidebar (pending interactions, session Services,
+ * session State); the app-scope (server-level) Services live in their own
+ * rail view (`AppServicesView`), not here.
+ *
+ * Everything here is fetch-on-demand (Load / Refresh buttons): the v2 event
+ * socket (`/api/v2/ws`) that used to push core/session/agent event streams
+ * — live panel refetches, the pending-interaction push, the merged event
+ * log — was removed server-side, so there is no live push to render.
+ */
+
+import { ISessionMetadata } from '@moonshot-ai/agent-core-v2/session/sessionMetadata/sessionMetadata';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+
+import { serviceByName } from '../channel';
+import { useConnection } from '../connection';
+import { type AnyService } from '../panels';
+import { fetchAgentRuntimeBinding } from '../snapshots/api';
+import { fetchFullHistory } from '../transcript/api';
+import { projectPlans, type PlanInfo } from '../transcript/plan';
+import { ActionButton, Badge, ErrorLine } from '../ui';
+import { ScopePanels } from './ServicePanels';
+
+export function Inspector({
+  sessionId,
+  agentId,
+  onAgentChange,
+  ready,
+}: {
+  sessionId: string | null;
+  agentId: string;
+  onAgentChange: (agentId: string) => void;
+  ready: boolean;
+}) {
+  const { klient } = useConnection();
+
+  const meta = useQuery({
+    queryKey: ['sessionMeta', sessionId],
+    queryFn: () =>
+      klient
+        .session(sessionId as string)
+        .service(ISessionMetadata)
+        .read(),
+    enabled: sessionId !== null && ready,
+  });
+
+  const agentIds = useMemo(() => {
+    const ids = Object.keys(meta.data?.agents ?? {});
+    if (ids.length === 0) return ['main'];
+    return ['main', ...ids.filter((id) => id !== 'main')].filter(
+      (id, i, all) => all.indexOf(id) === i,
+    );
+  }, [meta.data]);
+
+  // Keep the selected agent valid as the registry changes.
+  const effectiveAgent = agentIds.includes(agentId) ? agentId : agentIds[0]!;
+  const runtimeBinding = useQuery({
+    queryKey: ['agent-runtime-binding', klient.baseUrl, sessionId, effectiveAgent],
+    queryFn: () => fetchAgentRuntimeBinding(klient, sessionId as string, effectiveAgent),
+    enabled: sessionId !== null && ready,
+    refetchInterval: 1_000,
+  });
+  useEffect(() => {
+    if (effectiveAgent !== agentId) onAgentChange(effectiveAgent);
+  }, [effectiveAgent, agentId, onAgentChange]);
+
+  // Subagents stay in the metadata registry even when their scope is not
+  // materialized in this process (created before a restart, or disposed on
+  // session close), so the switcher lists entries that cannot be called.
+  // Mark one as "not loaded" when an agent-scope call comes back with
+  // `agent.not_found` (message names the agent).
+  const [stoppedAgents, setStoppedAgents] = useState<ReadonlySet<string>>(new Set());
+  useEffect(() => setStoppedAgents(new Set()), [sessionId]);
+  const noteAgentError = (agent: string, error: unknown) => {
+    if (error instanceof Error && error.message.includes('not found in session')) {
+      setStoppedAgents((prev) => (prev.has(agent) ? prev : new Set(prev).add(agent)));
+    }
+  };
+
+  // Resolve a Service proxy by channel name, 1:1 with the channel descriptor
+  // from `/api/v1/debug/channels`. Returns null when the scope needs a
+  // session that isn't selected/ready.
+  const proxyFor = useMemo(() => {
+    return (name: string): AnyService | null => {
+      return (
+        serviceByName<AnyService>(klient, name, {
+          scope: 'agent',
+          sessionId: sessionId !== null && ready ? sessionId : undefined,
+          agentId: effectiveAgent,
+        }) ?? null
+      );
+    };
+  }, [klient, sessionId, effectiveAgent, ready]);
+
+  const sessionBlocked = sessionId === null || !ready;
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Agent switcher */}
+      {sessionId !== null ? (
+        <div className="border-b border-neutral-800 px-3 py-2">
+          <label className="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+            Active agent
+          </label>
+          <select
+            className="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 text-[12px] text-neutral-100 outline-none focus:border-sky-600"
+            value={effectiveAgent}
+            onChange={(e) => onAgentChange(e.target.value)}
+          >
+            {agentIds.map((id) => (
+              <option key={id} value={id}>
+                {stoppedAgents.has(id) ? `${id} (not loaded)` : id}
+              </option>
+            ))}
+          </select>
+          {stoppedAgents.has(effectiveAgent) ? (
+            <div className="mt-1 text-[10px] text-neutral-600">
+              this agent is not materialized in the running server (e.g. created before a restart) —
+              calls will fail; its persisted records remain on disk
+            </div>
+          ) : null}
+          {meta.isError ? (
+            <div className="mt-1">
+              <ErrorLine error={meta.error} />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="flex-1 overflow-y-auto p-3">
+        {sessionBlocked ? (
+          <div className="text-[12px] text-neutral-600">
+            {sessionId === null ? 'No session selected.' : 'Loading session…'}
+          </div>
+        ) : (
+          <>
+            <div className="mb-3 rounded border border-neutral-800 bg-neutral-950/40 p-2 text-[11px]">
+              <div className="mb-1 flex items-center gap-2 font-semibold uppercase tracking-wider text-neutral-500">
+                Runtime binding
+                {runtimeBinding.data !== undefined ? (
+                  <Badge tone={runtimeBinding.data.available ? 'green' : 'red'}>
+                    {runtimeBinding.data.available ? 'available' : 'unavailable'}
+                  </Badge>
+                ) : null}
+              </div>
+              <div className="grid grid-cols-[80px_minmax(0,1fr)] gap-1 font-mono">
+                <span className="text-neutral-600">workspace</span>
+                <span className="break-all text-neutral-300">{runtimeBinding.data?.binding.workspaceId ?? 'loading…'}</span>
+                <span className="text-neutral-600">runtime</span>
+                <span className="break-all text-neutral-300">{runtimeBinding.data?.binding.runtimeId ?? 'loading…'}</span>
+                <span className="text-neutral-600">generation</span>
+                <span className="break-all text-neutral-300">{runtimeBinding.data?.runtime?.generation ?? 'unavailable'}</span>
+                <span className="text-neutral-600">status</span>
+                <span className="text-neutral-300">{runtimeBinding.data?.runtime?.status ?? 'unavailable'}</span>
+                <span className="text-neutral-600">capabilities</span>
+                <span className="text-neutral-300">{runtimeBinding.data?.runtime?.capabilities.join(', ') ?? 'none'}</span>
+              </div>
+              {runtimeBinding.isError ? <ErrorLine error={runtimeBinding.error} /> : null}
+            </div>
+            <PlanCard sessionId={sessionId} agentId={effectiveAgent} />
+            <ScopePanels
+              scope="agent"
+              proxyFor={proxyFor}
+              onError={(error) => noteAgentError(effectiveAgent, error)}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Plan lookup — derived from the message stream (`GET /sessions/{id}/history`
+// full read + client-side `projectPlans`): the reviewed plan of one
+// ExitPlanMode tool call, found by tool_call_id (copy it from a tool frame in
+// the chat view), or every plan of the agent. Read-only, fetched on demand
+// like everything else here.
+// ---------------------------------------------------------------------------
+
+function PlanCard({ sessionId, agentId }: { sessionId: string; agentId: string }) {
+  const { baseUrl, config } = useConnection();
+  const [toolCallId, setToolCallId] = useState('');
+  const [result, setResult] = useState<readonly PlanInfo[] | null>(null);
+  const [error, setError] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+
+  // A plan belongs to one agent's timeline — stale results from another
+  // session/agent are misleading, so reset on switch.
+  useEffect(() => {
+    setResult(null);
+    setError(null);
+  }, [sessionId, agentId]);
+
+  const query = async () => {
+    setLoading(true);
+    try {
+      setError(null);
+      const token = config.token.trim();
+      const messages = await fetchFullHistory({
+        baseUrl,
+        token: token === '' ? undefined : token,
+        sessionId,
+        agentId,
+      });
+      const id = toolCallId.trim();
+      setResult(projectPlans(messages, id === '' ? undefined : id));
+    } catch (error) {
+      setResult(null);
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mb-3 rounded-lg border border-neutral-800 bg-neutral-950/40">
+      <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
+        <span className="text-[12px] font-medium text-neutral-200">Plan lookup</span>
+        <Badge tone="sky">{agentId}</Badge>
+      </div>
+      <div className="px-3 py-2">
+        <div className="flex gap-1.5">
+          <input
+            className="min-w-0 flex-1 rounded border border-neutral-700 bg-neutral-950 px-2 py-1 font-mono text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+            placeholder="tool_call_id (empty = all plans)"
+            value={toolCallId}
+            onChange={(e) => setToolCallId(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') void query();
+            }}
+          />
+          <ActionButton disabled={loading} onClick={() => void query()}>
+            {loading ? 'Loading…' : 'Query'}
+          </ActionButton>
+        </div>
+        {error !== null ? (
+          <div className="mt-2">
+            <ErrorLine error={error} />
+          </div>
+        ) : null}
+        {result !== null ? (
+          result.length === 0 ? (
+            <div className="mt-2 text-[11px] text-neutral-600 italic">no plans on this agent</div>
+          ) : (
+            result.map((entry) => <PlanEntryView key={entry.toolCallId} entry={entry} />)
+          )
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function PlanEntryView({ entry }: { entry: PlanInfo }) {
+  const review = entry.review;
+  return (
+    <div className="mt-2">
+      <div className="mb-1.5 flex flex-wrap items-center gap-1.5">
+        <span className="font-mono text-[10px] text-neutral-400 select-all">
+          {entry.toolCallId}
+        </span>
+        <Badge tone="neutral">{entry.source}</Badge>
+        {review !== undefined ? (
+          <Badge
+            tone={
+              review.state === 'approved' ? 'green' : review.state === 'pending' ? 'amber' : 'red'
+            }
+          >
+            {review.state}
+          </Badge>
+        ) : null}
+        <span className="font-mono text-[10px] text-neutral-500">{entry.turnId}</span>
+      </div>
+      {entry.path !== undefined ? (
+        <div className="mb-1 break-all font-mono text-[10px] text-neutral-500">{entry.path}</div>
+      ) : null}
+      {review?.selectedOption !== undefined ? (
+        <div className="mb-1 text-[11px] text-neutral-400">
+          <span className="text-neutral-600">selected: </span>
+          {review.selectedOption}
+        </div>
+      ) : null}
+      {review?.feedback !== undefined ? (
+        <div className="mb-1 text-[11px] text-neutral-400">
+          <span className="text-neutral-600">feedback: </span>
+          {review.feedback}
+        </div>
+      ) : null}
+      {entry.options !== undefined ? (
+        <div className="mb-1 flex flex-wrap gap-1.5">
+          {entry.options.map((option) => (
+            <Badge key={option.label} tone="violet">
+              {option.label}
+            </Badge>
+          ))}
+        </div>
+      ) : null}
+      <pre className="max-h-72 overflow-auto rounded border border-neutral-800 bg-neutral-950 p-2 text-[11px] whitespace-pre-wrap text-neutral-300">
+        {entry.plan}
+      </pre>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/InteractionsCard.tsx b/apps/kimi-inspect/src/components/InteractionsCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..64ce4dded4a10ee2bfad29c01aa180d5092d760e
--- /dev/null
+++ b/apps/kimi-inspect/src/components/InteractionsCard.tsx
@@ -0,0 +1,209 @@
+/**
+ * Pending interactions card (approvals / questions) of one session — fetched
+ * on demand over the public REST surface (`/api/v1/sessions/{id}/approvals`
+ * and `.../questions`): the engine's interaction kernel is a process-global
+ * singleton with no debug channel, and the session `interactions` push
+ * stream went away with `/api/v2/ws`, so the card refreshes only when Load
+ * is clicked.
+ */
+
+import { useState } from 'react';
+
+import { useConnection } from '../connection';
+import {
+  answerQuestion,
+  decideApproval,
+  dismissQuestion,
+  listPendingApprovals,
+  listPendingQuestions,
+  type QuestionAnswerWire,
+  type QuestionWire,
+} from '../interactions/api';
+import { ActionButton, Badge, ErrorLine, JsonView } from '../ui';
+
+interface PendingInteraction {
+  readonly id: string;
+  /** Known kinds: 'approval' | 'question'. */
+  readonly kind: string;
+  readonly payload: Record<string, unknown>;
+}
+
+export function InteractionsCard({ sessionId }: { sessionId: string }) {
+  const { config, baseUrl } = useConnection();
+  const [pending, setPending] = useState<readonly PendingInteraction[]>([]);
+  const [error, setError] = useState<unknown>(null);
+  const api = { baseUrl, token: config.token, sessionId };
+
+  const reload = async () => {
+    try {
+      setError(null);
+      const [approvals, questions] = await Promise.all([
+        listPendingApprovals(api),
+        listPendingQuestions(api),
+      ]);
+      setPending([
+        ...approvals.map((p) => ({
+          id: p.approval_id,
+          kind: 'approval',
+          payload: {
+            toolName: p.tool_name,
+            action: p.action,
+            display: p.tool_input_display,
+          },
+        })),
+        ...questions.map((p) => ({
+          id: p.question_id,
+          kind: 'question',
+          payload: p as unknown as Record<string, unknown>,
+        })),
+      ]);
+    } catch (error) {
+      setError(error);
+    }
+  };
+
+  const decide = async (id: string, decision: 'approved' | 'rejected') => {
+    try {
+      await decideApproval(api, id, decision);
+      await reload();
+    } catch (error) {
+      setError(error);
+    }
+  };
+  const answer = async (id: string, answers: Readonly<Record<string, QuestionAnswerWire>>) => {
+    try {
+      await answerQuestion(api, id, answers, 'click');
+      await reload();
+    } catch (error) {
+      setError(error);
+    }
+  };
+  const dismiss = async (id: string) => {
+    try {
+      await dismissQuestion(api, id);
+      await reload();
+    } catch (error) {
+      setError(error);
+    }
+  };
+
+  return (
+    <div className="mb-3 rounded-lg border border-amber-900/50 bg-amber-950/20">
+      <div className="flex items-center justify-between border-b border-amber-900/40 px-3 py-2">
+        <span className="text-[12px] font-medium text-amber-200">
+          Pending interactions {pending.length > 0 ? `(${pending.length})` : ''}
+        </span>
+        <ActionButton onClick={() => void reload()}>Load</ActionButton>
+      </div>
+      <div className="px-3 py-2">
+        {error !== null ? (
+          <div className="mb-2">
+            <ErrorLine error={error} />
+          </div>
+        ) : null}
+        {pending.length === 0 ? (
+          <div className="text-[11px] text-neutral-600 italic">
+            nothing pending (click Load to check)
+          </div>
+        ) : (
+          pending.map((item) => (
+            <div
+              key={item.id}
+              className="mb-2 rounded border border-neutral-800 bg-neutral-950/60 p-2"
+            >
+              <div className="mb-1 flex items-center gap-2">
+                <Badge tone="amber">{item.kind}</Badge>
+                <span className="font-mono text-[10px] text-neutral-500">{item.id}</span>
+              </div>
+              {item.kind === 'approval' ? (
+                <>
+                  <div className="mb-1.5 text-[11px] text-neutral-300">
+                    <span className="text-neutral-500">tool </span>
+                    {payloadField(item.payload, 'toolName', '?')}
+                    <span className="text-neutral-500"> · </span>
+                    {payloadField(item.payload, 'action', '')}
+                  </div>
+                  <JsonView data={item.payload['display'] ?? item.payload} />
+                  <div className="mt-2 flex gap-1.5">
+                    <ActionButton onClick={() => void decide(item.id, 'approved')}>
+                      Approve
+                    </ActionButton>
+                    <ActionButton danger onClick={() => void decide(item.id, 'rejected')}>
+                      Reject
+                    </ActionButton>
+                  </div>
+                </>
+              ) : item.kind === 'question' ? (
+                <QuestionView
+                  wire={item.payload as unknown as QuestionWire}
+                  onAnswer={(answers) => void answer(item.id, answers)}
+                  onDismiss={() => void dismiss(item.id)}
+                />
+              ) : (
+                <JsonView data={item.payload} />
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function QuestionView({
+  wire,
+  onAnswer,
+  onDismiss,
+}: {
+  wire: QuestionWire;
+  onAnswer: (answers: Readonly<Record<string, QuestionAnswerWire>>) => void;
+  onDismiss: () => void;
+}) {
+  return (
+    <>
+      {wire.questions.map((q) => (
+        <div key={q.id} className="mb-1.5">
+          <div className="mb-1 text-[11px] text-neutral-300">{q.question}</div>
+          <div className="flex flex-wrap gap-1.5">
+            {q.options.map((opt) => (
+              <ActionButton
+                key={opt.id}
+                onClick={() => onAnswer({ [q.id]: { kind: 'single', option_id: opt.id } })}
+              >
+                {opt.label}
+              </ActionButton>
+            ))}
+            {q.allow_other === false ? null : (
+              <ActionButton
+                onClick={() => {
+                  const raw = window.prompt(q.question);
+                  if (raw !== null) onAnswer({ [q.id]: { kind: 'other', text: raw } });
+                }}
+              >
+                Other…
+              </ActionButton>
+            )}
+          </div>
+        </div>
+      ))}
+      {wire.questions.length === 0 ? <JsonView data={wire} /> : null}
+      <div className="mt-1.5">
+        <ActionButton danger onClick={onDismiss}>
+          Dismiss
+        </ActionButton>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Render a wire payload field as display text: strings pass through,
+ * numbers/booleans are stringified, anything else (or missing) falls back —
+ * never "[object Object]".
+ */
+function payloadField(payload: Record<string, unknown>, key: string, fallback: string): string {
+  const value = payload[key];
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  return fallback;
+}
diff --git a/apps/kimi-inspect/src/components/ModelCatalogView.tsx b/apps/kimi-inspect/src/components/ModelCatalogView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c7d9f95fccef3da10a56ff73db8afa23162721e2
--- /dev/null
+++ b/apps/kimi-inspect/src/components/ModelCatalogView.tsx
@@ -0,0 +1,413 @@
+/**
+ * Model Catalog view — providers with their models and the default marker:
+ *
+ *   left:   every configured model (provider-grouped), its highlight synced
+ *           both ways with the center column — scrolling the center moves the
+ *           highlight (scrollspy), clicking an entry jumps the center to that
+ *           model;
+ *   center: one section per model with ping and session creation actions.
+ *
+ * All data goes through the channel layer — `IModelCatalog` +
+ * `IModelService` for the list — over the `/api/v1/debug` RPC surface.
+ * There is no live event push; the queries refresh on a slow poll.
+ */
+
+import { IAgentProfileService } from '@moonshot-ai/agent-core-v2/agent/profile/profile';
+import { ISessionManager } from '@moonshot-ai/agent-core-v2/app/sessionManager/sessionManager';
+import type { TokenUsage } from '@moonshot-ai/agent-core-v2/human/llm/usage';
+import {
+  IModelCatalog,
+  type ModelCatalogItem,
+  type ModelPingResult,
+  type ProviderCatalogItem,
+} from '@moonshot-ai/agent-core-v2/llm-adapter/model/catalog';
+import { IModelService } from '@moonshot-ai/agent-core-v2/llm-adapter/model/model';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+
+import { useConnection } from '../connection';
+import { ActionButton, Badge, ErrorLine, errorMessage } from '../ui';
+
+interface FlatEntry {
+  readonly item: ModelCatalogItem;
+  readonly provider?: ProviderCatalogItem;
+}
+
+export function ModelCatalogView({
+  onOpenSession,
+}: {
+  readonly onOpenSession: (sessionId: string) => void;
+}) {
+  const { klient } = useConnection();
+  const queryClient = useQueryClient();
+
+  const providers = useQuery({
+    queryKey: ['modelCatalog', 'providers'],
+    queryFn: () => klient.core(IModelCatalog).listProviders(),
+    refetchInterval: 15_000,
+  });
+  const models = useQuery({
+    queryKey: ['modelCatalog', 'models'],
+    queryFn: () => klient.core(IModelCatalog).listModels(),
+    refetchInterval: 15_000,
+  });
+  // Raw records carry the structured `providerId` grouping fallback.
+  const records = useQuery({
+    queryKey: ['modelCatalog', 'records'],
+    queryFn: () => klient.core(IModelService).list(),
+    refetchInterval: 15_000,
+  });
+
+  const providerList = providers.data ?? [];
+  const items = models.data ?? [];
+  const recordMap = records.data ?? {};
+
+  // Flatten the provider grouping into one ordered model list (listed
+  // providers first, then models whose group matches no listed provider).
+  const groupKeyOf = (item: ModelCatalogItem): string => {
+    const record = recordMap[item.model];
+    return record?.providerId ?? record?.provider ?? item.provider;
+  };
+  const byGroup = new Map<string, ModelCatalogItem[]>();
+  for (const item of items) {
+    const key = groupKeyOf(item);
+    const group = byGroup.get(key) ?? [];
+    group.push(item);
+    byGroup.set(key, group);
+  }
+  const listedIds = new Set(providerList.map((p) => p.id));
+  const extraGroups = [...byGroup.keys()].filter((key) => !listedIds.has(key));
+  const flatEntries: FlatEntry[] = [
+    ...providerList.flatMap((provider) =>
+      (byGroup.get(provider.id) ?? []).map((item) => ({ item, provider }) as const),
+    ),
+    ...extraGroups.flatMap((key) => (byGroup.get(key) ?? []).map((item) => ({ item }) as const)),
+  ];
+
+  // --- two-way sync between the left list and the center scroll ----------
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const sectionRefs = useRef(new Map<string, HTMLElement>());
+  const itemRefs = useRef(new Map<string, HTMLElement>());
+
+  // Default the highlight to the first model once data arrives, and follow
+  // the list when the highlighted model disappears (config changed).
+  useEffect(() => {
+    if (flatEntries.length === 0) return;
+    if (activeId === null || !flatEntries.some((entry) => entry.item.model === activeId)) {
+      setActiveId(flatEntries[0]!.item.model);
+    }
+  }, [activeId, flatEntries]);
+
+  // Center scroll → left highlight (scrollspy). Computed synchronously — a
+  // rAF throttle would stall in background tabs and lag real scrolling; the
+  // walk over the entry list is trivial at this scale.
+  const handleCenterScroll = () => {
+    const container = scrollRef.current;
+    if (container === null) return;
+    const top = container.scrollTop + 12;
+    let current: string | null = null;
+    for (const entry of flatEntries) {
+      const el = sectionRefs.current.get(entry.item.model);
+      if (el === undefined) continue;
+      if (el.offsetTop <= top) current = entry.item.model;
+      else break;
+    }
+    if (current !== null) setActiveId((prev) => (prev === current ? prev : current));
+  };
+
+  // Left highlight → keep the highlighted entry visible inside the left list
+  // (manual scroll: scrollIntoView would also move the center column).
+  useEffect(() => {
+    if (activeId === null) return;
+    const list = listRef.current;
+    const el = itemRefs.current.get(activeId);
+    if (list === null || el === undefined) return;
+    const top = el.offsetTop;
+    const bottom = top + el.offsetHeight;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) {
+      list.scrollTop = bottom - list.clientHeight;
+    }
+  }, [activeId]);
+
+  const jumpTo = (modelId: string) => {
+    setActiveId(modelId);
+    // 'instant', not 'smooth': smooth scrolling is frame-driven and stalls in
+    // occluded tabs, leaving the center column stranded mid-jump.
+    sectionRefs.current.get(modelId)?.scrollIntoView({ behavior: 'instant', block: 'start' });
+  };
+
+  const loading = providers.isLoading || models.isLoading || records.isLoading;
+  const error = providers.error ?? models.error ?? records.error;
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center gap-2 border-b border-neutral-800 px-4 py-2">
+        <span className="text-[12px] font-semibold uppercase tracking-wider text-neutral-400">
+          Model Catalog
+        </span>
+        <span className="text-[11px] text-neutral-600">
+          {providerList.length} providers · {items.length} models
+        </span>
+        <div className="flex-1" />
+        <ActionButton onClick={() => queryClient.invalidateQueries({ queryKey: ['modelCatalog'] })}>
+          Refresh
+        </ActionButton>
+      </div>
+      {error !== null ? (
+        <div className="px-4 py-2">
+          <ErrorLine error={error} />
+        </div>
+      ) : null}
+      {loading ? <div className="px-4 py-2 text-[11px] text-neutral-600">loading…</div> : null}
+      {!loading && flatEntries.length === 0 ? (
+        <div className="px-4 py-2 text-[11px] text-neutral-600">
+          no providers or models configured
+        </div>
+      ) : null}
+      <div className="flex min-h-0 flex-1">
+        {/* left: the model list */}
+        <div
+          ref={listRef}
+          className="relative w-72 shrink-0 overflow-y-auto border-r border-neutral-800"
+        >
+          <LeftList entries={flatEntries} activeId={activeId} onJump={jumpTo} itemRefs={itemRefs} />
+        </div>
+        {/* center: one section per model */}
+        <div
+          ref={scrollRef}
+          className="relative min-w-0 flex-1 overflow-y-auto"
+          onScroll={handleCenterScroll}
+        >
+          {flatEntries.map((entry) => (
+            <ModelSection
+              key={entry.item.model}
+              entry={entry}
+              onOpenSession={onOpenSession}
+              registerRef={(el) => {
+                if (el === null) sectionRefs.current.delete(entry.item.model);
+                else sectionRefs.current.set(entry.item.model, el);
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// left column
+// ---------------------------------------------------------------------------
+
+function LeftList({
+  entries,
+  activeId,
+  onJump,
+  itemRefs,
+}: {
+  readonly entries: readonly FlatEntry[];
+  readonly activeId: string | null;
+  readonly onJump: (modelId: string) => void;
+  readonly itemRefs: React.RefObject<Map<string, HTMLElement>>;
+}) {
+  let lastGroup: string | undefined;
+  return (
+    <div className="py-1">
+      {entries.map((entry) => {
+        const groupId = entry.provider?.id ?? '(no provider)';
+        const header = groupId !== lastGroup ? groupId : undefined;
+        lastGroup = groupId;
+        const isDefault = entry.provider?.default_model === entry.item.model;
+        const active = entry.item.model === activeId;
+        return (
+          <div key={entry.item.model}>
+            {header !== undefined ? (
+              <div className="flex items-center gap-1.5 px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+                <span className="truncate">{header}</span>
+                {entry.provider !== undefined ? (
+                  <Badge
+                    tone={
+                      entry.provider.status === 'connected'
+                        ? 'green'
+                        : entry.provider.status === 'error'
+                          ? 'red'
+                          : 'amber'
+                    }
+                  >
+                    {entry.provider.status}
+                  </Badge>
+                ) : null}
+              </div>
+            ) : null}
+            <div
+              ref={(el) => {
+                if (el === null) itemRefs.current.delete(entry.item.model);
+                else itemRefs.current.set(entry.item.model, el);
+              }}
+              className={`cursor-pointer px-3 py-1.5 ${
+                active ? 'bg-sky-950/60' : 'hover:bg-neutral-800/60'
+              }`}
+              onClick={() => {
+                onJump(entry.item.model);
+              }}
+            >
+              <div className="flex items-center gap-1.5">
+                <span
+                  className={`min-w-0 flex-1 truncate font-mono text-[11px] ${
+                    active ? 'text-neutral-100' : 'text-neutral-300'
+                  }`}
+                  title={entry.item.model}
+                >
+                  {entry.item.model}
+                </span>
+                {isDefault ? <Badge tone="sky">default</Badge> : null}
+              </div>
+              {entry.item.display_name !== undefined &&
+              entry.item.display_name !== entry.item.model ? (
+                <div className="truncate text-[10px] text-neutral-600">
+                  {entry.item.display_name}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// center column
+// ---------------------------------------------------------------------------
+
+function ModelSection({
+  entry,
+  onOpenSession,
+  registerRef,
+}: {
+  readonly entry: FlatEntry;
+  readonly onOpenSession: (sessionId: string) => void;
+  readonly registerRef: (el: HTMLElement | null) => void;
+}) {
+  const { klient, baseUrl, config } = useConnection();
+  const { item, provider } = entry;
+  const [ping, setPing] = useState<
+    | { readonly status: 'idle' | 'running' }
+    | { readonly status: 'done'; readonly result: ModelPingResult }
+  >({ status: 'idle' });
+  const [creating, setCreating] = useState(false);
+  const [sessionError, setSessionError] = useState<unknown>(null);
+
+  const runPing = async () => {
+    setPing({ status: 'running' });
+    try {
+      const result = await klient.core(IModelCatalog).ping(item.model);
+      setPing({ status: 'done', result });
+    } catch (error) {
+      setPing({
+        status: 'done',
+        result: { ok: false, durationMs: 0, error: errorMessage(error) },
+      });
+    }
+  };
+
+  // Session creation itself is v1 REST (klient is v2-only); resume + model
+  // selection then go through the channel layer before opening the chat tab.
+  const createSession = async () => {
+    const cwd = window.prompt('Working directory for the new session:', '');
+    if (cwd === null || cwd.trim() === '') return;
+    setCreating(true);
+    setSessionError(null);
+    try {
+      const headers: Record<string, string> = { 'content-type': 'application/json' };
+      if (config.token.trim() !== '') headers['authorization'] = `Bearer ${config.token.trim()}`;
+      const res = await fetch(`${baseUrl}/api/v1/sessions`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ metadata: { cwd: cwd.trim() } }),
+      });
+      const envelope = (await res.json()) as { code: number; msg: string; data: { id: string } };
+      if (envelope.code !== 0) throw new Error(envelope.msg);
+      const sessionId = envelope.data.id;
+      await klient.core(ISessionManager).resume(sessionId);
+      await klient
+        .session(sessionId)
+        .agent('main')
+        .service(IAgentProfileService)
+        .setModel(item.model);
+      onOpenSession(sessionId);
+    } catch (error) {
+      setSessionError(error);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <section ref={registerRef} className="border-b border-neutral-800 px-4 py-3">
+      <header className="mb-1 flex flex-wrap items-center gap-2">
+        <span className="font-mono text-[12px] font-semibold text-neutral-100">{item.model}</span>
+        {provider?.default_model === item.model ? <Badge tone="sky">default</Badge> : null}
+        <span className="text-[10px] text-neutral-600">{provider?.id ?? '(no provider)'}</span>
+        <ActionButton disabled={ping.status === 'running'} onClick={runPing}>
+          {ping.status === 'running' ? 'pinging…' : 'Ping'}
+        </ActionButton>
+        <ActionButton disabled={creating} onClick={createSession}>
+          {creating ? 'creating…' : '+ Session'}
+        </ActionButton>
+        <div className="flex-1" />
+        {(item.capabilities ?? []).map((capability) => (
+          <Badge key={capability}>{capability}</Badge>
+        ))}
+        {item.default_effort !== undefined ? (
+          <Badge tone="neutral">effort: {item.default_effort}</Badge>
+        ) : null}
+        <span className="shrink-0 font-mono text-[11px] text-neutral-500">
+          {formatContextSize(item.max_context_size)}
+        </span>
+      </header>
+      {ping.status === 'done' ? (
+        <div className="mb-1 flex flex-wrap items-center gap-2 border border-neutral-800/60 bg-neutral-900/50 px-2 py-1">
+          {ping.result.ok ? (
+            <>
+              <Badge tone="green">pong · {ping.result.durationMs}ms</Badge>
+              {ping.result.text !== undefined && ping.result.text !== '' ? (
+                <span className="text-[11px] text-neutral-300">{ping.result.text}</span>
+              ) : null}
+              {ping.result.usage !== undefined ? (
+                <span className="text-[10px] text-neutral-600">{usageLine(ping.result.usage)}</span>
+              ) : null}
+              {ping.result.finishReason !== undefined ? (
+                <span className="text-[10px] text-neutral-600">{ping.result.finishReason}</span>
+              ) : null}
+            </>
+          ) : (
+            <>
+              <Badge tone="red">ping failed · {ping.result.durationMs}ms</Badge>
+              <span className="text-[11px] text-red-400">{ping.result.error}</span>
+            </>
+          )}
+        </div>
+      ) : null}
+      {sessionError !== null ? <ErrorLine error={sessionError} /> : null}
+    </section>
+  );
+}
+
+function usageLine(usage: TokenUsage): string {
+  const input = usage.inputOther + usage.inputCacheRead + usage.inputCacheCreation;
+  return `in ${input} · out ${usage.output}`;
+}
+
+function formatContextSize(size: number): string {
+  if (size <= 0) return '—';
+  if (size >= 1_000_000) {
+    const millions = size / 1_000_000;
+    return `${millions.toFixed(Number.isInteger(millions) ? 0 : 1)}M ctx`;
+  }
+  if (size >= 1_000) return `${Math.round(size / 1_000)}k ctx`;
+  return `${size} ctx`;
+}
diff --git a/apps/kimi-inspect/src/components/NavRail.tsx b/apps/kimi-inspect/src/components/NavRail.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6d67a2aafdb7d641d8f21126a4705ea1677ab58c
--- /dev/null
+++ b/apps/kimi-inspect/src/components/NavRail.tsx
@@ -0,0 +1,152 @@
+/**
+ * Left icon rail — the app-level view switcher. Icon-only by design; view
+ * names live in tooltips. Adding a view is one `VIEWS` entry here plus its
+ * render branch in `App`.
+ */
+
+import type { ReactNode } from 'react';
+
+export type AppView =
+  | 'chat'
+  | 'search'
+  | 'models'
+  | 'services'
+  | 'workspace'
+  | 'suggest'
+  | 'bash'
+  | 'di';
+
+interface ViewDef {
+  readonly id: AppView;
+  readonly title: string;
+  readonly icon: ReactNode;
+}
+
+const iconProps = {
+  width: 18,
+  height: 18,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const;
+
+const VIEWS: readonly ViewDef[] = [
+  {
+    id: 'chat',
+    title: 'Chat',
+    icon: (
+      <svg {...iconProps}>
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'search',
+    title: 'Search',
+    icon: (
+      <svg {...iconProps}>
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.3-4.3" />
+      </svg>
+    ),
+  },
+  {
+    id: 'models',
+    title: 'Model Catalog',
+    icon: (
+      <svg {...iconProps}>
+        <path d="M12 2 2 7l10 5 10-5-10-5z" />
+        <path d="m2 17 10 5 10-5" />
+        <path d="m2 12 10 5 10-5" />
+      </svg>
+    ),
+  },
+  {
+    id: 'services',
+    title: 'App Services',
+    icon: (
+      <svg {...iconProps}>
+        <rect x="2" y="2" width="20" height="8" rx="2" />
+        <rect x="2" y="14" width="20" height="8" rx="2" />
+        <line x1="6" y1="6" x2="6.01" y2="6" />
+        <line x1="6" y1="18" x2="6.01" y2="18" />
+      </svg>
+    ),
+  },
+  {
+    id: 'workspace',
+    title: 'Workspace Runtime',
+    icon: (
+      <svg {...iconProps}>
+        <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'suggest',
+    title: 'Filesystem Suggest',
+    icon: (
+      <svg {...iconProps}>
+        <path d="M4 4h6l2 2h8v14H4z" />
+        <path d="m9 14 2 2 4-4" />
+      </svg>
+    ),
+  },
+  {
+    id: 'bash',
+    title: 'Bash Parser',
+    icon: (
+      <svg {...iconProps}>
+        <polyline points="4 17 10 11 4 5" />
+        <line x1="12" y1="19" x2="20" y2="19" />
+      </svg>
+    ),
+  },
+  {
+    id: 'di',
+    title: 'DI',
+    icon: (
+      <svg {...iconProps}>
+        <circle cx="18" cy="5" r="3" />
+        <circle cx="6" cy="12" r="3" />
+        <circle cx="18" cy="19" r="3" />
+        <line x1="8.6" y1="10.5" x2="15.4" y2="6.5" />
+        <line x1="8.6" y1="13.5" x2="15.4" y2="17.5" />
+      </svg>
+    ),
+  },
+];
+
+export function NavRail({
+  view,
+  onChange,
+}: {
+  readonly view: AppView;
+  readonly onChange: (view: AppView) => void;
+}) {
+  return (
+    <nav className="flex w-11 shrink-0 flex-col items-center gap-1 border-r border-neutral-800 py-2">
+      {VIEWS.map((v) => (
+        <button
+          key={v.id}
+          type="button"
+          title={v.title}
+          aria-label={v.title}
+          onClick={() => {
+            onChange(v.id);
+          }}
+          className={`rounded-md p-2 transition-colors ${
+            view === v.id
+              ? 'bg-neutral-800 text-sky-400'
+              : 'text-neutral-500 hover:bg-neutral-800/60 hover:text-neutral-300'
+          }`}
+        >
+          {v.icon}
+        </button>
+      ))}
+    </nav>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/RightPanel.tsx b/apps/kimi-inspect/src/components/RightPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..67cf31ee444b9e566111f92d6d0b934393dde449
--- /dev/null
+++ b/apps/kimi-inspect/src/components/RightPanel.tsx
@@ -0,0 +1,105 @@
+/**
+ * Right dock — the single right-hand column of the chat view. Merges what
+ * used to be three separate columns (the transcript audit panel docked
+ * inside the chat view, the agent inspector on the far right, and the
+ * session pane next to the session list) into one tabbed column: `Audit`
+ * replays how the visible transcript store was built, entry by entry;
+ * `Agent` hosts the agent switcher, the Plan lookup card, and the agent
+ * Service panels; `State` reads the active agent's registered plain-data
+ * state through `IAgentStateService.snapshot()`; `Session` embeds
+ * `SessionPane` (session Services / State tabs). Tabs switch with `hidden`
+ * instead of unmounting, so panel-local state (the audit timeline position,
+ * Plan lookup input/results, expanded Service panels, the state tree's open
+ * rows) survives tab switches.
+ */
+
+import { IAgentStateService } from '@moonshot-ai/agent-core-v2/agent/state/agentState';
+import { useState } from 'react';
+
+import type { AuditTrail } from '../audit/trail';
+import { useConnection } from '../connection';
+import { Badge } from '../ui';
+import { AuditPanel } from './audit/AuditPanel';
+import { Inspector } from './Inspector';
+import { SessionPane } from './SessionPane';
+import { StateCard } from './StateCard';
+
+type Tab = 'audit' | 'agent' | 'state' | 'session';
+
+export function RightPanel({
+  sessionId,
+  agentId,
+  onAgentChange,
+  ready,
+  trail,
+}: {
+  sessionId: string | null;
+  agentId: string;
+  onAgentChange: (agentId: string) => void;
+  ready: boolean;
+  /** The chat view's audit trail; null until its transcript channel exists. */
+  trail: AuditTrail | null;
+}) {
+  const { klient } = useConnection();
+  const [tab, setTab] = useState<Tab>('audit');
+
+  return (
+    <div className="flex h-full w-[440px] shrink-0 flex-col border-l border-neutral-800 bg-neutral-900/30">
+      <div className="flex border-b border-neutral-800 text-[11px]">
+        {(['audit', 'agent', 'state', 'session'] as const).map((t) => (
+          <button
+            key={t}
+            className={`flex-1 px-2 py-2 font-medium uppercase tracking-wider ${
+              tab === t ? 'bg-neutral-800 text-sky-400' : 'text-neutral-500 hover:text-neutral-300'
+            }`}
+            onClick={() => setTab(t)}
+          >
+            {t === 'audit' ? 'Audit' : t === 'agent' ? 'Agent' : t === 'state' ? 'State' : 'Session'}
+          </button>
+        ))}
+      </div>
+      <div className={tab === 'audit' ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>
+        {trail !== null ? (
+          <AuditPanel trail={trail} />
+        ) : (
+          <div className="p-3 text-[12px] text-neutral-600">
+            {sessionId === null
+              ? 'No session selected.'
+              : 'Loading transcript — the audit trail appears once the channel is up.'}
+          </div>
+        )}
+      </div>
+      <div className={tab === 'agent' ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>
+        <Inspector
+          sessionId={sessionId}
+          agentId={agentId}
+          onAgentChange={onAgentChange}
+          ready={ready}
+        />
+      </div>
+      <div className={tab === 'state' ? 'min-h-0 flex-1 overflow-y-auto' : 'hidden'}>
+        <div className="p-3">
+          {sessionId === null || !ready ? (
+            <div className="text-[12px] text-neutral-600">
+              {sessionId === null ? 'No session selected.' : 'Loading session…'}
+            </div>
+          ) : (
+            <StateCard
+              id={`${sessionId}/${agentId}`}
+              queryKey={['agentState', sessionId, agentId]}
+              title="Agent state"
+              label="agentStateService"
+              badge={<Badge tone="sky">{agentId}</Badge>}
+              fetchSnapshot={() =>
+                klient.session(sessionId).agent(agentId).service(IAgentStateService).snapshot()
+              }
+            />
+          )}
+        </div>
+      </div>
+      <div className={tab === 'session' ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>
+        <SessionPane sessionId={sessionId} ready={ready} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/SearchView.tsx b/apps/kimi-inspect/src/components/SearchView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b76dd3da36b0284436fa670c77324890910ee1b6
--- /dev/null
+++ b/apps/kimi-inspect/src/components/SearchView.tsx
@@ -0,0 +1,254 @@
+/**
+ * Search view — the global cross-session message search (`POST /api/v1/search`).
+ * Full width like the other non-chat views. Results are pageable (Load more);
+ * clicking a hit hands it to the app shell (`onOpenResult`), which switches
+ * to the chat view at the hit's session / agent / turn / step.
+ */
+
+import { useState } from 'react';
+
+import { useConnection } from '../connection';
+import { fetchSearchPage, type SearchHit, type SearchIndexState } from '../search/api';
+import { ActionButton, Badge, ErrorLine, relTime } from '../ui';
+
+type RoleFilter = 'all' | 'user' | 'assistant' | 'title';
+type SortOrder = 'score' | 'time_desc' | 'time_asc';
+type SearchMode = 'terms' | 'literal';
+
+const PAGE_SIZE = 20;
+
+interface ExecutedSearch {
+  readonly query: string;
+  readonly role?: 'user' | 'assistant' | 'title' | undefined;
+  readonly sort: SortOrder;
+  readonly mode: SearchMode;
+  readonly items: readonly SearchHit[];
+  readonly hasMore: boolean;
+  readonly pageToken?: string | undefined;
+  readonly incomplete?: 'candidate_cap' | undefined;
+  readonly source?: 'live' | 'index' | undefined;
+  readonly indexState: SearchIndexState;
+}
+
+export function SearchView({ onOpenResult }: { onOpenResult: (hit: SearchHit) => void }) {
+  const { baseUrl, config } = useConnection();
+  const [input, setInput] = useState('');
+  const [role, setRole] = useState<RoleFilter>('all');
+  const [sort, setSort] = useState<SortOrder>('score');
+  const [exact, setExact] = useState(false);
+  const [result, setResult] = useState<ExecutedSearch | null>(null);
+  const [searching, setSearching] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+
+  const runSearch = async () => {
+    const query = input.trim();
+    if (query === '' || searching) return;
+    setSearching(true);
+    setError(null);
+    try {
+      const token = config.token.trim();
+      const mode: SearchMode = exact ? 'literal' : 'terms';
+      const page = await fetchSearchPage({
+        baseUrl,
+        token: token === '' ? undefined : token,
+        query,
+        role: role === 'all' ? undefined : role,
+        sort,
+        mode,
+        pageSize: PAGE_SIZE,
+      });
+      setResult({
+        query,
+        role: role === 'all' ? undefined : role,
+        sort,
+        mode,
+        items: page.items,
+        hasMore: page.hasMore,
+        pageToken: page.pageToken,
+        incomplete: page.incomplete,
+        source: page.source,
+        indexState: page.indexState,
+      });
+    } catch (error) {
+      setError(error);
+    } finally {
+      setSearching(false);
+    }
+  };
+
+  const loadMore = async () => {
+    if (result === null || !result.hasMore || loadingMore) return;
+    setLoadingMore(true);
+    setError(null);
+    try {
+      const token = config.token.trim();
+      const page = await fetchSearchPage({
+        baseUrl,
+        token: token === '' ? undefined : token,
+        query: result.query,
+        role: result.role,
+        sort: result.sort,
+        mode: result.mode,
+        pageSize: PAGE_SIZE,
+        pageToken: result.pageToken,
+      });
+      setResult({
+        ...result,
+        items: [...result.items, ...page.items],
+        hasMore: page.hasMore,
+        pageToken: page.pageToken,
+        incomplete: page.incomplete,
+        source: page.source,
+        indexState: page.indexState,
+      });
+    } catch (error) {
+      setError(error);
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col">
+      <div className="flex items-center gap-2 border-b border-neutral-800 px-4 py-2">
+        <input
+          className="w-96 rounded border border-neutral-700 bg-neutral-950 px-3 py-1.5 text-[13px] text-neutral-100 outline-none focus:border-sky-600"
+          placeholder="Search messages across all sessions…"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              void runSearch();
+            }
+          }}
+        />
+        <select
+          className="rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 text-[12px] text-neutral-300 outline-none"
+          value={role}
+          onChange={(e) => setRole(e.target.value as RoleFilter)}
+          title="Document role"
+        >
+          <option value="all">all roles</option>
+          <option value="user">user</option>
+          <option value="assistant">assistant</option>
+          <option value="title">title</option>
+        </select>
+        <select
+          className="rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 text-[12px] text-neutral-300 outline-none disabled:opacity-40"
+          value={sort}
+          onChange={(e) => setSort(e.target.value as SortOrder)}
+          title={exact ? 'Exact match always sorts by newest first' : 'Sort order'}
+          disabled={exact}
+        >
+          <option value="score">relevance</option>
+          <option value="time_desc">newest first</option>
+          <option value="time_asc">oldest first</option>
+        </select>
+        <label
+          className="flex cursor-pointer items-center gap-1.5 rounded border border-neutral-700 bg-neutral-950 px-2 py-1.5 text-[12px] text-neutral-300 select-none"
+          title="Substring match, case-insensitive (slower, matches symbols like C++)"
+        >
+          <input
+            type="checkbox"
+            className="accent-sky-600"
+            checked={exact}
+            onChange={(e) => setExact(e.target.checked)}
+          />
+          exact match
+        </label>
+        <ActionButton onClick={() => void runSearch()} disabled={searching || input.trim() === ''}>
+          {searching ? 'Searching…' : 'Search'}
+        </ActionButton>
+        {result !== null ? (
+          <span className="ml-2 text-[11px] text-neutral-600">
+            {result.indexState.state === 'building'
+              ? `index building (${result.indexState.indexedSessions}/${result.indexState.totalSessions} sessions) — results may be incomplete`
+              : `${result.indexState.documents} documents indexed (${result.indexState.state})`}
+          </span>
+        ) : null}
+        {result?.source !== undefined ? (
+          <span
+            className="ml-2"
+            title={
+              result.source === 'live'
+                ? 'searched the in-memory session transcript'
+                : 'searched the persisted search index'
+            }
+          >
+            <Badge tone={result.source === 'live' ? 'green' : 'neutral'}>
+              source: {result.source}
+            </Badge>
+          </span>
+        ) : null}
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-3">
+        {error !== null ? (
+          <div className="mb-3">
+            <ErrorLine error={error} />
+          </div>
+        ) : null}
+        {result === null ? (
+          <div className="text-[12px] text-neutral-600 italic">
+            Search user prompts, assistant replies and session titles across every session.
+          </div>
+        ) : result.items.length === 0 && !searching ? (
+          <div className="text-[12px] text-neutral-600 italic">No hits for “{result.query}”.</div>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {result.incomplete === 'candidate_cap' ? (
+              <div className="text-[11px] text-neutral-600">
+                too many matches — the candidate set was truncated, results may be incomplete
+              </div>
+            ) : null}
+            {result.items.map((hit, i) => (
+              <HitCard
+                key={`${hit.sessionId}/${hit.agentId}/${hit.time}/${i}`}
+                hit={hit}
+                onOpen={onOpenResult}
+              />
+            ))}
+            {result.hasMore ? (
+              <div className="mt-1 flex justify-center">
+                <ActionButton onClick={() => void loadMore()} disabled={loadingMore}>
+                  {loadingMore ? 'Loading…' : 'Load more'}
+                </ActionButton>
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function HitCard({ hit, onOpen }: { hit: SearchHit; onOpen: (hit: SearchHit) => void }) {
+  return (
+    <button
+      type="button"
+      className="w-full rounded-lg border border-neutral-800 bg-neutral-900/40 px-3 py-2 text-left transition-colors hover:border-sky-800 hover:bg-neutral-900"
+      onClick={() => onOpen(hit)}
+      title="Open in chat"
+    >
+      <div className="mb-1 flex flex-wrap items-center gap-2">
+        <span className="text-[12px] font-medium text-neutral-200">
+          {hit.sessionTitle !== '' ? hit.sessionTitle : '(untitled session)'}
+        </span>
+        <Badge tone={hit.role === 'user' ? 'sky' : hit.role === 'assistant' ? 'green' : 'violet'}>
+          {hit.role}
+        </Badge>
+        {hit.agentId !== '' ? <Badge tone="neutral">agent: {hit.agentId}</Badge> : null}
+        <span className="ml-auto text-[10px] text-neutral-600">{relTime(hit.time)}</span>
+      </div>
+      <div className="mb-1 whitespace-pre-wrap text-[12px] text-neutral-300">{hit.snippet}</div>
+      <div className="flex flex-wrap items-center gap-2 font-mono text-[10px] text-neutral-600">
+        <span>{hit.sessionId}</span>
+        {hit.turn !== undefined ? <span>t{hit.turn}</span> : null}
+        {hit.stepId !== undefined ? <span>{hit.stepId}</span> : null}
+        <span>score {hit.score.toFixed(2)}</span>
+      </div>
+    </button>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/ServerSwitcher.tsx b/apps/kimi-inspect/src/components/ServerSwitcher.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7158c14f2cfc9521db2438f614a41fe43b04ca3e
--- /dev/null
+++ b/apps/kimi-inspect/src/components/ServerSwitcher.tsx
@@ -0,0 +1,48 @@
+/**
+ * Header server switcher — lists the locally discovered kap-servers (dev
+ * middleware `/__inspect/servers`) and switches the connection between them
+ * without a reload. Discovered picks are not persisted as a full connection
+ * config; only the picked URL is remembered so a reload re-picks it while the
+ * instance is still alive. Falls back to a plain read-only URL when discovery
+ * is unavailable (static hosting) or finds no local servers.
+ */
+
+import { useConnection } from '../connection';
+import { useServerDiscovery } from '../servers';
+
+export function ServerSwitcher() {
+  const { baseUrl, connect } = useConnection();
+  const discovery = useServerDiscovery();
+  const data = discovery.data;
+  if (data === null || data === undefined || data.servers.length === 0) {
+    // No local discovery (static hosting / no servers): plain read-only URL.
+    return <span className="font-mono text-[10px] text-neutral-500">{baseUrl}</span>;
+  }
+  const current = data.servers.find((s) => s.url === baseUrl);
+  return (
+    <select
+      className="rounded border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 font-mono text-[10px] text-neutral-300 outline-none focus:border-sky-600"
+      title={`Local kap-servers (${data.home})`}
+      value={current?.id ?? '__custom'}
+      onChange={(e) => {
+        const target = data.servers.find((s) => s.id === e.target.value);
+        if (target === undefined || target.url === baseUrl) return;
+        connect(
+          { url: target.url, token: data.token ?? '' },
+          { persist: false, rememberServerUrl: target.url },
+        );
+      }}
+    >
+      {current === undefined ? (
+        <option value="__custom">custom: {baseUrl.replace(/^https?:\/\//, '')}</option>
+      ) : null}
+      {data.servers.map((s) => (
+        <option key={s.id} value={s.id}>
+          {s.url.replace(/^https?:\/\//, '')}
+          {s.pid !== undefined ? ` · pid ${s.pid}` : ''}
+          {s.source === 'proxy' ? ' · proxy' : ''}
+        </option>
+      ))}
+    </select>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/ServicePanels.tsx b/apps/kimi-inspect/src/components/ServicePanels.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..466a07fb1934f46df3a76d970face3596d14f748
--- /dev/null
+++ b/apps/kimi-inspect/src/components/ServicePanels.tsx
@@ -0,0 +1,805 @@
+/**
+ * Scope panels — the merged Service list for one wire scope (`app` /
+ * `session` / `agent`), shared by the chat inspector (session + agent tabs)
+ * and the standalone App Services rail view. The baseline is the dynamic
+ * channel list served by `GET /api/v1/debug/channels` (every wire-exposed
+ * Service with its methods), rendered by `DynamicServiceCard`; the
+ * handwritten descriptors in `panels.ts` override individual Services with
+ * curated cards (`ServiceCard`).
+ *
+ * Two layouts consume the same merged list (`useScopePanels`):
+ * - `ScopePanels`: a plain stacked card list (the chat inspector).
+ * - `ScopePanelsScrollspy`: a Postman-style three-pane layout — Service
+ *   list on the left with a fuzzy filter box, every Service's card
+ *   expanded (no collapsing) in one continuously scrolling column in the
+ *   middle (scroll position drives the left-side highlight, clicks scroll
+ *   the middle), and a request/response call history on the right fed by
+ *   recording proxies around every card. Card headers copy the Service
+ *   name on click (`CopyableName`).
+ *
+ * Everything here is fetch-on-demand (Load / Refresh buttons): the v2 event
+ * socket (`/api/v2/ws`) that used to push core/session/agent event streams
+ * was removed server-side, so there is no live push to render.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { fetchChannelDescriptors, type ChannelDescriptor, type ChannelScope } from '../channel';
+import { useConnection } from '../connection';
+import {
+  AGENT_PANELS,
+  CORE_PANELS,
+  SESSION_PANELS,
+  call,
+  type AnyService,
+  type ServicePanelDef,
+} from '../panels';
+import { ActionButton, Badge, ErrorLine, JsonView, errorMessage, relTime } from '../ui';
+import { buildArgs, fieldKey, parseParamFields, type ParamField } from './methodArgs';
+
+const PANEL_OVERRIDES: ReadonlyMap<string, ServicePanelDef> = new Map(
+  [...CORE_PANELS, ...SESSION_PANELS, ...AGENT_PANELS].map((def) => [def.id, def]),
+);
+
+/** One merged Service entry: the wire channel plus its curated override, if any. */
+interface ScopeEntry {
+  readonly name: string;
+  readonly channel?: ChannelDescriptor;
+  readonly def?: ServicePanelDef;
+}
+
+/** Load the full protocol list once per connection (every channel, 1:1). */
+function useChannels() {
+  const { klient } = useConnection();
+  return useQuery({
+    queryKey: ['channels', klient.baseUrl],
+    queryFn: () => fetchChannelDescriptors(klient),
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+}
+
+/**
+ * Merge the dynamic channel list with the handwritten overrides for one
+ * scope. When the channels endpoint is unavailable, fall back to the
+ * handwritten panels only.
+ */
+function useScopePanels(scope: ChannelScope) {
+  const channels = useChannels();
+  const entries = useMemo<readonly ScopeEntry[]>(() => {
+    const byName = new Map<string, ChannelDescriptor | undefined>();
+    if (channels.data !== undefined) {
+      for (const c of channels.data) {
+        if (c.scope === scope) byName.set(c.name, c);
+      }
+      // Keep overrides the introspection missed (e.g. server drift).
+      for (const def of PANEL_OVERRIDES.values()) {
+        if (def.scope === scope && !byName.has(def.id)) byName.set(def.id, undefined);
+      }
+    } else {
+      for (const def of PANEL_OVERRIDES.values()) {
+        if (def.scope === scope) byName.set(def.id, undefined);
+      }
+    }
+    return [...byName.entries()].map(([name, channel]) => ({
+      name,
+      channel,
+      def: PANEL_OVERRIDES.get(name),
+    }));
+  }, [channels.data, scope]);
+  return { entries, channels };
+}
+
+/**
+ * Render every Service of one scope as a plain stacked card list.
+ * `proxyFor` materializes the Service proxy for a channel name (null when
+ * the scope is not callable, e.g. no session selected); `onError` observes
+ * call failures (the agent switcher uses it to mark unloaded agents).
+ */
+export function ScopePanels({
+  scope,
+  proxyFor,
+  onError,
+}: {
+  readonly scope: ChannelScope;
+  readonly proxyFor: (name: string) => AnyService | null;
+  readonly onError?: (error: unknown) => void;
+}) {
+  const { entries, channels } = useScopePanels(scope);
+
+  return (
+    <>
+      {channels.isError ? (
+        <div className="mb-2">
+          <ErrorLine error={channels.error} />
+          <div className="mt-1 text-[10px] text-neutral-600">
+            dynamic channel list unavailable — showing handwritten panels only
+          </div>
+        </div>
+      ) : null}
+      {entries.map(({ name, channel, def }) => {
+        if (def !== undefined) {
+          return <ServiceCard key={name} def={def} svc={proxyFor(name)} onError={onError} />;
+        }
+        if (channel === undefined) return null;
+        return (
+          <DynamicServiceCard key={name} channel={channel} svc={proxyFor(name)} onError={onError} />
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * Subsequence fuzzy match (case-insensitive): `ssm` matches
+ * `sessionScopeMetadata`. An empty query matches everything.
+ */
+function fuzzyMatch(name: string, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (q === '') return true;
+  const n = name.toLowerCase();
+  let i = 0;
+  for (const ch of n) {
+    if (ch === q[i]) i++;
+    if (i === q.length) return true;
+  }
+  return false;
+}
+
+/**
+ * Three-pane scope browser: the Service list on the left (with a fuzzy
+ * filter box), every Service's card expanded in one continuously scrolling
+ * column in the middle, and a Postman-style call history on the right
+ * (`HistoryPane`) recording every wire request/response the cards make.
+ * The scroll position highlights the matching list item (and keeps it
+ * visible); clicking a list item smooth-scrolls the middle column to that
+ * Service. The list hides below the `md` breakpoint and the history below
+ * `lg`.
+ */
+export function ScopePanelsScrollspy({
+  scope,
+  title,
+  proxyFor,
+  onError,
+}: {
+  readonly scope: ChannelScope;
+  readonly title: string;
+  readonly proxyFor: (name: string) => AnyService | null;
+  readonly onError?: (error: unknown) => void;
+}) {
+  const { entries, channels } = useScopePanels(scope);
+  const [active, setActive] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const sectionRefs = useRef(new Map<string, HTMLElement>());
+  const navRefs = useRef(new Map<string, HTMLButtonElement>());
+
+  // The filter narrows the left list only; the middle column keeps every
+  // card mounted so in-flight inputs and results survive a search.
+  const filtered = useMemo(
+    () => entries.filter(({ name }) => fuzzyMatch(name, query)),
+    [entries, query],
+  );
+
+  // Call history: every card proxy is wrapped (`makeRecordingProxy`), so
+  // curated and dynamic cards record uniformly without per-card plumbing.
+  const [records, setRecords] = useState<readonly CallRecord[]>([]);
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const recordId = useRef(0);
+  const record = useCallback((entry: Omit<CallRecord, 'id'>) => {
+    const id = ++recordId.current;
+    setRecords((prev) => [{ ...entry, id }, ...prev].slice(0, 100));
+    // Like Postman's response pane: the newest call is always open.
+    setExpandedId(id);
+  }, []);
+  const recordingProxyFor = useCallback(
+    (name: string): AnyService | null => {
+      const svc = proxyFor(name);
+      return svc === null ? null : makeRecordingProxy(name, svc, record);
+    },
+    [proxyFor, record],
+  );
+
+  // Highlight the section nearest the top of the scroll port. Driven by the
+  // scroll event (not IntersectionObserver) so tall sections and the tail of
+  // the list behave predictably. Section refs sit in DOM order in the map.
+  const syncActive = useCallback(() => {
+    const root = scrollRef.current;
+    if (root === null) return;
+    const rootTop = root.getBoundingClientRect().top;
+    let current: string | null = null;
+    for (const [name, el] of sectionRefs.current) {
+      if (el.getBoundingClientRect().top - rootTop <= 96) current = name;
+      else break;
+    }
+    current ??= entries[0]?.name ?? null;
+    setActive((prev) => (prev === current ? prev : current));
+  }, [entries]);
+
+  // Sections mount as the channel list resolves, so re-sync on list changes.
+  useEffect(() => {
+    syncActive();
+  }, [syncActive]);
+
+  // Keep the highlighted item inside the left list's viewport.
+  useEffect(() => {
+    if (active === null) return;
+    navRefs.current.get(active)?.scrollIntoView({ block: 'nearest' });
+  }, [active]);
+
+  const scrollTo = (name: string) => {
+    setActive(name);
+    sectionRefs.current.get(name)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1">
+      <nav className="hidden w-56 shrink-0 overflow-y-auto border-r border-neutral-800 py-2 md:block">
+        <div className="px-3 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+          {title}
+        </div>
+        <div className="px-2 pb-2">
+          <input
+            className="w-full rounded border border-neutral-700 bg-neutral-950 px-2 py-1 font-mono text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+            placeholder="Filter services…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+        {filtered.length === 0 ? (
+          <div className="px-3 py-1 text-[11px] text-neutral-600 italic">no matches</div>
+        ) : null}
+        {filtered.map(({ name, def }) => (
+          <button
+            key={name}
+            type="button"
+            ref={(el) => {
+              if (el === null) navRefs.current.delete(name);
+              else navRefs.current.set(name, el);
+            }}
+            onClick={() => scrollTo(name)}
+            className={`block w-full truncate px-3 py-1 text-left font-mono text-[11px] transition-colors ${
+              active === name
+                ? 'bg-neutral-800 text-sky-400'
+                : 'text-neutral-500 hover:bg-neutral-800/60 hover:text-neutral-300'
+            }`}
+            title={def?.label ?? name}
+          >
+            {name}
+          </button>
+        ))}
+      </nav>
+      <div
+        ref={scrollRef}
+        onScroll={syncActive}
+        className="min-w-0 flex-1 overflow-y-auto px-4 py-3"
+      >
+        {channels.isError ? (
+          <div className="mb-2">
+            <ErrorLine error={channels.error} />
+            <div className="mt-1 text-[10px] text-neutral-600">
+              dynamic channel list unavailable — showing handwritten panels only
+            </div>
+          </div>
+        ) : null}
+        {entries.map(({ name, channel, def }) => (
+          <section
+            key={name}
+            ref={(el) => {
+              if (el === null) sectionRefs.current.delete(name);
+              else sectionRefs.current.set(name, el);
+            }}
+            className="scroll-mt-3"
+          >
+            {def !== undefined ? (
+              <ServiceCard def={def} svc={recordingProxyFor(name)} onError={onError} />
+            ) : channel !== undefined ? (
+              <DynamicServiceCard
+                channel={channel}
+                svc={recordingProxyFor(name)}
+                onError={onError}
+                collapsible={false}
+                inlineResults={false}
+              />
+            ) : null}
+          </section>
+        ))}
+      </div>
+      <HistoryPane
+        records={records}
+        expandedId={expandedId}
+        onToggle={(id) => setExpandedId((prev) => (prev === id ? null : id))}
+        onClear={() => {
+          setRecords([]);
+          setExpandedId(null);
+        }}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Call history — one record per wire call, newest first, capped at 100.
+// ---------------------------------------------------------------------------
+
+interface CallRecord {
+  readonly id: number;
+  readonly service: string;
+  readonly method: string;
+  readonly args: readonly unknown[];
+  readonly at: number;
+  readonly durationMs: number;
+  readonly ok: boolean;
+  readonly result?: unknown;
+  readonly error?: string;
+}
+
+/**
+ * Wrap a Service proxy so every method call is recorded (args, result or
+ * error, duration) before its promise settles. Errors rethrow unchanged, so
+ * the calling card's own error handling still runs.
+ */
+function makeRecordingProxy(
+  service: string,
+  svc: AnyService,
+  record: (entry: Omit<CallRecord, 'id'>) => void,
+): AnyService {
+  return new Proxy(svc, {
+    get(target, prop) {
+      const member = target[prop as string];
+      if (typeof member !== 'function') return member;
+      return (...args: unknown[]) => {
+        const at = Date.now();
+        return Promise.resolve(member(...args)).then(
+          (result) => {
+            record({
+              service,
+              method: String(prop),
+              args,
+              at,
+              durationMs: Date.now() - at,
+              ok: true,
+              result,
+            });
+            return result;
+          },
+          (error: unknown) => {
+            record({
+              service,
+              method: String(prop),
+              args,
+              at,
+              durationMs: Date.now() - at,
+              ok: false,
+              error: errorMessage(error),
+            });
+            throw error;
+          },
+        );
+      };
+    },
+  });
+}
+
+function HistoryPane({
+  records,
+  expandedId,
+  onToggle,
+  onClear,
+}: {
+  readonly records: readonly CallRecord[];
+  readonly expandedId: number | null;
+  readonly onToggle: (id: number) => void;
+  readonly onClear: () => void;
+}) {
+  return (
+    <div className="hidden w-[360px] shrink-0 flex-col border-l border-neutral-800 bg-neutral-900/30 lg:flex">
+      <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+          History {records.length > 0 ? `(${records.length})` : ''}
+        </span>
+        {records.length > 0 ? <ActionButton onClick={onClear}>Clear</ActionButton> : null}
+      </div>
+      <div className="flex-1 overflow-y-auto p-2">
+        {records.length === 0 ? (
+          <div className="px-1 text-[11px] text-neutral-600 italic">
+            call any method to see the request/response here
+          </div>
+        ) : null}
+        {records.map((r) => {
+          const open = r.id === expandedId;
+          return (
+            <div key={r.id} className="mb-2 rounded border border-neutral-800 bg-neutral-900/60">
+              <div
+                className="flex cursor-pointer items-center gap-2 px-2 py-1.5 select-none"
+                onClick={() => onToggle(r.id)}
+              >
+                <span
+                  className={`shrink-0 text-[9px] ${r.ok ? 'text-emerald-400' : 'text-red-400'}`}
+                >
+                  ●
+                </span>
+                <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-neutral-200">
+                  {r.service}.{r.method}
+                </span>
+                <span className="shrink-0 text-[10px] text-neutral-600">{r.durationMs}ms</span>
+                <span className="shrink-0 text-[10px] text-neutral-600">{relTime(r.at)}</span>
+                <span className="shrink-0 text-[10px] text-neutral-600">{open ? '▾' : '▸'}</span>
+              </div>
+              {open ? (
+                <div className="border-t border-neutral-800/60 px-2 py-1.5">
+                  <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+                    Request
+                  </div>
+                  <JsonView data={r.args} empty="(no args)" />
+                  <div className="mt-1.5 mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+                    {r.ok ? 'Response' : 'Error'}
+                  </div>
+                  {r.ok ? (
+                    <JsonView data={r.result} empty="(no result)" />
+                  ) : (
+                    <div className="text-[11px] break-words text-red-400">{r.error}</div>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Generic service card
+// ---------------------------------------------------------------------------
+
+/** Service name that copies itself to the clipboard on click. */
+function CopyableName({ name, className }: { name: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      title={`click to copy: ${name}`}
+      className={className}
+      onClick={(e) => {
+        // Don't trigger the collapsible header toggle behind the name.
+        e.stopPropagation();
+        void navigator.clipboard.writeText(name).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1200);
+        });
+      }}
+    >
+      {copied ? 'copied ✓' : name}
+    </button>
+  );
+}
+
+function ServiceCard({
+  def,
+  svc,
+  onError,
+}: {
+  def: ServicePanelDef;
+  svc: AnyService | null;
+  onError?: (error: unknown) => void;
+}) {
+  const [data, setData] = useState<unknown>(undefined);
+  const [error, setError] = useState<unknown>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  const refresh = async () => {
+    if (svc === null || def.fetch === undefined) return;
+    try {
+      setError(null);
+      const result = await def.fetch(svc);
+      setData(result);
+      setLoaded(true);
+    } catch (error) {
+      setError(error);
+      onError?.(error);
+    }
+  };
+
+  return (
+    <div className="mb-3 rounded-lg border border-neutral-800 bg-neutral-900/60">
+      <div className="flex items-center justify-between border-b border-neutral-800/60 px-3 py-2">
+        <div>
+          <span className="text-[12px] font-medium text-neutral-200">{def.label}</span>
+          <CopyableName
+            name={def.id}
+            className="ml-2 font-mono text-[10px] text-neutral-600 hover:text-sky-400"
+          />
+        </div>
+        {def.fetch !== undefined ? (
+          <ActionButton onClick={() => void refresh()} disabled={svc === null}>
+            {loaded ? 'Refresh' : 'Load'}
+          </ActionButton>
+        ) : null}
+      </div>
+      <div className="px-3 py-2">
+        {error !== null ? (
+          <div className="mb-2">
+            <ErrorLine error={error} />
+          </div>
+        ) : null}
+        {def.fetch !== undefined ? (
+          loaded ? (
+            <JsonView data={data} />
+          ) : (
+            <div className="text-[11px] text-neutral-600 italic">
+              click Load to read this Service
+            </div>
+          )
+        ) : null}
+        {def.actions !== undefined && def.actions.length > 0 ? (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {def.actions.map((action) => (
+              <ActionButton
+                key={action.label}
+                danger={action.danger}
+                disabled={svc === null || busy !== null}
+                onClick={async () => {
+                  if (svc === null) return;
+                  let input: string | undefined;
+                  if (action.input !== undefined) {
+                    const raw = window.prompt(action.input);
+                    if (raw === null) return;
+                    input = raw;
+                  }
+                  setBusy(action.label);
+                  setError(null);
+                  try {
+                    const result = await action.run(svc, input);
+                    if (result !== undefined && def.fetch === undefined) setData(result);
+                    if (def.fetch !== undefined) await refresh();
+                  } catch (error) {
+                    setError(error);
+                    onError?.(error);
+                  } finally {
+                    setBusy(null);
+                  }
+                }}
+              >
+                {busy === action.label ? '…' : action.label}
+              </ActionButton>
+            ))}
+          </div>
+        ) : null}
+        {def.fetch === undefined && data !== undefined ? (
+          <div className="mt-2">
+            <JsonView data={data} />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Dynamic service card — generic renderer for channels without a handwritten
+// override. Every method gets a call button labeled with its declared
+// signature; parameters become structured inputs (`MethodArgInputs`: one
+// field per parameter, one per key for destructured objects, smart-parsed —
+// see `methodArgs.ts`). Getters become read buttons. Results render inline.
+// ---------------------------------------------------------------------------
+
+function DynamicServiceCard({
+  channel,
+  svc,
+  onError,
+  collapsible = true,
+  inlineResults = true,
+}: {
+  channel: ChannelDescriptor;
+  svc: AnyService | null;
+  onError?: (error: unknown) => void;
+  /**
+   * Allow collapsing the method list behind the header. Off in the
+   * scrollspy layout, where every card stays expanded and the header name
+   * is a copy target instead of a toggle.
+   */
+  collapsible?: boolean;
+  /**
+   * Render call results inline under each method. Off in the scrollspy
+   * layout, where results land in the right-side history pane instead.
+   */
+  inlineResults?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [inputs, setInputs] = useState<Record<string, Record<string, string>>>({});
+  const [results, setResults] = useState<Record<string, unknown>>({});
+  const [errors, setErrors] = useState<Record<string, unknown>>({});
+  const [busy, setBusy] = useState<string | null>(null);
+
+  const invoke = async (method: ChannelDescriptor['methods'][number]) => {
+    if (svc === null) return;
+    let argv: unknown[];
+    try {
+      argv = buildArgs(parseParamFields(method.params), inputs[method.name] ?? {});
+    } catch {
+      setErrors((prev) => ({ ...prev, [method.name]: new Error('arg is not valid JSON') }));
+      return;
+    }
+    setBusy(method.name);
+    setErrors((prev) => ({ ...prev, [method.name]: null }));
+    try {
+      const result = await call(svc, method.name, ...argv);
+      setResults((prev) => ({ ...prev, [method.name]: result ?? '(no result)' }));
+    } catch (error) {
+      setErrors((prev) => ({ ...prev, [method.name]: error }));
+      onError?.(error);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="mb-3 rounded-lg border border-neutral-800 bg-neutral-900/60">
+      <div
+        className={`flex items-center justify-between px-3 py-2 ${
+          collapsible ? 'cursor-pointer select-none' : ''
+        }`}
+        onClick={collapsible ? () => setOpen((v) => !v) : undefined}
+      >
+        <div>
+          <CopyableName
+            name={channel.name}
+            className="text-[12px] font-medium text-neutral-300 hover:text-sky-400"
+          />
+          <span className="ml-2 text-[10px] text-neutral-600">
+            {channel.methods.length} methods · {channel.domain}
+          </span>
+        </div>
+        {collapsible ? (
+          <span className="text-[10px] text-neutral-600">{open ? '▾' : '▸'}</span>
+        ) : null}
+      </div>
+      {!collapsible || open ? (
+        <div className="border-t border-neutral-800/60 px-3 py-2">
+          {channel.methods.length === 0 ? (
+            <div className="text-[11px] text-neutral-600 italic">no callable members</div>
+          ) : null}
+          {channel.methods.map((m) => {
+            const fields = m.kind === 'method' ? parseParamFields(m.params) : [];
+            return (
+              <div key={m.name} className="mb-2 last:mb-0">
+                <div className="flex items-center gap-1.5">
+                  <ActionButton
+                    disabled={svc === null || busy !== null}
+                    onClick={() => void invoke(m)}
+                  >
+                    {busy === m.name ? '…' : `${m.name}(${m.params})`}
+                  </ActionButton>
+                  {m.kind === 'property' ? <Badge tone="neutral">get</Badge> : null}
+                </div>
+                {fields.length > 0 ? (
+                  <MethodArgInputs
+                    fields={fields}
+                    values={inputs[m.name] ?? {}}
+                    onChange={(key, value) =>
+                      setInputs((prev) => ({
+                        ...prev,
+                        [m.name]: { ...prev[m.name], [key]: value },
+                      }))
+                    }
+                  />
+                ) : null}
+                {errors[m.name] ? (
+                  <div className="mt-1">
+                    <ErrorLine error={errors[m.name]} />
+                  </div>
+                ) : null}
+                {inlineResults && results[m.name] !== undefined ? (
+                  <div className="mt-1">
+                    <JsonView data={results[m.name]} />
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Structured argument inputs — one labeled field per declared parameter.
+// Values are smart-parsed on invoke (JSON when it parses, plain string
+// otherwise), so simple strings need no quotes.
+// ---------------------------------------------------------------------------
+
+function MethodArgInputs({
+  fields,
+  values,
+  onChange,
+}: {
+  fields: readonly ParamField[];
+  values: Readonly<Record<string, string>>;
+  onChange: (key: string, value: string) => void;
+}) {
+  return (
+    <div className="mt-1 flex flex-col gap-1">
+      {fields.map((f, i) => {
+        if (f.kind === 'object') {
+          return (
+            <div key={i}>
+              <div className="mb-0.5 font-mono text-[10px] text-neutral-600">{f.name}</div>
+              <div className="flex flex-col gap-1 border-l border-neutral-800 pl-2">
+                {f.keys.map((key) => (
+                  <div key={key} className="flex items-center gap-1.5">
+                    <ArgLabel label={key} />
+                    <ArgInput
+                      placeholder="JSON or plain string"
+                      value={values[fieldKey(i, key)] ?? ''}
+                      onChange={(v) => onChange(fieldKey(i, key), v)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        }
+        if (f.kind === 'value') {
+          return (
+            <div key={i} className="flex items-center gap-1.5">
+              <ArgLabel label={f.name} />
+              <ArgInput
+                placeholder={
+                  f.defaultValue !== undefined
+                    ? `default: ${f.defaultValue}`
+                    : 'JSON or plain string'
+                }
+                value={values[fieldKey(i)] ?? ''}
+                onChange={(v) => onChange(fieldKey(i), v)}
+              />
+            </div>
+          );
+        }
+        return (
+          <div key={i} className="flex items-center gap-1.5">
+            <ArgLabel label={f.label} />
+            <ArgInput
+              placeholder="arg (JSON)"
+              value={values[fieldKey(i)] ?? ''}
+              onChange={(v) => onChange(fieldKey(i), v)}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ArgLabel({ label }: { label: string }) {
+  return (
+    <span
+      className="w-28 shrink-0 truncate text-right font-mono text-[10px] text-neutral-500"
+      title={label}
+    >
+      {label}
+    </span>
+  );
+}
+
+function ArgInput({
+  placeholder,
+  value,
+  onChange,
+}: {
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <input
+      className="min-w-0 flex-1 rounded border border-neutral-700 bg-neutral-950 px-2 py-1 font-mono text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}
diff --git a/apps/kimi-inspect/src/components/SessionPane.tsx b/apps/kimi-inspect/src/components/SessionPane.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8d72c349c0eb3f9b17b1b3767062ab613ffaa87a
--- /dev/null
+++ b/apps/kimi-inspect/src/components/SessionPane.tsx
@@ -0,0 +1,100 @@
+/**
+ * Session pane — everything session-scoped: the pending-interactions card
+ * and the session Service panels under the `Services` tab, plus a `State`
+ * tab reading the session's registered plain-data state through
+ * `ISessionStateService.snapshot()` (every key a Session Service registered
+ * into the session-state container, JSON-safe). Rendered as the `Session`
+ * tab of the chat view's right dock (`RightPanel`). The Service panels are
+ * fetch-on-demand (no Service-event push channel exists); the State tab
+ * instead auto-loads on mount and polls once a second, so it stays live
+ * without a Refresh button.
+ */
+
+import { ISessionStateService } from '@moonshot-ai/agent-core-v2/session/state/sessionState';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import { serviceByName } from '../channel';
+import { useConnection } from '../connection';
+import { type AnyService } from '../panels';
+import { fetchSessionWorkspaceAssociation } from '../snapshots/api';
+import { InteractionsCard } from './InteractionsCard';
+import { ScopePanels } from './ServicePanels';
+import { StateCard } from './StateCard';
+
+type Tab = 'services' | 'state';
+
+export function SessionPane({ sessionId, ready }: { sessionId: string | null; ready: boolean }) {
+  const { klient } = useConnection();
+  const [tab, setTab] = useState<Tab>('services');
+  const association = useQuery({
+    queryKey: ['session-workspace-association', klient.baseUrl, sessionId],
+    queryFn: () => fetchSessionWorkspaceAssociation(klient, sessionId as string),
+    enabled: sessionId !== null && ready,
+    refetchInterval: 1_000,
+  });
+
+  const proxyFor = useMemo(() => {
+    return (name: string): AnyService | null => {
+      return (
+        serviceByName<AnyService>(klient, name, {
+          scope: 'session',
+          sessionId: sessionId !== null && ready ? sessionId : undefined,
+        }) ?? null
+      );
+    };
+  }, [klient, sessionId, ready]);
+
+  const blocked = sessionId === null || !ready;
+
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col">
+      <div className="flex border-b border-neutral-800 text-[11px]">
+        {(['services', 'state'] as const).map((t) => (
+          <button
+            key={t}
+            className={`flex-1 px-2 py-2 font-medium uppercase tracking-wider ${
+              tab === t ? 'bg-neutral-800 text-sky-400' : 'text-neutral-500 hover:text-neutral-300'
+            }`}
+            onClick={() => setTab(t)}
+          >
+            {t === 'services' ? 'Services' : 'State'}
+          </button>
+        ))}
+      </div>
+      <div className="flex-1 overflow-y-auto p-3">
+        {blocked ? (
+          <div className="text-[12px] text-neutral-600">
+            {sessionId === null ? 'No session selected.' : 'Loading session…'}
+          </div>
+        ) : (
+          <>
+            <div className="mb-3 rounded border border-neutral-800 bg-neutral-950/40 p-2 text-[11px]">
+              <div className="mb-1 font-semibold uppercase tracking-wider text-neutral-500">Workspace association</div>
+              <div className="grid grid-cols-[80px_minmax(0,1fr)] gap-1 font-mono">
+                <span className="text-neutral-600">workspace</span>
+                <span className="break-all text-neutral-300">{association.data?.workspaceId ?? 'loading…'}</span>
+                <span className="text-neutral-600">cwd</span>
+                <span className="break-all text-neutral-300">{association.data?.cwd ?? 'loading…'}</span>
+              </div>
+            </div>
+            {tab === 'services' ? (
+              <>
+                <InteractionsCard sessionId={sessionId} />
+                <ScopePanels scope="session" proxyFor={proxyFor} />
+              </>
+            ) : (
+              <StateCard
+                id={sessionId}
+                queryKey={['sessionState', sessionId]}
+                title="Session state"
+                label="sessionStateService"
+                fetchSnapshot={() => klient.session(sessionId).service(ISessionStateService).snapshot()}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/Sidebar.tsx b/apps/kimi-inspect/src/components/Sidebar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..be5123bf18ff2167172efacb29e4cb080716a12c
--- /dev/null
+++ b/apps/kimi-inspect/src/components/Sidebar.tsx
@@ -0,0 +1,602 @@
+/**
+ * Left sidebar — a single-column workspace → session tree backed by the v2
+ * list's grouped projection (`GET /api/v2/sessions?view=by_workspace`, see
+ * `src/sessions/api.ts`): one request returns every workspace with a matching
+ * session, each carrying its first `group.page_size` sessions under the
+ * requested sort plus the workspace's full matching total. Preset views
+ * (`src/sessions/views.ts`) map onto the endpoint's status / archived / git
+ * query conditions; the active view, collapsed workspaces, and the panel
+ * width persist to localStorage. Group pagination is the endpoint's opaque
+ * cursor (Load more), with a slow poll on top; a workspace whose total
+ * outruns the served slice expands inline into the flat per-workspace
+ * listing. Live activity frames (`useSessionActivities`) override the REST
+ * status badge. Session creation still goes through the v1 REST endpoint.
+ */
+
+import { IAgentProfileService } from '@moonshot-ai/agent-core-v2/agent/profile/profile';
+import { IConfigService } from '@moonshot-ai/agent-core-v2/app/config/config';
+import { ISessionManager } from '@moonshot-ai/agent-core-v2/app/sessionManager/sessionManager';
+import {
+  IWorkspaceService,
+  type Workspace,
+} from '@moonshot-ai/agent-core-v2/app/workspace/workspace';
+import { IModelCatalog } from '@moonshot-ai/agent-core-v2/llm-adapter/model/catalog';
+import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import type { SessionWorkFacts } from '../activity/store';
+import { useSessionActivities } from '../activity/useSessionActivity';
+import type { InspectClient } from '../channel';
+import { useConnection } from '../connection';
+import {
+  fetchV2SessionGroups,
+  fetchV2SessionsPage,
+  type V2ActivityStatus,
+  type V2Session,
+  type V2SessionGroup,
+  type V2SessionSort,
+} from '../sessions/api';
+import { SESSION_VIEWS, sessionViewById, type SessionView } from '../sessions/views';
+import { Badge, ErrorLine, relTime } from '../ui';
+
+const STORAGE_KEY = 'kimi-inspect.session-table';
+
+const DEFAULT_WIDTH = 320;
+const MIN_WIDTH = 240;
+const MAX_WIDTH = 640;
+const GROUP_PAGE_SIZE = 50;
+
+// ---------------------------------------------------------------------------
+// Persisted panel prefs
+// ---------------------------------------------------------------------------
+
+interface PanelPrefs {
+  readonly view?: string;
+  /** Collapsed workspace ids; absent = everything expanded. */
+  readonly collapsed?: readonly string[];
+  readonly width?: number;
+}
+
+function readPrefs(): PanelPrefs {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw !== null) return JSON.parse(raw) as PanelPrefs;
+  } catch {
+    // corrupt storage — fall through to defaults
+  }
+  return {};
+}
+
+function writePrefs(prefs: PanelPrefs): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+}
+
+// ---------------------------------------------------------------------------
+// Live status override (mirrors the server's mapActivityStatus)
+// ---------------------------------------------------------------------------
+
+function liveStatus(facts: SessionWorkFacts | undefined): V2ActivityStatus | undefined {
+  if (facts === undefined) return undefined;
+  if (facts.pendingInteraction === 'approval') return 'approval';
+  if (facts.pendingInteraction === 'question') return 'question';
+  if (facts.busy || facts.mainTurnActive) return 'running';
+  if (facts.lastTurnReason === 'failed') return 'failed';
+  return 'idle';
+}
+
+const STATUS_TONES: Record<V2ActivityStatus, 'green' | 'amber' | 'sky' | 'red' | 'neutral'> = {
+  running: 'green',
+  approval: 'amber',
+  question: 'sky',
+  failed: 'red',
+  idle: 'neutral',
+};
+
+const SORTS: readonly { readonly id: V2SessionSort; readonly label: string }[] = [
+  { id: 'meta.updated_at_desc', label: 'Updated ↓' },
+  { id: 'meta.updated_at_asc', label: 'Updated ↑' },
+  { id: 'meta.created_at_desc', label: 'Created ↓' },
+];
+
+/**
+ * Default model for a fresh session: the configured global `defaultModel`
+ * first (the same fallback the profile bind uses), then the first connected
+ * provider's `default_model`. `undefined` means the server has nothing to
+ * offer — the session stays model-less and the chat surfaces
+ * `model.not_configured` as before.
+ */
+async function resolveDefaultModel(klient: InspectClient): Promise<string | undefined> {
+  const configured: unknown = await klient.core(IConfigService).get('defaultModel');
+  if (typeof configured === 'string' && configured !== '') return configured;
+  const providers = await klient.core(IModelCatalog).listProviders();
+  const withDefault = providers.filter((p) => p.default_model !== undefined);
+  return (withDefault.find((p) => p.status === 'connected') ?? withDefault[0])?.default_model;
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar
+// ---------------------------------------------------------------------------
+
+export function Sidebar({
+  activeSessionId,
+  onSelectSession,
+}: {
+  activeSessionId: string | null;
+  onSelectSession: (sessionId: string) => void;
+}) {
+  const { klient, baseUrl, config } = useConnection();
+  const queryClient = useQueryClient();
+  const activities = useSessionActivities();
+
+  const [prefs, setPrefs] = useState<PanelPrefs>(readPrefs);
+  const view = sessionViewById(prefs.view);
+  const [sort, setSort] = useState<V2SessionSort>('meta.updated_at_desc');
+  const width = prefs.width ?? DEFAULT_WIDTH;
+  const collapsed = useMemo(() => new Set(prefs.collapsed ?? []), [prefs.collapsed]);
+
+  const updatePrefs = (patch: PanelPrefs) => {
+    setPrefs((prev) => {
+      const next: PanelPrefs = { ...prev, ...patch };
+      writePrefs(next);
+      return next;
+    });
+  };
+
+  const toggleCollapsed = (workspaceId: string) => {
+    const next = new Set(collapsed);
+    if (next.has(workspaceId)) next.delete(workspaceId);
+    else next.add(workspaceId);
+    updatePrefs({ collapsed: [...next] });
+  };
+
+  const token = config.token.trim();
+  const authToken = token === '' ? undefined : token;
+
+  const workspaces = useQuery({
+    queryKey: ['workspaces'],
+    queryFn: () => klient.core(IWorkspaceService).list(),
+    refetchInterval: 15_000,
+  });
+  const workspaceNames = useMemo(
+    () => new Map((workspaces.data ?? []).map((ws) => [ws.id, ws.name] as const)),
+    [workspaces.data],
+  );
+
+  const groups = useInfiniteQuery({
+    queryKey: ['v2-sessions', 'tree', view.id, sort],
+    queryFn: ({ pageParam }) =>
+      fetchV2SessionGroups({
+        baseUrl,
+        token: authToken,
+        statuses: view.statuses,
+        archived: view.archived,
+        includeGit: view.includeGit,
+        sort,
+        pageSize: 50,
+        groupPageSize: GROUP_PAGE_SIZE,
+        pageToken: pageParam,
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (last) => last.nextPageToken,
+    refetchInterval: 15_000,
+  });
+
+  const groupList = useMemo(
+    () => groups.data?.pages.flatMap((page) => page.groups) ?? [],
+    [groups.data],
+  );
+
+  const createSession = async (ws: Workspace | null) => {
+    // With a workspace, the server derives workDir from workspace.root, so no cwd is needed.
+    let body: string;
+    if (ws !== null) {
+      body = JSON.stringify({ workspace_id: ws.id });
+    } else {
+      const cwd = window.prompt('Working directory for the new session:', '');
+      if (cwd === null || cwd.trim() === '') return;
+      body = JSON.stringify({ metadata: { cwd: cwd.trim() } });
+    }
+    const headers: Record<string, string> = { 'content-type': 'application/json' };
+    if (token !== '') headers['authorization'] = `Bearer ${token}`;
+    const res = await fetch(`${baseUrl}/api/v1/sessions`, {
+      method: 'POST',
+      headers,
+      body,
+    });
+    const envelope = (await res.json()) as { code: number; msg: string; data: { id: string } };
+    if (envelope.code !== 0) {
+      window.alert(`create session failed: ${envelope.msg}`);
+      return;
+    }
+    const sessionId = envelope.data.id;
+    // The REST create route ignores agent_config, so bind the default model
+    // over the channel — the same resume + setModel path the Model Catalog's
+    // "+ Session" button uses. Best-effort: a failure leaves the session
+    // model-less instead of blocking the creation flow.
+    try {
+      const model = await resolveDefaultModel(klient);
+      if (model !== undefined) {
+        await klient.core(ISessionManager).resume(sessionId);
+        await klient.session(sessionId).agent('main').service(IAgentProfileService).setModel(model);
+      }
+    } catch (error) {
+      console.warn('failed to set the default model on the new session', error);
+    }
+    await queryClient.invalidateQueries({ queryKey: ['v2-sessions'] });
+    onSelectSession(sessionId);
+  };
+
+  const cycleSort = () => {
+    const index = SORTS.findIndex((s) => s.id === sort);
+    setSort(SORTS[(index + 1) % SORTS.length]!.id);
+  };
+
+  const startResize = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = width;
+    const onMove = (ev: MouseEvent) => {
+      const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + ev.clientX - startX));
+      setPrefs((prev) => ({ ...prev, width: next }));
+    };
+    const onUp = (ev: MouseEvent) => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      const next = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + ev.clientX - startX));
+      updatePrefs({ width: next });
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  return (
+    <div
+      className="relative flex h-full shrink-0 flex-col border-r border-neutral-800"
+      style={{ width }}
+    >
+      {/* View tabs */}
+      <div className="flex items-center gap-1 overflow-x-auto border-b border-neutral-800 px-2 py-1.5">
+        {SESSION_VIEWS.map((v) => (
+          <button
+            key={v.id}
+            className={`shrink-0 rounded px-2 py-0.5 text-[11px] ${
+              v.id === view.id
+                ? 'bg-neutral-800 font-medium text-neutral-100'
+                : 'text-neutral-500 hover:text-neutral-300'
+            }`}
+            onClick={() => updatePrefs({ view: v.id })}
+          >
+            {v.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Toolbar: new session + sort */}
+      <div className="flex items-center justify-between border-b border-neutral-800 px-2 py-1">
+        <NewSessionMenu workspaces={workspaces.data ?? []} onCreate={createSession} />
+        <button
+          className="rounded border border-neutral-700 px-2 py-0.5 text-[11px] text-neutral-400 hover:bg-neutral-800"
+          title="Click to change sort"
+          onClick={cycleSort}
+        >
+          {SORTS.find((s) => s.id === sort)?.label}
+        </button>
+      </div>
+
+      {/* Tree body */}
+      <div className="flex-1 overflow-y-auto">
+        {groups.isError ? <ErrorLine error={groups.error} /> : null}
+        {groupList.map((group) => (
+          <WorkspaceNode
+            key={group.workspace.id}
+            group={group}
+            view={view}
+            sort={sort}
+            collapsed={collapsed.has(group.workspace.id)}
+            onToggleCollapsed={() => toggleCollapsed(group.workspace.id)}
+            workspaceNames={workspaceNames}
+            activeSessionId={activeSessionId}
+            activityOf={(id) => activities.get(id)}
+            onSelect={onSelectSession}
+            baseUrl={baseUrl}
+            token={authToken}
+          />
+        ))}
+        {groups.isLoading ? (
+          <div className="px-3 py-2 text-[11px] text-neutral-600">loading…</div>
+        ) : null}
+        {!groups.isLoading && groupList.length === 0 && !groups.isError ? (
+          <div className="px-3 py-2 text-[11px] text-neutral-600">no sessions</div>
+        ) : null}
+        {groups.hasNextPage ? (
+          <button
+            className="w-full border-t border-neutral-800 px-3 py-1.5 text-[11px] text-sky-500 hover:bg-neutral-800/60 hover:text-sky-400"
+            disabled={groups.isFetchingNextPage}
+            onClick={() => void groups.fetchNextPage()}
+          >
+            {groups.isFetchingNextPage ? 'loading…' : 'Load more workspaces'}
+          </button>
+        ) : null}
+      </div>
+
+      {/* Resize handle */}
+      <div
+        className="absolute top-0 right-0 h-full w-1 cursor-col-resize hover:bg-sky-700/50"
+        onMouseDown={startResize}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tree nodes
+// ---------------------------------------------------------------------------
+
+function WorkspaceNode({
+  group,
+  view,
+  sort,
+  collapsed,
+  onToggleCollapsed,
+  workspaceNames,
+  activeSessionId,
+  activityOf,
+  onSelect,
+  baseUrl,
+  token,
+}: {
+  group: V2SessionGroup;
+  view: SessionView;
+  sort: V2SessionSort;
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  workspaceNames: ReadonlyMap<string, string>;
+  activeSessionId: string | null;
+  activityOf: (sessionId: string) => SessionWorkFacts | undefined;
+  onSelect: (sessionId: string) => void;
+  baseUrl: string;
+  token?: string | undefined;
+}) {
+  const [showAll, setShowAll] = useState(false);
+  const hasMore = group.total > group.sessions.length;
+  return (
+    <div>
+      <div
+        className="flex cursor-pointer items-center gap-1.5 border-b border-neutral-800 px-2 py-1.5 select-none hover:bg-neutral-800/60"
+        onClick={onToggleCollapsed}
+        title={group.workspace.cwd ?? group.workspace.id}
+      >
+        <span className="w-3 shrink-0 text-center text-[9px] text-neutral-600">
+          {collapsed ? '▸' : '▾'}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-[11px] font-semibold text-neutral-300">
+          {workspaceNames.get(group.workspace.id) ?? group.workspace.cwd ?? group.workspace.id}
+        </span>
+        <span className="shrink-0 text-[10px] text-neutral-600">{group.total}</span>
+      </div>
+      {collapsed ? null : (
+        <>
+          {showAll ? null : (
+            <>
+              {group.sessions.map((s) => (
+                <SessionNode
+                  key={s.id}
+                  s={s}
+                  active={s.id === activeSessionId}
+                  activity={activityOf(s.id)}
+                  onClick={() => onSelect(s.id)}
+                />
+              ))}
+              {hasMore ? (
+                <button
+                  className="w-full border-b border-neutral-800/50 py-1 pl-6 text-left text-[10px] text-sky-500 hover:bg-neutral-800/60 hover:text-sky-400"
+                  onClick={() => setShowAll(true)}
+                >
+                  Show all {group.total}…
+                </button>
+              ) : null}
+            </>
+          )}
+          {showAll ? (
+            <FullGroupList
+              workspaceId={group.workspace.id}
+              view={view}
+              sort={sort}
+              baseUrl={baseUrl}
+              token={token}
+              activeSessionId={activeSessionId}
+              activityOf={activityOf}
+              onSelect={onSelect}
+            />
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The flat per-workspace listing behind "Show all" — pages the ungrouped
+ * projection filtered to this workspace, so sessions beyond the grouped
+ * slice stay reachable.
+ */
+function FullGroupList({
+  workspaceId,
+  view,
+  sort,
+  baseUrl,
+  token,
+  activeSessionId,
+  activityOf,
+  onSelect,
+}: {
+  workspaceId: string;
+  view: SessionView;
+  sort: V2SessionSort;
+  baseUrl: string;
+  token?: string | undefined;
+  activeSessionId: string | null;
+  activityOf: (sessionId: string) => SessionWorkFacts | undefined;
+  onSelect: (sessionId: string) => void;
+}) {
+  const sessions = useInfiniteQuery({
+    queryKey: ['v2-sessions', 'tree-full', workspaceId, view.id, sort],
+    queryFn: ({ pageParam }) =>
+      fetchV2SessionsPage({
+        baseUrl,
+        token,
+        workspaceIds: [workspaceId],
+        statuses: view.statuses,
+        archived: view.archived,
+        includeGit: view.includeGit,
+        sort,
+        pageSize: 50,
+        pageToken: pageParam,
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (last) => last.nextPageToken,
+  });
+  const seen = new Set<string>();
+  const items = (sessions.data?.pages.flatMap((page) => page.items) ?? []).filter((s) => {
+    if (seen.has(s.id)) return false;
+    seen.add(s.id);
+    return true;
+  });
+  return (
+    <div className="bg-neutral-950/40">
+      {items.map((s) => (
+        <SessionNode
+          key={s.id}
+          s={s}
+          active={s.id === activeSessionId}
+          activity={activityOf(s.id)}
+          onClick={() => onSelect(s.id)}
+        />
+      ))}
+      {sessions.isLoading ? (
+        <div className="py-1 pl-6 text-[10px] text-neutral-600">loading…</div>
+      ) : null}
+      {sessions.hasNextPage ? (
+        <button
+          className="w-full py-1 pl-6 text-left text-[10px] text-sky-500 hover:bg-neutral-800/60 hover:text-sky-400"
+          disabled={sessions.isFetchingNextPage}
+          onClick={() => void sessions.fetchNextPage()}
+        >
+          {sessions.isFetchingNextPage ? 'loading…' : 'Load more'}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function SessionNode({
+  s,
+  active,
+  activity,
+  onClick,
+}: {
+  s: V2Session;
+  active: boolean;
+  activity?: SessionWorkFacts | undefined;
+  onClick: () => void;
+}) {
+  const status = liveStatus(activity) ?? s.activity.status;
+  return (
+    <div
+      className={`cursor-pointer border-b border-neutral-800/50 py-1 pr-2 pl-6 hover:bg-neutral-800/60 ${
+        active ? 'bg-sky-950/60' : ''
+      }`}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-1.5">
+        {status === 'idle' ? null : <Badge tone={STATUS_TONES[status]}>{status}</Badge>}
+        <span className="min-w-0 flex-1 truncate text-[12px] text-neutral-200">
+          {s.meta.title ?? s.meta.lastPrompt ?? s.id}
+        </span>
+        {s.meta.archived ? <Badge tone="neutral">archived</Badge> : null}
+        <span className="shrink-0 text-[10px] text-neutral-500">{relTime(s.meta.updatedAt)}</span>
+      </div>
+      <div className="flex items-center gap-2 truncate font-mono text-[10px] text-neutral-600">
+        <span className="truncate">{s.id.slice(0, 12)}</span>
+        {s.git !== undefined && s.git.branch !== null ? (
+          <span className="truncate" title={s.git.branch}>
+            {s.git.branch}
+          </span>
+        ) : null}
+        {s.git !== undefined && s.git.pullRequest !== null ? (
+          <a
+            className="shrink-0 text-sky-500 hover:text-sky-400"
+            href={s.git.pullRequest.url}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(e) => e.stopPropagation()}
+          >
+            #{s.git.pullRequest.number}
+          </a>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar dropdowns
+// ---------------------------------------------------------------------------
+
+function useDropdown(): { open: boolean; toggle: () => void; close: () => void } {
+  const [open, setOpen] = useState(false);
+  return {
+    open,
+    toggle: () => setOpen((v) => !v),
+    close: () => setOpen(false),
+  };
+}
+
+function NewSessionMenu({
+  workspaces,
+  onCreate,
+}: {
+  workspaces: readonly Workspace[];
+  onCreate: (ws: Workspace | null) => Promise<void>;
+}) {
+  const { open, toggle, close } = useDropdown();
+  return (
+    <div className="relative">
+      <button
+        className="rounded border border-neutral-700 px-2 py-0.5 text-[11px] text-neutral-300 hover:bg-neutral-800"
+        onClick={toggle}
+      >
+        + New session
+      </button>
+      {open ? (
+        <>
+          <div className="fixed inset-0 z-10" onClick={close} />
+          <div className="absolute left-0 z-20 mt-1 w-64 rounded border border-neutral-700 bg-neutral-900 py-1 shadow-xl">
+            {workspaces.map((ws) => (
+              <button
+                key={ws.id}
+                className="block w-full truncate px-3 py-1.5 text-left text-[11px] text-neutral-200 hover:bg-neutral-800"
+                title={ws.root}
+                onClick={() => {
+                  close();
+                  void onCreate(ws);
+                }}
+              >
+                {ws.name}
+              </button>
+            ))}
+            <button
+              className="block w-full border-t border-neutral-800 px-3 py-1.5 text-left text-[11px] text-neutral-400 hover:bg-neutral-800"
+              onClick={() => {
+                close();
+                void onCreate(null);
+              }}
+            >
+              No workspace (prompt for cwd)…
+            </button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/StateCard.tsx b/apps/kimi-inspect/src/components/StateCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e7e96d44100a5af527a01f97b3a2bf2ce388f6dd
--- /dev/null
+++ b/apps/kimi-inspect/src/components/StateCard.tsx
@@ -0,0 +1,117 @@
+/**
+ * State card — one scope's registered state as a live diff tree, shared by
+ * the session `State` tab (`SessionPane`) and the agent `State` tab
+ * (`RightPanel`). Same view as the audit panel's "Diff vs prev" (`StateTree`
+ * over a `DiffNode` root), so every key is an interactive, collapsible row.
+ * Auto-loads on mount and polls once a second: the first snapshot (and any
+ * owner switch) renders as a plain tree, each later snapshot folds in as a
+ * structural diff against the previous one (added = green, removed = red,
+ * modified = amber). Changed subtrees auto-open; rows the user expanded stay
+ * expanded across polls.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState, type ReactNode } from 'react';
+
+import { diffValue, type DiffNode } from '../audit/diff';
+import { ActionButton, Badge, ErrorLine } from '../ui';
+import { StateTree, plainNode } from './audit/StateTree';
+
+export function StateCard({
+  id,
+  queryKey,
+  title,
+  label,
+  badge,
+  fetchSnapshot,
+}: {
+  /** Identity of the state owner (`sessionId`, or `sessionId/agentId`); a
+   * change resets the diff baseline so a fresh owner renders as a plain tree
+   * instead of an all-green diff against the previous owner. */
+  id: string;
+  queryKey: readonly unknown[];
+  /** Card title, e.g. `Session state` / `Agent state`. */
+  title: string;
+  /** Mono caption next to the title: the state service's channel name. */
+  label: string;
+  badge?: ReactNode;
+  fetchSnapshot: () => Promise<Record<string, unknown>>;
+}) {
+  const query = useQuery({
+    queryKey,
+    queryFn: async () => ({ id, snapshot: await fetchSnapshot() }),
+    refetchInterval: 1000,
+    placeholderData: (previous) => previous,
+  });
+
+  // Fold each poll into a diff against the previous snapshot. `plainNode`
+  // on first load / owner switch — diffing a freshly loaded tree against
+  // nothing (or against the previous owner) would paint it all-green. While
+  // the new owner's fetch is in flight the query still carries the previous
+  // owner's placeholder data (`data.id !== id`); ignore it so a stale tree
+  // never renders under the new owner's badge.
+  const [tree, setTree] = useState<{ id: string; node: DiffNode } | null>(null);
+  useEffect(() => {
+    const data = query.data;
+    if (data === undefined || data.id !== id) return;
+    setTree((prev) =>
+      prev === null || prev.id !== data.id
+        ? { id: data.id, node: plainNode(data.snapshot) }
+        : { id: data.id, node: diffValue(prev.node.value, data.snapshot) },
+    );
+  }, [query.data, id]);
+
+  // The tree is only shown when it belongs to the current owner — after an
+  // owner switch the old tree is suppressed until the new snapshot arrives.
+  const visibleTree = tree !== null && tree.id === id ? tree : null;
+
+  // One-click expand/collapse: bumping `nonce` remounts the tree, and the
+  // fresh `defaultDepth` decides how deep nodes open (Infinity = expand all,
+  // 0 = collapse all — diff-changed subtrees still auto-open, as in the
+  // audit panel). Polls afterwards keep the local open state untouched.
+  const [expand, setExpand] = useState({ nonce: 0, depth: 1 });
+
+  return (
+    <div className="mb-3 rounded-lg border border-neutral-800 bg-neutral-900/60">
+      <div className="flex items-center justify-between border-b border-neutral-800/60 px-3 py-2">
+        <div>
+          <span className="text-[12px] font-medium text-neutral-200">{title}</span>
+          <span className="ml-2 font-mono text-[10px] text-neutral-600">{label}</span>
+          {badge}
+          {visibleTree !== null ? (
+            <Badge tone="neutral">
+              {Object.keys(visibleTree.node.value as Record<string, unknown>).length} keys
+            </Badge>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-1.5">
+          <ActionButton
+            onClick={() =>
+              setExpand((s) => ({ nonce: s.nonce + 1, depth: Number.POSITIVE_INFINITY }))
+            }
+          >
+            Expand
+          </ActionButton>
+          <ActionButton onClick={() => setExpand((s) => ({ nonce: s.nonce + 1, depth: 0 }))}>
+            Collapse
+          </ActionButton>
+          <span className="text-[10px] text-neutral-600">live · 1s</span>
+        </div>
+      </div>
+      <div className="px-3 py-2">
+        {query.isError ? (
+          <div className="mb-2">
+            <ErrorLine error={query.error} />
+          </div>
+        ) : null}
+        {visibleTree === null ? (
+          <div className="text-[11px] text-neutral-600 italic">
+            {query.isPending || tree !== null ? 'Loading state…' : 'no state registered'}
+          </div>
+        ) : (
+          <StateTree key={expand.nonce} root={visibleTree.node} defaultDepth={expand.depth} />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/WorkspaceDirBrowser.tsx b/apps/kimi-inspect/src/components/WorkspaceDirBrowser.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1dd38a5d2a0e278a70bbaa39866ed2687047e4bb
--- /dev/null
+++ b/apps/kimi-inspect/src/components/WorkspaceDirBrowser.tsx
@@ -0,0 +1,211 @@
+/**
+ * WorkspaceDirBrowser — server-side filesystem browser living in the Workspace
+ * Services view's left sidebar, replacing the old <select> of registered
+ * workspaces. Directories are listed through the App-scope
+ * `IHostFolderBrowser` (home + recent roots + one-level directory listing);
+ * entries that are registered workspaces carry a `workspace` badge plus their
+ * trust state (`trusted` / `untrusted`, read through the Workspace-scope
+ * `IWorkspaceTrust`; servers predating that service simply show no trust
+ * badge). "Select" registers the current folder on demand —
+ * `IWorkspaceService.createOrTouch` is idempotent on root — before handing
+ * the workspace to the parent.
+ */
+
+import {
+  IHostFolderBrowser,
+  type FsBrowseEntry,
+} from '@moonshot-ai/agent-core-v2/app/hostFolderBrowser/hostFolderBrowser';
+import {
+  IWorkspaceService,
+  type Workspace,
+} from '@moonshot-ai/agent-core-v2/app/workspace/workspace';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import type { InspectClient } from '../channel';
+import { fetchWorkspaceSnapshot } from '../snapshots/api';
+import { ErrorLine } from '../ui';
+
+function normalizePath(path: string): string {
+  return path.replaceAll('\\', '/').replace(/\/+$/, '');
+}
+
+function baseName(path: string): string {
+  const normalized = normalizePath(path);
+  return normalized.split('/').pop() ?? normalized;
+}
+
+export function WorkspaceDirBrowser(props: {
+  klient: InspectClient;
+  workspaces: readonly Workspace[] | undefined;
+  onSelect: (workspace: Workspace) => void;
+}) {
+  const { klient, workspaces, onSelect } = props;
+  const queryClient = useQueryClient();
+  /** Current browsed directory; null = the server default ($HOME). */
+  const [path, setPath] = useState<string | null>(null);
+
+  const home = useQuery({
+    queryKey: ['fs-home', klient.baseUrl],
+    queryFn: () => klient.core(IHostFolderBrowser).home(),
+  });
+  const browse = useQuery({
+    queryKey: ['fs-browse', klient.baseUrl, path],
+    queryFn: () =>
+      path === null
+        ? klient.core(IHostFolderBrowser).browse()
+        : klient.core(IHostFolderBrowser).browse(path),
+  });
+
+  const select = useMutation({
+    mutationFn: (root: string) => klient.core(IWorkspaceService).createOrTouch(root),
+    onSuccess: async (workspace) => {
+      await queryClient.invalidateQueries({ queryKey: ['workspaces', klient.baseUrl] });
+      onSelect(workspace);
+    },
+  });
+
+  const workspaceList = workspaces ?? [];
+  /** normalized root → trusted; undefined when the server predates `workspaceTrust`. */
+  const trustByRoot = useQuery({
+    queryKey: ['workspace-trust', klient.baseUrl, workspaceList.map((ws) => ws.id).join(',')],
+    enabled: workspaceList.length > 0,
+    retry: false,
+    queryFn: async () => {
+      const entries = await Promise.all(
+        workspaceList.map(async (ws) => {
+          try {
+            const snapshot = await fetchWorkspaceSnapshot(klient, ws.id);
+            return [normalizePath(ws.root), snapshot.program.trusted] as const;
+          } catch {
+            return [normalizePath(ws.root), undefined] as const;
+          }
+        }),
+      );
+      return new Map(entries);
+    },
+  });
+
+  const workspaceRoots = new Set(workspaceList.map((ws) => normalizePath(ws.root)));
+  const current = browse.data ?? null;
+  const recents = home.data?.recent_roots ?? [];
+  const isCurrentWorkspace = current !== null && workspaceRoots.has(normalizePath(current.path));
+
+  const renderEntry = (entry: FsBrowseEntry) => {
+    const isWorkspace = workspaceRoots.has(normalizePath(entry.path));
+    const trusted = trustByRoot.data?.get(normalizePath(entry.path));
+    return (
+      <button
+        key={entry.path}
+        type="button"
+        title={entry.path}
+        onClick={() => {
+          setPath(entry.path);
+        }}
+        className="flex w-full items-center gap-2 px-3 py-1 text-left hover:bg-neutral-900"
+      >
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-neutral-200">
+          {entry.name}/
+        </span>
+        {isWorkspace && trusted !== undefined ? (
+          <span
+            className={`shrink-0 rounded border px-1 text-[9px] font-semibold uppercase tracking-wider ${
+              trusted
+                ? 'border-emerald-800 text-emerald-400'
+                : 'border-amber-800 text-amber-400'
+            }`}
+          >
+            {trusted ? 'trusted' : 'untrusted'}
+          </span>
+        ) : null}
+        {isWorkspace ? (
+          <span className="shrink-0 rounded border border-sky-800 px-1 text-[9px] font-semibold uppercase tracking-wider text-sky-400">
+            workspace
+          </span>
+        ) : null}
+      </button>
+    );
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex flex-col gap-1 border-b border-neutral-800 px-3 py-2">
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => {
+              setPath(null);
+            }}
+            className="shrink-0 rounded border border-neutral-700 px-2 py-0.5 text-[10px] text-neutral-300 hover:border-sky-600"
+          >
+            home
+          </button>
+          <button
+            type="button"
+            disabled={!current?.parent}
+            onClick={() => {
+              if (current?.parent) setPath(current.parent);
+            }}
+            className="shrink-0 rounded border border-neutral-700 px-2 py-0.5 text-[10px] text-neutral-300 hover:border-sky-600 disabled:opacity-40"
+          >
+            up
+          </button>
+          <button
+            type="button"
+            disabled={current === null || select.isPending}
+            onClick={() => {
+              if (current !== null) select.mutate(current.path);
+            }}
+            className="ml-auto shrink-0 rounded border border-sky-700 px-2 py-0.5 text-[10px] font-semibold text-sky-300 hover:bg-sky-950 disabled:opacity-40"
+          >
+            {select.isPending ? 'selecting…' : isCurrentWorkspace ? 'select' : 'register & select'}
+          </button>
+        </div>
+        <span
+          title={current?.path}
+          className="truncate font-mono text-[10px] text-neutral-500"
+        >
+          {current?.path ?? '…'}
+        </span>
+      </div>
+      {recents.length > 0 ? (
+        <div className="flex flex-wrap items-center gap-1 border-b border-neutral-800 px-3 py-2">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-600">
+            recent
+          </span>
+          {recents.map((root) => (
+            <button
+              key={root}
+              type="button"
+              title={root}
+              onClick={() => {
+                setPath(root);
+              }}
+              className="max-w-32 truncate rounded border border-neutral-800 px-1.5 py-0.5 font-mono text-[10px] text-neutral-400 hover:border-sky-600 hover:text-neutral-200"
+            >
+              {baseName(root)}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {browse.isError ? (
+          <div className="px-3 py-2">
+            <ErrorLine error={browse.error} />
+          </div>
+        ) : current === null ? (
+          <div className="px-3 py-2 text-[11px] text-neutral-600 italic">loading…</div>
+        ) : current.entries.length === 0 ? (
+          <div className="px-3 py-2 text-[11px] text-neutral-600 italic">no subdirectories</div>
+        ) : (
+          current.entries.map(renderEntry)
+        )}
+      </div>
+      {select.isError ? (
+        <div className="border-t border-neutral-800 px-3 py-1">
+          <ErrorLine error={select.error} />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/WorkspaceServicesView.tsx b/apps/kimi-inspect/src/components/WorkspaceServicesView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a3a65e88157f52bf676e37e44fc5115cde8ea2f3
--- /dev/null
+++ b/apps/kimi-inspect/src/components/WorkspaceServicesView.tsx
@@ -0,0 +1,138 @@
+/**
+ * Workspace Services view — the workspace-scope Service reflection as a
+ * standalone rail view. Same Postman-style three-pane layout
+ * (`ScopePanelsScrollspy`) as App Services, plus a left sidebar holding the
+ * workspace picker: a server-side directory browser (`WorkspaceDirBrowser`,
+ * over the App-scope `IHostFolderBrowser`) that marks already-registered
+ * workspaces and registers a picked folder on demand. The proxies resolve on
+ * the `/workspace/:id` route, so a workspace must be selected before any
+ * Service is callable. Picking one materializes its handler on demand
+ * server-side (`IWorkspaceLifecycleService.handlerFor` is create-or-get), no
+ * manual join needed.
+ */
+
+import { IWorkspaceService } from '@moonshot-ai/agent-core-v2/app/workspace/workspace';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState, type ReactNode } from 'react';
+
+import { useConnection } from '../connection';
+import { fetchWorkspaceSnapshot } from '../snapshots/api';
+import { Badge, ErrorLine } from '../ui';
+import { WorkspaceDirBrowser } from './WorkspaceDirBrowser';
+
+export function WorkspaceServicesView() {
+  const { klient, baseUrl } = useConnection();
+  const [workspaceId, setWorkspaceId] = useState<string | null>(null);
+
+  const workspaces = useQuery({
+    queryKey: ['workspaces', klient.baseUrl],
+    queryFn: () => klient.core(IWorkspaceService).list(),
+  });
+  const snapshot = useQuery({
+    queryKey: ['workspace-snapshot', klient.baseUrl, workspaceId],
+    queryFn: () => fetchWorkspaceSnapshot(klient, workspaceId as string),
+    enabled: workspaceId !== null,
+    refetchInterval: 1_000,
+  });
+
+  useEffect(() => {
+    setWorkspaceId(null);
+  }, [baseUrl]);
+
+  const selected = (workspaces.data ?? []).find((ws) => ws.id === workspaceId);
+  const data = snapshot.data;
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1">
+      <aside className="flex w-72 shrink-0 flex-col border-r border-neutral-800">
+        <div className="border-b border-neutral-800 px-3 py-2">
+          <div className="text-[10px] font-semibold uppercase tracking-wider text-neutral-500">
+            Workspace
+          </div>
+          <div title={selected?.root} className="truncate font-mono text-[11px] text-neutral-300">
+            {selected === undefined ? (
+              <span className="text-neutral-600 italic">none selected</span>
+            ) : (
+              `${selected.name} — ${selected.root}`
+            )}
+          </div>
+          {workspaces.isError ? <ErrorLine error={workspaces.error} /> : null}
+        </div>
+        <WorkspaceDirBrowser
+          klient={klient}
+          workspaces={workspaces.data}
+          onSelect={(workspace) => setWorkspaceId(workspace.id)}
+        />
+      </aside>
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
+        {workspaceId === null ? (
+          <div className="flex h-full items-center justify-center text-[12px] text-neutral-600 italic">
+            select a workspace to inspect
+          </div>
+        ) : snapshot.isError ? (
+          <ErrorLine error={snapshot.error} />
+        ) : data === undefined ? (
+          <div className="text-[12px] text-neutral-600">loading workspace snapshot…</div>
+        ) : (
+          <div className="space-y-4">
+            <SnapshotPanel title="Workspace">
+              <SnapshotRow label="id" value={data.metadata.id} />
+              <SnapshotRow label="name" value={data.metadata.name} />
+              <SnapshotRow label="root" value={data.metadata.root} />
+              <SnapshotRow label="lifecycle" value={<Badge tone="sky">{data.lifecycle}</Badge>} />
+            </SnapshotPanel>
+            <SnapshotPanel title="Program">
+              <SnapshotRow label="binding" value={`${data.program.binding.workspaceId} / ${data.program.binding.runtimeId}`} />
+              <SnapshotRow label="status" value={<Badge tone={data.program.status === 'ready' ? 'green' : 'neutral'}>{data.program.status}</Badge>} />
+              <SnapshotRow label="ready" value={String(data.program.ready)} />
+              <SnapshotRow label="generation" value={data.program.generation ?? 'unavailable'} />
+              <SnapshotRow label="trusted" value={data.program.trusted === undefined ? 'unknown' : String(data.program.trusted)} />
+              <SnapshotRow label="skills" value={`${data.program.catalog.skills.total} total / ${data.program.catalog.skills.invocable} invocable / ${data.program.catalog.skills.skipped} skipped`} />
+              <SnapshotRow label="agent profiles" value={String(data.program.catalog.agentProfiles)} />
+              <SnapshotRow label="MCP servers" value={String(data.program.catalog.mcpServers)} />
+            </SnapshotPanel>
+            <SnapshotPanel title="Runtimes">
+              {data.runtimes.runtimes.length === 0 ? (
+                <div className="text-[11px] text-neutral-600">no current generations</div>
+              ) : data.runtimes.runtimes.map((runtime) => (
+                <div key={`${runtime.runtimeId}:${runtime.generation}`} className="rounded border border-neutral-800 bg-neutral-950/40 p-2">
+                  <div className="mb-1 flex items-center gap-2">
+                    <span className="font-mono text-[12px] text-neutral-200">{runtime.runtimeId}</span>
+                    <Badge tone={runtime.status === 'ready' ? 'green' : 'neutral'}>{runtime.status}</Badge>
+                  </div>
+                  <SnapshotRow label="generation" value={runtime.generation} />
+                  <SnapshotRow label="capabilities" value={runtime.capabilities.join(', ') || 'none'} />
+                </div>
+              ))}
+            </SnapshotPanel>
+            <SnapshotPanel title="Source provenance">
+              <SnapshotRow label="skills" value={data.program.sources.skills.map((source) => `${source.source}:${source.count}`).join(', ') || 'none'} />
+              <SnapshotRow label="skill roots" value={data.program.sources.skillRoots.join(', ') || 'none'} />
+              <SnapshotRow label="agent profiles" value={data.program.sources.agentProfiles.map((source) => `${source.sourceId}:${source.profiles.join('|')}`).join(', ') || 'none'} />
+              <SnapshotRow label="instructions" value={data.program.sources.instructionPaths.join(', ') || 'none'} />
+              <SnapshotRow label="MCP" value={data.program.sources.mcpServers.join(', ') || 'none'} />
+            </SnapshotPanel>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SnapshotPanel({ title, children }: { readonly title: string; readonly children: ReactNode }) {
+  return (
+    <section className="rounded border border-neutral-800 bg-neutral-900/30 p-3">
+      <h2 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-neutral-400">{title}</h2>
+      <div className="space-y-1">{children}</div>
+    </section>
+  );
+}
+
+function SnapshotRow({ label, value }: { readonly label: string; readonly value: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[120px_minmax(0,1fr)] gap-2 text-[11px]">
+      <span className="text-neutral-600">{label}</span>
+      <span className="min-w-0 break-all font-mono text-neutral-300">{value}</span>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/audit/AuditPanel.tsx b/apps/kimi-inspect/src/components/audit/AuditPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..318e443bebf5714b8559a23c6a86142044a0cafa
--- /dev/null
+++ b/apps/kimi-inspect/src/components/audit/AuditPanel.tsx
@@ -0,0 +1,188 @@
+/**
+ * Audit panel — the `Audit` tab of the chat view's right dock
+ * (`RightPanel`): replays how the visible `ChatStore` was built, entry by
+ * entry. It used to be a standalone column docked inside the chat view.
+ *
+ *  - Timeline (draggable slider + entry list): every REST history page,
+ *    every WS message (entity / delta / state), and every channel event
+ *    (subscribe ack, reconnect, catch-up fallback, prompt/cancel), with its
+ *    timestamp.
+ *  - Detail tabs for the selected entry: `Diff` (structural diff vs the
+ *    previous entry — added/modified/removed colored), `State` (the full
+ *    store state at that point: entity timeline plus the interaction /
+ *    task / todo / session.state entities), `Event` (the raw REST
+ *    request/response or WS payload).
+ */
+
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+
+import { diffValue, type DiffNode } from '../../audit/diff';
+import { serializeState } from '../../audit/serialize';
+import type { AuditEntry, AuditTrail } from '../../audit/trail';
+import { tailTrunc } from '../../audit/truncate';
+import { EMPTY_CHAT_STATE } from '../../transcript/store';
+import { Badge } from '../../ui';
+import { plainNode, StateTree } from './StateTree';
+
+const KIND_TONE: Record<AuditEntry['kind'], 'sky' | 'green' | 'neutral'> = {
+  rest: 'sky',
+  ws: 'green',
+  event: 'neutral',
+};
+
+function fmtTime(iso: string): string {
+  const d = new Date(iso);
+  const base = d.toLocaleTimeString('en-GB', { hour12: false });
+  return `${base}.${String(d.getMilliseconds()).padStart(3, '0')}`;
+}
+
+/** Raw payload view: full JSON, with long strings tail-truncated. */
+function EventJson({ entry }: { entry: AuditEntry }) {
+  const payload = useMemo(() => {
+    switch (entry.kind) {
+      case 'rest':
+        return {
+          request: entry.request,
+          mode: entry.mode,
+          messageCount: entry.messageCount,
+          inFlight: entry.inFlight,
+        };
+      case 'ws':
+        return entry.message;
+      case 'event':
+        return { event: entry.event, detail: entry.detail };
+    }
+  }, [entry]);
+  const text = JSON.stringify(
+    payload,
+    (_key, value: unknown) => (typeof value === 'string' ? tailTrunc(value) : value),
+    2,
+  );
+  return (
+    <pre className="p-2 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-neutral-300">
+      {text}
+    </pre>
+  );
+}
+
+export function AuditPanel({ trail }: { trail: AuditTrail }) {
+  const entries = useSyncExternalStore(trail.subscribe, () => trail.getEntries());
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [follow, setFollow] = useState(true);
+  const [tab, setTab] = useState<'diff' | 'state' | 'event'>('diff');
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const current: AuditEntry | undefined =
+    entries.find((entry) => entry.index === selectedIndex) ?? entries.at(-1);
+  const currentPos = current !== undefined ? entries.indexOf(current) : -1;
+
+  // Follow-latest: jump to (and scroll to) the newest entry as it lands.
+  useEffect(() => {
+    if (!follow || entries.length === 0) return;
+    setSelectedIndex(entries.at(-1)!.index);
+    const list = listRef.current;
+    if (list !== null) list.scrollTop = list.scrollHeight;
+  }, [entries, follow]);
+
+  const root: DiffNode | null = useMemo(() => {
+    if (current === undefined || tab === 'event') return null;
+    if (tab === 'state') return plainNode(serializeState(current.state));
+    const prevState =
+      currentPos > 0 ? (entries[currentPos - 1]?.state ?? EMPTY_CHAT_STATE) : EMPTY_CHAT_STATE;
+    return diffValue(serializeState(prevState), serializeState(current.state));
+  }, [current, currentPos, entries, tab]);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-2 border-b border-neutral-800 px-3 py-2">
+        <span className="text-[12px] font-medium text-neutral-200">Transcript audit</span>
+        <Badge tone="neutral">{entries.length} entries</Badge>
+      </div>
+
+      <div className="flex items-center gap-2 border-b border-neutral-800 px-3 py-1.5">
+        <input
+          type="range"
+          className="min-w-0 flex-1 accent-sky-500"
+          min={0}
+          max={Math.max(0, entries.length - 1)}
+          value={Math.max(0, currentPos)}
+          disabled={entries.length === 0}
+          onChange={(e) => {
+            const pos = Number(e.target.value);
+            const entry = entries[pos];
+            if (entry === undefined) return;
+            setFollow(pos === entries.length - 1);
+            setSelectedIndex(entry.index);
+          }}
+        />
+        <label className="flex items-center gap-1 text-[10px] text-neutral-500 select-none">
+          <input
+            type="checkbox"
+            checked={follow}
+            onChange={(e) => setFollow(e.target.checked)}
+            className="accent-sky-500"
+          />
+          follow
+        </label>
+      </div>
+
+      <div ref={listRef} className="h-56 shrink-0 overflow-y-auto border-b border-neutral-800">
+        {entries.length === 0 ? (
+          <div className="px-3 py-2 text-[11px] text-neutral-600 italic">
+            Nothing recorded yet — the initial history load is still running.
+          </div>
+        ) : null}
+        {entries.map((entry, pos) => (
+          <div
+            key={entry.index}
+            className={`flex cursor-pointer items-center gap-2 px-3 py-1 text-[11px] hover:bg-neutral-800/70 ${
+              entry.index === current?.index ? 'bg-sky-950/50' : ''
+            }`}
+            onClick={() => {
+              setFollow(pos === entries.length - 1);
+              setSelectedIndex(entry.index);
+            }}
+          >
+            <span className="w-8 shrink-0 font-mono text-neutral-600">#{entry.index}</span>
+            <span className="shrink-0 font-mono text-neutral-500">{fmtTime(entry.at)}</span>
+            <Badge tone={KIND_TONE[entry.kind]}>{entry.kind}</Badge>
+            <span className="min-w-0 truncate text-neutral-400" title={entry.summary}>
+              {entry.summary}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-1 border-b border-neutral-800 px-3 py-1.5">
+        {(['diff', 'state', 'event'] as const).map((name) => (
+          <button
+            key={name}
+            className={`rounded px-2 py-0.5 text-[11px] ${
+              tab === name
+                ? 'bg-neutral-800 text-neutral-100'
+                : 'text-neutral-500 hover:text-neutral-300'
+            }`}
+            onClick={() => setTab(name)}
+          >
+            {name === 'diff' ? 'Diff vs prev' : name === 'state' ? 'State' : 'Event'}
+          </button>
+        ))}
+        {current !== undefined ? (
+          <span className="ml-auto font-mono text-[10px] text-neutral-600">
+            entry #{current.index}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-2">
+        {current === undefined ? (
+          <div className="px-1 py-2 text-[11px] text-neutral-600 italic">No entry selected.</div>
+        ) : tab === 'event' ? (
+          <EventJson entry={current} />
+        ) : root !== null ? (
+          <StateTree root={root} defaultDepth={tab === 'state' ? 2 : 0} />
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/audit/StateTree.test.tsx b/apps/kimi-inspect/src/components/audit/StateTree.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..70766c63908540ff39d23b067b2f01f12e1401d2
--- /dev/null
+++ b/apps/kimi-inspect/src/components/audit/StateTree.test.tsx
@@ -0,0 +1,161 @@
+/**
+ * StateTree rendering tests (SSR via renderToStaticMarkup — no DOM needed).
+ * Locks in two audit-panel readability rules:
+ *  1. Unchanged subtrees collapse into `{ …N }` rows — never a one-line
+ *     compact-JSON dump (the copy-on-write fast path gives them no diff
+ *     children, and rendering the raw value destroyed the layout).
+ *  2. Whole-subtree adds expand into fully fielded, indented tree rows.
+ */
+
+import type { AssistantMessage, StepMessage, TurnMessage } from '@moonshot-ai/kap-server/protocol';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { diffValue } from '../../audit/diff';
+import { serializeState } from '../../audit/serialize';
+import { EMPTY_CHAT_STATE, type ChatState } from '../../transcript/store';
+import { plainNode, StateTree } from './StateTree';
+
+const T0 = Date.parse('2026-01-01T00:00:00.000Z');
+let tick = 0;
+
+function ts(): number {
+  tick += 1;
+  return T0 + tick * 1000;
+}
+
+function turnMsg(n: number, text?: string): TurnMessage {
+  return {
+    type: 'turn',
+    session_id: 's1',
+    agent_id: 'main',
+    timestamp: ts(),
+    turn_id: `t${n}`,
+    ordinal: n,
+    status: 'completed',
+    origin: { kind: 'user' },
+    user_message_id: text,
+  };
+}
+
+function stepMsg(stepId: string): StepMessage {
+  return {
+    type: 'step',
+    session_id: 's1',
+    agent_id: 'main',
+    timestamp: ts(),
+    step_id: stepId,
+    turn_id: stepId.split('.')[0] ?? 't0',
+    ordinal: Number(stepId.split('.')[1] ?? '1'),
+    status: 'running',
+  };
+}
+
+function assistantMsg(stepId: string, text: string): AssistantMessage {
+  return {
+    type: 'assistant',
+    session_id: 's1',
+    agent_id: 'main',
+    timestamp: ts(),
+    message_id: `${stepId}.a0`,
+    turn_id: stepId.split('.')[0] ?? 't0',
+    step_id: stepId,
+    status: 'streaming',
+    text,
+  };
+}
+
+type FlatMessage = TurnMessage | StepMessage | AssistantMessage;
+
+function stateWithTimeline(items: readonly FlatMessage[]): ChatState {
+  return {
+    ...EMPTY_CHAT_STATE,
+    entries: items.map((message) => ({
+      key:
+        message.type === 'turn'
+          ? `turn:${message.turn_id}`
+          : message.type === 'step'
+            ? `step:${message.step_id}`
+            : `assistant:${message.message_id}`,
+      message,
+    })),
+  };
+}
+
+describe('StateTree', () => {
+  it('collapses unchanged subtrees instead of dumping compact JSON', () => {
+    const t0 = turnMsg(0, 'PROMPT_ZERO');
+    const prev = stateWithTimeline([t0, turnMsg(1, 'PROMPT_ONE')]);
+    const next: ChatState = stateWithTimeline([t0, turnMsg(1, 'PROMPT_ONE_V2')]);
+    const html = renderToStaticMarkup(
+      <StateTree root={diffValue(serializeState(prev), serializeState(next))} />,
+    );
+    // No one-line JSON blob anywhere.
+    expect(html).not.toContain('{"type"');
+    // The unchanged turn t0 stays folded: its marker is not rendered…
+    expect(html).not.toContain('PROMPT_ZERO');
+    // …while the modified turn opens and shows old → new.
+    expect(html).toContain('PROMPT_ONE_V2');
+    expect(html).toContain('PROMPT_ONE');
+    expect(html).toContain('→');
+  });
+
+  it('expands whole-subtree adds into full field rows (all keys, no JSON dump)', () => {
+    const root = diffValue(
+      serializeState(EMPTY_CHAT_STATE),
+      serializeState(stateWithTimeline([turnMsg(0, 'HELLO')])),
+    );
+    const html = renderToStaticMarkup(<StateTree root={root} />);
+    expect(html).not.toContain('{"type"');
+    for (const field of ['turn_id', 'ordinal', 'status', 'origin', 'timestamp', 'agent_id']) {
+      expect(html).toContain(field);
+    }
+    expect(html).toContain('HELLO');
+  });
+
+  it('expands added subtrees with id-based keys and renders closing braces', () => {
+    const html = renderToStaticMarkup(
+      <StateTree
+        root={diffValue(
+          serializeState(EMPTY_CHAT_STATE),
+          serializeState(
+            stateWithTimeline([turnMsg(0), stepMsg('t0.1'), assistantMsg('t0.1', 'hmm')]),
+          ),
+        )}
+      />,
+    );
+    // Array children are keyed by their ids, not #indices.
+    expect(html).toContain('t0.1');
+    expect(html).toContain('t0.1.a0');
+    expect(html).not.toContain('#0');
+    // Open containers end with an explicit closing brace row.
+    expect(html).toContain(']');
+    expect(html).toContain('}');
+  });
+
+  it('plain state mode opens to defaultDepth and shows all top-level fields', () => {
+    const html = renderToStaticMarkup(
+      <StateTree
+        root={plainNode(serializeState(stateWithTimeline([turnMsg(0)])))}
+        defaultDepth={2}
+      />,
+    );
+    for (const field of ['timeline', 'interactions', 'tasks', 'todos', 'hasMoreOlder']) {
+      expect(html).toContain(field);
+    }
+    expect(html).not.toContain('{"type"');
+  });
+
+  it('collapses multiline strings into a hover-preview button', () => {
+    const root = plainNode({ note: 'line one\nline two\nline three', single: 'one-liner' });
+    const html = renderToStaticMarkup(<StateTree root={root} defaultDepth={1} />);
+    // The multiline value renders as a compact button: first-line preview +
+    // line count, with the remaining lines NOT inlined into the tree (they
+    // only appear in the hover panel, which needs a real mouse to open).
+    expect(html).toContain('&quot;line one&quot; ⏎ 3');
+    expect(html).not.toContain('line two');
+    expect(html).not.toContain('line three');
+    // Single-line strings keep the inline rendering.
+    expect(html).toContain('&quot;one-liner&quot;');
+  });
+});
diff --git a/apps/kimi-inspect/src/components/audit/StateTree.tsx b/apps/kimi-inspect/src/components/audit/StateTree.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..66fd4f69ed1d046782b4911f3ff0bae69e0db8f8
--- /dev/null
+++ b/apps/kimi-inspect/src/components/audit/StateTree.tsx
@@ -0,0 +1,259 @@
+/**
+ * Diff-aware state tree for the audit panel.
+ *
+ * Renders a serialized `ChatState` (see `audit/serialize.ts`) as a
+ * collapsible tree, colored by the structural diff against the previous
+ * trail entry: added = green, removed = red + strikethrough, modified =
+ * amber (`old → new` on leaves). Every field is rendered — long strings
+ * are tail-truncated (`tailTrunc`) but no key is ever dropped, and a string
+ * containing newlines collapses into one compact button (first-line preview
+ * + line count) whose hover pops a `fixed` full-text panel at the button's
+ * right edge.
+ *
+ * The tree is driven entirely by a `DiffNode` root: diff mode passes
+ * `diffValue(prev, next)`, plain state mode passes `plainNode(value)`.
+ * Diff nodes that carry an object/array but no children (whole-subtree
+ * added/removed, or reference-equal unchanged subtrees collapsed by the
+ * diff fast path) are expanded into same-status blocks at render time
+ * (`blockNode`) — they show as collapsible `{ …N }` rows instead of an
+ * unreadable one-line JSON dump.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { elementId, type DiffNode, type DiffStatus } from '../../audit/diff';
+import { tailTrunc } from '../../audit/truncate';
+
+/** Build an all-`unchanged` tree over a plain value (plain state mode). */
+export function plainNode(value: unknown): DiffNode {
+  return blockNode(value, 'unchanged');
+}
+
+function blockNode(value: unknown, status: DiffStatus): DiffNode {
+  const current = status === 'removed' ? undefined : value;
+  const prev = status === 'removed' ? value : undefined;
+  if (typeof value === 'object' && value !== null) {
+    const children = new Map<string, DiffNode>();
+    const entries: Array<readonly [string, unknown]> = Array.isArray(value)
+      ? value.map((item, index) => [elementId(item) ?? `#${index}`, item] as const)
+      : Object.entries(value as Record<string, unknown>).filter(([, item]) => item !== undefined);
+    for (const [key, item] of entries) children.set(key, blockNode(item, status));
+    return { status, value: current, prev, children };
+  }
+  return { status, value: current, prev };
+}
+
+function subtreeHasChanges(node: DiffNode): boolean {
+  if (node.status !== 'unchanged') return true;
+  if (node.children === undefined) return false;
+  for (const child of node.children.values()) {
+    if (subtreeHasChanges(child)) return true;
+  }
+  return false;
+}
+
+const ROW_TONE: Record<DiffStatus, string> = {
+  unchanged: 'border-transparent',
+  added: 'border-green-800 bg-green-950/40',
+  removed: 'border-red-800 bg-red-950/40',
+  modified: 'border-amber-700 bg-amber-950/30',
+};
+
+const TEXT_TONE: Record<DiffStatus, string> = {
+  unchanged: 'text-neutral-400',
+  added: 'text-green-400',
+  removed: 'text-red-400 line-through',
+  modified: 'text-amber-300',
+};
+
+function Leaf({ value, tone }: { value: unknown; tone: DiffStatus }) {
+  const className = TEXT_TONE[tone];
+  if (value === null) return <span className={className}>null</span>;
+  if (value === undefined) return <span className={className}>undefined</span>;
+  if (typeof value === 'string') {
+    if (value.includes('\n')) return <MultilineString value={value} tone={tone} />;
+    return (
+      <span className={`${className} whitespace-pre-wrap break-all`}>"{tailTrunc(value)}"</span>
+    );
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return <span className={className}>{String(value)}</span>;
+  }
+  return <span className={className}>{JSON.stringify(value) ?? 'unknown'}</span>;
+}
+
+/**
+ * Multiline string leaf: rendered as one compact button (first-line preview
+ * + line count) so a prompt or tool output never stretches the tree. Hovering
+ * the button pops a `fixed` panel at its right edge with the full text —
+ * `fixed` because the tree sits inside an `overflow-y-auto` column that
+ * would clip an absolutely-positioned popup. A 150 ms close delay lets the
+ * pointer travel from the button into the panel (to scroll or select).
+ * `popupStyle` keeps the whole panel inside the viewport: the total height
+ * is capped by the space left below the clamped top edge, and the panel
+ * flips to the button's left side when the remaining right space is cramped.
+ */
+function popupStyle(rect: DOMRect): React.CSSProperties {
+  const margin = 8;
+  const vh = window.innerHeight;
+  const vw = window.innerWidth;
+  const maxHeight = Math.max(160, Math.floor(vh * 0.7));
+  const top = Math.max(margin, Math.min(rect.top, vh - maxHeight - margin));
+  const rightSpace = vw - rect.right - margin * 2;
+  if (rightSpace >= 320) {
+    return { left: rect.right + margin, top, maxHeight, width: Math.min(560, rightSpace) };
+  }
+  const leftSpace = rect.left - margin * 2;
+  return {
+    right: vw - rect.left + margin,
+    top,
+    maxHeight,
+    width: Math.min(560, Math.max(280, leftSpace)),
+  };
+}
+
+function MultilineString({ value, tone }: { value: string; tone: DiffStatus }) {
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(closeTimer.current), []);
+
+  const lines = value.split('\n');
+  const firstLine = lines[0] ?? '';
+  const preview = firstLine.length > 40 ? `${firstLine.slice(0, 40)}…` : firstLine;
+
+  const open = (e: React.MouseEvent<HTMLButtonElement>) => {
+    clearTimeout(closeTimer.current);
+    setRect(e.currentTarget.getBoundingClientRect());
+  };
+  const scheduleClose = () => {
+    clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(() => setRect(null), 150);
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`${TEXT_TONE[tone]} cursor-pointer rounded border border-neutral-700 bg-neutral-900 px-1 hover:border-sky-600`}
+        onMouseEnter={open}
+        onMouseLeave={scheduleClose}
+      >
+        {`"${preview}" ⏎ ${lines.length}`}
+      </button>
+      {rect !== null ? (
+        <div
+          className="fixed z-50 flex flex-col rounded border border-neutral-700 bg-neutral-950 shadow-xl"
+          style={popupStyle(rect)}
+          onMouseEnter={() => clearTimeout(closeTimer.current)}
+          onMouseLeave={scheduleClose}
+        >
+          <div className="shrink-0 border-b border-neutral-800 px-3 py-1 text-[10px] text-neutral-500">
+            {lines.length} lines · {value.length} chars
+          </div>
+          <pre className="min-h-0 flex-1 overflow-auto px-3 py-2 font-mono text-[11px] whitespace-pre-wrap break-all text-neutral-200">
+            {tailTrunc(value, 5000)}
+          </pre>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function Node({
+  name,
+  node,
+  depth,
+  defaultDepth,
+}: {
+  name: string;
+  node: DiffNode;
+  depth: number;
+  defaultDepth: number;
+}) {
+  // Childless object/array nodes (whole-subtree added/removed, or
+  // reference-equal unchanged subtrees) are expanded into same-status
+  // blocks so every field stays visible — never a one-line JSON dump.
+  const raw = node.status === 'removed' ? node.prev : node.value;
+  const effective =
+    node.children === undefined && typeof raw === 'object' && raw !== null
+      ? blockNode(raw, node.status)
+      : node;
+
+  const [open, setOpen] = useState(() => subtreeHasChanges(effective) || depth < defaultDepth);
+  const label = <span className={TEXT_TONE[effective.status]}>{name}: </span>;
+
+  if (effective.children === undefined) {
+    return (
+      <div
+        className={`border-l-2 px-1 font-mono text-[11px] leading-[1.7] ${ROW_TONE[effective.status]}`}
+        style={{ paddingLeft: `${depth * 14 + 4}px` }}
+      >
+        {label}
+        {effective.status === 'modified' ? (
+          <>
+            <Leaf value={effective.prev} tone="removed" />
+            <span className="text-neutral-600"> → </span>
+            <Leaf value={effective.value} tone="added" />
+          </>
+        ) : (
+          <Leaf value={raw} tone={effective.status} />
+        )}
+      </div>
+    );
+  }
+
+  const isArray = Array.isArray(raw);
+  const [openBrace, closeBrace] = isArray ? ['[', ']'] : ['{', '}'];
+  return (
+    <div>
+      <div
+        className={`cursor-pointer select-none border-l-2 px-1 font-mono text-[11px] leading-[1.7] hover:bg-neutral-800/70 ${ROW_TONE[effective.status]}`}
+        style={{ paddingLeft: `${depth * 14 + 4}px` }}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span className="text-neutral-600">{open ? '▾ ' : '▸ '}</span>
+        {label}
+        <span className="text-neutral-600">
+          {open ? openBrace : `${openBrace} …${effective.children.size} ${closeBrace}`}
+        </span>
+      </div>
+      {open ? (
+        <>
+          {[...effective.children.entries()].map(([key, child]) => (
+            <Node key={key} name={key} node={child} depth={depth + 1} defaultDepth={defaultDepth} />
+          ))}
+          <div
+            className={`border-l-2 px-1 font-mono text-[11px] leading-[1.7] ${ROW_TONE[effective.status]}`}
+            style={{ paddingLeft: `${depth * 14 + 4}px` }}
+          >
+            <span className="text-neutral-600">{closeBrace}</span>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+export function StateTree({
+  root,
+  defaultDepth = 0,
+}: {
+  root: DiffNode;
+  /** Unchanged levels opened by default (diff mode 0 = only changes auto-open). */
+  defaultDepth?: number;
+}) {
+  if (root.children === undefined) {
+    return (
+      <div className="py-1">
+        <Node name="state" node={root} depth={0} defaultDepth={defaultDepth} />
+      </div>
+    );
+  }
+  return (
+    <div className="py-1">
+      {[...root.children.entries()].map(([key, child]) => (
+        <Node key={key} name={key} node={child} depth={0} defaultDepth={defaultDepth} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/di/DiEventsPanel.tsx b/apps/kimi-inspect/src/components/di/DiEventsPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c89714cede136faf64834db21e1a729f63c01b72
--- /dev/null
+++ b/apps/kimi-inspect/src/components/di/DiEventsPanel.tsx
@@ -0,0 +1,157 @@
+/**
+ * DI Events panel — event-subscription introspection
+ * (`IDebugEventsService.subscriptions`), two merged sides:
+ *
+ *   - Subscriptions: the unit-book side — every materialized unit's ledger
+ *     entries labeled as an event subscription (`on:<name>` from a named
+ *     Emitter or the fiber `on` capability, `disposable:EventSubscription`
+ *     from an unnamed one), grouped by scope path;
+ *   - Bus listeners: the emitter-side fallback — per-`IEventBus` listener
+ *     counts (`*` = the full stream) plus the global `IEventService` count,
+ *     which also cover subscriptions never registered on a unit book.
+ *
+ * Pure React + Tailwind.
+ */
+import type {
+  DebugEventBusSnapshot,
+  DebugEventSubscription,
+  DebugEventSubscriptions,
+} from '@moonshot-ai/agent-core-v2/features/debugEvents/debugEvents';
+
+import { Badge } from '../../ui';
+
+const KIND_TONES: Record<DebugEventSubscription['kind'], 'neutral' | 'sky' | 'violet'> = {
+  disposer: 'neutral',
+  effect: 'sky',
+  ledger: 'violet',
+};
+
+export function DiEventsPanel({ data }: { data: DebugEventSubscriptions }) {
+  const groups = groupByScope(data.subscriptions);
+  return (
+    <div>
+      <div className="mb-1 text-[10px] font-semibold tracking-wider text-neutral-600 uppercase">
+        subscriptions ({data.subscriptions.length})
+      </div>
+      {groups.length === 0 ? (
+        <div className="mb-4 text-[11px] text-neutral-600 italic">
+          no event subscriptions on any unit book
+        </div>
+      ) : (
+        groups.map(([scopePath, subs]) => (
+          <div
+            key={scopePath}
+            className="mb-2 rounded-lg border border-neutral-800 bg-neutral-900/60"
+          >
+            <div className="border-b border-neutral-800/60 px-3 py-2">
+              <span className="font-mono text-[11px] text-neutral-200">{scopePath}</span>
+              <span className="ml-2 text-[10px] text-neutral-600">{subs.length}</span>
+            </div>
+            <div className="px-3 py-2">
+              {subs.map((sub, i) => (
+                <div
+                  key={`${sub.unit}:${sub.label}:${i}`}
+                  className="mb-1 flex items-center gap-2 rounded border border-neutral-800/70 bg-neutral-950/40 px-2 py-1.5"
+                >
+                  <span
+                    className="min-w-0 truncate font-mono text-[11px] text-neutral-200"
+                    title={sub.unit}
+                  >
+                    {sub.unit}
+                  </span>
+                  {sub.uid !== undefined ? (
+                    <span className="shrink-0 text-[10px] text-neutral-600">#{sub.uid}</span>
+                  ) : null}
+                  <span
+                    className="shrink-0 font-mono text-[10px] text-sky-400"
+                    title={sub.label}
+                  >
+                    {sub.label}
+                  </span>
+                  <span className="ml-auto shrink-0">
+                    <Badge tone={KIND_TONES[sub.kind]}>{sub.kind}</Badge>
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      )}
+      <div className="mt-4 mb-1 text-[10px] font-semibold tracking-wider text-neutral-600 uppercase">
+        bus listeners
+      </div>
+      {data.buses.length === 0 && data.globalListeners === undefined ? (
+        <div className="text-[11px] text-neutral-600 italic">no materialized event buses</div>
+      ) : (
+        <div className="rounded-lg border border-neutral-800 bg-neutral-900/60 px-3 py-2">
+          {data.globalListeners !== undefined ? (
+            <BusRow scopePath="app" type="eventService (global)" count={data.globalListeners} />
+          ) : null}
+          {data.buses.flatMap((bus) => busRows(bus))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function groupByScope(
+  subs: readonly DebugEventSubscription[],
+): [string, DebugEventSubscription[]][] {
+  const map = new Map<string, DebugEventSubscription[]>();
+  for (const sub of subs) {
+    const group = map.get(sub.scopePath) ?? [];
+    group.push(sub);
+    map.set(sub.scopePath, group);
+  }
+  return [...map.entries()];
+}
+
+function busRows(bus: DebugEventBusSnapshot) {
+  const rows = [
+    <BusRow key={`${bus.scopePath}:*`} scopePath={bus.scopePath} type="*" count={bus.all} />,
+  ];
+  for (const type of Object.keys(bus.perType).toSorted()) {
+    rows.push(
+      <BusRow
+        key={`${bus.scopePath}:${type}`}
+        scopePath={bus.scopePath}
+        type={type}
+        count={bus.perType[type] ?? 0}
+      />,
+    );
+  }
+  for (const agentId of Object.keys(bus.perAgent).toSorted()) {
+    const count = bus.perAgent[agentId] ?? 0;
+    rows.push(
+      <BusRow
+        key={`${bus.scopePath}:agent:${agentId}`}
+        scopePath={bus.scopePath}
+        type={`agent:${agentId}`}
+        count={count}
+      />,
+    );
+  }
+  return rows;
+}
+
+function BusRow({
+  scopePath,
+  type,
+  count,
+}: {
+  scopePath: string;
+  type: string;
+  count: number;
+}) {
+  return (
+    <div className="flex items-center gap-2 py-0.5">
+      <span className="min-w-0 truncate font-mono text-[10px] text-neutral-500" title={scopePath}>
+        {scopePath}
+      </span>
+      <span className="shrink-0 font-mono text-[11px] text-neutral-200" title={type}>
+        {type}
+      </span>
+      <span className="ml-auto shrink-0 font-mono text-[11px] text-neutral-400">{count}</span>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/di/DiGraphPanel.tsx b/apps/kimi-inspect/src/components/di/DiGraphPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d5614f029ba928b02ad29d44cebab9199084c534
--- /dev/null
+++ b/apps/kimi-inspect/src/components/di/DiGraphPanel.tsx
@@ -0,0 +1,374 @@
+/**
+ * DI Deps panel — the persistent dependency DAG (`IDebugGraphService.graph`)
+ * as Finder-style Miller columns with path-scoped relation markers. Edges
+ * point consumer → dependency, so "X depends on Y" ⟺ an edge
+ * `from: X → to: Y`:
+ *
+ *   - column 0 lists the roots: services that never appear as an edge's `to`
+ *     (nothing consumes them, isolated nodes included), token-sorted,
+ *     constrained by the scope filter; each root row carries the level-0
+ *     color bar;
+ *   - clicking a row in column N truncates the expansion path there and
+ *     opens column N+1 with that service's direct dependencies (along `to`,
+ *     unfiltered — cross-scope rows get a scopePath subtitle);
+ *   - relation bars are path-scoped: a row's left edge carries one 3px bar
+ *     per path ancestor that depends on it DIRECTLY (edge ancestor → node),
+ *     ordered by ancestor depth — the direct parent always contributes one,
+ *     and a grandparent with a skip-level edge adds another. Every color is
+ *     the fixed per-LEVEL identity color (`levelColor(depth)`), so a bar
+ *     reads directly as "depended on by the service N levels up", identical
+ *     in every path; column headers carry the parent level's color chip so
+ *     bars map back to ancestors;
+ *   - path highlight: rows covered by the closure (reachable along `to`) of
+ *     the path's root get a faint background in the level-0 color;
+ *   - rows without dependencies are dimmed and carry no chevron; a row
+ *     already in the current path is marked ↩ (cycle guard — columns only
+ *     ever open on click, so there is no auto-recursion).
+ *
+ * Pure React + Tailwind, no graph or layout library.
+ */
+import type { UnitState } from '@moonshot-ai/agent-core-v2/_base/di/cascadeEngine';
+import type { DebugGraph, DebugGraphNode } from '@moonshot-ai/agent-core-v2/debug/debugGraph';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+const STATE_COLORS: Record<UnitState | 'none', string> = {
+  Pending: '#a3a3a3',
+  Activating: '#38bdf8',
+  Active: '#34d399',
+  Unloading: '#fbbf24',
+  Failed: '#f87171',
+  none: '#525252',
+};
+
+/**
+ * Fixed identity color per path depth (level): `levelColor(d)` is the same
+ * for every service at depth d in every path, so a row's color bars read
+ * directly as "depended on by the service at level 0 / 1 / 2 …".
+ */
+const LEVEL_PALETTE = [
+  '#f87171',
+  '#fb923c',
+  '#fbbf24',
+  '#a3e635',
+  '#34d399',
+  '#22d3ee',
+  '#38bdf8',
+  '#818cf8',
+  '#c084fc',
+  '#f472b6',
+];
+
+function levelColor(depth: number): string {
+  return LEVEL_PALETTE[depth % LEVEL_PALETTE.length] ?? '#525252';
+}
+
+function scopeDepth(path: string): number {
+  return path.split('/').length;
+}
+
+function compareScopePaths(a: string, b: string): number {
+  return scopeDepth(a) - scopeDepth(b) || a.localeCompare(b);
+}
+
+function byToken(a: DebugGraphNode, b: DebugGraphNode): number {
+  return a.token.localeCompare(b.token);
+}
+
+function fallbackNode(id: string): DebugGraphNode {
+  return { id, token: id, scopePath: '' };
+}
+
+interface DepsColumn {
+  readonly title: string;
+  /**
+   * The scope the column's rows belong to by default ('' = unfiltered root
+   * column): rows from any other scope get a scopePath subtitle, as do all
+   * rows when the column spans more than one scope.
+   */
+  readonly homeScope: string;
+  readonly items: readonly DebugGraphNode[];
+}
+
+export function DiGraphPanel({ graph }: { graph: DebugGraph }) {
+  const [scopeFilter, setScopeFilter] = useState('');
+  /** Selected row id per column — path[i] is the row expanded into column i+1. */
+  const [path, setPath] = useState<readonly string[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const allScopes = useMemo(
+    () => [...new Set(graph.nodes.map((n) => n.scopePath))].toSorted(compareScopePaths),
+    [graph],
+  );
+
+  const nodesById = useMemo(() => new Map(graph.nodes.map((n) => [n.id, n])), [graph]);
+
+  /** Direct dependencies per consumer id (edge `to` endpoints), deduped. */
+  const depsOf = useMemo(() => {
+    const acc = new Map<string, Set<string>>();
+    for (const e of graph.edges) {
+      const set = acc.get(e.from) ?? new Set<string>();
+      set.add(e.to);
+      acc.set(e.from, set);
+    }
+    return acc;
+  }, [graph]);
+
+  /** Services nothing consumes (never an edge's `to`), scope-filtered. */
+  const roots = useMemo(() => {
+    const consumed = new Set(graph.edges.map((e) => e.to));
+    const pool =
+      scopeFilter === '' ? graph.nodes : graph.nodes.filter((n) => n.scopePath === scopeFilter);
+    return pool.filter((n) => !consumed.has(n.id)).toSorted(byToken);
+  }, [graph, scopeFilter]);
+
+  // Walk the path, truncating it at the first entry that is no longer
+  // selectable (scope filter change or data refresh), so rendering and
+  // follow-up clicks always work from a valid prefix.
+  const { columns, usedPath } = useMemo(() => {
+    const columns: DepsColumn[] = [];
+    const usedPath: string[] = [];
+    columns.push({
+      title: `roots · ${scopeFilter === '' ? 'all scopes' : scopeFilter}`,
+      homeScope: scopeFilter,
+      items: roots,
+    });
+    let items = roots;
+    for (const id of path) {
+      if (!items.some((n) => n.id === id)) break;
+      usedPath.push(id);
+      const deps = [...(depsOf.get(id) ?? [])]
+        .map((depId) => nodesById.get(depId) ?? fallbackNode(depId))
+        .toSorted(byToken);
+      if (deps.length === 0) break;
+      const parent = nodesById.get(id);
+      columns.push({
+        title: parent?.token ?? id,
+        homeScope: parent?.scopePath ?? '',
+        items: deps,
+      });
+      items = deps;
+    }
+    return { columns, usedPath };
+  }, [scopeFilter, path, roots, depsOf, nodesById]);
+
+  // Keep the deepest column in view as the path grows.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el !== null) el.scrollLeft = el.scrollWidth;
+  }, [columns.length]);
+
+  const select = (columnIndex: number, id: string) => {
+    setPath([...usedPath.slice(0, columnIndex), id]);
+  };
+
+  // Path context: the root the current path starts at (column 0 only holds
+  // roots, so this is always one — guarded anyway).
+  const pathRootId = usedPath[0];
+
+  // Path-highlight: nodes reachable (along `to`) from the path's root,
+  // tinted in the fixed level-0 color. Only the path root's closure is
+  // needed — computed lazily per selection.
+  const pathTint = pathRootId === undefined ? undefined : `${levelColor(0)}1a`;
+  const pathClosure = useMemo(() => {
+    if (pathRootId === undefined) return undefined;
+    const seen = new Set<string>();
+    const stack = [pathRootId];
+    while (stack.length > 0) {
+      const id = stack.pop() ?? '';
+      if (seen.has(id)) continue;
+      seen.add(id);
+      for (const dep of depsOf.get(id) ?? []) stack.push(dep);
+    }
+    return seen;
+  }, [pathRootId, depsOf]);
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center gap-3">
+        <select
+          className="rounded border border-neutral-700 bg-neutral-950 px-2 py-1 font-mono text-[11px] text-neutral-100 outline-none focus:border-sky-600"
+          value={scopeFilter}
+          onChange={(e) => {
+            setScopeFilter(e.target.value);
+          }}
+        >
+          <option value="">all scopes</option>
+          {allScopes.map((scopePath) => (
+            <option key={scopePath} value={scopePath}>
+              {scopePath}
+            </option>
+          ))}
+        </select>
+        <span className="flex items-center gap-2 text-[10px] text-neutral-500">
+          {(Object.keys(STATE_COLORS) as (UnitState | 'none')[]).map((state) => (
+            <span key={state} className="flex items-center gap-1">
+              <span
+                className="inline-block h-2 w-2 rounded-full"
+                style={{ backgroundColor: STATE_COLORS[state] }}
+              />
+              {state === 'none' ? 'unseen' : state}
+            </span>
+          ))}
+        </span>
+      </div>
+      {graph.nodes.length === 0 ? (
+        <div className="text-[11px] text-neutral-600 italic">no nodes</div>
+      ) : (
+        <div
+          ref={scrollRef}
+          className="flex h-[calc(100vh-150px)] min-h-[320px] overflow-x-auto rounded-lg border border-neutral-800 bg-neutral-950"
+        >
+          {columns.map((column, columnIndex) => (
+            <DepsColumnView
+              key={columnIndex}
+              column={column}
+              columnIndex={columnIndex}
+              usedPath={usedPath}
+              depsOf={depsOf}
+              nodesById={nodesById}
+              pathTint={pathTint}
+              pathClosure={pathClosure}
+              onSelect={select}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DepsColumnView({
+  column,
+  columnIndex,
+  usedPath,
+  depsOf,
+  nodesById,
+  pathTint,
+  pathClosure,
+  onSelect,
+}: {
+  column: DepsColumn;
+  columnIndex: number;
+  usedPath: readonly string[];
+  depsOf: ReadonlyMap<string, ReadonlySet<string>>;
+  nodesById: ReadonlyMap<string, DebugGraphNode>;
+  pathTint?: string;
+  pathClosure?: ReadonlySet<string>;
+  onSelect: (columnIndex: number, id: string) => void;
+}) {
+  const mixedScopes = new Set(column.items.map((n) => n.scopePath)).size > 1;
+  const selectedId = usedPath[columnIndex];
+  return (
+    <div className="w-[230px] shrink-0 overflow-y-auto border-r border-neutral-800 last:border-r-0">
+      <div className="sticky top-0 flex items-baseline gap-2 border-b border-neutral-800 bg-neutral-950 px-2 py-1">
+        {columnIndex > 0 ? (
+          <span
+            className="h-2.5 w-2.5 shrink-0 self-center rounded-sm"
+            style={{ background: levelColor(columnIndex - 1) }}
+            title={`dependencies of ${column.title}`}
+          />
+        ) : null}
+        <span className="min-w-0 truncate font-mono text-[10px] font-semibold text-neutral-400">
+          {column.title}
+        </span>
+        <span className="ml-auto shrink-0 text-[9px] text-neutral-600">{column.items.length}</span>
+      </div>
+      <div className="p-1">
+        {column.items.length === 0 ? (
+          <div className="px-2 py-1 text-[10px] text-neutral-600 italic">
+            {columnIndex === 0 ? 'no roots' : 'no nodes'}
+          </div>
+        ) : (
+          column.items.map((node) => {
+            const hasDeps = (depsOf.get(node.id)?.size ?? 0) > 0;
+            const selected = node.id === selectedId;
+            const inPath = usedPath.slice(0, columnIndex).includes(node.id);
+            const showScope =
+              mixedScopes || (column.homeScope !== '' && node.scopePath !== column.homeScope);
+            // Path-scoped relation bars: column 0 rows carry the level-0
+            // color; expanded columns carry one bar per path ancestor with a
+            // DIRECT edge to this node, each in that ancestor's level color.
+            const bars: { color: string; label: string }[] = [];
+            if (columnIndex === 0) {
+              bars.push({ color: levelColor(0), label: node.token });
+            } else {
+              usedPath.slice(0, columnIndex).forEach((ancestorId, depth) => {
+                if (depsOf.get(ancestorId)?.has(node.id) === true) {
+                  bars.push({
+                    color: levelColor(depth),
+                    label: nodesById.get(ancestorId)?.token ?? ancestorId,
+                  });
+                }
+              });
+            }
+            const inPathTree = !selected && pathClosure?.has(node.id) === true;
+            const details = [
+              `state: ${node.state ?? 'unseen'}`,
+              node.uid !== undefined ? `#${node.uid}` : undefined,
+              inPath ? 'already in path' : undefined,
+              columnIndex > 0 && bars.length > 0
+                ? `direct dependency of: ${bars.map((b) => b.label).join(', ')}`
+                : undefined,
+            ]
+              .filter((s) => s !== undefined)
+              .join('\n');
+            return (
+              <button
+                key={node.id}
+                type="button"
+                title={`${node.id}\n${details}`}
+                onClick={() => {
+                  onSelect(columnIndex, node.id);
+                }}
+                style={{
+                  backgroundColor: inPathTree ? pathTint : undefined,
+                }}
+                className={`mb-0.5 flex w-full items-stretch gap-1.5 rounded px-1.5 py-0.5 text-left font-mono text-[11px] ${
+                  selected
+                    ? 'bg-neutral-800 text-sky-400'
+                    : hasDeps
+                      ? 'text-neutral-300 hover:bg-neutral-800/60'
+                      : 'text-neutral-500 hover:bg-neutral-800/60'
+                }`}
+              >
+                <span className="flex shrink-0 gap-[2px] self-stretch">
+                  {bars.map((bar, i) => (
+                    <span
+                      key={i}
+                      className="w-[3px] rounded-sm"
+                      style={{ background: bar.color }}
+                      title={bar.label}
+                    />
+                  ))}
+                </span>
+                <span
+                  className="mt-1 inline-block h-2 w-2 shrink-0 rounded-full"
+                  style={{ backgroundColor: STATE_COLORS[node.state ?? 'none'] }}
+                />
+                <span className="min-w-0 flex-1 self-center">
+                  <span className="block truncate">{node.token}</span>
+                  {showScope ? (
+                    <span className="block truncate text-[9px] text-neutral-600">
+                      {node.scopePath}
+                    </span>
+                  ) : null}
+                </span>
+                {inPath ? (
+                  <span
+                    className="shrink-0 self-center text-[10px] text-amber-400"
+                    title="already in path"
+                  >
+                    ↩
+                  </span>
+                ) : null}
+                <span className="w-3 shrink-0 self-center text-right text-neutral-600">
+                  {hasDeps ? '›' : ''}
+                </span>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/kimi-inspect/src/components/methodArgs.test.ts b/apps/kimi-inspect/src/components/methodArgs.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..920bb16a14c385dd7e81681849ecdd7d9fb43e1c
--- /dev/null
+++ b/apps/kimi-inspect/src/components/methodArgs.test.ts
@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+
+import { buildArgs, parseParamFields, smartParse } from './methodArgs';
+
+describe('parseParamFields', () => {
+  it('parses a single named parameter', () => {
+    expect(parseParamFields('sessionId')).toEqual([{ kind: 'value', name: 'sessionId' }]);
+  });
+
+  it('parses several named parameters', () => {
+    expect(parseParamFields('id, decision')).toEqual([
+      { kind: 'value', name: 'id' },
+      { kind: 'value', name: 'decision' },
+    ]);
+  });
+
+  it('keeps declared defaults', () => {
+    expect(parseParamFields("count = 1, mode = 'auto'")).toEqual([
+      { kind: 'value', name: 'count', defaultValue: '1' },
+      { kind: 'value', name: 'mode', defaultValue: "'auto'" },
+    ]);
+  });
+
+  it('does not split commas inside defaults', () => {
+    expect(parseParamFields("ids = ['a', 'b'], flag")).toEqual([
+      { kind: 'value', name: 'ids', defaultValue: "['a', 'b']" },
+      { kind: 'value', name: 'flag' },
+    ]);
+  });
+
+  it('expands a destructured object parameter into keys', () => {
+    expect(parseParamFields('{ workspaceId, limit }')).toEqual([
+      { kind: 'object', name: '{ workspaceId, limit }', keys: ['workspaceId', 'limit'] },
+    ]);
+  });
+
+  it('strips key defaults and renames in object patterns', () => {
+    expect(parseParamFields('{ limit = 10, workspaceId: ws }')).toEqual([
+      {
+        kind: 'object',
+        name: '{ limit = 10, workspaceId: ws }',
+        keys: ['limit', 'workspaceId'],
+      },
+    ]);
+  });
+
+  it('keeps the object-pattern default', () => {
+    expect(parseParamFields('{ a, b } = {}')).toEqual([
+      { kind: 'object', name: '{ a, b } = {}', keys: ['a', 'b'], defaultValue: '{}' },
+    ]);
+  });
+
+  it('drops rest elements inside object patterns', () => {
+    expect(parseParamFields('{ a, ...rest }')).toEqual([
+      { kind: 'object', name: '{ a, ...rest }', keys: ['a'] },
+    ]);
+  });
+
+  it('falls back to raw for rest and array patterns', () => {
+    expect(parseParamFields('...args')).toEqual([{ kind: 'raw', label: '...args' }]);
+    expect(parseParamFields('[a, b]')).toEqual([{ kind: 'raw', label: '[a, b]' }]);
+  });
+
+  it('returns no fields for empty params', () => {
+    expect(parseParamFields('')).toEqual([]);
+  });
+});
+
+describe('smartParse', () => {
+  it('parses JSON values', () => {
+    expect(smartParse('5')).toBe(5);
+    expect(smartParse('true')).toBe(true);
+    expect(smartParse('{"a":1}')).toEqual({ a: 1 });
+    expect(smartParse('"x"')).toBe('x');
+  });
+
+  it('passes non-JSON through as a plain string', () => {
+    expect(smartParse('main')).toBe('main');
+    expect(smartParse('k2-thinking')).toBe('k2-thinking');
+  });
+});
+
+describe('buildArgs', () => {
+  it('builds a single argument from a value field', () => {
+    const fields = parseParamFields('sessionId');
+    expect(buildArgs(fields, { '0': 'abc' })).toEqual(['abc']);
+  });
+
+  it('assembles a destructured object from its key fields', () => {
+    const fields = parseParamFields('{ workspaceId, limit }');
+    expect(buildArgs(fields, { '0.workspaceId': 'ws1', '0.limit': '5' })).toEqual([
+      { workspaceId: 'ws1', limit: 5 },
+    ]);
+  });
+
+  it('drops empty keys and omits a fully-empty object', () => {
+    const fields = parseParamFields('{ workspaceId, limit }');
+    expect(buildArgs(fields, { '0.limit': '5' })).toEqual([{ limit: 5 }]);
+    expect(buildArgs(fields, {})).toEqual([]);
+  });
+
+  it('uses declared defaults for empty value fields', () => {
+    const fields = parseParamFields("count = 1, mode = 'auto'");
+    expect(buildArgs(fields, {})).toEqual([1, 'auto']);
+    expect(buildArgs(fields, { '1': 'yolo' })).toEqual([1, 'yolo']);
+  });
+
+  it('truncates trailing empty params but keeps interior holes', () => {
+    const fields = parseParamFields('a, b, c');
+    expect(buildArgs(fields, { '0': 'x' })).toEqual(['x']);
+    // Interior hole: `b` empty, `c` filled — the hole serializes as null.
+    expect(JSON.parse(JSON.stringify(buildArgs(fields, { '0': 'x', '2': 'z' })))).toEqual([
+      'x',
+      null,
+      'z',
+    ]);
+  });
+
+  it('parses raw fallback fields as strict JSON', () => {
+    const fields = parseParamFields('...args');
+    expect(buildArgs(fields, { '0': '[1, 2]' })).toEqual([[1, 2]]);
+    expect(() => buildArgs(fields, { '0': 'not json' })).toThrow();
+  });
+});
diff --git a/apps/kimi-inspect/src/components/methodArgs.ts b/apps/kimi-inspect/src/components/methodArgs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4834e7a4e70f3ee563ec64dbd88c9ca4e7bb3dc3
--- /dev/null
+++ b/apps/kimi-inspect/src/components/methodArgs.ts
@@ -0,0 +1,198 @@
+/**
+ * Structured method-argument editing for the dynamic Service cards, driven
+ * only by the wire `params` string (the declared parameter list parsed from
+ * `Function#toString` server-side — names only, no per-method schemas).
+ *
+ * `parseParamFields` splits the params string into editable fields:
+ * - a named parameter (`title`, `count = 1`) becomes one input; an empty
+ *   input falls back to the declared default;
+ * - a destructured object parameter (`{ workspaceId, limit }`) becomes one
+ *   input per key, assembled back into an object (empty keys are dropped);
+ * - anything unparseable (rest params, array patterns) falls back to one
+ *   raw JSON input — the old behavior.
+ *
+ * Field values are smart-parsed (`smartParse`): text that parses as JSON is
+ * passed through parsed (numbers, booleans, objects, quoted strings),
+ * anything else goes as a plain string — so `main` needs no quotes while
+ * `{ "a": 1 }` still works.
+ */
+
+export type ParamField =
+  | { readonly kind: 'value'; readonly name: string; readonly defaultValue?: string }
+  | {
+      readonly kind: 'object';
+      /** Original pattern text, used as the group label (e.g. `{ workspaceId, limit }`). */
+      readonly name: string;
+      readonly keys: readonly string[];
+      readonly defaultValue?: string;
+    }
+  | { readonly kind: 'raw'; readonly label: string };
+
+/** Input state key for a field: the param index, or `index.key` for object keys. */
+export function fieldKey(index: number, key?: string): string {
+  return key === undefined ? String(index) : `${index}.${key}`;
+}
+
+/**
+ * Split a parameter list at top-level commas, tracking `(){}[]` nesting and
+ * string literals (defaults can contain commas, e.g. `= ['a', 'b']`).
+ */
+function splitTopLevel(src: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let quote: string | null = null;
+  let start = 0;
+  for (let i = 0; i < src.length; i++) {
+    const ch = src[i]!;
+    if (quote !== null) {
+      if (ch === '\\') i++;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === '`') quote = ch;
+    else if (ch === '(' || ch === '{' || ch === '[') depth++;
+    else if (ch === ')' || ch === '}' || ch === ']') depth--;
+    else if (ch === ',' && depth === 0) {
+      parts.push(src.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(src.slice(start));
+  return parts;
+}
+
+/** Index of the first `=` at nesting depth 0 (skipping `=>`, `==`, `===`), or -1. */
+function indexOfTopLevelEquals(src: string): number {
+  let depth = 0;
+  let quote: string | null = null;
+  for (let i = 0; i < src.length; i++) {
+    const ch = src[i]!;
+    if (quote !== null) {
+      if (ch === '\\') i++;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === '`') quote = ch;
+    else if (ch === '(' || ch === '{' || ch === '[') depth++;
+    else if (ch === ')' || ch === '}' || ch === ']') depth--;
+    else if (ch === '=' && depth === 0 && src[i + 1] !== '=' && src[i + 1] !== '>') return i;
+  }
+  return -1;
+}
+
+/** Index of the `}` matching the `{` at position 0 of `src`, or -1. */
+function matchingBrace(src: string): number {
+  let depth = 0;
+  let quote: string | null = null;
+  for (let i = 0; i < src.length; i++) {
+    const ch = src[i]!;
+    if (quote !== null) {
+      if (ch === '\\') i++;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === '`') quote = ch;
+    else if (ch === '{') depth++;
+    else if (ch === '}') {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+/** Property name out of one object-pattern entry: `a`, `a: b`, `a = 1`, `a: b = 1` → `a`. */
+function objectPatternKey(entry: string): string {
+  const colon = entry.indexOf(':');
+  const eq = indexOfTopLevelEquals(entry);
+  let end = entry.length;
+  if (colon !== -1) end = Math.min(end, colon);
+  if (eq !== -1) end = Math.min(end, eq);
+  return entry.slice(0, end).trim();
+}
+
+/** Parse the wire `params` string into editable fields (see file header). */
+export function parseParamFields(params: string): readonly ParamField[] {
+  return splitTopLevel(params)
+    .map((s) => s.trim())
+    .filter((s) => s !== '')
+    .map((part): ParamField => {
+      if (part.startsWith('{')) {
+        const close = matchingBrace(part);
+        if (close === -1) return { kind: 'raw', label: part };
+        const keys = splitTopLevel(part.slice(1, close))
+          .map((k) => objectPatternKey(k.trim()))
+          .filter((k) => k !== '' && !k.startsWith('...'));
+        const rest = part.slice(close + 1).trim();
+        const defaultValue = rest.startsWith('=') ? rest.slice(1).trim() : undefined;
+        if (keys.length === 0) return { kind: 'raw', label: part };
+        return { kind: 'object', name: part, keys, defaultValue };
+      }
+      if (part.startsWith('[') || part.startsWith('...')) {
+        return { kind: 'raw', label: part };
+      }
+      const eq = indexOfTopLevelEquals(part);
+      if (eq !== -1) {
+        const name = part.slice(0, eq).trim();
+        const defaultValue = part.slice(eq + 1).trim();
+        if (/^[A-Za-z_$][\w$]*$/.test(name)) return { kind: 'value', name, defaultValue };
+        return { kind: 'raw', label: part };
+      }
+      if (/^[A-Za-z_$][\w$]*$/.test(part)) return { kind: 'value', name: part };
+      return { kind: 'raw', label: part };
+    });
+}
+
+/** Smart-parse one field value: JSON when it parses, the raw string otherwise. */
+export function smartParse(raw: string): unknown {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    // Declared defaults are source text, where strings use JS single-quote
+    // literals ('auto') that JSON.parse rejects — unquote those.
+    if (raw.length >= 2 && raw.startsWith("'") && raw.endsWith("'")) {
+      return raw.slice(1, -1).replaceAll(/\\(.)/g, '$1');
+    }
+    return raw;
+  }
+}
+
+/**
+ * Assemble the wire argument array from field inputs (keyed by `fieldKey`).
+ * Empty value fields fall back to their declared default; empty object
+ * fields drop the key, and a fully-empty object param is omitted. Trailing
+ * holes are truncated; interior holes serialize as `null` on the wire.
+ * Throws when a raw field contains invalid JSON.
+ */
+export function buildArgs(
+  fields: readonly ParamField[],
+  values: Readonly<Record<string, string>>,
+): unknown[] {
+  const args: unknown[] = [];
+  fields.forEach((field, i) => {
+    if (field.kind === 'value') {
+      const raw = (values[fieldKey(i)] ?? '').trim();
+      if (raw !== '') args[i] = smartParse(raw);
+      else if (field.defaultValue !== undefined) args[i] = smartParse(field.defaultValue);
+      else args[i] = undefined;
+    } else if (field.kind === 'object') {
+      const obj: Record<string, unknown> = {};
+      let filled = false;
+      for (const key of field.keys) {
+        const raw = (values[fieldKey(i, key)] ?? '').trim();
+        if (raw !== '') {
+          obj[key] = smartParse(raw);
+          filled = true;
+        }
+      }
+      args[i] = filled ? obj : undefined;
+    } else {
+      const raw = (values[fieldKey(i)] ?? '').trim();
+      if (raw !== '') args[i] = JSON.parse(raw);
+      else args[i] = undefined;
+    }
+  });
+  let end = args.length;
+  while (end > 0 && args[end - 1] === undefined) end--;
+  return args.slice(0, end);
+}
diff --git a/apps/kimi-inspect/src/connection.tsx b/apps/kimi-inspect/src/connection.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..652d053d96d604d635db29077a896add45b616b8
--- /dev/null
+++ b/apps/kimi-inspect/src/connection.tsx
@@ -0,0 +1,364 @@
+/**
+ * Connection context — owns the inspect client (HTTP calls over the
+ * `/api/v1/debug` surface) built from the selected server URL + token.
+ *
+ * Three ways to connect:
+ *   1. deep link `?url=` / `?token=` or a previously saved manual config
+ *      (persisted in localStorage);
+ *   2. zero-config discovery: on startup the dev middleware
+ *      (`/__inspect/servers`) lists every local kap-server with the home
+ *      token — the app connects straight to the remembered / proxy / first
+ *      instance, persisting nothing but the picked URL (so a reload re-picks
+ *      it while it is still alive, and never resurrects a stale port);
+ *   3. the manual form or a discovered-server card on the connect screen.
+ * `disconnect` suppresses the discovery bootstrap for the rest of the
+ * session so it lands on the connect screen instead of reconnecting.
+ *
+ * The client is built only after `probeDebugSurface` confirms the server
+ * mounts `/api/v1/debug` (kap-server started with `--debug-endpoints` on a
+ * loopback bind). There is no fallback surface — when the probe fails the
+ * connection stops on a dedicated error screen (with retry / reconfigure)
+ * instead of silently degrading.
+ */
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+import { createInspectClient, probeDebugSurface, type InspectClient } from './channel';
+import { fetchServerDiscovery, pickDefaultServer, useServerDiscovery } from './servers';
+
+export interface ConnectionConfig {
+  /** Server base URL; empty string means same-origin (the Vite dev proxy). */
+  readonly url: string;
+  readonly token: string;
+}
+
+export interface ConnectOptions {
+  /** Persist the whole config (manual form / deep link). Default `true`;
+   * discovered connects pass `false` so a reload re-discovers fresh state. */
+  readonly persist?: boolean;
+  /** Remember just this URL as the preferred discovery pick (`kimi-inspect.server-url`). */
+  readonly rememberServerUrl?: string;
+}
+
+const STORAGE_KEY = 'kimi-inspect.connection';
+const REMEMBERED_SERVER_KEY = 'kimi-inspect.server-url';
+
+function readInitialConfig(): ConnectionConfig {
+  const params = new URLSearchParams(window.location.search);
+  const qUrl = params.get('url');
+  const qToken = params.get('token');
+  if (qUrl !== null || qToken !== null) {
+    return { url: qUrl ?? '', token: qToken ?? '' };
+  }
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw !== null) {
+      const parsed = JSON.parse(raw) as ConnectionConfig;
+      return { url: parsed.url ?? '', token: parsed.token ?? '' };
+    }
+  } catch {
+    // corrupt storage — fall through to default
+  }
+  return { url: '', token: '' };
+}
+
+/** Resolve the configured (possibly relative) URL to an absolute base for the client. */
+export function resolveBaseUrl(url: string): string {
+  const trimmed = url.trim().replace(/\/$/, '');
+  if (trimmed === '') return window.location.origin;
+  return trimmed;
+}
+
+interface ConnectionValue {
+  readonly config: ConnectionConfig;
+  readonly baseUrl: string;
+  readonly klient: InspectClient;
+  readonly connect: (config: ConnectionConfig, opts?: ConnectOptions) => void;
+  readonly disconnect: () => void;
+}
+
+const ConnectionContext = createContext<ConnectionValue | null>(null);
+
+export function ConnectionProvider({ children }: { children: ReactNode }) {
+  const [config, setConfig] = useState<ConnectionConfig | null>(() => {
+    const initial = readInitialConfig();
+    // Auto-connect only when the user explicitly connected before (stored) or
+    // deep-linked (query). First visit goes through the discovery bootstrap.
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('url') || params.has('token')) return initial;
+    return localStorage.getItem(STORAGE_KEY) !== null ? initial : null;
+  });
+  const [discovering, setDiscovering] = useState(config === null);
+  const [suppressDiscovery, setSuppressDiscovery] = useState(false);
+
+  // Discovery bootstrap: with nothing explicit configured, scan the local
+  // kap-server instance registry (via the dev middleware) and auto-connect.
+  useEffect(() => {
+    if (config !== null || suppressDiscovery) return;
+    let cancelled = false;
+    setDiscovering(true);
+    void fetchServerDiscovery().then((discovery) => {
+      if (cancelled) return;
+      setDiscovering(false);
+      if (discovery === null) return;
+      const pick = pickDefaultServer(discovery, localStorage.getItem(REMEMBERED_SERVER_KEY));
+      if (pick === undefined) return;
+      setConfig({ url: pick.url, token: discovery.token ?? '' });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [config, suppressDiscovery]);
+
+  // Debug-surface probe: the app talks ONLY to `/api/v1/debug` (kap-server
+  // `--debug-endpoints`, loopback). The client is built once the probe for
+  // this exact config has succeeded; a failure is kept and rendered as a
+  // blocking error screen (no fallback surface exists anymore).
+  const [probe, setProbe] = useState<{
+    readonly key: string;
+    readonly error: string | null;
+  } | null>(null);
+  const [probeNonce, setProbeNonce] = useState(0);
+  const configKey = config === null ? null : `${resolveBaseUrl(config.url)}|${config.token.trim()}`;
+
+  useEffect(() => {
+    if (config === null || configKey === null) {
+      setProbe(null);
+      return;
+    }
+    let cancelled = false;
+    const token = config.token.trim();
+    void probeDebugSurface({
+      baseUrl: resolveBaseUrl(config.url),
+      token: token === '' ? undefined : token,
+    }).then(
+      () => {
+        if (!cancelled) setProbe({ key: configKey, error: null });
+      },
+      (error: unknown) => {
+        if (cancelled) return;
+        const message = error instanceof Error ? error.message : String(error);
+        setProbe({ key: configKey, error: message });
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [config, configKey, probeNonce]);
+
+  const klient = useMemo(() => {
+    if (config === null || configKey === null) return null;
+    if (probe === null || probe.key !== configKey || probe.error !== null) return null;
+    const token = config.token.trim();
+    return createInspectClient({
+      url: resolveBaseUrl(config.url),
+      token: token === '' ? undefined : token,
+    });
+  }, [config, configKey, probe]);
+
+  const connect = useCallback((next: ConnectionConfig, opts: ConnectOptions = {}) => {
+    if (opts.persist ?? true) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } else {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+    if (opts.rememberServerUrl !== undefined) {
+      localStorage.setItem(REMEMBERED_SERVER_KEY, opts.rememberServerUrl);
+    }
+    setSuppressDiscovery(false);
+    setConfig(next);
+  }, []);
+
+  const disconnect = useCallback(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(REMEMBERED_SERVER_KEY);
+    setSuppressDiscovery(true);
+    setConfig(null);
+  }, []);
+
+  const retryProbe = useCallback(() => {
+    setProbe(null);
+    setProbeNonce((n) => n + 1);
+  }, []);
+
+  const value = useMemo<ConnectionValue | null>(() => {
+    if (klient === null || config === null) return null;
+    return { config, baseUrl: resolveBaseUrl(config.url), klient, connect, disconnect };
+  }, [klient, config, connect, disconnect]);
+
+  const probeFailure =
+    config !== null && probe !== null && probe.key === configKey && probe.error !== null
+      ? { baseUrl: resolveBaseUrl(config.url), error: probe.error }
+      : null;
+
+  return (
+    <ConnectionContext.Provider value={value}>
+      {value !== null ? (
+        children
+      ) : probeFailure !== null ? (
+        <DebugSurfaceError
+          baseUrl={probeFailure.baseUrl}
+          error={probeFailure.error}
+          onRetry={retryProbe}
+          onBack={disconnect}
+        />
+      ) : config !== null ? (
+        <div className="flex h-screen items-center justify-center">
+          <div className="text-sm text-neutral-500">
+            Connecting to {resolveBaseUrl(config.url)}…
+          </div>
+        </div>
+      ) : discovering && !suppressDiscovery ? (
+        <div className="flex h-screen items-center justify-center">
+          <div className="text-sm text-neutral-500">Discovering local kap-servers…</div>
+        </div>
+      ) : (
+        <ConnectScreen onConnect={connect} initial={readInitialConfig()} />
+      )}
+    </ConnectionContext.Provider>
+  );
+}
+
+export function useConnection(): ConnectionValue {
+  const value = useContext(ConnectionContext);
+  if (value === null) {
+    throw new Error('useConnection used before connecting');
+  }
+  return value;
+}
+
+/** Blocking screen when the server does not mount the debug RPC surface. */
+function DebugSurfaceError({
+  baseUrl,
+  error,
+  onRetry,
+  onBack,
+}: {
+  baseUrl: string;
+  error: string;
+  onRetry: () => void;
+  onBack: () => void;
+}) {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="w-[520px] rounded-lg border border-red-900/60 bg-neutral-900 p-6 shadow-xl">
+        <h1 className="mb-1 text-lg font-semibold text-red-300">Debug surface unavailable</h1>
+        <p className="mb-3 text-xs leading-relaxed text-neutral-400">
+          Kimi Inspect talks to kap-server exclusively over the debug RPC surface (
+          <code className="text-neutral-300">/api/v1/debug</code>), and{' '}
+          <code className="text-neutral-300">{baseUrl}</code> does not serve it. Start kap-server
+          with <code className="text-neutral-300">--debug-endpoints</code> on a loopback bind and
+          retry.
+        </p>
+        <div className="mb-4 rounded bg-red-950/50 px-2 py-1.5 font-mono text-[11px] text-red-400">
+          {error}
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="rounded bg-sky-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-sky-500"
+            onClick={onRetry}
+          >
+            Retry
+          </button>
+          <button
+            className="rounded border border-neutral-700 px-3 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800"
+            onClick={onBack}
+          >
+            Change server
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ConnectScreen({
+  onConnect,
+  initial,
+}: {
+  onConnect: (config: ConnectionConfig, opts?: ConnectOptions) => void;
+  initial: ConnectionConfig;
+}) {
+  const [url, setUrl] = useState(initial.url);
+  const [token, setToken] = useState(initial.token);
+  const discovery = useServerDiscovery();
+  const servers = discovery.data?.servers ?? [];
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <form
+        className="w-[420px] rounded-lg border border-neutral-800 bg-neutral-900 p-6 shadow-xl"
+        onSubmit={(e) => {
+          e.preventDefault();
+          onConnect({ url, token });
+        }}
+      >
+        <h1 className="mb-1 text-lg font-semibold text-neutral-100">Kimi Inspect</h1>
+        <p className="mb-5 text-xs text-neutral-500">
+          Connect to a kap-server started with{' '}
+          <code className="text-neutral-400">--debug-endpoints</code> (
+          <code className="text-neutral-400">/api/v1/debug</code>). Leave the URL empty to use the
+          same-origin dev proxy
+          {` (${__KIMI_INSPECT_PROXY_TARGET__})`}.
+        </p>
+        {servers.length > 0 ? (
+          <div className="mb-5">
+            <div className="mb-1 text-xs text-neutral-400">
+              Discovered on this machine{discovery.data?.home ? ` (${discovery.data.home})` : ''}
+            </div>
+            <div className="space-y-1.5">
+              {servers.map((s) => (
+                <button
+                  key={s.id}
+                  type="button"
+                  className="flex w-full items-center gap-2 rounded border border-neutral-700 bg-neutral-950 px-3 py-2 text-left text-[12px] text-neutral-200 hover:border-sky-600"
+                  onClick={() =>
+                    onConnect(
+                      { url: s.url, token: discovery.data?.token ?? '' },
+                      { persist: false, rememberServerUrl: s.url },
+                    )
+                  }
+                >
+                  <span className="font-mono">{s.url.replace(/^https?:\/\//, '')}</span>
+                  {s.pid !== undefined ? (
+                    <span className="text-[10px] text-neutral-500">pid {s.pid}</span>
+                  ) : null}
+                  <span className="ml-auto text-[10px] uppercase text-neutral-600">{s.source}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : null}
+        <label className="mb-1 block text-xs text-neutral-400">Server URL</label>
+        <input
+          className="mb-4 w-full rounded border border-neutral-700 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 outline-none focus:border-sky-600"
+          placeholder="http://127.0.0.1:58627 (empty = dev proxy)"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+        <label className="mb-1 block text-xs text-neutral-400">Bearer token (optional)</label>
+        <input
+          className="mb-5 w-full rounded border border-neutral-700 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 outline-none focus:border-sky-600"
+          placeholder="~/.kimi-code/server.token"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+        />
+        <button
+          type="submit"
+          className="w-full rounded bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500"
+        >
+          Connect
+        </button>
+      </form>
+    </div>
+  );
+}
+
+declare const __KIMI_INSPECT_PROXY_TARGET__: string;
diff --git a/apps/kimi-inspect/src/fs/api.test.ts b/apps/kimi-inspect/src/fs/api.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..362c2956cc2e444e9791168a15c82d82a43b48d0
--- /dev/null
+++ b/apps/kimi-inspect/src/fs/api.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+
+import { fetchFsSuggest } from './api';
+
+function okEnvelope(data: unknown) {
+  return { code: 0, msg: 'success', data, request_id: 'r1' };
+}
+
+function fakeFetch(envelope: unknown) {
+  const calls: { url: string; init?: RequestInit }[] = [];
+  const fetchImpl = (async (url: string | URL, init?: RequestInit) => {
+    calls.push({ url: String(url), init });
+    return { json: async () => envelope };
+  }) as unknown as typeof fetch;
+  return { calls, fetchImpl };
+}
+
+const resultData = {
+  items: [
+    {
+      path: 'apps/desktop',
+      name: 'desktop',
+      kind: 'directory',
+      score: 0.9,
+      match_positions: [5, 6],
+    },
+    { path: 'README.md', name: 'README.md', kind: 'file', score: 0.8, match_positions: [0, 1] },
+    { path: 'broken' },
+  ],
+  truncated: true,
+};
+
+describe('fetchFsSuggest', () => {
+  it('posts the roots suggestion request and maps items', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope(resultData));
+    const result = await fetchFsSuggest({
+      baseUrl: 'http://h:1/',
+      token: 'tok',
+      roots: ['/repo', '/extra'],
+      query: 'apps/de',
+      limit: 20,
+      followGitignore: false,
+      showHidden: true,
+      includeGlobs: ['**/*.ts'],
+      excludeGlobs: ['dist/**'],
+      runtimeId: 'local',
+      fetchImpl,
+    });
+
+    expect(calls[0]!.url).toBe('http://h:1/api/v1/fs:suggest');
+    expect(calls[0]!.init?.method).toBe('POST');
+    expect(calls[0]!.init?.headers).toEqual({
+      'content-type': 'application/json',
+      authorization: 'Bearer tok',
+    });
+    expect(JSON.parse(calls[0]!.init?.body as string)).toEqual({
+      roots: ['/repo', '/extra'],
+      query: 'apps/de',
+      limit: 20,
+      follow_gitignore: false,
+      show_hidden: true,
+      include_globs: ['**/*.ts'],
+      exclude_globs: ['dist/**'],
+      runtime_id: 'local',
+    });
+    expect(result.items).toHaveLength(2);
+    expect(result.items[0]).toEqual({
+      path: 'apps/desktop',
+      name: 'desktop',
+      kind: 'directory',
+      score: 0.9,
+      matchPositions: [5, 6],
+    });
+    expect(result.truncated).toBe(true);
+  });
+
+  it('omits optional fields and authorization when not configured', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope({ items: [], truncated: false }));
+    await fetchFsSuggest({ baseUrl: 'http://h:1', roots: ['/repo'], query: '', fetchImpl });
+    expect(calls[0]!.init?.headers).toEqual({ 'content-type': 'application/json' });
+    expect(JSON.parse(calls[0]!.init?.body as string)).toEqual({
+      roots: ['/repo'],
+      query: '',
+    });
+  });
+
+  it('throws on a non-zero envelope code', async () => {
+    const { fetchImpl } = fakeFetch({ code: 40409, msg: 'root missing', data: null });
+    await expect(
+      fetchFsSuggest({ baseUrl: 'http://h:1', roots: ['/missing'], query: 'x', fetchImpl }),
+    ).rejects.toThrow(/40409/);
+  });
+
+  it('throws on a malformed payload', async () => {
+    const { fetchImpl } = fakeFetch(okEnvelope({ truncated: false }));
+    await expect(
+      fetchFsSuggest({ baseUrl: 'http://h:1', roots: ['/repo'], query: 'x', fetchImpl }),
+    ).rejects.toThrow(/unexpected response shape/);
+  });
+});
diff --git a/apps/kimi-inspect/src/fs/api.ts b/apps/kimi-inspect/src/fs/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d994e9ab12b6febe49d74e9cc466eddbf495293
--- /dev/null
+++ b/apps/kimi-inspect/src/fs/api.ts
@@ -0,0 +1,96 @@
+export type FsSuggestKind = 'file' | 'directory' | 'symlink';
+
+export interface FsSuggestItem {
+  readonly path: string;
+  readonly name: string;
+  readonly kind: FsSuggestKind;
+  readonly score: number;
+  readonly matchPositions: readonly number[];
+}
+
+export interface FsSuggestResult {
+  readonly items: readonly FsSuggestItem[];
+  readonly truncated: boolean;
+}
+
+export interface FetchFsSuggestOptions {
+  readonly baseUrl: string;
+  readonly token?: string;
+  readonly roots: readonly string[];
+  readonly query: string;
+  readonly limit?: number;
+  readonly followGitignore?: boolean;
+  readonly showHidden?: boolean;
+  readonly includeGlobs?: readonly string[];
+  readonly excludeGlobs?: readonly string[];
+  readonly runtimeId?: string;
+  readonly fetchImpl?: typeof fetch;
+}
+
+const KINDS = new Set<FsSuggestKind>(['file', 'directory', 'symlink']);
+
+function parseItem(value: unknown): FsSuggestItem | undefined {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return undefined;
+  const item = value as Record<string, unknown>;
+  if (
+    typeof item['path'] !== 'string' ||
+    typeof item['name'] !== 'string' ||
+    typeof item['kind'] !== 'string' ||
+    !KINDS.has(item['kind'] as FsSuggestKind) ||
+    typeof item['score'] !== 'number' ||
+    !Array.isArray(item['match_positions']) ||
+    !item['match_positions'].every((position) => typeof position === 'number')
+  ) {
+    return undefined;
+  }
+  return {
+    path: item['path'],
+    name: item['name'],
+    kind: item['kind'] as FsSuggestKind,
+    score: item['score'],
+    matchPositions: item['match_positions'] as number[],
+  };
+}
+
+async function postSuggest(
+  body: Record<string, unknown>,
+  opts: { baseUrl: string; token?: string; fetchImpl?: typeof fetch },
+): Promise<FsSuggestResult> {
+  const headers: Record<string, string> = { 'content-type': 'application/json' };
+  if (opts.token !== undefined && opts.token !== '') {
+    headers['authorization'] = `Bearer ${opts.token}`;
+  }
+  const doFetch = opts.fetchImpl ?? fetch;
+  const res = await doFetch(`${opts.baseUrl.replace(/\/$/, '')}/api/v1/fs:suggest`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(body),
+  });
+  const envelope = (await res.json()) as { code: number; msg: string; data: unknown };
+  if (envelope.code !== 0) {
+    throw new Error(`fs:suggest failed (${envelope.code}): ${envelope.msg}`);
+  }
+  const data = envelope.data as Record<string, unknown> | null;
+  if (data === null || typeof data !== 'object' || !Array.isArray(data['items'])) {
+    throw new Error('fs:suggest: unexpected response shape');
+  }
+  return {
+    items: (data['items'] as unknown[])
+      .map(parseItem)
+      .filter((item): item is FsSuggestItem => item !== undefined),
+    truncated: data['truncated'] === true,
+  };
+}
+
+export async function fetchFsSuggest(opts: FetchFsSuggestOptions): Promise<FsSuggestResult> {
+  return postSuggest({
+    roots: [...opts.roots],
+    query: opts.query,
+    limit: opts.limit,
+    follow_gitignore: opts.followGitignore,
+    show_hidden: opts.showHidden,
+    include_globs: opts.includeGlobs,
+    exclude_globs: opts.excludeGlobs,
+    runtime_id: opts.runtimeId,
+  }, opts);
+}
diff --git a/apps/kimi-inspect/src/index.css b/apps/kimi-inspect/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..674d843bceb24547a4074a76cbbf78acea73dd5d
--- /dev/null
+++ b/apps/kimi-inspect/src/index.css
@@ -0,0 +1,33 @@
+@import 'tailwindcss';
+
+:root {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  background: #0b0d10;
+  color: #d6dae0;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  font-size: 13px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #2b313a transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background: #2b313a;
+  border-radius: 4px;
+}
diff --git a/apps/kimi-inspect/src/interactions/api.ts b/apps/kimi-inspect/src/interactions/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6236eb4f4b0a2d2a47cf68d155a5be76ef28a827
--- /dev/null
+++ b/apps/kimi-inspect/src/interactions/api.ts
@@ -0,0 +1,148 @@
+/**
+ * REST client for the pending-interactions endpoints:
+ * `GET/POST {baseUrl}/api/v1/sessions/{sessionId}/approvals[/...]` and
+ * `.../questions[/...]`.
+ *
+ * These are the only remaining surfaces for listing and answering a session's
+ * pending approvals/questions: the engine's interaction kernel is a
+ * process-global singleton with no DI channel on the `/api/v1/debug`
+ * dispatcher, so the inspector talks to the same public REST surface the
+ * clients use.
+ */
+
+export interface ApprovalWire {
+  readonly approval_id: string;
+  readonly session_id: string;
+  readonly turn_id?: number;
+  readonly tool_call_id: string;
+  readonly tool_name: string;
+  readonly action: string;
+  readonly tool_input_display: unknown;
+  readonly created_at: string;
+  readonly expires_at: string;
+}
+
+export interface QuestionOptionWire {
+  readonly id: string;
+  readonly label: string;
+  readonly description?: string;
+}
+
+export interface QuestionItemWire {
+  readonly id: string;
+  readonly question: string;
+  readonly header?: string;
+  readonly body?: string;
+  readonly options: readonly QuestionOptionWire[];
+  readonly multi_select?: boolean;
+  readonly allow_other?: boolean;
+  readonly other_label?: string;
+  readonly other_description?: string;
+}
+
+export interface QuestionWire {
+  readonly question_id: string;
+  readonly session_id: string;
+  readonly turn_id?: number;
+  readonly tool_call_id?: string;
+  readonly questions: readonly QuestionItemWire[];
+  readonly created_at: string;
+}
+
+export type QuestionAnswerWire =
+  | { readonly kind: 'single'; readonly option_id: string }
+  | { readonly kind: 'multi'; readonly option_ids: readonly string[] }
+  | { readonly kind: 'other'; readonly text: string }
+  | {
+      readonly kind: 'multi_with_other';
+      readonly option_ids: readonly string[];
+      readonly other_text: string;
+    }
+  | { readonly kind: 'skipped' };
+
+export interface InteractionsApiOptions {
+  readonly baseUrl: string;
+  readonly token?: string;
+  readonly sessionId: string;
+  readonly fetchImpl?: typeof fetch;
+}
+
+async function call<T>(
+  opts: InteractionsApiOptions,
+  method: 'GET' | 'POST',
+  path: string,
+  body?: unknown,
+  expectedCodes: readonly number[] = [0],
+): Promise<T> {
+  const headers: Record<string, string> = {};
+  const token = opts.token?.trim();
+  if (token !== undefined && token !== '') {
+    headers['authorization'] = `Bearer ${token}`;
+  }
+  if (body !== undefined) headers['content-type'] = 'application/json';
+  const doFetch = opts.fetchImpl ?? fetch;
+  const res = await doFetch(
+    `${opts.baseUrl}/api/v1/sessions/${encodeURIComponent(opts.sessionId)}${path}`,
+    {
+      method,
+      headers,
+      body: body === undefined ? undefined : JSON.stringify(body),
+    },
+  );
+  const envelope = (await res.json()) as { code: number; msg: string; data: unknown };
+  if (!expectedCodes.includes(envelope.code)) {
+    throw new Error(`interactions call failed (${envelope.code}): ${envelope.msg}`);
+  }
+  return envelope.data as T;
+}
+
+export async function listPendingApprovals(
+  opts: InteractionsApiOptions,
+): Promise<readonly ApprovalWire[]> {
+  const data = await call<{ items: readonly ApprovalWire[] }>(
+    opts,
+    'GET',
+    '/approvals?status=pending',
+  );
+  return data.items;
+}
+
+export async function listPendingQuestions(
+  opts: InteractionsApiOptions,
+): Promise<readonly QuestionWire[]> {
+  const data = await call<{ items: readonly QuestionWire[] }>(
+    opts,
+    'GET',
+    '/questions?status=pending',
+  );
+  return data.items;
+}
+
+export function decideApproval(
+  opts: InteractionsApiOptions,
+  approvalId: string,
+  decision: 'approved' | 'rejected',
+): Promise<unknown> {
+  return call(opts, 'POST', `/approvals/${encodeURIComponent(approvalId)}`, { decision });
+}
+
+export function answerQuestion(
+  opts: InteractionsApiOptions,
+  questionId: string,
+  answers: Readonly<Record<string, QuestionAnswerWire>>,
+  method?: 'enter' | 'space' | 'number_key' | 'click',
+): Promise<unknown> {
+  return call(opts, 'POST', `/questions/${encodeURIComponent(questionId)}`, { answers, method });
+}
+
+export function dismissQuestion(
+  opts: InteractionsApiOptions,
+  questionId: string,
+): Promise<unknown> {
+  // The dismiss endpoint reports success as a QUESTION_DISMISSED (40909)
+  // envelope (see kap-server's question dismiss action), not code 0.
+  return call(opts, 'POST', `/questions/${encodeURIComponent(questionId)}:dismiss`, undefined, [
+    0,
+    40909,
+  ]);
+}
diff --git a/apps/kimi-inspect/src/main.tsx b/apps/kimi-inspect/src/main.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..78720df91f171b5611fc901a09a0e298862f7731
--- /dev/null
+++ b/apps/kimi-inspect/src/main.tsx
@@ -0,0 +1,23 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App';
+import { ConnectionProvider } from './connection';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: 1, staleTime: 0, refetchOnWindowFocus: false },
+  },
+});
+
+createRoot(document.querySelector('#root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ConnectionProvider>
+        <App />
+      </ConnectionProvider>
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/apps/kimi-inspect/src/panels.ts b/apps/kimi-inspect/src/panels.ts
new file mode 100644
index 0000000000000000000000000000000000000000..12bd83e72e310cb6bd25af6c298f35d950033ed2
--- /dev/null
+++ b/apps/kimi-inspect/src/panels.ts
@@ -0,0 +1,223 @@
+/**
+ * Service panel descriptors — the handwritten *override* layer of the right
+ * sidebar. The sidebar's baseline is the dynamic channel list served by
+ * `GET /api/v1/debug/channels` (every wire-exposed Service with its methods);
+ * a descriptor here replaces the generic card for its Service with a curated
+ * one: a `fetch` that reads its inspectable state and optional `actions`
+ * that trigger its methods. The generic `ServiceCard` renders them; adding a
+ * curated panel is one entry here, no component code.
+ *
+ * Panels refresh manually (Load / Refresh buttons): the live event streams
+ * that used to drive `refreshOn` refetches went away with the v2 socket
+ * (`/api/v2/ws`).
+ *
+ * The proxies are typed by the real `agent-core-v2` contracts at the call
+ * site, but panels treat them as `AnyService` so one descriptor shape covers
+ * every Service.
+ */
+
+import { IAgentLoopService } from '@moonshot-ai/agent-core-v2/agent/loop/loop';
+import { IAgentMcpService } from '@moonshot-ai/agent-core-v2/agent/mcp/mcp';
+import { IAgentPermissionModeService } from '@moonshot-ai/agent-core-v2/agent/permissionMode/permissionMode';
+import { IAgentPermissionRulesService } from '@moonshot-ai/agent-core-v2/agent/permissionRules/permissionRules';
+import { IAgentPlanService } from '@moonshot-ai/agent-core-v2/features/plan/plan';
+import { IAgentProfileService } from '@moonshot-ai/agent-core-v2/agent/profile/profile';
+import { IAgentSwarmService } from '@moonshot-ai/agent-core-v2/features/swarm/agent/swarm';
+import { IAgentTaskService } from '@moonshot-ai/agent-core-v2/agent/task/task';
+import { IAgentToolRegistryService } from '@moonshot-ai/agent-core-v2/agent/toolRegistry/toolRegistry';
+import { IAuthSummaryService } from '@moonshot-ai/agent-core-v2/app/auth/auth';
+import { IConfigService } from '@moonshot-ai/agent-core-v2/app/config/config';
+import { IFlagService } from '@moonshot-ai/agent-core-v2/app/flag/flag';
+import { IProviderService } from '@moonshot-ai/agent-core-v2/llm-adapter/provider/provider';
+import { ISessionInitService } from '@moonshot-ai/agent-core-v2/features/sessionInit/sessionInit';
+import { ISessionMetadata } from '@moonshot-ai/agent-core-v2/session/sessionMetadata/sessionMetadata';
+import { ISessionWorkspaceContext } from '@moonshot-ai/agent-core-v2/session/workspaceContext/workspaceContext';
+
+/** Loosely-typed view of a scoped service proxy (every member is a remote call). */
+export type AnyService = Record<string, (...args: unknown[]) => Promise<unknown>>;
+
+/** Invoke a method on a loose proxy; the proxy materializes every member. */
+export function call(svc: AnyService, method: string, ...args: unknown[]): Promise<unknown> {
+  const fn = svc[method];
+  if (fn === undefined) {
+    return Promise.reject(new Error(`no such method on proxy: ${method}`));
+  }
+  return fn(...args);
+}
+
+export interface PanelAction {
+  readonly label: string;
+  /** Prompt for one string input before running (raw string passed to `run`). */
+  readonly input?: string;
+  readonly danger?: boolean;
+  readonly run: (svc: AnyService, input?: string) => unknown;
+}
+
+export interface ServicePanelDef {
+  /** Decorator id / wire channel name, e.g. `sessionMetadata`. */
+  readonly id: string;
+  readonly label: string;
+  /** Wire scope the Service is called on (`app` maps to the `core` route). */
+  readonly scope: 'app' | 'workspace' | 'session' | 'agent';
+  readonly fetch?: (svc: AnyService) => Promise<unknown>;
+  readonly actions?: readonly PanelAction[];
+}
+
+const setModeModes = ['manual', 'auto', 'yolo'];
+
+export const CORE_PANELS: readonly ServicePanelDef[] = [
+  {
+    id: String(IConfigService),
+    label: 'ConfigService',
+    scope: 'app',
+    fetch: async (svc) => ({
+      config: await call(svc, 'getAll'),
+      diagnostics: await call(svc, 'diagnostics'),
+    }),
+    actions: [{ label: 'reload', run: (svc) => call(svc, 'reload') }],
+  },
+  {
+    id: String(IProviderService),
+    label: 'ProviderService',
+    scope: 'app',
+    fetch: (svc) => call(svc, 'list'),
+  },
+  {
+    id: String(IAuthSummaryService),
+    label: 'AuthSummaryService',
+    scope: 'app',
+    fetch: (svc) => call(svc, 'summarize'),
+  },
+  {
+    id: String(IFlagService),
+    label: 'FlagService',
+    scope: 'app',
+    fetch: (svc) => call(svc, 'explainAll'),
+  },
+];
+
+export const SESSION_PANELS: readonly ServicePanelDef[] = [
+  {
+    id: String(ISessionMetadata),
+    label: 'SessionMetadata',
+    scope: 'session',
+    fetch: (svc) => call(svc, 'read'),
+    actions: [
+      { label: 'Set title', input: 'New title', run: (svc, title) => call(svc, 'setTitle', title) },
+      { label: 'Archive', danger: true, run: (svc) => call(svc, 'setArchived', true) },
+      { label: 'Unarchive', run: (svc) => call(svc, 'setArchived', false) },
+    ],
+  },
+  {
+    id: String(ISessionWorkspaceContext),
+    label: 'SessionWorkspaceContext',
+    scope: 'session',
+    fetch: async (svc) => ({
+      workDir: await call(svc, 'workDir'),
+      additionalDirs: await call(svc, 'additionalDirs'),
+    }),
+  },
+  {
+    id: String(ISessionInitService),
+    label: 'SessionInitService',
+    scope: 'session',
+    actions: [{ label: 'generateAgentsMd (/init)', run: (svc) => call(svc, 'generateAgentsMd') }],
+  },
+];
+
+export const AGENT_PANELS: readonly ServicePanelDef[] = [
+  {
+    id: String(IAgentLoopService),
+    label: 'AgentLoopService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'activitySnapshot'),
+  },
+  {
+    id: String(IAgentProfileService),
+    label: 'AgentProfileService',
+    scope: 'agent',
+    fetch: async (svc) => ({
+      model: await call(svc, 'getModel'),
+      hasModel: await call(svc, 'hasModel'),
+      isRunnable: await call(svc, 'isRunnable'),
+      data: await call(svc, 'data'),
+    }),
+    actions: [
+      { label: 'Set model', input: 'Model id', run: (svc, model) => call(svc, 'setModel', model) },
+    ],
+  },
+  {
+    id: String(IAgentPermissionModeService),
+    label: 'AgentPermissionModeService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'mode'),
+    actions: setModeModes.map((mode) => ({
+      label: `setMode('${mode}')`,
+      run: (svc) => call(svc, 'setMode', mode),
+    })),
+  },
+  {
+    id: String(IAgentPermissionRulesService),
+    label: 'AgentPermissionRulesService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'rules'),
+  },
+  {
+    id: String(IAgentPlanService),
+    label: 'AgentPlanService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'status'),
+    actions: [
+      { label: 'enter', run: (svc) => call(svc, 'enter') },
+      { label: 'cancel', run: (svc) => call(svc, 'cancel') },
+      { label: 'clear', run: (svc) => call(svc, 'clear') },
+    ],
+  },
+  {
+    id: String(IAgentTaskService),
+    label: 'AgentTaskService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'list'),
+    actions: [
+      {
+        label: 'Stop task',
+        input: 'Task id',
+        danger: true,
+        run: (svc, id) => call(svc, 'stop', id),
+      },
+      { label: 'stopAll', danger: true, run: (svc) => call(svc, 'stopAll') },
+    ],
+  },
+  {
+    id: String(IAgentToolRegistryService),
+    label: 'AgentToolRegistryService',
+    scope: 'agent',
+    fetch: async (svc) => {
+      const tools = (await call(svc, 'list')) as readonly { name?: string }[];
+      return { count: tools.length, names: tools.map((t) => t.name) };
+    },
+  },
+  {
+    id: String(IAgentMcpService),
+    label: 'AgentMcpService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'list'),
+    actions: [
+      {
+        label: 'Reconnect server',
+        input: 'Server name',
+        run: (svc, name) => call(svc, 'reconnect', name),
+      },
+    ],
+  },
+  {
+    id: String(IAgentSwarmService),
+    label: 'AgentSwarmService',
+    scope: 'agent',
+    fetch: (svc) => call(svc, 'isActive'),
+    actions: [
+      { label: 'enter (manual)', run: (svc) => call(svc, 'enter', 'manual') },
+      { label: 'exit', run: (svc) => call(svc, 'exit') },
+    ],
+  },
+];
diff --git a/apps/kimi-inspect/src/search/api.test.ts b/apps/kimi-inspect/src/search/api.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c90fe1d805346119a82734a9563249ed38b8a16e
--- /dev/null
+++ b/apps/kimi-inspect/src/search/api.test.ts
@@ -0,0 +1,215 @@
+/**
+ * Tests for the global search REST client (`POST /api/v1/search`): request
+ * serialization, envelope unwrapping, and hit parsing.
+ */
+
+import { describe, expect, it } from 'vitest';
+
+import { fetchSearchPage } from './api';
+
+function okEnvelope(data: unknown) {
+  return { code: 0, msg: 'success', data, request_id: 'r1' };
+}
+
+function fakeFetch(envelope: unknown) {
+  const calls: { url: string; init?: RequestInit }[] = [];
+  const fetchImpl = (async (url: string | URL, init?: RequestInit) => {
+    calls.push({ url: String(url), init });
+    return { json: async () => envelope };
+  }) as unknown as typeof fetch;
+  return { calls, fetchImpl };
+}
+
+const pageData = {
+  items: [
+    {
+      session_id: 's1',
+      workspace_id: 'ws',
+      session_title: '搜索重构',
+      agent_id: 'main',
+      role: 'assistant',
+      snippet: 'Here is the apple guide.',
+      time: 1_700_000_000_000,
+      turn: 3,
+      step_id: 't3.2',
+      score: 1.5,
+    },
+    {
+      session_id: 's2',
+      workspace_id: 'ws',
+      session_title: 'title doc',
+      agent_id: '',
+      role: 'title',
+      snippet: '苹果询价',
+      time: 1_700_000_100_000,
+      score: 0.9,
+    },
+    // Malformed entries are dropped, not fatal.
+    { session_id: 42 },
+  ],
+  has_more: true,
+  page_token: 'tok-next',
+  index_state: { state: 'ready', indexed_sessions: 2, total_sessions: 2, documents: 10 },
+};
+
+describe('fetchSearchPage', () => {
+  it('posts the snake_case body with bearer auth and maps hits to camelCase', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope(pageData));
+    const page = await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      token: 'tok',
+      query: '苹果',
+      role: 'assistant',
+      sort: 'time_desc',
+      pageSize: 20,
+      pageToken: 'tok-prev',
+      fetchImpl,
+    });
+
+    expect(calls).toHaveLength(1);
+    expect(calls[0]!.url).toBe('http://h:1/api/v1/search');
+    expect(calls[0]!.init?.method).toBe('POST');
+    expect(calls[0]!.init?.headers).toEqual({
+      'content-type': 'application/json',
+      authorization: 'Bearer tok',
+    });
+    expect(JSON.parse(calls[0]!.init?.body as string)).toEqual({
+      query: '苹果',
+      role: 'assistant',
+      sort: 'time_desc',
+      page_size: 20,
+      page_token: 'tok-prev',
+    });
+
+    expect(page.items).toHaveLength(2);
+    const assistant = page.items[0]!;
+    expect(assistant.sessionId).toBe('s1');
+    expect(assistant.role).toBe('assistant');
+    expect(assistant.turn).toBe(3);
+    expect(assistant.stepId).toBe('t3.2');
+    const title = page.items[1]!;
+    expect(title.agentId).toBe('');
+    expect(title.turn).toBeUndefined();
+    expect(title.stepId).toBeUndefined();
+    expect(page.hasMore).toBe(true);
+    expect(page.pageToken).toBe('tok-next');
+    expect(page.indexState).toEqual({
+      state: 'ready',
+      indexedSessions: 2,
+      totalSessions: 2,
+      documents: 10,
+    });
+  });
+
+  it('omits the authorization header when no token is configured', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope(pageData));
+    await fetchSearchPage({ baseUrl: 'http://h:1', query: '苹果', fetchImpl });
+    expect(calls[0]!.init?.headers).toEqual({ 'content-type': 'application/json' });
+  });
+
+  it('serializes mode into the body and parses incomplete: candidate_cap', async () => {
+    const { calls, fetchImpl } = fakeFetch(
+      okEnvelope({ ...pageData, has_more: false, incomplete: 'candidate_cap' }),
+    );
+    const page = await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      query: 'C++',
+      mode: 'literal',
+      fetchImpl,
+    });
+
+    expect(JSON.parse(calls[0]!.init?.body as string)).toEqual({
+      query: 'C++',
+      mode: 'literal',
+    });
+    expect(page.incomplete).toBe('candidate_cap');
+  });
+
+  it('leaves incomplete undefined for absent or unexpected values', async () => {
+    const { fetchImpl } = fakeFetch(okEnvelope(pageData));
+    const page = await fetchSearchPage({ baseUrl: 'http://h:1', query: '苹果', fetchImpl });
+    expect(page.incomplete).toBeUndefined();
+
+    const { fetchImpl: fetchImpl2 } = fakeFetch(
+      okEnvelope({ ...pageData, incomplete: 'something_else' }),
+    );
+    const page2 = await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      query: '苹果',
+      fetchImpl: fetchImpl2,
+    });
+    expect(page2.incomplete).toBeUndefined();
+  });
+
+  it('serializes container into the body (session only, and session + agent)', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope(pageData));
+    await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      query: '苹果',
+      container: { sessionId: 's1' },
+      fetchImpl,
+    });
+    expect(JSON.parse(calls[0]!.init?.body as string)).toEqual({
+      query: '苹果',
+      container: { session_id: 's1' },
+    });
+
+    const { calls: calls2, fetchImpl: fetchImpl2 } = fakeFetch(okEnvelope(pageData));
+    await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      query: '苹果',
+      container: { sessionId: 's1', agentId: 'main' },
+      fetchImpl: fetchImpl2,
+    });
+    expect(JSON.parse(calls2[0]!.init?.body as string)).toEqual({
+      query: '苹果',
+      container: { session_id: 's1', agent_id: 'main' },
+    });
+  });
+
+  it('parses source: live and source: index', async () => {
+    const { fetchImpl } = fakeFetch(okEnvelope({ ...pageData, source: 'live' }));
+    const page = await fetchSearchPage({ baseUrl: 'http://h:1', query: '苹果', fetchImpl });
+    expect(page.source).toBe('live');
+
+    const { fetchImpl: fetchImpl2 } = fakeFetch(okEnvelope({ ...pageData, source: 'index' }));
+    const page2 = await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      query: '苹果',
+      fetchImpl: fetchImpl2,
+    });
+    expect(page2.source).toBe('index');
+  });
+
+  it('leaves source undefined for absent or unknown values', async () => {
+    const { fetchImpl } = fakeFetch(okEnvelope(pageData));
+    const page = await fetchSearchPage({ baseUrl: 'http://h:1', query: '苹果', fetchImpl });
+    expect(page.source).toBeUndefined();
+
+    const { fetchImpl: fetchImpl2 } = fakeFetch(okEnvelope({ ...pageData, source: 'whatever' }));
+    const page2 = await fetchSearchPage({
+      baseUrl: 'http://h:1',
+      query: '苹果',
+      fetchImpl: fetchImpl2,
+    });
+    expect(page2.source).toBeUndefined();
+  });
+
+  it('throws on a non-zero envelope code', async () => {
+    const { fetchImpl } = fakeFetch({
+      code: 40001,
+      msg: 'query must be a non-empty string',
+      data: null,
+    });
+    await expect(fetchSearchPage({ baseUrl: 'http://h:1', query: '', fetchImpl })).rejects.toThrow(
+      /40001/,
+    );
+  });
+
+  it('throws on a malformed payload', async () => {
+    const { fetchImpl } = fakeFetch(okEnvelope({ has_more: false }));
+    await expect(fetchSearchPage({ baseUrl: 'http://h:1', query: 'x', fetchImpl })).rejects.toThrow(
+      /unexpected response shape/,
+    );
+  });
+});
diff --git a/apps/kimi-inspect/src/search/api.ts b/apps/kimi-inspect/src/search/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f01651b69c23b6d20fc90440c316c12ae2ae5197
--- /dev/null
+++ b/apps/kimi-inspect/src/search/api.ts
@@ -0,0 +1,164 @@
+/**
+ * REST client for the global message search endpoint:
+ * `POST {baseUrl}/api/v1/search`.
+ *
+ * The endpoint is a cross-session full-text search over user messages,
+ * assistant text and session titles. The wire shape is validated locally by
+ * hand (this app does not depend on zod): a malformed envelope or payload
+ * throws, individual hits with an unexpected shape are dropped rather than
+ * failing the whole page.
+ */
+
+export interface SearchHit {
+  readonly sessionId: string;
+  readonly workspaceId: string;
+  readonly sessionTitle: string;
+  /** 'main' or a subagent id; '' for title hits (they belong to the session). */
+  readonly agentId: string;
+  readonly role: 'user' | 'assistant' | 'title';
+  readonly snippet: string;
+  /** Epoch ms. */
+  readonly time: number;
+  /** 0-based turn ordinal (`t<turn>` in the transcript); absent for title hits. */
+  readonly turn?: number | undefined;
+  /** Transcript step id (`t<turn>.<step>`); assistant hits on step-aware servers. */
+  readonly stepId?: string | undefined;
+  readonly score: number;
+}
+
+export interface SearchIndexState {
+  readonly state: 'building' | 'ready' | 'readonly';
+  readonly indexedSessions: number;
+  readonly totalSessions: number;
+  readonly documents: number;
+}
+
+export interface SearchPage {
+  readonly items: readonly SearchHit[];
+  readonly hasMore: boolean;
+  readonly pageToken?: string | undefined;
+  /**
+   * Set when the server truncated the literal-mode candidate set before
+   * confirmation — the page may be missing real hits.
+   */
+  readonly incomplete?: 'candidate_cap' | undefined;
+  /**
+   * Which backend served the search: 'live' scanned the in-memory session
+   * transcript, 'index' queried the persisted search index. Absent when the
+   * server omits it or reports an unknown value.
+   */
+  readonly source?: 'live' | 'index' | undefined;
+  readonly indexState: SearchIndexState;
+}
+
+export interface FetchSearchPageOptions {
+  readonly baseUrl: string;
+  readonly token?: string | undefined;
+  readonly query: string;
+  /** Restrict to one document role; omitted searches all. */
+  readonly role?: 'user' | 'assistant' | 'title' | undefined;
+  /** Default server-side 'score'. */
+  readonly sort?: 'score' | 'time_desc' | 'time_asc' | undefined;
+  /**
+   * Match mode; default server-side 'terms'. 'literal' is a substring match
+   * (case-insensitive, NFKC-normalized); the server ignores `sort` and orders
+   * by time desc.
+   */
+  readonly mode?: 'terms' | 'literal' | undefined;
+  /**
+   * Scope the search to one session (and optionally one agent). Wire:
+   * `container: { session_id, agent_id? }`.
+   */
+  readonly container?:
+    | { readonly sessionId: string; readonly agentId?: string | undefined }
+    | undefined;
+  readonly pageSize?: number | undefined;
+  /** Opaque cursor from the previous page; the query conditions must not change. */
+  readonly pageToken?: string | undefined;
+  /** Injectable for tests. */
+  readonly fetchImpl?: typeof fetch;
+}
+
+const ROLES = new Set(['user', 'assistant', 'title']);
+
+function parseHit(value: unknown): SearchHit | undefined {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return undefined;
+  const h = value as Record<string, unknown>;
+  if (
+    typeof h['session_id'] !== 'string' ||
+    typeof h['workspace_id'] !== 'string' ||
+    typeof h['session_title'] !== 'string' ||
+    typeof h['agent_id'] !== 'string' ||
+    typeof h['role'] !== 'string' ||
+    !ROLES.has(h['role']) ||
+    typeof h['snippet'] !== 'string' ||
+    typeof h['time'] !== 'number' ||
+    typeof h['score'] !== 'number'
+  ) {
+    return undefined;
+  }
+  return {
+    sessionId: h['session_id'],
+    workspaceId: h['workspace_id'],
+    sessionTitle: h['session_title'],
+    agentId: h['agent_id'],
+    role: h['role'] as SearchHit['role'],
+    snippet: h['snippet'],
+    time: h['time'],
+    turn: typeof h['turn'] === 'number' ? h['turn'] : undefined,
+    stepId: typeof h['step_id'] === 'string' ? h['step_id'] : undefined,
+    score: h['score'],
+  };
+}
+
+export async function fetchSearchPage(opts: FetchSearchPageOptions): Promise<SearchPage> {
+  const headers: Record<string, string> = { 'content-type': 'application/json' };
+  if (opts.token !== undefined && opts.token !== '') {
+    headers['authorization'] = `Bearer ${opts.token}`;
+  }
+  const doFetch = opts.fetchImpl ?? fetch;
+  const res = await doFetch(`${opts.baseUrl}/api/v1/search`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      query: opts.query,
+      role: opts.role,
+      sort: opts.sort,
+      mode: opts.mode,
+      container:
+        opts.container === undefined
+          ? undefined
+          : { session_id: opts.container.sessionId, agent_id: opts.container.agentId },
+      page_size: opts.pageSize,
+      page_token: opts.pageToken,
+    }),
+  });
+  const envelope = (await res.json()) as { code: number; msg: string; data: unknown };
+  if (envelope.code !== 0) {
+    throw new Error(`search failed (${envelope.code}): ${envelope.msg}`);
+  }
+  const data = envelope.data as Record<string, unknown> | null;
+  if (data === null || typeof data !== 'object' || !Array.isArray(data['items'])) {
+    throw new Error('search: unexpected response shape');
+  }
+  const rawState = (data['index_state'] ?? {}) as Record<string, unknown>;
+  const items = (data['items'] as unknown[])
+    .map(parseHit)
+    .filter((hit): hit is SearchHit => hit !== undefined);
+  return {
+    items,
+    hasMore: data['has_more'] === true,
+    pageToken: typeof data['page_token'] === 'string' ? data['page_token'] : undefined,
+    incomplete: data['incomplete'] === 'candidate_cap' ? 'candidate_cap' : undefined,
+    source: data['source'] === 'live' || data['source'] === 'index' ? data['source'] : undefined,
+    indexState: {
+      state:
+        rawState['state'] === 'building' || rawState['state'] === 'readonly'
+          ? rawState['state']
+          : 'ready',
+      indexedSessions: Number(rawState['indexed_sessions'] ?? 0),
+      totalSessions: Number(rawState['total_sessions'] ?? 0),
+      documents: Number(rawState['documents'] ?? 0),
+    },
+  };
+}
diff --git a/apps/kimi-inspect/src/servers.ts b/apps/kimi-inspect/src/servers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3fd2e18933bd279267598a38cbb98d2545971af5
--- /dev/null
+++ b/apps/kimi-inspect/src/servers.ts
@@ -0,0 +1,70 @@
+/**
+ * Local server discovery (browser side) — reads the dev/preview middleware at
+ * `/__inspect/servers` (`vite/serverDiscovery.ts`), which scans the local
+ * kap-server instance registry and reads the home token. Powers the
+ * zero-config startup connect, the header server switcher, and the discovered
+ * list on the connect screen. Returns `null` outside dev/preview (no such
+ * endpoint on a static host) so the app falls back to the manual flow.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+
+export type DiscoveredServerSource = 'instance' | 'lock' | 'proxy';
+
+export interface DiscoveredServer {
+  readonly id: string;
+  readonly url: string;
+  readonly pid?: number;
+  readonly startedAt?: number;
+  readonly hostVersion?: string;
+  readonly source: DiscoveredServerSource;
+}
+
+export interface ServerDiscoveryResult {
+  readonly home: string;
+  readonly token?: string;
+  readonly servers: readonly DiscoveredServer[];
+}
+
+export async function fetchServerDiscovery(): Promise<ServerDiscoveryResult | null> {
+  let res: Response;
+  try {
+    res = await fetch('/__inspect/servers');
+  } catch {
+    return null;
+  }
+  if (!res.ok) return null;
+  try {
+    const parsed = (await res.json()) as ServerDiscoveryResult;
+    return Array.isArray(parsed.servers) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Poll discovery: instances come and go (the server-side heartbeat is 15 s). */
+export function useServerDiscovery() {
+  return useQuery({
+    queryKey: ['local-server-discovery'],
+    queryFn: fetchServerDiscovery,
+    refetchInterval: 10_000,
+    retry: false,
+    staleTime: 5_000,
+  });
+}
+
+/** Pick the auto-connect target: the remembered pick when it is still alive,
+ * else the dev-proxy target (the standard `pnpm dev:v2` flow), else the
+ * longest-running instance. */
+export function pickDefaultServer(
+  discovery: ServerDiscoveryResult,
+  rememberedUrl?: string | null,
+): DiscoveredServer | undefined {
+  const { servers } = discovery;
+  if (servers.length === 0) return undefined;
+  if (rememberedUrl !== undefined && rememberedUrl !== null && rememberedUrl !== '') {
+    const remembered = servers.find((s) => s.url === rememberedUrl);
+    if (remembered !== undefined) return remembered;
+  }
+  return servers.find((s) => s.source === 'proxy') ?? servers[0];
+}
diff --git a/apps/kimi-inspect/src/sessions/api.test.ts b/apps/kimi-inspect/src/sessions/api.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da885212f51453182c1ac9af4ded8ac00caa2b2b
--- /dev/null
+++ b/apps/kimi-inspect/src/sessions/api.test.ts
@@ -0,0 +1,241 @@
+/**
+ * Tests for the v2 session list REST client (`GET /api/v2/sessions`): query
+ * string serialization, `{ code, msg, data }` envelope parsing, and error
+ * mapping (business codes on 2xx, infra statuses on non-2xx).
+ */
+
+import { describe, expect, it } from 'vitest';
+
+import { fetchV2SessionGroups, fetchV2SessionsPage } from './api';
+
+function fakeFetch(status: number, body: unknown) {
+  const calls: { url: string; init?: RequestInit }[] = [];
+  const fetchImpl = (async (url: string | URL, init?: RequestInit) => {
+    calls.push({ url: String(url), init });
+    return { ok: status >= 200 && status < 300, status, statusText: 'ERR', json: async () => body };
+  }) as unknown as typeof fetch;
+  return { calls, fetchImpl };
+}
+
+/** The shared REST envelope the server wraps every response in. */
+function okBody(data: unknown) {
+  return { code: 0, msg: 'success', data, request_id: 'req-1' };
+}
+
+function errBody(code: number, msg: string) {
+  return { code, msg, data: null, request_id: 'req-1' };
+}
+
+const pageData = {
+  items: [
+    {
+      id: 's1',
+      workspace: { id: 'ws1', cwd: '/tmp/proj' },
+      meta: {
+        title: '重构会话',
+        last_prompt: null,
+        created_at: 1_700_000_000_000,
+        updated_at: 1_700_000_100_000,
+        archived: false,
+      },
+      activity: { status: 'running' },
+      git: {
+        branch: 'main',
+        pull_request: { number: 12, state: 'draft', url: 'https://example.com/pr/12' },
+      },
+    },
+    {
+      id: 's2',
+      workspace: { id: 'ws2', cwd: null },
+      meta: {
+        title: null,
+        last_prompt: 'hello',
+        created_at: 1_700_000_000_000,
+        updated_at: 1_700_000_050_000,
+        archived: true,
+      },
+      activity: { status: 'idle' },
+    },
+    // Malformed entries are dropped, not fatal.
+    { id: 42 },
+  ],
+  has_more: true,
+  next_page_token: 'tok-next',
+};
+
+describe('fetchV2SessionsPage', () => {
+  it('serializes filters as repeated query params and maps items to camelCase', async () => {
+    const { calls, fetchImpl } = fakeFetch(200, okBody(pageData));
+    const page = await fetchV2SessionsPage({
+      baseUrl: 'http://h:1',
+      token: 'tok',
+      workspaceIds: ['ws1', 'ws2'],
+      statuses: ['approval', 'question'],
+      updatedAfter: 1_700_000_000_000,
+      archived: 'all',
+      sort: 'meta.created_at_desc',
+      includeGit: true,
+      pageSize: 20,
+      pageToken: 'tok-prev',
+      fetchImpl,
+    });
+
+    expect(calls).toHaveLength(1);
+    const url = new URL(calls[0]!.url);
+    expect(`${url.origin}${url.pathname}`).toBe('http://h:1/api/v2/sessions');
+    expect(url.searchParams.getAll('workspace.id')).toEqual(['ws1', 'ws2']);
+    expect(url.searchParams.getAll('activity.status')).toEqual(['approval', 'question']);
+    expect(url.searchParams.get('meta.updated_after')).toBe('1700000000000');
+    expect(url.searchParams.get('meta.archived')).toBe('all');
+    expect(url.searchParams.get('sort')).toBe('meta.created_at_desc');
+    expect(url.searchParams.get('include')).toBe('git');
+    expect(url.searchParams.get('page_size')).toBe('20');
+    expect(url.searchParams.get('page_token')).toBe('tok-prev');
+    expect(calls[0]!.init?.headers).toEqual({ authorization: 'Bearer tok' });
+
+    expect(page.items).toHaveLength(2);
+    const first = page.items[0]!;
+    expect(first.id).toBe('s1');
+    expect(first.workspace).toEqual({ id: 'ws1', cwd: '/tmp/proj' });
+    expect(first.meta).toEqual({
+      title: '重构会话',
+      lastPrompt: null,
+      createdAt: 1_700_000_000_000,
+      updatedAt: 1_700_000_100_000,
+      archived: false,
+    });
+    expect(first.activity.status).toBe('running');
+    // Draft PRs are not in the v2 enum; an unknown state degrades to null.
+    expect(first.git?.branch).toBe('main');
+    expect(first.git?.pullRequest).toBeNull();
+    const second = page.items[1]!;
+    expect(second.meta.title).toBeNull();
+    expect(second.meta.lastPrompt).toBe('hello');
+    expect(second.git).toBeUndefined();
+    expect(page.hasMore).toBe(true);
+    expect(page.nextPageToken).toBe('tok-next');
+  });
+
+  it('omits the query string and authorization header when nothing is set', async () => {
+    const { calls, fetchImpl } = fakeFetch(200, okBody(pageData));
+    await fetchV2SessionsPage({ baseUrl: 'http://h:1', fetchImpl });
+    expect(calls[0]!.url).toBe('http://h:1/api/v2/sessions');
+    expect(calls[0]!.init?.headers).toEqual({});
+  });
+
+  it('parses a well-formed pull_request', async () => {
+    const { fetchImpl } = fakeFetch(
+      200,
+      okBody({
+        ...pageData,
+        items: [
+          {
+            ...pageData.items[0],
+            git: {
+              branch: 'feat/x',
+              pull_request: { number: 7, state: 'open', url: 'https://example.com/pr/7' },
+            },
+          },
+        ],
+      }),
+    );
+    const page = await fetchV2SessionsPage({ baseUrl: 'http://h:1', includeGit: true, fetchImpl });
+    expect(page.items[0]!.git?.pullRequest).toEqual({
+      number: 7,
+      state: 'open',
+      url: 'https://example.com/pr/7',
+    });
+  });
+
+  it('throws the envelope code/msg on a business failure (2xx with code != 0)', async () => {
+    const { fetchImpl } = fakeFetch(200, errBody(40922, 'page_token is corrupted'));
+    await expect(
+      fetchV2SessionsPage({ baseUrl: 'http://h:1', pageToken: 'bad', fetchImpl }),
+    ).rejects.toThrow(/40922.*page_token is corrupted/);
+  });
+
+  it('throws the envelope code/msg on a non-2xx response (e.g. 401 from the auth hook)', async () => {
+    const { fetchImpl } = fakeFetch(401, errBody(40101, 'unauthorized'));
+    await expect(fetchV2SessionsPage({ baseUrl: 'http://h:1', fetchImpl })).rejects.toThrow(
+      /40101.*unauthorized/,
+    );
+  });
+
+  it('falls back to the HTTP status when the error body is malformed', async () => {
+    const { fetchImpl } = fakeFetch(500, null);
+    await expect(fetchV2SessionsPage({ baseUrl: 'http://h:1', fetchImpl })).rejects.toThrow(
+      /http_500/,
+    );
+  });
+
+  it('throws on a malformed success payload', async () => {
+    const { fetchImpl } = fakeFetch(200, okBody({ has_more: false }));
+    await expect(fetchV2SessionsPage({ baseUrl: 'http://h:1', fetchImpl })).rejects.toThrow(
+      /unexpected response shape/,
+    );
+  });
+});
+
+describe('fetchV2SessionGroups', () => {
+  const groupData = {
+    groups: [
+      {
+        workspace: { id: 'ws1', cwd: '/tmp/proj' },
+        sessions: [pageData.items[0]],
+        total: 7,
+      },
+      {
+        workspace: { id: 'ws2', cwd: null },
+        sessions: [],
+        total: 0,
+      },
+      // Malformed groups are dropped, not fatal.
+      { workspace: { cwd: '/x' }, sessions: [], total: 1 },
+      { id: 'nope' },
+    ],
+    total: 3,
+    has_more: true,
+    next_page_token: 'tok-groups',
+  };
+
+  it('requests the by_workspace view and parses groups with per-group totals', async () => {
+    const { calls, fetchImpl } = fakeFetch(200, okBody(groupData));
+    const page = await fetchV2SessionGroups({
+      baseUrl: 'http://h:1',
+      token: 'tok',
+      statuses: ['running'],
+      sort: 'meta.updated_at_asc',
+      pageSize: 10,
+      groupPageSize: 5,
+      pageToken: 'tok-prev',
+      fetchImpl,
+    });
+
+    const url = new URL(calls[0]!.url);
+    expect(url.searchParams.get('view')).toBe('by_workspace');
+    expect(url.searchParams.get('group.page_size')).toBe('5');
+    expect(url.searchParams.get('page_size')).toBe('10');
+    expect(url.searchParams.get('sort')).toBe('meta.updated_at_asc');
+    expect(url.searchParams.get('page_token')).toBe('tok-prev');
+
+    expect(page.groups).toHaveLength(2);
+    const first = page.groups[0]!;
+    expect(first.workspace).toEqual({ id: 'ws1', cwd: '/tmp/proj' });
+    expect(first.sessions.map((s) => s.id)).toEqual(['s1']);
+    expect(first.total).toBe(7);
+    expect(page.groups[1]!.workspace).toEqual({ id: 'ws2', cwd: null });
+    expect(page.hasMore).toBe(true);
+    expect(page.nextPageToken).toBe('tok-groups');
+  });
+
+  it('omits group.page_size when not set and throws on a malformed success payload', async () => {
+    const { calls, fetchImpl } = fakeFetch(200, okBody(groupData));
+    await fetchV2SessionGroups({ baseUrl: 'http://h:1', fetchImpl });
+    expect(new URL(calls[0]!.url).searchParams.get('group.page_size')).toBeNull();
+
+    const { fetchImpl: broken } = fakeFetch(200, okBody({ has_more: false }));
+    await expect(fetchV2SessionGroups({ baseUrl: 'http://h:1', fetchImpl: broken })).rejects.toThrow(
+      /unexpected response shape/,
+    );
+  });
+});
diff --git a/apps/kimi-inspect/src/sessions/api.ts b/apps/kimi-inspect/src/sessions/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4255bad4ca80470994e2aaaa54fd840fb0f00cca
--- /dev/null
+++ b/apps/kimi-inspect/src/sessions/api.ts
@@ -0,0 +1,261 @@
+/**
+ * REST client for the v2 session list endpoint: `GET {baseUrl}/api/v2/sessions`.
+ *
+ * Like the v1 surface, every response is wrapped in the
+ * `{ code, msg, data, request_id }` envelope — the business outcome lives in
+ * `code` (`0` success; e.g. `40001` invalid query params, `40922` page_token
+ * mismatch) while the HTTP status only reports server-/transport-level
+ * outcomes (401 from the global auth hook, etc.). Pagination is an opaque
+ * cursor (`page_token`) bound to the first page's query conditions; any
+ * condition change mid-pagination fails server-side with 40922, so callers
+ * must restart from the first page instead of reusing a cursor across
+ * filters/sorts.
+ *
+ * The wire shape is validated locally by hand (this app does not depend on
+ * zod): a malformed page throws, individual items with an unexpected shape
+ * are dropped rather than failing the whole page.
+ */
+
+export type V2ActivityStatus = 'running' | 'approval' | 'question' | 'failed' | 'idle';
+
+export type V2SessionSort =
+  | 'meta.updated_at_desc'
+  | 'meta.updated_at_asc'
+  | 'meta.created_at_desc';
+
+export interface V2Session {
+  readonly id: string;
+  readonly workspace: { readonly id: string; readonly cwd: string | null };
+  readonly meta: {
+    readonly title: string | null;
+    readonly lastPrompt: string | null;
+    readonly createdAt: number;
+    readonly updatedAt: number;
+    readonly archived: boolean;
+  };
+  readonly activity: { readonly status: V2ActivityStatus };
+  /** Present only when the request opted in via `include=git`. */
+  readonly git?: {
+    readonly branch: string | null;
+    readonly pullRequest: {
+      readonly number: number;
+      readonly state: 'open' | 'closed' | 'merged';
+      readonly url: string;
+    } | null;
+  };
+}
+
+export interface V2SessionsQuery {
+  readonly workspaceIds?: readonly string[];
+  readonly statuses?: readonly V2ActivityStatus[];
+  readonly updatedAfter?: number;
+  readonly archived?: 'true' | 'false' | 'all';
+  readonly sort?: V2SessionSort;
+  readonly includeGit?: boolean;
+  readonly pageSize?: number;
+  /** Opaque cursor from the previous page; the query conditions must not change. */
+  readonly pageToken?: string;
+}
+
+export interface V2SessionGroup {
+  readonly workspace: { readonly id: string; readonly cwd: string | null };
+  readonly sessions: readonly V2Session[];
+  /** Full matching-session count of this workspace (≥ sessions.length). */
+  readonly total: number;
+}
+
+export interface V2SessionGroupPage {
+  readonly groups: readonly V2SessionGroup[];
+  readonly hasMore: boolean;
+  readonly nextPageToken?: string;
+}
+
+export interface V2SessionPage {
+  readonly items: readonly V2Session[];
+  readonly hasMore: boolean;
+  readonly nextPageToken?: string;
+}
+
+const STATUSES = new Set<V2ActivityStatus>(['running', 'approval', 'question', 'failed', 'idle']);
+const PR_STATES = new Set(['open', 'closed', 'merged']);
+
+function parsePullRequest(value: unknown): NonNullable<V2Session['git']>['pullRequest'] {
+  if (value === null || value === undefined) return null;
+  if (typeof value !== 'object' || Array.isArray(value)) return null;
+  const pr = value as Record<string, unknown>;
+  if (
+    typeof pr['number'] !== 'number' ||
+    typeof pr['state'] !== 'string' ||
+    !PR_STATES.has(pr['state']) ||
+    typeof pr['url'] !== 'string'
+  ) {
+    return null;
+  }
+  return { number: pr['number'], state: pr['state'] as 'open' | 'closed' | 'merged', url: pr['url'] };
+}
+
+function parseSession(value: unknown): V2Session | undefined {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return undefined;
+  const s = value as Record<string, unknown>;
+  const workspace = s['workspace'] as Record<string, unknown> | null;
+  const meta = s['meta'] as Record<string, unknown> | null;
+  const activity = s['activity'] as Record<string, unknown> | null;
+  if (
+    typeof s['id'] !== 'string' ||
+    workspace === null ||
+    typeof workspace !== 'object' ||
+    typeof workspace['id'] !== 'string' ||
+    meta === null ||
+    typeof meta !== 'object' ||
+    typeof meta['created_at'] !== 'number' ||
+    typeof meta['updated_at'] !== 'number' ||
+    typeof meta['archived'] !== 'boolean' ||
+    activity === null ||
+    typeof activity !== 'object' ||
+    typeof activity['status'] !== 'string' ||
+    !STATUSES.has(activity['status'] as V2ActivityStatus)
+  ) {
+    return undefined;
+  }
+  const cwd = workspace['cwd'];
+  const title = meta['title'];
+  const lastPrompt = meta['last_prompt'];
+  let git: V2Session['git'];
+  if ('git' in s) {
+    const g = s['git'] as Record<string, unknown> | null;
+    if (g !== null && typeof g === 'object' && !Array.isArray(g)) {
+      git = {
+        branch: typeof g['branch'] === 'string' ? g['branch'] : null,
+        pullRequest: parsePullRequest(g['pull_request']),
+      };
+    }
+  }
+  return {
+    id: s['id'],
+    workspace: { id: workspace['id'], cwd: typeof cwd === 'string' ? cwd : null },
+    meta: {
+      title: typeof title === 'string' ? title : null,
+      lastPrompt: typeof lastPrompt === 'string' ? lastPrompt : null,
+      createdAt: meta['created_at'],
+      updatedAt: meta['updated_at'],
+      archived: meta['archived'],
+    },
+    activity: { status: activity['status'] as V2ActivityStatus },
+    git,
+  };
+}
+
+interface FetchOptions {
+  readonly baseUrl: string;
+  readonly token?: string;
+  readonly fetchImpl?: typeof fetch;
+}
+
+function buildParams(query: V2SessionsQuery): URLSearchParams {
+  const params = new URLSearchParams();
+  for (const id of query.workspaceIds ?? []) params.append('workspace.id', id);
+  for (const status of query.statuses ?? []) params.append('activity.status', status);
+  if (query.updatedAfter !== undefined) params.set('meta.updated_after', String(query.updatedAfter));
+  if (query.archived !== undefined) params.set('meta.archived', query.archived);
+  if (query.sort !== undefined) params.set('sort', query.sort);
+  if (query.includeGit === true) params.set('include', 'git');
+  if (query.pageSize !== undefined) params.set('page_size', String(query.pageSize));
+  if (query.pageToken !== undefined) params.set('page_token', query.pageToken);
+  return params;
+}
+
+async function requestData(
+  opts: FetchOptions,
+  params: URLSearchParams,
+): Promise<Record<string, unknown>> {
+  const headers: Record<string, string> = {};
+  if (opts.token !== undefined && opts.token !== '') {
+    headers['authorization'] = `Bearer ${opts.token}`;
+  }
+  const doFetch = opts.fetchImpl ?? fetch;
+  const query = params.toString();
+  const res = await doFetch(
+    `${opts.baseUrl}/api/v2/sessions${query === '' ? '' : `?${query}`}`,
+    { headers },
+  );
+  const body: unknown = await res.json();
+  const envelope = (
+    body !== null && typeof body === 'object' && !Array.isArray(body) ? body : {}
+  ) as Record<string, unknown>;
+  const code = typeof envelope['code'] === 'number' ? envelope['code'] : undefined;
+  const msg = typeof envelope['msg'] === 'string' ? envelope['msg'] : res.statusText;
+  if (!res.ok || code !== 0) {
+    throw new Error(`v2 sessions failed (${code ?? `http_${res.status}`}): ${msg}`);
+  }
+  const data = envelope['data'] as Record<string, unknown> | null;
+  if (data === null || typeof data !== 'object') {
+    throw new Error('v2 sessions: unexpected response shape');
+  }
+  return data;
+}
+
+function pageMeta(data: Record<string, unknown>): {
+  readonly hasMore: boolean;
+  readonly nextPageToken?: string;
+} {
+  return {
+    hasMore: data['has_more'] === true,
+    nextPageToken:
+      typeof data['next_page_token'] === 'string' ? data['next_page_token'] : undefined,
+  };
+}
+
+export async function fetchV2SessionsPage(
+  opts: FetchOptions & V2SessionsQuery,
+): Promise<V2SessionPage> {
+  const data = await requestData(opts, buildParams(opts));
+  if (!Array.isArray(data['items'])) {
+    throw new Error('v2 sessions: unexpected response shape');
+  }
+  const items = (data['items'] as unknown[])
+    .map(parseSession)
+    .filter((s): s is V2Session => s !== undefined);
+  return { items, ...pageMeta(data) };
+}
+
+/**
+ * The workspace-grouped projection (`view=by_workspace`): one request returns
+ * every workspace with a matching session, each carrying its first
+ * `groupPageSize` sessions under the requested sort plus the workspace's full
+ * matching `total`. The opaque cursor pages over groups.
+ */
+export async function fetchV2SessionGroups(
+  opts: FetchOptions & V2SessionsQuery & { readonly groupPageSize?: number },
+): Promise<V2SessionGroupPage> {
+  const params = buildParams(opts);
+  params.set('view', 'by_workspace');
+  if (opts.groupPageSize !== undefined) params.set('group.page_size', String(opts.groupPageSize));
+  const data = await requestData(opts, params);
+  if (!Array.isArray(data['groups'])) {
+    throw new Error('v2 sessions: unexpected response shape');
+  }
+  const groups: V2SessionGroup[] = [];
+  for (const value of data['groups'] as unknown[]) {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) continue;
+    const g = value as Record<string, unknown>;
+    const workspace = g['workspace'] as Record<string, unknown> | null;
+    if (
+      workspace === null ||
+      typeof workspace !== 'object' ||
+      typeof workspace['id'] !== 'string' ||
+      !Array.isArray(g['sessions']) ||
+      typeof g['total'] !== 'number'
+    ) {
+      continue;
+    }
+    const cwd = workspace['cwd'];
+    groups.push({
+      workspace: { id: workspace['id'], cwd: typeof cwd === 'string' ? cwd : null },
+      sessions: (g['sessions'] as unknown[])
+        .map(parseSession)
+        .filter((s): s is V2Session => s !== undefined),
+      total: g['total'],
+    });
+  }
+  return { groups, ...pageMeta(data) };
+}
diff --git a/apps/kimi-inspect/src/sessions/views.ts b/apps/kimi-inspect/src/sessions/views.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6d3fe6b710aab6a979aad2dfc73aa42e36482377
--- /dev/null
+++ b/apps/kimi-inspect/src/sessions/views.ts
@@ -0,0 +1,37 @@
+/**
+ * Preset tree views for the session panel. Each view is a named combination
+ * of the `/api/v2/sessions` query conditions (status filter / archived mode /
+ * git opt-in) applied on top of the endpoint's workspace-grouped projection.
+ * Views are fixed in code — there is no user-defined view editor.
+ */
+
+import type { V2ActivityStatus } from './api';
+
+export interface SessionView {
+  readonly id: string;
+  readonly label: string;
+  /** Maps to repeated `activity.status` params; omitted = no status filter. */
+  readonly statuses?: readonly V2ActivityStatus[];
+  /** Maps to `meta.archived`; default server-side is 'false'. */
+  readonly archived?: 'true' | 'false' | 'all';
+  /** Adds `include=git` (branch / pull_request details on session rows). */
+  readonly includeGit?: boolean;
+}
+
+export const SESSION_VIEWS: readonly SessionView[] = [
+  { id: 'all', label: 'All' },
+  // "Opened" = every live (materialized) session: the four non-idle statuses.
+  // Cold sessions only ever report `idle`, so this filter is exactly the set
+  // of sessions currently alive on the server.
+  {
+    id: 'opened',
+    label: 'Opened',
+    statuses: ['running', 'approval', 'question', 'failed'],
+  },
+  { id: 'archived', label: 'Archived', archived: 'true' },
+  { id: 'git', label: 'Git', includeGit: true },
+];
+
+export function sessionViewById(id: string | undefined): SessionView {
+  return SESSION_VIEWS.find((view) => view.id === id) ?? SESSION_VIEWS[0]!;
+}
diff --git a/apps/kimi-inspect/src/snapshots/api.ts b/apps/kimi-inspect/src/snapshots/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..824f44862b681ede88170b249470c5d54a5a1203
--- /dev/null
+++ b/apps/kimi-inspect/src/snapshots/api.ts
@@ -0,0 +1,53 @@
+import type {
+  AgentRuntimeBindingSnapshot,
+  SessionWorkspaceAssociationSnapshot,
+  WorkspaceInstanceSnapshot,
+  WorkspaceInstancesSnapshot,
+} from '@moonshot-ai/agent-core-v2';
+
+import { DEBUG_RPC_BASE, type InspectClient } from '../channel';
+import { RPCError } from '../channel/errors';
+
+export function fetchWorkspaceSnapshots(client: InspectClient): Promise<WorkspaceInstancesSnapshot> {
+  return fetchSnapshot(client, '/workspaces');
+}
+
+export function fetchWorkspaceSnapshot(
+  client: InspectClient,
+  workspaceId: string,
+): Promise<WorkspaceInstanceSnapshot> {
+  return fetchSnapshot(client, `/workspace/${encodeURIComponent(workspaceId)}/snapshot`);
+}
+
+export function fetchSessionWorkspaceAssociation(
+  client: InspectClient,
+  sessionId: string,
+): Promise<SessionWorkspaceAssociationSnapshot> {
+  return fetchSnapshot(client, `/session/${encodeURIComponent(sessionId)}/association`);
+}
+
+export function fetchAgentRuntimeBinding(
+  client: InspectClient,
+  sessionId: string,
+  agentId: string,
+): Promise<AgentRuntimeBindingSnapshot> {
+  return fetchSnapshot(
+    client,
+    `/session/${encodeURIComponent(sessionId)}/agent/${encodeURIComponent(agentId)}/runtime-binding`,
+  );
+}
+
+async function fetchSnapshot<T>(client: InspectClient, path: string): Promise<T> {
+  const headers: Record<string, string> = {};
+  if (client.token !== undefined && client.token !== '') {
+    headers['authorization'] = `Bearer ${client.token}`;
+  }
+  const response = await fetch(`${client.baseUrl}${DEBUG_RPC_BASE}${path}`, { headers });
+  const envelope = (await response.json()) as {
+    code: number;
+    msg: string;
+    data: T;
+  };
+  if (envelope.code !== 0) throw new RPCError(envelope.code, envelope.msg);
+  return envelope.data;
+}
diff --git a/apps/kimi-inspect/src/transcript/api.ts b/apps/kimi-inspect/src/transcript/api.ts
new file mode 100644
index 0000000000000000000000000000000000000000..907456c82e87134b7dcc86289adbe2fda4a2c150
--- /dev/null
+++ b/apps/kimi-inspect/src/transcript/api.ts
@@ -0,0 +1,127 @@
+/**
+ * REST client for the history endpoint of the message protocol:
+ * `GET {baseUrl}/api/v1/sessions/{sessionId}/history`.
+ *
+ * This is the ONLY source of persisted (completed) timeline state: the
+ * initial load fetches the newest page, "load earlier" pages further with a
+ * `before_turn` cursor, and a reconnect catch-up pages forward from an
+ * `after_step` cursor. The in-flight step's entities arrive over the WS
+ * recovery payload instead (idempotent replace-by-id at the seam).
+ *
+ * Pages are flat entity-message slices (`{ messages, in_flight? }`,
+ * time-ordered, same schemas as the WS stream). There is deliberately no
+ * has-more flag: a page shorter than `page_size` is the end in that
+ * direction, an empty page is definitive.
+ */
+
+import { historyResponseSchema, type HistoryMessage } from '@moonshot-ai/kap-server/protocol';
+
+export const HISTORY_PAGE_SIZE = 500;
+
+export interface HistoryPage {
+  readonly messages: readonly HistoryMessage[];
+  /** Current streaming position of a live session; absent for idle/cold ones. */
+  readonly inFlight?: { turn_id: string; step_id: string };
+}
+
+export interface FetchHistoryPageOptions {
+  readonly baseUrl: string;
+  readonly token?: string;
+  readonly sessionId: string;
+  readonly agentId: string;
+  /** Turn-id cursor; fetches up to `pageSize` messages strictly older than that turn. */
+  readonly beforeTurn?: string;
+  /** Step-id cursor; fetches up to `pageSize` messages strictly newer than that step. */
+  readonly afterStep?: string;
+  readonly pageSize?: number;
+  /** Injectable for tests. */
+  readonly fetchImpl?: typeof fetch;
+}
+
+export async function fetchHistoryPage(opts: FetchHistoryPageOptions): Promise<HistoryPage> {
+  const params = new URLSearchParams({
+    agent_id: opts.agentId,
+    page_size: String(opts.pageSize ?? HISTORY_PAGE_SIZE),
+  });
+  if (opts.beforeTurn !== undefined) params.set('before_turn', opts.beforeTurn);
+  if (opts.afterStep !== undefined) params.set('after_step', opts.afterStep);
+  const headers: Record<string, string> = {};
+  if (opts.token !== undefined && opts.token !== '') {
+    headers['authorization'] = `Bearer ${opts.token}`;
+  }
+  const doFetch = opts.fetchImpl ?? fetch;
+  const res = await doFetch(
+    `${opts.baseUrl}/api/v1/sessions/${encodeURIComponent(opts.sessionId)}/history?${params.toString()}`,
+    { headers },
+  );
+  const envelope = (await res.json()) as { code: number; msg: string; data: unknown };
+  if (envelope.code !== 0) {
+    throw new Error(`history page failed (${envelope.code}): ${envelope.msg}`);
+  }
+  const parsed = historyResponseSchema.safeParse(envelope.data);
+  if (!parsed.success) {
+    throw new Error('history page: unexpected response shape');
+  }
+  return { messages: parsed.data.messages, inFlight: parsed.data.in_flight };
+}
+
+/**
+ * Read the agent's WHOLE history (newest page + `before_turn` paging to the
+ * beginning) in timeline order. On-demand debug reads only (plan lookup) —
+ * the chat channel pages lazily instead.
+ */
+export async function fetchFullHistory(opts: {
+  readonly baseUrl: string;
+  readonly token?: string;
+  readonly sessionId: string;
+  readonly agentId: string;
+  readonly pageSize?: number;
+  readonly fetchImpl?: typeof fetch;
+}): Promise<readonly HistoryMessage[]> {
+  const pageSize = opts.pageSize ?? HISTORY_PAGE_SIZE;
+  const messages: HistoryMessage[] = [];
+  const seen = new Set<string>();
+  let beforeTurn: string | undefined;
+  for (;;) {
+    const page = await fetchHistoryPage({ ...opts, beforeTurn, pageSize });
+    if (page.messages.length === 0) break;
+    const fresh: HistoryMessage[] = [];
+    for (const message of page.messages) {
+      const key = historyEntityKey(message);
+      if (seen.has(key)) continue;
+      seen.add(key);
+      fresh.push(message);
+    }
+    messages.unshift(...fresh);
+    if (page.messages.length < pageSize) break;
+    const oldest = page.messages
+      .map((message) => ('turn_id' in message ? message.turn_id : undefined))
+      .find((turnId) => turnId !== undefined);
+    if (oldest === undefined || oldest === beforeTurn) break;
+    beforeTurn = oldest;
+  }
+  return messages;
+}
+
+function historyEntityKey(message: HistoryMessage): string {
+  switch (message.type) {
+    case 'turn':
+      return `turn:${message.turn_id}`;
+    case 'step':
+      return `step:${message.step_id}`;
+    case 'user':
+    case 'assistant':
+    case 'thinking':
+      return `${message.type}:${message.message_id}`;
+    case 'tool_call':
+      return `tool_call:${message.tool_call_id}`;
+    case 'system':
+      return `system:${message.system_id}`;
+    case 'interaction':
+      return `interaction:${message.interaction_id}`;
+    case 'task':
+      return `task:${message.task_id}`;
+    case 'todo':
+      return `todo:${message.todo_id}`;
+  }
+}
diff --git a/apps/kimi-inspect/src/transcript/channel.ts b/apps/kimi-inspect/src/transcript/channel.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e4b2f86142d0e93104a9a5e0253e174f46d54e7
--- /dev/null
+++ b/apps/kimi-inspect/src/transcript/channel.ts
@@ -0,0 +1,271 @@
+/**
+ * Chat channel — owns the `ChatStore`, the `AuditTrail`, the REST history
+ * pipeline and the `/api/v3/ws` subscription for one (session, agent) pair.
+ *
+ * Recovery per the protocol, all of it converging through idempotent
+ * replace-by-id upserts (no buffering, no cursors beyond the two REST
+ * page cursors, no reset frames):
+ *
+ *  - Initial load / full refresh: newest REST history page (`replace`),
+ *    then re-cover the previously loaded window with `before_turn` pages.
+ *  - Live + recovery payload: every WS message is applied to the store
+ *    as it lands; recovery and live are the same path.
+ *  - Subscribe ack (initial and every reconnect): `after_step` catch-up
+ *    anchored at the newest TERMINAL step (the server answers with the
+ *    slice after that step's last entity, so the step that was streaming
+ *    at disconnect is re-read in full; overlap is idempotent). An empty
+ *    catch-up is verified against the newest page — if the anchor itself
+ *    is gone (undo/clear while disconnected), fall back to a full refresh.
+ *  - `in_flight` on a history response means the WS replay re-sends that
+ *    step's entities from the start; nothing to do but let them land.
+ */
+
+import type { WsLikeCtor } from '../channel/wsLike';
+import { AuditTrail } from '../audit/trail';
+import { fetchHistoryPage, HISTORY_PAGE_SIZE, type HistoryPage } from './api';
+import {
+  ChatStore,
+  newestTerminalStepId,
+  oldestTurnId,
+  recoverLoadedWindow,
+} from './store';
+import { ChatWs } from './ws';
+
+export interface ChatChannelOptions {
+  readonly baseUrl: string;
+  readonly token?: string;
+  readonly sessionId: string;
+  readonly agentId: string;
+  readonly pageSize?: number;
+  readonly WebSocketImpl?: WsLikeCtor;
+  readonly fetchImpl?: typeof fetch;
+  readonly reconnectDelayMs?: number;
+  readonly notifyIntervalMs?: number;
+  /** Fired before a replace-mode refresh drops the current window (scroll anchor hook). */
+  readonly onWillReplace?: () => void;
+  readonly onLoaded?: () => void;
+  readonly onLoadError?: (error: unknown) => void;
+}
+
+export class ChatChannel {
+  readonly store: ChatStore;
+  readonly trail: AuditTrail;
+
+  private readonly opts: ChatChannelOptions;
+  private readonly pageSize: number;
+  private readonly ws: ChatWs;
+  private queue: Promise<void> = Promise.resolve();
+  private refreshQueued = false;
+  private catchUpQueued = false;
+  private disposed = false;
+
+  constructor(opts: ChatChannelOptions) {
+    this.opts = opts;
+    this.pageSize = opts.pageSize ?? HISTORY_PAGE_SIZE;
+    this.store = new ChatStore({ notifyIntervalMs: opts.notifyIntervalMs });
+    this.trail = new AuditTrail();
+    this.ws = new ChatWs({
+      url: opts.baseUrl,
+      token: opts.token,
+      sessionId: opts.sessionId,
+      agentIds: [opts.agentId],
+      WebSocketImpl: opts.WebSocketImpl,
+      reconnectDelayMs: opts.reconnectDelayMs,
+      handlers: {
+        onMessage: (message) => {
+          this.store.applyLive(message);
+          this.trail.recordWs(message, this.store.getState());
+        },
+        onAck: (code, msg) => {
+          if (code === 0) {
+            this.trail.recordEvent('ack', undefined, this.store.getState());
+            this.scheduleCatchUp();
+            return;
+          }
+          this.trail.recordEvent('ack-error', msg, this.store.getState());
+          this.opts.onLoadError?.(new Error(`subscribe rejected (${code}): ${msg ?? ''}`));
+        },
+        onProtocolError: (code, msg) => {
+          this.trail.recordEvent('protocol-error', `${code}: ${msg}`, this.store.getState());
+        },
+        onInvalidFrame: () => {
+          this.trail.recordEvent('invalid-frame', undefined, this.store.getState());
+        },
+        onReconnectScheduled: () => {
+          this.trail.recordEvent('reconnect', undefined, this.store.getState());
+        },
+      },
+    });
+  }
+
+  /** Kick the initial load (the socket is already connecting). */
+  start(): void {
+    this.scheduleRefresh();
+  }
+
+  /** Page one older slice into the window (`before_turn`); rejects on fetch failure. */
+  async loadOlder(): Promise<void> {
+    const oldest = oldestTurnId(this.store.getState().entries);
+    if (oldest === undefined) return;
+    const page = await this.fetchPage({ beforeTurn: oldest });
+    if (this.disposed) return;
+    this.store.applyHistoryPage(page.messages, 'prepend');
+    this.store.setHasMoreOlder(page.messages.length === this.pageSize);
+    this.trail.recordRest(
+      { beforeTurn: oldest, pageSize: this.pageSize },
+      'prepend',
+      page.messages.length,
+      page.inFlight,
+      this.store.getState(),
+    );
+  }
+
+  /** Force a WS reconnect (debug/testing): the ack re-triggers the after_step catch-up. */
+  reconnect(delayMs = 0): void {
+    this.ws.reconnect(delayMs);
+  }
+
+  close(): void {
+    this.disposed = true;
+    this.ws.close();
+    this.store.flushNotify();
+  }
+
+  private scheduleRefresh(): void {
+    if (this.refreshQueued) return;
+    this.refreshQueued = true;
+    this.enqueue(async () => {
+      this.refreshQueued = false;
+      await this.doRefresh();
+    });
+  }
+
+  private scheduleCatchUp(): void {
+    if (this.catchUpQueued) return;
+    this.catchUpQueued = true;
+    this.enqueue(async () => {
+      this.catchUpQueued = false;
+      await this.doCatchUp();
+    });
+  }
+
+  private enqueue(task: () => Promise<void>): void {
+    this.queue = this.queue.then(task).catch(() => {});
+  }
+
+  private async doRefresh(): Promise<void> {
+    const prevOldest = oldestTurnId(this.store.getState().entries);
+    if (prevOldest !== undefined) this.opts.onWillReplace?.();
+    try {
+      const page = await this.fetchPage({});
+      if (this.disposed) return;
+      this.store.applyHistoryPage(page.messages, 'replace');
+      this.store.setHasMoreOlder(page.messages.length === this.pageSize);
+      this.trail.recordRest(
+        { pageSize: this.pageSize },
+        'replace',
+        page.messages.length,
+        page.inFlight,
+        this.store.getState(),
+      );
+      await recoverLoadedWindow(
+        this.store,
+        prevOldest,
+        async (beforeTurn) => {
+          const older = await this.fetchPage({ beforeTurn });
+          if (this.disposed) return [];
+          this.store.setHasMoreOlder(older.messages.length === this.pageSize);
+          return older.messages;
+        },
+        () => this.disposed,
+        (beforeTurn, messages) => {
+          this.trail.recordRest(
+            { beforeTurn, pageSize: this.pageSize },
+            'prepend',
+            messages.length,
+            undefined,
+            this.store.getState(),
+          );
+        },
+      );
+      if (!this.disposed) this.opts.onLoaded?.();
+    } catch (error) {
+      if (!this.disposed) this.opts.onLoadError?.(error);
+    }
+  }
+
+  private async doCatchUp(): Promise<void> {
+    const anchor = newestTerminalStepId(this.store.getState().entries);
+    if (anchor === undefined) {
+      this.scheduleRefresh();
+      return;
+    }
+    let cursor = anchor;
+    for (;;) {
+      let page: HistoryPage;
+      try {
+        page = await this.fetchPage({ afterStep: cursor });
+      } catch (error) {
+        if (!this.disposed) this.opts.onLoadError?.(error);
+        return;
+      }
+      if (this.disposed) return;
+      if (page.messages.length === 0) {
+        let probe: HistoryPage;
+        try {
+          probe = await this.fetchPage({});
+        } catch {
+          return;
+        }
+        if (this.disposed) return;
+        if (!anchorAliveInPage(probe.messages, cursor)) {
+          this.trail.recordEvent(
+            'catchup-refresh',
+            `anchor ${cursor} no longer exists`,
+            this.store.getState(),
+          );
+          this.scheduleRefresh();
+        }
+        return;
+      }
+      this.store.applyHistoryPage(page.messages, 'tail');
+      this.trail.recordRest(
+        { afterStep: cursor, pageSize: this.pageSize },
+        'tail',
+        page.messages.length,
+        page.inFlight,
+        this.store.getState(),
+      );
+      if (page.messages.length < this.pageSize) return;
+      const next = newestTerminalStepId(this.store.getState().entries);
+      if (next === undefined || next === cursor) return;
+      cursor = next;
+    }
+  }
+
+  private fetchPage(cursor: {
+    beforeTurn?: string;
+    afterStep?: string;
+    pageSize?: number;
+  }): Promise<HistoryPage> {
+    return fetchHistoryPage({
+      baseUrl: this.opts.baseUrl,
+      token: this.opts.token,
+      sessionId: this.opts.sessionId,
+      agentId: this.opts.agentId,
+      beforeTurn: cursor.beforeTurn,
+      afterStep: cursor.afterStep,
+      pageSize: cursor.pageSize ?? this.pageSize,
+      fetchImpl: this.opts.fetchImpl,
+    });
+  }
+}
+
+function anchorAliveInPage(messages: HistoryPage['messages'], cursor: string): boolean {
+  const cursorTurn = cursor.split('.')[0]!;
+  return messages.some(
+    (message) =>
+      ('step_id' in message && message.step_id === cursor) ||
+      ('turn_id' in message && message.turn_id === cursorTurn),
+  );
+}
diff --git a/apps/kimi-inspect/src/transcript/plan.ts b/apps/kimi-inspect/src/transcript/plan.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab2144e9a31d7790a19f3f60af4c4cae5a542e0e
--- /dev/null
+++ b/apps/kimi-inspect/src/transcript/plan.ts
@@ -0,0 +1,189 @@
+/**
+ * Plan derivation from the message stream — the new-protocol replacement
+ * for the removed `GET /transcript/plan` endpoint.
+ *
+ * Under the message protocol there is no plan lookup endpoint; the data
+ * lives in the timeline itself: the EnterPlanMode/ExitPlanMode tool calls,
+ * the approval interaction that carries the review (its
+ * `request.tool_input_display` holds the `plan_review` display payload with
+ * the plan content, path and offered options; its `response` holds the
+ * decision, selected label and feedback), and the `system(plan.revision)`
+ * version marker (its payload path points at the plan document).
+ * `session.state.modes.plan` mirrors the current mode/revision over the WS
+ * but is not part of REST history, so derivation here runs purely over a
+ * history message list (in timeline order).
+ */
+
+import type {
+  HistoryMessage,
+  InteractionMessage,
+  ToolCallMessage,
+} from '@moonshot-ai/kap-server/protocol';
+
+export interface PlanReview {
+  readonly state: 'pending' | 'approved' | 'rejected' | 'cancelled';
+  readonly selectedOption?: string;
+  readonly feedback?: string;
+}
+
+export interface PlanInfo {
+  readonly toolCallId: string;
+  readonly turnId: string;
+  /** Which message the content was derived from. */
+  readonly source: 'interaction' | 'display' | 'output';
+  readonly plan: string;
+  readonly path?: string;
+  readonly options?: readonly { label: string; description?: string }[];
+  readonly review?: PlanReview;
+}
+
+export function projectPlans(
+  messages: readonly HistoryMessage[],
+  toolCallId?: string,
+): PlanInfo[] {
+  const interactions: InteractionMessage[] = [];
+  const revisionPaths: string[] = [];
+  for (const message of messages) {
+    if (message.type === 'interaction') interactions.push(message);
+    if (message.type === 'system' && message.subtype === 'plan.revision') {
+      const path = readRevisionPath(message.payload);
+      if (path !== undefined) revisionPaths.push(path);
+    }
+  }
+  const plans: PlanInfo[] = [];
+  for (const message of messages) {
+    if (message.type !== 'tool_call' || message.name !== 'ExitPlanMode') continue;
+    if (toolCallId !== undefined && message.tool_call_id !== toolCallId) continue;
+    const info = projectPlanCall(message, interactions);
+    if (info === undefined) continue;
+    plans.push(
+      info.path === undefined && revisionPaths.length > 0
+        ? { ...info, path: revisionPaths.at(-1) }
+        : info,
+    );
+  }
+  return plans;
+}
+
+function projectPlanCall(
+  call: ToolCallMessage,
+  interactions: readonly InteractionMessage[],
+): PlanInfo | undefined {
+  const interaction = interactions.find(
+    (candidate) =>
+      candidate.kind === 'approval' &&
+      (candidate.interaction_id === call.approval_id ||
+        (call.approval_id === undefined && candidate.tool_call_id === call.tool_call_id)),
+  );
+  const review = readPlanReview(interaction);
+  if (interaction !== undefined && interaction.kind === 'approval') {
+    const fromInteraction = readPlanReviewDisplay(interaction.request?.tool_input_display);
+    if (fromInteraction !== undefined) {
+      return {
+        toolCallId: call.tool_call_id,
+        turnId: call.turn_id,
+        source: 'interaction',
+        ...fromInteraction,
+        review,
+      };
+    }
+  }
+  const fromDisplay = readPlanReviewDisplay(call.display);
+  if (fromDisplay !== undefined) {
+    return {
+      toolCallId: call.tool_call_id,
+      turnId: call.turn_id,
+      source: 'display',
+      ...fromDisplay,
+      review,
+    };
+  }
+  const fromOutput = parsePlanFromOutput(call.output);
+  if (fromOutput !== undefined) {
+    return {
+      toolCallId: call.tool_call_id,
+      turnId: call.turn_id,
+      source: 'output',
+      ...fromOutput,
+      review,
+    };
+  }
+  return undefined;
+}
+
+function readPlanReview(interaction: InteractionMessage | undefined): PlanReview | undefined {
+  if (interaction === undefined || interaction.kind !== 'approval') return undefined;
+  const state = interaction.status;
+  if (state !== 'pending' && state !== 'approved' && state !== 'rejected' && state !== 'cancelled') {
+    return undefined;
+  }
+  const response = interaction.response;
+  const selected =
+    typeof response?.selected_label === 'string' && response.selected_label.length > 0
+      ? response.selected_label
+      : undefined;
+  const feedback =
+    typeof response?.feedback === 'string' && response.feedback.length > 0
+      ? response.feedback
+      : undefined;
+  return { state, selectedOption: selected, feedback };
+}
+
+interface PlanReviewDisplayInfo {
+  readonly plan: string;
+  readonly path?: string;
+  readonly options?: readonly { label: string; description?: string }[];
+}
+
+function readPlanReviewDisplay(display: unknown): PlanReviewDisplayInfo | undefined {
+  if (display === null || typeof display !== 'object') return undefined;
+  const d = display as { kind?: unknown; plan?: unknown; path?: unknown; options?: unknown };
+  if (d.kind !== 'plan_review' || typeof d.plan !== 'string' || d.plan.trim().length === 0) {
+    return undefined;
+  }
+  const options = Array.isArray(d.options)
+    ? d.options
+        .map((option: unknown): { label: string; description?: string } | null => {
+          if (option === null || typeof option !== 'object') return null;
+          const o = option as { label?: unknown; description?: unknown };
+          if (typeof o.label !== 'string' || o.label.length === 0) return null;
+          return {
+            label: o.label,
+            description: typeof o.description === 'string' ? o.description : undefined,
+          };
+        })
+        .filter((o): o is { label: string; description?: string } => o !== null)
+    : undefined;
+  return {
+    plan: d.plan,
+    path: typeof d.path === 'string' ? d.path : undefined,
+    options: options !== undefined && options.length > 0 ? options : undefined,
+  };
+}
+
+function readRevisionPath(payload: unknown): string | undefined {
+  if (payload === null || typeof payload !== 'object') return undefined;
+  const path = (payload as { path?: unknown }).path;
+  return typeof path === 'string' && path.length > 0 ? path : undefined;
+}
+
+const PLAN_SAVED_TO_MARKER = 'Plan saved to: ';
+const PLAN_BODY_MARKERS = ['## Approved Plan:\n', '## Plan (auto-approved, not user-reviewed):\n'];
+
+function parsePlanFromOutput(output: unknown): { plan: string; path?: string } | undefined {
+  if (typeof output !== 'string') return undefined;
+  let path: string | undefined;
+  for (const line of output.split('\n')) {
+    if (line.startsWith(PLAN_SAVED_TO_MARKER)) {
+      path = line.slice(PLAN_SAVED_TO_MARKER.length).trim() || undefined;
+      break;
+    }
+  }
+  for (const marker of PLAN_BODY_MARKERS) {
+    const index = output.indexOf(marker);
+    if (index === -1) continue;
+    const plan = output.slice(index + marker.length);
+    if (plan.trim().length > 0) return { plan, path };
+  }
+  return undefined;
+}
diff --git a/apps/kimi-inspect/src/transcript/store.ts b/apps/kimi-inspect/src/transcript/store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5ad59ca60120babf100408a3d6672fb209423f0
--- /dev/null
+++ b/apps/kimi-inspect/src/transcript/store.ts
@@ -0,0 +1,499 @@
+/**
+ * Per-(session, agent) chat state for the message protocol v3.
+ *
+ * The store is a deliberately thin reflection of the wire: every entity
+ * message upserts by (type, own id) with its content fields as the
+ * authoritative whole (replace-by-id), the delta family
+ * (`assistant.delta` / `thinking.delta` / `tool_call.delta`) appends to the
+ * already-existing entity (an entity always precedes its deltas on the
+ * stream; an orphan delta is dropped — the entity's next upsert carries the
+ * cumulative content anyway), and `tool.progress` patches the entity's
+ * latest-progress field. Recovery payloads and live traffic are applied
+ * through the exact same path — idempotent overwrite makes them
+ * indistinguishable, so there is no reset/buffer/cursor machinery at all.
+ *
+ * `system(undo)` / `system(clear)` land on the timeline in place AND
+ * truncate it: every entry whose own id is in `payload.removed_ids` is
+ * dropped together with its subtree (all entries carrying that turn_id),
+ * and interactions anchored at a removed tool call are cascaded out.
+ *
+ * State entities have one channel each: `interaction` / `task` / `todo`
+ * upsert into keyed maps, `session.state` replaces the single latest
+ * snapshot. Global messages (workspace/session/config/…) are not consumed
+ * by this store.
+ *
+ * An upsert whose `timestamp` is strictly older than the held entity's is
+ * skipped: a REST page folded before a live update must not rewind it. An
+ * upsert without a timestamp (an unread `user` message) is stale once the
+ * held entity carries one — unread precedes read, never the reverse — yet
+ * always outranks the page when a replace window carries live-only entries
+ * over.
+ *
+ * Notifications are trailing-edge throttled (`notifyIntervalMs`) so a
+ * per-token delta stream does not become a per-token React render; state
+ * reads (`getState`) always see the latest applied message regardless.
+ */
+
+import type {
+  AssistantMessage,
+  HistoryMessage,
+  InteractionMessage,
+  ServerMessage,
+  SessionStateMessage,
+  SystemMessage,
+  TaskMessage,
+  ThinkingMessage,
+  TodoMessage,
+  ToolCallMessage,
+} from '@moonshot-ai/kap-server/protocol';
+
+export type TimelineMessage =
+  | Extract<HistoryMessage, { type: 'turn' }>
+  | Extract<HistoryMessage, { type: 'step' }>
+  | Extract<HistoryMessage, { type: 'user' }>
+  | AssistantMessage
+  | ThinkingMessage
+  | ToolCallMessage
+  | SystemMessage;
+
+export interface TimelineEntry {
+  readonly key: string;
+  readonly message: TimelineMessage;
+}
+
+export interface ChatState {
+  readonly entries: readonly TimelineEntry[];
+  readonly interactions: ReadonlyMap<string, InteractionMessage>;
+  readonly tasks: ReadonlyMap<string, TaskMessage>;
+  readonly todos: ReadonlyMap<string, TodoMessage>;
+  readonly sessionState: SessionStateMessage | undefined;
+  readonly hasMoreOlder: boolean;
+}
+
+export const EMPTY_CHAT_STATE: ChatState = {
+  entries: [],
+  interactions: new Map(),
+  tasks: new Map(),
+  todos: new Map(),
+  sessionState: undefined,
+  hasMoreOlder: false,
+};
+
+export type HistoryPageMode = 'replace' | 'prepend' | 'tail';
+
+export function timelineKeyOf(message: TimelineMessage): string {
+  switch (message.type) {
+    case 'turn':
+      return `turn:${message.turn_id}`;
+    case 'step':
+      return `step:${message.step_id}`;
+    case 'user':
+    case 'assistant':
+    case 'thinking':
+      return `${message.type}:${message.message_id}`;
+    case 'tool_call':
+      return `tool_call:${message.tool_call_id}`;
+    case 'system':
+      return `system:${message.system_id}`;
+  }
+}
+
+function ownIdOf(message: TimelineMessage): string {
+  switch (message.type) {
+    case 'turn':
+      return message.turn_id;
+    case 'step':
+      return message.step_id;
+    case 'user':
+    case 'assistant':
+    case 'thinking':
+      return message.message_id;
+    case 'tool_call':
+      return message.tool_call_id;
+    case 'system':
+      return message.system_id;
+  }
+}
+
+export function turnIdOf(message: TimelineMessage): string | undefined {
+  return message.type === 'system' ? undefined : message.turn_id;
+}
+
+export function oldestTurnId(entries: readonly TimelineEntry[]): string | undefined {
+  for (const entry of entries) {
+    const turnId = turnIdOf(entry.message);
+    if (turnId !== undefined) return turnId;
+  }
+  return undefined;
+}
+
+export function hasTurnId(entries: readonly TimelineEntry[], turnId: string): boolean {
+  return entries.some((entry) => turnIdOf(entry.message) === turnId);
+}
+
+export function newestTerminalStepId(entries: readonly TimelineEntry[]): string | undefined {
+  for (let i = entries.length - 1; i >= 0; i -= 1) {
+    const message = entries[i]!.message;
+    if (message.type === 'step' && message.status !== 'running') return message.step_id;
+  }
+  return undefined;
+}
+
+/**
+ * Re-cover a previously loaded window after a replace-mode refresh: page
+ * backwards until `prevOldestTurnId` is loaded again (a count-based stop
+ * silently drops the window's head when new turns arrived meanwhile). Stops
+ * at the oldest available page, on a no-progress page, or when `isDisposed`.
+ */
+export async function recoverLoadedWindow(
+  store: ChatStore,
+  prevOldestTurnId: string | undefined,
+  fetchPage: (beforeTurn: string) => Promise<readonly HistoryMessage[]>,
+  isDisposed: () => boolean,
+  onPageApplied?: (beforeTurn: string, messages: readonly HistoryMessage[]) => void,
+): Promise<void> {
+  if (prevOldestTurnId === undefined) return;
+  while (!hasTurnId(store.getState().entries, prevOldestTurnId) && store.getState().hasMoreOlder) {
+    const oldest = oldestTurnId(store.getState().entries);
+    if (oldest === undefined) break;
+    const before = store.getState().entries.length;
+    const page = await fetchPage(oldest);
+    if (isDisposed()) return;
+    store.applyHistoryPage(page, 'prepend');
+    onPageApplied?.(oldest, page);
+    if (store.getState().entries.length === before) break;
+  }
+}
+
+export class ChatStore {
+  private state: ChatState = EMPTY_CHAT_STATE;
+  private readonly listeners = new Set<() => void>();
+  private readonly notifyIntervalMs: number;
+  private notifyTimer: ReturnType<typeof setTimeout> | undefined;
+  private dirty = false;
+
+  constructor(opts?: { notifyIntervalMs?: number }) {
+    this.notifyIntervalMs = opts?.notifyIntervalMs ?? 80;
+  }
+
+  getState(): ChatState {
+    return this.state;
+  }
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  setHasMoreOlder(flag: boolean): void {
+    if (this.state.hasMoreOlder === flag) return;
+    this.state = { ...this.state, hasMoreOlder: flag };
+    this.scheduleNotify();
+  }
+
+  /**
+   * Merge one REST history page. `replace` installs the page as the whole
+   * window (entries absent from it are dropped, except ones newer than the
+   * page's newest timestamp — live traffic that outran the fetch);
+   * `prepend` inserts the older slice ahead of the window (deduped by key);
+   * `tail` upserts the catch-up slice in page order. system(undo/clear)
+   * messages inside a page truncate exactly like live ones.
+   */
+  applyHistoryPage(messages: readonly HistoryMessage[], mode: HistoryPageMode): void {
+    if (mode === 'replace') {
+      const pageMax = maxTimestamp(messages);
+      const carried = pageMax === undefined ? [] : this.newerThan(this.state.entries, pageMax);
+      const next: TimelineEntry[] = [];
+      const seen = new Set<string>();
+      for (const message of messages) {
+        if (!isTimelineMessage(message)) {
+          this.applyStateMessage(message);
+          continue;
+        }
+        const key = timelineKeyOf(message);
+        if (seen.has(key)) continue;
+        seen.add(key);
+        next.push(this.preferHeld(key, message));
+      }
+      for (const entry of carried) {
+        if (!seen.has(entry.key)) next.push(entry);
+      }
+      this.state = { ...this.state, entries: next };
+      this.applyTruncations(messages);
+      this.scheduleNotify();
+      return;
+    }
+    if (mode === 'prepend') {
+      const existing = new Set(this.state.entries.map((entry) => entry.key));
+      const fresh: TimelineEntry[] = [];
+      for (const message of messages) {
+        if (!isTimelineMessage(message)) {
+          this.applyStateMessage(message);
+          continue;
+        }
+        const key = timelineKeyOf(message);
+        if (existing.has(key)) continue;
+        existing.add(key);
+        fresh.push({ key, message });
+      }
+      if (fresh.length > 0) {
+        this.state = { ...this.state, entries: [...fresh, ...this.state.entries] };
+      }
+      this.applyTruncations(messages);
+      this.scheduleNotify();
+      return;
+    }
+    for (const message of messages) this.applyEntity(message);
+  }
+
+  /** Apply one live (or recovery) WS message; recovery and live share this path. */
+  applyLive(message: ServerMessage): void {
+    switch (message.type) {
+      case 'assistant.delta': {
+        this.patchText(`assistant:${message.message_id}`, message.text);
+        return;
+      }
+      case 'thinking.delta': {
+        this.patchText(`thinking:${message.message_id}`, message.text);
+        return;
+      }
+      case 'tool_call.delta': {
+        this.patchToolCall(message.tool_call_id, (call) => ({
+          ...call,
+          input_text: (call.input_text ?? '') + message.input_text,
+        }));
+        return;
+      }
+      case 'tool.progress': {
+        this.patchToolCall(message.tool_call_id, (call) => ({ ...call, progress: message.progress }));
+        return;
+      }
+      case 'interaction':
+      case 'task':
+      case 'todo':
+      case 'session.state': {
+        this.applyStateMessage(message);
+        return;
+      }
+      case 'turn':
+      case 'step':
+      case 'user':
+      case 'assistant':
+      case 'thinking':
+      case 'tool_call':
+      case 'system': {
+        this.applyEntity(message);
+        return;
+      }
+      default:
+        return;
+    }
+  }
+
+  /** Flush a pending throttled notification (teardown / explicit sync point). */
+  flushNotify(): void {
+    if (this.notifyTimer !== undefined) {
+      clearTimeout(this.notifyTimer);
+      this.notifyTimer = undefined;
+    }
+    if (!this.dirty) return;
+    this.dirty = false;
+    for (const listener of this.listeners) listener();
+  }
+
+  private applyEntity(message: HistoryMessage): void {
+    if (!isTimelineMessage(message)) {
+      this.applyStateMessage(message);
+      return;
+    }
+    const key = timelineKeyOf(message);
+    const index = this.state.entries.findIndex((entry) => entry.key === key);
+    if (index < 0) {
+      this.state = { ...this.state, entries: [...this.state.entries, { key, message }] };
+    } else {
+      const held = this.state.entries[index]!.message;
+      if (held === message || isStaleUpsert(held.timestamp, message.timestamp)) return;
+      const entries = [...this.state.entries];
+      entries[index] = { key, message };
+      this.state = { ...this.state, entries };
+    }
+    if (message.type === 'system' && (message.subtype === 'undo' || message.subtype === 'clear')) {
+      this.truncate(message);
+    }
+    this.scheduleNotify();
+  }
+
+  private applyStateMessage(
+    message: InteractionMessage | TaskMessage | TodoMessage | SessionStateMessage,
+  ): void {
+    switch (message.type) {
+      case 'interaction': {
+        const held = this.state.interactions.get(message.interaction_id);
+        if (held === message) return;
+        if (held !== undefined && held.timestamp > message.timestamp) return;
+        const interactions = new Map([
+          ...this.state.interactions,
+          [message.interaction_id, message] as const,
+        ]);
+        this.state = { ...this.state, interactions };
+        break;
+      }
+      case 'task': {
+        const held = this.state.tasks.get(message.task_id);
+        if (held === message) return;
+        if (held !== undefined && held.timestamp > message.timestamp) return;
+        const tasks = new Map([...this.state.tasks, [message.task_id, message] as const]);
+        this.state = { ...this.state, tasks };
+        break;
+      }
+      case 'todo': {
+        const held = this.state.todos.get(message.todo_id);
+        if (held === message) return;
+        if (held !== undefined && held.timestamp > message.timestamp) return;
+        const todos = new Map([...this.state.todos, [message.todo_id, message] as const]);
+        this.state = { ...this.state, todos };
+        break;
+      }
+      case 'session.state': {
+        const held = this.state.sessionState;
+        if (held === message) return;
+        if (held !== undefined && held.timestamp > message.timestamp) return;
+        this.state = { ...this.state, sessionState: message };
+        break;
+      }
+    }
+    this.scheduleNotify();
+  }
+
+  private patchText(key: string, text: string): void {
+    this.patchEntry(key, (message) => {
+      if (message.type !== 'assistant' && message.type !== 'thinking') return message;
+      return { ...message, text: message.text + text };
+    });
+  }
+
+  private patchToolCall(
+    toolCallId: string,
+    patch: (call: ToolCallMessage) => ToolCallMessage,
+  ): void {
+    this.patchEntry(`tool_call:${toolCallId}`, (message) => {
+      if (message.type !== 'tool_call') return message;
+      return patch(message);
+    });
+  }
+
+  private patchEntry(key: string, patch: (message: TimelineMessage) => TimelineMessage): void {
+    const index = this.state.entries.findIndex((entry) => entry.key === key);
+    if (index < 0) return;
+    const current = this.state.entries[index]!;
+    const next = patch(current.message);
+    if (next === current.message) return;
+    const entries = [...this.state.entries];
+    entries[index] = { key, message: next };
+    this.state = { ...this.state, entries };
+    this.scheduleNotify();
+  }
+
+  private applyTruncations(messages: readonly HistoryMessage[]): void {
+    for (const message of messages) {
+      if (message.type === 'system' && (message.subtype === 'undo' || message.subtype === 'clear')) {
+        this.truncate(message);
+      }
+    }
+  }
+
+  private truncate(message: SystemMessage): void {
+    if (message.subtype !== 'undo' && message.subtype !== 'clear') return;
+    const removed = new Set(message.payload.removed_ids);
+    if (removed.size === 0) return;
+    const removedToolCalls = new Set<string>();
+    const entries = this.state.entries.filter((entry) => {
+      const current = entry.message;
+      if (removed.has(ownIdOf(current))) {
+        if (current.type === 'tool_call') removedToolCalls.add(current.tool_call_id);
+        return false;
+      }
+      if (current.type !== 'system' && current.turn_id !== undefined && removed.has(current.turn_id)) {
+        if (current.type === 'tool_call') removedToolCalls.add(current.tool_call_id);
+        return false;
+      }
+      return true;
+    });
+    let interactions = this.state.interactions;
+    if (removedToolCalls.size > 0) {
+      const next = new Map(interactions);
+      for (const [id, interaction] of next) {
+        if (interaction.tool_call_id !== undefined && removedToolCalls.has(interaction.tool_call_id)) {
+          next.delete(id);
+        }
+      }
+      interactions = next;
+    }
+    this.state = { ...this.state, entries, interactions };
+  }
+
+  private preferHeld(key: string, message: TimelineMessage): TimelineEntry {
+    const held = this.state.entries.find((entry) => entry.key === key);
+    if (held !== undefined && isStaleUpsert(held.message.timestamp, message.timestamp)) return held;
+    return { key, message };
+  }
+
+  private newerThan(entries: readonly TimelineEntry[], timestamp: number): TimelineEntry[] {
+    return entries.filter(
+      (entry) => entry.message.timestamp === undefined || entry.message.timestamp > timestamp,
+    );
+  }
+
+  private scheduleNotify(): void {
+    this.dirty = true;
+    if (this.notifyIntervalMs <= 0) {
+      this.flushNotify();
+      return;
+    }
+    if (this.notifyTimer !== undefined) return;
+    this.notifyTimer = setTimeout(() => {
+      this.notifyTimer = undefined;
+      this.flushNotify();
+    }, this.notifyIntervalMs);
+    this.notifyTimer.unref?.();
+  }
+}
+
+function isTimelineMessage(
+  message: HistoryMessage | ServerMessage,
+): message is TimelineMessage {
+  switch (message.type) {
+    case 'turn':
+    case 'step':
+    case 'user':
+    case 'assistant':
+    case 'thinking':
+    case 'tool_call':
+    case 'system':
+      return true;
+    default:
+      return false;
+  }
+}
+
+function maxTimestamp(messages: readonly HistoryMessage[]): number | undefined {
+  let max: number | undefined;
+  for (const message of messages) {
+    if (message.timestamp === undefined) continue;
+    if (max === undefined || message.timestamp > max) max = message.timestamp;
+  }
+  return max;
+}
+
+/**
+ * Same-entity version ordering for the idempotent upsert path. Only `user`
+ * messages can lack a timestamp (unread = not persisted yet), and the
+ * unread → read transition is one-way, so an untimestamped upsert is stale
+ * whenever the held entity already carries one.
+ */
+function isStaleUpsert(held: number | undefined, incoming: number | undefined): boolean {
+  if (incoming === undefined) return held !== undefined;
+  return held !== undefined && held > incoming;
+}
diff --git a/apps/kimi-inspect/src/transcript/transcript.test.ts b/apps/kimi-inspect/src/transcript/transcript.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..07dba90ccf99494a799ed2f5b481a4e03ba8fbfe
--- /dev/null
+++ b/apps/kimi-inspect/src/transcript/transcript.test.ts
@@ -0,0 +1,902 @@
+/**
+ * Message-protocol glue-layer tests — the app's own REST/WS/store/channel
+ * plumbing for the v3 protocol. The wire schemas themselves are covered by
+ * kap-server's contract tests and are intentionally not re-tested here.
+ */
+
+import type {
+  AssistantMessage,
+  HistoryMessage,
+  InteractionMessage,
+  ServerMessage,
+  StepMessage,
+  SystemMessage,
+  TaskMessage,
+  ToolCallMessage,
+  TurnMessage,
+  UserMessage,
+} from '@moonshot-ai/kap-server/protocol';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { WsLike } from '../channel/wsLike';
+import { fetchFullHistory, fetchHistoryPage } from './api';
+import { ChatChannel } from './channel';
+import { projectPlans } from './plan';
+import {
+  ChatStore,
+  newestTerminalStepId,
+  oldestTurnId,
+  recoverLoadedWindow,
+  type TimelineEntry,
+} from './store';
+import { ChatWs } from './ws';
+
+// ---------------------------------------------------------------- fixtures
+
+const T0 = Date.parse('2026-01-01T00:00:00.000Z');
+let tick = 0;
+
+function ts(offsetMs?: number): number {
+  tick += 1;
+  return T0 + tick * 1000 + (offsetMs ?? 0);
+}
+
+const base = { session_id: 's1', agent_id: 'main' } as const;
+
+function turnMsg(n: number, status: 'running' | 'completed' = 'completed', at?: number): TurnMessage {
+  return {
+    type: 'turn',
+    ...base,
+    timestamp: at ?? ts(),
+    turn_id: `t${n}`,
+    ordinal: n,
+    status,
+    origin: { kind: 'user' },
+  };
+}
+
+function stepMsg(
+  stepId: string,
+  status: StepMessage['status'] = 'completed',
+  at?: number,
+): StepMessage {
+  const turnId = stepId.split('.')[0] ?? 't1';
+  const ordinal = Number(stepId.split('.')[1] ?? '1');
+  return {
+    type: 'step',
+    ...base,
+    timestamp: at ?? ts(),
+    step_id: stepId,
+    turn_id: turnId,
+    ordinal,
+    status,
+  };
+}
+
+function userMsg(stepId: string, text: string, at?: number): UserMessage {
+  const turnId = stepId.split('.')[0] ?? 't1';
+  return {
+    type: 'user',
+    ...base,
+    timestamp: at ?? ts(),
+    message_id: `${stepId}.u0`,
+    turn_id: turnId,
+    text: [{ type: 'text', text, meta: {} }],
+    status: 'read',
+  };
+}
+
+function assistantMsg(
+  stepId: string,
+  text: string,
+  status: 'streaming' | 'completed' = 'completed',
+  at?: number,
+): AssistantMessage {
+  const turnId = stepId.split('.')[0] ?? 't1';
+  return {
+    type: 'assistant',
+    ...base,
+    timestamp: at ?? ts(),
+    message_id: `${stepId}.a0`,
+    turn_id: turnId,
+    step_id: stepId,
+    status,
+    text,
+  };
+}
+
+function toolCallMsg(
+  stepId: string,
+  id: string,
+  overrides: Partial<ToolCallMessage> = {},
+): ToolCallMessage {
+  const turnId = stepId.split('.')[0] ?? 't1';
+  return {
+    type: 'tool_call',
+    ...base,
+    timestamp: ts(),
+    tool_call_id: id,
+    turn_id: turnId,
+    step_id: stepId,
+    name: 'Bash',
+    status: 'running',
+    ...overrides,
+  };
+}
+
+function systemMsg(
+  subtype: SystemMessage['subtype'],
+  systemId: string,
+  payload?: unknown,
+): SystemMessage {
+  return {
+    type: 'system',
+    ...base,
+    timestamp: ts(),
+    system_id: systemId,
+    subtype,
+    payload,
+  } as SystemMessage;
+}
+
+function interactionMsg(id: string, toolCallId?: string): InteractionMessage {
+  return {
+    type: 'interaction',
+    ...base,
+    timestamp: ts(),
+    interaction_id: id,
+    kind: 'approval',
+    status: 'pending',
+    tool_call_id: toolCallId,
+  };
+}
+
+function taskMsg(id: string, status: TaskMessage['status'] = 'running'): TaskMessage {
+  return {
+    type: 'task',
+    ...base,
+    timestamp: ts(),
+    task_id: id,
+    kind: 'shell',
+    status,
+    detached: false,
+    output_tail: '',
+  };
+}
+
+function undoMsg(systemId: string, removedIds: readonly string[]): SystemMessage {
+  return systemMsg('undo', systemId, { removed_ids: [...removedIds] });
+}
+
+function entryKeys(entries: readonly TimelineEntry[]): string[] {
+  return entries.map((entry) => entry.key);
+}
+
+function makeStore(): ChatStore {
+  return new ChatStore({ notifyIntervalMs: 0 });
+}
+
+function okEnvelope(data: unknown) {
+  return { code: 0, msg: 'success', data, request_id: 'r1' };
+}
+
+function fakeFetch(envelope: unknown) {
+  const calls: { url: string; init?: RequestInit }[] = [];
+  const fetchImpl = (async (url: string | URL, init?: RequestInit) => {
+    calls.push({ url: String(url), init });
+    return { json: async () => envelope };
+  }) as unknown as typeof fetch;
+  return { calls, fetchImpl };
+}
+
+class FakeWs implements WsLike {
+  static OPEN = 1;
+  static instances: FakeWs[] = [];
+  readyState = 1;
+  readonly sent: string[] = [];
+  private readonly listeners = new Map<string, ((event: never) => void)[]>();
+
+  constructor(
+    readonly url: string,
+    readonly protocols?: string | string[],
+  ) {
+    FakeWs.instances.push(this);
+  }
+
+  static reset(): void {
+    FakeWs.instances = [];
+  }
+
+  send(data: string): void {
+    this.sent.push(data);
+  }
+
+  close(): void {
+    this.emit('close');
+  }
+
+  addEventListener(type: string, listener: (event: never) => void): void {
+    const list = this.listeners.get(type) ?? [];
+    list.push(listener);
+    this.listeners.set(type, list);
+  }
+
+  emit(type: string, event?: unknown): void {
+    for (const listener of this.listeners.get(type) ?? []) listener(event as never);
+  }
+
+  open(): void {
+    this.emit('open');
+  }
+
+  serverFrame(frame: unknown): void {
+    this.emit('message', { data: JSON.stringify(frame) });
+  }
+
+  sentFrames(): Record<string, unknown>[] {
+    return this.sent.map((data) => JSON.parse(data) as Record<string, unknown>);
+  }
+
+  hello(): void {
+    this.serverFrame({
+      type: 'hello',
+      protocol_version: '3',
+      server_id: 'srv',
+      capabilities: ['step_replay_v1'],
+    });
+  }
+}
+
+function makeWs(handlers: Partial<ConstructorParameters<typeof ChatWs>[0]['handlers']> = {}) {
+  const seen = {
+    messages: [] as ServerMessage[],
+    acks: [] as { code: number; msg?: string }[],
+    protocolErrors: [] as { code: number; msg: string }[],
+    invalid: 0,
+    reconnects: 0,
+  };
+  const ws = new ChatWs({
+    url: 'http://h:1',
+    token: 'tok',
+    sessionId: 's1',
+    agentIds: ['main'],
+    WebSocketImpl: FakeWs,
+    reconnectDelayMs: 1,
+    handlers: {
+      onMessage: (message) => {
+        seen.messages.push(message);
+        handlers.onMessage?.(message);
+      },
+      onAck: (code, msg) => {
+        seen.acks.push({ code, msg });
+        handlers.onAck?.(code, msg);
+      },
+      onProtocolError: (code, msg) => {
+        seen.protocolErrors.push({ code, msg });
+        handlers.onProtocolError?.(code, msg);
+      },
+      onInvalidFrame: () => {
+        seen.invalid += 1;
+        handlers.onInvalidFrame?.(null);
+      },
+      onReconnectScheduled: () => {
+        seen.reconnects += 1;
+        handlers.onReconnectScheduled?.(0);
+      },
+    },
+  });
+  return { ws, seen };
+}
+
+// ---------------------------------------------------------------- api
+
+describe('fetchHistoryPage', () => {
+  const pageData = {
+    messages: [turnMsg(1)],
+    has_more: false,
+    in_flight: { turn_id: 't1', step_id: 't1.2' },
+  };
+
+  it('requests the endpoint with cursor params and bearer auth, unwraps the envelope', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope(pageData));
+    const page = await fetchHistoryPage({
+      baseUrl: 'http://h:1',
+      token: 'tok',
+      sessionId: 's 1',
+      agentId: 'main',
+      beforeTurn: 't5',
+      pageSize: 50,
+      fetchImpl,
+    });
+    expect(calls).toHaveLength(1);
+    expect(calls[0]!.url).toContain('/api/v1/sessions/s%201/history?');
+    expect(calls[0]!.url).toContain('agent_id=main');
+    expect(calls[0]!.url).toContain('before_turn=t5');
+    expect(calls[0]!.url).toContain('page_size=50');
+    expect(calls[0]!.init?.headers).toEqual({ authorization: 'Bearer tok' });
+    expect(page.messages).toHaveLength(1);
+    expect(page.inFlight).toEqual({ turn_id: 't1', step_id: 't1.2' });
+  });
+
+  it('sends after_step and omits unset cursors', async () => {
+    const { calls, fetchImpl } = fakeFetch(okEnvelope({ messages: [], has_more: false }));
+    await fetchHistoryPage({
+      baseUrl: 'http://h:1',
+      sessionId: 's1',
+      agentId: 'main',
+      afterStep: 't1.3',
+      fetchImpl,
+    });
+    expect(calls[0]!.url).toContain('after_step=t1.3');
+    expect(calls[0]!.url).not.toContain('before_turn');
+    expect(calls[0]!.init?.headers).toEqual({});
+  });
+
+  it('throws on a non-zero envelope code', async () => {
+    const { fetchImpl } = fakeFetch({ code: 40401, msg: 'session not found', data: null });
+    await expect(
+      fetchHistoryPage({ baseUrl: 'http://h:1', sessionId: 's9', agentId: 'main', fetchImpl }),
+    ).rejects.toThrow('session not found');
+  });
+
+  it('throws when the payload fails schema validation', async () => {
+    const { fetchImpl } = fakeFetch(okEnvelope({ messages: 'nope' }));
+    await expect(
+      fetchHistoryPage({ baseUrl: 'http://h:1', sessionId: 's1', agentId: 'main', fetchImpl }),
+    ).rejects.toThrow('unexpected response shape');
+  });
+
+  it('fetchFullHistory pages before_turn to the beginning and returns timeline order', async () => {
+    const pages: Record<string, unknown> = {
+      newest: okEnvelope({ messages: [turnMsg(3), stepMsg('t3.1')], has_more: true }),
+      't3': okEnvelope({ messages: [turnMsg(1), turnMsg(2)], has_more: false }),
+    };
+    const calls: string[] = [];
+    const fetchImpl = (async (url: string | URL) => {
+      const text = String(url);
+      calls.push(text);
+      const before = /before_turn=([^&]+)/.exec(text)?.[1];
+      const envelope = before === undefined ? pages['newest'] : (pages[before] ?? okEnvelope({ messages: [], has_more: false }));
+      return { json: async () => envelope };
+    }) as unknown as typeof fetch;
+    const messages = await fetchFullHistory({
+      baseUrl: 'http://h:1',
+      sessionId: 's1',
+      agentId: 'main',
+      pageSize: 2,
+      fetchImpl,
+    });
+    expect(calls).toHaveLength(3);
+    expect(calls[1]).toContain('before_turn=t3');
+    expect(calls[2]).toContain('before_turn=t1');
+    expect(messages.map((m) => ('turn_id' in m ? m.turn_id : ''))).toEqual(['t1', 't2', 't3', 't3']);
+  });
+});
+
+// ---------------------------------------------------------------- ws
+
+describe('ChatWs', () => {
+  it('connects with the bearer subprotocol and subscribes after the server hello', () => {
+    FakeWs.reset();
+    makeWs();
+    const sock = FakeWs.instances[0]!;
+    expect(sock.url).toBe('ws://h:1/api/v3/ws');
+    expect(sock.protocols).toEqual(['kimi-code.bearer.tok']);
+    sock.open();
+    expect(sock.sent).toHaveLength(0);
+    sock.hello();
+    expect(sock.sentFrames()[0]).toEqual({
+      type: 'subscribe',
+      id: 1,
+      session_id: 's1',
+      agent_ids: ['main'],
+    });
+  });
+
+  it('fires onAck on the subscribe ack and forwards entity messages', () => {
+    FakeWs.reset();
+    const { seen } = makeWs();
+    const sock = FakeWs.instances[0]!;
+    sock.open();
+    sock.hello();
+    sock.serverFrame({ type: 'ack', id: 1, code: 0 });
+    expect(seen.acks).toEqual([{ code: 0 }]);
+    sock.serverFrame(turnMsg(1, 'running'));
+    sock.serverFrame({
+      type: 'session.state',
+      session_id: 's1',
+      timestamp: ts(),
+      status: 'idle',
+    });
+    expect(seen.messages.map((m) => m.type)).toEqual(['turn', 'session.state']);
+  });
+
+  it('surfaces protocol error frames and ignores acks for other ids', () => {
+    FakeWs.reset();
+    const { seen } = makeWs();
+    const sock = FakeWs.instances[0]!;
+    sock.open();
+    sock.hello();
+    sock.serverFrame({ type: 'ack', id: 99, code: 0 });
+    expect(seen.acks).toHaveLength(0);
+    sock.serverFrame({ type: 'error', code: 1008, msg: 'slow consumer' });
+    expect(seen.protocolErrors).toEqual([{ code: 1008, msg: 'slow consumer' }]);
+  });
+
+  it('ignores unknown future message types but reports malformed known ones', () => {
+    FakeWs.reset();
+    const { seen } = makeWs();
+    const sock = FakeWs.instances[0]!;
+    sock.open();
+    sock.hello();
+    sock.serverFrame({ type: 'turn.supercharged', whatever: true });
+    sock.serverFrame({ type: 'turn', turn_id: 42 });
+    expect(seen.messages).toHaveLength(0);
+    expect(seen.invalid).toBe(1);
+  });
+
+  it('re-subscribes after a drop and fires onAck per subscribe', async () => {
+    FakeWs.reset();
+    const { seen } = makeWs();
+    const first = FakeWs.instances[0]!;
+    first.open();
+    first.hello();
+    first.serverFrame({ type: 'ack', id: 1, code: 0 });
+    expect(seen.acks).toHaveLength(1);
+    first.emit('close');
+    await vi.waitFor(() => {
+      expect(FakeWs.instances.length).toBeGreaterThan(1);
+    });
+    const second = FakeWs.instances[1]!;
+    second.open();
+    second.hello();
+    expect(second.sentFrames()[0]).toMatchObject({ type: 'subscribe', id: 2 });
+    second.serverFrame({ type: 'ack', id: 2, code: 0 });
+    expect(seen.acks).toHaveLength(2);
+  });
+
+  it('stays closed after close()', () => {
+    FakeWs.reset();
+    const { ws } = makeWs();
+    FakeWs.instances[0]!.open();
+    ws.close();
+    expect(FakeWs.instances).toHaveLength(1);
+  });
+});
+
+// ---------------------------------------------------------------- store
+
+describe('ChatStore', () => {
+  it('upserts entities by (type, id) and replaces in place', () => {
+    const store = makeStore();
+    store.applyLive(turnMsg(1, 'running'));
+    store.applyLive(stepMsg('t1.1', 'running'));
+    store.applyLive(turnMsg(1, 'completed'));
+    const state = store.getState();
+    expect(entryKeys(state.entries)).toEqual(['turn:t1', 'step:t1.1']);
+    const turn = state.entries[0]!.message as TurnMessage;
+    expect(turn.status).toBe('completed');
+  });
+
+  it('skips an upsert whose timestamp is older than the held entity', () => {
+    const store = makeStore();
+    store.applyLive(assistantMsg('t1.1', 'hello world', 'streaming', Date.parse('2026-01-01T00:00:10.000Z')));
+    store.applyLive(assistantMsg('t1.1', 'hel', 'streaming', Date.parse('2026-01-01T00:00:05.000Z')));
+    const held = store.getState().entries[0]!.message as AssistantMessage;
+    expect(held.text).toBe('hello world');
+  });
+
+  it('appends deltas to the held entity and drops orphan deltas', () => {
+    const store = makeStore();
+    store.applyLive({
+      type: 'assistant.delta',
+      ...base,
+      timestamp: ts(),
+      message_id: 't1.1.a0',
+      text: 'orphan',
+    });
+    expect(store.getState().entries).toHaveLength(0);
+    store.applyLive(assistantMsg('t1.1', '', 'streaming'));
+    store.applyLive({
+      type: 'assistant.delta',
+      ...base,
+      timestamp: ts(),
+      message_id: 't1.1.a0',
+      text: 'hel',
+    });
+    store.applyLive({
+      type: 'assistant.delta',
+      ...base,
+      timestamp: ts(),
+      message_id: 't1.1.a0',
+      text: 'lo',
+    });
+    const held = store.getState().entries[0]!.message as AssistantMessage;
+    expect(held.text).toBe('hello');
+  });
+
+  it('treats an entity arrival after deltas as the authoritative whole', () => {
+    const store = makeStore();
+    store.applyLive(assistantMsg('t1.1', '', 'streaming'));
+    store.applyLive({
+      type: 'assistant.delta',
+      ...base,
+      timestamp: ts(),
+      message_id: 't1.1.a0',
+      text: 'partial',
+    });
+    store.applyLive(assistantMsg('t1.1', 'partial but authoritative', 'completed'));
+    const held = store.getState().entries[0]!.message as AssistantMessage;
+    expect(held.text).toBe('partial but authoritative');
+    expect(held.status).toBe('completed');
+  });
+
+  it('appends tool_call deltas to input_text and patches tool.progress', () => {
+    const store = makeStore();
+    store.applyLive(toolCallMsg('t1.1', 'call_1', { input_text: '' }));
+    store.applyLive({
+      type: 'tool_call.delta',
+      ...base,
+      timestamp: ts(),
+      tool_call_id: 'call_1',
+      input_text: '{"command"',
+    });
+    store.applyLive({
+      type: 'tool_call.delta',
+      ...base,
+      timestamp: ts(),
+      tool_call_id: 'call_1',
+      input_text: ':"ls"}',
+    });
+    store.applyLive({
+      type: 'tool.progress',
+      ...base,
+      timestamp: ts(),
+      tool_call_id: 'call_1',
+      progress: { kind: 'stdout', text: 'file.txt' },
+    });
+    const held = store.getState().entries[0]!.message as ToolCallMessage;
+    expect(held.input_text).toBe('{"command":"ls"}');
+    expect(held.progress).toEqual({ kind: 'stdout', text: 'file.txt' });
+  });
+
+  it('truncates the removed turn subtree on system(undo) and keeps the marker', () => {
+    const store = makeStore();
+    store.applyLive(turnMsg(1));
+    store.applyLive(stepMsg('t1.1'));
+    store.applyLive(assistantMsg('t1.1', 'first'));
+    store.applyLive(turnMsg(2));
+    store.applyLive(stepMsg('t2.1'));
+    store.applyLive(toolCallMsg('t2.1', 'call_1'));
+    store.applyLive(undoMsg('sys-undo-1', ['t2']));
+    const state = store.getState();
+    expect(entryKeys(state.entries)).toEqual([
+      'turn:t1',
+      'step:t1.1',
+      'assistant:t1.1.a0',
+      'system:sys-undo-1',
+    ]);
+  });
+
+  it('cascades undo to interactions anchored at removed tool calls', () => {
+    const store = makeStore();
+    store.applyLive(turnMsg(1));
+    store.applyLive(toolCallMsg('t1.1', 'call_1'));
+    store.applyLive(interactionMsg('ix-1', 'call_1'));
+    store.applyLive(interactionMsg('ix-2', 'call_other'));
+    store.applyLive(undoMsg('sys-undo-1', ['t1']));
+    expect([...store.getState().interactions.keys()]).toEqual(['ix-2']);
+  });
+
+  it('empties the timeline on system(clear)', () => {
+    const store = makeStore();
+    store.applyLive(turnMsg(1));
+    store.applyLive(stepMsg('t1.1'));
+    store.applyLive(assistantMsg('t1.1', 'gone'));
+    store.applyLive(systemMsg('clear', 'sys-clear-1', { removed_ids: ['t1', 't1.1', 't1.1.a0'] }));
+    expect(entryKeys(store.getState().entries)).toEqual(['system:sys-clear-1']);
+  });
+
+  it('upserts state entities into their own maps and ignores global messages', () => {
+    const store = makeStore();
+    store.applyLive(interactionMsg('ix-1', 'call_1'));
+    store.applyLive(taskMsg('task-1'));
+    store.applyLive({
+      type: 'todo',
+      ...base,
+      timestamp: ts(),
+      todo_id: 'todo',
+      items: [{ title: 'x', status: 'pending' }],
+    });
+    store.applyLive({
+      type: 'session.state',
+      session_id: 's1',
+      timestamp: ts(),
+      status: 'running',
+    });
+    store.applyLive({
+      type: 'workspace',
+      timestamp: ts(),
+      subtype: 'updated',
+      workspace: {
+        id: 'wd_test_0123456789ab',
+        root: '/tmp',
+        name: 'tmp',
+        created_at: new Date(ts()).toISOString(),
+        last_opened_at: new Date(ts()).toISOString(),
+        session_count: 1,
+      },
+    });
+    const state = store.getState();
+    expect(state.interactions.get('ix-1')?.status).toBe('pending');
+    expect(state.tasks.get('task-1')?.kind).toBe('shell');
+    expect(state.todos.get('todo')?.items).toHaveLength(1);
+    expect(state.sessionState?.status).toBe('running');
+    expect(state.entries).toHaveLength(0);
+  });
+
+  it('replace installs the page as the window and keeps entries newer than the page', () => {
+    const store = makeStore();
+    store.applyLive(turnMsg(9, 'running', Date.parse('2026-01-01T00:00:09.000Z')));
+    store.applyLive(turnMsg(1, 'completed', Date.parse('2026-01-01T00:00:01.000Z')));
+    store.applyHistoryPage(
+      [turnMsg(1, 'completed', Date.parse('2026-01-01T00:00:01.500Z')), stepMsg('t1.1', 'completed', Date.parse('2026-01-01T00:00:02.000Z'))],
+      'replace',
+    );
+    expect(entryKeys(store.getState().entries)).toEqual(['turn:t1', 'step:t1.1', 'turn:t9']);
+  });
+
+  it('prepend inserts older pages ahead of the window and dedupes by key', () => {
+    const store = makeStore();
+    store.applyHistoryPage([turnMsg(3)], 'replace');
+    store.applyHistoryPage([turnMsg(1), turnMsg(2), turnMsg(3)], 'prepend');
+    expect(entryKeys(store.getState().entries)).toEqual(['turn:t1', 'turn:t2', 'turn:t3']);
+  });
+
+  it('tail upserts the catch-up slice in page order', () => {
+    const store = makeStore();
+    store.applyHistoryPage([turnMsg(1), stepMsg('t1.1')], 'replace');
+    store.applyHistoryPage(
+      [assistantMsg('t1.1', 'tail'), turnMsg(2), stepMsg('t2.1', 'running')],
+      'tail',
+    );
+    expect(entryKeys(store.getState().entries)).toEqual([
+      'turn:t1',
+      'step:t1.1',
+      'assistant:t1.1.a0',
+      'turn:t2',
+      'step:t2.1',
+    ]);
+  });
+
+  it('applies a system(undo) inside a history page like a live one', () => {
+    const store = makeStore();
+    store.applyLive(turnMsg(1));
+    store.applyLive(turnMsg(2));
+    store.applyHistoryPage([undoMsg('sys-undo-1', ['t2'])], 'tail');
+    expect(entryKeys(store.getState().entries)).toEqual(['turn:t1', 'system:sys-undo-1']);
+  });
+});
+
+// ---------------------------------------------------------------- helpers
+
+describe('recoverLoadedWindow', () => {
+  const pageOf = (items: HistoryMessage[], hasMore: boolean): HistoryMessage[] => items;
+
+  it('pages backwards until the previous oldest turn is re-covered', async () => {
+    const store = makeStore();
+    store.applyHistoryPage([turnMsg(4), turnMsg(5), turnMsg(6)], 'replace');
+    store.setHasMoreOlder(true);
+    const fetched: string[] = [];
+    await recoverLoadedWindow(
+      store,
+      't2',
+      async (beforeTurn) => {
+        fetched.push(beforeTurn);
+        store.setHasMoreOlder(beforeTurn !== 't2');
+        return beforeTurn === 't4' ? [turnMsg(2), turnMsg(3)] : [];
+      },
+      () => false,
+    );
+    expect(fetched).toEqual(['t4']);
+    expect(oldestTurnId(store.getState().entries)).toBe('t2');
+    expect(newestTerminalStepId(store.getState().entries)).toBeUndefined();
+  });
+
+  it('stops when there is no older history left, even if the anchor is gone', async () => {
+    const store = makeStore();
+    store.applyHistoryPage([turnMsg(5)], 'replace');
+    store.setHasMoreOlder(true);
+    const fetched: string[] = [];
+    await recoverLoadedWindow(
+      store,
+      't1',
+      async (beforeTurn) => {
+        fetched.push(beforeTurn);
+        store.setHasMoreOlder(false);
+        return pageOf([], false);
+      },
+      () => false,
+    );
+    expect(fetched).toEqual(['t5']);
+  });
+});
+
+describe('ChatChannel', () => {
+  function scriptedFetch(script: { noCursor: unknown[]; afterStep?: Record<string, readonly unknown[]> }) {
+    const calls: string[] = [];
+    let noCursorIndex = 0;
+    const fetchImpl = (async (url: string | URL) => {
+      const text = String(url);
+      calls.push(text);
+      const after = /after_step=([^&]+)/.exec(text)?.[1];
+      let envelope: unknown;
+      if (after !== undefined) {
+        envelope = okEnvelope({ messages: [...(script.afterStep?.[after] ?? [])], has_more: false });
+      } else {
+        envelope = script.noCursor[Math.min(noCursorIndex, script.noCursor.length - 1)];
+        noCursorIndex += 1;
+      }
+      return { json: async () => envelope };
+    }) as unknown as typeof fetch;
+    return { calls, fetchImpl };
+  }
+
+  function makeChannel(fetchImpl: typeof fetch): { channel: ChatChannel; sock: FakeWs } {
+    FakeWs.reset();
+    const channel = new ChatChannel({
+      baseUrl: 'http://h:1',
+      token: 'tok',
+      sessionId: 's1',
+      agentId: 'main',
+      pageSize: 50,
+      WebSocketImpl: FakeWs,
+      fetchImpl,
+      notifyIntervalMs: 0,
+    });
+    return { channel, sock: FakeWs.instances[0]! };
+  }
+
+  it('serializes the initial refresh with the ack catch-up behind one queue', async () => {
+    const newest = okEnvelope({ messages: [turnMsg(1), stepMsg('t1.1')], has_more: false });
+    const { calls, fetchImpl } = scriptedFetch({ noCursor: [newest] });
+    let releaseFirst: () => void = () => {};
+    const gate = new Promise<void>((resolve) => {
+      releaseFirst = resolve;
+    });
+    let first = true;
+    const gatedFetch = (async (url: string | URL, init?: RequestInit) => {
+      if (first) {
+        first = false;
+        await gate;
+      }
+      return fetchImpl(url, init);
+    }) as unknown as typeof fetch;
+    const { channel, sock } = makeChannel(gatedFetch);
+    channel.start();
+    sock.open();
+    sock.hello();
+    sock.serverFrame({ type: 'ack', id: 1, code: 0 });
+    releaseFirst();
+    await vi.waitFor(() => {
+      expect(calls).toHaveLength(3);
+    });
+    const restEntries = channel.trail.getEntries().filter((e) => e.kind === 'rest');
+    expect(restEntries.filter((e) => e.mode === 'replace')).toHaveLength(1);
+    expect(channel.trail.getEntries().some((e) => e.kind === 'event' && e.event === 'catchup-refresh')).toBe(false);
+    expect(calls.filter((url) => !url.includes('after_step='))).toHaveLength(2);
+    expect(calls[1]).toContain('after_step=t1.1');
+    expect(newestTerminalStepId(channel.store.getState().entries)).toBe('t1.1');
+    channel.close();
+  });
+
+  it('probes the newest page for the anchor step or turn before falling back to a refresh', async () => {
+    const first = okEnvelope({ messages: [turnMsg(1), stepMsg('t1.1')], has_more: false });
+    const probeWithTurn = okEnvelope({ messages: [systemMsg('notice', 'sys_n1'), turnMsg(1)], has_more: false });
+    const alive = scriptedFetch({ noCursor: [first, probeWithTurn] });
+    const aliveChannel = makeChannel(alive.fetchImpl);
+    aliveChannel.channel.start();
+    aliveChannel.sock.open();
+    aliveChannel.sock.hello();
+    aliveChannel.sock.serverFrame({ type: 'ack', id: 1, code: 0 });
+    await vi.waitFor(() => {
+      expect(aliveChannel.channel.store.getState().entries.length).toBeGreaterThan(0);
+    });
+    await vi.waitFor(() => {
+      expect(alive.calls).toHaveLength(3);
+    });
+    expect(
+      aliveChannel.channel.trail.getEntries().some((e) => e.kind === 'event' && e.event === 'catchup-refresh'),
+    ).toBe(false);
+    expect(aliveChannel.channel.trail.getEntries().filter((e) => e.kind === 'rest' && e.mode === 'replace')).toHaveLength(1);
+    aliveChannel.channel.close();
+
+    const movedOn = okEnvelope({ messages: [turnMsg(2), stepMsg('t2.1')], has_more: false });
+    const gone = scriptedFetch({ noCursor: [first, movedOn] });
+    const goneChannel = makeChannel(gone.fetchImpl);
+    goneChannel.channel.start();
+    goneChannel.sock.open();
+    goneChannel.sock.hello();
+    goneChannel.sock.serverFrame({ type: 'ack', id: 1, code: 0 });
+    await vi.waitFor(() => {
+      expect(
+        goneChannel.channel.trail.getEntries().some((e) => e.kind === 'event' && e.event === 'catchup-refresh'),
+      ).toBe(true);
+    });
+    await vi.waitFor(() => {
+      expect(newestTerminalStepId(goneChannel.channel.store.getState().entries)).toBe('t2.1');
+    });
+    goneChannel.channel.close();
+  });
+});
+
+// ---------------------------------------------------------------- plan
+
+describe('projectPlans', () => {
+  const planCall = (id: string, overrides: Partial<ToolCallMessage> = {}): ToolCallMessage =>
+    toolCallMsg('t1.1', id, { name: 'ExitPlanMode', status: 'done', ...overrides });
+
+  it('derives plan content and review from the linked approval interaction', () => {
+    const messages: HistoryMessage[] = [
+      turnMsg(1),
+      planCall('call_plan', { approval_id: 'ix-1' }),
+      {
+        type: 'interaction',
+        ...base,
+        timestamp: ts(),
+        interaction_id: 'ix-1',
+        kind: 'approval',
+        status: 'approved',
+        tool_call_id: 'call_plan',
+        request: {
+          tool_name: 'ExitPlanMode',
+          action: 'review',
+          tool_input_display: {
+            kind: 'plan_review',
+            plan: '# The Plan\n\nDo the thing.',
+            path: '/tmp/plans/foo.md',
+            options: [{ label: 'Approach A', description: 'fast' }],
+          },
+        },
+        response: { decision: 'approved', selected_label: 'Approach A', feedback: 'looks good' },
+      },
+    ];
+    const plans = projectPlans(messages);
+    expect(plans).toEqual([
+      {
+        toolCallId: 'call_plan',
+        turnId: 't1',
+        source: 'interaction',
+        plan: '# The Plan\n\nDo the thing.',
+        path: '/tmp/plans/foo.md',
+        options: [{ label: 'Approach A', description: 'fast' }],
+        review: { state: 'approved', selectedOption: 'Approach A', feedback: 'looks good' },
+      },
+    ]);
+  });
+
+  it('falls back to the tool call display, then to the output body', () => {
+    const fromDisplay = projectPlans([
+      planCall('call_display', {
+        display: { kind: 'plan_review', plan: '# Draft', path: '/tmp/draft.md' },
+      }),
+    ]);
+    expect(fromDisplay[0]).toMatchObject({ source: 'display', plan: '# Draft', path: '/tmp/draft.md' });
+    const fromOutput = projectPlans([
+      planCall('call_output', {
+        output: 'Plan saved to: /tmp/out.md\n## Approved Plan:\n# Final',
+      }),
+    ]);
+    expect(fromOutput[0]).toMatchObject({ source: 'output', plan: '# Final', path: '/tmp/out.md' });
+  });
+
+  it('filters by tool_call_id and ignores non-ExitPlanMode calls', () => {
+    const messages: HistoryMessage[] = [
+      planCall('call_a', { display: { kind: 'plan_review', plan: '# A' } }),
+      toolCallMsg('t1.1', 'call_bash', { name: 'Bash', status: 'done' }),
+      planCall('call_b', { display: { kind: 'plan_review', plan: '# B' } }),
+    ];
+    expect(projectPlans(messages, 'call_b').map((p) => p.toolCallId)).toEqual(['call_b']);
+    expect(projectPlans(messages).map((p) => p.toolCallId)).toEqual(['call_a', 'call_b']);
+  });
+});
diff --git a/apps/kimi-inspect/src/transcript/ws.ts b/apps/kimi-inspect/src/transcript/ws.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d421d40bd916455ec3da909efa09ac5a27da7a3c
--- /dev/null
+++ b/apps/kimi-inspect/src/transcript/ws.ts
@@ -0,0 +1,260 @@
+/**
+ * Minimal `/api/v3/ws` client for the message protocol.
+ *
+ * Handshake per the protocol contract: the server sends `hello` right after
+ * the upgrade, the client answers with `subscribe` (`{id, session_id,
+ * agent_ids?, omit?}`), the server replies with `ack` (matched by `id`) and
+ * then streams the recovery payload followed by live traffic — one ordered
+ * session sequence, no cursors anywhere. Heartbeat is the WS protocol-level
+ * ping/pong, handled by the WebSocket implementation itself.
+ *
+ * Every data frame is validated against the shared
+ * `serverMessageSchema`; control frames (`hello` / `ack` / `error`) are
+ * handled here, everything else is forwarded through `onMessage`. The union
+ * is open: a frame whose `type` is not in the current schema is a future
+ * message type and is ignored silently; a frame that names a known type but
+ * fails validation is a server bug and surfaces via `onInvalidFrame`.
+ *
+ * A drop is answered with a backoff reconnect and a fresh subscribe — the
+ * recovery payload is idempotent, so the consumer's only job on `onAck` is
+ * to run its REST tail catch-up. The bearer token rides the
+ * `kimi-code.bearer.<token>` subprotocol at the upgrade (the only
+ * credential channel a browser WebSocket has).
+ */
+
+import { serverMessageSchema, type ServerMessage } from '@moonshot-ai/kap-server/protocol';
+
+import type { WsLike, WsLikeCtor } from '../channel/wsLike';
+
+const WS_BEARER_PROTOCOL_PREFIX = 'kimi-code.bearer.';
+
+const KNOWN_MESSAGE_TYPES: ReadonlySet<string> = new Set([
+  'turn',
+  'step',
+  'user',
+  'assistant',
+  'assistant.delta',
+  'thinking',
+  'thinking.delta',
+  'tool_call',
+  'tool_call.delta',
+  'tool.progress',
+  'system',
+  'interaction',
+  'task',
+  'todo',
+  'session.state',
+  'session',
+  'workspace',
+  'config',
+  'config.warning',
+  'model_catalog',
+  'plugin',
+  'capability',
+  'hello',
+  'ack',
+  'error',
+]);
+
+export interface ChatWsHandlers {
+  /** Any validated non-control server message (entity, delta, state, global). */
+  onMessage: (message: ServerMessage) => void;
+  /** The subscribe ack (code 0 = subscribed) — fires on every (re)subscribe. */
+  onAck: (code: number, msg?: string) => void;
+  /** Protocol-level `error` frame (auth failure, unknown frame, slow consumer). */
+  onProtocolError: (code: number, msg: string) => void;
+  /** A frame naming a KNOWN type failed schema validation (server bug). */
+  onInvalidFrame?: (raw: unknown) => void;
+  /** The socket dropped and a reconnect attempt is scheduled. */
+  onReconnectScheduled?: (attempt: number) => void;
+}
+
+export interface ChatWsOptions {
+  /** Server base URL (`http(s)://host:port`) or a full `ws(s)://…/api/v3/ws` URL. */
+  readonly url: string;
+  readonly token?: string;
+  readonly sessionId: string;
+  /** Agents to subscribe; defaults to all agents of the session when empty. */
+  readonly agentIds?: readonly string[];
+  /** Message types to exclude from the subscription (exact `type` names). */
+  readonly omit?: readonly string[];
+  readonly handlers: ChatWsHandlers;
+  /** WebSocket implementation; defaults to the global `WebSocket`. */
+  readonly WebSocketImpl?: WsLikeCtor;
+  /** Base delay (ms) for the reconnect backoff. Default `500`. */
+  readonly reconnectDelayMs?: number;
+}
+
+export class ChatWs {
+  private readonly wsUrl: string;
+  private readonly token?: string;
+  private readonly sessionId: string;
+  private readonly agentIds?: readonly string[];
+  private readonly omit?: readonly string[];
+  private readonly handlers: ChatWsHandlers;
+  private readonly WsCtor: WsLikeCtor;
+  private readonly reconnectDelayMs: number;
+
+  private ws: WsLike | undefined;
+  private manualClose = false;
+  private reconnectAttempt = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+  private subscribeId = 0;
+
+  constructor(opts: ChatWsOptions) {
+    this.wsUrl = toWsV3Url(opts.url);
+    this.token = opts.token;
+    this.sessionId = opts.sessionId;
+    this.agentIds = opts.agentIds;
+    this.omit = opts.omit;
+    this.handlers = opts.handlers;
+    const ctor = opts.WebSocketImpl ?? (globalThis.WebSocket as unknown as WsLikeCtor | undefined);
+    if (ctor === undefined) {
+      throw new Error('no WebSocket implementation available; pass WebSocketImpl');
+    }
+    this.WsCtor = ctor;
+    this.reconnectDelayMs = opts.reconnectDelayMs ?? 500;
+    this.connect();
+  }
+
+  /** Tear the socket down permanently. */
+  close(): void {
+    this.manualClose = true;
+    if (this.reconnectTimer !== undefined) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = undefined;
+    }
+    const ws = this.ws;
+    this.ws = undefined;
+    ws?.close();
+  }
+
+  /** Force a reconnect (debug/testing): drop the socket and re-subscribe after `delayMs`. */
+  reconnect(delayMs = 0): void {
+    if (this.manualClose) return;
+    if (this.reconnectTimer !== undefined) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = undefined;
+    }
+    const ws = this.ws;
+    this.ws = undefined;
+    ws?.close();
+    this.reconnectAttempt += 1;
+    this.handlers.onReconnectScheduled?.(this.reconnectAttempt);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = undefined;
+      this.connect();
+    }, delayMs);
+    this.reconnectTimer.unref?.();
+  }
+
+  private connect(): void {
+    const protocols =
+      this.token !== undefined && this.token.length > 0
+        ? [`${WS_BEARER_PROTOCOL_PREFIX}${this.token}`]
+        : undefined;
+    let ws: WsLike;
+    try {
+      ws = new this.WsCtor(this.wsUrl, protocols);
+    } catch {
+      this.scheduleReconnect();
+      return;
+    }
+    this.ws = ws;
+    ws.addEventListener('open', () => {
+      this.reconnectAttempt = 0;
+    });
+    ws.addEventListener('message', (event: { data: unknown }) => {
+      this.onMessage(event.data);
+    });
+    ws.addEventListener('close', () => {
+      if (this.ws !== ws) return;
+      this.ws = undefined;
+      if (!this.manualClose) this.scheduleReconnect();
+    });
+    ws.addEventListener('error', () => {});
+  }
+
+  private onMessage(raw: unknown): void {
+    let frame: unknown;
+    try {
+      frame = JSON.parse(typeof raw === 'string' ? raw : String(raw));
+    } catch {
+      this.handlers.onInvalidFrame?.(raw);
+      return;
+    }
+    const parsed = serverMessageSchema.safeParse(frame);
+    if (!parsed.success) {
+      const type = (frame as { readonly type?: unknown } | null)?.type;
+      if (typeof type !== 'string' || KNOWN_MESSAGE_TYPES.has(type)) {
+        this.handlers.onInvalidFrame?.(frame);
+      }
+      return;
+    }
+    const message = parsed.data;
+    switch (message.type) {
+      case 'hello': {
+        this.subscribeId += 1;
+        this.send({
+          type: 'subscribe',
+          id: this.subscribeId,
+          session_id: this.sessionId,
+          agent_ids: this.agentIds !== undefined && this.agentIds.length > 0 ? [...this.agentIds] : undefined,
+          omit: this.omit !== undefined && this.omit.length > 0 ? [...this.omit] : undefined,
+        });
+        return;
+      }
+      case 'ack': {
+        if (message.id === this.subscribeId) {
+          this.handlers.onAck(message.code, message.msg);
+        }
+        return;
+      }
+      case 'error': {
+        this.handlers.onProtocolError(message.code, message.msg);
+        return;
+      }
+      default: {
+        this.handlers.onMessage(message);
+        return;
+      }
+    }
+  }
+
+  private scheduleReconnect(): void {
+    if (this.manualClose) return;
+    this.reconnectAttempt += 1;
+    this.handlers.onReconnectScheduled?.(this.reconnectAttempt);
+    const delay = Math.min(this.reconnectDelayMs * 2 ** (this.reconnectAttempt - 1), 10_000);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = undefined;
+      this.connect();
+    }, delay);
+    this.reconnectTimer.unref?.();
+  }
+
+  private send(frame: Record<string, unknown>): void {
+    const ws = this.ws;
+    if (ws === undefined || ws.readyState !== this.WsCtor.OPEN) return;
+    try {
+      ws.send(JSON.stringify(frame));
+    } catch {
+    }
+  }
+}
+
+/** Derive the `/api/v3/ws` WebSocket URL from a server base URL (or pass a full ws URL through). */
+function toWsV3Url(base: string): string {
+  const url = new URL(base);
+  if (url.protocol === 'http:') url.protocol = 'ws:';
+  else if (url.protocol === 'https:') url.protocol = 'wss:';
+  if (url.protocol !== 'ws:' && url.protocol !== 'wss:') {
+    throw new Error(`unsupported URL scheme for WS transport: ${base}`);
+  }
+  if (!url.pathname.endsWith('/api/v3/ws')) {
+    url.pathname = `${url.pathname.replace(/\/$/, '')}/api/v3/ws`;
+  }
+  url.search = '';
+  url.hash = '';
+  return url.toString();
+}
diff --git a/apps/kimi-inspect/src/ui.tsx b/apps/kimi-inspect/src/ui.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..11204f9d31230cb0a04975b524e5299a1fcc82be
--- /dev/null
+++ b/apps/kimi-inspect/src/ui.tsx
@@ -0,0 +1,99 @@
+/**
+ * Small shared UI primitives for the inspector: JSON dump, badges, buttons,
+ * relative time. Deliberately minimal — this is an internal devtool.
+ */
+
+import { useState } from 'react';
+
+export function JsonView({ data, empty }: { data: unknown; empty?: string }) {
+  const [open, setOpen] = useState(false);
+  if (data === undefined || data === null) {
+    return <div className="text-[11px] text-neutral-600 italic">{empty ?? 'no data'}</div>;
+  }
+  const text = JSON.stringify(data, null, 2);
+  const long = text.length > 500;
+  return (
+    <pre
+      className={`cursor-text overflow-auto rounded bg-neutral-950/70 p-2 font-mono text-[11px] leading-relaxed text-neutral-300 ${
+        long && !open ? 'max-h-48' : 'max-h-[28rem]'
+      }`}
+      onClick={() => long && setOpen((v) => !v)}
+      title={long ? 'click to expand / collapse' : undefined}
+    >
+      {long && !open ? `${text.slice(0, 500)}\n… (${text.length} chars, click to expand)` : text}
+    </pre>
+  );
+}
+
+export function Badge({
+  children,
+  tone = 'neutral',
+}: {
+  children: React.ReactNode;
+  tone?: 'neutral' | 'green' | 'amber' | 'red' | 'sky' | 'violet';
+}) {
+  const tones: Record<string, string> = {
+    neutral: 'bg-neutral-800 text-neutral-300',
+    green: 'bg-emerald-900/60 text-emerald-300',
+    amber: 'bg-amber-900/60 text-amber-300',
+    red: 'bg-red-900/60 text-red-300',
+    sky: 'bg-sky-900/60 text-sky-300',
+    violet: 'bg-violet-900/60 text-violet-300',
+  };
+  return (
+    <span className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${tones[tone]}`}>
+      {children}
+    </span>
+  );
+}
+
+export function ActionButton({
+  children,
+  onClick,
+  danger,
+  disabled,
+}: {
+  children: React.ReactNode;
+  onClick: () => void | Promise<void>;
+  danger?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      className={`rounded border px-2 py-1 text-[11px] transition-colors disabled:opacity-40 ${
+        danger
+          ? 'border-red-900/70 text-red-400 hover:bg-red-950/60'
+          : 'border-neutral-700 text-neutral-300 hover:bg-neutral-800'
+      }`}
+      disabled={disabled}
+      onClick={() => {
+        void onClick();
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function relTime(epochMs: number | undefined): string {
+  if (epochMs === undefined) return '';
+  const diff = Date.now() - epochMs;
+  if (diff < 60_000) return `${Math.max(0, Math.round(diff / 1000))}s ago`;
+  if (diff < 3_600_000) return `${Math.round(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.round(diff / 3_600_000)}h ago`;
+  return new Date(epochMs).toLocaleDateString();
+}
+
+/** Render an unknown thrown value as display text (never "[object Object]"). */
+export function errorMessage(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  if (typeof error === 'string') return error;
+  if (error === null || typeof error !== 'object') return String(error);
+  return JSON.stringify(error) ?? 'unknown error';
+}
+
+export function ErrorLine({ error }: { error: unknown }) {
+  if (error === null || error === undefined) return null;
+  const msg = errorMessage(error);
+  return <div className="rounded bg-red-950/50 px-2 py-1 text-[11px] text-red-400">{msg}</div>;
+}
diff --git a/apps/kimi-inspect/vite/serverDiscovery.test.ts b/apps/kimi-inspect/vite/serverDiscovery.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab13943f22ca963dabf0dabe8af041f1bedbcf73
--- /dev/null
+++ b/apps/kimi-inspect/vite/serverDiscovery.test.ts
@@ -0,0 +1,137 @@
+/**
+ * Unit tests for the local server discovery middleware helpers
+ * (`vite/serverDiscovery.ts`): instance/lock/token file reading, pid-liveness
+ * filtering, URL normalization and dedupe. Runs in Node (mkdtemp homes).
+ */
+
+import { mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  discoverLocalServers,
+  pidAlive,
+  readLiveInstances,
+  readLiveLock,
+  readServerToken,
+  resolveKimiHomeDir,
+} from './serverDiscovery';
+
+const ALIVE_PID = process.pid;
+// Far above any realistic pid_max; must not collide with a live process.
+const DEAD_PID = 999_999_999;
+
+let home: string;
+
+beforeEach(async () => {
+  home = await mkdtemp(join(tmpdir(), 'kimi-inspect-discovery-'));
+});
+
+afterEach(async () => {
+  await rm(home, { recursive: true, force: true, maxRetries: 3, retryDelay: 25 });
+});
+
+async function writeInstance(
+  id: string,
+  disk: { pid: number; host?: string; port: number; started_at?: number; host_version?: string },
+): Promise<void> {
+  const dir = join(home, 'server', 'instances');
+  await mkdir(dir, { recursive: true });
+  await writeFile(join(dir, `${id}.json`), JSON.stringify({ server_id: id, ...disk }));
+}
+
+describe('pidAlive', () => {
+  it('probes the current process as alive and a bogus pid as dead', () => {
+    expect(pidAlive(ALIVE_PID)).toBe(true);
+    expect(pidAlive(DEAD_PID)).toBe(false);
+  });
+});
+
+describe('readLiveInstances', () => {
+  it('lists live instances sorted by started_at, dropping dead pids and bad files', async () => {
+    await writeInstance('b-older', { pid: ALIVE_PID, port: 58628, started_at: 100 });
+    await writeInstance('a-newer', { pid: ALIVE_PID, port: 58629, started_at: 200 });
+    await writeInstance('x-dead', { pid: DEAD_PID, port: 58630, started_at: 50 });
+    await mkdir(join(home, 'server', 'instances'), { recursive: true });
+    await writeFile(join(home, 'server', 'instances', 'garbage.json'), '{not json');
+
+    const instances = await readLiveInstances(home);
+    expect(instances.map((i) => i.id)).toEqual(['b-older', 'a-newer']);
+    expect(instances[0]!.url).toBe('http://127.0.0.1:58628');
+  });
+
+  it('normalizes wildcard hosts to loopback', async () => {
+    await writeInstance('wild', { pid: ALIVE_PID, host: '0.0.0.0', port: 58627, started_at: 1 });
+    const instances = await readLiveInstances(home);
+    expect(instances[0]!.url).toBe('http://127.0.0.1:58627');
+  });
+
+  it('returns [] when the instances directory does not exist', async () => {
+    await expect(readLiveInstances(home)).resolves.toEqual([]);
+  });
+});
+
+describe('readLiveLock / readServerToken', () => {
+  it('reads the legacy lock only when its pid is alive', async () => {
+    await mkdir(join(home, 'server'), { recursive: true });
+    await writeFile(
+      join(home, 'server', 'lock'),
+      JSON.stringify({ pid: ALIVE_PID, port: 58627, started_at: 42 }),
+    );
+    expect((await readLiveLock(home))?.url).toBe('http://127.0.0.1:58627');
+
+    await writeFile(join(home, 'server', 'lock'), JSON.stringify({ pid: DEAD_PID, port: 58627 }));
+    await expect(readLiveLock(home)).resolves.toBeUndefined();
+  });
+
+  it('reads the home token, undefined when missing or empty', async () => {
+    await expect(readServerToken(home)).resolves.toBeUndefined();
+    await mkdir(join(home, 'server'), { recursive: true });
+    await writeFile(join(home, 'server.token'), '  tok-123\n');
+    await expect(readServerToken(home)).resolves.toBe('tok-123');
+    await writeFile(join(home, 'server.token'), '\n');
+    await expect(readServerToken(home)).resolves.toBeUndefined();
+  });
+});
+
+describe('discoverLocalServers', () => {
+  it('merges instances + lock + proxy target, deduped by url, with the home token', async () => {
+    await writeInstance('inst', { pid: ALIVE_PID, port: 58627, started_at: 1 });
+    await mkdir(join(home, 'server'), { recursive: true });
+    // Lock points at another (also live) server on a different port.
+    await writeFile(join(home, 'server', 'lock'), JSON.stringify({ pid: ALIVE_PID, port: 59000 }));
+    await writeFile(join(home, 'server.token'), 'tok-xyz');
+
+    const payload = await discoverLocalServers({
+      homeDir: home,
+      // Proxy target collides with the instance → dedupe keeps the instance.
+      proxyTarget: 'http://127.0.0.1:58627/',
+    });
+    expect(payload.home).toBe(home);
+    expect(payload.token).toBe('tok-xyz');
+    expect(payload.servers.map((s) => [s.url, s.source])).toEqual([
+      ['http://127.0.0.1:58627', 'instance'],
+      ['http://127.0.0.1:59000', 'lock'],
+    ]);
+  });
+
+  it('keeps the proxy entry when nothing else is discovered', async () => {
+    const payload = await discoverLocalServers({
+      homeDir: home,
+      proxyTarget: 'http://127.0.0.1:58627',
+    });
+    expect(payload.servers).toEqual([
+      { id: 'proxy', url: 'http://127.0.0.1:58627', source: 'proxy' },
+    ]);
+    expect(payload.token).toBeUndefined();
+  });
+});
+
+describe('resolveKimiHomeDir', () => {
+  it('honors KIMI_CODE_HOME, else falls back to ~/.kimi-code', () => {
+    expect(resolveKimiHomeDir({ KIMI_CODE_HOME: '/tmp/kh' })).toBe('/tmp/kh');
+    expect(resolveKimiHomeDir({})).toBe(join(process.env['HOME'] ?? '', '.kimi-code'));
+  });
+});
diff --git a/apps/kimi-inspect/vite/serverDiscovery.ts b/apps/kimi-inspect/vite/serverDiscovery.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efe324c25ce11c85e4f181ef525aeca8636d5a0b
--- /dev/null
+++ b/apps/kimi-inspect/vite/serverDiscovery.ts
@@ -0,0 +1,227 @@
+/**
+ * Local kap-server discovery — a dev/preview middleware that lets the browser
+ * see and reach every kap-server running on this machine without typing a URL
+ * or a token.
+ *
+ * kap-server already self-registers for peer discovery
+ * (`packages/kap-server/src/instanceRegistry.ts`):
+ *   current builds  `<kimi home>/server/instances/<serverId>.json`
+ *   pre-registry builds  `<kimi home>/server/lock`
+ * and persists the bearer token at `<kimi home>/server.token` (one token per
+ * home, shared by every instance). The browser cannot read those files, but
+ * this Vite process can, so `GET /__inspect/servers` answers with the live
+ * instances (pid-liveness filtered), the dev-proxy target, and the token.
+ *
+ * The registry/lock file formats are deliberately reimplemented here (~100
+ * lines) instead of importing kap-server: the inspector must stay free of
+ * server-side dependencies.
+ *
+ * Security: dev/preview only, bound to loopback by Vite defaults. It hands
+ * out the same token the user would otherwise paste from
+ * `~/.kimi-code/server.token` by hand — no new exposure beyond the local dev
+ * session.
+ */
+
+import { readdir, readFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+import type { Plugin } from 'vite';
+
+export const SERVER_DISCOVERY_ENDPOINT = '/__inspect/servers';
+
+export type DiscoveredServerSource = 'instance' | 'lock' | 'proxy';
+
+export interface DiscoveredServerInfo {
+  readonly id: string;
+  readonly url: string;
+  readonly pid?: number;
+  readonly startedAt?: number;
+  readonly hostVersion?: string;
+  readonly source: DiscoveredServerSource;
+}
+
+export interface ServerDiscoveryPayload {
+  readonly home: string;
+  readonly token?: string;
+  readonly servers: readonly DiscoveredServerInfo[];
+}
+
+/** Mirror of the on-disk instance file (`server_id` …, snake_case). */
+interface ServerInstanceDisk {
+  server_id?: string;
+  pid?: number;
+  host?: string;
+  port?: number;
+  started_at?: number;
+  host_version?: string;
+}
+
+/** Mirror of the legacy single-server lock written by pre-registry builds. */
+interface ServerLockDisk {
+  pid?: number;
+  host?: string;
+  port?: number;
+  started_at?: number;
+  host_version?: string;
+}
+
+/** home resolution per request: `KIMI_CODE_HOME` env, else `~/.kimi-code`. */
+export function resolveKimiHomeDir(env: NodeJS.ProcessEnv = process.env): string {
+  const fromEnv = env['KIMI_CODE_HOME'];
+  if (fromEnv !== undefined && fromEnv.length > 0) return fromEnv;
+  return join(homedir(), '.kimi-code');
+}
+
+/** `process.kill(pid, 0)` probe — same semantics as the server's registry:
+ * ESRCH = dead, EPERM/anything else = alive (never clobber a live entry). */
+export function pidAlive(pid: number): boolean {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return (error as NodeJS.ErrnoException).code !== 'ESRCH';
+  }
+}
+
+/** Browser-reachable host: wildcard binds advertise as loopback. */
+function normalizeHost(host: string | undefined): string {
+  if (host === undefined || host === '' || host === '0.0.0.0' || host === '::' || host === '[::]') {
+    return '127.0.0.1';
+  }
+  return host;
+}
+
+function toUrl(host: string | undefined, port: number): string {
+  return `http://${normalizeHost(host)}:${port}`;
+}
+
+async function readJson<T>(filePath: string): Promise<T | undefined> {
+  try {
+    return JSON.parse(await readFile(filePath, 'utf8')) as T;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Live instances under `<home>/server/instances`, sorted by `started_at`
+ * ascending (longest-running first, matching the server's own ordering). */
+export async function readLiveInstances(homeDir: string): Promise<readonly DiscoveredServerInfo[]> {
+  const instancesDir = join(homeDir, 'server', 'instances');
+  let names: string[];
+  try {
+    names = await readdir(instancesDir);
+  } catch {
+    return [];
+  }
+  const live: { started_at: number; info: DiscoveredServerInfo }[] = [];
+  await Promise.all(
+    names
+      .filter((name) => name.endsWith('.json'))
+      .map(async (name) => {
+        const disk = await readJson<ServerInstanceDisk>(join(instancesDir, name));
+        if (
+          disk === undefined ||
+          typeof disk.server_id !== 'string' ||
+          typeof disk.pid !== 'number' ||
+          typeof disk.port !== 'number' ||
+          !pidAlive(disk.pid)
+        ) {
+          return;
+        }
+        live.push({
+          started_at: typeof disk.started_at === 'number' ? disk.started_at : 0,
+          info: {
+            id: disk.server_id,
+            url: toUrl(disk.host, disk.port),
+            pid: disk.pid,
+            startedAt: typeof disk.started_at === 'number' ? disk.started_at : undefined,
+            hostVersion: typeof disk.host_version === 'string' ? disk.host_version : undefined,
+            source: 'instance',
+          },
+        });
+      }),
+  );
+  live.sort((a, b) => a.started_at - b.started_at);
+  return live.map((entry) => entry.info);
+}
+
+/** The legacy single-server lock (`<home>/server/lock`) written by pre-registry
+ * builds, when its pid is alive. Current builds never write it. */
+export async function readLiveLock(homeDir: string): Promise<DiscoveredServerInfo | undefined> {
+  const disk = await readJson<ServerLockDisk>(join(homeDir, 'server', 'lock'));
+  if (disk === undefined || typeof disk.pid !== 'number' || typeof disk.port !== 'number') {
+    return undefined;
+  }
+  if (!pidAlive(disk.pid)) return undefined;
+  return {
+    id: 'lock',
+    url: toUrl(disk.host, disk.port),
+    pid: disk.pid,
+    startedAt: typeof disk.started_at === 'number' ? disk.started_at : undefined,
+    hostVersion: typeof disk.host_version === 'string' ? disk.host_version : undefined,
+    source: 'lock',
+  };
+}
+
+/** The home-wide bearer token (`<home>/server.token`); undefined when absent/unreadable. */
+export async function readServerToken(homeDir: string): Promise<string | undefined> {
+  try {
+    const token = (await readFile(join(homeDir, 'server.token'), 'utf8')).trim();
+    return token.length > 0 ? token : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export interface DiscoverOptions {
+  /** The dev-proxy target (`KIMI_SERVER_URL`); merged as a `proxy` entry. */
+  readonly proxyTarget?: string;
+  /** home override; defaults to the request-time env resolution. */
+  readonly homeDir?: string;
+}
+
+/** Assemble the full discovery payload: instances (oldest first) + lock +
+ * proxy target, deduped by normalized URL, plus the home token. */
+export async function discoverLocalServers(
+  options: DiscoverOptions = {},
+): Promise<ServerDiscoveryPayload> {
+  const home = options.homeDir ?? resolveKimiHomeDir();
+  const [instances, lock, token] = await Promise.all([
+    readLiveInstances(home),
+    readLiveLock(home),
+    readServerToken(home),
+  ]);
+  const byUrl = new Map<string, DiscoveredServerInfo>();
+  for (const info of instances) byUrl.set(info.url, info);
+  if (lock !== undefined && !byUrl.has(lock.url)) byUrl.set(lock.url, lock);
+  const proxyUrl = options.proxyTarget?.replace(/\/$/, '');
+  if (proxyUrl !== undefined && proxyUrl !== '' && !byUrl.has(proxyUrl)) {
+    byUrl.set(proxyUrl, { id: 'proxy', url: proxyUrl, source: 'proxy' });
+  }
+  return { home, token, servers: [...byUrl.values()] };
+}
+
+/** Vite plugin exposing `GET /__inspect/servers` on dev and preview servers. */
+export function serverDiscoveryPlugin(options: { proxyTarget: string }): Plugin {
+  const handler = (_req: unknown, res: { setHeader(name: string, value: string): void; end(data: string): void }): void => {
+    void discoverLocalServers({ proxyTarget: options.proxyTarget })
+      .then((payload) => {
+        res.setHeader('content-type', 'application/json');
+        res.end(JSON.stringify(payload));
+      })
+      .catch((error: unknown) => {
+        res.setHeader('content-type', 'application/json');
+        res.end(JSON.stringify({ error: String(error), servers: [] }));
+      });
+  };
+  return {
+    name: 'kimi-inspect-server-discovery',
+    configureServer(server) {
+      server.middlewares.use(SERVER_DISCOVERY_ENDPOINT, handler);
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use(SERVER_DISCOVERY_ENDPOINT, handler);
+    },
+  };
+}
diff --git a/apps/vis/scripts/copy-web-dist.mjs b/apps/vis/scripts/copy-web-dist.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..18978247fc125622979956d844dd50732de9e5b9
--- /dev/null
+++ b/apps/vis/scripts/copy-web-dist.mjs
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+// Copy web/dist/** into server/dist/public/ so the bundled server can serve
+// the SPA out of a single deploy artifact.
+
+import { cp, mkdir, rm, stat } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const root = join(here, '..');
+const src = join(root, 'web', 'dist');
+const dst = join(root, 'server', 'dist', 'public');
+
+try {
+  await stat(src);
+} catch {
+  process.stderr.write(`[copy-web-dist] source missing: ${src}\n`);
+  process.stderr.write('Did you run `pnpm --filter @moonshot-ai/vis-web build` first?\n');
+  process.exit(1);
+}
+
+await rm(dst, { recursive: true, force: true });
+await mkdir(dirname(dst), { recursive: true });
+await cp(src, dst, { recursive: true });
+
+process.stdout.write(`[copy-web-dist] copied ${src} -> ${dst}\n`);
diff --git a/apps/vis/scripts/dev.mjs b/apps/vis/scripts/dev.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..51abb5652dee52783bf6a977cc12c2c11131f7ea
--- /dev/null
+++ b/apps/vis/scripts/dev.mjs
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+// Wraps `concurrently` so the vis-server (API) and vite (web) each pick a
+// free port and agree on each other's, even when the defaults are taken by
+// a previous dev session or another local app.
+
+import { spawn } from 'node:child_process';
+import net from 'node:net';
+
+const DEFAULT_API_PORT = 5174;
+const DEFAULT_WEB_PORT = 5173;
+const MAX_PROBE = 50;
+
+async function isFree(port) {
+  return new Promise((resolve) => {
+    const srv = net.createServer();
+    srv.unref();
+    srv.once('error', () => {
+      resolve(false);
+    });
+    srv.once('listening', () => {
+      srv.close(() => {
+        resolve(true);
+      });
+    });
+    srv.listen({ port, host: '127.0.0.1', exclusive: true });
+  });
+}
+
+async function pickPort(startPort, exclude = new Set()) {
+  for (let port = startPort; port < startPort + MAX_PROBE; port += 1) {
+    if (exclude.has(port)) continue;
+    // eslint-disable-next-line no-await-in-loop
+    if (await isFree(port)) return port;
+  }
+  throw new Error(
+    `no free port in [${startPort}, ${startPort + MAX_PROBE}); something is hogging the range`,
+  );
+}
+
+const requestedApi = Number(process.env.PORT) || DEFAULT_API_PORT;
+const apiPort = await pickPort(requestedApi);
+if (apiPort !== requestedApi) {
+  process.stdout.write(`[vis] api port ${requestedApi} busy, using ${apiPort} instead\n`);
+}
+
+const requestedWeb = Number(process.env.WEB_PORT) || DEFAULT_WEB_PORT;
+const webPort = await pickPort(requestedWeb, new Set([apiPort]));
+if (webPort !== requestedWeb) {
+  process.stdout.write(`[vis] web port ${requestedWeb} busy, using ${webPort} instead\n`);
+}
+
+process.stdout.write(`[vis] web → http://localhost:${webPort}  (api on ${apiPort})\n`);
+
+const env = { ...process.env, PORT: String(apiPort), WEB_PORT: String(webPort) };
+const child = spawn(
+  'concurrently',
+  [
+    '-k',
+    '-n', 'server,web',
+    '-c', 'cyan,magenta',
+    'pnpm --filter @moonshot-ai/vis-server dev',
+    'pnpm --filter @moonshot-ai/vis-web dev',
+  ],
+  { stdio: 'inherit', env, shell: false },
+);
+
+child.on('exit', (code, signal) => {
+  if (signal !== null) process.kill(process.pid, signal);
+  else process.exit(code ?? 0);
+});
diff --git a/apps/vis/server/package.json b/apps/vis/server/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..6523ddd93eb4e7e34e6afa417534e3a7313ec5ba
--- /dev/null
+++ b/apps/vis/server/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@moonshot-ai/vis-server",
+  "version": "0.1.1",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "imports": {
+    "#/*": "./src/*.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./start": {
+      "types": "./src/start.ts",
+      "default": "./src/start.ts"
+    },
+    "./package.json": {
+      "types": "./package.json",
+      "default": "./package.json"
+    }
+  },
+  "scripts": {
+    "dev": "tsx watch --import ../../../build/register-raw-text-loader.mjs src/index.ts",
+    "build": "tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.7",
+    "@moonshot-ai/agent-core-v2": "workspace:^",
+    "hono": "^4.7.7",
+    "yauzl": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/yauzl": "^2.10.3",
+    "@types/yazl": "^2.4.6",
+    "tsx": "^4.21.0",
+    "vitest": "4.1.4",
+    "yazl": "^3.3.1"
+  }
+}
diff --git a/apps/vis/server/src/app.ts b/apps/vis/server/src/app.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d59ba17eb5fb12fa56fd9ab4aa473c1b0b44769
--- /dev/null
+++ b/apps/vis/server/src/app.ts
@@ -0,0 +1,170 @@
+import { timingSafeEqual } from 'node:crypto';
+import { readFile, stat } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+
+import { Hono } from 'hono';
+
+import { KIMI_CODE_HOME } from './config';
+import { serveWebAsset, type WebAsset } from './lib/web-asset';
+import { blobsRoute } from './routes/blobs';
+import { contextRoute } from './routes/context';
+import { cronRoute } from './routes/cron';
+import { importsRoute } from './routes/imports';
+import { logsRoute } from './routes/logs';
+import { sessionDetailRoute } from './routes/session-detail';
+import { sessionsRoute } from './routes/sessions';
+import { subagentsRoute } from './routes/subagents';
+import { tasksRoute } from './routes/tasks';
+import { wireRoute } from './routes/wire';
+
+/** Resolve the SPA bundle directory next to the compiled server.mjs, if it
+ * exists. Returns `null` in dev mode where the web bundle lives elsewhere. */
+async function resolvePublicDir(): Promise<string | null> {
+  try {
+    const here = import.meta.dirname;
+    const candidate = resolve(here, 'public');
+    const s = await stat(candidate);
+    if (s.isDirectory()) return candidate;
+  } catch {
+    // not present
+  }
+  return null;
+}
+
+const STATIC_EXT_MIME: Record<string, string> = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.mjs': 'application/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.map': 'application/json; charset=utf-8',
+};
+
+function mimeFor(path: string): string {
+  const i = path.lastIndexOf('.');
+  if (i < 0) return 'application/octet-stream';
+  const ext = path.slice(i).toLowerCase();
+  return STATIC_EXT_MIME[ext] ?? 'application/octet-stream';
+}
+
+export interface CreateAppOptions {
+  readonly authToken?: string;
+  readonly homeDir?: string;
+  /** When provided, serve this single-file SPA from memory and skip the
+   *  filesystem `public/` lookup. */
+  readonly webAsset?: WebAsset;
+}
+
+function bearerToken(value: string | undefined): string | null {
+  if (value === undefined) return null;
+  const match = /^Bearer\s+(.+)$/i.exec(value);
+  return match?.[1]?.trim() ?? null;
+}
+
+function tokenMatches(actual: string, expected: string): boolean {
+  const actualBytes = Buffer.from(actual);
+  const expectedBytes = Buffer.from(expected);
+  return actualBytes.length === expectedBytes.length && timingSafeEqual(actualBytes, expectedBytes);
+}
+
+/** Build a Hono app mounting /api/* routes, plus SPA static fallback. */
+export async function createApp(options: CreateAppOptions = {}): Promise<Hono> {
+  const app = new Hono();
+
+  // /api/* handlers.
+  const api = new Hono();
+  const authToken = options.authToken;
+  const home = options.homeDir ?? KIMI_CODE_HOME;
+  if (authToken !== undefined && authToken.length > 0) {
+    api.use('*', async (c, next) => {
+      const token = bearerToken(c.req.header('authorization'));
+      if (token !== null && tokenMatches(token, authToken)) {
+        await next();
+        return;
+      }
+      c.header('www-authenticate', 'Bearer realm="kimi-vis"');
+      return c.json({ error: 'unauthorized', code: 'UNAUTHORIZED' }, 401);
+    });
+  }
+  api.route('/sessions', sessionsRoute(home));
+  api.route('/sessions', sessionDetailRoute(home));
+  api.route('/sessions', wireRoute(home));
+  api.route('/sessions', subagentsRoute(home));
+  api.route('/sessions', blobsRoute(home));
+  api.route('/sessions', tasksRoute(home));
+  api.route('/sessions', cronRoute(home));
+  api.route('/sessions', logsRoute(home));
+  api.route('/imports', importsRoute(home));
+  // 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(home));
+
+  app.route('/api', api);
+
+  // Static + SPA fallback.
+  if (options.webAsset !== undefined) {
+    // Serve the embedded single-file SPA from memory for any non-/api GET.
+    const asset = options.webAsset;
+    app.get('*', (c) => {
+      const pathname = new URL(c.req.url).pathname;
+      if (pathname.startsWith('/api')) {
+        // Should have been routed above; 404 here.
+        return c.json({ error: `api route not found: ${pathname}`, code: 'NOT_FOUND' }, 404);
+      }
+      return serveWebAsset(asset);
+    });
+  } else {
+    // Filesystem static serving (production standalone only).
+    const publicDir = await resolvePublicDir();
+    if (publicDir !== null) {
+      app.get('*', async (c) => {
+        const url = new URL(c.req.url);
+        let pathname = decodeURIComponent(url.pathname);
+        if (pathname.startsWith('/api')) {
+          // Should have been routed above; 404 here.
+          return c.json({ error: `api route not found: ${pathname}`, code: 'NOT_FOUND' }, 404);
+        }
+        if (pathname === '/' || pathname === '') pathname = '/index.html';
+        const resolved = resolve(publicDir, `.${pathname}`);
+        if (!resolved.startsWith(publicDir)) {
+          return c.text('forbidden', 403);
+        }
+        try {
+          const s = await stat(resolved);
+          if (s.isFile()) {
+            const buf = await readFile(resolved);
+            const body = new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength);
+            return new Response(body, {
+              headers: { 'content-type': mimeFor(resolved) },
+            });
+          }
+        } catch {
+          // fall through to SPA fallback
+        }
+        // SPA fallback — index.html for any unknown GET so client-side
+        // React Router can resolve the route.
+        try {
+          const indexHtml = await readFile(join(publicDir, 'index.html'));
+          const body = new Uint8Array(indexHtml.buffer, indexHtml.byteOffset, indexHtml.byteLength);
+          return new Response(body, {
+            headers: { 'content-type': 'text/html; charset=utf-8' },
+          });
+        } catch {
+          return c.text('not found', 404);
+        }
+      });
+    }
+  }
+
+  return app;
+}
diff --git a/apps/vis/server/src/config.ts b/apps/vis/server/src/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0af5b9f32d318587171454343d57791d10648096
--- /dev/null
+++ b/apps/vis/server/src/config.ts
@@ -0,0 +1,63 @@
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+/** Resolve KIMI_CODE_HOME (env > ~/.kimi-code). */
+export function resolveKimiCodeHome(): string {
+  const envHome = process.env['KIMI_CODE_HOME'];
+  if (envHome !== undefined && envHome.length > 0) {
+    return envHome;
+  }
+  return join(homedir(), '.kimi-code');
+}
+
+/** HTTP port for the vis API server. */
+export function resolvePort(): number {
+  const raw = process.env['PORT'];
+  if (raw !== undefined && raw.length > 0) {
+    const n = Number.parseInt(raw, 10);
+    if (Number.isFinite(n) && n > 0 && n < 65536) {
+      return n;
+    }
+  }
+  return 3001;
+}
+
+/** HTTP host for the vis API server. Defaults to loopback. */
+export function resolveHost(): string {
+  const raw = process.env['VIS_HOST'] ?? process.env['HOST'];
+  const host = raw?.trim();
+  return host !== undefined && host.length > 0 ? host : '127.0.0.1';
+}
+
+export function isLoopbackHost(host: string): boolean {
+  const normalized = host.trim().toLowerCase().replaceAll('[', '').replaceAll(']', '');
+  return (
+    normalized === 'localhost' ||
+    normalized === '::1' ||
+    normalized === '0:0:0:0:0:0:0:1' ||
+    normalized.startsWith('127.')
+  );
+}
+
+/** Format a host for embedding in a URL authority. Bare IPv6 literals (which
+ *  contain ':') must be bracketed, e.g. `::1` → `[::1]`, otherwise
+ *  `http://::1:3001/` is an invalid URL. Already-bracketed literals, IPv4
+ *  addresses, and hostnames are returned unchanged. */
+export function hostForUrl(host: string): string {
+  if (host.includes(':') && !host.startsWith('[')) return `[${host}]`;
+  return host;
+}
+
+export function resolveVisAuthToken(host: string = resolveHost()): string | undefined {
+  const raw = process.env['VIS_AUTH_TOKEN'];
+  const token = raw?.trim();
+  if (token !== undefined && token.length > 0) return token;
+  if (!isLoopbackHost(host)) {
+    throw new Error(
+      `VIS_AUTH_TOKEN is required when binding vis-server outside loopback (host=${host})`,
+    );
+  }
+  return undefined;
+}
+
+export const KIMI_CODE_HOME: string = resolveKimiCodeHome();
diff --git a/apps/vis/server/src/index.ts b/apps/vis/server/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0047337367e9754d93c47cb69fe64bcdf092754a
--- /dev/null
+++ b/apps/vis/server/src/index.ts
@@ -0,0 +1,21 @@
+import { KIMI_CODE_HOME, resolveHost, resolveVisAuthToken } from './config';
+import { startVisServer } from './start';
+import { formatStartupBanner } from './startup-banner';
+
+async function main(): Promise<void> {
+  const host = resolveHost();
+  const authToken = resolveVisAuthToken(host);
+  const { port } = await startVisServer({ host, authToken });
+  process.stdout.write(
+    formatStartupBanner({ authToken, host, kimiCodeHome: KIMI_CODE_HOME, port }),
+  );
+}
+
+try {
+  await main();
+} catch (error: unknown) {
+  process.stderr.write(
+    `[vis-server] fatal: ${error instanceof Error ? (error.stack ?? error.message) : String(error)}\n`,
+  );
+  process.exit(1);
+}
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 0000000000000000000000000000000000000000..3e307e0f229ea6f5dfecd5c06c2b0644ee67c910
--- /dev/null
+++ b/apps/vis/server/src/lib/agent-record-types.ts
@@ -0,0 +1,439 @@
+// apps/vis/server/src/lib/agent-record-types.ts
+// Single source of truth: engine shapes come from agent-core-v2 directly.
+// Do NOT add local interfaces that duplicate upstream shapes — the only
+// exceptions are the legacy records below, which v2 never writes but old
+// (v1-written / pre-migration) wires still contain on disk.
+
+export type {
+  ContextMessage,
+  LoopRecordedEvent,
+  Message,
+  ContentPart,
+  ToolCall,
+  TokenUsage,
+  PermissionMode,
+  PromptOrigin,
+  CronTask,
+} from '@moonshot-ai/agent-core-v2';
+export { WIRE_PROTOCOL_VERSION } from '@moonshot-ai/agent-core-v2/wire/migration/migration';
+export type {
+  AgentTaskInfo as BackgroundTaskInfo,
+  AgentTaskStatus as BackgroundTaskStatus,
+} from '@moonshot-ai/agent-core-v2';
+export type { SubagentTaskInfo as AgentBackgroundTaskInfo } from '@moonshot-ai/agent-core-v2';
+export type { ProcessTaskInfo as ProcessBackgroundTaskInfo } from '@moonshot-ai/agent-core-v2/agent/tools/os/bash/process-task';
+export type { QuestionTaskInfo as QuestionBackgroundTaskInfo } from '@moonshot-ai/agent-core-v2/agent/tools/ask-user-question/question-background-task';
+
+import type {
+  AgentTaskInfo as BackgroundTaskInfo,
+  CronAddPayload,
+  CronCursorPayload,
+  CronDeletePayload,
+  CronTask,
+  ExportSessionManifest,
+  FileHistoryCheckpointed,
+  FileHistoryTracked,
+  FullCompactionBegin,
+  FullCompactionCancel,
+  FullCompactionComplete,
+  GoalClear,
+  GoalCreate,
+  GoalForked,
+  GoalUpdate,
+  InteractionRequestEvent,
+  InteractionResolvedEvent,
+  InterruptionReminderRecorded,
+  LlmRequest,
+  LlmToolsSnapshot,
+  McpToolsDiscovered,
+  PlanModeCancel,
+  PlanModeEnter,
+  PlanModeExit,
+  PlanRevision,
+  PluginSessionStartEvent,
+  PromptAborted,
+  PromptCompleted,
+  PromptSteered,
+  TaskStarted,
+  TaskTerminated,
+  TaskWaitDelivered,
+  TokenCountingMeasured,
+  TokenCountingRebased,
+  TokenCountingTruncated,
+  TokenCountingTurnRecorded,
+  ToolsRegisterUserTool,
+  ToolsUnregisterUserTool,
+} from '@moonshot-ai/agent-core-v2';
+import type {
+  ContextAppendLoopEvent,
+  ContextAppendMessage,
+  ContextApplyCompactionPayload,
+  ContextClear,
+  ContextUndo,
+} from '@moonshot-ai/agent-core-v2/agent/contextMemory/contextEvents';
+import type { TurnCancel, TurnEnded, TurnPrompt, TurnSteer } from '@moonshot-ai/agent-core-v2/agent/loop/turnOps';
+import type { TurnStepInterrupted } from '@moonshot-ai/agent-core-v2/agent/loop/turnEvents';
+import type { TurnStepRetrying } from '@moonshot-ai/agent-core-v2/agent/loop/turnEvents';
+import type { UsageRecord } from '@moonshot-ai/agent-core-v2/agent/usage/usageOps';
+import type {
+  ConfigUpdate,
+  ProfileBind,
+  ToolsResetActiveTools,
+  ToolsSetActiveTools,
+} from '@moonshot-ai/agent-core-v2/agent/profile/profileOps';
+import type { PermissionSetMode } from '@moonshot-ai/agent-core-v2/agent/permissionMode/permissionModeOps';
+import type { PermissionRecordApprovalResult } from '@moonshot-ai/agent-core-v2/agent/permissionRules/permissionRulesOps';
+import type { RuntimeSetBinding } from '@moonshot-ai/agent-core-v2/agent/runtimeBinding/runtimeBindingOps';
+import type { SwarmModeEnter, SwarmModeExit } from '@moonshot-ai/agent-core-v2/features/swarm/swarmOps';
+import type { TowerModeEnter, TowerModeExit } from '@moonshot-ai/agent-core-v2/features/tower/towerOps';
+import type { ToolsUpdateStore } from '@moonshot-ai/agent-core-v2/features/todo/todoOps';
+
+/** A wire record with v2's literal `type` discriminant restored. v2 declares
+ *  records as Event2 class + payload interface mergings whose `type` field is
+ *  the widened `string`; intersecting with the literal keeps the union below
+ *  discriminated. `time` stays optional because pre-1.5 wires may lack it. */
+type WireRecordOf<T extends string, E> = E extends unknown
+  ? Omit<E, 'type' | 'time' | 'serialize'> & { readonly type: T; readonly time?: number }
+  : never;
+
+/** v1-only durable record: dropped from v2 (`token_counting.*` carries the
+ *  context-window fill now), but old wires still contain it. */
+export interface ContextUpdateTokenCountRecord {
+  readonly type: 'context.update_token_count';
+  readonly tokenCount: number;
+  readonly time?: number;
+}
+
+/** v1-only durable record: v2 has no micro-compaction, but old wires still
+ *  contain it. */
+export interface MicroCompactionApplyRecord {
+  readonly type: 'micro_compaction.apply';
+  readonly cutoff: number;
+  readonly time?: number;
+}
+
+/** v2-dropped durable record: removed with the staleGuard feature, but old
+ *  wires still contain it. */
+export interface StaleGuardRecordedRecord {
+  readonly type: 'staleGuard.recorded';
+  readonly path: string;
+  readonly mtimeMs: number;
+  readonly time?: number;
+}
+
+/** v2-dropped durable record: removed with the staleGuard feature, but old
+ *  wires still contain it. */
+export interface StaleGuardClearedRecord {
+  readonly type: 'staleGuard.cleared';
+  readonly time?: number;
+}
+
+/** v2-dropped durable record: removed with the loop-side prompt admission
+ *  facility, but old wires still contain it. */
+export interface PromptAcceptedRecord {
+  readonly type: 'prompt.accepted';
+  readonly agentId: string;
+  readonly promptId: string;
+  readonly content?: unknown;
+  readonly time?: number;
+}
+
+/** The wire file header record. Declared locally (rather than via v2's
+ *  `WireMetadataRecord`) so the union member keeps concrete field types —
+ *  the upstream interface carries an index signature that would widen
+ *  `protocol_version` / `created_at` to `unknown`. */
+export interface WireMetadataHeader {
+  readonly type: 'metadata';
+  readonly protocol_version: string;
+  readonly created_at: number;
+  readonly time?: number;
+}
+
+/**
+ * The wire record union vis projects: every durable record kind v2 can write
+ * (the wire-manifest inventory) plus the v1-only legacy kinds above, which
+ * survive in old wires unchanged (the migration chain never drops records).
+ * The union keeps the context projector's exhaustiveness check covering every
+ * record a wire file can hold.
+ */
+export type AgentRecord =
+  | WireMetadataHeader
+  | WireRecordOf<'config.update', ConfigUpdate>
+  | WireRecordOf<'context.append_loop_event', ContextAppendLoopEvent>
+  | WireRecordOf<'context.append_message', ContextAppendMessage>
+  | WireRecordOf<'context.apply_compaction', ContextApplyCompactionPayload>
+  | WireRecordOf<'context.clear', ContextClear>
+  | WireRecordOf<'context.undo', ContextUndo>
+  | WireRecordOf<'cron.add', CronAddPayload>
+  | WireRecordOf<'cron.cursor', CronCursorPayload>
+  | WireRecordOf<'cron.delete', CronDeletePayload>
+  | WireRecordOf<'file_history.checkpoint', FileHistoryCheckpointed>
+  | WireRecordOf<'file_history.tracked', FileHistoryTracked>
+  | WireRecordOf<'forked', GoalForked>
+  | WireRecordOf<'full_compaction.begin', FullCompactionBegin>
+  | WireRecordOf<'full_compaction.cancel', FullCompactionCancel>
+  | WireRecordOf<'full_compaction.complete', FullCompactionComplete>
+  | WireRecordOf<'goal.clear', GoalClear>
+  | WireRecordOf<'goal.create', GoalCreate>
+  | WireRecordOf<'goal.update', GoalUpdate>
+  | WireRecordOf<'interaction.request', InteractionRequestEvent>
+  | WireRecordOf<'interaction.resolved', InteractionResolvedEvent>
+  | WireRecordOf<'interruptionReminder.recorded', InterruptionReminderRecorded>
+  | WireRecordOf<'llm.request', LlmRequest>
+  | WireRecordOf<'llm.tools_snapshot', LlmToolsSnapshot>
+  | WireRecordOf<'mcp.tools_discovered', McpToolsDiscovered>
+  | WireRecordOf<'permission.record_approval_result', PermissionRecordApprovalResult>
+  | WireRecordOf<'permission.set_mode', PermissionSetMode>
+  | WireRecordOf<'plan_mode.cancel', PlanModeCancel>
+  | WireRecordOf<'plan_mode.enter', PlanModeEnter>
+  | WireRecordOf<'plan_mode.exit', PlanModeExit>
+  | WireRecordOf<'plan.revision', PlanRevision>
+  | WireRecordOf<'plugin.session_start', PluginSessionStartEvent>
+  | WireRecordOf<'profile.bind', ProfileBind>
+  | WireRecordOf<'prompt.aborted', PromptAborted>
+  | PromptAcceptedRecord
+  | WireRecordOf<'prompt.completed', PromptCompleted>
+  | WireRecordOf<'prompt.steered', PromptSteered>
+  | WireRecordOf<'runtime.set_binding', RuntimeSetBinding>
+  | WireRecordOf<'swarm_mode.enter', SwarmModeEnter>
+  | WireRecordOf<'swarm_mode.exit', SwarmModeExit>
+  | WireRecordOf<'task.started', TaskStarted>
+  | WireRecordOf<'task.terminated', TaskTerminated>
+  | WireRecordOf<'task.waitDelivered', TaskWaitDelivered>
+  | WireRecordOf<'token_counting.measured', TokenCountingMeasured>
+  | WireRecordOf<'token_counting.rebased', TokenCountingRebased>
+  | WireRecordOf<'token_counting.truncated', TokenCountingTruncated>
+  | WireRecordOf<'token_counting.turn_recorded', TokenCountingTurnRecorded>
+  | WireRecordOf<'tools.register_user_tool', ToolsRegisterUserTool>
+  | WireRecordOf<'tools.reset_active_tools', ToolsResetActiveTools>
+  | WireRecordOf<'tools.set_active_tools', ToolsSetActiveTools>
+  | WireRecordOf<'tools.unregister_user_tool', ToolsUnregisterUserTool>
+  | WireRecordOf<'tools.update_store', ToolsUpdateStore>
+  | WireRecordOf<'tower_mode.enter', TowerModeEnter>
+  | WireRecordOf<'tower_mode.exit', TowerModeExit>
+  | WireRecordOf<'turn.cancel', TurnCancel>
+  | WireRecordOf<'turn.ended', TurnEnded>
+  | WireRecordOf<'turn.prompt', TurnPrompt>
+  | WireRecordOf<'turn.steer', TurnSteer>
+  | WireRecordOf<'turn.step.interrupted', TurnStepInterrupted>
+  | WireRecordOf<'turn.step.retrying', TurnStepRetrying>
+  | WireRecordOf<'usage.record', UsageRecord>
+  | ContextUpdateTokenCountRecord
+  | MicroCompactionApplyRecord
+  | StaleGuardRecordedRecord
+  | StaleGuardClearedRecord;
+
+/** Extract one record kind from the union. */
+export type AgentRecordOf<K extends AgentRecord['type']> = Extract<
+  AgentRecord,
+  { readonly type: K }
+>;
+
+/**
+ * `manifest.json` shape inside a `/export-debug-zip` bundle. Structural
+ * current engine manifest with every field optional because the bundle may
+ * come from another machine or an older kimi-code version.
+ */
+export type ImportManifest = Partial<ExportSessionManifest>;
+
+/** vis-side bookkeeping for one imported bundle, written to
+ *  `imported/<importId>/import-meta.json`. */
+export interface ImportInfo {
+  /** vis-generated id (`imp_…`); also the session id the UI addresses. */
+  importId: string;
+  /** ISO time the zip was imported into vis. */
+  importedAt: string;
+  /** Original uploaded file name, when known. */
+  originalName: string | null;
+  /** Parsed `manifest.json`, when present and readable. */
+  manifest: ImportManifest | null;
+}
+
+// ── vis-only DTOs ──────────────────────────────────────────────────────────
+
+export interface ApiError {
+  error: string;
+  code:
+    | 'NOT_FOUND'
+    | 'BAD_REQUEST'
+    | 'UNAUTHORIZED'
+    | 'READ_ERROR'
+    | 'PARSE_ERROR'
+    | 'DELETE_ERROR';
+}
+
+export type SessionHealth =
+  | 'ok'
+  | 'broken_state'
+  | 'broken_main_wire'
+  | 'missing_main_wire';
+
+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;
+  /** True for sessions imported from a debug zip (under `<home>/imported/`). */
+  imported: boolean;
+  /** Export/import provenance for imported sessions; null for local ones. */
+  importMeta: ImportInfo | null;
+}
+
+export interface AgentInfo {
+  agentId: string;
+  type: 'main' | 'sub' | 'independent';
+  parentAgentId: string | null;
+  profileName: string | null;
+  homedir: string;
+  wireExists: boolean;
+  wireRecordCount: number;
+  wireProtocolVersion: string | null;
+  /** Per-item swarm work label persisted by the engine for swarm-spawned
+   *  sub-agents (`AgentMeta.swarmItem`, or `AgentMeta.labels.swarmItem` on
+   *  v2-written sessions). `null` when the agent is not a swarm item or when
+   *  the value cannot be recovered (e.g. disk-only inventory of a session
+   *  with a corrupt `state.json`). */
+  swarmItem: 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[];
+  /** True for sessions imported from a debug zip. */
+  imported: boolean;
+  /** Export/import provenance for imported sessions; null for local ones. */
+  importMeta: ImportInfo | null;
+}
+
+/** One line of `wire.jsonl` after vis has parsed (and possibly migrated)
+ *  it. `lineNo` is internal plumbing — used as a stable React key, for
+ *  "jump to line" navigation, and for pairing events — and MUST NOT be
+ *  rendered as part of the record body. The detail panel surfaces it via
+ *  the row header, not inside the JSON view. */
+export interface WireEntry {
+  /** 1-indexed line number in the underlying `wire.jsonl` file. */
+  lineNo: number;
+  /** The record as projected by vis: JSON-parsed AND run through the
+   *  upstream migration chain. Every consumer reads from this. */
+  data: AgentRecord;
+  /** The record exactly as written on disk: `JSON.parse` of the line,
+   *  with NO migration and NO vis annotations. Equal to `data` for
+   *  current-protocol records; diverges when a migration applied (e.g.
+   *  nested `toolCalls[*].function.name` → flat `name` on v1.0 wires).
+   *  Used by the detail panel to show "as written vs as projected". */
+  raw: unknown;
+}
+
+export interface WireResponse {
+  sessionId: string;
+  agentId: string;
+  protocolVersion: string;
+  metadata: { protocolVersion: string; createdAt: number };
+  records: readonly WireEntry[];
+  warnings: string[];
+}
+
+export interface AgentNode extends AgentInfo {
+  children: AgentNode[];
+}
+
+export interface AgentTreeResponse {
+  sessionId: string;
+  tree: AgentNode[];
+}
+
+// ── background tasks & cron ─────────────────────────────────────────────────
+
+/** A persisted background task plus vis-derived `output.log` metadata.
+ *  `task` is the normalized engine shape; the size/exists fields let the
+ *  UI badge how much output a task produced and offer a "view log" affordance
+ *  without first fetching the (potentially large) log body. */
+export interface BackgroundTaskEntry {
+  task: BackgroundTaskInfo;
+  /** Which agent persisted this task — tasks live under the spawning agent's
+   *  homedir (`<session>/agents/<agentId>/tasks`), not the session root. */
+  agentId: string;
+  /** Total byte size of the task's `output.log` (0 when absent). */
+  outputSizeBytes: number;
+  /** Whether an `output.log` file exists for this task. */
+  outputExists: boolean;
+}
+
+export interface BackgroundTasksResponse {
+  sessionId: string;
+  tasks: BackgroundTaskEntry[];
+}
+
+/** One byte-window of a task's `output.log`. Byte-level (not line-level)
+ *  paging mirrors how the log is stored on disk, so arbitrarily large logs
+ *  can be paged without loading the whole file. */
+export interface TaskOutputResponse {
+  sessionId: string;
+  taskId: string;
+  /** Byte offset this window starts at. */
+  offset: number;
+  /** Byte offset immediately after this window; pass as the next `offset`
+   *  to page forward without drift. */
+  nextOffset: number;
+  /** Total byte size of the log on disk. */
+  size: number;
+  /** UTF-8 decoded window content. */
+  content: string;
+  /** True when this window reaches the end of the log. */
+  eof: boolean;
+}
+
+export interface CronTasksResponse {
+  sessionId: string;
+  cron: CronTask[];
+}
+
+// ── imported sessions & logs ────────────────────────────────────────────────
+
+/** Result of importing a debug zip. */
+export interface ImportResult {
+  /** The `imp_…` id the UI uses to address the imported session. */
+  sessionId: string;
+  importMeta: ImportInfo;
+}
+
+/** One parsed line of a diagnostic log. */
+export interface LogLine {
+  /** 1-indexed line number in the source log. */
+  lineNo: number;
+  /** ISO timestamp parsed from the line prefix, or null if unparseable. */
+  time: string | null;
+  /** Log level (INFO / WARN / ERROR / DEBUG / …), uppercased, or null. */
+  level: string | null;
+  /** The human message between the level and the structured fields. */
+  message: string;
+  /** Parsed trailing `key=value` fields. */
+  fields: Record<string, string>;
+  /** The original line, verbatim. */
+  raw: string;
+}
+
+export interface LogsResponse {
+  sessionId: string;
+  which: 'session' | 'global';
+  /** Which logs exist on disk for this session. */
+  available: { session: boolean; global: boolean };
+  lines: LogLine[];
+  /** True when the log was longer than the served cap and got truncated. */
+  truncated: boolean;
+}
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 0000000000000000000000000000000000000000..e3b57ccfc665f57fc3be56c9ae1c834195dee26e
--- /dev/null
+++ b/apps/vis/server/src/lib/agent-tree.ts
@@ -0,0 +1,60 @@
+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 agents fall back to a numeric `agent-N` order (so
+ * `agent-2` precedes `agent-10`), then a stable lexicographic order. The
+ * same ordering is applied to each node's children.
+ */
+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);
+    }
+  }
+  for (const node of byId.values()) {
+    node.children.sort(sortAgents);
+  }
+  return roots.sort(sortAgents);
+}
+
+function sortAgents(a: AgentNode, b: AgentNode): number {
+  return compareAgentIds(a.agentId, b.agentId);
+}
+
+/**
+ * Shared agent-id ordering: `main` always first, then `agent-N` records by
+ * numeric suffix (so `agent-2` precedes `agent-10`), with a lexicographic
+ * fallback for any id that does not match the `agent-N` shape.
+ *
+ * In practice a sibling set is `main` plus `agent-N` ids (the engine's id
+ * generator only emits those). The `na`/`nb`-only branches below exist solely
+ * to keep a stable TOTAL order when foreign/hand-edited ids (reachable via
+ * `state.json` keys or `discoverAgentsFromDisk` directory names) are mixed in:
+ * all `agent-N` ids sort before any non-`agent-N` id, so the comparator stays
+ * transitive instead of degenerating into V8's order-dependent output.
+ */
+export function compareAgentIds(a: string, b: string): number {
+  if (a === b) return 0;
+  if (a === 'main') return -1;
+  if (b === 'main') return 1;
+  const na = /^agent-(\d+)$/.exec(a);
+  const nb = /^agent-(\d+)$/.exec(b);
+  if (na && nb) return Number(na[1]) - Number(nb[1]);
+  if (na) return -1; // all agent-N sort before any non-agent-N id
+  if (nb) return 1;
+  return a.localeCompare(b);
+}
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 0000000000000000000000000000000000000000..9cc3aeb48df0a92ec5786abdfa4692c640b80f42
--- /dev/null
+++ b/apps/vis/server/src/lib/context-projector.ts
@@ -0,0 +1,708 @@
+import {
+  buildContextCompactionShape,
+} from '@moonshot-ai/agent-core-v2/agent/contextMemory/compactionHandoff';
+import {
+  computeUndoCut,
+  isFullyUndoable,
+  readContextCompactionShapeInput,
+} from '@moonshot-ai/agent-core-v2/agent/contextMemory/contextOps';
+import { createLoopEventFold } from '@moonshot-ai/agent-core-v2/agent/contextMemory/loopEventFold';
+import { renderToolResultForModel } from '@moonshot-ai/agent-core-v2/agent/contextMemory/toolResultRender';
+import type {
+  ContentPart,
+  ContextMessage,
+  PermissionMode,
+  TokenUsage,
+  WireEntry,
+} from './agent-record-types';
+
+export interface ProjectedMessage {
+  lineNo: number;
+  time?: number;
+  source: 'append_message' | 'compaction_summary' | 'undo' | 'clear';
+  message: ContextMessage;
+  toolStepUuids: string[];
+  /** Set only when source === 'undo'. */
+  undo?: { count: number; removedMessageCount: number };
+  /** Set only on the summary bubble of source === 'compaction_summary'.
+   *  `tokensBefore`/`tokensAfter` are absent on legacy payload variants. */
+  compaction?: { compactedCount: number; tokensBefore?: number; tokensAfter?: number };
+}
+
+export interface UsageTotals {
+  byScope: { session: TokenUsage; turn: TokenUsage };
+  byModel: Record<string, TokenUsage>;
+}
+
+export interface ConfigSnapshot {
+  cwd?: string;
+  modelAlias?: string;
+  profileName?: string;
+  thinkingEffort?: string;
+  systemPrompt?: string;
+}
+
+export interface GoalSnapshot {
+  goalId: string;
+  objective: string;
+  completionCriterion?: string;
+  status?: string;
+  actor?: string;
+  reason?: string;
+  tokensUsed?: number;
+  turnsUsed?: number;
+  wallClockMs?: number;
+}
+
+export interface ContextProjection {
+  messages: ProjectedMessage[];
+  usage: UsageTotals;
+  /** Absolute current context-window fill, mirroring the engine's token
+   *  counting state. Updated from the latest step.end.usage and the
+   *  token_counting.* records, and also reset on the lifecycle events the
+   *  engine touches: context.clear → 0, context.apply_compaction →
+   *  tokensAfter. Distinct from the cumulative `usage` totals. */
+  contextTokens: number;
+  config: ConfigSnapshot;
+  permission: { mode: PermissionMode | null };
+  planMode: { active: boolean; id?: string };
+  goal: GoalSnapshot | null;
+  swarm: { active: boolean; trigger?: string };
+}
+
+const ZERO: TokenUsage = { inputOther: 0, output: 0, inputCacheRead: 0, inputCacheCreation: 0 };
+
+/** Build a conversation timeline + derived state from a sequence of
+ *  wire entries. The reconstruction mirrors the engine's own loop-event
+ *  fold logic, so:
+ *
+ *  - `context.append_message` records become messages as-is (the
+ *    user / tool messages and any explicit assistant injections).
+ *  - `step.begin` settles a preceding attempt and opens a fresh assistant;
+ *    later `content.part` and `tool.call` events on the same step grow that
+ *    message. A normal `step.end` seals it (or drops it when vacuous), while
+ *    interrupted/error steps stay partial until the next attempt.
+ *  - pending tool calls defer appended messages; matching `tool.result`
+ *    events close them, and an attempt that settles first gets synthetic
+ *    interrupted results, exactly like engine replay.
+ *
+ *  Without this loop-event reconstruction the timeline would only
+ *  show user prompts — the engine does not emit a synthetic
+ *  `context.append_message` for assistant turns.
+ *
+ *  `mode` selects between two views of the four destructive lifecycle
+ *  events (compaction / undo / clear / micro-compaction):
+ *
+ *  - `'model'` (default): faithfully mirrors what the model currently
+ *    sees — compaction drops the compacted prefix, undo splices removed
+ *    messages out, clear empties the list, micro-compaction blanks old
+ *    tool results. All existing behaviour.
+ *  - `'full'`: full reconstructed history for debugging — the same four
+ *    events insert an INLINE MARKER but do NOT mutate/drop the message
+ *    list, so messages compacted/undone/cleared away stay visible and
+ *    micro-compacted tool results keep their original content.
+ *
+ *  Everything else (append_message, loop events, goal/swarm/permission/
+ *  plan/config/usage/contextTokens derived state) is identical in both
+ *  modes — `mode` only affects the `messages` array and which markers
+ *  appear. */
+export function projectContext(
+  entries: ReadonlyArray<WireEntry>,
+  mode: 'model' | 'full' = 'model',
+): ContextProjection {
+  let messages: ProjectedMessage[] = [];
+  let modelMessages: 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;
+  let contextTokens = 0;
+  let goal: GoalSnapshot | null = null;
+  let swarm: { active: boolean; trigger?: string } = { active: false };
+  let microCutoff = 0;
+  let currentEntry: WireEntry | undefined;
+  let openMessage: ProjectedMessage | undefined;
+  let syntheticToolOrdinal = 0;
+  const appendMessageEntries = new WeakMap<ContextMessage, ProjectedMessage>();
+
+  const pushModelMessage = (message: ProjectedMessage): void => {
+    modelMessages.push(message);
+    messages.push(message);
+  };
+
+  const removeModelMessage = (message: ProjectedMessage): void => {
+    const modelIndex = modelMessages.indexOf(message);
+    if (modelIndex !== -1) modelMessages.splice(modelIndex, 1);
+    const displayIndex = messages.indexOf(message);
+    if (displayIndex !== -1) messages.splice(displayIndex, 1);
+  };
+
+  const currentLineNo = (): number => currentEntry?.lineNo ?? 0;
+
+  const fold = createLoopEventFold({
+    openAssistant: (time) => {
+      const event = currentEntry?.data;
+      const stepUuid =
+        event?.type === 'context.append_loop_event' && event.event.type === 'step.begin'
+          ? event.event.uuid
+          : undefined;
+      openMessage = {
+        lineNo: currentLineNo(),
+        time,
+        source: 'append_message',
+        message: { role: 'assistant', content: [], toolCalls: [], partial: true },
+        toolStepUuids: stepUuid === undefined ? [] : [stepUuid],
+      };
+      pushModelMessage(openMessage);
+    },
+    appendOpenContent: (part) => {
+      if (openMessage === undefined) return;
+      openMessage.message = {
+        ...openMessage.message,
+        content: [...openMessage.message.content, part],
+      };
+    },
+    appendOpenToolCall: (call) => {
+      if (openMessage === undefined) return;
+      openMessage.message = {
+        ...openMessage.message,
+        toolCalls: [...openMessage.message.toolCalls, call],
+      };
+    },
+    dropOpenAssistant: () => {
+      if (openMessage === undefined) return;
+      removeModelMessage(openMessage);
+      openMessage = undefined;
+    },
+    sealOpenAssistant: () => {
+      if (openMessage === undefined) return;
+      openMessage.message = { ...openMessage.message, partial: undefined };
+      openMessage = undefined;
+    },
+    pushToolMessage: (message, time) => {
+      const event = currentEntry?.data;
+      const directResult =
+        event?.type === 'context.append_loop_event' && event.event.type === 'tool.result';
+      const lineNo = directResult
+        ? currentLineNo()
+        : currentLineNo() - 0.25 - syntheticToolOrdinal++ / 1000;
+      pushModelMessage({
+        lineNo,
+        time,
+        source: 'append_message',
+        message: modelFacingMessage(message),
+        toolStepUuids: [],
+      });
+    },
+    pushMessage: (message, time) => {
+      const projected = appendMessageEntries.get(message) ?? {
+        lineNo: currentLineNo(),
+        time,
+        source: 'append_message' as const,
+        message,
+        toolStepUuids: [],
+      };
+      projected.message = modelFacingMessage(message);
+      pushModelMessage(projected);
+    },
+  });
+
+  const resetFold = (): void => {
+    fold.reset();
+    openMessage = undefined;
+  };
+
+  for (const entry of entries) {
+    currentEntry = entry;
+    syntheticToolOrdinal = 0;
+    const rec = entry.data;
+    switch (rec.type) {
+      case 'context.append_message': {
+        const message = normalizeLegacyOrigin(rec.message);
+        appendMessageEntries.set(message, {
+          lineNo: entry.lineNo,
+          time: rec.time,
+          source: 'append_message',
+          message,
+          toolStepUuids: [],
+        });
+        fold.appendMessage(message, rec.time);
+        break;
+      }
+      case 'context.append_loop_event': {
+        const ev = rec.event;
+        fold.loopEvent(ev, rec.time);
+        if (ev.type === 'step.end') {
+          // Absolute context-window fill, mirroring the engine's token
+          // counting state: the latest step.end usage REPLACES the
+          // snapshot (it is not cumulative — see Task P1.7 note on byScope).
+          // A zero-usage step.end (e.g. a content-filtered response) is the one
+          // exception the engine makes — it keeps the prior count instead of
+          // resetting to 0 — so guard against a false drop here too.
+          if ('usage' in ev && ev.usage !== undefined) {
+            const fill =
+              ev.usage.inputCacheRead +
+              ev.usage.inputCacheCreation +
+              ev.usage.inputOther +
+              ev.usage.output;
+            if (fill > 0) contextTokens = fill;
+          }
+        }
+        break;
+      }
+      case 'context.update_token_count':
+        contextTokens = rec.tokenCount;
+        break;
+      case 'context.clear':
+        resetFold();
+        modelMessages = [];
+        if (mode === 'model') {
+          messages = [];
+          // Mirror the engine's clear() → legacy micro-compaction cutoff
+          // reset (→ 0):
+          // the message indices are wiped, so any prior cutoff is meaningless.
+          microCutoff = 0;
+        } else {
+          // Full history: keep all preceding messages, just
+          // append a synthetic 'clear' marker inline. The original tool results
+          // stay un-blanked, so the cutoff is not applied (the end-of-loop
+          // blanking pass is gated on model mode).
+          messages.push({
+            lineNo: entry.lineNo,
+            time: rec.time,
+            source: 'clear',
+            // Synthetic marker: never rendered as a bubble (the web dispatches on
+            // `source === 'clear'`). `role: 'assistant'` keeps it out of any
+            // role-counting / tool-blanking path.
+            message: { role: 'assistant', content: [], toolCalls: [] } as ContextMessage,
+            toolStepUuids: [],
+          });
+        }
+        // Mirror the engine's clear() → token count = 0: the context-window
+        // fill is wiped. Derived state, so it is mode-INDEPENDENT (applied for
+        // both modes).
+        contextTokens = 0;
+        break;
+      case 'context.apply_compaction': {
+        let compactionInput: ReturnType<typeof readContextCompactionShapeInput>;
+        try {
+          compactionInput = readContextCompactionShapeInput(rec);
+        } catch {
+          break;
+        }
+        if (mode === 'full' && rec.keptUserMessageCount !== undefined) {
+          fold.settle(rec.time);
+        }
+        const historyEntries = [...modelMessages];
+        resetFold();
+        // Mirror the engine's applyCompaction
+        // (`packages/agent-core-v2/src/agent/contextMemory/`): the live history
+        // becomes the kept real user messages (verbatim, within a token budget
+        // — the oldest head plus the most recent tail, separated by an elision
+        // marker when the pool overflowed) followed by a single user-role
+        // summary tagged `origin.kind = 'compaction_summary'`. Assistant
+        // messages, tool calls, and tool results are dropped. The selection
+        // rules come from the same `buildContextCompactionShape` helper the
+        // engine uses during replay, so both views stay in sync.
+        //
+        // The v2 payload is a union of three variants: current records carry
+        // `summary` as a string (with `contextSummary` holding the
+        // model-facing variant when media degraded); a legacy variant carries
+        // the summary as a ContextMessage plus `count` instead of
+        // `compactedCount`. `tokensBefore`/`tokensAfter` are optional in all
+        // variants. Normalize before projecting.
+        const rawSummary = rec.summary;
+        const contextSummary = 'contextSummary' in rec ? rec.contextSummary : undefined;
+        const summaryText =
+          typeof rawSummary === 'string'
+            ? rawSummary
+            : rawSummary !== undefined
+              ? contextMessageText(rawSummary)
+              : (contextSummary ?? '');
+        const shape = buildContextCompactionShape(
+          historyEntries.map((message) => message.message),
+          compactionInput,
+        );
+        const compactedCount = shape.compactedCount;
+        const summaryBubble: ProjectedMessage = {
+          lineNo: entry.lineNo,
+          time: rec.time,
+          source: 'compaction_summary',
+          message: {
+            role: 'user',
+            content: [{ type: 'text', text: summaryText }],
+            toolCalls: [],
+            origin: { kind: 'compaction_summary' },
+          } as ContextMessage,
+          toolStepUuids: [],
+          compaction: {
+            compactedCount,
+            tokensBefore: rec.tokensBefore,
+            tokensAfter: shape.tokensAfter,
+          },
+        };
+        const legacyTail = rec.legacyTail === true || rec.keptUserMessageCount === undefined;
+        const summaryIndex = legacyTail
+          ? 0
+          : shape.messages.findIndex((message) => message.origin?.kind === 'compaction_summary');
+        const modelSummaryBubble: ProjectedMessage = {
+          ...summaryBubble,
+          message: modelFacingMessage(shape.messages[summaryIndex] ?? summaryBubble.message),
+        };
+        const available = new Set(historyEntries);
+        let syntheticOrdinal = 0;
+        modelMessages = shape.messages.map((message, index) => {
+          if (index === summaryIndex) return modelSummaryBubble;
+          const original = historyEntries.find(
+            (candidate) => available.has(candidate) && candidate.message === message,
+          );
+          if (original !== undefined) {
+            available.delete(original);
+            return original;
+          }
+          syntheticOrdinal += 1;
+          return {
+            lineNo: entry.lineNo - 0.5 - syntheticOrdinal / 1000,
+            time: rec.time,
+            source: 'append_message',
+            message: modelFacingMessage(message),
+            toolStepUuids: [],
+          };
+        });
+        if (mode === 'model') {
+          messages = [...modelMessages];
+        } else {
+          // Full history: keep ALL preceding messages, just append the summary
+          // marker inline so the compacted prefix stays visible.
+          messages.push(summaryBubble);
+        }
+        // Mirror the engine's applyCompaction() → legacy micro-compaction
+        // cutoff reset (→ 0): the message list is rebuilt, so the old
+        // index-based cutoff no longer points at the same messages. (In full
+        // mode the blanking pass does not run, so this is a no-op there.)
+        microCutoff = 0;
+        // `buildContextCompactionShape` also derives the post-compaction token
+        // count for legacy records that omit `tokensAfter`.
+        contextTokens = shape.tokensAfter;
+        break;
+      }
+      case 'usage.record': {
+        // byScope keeps per-scope cumulative spend. This is NOT the live context-window
+        // fill — that is `contextTokens` (latest step.end.usage). The web TokenBar shows
+        // contextTokens; byScope/byModel are for the cumulative breakdown only.
+        const scope = (rec.usageScope ?? 'session') as 'session' | 'turn';
+        addUsage(usage.byScope[scope], rec.usage);
+        usage.byModel[rec.model] ??= { ...ZERO };
+        addUsage(usage.byModel[rec.model]!, rec.usage);
+        break;
+      }
+      case 'config.update': {
+        // v2 dropped top-level `cwd` (it lives in `environmentDisclosure`)
+        // and persists `thinkingLevel` on some records instead of
+        // `thinkingEffort`; accept both spellings.
+        if (rec.environmentDisclosure !== undefined)
+          config.cwd = rec.environmentDisclosure.cwd;
+        if (rec.modelAlias !== undefined) config.modelAlias = rec.modelAlias;
+        if (rec.profileName !== undefined) config.profileName = rec.profileName;
+        const effort = rec.thinkingEffort ?? rec.thinkingLevel;
+        if (effort !== undefined) config.thinkingEffort = effort;
+        if (rec.systemPrompt !== undefined) config.systemPrompt = rec.systemPrompt;
+        break;
+      }
+      case 'profile.bind': {
+        // v2 writes most initial config state on `profile.bind` rather than
+        // `config.update` (which now carries only later updates).
+        if (rec.environmentDisclosure !== undefined)
+          config.cwd = rec.environmentDisclosure.cwd;
+        if (rec.modelAlias !== undefined) config.modelAlias = rec.modelAlias;
+        if (rec.profileName !== undefined) config.profileName = rec.profileName;
+        config.thinkingEffort = rec.thinkingEffort;
+        config.systemPrompt = rec.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;
+      case 'context.undo': {
+        // Mirror the engine's `undo`: locate the requested user anchor while
+        // skipping injections, stop at a compaction summary, include an
+        // immediately preceding prompt-owned injection in the cut, then remove
+        // the entire suffix from that cut. The UI adds a marker afterwards.
+        //
+        // `computeUndoCut` is the engine's single source of truth for that
+        // skip/stop walk; only the visible removal is gated on `'model'` mode.
+        const cut = computeUndoCut(
+          modelMessages.map((message) => message.message),
+          rec.count,
+        );
+        const applied = isFullyUndoable(cut, rec.count);
+        const removedMessageCount = applied ? modelMessages.length - cut.cutIndex : 0;
+        if (applied) {
+          const firstRemoved = modelMessages[cut.cutIndex];
+          modelMessages = modelMessages.slice(0, cut.cutIndex);
+          resetFold();
+          if (mode === 'model') {
+            const displayCutoff = firstRemoved === undefined ? -1 : messages.indexOf(firstRemoved);
+            messages = displayCutoff === -1 ? [...modelMessages] : messages.slice(0, displayCutoff);
+          }
+        }
+        if (mode === 'model') {
+          // Mirror the engine's undo() → legacy micro-compaction cutoff reset
+          // (to the post-undo history length):
+          // clamp the cutoff to the post-undo HISTORY-entry count so a later append
+          // does not get blanked by a now-too-large stale cutoff. Count only history
+          // entries (`isHistoryEntry`) — `messages.length` would include any surviving
+          // synthetic undo/clear marker, which the engine's `_history.length` does
+          // NOT, so an array-length clamp could be too high by the marker count.
+          // (Clamp before pushing the undo marker, which is a non-tool pseudo-message
+          // and unaffected by blanking regardless.) With no markers, historyCount ===
+          // messages.length, so this is a no-op then.
+          microCutoff = Math.min(microCutoff, modelMessages.length);
+        }
+        // In 'full' mode: do NOT remove the visible messages; only push the undo
+        // marker. `modelMessages` still advances exactly like engine state so a
+        // later undo/compaction is computed from the right live history.
+        messages.push({
+          lineNo: entry.lineNo,
+          time: rec.time,
+          source: 'undo',
+          // Synthetic message: never rendered. The web dispatches on
+          // `source === 'undo'`; this only satisfies ProjectedMessage.
+          // `role: 'assistant'` is deliberate so this marker can never match the
+          // `role: 'tool'` micro-compaction blanking gate — keep it non-tool if
+          // you ever change the placeholder.
+          message: { role: 'assistant', content: [], toolCalls: [] } as ContextMessage,
+          toolStepUuids: [],
+          undo: { count: rec.count, removedMessageCount },
+        });
+        break;
+      }
+      case 'micro_compaction.apply':
+        // Track the latest cutoff; the actual content blanking is applied
+        // after the loop (mirrors the engine's legacy MicroCompaction.compact,
+        // which runs over the full history at projection time).
+        microCutoff = rec.cutoff;
+        break;
+      case 'goal.create':
+        goal = {
+          goalId: rec.goalId,
+          objective: rec.objective,
+          completionCriterion: rec.completionCriterion,
+        };
+        break;
+      case 'goal.update':
+        if (goal !== null) {
+          const prev: GoalSnapshot = goal;
+          goal = {
+            ...prev,
+            status: rec.status ?? prev.status,
+            actor: rec.actor ?? prev.actor,
+            reason: rec.reason ?? prev.reason,
+            tokensUsed: rec.tokensUsed ?? prev.tokensUsed,
+            turnsUsed: rec.turnsUsed ?? prev.turnsUsed,
+            wallClockMs: rec.wallClockMs ?? prev.wallClockMs,
+          };
+        }
+        break;
+      case 'goal.clear':
+        goal = null;
+        break;
+      case 'swarm_mode.enter':
+        swarm = { active: true, trigger: rec.trigger };
+        break;
+      case 'swarm_mode.exit':
+        swarm = { active: false };
+        break;
+      case 'tower_mode.enter':
+      case 'tower_mode.exit':
+        break;
+      case 'token_counting.measured':
+      case 'token_counting.truncated':
+      case 'token_counting.rebased':
+      case 'token_counting.turn_recorded':
+        // v2's replacement for `context.update_token_count`: every
+        // token_counting record carries the agent's current context-window
+        // fill (`tokens`) — the tokenCounting model sets its running count
+        // from each of them, and so do we.
+        contextTokens = rec.tokens;
+        break;
+      // Kinds that don't affect the projected timeline / derived state,
+      // including the observability records (request trace — `llm.*`,
+      // `mcp.tools_discovered`) and v2's lifecycle/task bookkeeping, which
+      // are never part of context state:
+      case 'metadata':
+      case 'forked':
+      case 'turn.prompt':
+      case 'turn.steer':
+      case 'turn.cancel':
+      case 'turn.ended':
+      case 'turn.step.interrupted':
+      case 'turn.step.retrying':
+      case 'prompt.accepted':
+      case 'prompt.aborted':
+      case 'prompt.completed':
+      case 'prompt.steered':
+      case 'interaction.request':
+      case 'interaction.resolved':
+      case 'task.started':
+      case 'task.terminated':
+      case 'task.waitDelivered':
+      case 'cron.add':
+      case 'cron.cursor':
+      case 'cron.delete':
+      case 'plan.revision':
+      case 'plugin.session_start':
+      case 'runtime.set_binding':
+      case 'staleGuard.recorded':
+      case 'staleGuard.cleared':
+      case 'interruptionReminder.recorded':
+      case 'permission.record_approval_result':
+      case 'full_compaction.begin':
+      case 'full_compaction.cancel':
+      case 'full_compaction.complete':
+      case 'tools.register_user_tool':
+      case 'tools.unregister_user_tool':
+      case 'tools.set_active_tools':
+      case 'tools.update_store':
+      case 'tools.reset_active_tools':
+      case 'llm.tools_snapshot':
+      case 'llm.request':
+      case 'mcp.tools_discovered':
+      case 'file_history.checkpoint':
+      case 'file_history.tracked':
+        break;
+      default: {
+        const _exhaustive: never = rec;
+        void _exhaustive;
+        break;
+      }
+    }
+  }
+
+  // Micro-compaction blanking (mirrors the engine's legacy
+  // MicroCompaction.compact): blank any message whose HISTORY index < cutoff
+  // that is a `role: 'tool'` result with a defined toolCallId and content
+  // large enough (≥ the min-content gate), replacing its content with the
+  // truncation marker. The cutoff is an engine `_history` index, which never
+  // includes our synthetic 'undo'/'clear' markers, so we count only history
+  // entries (`isHistoryEntry`)
+  // — array indices would be offset by any preceding marker. This rewrite is the
+  // model's-eye view, so it runs ONLY in 'model' mode — in 'full' mode the
+  // original tool results are shown un-blanked.
+  if (mode === 'model' && microCutoff > 0) {
+    let historyIndex = 0;
+    for (const pm of messages) {
+      if (!isHistoryEntry(pm)) continue;
+      if (historyIndex >= microCutoff) break;
+      historyIndex++;
+      const m = pm.message;
+      if (
+        m.role === 'tool' &&
+        m.toolCallId !== undefined &&
+        estimateContentTokens(m.content) >= MICRO_MIN_CONTENT_TOKENS
+      ) {
+        pm.message = { ...m, content: [{ type: 'text', text: MICRO_TRUNCATED_MARKER }] };
+      }
+    }
+  }
+
+  return {
+    messages,
+    usage,
+    contextTokens,
+    config,
+    permission: { mode: permissionMode },
+    planMode: { active: planActive, id: planId },
+    goal,
+    swarm,
+  };
+}
+
+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;
+}
+
+const MICRO_TRUNCATED_MARKER = '[Old tool result content cleared]';
+const MICRO_MIN_CONTENT_TOKENS = 100;
+
+/** Replicates the engine's per-char token weighting exactly, over the same
+ *  `text` + `think` parts its gate counts. The engine
+ *  (`packages/agent-core-v2/src/llm-adapter/contract/tokens.ts`) sums per-part
+ *  estimates, each
+ *  `estimateTokens(s) = Math.ceil(asciiCount / 4) + nonAsciiCount` (ASCII ~4
+ *  chars/token, every non-ASCII/CJK code point a full token); other part types
+ *  contribute 0. Matching it ensures Chinese-heavy tool results blank at the
+ *  same gate as the agent. */
+function estimateTokens(text: string): number {
+  let asciiCount = 0;
+  let nonAsciiCount = 0;
+  for (const char of text) {
+    if (char.codePointAt(0)! <= 127) {
+      asciiCount++;
+    } else {
+      nonAsciiCount++;
+    }
+  }
+  return Math.ceil(asciiCount / 4) + nonAsciiCount;
+}
+
+function estimateContentTokens(content: readonly ContentPart[]): number {
+  let total = 0;
+  for (const p of content) {
+    if (p.type === 'text') total += estimateTokens(p.text);
+    else if (p.type === 'think') total += estimateTokens(p.think);
+  }
+  return total;
+}
+
+/** True for messages that correspond to a real `_history` entry —
+ *  i.e. `append_message` and `compaction_summary` (the summary IS in `_history`).
+ *  The synthetic UI-only markers (`undo` / `clear`) are NOT in `_history`, so
+ *  index-based operations that mirror the engine (compaction slice, micro-
+ *  compaction cutoff) must skip them to stay aligned with engine indices. */
+function isHistoryEntry(pm: ProjectedMessage): boolean {
+  return pm.source !== 'undo' && pm.source !== 'clear';
+}
+
+function modelFacingMessage(message: ContextMessage): ContextMessage {
+  if (message.role !== 'tool') return message;
+  return {
+    ...message,
+    content: renderToolResultForModel({
+      output: message.content,
+      isError: message.isError,
+      note: message.note,
+    }),
+    note: undefined,
+  };
+}
+
+/** v1 wires tag background-task prompts `origin.kind === 'background_task'`;
+ *  v2 renamed the kind to 'task' (same status literals). Normalize on ingest
+ *  so the engine's undo helper and the web see one vocabulary. */
+function normalizeLegacyOrigin(message: ContextMessage): ContextMessage {
+  const origin = message.origin as { readonly kind: string } | undefined;
+  if (origin?.kind !== 'background_task') return message;
+  return { ...message, origin: { ...origin, kind: 'task' } as ContextMessage['origin'] };
+}
+
+/** Text rendering of a ContextMessage's content parts, used to surface the
+ *  legacy `context.apply_compaction` variant whose summary is a message. */
+function contextMessageText(message: ContextMessage): string {
+  return message.content
+    .filter((part) => part.type === 'text')
+    .map((part) => part.text)
+    .join('\n');
+}
diff --git a/apps/vis/server/src/lib/cron-store.ts b/apps/vis/server/src/lib/cron-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33c8c8575cfea23a889403c17bdab3dfab192ac8
--- /dev/null
+++ b/apps/vis/server/src/lib/cron-store.ts
@@ -0,0 +1,122 @@
+// apps/vis/server/src/lib/cron-store.ts
+//
+// Read-only reader for cron tasks. v2 persists cron state as durable wire
+// records (`cron.add` / `cron.delete` / `cron.cursor`) inside each agent's
+// `wire.jsonl` (`packages/agent-core-v2/src/features/cron/`); v1 wrote
+// `<agentDir>/cron/<id>.json` files instead. vis reads both: legacy files
+// first, then the wire fold on top, so a session written by either engine
+// (or carried across both) lists its cron tasks. The visualizer never
+// writes anything.
+
+import { readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+import type { CronTask } from './agent-record-types';
+import { readAgentWire } from './wire-reader';
+
+/** Cron id format: 8 lowercase hex chars (legacy v1 ids) or a 26-char ULID
+ *  (v2 ids) — mirror of the engine's `CRON_ID_REGEX`
+ *  (`features/cron/cronService.ts`). */
+const VALID_CRON_ID = /^(?:[0-9a-f]{8}|[0-9A-HJKMNP-TV-Z]{26})$/i;
+
+export function isSafeCronId(id: string): boolean {
+  return VALID_CRON_ID.test(id);
+}
+
+function cronDirOf(agentDir: string): string {
+  return join(agentDir, 'cron');
+}
+
+/**
+ * Enumerate all cron tasks for one agent homedir, sorted by creation time
+ * (oldest first, matching how a user scheduled them).
+ *
+ * Legacy `<agentDir>/cron/*.json` files whose names don't match
+ * `VALID_CRON_ID`, fail to parse, or miss required fields are skipped;
+ * a missing/unreadable `wire.jsonl` contributes no records.
+ */
+export async function listCronTasks(agentDir: string): Promise<CronTask[]> {
+  const byId = new Map<string, CronTask>();
+  for (const task of await listCronTaskFiles(agentDir)) {
+    byId.set(task.id, task);
+  }
+  await foldCronWireInto(agentDir, byId);
+  return [...byId.values()].sort((a, b) => a.createdAt - b.createdAt);
+}
+
+/** Legacy v1 layout: one JSON file per task under `<agentDir>/cron/`. */
+async function listCronTaskFiles(agentDir: string): Promise<CronTask[]> {
+  const dir = cronDirOf(agentDir);
+  let entries: import('node:fs').Dirent[];
+  try {
+    entries = await readdir(dir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const out: CronTask[] = [];
+  for (const entry of entries) {
+    if (!entry.isFile() || !entry.name.endsWith('.json')) continue;
+    const id = entry.name.slice(0, -'.json'.length);
+    if (!VALID_CRON_ID.test(id)) continue;
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(await readFile(join(dir, entry.name), 'utf8'));
+    } catch {
+      continue;
+    }
+    if (isCronTask(parsed)) out.push(parsed);
+  }
+  return out;
+}
+
+/** v2 layout: fold the agent's wire records — `cron.add` upserts,
+ *  `cron.delete` removes, `cron.cursor` advances `lastFiredAt`. The fold
+ *  applies on top of the legacy-file state, so the wire (the engine's
+ *  authoritative journal) wins for tasks present in both. */
+async function foldCronWireInto(agentDir: string, byId: Map<string, CronTask>): Promise<void> {
+  let records;
+  try {
+    ({ records } = await readAgentWire(join(agentDir, 'wire.jsonl')));
+  } catch {
+    return;
+  }
+  for (const entry of records) {
+    const rec = entry.data;
+    switch (rec.type) {
+      case 'cron.add':
+        if (isCronTask(rec.task)) byId.set(rec.task.id, rec.task);
+        break;
+      case 'cron.delete': {
+        // Tolerate hand-edited / partially corrupted wires: the reader only
+        // validates the record's `type`, so guard the payload shape before
+        // iterating, the same way `cron.add` goes through `isCronTask`.
+        const ids: unknown = rec.ids;
+        if (Array.isArray(ids)) {
+          for (const id of ids) if (typeof id === 'string') byId.delete(id);
+        }
+        break;
+      }
+      case 'cron.cursor': {
+        const id: unknown = rec.id;
+        const lastFiredAt: unknown = rec.lastFiredAt;
+        if (typeof id !== 'string' || typeof lastFiredAt !== 'number') break;
+        const task = byId.get(id);
+        if (task !== undefined) byId.set(id, { ...task, lastFiredAt });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+}
+
+function isCronTask(value: unknown): value is CronTask {
+  if (typeof value !== 'object' || value === null) return false;
+  const o = value as Record<string, unknown>;
+  return (
+    typeof o['id'] === 'string' &&
+    typeof o['cron'] === 'string' &&
+    typeof o['prompt'] === 'string' &&
+    typeof o['createdAt'] === 'number'
+  );
+}
diff --git a/apps/vis/server/src/lib/import-store.ts b/apps/vis/server/src/lib/import-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..724b7c3b4cbf85cd564fe842e74380083aeb5fcc
--- /dev/null
+++ b/apps/vis/server/src/lib/import-store.ts
@@ -0,0 +1,184 @@
+// apps/vis/server/src/lib/import-store.ts
+//
+// Imported debug bundles (`/export-debug-zip` zips) live under
+// `<home>/imported/<importId>/`, unzipped to the same on-disk shape as a real
+// session directory (state.json, agents/<id>/wire.jsonl, tasks/, cron/, logs/)
+// plus the bundle's `manifest.json`. Because the layout matches a session
+// directory, every existing read path (wire / context / tasks / cron / blobs /
+// logs) works against an imported session once `session-store` resolves its
+// directory — see `findSessionDir`.
+//
+// This module owns ONLY: id allocation, safe extraction, validation, the
+// vis-side `import-meta.json` sidecar, enumeration, and deletion. Summary /
+// detail construction stays in `session-store` so imported and local sessions
+// share one code path.
+
+import { randomBytes } from 'node:crypto';
+import { mkdir, readFile, readdir, rm, stat, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+import type { ImportInfo, ImportManifest } from './agent-record-types';
+import { extractZip, ZipImportError } from './zip-import';
+
+const IMPORT_ID_RE = /^imp_[0-9a-f]{12}$/;
+const META_FILE = 'import-meta.json';
+
+export function isImportId(id: string): boolean {
+  return IMPORT_ID_RE.test(id);
+}
+
+export function importedRootOf(home: string): string {
+  return join(home, 'imported');
+}
+
+export function importedDirOf(home: string, importId: string): string {
+  if (!isImportId(importId)) throw new ZipImportError(`invalid import id: "${importId}"`);
+  return join(importedRootOf(home), importId);
+}
+
+function newImportId(): string {
+  return `imp_${randomBytes(6).toString('hex')}`;
+}
+
+/**
+ * Extract a debug zip into a fresh `imported/<id>/` directory and validate it
+ * looks like a session bundle. On any failure the partial directory is removed
+ * so a bad upload never lingers in the imported list. Returns the bundle's
+ * `import-meta.json` contents.
+ */
+export async function importSessionZip(
+  home: string,
+  zipBuffer: Buffer,
+  originalName: string | null,
+  now: Date,
+): Promise<ImportInfo> {
+  const importId = newImportId();
+  const dir = importedDirOf(home, importId);
+  await mkdir(dir, { recursive: true });
+
+  try {
+    await extractZip(zipBuffer, dir);
+
+    // A debug bundle must contain a main wire; without it there is nothing to
+    // visualize. `state.json` / `manifest.json` are best-effort.
+    const hasMainWire = await pathExists(join(dir, 'agents', 'main', 'wire.jsonl'));
+    if (!hasMainWire) {
+      throw new ZipImportError(
+        'zip does not look like a kimi-code session bundle (missing agents/main/wire.jsonl)',
+      );
+    }
+
+    const manifest = await readManifest(dir);
+    const meta: ImportInfo = {
+      importId,
+      importedAt: now.toISOString(),
+      originalName: originalName !== null && originalName.length > 0 ? originalName : null,
+      manifest,
+    };
+    await writeFile(join(dir, META_FILE), JSON.stringify(meta, null, 2), 'utf8');
+    return meta;
+  } catch (error) {
+    await rm(dir, { recursive: true, force: true }).catch(() => {});
+    throw error instanceof ZipImportError ? error : new ZipImportError((error as Error).message);
+  }
+}
+
+/** Enumerate imported bundle ids (newest-first by directory mtime). */
+export async function listImportedIds(home: string): Promise<string[]> {
+  const root = importedRootOf(home);
+  let entries: import('node:fs').Dirent[];
+  try {
+    entries = await readdir(root, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const ids = entries
+    .filter((e) => e.isDirectory() && isImportId(e.name))
+    .map((e) => e.name);
+  const withMtime = await Promise.all(
+    ids.map(async (id) => {
+      const mtime = await stat(join(root, id)).then((s) => s.mtimeMs).catch(() => 0);
+      return { id, mtime };
+    }),
+  );
+  return withMtime.toSorted((a, b) => b.mtime - a.mtime).map((x) => x.id);
+}
+
+export async function readImportMeta(home: string, importId: string): Promise<ImportInfo | null> {
+  try {
+    const raw = await readFile(join(importedDirOf(home, importId), META_FILE), 'utf8');
+    const meta = JSON.parse(raw) as ImportInfo;
+    // The sidecar is vis-written, but re-sanitize the manifest in case the
+    // imported directory was hand-edited, so a corrupt type cannot reach the
+    // session list and crash the UI.
+    return { ...meta, manifest: meta.manifest ? sanitizeManifest(meta.manifest) : null };
+  } catch {
+    return null;
+  }
+}
+
+export async function deleteImported(home: string, importId: string): Promise<boolean> {
+  if (!isImportId(importId)) return false;
+  const dir = importedDirOf(home, importId);
+  if (!(await pathExists(dir))) return false;
+  await rm(dir, { recursive: true, force: true });
+  return true;
+}
+
+async function readManifest(dir: string): Promise<ImportManifest | null> {
+  try {
+    return sanitizeManifest(JSON.parse(await readFile(join(dir, 'manifest.json'), 'utf8')));
+  } catch {
+    return null;
+  }
+}
+
+/** Declared string fields of {@link ImportManifest}. */
+const MANIFEST_STRING_FIELDS = [
+  'sessionId', 'exportedAt', 'kimiCodeVersion', 'wireProtocolVersion', 'os',
+  'nodejsVersion', 'sessionFirstActivity', 'sessionLastActivity', 'title',
+  'workspaceDir', 'sessionLogPath', 'globalLogPath', 'desktopLogPath',
+  'webLogPath', 'desktopVersion', 'installSource',
+] as const;
+
+const SHELL_ENV_STRING_FIELDS = [
+  'term',
+  'termProgram',
+  'termProgramVersion',
+  'multiplexer',
+  'shell',
+] as const;
+
+/**
+ * Coerce an untrusted manifest object so every declared string field is either
+ * a string or absent. A type-corrupt bundle (e.g. `{ "workspaceDir": 123 }`)
+ * would otherwise propagate a non-string into `SessionSummary.workDir`, where
+ * the session rail calls `.split('/')` and crashes the whole list.
+ */
+function sanitizeManifest(raw: unknown): ImportManifest | null {
+  if (typeof raw !== 'object' || raw === null) return null;
+  const o = raw as Record<string, unknown>;
+  const m: Record<string, unknown> = {};
+  for (const field of MANIFEST_STRING_FIELDS) {
+    if (typeof o[field] === 'string') m[field] = o[field];
+  }
+  const shellEnv = o['shellEnv'];
+  if (typeof shellEnv === 'object' && shellEnv !== null && !Array.isArray(shellEnv)) {
+    const source = shellEnv as Record<string, unknown>;
+    const sanitized: Record<string, string> = {};
+    for (const field of SHELL_ENV_STRING_FIELDS) {
+      if (typeof source[field] === 'string') sanitized[field] = source[field];
+    }
+    m['shellEnv'] = sanitized;
+  }
+  return m as ImportManifest;
+}
+
+async function pathExists(p: string): Promise<boolean> {
+  try {
+    await stat(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/apps/vis/server/src/lib/log-reader.ts b/apps/vis/server/src/lib/log-reader.ts
new file mode 100644
index 0000000000000000000000000000000000000000..060e6fc94a705cdabdfbf33006507531c56f9d5c
--- /dev/null
+++ b/apps/vis/server/src/lib/log-reader.ts
@@ -0,0 +1,123 @@
+// apps/vis/server/src/lib/log-reader.ts
+//
+// Parse a kimi-code diagnostic log into structured lines for the Logs view.
+//
+// Lines look like:
+//   2026-06-15T05:32:08.722Z INFO  llm config  turnStep=0.1 provider=openai …
+// i.e. `<ISO time> <LEVEL> <message>  <key=value …>`. Anything that does not
+// match (continuation lines, stack traces) is kept verbatim as a level-less,
+// time-less message so nothing is dropped.
+
+import { readdir, readFile } from 'node:fs/promises';
+import { basename, dirname, join } from 'node:path';
+
+import type { LogLine } from './agent-record-types';
+
+/** Cap served lines so a multi-hundred-MB log cannot blow up the response.
+ *  When exceeded we keep the TAIL (most recent), where failures usually are. */
+const MAX_LINES = 20_000;
+
+const LINE_RE = /^(\d{4}-\d{2}-\d{2}T[\d:.]+Z)\s+([A-Za-z]+)\s+(.*)$/;
+const FIELD_START_RE = /(^|\s)[A-Za-z_][\w.-]*=/;
+const FIELD_RE = /([A-Za-z_][\w.-]*)=(\S+)/g;
+
+export interface LogReadResult {
+  lines: LogLine[];
+  truncated: boolean;
+}
+
+/**
+ * Discover a base log file plus its rotated siblings (`<base>`, `<base>.1`,
+ * `<base>.2`, …) in chronological order, oldest first.
+ *
+ * The engine rotates by renaming the active file to `.1` and bumping older
+ * archives to higher numbers (`_base/log/fileLog.ts` rotate()), so the
+ * un-suffixed file is newest and `.N` is oldest. A bundle whose active log
+ * has already rotated away may contain only `<base>.1`, etc. — which the
+ * Logs tab must still find.
+ */
+export async function discoverLogFiles(baseLogPath: string): Promise<string[]> {
+  const dir = dirname(baseLogPath);
+  const base = basename(baseLogPath);
+  let names: string[];
+  try {
+    names = (await readdir(dir, { withFileTypes: true }))
+      .filter((e) => e.isFile())
+      .map((e) => e.name);
+  } catch {
+    return [];
+  }
+  let hasActive = false;
+  const rotated: { n: number; name: string }[] = [];
+  const prefix = `${base}.`;
+  for (const name of names) {
+    if (name === base) {
+      hasActive = true;
+      continue;
+    }
+    if (name.startsWith(prefix)) {
+      const suffix = name.slice(prefix.length);
+      if (/^\d+$/.test(suffix)) rotated.push({ n: Number(suffix), name });
+    }
+  }
+  rotated.sort((a, b) => b.n - a.n); // highest index == oldest → first
+  const ordered = rotated.map((r) => join(dir, r.name));
+  if (hasActive) ordered.push(join(dir, base)); // active is newest → last
+  return ordered;
+}
+
+/**
+ * Read and parse the given log files in order, concatenated into one structured
+ * stream with continuous line numbers. Returns null when none could be read.
+ * The MAX_LINES tail cap applies across the combined set.
+ */
+export async function readLogs(
+  paths: readonly string[],
+  maxLines = MAX_LINES,
+): Promise<LogReadResult | null> {
+  const allLines: string[] = [];
+  let read = 0;
+  for (const path of paths) {
+    let raw: string;
+    try {
+      raw = await readFile(path, 'utf8');
+    } catch {
+      continue;
+    }
+    read += 1;
+    const lines = raw.split(/\r?\n/);
+    // Drop a single trailing empty line from each file's final newline.
+    if (lines.length > 0 && lines.at(-1) === '') lines.pop();
+    for (const line of lines) allLines.push(line);
+  }
+  if (read === 0) return null;
+
+  const truncated = allLines.length > maxLines;
+  const startLineNo = truncated ? allLines.length - maxLines : 0;
+  const slice = truncated ? allLines.slice(startLineNo) : allLines;
+
+  const lines: LogLine[] = slice.map((text, i) => parseLogLine(text, startLineNo + i + 1));
+  return { lines, truncated };
+}
+
+export function parseLogLine(raw: string, lineNo: number): LogLine {
+  const m = LINE_RE.exec(raw);
+  if (m === null) {
+    return { lineNo, time: null, level: null, message: raw, fields: {}, raw };
+  }
+  const time = m[1]!;
+  const level = m[2]!.toUpperCase();
+  const rest = m[3]!;
+
+  const fields: Record<string, string> = {};
+  let message = rest;
+  const fieldStart = rest.search(FIELD_START_RE);
+  if (fieldStart >= 0) {
+    message = rest.slice(0, fieldStart).trim();
+    const fieldsPart = rest.slice(fieldStart);
+    for (const fm of fieldsPart.matchAll(FIELD_RE)) {
+      fields[fm[1]!] = fm[2]!;
+    }
+  }
+  return { lineNo, time, level, message: message.trim(), fields, raw };
+}
diff --git a/apps/vis/server/src/lib/reveal.ts b/apps/vis/server/src/lib/reveal.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0cf1aa9cd99b75c6fc5aa78d674fb854e7c64389
--- /dev/null
+++ b/apps/vis/server/src/lib/reveal.ts
@@ -0,0 +1,44 @@
+import { spawn } from 'node:child_process';
+
+export interface RevealCommand {
+  readonly command: string;
+  readonly args: readonly string[];
+}
+
+/** Resolve the platform-specific "reveal in file manager" command for
+ *  the given absolute path. Kept pure (no IO) so it can be unit-tested. */
+export function revealCommandFor(path: string, platform: NodeJS.Platform = process.platform): RevealCommand {
+  switch (platform) {
+    case 'darwin':
+      return { command: 'open', args: [path] };
+    case 'win32':
+      // `start` is a cmd built-in; the empty title `""` prevents the path
+      // from being mistaken for a window title.
+      return { command: 'cmd', args: ['/c', 'start', '""', path] };
+    default:
+      return { command: 'xdg-open', args: [path] };
+  }
+}
+
+/** Spawn the OS file manager to reveal `path`. Resolves once the launcher
+ *  process has started; rejects only if the launcher itself fails to
+ *  spawn (missing binary etc.) — not if it later fails to find the path,
+ *  since the launcher exits asynchronously after we've detached. */
+export async function revealInOs(path: string): Promise<void> {
+  const { command, args } = revealCommandFor(path);
+  return new Promise<void>((resolve, reject) => {
+    let settled = false;
+    const child = spawn(command, args, { detached: true, stdio: 'ignore' });
+    child.once('error', (err) => {
+      if (settled) return;
+      settled = true;
+      reject(err);
+    });
+    child.once('spawn', () => {
+      if (settled) return;
+      settled = true;
+      child.unref();
+      resolve();
+    });
+  });
+}
diff --git a/apps/vis/server/src/lib/task-store.ts b/apps/vis/server/src/lib/task-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4caeb71c672757a4613bea5974f967c30745b98b
--- /dev/null
+++ b/apps/vis/server/src/lib/task-store.ts
@@ -0,0 +1,400 @@
+// apps/vis/server/src/lib/task-store.ts
+//
+// Read-only reader for background tasks, persisted by the engine under each
+// spawning agent's homedir at `<agentDir>/tasks/<taskId>.json`
+// (+ `tasks/<taskId>/output.log`). Main-agent reads may also receive the
+// legacy session root as a fallback.
+//
+// The visualizer never writes these files; it mirrors the engine's on-disk
+// layout (`packages/agent-core-v2/src/agent/task/persist.ts`) for reading only:
+//   - the same `VALID_TASK_ID` guard, so a corrupt / hand-edited filename
+//     cannot turn a log path into a traversal primitive;
+//   - the same legacy snake_case → current camelCase normalization, so old
+//     sessions list identically to how the CLI would list them.
+
+import { open, readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+import type {
+  BackgroundTaskInfo,
+  BackgroundTaskStatus,
+} from './agent-record-types';
+
+/** Task id format: `{prefix}-{8 chars of [0-9a-z]}`. Mirror of the engine's
+ *  `VALID_TASK_ID` (`agent/task/persist.ts`). Enforced before deriving any
+ *  output path so neither `../` nor a legacy `bg_<hex>` id can escape. */
+const VALID_TASK_ID = /^[a-z0-9]+(?:-[a-z0-9]+)*-[0-9a-z]{8}$/;
+
+export function isSafeTaskId(id: string): boolean {
+  return VALID_TASK_ID.test(id);
+}
+
+function tasksDirOf(agentDir: string): string {
+  return join(agentDir, 'tasks');
+}
+
+function taskOutputFile(agentDir: string, taskId: string): string {
+  if (!VALID_TASK_ID.test(taskId)) {
+    throw new Error(`Invalid task id: "${taskId}"`);
+  }
+  return join(tasksDirOf(agentDir), taskId, 'output.log');
+}
+
+/**
+ * Enumerate all persisted background tasks for a session, normalized to the
+ * current `BackgroundTaskInfo` shape and sorted newest-first by start time.
+ *
+ * Silently skips: filenames that don't match `VALID_TASK_ID`, files that fail
+ * to read/parse, and records that are neither the current nor the legacy
+ * task shape — matching the engine's tolerant `listTasks`.
+ */
+export async function listBackgroundTasks(
+  agentDir: string,
+  fallbackDir?: string,
+): Promise<BackgroundTaskInfo[]> {
+  const primary = await listBackgroundTasksAt(agentDir);
+  const out = [...primary.tasks];
+  if (fallbackDir !== undefined) {
+    const fallback = await listBackgroundTasksAt(fallbackDir);
+    for (const task of fallback.tasks) {
+      if (!primary.reservedIds.has(task.keyId)) out.push(task);
+    }
+  }
+  // Newest first; tasks with no start time sort last.
+  out.sort((a, b) => (b.task.startedAt ?? 0) - (a.task.startedAt ?? 0));
+  return out.map((entry) => entry.task);
+}
+
+interface ListedTask {
+  keyId: string;
+  task: BackgroundTaskInfo;
+}
+
+async function listBackgroundTasksAt(
+  agentDir: string,
+): Promise<{ reservedIds: Set<string>; tasks: ListedTask[] }> {
+  const dir = tasksDirOf(agentDir);
+  let entries: import('node:fs').Dirent[];
+  try {
+    entries = await readdir(dir, { withFileTypes: true });
+  } catch {
+    return { reservedIds: new Set(), tasks: [] };
+  }
+  const reservedIds = new Set<string>();
+  const tasks: ListedTask[] = [];
+  for (const entry of entries) {
+    if (!entry.name.endsWith('.json')) continue;
+    const id = entry.name.slice(0, -'.json'.length);
+    if (!VALID_TASK_ID.test(id)) continue;
+    reservedIds.add(id);
+    if (!entry.isFile()) continue;
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(await readFile(join(dir, entry.name), 'utf8'));
+    } catch {
+      continue;
+    }
+    if (!isReadablePersistedTask(parsed)) continue;
+    const task = normalizePersistedTask(parsed);
+    if (task === undefined || task.taskId !== id) continue;
+    tasks.push({ keyId: id, task });
+  }
+  return { reservedIds, tasks };
+}
+
+export interface TaskOutputMetadata {
+  exists: boolean;
+  size: number;
+}
+
+/** Presence and byte size of a task's `output.log`. */
+export async function taskOutputMetadata(
+  agentDir: string,
+  taskId: string,
+  fallbackDir?: string,
+): Promise<TaskOutputMetadata> {
+  const handle = await openTaskOutput(agentDir, taskId, fallbackDir);
+  if (handle === undefined) return { exists: false, size: 0 };
+  try {
+    return { exists: true, size: (await handle.stat()).size };
+  } catch {
+    return { exists: false, size: 0 };
+  } finally {
+    await handle.close();
+  }
+}
+
+/** Byte size of a task's `output.log` (0 when absent, empty, or unreadable). */
+export async function taskOutputSizeBytes(
+  agentDir: string,
+  taskId: string,
+  fallbackDir?: string,
+): Promise<number> {
+  return (await taskOutputMetadata(agentDir, taskId, fallbackDir)).size;
+}
+
+export interface TaskOutputWindow {
+  /** Byte offset this window starts at (clamped to >= 0). */
+  offset: number;
+  /** Byte offset immediately after this window — pass it as the next
+   *  `offset` to page forward. Exact (server-computed bytesRead), so paging
+   *  never drifts even if a window boundary splits a multi-byte char. */
+  nextOffset: number;
+  /** Total byte size of the log on disk. */
+  size: number;
+  /** UTF-8 decoded window content. */
+  content: string;
+  /** True when this window reaches EOF. */
+  eof: boolean;
+}
+
+/**
+ * Read a byte window of a task's `output.log`.
+ *
+ * Reads at most `maxBytes` bytes starting at byte `offset`. A window past EOF
+ * is clamped to whatever remains; an offset at/after EOF yields empty content.
+ * Mirrors the engine's `readTaskOutputBytes` so large logs page identically.
+ */
+export async function readTaskOutput(
+  agentDir: string,
+  taskId: string,
+  offset: number,
+  maxBytes: number,
+  fallbackDir?: string,
+): Promise<TaskOutputWindow> {
+  const start = Math.max(0, Math.trunc(offset));
+  const limit = Math.max(0, Math.trunc(maxBytes));
+  const handle = await openTaskOutput(agentDir, taskId, fallbackDir);
+  if (handle === undefined) {
+    return { offset: start, nextOffset: start, size: 0, content: '', eof: true };
+  }
+  try {
+    const size = (await handle.stat()).size;
+    if (limit === 0 || start >= size) {
+      return { offset: start, nextOffset: start, size, content: '', eof: start >= size };
+    }
+    const length = Math.min(limit, size - start);
+    const buffer = Buffer.allocUnsafe(length);
+    const { bytesRead } = await handle.read(buffer, 0, length, start);
+    const content = buffer.toString('utf-8', 0, bytesRead);
+    const nextOffset = start + bytesRead;
+    return { offset: start, nextOffset, size, content, eof: nextOffset >= size };
+  } catch {
+    return { offset: start, nextOffset: start, size: 0, content: '', eof: true };
+  } finally {
+    await handle.close();
+  }
+}
+
+async function openTaskOutput(
+  agentDir: string,
+  taskId: string,
+  fallbackDir?: string,
+): Promise<Awaited<ReturnType<typeof open>> | undefined> {
+  try {
+    return await open(taskOutputFile(agentDir, taskId), 'r');
+  } catch (error) {
+    if (!isMissingPath(error) || fallbackDir === undefined) return undefined;
+  }
+  try {
+    return await open(taskOutputFile(fallbackDir, taskId), 'r');
+  } catch {
+    return undefined;
+  }
+}
+
+function isMissingPath(error: unknown): boolean {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'code' in error &&
+    (error as NodeJS.ErrnoException).code === 'ENOENT'
+  );
+}
+
+// ── normalization (ported from agent-core-v2/agent/task/persist.ts) ────────
+
+type ReadablePersistedTask = Record<string, unknown>;
+
+interface CurrentTaskBase {
+  readonly taskId: string;
+  readonly description: string;
+  readonly status: BackgroundTaskStatus;
+  readonly detached: boolean;
+  readonly startedAt: number;
+  readonly endedAt: number | null;
+  readonly stopReason?: string;
+  readonly terminalNotificationSuppressed?: boolean;
+  readonly resumeReminded?: boolean;
+  readonly timeoutMs?: number;
+}
+
+const CURRENT_TASK_STATUSES: ReadonlySet<BackgroundTaskStatus> = new Set([
+  'running',
+  'completed',
+  'failed',
+  'timed_out',
+  'killed',
+  'lost',
+]);
+
+function normalizePersistedTask(task: ReadablePersistedTask): BackgroundTaskInfo | undefined {
+  const current = isLegacyPersistedTask(task) ? legacyPersistedTaskToCurrent(task) : task;
+  return decodeCurrentPersistedTask(current);
+}
+
+function decodeCurrentPersistedTask(task: ReadablePersistedTask): BackgroundTaskInfo | undefined {
+  const base = decodeCurrentTaskBase(task);
+  if (base === undefined) return undefined;
+
+  switch (task['kind']) {
+    case 'process':
+      if (
+        typeof task['command'] !== 'string' ||
+        !isFiniteNumber(task['pid']) ||
+        !isNullableFiniteNumber(task['exitCode'])
+      ) {
+        return undefined;
+      }
+      return {
+        ...base,
+        kind: 'process',
+        command: task['command'],
+        pid: task['pid'],
+        exitCode: task['exitCode'],
+        parentToolCallId: optionalString(task['parentToolCallId']),
+      };
+    case 'agent':
+      return {
+        ...base,
+        kind: 'agent',
+        agentId: optionalString(task['agentId']),
+        subagentType: optionalString(task['subagentType']),
+        parentToolCallId: optionalString(task['parentToolCallId']),
+        model: optionalString(task['model']),
+        thinkingEffort: optionalString(task['thinkingEffort']),
+        stopCode: optionalString(task['stopCode']),
+      };
+    case 'question':
+      if (!isFiniteNumber(task['questionCount'])) return undefined;
+      return {
+        ...base,
+        kind: 'question',
+        questionCount: task['questionCount'],
+        toolCallId: optionalString(task['toolCallId']),
+      };
+    default:
+      return undefined;
+  }
+}
+
+function decodeCurrentTaskBase(task: ReadablePersistedTask): CurrentTaskBase | undefined {
+  if (
+    typeof task['taskId'] !== 'string' ||
+    !VALID_TASK_ID.test(task['taskId']) ||
+    typeof task['description'] !== 'string' ||
+    !isCurrentTaskStatus(task['status']) ||
+    !isFiniteNumber(task['startedAt']) ||
+    !isNullableFiniteNumber(task['endedAt'])
+  ) {
+    return undefined;
+  }
+  return {
+    taskId: task['taskId'],
+    description: task['description'],
+    status: task['status'],
+    detached: optionalBoolean(task['detached']) ?? true,
+    startedAt: task['startedAt'],
+    endedAt: task['endedAt'],
+    stopReason: optionalString(task['stopReason']),
+    terminalNotificationSuppressed: optionalBoolean(task['terminalNotificationSuppressed']),
+    resumeReminded: optionalBoolean(task['resumeReminded']),
+    timeoutMs: optionalNumber(task['timeoutMs']),
+  };
+}
+
+function legacyPersistedTaskToCurrent(
+  task: ReadablePersistedTask & { readonly task_id: string },
+): ReadablePersistedTask {
+  const base: ReadablePersistedTask = {
+    taskId: task.task_id,
+    description: task['description'],
+    status: legacyStatusToCurrent(task),
+    detached: true,
+    startedAt: task['started_at'],
+    endedAt: task['ended_at'],
+    stopReason: optionalNonEmptyString(task['stop_reason']),
+    timeoutMs: optionalNumber(task['timeout_ms']),
+  };
+  if (task.task_id.startsWith('agent-')) {
+    return {
+      ...base,
+      kind: 'agent',
+      agentId: optionalNonEmptyString(task['agent_id']),
+      subagentType: optionalNonEmptyString(task['subagent_type']),
+    };
+  }
+  return {
+    ...base,
+    kind: 'process',
+    command: task['command'],
+    pid: task['pid'],
+    exitCode: task['exit_code'],
+  };
+}
+
+function legacyStatusToCurrent(task: ReadablePersistedTask): unknown {
+  if (task['status'] === 'awaiting_approval') return 'running';
+  if (task['status'] === 'failed' && task['timed_out'] === true) return 'timed_out';
+  return task['status'];
+}
+
+function isReadablePersistedTask(obj: unknown): obj is ReadablePersistedTask {
+  return (
+    isRecord(obj) &&
+    (typeof obj['taskId'] === 'string' || typeof obj['task_id'] === 'string')
+  );
+}
+
+function isLegacyPersistedTask(
+  task: ReadablePersistedTask,
+): task is ReadablePersistedTask & { readonly task_id: string } {
+  return typeof task['task_id'] === 'string';
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function optionalNonEmptyString(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+function optionalString(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined;
+}
+
+function optionalBoolean(value: unknown): boolean | undefined {
+  return typeof value === 'boolean' ? value : undefined;
+}
+
+function optionalNumber(value: unknown): number | undefined {
+  return isFiniteNumber(value) ? value : undefined;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+function isNullableFiniteNumber(value: unknown): value is number | null {
+  return value === null || isFiniteNumber(value);
+}
+
+function isCurrentTaskStatus(value: unknown): value is BackgroundTaskStatus {
+  return (
+    typeof value === 'string' &&
+    CURRENT_TASK_STATUSES.has(value as BackgroundTaskStatus)
+  );
+}
diff --git a/apps/vis/server/src/lib/web-asset.ts b/apps/vis/server/src/lib/web-asset.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1504e3092dd7e560e132dfec21fe3c2f03727c23
--- /dev/null
+++ b/apps/vis/server/src/lib/web-asset.ts
@@ -0,0 +1,17 @@
+/** A pre-gzipped self-contained SPA HTML page, served from memory. */
+export interface WebAsset {
+  /** gzip-compressed bytes of the single-file index.html. */
+  readonly gzipped: Uint8Array;
+}
+
+/** Serve the embedded SPA for any non-/api GET (SPA fallback: same page for
+ *  every client route, since the bundle is a single self-contained HTML). */
+export function serveWebAsset(asset: WebAsset): Response {
+  return new Response(asset.gzipped, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      'content-encoding': 'gzip',
+      'cache-control': 'no-store',
+    },
+  });
+}
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 0000000000000000000000000000000000000000..60aa7bb03899a39de51b9c3328bc9eeca238bc59
--- /dev/null
+++ b/apps/vis/server/src/lib/wire-reader.ts
@@ -0,0 +1,168 @@
+import { createReadStream } from 'node:fs';
+import { basename, dirname } from 'node:path';
+import { createInterface } from 'node:readline';
+
+import {
+  isNewerWireVersion,
+  migrateV1_4ToV1_5,
+  migrateWireRecord,
+  resolveWireMigrations,
+  type WireMigration,
+} from '@moonshot-ai/agent-core-v2/wire/migration/migration';
+
+import type { AgentRecord, WireEntry } from './agent-record-types';
+
+export interface WireReadResult {
+  metadata: { protocolVersion: string; createdAt: number };
+  records: ReadonlyArray<WireEntry>;
+  warnings: string[];
+}
+
+/** Best-effort fallback for a wire file whose declared `protocol_version` is
+ *  below the known migration chain (below 1.0, or otherwise unrecognized-low):
+ *  `resolveWireMigrations` threw for it. We retry from the oldest known version
+ *  (1.0) and warn the caller; if even that fails we pass records through
+ *  unchanged. (Versions at/above the current 1.5 never reach here — they
+ *  resolve to an empty chain and are passed through directly.) */
+function bestEffortMigrations(): readonly WireMigration[] {
+  try {
+    return resolveWireMigrations('1.0');
+  } catch {
+    return [];
+  }
+}
+
+/** Read a single agent's `wire.jsonl`.
+ *
+ *  Each record is returned as a `WireEntry` containing both the on-disk parsed
+ *  form (`raw`) and the migrated current-protocol form (`data`). The reader
+ *  never rejects a file over its `protocol_version`:
+ *    - below-1.0 (or otherwise unrecognized-low) — `resolveWireMigrations`
+ *      throws, so records run through the 1.0-onwards best-effort chain and a
+ *      warning is added to `warnings[]` so the UI can surface the caveat;
+ *    - no metadata header — mirrors core-v2's recovery path by treating the
+ *      journal as v1.4 and applying the v1.4 → v1.5 migration in memory;
+ *    - at/above the current 1.5 (including future versions) — resolves to an
+ *      empty chain, so records are passed through unchanged, with no migration
+ *      and no warning. */
+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;
+  let migrations: readonly WireMigration[] = [];
+  let newerWireVersion = false;
+  const records: WireEntry[] = [];
+  const warnings: string[] = [];
+  const agentId = basename(dirname(path));
+
+  for await (const line of rl) {
+    lineNo += 1;
+    if (line.length === 0) continue;
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(line);
+    } catch (error) {
+      warnings.push(`line ${lineNo}: invalid JSON (${(error 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') {
+        const pv = parsed['protocol_version'];
+        const ca = parsed['created_at'];
+        if (typeof pv !== 'string' || typeof ca !== 'number') {
+          throw new TypeError(`Wire metadata malformed at line ${lineNo}`);
+        }
+        newerWireVersion = isNewerWireVersion(pv);
+        try {
+          migrations = resolveWireMigrations(pv);
+        } catch (error) {
+          warnings.push(
+            `unrecognised protocol_version "${pv}" — parsing as best-effort (${(error as Error).message})`,
+          );
+          migrations = bestEffortMigrations();
+        }
+        metadata = { protocolVersion: pv, createdAt: ca };
+        continue;
+      } else {
+        warnings.push(
+          `line ${lineNo}: missing metadata header — assuming protocol_version "${migrateV1_4ToV1_5.sourceVersion}"`,
+        );
+        migrations = [migrateV1_4ToV1_5];
+        metadata = {
+          protocolVersion: migrateV1_4ToV1_5.sourceVersion,
+          createdAt: 0,
+        };
+      }
+    }
+    const raw = parsed;
+    let migrated: Record<string, unknown>;
+    try {
+      migrated =
+        migrations.length === 0
+          ? structuredClone(raw)
+          : (migrateWireRecord(
+              raw as Record<string, unknown> & { type: string },
+              migrations,
+            ) as Record<string, unknown>);
+    } catch (error) {
+      // A single record that won't migrate is not fatal — keep the raw
+      // payload so the UI can still render whatever fields it understands.
+      warnings.push(
+        `line ${lineNo}: migration failed (${(error as Error).message}); using raw record`,
+      );
+      migrated = structuredClone(raw);
+    }
+    const normalized = newerWireVersion
+      ? migrated
+      : normalizePlanRevisionRecord(migrated, agentId);
+    if (normalized === undefined) {
+      warnings.push(`line ${lineNo}: invalid legacy plan.revision record skipped`);
+      continue;
+    }
+    records.push({ lineNo, data: normalized as AgentRecord, raw });
+  }
+  if (metadata === null) {
+    throw new Error('Wire file is empty (no metadata)');
+  }
+  return { metadata, records, warnings };
+}
+
+function normalizePlanRevisionRecord(
+  record: Record<string, unknown>,
+  agentId: string,
+): Record<string, unknown> | undefined {
+  if (record['type'] !== 'plan.revision' || 'key' in record) return record;
+  const legacyPath = record['path'];
+  if (typeof legacyPath !== 'string') return undefined;
+  const key = extractLegacyPlanRevisionKey(legacyPath, agentId);
+  if (key === undefined) return undefined;
+  const { path: _path, ...rest } = record;
+  return { ...rest, key };
+}
+
+function extractLegacyPlanRevisionKey(path: string, agentId: string): string | undefined {
+  if (path.includes('\\')) return undefined;
+  const segments = path.split('/');
+  if (
+    segments.length < 8 ||
+    segments[0] !== 'sessions' ||
+    segments[3] !== 'agents' ||
+    segments[4] !== agentId ||
+    segments
+      .slice(1, 3)
+      .some((segment) => segment.length === 0 || segment === '.' || segment === '..')
+  ) {
+    return undefined;
+  }
+  const key = segments.slice(5).join('/');
+  return /^plan\/[^/]+\/v[0-9]+\.md$/.test(key) ? key : undefined;
+}
+
+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/start.ts b/apps/vis/server/src/start.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a33cf2ae0b841718c7bbd8a12f103d6aa06fc33
--- /dev/null
+++ b/apps/vis/server/src/start.ts
@@ -0,0 +1,47 @@
+import { serve } from '@hono/node-server';
+
+import { createApp } from './app';
+import { hostForUrl, resolveHost, resolveKimiCodeHome, resolvePort, resolveVisAuthToken } from './config';
+import type { WebAsset } from './lib/web-asset';
+
+export interface StartVisServerOptions {
+  /** Sessions home. Defaults to env KIMI_CODE_HOME, else ~/.kimi-code. */
+  readonly homeDir?: string;
+  /** Port; 0 = auto-pick a free port. Defaults to env PORT, else 3001. */
+  readonly port?: number;
+  readonly host?: string;
+  readonly authToken?: string;
+  readonly webAsset?: WebAsset;
+}
+
+export interface StartedVisServer {
+  readonly port: number;
+  readonly host: string;
+  readonly url: string;
+  readonly close: () => Promise<void>;
+}
+
+export async function startVisServer(
+  opts: StartVisServerOptions = {},
+): Promise<StartedVisServer> {
+  const host = opts.host ?? resolveHost();
+  const authToken = opts.authToken ?? resolveVisAuthToken(host);
+  const homeDir = opts.homeDir ?? resolveKimiCodeHome();
+  const app = await createApp({ authToken, homeDir, webAsset: opts.webAsset });
+  const port = opts.port ?? resolvePort();
+
+  return new Promise<StartedVisServer>((resolveStarted, rejectStarted) => {
+    const server = serve({ fetch: app.fetch, hostname: host, port }, (info) => {
+      resolveStarted({
+        port: info.port,
+        host,
+        url: `http://${hostForUrl(host)}:${info.port}/`,
+        close: () =>
+          new Promise<void>((done, fail) => {
+            server.close((err?: Error) => (err ? fail(err) : done()));
+          }),
+      });
+    });
+    server.once('error', rejectStarted);
+  });
+}
diff --git a/apps/vis/server/src/startup-banner.ts b/apps/vis/server/src/startup-banner.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a32589e89be2d00dcd191eb5a95f88052aa8d722
--- /dev/null
+++ b/apps/vis/server/src/startup-banner.ts
@@ -0,0 +1,16 @@
+import { hostForUrl } from './config';
+
+export interface StartupBannerOptions {
+  readonly authToken?: string;
+  readonly host: string;
+  readonly kimiCodeHome: string;
+  readonly port: number;
+}
+
+export function formatStartupBanner(options: StartupBannerOptions): string {
+  const authStatus = options.authToken === undefined ? 'auth=disabled' : 'auth=required';
+  return (
+    `[vis-server] listening on http://${hostForUrl(options.host)}:${String(options.port)} ` +
+    `(${authStatus}, KIMI_CODE_HOME=${options.kimiCodeHome})\n`
+  );
+}
diff --git a/apps/vis/server/tsconfig.json b/apps/vis/server/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..ff7fe118dbe6391f73f110a5d1fea09b75a81065
--- /dev/null
+++ b/apps/vis/server/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "test", "../../../packages/agent-core-v2/src/env.d.ts"]
+}
diff --git a/apps/vis/server/tsdown.config.ts b/apps/vis/server/tsdown.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..88659c3453d6eb12587033bafe403cf04b5daffc
--- /dev/null
+++ b/apps/vis/server/tsdown.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsdown';
+
+import { rawTextPlugin } from '../../../build/raw-text-plugin.mjs';
+
+export default defineConfig({
+  entry: { server: 'src/index.ts' },
+  format: ['esm'],
+  outDir: 'dist',
+  clean: true,
+  plugins: [rawTextPlugin()],
+  deps: {
+    alwaysBundle: [/^@moonshot-ai\/agent-core-v2/],
+  },
+});
diff --git a/apps/vis/server/vitest.config.ts b/apps/vis/server/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0131797f156d41e0334510a4bca5cd566c6e3a9c
--- /dev/null
+++ b/apps/vis/server/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'vis-server',
+    include: ['test/**/*.test.ts'],
+  },
+});
diff --git a/apps/vis/web/index.html b/apps/vis/web/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..070aafc9b2ff549328fa6bc3c75f2d326c4f3ad3
--- /dev/null
+++ b/apps/vis/web/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#0b0d12" />
+    <title>kimi vis</title>
+    <!-- Pre-paint: resolve saved theme (or system preference) and set
+         data-theme before React hydrates, to avoid a flash of the wrong
+         palette. Kept tiny to not block render. -->
+    <script>
+      (function () {
+        try {
+          var v = localStorage.getItem('vis.theme');
+          var t =
+            v === 'light' || v === 'dark'
+              ? v
+              : window.matchMedia('(prefers-color-scheme: light)').matches
+                ? 'light'
+                : 'dark';
+          document.documentElement.setAttribute('data-theme', t);
+        } catch (_) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      })();
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/vis/web/package.json b/apps/vis/web/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..91be7434d2ac83ac7333ce136054f96c2916278b
--- /dev/null
+++ b/apps/vis/web/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@moonshot-ai/vis-web",
+  "version": "0.1.1",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "imports": {
+    "#/*": {
+      "types": [
+        "./src/*.ts",
+        "./src/*.tsx",
+        "./src/*/index.ts",
+        "./src/*/index.tsx"
+      ],
+      "default": "./src/*"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.74.4",
+    "@tanstack/react-virtual": "^3.13.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.5.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.4",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "tailwindcss": "^4.1.4",
+    "typescript": "6.0.2",
+    "vite": "^6.3.3",
+    "vite-plugin-singlefile": "^2.3.3",
+    "vitest": "4.1.4"
+  }
+}
diff --git a/apps/vis/web/tsconfig.json b/apps/vis/web/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..a63a44b9f59b24ef32705f126a9010205f823bb2
--- /dev/null
+++ b/apps/vis/web/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    // This package type-checks agent-core-v2's source (consumed via source
+    // `exports`), whose services use legacy parameter decorators for DI, so the
+    // experimental decorator transform must be enabled here too.
+    "experimentalDecorators": true,
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    // Unused-locals/params are intentionally NOT enforced here: this package
+    // type-checks agent-core-v2's source (consumed via source `exports`), so these
+    // flags would surface dead code inside agent-core-v2. Matches the repo norm
+    // (root tsconfig and other packages do not set them); oxlint covers unused.
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": false,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}
diff --git a/apps/vis/web/vite.config.ts b/apps/vis/web/vite.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d7488733dc6beb92ca5094b40242771cb11f8948
--- /dev/null
+++ b/apps/vis/web/vite.config.ts
@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { viteSingleFile } from 'vite-plugin-singlefile';
+
+const apiPort = Number(process.env.PORT) || 5174;
+const webPort = Number(process.env.WEB_PORT) || 5173;
+
+// When set, build a single self-contained index.html (JS+CSS inlined) into
+// `dist-single/` so it can be embedded into the kimi CLI. The normal `dist/`
+// build is unaffected.
+const singlefile = process.env.VIS_SINGLEFILE === '1';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    ...(singlefile
+      ? [
+          viteSingleFile({
+            useRecommendedBuildConfig: true,
+            deleteInlinedFiles: true,
+          }),
+        ]
+      : []),
+  ],
+  server: {
+    port: webPort,
+    strictPort: false,
+    proxy: {
+      '/api': {
+        target: `http://localhost:${apiPort}`,
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: singlefile ? 'dist-single' : 'dist',
+    emptyOutDir: true,
+    target: 'es2022',
+  },
+});
diff --git a/apps/vis/web/vitest.config.ts b/apps/vis/web/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f538b76434c2de131014277fff8971c3736f209
--- /dev/null
+++ b/apps/vis/web/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'vis-web',
+    include: ['test/**/*.test.ts', 'src/**/*.test.ts'],
+    environment: 'node',
+  },
+});
diff --git a/apps/vscode/test/extension-host/index.cjs b/apps/vscode/test/extension-host/index.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..2605cdb1b276d5e7e82d680a2f90b2184f69563f
--- /dev/null
+++ b/apps/vscode/test/extension-host/index.cjs
@@ -0,0 +1,109 @@
+const assert = require("node:assert/strict");
+const { readFile, writeFile } = require("node:fs/promises");
+const os = require("node:os");
+const path = require("node:path");
+const vscode = require("vscode");
+
+const EXTENSION_ID = "moonshot-ai.kimi-code";
+const EXPECTED_COMMANDS = [
+  "kimi.clearAllState",
+  "kimi.focusInput",
+  "kimi.insertMention",
+  "kimi.logout",
+  "kimi.migrateLegacyData",
+  "kimi.newConversation",
+  "kimi.openInSideBar",
+  "kimi.openInTab",
+  "kimi.resetKimi",
+  "kimi.showLogs",
+];
+
+exports.run = async function run() {
+  const isolatedHome = process.env.KIMI_VSCODE_SMOKE_OS_HOME;
+  assert.ok(isolatedHome, "isolated OS home must be provided");
+  process.env.HOME = isolatedHome;
+  process.env.USERPROFILE = isolatedHome;
+  const root = path.parse(isolatedHome).root;
+  process.env.HOMEDRIVE = process.platform === "win32" ? root.replace(/[\\/]+$/, "") : root;
+  process.env.HOMEPATH = process.platform === "win32"
+    ? `${path.sep}${isolatedHome.slice(root.length)}`
+    : isolatedHome;
+
+  const extension = vscode.extensions.getExtension(EXTENSION_ID);
+  assert.ok(extension, `${EXTENSION_ID} is not installed in the isolated Extension Host`);
+  const sourceManifest = JSON.parse(
+    await readFile(path.join(__dirname, "..", "..", "package.json"), "utf8"),
+  );
+  assert.equal(extension.packageJSON.version, sourceManifest.version);
+  assert.equal(extension.packageJSON.main, "./dist/extension.js");
+  assert.ok(process.env.KIMI_CODE_HOME, "KIMI_CODE_HOME must point at the isolated test home");
+  assert.equal(process.env.HOME, isolatedHome);
+  assert.equal(process.env.USERPROFILE, isolatedHome);
+  assert.equal(os.homedir(), isolatedHome);
+
+  await extension.activate();
+  assert.equal(extension.isActive, true, "extension activation did not complete");
+
+  const commands = new Set(await vscode.commands.getCommands(true));
+  for (const command of EXPECTED_COMMANDS) {
+    assert.ok(commands.has(command), `missing registered command: ${command}`);
+  }
+
+  const config = vscode.workspace.getConfiguration("kimi");
+  assert.equal(config.get("autosave"), true);
+  assert.equal(config.get("executablePath"), undefined, "removed Python CLI setting is still contributed");
+  assert.equal(config.get("environmentVariables"), undefined, "removed global CLI env setting is still contributed");
+
+  await vscode.commands.executeCommand("kimi.openInTab");
+  await waitFor(() => {
+    return vscode.window.tabGroups.all.some((group) =>
+      group.tabs.some((tab) =>
+        tab.input instanceof vscode.TabInputWebview && isKimiPanelViewType(tab.input.viewType)));
+  }, 5_000, () => `Kimi Webview tab did not open; tabs=${describeTabs()}`);
+
+  await vscode.commands.executeCommand("kimi.showLogs");
+  await vscode.commands.executeCommand("kimi.resetKimi");
+  await vscode.commands.executeCommand("workbench.action.closeActiveEditor");
+
+  console.log(
+    JSON.stringify({
+      extension: EXTENSION_ID,
+      version: extension.packageJSON.version,
+      vscode: vscode.version,
+      remoteName: vscode.env.remoteName ?? null,
+      commands: EXPECTED_COMMANDS.length,
+      webview: "opened",
+    }),
+  );
+  assert.ok(process.env.KIMI_VSCODE_SMOKE_REPORT, "Extension Host report path must be provided");
+  await writeFile(
+    process.env.KIMI_VSCODE_SMOKE_REPORT,
+    JSON.stringify({ vscode: vscode.version }),
+    "utf8",
+  );
+};
+
+async function waitFor(predicate, timeoutMs, message) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (predicate()) return;
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  throw new Error(typeof message === "function" ? message() : message);
+}
+
+function describeTabs() {
+  return JSON.stringify(vscode.window.tabGroups.all.map((group) =>
+    group.tabs.map((tab) => ({
+      label: tab.label,
+      input: tab.input?.constructor?.name,
+      viewType: tab.input instanceof vscode.TabInputWebview ? tab.input.viewType : undefined,
+      active: tab.isActive,
+    }))));
+}
+
+function isKimiPanelViewType(viewType) {
+  // VS Code 1.100 exposes the internal `mainThreadWebview-` prefix here;
+  // newer hosts expose the extension's original view type.
+  return viewType === "kimiPanel" || viewType.endsWith("-kimiPanel");
+}
diff --git a/apps/vscode/test/webview/mention-insert.test.ts b/apps/vscode/test/webview/mention-insert.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb366be7c2def340a3487e6dc0ea56cdf8d650ac
--- /dev/null
+++ b/apps/vscode/test/webview/mention-insert.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { computeMentionInsert } from '@/components/inputarea/utils';
+
+describe('computeMentionInsert', () => {
+  it('replaces the active token with the mention and moves the cursor past it', () => {
+    const result = computeMentionInsert({
+      text: 'check @ap',
+      cursorPos: 9,
+      filePath: 'src/app.ts',
+      activeToken: { start: 6 },
+      isAppend: false,
+    });
+    expect(result.newText).toBe('check @src/app.ts ');
+    expect(result.newCursorPos).toBe(result.newText.length);
+  });
+
+  it('appends the mention when there is no active token', () => {
+    const result = computeMentionInsert({
+      text: 'hi ',
+      cursorPos: 3,
+      filePath: 'a.ts',
+      activeToken: null,
+      isAppend: true,
+    });
+    expect(result.newText).toBe('hi @a.ts ');
+    expect(result.newCursorPos).toBe(result.newText.length);
+  });
+
+  it('quotes a path containing spaces so whitespace cannot split the mention', () => {
+    const result = computeMentionInsert({
+      text: '@my',
+      cursorPos: 3,
+      filePath: 'My Folder/app.ts',
+      activeToken: { start: 0 },
+      isAppend: false,
+    });
+    expect(result.newText).toBe('@"My Folder/app.ts" ');
+    expect(result.newCursorPos).toBe(result.newText.length);
+  });
+
+  it('quotes a path containing spaces in append mode', () => {
+    const result = computeMentionInsert({
+      text: '',
+      cursorPos: 0,
+      filePath: 'My Folder',
+      activeToken: null,
+      isAppend: true,
+    });
+    expect(result.newText).toBe('@"My Folder" ');
+  });
+});
diff --git a/apps/vscode/test/webview/mention-match.test.ts b/apps/vscode/test/webview/mention-match.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27252c94309f7f38a7e2ad894996199cc7a29035
--- /dev/null
+++ b/apps/vscode/test/webview/mention-match.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { mentionMatchSpans } from '@/lib/mention-match';
+
+describe('mentionMatchSpans', () => {
+  it('returns the whole text as a plain span when positions are missing or empty', () => {
+    expect(mentionMatchSpans('app.ts', undefined, 0)).toEqual([{ text: 'app.ts', hit: false }]);
+    expect(mentionMatchSpans('app.ts', [], 0)).toEqual([{ text: 'app.ts', hit: false }]);
+    expect(mentionMatchSpans('', [0], 0)).toEqual([{ text: '', hit: false }]);
+  });
+
+  it('splits hit and plain runs by position', () => {
+    expect(mentionMatchSpans('app.ts', [0, 1, 4], 0)).toEqual([
+      { text: 'ap', hit: true },
+      { text: 'p.', hit: false },
+      { text: 't', hit: true },
+      { text: 's', hit: false },
+    ]);
+  });
+
+  it('shifts path-frame positions into the name frame via start', () => {
+    // path 'src/app.ts' (len 10), name 'app.ts' → start = 6
+    expect(mentionMatchSpans('app.ts', [6, 7, 10], 6)).toEqual([
+      { text: 'ap', hit: true },
+      { text: 'p.', hit: false },
+      { text: 't', hit: true },
+      { text: 's', hit: false },
+    ]);
+  });
+
+  it('drops positions outside the text frame', () => {
+    expect(mentionMatchSpans('app.ts', [0, 1, 2], 6)).toEqual([{ text: 'app.ts', hit: false }]);
+    expect(mentionMatchSpans('src', [0, 6, 7], 0)).toEqual([
+      { text: 's', hit: true },
+      { text: 'rc', hit: false },
+    ]);
+  });
+
+  it('extends a hit across the complete surrogate pair', () => {
+    // 'a😀b': 😀 occupies UTF-16 units 1 and 2; a match reported at offset 1
+    // must not split the pair between two spans.
+    expect(mentionMatchSpans('a\u{1F600}b', [1], 0)).toEqual([
+      { text: 'a', hit: false },
+      { text: '\u{1F600}', hit: true },
+      { text: 'b', hit: false },
+    ]);
+  });
+
+  it('keeps an unmatched surrogate pair in one plain run', () => {
+    expect(mentionMatchSpans('\u{1F600}ab', [2], 0)).toEqual([
+      { text: '\u{1F600}', hit: false },
+      { text: 'a', hit: true },
+      { text: 'b', hit: false },
+    ]);
+  });
+
+  it('handles adjacent hits as a single run', () => {
+    expect(mentionMatchSpans('abc', [0, 1, 2], 0)).toEqual([{ text: 'abc', hit: true }]);
+  });
+});
diff --git a/apps/vscode/test/webview/setup.ts b/apps/vscode/test/webview/setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e42051f8ee343a9acf9097594715303e7ded05bd
--- /dev/null
+++ b/apps/vscode/test/webview/setup.ts
@@ -0,0 +1,6 @@
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
diff --git a/apps/vscode/test/webview/useDebouncedValue.test.ts b/apps/vscode/test/webview/useDebouncedValue.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c54731f717b7ee264f669d264999d5fa29a33b14
--- /dev/null
+++ b/apps/vscode/test/webview/useDebouncedValue.test.ts
@@ -0,0 +1,38 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
+
+describe('useDebouncedValue', () => {
+  it('returns the initial value immediately without debounce', () => {
+    const { result } = renderHook(() => useDebouncedValue('a', 100));
+    expect(result.current).toBe('a');
+  });
+
+  it('keeps the old value during the debounce window and updates after it', async () => {
+    const { result, rerender } = renderHook(({ value }) => useDebouncedValue(value, 100), { initialProps: { value: 'a' } });
+    rerender({ value: 'ab' });
+    expect(result.current).toBe('a');
+
+    await waitFor(() => { expect(result.current).toBe('ab'); });
+  });
+
+  it('settles only the final value for rapid successive changes', async () => {
+    const { result, rerender } = renderHook(({ value }) => useDebouncedValue(value, 100), { initialProps: { value: 'a' } });
+    rerender({ value: 'ab' });
+    rerender({ value: 'abc' });
+    expect(result.current).toBe('a');
+
+    await new Promise((r) => setTimeout(r, 50));
+    expect(result.current).toBe('a');
+
+    await waitFor(() => { expect(result.current).toBe('abc'); });
+  });
+
+  it('does not update state after unmount', async () => {
+    const { result, rerender, unmount } = renderHook(({ value }) => useDebouncedValue(value, 100), { initialProps: { value: 'a' } });
+    rerender({ value: 'ab' });
+    unmount();
+    await new Promise((r) => setTimeout(r, 150));
+    expect(result.current).toBe('a');
+  });
+});
diff --git a/apps/vscode/test/webview/useFilePicker.test.tsx b/apps/vscode/test/webview/useFilePicker.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..51557add9050807f92b8ee65c951d65b96497876
--- /dev/null
+++ b/apps/vscode/test/webview/useFilePicker.test.tsx
@@ -0,0 +1,218 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useFilePicker } from '@/components/inputarea/hooks/useFilePicker';
+import { useChatStore } from '@/stores';
+
+const getProjectFiles = vi.fn();
+
+vi.mock('@/services', () => ({
+  bridge: {
+    getProjectFiles: (...args: unknown[]) => getProjectFiles(...args),
+  },
+}));
+
+const noop = () => {};
+const at = (query: string) => ({ trigger: '@' as const, start: 0, query });
+
+type Token = ReturnType<typeof at> | null;
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+beforeEach(() => {
+  getProjectFiles.mockReset();
+  getProjectFiles.mockResolvedValue([]);
+  useChatStore.setState({ isStreaming: false, draftMedia: [] });
+});
+
+describe('enabled gating', () => {
+  it('does not search without an active token', async () => {
+    renderHook(() => useFilePicker(null, noop, noop, noop), { wrapper: createWrapper() });
+    await new Promise((r) => setTimeout(r, 150));
+    expect(getProjectFiles).not.toHaveBeenCalled();
+  });
+});
+
+describe('search', () => {
+  it('searches with the current query and returns results', async () => {
+    getProjectFiles.mockResolvedValue([{ name: 'app.ts', path: 'src/app.ts', isDirectory: false }]);
+    const { result } = renderHook(() => useFilePicker(at('app'), noop, noop, noop), { wrapper: createWrapper() });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(1); });
+    expect(result.current.fileItems[0]).toMatchObject({ name: 'app.ts', path: 'src/app.ts' });
+  });
+
+  it('caps the displayed items at 50', async () => {
+    getProjectFiles.mockResolvedValue(
+      Array.from({ length: 60 }, (_, i) => ({ name: `f${i}.ts`, path: `f${i}.ts`, isDirectory: false })),
+    );
+    const { result } = renderHook(() => useFilePicker(at('f'), noop, noop, noop), { wrapper: createWrapper() });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(50); });
+  });
+
+  it('debounces rapid query changes into a single request after 100ms', async () => {
+    const { rerender } = renderHook(({ token }) => useFilePicker(token, noop, noop, noop), {
+      initialProps: { token: at('') as Token },
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => { expect(getProjectFiles).toHaveBeenCalledTimes(1); });
+    getProjectFiles.mockClear();
+
+    rerender({ token: at('a') });
+    rerender({ token: at('ap') });
+    rerender({ token: at('app') });
+    expect(getProjectFiles).not.toHaveBeenCalled();
+
+    await waitFor(() => { expect(getProjectFiles).toHaveBeenCalledTimes(1); });
+    expect(getProjectFiles).toHaveBeenCalledWith({ query: 'app' });
+  });
+});
+
+describe('media option', () => {
+  it('shows the media option only for an empty query', async () => {
+    const { result, rerender } = renderHook(({ token }) => useFilePicker(token, noop, noop, noop), {
+      initialProps: { token: at('') as Token },
+      wrapper: createWrapper(),
+    });
+    expect(result.current.showMediaOption).toBe(true);
+    expect(result.current.fileMenuHeaderCount).toBe(1);
+
+    rerender({ token: at('a') });
+    expect(result.current.showMediaOption).toBe(false);
+    expect(result.current.fileMenuHeaderCount).toBe(0);
+  });
+
+  it('hides the media option when media cannot be added', () => {
+    useChatStore.setState({ isStreaming: true });
+    const { result } = renderHook(() => useFilePicker(at(''), noop, noop, noop), { wrapper: createWrapper() });
+    expect(result.current.showMediaOption).toBe(false);
+    expect(result.current.fileMenuHeaderCount).toBe(0);
+  });
+});
+
+describe('keyboard navigation', () => {
+  const key = (result: { current: ReturnType<typeof useFilePicker> }, k: string) => {
+    act(() => {
+      result.current.handleFileMenuKey({ key: k, preventDefault: vi.fn() } as unknown as React.KeyboardEvent);
+    });
+  };
+
+  it('moves selectedIndex within the list bounds with ArrowDown and ArrowUp', async () => {
+    getProjectFiles.mockResolvedValue([
+      { name: 'a.ts', path: 'a.ts', isDirectory: false },
+      { name: 'b.ts', path: 'b.ts', isDirectory: false },
+    ]);
+    const { result } = renderHook(() => useFilePicker(at('a'), noop, noop, noop), { wrapper: createWrapper() });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(2); });
+
+    const maxIndex = result.current.fileMenuHeaderCount + result.current.fileItems.length - 1;
+    expect(result.current.selectedIndex).toBe(0);
+    key(result, 'ArrowUp');
+    expect(result.current.selectedIndex).toBe(0);
+    key(result, 'ArrowDown');
+    key(result, 'ArrowDown');
+    key(result, 'ArrowDown');
+    expect(result.current.selectedIndex).toBe(maxIndex);
+    key(result, 'ArrowUp');
+    expect(result.current.selectedIndex).toBe(maxIndex - 1);
+  });
+
+  it('lets Enter fall through when there is no selectable entry', async () => {
+    getProjectFiles.mockResolvedValue([]);
+    const { result } = renderHook(() => useFilePicker(at('zzz'), noop, noop, noop), { wrapper: createWrapper() });
+    await waitFor(() => { expect(result.current.isLoading).toBe(false); });
+
+    let handled = true;
+    act(() => {
+      handled = result.current.handleFileMenuKey({ key: 'Enter', preventDefault: vi.fn() } as unknown as React.KeyboardEvent);
+    });
+    expect(handled).toBe(false);
+  });
+
+  it('clamps the selection when fresh results shrink the list', async () => {
+    getProjectFiles.mockResolvedValue([
+      { name: 'a.ts', path: 'a.ts', isDirectory: false },
+      { name: 'b.ts', path: 'b.ts', isDirectory: false },
+    ]);
+    const { result, rerender } = renderHook(({ token }) => useFilePicker(token, noop, noop, noop), {
+      initialProps: { token: at('a') as Token },
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(2); });
+
+    getProjectFiles.mockResolvedValue([{ name: 'app.ts', path: 'app.ts', isDirectory: false }]);
+    rerender({ token: at('ap') });
+    act(() => { result.current.setSelectedIndex(1); });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(1); });
+    expect(result.current.selectedIndex).toBe(0);
+  });
+
+  it('calls onPickMedia when Enter selects the media option', async () => {
+    const onPickMedia = vi.fn();
+    const { result } = renderHook(() => useFilePicker(at(''), noop, onPickMedia, noop), { wrapper: createWrapper() });
+
+    expect(result.current.selectedIndex).toBe(0);
+    key(result, 'Enter');
+    expect(onPickMedia).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores confirmation while results are stale for the current query', async () => {
+    getProjectFiles.mockResolvedValue([{ name: 'a.ts', path: 'src/a.ts', isDirectory: false }]);
+    const onInsertFile = vi.fn();
+    const { result, rerender } = renderHook(({ token }) => useFilePicker(token, onInsertFile, noop, noop), {
+      initialProps: { token: at('a') as Token },
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(1); });
+
+    let resolveNext: (value: unknown) => void = noop;
+    getProjectFiles.mockImplementation(() => new Promise((resolve) => { resolveNext = resolve; }));
+    rerender({ token: at('ap') });
+    expect(result.current.isStale).toBe(true);
+
+    key(result, 'Enter');
+    act(() => { result.current.handleSelectItem(result.current.fileItems[0]!); });
+    expect(onInsertFile).not.toHaveBeenCalled();
+
+    await waitFor(() => { expect(getProjectFiles).toHaveBeenCalledWith({ query: 'ap' }); });
+    act(() => { resolveNext([{ name: 'app.ts', path: 'src/app.ts', isDirectory: false }]); });
+    await waitFor(() => { expect(result.current.fileItems[0]?.name).toBe('app.ts'); });
+    expect(result.current.isStale).toBe(false);
+
+    key(result, 'Enter');
+    expect(onInsertFile).toHaveBeenCalledWith('src/app.ts');
+  });
+
+  it('calls onInsertFile when Enter selects a file', async () => {
+    getProjectFiles.mockResolvedValue([{ name: 'a.ts', path: 'src/a.ts', isDirectory: false }]);
+    const onInsertFile = vi.fn();
+    const { result } = renderHook(() => useFilePicker(at('a'), onInsertFile, noop, noop), { wrapper: createWrapper() });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(1); });
+
+    act(() => {
+      result.current.setSelectedIndex(result.current.fileMenuHeaderCount);
+    });
+    key(result, 'Enter');
+    expect(onInsertFile).toHaveBeenCalledWith('src/a.ts');
+  });
+
+  it('calls onInsertFile with the directory path when Enter selects a directory', async () => {
+    getProjectFiles.mockResolvedValue([{ name: 'src', path: 'src', isDirectory: true }]);
+    const onInsertFile = vi.fn();
+    const { result } = renderHook(() => useFilePicker(at('sr'), onInsertFile, noop, noop), { wrapper: createWrapper() });
+    await waitFor(() => { expect(result.current.fileItems).toHaveLength(1); });
+
+    act(() => {
+      result.current.setSelectedIndex(result.current.fileMenuHeaderCount);
+    });
+    key(result, 'Enter');
+    expect(onInsertFile).toHaveBeenCalledWith('src');
+  });
+});
diff --git a/apps/vscode/webview-ui/src/components/hooks/useExtensionImageUrl.ts b/apps/vscode/webview-ui/src/components/hooks/useExtensionImageUrl.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca1eafd34cf288fa5fe544d471be2d12f6137d54
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/hooks/useExtensionImageUrl.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+export function useExtensionImageUrl(imageName: string): string {
+  const [url, setUrl] = useState("");
+
+  useEffect(() => {
+    const baseUri = document.body.getAttribute("data-baseuri");
+    if (baseUri) {
+      setUrl(`${baseUri}/dist/${imageName}`);
+    }
+  }, [imageName]);
+
+  return url;
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx b/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0d50b7226a69004fc0cfa4b1c05de901dcbfd85f
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx
@@ -0,0 +1,491 @@
+import { Fragment, useRef, useMemo, useState, useEffect } from "react";
+import { IconSend, IconPlayerStop, IconChevronDown, IconPlus } from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { ActionMenu } from "../ActionMenu";
+import { SlashCommandMenu } from "../SlashCommandMenu";
+import { FilePickerMenu } from "../FilePickerMenu";
+import { MediaThumbnail } from "../MediaThumbnail";
+import { MediaPreviewModal } from "../MediaPreviewModal";
+import { BottomToolbar } from "../BottomToolbar";
+import { StreamingConfirmDialog } from "../StreamingConfirmDialog";
+import { ThinkingButton } from "../ThinkingButton";
+import { PlanModeButton } from "../PlanModeButton";
+import {
+  getModelById,
+  getMediaFallbackModel,
+  getModelsForMedia,
+  groupModelsByProvider,
+  providerDisplayName,
+  useChatStore,
+  useSettingsStore,
+} from "@/stores";
+import { bridge, Events } from "@/services";
+import { Content } from "@/lib/content";
+import { cn } from "@/lib/utils";
+import { useSlashMenu, findActiveToken } from "./hooks/useSlashMenu";
+import { useFilePicker } from "./hooks/useFilePicker";
+import { useMediaUpload } from "./hooks/useMediaUpload";
+import { useClickOutside } from "./hooks/useClickOutside";
+import { useInputHistory } from "./hooks/useInputHistory";
+import { computeMentionInsert } from "./utils";
+
+interface InputAreaProps {
+  onAuthAction?: () => void;
+}
+
+const SWITCH_CACHE_NOTE =
+  "Note: Switching models or thinking effort invalidates the existing prompt cache. Start a new conversation to avoid extra token costs.";
+
+function adjustHeight(textarea: HTMLTextAreaElement | null) {
+  if (!textarea) return;
+  textarea.style.height = "auto";
+  textarea.style.height = `${Math.min(textarea.scrollHeight, 140)}px`;
+}
+
+export function InputArea({ onAuthAction }: InputAreaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [text, setText] = useState("");
+  const [cursorPos, setCursorPos] = useState(0);
+  const [previewMedia, setPreviewMedia] = useState<string | null>(null);
+
+  const { isStreaming, sendMessage, abort, draftMedia, removeDraftMedia, hasProcessingMedia, getMediaInConversation, pendingInput, planMode, messages } = useChatStore();
+  const { currentModel, thinkingEffort, updateModel, toggleThinking, selectThinkingEffort, models, extensionConfig, getCurrentThinkingMode } = useSettingsStore();
+
+  const isProcessing = hasProcessingMedia();
+  const thinkingMode = getCurrentThinkingMode();
+  // A switch from a non-empty conversation resends the accumulated context,
+  // losing the prompt cache — surface the cost note in the switcher dropdowns.
+  const hasConversationHistory = messages.some((message) => message.role === "user");
+
+  const [showPlanModeConfirm, setShowPlanModeConfirm] = useState(false);
+
+  const handleTogglePlanMode = () => {
+    // Turning OFF during streaming needs confirmation — user may want next turn, not current
+    if (planMode && isStreaming) {
+      setShowPlanModeConfirm(true);
+      return;
+    }
+    const newState = !planMode;
+    useChatStore.setState({ planMode: newState }); // optimistic
+    void bridge.setPlanMode(newState);
+  };
+
+  const handleConfirmExitPlanMode = () => {
+    useChatStore.setState({ planMode: false });
+    void bridge.setPlanMode(false);
+    setShowPlanModeConfirm(false);
+  };
+
+  const mediaReq = useMemo(() => {
+    const media = getMediaInConversation();
+    return { image: media.hasImage, video: media.hasVideo };
+  }, [getMediaInConversation, draftMedia]);
+
+  const availableModels = useMemo(() => getModelsForMedia(models, mediaReq), [models, mediaReq]);
+  const currentModelConfig = getModelById(models, currentModel);
+  const modelGroups = useMemo(() => groupModelsByProvider(availableModels), [availableModels]);
+  const showProviderGroups = modelGroups.length > 1;
+  const currentModelLabel = currentModelConfig === undefined
+    ? "No models available"
+    : showProviderGroups
+      ? `${currentModelConfig.name} · ${providerDisplayName(currentModelConfig.provider)}`
+      : currentModelConfig.name;
+
+  // Auto-switch model if current model doesn't support required media
+  useEffect(() => {
+    if (!mediaReq.image && !mediaReq.video) {
+      return;
+    }
+    const isCurrentModelValid = availableModels.some((m) => m.id === currentModel);
+    if (isCurrentModelValid) {
+      return;
+    }
+    const fallbackModel = getMediaFallbackModel(availableModels, currentModelConfig);
+    if (fallbackModel !== undefined) {
+      updateModel(fallbackModel.id);
+    }
+  }, [mediaReq.image, mediaReq.video, currentModel, currentModelConfig, availableModels, updateModel]);
+
+  // Restore pending input
+  useEffect(() => {
+    if (!pendingInput || isStreaming) {
+      return;
+    }
+
+    // 只在输入框为空时恢复
+    if (text.trim()) {
+      return;
+    }
+
+    const textContent = Content.getText(pendingInput.content);
+    if (textContent) {
+      setText(textContent);
+      setTimeout(() => {
+        textareaRef.current?.focus();
+        adjustHeight(textareaRef.current);
+      }, 0);
+    }
+  }, [pendingInput, isStreaming]);
+
+  const activeToken = useMemo(() => findActiveToken(text, cursorPos), [text, cursorPos]);
+
+  const { handlePaste, handlePickMedia } = useMediaUpload();
+
+  const {
+    handleKey: handleHistoryKey,
+    add: addToHistory,
+    reset: resetHistoryIndex,
+  } = useInputHistory({
+    text,
+    setText,
+    onHeightChange: () => setTimeout(() => { adjustHeight(textareaRef.current); }, 0),
+  });
+
+  function clearInput() {
+    setText("");
+    setCursorPos(0);
+    setTimeout(() => { adjustHeight(textareaRef.current); }, 0);
+  }
+
+  function removeActiveToken() {
+    if (!activeToken) return;
+    const newText = text.slice(0, activeToken.start) + text.slice(cursorPos);
+    const newCursorPos = activeToken.start;
+    setText(newText);
+    setCursorPos(newCursorPos);
+    setTimeout(() => {
+      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+      adjustHeight(textareaRef.current);
+    }, 0);
+  }
+
+  function handleSend() {
+    if (isProcessing || (!text.trim() && draftMedia.length === 0)) {
+      return;
+    }
+
+    addToHistory(text);
+    sendMessage(text);
+    clearInput();
+  }
+
+  function handleSlashCommand(name: string) {
+    sendMessage(`/${name}`);
+    clearInput();
+  }
+
+  function applyMention(filePath: string) {
+    const { newText, newCursorPos } = computeMentionInsert({
+      text,
+      cursorPos,
+      filePath,
+      activeToken,
+      isAppend: false,
+    });
+
+    setText(newText);
+    setCursorPos(newCursorPos);
+    setTimeout(() => {
+      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+      textareaRef.current?.focus();
+      adjustHeight(textareaRef.current);
+    }, 0);
+  }
+
+  const {
+    showSlashMenu,
+    filteredCommands,
+    selectedIndex: slashSelectedIndex,
+    setSelectedIndex: setSlashSelectedIndex,
+    handleSlashMenuKey,
+    resetSlashMenu,
+  } = useSlashMenu(activeToken, handleSlashCommand, removeActiveToken);
+
+  const {
+    showFileMenu,
+    fileItems,
+    selectedIndex: fileSelectedIndex,
+    isLoading: isFileLoading,
+    isStale: isFileStale,
+    showMediaOption,
+    setSelectedIndex: setFileSelectedIndex,
+    handleSelectItem: handleSelectFileItem,
+    handleFileMenuKey,
+    resetFilePicker,
+  } = useFilePicker(
+    activeToken,
+    applyMention,
+    () => {
+      void handlePickMedia();
+    },
+    removeActiveToken,
+  );
+
+  const closeMenus = () => {
+    if (showSlashMenu || showFileMenu) {
+      removeActiveToken();
+    }
+  };
+
+  useClickOutside([textareaRef, menuRef], showSlashMenu || showFileMenu, closeMenus);
+
+  useEffect(() => {
+    resetSlashMenu();
+  }, [showSlashMenu, resetSlashMenu]);
+
+  useEffect(() => {
+    if (!showFileMenu) {
+      resetFilePicker();
+    }
+  }, [showFileMenu, resetFilePicker]);
+
+  useEffect(() => {
+    const unsub = bridge.on<{ mention: string }>(Events.InsertMention, ({ mention }) => {
+      setText((prev) => prev + mention + " ");
+
+      setTimeout(() => {
+        textareaRef.current?.focus();
+        adjustHeight(textareaRef.current);
+      }, 0);
+    });
+
+    return unsub;
+  }, []);
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
+
+    if (handleSlashMenuKey(e)) {
+      return;
+    }
+
+    if (handleFileMenuKey(e)) {
+      return;
+    }
+
+    if (handleHistoryKey(e)) {
+      return;
+    }
+
+    if (extensionConfig.useCtrlEnterToSend) {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleSend();
+      }
+    } else {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+    setCursorPos(e.target.selectionStart);
+    resetHistoryIndex();
+    setTimeout(() => { adjustHeight(textareaRef.current); }, 0);
+  };
+
+  const handleSelect = () => {
+    setCursorPos(textareaRef.current?.selectionStart ?? 0);
+  };
+
+  function handleAddButtonClick() {
+    const newText = text + "@";
+    setText(newText);
+    setCursorPos(newText.length);
+    setTimeout(() => {
+      textareaRef.current?.focus();
+      textareaRef.current?.setSelectionRange(newText.length, newText.length);
+      adjustHeight(textareaRef.current);
+    }, 0);
+  }
+
+  const hasModels = availableModels.length > 0;
+  const canSend = (text.trim() || draftMedia.length > 0) && !isProcessing;
+
+  return (
+    <div className="p-2 pt-0! flex flex-col min-h-0">
+      <BottomToolbar />
+      <div className="relative shrink-0">
+        {showSlashMenu && filteredCommands.length > 0 && (
+          <div ref={menuRef} className="absolute bottom-full left-0 right-0 mb-2 z-10">
+            <SlashCommandMenu
+              commands={filteredCommands}
+              query={activeToken?.query || ""}
+              selectedIndex={slashSelectedIndex}
+              onSelect={handleSlashCommand}
+              onHover={setSlashSelectedIndex}
+            />
+          </div>
+        )}
+
+        {showFileMenu && (
+          <div ref={menuRef} className="absolute bottom-full left-0 right-0 mb-2 z-10">
+            <FilePickerMenu
+              items={fileItems}
+              selectedIndex={fileSelectedIndex}
+              isLoading={isFileLoading}
+              isStale={isFileStale}
+              showMediaOption={showMediaOption}
+              onSelectMedia={() => {
+                void handlePickMedia();
+              }}
+              onSelectItem={handleSelectFileItem}
+              onHover={setFileSelectedIndex}
+            />
+          </div>
+        )}
+
+        <div className="border border-input rounded-md overflow-hidden">
+          {draftMedia.length > 0 && (
+            <div className="flex gap-2 p-2 overflow-x-auto">
+              {draftMedia.map((item) => (
+                <MediaThumbnail
+                  key={item.id}
+                  src={item.dataUri}
+                  size="sm"
+                  onClick={item.dataUri ? () => setPreviewMedia(item.dataUri!) : undefined}
+                  onRemove={() => removeDraftMedia(item.id)}
+                />
+              ))}
+            </div>
+          )}
+
+          <textarea
+            ref={textareaRef}
+            value={text}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onSelect={handleSelect}
+            onPaste={handlePaste}
+            placeholder={isStreaming ? "Add a follow-up…" : "Ask Kimi Code… (/ commands · @ files · Alt+K code)"}
+            className={cn(
+              "w-full min-h-12 max-h-35 px-2.5 py-1.5 text-xs leading-relaxed",
+              "bg-transparent resize-none outline-none border-none overflow-y-auto",
+              "placeholder:text-muted-foreground",
+            )}
+          />
+
+          <div className="flex items-center justify-between px-1.5 pb-1.5">
+            <div className="flex items-center gap-1.5 min-w-0 flex-1">
+              <DropdownMenu>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="xs"
+                        className="gap-0.5 text-accent-foreground border-0! h-6 px-1.5 min-w-0 max-w-[calc(100%-4rem)]"
+                        disabled={isStreaming || !hasModels}
+                      >
+                        {/* Name stays readable longest: the dimmed provider
+                            suffix carries a higher shrink factor so space
+                            pressure truncates it before the model name, and
+                            below 520px it drops out entirely (still shown in
+                            the tooltip and the dropdown) — a narrow sidebar
+                            has no room for both. */}
+                        <span className="flex min-w-0 items-center text-xs">
+                          <span className="truncate">{currentModelConfig?.name ?? "No models available"}</span>
+                          {currentModelConfig !== undefined && showProviderGroups && (
+                            <span className="shrink-[3] truncate text-muted-foreground max-[520px]:hidden">
+                              {" · "}{providerDisplayName(currentModelConfig.provider)}
+                            </span>
+                          )}
+                        </span>
+                        {hasModels && <IconChevronDown className="size-3.5 shrink-0" />}
+                      </Button>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>{currentModelLabel}</TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent className="w-52!" align="start">
+                  {modelGroups.map((group, groupIndex) => (
+                    <Fragment key={group.provider}>
+                      {showProviderGroups && <DropdownMenuLabel>{group.label}</DropdownMenuLabel>}
+                      {group.models.map((model) => (
+                        <DropdownMenuItem
+                          key={model.id}
+                          onClick={() => updateModel(model.id)}
+                          className={cn("text-xs px-3 py-1.5 cursor-pointer", currentModel === model.id && "bg-accent")}
+                        >
+                          {model.name}
+                        </DropdownMenuItem>
+                      ))}
+                      {showProviderGroups && groupIndex < modelGroups.length - 1 && <DropdownMenuSeparator />}
+                    </Fragment>
+                  ))}
+                  {hasConversationHistory && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <div className="px-3 py-1.5 text-[10px] leading-snug whitespace-normal text-muted-foreground">
+                        {SWITCH_CACHE_NOTE}
+                      </div>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <ThinkingButton
+                mode={thinkingMode}
+                effort={thinkingEffort}
+                efforts={currentModelConfig?.support_efforts}
+                alwaysOn={currentModelConfig?.capabilities.includes("always_thinking")}
+                disabled={isStreaming}
+                cacheNote={hasConversationHistory ? SWITCH_CACHE_NOTE : undefined}
+                onToggle={toggleThinking}
+                onSelectEffort={selectThinkingEffort}
+              />
+              <PlanModeButton active={planMode} onToggle={handleTogglePlanMode} />
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon-xs" onClick={handleAddButtonClick} className="text-muted-foreground">
+                    <IconPlus className="size-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Add files or media</TooltipContent>
+              </Tooltip>
+
+              <ActionMenu onAuthAction={onAuthAction} />
+
+              {isStreaming ? (
+                <Button variant="destructive" size="icon-xs" onClick={abort}>
+                  <IconPlayerStop className="size-3.5" />
+                </Button>
+              ) : (
+                <Button variant="default" size="icon-xs" onClick={handleSend} disabled={!canSend}>
+                  <IconSend className="size-3.5" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <MediaPreviewModal src={previewMedia} onClose={() => setPreviewMedia(null)} />
+      <StreamingConfirmDialog
+        open={showPlanModeConfirm}
+        onOpenChange={setShowPlanModeConfirm}
+        title="Exit Plan Mode"
+        description="The agent is still working. Exiting plan mode now will affect the current turn. Are you sure you want to exit plan mode immediately?"
+        confirmLabel="Exit Now"
+        onConfirm={handleConfirmExitPlanMode}
+      />
+    </div>
+  );
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/hooks/useClickOutside.ts b/apps/vscode/webview-ui/src/components/inputarea/hooks/useClickOutside.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd8843000b8ddc30f02193a34912893ba77cb738
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/hooks/useClickOutside.ts
@@ -0,0 +1,20 @@
+import { useEffect, RefObject } from "react";
+
+export function useClickOutside(refs: RefObject<HTMLElement | null>[], isActive: boolean, onClickOutside: () => void): void {
+  useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      const isOutside = refs.every((ref) => ref.current && !ref.current.contains(target));
+      if (isOutside) {
+        onClickOutside();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [refs, isActive, onClickOutside]);
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/hooks/useFilePicker.tsx b/apps/vscode/webview-ui/src/components/inputarea/hooks/useFilePicker.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..137efdfa9c8d4a99f4925a41a86323902a39fc19
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/hooks/useFilePicker.tsx
@@ -0,0 +1,147 @@
+import { useMemo, useState, useEffect, useCallback } from "react";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import type { ProjectFile } from "shared/types";
+import { bridge } from "@/services";
+import { useChatStore } from "@/stores";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { MEDIA_CONFIG } from "@/services/config";
+
+export interface FileItem {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  matchPositions?: number[];
+}
+
+interface ActiveToken {
+  trigger: "/" | "@";
+  start: number;
+  query: string;
+}
+
+const NO_FILES: ProjectFile[] = [];
+
+interface UseFilePickerResult {
+  showFileMenu: boolean;
+  fileItems: FileItem[];
+  selectedIndex: number;
+  isLoading: boolean;
+  isStale: boolean;
+  showMediaOption: boolean;
+  fileMenuHeaderCount: number;
+  setSelectedIndex: (index: number) => void;
+  handleSelectItem: (item: FileItem) => void;
+  handleFileMenuKey: (e: React.KeyboardEvent) => boolean;
+  resetFilePicker: () => void;
+}
+
+export function useFilePicker(activeToken: ActiveToken | null, onInsertFile: (path: string) => void, onPickMedia: () => void, onCancel: () => void): UseFilePickerResult {
+  const { isStreaming, draftMedia } = useChatStore();
+  const canAddMedia = !isStreaming && draftMedia.length < MEDIA_CONFIG.maxCount;
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const showFileMenu = activeToken?.trigger === "@";
+  const query = activeToken?.query || "";
+
+  const debouncedQuery = useDebouncedValue(query, 100);
+  const searchQuery = useQuery({
+    queryKey: ["projectFiles", "search", debouncedQuery],
+    queryFn: () => bridge.getProjectFiles({ query: debouncedQuery || undefined }),
+    enabled: showFileMenu,
+    placeholderData: keepPreviousData,
+  });
+  const searchResults = searchQuery.data ?? NO_FILES;
+  const isLoading = searchQuery.isLoading;
+  const isStale = debouncedQuery !== query || searchQuery.isPlaceholderData;
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  const fileItems = useMemo((): FileItem[] => {
+    return searchResults.slice(0, 50).map((f) => ({
+      name: f.name,
+      path: f.path,
+      isDirectory: f.isDirectory,
+      matchPositions: f.matchPositions,
+    }));
+  }, [searchResults]);
+
+  const showMediaOption = canAddMedia && query === "";
+  const fileMenuHeaderCount = showMediaOption ? 1 : 0;
+
+  useEffect(() => {
+    setSelectedIndex((i) => Math.min(i, Math.max(0, fileMenuHeaderCount + fileItems.length - 1)));
+  }, [fileMenuHeaderCount, fileItems.length]);
+
+  const resetFilePicker = useCallback(() => {
+    setSelectedIndex(0);
+  }, []);
+
+  const handleFileMenuConfirm = useCallback(() => {
+    if (showMediaOption && selectedIndex === 0) {
+      onPickMedia();
+      return;
+    }
+
+    if (isStale) return;
+    const item = fileItems[selectedIndex - fileMenuHeaderCount];
+    if (!item) return;
+    onInsertFile(item.path);
+  }, [selectedIndex, showMediaOption, isStale, fileMenuHeaderCount, fileItems, onPickMedia, onInsertFile]);
+
+  const handleSelectItem = useCallback(
+    (item: FileItem) => {
+      if (isStale) return;
+      onInsertFile(item.path);
+    },
+    [isStale, onInsertFile],
+  );
+
+  const handleFileMenuKey = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      if (!showFileMenu) return false;
+
+      const maxIdx = Math.max(0, fileMenuHeaderCount + fileItems.length - 1);
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.min(i + 1, maxIdx));
+          return true;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.max(i - 1, 0));
+          return true;
+        case "Tab":
+        case "Enter":
+          if (fileMenuHeaderCount + fileItems.length === 0) return false;
+          e.preventDefault();
+          handleFileMenuConfirm();
+          return true;
+        case "Escape":
+          e.preventDefault();
+          onCancel();
+          return true;
+        default:
+          return false;
+      }
+    },
+    [showFileMenu, fileMenuHeaderCount, fileItems, handleFileMenuConfirm, onCancel],
+  );
+
+  return {
+    showFileMenu,
+    fileItems,
+    selectedIndex,
+    isLoading,
+    isStale,
+    showMediaOption,
+    fileMenuHeaderCount,
+    setSelectedIndex,
+    handleSelectItem,
+    handleFileMenuKey,
+    resetFilePicker,
+  };
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts b/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32847197d15da093361ac08f20ab3c5462e48003
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/hooks/useInputHistory.ts
@@ -0,0 +1,68 @@
+import { useState, useCallback } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { bridge } from "@/services";
+
+interface UseInputHistoryOptions {
+  text: string;
+  setText: (text: string) => void;
+  onHeightChange?: () => void;
+}
+
+const INPUT_HISTORY_KEY = ["inputHistory"] as const;
+const NO_HISTORY: string[] = [];
+
+export function useInputHistory({ text, setText, onHeightChange }: UseInputHistoryOptions) {
+  const queryClient = useQueryClient();
+  const { data: history = NO_HISTORY } = useQuery({
+    queryKey: INPUT_HISTORY_KEY,
+    queryFn: () => bridge.getInputHistory(),
+  });
+  const [index, setIndex] = useState(-1);
+
+  const add = useCallback((input: string) => {
+    const trimmed = input.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    void bridge.addInputHistory(trimmed);
+    queryClient.setQueryData<string[]>(INPUT_HISTORY_KEY, (prev) => (prev?.[prev.length - 1] === trimmed ? prev : [...(prev ?? []), trimmed]));
+    setIndex(-1);
+  }, [queryClient]);
+
+  const handleKey = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      // Ignore if any modifier key is pressed
+      if (e.ctrlKey || e.metaKey || e.altKey) {
+        return false;
+      }
+
+      if (e.key === "ArrowUp" && history.length > 0 && (!text || index >= 0)) {
+        const newIndex = Math.min(index + 1, history.length - 1);
+        if (newIndex !== index) {
+          e.preventDefault();
+          setIndex(newIndex);
+          setText(history[history.length - 1 - newIndex]);
+          onHeightChange?.();
+          return true;
+        }
+      }
+
+      if (e.key === "ArrowDown" && index >= 0) {
+        e.preventDefault();
+        const newIndex = index - 1;
+        setIndex(newIndex);
+        setText(newIndex === -1 ? "" : history[history.length - 1 - newIndex]);
+        onHeightChange?.();
+        return true;
+      }
+
+      return false;
+    },
+    [history, index, text, setText, onHeightChange],
+  );
+
+  const reset = useCallback(() => setIndex(-1), []);
+
+  return { handleKey, add, reset };
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/hooks/useMediaUpload.ts b/apps/vscode/webview-ui/src/components/inputarea/hooks/useMediaUpload.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bca84d9426e9c769cd2825f7131a604f4b36b360
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/hooks/useMediaUpload.ts
@@ -0,0 +1,160 @@
+import { useCallback, useEffect } from "react";
+import { toast } from "@/components/ui/sonner";
+import { bridge } from "@/services";
+import { validateMediaFile, validateTotalSize, processMediaFile, getMediaType } from "@/lib/media-utils";
+import { useChatStore } from "@/stores";
+import { MEDIA_CONFIG } from "@/services/config";
+
+interface UseMediaUploadResult {
+  canAddMedia: boolean;
+  handlePaste: (e: React.ClipboardEvent) => void;
+  handlePickMedia: () => Promise<void>;
+  addMediaFiles: (files: File[]) => void;
+}
+
+export function useMediaUpload(): UseMediaUploadResult {
+  const { draftMedia, addDraftMedia, updateDraftMedia, removeDraftMedia } = useChatStore();
+
+  const hasProcessing = draftMedia.some((m) => !m.dataUri);
+  const canAddMedia = draftMedia.length < MEDIA_CONFIG.maxCount;
+
+  const getExistingDataUris = useCallback((): string[] => {
+    return draftMedia.filter((m) => m.dataUri).map((m) => m.dataUri!);
+  }, [draftMedia]);
+
+  const processFile = useCallback(
+    async (file: File) => {
+      const error = validateMediaFile(file, draftMedia.length);
+      if (error) {
+        toast.error(error.message);
+        return;
+      }
+
+      const id = crypto.randomUUID();
+      addDraftMedia(id);
+
+      try {
+        const dataUri = await processMediaFile(file);
+        const totalError = validateTotalSize(getExistingDataUris(), dataUri);
+        if (totalError) {
+          removeDraftMedia(id);
+          toast.error(totalError.message);
+          return;
+        }
+        updateDraftMedia(id, dataUri);
+      } catch {
+        removeDraftMedia(id);
+        toast.error("Failed to process media file");
+      }
+    },
+    [draftMedia.length, addDraftMedia, updateDraftMedia, removeDraftMedia, getExistingDataUris],
+  );
+
+  const addMediaFiles = useCallback(
+    (files: File[]) => {
+      for (const file of files) {
+        void processFile(file);
+      }
+    },
+    [processFile],
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      const items = e.clipboardData.items;
+      const mediaFiles: File[] = [];
+
+      for (const item of items) {
+        if (item.type.startsWith("image/") || item.type.startsWith("video/")) {
+          const file = item.getAsFile();
+          if (file) {
+            mediaFiles.push(file);
+          }
+        }
+      }
+
+      if (mediaFiles.length === 0) {
+        return;
+      }
+
+      e.preventDefault();
+      addMediaFiles(mediaFiles);
+    },
+    [addMediaFiles],
+  );
+
+  const handlePickMedia = useCallback(async () => {
+    if (hasProcessing || draftMedia.length >= MEDIA_CONFIG.maxCount) {
+      return;
+    }
+    const remaining = MEDIA_CONFIG.maxCount - draftMedia.length;
+    try {
+      const media = await bridge.pickMedia(remaining, true);
+      const existingUris = getExistingDataUris();
+
+      for (const dataUri of media) {
+        const totalError = validateTotalSize(existingUris, dataUri);
+        if (totalError) {
+          toast.error(totalError.message);
+          break;
+        }
+        existingUris.push(dataUri);
+        addDraftMedia(crypto.randomUUID(), dataUri);
+      }
+    } catch {
+      toast.error("Failed to pick media");
+    }
+  }, [hasProcessing, draftMedia.length, addDraftMedia, getExistingDataUris]);
+
+  useEffect(() => {
+    const isMediaFile = (file: File) => getMediaType(file) !== null;
+
+    const handleDocDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const handleDocDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = "copy";
+      }
+    };
+
+    const handleDocDrop = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (hasProcessing) {
+        return;
+      }
+      if (draftMedia.length >= MEDIA_CONFIG.maxCount) {
+        toast.error(`Maximum ${MEDIA_CONFIG.maxCount} media files allowed`);
+        return;
+      }
+
+      const files = Array.from(e.dataTransfer?.files || []).filter(isMediaFile);
+      if (files.length === 0) {
+        return;
+      }
+      addMediaFiles(files);
+    };
+
+    document.addEventListener("dragenter", handleDocDragEnter);
+    document.addEventListener("dragover", handleDocDragOver);
+    document.addEventListener("drop", handleDocDrop);
+
+    return () => {
+      document.removeEventListener("dragenter", handleDocDragEnter);
+      document.removeEventListener("dragover", handleDocDragOver);
+      document.removeEventListener("drop", handleDocDrop);
+    };
+  }, [hasProcessing, draftMedia.length, addMediaFiles]);
+
+  return {
+    canAddMedia,
+    handlePaste,
+    handlePickMedia,
+    addMediaFiles,
+  };
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/hooks/useSlashMenu.ts b/apps/vscode/webview-ui/src/components/inputarea/hooks/useSlashMenu.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c56619747ba29656d3430661cfd6d8dffba2d150
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/hooks/useSlashMenu.ts
@@ -0,0 +1,113 @@
+import { useMemo, useState, useCallback } from "react";
+import { useSettingsStore } from "@/stores";
+import type { SlashCommandInfo } from "shared/legacy-sdk";
+
+interface ActiveToken {
+  trigger: "/" | "@";
+  start: number;
+  query: string;
+}
+
+function fuzzyMatch(text: string, query: string): boolean {
+  if (!query) {
+    return true;
+  }
+  const lowerText = text.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  let qi = 0;
+  for (let i = 0; i < lowerText.length && qi < lowerQuery.length; i++) {
+    if (lowerText[i] === lowerQuery[qi]) {
+      qi++;
+    }
+  }
+  return qi === lowerQuery.length;
+}
+
+export function findActiveToken(text: string, cursorPos: number): ActiveToken | null {
+  const beforeCursor = text.slice(0, cursorPos);
+  const lastSpace = Math.max(beforeCursor.lastIndexOf(" "), beforeCursor.lastIndexOf("\n"), beforeCursor.lastIndexOf("\t"), -1);
+  const currentWord = beforeCursor.slice(lastSpace + 1);
+
+  if (currentWord.startsWith("@")) {
+    return { trigger: "@", start: lastSpace + 1, query: currentWord.slice(1) };
+  }
+  if (currentWord.startsWith("/")) {
+    return { trigger: "/", start: lastSpace + 1, query: currentWord.slice(1) };
+  }
+  return null;
+}
+
+interface UseSlashMenuResult {
+  showSlashMenu: boolean;
+  filteredCommands: SlashCommandInfo[];
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  handleSlashMenuKey: (e: React.KeyboardEvent) => boolean;
+  resetSlashMenu: () => void;
+}
+
+export function useSlashMenu(activeToken: ActiveToken | null, onSelectCommand: (name: string) => void, onCancel: () => void): UseSlashMenuResult {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { slashCommands } = useSettingsStore();
+
+  const showSlashMenu = activeToken?.trigger === "/";
+
+  const filteredCommands = useMemo(() => {
+    if (!showSlashMenu) {
+      return [];
+    }
+    const q = activeToken.query;
+    if (!q) {
+      return slashCommands;
+    }
+    return slashCommands.filter((cmd) => fuzzyMatch(cmd.name, q) || fuzzyMatch(cmd.description, q));
+  }, [showSlashMenu, activeToken?.query, slashCommands]);
+
+  const resetSlashMenu = useCallback(() => {
+    setSelectedIndex(0);
+  }, []);
+
+  const handleSlashMenuKey = useCallback(
+    (e: React.KeyboardEvent): boolean => {
+      if (!showSlashMenu || filteredCommands.length === 0) {
+        return false;
+      }
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.min(i + 1, filteredCommands.length - 1));
+          return true;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.max(i - 1, 0));
+          return true;
+        case "Tab":
+        case "Enter": {
+          e.preventDefault();
+          const cmd = filteredCommands[selectedIndex];
+          if (cmd) {
+            onSelectCommand(cmd.name);
+          }
+          return true;
+        }
+        case "Escape":
+          e.preventDefault();
+          onCancel();
+          return true;
+        default:
+          return false;
+      }
+    },
+    [showSlashMenu, filteredCommands, selectedIndex, onSelectCommand, onCancel],
+  );
+
+  return {
+    showSlashMenu,
+    filteredCommands,
+    selectedIndex,
+    setSelectedIndex,
+    handleSlashMenuKey,
+    resetSlashMenu,
+  };
+}
diff --git a/apps/vscode/webview-ui/src/components/inputarea/utils.ts b/apps/vscode/webview-ui/src/components/inputarea/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0a1689e6cfeb6ebe8183eb6831b0919787ec269
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/inputarea/utils.ts
@@ -0,0 +1,31 @@
+interface InsertMentionParams {
+  text: string;
+  cursorPos: number;
+  filePath: string;
+  activeToken: { start: number } | null;
+  isAppend: boolean;
+}
+
+interface InsertMentionResult {
+  newText: string;
+  newCursorPos: number;
+}
+
+export function computeMentionInsert(params: InsertMentionParams): InsertMentionResult {
+  const { text, cursorPos, filePath, activeToken, isAppend } = params;
+  // Quote paths containing spaces, as the CLI/TUI mention completers do, so
+  // whitespace cannot split the mention.
+  const target = filePath.includes(" ") ? `"${filePath}"` : filePath;
+
+  if (isAppend || !activeToken) {
+    const newText = text + `@${target} `;
+    return { newText, newCursorPos: newText.length };
+  }
+
+  const before = text.slice(0, activeToken.start);
+  const after = text.slice(cursorPos);
+  const newText = `${before}@${target} ${after}`;
+  const newCursorPos = activeToken.start + 1 + target.length + 1;
+
+  return { newText, newCursorPos };
+}
diff --git a/apps/vscode/webview-ui/src/components/ui/accordion.tsx b/apps/vscode/webview-ui/src/components/ui/accordion.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0345ade680d42bdca8544f90f9fd1bcfb9b7691b
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/accordion.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+
+function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" className={cn("flex w-full flex-col", className)} {...props} />;
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return <AccordionPrimitive.Item data-slot="accordion-item" className={cn("not-last:border-b", className)} {...props} />;
+}
+
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <IconChevronDown data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <IconChevronUp data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content data-slot="accordion-content" className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden" {...props}>
+      <div
+        className={cn(
+          "pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/vscode/webview-ui/src/components/ui/badge.tsx b/apps/vscode/webview-ui/src/components/ui/badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..484b0254e2d6ce3455a091535b2525734130832e
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/badge.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/vscode/webview-ui/src/components/ui/button.tsx b/apps/vscode/webview-ui/src/components/ui/button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d3782a34b7adb7e8f3f9714a7f635903849c2d19
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/button.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return <Comp data-slot="button" data-variant={variant} data-size={size} className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };
diff --git a/apps/vscode/webview-ui/src/components/ui/checkbox.tsx b/apps/vscode/webview-ui/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e1d7411eeabdb96a2540ec2449c6cf8b5ada18a7
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/checkbox.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { IconCheck } from "@tabler/icons-react";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="[&>svg]:size-3.5 grid place-content-center text-current transition-none">
+        <IconCheck />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/apps/vscode/webview-ui/src/components/ui/combobox.tsx b/apps/vscode/webview-ui/src/components/ui/combobox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a29330bc44daa18399fc61aad8957f825fd8ad4a
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/combobox.tsx
@@ -0,0 +1,216 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
+import { IconChevronDown, IconX, IconCheck } from "@tabler/icons-react";
+
+const Combobox = ComboboxPrimitive.Root;
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger data-slot="combobox-trigger" className={cn("[&_svg:not([class*='size-'])]:size-4", className)} {...props}>
+      {children}
+      <IconChevronDown className="text-muted-foreground size-4 pointer-events-none" />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear data-slot="combobox-clear" render={<InputGroupButton variant="ghost" size="icon-xs" />} className={cn(className)} {...props}>
+      <IconX className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner side={side} sideOffset={sideOffset} align={align} alignOffset={alignOffset} anchor={anchor} className="isolate z-50">
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}>
+        <IconCheck className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />;
+}
+
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
+  return <ComboboxPrimitive.GroupLabel data-slot="combobox-label" className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)} {...props} />;
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
+      {...props}
+    />
+  );
+}
+
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
+  return <ComboboxPrimitive.Separator data-slot="combobox-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />;
+}
+
+function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove render={<Button variant="ghost" size="icon-xs" />} className="-ml-1 opacity-50 hover:opacity-100" data-slot="combobox-chip-remove">
+          <IconX className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
+  return <ComboboxPrimitive.Input data-slot="combobox-chip-input" className={cn("min-w-16 flex-1 outline-none", className)} {...props} />;
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};
diff --git a/apps/vscode/webview-ui/src/components/ui/command.tsx b/apps/vscode/webview-ui/src/components/ui/command.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4972af46a1df60400b43f17af3c680980b59316e
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/command.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
+import { IconSearch, IconCheck } from "@tabler/icons-react";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive data-slot="command" className={cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className)} {...props} />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run…",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className={cn("rounded-xl! overflow-hidden p-0", className)} showCloseButton={showCloseButton}>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input data-slot="command-input" className={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)} {...props} />
+        <InputGroupAddon>
+          <IconSearch className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List data-slot="command-list" className={cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className)} {...props} />
+  );
+}
+
+function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" className={cn("py-6 text-center text-sm", className)} {...props} />;
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return <CommandPrimitive.Separator data-slot="command-separator" className={cn("bg-border -mx-1 h-px", className)} {...props} />;
+}
+
+function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconCheck className="ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+}
+
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };
diff --git a/apps/vscode/webview-ui/src/components/ui/context-menu.tsx b/apps/vscode/webview-ui/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..79c389574e4cf36714bb61fa76ec2ef0ba7540d2
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/context-menu.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { IconChevronRight, IconCheck } from "@tabler/icons-react";
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" className={cn("select-none", className)} {...props} />;
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronRight className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute right-2 pointer-events-none">
+        <ContextMenuPrimitive.ItemIndicator>
+          <IconCheck />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 pointer-events-none">
+        <ContextMenuPrimitive.ItemIndicator>
+          <IconCheck />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return <ContextMenuPrimitive.Separator data-slot="context-menu-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />;
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
diff --git a/apps/vscode/webview-ui/src/components/ui/dialog.tsx b/apps/vscode/webview-ui/src/components/ui/dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..66f00a5a173344114ee4c6647cc7c6e31cbbf04e
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/dialog.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconX } from "@tabler/icons-react";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+              <IconX />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dialog-header" className={cn("gap-2 flex flex-col", className)} {...props} />;
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div data-slot="dialog-footer" className={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}>
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return <DialogPrimitive.Title data-slot="dialog-title" className={cn("text-sm leading-none font-medium", className)} {...props} />;
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+      {...props}
+    />
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
diff --git a/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx b/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1831e4690e4a2ce460e4f062fe8bda78f2486409
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,196 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { IconCheck, IconChevronRight } from "@tabler/icons-react";
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none" data-slot="dropdown-menu-checkbox-item-indicator">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <IconCheck />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none" data-slot="dropdown-menu-radio-item-indicator">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <IconCheck />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn("bg-border -mx-1 my-1 h-px", className)} {...props} />;
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronRight className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-24 rounded-md p-1 shadow-lg ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/apps/vscode/webview-ui/src/components/ui/input.tsx b/apps/vscode/webview-ui/src/components/ui/input.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bcc9491aebbb68cbde919208e08ff5f630f38d15
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/apps/vscode/webview-ui/src/components/ui/label.tsx b/apps/vscode/webview-ui/src/components/ui/label.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c66c69d0d4046d6fe4b42ef59d7e320ec88cba0
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/label.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/apps/vscode/webview-ui/src/components/ui/select.tsx b/apps/vscode/webview-ui/src/components/ui/select.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a5769f7de38153a1c55c8fb11df4c747931b5a16
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/select.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from "@tabler/icons-react";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" className={cn("scroll-my-1 p-1", className)} {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <IconSelector className="text-muted-foreground size-4 pointer-events-none" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]",
+            position === "popper" && "",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return <SelectPrimitive.Label data-slot="select-label" className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)} {...props} />;
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <IconCheck className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return <SelectPrimitive.Separator data-slot="select-separator" className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)} {...props} />;
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      <IconChevronUp />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      <IconChevronDown />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
diff --git a/apps/vscode/webview-ui/src/components/ui/separator.tsx b/apps/vscode/webview-ui/src/components/ui/separator.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8f6691c732fc678b0c1aa0fe3977c2af33f513ff
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/separator.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/apps/vscode/webview-ui/src/components/ui/switch.tsx b/apps/vscode/webview-ui/src/components/ui/switch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..788cb0523a75ddd3c69f1fab804e01d88210fd36
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/switch.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default";
+  variant?: "default" | "blue";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        // base
+        "data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+
+        // variants
+        variant === "default" && "data-checked:bg-primary",
+        variant === "blue" && "data-checked:bg-blue-400",
+
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/apps/vscode/webview-ui/src/components/ui/textarea.tsx b/apps/vscode/webview-ui/src/components/ui/textarea.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..85af792c931a34bba39d057b0642577653b31598
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[1px] aria-invalid:ring-[1px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/apps/vscode/webview-ui/src/components/ui/tooltip.tsx b/apps/vscode/webview-ui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..60bfc572aa92e8a59e8006be77cf697efa1d8b38
--- /dev/null
+++ b/apps/vscode/webview-ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };