@tangle-network/sandbox-ui 0.9.0 → 0.10.1

package/dist/pages.js

@@ -310,6 +310,16 @@ var STACK_DISPLAY = {
   rust: { name: "Rust", abbr: "Rs", color: "orange", textClass: "text-[var(--surface-orange-text)]" }
 };
 function resolveEnvironment(env) {
+  if (env.id.startsWith("template:")) {
+    const templateName = env.description?.replace(/^Template:\s*/, "") ?? "Custom Template";
+    return {
+      id: env.id,
+      name: templateName,
+      description: env.description ?? "User template from snapshot",
+      icon: /* @__PURE__ */ jsx2("span", { className: "text-[var(--surface-success-text)] text-2xl font-bold", children: "T" }),
+      color: "green"
+    };
+  }
   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() : "?");
@@ -334,8 +344,8 @@ var RAM_MIN = 2;
 var RAM_MAX = 32;
 var STORAGE_MIN = 20;
 var STORAGE_MAX = 512;
-function calcCost(cpu, ram) {
-  const cost = cpu * 0.045 + ram * 5e-3;
+function calcCost(cpu, ram, storage) {
+  const cost = cpu * 0.045 + ram * 5e-3 + storage * 11e-4;
   return cost.toFixed(2);
 }
 function ProvisioningWizard({
@@ -348,8 +358,12 @@ function ProvisioningWizard({
   defaultEnvironment,
   defaultConfig,
   skipToReview,
-  onLoadStartupScripts
+  onLoadStartupScripts,
+  resourceLimits
 }) {
+  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 onLoadEnvironmentsRef = React2.useRef(onLoadEnvironments);
@@ -377,9 +391,14 @@ function ProvisioningWizard({
       setSelectedEnv(effectiveDefault);
     }
   }, [envList, effectiveDefault]);
-  const [cpuCores, setCpuCores] = React2.useState(dc?.cpuCores ?? 4);
-  const [ramGB, setRamGB] = React2.useState(dc?.ramGB ?? 16);
-  const [storageGB, setStorageGB] = React2.useState(dc?.storageGB ?? 128);
+  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));
+  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 ?? "claude-sonnet");
   const [systemPrompt, setSystemPrompt] = React2.useState(dc?.systemPrompt ?? "");
   const [name, setName] = React2.useState(dc?.name ?? "");
