Sanitized mirror from private repository - 2026-04-05 05:12:55 UTC

dashboard/ui/app/automations/page.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { EmailStats } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { StatusBadge } from "@/components/status-badge";
+
+interface BackupResult {
+  host: string;
+  status: string;
+  last_run: string;
+  size?: string;
+}
+
+interface DriftResult {
+  stack: string;
+  drifted: boolean;
+  details?: string;
+}
+
+interface StackRestart {
+  stack: string;
+  status: string;
+  timestamp: string;
+}
+
+export default function AutomationsPage() {
+  const { data: emails } = usePoll<EmailStats>(
+    "/api/automations/email",
+    60000
+  );
+  const { data: backups } = usePoll<Record<string, unknown>>(
+    "/api/automations/backup",
+    120000
+  );
+  const { data: drift } = usePoll<Record<string, unknown>>(
+    "/api/automations/drift",
+    120000
+  );
+  const { data: restartsData } = usePoll<{ entries: StackRestart[] }>(
+    "/api/automations/restarts",
+    60000
+  );
+  const restarts = restartsData?.entries ?? [];
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-lg font-semibold">Automations</h1>
+
+      {/* Email Organizers */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">
+            Email Organizers
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!emails ? (
+            <p className="text-xs text-muted-foreground">Loading...</p>
+          ) : (
+            <div className="space-y-4">
+              {emails.accounts.map((acct: Record<string, unknown>) => {
+                const name = String(acct.account ?? acct.name ?? "?");
+                const today = Number(acct.today ?? acct.today_total ?? 0);
+                const cats = (acct.categories ?? acct.today_categories ?? {}) as Record<string, number>;
+                return (
+                  <div key={name} className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium text-foreground">{name}</span>
+                      <span className="text-xs text-muted-foreground">{today} today</span>
+                    </div>
+                    <div className="flex flex-wrap gap-1.5">
+                      {Object.entries(cats).map(([cat, count]) => (
+                        <Badge key={cat} variant="secondary" className="text-[10px]">
+                          {cat}: {count}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Row 2: Backups, Drift, Restarts */}
+      <div className="grid grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Backup Status
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!backups ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : (
+              <div className="space-y-2">
+                <StatusBadge
+                  color={String(backups.status) === "ok" ? "green" : "red"}
+                  label={String(backups.status ?? "unknown")}
+                />
+                {backups.has_errors ? (
+                  <p className="text-xs text-red-400">Errors detected in backup</p>
+                ) : null}
+                <p className="text-[10px] text-muted-foreground">
+                  {String(backups.entries ?? 0)} log entries today
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Config Drift
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!drift ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : (
+              <div className="space-y-2">
+                <StatusBadge
+                  color={String(drift.status) === "clean" || String(drift.status) === "no_log" ? "green" : "amber"}
+                  label={String(drift.status ?? "unknown")}
+                />
+                <p className="text-[10px] text-muted-foreground">
+                  {String(drift.last_result ?? "No scan results yet")}
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Stack Restarts
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!restarts ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : restarts.length === 0 ? (
+              <p className="text-xs text-muted-foreground">
+                No recent restarts
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {restarts.map((r, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center justify-between text-xs"
+                  >
+                    <span className="text-foreground">{r.stack}</span>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={r.status === "success" ? "green" : "red"}
+                        label={r.status}
+                      />
+                      <span className="text-muted-foreground">
+                        {new Date(r.timestamp).toLocaleTimeString("en-US", {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/expenses/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { ExpenseSummary } from "@/lib/types";
+import { StatCard } from "@/components/stat-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DataTable, Column } from "@/components/data-table";
+
+interface Transaction {
+  id: string;
+  date: string;
+  vendor: string;
+  amount: number;
+  category: string;
+}
+
+export default function ExpensesPage() {
+  const { data: summary } = usePoll<ExpenseSummary>(
+    "/api/expenses/summary",
+    120000
+  );
+  const { data: expenseData } = usePoll<Transaction[] | { count: number; expenses: Transaction[] }>(
+    "/api/expenses",
+    120000
+  );
+  const transactions = Array.isArray(expenseData) ? expenseData : (expenseData?.expenses ?? []);
+
+  const maxVendor =
+    summary?.top_vendors.reduce(
+      (max, v) => Math.max(max, v.amount),
+      0
+    ) ?? 1;
+
+  const txColumns: Column<Transaction>[] = [
+    { key: "date", label: "Date" },
+    {
+      key: "vendor",
+      label: "Vendor",
+      render: (row) => (
+        <span className="font-medium text-foreground">{row.vendor}</span>
+      ),
+    },
+    {
+      key: "amount",
+      label: "Amount",
+      render: (row) => (
+        <span className="text-foreground">
+          ${row.amount.toFixed(2)}
+        </span>
+      ),
+    },
+    { key: "category", label: "Category" },
+  ];
+
+  const categories = transactions
+    ? [...new Set(transactions.map((t) => t.category))]
+    : [];
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-lg font-semibold">Expenses</h1>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-3 gap-4">
+        <StatCard
+          label="Total Spend"
+          value={summary ? `$${summary.total.toFixed(2)}` : "\u2014"}
+          sub={summary?.month}
+        />
+        <StatCard
+          label="Transactions"
+          value={summary?.count ?? "\u2014"}
+          sub="this month"
+        />
+        <StatCard
+          label="Top Vendor"
+          value={
+            summary?.top_vendors?.[0]?.vendor ?? "\u2014"
+          }
+          sub={
+            summary?.top_vendors?.[0]
+              ? `$${summary.top_vendors[0].amount.toFixed(2)}`
+              : undefined
+          }
+        />
+      </div>
+
+      {/* Top Vendors Bar Chart */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Top Vendors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!summary ? (
+            <p className="text-xs text-muted-foreground">Loading...</p>
+          ) : (
+            <div className="space-y-2">
+              {summary.top_vendors.map((v) => (
+                <div key={v.vendor} className="space-y-1">
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-foreground">{v.vendor}</span>
+                    <span className="text-muted-foreground">
+                      ${v.amount.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="h-2 rounded-full bg-secondary overflow-hidden">
+                    <div
+                      className="h-full rounded-full bg-primary transition-all"
+                      style={{
+                        width: `${(v.amount / maxVendor) * 100}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Transactions Table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Transactions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable<Transaction>
+            data={transactions ?? []}
+            columns={txColumns}
+            searchKey="vendor"
+            filterKey="category"
+            filterOptions={categories}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

dashboard/ui/app/globals.css

@@ -0,0 +1,188 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --radius: 0.625rem;
+}
+
+.dark {
+  --background: hsl(222 47% 5%);
+  --foreground: hsl(210 40% 96%);
+  --card: hsl(217 33% 6%);
+  --card-foreground: hsl(210 40% 96%);
+  --popover: hsl(217 33% 6%);
+  --popover-foreground: hsl(210 40% 96%);
+  --primary: hsl(217 91% 60%);
+  --primary-foreground: hsl(210 40% 96%);
+  --secondary: hsl(217 33% 12%);
+  --secondary-foreground: hsl(210 40% 96%);
+  --muted: hsl(217 33% 12%);
+  --muted-foreground: hsl(215 20% 55%);
+  --accent: hsl(217 33% 12%);
+  --accent-foreground: hsl(210 40% 96%);
+  --destructive: hsl(0 84% 60%);
+  --border: hsl(217 33% 17%);
+  --input: hsl(217 33% 17%);
+  --ring: hsl(217 91% 60%);
+  --chart-1: hsl(217 91% 60%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar: hsl(217 33% 6%);
+  --sidebar-foreground: hsl(210 40% 96%);
+  --sidebar-primary: hsl(217 91% 60%);
+  --sidebar-primary-foreground: hsl(210 40% 96%);
+  --sidebar-accent: hsl(217 33% 12%);
+  --sidebar-accent-foreground: hsl(210 40% 96%);
+  --sidebar-border: hsl(217 33% 17%);
+  --sidebar-ring: hsl(217 91% 60%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+/* --- Visual Polish --- */
+
+/* Dot grid background */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background-image: radial-gradient(circle, hsl(217 33% 20%) 1px, transparent 1px);
+  background-size: 24px 24px;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* Subtle card gradient overlay */
+.card-glow {
+  background: linear-gradient(135deg, hsl(217 33% 8%) 0%, hsl(222 47% 6%) 100%);
+}
+
+/* Status dot glow */
+.glow-green { box-shadow: 0 0 6px 2px rgba(34, 197, 94, 0.4); }
+.glow-red { box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.4); }
+.glow-amber { box-shadow: 0 0 6px 2px rgba(245, 158, 11, 0.4); }
+.glow-blue { box-shadow: 0 0 6px 2px rgba(59, 130, 246, 0.4); }
+.glow-purple { box-shadow: 0 0 6px 2px rgba(168, 85, 247, 0.4); }
+
+/* Pulse animation for LIVE badge */
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.animate-live-pulse {
+  animation: live-pulse 2s ease-in-out infinite;
+}
+
+/* Slide-in animation for feed items */
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out forwards;
+}
+
+/* Shimmer animation for logo */
+@keyframes shimmer {
+  0% { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+.animate-shimmer {
+  background-size: 200% auto;
+  animation: shimmer 3s linear infinite;
+}
+
+/* Number transition */
+.tabular-nums-transition {
+  font-variant-numeric: tabular-nums;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* VRAM bar gradient animation */
+@keyframes bar-glow {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.2); }
+}
+.animate-bar-glow {
+  animation: bar-glow 2s ease-in-out infinite;
+}
+
+/* Card hover lift */
+.card-hover-lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.card-hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(59, 130, 246, 0.05);
+}
+
+/* Active nav glow */
+.nav-active-glow {
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}

dashboard/ui/app/infrastructure/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { usePoll } from "@/lib/use-poll";
+import type { Container, OverviewStats } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { DataTable, Column } from "@/components/data-table";
+import { ContainerLogsModal } from "@/components/container-logs-modal";
+import { StatusBadge } from "@/components/status-badge";
+import { postAPI } from "@/lib/api";
+
+interface OlaresPod {
+  name: string;
+  namespace: string;
+  status: string;
+  restarts: number;
+  age: string;
+}
+
+export default function InfrastructurePage() {
+  const { data: containers } = usePoll<Container[]>(
+    "/api/containers",
+    30000
+  );
+  const { data: overview } = usePoll<OverviewStats>(
+    "/api/stats/overview",
+    60000
+  );
+  const { data: pods } = usePoll<OlaresPod[]>("/api/olares/pods", 30000);
+
+  const [logsTarget, setLogsTarget] = useState<{
+    id: string;
+    name: string;
+    endpoint: string;
+  } | null>(null);
+
+  const endpoints = useMemo(() => {
+    if (!containers) return [];
+    return [...new Set(containers.map((c) => c.endpoint))];
+  }, [containers]);
+
+  const containerColumns: Column<Container>[] = [
+    {
+      key: "name",
+      label: "Name",
+      render: (row) => (
+        <span className="font-medium text-foreground">{row.name}</span>
+      ),
+    },
+    {
+      key: "state",
+      label: "State",
+      render: (row) => (
+        <StatusBadge
+          color={row.state === "running" ? "green" : "red"}
+          label={row.state}
+        />
+      ),
+    },
+    { key: "status", label: "Status" },
+    { key: "endpoint", label: "Endpoint" },
+    {
+      key: "image",
+      label: "Image",
+      render: (row) => (
+        <span className="truncate max-w-[200px] block">{row.image}</span>
+      ),
+    },
+  ];
+
+  const podColumns: Column<OlaresPod>[] = [
+    { key: "name", label: "Pod" },
+    { key: "namespace", label: "Namespace" },
+    {
+      key: "status",
+      label: "Status",
+      render: (row) => (
+        <StatusBadge
+          color={row.status === "Running" ? "green" : "amber"}
+          label={row.status}
+        />
+      ),
+    },
+    { key: "restarts", label: "Restarts" },
+    { key: "age", label: "Age" },
+  ];
+
+  const gpu = overview?.gpu;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-lg font-semibold">Infrastructure</h1>
+
+      {/* Container Table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Containers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable<Container>
+            data={containers ?? []}
+            columns={containerColumns}
+            searchKey="name"
+            filterKey="endpoint"
+            filterOptions={endpoints}
+            actions={(row) => (
+              <div className="flex gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-6 text-[10px] px-2"
+                  onClick={() =>
+                    setLogsTarget({
+                      id: row.id,
+                      name: row.name,
+                      endpoint: row.endpoint,
+                    })
+                  }
+                >
+                  Logs
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-6 text-[10px] px-2"
+                  onClick={() =>
+                    postAPI(
+                      `/api/containers/${row.endpoint}/${row.id}/restart`
+                    )
+                  }
+                >
+                  Restart
+                </Button>
+              </div>
+            )}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Row 2: Olares Pods + GPU */}
+      <div className="grid grid-cols-2 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Olares Pods</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable<OlaresPod>
+              data={pods ?? []}
+              columns={podColumns}
+              searchKey="name"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">GPU Status</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {!gpu ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : gpu.available ? (
+              <>
+                <p className="text-sm font-medium text-foreground">
+                  {gpu.name}
+                </p>
+                {gpu.vram_used_mb != null && gpu.vram_total_mb != null && (
+                  <div>
+                    <div className="flex justify-between text-xs text-muted-foreground mb-1">
+                      <span>VRAM</span>
+                      <span>
+                        {(gpu.vram_used_mb / 1024).toFixed(1)} /{" "}
+                        {(gpu.vram_total_mb / 1024).toFixed(1)} GB
+                      </span>
+                    </div>
+                    <div className="h-3 rounded-full bg-secondary overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-primary transition-all"
+                        style={{
+                          width: `${(gpu.vram_used_mb / gpu.vram_total_mb) * 100}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+                <div className="grid grid-cols-3 gap-4 text-xs">
+                  <div>
+                    <p className="text-muted-foreground">Temperature</p>
+                    <p className="text-foreground text-lg font-semibold">
+                      {gpu.temp_c ?? "\u2014"}&deg;C
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground">Power</p>
+                    <p className="text-foreground text-lg font-semibold">
+                      {gpu.power_w ?? "\u2014"}W
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground">Utilization</p>
+                    <p className="text-foreground text-lg font-semibold">
+                      {gpu.utilization_pct ?? "\u2014"}%
+                    </p>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <p className="text-xs text-muted-foreground">GPU not available</p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Logs Modal */}
+      <ContainerLogsModal
+        containerId={logsTarget?.id ?? null}
+        containerName={logsTarget?.name ?? ""}
+        endpoint={logsTarget?.endpoint ?? ""}
+        onClose={() => setLogsTarget(null)}
+      />
+    </div>
+  );
+}

dashboard/ui/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Nav } from "@/components/nav";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Homelab Dashboard",
+  description: "Infrastructure monitoring and management",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <Nav />
+        <main className="flex-1 p-6">{children}</main>
+      </body>
+    </html>
+  );
+}

dashboard/ui/app/media/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import { JellyfinCard } from "@/components/jellyfin-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "@/components/status-badge";
+
+interface QueueItem {
+  title: string;
+  status: string;
+  size?: string;
+  timeleft?: string;
+  progress?: number;
+}
+
+interface SonarrQueueItem {
+  title: string;
+  status: string;
+  sizeleft?: string;
+  timeleft?: string;
+}
+
+interface RadarrQueueItem {
+  title: string;
+  status: string;
+  sizeleft?: string;
+  timeleft?: string;
+}
+
+interface SabQueue {
+  slots: QueueItem[];
+  speed: string;
+  paused: boolean;
+}
+
+export default function MediaPage() {
+  const { data: sonarrRaw } = usePoll<Record<string, unknown>>("/api/sonarr/queue", 30000);
+  const { data: radarrRaw } = usePoll<Record<string, unknown>>("/api/radarr/queue", 30000);
+  const { data: sabRaw } = usePoll<Record<string, unknown>>("/api/sabnzbd/queue", 30000);
+  const sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
+  const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
+  const sab = sabRaw?.queue as SabQueue | undefined;
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-lg font-semibold">Media</h1>
+
+      <JellyfinCard />
+
+      <div className="grid grid-cols-3 gap-4">
+        {/* Sonarr Queue */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Sonarr Queue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!sonarr ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : sonarr.length === 0 ? (
+              <p className="text-xs text-muted-foreground">Queue empty</p>
+            ) : (
+              <div className="space-y-2">
+                {sonarr.map((item, i) => (
+                  <div key={i} className="text-xs space-y-0.5">
+                    <p className="text-foreground font-medium truncate">
+                      {item.title}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={
+                          item.status === "completed"
+                            ? "green"
+                            : item.status === "downloading"
+                              ? "blue"
+                              : "amber"
+                        }
+                        label={item.status}
+                      />
+                      {item.timeleft && (
+                        <span className="text-muted-foreground">
+                          {item.timeleft}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Radarr Queue */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Radarr Queue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!radarr ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : radarr.length === 0 ? (
+              <p className="text-xs text-muted-foreground">Queue empty</p>
+            ) : (
+              <div className="space-y-2">
+                {radarr.map((item, i) => (
+                  <div key={i} className="text-xs space-y-0.5">
+                    <p className="text-foreground font-medium truncate">
+                      {item.title}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={
+                          item.status === "completed"
+                            ? "green"
+                            : item.status === "downloading"
+                              ? "blue"
+                              : "amber"
+                        }
+                        label={item.status}
+                      />
+                      {item.timeleft && (
+                        <span className="text-muted-foreground">
+                          {item.timeleft}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* SABnzbd Queue */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">
+              SABnzbd Queue
+            </CardTitle>
+            {sab && (
+              <StatusBadge
+                color={sab.paused ? "amber" : "green"}
+                label={sab.paused ? "Paused" : sab.speed}
+              />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!sab ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : sab.slots.length === 0 ? (
+              <p className="text-xs text-muted-foreground">Queue empty</p>
+            ) : (
+              <div className="space-y-2">
+                {sab.slots.map((item, i) => (
+                  <div key={i} className="text-xs space-y-1">
+                    <p className="text-foreground font-medium truncate">
+                      {item.title}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={
+                          item.status === "Downloading" ? "blue" : "amber"
+                        }
+                        label={item.status}
+                      />
+                      {item.timeleft && (
+                        <span className="text-muted-foreground">
+                          {item.timeleft}
+                        </span>
+                      )}
+                    </div>
+                    {item.progress != null && (
+                      <div className="h-1 rounded-full bg-secondary overflow-hidden">
+                        <div
+                          className="h-full rounded-full bg-primary"
+                          style={{ width: `${item.progress}%` }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { OverviewStats } from "@/lib/types";
+import { StatCard } from "@/components/stat-card";
+import { ActivityFeed } from "@/components/activity-feed";
+import { JellyfinCard } from "@/components/jellyfin-card";
+import { OllamaCard } from "@/components/ollama-card";
+import { HostCard } from "@/components/host-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <h2 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+        {children}
+      </h2>
+      <div className="flex-1 h-px bg-gradient-to-r from-border to-transparent" />
+    </div>
+  );
+}
+
+export default function DashboardPage() {
+  const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
+
+  // Handle both API field name variants
+  const endpoints = data?.containers?.endpoints || data?.containers?.by_endpoint || {};
+  const rawEmail = data?.emails_today ?? data?.email_today ?? 0;
+  const emailCount = typeof rawEmail === "object" && rawEmail !== null ? (rawEmail as Record<string, number>).total ?? 0 : rawEmail;
+  const alertCount = data?.alerts ?? data?.unhealthy_count ?? 0;
+  const running = data?.containers?.running ?? Object.values(endpoints).reduce((s, e) => s + (e.running || 0), 0);
+  const hostsOnline = data?.hosts_online ?? Object.values(endpoints).filter(e => !e.error).length;
+
+  return (
+    <div className="space-y-6">
+      {/* Row 1: Stat Cards */}
+      <SectionHeading>Overview</SectionHeading>
+      <div className="grid grid-cols-5 gap-4">
+        <StatCard
+          label="Containers"
+          value={data ? `${running}/${data.containers.total}` : "\u2014"}
+          sub={data ? "running / total" : undefined}
+        />
+        <StatCard
+          label="Hosts Online"
+          value={data ? hostsOnline : "\u2014"}
+          sub="endpoints"
+        />
+        <StatCard
+          label="GPU"
+          value={
+            data?.gpu?.available
+              ? `${data.gpu.utilization_pct ?? 0}%`
+              : "\u2014"
+          }
+          sub={data?.gpu?.name ?? "unavailable"}
+        />
+        <StatCard
+          label="Emails Today"
+          value={data ? emailCount : "\u2014"}
+          sub="processed"
+        />
+        <StatCard
+          label="Alerts"
+          value={data ? alertCount : "\u2014"}
+          sub="active"
+        />
+      </div>
+
+      {/* Row 2: Activity + Jellyfin + Ollama */}
+      <SectionHeading>Live</SectionHeading>
+      <div className="grid grid-cols-5 gap-4">
+        <ActivityFeed />
+        <JellyfinCard />
+        <OllamaCard />
+      </div>
+
+      {/* Row 3: Hosts */}
+      <SectionHeading>Infrastructure</SectionHeading>
+      <Card className="overflow-hidden relative">
+        <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-emerald-500 to-cyan-500" />
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Hosts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-5 gap-3">
+            {data
+              ? Object.entries(endpoints).map(
+                  ([name, info]) => (
+                    <HostCard
+                      key={name}
+                      name={name}
+                      running={info.running}
+                      total={info.total}
+                      error={info.error}
+                    />
+                  )
+                )
+              : Array.from({ length: 5 }).map((_, i) => (
+                  <Card key={i}>
+                    <CardContent className="pt-3 pb-3 px-4">
+                      <p className="text-xs text-muted-foreground">
+                        Loading...
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}