feat(nodes): node detail page — telemetry, containers, commands, controls

/nodes/:id (admin): cpu/mem sparklines from heartbeat history
(1h/24h/7d), containers on node, command history, inline rename,
auto-prune toggle, prune-now with volume opt-in, remove. Agent rows
on the Usage page link into it.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

ROADMAP2.md

@@ -263,8 +263,11 @@ and wired refs, one click or one CLI call.
 - [ ] **Mesh awareness** — agent detects + reports tailscale0/netbird0/
   zt0 IPs at register; backend stores + displays. Optional
   `TAILSCALE_AUTH_KEY` enroll-at-provision later.
-- [ ] **Node detail page** — placed services, telemetry history, agent
-  version + self-upgrade, **drain/cordon**, remove.
+- [x] **Node detail page** — `/nodes/:id` (admin): heartbeat telemetry
+  (cpu/mem sparklines over 1h/24h/7d via `GET /agents/:id/metrics`),
+  containers, command history, rename, auto-prune toggle, prune-now,
+  remove. Drain/cordon and self-upgrade deferred — they need
+  `services.node_id` routing which lands with multi-node scheduling.
 - [x] **Node housekeeping** — agent `prune` + `system_df` commands
   (`docker system prune -af`, volumes excluded unless requested, optional
   `--until`). `node_agents.auto_prune` + the health sweep enqueue a prune

app/frontend/src/app/App.tsx

@@ -26,6 +26,7 @@ import {
   ComponentShowcase,
   GitHubAppCallbackPage,
 } from '@/features/secondary/pages';
+import { NodeDetailPage } from '@/features/nodes/NodeDetailPage';
 import { AcceptInvitePage, SignInPage, SignUpPage } from '@/features/auth/pages';
 import { useAuthSession } from '@/lib/use-auth-session';
 import { useDemoMode } from '@/lib/demo-mode';
