@brainpilot/web 0.0.3 → 0.0.5

package/src/components/session/AnalyticsTab.tsx

@@ -0,0 +1,386 @@
+/* --------------------------------------------------------------------------
+ * 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.
+ * ------------------------------------------------------------------------ */
+import { useMemo } from "react";
+import {
+  AlertTriangle,
+  Inbox,
+  Timer,
+  TrendingUp,
+  Users,
+} from "lucide-react";
+import { AgentStatus, ChatMessage } from "../../contracts/backend";
+import { AgentEdge, getAgentAccentVar } from "./agentNetworkShared";
+import {
+  computeAgentLoad,
+  computeErrorCount,
+  computeLifecycleHeatmap,
+  computeMessageTrend,
+  computeResponseLatencies,
+  computeTypeDistribution,
+  estimateTokens,
+  formatDuration,
+  summarizeLatencies,
+} from "./agentAnalytics";
+import { useT } from "../../i18n/useT";
+
+interface AnalyticsTabProps {
+  agents: AgentStatus[];
+  messages: ChatMessage[];
+  edges: AgentEdge[];
+  now: number;
+}
+
+export function AnalyticsTab({ agents, messages, edges, now }: AnalyticsTabProps) {
+  const t = useT();
+  const trend = useMemo(() => computeMessageTrend(messages, now), [messages, now]);
+  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 heatmap = useMemo(
+    () => computeLifecycleHeatmap(messages, agents.map((a) => a.name), now),
+    [messages, agents, now],
+  );
+  const errorCount = useMemo(() => computeErrorCount(messages), [messages]);
+
+  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 (
+      <div className="agent-analytics__empty">
+        <Inbox size={20} />
+        <p>{t("analytics.empty")}</p>
+      </div>
+    );
+  }
+
+  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>
+
+      <section className="agent-analytics__chart">
+        <h4 className="agent-analytics__chart-title">{t("analytics.chart.load")}</h4>
+        <BarChart rows={load} />
+      </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>
+        <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) => (
+              <tr key={row.name}>
+                <td>{row.name}</td>
+                <td>{row.sentMsgs}</td>
+                <td>{row.avgLen}</td>
+                <td>{row.tokens.toLocaleString()}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+
+      {heatmap.agents.length > 0 ? (
+        <section className="agent-analytics__chart">
+          <h4 className="agent-analytics__chart-title">{t("analytics.chart.heatmap")}</h4>
+          <HeatmapGrid heatmap={heatmap} />
+        </section>
+      ) : null}
+    </div>
+  );
+}
+
+/* --------------------------------------------------------------------------
+ * 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>;
+  const max = Math.max(1, ...rows.map((r) => r.total));
+  const rowH = 22;
+  const labelW = 96;
+  const w = 320;
+  const barMax = w - labelW - 36;
+  const h = rows.length * rowH + 4;
+  return (
+    <svg className="agent-analytics__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label={t("analytics.aria.load")}>
+      {rows.map((r, i) => {
+        const y = i * rowH + 4;
+        const bw = (r.total / max) * barMax;
+        return (
+          <g key={r.name}>
+            <text x={0} y={y + 11} className="agent-analytics__bar-label">
+              {r.name.length > 12 ? `${r.name.slice(0, 11)}…` : r.name}
+            </text>
+            <rect
+              x={labelW}
+              y={y + 2}
+              width={Math.max(2, bw)}
+              height={rowH - 8}
+              rx={2}
+              fill={getAgentAccentVar(r.name)}
+              opacity={0.85}
+            />
+            <text x={labelW + bw + 6} y={y + 11} className="agent-analytics__bar-value">
+              {r.total}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+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,
+}: {
+  heatmap: { agents: string[]; buckets: number; counts: number[][]; max: number };
+}) {
+  const t = useT();
+  const cell = 14;
+  const gap = 2;
+  const labelW = 90;
+  const w = labelW + heatmap.buckets * (cell + gap);
+  const h = heatmap.agents.length * (cell + gap) + 2;
+  return (
+    <svg className="agent-analytics__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label={t("analytics.aria.heatmap")}>
+      {heatmap.agents.map((name, ai) => (
+        <g key={name}>
+          <text x={0} y={ai * (cell + gap) + cell - 2} className="agent-analytics__bar-label">
+            {name.length > 11 ? `${name.slice(0, 10)}…` : name}
+          </text>
+          {heatmap.counts[ai].map((count, bi) => {
+            const intensity = heatmap.max > 0 ? count / heatmap.max : 0;
+            return (
+              <rect
+                key={bi}
+                x={labelW + bi * (cell + gap)}
+                y={ai * (cell + gap)}
+                width={cell}
+                height={cell}
+                rx={2}
+                fill={
+                  count === 0
+                    ? "var(--color-surface-soft)"
+                    : `color-mix(in srgb, var(--color-info) ${Math.round(15 + intensity * 75)}%, transparent)`
+                }
+              >
+                <title>{`${name} · bucket ${bi + 1}: ${count} msg`}</title>
+              </rect>
+            );
+          })}
+        </g>
+      ))}
+    </svg>
+  );
+}

package/src/components/session/GlobalOverview.tsx

@@ -0,0 +1,108 @@
+/* --------------------------------------------------------------------------
+ * GlobalOverview — the Detail tab's "nothing selected" state. Replaces the old
+ * EmptyDetail with an at-a-glance session summary so the panel is informative
+ * even before the user clicks a node or edge.
+ * ------------------------------------------------------------------------ */
+import { Activity, Inbox, Network, Timer, Users } from "lucide-react";
+import { AgentStatus, ChatMessage } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+import { AgentEdge, relativeTime } from "./agentNetworkShared";
+import {
+  computeResponseLatencies,
+  formatDuration,
+  summarizeLatencies,
+} from "./agentAnalytics";
+
+interface GlobalOverviewProps {
+  agents: AgentStatus[];
+  edges: AgentEdge[];
+  messages: ChatMessage[];
+  totalNodes: number;
+  liveCount: number;
+  now: number;
+}
+
+export function GlobalOverview({
+  agents,
+  edges,
+  messages,
+  totalNodes,
+  liveCount,
+  now,
+}: GlobalOverviewProps) {
+  const t = useT();
+  const totalMessages = edges.reduce((sum, e) => sum + e.messages.length, 0);
+  const dormantCount = Math.max(0, totalNodes - liveCount);
+  const runningCount = agents.filter(
+    (a) => a.status === "running" || a.status === "in_progress",
+  ).length;
+
+  const lastActivityIso = edges.reduce<string>((latest, e) => {
+    return e.lastTimestamp > latest ? e.lastTimestamp : latest;
+  }, "");
+
+  const latencyStats = summarizeLatencies(computeResponseLatencies(messages));
+
+  return (
+    <div className="agent-network__overview">
+      <header className="agent-network__overview-head">
+        <span className="agent-network__overview-icon">
+          <Network size={16} />
+        </span>
+        <h3>{t("overview.title")}</h3>
+      </header>
+
+      <dl className="agent-network__overview-stats">
+        <div>
+          <dt>
+            <Users size={13} /> {t("overview.agents")}
+          </dt>
+          <dd>
+            {t("overview.liveDormant", { live: liveCount, dormant: dormantCount })}
+            <span className="agent-network__overview-sub">{t("overview.total", { total: totalNodes })}</span>
+          </dd>
+        </div>
+        <div>
+          <dt>
+            <Activity size={13} /> {t("overview.runningNow")}
+          </dt>
+          <dd>{runningCount}</dd>
+        </div>
+        <div>
+          <dt>
+            <Inbox size={13} /> {t("overview.messages")}
+          </dt>
+          <dd>
+            {totalMessages}
+            <span className="agent-network__overview-sub">{t("overview.acrossLinks", { count: edges.length })}</span>
+          </dd>
+        </div>
+        <div>
+          <dt>
+            <Timer size={13} /> {t("overview.avgResponse")}
+          </dt>
+          <dd>
+            {latencyStats ? formatDuration(latencyStats.mean) : "—"}
+            {latencyStats ? (
+              <span className="agent-network__overview-sub">
+                {t("overview.median", { value: formatDuration(latencyStats.median) })}
+              </span>
+            ) : null}
+          </dd>
+        </div>
+        <div>
+          <dt>
+            <Activity size={13} /> {t("overview.lastActivity")}
+          </dt>
+          <dd>{lastActivityIso ? relativeTime(lastActivityIso, now) : "—"}</dd>
+        </div>
+      </dl>
+
+      <p className="agent-network__overview-tip">
+        {t("overview.tipPrefix")}
+        <strong>{t("network.tab.analytics")}</strong> / <strong>{t("network.tab.timeline")}</strong>
+        {t("overview.tipSuffix")}
+      </p>
+    </div>
+  );
+}

