@brainpilot/web 0.0.5 → 0.0.7

package/src/components/session/AgentTraceViews.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Network, Pause, Play, RefreshCw, Search, UserRoundCog, X } from "lucide-react";
-import { TraceGraph, TraceNode } from "../../contracts/backend";
+import { TraceNode } from "../../contracts/backend";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
-import { api } from "../../utils/api";
 import { CustomSelect } from "../primitives/CustomSelect";
 import { IconButton } from "../primitives/IconButton";
 import { AgentNetwork } from "./AgentNetwork";
@@ -12,6 +11,7 @@ import { TraceNodeDetail } from "./TraceNodeDetail";
 import {
   formatTime,
   getNodeKind,
+  getNodeKindLabelKey,
   getStatusLabelKey,
   normalizeStatus,
 } from "./traceLayout";
@@ -54,23 +54,27 @@ export function AgentsPanel() {
 }
 
 export function TracePanel() {
-  const { currentSession } = useSessions();
+  // #79: trace is now live — seeded + kept current by SessionContext via SSE
+  // (CUSTOM:trace_node), so this panel reads it instead of polling.
+  const { currentSession, currentTrace, refreshTrace } = useSessions();
   const t = useT();
-  const [trace, setTrace] = useState<TraceGraph | null>(null);
+  const trace = currentTrace;
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [query, setQuery] = useState("");
   const [statusFilter, setStatusFilter] = useState("all");
   const [typeFilter, setTypeFilter] = useState("all");
   const [direction, setDirection] = useState<"LR" | "TB">("LR");
   const [zoom, setZoom] = useState(1);
-  const [isAutoRefresh, setIsAutoRefresh] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const [playbackIndex, setPlaybackIndex] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [fitToken, setFitToken] = useState(0);
   const wasUserAdjustedRef = useRef(false);
   const prevNodeCountRef = useRef(0);
+  const formatNodeKind = (kind: string) => {
+    const key = getNodeKindLabelKey(kind);
+    return key ? t(key) : kind;
+  };
 
   const allNodes = trace?.nodes ?? [];
   const playbackNodes = useMemo(() => allNodes.slice(0, playbackIndex), [allNodes, playbackIndex]);
@@ -126,54 +130,24 @@ export function TracePanel() {
     return visibleNodes.find((node) => node.id === selectedNodeId) ?? visibleNodes[0] ?? null;
   }, [selectedNodeId, trace, visibleNodes]);
 
