@ai-matrx/agents 0.59.194 → 0.59.195

package/dist/settings/react/index.cjs

@@ -22,20 +22,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // settings/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  ExtraSettingRow: () => ExtraSettingRow,
-  InputCapabilitiesEditor: () => InputCapabilitiesEditor,
   ModelSettingsPanel: () => ModelSettingsPanel,
-  SettingControlInput: () => SettingControlInput,
   SettingRowFrame: () => SettingRowFrame,
   SettingRowLabel: () => RowLabel,
-  SettingsGroupSection: () => SettingsGroupSection,
   formatSettingValue: () => formatSettingValue,
   useEffectiveSettings: () => useEffectiveSettings,
   useSettingsEntry: () => useSettingsEntry,
   useSettingsSelector: () => useSettingsSelector
 });
 module.exports = __toCommonJS(react_exports);
-var import_react2 = require("react");
+var import_react5 = require("react");
 
 // generated/llm-enums.ts
 var LLM_PARAMS_KEYS = [
@@ -114,6 +110,168 @@ var LLM_PARAMS_KEYS = [
   "tts_quality"
 ];
 
+// models/capabilities.ts
+function isManagedAgentModelCapability(capabilities) {
+  return capabilities.interaction === "agent";
+}
+function isDecisionModelCapability(capabilities) {
+  return capabilities.interaction === "decision";
+}
+function acceptsTextInstructions(capabilities) {
+  if (capabilities.interaction === "realtime") return true;
+  const input = capabilities.input ?? [];
+  return input.length === 0 || input.includes("text");
+}
+
+// models/feature-map.ts
+var FEATURE_BUCKET_ORDER = [
+  "thinking",
+  "tools",
+  "schema",
+  "search",
+  "extraction",
+  "x_search",
+  "other"
+];
+var FEATURE_BUCKETS = {
+  schema: { label: "Schema", description: "Structured & JSON output" },
+  tools: { label: "Tools", description: "Function & tool calling" },
+  search: { label: "Search", description: "Web search" },
+  x_search: { label: "X Search", description: "X (Twitter) platform search" },
+  thinking: { label: "Thinking", description: "Reasoning & extended thinking" },
+  extraction: {
+    label: "Extraction",
+    description: "NER, classification & entity extraction"
+  },
+  other: { label: "Other", description: "Uncategorized or niche features" }
+};
+
+// models/format.ts
+var RATING_TO_TIER = {
+  1: "$",
+  2: "$$",
+  3: "$$$",
+  4: "$$$$",
+  5: "$$$$$",
+  6: "$$$$$+"
+  // renders as the "5+" band
+};
+var TOP_TIER_COST_RATING = 6;
+var TOP_TIER_LOCKED_TITLE = "This model is limited to approved accounts";
+function isTopTierRating(rating) {
+  return typeof rating === "number" && rating >= TOP_TIER_COST_RATING;
+}
+function costRatingTier(rating) {
+  if (typeof rating !== "number") return null;
+  return RATING_TO_TIER[rating] ?? null;
+}
+function speedRatingLabel(rating) {
+  if (typeof rating !== "number") return null;
+  return rating >= 6 ? "5+" : String(rating);
+}
+function speedRatingWord(rating) {
+  if (typeof rating !== "number") return "\u2014";
+  if (rating <= 2) return "Slow";
+  if (rating === 3) return "Med";
+  if (rating === 4) return "Fast";
+  if (rating === 5) return "Fast+";
+  return "Max";
+}
+function costRatingWord(rating) {
+  if (typeof rating !== "number") return "\u2014";
+  if (rating <= 1) return "Low";
+  if (rating === 2) return "Low+";
+  if (rating === 3) return "Med";
+  if (rating === 4) return "High";
+  if (rating === 5) return "High+";
+  return "Max";
+}
+function priceTierRating(tier) {
+  return tier.endsWith("+") ? 6 : tier.length;
+}
+
+// models/service-label.ts
+var SERVICE_LABEL = "Service";
+var SERVICE_LABEL_PLURAL = "Services";
+function serviceCountLabel(count) {
+  const noun = (count === 1 ? SERVICE_LABEL : SERVICE_LABEL_PLURAL).toLowerCase();
+  return `${count} ${noun}`;
+}
+
+// models/catalog/types.ts
+var INPUT_MODALITIES = ["text", "image", "audio", "video"];
+var OUTPUT_MODALITIES = [
+  "text",
+  "image",
+  "audio",
+  "video",
+  "entities",
+  "decision"
+];
+
+// models/succession.ts
+var MAX_SUCCESSION_HOPS = 8;
+function buildSuccessionIndex(models) {
+  return new Map(models.map((m) => [m.id, m]));
+}
+function isSupersedable(node) {
+  return node.isDeprecated || node.retiredAt != null;
+}
+var loggedBroken = /* @__PURE__ */ new Set();
+function logBroken(modelId, reason) {
+  if (loggedBroken.has(modelId)) return;
+  loggedBroken.add(modelId);
+  console.warn(`[models/succession] ${modelId}: successor chain broken (${reason}); keeping the original model.`);
+}
+function resolveSuccessor(modelId, index) {
+  const start = index.get(modelId);
+  if (!start || !isSupersedable(start) || !start.successorId) return modelId;
+  const seen = /* @__PURE__ */ new Set([modelId]);
+  let current = start;
+  for (let hop = 0; hop < MAX_SUCCESSION_HOPS; hop += 1) {
+    const nextId = current.successorId;
+    if (!nextId) {
+      logBroken(modelId, `${current.id} is superseded and names no successor`);
+      return modelId;
+    }
+    if (seen.has(nextId)) {
+      logBroken(modelId, `cycle at ${nextId}`);
+      return modelId;
+    }
+    const next = index.get(nextId);
+    if (!next) {
+      logBroken(modelId, `successor ${nextId} is not in the catalog`);
+      return modelId;
+    }
+    if (!isSupersedable(next)) return next.id;
+    seen.add(nextId);
+    current = next;
+  }
+  logBroken(modelId, `more than ${MAX_SUCCESSION_HOPS} hops`);
+  return modelId;
+}
+
+// models/fit.ts
+var featuresOf = (c) => {
+  const f = c.features;
+  if (!f) return [];
+  return Array.isArray(f) ? f : f.raw ?? [];
+};
+function seesImages(c) {
+  return (c.input ?? []).includes("image") || featuresOf(c).includes("vision");
+}
+function takesInput(c, modality) {
+  if (modality === "image") return seesImages(c);
+  return (c.input ?? []).includes(modality);
+}
+var MEDIA_GENERATION_FEATURES = /* @__PURE__ */ new Set(["image_generation", "video_generation", "audio_generation", "music_generation"]);
+function isChatModelCapability(c) {
+  if (c.interaction !== "turn") return false;
+  if (!(c.input ?? []).includes("text")) return false;
+  if (!(c.output ?? []).includes("text")) return false;
+  return !featuresOf(c).some((f) => MEDIA_GENERATION_FEATURES.has(f));
+}
+
 // settings/ui-gates.ts
 var UI_GATE_KEYS = [
   "tools",
@@ -212,332 +370,2243 @@ function readEffectiveSettings(entry) {
   return entry ? mergeEffectiveSettings(entry.defaults, entry.overrides) : EMPTY;
 }
 
-// settings/react/SettingControlInput.tsx
+// settings/react/ModelSettingsPanel.tsx
+var import_design_system5 = require("@ai-matrx/design-system");
+var import_controls4 = require("@ai-matrx/design-system/controls");
+
+// models/react/context.tsx
 var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModelCatalogContext = (0, import_react.createContext)(null);
+function useBinding(hook) {
+  const binding = (0, import_react.useContext)(ModelCatalogContext);
+  if (!binding) {
+    throw new Error(`${hook}() needs <ModelCatalogProvider catalog={createModelCatalog(...)} favorites={createModelFavorites(...)}> above it. A picker with no catalog is a lie on screen.`);
+  }
+  return binding;
+}
+var useModelCatalogUiPorts = () => useBinding("useModelCatalogUiPorts").ports;
+function useModelCatalog(variant) {
+  const { catalog } = useBinding("useModelCatalog");
+  const state = (0, import_react.useSyncExternalStore)(catalog.subscribe, catalog.getState, catalog.getState);
+  (0, import_react.useEffect)(() => {
+    void catalog.load(variant);
+  }, [catalog, variant]);
+  const v = state[variant];
+  const loading = v.status === "idle" || v.status === "loading";
+  return {
+    models: loading ? [] : v.models,
+    isLoading: loading,
+    error: loading ? null : v.error,
+    reload: () => {
+      void catalog.reload(variant);
+    }
+  };
+}
+function useModelFavorites(active) {
+  const { favorites } = useBinding("useModelFavorites");
+  const state = (0, import_react.useSyncExternalStore)(favorites.subscribe, favorites.getState, favorites.getState);
+  (0, import_react.useEffect)(() => {
+    void favorites.reconcile();
+  }, [favorites, active]);
+  const favoriteSet = (0, import_react.useMemo)(() => new Set(state.favoriteIds), [state.favoriteIds]);
+  return { favoriteIds: state.favoriteIds, favoriteSet, toggleFavorite: favorites.toggle };
+}
+var NO_LOCAL_MODELS = [];
+var noopSubscribe = () => () => {
+};
+function useLocalModels(override) {
+  const contextPort = useBinding("useLocalModels").ports.localModels;
+  const port = override ?? contextPort;
+  const models = (0, import_react.useSyncExternalStore)(
+    port ? port.subscribe : noopSubscribe,
+    port ? port.getModels : () => NO_LOCAL_MODELS,
+    port ? port.getModels : () => NO_LOCAL_MODELS
+  );
+  return { models, groupLabel: port?.groupLabel ?? "On this computer", open: port?.open ? (id) => port.open?.(id) : void 0 };
+}
+
+// models/react/ModelListDropdown.tsx
+var import_format = require("@ai-matrx/kit/format");
+var import_react2 = require("react");
 var import_design_system = require("@ai-matrx/design-system");
 var import_controls = require("@ai-matrx/design-system/controls");
+var import_brand_glyphs = require("@ai-matrx/icons/brand-glyphs");
 
-// settings/setting-state.ts
-var ENUM_OFF_VALUE = "none";
-function isOffValue(value, control) {
-  if (value === false) return true;
-  if (value === ENUM_OFF_VALUE) {
-    return !control || control.type === "enum";
+// catalog/shared/icon-paths.ts
+var SHAPES = {
+  star: {
+    paths: [
+      "M11.5 3.2a.6.6 0 0 1 1 0l2.3 4.7 5.2.8a.6.6 0 0 1 .3 1l-3.8 3.7.9 5.2a.6.6 0 0 1-.9.6L12 16.8l-4.6 2.4a.6.6 0 0 1-.9-.6l.9-5.2-3.8-3.7a.6.6 0 0 1 .3-1l5.2-.8Z"
+    ],
+    fillable: true
+  },
+  chevronRight: { paths: ["m9 18 6-6-6-6"] },
+  chevronDown: { paths: ["m6 9 6 6 6-6"] },
+  search: {
+    paths: ["m21 21-4.3-4.3"],
+    circles: [{ cx: 11, cy: 11, r: 8 }]
+  },
+  x: { paths: ["M18 6 6 18", "m6 6 12 12"] },
+  check: { paths: ["M20 6 9 17l-5-5"] },
+  arrowUpDown: {
+    paths: ["m21 16-4 4-4-4", "M17 20V4", "m3 8 4-4 4 4", "M7 4v16"]
+  },
+  folder: {
+    paths: [
+      "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+    ]
+  },
+  tag: {
+    paths: [
+      "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+    ],
+    circles: [{ cx: 7.5, cy: 7.5, r: 0.5, filled: true }]
+  },
+  rotateCcw: {
+    paths: [
+      "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+      "M3 3v5h5"
+    ]
+  },
+  loader: { paths: ["M21 12a9 9 0 1 1-6.219-8.56"] },
+  alertTriangle: {
+    paths: [
+      "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      "M12 9v4",
+      "M12 17h.01"
+    ]
+  },
+  /**
+   * The Orchestra marker (Lucide `music-4`): the glyph the Workflow Studio's
+   * picker used for a conductor, kept identical so the same agent wears the
+   * same mark in every client.
+   */
+  music4: {
+    paths: ["M9 18V5l12-2v13", "m9 9 12-2"],
+    circles: [
+      { cx: 6, cy: 18, r: 3 },
+      { cx: 18, cy: 16, r: 3 }
+    ]
+  },
+  clock: {
+    paths: ["M12 6v6l4 2"],
+    circles: [{ cx: 12, cy: 12, r: 10 }]
+  },
+  globe: {
+    paths: ["M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", "M2 12h20"],
+    circles: [{ cx: 12, cy: 12, r: 10 }]
+  },
+  users: {
+    paths: [
+      "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
+      "M22 21v-2a4 4 0 0 0-3-3.87",
+      "M16 3.13a4 4 0 0 1 0 7.75"
+    ],
+    circles: [{ cx: 9, cy: 7, r: 4 }]
+  },
+  externalLink: {
+    paths: [
+      "M15 3h6v6",
+      "M10 14 21 3",
+      "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+    ]
+  },
+  messageCircle: { paths: ["M7.9 20A9 9 0 1 0 4 16.1L2 22Z"] },
+  rocket: {
+    paths: [
+      "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91 0",
+      "m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2",
+      "M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0",
+      "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
+    ]
+  },
+  /**
+   * THE ARCHIVE GLYPH (Lucide `archive`) — the ONE mark of the platform
+   * archive filter, drawn identically in every Matrx client so the control a
+   * person learns on one surface is recognizable on all of them.
+   */
+  archive: {
+    paths: [
+      "M3 3h18a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
+      "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8",
+      "M10 12h4"
+    ]
+  },
+  circleCheck: {
+    paths: ["m9 12 2 2 4-4"],
+    circles: [{ cx: 12, cy: 12, r: 10 }]
   }
-  return false;
+};
+var ICON_PATHS = SHAPES;
+var ICON_NAMES = Object.keys(ICON_PATHS);
+
+// catalog/react/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Svg({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
+}
+function Shape({ name, filled }) {
+  const shape = ICON_PATHS[name];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    shape.paths.map((d, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d,
+        ...filled && shape.fillable ? { fill: "currentColor" } : {}
+      },
+      `p${index}`
+    )),
+    (shape.circles ?? []).map((circle, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "circle",
+      {
+        cx: circle.cx,
+        cy: circle.cy,
+        r: circle.r,
+        ...circle.filled ? { fill: "currentColor" } : {}
+      },
+      `c${index}`
+    ))
+  ] });
+}
+function makeIcon(name) {
+  return function Icon(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Svg, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Shape, { name, filled: false }) });
+  };
+}
+var ArrowUpDownIcon = makeIcon("arrowUpDown");
+var FolderIcon = makeIcon("folder");
+var TagIcon = makeIcon("tag");
+var RotateCcwIcon = makeIcon("rotateCcw");
+var LoaderIcon = makeIcon("loader");
+var UsersIcon = makeIcon("users");
+var MessageCircleIcon = makeIcon("messageCircle");
+var RocketIcon = makeIcon("rocket");
+var CircleCheckIcon = makeIcon("circleCheck");
+var AlertTriangleIcon = makeIcon("alertTriangle");
+var Music4Icon = makeIcon("music4");
+function MousePointerClickIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 4.1 12 6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m5.1 8-2.9-.8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 12-1.9 2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7.2 2.2 8 5.1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z" })
+  ] });
 }
 
