@tangle-network/sandbox-ui 0.79.0 → 0.81.0

package/dist/chunk-R4AR3TKR.js

@@ -0,0 +1,424 @@
+import {
+  BrandLogo,
+  ModelBrandStack,
+  brandInfo,
+  canonicalModelId,
+  normalizeBrandKey,
+  resolveModelBrandIdentity
+} from "./chunk-I3G23XHN.js";
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/dashboard/model-picker.tsx
+import * as React from "react";
+import { ChevronDown, Search, Sparkles, Loader2 } from "lucide-react";
+import * as Popover from "@radix-ui/react-dropdown-menu";
+import { jsx, jsxs } from "react/jsx-runtime";
+function modelDedupKey(model) {
+  const canonical = canonicalModelId(model).toLowerCase();
+  const segments = canonical.split("/").filter(Boolean);
+  const modelId = segments[segments.length - 1] ?? canonical;
+  const lab = resolveModelBrandIdentity(model).lab.key;
+  return lab === "unknown" ? canonical : `${lab}/${modelId}`;
+}
+function dedupeModels(models) {
+  const byKey = /* @__PURE__ */ new Map();
+  const result = [];
+  for (const model of models) {
+    const key = modelDedupKey(model);
+    const existingIndex = byKey.get(key);
+    if (existingIndex === void 0) {
+      byKey.set(key, result.length);
+      result.push(model);
+      continue;
+    }
+    const existing = result[existingIndex];
+    if (!existing.featured && model.featured) {
+      result[existingIndex] = model;
+    }
+  }
+  return result;
+}
+var DEFAULT_FEATURED_MODEL_IDS = [
+  "anthropic/claude-opus-4-8",
+  "anthropic/claude-sonnet-4-6",
+  "openai/gpt-5.4",
+  "google/gemini-2.5-pro",
+  "deepseek/deepseek-v3"
+];
+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 PRIORITY_MODEL_GROUPS = ["anthropic", "openai", "google", "deepseek", "zai", "moonshot"];
+function modelGroupKey(model) {
+  const identity = resolveModelBrandIdentity(model);
+  if (identity.lab.key !== "unknown") return identity.lab.key;
+  if (identity.host.key !== "unknown") return identity.host.key;
+  return (model._provider ?? model.provider ?? "other").toLowerCase();
+}
+function modelGroupLabel(key) {
+  if (key === "moonshot") return "Kimi";
+  const brand = brandInfo(normalizeBrandKey(key));
+  return brand.key === "unknown" ? key : brand.label;
+}
+function modelGroupRank(key) {
+  const priorityIndex = PRIORITY_MODEL_GROUPS.indexOf(normalizeBrandKey(key));
+  return priorityIndex === -1 ? Number.POSITIVE_INFINITY : priorityIndex;
+}
+function compareModelGroups(a, b) {
+  const aRank = modelGroupRank(a);
+  const bRank = modelGroupRank(b);
+  if (aRank !== bRank) return aRank - bRank;
+  return modelGroupLabel(a).localeCompare(modelGroupLabel(b));
+}
+function compareModelsByDisplayName(a, b) {
+  return (a.name ?? a.id).localeCompare(b.name ?? b.id);
+}
+function stripBrandPrefix(name, identity) {
+  if (!identity) return name;
+  for (const label of [identity.lab.label, identity.host.label]) {
+    if (!label) continue;
+    if (name.toLowerCase().startsWith(label.toLowerCase())) {
+      const after = name.slice(label.length);
+      if (/^[\s:]/.test(after)) {
+        const rest = after.replace(/^[\s:]+/, "").trim();
+        if (rest) return rest;
+      }
+    }
+  }
+  return name;
+}
+function ModelPicker({
+  value,
+  onChange,
+  models,
+  loading = false,
+  recents,
+  popular,
+  excludeProviders,
+  modalities,
+  variant = "field",
+  label = "Model",
+  placeholder = "Choose a model",
+  className,
+  triggerClassName,
+  disabled,
+  side,
+  avoidCollisions
+}) {
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const searchInputRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!open) return;
+    const frame = requestAnimationFrame(() => {
+      searchInputRef.current?.focus();
+      searchInputRef.current?.select();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  const deduped = React.useMemo(() => dedupeModels(models), [models]);
+  const filtered = React.useMemo(() => {
+    const excluded = new Set((excludeProviders ?? []).map((p) => p.toLowerCase()));
+    const allowedModalities = modalities ? new Set(modalities) : null;
+    const q = query.trim().toLowerCase();
+    return deduped.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();
+      const identity = resolveModelBrandIdentity(m);
+      return id.includes(q) || name.includes(q) || provider.includes(q) || identity.host.label.toLowerCase().includes(q) || identity.lab.label.toLowerCase().includes(q);
+    });
+  }, [deduped, query, modalities, excludeProviders]);
+  const grouped = React.useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const m of filtered) {
+      const key = modelGroupKey(m);
+      const list = groups.get(key);
+      if (list) list.push(m);
+      else groups.set(key, [m]);
+    }
+    return Array.from(groups.entries()).map(([key, list]) => [key, [...list].sort(compareModelsByDisplayName)]).sort(([a], [b]) => compareModelGroups(a, b));
+  }, [filtered]);
+  const current = React.useMemo(
+    () => models.find((m) => canonicalModelId(m) === value),
+    [models, value]
+  );
+  const currentIdentity = current ? resolveModelBrandIdentity(current) : null;
+  const currentLabel = stripBrandPrefix(
+    current?.name ?? current?.id ?? value,
+    currentIdentity
+  );
+  const recentIds = React.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 popularModels = React.useMemo(() => {
+    if (!popular?.length) return [];
+    const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
+    return popular.map((id) => lookup.get(id)).filter((m) => Boolean(m));
+  }, [popular, models]);
+  const featuredModels = React.useMemo(() => {
+    const flagged = deduped.filter((m) => m.featured);
+    if (flagged.length > 0) return flagged;
+    const seedKeys = new Set(
+      DEFAULT_FEATURED_MODEL_IDS.map((id) => modelDedupKey({ id }))
+    );
+    const seeded = deduped.filter((m) => seedKeys.has(modelDedupKey(m)));
+    const order = DEFAULT_FEATURED_MODEL_IDS.map((id) => modelDedupKey({ id }));
+    return seeded.sort(
+      (a, b) => order.indexOf(modelDedupKey(a)) - order.indexOf(modelDedupKey(b))
+    );
+  }, [deduped]);
+  const handleSelect = (id) => {
+    onChange(id);
+    setOpen(false);
+    setQuery("");
+  };
+  const triggerLabel = label ? `${label}: ${currentLabel || placeholder}` : currentLabel || placeholder;
+  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": triggerLabel,
+      disabled,
+      className: cn(
+        "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
+        "px-2.5 text-xs font-medium text-foreground shadow-sm",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className,
+        triggerClassName
+      ),
+      children: [
+        currentIdentity ? /* @__PURE__ */ jsx(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": triggerLabel,
+      disabled,
+      className: cn(
+        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
+        "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        className,
+        triggerClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          currentIdentity && /* @__PURE__ */ jsx(ModelBrandStack, { identity: currentIdentity, size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", current ? "text-foreground font-medium" : "text-muted-foreground"), children: currentLabel || placeholder })
+        ] }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", variant === "field" ? className : void 0), children: [
+    variant === "field" && label && /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          side,
+          sideOffset: 4,
+          align: variant === "pill" ? "start" : "start",
+          avoidCollisions,
+          collisionPadding: 24,
+          className: cn(
+            "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
+            // Cap to the smaller of the fixed height and the viewport space on
+            // the open side, so a list pinned downward never runs off-screen.
+            "max-h-[min(440px,var(--radix-dropdown-menu-content-available-height))] overflow-hidden flex flex-col",
+            "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
+            "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__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: [
+              /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key.length === 1) e.stopPropagation();
+                  },
+                  placeholder: "Search models...",
+                  autoFocus: true,
+                  className: "flex-1 bg-transparent text-sm font-medium outline-none placeholder:font-normal placeholder:text-muted-foreground"
+                }
+              ),
+              loading && /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+              !query && featuredModels.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Recommended", tone: "featured", children: featuredModels.map((m) => /* @__PURE__ */ jsx(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect,
+                  featured: true
+                },
+                `featured-${canonicalModelId(m)}`
+              )) }),
+              !query && popularModels.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Top models", tone: "featured", children: popularModels.map((m) => /* @__PURE__ */ jsx(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect,
+                  featured: true
+                },
+                `popular-${canonicalModelId(m)}`
+              )) }),
+              !query && recentIds.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Recent", children: recentIds.map((m) => /* @__PURE__ */ jsx(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect
+                },
+                `recent-${canonicalModelId(m)}`
+              )) }),
+              grouped.length === 0 ? /* @__PURE__ */ jsx("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(([groupKey, list]) => /* @__PURE__ */ jsx(Section, { label: modelGroupLabel(groupKey), children: list.map((m) => /* @__PURE__ */ jsx(
+                ModelRow,
+                {
+                  model: m,
+                  active: canonicalModelId(m) === value,
+                  onSelect: handleSelect
+                },
+                canonicalModelId(m)
+              )) }, groupKey))
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 text-[10px] text-muted-foreground", children: [
+              filtered.length,
+              " of ",
+              deduped.length,
+              " model",
+              deduped.length === 1 ? "" : "s"
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function Section({ label, children, tone }) {
+  const identity = brandInfo(normalizeBrandKey(label));
+  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-1.5 px-3 pt-1.5 pb-0.5 text-[10px] font-mono uppercase tracking-widest",
+          tone === "featured" ? "text-primary" : "text-muted-foreground"
+        ),
+        children: [
+          identity.key !== "unknown" && /* @__PURE__ */ jsx(BrandLogo, { brand: identity, size: "xs" }),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function PickerItem({
+  onSelect,
+  active,
+  featured,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover.Item,
+    {
+      onSelect: (e) => {
+        e.preventDefault();
+        onSelect();
+      },
+      className: cn(
+        "flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 outline-none",
+        "transition-colors duration-[var(--transition-fast)]",
+        "hover:bg-accent/50 focus:bg-accent/50",
+        featured && "mx-1 border border-primary/10 bg-primary/[0.04] px-2.5",
+        active && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
+      ),
+      children
+    }
+  );
+}
+function ModelRow({
+  model,
+  active,
+  onSelect,
+  featured
+}) {
+  const id = canonicalModelId(model);
+  const pricing = formatPricing(model.pricing);
+  const ctx = formatContext(model.context_length);
+  const identity = resolveModelBrandIdentity(model);
+  const via = !identity.combined ? identity.host.label : null;
+  return /* @__PURE__ */ jsxs(PickerItem, { onSelect: () => onSelect(id), active, featured, children: [
+    /* @__PURE__ */ jsx(ModelBrandStack, { identity, size: "md" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-medium", children: model.name ?? model.id }),
+        via && /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-1.5 py-px text-[9px] font-medium text-muted-foreground", children: [
+          "via ",
+          via
+        ] })
+      ] }),
+      (ctx || pricing) && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+        ctx && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: ctx }),
+        ctx && pricing && /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-40", children: "\xB7" }),
+        pricing && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono", children: pricing })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  modelDedupKey,
+  dedupeModels,
+  DEFAULT_FEATURED_MODEL_IDS,
+  formatPricing,
+  formatContext,
+  stripBrandPrefix,
+  ModelPicker
+};