-  const loadTrace = async (silent = false) => {
-    if (!currentSession) {
-      setTrace(null);
-      setSelectedNodeId(null);
-      return;
-    }
-    if (!silent) {
-      setIsLoading(true);
-    }
-    setError(null);
+  const handleRefresh = async () => {
+    if (!currentSession) return;
+    setIsRefreshing(true);
     try {
-      const nextTrace = await api.sessions.getTrace(currentSession.id);
-      setTrace(nextTrace);
-      if (!silent) {
-        prevNodeCountRef.current = nextTrace.nodes.length;
-        if (!wasUserAdjustedRef.current) {
-          setPlaybackIndex(nextTrace.nodes.length);
-        }
-      }
-      setSelectedNodeId((current) => {
-        if (current && nextTrace.nodes.some((node) => node.id === current)) {
-          return current;
-        }
-        return nextTrace.nodes[0]?.id ?? null;
-      });
-    } catch (err) {
-      if (!silent) {
-        setTrace(null);
-        setError(err instanceof Error ? err.message : t("trace.loadFailed"));
-      }
+      await refreshTrace(currentSession.id);
     } finally {
-      if (!silent) {
-        setIsLoading(false);
-      }
+      setIsRefreshing(false);
     }
   };
 
+  // Keep a selection valid as nodes stream in: default to the first node, and
+  // hold the current selection while it still exists.
   useEffect(() => {
-    void loadTrace();
-  }, [currentSession?.id]);
-
-  useEffect(() => {
-    if (!currentSession || !isAutoRefresh) {
-      return;
-    }
-    const interval = window.setInterval(() => void loadTrace(true), 3000);
-    return () => window.clearInterval(interval);
-  }, [currentSession?.id, isAutoRefresh]);
+    setSelectedNodeId((current) => {
+      if (current && allNodes.some((node) => node.id === current)) return current;
+      return allNodes[0]?.id ?? null;
+    });
+  }, [allNodes]);
 
   useEffect(() => {
     if (selectedNodeId && visibleNodes.length > 0 && !visibleNodeIds.has(selectedNodeId)) {
@@ -250,36 +224,26 @@ export function TracePanel() {
           </div>
           <div className="trace-toolbar">
             <div className="trace-segmented" aria-label={t("trace.aria.layoutDir")}>
-              <button className={direction === "LR" ? "is-active" : ""} onClick={() => setDirection("LR")} type="button">LR</button>
-              <button className={direction === "TB" ? "is-active" : ""} onClick={() => setDirection("TB")} type="button">TB</button>
-            </div>
-            <div className="trace-refresh-group" aria-label={t("trace.aria.refreshControls")}>
-              <IconButton className={isLoading ? "is-active" : ""} disabled={!currentSession} label={t("trace.aria.refresh")} onClick={() => void loadTrace()}>
-                <RefreshCw size={15} />
-              </IconButton>
-              <button
-                aria-pressed={isAutoRefresh}
-                className={`trace-live-toggle ${isAutoRefresh ? "is-active" : ""}`}
-                disabled={!currentSession}
-                onClick={() => setIsAutoRefresh((current) => !current)}
-                title={t("trace.autoRefreshTitle")}
-                type="button"
-              >
-                <span aria-hidden="true" />
-                {t("trace.live")}
+              <button className={direction === "LR" ? "is-active" : ""} onClick={() => setDirection("LR")} type="button">
+                {t("trace.layout.horizontal")}
+              </button>
+              <button className={direction === "TB" ? "is-active" : ""} onClick={() => setDirection("TB")} type="button">
+                {t("trace.layout.vertical")}
               </button>
             </div>
+            <IconButton className={isRefreshing ? "is-active" : ""} disabled={!currentSession} label={t("trace.aria.refresh")} onClick={() => void handleRefresh()}>
+              <RefreshCw size={15} />
+            </IconButton>
           </div>
         </header>
 
-        {error ? <p className="workspace-panel__empty workspace-panel__empty--error">{error}</p> : null}
         {!currentSession ? <p className="workspace-panel__empty">{t("trace.emptyNoSession")}</p> : null}
 
         {trace ? (
           <>
             <div className="trace-meta">
               <span>{trace.meta.projectName || currentSession?.title || t("trace.untitled")}</span>
-              <span>{t("trace.focus", { focus: String(trace.meta.currentFocus || "-") })}</span>
+              {trace.meta.currentFocus ? <span>{t("trace.focus", { focus: String(trace.meta.currentFocus) })}</span> : null}
               <span>{t("trace.nodes", { visible: visibleNodes.length, total: trace.nodes.length })}</span>
               <span>{t("trace.created", { time: formatTime(trace.meta.createdAt) })}</span>
             </div>
@@ -318,7 +282,7 @@ export function TracePanel() {
                   onChange={setTypeFilter}
                   options={[
                     { label: t("trace.allTypes"), value: "all" },
-                    ...typeOptions.map((type) => ({ label: type, value: type })),
+                    ...typeOptions.map((type) => ({ label: formatNodeKind(type), value: type })),
                   ]}
                   value={typeFilter}
                 />
@@ -336,6 +300,7 @@ export function TracePanel() {
                   onZoomChange={setZoom}
                   fitToken={fitToken}
                   emptyLabel={t("trace.noMatch")}
+                  formatKind={formatNodeKind}
                   zoomLabels={{
                     controls: t("trace.aria.zoomControls"),
                     zoomIn: t("trace.aria.zoomIn"),
@@ -370,7 +335,7 @@ export function TracePanel() {
               </div>
 
               <article className="trace-detail">
-                <TraceNodeDetail node={selectedNode} onSelectNode={setSelectedNodeId} t={t} />
+                <TraceNodeDetail node={selectedNode} nodes={allNodes} onSelectNode={setSelectedNodeId} formatKind={formatNodeKind} t={t} />
               </article>
             </div>
           </>

package/src/components/session/AnalyticsTab.tsx

@@ -1,29 +1,19 @@
 /* --------------------------------------------------------------------------
  * AnalyticsTab — session-level statistics rendered as hand-rolled SVG (the
  * house style; no chart library). Always global: not affected by node
- * selection. Three groups: overview cards, trends/distribution, advanced.
+ * selection. Kept intentionally compact for end users: traffic, average
+ * message length, and lifecycle heatmap.
  * ------------------------------------------------------------------------ */
 import { useMemo } from "react";
-import {
-  AlertTriangle,
-  Inbox,
-  Timer,
-  TrendingUp,
-  Users,
-} from "lucide-react";
-import { AgentStatus, ChatMessage } from "../../contracts/backend";
+import { Inbox } from "lucide-react";
+import { AgentStatus, ChatMessage, TokenUsage } from "../../contracts/backend";
 import { AgentEdge, getAgentAccentVar } from "./agentNetworkShared";
 import {
   computeAgentLoad,
-  computeErrorCount,
   computeLifecycleHeatmap,
-  computeMessageTrend,
-  computeResponseLatencies,
-  computeTypeDistribution,
   estimateTokens,
-  formatDuration,
-  summarizeLatencies,
 } from "./agentAnalytics";
+import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
 
 interface AnalyticsTabProps {
@@ -33,27 +23,33 @@ interface AnalyticsTabProps {
   now: number;
 }
 
+/** Compact number formatting for token counts (1.2k, 3.4M). */
+function fmtTokens(n: number): string {
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 10_000 ? 1 : 0)}k`;
+  return `${(n / 1_000_000).toFixed(1)}M`;
+}
+
 export function AnalyticsTab({ agents, messages, edges, now }: AnalyticsTabProps) {
   const t = useT();
-  const trend = useMemo(() => computeMessageTrend(messages, now), [messages, now]);
+  const { tokenUsage } = useSessions();
   const load = useMemo(() => computeAgentLoad(edges), [edges]);
-  const typeDist = useMemo(() => computeTypeDistribution(messages), [messages]);
-  const latencyStats = useMemo(
-    () => summarizeLatencies(computeResponseLatencies(messages)),
-    [messages],
-  );
-  const tokens = useMemo(() => estimateTokens(messages), [messages]);
+  const lengthRows = useMemo(() => estimateTokens(messages), [messages]);
   const heatmap = useMemo(
     () => computeLifecycleHeatmap(messages, agents.map((a) => a.name), now),
     [messages, agents, now],
   );
-  const errorCount = useMemo(() => computeErrorCount(messages), [messages]);
+
+  // Per-agent real-usage rows, sorted by total desc. Empty when no provider
+  // usage has been reported yet (e.g. a freshly restored session pre-turn).
+  const usageRows = useMemo(() => {
+    if (!tokenUsage) return [] as Array<{ name: string } & TokenUsage>;
+    return Object.entries(tokenUsage.byAgent)
+      .map(([name, u]) => ({ name, ...u }))
+      .sort((a, b) => b.total - a.total);
+  }, [tokenUsage]);
 
   const totalMessages = edges.reduce((s, e) => s + e.messages.length, 0);
-  const liveCount = agents.length;
-  const runningCount = agents.filter(
-    (a) => a.status === "running" || a.status === "in_progress",
-  ).length;
 
   if (totalMessages === 0) {
     return (
@@ -66,56 +62,39 @@ export function AnalyticsTab({ agents, messages, edges, now }: AnalyticsTabProps
 
   return (
     <div className="agent-analytics">
-      {/* ---- Group 1: overview cards ---- */}
-      <div className="agent-analytics__cards">
-        <div className="agent-analytics__card">
-          <span className="agent-analytics__card-label">
-            <Inbox size={12} /> {t("analytics.card.totalMessages")}
-          </span>
-          <span className="agent-analytics__card-value">{totalMessages}</span>
-          <Sparkline values={trend.map((t) => t.count)} />
-        </div>
-
-        <div className="agent-analytics__card">
-          <span className="agent-analytics__card-label">
-            <Users size={12} /> {t("analytics.card.activeAgents")}
-          </span>
-          <span className="agent-analytics__card-value">
-            {liveCount}
-          </span>
-          <span className="agent-analytics__card-sub">{t("analytics.card.runningNow", { count: runningCount })}</span>
-        </div>
-
-        <div className="agent-analytics__card">
-          <span className="agent-analytics__card-label">
-            <Timer size={12} /> {t("analytics.card.avgLatency")}
-          </span>
-          <span className="agent-analytics__card-value">
-            {latencyStats ? formatDuration(latencyStats.mean) : "—"}
-          </span>
-          <span className="agent-analytics__card-sub">
-            {latencyStats ? t("analytics.card.median", { value: formatDuration(latencyStats.median) }) : t("analytics.card.noPairs")}
-          </span>
-        </div>
-
-        <div
-          className={`agent-analytics__card ${errorCount > 0 ? "agent-analytics__card--danger" : "agent-analytics__card--ok"}`}
-        >
-          <span className="agent-analytics__card-label">
-            <AlertTriangle size={12} /> {t("analytics.card.errors")}
-          </span>
-          <span className="agent-analytics__card-value">{errorCount}</span>
-          <span className="agent-analytics__card-sub">{errorCount === 0 ? t("analytics.card.allClear") : t("analytics.card.needsAttention")}</span>
-        </div>
-      </div>
-
-      {/* ---- Group 2: trends & distribution ---- */}
-      <section className="agent-analytics__chart">
-        <h4 className="agent-analytics__chart-title">
-          <TrendingUp size={13} /> {t("analytics.chart.volume")}
-        </h4>
-        <LineChart values={trend.map((t) => t.count)} />
-      </section>
+      {tokenUsage && tokenUsage.total.total > 0 ? (
+        <section className="agent-analytics__chart">
+          <h4 className="agent-analytics__chart-title">{t("analytics.chart.tokens")}</h4>
+          <div className="agent-analytics__token-total">
+            {fmtTokens(tokenUsage.total.total)}{" "}
+            <span className="agent-analytics__token-total-label">
+              {t("analytics.tokens.total")}
+            </span>
+          </div>
+          <table className="agent-analytics__table">
+            <thead>
+              <tr>
+                <th>{t("analytics.table.agent")}</th>
+                <th>{t("analytics.tokens.input")}</th>
+                <th>{t("analytics.tokens.output")}</th>
+                <th>{t("analytics.tokens.cache")}</th>
+                <th>{t("analytics.tokens.total")}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {usageRows.map((row) => (
+                <tr key={row.name}>
+                  <td>{row.name}</td>
+                  <td>{fmtTokens(row.input)}</td>
+                  <td>{fmtTokens(row.output)}</td>
+                  <td>{fmtTokens(row.cacheRead + row.cacheWrite)}</td>
+                  <td>{fmtTokens(row.total)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      ) : null}
 
       <section className="agent-analytics__chart">
         <h4 className="agent-analytics__chart-title">{t("analytics.chart.load")}</h4>
@@ -123,36 +102,21 @@ export function AnalyticsTab({ agents, messages, edges, now }: AnalyticsTabProps
       </section>
 
       <section className="agent-analytics__chart">
-        <h4 className="agent-analytics__chart-title">{t("analytics.chart.types")}</h4>
-        <PieChart dist={typeDist} />
-      </section>
-
-      {/* ---- Group 3: advanced ---- */}
-      {latencyStats ? (
-        <section className="agent-analytics__chart">
-          <h4 className="agent-analytics__chart-title">{t("analytics.chart.latency")}</h4>
-          <BoxPlot stats={latencyStats} />
-        </section>
-      ) : null}
-
-      <section className="agent-analytics__chart">
-        <h4 className="agent-analytics__chart-title">{t("analytics.chart.tokens")}</h4>
+        <h4 className="agent-analytics__chart-title">{t("analytics.chart.avgLength")}</h4>
         <table className="agent-analytics__table">
           <thead>
             <tr>
               <th>{t("analytics.table.agent")}</th>
               <th>{t("analytics.table.msgs")}</th>
               <th>{t("analytics.table.avgLen")}</th>
-              <th>{t("analytics.table.tokens")}</th>
             </tr>
           </thead>
           <tbody>
-            {tokens.map((row) => (
+            {lengthRows.map((row) => (
               <tr key={row.name}>
                 <td>{row.name}</td>
                 <td>{row.sentMsgs}</td>
                 <td>{row.avgLen}</td>
-                <td>{row.tokens.toLocaleString()}</td>
               </tr>
             ))}
           </tbody>
@@ -173,41 +137,6 @@ export function AnalyticsTab({ agents, messages, edges, now }: AnalyticsTabProps
  * Hand-rolled SVG primitives
  * ------------------------------------------------------------------------ */
 
-function Sparkline({ values }: { values: number[] }) {
-  const w = 200;
-  const h = 28;
-  if (values.length === 0) return null;
-  const max = Math.max(1, ...values);
-  const step = values.length > 1 ? w / (values.length - 1) : w;
-  const points = values.map((v, i) => `${i * step},${h - (v / max) * (h - 2) - 1}`).join(" ");
-  return (
-    <svg className="agent-analytics__sparkline" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
-      <polyline points={points} fill="none" stroke="var(--color-info)" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
-function LineChart({ values }: { values: number[] }) {
-  const t = useT();
-  const w = 320;
-  const h = 110;
-  const pad = 6;
-  const max = Math.max(1, ...values);
-  const step = values.length > 1 ? (w - pad * 2) / (values.length - 1) : w;
-  const pts = values.map((v, i) => ({
-    x: pad + i * step,
-    y: h - pad - (v / max) * (h - pad * 2),
-  }));
-  const line = pts.map((p) => `${p.x},${p.y}`).join(" ");
-  const area = `${pad},${h - pad} ${line} ${pad + (values.length - 1) * step},${h - pad}`;
-  return (
-    <svg className="agent-analytics__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label={t("analytics.aria.volume")}>
-      <polygon points={area} fill="color-mix(in srgb, var(--color-info) 16%, transparent)" stroke="none" />
-      <polyline points={line} fill="none" stroke="var(--color-info)" strokeWidth="1.75" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
 function BarChart({ rows }: { rows: { name: string; total: number }[] }) {
   const t = useT();
   if (rows.length === 0) return <p className="agent-analytics__hint">No traffic yet.</p>;
@@ -246,101 +175,6 @@ function BarChart({ rows }: { rows: { name: string; total: number }[] }) {
   );
 }
 
-function PieChart({ dist }: { dist: { delegate: number; result: number; other: number } }) {
-  const t = useT();
-  const segments = [
-    { key: "delegate", value: dist.delegate, color: "var(--color-info)" },
-    { key: "result", value: dist.result, color: "var(--color-success)" },
-    { key: "other", value: dist.other, color: "var(--color-text-subtle)" },
-  ].filter((s) => s.value > 0);
-  const total = segments.reduce((s, seg) => s + seg.value, 0);
-  if (total === 0) return <p className="agent-analytics__hint">No typed messages.</p>;
-
-  const cx = 55;
-  const cy = 55;
-  const r = 48;
-  let angle = -Math.PI / 2;
-  const arcs = segments.map((seg) => {
-    const frac = seg.value / total;
-    const start = angle;
-    const end = angle + frac * Math.PI * 2;
-    angle = end;
-    const x1 = cx + r * Math.cos(start);
-    const y1 = cy + r * Math.sin(start);
-    const x2 = cx + r * Math.cos(end);
-    const y2 = cy + r * Math.sin(end);
-    const large = end - start > Math.PI ? 1 : 0;
-    // Full-circle guard (single segment = 100%).
-    const d =
-      segments.length === 1
-        ? `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0`
-        : `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, color: seg.color, key: seg.key };
-  });
-
-  return (
-    <div className="agent-analytics__pie-wrap">
-      <svg className="agent-analytics__pie" viewBox="0 0 110 110" role="img" aria-label={t("analytics.aria.types")}>
-        {arcs.map((a) => (
-          <path key={a.key} d={a.d} fill={a.color} stroke="var(--color-surface)" strokeWidth="1" />
-        ))}
-        <circle cx={cx} cy={cy} r={22} fill="var(--color-surface-raised)" />
-        <text x={cx} y={cy + 4} textAnchor="middle" className="agent-analytics__pie-total">
-          {total}
-        </text>
-      </svg>
-      <ul className="agent-analytics__legend">
-        {segments.map((s) => (
-          <li key={s.key}>
-            <i style={{ background: s.color }} /> {s.key} ({s.value})
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-function BoxPlot({
-  stats,
-}: {
-  stats: { min: number; q1: number; median: number; q3: number; max: number };
-}) {
-  const t = useT();
-  const w = 320;
-  const h = 56;
-  const pad = 14;
-  const span = Math.max(1, stats.max - stats.min);
-  const scale = (v: number) => pad + ((v - stats.min) / span) * (w - pad * 2);
-  const midY = h / 2;
-  return (
-    <div>
-      <svg className="agent-analytics__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label={t("analytics.aria.latency")}>
-        {/* whisker */}
-        <line x1={scale(stats.min)} x2={scale(stats.max)} y1={midY} y2={midY} stroke="var(--color-border-strong)" strokeWidth="1.5" />
-        <line x1={scale(stats.min)} x2={scale(stats.min)} y1={midY - 8} y2={midY + 8} stroke="var(--color-border-strong)" />
-        <line x1={scale(stats.max)} x2={scale(stats.max)} y1={midY - 8} y2={midY + 8} stroke="var(--color-border-strong)" />
-        {/* box */}
-        <rect
-          x={scale(stats.q1)}
-          y={midY - 12}
-          width={Math.max(2, scale(stats.q3) - scale(stats.q1))}
-          height={24}
-          rx={3}
-          fill="color-mix(in srgb, var(--color-info) 20%, transparent)"
-          stroke="var(--color-info)"
-        />
-        {/* median */}
-        <line x1={scale(stats.median)} x2={scale(stats.median)} y1={midY - 12} y2={midY + 12} stroke="var(--color-info)" strokeWidth="2" />
-      </svg>
-      <div className="agent-analytics__boxplot-legend">
-        <span>min {formatDuration(stats.min)}</span>
-        <span>med {formatDuration(stats.median)}</span>
-        <span>max {formatDuration(stats.max)}</span>
-      </div>
-    </div>
-  );
-}
-
 function HeatmapGrid({
   heatmap,
 }: {

package/src/components/session/TraceGraphView.tsx

@@ -26,6 +26,7 @@ interface TraceGraphViewProps {
   fitToken?: number | string;
   /** Shown when there are no nodes to display. */
   emptyLabel?: string;
+  formatKind?: (kind: string) => string;
   zoomLabels?: {
     controls?: string;
     zoomIn?: string;
@@ -49,6 +50,7 @@ export function TraceGraphView({
   onZoomChange,
   fitToken,
   emptyLabel,
+  formatKind,
   zoomLabels,
 }: TraceGraphViewProps) {
   const [nodeOffsets, setNodeOffsets] = useState<Map<string, { dx: number; dy: number }>>(new Map());
@@ -264,36 +266,40 @@ export function TraceGraphView({
               );
             }),
           )}
-          {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>
-          ))}
+          {adjustedLayout.positioned.map(({ node, x, y }) => {
+            const kind = getNodeKind(node);
+            const kindLabel = formatKind?.(kind) ?? kind;
+            return (
+              <g
+                className={`trace-map-node trace-map-node--${kind} 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 || kindLabel}</text>
+                <text className="trace-map-node__kind" x="28" y="58">{kindLabel}</text>
+              </g>
+            );
+          })}
         </svg>
       </div>
     </>