-// settings/react/SettingControlInput.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var SELECT_MAX_OPTIONS = 12;
-function choiceFor(options) {
-  if ((0, import_controls.isAspectRatioOptionSet)(options)) return "aspect-ratio";
-  if (options.length > SELECT_MAX_OPTIONS) return "searchable";
-  return "select";
+// models/react/icons.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Svg2({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children
+    }
+  );
 }
-function WarningIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
+function ShieldIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Svg2, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) });
+}
+function SlidersHorizontalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 5H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 3v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 17v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12h-9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 19h-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 5h-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 10v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 12H3" })
   ] });
 }
-function flattenTypeObject(value) {
-  if (typeof value === "object" && value !== null && !Array.isArray(value) && "type" in value && Object.keys(value).length === 1) {
-    return value.type;
-  }
-  return value;
+function TypeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 4v16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 20h6" })
+  ] });
 }
-function SettingControlInput({
-  settingKey,
-  control,
+function ImageIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+  ] });
+}
+function AudioLinesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 10v3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 6v11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 3v18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 8v7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 5v13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 10v3" })
+  ] });
+}
+function BoxesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 16.5-4.74-2.85" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 16.5 5-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 16.5v5.17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m17 16.5-5-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m17 16.5 4.74-2.85" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 16.5v5.17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8 7.26 5.15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 8 4.74-2.85" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13.5V8" })
+  ] });
+}
+function FileTextIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 17H8" })
+  ] });
+}
+function LayersIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" })
+  ] });
+}
+function ScaleIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m19 8 3 8a5 5 0 0 1-6 0zV7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 8 3 8a5 5 0 0 1-6 0zV7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 21h10" })
+  ] });
+}
+function LanguagesIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Svg2, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 8 6 6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m4 14 6-6 2-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 5h12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 2h1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m22 22-5-10-5 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 18h6" })
+  ] });
+}
+
+// models/react/ModelListDropdown.tsx
+var import_icons3 = require("@ai-matrx/design-system/icons");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PANEL_HEIGHT = 640;
+var LIST_MAX_HEIGHT = `min(${PANEL_HEIGHT}px, var(--radix-popper-available-height, 70dvh))`;
+var LIST_WIDTH = 520;
+var DETAIL_WIDTH = 540;
+var INLINE_LIST_MIN_WIDTH = 400;
+var INLINE_DETAIL_MIN_WIDTH = 280;
+var ADMIN_PANEL_WIDTH = 400;
+var ADMIN_ONLY_SORTS = /* @__PURE__ */ new Set([
+  "vendor",
+  "api",
+  "deprecated",
+  "availability",
+  "premium"
+]);
+var MODALITY_ICON = {
+  text: TypeIcon,
+  image: ImageIcon,
+  audio: AudioLinesIcon,
+  video: import_icons3.VideoIcon,
+  document: FileTextIcon,
+  entities: BoxesIcon,
+  embedding: LayersIcon,
+  decision: ScaleIcon
+};
+var INTERACTION_LABEL = {
+  turn: "Standard",
+  single: "Single-shot",
+  extraction: "Extraction",
+  realtime: "Realtime",
+  embedding: "Embedding",
+  agent: "Background agent",
+  decision: "Decision",
+  adapter: "Adapter",
+  detection: "Detector"
+};
+function SpeedDots({ value }) {
+  const label = speedRatingLabel(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "span",
+    {
+      className: "inline-flex items-center gap-1",
+      title: label == null ? "No speed rating yet" : `Speed ${label}/5`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[11px] font-medium tabular-nums text-foreground/80", children: speedRatingWord(value) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex items-center gap-0.5", children: [
+          [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: (0, import_design_system.cn)(
+                "h-1.5 w-1.5 rounded-full",
+                value != null && i < value ? "bg-foreground/70" : "bg-muted-foreground/25"
+              )
+            },
+            i
+          )),
+          value != null && value >= 6 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[9px] leading-none text-amber-500", children: "+" })
+        ] })
+      ]
+    }
+  );
+}
+function SpeedCell({ value }) {
+  const word = speedRatingWord(value);
+  const label = speedRatingLabel(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    DelayedHint,
+    {
+      label: label == null ? "No speed rating yet" : `Speed ${word} (${label}/5)`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-block w-11 text-right text-[11px] font-medium tabular-nums text-foreground/80", children: word })
+    }
+  );
+}
+function CostTier({ tier }) {
+  if (!tier)
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[11px] text-muted-foreground/50", children: "\u2014" });
+  const rating = priceTierRating(tier);
+  const word = costRatingWord(rating);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    DelayedHint,
+    {
+      label: `Relative cost ${word} (${rating >= 6 ? "5+" : rating}/5 compared with other models)`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-block w-11 text-right text-[11px] font-medium tabular-nums text-foreground/80", children: word })
+    }
+  );
+}
+function ModalityIcons({ list }) {
+  if (list.length === 0)
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[11px] text-muted-foreground/50", children: "\u2014" });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-flex flex-nowrap items-center gap-1 whitespace-nowrap", children: list.map((m) => {
+    const Icon = MODALITY_ICON[m];
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "span",
+      {
+        className: "inline-flex shrink-0 items-center gap-0.5 text-xs text-foreground/70",
+        title: m,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "h-3 w-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize", children: m })
+        ]
+      },
+      m
+    );
+  }) });
+}
+function AdminRow({
+  label,
   value,
-  onChange,
-  disabled = false,
-  id
+  mono
 }) {
-  const inputId = id ?? `setting-control-${settingKey}`;
-  if (control.type === "enum" && control.enum?.length) {
-    const flattened = settingKey === "response_format" ? flattenTypeObject(value) : value;
-    const stringValue = flattened === void 0 || flattened === null ? "" : String(flattened);
-    const isValueMismatch = stringValue !== "" && !control.enum.includes(stringValue);
-    const emit = (v) => onChange(settingKey === "response_format" ? { type: v } : v);
-    const choice = choiceFor(control.enum);
-    const picker = choice === "aspect-ratio" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_controls.AspectRatioSelect,
-      {
-        value: isValueMismatch ? "" : stringValue,
-        onChange: emit,
-        options: control.enum,
-        variant: "inline",
-        disabled,
-        id: inputId,
-        placeholder: "Default"
-      }
-    ) : choice === "searchable" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_controls.OptionCombobox,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-baseline gap-2 whitespace-nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-[76px] shrink-0 text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
       {
-        value: isValueMismatch ? "" : stringValue,
-        onChange: emit,
-        options: control.enum,
-        variant: "inline",
-        disabled,
-        id: inputId,
-        placeholder: "Default"
+        className: (0, import_design_system.cn)(
+          "min-w-0 truncate text-[11px] text-foreground/90",
+          mono && "font-mono"
+        ),
+        title: value ?? void 0,
+        children: value ?? "\u2014"
       }
-    ) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 items-center gap-1.5", children: [
-      picker ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_design_system.Select,
+    )
+  ] });
+}
+function fmtUsd(n) {
+  return n == null ? "\u2014" : `$${n}`;
+}
+function fmtPoints(n) {
+  return n == null ? "\u2014" : n.toLocaleString();
+}
+function fmtPointsCompact(n) {
+  return (0, import_format.formatCount)(n, { style: "compact" });
+}
+function AdminOfferingBlock({
+  offering,
+  index,
+  total
+}) {
+  const unit = offering.usageBasis ? `/ ${offering.usageBasis}` : "/ 1M tokens";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "rounded-md border border-border p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-1.5 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "truncate text-[11px] font-semibold text-foreground", children: [
+        "Offering ",
+        index + 1,
+        " of ",
+        total,
+        index === 0 ? " \u2014 preferred" : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "span",
         {
-          value: isValueMismatch ? "" : stringValue,
-          onValueChange: emit,
-          disabled,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_design_system.SelectTrigger,
-              {
-                id: inputId,
-                className: "h-7 flex-1 border-0 bg-transparent px-1 text-xs font-medium text-foreground shadow-none hover:bg-transparent focus:ring-0 pointer-coarse:h-11 [&_svg]:h-3 [&_svg]:w-3",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.SelectValue, { placeholder: isValueMismatch ? stringValue : "Default" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.SelectContent, { className: "text-xs", children: control.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_design_system.SelectItem,
-              {
-                value: option,
-                className: "py-1 text-xs",
-                children: option === ENUM_OFF_VALUE ? "Off" : option
-              },
-              option
-            )) })
-          ]
+          className: (0, import_design_system.cn)(
+            "shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium",
+            offering.isAvailable ? "bg-primary/10 text-foreground/80" : "bg-destructive/15 text-destructive-ink"
+          ),
+          children: offering.isAvailable ? "Available" : "Unavailable"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Model", value: offering.providerModelId, mono: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Vendor", value: offering.vendor, mono: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "API", value: offering.apiName, mono: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Translator", value: offering.translatorKey, mono: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Transport", value: offering.transport, mono: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AdminRow,
+        {
+          label: "Endpoint",
+          value: offering.endpointDisplayName || offering.endpointInternalName ? `${offering.endpointDisplayName ?? "\u2014"} (${offering.endpointInternalName ?? "\u2014"})` : null
         }
       ),
-      isValueMismatch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_system.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 cursor-help text-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WarningIcon, { className: "h-3.5 w-3.5" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design_system.TooltipContent, { side: "top", className: "max-w-[220px] type-secondary", children: [
-          '"',
-          stringValue,
-          '" is not a recognized option for this model'
-        ] })
-      ] }) })
-    ] });
-  }
-  if (control.type === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design_system.Checkbox,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Priority", value: String(offering.priority), mono: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AdminRow,
         {
-          id: inputId,
-          checked: value === true,
-          onCheckedChange: (c) => onChange(c === true),
-          disabled,
-          className: "cursor-pointer"
+          label: "Points in",
+          value: offering.pointsInput == null ? null : `${fmtPoints(offering.pointsInput)} / 1M`,
+          mono: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_design_system.Label,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AdminRow,
         {
-          htmlFor: inputId,
-          className: "cursor-pointer text-xs text-muted-foreground",
-          children: value === true ? "On" : "Off"
+          label: "Points out",
+          value: offering.pointsOutput == null ? null : `${fmtPoints(offering.pointsOutput)} / 1M`,
+          mono: true
         }
-      )
-    ] });
-  }
-  if (control.type === "number" || control.type === "integer") {
-    const numeric = typeof value === "number" ? value : void 0;
-    const hasRange = control.min !== void 0 && control.max !== void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      NumberInput,
-      {
-        value: numeric,
-        placeholderValue: typeof control.default === "number" ? control.default : void 0,
-        onChange,
-        onSliderChange: hasRange ? onChange : void 0,
-        min: control.min,
-        max: control.max,
-        step: control.type === "integer" ? 1 : 0.01,
-        isInteger: control.type === "integer",
-        disabled,
-        withSlider: hasRange
-      }
-    );
-  }
-  if (control.type === "string_array") {
-    const arrayValue = Array.isArray(value) ? value.join("\n") : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_design_system.Textarea,
+      ),
+      offering.pointsCachedInput != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AdminRow,
+        {
+          label: "Points cached",
+          value: `${fmtPoints(offering.pointsCachedInput)} / 1M`,
+          mono: true
+        }
+      ),
+      offering.pricing.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Pricing", value: "\u2014 (no pricing rows)" }) : offering.pricing.map((band, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-0.5", children: [
+        band.maxTokens != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          AdminRow,
+          {
+            label: `Band ${i + 1}`,
+            value: `\u2264 ${(0, import_format.formatCount)(band.maxTokens)} tokens`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          AdminRow,
+          {
+            label: "Input $",
+            value: `${fmtUsd(band.inputPrice)} ${unit}`,
+            mono: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          AdminRow,
+          {
+            label: "Output $",
+            value: `${fmtUsd(band.outputPrice)} ${unit}`,
+            mono: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          AdminRow,
+          {
+            label: "Cached $",
+            value: `${fmtUsd(band.cachedInputPrice)} ${unit}`,
+            mono: true
+          }
+        )
+      ] }, i)),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AdminRow,
+        {
+          label: "Billing",
+          value: offering.usageBasis ? `Usage basis: ${offering.usageBasis}` : offering.tokenBilled ? "Token-billed (provider-reported tokens)" : "Standard $ / 1M tokens"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminRow, { label: "Offering", value: offering.offeringId, mono: true })
+    ] })
+  ] });
+}
+function AdminOfferingsSection({ model }) {
+  const offerings = model.admin?.offerings ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "shrink-0 border-b border-border px-3 py-2 text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+      "Offerings \u2014 real vendor / wire data (",
+      offerings.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 space-y-2 overflow-y-auto p-2", children: offerings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 p-2 text-[11px] text-destructive-ink", children: "No offerings \u2014 this model is not callable (a model without an `ai.offering` row cannot be routed)." }) : offerings.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AdminOfferingBlock,
       {
-        id: inputId,
-        value: arrayValue,
-        onChange: (e) => onChange(e.target.value.split("\n").filter((s) => s.trim())),
-        disabled,
-        className: "min-h-14 px-2 py-1.5 font-mono text-base leading-snug disabled:opacity-50 sm:text-xs",
-        placeholder: "One value per line..."
-      }
-    );
-  }
-  if (control.type === "array" || control.type === "object_array" || typeof value === "object" && value !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      JsonValueInput,
+        offering: o,
+        index: i,
+        total: offerings.length
+      },
+      o.offeringId
+    )) })
+  ] });
+}
+var SERVICE_CHIP_SELECTED = "rounded border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-foreground";
+var SERVICE_CHIP_UNSELECTED = "rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground/80";
+function ModelDetailCard({
+  model,
+  tier,
+  variant,
+  onSelect,
+  isCurrentModel,
+  pinnedOfferingId,
+  onPinOffering,
+  includeAdminSection
+}) {
+  const pinnedHere = (t) => !!isCurrentModel && !!pinnedOfferingId && t.offeringId === pinnedOfferingId;
+  const anyPinnedHere = model.tiers.some(pinnedHere);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "truncate text-sm font-semibold text-foreground", children: model.name }),
+          model.maker && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_brand_glyphs.MakerBrandGlyph,
+              {
+                maker: model.maker,
+                colored: true,
+                className: "h-3.5 w-3.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: model.maker })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex shrink-0 flex-col items-end gap-1", children: [
+          model.isPrimary && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-foreground/70", children: "Default" }),
+          model.isPremium && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-foreground/70", children: "Premium" }),
+          model.isDeprecated && !model.retiredAt && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "rounded bg-destructive/15 px-1.5 py-0.5 text-[10px] font-medium text-destructive-ink",
+              title: "Still runs normally; hidden from default selection.",
+              children: "Deprecated"
+            }
+          ),
+          model.retiredAt && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "rounded bg-destructive/15 px-1.5 py-0.5 text-[10px] font-medium text-destructive-ink",
+              title: `The provider no longer serves this model (retired ${model.retiredAt.slice(0, 10)}). It cannot be selected.`,
+              children: "Retired"
+            }
+          )
+        ] })
+      ] }),
+      model.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mt-2 line-clamp-3 text-xs text-muted-foreground", children: model.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("dl", { className: "mt-3 space-y-2 text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: "Input" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalityIcons, { list: model.input }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: "Output" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalityIcons, { list: model.output }) })
+        ] }),
+        model.features.buckets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: "Features" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "flex flex-wrap gap-1", children: model.features.buckets.map((b) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "whitespace-nowrap rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground/80",
+              title: FEATURE_BUCKETS[b].description,
+              children: FEATURE_BUCKETS[b].label
+            },
+            b
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "col-span-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Points / 1M tokens" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "dd",
+              {
+                className: "whitespace-nowrap text-sm font-semibold tabular-nums text-foreground",
+                title: "Points per 1 million tokens \u2014 what usage actually costs you",
+                children: model.pointsInput == null && model.pointsOutput == null ? "\u2014" : `${fmtPoints(model.pointsInput)} in \xB7 ${fmtPoints(model.pointsOutput)} out`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Context window" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "tabular-nums text-foreground/80", children: model.contextWindow?.toLocaleString() ?? "\u2014" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Max output" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "tabular-nums text-foreground/80", children: model.maxTokens?.toLocaleString() ?? "\u2014" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Cost" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CostTier, { tier }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Speed" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpeedDots, { value: model.speedRating }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Interaction" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "text-foreground/80", children: INTERACTION_LABEL[model.interaction] })
+          ] })
+        ] }),
+        model.tiers[0]?.servedVia && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "mb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: model.tiers.length === 1 ? SERVICE_LABEL : SERVICE_LABEL_PLURAL }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "flex flex-wrap gap-1", children: onPinOffering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onPinOffering(model, void 0),
+                title: "Auto \u2014 the server picks the preferred Service for each call",
+                className: (0, import_design_system.cn)(
+                  "transition-colors",
+                  !anyPinnedHere ? SERVICE_CHIP_SELECTED : (0, import_design_system.cn)(
+                    SERVICE_CHIP_UNSELECTED,
+                    "hover:bg-muted/60 hover:text-foreground"
+                  )
+                ),
+                children: "Auto"
+              }
+            ),
+            model.tiers.map((t) => {
+              const pinned = pinnedHere(t);
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onPinOffering(
+                    model,
+                    pinned ? void 0 : t.offeringId
+                  ),
+                  title: pinned ? "Pinned \u2014 every call uses this Service. Click to return to Auto." : `Pin every call to ${t.servedVia}`,
+                  className: (0, import_design_system.cn)(
+                    "transition-colors",
+                    pinned ? SERVICE_CHIP_SELECTED : (0, import_design_system.cn)(
+                      SERVICE_CHIP_UNSELECTED,
+                      "hover:bg-muted/60 hover:text-foreground"
+                    )
+                  ),
+                  children: t.servedVia
+                },
+                t.offeringId
+              );
+            })
+          ] }) : model.tiers.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: i === 0 ? SERVICE_CHIP_SELECTED : SERVICE_CHIP_UNSELECTED,
+              title: i === 0 ? "Default serving tier" : "Also available on this tier",
+              children: t.servedVia
+            },
+            t.offeringId
+          )) })
+        ] }),
+        model.multilingual && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 text-foreground/80", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LanguagesIcon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Multilingual" })
+        ] }),
+        model.features.raw.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "All capability flags" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { className: "font-mono text-[10px] leading-relaxed text-muted-foreground/80", children: model.features.raw.join(", ") })
+        ] })
+      ] }),
+      includeAdminSection && variant === "admin" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-3 rounded-md border border-border", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminOfferingsSection, { model }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 border-t border-border p-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
       {
-        id: inputId,
-        value,
-        onChange,
-        disabled
+        type: "button",
+        onClick: onSelect,
+        className: "w-full rounded-md bg-primary py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+        children: "Select model"
       }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_design_system.Input,
