@tangle-network/sandbox-ui 0.4.0 → 0.5.1

package/dist/pages.js

@@ -5,7 +5,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-SULQQJPB.js";
+} from "./chunk-YS66Q3RC.js";
 import {
   Tabs,
   TabsContent,
@@ -15,23 +15,23 @@ import {
 import {
   EmptyState,
   Input
-} from "./chunk-MUOL44AE.js";
+} from "./chunk-BRBTD7RH.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-ZP6GSX4D.js";
+} from "./chunk-565V6JTN.js";
 import {
   Skeleton,
   SkeletonCard
-} from "./chunk-FRGMMANX.js";
+} from "./chunk-YYGECNZZ.js";
 import {
   Badge,
   Card
-} from "./chunk-MXCSSOGH.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   Button
-} from "./chunk-HWLX5NME.js";
+} from "./chunk-TSE423UF.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -265,8 +265,7 @@ function BillingPage({
       {
         data: data.usageHistory,
         title: "Credit Usage History",
-        unit: "credits",
-        variant
+        unit: "credits"
       }
     ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-xl border border-border bg-card p-12 text-center", children: [
       /* @__PURE__ */ jsxs(
@@ -295,13 +294,33 @@ function BillingPage({
 
 // src/pages/provisioning-wizard.tsx
 import * as React2 from "react";
+import { ArrowLeft, ArrowRight, Layers, Cpu, Bot, Info } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function MaterialIcon({ name, className }) {
-  return /* @__PURE__ */ jsx2("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
+var STACK_DISPLAY = {
+  universal: { name: "Universal", abbr: "U", color: "violet", textClass: "text-[var(--surface-violet-text)]" },
+  ethereum: { name: "Ethereum", abbr: "\u039E", color: "blue", textClass: "text-[var(--surface-info-text)]" },
+  solana: { name: "Solana", abbr: "S", color: "green", textClass: "text-[var(--surface-success-text)]" },
+  tangle: { name: "Tangle", abbr: "T", color: "purple", textClass: "text-[var(--surface-violet-text)]" },
+  "ai-sdk": { name: "AI SDK", abbr: "AI", color: "teal", textClass: "text-[var(--surface-teal-text)]" },
+  rust: { name: "Rust", abbr: "Rs", color: "orange", textClass: "text-[var(--surface-orange-text)]" }
+};
+function resolveEnvironment(env) {
+  const display = STACK_DISPLAY[env.id];
+  const name = display?.name ?? (env.id.length > 0 ? env.id.charAt(0).toUpperCase() + env.id.slice(1).replace(/-/g, " ") : "Unknown");
+  const abbr = display?.abbr ?? (env.id.length > 0 ? env.id[0].toUpperCase() : "?");
+  const color = display?.color ?? "slate";
+  const textClass = display?.textClass ?? "text-[var(--text-muted)]";
+  return {
+    id: env.id,
+    name,
+    description: env.description ?? `${name} development environment`,
+    icon: /* @__PURE__ */ jsx2("span", { className: `${textClass} text-2xl font-bold`, children: abbr }),
+    color
+  };
 }
 var defaultEnvironments = [
-  { id: "node", name: "Node.js", description: "v20.x LTS with optimized runtime for asynchronous event-driven agents.", icon: /* @__PURE__ */ jsx2("span", { className: "text-green-400 text-2xl font-bold", children: "N" }), color: "green" },
-  { id: "python", name: "Python", description: "v3.11 pre-installed with PyTorch and common data science libraries.", icon: /* @__PURE__ */ jsx2("span", { className: "text-blue-400 text-2xl font-bold", children: "Py" }), color: "blue" },
+  { id: "node", name: "Node.js", description: "v20.x LTS with optimized runtime for asynchronous event-driven agents.", icon: /* @__PURE__ */ jsx2("span", { className: "text-[var(--code-success)] text-2xl font-bold", children: "N" }), color: "green" },
+  { id: "python", name: "Python", description: "v3.11 pre-installed with PyTorch and common data science libraries.", icon: /* @__PURE__ */ jsx2("span", { className: "text-sky-400 text-2xl font-bold", children: "Py" }), color: "blue" },
   { id: "ubuntu", name: "Ubuntu", description: "Full 22.04 LTS terminal access for custom containerized workloads.", icon: /* @__PURE__ */ jsx2("span", { className: "text-orange-400 text-2xl font-bold", children: "U" }), color: "orange" }
 ];
 var STEPS = ["Stack", "Resources", "Agent", "Review"];
@@ -315,18 +334,29 @@ function calcCost(cpu, ram) {
   const cost = cpu * 0.045 + ram * 5e-3;
   return cost.toFixed(2);
 }
+var sectionIcon = "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--brand-cool)]";
 function ProvisioningWizard({
-  environments = defaultEnvironments,
+  environments: environmentsProp,
+  onLoadEnvironments,
   onSubmit,
   onBack,
   className
 }) {
+  const [envList, setEnvList] = React2.useState(environmentsProp ?? defaultEnvironments);
+  React2.useEffect(() => {
+    if (onLoadEnvironments) {
+      onLoadEnvironments().then((entries) => setEnvList(entries.map(resolveEnvironment)));
+    } else if (environmentsProp) {
+      setEnvList(environmentsProp);
+    }
+  }, [onLoadEnvironments, environmentsProp]);
+  const environments = envList;
   const [step, setStep] = React2.useState(0);
   const [selectedEnv, setSelectedEnv] = React2.useState(environments[0]?.id ?? "");
   const [cpuCores, setCpuCores] = React2.useState(4);
   const [ramGB, setRamGB] = React2.useState(16);
   const [storageGB, setStorageGB] = React2.useState(128);
-  const [modelTier, setModelTier] = React2.useState("llama-3-8b");
+  const [modelTier, setModelTier] = React2.useState("claude-sonnet");
   const [systemPrompt, setSystemPrompt] = React2.useState("");
   const handleNext = () => {
     if (step < STEPS.length - 1) setStep(step + 1);
@@ -338,24 +368,24 @@ function ProvisioningWizard({
   };
   const hourCost = calcCost(cpuCores, ramGB);
   return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "mb-12", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-extrabold tracking-tight text-white mb-2", children: "Sandbox Provisioning" }),
-      /* @__PURE__ */ jsx2("p", { className: "text-on-surface-variant max-w-2xl", children: "Configure your high-performance orchestration environment. Select your stack, allocate resources, and prime your agent for deployment." })
+    /* @__PURE__ */ jsxs2("div", { className: "mb-10", children: [
+      /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-extrabold tracking-tight text-[var(--text-primary)] mb-2", children: "Sandbox Provisioning" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-muted)] max-w-2xl", children: "Configure your high-performance orchestration environment. Select your stack, allocate resources, and prime your agent for deployment." })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-4 gap-4 mb-12", children: STEPS.map((label, i) => /* @__PURE__ */ jsxs2("div", { className: "relative pt-4", children: [
-      /* @__PURE__ */ jsx2("div", { className: cn("h-1 w-full rounded-full", i <= step ? "bg-md3-primary" : i === step + 1 ? "bg-md3-primary/40" : "bg-surface-container-highest") }),
-      /* @__PURE__ */ jsxs2("span", { className: cn("absolute top-0 left-0 font-mono text-[10px] uppercase tracking-widest font-bold", i <= step ? "text-md3-primary" : "text-surface-variant"), children: [
+    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-4 gap-4 mb-10", children: STEPS.map((label, i) => /* @__PURE__ */ jsxs2("div", { className: "relative pt-5", children: [
+      /* @__PURE__ */ jsx2("div", { className: cn("h-1 w-full rounded-full transition-colors", i <= step ? "bg-[var(--brand-cool)]" : "bg-[var(--depth-3)]") }),
+      /* @__PURE__ */ jsxs2("span", { className: cn("absolute top-0 left-0 font-mono text-[10px] uppercase tracking-widest font-bold transition-colors", i <= step ? "text-[var(--brand-cool)]" : "text-[var(--text-muted)]"), children: [
         String(i + 1).padStart(2, "0"),
         " ",
         label
       ] })
     ] }, label)) }),
     /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-8 items-start", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 space-y-8", children: [
-        /* @__PURE__ */ jsxs2("section", { className: "bg-surface-container-low rounded-xl p-8 shadow-sm", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 space-y-6", children: [
+        /* @__PURE__ */ jsxs2("section", { className: "bg-[var(--depth-2)] rounded-xl p-8 border border-[var(--border-subtle)]", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
-            /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-lg bg-md3-primary/10 flex items-center justify-center text-md3-primary", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "layers" }) }),
-            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold", children: "Environment Selection" })
+            /* @__PURE__ */ jsx2("div", { className: sectionIcon, children: /* @__PURE__ */ jsx2(Layers, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "Environment Selection" })
           ] }),
           /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: environments.map((env) => /* @__PURE__ */ jsxs2(
             "button",
@@ -363,139 +393,79 @@ function ProvisioningWizard({
               type: "button",
               onClick: () => setSelectedEnv(env.id),
               className: cn(
-                "group relative p-6 rounded-xl bg-surface-container cursor-pointer hover:bg-surface-container-high transition-all text-left",
-                selectedEnv === env.id ? "border border-md3-primary/20" : "border border-outline-variant/10"
+                "group relative p-5 rounded-xl bg-[var(--depth-3)] cursor-pointer hover:bg-[var(--depth-4)] transition-all text-left border",
+                selectedEnv === env.id ? "border-[var(--border-accent)]" : "border-[var(--border-subtle)]"
               ),
               children: [
                 /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-4", children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("w-12 h-12 rounded-full flex items-center justify-center", `bg-${env.color}-500/10`), children: env.icon }),
-                  /* @__PURE__ */ jsx2("div", { className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center", selectedEnv === env.id ? "border-md3-primary" : "border-outline-variant/30"), children: selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "w-2.5 h-2.5 bg-md3-primary rounded-full" }) })
+                  /* @__PURE__ */ jsx2("div", { className: "w-12 h-12 rounded-full flex items-center justify-center bg-[var(--depth-1)]", children: env.icon }),
+                  /* @__PURE__ */ jsx2("div", { className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center", selectedEnv === env.id ? "border-[var(--brand-cool)]" : "border-[var(--border-default)]"), children: selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "w-2.5 h-2.5 bg-[var(--brand-cool)] rounded-full" }) })
                 ] }),
-                /* @__PURE__ */ jsx2("h3", { className: "font-bold text-lg mb-1", children: env.name }),
-                /* @__PURE__ */ jsx2("p", { className: "text-xs text-on-surface-variant leading-relaxed", children: env.description })
+                /* @__PURE__ */ jsx2("h3", { className: "font-bold text-base mb-1 text-[var(--text-primary)]", children: env.name }),
+                /* @__PURE__ */ jsx2("p", { className: "text-xs text-[var(--text-muted)] leading-relaxed", children: env.description })
               ]
             },
             env.id
           )) })
         ] }),
-        /* @__PURE__ */ jsxs2("section", { className: "bg-surface-container-low rounded-xl p-8 shadow-sm", children: [
+        /* @__PURE__ */ jsxs2("section", { className: "bg-[var(--depth-2)] rounded-xl p-8 border border-[var(--border-subtle)]", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
-            /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-lg bg-md3-primary/10 flex items-center justify-center text-md3-primary", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "memory" }) }),
-            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold", children: "Resource Allocation" })
+            /* @__PURE__ */ jsx2("div", { className: sectionIcon, children: /* @__PURE__ */ jsx2(Cpu, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "Resource Allocation" })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "space-y-10", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
-                /* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-on-surface-variant", children: "Compute Cores (CPU)" }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-md3-primary", children: [
-                  cpuCores,
-                  " ",
-                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-on-surface-variant", children: "vCPUs" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  type: "range",
-                  min: CPU_MIN,
-                  max: CPU_MAX,
-                  step: 0.5,
-                  value: cpuCores,
-                  onChange: (e) => setCpuCores(+e.target.value),
-                  className: "w-full h-2 bg-surface-container-highest rounded-full appearance-none cursor-pointer accent-violet-500"
-                }
-              ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-surface-variant", children: [
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  CPU_MIN,
-                  " vCPU"
-                ] }),
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  CPU_MAX,
-                  " vCPU"
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
-                /* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-on-surface-variant", children: "Memory (RAM)" }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-md3-primary", children: [
-                  ramGB,
-                  " ",
-                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-on-surface-variant", children: "GB" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  type: "range",
-                  min: RAM_MIN,
-                  max: RAM_MAX,
-                  step: 1,
-                  value: ramGB,
-                  onChange: (e) => setRamGB(+e.target.value),
-                  className: "w-full h-2 bg-surface-container-highest rounded-full appearance-none cursor-pointer accent-violet-500"
-                }
-              ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-surface-variant", children: [
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  RAM_MIN,
-                  " GB"
-                ] }),
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  RAM_MAX,
-                  " GB"
-                ] })
+          /* @__PURE__ */ jsx2("div", { className: "space-y-8", children: [
+            { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: CPU_MAX, step: 0.5, unit: "vCPUs" },
+            { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: RAM_MAX, step: 1, unit: "GB" },
+            { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: STORAGE_MAX, step: 8, unit: "GB" }
+          ].map(({ label, value, setter, min, max, step: s, unit }) => /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
+              /* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]", children: label }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-[var(--brand-cool)]", children: [
+                value,
+                " ",
+                /* @__PURE__ */ jsx2("span", { className: "text-xs text-[var(--text-muted)]", children: unit })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
-                /* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-on-surface-variant", children: "Ephemeral Storage" }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-md3-primary", children: [
-                  storageGB,
-                  " ",
-                  /* @__PURE__ */ jsx2("span", { className: "text-xs text-on-surface-variant", children: "GB" })
-                ] })
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "range",
+                min,
+                max,
+                step: s,
+                value,
+                onChange: (e) => setter(+e.target.value),
+                className: "w-full h-2 bg-[var(--depth-1)] rounded-full appearance-none cursor-pointer accent-[var(--brand-cool)]"
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-[var(--text-muted)]", children: [
+              /* @__PURE__ */ jsxs2("span", { children: [
+                min,
+                " ",
+                unit
               ] }),
-              /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  type: "range",
-                  min: STORAGE_MIN,
-                  max: STORAGE_MAX,
-                  step: 8,
-                  value: storageGB,
-                  onChange: (e) => setStorageGB(+e.target.value),
-                  className: "w-full h-2 bg-surface-container-highest rounded-full appearance-none cursor-pointer accent-violet-500"
-                }
-              ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-surface-variant", children: [
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  STORAGE_MIN,
-                  " GB"
-                ] }),
-                /* @__PURE__ */ jsxs2("span", { children: [
-                  STORAGE_MAX,
-                  " GB"
-                ] })
+              /* @__PURE__ */ jsxs2("span", { children: [
+                max,
+                " ",
+                unit
               ] })
             ] })
-          ] })
+          ] }, label)) })
         ] }),
