feat(dashboard): vervang SECTIONS-grid door 5 live status-widgets

Parallel server-side fetches via Promise.allSettled voor Docker, Caddy,
systemd, Git en Audit. Iedere widget toont geaggregeerde status en
refresht elke 30s client-side onafhankelijk van de andere widgets.

- lib/agent-fetch.ts: gedeelde client-side streaming helper
- app/api/audit/latest/route.ts: GET endpoint voor AuditWidget refresh
- app/_components/DockerWidget.tsx: running/total containers
- app/_components/CaddyWidget.tsx: soonest cert expiry in dagen
- app/_components/SystemdWidget.tsx: healthy/total units (of niet geconfigureerd)
- app/_components/GitWidget.tsx: dirty repo count (of niet geconfigureerd)
- app/_components/AuditWidget.tsx: laatste FlowRun status + relatief tijdstip
- app/page.tsx: vervangt SECTIONS-grid, doet parallel fetches, rendert widgets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/_components/AuditWidget.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { apiFetch } from '@/lib/csrf'
+
+type LatestRun = { id: string; flow_key: string; status: string; started_at: string }
+export type AuditInitial =
+  | { data: LatestRun | null; error: null }
+  | { data: null; error: string }
+
+const STATUS_STYLES: Record<string, string> = {
+  pending: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
+  running: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
+  success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  failed: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+  cancelled: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
+}
+
+function relativeTime(isoString: string): string {
+  const diff = Date.now() - new Date(isoString).getTime()
+  const minutes = Math.floor(diff / 60_000)
+  if (minutes < 1) return 'zojuist'
+  if (minutes < 60) return `${minutes}m geleden`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}u geleden`
+  return `${Math.floor(hours / 24)}d geleden`
+}
+
+async function fetchLatestRun(): Promise<LatestRun | null> {
+  const res = await apiFetch('/api/audit/latest')
+  if (!res.ok) throw new Error(`${res.status}`)
+  const json = (await res.json()) as { run: LatestRun | null }
+  return json.run
+}
+
+export default function AuditWidget({ initial }: { initial: AuditInitial }) {
+  const [data, setData] = useState<LatestRun | null>(initial.data)
+  const [error, setError] = useState<string | null>(initial.error)
+
+  const refresh = useCallback(async () => {
+    try {
+      const run = await fetchLatestRun()
+      setData(run)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'refresh failed')
+    }
+  }, [])
+
+  useEffect(() => {
+    const id = setInterval(refresh, 30_000)
+    return () => clearInterval(id)
+  }, [refresh])
+
+  return (
+    <Link href="/audit" className="block rounded-lg border bg-card p-5 transition-colors hover:bg-accent">
+      <h2 className="text-sm font-medium text-muted-foreground">Audit</h2>
+      {error ? (
+        <p className="mt-2 text-sm text-destructive truncate">{error}</p>
+      ) : data ? (
+        <div className="mt-2 space-y-1">
+          <div className="flex items-center gap-2">
+            <span
+              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_STYLES[data.status] ?? ''}`}
+            >
+              {data.status}
+            </span>
+            <span className="text-xs text-muted-foreground">{relativeTime(data.started_at)}</span>
+          </div>
+          <p className="font-mono text-xs text-muted-foreground truncate">{data.flow_key}</p>
+        </div>
+      ) : (
+        <p className="mt-2 text-sm text-muted-foreground">geen runs</p>
+      )}
+    </Link>
+  )
+}