@tangle-network/sandbox-ui 0.10.9 → 0.11.0

package/dist/{chunk-Z5PSS3VD.js → chunk-NKUPJC34.js}

@@ -1274,9 +1274,376 @@ function BackendSelector({
   ] });
 }
 
+// src/dashboard/harness-picker.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var HARNESS_OPTIONS = [
+  {
+    type: "opencode",
+    label: "OpenCode",
+    description: "Default agent \u2014 broad model support, deterministic streaming"
+  },
+  {
+    type: "claude-code",
+    label: "Claude Code",
+    description: "Native Claude skills and tools (requires ANTHROPIC_API_KEY)"
+  },
+  {
+    type: "codex",
+    label: "Codex",
+    description: "OpenAI Codex CLI (requires OPENAI_API_KEY)"
+  },
+  {
+    type: "amp",
+    label: "AMP",
+    description: "Sourcegraph AMP agent"
+  },
+  {
+    type: "factory-droids",
+    label: "Factory Droids",
+    description: "Factory Droid agent"
+  },
+  {
+    type: "cli-base",
+    label: "CLI base (no agent)",
+    description: "Shell tools only \u2014 for non-AI scheduled tasks"
+  }
+];
+function HarnessPicker({
+  value,
+  onChange,
+  available,
+  optionsOverride,
+  label = "Agent harness",
+  ...rest
+}) {
+  const allowed = new Set(available ?? HARNESS_OPTIONS.map((h) => h.type));
+  const backends = HARNESS_OPTIONS.filter((h) => allowed.has(h.type)).map((h) => {
+    const override = optionsOverride?.[h.type];
+    return {
+      type: h.type,
+      label: override?.label ?? h.label,
+      description: override?.description ?? h.description
+    };
+  });
+  return /* @__PURE__ */ jsx12(
+    BackendSelector,
+    {
+      backends,
+      selected: value,
+      onChange: (next) => onChange(next),
+      label,
+      ...rest
+    }
+  );
+}
+
+// src/dashboard/model-picker.tsx
+import * as React4 from "react";
+import { ChevronDown as ChevronDown2, Search, Sparkles, Zap, Brain, Star, Loader2 } from "lucide-react";
+import * as Popover from "@radix-ui/react-dropdown-menu";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function canonicalModelId(model) {
+  const id = model.id;
+  if (id.includes("/")) return id;
+  const provider = model._provider ?? model.provider;
+  return provider ? `${provider}/${id}` : id;
+}
+function formatPricing(pricing) {
+  const prompt = Number(pricing?.prompt ?? 0);
+  const completion = Number(pricing?.completion ?? 0);
+  if (!prompt && !completion) return null;
+  const fmt = (n) => {
+    const perM = n * 1e6;
+    if (perM === 0) return "0";
+    if (perM >= 1) return `$${perM.toFixed(2)}`;
+    return `$${perM.toFixed(2)}`;
+  };
+  return `${fmt(prompt)} / ${fmt(completion)} per 1M`;
+}
+function formatContext(ctx) {
+  if (!ctx) return null;
+  if (ctx >= 1e6) return `${(ctx / 1e6).toFixed(1)}M ctx`;
+  if (ctx >= 1e3) return `${Math.round(ctx / 1e3)}k ctx`;
+  return `${ctx} ctx`;
+}
+var DEFAULT_PRESETS = [
+  {
+    id: "fast",
+    label: "Fast",
+    hint: "Cheapest, lowest latency",
+    icon: Zap,
+    match: (models) => {
+      const ids = models.map(canonicalModelId);
+      return ids.find((m) => /gpt-5\.\d+-mini$/.test(m)) ?? ids.find((m) => /gpt-5-mini$/.test(m)) ?? ids.find((m) => m.endsWith("/claude-haiku-4.5")) ?? ids.find((m) => /haiku/.test(m));
+    }
+  },
+  {
+    id: "balanced",
+    label: "Balanced",
+    hint: "Best value for most chat",
+    icon: Sparkles,
+    match: (models) => {
+      const ids = models.map(canonicalModelId);
+      return ids.find((m) => /^openai\/gpt-5\.\d+$/.test(m)) ?? ids.find((m) => /^openai\/gpt-5$/.test(m)) ?? ids.find((m) => m.endsWith("/claude-sonnet-4-6")) ?? ids.find((m) => /sonnet/.test(m));
+    }
+  },
+  {
+    id: "best",
+    label: "Best",
+    hint: "Hardest reasoning, highest quality",
+    icon: Brain,
+    match: (models) => {
+      const ids = models.map(canonicalModelId);
+      return ids.find((m) => /^openai\/gpt-5\.\d+-pro$/.test(m)) ?? ids.find((m) => /^openai\/o3$/.test(m)) ?? ids.find((m) => m.endsWith("/claude-opus-4-7")) ?? ids.find((m) => /opus/.test(m));
+    }
+  }
+];
+function ModelPicker({
+  value,
+  onChange,
+  models,
+  loading = false,
+  recents,
+  presets = DEFAULT_PRESETS,
+  excludeProviders,
+  modalities,
+  variant = "field",
+  label = "Model",
+  placeholder = "Choose a model",
+  className,
+  disabled
+}) {
+  const [query, setQuery] = React4.useState("");
+  const [open, setOpen] = React4.useState(false);
+  const filtered = React4.useMemo(() => {
+    const excluded = new Set((excludeProviders ?? []).map((p) => p.toLowerCase()));
+    const allowedModalities = modalities ? new Set(modalities) : null;
+    const q = query.trim().toLowerCase();
+    return models.filter((m) => {
+      const provider = (m._provider ?? m.provider ?? "").toLowerCase();
+      if (excluded.has(provider)) return false;
+      if (allowedModalities && m.architecture?.modality && !allowedModalities.has(m.architecture.modality)) return false;
+      if (!q) return true;
+      const id = canonicalModelId(m).toLowerCase();
+      const name = (m.name ?? "").toLowerCase();
+      return id.includes(q) || name.includes(q) || provider.includes(q);
+    });
+  }, [models, query, modalities, excludeProviders]);
+  const grouped = React4.useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const m of filtered) {
+      const provider = m._provider ?? m.provider ?? "other";
+      const list = groups.get(provider);
+      if (list) list.push(m);
+      else groups.set(provider, [m]);
+    }
+    return Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
+  }, [filtered]);
+  const current = React4.useMemo(
+    () => models.find((m) => canonicalModelId(m) === value),
+    [models, value]
+  );
+  const currentLabel = current?.name ?? current?.id ?? value;
+  const recentIds = React4.useMemo(() => {
+    if (!recents?.length) return [];
+    const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
+    return recents.map((id) => lookup.get(id)).filter((m) => Boolean(m)).slice(0, 4);
+  }, [recents, models]);
+  const handleSelect = (id) => {
+    onChange(id);
+    setOpen(false);
+    setQuery("");
+  };
+  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs11(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-border bg-card",
+        "px-2.5 py-1 text-xs font-medium text-foreground",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:border-primary/30 hover:bg-accent/30",
+        "focus:outline-none focus:border-primary/40",
+        "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx13(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
+        /* @__PURE__ */ jsx13("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx13(ChevronDown2, { className: "h-3 w-3 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs11(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: cn(
+        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
+        "border border-border bg-card px-3 py-2.5 text-sm text-left",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:border-primary/20 hover:bg-accent/30",
+        "focus:outline-none focus:border-primary/30",
+        "data-[state=open]:border-primary/30 data-[state=open]:bg-accent/30",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: cn("truncate", current ? "text-foreground font-medium" : "text-muted-foreground"), children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx13(ChevronDown2, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs11("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", variant === "field" ? className : void 0), children: [
+    variant === "field" && label && /* @__PURE__ */ jsx13("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs11(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx13(Popover.Trigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx13(Popover.Portal, { children: /* @__PURE__ */ jsxs11(
+        Popover.Content,
+        {
+          sideOffset: 4,
+          align: variant === "pill" ? "start" : "start",
+          className: cn(
+            "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
+            "max-h-[440px] overflow-hidden flex flex-col",
+            "rounded-[var(--radius-md)] border border-border bg-card shadow-[var(--shadow-dropdown)]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+              /* @__PURE__ */ jsx13(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx13(
+                "input",
+                {
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: "Search models...",
+                  autoFocus: true,
+                  className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                }
+              ),
+              loading && /* @__PURE__ */ jsx13(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
+            ] }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex-1 overflow-y-auto", children: [
+              !query && presets.length > 0 && /* @__PURE__ */ jsx13(Section, { label: "Presets", children: presets.map((preset) => {
+                const Icon2 = preset.icon ?? Star;
+                const matchedId = preset.match(models);
+                if (!matchedId) return null;
+                const matched = models.find((m) => canonicalModelId(m) === matchedId);
+                const isCurrent = matchedId === value;
+                return /* @__PURE__ */ jsxs11(
+                  PickerItem,
+                  {
+                    onSelect: () => handleSelect(matchedId),
+                    active: isCurrent,
+                    children: [
+                      /* @__PURE__ */ jsx13(Icon2, { className: "h-3.5 w-3.5 shrink-0 text-[var(--accent-text)]" }),
+                      /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium", children: preset.label }),
+                          /* @__PURE__ */ jsxs11("span", { className: "text-[10px] text-muted-foreground truncate", children: [
+                            "\u2192 ",
+                            matched?.name ?? matchedId
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx13("span", { className: "text-xs text-muted-foreground", children: preset.hint })
+                      ] })
+                    ]
+                  },
+                  preset.id
+                );
+              }) }),
+              !query && recentIds.length > 0 && /* @__PURE__ */ jsx13(Section, { label: "Recent", children: recentIds.map((m) => /* @__PURE__ */ jsx13(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect
+                },
+                `recent-${canonicalModelId(m)}`
+              )) }),
+              grouped.length === 0 ? /* @__PURE__ */ jsx13("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: loading ? "Loading models..." : query ? "No models match." : "No models available." }) : grouped.map(([provider, list]) => /* @__PURE__ */ jsx13(Section, { label: provider, children: list.map((m) => /* @__PURE__ */ jsx13(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect
+                },
+                canonicalModelId(m)
+              )) }, provider))
+            ] }),
+            /* @__PURE__ */ jsxs11("div", { className: "border-t border-border px-3 py-1.5 text-[10px] text-muted-foreground", children: [
+              filtered.length,
+              " of ",
+              models.length,
+              " model",
+              models.length === 1 ? "" : "s"
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function Section({ label, children }) {
+  return /* @__PURE__ */ jsxs11("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsx13("div", { className: "px-3 pt-1.5 pb-0.5 text-[10px] font-mono uppercase tracking-widest text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx13("div", { children })
+  ] });
+}
+function PickerItem({
+  onSelect,
+  active,
+  children
+}) {
+  return /* @__PURE__ */ jsx13(
+    Popover.Item,
+    {
+      onSelect: (e) => {
+        e.preventDefault();
+        onSelect();
+      },
+      className: cn(
+        "flex cursor-pointer items-start gap-2 px-3 py-2 outline-none",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:bg-accent/40 focus:bg-accent/40",
+        active && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+      ),
+      children
+    }
+  );
+}
+function ModelRow({
+  model,
+  active,
+  onSelect
+}) {
+  const id = canonicalModelId(model);
+  const pricing = formatPricing(model.pricing);
+  const ctx = formatContext(model.context_length);
+  return /* @__PURE__ */ jsx13(PickerItem, { onSelect: () => onSelect(id), active, children: /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium truncate", children: model.name ?? model.id }),
+      ctx && /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: ctx })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx13("span", { className: "truncate", children: id }),
+      pricing && /* @__PURE__ */ jsxs11(Fragment7, { children: [
+        /* @__PURE__ */ jsx13("span", { className: "shrink-0", children: "\xB7" }),
+        /* @__PURE__ */ jsx13("span", { className: "shrink-0 font-mono", children: pricing })
+      ] })
+    ] })
+  ] }) });
+}
+
 // src/dashboard/profile-selector.tsx
