@brainpilot/web 0.0.3 → 0.0.5

package/src/components/session/TimelineTab.tsx

@@ -0,0 +1,320 @@
+/* --------------------------------------------------------------------------
+ * TimelineTab — message chronology as horizontal swimlanes (one row per
+ * agent). Hand-rolled SVG. Supports horizontal zoom (wheel), pan (drag),
+ * Fit All, per-agent + per-type filtering, and PNG export (html-to-image).
+ *
+ * Always global: shows every inter-agent message in the session.
+ * ------------------------------------------------------------------------ */
+import { useMemo, useRef, useState } from "react";
+import { Download, Filter, Maximize2, Inbox } from "lucide-react";
+import { toPng } from "html-to-image";
+import { ChatMessage } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+import { getMessageEdge, msgTypeKind } from "./agentNetworkShared";
+
+interface TimelineTabProps {
+  messages: ChatMessage[];
+  now: number;
+  /** Click a dot → caller selects that agent (and flips to Detail tab). */
+  onSelectMessage: (agentName: string) => void;
+}
+
+interface TimelineDot {
+  id: string;
+  agent: string; // swimlane owner = sender
+  to: string;
+  ts: number;
+  kind: "delegate" | "result" | "neutral";
+  content: string;
+}
+
+const ROW_H = 36;
+const LABEL_W = 88;
+const PAD_TOP = 28;
+const TICK_COUNT = 6;
+
+export function TimelineTab({ messages, now, onSelectMessage }: TimelineTabProps) {
+  const t = useT();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [zoom, setZoom] = useState(1);
+  const [panX, setPanX] = useState(0);
+  const [hideDelegate, setHideDelegate] = useState(false);
+  const [hideResult, setHideResult] = useState(false);
+  const [hideOther, setHideOther] = useState(false);
+  const [hovered, setHovered] = useState<TimelineDot | null>(null);
+  const dragRef = useRef<{ startX: number; startPan: number } | null>(null);
+
+  const dots = useMemo<TimelineDot[]>(() => {
+    const out: TimelineDot[] = [];
+    for (const m of messages) {
+      const e = getMessageEdge(m);
+      if (!e) continue;
+      const ts = new Date(e.timestamp).getTime();
+      if (!Number.isFinite(ts)) continue;
+      out.push({
+        id: e.id,
+        agent: e.from,
+        to: e.to,
+        ts,
+        kind: msgTypeKind(e.msgType),
+        content: e.content,
+      });
+    }
+    return out.sort((a, b) => a.ts - b.ts);
+  }, [messages]);
+
+  // Swimlane order: by first activity; "principal" pinned first if present.
+  const lanes = useMemo(() => {
+    const firstSeen = new Map<string, number>();
+    for (const d of dots) {
+      if (!firstSeen.has(d.agent)) firstSeen.set(d.agent, d.ts);
+    }
+    const names = Array.from(firstSeen.keys());
+    names.sort((a, b) => {
+      if (a === "principal") return -1;
+      if (b === "principal") return 1;
+      return (firstSeen.get(a) ?? 0) - (firstSeen.get(b) ?? 0);
+    });
+    return names;
+  }, [dots]);
+
+  const timeBounds = useMemo(() => {
+    if (dots.length === 0) return { start: now - 60_000, end: now };
+    const start = dots[0].ts;
+    const end = Math.max(now, dots[dots.length - 1].ts);
+    return { start, end: end === start ? start + 60_000 : end };
+  }, [dots, now]);
+
+  if (dots.length === 0) {
+    return (
+      <div className="agent-timeline__empty">
+        <Inbox size={20} />
+        <p>{t("timeline.empty")}</p>
+      </div>
+    );
+  }
+
+  const laneAreaW = 760; // base virtual width (before zoom)
+  const plotW = laneAreaW * zoom;
+  const svgW = LABEL_W + plotW;
+  const svgH = PAD_TOP + lanes.length * ROW_H + 8;
+  const span = timeBounds.end - timeBounds.start;
+
+  const xOf = (ts: number) => LABEL_W + panX + ((ts - timeBounds.start) / span) * plotW;
+  const laneIndex = (name: string) => lanes.indexOf(name);
+  const yOf = (name: string) => PAD_TOP + laneIndex(name) * ROW_H + ROW_H / 2;
+
+  const isHidden = (kind: TimelineDot["kind"]) =>
+    (kind === "delegate" && hideDelegate) ||
+    (kind === "result" && hideResult) ||
+    (kind === "neutral" && hideOther);
+
+  // Tick labels: adaptive granularity.
+  const ticks = Array.from({ length: TICK_COUNT + 1 }, (_, i) => {
+    const ts = timeBounds.start + (span * i) / TICK_COUNT;
+    return { ts, x: xOf(ts) };
+  });
+  const formatTick = (ts: number) => {
+    const d = new Date(ts);
+    if (span < 60_000) return `${d.getSeconds()}s`;
+    if (span < 3_600_000) return `${d.getHours()}:${String(d.getMinutes()).padStart(2, "0")}`;
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+  // delegate→result arcs (pair each delegate with the next result the target sends).
+  const arcs: { x1: number; y1: number; x2: number; y2: number; id: string }[] = [];
+  const usedResult = new Set<string>();
+  for (const d of dots) {
+    if (d.kind !== "delegate") continue;
+    const match = dots.find(
+      (r) => r.kind === "result" && r.agent === d.to && r.ts > d.ts && !usedResult.has(r.id),
+    );
+    if (match) {
+      usedResult.add(match.id);
+      arcs.push({
+        id: `${d.id}->${match.id}`,
+        x1: xOf(d.ts),
+        y1: yOf(d.agent),
+        x2: xOf(match.ts),
+        y2: yOf(match.agent),
+      });
+    }
+  }
+
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+    setZoom((z) => Math.min(8, Math.max(1, z * factor)));
+  };
+  const handleMouseDown = (e: React.MouseEvent) => {
+    dragRef.current = { startX: e.clientX, startPan: panX };
+  };
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!dragRef.current) return;
+    setPanX(dragRef.current.startPan + (e.clientX - dragRef.current.startX));
+  };
+  const endDrag = () => {
+    dragRef.current = null;
+  };
+  const fitAll = () => {
+    setZoom(1);
+    setPanX(0);
+  };
+
+  const exportPng = async () => {
+    if (!containerRef.current) return;
+    try {
+      const dataUrl = await toPng(containerRef.current, {
+        backgroundColor:
+          getComputedStyle(document.documentElement)
+            .getPropertyValue("--color-surface")
+            .trim() || "#ffffff",
+        pixelRatio: 2,
+      });
+      const link = document.createElement("a");
+      link.download = `agent-timeline-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+    } catch {
+      /* export is best-effort; ignore failures */
+    }
+  };
+
+  return (
+    <div className="agent-timeline">
+      <div className="agent-timeline__controls">
+        <button type="button" className="agent-timeline__btn" onClick={fitAll}>
+          <Maximize2 size={12} /> {t("timeline.fit")}
+        </button>
+        <span className="agent-timeline__filters">
+          <Filter size={12} />
+          <FilterToggle label={t("timeline.filter.delegate")} active={!hideDelegate} onClick={() => setHideDelegate((v) => !v)} dotClass="delegate" />
+          <FilterToggle label={t("timeline.filter.result")} active={!hideResult} onClick={() => setHideResult((v) => !v)} dotClass="result" />
+          <FilterToggle label={t("timeline.filter.other")} active={!hideOther} onClick={() => setHideOther((v) => !v)} dotClass="neutral" />
+        </span>
+        <button type="button" className="agent-timeline__btn" onClick={exportPng}>
+          <Download size={12} /> PNG
+        </button>
+      </div>
+
+      <div
+        className="agent-timeline__scroll"
+        ref={containerRef}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={endDrag}
+        onMouseLeave={() => {
+          endDrag();
+          setHovered(null);
+        }}
+      >
+        <svg
+          className="agent-timeline__svg"
+          width={svgW}
+          height={svgH}
+          viewBox={`0 0 ${svgW} ${svgH}`}
+          role="img"
+          aria-label={t("timeline.aria")}
+        >
+          {/* zebra lanes + labels */}
+          {lanes.map((name, i) => (
+            <g key={name}>
+              <rect
+                x={0}
+                y={PAD_TOP + i * ROW_H}
+                width={svgW}
+                height={ROW_H}
+                className={i % 2 === 0 ? "agent-timeline__lane agent-timeline__lane--even" : "agent-timeline__lane agent-timeline__lane--odd"}
+              />
+              <text x={6} y={PAD_TOP + i * ROW_H + ROW_H / 2 + 4} className="agent-timeline__lane-label">
+                {name.length > 11 ? `${name.slice(0, 10)}…` : name}
+              </text>
+            </g>
+          ))}
+
+          {/* time ticks */}
+          {ticks.map((t, i) => (
+            <g key={i}>
+              <line x1={t.x} x2={t.x} y1={PAD_TOP - 6} y2={svgH - 4} className="agent-timeline__tick" />
+              <text x={t.x} y={14} textAnchor="middle" className="agent-timeline__tick-label">
+                {formatTick(t.ts)}
+              </text>
+            </g>
+          ))}
+
+          {/* "now" marker */}
+          <line x1={xOf(now)} x2={xOf(now)} y1={PAD_TOP - 6} y2={svgH - 4} className="agent-timeline__now" />
+
+          {/* delegate→result arcs */}
+          {arcs.map((a) => {
+            const midY = Math.min(a.y1, a.y2) - 10;
+            return (
+              <path
+                key={a.id}
+                className="agent-timeline__arc"
+                d={`M ${a.x1} ${a.y1} Q ${(a.x1 + a.x2) / 2} ${midY} ${a.x2} ${a.y2}`}
+                fill="none"
+              />
+            );
+          })}
+
+          {/* dots */}
+          {dots.map((d) => {
+            if (isHidden(d.kind)) return null;
+            return (
+              <circle
+                key={d.id}
+                className={`agent-timeline__dot agent-timeline__dot--${d.kind}`}
+                cx={xOf(d.ts)}
+                cy={yOf(d.agent)}
+                r={5}
+                onClick={() => onSelectMessage(d.agent)}
+                onMouseEnter={() => setHovered(d)}
+                onMouseLeave={() => setHovered((cur) => (cur?.id === d.id ? null : cur))}
+              >
+                <title>{`${d.agent} → ${d.to}\n${d.content.slice(0, 100)}`}</title>
+              </circle>
+            );
+          })}
+        </svg>
+      </div>
+
+      {hovered ? (
+        <div className="agent-timeline__hint-card">
+          <strong>
+            {hovered.agent} → {hovered.to}
+          </strong>
+          <span className={`agent-timeline__hint-type agent-timeline__hint-type--${hovered.kind}`}>
+            {hovered.kind}
+          </span>
+          <p>{hovered.content ? `${hovered.content.slice(0, 120)}${hovered.content.length > 120 ? "…" : ""}` : "(empty)"}</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function FilterToggle({
+  label,
+  active,
+  onClick,
+  dotClass,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  dotClass: string;
+}) {
+  return (
+    <button
+      type="button"
+      className={`agent-timeline__filter ${active ? "is-active" : ""}`}
+      aria-pressed={active}
+      onClick={onClick}
+    >
+      <i className={`agent-timeline__filter-dot agent-timeline__dot--${dotClass}`} />
+      {label}
+    </button>
+  );
+}

package/src/components/session/TraceGraphView.tsx

@@ -0,0 +1,301 @@
+import { Minus, Plus, RotateCcw } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TraceNode } from "../../contracts/backend";
+import {
+  TraceLayoutDirection,
+  buildTraceLayout,
+  getNodeKind,
+  normalizeStatus,
+  relationLabels,
+  truncateNodeTitle,
+} from "./traceLayout";
+
+interface TraceGraphViewProps {
+  /** Nodes already filtered / sliced / edge-pruned by the host. */
+  nodes: TraceNode[];
+  direction: TraceLayoutDirection;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string) => void;
+  zoom: number;
+  onZoomChange: (zoom: number) => void;
+  /**
+   * Bumping this re-fits and recenters the viewport on the current content.
+   * The host bumps it when the graph advances (e.g. playback auto-advance) so
+   * newly revealed nodes scroll into view; manual scrubbing leaves it alone.
+   */
+  fitToken?: number | string;
+  /** Shown when there are no nodes to display. */
+  emptyLabel?: string;
+  zoomLabels?: {
+    controls?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    reset?: string;
+  };
+}
+
+/**
+ * Presentational reasoning-trace graph: the SVG DAG, zoom controls, viewport
+ * pan/drag, wheel-zoom, and per-node drag offsets. Owns only view-local state
+ * (node offsets, drag). Extracted from TracePanel so the live trace view and
+ * the demo replay render the same graph.
+ */
+export function TraceGraphView({
+  nodes,
+  direction,
+  selectedNodeId,
+  onSelectNode,
+  zoom,
+  onZoomChange,
+  fitToken,
+  emptyLabel,
+  zoomLabels,
+}: TraceGraphViewProps) {
+  const [nodeOffsets, setNodeOffsets] = useState<Map<string, { dx: number; dy: number }>>(new Map());
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const layoutRef = useRef<ReturnType<typeof buildTraceLayout> | null>(null);
+  const draggingNodeRef = useRef<{
+    nodeId: string;
+    startClientX: number;
+    startClientY: number;
+    startDx: number;
+    startDy: number;
+  } | null>(null);
+  const dragRef = useRef<{
+    isDragging: boolean;
+    startX: number;
+    startY: number;
+    scrollLeft: number;
+    scrollTop: number;
+    hasPanned: boolean;
+  }>({ isDragging: false, startX: 0, startY: 0, scrollLeft: 0, scrollTop: 0, hasPanned: false });
+
+  const layout = useMemo(() => buildTraceLayout(nodes, direction), [direction, nodes]);
+  const adjustedLayout = useMemo(() => {
+    if (nodeOffsets.size === 0) return layout;
+    const adjustedPositioned = layout.positioned.map((p) => {
+      const offset = nodeOffsets.get(p.node.id);
+      if (!offset) return p;
+      return { ...p, x: p.x + offset.dx, y: p.y + offset.dy };
+    });
+    const adjustedById = new Map(adjustedPositioned.map((p) => [p.node.id, p]));
+    return { ...layout, positioned: adjustedPositioned, byId: adjustedById };
+  }, [layout, nodeOffsets]);
+  layoutRef.current = adjustedLayout;
+  const zoomPercent = Math.round(zoom * 100);
+
+  const zoomIn = () => onZoomChange(Math.min(2, Number((zoom + 0.1).toFixed(2))));
+  const zoomOut = () => onZoomChange(Math.max(0.05, Number((zoom - 0.1).toFixed(2))));
+  const resetZoom = () => onZoomChange(1);
+
+  // Re-fit + recenter on fitToken change (host signals an advance).
+  useEffect(() => {
+    if (fitToken === undefined || !viewportRef.current) {
+      return;
+    }
+    const l = layoutRef.current;
+    if (!l || l.positioned.length === 0) {
+      return;
+    }
+    const viewport = viewportRef.current;
+    const padding = 80;
+    const xs = l.positioned.map((p) => p.x);
+    const ys = l.positioned.map((p) => p.y);
+    const minX = Math.min(...xs) - padding;
+    const minY = Math.min(...ys) - padding;
+    const maxX = Math.max(...xs.map((x) => x + l.nodeWidth)) + padding;
+    const maxY = Math.max(...ys.map((y) => y + l.nodeHeight)) + padding;
+    const contentWidth = maxX - minX;
+    const contentHeight = maxY - minY;
+    const viewportWidth = viewport.clientWidth;
+    const viewportHeight = viewport.clientHeight;
+    const fitZoom = Math.min(viewportWidth / contentWidth, viewportHeight / contentHeight, 1.5);
+    const nextZoom = Math.max(0.05, Number(fitZoom.toFixed(2)));
+    // Avoid micro-rescales on every reveal — only re-zoom on a meaningful change,
+    // so the graph doesn't visibly "breathe" as nodes stream in.
+    if (Math.abs(nextZoom - zoom) > 0.06) {
+      onZoomChange(nextZoom);
+    }
+    const effectiveZoom = Math.abs(nextZoom - zoom) > 0.06 ? nextZoom : zoom;
+    requestAnimationFrame(() => {
+      if (!viewportRef.current) {
+        return;
+      }
+      const vp = viewportRef.current;
+      const centerScrollLeft = ((minX + maxX) / 2) * effectiveZoom - viewportWidth / 2;
+      const centerScrollTop = ((minY + maxY) / 2) * effectiveZoom - viewportHeight / 2;
+      vp.scrollTo({
+        left: Math.max(0, centerScrollLeft),
+        top: Math.max(0, centerScrollTop),
+        behavior: "smooth",
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fitToken]);
+
+  // Per-node drag.
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!draggingNodeRef.current) return;
+      const { nodeId, startClientX, startClientY, startDx, startDy } = draggingNodeRef.current;
+      const dx = startDx + (e.clientX - startClientX) / zoom;
+      const dy = startDy + (e.clientY - startClientY) / zoom;
+      setNodeOffsets((prev) => {
+        const next = new Map(prev);
+        next.set(nodeId, { dx, dy });
+        return next;
+      });
+    };
+    const handleMouseUp = () => {
+      draggingNodeRef.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [zoom]);
+
+  if (nodes.length === 0) {
+    return <p className="trace-empty">{emptyLabel ?? ""}</p>;
+  }
+
+  return (
+    <>
+      <div className="trace-zoom-controls" aria-label={zoomLabels?.controls}>
+        <button disabled={zoom <= 0.05} onClick={zoomOut} type="button" aria-label={zoomLabels?.zoomOut}>
+          <Minus size={13} />
+        </button>
+        <span>{zoomPercent}%</span>
+        <button disabled={zoom >= 2} onClick={zoomIn} type="button" aria-label={zoomLabels?.zoomIn}>
+          <Plus size={13} />
+        </button>
+        <button disabled={zoom === 1} onClick={resetZoom} type="button" aria-label={zoomLabels?.reset}>
+          <RotateCcw size={11} />
+        </button>
+      </div>
+      <div
+        ref={viewportRef}
+        className="trace-map__viewport"
+        onMouseDown={(event) => {
+          const viewport = event.currentTarget;
+          dragRef.current = {
+            isDragging: true,
+            startX: event.clientX,
+            startY: event.clientY,
+            scrollLeft: viewport.scrollLeft,
+            scrollTop: viewport.scrollTop,
+            hasPanned: false,
+          };
+        }}
+        onMouseMove={(event) => {
+          if (!dragRef.current.isDragging) {
+            return;
+          }
+          const dx = event.clientX - dragRef.current.startX;
+          const dy = event.clientY - dragRef.current.startY;
+          if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+            dragRef.current.hasPanned = true;
+          }
+          const viewport = event.currentTarget;
+          viewport.scrollLeft = dragRef.current.scrollLeft - dx;
+          viewport.scrollTop = dragRef.current.scrollTop - dy;
+        }}
+        onMouseUp={() => {
+          dragRef.current.isDragging = false;
+        }}
+        onMouseLeave={() => {
+          dragRef.current.isDragging = false;
+        }}
+        onWheel={(event) => {
+          event.preventDefault();
+          if (event.deltaY === 0) return;
+          const step = event.deltaY > 0 ? -0.1 : 0.1;
+          onZoomChange(Math.max(0.05, Math.min(2, Number((zoom + step).toFixed(2)))));
+        }}
+      >
+        <svg
+          height={adjustedLayout.height * zoom}
+          viewBox={`0 0 ${adjustedLayout.width} ${adjustedLayout.height}`}
+          width={adjustedLayout.width * zoom}
+          role="img"
+        >
+          <defs>
+            <marker id="trace-arrow" markerHeight="8" markerWidth="8" orient="auto" refX="7" refY="4">
+              <path d="M 0 0 L 8 4 L 0 8 z" />
+            </marker>
+          </defs>
+          {adjustedLayout.positioned.flatMap(({ node }) =>
+            node.parents.map((parentRef) => {
+              const parent = adjustedLayout.byId.get(parentRef.id);
+              const child = adjustedLayout.byId.get(node.id);
+              if (!parent || !child) {
+                return null;
+              }
+              const isHorizontal = direction === "LR";
+              const startX = parent.x + (isHorizontal ? adjustedLayout.nodeWidth : adjustedLayout.nodeWidth / 2);
+              const startY = parent.y + (isHorizontal ? adjustedLayout.nodeHeight / 2 : adjustedLayout.nodeHeight);
+              const endX = child.x + (isHorizontal ? 0 : adjustedLayout.nodeWidth / 2);
+              const endY = child.y + (isHorizontal ? adjustedLayout.nodeHeight / 2 : 0);
+              const path = isHorizontal
+                ? `M ${startX} ${startY} C ${startX + 54} ${startY}, ${endX - 54} ${endY}, ${endX} ${endY}`
+                : `M ${startX} ${startY} C ${startX} ${startY + 42}, ${endX} ${endY - 42}, ${endX} ${endY}`;
+              const midX = (startX + endX) / 2;
+              const midY = (startY + endY) / 2;
+              const labelText = parentRef.relation ? (relationLabels[parentRef.relation] || parentRef.relation) : "";
+              const labelWidth = Math.max(48, labelText.length * 5.5 + 10);
+              return (
+                <g className={`trace-edge trace-edge--${parentRef.relation || "necessitated_by"}`} key={`${parentRef.id}-${node.id}`}>
+                  <path d={path} />
+                  {parentRef.relation ? (
+                    <g className="trace-edge-label">
+                      <rect
+                        x={midX - labelWidth / 2}
+                        y={midY - 14}
+                        width={labelWidth}
+                        height={13}
+                        rx={4}
+                      />
+                      <text x={midX} y={midY - 7}>{labelText}</text>
+                    </g>
+                  ) : null}
+                </g>
+              );
+            }),
+          )}
+          {adjustedLayout.positioned.map(({ node, x, y }) => (
+            <g
+              className={`trace-map-node trace-map-node--${getNodeKind(node)} trace-map-node--${normalizeStatus(node.status)} ${selectedNodeId === node.id ? "is-selected" : ""} ${draggingNodeRef.current?.nodeId === node.id ? "is-dragging" : ""}`}
+              key={node.id}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                const offset = nodeOffsets.get(node.id) || { dx: 0, dy: 0 };
+                draggingNodeRef.current = {
+                  nodeId: node.id,
+                  startClientX: e.clientX,
+                  startClientY: e.clientY,
+                  startDx: offset.dx,
+                  startDy: offset.dy,
+                };
+              }}
+              onClick={() => {
+                if (dragRef.current.hasPanned || draggingNodeRef.current) {
+                  return;
+                }
+                onSelectNode(node.id);
+              }}
+              style={{ transform: `translate(${x}px, ${y}px)` }}
+            >
+              <rect height={adjustedLayout.nodeHeight} rx="8" width={adjustedLayout.nodeWidth} />
+              <circle className={`trace-node__dot--${normalizeStatus(node.status)}`} cx="16" cy="24" r="4" />
+              <text className="trace-map-node__title" x="28" y="26">{truncateNodeTitle(node.title)}</text>
+              <text className="trace-map-node__meta" x="28" y="44">{node.agent || getNodeKind(node)}</text>
+              <text className="trace-map-node__kind" x="28" y="58">{getNodeKind(node)}</text>
+            </g>
+          ))}
+        </svg>
+      </div>
+    </>
+  );
+}