feat: live docker/database widgets over WebSocket (M2)

Adds a custom server.ts (http server + Next request handler + a
noServer:true WebSocket server on /ws) so the app can push live data
without polling. A CollectorScheduler runs one interval-based job per
docker/database widget instance, backed by dockerode against
/var/run/docker.sock, and reconciles jobs when config.yml changes.

Config hot-reload is now fully wired: chokidar watches config.yml/.env,
re-validates on change, and broadcasts config:update (or a
non-destructive config:error, keeping the last-good config) to every
connected browser. The client subscribes to per-widget topics over a
single shared WebSocket with exponential-backoff reconnect and
last-result caching for instant resubscribe.

Verified end-to-end against real throwaway containers (nginx, redis):
live CPU/mem/uptime/health streamed over the socket, interval changes
picked up without a server restart, and a broken config.yml correctly
falls back to the last-valid config instead of crashing the app.

components/layout/Dashboard.tsx

@@ -1,14 +1,19 @@
+"use client";
+
 import type { Config } from "@/lib/config/schema";
+import { useConfigSubscription } from "@/lib/ws/client";
 import { GroupSection } from "./GroupSection";
 
-export function Dashboard({ config }: { config: Config }) {
+export function Dashboard({ config: initialConfig }: { config: Config }) {
+  const config = useConfigSubscription(initialConfig);
+
   return (
     <main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
       <header className="flex items-center justify-between">
         <h1 className="text-lg font-semibold text-fg">{config.settings.title}</h1>
       </header>
-      {config.groups.map((group) => (
-        <GroupSection key={group.name} group={group} />
+      {config.groups.map((group, groupIndex) => (
+        <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
       ))}
     </main>
   );

components/layout/GroupSection.tsx

@@ -1,7 +1,8 @@
 import type { Group } from "@/lib/config/schema";
+import { widgetId } from "@/lib/config/widgets";
 import { widgetRegistry } from "@/components/widgets/registry";
 
-export function GroupSection({ group }: { group: Group }) {
+export function GroupSection({ group, groupIndex }: { group: Group; groupIndex: number }) {
   return (
     <section className="flex flex-col gap-3">
       <h2 className="text-xs font-semibold tracking-wide text-fg-muted uppercase">
@@ -10,7 +11,8 @@ export function GroupSection({ group }: { group: Group }) {
       <div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
         {group.widgets.map((widget, index) => {
           const Component = widgetRegistry[widget.type];
-          return <Component key={index} widget={widget as never} />;
+          const id = widgetId(groupIndex, index);
+          return <Component key={id} widget={widget as never} widgetId={id} />;
         })}
       </div>
     </section>

components/widgets/StatusDot.tsx

@@ -0,0 +1,26 @@
+import type { DockerContainerResult } from "@/lib/types/widget-result";
+
+interface Props {
+  status?: DockerContainerResult["status"];
+  health?: DockerContainerResult["health"];
+}
+
+function resolveColorClass(status?: Props["status"], health?: Props["health"]): string {
+  if (!status) return "bg-fg-muted";
+  if (health === "unhealthy") return "bg-status-down";
+  if (health === "starting") return "bg-status-degraded";
+  if (status === "running") return "bg-status-up";
+  if (status === "restarting") return "bg-status-degraded";
+  return "bg-status-down";
+}
+
+export function StatusDot({ status, health }: Props) {
+  const label = status ? `${status}${health && health !== "none" ? ` (${health})` : ""}` : "unknown";
+
+  return (
+    <span
+      className={`h-2.5 w-2.5 shrink-0 rounded-full ${resolveColorClass(status, health)}`}
+      title={label}
+    />
+  );
+}

components/widgets/database/Widget.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { Widget } from "@/lib/config/schema";
+import { useWidgetSubscription } from "@/lib/ws/client";
+import { StatusDot } from "@/components/widgets/StatusDot";
+import { formatUptime } from "@/lib/format";
+
+type DatabaseWidget = Extract<Widget, { type: "database" }>;
+
+const ENGINE_LABEL: Record<DatabaseWidget["engine"], string> = {
+  postgres: "PostgreSQL",
+  redis: "Redis",
+};
+
+export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; widgetId: string }) {
+  const result = useWidgetSubscription(widgetId);
+  const data = result?.type === "database" ? result.data : null;
+  const errorMessage = result?.type === "error" ? result.message : null;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-sm font-medium text-fg">{widget.name}</span>
+        <StatusDot status={data?.status} health={data?.health} />
+      </div>
+      <span className="text-xs text-fg-muted">{ENGINE_LABEL[widget.engine]}</span>
+      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
+      {data?.uptimeSeconds != null && (
+        <span className="text-xs text-fg-muted">Uptime: {formatUptime(data.uptimeSeconds)}</span>
+      )}
+    </div>
+  );
+}

components/widgets/docker/Widget.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import type { Widget } from "@/lib/config/schema";
+import { useWidgetSubscription } from "@/lib/ws/client";
+import { StatusDot } from "@/components/widgets/StatusDot";
+import { formatBytes, formatUptime } from "@/lib/format";
+
+type DockerWidget = Extract<Widget, { type: "docker" }>;
+
+export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widgetId: string }) {
+  const result = useWidgetSubscription(widgetId);
+  const data = result?.type === "docker" ? result.data : null;
+  const errorMessage = result?.type === "error" ? result.message : null;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
+      <div className="flex items-center justify-between gap-2">
+        {widget.href ? (
+          <a
+            href={widget.href}
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm font-medium text-fg hover:text-accent"
+          >
+            {widget.name}
+          </a>
+        ) : (
+          <span className="text-sm font-medium text-fg">{widget.name}</span>
+        )}
+        <StatusDot status={data?.status} health={data?.health} />
+      </div>
+      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
+      {data && (
+        <dl className="flex flex-col gap-1 text-xs text-fg-muted">
+          {data.uptimeSeconds !== null && <div>Uptime: {formatUptime(data.uptimeSeconds)}</div>}
+          {widget.showStats && data.cpuPercent !== null && <div>CPU: {data.cpuPercent.toFixed(1)}%</div>}
+          {widget.showStats && data.memUsageBytes !== null && (
+            <div>
+              Mem: {formatBytes(data.memUsageBytes)}
+              {data.memLimitBytes ? ` / ${formatBytes(data.memLimitBytes)}` : ""}
+            </div>
+          )}
+          {data.restartCount > 0 && <div>Restarts: {data.restartCount}</div>}
+        </dl>
+      )}
+    </div>
+  );
+}

components/widgets/registry.ts

@@ -2,12 +2,17 @@ import type { ComponentType } from "react";
 import type { Widget } from "@/lib/config/schema";
 import { BookmarkWidget } from "./bookmark/Widget";
 import { SearchWidget } from "./search/Widget";
+import { DockerWidget } from "./docker/Widget";
+import { DatabaseWidget } from "./database/Widget";
 
 type WidgetComponent<T extends Widget["type"]> = ComponentType<{
   widget: Extract<Widget, { type: T }>;
+  widgetId: string;
 }>;
 
 export const widgetRegistry: { [K in Widget["type"]]: WidgetComponent<K> } = {
   bookmark: BookmarkWidget,
   search: SearchWidget,
+  docker: DockerWidget,
+  database: DatabaseWidget,
 };