@telorun/debug-ui 0.2.0 → 0.3.0

package/src/components/styles.css

@@ -327,3 +327,273 @@
 .tdbg-log-stderr .tdbg-logtext {
   color: var(--tdbg-bad);
 }
+
+/* ── Graph view ─────────────────────────────────────────────────────────── */
+.tdbg-graph {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.tdbg-graph-canvas {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+/* Theme xyflow chrome to the panel palette (v12 CSS variables). */
+.tdbg-graph .react-flow {
+  --xy-edge-stroke-default: var(--tdbg-muted);
+  --xy-background-pattern-dots-color-default: var(--tdbg-line);
+  --xy-controls-button-background-color-default: var(--tdbg-panel);
+  --xy-controls-button-background-color-hover-default: var(--tdbg-bg);
+  --xy-controls-button-color-default: var(--tdbg-text);
+  --xy-controls-button-color-hover-default: var(--tdbg-accent);
+  --xy-controls-button-border-color-default: var(--tdbg-line);
+  background: var(--tdbg-bg);
+}
+
+.tdbg-node {
+  box-sizing: border-box;
+  padding: 6px 9px;
+  border: 1px solid var(--tdbg-line);
+  border-radius: 7px;
+  background: var(--tdbg-panel);
+  color: var(--tdbg-text);
+  font: inherit;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    opacity 0.2s;
+}
+.tdbg-node-created {
+  opacity: 0.7;
+}
+.tdbg-node-initialized {
+  border-color: var(--tdbg-good);
+}
+.tdbg-node-torndown {
+  opacity: 0.4;
+  border-style: dashed;
+}
+.tdbg-node-sel {
+  border-color: var(--tdbg-accent);
+  box-shadow: 0 0 0 1px var(--tdbg-accent);
+}
+.tdbg-node-handle {
+  width: 7px;
+  height: 7px;
+  border: none;
+  background: var(--tdbg-muted);
+}
+.tdbg-node-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.tdbg-node-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--tdbg-muted);
+}
+.tdbg-node-dot-initialized {
+  background: var(--tdbg-good);
+}
+.tdbg-node-dot-torndown {
+  background: var(--tdbg-bad);
+}
+.tdbg-node-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tdbg-node-count {
+  margin-left: auto;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--tdbg-good-bg);
+  color: var(--tdbg-good);
+  font-size: 11px;
+}
+.tdbg-node-count-bad {
+  background: var(--tdbg-bad-bg);
+  color: var(--tdbg-bad);
+}
+.tdbg-node-kind {
+  margin-top: 1px;
+  color: var(--tdbg-muted);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tdbg-node-pulse-ok {
+  animation: tdbg-pulse-ok 0.65s ease-out;
+}
+.tdbg-node-pulse-bad {
+  animation: tdbg-pulse-bad 0.65s ease-out;
+}
+@keyframes tdbg-pulse-ok {
+  0% {
+    box-shadow: 0 0 0 0 var(--tdbg-good);
+  }
+  100% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+}
+@keyframes tdbg-pulse-bad {
+  0% {
+    box-shadow: 0 0 0 0 var(--tdbg-bad);
+  }
+  100% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+}
+
+.tdbg-suffix-created {
+  background: var(--tdbg-line);
+  color: var(--tdbg-muted);
+}
+.tdbg-suffix-torndown {
+  background: var(--tdbg-bad-bg);
+  color: var(--tdbg-bad);
+}
+
+.tdbg-graph-detail {
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  flex: 0 0 auto;
+  min-height: 0;
+  overflow: auto;
+  border-left: 1px solid var(--tdbg-line);
+  background: var(--tdbg-panel);
+}
+.tdbg-graph-detail-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--tdbg-line);
+}
+.tdbg-graph-detail-head .tdbg-node-name {
+  flex: 1;
+}
+.tdbg-graph-detail-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 10px;
+}
+.tdbg-graph-detail-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.tdbg-graph-detail-sub {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px 8px;
+  color: var(--tdbg-muted);
+}
+.tdbg-graph-detail-label {
+  padding: 8px 10px 2px;
+  color: var(--tdbg-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* Invocation list (left rail of the Graph view). */
+.tdbg-trace-list {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  flex: 0 0 auto;
+  min-height: 0;
+  overflow: auto;
+  border-right: 1px solid var(--tdbg-line);
+  background: var(--tdbg-panel);
+}
+.tdbg-trace-list-head {
+  position: sticky;
+  top: 0;
+  padding: 8px 10px;
+  background: var(--tdbg-panel);
+  border-bottom: 1px solid var(--tdbg-line);
+  color: var(--tdbg-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.tdbg-trace-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 10px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--tdbg-line);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+.tdbg-trace-row:hover {
+  background: var(--tdbg-bg);
+}
+.tdbg-trace-row-on {
+  background: var(--tdbg-bg);
+  box-shadow: inset 2px 0 0 var(--tdbg-accent);
+}
+.tdbg-trace-row .tdbg-node-name {
+  flex: 1;
+}
+.tdbg-trace-calls {
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--tdbg-line);
+  color: var(--tdbg-muted);
+  font-size: 11px;
+}
+.tdbg-trace-empty {
+  padding: 12px 10px;
+  color: var(--tdbg-muted);
+  font-size: 12px;
+}
+
+.tdbg-node-root {
+  border-color: var(--tdbg-accent);
+}
+.tdbg-node-bad {
+  border-color: var(--tdbg-bad);
+}
+.tdbg-node-roottag {
+  padding: 0 5px;
+  border-radius: 999px;
+  background: rgba(79, 156, 240, 0.18);
+  color: var(--tdbg-accent);
+  font-size: 10px;
+}
+
+.tdbg-graph-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  color: var(--tdbg-text);
+  background: var(--tdbg-panel);
+  border: 1px solid var(--tdbg-line);
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.tdbg-graph-toggle input {
+  cursor: pointer;
+}

package/src/endpoints.ts

@@ -21,8 +21,18 @@ export function endpointHref(endpoint: AppEndpoint): string | null {
   return `http://${formatHost(endpoint.host)}:${endpoint.port}`;
 }
 
-/** Display label for an endpoint, e.g. `localhost:8080` or `:9000/udp`. */
+/** Display label for an endpoint, e.g. `localhost:8080` or `:9000/udp`. When the
+ *  endpoint carries an absolute `url`, label with that url's authority so the text
+ *  matches the link actually opened — `host`/`port` may be display-only values
+ *  (e.g. a proxy/ingress whose `host` isn't itself routable). */
 export function endpointLabel(endpoint: AppEndpoint): string {
+  if (endpoint.url) {
+    try {
+      return new URL(endpoint.url).host;
+    } catch {
+      // Malformed url — fall back to host:port below.
+    }
+  }
   const host = endpoint.host ? formatHost(endpoint.host) : "";
   const base = `${host}:${endpoint.port}`;
   return endpoint.protocol === "tcp" ? base : `${base}/udp`;

package/src/graph.test.ts

@@ -0,0 +1,194 @@
+import { describe, expect, it } from "vitest";
+import { deriveGraph, deriveInvocations, traceSubgraph } from "./graph.js";
+import type { DebugFrame } from "./wire.js";
+
+let seq = 0;
+const ev = (event: string, payload?: unknown): DebugFrame => ({
+  timestamp: `2026-01-01T00:00:00.${String(seq++).padStart(3, "0")}Z`,
+  event,
+  payload,
+});
+
+const created = (kind: string, name: string, deps: { kind: string; name: string }[] = []) =>
+  ev(`${kind}.${name}.Created`, { resource: { kind, name }, dependencies: deps });
+
+describe("deriveGraph", () => {
+  it("creates a gray (created) node on Created", () => {
+    const { nodes } = deriveGraph([created("Http.Server", "api")]);
+    expect(nodes).toHaveLength(1);
+    expect(nodes[0]).toMatchObject({ id: "api", kind: "Http.Server", name: "api", status: "created", invokeCount: 0 });
+  });
+
+  it("brightens the node on Initialized", () => {
+    const { nodes } = deriveGraph([
+      created("Http.Server", "api"),
+      ev("Http.Server.api.Initialized", { resource: { kind: "Http.Server", name: "api" } }),
+    ]);
+    expect(nodes[0].status).toBe("initialized");
+  });
+
+  it("marks the node torndown on Teardown", () => {
+    const { nodes } = deriveGraph([
+      created("Http.Server", "api"),
+      ev("Http.Server.api.Teardown", { resource: { kind: "Http.Server", name: "api" } }),
+    ]);
+    expect(nodes[0].status).toBe("torndown");
+  });
+
+  it("wires edges from Created dependencies", () => {
+    const { edges } = deriveGraph([
+      created("Sql.Pool", "db"),
+      created("Http.Server", "api", [{ kind: "Sql.Pool", name: "db" }]),
+    ]);
+    expect(edges).toEqual([{ id: "api->db", source: "api", target: "db" }]);
+  });
+
+  it("dedupes repeated dependency edges", () => {
+    const dep = [{ kind: "Sql.Pool", name: "db" }];
+    const { edges } = deriveGraph([created("Http.Server", "api", dep), created("Http.Server", "api", dep)]);
+    expect(edges).toHaveLength(1);
+  });
+
+  it("records an ok invocation with inputs and outputs", () => {
+    const { nodes } = deriveGraph([
+      created("Js.Script", "echo"),
+      ev("Js.Script.echo.Invoked", { inputs: { msg: "hi" }, outputs: { echoed: "hi" } }),
+    ]);
+    expect(nodes[0].invokeCount).toBe(1);
+    expect(nodes[0].lastInvoke).toMatchObject({
+      outcome: "ok",
+      suffix: "Invoked",
+      inputs: { msg: "hi" },
+      outputs: { echoed: "hi" },
+    });
+  });
+
+  it("classifies failure, rejection and cancellation outcomes", () => {
+    const base = created("Js.Script", "x");
+    expect(
+      deriveGraph([base, ev("Js.Script.x.InvokeFailed", { inputs: {}, name: "Error", message: "boom" })])
+        .nodes[0].lastInvoke?.outcome,
+    ).toBe("failed");
+    expect(
+      deriveGraph([base, ev("Js.Script.x.InvokeRejected", { inputs: {}, code: "E", message: "no" })])
+        .nodes[0].lastInvoke?.outcome,
+    ).toBe("rejected");
+    expect(
+      deriveGraph([base, ev("Js.Script.x.InvokeCancelled", { inputs: {}, reason: "stop" })])
+        .nodes[0].lastInvoke?.outcome,
+    ).toBe("cancelled");
+  });
+
+  it("treats InvokeRejected.Undeclared as a rejection on the right node", () => {
+    const { nodes } = deriveGraph([
+      created("Js.Script", "x"),
+      ev("Js.Script.x.InvokeRejected.Undeclared", { inputs: {}, code: "E", message: "no" }),
+    ]);
+    expect(nodes[0].lastInvoke).toMatchObject({ outcome: "rejected", suffix: "InvokeRejected.Undeclared" });
+  });
+
+  it("counts repeated invocations and advances the activity index", () => {
+    const { nodes } = deriveGraph([
+      created("Js.Script", "x"),
+      ev("Js.Script.x.Invoked", { inputs: {}, outputs: 1 }),
+      ev("Js.Script.x.Invoked", { inputs: {}, outputs: 2 }),
+    ]);
+    expect(nodes[0].invokeCount).toBe(2);
+    expect(nodes[0].lastInvoke?.outputs).toBe(2);
+    expect(nodes[0].lastActivitySeq).toBeGreaterThan(0);
+  });
+
+  it("attributes an invocation to the longest matching resource prefix", () => {
+    // `Http.Server.api` and `Http.Server.api.sub` share a prefix; the event must
+    // land on the deeper node, not the shorter one.
+    const { nodes } = deriveGraph([
+      created("Http.Server", "api"),
+      created("Http.Server.api", "sub"),
+      ev("Http.Server.api.sub.Invoked", { inputs: {}, outputs: "ok" }),
+    ]);
+    expect(nodes.find((n) => n.name === "sub")?.invokeCount).toBe(1);
+    expect(nodes.find((n) => n.name === "api")?.invokeCount).toBe(0);
+  });
+
+  it("ignores log frames and non-resource events", () => {
+    const { nodes, edges } = deriveGraph([
+      { kind: "log", timestamp: "2026-01-01T00:00:00.000Z", stream: "stdout", line: "hello" },
+      ev("Kernel.Started", {}),
+      created("Js.Script", "x"),
+    ]);
+    expect(nodes).toHaveLength(1);
+    expect(edges).toHaveLength(0);
+  });
+});
+
+const inv = (
+  event: string,
+  invocationId: number,
+  parentInvocationId: number | undefined,
+  payload: unknown,
+): DebugFrame => ({
+  timestamp: `2026-01-01T00:00:00.${String(seq++).padStart(3, "0")}Z`,
+  event,
+  payload,
+  metadata: { invocationId, ...(parentInvocationId !== undefined ? { parentInvocationId } : {}) },
+});
+
+describe("deriveInvocations", () => {
+  it("is empty when events carry no invocation metadata (tracing off)", () => {
+    const t = deriveInvocations([ev("Js.Script.x.Invoked", { outputs: 1 })]);
+    expect(t.roots).toHaveLength(0);
+    expect(t.byId.size).toBe(0);
+  });
+
+  it("collects a root invocation with its resource, inputs and outputs", () => {
+    const t = deriveInvocations([inv("Http.Server.api.Invoked", 1, undefined, { inputs: { a: 1 }, outputs: "ok" })]);
+    expect(t.roots).toHaveLength(1);
+    expect(t.roots[0]).toMatchObject({ id: 1, kind: "Http.Server", name: "api", outcome: "ok", inputs: { a: 1 }, outputs: "ok" });
+  });
+
+  it("links children to parents and keeps only roots at the top", () => {
+    const t = deriveInvocations([
+      inv("A.root.Invoked", 1, undefined, { outputs: 1 }),
+      inv("B.child.Invoked", 2, 1, { outputs: 2 }),
+      inv("C.grand.Invoked", 3, 2, { outputs: 3 }),
+    ]);
+    expect(t.roots.map((r) => r.id)).toEqual([1]);
+    expect(t.childrenOf.get(1)).toEqual([2]);
+    expect(t.childrenOf.get(2)).toEqual([3]);
+  });
+
+  it("dedupes the InvokeRejected.Undeclared echo by id", () => {
+    const t = deriveInvocations([
+      inv("A.x.InvokeRejected", 1, undefined, { code: "E" }),
+      inv("A.x.InvokeRejected.Undeclared", 1, undefined, { code: "E" }),
+    ]);
+    expect(t.byId.size).toBe(1);
+    expect(t.byId.get(1)).toMatchObject({ outcome: "rejected", suffix: "InvokeRejected" });
+  });
+});
+
+describe("traceSubgraph", () => {
+  it("returns only the participating resources wired by call edges", () => {
+    const t = deriveInvocations([
+      inv("A.root.Invoked", 1, undefined, { outputs: 1 }),
+      inv("B.child.Invoked", 2, 1, { outputs: 2 }),
+      inv("C.other.Invoked", 9, undefined, { outputs: 9 }), // a different trace
+    ]);
+    const g = traceSubgraph(t, 1);
+    expect(g.nodes.map((n) => n.id).sort()).toEqual(["A.root", "B.child"]);
+    expect(g.nodes.find((n) => n.id === "A.root")?.isRoot).toBe(true);
+    expect(g.edges).toEqual([{ id: "A.root->B.child", source: "A.root", target: "B.child" }]);
+  });
+
+  it("collapses repeated calls to one node holding every invocation", () => {
+    const t = deriveInvocations([
+      inv("A.root.Invoked", 1, undefined, { outputs: 1 }),
+      inv("B.svc.Invoked", 2, 1, { outputs: 2 }),
+      inv("B.svc.Invoked", 3, 1, { outputs: 3 }),
+    ]);
+    const g = traceSubgraph(t, 1);
+    const svc = g.nodes.find((n) => n.id === "B.svc");
+    expect(svc?.invocations.map((i) => i.id)).toEqual([2, 3]);
+    expect(g.edges).toHaveLength(1);
+  });
+});