Add Health probes tab + fleet overview chip (#17)

- New HealthProbes component: per-agent CRUD with HTTP/TCP probes.
  States rendered as green/red/dashed icons next to each row.
- New "Health" tab in the per-agent navigation.
- FleetOverview gains a per-host probe chip showing N green / M
  total, polled from /api/health-probes/snapshot every 10s.

Author: sppidy

src/app/page.tsx

@@ -13,6 +13,7 @@ import Containers from '@/components/Containers';
 import AptManager from '@/components/AptManager';
 import FleetOverview from '@/components/FleetOverview';
 import Deploy from '@/components/Deploy';
+import HealthProbes from '@/components/HealthProbes';
 import {
   LayoutDashboardIcon,
   FileCode2Icon,
@@ -26,11 +27,12 @@ import {
   PackageIcon,
   RocketIcon,
   ActivityIcon,
+  ActivitySquareIcon,
 } from 'lucide-react';
 
-type Tab = 'dashboard' | 'containers' | 'deploy' | 'updates' | 'config';
+type Tab = 'dashboard' | 'containers' | 'deploy' | 'updates' | 'health' | 'config';
 
-const TABS: Tab[] = ['dashboard', 'containers', 'deploy', 'updates', 'config'];
+const TABS: Tab[] = ['dashboard', 'containers', 'deploy', 'updates', 'health', 'config'];
 
 export default function Home() {
   return (
@@ -250,6 +252,12 @@ function HomeBody() {
                   icon={<PackageIcon className="w-4 h-4 mr-2" />}
                   label="Updates"
                 />
+                <TabButton
+                  active={activeTab === 'health'}
+                  onClick={() => setActiveTab('health')}
+                  icon={<ActivitySquareIcon className="w-4 h-4 mr-2" />}
+                  label="Health"
+                />
                 <TabButton
                   active={activeTab === 'config'}
                   onClick={() => setActiveTab('config')}
@@ -286,6 +294,10 @@ function HomeBody() {
                 <div className="flex-1 overflow-y-auto p-6 max-w-4xl mx-auto w-full">
                   <AptManager agentId={selectedAgent} />
                 </div>
+              ) : activeTab === 'health' ? (
+                <div className="flex-1 overflow-y-auto p-6 max-w-4xl mx-auto w-full">
+                  <HealthProbes agentId={selectedAgent} />
+                </div>
               ) : (
                 <div className="flex-1 overflow-hidden">
                   <ConfigEditor agentId={selectedAgent} />

src/components/FleetOverview.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useWebSocket } from './providers/WebSocketProvider';
 import { useFleetSnapshots, AgentSnapshot } from './providers/FleetSnapshotsProvider';
+import type { HealthSnapshotRow } from '@/lib/types';
 import {
   ServerIcon,
   CpuIcon,
@@ -13,6 +14,7 @@ import {
   RefreshCwIcon,
   SearchIcon,
   XIcon,
+  ActivitySquareIcon,
 } from 'lucide-react';
 
 function formatBytes(kib: number): string {
@@ -45,6 +47,30 @@ export default function FleetOverview({
   const { agents } = useWebSocket();
   const { snapshots, refresh } = useFleetSnapshots();
   const [search, setSearch] = useState('');
+  const [healthByAgent, setHealthByAgent] = useState<Record<string, HealthSnapshotRow>>({});
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const res = await fetch('/api/health-probes/snapshot', { credentials: 'include' });
+        if (!res.ok) return;
+        const rows: HealthSnapshotRow[] = await res.json();
+        if (cancelled) return;
+        const map: Record<string, HealthSnapshotRow> = {};
+        for (const r of rows) map[r.agent_id] = r;
+        setHealthByAgent(map);
+      } catch {
+        /* ignore — chip just won't render */
+      }
+    };
+    void load();
+    const t = setInterval(load, 10_000);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, []);
 
   const totals = useMemo(() => {
     let cpu = 0;
@@ -231,7 +257,10 @@ export default function FleetOverview({
                       onClick={() => onSelectAgent?.(agentId)}
                       className="w-full text-left bg-slate-900 border border-slate-800 hover:border-slate-700 rounded-md px-4 py-3 transition-colors"
                     >
-                      <HostRow snapshot={snap ?? { agentId, hostname: agentId.replace(/-id$/, '') }} />
+                      <HostRow
+                        snapshot={snap ?? { agentId, hostname: agentId.replace(/-id$/, '') }}
+                        health={healthByAgent[agentId]}
+                      />
                     </button>
                   </li>
                 );
@@ -359,7 +388,13 @@ function SmallStat({
   );
 }
 
-function HostRow({ snapshot }: { snapshot: AgentSnapshot }) {
+function HostRow({
+  snapshot,
+  health,
+}: {
+  snapshot: AgentSnapshot;
+  health?: HealthSnapshotRow;
+}) {
   const stats = snapshot.stats;
   const services = snapshot.services;
   const docker = snapshot.docker;
@@ -414,6 +449,21 @@ function HostRow({ snapshot }: { snapshot: AgentSnapshot }) {
           {failed} failed
         </span>
       )}
+      {health && health.total > 0 && (
+        <span
+          className={`inline-flex items-center gap-1 text-xs rounded-full px-2 py-0.5 border ${
+            health.red > 0
+              ? 'text-red-300 bg-red-500/10 border-red-500/30'
+              : health.unknown > 0
+                ? 'text-slate-300 bg-slate-700/30 border-slate-600/40'
+                : 'text-emerald-300 bg-emerald-500/10 border-emerald-500/30'
+          }`}
+          title={`${health.green} green / ${health.red} red / ${health.unknown} pending`}
+        >
+          <ActivitySquareIcon className="w-3 h-3" />
+          {health.green}/{health.total}
+        </span>
+      )}
       <Field
         label="Containers"
         value={