@tangle-network/sandbox-ui 0.80.0 → 0.82.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
+};

package/dist/{chunk-UFVXAJSA.js → chunk-YBFGWPUF.js}

@@ -5,14 +5,16 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-IWIZ7RZE.js";
+} from "./chunk-2T6KBMLN.js";
 import {
-  ModelBrandStack,
   ModelPicker,
-  canonicalModelId,
-  resolveModelBrandIdentity,
   stripBrandPrefix
-} from "./chunk-L62ZT6RS.js";
+} from "./chunk-R4AR3TKR.js";
+import {
+  ModelBrandStack,
+  canonicalModelId,
+  resolveModelBrandIdentity
+} from "./chunk-I3G23XHN.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";

package/dist/dashboard.d.ts

@@ -3,10 +3,11 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import { HarnessType } from '@tangle-network/agent-interface';
 export { HarnessType } from '@tangle-network/agent-interface';
-export { D as DEFAULT_FEATURED_MODEL_IDS, M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, e as dedupeModels, f as formatContext, g as formatPricing, m as modelDedupKey } from './model-picker-COjPVMzg.js';
+import * as Popover from '@radix-ui/react-dropdown-menu';
+import { b as ModelInfo } from './model-brand-CsFykzMA.js';
+export { M as ModelBrandIdentity, a as ModelBrandStack, c as canonicalModelId, m as modelBrandFor } from './model-brand-CsFykzMA.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
 export { E as ExposedPort, P as PortsList, a as PortsListProps } from './ports-list-DfG0VfPt.js';