+    ) })
+  ] });
+}
+var HOVER_DELAY_MS = 400;
+function DelayedHint({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system.Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.TooltipContent, { side: "top", sideOffset: 6, className: "max-w-64 text-xs", children: label })
+  ] });
+}
+function ChipRow({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-nowrap gap-1 overflow-x-auto pb-0.5", children });
+}
+function ChipToggle({
+  active,
+  onClick,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
     {
-      id: inputId,
-      type: "text",
-      value: value === void 0 || value === null ? "" : String(value),
-      onChange: (e) => onChange(e.target.value),
-      disabled,
-      className: "h-7 w-full px-2 text-base pointer-coarse:h-11 sm:text-xs"
+      type: "button",
+      onClick,
+      className: (0, import_design_system.cn)(
+        "inline-flex shrink-0 items-center rounded-md border px-2 py-0.5 text-[11px] transition-colors",
+        active ? "border-primary bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:text-foreground",
+        className
+      ),
+      children
     }
   );
 }
-function JsonValueInput({
-  id,
+function MakerFilterButton({
+  maker,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": active,
+      "aria-label": `Filter by ${maker}`,
+      onClick,
+      className: (0, import_design_system.cn)(
+        "flex min-w-0 items-center gap-1.5 rounded-md border px-1.5 py-1 text-left transition-colors",
+        active ? "border-primary bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand_glyphs.MakerBrandGlyph, { maker, colored: true, className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DelayedHint, { label: maker, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate text-[11px] font-medium leading-tight", children: maker }) })
+      ]
+    }
+  );
+}
+function ServiceFilterButton({
+  service,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": active,
+      "aria-label": `Filter by ${service}`,
+      onClick,
+      className: (0, import_design_system.cn)(
+        "flex min-w-0 items-center gap-1.5 rounded-md border px-1.5 py-1 text-left transition-colors",
+        active ? "border-primary bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand_glyphs.ServiceBrandGlyph, { service, className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DelayedHint, { label: service, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate text-[11px] font-medium leading-tight", children: service }) })
+      ]
+    }
+  );
+}
+function TriStateChips({
   value,
   onChange,
-  disabled
+  yesLabel,
+  noLabel
 }) {
-  const toText = (v) => v === void 0 || v === null ? "" : JSON.stringify(v, null, 2);
-  const [draft, setDraft] = (0, import_react.useState)(() => toText(value));
-  const [jsonError, setJsonError] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    setDraft(toText(value));
-    setJsonError(null);
-  }, [JSON.stringify(value)]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_design_system.Textarea,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-1", children: [
+    ["any", "Any"],
+    ["yes", yesLabel],
+    ["no", noLabel]
+  ].map(([key, label]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ChipToggle,
+    {
+      active: value === key,
+      onClick: () => onChange(key),
+      children: label
+    },
+    key
+  )) });
+}
+function FilterSection({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mb-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    children
+  ] });
+}
+function FiltersPanel({
+  filters,
+  setFilters,
+  variant,
+  makerOptions,
+  serviceOptions,
+  vendorOptions,
+  apiOptions
+}) {
+  const toggleModality = (kind, m) => setFilters((f) => {
+    const next = new Set(f[kind]);
+    if (next.has(m)) next.delete(m);
+    else next.add(m);
+    return { ...f, [kind]: next };
+  });
+  const toggleFeature = (b) => setFilters((f) => {
+    const next = new Set(f.features);
+    if (next.has(b)) next.delete(b);
+    else next.add(b);
+    return { ...f, features: next };
+  });
+  const toggleSetValue = (kind, value) => setFilters((f) => {
+    const next = new Set(f[kind]);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    return { ...f, [kind]: next };
+  });
+  const sortOptions = [
+    { key: "name", label: "Name" },
+    { key: "maker", label: "Maker" },
+    { key: "service", label: SERVICE_LABEL },
+    { key: "context", label: "Context window" },
+    { key: "price", label: variant === "admin" ? "Price ($/M out)" : "Cost" },
+    ...variant === "admin" ? [
+      { key: "vendor", label: "Vendor" },
+      { key: "api", label: "API" },
+      { key: "deprecated", label: "Deprecated" },
+      { key: "availability", label: "Availability" },
+      { key: "premium", label: "Premium" }
+    ] : []
+  ];
+  const setChip = (kind) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChipToggle,
       {
-        id,
-        value: draft,
-        onChange: (e) => {
-          setDraft(e.target.value);
-          try {
-            JSON.parse(e.target.value);
-            setJsonError(null);
-          } catch (err) {
-            setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-          }
+        active: filters[kind].size === 0,
+        onClick: () => setFilters((f) => ({ ...f, [kind]: /* @__PURE__ */ new Set() })),
+        children: "Any"
+      }
+    ),
+    (kind === "makers" ? makerOptions : kind === "services" ? serviceOptions : kind === "vendors" ? vendorOptions : apiOptions).map((v) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChipToggle,
+      {
+        active: filters[kind].has(v),
+        onClick: () => toggleSetValue(kind, v),
+        children: v
+      },
+      v
+    ))
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full flex-col text-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto p-3 pb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChipRow, { children: sortOptions.map((o) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChipToggle,
+        {
+          active: filters.sort === o.key,
+          onClick: () => setFilters((f) => ({ ...f, sort: o.key })),
+          children: o.label
         },
-        onBlur: (e) => {
-          if (e.target.value.trim() === "") return;
-          try {
-            onChange(JSON.parse(e.target.value));
-            setJsonError(null);
-          } catch {
+        o.key
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Input", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChipRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.input.size === 0,
+            onClick: () => setFilters((f) => ({ ...f, input: /* @__PURE__ */ new Set() })),
+            children: "Any"
+          }
+        ),
+        INPUT_MODALITIES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.input.has(m),
+            onClick: () => toggleModality("input", m),
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize", children: m })
+          },
+          m
+        ))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Output", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChipRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.output.size === 0,
+            onClick: () => setFilters((f) => ({ ...f, output: /* @__PURE__ */ new Set() })),
+            children: "Any"
+          }
+        ),
+        OUTPUT_MODALITIES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.output.has(m),
+            onClick: () => toggleModality("output", m),
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize", children: m })
+          },
+          m
+        ))
+      ] }) }),
+      variant === "admin" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Deprecated", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          TriStateChips,
+          {
+            value: filters.deprecated,
+            onChange: (v) => setFilters((f) => ({ ...f, deprecated: v })),
+            yesLabel: "Deprecated only",
+            noLabel: "Active only"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Availability", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          TriStateChips,
+          {
+            value: filters.availability,
+            onChange: (v) => setFilters((f) => ({ ...f, availability: v })),
+            yesLabel: "Available",
+            noLabel: "Unavailable"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Premium", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          TriStateChips,
+          {
+            value: filters.premium,
+            onChange: (v) => setFilters((f) => ({ ...f, premium: v })),
+            yesLabel: "Premium only",
+            noLabel: "Standard only"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Vendor", children: setChip("vendors") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "API", children: setChip("apis") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Maker", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.makers.size === 0,
+            onClick: () => setFilters((f) => ({ ...f, makers: /* @__PURE__ */ new Set() })),
+            className: "justify-center py-1",
+            children: "Any"
           }
+        ),
+        makerOptions.map((maker) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          MakerFilterButton,
+          {
+            maker,
+            active: filters.makers.has(maker),
+            onClick: () => toggleSetValue("makers", maker)
+          },
+          maker
+        ))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: SERVICE_LABEL, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.services.size === 0,
+            onClick: () => setFilters((f) => ({ ...f, services: /* @__PURE__ */ new Set() })),
+            className: "justify-center py-1",
+            children: "Any"
+          }
+        ),
+        serviceOptions.map((service) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ServiceFilterButton,
+          {
+            service,
+            active: filters.services.has(service),
+            onClick: () => toggleSetValue("services", service)
+          },
+          service
+        ))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Features", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-1", children: FEATURE_BUCKET_ORDER.map((b) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChipToggle,
+        {
+          active: filters.features.has(b),
+          onClick: () => toggleFeature(b),
+          children: FEATURE_BUCKETS[b].label
         },
-        disabled,
-        className: "min-h-12 px-2 py-1.5 font-mono text-base leading-snug sm:text-xs",
-        spellCheck: false
-      }
-    ),
-    jsonError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "type-meta text-amber-600 dark:text-amber-400", children: jsonError })
+        b
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterSection, { label: "Interaction", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-1", children: ["any", "turn", "single", "extraction", "realtime"].map(
+        (i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ChipToggle,
+          {
+            active: filters.interaction === i,
+            onClick: () => setFilters((f) => ({ ...f, interaction: i })),
+            children: i === "any" ? "Any" : INTERACTION_LABEL[i]
+          },
+          i
+        )
+      ) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "z-10 flex shrink-0 flex-nowrap items-center gap-1 border-t border-border bg-popover px-3 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChipToggle,
+        {
+          active: filters.multilingualOnly,
+          onClick: () => setFilters((f) => ({ ...f, multilingualOnly: !f.multilingualOnly })),
+          className: "flex-1 justify-center",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LanguagesIcon, { className: "h-3 w-3" }),
+            " Multilingual"
+          ] })
+        }
+      ),
+      variant === "user" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChipToggle,
+        {
+          active: filters.includeDeprecated,
+          onClick: () => setFilters((f) => ({
+            ...f,
+            includeDeprecated: !f.includeDeprecated
+          })),
+          className: "flex-1 justify-center",
+          children: "Include deprecated"
+        }
+      )
+    ] })
   ] });
 }
