@tangle-network/sandbox-ui 0.14.0 → 0.15.2

package/dist/chunk-HLZTKSGT.js

@@ -0,0 +1,2652 @@
+import {
+  Logo
+} from "./chunk-7ZA5SEK3.js";
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/dashboard/app-sidebar.tsx
+import { Avatar, AvatarFallback, AvatarImage } from "@tangle-network/ui/primitives";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@tangle-network/ui/primitives";
+import { Skeleton } from "@tangle-network/ui/primitives";
+
+// src/dashboard/sidebar-context.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
+var SIDEBAR_MODE_KEY = "sandbox-sidebar-mode";
+var SIDEBAR_RAIL_WIDTH = 64;
+var SIDEBAR_PANEL_WIDTH = 260;
+var SIDEBAR_TOTAL_WIDTH = SIDEBAR_RAIL_WIDTH + SIDEBAR_PANEL_WIDTH;
+var SIDEBAR_MOBILE_WIDTH = 256;
+var SidebarContext = React.createContext(null);
+function readStorage(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  try {
+    return localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+function writeStorage(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function SidebarProvider({
+  defaultPanelOpen = true,
+  defaultMode = "projects",
+  hasPanels = true,
+  children
+}) {
+  const [panelOpen, setPanelOpenState] = React.useState(
+    () => readStorage(PANEL_OPEN_KEY, String(defaultPanelOpen)) === "true"
+  );
+  const [mode, setModeState] = React.useState(
+    () => readStorage(SIDEBAR_MODE_KEY, defaultMode)
+  );
+  const [hidden, setHidden] = React.useState(false);
+  const setPanelOpen = React.useCallback((open) => {
+    setPanelOpenState(open);
+    writeStorage(PANEL_OPEN_KEY, String(open));
+  }, []);
+  const togglePanel = React.useCallback(() => {
+    setPanelOpenState((prev) => {
+      const next = !prev;
+      writeStorage(PANEL_OPEN_KEY, String(next));
+      return next;
+    });
+  }, []);
+  const setMode = React.useCallback((m) => {
+    setModeState(m);
+    writeStorage(SIDEBAR_MODE_KEY, m);
+  }, []);
+  const switchModeStable = React.useCallback((m) => {
+    setModeState((prevMode) => {
+      if (prevMode === m) {
+        setPanelOpenState((prevOpen) => {
+          const next = !prevOpen;
+          writeStorage(PANEL_OPEN_KEY, String(next));
+          return next;
+        });
+        return prevMode;
+      }
+      setPanelOpenState(() => {
+        writeStorage(PANEL_OPEN_KEY, "true");
+        return true;
+      });
+      writeStorage(SIDEBAR_MODE_KEY, m);
+      return m;
+    });
+  }, []);
+  const contentMargin = hidden ? 0 : panelOpen && hasPanels ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH;
+  const value = React.useMemo(
+    () => ({
+      panelOpen,
+      setPanelOpen,
+      togglePanel,
+      mode,
+      setMode,
+      switchMode: switchModeStable,
+      hidden,
+      setHidden,
+      contentMargin,
+      hasPanels
+    }),
+    [panelOpen, setPanelOpen, togglePanel, mode, setMode, switchModeStable, hidden, setHidden, contentMargin, hasPanels]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebar() {
+  const ctx = React.useContext(SidebarContext);
+  if (!ctx) throw new Error("useSidebar must be used within a SidebarProvider");
+  return ctx;
+}
+
+// src/dashboard/app-sidebar.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DefaultLink({
+  href,
+  to,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2("a", { href: href ?? to, className, ...rest, children });
+}
+function getInitials(name, email) {
+  if (name) return name.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  if (email) return email[0].toUpperCase();
+  return "?";
+}
+function SettingsIcon({ className }) {
+  return /* @__PURE__ */ jsxs("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__ */ jsx2("title", { children: "Settings icon" }),
+    /* @__PURE__ */ jsx2("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__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function LogOutIcon({ className }) {
+  return /* @__PURE__ */ jsxs("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__ */ jsx2("title", { children: "Log out icon" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx2("polyline", { points: "16,17 21,12 16,7" }),
+    /* @__PURE__ */ jsx2("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+  ] });
+}
+function Sidebar({ children, className, style }) {
+  const { panelOpen, hidden, hasPanels } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-sidebar": "true",
+      className: cn(
+        "fixed inset-y-0 left-0 z-40 flex bg-card border-r border-border transition-[transform,width] duration-200 ease-in-out",
+        hidden && "-translate-x-full",
+        className
+      ),
+      style: { width: panelOpen && hasPanels ? SIDEBAR_TOTAL_WIDTH : SIDEBAR_RAIL_WIDTH, ...style },
+      children
+    }
+  );
+}
+function SidebarRail({ children, className, wide = false }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full shrink-0 bg-transparent",
+        wide ? "w-full" : "w-16",
+        className
+      ),
+      children
+    }
+  );
+}
+function SidebarRailHeader({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-border", className), children });
+}
+function SidebarRailNav({ children, className }) {
+  return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
+}
+function SidebarRailFooter({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
+}
+function RailSeparator({ className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--md3-outline-variant)]", className) });
+}
+function RailButton({ icon: Icon2, label, isActive, badge, onClick, className, showLabel }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: label,
+      className: cn(
+        "group relative flex items-center justify-center rounded-xl transition-all duration-200",
+        showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+        "active:scale-95",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]",
+        !isActive && "text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5 shrink-0" }),
+        showLabel && /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: label }),
+        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1 shadow-sm", children: badge > 99 ? "99+" : badge })
+      ]
+    }
+  );
+}
+function RailModeButton({ mode, icon, label, badge, className, showLabel }) {
+  const { panelOpen, mode: currentMode, switchMode } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    RailButton,
+    {
+      icon,
+      label,
+      isActive: mode === currentMode && panelOpen,
+      badge,
+      onClick: () => switchMode(mode),
+      className,
+      showLabel
+    }
+  );
+}
+function SidebarPanel({ children, className }) {
+  const { panelOpen } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card",
+        panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col h-full w-[260px]", children })
+    }
+  );
+}
+function SidebarPanelHeader({ children, title, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-foreground", children: title }) });
+}
+function SidebarPanelContent({ children, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
+}
+function SidebarContent({ children, className }) {
+  const { contentMargin } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "main",
+    {
+      className: cn(
+        "min-h-screen transition-[margin-left] duration-200 ease-in-out lg:ml-[var(--sb-content-margin,0px)]",
+        className
+      ),
+      style: { "--sb-content-margin": `${contentMargin}px` },
+      children
+    }
+  );
+}
+function ProfileAvatar({
+  user,
+  isLoading = false,
+  onLogout,
+  onSettingsClick,
+  settingsHref = "/dashboard/settings",
+  children,
+  className,
+  LinkComponent
+}) {
+  const Link = LinkComponent ?? DefaultLink;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center justify-center w-12 h-12 rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+          className
+        ),
+        "aria-label": "User menu",
+        children: isLoading ? /* @__PURE__ */ jsx2(Skeleton, { className: "h-7 w-7 rounded-full" }) : /* @__PURE__ */ jsxs(Avatar, { className: "h-7 w-7", children: [
+          user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
+          /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-[10px] bg-violet-500/20 text-violet-300", children: getInitials(user?.name, user?.email) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "right", align: "end", sideOffset: 8, className: "w-72", children: [
+      /* @__PURE__ */ jsx2(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-12 w-12 shrink-0", children: [
+          user?.avatarUrl && /* @__PURE__ */ jsx2(AvatarImage, { src: user.avatarUrl, alt: "" }),
+          /* @__PURE__ */ jsx2(AvatarFallback, { className: "text-sm bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]", children: getInitials(user?.name, user?.email) })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-24 mb-1" }),
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-32" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold truncate", children: user?.name ?? user?.email ?? "Not logged in" }),
+          user?.email && user?.name && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground truncate", children: user.email }),
+          user?.tier && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground capitalize", children: [
+            user.tier,
+            " Plan"
+          ] })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
+      children,
+      onSettingsClick ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSettingsClick, children: [
+        /* @__PURE__ */ jsx2(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+        "Settings"
+      ] }) : /* @__PURE__ */ jsx2(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: settingsHref, to: settingsHref, className: "flex items-center", children: [
+        /* @__PURE__ */ jsx2(SettingsIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+        "Settings"
+      ] }) }),
+      onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-[var(--surface-danger-text)]", onClick: onLogout, children: [
+          /* @__PURE__ */ jsx2(LogOutIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
+          "Sign Out"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/credit-balance.tsx
+import * as React2 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function CreditBalance({
+  amount,
+  description = "Credits are automatically deducted based on hourly Sandbox usage and Agent operations.",
+  onTopUp,
+  quickAmounts = [10, 25, 100],
+  className
+}) {
+  const [topUpValue, setTopUpValue] = React2.useState("50.00");
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "bg-card p-5 rounded-xl flex flex-col justify-between border border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: "Available Credits" }),
+          /* @__PURE__ */ jsxs2("div", { className: "text-4xl font-extrabold text-primary tracking-tighter mb-2", children: [
+            "$",
+            amount.toFixed(2)
+          ] }),
+          /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description })
+        ] }),
+        onTopUp && /* @__PURE__ */ jsxs2("div", { className: "space-y-2.5 mt-5", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "bg-card border border-border p-1 rounded-lg flex items-center", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "text",
+                value: `$${topUpValue}`,
+                onChange: (e) => {
+                  const raw = e.target.value.replace(/[^0-9.]/g, "");
+                  setTopUpValue(raw.match(/^(\d*\.?\d{0,2})/)?.[1] ?? "");
+                },
+                className: "bg-transparent border-none text-foreground font-mono text-lg w-full focus:ring-0 px-4 outline-none"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  const parsed = Number.parseFloat(topUpValue);
+                  if (!Number.isFinite(parsed) || parsed <= 0) return;
+                  onTopUp(parsed);
+                },
+                className: "bg-[var(--accent-surface-soft)] border border-border text-[var(--accent-text)] px-6 py-3 rounded-md font-bold text-xs uppercase tracking-widest active:scale-95 transition-transform hover:bg-[var(--accent-surface-strong)]",
+                children: "Top Up"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "flex justify-between gap-2", children: quickAmounts.filter((qa) => Number.isFinite(qa) && qa > 0).map((qa) => /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                const rounded = parseFloat(qa.toFixed(2));
+                setTopUpValue(qa.toFixed(2));
+                onTopUp(rounded);
+              },
+              className: "flex-1 py-2 text-[10px] font-mono text-muted-foreground border border-border rounded-md hover:bg-muted/50 hover:text-foreground transition-colors uppercase",
+              children: [
+                "+$",
+                qa
+              ]
+            },
+            qa
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard/cluster-status-bar.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ClusterStatusBar({ items, latency, className }) {
+  if (!items?.length) return null;
+  return /* @__PURE__ */ jsx4("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-max max-w-[90vw] animate-in slide-in-from-bottom flex justify-center", className), children: /* @__PURE__ */ jsxs3("div", { className: "overflow-hidden rounded-full border border-border bg-card px-6 py-3 flex flex-wrap sm:flex-nowrap items-center justify-between gap-8 shadow-sm", children: [
+    /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-6", children: items.map((item, i) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4("span", { className: "text-[var(--md3-primary)] [&_svg]:h-[18px] [&_svg]:w-[18px]", children: item.icon }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-[var(--md3-on-surface-variant)] uppercase tracking-wider font-bold", children: item.label }),
+        /* @__PURE__ */ jsx4("span", { className: cn("text-xs font-bold text-foreground", item.valueClass), children: item.value })
+      ] })
+    ] }, i)) }),
+    latency && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("div", { className: "h-6 w-px bg-border" }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "relative flex h-2.5 w-2.5 items-center justify-center", children: [
+          /* @__PURE__ */ jsx4("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" }),
+          /* @__PURE__ */ jsx4("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-green-500" })
+        ] }),
+        /* @__PURE__ */ jsx4("span", { className: "text-xs font-mono text-green-400 font-bold", children: latency })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/dashboard/resource-meter.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function getBarColor(percent) {
+  if (percent >= 90) return "bg-[var(--code-error)]";
+  if (percent >= 70) return "bg-[var(--surface-warning-text)]";
+  return "bg-primary";
+}
+function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
+  const percent = max > 0 ? Math.min(value / max * 100, 100) : 0;
+  const barColor = getBarColor(percent);
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-center gap-3", className), children: [
+    /* @__PURE__ */ jsxs4("span", { className: "flex shrink-0 items-center gap-1 text-[10px] font-mono text-muted-foreground uppercase tracking-wide", children: [
+      icon,
+      label
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "h-1.5 min-w-0 flex-1 bg-card rounded-full overflow-hidden", children: /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn("h-full rounded-full transition-all duration-500", barColor),
+        style: { width: `${percent}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[10px] font-mono tabular-nums text-muted-foreground", children: unit ? `${value}${unit}/${max}${unit}` : `${Math.round(percent)}%` })
+  ] });
+}
+
+// src/dashboard/sandbox-card.tsx
+import {
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuItem as DropdownMenuItem2,
+  DropdownMenuSeparator as DropdownMenuSeparator2,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "@tangle-network/ui/primitives";
+import {
+  MoreVertical,
+  PowerOff,
+  Power,
+  Copy,
+  Clock,
+  Activity,
+  BarChart2,
+  Trash2,
+  Terminal,
+  Code2,
+  Network,
+  Play,
+  Plus,
+  Users
+} from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function canAdminSandbox(sandbox) {
+  if (!sandbox.team) return true;
+  return sandbox.team.role === "owner" || sandbox.team.role === "admin";
+}
+function SandboxCard({
+  sandbox,
+  onOpenIDE,
+  onOpenTerminal,
+  onWake,
+  onRestore,
+  onDelete,
+  onStop,
+  onResume,
+  onFork,
+  onKeepAlive,
+  onUsage,
+  onHealth,
+  className
+}) {
+  const isRunning = sandbox.status === "running";
+  const isTransitioning = sandbox.status === "provisioning" || sandbox.status === "creating";
+  const isStopped = !isRunning && !isTransitioning;
+  return /* @__PURE__ */ jsxs5("div", { className: cn(
+    "group relative flex flex-col justify-between overflow-hidden rounded-lg border bg-card p-5 transition-colors",
+    isRunning ? "border-[var(--status-running)]/30" : "border-border",
+    "hover:border-foreground/15",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs5("h3", { className: "flex items-center gap-2 text-sm font-bold text-foreground", children: [
+            sandbox.name,
+            isRunning && /* @__PURE__ */ jsxs5("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsx6("span", { className: "absolute inline-flex h-full w-full animate-pulse rounded-full bg-[var(--status-running)] opacity-75" }),
+              /* @__PURE__ */ jsx6("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-[var(--status-running)]" })
+            ] })
+          ] }),
+          sandbox.team && /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-full bg-[var(--accent-surface-soft)] px-2 py-0.5 text-[10px] font-semibold text-[var(--accent-text)]",
+              title: `Shared with ${sandbox.team.name ?? "Team"} \xB7 ${sandbox.team.role}`,
+              children: [
+                /* @__PURE__ */ jsx6(Users, { className: "h-3 w-3", "aria-hidden": "true" }),
+                sandbox.team.name ?? "Team"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("p", { className: "mt-0.5 font-mono text-[10px] tracking-wider text-muted-foreground uppercase", children: [
+          sandbox.nodeId || "Unknown Node",
+          sandbox.team && /* @__PURE__ */ jsxs5("span", { className: "ml-2 normal-case tracking-normal", children: [
+            "\xB7 your role: ",
+            sandbox.team.role
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5(DropdownMenu2, { children: [
+        /* @__PURE__ */ jsx6(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground outline-none",
+            "aria-label": "Sandbox options",
+            children: /* @__PURE__ */ jsx6(MoreVertical, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs5(DropdownMenuContent2, { align: "end", className: "min-w-[180px]", children: [
+          isRunning && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            onStop && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onStop(sandbox.id), children: [
+              /* @__PURE__ */ jsx6(PowerOff, { className: "mr-2 h-4 w-4" }),
+              " Stop Sandbox"
+            ] }),
+            onKeepAlive && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onKeepAlive(sandbox.id), children: [
+              /* @__PURE__ */ jsx6(Clock, { className: "mr-2 h-4 w-4" }),
+              " Keep Alive"
+            ] }),
+            (onStop || onKeepAlive) && /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {}),
+            onUsage && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onUsage(sandbox.id), children: [
+              /* @__PURE__ */ jsx6(BarChart2, { className: "mr-2 h-4 w-4" }),
+              " View Usage"
+            ] }),
+            onHealth && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onHealth(sandbox.id), children: [
+              /* @__PURE__ */ jsx6(Activity, { className: "mr-2 h-4 w-4" }),
+              " Health Check"
+            ] }),
+            (onUsage || onHealth) && /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {}),
+            onFork && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onFork(sandbox.id), children: [
+                /* @__PURE__ */ jsx6(Copy, { className: "mr-2 h-4 w-4" }),
+                " Fork Sandbox"
+              ] }),
+              /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {})
+            ] })
+          ] }),
+          isStopped && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            onResume && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onResume(sandbox.id), children: [
+              /* @__PURE__ */ jsx6(Power, { className: "mr-2 h-4 w-4" }),
+              " Resume Sandbox"
+            ] }),
+            onFork && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { onClick: () => onFork(sandbox.id), children: [
+              /* @__PURE__ */ jsx6(Copy, { className: "mr-2 h-4 w-4" }),
+              " Fork Sandbox"
+            ] }),
+            (onResume || onFork) && /* @__PURE__ */ jsx6(DropdownMenuSeparator2, {})
+          ] }),
+          onDelete && canAdminSandbox(sandbox) && /* @__PURE__ */ jsxs5(DropdownMenuItem2, { className: "text-destructive focus:bg-destructive/10 focus:text-destructive", onClick: () => onDelete(sandbox.id), children: [
+            /* @__PURE__ */ jsx6(Trash2, { className: "mr-2 h-4 w-4" }),
+            " Delete Sandbox"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "my-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 rounded-md border border-border bg-muted/30 p-3", children: [
+        /* @__PURE__ */ jsx6("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-md", isRunning ? "bg-[var(--surface-success-bg)]" : "bg-muted"), children: sandbox.imageIcon ? sandbox.imageIcon : sandbox.image?.includes("node") ? /* @__PURE__ */ jsx6(Code2, { className: cn("h-5 w-5", isRunning ? "text-[var(--surface-success-text)]" : "text-muted-foreground") }) : /* @__PURE__ */ jsx6(Terminal, { className: cn("h-5 w-5", isRunning ? "text-[var(--surface-success-text)]" : "text-muted-foreground") }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-muted-foreground uppercase tracking-widest font-bold", children: "Environment" }),
+          /* @__PURE__ */ jsx6("span", { className: "text-xs font-medium text-foreground font-mono mt-0.5", children: sandbox.image || "Universal" })
+        ] })
+      ] }),
+      isTransitioning && /* @__PURE__ */ jsxs5("div", { className: "mt-3", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex justify-between text-xs text-muted-foreground font-medium mb-1", children: [
+          /* @__PURE__ */ jsx6("span", { children: sandbox.provisioningMessage || "Starting..." }),
+          /* @__PURE__ */ jsxs5("span", { children: [
+            sandbox.provisioningPercent || 0,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "h-full bg-primary transition-all duration-500 rounded-full",
+            style: { width: `${sandbox.provisioningPercent || 5}%` }
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "border-t border-border pt-3", children: isRunning ? /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: () => onOpenIDE?.(sandbox.id),
+        className: "flex w-full items-center justify-center gap-2 rounded-md bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]",
+        children: [
+          /* @__PURE__ */ jsx6(Network, { className: "h-4 w-4" }),
+          "Connect Session"
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: () => onWake?.(sandbox.id),
+        disabled: isTransitioning,
+        className: cn(
+          "flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors border",
+          isTransitioning ? "bg-muted text-muted-foreground cursor-not-allowed border-border" : "bg-card text-foreground hover:bg-muted border-border active:scale-[0.97]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx6(Play, { className: "h-4 w-4" }),
+          isTransitioning ? "Starting..." : "Wake Sandbox"
+        ]
+      }
+    ) })
+  ] });
+}
+function NewSandboxCard({ onClick, className }) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "border-2 border-dashed border-border rounded-lg p-5 flex flex-col items-center justify-center text-center cursor-pointer hover:border-foreground/20 hover:bg-muted/30 transition-colors w-full min-h-[160px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx6(Plus, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ jsx6("span", { className: "mt-4 text-sm font-semibold text-foreground", children: "New Sandbox" }),
+        /* @__PURE__ */ jsx6("span", { className: "mt-1 text-xs text-muted-foreground", children: "Deploy a new isolated environment" })
+      ]
+    }
+  );
+}
+
+// src/dashboard/sandbox-table.tsx
+import { Terminal as Terminal2, Code2 as Code22, Key, Trash2 as Trash22, RefreshCw, ChevronLeft, ChevronRight, Users as Users2, User } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var statusColors = {
+  running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
+  hibernating: { dot: "bg-muted-foreground", text: "text-muted-foreground", bar: "bg-muted-foreground" },
+  provisioning: { dot: "bg-primary animate-pulse", text: "text-primary", bar: "bg-primary" },
+  creating: { dot: "bg-primary animate-pulse", text: "text-primary", bar: "bg-primary" },
+  stopped: { dot: "bg-muted-foreground", text: "text-foreground", bar: "bg-muted-foreground" },
+  failed: { dot: "bg-[var(--code-error)]", text: "text-[var(--code-error)]", bar: "bg-[var(--code-error)]" },
+  archived: { dot: "bg-border", text: "text-muted-foreground", bar: "bg-border" }
+};
+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-muted-foreground", children: [
+      /* @__PURE__ */ jsx7("span", { className: "font-bold", children: label }),
+      /* @__PURE__ */ jsxs6("span", { className: "text-primary", children: [
+        percent,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "h-1.5 w-full bg-background rounded-full overflow-hidden", children: /* @__PURE__ */ jsx7("div", { className: "h-full bg-primary rounded-full", style: { width: `${percent}%` } }) })
+  ] });
+}
+function SandboxTable({
+  sandboxes,
+  page = 1,
+  pageSize = 10,
+  total,
+  onPageChange,
+  onOpenIDE,
+  onOpenTerminal,
+  onSSH,
+  onWake,
+  onMore,
+  onDelete,
+  className
+}) {
+  const totalCount = total ?? sandboxes.length;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const hasTeamSandboxes = sandboxes.some((sb) => sb.team !== void 0);
+  return /* @__PURE__ */ jsxs6("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx7("div", { className: "w-full bg-card rounded-2xl overflow-hidden border border-border", children: /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs6("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs6("tr", { className: "bg-background border-b border-border", children: [
+        /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Sandbox Name" }),
+        hasTeamSandboxes && /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Scope" }),
+        /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Environment" }),
+        /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Resources" }),
+        /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-border", 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-muted/50 transition-colors group relative", children: [
+          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5 whitespace-nowrap", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx7("span", { className: cn("flex h-2.5 w-2.5 rounded-full", sc.dot) }),
+            /* @__PURE__ */ jsx7("span", { className: cn("text-xs font-bold uppercase tracking-wide", sc.text), children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1) })
+          ] }) }),
+          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors", children: sb.name }),
+            sb.nodeId && /* @__PURE__ */ jsx7("span", { className: "text-[10px] font-mono text-muted-foreground", children: sb.nodeId })
+          ] }) }),
+          hasTeamSandboxes && /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: sb.team ? /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
+              title: `Shared with ${sb.team.name ?? "Team"} \xB7 ${sb.team.role}`,
+              children: [
+                /* @__PURE__ */ jsx7(Users2, { className: "h-3 w-3", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx7("span", { children: sb.team.name ?? "Team" }),
+                /* @__PURE__ */ jsxs6("span", { className: "font-normal text-muted-foreground", children: [
+                  "\xB7 ",
+                  sb.team.role
+                ] })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
+              title: "Personal sandbox",
+              children: [
+                /* @__PURE__ */ jsx7(User, { className: "h-3 w-3", "aria-hidden": "true" }),
+                "Personal"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+            sb.imageIcon && /* @__PURE__ */ jsx7("div", { className: "w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center", children: sb.imageIcon }),
+            sb.image && /* @__PURE__ */ jsx7("span", { className: "text-xs font-bold text-foreground", children: sb.image })
+          ] }) }),
+          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5", children: isActive ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48", children: [
+            /* @__PURE__ */ jsx7(MiniMeter, { label: "CPU", percent: sb.cpuPercent ?? 0 }),
+            /* @__PURE__ */ jsx7(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-primary italic text-[10px] font-bold", children: [
+            /* @__PURE__ */ jsx7(RefreshCw, { className: "h-3.5 w-3.5 animate-spin" }),
+            sb.provisioningMessage ?? "Allocating nodes..."
+          ] }) : isHibernating ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 w-48 opacity-30", children: [
+            /* @__PURE__ */ jsx7(MiniMeter, { label: "CPU", percent: 0 }),
+            /* @__PURE__ */ jsx7(MiniMeter, { label: "RAM", percent: 0 })
+          ] }) : null }),
+          /* @__PURE__ */ jsx7("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-1", children: [
+            isActive && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onOpenIDE?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Open IDE", children: /* @__PURE__ */ jsx7(Code22, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onOpenTerminal?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "Terminal", children: /* @__PURE__ */ jsx7(Terminal2, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx7(Key, { className: "h-4 w-4" }) })
+            ] }),
+            isHibernating && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-border text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", children: "Wake Up" }),
+            onMore && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onMore(sb.id), className: "p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-all active:scale-90", children: /* @__PURE__ */ jsx7(Code22, { className: "h-4 w-4" }) }),
+            onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onDelete(sb.id), className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx7(Trash22, { className: "h-4 w-4" }) })
+          ] }) })
+        ] }, sb.id);
+      }) })
+    ] }) }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground 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__ */ jsx7("button", { type: "button", onClick: () => onPageChange?.(page - 1), disabled: page <= 1, className: "p-2 rounded-lg border border-border hover:bg-muted/50 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx7(ChevronLeft, { className: "h-4 w-4" }) }),
+        Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange?.(p),
+            className: cn(
+              "px-3 py-1 rounded-lg transition-colors",
+              p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-border" : "hover:bg-muted/50"
+            ),
+            children: p
+          },
+          p
+        )),
+        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onPageChange?.(page + 1), disabled: page >= totalPages, className: "p-2 rounded-lg border border-border hover:bg-muted/50 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx7(ChevronRight, { className: "h-4 w-4" }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/invoice-table.tsx
+import { Download, FileText } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var statusStyle = {
+  paid: "bg-[var(--accent-surface-soft)] text-primary border border-border",
+  pending: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)] border border-[var(--surface-warning-border)]",
+  failed: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)] border border-[var(--surface-danger-border)]"
+};
+function InvoiceTable({ invoices, onExportAll, onLoadMore, onViewInvoice, hasMore, className }) {
+  return /* @__PURE__ */ jsxs7("section", { className, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center mb-6 px-2", children: [
+      /* @__PURE__ */ jsx8("h2", { className: "text-2xl font-bold text-foreground tracking-tight", children: "Invoice History" }),
+      onExportAll && /* @__PURE__ */ jsxs7("button", { type: "button", onClick: onExportAll, className: "text-[10px] font-mono text-primary uppercase tracking-widest flex items-center gap-2 hover:underline", children: [
+        /* @__PURE__ */ jsx8(Download, { className: "h-3.5 w-3.5" }),
+        "Export All"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "bg-card rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ jsxs7("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "bg-background border-b border-border", children: [
+        /* @__PURE__ */ jsx8("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Invoice ID" }),
+        /* @__PURE__ */ jsx8("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Date" }),
+        /* @__PURE__ */ jsx8("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Amount" }),
+        /* @__PURE__ */ jsx8("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest", children: "Status" }),
+        /* @__PURE__ */ jsx8("th", { className: "px-6 py-4 font-mono text-[10px] text-muted-foreground uppercase tracking-widest text-right", children: "Action" })
+      ] }) }),
+      /* @__PURE__ */ jsx8("tbody", { className: "divide-y divide-border", children: invoices.map((inv) => /* @__PURE__ */ jsxs7("tr", { className: "hover:bg-muted/50 transition-colors", children: [
+        /* @__PURE__ */ jsx8("td", { className: "px-6 py-5 font-mono text-xs text-foreground", children: inv.id }),
+        /* @__PURE__ */ jsx8("td", { className: "px-6 py-5 text-sm text-foreground", children: inv.date }),
+        /* @__PURE__ */ jsxs7("td", { className: "px-6 py-5 text-sm font-bold text-foreground", children: [
+          "$",
+          inv.amount.toFixed(2)
+        ] }),
+        /* @__PURE__ */ jsx8("td", { className: "px-6 py-5", children: /* @__PURE__ */ jsx8("span", { className: cn("px-2 py-1 text-[10px] font-mono rounded uppercase", statusStyle[inv.status] ?? statusStyle.paid), children: inv.status }) }),
+        /* @__PURE__ */ jsx8("td", { className: "px-6 py-5 text-right", children: /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => onViewInvoice?.(inv.id), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx8(FileText, { className: "h-4 w-4" }) }) })
+      ] }, inv.id)) })
+    ] }) }),
+    hasMore && onLoadMore && /* @__PURE__ */ jsx8("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx8("button", { type: "button", onClick: onLoadMore, className: "px-8 py-2 text-[10px] font-mono text-muted-foreground border border-border rounded-full hover:bg-muted/50 transition-colors uppercase tracking-widest", children: "Load More History" }) })
+  ] });
+}
+
+// src/dashboard/plan-cards.tsx
+import { Check } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function PlanCards({ plans, className }) {
+  return /* @__PURE__ */ jsxs8("section", { className, children: [
+    /* @__PURE__ */ jsx9("h2", { className: "text-2xl font-bold text-foreground tracking-tight mb-5 px-2", children: "Subscription Plans" }),
+    /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: cn(
+          "p-5 rounded-xl transition-all relative overflow-hidden border",
+          plan.popular ? "bg-muted/50 border-border" : "bg-card border-border hover:bg-muted/50 hover:border-primary/20"
+        ),
+        children: [
+          plan.popular && /* @__PURE__ */ jsx9("div", { className: "absolute top-0 right-0 bg-[var(--accent-surface-soft)] border-l border-b border-border px-4 py-1 text-[10px] font-bold text-[var(--accent-text)] uppercase tracking-widest rounded-bl-lg", children: "Popular" }),
+          /* @__PURE__ */ jsxs8("div", { className: "mb-4", children: [
+            /* @__PURE__ */ jsx9("div", { className: cn("text-xs font-mono uppercase tracking-widest mb-2", plan.popular ? "text-primary" : "text-muted-foreground"), children: plan.name }),
+            /* @__PURE__ */ jsxs8("div", { className: "text-3xl font-bold text-foreground", children: [
+              "$",
+              plan.price,
+              /* @__PURE__ */ jsxs8("span", { className: "text-sm font-normal text-muted-foreground tracking-normal", children: [
+                "/",
+                plan.period ?? "mo"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx9("ul", { className: "space-y-2 mb-5 text-sm text-muted-foreground", children: plan.features.map((f, i) => /* @__PURE__ */ jsxs8("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx9(Check, { className: "h-3.5 w-3.5 text-primary shrink-0" }),
+            f.text
+          ] }, i)) }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: () => plan.onSelect?.(plan.id),
+              className: cn(
+                "w-full py-3 rounded-lg text-xs font-bold uppercase tracking-widest transition-all border",
+                plan.current ? "border-border text-muted-foreground hover:border-primary/20 hover:text-foreground" : plan.popular ? "bg-[var(--accent-surface-soft)] border-border text-[var(--accent-text)] hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-transform" : "border-border text-foreground hover:border-primary/20 hover:text-primary"
+              ),
+              children: plan.ctaLabel ?? (plan.current ? "Current Plan" : "Upgrade Now")
+            }
+          )
+        ]
+      },
+      plan.id
+    )) })
+  ] });
+}
+
+// src/dashboard/backend-selector.tsx
+import { ChevronDown } from "lucide-react";
+import * as Select from "@radix-ui/react-select";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function BackendSelector({
+  backends,
+  selected,
+  onChange,
+  label = "Model",
+  placeholder = "Select a model",
+  className
+}) {
+  const current = backends.find((b) => b.type === selected);
+  return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-1.5", className), children: [
+    label && /* @__PURE__ */ jsx10("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs9(Select.Root, { value: selected, onValueChange: onChange, children: [
+      /* @__PURE__ */ jsxs9(
+        Select.Trigger,
+        {
+          className: cn(
+            "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
+            "border border-border bg-card",
+            "px-3 py-2.5 text-sm text-left",
+            "transition-colors duration-[var(--transition-fast)]",
+            "hover:border-primary/20 hover:bg-accent/30",
+            "focus:outline-none focus:border-primary/30",
+            "data-[state=open]:border-primary/30 data-[state=open]:bg-accent/30"
+          ),
+          children: [
+            /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1", children: current ? /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx10("span", { className: "font-medium text-foreground", children: current.label }),
+              current.description && /* @__PURE__ */ jsx10("span", { className: "ml-2 text-xs text-muted-foreground", children: current.description })
+            ] }) : /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground", children: placeholder }) }),
+            /* @__PURE__ */ jsx10(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx10(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx10(Select.Portal, { children: /* @__PURE__ */ jsx10(
+        Select.Content,
+        {
+          position: "popper",
+          sideOffset: 4,
+          className: cn(
+            "z-50 w-[var(--radix-select-trigger-width)] overflow-hidden",
+            "rounded-[var(--radius-md)] border border-border",
+            "bg-card shadow-[var(--shadow-dropdown)]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-1"
+          ),
+          children: /* @__PURE__ */ jsx10(Select.Viewport, { className: "p-1", children: backends.map((backend) => /* @__PURE__ */ jsxs9(
+            Select.Item,
+            {
+              value: backend.type,
+              className: cn(
+                "relative flex cursor-pointer select-none flex-col rounded-[var(--radius-sm)]",
+                "px-3 py-2.5 text-sm outline-none",
+                "transition-colors duration-[var(--transition-fast)]",
+                "hover:bg-accent/50 focus:bg-accent/50",
+                "data-[state=checked]:bg-[var(--accent-surface-soft)] data-[state=checked]:text-[var(--brand-primary)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsx10(Select.ItemText, { children: /* @__PURE__ */ jsx10("span", { className: "font-medium", children: backend.label }) }),
+                backend.description && /* @__PURE__ */ jsx10("span", { className: "mt-0.5 text-xs text-muted-foreground data-[state=checked]:text-[var(--accent-text)]", children: backend.description })
+              ]
+            },
+            backend.type
+          )) })
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/dashboard/harness-picker.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var HARNESS_OPTIONS = [
+  {
+    type: "opencode",
+    label: "OpenCode",
+    description: "Default agent \u2014 broad model support, deterministic streaming"
+  },
+  {
+    type: "claude-code",
+    label: "Claude Code",
+    description: "Native Claude skills and tools (requires ANTHROPIC_API_KEY)"
+  },
+  {
+    type: "codex",
+    label: "Codex",
+    description: "OpenAI Codex CLI (requires OPENAI_API_KEY)"
+  },
+  {
+    type: "amp",
+    label: "AMP",
+    description: "Sourcegraph AMP agent"
+  },
+  {
+    type: "factory-droids",
+    label: "Factory Droids",
+    description: "Factory Droid agent"
+  },
+  {
+    type: "cli-base",
+    label: "CLI base (no agent)",
+    description: "Shell tools only \u2014 for non-AI scheduled tasks"
+  }
+];
+function HarnessPicker({
+  value,
+  onChange,
+  available,
+  optionsOverride,
+  label = "Agent harness",
+  ...rest
+}) {
+  const allowed = new Set(available ?? HARNESS_OPTIONS.map((h) => h.type));
+  const backends = HARNESS_OPTIONS.filter((h) => allowed.has(h.type)).map((h) => {
+    const override = optionsOverride?.[h.type];
+    return {
+      type: h.type,
+      label: override?.label ?? h.label,
+      description: override?.description ?? h.description
+    };
+  });
+  return /* @__PURE__ */ jsx11(
+    BackendSelector,
+    {
+      backends,
+      selected: value,
+      onChange: (next) => onChange(next),
+      label,
+      ...rest
+    }
+  );
+}
+
+// src/dashboard/dashboard-layout.tsx
+import * as React3 from "react";
+import { Plus as Plus2, Bell } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function SettingsIconSmall({ className }) {
+  return /* @__PURE__ */ jsxs10("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__ */ jsx12("title", { children: "Settings" }),
+    /* @__PURE__ */ jsx12("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__ */ jsx12("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function MenuIcon({ className }) {
+  return /* @__PURE__ */ jsxs10("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__ */ jsx12("title", { children: "Menu icon" }),
+    /* @__PURE__ */ jsx12("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+    /* @__PURE__ */ jsx12("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+    /* @__PURE__ */ jsx12("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+  ] });
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs10("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__ */ jsx12("title", { children: "Close icon" }),
+    /* @__PURE__ */ jsx12("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx12("path", { d: "m6 6 12 12" })
+  ] });
+}
+function formatNotifDate(raw) {
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? raw : d.toLocaleString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+function DefaultLink2({
+  href,
+  to,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx12("a", { href: href ?? to, className, ...rest, children });
+}
+function DashboardLayoutInner({
+  children,
+  variant = "sandbox",
+  navItems,
+  modeItems = [],
+  panels = [],
+  activeNavId,
+  user,
+  isLoading = false,
+  onLogout,
+  onSettingsClick,
+  settingsHref = "/dashboard/settings",
+  onNewSandbox,
+  className,
+  sidebarClassName,
+  contentClassName,
+  topNavLinks,
+  activeTopNavHref,
+  LinkComponent = DefaultLink2,
+  footer,
+  railFooter,
+  profileMenuItems,
+  notifications: notifData
+}) {
+  const Link = LinkComponent;
+  const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React3.useState(false);
+  const notifRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!notificationsOpen) return;
+    const handler = (e) => {
+      if (notifRef.current && !notifRef.current.contains(e.target)) {
+        setNotificationsOpen(false);
+      }
+    };
+    const keyHandler = (e) => {
+      if (e.key === "Escape") setNotificationsOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [notificationsOpen]);
+  const { contentMargin, hidden, mode, hasPanels, panelOpen } = useSidebar();
+  const modeSet = React3.useMemo(() => new Set(modeItems), [modeItems]);
+  const sidebarUser = React3.useMemo(
+    () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
+    [user?.email, user?.name, user?.tier, user?.avatarUrl]
+  );
+  const activePanel = panels.find((p) => p.mode === mode);
+  const buildSidebarContent = React3.useCallback(
+    (showLabels) => /* @__PURE__ */ jsxs10(Fragment6, { children: [
+      /* @__PURE__ */ jsxs10(SidebarRail, { wide: showLabels, children: [
+        /* @__PURE__ */ jsx12(SidebarRailHeader, { children: /* @__PURE__ */ jsx12(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-muted/50", children: /* @__PURE__ */ jsx12(Logo, { variant, size: "sm", iconOnly: true }) }) }),
+        /* @__PURE__ */ jsx12(SidebarRailNav, { children: navItems.map((item, i) => {
+          const isMode = modeSet.has(item.id);
+          const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
+          const showSep = i > 0 && isMode && !prevIsMode;
+          return /* @__PURE__ */ jsxs10(React3.Fragment, { children: [
+            showSep && /* @__PURE__ */ jsx12(RailSeparator, {}),
+            isMode ? /* @__PURE__ */ jsx12(
+              RailModeButton,
+              {
+                mode: item.id,
+                icon: item.icon,
+                label: item.label,
+                badge: item.badge,
+                showLabel: showLabels
+              }
+            ) : /* @__PURE__ */ jsx12(Link, { href: item.href, to: item.href, children: /* @__PURE__ */ jsx12(
+              RailButton,
+              {
+                icon: item.icon,
+                label: item.label,
+                isActive: activeNavId === item.id,
+                showLabel: showLabels
+              }
+            ) })
+          ] }, item.id);
+        }) }),
+        /* @__PURE__ */ jsxs10(SidebarRailFooter, { children: [
+          onSettingsClick ? /* @__PURE__ */ jsx12(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick, showLabel: showLabels }) : /* @__PURE__ */ jsx12(Link, { href: settingsHref, to: settingsHref, children: /* @__PURE__ */ jsx12(RailButton, { icon: SettingsIconSmall, label: "Settings", showLabel: showLabels }) }),
+          railFooter,
+          /* @__PURE__ */ jsx12(RailSeparator, {}),
+          /* @__PURE__ */ jsx12(
+            ProfileAvatar,
+            {
+              user: sidebarUser,
+              isLoading,
+              onLogout,
+              onSettingsClick,
+              settingsHref,
+              LinkComponent,
+              children: profileMenuItems
+            }
+          )
+        ] })
+      ] }),
+      panels.length > 0 && /* @__PURE__ */ jsxs10(SidebarPanel, { children: [
+        /* @__PURE__ */ jsx12(SidebarPanelHeader, { title: activePanel?.title ?? mode }),
+        /* @__PURE__ */ jsx12(SidebarPanelContent, { children: activePanel?.content })
+      ] })
+    ] }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — only the inputs that actually affect the sidebar tree
+    [
+      Link,
+      variant,
+      navItems,
+      modeSet,
+      activeNavId,
+      onSettingsClick,
+      settingsHref,
+      railFooter,
+      sidebarUser,
+      isLoading,
+      onLogout,
+      LinkComponent,
+      profileMenuItems,
+      panels,
+      activePanel,
+      mode
+    ]
+  );
+  const sidebarContent = React3.useMemo(() => buildSidebarContent(false), [buildSidebarContent]);
+  const mobileSidebarContent = React3.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
+  return /* @__PURE__ */ jsxs10("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
+    /* @__PURE__ */ jsxs10(
+      "nav",
+      {
+        className: "fixed top-0 z-50 bg-card border-b border-border flex justify-between items-center px-8 h-14 font-sans text-[13px] tracking-tight transition-[left,width] duration-200 ease-in-out",
+        style: {
+          left: hidden ? 0 : contentMargin,
+          width: hidden ? "100%" : `calc(100% - ${contentMargin}px)`
+        },
+        children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-8", children: [
+            /* @__PURE__ */ jsx12(Link, { href: "/", to: "/", className: "lg:hidden flex items-center p-1 rounded-md hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsx12(Logo, { variant, size: "sm", iconOnly: true }) }),
+            topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx12("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx12(
+              Link,
+              {
+                href: link.href,
+                to: link.href,
+                className: cn(
+                  "transition-all duration-300 px-2 py-1 rounded",
+                  activeTopNavHref === link.href ? "text-foreground border-b-2 border-primary pb-1" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+                ),
+                children: link.label
+              },
+              link.href
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-4", children: [
+            onNewSandbox && /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                type: "button",
+                onClick: onNewSandbox,
+                className: "hidden md:flex items-center gap-2 bg-[var(--btn-primary-bg)] border border-[var(--border-accent)] text-[var(--btn-primary-text)] px-4 py-2 rounded-lg font-bold hover:bg-[var(--btn-primary-hover)] transition-all active:scale-95 text-xs",
+                children: [
+                  /* @__PURE__ */ jsx12(Plus2, { className: "h-3.5 w-3.5" }),
+                  "New Sandbox"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs10("div", { className: "relative", ref: notifRef, children: [
+              /* @__PURE__ */ jsxs10(
+                "button",
+                {
+                  type: "button",
+                  className: "relative text-muted-foreground hover:text-foreground transition-colors p-2 rounded-lg hover:bg-muted/50",
+                  onClick: () => setNotificationsOpen(!notificationsOpen),
+                  "aria-label": "Notifications",
+                  "aria-expanded": notificationsOpen,
+                  children: [
+                    /* @__PURE__ */ jsx12(Bell, { className: "h-4 w-4" }),
+                    (notifData?.unreadCount ?? 0) > 0 && /* @__PURE__ */ jsx12("span", { className: "absolute top-1 right-1 h-2 w-2 rounded-full bg-destructive" })
+                  ]
+                }
+              ),
+              notificationsOpen && /* @__PURE__ */ jsxs10("div", { className: "absolute right-0 top-full mt-2 w-80 rounded-lg border border-border bg-card shadow-lg z-50", children: [
+                /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+                  /* @__PURE__ */ jsx12("p", { className: "font-bold text-foreground text-sm", children: "Notifications" }),
+                  (notifData?.unreadCount ?? 0) > 0 && notifData?.onMarkAllRead && /* @__PURE__ */ jsx12(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        notifData.onMarkAllRead?.();
+                      },
+                      className: "text-primary text-xs font-medium hover:underline",
+                      children: "Mark all read"
+                    }
+                  )
+                ] }),
+                !notifData?.items || notifData.items.length === 0 ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [
+                  /* @__PURE__ */ jsx12(Bell, { className: "h-8 w-8 text-muted-foreground/40 mb-2" }),
+                  /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground text-sm", children: "No notifications yet" }),
+                  /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground/60 text-xs mt-1", children: "We'll notify you about important updates" })
+                ] }) : /* @__PURE__ */ jsx12("div", { className: "max-h-80 overflow-y-auto", children: notifData.items.map((n) => /* @__PURE__ */ jsxs10(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "w-full text-left px-4 py-3 border-b border-border last:border-0 transition-colors",
+                      n.read ? "cursor-default" : "bg-primary/5 hover:bg-muted/50"
+                    ),
+                    onClick: () => {
+                      if (!n.read) notifData.onMarkRead?.(n.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx12("p", { className: cn("text-sm", !n.read ? "font-semibold text-foreground" : "text-muted-foreground"), children: n.title }),
+                      /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: n.message }),
+                      /* @__PURE__ */ jsx12("p", { className: "text-[10px] text-muted-foreground/50 mt-1", children: formatNotifDate(n.createdAt) })
+                    ]
+                  },
+                  n.id
+                )) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              className: "rounded-md p-2 hover:bg-muted/50 lg:hidden",
+              "aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
+              "aria-expanded": mobileMenuOpen,
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx12(XIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx12(MenuIcon, { className: "h-6 w-6" })
+            }
+          )
+        ]
+      }
+    ),
+    mobileMenuOpen && /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-30 bg-black/50 lg:hidden", onClick: () => setMobileMenuOpen(false), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx12(
+      "aside",
+      {
+        className: cn(
+          "fixed top-14 bottom-0 left-0 z-30 flex bg-background transition-transform duration-200 lg:hidden",
+          mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
+        ),
+        style: {
+          width: panelOpen && hasPanels ? SIDEBAR_MOBILE_WIDTH + SIDEBAR_PANEL_WIDTH : SIDEBAR_MOBILE_WIDTH
+        },
+        children: mobileSidebarContent
+      }
+    ),
+    /* @__PURE__ */ jsx12(Sidebar, { className: cn("hidden lg:flex", sidebarClassName), children: sidebarContent }),
+    /* @__PURE__ */ jsx12(SidebarContent, { className: cn("pt-16 px-6 pb-8 lg:px-8 bg-background", contentClassName), children }),
+    footer
+  ] });
+}
+function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }) {
+  return /* @__PURE__ */ jsx12(SidebarProvider, { defaultPanelOpen, defaultMode, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx12(DashboardLayoutInner, { defaultPanelOpen, defaultMode, ...props }) });
+}
+
+// src/dashboard/profile-selector.tsx
+import { Check as Check2, ChevronDown as ChevronDown2, Plus as Plus3, Settings } from "lucide-react";
+import { Button } from "@tangle-network/ui/primitives";
+import { Badge } from "@tangle-network/ui/primitives";
+import {
+  DropdownMenu as DropdownMenu3,
+  DropdownMenuContent as DropdownMenuContent3,
+  DropdownMenuItem as DropdownMenuItem3,
+  DropdownMenuLabel as DropdownMenuLabel2,
+  DropdownMenuSeparator as DropdownMenuSeparator3,
+  DropdownMenuTrigger as DropdownMenuTrigger3
+} from "@tangle-network/ui/primitives";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs11 } 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__ */ jsxs11("div", { className, children: [
+    label && /* @__PURE__ */ jsx13("label", { className: "mb-2 block font-medium text-sm", children: label }),
+    /* @__PURE__ */ jsxs11(DropdownMenu3, { children: [
+      /* @__PURE__ */ jsx13(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
+        /* @__PURE__ */ jsx13("span", { className: "truncate", children: selected ? selected.name : placeholder }),
+        /* @__PURE__ */ jsx13(ChevronDown2, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+      ] }) }),
+      /* @__PURE__ */ jsxs11(DropdownMenuContent3, { className: "w-[300px]", align: "start", children: [
+        /* @__PURE__ */ jsxs11(
+          DropdownMenuItem3,
+          {
+            onClick: () => onSelect(null),
+            className: "flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsx13("span", { children: placeholder }),
+              !selectedId && /* @__PURE__ */ jsx13(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+            ]
+          }
+        ),
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator3, {}),
+          /* @__PURE__ */ jsx13(DropdownMenuLabel2, { children: "Built-in Profiles" }),
+          builtinProfiles.map((profile) => /* @__PURE__ */ jsxs11(
+            DropdownMenuItem3,
+            {
+              onClick: () => onSelect(profile),
+              className: "flex flex-col items-start gap-1",
+              children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx13("span", { className: "font-medium", children: profile.name }),
+                    profile.extends && /* @__PURE__ */ jsxs11(Badge, { variant: "secondary", className: "border-0 text-xs", children: [
+                      "extends ",
+                      profile.extends
+                    ] })
+                  ] }),
+                  selectedId === profile.id && /* @__PURE__ */ jsx13(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+                ] }),
+                profile.description && /* @__PURE__ */ jsx13("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
+              ]
+            },
+            profile.id
+          ))
+        ] }),
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator3, {}),
+          /* @__PURE__ */ jsx13(DropdownMenuLabel2, { children: "Custom Profiles" }),
+          customProfiles.map((profile) => /* @__PURE__ */ jsxs11(
+            DropdownMenuItem3,
+            {
+              onClick: () => onSelect(profile),
+              className: "flex flex-col items-start gap-1",
+              children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx13("span", { className: "font-medium", children: profile.name }),
+                    profile.model && /* @__PURE__ */ jsx13(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
+                  ] }),
+                  selectedId === profile.id && /* @__PURE__ */ jsx13(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+                ] }),
+                profile.description && /* @__PURE__ */ jsx13("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
+                showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
+                  /* @__PURE__ */ jsxs11("span", { children: [
+                    profile.metrics.total_runs,
+                    " runs"
+                  ] }),
+                  /* @__PURE__ */ jsxs11("span", { children: [
+                    profile.metrics.success_rate.toFixed(0),
+                    "% success"
+                  ] }),
+                  /* @__PURE__ */ jsxs11("span", { children: [
+                    "~",
+                    (profile.metrics.avg_duration_ms / 1e3).toFixed(1),
+                    "s avg"
+                  ] })
+                ] })
+              ]
+            },
+            profile.id
+          ))
+        ] }),
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+          /* @__PURE__ */ jsx13(DropdownMenuSeparator3, {}),
+          onCreateClick && /* @__PURE__ */ jsxs11(
+            DropdownMenuItem3,
+            {
+              onClick: onCreateClick,
+              className: "text-[var(--surface-info-text)]",
+              children: [
+                /* @__PURE__ */ jsx13(Plus3, { className: "mr-2 h-4 w-4" }),
+                "Create New Profile"
+              ]
+            }
+          ),
+          onManageClick && /* @__PURE__ */ jsxs11(
+            DropdownMenuItem3,
+            {
+              onClick: onManageClick,
+              className: "text-muted-foreground",
+              children: [
+                /* @__PURE__ */ jsx13(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__ */ jsxs11("div", { className: `rounded-lg border border-border p-4 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx13("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
+    /* @__PURE__ */ jsx13("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
+      const isBestSuccess = profile.id === bestSuccess.id;
+      const isFastest = profile.id === fastestProfile.id;
+      return /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          className: "flex items-center justify-between gap-4",
+          children: [
+            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-medium", children: profile.name }),
+              isBestSuccess && /* @__PURE__ */ jsx13(Badge, { className: "border border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] text-xs", children: "Best Success" }),
+              isFastest && !isBestSuccess && /* @__PURE__ */ jsx13(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Fastest" })
+            ] }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxs11("span", { children: [
+                /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "Success:" }),
+                " ",
+                /* @__PURE__ */ jsxs11(
+                  "span",
+                  {
+                    className: (profile.metrics?.success_rate ?? 0) >= 80 ? "text-[var(--surface-success-text)]" : (profile.metrics?.success_rate ?? 0) >= 50 ? "text-[var(--surface-warning-text)]" : "text-[var(--surface-danger-text)]",
+                    children: [
+                      profile.metrics?.success_rate.toFixed(0),
+                      "%"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs11("span", { children: [
+                /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "Avg:" }),
+                " ",
+                ((profile.metrics?.avg_duration_ms ?? 0) / 1e3).toFixed(1),
+                "s"
+              ] }),
+              /* @__PURE__ */ jsxs11("span", { className: "text-muted-foreground", children: [
+                profile.metrics?.total_runs,
+                " runs"
+              ] })
+            ] })
+          ]
+        },
+        profile.id
+      );
+    }) })
+  ] });
+}
+
+// src/dashboard/variant-list.tsx
+import {
+  Check as Check3,
+  CheckCircle2,
+  Clock as Clock2,
+  ExternalLink,
+  Loader2,
+  Timer,
+  X,
+  XCircle
+} from "lucide-react";
+import { Button as Button2 } from "@tangle-network/ui/primitives";
+import { Badge as Badge2 } from "@tangle-network/ui/primitives";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var statusConfig = {
+  pending: {
+    icon: Clock2,
+    color: "text-[var(--surface-warning-text)]",
+    bg: "bg-[var(--surface-warning-bg)]",
+    border: "border-[var(--surface-warning-border)]",
+    label: "Pending",
+    animate: false
+  },
+  running: {
+    icon: Loader2,
+    color: "text-primary",
+    bg: "bg-[var(--accent-surface-soft)]",
+    border: "border-border",
+    label: "Running",
+    animate: true
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: "text-[var(--surface-success-text)]",
+    bg: "bg-[var(--surface-success-bg)]",
+    border: "border-[var(--surface-success-border)]",
+    label: "Completed",
+    animate: false
+  },
+  failed: {
+    icon: XCircle,
+    color: "text-[var(--surface-danger-text)]",
+    bg: "bg-[var(--surface-danger-bg)]",
+    border: "border-[var(--surface-danger-border)]",
+    label: "Failed",
+    animate: false
+  },
+  cancelled: {
+    icon: XCircle,
+    color: "text-[var(--surface-neutral-text)]",
+    bg: "bg-[var(--surface-neutral-bg)]",
+    border: "border-[var(--surface-neutral-border)]",
+    label: "Cancelled",
+    animate: false
+  }
+};
+var outcomeConfig = {
+  pending_review: {
+    color: "text-[var(--surface-warning-text)]",
+    bg: "bg-[var(--surface-warning-bg)]",
+    border: "border-[var(--surface-warning-border)]",
+    label: "Pending Review"
+  },
+  accepted: {
+    color: "text-[var(--surface-success-text)]",
+    bg: "bg-[var(--surface-success-bg)]",
+    border: "border-[var(--surface-success-border)]",
+    label: "Accepted"
+  },
+  rejected: {
+    color: "text-[var(--surface-danger-text)]",
+    bg: "bg-[var(--surface-danger-bg)]",
+    border: "border-[var(--surface-danger-border)]",
+    label: "Rejected"
+  },
+  merged_with_conflicts: {
+    color: "text-[var(--surface-orange-text)]",
+    bg: "bg-[var(--surface-orange-bg)]",
+    border: "border-[var(--surface-orange-border)]",
+    label: "Merged (conflicts)"
+  },
+  expired: {
+    color: "text-[var(--surface-neutral-text)]",
+    bg: "bg-[var(--surface-neutral-bg)]",
+    border: "border-[var(--surface-neutral-border)]",
+    label: "Expired"
+  }
+};
+function VariantList({
+  variants,
+  selectedId,
+  onSelect,
+  onAccept,
+  onReject,
+  isActioning,
+  className
+}) {
+  return /* @__PURE__ */ jsx14("div", { className: `space-y-2 ${className || ""}`, children: variants.map((variant) => {
+    const status = statusConfig[variant.status];
+    const StatusIcon = status.icon;
+    const isSelected = variant.id === selectedId;
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: `cursor-pointer rounded-lg border px-3 py-2.5 transition-colors ${isSelected ? "border-primary/30 bg-[var(--accent-surface-soft)]" : "border-border bg-card hover:border-primary/20 hover:bg-muted/50"}`,
+        onClick: () => onSelect?.(variant.id),
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs12(Badge2, { className: `shrink-0 ${status.bg} ${status.border} ${status.color}`, children: [
+              /* @__PURE__ */ jsx14(
+                StatusIcon,
+                {
+                  className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
+                }
+              ),
+              status.label
+            ] }),
+            /* @__PURE__ */ jsx14("span", { className: "truncate text-sm font-medium text-foreground", children: variant.label }),
+            variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+              "(",
+              variant.sublabel,
+              ")"
+            ] }),
+            variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx14(Timer, { className: "h-3 w-3" }),
+              (variant.durationMs / 1e3).toFixed(1),
+              "s"
+            ] }),
+            /* @__PURE__ */ jsxs12("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+              variant.outcome && /* @__PURE__ */ jsx14(
+                Badge2,
+                {
+                  className: `${outcomeConfig[variant.outcome].bg} ${outcomeConfig[variant.outcome].border} ${outcomeConfig[variant.outcome].color}`,
+                  children: outcomeConfig[variant.outcome].label
+                }
+              ),
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+                /* @__PURE__ */ jsxs12(
+                  Button2,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-7 border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] px-2 text-xs text-[var(--surface-success-text)] hover:bg-[var(--surface-success-border)]",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onAccept(variant.id);
+                    },
+                    disabled: isActioning === variant.id,
+                    children: [
+                      /* @__PURE__ */ jsx14(Check3, { className: "mr-1 h-3 w-3" }),
+                      "Accept"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs12(
+                  Button2,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    className: "h-7 border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-2 text-xs text-[var(--surface-danger-text)] hover:bg-[var(--surface-danger-border)]",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onReject(variant.id);
+                    },
+                    disabled: isActioning === variant.id,
+                    children: [
+                      /* @__PURE__ */ jsx14(X, { className: "mr-1 h-3 w-3" }),
+                      "Reject"
+                    ]
+                  }
+                )
+              ] }),
+              variant.detailsUrl && /* @__PURE__ */ jsx14(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 w-7 p-0 text-muted-foreground hover:text-foreground",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    window.open(variant.detailsUrl, "_blank");
+                  },
+                  children: /* @__PURE__ */ jsx14(ExternalLink, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] })
+          ] }),
+          variant.error && /* @__PURE__ */ jsx14("p", { className: "mt-1.5 text-xs text-[var(--surface-danger-text)]", children: variant.error }),
+          variant.summary && /* @__PURE__ */ jsx14("p", { className: "mt-1.5 line-clamp-2 text-xs text-muted-foreground", children: variant.summary })
+        ]
+      },
+      variant.id
+    );
+  }) });
+}
+
+// src/dashboard/system-logs.tsx
+import { Terminal as Terminal3 } from "lucide-react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function SystemLogsViewer({ apiUrl, token, className }) {
+  const [logs, setLogs] = useState4([]);
+  const [error, setError] = useState4(null);
+  const [isFollowing, setIsFollowing] = useState4(true);
+  const scrollRef = useRef2(null);
+  useEffect2(() => {
+    let timeoutId;
+    let backoff = 2e3;
+    const controller = new AbortController();
+    async function fetchLogs() {
+      try {
+        const res = await fetch(`${apiUrl}/debug/logs`, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          },
+          signal: controller.signal
+        });
+        if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
+        const data = await res.json();
+        if (!controller.signal.aborted) {
+          setLogs(data.logs || []);
+          setError(null);
+          backoff = 2e3;
+        }
+      } catch (err) {
+        if (err.name === "AbortError") return;
+        if (!controller.signal.aborted) {
+          setError(err instanceof Error ? err.message : "Failed to fetch logs");
+          backoff = Math.min(backoff * 2, 3e4);
+        }
+      }
+      if (!controller.signal.aborted) {
+        timeoutId = setTimeout(fetchLogs, backoff);
+      }
+    }
+    fetchLogs();
+    return () => {
+      controller.abort();
+      clearTimeout(timeoutId);
+    };
+  }, [apiUrl, token]);
+  useEffect2(() => {
+    if (isFollowing && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs, isFollowing]);
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
+    setIsFollowing((prev) => prev === isAtBottom ? prev : isAtBottom);
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-col h-full bg-background text-foreground font-mono text-sm leading-relaxed overflow-hidden rounded-lg border border-border", className), children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex-none flex items-center justify-between border-b border-border bg-muted/50 backdrop-blur-md px-4 py-2", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx15(Terminal3, { className: "h-4 w-4 text-primary animate-pulse" }),
+        /* @__PURE__ */ jsx15("span", { className: "font-bold text-xs uppercase tracking-widest text-muted-foreground", children: "System Traces" })
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+        error && /* @__PURE__ */ jsxs13("span", { className: "text-destructive text-xs flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx15("span", { className: "w-2 h-2 rounded-full bg-destructive animate-ping" }),
+          " Error fetching logs"
+        ] }),
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            onClick: () => {
+              setIsFollowing(!isFollowing);
+              if (!isFollowing && scrollRef.current) {
+                scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+              }
+            },
+            className: cn("px-3 py-1 text-[10px] font-bold uppercase rounded-md transition-colors", isFollowing ? "bg-primary/20 text-primary border border-primary/20" : "bg-muted text-muted-foreground border border-border hover:bg-accent hover:text-foreground"),
+            children: isFollowing ? "Auto-Scroll ON" : "Auto-Scroll OFF"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll: handleScroll,
+        className: "flex-1 overflow-y-auto p-4 space-y-1",
+        children: logs.length === 0 && !error ? /* @__PURE__ */ jsx15("div", { className: "flex h-full items-center justify-center text-muted-foreground italic", children: "Waiting for orchestrator logs..." }) : logs.map((log, i) => /* @__PURE__ */ jsxs13("div", { className: "break-words", children: [
+          /* @__PURE__ */ jsxs13("span", { className: "text-muted-foreground mr-3 select-none", children: [
+            "[",
+            log.timestamp || i.toString().padStart(4, "0"),
+            "]"
+          ] }),
+          /* @__PURE__ */ jsxs13("span", { className: "text-primary/70 mr-2", children: [
+            "[",
+            log.level,
+            "]"
+          ] }),
+          /* @__PURE__ */ jsxs13("span", { className: "text-muted-foreground mr-2", children: [
+            "[",
+            log.scope,
+            "]"
+          ] }),
+          /* @__PURE__ */ jsx15("span", { className: log.level.toUpperCase() === "ERROR" || log.message.toLowerCase().includes("failed") ? "text-destructive" : log.level.toUpperCase() === "WARN" ? "text-warning" : "text-foreground", children: log.message })
+        ] }, `${log.timestamp}-${log.scope}-${i}`))
+      }
+    )
+  ] });
+}
+
+// src/dashboard/usage-summary.tsx
+import { Clock as Clock3, Layers, MessageSquare, DollarSign } from "lucide-react";
+import { StatCard } from "@tangle-network/ui/primitives";
+import { Skeleton as Skeleton2 } from "@tangle-network/ui/primitives";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function UsageSummary({ data, loading = false, className }) {
+  if (loading || !data) {
+    return /* @__PURE__ */ jsx16("div", { className: cn("grid grid-cols-2 gap-4 lg:grid-cols-4", className), children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx16(Skeleton2, { className: "h-28 rounded-xl" }, i)) });
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: cn("grid grid-cols-2 gap-4 lg:grid-cols-4", className), children: [
+    /* @__PURE__ */ jsx16(
+      StatCard,
+      {
+        variant: "sandbox",
+        title: "Compute Hours",
+        value: data.computeHours.toFixed(1),
+        subtitle: "This billing period",
+        icon: /* @__PURE__ */ jsx16(Clock3, { className: "h-5 w-5" })
+      }
+    ),
+    /* @__PURE__ */ jsx16(
+      StatCard,
+      {
+        variant: "sandbox",
+        title: "Active Sessions",
+        value: data.activeSessions,
+        subtitle: "Currently running",
+        icon: /* @__PURE__ */ jsx16(Layers, { className: "h-5 w-5" })
+      }
+    ),
+    /* @__PURE__ */ jsx16(
+      StatCard,
+      {
+        variant: "sandbox",
+        title: "Messages Sent",
+        value: data.messagesSent.toLocaleString(),
+        subtitle: "Agent interactions",
+        icon: /* @__PURE__ */ jsx16(MessageSquare, { className: "h-5 w-5" })
+      }
+    ),
+    /* @__PURE__ */ jsx16(
+      StatCard,
+      {
+        variant: "sandbox",
+        title: "Estimated Cost",
+        value: `$${data.estimatedCost.toFixed(2)}`,
+        subtitle: "This billing period",
+        icon: /* @__PURE__ */ jsx16(DollarSign, { className: "h-5 w-5" })
+      }
+    )
+  ] });
+}
+
+// src/dashboard/git-panel.tsx
+import { GitBranch, GitCommit, FileEdit, FilePlus, File } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function GitPanel({ status, log, loading = false, onRefresh, className }) {
+  if (loading) {
+    return /* @__PURE__ */ jsx17("div", { className: cn("rounded-lg border border-border bg-card p-5", className), children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx17("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
+      "Loading git info..."
+    ] }) });
+  }
+  if (!status) {
+    return /* @__PURE__ */ jsx17("div", { className: cn("rounded-lg border border-border bg-card p-5", className), children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx17(GitBranch, { className: "h-4 w-4" }),
+      "No git repository detected"
+    ] }) });
+  }
+  const changedCount = status.staged.length + status.modified.length + status.untracked.length;
+  return /* @__PURE__ */ jsxs15("div", { className: cn("rounded-lg border border-border bg-card overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b border-border bg-muted/30 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx17(GitBranch, { className: "h-4 w-4 text-primary" }),
+        /* @__PURE__ */ jsx17("span", { className: "text-sm font-bold text-foreground", children: status.branch }),
+        status.isDirty && /* @__PURE__ */ jsxs15("span", { className: "rounded-full bg-[var(--surface-warning-bg)] px-1.5 py-0.5 text-[10px] font-bold text-[var(--surface-warning-text)]", children: [
+          changedCount,
+          " change",
+          changedCount !== 1 ? "s" : ""
+        ] })
+      ] }),
+      onRefresh && /* @__PURE__ */ jsx17("button", { type: "button", onClick: onRefresh, className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: "Refresh" })
+    ] }),
+    changedCount > 0 && /* @__PURE__ */ jsx17("div", { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxs15("div", { className: "space-y-1.5", children: [
+      status.staged.map((f) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx17(FilePlus, { className: "h-3 w-3 text-[var(--surface-success-text)]" }),
+        /* @__PURE__ */ jsx17("span", { className: "font-mono text-foreground truncate", children: f }),
+        /* @__PURE__ */ jsx17("span", { className: "text-[var(--surface-success-text)] text-[10px] font-bold ml-auto", children: "STAGED" })
+      ] }, `s-${f}`)),
+      status.modified.map((f) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx17(FileEdit, { className: "h-3 w-3 text-[var(--surface-warning-text)]" }),
+        /* @__PURE__ */ jsx17("span", { className: "font-mono text-foreground truncate", children: f })
+      ] }, `m-${f}`)),
+      status.untracked.map((f) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx17(File, { className: "h-3 w-3 text-muted-foreground" }),
+        /* @__PURE__ */ jsx17("span", { className: "font-mono text-muted-foreground truncate", children: f })
+      ] }, `u-${f}`))
+    ] }) }),
+    log.length > 0 && /* @__PURE__ */ jsxs15("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsx17("div", { className: "mb-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Recent Commits" }),
+      /* @__PURE__ */ jsx17("div", { className: "space-y-2", children: log.slice(0, 5).map((commit) => /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx17(GitCommit, { className: "h-3 w-3 text-muted-foreground mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx17("span", { className: "font-mono text-primary mr-1.5", children: commit.shortSha }),
+          /* @__PURE__ */ jsx17("span", { className: "text-foreground", children: commit.message })
+        ] })
+      ] }, commit.shortSha)) })
+    ] }),
+    (status.ahead > 0 || status.behind > 0) && /* @__PURE__ */ jsxs15("div", { className: "border-t border-border px-4 py-2 flex items-center gap-3 text-xs text-muted-foreground", children: [
+      status.ahead > 0 && /* @__PURE__ */ jsxs15("span", { children: [
+        "\u2191 ",
+        status.ahead,
+        " ahead"
+      ] }),
+      status.behind > 0 && /* @__PURE__ */ jsxs15("span", { children: [
+        "\u2193 ",
+        status.behind,
+        " behind"
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/ports-list.tsx
+import * as React5 from "react";
+import { Copy as Copy2, Check as Check4, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
+  const [newPort, setNewPort] = React5.useState("");
+  const [copiedPort, setCopiedPort] = React5.useState(null);
+  const copyTimerRef = React5.useRef(null);
+  React5.useEffect(() => {
+    return () => {
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    };
+  }, []);
+  const handleCopy = async (url, port) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopiedPort(port);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopiedPort(null), 2e3);
+    } catch (err) {
+      console.warn("Clipboard write failed:", err);
+    }
+  };
+  const handleExpose = () => {
+    const port = parseInt(newPort, 10);
+    if (port > 0 && port <= 65535) {
+      onExposePort(port);
+      setNewPort("");
+    }
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: cn("space-y-4", className), children: [
+    ports.length > 0 ? /* @__PURE__ */ jsx18("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs16("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx18("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs16("tr", { children: [
+        /* @__PURE__ */ jsx18("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Port" }),
+        /* @__PURE__ */ jsx18("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Public URL" }),
+        /* @__PURE__ */ jsx18("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsx18("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground w-20" })
+      ] }) }),
+      /* @__PURE__ */ jsx18("tbody", { className: "divide-y divide-border", children: ports.map((p) => /* @__PURE__ */ jsxs16("tr", { children: [
+        /* @__PURE__ */ jsx18("td", { className: "px-4 py-3 font-mono text-xs text-foreground", children: p.port }),
+        /* @__PURE__ */ jsx18("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleCopy(p.url, p.port),
+            className: "flex items-center gap-2 font-mono text-xs text-primary hover:underline cursor-pointer group",
+            children: [
+              /* @__PURE__ */ jsx18("span", { className: "truncate max-w-[300px]", children: p.url }),
+              copiedPort === p.port ? /* @__PURE__ */ jsx18(Check4, { className: "h-3 w-3 text-[var(--surface-success-text)] shrink-0" }) : /* @__PURE__ */ jsx18(Copy2, { className: "h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx18("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx18("span", { className: cn(
+          "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+          p.status === "active" ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"
+        ), children: p.status }) }),
+        /* @__PURE__ */ jsx18("td", { className: "px-4 py-3 text-right", children: onRemovePort && /* @__PURE__ */ jsx18(
+          "button",
+          {
+            type: "button",
+            onClick: () => onRemovePort(p.port),
+            className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+            children: /* @__PURE__ */ jsx18(Trash23, { className: "h-3.5 w-3.5" })
+          }
+        ) })
+      ] }, p.port)) })
+    ] }) }) : /* @__PURE__ */ jsxs16("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+      /* @__PURE__ */ jsx18(Globe, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
+      /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: "No ports exposed yet" })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx18(
+        "input",
+        {
+          type: "number",
+          min: 1,
+          max: 65535,
+          placeholder: "Port (e.g. 3000)",
+          value: newPort,
+          onChange: (e) => setNewPort(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && handleExpose(),
+          className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        }
+      ),
+      /* @__PURE__ */ jsxs16(
+        "button",
+        {
+          type: "button",
+          onClick: handleExpose,
+          disabled: !newPort || isExposing,
+          className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx18(Plus4, { className: "h-4 w-4" }),
+            "Expose"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/dashboard/process-list.tsx
+import * as React6 from "react";
+import { Activity as Activity2, Plus as Plus5, Skull, Terminal as Terminal4 } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+function formatUptime(startedAt) {
+  if (!startedAt) return "-";
+  const ms = Date.now() - new Date(startedAt).getTime();
+  if (Number.isNaN(ms) || ms < 0) return "-";
+  if (ms < 6e4) return `${Math.floor(ms / 1e3)}s`;
+  if (ms < 36e5) return `${Math.floor(ms / 6e4)}m`;
+  return `${Math.floor(ms / 36e5)}h ${Math.floor(ms % 36e5 / 6e4)}m`;
+}
+function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
+  const [newCommand, setNewCommand] = React6.useState("");
+  const handleSpawn = () => {
+    const cmd = newCommand.trim();
+    if (cmd) {
+      onSpawn(cmd);
+      setNewCommand("");
+    }
+  };
+  return /* @__PURE__ */ jsxs17("div", { className: cn("space-y-4", className), children: [
+    loading ? /* @__PURE__ */ jsxs17("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+      /* @__PURE__ */ jsx19(Activity2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-spin mb-2" }),
+      /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: "Loading processes..." })
+    ] }) : processes.length > 0 ? /* @__PURE__ */ jsx19("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs17("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx19("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs17("tr", { children: [
+        /* @__PURE__ */ jsx19("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "PID" }),
+        /* @__PURE__ */ jsx19("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Command" }),
+        /* @__PURE__ */ jsx19("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsx19("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Uptime" }),
+        /* @__PURE__ */ jsx19("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground w-20" })
+      ] }) }),
+      /* @__PURE__ */ jsx19("tbody", { className: "divide-y divide-border", children: processes.map((p) => /* @__PURE__ */ jsxs17("tr", { children: [
+        /* @__PURE__ */ jsx19("td", { className: "px-4 py-3 font-mono text-xs text-foreground", children: p.pid }),
+        /* @__PURE__ */ jsx19("td", { className: "px-4 py-3 font-mono text-xs text-foreground truncate max-w-[250px]", children: p.command }),
+        /* @__PURE__ */ jsx19("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx19("span", { className: cn(
+          "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+          p.running ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-muted text-muted-foreground"
+        ), children: p.running ? "running" : `exited (${p.exitCode ?? "?"})` }) }),
+        /* @__PURE__ */ jsx19("td", { className: "px-4 py-3 font-mono text-xs text-muted-foreground", children: formatUptime(p.startedAt) }),
+        /* @__PURE__ */ jsx19("td", { className: "px-4 py-3 text-right", children: p.running && /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            onClick: () => onKill(p.pid),
+            className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+            title: "Kill process",
+            children: /* @__PURE__ */ jsx19(Skull, { className: "h-3.5 w-3.5" })
+          }
+        ) })
+      ] }, `${p.pid}-${p.startedAt ?? p.command}`)) })
+    ] }) }) : /* @__PURE__ */ jsxs17("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+      /* @__PURE__ */ jsx19(Terminal4, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
+      /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: "No processes running" })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx19(
+        "input",
+        {
+          type: "text",
+          placeholder: "Command (e.g. node server.js)",
+          value: newCommand,
+          onChange: (e) => setNewCommand(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && handleSpawn(),
+          className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        }
+      ),
+      /* @__PURE__ */ jsxs17(
+        "button",
+        {
+          type: "button",
+          onClick: handleSpawn,
+          disabled: !newCommand.trim(),
+          className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx19(Plus5, { className: "h-4 w-4" }),
+            "Spawn"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/dashboard/network-config.tsx
+import * as React7 from "react";
+import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function NetworkConfig({ config, onUpdate, loading = false, className }) {
+  const [newCidr, setNewCidr] = React7.useState("");
+  const isValidCidr = (value) => {
+    const match = value.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/);
+    if (!match) return false;
+    const octets = [match[1], match[2], match[3], match[4]].map(Number);
+    const prefix = Number(match[5]);
+    return octets.every((o) => o <= 255) && prefix <= 32;
+  };
+  const handleAddCidr = () => {
+    const cidr = newCidr.trim();
+    if (cidr && config && isValidCidr(cidr) && !config.allowList.includes(cidr)) {
+      onUpdate({ allowList: [...config.allowList, cidr] });
+      setNewCidr("");
+    }
+  };
+  const handleRemoveCidr = (cidr) => {
+    if (config) {
+      onUpdate({ allowList: config.allowList.filter((c) => c !== cidr) });
+    }
+  };
+  if (loading || !config) {
+    return /* @__PURE__ */ jsxs18("div", { className: cn("rounded-lg border border-border bg-muted/20 p-6 text-center", className), children: [
+      /* @__PURE__ */ jsx20(Network2, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
+      /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground", children: "Loading network configuration..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs18("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx20(ShieldAlert, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium text-foreground", children: "Block Outbound Traffic" }),
+          /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: "Prevent the sandbox from making external network requests" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": config.blockOutbound,
+          "aria-label": "Block outbound traffic",
+          onClick: () => onUpdate({ blockOutbound: !config.blockOutbound }),
+          className: cn(
+            "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+            config.blockOutbound ? "bg-destructive" : "bg-muted"
+          ),
+          children: /* @__PURE__ */ jsx20(
+            "span",
+            {
+              className: cn(
+                "inline-block h-4 w-4 rounded-full bg-white transition-transform shadow-sm",
+                config.blockOutbound ? "translate-x-6" : "translate-x-1"
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs18("div", { children: [
+      /* @__PURE__ */ jsx20("h4", { className: "text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider", children: "Allowlist (CIDR)" }),
+      config.allowList.length > 0 ? /* @__PURE__ */ jsx20("div", { className: "space-y-1.5 mb-3", children: config.allowList.map((cidr) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between rounded border border-border bg-muted/20 px-3 py-2", children: [
+        /* @__PURE__ */ jsx20("span", { className: "font-mono text-xs text-foreground", children: cidr }),
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveCidr(cidr),
+            className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+            children: /* @__PURE__ */ jsx20(Trash24, { className: "h-3 w-3" })
+          }
+        )
+      ] }, cidr)) }) : /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground mb-3", children: "No CIDR rules configured. All traffic is allowed." }),
+      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx20(
+          "input",
+          {
+            type: "text",
+            placeholder: "CIDR (e.g. 10.0.0.0/8)",
+            value: newCidr,
+            onChange: (e) => setNewCidr(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleAddCidr(),
+            className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            onClick: handleAddCidr,
+            disabled: !newCidr.trim(),
+            className: "inline-flex items-center gap-2 rounded-lg bg-primary/20 border border-primary/30 px-4 py-2 text-sm font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx20(Plus6, { className: "h-4 w-4" }),
+              "Add"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/backend-config.tsx
+import * as React8 from "react";
+import { Bot, Plus as Plus7, RefreshCw as RefreshCw2, Trash2 as Trash25, Server, Wrench } from "lucide-react";
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function BackendConfig({
+  status,
+  mcpServers,
+  onAddMcp,
+  onRemoveMcp,
+  onRestart,
+  loading = false,
+  className
+}) {
+  const [showAddMcp, setShowAddMcp] = React8.useState(false);
+  const [mcpName, setMcpName] = React8.useState("");
+  const [mcpCommand, setMcpCommand] = React8.useState("");
+  const [mcpArgs, setMcpArgs] = React8.useState("");
+  const handleAddMcp = () => {
+    const name = mcpName.trim();
+    const command = mcpCommand.trim();
+    if (name && command) {
+      onAddMcp({
+        name,
+        command,
+        args: mcpArgs.trim() ? mcpArgs.trim().split(/\s+/) : void 0
+      });
+      setMcpName("");
+      setMcpCommand("");
+      setMcpArgs("");
+      setShowAddMcp(false);
+    }
+  };
+  if (loading || !status) {
+    return /* @__PURE__ */ jsxs19("div", { className: cn("rounded-lg border border-border bg-muted/20 p-6 text-center", className), children: [
+      /* @__PURE__ */ jsx21(Bot, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
+      /* @__PURE__ */ jsx21("p", { className: "text-sm text-muted-foreground", children: "Loading backend status..." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs19("div", { className: "rounded-lg border border-border bg-card overflow-hidden", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "px-4 py-3 border-b border-border bg-muted/30 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx21("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Agent Status" }),
+        /* @__PURE__ */ jsxs19(
+          "button",
+          {
+            type: "button",
+            onClick: onRestart,
+            className: "inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted/80 transition-colors border border-border",
+            children: [
+              /* @__PURE__ */ jsx21(RefreshCw2, { className: "h-3 w-3" }),
+              "Restart"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx21("div", { className: "p-4", children: /* @__PURE__ */ jsxs19("dl", { className: "grid grid-cols-[100px_1fr] gap-y-3 text-sm", children: [
+        /* @__PURE__ */ jsx21("dt", { className: "text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsx21("dd", { children: /* @__PURE__ */ jsx21("span", { className: cn(
+          "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+          status.running ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : "bg-destructive/10 text-destructive"
+        ), children: status.running ? "Running" : "Stopped" }) }),
+        /* @__PURE__ */ jsx21("dt", { className: "text-muted-foreground", children: "Model" }),
+        /* @__PURE__ */ jsx21("dd", { className: "font-mono text-xs", children: status.model ?? "Default" }),
+        status.provider && /* @__PURE__ */ jsxs19(Fragment9, { children: [
+          /* @__PURE__ */ jsx21("dt", { className: "text-muted-foreground", children: "Provider" }),
+          /* @__PURE__ */ jsx21("dd", { className: "font-mono text-xs", children: status.provider })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "rounded-lg border border-border bg-card overflow-hidden", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "px-4 py-3 border-b border-border bg-muted/30 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs19("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx21(Wrench, { className: "h-3.5 w-3.5" }),
+          "MCP Servers"
+        ] }),
+        /* @__PURE__ */ jsxs19(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowAddMcp(!showAddMcp),
+            className: "inline-flex items-center gap-1.5 rounded-md bg-primary/20 border border-primary/30 px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx21(Plus7, { className: "h-3 w-3" }),
+              "Add"
+            ]
+          }
+        )
+      ] }),
+      mcpServers.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "divide-y divide-border", children: mcpServers.map((s) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between px-4 py-3", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsx21(Server, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium text-foreground truncate", children: s.name }),
+            /* @__PURE__ */ jsxs19("p", { className: "text-xs font-mono text-muted-foreground truncate", children: [
+              s.command,
+              " ",
+              s.args?.join(" ") ?? ""
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 shrink-0", children: [
+          s.status && /* @__PURE__ */ jsx21("span", { className: cn(
+            "inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase",
+            s.status === "running" ? "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]" : s.status === "error" ? "bg-destructive/10 text-destructive" : "bg-muted text-muted-foreground"
+          ), children: s.status }),
+          /* @__PURE__ */ jsx21(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemoveMcp(s.name),
+              className: "p-1 text-muted-foreground hover:text-destructive transition-colors rounded",
+              children: /* @__PURE__ */ jsx21(Trash25, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }, s.name)) }) : /* @__PURE__ */ jsx21("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsx21("p", { className: "text-xs text-muted-foreground", children: "No MCP servers configured" }) }),
+      showAddMcp && /* @__PURE__ */ jsxs19("div", { className: "p-4 border-t border-border bg-muted/10 space-y-2", children: [
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "text",
+            placeholder: "Server name",
+            value: mcpName,
+            onChange: (e) => setMcpName(e.target.value),
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "text",
+            placeholder: "Command (e.g. npx @server/mcp)",
+            value: mcpCommand,
+            onChange: (e) => setMcpCommand(e.target.value),
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "input",
+          {
+            type: "text",
+            placeholder: "Arguments (space-separated, optional)",
+            value: mcpArgs,
+            onChange: (e) => setMcpArgs(e.target.value),
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        ),
+        /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx21(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowAddMcp(false),
+              className: "rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            "button",
+            {
+              type: "button",
+              onClick: handleAddMcp,
+              disabled: !mcpName.trim() || !mcpCommand.trim(),
+              className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+              children: "Add Server"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dashboard/snapshot-list.tsx
+import * as React9 from "react";
+import { Camera, Clock as Clock4, HardDrive, Plus as Plus8, RotateCcw } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function formatBytes(bytes) {
+  if (bytes == null || bytes < 0) return "-";
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
+}
+function formatDate(dateStr) {
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) return dateStr;
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
+  const [showCreate, setShowCreate] = React9.useState(false);
+  const [tags, setTags] = React9.useState("");
+  const handleCreate = () => {
+    const tagList = tags.trim() ? tags.trim().split(",").map((t) => t.trim()).filter(Boolean) : void 0;
+    onCreate(tagList);
+    setTags("");
+    setShowCreate(false);
+  };
+  return /* @__PURE__ */ jsxs20("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx22("h3", { className: "text-sm font-bold text-foreground", children: "Snapshots" }),
+      /* @__PURE__ */ jsxs20(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowCreate(!showCreate),
+          className: "inline-flex items-center gap-1.5 rounded-lg bg-primary/20 border border-primary/30 px-3 py-1.5 text-xs font-medium text-primary hover:bg-primary hover:text-primary-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ jsx22(Plus8, { className: "h-3.5 w-3.5" }),
+            "Create Snapshot"
+          ]
+        }
+      )
+    ] }),
+    showCreate && /* @__PURE__ */ jsxs20("div", { className: "rounded-lg border border-primary/20 bg-primary/5 p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx22("p", { className: "text-sm text-foreground font-medium", children: "Create a new snapshot of the current sandbox state." }),
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          type: "text",
+          placeholder: "Tags (comma-separated, optional)",
+          value: tags,
+          onChange: (e) => setTags(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && handleCreate(),
+          className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        }
+      ),
+      /* @__PURE__ */ jsxs20("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx22(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowCreate(false),
+            className: "rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxs20(
+          "button",
+          {
+            type: "button",
+            onClick: handleCreate,
+            className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx22(Camera, { className: "h-3 w-3 mr-1.5 inline" }),
+              "Create"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    loading ? /* @__PURE__ */ jsxs20("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+      /* @__PURE__ */ jsx22(Camera, { className: "mx-auto h-6 w-6 text-muted-foreground animate-pulse mb-2" }),
+      /* @__PURE__ */ jsx22("p", { className: "text-sm text-muted-foreground", children: "Loading snapshots..." })
+    ] }) : snapshots.length > 0 ? /* @__PURE__ */ jsx22("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ jsxs20("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx22("thead", { className: "bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsxs20("tr", { children: [
+        /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "ID" }),
+        /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Created" }),
+        /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Size" }),
+        /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Tags" }),
+        /* @__PURE__ */ jsx22("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground w-24" })
+      ] }) }),
+      /* @__PURE__ */ jsx22("tbody", { className: "divide-y divide-border", children: snapshots.map((s) => /* @__PURE__ */ jsxs20("tr", { children: [
+        /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 font-mono text-xs text-foreground", children: s.id.slice(0, 12) }),
+        /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx22(Clock4, { className: "h-3 w-3" }),
+          formatDate(s.createdAt)
+        ] }) }),
+        /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx22(HardDrive, { className: "h-3 w-3" }),
+          formatBytes(s.sizeBytes)
+        ] }) }),
+        /* @__PURE__ */ jsx22("td", { className: "px-4 py-3", children: s.tags?.length ? /* @__PURE__ */ jsx22("div", { className: "flex items-center gap-1 flex-wrap", children: s.tags.map((tag) => /* @__PURE__ */ jsx22("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground border border-border", children: tag }, tag)) }) : /* @__PURE__ */ jsx22("span", { className: "text-xs text-muted-foreground", children: "-" }) }),
+        /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsxs20(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRestore(s.id),
+              className: "inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted/80 transition-colors border border-border",
+              title: "Restore to new sandbox",
+              children: [
+                /* @__PURE__ */ jsx22(RotateCcw, { className: "h-3 w-3" }),
+                "Restore"
+              ]
+            }
+          ),
+          onSaveAsTemplate && /* @__PURE__ */ jsx22(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSaveAsTemplate(s.id),
+              className: "inline-flex items-center gap-1.5 rounded-md bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary/20 transition-colors border border-primary/20",
+              title: "Save as reusable template",
+              children: "Save as Template"
+            }
+          )
+        ] }) })
+      ] }, s.id)) })
+    ] }) }) : /* @__PURE__ */ jsxs20("div", { className: "rounded-lg border border-border bg-muted/20 p-6 text-center", children: [
+      /* @__PURE__ */ jsx22(Camera, { className: "mx-auto h-8 w-8 text-muted-foreground mb-2" }),
+      /* @__PURE__ */ jsx22("p", { className: "text-sm text-muted-foreground", children: "No snapshots yet" }),
+      /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground mt-1", children: "Create a snapshot to save the current state of your sandbox." })
+    ] })
+  ] });
+}
+
+// src/dashboard/promo-banner.tsx
+import { Fragment as Fragment10, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+function PromoBanner({
+  title,
+  description,
+  buttonLabel,
+  href,
+  onClick,
+  icon,
+  disabled = false,
+  className
+}) {
+  const buttonClasses = cn(
+    "mt-6 inline-flex items-center gap-2 rounded-md border border-white/20 bg-[var(--btn-primary-bg)] px-4 py-2 text-sm font-medium text-[var(--btn-primary-text)] transition-colors",
+    disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--btn-primary-hover)]"
+  );
+  const buttonContent = /* @__PURE__ */ jsxs21(Fragment10, { children: [
+    buttonLabel,
+    /* @__PURE__ */ jsxs21("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [
+      /* @__PURE__ */ jsx23("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx23("path", { d: "m12 5 7 7-7 7" })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs21("div", { className: cn("relative overflow-hidden rounded-xl bg-[var(--brand-strong)] p-8 md:flex md:items-center md:justify-between", className), children: [
+    /* @__PURE__ */ jsxs21("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx23("h3", { className: "text-xl font-bold text-[var(--brand-strong-text)]", children: title }),
+      /* @__PURE__ */ jsx23("p", { className: "mt-2 max-w-md text-sm text-[var(--brand-strong-text-muted)]", children: description }),
+      href && !disabled ? /* @__PURE__ */ jsx23("a", { href, target: "_blank", rel: "noopener noreferrer", onClick, className: buttonClasses, children: buttonContent }) : /* @__PURE__ */ jsx23("button", { type: "button", onClick, disabled, className: buttonClasses, children: buttonContent })
+    ] }),
+    icon && /* @__PURE__ */ jsx23("div", { className: "relative z-10 mt-6 flex items-center md:mt-0", children: /* @__PURE__ */ jsx23("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 bg-white/10", children: icon }) }),
+    /* @__PURE__ */ jsx23("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white/5 to-transparent" })
+  ] });
+}
+
+export {
+  SIDEBAR_RAIL_WIDTH,
+  SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_TOTAL_WIDTH,
+  SIDEBAR_MOBILE_WIDTH,
+  SidebarProvider,
+  useSidebar,
+  Sidebar,
+  SidebarRail,
+  SidebarRailHeader,
+  SidebarRailNav,
+  SidebarRailFooter,
+  RailSeparator,
+  RailButton,
+  RailModeButton,
+  SidebarPanel,
+  SidebarPanelHeader,
+  SidebarPanelContent,
+  SidebarContent,
+  ProfileAvatar,
+  CreditBalance,
+  ClusterStatusBar,
+  ResourceMeter,
+  canAdminSandbox,
+  SandboxCard,
+  NewSandboxCard,
+  SandboxTable,
+  InvoiceTable,
+  PlanCards,
+  BackendSelector,
+  HARNESS_OPTIONS,
+  HarnessPicker,
+  DashboardLayout,
+  ProfileSelector,
+  ProfileComparison,
+  VariantList,
+  SystemLogsViewer,
+  UsageSummary,
+  GitPanel,
+  PortsList,
+  ProcessList,
+  NetworkConfig,
+  BackendConfig,
+  SnapshotList,
+  PromoBanner
+};