@tangle-network/sandbox-ui 0.95.1 → 0.96.0

package/dist/{WorkflowGraph-MPNVC5FE.js → WorkflowGraph-OPLQFAJK.js}

@@ -17,7 +17,7 @@ import {
   providerLabel,
   shortModel,
   triggerNodeIndex
-} from "./chunk-O7MHUR4U.js";
+} from "./chunk-LHUBJPZR.js";
 import {
   ModelBrandStack,
   modelBrandFor

package/dist/chat.d.ts

@@ -160,6 +160,15 @@ interface AgentSessionModelControl {
     popular?: ReadonlyArray<string>;
     recents?: ReadonlyArray<string>;
     disabled?: boolean;
+    /**
+     * Restrict the catalog to these architecture modalities (forwarded to
+     * `ModelPicker`'s `modalities`). Supplying this — even `[]` — replaces the
+     * chat surface's default text-chat filter: the caller owns modality
+     * filtering entirely.
+     */
+    modalities?: ReadonlyArray<string>;
+    /** Drop providers from the picker entirely (forwarded to `ModelPicker`). */
+    excludeProviders?: ReadonlyArray<string>;
 }
 interface AgentSessionReasoningControl {
     value: ReasoningLevel;

package/dist/chat.js

@@ -19,13 +19,13 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-GUULFESL.js";
+} from "./chunk-I5HGKZCB.js";
 import "./chunk-TK46XFLM.js";
 import {
   MENTION_PILL_CLASS
 } from "./chunk-WGOOQAW3.js";
 import "./chunk-WSN2RZC6.js";
-import "./chunk-FWSBQLFG.js";
+import "./chunk-WMVUJ5SA.js";
 import "./chunk-5XRAKVIV.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";

package/dist/{chunk-GUULFESL.js → chunk-I5HGKZCB.js}

@@ -13,11 +13,12 @@ import {
   PickerMenuSearch,
   PickerMenuSection,
   PickerMenuTag,
+  isTextChatModel,
   pickerMenuBodyClass,
   pickerMenuContentClass,
   pickerMenuItemClass,
   stripBrandPrefix
-} from "./chunk-FWSBQLFG.js";
+} from "./chunk-WMVUJ5SA.js";
 import {
   ModelBrandStack,
   canonicalModelId,
@@ -525,7 +526,8 @@ function InformativeLock({
   lockTitle,
   lockBody,
   newChatLabel,
-  onNewChat
+  onNewChat,
+  triggerClassName
 }) {
   const [open, setOpen] = React3.useState(false);
   const closeTimer = React3.useRef(null);
@@ -571,7 +573,8 @@ function InformativeLock({
               "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5 opacity-60",
               "text-xs font-medium text-foreground shadow-sm transition-colors",
               "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-variant)] data-[state=open]:bg-surface-container-high"
+              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
+              triggerClassName
             ),
             children: [
               /* @__PURE__ */ jsx3(HarnessLogo, { type, size: 16 }),
@@ -672,7 +675,8 @@ function HarnessDropdown({
         lockTitle,
         lockBody,
         newChatLabel,
-        onNewChat
+        onNewChat,
+        triggerClassName
       }
     );
   }
@@ -826,17 +830,24 @@ function AgentSessionControls({
     }
     if (nextHarness) clampEffort(nextHarness, nextModelId);
   };
-  const visibleModels = model && restrictModelsToHarness && harness ? model.models.filter(
+  const chatModels = model && context === "chat" && model.modalities === void 0 ? model.models.filter(isTextChatModel) : model?.models;
+  const visibleModels = model && restrictModelsToHarness && harness ? (chatModels ?? []).filter(
     (entry) => isModelCompatibleWithHarness(
       harness.value,
       canonicalModelId(entry)
     )
-  ) : model?.models;
+  ) : chatModels;
   const harnessAvailable = harness?.available ?? (context === "chat" ? chatCapableHarnesses : void 0);
   const collapsed = layout === "gear" || layout === "combined";
   const menuSide = collapsed ? "left" : "bottom";
   const menuAlign = collapsed ? "end" : "start";
   const collapsedTriggerClass = layout === "combined" ? "w-full bg-transparent shadow-none hover:bg-muted/60 data-[state=open]:bg-muted/60" : collapsed ? "w-full" : void 0;
+  const secondaryTriggerClass = collapsed ? collapsedTriggerClass : cn(
+    "border-transparent bg-transparent text-muted-foreground shadow-none",
+    "hover:border-transparent hover:bg-muted/50 hover:text-foreground",
+    "data-[state=open]:border-transparent data-[state=open]:bg-muted/50 data-[state=open]:text-foreground"
+  );
+  const modelTriggerClass = collapsed ? cn(collapsedTriggerClass, "h-8 rounded-lg px-2.5 text-xs") : void 0;
   const inlineForceDown = menuPlacement === "down" && layout === "inline";
   const avoidCollisions = inlineForceDown ? false : void 0;
   const harnessNode = harness && /* @__PURE__ */ jsx3(
@@ -848,7 +859,7 @@ function AgentSessionControls({
       side: menuSide,
       align: menuAlign,
       avoidCollisions,
-      triggerClassName: collapsedTriggerClass
+      triggerClassName: secondaryTriggerClass
     }
   );
   const profileNode = profile && /* @__PURE__ */ jsx3(
@@ -876,10 +887,12 @@ function AgentSessionControls({
       loading: model.loading,
       popular: model.popular,
       recents: model.recents,
+      modalities: model.modalities,
+      excludeProviders: model.excludeProviders,
       disabled: model.disabled || (visibleModels ?? []).length === 0 || !selectorHonorsModel,
       side: collapsed ? void 0 : "bottom",
       avoidCollisions,
-      triggerClassName: collapsedTriggerClass
+      triggerClassName: modelTriggerClass
     }
   );
   const modelReasoning = modelReasoningCapability(model?.models, model?.value);
@@ -894,7 +907,7 @@ function AgentSessionControls({
       available: harness ? reasoningEffortsFor(harness.value, modelReasoning) : reasoning.available,
       side: collapsed ? void 0 : "bottom",
       avoidCollisions,
-      triggerClassName: collapsedTriggerClass
+      triggerClassName: secondaryTriggerClass
     }
   );
   if (layout === "gear") {

package/dist/{chunk-O7MHUR4U.js → chunk-LHUBJPZR.js}

@@ -515,6 +515,29 @@ function describeAction(action) {
   }
   return Object.keys(config).length > 0 ? { ...base, config } : base;
 }
+function describeScope(scope) {
+  const rec = asRecord(scope);
+  const parts = [];
+  for (const [dimension, raw] of Object.entries(rec).sort(
+    ([a], [b]) => a < b ? -1 : a > b ? 1 : 0
+  )) {
+    const selection = asRecord(raw);
+    const except = Array.isArray(selection.except) ? [
+      ...new Set(
+        selection.except.filter((entry) => typeof entry === "string").map((entry) => entry.trim()).filter((entry) => entry !== "")
+      )
+    ] : [];
+    if (except.length === 0) {
+      if (selection.default === "exclude") parts.push(`${dimension}: none`);
+      continue;
+    }
+    const named = except.length <= 2 ? except.join(", ") : `${except.length} selected`;
+    parts.push(
+      selection.default === "exclude" ? `${dimension}: ${named}` : `${dimension}: all but ${named}`
+    );
+  }
+  return parts.length > 0 ? parts.join(" \xB7 ") : void 0;
+}
 function describeTrigger(on) {
   const rec = asRecord(on);
   if (rec.provider_event) {
@@ -524,7 +547,11 @@ function describeTrigger(on) {
     const actions = Array.isArray(ev.actions) ? ev.actions.filter((a) => typeof a === "string") : [];
     const repo = str(ev.repo);
     const description = describeText(
-      [actions.length > 0 ? actions.join(", ") : void 0, repo].filter(Boolean).join(" \xB7 ")
+      [
+        actions.length > 0 ? actions.join(", ") : void 0,
+        repo,
+        describeScope(ev.scope)
+      ].filter(Boolean).join(" \xB7 ")
     );
     return withConfig(
       {

package/dist/{chunk-FWSBQLFG.js → chunk-WMVUJ5SA.js}

@@ -133,12 +133,30 @@ function dedupeModels(models) {
   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"
+  "anthropic/claude-fable-5",
+  "anthropic/claude-opus-5",
+  "openai/gpt-5.6-sol",
+  "google/gemini-3.1-pro-preview",
+  "deepseek/deepseek-v4-flash"
 ];
+function isTextChatModel(model) {
+  const arch = model.architecture;
+  if (!arch) return true;
+  const inputs = arch.input_modalities;
+  const outputs = arch.output_modalities;
+  if (inputs?.length || outputs?.length) {
+    const inOk = !inputs?.length || inputs.includes("text");
+    const outOk = !outputs?.length || outputs.includes("text");
+    return inOk && outOk;
+  }
+  const modality = arch.modality;
+  if (!modality) return true;
+  const arrow = modality.split("->");
+  if (arrow.length === 2) {
+    return arrow[0].split("+").includes("text") && arrow[1].split("+").includes("text");
+  }
+  return modality === "text" || modality === "multimodal";
+}
 function formatPricing(pricing) {
   const prompt = Number(pricing?.prompt ?? 0);
   const completion = Number(pricing?.completion ?? 0);
@@ -226,31 +244,31 @@ function ModelPicker({
     return () => cancelAnimationFrame(frame);
   }, [open]);
   const deduped = React2.useMemo(() => dedupeModels(models), [models]);
-  const filtered = React2.useMemo(() => {
+  const passesCatalogFilters = React2.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) => {
+    return (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;
+      return true;
+    };
+  }, [modalities, excludeProviders]);
+  const eligible = React2.useMemo(
+    () => deduped.filter(passesCatalogFilters),
+    [deduped, passesCatalogFilters]
+  );
+  const filtered = React2.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return eligible;
+    return eligible.filter((m) => {
+      const provider = (m._provider ?? m.provider ?? "").toLowerCase();
       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 = React2.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]);
+  }, [eligible, query]);
   const current = React2.useMemo(
     () => models.find((m) => canonicalModelId(m) === value),
     [models, value]
@@ -263,25 +281,41 @@ function ModelPicker({
   const recentIds = React2.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]);
+    return recents.map((id) => lookup.get(id)).filter((m) => Boolean(m)).filter(passesCatalogFilters).slice(0, 4);
+  }, [recents, models, passesCatalogFilters]);
   const popularModels = React2.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]);
+    return popular.map((id) => lookup.get(id)).filter((m) => Boolean(m)).filter(passesCatalogFilters);
+  }, [popular, models, passesCatalogFilters]);
   const featuredModels = React2.useMemo(() => {
-    const flagged = deduped.filter((m) => m.featured);
+    const flagged = eligible.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 seeded = eligible.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]);
+  }, [eligible]);
+  const grouped = React2.useMemo(() => {
+    const curatedKeys = new Set(
+      [...featuredModels, ...popularModels, ...recentIds].map(
+        (m) => modelDedupKey(m)
+      )
+    );
+    const groups = /* @__PURE__ */ new Map();
+    for (const m of filtered) {
+      if (!query.trim() && curatedKeys.has(modelDedupKey(m))) continue;
+      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, featuredModels, popularModels, recentIds, query]);
   const handleSelect = (id) => {
     onChange(id);
     setOpen(false);
@@ -295,8 +329,8 @@ function ModelPicker({
       "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",
+        "inline-flex h-9 items-center gap-1.5 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container",
+        "px-3 text-sm 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",
@@ -306,9 +340,9 @@ function ModelPicker({
         triggerClassName
       ),
       children: [
-        currentIdentity ? /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx2(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
-        /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
-        /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+        currentIdentity ? /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx2(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[180px]", children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
       ]
     }
   ) : /* @__PURE__ */ jsxs2(
@@ -404,9 +438,9 @@ function ModelPicker({
             /* @__PURE__ */ jsxs2(PickerMenuFooter, { children: [
               filtered.length,
               " of ",
-              deduped.length,
+              eligible.length,
               " model",
-              deduped.length === 1 ? "" : "s"
+              eligible.length === 1 ? "" : "s"
             ] })
           ]
         }
@@ -487,6 +521,7 @@ export {
   modelDedupKey,
   dedupeModels,
   DEFAULT_FEATURED_MODEL_IDS,
+  isTextChatModel,
   formatPricing,
   formatContext,
   stripBrandPrefix,

package/dist/dashboard.js

@@ -79,7 +79,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-FWSBQLFG.js";
+} from "./chunk-WMVUJ5SA.js";
 import {
   ModelBrandStack,
   canonicalModelId,

package/dist/globals.css

@@ -1276,8 +1276,8 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
-  .max-w-\[160px\] {
-    max-width: 160px;
+  .max-w-\[180px\] {
+    max-width: 180px;
   }
   .max-w-\[250px\] {
     max-width: 250px;
@@ -3441,6 +3441,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .normal-case {
     text-transform: none;
   }
@@ -3954,6 +3957,9 @@
         border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
       }
     }
+    .hover\:border-transparent:hover {
+      border-color: transparent;
+    }
     .hover\:\!bg-primary:hover {
       background-color: var(--color-primary) !important;
     }
@@ -4538,6 +4544,9 @@
   .data-\[state\=open\]\:border-\[var\(--md3-outline-variant\)\][data-state="open"] {
     border-color: var(--md3-outline-variant);
   }
+  .data-\[state\=open\]\:border-transparent[data-state="open"] {
+    border-color: transparent;
+  }
   .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
     background-color: var(--accent-surface-strong);
   }
@@ -4559,6 +4568,9 @@
   .data-\[state\=open\]\:bg-surface-container-high[data-state="open"] {
     background-color: var(--color-surface-container-high);
   }
+  .data-\[state\=open\]\:text-foreground[data-state="open"] {
+    color: var(--color-foreground);
+  }
   .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
     color: var(--color-muted-foreground);
   }

package/dist/index.js

@@ -91,7 +91,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-GUULFESL.js";
+} from "./chunk-I5HGKZCB.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -332,7 +332,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-FWSBQLFG.js";
+} from "./chunk-WMVUJ5SA.js";
 import {
   ModelBrandStack,
   canonicalModelId,

package/dist/pages.js

@@ -24,7 +24,7 @@ import {
   Switch,
   Textarea
 } from "./chunk-4ZZUMXPX.js";
-import "./chunk-FWSBQLFG.js";
+import "./chunk-WMVUJ5SA.js";
 import "./chunk-5XRAKVIV.js";
 import {
   cn

package/dist/styles.css

@@ -1276,8 +1276,8 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
-  .max-w-\[160px\] {
-    max-width: 160px;
+  .max-w-\[180px\] {
+    max-width: 180px;
   }
   .max-w-\[250px\] {
     max-width: 250px;
@@ -3441,6 +3441,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .normal-case {
     text-transform: none;
   }
@@ -3954,6 +3957,9 @@
         border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
       }
     }
+    .hover\:border-transparent:hover {
+      border-color: transparent;
+    }
     .hover\:\!bg-primary:hover {
       background-color: var(--color-primary) !important;
     }
@@ -4538,6 +4544,9 @@
   .data-\[state\=open\]\:border-\[var\(--md3-outline-variant\)\][data-state="open"] {
     border-color: var(--md3-outline-variant);
   }
+  .data-\[state\=open\]\:border-transparent[data-state="open"] {
+    border-color: transparent;
+  }
   .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
     background-color: var(--accent-surface-strong);
   }
@@ -4559,6 +4568,9 @@
   .data-\[state\=open\]\:bg-surface-container-high[data-state="open"] {
     background-color: var(--color-surface-container-high);
   }
+  .data-\[state\=open\]\:text-foreground[data-state="open"] {
+    color: var(--color-foreground);
+  }
   .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
     color: var(--color-muted-foreground);
   }

package/dist/workbench.js

@@ -20,7 +20,7 @@ import "./chunk-WYMAC3T3.js";
 import "./chunk-KEYPUGS3.js";
 import "./chunk-4ZZUMXPX.js";
 import "./chunk-WSN2RZC6.js";
-import "./chunk-FWSBQLFG.js";
+import "./chunk-WMVUJ5SA.js";
 import "./chunk-5XRAKVIV.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";

package/dist/workflows.js

@@ -5,7 +5,7 @@ import {
   buildWorkflowGraph,
   triggerNodeId,
   triggerNodeIndex
-} from "./chunk-O7MHUR4U.js";
+} from "./chunk-LHUBJPZR.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -36,7 +36,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-MPNVC5FE.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-OPLQFAJK.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

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