@@ -389,6 +408,7 @@ function ProvisioningWizard({
   const [bare, setBare] = React2.useState(dc?.bare ?? false);
   const [startupScriptIds, setStartupScriptIds] = React2.useState(dc?.startupScriptIds ?? []);
   const [availableScripts, setAvailableScripts] = React2.useState([]);
+  const [activePreset, setActivePreset] = React2.useState(null);
   const [showAdvanced, setShowAdvanced] = React2.useState(false);
   const [loadError, setLoadError] = React2.useState(null);
   const onLoadStartupScriptsRef = React2.useRef(onLoadStartupScripts);
@@ -423,12 +443,18 @@ function ProvisioningWizard({
       setIsDeploying(false);
     }
   };
-  const applyPreset = (cpu, ram, storage) => {
-    setCpuCores(cpu);
-    setRamGB(ram);
-    setStorageGB(storage);
+  const applyPreset = (name2, cpu, ram, storage) => {
+    setCpuCores(Math.min(cpu, cpuMax));
+    setRamGB(Math.min(ram, ramMax));
+    setStorageGB(Math.min(storage, storageMax));
+    setActivePreset(name2);
   };
-  const hourCost = calcCost(cpuCores, ramGB);
+  const presets = [
+    { name: "Lightweight", cpu: Math.min(2, cpuMax), ram: Math.min(4, ramMax), storage: Math.min(50, storageMax) },
+    { name: "Standard", cpu: Math.min(4, cpuMax), ram: Math.min(16, ramMax), storage: Math.min(128, storageMax) },
+    { name: "Performance", cpu: Math.min(8, cpuMax), ram: Math.min(32, ramMax), storage: Math.min(256, storageMax) }
+  ];
+  const hourCost = calcCost(cpuCores, ramGB, storageGB);
   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" }) }),
@@ -463,9 +489,9 @@ function ProvisioningWizard({
               onClick: () => {
                 setCurrentStep(1);
                 setSelectedEnv(environments[0]?.id ?? "");
-                setCpuCores(4);
-                setRamGB(16);
-                setStorageGB(128);
+                setCpuCores(Math.min(4, cpuMax));
+                setRamGB(Math.min(16, ramMax));
+                setStorageGB(Math.min(128, storageMax));
                 setModelTier("claude-sonnet");
                 setSystemPrompt("");
                 setName("");
@@ -474,6 +500,7 @@ function ProvisioningWizard({
                 setDriver("docker");
                 setBare(false);
                 setStartupScriptIds([]);
+                setActivePreset(null);
               },
               className: "text-xs font-bold text-primary hover:text-primary/70 transition-colors",
               children: "Start from scratch"
@@ -522,25 +549,25 @@ function ProvisioningWizard({
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
               /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-3", children: "Compute Presets" }),
-              /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-3 gap-3", children: [
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(2, 4, 50), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", cpuCores === 2 && ramGB === 4 && storageGB === 50 ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", cpuCores === 2 && ramGB === 4 && storageGB === 50 ? "text-primary" : "text-foreground"), children: "Lightweight" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "2C / 4G / 50G" })
-                ] }),
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(4, 16, 128), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", cpuCores === 4 && ramGB === 16 && storageGB === 128 ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", cpuCores === 4 && ramGB === 16 && storageGB === 128 ? "text-primary" : "text-foreground"), children: "Standard" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "4C / 16G / 128G" })
-                ] }),
-                /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(8, 32, 256), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", cpuCores === 8 && ramGB === 32 && storageGB === 256 ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
-                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", cpuCores === 8 && ramGB === 32 && storageGB === 256 ? "text-primary" : "text-foreground"), children: "Performance" }),
-                  /* @__PURE__ */ jsx2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: "8C / 32G / 256G" })
-                ] })
-              ] })
+              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-3", children: presets.map((p) => {
+                const active = activePreset === p.name;
+                return /* @__PURE__ */ jsxs2("button", { type: "button", onClick: () => applyPreset(p.name, p.cpu, p.ram, p.storage), className: cn("p-3 rounded-[14px] transition-all duration-200 text-center group border", active ? "bg-primary/5 border-primary ring-1 ring-primary/20 shadow-sm" : "bg-card border-border hover:border-primary/30 hover:shadow-sm active:scale-[0.97]"), children: [
+                  /* @__PURE__ */ jsx2("div", { className: cn("font-bold text-sm transition-colors duration-200", active ? "text-primary" : "text-foreground"), children: p.name }),
+                  /* @__PURE__ */ jsxs2("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: [
+                    p.cpu,
+                    "C / ",
+                    p.ram,
+                    "G / ",
+                    p.storage,
+                    "G"
+                  ] })
+                ] }, p.name);
+              }) })
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "space-y-6", 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" }
+              { label: "Compute Cores (CPU)", value: cpuCores, setter: setCpuCores, min: CPU_MIN, max: cpuMax, step: 0.5, unit: "vCPUs" },
+              { 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 }) => /* @__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 }),
@@ -558,7 +585,10 @@ function ProvisioningWizard({
                   max,
                   step: s,
                   value,
-                  onChange: (e) => setter(+e.target.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"
                 }
               ),
@@ -829,7 +859,16 @@ function ProvisioningWizard({
               /* @__PURE__ */ jsx2("span", { children: "MEMORY" }),
               /* @__PURE__ */ jsxs2("span", { className: "text-foreground/80", children: [
                 "$",
-                (ramGB * 5e-3).toFixed(2)
+                (ramGB * 5e-3).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: [
+                "$",
+                (storageGB * 11e-4).toFixed(2),
+                "/h"
               ] })
             ] })
           ] })
@@ -902,16 +941,16 @@ async function fetchTiersFromApi(apiBasePath) {
 }
 var FAQ = [
   {
-    q: "What are credits?",
-    a: "Credits are used to pay for AI model usage. Different models consume different amounts of credits based on their complexity and the length of your requests."
+    q: "What is included usage?",
+    a: "Each plan includes a monthly USD usage balance. Compute and AI model usage are billed per second from this balance. If you exceed your included amount, overage is billed at the same rates with no penalty."
   },
   {
     q: "Can I change plans later?",
     a: "Yes. You can upgrade or downgrade your plan at any time. When you upgrade, you are charged the prorated difference. When you downgrade, the change takes effect at the end of your billing cycle."
   },
   {
-    q: "Do unused credits roll over?",
-    a: "Monthly credits do not roll over to the next month. However, purchased credit packs never expire and can be used at any time."
+    q: "Does unused balance roll over?",
+    a: "Monthly included usage does not roll over to the next month. Your balance resets at the start of each billing cycle."
   }
 ];
 function StandalonePricingPage({

package/dist/run.js

@@ -8,14 +8,18 @@ import {
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-EXSOPXIY.js";
+} from "./chunk-QOL4ZB24.js";
 import "./chunk-HRMUF35V.js";
 import {
   ToolCallGroup,
   ToolCallStep
 } from "./chunk-MT5FJ3ZT.js";
 import "./chunk-BX6AQMUS.js";
+import "./chunk-ZNCEM5CD.js";
+import "./chunk-34I7UFSX.js";
 import "./chunk-T7HMZEVO.js";
+import "./chunk-ZMNSRDMH.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-RQHJBTEU.js";
 export {
   ExpandedToolDetail,