-function NumberInput({
-  value,
-  placeholderValue,
-  onChange,
-  onSliderChange,
-  min,
-  max,
-  step = 1,
-  isInteger = false,
-  disabled = false,
-  withSlider = false
+function ModelRow({
+  model,
+  classTier,
+  tier,
+  variant,
+  selected,
+  isFavorite,
+  locked = false,
+  onSelect,
+  onHover,
+  onToggleFavorite
 }) {
-  const boxClass = "h-7 px-2 text-xs tabular-nums pointer-coarse:h-11";
-  const [draftState, setDraftState] = (0, import_react.useState)(() => ({
-    sourceValue: value,
-    text: value === void 0 ? "" : String(value)
-  }));
-  const shown = value === void 0 ? "" : String(value);
-  const draft = draftState.sourceValue === value ? draftState.text : shown;
-  const unset = value === void 0;
-  const hint = placeholderValue === void 0 ? "Default" : String(placeholderValue);
-  const setDraft = (text) => setDraftState({ sourceValue: value, text });
-  const sliderStep = isInteger ? Math.max(1, Math.trunc(step)) : step;
-  const commit = (raw) => {
-    if (raw === "" || raw === "-") return;
-    const parsed = isInteger ? parseInt(raw, 10) : parseFloat(raw);
-    if (!isNaN(parsed)) {
-      if (parsed !== value) onChange(parsed);
-    } else setDraft(shown);
-  };
-  if (withSlider) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: "grid grid-cols-[1fr_4.5rem] items-center gap-2",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design_system.Slider,
+  const unavailable = variant === "admin" && !(model.admin?.offerings ?? []).some((o) => o.isAvailable);
+  const retired = model.retiredAt != null;
+  const retiredTitle = retired ? `Retired ${model.retiredAt?.slice(0, 10)} \u2014 the provider no longer serves this model, so it cannot be selected.` : locked ? TOP_TIER_LOCKED_TITLE : void 0;
+  const blocked = retired || locked;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-disabled": blocked || void 0,
+      title: retiredTitle,
+      onClick: blocked ? void 0 : onSelect,
+      onKeyDown: (e) => {
+        if (blocked) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      },
+      onMouseEnter: onHover,
+      className: (0, import_design_system.cn)(
+        "grid w-full grid-cols-[16px_20px_minmax(0,1fr)_2.75rem_3rem_2.75rem] items-center gap-2 rounded px-2 py-1 transition-colors",
+        blocked ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-muted/60 focus:bg-muted/60 focus:outline-none",
+        selected && "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggleFavorite();
+            },
+            title: isFavorite ? "Remove favorite" : "Add favorite",
+            "aria-label": isFavorite ? "Remove favorite" : "Add favorite",
+            className: (0, import_design_system.cn)(
+              "flex h-4 w-4 items-center justify-center rounded transition-colors",
+              isFavorite ? "text-amber-400" : "text-muted-foreground/30 hover:text-muted-foreground"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.StarIcon, { className: (0, import_design_system.cn)("h-3 w-3", isFavorite && "fill-amber-400") })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: "flex w-5 justify-center",
+            title: model.maker ?? void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand_glyphs.MakerBrandGlyph, { maker: model.maker, colored: true, className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DelayedHint, { label: model.name, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-xs font-medium text-foreground", children: model.name }) }),
+          isDecisionModelCapability(model) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
             {
-              ...min !== void 0 ? { min } : {},
-              ...max !== void 0 ? { max } : {},
-              step: sliderStep,
-              value: [value ?? placeholderValue ?? min ?? 0],
-              "data-unset": unset ? "true" : void 0,
-              className: unset ? "opacity-50" : void 0,
-              onValueChange: (val) => {
-                const first = val[0] ?? value ?? placeholderValue ?? min ?? 0;
-                const nextValue = isInteger ? Math.trunc(first) : first;
-                onSliderChange?.(nextValue);
-                setDraft(String(nextValue));
-              },
-              disabled
+              className: "shrink-0 rounded border border-primary/40 bg-primary/10 px-1 text-[9px] font-medium text-foreground/80",
+              title: "Decision model \u2014 it answers a Questions part with probabilities and generates no text.",
+              children: "decision"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_design_system.Input,
+          model.isDeprecated && !retired && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
             {
-              type: "text",
-              inputMode: "decimal",
-              value: draft,
-              placeholder: hint,
-              onChange: (e) => setDraft(e.target.value),
-              onBlur: (e) => commit(e.target.value),
-              onFocus: (e) => e.target.select(),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") e.currentTarget.blur();
-              },
-              disabled,
-              className: boxClass
+              className: "shrink-0 rounded bg-destructive/15 px-1 text-[9px] text-destructive-ink",
+              title: "Deprecated \u2014 still runs; hidden from default selection",
+              children: "dep"
+            }
+          ),
+          retired && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "shrink-0 rounded bg-destructive/15 px-1 text-[9px] text-destructive-ink",
+              title: retiredTitle,
+              children: "retired"
+            }
+          ),
+          unavailable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "shrink-0 rounded bg-destructive/15 px-1 text-[9px] text-destructive-ink",
+              title: "No available offerings \u2014 not callable",
+              children: "off"
+            }
+          ),
+          classTier ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "shrink-0 rounded border border-primary/40 bg-primary/10 px-1 text-[9px] font-medium text-foreground/80",
+              title: `Runs on ${classTier.servedVia}`,
+              children: classTier.servedVia
+            }
+          ) : model.tiers.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "shrink-0 rounded border border-primary/40 bg-primary/10 px-1 text-[9px] font-medium text-foreground/80",
+              title: model.tiers.map((t) => t.servedVia).join(" \xB7 "),
+              children: serviceCountLabel(model.tiers.length)
             }
           )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_design_system.Input,
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpeedCell, { value: model.speedRating }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          DelayedHint,
+          {
+            label: model.contextWindow == null ? "No context window listed" : `Context window ${(0, import_format.formatCount)(model.contextWindow)} tokens`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block w-12 whitespace-nowrap text-right font-mono text-[11px] tabular-nums text-foreground/80", children: model.contextWindow == null ? "\u2014" : fmtPointsCompact(model.contextWindow) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          DelayedHint,
+          {
+            label: tier == null ? "No relative cost rating yet" : `Relative cost ${tier.replace("+", "")}${tier.endsWith("+") ? "+" : ""} \u2014 more $ is more expensive`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block w-[2.75rem] text-right", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CostTier, { tier }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function LocalModelRow({ model, selected, onSelect }) {
+  const dim = model.needsMoreMemory === true;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
     {
-      type: "text",
-      inputMode: "decimal",
-      value: draft,
-      placeholder: hint,
-      onChange: (e) => setDraft(e.target.value),
-      onBlur: (e) => commit(e.target.value),
-      onFocus: (e) => e.target.select(),
+      role: "button",
+      tabIndex: 0,
+      "data-local-model": model.id,
+      title: dim ? "Needs more memory than this computer has free" : void 0,
+      onClick: onSelect,
       onKeyDown: (e) => {
-        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
       },
+      className: (0, import_design_system.cn)(
+        "grid w-full cursor-pointer grid-cols-[16px_20px_minmax(0,1fr)_2.75rem_3rem_2.75rem] items-center gap-2 rounded px-2 py-1 transition-colors hover:bg-muted/60 focus:bg-muted/60 focus:outline-none",
+        dim && "opacity-60",
+        selected && "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex w-5 justify-center", title: model.maker ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_brand_glyphs.MakerBrandGlyph, { maker: model.maker ?? null, colored: true, className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-xs font-medium text-foreground", children: model.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              className: "shrink-0 rounded border border-primary/40 bg-primary/10 px-1 text-[9px] font-medium text-foreground/80",
+              title: "Runs on this computer",
+              children: "local"
+            }
+          ),
+          dim && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 rounded bg-muted px-1 text-[9px] text-muted-foreground", title: "Needs more memory than this computer has free", children: "needs memory" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-11" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block w-12 whitespace-nowrap text-right font-mono text-[11px] tabular-nums text-foreground/80", children: model.contextWindow == null ? "\u2014" : fmtPointsCompact(model.contextWindow) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-[2.75rem]" })
+      ]
+    }
+  );
+}
+var GROUP_HEADING = "px-2 pb-0.5 pt-1.5 text-[10px] uppercase tracking-wide text-muted-foreground";
+function ModelListDropdown({
+  value: savedValue,
+  localModels: localModelsProp,
+  onValueChange,
+  inputModalities,
+  outputModalities,
+  selectionPurpose,
+  allowedModelIds,
+  catalogVariant,
+  emptyOptionLabel,
+  onClear,
+  placeholder = "Select a model\u2026",
+  priorityModelIds,
+  pinnedOfferingId,
+  onOfferingPinChange,
+  modelOnly,
+  className,
+  triggerVariant = "default",
+  presentation = "picker",
+  id,
+  disabled = false,
+  disabledTitle,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const isMobile = (0, import_design_system.useIsMobile)();
+  const dialogContainer = (0, import_design_system.useDialogContainer)();
+  const [pickerOpen, setOpen] = (0, import_react2.useState)(false);
+  const inline = presentation === "inline";
+  const open = inline || pickerOpen;
+  const { favoriteSet, toggleFavorite } = useModelFavorites(open);
+  const ports = useModelCatalogUiPorts();
+  const canUseTopTier = ports.canUseTopTier ?? false;
+  const isSuperAdmin = ports.isSuperAdmin ?? false;
+  const LinkComponent = ports.LinkComponent;
+  const hiddenModelIds = ports.hiddenModelIds;
+  const [adminMode, setAdminMode] = (0, import_react2.useState)(false);
+  const variant = catalogVariant ?? (adminMode && isSuperAdmin ? "admin" : "user");
+  const effectiveSelectionPurpose = selectionPurpose ?? (variant === "admin" ? "admin" : "chat");
+  const { models, isLoading, error } = useModelCatalog(variant);
+  const successionIndex = (0, import_react2.useMemo)(() => buildSuccessionIndex(models), [models]);
+  const value = savedValue ? resolveSuccessor(savedValue, successionIndex) : savedValue;
+  const healedFrom = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!savedValue || !value || value === savedValue || healedFrom.current === savedValue) return;
+    healedFrom.current = savedValue;
+    if (onOfferingPinChange && pinnedOfferingId) onOfferingPinChange(void 0);
+    onValueChange(value);
+  }, [savedValue, value, onOfferingPinChange, pinnedOfferingId, onValueChange]);
+  const [query, setQuery] = (0, import_react2.useState)("");
+  const [tab, setTab] = (0, import_react2.useState)("all");
+  const [rightPanel, setRightPanel] = (0, import_react2.useState)(null);
+  const [hovered, setHovered] = (0, import_react2.useState)(null);
+  const [hoveredClass, setHoveredClass] = (0, import_react2.useState)(null);
+  const [mobileDetail, setMobileDetail] = (0, import_react2.useState)(null);
+  const [mobileDetailClass, setMobileDetailClass] = (0, import_react2.useState)(null);
+  const [mobileFilters, setMobileFilters] = (0, import_react2.useState)(false);
+  const inputRef = (0, import_react2.useRef)(null);
+  const [filters, setFilters] = (0, import_react2.useState)(() => ({
+    input: new Set(inputModalities),
+    output: new Set(outputModalities ?? []),
+    features: /* @__PURE__ */ new Set(),
+    makers: /* @__PURE__ */ new Set(),
+    services: /* @__PURE__ */ new Set(),
+    interaction: "any",
+    multilingualOnly: false,
+    sort: "name",
+    vendors: /* @__PURE__ */ new Set(),
+    apis: /* @__PURE__ */ new Set(),
+    includeDeprecated: false,
+    deprecated: "any",
+    availability: "any",
+    premium: "any"
+  }));
+  const setVariantMode = (nextAdmin) => {
+    setAdminMode(nextAdmin);
+    setHovered(null);
+    if (!nextAdmin) {
+      setFilters((f) => ({
+        ...f,
+        vendors: /* @__PURE__ */ new Set(),
+        apis: /* @__PURE__ */ new Set(),
+        deprecated: "any",
+        availability: "any",
+        premium: "any",
+        sort: ADMIN_ONLY_SORTS.has(f.sort) ? "name" : f.sort
+      }));
+    }
+  };
+  const allowedModelSet = allowedModelIds ? new Set(allowedModelIds) : null;
+  const priorityModelSet = priorityModelIds ? new Set(priorityModelIds) : null;
+  const eligibleModels = allowedModelSet ? models.filter((model) => allowedModelSet.has(model.id)) : models;
+  const selected = models.find((m) => m.id === value) ?? null;
+  const { models: localAll, groupLabel: localGroupLabel, open: openLocal } = useLocalModels(localModelsProp);
+  const selectedLocal = localAll.find((m) => m.id === value) ?? null;
+  const localEligible = !modelOnly && variant === "user" && !allowedModelSet && (effectiveSelectionPurpose === "chat" || effectiveSelectionPurpose === "agent");
+  const localRows = (0, import_react2.useMemo)(() => {
+    if (!localEligible || tab !== "all") return [];
+    const q = query.trim().toLowerCase();
+    return q ? localAll.filter((m) => [m.name, m.maker, "local"].some((f) => f?.toLowerCase().includes(q))) : localAll;
+  }, [localEligible, tab, query, localAll]);
+  const shown = selected ?? (selectedLocal ? { name: selectedLocal.name, maker: selectedLocal.maker ?? null } : null);
+  const makerOptions = (0, import_react2.useMemo)(
+    () => [
+      ...new Set(
+        eligibleModels.map((m) => m.maker).filter((v) => !!v)
+      )
+    ].sort((a, b) => a.localeCompare(b)),
+    [eligibleModels]
+  );
+  const serviceOptions = (0, import_react2.useMemo)(
+    () => [
+      ...new Set(
+        eligibleModels.flatMap((m) => m.tiers.map((t) => t.servedVia)).filter(Boolean)
+      )
+    ].sort((a, b) => a.localeCompare(b)),
+    [eligibleModels]
+  );
+  const vendorOptions = (0, import_react2.useMemo)(
+    () => [
+      ...new Set(
+        eligibleModels.flatMap((m) => (m.admin?.offerings ?? []).map((o) => o.vendor)).filter((v) => !!v)
+      )
+    ].sort((a, b) => a.localeCompare(b)),
+    [eligibleModels]
+  );
+  const apiOptions = (0, import_react2.useMemo)(
+    () => [
+      ...new Set(
+        eligibleModels.flatMap((m) => (m.admin?.offerings ?? []).map((o) => o.apiName)).filter((v) => !!v)
+      )
+    ].sort((a, b) => a.localeCompare(b)),
+    [eligibleModels]
+  );
+  const chatFitApplies = effectiveSelectionPurpose === "chat" && !(outputModalities ?? []).some((o) => o !== "text");
+  const filtered = (0, import_react2.useMemo)(() => {
+    const q = query.trim().toLowerCase();
+    const hasAvailable = (m) => (m.admin?.offerings ?? []).some((o) => o.isAvailable);
+    const rows = eligibleModels.filter((m) => {
+      const isDecision = isDecisionModelCapability(m);
+      if (effectiveSelectionPurpose === "chat" && isDecision) return false;
+      if (effectiveSelectionPurpose === "decision" && !isDecision) return false;
+      if (effectiveSelectionPurpose !== "admin" && !acceptsTextInstructions(m))
+        return false;
+      if (effectiveSelectionPurpose === "chat" && isManagedAgentModelCapability(m))
+        return false;
+      if (chatFitApplies && !isChatModelCapability(m)) return false;
+      if (tab === "favorites" && !favoriteSet.has(m.id)) return false;
+      const haystack = [
+        m.name,
+        m.maker,
+        ...m.tiers.map((t) => t.servedVia),
+        ...variant === "admin" ? (m.admin?.offerings ?? []).flatMap((o) => [
+          o.vendor,
+          o.apiName,
+          o.providerModelId
+        ]) : []
+      ];
+      if (q && !haystack.some((f) => f?.toLowerCase().includes(q)))
+        return false;
+      if (filters.makers.size > 0 && (!m.maker || !filters.makers.has(m.maker)))
+        return false;
+      if (filters.services.size > 0 && !m.tiers.some((t) => filters.services.has(t.servedVia)))
+        return false;
+      if (filters.vendors.size > 0 && !(m.admin?.offerings ?? []).some(
+        (o) => o.vendor != null && filters.vendors.has(o.vendor)
+      ))
+        return false;
+      if (filters.apis.size > 0 && !(m.admin?.offerings ?? []).some(
+        (o) => o.apiName != null && filters.apis.has(o.apiName)
+      ))
+        return false;
+      if (variant === "user" && m.id !== value && hiddenModelIds?.includes(m.id))
+        return false;
+      if (variant === "user" && !filters.includeDeprecated && m.isDeprecated && m.id !== value)
+        return false;
+      if (variant === "user" && resolveSuccessor(m.id, successionIndex) !== m.id) return false;
+      if (filters.deprecated !== "any") {
+        if (filters.deprecated === "yes" !== m.isDeprecated) return false;
+      }
+      if (filters.availability !== "any") {
+        if (filters.availability === "yes" !== hasAvailable(m)) return false;
+      }
+      if (filters.premium !== "any") {
+        if (filters.premium === "yes" !== m.isPremium) return false;
+      }
+      for (const m2 of filters.input) if (!takesInput(m, m2)) return false;
+      const outputSatisfied = (want) => m.output.includes(want) || effectiveSelectionPurpose === "agent" && isDecision && want === "text";
+      for (const m2 of filters.output) if (!outputSatisfied(m2)) return false;
+      for (const b of filters.features)
+        if (!m.features.buckets.includes(b)) return false;
+      if (filters.interaction !== "any" && m.interaction !== filters.interaction)
+        return false;
+      if (filters.multilingualOnly && !m.multilingual) return false;
+      return true;
+    });
+    const cmp = (a, b) => {
+      switch (filters.sort) {
+        case "maker":
+          return (a.maker ?? "").localeCompare(b.maker ?? "");
+        case "service":
+          return (a.tiers[0]?.servedVia ?? "\uFFFF").localeCompare(
+            b.tiers[0]?.servedVia ?? "\uFFFF"
+          ) || b.tiers.length - a.tiers.length;
+        case "context":
+          return (b.contextWindow ?? 0) - (a.contextWindow ?? 0);
+        case "price": {
+          const price = (m) => (variant === "admin" ? m.outputCost : m.costRating) ?? Infinity;
+          return price(a) - price(b) || a.name.localeCompare(b.name);
+        }
+        case "vendor":
+          return (a.admin?.offerings[0]?.vendor ?? "\uFFFF").localeCompare(
+            b.admin?.offerings[0]?.vendor ?? "\uFFFF"
+          ) || a.name.localeCompare(b.name);
+        case "api":
+          return (a.admin?.offerings[0]?.apiName ?? "\uFFFF").localeCompare(
+            b.admin?.offerings[0]?.apiName ?? "\uFFFF"
+          ) || a.name.localeCompare(b.name);
+        case "deprecated":
+          return Number(a.isDeprecated) - Number(b.isDeprecated) || a.name.localeCompare(b.name);
+        case "availability": {
+          const avail = (m) => (m.admin?.offerings ?? []).filter((o) => o.isAvailable).length;
+          return avail(b) - avail(a) || a.name.localeCompare(b.name);
+        }
+        case "premium":
+          return Number(b.isPremium) - Number(a.isPremium) || a.name.localeCompare(b.name);
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    };
+    const sorted = [...rows].sort(cmp);
+    const prioritize = (items) => {
+      if (!priorityModelSet || priorityModelSet.size === 0) return items;
+      const priority = items.filter((m) => priorityModelSet.has(m.id));
+      const rest = items.filter((m) => !priorityModelSet.has(m.id));
+      return [...priority, ...rest];
+    };
+    if (tab === "all") {
+      const favs = sorted.filter((m) => favoriteSet.has(m.id));
+      const rest = sorted.filter((m) => !favoriteSet.has(m.id));
+      return [...prioritize(favs), ...prioritize(rest)];
+    }
+    return prioritize(sorted);
+  }, [
+    eligibleModels,
+    query,
+    filters,
+    tab,
+    favoriteSet,
+    variant,
+    priorityModelSet,
+    effectiveSelectionPurpose,
+    chatFitApplies,
+    hiddenModelIds,
+    value,
+    successionIndex
+  ]);
+  const listRows = (0, import_react2.useMemo)(
+    () => filtered.flatMap((m) => {
+      if (modelOnly || m.tiers.length < 2) {
+        return [{ model: m, classTier: null }];
+      }
+      const classes = filters.services.size > 0 ? m.tiers.filter((t) => filters.services.has(t.servedVia)) : m.tiers;
+      return classes.map((t) => ({ model: m, classTier: t }));
+    }),
+    [filtered, modelOnly, filters.services]
+  );
+  const selectedClass = selected ? selected.tiers.find((t) => t.offeringId === pinnedOfferingId) ?? selected.tiers[0] ?? null : null;
+  const selectedClassLabel = !modelOnly && selected && selected.tiers.length > 1 ? selectedClass?.servedVia : void 0;
+  const activeFilterCount = filters.input.size + filters.output.size + filters.features.size + filters.makers.size + filters.services.size + filters.vendors.size + filters.apis.size + (filters.deprecated !== "any" ? 1 : 0) + (filters.availability !== "any" ? 1 : 0) + (filters.premium !== "any" ? 1 : 0) + (filters.interaction !== "any" ? 1 : 0) + (filters.multilingualOnly ? 1 : 0) + (filters.includeDeprecated ? 1 : 0);
+  const handleOpen = (next) => {
+    setOpen(next);
+    if (next) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else {
+      setRightPanel(null);
+      setHovered(null);
+      setMobileDetail(null);
+      setMobileFilters(false);
+      setQuery("");
+    }
+  };
+  const refuseIfRetired = (id2) => {
+    const target = models.find((m) => m.id === id2);
+    if (target && !canUseTopTier && isTopTierRating(target.costRating)) {
+      console.warn(`[ModelListDropdown] Refused to select ${target.name} (${id2}): ${TOP_TIER_LOCKED_TITLE}.`);
+      return true;
+    }
+    if (!target?.retiredAt) return false;
+    console.warn(
+      `[ModelListDropdown] Refused to select ${target.name} (${id2}): retired ${target.retiredAt} \u2014 the provider no longer serves it.`
+    );
+    return true;
+  };
+  const handleSelectClass = (model, classTier) => {
+    if (refuseIfRetired(model.id)) return;
+    if (onOfferingPinChange) {
+      const nextPin = classTier && model.tiers.length > 1 ? classTier.offeringId : void 0;
+      if (nextPin !== (pinnedOfferingId ?? void 0)) onOfferingPinChange(nextPin);
+    }
+    onValueChange(model.id);
+    handleOpen(false);
+  };
+  const handleSelect = (id2, tappedClass) => {
+    const next = models.find((m) => m.id === id2);
+    if (!next) return;
+    const pinnedHere = next.tiers.find((t) => t.offeringId === pinnedOfferingId) ?? null;
+    handleSelectClass(next, tappedClass ?? pinnedHere ?? next.tiers[0] ?? null);
+  };
+  const handleSelectLocal = (local) => {
+    if (openLocal) {
+      openLocal(local.id);
+      handleOpen(false);
+      return;
+    }
+    if (onOfferingPinChange && pinnedOfferingId) onOfferingPinChange(void 0);
+    onValueChange(local.id);
+    handleOpen(false);
+  };
+  const handleClear = () => {
+    onClear?.();
+    handleOpen(false);
+  };
+  const handlePinOffering = (model, offeringId) => {
+    if (!onOfferingPinChange) return;
+    if (refuseIfRetired(model.id)) return;
+    onOfferingPinChange(offeringId);
+    if (model.id !== value) onValueChange(model.id);
+  };
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      id,
       disabled,
-      className: `${boxClass} w-full`
+      title: disabled ? disabledTitle : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-disabled": disabled || void 0,
+      className: (0, import_design_system.cn)(
+        triggerVariant === "settings" ? (0, import_design_system.selectTriggerVariants)({
+          size: "default",
+          className: "h-auto min-h-9 max-lg:min-h-11 pointer-coarse:min-h-11 w-full min-w-0 max-w-full whitespace-normal text-left font-medium text-foreground"
+        }) : "inline-flex h-7 min-w-0 max-w-full items-center gap-1 overflow-hidden rounded-md bg-transparent px-1 text-xs font-medium text-foreground/80 transition-colors hover:text-foreground",
+        disabled && "cursor-not-allowed opacity-50 hover:text-foreground/80",
+        className
+      ),
+      children: [
+        triggerVariant === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: shown ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_brand_glyphs.MakerBrandGlyph,
+            {
+              maker: shown.maker,
+              colored: true,
+              className: "h-3.5 w-3.5 shrink-0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "min-w-0 whitespace-normal text-left leading-tight", children: [
+            shown.name,
+            selectedClassLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-muted-foreground", children: [
+              " \xB7 ",
+              selectedClassLabel
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 whitespace-normal text-left leading-tight text-muted-foreground", children: isLoading ? "Loading models\u2026" : emptyOptionLabel && !value ? emptyOptionLabel : placeholder }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: shown ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_brand_glyphs.MakerBrandGlyph,
+            {
+              maker: shown.maker,
+              colored: true,
+              className: "h-3.5 w-3.5 shrink-0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "min-w-0 truncate", children: [
+            shown.name,
+            selectedClassLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-muted-foreground", children: [
+              " \xB7 ",
+              selectedClassLabel
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 truncate text-muted-foreground", children: isLoading ? "Loading models\u2026" : emptyOptionLabel && !value ? emptyOptionLabel : placeholder }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_icons3.ChevronDownIcon,
+          {
+            className: (0, import_design_system.cn)(
+              "shrink-0 text-muted-foreground/60",
+              triggerVariant === "settings" ? "h-4 w-4" : "h-3 w-3"
+            )
+          }
+        )
+      ]
+    }
+  );
+  const listPanel = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5 border-b border-border p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.SearchIcon, { className: "absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_controls.Input,
+          {
+            adornment: "start",
+            ref: inputRef,
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: "Search models\u2026"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => isMobile ? setMobileFilters(true) : setRightPanel(rightPanel === "filters" ? null : "filters"),
+          className: (0, import_design_system.cn)(
+            "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-[11px] transition-colors",
+            rightPanel === "filters" ? "border-primary bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlidersHorizontalIcon, { className: "h-3.5 w-3.5" }),
+            "Filters",
+            activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-primary", children: activeFilterCount })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center gap-1 border-b border-border px-2 py-1", children: ["all", "favorites"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setTab(t),
+        className: (0, import_design_system.cn)(
+          "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[11px] transition-colors",
+          tab === t ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: [
+          t === "favorites" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_icons3.StarIcon,
+            {
+              className: (0, import_design_system.cn)(
+                "h-3 w-3",
+                tab === t && "fill-amber-400 text-amber-400"
+              )
+            }
+          ),
+          t === "all" ? "All" : "Favorites",
+          t === "favorites" && favoriteSet.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", children: favoriteSet.size })
+        ]
+      },
+      t
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-[16px_20px_minmax(0,1fr)_2.75rem_3rem_2.75rem] gap-2 border-b border-border px-2 py-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-5", title: "Maker", "aria-label": "Maker" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-11 text-right", children: "Speed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DelayedHint, { label: "How many tokens this model can hold in one conversation", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block w-12 text-right", title: "Context window", children: "Window" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DelayedHint, { label: "Relative cost band \u2014 more $ is more expensive. Not your personal usage.", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "block w-[2.75rem] text-right", children: "Cost" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto p-1", children: error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-3 text-xs text-destructive", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "font-medium", children: [
+        "Failed to load ",
+        variant,
+        " catalog"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-0.5 font-mono text-[11px] opacity-80", children: error }),
+      variant === "admin" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-1 text-[11px] text-muted-foreground", children: "If this is a 42501, the admin_model_catalog RPC rejected your role (super admin required)." }),
+      ports.renderErrorAction?.(void 0)
+    ] }) : isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 text-center text-xs text-muted-foreground", children: "Loading catalog\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      emptyOptionLabel && onClear && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: (0, import_design_system.cn)(
+            "mb-1 w-full rounded px-2 py-1.5 text-left text-xs transition-colors hover:bg-muted/60 focus:bg-muted/60 focus:outline-none",
+            !value ? "bg-muted font-medium text-foreground" : "text-muted-foreground"
+          ),
+          children: emptyOptionLabel
+        }
+      ),
+      localRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: GROUP_HEADING, children: localGroupLabel }),
+        localRows.map((l) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LocalModelRow, { model: l, selected: l.id === value, onSelect: () => handleSelectLocal(l) }, l.id)),
+        filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: GROUP_HEADING, children: "Cloud" })
+      ] }),
+      filtered.length === 0 ? localRows.length > 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 text-center text-xs text-muted-foreground", children: "No models match your filters." }) : listRows.map(({ model: m, classTier }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ModelRow,
+        {
+          model: m,
+          classTier,
+          tier: costRatingTier(m.costRating),
+          variant,
+          selected: m.id === value && (classTier == null || classTier.offeringId === selectedClass?.offeringId),
+          isFavorite: favoriteSet.has(m.id),
+          locked: !canUseTopTier && isTopTierRating(m.costRating),
+          onToggleFavorite: () => toggleFavorite(m.id),
+          onSelect: () => isMobile ? (setMobileDetail(m), setMobileDetailClass(classTier)) : handleSelectClass(m, classTier),
+          onHover: isMobile ? void 0 : () => {
+            setHovered(m);
+            setHoveredClass(classTier);
+            if (rightPanel !== "filters") setRightPanel("detail");
+          }
+        },
+        classTier ? `${m.id}:${classTier.offeringId}` : m.id
+      ))
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-border px-2 py-1 text-[10px] text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        "Models couldn't be loaded",
+        ports.renderErrorAction?.(String(error))
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        listRows.length + localRows.length,
+        " model",
+        listRows.length + localRows.length === 1 ? "" : "s",
+        variant === "user" && (hiddenModelIds?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          " \xB7 ",
+          ports.settingsHref && LinkComponent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(LinkComponent, { href: ports.settingsHref, className: "underline hover:text-foreground", children: [
+            hiddenModelIds?.length,
+            " hidden by you"
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            hiddenModelIds?.length,
+            " hidden by you"
+          ] })
+        ] }) : null
+      ] }) }),
+      isSuperAdmin && catalogVariant == null && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setVariantMode(variant !== "admin"),
+          title: variant === "admin" ? "Admin view \u2014 real vendor/api/$ data. Click to return to the user view." : "Switch to the admin view (real vendor/api/$ data)",
+          className: (0, import_design_system.cn)(
+            "inline-flex items-center gap-1 rounded px-1.5 py-0.5 transition-colors",
+            variant === "admin" ? "bg-primary/10 text-foreground" : "hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShieldIcon, { className: "h-3 w-3" }),
+            "Admin"
+          ]
+        }
+      )
+    ] })
+  ] });
+  if (disabled) {
+    return trigger;
+  }
+  const mobileBody = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: mobileDetail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        onClick: () => setMobileDetail(null),
+        className: "flex shrink-0 items-center gap-1.5 border-b border-border px-3 py-2.5 text-sm font-medium text-primary",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
+          " Back"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ModelDetailCard,
+      {
+        model: mobileDetail,
+        tier: costRatingTier(mobileDetail.costRating),
+        variant,
+        onSelect: () => handleSelect(mobileDetail.id, mobileDetailClass),
+        isCurrentModel: mobileDetail.id === value,
+        pinnedOfferingId,
+        onPinOffering: onOfferingPinChange ? handlePinOffering : void 0,
+        includeAdminSection: true
+      }
+    ) })
+  ] }) : mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        onClick: () => setMobileFilters(false),
+        className: "flex shrink-0 items-center gap-1.5 border-b border-border px-3 py-2.5 text-sm font-medium text-primary",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ChevronRightIcon, { className: "h-4 w-4 rotate-180" }),
+          " Back"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      FiltersPanel,
+      {
+        filters,
+        setFilters,
+        variant,
+        makerOptions,
+        serviceOptions,
+        vendorOptions,
+        apiOptions
+      }
+    ) })
+  ] }) : listPanel });
+  if (isMobile && inline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.TooltipProvider, { delayDuration: HOVER_DELAY_MS, skipDelayDuration: HOVER_DELAY_MS, children: mobileBody });
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system.Drawer, { open, onOpenChange: handleOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.DrawerTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.DrawerContent, { className: "h-[85dvh]", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        import_design_system.TooltipProvider,
+        {
+          delayDuration: HOVER_DELAY_MS,
+          skipDelayDuration: HOVER_DELAY_MS,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.DrawerTitle, { className: "sr-only", children: "Select model" }),
+            mobileBody
+          ]
+        }
+      ) })
+    ] });
+  }
+  const popoverWidth = LIST_WIDTH + DETAIL_WIDTH + (variant === "admin" ? ADMIN_PANEL_WIDTH : 0);
+  const adminPanelModel = hovered ?? selected;
+  const desktopBody = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_design_system.TooltipProvider,
+    {
+      delayDuration: HOVER_DELAY_MS,
+      skipDelayDuration: HOVER_DELAY_MS,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-full overflow-x-auto overflow-y-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: "flex h-full",
+          style: inline ? void 0 : { minWidth: popoverWidth },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "flex h-full min-h-0 flex-col border-r border-border",
+                style: inline ? { flex: `0 1 ${LIST_WIDTH}px`, minWidth: INLINE_LIST_MIN_WIDTH } : { width: LIST_WIDTH, flexShrink: 0 },
+                children: listPanel
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "flex h-full min-h-0 flex-col overflow-hidden",
+                style: inline ? { flex: "1 1 0", minWidth: INLINE_DETAIL_MIN_WIDTH } : { width: DETAIL_WIDTH, flexShrink: 0 },
+                children: rightPanel === "filters" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  FiltersPanel,
+                  {
+                    filters,
+                    setFilters,
+                    variant,
+                    makerOptions,
+                    serviceOptions,
+                    vendorOptions,
+                    apiOptions
+                  }
+                ) : rightPanel === "detail" && hovered ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: "h-full animate-in fade-in-0 duration-300",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      ModelDetailCard,
+                      {
+                        model: hovered,
+                        tier: costRatingTier(hovered.costRating),
+                        variant,
+                        onSelect: () => handleSelect(hovered.id, hoveredClass),
+                        isCurrentModel: hovered.id === value,
+                        pinnedOfferingId,
+                        onPinOffering: onOfferingPinChange ? handlePinOffering : void 0
+                      }
+                    )
+                  },
+                  hovered.id
+                ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MousePointerClickIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs leading-relaxed text-muted-foreground/70", children: "Hover a model to preview its details, or click to select." })
+                ] })
+              }
+            ),
+            variant === "admin" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "flex h-full min-h-0 shrink-0 flex-col overflow-hidden border-l border-border",
+                style: { width: ADMIN_PANEL_WIDTH },
+                children: adminPanelModel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AdminOfferingsSection, { model: adminPanelModel }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShieldIcon, { className: "h-6 w-6 text-muted-foreground/40" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs leading-relaxed text-muted-foreground/70", children: "Hover a model to see every offering's real vendor, api, provider model id and $ pricing." })
+                ] })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+  if (inline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-full w-full min-w-0", children: desktopBody });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_design_system.Popover, { open, onOpenChange: handleOpen, modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system.PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_design_system.PopoverContent,
+      {
+        align: "start",
+        sideOffset: 4,
+        collisionPadding: 12,
+        sticky: "always",
+        ...dialogContainer ? { container: dialogContainer } : {},
+        className: "overflow-hidden p-0",
+        style: {
+          // PopoverContent's 1px border is inside this border-box width.
+          // Give the fixed columns those two pixels at their natural desktop width;
+          // maxWidth still turns the inner panel into a horizontal scrollport.
+          width: popoverWidth + 2,
+          maxWidth: "calc(100vw - 24px)",
+          height: PANEL_HEIGHT,
+          // See LIST_MAX_HEIGHT — this clamp is what keeps the search row on
+          // screen at an 800px-tall window.
+          maxHeight: LIST_MAX_HEIGHT
+        },
+        children: desktopBody
+      }
+    )
+  ] });
+}
+
+// settings/settings-catalogue.ts
+var import_text_case = require("@ai-matrx/kit/text-case");
+var CONTROL_TYPES = [
+  "number",
+  "integer",
+  "boolean",
+  "string",
+  "enum",
+  "array",
+  "string_array",
+  "object_array"
+];
+function isControlDefinitionShape(value) {
+  return typeof value.type === "string" && CONTROL_TYPES.includes(value.type);
+}
+var TEXT_GROUP = [
+  { key: "response_format", label: "Response Format" },
+  { key: "stop_sequences", label: "Stop Sequences" },
+  { key: "temperature", label: "Temperature" },
+  { key: "max_output_tokens", label: "Max Output Tokens" },
+  { key: "top_p", label: "Top P" },
+  { key: "top_k", label: "Top K" },
+  { key: "thinking_budget", label: "Thinking Budget" },
+  { key: "thinking_level", label: "Thinking Level" },
+  { key: "reasoning_effort", label: "Reasoning Effort" },
+  { key: "reasoning_summary", label: "Reasoning Summary" },
+  // Deep Research agents: charts and images inside the report.
+  { key: "visualization", label: "Charts and Images" },
+  { key: "verbosity", label: "Verbosity" },
+  { key: "tool_choice", label: "Tool Choice" }
+];
+var FEATURE_FLAGS_GROUP = [
+  { key: "stream", label: "Stream Response" },
+  { key: "store", label: "Store Conversation" },
+  { key: "parallel_tool_calls", label: "Parallel Tool Calls" },
+  { key: "include_thoughts", label: "Include Thoughts" },
+  { key: "internal_web_search", label: "Internal Web Search" },
+  { key: "internal_url_context", label: "Internal URL Context" },
+  { key: "disable_safety_checker", label: "Disable Safety Checker" },
+  { key: "clear_thinking", label: "Clear Thinking" },
+  { key: "disable_reasoning", label: "Disable Reasoning" },
+  { key: "generate_audio", label: "Generate Audio" },
+  { key: "enhance_prompt", label: "Enhance Prompt" },
+  { key: "include_rai_reason", label: "Include RAI Reason" }
+];
+var IMAGE_VIDEO_GROUP = [
+  { key: "size", label: "Size" },
+  { key: "quality", label: "Quality" },
+  { key: "count", label: "Count" },
+  { key: "steps", label: "Steps" },
+  { key: "guidance_scale", label: "Guidance Scale" },
+  { key: "seed", label: "Seed" },
+  { key: "width", label: "Width" },
+  { key: "height", label: "Height" },
+  { key: "fps", label: "FPS" },
+  { key: "seconds", label: "Duration (s) [legacy string]" },
+  { key: "output_quality", label: "Output Quality" },
+  { key: "negative_prompt", label: "Negative Prompt" },
+  { key: "aspect_ratio", label: "Aspect Ratio" },
+  { key: "ratio", label: "Aspect Ratio (Together/Runway)" },
+  { key: "resolution", label: "Resolution" },
+  { key: "image_size", label: "Image Size" },
+  { key: "num_outputs", label: "Outputs" },
+  { key: "number_of_images", label: "Number of Images" },
+  { key: "render_quality", label: "Render Quality" },
+  { key: "background", label: "Background" },
+  { key: "input_fidelity", label: "Input Fidelity" },
+  { key: "output_compression", label: "Output Compression" },
+  { key: "moderation", label: "Moderation" },
+  { key: "partial_images", label: "Partial Images" },
+  { key: "output_mime_type", label: "Output MIME Type" },
+  { key: "person_generation", label: "Person Generation" },
+  { key: "image_format", label: "Image Format" },
+  { key: "style", label: "Style" },
+  { key: "reference_strength", label: "Reference Strength" },
+  { key: "duration_seconds", label: "Duration (s)" },
+  { key: "duration", label: "Duration" },
+  { key: "encode_quality", label: "Encode Quality" },
+  { key: "video_action", label: "Video Action" },
+  { key: "reference_images", label: "Reference Images" },
+  { key: "frame_images", label: "Frame Images" },
+  { key: "image_loras", label: "Image LoRAs" }
+];
+var AUDIO_GROUP = [
+  { key: "tts_voice", label: "Voice" },
+  { key: "performance_direction", label: "Performance Direction" },
+  { key: "speech_speed", label: "Speed" },
+  { key: "turn_pause_ms", label: "Pause Between Turns (ms)" },
+  { key: "language_code", label: "Language" },
+  { key: "audio_format", label: "Audio Format" }
+];
+var SETTINGS_CATALOGUE = [
+  { id: "text", label: "", entries: TEXT_GROUP },
+  { id: "featureFlags", label: "Feature Flags", entries: FEATURE_FLAGS_GROUP },
+  { id: "imageVideo", label: "Image / Video Settings", entries: IMAGE_VIDEO_GROUP },
+  { id: "audio", label: "Audio Settings", entries: AUDIO_GROUP }
+];
+var CATALOGUE_KEYS = new Set(
+  SETTINGS_CATALOGUE.flatMap((g) => g.entries.map((e) => e.key))
+);
+var CATCHALL_EXCLUDED = /* @__PURE__ */ new Set([
+  "rawControls",
+  "unmappedControls",
+  "model_id",
+  "model",
+  // chosen via the dedicated model picker, never a generic settings row
+  "multi_speaker",
+  // edited via the Voice editor alongside tts_voice
+  // Model-gated UI flags live in the ui_gates column + UiGatesEditor, never as
+  // settings rows — even when the model declares them as controls (e.g. every
+  // model now declares `tools` for the tool-support capability).
+  ...UI_GATE_KEYS
+]);
+function lookupControl(controls, key) {
+  if (!controls) return null;
+  if (CATCHALL_EXCLUDED.has(key)) {
+    if (key === "rawControls" || key === "unmappedControls") return null;
+  }
+  const candidate = controls[key];
+  if (candidate && typeof candidate === "object" && !Array.isArray(candidate)) {
+    const c = candidate;
+    if (isControlDefinitionShape(c)) {
+      return c;
+    }
+  }
+  return null;
+}
+function hasMeaningfulValue(settings, key) {
+  if (!settings) return false;
+  const v = settings[key];
+  return v !== void 0 && v !== null;
+}
+function buildSettingsRows(controls, settings) {
+  const groups = SETTINGS_CATALOGUE.map((group) => ({
+    id: group.id,
+    label: group.label,
+    rows: group.entries.flatMap((entry) => {
+      const control = lookupControl(controls, entry.key);
+      if (!control) return [];
+      return [
+        {
+          key: entry.key,
+          label: entry.label,
+          group: group.id,
+          control,
+          supported: true,
+          hasValue: hasMeaningfulValue(settings, entry.key)
+        }
+      ];
+    })
+  }));
+  const declaredExtra = [];
+  if (controls) {
+    for (const key of Object.keys(controls)) {
+      if (CATALOGUE_KEYS.has(key) || CATCHALL_EXCLUDED.has(key)) continue;
+      if (lookupControl(controls, key)) declaredExtra.push(key);
     }
-  );
+  }
+  if (declaredExtra.length > 0) {
+    const rows = declaredExtra.sort().map((key) => ({
+      key,
+      label: (0, import_text_case.humanizeIdentifier)(key),
+      group: "other",
+      control: lookupControl(controls, key),
+      supported: true,
+      hasValue: hasMeaningfulValue(settings, key)
+    }));
+    groups.push({ id: "other", label: "Other Settings", rows });
+  }
+  return groups;
+}
+var CATALOGUE_LABELS = new Map(
+  SETTINGS_CATALOGUE.flatMap((g) => g.entries.map((e) => [e.key, e.label]))
+);
+function settingLabel(key) {
+  return CATALOGUE_LABELS.get(key) ?? (0, import_text_case.humanizeIdentifier)(key);
+}
+var RECOGNIZED_PARAMS = new Set(LLM_PARAMS_KEYS);
+var EXTRA_EXCLUDED = /* @__PURE__ */ new Set([
+  ...CATCHALL_EXCLUDED,
+  "offering_id",
+  "max_tokens",
+  "output_format",
+  "n"
+]);
+function extraSettingKeys(controls, settings, alsoKeys = []) {
+  const out = { translated: [], unsupported: [] };
+  if (!controls) return out;
+  const declaresAny = Object.keys(controls).some((key) => lookupControl(controls, key) !== null);
+  if (!declaresAny) return out;
+  const keys = new Set(Object.keys(settings ?? {}).filter((key) => hasMeaningfulValue(settings, key)));
+  for (const key of alsoKeys) keys.add(key);
+  for (const key of keys) {
+    if (EXTRA_EXCLUDED.has(key) || lookupControl(controls, key)) continue;
+    (RECOGNIZED_PARAMS.has(key) ? out.translated : out.unsupported).push(key);
+  }
+  return out;
+}
+
+// settings/setting-state.ts
+var ENUM_OFF_VALUE = "none";
+function isOffValue(value, control) {
+  if (value === false) return true;
+  if (value === ENUM_OFF_VALUE) {
+    return !control || control.type === "enum";
+  }
+  return false;
 }
 
 // settings/react/InputCapabilitiesEditor.tsx
