@tangle-network/sandbox-ui 0.10.9 → 0.12.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