@pi-unipi/trajectory 2.10.0

package/README.md

@@ -0,0 +1,43 @@
+# @pi-unipi/trajectory
+
+Live, localhost-only UniPi trajectory inspector for the current Pi session.
+
+## Usage
+
+```text
+/unipi:trajectory             # open or reuse the server
+/unipi:trajectory stop        # stop this session's server
+/unipi:trajectory off         # alias of stop
+/unipi:trajectory toggle      # open when stopped, stop when running
+```
+
+The command starts or reuses an in-process server on `127.0.0.1:8176-8186` and opens it in the default browser. The page follows the active session every 500 ms. The server is owned by the current Pi process and is stopped on any Pi session shutdown/reload/resume/new/fork event.
+
+## What it shows
+
+- Turn-aware User, Assistant, Tool, Compaction, and Branch ledger
+- Assistant reasoning and final output
+- Tool payloads, results, errors, and measured call duration
+- Provider, model, stop reason, token usage, cache reads/writes, and cost
+- Provider, model, thinking level, request payload/options, tool schemas, response status/headers
+- Exact TTFT, decoding/total request timing, and tool execution timing
+- Input/Model/Tools overview timeline with drag-to-focus
+- Search, turn folding, call folding, and a local record inspector
+
+## Privacy and model behavior
+
+The server binds only to `127.0.0.1`. It reads `SessionManager.getBranch()` and never appends or changes session entries, prompts, provider requests, or model context. It therefore has no prefix-cache effect.
+
+Detailed telemetry is appended to `~/.unipi/trajectory/<session-id>.jsonl` with a private directory/file mode. Authorization, API-key, token, cookie, secret, password, and credential fields and credential-shaped values are recursively redacted before persistence.
+
+Detailed request fields appear when captured by the trajectory telemetry sidecar.
+
+## Lifecycle
+
+Each Pi process owns its own trajectory server. A second Pi process running `/unipi:trajectory` picks the next free localhost port in `8176-8186`; it never attaches to or controls another Pi process's server. When the owning Pi session exits, reloads, resumes another session, starts a new session, or forks, its server is closed.
+
+## Limitations
+
+- Live transport uses 500 ms polling rather than a push stream.
+- Very large branches are rendered in one table; browser virtualization can be added if measured sessions require it.
+- Tool duration uses exact executor telemetry when captured and session timestamps otherwise.

package/index.ts

@@ -0,0 +1,58 @@
+import type { ExtensionAPI, ExtensionContext, SessionEntry } from "@earendil-works/pi-coding-agent";
+import { registerTelemetryCapture } from "./src/capture.js";
+import { projectTrajectory } from "./src/project.js";
+import { openBrowser, TrajectoryServer } from "./src/server.js";
+
+let server: TrajectoryServer | null = null;
+let currentContext: ExtensionContext | null = null;
+
+function stopServer(): boolean {
+  if (!server?.url) return false;
+  server.stop();
+  server = null;
+  return true;
+}
+
+export default function trajectory(pi: ExtensionAPI): void {
+  const readTelemetry = registerTelemetryCapture(pi);
+
+  pi.registerCommand("unipi:trajectory", {
+    description: "Open or manage UniPi's live trajectory for the current session",
+    handler: async (args, ctx) => {
+      const action = String(args ?? "").trim().toLowerCase();
+      const wantsStop = ["stop", "off", "--stop", "--off"].includes(action);
+      const wantsToggle = ["toggle", "--toggle"].includes(action);
+      if (wantsStop || (wantsToggle && server?.url)) {
+        ctx.ui.notify(stopServer() ? "Trajectory stopped" : "Trajectory is not running", "info");
+        return;
+      }
+
+      currentContext = ctx;
+      if (!server) {
+        server = new TrajectoryServer({
+          snapshot: () => {
+            const active = currentContext ?? ctx;
+            return projectTrajectory(active.sessionManager.getBranch() as SessionEntry[], {
+              sessionId: active.sessionManager.getSessionId(),
+              name: active.sessionManager.getSessionName(),
+              cwd: active.cwd,
+            }, readTelemetry());
+          },
+        });
+      }
+      try {
+        const url = await server.start();
+        openBrowser(url);
+        ctx.ui.notify(`Trajectory running at ${url}`, "info");
+      } catch (error) {
+        ctx.ui.notify(`Trajectory error: ${error instanceof Error ? error.message : String(error)}`, "error");
+      }
+    },
+  });
+
+  pi.on("session_start", (_event, ctx) => { currentContext = ctx; });
+  pi.on("session_shutdown", () => {
+    currentContext = null;
+    stopServer();
+  });
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@pi-unipi/trajectory",
+  "version": "2.10.0",
+  "description": "Live UniPi trajectory inspector for Pi sessions",
+  "type": "module",
+  "main": "index.ts",
+  "license": "MIT",
+  "author": "Neuron Mr White",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Neuron-Mr-White/unipi.git",
+    "directory": "packages/trajectory"
+  },
+  "keywords": [
+    "pi-package",
+    "pi-extension",
+    "trajectory",
+    "observability"
+  ],
+  "files": [
+    "index.ts",
+    "src/**/*.ts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "^0.84.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "typescript": "^6.0.0"
+  },
+  "pi": {
+    "extensions": [
+      "./index.ts"
+    ],
+    "skills": [],
+    "prompts": [],
+    "themes": []
+  }
+}

package/src/capture.ts