@@ -545,9 +2614,9 @@ var import_design_system3 = require("@ai-matrx/design-system");
 var import_controls2 = require("@ai-matrx/design-system/controls");
 
 // settings/react/settings-icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Svg({ className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Svg3({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -563,98 +2632,98 @@ function Svg({ className, children }) {
     }
   );
 }
-var CircleCheckGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m16 9-5.5 5.5L8 12" })
+var CircleCheckGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m16 9-5.5 5.5L8 12" })
 ] });
-var TriangleAlertGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 9v4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 17h.01" })
+var TriangleAlertGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 17h.01" })
 ] });
-var VariableGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 21s-4-3-4-9 4-9 4-9" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 3s4 3 4 9-4 9-4 9" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
+var VariableGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 21s-4-3-4-9 4-9 4-9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 3s4 3 4 9-4 9-4 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
 ] });
-var UnlinkGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "5" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "2", x2: "5", y1: "8", y2: "8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "16", x2: "16", y1: "19", y2: "22" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "19", x2: "22", y1: "16", y2: "16" })
+var UnlinkGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "2", x2: "5", y1: "8", y2: "8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "16", x2: "16", y1: "19", y2: "22" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "19", x2: "22", y1: "16", y2: "16" })
 ] });
-var WrenchGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Svg, { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" }) });
-var Trash2Glyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 11v6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 11v6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 6h18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+var WrenchGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Svg3, { className, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" }) });
+var Trash2Glyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 11v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 11v6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
 ] });