-        /* @__PURE__ */ jsxs2("section", { className: "bg-surface-container-low rounded-xl p-8 shadow-sm", children: [
+        /* @__PURE__ */ jsxs2("section", { className: "bg-[var(--depth-2)] rounded-xl p-8 border border-[var(--border-subtle)]", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
-            /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-lg bg-md3-primary/10 flex items-center justify-center text-md3-primary", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "smart_toy" }) }),
-            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold", children: "AI Agent Configuration" })
+            /* @__PURE__ */ jsx2("div", { className: sectionIcon, children: /* @__PURE__ */ jsx2(Bot, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "AI Agent Configuration" })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
             /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-on-surface-variant mb-3", children: "Model Tier" }),
+              /* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-3", children: "Model Tier" }),
               /* @__PURE__ */ jsxs2(
                 "select",
                 {
                   value: modelTier,
                   onChange: (e) => setModelTier(e.target.value),
-                  className: "w-full bg-surface-container-highest border-none rounded-xl h-12 px-4 font-mono text-sm focus:ring-2 focus:ring-md3-primary/40 text-on-surface",
+                  className: "w-full bg-[var(--depth-1)] border border-[var(--border-subtle)] rounded-xl h-12 px-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)] text-[var(--text-primary)]",
                   children: [
                     /* @__PURE__ */ jsx2("option", { value: "llama-3-8b", children: "Llama-3-8B-Instruct (Lightweight)" }),
                     /* @__PURE__ */ jsx2("option", { value: "mistral-7b", children: "Mistral-7B-v0.2 (Efficient)" }),
@@ -505,13 +475,13 @@ function ProvisioningWizard({
               )
             ] }),
             /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-on-surface-variant mb-3", children: "Initial System Prompt" }),
+              /* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-3", children: "Initial System Prompt" }),
               /* @__PURE__ */ jsx2(
                 "textarea",
                 {
                   value: systemPrompt,
                   onChange: (e) => setSystemPrompt(e.target.value),
-                  className: "w-full bg-surface-container-lowest border-none rounded-xl p-6 font-mono text-sm focus:ring-2 focus:ring-md3-primary/40 h-40 resize-none text-primary-fixed-dim",
+                  className: "w-full bg-[var(--depth-1)] border border-[var(--border-subtle)] rounded-xl p-5 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)] h-40 resize-none text-[var(--text-primary)] placeholder:text-[var(--text-muted)]",
                   placeholder: "Define the core persona of your agent..."
                 }
               )
@@ -519,88 +489,80 @@ function ProvisioningWizard({
           ] })
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center py-4", children: [
-          /* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleBack, className: "px-8 py-3 rounded-xl border border-outline-variant/20 hover:bg-surface-container-high transition-colors text-sm font-bold flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx2(MaterialIcon, { name: "arrow_back", className: "text-lg" }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleBack, className: "px-8 py-3 rounded-xl border border-[var(--border-subtle)] hover:bg-[var(--depth-3)] transition-colors text-sm font-bold text-[var(--text-secondary)] flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-4 w-4" }),
             "Back"
           ] }),
-          /* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleNext, className: "px-10 py-3 bg-gradient-to-br from-md3-primary to-primary-container text-on-primary font-bold rounded-xl shadow-lg shadow-md3-primary/20 flex items-center gap-2 group", children: [
-            step < STEPS.length - 1 ? "Continue to Review" : "Launch Sandbox",
-            /* @__PURE__ */ jsx2(MaterialIcon, { name: "arrow_forward", className: "group-hover:translate-x-1 transition-transform" })
+          /* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleNext, className: "px-10 py-3 bg-[var(--accent-surface-soft)] border border-[var(--border-accent)] text-[var(--accent-text)] font-bold rounded-xl hover:bg-[var(--accent-surface-strong)] active:scale-95 transition-all flex items-center gap-2 group", children: [
+            step < STEPS.length - 1 ? "Continue" : "Launch Sandbox",
+            /* @__PURE__ */ jsx2(ArrowRight, { className: "h-4 w-4 group-hover:translate-x-1 transition-transform" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-24 space-y-8", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "bg-surface-container-lowest rounded-xl overflow-hidden shadow-2xl", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "bg-surface-container-high px-4 py-3 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-red-500/50" }),
-              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-yellow-500/50" }),
-              /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-green-500/50" })
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-slate-500 uppercase tracking-tighter", children: "config_stream.sh" }),
-            /* @__PURE__ */ jsx2("div", {})
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "p-6 font-mono text-xs space-y-3 min-h-[300px]", children: [
-            /* @__PURE__ */ jsx2("div", { className: "text-green-400", children: "$ tangle-cli provision --new" }),
-            /* @__PURE__ */ jsx2("div", { className: "text-slate-500", children: "Initializing handshake..." }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
+      /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-24 space-y-6", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "bg-[var(--depth-2)] rounded-xl overflow-hidden border border-[var(--border-subtle)]", children: [
+          /* @__PURE__ */ jsx2("div", { className: "bg-[var(--depth-1)] border-b border-[var(--border-subtle)] px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-[var(--text-muted)] uppercase tracking-tighter", children: "config_stream.sh" }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "p-6 font-mono text-xs space-y-3 min-h-[280px]", children: [
+            /* @__PURE__ */ jsx2("div", { className: "text-[var(--code-success)]", children: "$ tangle-cli provision --new" }),
+            /* @__PURE__ */ jsx2("div", { className: "text-[var(--text-muted)]", children: "Initializing handshake..." }),
+            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
               " Platform: ",
-              /* @__PURE__ */ jsx2("span", { className: "text-white", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" })
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-primary)]", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
+            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
               " Compute: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-white", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-primary)]", children: [
                 cpuCores,
                 " vCPUs"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
+            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
               " Memory: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-white", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-primary)]", children: [
                 ramGB,
                 "GB"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
+            /* @__PURE__ */ jsxs2("div", { className: "text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--brand-cool)]", children: "\u2713" }),
               " Disk: ",
-              /* @__PURE__ */ jsxs2("span", { className: "text-white", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-primary)]", children: [
                 storageGB,
                 "GB NVMe"
               ] })
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "pt-4 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-md3-primary animate-pulse" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-slate-500", children: "Ready for review..." })
+              /* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-[var(--brand-cool)] animate-pulse" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)]", children: "Ready for review..." })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-xl bg-gradient-to-br from-violet-500/10 to-transparent border border-violet-500/20 backdrop-blur-[20px]", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-xl bg-[var(--depth-3)] border border-[var(--border-accent)]", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4", children: [
-            /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold text-on-surface-variant", children: "Estimated Run Cost" }),
-            /* @__PURE__ */ jsx2(MaterialIcon, { name: "info", className: "text-violet-400" })
+            /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold text-[var(--text-secondary)]", children: "Estimated Run Cost" }),
+            /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-[var(--brand-cool)]" })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-6", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-extrabold text-white", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-extrabold text-[var(--text-primary)]", children: [
               "$",
               hourCost
             ] }),
-            /* @__PURE__ */ jsx2("span", { className: "text-on-surface-variant text-sm", children: "/ hour" })
+            /* @__PURE__ */ jsx2("span", { className: "text-[var(--text-muted)] text-sm", children: "/ hour" })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-slate-500", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)]", children: [
               /* @__PURE__ */ jsx2("span", { children: "Compute" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-slate-300", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-secondary)]", children: [
                 "$",
                 (cpuCores * 0.045).toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-slate-500", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-[var(--text-muted)]", children: [
               /* @__PURE__ */ jsx2("span", { children: "Memory" }),
-              /* @__PURE__ */ jsxs2("span", { className: "text-slate-300", children: [
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--text-secondary)]", children: [
                 "$",
                 (ramGB * 5e-3).toFixed(2)
               ] })
@@ -955,7 +917,7 @@ function ProfilesPage({
         )
       ] })
     ] }),
-    !canCreateMore && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-400", children: [
+    !canCreateMore && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] p-3 text-sm text-[var(--surface-warning-text)]", children: [
       /* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsxs4("span", { children: [
         "You've reached your profile limit (",
@@ -975,7 +937,7 @@ function ProfilesPage({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
+    error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] p-3 text-[var(--surface-danger-text)] text-sm", children: [
       /* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx4("span", { children: error }),
       /* @__PURE__ */ jsx4(Button, { variant: "ghost", size: "sm", onClick: loadProfiles, children: "Retry" })