@@ -0,0 +1,83 @@
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { TelemetrySidecar } from "./telemetry.js";
+
+interface RequestState {
+  id: number;
+  startedAt: number;
+  firstTokenAt?: number;
+}
+
+/** Register read-only observability hooks. Returned reader follows the active session. */
+export function registerTelemetryCapture(pi: ExtensionAPI): () => ReturnType<TelemetrySidecar["read"]> {
+  let sidecar: TelemetrySidecar | null = null;
+  let requestSeq = 0;
+  let active: RequestState | null = null;
+  const toolStarts = new Map<string, number>();
+
+  const bind = (ctx: ExtensionContext) => {
+    sidecar = new TelemetrySidecar(ctx.sessionManager.getSessionId());
+    active = null;
+    toolStarts.clear();
+  };
+  const append = (type: Parameters<TelemetrySidecar["append"]>[0]["type"], data?: unknown, extra: Record<string, unknown> = {}) => {
+    sidecar?.append({ type, at: Date.now(), ...extra, ...(data === undefined ? {} : { data }) });
+  };
+
+  pi.on("session_start", (_event, ctx) => { bind(ctx); });
+  pi.on("before_provider_request", (event, ctx) => {
+    const startedAt = Date.now();
+    active = { id: ++requestSeq, startedAt };
+    append("request", {
+      payload: event.payload,
+      provider: ctx.model?.provider,
+      model: ctx.model?.id,
+      thinkingLevel: ctx.thinkingLevel,
+      tools: Array.isArray((event.payload as { tools?: unknown })?.tools)
+        ? (event.payload as { tools: unknown }).tools
+        : undefined,
+    }, { requestId: active.id });
+  });
+  pi.on("after_provider_response", (event) => {
+    append("response", { status: event.status, headers: event.headers }, active ? { requestId: active.id } : {});
+  });
+  pi.on("message_update", (event) => {
+    if (!active || active.firstTokenAt !== undefined) return;
+    if (!["text_delta", "thinking_delta", "toolcall_delta"].includes(event.assistantMessageEvent.type)) return;
+    active.firstTokenAt = Date.now();
+    append("first-token", {
+      ttftMs: active.firstTokenAt - active.startedAt,
+      eventType: event.assistantMessageEvent.type,
+    }, { requestId: active.id });
+  });
+  pi.on("message_end", (event) => {
+    if (event.message.role !== "assistant" || !active) return;
+    const completedAt = Date.now();
+    append("message-end", {
+      totalMs: completedAt - active.startedAt,
+      ttftMs: active.firstTokenAt === undefined ? undefined : active.firstTokenAt - active.startedAt,
+      decodingMs: active.firstTokenAt === undefined ? undefined : completedAt - active.firstTokenAt,
+      usage: event.message.usage,
+      stopReason: event.message.stopReason,
+      errorMessage: event.message.errorMessage,
+    }, { requestId: active.id });
+    active = null;
+  });
+  pi.on("tool_execution_start", (event) => {
+    const at = Date.now();
+    toolStarts.set(event.toolCallId, at);
+    append("tool-start", { toolName: event.toolName, args: event.args }, { toolCallId: event.toolCallId });
+  });
+  pi.on("tool_execution_end", (event) => {
+    const at = Date.now();
+    const startedAt = toolStarts.get(event.toolCallId);
+    append("tool-end", {
+      toolName: event.toolName,
+      result: event.result,
+      isError: event.isError,
+      durationMs: startedAt === undefined ? undefined : at - startedAt,
+    }, { toolCallId: event.toolCallId });
+    toolStarts.delete(event.toolCallId);
+  });
+
+  return () => sidecar?.read() ?? [];
+}

package/src/project.ts

