@telorun/debug-ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telorun/debug-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Browser-safe debug event UI for Telo: wire types, filtering, SSE client, and React components for watching a running app's event stream.",
   "keywords": [
     "telo",
@@ -46,7 +46,7 @@
     "@dagrejs/dagre": "^3.0.0",
     "@xyflow/react": "^12.10.2",
     "lucide-react": "^1.8.0",
-    "@telorun/debug-wire": "0.1.0"
+    "@telorun/debug-wire": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/components/EventGraph.tsx

@@ -2,6 +2,7 @@ import Dagre from "@dagrejs/dagre";
 import {
   Background,
   Controls,
+  type Edge,
   Handle,
   type Node,
   type NodeProps,
@@ -10,12 +11,17 @@ import {
   ReactFlow,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import {
+  collapseTopology,
   deriveGraph,
   deriveInvocations,
+  type GraphEdge,
   type GraphNode,
+  type GraphState,
+  type GroupedGraphNode,
   type Invocation,
+  subtreeGraph,
   type TraceNode,
   traceSubgraph,
 } from "../graph.js";
@@ -38,12 +44,14 @@ const badgeClass = (outcome: Invocation["outcome"]) =>
 // ── Custom nodes ────────────────────────────────────────────────────────────
 
 interface TopologyNodeData extends Record<string, unknown> {
-  node: GraphNode;
+  node: GroupedGraphNode;
   selected: boolean;
 }
 
 /** Live-topology node: status dot, name + kind, invocation badge; pulses on each
- *  new invocation, tinted by outcome. */
+ *  new invocation, tinted by outcome. A node that owns spawned children (a
+ *  templated kind) shows an "n internal" badge — clicking it opens the drill-down
+ *  pane with that resource and the children it spawned. */
 function TopologyNode({ data }: NodeProps<Node<TopologyNodeData>>) {
   const { node, selected } = data;
   const [pulse, setPulse] = useState<"" | "ok" | "bad">("");
@@ -61,6 +69,7 @@ function TopologyNode({ data }: NodeProps<Node<TopologyNodeData>>) {
   const cls = [
     "tdbg-node",
     `tdbg-node-${node.status}`,
+    node.childCount > 0 ? "tdbg-node-owner" : "",
     selected ? "tdbg-node-sel" : "",
     pulse ? `tdbg-node-pulse-${pulse}` : "",
   ]
@@ -84,6 +93,9 @@ function TopologyNode({ data }: NodeProps<Node<TopologyNodeData>>) {
         )}
       </div>
       <div className="tdbg-node-kind">{node.kind}</div>
+      {node.childCount > 0 && (
+        <span className="tdbg-node-internal">{node.childCount} internal ›</span>
+      )}
       <Handle type="source" position={Position.Right} className="tdbg-node-handle" />
     </div>
   );
@@ -114,12 +126,12 @@ function TraceFlowNode({ data }: NodeProps<Node<TraceNodeData>>) {
       <Handle type="target" position={Position.Left} className="tdbg-node-handle" />
       <div className="tdbg-node-head">
         {node.isRoot && <span className="tdbg-node-roottag">root</span>}
-        <span className="tdbg-node-name">{node.name}</span>
+        <span className="tdbg-node-name">{node.label ?? node.name}</span>
         <span className={badgeClass(last.outcome)}>
           {node.invocations.length > 1 ? `${node.invocations.length}×` : last.suffix}
         </span>
       </div>
-      <div className="tdbg-node-kind">{node.kind}</div>
+      <div className="tdbg-node-kind">{node.label ? `${node.kind} · ${node.name}` : node.kind}</div>
       <Handle type="source" position={Position.Right} className="tdbg-node-handle" />
     </div>
   );
@@ -149,6 +161,29 @@ function layoutPositions(graph: {
   return pos;
 }
 
+/** Map graph edges to ReactFlow edges, dropping any whose endpoints aren't shown.
+ *  Ownership edges (owner → child) render dashed + muted so they read as
+ *  containment, not data flow. */
+function buildFlowEdges(edges: readonly GraphEdge[], present: ReadonlySet<string>): Edge[] {
+  return edges
+    .filter((e) => present.has(e.source) && present.has(e.target))
+    .map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      ...(e.ownership
+        ? {
+            className: "tdbg-edge-owner",
+            style: { stroke: "var(--tdbg-muted)", strokeDasharray: "5 4", opacity: 0.65 },
+          }
+        : {}),
+    }));
+}
+
+/** The main canvas shows the topology fully collapsed — templated resources are
+ *  one node each; their children are reached through the drill-down pane. */
+const NO_EXPANSION: ReadonlySet<string> = new Set();
+
 // ── The view ────────────────────────────────────────────────────────────────
 
 /**
@@ -162,6 +197,10 @@ export function EventGraph({ events, resolveUrl }: EventGraphProps) {
   const [traceId, setTraceId] = useState<number | null>(null);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
 
+  // Drill-down stack of owner ids: clicking a templated resource pushes it and
+  // opens the nested pane; the breadcrumb pops back. Empty = pane closed.
+  const [drilldown, setDrilldown] = useState<string[]>([]);
+
   // Default on: standalone services / providers with no dependency wiring are
   // usually noise in the topology view.
   const [hideUnconnected, setHideUnconnected] = useState(true);
@@ -176,19 +215,23 @@ export function EventGraph({ events, resolveUrl }: EventGraphProps) {
     [trace, activeTraceId],
   );
 
+  // The main canvas is the fully-collapsed topology: a templated resource is one
+  // node (absorbing its children's edges); the children are reached by clicking it.
+  const collapsed = useMemo(() => collapseTopology(topology, NO_EXPANSION), [topology]);
+
   // Topology with isolated nodes (no incoming/outgoing edge) dropped when the
   // toggle is on. Only meaningful for the live topology — trace subgraphs are all
   // connected by call edges.
   const displayTopology = useMemo(() => {
-    if (!hideUnconnected) return topology;
+    if (!hideUnconnected) return collapsed;
     const connected = new Set<string>();
-    for (const e of topology.edges) {
+    for (const e of collapsed.edges) {
       connected.add(e.source);
       connected.add(e.target);
     }
-    return { nodes: topology.nodes.filter((n) => connected.has(n.id)), edges: topology.edges };
-  }, [topology, hideUnconnected]);
-  const hiddenCount = topology.nodes.length - displayTopology.nodes.length;
+    return { nodes: collapsed.nodes.filter((n) => connected.has(n.id)), edges: collapsed.edges };
+  }, [collapsed, hideUnconnected]);
+  const hiddenCount = collapsed.nodes.length - displayTopology.nodes.length;
 
   const graph = scoped ?? displayTopology;
   const topoKey = useMemo(
@@ -219,16 +262,26 @@ export function EventGraph({ events, resolveUrl }: EventGraphProps) {
   }, [scoped, displayTopology, positions, selectedNodeId]);
 
   const flowEdges = useMemo(
-    () =>
-      graph.edges
-        .filter((e) => present.has(e.source) && present.has(e.target))
-        .map((e) => ({ id: e.id, source: e.source, target: e.target })),
+    () => buildFlowEdges(graph.edges as readonly GraphEdge[], present),
     [graph, present],
   );
 
   const selectTrace = (id: number | null) => {
     setTraceId(id);
     setSelectedNodeId(null);
+    setDrilldown([]);
+  };
+
+  // Clicking a templated resource (one that owns children) opens the drill-down
+  // pane; any other node opens its inputs/outputs detail.
+  const onTopologyNodeClick = (id: string) => {
+    const node = displayTopology.nodes.find((n) => n.id === id);
+    if (node && node.childCount > 0) {
+      setDrilldown([id]);
+      setSelectedNodeId(null);
+    } else {
+      setSelectedNodeId(id);
+    }
   };
 
   return (
@@ -244,8 +297,8 @@ export function EventGraph({ events, resolveUrl }: EventGraphProps) {
           <div className="tdbg-empty">
             {activeTraceId !== null
               ? "No resources in this trace."
-              : hideUnconnected && topology.nodes.length > 0
-                ? `All ${topology.nodes.length} resource(s) are unconnected — turn off "Hide unconnected" to show them.`
+              : hideUnconnected && collapsed.nodes.length > 0
+                ? `All ${collapsed.nodes.length} resource(s) are unconnected — turn off "Hide unconnected" to show them.`
                 : "No resources yet — waiting for the stream…"}
           </div>
         ) : (
@@ -262,7 +315,9 @@ export function EventGraph({ events, resolveUrl }: EventGraphProps) {
             fitView
             minZoom={0.2}
             proOptions={{ hideAttribution: true }}
-            onNodeClick={(_e, node) => setSelectedNodeId(node.id)}
+            onNodeClick={(_e, node) =>
+              scoped ? setSelectedNodeId(node.id) : onTopologyNodeClick(node.id)
+            }
             onPaneClick={() => setSelectedNodeId(null)}
           >
             <Background />
@@ -299,10 +354,146 @@ export function EventGraph({ events, resolveUrl }: EventGraphProps) {
             onClose={() => setSelectedNodeId(null)}
           />
         ))}
+      {!scoped && drilldown.length > 0 && (
+        <>
+          <div className="tdbg-nested-backdrop" onClick={() => setDrilldown([])} />
+          {drilldown.map((ownerId, i) => (
+            <NestedGraphPane
+              key={`${ownerId}@${i}`}
+              topology={topology}
+              ownerId={ownerId}
+              depth={i}
+              isTop={i === drilldown.length - 1}
+              onDrill={(childId) => setDrilldown((d) => [...d.slice(0, i + 1), childId])}
+              onReveal={() => setDrilldown((d) => d.slice(0, i + 1))}
+              onClose={() => setDrilldown((d) => d.slice(0, i))}
+              resolveUrl={resolveUrl}
+            />
+          ))}
+        </>
+      )}
     </div>
   );
 }
 
+/**
+ * One panel in the drill-down stack — a templated resource and the children it
+ * spawned (`subtreeGraph`), wired by dashed ownership edges plus the dependency
+ * edges among them. Each drill-in pushes a *new* panel (cascaded to the right);
+ * clicking a child that owns its own children opens the next panel, recursive to
+ * any depth. Only the top panel is interactive; clicking a panel beneath pops the
+ * stack back to it, and clicking a leaf (or the parent) opens its detail.
+ */
+function NestedGraphPane({
+  topology,
+  ownerId,
+  depth,
+  isTop,
+  onDrill,
+  onReveal,
+  onClose,
+  resolveUrl,
+}: {
+  topology: GraphState;
+  ownerId: string;
+  depth: number;
+  isTop: boolean;
+  onDrill: (childId: string) => void;
+  onReveal: () => void;
+  onClose: () => void;
+  resolveUrl: (rel: string) => string;
+}) {
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+
+  const nodeById = useMemo(() => new Map(topology.nodes.map((n) => [n.id, n])), [topology]);
+  const sub = useMemo(() => subtreeGraph(topology, ownerId), [topology, ownerId]);
+  const positions = useMemo(() => layoutPositions(sub), [sub]);
+  const present = useMemo(() => new Set(sub.nodes.map((n) => n.id)), [sub]);
+
+  const flowNodes: Node[] = useMemo(
+    () =>
+      sub.nodes.map((n) => ({
+        id: n.id,
+        type: "topology",
+        position: positions.get(n.id) ?? { x: 0, y: 0 },
+        data: { node: n, selected: n.id === selectedNodeId } satisfies TopologyNodeData,
+      })),
+    [sub, positions, selectedNodeId],
+  );
+  const flowEdges = useMemo(() => buildFlowEdges(sub.edges, present), [sub, present]);
+
+  const onNodeClick = (id: string) => {
+    const node = sub.nodes.find((n) => n.id === id);
+    // A child that owns its own children opens the next panel; the parent itself
+    // or a leaf opens its detail in this panel.
+    if (id !== ownerId && node && node.childCount > 0) onDrill(id);
+    else setSelectedNodeId(id);
+  };
+
+  const owner = nodeById.get(ownerId);
+  const detailNode = selectedNodeId ? nodeById.get(selectedNodeId) : undefined;
+
+  return (
+    <aside
+      className={`tdbg-nested-pane${isTop ? "" : " tdbg-nested-pane-under"}`}
+      // `--tdbg-depth` drives the cascade offset (`left`) in CSS, so a media query
+      // can tighten it on a narrow screen; z-index stacks the panels.
+      style={{ zIndex: 20 + depth, ["--tdbg-depth"]: depth } as CSSProperties}
+      // A panel beneath the top acts as a single "go back here" surface.
+      onClick={isTop ? undefined : onReveal}
+    >
+      <div className="tdbg-nested-head">
+        <span className="tdbg-nested-title">
+          <span className="tdbg-node-name">{owner?.name ?? ownerId}</span>
+          {owner && <span className="tdbg-muted">{owner.kind}</span>}
+        </span>
+        <button
+          className="tdbg-btn tdbg-icon-btn"
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+          title="Close"
+        >
+          ✕
+        </button>
+      </div>
+      <div className="tdbg-nested-body" style={{ pointerEvents: isTop ? "auto" : "none" }}>
+        <div className="tdbg-nested-canvas">
+          {sub.nodes.length === 0 ? (
+            <div className="tdbg-empty">This resource spawned no children.</div>
+          ) : (
+            <ReactFlow
+              key={ownerId}
+              nodes={flowNodes}
+              edges={flowEdges}
+              nodeTypes={nodeTypes}
+              nodesDraggable={false}
+              nodesConnectable={false}
+              edgesFocusable={false}
+              fitView
+              minZoom={0.2}
+              proOptions={{ hideAttribution: true }}
+              onNodeClick={(_e, node) => onNodeClick(node.id)}
+              onPaneClick={() => setSelectedNodeId(null)}
+            >
+              <Background />
+              <Controls showInteractive={false} />
+            </ReactFlow>
+          )}
+        </div>
+        {detailNode && (
+          <NodeDetail
+            node={detailNode}
+            resolveUrl={resolveUrl}
+            onClose={() => setSelectedNodeId(null)}
+          />
+        )}
+      </div>
+    </aside>
+  );
+}
+
 function countSubtree(trace: ReturnType<typeof deriveInvocations>, rootId: number): number {
   let n = 0;
   const visit = (id: number) => {
@@ -369,6 +560,9 @@ function NodeDetail({
 }) {
   if (!node) return null;
   const i = node.lastInvoke;
+  const props = node.properties;
+  const hasProps =
+    !!props && typeof props === "object" && Object.keys(props as object).length > 0;
   return (
     <aside className="tdbg-graph-detail">
       <DetailHead name={node.name} onClose={onClose} />
@@ -377,6 +571,12 @@ function NodeDetail({
         <span className={`tdbg-badge tdbg-suffix-${node.status}`}>{node.status}</span>
         <span className="tdbg-muted">{node.invokeCount} invocation(s)</span>
       </div>
+      {hasProps && (
+        <div className="tdbg-graph-detail-body">
+          <div className="tdbg-graph-detail-label">Properties</div>
+          <PayloadInspector value={props} resolveUrl={resolveUrl} />
+        </div>
+      )}
       {i ? (
         <div className="tdbg-graph-detail-body">
           <div className="tdbg-graph-detail-sub">
@@ -420,6 +620,12 @@ function TraceNodeDetail({
               <span className="tdbg-muted">{inv.timestamp.slice(11, 23)}</span>
             </div>
             <InOut inv={inv} resolveUrl={resolveUrl} />
+            {inv.context !== undefined && (
+              <>
+                <div className="tdbg-graph-detail-label">Available context</div>
+                <PayloadInspector value={inv.context} resolveUrl={resolveUrl} />
+              </>
+            )}
           </div>
         ))}
       </div>

package/src/components/styles.css

@@ -333,6 +333,7 @@
   display: flex;
   flex: 1;
   min-height: 0;
+  position: relative;
 }
 .tdbg-graph-canvas {
   flex: 1;
@@ -349,6 +350,77 @@
   --xy-controls-button-color-hover-default: var(--tdbg-accent);
   --xy-controls-button-border-color-default: var(--tdbg-line);
   background: var(--tdbg-bg);
+  /* xyflow ships no `touch-action`, so on touch the browser claims one-finger
+   * drags and d3-zoom never pans/zooms. Hand the gestures to the canvas. */
+  touch-action: none;
+}
+
+/* ── Drill-down stack ───────────────────────────────────────────────────── */
+/* One backdrop behind the whole stack; clicking it closes every panel. */
+.tdbg-nested-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 19;
+  background: rgba(0, 0, 0, 0.45);
+}
+/* Each drill level is its own panel, docked right and cascaded left (via inline
+ * `left` + `z-index`) so the panels beneath peek out as a navigable stack. */
+.tdbg-nested-pane {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* Cascade offset: each deeper panel starts further right (`--tdbg-depth` set by
+   * the component), leaving the panels beneath peeking on the left. */
+  left: calc(10% + var(--tdbg-depth, 0) * 46px);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--tdbg-bg);
+  border-left: 1px solid var(--tdbg-line);
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
+}
+/* A panel beneath the top is a single "go back here" surface. */
+.tdbg-nested-pane-under {
+  cursor: pointer;
+}
+.tdbg-nested-pane-under::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+.tdbg-nested-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--tdbg-line);
+  background: var(--tdbg-panel);
+}
+.tdbg-nested-title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.tdbg-nested-title .tdbg-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tdbg-nested-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.tdbg-nested-canvas {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
 }
 
 .tdbg-node {
@@ -429,6 +501,19 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.tdbg-node-owner {
+  border-left: 3px solid var(--tdbg-accent);
+}
+.tdbg-node-internal {
+  display: inline-block;
+  margin-top: 3px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--tdbg-accent-bg, var(--tdbg-panel));
+  color: var(--tdbg-accent);
+  font-size: 10px;
+  font-weight: 600;
+}
 .tdbg-node-pulse-ok {
   animation: tdbg-pulse-ok 0.65s ease-out;
 }
@@ -491,7 +576,10 @@
 .tdbg-graph-detail-body {
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  /* Don't let flex shrink the body below its content — otherwise each payload
+   * (overflow: auto) collapses into a tiny nested scrollbar. The whole detail
+   * aside (overflow: auto) is the single scroll container. */
+  flex-shrink: 0;
 }
 .tdbg-graph-detail-sub {
   display: flex;
@@ -597,3 +685,79 @@
 .tdbg-graph-toggle input {
   cursor: pointer;
 }
+
+/* ── Mobile (≤640px) ────────────────────────────────────────────────────────
+ * The desktop layout leans on fixed-width side rails (220px trace list, 340px
+ * detail) and a single-row header. On a phone we wrap the header, stack the graph
+ * vertically (trace list → top scroll strip, detail → bottom sheet), and let the
+ * drill-down panels go near-full-width. */
+@media (max-width: 640px) {
+  .tdbg-tabs {
+    flex-wrap: wrap;
+    row-gap: 6px;
+  }
+  .tdbg-tab,
+  .tdbg-btn {
+    min-height: 34px;
+  }
+  .tdbg-bar-row {
+    flex-wrap: wrap;
+  }
+
+  /* Graph: stack the rails above/below the canvas instead of beside it. */
+  .tdbg-graph {
+    flex-direction: column;
+  }
+
+  /* Trace list → a horizontal scroll strip of invocation chips. */
+  .tdbg-trace-list {
+    width: 100%;
+    flex-direction: row;
+    align-items: stretch;
+    max-height: 30vh;
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: none;
+    border-bottom: 1px solid var(--tdbg-line);
+  }
+  .tdbg-trace-list-head {
+    position: static;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    border-bottom: none;
+    border-right: 1px solid var(--tdbg-line);
+  }
+  .tdbg-trace-row {
+    width: auto;
+    flex: 0 0 auto;
+    border-bottom: none;
+    border-right: 1px solid var(--tdbg-line);
+    white-space: nowrap;
+  }
+  .tdbg-trace-row .tdbg-node-name {
+    flex: 0 0 auto;
+  }
+  .tdbg-trace-row-on {
+    box-shadow: inset 0 -2px 0 var(--tdbg-accent);
+  }
+
+  /* Detail → a bottom sheet overlaying the canvas, not a 340px side column. */
+  .tdbg-graph-detail {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-height: 55%;
+    z-index: 10;
+    border-left: none;
+    border-top: 1px solid var(--tdbg-line);
+    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
+  }
+
+  /* Drill-down panels go near-full-width with a tight cascade. */
+  .tdbg-nested-pane {
+    left: calc(var(--tdbg-depth, 0) * 14px);
+  }
+}

package/src/filter.ts

@@ -23,8 +23,12 @@ export function matchesFilter(event: DebugEvent, filter: EventFilter): boolean {
   if (suffixes.length > 0 && !suffixes.includes(eventSuffix(event.event))) {
     return false;
   }
-  if (filter.kind && !event.event.toLowerCase().includes(filter.kind.toLowerCase())) {
-    return false;
+  if (filter.kind) {
+    // Lifecycle events carry the kind in the dotted name; dispatch (trace) events
+    // carry it in `payload.ref.kind` (the name dropped the kind prefix). Match either.
+    const refKind = (event.payload as { ref?: { kind?: unknown } } | undefined)?.ref?.kind;
+    const haystack = `${event.event} ${typeof refKind === "string" ? refKind : ""}`.toLowerCase();
+    if (!haystack.includes(filter.kind.toLowerCase())) return false;
   }
   if (filter.text) {
     const needle = filter.text.toLowerCase();