Sanitized mirror from private repository - 2026-04-05 05:32:08 UTC

dashboard/ui/components/activity-feed.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+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 typeColors: Record<string, string> = {
+  stack_healthy: "bg-green-500 glow-green",
+  backup_result: "bg-green-500 glow-green",
+  email_classified: "bg-blue-500 glow-blue",
+  receipt_extracted: "bg-amber-500 glow-amber",
+  container_unhealthy: "bg-red-500 glow-red",
+};
+
+function formatTime(ts: string) {
+  try {
+    return new Date(ts).toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return ts;
+  }
+}
+
+function eventMessage(event: ActivityEvent): string {
+  if (event.raw) return event.raw;
+  return `${event.type} from ${event.source}`;
+}
+
+export function ActivityFeed() {
+  const events = useSSE("/api/activity");
+
+  return (
+    <Card className="col-span-full lg:col-span-3 overflow-hidden relative">
+      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-green-500 via-blue-500 to-violet-500" />
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium">Activity Feed</CardTitle>
+        <Badge
+          variant="outline"
+          className="text-[10px] border-green-500/50 text-green-400 animate-live-pulse"
+        >
+          <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-2 text-xs animate-slide-in"
+                style={{ animationDelay: `${i * 30}ms` }}
+              >
+                <span
+                  className={`w-2 h-2 rounded-full mt-1 shrink-0 ${
+                    typeColors[event.type] ?? "bg-gray-500"
+                  }`}
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="text-foreground truncate">
+                    {eventMessage(event)}
+                  </p>
+                  <p className="text-muted-foreground">
+                    {formatTime(event.timestamp)} &middot; {event.source}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}

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/${endpoint}/${containerId}/logs`
+    )
+      .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>
+  );
+}

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-md border border-border bg-background px-3 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring w-64"
+          />
+        )}
+        {filterKey && filterOptions && (
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          >
+            <option value="all">All</option>
+            {filterOptions.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+      <div className="rounded-md border border-border overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((col) => (
+                <TableHead key={col.key} className="text-xs">
+                  {col.label}
+                </TableHead>
+              ))}
+              {actions && <TableHead className="text-xs 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}>
+                  {columns.map((col) => (
+                    <TableCell key={col.key} className="text-xs">
+                      {col.render
+                        ? col.render(row)
+                        : String(row[col.key] ?? "")}
+                    </TableCell>
+                  ))}
+                  {actions && (
+                    <TableCell className="text-xs">{actions(row)}</TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

dashboard/ui/components/host-card.tsx

@@ -0,0 +1,66 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+
+const hostDescriptions: Record<string, string> = {
+  atlantis: "NAS \u00b7 media stack",
+  calypso: "DNS \u00b7 SSO \u00b7 Headscale",
+  olares: "K3s \u00b7 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 borderColor = error
+    ? "border-red-500/30 hover:border-red-500/50"
+    : running > 0
+      ? "border-green-500/20 hover:border-green-500/40"
+      : "border-amber-500/20 hover:border-amber-500/40";
+
+  const glowColor = error
+    ? "hover:shadow-red-500/5"
+    : running > 0
+      ? "hover:shadow-green-500/5"
+      : "hover:shadow-amber-500/5";
+
+  const pct = total > 0 ? (running / total) * 100 : 0;
+
+  return (
+    <Card
+      className={`card-hover-lift border transition-colors duration-300 ${borderColor} ${glowColor} 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 text-foreground capitalize">
+            {name}
+          </span>
+          <StatusBadge
+            color={error ? "red" : running > 0 ? "green" : "amber"}
+            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 mt-0.5">
+            {hostDescriptions[name]}
+          </p>
+        )}
+        {/* Utilization micro-bar */}
+        <div className="mt-2 h-1 rounded-full bg-secondary/50 overflow-hidden">
+          <div
+            className="h-full rounded-full bg-gradient-to-r from-green-500 to-emerald-400 transition-all duration-500"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/jellyfin-card.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { JellyfinStatus } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { StatusBadge } from "./status-badge";
+
+export function JellyfinCard() {
+  const { data } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium">Jellyfin</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <p className="text-xs text-muted-foreground">Loading...</p>
+        ) : (
+          <>
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">
+                Now Playing
+              </p>
+              {data.active_sessions.length > 0 ? (
+                <div className="space-y-1.5">
+                  {data.active_sessions.map((s, i) => (
+                    <div key={i} className="text-xs">
+                      <p className="text-foreground font-medium">{s.title}</p>
+                      <p className="text-muted-foreground">
+                        {s.user} &middot; {s.device}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  No active streams
+                </p>
+              )}
+            </div>
+            <Separator />
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">
+                Libraries
+              </p>
+              <div className="space-y-1">
+                {data.libraries.map((lib) => (
+                  <div
+                    key={lib.name}
+                    className="flex items-center justify-between text-xs"
+                  >
+                    <span className="text-foreground">{lib.name}</span>
+                    <StatusBadge color="green" label={lib.type} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {data.idle_sessions > 0 && (
+              <p className="text-[10px] text-muted-foreground">
+                {data.idle_sessions} idle session
+                {data.idle_sessions > 1 ? "s" : ""}
+              </p>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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;
+}

dashboard/ui/components/nav.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { RefreshIndicator } from "@/components/refresh-indicator";
+
+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 border-b border-border bg-background/80 backdrop-blur-md">
+      <div className="flex items-center justify-between px-6 h-14">
+        <div className="flex items-center gap-6">
+          <Link href="/" className="flex items-center gap-2 group">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 via-violet-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm animate-shimmer shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
+              H
+            </div>
+            <span className="font-semibold text-foreground hidden sm:inline">Homelab</span>
+          </Link>
+          <div className="flex items-center gap-1 overflow-x-auto">
+            {tabs.map((tab) => {
+              const isActive =
+                tab.href === "/"
+                  ? pathname === "/"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  className={cn(
+                    "px-3 py-1.5 text-sm rounded-md transition-all duration-200 relative whitespace-nowrap",
+                    isActive
+                      ? "text-foreground"
+                      : "text-muted-foreground hover:text-foreground hover:bg-white/[0.03]"
+                  )}
+                >
+                  {tab.label}
+                  <span className="ml-1 text-[9px] text-muted-foreground/50">{tab.key}</span>
+                  {isActive && (
+                    <span className="absolute bottom-[-13px] left-0 right-0 h-[2px] bg-gradient-to-r from-blue-500 to-violet-500 nav-active-glow" />
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground hidden md:inline">{today}</span>
+          <RefreshIndicator />
+        </div>
+      </div>
+    </nav>
+  );
+}

dashboard/ui/components/ollama-card.tsx

@@ -0,0 +1,113 @@
+"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";
+
+function tempColor(temp: number): string {
+  if (temp < 50) return "text-green-400";
+  if (temp < 70) return "text-amber-400";
+  return "text-red-400";
+}
+
+function tempBarGradient(temp: number): string {
+  if (temp < 50) return "from-green-500 to-green-400";
+  if (temp < 70) return "from-green-500 via-amber-500 to-amber-400";
+  return "from-green-500 via-amber-500 to-red-500";
+}
+
+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";
+}
+
+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">
+      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-violet-500 to-purple-600" />
+      <CardHeader className="pb-2 flex flex-row items-center justify-between">
+        <CardTitle className="text-sm font-medium">LLM / GPU</CardTitle>
+        {data && (
+          <StatusBadge
+            color={ollamaUp ? "green" : "red"}
+            label={ollamaUp ? "Online" : "Offline"}
+          />
+        )}
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {!data ? (
+          <p className="text-xs text-muted-foreground">Loading...</p>
+        ) : gpu?.available ? (
+          <>
+            {gpu.name && (
+              <p className="text-xs text-foreground font-medium">{gpu.name}</p>
+            )}
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              {vramUsed != null && vramTotal != null && (
+                <div>
+                  <p className="text-muted-foreground">VRAM</p>
+                  <p className="text-foreground">
+                    {(vramUsed / 1024).toFixed(1)} /{" "}
+                    {(vramTotal / 1024).toFixed(1)} GB
+                  </p>
+                  <div className="mt-1 h-2 rounded-full bg-secondary/50 overflow-hidden relative">
+                    <div
+                      className={`h-full rounded-full bg-gradient-to-r ${vramGradient(vramPct)} animate-bar-glow transition-all duration-700`}
+                      style={{
+                        width: `${vramPct}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
+              {gpu.temp_c != null && (
+                <div>
+                  <p className="text-muted-foreground">Temperature</p>
+                  <p className={`font-medium ${tempColor(gpu.temp_c)}`}>
+                    {gpu.temp_c}&deg;C
+                  </p>
+                  <div className="mt-1 h-1.5 rounded-full bg-secondary/50 overflow-hidden">
+                    <div
+                      className={`h-full rounded-full bg-gradient-to-r ${tempBarGradient(gpu.temp_c)} transition-all duration-700`}
+                      style={{ width: `${Math.min(gpu.temp_c, 100)}%` }}
+                    />
+                  </div>
+                </div>
+              )}
+              {power != null && (
+                <div>
+                  <p className="text-muted-foreground">Power</p>
+                  <p className="text-foreground">
+                    {power}W
+                    {gpu.power_limit_w ? ` / ${gpu.power_limit_w}W` : ""}
+                  </p>
+                </div>
+              )}
+              {gpu.utilization_pct != null && (
+                <div>
+                  <p className="text-muted-foreground">Utilization</p>
+                  <p className="text-foreground font-medium">
+                    {gpu.utilization_pct}%
+                  </p>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <p className="text-xs text-muted-foreground">GPU not available</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/ollama-chat.tsx

@@ -0,0 +1,79 @@
+"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 hover:scale-110 transition-transform"
+        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 border-violet-500/20">
+        <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" 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 && <p className="text-muted-foreground text-center py-4">Ask anything about your homelab...</p>}
+            {messages.map((m, i) => (
+              <div key={i} className={`rounded-md px-2 py-1.5 ${m.role === "user" ? "bg-primary/10 ml-8" : "bg-secondary mr-8"}`}>
+                <p className="whitespace-pre-wrap">{m.content}</p>
+              </div>
+            ))}
+            {loading && <div className="bg-secondary rounded-md px-2 py-1.5 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-md border border-border bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+            <Button size="sm" className="h-7 text-xs px-2" onClick={send} disabled={loading}>Send</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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>
+  );
+}

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>
+  );
+}

dashboard/ui/components/stat-card.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+const accentColors: Record<string, string> = {
+  Containers: "from-blue-500 to-blue-600",
+  "Hosts Online": "from-green-500 to-emerald-600",
+  GPU: "from-violet-500 to-purple-600",
+  "Emails Today": "from-amber-500 to-orange-600",
+  Alerts: "from-red-500 to-rose-600",
+};
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  sub?: React.ReactNode;
+}
+
+export function StatCard({ label, value, sub }: StatCardProps) {
+  const gradient = accentColors[label] ?? "from-blue-500 to-blue-600";
+
+  return (
+    <Card className="card-hover-lift overflow-hidden relative group">
+      <div
+        className={`absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r ${gradient}`}
+      />
+      <div
+        className={`absolute top-0 left-0 right-0 h-8 bg-gradient-to-b ${gradient} opacity-[0.03] group-hover:opacity-[0.06] transition-opacity`}
+      />
+      <CardContent className="pt-4 pb-3 px-4 relative">
+        <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium mb-1">
+          {label}
+        </p>
+        <p className="text-2xl font-bold text-foreground tabular-nums-transition">
+          {value}
+        </p>
+        {sub && <div className="mt-1 text-xs text-muted-foreground">{sub}</div>}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/status-badge.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+const colorMap: Record<string, string> = {
+  green: "bg-green-500 glow-green",
+  red: "bg-red-500 glow-red",
+  amber: "bg-amber-500 glow-amber",
+  blue: "bg-blue-500 glow-blue",
+  purple: "bg-purple-500 glow-purple",
+};
+
+interface StatusBadgeProps {
+  color: "green" | "red" | "amber" | "blue" | "purple";
+  label?: string;
+}
+
+export function StatusBadge({ color, label }: StatusBadgeProps) {
+  return (
+    <span className="inline-flex items-center gap-1.5 text-xs">
+      <span
+        className={cn(
+          "w-2 h-2 rounded-full shrink-0",
+          colorMap[color] ?? "bg-gray-500"
+        )}
+      />
+      {label && <span className="text-muted-foreground">{label}</span>}
+    </span>
+  );
+}

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/50 bg-blue-500/10",
+    warning: "border-amber-500/50 bg-amber-500/10",
+    error: "border-red-500/50 bg-red-500/10",
+  };
+
+  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>
+  );
+}

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 }

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 }

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,
+}

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,
+}

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 }

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 }

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,
+}

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 }