-var RotateCcwGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 3v5h5" })
+var RotateCcwGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 3v5h5" })
 ] });
-var ImageGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+var ImageGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 ] });
-var FileTextGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 9H8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 13H8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 17H8" })
+var FileTextGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 9H8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 13H8" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 17H8" })
 ] });
-var YoutubeGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Svg, { className, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m10 15 5-3-5-3z" })
+var YoutubeGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Svg3, { className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" }),
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m10 15 5-3-5-3z" })
 ] });
 
 // settings/react/SettingRowFrame.tsx
 var import_design_system2 = require("@ai-matrx/design-system");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var cn = (...parts) => parts.filter(Boolean).join(" ");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var cn2 = (...parts) => parts.filter(Boolean).join(" ");
 function formatSettingValue(value) {
   if (typeof value === "boolean") return value ? "On" : "Off";
   if (value !== null && typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
 function SettingRowFrame({ rowKey, state, leading, label, children, actions }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       "data-setting-row": rowKey,
       "data-setting-state": state,
       className: "grid grid-cols-[1rem_minmax(0,1fr)_auto] items-start gap-x-2 gap-y-1 py-1 @md:grid-cols-[1rem_9rem_minmax(0,1fr)_auto]",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-7 items-center", children: leading }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex min-h-7 min-w-0 items-center", children: label }),
-        children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col-span-2 col-start-2 row-start-2 min-w-0 @md:col-span-1 @md:col-start-3 @md:row-start-1", children }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "col-start-3 row-start-1 flex min-h-7 items-center justify-end @md:col-start-4", children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-7 items-center", children: leading }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex min-h-7 min-w-0 items-center", children: label }),
+        children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col-span-2 col-start-2 row-start-2 min-w-0 @md:col-span-1 @md:col-start-3 @md:row-start-1", children }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col-start-3 row-start-1 flex min-h-7 items-center justify-end @md:col-start-4", children: actions })
       ]
     }
   );
 }
 function RowLabel({ htmlFor, muted, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_design_system2.Label, { htmlFor, className: cn("min-w-0 truncate type-body", muted ? "text-muted-foreground" : "text-foreground"), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_design_system2.Label, { htmlFor, className: cn2("min-w-0 truncate type-body", muted ? "text-muted-foreground" : "text-foreground"), children });
 }
 function RowText({ children, mono }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("flex min-h-7 items-center truncate type-secondary text-muted-foreground", mono && "font-mono"), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn2("flex min-h-7 items-center truncate type-secondary text-muted-foreground", mono && "font-mono"), children });
 }
 function SettingsGroupSection({ id, title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { "data-settings-group": id, className: title ? "mt-2 border-t border-border pt-2" : void 0, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "pb-1 type-title text-foreground", children: title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { "data-settings-group": id, className: title ? "mt-2 border-t border-border pt-2" : void 0, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "pb-1 type-title text-foreground", children: title }) : null,
     children
   ] });
 }
 
 // settings/react/InputCapabilitiesEditor.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var GATE_META = {
   image_urls: {
     label: "Image URLs",
@@ -683,24 +2752,24 @@ function InputCapabilitiesEditor({
   title = "Input Capabilities",
   disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SettingsGroupSection, { id: "input-capabilities", title, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SettingsGroupSection, { id: "input-capabilities", title, children: [
     UI_GATE_EDITABLE_KEYS.map((key) => {
       const { label, description, Icon } = GATE_META[key];
       const switchId = `${idPrefix}-${key}`;
       const changed = changedKeys?.has(key) === true;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SettingRowFrame,
         {
           rowKey: key,
           state: values[key] === true ? "on" : "off",
-          leading: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "h-4 w-4 text-muted-foreground" }),
-          label: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowLabel, { htmlFor: switchId, children: label }),
-          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-            changed && onReset ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          leading: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+          label: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RowLabel, { htmlFor: switchId, children: label }),
+          actions: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            changed && onReset ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               import_controls2.Button,
               {
                 variant: "quiet",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwGlyph, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RotateCcwGlyph, {}),
                 onClick: () => onReset(key),
                 disabled,
                 "aria-label": `${resetLabel}: ${label}`,
@@ -708,225 +2777,364 @@ function InputCapabilitiesEditor({
                 "data-setting-reset": key
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              import_design_system3.Switch,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_controls2.Switch,
               {
                 id: switchId,
                 checked: values[key] === true,
                 onCheckedChange: (next) => onChange(key, next),
-                disabled,
-                className: "shrink-0"
+                disabled
               }
             )
           ] }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RowText, { children: description })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RowText, { children: description })
         },
         key
       );
     }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.ErrorBox, { as: "p", className: "py-1 type-meta text-destructive", message: error }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system3.ErrorBox, { as: "p", className: "py-1 type-meta text-destructive", message: error }) : null
   ] });
 }
 