@@ -1099,7 +1061,7 @@ function ProfileCard({
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx4("h3", { className: "font-medium", children: profile.name }),
               isBuiltin && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "border-0 text-xs", children: "Built-in" }),
-              profile.is_public && !isBuiltin && /* @__PURE__ */ jsx4(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Public" })
+              profile.is_public && !isBuiltin && /* @__PURE__ */ jsx4(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Public" })
             ] }),
             profile.description && /* @__PURE__ */ jsx4("p", { className: "mt-1 line-clamp-2 text-muted-foreground text-sm", children: profile.description })
           ] }),
@@ -1121,7 +1083,7 @@ function ProfileCard({
                 size: "icon",
                 onClick: onDelete,
                 "aria-label": "Delete profile",
-                children: /* @__PURE__ */ jsx4(Trash2, { className: "h-4 w-4 text-red-400" })
+                children: /* @__PURE__ */ jsx4(Trash2, { className: "h-4 w-4 text-[var(--surface-danger-text)]" })
               }
             )
           ] })
@@ -1235,7 +1197,7 @@ function ProfileFormDialog({
       /* @__PURE__ */ jsx4(DialogDescription, { children: isEditing ? "Update your custom profile configuration" : "Create a new profile to customize agent behavior" })
     ] }),
     /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-      error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
