@tangle-network/sandbox-ui 0.10.3 → 0.10.5

package/dist/pages.js

@@ -24,7 +24,7 @@ import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-OHPW55EV.js";
+} from "./chunk-QMU2PWOU.js";
 import {
   Skeleton,
   SkeletonCard
@@ -298,20 +298,65 @@ function BillingPage({
 
 // src/pages/provisioning-wizard.tsx
 import * as React2 from "react";
-import { ArrowLeft, Layers, Cpu, Bot, Info, Loader2, Settings, Plus, Trash2, Check } from "lucide-react";
+import {
+  ArrowLeft,
+  Layers,
+  Cpu,
+  Bot,
+  Info,
+  Loader2,
+  Settings,
+  Plus,
+  Trash2,
+  Check
+} from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var VALID_DRIVERS = /* @__PURE__ */ new Set(["docker", "firecracker", "tangle"]);
+var VALID_DRIVERS = /* @__PURE__ */ new Set([
+  "docker",
+  "firecracker",
+  "tangle"
+]);
 var DEFAULT_MODEL_OPTIONS = [
   { value: "claude-sonnet", label: "Claude Sonnet 4.6 (Highly Capable)" }
 ];
 var DEFAULT_MODEL_TIER = DEFAULT_MODEL_OPTIONS[0]?.value ?? "claude-sonnet";
 var STACK_DISPLAY = {
-  universal: { name: "Default", abbr: "D", 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)]" }
+  universal: {
+    name: "Default",
+    abbr: "D",
+    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) {
   if (env.id.startsWith("template:")) {
@@ -338,9 +383,27 @@ function resolveEnvironment(env) {
   };
 }
 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-[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" }
+  {
+    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 CPU_MIN = 0.5;
 var CPU_MAX = 8;
@@ -354,17 +417,29 @@ var DEFAULT_PRICING_RATES = {
   diskPerGbHr: 11e-4,
   minChargePerHr: void 0
 };
+function formatPerSecondValue(hourlyValue) {
+  return (hourlyValue / 3600).toFixed(8);
+}
 var RAW_PRESETS = [
   { name: "Lightweight", cpu: 2, ram: 4, storage: 50 },
   { name: "Standard", cpu: 4, ram: 16, storage: 128 },
   { name: "Performance", cpu: 8, ram: 32, storage: 256 }
 ];
-function calcCost(cpu, ram, storage, rates) {
-  const cost = Math.max(
-    rates.minChargePerHr ?? 0,
-    cpu * rates.cpuPerHr + ram * rates.ramPerGbHr + storage * rates.diskPerGbHr
-  );
-  return cost.toFixed(2);
+function computeHourlyCost(cpu, ram, storage, rates) {
+  const compute = cpu * rates.cpuPerHr;
+  const memory = ram * rates.ramPerGbHr;
+  const storageCost = storage * rates.diskPerGbHr;
+  const lineSum = compute + memory + storageCost;
+  const floor = rates.minChargePerHr ?? 0;
+  return {
+    compute,
+    memory,
+    storage: storageCost,
+    lineSum,
+    floor,
+    floorApplies: floor > lineSum,
+    total: Math.max(floor, lineSum)
+  };
 }
 function ProvisioningWizard({
   environments: environmentsProp,
@@ -382,11 +457,22 @@ function ProvisioningWizard({
   pricingRates,
   planTiers
 }) {
-  const cpuMax = Math.max(CPU_MIN, Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX));
-  const ramMax = Math.max(RAM_MIN, Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX));
-  const storageMax = Math.max(STORAGE_MIN, Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX));
+  const cpuMax = Math.max(
+    CPU_MIN,
+    Math.min(resourceLimits?.cpuMax ?? CPU_MAX, CPU_MAX)
+  );
+  const ramMax = Math.max(
+    RAM_MIN,
+    Math.min(resourceLimits?.ramMaxGB ?? RAM_MAX, RAM_MAX)
+  );
+  const storageMax = Math.max(
+    STORAGE_MIN,
+    Math.min(resourceLimits?.storageMaxGB ?? STORAGE_MAX, STORAGE_MAX)
+  );
   const dc = defaultConfig;
-  const [envList, setEnvList] = React2.useState(environmentsProp ?? defaultEnvironments);
+  const [envList, setEnvList] = React2.useState(
+    environmentsProp ?? defaultEnvironments
+  );
   const onLoadEnvironmentsRef = React2.useRef(onLoadEnvironments);
   onLoadEnvironmentsRef.current = onLoadEnvironments;
   React2.useEffect(() => {
@@ -395,7 +481,10 @@ function ProvisioningWizard({
       onLoadEnvironmentsRef.current().then((entries) => {
         if (!cancelled) setEnvList(entries.map(resolveEnvironment));
       }).catch((err) => {
-        if (!cancelled) setLoadError(err instanceof Error ? err.message : "Failed to load environments");
+        if (!cancelled)
+          setLoadError(
+            err instanceof Error ? err.message : "Failed to load environments"
+          );
       });
     } else if (environmentsProp) {
       setEnvList(environmentsProp);
@@ -406,22 +495,32 @@ function ProvisioningWizard({
   }, [environmentsProp]);
   const environments = envList;
   const effectiveDefault = dc?.environment ?? defaultEnvironment;
-  const [selectedEnv, setSelectedEnv] = React2.useState(effectiveDefault ?? environments[0]?.id ?? "");
+  const [selectedEnv, setSelectedEnv] = React2.useState(
+    effectiveDefault ?? environments[0]?.id ?? ""
+  );
   React2.useEffect(() => {
     if (effectiveDefault && envList.some((e) => e.id === effectiveDefault)) {
       setSelectedEnv(effectiveDefault);
     }
   }, [envList, effectiveDefault]);
-  const [cpuCores, setCpuCores] = React2.useState(Math.min(dc?.cpuCores ?? 4, cpuMax));
+  const [cpuCores, setCpuCores] = React2.useState(
+    Math.min(dc?.cpuCores ?? 4, cpuMax)
+  );
   const [ramGB, setRamGB] = React2.useState(Math.min(dc?.ramGB ?? 16, ramMax));
-  const [storageGB, setStorageGB] = React2.useState(Math.min(dc?.storageGB ?? 128, storageMax));
+  const [storageGB, setStorageGB] = React2.useState(
+    Math.min(dc?.storageGB ?? 128, storageMax)
+  );
   React2.useEffect(() => {
     setCpuCores((prev) => Math.min(prev, cpuMax));
     setRamGB((prev) => Math.min(prev, ramMax));
     setStorageGB((prev) => Math.min(prev, storageMax));
   }, [cpuMax, ramMax, storageMax]);
-  const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? DEFAULT_MODEL_TIER);
-  const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
+  const [modelTier, setModelTier] = React2.useState(
+    dc?.modelTier ?? DEFAULT_MODEL_TIER
+  );
+  const [systemPrompt, setSystemPrompt] = React2.useState(
+    dc?.systemPrompt ?? ""
+  );
   React2.useEffect(() => {
     const options = modelOptions ?? DEFAULT_MODEL_OPTIONS;
     if (options.length === 0) return;
@@ -438,9 +537,12 @@ function ProvisioningWizard({
   const [envVars, setEnvVars] = React2.useState(dc?.envVars ?? [{ key: "", value: "" }]);
   const [driver, setDriver] = React2.useState(dc?.driver ?? "docker");
   const [bare, setBare] = React2.useState(dc?.bare ?? false);
-  const [startupScriptIds, setStartupScriptIds] = React2.useState(dc?.startupScriptIds ?? []);
+  const [startupScriptIds, setStartupScriptIds] = React2.useState(
+    dc?.startupScriptIds ?? []
+  );
   const [availableScripts, setAvailableScripts] = React2.useState([]);
   const [activePreset, setActivePreset] = React2.useState(null);
+  const [pricingView, setPricingView] = React2.useState("hourly");
   const [showAdvanced, setShowAdvanced] = React2.useState(false);
   const [loadError, setLoadError] = React2.useState(null);
   const onLoadStartupScriptsRef = React2.useRef(onLoadStartupScripts);
@@ -451,7 +553,10 @@ function ProvisioningWizard({
       onLoadStartupScriptsRef.current().then((scripts) => {
         if (!cancelled) setAvailableScripts(scripts);
       }).catch((err) => {
-        if (!cancelled) setLoadError(err instanceof Error ? err.message : "Failed to load startup scripts");
+        if (!cancelled)
+          setLoadError(
+            err instanceof Error ? err.message : "Failed to load startup scripts"
+          );
       });
     }
     return () => {
@@ -459,7 +564,9 @@ function ProvisioningWizard({
     };
   }, []);
   const isMultistep = variant === "multistep";
-  const [currentStep, setCurrentStep] = React2.useState(skipToReview && dc && isMultistep ? 3 : 1);
+  const [currentStep, setCurrentStep] = React2.useState(
+    skipToReview && dc && isMultistep ? 3 : 1
+  );
   const [isDeploying, setIsDeploying] = React2.useState(false);
   const [deployError, setDeployError] = React2.useState(null);
   const handleDeploy = async () => {
@@ -467,8 +574,25 @@ function ProvisioningWizard({
     setIsDeploying(true);
     setDeployError(null);
     try {
-      const validScriptIds = new Set(availableScripts.filter((s) => s.enabled).map((s) => s.id));
-      await onSubmit({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt, name, gitUrl, envVars: envVars.filter((e) => e.key.trim() !== ""), driver, bare, startupScriptIds: startupScriptIds.filter((id) => validScriptIds.has(id)) });
+      const validScriptIds = new Set(
+        availableScripts.filter((s) => s.enabled).map((s) => s.id)
+      );
+      await onSubmit({
+        environment: selectedEnv,
+        cpuCores,
+        ramGB,
+        storageGB,
+        modelTier,
+        systemPrompt,
+        name,
+        gitUrl,
+        envVars: envVars.filter((e) => e.key.trim() !== ""),
+        driver,
+        bare,
+        startupScriptIds: startupScriptIds.filter(
+          (id) => validScriptIds.has(id)
+        )
+      });
     } catch (err) {
       setDeployError(err instanceof Error ? err.message : "Deployment failed");
     } finally {
@@ -511,18 +635,43 @@ function ProvisioningWizard({
       if (matching) setActivePreset(matching.name);
       return;
     }
-    const largestFitting = [...RAW_PRESETS].reverse().find((p) => p.cpu <= cpuMax && p.ram <= ramMax && p.storage <= storageMax);
+    const largestFitting = [...RAW_PRESETS].reverse().find(
+      (p) => p.cpu <= cpuMax && p.ram <= ramMax && p.storage <= storageMax
+    );
     if (largestFitting) {
-      applyPreset(largestFitting.name, largestFitting.cpu, largestFitting.ram, largestFitting.storage);
+      applyPreset(
+        largestFitting.name,
+        largestFitting.cpu,
+        largestFitting.ram,
+        largestFitting.storage
+      );
     } else {
       setActivePreset(null);
     }
   }, [cpuMax, ramMax, storageMax, dc]);
   const effectivePricingRates = pricingRates ?? DEFAULT_PRICING_RATES;
-  const hourCost = calcCost(cpuCores, ramGB, storageGB, effectivePricingRates);
+  const hourlyCostBreakdown = computeHourlyCost(
+    cpuCores,
+    ramGB,
+    storageGB,
+    effectivePricingRates
+  );
+  const hourCost = hourlyCostBreakdown.total.toFixed(2);
+  const displayValue = pricingView === "hourly" ? hourCost : formatPerSecondValue(hourlyCostBreakdown.total);
+  const pricingSuffix = pricingView === "hourly" ? "/ hour" : "/ sec";
+  const rateSuffix = pricingView === "hourly" ? "/h" : "/s";
+  const fmtRate = (v) => pricingView === "hourly" ? v.toFixed(2) : formatPerSecondValue(v);
   return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto flex flex-col", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "mb-6 flex items-center gap-4 shrink-0", children: [
-      onBack && /* @__PURE__ */ jsx2("button", { type: "button", onClick: onBack, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground", children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" }) }),
+      onBack && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border hover:bg-muted/50 transition-colors text-foreground",
+          children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "h-5 w-5" })
+        }
+      ),
       /* @__PURE__ */ jsxs2("div", { children: [
         /* @__PURE__ */ jsx2("h1", { className: "text-3xl font-extrabold tracking-tight text-foreground mb-1", children: "Sandbox Provisioning" }),
         /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "Select your stack, allocate resources, and configure your agent." })
@@ -531,16 +680,39 @@ function ProvisioningWizard({
     /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-6 flex-1 min-h-0", children: [
       /* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 flex flex-col min-h-0", children: [
         isMultistep && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mb-4 bg-card border border-border p-3 rounded-2xl mx-auto max-w-2xl justify-between shrink-0", children: [1, 2, 3].map((s) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx2("div", { className: cn(
-            "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
-            currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
-          ), children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s }),
-          /* @__PURE__ */ jsxs2("span", { className: cn("ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200", currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"), children: [
-            s === 1 && "Environment",
-            s === 2 && "Resources",
-            s === 3 && "AI Agent"
-          ] }),
-          s < 3 && /* @__PURE__ */ jsx2("div", { className: cn("w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300", currentStep > s ? "bg-primary" : "bg-border") })
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-200",
+                currentStep === s ? "bg-primary text-primary-foreground ring-2 ring-primary/30 ring-offset-2 ring-offset-card shadow-sm" : currentStep > s ? "bg-primary text-primary-foreground" : "bg-muted border border-border text-muted-foreground"
+              ),
+              children: currentStep > s ? /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) : s
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              className: cn(
+                "ml-2 sm:ml-3 font-bold text-sm tracking-tight hidden sm:inline transition-colors duration-200",
+                currentStep === s ? "text-foreground" : currentStep > s ? "text-primary" : "text-muted-foreground"
+              ),
+              children: [
+                s === 1 && "Environment",
+                s === 2 && "Resources",
+                s === 3 && "AI Agent"
+              ]
+            }
+          ),
+          s < 3 && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "w-4 sm:w-8 h-0.5 mx-2 sm:mx-4 rounded-full transition-colors duration-300",
+                currentStep > s ? "bg-primary" : "bg-border"
+              )
+            }
+          )
         ] }, s)) }),
         dc && isMultistep && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between bg-card border border-border rounded-2xl px-4 py-3 shrink-0", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm", children: [
@@ -557,11 +729,11 @@ function ProvisioningWizard({
                 setCpuCores(Math.min(4, cpuMax));
                 setRamGB(Math.min(16, ramMax));
                 setStorageGB(Math.min(128, storageMax));
-                {
-                  const resetOptions = modelOptions ?? DEFAULT_MODEL_OPTIONS;
-                  const firstAvailable = resetOptions.find((o) => !o.disabled);
-                  setModelTier(firstAvailable?.value ?? DEFAULT_MODEL_TIER);
-                }
+                const resetOptions = modelOptions ?? DEFAULT_MODEL_OPTIONS;
+                const firstAvailable = resetOptions.find(
+                  (o) => !o.disabled
+                );
+                setModelTier(firstAvailable?.value ?? DEFAULT_MODEL_TIER);
                 setSystemPrompt("");
                 setName("");
                 setGitUrl("");
@@ -570,6 +742,7 @@ function ProvisioningWizard({
                 setBare(false);
                 setStartupScriptIds([]);
                 setActivePreset(null);
+                setPricingView("hourly");
               },
               className: "text-xs font-bold text-primary hover:text-primary/70 transition-colors",
               children: "Start from scratch"
@@ -599,10 +772,16 @@ function ProvisioningWizard({
                   selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/8 to-transparent pointer-events-none" }),
                   /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-3 relative z-10", children: [
                     /* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-full flex items-center justify-center bg-muted/50 border border-border shadow-inner", children: env.icon }),
-                    /* @__PURE__ */ jsx2("div", { className: cn(
-                      "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
-                      selectedEnv === env.id ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
-                    ), children: selectedEnv === env.id && /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3 text-primary-foreground animate-in zoom-in duration-200" }) })
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        className: cn(
+                          "w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
+                          selectedEnv === env.id ? "border-primary bg-primary" : "border-border group-hover:border-primary/40"
+                        ),
+                        children: selectedEnv === env.id && /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3 text-primary-foreground animate-in zoom-in duration-200" })
+                      }
+                    )
                   ] }),
                   /* @__PURE__ */ jsx2("h3", { className: "font-bold text-sm mb-0.5 text-foreground relative z-10", children: env.name }),
                   /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground leading-relaxed relative z-10", children: env.description })
@@ -632,14 +811,24 @@ function ProvisioningWizard({
                     ),
                     children: [
                       p.locked && /* @__PURE__ */ jsx2("div", { className: "absolute -top-1.5 -right-1.5 bg-primary text-primary-foreground text-[9px] font-bold px-1.5 py-0.5 rounded-full uppercase tracking-wider", children: p.unlockLabel }),
-                      /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : p.locked ? "text-muted-foreground" : "text-foreground"), children: p.name }),
+                      /* @__PURE__ */ jsx2(
+                        "div",
+                        {
+                          className: cn(
+                            "font-bold text-sm transition-colors duration-200",
+                            active ? "text-primary" : p.locked ? "text-muted-foreground" : "text-foreground"
+                          ),
+                          children: p.name
+                        }
+                      ),
                       /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
                         p.cpu,
                         " vCPU",
                         p.cpu === 1 ? "" : "s",
                         " / ",
                         p.ram,
-                        "GB / ",
+                        "GB /",
+                        " ",
                         p.storage,
                         "GB"
                       ] })
@@ -650,43 +839,69 @@ function ProvisioningWizard({
               }) })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "space-y-6", children: [
-              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPU" },
-              { label: "Memory (RAM)", value: ramGB, setter: setRamGB, min: RAM_MIN, max: ramMax, step: 1, unit: "GB" },
-              { label: "Ephemeral Storage", value: storageGB, setter: setStorageGB, min: STORAGE_MIN, max: storageMax, step: 8, unit: "GB" }
-            ].map(({ label, value, setter, min, max, step: s, unit }) => {
-              const displayUnit = unit === "vCPU" ? `${value} vCPU${value === 1 ? "" : "s"}` : `${value}${unit}`;
-              return /* @__PURE__ */ jsxs2("div", { children: [
-                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
-                  /* @__PURE__ */ jsx2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: displayUnit })
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  "input",
-                  {
-                    type: "range",
-                    min,
-                    max,
-                    step: s,
-                    value,
-                    onChange: (e) => {
-                      setter(+e.target.value);
-                      setActivePreset(null);
-                    },
-                    className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
-                  }
-                ),
-                /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
-                  /* @__PURE__ */ jsxs2("span", { children: [
-                    min,
-                    unit === "vCPU" ? min === 1 ? " vCPU" : " vCPUs" : unit
+              {
+                label: "Compute Cores (CPU)",
+                value: cpuCores,
+                setter: setCpuCores,
+                min: CPU_MIN,
+                max: cpuMax,
+                step: 0.5,
+                unit: "vCPU"
+              },
+              {
+                label: "Memory (RAM)",
+                value: ramGB,
+                setter: setRamGB,
+                min: RAM_MIN,
+                max: ramMax,
+                step: 1,
+                unit: "GB"
+              },
+              {
+                label: "Ephemeral Storage",
+                value: storageGB,
+                setter: setStorageGB,
+                min: STORAGE_MIN,
+                max: storageMax,
+                step: 8,
+                unit: "GB"
+              }
+            ].map(
+              ({ label, value, setter, min, max, step: s, unit }) => {
+                const displayUnit = unit === "vCPU" ? `${value} vCPU${value === 1 ? "" : "s"}` : `${value}${unit}`;
+                return /* @__PURE__ */ jsxs2("div", { children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end border-b border-border pb-1.5 mb-2", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: label }),
+                    /* @__PURE__ */ jsx2("span", { className: "text-xl font-bold text-foreground tracking-tight", children: displayUnit })
                   ] }),
-                  /* @__PURE__ */ jsxs2("span", { children: [
-                    max,
-                    unit === "vCPU" ? max === 1 ? " vCPU" : " vCPUs" : unit
+                  /* @__PURE__ */ jsx2(
+                    "input",
+                    {
+                      type: "range",
+                      min,
+                      max,
+                      step: s,
+                      value,
+                      onChange: (e) => {
+                        setter(+e.target.value);
+                        setActivePreset(null);
+                      },
+                      className: "w-full h-2 rounded-full appearance-none cursor-pointer accent-primary [&::-webkit-slider-runnable-track]:bg-border [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:bg-border [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-2 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-foreground [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      min,
+                      unit === "vCPU" ? min === 1 ? " vCPU" : " vCPUs" : unit
+                    ] }),
+                    /* @__PURE__ */ jsxs2("span", { children: [
+                      max,
+                      unit === "vCPU" ? max === 1 ? " vCPU" : " vCPUs" : unit
+                    ] })
                   ] })
-                ] })
-              ] }, label);
-            }) })
+                ] }, label);
+              }
+            ) })
           ] }) }),
           (!isMultistep || currentStep === 3) && /* @__PURE__ */ jsx2(React2.Fragment, { children: /* @__PURE__ */ jsxs2("section", { className: "bg-card border border-border rounded-[24px] p-6 shadow-2xl relative overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 mb-5", children: [
@@ -703,16 +918,18 @@ function ProvisioningWizard({
                     onChange: (e) => setModelTier(e.target.value),
                     disabled: modelOptions && modelOptions.filter((o) => !o.disabled).length === 0,
                     className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none disabled:opacity-50 disabled:cursor-not-allowed",
-                    children: (modelOptions ?? DEFAULT_MODEL_OPTIONS).map((option) => /* @__PURE__ */ jsx2(
-                      "option",
-                      {
-                        value: option.value,
-                        disabled: option.disabled,
-                        className: "bg-gray-900",
-                        children: option.label
-                      },
-                      option.value
-                    ))
+                    children: (modelOptions ?? DEFAULT_MODEL_OPTIONS).map(
+                      (option) => /* @__PURE__ */ jsx2(
+                        "option",
+                        {
+                          value: option.value,
+                          disabled: option.disabled,
+                          className: "bg-gray-900",
+                          children: option.label
+                        },
+                        option.value
+                      )
+                    )
                   }
                 ),
                 modelOptions && modelOptions.length > 0 && modelOptions.every((o) => o.disabled) && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground mt-2", children: "All model options are currently disabled. Please upgrade your plan or contact support." })
@@ -766,12 +983,22 @@ function ProvisioningWizard({
                         {
                           value: driver,
                           onChange: (e) => {
-                            if (VALID_DRIVERS.has(e.target.value)) setDriver(e.target.value);
+                            if (VALID_DRIVERS.has(e.target.value))
+                              setDriver(
+                                e.target.value
+                              );
                           },
                           className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none",
                           children: [
                             /* @__PURE__ */ jsx2("option", { value: "docker", className: "bg-gray-900", children: "Docker container (Default)" }),
-                            /* @__PURE__ */ jsx2("option", { value: "firecracker", className: "bg-gray-900", children: "Firecracker microVM (Secure)" }),
+                            /* @__PURE__ */ jsx2(
+                              "option",
+                              {
+                                value: "firecracker",
+                                className: "bg-gray-900",
+                                children: "Firecracker microVM (Secure)"
+                              }
+                            ),
                             /* @__PURE__ */ jsx2("option", { value: "tangle", className: "bg-gray-900", children: "Tangle Distributed Node" })
                           ]
                         }
@@ -794,10 +1021,21 @@ function ProvisioningWizard({
                   /* @__PURE__ */ jsxs2("div", { children: [
                     /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-2", children: [
                       /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Environment Variables" }),
-                      /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => setEnvVars([...envVars, { key: "", value: "" }]), className: "flex items-center gap-1 text-xs text-primary hover:text-primary/70 transition-colors font-bold", children: [
-                        /* @__PURE__ */ jsx2(Plus, { className: "h-3 w-3" }),
-                        " Add Var"
-                      ] })
+                      /* @__PURE__ */ jsxs2(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setEnvVars([
+                            ...envVars,
+                            { key: "", value: "" }
+                          ]),
+                          className: "flex items-center gap-1 text-xs text-primary hover:text-primary/70 transition-colors font-bold",
+                          children: [
+                            /* @__PURE__ */ jsx2(Plus, { className: "h-3 w-3" }),
+                            " Add Var"
+                          ]
+                        }
+                      )
                     ] }),
                     /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
                       envVars.map((env, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
@@ -806,7 +1044,11 @@ function ProvisioningWizard({
                           {
                             type: "text",
                             value: env.key,
-                            onChange: (e) => setEnvVars(envVars.map((v, idx) => idx === i ? { ...v, key: e.target.value } : v)),
+                            onChange: (e) => setEnvVars(
+                              envVars.map(
+                                (v, idx) => idx === i ? { ...v, key: e.target.value } : v
+                              )
+                            ),
                             className: "flex-1 bg-card border border-border rounded-xl h-10 px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary placeholder:text-muted-foreground",
                             placeholder: "API_KEY"
                           }
@@ -816,12 +1058,26 @@ function ProvisioningWizard({
                           {
                             type: "password",
                             value: env.value,
-                            onChange: (e) => setEnvVars(envVars.map((v, idx) => idx === i ? { ...v, value: e.target.value } : v)),
+                            onChange: (e) => setEnvVars(
+                              envVars.map(
+                                (v, idx) => idx === i ? { ...v, value: e.target.value } : v
+                              )
+                            ),
                             className: "flex-[2] bg-card border border-border rounded-xl h-10 px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary placeholder:text-muted-foreground",
                             placeholder: "sk-xxxxxxxxxxx"
                           }
                         ),
-                        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setEnvVars(envVars.filter((_, idx) => idx !== i)), className: "h-10 w-10 flex items-center justify-center shrink-0 rounded-xl bg-card border border-border text-red-400 hover:bg-red-500/10 hover:border-red-500/30 transition-colors", children: /* @__PURE__ */ jsx2(Trash2, { className: "h-4 w-4" }) })
+                        /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setEnvVars(
+                              envVars.filter((_, idx) => idx !== i)
+                            ),
+                            className: "h-10 w-10 flex items-center justify-center shrink-0 rounded-xl bg-card border border-border text-red-400 hover:bg-red-500/10 hover:border-red-500/30 transition-colors",
+                            children: /* @__PURE__ */ jsx2(Trash2, { className: "h-4 w-4" })
+                          }
+                        )
                       ] }, i)),
                       envVars.length === 0 && /* @__PURE__ */ jsx2("div", { className: "text-center p-3 bg-card border border-border rounded-xl text-muted-foreground/60 text-sm italic", children: "No environment variables set" })
                     ] })