-// settings/react/ModelSettingsPanel.tsx
+// settings/react/SettingControlInput.tsx
+var import_react3 = require("react");
 var import_design_system4 = require("@ai-matrx/design-system");
 var import_controls3 = require("@ai-matrx/design-system/controls");
-
-// settings/settings-catalogue.ts
-var import_text_case = require("@ai-matrx/kit/text-case");
-var CONTROL_TYPES = [
-  "number",
-  "integer",
-  "boolean",
-  "string",
-  "enum",
-  "array",
-  "string_array",
-  "object_array"
-];
-function isControlDefinitionShape(value) {
-  return typeof value.type === "string" && CONTROL_TYPES.includes(value.type);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SELECT_MAX_OPTIONS = 12;
+function choiceFor(options) {
+  if ((0, import_controls3.isAspectRatioOptionSet)(options)) return "aspect-ratio";
+  if (options.length > SELECT_MAX_OPTIONS) return "searchable";
+  return "select";
 }
-var TEXT_GROUP = [
-  { key: "response_format", label: "Response Format" },
-  { key: "stop_sequences", label: "Stop Sequences" },
-  { key: "temperature", label: "Temperature" },
-  { key: "max_output_tokens", label: "Max Output Tokens" },
-  { key: "top_p", label: "Top P" },
-  { key: "top_k", label: "Top K" },
-  { key: "thinking_budget", label: "Thinking Budget" },
-  { key: "thinking_level", label: "Thinking Level" },
-  { key: "reasoning_effort", label: "Reasoning Effort" },
-  { key: "reasoning_summary", label: "Reasoning Summary" },
-  // Deep Research agents: charts and images inside the report.
-  { key: "visualization", label: "Charts and Images" },
-  { key: "verbosity", label: "Verbosity" },
-  { key: "tool_choice", label: "Tool Choice" }
-];
-var FEATURE_FLAGS_GROUP = [
-  { key: "stream", label: "Stream Response" },
-  { key: "store", label: "Store Conversation" },
-  { key: "parallel_tool_calls", label: "Parallel Tool Calls" },
-  { key: "include_thoughts", label: "Include Thoughts" },
-  { key: "internal_web_search", label: "Internal Web Search" },
-  { key: "internal_url_context", label: "Internal URL Context" },
-  { key: "disable_safety_checker", label: "Disable Safety Checker" },
-  { key: "clear_thinking", label: "Clear Thinking" },
-  { key: "disable_reasoning", label: "Disable Reasoning" },
-  { key: "generate_audio", label: "Generate Audio" },
-  { key: "enhance_prompt", label: "Enhance Prompt" },
-  { key: "include_rai_reason", label: "Include RAI Reason" }
-];
-var IMAGE_VIDEO_GROUP = [
-  { key: "size", label: "Size" },
-  { key: "quality", label: "Quality" },
-  { key: "count", label: "Count" },
-  { key: "steps", label: "Steps" },
-  { key: "guidance_scale", label: "Guidance Scale" },
-  { key: "seed", label: "Seed" },
-  { key: "width", label: "Width" },
-  { key: "height", label: "Height" },
-  { key: "fps", label: "FPS" },
-  { key: "seconds", label: "Duration (s) [legacy string]" },
-  { key: "output_quality", label: "Output Quality" },
-  { key: "negative_prompt", label: "Negative Prompt" },
-  { key: "aspect_ratio", label: "Aspect Ratio" },
-  { key: "ratio", label: "Aspect Ratio (Together/Runway)" },
-  { key: "resolution", label: "Resolution" },
-  { key: "image_size", label: "Image Size" },
-  { key: "num_outputs", label: "Outputs" },
-  { key: "number_of_images", label: "Number of Images" },
-  { key: "render_quality", label: "Render Quality" },
-  { key: "background", label: "Background" },
-  { key: "input_fidelity", label: "Input Fidelity" },
-  { key: "output_compression", label: "Output Compression" },
-  { key: "moderation", label: "Moderation" },
-  { key: "partial_images", label: "Partial Images" },
-  { key: "output_mime_type", label: "Output MIME Type" },
-  { key: "person_generation", label: "Person Generation" },
-  { key: "image_format", label: "Image Format" },
-  { key: "style", label: "Style" },
-  { key: "reference_strength", label: "Reference Strength" },
-  { key: "duration_seconds", label: "Duration (s)" },
-  { key: "duration", label: "Duration" },
-  { key: "encode_quality", label: "Encode Quality" },
-  { key: "video_action", label: "Video Action" },
-  { key: "reference_images", label: "Reference Images" },
-  { key: "frame_images", label: "Frame Images" },
-  { key: "image_loras", label: "Image LoRAs" }
-];
-var AUDIO_GROUP = [
-  { key: "tts_voice", label: "Voice" },
-  { key: "performance_direction", label: "Performance Direction" },
-  { key: "speech_speed", label: "Speed" },
-  { key: "turn_pause_ms", label: "Pause Between Turns (ms)" },
-  { key: "language_code", label: "Language" },
-  { key: "audio_format", label: "Audio Format" }
-];
-var SETTINGS_CATALOGUE = [
-  { id: "text", label: "", entries: TEXT_GROUP },
-  { id: "featureFlags", label: "Feature Flags", entries: FEATURE_FLAGS_GROUP },
-  { id: "imageVideo", label: "Image / Video Settings", entries: IMAGE_VIDEO_GROUP },
-  { id: "audio", label: "Audio Settings", entries: AUDIO_GROUP }
-];
-var CATALOGUE_KEYS = new Set(
-  SETTINGS_CATALOGUE.flatMap((g) => g.entries.map((e) => e.key))
-);
-var CATCHALL_EXCLUDED = /* @__PURE__ */ new Set([
-  "rawControls",
-  "unmappedControls",
-  "model_id",
-  "model",
-  // chosen via the dedicated model picker, never a generic settings row
-  "multi_speaker",
-  // edited via the Voice editor alongside tts_voice
-  // Model-gated UI flags live in the ui_gates column + UiGatesEditor, never as
-  // settings rows — even when the model declares them as controls (e.g. every
-  // model now declares `tools` for the tool-support capability).
-  ...UI_GATE_KEYS
-]);
-function lookupControl(controls, key) {
-  if (!controls) return null;
-  if (CATCHALL_EXCLUDED.has(key)) {
-    if (key === "rawControls" || key === "unmappedControls") return null;
+function WarningIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 17h.01" })
+  ] });
+}
+function flattenTypeObject(value) {
+  if (typeof value === "object" && value !== null && !Array.isArray(value) && "type" in value && Object.keys(value).length === 1) {
+    return value.type;
+  }
+  return value;
+}
+function SettingControlInput({
+  settingKey,
+  control,
+  value,
+  onChange,
+  disabled = false,
+  id
+}) {
+  const inputId = id ?? `setting-control-${settingKey}`;
+  if (control.type === "enum" && control.enum?.length) {
+    const flattened = settingKey === "response_format" ? flattenTypeObject(value) : value;
+    const stringValue = flattened === void 0 || flattened === null ? "" : String(flattened);
+    const isValueMismatch = stringValue !== "" && !control.enum.includes(stringValue);
+    const emit = (v) => onChange(settingKey === "response_format" ? { type: v } : v);
+    const choice = choiceFor(control.enum);
+    const picker = choice === "aspect-ratio" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_controls3.AspectRatioSelect,
+      {
+        value: isValueMismatch ? "" : stringValue,
+        onChange: emit,
+        options: control.enum,
+        variant: "inline",
+        disabled,
+        id: inputId,
+        placeholder: "Default"
+      }
+    ) : choice === "searchable" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_controls3.OptionCombobox,
+      {
+        value: isValueMismatch ? "" : stringValue,
+        onChange: emit,
+        options: control.enum,
+        variant: "inline",
+        disabled,
+        id: inputId,
+        placeholder: "Default"
+      }
+    ) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-1 items-center gap-1.5", children: [
+      picker ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        import_design_system4.Select,
+        {
+          value: isValueMismatch ? "" : stringValue,
+          onValueChange: emit,
+          disabled,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_design_system4.SelectTrigger,
+              {
+                id: inputId,
+                className: "h-7 flex-1 border-0 bg-transparent px-1 text-xs font-medium text-foreground shadow-none hover:bg-transparent focus:ring-0 pointer-coarse:h-11 [&_svg]:h-3 [&_svg]:w-3",
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system4.SelectValue, { placeholder: isValueMismatch ? stringValue : "Default" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system4.SelectContent, { className: "text-xs", children: control.enum.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_design_system4.SelectItem,
+              {
+                value: option,
+                className: "py-1 text-xs",
+                children: option === ENUM_OFF_VALUE ? "Off" : option
+              },
+              option
+            )) })
+          ]
+        }
+      ),
+      isValueMismatch && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system4.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_design_system4.Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system4.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "shrink-0 cursor-help text-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WarningIcon, { className: "h-3.5 w-3.5" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_design_system4.TooltipContent, { side: "top", className: "max-w-[220px] type-secondary", children: [
+          '"',
+          stringValue,
+          '" is not a recognized option for this model'
+        ] })
+      ] }) })
+    ] });
   }
-  const candidate = controls[key];
-  if (candidate && typeof candidate === "object" && !Array.isArray(candidate)) {
-    const c = candidate;
-    if (isControlDefinitionShape(c)) {
-      return c;
-    }
+  if (control.type === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_design_system4.Checkbox,
+        {
+          id: inputId,
+          checked: value === true,
+          onCheckedChange: (c) => onChange(c === true),
+          disabled,
+          className: "cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_design_system4.Label,
+        {
+          htmlFor: inputId,
+          className: "cursor-pointer text-xs text-muted-foreground",
+          children: value === true ? "On" : "Off"
+        }
+      )
+    ] });
   }
-  return null;
+  if (control.type === "number" || control.type === "integer") {
+    const numeric = typeof value === "number" ? value : void 0;
+    const hasRange = control.min !== void 0 && control.max !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      NumberInput,
+      {
+        value: numeric,
+        placeholderValue: typeof control.default === "number" ? control.default : void 0,
+        onChange,
+        onSliderChange: hasRange ? onChange : void 0,
+        min: control.min,
+        max: control.max,
+        step: control.type === "integer" ? 1 : 0.01,
+        isInteger: control.type === "integer",
+        disabled,
+        withSlider: hasRange
+      }
+    );
+  }
+  if (control.type === "string_array") {
+    const arrayValue = Array.isArray(value) ? value.join("\n") : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_design_system4.Textarea,
+      {
+        id: inputId,
+        value: arrayValue,
+        onChange: (e) => onChange(e.target.value.split("\n").filter((s) => s.trim())),
+        disabled,
+        className: "min-h-14 px-2 py-1.5 font-mono text-base leading-snug disabled:opacity-50 sm:text-xs",
+        placeholder: "One value per line..."
+      }
+    );
+  }
+  if (control.type === "array" || control.type === "object_array" || typeof value === "object" && value !== null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      JsonValueInput,
+      {
+        id: inputId,
+        value,
+        onChange,
+        disabled
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_design_system4.Input,
+    {
+      id: inputId,
+      type: "text",
+      value: value === void 0 || value === null ? "" : String(value),
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      className: "h-7 w-full px-2 text-base pointer-coarse:h-11 sm:text-xs"
+    }
+  );
 }
-function hasMeaningfulValue(settings, key) {
-  if (!settings) return false;
-  const v = settings[key];
-  return v !== void 0 && v !== null;
+function JsonValueInput({
+  id,
+  value,
+  onChange,
+  disabled
+}) {
+  const toText = (v) => v === void 0 || v === null ? "" : JSON.stringify(v, null, 2);
+  const [draft, setDraft] = (0, import_react3.useState)(() => toText(value));
+  const [jsonError, setJsonError] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    setDraft(toText(value));
+    setJsonError(null);
+  }, [JSON.stringify(value)]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_design_system4.Textarea,
+      {
+        id,
+        value: draft,
+        onChange: (e) => {
+          setDraft(e.target.value);
+          try {
+            JSON.parse(e.target.value);
+            setJsonError(null);
+          } catch (err) {
+            setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+          }
+        },
+        onBlur: (e) => {
+          if (e.target.value.trim() === "") return;
+          try {
+            onChange(JSON.parse(e.target.value));
+            setJsonError(null);
+          } catch {
+          }
+        },
+        disabled,
+        className: "min-h-12 px-2 py-1.5 font-mono text-base leading-snug sm:text-xs",
+        spellCheck: false
+      }
+    ),
+    jsonError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "type-meta text-amber-600 dark:text-amber-400", children: jsonError })
+  ] });
 }
