diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index a406585..771777b 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fontsource-variable/inter": "^5.3.0",
         "@fontsource-variable/sora": "^5.3.0",
+        "@gsap/react": "^2.1.2",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-popover": "^1.1.15",
@@ -27,6 +28,8 @@
         "idb": "^8.0.4",
         "lenis": "^1.3.27",
         "lucide-react": "^1.61.0",
+        "motion": "^14.6.0",
+        "ogl": "^1.0.11",
         "react": "^19.3.1",
         "react-dom": "^19.3.1",
         "react-router-dom": "^7.18.4",
@@ -576,6 +579,16 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@gsap/react": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
+      "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
+      "license": "SEE LICENSE AT https://gsap.com/standard-license",
+      "peerDependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=17"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -3862,6 +3875,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/motion": {
+      "version": "14.6.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-14.6.0.tgz",
+      "integrity": "sha512-qqaZbyubgk7x3zxjPgP1l3Br/KQXol/IIV1uqb358SoN4ApcqNuV7+wyDPg/XLErmuyQL5lL8JVI/fOmDsmBKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "14.6.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
       "version": "14.6.0",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-14.6.0.tgz",
@@ -3910,6 +3945,12 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/ogl": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
+      "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
+      "license": "Unlicense"
+    },
     "node_modules/parse5": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
diff --git a/dashboard/package.json b/dashboard/package.json
index 53566e7..36a0060 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/sora": "^5.3.0",
+    "@gsap/react": "^2.1.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
@@ -33,6 +34,8 @@
     "idb": "^8.0.4",
     "lenis": "^1.3.27",
     "lucide-react": "^1.61.0",