@@ -0,0 +1,193 @@
+import type { SessionEntry } from "@earendil-works/pi-coding-agent";
+import type { TelemetryEvent } from "./telemetry.js";
+
+export type TrajectoryKind = "system" | "user" | "assistant" | "tool" | "compaction" | "branch";
+
+export interface TrajectoryUsage {
+  input?: number;
+  output?: number;
+  cacheRead?: number;
+  cacheWrite?: number;
+  reasoning?: number;
+  totalTokens?: number;
+  cost?: number;
+}
+
+export interface TrajectoryRecord {
+  id: string;
+  seq: number;
+  turn: number | null;
+  step: number | null;
+  kind: TrajectoryKind;
+  timestamp: number;
+  durationMs: number | null;
+  title: string;
+  preview: string;
+  input?: unknown;
+  output?: unknown;
+  thinking?: string;
+  provider?: string;
+  model?: string;
+  stopReason?: string;
+  isError?: boolean;
+  toolCallId?: string;
+  toolName?: string;
+  usage?: TrajectoryUsage;
+  tokensBefore?: number;
+  timing?: { ttftMs?: number; decodingMs?: number; totalMs?: number };
+  request?: unknown;
+  response?: unknown;
+  tools?: unknown;
+}
+
+export interface TrajectorySnapshot {
+  sessionId: string;
+  name?: string;
+  cwd?: string;
+  generatedAt: number;
+  records: TrajectoryRecord[];
+}
+
+type AnyRecord = Record<string, any>;
+
+function timestamp(value: unknown, fallback = 0): number {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Date.parse(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+
+function textContent(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  return content.flatMap((block: AnyRecord) => {
+    if (block?.type === "text") return [String(block.text ?? "")];
+    if (block?.type === "thinking") return [String(block.thinking ?? "")];
+    return [];
+  }).filter(Boolean).join("\n\n");
+}
+
+function preview(value: unknown, limit = 180): string {
+  const text = typeof value === "string" ? value : textContent(value);
+  const compact = text.replace(/\s+/g, " ").trim();
+  return compact.length > limit ? `${compact.slice(0, limit - 1)}…` : compact;
+}
+
+function usage(value: AnyRecord | undefined): TrajectoryUsage | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  return {
+    ...(typeof value.input === "number" ? { input: value.input } : {}),
+    ...(typeof value.output === "number" ? { output: value.output } : {}),
+    ...(typeof value.cacheRead === "number" ? { cacheRead: value.cacheRead } : {}),
+    ...(typeof value.cacheWrite === "number" ? { cacheWrite: value.cacheWrite } : {}),
+    ...(typeof value.reasoning === "number" ? { reasoning: value.reasoning } : {}),
+    ...(typeof value.totalTokens === "number" ? { totalTokens: value.totalTokens } : {}),
+    ...(typeof value.cost?.total === "number" ? { cost: value.cost.total } : {}),
+  };
+}
+
+/** Project Pi's active append-only branch into UniPi's stable trajectory ledger. */
+export function projectTrajectory(
+  entries: readonly SessionEntry[],
+  meta: { sessionId: string; name?: string; cwd?: string },
+  telemetry: readonly TelemetryEvent[] = [],
+): TrajectorySnapshot {
+  const records: TrajectoryRecord[] = [];
+  const pendingCalls = new Map<string, { record: TrajectoryRecord; startedAt: number }>();
+  let turn = 0;
+  let step = 0;
+
+  for (const [seq, typedEntry] of entries.entries()) {
+    const entry = typedEntry as unknown as AnyRecord;
+    const at = timestamp(entry.timestamp);
+    if (entry.type === "message") {
+      const message = entry.message as AnyRecord;
+      const messageAt = timestamp(message?.timestamp, at);
+      if (message?.role === "user") {
+        turn++;
+        step = 0;
+        const body = textContent(message.content);
+        records.push({ id: entry.id, seq, turn, step: null, kind: "user", timestamp: messageAt, durationMs: null, title: "USER", preview: preview(body), input: message.content });
+        continue;
+      }
+      if (message?.role === "assistant") {
+        step++;
+        const blocks = Array.isArray(message.content) ? message.content as AnyRecord[] : [];
+        const thinking = blocks.filter(block => block.type === "thinking").map(block => String(block.thinking ?? "")).join("\n\n");
+        const output = blocks.filter(block => block.type === "text").map(block => String(block.text ?? "")).join("\n\n");
+        const record: TrajectoryRecord = {
+          id: entry.id, seq, turn: turn || null, step, kind: "assistant", timestamp: messageAt,
+          durationMs: null, title: "ASSISTANT", preview: preview(output || thinking || (blocks.some(block => block.type === "toolCall") ? "Tool call only" : "")),
+          output, ...(thinking ? { thinking } : {}), provider: message.provider, model: message.model,
+          stopReason: message.stopReason, isError: message.stopReason === "error", usage: usage(message.usage),
+        };
+        records.push(record);
+        for (const [callIndex, block] of blocks.filter(block => block.type === "toolCall").entries()) {
+          const callAt = messageAt + callIndex * 0.001;
+          const call: TrajectoryRecord = {
+            id: `${entry.id}:${block.id}`, seq: seq + (callIndex + 1) / 1000, turn: turn || null, step,
+            kind: "tool", timestamp: callAt, durationMs: null, title: String(block.name ?? "TOOL"),
+            preview: preview(JSON.stringify(block.arguments ?? {})), input: block.arguments,
+            toolCallId: String(block.id ?? ""), toolName: String(block.name ?? ""),
+          };
+          records.push(call);
+          if (call.toolCallId) pendingCalls.set(call.toolCallId, { record: call, startedAt: callAt });
+        }
+        continue;
+      }
+      if (message?.role === "toolResult") {
+        const callId = String(message.toolCallId ?? "");
+        const pending = pendingCalls.get(callId);
+        const body = textContent(message.content);
+        if (pending) {
+          pending.record.output = message.content;
+          pending.record.preview = pending.record.preview || preview(body);
+          pending.record.durationMs = Math.max(0, messageAt - pending.startedAt);
+          pending.record.isError = Boolean(message.isError);
+          pending.record.usage = usage(message.usage);
+          pendingCalls.delete(callId);
+        } else {
+          records.push({ id: entry.id, seq, turn: turn || null, step: step || null, kind: "tool", timestamp: messageAt, durationMs: null, title: String(message.toolName ?? "TOOL"), preview: preview(body), output: message.content, toolCallId: callId, toolName: message.toolName, isError: Boolean(message.isError), usage: usage(message.usage) });
+        }
+        continue;
+      }
+      if (message?.role === "bashExecution") {
+        records.push({ id: entry.id, seq, turn: turn || null, step: step || null, kind: "tool", timestamp: messageAt, durationMs: null, title: "bash", preview: preview(message.command), input: { command: message.command }, output: message.output, isError: Boolean(message.cancelled || (message.exitCode ?? 0) !== 0) });
+      }
+      continue;
+    }
+    if (entry.type === "compaction") {
+      records.push({ id: entry.id, seq, turn: null, step: null, kind: "compaction", timestamp: at, durationMs: null, title: "COMPACTED", preview: preview(entry.summary), output: entry.summary, usage: usage(entry.usage), tokensBefore: entry.tokensBefore });
+    } else if (entry.type === "branch_summary") {
+      records.push({ id: entry.id, seq, turn: null, step: null, kind: "branch", timestamp: at, durationMs: null, title: "BRANCH", preview: preview(entry.summary), output: entry.summary, usage: usage(entry.usage) });
+    }
+  }
+
+  const assistantRecords = records.filter(record => record.kind === "assistant");
+  const requestIds = [...new Set(telemetry.flatMap(event => event.requestId === undefined ? [] : [event.requestId]))];
+  for (const [index, requestId] of requestIds.entries()) {
+    const record = assistantRecords[index];
+    if (!record) break;
+    const events = telemetry.filter(event => event.requestId === requestId);
+    const request = events.find(event => event.type === "request")?.data as AnyRecord | undefined;
+    const response = events.find(event => event.type === "response")?.data;
+    const end = events.find(event => event.type === "message-end")?.data as AnyRecord | undefined;
+    record.request = request;
+    record.response = response;
+    record.tools = request?.tools;
+    record.timing = end === undefined ? undefined : {
+      ...(typeof end.ttftMs === "number" ? { ttftMs: end.ttftMs } : {}),
+      ...(typeof end.decodingMs === "number" ? { decodingMs: end.decodingMs } : {}),
+      ...(typeof end.totalMs === "number" ? { totalMs: end.totalMs } : {}),
+    };
+    if (typeof end?.totalMs === "number") record.durationMs = end.totalMs;
+  }
+  for (const record of records.filter(record => record.kind === "tool" && record.toolCallId)) {
+    const end = telemetry.find(event => event.type === "tool-end" && event.toolCallId === record.toolCallId)?.data as AnyRecord | undefined;
+    if (typeof end?.durationMs === "number") record.durationMs = end.durationMs;
+  }
+
+  return { ...meta, generatedAt: Date.now(), records };
+}

package/src/server.ts

@@ -0,0 +1,88 @@
+import { spawn } from "node:child_process";
+import { createServer, type Server, type ServerResponse } from "node:http";
+import type { TrajectorySnapshot } from "./project.js";
+import { TRAJECTORY_APP, TRAJECTORY_CSS, TRAJECTORY_HTML, TRAJECTORY_THEME_CSS } from "./ui.js";
+
+export interface TrajectoryServerOptions {
+  snapshot: () => TrajectorySnapshot;
+  port?: number;
+  maxPort?: number;
+}
+
+const HOST = "127.0.0.1";
+
+function json(res: ServerResponse, value: unknown): void {
+  res.writeHead(200, {
+    "Cache-Control": "no-store",
+    "Content-Type": "application/json; charset=utf-8",
+    "X-Content-Type-Options": "nosniff",
+  });
+  res.end(JSON.stringify(value));
+}
+
+export class TrajectoryServer {
+  private server: Server | null = null;
+  private readonly options: Required<Pick<TrajectoryServerOptions, "port" | "maxPort">> & TrajectoryServerOptions;
+  url: string | null = null;
+
+  constructor(options: TrajectoryServerOptions) {
+    this.options = { ...options, port: options.port ?? 8176, maxPort: options.maxPort ?? 8186 };
+  }
+
+  async start(): Promise<string> {
+    if (this.url) return this.url;
+    this.server = createServer((req, res) => {
+      try {
+        const url = new URL(req.url ?? "/", `http://${HOST}`);
+        if (req.method !== "GET") { res.writeHead(405).end("Method Not Allowed"); return; }
+        if (url.pathname === "/api/snapshot") { json(res, this.options.snapshot()); return; }
+        if (url.pathname === "/favicon.ico") { res.writeHead(204).end(); return; }
+        if (url.pathname === "/app.js") {
+        res.writeHead(200, { "Cache-Control": "no-store", "Content-Type": "application/javascript; charset=utf-8", "X-Content-Type-Options": "nosniff" });
+        res.end(TRAJECTORY_APP); return;
+      }
+      if (url.pathname === "/style.css") {
+        res.writeHead(200, { "Cache-Control": "no-store", "Content-Type": "text/css; charset=utf-8", "X-Content-Type-Options": "nosniff" });
+        res.end(`${TRAJECTORY_CSS}\n${TRAJECTORY_THEME_CSS}`); return;
+      }
+      if (url.pathname === "/") {
+        res.writeHead(200, { "Cache-Control": "no-store", "Content-Security-Policy": "default-src 'self'; style-src 'self'", "Content-Type": "text/html; charset=utf-8", "X-Frame-Options": "DENY" });
+        res.end(TRAJECTORY_HTML); return;
+      }
+        res.writeHead(404).end("Not Found");
+      } catch (error) {
+        res.writeHead(500, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({ error: error instanceof Error ? error.message : String(error) }));
+      }
+    });
+    for (let port = this.options.port; port <= this.options.maxPort; port++) {
+      try {
+        await new Promise<void>((resolve, reject) => {
+          const onError = (error: Error) => { this.server?.off("listening", onListening); reject(error); };
+          const onListening = () => { this.server?.off("error", onError); resolve(); };
+          this.server!.once("error", onError).once("listening", onListening).listen(port, HOST);
+        });
+        this.url = `http://${HOST}:${port}`;
+        return this.url;
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code !== "EADDRINUSE") throw error;
+      }
+    }
+    this.server = null;
+    throw new Error(`No trajectory port available (${this.options.port}-${this.options.maxPort})`);
+  }
+
+  stop(): void {
+    this.server?.close();
+    this.server = null;
+    this.url = null;
+  }
+}
+
+export function openBrowser(url: string): void {
+  const command = process.platform === "darwin" ? "open" : process.platform === "win32" ? "cmd" : "xdg-open";
+  const args = process.platform === "win32" ? ["/c", "start", "", url] : [url];
+  const child = spawn(command, args, { detached: true, stdio: "ignore" });
+  child.on("error", () => {});
+  child.unref();
+}

