MoonshotAI/kimi-code Vis App Features: A Complete Guide to the Visual Debugging Tool

The vis app is a visual debugging dashboard for Kimi Code sessions, exposing REST endpoints and a web UI to inspect session metadata, wire timelines, agent hierarchies, task execution, and performance metrics.

The vis application in the MoonshotAI/kimi-code repository provides developers with an interactive interface for deep inspection of AI agent sessions. Running as a lightweight web stack—apps/vis/web for the frontend and apps/vis/server for the HTTP backend—it transforms raw session data into structured, queryable views. This guide covers every feature, endpoint, and source file that makes up the vis debugging toolkit.

---

Core Session Management Features

Session List and Detail Views

The vis app surfaces stored sessions through two primary endpoints defined in apps/vis/web/src/api.ts:

• List all sessions: GET /api/sessions returns basic metadata for every stored session.
• Single session detail: GET /api/sessions/:id exposes health status, active agents, and configuration parameters.

These endpoints power the session browser UI, enabling developers to quickly locate and drill into specific runs.

Wire Timeline Inspection

The wire view (GET /api/sessions/:id/wire) returns raw "wire" entries produced by the agent core—the foundational log stream that records every LLM turn, tool invocation, and intermediate step.

In apps/vis/web/src/lib/analysis.ts, the analyzeWire() function transforms this flat timeline into a structured hierarchy:

turn → step → tool-call

This analysis computes critical metrics:

• Duration: Wall-clock time per turn and step
• Token usage: Input/output totals across the session
• Cache hit rate: Efficiency of the LLM context cache
• Idle gaps: Periods of inactivity between operations
• Tool-call statistics: Latency distributions and frequency

---

Agent and Task Visualization Features

Sub-Agent Hierarchy

The sub-agent tree endpoint (GET /api/sessions/:id/subagents) exposes the complete hierarchy of agents spawned during a session. Implemented in apps/vis/server/src/routes/subagents.ts, this feature maps parent-child relationships and delegation chains.

Background Task Monitoring

Two endpoints track asynchronous work:

Endpoint	Purpose	Implementation
GET /api/sessions/:id/tasks	Lists long-running tool calls and background operations	apps/vis/web/src/api.ts (API contract)
GET /api/sessions/:id/cron	Displays scheduled cron-type tasks attached to the session	apps/vis/server/src/routes/cron.ts

---

Data Import, Export, and Binary Asset Access

Session Import

The POST /api/sessions/:id/import endpoint in apps/vis/server/src/routes/imports.ts accepts ZIP files containing session data. This enables reproducible debugging by allowing teams to share and re-import complete session archives.

Binary Blob Retrieval

Files, images, and other binary assets stored during a session are accessible via GET /api/blobs/:id, defined in apps/vis/server/src/routes/blobs.ts. The blob store operates independently of session metadata, with IDs cross-referenced in wire entries.

---

Context Projection and Log Streaming

Agent-Specific Context Views

The context projection endpoint (GET /api/sessions/:id/context?agent=<agentId>) returns the precise message window, token allocation, and configuration visible to a specific agent at query time. The DTO type in apps/vis/web/src/types.ts mirrors the server response, ensuring type-safe client consumption.

Real-Time Log Streaming

Log lines generated by a session are available through GET /api/sessions/:id/logs (apps/vis/server/src/routes/logs.ts). For live sessions, the UI can upgrade to WebSocket updates via /api/v1/ws, registered in apps/vis/server/src/app.ts.

---

Code Examples: Working with Vis APIs

Fetching Session Summaries

import { fetchSessionSummaries } from '#/apps/vis/web/src/api';

async function listSessions() {
  const sessions = await fetchSessionSummaries();   // → SessionSummary[]
  console.table(sessions);
}
listSessions();

Source: apps/vis/web/src/api.ts

Retrieving Raw Wire Data

import { fetchWire } from '#/apps/vis/web/src/api';

async function getWire(sessionId: string) {
  const { entries } = await fetchWire(sessionId); // WireEntry[]
  console.log(`Wire contains ${entries.length} records`);
}

Running Timeline Analysis

import { analyzeWire } from '#/apps/vis/web/src/lib/analysis';
import type { WireEntry } from '#/apps/vis/web/src/types';

async function analyse(sessionId: string) {
  const { entries } = await fetchWire(sessionId);
  const analysis = analyzeWire(entries as WireEntry[]);
  console.log('Turns:', analysis.turns.length);
  console.log('Total tokens:', analysis.summary.totalTokens);
  console.log('Avg. tool latency (ms):', analysis.toolStats[0]?.avgMs);
}

Core logic: apps/vis/web/src/lib/analysis.ts

Querying Agent Context

import { fetchContext } from '#/apps/vis/web/src/api';

async function showContext(sessionId: string, agentId: string) {
  const ctx = await fetchContext(sessionId, agentId);
  console.log('Projected messages:', ctx.messages.length);
  console.log('Current token window:', ctx.contextTokens);
}

Type definition: apps/vis/web/src/types.ts

---

Key Source Files Architecture

File	Role
apps/vis/web/src/api.ts	Client-side REST wrapper for all server endpoints
apps/vis/web/src/lib/analysis.ts	Timeline structuring and metrics computation
apps/vis/web/src/types.ts	TypeScript DTOs mirroring server contracts
apps/vis/server/src/app.ts	Server bootstrap, route registration, WebSocket setup
apps/vis/server/src/routes/subagents.ts	Hierarchical agent tree endpoint
apps/vis/server/src/routes/logs.ts	Log streaming handler
apps/vis/server/src/routes/cron.ts	Scheduled task inspection
apps/vis/server/src/routes/imports.ts	Session ZIP import handler
apps/vis/server/src/routes/blobs.ts	Binary asset retrieval
apps/vis/web/src/hooks/*.ts	React-style data fetching hooks (e.g., useSession.ts, useWire.ts)

---

Summary

• Session inspection: List, detail, and wire views expose complete runtime state through apps/vis/web/src/api.ts
• Performance analytics: The analyzeWire() function in apps/vis/web/src/lib/analysis.ts derives structured timelines and computes token, latency, and cache metrics
• Agent hierarchy: Sub-agent trees and context projections reveal how work is delegated across agents
• Operational visibility: Tasks, cron jobs, logs, and blob storage cover all auxiliary session data
• Live and replay modes: WebSocket support in apps/vis/server/src/app.ts enables real-time monitoring, while import/export ensures reproducibility

---

Frequently Asked Questions

How does the vis app handle real-time session updates?

The vis server exposes a WebSocket endpoint at /api/v1/ws (registered in apps/vis/server/src/app.ts) that pushes live updates to connected clients. The UI uses this to refresh session state, wire entries, and logs without polling while a session is actively running.

What format does session import accept?

The import endpoint (POST /api/sessions/:id/import in apps/vis/server/src/routes/imports.ts) accepts ZIP archives containing serialized session data. This format preserves wire entries, blob references, and agent configurations for complete session restoration.

Can I query context for a specific agent within a session?

Yes. The GET /api/sessions/:id/context?agent=<agentId> endpoint returns the projected message window, token count, and configuration for any agent in the session. The TypeScript types in apps/vis/web/src/types.ts define the response structure for type-safe client development.

Where is the core analysis logic for timeline metrics?

The analyzeWire() function in apps/vis/web/src/lib/analysis.ts implements the complete transformation from raw wire entries to structured turns, steps, and tool calls. It also computes derived metrics including durations, token usage, cache hit rates, and tool-call statistics.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}