+    "motion": "^14.6.0",
+    "ogl": "^1.0.11",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-router-dom": "^7.18.4",
diff --git a/dashboard/src/animations/motion.ts b/dashboard/src/animations/motion.ts
new file mode 100644
index 0000000..58c84b2
--- /dev/null
+++ b/dashboard/src/animations/motion.ts
@@ -0,0 +1,23 @@
+import type { Transition, Variants } from "framer-motion";
+
+export const motionTiming = {
+  card: 0.38,
+  chart: 0.76,
+  page: 0.32,
+  stagger: 0.055,
+} as const;
+
+export const motionEase = {
+  interface: [0.23, 1, 0.32, 1] as const,
+  exit: [0.4, 0, 1, 1] as const,
+};
+
+export const pageVariants: Variants = {
+  initial: { opacity: 0, y: 9, filter: "blur(2px)" },
+  enter: { opacity: 1, y: 0, filter: "blur(0px)" },
+};
+
+export const pageTransition: Transition = {
+  duration: motionTiming.page,
+  ease: motionEase.interface,
+};
diff --git a/dashboard/src/animations/theme-transition.ts b/dashboard/src/animations/theme-transition.ts
new file mode 100644
index 0000000..93b27bf
--- /dev/null
+++ b/dashboard/src/animations/theme-transition.ts
@@ -0,0 +1,62 @@
+import { flushSync } from "react-dom";
+
+export function transitionTheme(
+  origin: HTMLElement | null,
+  next: "light" | "dark",
+  apply: () => void,
+) {
+  const root = document.documentElement;
+  const reduced =
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    root.dataset.motion === "reduced" ||
+    root.dataset.performance === "on";
+  const start = () => {
+    root.dataset.theme = next;
+    root.style.colorScheme = next;
+    apply();
+  };
+
+  if (reduced || typeof document.startViewTransition !== "function") {
+    flushSync(start);
+    return;
+  }
+
+  const rect = origin?.getBoundingClientRect();
+  const x = rect ? rect.left + rect.width / 2 : innerWidth / 2;
+  const y = rect ? rect.top + rect.height / 2 : innerHeight / 2;
+  const radius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+  root.dataset.themeTransition = "active";
+  let transition: ViewTransition;
+  try {
+    transition = document.startViewTransition(() => flushSync(start));
+  } catch {
+    delete root.dataset.themeTransition;
+    flushSync(start);
+    return;
+  }
+  transition.finished
+    .finally(() => {
+      delete root.dataset.themeTransition;
+    })
+    .catch(() => undefined);
+  transition.ready
+    .then(() => {
+      root.animate(
+        {
+          clipPath: [
+            `circle(0 at ${x}px ${y}px)`,
+            `circle(${radius}px at ${x}px ${y}px)`,
+          ],
+        },
+        {
+          duration: 520,
+          easing: "cubic-bezier(0.23, 1, 0.32, 1)",
+          pseudoElement: "::view-transition-new(root)",
+        },
+      );
+    })
+    .catch(() => undefined);
+}
diff --git a/dashboard/src/components/AppShell.tsx b/dashboard/src/components/AppShell.tsx
index 069ec7a..e947fab 100644
--- a/dashboard/src/components/AppShell.tsx
+++ b/dashboard/src/components/AppShell.tsx
@@ -12,6 +12,7 @@ import {
   Grid2X2,
   Layers3,
   Menu,
+  Puzzle,
   Search,
   Settings,
   Sparkles,
@@ -22,9 +23,12 @@ import {
 import type { KeyboardEvent as ReactKeyboardEvent } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { pageTransition, pageVariants } from "../animations/motion";
 import { useDashboardStore } from "../state/useDashboardStore";
 import { BranchedMenu } from "./BranchedMenu";
 import { Dock } from "./Dock";
+import { BellToggle } from "./react-bits/controls";
+import { AnimatedThemeToggler } from "./react-bits/utilities";
 import { Button } from "./ui";
 
 const navItems = [
@@ -37,6 +41,7 @@ const navItems = [
   { label: "AI Software", to: "/software", icon: TerminalSquare },
   { label: "Tasks", to: "/tasks", icon: Activity },
   { label: "Monitoring", to: "/monitoring", icon: Gauge },
+  { label: "Component Lab", to: "/component-lab", icon: Puzzle },
   { label: "Activity", to: "/activity", icon: Bell },
 ];
 const routeNames: Record<string, string> = {
@@ -51,6 +56,7 @@ const routeNames: Record<string, string> = {
   "/monitoring": "Monitoring",
   "/activity": "Activity",
   "/settings": "Settings",
+  "/component-lab": "Component Lab",
 };
 const branchedItems = [
   { label: "Overview", value: "/", icon: <Grid2X2 size={16} /> },
@@ -66,6 +72,11 @@ const branchedItems = [
       { value: "/nodes", label: "Nodes", icon: <Cpu size={16} /> },
       { value: "/monitoring", label: "Monitoring", icon: <Gauge size={16} /> },
       { value: "/activity", label: "Activity", icon: <Bell size={16} /> },
+      {
+        value: "/component-lab",
+        label: "Component Lab",
+        icon: <Puzzle size={16} />,
+      },
     ],
   },
   {
@@ -113,6 +124,7 @@ export function AppShell() {
   const collapsed = useDashboardStore((s) => s.sidebarCollapsed);
   const toggleSidebar = useDashboardStore((s) => s.toggleSidebar);
   const theme = useDashboardStore((s) => s.theme);
+  const setTheme = useDashboardStore((s) => s.setTheme);
   const demoMotion = useDashboardStore((s) => s.demoMotion);
   const compactDashboard = useDashboardStore((s) => s.compactDashboard);
   const performanceMode = useDashboardStore((s) => s.performanceMode);
@@ -123,12 +135,28 @@ export function AppShell() {
     (s) => s.clearPersistenceError,
   );
   const prefersReducedMotion = useReducedMotion();
+  const [systemTheme, setSystemTheme] = useState<"light" | "dark">("light");
   const [searchOpen, setSearchOpen] = useState(false);
+  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
   const [query, setQuery] = useState("");
   const searchInput = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const readPreference = () =>
+      setNotificationsEnabled(
+        localStorage.getItem("opencluster.notifications") !== "false",
+      );
+    readPreference();
+    window.addEventListener("opencluster:notifications-change", readPreference);
+    return () =>
+      window.removeEventListener(
+        "opencluster:notifications-change",
+        readPreference,
+      );
+  }, []);
   useEffect(() => {
     const media = window.matchMedia("(prefers-color-scheme: light)");
     const updateTheme = () => {
+      setSystemTheme(media.matches ? "light" : "dark");
       document.documentElement.dataset.theme =
         theme === "system" ? (media.matches ? "light" : "dark") : theme;
     };
@@ -292,6 +320,12 @@ export function AppShell() {
             <strong>{routeNames[location.pathname] ?? "Dashboard"}</strong>
           </div>
           <div className="top-actions">
+            <AnimatedThemeToggler
+              theme={theme === "system" ? systemTheme : theme}
+              onThemeChange={setTheme}
+              className="top-theme-toggle"
+              title="Change dashboard theme"
+            />
             <Button
               variant="secondary"
               className="search-trigger"
@@ -305,12 +339,27 @@ export function AppShell() {
             </Button>
             <Button
               variant="ghost"
-              aria-label="Notifications"
+              aria-label="Activity"
               onClick={() => navigate("/activity")}
             >
-              <Bell size={17} />
-              <span className="notification-dot" />
+              <Activity size={17} />
+              {notificationsEnabled && <span className="notification-dot" />}
             </Button>
+            <BellToggle
+              checked={notificationsEnabled}
+              onCheckedChange={(enabled) => {
+                localStorage.setItem(
+                  "opencluster.notifications",
+                  String(enabled),
+                );
+                setNotificationsEnabled(enabled);
+                window.dispatchEvent(
+                  new Event("opencluster:notifications-change"),
+                );
+              }}
+              label="Activity notifications"
+              className="top-notification-toggle"
+            />
             <span className="top-divider" />
             <div className="top-avatar" title="Demo operator">
               OC
@@ -338,11 +387,12 @@ export function AppShell() {
               className="page-transition"
               initial={
                 demoMotion && !performanceMode && !prefersReducedMotion
-                  ? { opacity: 0, y: 8 }
+                  ? "initial"
                   : false
               }
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.24, ease: "easeOut" }}
+              animate="enter"
+              variants={pageVariants}
+              transition={pageTransition}
             >
               <Outlet />
             </motion.div>
diff --git a/dashboard/src/components/Charts.tsx b/dashboard/src/components/Charts.tsx
index b90f809..a230ad5 100644
--- a/dashboard/src/components/Charts.tsx
+++ b/dashboard/src/components/Charts.tsx
@@ -1,3 +1,5 @@
+import { useReducedMotion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
 import {
   Area,
   AreaChart,
@@ -7,6 +9,7 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
+import { motionTiming } from "../animations/motion";
 import type { TelemetryPoint } from "../data/models";
 import { useLocalCollection } from "../data/useDashboardData";
 
@@ -21,6 +24,7 @@ export function ResourceChart({
   range?: "15m" | "1h" | "24h" | "7d";
   compareMemory?: boolean;
 }) {
+  const prefersReducedMotion = useReducedMotion();
   const { data: telemetry = [] } =
     useLocalCollection<TelemetryPoint>("telemetry");
   const series =
@@ -63,6 +67,38 @@ export function ResourceChart({
             ? `${index * 5} min`
             : point.time,
   }));
+
+  const animationKey = `${metric}:${range}:${compareMemory ? "compare" : "single"}`;
+  const [completedKey, setCompletedKey] = useState<string | null>(null);
+  const chartSnapshot = useRef<{
+    key: string;
+    data: typeof data;
+  } | null>(null);
+  if (
+    chartSnapshot.current?.key !== animationKey ||
+    !data.length ||
+    prefersReducedMotion ||
+    completedKey === animationKey
+  ) {
+    chartSnapshot.current = { key: animationKey, data };
+  }
+  const animateChart = !prefersReducedMotion && completedKey !== animationKey;
+  const chartData = animateChart ? (chartSnapshot.current?.data ?? data) : data;
+
+  useEffect(() => {
+    if (!data.length) return undefined;
+    if (prefersReducedMotion) {
+      setCompletedKey(animationKey);
+      return undefined;
+    }
+    if (completedKey === animationKey) return undefined;
+
+    const timeout = window.setTimeout(() => {
+      setCompletedKey(animationKey);
+    }, motionTiming.chart * 1000);
+    return () => window.clearTimeout(timeout);
+  }, [animationKey, completedKey, data.length, prefersReducedMotion]);
+
   if (!data.length)
     return (
       <div className="chart-empty" role="status">
@@ -73,7 +109,8 @@ export function ResourceChart({
     <div className={`chart-wrap ${compact ? "chart-compact" : ""}`}>
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart
-          data={data}
+          key={animationKey}
+          data={chartData}
           margin={{ top: 8, right: 8, left: -20, bottom: 0 }}
         >
           <defs>
@@ -127,7 +164,9 @@ export function ResourceChart({
               stroke={s.color}
               strokeWidth={2}
               fill={`url(#fill-${s.key})`}
-              isAnimationActive={false}
+              isAnimationActive={animateChart}
+              animationDuration={motionTiming.chart * 1000}
+              animationEasing="ease-out"
             />
           ))}
         </AreaChart>
diff --git a/dashboard/src/components/react-bits/controls/BellButton.tsx b/dashboard/src/components/react-bits/controls/BellButton.tsx
new file mode 100644
index 0000000..2fa022f
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/BellButton.tsx
@@ -0,0 +1,45 @@
+import { Bell, BellOff } from "lucide-react";
+import { useState } from "react";
+
+export interface BellButtonProps {
+  subscribed?: boolean;
+  defaultSubscribed?: boolean;
+  onSubscribedChange?: (subscribed: boolean) => void;
+  count?: number;
+  label?: string;
+  subscribedLabel?: string;
+  className?: string;
+}
+/** Local notification preference control; it does not request browser permissions. */
+export function BellButton({
+  subscribed: controlled,
+  defaultSubscribed = false,
+  onSubscribedChange,
+  count = 0,
+  label = "Notify me",
+  subscribedLabel = "Notifications on",
+  className = "",
+}: BellButtonProps) {
+  const [internal, setInternal] = useState(defaultSubscribed);
+  const active = controlled ?? internal;
+  return (
+    <button
+      aria-label={`${active ? subscribedLabel : label}${count ? `, ${count} notifications` : ""}`}
+      aria-pressed={active}
+      className={`rb-bell-button ${className}`}
+      onClick={() => {
+        const next = !active;
+        if (controlled === undefined) setInternal(next);
+        onSubscribedChange?.(next);
+      }}
+      type="button"
+    >
+      <span aria-hidden="true">
+        {active ? <Bell size={17} /> : <BellOff size={17} />}
+      </span>
+      <span>{active ? subscribedLabel : label}</span>
+      {count > 0 && <span className="rb-bell-count">{count}</span>}
+    </button>
+  );
+}
+export default BellButton;
diff --git a/dashboard/src/components/react-bits/controls/BellToggle.tsx b/dashboard/src/components/react-bits/controls/BellToggle.tsx
new file mode 100644
index 0000000..3611ca7
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/BellToggle.tsx
@@ -0,0 +1,39 @@
+import { Bell, BellOff } from "lucide-react";
+import { useState } from "react";
+
+export interface BellToggleProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  label?: string;
+  className?: string;
+}
+
+export function BellToggle({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  label = "Notifications",
+  className = "",
+}: BellToggleProps) {
+  const [internal, setInternal] = useState(defaultChecked);
+  const active = checked ?? internal;
+  return (
+    <button
+      aria-checked={active}
+      aria-label={label}
+      className={`rb-bell-toggle ${className}`}
+      onClick={() => {
+        const next = !active;
+        if (checked === undefined) setInternal(next);
+        onCheckedChange?.(next);
+      }}
+      role="switch"
+      type="button"
+    >
+      {active ? <Bell size={17} /> : <BellOff size={17} />}
+    </button>
+  );
+}
+
+export default BellToggle;
diff --git a/dashboard/src/components/react-bits/controls/LatticeLoader.tsx b/dashboard/src/components/react-bits/controls/LatticeLoader.tsx
new file mode 100644
index 0000000..417ab7c
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/LatticeLoader.tsx
@@ -0,0 +1,25 @@
+export interface LatticeLoaderProps {
+  label?: string;
+  size?: number;
+  className?: string;
+}
+export function LatticeLoader({
+  label = "Loading",
+  size = 32,
+  className = "",
+}: LatticeLoaderProps) {
+  return (
+    <span
+      aria-label={label}
+      className={`rb-lattice-loader ${className}`}
+      role="status"
+      style={{ width: size, height: size }}
+    >
+      <span />
+      <span />
+      <span />
+      <span />
+    </span>
+  );
+}
+export default LatticeLoader;
diff --git a/dashboard/src/components/react-bits/controls/ParticleButton.tsx b/dashboard/src/components/react-bits/controls/ParticleButton.tsx
new file mode 100644
index 0000000..26d6fd1
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/ParticleButton.tsx
@@ -0,0 +1,109 @@
+import { AlertCircle, Check, LoaderCircle } from "lucide-react";
+import {
+  type ButtonHTMLAttributes,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+type Status = "idle" | "pending" | "success" | "error";
+export interface ParticleButtonProps
+  extends Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    "onClick" | "children"
+  > {
+  children: ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
+  pendingLabel?: ReactNode;
+  successLabel?: ReactNode;
+  errorLabel?: ReactNode;
+  successDuration?: number;
+  errorDuration?: number;
+  onError?: (error: unknown) => void;
+}
+export function ParticleButton({
+  children,
+  onClick,
+  pendingLabel = "Saving…",
+  successLabel = "Saved",
+  errorLabel = "Try again",
+  successDuration = 1600,
+  errorDuration = 3200,
+  onError,
+  className = "",
+  disabled,
+  ...props
+}: ParticleButtonProps) {
+  const [status, setStatus] = useState<Status>("idle");
+  const run = useRef(0);
+  const timer = useRef<number | undefined>(undefined);
+  useEffect(
+    () => () => {
+      run.current++;
+      window.clearTimeout(timer.current);
+    },
+    [],
+  );
+  const settle = (next: "success" | "error") => {
+    setStatus(next);
+    timer.current = window.setTimeout(
+      () => setStatus("idle"),
+      next === "success" ? successDuration : errorDuration,
+    );
+  };
+  const handleClick: ButtonHTMLAttributes<HTMLButtonElement>["onClick"] = (
+    event,
+  ) => {
+    if (status === "pending") return;
+    const result = onClick?.(event as React.MouseEvent<HTMLButtonElement>);
+    if (event.defaultPrevented) return;
+    if (result && typeof (result as PromiseLike<unknown>).then === "function") {
+      const current = ++run.current;
+      setStatus("pending");
+      Promise.resolve(result).then(
+        () => {
+          if (run.current === current) settle("success");
+        },
+        (error: unknown) => {
+          if (run.current === current) {
+            settle("error");
+            onError?.(error);
+          }
+        },
+      );
+    } else settle("success");
+  };
+  const content =
+    status === "pending" ? (
+      <>
+        <LoaderCircle className="rb-spin" size={16} />
+        {pendingLabel}
+      </>
+    ) : status === "success" ? (
+      <>
+        <Check size={16} />
+        {successLabel}
+      </>
+    ) : status === "error" ? (
+      <>
+        <AlertCircle size={16} />
+        {errorLabel}
+      </>
+    ) : (
+      children
+    );
+  return (
+    <button
+      {...props}
+      aria-busy={status === "pending" || undefined}
+      className={`rb-particle-button ${className}`}
+      disabled={disabled || status === "pending"}
+      onClick={handleClick}
+      type="button"
+    >
+      {content}
+    </button>
+  );
+}
+export default ParticleButton;
diff --git a/dashboard/src/components/react-bits/controls/PromptBar.tsx b/dashboard/src/components/react-bits/controls/PromptBar.tsx
new file mode 100644
index 0000000..480c7ee
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/PromptBar.tsx
@@ -0,0 +1,68 @@
+import { ArrowUp, Paperclip } from "lucide-react";
+import { type FormEvent, type TextareaHTMLAttributes, useState } from "react";
+
+export interface PromptBarProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onSubmit"> {
+  onSend: (prompt: string) => void | Promise<void>;
+  placeholder?: string;
+  disabled?: boolean;
+  attachments?: boolean;
+}
+
+/** A local prompt composer. It sends text to the caller and has no AI service. */
+export function PromptBar({
+  onSend,
+  placeholder = "Ask about your cluster...",
+  disabled = false,
+  attachments = false,
+  className = "",
+  ...props
+}: PromptBarProps) {
+  const [value, setValue] = useState("");
+  const [sending, setSending] = useState(false);
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    const prompt = value.trim();
+    if (!prompt || disabled || sending) return;
+    setSending(true);
+    try {
+      await onSend(prompt);
+      setValue("");
+    } finally {
+      setSending(false);
+    }
+  };
+  return (
+    <form className={`rb-prompt-bar ${className}`} onSubmit={submit}>
+      {attachments && (
+        <button type="button" aria-label="Attachments unavailable" disabled>
+          <Paperclip size={16} />
+        </button>
+      )}
+      <textarea
+        {...props}
+        aria-label={props["aria-label"] ?? "Prompt"}
+        disabled={disabled || sending}
+        onChange={(event) => setValue(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            event.currentTarget.form?.requestSubmit();
+          }
+        }}
+        placeholder={placeholder}
+        rows={1}
+        value={value}
+      />
+      <button
+        aria-label="Send prompt"
+        disabled={disabled || sending || !value.trim()}
+        type="submit"
+      >
+        <ArrowUp size={17} />
+      </button>
+    </form>
+  );
+}
+
+export default PromptBar;
diff --git a/dashboard/src/components/react-bits/controls/StatusMark.tsx b/dashboard/src/components/react-bits/controls/StatusMark.tsx
new file mode 100644
index 0000000..06fec80
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/StatusMark.tsx
@@ -0,0 +1,51 @@
+import {
+  Check,
+  Circle,
+  CircleAlert,
+  CircleOff,
+  LoaderCircle,
+} from "lucide-react";
+
+export type StatusMarkStatus =
+  | "success"
+  | "warning"
+  | "error"
+  | "pending"
+  | "idle";
+const icons = {
+  success: Check,
+  warning: CircleAlert,
+  error: CircleOff,
+  pending: LoaderCircle,
+  idle: Circle,
+};
+const labels: Record<StatusMarkStatus, string> = {
+  success: "Complete",
+  warning: "Needs attention",
+  error: "Failed",
+  pending: "In progress",
+  idle: "Not started",
+};
+
+export function StatusMark({
+  status,
+  label,
+  className = "",
+}: {
+  status: StatusMarkStatus;
+  label?: string;
+  className?: string;
+}) {
+  const Icon = icons[status];
+  return (
+    <span
+      className={`rb-status-mark rb-status-${status} ${className}`}
+      role="status"
+    >
+      <Icon aria-hidden="true" size={15} />
+      {label ?? labels[status]}
+    </span>
+  );
+}
+
+export default StatusMark;
diff --git a/dashboard/src/components/react-bits/controls/SwipeRow.tsx b/dashboard/src/components/react-bits/controls/SwipeRow.tsx
new file mode 100644
index 0000000..77b92f1
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/SwipeRow.tsx
@@ -0,0 +1,56 @@
+import { motion, useReducedMotion } from "framer-motion";
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+
+export interface SwipeRowProps {
+  children: ReactNode;
+  actions: ReactNode;
+  className?: string;
+  label?: string;
+}
+
+/** Reveals caller-provided actions on a horizontal drag; actions stay keyboard reachable. */
+export function SwipeRow({
+  children,
+  actions,
+  className = "",
+  label = "Row actions",
+}: SwipeRowProps) {
+  const reduced = useReducedMotion();
+  const actionsRef = useRef<HTMLFieldSetElement>(null);
+  const [width, setWidth] = useState(0);
+  const [open, setOpen] = useState(false);
+  useLayoutEffect(() => {
+    const element = actionsRef.current;
+    if (!element) return;
+    const measure = () => setWidth(element.scrollWidth);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return (
+    <div className={`rb-swipe-row ${className}`}>
+      <fieldset
+        aria-label={label}
+        className="rb-swipe-actions"
+        ref={actionsRef}
+      >
+        {actions}
+      </fieldset>
+      <motion.div
+        className="rb-swipe-content"
+        animate={{ x: open ? -width : 0 }}
+        drag={reduced ? false : "x"}
+        dragConstraints={{ left: -width, right: 0 }}
+        dragElastic={0.08}
+        onDragEnd={(_, info) => {
+          setOpen(info.offset.x < -48);
+        }}
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
+
+export default SwipeRow;
diff --git a/dashboard/src/components/react-bits/controls/SwitchButton.tsx b/dashboard/src/components/react-bits/controls/SwitchButton.tsx
new file mode 100644
index 0000000..2d3a1cc
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/SwitchButton.tsx
@@ -0,0 +1,36 @@
+import { Moon, Sun } from "lucide-react";
+import type { ButtonHTMLAttributes } from "react";
+
+export interface SwitchButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  theme: "light" | "dark";
+  onThemeChange: (theme: "light" | "dark") => void;
+  showLabel?: boolean;
+}
+export function SwitchButton({
+  theme,
+  onThemeChange,
+  showLabel = true,
+  className = "",
+  ...props
+}: SwitchButtonProps) {
+  const next = theme === "dark" ? "light" : "dark";
+  return (
+    <button
+      {...props}
+      aria-label={`Switch to ${next} theme`}
+      className={`rb-switch-button ${className}`}
+      onClick={(event) => {
+        props.onClick?.(event);
+        if (!event.defaultPrevented) onThemeChange(next);
+      }}
+      type="button"
+    >
+      <span aria-hidden="true">
+        {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
+      </span>
+      {showLabel && <span>{next === "dark" ? "Dark" : "Light"}</span>}
+    </button>
+  );
+}
+export default SwitchButton;
diff --git a/dashboard/src/components/react-bits/controls/controls.css b/dashboard/src/components/react-bits/controls/controls.css
new file mode 100644
index 0000000..c841051
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/controls.css
@@ -0,0 +1,138 @@
+.rb-prompt-bar,
+.rb-bell-toggle,
+.rb-bell-button,
+.rb-switch-button,
+.rb-particle-button {
+  font: inherit;
+  color: inherit;
+}
+.rb-prompt-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.55rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid rgb(128 128 128 / 0.25);
+  border-radius: 1rem;
+  background: rgb(128 128 128 / 0.06);
+}
+.rb-prompt-bar textarea {
+  flex: 1;
+  min-width: 0;
+  max-height: 12rem;
+  resize: vertical;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.rb-prompt-bar button,
+.rb-bell-toggle,
+.rb-bell-button,
+.rb-switch-button,
+.rb-particle-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid rgb(128 128 128 / 0.25);
+  border-radius: 0.65rem;
+  padding: 0.5rem 0.7rem;
+  background: transparent;
+  cursor: pointer;
+}
+.rb-prompt-bar button:disabled,
+.rb-particle-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.rb-status-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+}
+.rb-status-success {
+  color: #16a34a;
+}
+.rb-status-warning {
+  color: #d97706;
+}
+.rb-status-error {
+  color: #dc2626;
+}
+.rb-status-pending {
+  color: #2563eb;
+}
+.rb-status-pending svg,
+.rb-spin {
+  animation: rb-spin 1s linear infinite;
+}
+.rb-swipe-row {
+  position: relative;
+  overflow: hidden;
+}
+.rb-swipe-actions {
+  position: absolute;
+  inset: 0 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.rb-swipe-content {
+  position: relative;
+  touch-action: pan-y;
+}
+.rb-lattice-loader {
+  display: inline-grid;
+  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
+  gap: 3px;
+  vertical-align: middle;
+  animation: rb-lattice 1.1s ease-in-out infinite;
+}
+.rb-lattice-loader span {
+  border-radius: 2px;
+  background: currentColor;
+  animation: rb-cell 1.1s ease-in-out infinite;
+}
+.rb-lattice-loader span:nth-child(2) {
+  animation-delay: 0.12s;
+}
+.rb-lattice-loader span:nth-child(3) {
+  animation-delay: 0.24s;
+}
+.rb-lattice-loader span:nth-child(4) {
+  animation-delay: 0.36s;
+}
+.rb-bell-count {
+  font-size: 0.7em;
+  opacity: 0.7;
+}
+@keyframes rb-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rb-lattice {
+  50% {
+    transform: rotate(90deg);
+  }
+}
+@keyframes rb-cell {
+  50% {
+    opacity: 0.25;
+    transform: scale(0.65);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .rb-lattice-loader,
+  .rb-lattice-loader span,
+  .rb-status-pending svg,
+  .rb-spin {
+    animation: none;
+  }
+}
diff --git a/dashboard/src/components/react-bits/controls/index.ts b/dashboard/src/components/react-bits/controls/index.ts
new file mode 100644
index 0000000..72e71e1
--- /dev/null
+++ b/dashboard/src/components/react-bits/controls/index.ts
@@ -0,0 +1,18 @@
+import "./controls.css";
+
+export type { BellButtonProps } from "./BellButton";
+export { BellButton } from "./BellButton";
+export type { BellToggleProps } from "./BellToggle";
+export { BellToggle } from "./BellToggle";
+export type { LatticeLoaderProps } from "./LatticeLoader";
+export { LatticeLoader } from "./LatticeLoader";
+export type { ParticleButtonProps } from "./ParticleButton";
+export { ParticleButton } from "./ParticleButton";
+export type { PromptBarProps } from "./PromptBar";
+export { PromptBar } from "./PromptBar";
+export type { StatusMarkStatus } from "./StatusMark";
+export { StatusMark } from "./StatusMark";
+export type { SwipeRowProps } from "./SwipeRow";
+export { SwipeRow } from "./SwipeRow";
+export type { SwitchButtonProps } from "./SwitchButton";
+export { SwitchButton } from "./SwitchButton";
diff --git a/dashboard/src/components/react-bits/text/BlurText.tsx b/dashboard/src/components/react-bits/text/BlurText.tsx
new file mode 100644
index 0000000..096d2f4
--- /dev/null
+++ b/dashboard/src/components/react-bits/text/BlurText.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { type Easing, MotionConfig, motion } from "motion/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export type BlurTextEffect = "blur" | "zoom" | "tilt" | "focus" | "drift";
+export type BlurTextProps = {
+  text?: string;
+  delay?: number;
+  className?: string;
+  animateBy?: "words" | "letters";
+  direction?: "top" | "bottom" | "left" | "right";
+  threshold?: number;
+  rootMargin?: string;
+  animationFrom?: Record<string, string | number>;
+  animationTo?: Array<Record<string, string | number>>;
+  easing?: Easing | Easing[];
+  onAnimationComplete?: () => void;
+  stepDuration?: number;
+  blur?: number;
+  distance?: number;
+  effect?: BlurTextEffect;
+  staggerFrom?: "start" | "center" | "end" | "random";
+  trigger?: "view" | "load" | "hover" | "click";
+  loop?: boolean;
+  loopDelay?: number;
+  color?: string;
+  fromColor?: string;
+  focusOnHover?: boolean;
+};
+
+const easeOut: Easing = [0.33, 1, 0.68, 1];
+const ranksFor = (
+  n: number,
+  origin: NonNullable<BlurTextProps["staggerFrom"]>,
+) =>
+  Array.from({ length: n }, (_, i) =>
+    origin === "end"
+      ? n - i - 1
+      : origin === "center"
+        ? Math.abs(i - (n - 1) / 2)
+        : i,
+  );
+
+/** Word or letter reveal with view, load, hover and click triggers. */
+export default function BlurText({
+  text = "",
+  delay = 200,
+  className = "",
+  animateBy = "words",
+  direction = "top",
+  threshold = 0.1,
+  rootMargin = "0px",
+  animationFrom,
+  animationTo,
+  easing,
+  onAnimationComplete,
+  stepDuration = 0.35,
+  blur = 10,
+  distance = 50,
+  effect = "blur",
+  staggerFrom = "start",
+  trigger = "view",
+  loop = false,
+  loopDelay = 2,
+  color,
+  fromColor,
+  focusOnHover = false,
+}: BlurTextProps) {
+  const root = useRef<HTMLParagraphElement>(null);
+  const [active, setActive] = useState(trigger === "load");
+  const [replay, setReplay] = useState(0);
+  const [focus, setFocus] = useState(-1);
+  const pieces = useMemo(
+    () =>
+      animateBy === "words"
+        ? text.split(/(\s+)/).filter(Boolean)
+        : Array.from(text),
+    [text, animateBy],
+  );
+  const ranks = ranksFor(pieces.length, staggerFrom);
+  useEffect(() => {
+    if (trigger !== "view" || !root.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setActive(true);
+          observer.disconnect();
+        }
+      },
+      { threshold, rootMargin },
+    );
+    observer.observe(root.current);
+    return () => observer.disconnect();
+  }, [trigger, threshold, rootMargin]);
+  useEffect(() => {
+    if (trigger !== "hover" && trigger !== "click") return;
+    setActive(false);
+  }, [trigger]);
+  useEffect(() => {
+    if (!loop || !active) return;
+    const timer = window.setTimeout(
+      () => setReplay((n) => n + 1),
+      Math.max(0, loopDelay) * 1000,
+    );
+    return () => window.clearTimeout(timer);
+  }, [loop, loopDelay, active]);
+  const offset =
+    direction === "bottom"
+      ? distance
+      : direction === "left"
+        ? -distance
+        : direction === "right"
+          ? distance
+          : -distance;
+  const axis = direction === "left" || direction === "right" ? "x" : "y";
+  const from =
+    animationFrom ??
+    (effect === "zoom"
+      ? {
+          opacity: 0,
+          scale: 1.35,
+          filter: `blur(${blur}px)`,
+          [axis]: offset * 0.35,
+        }
+      : effect === "tilt"
+        ? { opacity: 0, rotateX: 45, filter: `blur(${blur}px)`, [axis]: offset }
+        : effect === "focus"
+          ? { opacity: 0.35, scale: 1.1, filter: `blur(${blur * 1.4}px)` }
+          : effect === "drift"
+            ? {
+                opacity: 0,
+                x: direction === "right" ? distance : -distance,
+                skewX: 18,
+                filter: `blur(${blur}px)`,
+              }
+            : { opacity: 0, [axis]: offset, filter: `blur(${blur}px)` });
+  const final = animationTo?.at(-1) ?? {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotateX: 0,
+    skewX: 0,
+    filter: "blur(0px)",
+  };
+  return (
+    <MotionConfig reducedMotion="user">
+      <p
+        ref={root}
+        className={`flex flex-wrap ${trigger === "click" ? "cursor-pointer" : ""} ${className}`.trim()}
+        style={{ color }}
+        role={trigger === "click" ? "button" : undefined}
+        tabIndex={trigger === "click" ? 0 : undefined}
+        onPointerEnter={
+          trigger === "hover"
+            ? () => {
+                setActive(true);
+                setReplay((n) => n + 1);
+              }
+            : undefined
+        }
+        onClick={
+          trigger === "click"
+            ? () => {
+                setActive(true);
+                setReplay((n) => n + 1);
+              }
+            : undefined
+        }
+        onKeyDown={
+          trigger === "click"
+            ? (event) => {
+                if (event.key !== "Enter" && event.key !== " ") return;
+                event.preventDefault();
+                setActive(true);
+                setReplay((n) => n + 1);
+              }
+            : undefined
+        }
+      >
+        <span className="sr-only">{text}</span>
+        {pieces.map((piece, i) => (
+          <motion.span
+            aria-hidden="true"
+            key={`${piece}-${pieces.slice(i + 1).filter((item) => item === piece).length}-${replay}`}
+            className="inline-block whitespace-pre"
+            initial={trigger === "load" ? false : from}
+            animate={active ? final : from}
+            transition={{
+              duration: stepDuration,
+              delay: (ranks[i] * Math.max(0, delay)) / 1000,
+              ease: easing ?? easeOut,
+            }}
+            onAnimationComplete={
+              i === pieces.length - 1 ? onAnimationComplete : undefined
+            }
+            onPointerEnter={focusOnHover ? () => setFocus(i) : undefined}
+            onPointerLeave={focusOnHover ? () => setFocus(-1) : undefined}
+            style={{
+              color: fromColor && !active ? fromColor : undefined,
+              filter:
+                focusOnHover && focus !== -1 && focus !== i
+                  ? `blur(${Math.max(2, blur * 0.3)}px)`
+                  : undefined,
+            }}
+          >
+            {piece}
+          </motion.span>
+        ))}
+      </p>
+    </MotionConfig>
+  );
+}
diff --git a/dashboard/src/components/react-bits/text/CountUp.tsx b/dashboard/src/components/react-bits/text/CountUp.tsx
new file mode 100644
index 0000000..b220f8f
--- /dev/null
+++ b/dashboard/src/components/react-bits/text/CountUp.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import {
+  type CSSProperties,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export type CountUpProps = {
+  to: number;
+  from?: number;
+  direction?: "up" | "down";
+  delay?: number;
+  duration?: number;
+  className?: string;
+  style?: CSSProperties;
+  startWhen?: boolean;
+  separator?: string;
+  prefix?: string;
+  suffix?: string;
+  mode?: "count" | "roll";
+  easing?: "easeOut" | "linear" | "expo" | "spring";
+  decimals?: number;
+  format?: "standard" | "compact";
+  trigger?: "view" | "load";
+  replayOnHover?: boolean;
+  onStart?: () => void;
+  onEnd?: () => void;
+};
+const compactUnits: Array<[number, string]> = [
+  [1e12, "T"],
+  [1e9, "B"],
+  [1e6, "M"],
+  [1e3, "K"],
+];
+
+/** Accessible count-up display; the animated value is hidden from assistive technology. */
+export default function CountUp({
+  to,
+  from = 0,
+  direction = "up",
+  delay = 0,
+  duration = 2,
+  className = "",
+  style,
+  startWhen = true,
+  separator = "",
+  prefix = "",
+  suffix = "",
+  mode = "count",
+  easing = "easeOut",
+  decimals,
+  format = "standard",
+  trigger = "view",
+  replayOnHover = false,
+  onStart,
+  onEnd,
+}: CountUpProps) {
+  const root = useRef<HTMLSpanElement>(null);
+  const [visible, setVisible] = useState(trigger === "load");
+  const [value, setValue] = useState(direction === "down" ? to : from);
+  const [run, setRun] = useState(0);
+  const start = direction === "down" ? to : from;
+  const end = direction === "down" ? from : to;
+  useEffect(() => {
+    if (trigger !== "view" || !root.current) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setVisible(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(root.current);
+    return () => observer.disconnect();
+  }, [trigger]);
+  // `run` intentionally restarts this effect for each hover replay.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: replay id restarts the animation.
+  useEffect(() => {
+    if (!visible || !startWhen) return;
+    let raf = 0;
+    let timeout = 0;
+    let began = 0;
+    let cancelled = false;
+    const ms = Math.max(0, duration) * 1000;
+    const ease = (t: number) =>
+      easing === "linear"
+        ? t
+        : easing === "expo"
+          ? t >= 1
+            ? 1
+            : 1 - 2 ** (-10 * t)
+          : 1 - (1 - t) ** 3;
+    timeout = window.setTimeout(() => {
+      onStart?.();
+      began = performance.now();
+      const tick = (now: number) => {
+        if (cancelled) return;
+        const t = ms === 0 ? 1 : Math.min(1, (now - began) / ms);
+        setValue(start + (end - start) * ease(t));
+        if (t < 1) raf = requestAnimationFrame(tick);
+        else onEnd?.();
+      };
+      if (
+        window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ||
+        ms === 0
+      ) {
+        setValue(end);
+        onEnd?.();
+      } else raf = requestAnimationFrame(tick);
+    }, Math.max(0, delay) * 1000);
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+      cancelAnimationFrame(raf);
+    };
+  }, [
+    visible,
+    startWhen,
+    start,
+    end,
+    duration,
+    delay,
+    easing,
+    run,
+    onStart,
+    onEnd,
+  ]);
+  const display = useMemo(() => {
+    const unit =
+      format === "compact"
+        ? compactUnits.find(([size]) => Math.abs(value) >= size * 0.9995)
+        : undefined;
+    const places = decimals ?? Math.max(decimalPlaces(from), decimalPlaces(to));
+    const shown = unit ? value / unit[0] : value;
+    const digits =
+      decimals ?? (unit ? (Math.abs(shown) < 100 ? 1 : 0) : places);
+    const number = Math.abs(shown).toFixed(digits);
+    const [integer, fraction] = number.split(".");
+    const grouped = separator
+      ? integer.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
+      : integer;
+    return `${prefix}${value < 0 && Number(number) !== 0 ? "-" : ""}${grouped}${fraction ? `.${fraction}` : ""}${unit?.[1] ?? ""}${suffix}`;
+  }, [value, format, decimals, from, to, separator, prefix, suffix]);
+  return (
+    <span
+      ref={root}
+      className={`tabular-nums ${className}`.trim()}
+      style={style}
+      onPointerEnter={
+        replayOnHover
+          ? () => {
+              setValue(start);
+              setRun((n) => n + 1);
+            }
+          : undefined
+      }
+    >
+      <span aria-hidden="true">
+        {mode === "roll"
+          ? Array.from(display).map((char, index) =>
+              /\d/.test(char) ? (
+                <span
+                  className="relative inline-block h-[1.2em] overflow-hidden align-bottom"
+                  key={`${char}-${display.slice(index + 1).split(char).length}`}
+                >
+                  <span
+                    className="flex flex-col transition-transform duration-150 ease-out"
+                    style={{ transform: `translateY(-${Number(char) * 10}%)` }}
+                  >
+                    {"0123456789".split("").map((digit) => (
+                      <span className="h-[1.2em] leading-[1.2em]" key={digit}>
+                        {digit}
+                      </span>
+                    ))}
+                  </span>
+                </span>
+              ) : (
+                <span
+                  className="whitespace-pre"
+                  key={`${char}-${display.slice(index + 1).split(char).length}`}
+                >
+                  {char}
+                </span>
+              ),
+            )
+          : display}
+      </span>
+      <span className="sr-only">{display}</span>
+    </span>
+  );
+}
+function decimalPlaces(value: number) {
+  const text = String(value);
+  return text.includes(".") ? (text.split(".")[1]?.length ?? 0) : 0;
+}
diff --git a/dashboard/src/components/react-bits/text/SplitText.tsx b/dashboard/src/components/react-bits/text/SplitText.tsx
new file mode 100644
index 0000000..319d655
--- /dev/null
+++ b/dashboard/src/components/react-bits/text/SplitText.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText as GSAPSplitText } from "gsap/SplitText";
+import { type CSSProperties, useEffect, useRef, useState } from "react";
+
+export type SplitTextEffect =
+  | "rise"
+  | "fade"
+  | "blur"
+  | "flip"
+  | "pop"
+  | "skew"
+  | "wave";
+export interface SplitTextProps {
+  text: string;
+  className?: string;
+  delay?: number;
+  duration?: number;
+  ease?: string | ((t: number) => number);
+  splitType?: "chars" | "words" | "lines" | "words, chars";
+  from?: gsap.TweenVars;
+  to?: gsap.TweenVars;
+  threshold?: number;
+  rootMargin?: string;
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+  textAlign?: CSSProperties["textAlign"];
+  staggerFrom?: "start" | "center" | "end" | "edges" | "random";
+  mask?: boolean;
+  effect?: SplitTextEffect;
+  trigger?: "view" | "load" | "hover" | "click";
+  loop?: boolean;
+  loopDelay?: number;
+  hoverEffect?: "none" | "lift" | "wave";
+  color?: string;
+  accentColor?: string;
+  onLetterAnimationComplete?: () => void;
+}
+
+gsap.registerPlugin(ScrollTrigger, GSAPSplitText);
+
+/** Animate text pieces with GSAP. Reverts its split and timelines on unmount. */
+export default function SplitText({
+  text,
+  className = "",
+  delay = 50,
+  duration = 1.25,
+  ease,
+  splitType = "chars",
+  from,
+  to,
+  threshold = 0.1,
+  rootMargin = "-100px",
+  tag = "p",
+  textAlign = "center",
+  staggerFrom = "start",
+  mask = false,
+  effect = "rise",
+  trigger = "view",
+  loop = false,
+  loopDelay = 1.5,
+  hoverEffect = "none",
+  color,
+  accentColor,
+  onLetterAnimationComplete,
+}: SplitTextProps) {
+  const ref = useRef<HTMLElement>(null);
+  const timeline = useRef<gsap.core.Timeline | null>(null);
+  const loopTimer = useRef<gsap.core.Tween | null>(null);
+  const completed = useRef<string | null>(null);
+  const callback = useRef(onLetterAnimationComplete);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    callback.current = onLetterAnimationComplete;
+  }, [onLetterAnimationComplete]);
+
+  useGSAP(
+    () => {
+      const el = ref.current;
+      if (!el || !text) return;
+      const reduced = window.matchMedia?.(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (reduced) {
+        setReady(true);
+        if (completed.current !== text) {
+          completed.current = text;
+          callback.current?.();
+        }
+        return;
+      }
+      const marginMatch = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(rootMargin);
+      const margin = marginMatch ? Number(marginMatch[1]) : 0;
+      const marginUnit = marginMatch?.[2] || "px";
+      const marginOffset =
+        margin < 0
+          ? `-=${Math.abs(margin)}${marginUnit}`
+          : margin > 0
+            ? `+=${margin}${marginUnit}`
+            : "";
+      const context = gsap.context(() => {
+        const split = new GSAPSplitText(el, {
+          type: splitType,
+          smartWrap: true,
+          autoSplit: splitType === "lines",
+          mask: mask
+            ? splitType.includes("chars")
+              ? "chars"
+              : splitType.includes("words")
+                ? "words"
+                : "lines"
+            : undefined,
+          charsClass: "split-char",
+          wordsClass: "split-word",
+          linesClass: "split-line",
+          reduceWhiteSpace: false,
+          onSplit(self) {
+            const unit = splitType.includes("chars")
+              ? self.chars
+              : splitType.includes("words")
+                ? self.words
+                : self.lines;
+            const start: gsap.TweenVars =
+              from ??
+              (effect === "fade"
+                ? { opacity: 0 }
+                : effect === "blur"
+                  ? { opacity: 0, y: 24, filter: "blur(8px)" }
+                  : effect === "flip"
+                    ? { opacity: 0, rotationX: -80, transformPerspective: 500 }
+                    : effect === "pop"
+                      ? { opacity: 0, scale: 0.6 }
+                      : effect === "skew"
+                        ? { opacity: 0, x: -18, skewX: -15 }
+                        : effect === "wave"
+                          ? { opacity: 0, y: 18 }
+                          : { opacity: 0, y: 40 });
+            const end: gsap.TweenVars =
+              to ??
+              (effect === "fade"
+                ? { opacity: 1 }
+                : {
+                    opacity: 1,
+                    y: 0,
+                    x: 0,
+                    scale: 1,
+                    rotationX: 0,
+                    skewX: 0,
+                    filter: "blur(0px)",
+                  });
+            const tl = gsap.timeline({
+              paused: trigger === "hover" || trigger === "click",
+              scrollTrigger:
+                trigger === "view"
+                  ? {
+                      trigger: el,
+                      start: `top ${Math.round((1 - threshold) * 100)}%${marginOffset}`,
+                      once: true,
+                      fastScrollEnd: true,
+                    }
+                  : undefined,
+              onComplete: () => {
+                if (completed.current !== text) {
+                  completed.current = text;
+                  callback.current?.();
+                }
+                if (loop)
+                  loopTimer.current = gsap.delayedCall(
+                    Math.max(0, loopDelay),
+                    () => tl.restart(),
+                  );
+              },
+            });
+            tl.fromTo(
+              unit,
+              { ...start, willChange: "transform,opacity,filter" },
+              {
+                ...end,
+                color: accentColor ? getComputedStyle(el).color : undefined,
+                duration,
+                ease:
+                  ease ?? (effect === "pop" ? "back.out(1.5)" : "power3.out"),
+                stagger: { each: Math.max(0, delay) / 1000, from: staggerFrom },
+                clearProps: "willChange",
+              },
+            );
+            if (trigger === "load") tl.play();
+            timeline.current = tl;
+            setReady(true);
+            return tl;
+          },
+        });
+        return () => split.revert();
+      }, ref);
+      return () => {
+        loopTimer.current?.kill();
+        timeline.current = null;
+        context.revert();
+      };
+    },
+    {
+      dependencies: [
+        text,
+        delay,
+        duration,
+        ease,
+        splitType,
+        from,
+        to,
+        threshold,
+        rootMargin,
+        tag,
+        staggerFrom,
+        mask,
+        effect,
+        trigger,
+        accentColor,
+        loop,
+        loopDelay,
+      ],
+      scope: ref,
+      revertOnUpdate: true,
+    },
+  );
+
+  const Tag = tag;
+  const clip =
+    mask ||
+    (hoverEffect === "none" && (effect === "rise" || effect === "fade"));
+  return (
+    <Tag
+      ref={ref as never}
+      onPointerEnter={
+        trigger === "hover" ? () => timeline.current?.restart() : undefined
+      }
+      onClick={
+        trigger === "click" ? () => timeline.current?.restart() : undefined
+      }
+      className={`inline-block whitespace-normal ${clip ? "overflow-hidden" : "overflow-visible"} ${trigger === "click" ? "cursor-pointer" : ""} ${className}`.trim()}
+      style={{ textAlign, color, visibility: ready ? undefined : "hidden" }}
+    >
+      {text}
+    </Tag>
+  );
+}
diff --git a/dashboard/src/components/react-bits/text/index.ts b/dashboard/src/components/react-bits/text/index.ts
new file mode 100644
index 0000000..e455edb
--- /dev/null
+++ b/dashboard/src/components/react-bits/text/index.ts
@@ -0,0 +1,6 @@
+export type { BlurTextEffect, BlurTextProps } from "./BlurText";
+export { default as BlurText } from "./BlurText";
+export type { CountUpProps } from "./CountUp";
+export { default as CountUp } from "./CountUp";
+export type { SplitTextEffect, SplitTextProps } from "./SplitText";
+export { default as SplitText } from "./SplitText";
diff --git a/dashboard/src/components/react-bits/utilities/AIContextMeter.tsx b/dashboard/src/components/react-bits/utilities/AIContextMeter.tsx
new file mode 100644
index 0000000..5210191
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/AIContextMeter.tsx
@@ -0,0 +1,77 @@
+export interface ContextSegment {
+  id: string;
+  label: string;
+  tokens: number;
+  color?: string;
+}
+export interface AIContextMeterProps {
+  segments: ContextSegment[];
+  limit: number;
+  modelLabel?: string;
+  compactAt?: number;
+  className?: string;
+}
+
+/** Displays caller-supplied local estimates; no model or service is contacted. */
+export function AIContextMeter({
+  segments,
+  limit,
+  modelLabel = "Local estimate",
+  compactAt = 0.8,
+  className = "",
+}: AIContextMeterProps) {
+  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
+  const used = segments.reduce(
+    (sum, item) => sum + Math.max(0, item.tokens),
+    0,
+  );
+  const percent = Math.min(100, (used / safeLimit) * 100);
+  return (
+    <section className={className} aria-label="Prompt size estimate">
+      <div>
+        <strong>{modelLabel}</strong>
+        <span>
+          {Math.round(percent)}% · {Math.round(used).toLocaleString()} /{" "}
+          {Math.round(safeLimit).toLocaleString()}
+        </span>
+      </div>
+      <meter
+        aria-label="Estimated context used"
+        min={0}
+        max={100}
+        value={Math.round(percent)}
+        style={{
+          display: "flex",
+          height: 8,
+          overflow: "hidden",
+          borderRadius: 99,
+          background: "#8883",
+        }}
+      >
+        {segments.map((item) => (
+          <span
+            key={item.id}
+            title={`${item.label}: ${item.tokens.toLocaleString()} tokens`}
+            style={{
+              width: `${(Math.max(0, item.tokens) / safeLimit) * 100}%`,
+              background: item.color ?? "currentColor",
+            }}
+          />
+        ))}
+      </meter>
+      <ul>
+        {segments.map((item) => (
+          <li key={item.id}>
+            {item.label}: {Math.round(item.tokens).toLocaleString()}
+          </li>
+        ))}
+      </ul>
+      <small>
+        {percent >= compactAt * 100
+          ? "Near the configured estimate threshold"
+          : "Estimated from local input only"}
+      </small>
+    </section>
+  );
+}
+export default AIContextMeter;
diff --git a/dashboard/src/components/react-bits/utilities/AccountMenu.tsx b/dashboard/src/components/react-bits/utilities/AccountMenu.tsx
new file mode 100644
index 0000000..34781de
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/AccountMenu.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+export interface AccountMenuAccount {
+  id: string;
+  name: string;
+  email?: string;
+}
+export interface AccountMenuProps {
+  accounts: AccountMenuAccount[];
+  activeId: string;
+  onSelect: (account: AccountMenuAccount) => void;
+  className?: string;
+}
+
+export function AccountMenu({
+  accounts,
+  activeId,
+  onSelect,
+  className = "",
+}: AccountMenuProps) {
+  const [open, setOpen] = useState(false);
+  const active = accounts.find((account) => account.id === activeId);
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {active?.name ?? "Local profile"}
+      </button>
+      {open && (
+        <div role="menu">
+          {accounts.map((account) => (
+            <div key={account.id}>
+              <button
+                type="button"
+                role="menuitemradio"
+                aria-checked={account.id === activeId}
+                onClick={() => {
+                  onSelect(account);
+                  setOpen(false);
+                }}
+              >
+                {account.name}
+                {account.email ? ` · ${account.email}` : ""}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+export default AccountMenu;
diff --git a/dashboard/src/components/react-bits/utilities/AnimatedBeam.tsx b/dashboard/src/components/react-bits/utilities/AnimatedBeam.tsx
new file mode 100644
index 0000000..0d38868
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/AnimatedBeam.tsx
@@ -0,0 +1,107 @@
+import { motion, useReducedMotion } from "framer-motion";
+import { type RefObject, useEffect, useId, useState } from "react";
+
+export interface AnimatedBeamProps {
+  containerRef: RefObject<HTMLElement | null>;
+  fromRef: RefObject<HTMLElement | null>;
+  toRef: RefObject<HTMLElement | null>;
+  className?: string;
+  duration?: number;
+  curvature?: number;
+  pathColor?: string;
+  gradientStartColor?: string;
+  gradientStopColor?: string;
+}
+
+export function AnimatedBeam({
+  containerRef,
+  fromRef,
+  toRef,
+  className,
+  duration = 5,
+  curvature = 0,
+  pathColor = "currentColor",
+  gradientStartColor = "#ffaa40",
+  gradientStopColor = "#9c40ff",
+}: AnimatedBeamProps) {
+  const [geometry, setGeometry] = useState({ width: 0, height: 0, path: "" });
+  const reduced = useReducedMotion();
+  const gradientId = `beam-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  useEffect(() => {
+    const update = () => {
+      const parent = containerRef.current?.getBoundingClientRect();
+      const from = fromRef.current?.getBoundingClientRect();
+      const to = toRef.current?.getBoundingClientRect();
+      if (!(parent && from && to)) return;
+      const x1 = from.left - parent.left + from.width / 2;
+      const y1 = from.top - parent.top + from.height / 2;
+      const x2 = to.left - parent.left + to.width / 2;
+      const y2 = to.top - parent.top + to.height / 2;
+      setGeometry({
+        width: parent.width,
+        height: parent.height,
+        path: `M ${x1} ${y1} Q ${(x1 + x2) / 2} ${(y1 + y2) / 2 - curvature} ${x2} ${y2}`,
+      });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    [containerRef.current, fromRef.current, toRef.current].forEach(
+      (element) => {
+        if (element) observer.observe(element);
+      },
+    );
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [containerRef, fromRef, toRef, curvature]);
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      width={geometry.width}
+      height={geometry.height}
+      viewBox={`0 0 ${geometry.width} ${geometry.height}`}
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "visible",
+      }}
+    >
+      <path
+        d={geometry.path}
+        fill="none"
+        stroke={pathColor}
+        strokeOpacity=".24"
+        strokeWidth="2"
+      />
+      <motion.path
+        d={geometry.path}
+        fill="none"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="2"
+        initial={{ pathLength: 0, pathOffset: 0 }}
+        animate={
+          reduced
+            ? { pathLength: 1, pathOffset: 0 }
+            : { pathLength: [0.08, 0.35, 0.08], pathOffset: [0, 0.65, 1] }
+        }
+        transition={
+          reduced
+            ? { duration: 0 }
+            : { duration, repeat: Infinity, ease: "linear" }
+        }
+      />
+      <defs>
+        <linearGradient id={gradientId}>
+          <stop stopColor={gradientStartColor} stopOpacity="0" />
+          <stop offset=".5" stopColor={gradientStopColor} />
+          <stop offset="1" stopColor={gradientStopColor} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+export default AnimatedBeam;
diff --git a/dashboard/src/components/react-bits/utilities/AnimatedThemeToggler.tsx b/dashboard/src/components/react-bits/utilities/AnimatedThemeToggler.tsx
new file mode 100644
index 0000000..c8ff852
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/AnimatedThemeToggler.tsx
@@ -0,0 +1,40 @@
+import { Moon, Sun } from "lucide-react";
+import { useRef } from "react";
+import { transitionTheme } from "../../../animations/theme-transition";
+
+export interface AnimatedThemeTogglerProps
+  extends Omit<React.ComponentProps<"button">, "onClick"> {
+  theme: "light" | "dark";
+  onThemeChange: (theme: "light" | "dark") => void;
+}
+
+/** Controlled theme button; the dashboard store remains the source of truth. */
+export function AnimatedThemeToggler({
+  theme,
+  onThemeChange,
+  className = "",
+  ...props
+}: AnimatedThemeTogglerProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const next = theme === "dark" ? "light" : "dark";
+  return (
+    <button
+      type="button"
+      aria-label={`Switch to ${next} theme`}
+      aria-pressed={theme === "dark"}
+      className={className}
+      ref={ref}
+      onClick={() =>
+        transitionTheme(ref.current, next, () => onThemeChange(next))
+      }
+      {...props}
+    >
+      {theme === "dark" ? (
+        <Sun aria-hidden="true" />
+      ) : (
+        <Moon aria-hidden="true" />
+      )}
+    </button>
+  );
+}
+export default AnimatedThemeToggler;
diff --git a/dashboard/src/components/react-bits/utilities/DateRangeCalendar.tsx b/dashboard/src/components/react-bits/utilities/DateRangeCalendar.tsx
new file mode 100644
index 0000000..d448cbd
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/DateRangeCalendar.tsx
@@ -0,0 +1,50 @@
+import type { ChangeEvent } from "react";
+
+export interface DateRangeCalendarProps {
+  from: string;
+  to: string;
+  onChange: (range: { from: string; to: string }) => void;
+  className?: string;
+}
+
+/** Native date controls keep this range picker dependency-free and keyboard accessible. */
+export function DateRangeCalendar({
+  from,
+  to,
+  onChange,
+  className = "",
+}: DateRangeCalendarProps) {
+  const update =
+    (key: "from" | "to") => (event: ChangeEvent<HTMLInputElement>) => {
+      const next = { from, to, [key]: event.currentTarget.value };
+      if (next.from && next.to && next.from > next.to) return;
+      onChange(next);
+    };
+  return (
+    <fieldset className={className}>
+      <legend>Date range</legend>
+      <label>
+        From{" "}
+        <input
+          aria-label="Start date"
+          type="date"
+          value={from}
+          max={to || undefined}
+          onChange={update("from")}
+        />
+      </label>
+      <label>
+        To{" "}
+        <input
+          aria-label="End date"
+          type="date"
+          value={to}
+          min={from || undefined}
+          onChange={update("to")}
+        />
+      </label>
+    </fieldset>
+  );
+}
+
+export default DateRangeCalendar;
diff --git a/dashboard/src/components/react-bits/utilities/TimezonePlanner.tsx b/dashboard/src/components/react-bits/utilities/TimezonePlanner.tsx
new file mode 100644
index 0000000..329074d
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/TimezonePlanner.tsx
@@ -0,0 +1,75 @@
+import { useMemo, useState } from "react";
+
+export interface PlannerPerson {
+  id: string;
+  name: string;
+  city: string;
+  timeZone: string;
+}
+export interface TimezonePlannerProps {
+  people?: PlannerPerson[];
+  className?: string;
+}
+
+const DEFAULT_PEOPLE: PlannerPerson[] = [
+  { id: "paris", name: "Paris", city: "Paris", timeZone: "Europe/Paris" },
+  {
+    id: "new-york",
+    name: "New York",
+    city: "New York",
+    timeZone: "America/New_York",
+  },
+  {
+    id: "bengaluru",
+    name: "Bengaluru",
+    city: "Bengaluru",
+    timeZone: "Asia/Kolkata",
+  },
+];
+
+/** Lightweight local time comparison; does not claim to find working-hour overlap. */
+export function TimezonePlanner({
+  people = DEFAULT_PEOPLE,
+  className = "",
+}: TimezonePlannerProps) {
+  const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10));
+  const at = useMemo(() => new Date(`${date}T12:00:00`), [date]);
+  return (
+    <section className={className} aria-label="Timezone planner">
+      <label>
+        Compare date{" "}
+        <input
+          type="date"
+          value={date}
+          onChange={(event) => setDate(event.currentTarget.value)}
+        />
+      </label>
+      <ul>
+        {people.map((person) => (
+          <li key={person.id}>
+            <span>{person.city}</span>
+            <time
+              dateTime={new Intl.DateTimeFormat("sv-SE", {
+                timeZone: person.timeZone,
+                dateStyle: "short",
+                timeStyle: "short",
+              }).format(at)}
+            >
+              {new Intl.DateTimeFormat(undefined, {
+                timeZone: person.timeZone,
+                weekday: "short",
+                hour: "2-digit",
+                minute: "2-digit",
+              }).format(at)}
+            </time>
+            <small>{person.timeZone}</small>
+          </li>
+        ))}
+      </ul>
+      <p>
+        Local clock comparison only. It does not calculate meeting availability.
+      </p>
+    </section>
+  );
+}
+export default TimezonePlanner;
diff --git a/dashboard/src/components/react-bits/utilities/index.ts b/dashboard/src/components/react-bits/utilities/index.ts
new file mode 100644
index 0000000..887adb4
--- /dev/null
+++ b/dashboard/src/components/react-bits/utilities/index.ts
@@ -0,0 +1,12 @@
+export type { AccountMenuAccount, AccountMenuProps } from "./AccountMenu";
+export { AccountMenu } from "./AccountMenu";
+export type { AIContextMeterProps, ContextSegment } from "./AIContextMeter";
+export { AIContextMeter } from "./AIContextMeter";
+export type { AnimatedBeamProps } from "./AnimatedBeam";
+export { AnimatedBeam } from "./AnimatedBeam";
+export type { AnimatedThemeTogglerProps } from "./AnimatedThemeToggler";
+export { AnimatedThemeToggler } from "./AnimatedThemeToggler";
+export type { DateRangeCalendarProps } from "./DateRangeCalendar";
+export { DateRangeCalendar } from "./DateRangeCalendar";
+export type { PlannerPerson, TimezonePlannerProps } from "./TimezonePlanner";
+export { TimezonePlanner } from "./TimezonePlanner";
diff --git a/dashboard/src/components/react-bits/visuals/CrystalizedBall.tsx b/dashboard/src/components/react-bits/visuals/CrystalizedBall.tsx
new file mode 100644
index 0000000..61cf6c3
--- /dev/null
+++ b/dashboard/src/components/react-bits/visuals/CrystalizedBall.tsx
@@ -0,0 +1,374 @@
+import { Geometry, Mesh, Program, Renderer, Triangle } from "ogl";
+import { type CSSProperties, useEffect, useMemo, useRef } from "react";
+
+type Preset =
+  | "plasma"
+  | "aurora"
+  | "nebula"
+  | "ember"
+  | "frost"
+  | "solar"
+  | "eclipse"
+  | "abyss";
+type Motion = "rise" | "fall" | "drift" | "orbit";
+type Theme = "dark" | "light";
+export interface CrystalizedBallProps {
+  preset?: Preset;
+  color?: string;
+  theme?: Theme;
+  size?: number;
+  strands?: number;
+  crackle?: number;
+  flares?: number;
+  glow?: number;
+  sparks?: number;
+  particleCount?: number;
+  fill?: number;
+  motion?: Motion;
+  particleShape?: "square" | "round";
+  depth?: number;
+  sway?: number;
+  twinkle?: number;
+  haze?: number;
+  speed?: number;
+  dustSpeed?: number;
+  interactive?: boolean;
+  hoverStrength?: number;
+  intro?: boolean;
+  paused?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const presets: Record<
+  Preset,
+  { color: string; motion: Motion; count: number }
+> = {
+  plasma: { color: "#f25bd0", motion: "rise", count: 7000 },
+  aurora: { color: "#5cffc8", motion: "rise", count: 7000 },
+  nebula: { color: "#9478ff", motion: "rise", count: 8000 },
+  ember: { color: "#ff8a2a", motion: "rise", count: 6000 },
+  frost: { color: "#bfe6ff", motion: "fall", count: 7000 },
+  solar: { color: "#ffd36e", motion: "orbit", count: 7000 },
+  eclipse: { color: "#ffffff", motion: "drift", count: 6500 },
+  abyss: { color: "#3f7bff", motion: "orbit", count: 8000 },
+};
+
+const fieldVertex = `#version 300 es
+in vec2 position; void main(){gl_Position=vec4(position,0.0,1.0);}`;
+const fieldFragment = `#version 300 es
+precision highp float; uniform vec2 uSize; uniform float uTime,uCrackle,uGlow,uFlares,uPresence,uLight,uRadius; uniform vec3 uColor; out vec4 outColor;
+float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
+void main(){vec2 p=(gl_FragCoord.xy-0.5*uSize)/min(uSize.x,uSize.y); float r=length(p); float a=atan(p.y,p.x); float t=uTime;
+float jitter=uCrackle*(0.010*sin(a*23.0+t*2.2)+0.006*sin(a*61.0-t*3.1)+0.003*(h(vec2(floor(a*110.0),floor(t*18.0)))-.5));
+float d=abs(r-(uRadius+jitter)); float core=exp(-d*d/0.000055); float aura=exp(-d*d/0.0018);
+float flare=pow(max(0.0,sin(a*3.0-t*.6)*.5+.5),8.0)*exp(-d*d/0.008)*uFlares;
+float halo=exp(-pow((r-uRadius*1.07)/.055,2.0))*uGlow; float interior=exp(-pow(r/(uRadius*.9),2.0))*0.025;
+vec3 hot=mix(uColor,vec3(1.0),.72); vec3 c=uColor*(aura*.28+halo*.22+flare*.5+interior)+hot*(core*.85+flare*.8);
+float alpha=(aura*.24+halo*.18+flare*.5+core*.92+interior)*uPresence;
+if(uLight>.5){c=mix(c,vec3(0.035),.12);alpha=clamp(alpha,0.,.86);} outColor=vec4(c*alpha,alpha);}`;
+
+const dustVertex = `#version 300 es
+precision highp float; in vec2 position; in float aSeed; uniform vec2 uSize; uniform float uTime,uSpeed,uMotion,uFill,uDepth,uTwinkle,uRadius; out float vAlpha;
+float hash(float x){return fract(sin(x*127.1)*43758.5453);}
+void main(){float t=uTime*uSpeed; float y=position.y; float phase=fract(aSeed+t*(uMotion<.5?.12:uMotion<1.5?-.12:.055));
+if(uMotion<1.5)y=fract(y+(uMotion<.5?phase:1.-phase)) *1.7-.85;
+float x=position.x+sin(t*.4+aSeed*45.)*.018; float spread=mix(.84,.42,uFill); x*=spread;
+float a=atan(y,x); float radius=uRadius; float edge=length(vec2(x,y)); if(edge>radius*.94){x*=radius*.94/edge;y*=radius*.94/edge;}
+float depth=1.0-uDepth*(.15+.25*sin(aSeed*29.)); float twinkle=mix(1.,.35+.65*sin(t*2.+aSeed*99.)*.5+.325,uTwinkle);
+vec2 clip=vec2(x,y)*2.25; gl_Position=vec4(clip,0.,1.); gl_PointSize=clamp((1.0+depth*1.4)*uSize.y/480.,1.0,3.5); vAlpha=(.25+.65*hash(aSeed))*depth*twinkle;}`;
+const dustFragment = `#version 300 es
+precision highp float; uniform vec3 uColor; uniform float uLight; in float vAlpha; out vec4 outColor;
+void main(){vec2 p=gl_PointCoord-.5; float a=1.-smoothstep(.15,.5,length(p)); if(a<.01)discard; vec3 c=mix(uColor,vec3(1.),.35); float alpha=a*vAlpha*(uLight>.5?.7:1.); outColor=vec4(c*alpha,alpha);}`;
+
+const clamp = (n: number, lo: number, hi: number) =>
+  Math.min(hi, Math.max(lo, n));
+
+/** GPU-rendered glass orb. Particle count is capped to keep the demo responsive on integrated graphics. */
+export default function CrystalizedBall({
+  preset = "plasma",
+  color,
+  theme = "dark",
+  size = 0.7,
+  strands: _strands,
+  crackle = 0.7,
+  flares = 0.55,
+  glow = 0.8,
+  sparks: _sparks,
+  particleCount,
+  fill = 0.5,
+  motion,
+  particleShape: _particleShape,
+  depth = 0.6,
+  sway: _sway,
+  twinkle = 0.5,
+  haze: _haze,
+  speed = 1,
+  dustSpeed = 1,
+  interactive = true,
+  hoverStrength = 0.7,
+  intro = true,
+  paused = false,
+  className = "",
+  style,
+}: CrystalizedBallProps) {
+  const container = useRef<HTMLDivElement>(null);
+  const wake = useRef<(() => void) | null>(null);
+  const settings = useRef({
+    color: color ?? presets[preset].color,
+    theme,
+    size,
+    crackle,
+    flares,
+    glow,
+    fill,
+    motion: motion ?? presets[preset].motion,
+    depth,
+    twinkle,
+    speed,
+    dustSpeed,
+    interactive,
+    hoverStrength,
+    intro,
+    paused,
+  });
+  settings.current = {
+    color: color ?? presets[preset].color,
+    theme,
+    size,
+    crackle,
+    flares,
+    glow,
+    fill,
+    motion: motion ?? presets[preset].motion,
+    depth,
+    twinkle,
+    speed,
+    dustSpeed,
+    interactive,
+    hoverStrength,
+    intro,
+    paused,
+  };
+  const count = clamp(
+    Math.round(particleCount ?? presets[preset].count),
+    0,
+    8000,
+  );
+  const points = useMemo(() => {
+    let seed = 1337;
+    const random = () => {
+      seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
+      return seed / 4294967296;
+    };
+    const positions = new Float32Array(count * 2),
+      seeds = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+      const a = random() * Math.PI * 2,
+        r = Math.sqrt(random()) * 0.325;
+      positions[i * 2] = Math.cos(a) * r;
+      positions[i * 2 + 1] = Math.sin(a) * r;
+      seeds[i] = random();
+    }
+    return { positions, seeds };
+  }, [count]);
+
+  useEffect(() => {
+    const host = container.current;
+    if (!host) return;
+    let renderer: Renderer;
+    try {
+      renderer = new Renderer({
+        alpha: true,
+        antialias: false,
+        dpr: Math.min(window.devicePixelRatio || 1, 1.5),
+        powerPreference: "low-power",
+      });
+    } catch {
+      return;
+    }
+    const gl = renderer.gl;
+    const canvas = gl.canvas as HTMLCanvasElement;
+    canvas.style.cssText = "display:block;width:100%;height:100%";
+    canvas.setAttribute("aria-hidden", "true");
+    host.appendChild(canvas);
+    const fieldUniforms = {
+      uSize: { value: [1, 1] },
+      uTime: { value: 0 },
+      uCrackle: { value: 0.7 },
+      uGlow: { value: 0.8 },
+      uFlares: { value: 0.5 },
+      uPresence: { value: 1 },
+      uLight: { value: 0 },
+      uRadius: { value: settings.current.size * 0.5 },
+      uColor: { value: [1, 0.3, 0.8] },
+    };
+    const dustUniforms = {
+      uSize: { value: [1, 1] },
+      uTime: { value: 0 },
+      uSpeed: { value: 1 },
+      uMotion: { value: 0 },
+      uFill: { value: 0.5 },
+      uDepth: { value: 0.6 },
+      uTwinkle: { value: 0.5 },
+      uRadius: { value: settings.current.size * 0.5 },
+      uLight: { value: 0 },
+      uColor: { value: [1, 0.3, 0.8] },
+    };
+    const field = new Mesh(gl, {
+      geometry: new Triangle(gl),
+      program: new Program(gl, {
+        vertex: fieldVertex,
+        fragment: fieldFragment,
+        uniforms: fieldUniforms,
+        transparent: true,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    });
+    const dustGeometry = new Geometry(gl, {
+      position: { size: 2, data: points.positions },
+      aSeed: { size: 1, data: points.seeds },
+    });
+    const dust = new Mesh(gl, {
+      geometry: dustGeometry,
+      mode: gl.POINTS,
+      program: new Program(gl, {
+        vertex: dustVertex,
+        fragment: dustFragment,
+        uniforms: dustUniforms,
+        transparent: true,
+        depthTest: false,
+        depthWrite: false,
+      }),
+    });
+    let raf = 0,
+      visible = true,
+      start = performance.now(),
+      pointer = false;
+    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let reducedMotion = motionQuery.matches;
+    const resize = () =>
+      renderer.setSize(
+        Math.max(1, host.clientWidth),
+        Math.max(1, host.clientHeight),
+      );
+    const ro = new ResizeObserver(resize);
+    ro.observe(host);
+    resize();
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !raf) raf = requestAnimationFrame(draw);
+    });
+    io.observe(host);
+    const onMove = (event: PointerEvent) => {
+      const r = host.getBoundingClientRect();
+      pointer =
+        event.clientX >= r.left &&
+        event.clientX <= r.right &&
+        event.clientY >= r.top &&
+        event.clientY <= r.bottom;
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    const draw = (now: number) => {
+      raf = 0;
+      if (!visible || document.hidden) return;
+      const s = settings.current;
+      const t = (now - start) / 1000;
+      const color = THREEColor(s.color);
+      const presence = s.intro && !reducedMotion ? clamp(t / 1.1, 0, 1) : 1;
+      fieldUniforms.uSize.value = [renderer.width, renderer.height];
+      dustUniforms.uSize.value = [renderer.width, renderer.height];
+      fieldUniforms.uTime.value = t * s.speed;
+      fieldUniforms.uCrackle.value = clamp(
+        s.crackle + (pointer && s.interactive ? s.hoverStrength * 0.16 : 0),
+        0,
+        1.5,
+      );
+      fieldUniforms.uGlow.value = s.glow;
+      fieldUniforms.uFlares.value = s.flares;
+      fieldUniforms.uPresence.value = presence;
+      fieldUniforms.uLight.value = s.theme === "light" ? 1 : 0;
+      fieldUniforms.uColor.value = color;
+      fieldUniforms.uRadius.value = clamp(s.size, 0.1, 1.5) * 0.5;
+      dustUniforms.uTime.value = t;
+      dustUniforms.uSpeed.value = s.dustSpeed;
+      dustUniforms.uMotion.value =
+        s.motion === "rise"
+          ? 0
+          : s.motion === "fall"
+            ? 1
+            : s.motion === "drift"
+              ? 2
+              : 3;
+      dustUniforms.uFill.value = s.fill;
+      dustUniforms.uDepth.value = s.depth;
+      dustUniforms.uTwinkle.value = s.twinkle;
+      dustUniforms.uRadius.value = clamp(s.size, 0.1, 1.5) * 0.5;
+      dustUniforms.uLight.value = s.theme === "light" ? 1 : 0;
+      dustUniforms.uColor.value = color;
+      renderer.render({ scene: field });
+      renderer.render({ scene: dust });
+      if (!s.paused && !reducedMotion) raf = requestAnimationFrame(draw);
+    };
+    const onMotionChange = (event: MediaQueryListEvent) => {
+      reducedMotion = event.matches;
+      if (!event.matches && visible && !raf) raf = requestAnimationFrame(draw);
+    };
+    motionQuery.addEventListener("change", onMotionChange);
+    const onVisibility = () => {
+      if (!document.hidden && visible && !raf)
+        raf = requestAnimationFrame(draw);
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    wake.current = () => {
+      if (!raf && visible) raf = requestAnimationFrame(draw);
+    };
+    wake.current();
+    return () => {
+      wake.current = null;
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      io.disconnect();
+      window.removeEventListener("pointermove", onMove);
+      document.removeEventListener("visibilitychange", onVisibility);
+      motionQuery.removeEventListener("change", onMotionChange);
+      field.geometry.remove();
+      dust.geometry.remove();
+      (field.program as Program).remove();
+      (dust.program as Program).remove();
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+      canvas.remove();
+    };
+  }, [points]);
+
+  useEffect(() => {
+    if (!paused) wake.current?.();
+  });
+
+  return (
+    <div
+      ref={container}
+      className={className}
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        ...style,
+      }}
+      role="img"
+      aria-label="Animated particle orb"
+    />
+  );
+}
+
+function THREEColor(value: string): [number, number, number] {
+  const color = value.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+  if (!color) return [0.95, 0.36, 0.82];
+  return [
+    Number.parseInt(color[1], 16) / 255,
+    Number.parseInt(color[2], 16) / 255,
+    Number.parseInt(color[3], 16) / 255,
+  ];
+}
diff --git a/dashboard/src/components/react-bits/visuals/LaserFlow.tsx b/dashboard/src/components/react-bits/visuals/LaserFlow.tsx
new file mode 100644
index 0000000..f9ec698
--- /dev/null
+++ b/dashboard/src/components/react-bits/visuals/LaserFlow.tsx
@@ -0,0 +1,257 @@
+import { type HTMLAttributes, type RefObject, useEffect, useRef } from "react";
+import * as THREE from "three";
+
+export interface LaserFlowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+  surfaceRef?: RefObject<HTMLElement | null>;
+  beamPosition?: number;
+  surfaceLevel?: number;
+  color?: string;
+  intensity?: number;
+  beamWidth?: number;
+  flare?: number;
+  spread?: number;
+  spill?: number;
+  fog?: number;
+  dust?: number;
+  streaks?: number;
+  dots?: number;
+  pulse?: number;
+  speed?: number;
+  seed?: number;
+  mouseInteraction?: boolean;
+  revealImage?: string;
+  revealRadius?: number;
+  revealOpacity?: number;
+  intro?: boolean;
+  theme?: "dark" | "light";
+  paused?: boolean;
+  dpr?: number;
+}
+
+const vertex = `void main(){ gl_Position = vec4(position, 1.0); }`;
+const fragment = `precision highp float;
+uniform vec2 uSize; uniform float uTime; uniform float uBeam; uniform float uSurface;
+uniform vec3 uColor; uniform float uIntensity; uniform float uWidth; uniform float uFlare;
+uniform float uSpread; uniform float uFog; uniform float uMouse; uniform vec2 uPointer;
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453); }
+float noise(vec2 p){ vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f); return mix(mix(hash(i),hash(i+vec2(1.,0.)),f.x),mix(hash(i+vec2(0.,1.)),hash(i+1.),f.x),f.y); }
+void main(){
+ vec2 uv=gl_FragCoord.xy/uSize; float x=uv.x; float y=1.0-uv.y;
+ float landing=uSurface; float dx=abs(x-uBeam); float above=max(landing-y,0.0);
+ float beam=exp(-dx*dx/max(0.00002,uWidth*uWidth))*smoothstep(landing+0.03,landing-0.01,y);
+ float flare=exp(-dx*dx/max(0.0002,uFlare*uFlare))*exp(-pow((y-landing)/0.026,2.0));
+ float wash=exp(-dx/max(0.001,uSpread*0.22))*exp(-abs(y-landing)/0.035);
+ float fog=noise(vec2(x*22.0+y*3.0,uTime*0.07))*exp(-dx*7.0)*exp(-above*2.5)*uFog;
+ float cursor=exp(-dot((uv-uPointer)*uSize, (uv-uPointer)*uSize)/18000.0)*uMouse;
+ float energy=(beam*1.7+flare*2.4+wash*0.5+fog*0.32+cursor*flare)*uIntensity;
+ vec3 col=uColor*energy; col+=vec3(0.65,0.85,1.0)*flare*0.6*uIntensity;
+ gl_FragColor=vec4(col,clamp(energy,0.0,0.92));
+}`;
+
+export default function LaserFlow({
+  surfaceRef,
+  beamPosition = 0.6,
+  surfaceLevel = 0.7,
+  color = "#3847ff",
+  intensity = 1.4,
+  beamWidth = 0.008,
+  flare = 0.07,
+  spread = 1,
+  fog = 0.2,
+  mouseInteraction = true,
+  speed = 1,
+  paused = false,
+  theme = "dark",
+  dpr = 1.5,
+  className = "",
+  style,
+  ...props
+}: LaserFlowProps) {
+  const host = useRef<HTMLDivElement>(null);
+  const wake = useRef<(() => void) | null>(null);
+  const live = useRef({
+    beamPosition,
+    surfaceLevel,
+    color,
+    intensity,
+    beamWidth,
+    flare,
+    spread,
+    fog,
+    mouseInteraction,
+    speed,
+    paused,
+    theme,
+  });
+  live.current = {
+    beamPosition,
+    surfaceLevel,
+    color,
+    intensity,
+    beamWidth,
+    flare,
+    spread,
+    fog,
+    mouseInteraction,
+    speed,
+    paused,
+    theme,
+  };
+
+  useEffect(() => {
+    const root = host.current;
+    if (!root) return;
+    let renderer: THREE.WebGLRenderer;
+    try {
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        antialias: false,
+        powerPreference: "low-power",
+      });
+    } catch {
+      return;
+    }
+    renderer.setClearColor(0, 0);
+    renderer.setPixelRatio(
+      Math.min(window.devicePixelRatio || 1, 2, Math.max(1, dpr)),
+    );
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const uniforms = {
+      uSize: { value: new THREE.Vector2(1, 1) },
+      uTime: { value: 0 },
+      uBeam: { value: live.current.beamPosition },
+      uSurface: { value: live.current.surfaceLevel },
+      uColor: { value: new THREE.Color(live.current.color) },
+      uIntensity: { value: live.current.intensity },
+      uWidth: { value: live.current.beamWidth },
+      uFlare: { value: live.current.flare },
+      uSpread: { value: live.current.spread },
+      uFog: { value: live.current.fog },
+      uMouse: { value: 0 },
+      uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+    };
+    const material = new THREE.ShaderMaterial({
+      vertexShader: vertex,
+      fragmentShader: fragment,
+      uniforms,
+      transparent: true,
+      depthWrite: false,
+    });
+    const geometry = new THREE.PlaneGeometry(2, 2);
+    scene.add(new THREE.Mesh(geometry, material));
+    root.appendChild(renderer.domElement);
+    const resize = () => {
+      const rect = root.getBoundingClientRect();
+      renderer.setSize(Math.max(1, rect.width), Math.max(1, rect.height));
+      uniforms.uSize.value.set(
+        renderer.domElement.width,
+        renderer.domElement.height,
+      );
+    };
+    const observer = new ResizeObserver(resize);
+    observer.observe(root);
+    resize();
+    let visible = true,
+      raf = 0,
+      start = performance.now();
+    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let reducedMotion = motionQuery.matches;
+    const intersection = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !raf) raf = requestAnimationFrame(draw);
+    });
+    intersection.observe(root);
+    const move = (event: PointerEvent) => {
+      const rect = root.getBoundingClientRect();
+      if (
+        event.clientX < rect.left ||
+        event.clientX > rect.right ||
+        event.clientY < rect.top ||
+        event.clientY > rect.bottom
+      ) {
+        uniforms.uMouse.value = 0;
+        return;
+      }
+      uniforms.uPointer.value.set(
+        (event.clientX - rect.left) / rect.width,
+        1 - (event.clientY - rect.top) / rect.height,
+      );
+      uniforms.uMouse.value = live.current.mouseInteraction ? 1 : 0;
+    };
+    window.addEventListener("pointermove", move, { passive: true });
+    const draw = (now: number) => {
+      raf = 0;
+      if (!visible || document.hidden) return;
+      const p = live.current;
+      uniforms.uBeam.value = p.beamPosition;
+      uniforms.uSurface.value = p.surfaceLevel;
+      if (surfaceRef?.current) {
+        const a = root.getBoundingClientRect(),
+          b = surfaceRef.current.getBoundingClientRect();
+        uniforms.uSurface.value = THREE.MathUtils.clamp(
+          (b.top - a.top) / Math.max(1, a.height),
+          0,
+          1,
+        );
+      }
+      uniforms.uColor.value.set(p.color);
+      uniforms.uIntensity.value = p.intensity;
+      uniforms.uWidth.value = p.beamWidth;
+      uniforms.uFlare.value = p.flare * 0.07;
+      uniforms.uSpread.value = p.spread;
+      uniforms.uFog.value = p.fog;
+      uniforms.uTime.value = (now - start) * 0.001 * p.speed;
+      renderer.render(scene, camera);
+      if (!p.paused && !reducedMotion) raf = requestAnimationFrame(draw);
+    };
+    const onMotionChange = (event: MediaQueryListEvent) => {
+      reducedMotion = event.matches;
+      if (visible && !raf) raf = requestAnimationFrame(draw);
+    };
+    motionQuery.addEventListener("change", onMotionChange);
+    const onVisibility = () => {
+      if (!document.hidden && visible && !raf)
+        raf = requestAnimationFrame(draw);
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    wake.current = () => {
+      if (!raf && visible) raf = requestAnimationFrame(draw);
+    };
+    raf = requestAnimationFrame(draw);
+    return () => {
+      wake.current = null;
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      intersection.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      motionQuery.removeEventListener("change", onMotionChange);
+      window.removeEventListener("pointermove", move);
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      renderer.domElement.remove();
+    };
+  }, [dpr, surfaceRef]);
+
+  useEffect(() => {
+    wake.current?.();
+  });
+
+  return (
+    <div
+      ref={host}
+      aria-hidden="true"
+      className={className}
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/dashboard/src/components/react-bits/visuals/index.ts b/dashboard/src/components/react-bits/visuals/index.ts
new file mode 100644
index 0000000..aa4cf70
--- /dev/null
+++ b/dashboard/src/components/react-bits/visuals/index.ts
@@ -0,0 +1,4 @@
+export type { CrystalizedBallProps } from "./CrystalizedBall";
+export { default as CrystalizedBall } from "./CrystalizedBall";
+export type { LaserFlowProps } from "./LaserFlow";
+export { default as LaserFlow } from "./LaserFlow";
diff --git a/dashboard/src/pages/Agents.tsx b/dashboard/src/pages/Agents.tsx
index 8b88dd1..bcba243 100644
--- a/dashboard/src/pages/Agents.tsx
+++ b/dashboard/src/pages/Agents.tsx
@@ -110,17 +110,17 @@ function AgentFlowCard({ data }: NodeProps<FlowNode>) {
       <Handle
         type="target"
         position={Position.Left}
-        aria-label={"Relations into " + agent.name}
+        aria-label={`Relations into ${agent.name}`}
       />
       <div
-        className={"agent-flow-card " + agent.color}
+        className={`agent-flow-card ${agent.color}`}
         role="img"
-        aria-label={agent.name + ", " + agent.kind + ", " + agent.status}
+        aria-label={`${agent.name}, ${agent.kind}, ${agent.status}`}
       >
         <span className="agent-flow-icon">
           <AgentGlyph icon={agent.icon} />
         </span>
-        <span className={"agent-flow-status " + agent.status} />
+        <span className={`agent-flow-status ${agent.status}`} />
         <small>{agent.kind.toUpperCase()}</small>
         <strong>{agent.name}</strong>
         <em>{agent.status.toUpperCase()}</em>
@@ -128,7 +128,7 @@ function AgentFlowCard({ data }: NodeProps<FlowNode>) {
       <Handle
         type="source"
         position={Position.Right}
-        aria-label={"Relations from " + agent.name}
+        aria-label={`Relations from ${agent.name}`}
       />
     </>
   );
@@ -150,7 +150,7 @@ function asEdges(relations: AgentRelation[], selectedId: string): Edge[] {
     const highlighted =
       relation.source === selectedId || relation.target === selectedId;
     return {
-      id: relation.source + ":" + relation.target,
+      id: `${relation.source}:${relation.target}`,
       source: relation.source,
       target: relation.target,
       label: highlighted ? relation.label : undefined,
@@ -196,8 +196,12 @@ function AgentsContent() {
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const flow = useReactFlow();
   const selected = agents.find((agent) => agent.id === selectedId) ?? agents[0];
-  const selectedEdges = relations.filter(
-    (edge) => edge.source === selected?.id || edge.target === selected?.id,
+  const selectedEdges = useMemo(
+    () =>
+      relations.filter(
+        (edge) => edge.source === selected?.id || edge.target === selected?.id,
+      ),
+    [relations, selected?.id],
   );
 
   useEffect(() => {
@@ -371,7 +375,7 @@ function AgentsContent() {
     );
 
   return (
-    <main className={"agents-page" + (live ? "" : " motion-off")}>
+    <main className={`agents-page${live ? "" : " motion-off"}`}>
       <PageTitle
         eyebrow="AI AGENT WORKSPACE"
         title="Agents"
@@ -459,7 +463,7 @@ function AgentsContent() {
           </div>
           <section
             className="agents-graph-wrap agents-reactflow"
-            aria-label={mode + " relationship graph"}
+            aria-label={`${mode} relationship graph`}
           >
             <ReactFlow
               nodes={nodes}
@@ -523,12 +527,12 @@ function AgentsContent() {
                 / {String(agents.length).padStart(2, "0")}
               </span>
             </div>
-            <span className={"agents-status-chip " + selected.status}>
+            <span className={`agents-status-chip ${selected.status}`}>
               <i />
               {selected.status}
             </span>
           </div>
-          <div className={"agents-profile-mark " + selected.color}>
+          <div className={`agents-profile-mark ${selected.color}`}>
             <AgentGlyph icon={selected.icon} />
           </div>
           <h2>{selected.name}</h2>
@@ -636,11 +640,11 @@ function AgentsContent() {
                 return (
                   <button
                     type="button"
-                    key={edge.source + "-" + edge.target}
+                    key={`${edge.source}-${edge.target}`}
                     className="agents-connected-row"
                     onClick={() => setSelectedId(other.id)}
                   >
-                    <span className={"agents-connected-dot " + other.color} />
+                    <span className={`agents-connected-dot ${other.color}`} />
                     <span>
                       {other.name}
                       <small>{edge.label}</small>
@@ -667,7 +671,7 @@ function AgentsContent() {
                 aria-pressed={agent.id === selectedId}
                 onClick={() => setSelectedId(agent.id)}
               >
-                <span className={"agents-connected-dot " + agent.color} />
+                <span className={`agents-connected-dot ${agent.color}`} />
                 <span>
                   {agent.name}
                   <small>{agent.kind}</small>
diff --git a/dashboard/src/pages/Automation.tsx b/dashboard/src/pages/Automation.tsx
index e051dc3..4731584 100644
--- a/dashboard/src/pages/Automation.tsx
+++ b/dashboard/src/pages/Automation.tsx
@@ -222,7 +222,7 @@ function Editor() {
   };
   const addNode = (kind: WorkflowKind, position?: { x: number; y: number }) => {
     snapshot();
-    const id = kind + "-" + crypto.randomUUID().slice(0, 6);
+    const id = `${kind}-${crypto.randomUUID().slice(0, 6)}`;
     const title = kind[0].toUpperCase() + kind.slice(1);
     setNodes((current) => [
       ...current,
@@ -233,7 +233,7 @@ function Editor() {
           x: 160 + (current.length % 4) * 220,
           y: 120 + Math.floor(current.length / 4) * 140,
         },
-        data: { title, detail: title + " demo step.", kind, config: {} },
+        data: { title, detail: `${title} demo step.`, kind, config: {} },
       },
     ]);
     setSelectedId(id);
@@ -262,8 +262,7 @@ function Editor() {
     );
     const a = document.createElement("a");
     a.href = url;
-    a.download =
-      (name.toLowerCase().replace(/[^a-z0-9]+/g, "-") || "workflow") + ".json";
+    a.download = `${name.toLowerCase().replace(/[^a-z0-9]+/g, "-") || "workflow"}.json`;
     a.click();
     URL.revokeObjectURL(url);
   };
@@ -313,7 +312,7 @@ function Editor() {
   const duplicateSelected = () => {
     if (!selected) return;
     snapshot();
-    const id = selected.id + "-copy-" + crypto.randomUUID().slice(0, 5);
+    const id = `${selected.id}-copy-${crypto.randomUUID().slice(0, 5)}`;
     setNodes((current) => [
       ...current,
       {
@@ -321,7 +320,7 @@ function Editor() {
         id,
         selected: true,
         position: { x: selected.position.x + 36, y: selected.position.y + 36 },
-        data: { ...selected.data, title: selected.data.title + " copy" },
+        data: { ...selected.data, title: `${selected.data.title} copy` },
       },
     ]);
     setSelectedId(id);
@@ -499,12 +498,12 @@ function Editor() {
             </ReactFlow>
           </section>
           <div className="automation-runbar" role="status" aria-live="polite">
-            <span className={"run-indicator " + (running ? "is-running" : "")}>
+            <span className={`run-indicator ${running ? "is-running" : ""}`}>
               <span />
             </span>
             <span>{message}</span>
             <small>
-              {runs ? "RUN #" + String(runs).padStart(2, "0") : "NO RUNS YET"}
+              {runs ? `RUN #${String(runs).padStart(2, "0")}` : "NO RUNS YET"}
             </small>
           </div>
         </section>
diff --git a/dashboard/src/pages/ComponentLab.tsx b/dashboard/src/pages/ComponentLab.tsx
new file mode 100644
index 0000000..6279574
--- /dev/null
+++ b/dashboard/src/pages/ComponentLab.tsx
@@ -0,0 +1,329 @@
+import { useReducedMotion } from "framer-motion";
+import { Activity, ArrowRight, BellRing, Sparkles } from "lucide-react";
+import { lazy, Suspense, useMemo, useRef, useState } from "react";
+import {
+  BellButton,
+  BellToggle,
+  LatticeLoader,
+  ParticleButton,
+  PromptBar,
+  StatusMark,
+  SwipeRow,
+  SwitchButton,
+} from "../components/react-bits/controls";
+import BlurText from "../components/react-bits/text/BlurText";
+import CountUp from "../components/react-bits/text/CountUp";
+import SplitText from "../components/react-bits/text/SplitText";
+import {
+  AccountMenu,
+  AIContextMeter,
+  AnimatedBeam,
+  AnimatedThemeToggler,
+  DateRangeCalendar,
+  TimezonePlanner,
+} from "../components/react-bits/utilities";
+import { Card, PageTitle } from "../components/ui";
+import { useDashboardStore } from "../state/useDashboardStore";
+
+// ORIGINAL (preserved, not deleted — disabled by comment): const CrystalizedBall = lazy(() => import("../components/react-bits/visuals/CrystalizedBall"));
+const LaserFlow = lazy(
+  () => import("../components/react-bits/visuals/LaserFlow"),
+);
+
+export function ComponentLabPage() {
+  const reducedMotion = useReducedMotion();
+  const performanceMode = useDashboardStore((state) => state.performanceMode);
+  const setTheme = useDashboardStore((state) => state.setTheme);
+  const displayName = useDashboardStore((state) => state.displayName);
+  const setDisplayName = useDashboardStore((state) => state.setDisplayName);
+  const [notifications, setNotifications] = useState(
+    () => localStorage.getItem("opencluster.notifications") !== "false",
+  );
+  const [promptNote, setPromptNote] = useState("");
+  const [promptText, setPromptText] = useState("");
+  const [reviewed, setReviewed] = useState(false);
+  const [range, setRange] = useState(() => {
+    const today = new Date();
+    const to = today.toISOString().slice(0, 10);
+    return { from: `${to.slice(0, 8)}01`, to };
+  });
+  const [localTheme, setLocalTheme] = useState<"light" | "dark">(() =>
+    document.documentElement.dataset.theme === "dark" ? "dark" : "light",
+  );
+  const beamRef = useRef<HTMLDivElement>(null);
+  const beamFrom = useRef<HTMLDivElement>(null);
+  const beamTo = useRef<HTMLDivElement>(null);
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const pauseVisuals = Boolean(reducedMotion || performanceMode);
+  const promptTokens = Math.ceil(
+    promptText.trim().split(/\s+/).filter(Boolean).length * 1.35,
+  );
+  const rangeDays = useMemo(() => {
+    if (!range.from || !range.to) return 0;
+    return Math.max(
+      0,
+      Math.round(
+        (new Date(`${range.to}T00:00:00`).getTime() -
+          new Date(`${range.from}T00:00:00`).getTime()) /
+          86_400_000,
+      ) + 1,
+    );
+  }, [range]);
+  const changeNotifications = (enabled: boolean) => {
+    setNotifications(enabled);
+    localStorage.setItem("opencluster.notifications", String(enabled));
+    window.dispatchEvent(new Event("opencluster:notifications-change"));
+  };
+  const changeTheme = (next: "light" | "dark") => {
+    setLocalTheme(next);
+    setTheme(next);
+  };
+
+  return (
+    <div className="component-lab">
+      <PageTitle
+        eyebrow="INTERACTIVE COMPONENTS"
+        title="Component Lab"
+        description="Every supplied visual and control, collected in one local, interactive workspace. Demo actions stay in this browser."
+      />
+      <div className="component-lab-grid">
+        <Card className="component-lab-card component-lab-wide">
+          <div className="component-lab-heading">
+            <span className="eyebrow">TEXT MOTION</span>
+            <StatusMark status="success" label="Ready" />
+          </div>
+          <h2>
+            <SplitText
+              text="A calmer command center"
+              tag="span"
+              textAlign="left"
+              splitType="words"
+              effect="rise"
+              delay={65}
+              duration={0.7}
+              trigger="view"
+            />
+          </h2>
+          <BlurText
+            text="Infrastructure signals, local records, and operator tools in one clear view."
+            effect="focus"
+            animateBy="words"
+            delay={45}
+            stepDuration={0.25}
+            distance={10}
+            className="component-lab-blur"
+          />
+          <div className="component-lab-inline">
+            <CountUp
+              from={0}
+              to={128}
+              mode="roll"
+              duration={1.5}
+              separator=","
+              trigger="view"
+            />
+            <span>sample events processed</span>
+          </div>
+        </Card>
+
+        <Card className="component-lab-card">
+          <div className="component-lab-heading">
+            <span className="eyebrow">LOCAL PROFILE</span>
+            <Sparkles size={16} />
+          </div>
+          <p>Change the name used by this browser workspace.</p>
+          <AccountMenu
+            accounts={[
+              { id: "operator", name: displayName || "Operator" },
+              { id: "admin", name: "Admin" },
+              { id: "guest", name: "Guest" },
+            ]}
+            activeId={
+              displayName === "Admin"
+                ? "admin"
+                : displayName === "Guest"
+                  ? "guest"
+                  : "operator"
+            }
+            onSelect={(account) => setDisplayName(account.name)}
+            className="component-lab-account"
+          />
+        </Card>
+
+        <Card className="component-lab-card">
+          <div className="component-lab-heading">
+            <span className="eyebrow">PREFERENCES</span>
+            <BellRing size={16} />
+          </div>
+          <div className="component-lab-control-row">
+            <span>Notification indicator</span>
+            <BellToggle
+              checked={notifications}
+              onCheckedChange={changeNotifications}
+            />
+          </div>
+          <BellButton
+            subscribed={notifications}
+            onSubscribedChange={changeNotifications}
+            count={notifications ? 2 : 0}
+          />
+          <div className="component-lab-control-row">
+            <span>Theme transition</span>
+            <AnimatedThemeToggler
+              theme={localTheme}
+              onThemeChange={changeTheme}
+              className="component-lab-icon-button"
+            />
+          </div>
+          <SwitchButton theme={localTheme} onThemeChange={changeTheme} />
+        </Card>
+
+        <Card className="component-lab-card">
+          <div className="component-lab-heading">
+            <span className="eyebrow">LOCAL PROMPT NOTE</span>
+            <Activity size={16} />
+          </div>
+          <p>Save a prompt as a local note. No AI service is connected.</p>
+          <PromptBar
+            placeholder="Write a local operations note…"
+            onSend={(value) => {
+              setPromptText(value);
+              setPromptNote(value);
+            }}
+          />
+          {promptNote && (
+            <p className="component-lab-note" role="status">
+              Saved locally: {promptNote}
+            </p>
+          )}
+          <AIContextMeter
+            segments={[
+              {
+                id: "prompt",
+                label: "Current note estimate",
+                tokens: promptTokens,
+                color: "#9fe870",
+              },
+            ]}
+            limit={8000}
+            modelLabel="Local estimate · 8K limit"
+            className="component-lab-meter"
+          />
+          <ParticleButton
+            onClick={() =>
+              setPromptNote((current) => current || "Workspace note saved.")
+            }
+            successLabel="Saved locally"
+          >
+            Save note
+          </ParticleButton>
+        </Card>
+
+        <Card className="component-lab-card">
+          <div className="component-lab-heading">
+            <span className="eyebrow">DATE RANGE</span>
+            <Activity size={16} />
+          </div>
+          <DateRangeCalendar
+            from={range.from}
+            to={range.to}
+            onChange={setRange}
+            className="component-lab-dates"
+          />
+          <p className="component-lab-note">
+            Selected local range: {rangeDays} day{rangeDays === 1 ? "" : "s"}.
+          </p>
+          <div className="component-lab-control-row">
+            <span>Motion sample</span>
+            <LatticeLoader label="Decorative loading animation" />
+          </div>
+        </Card>
+
+        <Card className="component-lab-card">
+          <div className="component-lab-heading">
+            <span className="eyebrow">TIMEZONES</span>
+            <Activity size={16} />
+          </div>
+          <TimezonePlanner />
+        </Card>
+
+        <div className="component-lab-beam-wrap" ref={beamRef}>
+          <Card className="component-lab-card component-lab-wide component-lab-beam">
+            <AnimatedBeam
+              containerRef={beamRef}
+              fromRef={beamFrom}
+              toRef={beamTo}
+              curvature={32}
+              duration={4}
+            />
+            <div className="component-lab-heading">
+              <span className="eyebrow">ANIMATED BEAM</span>
+              <ArrowRight size={16} />
+            </div>
+            <div className="component-lab-beam-nodes">
+              <span ref={beamFrom}>Validated locally</span>
+              <span ref={beamTo}>Ready for review</span>
+            </div>
+          </Card>
+        </div>
+
+        <Card className="component-lab-card component-lab-wide">
+          <div className="component-lab-heading">
+            <span className="eyebrow">SAFE INTERACTION PATTERNS</span>
+            <StatusMark
+              status={reviewed ? "success" : "warning"}
+              label={reviewed ? "Reviewed" : "Needs review"}
+            />
+          </div>
+          <SwipeRow
+            label="Sample activity actions"
+            actions={
+              <button
+                type="button"
+                onClick={() => setReviewed((value) => !value)}
+              >
+                {reviewed ? "Reopen" : "Mark reviewed"}
+              </button>
+            }
+            className="component-lab-swipe"
+          >
+            <div className="component-lab-swipe-content">
+              <span>Sample node maintenance notice</span>
+              <small>Drag left to reveal its local action</small>
+            </div>
+          </SwipeRow>
+        </Card>
+
+        <Card className="component-lab-card component-lab-wide">
+          <div className="component-lab-heading">
+            <span className="eyebrow">LASER VISUAL</span>
+            <span>
+              {pauseVisuals
+                ? "Paused for motion/performance settings"
+                : "Decorative sample"}
+            </span>
+          </div>
+          <div className="component-lab-visuals">
+            {/* ORIGINAL (preserved, not deleted — disabled by comment): <div className="component-lab-orb"><Suspense fallback={<LatticeLoader label="Loading crystal visual" />}><CrystalizedBall preset="eclipse" particleCount={1800} interactive={!pauseVisuals} paused={pauseVisuals} /></Suspense></div> */}
+            <div className="component-lab-laser">
+              <Suspense
+                fallback={<LatticeLoader label="Loading laser visual" />}
+              >
+                <LaserFlow
+                  surfaceRef={surfaceRef}
+                  color="#9fe870"
+                  theme={localTheme}
+                  paused={pauseVisuals}
+                  dpr={1}
+                />
+              </Suspense>
+              <div className="component-lab-laser-surface" ref={surfaceRef}>
+                Sample telemetry surface
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/pages/Home.tsx b/dashboard/src/pages/Home.tsx
index 3bf6a74..d19f295 100644
--- a/dashboard/src/pages/Home.tsx
+++ b/dashboard/src/pages/Home.tsx
@@ -1,17 +1,35 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useReducedMotion } from "framer-motion";
 import * as Icons from "lucide-react";
-import { useState } from "react";
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router-dom";
-import { ResourceChart } from "../components/Charts";
+// ORIGINAL (preserved, not deleted — disabled by comment): import { ResourceChart } from "../components/Charts";
 import { Counter } from "../components/Counter";
-import { HologramVisual } from "../components/HologramVisual";
+// ORIGINAL (preserved, not deleted — disabled by comment): import { HologramVisual } from "../components/HologramVisual";
+import { LatticeLoader } from "../components/react-bits/controls";
+import BlurText from "../components/react-bits/text/BlurText";
+import SplitText from "../components/react-bits/text/SplitText";
 import * as UI from "../components/ui";
 import type { ActivityEvent, Software } from "../data/models";
 import { useDemoData, useLocalCollection } from "../data/useDashboardData";
 import { useDashboardStore } from "../state/useDashboardStore";
 import { ActivityLine } from "./shared";
 
+const CrystalizedBall = lazy(
+  () => import("../components/react-bits/visuals/CrystalizedBall"),
+);
+const ResourceChart = lazy(() =>
+  import("../components/Charts").then((module) => ({
+    default: module.ResourceChart,
+  })),
+);
+
 export function HomePage() {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const [chartVisible, setChartVisible] = useState(false);
+  const reducedMotion = useReducedMotion();
+  const performanceMode = useDashboardStore((state) => state.performanceMode);
+  const demoMotion = useDashboardStore((state) => state.demoMotion);
   const { cluster, clusters, nodes } = useDemoData();
   const { data: initialActivity = [] } =
     useLocalCollection<ActivityEvent>("activity");
@@ -19,6 +37,10 @@ export function HomePage() {
     useLocalCollection<Software>("software-catalog");
   const { data: agentEntities = [] } =
     useLocalCollection<import("../data/agents").AgentEntity>("agents");
+  const localAgents = useMemo(
+    () => agentEntities.filter((agent) => agent.kind === "agent"),
+    [agentEntities],
+  );
   const queryClient = useQueryClient();
   const displayName = useDashboardStore((state) => state.displayName);
   const online = nodes.filter(
@@ -41,6 +63,21 @@ export function HomePage() {
     day: "numeric",
   }).format(new Date());
   const hour = new Date().getHours();
+  useEffect(() => {
+    const element = chartRef.current;
+    if (!element || chartVisible) return undefined;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setChartVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [chartVisible]);
   const salutation =
     hour < 12
       ? "Good morning,"
@@ -55,15 +92,39 @@ export function HomePage() {
           <div className="eyebrow">
             <span className="hero-eyebrow-mark" /> OPENCLUSTER / LOCAL WORKSPACE
           </div>
+          {/* ORIGINAL (preserved, not deleted — disabled by comment): <h1>{salutation}<br /><em>{displayName}.</em></h1> */}
           <h1>
-            {salutation}
+            <SplitText
+              text={salutation}
+              tag="span"
+              textAlign="left"
+              splitType="words"
+              delay={55}
+              duration={0.8}
+            />
             <br />
-            <em>{displayName}.</em>
+            <em>
+              <SplitText
+                text={`${displayName}.`}
+                tag="span"
+                textAlign="left"
+                splitType="words"
+                delay={70}
+                duration={0.9}
+              />
+            </em>
           </h1>
-          <p>
-            Your cluster operations, agent workflows, and system signals in one
-            place.
-          </p>
+          {/* ORIGINAL (preserved, not deleted — disabled by comment): <p>Your cluster operations, agent workflows, and system signals in one place.</p> */}
+          <BlurText
+            text="Your cluster operations, agent workflows, and system signals in one place."
+            className="home-hero-description"
+            effect="focus"
+            animateBy="words"
+            delay={45}
+            stepDuration={0.3}
+            distance={12}
+            trigger="view"
+          />
           <div className="hero-actions">
             <Link to="/mission-control" className="button button-primary">
               <Icons.ScanEye size={15} /> Enter Mission Control
@@ -85,7 +146,28 @@ export function HomePage() {
             {greeting.toUpperCase()}
           </div>
         </div>
-        <HologramVisual />
+        {/* ORIGINAL (preserved, not deleted — disabled by comment): <HologramVisual /> */}
+        <div
+          className="home-crystal-visual"
+          role="img"
+          aria-label="Decorative crystal orb, not a live cluster visualization"
+        >
+          <div className="home-crystal-label">
+            <i /> CRYSTAL ORB <span>DEMO</span>
+          </div>
+          <Suspense fallback={<LatticeLoader label="Loading crystal orb" />}>
+            <CrystalizedBall
+              preset="eclipse"
+              particleCount={3200}
+              interactive={!performanceMode && !reducedMotion && demoMotion}
+              paused={performanceMode || Boolean(reducedMotion) || !demoMotion}
+            />
+          </Suspense>
+          <div className="home-crystal-footer">
+            <span>LOCAL WORKSPACE</span>
+            <span>DECORATIVE VISUAL</span>
+          </div>
+        </div>
         <div className="hero-watermark" aria-hidden="true">
           OC / 01
         </div>
@@ -175,9 +257,7 @@ export function HomePage() {
           label="AI agents"
           value={
             <Counter
-              value={
-                agentEntities.filter((agent) => agent.kind === "agent").length
-              }
+              value={localAgents.length}
               minDigits={2}
               fontSize="inherit"
               fontWeight={600}
@@ -228,29 +308,26 @@ export function HomePage() {
               Open graph <Icons.ArrowRight size={13} />
             </Link>
           </div>
-          {agentEntities
-            .filter((agent) => agent.kind === "agent")
-            .slice(0, 3)
-            .map((agent) => (
-              <div className="agent-summary-row" key={agent.id}>
-                <span
-                  className={`agent-summary-icon ${agent.color === "violet" ? "purple" : ""}`}
-                >
-                  {agent.icon === "codex" ? (
-                    <Icons.BrainCircuit size={15} />
-                  ) : (
-                    <Icons.Bot size={15} />
-                  )}
-                </span>
-                <span>
-                  <b>{agent.name}</b>
-                  <small>{agent.role} · local record</small>
-                </span>
-                <i
-                  className={`agent-state-dot ${agent.status === "attention" || agent.status === "paused" ? "attention" : ""}`}
-                />
-              </div>
-            ))}
+          {localAgents.slice(0, 3).map((agent) => (
+            <div className="agent-summary-row" key={agent.id}>
+              <span
+                className={`agent-summary-icon ${agent.color === "violet" ? "purple" : ""}`}
+              >
+                {agent.icon === "codex" ? (
+                  <Icons.BrainCircuit size={15} />
+                ) : (
+                  <Icons.Bot size={15} />
+                )}
+              </span>
+              <span>
+                <b>{agent.name}</b>
+                <small>{agent.role} · local record</small>
+              </span>
+              <i
+                className={`agent-state-dot ${agent.status === "attention" || agent.status === "paused" ? "attention" : ""}`}
+              />
+            </div>
+          ))}
           <div className="agent-summary-foot">
             <Icons.CircleAlert size={13} /> Agent records are local
             configuration; no agent is connected.
@@ -342,8 +419,13 @@ export function HomePage() {
               <small>Local sample nodes · no live network telemetry</small>
             </div>
           </div>
-          <div className="home-chart">
-            <ResourceChart metric="cpu" compareMemory />
+          <div className="home-chart" ref={chartRef}>
+            {/* ORIGINAL (preserved, not deleted — disabled by comment): <ResourceChart metric="cpu" compareMemory /> */}
+            {chartVisible && (
+              <Suspense fallback={null}>
+                <ResourceChart metric="cpu" compareMemory />
+              </Suspense>
+            )}
           </div>
         </UI.Card>
         <UI.Card className="quick-actions">
diff --git a/dashboard/src/pages/MissionControl.tsx b/dashboard/src/pages/MissionControl.tsx
index 36d5e25..dcf4dab 100644
--- a/dashboard/src/pages/MissionControl.tsx
+++ b/dashboard/src/pages/MissionControl.tsx
@@ -1,3 +1,4 @@
+import { useReducedMotion } from "framer-motion";
 import {
   ChevronDown,
   CircleAlert,
@@ -5,14 +6,23 @@ import {
   Layers3,
   Orbit,
   Share2,
+  // ORIGINAL (preserved, not deleted — disabled by comment): Sparkles,
+  Waves,
 } from "lucide-react";
 import { lazy, Suspense, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
+import { LatticeLoader } from "../components/react-bits/controls";
+import CountUp from "../components/react-bits/text/CountUp";
 import { Topology } from "../components/Topology";
 import { Button, LoadingState, PageTitle, Progress } from "../components/ui";
 import type { Health } from "../data/models";
 import { useDemoData } from "../data/useDashboardData";
+import { useDashboardStore } from "../state/useDashboardStore";
 
+// ORIGINAL (preserved, not deleted — disabled by comment): const CrystalizedBall = lazy(() => import("../components/react-bits/visuals/CrystalizedBall"));
+const LaserFlow = lazy(
+  () => import("../components/react-bits/visuals/LaserFlow"),
+);
 const GlobeScene = lazy(() =>
   import("../components/GlobeScene").then((module) => ({
     default: module.GlobeScene,
@@ -21,7 +31,11 @@ const GlobeScene = lazy(() =>
 
 export function MissionPage() {
   const { cluster, nodes, clusters } = useDemoData();
-  const [layout, setLayout] = useState<"topology" | "orbit" | "globe">("globe");
+  const [layout, setLayout] = useState<
+    "topology" | "orbit" | "globe" | "laser"
+  >("globe");
+  const performanceMode = useDashboardStore((state) => state.performanceMode);
+  const reducedMotion = useReducedMotion();
   const [healthFilter, setHealthFilter] = useState<Health | "all">("all");
   const visibleNodes = useMemo(
     () =>
@@ -87,6 +101,14 @@ export function MissionPage() {
           >
             <Globe2 size={13} /> 3D globe
           </Button>
+          {/* ORIGINAL (preserved, not deleted — disabled by comment): <Button className={layout === "crystal" ? "selected" : ""} aria-pressed={layout === "crystal"} onClick={() => setLayout("crystal")}><Sparkles size={13} /> Crystal orb</Button> */}
+          <Button
+            className={layout === "laser" ? "selected" : ""}
+            aria-pressed={layout === "laser"}
+            onClick={() => setLayout("laser")}
+          >
+            <Waves size={13} /> Laser flow
+          </Button>
         </fieldset>
         <fieldset className="mission-filters">
           <legend className="sr-only">Filter nodes by health</legend>
@@ -107,6 +129,34 @@ export function MissionPage() {
       {layout === "globe" ? (
         <Suspense fallback={<LoadingState label="Loading 3D cluster globe" />}>
           <GlobeScene nodes={visibleNodes} />
+        </Suspense> /* ORIGINAL (preserved, not deleted — disabled by comment):
+        : layout === "crystal" ? (
+          <Suspense fallback={<div className="visual-loader"><LatticeLoader label="Loading crystal orb" /></div>}>
+            <div className="mission-visual-preview" role="img" aria-label="Decorative sample crystal visualization; does not represent live node data">
+              <CrystalizedBall preset="eclipse" particleCount={3500} paused={performanceMode || Boolean(reducedMotion)} />
+            </div>
+          </Suspense>
+      */
+      ) : layout === "laser" ? (
+        <Suspense
+          fallback={
+            <div className="visual-loader">
+              <LatticeLoader label="Loading laser flow" />
+            </div>
+          }
+        >
+          <div
+            className="mission-visual-preview"
+            role="img"
+            aria-label="Decorative sample laser light visualization; does not represent live node data"
+          >
+            <LaserFlow
+              color="#55d6f0"
+              intensity={1.1}
+              speed={performanceMode || reducedMotion ? 0 : 0.65}
+              paused={performanceMode || Boolean(reducedMotion)}
+            />
+          </div>
         </Suspense>
       ) : (
         <Topology nodes={visibleNodes} layout={layout} />
@@ -114,12 +164,16 @@ export function MissionPage() {
       <div className="mission-analytics">
         <div className="mission-metric">
           <span>AVERAGE CPU</span>
-          <b>{averageCpu}%</b>
+          <b>
+            <CountUp from={0} to={averageCpu} suffix="%" duration={1.2} />
+          </b>
           <Progress value={averageCpu} />
         </div>
         <div className="mission-metric">
           <span>AVERAGE MEMORY</span>
-          <b>{averageMemory}%</b>
+          <b>
+            <CountUp from={0} to={averageMemory} suffix="%" duration={1.2} />
+          </b>
           <Progress value={averageMemory} tone="purple" />
         </div>
         <div className="mission-metric mission-alerts">
diff --git a/dashboard/src/pages/Settings.tsx b/dashboard/src/pages/Settings.tsx
index 2bb2c13..b4b9dae 100644
--- a/dashboard/src/pages/Settings.tsx
+++ b/dashboard/src/pages/Settings.tsx
@@ -1,6 +1,8 @@
 import { useQueryClient } from "@tanstack/react-query";
 import * as Icons from "lucide-react";
 import { useState } from "react";
+import { transitionTheme } from "../animations/theme-transition";
+import { BellToggle, ParticleButton } from "../components/react-bits/controls";
 import * as UI from "../components/ui";
 import { useDashboardStore } from "../state/useDashboardStore";
 
@@ -22,6 +24,9 @@ export function SettingsPage() {
   const resetDemoData = useDashboardStore((s) => s.resetDemoData);
   const queryClient = useQueryClient();
   const [saved, setSaved] = useState("");
+  const [notificationsEnabled, setNotificationsEnabled] = useState(
+    () => localStorage.getItem("opencluster.notifications") !== "false",
+  );
   return (
     <>
       <UI.PageTitle
@@ -67,7 +72,8 @@ export function SettingsPage() {
               <div>
                 <b>Theme</b>
                 <small>
-                  Dark is the recommended command-center appearance.
+                  Choose a theme or follow your system preference. Changes apply
+                  immediately.
                 </small>
               </div>
               <div className="theme-options">
@@ -76,7 +82,18 @@ export function SettingsPage() {
                     type="button"
                     key={value}
                     className={theme === value ? "selected" : ""}
-                    onClick={() => setTheme(value)}
+                    onClick={(event) => {
+                      const next =
+                        value === "system"
+                          ? window.matchMedia("(prefers-color-scheme: light)")
+                              .matches
+                            ? "light"
+                            : "dark"
+                          : value;
+                      transitionTheme(event.currentTarget, next, () =>
+                        setTheme(value),
+                      );
+                    }}
                   >
                     {value[0].toUpperCase() + value.slice(1)}
                   </button>
@@ -194,6 +211,26 @@ export function SettingsPage() {
               </div>
               <Icons.Check size={16} className="accent-icon" />
             </div>
+            <div className="setting-row">
+              <div>
+                <b>Activity notifications</b>
+                <small>Show the activity indicator in the top bar.</small>
+              </div>
+              <BellToggle
+                checked={notificationsEnabled}
+                onCheckedChange={(enabled) => {
+                  setNotificationsEnabled(enabled);
+                  localStorage.setItem(
+                    "opencluster.notifications",
+                    String(enabled),
+                  );
+                  window.dispatchEvent(
+                    new Event("opencluster:notifications-change"),
+                  );
+                }}
+                label="Activity notifications"
+              />
+            </div>
           </UI.Card>
           <UI.Card id="demo" className="settings-card">
             <div className="settings-card-heading">
@@ -267,27 +304,36 @@ export function SettingsPage() {
                   Restore the original sample content and default settings.
                 </small>
               </div>
-              <UI.Button
-                onClick={async () => {
+              {/* ORIGINAL (preserved, not deleted — disabled by comment): <UI.Button onClick={async () => { if (window.confirm("Reset local clusters, nodes, workflows, graph layouts, and preferences? This cannot be undone.")) { try { await resetDemoData(); await queryClient.invalidateQueries(); setSaved("Sample records and preferences restored."); } catch { setSaved("Local reset failed. Your records were not confirmed as reset."); } } }}>Reset sample data</UI.Button> */}
+              <ParticleButton
+                className="button button-secondary"
+                onClick={(event) => {
                   if (
-                    window.confirm(
+                    !window.confirm(
                       "Reset local clusters, nodes, workflows, graph layouts, and preferences? This cannot be undone.",
                     )
                   ) {
-                    try {
-                      await resetDemoData();
-                      await queryClient.invalidateQueries();
-                      setSaved("Sample records and preferences restored.");
-                    } catch {
+                    event.preventDefault();
+                    return;
+                  }
+                  return resetDemoData()
+                    .then(() => queryClient.invalidateQueries())
+                    .then(() =>
+                      setSaved("Sample records and preferences restored."),
+                    )
+                    .catch(() => {
                       setSaved(
                         "Local reset failed. Your records were not confirmed as reset.",
                       );
-                    }
-                  }
+                      throw new Error("Local reset failed");
+                    });
                 }}
+                pendingLabel="Resetting…"
+                successLabel="Reset complete"
+                errorLabel="Reset failed"
               >
                 Reset sample data
-              </UI.Button>
+              </ParticleButton>
             </div>
           </UI.Card>
           <UI.Card id="integrations" className="settings-card">
diff --git a/dashboard/src/pages/index.tsx b/dashboard/src/pages/index.tsx
index 3468828..dda5cc3 100644
--- a/dashboard/src/pages/index.tsx
+++ b/dashboard/src/pages/index.tsx
@@ -39,6 +39,11 @@ const ActivityPage = lazy(() =>
 const SettingsPage = lazy(() =>
   import("./Settings").then((module) => ({ default: module.SettingsPage })),
 );
+const ComponentLabPage = lazy(() =>
+  import("./ComponentLab").then((module) => ({
+    default: module.ComponentLabPage,
+  })),
+);
 const NotFoundPage = lazy(() =>
   import("./NotFound").then((module) => ({ default: module.NotFoundPage })),
 );
@@ -83,6 +88,7 @@ export function DashboardApp() {
             <Route path="monitoring" element={<MonitoringPage />} />
             <Route path="activity" element={<ActivityPage />} />
             <Route path="settings" element={<SettingsPage />} />
+            <Route path="component-lab" element={<ComponentLabPage />} />
             <Route path="*" element={<NotFoundPage />} />
           </Route>
         </Routes>
diff --git a/dashboard/src/state/useDashboardStore.ts b/dashboard/src/state/useDashboardStore.ts
index e5ebea0..a51cb44 100644
--- a/dashboard/src/state/useDashboardStore.ts
+++ b/dashboard/src/state/useDashboardStore.ts
@@ -141,7 +141,7 @@ export const useDashboardStore = create<DashboardState>()(
       visualQuality: "auto",
       demoDataset: "multi-cluster",
       persistenceError: null,
-      theme: "dark",
+      theme: "light",
       addCluster: (name, region, description) =>
         serializeLocalMutation(async () => {
           const state = useDashboardStore.getState();
@@ -326,7 +326,7 @@ export const useDashboardStore = create<DashboardState>()(
             motionMode: "system",
             performanceMode: false,
             visualQuality: "auto",
-            theme: "dark",
+            theme: "light",
             demoDataset: "multi-cluster",
           });
           void dashboardQueryClient.invalidateQueries();
@@ -442,7 +442,7 @@ export const useDashboardStore = create<DashboardState>()(
           theme:
             old?.theme === "light" || old?.theme === "system"
               ? old.theme
-              : "dark",
+              : "light",
         };
       },
       merge: (persisted, current) => {
@@ -481,7 +481,7 @@ export const useDashboardStore = create<DashboardState>()(
           theme:
             saved?.theme === "light" || saved?.theme === "system"
               ? saved.theme
-              : "dark",
+              : "light",
           motionMode:
             saved?.motionMode === "reduced" || saved?.motionMode === "cinematic"
               ? saved.motionMode
diff --git a/dashboard/src/styles.css b/dashboard/src/styles.css
index f76e003..413e4e4 100644
--- a/dashboard/src/styles.css
+++ b/dashboard/src/styles.css
@@ -1,3 +1,5 @@
+/* biome-ignore-all lint/complexity/noImportantStyles: global reduced-motion overrides must defeat component animations */
+/* biome-ignore-all lint/complexity/noImportantStyles: global reduced-motion overrides must defeat component animations */
 @import "tailwindcss";
 
 .app-bootstrap,
@@ -3031,6 +3033,96 @@ a {
     stroke-dashoffset: -48;
   }
 }
+@keyframes dashboard-card-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0) scale(0.99);
+    filter: blur(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+    filter: blur(0);
+  }
+}
+html[data-motion="full"]
+  .page-transition
+  :is(
+    .stats-grid,
+    .home-pulse-grid,
+    .dashboard-grid,
+    .monitoring-grid,
+    .cluster-cards,
+    .software-grid
+  )
+  > .panel {
+  animation: dashboard-card-enter 380ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+html[data-motion="full"]
+  .page-transition
+  :is(
+    .stats-grid,
+    .home-pulse-grid,
+    .dashboard-grid,
+    .monitoring-grid,
+    .cluster-cards,
+    .software-grid
+  )
+  > .panel:nth-child(2) {
+  animation-delay: 55ms;
+}
+html[data-motion="full"]
+  .page-transition
+  :is(
+    .stats-grid,
+    .home-pulse-grid,
+    .dashboard-grid,
+    .monitoring-grid,
+    .cluster-cards,
+    .software-grid
+  )
+  > .panel:nth-child(3) {
+  animation-delay: 110ms;
+}
+html[data-motion="full"]
+  .page-transition
+  :is(
+    .stats-grid,
+    .home-pulse-grid,
+    .dashboard-grid,
+    .monitoring-grid,
+    .cluster-cards,
+    .software-grid
+  )
+  > .panel:nth-child(4) {
+  animation-delay: 165ms;
+}
+html[data-motion="full"]
+  .page-transition
+  :is(
+    .stats-grid,
+    .home-pulse-grid,
+    .dashboard-grid,
+    .monitoring-grid,
+    .cluster-cards,
+    .software-grid
+  )
+  > .panel:nth-child(5) {
+  animation-delay: 220ms;
+}
+html[data-motion="full"]
+  .page-transition
+  :is(
+    .stats-grid,
+    .home-pulse-grid,
+    .dashboard-grid,
+    .monitoring-grid,
+    .cluster-cards,
+    .software-grid
+  )
+  > .panel:nth-child(6) {
+  animation-delay: 275ms;
+}
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -3041,6 +3133,14 @@ a {
     transition-duration: 0.01ms !important;
   }
 }
+html[data-theme-transition="active"]::view-transition-group(root) {
+  animation-duration: 520ms;
+}
+html[data-theme-transition="active"]::view-transition-old(root),
+html[data-theme-transition="active"]::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
 @media (max-width: 1150px) {
   .sidebar {
     width: 215px;
@@ -3575,6 +3675,544 @@ a {
   }
 }
 
+/* Wise-inspired dashboard skin; layout and operational meaning stay OpenCluster-specific. */
+:root {
+  --bg: #e8ebe6;
+  --surface: #ffffff;
+  --surface-2: #f5f7f3;
+  --surface-3: #e2f6d5;
+  --border: #d8ddd5;
+  --border-light: #c7cec3;
+  --text: #0e0f0c;
+  --muted: #656963;
+  --faint: #868685;
+  --green: #2ead4b;
+  --blue: #2587a7;
+  --purple: #6952a3;
+  --amber: #b86700;
+  --red: #d03238;
+  font-family: "Inter Variable", Inter, system-ui, sans-serif;
+  color: #0e0f0c;
+  background: #e8ebe6;
+  color-scheme: light;
+}
+html[data-theme="light"] {
+  --bg: #e8ebe6;
+  --surface: #fff;
+  --surface-2: #f5f7f3;
+  --surface-3: #e2f6d5;
+  --border: #d8ddd5;
+  --border-light: #c7cec3;
+  --text: #0e0f0c;
+  --muted: #656963;
+  --faint: #868685;
+  --green: #2ead4b;
+  --blue: #2587a7;
+  --purple: #6952a3;
+  --amber: #b86700;
+  --red: #d03238;
+  color-scheme: light;
+  background: #e8ebe6;
+  color: #0e0f0c;
+}
+html[data-theme="dark"] {
+  --bg: #0e0f0c;
+  --surface: #191c17;
+  --surface-2: #20241d;
+  --surface-3: #273321;
+  --border: #343a30;
+  --border-light: #454c40;
+  --text: #f5f6f2;
+  --muted: #b0b4ac;
+  --faint: #868b81;
+  --green: #9fe870;
+  --blue: #65c5de;
+  --purple: #c2afff;
+  --amber: #ffd11a;
+  --red: #ff898c;
+  color-scheme: dark;
+  background: #0e0f0c;
+  color: #f5f6f2;
+}
+body,
+html[data-theme="light"] body {
+  background: #e8ebe6;
+  color: #0e0f0c;
+}
+html[data-theme="dark"] body {
+  background: #0e0f0c;
+  color: #f5f6f2;
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline-color: #4e9b2f;
+}
+::selection {
+  background: #9fe870;
+  color: #0e0f0c;
+}
+.sidebar,
+html[data-theme="light"] .sidebar {
+  background: #fff;
+  border-color: #d8ddd5;
+}
+.brand-mark,
+html[data-theme="light"] .brand-mark {
+  background: #e2f6d5;
+  border-color: #c5edab;
+  border-radius: 50%;
+}
+.brand-mark span,
+.brand-word i {
+  background-color: #4e9b2f;
+  color: #4e9b2f;
+}
+.brand-word b,
+html[data-theme="light"] .brand-word b,
+.cluster-picker select,
+html[data-theme="light"] .cluster-picker select {
+  color: #0e0f0c;
+}
+.brand-word small,
+.nav-heading,
+.eyebrow {
+  color: #656963;
+}
+.cluster-picker-wrap {
+  border-color: #d8ddd5;
+  border-radius: 16px;
+  background: #f5f7f3;
+}
+.cluster-picker select option {
+  background: #fff;
+  color: #0e0f0c;
+}
+.nav-link,
+html[data-theme="light"] .nav-link {
+  color: #454745;
+  border-radius: 8px;
+}
+.nav-link:hover,
+html[data-theme="light"] .nav-link:hover {
+  background: #f5f7f3;
+  color: #0e0f0c;
+}
+.nav-link.active,
+html[data-theme="light"] .nav-link.active {
+  color: #0e0f0c;
+  background: #e2f6d5;
+  box-shadow: inset 3px 0 #4e9b2f;
+}
+.sidebar-health,
+html[data-theme="light"] .sidebar-health {
+  border-color: #d8ddd5;
+  background: #f5f7f3;
+}
+.sidebar-health b,
+html[data-theme="light"] .sidebar-health b,
+.sidebar-footer b,
+html[data-theme="light"] .sidebar-footer b {
+  color: #0e0f0c;
+}
+.sidebar-health small,
+html[data-theme="light"] .sidebar-health small,
+.sidebar-footer small,
+html[data-theme="light"] .sidebar-footer small {
+  color: #656963;
+}
+.main-area {
+  background: #e8ebe6;
+}
+html[data-theme="dark"] .main-area {
+  background: #0e0f0c;
+}
+.topbar,
+html[data-theme="light"] .topbar {
+  border-color: #d8ddd5;
+  background: #fff;
+}
+.crumb,
+html[data-theme="light"] .crumb {
+  color: #656963;
+}
+.crumb strong,
+html[data-theme="light"] .crumb strong {
+  color: #0e0f0c;
+}
+.crumb-slash {
+  color: #b3b9af;
+}
+.button,
+html[data-theme="light"] .button:not(.button-primary) {
+  min-height: 40px;
+  height: auto;
+  padding: 9px 16px;
+  border: 1px solid transparent;
+  border-radius: 24px;
+  background: #e8ebe6;
+  color: #0e0f0c;
+  font-size: 13px;
+  font-weight: 600;
+}
+.button:hover,
+html[data-theme="light"] .button:not(.button-primary):hover {
+  border-color: #c7cec3;
+  background: #dfe4dc;
+  color: #0e0f0c;
+}
+.button-primary,
+html[data-theme="light"] .button-primary {
+  border-color: #9fe870;
+  background: #9fe870;
+  color: #0e0f0c;
+  font-weight: 700;
+}
+.button-primary:hover,
+html[data-theme="light"] .button-primary:hover {
+  border-color: #cdffad;
+  background: #cdffad;
+  color: #0e0f0c;
+}
+.button-ghost,
+html[data-theme="light"] .button-ghost {
+  background: transparent;
+}
+.button-danger,
+html[data-theme="light"] .button-danger {
+  color: #a72027;
+  background: #fff;
+  border-color: #d03238;
+}
+.search-trigger,
+html[data-theme="light"] .search-trigger {
+  height: 40px;
+  border-color: #d8ddd5;
+  background: #f5f7f3;
+  color: #656963;
+}
+.notification-dot {
+  border-color: #fff;
+  background: #2ead4b;
+}
+.top-divider {
+  background: #d8ddd5;
+}
+.page-scroll {
+  padding-top: 32px;
+}
+.page-title h1,
+.not-found h1,
+html[data-theme="light"] .page-title h1,
+html[data-theme="light"] .not-found h1 {
+  color: #0e0f0c;
+  font-family: "Inter Variable", Inter, system-ui, sans-serif;
+  font-size: clamp(34px, 4vw, 48px);
+  font-weight: 850;
+  letter-spacing: -0.055em;
+  line-height: 1;
+}
+.page-title p,
+html[data-theme="light"] .page-title p {
+  color: #454745;
+  font-size: 14px;
+}
+.home-hero,
+html[data-theme="light"] .home-hero {
+  min-height: 360px;
+  border: 0;
+  border-radius: 24px;
+  background: #e8ebe6;
+  box-shadow: none;
+}
+.home-hero::before {
+  display: none;
+}
+.home-hero h1,
+html[data-theme="light"] .home-hero h1 {
+  color: #0e0f0c;
+  font-size: clamp(42px, 6vw, 76px);
+  font-weight: 900;
+  letter-spacing: -0.07em;
+  line-height: 0.98;
+}
+.home-hero h1 em,
+html[data-theme="light"] .home-hero h1 em {
+  color: #4e9b2f;
+  text-shadow: none;
+}
+.home-hero .eyebrow,
+html[data-theme="light"] .home-hero .eyebrow {
+  color: #454745;
+}
+.hero-eyebrow-mark {
+  background: #4e9b2f;
+  box-shadow: none;
+}
+.home-hero-copy > p,
+html[data-theme="light"] .home-hero-copy > p {
+  color: #454745;
+  font-size: 16px;
+  line-height: 1.5;
+}
+.hero-footnote,
+html[data-theme="light"] .hero-footnote {
+  color: #656963;
+}
+.hero-footnote i {
+  background: #b3b9af;
+}
+.panel,
+.stat-card,
+.settings-card,
+.activity-card,
+.queue-card,
+.cluster-card,
+.monitoring-main-chart,
+.storage-card,
+.agents-canvas-panel,
+.agents-inspector,
+.automation-inspector,
+.automation-palette,
+.automation-preview-card,
+.automation-steps-card,
+.node-detail-drawer,
+html[data-theme="light"] .panel,
+html[data-theme="light"] .modal-card,
+html[data-theme="light"] .command-dialog {
+  border: 0;
+  border-radius: 24px;
+  background: #fff;
+  color: #0e0f0c;
+  box-shadow: 0 2px 8px rgb(14 15 12 / 4%);
+}
+.panel-heading h2,
+.settings-card-heading h2,
+html[data-theme="light"] .panel-heading h2,
+html[data-theme="light"] .settings-card-heading h2 {
+  color: #0e0f0c;
+  font-weight: 700;
+  letter-spacing: -0.035em;
+}
+.panel-heading,
+.table-toolbar,
+.activity-date-label {
+  border-color: #e8ebe6;
+}
+.stat-label,
+.stat-detail,
+.settings-card-heading p,
+.muted,
+html[data-theme="light"] .stat-label,
+html[data-theme="light"] .stat-detail {
+  color: #656963;
+}
+.stat-value,
+html[data-theme="light"] .stat-value {
+  color: #0e0f0c;
+  font-weight: 750;
+}
+.stat-icon {
+  border-radius: 50%;
+  background: #e2f6d5;
+  color: #163300;
+}
+.data-table,
+html[data-theme="light"] .data-table {
+  color: #0e0f0c;
+}
+.data-table th,
+html[data-theme="light"] .data-table th {
+  background: #f5f7f3;
+  color: #656963;
+}
+.data-table td,
+.data-table tbody tr,
+html[data-theme="light"] .data-table td {
+  border-color: #e8ebe6;
+  color: #454745;
+}
+.data-table tbody tr:hover,
+html[data-theme="light"] .data-table tbody tr:hover {
+  background: #f5f7f3;
+}
+input,
+textarea,
+select,
+html[data-theme="light"] input,
+html[data-theme="light"] textarea,
+html[data-theme="light"] select {
+  border-color: #c7cec3;
+  border-radius: 12px;
+  background-color: #fff;
+  color: #0e0f0c;
+}
+.select-pill,
+.search-box,
+.metric-tabs,
+.settings-nav a,
+.theme-options button,
+html[data-theme="light"] .select-pill,
+html[data-theme="light"] .search-box,
+html[data-theme="light"] .metric-tabs,
+html[data-theme="light"] .settings-nav a,
+html[data-theme="light"] .theme-options button {
+  border-color: #d8ddd5;
+  border-radius: 9999px;
+  background: #fff;
+  color: #454745;
+}
+.app-footer,
+html[data-theme="light"] .app-footer {
+  border-color: #0e0f0c;
+  background: #0e0f0c;
+  color: #e8ebe6;
+}
+.app-footer b {
+  color: #9fe870;
+}
+.demo-banner,
+html[data-theme="light"] .demo-banner {
+  border: 0;
+  border-radius: 16px;
+  background: #e2f6d5;
+  color: #0e0f0c;
+}
+.toast-demo,
+html[data-theme="light"] .toast-demo {
+  border-color: #c5edab;
+  border-radius: 16px;
+  background: #fff;
+  color: #0e0f0c;
+  box-shadow: 0 8px 24px rgb(14 15 12 / 10%);
+}
+.stat-card,
+.settings-card,
+.activity-card,
+.queue-card,
+.monitoring-main-chart,
+.storage-card,
+.cluster-card {
+  padding: 24px;
+}
+html[data-theme="dark"] .sidebar,
+html[data-theme="dark"] .topbar {
+  border-color: #343a30;
+  background: #191c17;
+}
+html[data-theme="dark"] .brand-word b,
+html[data-theme="dark"] .cluster-picker select,
+html[data-theme="dark"] .crumb strong,
+html[data-theme="dark"] .sidebar-health b,
+html[data-theme="dark"] .sidebar-footer b,
+html[data-theme="dark"] .page-title h1,
+html[data-theme="dark"] .panel-heading h2,
+html[data-theme="dark"] .settings-card-heading h2,
+html[data-theme="dark"] .stat-value,
+html[data-theme="dark"] .home-hero h1 {
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .brand-word small,
+html[data-theme="dark"] .nav-heading,
+html[data-theme="dark"] .eyebrow,
+html[data-theme="dark"] .crumb,
+html[data-theme="dark"] .page-title p,
+html[data-theme="dark"] .home-hero-copy > p,
+html[data-theme="dark"] .stat-label,
+html[data-theme="dark"] .stat-detail,
+html[data-theme="dark"] .settings-card-heading p {
+  color: #b0b4ac;
+}
+html[data-theme="dark"] .cluster-picker-wrap,
+html[data-theme="dark"] .sidebar-health,
+html[data-theme="dark"] .search-trigger {
+  border-color: #343a30;
+  background: #20241d;
+}
+html[data-theme="dark"] .nav-link.active {
+  color: #f5f6f2;
+  background: #273321;
+  box-shadow: inset 3px 0 #9fe870;
+}
+html[data-theme="dark"] .nav-link:hover {
+  background: #20241d;
+}
+html[data-theme="dark"] .home-hero {
+  border: 0;
+  background: #0e0f0c;
+}
+html[data-theme="dark"] .home-hero h1 em {
+  color: #9fe870;
+}
+html[data-theme="dark"] .panel,
+html[data-theme="dark"] .stat-card,
+html[data-theme="dark"] .settings-card,
+html[data-theme="dark"] .activity-card,
+html[data-theme="dark"] .queue-card,
+html[data-theme="dark"] .cluster-card,
+html[data-theme="dark"] .monitoring-main-chart,
+html[data-theme="dark"] .storage-card,
+html[data-theme="dark"] .agents-canvas-panel,
+html[data-theme="dark"] .agents-inspector,
+html[data-theme="dark"] .automation-inspector,
+html[data-theme="dark"] .automation-palette,
+html[data-theme="dark"] .automation-preview-card,
+html[data-theme="dark"] .automation-steps-card,
+html[data-theme="dark"] .node-detail-drawer,
+html[data-theme="dark"] .modal-card,
+html[data-theme="dark"] .command-dialog {
+  border-color: #343a30;
+  background: #191c17;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .button:not(.button-primary) {
+  border-color: #454c40;
+  background: #20241d;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .button-primary {
+  border-color: #9fe870;
+  background: #9fe870;
+  color: #0e0f0c;
+}
+html[data-theme="dark"] input,
+html[data-theme="dark"] textarea,
+html[data-theme="dark"] select {
+  border-color: #454c40;
+  background-color: #20241d;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .data-table th {
+  background: #20241d;
+  color: #b0b4ac;
+}
+html[data-theme="dark"] .data-table td,
+html[data-theme="dark"] .data-table tbody tr {
+  border-color: #343a30;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .demo-banner {
+  background: #273321;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .stat-icon {
+  background: #273321;
+  color: #9fe870;
+}
+@media (max-width: 700px) {
+  .stat-card,
+  .settings-card,
+  .activity-card,
+  .queue-card,
+  .monitoring-main-chart,
+  .storage-card,
+  .cluster-card {
+    padding: 18px;
+  }
+}
+
 @media (max-width: 820px) {
   .sidebar {
     overflow-y: auto;
@@ -3959,6 +4597,19 @@ html[data-theme="light"] .command-item:hover {
   background: #11292d;
   color: #a7e8df;
 }
+.mission-visual-preview {
+  position: relative;
+  height: 420px;
+  overflow: hidden;
+  border: 1px solid #273b46;
+  border-radius: 10px;
+  background: radial-gradient(ellipse at center, #10222c 0%, #091116 72%);
+}
+.visual-loader {
+  display: grid;
+  min-height: 420px;
+  place-items: center;
+}
 .mission-filters button {
   display: inline-flex;
   align-items: center;
@@ -4351,3 +5002,565 @@ html[data-performance="on"] .holo-visual svg {
     font-size: 7px;
   }
 }
+
+/* Component Lab: a single place to exercise the supplied local UI patterns. */
+.component-lab-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+.component-lab-card {
+  min-width: 0;
+  padding: 22px !important;
+  position: relative;
+}
+.component-lab-wide {
+  grid-column: 1 / -1;
+}
+.component-lab-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  color: var(--muted, #747870);
+  font-size: 12px;
+}
+.component-lab-card h2 {
+  margin: 0 0 12px;
+  font-size: 25px;
+  letter-spacing: -0.04em;
+}
+.component-lab-card p {
+  color: var(--muted, #747870);
+  font-size: 13px;
+  line-height: 1.55;
+}
+.component-lab-blur {
+  display: block;
+  color: var(--muted, #747870);
+  font-size: 14px;
+}
+.component-lab-inline {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-top: 22px;
+  font-size: 28px;
+  font-weight: 650;
+}
+.component-lab-inline span,
+.component-lab-note {
+  font-size: 12px !important;
+  color: var(--muted, #747870);
+}
+.component-lab-account button {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--line, #dfe2dc);
+  border-radius: 12px;
+  background: var(--surface, #fff);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.component-lab-account [role="menu"] {
+  position: absolute;
+  z-index: 2;
+  display: grid;
+  gap: 4px;
+  min-width: 220px;
+  margin-top: 5px;
+  padding: 6px;
+  border: 1px solid var(--line, #dfe2dc);
+  border-radius: 12px;
+  background: var(--surface, #fff);
+  box-shadow: 0 12px 28px #0002;
+}
+.component-lab-account [role="menu"] button {
+  border: 0;
+  text-align: left;
+}
+.component-lab-control-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 12px 0;
+}
+.component-lab-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid var(--line, #dfe2dc);
+  border-radius: 12px;
+  background: var(--surface, #fff);
+  color: inherit;
+  cursor: pointer;
+}
+.component-lab-meter {
+  display: grid;
+  gap: 8px;
+  margin: 14px 0;
+  font-size: 12px;
+}
+.component-lab-meter > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.component-lab-meter ul {
+  display: flex;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--muted, #747870);
+}
+.component-lab-dates {
+  display: grid;
+  gap: 8px;
+  border: 0;
+  padding: 0;
+}
+.component-lab-dates label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.component-lab-dates input {
+  max-width: 160px;
+  padding: 7px;
+  border: 1px solid var(--line, #dfe2dc);
+  border-radius: 9px;
+  background: var(--surface, #fff);
+  color: inherit;
+}
+.component-lab-beam-wrap {
+  position: relative;
+  grid-column: 1 / -1;
+  overflow: visible;
+}
+.component-lab-beam {
+  min-height: 136px;
+  overflow: visible;
+}
+.component-lab-beam-nodes {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin: 26px 4% 0;
+}
+.component-lab-beam-nodes span,
+.component-lab-swipe-content {
+  padding: 12px 15px;
+  border: 1px solid var(--line, #dfe2dc);
+  border-radius: 12px;
+  background: var(--surface, #fff);
+  font-size: 13px;
+}
+.component-lab-swipe {
+  border-radius: 14px;
+}
+.component-lab-swipe-content {
+  display: grid;
+  gap: 4px;
+}
+.component-lab-swipe-content small {
+  color: var(--muted, #747870);
+}
+.component-lab-swipe .rb-swipe-actions button {
+  height: 40px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 10px;
+  background: #9fe870;
+  color: #10120d;
+  font-weight: 600;
+}
+.component-lab-visuals {
+  display: grid;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+  gap: 14px;
+}
+.component-lab-orb,
+.component-lab-laser {
+  position: relative;
+  min-height: 220px;
+  overflow: hidden;
+  border-radius: 18px;
+  background: #101310;
+}
+.component-lab-laser {
+  min-height: 260px;
+}
+.component-lab-orb > div {
+  position: absolute;
+  inset: 0;
+}
+.component-lab-laser-surface {
+  position: absolute;
+  left: 17%;
+  right: 17%;
+  top: 65%;
+  height: 28%;
+  display: grid;
+  place-items: center;
+  border: 1px solid #ffffff24;
+  border-radius: 14px;
+  background: #151915;
+  color: #ecf3e8;
+  font-size: 12px;
+}
+.component-lab-orb [role="status"],
+.component-lab-laser [role="status"] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+}
+@media (max-width: 760px) {
+  .component-lab-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .component-lab-wide,
+  .component-lab-beam-wrap {
+    grid-column: auto;
+  }
+  .component-lab-visuals {
+    grid-template-columns: 1fr;
+  }
+  .component-lab-orb {
+    min-height: 200px;
+  }
+}
+
+/* Consistent controls for the Wise skin and the shared top bar. */
+.top-actions .top-theme-toggle {
+  display: grid;
+  place-items: center;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid #d8ddd5;
+  border-radius: 50%;
+  background: #f5f7f3;
+  color: #292d26;
+  cursor: pointer;
+  transition:
+    background 0.16s,
+    border-color 0.16s,
+    color 0.16s,
+    transform 0.16s;
+}
+.top-actions .top-theme-toggle:hover {
+  border-color: #bfc8b9;
+  background: #e8ebe6;
+  transform: translateY(-1px);
+}
+.top-actions .top-theme-toggle:focus-visible,
+.component-lab button:focus-visible,
+.component-lab input:focus-visible,
+.component-lab textarea:focus-visible {
+  outline: 3px solid #7bbb55;
+  outline-offset: 2px;
+}
+.top-actions .top-theme-toggle:active {
+  transform: scale(0.96);
+}
+html[data-theme="dark"] .top-actions .top-theme-toggle {
+  border-color: #454c40;
+  background: #20241d;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .top-actions .top-theme-toggle:hover {
+  background: #2a3025;
+}
+.component-lab .rb-bell-toggle,
+.component-lab .rb-bell-button,
+.component-lab .rb-switch-button,
+.component-lab .rb-particle-button,
+.component-lab .rb-prompt-bar button,
+.component-lab-account > button {
+  min-height: 40px;
+  padding: 9px 14px;
+  border: 1px solid #d8ddd5;
+  border-radius: 999px;
+  background: #f5f7f3;
+  color: #20231e;
+  font:
+    600 13px / 1.1 "Inter Variable",
+    sans-serif;
+  cursor: pointer;
+  transition:
+    background 0.16s,
+    border-color 0.16s,
+    transform 0.16s,
+    color 0.16s;
+}
+.component-lab .rb-bell-toggle {
+  width: 42px;
+  height: 42px;
+  padding: 0;
+  border-radius: 50%;
+}
+.component-lab .rb-bell-toggle:hover,
+.component-lab .rb-bell-button:hover,
+.component-lab .rb-switch-button:hover,
+.component-lab .rb-particle-button:hover,
+.component-lab .rb-prompt-bar button:hover,
+.component-lab-account > button:hover {
+  border-color: #c4cebc;
+  background: #e8ebe6;
+}
+.component-lab .rb-bell-button[aria-pressed="true"] {
+  border-color: #9fe870;
+  background: #e2f6d5;
+}
+.component-lab .rb-bell-button:active,
+.component-lab .rb-switch-button:active,
+.component-lab .rb-particle-button:active,
+.component-lab .rb-prompt-bar button:active {
+  transform: scale(0.98);
+}
+.component-lab .rb-particle-button {
+  border-color: #9fe870;
+  background: #9fe870;
+  color: #10120d;
+}
+.component-lab .rb-particle-button:hover {
+  border-color: #8ed45f;
+  background: #8ed45f;
+}
+.component-lab .rb-prompt-bar {
+  min-height: 52px;
+  border-color: #d8ddd5;
+  border-radius: 16px;
+  background: #fff;
+}
+.component-lab .rb-prompt-bar textarea {
+  padding: 8px 4px;
+  font-size: 13px;
+}
+.component-lab .rb-prompt-bar button {
+  min-width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #9fe870;
+}
+.component-lab .rb-prompt-bar button:disabled,
+.component-lab .rb-particle-button:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+  transform: none;
+}
+.component-lab .component-lab-icon-button {
+  width: 42px;
+  height: 42px;
+  padding: 0;
+  border-radius: 50%;
+  transition:
+    background 0.16s,
+    border-color 0.16s,
+    transform 0.16s;
+}
+.component-lab .component-lab-icon-button:hover {
+  background: #e8ebe6;
+  transform: translateY(-1px);
+}
+.component-lab .component-lab-account [role="menu"] {
+  border-color: #d8ddd5;
+  border-radius: 14px;
+  background: #fff;
+}
+.component-lab .component-lab-account [role="menu"] button {
+  min-height: 38px;
+  border-radius: 9px;
+  background: transparent;
+  font:
+    500 13px "Inter Variable",
+    sans-serif;
+}
+.component-lab .component-lab-account [role="menu"] button:hover {
+  background: #f1f4ee;
+}
+.component-lab .component-lab-dates input {
+  min-height: 38px;
+}
+.component-lab .component-lab-swipe .rb-swipe-actions button {
+  min-height: 40px;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.component-lab .component-lab-swipe-content {
+  min-height: 64px;
+}
+html[data-theme="dark"] .component-lab .rb-bell-toggle,
+html[data-theme="dark"] .component-lab .rb-bell-button,
+html[data-theme="dark"] .component-lab .rb-switch-button,
+html[data-theme="dark"] .component-lab-account > button,
+html[data-theme="dark"] .component-lab .component-lab-icon-button {
+  border-color: #454c40;
+  background: #20241d;
+  color: #f5f6f2;
+}
+html[data-theme="dark"] .component-lab .rb-bell-button[aria-pressed="true"],
+html[data-theme="dark"] .component-lab .rb-particle-button,
+html[data-theme="dark"] .component-lab .rb-prompt-bar button {
+  border-color: #9fe870;
+  background: #9fe870;
+  color: #10120d;
+}
+html[data-theme="dark"] .component-lab .rb-prompt-bar {
+  border-color: #454c40;
+  background: #191c17;
+}
+html[data-theme="dark"] .component-lab .component-lab-account [role="menu"] {
+  border-color: #454c40;
+  background: #191c17;
+}
+html[data-theme="dark"]
+  .component-lab
+  .component-lab-account
+  [role="menu"]
+  button {
+  color: #f5f6f2;
+}
+html[data-theme="dark"]
+  .component-lab
+  .component-lab-account
+  [role="menu"]
+  button:hover {
+  background: #252a21;
+}
+.home-crystal-visual {
+  position: relative;
+  isolation: isolate;
+  width: min(100%, 390px);
+  aspect-ratio: 1;
+  justify-self: center;
+}
+.home-crystal-visual > div:nth-child(2) {
+  position: absolute;
+  inset: 0;
+}
+.home-crystal-visual canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.home-crystal-label,
+.home-crystal-footer {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: #68756a;
+  font: 9px var(--mono);
+  letter-spacing: 0.09em;
+}
+.home-crystal-label {
+  top: 10%;
+  left: 2%;
+}
+.home-crystal-label i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #4e9b2f;
+}
+.home-crystal-label span {
+  color: #89938a;
+}
+.home-crystal-footer {
+  right: 1%;
+  bottom: 8%;
+  left: 1%;
+  justify-content: space-between;
+  color: #68756a;
+  font-size: 8px;
+}
+.home-crystal-visual [role="status"] {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+}
+html[data-theme="dark"] .home-crystal-label,
+html[data-theme="dark"] .home-crystal-footer {
+  color: #aab3a5;
+}
+html[data-theme="dark"] .home-crystal-label span {
+  color: #c3cabe;
+}
+@media (max-width: 760px) {
+  .home-crystal-visual {
+    position: absolute;
+    right: -5%;
+    top: 12%;
+    width: 50%;
+    min-width: 220px;
+    opacity: 0.92;
+    pointer-events: none;
+  }
+  .home-crystal-label,
+  .home-crystal-footer {
+    font-size: 7px;
+  }
+}
+.top-actions .top-notification-toggle {
+  display: grid;
+  place-items: center;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid #d8ddd5;
+  border-radius: 50%;
+  background: #f5f7f3;
+  color: #292d26;
+  cursor: pointer;
+  transition:
+    background 0.16s,
+    border-color 0.16s,
+    color 0.16s,
+    transform 0.16s;
+}
+.top-actions .top-notification-toggle:hover {
+  border-color: #c4cebc;
+  background: #e8ebe6;
+  transform: translateY(-1px);
+}
+.top-actions .top-notification-toggle[aria-checked="true"] {
+  border-color: #9fe870;
+  background: #e2f6d5;
+}
+.top-actions .top-notification-toggle:active {
+  transform: scale(0.96);
+}
+html[data-theme="dark"] .top-actions .top-notification-toggle {
+  border-color: #454c40;
+  background: #20241d;
+  color: #f5f6f2;
+}
+html[data-theme="dark"]
+  .top-actions
+  .top-notification-toggle[aria-checked="true"] {
+  border-color: #9fe870;
+  background: #273321;
+  color: #d8ffbd;
+}
+html[data-theme="dark"] .top-actions .top-notification-toggle:hover {
+  background: #2a3025;
+}
diff --git a/dashboard/tests/charts.test.tsx b/dashboard/tests/charts.test.tsx
new file mode 100644
index 0000000..e72aa43
--- /dev/null
+++ b/dashboard/tests/charts.test.tsx
@@ -0,0 +1,108 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ResourceChart } from "../src/components/Charts";
+
+const state = vi.hoisted(() => ({
+  telemetry: [
+    { time: "00:00", cpu: 12, memory: 30, networkIn: 8, networkOut: 4 },
+    { time: "01:00", cpu: 18, memory: 34, networkIn: 10, networkOut: 5 },
+  ],
+  reducedMotion: false,
+}));
+
+vi.mock("framer-motion", () => ({
+  useReducedMotion: () => state.reducedMotion,
+}));
+
+vi.mock("../src/data/useDashboardData", () => ({
+  useLocalCollection: () => ({ data: state.telemetry }),
+}));
+
+vi.mock("recharts", () => ({
+  Area: ({
+    dataKey,
+    isAnimationActive,
+  }: {
+    dataKey: string;
+    isAnimationActive: boolean;
+  }) => (
+    <span
+      data-animated={String(isAnimationActive)}
+      data-testid={`area-${dataKey}`}
+    />
+  ),
+  AreaChart: ({ data, children }: { data: unknown[]; children: ReactNode }) => (
+    <div data-point-count={data.length} data-testid="area-chart">
+      {children}
+    </div>
+  ),
+  CartesianGrid: () => null,
+  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
+    <>{children}</>
+  ),
+  Tooltip: () => null,
+  XAxis: () => null,
+  YAxis: () => null,
+}));
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  state.reducedMotion = false;
+  state.telemetry = [
+    { time: "00:00", cpu: 12, memory: 30, networkIn: 8, networkOut: 4 },
+    { time: "01:00", cpu: 18, memory: 34, networkIn: 10, networkOut: 5 },
+  ];
+});
+
+describe("ResourceChart animation", () => {
+  it("skips chart animation when reduced motion is preferred", () => {
+    state.reducedMotion = true;
+    render(<ResourceChart />);
+
+    expect(screen.getByTestId("area-cpu")).toHaveAttribute(
+      "data-animated",
+      "false",
+    );
+  });
+
+  it("animates selection changes once and holds its data through telemetry refreshes", () => {
+    vi.useFakeTimers();
+    const { rerender } = render(<ResourceChart range="1h" />);
+    expect(screen.getByTestId("area-cpu")).toHaveAttribute(
+      "data-animated",
+      "true",
+    );
+
+    state.telemetry = [
+      ...state.telemetry,
+      { time: "02:00", cpu: 22, memory: 38, networkIn: 12, networkOut: 6 },
+    ];
+    rerender(<ResourceChart range="1h" />);
+    expect(screen.getByTestId("area-chart")).toHaveAttribute(
+      "data-point-count",
+      "2",
+    );
+    expect(screen.getByTestId("area-cpu")).toHaveAttribute(
+      "data-animated",
+      "true",
+    );
+
+    act(() => vi.advanceTimersByTime(760));
+    expect(screen.getByTestId("area-chart")).toHaveAttribute(
+      "data-point-count",
+      "3",
+    );
+    expect(screen.getByTestId("area-cpu")).toHaveAttribute(
+      "data-animated",
+      "false",
+    );
+
+    rerender(<ResourceChart metric="memory" range="1h" />);
+    expect(screen.getByTestId("area-memory")).toHaveAttribute(
+      "data-animated",
+      "true",
+    );
+  });
+});
diff --git a/dashboard/tests/themeTransition.test.ts b/dashboard/tests/themeTransition.test.ts
new file mode 100644
index 0000000..2eddc31
--- /dev/null
+++ b/dashboard/tests/themeTransition.test.ts
@@ -0,0 +1,62 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { transitionTheme } from "../src/animations/theme-transition";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  Reflect.deleteProperty(document, "startViewTransition");
+  Reflect.deleteProperty(document.documentElement, "animate");
+  delete document.documentElement.dataset.themeTransition;
+});
+
+describe("theme transition", () => {
+  it("reveals from the control and applies the theme without remounting", async () => {
+    vi.stubGlobal("matchMedia", () => ({ matches: false }));
+    const animate = vi.fn();
+    document.documentElement.animate = animate;
+    const origin = document.createElement("button");
+    origin.getBoundingClientRect = () => ({
+      left: 20,
+      top: 30,
+      width: 40,
+      height: 20,
+      right: 60,
+      bottom: 50,
+      x: 20,
+      y: 30,
+      toJSON: () => ({}),
+    });
+    const finished = Promise.resolve();
+    Object.defineProperty(document, "startViewTransition", {
+      configurable: true,
+      value: (update: () => void) => {
+        update();
+        return { ready: Promise.resolve(), finished };
+      },
+    });
+    const apply = vi.fn();
+    transitionTheme(origin, "light", apply);
+    expect(document.documentElement.dataset.theme).toBe("light");
+    expect(apply).toHaveBeenCalledOnce();
+    await Promise.resolve();
+    expect(animate).toHaveBeenCalledOnce();
+    expect(animate.mock.calls[0]?.[0]).toMatchObject({
+      clipPath: ["circle(0 at 40px 40px)", expect.stringContaining("circle(")],
+    });
+  });
+
+  it("applies immediately when reduced motion is preferred", () => {
+    vi.stubGlobal("matchMedia", () => ({ matches: true }));
+    const apply = vi.fn();
+    transitionTheme(null, "dark", apply);
+    expect(document.documentElement.dataset.theme).toBe("dark");
+    expect(apply).toHaveBeenCalledOnce();
+  });
+
+  it("falls back to an immediate theme update without View Transitions", () => {
+    vi.stubGlobal("matchMedia", () => ({ matches: false }));
+    const apply = vi.fn();
+    transitionTheme(null, "light", apply);
+    expect(document.documentElement.dataset.theme).toBe("light");
+    expect(apply).toHaveBeenCalledOnce();
+  });
+});
diff --git a/docs/DASHBOARD_ARCHITECTURE_AND_COMPONENT_MAP.md b/docs/DASHBOARD_ARCHITECTURE_AND_COMPONENT_MAP.md
index b7610e9..c21be87 100644
--- a/docs/DASHBOARD_ARCHITECTURE_AND_COMPONENT_MAP.md
+++ b/docs/DASHBOARD_ARCHITECTURE_AND_COMPONENT_MAP.md
@@ -5,7 +5,7 @@
 **Status:** Implementation blueprint  
 **Repository:** `https://github.com/zyrixdevs/opencluster`  
 **Scope:** create **only** the top-level `dashboard/` application and compatible documentation  
-**Last updated:** 2026-10-22
+**Last updated:** 2026-10-23
 
 > **Implementation status:** This document began as the dashboard architecture specification. Phase 1 now uses the implemented structure under `dashboard/src/`: `data/localProvider.ts` (IndexedDB and validation), `data/providerContracts.ts` (provider contracts), TanStack Query collection hooks, Zustand preferences, and feature pages. Proposals below describe intent; the shipped structure and provider behavior take precedence where the original component map differs.
 
@@ -24,7 +24,7 @@ OpenCluster Phase 1 is the permanent client application using **Vite + strict Ty
 | Async data contract | TanStack Query | Data caching hooks; IndexedDB provider now, remote provider later |
 | Local UI state | Zustand | Selected entities, inspector visibility, preferences |
 | Spatial graph editors | `@xyflow/react` | Agents graph and Automation canvas interaction |
-| 3D scenes | Three.js + React Three Fiber (R3F), Drei if needed | Home hologram and Mission Control globe |
+| 3D scenes | Three.js + React Three Fiber (R3F), Drei if needed | Mission Control globe and optional laser; OGL crystal orb in the Home hero |
 | Plots | Recharts | Monitoring and lightweight metrics |
 | UI motion | Motion for React (`motion/react`) | Cards, panels, route/page transitions |
 | Sequenced motion | GSAP | Rare hero choreography |
@@ -212,14 +212,15 @@ main.tsx
          │  ├─ DemoBadge
          │  └─ NotificationMenu
          ├─ RouteOutlet
-         │  ├─ HomePage → WelcomeHero/HologramStage → SignalOrbScene (lazy)
-         │  ├─ MissionControlPage → TopologyCanvas OR ClusterGlobeScene (lazy)
+         │  ├─ HomePage → SplitText/BlurText welcome copy
+         │  ├─ MissionControlPage → topology/orbit/globe OR optional laser visual (lazy)
          │  ├─ ClustersPage / ClusterDetailsPage
          │  ├─ NodesPage / NodeDetailsPage
          │  ├─ AgentsPage → AgentGraphCanvas OR AgentConstellation
          │  ├─ AutomationListPage / WorkflowEditorPage → WorkflowCanvas
          │  ├─ SoftwarePage → InstallPreviewWizard
          │  ├─ MonitoringPage → MetricCharts
+         │  ├─ ComponentLabPage → curated text, control, utility, and lazy visual demos
          │  ├─ ActivityPage → EventTimeline
          │  └─ SettingsPage → VisualQualitySettings
          └─ GlobalOverlays → Toasts / Dialogs / Confirmation / InspectorPortal
@@ -412,7 +413,7 @@ Create a shared **CanvasFrame**, **CanvasToolbar**, **GraphInspectorLayout**, **
 
 ## 8. 3D hologram architecture and failure isolation
 
-- Home route lazy imports `HologramStage` → `SignalOrbScene`; Mission Control lazy imports `ClusterGlobeScene` only when Globe mode selected.
+- Home uses SplitText/BlurText for welcome copy and a lazy OGL CrystalizedBall in the hero. Mission Control lazy imports its optional laser visual; the globe remains a lazy Three.js mode.
 - Wrap scenes with React `Suspense` and error boundary; static SVG/poster fallback handles WebGL disabled/context-loss and loading.
 - Use small, reused buffers/instanced particles; avoid allocating geometry/materials in render loops.
 - Use quality-dependent `[min, max]` DPR (e.g. `[1, 1.5]` on desktop, lower on weaker devices) and capped geometry/particle budgets.
@@ -421,6 +422,10 @@ Create a shared **CanvasFrame**, **CanvasToolbar**, **GraphInspectorLayout**, **
 - Use WebGL context cleanup and detection; scene never steals pointer actions from adjacent cards.
 - `prefers-reduced-motion`, performance mode, and tab visibility can all disable continuous motion.
 
+The Home crystal and optional Mission Control laser are decorative sample-data visuals, not live cluster telemetry. Both respect performance/reduced-motion settings. The Wise-inspired skin and component adaptations are documented in `docs/DESIGN_SYSTEM.md`; effects without a real dashboard touchpoint remain available on the Component Lab route.
+
+The `/component-lab` route makes the supplied SplitText, BlurText, CountUp, LaserFlow, PromptBar, AIContextMeter, ParticleButton, BellToggle, BellButton, SwitchButton, StatusMark, SwipeRow, LatticeLoader, DateRangeCalendar, TimezonePlanner, AccountMenu, AnimatedBeam, and AnimatedThemeToggler available in one interactive page. The CrystalizedBall appears only in the Home hero. Local-only controls do not imply backend functionality.
+
 **Scene design:** original teal/blue orbital signal mesh with rings, arcs and sparse particles; glowing globe with optional demo markers. No copy of proprietary graphic assets, no copyrighted JARVIS marks.
 
 ## 9. Animation policy and lifecycle
@@ -526,6 +531,8 @@ Before acting, Codex must inspect root `AGENTS.md`, `.codex/`, `docs/`, branch s
 
 ## 15. `dashboard/package.json` script contract
 
+Shared route/card/chart timing and easing are defined in `dashboard/src/animations/motion.ts`. The View Transitions API theme reveal is implemented in `dashboard/src/animations/theme-transition.ts`; its immediate fallback is used for reduced-motion and performance settings. React Flow node positions remain owned by the graph editor.
+
 The application should expose at minimum:
 
 ```json
diff --git a/docs/DASHBOARD_PERFORMANCE.md b/docs/DASHBOARD_PERFORMANCE.md
index a2ac1b8..4051842 100644
--- a/docs/DASHBOARD_PERFORMANCE.md
+++ b/docs/DASHBOARD_PERFORMANCE.md
@@ -3,6 +3,7 @@
 ## Rendering boundaries
 
 - React Router lazy-loads each page so the initial shell does not include monitoring charts, the AI graph, automation canvas, or 3D dependencies.
+- Home loads its Recharts chunk when the utilization chart approaches the viewport; the reserved chart height prevents layout shift. Monitoring still loads its chart when that route is opened.
 - Mission Control loads the Three.js globe only after the operator selects the 3D globe mode. Network and orbit modes use SVG.
 - Agents and Automation use route-loaded React Flow canvases with local graph/workflow persistence. They never invoke external services. Current seeded graphs are small enough that graph virtualization is not needed.
 - Font files are bundled with the dashboard. The app makes no external font request.
@@ -14,7 +15,7 @@
 - Lenis provides document scrolling while full motion is enabled. It is not active in performance mode or when the operating system requests reduced motion.
 - Three.js is limited to the optional Mission Control globe. No animation library animates telemetry values.
 
-The decorative GSAP and Three.js loops stop when the browser tab is hidden. The controls still work without automatic motion. OS reduced-motion and the saved motion preference disable decorative animation. Performance mode avoids Lenis, reduces WebGL pixel ratio, and removes costly blur/glow treatments.
+The decorative GSAP and Three.js loops stop when the browser tab is hidden. Reduced-motion state is read once per scene and updated on media-query changes rather than queried inside each animation frame. The controls still work without automatic motion. OS reduced-motion and the saved motion preference disable decorative animation. Performance mode avoids Lenis, reduces WebGL pixel ratio, and removes costly blur/glow treatments.
 
 ## Performance expectations
 
diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index f9e61fd..dc1074a 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -4,6 +4,20 @@ This is a lightweight decision log. Proposals below are not implementation commi
 
 ## Proposed starting decisions
 
+### D-010 — Reuse dashboard motion stack for premium transitions
+
+- **Status:** Accepted, 2026-10-25.
+- **Decision:** Keep Framer Motion for route/component transitions, Recharts for analytics, and the existing reduced-motion/performance preferences. Centralize shared timing/easing in `dashboard/src/animations/motion.ts`; use the View Transitions API for a 520ms circular theme reveal with an immediate fallback.
+- **Reason:** Apply the supplied dashboard motion references while preserving local state, canvas editors, routing, and accessibility.
+- **Limits:** The View Transitions API is browser-dependent; fallback changes theme instantly. WebGL/canvas performance was not profiled on physical hardware.
+
+### D-009 — Wise-inspired dashboard visual system
+
+- **Status:** Accepted, 2026-10-23.
+- **Decision:** Adapt the supplied Wise design reference into a light sage canvas, white rounded cards, warm near-black type, lime-green primary actions, and a matching dark theme. Use bundled Inter Variable rather than the proprietary Wise Sans font. Preserve OpenCluster's navigation, data hierarchy, status semantics, and local-only scope.
+- **Reason:** Apply the requested visual direction without borrowing Wise product copy or making the infrastructure dashboard resemble a money-transfer flow.
+- **Limits:** This is an inspired visual adaptation, not a Wise brand asset or affiliation. Contrast and browser visual review remain to be completed.
+
 ### D-007 — Permanent dashboard with browser-local provider
 
 - **Status:** Accepted, 2026-10-22; supersedes the prototype wording in D-005.
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
index 0386b4d..6bce41a 100644
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -4,13 +4,15 @@
 
 ## Direction
 
-OpenCluster should read as a professional infrastructure command center: dark-first, restrained, information-dense, and calm under operational pressure. Favor clear hierarchy and consistent alignment over decorative effects. Support beginner homelab users with plain labels and useful empty states while retaining fast scanning and filters for experienced administrators.
+OpenCluster uses a Wise-inspired visual language adapted for infrastructure operations: pale sage page canvas, white rounded cards, warm near-black text, and lime-green primary actions. Keep status semantics and data density clear; do not imitate Wise's financial product language or imply an affiliation.
 
-The dashboard uses a dark graphite foundation, blue/cyan holographic accents, and subtle glass-like surfaces. Sora is used for display headings and Inter for dense UI text and labels. Font files are bundled locally; page rendering does not depend on a font CDN.
+Use Inter Variable for interface and display text; Wise Sans is proprietary and is not bundled. Use heavy display headings for page and Home titles, neutral Inter for operational data, 24px card/button radii, 12px form controls, and generous whitespace. Font files are bundled locally; page rendering does not depend on a font CDN.
+
+Light theme is the default for new local workspaces and uses `#e8ebe6` canvas, white surfaces, `#0e0f0c` ink, and `#9fe870` primary actions. Existing saved theme preferences remain respected. Dark theme keeps the same lime accent over near-black canvas and softened dark surfaces. Semantic health colors remain distinct from the brand accent.
 
 ## Layout and navigation
 
-Use a persistent primary navigation for Home, Mission Control, Clusters, Nodes, Agents, Automation, AI Software, Tasks, Monitoring, Activity, and Settings. Keep global cluster context and demo status visible. Desktop layouts prioritize multi-column comparison and information density; tablet collapses secondary navigation; mobile prioritizes status, search, and focused detail views.
+Use the existing persistent sidebar, top bar, and primary navigation for Home, Mission Control, Clusters, Nodes, Agents, Automation, AI Software, Tasks, Monitoring, Activity, and Settings. Keep global cluster context and demo status visible. Desktop layouts prioritize multi-column comparison and information density; tablet collapses secondary navigation; mobile prioritizes status, search, and focused detail views.
 
 ## Component categories
 
@@ -20,7 +22,11 @@ Use a persistent primary navigation for Home, Mission Control, Clusters, Nodes,
 - **Actions:** labeled buttons, forms, confirmation dialogs, permission explanations.
 - **Feedback:** skeleton/loading, empty, stale, partial-data, error, and success states.
 
-Prefer reusable accessible TSX components and utility classes. Use shadcn/ui and Lucide React where they fit; React Bits only when motion or visual treatment improves comprehension. Minimize handwritten CSS and avoid adding motion that distracts from changing operational state.
+Prefer reusable accessible TSX components and utility classes. Use the existing Lucide React and animation packages. React Bits-inspired components are used only where they fit a real dashboard touchpoint; decorative GPU scenes are lazy-loaded, particle counts are bounded, and reduced-motion/performance settings are honored. Avoid motion that distracts from changing operational state.
+
+The **Component Lab** route exposes the supplied component set for hands-on use and review. Its prompt composer saves a local note and its context meter reports a rough local token estimate; it does not contact an AI service. Profile choices update the local display name, notifications use the existing browser preference, and the timezone/date tools report only local comparisons. Crystal and laser scenes remain decorative sample visuals.
+
+Motion follows the same restrained sequence across pages: route container, headings and panels, then data visualization. Shared durations and easing live in `dashboard/src/animations/motion.ts`; charts animate only on first display and meaningful selection changes. The theme reveal starts at the selected control and falls back to an immediate update when reduced motion, performance mode, or browser support requires it.
 
 ## Data visualization and status
 
@@ -32,4 +38,4 @@ Target keyboard access, visible focus, semantic headings and controls, screen-re
 
 ## Visual tokens to define during implementation
 
-Choose a restrained neutral dark palette with a small semantic accent set, consistent spacing and radii, readable tabular numerals for metrics, and a clear type scale. Exact color values, typefaces, and contrast ratios must be selected and checked in the implemented theme; this document does not claim they have been tested.
+Use the palette, type, spacing, and radius tokens documented above and in `dashboard/src/styles.css`. Keep readable tabular numerals for metrics. Visual review and contrast measurement have not yet been completed for the Wise-inspired reskin.