Add files using upload-large-folder tool

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>
+  );
+}

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]);
+}

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();
+  });
+});

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.
+    }
+  }
+}

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;
+}

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();
+}

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);
+  });
+});

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 };
+}

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,
+  };
+}

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;
+  }
+}

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)}`;
+}

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/);
+  });
+});

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]>>;
+};

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);
+}

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),
+        }),
+      };
+    },
+  };
+}

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';
+  }
+}

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';

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);
+    },
+  });
+}

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)',
+    );
+  }
+}

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;
+}

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} />;
+}

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>
+  );
+}

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>
+  );
+}

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}
+    </>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;
+}

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`;
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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)}
+    />
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;');
+  });
+});

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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();
+  });
+});

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);
+}

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;

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/);
+  });
+});

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);
+}

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;
+}