-import '@radix-ui/react-dropdown-menu';
 
 interface SidebarUser {
     email: string;
@@ -781,6 +782,82 @@ interface HarnessLogoProps {
  */
 declare function HarnessLogo({ type, size, className }: HarnessLogoProps): react_jsx_runtime.JSX.Element;
 
+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>;
+    /**
+     * Canonical model ids to surface in a "Popular" section above the full
+     * list. Each id is resolved against `models`; ids not present in the
+     * loaded catalog are silently skipped, so callers can pass a stable
+     * curation list without worrying about provider availability.
+     */
+    popular?: ReadonlyArray<string>;
+    /** 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;
+    /**
+     * Extra classes merged onto the trigger button itself (after the
+     * built-in defaults, so callers can override sizing/radius/font to
+     * match a surrounding form). Distinct from `className`, which on the
+     * "field" variant styles the outer wrapper.
+     */
+    triggerClassName?: string;
+    disabled?: boolean;
+    /** Side the menu opens toward. Defaults to Radix's "bottom". */
+    side?: Popover.DropdownMenuContentProps["side"];
+    /**
+     * Let Radix flip the menu to the opposite side when it would overflow the
+     * viewport. Defaults to `true` (Radix default). Pass `false` to pin the menu
+     * to `side` — e.g. a composer floating in open space that should always open
+     * downward rather than flipping up over the heading.
+     */
+    avoidCollisions?: boolean;
+}
+/**
+ * Stable key used to collapse catalog duplicates. The Tangle Router lists the
+ * same underlying model under several host prefixes (e.g. `openai/gpt-5.4`,
+ * `tcloud/gpt-5.4`, `openrouter/openai/gpt-5.4`); they all name one model and
+ * should occupy a single row. The key is `<lab>/<model-id>`: the authoring lab
+ * (inferred via {@link resolveModelBrandIdentity}, which already maps
+ * `gpt-5.4` → openai, `kimi-k2` → moonshot, etc.) plus the final id segment,
+ * so a model collapses to one identity regardless of which host serves it.
+ */
+declare function modelDedupKey(model: ModelInfo): string;
+/**
+ * Collapse catalog duplicates to one row per {@link modelDedupKey}. When a
+ * model is served under multiple hosts the preferred row wins: a `featured`
+ * row beats a non-featured one, otherwise the first occurrence is kept (so
+ * caller-controlled catalog order still decides ties). Input order is
+ * preserved for the surviving rows.
+ */
+declare function dedupeModels(models: ReadonlyArray<ModelInfo>): ModelInfo[];
+/**
+ * Fallback "Recommended" seed — latest frontier models per major lab, matched
+ * by {@link modelDedupKey} against the loaded catalog. Used only when no
+ * catalog row carries an explicit `featured` flag, so a standard router
+ * catalog still gets a curated top section without per-deployment config.
+ */
+declare const DEFAULT_FEATURED_MODEL_IDS: ReadonlyArray<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, popular, excludeProviders, modalities, variant, label, placeholder, className, triggerClassName, disabled, side, avoidCollisions, }: ModelPickerProps): react_jsx_runtime.JSX.Element;
+
 type ProductVariant = "sandbox";
 interface NavItem {
     id: string;
@@ -1269,4 +1346,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type AppearanceController, type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailCollapseToggle, type RailCollapseToggleProps, RailExpandable, type RailExpandableProps, type RailExpandableSubItem, RailFlyout, type RailFlyoutProps, RailHeader, type RailHeaderProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, RailTooltip, type RailTooltipProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, type ThemeMode, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar };
+export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type AppearanceController, type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DEFAULT_FEATURED_MODEL_IDS, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, ModelInfo, ModelPicker, type ModelPickerProps, type ModelPickerVariant, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailCollapseToggle, type RailCollapseToggleProps, RailExpandable, type RailExpandableProps, type RailExpandableSubItem, RailFlyout, type RailFlyoutProps, RailHeader, type RailHeaderProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, RailTooltip, type RailTooltipProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, type ThemeMode, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, chatCapableHarnesses, dedupeModels, formatContext, formatPricing, modelDedupKey, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -71,16 +71,20 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-IWIZ7RZE.js";
+} from "./chunk-2T6KBMLN.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
-  canonicalModelId,
   dedupeModels,
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-L62ZT6RS.js";
+} from "./chunk-R4AR3TKR.js";
+import {
+  ModelBrandStack,
+  canonicalModelId,
+  modelBrandFor
+} from "./chunk-I3G23XHN.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 export {
@@ -101,6 +105,7 @@ export {
   InfoPanel,
   InvoiceTable,
   MetricAreaChart,
+  ModelBrandStack,
   ModelPicker,
   NetworkConfig,
   NewSandboxCard,
@@ -155,6 +160,7 @@ export {
   formatContext,
   formatPrice,
   formatPricing,
+  modelBrandFor,
   modelDedupKey,
   parseInsufficientBalance,
   useSidebar

package/dist/globals.css

@@ -444,6 +444,9 @@
   .left-full {
     left: 100%;
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-0 {
     z-index: 0;
   }

package/dist/index.d.ts

@@ -9,8 +9,7 @@ export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfile
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';
-export { ActivityFeed, ActivityFeedProps, ActivityItem, AppearanceController, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailExpandable, RailExpandableProps, RailExpandableSubItem, RailFlyout, RailFlyoutProps, RailHeader, RailHeaderProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, ThemeMode, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
-export { D as DEFAULT_FEATURED_MODEL_IDS, M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, e as dedupeModels, f as formatContext, g as formatPricing, m as modelDedupKey } from './model-picker-COjPVMzg.js';
+export { ActivityFeed, ActivityFeedProps, ActivityItem, AppearanceController, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DEFAULT_FEATURED_MODEL_IDS, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, ModelPicker, ModelPickerProps, ModelPickerVariant, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailExpandable, RailExpandableProps, RailExpandableSubItem, RailFlyout, RailFlyoutProps, RailHeader, RailHeaderProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, ThemeMode, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, dedupeModels, formatContext, formatPricing, modelDedupKey, parseInsufficientBalance, useSidebar } from './dashboard.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
 export { E as ExposedPort, P as PortsList, a as PortsListProps } from './ports-list-DfG0VfPt.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
@@ -24,6 +23,7 @@ export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, Group
 export { Session } from './types.js';
 export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from '@tangle-network/ui/utils';
 export { HarnessType, modelProvider, snapHarnessToModel } from '@tangle-network/agent-interface';
+export { M as ModelBrandIdentity, a as ModelBrandStack, b as ModelInfo, c as canonicalModelId, m as modelBrandFor } from './model-brand-CsFykzMA.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@radix-ui/react-dropdown-menu';