package/src/telemetry.ts

@@ -0,0 +1,75 @@
+import { appendFileSync, mkdirSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+export type TelemetryEventType =
+  | "request"
+  | "response"
+  | "first-token"
+  | "message-end"
+  | "tool-start"
+  | "tool-end";
+
+export interface TelemetryEvent {
+  v: 1;
+  type: TelemetryEventType;
+  at: number;
+  requestId?: number | string;
+  toolCallId?: string;
+  data?: unknown;
+}
+
+const SECRET_KEY = /authorization|api[-_]?key|token|cookie|secret|password|credential/i;
+const SECRET_VALUE = /^(?:bearer\s+|sk-[a-z0-9_-]{12,}|gh[pousr]_[a-z0-9]{12,}|AIza[a-z0-9_-]{20,})/i;
+const MAX_STRING = 200_000;
+/** Hard ceiling on a serialized event; guards against pathological payloads. */
+const MAX_EVENT_BYTES = 2_000_000;
+/** Sidecar reads are capped so projection cannot allocate unbounded memory. */
+const MAX_READ_BYTES = 20_000_000;
+
+export function redactTelemetry(value: unknown, seen = new WeakSet<object>()): unknown {
+  if (typeof value === "string") {
+    if (SECRET_VALUE.test(value.trim())) return "[REDACTED]";
+    return value.length > MAX_STRING ? `${value.slice(0, MAX_STRING)}…[truncated]` : value;
+  }
+  if (value === null || typeof value !== "object") return value;
+  if (seen.has(value)) return "[Circular]";
+  seen.add(value);
+  if (Array.isArray(value)) return value.map(item => redactTelemetry(item, seen));
+  return Object.fromEntries(Object.entries(value as Record<string, unknown>).map(([key, item]) => [
+    key,
+    SECRET_KEY.test(key) ? "[REDACTED]" : redactTelemetry(item, seen),
+  ]));
+}
+
+export class TelemetrySidecar {
+  readonly file: string;
+
+  constructor(sessionId: string, root = join(homedir(), ".unipi", "trajectory")) {
+    mkdirSync(root, { recursive: true, mode: 0o700 });
+    this.file = join(root, `${sessionId.replace(/[^a-zA-Z0-9._-]/g, "_")}.jsonl`);
+  }
+
+  append(event: Omit<TelemetryEvent, "v">): void {
+    const serialized = JSON.stringify(redactTelemetry({ v: 1, ...event }));
+    if (serialized.length > MAX_EVENT_BYTES) return;
+    appendFileSync(this.file, `${serialized}\n`, { encoding: "utf8", mode: 0o600 });
+  }
+
+  read(): TelemetryEvent[] {
+    try {
+      let lines = readFileSync(this.file, "utf8");
+      if (lines.length > MAX_READ_BYTES) {
+        // Keep the most recent events; skip complete earlier lines.
+        const keep = lines.slice(lines.length - MAX_READ_BYTES);
+        lines = keep.slice(keep.indexOf("\n") + 1);
+      }
+      return lines.split("\n").filter(Boolean).flatMap(line => {
+        try { return [JSON.parse(line) as TelemetryEvent]; } catch { return []; }
+      });
+    } catch {
+      return [];
+    }
+  }
+}
+

package/src/ui.ts

@@ -0,0 +1,67 @@
+export const TRAJECTORY_HTML = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>UniPi Trajectory</title><link rel="stylesheet" href="/style.css"></head><body>
+<div id="app"><nav class="product-nav" aria-label="UniPi"><strong>UniPi</strong><span>Trajectory</span></nav><header class="toolbar" aria-label="Trajectory toolbar">
+  <button id="duration" class="toggle" type="button" aria-pressed="false">◷ Duration</button>
+  <button id="turns" class="toggle" type="button" aria-pressed="false">Turns</button>
+  <button id="calls" class="toggle" type="button" aria-pressed="false">Calls</button>
+  <span class="spacer"></span><span id="connection" class="connection">UniPi · Live</span>
+  <button id="theme" class="theme-toggle" type="button" aria-label="Toggle dark theme" title="Toggle theme">☾</button>
+  <label class="search"><span>⌕</span><input id="search" type="search" aria-label="Search trajectory" placeholder="Search trajectory"></label>
+</header>
+<section class="timeline" aria-label="Trajectory timeline"><div class="lane-labels"><span>Input</span><span>Model</span><span>Tools</span></div><div id="timeline-track" class="timeline-track" tabindex="0" aria-label="Timeline overview; drag horizontally to focus events"></div></section>
+<div class="workspace"><section id="ledger-pane" class="ledger-pane"><table aria-label="Trajectory event ledger"><colgroup><col class="event-column"><col></colgroup><tbody id="ledger"></tbody></table><div id="empty" class="empty">Trajectory will appear here</div></section>
+<aside id="details" class="details" aria-label="Event details" hidden><header><div><strong id="detail-kind"></strong><small id="detail-location"></small></div><button id="detail-close" aria-label="Close details">×</button></header><nav id="detail-tabs" class="tabs" role="tablist"></nav><section id="detail-body" class="detail-body"></section></aside></div></div>
+<script type="module" src="/app.js"></script></body></html>`;
+
+export const TRAJECTORY_CSS = `
+:root{color-scheme:light;--bg:#f7f8fa;--panel:#fff;--line:#e4e6eb;--muted:#74777d;--text:#202124;--blue:#3977ef;--user:#4d8bf5;--model:#9b70df;--tool:#e39b45;--error:#dc4b4b;font:13px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}.product-nav{height:34px;display:flex;align-items:center;gap:20px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--panel);font-size:12px}.product-nav strong{font-weight:600}.product-nav span{height:34px;display:flex;align-items:center;border-bottom:2px solid var(--blue);color:var(--blue)}.toolbar{height:32px;display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line)}button{border:1px solid var(--line);background:#fff;border-radius:4px;color:#50535a;padding:3px 8px;cursor:pointer}.toggle{border-color:transparent;background:transparent;padding:2px}.toggle.active{background:#edf3ff;border-color:#b9cdf7;color:#245ec8}.spacer{flex:1}.connection{font-size:11px;color:var(--muted)}.connection.live{color:#27865b}.search{display:flex;align-items:center;gap:6px;width:min(280px,32vw);border:1px solid var(--line);background:#fafbfc;border-radius:6px;padding:5px 9px}.search input{width:100%;border:0;outline:0;background:transparent}.timeline{height:84px;display:grid;grid-template-columns:56px 1fr;background:var(--panel);border-bottom:1px solid var(--line)}.lane-labels{position:relative;border-right:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1}.lane-labels span{position:absolute;right:5px;height:12px}.lane-labels span:nth-child(1){top:12px}.lane-labels span:nth-child(2){top:35px}.lane-labels span:nth-child(3){top:58px}.timeline-track{position:relative;overflow:hidden;cursor:crosshair}.span{position:absolute;height:12px;min-width:2px;border-radius:1px;opacity:.9;transition:opacity .1s,filter .1s}.span:hover,.span.selected{opacity:1;filter:brightness(.92);z-index:3}.span.user{top:12px;background:var(--user)}.span.assistant{top:35px;background:var(--model)}.span.tool{top:58px;background:var(--tool)}.span.compaction,.span.branch{top:35px;background:#8b919d}.span.error{background:var(--error)}.range{position:absolute;inset:0 auto 0 0;background:#3977ef1c;border-left:1px solid var(--blue);border-right:1px solid var(--blue);pointer-events:none;z-index:2}.workspace{height:calc(100vh - 150px);display:grid;grid-template-columns:minmax(360px,1fr) minmax(340px,38%)}.workspace.details-closed{grid-template-columns:1fr}.ledger-pane{overflow:auto;background:var(--panel)}table{width:100%;border-collapse:collapse;table-layout:fixed}tr{border-bottom:1px solid #eceef1;cursor:pointer}tr.turn-start{border-top:3px solid #cfd3da}tr:hover{background:#f6f8fc}tr.selected{background:#edf3ff}tr.filtered,tr.timeline-filtered{display:none}td{height:30px;vertical-align:middle;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-column{width:172px}.event{position:relative;overflow:visible!important;color:#555a63;text-align:right;padding-left:76px!important}.event::before{content:'•';position:absolute;left:13px;color:#81858d}.request-boundary{position:absolute;top:3px;left:20px;display:inline-grid;align-items:center;height:14px;max-width:68px;padding:0 5px;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--muted);font:9px/12px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.045em}.badge.user{color:var(--user)}.badge.assistant{color:var(--model)}.badge.tool{color:#b87322}.badge.compaction,.badge.branch{color:#6f7580}.request{display:inline-block;margin-right:6px;padding:2px 5px;border:1px solid #d7d9df;border-radius:4px;color:#666;font-weight:500;letter-spacing:0}.location{display:none}.content{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.4}.arrow{color:#a3a6ad;margin:0 6px}.result{color:#656a73}.error-text{color:var(--error)}.empty{display:none;padding:50px;text-align:center;color:var(--muted)}.empty.visible{display:block}.details{border-left:1px solid var(--line);background:var(--panel);overflow:hidden}.details>header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}.details>header div{display:flex;flex-direction:column;gap:3px}.details small{color:var(--muted)}#detail-close{font-size:18px;border:0}.tabs{display:flex;gap:2px;padding:8px 12px 0;border-bottom:1px solid var(--line);overflow:auto}.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px}.tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}.detail-body{height:calc(100% - 101px);overflow:auto;padding:15px}.summary{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;margin:0}.summary dt{color:var(--muted)}.summary dd{margin:0;overflow-wrap:anywhere}.payload{margin:0;padding:13px;background:#f5f6f8;border:1px solid #e5e7eb;border-radius:6px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.folded{display:none}@media(max-width:760px){.workspace{grid-template-columns:1fr}.details{position:absolute;inset:150px 0 0 10%;z-index:10;box-shadow:-8px 0 24px #0002}.event-column{width:156px}.timeline{grid-template-columns:50px 1fr}.request-boundary{left:18px}.search{width:160px}.product-nav{padding:0 10px}.toolbar{padding:0 10px}}
+`;
+
+export const TRAJECTORY_THEME_CSS = `
+:root{
+  color-scheme:light;
+  --background:oklch(0.9809 0.0025 228.7836);--foreground:oklch(0.3211 0 0);
+  --card:oklch(1 0 0);--card-foreground:oklch(0.3211 0 0);
+  --primary:oklch(0.8677 0.0735 7.0855);--primary-foreground:oklch(0 0 0);
+  --secondary:oklch(0.8148 0.0819 225.7537);--secondary-foreground:oklch(0 0 0);
+  --muted:oklch(0.8828 0.0285 98.1033);--muted-foreground:oklch(0.5382 0 0);
+  --accent:oklch(0.968 0.211 109.7692);--accent-foreground:oklch(0 0 0);
+  --destructive:oklch(0.6368 0.2078 25.3313);--border:oklch(0.8699 0 0);--input:oklch(0.8699 0 0);--ring:oklch(0.8677 0.0735 7.0855);
+  --trajectory-user:oklch(0.67 0.085 235);--trajectory-model:oklch(0.67 0.12 307);--trajectory-tool:oklch(0.72 0.16 63);--radius:.5rem;--shadow-sm:0 1px 3px hsl(0 0% 0%/.1),0 1px 2px -1px hsl(0 0% 0%/.1);--shadow-lg:0 1px 3px hsl(0 0% 0%/.1),0 8px 18px -5px hsl(0 0% 0%/.14);
+  --font-sans:Poppins,Inter,ui-sans-serif,system-ui,sans-serif;--font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+:root.dark{color-scheme:dark;--trajectory-user:#9aa7b5;--trajectory-model:#9876c2;--trajectory-tool:#e9943a;--background:oklch(0.2303 0.0125 264.2926);--foreground:oklch(0.9219 0 0);--card:oklch(0.321 0.0078 223.6661);--card-foreground:oklch(0.9219 0 0);--primary:oklch(0.8027 0.1355 349.2347);--primary-foreground:oklch(0 0 0);--secondary:oklch(0.7395 0.2268 142.8504);--secondary-foreground:oklch(0 0 0);--muted:oklch(0.3867 0 0);--muted-foreground:oklch(0.7155 0 0);--accent:oklch(0.8148 0.0819 225.7537);--accent-foreground:oklch(0 0 0);--border:oklch(0.3867 0 0);--input:oklch(0.3867 0 0);--ring:oklch(0.8027 0.1355 349.2347)}
+html,body{background:var(--background);color:var(--foreground);font-family:var(--font-sans)}
+.product-nav,.toolbar{background:var(--card);border-color:var(--border)}.toolbar{height:32px;margin:0;padding:0 20px;border-width:0 0 1px;border-style:solid;border-radius:0;box-shadow:none}
+button{background:var(--card);color:var(--card-foreground);border-color:var(--border);border-radius:var(--radius);transition:transform .12s,box-shadow .12s,background .12s}button:hover{background:color-mix(in oklch,var(--muted) 42%,var(--card));box-shadow:var(--shadow-sm)}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,.timeline-track:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+.toggle.active{background:var(--primary);border-color:color-mix(in oklch,var(--primary) 72%,var(--border));color:var(--primary-foreground)}.theme-toggle{width:32px;height:32px;padding:0;font-size:16px}.connection.live{color:color-mix(in oklch,var(--secondary) 80%,var(--foreground))}.search{background:color-mix(in oklch,var(--card) 78%,var(--background));border-color:var(--input);border-radius:var(--radius)}.search input{color:var(--foreground)}
+.timeline{height:84px;margin:0;background:var(--card);border-width:0 0 1px;border-style:solid;border-color:var(--border);border-radius:0;box-shadow:none}.timeline-track{border-left-color:var(--border);border-radius:0;background:transparent}.lane-labels,.location,.details small,.summary dt{color:var(--muted-foreground)}.span.user{background:var(--trajectory-user)}.span.assistant{background:var(--trajectory-model)}.span.tool{background:var(--trajectory-tool)}.span.compaction,.span.branch{background:var(--muted)}.range{background:color-mix(in oklch,var(--secondary) 20%,transparent);border-color:var(--secondary)}
+.workspace{height:calc(100vh - 150px);gap:0;padding:0}.ledger-pane,.details{background:var(--card);border:0;border-radius:0;box-shadow:none;overflow:auto}.details{border-left:1px solid var(--border);box-shadow:var(--shadow-lg)}tr{border-bottom-color:color-mix(in oklch,var(--border) 72%,transparent)}tr.turn-start{border-top-color:var(--secondary)}tr:hover{background:color-mix(in oklch,var(--muted) 24%,transparent)}tr.selected{background:color-mix(in oklch,var(--secondary) 18%,transparent)}.content{font-family:var(--font-mono)}.request{background:color-mix(in oklch,var(--muted) 26%,transparent);border-color:var(--border);color:var(--muted-foreground)}.badge.user{color:var(--trajectory-user)}.badge.assistant{padding:2px 5px;border-radius:3px;background:color-mix(in oklch,var(--trajectory-model) 18%,transparent);color:var(--trajectory-model)}.badge.tool{color:var(--trajectory-tool)}.result{color:var(--muted-foreground)}.error-text{color:var(--destructive)}
+.details>header,.tabs{border-color:var(--border)}.tabs button.active{color:var(--secondary);border-bottom-color:var(--secondary)}.payload{font-family:var(--font-mono);background:color-mix(in oklch,var(--background) 70%,var(--card));border-color:var(--border)}
+@media(max-width:760px){.toolbar{margin:0}.timeline{margin:0}.workspace{height:calc(100vh - 150px);padding:0}.details{inset:150px 0 0 6%;border-radius:0}.connection{display:none}}
+`;
+
+export const TRAJECTORY_APP = String.raw`
+const q=s=>document.querySelector(s), ledger=q('#ledger'), empty=q('#empty'), details=q('#details'), workspace=q('.workspace'), track=q('#timeline-track');
+const savedTheme=localStorage.getItem('unipi-trajectory-theme');const prefersDark=matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.toggle('dark',savedTheme?savedTheme==='dark':prefersDark);
+let snapshot={records:[]}, selected=null, activeTab='summary', revision='', collapseTurns=false, collapseCalls=false, timelineRange=null, dragStart=null, actualDuration=false;
+const esc=v=>String(v??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+const stringify=v=>typeof v==='string'?v:JSON.stringify(v??null,null,2);
+const fmtTime=n=>n?new Date(n).toLocaleTimeString(undefined,{hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3}):'';
+const fmtDuration=n=>n==null?'':n<1000?Math.round(n)+' ms':(n/1000).toFixed(n<10000?2:1)+' s';
+const location=r=>r.turn==null?'Between turns':'Turn '+r.turn+(r.step==null?'':' · Step '+r.step);
+function has(v){if(v==null)return false;if(typeof v==='string')return v.trim().length>0;if(Array.isArray(v))return v.length>0;if(typeof v==='object')return Object.keys(v).length>0;return true}
+function tabs(r){const values=r.kind==='tool'?[['summary',r],['payload',r.input],['result',r.output],['timing',r.timing]]:r.kind==='assistant'?[['summary',r],['output',r.output],['thinking',r.thinking],['request',r.request],['tools',r.tools],['usage',r.usage],['timing',r.timing]]:r.kind==='user'?[['summary',r],['input',r.input]]:[['summary',r],['output',r.output],['usage',r.usage]];return values.filter(([tab,value])=>tab==='summary'||has(value)).map(([tab])=>tab)}
+function detailValue(r,tab){if(tab==='payload'||tab==='input')return r.input;if(tab==='result'||tab==='output')return r.output;if(tab==='thinking')return r.thinking;if(tab==='request')return r.request;if(tab==='tools')return r.tools;if(tab==='usage')return r.usage;if(tab==='timing')return r.timing;return null}
+function summary(r){const rows=[['Status',r.isError?'Error':r.durationMs==null&&r.kind==='tool'?'Running':'Complete'],['Started',fmtTime(r.timestamp)],['Duration',fmtDuration(r.durationMs)],['TTFT',fmtDuration(r.timing?.ttftMs)],['Decoding',fmtDuration(r.timing?.decodingMs)],['Provider',r.provider],['Model',r.model],['Stop reason',r.stopReason],['Tool',r.toolName],['Call ID',r.toolCallId],['Input tokens',r.usage?.input],['Cached tokens',r.usage?.cacheRead],['Cache created',r.usage?.cacheWrite],['Output tokens',r.usage?.output],['Reasoning tokens',r.usage?.reasoning],['Total tokens',r.usage?.totalTokens],['Cost',r.usage?.cost==null?undefined:'$'+r.usage.cost.toFixed(6)],['Tokens before compaction',r.tokensBefore]].filter(x=>has(x[1]));return '<dl class="summary">'+rows.map(x=>'<dt>'+esc(x[0])+'</dt><dd>'+esc(x[1])+'</dd>').join('')+'</dl>'}
+function showDetails(r){selected=r.id;details.hidden=false;workspace.classList.remove('details-closed');q('#detail-kind').textContent=r.title;q('#detail-location').textContent=location(r);const available=tabs(r);if(!available.includes(activeTab))activeTab='summary';q('#detail-tabs').innerHTML=available.map(t=>'<button role="tab" data-tab="'+t+'" class="'+(t===activeTab?'active':'')+'">'+esc(t[0].toUpperCase()+t.slice(1))+'</button>').join('');q('#detail-tabs').querySelectorAll('button').forEach(b=>b.onclick=()=>{activeTab=b.dataset.tab;showDetails(r)});q('#detail-body').innerHTML=activeTab==='summary'?summary(r):'<pre class="payload">'+esc(stringify(detailValue(r,activeTab)))+'</pre>';renderRows()}
+function renderRows(){const query=q('#search').value.toLowerCase();let lastTurn=null,request=0;ledger.innerHTML='';for(const r of snapshot.records){if(r.kind==='assistant')request++;const hay=JSON.stringify(r).toLowerCase();const filtered=query&&!hay.includes(query);const timelineFiltered=timelineRange&&(r.timestamp+(r.durationMs??0)<timelineRange[0]||r.timestamp>timelineRange[1]);const foldTurn=collapseTurns&&r.turn!=null&&r.turn===lastTurn&&r.kind!=='user';const foldCall=collapseCalls&&r.kind==='tool';const tr=document.createElement('tr');tr.dataset.id=r.id;tr.dataset.kind=r.kind;tr.className=[r.turn!==lastTurn&&r.turn!=null?'turn-start':'',selected===r.id?'selected':'',filtered?'filtered':'',timelineFiltered?'timeline-filtered':'',(foldTurn||foldCall)?'folded':''].filter(Boolean).join(' ');const req=r.kind==='assistant'?'<span class="request-boundary">Request #'+request+'</span>':'';const result=r.kind==='tool'&&r.output!=null?'<span class="arrow">→</span><span class="result '+(r.isError?'error-text':'')+'">'+esc((typeof r.output==='string'?r.output:JSON.stringify(r.output)).replace(/\s+/g,' ').slice(0,180))+'</span>':'';tr.innerHTML='<td class="event">'+req+'<span class="badge '+r.kind+'">'+esc(r.title)+'</span><span class="location">'+esc(location(r))+'</span></td><td class="content">'+esc(r.preview||'')+result+'</td>';tr.onclick=()=>showDetails(r);ledger.append(tr);if(r.turn!=null)lastTurn=r.turn}empty.classList.toggle('visible',snapshot.records.length===0)}
+function timelineModel(){const records=snapshot.records;if(!records.length)return null;if(!actualDuration)return{min:0,max:records.length,spans:records.map((r,index)=>({r,start:index,end:index+1}))};const ordered=records.map((r,index)=>({r,index,start:r.timestamp,end:r.timestamp+Math.max(0,r.durationMs??0)})).sort((a,b)=>a.start-b.start||a.index-b.index);const offsets=new Map;let removed=0,covered=null;for(const span of ordered){if(covered!=null&&span.start>covered)removed+=span.start-covered;offsets.set(span.r.id,removed);covered=covered==null?span.end:Math.max(covered,span.end)}const spans=records.map(r=>({r,start:r.timestamp-(offsets.get(r.id)??0),end:r.timestamp+Math.max(0,r.durationMs??0)-(offsets.get(r.id)??0)}));const min=Math.min(...spans.map(x=>x.start)),rawMax=Math.max(...spans.map(x=>x.end));return{min,max:Math.max(min+1,rawMax),spans}}
+function renderTimeline(){track.innerHTML='';const d=timelineModel();if(!d)return;for(const {r,start,end} of d.spans){const s=document.createElement('span');s.className='span '+r.kind+(r.isError?' error':'')+(selected===r.id?' selected':'');s.style.left=((start-d.min)/(d.max-d.min)*100)+'%';s.style.width=actualDuration?Math.max(.13,((end-start)/(d.max-d.min)*100))+'%':'max(2px,calc('+(100/snapshot.records.length)+'% - 2px))';s.title=r.title+(fmtTime(r.timestamp)?'\n'+fmtTime(r.timestamp):'')+(fmtDuration(r.durationMs)?' · '+fmtDuration(r.durationMs):'');s.onclick=e=>{e.stopPropagation();showDetails(r)};track.append(s)}if(timelineRange){const range=document.createElement('span');range.className='range';range.style.left=((timelineRange[0]-d.min)/(d.max-d.min)*100)+'%';range.style.width=((timelineRange[1]-timelineRange[0])/(d.max-d.min)*100)+'%';track.append(range)}}
+function render(){q('#connection').textContent='UniPi · Live';q('#connection').className='connection live';renderRows();renderTimeline();if(selected){const r=snapshot.records.find(x=>x.id===selected);if(r)showDetails(r)}}
+async function update(){try{const response=await fetch('/api/snapshot',{cache:'no-store'});if(!response.ok)throw Error(response.status);const data=await response.json(), next=JSON.stringify(data);if(next!==revision){revision=next;snapshot=data;render()}}catch(error){q('#connection').textContent='UniPi';q('#connection').className='connection'}}
+function syncThemeButton(){const dark=document.documentElement.classList.contains('dark');q('#theme').textContent=dark?'☀':'☾';q('#theme').setAttribute('aria-label',dark?'Use light theme':'Use dark theme')}syncThemeButton();q('#theme').onclick=()=>{const dark=document.documentElement.classList.toggle('dark');localStorage.setItem('unipi-trajectory-theme',dark?'dark':'light');syncThemeButton()};
+q('#detail-close').onclick=()=>{selected=null;details.hidden=true;workspace.classList.add('details-closed');renderRows();renderTimeline()};q('#search').oninput=renderRows;
+function timelinePoint(e){const d=timelineModel(),box=track.getBoundingClientRect();return d?d.min+Math.max(0,Math.min(1,(e.clientX-box.left)/box.width))*(d.max-d.min):0}track.onpointerdown=e=>{if(e.button===2){timelineRange=null;renderRows();renderTimeline();return}if(e.button!==0)return;dragStart=timelinePoint(e);track.setPointerCapture?.(e.pointerId)};track.onpointerup=e=>{if(dragStart==null)return;const end=timelinePoint(e);timelineRange=[Math.min(dragStart,end),Math.max(dragStart,end)];dragStart=null;renderRows();renderTimeline()};track.oncontextmenu=e=>e.preventDefault();track.onkeydown=e=>{if(e.key==='Escape'){timelineRange=null;renderRows();renderTimeline()}};q('#turns').onclick=e=>{collapseTurns=!collapseTurns;e.currentTarget.classList.toggle('active',collapseTurns);e.currentTarget.setAttribute('aria-pressed',collapseTurns);renderRows()};q('#calls').onclick=e=>{collapseCalls=!collapseCalls;e.currentTarget.classList.toggle('active',collapseCalls);e.currentTarget.setAttribute('aria-pressed',collapseCalls);renderRows()};q('#duration').onclick=e=>{actualDuration=!actualDuration;e.currentTarget.classList.toggle('active',actualDuration);e.currentTarget.setAttribute('aria-pressed',actualDuration);timelineRange=null;renderRows();renderTimeline()};workspace.classList.add('details-closed');update();setInterval(update,500);
+`;