@brainpilot/web 0.0.4 → 0.0.6

package/src/components/session/AgentTraceViews.tsx

@@ -0,0 +1,346 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Network, Pause, Play, RefreshCw, Search, UserRoundCog, X } from "lucide-react";
+import { TraceNode } from "../../contracts/backend";
+import { useSessions } from "../../contexts/SessionContext";
+import { useT } from "../../i18n/useT";
+import { CustomSelect } from "../primitives/CustomSelect";
+import { IconButton } from "../primitives/IconButton";
+import { AgentNetwork } from "./AgentNetwork";
+import { TraceGraphView } from "./TraceGraphView";
+import { TraceNodeDetail } from "./TraceNodeDetail";
+import {
+  formatTime,
+  getNodeKind,
+  getNodeKindLabelKey,
+  getStatusLabelKey,
+  normalizeStatus,
+} from "./traceLayout";
+
+export function AgentsPanel() {
+  const { agents, currentSession, agentFilters, setAgentFilter, messages } = useSessions();
+  const t = useT();
+
+  return (
+    <section className="workspace-panel" aria-labelledby="agents-panel-heading">
+      <div className="workspace-panel__inner workspace-panel__inner--trace">
+        <header className="workspace-panel__header">
+          <div>
+            <span className="workspace-panel__eyebrow">
+              <Network size={11} style={{ marginRight: 4, verticalAlign: "-1px" }} />
+              {t("trace.agents.eyebrow")}
+            </span>
+            <h2 id="agents-panel-heading">{t("trace.agents.title")}</h2>
+          </div>
+          <UserRoundCog size={18} />
+        </header>
+
+        {!currentSession ? (
+          <p className="workspace-panel__empty">{t("trace.agents.emptyNoSession")}</p>
+        ) : (
+          <AgentNetwork
+            agents={agents}
+            agentFilters={agentFilters}
+            messages={messages}
+            onSetAgentFilter={setAgentFilter}
+          />
+        )}
+
+        {currentSession && agents.length === 0 ? (
+          <p className="workspace-panel__empty">{t("trace.agents.emptyNoEvents")}</p>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export function TracePanel() {
+  // #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 = 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 [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]);
+
+  const filteredNodes = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    return playbackNodes.filter((node) => {
+      const status = normalizeStatus(node.status);
+      const nodeKind = getNodeKind(node);
+      const matchesStatus = statusFilter === "all" || status === statusFilter;
+      const matchesType = typeFilter === "all" || nodeKind === typeFilter;
+      const searchText = [
+        node.id,
+        node.title,
+        node.description,
+        node.summary,
+        node.reason,
+        node.context,
+        node.agent,
+        nodeKind,
+        ...node.toolCalls,
+        ...node.artifacts.map((artifact) => artifact.path),
+      ].filter(Boolean).join(" ").toLowerCase();
+      return matchesStatus && matchesType && (!normalizedQuery || searchText.includes(normalizedQuery));
+    });
+  }, [query, statusFilter, playbackNodes, typeFilter]);
+
+  const visibleNodeIds = useMemo(() => new Set(filteredNodes.map((node) => node.id)), [filteredNodes]);
+  const visibleNodes = useMemo(
+    () => filteredNodes.map((node) => ({
+      ...node,
+      parentIds: node.parentIds.filter((parentId) => visibleNodeIds.has(parentId)),
+      parents: node.parents.filter((parent) => visibleNodeIds.has(parent.id)),
+      childIds: node.childIds.filter((childId) => visibleNodeIds.has(childId)),
+    })),
+    [filteredNodes, visibleNodeIds],
+  );
+  const statusOptions = useMemo(
+    () => Array.from(new Set((trace?.nodes ?? []).map((node) => normalizeStatus(node.status)).filter(Boolean))).sort(),
+    [trace?.nodes],
+  );
+  const typeOptions = useMemo(
+    () => Array.from(new Set((trace?.nodes ?? []).map(getNodeKind).filter(Boolean))).sort(),
+    [trace?.nodes],
+  );
+  const selectedNode = useMemo<TraceNode | null>(() => {
+    if (!trace) {
+      return null;
+    }
+    if (visibleNodes.length === 0) {
+      return null;
+    }
+    return visibleNodes.find((node) => node.id === selectedNodeId) ?? visibleNodes[0] ?? null;
+  }, [selectedNodeId, trace, visibleNodes]);
+
+  const handleRefresh = async () => {
+    if (!currentSession) return;
+    setIsRefreshing(true);
+    try {
+      await refreshTrace(currentSession.id);
+    } finally {
+      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(() => {
+    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)) {
+      setSelectedNodeId(visibleNodes[0].id);
+    }
+  }, [selectedNodeId, visibleNodeIds, visibleNodes]);
+
+  useEffect(() => {
+    setPlaybackIndex(allNodes.length);
+    prevNodeCountRef.current = allNodes.length;
+    wasUserAdjustedRef.current = false;
+    setIsPlaying(false);
+  }, [currentSession?.id]);
+
+  useEffect(() => {
+    if (allNodes.length === 0) {
+      setPlaybackIndex(0);
+      prevNodeCountRef.current = 0;
+      return;
+    }
+    if (!wasUserAdjustedRef.current) {
+      if (allNodes.length > prevNodeCountRef.current) {
+        if (playbackIndex >= prevNodeCountRef.current || prevNodeCountRef.current === 0) {
+          setPlaybackIndex(allNodes.length);
+        }
+      } else if (allNodes.length < playbackIndex) {
+        setPlaybackIndex(allNodes.length);
+      }
+    }
+    prevNodeCountRef.current = allNodes.length;
+  }, [allNodes.length, playbackIndex]);
+
+  useEffect(() => {
+    if (!isPlaying || allNodes.length === 0) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setPlaybackIndex((current) => {
+        if (current >= allNodes.length) {
+          setIsPlaying(false);
+          return current;
+        }
+        return current + 1;
+      });
+      setFitToken((token) => token + 1);
+    }, 800);
+    return () => window.clearInterval(interval);
+  }, [isPlaying, allNodes.length]);
+
+  const togglePlayback = () => {
+    if (allNodes.length === 0) {
+      return;
+    }
+    if (playbackIndex >= allNodes.length) {
+      setPlaybackIndex(0);
+    }
+    wasUserAdjustedRef.current = false;
+    setIsPlaying((current) => !current);
+  };
+
+  const handleSliderChange = (value: number) => {
+    setIsPlaying(false);
+    wasUserAdjustedRef.current = true;
+    setPlaybackIndex(value);
+  };
+
+  return (
+    <section className="workspace-panel" aria-labelledby="trace-panel-heading">
+      <div className="workspace-panel__inner workspace-panel__inner--trace">
+        <header className="workspace-panel__header trace-header">
+          <div>
+            <span className="workspace-panel__eyebrow">{t("trace.eyebrow")}</span>
+            <h2 id="trace-panel-heading">{t("trace.title")}</h2>
+          </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">
+                {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>
+
+        {!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>
+              {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>
+
+            <div className="trace-controls">
+              <label className="trace-search">
+                <Search size={14} />
+                <input placeholder={t("trace.searchPlaceholder")} value={query} onChange={(event) => setQuery(event.target.value)} />
+                {query ? (
+                  <button aria-label={t("trace.aria.clearSearch")} onClick={() => setQuery("")} type="button">
+                    <X size={13} />
+                  </button>
+                ) : null}
+              </label>
+              <div className="trace-control">
+                <span>{t("trace.status")}</span>
+                <CustomSelect
+                  ariaLabel={t("trace.aria.statusFilter")}
+                  className="trace-control__select"
+                  onChange={setStatusFilter}
+                  options={[
+                    { label: t("trace.allStatus"), value: "all" },
+                    ...statusOptions.map((status) => {
+                      const key = getStatusLabelKey(status);
+                      return { label: key ? t(key) : status, value: status };
+                    }),
+                  ]}
+                  value={statusFilter}
+                />
+              </div>
+              <div className="trace-control">
+                <span>{t("trace.type")}</span>
+                <CustomSelect
+                  ariaLabel={t("trace.aria.typeFilter")}
+                  className="trace-control__select"
+                  onChange={setTypeFilter}
+                  options={[
+                    { label: t("trace.allTypes"), value: "all" },
+                    ...typeOptions.map((type) => ({ label: formatNodeKind(type), value: type })),
+                  ]}
+                  value={typeFilter}
+                />
+              </div>
+            </div>
+
+            <div className="trace-layout">
+              <div className="trace-map" aria-label={t("trace.aria.graph")}>
+                <TraceGraphView
+                  nodes={visibleNodes}
+                  direction={direction}
+                  selectedNodeId={selectedNode?.id ?? null}
+                  onSelectNode={setSelectedNodeId}
+                  zoom={zoom}
+                  onZoomChange={setZoom}
+                  fitToken={fitToken}
+                  emptyLabel={t("trace.noMatch")}
+                  formatKind={formatNodeKind}
+                  zoomLabels={{
+                    controls: t("trace.aria.zoomControls"),
+                    zoomIn: t("trace.aria.zoomIn"),
+                    zoomOut: t("trace.aria.zoomOut"),
+                    reset: t("trace.aria.resetZoom"),
+                  }}
+                />
+                {allNodes.length > 0 ? (
+                  <div className="trace-playback-bar" aria-label={t("trace.aria.playbackControls")}>
+                    <button
+                      aria-label={isPlaying ? t("trace.aria.pause") : t("trace.aria.play")}
+                      className="trace-playback-bar__button"
+                      onClick={togglePlayback}
+                      type="button"
+                    >
+                      {isPlaying ? <Pause size={14} /> : <Play size={14} />}
+                    </button>
+                    <input
+                      aria-label={t("trace.aria.playbackProgress")}
+                      className="trace-playback-bar__slider"
+                      max={allNodes.length}
+                      min={0}
+                      onChange={(e) => handleSliderChange(Number(e.target.value))}
+                      type="range"
+                      value={playbackIndex}
+                    />
+                    <span className="trace-playback-bar__count">
+                      {playbackIndex} / {allNodes.length}
+                    </span>
+                  </div>
+                ) : null}
+              </div>
+
+              <article className="trace-detail">
+                <TraceNodeDetail node={selectedNode} nodes={allNodes} onSelectNode={setSelectedNodeId} formatKind={formatNodeKind} t={t} />
+              </article>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/components/session/AnalyticsTab.tsx

@@ -0,0 +1,220 @@
+/* --------------------------------------------------------------------------
+ * AnalyticsTab — session-level statistics rendered as hand-rolled SVG (the
+ * house style; no chart library). Always global: not affected by node
+ * selection. Kept intentionally compact for end users: traffic, average
+ * message length, and lifecycle heatmap.
+ * ------------------------------------------------------------------------ */
+import { useMemo } from "react";
+import { Inbox } from "lucide-react";
+import { AgentStatus, ChatMessage, TokenUsage } from "../../contracts/backend";
+import { AgentEdge, getAgentAccentVar } from "./agentNetworkShared";
+import {
+  computeAgentLoad,
+  computeLifecycleHeatmap,
+  estimateTokens,
+} from "./agentAnalytics";
+import { useSessions } from "../../contexts/SessionContext";
+import { useT } from "../../i18n/useT";
+
+interface AnalyticsTabProps {
+  agents: AgentStatus[];
+  messages: ChatMessage[];
+  edges: AgentEdge[];
+  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 { tokenUsage } = useSessions();
+  const load = useMemo(() => computeAgentLoad(edges), [edges]);
+  const lengthRows = useMemo(() => estimateTokens(messages), [messages]);
+  const heatmap = useMemo(
+    () => computeLifecycleHeatmap(messages, agents.map((a) => a.name), now),
+    [messages, agents, now],
+  );
+
+  // 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);
+
+  if (totalMessages === 0) {
+    return (
+      <div className="agent-analytics__empty">
+        <Inbox size={20} />
+        <p>{t("analytics.empty")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="agent-analytics">
+      {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>
+        <BarChart rows={load} />
+      </section>
+
+      <section className="agent-analytics__chart">
+        <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>
+            </tr>
+          </thead>
+          <tbody>
+            {lengthRows.map((row) => (
+              <tr key={row.name}>
+                <td>{row.name}</td>
+                <td>{row.sentMsgs}</td>
+                <td>{row.avgLen}</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 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 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>
+  );
+}