+      error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] p-3 text-[var(--surface-danger-text)] text-sm", children: [
         /* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsx4("span", { children: error })
       ] }),
@@ -1376,11 +1338,11 @@ function DeleteProfileDialog({
         '"? This action cannot be undone.'
       ] })
     ] }),
-    error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
+    error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] p-3 text-[var(--surface-danger-text)] text-sm", children: [
       /* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx4("span", { children: error })
     ] }),
-    profile?.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-400", children: [
+    profile?.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] p-3 text-sm text-[var(--surface-warning-text)]", children: [
       "This profile has ",
       profile.metrics.total_runs,
       " recorded runs. Deleting it will lose all performance metrics."
@@ -1414,7 +1376,7 @@ function ProfileDetailDialog({
       /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx4(DialogTitle, { children: profile.name }),
         profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "border-0", children: "Built-in" }),
-        profile.is_public && !profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { className: "border-0 bg-blue-500/10 text-blue-400", children: "Public" })
+        profile.is_public && !profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]", children: "Public" })
       ] }),
       profile.description && /* @__PURE__ */ jsx4(DialogDescription, { children: profile.description })
     ] }),
@@ -1502,5 +1464,6 @@ export {
   BillingPage,
   ProfilesPage,
   ProvisioningWizard,
-  StandalonePricingPage
+  StandalonePricingPage,
+  resolveEnvironment
 };

package/dist/primitives.d.ts

@@ -4,6 +4,7 @@ import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -13,7 +14,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
-    variant?: "default" | "glass" | "sandbox";
+    variant?: "default" | "glass" | "sandbox" | "elevated";
     hover?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -57,12 +58,14 @@ interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaEleme
 declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "sandbox" | "error" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "sandbox" | "error" | "success" | "warning" | "info" | "running" | "creating" | "stopped" | "warm" | "cold" | "deleted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BadgeProps {
-    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "sandbox" | null;
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "sandbox" | "running" | "creating" | "stopped" | "warm" | "cold" | "deleted" | null;
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+    variant?: BadgeVariant;
     className?: string;
     children?: React$1.ReactNode;
+    dot?: boolean;
     onClick?: React$1.MouseEventHandler<HTMLDivElement>;
     style?: React$1.CSSProperties;
     id?: string;
@@ -70,7 +73,7 @@ interface BadgeProps {
     title?: string;
     [key: string]: unknown;
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ className, variant, dot, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;