Sanitized mirror from private repository - 2026-04-18 11:19:59 UTC

2026-04-18 11:19:59 +00:00
commit fb00a325d1
1418 changed files with 359990 additions and 0 deletions
--- a/dashboard/ui/components/activity-feed.tsx
+++ b/dashboard/ui/components/activity-feed.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import { useSSE } from "@/lib/use-sse";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { ActivityEvent } from "@/lib/types";
+
+const green = { bg: "#22c55e", shadow: "0 0 8px rgba(34, 197, 94, 0.4)" };
+const blue = { bg: "#3b82f6", shadow: "0 0 8px rgba(59, 130, 246, 0.4)" };
+const amber = { bg: "#f59e0b", shadow: "0 0 8px rgba(245, 158, 11, 0.4)" };
+const red = { bg: "#ef4444", shadow: "0 0 8px rgba(239, 68, 68, 0.4)" };
+const purple = { bg: "#a855f7", shadow: "0 0 8px rgba(168, 85, 247, 0.4)" };
+
+const typeColors: Record<string, { bg: string; shadow: string }> = {
+  stack_healthy: green,
+  backup_result: green,
+  drift_clean: green,
+  cron_complete: green,
+  disk_scan_complete: green,
+  email_classified: blue,
+  email_classifying: blue,
+  email_cached: blue,
+  start: blue,
+  receipt_extracted: amber,
+  container_restarted: amber,
+  restart_analysis: amber,
+  container_unhealthy: red,
+  drift_found: red,
+  disk_warning: red,
+  error: red,
+  changelog_generated: purple,
+  changelog_commits: purple,
+  pr_reviewed: purple,
+};
+const defaultDot = { bg: "#6b7280", shadow: "none" };
+
+function formatTime(ts: string) {
+  try {
+    return new Date(ts).toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return ts;
+  }
+}
+
+const feedCategoryColors: Record<string, string> = {
+  receipts: "text-amber-400",
+  newsletters: "text-blue-400",
+  accounts: "text-violet-400",
+  spam: "text-red-400",
+  personal: "text-green-400",
+  finance: "text-emerald-400",
+  work: "text-cyan-400",
+  promotions: "text-amber-400",
+  social: "text-purple-400",
+};
+
+function getCategoryColor(cat: string): string {
+  const lower = cat.toLowerCase();
+  for (const [key, cls] of Object.entries(feedCategoryColors)) {
+    if (lower.includes(key)) return cls;
+  }
+  return "text-foreground";
+}
+
+function EventMessage({ event }: { event: ActivityEvent }): React.ReactElement {
+  switch (event.type) {
+    case "email_classified": {
+      const cat = String(event.category ?? "?");
+      return (
+        <span>
+          Classified as <span className={getCategoryColor(cat)}>{cat}</span>
+          {event.label ? ` - ${String(event.label)}` : ""}
+        </span>
+      );
+    }
+    case "email_classifying":
+      return <span>[{String(event.progress ?? "?")}] Classifying: {String(event.subject ?? "?")}</span>;
+    case "email_cached": {
+      const cat = String(event.category ?? "?");
+      return (
+        <span>
+          Cached: {String(event.subject ?? "?")} → <span className={getCategoryColor(cat)}>{cat}</span>
+        </span>
+      );
+    }
+    case "receipt_extracted":
+      return (
+        <span>
+          Receipt: {String(event.vendor ?? "?")} <span className="text-green-400">${String(event.amount ?? "?")}</span>
+        </span>
+      );
+    case "container_restarted":
+      return (
+        <span>
+          Restarted <span className="text-cyan-400">{String(event.container)}</span> on {String(event.endpoint)}
+        </span>
+      );
+    case "container_unhealthy":
+      return event.container ? (
+        <span>
+          Unhealthy: <span className="text-cyan-400">{String(event.container)}</span> on {String(event.endpoint)}
+        </span>
+      ) : (
+        <span>{String(event.raw ?? "Unhealthy container detected")}</span>
+      );
+    case "backup_result":
+      return <span>Backup: {String(event.status ?? "?")}</span>;
+    case "drift_clean":
+      return <span>Config drift check: <span className="text-green-400">all clean</span></span>;
+    case "drift_found":
+      return <span>Config drift: {String(event.drifts ?? "?")} drifts in {String(event.services ?? "?")} services</span>;
+    case "cron_complete":
+      return <span>Automation run completed</span>;
+    case "stack_healthy":
+      return <span>All containers <span className="text-green-400">healthy</span></span>;
+    case "disk_warning":
+      return <span>Disk warning: {String(event.days)} days remaining</span>;
+    case "disk_scan_complete":
+      return <span>Disk scan: {String(event.count)} filesystems checked</span>;
+    case "pr_reviewed":
+      return <span>AI reviewed PR <span className="text-violet-400">#{String(event.pr)}</span></span>;
+    case "changelog_generated":
+      return <span>Changelog: {String(event.commits)} commits</span>;
+    case "changelog_commits":
+      return <span>{String(event.count)} new commits found</span>;
+    case "restart_analysis":
+      return (
+        <span>
+          LLM says {String(event.decision)} for <span className="text-cyan-400">{String(event.container)}</span>
+        </span>
+      );
+    default: {
+      if (typeof event.raw === "string") {
+        const cleaned = event.raw.replace(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},?\d*\s+\S+\s+/, "");
+        return <span>{cleaned}</span>;
+      }
+      return <span>{event.type} from {event.source}</span>;
+    }
+  }
+}
+
+export function ActivityFeed() {
+  const events = useSSE("/api/activity");
+
+  return (
+    <Card className="overflow-hidden relative">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-base font-semibold">Activity Feed</CardTitle>
+        <Badge
+          variant="outline"
+          className="text-[10px] border-green-500/30 text-green-400 animate-live-pulse bg-green-500/5"
+        >
+          <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5 glow-green" />
+          LIVE
+        </Badge>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[220px]">
+          {events.length === 0 && (
+            <p className="text-xs text-muted-foreground py-4 text-center">
+              Waiting for events...
+            </p>
+          )}
+          <div className="space-y-2">
+            {events.map((event, i) => (
+              <div
+                key={`${event.timestamp}-${i}`}
+                className="flex items-start gap-3 text-xs animate-slide-in rounded-lg px-2 py-1.5 transition-colors hover:bg-white/[0.03]"
+                style={{ animationDelay: `${i * 30}ms` }}
+              >
+                <span
+                  className="w-2.5 h-2.5 rounded-full mt-0.5 shrink-0"
+                  style={{
+                    background: (typeColors[event.type] ?? defaultDot).bg,
+                    boxShadow: (typeColors[event.type] ?? defaultDot).shadow,
+                  }}
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="text-foreground truncate">
+                    <EventMessage event={event} />
+                  </p>
+                  <p className="text-muted-foreground/70">
+                    {formatTime(event.timestamp)} &middot; {event.source}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
--- a/dashboard/ui/components/calendar-card.tsx
+++ b/dashboard/ui/components/calendar-card.tsx
@@ -0,0 +1,55 @@
+"use client";
+import { usePoll } from "@/lib/use-poll";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CardSkeleton } from "@/components/skeleton";
+import { EmptyState } from "@/components/empty-state";
+
+interface CalEvent {
+  summary: string;
+  date: string;
+  time: string;
+  location?: string;
+  start: string;
+}
+
+export function CalendarCard() {
+  const { data } = usePoll<{ events: CalEvent[]; total?: number }>("/api/calendar", 300000); // 5min
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium">Calendar</CardTitle>
+          {data?.total != null && (
+            <span className="text-[10px] text-muted-foreground">{data.total} upcoming</span>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {!data ? (
+          <CardSkeleton lines={3} />
+        ) : data.events.length === 0 ? (
+          <EmptyState icon={"o"} title="No upcoming events" description="Your calendar is clear" />
+        ) : (
+          <div className="space-y-3">
+            {data.events.map((event, i) => (
+              <div key={i} className="flex gap-3 items-start">
+                <div className="text-center min-w-[44px] rounded-lg bg-white/[0.04] border border-white/[0.06] px-2 py-1.5">
+                  <p className="text-[10px] font-medium text-blue-400">{event.date.split(" ")[0]}</p>
+                  <p className="text-lg font-bold leading-none">{event.date.split(" ")[1]}</p>
+                </div>
+                <div className="min-w-0">
+                  <p className="text-xs font-medium text-foreground truncate">{event.summary}</p>
+                  <p className="text-[10px] text-muted-foreground">{event.time}</p>
+                  {event.location && (
+                    <p className="text-[10px] text-muted-foreground/60 truncate">{event.location}</p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/dashboard/ui/components/command-search.tsx
+++ b/dashboard/ui/components/command-search.tsx
@@ -0,0 +1,153 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+interface SearchResult {
+  type: "page" | "container" | "node" | "dns" | "action";
+  title: string;
+  description?: string;
+  href?: string;
+  action?: () => void;
+}
+
+const PAGES: SearchResult[] = [
+  { type: "page", title: "Dashboard", href: "/" },
+  { type: "page", title: "Infrastructure", href: "/infrastructure" },
+  { type: "page", title: "Media", href: "/media" },
+  { type: "page", title: "Automations", href: "/automations" },
+  { type: "page", title: "Expenses", href: "/expenses" },
+  { type: "page", title: "Network", href: "/network" },
+  { type: "page", title: "Logs", href: "/logs" },
+];
+
+export function CommandSearch() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  // Open on Cmd+K / Ctrl+K
+  useEffect(() => {
+    function handler(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen(prev => !prev);
+      }
+      if (e.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setSelected(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  // Search
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults(PAGES);
+      return;
+    }
+    const q = query.toLowerCase();
+    const filtered = PAGES.filter(p => p.title.toLowerCase().includes(q));
+
+    // Also search for dynamic items (async fetch could go here in future)
+    // For now just do page search + some action shortcuts
+    const actions: SearchResult[] = [];
+    if ("restart".includes(q) || "jellyfin".includes(q)) {
+      actions.push({ type: "action", title: "Restart Jellyfin", description: "Restart Jellyfin on Olares" });
+    }
+    if ("restart".includes(q) || "ollama".includes(q)) {
+      actions.push({ type: "action", title: "Restart Ollama", description: "Restart Ollama on Olares" });
+    }
+    if ("backup".includes(q)) {
+      actions.push({ type: "action", title: "Run Backup", description: "Run email backup now" });
+    }
+
+    setResults([...filtered, ...actions]);
+    setSelected(0);
+  }, [query]);
+
+  const execute = useCallback((result: SearchResult) => {
+    setOpen(false);
+    if (result.href) router.push(result.href);
+    if (result.action) result.action();
+  }, [router]);
+
+  // Keyboard nav
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") { e.preventDefault(); setSelected(s => Math.min(s + 1, results.length - 1)); }
+    if (e.key === "ArrowUp") { e.preventDefault(); setSelected(s => Math.max(s - 1, 0)); }
+    if (e.key === "Enter" && results[selected]) { execute(results[selected]); }
+  }, [results, selected, execute]);
+
+  if (!open) return null;
+
+  const typeIcons: Record<string, string> = {
+    page: "->", container: "[]", node: "(o)", dns: "<>", action: "!",
+  };
+  const typeColors: Record<string, string> = {
+    page: "text-blue-400", container: "text-cyan-400", node: "text-green-400",
+    dns: "text-amber-400", action: "text-violet-400",
+  };
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[200]" onClick={() => setOpen(false)} />
+      <div className="fixed top-[20%] left-1/2 -translate-x-1/2 w-full max-w-lg z-[201]">
+        <div className="rounded-2xl overflow-hidden shadow-2xl" style={{
+          background: "rgba(10, 10, 25, 0.95)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          backdropFilter: "blur(30px)",
+        }}>
+          <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.08]">
+            <span className="text-muted-foreground text-sm">Ctrl+K</span>
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search pages, containers, actions..."
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 outline-none"
+              style={{ color: "#f1f5f9" }}
+            />
+          </div>
+          <div className="max-h-[300px] overflow-y-auto py-1">
+            {results.length === 0 && (
+              <p className="text-sm text-muted-foreground/60 text-center py-6">No results</p>
+            )}
+            {results.map((r, i) => (
+              <button
+                key={`${r.type}-${r.title}`}
+                onClick={() => execute(r)}
+                className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
+                  i === selected ? "bg-white/[0.08]" : "hover:bg-white/[0.04]"
+                }`}
+              >
+                <span className={`text-sm ${typeColors[r.type] ?? ""}`}>{typeIcons[r.type] ?? "·"}</span>
+                <div className="min-w-0">
+                  <p className="text-sm font-medium" style={{ color: "#f1f5f9" }}>{r.title}</p>
+                  {r.description && <p className="text-xs text-muted-foreground/60 truncate">{r.description}</p>}
+                </div>
+                <span className="ml-auto text-[10px] text-muted-foreground/40 capitalize">{r.type}</span>
+              </button>
+            ))}
+          </div>
+          <div className="px-4 py-2 border-t border-white/[0.06] flex gap-4 text-[10px] text-muted-foreground/40">
+            <span>Up/Down navigate</span>
+            <span>Enter select</span>
+            <span>esc close</span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/dashboard/ui/components/container-logs-modal.tsx
+++ b/dashboard/ui/components/container-logs-modal.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { fetchAPI } from "@/lib/api";
+
+interface ContainerLogsModalProps {
+  containerId: string | null;
+  containerName: string;
+  endpoint: string;
+  onClose: () => void;
+}
+
+export function ContainerLogsModal({
+  containerId,
+  containerName,
+  endpoint,
+  onClose,
+}: ContainerLogsModalProps) {
+  const [logs, setLogs] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!containerId) return;
+    setLoading(true);
+    setLogs("");
+    fetchAPI<{ logs: string }>(
+      `/api/containers/${containerId}/logs?endpoint=${endpoint}&tail=200`
+    )
+      .then((data) => setLogs(data.logs))
+      .catch((err) => setLogs(`Error fetching logs: ${err.message}`))
+      .finally(() => setLoading(false));
+  }, [containerId, endpoint]);
+
+  return (
+    <Dialog open={!!containerId} onOpenChange={() => onClose()}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="text-sm">
+            Logs: {containerName}
+          </DialogTitle>
+        </DialogHeader>
+        <ScrollArea className="h-[400px] mt-2">
+          {loading ? (
+            <p className="text-xs text-muted-foreground p-4">
+              Loading logs...
+            </p>
+          ) : (
+            <pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap p-2 leading-relaxed">
+              {logs || "No logs available"}
+            </pre>
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/dashboard/ui/components/copyable.tsx
+++ b/dashboard/ui/components/copyable.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { useState, useCallback } from "react";
+
+export function Copyable({ text, className = "" }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [text]);
+
+  return (
+    <span
+      onClick={copy}
+      className={`cursor-pointer hover:underline decoration-dotted underline-offset-2 ${className}`}
+      title="Click to copy"
+    >
+      {copied ? "OK copied" : text}
+    </span>
+  );
+}
--- a/dashboard/ui/components/data-table.tsx
+++ b/dashboard/ui/components/data-table.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export interface Column<T> {
+  key: string;
+  label: string;
+  render?: (row: T) => React.ReactNode;
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  searchKey?: string;
+  filterKey?: string;
+  filterOptions?: string[];
+  actions?: (row: T) => React.ReactNode;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function DataTable<T extends Record<string, any>>({
+  data,
+  columns,
+  searchKey,
+  filterKey,
+  filterOptions,
+  actions,
+}: DataTableProps<T>) {
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState("all");
+
+  const filtered = useMemo(() => {
+    let rows = data;
+    if (search && searchKey) {
+      const q = search.toLowerCase();
+      rows = rows.filter((r) =>
+        String(r[searchKey] ?? "")
+          .toLowerCase()
+          .includes(q)
+      );
+    }
+    if (filter !== "all" && filterKey) {
+      rows = rows.filter((r) => String(r[filterKey]) === filter);
+    }
+    return rows;
+  }, [data, search, searchKey, filter, filterKey]);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        {searchKey && (
+          <input
+            type="text"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-8 rounded-lg glass-input px-3 text-sm text-foreground placeholder:text-muted-foreground/50 w-64"
+          />
+        )}
+        {filterKey && filterOptions && (
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="h-8 rounded-lg glass-input px-2 text-sm text-foreground"
+          >
+            <option value="all">All</option>
+            {filterOptions.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+      <div className="rounded-xl border border-white/[0.06] overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="glass-table-header border-b border-white/[0.06]">
+              {columns.map((col) => (
+                <TableHead key={col.key} className="text-sm text-muted-foreground/80">
+                  {col.label}
+                </TableHead>
+              ))}
+              {actions && <TableHead className="text-sm text-muted-foreground/80 w-24">Actions</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filtered.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length + (actions ? 1 : 0)}
+                  className="text-center text-xs text-muted-foreground py-6"
+                >
+                  No results
+                </TableCell>
+              </TableRow>
+            ) : (
+              filtered.map((row, i) => (
+                <TableRow key={i} className="glass-table-row border-b border-white/[0.04]">
+                  {columns.map((col) => (
+                    <TableCell key={col.key} className="text-sm">
+                      {col.render
+                        ? col.render(row)
+                        : String(row[col.key] ?? "")}
+                    </TableCell>
+                  ))}
+                  {actions && (
+                    <TableCell className="text-sm">{actions(row)}</TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
--- a/dashboard/ui/components/empty-state.tsx
+++ b/dashboard/ui/components/empty-state.tsx
@@ -0,0 +1,15 @@
+interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+}
+
+export function EmptyState({ icon = "--", title, description }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      <span className="text-3xl mb-2 opacity-30">{icon}</span>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
+      {description && <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>}
+    </div>
+  );
+}
--- a/dashboard/ui/components/host-card.tsx
+++ b/dashboard/ui/components/host-card.tsx
@@ -0,0 +1,88 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+
+const hostColors: Record<string, string> = {
+  atlantis: "text-blue-400",
+  calypso: "text-violet-400",
+  olares: "text-emerald-400",
+  nuc: "text-amber-400",
+  rpi5: "text-cyan-400",
+};
+
+const hostDescriptions: Record<string, string> = {
+  atlantis: "NAS · media stack",
+  calypso: "DNS · SSO · Headscale",
+  olares: "K3s · RTX 5090",
+  nuc: "lightweight svcs",
+  rpi5: "Uptime Kuma",
+};
+
+interface HostCardProps {
+  name: string;
+  running: number;
+  total: number;
+  error?: boolean;
+}
+
+export function HostCard({ name, running, total, error }: HostCardProps) {
+  const statusColor = error ? "red" : running > 0 ? "green" : "amber";
+  const hoverBorder = error
+    ? "hover:border-red-500/20"
+    : running > 0
+      ? "hover:border-green-500/20"
+      : "hover:border-amber-500/20";
+
+  const hoverGlow = error
+    ? "hover:shadow-[0_0_16px_rgba(239,68,68,0.05)]"
+    : running > 0
+      ? "hover:shadow-[0_0_16px_rgba(34,197,94,0.05)]"
+      : "hover:shadow-[0_0_16px_rgba(245,158,11,0.05)]";
+
+  return (
+    <Card
+      className={`card-hover-lift transition-all duration-300 ${hoverBorder} ${hoverGlow} overflow-hidden relative group`}
+    >
+      <CardContent className="pt-3 pb-3 px-4">
+        <div className="flex items-center justify-between mb-1">
+          <span className={`text-sm font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>
+            {name}
+          </span>
+          <StatusBadge
+            color={statusColor}
+            label={error ? "error" : "online"}
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {running}/{total} containers
+        </p>
+        {hostDescriptions[name] && (
+          <p className="text-[10px] text-muted-foreground/60 mt-0.5">
+            {hostDescriptions[name]}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function HostRow({ name, running, total, error }: HostCardProps) {
+  const isOlares = name === "olares";
+  return (
+    <div className="flex items-center justify-between py-2 px-1 text-sm">
+      <div className="flex items-center gap-2">
+        <span
+          className={`w-2 h-2 rounded-full ${error ? "bg-red-500" : "bg-green-500"}`}
+          style={{
+            boxShadow: error
+              ? "0 0 6px rgba(239,68,68,0.5)"
+              : "0 0 6px rgba(34,197,94,0.5)",
+          }}
+        />
+        <span className={`font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>{name}</span>
+      </div>
+      <span className="text-muted-foreground text-xs">
+        {isOlares && !total ? "K3s + GPU" : `${running}/${total}`}
+      </span>
+    </div>
+  );
+}
--- a/dashboard/ui/components/jellyfin-card.tsx
+++ b/dashboard/ui/components/jellyfin-card.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { JellyfinStatus } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+import { CardSkeleton } from "@/components/skeleton";
+import { EmptyState } from "@/components/empty-state";
+
+export function JellyfinCard() {
+  const { data } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-semibold">Jellyfin</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <CardSkeleton lines={4} />
+        ) : (
+          <>
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 mb-1.5">
+                Now Playing
+              </p>
+              {data.active_sessions.length > 0 ? (
+                <div className="space-y-2">
+                  {data.active_sessions.map((s, i) => (
+                    <div key={i} className="text-sm rounded-lg bg-white/[0.03] px-3 py-2">
+                      <p className="text-foreground font-medium">{s.title}</p>
+                      <p className="text-sm text-muted-foreground/70">
+                        {s.user} &middot; {s.device}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <EmptyState icon={">"} title="Nothing playing" description="Start something on Jellyfin" />
+              )}
+            </div>
+            <div className="h-px bg-white/[0.06]" />
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 mb-1.5">
+                Libraries
+              </p>
+              <div className="space-y-1">
+                {data.libraries.map((lib) => (
+                  <div
+                    key={lib.name}
+                    className="flex items-center justify-between text-sm"
+                  >
+                    <span className="text-foreground">{lib.name}</span>
+                    <StatusBadge color="green" label={lib.type} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {data.idle_sessions > 0 && (
+              <p className="text-xs text-muted-foreground/60">
+                {data.idle_sessions} idle session
+                {data.idle_sessions > 1 ? "s" : ""}
+              </p>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/dashboard/ui/components/keyboard-shortcuts.tsx
+++ b/dashboard/ui/components/keyboard-shortcuts.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export function KeyboardShortcuts() {
+  const router = useRouter();
+
+  useEffect(() => {
+    function handler(e: KeyboardEvent) {
+      // Don't trigger when typing in inputs
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+      switch (e.key) {
+        case "1": router.push("/"); break;
+        case "2": router.push("/infrastructure"); break;
+        case "3": router.push("/media"); break;
+        case "4": router.push("/automations"); break;
+        case "5": router.push("/expenses"); break;
+        case "6": router.push("/network"); break;
+        case "7": router.push("/logs"); break;
+        case "r": window.location.reload(); break;
+      }
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [router]);
+
+  return null;
+}
--- a/dashboard/ui/components/nav.tsx
+++ b/dashboard/ui/components/nav.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { RefreshIndicator } from "@/components/refresh-indicator";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+
+const tabs = [
+  { href: "/", label: "Dashboard", key: "1" },
+  { href: "/infrastructure", label: "Infrastructure", key: "2" },
+  { href: "/media", label: "Media", key: "3" },
+  { href: "/automations", label: "Automations", key: "4" },
+  { href: "/expenses", label: "Expenses", key: "5" },
+  { href: "/network", label: "Network", key: "6" },
+  { href: "/logs", label: "Logs", key: "7" },
+];
+
+export function Nav() {
+  const pathname = usePathname();
+  const today = new Date().toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <nav className="sticky top-0 z-50" style={{
+      background: "var(--nav-bg)",
+      backdropFilter: "blur(30px) saturate(180%)",
+      WebkitBackdropFilter: "blur(30px) saturate(180%)",
+      borderBottom: "1px solid var(--nav-border)",
+    }}>
+      {/* Accent gradient line at very top */}
+      <div className="h-[2px] w-full" style={{
+        background: `linear-gradient(90deg, var(--accent-color, #3b82f6), rgba(139,92,246,0.8), var(--accent-color, #3b82f6))`,
+        opacity: 0.6,
+      }} />
+      <div className="flex items-center justify-between px-6 h-12">
+        <div className="flex items-center gap-5">
+          <Link href="/" className="flex items-center gap-2.5 group">
+            <div className="w-8 h-8 rounded-[10px] bg-gradient-to-br from-blue-500 via-violet-500 to-pink-500 flex items-center justify-center text-white font-bold text-sm animate-logo-float transition-all group-hover:scale-105" style={{ boxShadow: "0 0 20px var(--accent-glow, rgba(139, 92, 246, 0.3))" }}>
+              H
+            </div>
+            <span className="font-semibold hidden sm:inline" style={{ color: "#f1f5f9" }}>Homelab</span>
+          </Link>
+          <div className="h-5 w-px bg-white/10 hidden sm:block" />
+          <div className="flex items-center gap-0.5">
+            {tabs.map((tab) => {
+              const isActive =
+                tab.href === "/"
+                  ? pathname === "/"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  className={cn(
+                    "px-2.5 py-1.5 text-xs rounded-md transition-all duration-200 whitespace-nowrap",
+                    isActive
+                      ? "font-medium"
+                      : "hover:text-foreground"
+                  )}
+                  style={
+                    isActive
+                      ? {
+                          background: "var(--nav-active)",
+                          color: "#f1f5f9",
+                          boxShadow: "var(--nav-active-glow, 0 2px 10px rgba(59,130,246,0.2))",
+                        }
+                      : { color: "rgba(148, 163, 184, 0.8)" }
+                  }
+                  onMouseEnter={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.background = "var(--nav-hover)";
+                      e.currentTarget.style.color = "#e2e8f0";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.background = "";
+                      e.currentTarget.style.color = "rgba(148, 163, 184, 0.8)";
+                    }
+                  }}
+                >
+                  {tab.label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <kbd className="hidden sm:inline-flex items-center gap-1 rounded-md border border-white/[0.1] bg-white/[0.04] px-2 py-0.5 text-[10px] text-muted-foreground/60 cursor-pointer hover:bg-white/[0.08] transition-colors" onClick={() => window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }))}>
+            Ctrl+K
+          </kbd>
+          <ThemeSwitcher />
+          <div className="h-5 w-px bg-white/10 hidden md:block" />
+          <span className="text-[11px] hidden md:inline" style={{ color: "rgba(148, 163, 184, 0.6)" }}>{today}</span>
+          <RefreshIndicator />
+        </div>
+      </div>
+    </nav>
+  );
+}
--- a/dashboard/ui/components/ollama-card.tsx
+++ b/dashboard/ui/components/ollama-card.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { OverviewStats } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+import { CardSkeleton } from "@/components/skeleton";
+
+function tempColor(temp: number): string {
+  if (temp < 50) return "#22c55e";
+  if (temp < 70) return "#f59e0b";
+  return "#ef4444";
+}
+
+function vramGradient(pct: number): string {
+  if (pct < 50) return "from-blue-500 to-cyan-400";
+  if (pct < 80) return "from-blue-500 via-violet-500 to-purple-400";
+  return "from-violet-500 via-pink-500 to-red-400";
+}
+
+function MiniRing({ pct, color, size = 48, stroke = 4, children }: { pct: number; color: string; size?: number; stroke?: number; children?: React.ReactNode }) {
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (pct / 100) * circumference;
+
+  return (
+    <div className="relative" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="absolute inset-0 -rotate-90">
+        <circle className="gauge-track" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} />
+        <circle className="gauge-fill" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} stroke={color} strokeDasharray={circumference} strokeDashoffset={offset} />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function OllamaCard() {
+  const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
+  const gpu = data?.gpu;
+  const ollamaUp = data?.ollama?.available ?? data?.ollama_available ?? false;
+  const vramUsed = gpu?.vram_used_mb ?? gpu?.memory_used_mb;
+  const vramTotal = gpu?.vram_total_mb ?? gpu?.memory_total_mb;
+  const power = gpu?.power_w ?? gpu?.power_draw_w;
+  const vramPct =
+    vramUsed != null && vramTotal != null ? (vramUsed / vramTotal) * 100 : 0;
+
+  return (
+    <Card className="overflow-hidden relative">
+      <CardHeader className="pb-2 flex flex-row items-center justify-between">
+        <CardTitle className="text-base font-semibold">LLM / GPU</CardTitle>
+        {data && (
+          <StatusBadge
+            color={ollamaUp ? "green" : "red"}
+            label={ollamaUp ? "Online" : "Offline"}
+          />
+        )}
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <CardSkeleton lines={3} />
+        ) : gpu?.available ? (
+          <>
+            {gpu.name && (
+              <p className="text-xs text-foreground/80 font-medium">{gpu.name}</p>
+            )}
+            {/* VRAM bar */}
+            {vramUsed != null && vramTotal != null && (
+              <div>
+                <div className="flex justify-between text-xs text-muted-foreground mb-1.5">
+                  <span>VRAM</span>
+                  <span>
+                    {(vramUsed / 1024).toFixed(1)} / {(vramTotal / 1024).toFixed(1)} GB
+                  </span>
+                </div>
+                <div className="glass-bar-track h-2.5">
+                  <div
+                    className={`h-full glass-bar-fill bg-gradient-to-r ${vramGradient(vramPct)} animate-bar-glow transition-all duration-700`}
+                    style={{ width: `${vramPct}%`, boxShadow: "0 0 12px rgba(139, 92, 246, 0.3)" }}
+                  />
+                </div>
+              </div>
+            )}
+            {/* Temperature ring + Power text */}
+            <div className="flex items-center gap-4">
+              {gpu.temp_c != null && (
+                <div className="flex items-center gap-2">
+                  <MiniRing pct={Math.min(gpu.temp_c, 100)} color={tempColor(gpu.temp_c)}>
+                    <span className="text-[10px] font-bold text-foreground">{gpu.temp_c}&deg;</span>
+                  </MiniRing>
+                  <span className="text-[10px] text-muted-foreground">Temp</span>
+                </div>
+              )}
+              {power != null && (
+                <div className="text-xs">
+                  <p className="text-foreground font-medium">{power}W</p>
+                  <p className="text-[10px] text-muted-foreground">
+                    {gpu.power_limit_w ? `/ ${gpu.power_limit_w}W` : "Power"}
+                  </p>
+                </div>
+              )}
+              {gpu.utilization_pct != null && (
+                <div className="text-xs">
+                  <p className="text-foreground font-medium">{gpu.utilization_pct}%</p>
+                  <p className="text-[10px] text-muted-foreground">Util</p>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <p className="text-xs text-muted-foreground">GPU not available</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/dashboard/ui/components/ollama-chat.tsx
+++ b/dashboard/ui/components/ollama-chat.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { useState, useRef } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface Message { role: "user" | "assistant"; content: string }
+
+export function OllamaChat() {
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  async function send() {
+    if (!input.trim() || loading) return;
+    const userMsg = input.trim();
+    setInput("");
+    setMessages(prev => [...prev, { role: "user", content: userMsg }]);
+    setLoading(true);
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMsg }),
+      });
+      const data = await res.json();
+      setMessages(prev => [...prev, { role: "assistant", content: data.response || data.error || "No response" }]);
+    } catch (e) {
+      setMessages(prev => [...prev, { role: "assistant", content: `Error: ${e}` }]);
+    }
+    setLoading(false);
+    setTimeout(() => scrollRef.current?.scrollTo(0, scrollRef.current.scrollHeight), 100);
+  }
+
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        className="fixed bottom-4 left-4 z-50 w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-blue-500 text-white flex items-center justify-center shadow-lg shadow-violet-500/20 hover:shadow-violet-500/40 hover:scale-110 transition-all duration-200"
+        title="Chat with Ollama"
+      >
+        <span className="text-sm font-bold">AI</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-4 left-4 z-50 w-80">
+      <Card className="shadow-2xl" style={{ background: "rgba(10, 10, 25, 0.95)", backdropFilter: "blur(30px)", border: "1px solid rgba(139, 92, 246, 0.2)" }}>
+        <CardHeader className="pb-2 flex flex-row items-center justify-between">
+          <CardTitle className="text-sm font-medium">Ollama Chat</CardTitle>
+          <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs hover:bg-white/[0.06]" onClick={() => setOpen(false)}>x</Button>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div ref={scrollRef} className="h-48 overflow-y-auto space-y-2 text-xs">
+            {messages.length === 0 && (
+              <div className="text-center py-3 space-y-2">
+                <p className="text-muted-foreground/60">Ask about your homelab...</p>
+                <div className="flex flex-wrap gap-1 justify-center">
+                  {["How many containers?", "GPU status?", "What's unhealthy?", "Disk space?"].map(q => (
+                    <button key={q} onClick={() => { setInput(q); }} className="text-[10px] px-2 py-1 rounded-md bg-white/[0.04] border border-white/[0.06] hover:bg-white/[0.08] transition-colors text-muted-foreground">
+                      {q}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {messages.map((m, i) => (
+              <div key={i} className={`rounded-lg px-3 py-2 ${m.role === "user" ? "bg-blue-500/10 border border-blue-500/10 ml-8" : "bg-white/[0.04] border border-white/[0.06] mr-8"}`}>
+                <p className="whitespace-pre-wrap">{m.content}</p>
+              </div>
+            ))}
+            {loading && <div className="bg-white/[0.04] border border-white/[0.06] rounded-lg px-3 py-2 mr-8 animate-pulse"><p className="text-muted-foreground">Thinking...</p></div>}
+          </div>
+          <div className="flex gap-1.5">
+            <input
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              onKeyDown={e => e.key === "Enter" && send()}
+              placeholder="Ask Ollama..."
+              className="flex-1 rounded-lg glass-input px-3 py-1.5 text-xs"
+            />
+            <Button size="sm" className="h-7 text-xs px-3 bg-violet-500/20 hover:bg-violet-500/30 border border-violet-500/20" onClick={send} disabled={loading}>Send</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/dashboard/ui/components/refresh-indicator.tsx
+++ b/dashboard/ui/components/refresh-indicator.tsx
@@ -0,0 +1,19 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export function RefreshIndicator({ interval = 60 }: { interval?: number }) {
+  const [countdown, setCountdown] = useState(interval);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCountdown(prev => prev <= 1 ? interval : prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [interval]);
+
+  return (
+    <span className="text-[9px] text-muted-foreground tabular-nums">
+      {countdown}s
+    </span>
+  );
+}
--- a/dashboard/ui/components/skeleton.tsx
+++ b/dashboard/ui/components/skeleton.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+export function Skeleton({ className = "", style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <div className={`animate-pulse rounded-lg bg-white/[0.06] ${className}`} style={style} />
+  );
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="rounded-2xl border border-white/[0.08] p-5 space-y-3" style={{ background: "rgba(15,20,35,0.35)" }}>
+      <Skeleton className="h-3 w-20" />
+      <Skeleton className="h-8 w-24" />
+      <Skeleton className="h-3 w-32" />
+    </div>
+  );
+}
+
+export function CardSkeleton({ lines = 4, className = "" }: { lines?: number; className?: string }) {
+  return (
+    <div className={`rounded-2xl border border-white/[0.08] p-5 space-y-3 ${className}`} style={{ background: "rgba(15,20,35,0.35)" }}>
+      <Skeleton className="h-4 w-32 mb-2" />
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className="h-3" style={{ width: `${70 + Math.random() * 30}%` }} />
+      ))}
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-2">
+      <Skeleton className="h-8 w-full rounded-lg" />
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className="h-6 w-full rounded" />
+      ))}
+    </div>
+  );
+}
--- a/dashboard/ui/components/sparkline.tsx
+++ b/dashboard/ui/components/sparkline.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+export function Sparkline({ data, width = 80, height = 24, color = "#3b82f6" }: SparklineProps) {
+  if (!data || data.length < 2) return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const points = data.map((v, i) => {
+    const x = (i / (data.length - 1)) * width;
+    const y = height - ((v - min) / range) * (height - 4) - 2;
+    return `${x},${y}`;
+  }).join(" ");
+
+  return (
+    <svg width={width} height={height} className="inline-block">
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
--- a/dashboard/ui/components/stat-card.tsx
+++ b/dashboard/ui/components/stat-card.tsx
@@ -0,0 +1,134 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+type StatColor = "blue" | "green" | "violet" | "amber" | "emerald";
+
+const gradientMap: Record<StatColor, string> = {
+  blue: "from-blue-300 to-blue-500",
+  green: "from-green-300 to-green-500",
+  violet: "from-violet-300 to-violet-500",
+  amber: "from-amber-300 to-amber-500",
+  emerald: "from-emerald-300 to-emerald-500",
+};
+
+const accentLineMap: Record<StatColor, string> = {
+  blue: "#3b82f6",
+  green: "#22c55e",
+  violet: "#8b5cf6",
+  amber: "#f59e0b",
+  emerald: "#10b981",
+};
+
+const strokeColorMap: Record<StatColor, [string, string]> = {
+  blue: ["#93c5fd", "#3b82f6"],
+  green: ["#86efac", "#22c55e"],
+  violet: ["#c4b5fd", "#8b5cf6"],
+  amber: ["#fcd34d", "#f59e0b"],
+  emerald: ["#6ee7b7", "#10b981"],
+};
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  sub?: React.ReactNode;
+  color?: StatColor;
+  gauge?: number; // 0-100 percentage for ring gauge
+}
+
+function colorizeSubText(sub: React.ReactNode): React.ReactNode {
+  if (typeof sub !== "string") return sub;
+  const keywords: [RegExp, string][] = [
+    [/\b(running|online|healthy|clean|clear|all good|ok)\b/gi, "text-green-400"],
+    [/\b(error|alert|fail|errors detected)\b/gi, "text-red-400"],
+  ];
+  for (const [pattern, cls] of keywords) {
+    if (pattern.test(sub)) {
+      return (
+        <>
+          {sub.split(pattern).map((part, i) =>
+            pattern.test(part) ? (
+              <span key={i} className={cls}>{part}</span>
+            ) : (
+              <span key={i}>{part}</span>
+            )
+          )}
+        </>
+      );
+    }
+  }
+  return sub;
+}
+
+function GaugeRing({ pct, color, size = 64, stroke = 4 }: { pct: number; color: StatColor; size?: number; stroke?: number }) {
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (pct / 100) * circumference;
+  const gradientId = `gauge-grad-${color}`;
+  const [stopStart, stopEnd] = strokeColorMap[color] ?? ["#93c5fd", "#3b82f6"];
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
+      <defs>
+        <linearGradient id={gradientId}>
+          <stop offset="0%" stopColor={stopStart} />
+          <stop offset="100%" stopColor={stopEnd} />
+        </linearGradient>
+      </defs>
+      <circle
+        className="gauge-track"
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        strokeWidth={stroke}
+      />
+      <circle
+        className="gauge-fill"
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        strokeWidth={stroke}
+        stroke={`url(#${gradientId})`}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+      />
+    </svg>
+  );
+}
+
+export function StatCard({ label, value, sub, color = "blue", gauge }: StatCardProps) {
+  const hasGauge = gauge != null && gauge >= 0;
+  const accent = accentLineMap[color];
+
+  return (
+    <Card className="card-hover-lift overflow-hidden relative group">
+      {/* Top accent line */}
+      <span
+        className="absolute top-0 left-[20%] right-[20%] h-px"
+        style={{
+          background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
+        }}
+      />
+      <CardContent className="pt-5 pb-4 px-4 relative flex flex-col items-center justify-center text-center min-h-[110px]">
+        {hasGauge ? (
+          <div className="relative flex items-center justify-center mb-1" style={{ width: 64, height: 64 }}>
+            <GaugeRing pct={gauge} color={color} />
+            <span
+              className={`absolute inset-0 flex items-center justify-center text-xl font-bold bg-gradient-to-b ${gradientMap[color]} bg-clip-text text-transparent tabular-nums-transition`}
+            >
+              {value}
+            </span>
+          </div>
+        ) : (
+          <p
+            className={`text-3xl font-bold bg-gradient-to-b ${gradientMap[color]} bg-clip-text text-transparent tabular-nums-transition mb-1`}
+          >
+            {value}
+          </p>
+        )}
+        <p className="text-xs uppercase tracking-wider text-muted-foreground font-medium">
+          {label}
+        </p>
+        {sub && <div className="mt-0.5 text-sm text-muted-foreground/70">{colorizeSubText(sub)}</div>}
+      </CardContent>
+    </Card>
+  );
+}
--- a/dashboard/ui/components/status-badge.tsx
+++ b/dashboard/ui/components/status-badge.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+const colorStyles: Record<string, { bg: string; shadow: string }> = {
+  green:  { bg: "bg-green-500",  shadow: "0 0 8px rgba(34, 197, 94, 0.5)" },
+  red:    { bg: "bg-red-500",    shadow: "0 0 8px rgba(239, 68, 68, 0.5)" },
+  amber:  { bg: "bg-amber-500",  shadow: "0 0 8px rgba(245, 158, 11, 0.5)" },
+  blue:   { bg: "bg-blue-500",   shadow: "0 0 8px rgba(59, 130, 246, 0.5)" },
+  purple: { bg: "bg-purple-500", shadow: "0 0 8px rgba(139, 92, 246, 0.5)" },
+};
+
+interface StatusBadgeProps {
+  color: "green" | "red" | "amber" | "blue" | "purple";
+  label?: string;
+}
+
+export function StatusBadge({ color, label }: StatusBadgeProps) {
+  const style = colorStyles[color] ?? { bg: "bg-gray-500", shadow: "none" };
+
+  return (
+    <span className="inline-flex items-center gap-1.5 text-xs">
+      <span
+        className={cn("w-2 h-2 rounded-full shrink-0", style.bg)}
+        style={{ boxShadow: style.shadow }}
+      />
+      {label && <span className="text-muted-foreground">{label}</span>}
+    </span>
+  );
+}
--- a/dashboard/ui/components/tdarr-card.tsx
+++ b/dashboard/ui/components/tdarr-card.tsx
@@ -0,0 +1,139 @@
+"use client";
+import { usePoll } from "@/lib/use-poll";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { CardSkeleton } from "@/components/skeleton";
+
+interface TdarrWorker {
+  id: string;
+  type: string;
+  file: string;
+  percentage: number;
+  fps: number;
+  eta: string;
+}
+
+interface TdarrNode {
+  id: string;
+  name: string;
+  paused: boolean;
+  hardware: string;
+  workers: TdarrWorker[];
+  active: number;
+}
+
+interface TdarrCluster {
+  server_version?: string;
+  nodes: TdarrNode[];
+  total_active: number;
+  stats: {
+    total_files: number;
+    transcoded: number;
+    health_checked: number;
+    size_saved_gb: number;
+    queue_transcode: number;
+    error_transcode: number;
+    tdarr_score: string;
+  };
+  error?: string;
+}
+
+// Node hardware colors
+const hwColors: Record<string, string> = {
+  "NVENC (RTX 5090)": "text-green-400",
+  "VAAPI (Radeon 760M)": "text-amber-400",
+  "QSV (Intel)": "text-cyan-400",
+  "CPU": "text-muted-foreground",
+};
+
+export function TdarrCard() {
+  const { data } = usePoll<TdarrCluster>("/api/tdarr/cluster", 10000); // 10s refresh for live worker updates
+
+  return (
+    <Card>
+      <CardHeader className="pb-2 flex flex-row items-center justify-between">
+        <CardTitle className="text-base font-semibold">Tdarr Cluster</CardTitle>
+        <div className="flex items-center gap-2">
+          {data && !data.error && (
+            <>
+              <Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
+                {data.total_active} active
+              </Badge>
+              {data.stats.error_transcode > 0 && (
+                <Badge variant="secondary" className="text-xs bg-red-500/10 border border-red-500/20 text-red-400">
+                  {data.stats.error_transcode} errors
+                </Badge>
+              )}
+            </>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {!data ? (
+          <CardSkeleton lines={5} />
+        ) : data.error ? (
+          <p className="text-sm text-red-400">{data.error}</p>
+        ) : (
+          <div className="space-y-4">
+            {/* Stats row */}
+            <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-muted-foreground">
+              <span>{data.stats.total_files.toLocaleString()} files</span>
+              <span className="text-green-400">{data.stats.transcoded.toLocaleString()} transcoded</span>
+              <span>{data.stats.health_checked.toLocaleString()} health checked</span>
+              <span className="text-amber-400">{data.stats.size_saved_gb} GB saved</span>
+              {data.stats.queue_transcode > 0 && (
+                <span className="text-blue-400">{data.stats.queue_transcode} in queue</span>
+              )}
+            </div>
+
+            {/* Nodes */}
+            <div className="space-y-3">
+              {data.nodes.map((node) => (
+                <div key={node.id} className="rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2 h-2 rounded-full ${node.active > 0 ? "bg-green-500" : node.paused ? "bg-amber-500" : "bg-gray-500"}`}
+                            style={{ boxShadow: node.active > 0 ? "0 0 6px rgba(34,197,94,0.5)" : "none" }} />
+                      <span className="text-sm font-medium">{node.name}</span>
+                      <span className={`text-xs ${hwColors[node.hardware] ?? "text-muted-foreground"}`}>{node.hardware}</span>
+                    </div>
+                    {node.paused && <Badge variant="secondary" className="text-[10px] bg-amber-500/10 text-amber-400">Paused</Badge>}
+                  </div>
+
+                  {node.workers.length > 0 ? (
+                    <div className="space-y-2">
+                      {node.workers.map((w) => (
+                        <div key={w.id} className="space-y-1">
+                          <div className="flex items-center justify-between text-xs">
+                            <span className="text-foreground/80 truncate max-w-[60%]">{w.file}</span>
+                            <div className="flex items-center gap-2 shrink-0">
+                              <span className="text-green-400 font-mono">{w.fps} fps</span>
+                              <span className="text-muted-foreground">{w.eta}</span>
+                              <span className="text-foreground font-medium w-12 text-right">{w.percentage}%</span>
+                            </div>
+                          </div>
+                          <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+                            <div
+                              className="h-full rounded-full transition-all duration-1000"
+                              style={{
+                                width: `${w.percentage}%`,
+                                background: `linear-gradient(90deg, #3b82f6, ${w.percentage > 80 ? "#22c55e" : "#8b5cf6"})`,
+                                boxShadow: "0 0 8px rgba(59, 130, 246, 0.3)",
+                              }}
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-xs text-muted-foreground/50">Idle</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/dashboard/ui/components/theme-provider.tsx
+++ b/dashboard/ui/components/theme-provider.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { themes, getTheme, DEFAULT_THEME, type Theme } from "@/lib/themes";
+
+interface ThemeContextValue {
+  theme: Theme;
+  themeName: string;
+  setTheme: (name: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: themes[0],
+  themeName: DEFAULT_THEME,
+  setTheme: () => {},
+});
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+// Unique ID for the dynamic style element
+const STYLE_ID = "theme-gradient-style";
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+
+  // Toggle dark class based on theme
+  if (theme.isDark) {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
+
+  // Set all CSS custom properties from the theme
+  for (const [key, value] of Object.entries(theme.vars)) {
+    root.style.setProperty(key, value);
+  }
+
+  // Set the body background
+  document.body.style.background = theme.bodyBg;
+
+  // Set the gradient via a style element (body::before can't be styled inline)
+  let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = `
+    body::before {
+      background: ${theme.bgGradient} !important;
+    }
+  `;
+
+  // Store in localStorage
+  try {
+    localStorage.setItem("homelab-theme", theme.name);
+  } catch {
+    // ignore storage errors
+  }
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [themeName, setThemeName] = useState(DEFAULT_THEME);
+  const theme = getTheme(themeName);
+
+  // Load saved theme on mount
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("homelab-theme");
+      if (saved && themes.some((t) => t.name === saved)) {
+        setThemeName(saved);
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  // Apply theme whenever it changes
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const setTheme = useCallback((name: string) => {
+    if (themes.some((t) => t.name === name)) {
+      setThemeName(name);
+    }
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, themeName, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
--- a/dashboard/ui/components/theme-switcher.tsx
+++ b/dashboard/ui/components/theme-switcher.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "@/components/theme-provider";
+import { themes } from "@/lib/themes";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    if (open) {
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 hover:bg-[var(--nav-hover)]"
+        aria-label="Switch theme"
+      >
+        <span
+          className="w-3 h-3 rounded-full shrink-0 border border-white/10"
+          style={{
+            background: `linear-gradient(135deg, ${theme.swatch[0]}, ${theme.swatch[1]})`,
+          }}
+        />
+        <span className="text-muted-foreground hidden sm:inline">{theme.label}</span>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 top-full mt-2 w-52 rounded-xl p-1.5 z-[100] shadow-2xl max-h-[70vh] overflow-y-auto"
+          style={{
+            background: theme.isDark ? "rgba(10, 10, 25, 0.95)" : "rgba(255, 255, 255, 0.97)",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+            backdropFilter: "blur(30px) saturate(180%)",
+            WebkitBackdropFilter: "blur(30px) saturate(180%)",
+          }}
+        >
+          <div className="px-2.5 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: theme.isDark ? "#64748b" : "#94a3b8" }}>
+            Themes
+          </div>
+          {themes.map((t) => (
+            <button
+              key={t.name}
+              onClick={() => {
+                setTheme(t.name);
+                setOpen(false);
+              }}
+              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-xs transition-all duration-150"
+              style={{
+                background: theme.name === t.name
+                  ? (theme.isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)")
+                  : "transparent",
+                color: theme.name === t.name
+                  ? (theme.isDark ? "#f1f5f9" : "#1e293b")
+                  : (theme.isDark ? "#94a3b8" : "#64748b"),
+              }}
+              onMouseEnter={(e) => {
+                if (theme.name !== t.name)
+                  e.currentTarget.style.background = theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
+              }}
+              onMouseLeave={(e) => {
+                if (theme.name !== t.name)
+                  e.currentTarget.style.background = "transparent";
+              }}
+            >
+              <span
+                className="w-4 h-4 rounded-full shrink-0"
+                style={{
+                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
+                  boxShadow: `0 0 8px ${t.swatch[0]}40`,
+                  border: "1px solid rgba(255,255,255,0.15)",
+                }}
+              />
+              <span className="flex-1 text-left font-medium">{t.label}</span>
+              {theme.name === t.name && (
+                <span style={{ color: t.swatch[0], fontSize: "14px" }}>●</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/dashboard/ui/components/toast-provider.tsx
+++ b/dashboard/ui/components/toast-provider.tsx
@@ -0,0 +1,53 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { useSSE } from "@/lib/use-sse";
+
+interface Toast {
+  id: number;
+  message: string;
+  type: "info" | "warning" | "error";
+}
+
+const ALERT_TYPES = ["container_unhealthy", "container_restarted", "drift_found"];
+
+export function ToastProvider() {
+  const events = useSSE("/api/activity", 5);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [seen, setSeen] = useState(new Set<string>());
+
+  const addToast = useCallback((message: string, type: Toast["type"]) => {
+    const id = Date.now();
+    setToasts(prev => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
+  }, []);
+
+  useEffect(() => {
+    for (const event of events) {
+      const key = `${event.type}-${event.timestamp}`;
+      if (seen.has(key)) continue;
+      if (ALERT_TYPES.includes(event.type)) {
+        setSeen(prev => new Set(prev).add(key));
+        addToast(event.raw || `${event.type}: ${event.source}`,
+          event.type.includes("unhealthy") ? "error" : "warning");
+      }
+    }
+  }, [events, seen, addToast]);
+
+  if (toasts.length === 0) return null;
+
+  const colors = {
+    info: "border-blue-500/20 bg-blue-500/5 backdrop-blur-xl",
+    warning: "border-amber-500/20 bg-amber-500/5 backdrop-blur-xl",
+    error: "border-red-500/20 bg-red-500/5 backdrop-blur-xl",
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm">
+      {toasts.map(t => (
+        <div key={t.id} className={`rounded-lg border px-4 py-3 text-xs shadow-lg backdrop-blur-md animate-slide-in ${colors[t.type]}`}>
+          <p className="text-foreground">{t.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/dashboard/ui/components/ui/badge.tsx
+++ b/dashboard/ui/components/ui/badge.tsx
@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
--- a/dashboard/ui/components/ui/button.tsx
+++ b/dashboard/ui/components/ui/button.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/dashboard/ui/components/ui/card.tsx
+++ b/dashboard/ui/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/dashboard/ui/components/ui/dialog.tsx
+++ b/dashboard/ui/components/ui/dialog.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/dashboard/ui/components/ui/scroll-area.tsx
+++ b/dashboard/ui/components/ui/scroll-area.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/dashboard/ui/components/ui/separator.tsx
+++ b/dashboard/ui/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/dashboard/ui/components/ui/table.tsx
+++ b/dashboard/ui/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/dashboard/ui/components/ui/tabs.tsx
+++ b/dashboard/ui/components/ui/tabs.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }