@opencode-trace/viewer 0.0.2

package/README.md

@@ -0,0 +1,94 @@
+# @opencode-trace/viewer
+
+opencode-trace Web viewer for visualizing AI session trace data.
+
+[![npm version](https://img.shields.io/npm/v/@opencode-trace/viewer)](https://www.npmjs.com/package/@opencode-trace/viewer)
+
+## Installation
+
+```bash
+# Global install
+npm install -g @opencode-trace/viewer
+
+# Or use npx (no installation required)
+npx @opencode-trace/viewer
+```
+
+## Usage
+
+```bash
+# Start Viewer
+npx @opencode-trace/viewer
+
+# Or (if globally installed)
+opencode-trace-viewer
+
+# Or (via CLI)
+opencode-trace viewer
+```
+
+After starting, browser automatically opens (default http://localhost:3000).
+
+### Options
+
+| Option | Description |
+|--------|-------------|
+| `--port <num>` | Specify port (default 3000) |
+| `--no-open` | Don't auto-open browser |
+
+## Features
+
+### Session Management
+
+- Session list (supports tree view)
+- Session search and filtering
+- Session export/import (ZIP format)
+- Session deletion (cascade delete sub-sessions)
+
+### Timeline View
+
+- Request sequence visualization
+- Change comparison (added/deleted messages and Blocks)
+- Token usage statistics (per request)
+- Latency metrics (TTFT, TPOT)
+
+### Record Details
+
+- Complete request/response content
+- Block classification (text, thinking, tool_call, image, etc.)
+- SSE stream data display
+- Error information display
+
+### Trace Control
+
+- Global trace switch
+- Session-level trace switch
+- Real-time status display
+
+## API Endpoints
+
+Viewer provides RESTful API:
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /api/sessions` | List sessions |
+| `GET /api/sessions/tree` | Session tree |
+| `GET /api/sessions/:id/timeline` | Timeline data |
+| `GET /api/sessions/:id/metadata` | Session metadata |
+| `GET /api/sessions/:id/records/:rid` | Record details |
+| `POST /api/sessions/import` | Import ZIP |
+| `GET /api/sessions/:id/export` | Export ZIP |
+| `DELETE /api/sessions/:id` | Delete session |
+| `POST /api/trace/enable` | Enable tracing |
+| `POST /api/trace/disable` | Disable tracing |
+| `GET /api/trace/status` | Trace status |
+
+## Data Source
+
+Viewer reads from `~/.opencode-trace/` directory by default.
+
+Can specify custom directory via environment variable `OPENCODE_TRACE_DIR`.
+
+## License
+
+MIT

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import { createViewer } from "./server.js";
+const args = process.argv.slice(2);
+const openBrowser = !args.includes("--no-open");
+const portArg = args.find((a) => !a.startsWith("--"));
+const port = portArg ? parseInt(portArg, 10) : 3210;
+if (isNaN(port)) {
+    console.error("Usage: opencode-trace-viewer [port] [--no-open]");
+    console.error("Default port: 3210");
+    console.error("  --no-open  Don't open browser automatically");
+    process.exit(1);
+}
+createViewer({ port, open: openBrowser }).then((instance) => {
+    console.log(`opencode-trace viewer running at ${instance.url}`);
+    console.log("Press Ctrl+C to stop");
+    process.on("SIGINT", () => {
+        instance.close();
+        process.exit(0);
+    });
+});
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnC,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AAChD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;AACtD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAEpD,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;IAChB,OAAO,CAAC,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACjE,OAAO,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACpC,OAAO,CAAC,KAAK,CAAC,+CAA+C,CAAC,CAAC;IAC/D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC;AAED,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;IAC1D,OAAO,CAAC,GAAG,CAAC,oCAAoC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAChE,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IAEpC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;QACxB,QAAQ,CAAC,KAAK,EAAE,CAAC;QACjB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createViewer } from "./server.js";
+export type { ViewerOptions, ViewerInstance } from "./server.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createViewer } from "./server.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}

package/dist/public/assets/favicon-v9nnlQV_.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
+  <defs>
+    <linearGradient id="brandGrad" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#FF512F"/>
+      <stop offset="100%" stop-color="#F09819"/>
+    </linearGradient>
+    
+    <style>
+      .path-anim {
+        stroke-dasharray: 440;
+        stroke-dashoffset: 440;
+        animation: draw 2.5s ease-in-out infinite alternate;
+      }
+      .pulse-anim {
+        animation: pulse 1.5s ease-in-out infinite alternate;
+      }
+      @keyframes draw {
+        0% { stroke-dashoffset: 440; }
+        100% { stroke-dashoffset: 0; }
+      }
+      @keyframes pulse {
+        0% { r: 8px; opacity: 1; }
+        100% { r: 20px; opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <rect width="120" height="120" rx="28" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5"/>
+
+  <!-- 底层灰白轨道（更粗） -->
+  <polyline points="22,89 39,51 55,74 71,27 87,60 102,40" 
+            fill="none" stroke="#F1F5F9" stroke-width="9" 
+            stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- 动态生长的 Agent 轨迹线（更粗） -->
+  <polyline class="path-anim"
+            points="22,89 39,51 55,74 71,27 87,60 102,40" 
+            fill="none" stroke="url(#brandGrad)" stroke-width="8" 
+            stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- 静态中间节点（半径更大） -->
+  <circle cx="39" cy="51" r="8" fill="#ffffff" stroke="#F97316" stroke-width="3"/>
+  <circle cx="55" cy="74" r="8" fill="#ffffff" stroke="#F97316" stroke-width="3"/>
+  <circle cx="71" cy="27" r="8" fill="#ffffff" stroke="#F59E0B" stroke-width="3"/>
+  <circle cx="87" cy="60" r="8" fill="#ffffff" stroke="#F59E0B" stroke-width="3"/>
+  
+  <!-- 起始节点（半径更大） -->
+  <circle cx="22" cy="89" r="9" fill="#FF512F"/>
+
+  <!-- 终点（脉冲范围进一步内收） -->
+  <circle class="pulse-anim" cx="102" cy="40" r="8" fill="none" stroke="#F09819" stroke-width="3.5"/>
+  <circle cx="102" cy="40" r="8.5" fill="#F09819"/>
+</svg>