# session-tree-viewer

**Repository Path**: zgcode/session-tree-viewer

## Basic Information

- **Project Name**: session-tree-viewer
- **Description**: 对话树可视化工具 — 查看 AI Agent 会话的树形结构。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-06-12
- **Last Updated**: 2026-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Session Tree Viewer

> 对话树可视化工具 — 将 AI Agent 的多轮对话渲染为可交互的树图

![demo](screenshot.png)

## 这是什么？

一个纯前端的对话树查看器，用 Canvas 2D 将 AI Agent 的会话日志渲染为可交互的树状图。

每个节点代表一条消息——用户输入、助手回复、工具调用、工具结果——全部以层级结构展示，支持拖拽、缩放、折叠展开。

**直接丢浏览器就能跑，不依赖任何后端。**

## 功能

- 🌲 **消息级对话树** — 用户 → 助手 → 工具调用 → 工具结果，完整追溯
- 🖱 **自由拖拽** — 任意拖动节点位置，折叠/展开后位置保持
- 🔍 **缩放平移** — 滚轮缩放，拖拽画布平移
- 📋 **节点详情** — 悬浮查看完整内容，工具调用参数和返回结果一目了然
- 📊 **会话指标** — 消息数、轮次数、树节点数
- ➕ **展开/折叠** — 点击节点切换，子节点默认折叠
- 🔗 **正交折线箭头** — L 形连线 + 三角箭头，清晰表达层级关系

## 快速开始

### 方式一：直接打开（推荐）

```bash
# 用浏览器打开 index.html
open index.html

# 或者启动一个简单的 HTTP 服务
python3 -m http.server 8080
# 打开 http://localhost:8080
```

> 直接打开 `index.html` 就能看到 demo 数据。浏览器可能会因为 `file://` 协议限制 `fetch`，建议用 HTTP 服务。

### 方式二：对接你的数据

提供两个 API 端点即可：

```
GET /api/session-tree        → { roots: [...], total_sessions: N, total_roots: N }
GET /api/session/{id}/messages → { session: {...}, messages: [...], count: N }
```

然后在页面中设置 API 地址：

```javascript
setApiBase('http://your-server:8900');
```

或者直接修改 `index.html` 中的 `API_BASE` 变量。

## 数据格式

### 会话列表 (`/api/session-tree`)

```json
{
  "roots": [
    {
      "id": "session_123",
      "title": "示例会话",
      "message_count": 45,
      "started_at_iso": "2026-06-08T16:40:03",
      "model": "claude-sonnet-4",
      "_total_nodes": 1,
      "children": []
    }
  ],
  "total_sessions": 10,
  "total_roots": 10
}
```

### 消息列表 (`/api/session/{id}/messages`)

```json
{
  "session": {
    "id": "session_123",
    "title": "示例会话",
    "model": "claude-sonnet-4",
    "message_count": 45
  },
  "messages": [
    {
      "id": 1,
      "role": "user",
      "content": "帮我写个排序函数",
      "timestamp": 1781160000
    },
    {
      "id": 2,
      "role": "assistant",
      "content": "好的，这是实现...",
      "tool_calls": "[{\"id\":\"call_1\",\"function\":{\"name\":\"write_file\",\"arguments\":\"...\"}}]"
    },
    {
      "id": 3,
      "role": "tool",
      "tool_call_id": "call_1",
      "tool_name": "write_file",
      "content": "文件写入成功"
    }
  ]
}
```

## 技术栈

- 纯 HTML + CSS + JavaScript（无框架、无构建工具）
- Canvas 2D 渲染
- 零外部依赖

## License

MIT

## 作者

Vicleo