npm - unreal-mcp-proxy - Versions diffs - 0.1.0 - Mend

unreal-mcp-proxy 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/LICENSE +21 -0
package/README.md +240 -0
package/dist/cli.d.ts +2 -0
package/dist/cli.js +37 -0
package/dist/cli.js.map +1 -0
package/dist/config.d.ts +15 -0
package/dist/config.js +51 -0
package/dist/config.js.map +1 -0
package/dist/index.d.ts +9 -0
package/dist/index.js +9 -0
package/dist/index.js.map +1 -0
package/dist/proxy-server.d.ts +8 -0
package/dist/proxy-server.js +333 -0
package/dist/proxy-server.js.map +1 -0
package/dist/redaction.d.ts +10 -0
package/dist/redaction.js +55 -0
package/dist/redaction.js.map +1 -0
package/dist/session-model.d.ts +4 -0
package/dist/session-model.js +270 -0
package/dist/session-model.js.map +1 -0
package/dist/session-store.d.ts +50 -0
package/dist/session-store.js +111 -0
package/dist/session-store.js.map +1 -0
package/dist/sinks.d.ts +49 -0
package/dist/sinks.js +42 -0
package/dist/sinks.js.map +1 -0
package/dist/stdio-bridge.d.ts +3 -0
package/dist/stdio-bridge.js +137 -0
package/dist/stdio-bridge.js.map +1 -0
package/dist/types.d.ts +124 -0
package/dist/types.js +3 -0
package/dist/types.js.map +1 -0
package/dist/viewer.html +991 -0
package/package.json +28 -0
package/skills/unreal-mcp-observer/SKILL.md +88 -0
package/skills/unreal-mcp-observer/scripts/query.mjs +225 -0

package/dist/viewer.html ADDED Viewed

