Phase 24: Design System v2 — analytics-style UI (0.30.0)

- New /api/dashboard/funnel (5-stage stack health, 30s TTL cache) and
  /api/dashboard/summary (containers, daily uptime jsonl, ops activity)
- Token system (tokens.css + Tailwind sp-* aliases); legacy bg/card/accent
  remapped onto the tokens; Schibsted Grotesk bundled via fontsource
- TopNav pill navigation + AppShell replace the sidebar layout (off-canvas
  drawer below 1024px); central display-weight page titles
- Dashboard redesign: FunnelChart (gradient/hatch SVG waterfall), container
  count card with per-host bars + Insights chip, UptimeChart, OpsGrid,
  AiPromptBar; 30/7-day range selector; host sections retained below
- Stacks page honours ?q= / ?filter= deep links + new status-filter select

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/layout/TopNav.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useRef, useState } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import {
+  LayoutDashboard,
+  Boxes,
+  Network,
+  Image,
+  Database,
+  FolderTree,
+  LayoutTemplate,
+  ScrollText,
+  Settings,
+  Moon,
+  Sun,
+  LogOut,
+  Menu,
+  X,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAuthStore } from "@/store/auth";
+import { useThemeStore } from "@/store/theme";
+import { agentsApi } from "@/api/agents";
+
+export const NAV_ITEMS = [
+  { to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
+  { to: "/stacks", label: "Stacks", icon: Boxes },
+  { to: "/networks", label: "Networks", icon: Network },
+  { to: "/images", label: "Images", icon: Image },
+  { to: "/volumes", label: "Volumes", icon: Database },
+  { to: "/files", label: "Files", icon: FolderTree },
+  { to: "/templates", label: "Templates", icon: LayoutTemplate },
+  { to: "/audit", label: "Audit", icon: ScrollText },
+  { to: "/settings", label: "Settings", icon: Settings },
+];
+
+function LogoMark() {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
+      <defs>
+        <linearGradient id="sp-logo-grad" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="var(--sp-blue)" />
+          <stop offset="100%" stopColor="var(--sp-blue-light)" />
+        </linearGradient>
+      </defs>
+      <rect width="30" height="30" rx="9" fill="url(#sp-logo-grad)" />
+      {/* Stacked-layers glyph */}
+      <path
+        d="M15 7.5 22 11.25 15 15 8 11.25 15 7.5Z"
+        fill="#fff"
+        fillOpacity="0.95"
+      />
+      <path
+        d="M9.6 14.4 15 17.3l5.4-2.9L22 15.25 15 19 8 15.25l1.6-.85Z"
+        fill="#fff"
+        fillOpacity="0.6"
+      />
+      <path
+        d="M9.6 18.4 15 21.3l5.4-2.9L22 19.25 15 23 8 19.25l1.6-.85Z"
+        fill="#fff"
+        fillOpacity="0.32"
+      />
+    </svg>
+  );
+}
+
+function initials(name: string | undefined): string {
+  if (!name) return "?";
+  return name.slice(0, 2).toUpperCase();
+}
+
+export function TopNav() {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+  const user = useAuthStore((s) => s.user);
+  const logout = useAuthStore((s) => s.logout);
+  const { theme, toggle } = useThemeStore();
+
+  const agents = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => agentsApi.list(),
+    refetchInterval: 30000,
+  });
+  const agentCount = agents.data?.length ?? 0;
+  const agentsOnline = agents.data?.filter((a) => a.status === "online").length ?? 0;
+
+  // Close avatar menu on outside click.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [menuOpen]);
+
+  return (
+    <>
+      <header className="fixed inset-x-0 top-0 z-40 h-[60px] border-b border-sp-border bg-sp-bg/80 backdrop-blur-md">
+        <div className="mx-auto flex h-full max-w-[1480px] items-center gap-3 px-4 sm:px-6">
+          {/* Hamburger (mobile / narrow) */}
+          <button
+            onClick={() => setDrawerOpen(true)}
+            className="rounded-lg p-2 text-sp-text-2 hover:bg-sp-surface lg:hidden"
+            title="Open menu"
+            aria-label="Open navigation menu"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+
+          {/* Logo */}
+          <NavLink to="/" className="flex shrink-0 items-center gap-2.5">
+            <LogoMark />
+            <span className="sp-heading hidden text-[17px] sm:inline">StackPilot</span>
+          </NavLink>
+
+          {/* Pill nav */}
+          <nav
+            role="navigation"
+            aria-label="Primary"
+            className="mx-auto hidden items-center gap-0.5 rounded-pill border border-sp-border bg-sp-surface p-1 lg:flex"
+          >
+            {NAV_ITEMS.map(({ to, label, end }) => (
+              <NavLink key={to} to={to} end={end}>
+                {({ isActive }) => (
+                  <span
+                    aria-current={isActive ? "page" : undefined}
+                    className={cn(
+                      "block rounded-pill px-3.5 py-1.5 text-[13px] font-medium transition-colors",
+                      isActive
+                        ? "bg-sp-pill text-sp-pill-text"
+                        : "text-sp-text-2 hover:bg-sp-surface-2 hover:text-sp-text-1"
+                    )}
+                  >
+                    {label}
+                  </span>
+                )}
+              </NavLink>
+            ))}
+          </nav>
+
+          {/* Right cluster */}
+          <div className="ml-auto flex shrink-0 items-center gap-2 lg:ml-0">
+            <span className="sp-label hidden rounded-pill border border-sp-border bg-sp-surface px-2.5 py-1 sm:inline">
+              v{__APP_VERSION__}
+            </span>
+            {agentCount > 0 && (
+              <button
+                onClick={() => navigate("/settings")}
+                className="hidden items-center gap-1.5 rounded-pill border border-sp-border bg-sp-surface px-2.5 py-1 text-xs font-medium text-sp-text-2 hover:text-sp-text-1 sm:flex"
+                title={`${agentsOnline}/${agentCount} remote hosts online`}
+              >
+                <span
+                  className={cn(
+                    "h-2 w-2 rounded-full",
+                    agentsOnline === agentCount ? "bg-sp-green" : "bg-sp-amber"
+                  )}
+                />
+                {agentsOnline}/{agentCount}
+              </button>
+            )}
+            <button
+              onClick={toggle}
+              className="rounded-pill border border-sp-border bg-sp-surface p-2 text-sp-text-2 hover:text-sp-text-1"
+              title="Toggle theme"
+            >
+              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+            </button>
+            <div className="relative" ref={menuRef}>
+              <button
+                onClick={() => setMenuOpen((v) => !v)}
+                className="flex h-9 w-9 items-center justify-center rounded-full bg-sp-pill text-xs font-bold text-sp-pill-text"
+                title={user?.username}
+                aria-haspopup="menu"
+                aria-expanded={menuOpen}
+              >
+                {initials(user?.username)}
+              </button>
+              {menuOpen && (
+                <div className="sp-card absolute right-0 top-11 z-50 w-48 p-2 shadow-lg">
+                  <div className="px-3 py-2">
+                    <p className="truncate text-sm font-semibold text-sp-text-1">
+                      {user?.username ?? "—"}
+                    </p>
+                    {user?.role === "admin" && <p className="sp-label mt-0.5">admin</p>}
+                  </div>
+                  <button
+                    onClick={logout}
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-sp-text-2 hover:bg-sp-surface-2 hover:text-sp-text-1"
+                  >
+                    <LogOut className="h-4 w-4" />
+                    Logout
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Off-canvas drawer (narrow screens) */}
+      {drawerOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setDrawerOpen(false)}
+        />
+      )}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-64 transform flex-col bg-sp-surface transition-transform lg:hidden",
+          drawerOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+        aria-hidden={!drawerOpen}
+      >
+        <div className="flex items-center justify-between px-5 py-4">
+          <div className="flex items-center gap-2.5">
+            <LogoMark />
+            <span className="sp-heading text-[17px]">StackPilot</span>
+          </div>
+          <button
+            onClick={() => setDrawerOpen(false)}
+            className="rounded-lg p-1.5 text-sp-text-2 hover:bg-sp-surface-2"
+            title="Close menu"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <nav className="flex-1 space-y-1 overflow-y-auto px-3" aria-label="Primary">
+          {NAV_ITEMS.map(({ to, label, icon: Icon, end }) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={end}
+              onClick={() => setDrawerOpen(false)}
+              className={({ isActive }) =>
+                cn(
+                  "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-sp-pill text-sp-pill-text"
+                    : "text-sp-text-2 hover:bg-sp-surface-2 hover:text-sp-text-1"
+                )
+              }
+            >
+              <Icon className="h-5 w-5" />
+              {label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="border-t border-sp-border p-4">
+          <span className="sp-label">v{__APP_VERSION__}</span>
+        </div>
+      </aside>
+    </>
+  );
+}