🐛 fix: align dashboard with secured APIs

apps/web/app/bootstrap/page.tsx

@@ -2,21 +2,23 @@
 
 import { ArrowRight, Check } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { useEffect, useRef, useState } from "react";
 import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
 import { BrandMark } from "@/components/brand";
 import { FullScreenLoader } from "@/components/page-layout";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/lib/api-client";
+import { gsap, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
 
 export default function BootstrapPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [checkingStatus, setCheckingStatus] = useState(true);
   const [error, setError] = useState("");
+  const stageRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const checkStatus = async () => {
@@ -35,6 +37,27 @@ export default function BootstrapPage() {
     checkStatus();
   }, [router]);
 
+  useGSAP(
+    () => {
+      const root = stageRef.current;
+      if (!root || prefersReducedMotion()) return;
+
+      gsap.fromTo(
+        root,
+        { y: 28, autoAlpha: 0 },
+        { y: 0, autoAlpha: 1, duration: 0.65, ease: motionEase.out }
+      );
+
+      const panelItems = root.querySelectorAll("[data-boot-item]");
+      gsap.fromTo(
+        panelItems,
+        { y: 16, autoAlpha: 0 },
+        { y: 0, autoAlpha: 1, duration: 0.5, stagger: 0.07, delay: 0.12, ease: motionEase.out }
+      );
+    },
+    { scope: stageRef }
+  );
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
@@ -85,10 +108,16 @@ export default function BootstrapPage() {
   return (
     <main className="auth-grid relative flex min-h-screen items-center justify-center bg-sidebar p-5 sm:p-10">
       <ThemeToggle className="absolute top-5 right-5 sm:top-8 sm:right-8" />
-      <div className="grid w-full max-w-5xl overflow-hidden border border-sidebar-border bg-background text-foreground shadow-[12px_12px_0_color-mix(in_oklch,var(--sidebar-primary)_18%,transparent)] lg:grid-cols-[0.8fr_1.2fr]">
-        <section className="flex flex-col justify-between bg-primary p-8 text-primary-foreground sm:p-10">
+      <div
+        ref={stageRef}
+        className="grid w-full max-w-5xl overflow-hidden border border-sidebar-border bg-background text-foreground shadow-[12px_12px_0_color-mix(in_oklch,var(--sidebar-primary)_18%,transparent)] lg:grid-cols-[0.8fr_1.2fr]"
+      >
+        <section className="relative flex flex-col justify-between overflow-hidden bg-primary p-8 text-primary-foreground sm:p-10">
+          <div className="auth-scanlines pointer-events-none absolute inset-0 opacity-40" />
+          <div data-boot-item="">
             <BrandMark inverted />
-          <div className="my-16">
+          </div>
+          <div className="my-16" data-boot-item="">
             <span className="page-eyebrow text-primary-foreground/60">System bootstrap / 01</span>
             <h1 className="text-5xl font-black uppercase leading-[0.9] tracking-[-0.055em]">
               Build your command center.
@@ -98,13 +127,13 @@ export default function BootstrapPage() {
             </p>
           </div>
           <div className="space-y-3 font-mono text-[10px] font-bold uppercase tracking-[0.12em]">
-            <p className="flex items-center gap-2">
+            <p className="flex items-center gap-2" data-boot-item="">
               <Check className="size-3" /> Admin authority
             </p>
-            <p className="flex items-center gap-2">
+            <p className="flex items-center gap-2" data-boot-item="">
               <Check className="size-3" /> Secure session
             </p>
-            <p className="flex items-center gap-2">
+            <p className="flex items-center gap-2" data-boot-item="">
               <Check className="size-3" /> Ready in one step
             </p>
           </div>

apps/web/app/dashboard/k8s/page.tsx

@@ -150,7 +150,7 @@ export default function K8sResourcesPage() {
         {pageHeader}
         <StatePanel
           title="Kubernetes not connected"
-          icon={<AlertCircle className="size-6 text-yellow-500" />}
+          icon={<AlertCircle className="size-6 text-warning" />}
           description={
             <>
               <p>Ensure the operator is running with a valid Kubernetes configuration.</p>

apps/web/app/dashboard/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default function DashboardPage() {
-  redirect("/dashboard/users");
+  redirect("/dashboard/servers");
 }

apps/web/app/dashboard/servers/edit/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { NormalServer, UpdateServerRequest } from "@minikura/api";
+import type { NormalServer, ReverseProxyServer, UpdateServerRequest } from "@minikura/api";
 import { ArrowLeft } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -19,6 +19,7 @@ export default function EditServerPage() {
 
   const [loading, setLoading] = useState(true);
   const [serverData, setServerData] = useState<NormalServer | null>(null);
+  const [resourceKind, setResourceKind] = useState<"server" | "proxy">("server");
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -32,6 +33,7 @@ export default function EditServerPage() {
           const server = servers.find((s) => s.id === serverId);
           if (server) {
             setServerData(server);
+            setResourceKind("server");
             setLoading(false);
             return;
           }
@@ -39,10 +41,11 @@ export default function EditServerPage() {
 
         const proxyResponse = await getReverseProxyApi().get();
         if (proxyResponse.data) {
-          const proxies = proxyResponse.data as unknown as NormalServer[];
+          const proxies = proxyResponse.data as unknown as ReverseProxyServer[];
           const proxy = proxies.find((p) => p.id === serverId);
           if (proxy) {
-            setServerData(proxy);
+            setServerData(proxy as unknown as NormalServer);
+            setResourceKind("proxy");
             setLoading(false);
             return;
           }
@@ -66,7 +69,18 @@ export default function EditServerPage() {
 
     const payload: UpdateServerRequest = toCommonServerRequestFields(data);
 
-    const response = await api.api.servers({ id: serverId }).patch(payload);
+    const response =
+      resourceKind === "server"
+        ? await api.api.servers({ id: serverId }).patch(payload)
+        : await getReverseProxyApi()({ id: serverId }).patch({
+            description: payload.description,
+            listen_port: payload.listen_port,
+            service_type: payload.service_type,
+            node_port: payload.node_port,
+            memory: payload.memory,
+            cpu_request: payload.cpu_request,
+            cpu_limit: payload.cpu_limit,
+          });
 
     if (response.error) {
       const errorMsg =
@@ -95,10 +109,7 @@ export default function EditServerPage() {
         tone="error"
         className="min-h-[50vh]"
         action={
-          <Button
-            variant="outline"
-            onClick={() => router.push("/dashboard/servers")}
-          >
+          <Button variant="outline" onClick={() => router.push("/dashboard/servers")}>
             <ArrowLeft className="size-4" />
             Back to Servers
           </Button>

apps/web/app/dashboard/servers/page.tsx

@@ -9,9 +9,12 @@ import { ResourceSection } from "@/components/section-card";
 import { ServerTable } from "@/components/servers/server-table";
 import { Button } from "@/components/ui/button";
 import { useServerList } from "@/hooks/use-server-list";
+import { useSession } from "@/lib/auth-client";
 
 export default function ServersPage() {
   const router = useRouter();
+  const { data: session } = useSession();
+  const isAdmin = session?.user.role === "admin";
   const { normalServers, reverseProxies, loading, error, deleteServer } = useServerList();
   const [deleteTarget, setDeleteTarget] = useState<{
     id: string;
@@ -34,10 +37,12 @@ export default function ServersPage() {
         title="Servers"
         description="Provision Minecraft runtimes and route traffic through edge proxies."
         actions={
+          isAdmin ? (
             <Button size="lg" onClick={() => router.push("/dashboard/servers/create")}>
               <Plus className="size-4" />
               Create Server
             </Button>
+          ) : undefined
         }
       />
 
@@ -59,8 +64,8 @@ export default function ServersPage() {
             <ServerTable
               type="normal"
               servers={normalServers}
-              onEdit={(id) => router.push(`/dashboard/servers/edit/${id}`)}
-              onDelete={(id) => setDeleteTarget({ id, type: "normal" })}
+              onEdit={isAdmin ? (id) => router.push(`/dashboard/servers/edit/${id}`) : undefined}
+              onDelete={isAdmin ? (id) => setDeleteTarget({ id, type: "normal" }) : undefined}
             />
           </ResourceSection>
 
@@ -76,8 +81,8 @@ export default function ServersPage() {
             <ServerTable
               type="proxy"
               servers={reverseProxies}
-              onEdit={(id) => router.push(`/dashboard/servers/edit/${id}`)}
-              onDelete={(id) => setDeleteTarget({ id, type: "proxy" })}
+              onEdit={isAdmin ? (id) => router.push(`/dashboard/servers/edit/${id}`) : undefined}
+              onDelete={isAdmin ? (id) => setDeleteTarget({ id, type: "proxy" }) : undefined}
             />
           </ResourceSection>
         </>

apps/web/app/dashboard/topology/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { Network } from "lucide-react";
+import { Network, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { PageHeader, PageShell, StatePanel } from "@/components/page-layout";
 import { TopologyCanvas } from "@/components/topology/topology-canvas";
 import { useTopologyData } from "@/hooks/use-topology-data";
 
 export default function TopologyPage() {
-  const { graph, loading, error } = useTopologyData();
+  const { graph, loading, error, refreshing, refresh } = useTopologyData();
 
   const header = (
     <PageHeader
@@ -25,8 +26,12 @@ export default function TopologyPage() {
     <PageShell>
       {header}
       {loading ? (
-        <StatePanel loading title="Loading topology..." className="h-[calc(100vh-250px)]" />
-      ) : error ? (
+        <StatePanel
+          loading
+          title="Loading topology..."
+          className="h-[70vh] sm:h-[calc(100vh-250px)]"
+        />
+      ) : error && !graph ? (
         <StatePanel
           title="Error loading topology"
           description={
@@ -36,16 +41,33 @@ export default function TopologyPage() {
             </>
           }
           tone="error"
-          className="h-[calc(100vh-250px)]"
+          className="h-[70vh] sm:h-[calc(100vh-250px)]"
+          action={<Button onClick={() => void refresh()}>Retry now</Button>}
         />
       ) : !graph || graph.nodes.length === 0 ? (
         <StatePanel
           title="No infrastructure found"
           description="Create a server to see it appear in the topology."
-          className="h-[calc(100vh-250px)]"
+          className="h-[70vh] sm:h-[calc(100vh-250px)]"
         />
       ) : (
+        <div className="space-y-3">
+          {error && (
+            <div className="flex flex-col gap-2 border border-destructive/40 bg-destructive/10 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+              <span>Refresh failed: {error}. Showing the last successful topology.</span>
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={refreshing}
+                onClick={() => void refresh(true)}
+              >
+                <RefreshCw className={refreshing ? "animate-spin" : undefined} />
+                Retry
+              </Button>
+            </div>
+          )}
           <TopologyCanvas graph={graph} />
+        </div>
       )}
     </PageShell>
   );

apps/web/app/dashboard/users/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { Ban, CheckCircle, Edit, ShieldCheck, Trash2, UserRoundCheck, Users } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { getErrorMessage } from "@minikura/shared/errors";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ConfirmDialog } from "@/components/confirm-dialog";
 import { DataTable, type DataTableColumn } from "@/components/data-table";
 import { PageHeader, PageShell, StatePanel } from "@/components/page-layout";
@@ -36,12 +37,27 @@ type User = {
   name: string;
   email: string;
   role: string;
-  createdAt: Date;
+  createdAt: Date | string;
   emailVerified: boolean;
   isSuspended: boolean;
-  suspendedUntil: Date | null;
+  banned: boolean;
+  suspendedUntil: Date | string | null;
 };
 
+function formatDateTime(value: Date | string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZoneName: "short",
+  }).format(new Date(value));
+}
+
+function localDateTimeMinimum(): string {
+  const now = new Date(Date.now() + 60_000);
+  const local = new Date(now.getTime() - now.getTimezoneOffset() * 60_000);
+  return local.toISOString().slice(0, 16);
+}
+
 export default function UsersPage() {
   const { data: session } = useSession();
   const [users, setUsers] = useState<User[]>([]);
@@ -49,16 +65,23 @@ export default function UsersPage() {
   const [editingUser, setEditingUser] = useState<User | null>(null);
   const [suspendingUser, setSuspendingUser] = useState<User | null>(null);
   const [deleteUser, setDeleteUser] = useState<User | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingAction, setPendingAction] = useState<string | null>(null);
+  const fetchSequence = useRef(0);
 
   const fetchUsers = useCallback(async () => {
+    const sequence = ++fetchSequence.current;
+    setLoading(true);
+    setError(null);
     try {
       const { data, error } = await api.api.users.get();
-      if (!error && data) {
-        setUsers(data);
-      }
-    } catch (_error) {
+      if (error) throw error;
+      if (!data) throw new Error("The user directory returned no data");
+      if (sequence === fetchSequence.current) setUsers(data);
+    } catch (requestError) {
+      if (sequence === fetchSequence.current) setError(getErrorMessage(requestError));
     } finally {
-      setLoading(false);
+      if (sequence === fetchSequence.current) setLoading(false);
     }
   }, []);
 
@@ -72,19 +95,32 @@ export default function UsersPage() {
 
     const formData = new FormData(e.currentTarget);
     const name = formData.get("name") as string;
-    const role = formData.get("role") as string;
+    const role =
+      editingUser.id === session?.user?.id
+        ? editingUser.role
+        : String(formData.get("role") || editingUser.role);
 
+    if (editingUser.id === session?.user?.id && role !== "admin") {
+      setError("You cannot remove your own administrator access.");
+      return;
+    }
+
+    setPendingAction(`edit:${editingUser.id}`);
+    setError(null);
     try {
       const { error } = await api.api.users({ id: editingUser.id }).patch({
         name,
         role: role as "admin" | "user",
       });
 
-      if (!error) {
-        await fetchUsers();
+      if (error) throw error;
       setEditingUser(null);
+      await fetchUsers();
+    } catch (requestError) {
+      setError(getErrorMessage(requestError));
+    } finally {
+      setPendingAction(null);
     }
-    } catch (_error) {}
   };
 
   const handleSuspend = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -94,46 +130,81 @@ export default function UsersPage() {
     const formData = new FormData(e.currentTarget);
     const suspendedUntil = formData.get("suspendedUntil") as string;
 
+    if (suspendingUser.id === session?.user?.id) {
+      setError("You cannot suspend your own account.");
+      return;
+    }
+
+    const suspensionDate = suspendedUntil ? new Date(suspendedUntil) : null;
+    if (
+      suspensionDate &&
+      (Number.isNaN(suspensionDate.getTime()) || suspensionDate <= new Date())
+    ) {
+      setError("Suspension end time must be in the future.");
+      return;
+    }
+
+    setPendingAction(`suspend:${suspendingUser.id}`);
+    setError(null);
     try {
       const { error } = await getUserApi(suspendingUser.id).suspension.patch({
         isSuspended: true,
-        suspendedUntil: suspendedUntil || null,
+        suspendedUntil: suspensionDate?.toISOString() || null,
       });
 
-      if (!error) {
-        await fetchUsers();
+      if (error) throw error;
       setSuspendingUser(null);
+      await fetchUsers();
+    } catch (requestError) {
+      setError(getErrorMessage(requestError));
+    } finally {
+      setPendingAction(null);
     }
-    } catch (_error) {}
   };
 
   const handleUnsuspend = async (userId: string) => {
+    setPendingAction(`unsuspend:${userId}`);
+    setError(null);
     try {
       const { error } = await getUserApi(userId).suspension.patch({
         isSuspended: false,
         suspendedUntil: null,
       });
 
-      if (!error) {
+      if (error) throw error;
       await fetchUsers();
+    } catch (requestError) {
+      setError(getErrorMessage(requestError));
+    } finally {
+      setPendingAction(null);
     }
-    } catch (_error) {}
   };
 
   const handleDelete = async () => {
     if (!deleteUser) return;
+    if (deleteUser.id === session?.user?.id) {
+      setError("You cannot delete your own account.");
+      setDeleteUser(null);
+      return;
+    }
 
+    setPendingAction(`delete:${deleteUser.id}`);
+    setError(null);
     try {
       const { error } = await api.api.users({ id: deleteUser.id }).delete();
 
-      if (!error) {
-        await fetchUsers();
+      if (error) throw error;
       setDeleteUser(null);
+      await fetchUsers();
+    } catch (requestError) {
+      setError(getErrorMessage(requestError));
+    } finally {
+      setPendingAction(null);
     }
-    } catch (_error) {}
   };
 
   const isUserSuspended = (user: User): boolean => {
+    if (user.banned) return true;
     if (!user.isSuspended) return false;
     if (user.suspendedUntil && new Date(user.suspendedUntil) <= new Date()) {
       return false;
@@ -162,8 +233,8 @@ export default function UsersPage() {
       cell: (user) =>
         isUserSuspended(user) ? (
           <StatusBadge tone="error">
-            Suspended
-            {user.suspendedUntil && ` until ${new Date(user.suspendedUntil).toLocaleDateString()}`}
+            {user.banned ? "Banned" : "Suspended"}
+            {!user.banned && user.suspendedUntil && ` until ${formatDateTime(user.suspendedUntil)}`}
           </StatusBadge>
         ) : (
           <StatusBadge tone={user.emailVerified ? "success" : "warning"}>
@@ -187,15 +258,17 @@ export default function UsersPage() {
           <Button
             variant="ghost"
             size="icon"
+            disabled={pendingAction !== null}
             onClick={() => setEditingUser(user)}
             aria-label={`Edit ${user.name}`}
           >
             <Edit />
           </Button>
-          {isUserSuspended(user) ? (
+          {user.banned ? null : isUserSuspended(user) ? (
             <Button
               variant="ghost"
               size="icon"
+              disabled={pendingAction !== null}
               onClick={() => handleUnsuspend(user.id)}
               aria-label={`Restore ${user.name}`}
             >
@@ -205,6 +278,7 @@ export default function UsersPage() {
             <Button
               variant="ghost"
               size="icon"
+              disabled={user.id === session?.user?.id || pendingAction !== null}
               onClick={() => setSuspendingUser(user)}
               aria-label={`Suspend ${user.name}`}
             >
@@ -214,7 +288,7 @@ export default function UsersPage() {
           <Button
             variant="ghost"
             size="icon"
-            disabled={user.id === session?.user?.id}
+            disabled={user.id === session?.user?.id || pendingAction !== null}
             onClick={() => setDeleteUser(user)}
             aria-label={`Delete ${user.name}`}
           >
@@ -253,6 +327,18 @@ export default function UsersPage() {
         }
       />
 
+      {error && !loading && (
+        <div
+          role="alert"
+          className="flex flex-col gap-3 border border-destructive/50 bg-destructive/10 p-4 text-sm sm:flex-row sm:items-center sm:justify-between"
+        >
+          <span>{error}</span>
+          <Button variant="outline" size="sm" onClick={() => void fetchUsers()}>
+            Retry
+          </Button>
+        </div>
+      )}
+
       {loading ? (
         <StatePanel loading title="Loading directory..." className="h-64" />
       ) : (
@@ -278,7 +364,11 @@ export default function UsersPage() {
               </div>
               <div className="space-y-2">
                 <Label htmlFor="role">Role</Label>
-                <Select name="role" defaultValue={editingUser?.role}>
+                <Select
+                  name="role"
+                  defaultValue={editingUser?.role}
+                  disabled={editingUser?.id === session?.user?.id}
+                >
                   <SelectTrigger>
                     <SelectValue />
                   </SelectTrigger>
@@ -293,7 +383,9 @@ export default function UsersPage() {
               <Button type="button" variant="outline" onClick={() => setEditingUser(null)}>
                 Cancel
               </Button>
-              <Button type="submit">Save Changes</Button>
+              <Button type="submit" disabled={pendingAction !== null}>
+                Save Changes
+              </Button>
             </DialogFooter>
           </form>
         </DialogContent>
@@ -315,6 +407,7 @@ export default function UsersPage() {
                   id="suspendedUntil"
                   name="suspendedUntil"
                   type="datetime-local"
+                  min={localDateTimeMinimum()}
                   placeholder="Leave empty for indefinite suspension"
                 />
                 <p className="text-sm text-muted-foreground">
@@ -326,7 +419,7 @@ export default function UsersPage() {
               <Button type="button" variant="outline" onClick={() => setSuspendingUser(null)}>
                 Cancel
               </Button>
-              <Button type="submit" variant="destructive">
+              <Button type="submit" variant="destructive" disabled={pendingAction !== null}>
                 Suspend User
               </Button>
             </DialogFooter>

apps/web/app/globals.css

@@ -26,10 +26,13 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -69,10 +72,13 @@
   --accent: oklch(0.88 0.04 112);
   --accent-foreground: oklch(0.2 0.028 110);
   --destructive: oklch(0.57 0.205 28);
+  --destructive-foreground: oklch(0.99 0.005 28);
   --success: oklch(0.59 0.155 132);
   --success-foreground: oklch(0.28 0.09 132);
   --warning: oklch(0.72 0.15 76);
   --warning-foreground: oklch(0.34 0.09 66);
+  --info: oklch(0.52 0.12 230);
+  --info-foreground: oklch(0.3 0.07 230);
   --border: oklch(0.79 0.018 90);
   --input: oklch(0.76 0.02 90);
   --ring: oklch(0.68 0.19 125);
@@ -93,41 +99,44 @@
 }
 
 .dark {
-  --background: oklch(0.16 0.018 75);
-  --foreground: oklch(0.94 0.012 95);
-  --card: oklch(0.21 0.018 75);
-  --card-foreground: oklch(0.94 0.012 95);
-  --popover: oklch(0.19 0.018 75);
-  --popover-foreground: oklch(0.94 0.012 95);
-  --primary: oklch(0.75 0.205 125);
-  --primary-foreground: oklch(0.15 0.025 125);
-  --secondary: oklch(0.26 0.02 80);
-  --secondary-foreground: oklch(0.94 0.012 95);
-  --muted: oklch(0.24 0.016 80);
-  --muted-foreground: oklch(0.72 0.018 90);
-  --accent: oklch(0.28 0.04 112);
-  --accent-foreground: oklch(0.92 0.03 110);
-  --destructive: oklch(0.68 0.19 28);
-  --success: oklch(0.72 0.155 132);
-  --success-foreground: oklch(0.22 0.06 132);
-  --warning: oklch(0.78 0.14 76);
-  --warning-foreground: oklch(0.28 0.08 66);
-  --border: oklch(0.35 0.02 80);
-  --input: oklch(0.32 0.02 80);
-  --ring: oklch(0.75 0.205 125);
-  --chart-1: oklch(0.75 0.205 125);
-  --chart-2: oklch(0.66 0.16 205);
-  --chart-3: oklch(0.72 0.17 80);
-  --chart-4: oklch(0.62 0.16 50);
-  --chart-5: oklch(0.58 0.14 300);
-  --sidebar: oklch(0.13 0.018 75);
-  --sidebar-foreground: oklch(0.91 0.015 95);
-  --sidebar-primary: oklch(0.75 0.205 125);
-  --sidebar-primary-foreground: oklch(0.15 0.025 125);
-  --sidebar-accent: oklch(0.22 0.022 80);
-  --sidebar-accent-foreground: oklch(0.96 0.01 95);
-  --sidebar-border: oklch(0.28 0.022 80);
-  --sidebar-ring: oklch(0.75 0.205 125);
+  --background: oklch(0.175 0.012 152);
+  --foreground: oklch(0.93 0.014 105);
+  --card: oklch(0.215 0.012 152);
+  --card-foreground: oklch(0.93 0.014 105);
+  --popover: oklch(0.2 0.012 152);
+  --popover-foreground: oklch(0.93 0.014 105);
+  --primary: oklch(0.79 0.165 128);
+  --primary-foreground: oklch(0.18 0.04 128);
+  --secondary: oklch(0.255 0.014 152);
+  --secondary-foreground: oklch(0.9 0.012 110);
+  --muted: oklch(0.24 0.012 152);
+  --muted-foreground: oklch(0.7 0.02 130);
+  --accent: oklch(0.27 0.03 140);
+  --accent-foreground: oklch(0.93 0.03 120);
+  --destructive: oklch(0.72 0.16 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+  --success: oklch(0.76 0.13 148);
+  --success-foreground: oklch(0.2 0.05 148);
+  --warning: oklch(0.82 0.12 88);
+  --warning-foreground: oklch(0.24 0.06 80);
+  --info: oklch(0.76 0.1 220);
+  --info-foreground: oklch(0.86 0.04 220);
+  --border: oklch(0.3 0.016 150);
+  --input: oklch(0.28 0.016 150);
+  --ring: oklch(0.79 0.165 128);
+  --chart-1: oklch(0.79 0.165 128);
+  --chart-2: oklch(0.72 0.12 210);
+  --chart-3: oklch(0.8 0.12 88);
+  --chart-4: oklch(0.7 0.12 55);
+  --chart-5: oklch(0.68 0.1 300);
+  --sidebar: oklch(0.135 0.014 155);
+  --sidebar-foreground: oklch(0.9 0.012 110);
+  --sidebar-primary: oklch(0.79 0.165 128);
+  --sidebar-primary-foreground: oklch(0.18 0.04 128);
+  --sidebar-accent: oklch(0.21 0.02 150);
+  --sidebar-accent-foreground: oklch(0.95 0.01 110);
+  --sidebar-border: oklch(0.24 0.016 150);
+  --sidebar-ring: oklch(0.79 0.165 128);
   color-scheme: dark;
 }
 
@@ -146,6 +155,11 @@
       linear-gradient(to bottom, color-mix(in oklch, var(--border) 22%, transparent) 1px, transparent 1px);
     background-size: 32px 32px;
   }
+  .dark body {
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, var(--border) 12%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, var(--border) 12%, transparent) 1px, transparent 1px);
+  }
   h1,
   h2,
   h3 {
@@ -185,6 +199,16 @@
     background-size: 36px 36px;
   }
 
+  .auth-scanlines {
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent 2px,
+      color-mix(in oklch, white 6%, transparent) 3px
+    );
+    mix-blend-mode: overlay;
+  }
+
   .server-form [data-slot="tabs-content"] {
     @apply border border-border bg-background/65 p-4 sm:p-6;
   }

apps/web/app/login/page.tsx

@@ -2,15 +2,111 @@
 
 import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { useEffect, useRef, useState } from "react";
 import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
-import { BrandLockup } from "@/components/brand";
+import { BrandLockup, BrandMark } from "@/components/brand";
 import { FullScreenLoader } from "@/components/page-layout";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient, signIn, useSession } from "@/lib/auth-client";
+import { gsap, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
+
+function LoginHero() {
+  const heroRef = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const root = heroRef.current;
+      if (!root || prefersReducedMotion()) return;
+
+      const bg = root.querySelector("[data-hero-bg]");
+      const brand = root.querySelector("[data-hero-brand]");
+      const chip = root.querySelector("[data-hero-chip]");
+      const lines = root.querySelectorAll("[data-hero-line]");
+      const copy = root.querySelector("[data-hero-copy]");
+      const foot = root.querySelector("[data-hero-foot]");
+      const rail = root.querySelector("[data-hero-rail]");
+
+      const tl = gsap.timeline({ defaults: { ease: motionEase.out } });
+      tl.from(bg, { scale: 1.12, duration: 1.2, ease: "power2.out" }, 0)
+        .from(rail, { scaleY: 0, duration: 0.6, transformOrigin: "top" }, 0.05)
+        .from(brand, { y: -12, autoAlpha: 0, duration: 0.45 }, 0.08)
+        .from(chip, { y: 14, autoAlpha: 0, duration: 0.4 }, 0.16)
+        .from(lines, { yPercent: 110, duration: 0.7, stagger: 0.08, ease: motionEase.snap }, 0.2)
+        .from(copy, { y: 14, autoAlpha: 0, duration: 0.45 }, 0.42)
+        .from(foot, { autoAlpha: 0, duration: 0.35 }, 0.55);
+
+      gsap.to(bg, {
+        scale: 1.06,
+        duration: 18,
+        ease: "none",
+        yoyo: true,
+        repeat: -1,
+        delay: 1.2,
+      });
+    },
+    { scope: heroRef }
+  );
+
+  return (
+    <section
+      ref={heroRef}
+      className="relative flex min-h-[42vh] flex-col justify-between overflow-hidden border-b border-sidebar-border p-6 sm:min-h-[48vh] sm:p-10 lg:min-h-screen lg:border-r lg:border-b-0 xl:p-16"
+    >
+      <div
+        data-hero-bg=""
+        className="absolute inset-0 origin-center bg-[url('/background.png')] bg-cover bg-center will-change-transform"
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-black/25" />
+      <div className="auth-scanlines pointer-events-none absolute inset-0" />
+      <div
+        data-hero-rail=""
+        className="absolute top-0 bottom-0 left-0 w-1 origin-top bg-sidebar-primary"
+      />
+
+      <div data-hero-brand="" className="relative z-10">
+        <BrandLockup subtitle="Minecraft control plane" />
+      </div>
+
+      <div className="relative z-10 max-w-2xl py-10 lg:py-20">
+        <span
+          data-hero-chip=""
+          className="mb-5 inline-flex items-center gap-2 border border-sidebar-border bg-sidebar-accent px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em]"
+        >
+          <span className="size-2 bg-sidebar-primary" />
+          Minecraft Control Plane
+        </span>
+        <h1 className="text-4xl font-black uppercase leading-[0.86] tracking-[-0.065em] sm:text-6xl xl:text-8xl">
+          <span className="block overflow-hidden">
+            <span data-hero-line="" className="block">
+              Play more
+            </span>
+          </span>
+          <span className="block overflow-hidden">
+            <span data-hero-line="" className="block text-sidebar-primary">
+              Operate less
+            </span>
+          </span>
+        </h1>
+        <p
+          data-hero-copy=""
+          className="mt-6 max-w-lg text-sm leading-7 text-sidebar-foreground/55 sm:mt-7 sm:text-base"
+        >
+          Spin up servers, route players, and run the whole network from one console.
+        </p>
+      </div>
+
+      <p
+        data-hero-foot=""
+        className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35"
+      >
+        Built for people who actually run servers
+      </p>
+    </section>
+  );
+}
 
 export default function LoginPage() {
   const router = useRouter();
@@ -47,7 +143,9 @@ export default function LoginPage() {
         });
 
         if (!refreshedSession.data?.user) {
-          setError("Signed in, but the session cookie was not accepted. Check the web and API URLs.");
+          setError(
+            "Signed in, but the session cookie was not accepted. Check the web and API URLs."
+          );
           return;
         }
 
@@ -64,38 +162,16 @@ export default function LoginPage() {
 
   return (
     <main className="grid min-h-screen bg-sidebar text-sidebar-foreground lg:grid-cols-[1.2fr_0.8fr]">
-      <section className="relative hidden overflow-hidden border-r border-sidebar-border bg-[url('/background.png')] bg-cover bg-center p-10 lg:flex lg:flex-col lg:justify-between xl:p-16">
-        <div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-black/20" />
-        <BrandLockup subtitle="Infrastructure console" className="relative z-10" />
-
-        <div className="relative z-10 max-w-2xl py-20">
-          <span className="mb-5 inline-flex items-center gap-2 border border-sidebar-border bg-sidebar-accent px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em]">
-            <span className="size-2 bg-sidebar-primary" /> Minecraft operations platform
-          </span>
-          <h1 className="text-6xl font-black uppercase leading-[0.86] tracking-[-0.065em] xl:text-8xl">
-            Orchestrate
-            <br />
-            <span className="text-sidebar-primary">Every World.</span>
-          </h1>
-          <p className="mt-7 max-w-lg text-base leading-7 text-sidebar-foreground/55">
-            Provision servers, manage proxy routes, and monitor Kubernetes workloads from a single
-            operational interface.
-          </p>
-        </div>
-
-        <p className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35">
-          Server and cluster administration
-        </p>
-      </section>
+      <LoginHero />
 
       <section className="relative flex items-center justify-center bg-background p-5 text-foreground sm:p-10">
-        <ThemeToggle className="absolute top-5 right-5 sm:top-8 sm:right-8" />
+        <ThemeToggle className="absolute top-5 right-5 z-10 sm:top-8 sm:right-8" />
         <AuthFormCard
-          title="Sign In"
-          description="Use your administrator account to access Minikura."
-          className="border-2 border-foreground shadow-none"
+          title="Sign in"
+          description="Use your administrator account to access the console."
+          leading={<BrandMark className="size-10" />}
+          className="border-2 border-foreground shadow-[8px_8px_0_color-mix(in_oklch,var(--foreground)_18%,transparent)]"
           headerClassName="border-b"
-          contentClassName="pt-2"
         >
           <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">

apps/web/components/auth/auth-form-card.tsx

@@ -1,11 +1,15 @@
+"use client";
+
 import type * as React from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { FadeIn, Stagger, useShake } from "@/components/motion";
+import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/cn";
 
 type AuthFormCardProps = {
   title: string;
   description: string;
   children: React.ReactNode;
+  leading?: React.ReactNode;
   className?: string;
   headerClassName?: string;
   contentClassName?: string;
@@ -15,26 +19,45 @@ export function AuthFormCard({
   title,
   description,
   children,
+  leading,
   className,
   headerClassName,
   contentClassName,
 }: AuthFormCardProps) {
   return (
-    <Card className={cn("w-full max-w-md", className)}>
-      <CardHeader className={cn("space-y-3", headerClassName)}>
-        <CardTitle className="text-3xl tracking-[-0.035em]">{title}</CardTitle>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent className={contentClassName}>{children}</CardContent>
+    <FadeIn y={20} x={12} duration={0.65} className="flex w-full justify-center">
+      <Card className={cn("w-full max-w-md gap-0 overflow-hidden py-6", className)}>
+        <header className={cn("px-5 pb-6 sm:px-6", headerClassName)}>
+          <div className={cn(leading && "flex items-start gap-3.5")}>
+            {leading}
+            <div className="min-w-0">
+              <h2 className="text-[1.75rem] leading-none font-black tracking-[-0.045em]">
+                {title}
+              </h2>
+              <p className="mt-1.5 max-w-[34ch] text-sm leading-5 text-muted-foreground">
+                {description}
+              </p>
+            </div>
+          </div>
+        </header>
+        <CardContent className={contentClassName}>
+          <Stagger y={10} stagger={0.05} delay={0.12} selector=":scope > *, :scope > form > *">
+            {children}
+          </Stagger>
+        </CardContent>
       </Card>
+    </FadeIn>
   );
 }
 
 export function FormError({ message }: { message?: string | null }) {
+  const ref = useShake(message);
+
   if (!message) return null;
 
   return (
     <div
+      ref={ref}
       role="alert"
       className="border-l-4 border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive"
     >

apps/web/components/brand.tsx

@@ -1,22 +1,80 @@
+"use client";
+
+import { useRef } from "react";
 import { cn } from "@/lib/cn";
+import { gsap, motionDuration, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
 
 type BrandMarkProps = {
   className?: string;
+  /**
+   * Renders the mark for placement on a filled `primary` panel: the block reads
+   * in the panel's foreground colour instead of the brand green.
+   */
   inverted?: boolean;
 };
 
-export function BrandMark({ className, inverted = false }: BrandMarkProps) {
+/**
+ * An isometric block on a 24-unit grid — three faces, no interior detail.
+ *
+ * The mark ships as small as 32px, so it is drawn with only the silhouette and
+ * the three face tones that separate it. Colour comes from `currentColor` plus
+ * two `color-mix` shades of it, so the block follows `text-primary` /
+ * `text-primary-foreground` and works on the sidebar, the light dashboard, and
+ * the filled primary panel from a single asset.
+ */
+function BrandGlyph({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      {/* Left face — mixed toward black for the shadowed side. */}
+      <path
+        d="M2.5 7 12 12.2 12 22.4 2.5 17.2Z"
+        fill="color-mix(in oklch, currentColor 62%, black)"
+      />
+      {/* Right face — the mid tone. */}
+      <path
+        d="M21.5 7 12 12.2 12 22.4 21.5 17.2Z"
+        fill="color-mix(in oklch, currentColor 80%, black)"
+      />
+      {/* Top face — full strength, so the mark keys off `currentColor` exactly. */}
+      <path d="M12 1.6 21.5 7 12 12.2 2.5 7Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function BrandMark({ className, inverted }: BrandMarkProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el || prefersReducedMotion()) return;
+
+      const enter = () =>
+        gsap.to(el, { y: -2, duration: motionDuration.fast, ease: motionEase.out });
+      const leave = () =>
+        gsap.to(el, { y: 0, duration: motionDuration.fast, ease: motionEase.out });
+
+      el.addEventListener("pointerenter", enter);
+      el.addEventListener("pointerleave", leave);
+      return () => {
+        el.removeEventListener("pointerenter", enter);
+        el.removeEventListener("pointerleave", leave);
+      };
+    },
+    { scope: ref }
+  );
+
   return (
     <div
+      ref={ref}
       className={cn(
-        "grid size-11 shrink-0 place-items-center border font-mono text-lg font-black",
-        inverted
-          ? "border-foreground bg-foreground text-background"
-          : "border-sidebar-primary bg-sidebar-primary text-sidebar-primary-foreground",
+        "relative grid size-11 shrink-0 place-items-center will-change-transform",
+        inverted ? "text-primary-foreground" : "text-primary",
         className
       )}
+      aria-hidden="true"
     >
-      M
+      <BrandGlyph className="size-full" />
     </div>
   );
 }
@@ -27,15 +85,28 @@ type BrandLockupProps = BrandMarkProps & {
   textClassName?: string;
 };
 
-export function BrandLockup({ subtitle, compact, className, textClassName }: BrandLockupProps) {
+export function BrandLockup({
+  subtitle,
+  compact,
+  className,
+  textClassName,
+  inverted,
+}: BrandLockupProps) {
   return (
     <div className={cn("flex items-center gap-3", className)}>
-      <BrandMark className={compact ? "size-9 text-sm" : undefined} />
+      <BrandMark className={compact ? "size-9" : undefined} inverted={inverted} />
       <div className={textClassName}>
-        <p className={cn("font-black uppercase tracking-[0.14em]", compact ? "text-base" : "text-lg")}>
+        <p
+          className={cn(
+            "font-black uppercase tracking-[0.14em]",
+            compact ? "text-base" : "text-lg"
+          )}
+        >
           Minikura
         </p>
-        <p className="font-mono text-[9px] uppercase tracking-[0.2em] text-current/45">{subtitle}</p>
+        <p className="font-mono text-[9px] uppercase tracking-[0.2em] text-current/45">
+          {subtitle}
+        </p>
       </div>
     </div>
   );

apps/web/components/dashboard-layout.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { BrandLockup } from "@/components/brand";
+import { FadeIn } from "@/components/motion";
 import { FullScreenLoader } from "@/components/page-layout";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -38,6 +39,7 @@ type NavigationGroup = {
     icon: LucideIcon;
     label: string;
     context: string;
+    adminOnly?: boolean;
   }>;
 };
 
@@ -45,14 +47,34 @@ const navigation: NavigationGroup[] = [
   {
     label: "Operations",
     items: [
-      { href: "/dashboard/users", icon: Users, label: "Users", context: "Identity" },
+      {
+        href: "/dashboard/users",
+        icon: Users,
+        label: "Users",
+        context: "Identity",
+        adminOnly: true,
+      },
       { href: "/dashboard/servers", icon: Server, label: "Servers", context: "Workloads" },
-      { href: "/dashboard/topology", icon: GitGraph, label: "Network", context: "Topology" },
+      {
+        href: "/dashboard/topology",
+        icon: GitGraph,
+        label: "Network",
+        context: "Topology",
+        adminOnly: true,
+      },
     ],
   },
   {
     label: "Kubernetes",
-    items: [{ href: "/dashboard/k8s", icon: Network, label: "Resources", context: "Cluster" }],
+    items: [
+      {
+        href: "/dashboard/k8s",
+        icon: Network,
+        label: "Resources",
+        context: "Cluster",
+        adminOnly: true,
+      },
+    ],
   },
 ];
 
@@ -64,10 +86,29 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     if (!isPending && !session?.user) {
       router.replace("/login");
+      return;
     }
-  }, [session, isPending, router]);
+    if (
+      !isPending &&
+      session?.user.role !== "admin" &&
+      (pathname === "/dashboard/users" ||
+        pathname.startsWith("/dashboard/topology") ||
+        pathname.startsWith("/dashboard/k8s") ||
+        pathname.startsWith("/dashboard/servers/create") ||
+        pathname.startsWith("/dashboard/servers/edit"))
+    ) {
+      router.replace("/dashboard/servers");
+    }
+  }, [session, isPending, pathname, router]);
 
   if (isPending || !session?.user) return <FullScreenLoader />;
+  const isAdmin = session.user.role === "admin";
+  const visibleNavigation = navigation
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => isAdmin || !item.adminOnly),
+    }))
+    .filter((group) => group.items.length > 0);
 
   const handleSignOut = async () => {
     await signOut();
@@ -80,7 +121,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
       .map((n) => n[0])
       .join("")
       .toUpperCase() || "U";
-  const currentPage = navigation
+  const currentPage = visibleNavigation
     .flatMap((group) => group.items)
     .find((item) => pathname === item.href || pathname.startsWith(`${item.href}/`));
 
@@ -102,7 +143,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
           />
         </SidebarHeader>
         <SidebarContent className="py-4">
-          {navigation.map((group) => (
+          {visibleNavigation.map((group) => (
             <SidebarGroup key={group.label} className="px-3">
               <SidebarGroupLabel className="font-mono text-[9px] uppercase tracking-[0.2em]">
                 {group.label}
@@ -164,7 +205,11 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
           </span>
           <ThemeToggle className="ml-auto" />
         </header>
-        <main className="min-w-0 flex-1 overflow-auto p-4 sm:p-6 lg:p-8">{children}</main>
+        <main className="min-w-0 flex-1 overflow-auto p-4 sm:p-6 lg:p-8">
+          <FadeIn key={pathname} y={10} duration={0.4}>
+            {children}
+          </FadeIn>
+        </main>
       </SidebarInset>
     </SidebarProvider>
   );

apps/web/components/motion.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { useRef } from "react";
+import { cn } from "@/lib/cn";
+import { gsap, motionDuration, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
+
+type FadeInProps = ComponentProps<"div"> & {
+  delay?: number;
+  duration?: number;
+  y?: number;
+  x?: number;
+};
+
+export function FadeIn({
+  children,
+  className,
+  delay = 0,
+  duration = motionDuration.base,
+  y = 16,
+  x = 0,
+  ...props
+}: FadeInProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el) return;
+      if (prefersReducedMotion()) {
+        gsap.set(el, { autoAlpha: 1, x: 0, y: 0 });
+        return;
+      }
+      gsap.fromTo(
+        el,
+        { autoAlpha: 0, x, y },
+        { autoAlpha: 1, x: 0, y: 0, delay, duration, ease: motionEase.out }
+      );
+    },
+    { scope: ref }
+  );
+
+  return (
+    <div ref={ref} className={className} {...props}>
+      {children}
+    </div>
+  );
+}
+
+type StaggerProps = {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+  stagger?: number;
+  duration?: number;
+  y?: number;
+  selector?: string;
+};
+
+export function Stagger({
+  children,
+  className,
+  delay = 0,
+  stagger = 0.06,
+  duration = motionDuration.base,
+  y = 14,
+  selector = ":scope > *",
+}: StaggerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const root = ref.current;
+      if (!root) return;
+      const items = root.querySelectorAll(selector);
+      if (!items.length) return;
+      if (prefersReducedMotion()) {
+        gsap.set(items, { autoAlpha: 1, y: 0 });
+        return;
+      }
+      gsap.fromTo(
+        items,
+        { autoAlpha: 0, y },
+        { autoAlpha: 1, y: 0, delay, duration, stagger, ease: motionEase.out }
+      );
+    },
+    { scope: ref }
+  );
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}
+
+type HoverLiftProps = {
+  children: ReactNode;
+  className?: string;
+  y?: number;
+};
+
+export function HoverLift({ children, className, y = -3 }: HoverLiftProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el || prefersReducedMotion()) return;
+
+      const enter = () => gsap.to(el, { y, duration: motionDuration.fast, ease: motionEase.out });
+      const leave = () =>
+        gsap.to(el, { y: 0, duration: motionDuration.fast, ease: motionEase.out });
+
+      el.addEventListener("pointerenter", enter);
+      el.addEventListener("pointerleave", leave);
+      return () => {
+        el.removeEventListener("pointerenter", enter);
+        el.removeEventListener("pointerleave", leave);
+      };
+    },
+    { scope: ref }
+  );
+
+  return (
+    <div ref={ref} className={cn("will-change-transform", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function useShake(trigger: string | null | undefined) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el || !trigger || prefersReducedMotion()) return;
+      gsap.fromTo(el, { x: -6 }, { x: 0, duration: 0.42, ease: "elastic.out(1, 0.4)" });
+    },
+    { dependencies: [trigger], scope: ref }
+  );
+
+  return ref;
+}

apps/web/components/page-layout.tsx

@@ -1,6 +1,11 @@
-import { Loader2 } from "lucide-react";
+"use client";
+
+import { useRef } from "react";
 import type * as React from "react";
+import { FadeIn } from "@/components/motion";
+import { BrandMark } from "@/components/brand";
 import { cn } from "@/lib/cn";
+import { gsap, prefersReducedMotion, useGSAP } from "@/lib/motion";
 
 type PageHeaderProps = {
   eyebrow: string;
@@ -24,6 +29,7 @@ export function PageHeader({
   className,
 }: PageHeaderProps) {
   return (
+    <FadeIn y={12} duration={0.45}>
       <header className={cn("page-heading", className)}>
         <div className={cn(leading && "flex items-center gap-4")}>
           {leading}
@@ -35,6 +41,7 @@ export function PageHeader({
         </div>
         {actions}
       </header>
+    </FadeIn>
   );
 }
 
@@ -58,7 +65,9 @@ export function StatePanel({
   ...props
 }: StatePanelProps) {
   return (
-    <div
+    <FadeIn
+      y={10}
+      duration={0.4}
       className={cn(
         "flex min-h-48 items-center justify-center border border-dashed bg-card/60 p-6 text-center",
         className
@@ -67,7 +76,7 @@ export function StatePanel({
     >
       <div className="flex max-w-lg flex-col items-center gap-2">
         {loading ? (
-          <Loader2 className="mb-2 size-7 animate-spin text-muted-foreground" />
+          <LoaderMark className="mb-2" />
         ) : (
           icon && <div className="mb-2 text-muted-foreground">{icon}</div>
         )}
@@ -75,16 +84,87 @@ export function StatePanel({
         {description && <div className="text-sm text-muted-foreground">{description}</div>}
         {action && <div className="mt-3">{action}</div>}
       </div>
+    </FadeIn>
+  );
+}
+
+function LoaderMark({ className }: { className?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el || prefersReducedMotion()) return;
+      gsap.to(el, {
+        rotate: 180,
+        duration: 1.1,
+        repeat: -1,
+        yoyo: true,
+        ease: "power1.inOut",
+      });
+    },
+    { scope: ref }
+  );
+
+  return (
+    <div ref={ref} className={cn("text-muted-foreground", className)}>
+      <BrandMark className="size-8 text-sm" />
     </div>
   );
 }
 
 export function FullScreenLoader({ label }: { label?: string }) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const root = rootRef.current;
+      if (!root || prefersReducedMotion()) return;
+      const mark = root.querySelector("[data-loader-mark]");
+      const ring = root.querySelector("[data-loader-ring]");
+      const copy = root.querySelector("[data-loader-copy]");
+
+      gsap.fromTo(
+        [mark, copy],
+        { autoAlpha: 0, y: 8 },
+        { autoAlpha: 1, y: 0, duration: 0.45, stagger: 0.08, ease: "power3.out" }
+      );
+      gsap.to(mark, {
+        scale: 1.06,
+        duration: 0.9,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+      });
+      gsap.to(ring, {
+        rotate: 360,
+        duration: 2.4,
+        repeat: -1,
+        ease: "none",
+      });
+    },
+    { scope: rootRef }
+  );
+
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-3 bg-sidebar text-sidebar-foreground">
-      <Loader2 className="size-8 animate-spin text-sidebar-primary" />
+    <div
+      ref={rootRef}
+      className="flex min-h-screen flex-col items-center justify-center gap-4 bg-sidebar text-sidebar-foreground"
+    >
+      <div className="relative grid size-16 place-items-center">
+        <span
+          data-loader-ring=""
+          className="absolute inset-0 border border-sidebar-primary/35 border-t-sidebar-primary"
+        />
+        <div data-loader-mark="">
+          <BrandMark className="size-11" />
+        </div>
+      </div>
       {label && (
-        <span className="font-mono text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/50">
+        <span
+          data-loader-copy=""
+          className="font-mono text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/50"
+        >
           {label}
         </span>
       )}

apps/web/components/section-card.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import type * as React from "react";
+import { FadeIn } from "@/components/motion";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/cn";
 
@@ -21,7 +24,14 @@ export function SectionCard({
   ...props
 }: SectionCardProps) {
   return (
-    <Card className={className} {...props}>
+    <FadeIn y={14} duration={0.5}>
+      <Card
+        className={cn(
+          "transition-[border-color,box-shadow] duration-200 hover:border-foreground/40 hover:shadow-[4px_4px_0_color-mix(in_oklch,var(--foreground)_12%,transparent)]",
+          className
+        )}
+        {...props}
+      >
         <CardHeader className="border-b">
           <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-2">
@@ -34,6 +44,7 @@ export function SectionCard({
         </CardHeader>
         <CardContent className={contentClassName}>{children}</CardContent>
       </Card>
+    </FadeIn>
   );
 }
 

apps/web/components/server-form/advanced-panel.tsx

@@ -23,7 +23,11 @@ export function AdvancedPanel({
   return (
     <TabsContent value="advanced" className="space-y-4 mt-4">
       <div className="grid grid-cols-3 gap-4">
-        <Field id="timezone" label="Timezone" tooltip="Timezone for server logs and scheduling (e.g., America/New_York)">
+        <Field
+          id="timezone"
+          label="Timezone"
+          tooltip="Timezone for server logs and scheduling (e.g., America/New_York)"
+        >
           <Input
             id="timezone"
             value={formData.timezone}

apps/web/components/server-form/mods-panel.tsx

@@ -11,7 +11,11 @@ export function ModsPanel({ formData, updateField }: ServerFormPanelProps) {
       {formData.type === "CUSTOM" && (
         <FormNotice>Mods/plugins automation is intended for Vanilla/Paper workflows.</FormNotice>
       )}
-      <Field id="plugins" label="Plugins" tooltip="Comma-separated list of plugin URLs or filenames">
+      <Field
+        id="plugins"
+        label="Plugins"
+        tooltip="Comma-separated list of plugin URLs or filenames"
+      >
         <Textarea
           id="plugins"
           value={formData.plugins || ""}

apps/web/components/server-form/network-panel.tsx

@@ -30,12 +30,18 @@ export function NetworkPanel({ formData, updateField }: ServerFormPanelProps) {
             max="65535"
           />
         </Field>
-        <Field id="serviceType" label="Service Type" tooltip="How the server is exposed in Kubernetes">
+        <Field
+          id="serviceType"
+          label="Service Type"
+          tooltip="How the server is exposed in Kubernetes"
+        >
           <Select
             value={formData.serviceType}
             onValueChange={(value) => updateField("serviceType", value as ServiceType)}
           >
-            <SelectTrigger id="serviceType"><SelectValue /></SelectTrigger>
+            <SelectTrigger id="serviceType">
+              <SelectValue />
+            </SelectTrigger>
             <SelectContent>
               <SelectItem value="CLUSTER_IP">ClusterIP (Internal Only)</SelectItem>
               <SelectItem value="NODE_PORT">NodePort (External Access)</SelectItem>

apps/web/components/server-form/performance-panel.tsx

@@ -51,7 +51,11 @@ export function PerformancePanel({ formData, updateField }: ServerFormPanelProps
           rows={3}
         />
       </Field>
-      <Field id="jvmXxOpts" label="JVM -XX Options" tooltip="Space-separated -XX JVM flags for advanced tuning">
+      <Field
+        id="jvmXxOpts"
+        label="JVM -XX Options"
+        tooltip="Space-separated -XX JVM flags for advanced tuning"
+      >
         <Textarea
           id="jvmXxOpts"
           value={formData.jvmXxOpts || ""}
@@ -60,7 +64,11 @@ export function PerformancePanel({ formData, updateField }: ServerFormPanelProps
           rows={2}
         />
       </Field>
-      <Field id="jvmDdOpts" label="JVM -D System Properties" tooltip="Comma-separated key=value pairs for system properties">
+      <Field
+        id="jvmDdOpts"
+        label="JVM -D System Properties"
+        tooltip="Comma-separated key=value pairs for system properties"
+      >
         <Textarea
           id="jvmDdOpts"
           value={formData.jvmDdOpts || ""}

apps/web/components/server-form/resources-panel.tsx

@@ -10,7 +10,11 @@ export function ResourcesPanel({ formData, updateField }: ServerFormPanelProps)
       {formData.type === "CUSTOM" && (
         <FormNotice>Resource pack settings may not apply to custom jars.</FormNotice>
       )}
-      <Field id="resourcePack" label="Resource Pack URL" tooltip="URL or path to a resource pack ZIP file">
+      <Field
+        id="resourcePack"
+        label="Resource Pack URL"
+        tooltip="URL or path to a resource pack ZIP file"
+      >
         <Input
           id="resourcePack"
           value={formData.resourcePack || ""}
@@ -18,7 +22,11 @@ export function ResourcesPanel({ formData, updateField }: ServerFormPanelProps)
           placeholder="https://example.com/resourcepack.zip"
         />
       </Field>
-      <Field id="resourcePackSha1" label="Resource Pack SHA1" tooltip="SHA1 checksum of the resource pack for verification">
+      <Field
+        id="resourcePackSha1"
+        label="Resource Pack SHA1"
+        tooltip="SHA1 checksum of the resource pack for verification"
+      >
         <Input
           id="resourcePackSha1"
           value={formData.resourcePackSha1 || ""}
@@ -34,7 +42,11 @@ export function ResourcesPanel({ formData, updateField }: ServerFormPanelProps)
       >
         Enforce Resource Pack
       </CheckboxField>
-      <Field id="serverIcon" label="Server Icon URL" tooltip="URL or path to a server icon image (PNG, 64x64 recommended)">
+      <Field
+        id="serverIcon"
+        label="Server Icon URL"
+        tooltip="URL or path to a server icon image (PNG, 64x64 recommended)"
+      >
         <Input
           id="serverIcon"
           value={formData.serverIcon || ""}

apps/web/components/server-form/server-panel.tsx

@@ -106,8 +106,13 @@ export function ServerPanel({ formData, updateField }: ServerFormPanelProps) {
 
       <div className="grid grid-cols-2 gap-4">
         <Field id="mode" label="Game Mode">
-          <Select value={formData.mode} onValueChange={(value) => updateField("mode", toMode(value))}>
-            <SelectTrigger id="mode"><SelectValue /></SelectTrigger>
+          <Select
+            value={formData.mode}
+            onValueChange={(value) => updateField("mode", toMode(value))}
+          >
+            <SelectTrigger id="mode">
+              <SelectValue />
+            </SelectTrigger>
             <SelectContent>
               <SelectItem value="survival">Survival</SelectItem>
               <SelectItem value="creative">Creative</SelectItem>
@@ -121,7 +126,9 @@ export function ServerPanel({ formData, updateField }: ServerFormPanelProps) {
             value={formData.difficulty}
             onValueChange={(value) => updateField("difficulty", toDifficulty(value))}
           >
-            <SelectTrigger id="difficulty"><SelectValue /></SelectTrigger>
+            <SelectTrigger id="difficulty">
+              <SelectValue />
+            </SelectTrigger>
             <SelectContent>
               <SelectItem value="peaceful">Peaceful</SelectItem>
               <SelectItem value="easy">Easy</SelectItem>
@@ -156,19 +163,39 @@ export function ServerPanel({ formData, updateField }: ServerFormPanelProps) {
       </div>
 
       <div className="space-y-3">
-        <CheckboxField id="pvp" checked={formData.pvp} onCheckedChange={(value) => updateField("pvp", value)}>
+        <CheckboxField
+          id="pvp"
+          checked={formData.pvp}
+          onCheckedChange={(value) => updateField("pvp", value)}
+        >
           Enable PvP (Player vs Player)
         </CheckboxField>
-        <CheckboxField id="onlineMode" checked={formData.onlineMode} onCheckedChange={(value) => updateField("onlineMode", value)}>
+        <CheckboxField
+          id="onlineMode"
+          checked={formData.onlineMode}
+          onCheckedChange={(value) => updateField("onlineMode", value)}
+        >
           Online Mode (Requires authenticated Minecraft accounts)
         </CheckboxField>
-        <CheckboxField id="allowFlight" checked={formData.allowFlight} onCheckedChange={(value) => updateField("allowFlight", value)}>
+        <CheckboxField
+          id="allowFlight"
+          checked={formData.allowFlight}
+          onCheckedChange={(value) => updateField("allowFlight", value)}
+        >
           Allow Flight
         </CheckboxField>
-        <CheckboxField id="enableCommandBlock" checked={formData.enableCommandBlock} onCheckedChange={(value) => updateField("enableCommandBlock", value)}>
+        <CheckboxField
+          id="enableCommandBlock"
+          checked={formData.enableCommandBlock}
+          onCheckedChange={(value) => updateField("enableCommandBlock", value)}
+        >
           Enable Command Blocks
         </CheckboxField>
-        <CheckboxField id="hardcore" checked={formData.hardcore} onCheckedChange={(value) => updateField("hardcore", value)}>
+        <CheckboxField
+          id="hardcore"
+          checked={formData.hardcore}
+          onCheckedChange={(value) => updateField("hardcore", value)}
+        >
           Hardcore Mode (Permanent Death)
         </CheckboxField>
       </div>

apps/web/components/server-form/types.ts

@@ -92,7 +92,7 @@ export interface ServerFormData {
 
 export type UpdateServerField = <K extends keyof ServerFormData>(
   key: K,
-  value: ServerFormData[K],
+  value: ServerFormData[K]
 ) => void;
 
 export interface ServerFormPanelProps {

apps/web/components/server-form/world-panel.tsx

@@ -45,7 +45,9 @@ export function WorldPanel({ formData, updateField }: ServerFormPanelProps) {
           value={formData.levelType || "default"}
           onValueChange={(value) => updateField("levelType", value === "default" ? "" : value)}
         >
-          <SelectTrigger id="levelType"><SelectValue placeholder="Default" /></SelectTrigger>
+          <SelectTrigger id="levelType">
+            <SelectValue placeholder="Default" />
+          </SelectTrigger>
           <SelectContent>
             <SelectItem value="default">Default</SelectItem>
             <SelectItem value="flat">Flat/Superflat</SelectItem>
@@ -98,13 +100,25 @@ export function WorldPanel({ formData, updateField }: ServerFormPanelProps) {
         </Field>
       </div>
       <div className="space-y-3">
-        <CheckboxField id="spawnAnimals" checked={formData.spawnAnimals} onCheckedChange={(value) => updateField("spawnAnimals", value)}>
+        <CheckboxField
+          id="spawnAnimals"
+          checked={formData.spawnAnimals}
+          onCheckedChange={(value) => updateField("spawnAnimals", value)}
+        >
           Spawn Animals
         </CheckboxField>
-        <CheckboxField id="spawnMonsters" checked={formData.spawnMonsters} onCheckedChange={(value) => updateField("spawnMonsters", value)}>
+        <CheckboxField
+          id="spawnMonsters"
+          checked={formData.spawnMonsters}
+          onCheckedChange={(value) => updateField("spawnMonsters", value)}
+        >
           Spawn Monsters
         </CheckboxField>
-        <CheckboxField id="spawnNpcs" checked={formData.spawnNpcs} onCheckedChange={(value) => updateField("spawnNpcs", value)}>
+        <CheckboxField
+          id="spawnNpcs"
+          checked={formData.spawnNpcs}
+          onCheckedChange={(value) => updateField("spawnNpcs", value)}
+        >
           Spawn NPCs (Villagers)
         </CheckboxField>
       </div>

apps/web/components/servers/connection-info-cell.tsx

@@ -76,7 +76,7 @@ export function ConnectionInfoCell({ serverId, type }: ConnectionInfoCellProps)
                   aria-label="Copy connection string"
                 >
                   {copied ? (
-                    <Check className="h-3 w-3 text-green-500" />
+                    <Check className="h-3 w-3 text-success" />
                   ) : (
                     <Copy className="h-3 w-3" />
                   )}

apps/web/components/servers/server-table.tsx

@@ -11,14 +11,14 @@ type ServerTableProps =
   | {
       type: "normal";
       servers: NormalServer[];
-      onEdit: (id: string) => void;
-      onDelete: (id: string) => void;
+      onEdit?: (id: string) => void;
+      onDelete?: (id: string) => void;
     }
   | {
       type: "proxy";
       servers: ReverseProxyServer[];
-      onEdit: (id: string) => void;
-      onDelete: (id: string) => void;
+      onEdit?: (id: string) => void;
+      onDelete?: (id: string) => void;
     };
 
 function RowActions({
@@ -29,11 +29,13 @@ function RowActions({
 }: {
   id: string;
   kind: string;
-  onEdit: (id: string) => void;
-  onDelete: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
 }) {
+  if (!onEdit && !onDelete) return null;
   return (
     <TableActions>
+      {onEdit && (
         <Button
           variant="ghost"
           size="icon"
@@ -42,6 +44,8 @@ function RowActions({
         >
           <Pencil />
         </Button>
+      )}
+      {onDelete && (
         <Button
           variant="ghost"
           size="icon"
@@ -50,6 +54,7 @@ function RowActions({
         >
           <Trash2 />
         </Button>
+      )}
     </TableActions>
   );
 }

apps/web/components/stat-strip.tsx

@@ -1,5 +1,9 @@
+"use client";
+
 import type { LucideIcon } from "lucide-react";
+import { useRef } from "react";
 import { cn } from "@/lib/cn";
+import { gsap, motionEase, prefersReducedMotion, useGSAP } from "@/lib/motion";
 
 export type StatItem = {
   label: string;
@@ -15,8 +19,45 @@ export function StatStrip({
   items: readonly StatItem[];
   className?: string;
 }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      const root = ref.current;
+      if (!root) return;
+      const cells = root.querySelectorAll("[data-stat-cell]");
+      if (prefersReducedMotion()) {
+        gsap.set(cells, { autoAlpha: 1, y: 0 });
+        return;
+      }
+
+      gsap.fromTo(
+        cells,
+        { autoAlpha: 0, y: 12 },
+        { autoAlpha: 1, y: 0, duration: 0.45, stagger: 0.05, ease: motionEase.out }
+      );
+
+      for (const valueEl of root.querySelectorAll<HTMLElement>("[data-stat-value]")) {
+        const raw = valueEl.dataset.statValue;
+        const numeric = raw !== undefined ? Number(raw) : Number.NaN;
+        if (!Number.isFinite(numeric)) continue;
+        const state = { value: 0 };
+        gsap.to(state, {
+          value: numeric,
+          duration: 0.7,
+          ease: motionEase.out,
+          onUpdate: () => {
+            valueEl.textContent = String(Math.round(state.value));
+          },
+        });
+      }
+    },
+    { scope: ref, dependencies: [items.map((item) => `${item.label}:${item.value}`).join("|")] }
+  );
+
   return (
     <div
+      ref={ref}
       className={cn(
         "grid divide-x divide-border border bg-card shadow-[2px_2px_0_color-mix(in_oklch,var(--foreground)_8%,transparent)]",
         className
@@ -24,7 +65,7 @@ export function StatStrip({
       style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
     >
       {items.map(({ label, value, icon: Icon, tone = "default" }) => (
-        <div key={label} className="min-w-20 px-3 py-2.5 sm:min-w-28 sm:px-4">
+        <div key={label} data-stat-cell="" className="min-w-20 px-3 py-2.5 sm:min-w-28 sm:px-4">
           <div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
             {Icon && (
               <Icon
@@ -39,7 +80,12 @@ export function StatStrip({
               {label}
             </span>
           </div>
-          <strong className="block text-xl leading-none tabular-nums sm:text-2xl">{value}</strong>
+          <strong
+            data-stat-value={typeof value === "number" ? value : undefined}
+            className="block text-xl leading-none tabular-nums sm:text-2xl"
+          >
+            {value}
+          </strong>
         </div>
       ))}
     </div>

apps/web/components/status-badge.tsx

@@ -6,11 +6,13 @@ import { cn } from "@/lib/cn";
 const statusConfig = {
   success: {
     icon: CheckCircle2,
-    className: "border-success/35 bg-success/12 text-success-foreground",
+    className:
+      "border-success/35 bg-success/12 text-success-foreground dark:bg-success/15 dark:text-success",
   },
   warning: {
     icon: AlertCircle,
-    className: "border-warning/40 bg-warning/14 text-warning-foreground",
+    className:
+      "border-warning/40 bg-warning/14 text-warning-foreground dark:bg-warning/15 dark:text-warning",
   },
   error: { icon: XCircle, className: "border-destructive/35 bg-destructive/10 text-destructive" },
   neutral: { icon: CircleDashed, className: "border-border bg-muted/60 text-muted-foreground" },

apps/web/components/terminal.tsx

@@ -203,13 +203,15 @@ export function Terminal({
     <div className="relative w-full h-full">
       <div className="absolute top-2 right-2 flex items-center gap-2 z-10">
         {connected && (
-          <div className="flex items-center gap-2 bg-green-500/20 text-green-500 text-xs px-2 py-1 rounded">
-            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+          <div className="flex items-center gap-2 rounded bg-success/20 px-2 py-1 text-xs text-success">
+            <div className="h-2 w-2 animate-pulse rounded-full bg-success" />
             Connected
           </div>
         )}
         {error && (
-          <div className="bg-red-500/20 text-red-500 text-xs px-2 py-1 rounded">{error}</div>
+          <div className="rounded bg-destructive/20 px-2 py-1 text-xs text-destructive">
+            {error}
+          </div>
         )}
         <button
           type="button"

apps/web/components/topology/controls/node-details-panel.tsx

@@ -85,7 +85,7 @@ function ServerDetails({ metadata }: { metadata: ServerMetadata }) {
           <DetailRow label="Behind Proxies" value={connectedProxies.length.toString()} />
           <IdentifierList
             items={connectedProxies}
-            className="text-sm bg-blue-50 border border-blue-200"
+            className="text-sm bg-info/12 border border-info/30"
           />
         </DetailSection>
       )}
@@ -129,7 +129,7 @@ function ProxyDetails({ metadata }: { metadata: ProxyMetadata }) {
         {connectedServers.length > 0 && (
           <IdentifierList
             items={connectedServers}
-            className="text-sm bg-green-50 border border-green-200"
+            className="text-sm bg-success/12 border border-success/30"
           />
         )}
       </DetailSection>
@@ -166,7 +166,7 @@ function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
             <p className="text-sm font-medium mb-2">Server Pods:</p>
             <IdentifierList
               items={serverPods}
-              className="text-xs bg-green-50 border border-green-200"
+              className="text-xs bg-success/12 border border-success/30"
               withMargin={false}
             />
           </div>
@@ -177,7 +177,7 @@ function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
             <p className="text-sm font-medium mb-2">Proxy Pods:</p>
             <IdentifierList
               items={proxyPods}
-              className="text-xs bg-blue-50 border border-blue-200"
+              className="text-xs bg-info/12 border border-info/30"
               withMargin={false}
             />
           </div>
@@ -204,7 +204,7 @@ function KubernetesWorkloadDetails({
           </div>
           <IdentifierList
             items={k8sNodes}
-            className="text-xs bg-blue-50 border border-blue-200 ml-6"
+            className="text-xs bg-info/12 border border-info/30 ml-6"
             withMargin={false}
           />
         </div>

apps/web/components/topology/controls/topology-toolbar.tsx

@@ -58,7 +58,7 @@ export function TopologyToolbar({ filters, onFiltersChange, metadata }: Topology
   ];
 
   return (
-    <div className="flex min-w-[280px] max-w-[calc(100vw-5rem)] flex-col gap-3 rounded-sm border-2 border-foreground bg-card/95 p-3 shadow-[5px_5px_0_color-mix(in_oklch,var(--foreground)_16%,transparent)] backdrop-blur-sm sm:min-w-[350px] sm:p-4">
+    <div className="flex w-[calc(100vw-4.5rem)] max-w-[350px] flex-col gap-3 rounded-sm border-2 border-foreground bg-card/95 p-3 shadow-[5px_5px_0_color-mix(in_oklch,var(--foreground)_16%,transparent)] backdrop-blur-sm sm:w-[350px] sm:p-4">
       <div className="grid grid-cols-3 gap-2">
         {stats.map(({ label, value, icon: Icon }) => (
           <div key={label} className="flex flex-col items-center border bg-muted/50 p-2">
@@ -100,7 +100,7 @@ export function TopologyToolbar({ filters, onFiltersChange, metadata }: Topology
             Filters
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-80" align="start">
+        <PopoverContent className="w-[calc(100vw-3rem)] max-w-80" align="start">
           <div className="space-y-4">
             <div>
               <h4 className="font-semibold mb-3">Show/Hide</h4>

apps/web/components/topology/nodes/k8s-node.tsx

@@ -12,8 +12,8 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
   return (
     <TopologyNodeCard
       selected={selected}
-      icon={<Box className="h-4 w-4 text-blue-600" />}
-      iconClassName="bg-blue-500/10"
+      icon={<Box className="h-4 w-4 text-info" />}
+      iconClassName="bg-info/10"
       title={node.name || "Unknown"}
       description="Kubernetes Node"
       health={health}
@@ -35,7 +35,7 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
       <CompactRow
         label="Total Pods"
         className="text-xs bg-muted/50 rounded px-2 py-1.5"
-        valueClassName="font-semibold text-blue-600"
+        valueClassName="font-semibold text-info"
       >
         {podCount}
       </CompactRow>
@@ -55,7 +55,7 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
             <CompactRow
               label="CPU"
               icon={<Cpu className="h-3 w-3" />}
-              valueClassName="font-semibold text-xs text-blue-600"
+              valueClassName="font-semibold text-xs text-info"
             >
               {metrics.cpuUsage}
             </CompactRow>
@@ -64,7 +64,7 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
             <CompactRow
               label="Memory"
               icon={<HardDrive className="h-3 w-3" />}
-              valueClassName="font-semibold text-xs text-blue-600"
+              valueClassName="font-semibold text-xs text-info"
             >
               {metrics.memoryUsage}
             </CompactRow>

apps/web/components/topology/nodes/proxy-node.tsx

@@ -15,8 +15,8 @@ export function ProxyNode({ data, selected }: NodeProps) {
   return (
     <TopologyNodeCard
       selected={selected}
-      icon={<Globe className="h-4 w-4 text-blue-500" />}
-      iconClassName="bg-blue-500/10"
+      icon={<Globe className="h-4 w-4 text-info" />}
+      iconClassName="bg-info/10"
       title={proxy.id}
       description={proxy.description}
       health={health}
@@ -37,7 +37,7 @@ export function ProxyNode({ data, selected }: NodeProps) {
         className="text-xs bg-muted/50 rounded px-2 py-1.5"
         valueClassName={cn(
           "font-semibold",
-          readyPods === podCount ? "text-green-600" : "text-yellow-600"
+          readyPods === podCount ? "text-success" : "text-warning"
         )}
       >
         {readyPods}/{podCount}
@@ -80,7 +80,7 @@ export function ProxyNode({ data, selected }: NodeProps) {
         <div className="space-y-1 text-[11px] pt-1 border-t">
           <CompactRow
             label="Restarts"
-            valueClassName={restartCount > 0 ? "text-yellow-600" : "text-green-600"}
+            valueClassName={restartCount > 0 ? "text-warning" : "text-success"}
           >
             {restartCount}
           </CompactRow>
@@ -90,7 +90,7 @@ export function ProxyNode({ data, selected }: NodeProps) {
               {pods[0].ip}
             </CompactRow>
           )}
-          <CompactRow label="Routing To" valueClassName="font-semibold text-blue-600">
+          <CompactRow label="Routing To" valueClassName="font-semibold text-info">
             {connectedServers.length} servers
           </CompactRow>
           {k8sNodes.length > 0 && (

apps/web/components/topology/nodes/server-node.tsx

@@ -43,7 +43,7 @@ export function ServerNode({ data, selected }: NodeProps) {
         className="text-xs bg-muted/50 rounded px-2 py-1.5"
         valueClassName={cn(
           "font-semibold",
-          readyPods === podCount ? "text-green-600" : "text-yellow-600"
+          readyPods === podCount ? "text-success" : "text-warning"
         )}
       >
         {readyPods}/{podCount}
@@ -77,7 +77,7 @@ export function ServerNode({ data, selected }: NodeProps) {
         <div className="space-y-1 text-[11px] pt-1 border-t">
           <CompactRow
             label="Restarts"
-            valueClassName={restartCount > 0 ? "text-yellow-600" : "text-green-600"}
+            valueClassName={restartCount > 0 ? "text-warning" : "text-success"}
           >
             {restartCount}
           </CompactRow>
@@ -93,7 +93,7 @@ export function ServerNode({ data, selected }: NodeProps) {
       {(k8sNodes.length > 0 || connectedProxies.length > 0) && (
         <div className="space-y-1 text-[11px] pt-1 border-t">
           {connectedProxies.length > 0 && (
-            <CompactRow label="Exposed By" valueClassName="font-semibold text-blue-600">
+            <CompactRow label="Exposed By" valueClassName="font-semibold text-info">
               {connectedProxies.length} proxies
             </CompactRow>
           )}

apps/web/components/topology/topology-canvas.tsx

@@ -54,7 +54,7 @@ export function TopologyCanvas({ graph }: TopologyCanvasProps) {
   }, []);
 
   return (
-    <div className="h-[calc(100vh-250px)] min-h-[520px] w-full overflow-hidden rounded-sm border-2 border-foreground bg-background shadow-[6px_6px_0_color-mix(in_oklch,var(--foreground)_14%,transparent)]">
+    <div className="h-[70vh] min-h-[420px] w-full overflow-hidden rounded-sm border-2 border-foreground bg-background shadow-[6px_6px_0_color-mix(in_oklch,var(--foreground)_14%,transparent)] sm:h-[calc(100vh-250px)] sm:min-h-[520px]">
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -93,18 +93,18 @@ export function TopologyCanvas({ graph }: TopologyCanvasProps) {
           showZoom
           showFitView
           showInteractive
-          className="border bg-card/95 shadow-md backdrop-blur-sm"
+          className="hidden border bg-card/95 shadow-md backdrop-blur-sm sm:block"
         />
         <MiniMap
           nodeColor={(node: any) => {
             const data = node.data as TopologyNodeData;
             const colors = {
-              healthy: "#22c55e",
-              degraded: "#eab308",
-              unhealthy: "#ef4444",
-              unknown: "#94a3b8",
+              healthy: "var(--success)",
+              degraded: "var(--warning)",
+              unhealthy: "var(--destructive)",
+              unknown: "var(--muted-foreground)",
             };
-            return colors[data.status] || "#94a3b8";
+            return colors[data.status] || "var(--muted-foreground)";
           }}
           maskColor="color-mix(in oklch, var(--foreground) 8%, transparent)"
           className="border bg-card/95 shadow-md backdrop-blur-sm"

apps/web/components/topology/topology-primitives.tsx

@@ -17,9 +17,10 @@ const healthLabels: Record<HealthStatus, string> = {
 };
 
 const solidHealthClasses: Record<Exclude<HealthStatus, "unknown">, string> = {
-  healthy: "bg-green-500 hover:bg-green-600",
-  degraded: "bg-yellow-500 hover:bg-yellow-600",
-  unhealthy: "bg-red-500 hover:bg-red-600",
+  healthy: "border-transparent bg-success text-success-foreground hover:bg-success/90",
+  degraded: "border-transparent bg-warning text-warning-foreground hover:bg-warning/90",
+  unhealthy:
+    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90",
 };
 
 interface HealthBadgeProps {
@@ -39,9 +40,9 @@ export function HealthBadge({
 
   if (appearance === "summary") {
     const indicatorClasses = {
-      healthy: "bg-green-500",
-      degraded: "bg-yellow-500",
-      unhealthy: "bg-red-500",
+      healthy: "bg-success",
+      degraded: "bg-warning",
+      unhealthy: "bg-destructive",
       unknown: "bg-muted-foreground",
     }[status];
 
@@ -156,7 +157,7 @@ interface MetricRowProps {
 export function MetricRow({ label, icon, usage, limit }: MetricRowProps) {
   return (
     <CompactRow label={label} icon={icon} valueClassName="text-xs">
-      {usage && <span className="text-blue-600">{usage} / </span>}
+      {usage && <span className="text-info">{usage} / </span>}
       <span className="text-muted-foreground">{limit}</span>
     </CompactRow>
   );
@@ -207,7 +208,7 @@ export function CopyableCode({ value, title = "Copy address" }: CopyableCodeProp
         onClick={handleCopy}
         title={copied ? "Copied!" : title}
       >
-        {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+        {copied ? <Check className="h-3 w-3 text-success" /> : <Copy className="h-3 w-3" />}
       </Button>
     </div>
   );

apps/web/components/ui/badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },

apps/web/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default:
           "border-foreground bg-primary text-primary-foreground shadow-[3px_3px_0_var(--foreground)] hover:-translate-y-0.5 hover:shadow-[4px_4px_0_var(--foreground)]",
         destructive:
-          "border-destructive bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
+          "border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
         outline: "border-border bg-card text-foreground hover:border-foreground hover:bg-accent",
         secondary: "border-border bg-secondary text-secondary-foreground hover:border-foreground",
         ghost: "text-current hover:bg-accent hover:text-accent-foreground",

apps/web/components/ui/card.tsx

@@ -59,7 +59,13 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("px-5 sm:px-6", className)} {...props} />;
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-5 sm:px-6 [.border-b+&]:pt-6", className)}
+      {...props}
+    />
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {

apps/web/components/ui/sidebar.tsx

@@ -444,7 +444,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
       },
       size: {
         default: "h-8 text-sm",

apps/web/hooks/use-server-list.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import type { NormalServer, ReverseProxyServer } from "@minikura/api";
+import { getErrorMessage } from "@minikura/shared/errors";
 import { useCallback, useEffect, useState } from "react";
 import { api } from "@/lib/api-client";
 import { getReverseProxyApi } from "@/lib/api-helpers";
@@ -19,6 +20,9 @@ export function useServerList() {
         getReverseProxyApi().get(),
       ]);
 
+      if (normalRes.error) throw normalRes.error;
+      if (proxyRes.error) throw proxyRes.error;
+
       if (normalRes.data) {
         setNormalServers(normalRes.data as unknown as NormalServer[]);
       }
@@ -26,7 +30,7 @@ export function useServerList() {
         setReverseProxies(proxyRes.data as unknown as ReverseProxyServer[]);
       }
     } catch (error) {
-      setError(error instanceof Error ? error.message : "Failed to load servers");
+      setError(getErrorMessage(error));
     } finally {
       setLoading(false);
     }
@@ -35,9 +39,11 @@ export function useServerList() {
   const deleteServer = useCallback(
     async (id: string, type: "normal" | "proxy") => {
       if (type === "normal") {
-        await api.api.servers({ id }).delete();
+        const response = await api.api.servers({ id }).delete();
+        if (response.error) throw response.error;
       } else {
-        await getReverseProxyApi()({ id }).delete();
+        const response = await getReverseProxyApi()({ id }).delete();
+        if (response.error) throw response.error;
       }
       await fetchServers();
     },

apps/web/hooks/use-topology-data.ts

@@ -1,23 +1,49 @@
 "use client";
 
 import type { ConnectionInfo, CustomResourceSummary, K8sNodeSummary, PodInfo } from "@minikura/api";
-import { useCallback, useEffect, useState } from "react";
+import { getErrorMessage } from "@minikura/shared/errors";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "@/lib/api-client";
 import { getReverseProxyApi } from "@/lib/api-helpers";
 import type { TopologyGraph } from "@/lib/topology-types";
 import { buildTopologyGraph } from "@/lib/topology-utils";
 import { useServerList } from "./use-server-list";
 
+const DATABASE_ID_LABEL = "minikura.kirameki.cafe/database-id";
+
+function kubernetesResourceName(id: string): string {
+  return id
+    .toLowerCase()
+    .replace(/[^a-z0-9.-]+/g, "-")
+    .replace(/^[^a-z0-9]+|[^a-z0-9]+$/g, "")
+    .slice(0, 63);
+}
+
+function assertResponse<T>(response: { data?: unknown; error?: unknown }, fallback: string): T {
+  if (response.error) throw new Error(getErrorMessage(response.error));
+  if (response.data === undefined || response.data === null) throw new Error(fallback);
+  return response.data as T;
+}
+
 export function useTopologyData() {
-  const { normalServers, reverseProxies, loading: serversLoading } = useServerList();
+  const {
+    normalServers,
+    reverseProxies,
+    loading: serversLoading,
+    error: serversError,
+  } = useServerList();
 
   const [graph, setGraph] = useState<TopologyGraph | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const requestSequence = useRef(0);
 
   const fetchTopologyData = useCallback(
     async (isRefresh = false) => {
+      const sequence = ++requestSequence.current;
+      if (isRefresh) setRefreshing(true);
       try {
         if (!isRefresh) {
           setLoading(true);
@@ -25,14 +51,17 @@ export function useTopologyData() {
         setError(null);
 
         const nodesResponse = await api.api.k8s.nodes.get();
-        const k8sNodes = (nodesResponse.data as K8sNodeSummary[]) || [];
+        const k8sNodes = assertResponse<K8sNodeSummary[]>(
+          nodesResponse,
+          "Failed to load Kubernetes nodes"
+        );
 
         const serverPodPromises = normalServers.map(async (server) => {
           try {
             const response = await api.api.k8s.servers({ serverId: server.id }).pods.get();
             return {
               serverId: server.id,
-              pods: (response.data as PodInfo[]) || [],
+              pods: assertResponse<PodInfo[]>(response, `Failed to load pods for ${server.id}`),
             };
           } catch (_err) {
             return { serverId: server.id, pods: [] };
@@ -46,7 +75,7 @@ export function useTopologyData() {
             }).pods.get();
             return {
               serverId: proxy.id,
-              pods: (response.data as PodInfo[]) || [],
+              pods: assertResponse<PodInfo[]>(response, `Failed to load pods for ${proxy.id}`),
             };
           } catch (_err) {
             return { serverId: proxy.id, pods: [] };
@@ -73,7 +102,10 @@ export function useTopologyData() {
             const response = await api.api.servers({ id: server.id })["connection-info"].get();
             return {
               serverId: server.id,
-              connectionInfo: response.data as ConnectionInfo,
+              connectionInfo: assertResponse<ConnectionInfo>(
+                response,
+                "Connection information unavailable"
+              ),
             };
           } catch (_err) {
             return { serverId: server.id, connectionInfo: null };
@@ -86,7 +118,10 @@ export function useTopologyData() {
             const response = await reverseProxyApi({ id: proxy.id })["connection-info"].get();
             return {
               serverId: proxy.id,
-              connectionInfo: response.data as ConnectionInfo,
+              connectionInfo: assertResponse<ConnectionInfo>(
+                response,
+                "Connection information unavailable"
+              ),
             };
           } catch (_err) {
             return { serverId: proxy.id, connectionInfo: null };
@@ -120,18 +155,49 @@ export function useTopologyData() {
         } catch (_err) {}
 
         const proxyBackends = new Map<string, string[]>();
-        try {
-          const crResponse = await api.api.k8s["reverse-proxy-servers"].get();
-          for (const cr of (crResponse.data as CustomResourceSummary[]) || []) {
+        const [serverCrResponse, proxyCrResponse] = await Promise.all([
+          api.api.k8s["minecraft-servers"].get(),
+          api.api.k8s["reverse-proxy-servers"].get(),
+        ]);
+        const serverCrs = assertResponse<CustomResourceSummary[]>(
+          serverCrResponse,
+          "Minecraft server status unavailable"
+        );
+        const proxyCrs = assertResponse<CustomResourceSummary[]>(
+          proxyCrResponse,
+          "Reverse proxy status unavailable"
+        );
+        const serverIdByK8sName = new Map(
+          normalServers.map((server) => [kubernetesResourceName(server.id), server.id])
+        );
+        for (const cr of serverCrs) {
+          if (!cr.name) continue;
+          const databaseId = cr.annotations?.[DATABASE_ID_LABEL] ?? cr.labels?.[DATABASE_ID_LABEL];
+          if (databaseId) serverIdByK8sName.set(cr.name, databaseId);
+        }
+
+        const proxyIdByK8sName = new Map(
+          reverseProxies.map((proxy) => [kubernetesResourceName(proxy.id), proxy.id])
+        );
+        for (const cr of proxyCrs) {
+          if (!cr.name) continue;
+          const databaseId = cr.annotations?.[DATABASE_ID_LABEL] ?? cr.labels?.[DATABASE_ID_LABEL];
+          if (databaseId) proxyIdByK8sName.set(cr.name, databaseId);
+        }
+
+        for (const cr of proxyCrs) {
           const backends = cr.status?.backends;
-            if (cr.name && Array.isArray(backends)) {
+          const proxyId = cr.name ? proxyIdByK8sName.get(cr.name) : undefined;
+          if (proxyId && Array.isArray(backends)) {
             proxyBackends.set(
-                cr.name,
-                backends.filter((id): id is string => typeof id === "string")
+              proxyId,
+              backends
+                .filter((id): id is string => typeof id === "string")
+                .map((id) => serverIdByK8sName.get(id))
+                .filter((id): id is string => Boolean(id))
             );
           }
         }
-        } catch (_err) {}
 
         const topologyGraph = buildTopologyGraph({
           servers: normalServers,
@@ -146,14 +212,17 @@ export function useTopologyData() {
           nodeMetrics,
         });
 
+        if (sequence === requestSequence.current) {
           setGraph(topologyGraph);
-        setIsInitialLoad(false);
+          setError(null);
+        }
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Failed to fetch topology data";
-        setError(errorMessage);
+        if (sequence === requestSequence.current) setError(getErrorMessage(err));
       } finally {
-        if (!isRefresh) {
-          setLoading(false);
+        if (sequence === requestSequence.current) {
+          setIsInitialLoad(false);
+          if (!isRefresh) setLoading(false);
+          setRefreshing(false);
         }
       }
     },
@@ -161,10 +230,10 @@ export function useTopologyData() {
   );
 
   useEffect(() => {
-    if (!serversLoading) {
+    if (!serversLoading && !serversError) {
       fetchTopologyData();
     }
-  }, [serversLoading, fetchTopologyData]);
+  }, [serversLoading, serversError, fetchTopologyData]);
 
   useEffect(() => {
     if (serversLoading || isInitialLoad) return;
@@ -178,8 +247,9 @@ export function useTopologyData() {
 
   return {
     graph,
-    loading: loading || serversLoading,
-    error,
+    loading: serversLoading || (loading && !serversError),
+    error: serversError || error,
+    refreshing,
     refresh: fetchTopologyData,
   };
 }

apps/web/lib/api-helpers.ts

@@ -1,12 +1,13 @@
 import { api } from "@/lib/api-client";
 
 type ReverseProxyApi = {
-  get: () => Promise<{ data?: unknown }>;
+  get: () => Promise<{ data?: unknown; error?: unknown }>;
   (params: {
     id: string;
   }): {
     delete: () => Promise<{ data?: unknown; error?: unknown }>;
-    "connection-info": { get: () => Promise<{ data?: unknown }> };
+    patch: (body: unknown) => Promise<{ data?: unknown; error?: unknown }>;
+    "connection-info": { get: () => Promise<{ data?: unknown; error?: unknown }> };
   };
 };
 

apps/web/lib/motion.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+
+gsap.registerPlugin(useGSAP);
+
+export const motionEase = {
+  out: "power3.out",
+  inOut: "power2.inOut",
+  expo: "expo.out",
+  snap: "power4.out",
+} as const;
+
+export const motionDuration = {
+  fast: 0.32,
+  base: 0.55,
+  slow: 0.85,
+} as const;
+
+export function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export { gsap, useGSAP };

apps/web/lib/topology-utils.ts

@@ -71,7 +71,7 @@ function parseProxyServerConnections(
 ): string[] {
   const backends = backendsByProxyId?.get(proxy.id);
   if (!backends) {
-    return allServers.map((s) => s.id);
+    return [];
   }
   const known = new Set(allServers.map((s) => s.id));
   return backends.filter((id) => known.has(id));

apps/web/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@elysiajs/eden": "^1.4.9",
+    "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^5.7.1",
     "@minikura/api": "workspace:*",
     "@minikura/backend": "workspace:*",
@@ -53,6 +54,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "elysia": "^1.4.29",
+    "gsap": "^3.15.0",
     "lucide-react": "^1.31.0",
     "next": "^16.3.0",
     "next-themes": "^0.4.6",

bun.lock

@@ -46,6 +46,7 @@
       "name": "@minikura/web",
       "dependencies": {
         "@elysiajs/eden": "^1.4.9",
+        "@gsap/react": "^2.1.2",
         "@hookform/resolvers": "^5.7.1",
         "@minikura/api": "workspace:*",
         "@minikura/backend": "workspace:*",
@@ -79,6 +80,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "elysia": "^1.4.29",
+        "gsap": "^3.15.0",
         "lucide-react": "^1.31.0",
         "next": "^16.3.0",
         "next-themes": "^0.4.6",
@@ -260,6 +262,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
+    "@gsap/react": ["@gsap/react@2.1.2", "", { "peerDependencies": { "gsap": "^3.12.5", "react": ">=17" } }, "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw=="],
+
     "@hookform/resolvers": ["@hookform/resolvers@5.7.1", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "@sinclair/typebox": ">=0.25.24", "@standard-schema/spec": "^1.0.0", "@typeschema/main": ">=0.13.7", "@vinejs/vine": "^2.0.0 || ^3.0.0 || ^4.0.0", "ajv": "^8.12.0", "ajv-errors": "^3.0.0", "ajv-formats": "^2.1.1", "arktype": "^2.0.0", "ata-validator": "^1.2.0", "class-transformer": ">=0.4.0", "class-validator": ">=0.12.0", "computed-types": "^1.0.0", "effect": "^3.10.3", "fluentvalidation-ts": "^3.0.0", "fp-ts": "^2.7.0", "io-ts": "^2.0.0", "joi": "^17.0.0", "nope-validator": ">=0.12.0", "react-hook-form": "^7.55.0", "superstruct": ">=0.12.0", "typanion": "^3.3.2", "valibot": ">=0.31.0 || ^1.0.0-beta.4 || ^1.0.0-rc", "vest": ">=3.0.0", "yup": "^1.0.0", "zod": "^3.25.0 || ^4.0.0" }, "optionalPeers": ["@sinclair/typebox", "@standard-schema/spec", "@typeschema/main", "@vinejs/vine", "ajv", "ajv-errors", "ajv-formats", "arktype", "ata-validator", "class-transformer", "class-validator", "computed-types", "effect", "fluentvalidation-ts", "fp-ts", "io-ts", "joi", "nope-validator", "superstruct", "typanion", "valibot", "vest", "yup", "zod"] }, "sha512-8wS/P4UDr5sQDe4nFaV51TVyfDPrWgNIXweqG0Bs9Z5LSuzKLb+RQNPvkN2oHM5SRrJyWrVH/F+LOUcFjUyvwQ=="],
 
     "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
@@ -1002,6 +1006,8 @@
 
     "graphmatch": ["graphmatch@1.1.1", "", {}, "sha512-5ykVn/EXM1hF0XCaWh05VbYvEiOL2lY1kBxZtaYsyvjp7cmWOU1XsAdfQBwClraEofXDT197lFbXOEVMHpvQOg=="],
 
+    "gsap": ["gsap@3.15.0", "", {}, "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A=="],
+
     "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
 
     "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],