@@ -0,0 +1,991 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>unreal-mcp-proxy viewer</title>
+<style>:root{
+  --bg:#0e0e13; --panel:#15151c; --panel2:#1b1b24;
+  --line:rgba(143,118,255,.16); --thread:rgba(230,228,240,.28);
+  --tx:#e6e4f0; --mut:#8b8a9c;
+  --acc:#8f76ff; --acc-hover:#a48fff; --acc2:rgba(143,118,255,.13);
+  --hi:#e6c35c;
+  --pass:#4cc38a; --warn:#e08a3d; --fail:#ff5c5c; --idle:#6a6a78;
+  --pass-bg:rgba(76,195,138,.13); --warn-bg:rgba(224,138,61,.13);
+  --fail-bg:rgba(255,92,92,.13); --idle-bg:rgba(106,106,120,.15);
+  --code:#0a0a0e; --hdr:44px;
+  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
+  --sans:system-ui,sans-serif;
+}
+*{box-sizing:border-box;border-radius:0!important}
+[hidden]{display:none!important}
+html,body{margin:0;padding:0}
+body{
+  background:var(--bg) repeating-linear-gradient(90deg, rgba(143,118,255,.05) 0 1px, transparent 1px 120px);
+  color:var(--tx); font:13px/1.5 var(--sans);
+}
+::selection{background:var(--hi);color:#0e0e13}
+a{color:var(--acc);text-decoration:none}
+header{
+  position:sticky;top:0;z-index:9;height:var(--hdr);
+  display:flex;align-items:center;gap:18px;padding:0 18px;
+  background:var(--panel);border-bottom:1px solid var(--line);
+}
+.brand{font:700 12px var(--mono);letter-spacing:.28em;color:var(--hi)}
+.hdr-right{margin-left:auto;font:10.5px var(--mono);letter-spacing:.06em;color:var(--mut)}
+main{max-width:1880px;margin:0 auto;padding:14px 20px 40px}
+.cols{display:grid;grid-template-columns:minmax(0,1fr) clamp(480px,36vw,760px);gap:12px;align-items:start}
+.col-side{position:sticky;top:calc(var(--hdr) + 12px);max-height:calc(100vh - var(--hdr) - 24px);overflow-y:auto}
+.col-side .panel{margin-bottom:0}
+@media (max-width:900px){.cols{grid-template-columns:1fr}.col-side{position:static;max-height:none}}
+.panel{background:var(--panel);border:1px solid var(--line);padding:14px 16px;margin-bottom:12px}
+.wlabel{position:relative;margin:0 0 10px;height:14px}
+.wlabel::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--thread)}
+.wlabel span{position:relative;background:var(--panel);padding-right:8px;font:700 10.5px var(--mono);letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
+.wlabel .cnt{position:relative;float:right;background:var(--panel);padding-left:8px;font:10.5px var(--mono);color:var(--mut)}
+.badge{display:inline-flex;align-items:center;gap:5px;font:700 10.5px var(--mono);letter-spacing:.04em;padding:2px 7px;text-transform:uppercase;white-space:nowrap}
+.badge.pass{background:var(--pass-bg);color:var(--pass)}
+.badge.warn{background:var(--warn-bg);color:var(--warn)}
+.badge.fail{background:var(--fail-bg);color:var(--fail)}
+.badge.run{background:var(--acc2);color:var(--acc)}
+.rows{margin:0;padding:0;list-style:none;max-height:72vh;overflow-y:auto}
+.rows li{display:flex;align-items:center;gap:10px;padding:6px 8px;cursor:pointer;border-bottom:1px solid var(--line);font:12.5px var(--mono)}
+.rows li:hover{background:var(--panel2)}
+.rows li.on{background:var(--acc);color:#0e0e13}
+.rows li.on .mut{color:#0e0e13}
+.rows .grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.mut{color:var(--mut)}
+.num{font-variant-numeric:tabular-nums}
+.knot{width:8px;height:8px;flex:none;background:var(--idle)}
+.knot.pass{background:var(--pass)}
+.knot.fail{background:var(--fail)}
+.knot.run{background:var(--acc);animation:knot-blink 1.2s infinite}
+@keyframes knot-blink{0%,100%{opacity:1}50%{opacity:.35}}
+.thread-line{position:relative;margin:4px 2px 8px;overflow:hidden}
+.thread-line .track{position:relative;width:100%}
+.thread-line .seg{position:absolute;height:1px;background:var(--thread)}
+.thread-line .vseg{position:absolute;width:1px;background:var(--thread)}
+.thread-line .tknot{position:absolute;cursor:pointer}
+.thread-line .tknot.focus{outline:1px solid var(--hi);outline-offset:2px}
+.thread-line .drawseg{position:absolute;height:1px;background:linear-gradient(90deg,var(--acc) 0 60%,transparent 60% 100%);background-size:14px 1px;animation:thread-draw 1.6s linear infinite}
+@keyframes thread-draw{from{background-position:0 0}to{background-position:14px 0}}
+.graph{overflow-x:auto}
+.graph-bar{margin-bottom:8px}
+.graph svg{display:block}
+.gnode rect{fill:var(--panel2);stroke:var(--line);stroke-width:1}
+.gnode.fail rect{stroke:var(--fail)}
+.gnode.on rect{stroke:var(--hi);stroke-width:1.5}
+.gnode{cursor:pointer}
+.gnode .glabel{fill:var(--tx);font:700 12px var(--mono)}
+.gnode .gsub{fill:var(--mut);font:9.5px var(--mono)}
+.gnode .gcount{fill:var(--acc);font:700 10px var(--mono)}
+.gedge{stroke:var(--thread);stroke-width:1;fill:none}
+.gedge.on{stroke:var(--acc);stroke-width:1.8}
+.gedge.dim,.gnode.dim{opacity:.22}
+.gorder{fill:var(--mut);font:9px var(--mono);cursor:pointer}
+.gorder.on{fill:var(--hi)}
+.gstart{fill:var(--acc)}
+button{font:700 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0;padding:5px 10px}
+.btn-ghost{background:transparent;border:1px solid var(--acc);color:var(--acc)}
+.btn-low{background:transparent;color:var(--mut);padding:2px 6px}
+.btn-low:hover{color:var(--tx)}
+.btn-low.copied{color:var(--hi)}
+.curstat{font:700 13px var(--mono);padding:8px 12px;margin-bottom:12px;display:flex;gap:12px;align-items:center}
+.curstat.pass{background:var(--pass-bg);color:var(--pass)}
+.curstat.fail{background:var(--fail-bg);color:var(--fail)}
+.curstat.run{background:var(--acc2);color:var(--acc)}
+.curstat.idle{background:var(--idle-bg);color:var(--idle)}
+.curstat .mut{font-weight:400;color:var(--mut)}
+pre.code{background:var(--code);border-left:2px solid var(--acc);padding:10px 12px;margin:6px 0;font:12px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--tx)}
+pre.code .k{color:var(--acc)} pre.code .s{color:var(--pass)} pre.code .n{color:var(--hi)} pre.code .b{color:var(--warn)}
+.verdict{border:1px solid var(--line);border-left:3px solid var(--idle);padding:8px 12px;margin:8px 0;background:var(--panel)}
+.verdict.error{border-left-color:var(--fail)}
+.verdict.warn,.verdict.warning{border-left-color:var(--warn)}
+.verdict.info{border-left-color:var(--acc)}
+.verdict .vhead{display:flex;gap:8px;align-items:baseline;font:12px var(--mono)}
+.verdict .vhead b{color:var(--tx)}
+.verdict .vbody{margin-top:4px;color:var(--tx)}
+.verdict .vmeta{margin-top:4px;font:11px var(--mono);color:var(--mut)}
+.empty{
+  border:1px dashed rgba(143,118,255,.35);
+  background:var(--code) repeating-linear-gradient(90deg, rgba(230,228,240,.05) 0 1px, transparent 1px 12px);
+  min-height:48px;display:flex;align-items:center;justify-content:center;
+  font:10.5px var(--mono);letter-spacing:.14em;color:var(--mut);text-transform:uppercase;
+}
+.meta-line{font:11px var(--mono);color:var(--mut);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
+.meta-line b{color:var(--tx);font-weight:400}
+/* drop zone (file mode) */
+.dropzone{
+  margin:8vh auto 0;max-width:640px;padding:60px 40px;text-align:center;cursor:pointer;
+  border:1px dashed rgba(143,118,255,.45);
+  background:var(--panel) repeating-linear-gradient(90deg, rgba(230,228,240,.04) 0 1px, transparent 1px 12px);
+}
+.dropzone.over{border-color:var(--hi)}
+.dropzone .dz-title{font:700 13px var(--mono);letter-spacing:.2em;color:var(--tx);text-transform:uppercase}
+.dropzone .dz-sub{margin-top:10px;font:11px var(--mono);color:var(--mut)}
+</style>
+</head>
+<body>
+<header>
+  <div class="brand">UNREAL MCP PROXY</div>
+  <div class="hdr-right" id="hdr-mode"></div>
+</header>
+<main>
+  <div id="drop-stage" hidden>
+    <div class="dropzone">
+      <div class="dz-title">DROP A SESSION .JSONL</div>
+      <div class="dz-sub">data/sessions/&lt;session-id&gt;.jsonl · or click to browse</div>
+      <input type="file" id="file-input" accept=".jsonl,.json" hidden>
+    </div>
+  </div>
+  <div id="session-stage" hidden>
+    <div class="curstat idle" id="curstat"></div>
+    <div class="meta-line" id="meta"></div>
+    <section class="panel">
+      <div class="wlabel"><span>THREAD</span><span class="cnt" id="thread-cnt"></span></div>
+      <div class="thread-line" id="thread"></div>
+    </section>
+    <section class="panel">
+      <div class="wlabel"><span>GRAPH</span><span class="cnt" id="graph-meta"></span></div>
+      <div class="graph-bar"><button class="btn-ghost" id="graph-play">PLAY</button></div>
+      <div class="graph" id="graph"></div>
+    </section>
+    <div class="cols">
+      <section class="panel">
+        <div class="wlabel"><span>CALLS</span><span class="cnt" id="calls-cnt"></span></div>
+        <ul class="rows" id="calls"></ul>
+        <div class="empty" id="calls-empty" hidden>NO CALLS</div>
+      </section>
+      <aside class="col-side">
+        <section class="panel" id="detail-panel">
+          <div class="wlabel"><span>CALL</span><span class="cnt" id="detail-id"></span></div>
+          <div id="detail"><div class="empty">SELECT A KNOT</div></div>
+        </section>
+      </aside>
+    </div>
+  </div>
+</main>
+<script>
+"use strict";
+(() => {
+  // src/session-model.ts
+  function requestLabel(body) {
+    const shape = body && typeof body === "object" && !Array.isArray(body) ? body : {};
+    if (!body || shape.omitted) return { title: "MCP request", category: "transport" };
+    if (shape.method === "initialize") return { title: "MCP initialize", category: "connection" };
+    if (shape.method === "notifications/initialized") return { title: "MCP initialized", category: "connection" };
+    if (shape.method === "tools/list") return { title: "List tools", category: "discovery" };
+    if (shape.method !== "tools/call") return { title: shape.method ?? "MCP request", category: "transport" };
+    const name = shape.params?.name ?? "unknown tool";
+    const args = shape.params?.arguments ?? {};
+    if (name === "list_toolsets" || name === "describe_toolset") {
+      return {
+        title: name === "list_toolsets" ? "List Unreal toolsets" : "Describe Unreal toolset",
+        category: "discovery",
+        toolName: name,
+        arguments: args
+      };
+    }
+    if (name === "call_tool") {
+      const toolsetName = typeof args.toolset_name === "string" ? args.toolset_name : void 0;
+      const toolName = typeof args.tool_name === "string" ? args.tool_name : void 0;
+      const toolset = toolsetName ? toolsetName.split(".").at(-1) : "TopLevel";
+      return {
+        title: `${toolset}.${toolName ?? "unknown"}`,
+        subtitle: toolsetName,
+        category: "unreal_tool",
+        toolName,
+        toolsetName,
+        arguments: args.arguments ?? {}
+      };
+    }
+    return { title: name, category: "mcp_tool", toolName: name, arguments: args };
+  }
+  function responseError(body, status) {
+    if (status != null && status >= 400) return `HTTP ${status}`;
+    const record = body && typeof body === "object" && !Array.isArray(body) ? body : null;
+    const messages = record?.transport === "sse" ? record.events ?? [] : [body];
+    for (const message of messages) {
+      const shape = message ?? {};
+      if (shape.error) return shape.error.message ?? "MCP error";
+      if (shape.result?.isError) return "Tool returned an error";
+      const content = shape.result?.content;
+      if (Array.isArray(content)) {
+        const text = content.map((item) => item?.text ?? "").join("\n");
+        if (/^(error|failed|exception|timeout)\s*:/i.test(text.trim())) return text.slice(0, 300);
+      }
+    }
+    return null;
+  }
+  var round = (value) => Math.round((value ?? 0) * 100) / 100;
+  function median(values) {
+    if (!values.length) return 0;
+    const sorted = [...values].sort((a, b) => a - b);
+    const middle = Math.floor(sorted.length / 2);
+    return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
+  }
+  function timing(event) {
+    const total = event.durationMs ?? 0;
+    const headers = Math.min(total, event.responseHeadersMs ?? total);
+    const result = Math.min(total, event.resultEventMs ?? total);
+    return {
+      requestToHeadersMs: round(headers),
+      toolResultMs: round(Math.max(0, result - headers)),
+      proxyFinalizeMs: round(Math.max(0, total - result)),
+      completionReason: event.completionReason ?? "stream_end"
+    };
+  }
+  function targetNode(call) {
+    const actor = call.arguments?.actor;
+    const refPath = actor && typeof actor === "object" && !Array.isArray(actor) ? actor.refPath : void 0;
+    if (typeof refPath === "string" && call.toolName === "get_actor_transform") {
+      return { key: `actor:${refPath}`, label: refPath.split(/[.:]/).at(-1) ?? refPath, subtitle: call.toolName, kind: "target" };
+    }
+    return {
+      key: `tool:${call.toolsetName ?? call.category}:${call.toolName ?? call.title}`,
+      label: call.toolName ?? call.title,
+      subtitle: call.toolsetName ?? call.category,
+      kind: "tool"
+    };
+  }
+  function buildFlowGraph(calls) {
+    const nodes = [];
+    const nodesByKey = /* @__PURE__ */ new Map();
+    const edges = [];
+    let previousNodeId = "start";
+    for (const [index, call] of calls.entries()) {
+      const descriptor = targetNode(call);
+      let node = nodesByKey.get(descriptor.key);
+      if (!node) {
+        node = { id: `node-${nodes.length + 1}`, ...descriptor, callIds: [] };
+        nodesByKey.set(descriptor.key, node);
+        nodes.push(node);
+      }
+      node.callIds.push(call.id);
+      edges.push({
+        id: `edge-${index + 1}`,
+        from: previousNodeId,
+        to: node.id,
+        order: index + 1,
+        callId: call.id,
+        durationMs: round(call.durationMs),
+        outcome: call.outcome
+      });
+      previousNodeId = node.id;
+    }
+    return { basis: "raw_mcp", nodes, edges };
+  }
+  function buildSessionModel(sessionId, events, webBaseUrl, now = Date.now()) {
+    const started = /* @__PURE__ */ new Map();
+    const completed = /* @__PURE__ */ new Set();
+    const annotations = [];
+    const calls = [];
+    const base = webBaseUrl.replace(/\/$/, "");
+    for (const event of events) {
+      if (event.type === "mcp_request_started") started.set(event.callId, event);
+      if (event.type === "ai_annotation") {
+        annotations.push({
+          callId: event.callId,
+          severity: event.severity ?? "info",
+          title: event.title,
+          summary: event.summary,
+          cause: event.cause,
+          suggestion: event.suggestion,
+          author: event.author ?? "agent",
+          timestamp: event.timestamp
+        });
+      }
+      if (event.type === "mcp_request_completed" || event.type === "mcp_request_failed") {
+        const payload = event;
+        const callId = payload.callId ?? "";
+        const begin = started.get(callId);
+        completed.add(callId);
+        const beginBody = begin?.body ?? null;
+        const label = requestLabel(beginBody);
+        const error = event.type === "mcp_request_failed" ? payload.error ?? "proxy or upstream connection failed" : responseError(payload.body, payload.status ?? null);
+        calls.push({
+          id: callId,
+          sequence: begin?.sequence ?? event.sequence,
+          startedAt: begin?.timestamp ?? event.timestamp,
+          completedAt: event.timestamp,
+          durationMs: payload.durationMs ?? null,
+          statusCode: payload.status ?? null,
+          outcome: error ? "error" : "success",
+          error,
+          request: beginBody,
+          response: payload.body ?? null,
+          requestHeaders: begin?.headers ?? null,
+          responseHeaders: payload.headers ?? null,
+          timing: timing(payload),
+          clientSource: begin?.clientSource ?? "agent",
+          operationId: begin?.operationId,
+          operationTitle: begin?.operationTitle,
+          operationStep: begin?.operationStep,
+          deepLink: `${base}/sessions/${sessionId}?call=${callId}`,
+          annotations: [],
+          isSystem: false,
+          ...label
+        });
+      }
+    }
+    for (const [callId, begin] of started) {
+      if (completed.has(callId)) continue;
+      const label = requestLabel(begin.body ?? null);
+      calls.push({
+        id: callId,
+        sequence: begin.sequence,
+        startedAt: begin.timestamp,
+        completedAt: null,
+        durationMs: Math.max(0, now - new Date(begin.timestamp).getTime()),
+        statusCode: null,
+        outcome: "running",
+        error: null,
+        request: begin.body ?? null,
+        response: null,
+        requestHeaders: begin.headers ?? null,
+        responseHeaders: null,
+        timing: null,
+        clientSource: begin.clientSource ?? "agent",
+        operationId: begin.operationId,
+        operationTitle: begin.operationTitle,
+        operationStep: begin.operationStep,
+        deepLink: `${base}/sessions/${sessionId}?call=${callId}`,
+        annotations: [],
+        isSystem: false,
+        ...label
+      });
+    }
+    for (const call of calls) {
+      call.isSystem = call.clientSource === "smoke-test" || call.category === "connection" || call.category === "discovery";
+    }
+    const workCalls = calls.filter((call) => !call.isSystem);
+    const errors = workCalls.filter((call) => call.outcome === "error").length;
+    const running = workCalls.filter((call) => call.outcome === "running").length;
+    const completedWork = workCalls.filter((call) => call.outcome !== "running");
+    const recent = [...completedWork].sort((a, b) => b.sequence - a.sequence).slice(0, 20);
+    const durationsByTool = /* @__PURE__ */ new Map();
+    for (const call of completedWork) {
+      const values = durationsByTool.get(call.title) ?? [];
+      values.push(call.durationMs ?? 0);
+      durationsByTool.set(call.title, values);
+    }
+    for (const call of completedWork) {
+      const samples = durationsByTool.get(call.title) ?? [];
+      const baseline = median(samples);
+      const ratio = baseline ? (call.durationMs ?? 0) / baseline : 1;
+      call.performance = {
+        sampleCount: samples.length,
+        medianMs: round(baseline),
+        ratio: round(ratio),
+        classification: samples.length >= 3 && ratio >= 2 && (call.durationMs ?? 0) >= 50 ? "slow" : "normal"
+      };
+    }
+    for (const call of calls) {
+      const latestByAuthor = /* @__PURE__ */ new Map();
+      for (const note of annotations.filter((item) => item.callId === call.id)) {
+        latestByAuthor.set(note.author, note);
+      }
+      call.annotations = [...latestByAuthor.values()];
+    }
+    const chronological2 = [...workCalls].sort((a, b) => a.sequence - b.sequence);
+    return {
+      id: sessionId,
+      startedAt: events.find((event) => event.type === "session_started")?.timestamp,
+      lastEventAt: events.at(-1)?.timestamp,
+      summary: {
+        totalCalls: workCalls.length,
+        successes: completedWork.length - errors,
+        errors,
+        running,
+        systemCalls: calls.length - workCalls.length,
+        averageDurationMs: recent.length ? Math.round(recent.reduce((sum, call) => sum + (call.durationMs ?? 0), 0) / recent.length) : 0,
+        medianDurationMs: round(median(recent.map((call) => call.durationMs ?? 0)))
+      },
+      graph: buildFlowGraph(chronological2),
+      calls: calls.sort((a, b) => b.sequence - a.sequence),
+      annotations,
+      rawEventCount: events.length
+    };
+  }
+  // viewer/src/helpers.ts
+  var $ = (selector) => {
+    const node = document.querySelector(selector);
+    if (!node) throw new Error(`element not found: ${selector}`);
+    return node;
+  };
+  var el = (tag, cls, text) => {
+    const node = document.createElement(tag);
+    if (cls) node.className = cls;
+    if (text != null) node.textContent = text;
+    return node;
+  };
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  var svgEl = (tag, attrs = {}, cls) => {
+    const node = document.createElementNS(SVG_NS, tag);
+    for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
+    if (cls) node.setAttribute("class", cls);
+    return node;
+  };
+  var fmtMs = (ms) => {
+    if (ms == null) return "-";
+    if (ms < 1e3) return `${Math.round(ms)}ms`;
+    if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+    return `${Math.floor(ms / 6e4)}m${Math.round(ms % 6e4 / 1e3)}s`;
+  };
+  var fmtTime = (iso) => {
+    if (!iso) return "-";
+    const date = new Date(iso);
+    const pad = (value) => String(value).padStart(2, "0");
+    return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+  };
+  var outcomeState = (call) => call.outcome === "running" ? "run" : call.outcome === "error" ? "fail" : "pass";
+  function renderJson(value) {
+    const pre = el("pre", "code");
+    const text = JSON.stringify(value, null, 2) ?? "null";
+    const frag = document.createDocumentFragment();
+    const re = /("(?:[^"\\]|\\.)*")(\s*:)?|(-?\d+\.?\d*(?:e[+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b)/gi;
+    let last = 0;
+    let match;
+    while (match = re.exec(text)) {
+      if (match.index > last) frag.append(text.slice(last, match.index));
+      const span = document.createElement("span");
+      span.textContent = match[1] ?? match[3] ?? match[4] ?? "";
+      span.className = match[1] ? match[2] ? "k" : "s" : match[3] ? "n" : "b";
+      frag.append(span);
+      if (match[2]) frag.append(match[2]);
+      last = re.lastIndex;
+    }
+    frag.append(text.slice(last));
+    pre.append(frag);
+    return pre;
+  }
+  // viewer/src/unwrap.ts
+  var isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+  function unwrapRequest(body) {
+    if (!isRecord(body)) return { view: body, changed: false };
+    if (body.method !== "tools/call" || !isRecord(body.params)) return { view: body, changed: false };
+    const params = body.params;
+    const args = isRecord(params.arguments) ? params.arguments : null;
+    if (params.name === "call_tool" && args) {
+      return { view: args.arguments ?? {}, changed: true };
+    }
+    return { view: args ?? params, changed: true };
+  }
+  function unwrapResponse(body) {
+    if (!isRecord(body)) return { view: body, changed: false };
+    const messages = body.transport === "sse" && Array.isArray(body.events) ? body.events : [body];
+    let final = null;
+    for (const message of messages) {
+      if (isRecord(message) && (message.result !== void 0 || message.error !== void 0)) final = message;
+    }
+    if (!final) return { view: body, changed: false };
+    if (final.error !== void 0) return { view: final.error, changed: true };
+    const result = final.result;
+    if (!isRecord(result)) return { view: result, changed: true };
+    const content = result.content;
+    if (!Array.isArray(content) || !content.length) return { view: result, changed: true };
+    const parsed = content.map((item) => isRecord(item) && typeof item.text === "string" ? parseMaybeJson(item.text) : item);
+    return { view: parsed.length === 1 ? parsed[0] : parsed, changed: true };
+  }
+  function parseMaybeJson(text) {
+    const trimmed = text.trim();
+    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+      try {
+        return JSON.parse(trimmed);
+      } catch {
+      }
+    }
+    return text;
+  }
+  // viewer/src/thread.ts
+  var STEP = 26;
+  var ROW_H = 26;
+  var PAD = 10;
+  var KNOT = 9;
+  var HALF = KNOT / 2;
+  var GAP = 6;
+  var THREAD_Y = 16;
+  function renderThread(container, calls, focusCallId2, onSelect) {
+    const width = Math.max(container.clientWidth || 1200, 240);
+    container.textContent = "";
+    const perRow = Math.max(8, Math.floor((width - PAD * 2 - KNOT) / STEP) + 1);
+    const rows = Math.max(1, Math.ceil(calls.length / perRow));
+    const track = el("div", "track");
+    track.style.height = `${rows * ROW_H + 6}px`;
+    container.style.height = `${rows * ROW_H + 10}px`;
+    const positions = calls.map((_, index) => {
+      const row = Math.floor(index / perRow);
+      const col = index % perRow;
+      const visualCol = row % 2 === 0 ? col : perRow - 1 - col;
+      return { cx: PAD + visualCol * STEP + HALF, y: row * ROW_H, row };
+    });
+    const turnX = (row) => row % 2 === 0 ? PAD + (perRow - 1) * STEP + KNOT + 6 : PAD - 7;
+    const failTrim = (call) => outcomeState(call) === "fail" ? HALF + GAP : 0;
+    for (let index = 1; index < calls.length; index += 1) {
+      const prev = positions[index - 1];
+      const curr = positions[index];
+      const prevTrim = failTrim(calls[index - 1]);
+      const currTrim = failTrim(calls[index]);
+      if (prev.row === curr.row) {
+        const dir = Math.sign(curr.cx - prev.cx) || 1;
+        addH(track, prev.cx + dir * prevTrim, curr.cx - dir * currTrim, prev.y + THREAD_Y);
+      } else {
+        const edge = turnX(prev.row);
+        const dirOut = Math.sign(edge - prev.cx) || 1;
+        const dirIn = Math.sign(curr.cx - edge) || 1;
+        addH(track, prev.cx + dirOut * prevTrim, edge, prev.y + THREAD_Y);
+        addV(track, edge, prev.y + THREAD_Y, curr.y + THREAD_Y);
+        addH(track, edge, curr.cx - dirIn * currTrim, curr.y + THREAD_Y);
+      }
+    }
+    const lastCall = calls.at(-1);
+    const lastPos = positions.at(-1);
+    if (lastCall && lastPos && lastCall.outcome === "running") {
+      const dir = lastPos.row % 2 === 0 ? 1 : -1;
+      const from = lastPos.cx + dir * HALF;
+      const seg = el("span", "drawseg");
+      seg.style.left = `${Math.min(from, from + dir * 20)}px`;
+      seg.style.width = "20px";
+      seg.style.top = `${lastPos.y + THREAD_Y}px`;
+      track.append(seg);
+    }
+    const knots = /* @__PURE__ */ new Map();
+    const applyKnotStyle = (element, pos, focused) => {
+      const size = focused ? 11 : KNOT;
+      element.classList.toggle("focus", focused);
+      element.style.left = `${pos.cx - size / 2}px`;
+      element.style.top = `${pos.y + THREAD_Y - size / 2}px`;
+      element.style.width = `${size}px`;
+      element.style.height = `${size}px`;
+    };
+    calls.forEach((call, index) => {
+      const pos = positions[index];
+      const knotEl = el("span", `tknot knot ${outcomeState(call)}`);
+      applyKnotStyle(knotEl, pos, call.id === focusCallId2);
+      knotEl.title = `${call.title} ${fmtMs(call.durationMs)}`;
+      knotEl.addEventListener("click", () => onSelect(call.id));
+      track.append(knotEl);
+      knots.set(call.id, { element: knotEl, pos });
+    });
+    container.append(track);
+    return {
+      setFocus(previous, next) {
+        for (const callId of [previous, next]) {
+          if (!callId) continue;
+          const knot = knots.get(callId);
+          if (knot) applyKnotStyle(knot.element, knot.pos, callId === next);
+        }
+      }
+    };
+  }
+  function addH(track, fromX, toX, y) {
+    const left = Math.min(fromX, toX);
+    const w = Math.abs(toX - fromX);
+    if (w < 1) return;
+    const seg = el("span", "seg");
+    seg.style.left = `${left}px`;
+    seg.style.width = `${w}px`;
+    seg.style.top = `${y}px`;
+    track.append(seg);
+  }
+  function addV(track, x, fromY, toY) {
+    const top = Math.min(fromY, toY);
+    const h = Math.abs(toY - fromY);
+    if (h < 1) return;
+    const seg = el("span", "vseg");
+    seg.style.left = `${x}px`;
+    seg.style.top = `${top}px`;
+    seg.style.height = `${h}px`;
+    track.append(seg);
+  }
+  // viewer/src/graph.ts
+  function renderGraph(container, meta, graph, focusCallId2, onSelect) {
+    const width0 = Math.max(container.clientWidth || 1200, 400);
+    container.textContent = "";
+    meta.textContent = `${graph.nodes.length}n \xB7 ${graph.edges.length}c`;
+    if (!graph.nodes.length) return null;
+    const CW = 300, RH = 104, NW = 220, NH = 46, PAD2 = 44;
+    const COLS = Math.max(2, Math.floor((width0 - PAD2 * 2) / CW));
+    const indexById = new Map(graph.nodes.map((node, index) => [node.id, index]));
+    const center = (nodeId) => {
+      const index = indexById.get(nodeId) ?? 0;
+      return {
+        x: PAD2 + index % COLS * CW + (Math.floor(index / COLS) % 2 ? 40 : 0) + NW / 2,
+        y: 30 + Math.floor(index / COLS) * RH + NH / 2
+      };
+    };
+    const rows = Math.ceil(graph.nodes.length / COLS);
+    const width = PAD2 * 2 + Math.min(graph.nodes.length, COLS) * CW;
+    const height = 30 + rows * RH + 20;
+    const svg = svgEl("svg", { width, height, viewBox: `0 0 ${width} ${height}` });
+    const start = { x: 16, y: center(graph.nodes[0].id).y };
+    svg.append(svgEl("circle", { cx: start.x, cy: start.y, r: 4 }, "gstart"));
+    const failedNodes = new Set(graph.edges.filter((edge) => edge.outcome === "error").map((edge) => edge.to));
+    const pairSeen = /* @__PURE__ */ new Map();
+    const edgeShapes = [];
+    for (const edge of graph.edges) {
+      const from = edge.from === "start" ? start : center(edge.from);
+      const to = center(edge.to);
+      const pair = `${edge.from}-${edge.to}`;
+      const dup = pairSeen.get(pair) ?? 0;
+      pairSeen.set(pair, dup + 1);
+      let d;
+      let mid;
+      if (edge.from === edge.to) {
+        const loop = 18 + dup * 10;
+        d = `M ${to.x - 24} ${to.y - NH / 2} C ${to.x - 24} ${to.y - NH / 2 - loop}, ${to.x + 24} ${to.y - NH / 2 - loop}, ${to.x + 24} ${to.y - NH / 2}`;
+        mid = { x: to.x, y: to.y - NH / 2 - loop + 3 };
+      } else {
+        const dx = to.x - from.x, dy = to.y - from.y;
+        const norm = Math.hypot(dx, dy) || 1;
+        const off = (14 + dup * 12) * (dup % 2 ? -1 : 1);
+        const cx = from.x + dx / 2 - dy / norm * off;
+        const cy = from.y + dy / 2 + dx / norm * off;
+        d = `M ${from.x} ${from.y} Q ${cx} ${cy} ${to.x} ${to.y}`;
+        mid = { x: (from.x + 2 * cx + to.x) / 4, y: (from.y + 2 * cy + to.y) / 4 };
+      }
+      const path = svgEl("path", { d }, "gedge");
+      const label = svgEl("text", { x: mid.x, y: mid.y, "text-anchor": "middle" }, "gorder");
+      label.textContent = String(edge.order);
+      label.addEventListener("click", () => onSelect(edge.callId));
+      svg.append(path, label);
+      edgeShapes.push({ order: edge.order, callId: edge.callId, toId: edge.to, path, label });
+    }
+    const nodeShapes = [];
+    for (const node of graph.nodes) {
+      const c = center(node.id);
+      const group = svgEl("g", {}, `gnode${failedNodes.has(node.id) ? " fail" : ""}`);
+      group.append(svgEl("rect", { x: c.x - NW / 2, y: c.y - NH / 2, width: NW, height: NH }));
+      const label = svgEl("text", { x: c.x - NW / 2 + 10, y: c.y - 4 }, "glabel");
+      label.textContent = node.label.length > 24 ? `${node.label.slice(0, 23)}\u2026` : node.label;
+      const sub = svgEl("text", { x: c.x - NW / 2 + 10, y: c.y + 13 }, "gsub");
+      sub.textContent = node.subtitle.length > 34 ? `\u2026${node.subtitle.slice(-33)}` : node.subtitle;
+      const count = svgEl("text", { x: c.x + NW / 2 - 8, y: c.y - 10, "text-anchor": "end" }, "gcount");
+      if (node.callIds.length > 1) count.textContent = `\xD7${node.callIds.length}`;
+      group.append(label, sub, count);
+      group.addEventListener("click", () => {
+        const last = node.callIds.at(-1);
+        if (last) onSelect(last);
+      });
+      svg.append(group);
+      nodeShapes.push({ node, group });
+    }
+    container.append(svg);
+    const view = { edgeShapes, nodeShapes };
+    setGraphFocus(view, focusCallId2);
+    return view;
+  }
+  function setGraphFocus(view, callId) {
+    const focusEdge = view.edgeShapes.find((shape) => shape.callId === callId) ?? null;
+    for (const shape of view.edgeShapes) {
+      const on = shape === focusEdge;
+      shape.path.classList.toggle("on", on);
+      shape.label.classList.toggle("on", on);
+      shape.path.classList.remove("dim");
+      shape.label.classList.remove("dim");
+    }
+    for (const shape of view.nodeShapes) {
+      shape.group.classList.toggle("on", focusEdge != null && shape.node.id === focusEdge.toId);
+      shape.group.classList.remove("dim");
+    }
+  }
+  function createReplay(view, onDone) {
+    let step = -1;
+    const ordered = [...view.edgeShapes].sort((a, b) => a.order - b.order);
+    return {
+      tick() {
+        step += 1;
+        if (step >= ordered.length) {
+          onDone();
+          return;
+        }
+        for (const [index, shape] of ordered.entries()) {
+          shape.path.classList.toggle("on", index === step);
+          shape.label.classList.toggle("on", index === step);
+          shape.path.classList.toggle("dim", index > step);
+          shape.label.classList.toggle("dim", index > step);
+        }
+        const current = ordered[step];
+        const visited = new Set(ordered.slice(0, step + 1).map((shape) => shape.toId));
+        for (const shape of view.nodeShapes) {
+          shape.group.classList.toggle("on", shape.node.id === current.toId);
+          shape.group.classList.toggle("dim", !visited.has(shape.node.id));
+        }
+      }
+    };
+  }
+  // viewer/src/main.ts
+  var model = null;
+  var focusCallId = new URLSearchParams(location.search).get("call");
+  var threadView = null;
+  var graphView = null;
+  var replayTimer = null;
+  var callRows = /* @__PURE__ */ new Map();
+  var servedSession = location.protocol.startsWith("http") ? /^\/sessions\/([0-9a-f-]+)$/i.exec(location.pathname)?.[1] ?? null : null;
+  var chronological = () => model ? [...model.calls].filter((call) => !call.isSystem).sort((a, b) => a.sequence - b.sequence) : [];
+  function setModelFromEvents(sessionId, events) {
+    model = buildSessionModel(sessionId, events, location.origin.startsWith("http") ? location.origin : "");
+    if (focusCallId && !model.calls.some((call) => call.id === focusCallId)) focusCallId = null;
+    renderAll();
+  }
+  function renderAll() {
+    if (!model) return;
+    $("#drop-stage").hidden = true;
+    $("#session-stage").hidden = false;
+    renderCurstat();
+    renderThreadPanel();
+    renderGraphPanel();
+    renderCalls();
+    void renderDetail();
+  }
+  function renderCurstat() {
+    if (!model) return;
+    const bar = $("#curstat");
+    const { summary } = model;
+    const state = summary.running ? "run" : summary.errors ? "fail" : "pass";
+    bar.className = `curstat ${state}`;
+    bar.textContent = "";
+    bar.append(el("span", "", summary.running ? "RUNNING" : summary.errors ? "FAILED" : "OK"));
+    bar.append(el("span", "mut num", `${summary.totalCalls} calls \xB7 ${summary.errors} failed \xB7 ${summary.running} running`));
+    const meta = $("#meta");
+    meta.textContent = "";
+    const entries = [
+      ["session", model.id.slice(0, 8)],
+      ["started", fmtTime(model.startedAt)],
+      ["last", fmtTime(model.lastEventAt)],
+      ["events", String(model.rawEventCount)]
+    ];
+    for (const [key, value] of entries) {
+      const span = el("span", "", `${key} `);
+      span.append(el("b", "", value));
+      meta.append(span);
+    }
+  }
+  function renderThreadPanel() {
+    const calls = chronological();
+    $("#thread-cnt").textContent = String(calls.length);
+    threadView = renderThread($("#thread"), calls, focusCallId, selectCall);
+  }
+  function renderGraphPanel() {
+    if (!model) return;
+    graphView = renderGraph($("#graph"), $("#graph-meta"), model.graph, focusCallId, selectCall);
+  }
+  function stopReplay() {
+    if (replayTimer) clearInterval(replayTimer);
+    replayTimer = null;
+    $("#graph-play").textContent = "PLAY";
+    renderGraphPanel();
+  }
+  $("#graph-play").addEventListener("click", () => {
+    if (replayTimer) {
+      stopReplay();
+      return;
+    }
+    if (!graphView) return;
+    $("#graph-play").textContent = "STOP";
+    const replay = createReplay(graphView, stopReplay);
+    replay.tick();
+    replayTimer = setInterval(() => replay.tick(), 650);
+  });
+  function renderCalls() {
+    const list = $("#calls");
+    const scrollTop = list.scrollTop;
+    list.textContent = "";
+    callRows = /* @__PURE__ */ new Map();
+    const calls = [...chronological()].reverse();
+    $("#calls-cnt").textContent = String(calls.length);
+    $("#calls-empty").hidden = calls.length > 0;
+    for (const call of calls) {
+      const item = el("li");
+      if (call.id === focusCallId) item.classList.add("on");
+      item.append(el("span", `knot ${outcomeState(call)}`));
+      item.append(el("span", "grow", call.title));
+      if (call.annotations.length) item.append(el("span", "badge warn", `A${call.annotations.length}`));
+      const duration = el("span", "mut num", call.outcome === "running" ? fmtMs(Date.now() - new Date(call.startedAt).getTime()) : fmtMs(call.durationMs));
+      item.append(duration);
+      item.append(el("span", "mut num", fmtTime(call.startedAt).slice(6)));
+      item.addEventListener("click", () => selectCall(call.id));
+      list.append(item);
+      callRows.set(call.id, { item, duration, call });
+    }
+    list.scrollTop = scrollTop;
+  }
+  function updateCallSelection(previous) {
+    if (previous) callRows.get(previous)?.item.classList.remove("on");
+    if (focusCallId) callRows.get(focusCallId)?.item.classList.add("on");
+  }
+  async function renderDetail() {
+    const container = $("#detail");
+    const call = model?.calls.find((item) => item.id === focusCallId) ?? null;
+    if (!call) {
+      container.textContent = "";
+      container.append(el("div", "empty", "SELECT A KNOT"));
+      $("#detail-id").textContent = "";
+      return;
+    }
+    $("#detail-id").textContent = call.id.slice(0, 8);
+    container.textContent = "";
+    const head = el("div", "meta-line");
+    const state = outcomeState(call);
+    head.append(el("span", `badge ${state}`, call.outcome));
+    const fields = [
+      ["tool", call.toolName ?? call.title],
+      ["toolset", call.toolsetName],
+      ["http", call.statusCode],
+      ["dur", fmtMs(call.durationMs)],
+      ["slow", call.performance?.classification === "slow" ? `${call.performance.ratio}x median` : null]
+    ];
+    for (const [key, value] of fields) {
+      if (value == null) continue;
+      const span = el("span", "", `${key} `);
+      span.append(el("b", "", String(value)));
+      head.append(span);
+    }
+    container.append(head);
+    if (call.error) {
+      const err = el("div", "verdict error");
+      err.append(el("div", "vbody", call.error));
+      container.append(err);
+    }
+    for (const note of call.annotations) {
+      const card = el("div", `verdict ${note.severity}`);
+      const headEl = el("div", "vhead");
+      headEl.append(el("span", `badge ${note.severity === "error" ? "fail" : note.severity === "warn" || note.severity === "warning" ? "warn" : "run"}`, note.severity));
+      headEl.append(el("b", "", note.title));
+      card.append(headEl);
+      card.append(el("div", "vbody", note.summary));
+      if (note.cause) card.append(el("div", "vbody mut", note.cause));
+      if (note.suggestion) card.append(el("div", "vbody", note.suggestion));
+      card.append(el("div", "vmeta", `${note.author}${note.timestamp ? ` \xB7 ${fmtTime(note.timestamp)}` : ""}`));
+      container.append(card);
+    }
+    appendBodySection(container, "REQUEST", call.request, unwrapRequest, "NO DATA");
+    appendBodySection(container, "RESPONSE", call.response, unwrapResponse, call.outcome === "running" ? "RUNNING" : "NO DATA");
+  }
+  function appendBodySection(container, title, body, unwrap, emptyText) {
+    const wlabel = el("div", "wlabel");
+    wlabel.append(el("span", "", title));
+    container.append(wlabel);
+    if (body == null) {
+      container.append(el("div", "empty", emptyText));
+      return;
+    }
+    const { view, changed } = unwrap(body);
+    let showRaw = false;
+    let pre = renderJson(view);
+    container.append(pre);
+    if (!changed) return;
+    const toggle = el("button", "btn-low cnt", "RAW");
+    toggle.addEventListener("click", () => {
+      showRaw = !showRaw;
+      toggle.textContent = showRaw ? "VIEW" : "RAW";
+      const next = renderJson(showRaw ? body : view);
+      pre.replaceWith(next);
+      pre = next;
+    });
+    wlabel.append(toggle);
+  }
+  function selectCall(callId) {
+    const previous = focusCallId;
+    focusCallId = callId;
+    if (servedSession) {
+      const url = new URL(location.href);
+      url.searchParams.set("call", callId);
+      history.replaceState(null, "", url);
+    }
+    updateCallSelection(previous);
+    threadView?.setFocus(previous, callId);
+    if (graphView && !replayTimer) setGraphFocus(graphView, callId);
+    void renderDetail();
+    document.querySelector(".col-side")?.scrollTo({ top: 0 });
+  }
+  function parseJsonl(text) {
+    return text.split("\n").filter(Boolean).map((line) => JSON.parse(line));
+  }
+  async function loadFile(file) {
+    const events = parseJsonl(await file.text());
+    const sessionId = events[0]?.sessionId ?? file.name.replace(/\.jsonl$/, "");
+    setModelFromEvents(sessionId, events);
+    $("#hdr-mode").textContent = `FILE \xB7 ${file.name}`;
+  }
+  function initFileMode() {
+    const zone = $("#drop-stage");
+    zone.hidden = false;
+    const input = $("#file-input");
+    zone.addEventListener("click", () => input.click());
+    input.addEventListener("change", () => {
+      if (input.files?.[0]) void loadFile(input.files[0]);
+    });
+    for (const eventName of ["dragover", "dragleave", "drop"]) {
+      zone.addEventListener(eventName, (event) => {
+        event.preventDefault();
+        zone.classList.toggle("over", eventName === "dragover");
+        if (eventName === "drop") {
+          const file = event.dataTransfer?.files?.[0];
+          if (file) void loadFile(file);
+        }
+      });
+    }
+  }
+  async function loadServed(sessionId) {
+    const response = await fetch(`/api/sessions/${sessionId}/events`);
+    const payload = await response.json();
+    setModelFromEvents(sessionId, payload.events);
+    $("#hdr-mode").textContent = `LIVE \xB7 ${sessionId.slice(0, 8)}`;
+  }
+  function initServedMode(sessionId) {
+    void loadServed(sessionId);
+    const source = new EventSource(`/api/sessions/${sessionId}/stream`);
+    let pending = false;
+    source.addEventListener("changed", () => {
+      if (pending) return;
+      pending = true;
+      setTimeout(() => {
+        pending = false;
+        void loadServed(sessionId);
+      }, 400);
+    });
+    setInterval(() => void loadServed(sessionId), 3e4);
+    setInterval(() => {
+      if (!model?.summary.running) return;
+      for (const { call, duration } of callRows.values()) {
+        if (call.outcome === "running") duration.textContent = fmtMs(Date.now() - new Date(call.startedAt).getTime());
+      }
+    }, 1e3);
+  }
+  var resizeTimer = null;
+  window.addEventListener("resize", () => {
+    if (resizeTimer) clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      if (model) {
+        renderThreadPanel();
+        if (!replayTimer) renderGraphPanel();
+      }
+    }, 200);
+  });
+  if (servedSession) initServedMode(servedSession);
+  else initFileMode();
+})();
+</script>
+</body>
+</html>