@@ -829,36 +1085,82 @@ function ProvisioningWizard({
                   availableScripts.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
                     /* @__PURE__ */ jsx2("div", { className: "text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Startup Scripts" }),
                     /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: availableScripts.filter((s) => s.enabled).map((script) => {
-                      const selected = startupScriptIds.includes(script.id);
-                      return /* @__PURE__ */ jsxs2("label", { className: "flex items-start gap-3 cursor-pointer group rounded-lg border border-border p-3 transition-colors hover:border-primary/30", children: [
-                        /* @__PURE__ */ jsx2(
-                          "input",
-                          {
-                            type: "checkbox",
-                            checked: selected,
-                            onChange: () => setStartupScriptIds(
-                              (prev) => selected ? prev.filter((id) => id !== script.id) : [...prev, script.id]
+                      const selected = startupScriptIds.includes(
+                        script.id
+                      );
+                      return /* @__PURE__ */ jsxs2(
+                        "label",
+                        {
+                          className: "flex items-start gap-3 cursor-pointer group rounded-lg border border-border p-3 transition-colors hover:border-primary/30",
+                          children: [
+                            /* @__PURE__ */ jsx2(
+                              "input",
+                              {
+                                type: "checkbox",
+                                checked: selected,
+                                onChange: () => setStartupScriptIds(
+                                  (prev) => selected ? prev.filter(
+                                    (id) => id !== script.id
+                                  ) : [...prev, script.id]
+                                ),
+                                className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/30"
+                              }
                             ),
-                            className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/30"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: script.name }),
-                          script.description && /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5", children: script.description }),
-                          script.injectSecrets.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1 mt-1.5", children: script.injectSecrets.map((s) => /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: [
-                            /* @__PURE__ */ jsxs2("svg", { className: "h-2.5 w-2.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                              /* @__PURE__ */ jsx2("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-                              /* @__PURE__ */ jsx2("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-                            ] }),
-                            s
-                          ] }, s)) })
-                        ] })
-                      ] }, script.id);
+                            /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+                              /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: script.name }),
+                              script.description && /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5", children: script.description }),
+                              script.injectSecrets.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1 mt-1.5", children: script.injectSecrets.map((s) => /* @__PURE__ */ jsxs2(
+                                "span",
+                                {
+                                  className: "inline-flex items-center gap-0.5 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground",
+                                  children: [
+                                    /* @__PURE__ */ jsxs2(
+                                      "svg",
+                                      {
+                                        className: "h-2.5 w-2.5",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        strokeWidth: "2",
+                                        children: [
+                                          /* @__PURE__ */ jsx2(
+                                            "rect",
+                                            {
+                                              x: "3",
+                                              y: "11",
+                                              width: "18",
+                                              height: "11",
+                                              rx: "2",
+                                              ry: "2"
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx2("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+                                        ]
+                                      }
+                                    ),
+                                    s
+                                  ]
+                                },
+                                s
+                              )) })
+                            ] })
+                          ]
+                        },
+                        script.id
+                      );
                     }) })
                   ] }),
                   /* @__PURE__ */ jsx2("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
                     /* @__PURE__ */ jsxs2("div", { className: "relative flex items-center justify-center shrink-0", children: [
-                      /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "sr-only peer", checked: bare, onChange: (e) => setBare(e.target.checked) }),
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: "sr-only peer",
+                          checked: bare,
+                          onChange: (e) => setBare(e.target.checked)
+                        }
+                      ),
                       /* @__PURE__ */ jsx2("div", { className: "w-10 h-6 bg-muted peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary hover:bg-muted/80 transition-colors" })
                     ] }),
                     /* @__PURE__ */ jsxs2("div", { children: [
@@ -877,57 +1179,96 @@ function ProvisioningWizard({
           /* @__PURE__ */ jsx2("div", { className: "hidden" }),
           /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4 relative z-10", children: [
             /* @__PURE__ */ jsx2("span", { className: "font-label text-xs font-bold uppercase tracking-widest text-muted-foreground", children: "Run Cost" }),
-            /* @__PURE__ */ jsx2("div", { className: "h-7 w-7 rounded-full bg-muted/30 flex items-center justify-center border border-border", children: /* @__PURE__ */ jsx2(Info, { className: "h-3.5 w-3.5 text-primary" }) })
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                role: "group",
+                "aria-label": "Pricing view",
+                className: "inline-flex items-center rounded-full border border-border bg-muted/50 p-0.5",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": pricingView === "hourly",
+                      onClick: () => setPricingView("hourly"),
+                      className: cn(
+                        "rounded-full px-2.5 py-0.5 text-[10px] font-bold transition-all",
+                        pricingView === "hourly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                      ),
+                      children: "Per Hour"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": pricingView === "perSecond",
+                      onClick: () => setPricingView("perSecond"),
+                      className: cn(
+                        "rounded-full px-2.5 py-0.5 text-[10px] font-bold transition-all",
+                        pricingView === "perSecond" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                      ),
+                      children: "Per Second"
+                    }
+                  )
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-5 relative z-10", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "text-4xl font-black text-foreground tracking-tighter animate-in fade-in duration-200", children: [
-              "$",
-              hourCost
-            ] }, hourCost),
-            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: "/ hour" })
-          ] }),
-          (() => {
-            const computeCost = cpuCores * effectivePricingRates.cpuPerHr;
-            const memoryCost = ramGB * effectivePricingRates.ramPerGbHr;
-            const storageCost = storageGB * effectivePricingRates.diskPerGbHr;
-            const lineSum = computeCost + memoryCost + storageCost;
-            const floor = effectivePricingRates.minChargePerHr ?? 0;
-            const floorApplies = floor > lineSum;
-            return /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 bg-card border border-border rounded-xl p-3", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
-                /* @__PURE__ */ jsx2("span", { children: "COMPUTE" }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
-                  "$",
-                  computeCost.toFixed(2),
-                  "/h"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
-                /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
-                  "$",
-                  memoryCost.toFixed(2),
-                  "/h"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
-                /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
-                /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
-                  "$",
-                  storageCost.toFixed(2),
-                  "/h"
-                ] })
-              ] }),
-              floorApplies && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-primary border-t border-border pt-2", children: [
-                /* @__PURE__ */ jsx2("span", { children: "MIN CHARGE" }),
-                /* @__PURE__ */ jsxs2("span", { children: [
+            /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                className: cn(
+                  "font-black text-foreground tracking-tighter animate-in fade-in duration-200",
+                  pricingView === "hourly" ? "text-4xl" : "text-2xl"
+                ),
+                children: [
                   "$",
-                  (floor - lineSum).toFixed(2),
-                  "/h"
-                ] })
+                  displayValue
+                ]
+              },
+              pricingView
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-bold", children: pricingSuffix })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-2 relative z-10 bg-card border border-border rounded-xl p-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "COMPUTE" }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground", children: [
+                "$",
+                fmtRate(hourlyCostBreakdown.compute),
+                rateSuffix
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                "$",
+                fmtRate(hourlyCostBreakdown.memory),
+                rateSuffix
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-muted-foreground", children: [
+              /* @__PURE__ */ jsx2("span", { children: "STORAGE" }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
+                "$",
+                fmtRate(hourlyCostBreakdown.storage),
+                rateSuffix
               ] })
