feat(agentsight): add AgentSight Dashboard web UI (#74)

Close #74

Introduce a React-based web Dashboard to provide an interactive
visualization interface for AgentSight:

- Add dashboard/ frontend source under src/agentsight/dashboard/ with
  webpack embed output path set to ../frontend-dist
- Add Makefile targets build-frontend and build-all for one-step
  frontend + Rust builds
- Update README / README_CN with agentsight serve command usage,
  two scenarios (live tracing vs. historical data browsing), and
  remote server access guide

Signed-off-by: liyuqing <liyuqing@alibaba-inc.com>

Author: Daydreamer-Li

src/agentsight/Makefile

@@ -6,6 +6,13 @@
 build: ## Build agentsight binary
 	cargo build --release
 
+.PHONY: build-frontend
+build-frontend: ## Build and embed frontend into frontend-dist/
+	cd dashboard && npm install && npm run build:embed
+
+.PHONY: build-all
+build-all: build-frontend build ## Build frontend then Rust binary (with embedded UI)
+
 # =============================================================================
 # INSTALL
 # =============================================================================

src/agentsight/README.md

@@ -117,6 +117,21 @@ agentsight audit --pid 12345 --type llm
 agentsight audit --summary
 ```
 
+### `agentsight serve`
+
+Start the HTTP API server and serve the embedded Dashboard UI.
+
+```bash
+# Start with default settings (binds to 127.0.0.1:7396)
+agentsight serve
+
+# Bind to all interfaces on a custom port
+agentsight serve --host 0.0.0.0 --port 8080
+
+# Point to a specific database file
+agentsight serve --db /path/to/genai_events.db
+```
+
 ### `agentsight discover`
 
 Discover AI agents running on the system.
@@ -132,6 +147,68 @@ agentsight discover --list
 agentsight discover --verbose
 ```
 
+## Dashboard
+
+The Dashboard is a React-based web UI for visualizing conversation history, trace details, and token statistics. It is embedded into the `agentsight serve` binary at compile time.
+
+### Build the Dashboard
+
+```bash
+cd src/agentsight
+
+# Build frontend and embed into frontend-dist/ (required before cargo build)
+make build-frontend
+
+# Then build the Rust binary with the embedded UI
+make build
+
+# Or do both in one step
+make build-all
+```
+
+### Scenario 1 — Collect data and view the Dashboard simultaneously
+
+Run the tracer and the API server in two separate terminals:
+
+```bash
+# Terminal 1: start eBPF tracing (writes to SQLite)
+sudo agentsight trace
+
+# Terminal 2: start the API server (reads from the same SQLite)
+agentsight serve
+```
+
+Open `http://127.0.0.1:7396` in your browser. The Dashboard auto-refreshes as new data arrives.
+
+> **Running on a remote server?** Bind to all interfaces and access via the server's public IP:
+> ```bash
+> agentsight serve --host 0.0.0.0 --port 7396
+> ```
+> Then open `http://<server-public-ip>:7396` in your local browser.
+> Make sure port 7396 is allowed in the server's firewall / security group rules.
+
+### Scenario 2 — Browse historical data only
+
+No tracing needed. Just start the server pointing at an existing database:
+
+```bash
+agentsight serve --db /path/to/genai_events.db
+```
+
+Open `http://127.0.0.1:7396` to explore recorded conversations and traces.
+
+### Dashboard Development
+
+To iterate on the frontend without rebuilding the Rust binary:
+
+```bash
+cd src/agentsight/dashboard
+npm install
+npm run dev          # starts webpack-dev-server on http://localhost:3004
+```
+
+When finished, run `make build-frontend && cargo build --release` to embed the updated UI.
+
 ## Quick Start
 
 ### Prerequisites

src/agentsight/README_CN.md

@@ -117,6 +117,21 @@ agentsight audit --pid 12345 --type llm
 agentsight audit --summary
 ```
 
+### `agentsight serve`
+
+启动 HTTP API 服务器，同时提供嵌入式 Dashboard UI。
+
+```bash
+# 使用默认配置启动（绑定到 127.0.0.1:7396）
+agentsight serve
+
+# 绑定到所有网络接口并指定端口
+agentsight serve --host 0.0.0.0 --port 8080
+
+# 指定数据库文件路径
+agentsight serve --db /path/to/genai_events.db
+```
+
 ### `agentsight discover`
 
 发现系统上运行的 AI Agent。
@@ -132,6 +147,57 @@ agentsight discover --list
 agentsight discover --verbose
 ```
 
+## Dashboard
+
+Dashboard 是基于 React 的 Web 可视化界面，用于查看对话历史、Trace 详情和 Token 统计数据。它在编译时嵌入到 `agentsight serve` 二进制文件中。
+
+### 构建 Dashboard
+
+```bash
+cd src/agentsight
+
+# 构建前端并输出到 frontend-dist/（cargo build 前必须先执行）
+make build-frontend
+
+# 再构建包含嵌入 UI 的 Rust 二进制
+make build
+
+# 或一步完成
+make build-all
+```
+
+### 场景一 — 同时采集数据并查看 Dashboard
+
+在两个终端中分别运行追踪器和 API 服务器：
+
+```bash
+# 终端 1：启动 eBPF 追踪（写入 SQLite）
+sudo agentsight trace
+
+# 终端 2：启动 API 服务器（读取同一 SQLite 文件）
+agentsight serve
+```
+
+在浏览器中打开 `http://127.0.0.1:7396`，Dashboard 会随新数据自动刷新。
+
+> **在远程服务器上运行？** 绑定到所有网络接口，通过服务器公网 IP 访问：
+> ```bash
+> agentsight serve --host 0.0.0.0 --port 7396
+> ```
+> 然后在本地浏览器中打开 `http://<服务器公网IP>:7396`。
+> 请确保服务器防火墙 / 安全组已放行 7396 端口。
+
+### 场景二 — 仅查看历史数据
+
+无需启动追踪，直接指向已有数据库启动服务器：
+
+```bash
+agentsight serve --db /path/to/genai_events.db
+```
+
+打开 `http://127.0.0.1:7396` 即可浏览已记录的对话和 Trace。
+
+
 ## 快速开始
 
 ### 环境要求

src/agentsight/dashboard/.gitignore

@@ -0,0 +1,19 @@
+# 依赖文件
+node_modules/
+
+# 构建输出
+dist/
+build/
+
+# 环境变量文件
+.env
+.env.local
+
+# 日志文件
+*.log
+
+# 编辑器配置
+.vscode/
+
+# cursor 相关
+.cursorrules

src/agentsight/dashboard/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agent可观测</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>