feat(services): Path view + Overview agent charts (deploy roll-up)

console/src/app.tsx

@@ -6,6 +6,7 @@ import { PerformancePage } from "@/pages/performance"
 import { TrafficPage } from "@/pages/traffic"
 import { ErrorsPage } from "@/pages/errors"
 import { ModelsPage } from "@/pages/models"
+import { ServicesPage } from "@/pages/services"
 import { LlmCallsPage } from "@/pages/llm-calls"
 import { AgentSessionsPage } from "@/pages/agent-sessions"
 import { AgentSessionDetailPage } from "@/pages/agent-session-detail"
@@ -36,6 +37,7 @@ export default function App() {
             <Route path="/traffic" element={<TrafficPage />} />
             <Route path="/errors" element={<ErrorsPage />} />
             <Route path="/models" element={<ModelsPage />} />
+            <Route path="/services" element={<ServicesPage />} />
             <Route path="/agent-sessions" element={<AgentSessionsPage />} />
             <Route path="/agent-sessions/:source_id/:session_id" element={<AgentSessionDetailPage />} />
             <Route path="/agent-turns" element={<AgentTurnsPage />} />

console/src/components/charts/agent-activity-chart.tsx

@@ -0,0 +1,115 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts"
+import { formatNumber, formatAxisTime } from "@/lib/format"
+import type { AgentActivityPoint } from "@/types/api"
+
+// Same palette as RequestVolumeChart — keeps the Overview row
+// internally consistent.
+const SERIES_COLORS = [
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6",
+  "#ec4899",
+  "#06b6d4",
+  "#84cc16",
+]
+
+interface Props {
+  points: AgentActivityPoint[]
+}
+
+export function AgentActivityChart({ points }: Props) {
+  if (points.length === 0) {
+    return (
+      <div className="flex h-[240px] items-center justify-center text-sm text-muted-foreground">
+        No agent activity in the selected window
+      </div>
+    )
+  }
+
+  // Pivot the long-form rows `(ts, kind, count)` into wide-form
+  // recharts data: `{time: <sec>, kind1: n, kind2: n, ...}`.
+  const tsSet = new Set<number>()
+  const kindSet = new Set<string>()
+  const byTsKind = new Map<number, Map<string, number>>()
+  for (const p of points) {
+    tsSet.add(p.timestamp_ms)
+    kindSet.add(p.agent_kind)
+    if (!byTsKind.has(p.timestamp_ms)) byTsKind.set(p.timestamp_ms, new Map())
+    byTsKind.get(p.timestamp_ms)!.set(p.agent_kind, p.turn_count)
+  }
+  const tsAsc = [...tsSet].sort((a, b) => a - b)
+  // Sort kinds by total turns desc so the dominant agent renders
+  // closest to the X axis — same convention as RequestVolumeChart.
+  const totals = new Map<string, number>()
+  for (const p of points) {
+    totals.set(p.agent_kind, (totals.get(p.agent_kind) ?? 0) + p.turn_count)
+  }
+  const kindsByVolume = [...kindSet].sort(
+    (a, b) => (totals.get(b) ?? 0) - (totals.get(a) ?? 0),
+  )
+  const chartData = tsAsc.map((ms) => {
+    const row: Record<string, number> = { time: Math.floor(ms / 1000) }
+    const m = byTsKind.get(ms)!
+    for (const k of kindsByVolume) {
+      row[k] = m.get(k) ?? 0
+    }
+    return row
+  })
+  const spanSec =
+    tsAsc.length > 1 ? (tsAsc[tsAsc.length - 1] - tsAsc[0]) / 1000 : 0
+
+  return (
+    <ResponsiveContainer width="100%" height={240}>
+      <AreaChart data={chartData} margin={{ top: 4, right: 8, bottom: 0, left: -12 }}>
+        <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+        <XAxis
+          dataKey="time"
+          tickFormatter={(v: number) => formatAxisTime(v, spanSec)}
+          className="text-[11px] fill-muted-foreground"
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          tickFormatter={(v: number) => formatNumber(v)}
+          className="text-[11px] fill-muted-foreground"
+          tickLine={false}
+          axisLine={false}
+        />
+        <Tooltip
+          labelFormatter={(v) => new Date(Number(v) * 1000).toLocaleString()}
+          formatter={(value, name) => [formatNumber(Number(value)), String(name)]}
+          contentStyle={{
+            backgroundColor: "hsl(var(--card))",
+            borderColor: "hsl(var(--border))",
+            borderRadius: "8px",
+            fontSize: "12px",
+          }}
+        />
+        <Legend wrapperStyle={{ fontSize: "12px" }} />
+        {kindsByVolume.map((kind, i) => (
+          <Area
+            key={kind}
+            type="monotone"
+            dataKey={kind}
+            stackId="1"
+            fill={SERIES_COLORS[i % SERIES_COLORS.length]}
+            stroke={SERIES_COLORS[i % SERIES_COLORS.length]}
+            fillOpacity={0.4}
+            isAnimationActive={false}
+          />
+        ))}
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

console/src/components/charts/agent-distribution-chart.tsx

@@ -0,0 +1,88 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+import { formatNumber } from "@/lib/format"
+import type { AgentKindSummary } from "@/types/api"
+
+interface Props {
+  rows: AgentKindSummary[]
+}
+
+export function AgentDistributionChart({ rows }: Props) {
+  if (rows.length === 0) {
+    return (
+      <div className="flex h-[240px] items-center justify-center text-sm text-muted-foreground">
+        No agents observed in the selected window
+      </div>
+    )
+  }
+
+  // Trim to top 10 — agent_kind cardinality is usually <10 anyway,
+  // but a misconfigured client can dump dozens of arbitrary strings.
+  const sorted = [...rows].sort((a, b) => b.turn_count - a.turn_count).slice(0, 10)
+  const chartData = sorted.map((r) => ({
+    label: r.agent_kind.length > 24 ? r.agent_kind.slice(0, 22) + "…" : r.agent_kind,
+    full: r.agent_kind,
+    turns: r.turn_count,
+    in: r.total_input_tokens,
+    out: r.total_output_tokens,
+  }))
+
+  return (
+    <ResponsiveContainer
+      width="100%"
+      height={Math.max(240, sorted.length * 36 + 40)}
+    >
+      <BarChart
+        data={chartData}
+        layout="vertical"
+        margin={{ top: 4, right: 8, bottom: 0, left: 0 }}
+      >
+        <CartesianGrid strokeDasharray="3 3" horizontal={false} className="stroke-border" />
+        <XAxis
+          type="number"
+          tickFormatter={(v: number) => formatNumber(v)}
+          className="text-[11px] fill-muted-foreground"
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          type="category"
+          dataKey="label"
+          width={150}
+          className="text-[11px] fill-muted-foreground"
+          tickLine={false}
+          axisLine={false}
+        />
+        <Tooltip
+          formatter={(value, name) => {
+            if (name === "turns") return [formatNumber(Number(value)), "Turns"]
+            return [String(value), String(name)]
+          }}
+          labelFormatter={(_label, payload) =>
+            (payload[0]?.payload as Record<string, string>)?.full ?? String(_label)
+          }
+          contentStyle={{
+            backgroundColor: "hsl(var(--card))",
+            borderColor: "hsl(var(--border))",
+            borderRadius: "8px",
+            fontSize: "12px",
+          }}
+        />
+        <Bar
+          dataKey="turns"
+          fill="#8b5cf6"
+          radius={[0, 4, 4, 0]}
+          barSize={20}
+          isAnimationActive={false}
+        />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

console/src/components/layout/sidebar.tsx

@@ -4,7 +4,7 @@ import {
   Gauge,
   BarChart3,
   AlertTriangle,
-  Cpu,
+  Server,
   Sparkles,
   MessageSquare,
   MessagesSquare,
@@ -22,9 +22,11 @@ const TOOLBAR_KEYS = ["preset", "start", "end", "wire_api", "model", "server_ip"
 const navItems = [
   { to: "/", icon: LayoutDashboard, label: "Overview" },
   { to: "/performance", icon: Gauge, label: "Performance" },
-  { to: "/traffic", icon: BarChart3, label: "Traffic" },
+  // Models view is now a tab inside Services; route /models still
+  // resolves for shared links but the sidebar entry was redundant.
+  { to: "/traffic", icon: BarChart3, label: "Usage" },
   { to: "/errors", icon: AlertTriangle, label: "Errors" },
-  { to: "/models", icon: Cpu, label: "Models" },
+  { to: "/services", icon: Server, label: "Services" },
   { to: "/agent-sessions", icon: MessageSquare, label: "Agent Sessions" },
   { to: "/agent-turns", icon: MessagesSquare, label: "Agent Turns" },
   { to: "/llm-calls", icon: Sparkles, label: "LLM Calls" },