-import { Check as Check2, ChevronDown as ChevronDown2, Plus as Plus3, Settings } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Check as Check2, ChevronDown as ChevronDown3, Plus as Plus3, Settings } from "lucide-react";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function ProfileSelector({
   profiles,
   selectedId,
@@ -1291,77 +1658,77 @@ function ProfileSelector({
   const selected = profiles.find((p) => p.id === selectedId);
   const builtinProfiles = profiles.filter((p) => p.is_builtin);
   const customProfiles = profiles.filter((p) => !p.is_builtin);
-  return /* @__PURE__ */ jsxs11("div", { className, children: [
-    label && /* @__PURE__ */ jsx12("label", { className: "mb-2 block font-medium text-sm", children: label }),
-    /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(Button, { variant: "outline", className: "w-full justify-between", children: [
-        /* @__PURE__ */ jsx12("span", { className: "truncate", children: selected ? selected.name : placeholder }),
-        /* @__PURE__ */ jsx12(ChevronDown2, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+  return /* @__PURE__ */ jsxs12("div", { className, children: [
+    label && /* @__PURE__ */ jsx14("label", { className: "mb-2 block font-medium text-sm", children: label }),
+    /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(Button, { variant: "outline", className: "w-full justify-between", children: [
+        /* @__PURE__ */ jsx14("span", { className: "truncate", children: selected ? selected.name : placeholder }),
+        /* @__PURE__ */ jsx14(ChevronDown3, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
       ] }) }),
-      /* @__PURE__ */ jsxs11(DropdownMenuContent, { className: "w-[300px]", align: "start", children: [
-        /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs12(DropdownMenuContent, { className: "w-[300px]", align: "start", children: [
+        /* @__PURE__ */ jsxs12(
           DropdownMenuItem,
           {
             onClick: () => onSelect(null),
             className: "flex items-center justify-between",
             children: [
-              /* @__PURE__ */ jsx12("span", { children: placeholder }),
-              !selectedId && /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+              /* @__PURE__ */ jsx14("span", { children: placeholder }),
+              !selectedId && /* @__PURE__ */ jsx14(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
             ]
           }
         ),
-        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Built-in Profiles" }),
-          builtinProfiles.map((profile) => /* @__PURE__ */ jsxs11(
+        builtinProfiles.length > 0 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+          /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx14(DropdownMenuLabel, { children: "Built-in Profiles" }),
+          builtinProfiles.map((profile) => /* @__PURE__ */ jsxs12(
             DropdownMenuItem,
             {
               onClick: () => onSelect(profile),
               className: "flex flex-col items-start gap-1",
               children: [
-                /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
-                    profile.extends && /* @__PURE__ */ jsxs11(Badge, { variant: "secondary", className: "border-0 text-xs", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx14("span", { className: "font-medium", children: profile.name }),
+                    profile.extends && /* @__PURE__ */ jsxs12(Badge, { variant: "secondary", className: "border-0 text-xs", children: [
                       "extends ",
                       profile.extends
                     ] })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx14(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
                 ] }),
-                profile.description && /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
+                profile.description && /* @__PURE__ */ jsx14("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description })
               ]
             },
             profile.id
           ))
         ] }),
-        customProfiles.length > 0 && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Custom Profiles" }),
-          customProfiles.map((profile) => /* @__PURE__ */ jsxs11(
+        customProfiles.length > 0 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+          /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx14(DropdownMenuLabel, { children: "Custom Profiles" }),
+          customProfiles.map((profile) => /* @__PURE__ */ jsxs12(
             DropdownMenuItem,
             {
               onClick: () => onSelect(profile),
               className: "flex flex-col items-start gap-1",
               children: [
-                /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
-                    profile.model && /* @__PURE__ */ jsx12(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
+                /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx14("span", { className: "font-medium", children: profile.name }),
+                    profile.model && /* @__PURE__ */ jsx14(Badge, { variant: "secondary", className: "border-0 text-xs", children: profile.model.split("/").pop() })
                   ] }),
-                  selectedId === profile.id && /* @__PURE__ */ jsx12(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
+                  selectedId === profile.id && /* @__PURE__ */ jsx14(Check2, { className: "h-4 w-4 text-[var(--surface-success-text)]" })
                 ] }),
-                profile.description && /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
-                showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
-                  /* @__PURE__ */ jsxs11("span", { children: [
+                profile.description && /* @__PURE__ */ jsx14("span", { className: "line-clamp-1 text-muted-foreground text-xs", children: profile.description }),
+                showMetrics && profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs12("div", { className: "flex gap-3 text-muted-foreground text-xs", children: [
+                  /* @__PURE__ */ jsxs12("span", { children: [
                     profile.metrics.total_runs,
                     " runs"
                   ] }),
-                  /* @__PURE__ */ jsxs11("span", { children: [
+                  /* @__PURE__ */ jsxs12("span", { children: [
                     profile.metrics.success_rate.toFixed(0),
                     "% success"
                   ] }),
-                  /* @__PURE__ */ jsxs11("span", { children: [
+                  /* @__PURE__ */ jsxs12("span", { children: [
                     "~",
                     (profile.metrics.avg_duration_ms / 1e3).toFixed(1),
                     "s avg"
@@ -1372,26 +1739,26 @@ function ProfileSelector({
             profile.id
           ))
         ] }),
-        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs11(Fragment7, { children: [
-          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
-          onCreateClick && /* @__PURE__ */ jsxs11(
+        (onCreateClick || onManageClick) && /* @__PURE__ */ jsxs12(Fragment8, { children: [
+          /* @__PURE__ */ jsx14(DropdownMenuSeparator, {}),
+          onCreateClick && /* @__PURE__ */ jsxs12(
             DropdownMenuItem,
             {
               onClick: onCreateClick,
               className: "text-[var(--surface-info-text)]",
               children: [
-                /* @__PURE__ */ jsx12(Plus3, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx14(Plus3, { className: "mr-2 h-4 w-4" }),
                 "Create New Profile"
               ]
             }
           ),
-          onManageClick && /* @__PURE__ */ jsxs11(
+          onManageClick && /* @__PURE__ */ jsxs12(
             DropdownMenuItem,
             {
               onClick: onManageClick,
               className: "text-muted-foreground",
               children: [
-                /* @__PURE__ */ jsx12(Settings, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx14(Settings, { className: "mr-2 h-4 w-4" }),
                 "Manage Profiles"
               ]
             }
@@ -1417,26 +1784,26 @@ function ProfileComparison({
   const fastestProfile = profilesWithMetrics.reduce(
     (best, p) => (p.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) < (best.metrics?.avg_duration_ms ?? Number.POSITIVE_INFINITY) ? p : best
   );
-  return /* @__PURE__ */ jsxs11("div", { className: `rounded-lg border border-border p-4 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx12("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
-    /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
+  return /* @__PURE__ */ jsxs12("div", { className: `rounded-lg border border-border p-4 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx14("h4", { className: "mb-3 font-medium text-sm", children: "Profile Performance" }),
+    /* @__PURE__ */ jsx14("div", { className: "space-y-3", children: profilesWithMetrics.map((profile) => {
       const isBestSuccess = profile.id === bestSuccess.id;
       const isFastest = profile.id === fastestProfile.id;
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs12(
         "div",
         {
           className: "flex items-center justify-between gap-4",
           children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx12("span", { className: "font-medium", children: profile.name }),
-              isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] text-xs", children: "Best Success" }),
-              isFastest && !isBestSuccess && /* @__PURE__ */ jsx12(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Fastest" })
+            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx14("span", { className: "font-medium", children: profile.name }),
+              isBestSuccess && /* @__PURE__ */ jsx14(Badge, { className: "border border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)] text-xs", children: "Best Success" }),
+              isFastest && !isBestSuccess && /* @__PURE__ */ jsx14(Badge, { className: "border border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)] text-xs", children: "Fastest" })
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 text-sm", children: [
-              /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: "Success:" }),
+            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxs12("span", { children: [
+                /* @__PURE__ */ jsx14("span", { className: "text-muted-foreground", children: "Success:" }),
                 " ",
-                /* @__PURE__ */ jsxs11(
+                /* @__PURE__ */ jsxs12(
                   "span",
                   {
                     className: (profile.metrics?.success_rate ?? 0) >= 80 ? "text-[var(--surface-success-text)]" : (profile.metrics?.success_rate ?? 0) >= 50 ? "text-[var(--surface-warning-text)]" : "text-[var(--surface-danger-text)]",
@@ -1447,13 +1814,13 @@ function ProfileComparison({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("span", { children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: "Avg:" }),
+              /* @__PURE__ */ jsxs12("span", { children: [
+                /* @__PURE__ */ jsx14("span", { className: "text-muted-foreground", children: "Avg:" }),
                 " ",
                 ((profile.metrics?.avg_duration_ms ?? 0) / 1e3).toFixed(1),
                 "s"
               ] }),
-              /* @__PURE__ */ jsxs11("span", { className: "text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground", children: [
                 profile.metrics?.total_runs,
                 " runs"
               ] })
@@ -1472,12 +1839,12 @@ import {
   CheckCircle2,
   Clock as Clock2,
   ExternalLink,
-  Loader2,
+  Loader2 as Loader22,
   Timer,
   X,
   XCircle
 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var statusConfig = {
   pending: {
     icon: Clock2,
@@ -1488,7 +1855,7 @@ var statusConfig = {
     animate: false
   },
   running: {
-    icon: Loader2,
+    icon: Loader22,
     color: "text-primary",
     bg: "bg-[var(--accent-surface-soft)]",
     border: "border-border",
@@ -1561,19 +1928,19 @@ function VariantList({
   isActioning,
   className
 }) {
-  return /* @__PURE__ */ jsx13("div", { className: `space-y-2 ${className || ""}`, children: variants.map((variant) => {
+  return /* @__PURE__ */ jsx15("div", { className: `space-y-2 ${className || ""}`, children: variants.map((variant) => {
     const status = statusConfig[variant.status];
     const StatusIcon = status.icon;
     const isSelected = variant.id === selectedId;
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className: `cursor-pointer rounded-lg border px-3 py-2.5 transition-colors ${isSelected ? "border-primary/30 bg-[var(--accent-surface-soft)]" : "border-border bg-card hover:border-primary/20 hover:bg-muted/50"}`,
         onClick: () => onSelect?.(variant.id),
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs12(Badge, { className: `shrink-0 ${status.bg} ${status.border} ${status.color}`, children: [
-              /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs13(Badge, { className: `shrink-0 ${status.bg} ${status.border} ${status.color}`, children: [
+              /* @__PURE__ */ jsx15(
                 StatusIcon,
                 {
                   className: `mr-1 h-3 w-3 ${status.animate ? "animate-spin" : ""}`
@@ -1581,27 +1948,27 @@ function VariantList({
               ),
               status.label
             ] }),
-            /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium text-foreground", children: variant.label }),
-            variant.sublabel && /* @__PURE__ */ jsxs12("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx15("span", { className: "truncate text-sm font-medium text-foreground", children: variant.label }),
+            variant.sublabel && /* @__PURE__ */ jsxs13("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
               "(",
               variant.sublabel,
               ")"
             ] }),
-            variant.durationMs && /* @__PURE__ */ jsxs12("span", { className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx13(Timer, { className: "h-3 w-3" }),
+            variant.durationMs && /* @__PURE__ */ jsxs13("span", { className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx15(Timer, { className: "h-3 w-3" }),
               (variant.durationMs / 1e3).toFixed(1),
               "s"
             ] }),
-            /* @__PURE__ */ jsxs12("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
-              variant.outcome && /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsxs13("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+              variant.outcome && /* @__PURE__ */ jsx15(
                 Badge,
                 {
                   className: `${outcomeConfig[variant.outcome].bg} ${outcomeConfig[variant.outcome].border} ${outcomeConfig[variant.outcome].color}`,
                   children: outcomeConfig[variant.outcome].label
                 }
               ),
-              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs12(Fragment8, { children: [
-                /* @__PURE__ */ jsxs12(
+              variant.status === "completed" && variant.outcome === "pending_review" && onAccept && onReject && /* @__PURE__ */ jsxs13(Fragment9, { children: [
+                /* @__PURE__ */ jsxs13(
                   Button,
                   {
                     variant: "outline",
@@ -1613,12 +1980,12 @@ function VariantList({
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx13(Check3, { className: "mr-1 h-3 w-3" }),
+                      /* @__PURE__ */ jsx15(Check3, { className: "mr-1 h-3 w-3" }),
                       "Accept"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs12(
+                /* @__PURE__ */ jsxs13(
                   Button,
                   {
                     variant: "outline",
@@ -1630,13 +1997,13 @@ function VariantList({
                     },
                     disabled: isActioning === variant.id,
                     children: [
-                      /* @__PURE__ */ jsx13(X, { className: "mr-1 h-3 w-3" }),
+                      /* @__PURE__ */ jsx15(X, { className: "mr-1 h-3 w-3" }),
                       "Reject"
                     ]
                   }
                 )
               ] }),
-              variant.detailsUrl && /* @__PURE__ */ jsx13(
+              variant.detailsUrl && /* @__PURE__ */ jsx15(
                 Button,
                 {
                   variant: "ghost",
@@ -1646,13 +2013,13 @@ function VariantList({
                     e.stopPropagation();
                     window.open(variant.detailsUrl, "_blank");
                   },
-                  children: /* @__PURE__ */ jsx13(ExternalLink, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx15(ExternalLink, { className: "h-3.5 w-3.5" })
                 }
               )
             ] })
           ] }),
-          variant.error && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 text-xs text-[var(--surface-danger-text)]", children: variant.error }),
-          variant.summary && /* @__PURE__ */ jsx13("p", { className: "mt-1.5 line-clamp-2 text-xs text-muted-foreground", children: variant.summary })
+          variant.error && /* @__PURE__ */ jsx15("p", { className: "mt-1.5 text-xs text-[var(--surface-danger-text)]", children: variant.error }),
+          variant.summary && /* @__PURE__ */ jsx15("p", { className: "mt-1.5 line-clamp-2 text-xs text-muted-foreground", children: variant.summary })
         ]
       },
       variant.id
@@ -1691,6 +2058,12 @@ export {
   NewSandboxCard,
   SandboxTable,
   BackendSelector,
+  HARNESS_OPTIONS,
+  HarnessPicker,
+  canonicalModelId,
+  formatPricing,
+  formatContext,
+  ModelPicker,
   ProfileSelector,
   ProfileComparison,
   VariantList

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ah as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ai as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_MOBILE_WIDTH, G as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, aj as TeamRole, ak as Variant, ae as VariantList, af as VariantListProps, al as VariantOutcome, am as VariantStatus, an as canAdminSandbox, ag as useSidebar } from './variant-list-DAhiR-7S.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, at as DashboardProfile, h as DashboardUser, H as HARNESS_OPTIONS, i as HarnessPicker, j as HarnessPickerProps, k as HarnessType, I as Invoice, l as InvoiceTable, m as InvoiceTableProps, M as ModelInfo, n as ModelPicker, o as ModelPickerProps, p as ModelPickerVariant, q as ModelPreset, N as NavItem, r as NewSandboxCard, s as NewSandboxCardProps, t as PlanCardData, u as PlanCards, v as PlanCardsProps, au as PlanFeature, w as ProductVariant, x as ProfileAvatar, y as ProfileAvatarProps, z as ProfileComparison, A as ProfileComparisonProps, E as ProfileSelector, F as ProfileSelectorProps, R as RailButton, G as RailButtonProps, J as RailModeButton, K as RailModeButtonProps, L as RailSeparator, O as RailSeparatorProps, Q as ResourceMeter, S as ResourceMeterProps, T as SIDEBAR_MOBILE_WIDTH, U as SIDEBAR_PANEL_WIDTH, V as SIDEBAR_RAIL_WIDTH, W as SIDEBAR_TOTAL_WIDTH, X as SandboxCard, Y as SandboxCardData, Z as SandboxCardProps, _ as SandboxStatus, $ as SandboxTable, a0 as SandboxTableProps, a1 as Sidebar, a2 as SidebarContent, a3 as SidebarContentProps, a4 as SidebarPanel, a5 as SidebarPanelContent, a6 as SidebarPanelContentProps, a7 as SidebarPanelHeader, a8 as SidebarPanelHeaderProps, a9 as SidebarPanelProps, aa as SidebarProps, ab as SidebarProvider, ac as SidebarProviderProps, ad as SidebarRail, ae as SidebarRailFooter, af as SidebarRailFooterProps, ag as SidebarRailHeader, ah as SidebarRailHeaderProps, ai as SidebarRailNav, aj as SidebarRailNavProps, ak as SidebarRailProps, al as SidebarUser, av as TeamRole, aw as Variant, an as VariantList, ao as VariantListProps, ax as VariantOutcome, ay as VariantStatus, az as canAdminSandbox, ap as canonicalModelId, aq as formatContext, ar as formatPricing, as as useSidebar } from './variant-list-BrHYcBCk.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint, i as formatPrice } from './usage-chart-CPTcNlGs.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { a as TemplateCard, T as TemplateCardData, b as TemplateCardProps } from './template-card-BAtvcAkU.js';

package/dist/dashboard.js

@@ -7,7 +7,10 @@ import {
   ClusterStatusBar,
   CreditBalance,
   DashboardLayout,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InvoiceTable,
+  ModelPicker,
   NewSandboxCard,
   PlanCards,
   ProfileAvatar,
@@ -35,8 +38,11 @@ import {
   SidebarRailNav,
   VariantList,
   canAdminSandbox,
+  canonicalModelId,
+  formatContext,
+  formatPricing,
   useSidebar
-} from "./chunk-Z5PSS3VD.js";
+} from "./chunk-NKUPJC34.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -931,8 +937,11 @@ export {
   CreditBalance,
   DashboardLayout,
   GitPanel,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InfoPanel,
   InvoiceTable,
+  ModelPicker,
   NetworkConfig,
   NewSandboxCard,
   PlanCards,
@@ -970,6 +979,9 @@ export {
   UsageSummary,
   VariantList,
   canAdminSandbox,
+  canonicalModelId,
+  formatContext,
   formatPrice,
+  formatPricing,
   useSidebar
 };

package/dist/globals.css

@@ -1139,6 +1139,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[440px\] {
+    max-height: 440px;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1343,6 +1346,9 @@
   .w-\[var\(--indicator-dot-size\)\] {
     width: var(--indicator-dot-size);
   }
+  .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
+    width: var(--radix-dropdown-menu-trigger-width);
+  }
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
@@ -1403,12 +1409,18 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
+  .max-w-\[160px\] {
+    max-width: 160px;
+  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-\[460px\] {
+    max-width: 460px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1448,6 +1460,9 @@
   .min-w-\[180px\] {
     min-width: 180px;
   }
+  .min-w-\[320px\] {
+    min-width: 320px;
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -2602,6 +2617,9 @@
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2641,6 +2659,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FileNode, a as FileTabData, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_MOBILE_WIDTH, G as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, ad as TopNavLink, ae as VariantList, af as VariantListProps, ag as useSidebar } from './variant-list-DAhiR-7S.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, H as HARNESS_OPTIONS, i as HarnessPicker, j as HarnessPickerProps, k as HarnessType, I as Invoice, l as InvoiceTable, m as InvoiceTableProps, M as ModelInfo, n as ModelPicker, o as ModelPickerProps, p as ModelPickerVariant, q as ModelPreset, N as NavItem, r as NewSandboxCard, s as NewSandboxCardProps, P as PanelConfig, t as PlanCardData, u as PlanCards, v as PlanCardsProps, w as ProductVariant, x as ProfileAvatar, y as ProfileAvatarProps, z as ProfileComparison, A as ProfileComparisonProps, E as ProfileSelector, F as ProfileSelectorProps, R as RailButton, G as RailButtonProps, J as RailModeButton, K as RailModeButtonProps, L as RailSeparator, O as RailSeparatorProps, Q as ResourceMeter, S as ResourceMeterProps, T as SIDEBAR_MOBILE_WIDTH, U as SIDEBAR_PANEL_WIDTH, V as SIDEBAR_RAIL_WIDTH, W as SIDEBAR_TOTAL_WIDTH, X as SandboxCard, Y as SandboxCardData, Z as SandboxCardProps, _ as SandboxStatus, $ as SandboxTable, a0 as SandboxTableProps, a1 as Sidebar, a2 as SidebarContent, a3 as SidebarContentProps, a4 as SidebarPanel, a5 as SidebarPanelContent, a6 as SidebarPanelContentProps, a7 as SidebarPanelHeader, a8 as SidebarPanelHeaderProps, a9 as SidebarPanelProps, aa as SidebarProps, ab as SidebarProvider, ac as SidebarProviderProps, ad as SidebarRail, ae as SidebarRailFooter, af as SidebarRailFooterProps, ag as SidebarRailHeader, ah as SidebarRailHeaderProps, ai as SidebarRailNav, aj as SidebarRailNavProps, ak as SidebarRailProps, al as SidebarUser, am as TopNavLink, an as VariantList, ao as VariantListProps, ap as canonicalModelId, aq as formatContext, ar as formatPricing, as as useSidebar } from './variant-list-BrHYcBCk.js';
 export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-CPTcNlGs.js';
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -189,7 +189,10 @@ import {
   ClusterStatusBar,
   CreditBalance,
   DashboardLayout,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InvoiceTable,
+  ModelPicker,
   NewSandboxCard,
   PlanCards,
   ProfileAvatar,
@@ -216,8 +219,11 @@ import {
   SidebarRailHeader,
   SidebarRailNav,
   VariantList,
+  canonicalModelId,
+  formatContext,
+  formatPricing,
   useSidebar
-} from "./chunk-Z5PSS3VD.js";
+} from "./chunk-NKUPJC34.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -428,6 +434,8 @@ export {
   GitHubLoginButton,
   GlobResultsPreview,
   GrepResultsPreview,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InlineCode,
   InlineThinkingItem,
   InlineToolItem,
@@ -438,6 +446,7 @@ export {
   Logo,
   Markdown,
   MessageList,
+  ModelPicker,
   NewSandboxCard,
   OpenUIArtifactRenderer,
   PlanCards,
@@ -530,12 +539,15 @@ export {
   WriteFilePreview,
   badgeVariants,
   buttonVariants,
+  canonicalModelId,
   cn,
   copyText,
   createAuthFetcher,
   filterFileTree,
   formatBytes,
+  formatContext,
   formatDuration,
+  formatPricing,
   formatUptime,
   getToolCategory,
   getToolDisplayMetadata,

package/dist/styles.css

@@ -1139,6 +1139,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[440px\] {
+    max-height: 440px;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1343,6 +1346,9 @@
   .w-\[var\(--indicator-dot-size\)\] {
     width: var(--indicator-dot-size);
   }
+  .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
+    width: var(--radix-dropdown-menu-trigger-width);
+  }
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
@@ -1403,12 +1409,18 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
+  .max-w-\[160px\] {
+    max-width: 160px;
+  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-\[460px\] {
+    max-width: 460px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1448,6 +1460,9 @@
   .min-w-\[180px\] {
     min-width: 180px;
   }
+  .min-w-\[320px\] {
+    min-width: 320px;
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -2602,6 +2617,9 @@
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2641,6 +2659,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }

package/dist/{variant-list-DAhiR-7S.d.ts → variant-list-BrHYcBCk.d.ts}

@@ -358,6 +358,125 @@ interface BackendSelectorProps {
 }
 declare function BackendSelector({ backends, selected, onChange, label, placeholder, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Sandbox agent harness types — mirrors `BackendType` from
+ * `@tangle-network/sandbox` SDK. Kept in lockstep with that enum:
+ * if the SDK adds a backend, add it here too.
+ */
+type HarnessType = "opencode" | "claude-code" | "codex" | "amp" | "factory-droids" | "cli-base";
+interface HarnessOption extends Backend {
+    type: HarnessType;
+}
+/**
+ * Default option list with human-readable copy. Order is curated so the
+ * recommended choice (`opencode`) appears first; `cli-base` (no agent) last.
+ */
+declare const HARNESS_OPTIONS: readonly HarnessOption[];
+interface HarnessPickerProps extends Omit<BackendSelectorProps, "backends" | "selected" | "onChange"> {
+    value: HarnessType;
+    onChange: (next: HarnessType) => void;
+    /** Filter the available harnesses (e.g. by plan tier). Defaults to all. */
+    available?: ReadonlyArray<HarnessType>;
+    /** Override or extend the option metadata. Keys are HarnessType. */
+    optionsOverride?: Partial<Record<HarnessType, Partial<Omit<HarnessOption, "type">>>>;
+}
+/**
+ * Type-safe harness/backend selector for sandbox-backed agent products.
+ *
+ * Wraps the generic {@link BackendSelector} with the canonical harness list
+ * baked in, so consumers don't have to re-declare it (or risk drifting from
+ * the SDK enum).
+ */
+declare function HarnessPicker({ value, onChange, available, optionsOverride, label, ...rest }: HarnessPickerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Wire-format model entry as returned by `/v1/models` on the Tangle Router
+ * (and most OpenAI-compatible gateways). Field names match the upstream
+ * response so consumers can pass `data.data` straight through.
+ */
+interface ModelInfo {
+    /** Provider-local id, e.g. "gpt-5.4" or "anthropic/claude-sonnet-4-6". */
+    id: string;
+    /** Human label (defaults to id if absent). */
+    name?: string;
+    /** Provider key, e.g. "openai", "anthropic". Underscored for compat with router. */
+    _provider?: string;
+    /** Alternative provider field on some gateways. */
+    provider?: string;
+    /**
+     * Per-token prices in USD as decimal strings. Multiply by 1_000_000 for
+     * the conventional $/M tokens display.
+     */
+    pricing?: {
+        prompt?: string | null;
+        completion?: string | null;
+    };
+    context_length?: number;
+    description?: string | null;
+    architecture?: {
+        modality?: string;
+        input_modalities?: string[];
+        output_modalities?: string[];
+    };
+}
+/**
+ * Curated preset bucket. Three are surfaced by default — they map to typical
+ * cost/quality tradeoffs without forcing the consumer to pick a specific
+ * model. `match` resolves the preset against the loaded model list.
+ */
+interface ModelPreset {
+    id: "fast" | "balanced" | "best" | string;
+    label: string;
+    hint: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /**
+     * Pick the canonical model id for this preset given the loaded list.
+     * Should return undefined if no acceptable model is loaded yet.
+     */
+    match: (models: ModelInfo[]) => string | undefined;
+}
+type ModelPickerVariant = "field" | "pill";
+interface ModelPickerProps {
+    /** Canonical model id (provider-prefixed, e.g. "openai/gpt-5.4"). */
+    value: string;
+    onChange: (modelId: string) => void;
+    /** Models to choose from. Pass `[]` while loading. */
+    models: ModelInfo[];
+    /** Show the loading state (overrides empty-list copy). */
+    loading?: boolean;
+    /** Recently-used canonical ids to surface at the top. */
+    recents?: ReadonlyArray<string>;
+    /**
+     * Curated presets shown above the full list. Defaults to Fast/Balanced/Best
+     * resolved against common gpt-5/Claude families.
+     */
+    presets?: ReadonlyArray<ModelPreset>;
+    /** Drop providers from the picker entirely (e.g. "audio", "embedding"). */
+    excludeProviders?: ReadonlyArray<string>;
+    /** Restrict to these architectures (e.g. ["text"]). Default: all. */
+    modalities?: ReadonlyArray<string>;
+    /** Trigger appearance. "field" = full-width form field; "pill" = inline chat input pill. */
+    variant?: ModelPickerVariant;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+/**
+ * Resolve the canonical id for a model. Some upstreams already prefix the
+ * provider in the id (e.g. "anthropic/claude-haiku-4.5"); others put it in
+ * `_provider` and leave the id bare. Always returns "<provider>/<model>"
+ * unless the id is already prefixed.
+ */
+declare function canonicalModelId(model: ModelInfo): string;
+/** Format $/M tokens. Returns null if pricing is missing or zero. */
+declare function formatPricing(pricing: ModelInfo["pricing"]): string | null;
+/** Format context length compactly (e.g. 200_000 → "200k"). */
+declare function formatContext(ctx: number | undefined): string | null;
+declare function ModelPicker({ value, onChange, models, loading, recents, presets, excludeProviders, modalities, variant, label, placeholder, className, disabled, }: ModelPickerProps): react_jsx_runtime.JSX.Element;
+
 interface Profile {
     id: string;
     name: string;
@@ -418,4 +537,4 @@ interface VariantListProps {
 }
 declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
 
-export { type SidebarPanelHeaderProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_PANEL_WIDTH as G, SIDEBAR_RAIL_WIDTH as H, type Invoice as I, SIDEBAR_TOTAL_WIDTH as J, SandboxCard as K, type SandboxCardData as L, type SandboxCardProps as M, type NavItem as N, type SandboxStatus as O, type PanelConfig as P, SandboxTable as Q, RailButton as R, SIDEBAR_MOBILE_WIDTH as S, type SandboxTableProps as T, Sidebar as U, SidebarContent as V, type SidebarContentProps as W, SidebarPanel as X, SidebarPanelContent as Y, type SidebarPanelContentProps as Z, SidebarPanelHeader as _, BackendSelector as a, type SidebarPanelProps as a0, type SidebarProps as a1, SidebarProvider as a2, type SidebarProviderProps as a3, SidebarRail as a4, SidebarRailFooter as a5, type SidebarRailFooterProps as a6, SidebarRailHeader as a7, type SidebarRailHeaderProps as a8, SidebarRailNav as a9, type SidebarRailNavProps as aa, type SidebarRailProps as ab, type SidebarUser as ac, type TopNavLink as ad, VariantList as ae, type VariantListProps as af, useSidebar as ag, type Profile as ah, type PlanFeature as ai, type TeamRole as aj, type Variant as ak, type VariantOutcome as al, type VariantStatus as am, canAdminSandbox as an, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };
+export { SandboxTable as $, type ProfileComparisonProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ProfileSelector as E, type ProfileSelectorProps as F, type RailButtonProps as G, HARNESS_OPTIONS as H, type Invoice as I, RailModeButton as J, type RailModeButtonProps as K, RailSeparator as L, type ModelInfo as M, type NavItem as N, type RailSeparatorProps as O, type PanelConfig as P, ResourceMeter as Q, RailButton as R, type ResourceMeterProps as S, SIDEBAR_MOBILE_WIDTH as T, SIDEBAR_PANEL_WIDTH as U, SIDEBAR_RAIL_WIDTH as V, SIDEBAR_TOTAL_WIDTH as W, SandboxCard as X, type SandboxCardData as Y, type SandboxCardProps as Z, type SandboxStatus as _, BackendSelector as a, type SandboxTableProps as a0, Sidebar as a1, SidebarContent as a2, type SidebarContentProps as a3, SidebarPanel as a4, SidebarPanelContent as a5, type SidebarPanelContentProps as a6, SidebarPanelHeader as a7, type SidebarPanelHeaderProps as a8, type SidebarPanelProps as a9, type SidebarProps as aa, SidebarProvider as ab, type SidebarProviderProps as ac, SidebarRail as ad, SidebarRailFooter as ae, type SidebarRailFooterProps as af, SidebarRailHeader as ag, type SidebarRailHeaderProps as ah, SidebarRailNav as ai, type SidebarRailNavProps as aj, type SidebarRailProps as ak, type SidebarUser as al, type TopNavLink as am, VariantList as an, type VariantListProps as ao, canonicalModelId as ap, formatContext as aq, formatPricing as ar, useSidebar as as, type Profile as at, type PlanFeature as au, type TeamRole as av, type Variant as aw, type VariantOutcome as ax, type VariantStatus as ay, canAdminSandbox as az, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, HarnessPicker as i, type HarnessPickerProps as j, type HarnessType as k, InvoiceTable as l, type InvoiceTableProps as m, ModelPicker as n, type ModelPickerProps as o, type ModelPickerVariant as p, type ModelPreset as q, NewSandboxCard as r, type NewSandboxCardProps as s, type PlanCardData as t, PlanCards as u, type PlanCardsProps as v, type ProductVariant as w, ProfileAvatar as x, type ProfileAvatarProps as y, ProfileComparison as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.10.9",
+  "version": "0.11.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",