-function buildSettingsRows(controls, settings) {
-  const groups = SETTINGS_CATALOGUE.map((group) => ({
-    id: group.id,
-    label: group.label,
-    rows: group.entries.flatMap((entry) => {
-      const control = lookupControl(controls, entry.key);
-      if (!control) return [];
-      return [
-        {
-          key: entry.key,
-          label: entry.label,
-          group: group.id,
-          control,
-          supported: true,
-          hasValue: hasMeaningfulValue(settings, entry.key)
-        }
-      ];
-    })
+function NumberInput({
+  value,
+  placeholderValue,
+  onChange,
+  onSliderChange,
+  min,
+  max,
+  step = 1,
+  isInteger = false,
+  disabled = false,
+  withSlider = false
+}) {
+  const boxClass = "h-7 px-2 text-xs tabular-nums pointer-coarse:h-11";
+  const [draftState, setDraftState] = (0, import_react3.useState)(() => ({
+    sourceValue: value,
+    text: value === void 0 ? "" : String(value)
   }));
-  const declaredExtra = [];
-  if (controls) {
-    for (const key of Object.keys(controls)) {
-      if (CATALOGUE_KEYS.has(key) || CATCHALL_EXCLUDED.has(key)) continue;
-      if (lookupControl(controls, key)) declaredExtra.push(key);
-    }
-  }
-  if (declaredExtra.length > 0) {
-    const rows = declaredExtra.sort().map((key) => ({
-      key,
-      label: (0, import_text_case.humanizeIdentifier)(key),
-      group: "other",
-      control: lookupControl(controls, key),
-      supported: true,
-      hasValue: hasMeaningfulValue(settings, key)
-    }));
-    groups.push({ id: "other", label: "Other Settings", rows });
+  const shown = value === void 0 ? "" : String(value);
+  const draft = draftState.sourceValue === value ? draftState.text : shown;
+  const unset = value === void 0;
+  const hint = placeholderValue === void 0 ? "Default" : String(placeholderValue);
+  const setDraft = (text) => setDraftState({ sourceValue: value, text });
+  const sliderStep = isInteger ? Math.max(1, Math.trunc(step)) : step;
+  const commit = (raw) => {
+    if (raw === "" || raw === "-") return;
+    const parsed = isInteger ? parseInt(raw, 10) : parseFloat(raw);
+    if (!isNaN(parsed)) {
+      if (parsed !== value) onChange(parsed);
+    } else setDraft(shown);
+  };
+  if (withSlider) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: "grid grid-cols-[1fr_4.5rem] items-center gap-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_design_system4.Slider,
+            {
+              ...min !== void 0 ? { min } : {},
+              ...max !== void 0 ? { max } : {},
+              step: sliderStep,
+              value: [value ?? placeholderValue ?? min ?? 0],
+              "data-unset": unset ? "true" : void 0,
+              className: unset ? "opacity-50" : void 0,
+              onValueChange: (val) => {
+                const first = val[0] ?? value ?? placeholderValue ?? min ?? 0;
+                const nextValue = isInteger ? Math.trunc(first) : first;
+                onSliderChange?.(nextValue);
+                setDraft(String(nextValue));
+              },
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_design_system4.Input,
+            {
+              type: "text",
+              inputMode: "decimal",
+              value: draft,
+              placeholder: hint,
+              onChange: (e) => setDraft(e.target.value),
+              onBlur: (e) => commit(e.target.value),
+              onFocus: (e) => e.target.select(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") e.currentTarget.blur();
+              },
+              disabled,
+              className: boxClass
+            }
+          )
+        ]
+      }
+    );
   }
-  return groups;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_design_system4.Input,
+    {
+      type: "text",
+      inputMode: "decimal",
+      value: draft,
+      placeholder: hint,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: (e) => commit(e.target.value),
+      onFocus: (e) => e.target.select(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+      },
+      disabled,
+      className: `${boxClass} w-full`
+    }
+  );
 }
 
 // settings/react/ModelSettingsPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function StatusGlyph({ issue, source }) {
   const title = issue ? issue.message : source ? `Valid \xB7 ${source}` : "Valid";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
-      className: cn("inline-flex h-7 w-6 shrink-0 items-center justify-center", issue ? "text-warning" : "text-success"),
+      className: cn2("inline-flex h-7 w-6 shrink-0 items-center justify-center", issue ? "text-warning" : "text-success"),
       role: "img",
       "aria-label": title,
       title,
-      children: issue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TriangleAlertGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CircleCheckGlyph, { className: "h-3.5 w-3.5" })
+      children: issue ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TriangleAlertGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CircleCheckGlyph, { className: "h-3.5 w-3.5" })
     }
   );
 }
 function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
   const read = target.read(row.key, control);
   const resetLabel = target.resetLabel ?? "Reset to agent";
-  const reset = read.changedHere && target.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_controls3.Button,
+  const reset = read.changedHere && target.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_controls4.Button,
     {
       variant: "quiet",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RotateCcwGlyph, {}),
       onClick: () => target.resetToInherited?.(row.key),
       disabled,
       "aria-label": `${resetLabel}: ${row.label}`,
@@ -935,20 +3143,20 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
     }
   ) : null;
   if (read.state === "bound") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SettingRowFrame,
       {
         rowKey: row.key,
         state: "bound",
-        leading: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system4.Checkbox, { checked: true, disabled: true, "aria-label": `${row.label} is a run input` }),
-        label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: row.label }),
-        actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        leading: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_design_system5.Checkbox, { checked: true, disabled: true, "aria-label": `${row.label} is a run input` }),
+        label: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RowLabel, { children: row.label }),
+        actions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
           reset,
-          target.unbind ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_controls3.Button,
+          target.unbind ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_controls4.Button,
             {
               variant: "quiet",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnlinkGlyph, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UnlinkGlyph, {}),
               onClick: () => target.unbind?.(row.key, control),
               disabled,
               "aria-label": `Make ${row.label} a fixed setting`,
@@ -956,9 +3164,9 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             }
           ) : null
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex min-h-7 min-w-0 items-center gap-2", "data-bound-control": row.key, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Chip, { tone: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VariableGlyph, {}), label: `{{${read.variableName}}}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate type-meta text-muted-foreground", children: read.value === void 0 || read.value === null || read.value === "" ? "Model default" : formatSettingValue(read.value) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex min-h-7 min-w-0 items-center gap-2", "data-bound-control": row.key, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_controls4.Chip, { tone: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VariableGlyph, {}), label: `{{${read.variableName}}}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate type-meta text-muted-foreground", children: read.value === void 0 || read.value === null || read.value === "" ? "Model default" : formatSettingValue(read.value) })
         ] })
       }
     );
@@ -968,13 +3176,13 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
   const isOff = isSet && isOffValue(value, control);
   const checkboxId = `${idPrefix}-setting-${row.key}`;
   const canBind = Boolean(target.bind) && (target.canBind?.(row.key) ?? true);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     SettingRowFrame,
     {
       rowKey: row.key,
       state: isOff ? "off" : read.state,
-      leading: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_design_system4.Checkbox,
+      leading: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_design_system5.Checkbox,
         {
           id: checkboxId,
           checked: isSet,
@@ -982,14 +3190,14 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           onCheckedChange: (next) => next === true ? target.turnOn(row.key, control) : target.clear(row.key)
         }
       ),
-      label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { htmlFor: checkboxId, muted: !isSet, children: row.label }),
-      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusGlyph, { issue: read.issue, source: read.source }),
-        canBind ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_controls3.Button,
+      label: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RowLabel, { htmlFor: checkboxId, muted: !isSet, children: row.label }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatusGlyph, { issue: read.issue, source: read.source }),
+        canBind ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_controls4.Button,
           {
             variant: "quiet",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VariableGlyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(VariableGlyph, {}),
             onClick: () => target.bind?.(row.key, control),
             disabled,
             "aria-label": `Make ${row.label} a run input`,
@@ -997,11 +3205,11 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             "data-bind-control": row.key
           }
         ) : null,
-        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_controls3.Button,
+        isSet && read.issue?.fixable && target.fix ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_controls4.Button,
           {
             variant: "quiet",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WrenchGlyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WrenchGlyph, {}),
             onClick: () => target.fix?.(row.key),
             disabled,
             "aria-label": `Fix ${row.label} automatically`,
@@ -1009,12 +3217,12 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           }
         ) : null,
         reset,
-        isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_controls3.Button,
+        isSet ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_controls4.Button,
           {
             variant: "quiet",
             removes: true,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2Glyph, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash2Glyph, {}),
             onClick: () => target.clear(row.key),
             disabled,
             "aria-label": `Clear ${row.label} to not set`,
@@ -1023,8 +3231,8 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
           }
         ) : null
       ] }),
-      children: isSet ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: isSet ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           SettingControlInput,
           {
             settingKey: row.key,
@@ -1035,23 +3243,77 @@ function ModelSettingRow({ row, control, target, idPrefix, disabled }) {
             id: `${idPrefix}-control-${row.key}`
           }
         ),
-        read.issue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "pt-1 type-meta text-warning-ink", children: read.issue.message }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowText, { children: read.modelDefault !== void 0 && read.modelDefault !== null ? `Not set \xB7 Model default: ${formatSettingValue(read.modelDefault)}` : "Not set" })
+        read.issue ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "pt-1 type-meta text-warning-ink", children: read.issue.message }) : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RowText, { children: read.modelDefault !== void 0 && read.modelDefault !== null ? `Not set \xB7 Model default: ${formatSettingValue(read.modelDefault)}` : "Not set" })
     }
   );
 }
 function ExtraSettingRow({ rowKey, label, value, kind, onClear, onReset, resetLabel = "Reset to agent", disabled = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     SettingRowFrame,
     {
       rowKey,
       state: kind,
-      label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: label }),
-      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        kind === "translated" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Chip, { tone: "sky", label: "Translated", title: "Kept as set and sent as this model's closest equivalent" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Chip, { tone: "warning", label: "Not on this model", title: "This model has no such setting" }),
-        onReset ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RotateCcwGlyph, {}), onClick: onReset, disabled, "aria-label": `${resetLabel}: ${label}`, title: resetLabel }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls3.Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Trash2Glyph, {}), onClick: onClear, disabled, "aria-label": `Clear ${label}`, title: "Clear to not set" })
+      label: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RowLabel, { children: label }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        kind === "translated" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_controls4.Chip, { tone: "sky", label: "Translated", title: "Kept as set and sent as this model's closest equivalent" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_controls4.Chip, { tone: "warning", label: "Not on this model", title: "This model has no such setting" }),
+        onReset ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RotateCcwGlyph, {}), onClick: onReset, disabled, "aria-label": `${resetLabel}: ${label}`, title: resetLabel, "data-setting-reset": rowKey }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_controls4.Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash2Glyph, {}), onClick: onClear, disabled, "aria-label": `Clear ${label}`, title: "Clear to not set", "data-setting-clear": rowKey })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowText, { mono: true, children: isOffValue(value, null) ? "Off" : formatSettingValue(value) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RowText, { mono: value !== void 0 && value !== null, children: value === void 0 || value === null ? "Not set" : isOffValue(value, null) ? "Off" : formatSettingValue(value) })
+    }
+  );
+}
+function ModelRow2({ model, resetLabel, idPrefix, disabled }) {
+  const off = disabled || model.disabled === true;
+  const oneMessageId = `${idPrefix}-model-one-message`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    SettingRowFrame,
+    {
+      rowKey: "model",
+      state: model.value ? "set" : "unset",
+      label: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RowLabel, { children: "Model" }),
+      actions: model.changedHere && model.resetToInherited ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_controls4.Button,
+        {
+          variant: "quiet",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RotateCcwGlyph, {}),
+          onClick: () => model.resetToInherited?.(),
+          disabled: off,
+          "aria-label": `${resetLabel}: Model`,
+          title: resetLabel,
+          "data-setting-reset": "model"
+        }
+      ) : null,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-h-7 min-w-0 flex-wrap items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ModelListDropdown,
+          {
+            "aria-label": "Model",
+            value: model.value,
+            onValueChange: model.change,
+            inputModalities: [],
+            disabled: off,
+            className: "min-w-0",
+            pinnedOfferingId: model.pinnedOfferingId,
+            onOfferingPinChange: model.changePin,
+            ...model.emptyChoice ? { emptyOptionLabel: model.emptyChoice.label, onClear: model.emptyChoice.choose, placeholder: model.emptyChoice.label } : {},
+            ...model.localModels ? { localModels: model.localModels } : {},
+            ...model.disabledTitle ? { disabledTitle: model.disabledTitle } : {}
+          }
+        ),
+        model.oneMessage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: oneMessageId, className: "flex min-h-7 items-center gap-1 type-secondary text-muted-foreground", title: "Use this model for the next message, then go back", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_controls4.Switch,
+            {
+              id: oneMessageId,
+              checked: model.oneMessage.on,
+              onCheckedChange: (next) => model.oneMessage?.change(next),
+              disabled
+            }
+          ),
+          "This message only"
+        ] }) : null
+      ] })
     }
   );
 }
@@ -1068,15 +3330,33 @@ function ModelSettingsPanel({
   disabled = false
 }) {
   const groups = controls ? buildSettingsRows(controls, values).filter((group) => group.rows.length > 0) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-model-settings-panel": "", className: "@container flex min-w-0 flex-col", children: [
-    model ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingRowFrame, { rowKey: "model", label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RowLabel, { children: "Model" }), children: model }) : null,
+  const extras = extraSettingKeys(controls, values, target.changedKeys);
+  const resetLabel = target.resetLabel ?? "Reset to agent";
+  const extraRow = (key, kind) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ExtraSettingRow,
+    {
+      rowKey: key,
+      label: settingLabel(key),
+      value: values?.[key],
+      kind,
+      onClear: () => target.clear(key),
+      onReset: target.resetToInherited && target.read(key, null).changedHere ? () => target.resetToInherited?.(key) : void 0,
+      resetLabel,
+      disabled
+    },
+    key
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-model-settings-panel": "", className: "@container flex min-w-0 flex-col", children: [
+    model ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModelRow2, { model, resetLabel, idPrefix, disabled }) : null,
     notices,
-    groups.length === 0 && emptyNote ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "py-2 type-secondary text-muted-foreground", children: emptyNote }) : null,
-    groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SettingsGroupSection, { id: group.id, title: group.label || void 0, children: group.rows.map((row) => {
+    extras.unsupported.map((key) => extraRow(key, "unsupported")),
+    extras.translated.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettingsGroupSection, { id: "translated", title: "Translated for this model", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-translated-settings": "", children: extras.translated.map((key) => extraRow(key, "translated")) }) }) : null,
+    groups.length === 0 && emptyNote ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "py-2 type-secondary text-muted-foreground", children: emptyNote }) : null,
+    groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettingsGroupSection, { id: group.id, title: group.label || void 0, children: group.rows.map((row) => {
       const custom = renderRow?.(row);
-      if (custom !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: custom }, row.key);
+      if (custom !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: custom }, row.key);
       if (!row.control) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ModelSettingRow,
         {
           row,
@@ -1088,14 +3368,14 @@ function ModelSettingsPanel({
         row.key
       );
     }) }, group.id)),
-    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    capabilities ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       InputCapabilitiesEditor,
       {
         values: capabilities.values,
         onChange: capabilities.change,
         changedKeys: capabilities.changedKeys,
         onReset: capabilities.resetToInherited,
-        resetLabel: target.resetLabel,
+        resetLabel,
         error: capabilities.error,
         idPrefix: `${idPrefix}-capability`,
         disabled
@@ -1106,7 +3386,7 @@ function ModelSettingsPanel({
 
 // settings/react/index.ts
 function useSettingsSelector(store, select) {
-  return (0, import_react2.useSyncExternalStore)(
+  return (0, import_react5.useSyncExternalStore)(
     store.subscribe,
     () => select(store.getState()),
     () => select(store.getState())