@tangle-network/sandbox-ui 0.3.3 → 0.3.5

package/dist/chunk-HY5IBRCE.js

@@ -0,0 +1,1171 @@
+import {
+  Logo
+} from "./chunk-OKCIKTXQ.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-MCGKDCOR.js";
+import {
+  Skeleton
+} from "./chunk-FRGMMANX.js";
+import {
+  Badge
+} from "./chunk-MXCSSOGH.js";
+import {
+  Button
+} from "./chunk-HWLX5NME.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/dashboard/app-sidebar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MaterialIcon({ name, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("material-symbols-outlined", className),
+      style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" },
+      children: name
+    }
+  );
+}
+function DefaultLink({
+  href,
+  to,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("a", { href: href ?? to, className, ...rest, children });
+}
+function AppSidebar({
+  navItems,
+  activeNavId,
+  sandboxes = [],
+  activeSandboxId,
+  onSandboxChange,
+  onNewAgent,
+  className,
+  LinkComponent = DefaultLink
+}) {
+  const Link = LinkComponent;
+  const activeSandbox = sandboxes.find((s) => s.id === activeSandboxId) ?? sandboxes[0];
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "h-screen w-64 fixed left-0 top-0 flex flex-col py-6 bg-slate-800/40 z-40 pt-20",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-6 mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-xl bg-surface-container-low", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-primary-container flex items-center justify-center", children: /* @__PURE__ */ jsx(MaterialIcon, { name: "terminal", className: "text-on-primary-container text-sm" }) }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0", children: activeSandbox ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-white font-bold tracking-tight truncate", children: activeSandbox.name }),
+            activeSandbox.label && /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] text-slate-500 truncate", children: activeSandbox.label })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-slate-500", children: "No sandbox selected" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx("nav", { className: "flex-1 px-4 space-y-1", children: navItems.map((item) => {
+          const isActive = activeNavId === item.id;
+          return /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: item.href,
+              to: item.href,
+              className: cn(
+                "flex items-center gap-3 px-4 py-3 rounded-lg font-mono text-xs transition-colors",
+                isActive ? "bg-violet-500/10 text-violet-300 border-r-4 border-violet-500" : "text-slate-500 hover:bg-slate-800 hover:text-slate-300"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(MaterialIcon, { name: item.icon, className: "text-lg" }),
+                /* @__PURE__ */ jsx("span", { children: item.label }),
+                item.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto px-2 py-0.5 rounded-full bg-primary-container text-on-primary text-[9px] font-bold", children: item.badge })
+              ]
+            },
+            item.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 mt-auto space-y-1 border-t border-outline-variant/10", children: [
+          onNewAgent && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onNewAgent,
+              className: "w-full flex items-center justify-center gap-2 bg-gradient-to-r from-md3-primary to-primary-container text-on-primary font-bold py-2.5 rounded-lg mb-4 text-xs active:scale-95 duration-200 transition-transform",
+              children: [
+                /* @__PURE__ */ jsx(MaterialIcon, { name: "add", className: "text-sm" }),
+                "New Agent"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: "/docs",
+              to: "/docs",
+              className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
+              children: [
+                /* @__PURE__ */ jsx(MaterialIcon, { name: "menu_book", className: "text-sm" }),
+                "Documentation"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: "/support",
+              to: "/support",
+              className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
+              children: [
+                /* @__PURE__ */ jsx(MaterialIcon, { name: "contact_support", className: "text-sm" }),
+                "Support"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard/cluster-status-bar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MaterialIcon2({ name, className }) {
+  return /* @__PURE__ */ jsx2("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+}
+function ClusterStatusBar({ items, latency, className }) {
+  return /* @__PURE__ */ jsxs2(
+    "footer",
+    {
+      className: cn(
+        "fixed bottom-0 left-0 lg:left-64 right-0 h-10 bg-surface-container-highest/80 backdrop-blur-md border-t border-outline-variant/5 flex items-center justify-between px-6 z-30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-6 overflow-x-auto whitespace-nowrap", children: items.map((item, i) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(MaterialIcon2, { name: item.icon, className: "text-[14px] text-md3-primary" }),
+          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-on-surface-variant", children: [
+            item.label,
+            ": ",
+            /* @__PURE__ */ jsx2("span", { className: cn("text-white", item.valueClass), children: item.value })
+          ] })
+        ] }, i)) }),
+        latency && /* @__PURE__ */ jsxs2("div", { className: "hidden sm:flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "text-[10px] font-mono text-on-surface-variant", children: [
+            "System Latency: ",
+            /* @__PURE__ */ jsx2("span", { className: "text-white", children: latency })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex gap-0.5 h-3 items-end", children: [
+            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-1 bg-md3-primary" }),
+            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-2 bg-md3-primary" }),
+            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-1.5 bg-md3-primary" }),
+            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-3 bg-md3-primary" }),
+            /* @__PURE__ */ jsx2("div", { className: "w-0.5 h-2.5 bg-md3-primary" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard/dashboard-layout.tsx
+import * as React from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var variantStyles = {
+  sandbox: {
+    activeNav: "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
+    userGradient: "bg-[image:var(--accent-gradient-strong)]"
+  }
+};
+function DefaultLink2({
+  href,
+  to,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx3("a", { href: href ?? to, className, ...rest, children });
+}
+function UserIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx3("title", { children: "User icon" }),
+    /* @__PURE__ */ jsx3("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "7", r: "4" })
+  ] });
+}
+function SettingsIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx3("title", { children: "Settings icon" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function LogOutIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx3("title", { children: "Log out icon" }),
+    /* @__PURE__ */ jsx3("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx3("polyline", { points: "16,17 21,12 16,7" }),
+    /* @__PURE__ */ jsx3("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+  ] });
+}
+function MaterialIcon3({ name, className }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: cn("material-symbols-outlined", className),
+      style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" },
+      children: name
+    }
+  );
+}
+function MenuIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx3("title", { children: "Menu icon" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+  ] });
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+    /* @__PURE__ */ jsx3("title", { children: "Close icon" }),
+    /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx3("path", { d: "m6 6 12 12" })
+  ] });
+}
+function DashboardLayout({
+  children,
+  variant = "sandbox",
+  navItems,
+  activeNavId,
+  user,
+  isLoading = false,
+  onLogout,
+  onSettingsClick,
+  settingsHref = "/dashboard/settings",
+  onNewSandbox,
+  className,
+  sidebarClassName,
+  contentClassName,
+  topNavLinks,
+  activeTopNavHref,
+  sandboxName,
+  sandboxLabel,
+  LinkComponent = DefaultLink2,
+  footer
+}) {
+  const styles = variantStyles[variant];
+  const Link = LinkComponent;
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+  const handleNavClick = () => {
+    setMobileMenuOpen(false);
+  };
+  const SidebarContent = () => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "px-6 mb-8", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 p-3 rounded-xl bg-surface-container-low", children: [
+      /* @__PURE__ */ jsx3("div", { className: "w-10 h-10 rounded-lg bg-primary-container flex items-center justify-center", children: /* @__PURE__ */ jsx3(MaterialIcon3, { name: "terminal", className: "text-on-primary-container text-sm" }) }),
+      /* @__PURE__ */ jsx3("div", { className: "min-w-0", children: sandboxName ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3("div", { className: "font-mono text-xs text-white font-bold tracking-tight truncate", children: sandboxName }),
+        sandboxLabel && /* @__PURE__ */ jsx3("div", { className: "font-mono text-[10px] text-slate-500 truncate", children: sandboxLabel })
+      ] }) : /* @__PURE__ */ jsx3("div", { className: "font-mono text-xs text-slate-500", children: "No sandbox selected" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx3("nav", { className: "flex-1 px-4 space-y-1", "aria-label": "Main navigation", children: navItems.map((item) => {
+      const isActive = activeNavId === item.id;
+      return /* @__PURE__ */ jsxs3(
+        Link,
+        {
+          href: item.href,
+          to: item.href,
+          onClick: handleNavClick,
+          "aria-current": isActive ? "page" : void 0,
+          className: cn(
+            "flex items-center gap-3 px-4 py-3 rounded-lg font-mono text-xs transition-colors",
+            isActive ? "bg-violet-500/10 text-violet-300 border-r-4 border-violet-500" : "text-slate-500 hover:bg-slate-800 hover:text-slate-300"
+          ),
+          children: [
+            item.materialIcon ? /* @__PURE__ */ jsx3(MaterialIcon3, { name: item.materialIcon, className: "text-lg" }) : /* @__PURE__ */ jsx3(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx3("span", { children: item.label })
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "px-4 py-4 mt-auto space-y-1 border-t border-outline-variant/10", children: [
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          onClick: onNewSandbox,
+          className: "w-full flex items-center justify-center gap-2 bg-gradient-to-r from-md3-primary to-primary-container text-on-primary font-bold py-2.5 rounded-lg mb-4 text-xs active:scale-95 duration-200 transition-transform",
+          children: [
+            /* @__PURE__ */ jsx3(MaterialIcon3, { name: "add", className: "text-sm" }),
+            "New Agent"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        Link,
+        {
+          href: "/docs",
+          to: "/docs",
+          className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
+          children: [
+            /* @__PURE__ */ jsx3(MaterialIcon3, { name: "menu_book", className: "text-sm" }),
+            "Documentation"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        Link,
+        {
+          href: "/support",
+          to: "/support",
+          className: "flex items-center gap-3 px-4 py-2 rounded-lg text-slate-500 hover:bg-slate-800 hover:text-slate-300 transition-colors font-mono text-xs",
+          children: [
+            /* @__PURE__ */ jsx3(MaterialIcon3, { name: "contact_support", className: "text-sm" }),
+            "Support"
+          ]
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs3("div", { className: cn("min-h-screen bg-surface text-on-surface", className), children: [
+    /* @__PURE__ */ jsxs3("nav", { className: "fixed top-0 w-full z-50 bg-slate-950/60 backdrop-blur-xl flex justify-between items-center px-8 h-16 font-sans text-sm tracking-tight", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-8", children: [
+        /* @__PURE__ */ jsx3(Logo, { variant, size: "md", className: "hidden md:block" }),
+        topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx3("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx3(
+          Link,
+          {
+            href: link.href,
+            to: link.href,
+            className: cn(
+              "transition-all duration-300 px-2 py-1 rounded",
+              activeTopNavHref === link.href ? "text-white border-b-2 border-violet-500 pb-1" : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
+            ),
+            children: link.label
+          },
+          link.href
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-4", children: [
+        onNewSandbox && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            onClick: onNewSandbox,
+            className: "hidden md:flex items-center gap-2 bg-md3-primary text-on-primary px-4 py-2 rounded-lg font-bold hover:shadow-[0_0_15px_rgba(209,188,255,0.4)] transition-all active:scale-95 text-xs",
+            children: [
+              /* @__PURE__ */ jsx3(MaterialIcon3, { name: "add", className: "text-sm" }),
+              "New Sandbox"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { type: "button", className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx3(MaterialIcon3, { name: "notifications" }) }),
+        onSettingsClick ? /* @__PURE__ */ jsx3("button", { type: "button", onClick: onSettingsClick, className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx3(MaterialIcon3, { name: "settings" }) }) : /* @__PURE__ */ jsx3(Link, { href: settingsHref, to: settingsHref, className: "text-slate-400 hover:text-violet-400 transition-colors p-2 rounded-lg hover:bg-white/5", children: /* @__PURE__ */ jsx3(MaterialIcon3, { name: "settings" }) }),
+        /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20 overflow-hidden", "aria-label": "User menu", children: user?.avatarUrl ? /* @__PURE__ */ jsx3("img", { src: user.avatarUrl, alt: "", className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx3(UserIcon, { className: "h-4 w-4 text-on-surface-variant" }) }) }),
+          /* @__PURE__ */ jsxs3(DropdownMenuContent, { align: "end", className: "w-56", children: [
+            /* @__PURE__ */ jsx3(DropdownMenuLabel, { children: isLoading ? /* @__PURE__ */ jsx3(Skeleton, { className: "h-4 w-24" }) : /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx3("p", { className: "truncate text-sm", children: user?.email ?? "Not logged in" }),
+              /* @__PURE__ */ jsxs3("p", { className: "text-muted-foreground text-xs capitalize", children: [
+                user?.tier ?? "Free",
+                " Plan"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+            onSettingsClick ? /* @__PURE__ */ jsxs3(DropdownMenuItem, { onClick: onSettingsClick, children: [
+              /* @__PURE__ */ jsx3(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+              "Settings"
+            ] }) : /* @__PURE__ */ jsx3(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs3(Link, { href: settingsHref, to: settingsHref, className: "flex items-center", children: [
+              /* @__PURE__ */ jsx3(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+              "Settings"
+            ] }) }),
+            onLogout && /* @__PURE__ */ jsxs3(DropdownMenuItem, { className: "text-red-400", onClick: onLogout, children: [
+              /* @__PURE__ */ jsx3(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+              "Sign Out"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+          className: "rounded-md p-2 hover:bg-white/5 md:hidden",
+          "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+          "aria-expanded": mobileMenuOpen,
+          children: mobileMenuOpen ? /* @__PURE__ */ jsx3(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx3(MenuIcon, { className: "h-6 w-6" })
+        }
+      )
+    ] }),
+    mobileMenuOpen && /* @__PURE__ */ jsx3("div", { className: "fixed inset-0 z-30 bg-black/50 md:hidden", onClick: () => setMobileMenuOpen(false), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3(
+      "aside",
+      {
+        className: cn(
+          "fixed top-16 bottom-0 left-0 z-30 flex w-64 flex-col bg-slate-900/95 backdrop-blur-xl transition-transform duration-200 lg:hidden",
+          sidebarClassName,
+          mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
+        ),
+        children: /* @__PURE__ */ jsx3(SidebarContent, {})
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "aside",
+      {
+        className: cn(
+          "hidden lg:flex h-screen w-64 fixed left-0 top-0 flex-col py-6 bg-slate-800/40 z-40 pt-20",
+          sidebarClassName
+        ),
+        children: /* @__PURE__ */ jsx3(SidebarContent, {})
+      }
+    ),
+    /* @__PURE__ */ jsx3("main", { className: cn("lg:ml-64 pt-24 px-8 pb-12 min-h-screen", contentClassName), children }),
+    footer
+  ] });
+}
+
+// src/dashboard/resource-meter.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function getColorByUsage(percent) {
+  if (percent >= 90) return "from-red-500 to-red-300";
+  if (percent >= 70) return "from-yellow-500 to-yellow-300";
+  if (percent >= 40) return "from-blue-500 to-blue-300";
+  return "from-green-500 to-green-300";
+}
+function MaterialIcon4({ name, className }) {
+  return /* @__PURE__ */ jsx4("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+}
+function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
+  const percent = max > 0 ? Math.min(value / max * 100, 100) : 0;
+  const gradient = getColorByUsage(percent);
+  return /* @__PURE__ */ jsxs4("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex justify-between text-[11px] font-bold font-mono text-on-surface uppercase tracking-tight", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1", children: [
+        icon && /* @__PURE__ */ jsx4(MaterialIcon4, { name: icon, className: "text-xs" }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx4("span", { className: "text-primary-fixed-dim", children: unit ? `${value}${unit} / ${max}${unit}` : `${Math.round(percent)}%` })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: cn("h-full bg-gradient-to-r rounded-full transition-all duration-500", gradient),
+        style: { width: `${percent}%` }
+      }
+    ) })
+  ] });
+}
+
+// src/dashboard/sandbox-card.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function MaterialIcon5({ name, className }) {
+  return /* @__PURE__ */ jsx5("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+}
+var statusConfig = {
+  running: { color: "text-green-400", bgColor: "bg-green-500/10", borderColor: "border-green-500/20", dotClass: "bg-green-400 animate-pulse", label: "Running" },
+  hibernating: { color: "text-blue-400", bgColor: "bg-blue-500/10", borderColor: "border-blue-500/20", dotClass: "bg-slate-500", label: "Hibernating" },
+  provisioning: { color: "text-orange-400", bgColor: "bg-orange-500/10", borderColor: "border-orange-500/20", dotClass: "bg-orange-500 animate-ping", label: "Provisioning" },
+  stopped: { color: "text-slate-400", bgColor: "bg-slate-500/10", borderColor: "border-slate-500/20", dotClass: "bg-slate-500", label: "Stopped" },
+  failed: { color: "text-red-400", bgColor: "bg-red-500/10", borderColor: "border-red-500/20", dotClass: "bg-red-500", label: "Failed" },
+  archived: { color: "text-slate-400", bgColor: "bg-slate-500/10", borderColor: "border-slate-500/20", dotClass: "bg-slate-600", label: "Archived" }
+};
+var glowMap = {
+  node: "shadow-[0_0_20px_-5px_rgba(34,197,94,0.15)] border border-green-500/20",
+  python: "shadow-[0_0_20px_-5px_rgba(59,130,246,0.15)] border border-blue-500/20",
+  ubuntu: "shadow-[0_0_20px_-5px_rgba(234,88,12,0.15)] border border-orange-500/20"
+};
+function getGlow(image) {
+  if (!image) return "";
+  const lower = image.toLowerCase();
+  for (const [key, cls] of Object.entries(glowMap)) {
+    if (lower.includes(key)) return cls;
+  }
+  return "";
+}
+function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }) {
+  const status = statusConfig[sandbox.status] ?? statusConfig.stopped;
+  const glow = getGlow(sandbox.image);
+  const isActive = sandbox.status === "running";
+  const isHibernating = sandbox.status === "hibernating";
+  const isProvisioning = sandbox.status === "provisioning";
+  const isArchived = sandbox.status === "archived";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "bg-surface-container-low rounded-xl p-6 relative overflow-hidden group hover:bg-surface-container transition-all duration-300",
+        glow,
+        isArchived && "opacity-60 hover:opacity-100 bg-surface-container-lowest",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "absolute top-0 right-0 p-4", children: /* @__PURE__ */ jsxs5("span", { className: cn("flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase border", status.bgColor, status.color, status.borderColor), children: [
+          /* @__PURE__ */ jsx5("span", { className: cn("w-2 h-2 rounded-full", status.dotClass) }),
+          status.label
+        ] }) }),
+        /* @__PURE__ */ jsx5("div", { className: "mb-6", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 mb-2", children: [
+          sandbox.imageIcon && /* @__PURE__ */ jsx5("div", { className: "w-10 h-10 rounded-lg flex items-center justify-center bg-surface-container-high", children: sandbox.imageIcon }),
+          /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx5("h3", { className: "text-xl font-bold text-white group-hover:text-md3-primary transition-colors truncate", children: sandbox.name }),
+            sandbox.nodeId && /* @__PURE__ */ jsx5("p", { className: "text-on-surface-variant font-mono text-xs truncate", children: sandbox.nodeId })
+          ] })
+        ] }) }),
+        isProvisioning ? /* @__PURE__ */ jsxs5("div", { className: "mb-8 mt-10", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold font-mono text-orange-400 mb-3 uppercase text-center animate-pulse tracking-widest", children: sandbox.provisioningMessage ?? "Initializing..." }),
+          /* @__PURE__ */ jsx5("div", { className: "h-2 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "h-full bg-gradient-to-r from-orange-600 via-orange-400 to-orange-300 transition-all duration-500",
+              style: { width: `${sandbox.provisioningPercent ?? 50}%` }
+            }
+          ) })
+        ] }) : !isArchived ? /* @__PURE__ */ jsxs5("div", { className: cn("space-y-5 mb-8", !isActive && "opacity-40"), children: [
+          /* @__PURE__ */ jsx5(ResourceMeter, { label: "CPU Usage", icon: "memory", value: sandbox.cpuPercent ?? 0 }),
+          /* @__PURE__ */ jsx5(
+            ResourceMeter,
+            {
+              label: "RAM Usage",
+              icon: "database",
+              value: sandbox.ramUsed ?? 0,
+              max: sandbox.ramTotal ?? 1,
+              unit: "GB"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx5("div", { className: "mb-6", children: sandbox.archivedAt && /* @__PURE__ */ jsx5("p", { className: "text-slate-500 font-mono text-[10px]", children: sandbox.archivedAt }) }),
+        isActive && /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenIDE?.(sandbox.id),
+              className: "flex items-center justify-center gap-2 py-2.5 bg-surface-container-high hover:bg-md3-primary hover:text-on-primary rounded-lg transition-all duration-300 text-xs font-bold shadow-sm",
+              children: [
+                /* @__PURE__ */ jsx5(MaterialIcon5, { name: "open_in_new", className: "text-sm" }),
+                "Open IDE"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenTerminal?.(sandbox.id),
+              className: "flex items-center justify-center gap-2 py-2.5 bg-surface-container-high hover:bg-slate-700 rounded-lg transition-all text-xs font-bold border border-outline-variant/10",
+              children: [
+                /* @__PURE__ */ jsx5(MaterialIcon5, { name: "terminal", className: "text-sm" }),
+                "Terminal"
+              ]
+            }
+          )
+        ] }),
+        isHibernating && /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            onClick: () => onWake?.(sandbox.id),
+            className: "w-full flex items-center justify-center gap-2 py-3 bg-md3-primary/10 text-md3-primary hover:bg-md3-primary hover:text-on-primary rounded-lg transition-all duration-300 text-xs font-black",
+            children: [
+              /* @__PURE__ */ jsx5(MaterialIcon5, { name: "power_settings_new", className: "text-sm" }),
+              "Wake Sandbox"
+            ]
+          }
+        ),
+        isProvisioning && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            disabled: true,
+            className: "w-full flex items-center justify-center gap-2 py-3 bg-surface-container-high text-on-surface-variant cursor-not-allowed rounded-lg text-xs font-bold border border-outline-variant/10",
+            children: "Please Wait..."
+          }
+        ),
+        isArchived && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => onRestore?.(sandbox.id),
+            className: "w-full py-2 bg-slate-800/50 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg transition-all text-xs font-bold border border-slate-700/50",
+            children: "Restore Sandbox"
+          }
+        )
+      ]
+    }
+  );
+}
+function NewSandboxCard({ onClick, className }) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "border-2 border-dashed border-outline-variant/20 rounded-xl p-6 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-md3-primary/40 hover:bg-md3-primary/5 transition-all duration-300 w-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "w-14 h-14 rounded-full bg-surface-container flex items-center justify-center mb-4 group-hover:bg-md3-primary/20 group-hover:text-md3-primary transition-all group-active:scale-90", children: /* @__PURE__ */ jsx5(MaterialIcon5, { name: "add_box", className: "text-3xl" }) }),
+        /* @__PURE__ */ jsx5("h4", { className: "font-bold text-slate-400 group-hover:text-white mb-1", children: "New Environment" }),
+        /* @__PURE__ */ jsx5("p", { className: "text-xs text-slate-600", children: "Instantiate a fresh compute node" })
+      ]
+    }
+  );
+}
+
+// src/dashboard/sandbox-table.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function MaterialIcon6({ name, className }) {
+  return /* @__PURE__ */ jsx6("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+}
+var statusColors = {
+  running: { dot: "bg-green-400 animate-pulse", text: "text-green-400", bar: "bg-green-400" },
+  hibernating: { dot: "bg-slate-500", text: "text-on-surface-variant", bar: "bg-slate-500" },
+  provisioning: { dot: "bg-secondary-fixed animate-pulse", text: "text-secondary-fixed", bar: "bg-secondary-fixed" },
+  stopped: { dot: "bg-slate-500", text: "text-slate-400", bar: "bg-slate-500" },
+  failed: { dot: "bg-red-500", text: "text-red-400", bar: "bg-red-500" },
+  archived: { dot: "bg-slate-600", text: "text-slate-500", bar: "bg-slate-600" }
+};
+function MiniMeter({ label, percent, className }) {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex justify-between text-[10px] font-mono text-on-surface-variant", children: [
+      /* @__PURE__ */ jsx6("span", { className: "font-bold", children: label }),
+      /* @__PURE__ */ jsxs6("span", { className: "text-primary-fixed", children: [
+        percent,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden", children: /* @__PURE__ */ jsx6("div", { className: "h-full bg-md3-primary rounded-full", style: { width: `${percent}%` } }) })
+  ] });
+}
+function SandboxTable({
+  sandboxes,
+  page = 1,
+  pageSize = 10,
+  total,
+  onPageChange,
+  onOpenIDE,
+  onOpenTerminal,
+  onSSH,
+  onWake,
+  onMore,
+  className
+}) {
+  const totalCount = total ?? sandboxes.length;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  return /* @__PURE__ */ jsxs6("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx6("div", { className: "w-full bg-surface-container-low rounded-2xl overflow-hidden shadow-2xl border border-outline-variant/10", children: /* @__PURE__ */ jsx6("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs6("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { className: "bg-surface-container-high/50 border-b border-outline-variant/10", children: [
+        /* @__PURE__ */ jsx6("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsx6("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Sandbox Name" }),
+        /* @__PURE__ */ jsx6("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Environment" }),
+        /* @__PURE__ */ jsx6("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider", children: "Resources" }),
+        /* @__PURE__ */ jsx6("th", { className: "px-6 py-4 text-xs font-semibold text-on-surface-variant uppercase tracking-wider text-right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx6("tbody", { className: "divide-y divide-outline-variant/5", children: sandboxes.map((sb) => {
+        const sc = statusColors[sb.status] ?? statusColors.stopped;
+        const isActive = sb.status === "running";
+        const isHibernating = sb.status === "hibernating";
+        const isProvisioning = sb.status === "provisioning";
+        return /* @__PURE__ */ jsxs6("tr", { className: "hover:bg-surface-container-highest/20 transition-colors group relative", children: [
+          /* @__PURE__ */ jsx6("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
+            /* @__PURE__ */ jsx6("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
+          ] }) }),
+          /* @__PURE__ */ jsx6("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx6("span", { className: "text-sm font-bold text-white group-hover:text-md3-primary transition-colors", children: sb.name }),
+            sb.nodeId && /* @__PURE__ */ jsx6("span", { className: "text-[10px] font-mono text-on-surface-variant", children: sb.nodeId })
+          ] }) }),
+          /* @__PURE__ */ jsx6("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+            sb.imageIcon && /* @__PURE__ */ jsx6("div", { className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center", children: sb.imageIcon }),
+            sb.image && /* @__PURE__ */ jsx6("span", { className: "text-xs font-bold text-white", children: sb.image })
+          ] }) }),
+          /* @__PURE__ */ jsx6("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48", children: [
+            /* @__PURE__ */ jsx6(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
+            /* @__PURE__ */ jsx6(MiniMeter, { label: "RAM", percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0 })
+          ] }) : isProvisioning ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-md3-primary/80 italic text-[10px] font-bold", children: [
+            /* @__PURE__ */ jsx6(MaterialIcon6, { name: "refresh", className: "text-[14px] animate-spin" }),
+            sb.provisioningMessage ?? "Allocating nodes..."
+          ] }) : isHibernating ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48 opacity-30", children: [
+            /* @__PURE__ */ jsx6(MiniMeter, { label: "CPU", percent: 0 }),
+            /* @__PURE__ */ jsx6(MiniMeter, { label: "RAM", percent: 0 })
+          ] }) : null }),
+          /* @__PURE__ */ jsx6("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-1", children: [
+            isActive && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+              /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx6(MaterialIcon6, { name: "terminal", className: "text-[20px]" }) }),
+              /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx6(MaterialIcon6, { name: "tab", className: "text-[20px]" }) }),
+              /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx6(MaterialIcon6, { name: "vpn_key", className: "text-[20px]" }) })
+            ] }),
+            isHibernating && /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-md3-primary/30 text-md3-primary text-[10px] font-bold uppercase tracking-wider hover:bg-md3-primary/10 active:scale-95 transition-all", children: "Wake Up" }),
+            /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onMore?.(sb.id), className: "p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-white transition-all active:scale-90", children: /* @__PURE__ */ jsx6(MaterialIcon6, { name: "more_vert", className: "text-[20px]" }) })
+          ] }) })
+        ] }, sb.id);
+      }) })
+    ] }) }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-on-surface-variant text-xs font-medium gap-4", children: [
+      /* @__PURE__ */ jsxs6("p", { children: [
+        "Showing ",
+        sandboxes.length,
+        " of ",
+        totalCount,
+        " active sandboxes"
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx6(MaterialIcon6, { name: "chevron_left", className: "text-[18px]" }) }),
+        Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange?.(p),
+            className: cn(
+              "px-3 py-1 rounded-lg transition-colors",
+              p === page ? "bg-md3-primary/10 text-md3-primary border border-md3-primary/20" : "hover:bg-surface-container-high"
+            ),
+            children: p
+          },
+          p
+        )),
+        /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-outline-variant/10 hover:bg-surface-container-high transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx6(MaterialIcon6, { name: "chevron_right", className: "text-[18px]" }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/backend-selector.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function BackendSelector({
+  backends,
+  selected,
+  onChange,
+  label = "Models",
+  hint,
+  multiSelect = true,
+  className
+}) {
+  const toggle = (type) => {
+    if (multiSelect) {
+      onChange(
+        selected.includes(type) ? selected.filter((b) => b !== type) : [...selected, type]
+      );
+    } else {
+      onChange([type]);
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className, children: [
+    /* @__PURE__ */ jsxs7("label", { className: "mb-2 block font-medium text-sm", children: [
+      label,
+      multiSelect && /* @__PURE__ */ jsx7("span", { className: "ml-2 font-normal text-muted-foreground", children: "(select multiple to compare)" })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: backends.map((backend) => {
+      const isSelected = selected.includes(backend.type);
+      return /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggle(backend.type),
+          className: `rounded-lg border px-3 py-2 text-sm transition-colors ${isSelected ? "border-blue-500 bg-blue-500/10 text-blue-400" : "border-border bg-background text-muted-foreground hover:border-muted-foreground/50"}`,
+          title: backend.description,
+          children: backend.label
+        },
+        backend.type
+      );
+    }) }),
+    multiSelect && selected.length > 1 && /* @__PURE__ */ jsx7("p", { className: "mt-2 text-muted-foreground text-xs", children: hint || `Will run on ${selected.length} variants in parallel for comparison` })
+  ] });
+}
+
+// src/dashboard/profile-selector.tsx
+import { Check, ChevronDown, Plus, Settings } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ProfileSelector({
+  profiles,
+  selectedId,
+  onSelect,
+  onCreateClick,
+  onManageClick,
+  label = "Profile",
+  placeholder = "Default (no custom profile)",
+  showMetrics = true,
+  className
+}) {
+  const selected = profiles.find((p) => p.id === selectedId);
+  const builtinProfiles = profiles.filter((p) => p.is_builtin);
+  const customProfiles = profiles.filter((p) => !p.is_builtin);
+  return /* @__PURE__ */ jsxs8("div", { className, children: [
+    label && /* @__PURE__ */ jsx8("label", { className: "mb-2 block font-medium text-sm", children: label }),
+    /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(Button, { variant: "outline", className: "w-full justify-between", children: [
+        /* @__PURE__ */ jsx8("span", { className: "truncate", children: selected ? selected.name : placeholder }),
+        /* @__PURE__ */ jsx8(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+      ] }) }),
+      /* @__PURE__ */ jsxs8(DropdownMenuContent, { className: "w-[300px]", align: "start", children: [
+        /* @__PURE__ */ jsxs8(
+          DropdownMenuItem,
+          {
+            onClick: () => onSelect(null),
+            className: "flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsx8("span", { children: placeholder }),
+              !selectedId && /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4 text-green-400" })
+            ]
+          }
+        ),
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx8(DropdownMenuLabel, { children: "Built-in Profiles" }),
+          builtinProfiles.map((profile) => /* @__PURE__ */ jsxs8(
+            DropdownMenuItem,
+            {
+              onClick: () => onSelect(profile),
+              className: "flex flex-col items-start gap-1",
+              children: [
+                /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx8("span", { className: "font-medium", children: profile.name }),
+                    profile.extends && /* @__PURE__ */ jsxs8(Badge, { variant: "secondary", className: "border-0 text-xs", children: [
+                      "extends ",
+                      profile.extends
+                    ] })
+                  ] }),
+                  selectedId === profile.id && /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4 text-green-400" })
+                ] }),
+                profile.description && /* @__PURE__ */ jsx8("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
+              ]
+            },
+            profile.id
+          ))
+        ] }),
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx8(DropdownMenuLabel, { children: "Custom Profiles" }),
+          customProfiles.map((profile) => /* @__PURE__ */ jsxs8(
+            DropdownMenuItem,
+            {
+              onClick: () => onSelect(profile),
+              className: "flex flex-col items-start gap-1",
+              children: [
+                /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx8("span", { className: "font-medium", children: profile.name }),
+                    profile.model && /* @__PURE__ */ jsx8(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
+                  ] }),
+                  selectedId === profile.id && /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4 text-green-400" })
+                ] }),
+                profile.description && /* @__PURE__ */ jsx8("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
+                showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs8("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
+                  /* @__PURE__ */ jsxs8("span", { children: [
+                    profile.metrics.total_runs,
+                    " runs"
+                  ] }),
+                  /* @__PURE__ */ jsxs8("span", { children: [
+                    profile.metrics.success_rate.toFixed(0),
+                    "% success"
+                  ] }),
+                  /* @__PURE__ */ jsxs8("span", { children: [
+                    "~",
+                    (profile.metrics.avg_duration_ms / 1e3).toFixed(1),
+                    "s avg"
+                  ] })
+                ] })
+              ]
+            },
+            profile.id
+          ))
+        ] }),
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+          onCreateClick && /* @__PURE__ */ jsxs8(
+            DropdownMenuItem,
+            {
+              onClick: onCreateClick,
+              className: "text-blue-400",
+              children: [
+                /* @__PURE__ */ jsx8(Plus, { className: "mr-2 h-4 w-4" }),
+                "Create New Profile"
+              ]
+            }
+          ),
+          onManageClick && /* @__PURE__ */ jsxs8(
+            DropdownMenuItem,
+            {
+              onClick: onManageClick,
+              className: "text-muted-foreground",
+              children: [
+                /* @__PURE__ */ jsx8(Settings, { className: "mr-2 h-4 w-4" }),
+                "Manage Profiles"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ProfileComparison({
+  profiles,
+  className
+}) {
+  const profilesWithMetrics = profiles.filter(
+    (p) => p.metrics && p.metrics.total_runs > 0
+  );
+  if (profilesWithMetrics.length === 0) {
+    return null;
+  }
+  const bestSuccess = profilesWithMetrics.reduce(
+    (best, p) => (p.metrics?.success_rate ?? 0) > (best.metrics?.success_rate ?? 0) ? p : best
+  );
+  const fastestProfile = profilesWithMetrics.reduce(
+    (best, p) => (p.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) < (best.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) ? p : best
+  );
+  return /* @__PURE__ */ jsxs8("div", { className: `rounded-lg border border-border p-4 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx8("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
+    /* @__PURE__ */ jsx8("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
+      const isBestSuccess = profile.id === bestSuccess.id;
+      const isFastest = profile.id === fastestProfile.id;
+      return /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          className: "flex items-center justify-between gap-4",
+          children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx8("span", { className: "font-medium", children: profile.name }),
+              isBestSuccess && /* @__PURE__ */ jsx8(Badge, { className: "border-0 bg-green-500/10 text-green-400 text-xs", children: "Best Success" }),
+              isFastest && !isBestSuccess && /* @__PURE__ */ jsx8(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Fastest" })
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxs8("span", { children: [
+                /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: "Success:" }),
+                " ",
+                /* @__PURE__ */ jsxs8(
+                  "span",
+                  {
+                    className: (profile.metrics?.success_rate ?? 0) >= 80 ? "text-green-400" : (profile.metrics?.success_rate ?? 0) >= 50 ? "text-yellow-400" : "text-red-400",
+                    children: [
+                      profile.metrics?.success_rate.toFixed(0),
+                      "%"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs8("span", { children: [
+                /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: "Avg:" }),
+                " ",
+                ((profile.metrics?.avg_duration_ms ?? 0) / 1e3).toFixed(1),
+                "s"
+              ] }),
+              /* @__PURE__ */ jsxs8("span", { className: "text-muted-foreground", children: [
+                profile.metrics?.total_runs,
+                " runs"
+              ] })
+            ] })
+          ]
+        },
+        profile.id
+      );
+    }) })
+  ] });
+}
+
+// src/dashboard/variant-list.tsx
+import {
+  Check as Check2,
+  CheckCircle2,
+  Clock,
+  ExternalLink,
+  Loader2,
+  Timer,
+  X,
+  XCircle
+} from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var statusConfig2 = {
+  pending: {
+    icon: Clock,
+    color: "text-yellow-400",
+    bg: "bg-yellow-500/10",
+    label: "Pending",
+    animate: false
+  },
+  running: {
+    icon: Loader2,
+    color: "text-blue-400",
+    bg: "bg-blue-500/10",
+    label: "Running",
+    animate: true
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: "text-green-400",
+    bg: "bg-green-500/10",
+    label: "Completed",
+    animate: false
+  },
+  failed: {
+    icon: XCircle,
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    label: "Failed",
+    animate: false
+  },
+  cancelled: {
+    icon: XCircle,
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    label: "Cancelled",
+    animate: false
+  }
+};
+var outcomeConfig = {
+  pending_review: {
+    color: "text-amber-400",
+    bg: "bg-amber-500/10",
+    label: "Pending Review"
+  },
+  accepted: {
+    color: "text-green-400",
+    bg: "bg-green-500/10",
+    label: "Accepted"
+  },
+  rejected: {
+    color: "text-red-400",
+    bg: "bg-red-500/10",
+    label: "Rejected"
+  },
+  merged_with_conflicts: {
+    color: "text-orange-400",
+    bg: "bg-orange-500/10",
+    label: "Merged (conflicts)"
+  },
+  expired: {
+    color: "text-gray-400",
+    bg: "bg-gray-500/10",
+    label: "Expired"
+  }
+};
+function VariantList({
+  variants,
+  selectedId,
+  onSelect,
+  onAccept,
+  onReject,
+  isActioning,
+  className
+}) {
+  return /* @__PURE__ */ jsx9("div", { className: `space-y-3 ${className || ""}`, children: variants.map((variant) => {
+    const status = statusConfig2[variant.status];
+    const StatusIcon = status.icon;
+    const isSelected = variant.id === selectedId;
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: `cursor-pointer rounded-lg border p-4 transition-colors ${isSelected ? "border-blue-500 bg-blue-500/5" : "border-border hover:border-muted-foreground/50"}`,
+        onClick: () => onSelect?.(variant.id),
+        children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxs9(Badge, { className: `${status.bg} ${status.color} border-0`, children: [
+                /* @__PURE__ */ jsx9(
+                  StatusIcon,
+                  {
+                    className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
+                  }
+                ),
+                status.label
+              ] }),
+              /* @__PURE__ */ jsx9("span", { className: "font-medium", children: variant.label }),
+              variant.sublabel && /* @__PURE__ */ jsxs9("span", { className: "text-muted-foreground text-sm", children: [
+                "(",
+                variant.sublabel,
+                ")"
+              ] }),
+              variant.durationMs && /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1 text-muted-foreground text-sm", children: [
+                /* @__PURE__ */ jsx9(Timer, { className: "h-3 w-3" }),
+                (variant.durationMs / 1e3).toFixed(2),
+                "s"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+              variant.outcome && /* @__PURE__ */ jsx9(
+                Badge,
+                {
+                  className: `${outcomeConfig[variant.outcome].bg} ${outcomeConfig[variant.outcome].color} border-0`,
+                  children: outcomeConfig[variant.outcome].label
+                }
+              ),
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs9(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "text-green-400 hover:bg-green-500/10",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onAccept(variant.id);
+                    },
+                    disabled: isActioning === variant.id,
+                    children: [
+                      /* @__PURE__ */ jsx9(Check2, { className: "mr-1 h-4 w-4" }),
+                      "Accept"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs9(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "text-red-400 hover:bg-red-500/10",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onReject(variant.id);
+                    },
+                    disabled: isActioning === variant.id,
+                    children: [
+                      /* @__PURE__ */ jsx9(X, { className: "mr-1 h-4 w-4" }),
+                      "Reject"
+                    ]
+                  }
+                )
+              ] }),
+              variant.detailsUrl && /* @__PURE__ */ jsx9(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "text-muted-foreground",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    window.open(variant.detailsUrl, "_blank");
+                  },
+                  children: /* @__PURE__ */ jsx9(ExternalLink, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          variant.error && /* @__PURE__ */ jsx9("p", { className: "mt-2 text-red-400 text-sm", children: variant.error }),
+          variant.summary && /* @__PURE__ */ jsx9("p", { className: "mt-2 line-clamp-2 text-muted-foreground text-sm", children: variant.summary })
+        ]
+      },
+      variant.id
+    );
+  }) });
+}
+
+export {
+  AppSidebar,
+  ClusterStatusBar,
+  DashboardLayout,
+  ResourceMeter,
+  SandboxCard,
+  NewSandboxCard,
+  SandboxTable,
+  BackendSelector,
+  ProfileSelector,
+  ProfileComparison,
+  VariantList
+};