-            ] });
-          })()
+            ] }),
+            hourlyCostBreakdown.floorApplies && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-xs font-mono tracking-widest text-primary border-t border-border pt-2", children: [
+              /* @__PURE__ */ jsx2("span", { children: "MIN CHARGE" }),
+              /* @__PURE__ */ jsxs2("span", { children: [
+                "$",
+                fmtRate(
+                  hourlyCostBreakdown.floor - hourlyCostBreakdown.lineSum
+                ),
+                rateSuffix
+              ] })
+            ] })
+          ] })
         ] }),
         deployError && /* @__PURE__ */ jsxs2("div", { className: "rounded-xl border border-destructive/30 bg-destructive/10 p-3 flex items-center gap-2", children: [
           /* @__PURE__ */ jsx2(Info, { className: "h-4 w-4 text-destructive shrink-0" }),
@@ -941,7 +1282,8 @@ function ProvisioningWizard({
               onClick: () => setCurrentStep((s) => s + 1),
               className: "w-full relative overflow-hidden h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl hover:brightness-110 transition-all active:scale-[0.98] shadow-md",
               children: [
-                "Continue to ",
+                "Continue to",
+                " ",
                 currentStep === 1 ? "Resources" : "Agent Config"
               ]
             }
@@ -1763,9 +2105,9 @@ function ProfileDetailDialog({
 
 // src/pages/secrets-page.tsx
 import * as React5 from "react";
-import { Lock, Plus as Plus3, Trash2 as Trash23, Eye, EyeOff, AlertCircle as AlertCircle2, Key, Shield, CheckCircle } from "lucide-react";
+import { Lock, Plus as Plus3, Trash2 as Trash23, Eye, EyeOff, AlertCircle as AlertCircle2, Key, Shield, CheckCircle, Users, ArrowRight } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function SecretsPage({ apiClient, className }) {
+function SecretsPage({ apiClient, className, teamSecretsHint }) {
   const [secrets, setSecrets] = React5.useState([]);
   const [loading, setLoading] = React5.useState(true);
   const [error, setError] = React5.useState(null);
@@ -1856,6 +2198,29 @@ function SecretsPage({ apiClient, className }) {
         }
       )
     ] }),
+    teamSecretsHint && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-[var(--accent-surface-soft)]/40 px-4 py-3", children: [
+      /* @__PURE__ */ jsx5(Users, { className: "h-5 w-5 shrink-0 text-[var(--accent-text)]", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex-1 text-sm", children: [
+        /* @__PURE__ */ jsx5("p", { className: "font-semibold text-foreground", children: "Setting up secrets for a team?" }),
+        /* @__PURE__ */ jsxs5("p", { className: "mt-0.5 text-muted-foreground text-xs", children: [
+          "Secrets here are ",
+          /* @__PURE__ */ jsx5("strong", { children: "personal" }),
+          " \u2014 only available in sandboxes you create. To share credentials with teammates, configure them on the team page instead."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: teamSecretsHint.onNavigate,
+          className: "inline-flex shrink-0 items-center gap-1 rounded-md border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-muted transition-colors",
+          children: [
+            teamSecretsHint.label ?? "Manage team secrets",
+            /* @__PURE__ */ jsx5(ArrowRight, { className: "h-3 w-3", "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-4", children: [
       /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Total Active Secrets" }),