package/src/components/session/NodeTooltip.tsx

@@ -0,0 +1,127 @@
+/* --------------------------------------------------------------------------
+ * NodeTooltip — a small hover card shown beside an agent node in the network
+ * graph. Rendered as an absolutely-positioned <div> INSIDE the viewport
+ * container (NOT inside the SVG) so it isn't clipped by foreignObject and can
+ * use normal DOM layout. The parent computes the anchor rect (node bounding
+ * box, relative to the viewport container) and passes it in; the tooltip flips
+ * to the left side when there isn't room on the right.
+ * ------------------------------------------------------------------------ */
+import { Inbox, Send } from "lucide-react";
+import {
+  getAgentIcon,
+  getAgentProfile,
+  relativeTime,
+  statusKind,
+} from "./agentNetworkShared";
+
+export interface NodeTooltipData {
+  name: string;
+  isLive: boolean;
+  status: string;
+  task: string;
+  updatedAt?: string;
+  sent: number;
+  received: number;
+}
+
+interface NodeTooltipProps {
+  data: NodeTooltipData;
+  now: number;
+  /** Node bounding box, in pixels relative to the viewport container. */
+  anchor: { left: number; top: number; width: number; height: number };
+  /** Viewport container size, for collision detection. */
+  container: { width: number; height: number };
+}
+
+const TOOLTIP_WIDTH = 240;
+const GAP = 12;
+
+function truncate(text: string, max: number): string {
+  if (text.length <= max) return text;
+  return `${text.slice(0, max - 1)}…`;
+}
+
+export function NodeTooltip({ data, now, anchor, container }: NodeTooltipProps) {
+  const Icon = getAgentIcon(data.name);
+  const profile = getAgentProfile(data.name);
+  const kind = data.isLive ? statusKind(data.status) : "dormant";
+
+  // Decide side: prefer right of the node; flip left if it would overflow.
+  const wouldOverflowRight = anchor.left + anchor.width + GAP + TOOLTIP_WIDTH > container.width;
+  const side: "left" | "right" = wouldOverflowRight ? "left" : "right";
+
+  const left =
+    side === "right"
+      ? anchor.left + anchor.width + GAP
+      : Math.max(GAP, anchor.left - GAP - TOOLTIP_WIDTH);
+
+  // Vertically center on the node, clamped to the container.
+  const rawTop = anchor.top + anchor.height / 2;
+  const top = Math.min(Math.max(GAP, rawTop), container.height - GAP);
+
+  return (
+    <div
+      className={`agent-network__tooltip agent-network__tooltip--${side}`}
+      role="tooltip"
+      style={{ left, top, width: TOOLTIP_WIDTH }}
+    >
+      <div className="agent-network__tooltip-head">
+        <span
+          className="agent-network__tooltip-avatar"
+          style={{ ["--agent-accent" as string]: accentVar(profile.accent) }}
+        >
+          <Icon size={14} />
+        </span>
+        <div className="agent-network__tooltip-id">
+          <strong>{data.name}</strong>
+          <span>{profile.role}</span>
+        </div>
+      </div>
+
+      <div className="agent-network__tooltip-row">
+        <span className={`agent-network__tooltip-status agent-network__tooltip-status--${kind}`}>
+          <i className={`agent-network__tooltip-dot agent-network__tooltip-dot--${kind}`} />
+          {data.isLive ? data.status : "dormant"}
+        </span>
+      </div>
+
+      {data.isLive ? (
+        <p className="agent-network__tooltip-task">
+          {data.task ? truncate(data.task, 60) : "Idle — waiting for instructions"}
+        </p>
+      ) : (
+        <p className="agent-network__tooltip-task agent-network__tooltip-task--dormant">
+          Not yet spawned by Principal
+        </p>
+      )}
+
+      {data.isLive && data.updatedAt ? (
+        <p className="agent-network__tooltip-meta">Updated {relativeTime(data.updatedAt, now)}</p>
+      ) : null}
+
+      <div className="agent-network__tooltip-counts">
+        <span>
+          <Send size={11} /> Sent {data.sent}
+        </span>
+        <span>
+          <Inbox size={11} /> Received {data.received}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function accentVar(accent: string): string {
+  switch (accent) {
+    case "info":
+      return "var(--color-info)";
+    case "success":
+      return "var(--color-success)";
+    case "warning":
+      return "var(--color-warning)";
+    case "danger":
+      return "var(--color-danger)";
+    default:
+      return "var(--color-text-subtle)";
+  }
+}