@@ -168,6 +169,7 @@ export default function App() {
           {/* Platform owner only */}
           <Route element={<AdminRequired />}>
             <Route path="/admin" element={<AdminPage />} />
+            <Route path="/nodes/:id" element={<NodeDetailPage />} />
           </Route>
 
           <Route path="*" element={<NotFoundPage />} />

app/frontend/src/features/nodes/NodeDetailPage.tsx

@@ -0,0 +1,381 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import {
+  deleteAgent,
+  getAgent,
+  getAgentMetrics,
+  listAgentCommands,
+  listAgentContainers,
+  pruneAgent,
+  updateAgent,
+  type AgentMetricPoint,
+} from '@/lib/api-client';
+import { getCurrentUserProfile } from '@/lib/api-client';
+import { useAuthSession } from '@/lib/use-auth-session';
+import { useDemoMode } from '@/lib/demo-mode';
+import { formatBytes, formatRelative } from '@/lib/time';
+import { DemoRestricted } from '@/shared/components';
+import {
+  ArrowLeft, CheckCircle2, ChevronRight, Loader2, Pencil, XCircle,
+} from 'lucide-react';
+
+const TIME_RANGES = [
+  { label: '1h', value: '1h' },
+  { label: '24h', value: '24h' },
+  { label: '7d', value: '168h' },
+];
+
+export function NodeDetailPage() {
+  const { id = '' } = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const isDemoMode = useDemoMode();
+  const sessionQuery = useAuthSession({ enabled: !isDemoMode });
+  const profileQuery = useQuery({
+    queryKey: ['user-profile'],
+    queryFn: getCurrentUserProfile,
+    enabled: !isDemoMode && Boolean(sessionQuery.data),
+    retry: false,
+  });
+  const isAdmin = !isDemoMode && Boolean(profileQuery.data?.isAdmin);
+  const [timeRange, setTimeRange] = useState('24h');
+  const [rename, setRename] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmVolumes, setConfirmVolumes] = useState(false);
+
+  const agentQuery = useQuery({
+    queryKey: ['node-agent', id],
+    queryFn: () => getAgent(id),
+    enabled: !isDemoMode && id !== '',
+    refetchInterval: 15000,
+  });
+  const metricsQuery = useQuery({
+    queryKey: ['node-metrics', id, timeRange],
+    queryFn: () => getAgentMetrics(id, timeRange),
+    enabled: !isDemoMode && id !== '',
+    refetchInterval: 30000,
+  });
+  const containersQuery = useQuery({
+    queryKey: ['node-containers', id],
+    queryFn: () => listAgentContainers(id),
+    enabled: !isDemoMode && id !== '',
+    refetchInterval: 15000,
+  });
+  const commandsQuery = useQuery({
+    queryKey: ['node-commands', id],
+    queryFn: () => listAgentCommands(id),
+    enabled: !isDemoMode && id !== '',
+    refetchInterval: 15000,
+  });
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ['node-agent', id] });
+    queryClient.invalidateQueries({ queryKey: ['node-commands', id] });
+    queryClient.invalidateQueries({ queryKey: ['usage-agents'] });
+  };
+  const updateMutation = useMutation({
+    mutationFn: (body: { name?: string; auto_prune?: boolean }) => updateAgent(id, body),
+    onSuccess: () => { setRename(null); invalidate(); },
+  });
+  const pruneMutation = useMutation({
+    mutationFn: (volumes: boolean) => pruneAgent(id, { volumes }),
+    onSuccess: () => { setConfirmVolumes(false); invalidate(); },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteAgent(id),
+    onSuccess: () => navigate('/usage'),
+  });
+
+  const agent = agentQuery.data;
+  const metrics = useMemo(() => metricsQuery.data ?? [], [metricsQuery.data]);
+  const latest = metrics.length > 0 ? metrics[metrics.length - 1] : null;
+  const containers = containersQuery.data ?? [];
+  const commands = commandsQuery.data ?? [];
+
+  if (isDemoMode) return <DemoRestricted feature="Nodes" />;
+
+  if (agentQuery.isLoading) {
+    return <div className="px-8 py-10 text-xs text-[var(--text-muted)]">Loading node…</div>;
+  }
+  if (!agent) {
+    return (
+      <div className="px-8 py-10">
+        <p className="text-sm text-[var(--text-secondary)]">Node not found.</p>
+        <Link to="/usage" className="v-mono text-[11px] text-[var(--accent-primary)] hover:underline">← back to usage</Link>
+      </div>
+    );
+  }
+
+  const online = agent.status === 'online' || agent.status === 'connecting';
+
+  return (
+    <div className="min-h-screen">
+      <div className="border-b border-[var(--border-subtle)]">
+        <div className="w-full px-8 py-5">
+          <div className="flex items-center gap-2 v-mono text-[11px] text-[var(--text-tertiary)] mb-2">
+            <Link to="/usage" className="hover:text-[var(--text-primary)] flex items-center gap-1">
+              <ArrowLeft size={12} /> usage
+            </Link>
+            <ChevronRight size={10} />
+            <span className="text-[var(--text-primary)]">{agent.name}</span>
+          </div>
+          <div className="flex items-center justify-between gap-4 flex-wrap">
+            <div>
+              <h1 className="v-title">
+                {rename === null ? agent.name : rename}
+                {isAdmin && rename === null && (
+                  <button
+                    onClick={() => setRename(agent.name)}
+                    className="ml-2 inline-block align-middle text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+                    title="Rename node"
+                  >
+                    <Pencil size={14} />
+                  </button>
+                )}
+                <span className="v-cursor">_</span>
+              </h1>
+              {rename !== null && (
+                <div className="mt-2 flex items-center gap-2">
+                  <input
+                    value={rename}
+                    onChange={(e) => setRename(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') updateMutation.mutate({ name: rename });
+                      if (e.key === 'Escape') setRename(null);
+                    }}
+                    autoFocus
+                    className="rounded-md border border-[var(--border-subtle)] bg-[var(--bg-tertiary)] px-2 py-1 text-sm text-[var(--text-primary)]"
+                  />
+                  <button onClick={() => updateMutation.mutate({ name: rename })} className="v-mono text-[11px] text-[var(--accent-primary)] hover:underline">save</button>
+                  <button onClick={() => setRename(null)} className="v-mono text-[11px] text-[var(--text-muted)] hover:underline">cancel</button>
+                </div>
+              )}
+              <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
+                {agent.hostname} · {agent.ipAddress}:{agent.port}
+                {agent.version ? ` · v${agent.version}` : ''}
+                {agent.lastHeartbeat ? ` · heartbeat ${formatRelative(agent.lastHeartbeat)}` : ''}
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className={`v-mono text-[11px] px-2 py-1 rounded-md border ${online
+                ? 'border-[var(--success)]/40 text-[var(--success)]'
+                : 'border-[var(--error)]/40 text-[var(--error)]'}`}>
+                {agent.status}
+              </span>
+              {isAdmin && (
+                <>
+                  <label className="flex items-center gap-1.5 v-mono text-[11px] text-[var(--text-tertiary)] cursor-pointer" title="Daily automatic docker prune">
+                    <input
+                      type="checkbox"
+                      checked={agent.autoPrune}
+                      onChange={(e) => updateMutation.mutate({ auto_prune: e.target.checked })}
+                      className="accent-[var(--accent-primary)]"
+                    />
+                    auto-prune
+                  </label>
+                  <button
+                    onClick={() => setConfirmVolumes(true)}
+                    disabled={pruneMutation.isPending}
+                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
+                  >
+                    prune now
+                  </button>
+                  <button
+                    onClick={() => setConfirmDelete(true)}
+                    className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--error)]/40 text-[var(--error)] hover:bg-[var(--error)]/10"
+                  >
+                    remove
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="px-8 py-6 space-y-6">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Stat label="cpu" value={latest ? `${latest.cpu.usage_percent.toFixed(0)}%` : '—'} sub={latest ? `${latest.cpu.cores} cores` : ''} />
+          <Stat label="memory" value={latest ? `${latest.memory.usage_percent.toFixed(0)}%` : '—'} sub={latest ? `${formatBytes(latest.memory.available)} free of ${formatBytes(latest.memory.limit)}` : ''} />
+          <Stat label="load 1m" value={latest ? latest.system_load.load_1m.toFixed(2) : '—'} sub={latest ? `5m ${latest.system_load.load_5m.toFixed(2)} · 15m ${latest.system_load.load_15m.toFixed(2)}` : ''} />
+          <Stat label="containers" value={latest ? String(latest.container_count) : String(containers.length)} sub="reported by agent" />
+        </div>
+
+        <section className="panel p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="v-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)]">telemetry</h2>
+            <div className="flex gap-1">
+              {TIME_RANGES.map((r) => (
+                <button
+                  key={r.value}
+                  onClick={() => setTimeRange(r.value)}
+                  className={`v-mono text-[11px] px-2.5 py-1 rounded-md border ${timeRange === r.value
+                    ? 'border-[var(--accent-primary)]/50 text-[var(--accent-primary)]'
+                    : 'border-[var(--border-subtle)] text-[var(--text-muted)] hover:text-[var(--text-primary)]'}`}
+                >
+                  {r.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          {metricsQuery.isLoading ? (
+            <p className="text-xs text-[var(--text-muted)]">Loading metrics…</p>
+          ) : metrics.length < 2 ? (
+            <p className="text-xs text-[var(--text-muted)]">Not enough heartbeat history yet — the agent reports every few seconds once connected.</p>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-2">
+              <Sparkline label="cpu %" points={metrics} value={(m) => m.cpu.usage_percent} />
+              <Sparkline label="memory %" points={metrics} value={(m) => m.memory.usage_percent} />
+            </div>
+          )}
+        </section>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          <section className="panel p-0">
+            <h2 className="v-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)] px-5 pt-4 pb-3">containers</h2>
+            <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
+              {containers.length === 0 && (
+                <p className="px-5 py-6 text-xs text-[var(--text-muted)]">No containers reported on this node.</p>
+              )}
+              {containers.map((c) => (
+                <div key={c.id} className="flex items-center justify-between gap-3 px-5 py-3">
+                  <div className="min-w-0">
+                    <p className="truncate text-sm text-[var(--text-primary)]">{c.name ?? c.id}</p>
+                    <p className="truncate v-mono text-[11px] text-[var(--text-tertiary)]">{c.image}</p>
+                  </div>
+                  <span className="v-mono text-[11px] text-[var(--text-secondary)]">{c.status ?? '—'}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="panel p-0">
+            <h2 className="v-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)] px-5 pt-4 pb-3">command history</h2>
+            <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
+              {commands.length === 0 && (
+                <p className="px-5 py-6 text-xs text-[var(--text-muted)]">No commands sent to this node yet.</p>
+              )}
+              {commands.slice(0, 15).map((cmd) => (
+                <div key={cmd.id} className="flex items-center justify-between gap-3 px-5 py-3">
+                  <div className="flex items-center gap-2 min-w-0">
+                    {cmd.status === 'completed'
+                      ? <CheckCircle2 size={13} className="text-[var(--success)] shrink-0" />
+                      : cmd.status === 'failed'
+                        ? <XCircle size={13} className="text-[var(--error)] shrink-0" />
+                        : <Loader2 size={13} className="text-[var(--text-muted)] animate-spin shrink-0" />}
+                    <span className="v-mono text-[11px] text-[var(--text-primary)]">{cmd.type}</span>
+                    {cmd.error && <span className="truncate text-[11px] text-[var(--error)]">{cmd.error}</span>}
+                  </div>
+                  <span className="v-mono text-[11px] text-[var(--text-muted)] whitespace-nowrap">
+                    {cmd.created_at ? formatRelative(cmd.created_at) : ''}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {confirmVolumes && (
+        <ConfirmModal
+          title="Prune this node?"
+          body={`Runs a bounded docker system prune on ${agent.name}. Unused images, stopped containers, and networks are removed.`}
+          confirmLabel="prune"
+          danger={false}
+          extra={
+            <label className="flex items-center gap-2 text-xs text-[var(--text-secondary)] cursor-pointer">
+              <input type="checkbox" id="prune-volumes" className="accent-[var(--error)]" />
+              also prune volumes (can delete database data)
+            </label>
+          }
+          onCancel={() => setConfirmVolumes(false)}
+          onConfirm={() => {
+            const volumes = (document.getElementById('prune-volumes') as HTMLInputElement | null)?.checked ?? false;
+            pruneMutation.mutate(volumes);
+          }}
+          pending={pruneMutation.isPending}
+        />
+      )}
+      {confirmDelete && (
+        <ConfirmModal
+          title={`Remove ${agent.name}?`}
+          body="The agent record and its history are deleted. Containers running on the host are not stopped — uninstall the agent there separately."
+          confirmLabel="remove node"
+          danger
+          onCancel={() => setConfirmDelete(false)}
+          onConfirm={() => deleteMutation.mutate()}
+          pending={deleteMutation.isPending}
+        />
+      )}
+    </div>
+  );
+}
+
+function Stat({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <div className="panel p-4">
+      <p className="v-mono text-[10px] uppercase tracking-wider text-[var(--text-tertiary)]">{label}</p>
+      <p className="mt-1 text-xl font-semibold text-[var(--text-primary)]">{value}</p>
+      {sub && <p className="mt-0.5 v-mono text-[11px] text-[var(--text-muted)]">{sub}</p>}
+    </div>
+  );
+}
+
+function Sparkline({ label, points, value }: {
+  label: string;
+  points: AgentMetricPoint[];
+  value: (m: AgentMetricPoint) => number;
+}) {
+  const w = 560;
+  const h = 90;
+  const vals = points.map(value);
+  const max = Math.max(100, ...vals);
+  const step = w / Math.max(points.length - 1, 1);
+  const polyline = vals.map((v, i) => `${(i * step).toFixed(1)},${(h - (v / max) * (h - 6)).toFixed(1)}`).join(' ');
+  return (
+    <div>
+      <p className="v-mono text-[10px] uppercase tracking-wider text-[var(--text-tertiary)] mb-2">
+        {label} — now {vals[vals.length - 1].toFixed(0)}% / peak {Math.max(...vals).toFixed(0)}%
+      </p>
+      <svg viewBox={`0 0 ${w} ${h}`} className="w-full h-24 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-secondary)]">
+        <polyline points={polyline} fill="none" stroke="var(--accent-primary)" strokeWidth="1.5" />
+      </svg>
+    </div>
+  );
+}
+
+function ConfirmModal({ title, body, confirmLabel, danger, extra, onCancel, onConfirm, pending }: {
+  title: string;
+  body: string;
+  confirmLabel: string;
+  danger: boolean;
+  extra?: React.ReactNode;
+  onCancel: () => void;
+  onConfirm: () => void;
+  pending: boolean;
+}) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
+      <div className="panel w-full max-w-sm p-5" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h3>
+        <p className="mt-2 text-xs text-[var(--text-secondary)]">{body}</p>
+        {extra && <div className="mt-3">{extra}</div>}
+        <div className="mt-5 flex justify-end gap-2">
+          <button onClick={onCancel} className="v-mono text-[11px] px-3 py-1.5 rounded-md border border-[var(--border-subtle)] text-[var(--text-secondary)]">
+            cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={pending}
+            className={`v-mono text-[11px] px-3 py-1.5 rounded-md border disabled:opacity-50 ${danger
+              ? 'border-[var(--error)]/50 text-[var(--error)] hover:bg-[var(--error)]/10'
+              : 'border-[var(--accent-primary)]/50 text-[var(--accent-primary)] hover:bg-[var(--accent-primary)]/10'}`}
+          >
+            {pending ? 'working…' : confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/frontend/src/features/secondary/pages.tsx

@@ -613,7 +613,7 @@ export function UsagePage() {
                       agents.slice(0, 5).map((agent) => (
                         <div key={agent.id} className="flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3 last:border-b-0">
                           <div className="min-w-0">
-                            <p className="truncate text-sm font-medium text-[var(--text-primary)]">{agent.name}</p>
+                            <Link to={`/nodes/${agent.id}`} className="truncate text-sm font-medium text-[var(--text-primary)] hover:text-[var(--accent-primary)]">{agent.name}</Link>
                             <p className="truncate text-xs text-[var(--text-tertiary)]">{agent.hostname} · {agent.ipAddress}:{agent.port}</p>
                           </div>
                           <div className="flex items-center gap-3">

app/frontend/src/lib/api-client.ts

@@ -1131,6 +1131,59 @@ export async function pruneAgent(id: string, body?: { until?: string; volumes?:
   });
 }
 
+export async function getAgent(id: string): Promise<NodeAgentEntity | null> {
+  const payload = await requestJson<{ agent?: RawNodeAgent }>(`/agents/${id}`);
+  return payload.agent ? normalizeAgent(payload.agent) : null;
+}
+
+export async function deleteAgent(id: string): Promise<void> {
+  await requestJson(`/agents/${id}`, { method: 'DELETE' });
+}
+
+export type AgentMetricPoint = {
+  timestamp: string;
+  cpu: { usage: number; usage_percent: number; cores: number };
+  memory: { usage: number; usage_percent: number; limit: number; available: number };
+  system_load: { load_1m: number; load_5m: number; load_15m: number };
+  container_count: number;
+};
+
+export async function getAgentMetrics(id: string, timeRange = '24h'): Promise<AgentMetricPoint[]> {
+  const payload = await requestJson<{ metrics?: AgentMetricPoint[] }>(
+    `/agents/${id}/metrics?time_range=${encodeURIComponent(timeRange)}`,
+  );
+  return payload.metrics ?? [];
+}
+
+export type AgentContainer = {
+  id?: string;
+  name?: string;
+  image?: string;
+  status?: string;
+  service_id?: string;
+  created_at?: string;
+};
+
+export async function listAgentContainers(id: string): Promise<AgentContainer[]> {
+  const payload = await requestJson<{ containers?: AgentContainer[] }>(`/agents/${id}/containers`);
+  return payload.containers ?? [];
+}
+
+export type AgentCommand = {
+  id?: string;
+  type?: string;
+  status?: string;
+  result?: string;
+  error?: string;
+  created_at?: string;
+  completed_at?: string;
+};
+
+export async function listAgentCommands(id: string): Promise<AgentCommand[]> {
+  const payload = await requestJson<{ commands?: AgentCommand[] }>(`/agents/${id}/commands`);
+  return payload.commands ?? [];
+}
+
 export type AgentAuthToken = components['schemas']['AgentAuthToken'];
 export type AgentAuthTokenCreated = components['schemas']['AgentAuthTokenCreated'];