@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/data/{ai/RuntimeBar.cjs → runtime/RuntimeBarSegments.cjs}

@@ -1,100 +1,45 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const InputField = require("../../components/InputField.cjs");
 const utils = require("../../lib/utils.cjs");
 const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
 const Icon = require("../Icon.cjs");
 const effortIcons = require("../chat/effort-icons.cjs");
 const providerIcons = require("../chat/provider-icons.cjs");
 const RuntimeBar_model = require("./RuntimeBar.model.cjs");
-const RuntimeBarCombo = require("./RuntimeBarCombo.cjs");
-const fields = require("./SpecRuntimeEditor/fields.cjs");
-const update = require("./SpecRuntimeEditor/update.cjs");
-const modelCapabilities = require("./model-capabilities.cjs");
+const availability = require("./availability.cjs");
 const runtimeMode = require("./runtime-mode.cjs");
 const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
 const UiCheck = require("../../icons/components/UiCheck.cjs");
-function RuntimeBar({
+function RuntimeBarSegments({
   value,
-  onChange,
-  variant = "segmented",
-  models = [],
-  families = runtimeMode.SPEC_RUNTIME_FAMILIES,
-  reasoningEfforts = effortIcons.DEFAULT_REASONING_EFFORTS,
-  ariaLabel = "Runtime",
-  className
+  models,
+  modelOptions,
+  resolvedModel,
+  selectedModelUnavailable,
+  families,
+  family,
+  mode,
+  selectedMode,
+  reasoningEfforts,
+  supportedEfforts,
+  ariaLabel,
+  className,
+  onBackendChange,
+  onCustomModel,
+  onModelSelect,
+  onModelClear,
+  onEffortChange
 }) {
-  const selection = runtimeMode.selectionForBackend(families, value.backend);
-  const family = runtimeMode.familyById(families, selection.family);
-  const mode = family.modes.find((entry) => entry.id === selection.mode) ?? runtimeMode.firstMode(family);
-  const modelOptions = runtimeMode.modelsForFamily(models, family, value.backend);
-  const selectedModel = models.find(
-    (entry) => {
-      var _a;
-      return ((_a = entry.runtime) == null ? void 0 : _a.backend) === value.backend && RuntimeBar_model.runtimeModelMatches(entry, value);
-    }
-  );
-  const resolvedModel = selectedModel ?? models.find((entry) => RuntimeBar_model.runtimeModelMatches(entry, value));
-  const supportedEfforts = modelCapabilities.effortOptionsForModel(
-    resolvedModel,
-    reasoningEfforts
-  );
-  const applyBackend = (familyId, modeId) => {
-    const backend = runtimeMode.backendForFamilyMode(families, familyId, modeId);
-    if (backend === (value.backend ?? "")) return;
-    let next = update.withOptionalRoot(
-      update.withRoot(value, { backend }),
-      "cliArgs",
-      void 0
-    );
-    if (!runtimeMode.modelBelongsToFamily(
-      value.model,
-      models,
-      runtimeMode.familyById(families, familyId),
-      backend
-    )) {
-      next = withoutCatalogModel(next);
-    }
-    onChange(next);
-  };
-  const applyCustomModel = (model) => onChange(update.withOptionalRoot(withoutCatalogModel(value), "model", model));
-  const applyModel = (model) => onChange(modelCapabilities.reconcileModelCapabilities(value, model, reasoningEfforts));
-  const clearModel = () => onChange(withoutCatalogModel(value));
-  const applyEffort = (effort) => onChange(update.withOptionalRoot(value, "effort", effort));
-  if (variant === "combo") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      RuntimeBarCombo.RuntimeBarCombo,
-      {
-        value,
-        families,
-        family,
-        mode,
-        selectedMode: selection.mode,
-        models: modelOptions,
-        selectedModel: resolvedModel,
-        supportedEfforts,
-        ariaLabel,
-        className,
-        onFamilyChange: (familyId) => applyBackend(familyId, selection.mode),
-        onModeChange: (modeId) => applyBackend(family.id, modeId),
-        onModelSelect: applyModel,
-        onModelClear: clearModel,
-        onEffortChange: applyEffort
-      }
-    );
-  }
   const brand = RuntimeBar_model.runtimeFamilyBrand(family);
-  const modelLabel = (resolvedModel == null ? void 0 : resolvedModel.label) ?? value.model ?? "Default";
+  const modelLabel = selectedModelUnavailable ? "Unavailable selection" : (resolvedModel == null ? void 0 : resolvedModel.label) ?? value.model ?? "Default";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: "group",
       "aria-label": ariaLabel,
       className: utils.cn(
-        // `w-fit` so the bar hugs its segments instead of being stretched by a
-        // grid/flex parent — the row is content-sized, not a form field.
-        // The outer edge is a control border (`--input`); the segment dividers
-        // inside it are the subtler `--border`, so the bar reads as one object.
         "inline-flex h-control-h w-fit max-w-full items-stretch overflow-hidden rounded-md border border-input bg-background",
         className
       ),
@@ -108,7 +53,7 @@ function RuntimeBar({
               families,
               models,
               selectedId: family.id,
-              onSelect: (familyId) => applyBackend(familyId, selection.mode)
+              onSelect: (familyId) => onBackendChange(familyId, selectedMode)
             }),
             children: [
               brand.icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -128,10 +73,9 @@ function RuntimeBar({
             menuLabel: "Runtime mode",
             title: mode.title ?? "Runtime mode",
             items: modeItems({
-              families,
               family,
-              selectedId: selection.mode,
-              onSelect: (modeId) => applyBackend(family.id, modeId)
+              selectedId: selectedMode,
+              onSelect: (modeId) => onBackendChange(family.id, modeId)
             }),
             children: [
               mode.icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -149,26 +93,28 @@ function RuntimeBar({
           RuntimeSegment,
           {
             menuLabel: "Model",
-            title: value.model ? `Model — ${value.model}` : "Model — prompt default",
-            className: "min-w-0 max-w-56",
+            title: selectedModelUnavailable ? "Model — unavailable selection" : value.model ? `Model — ${value.model}` : "Model — prompt default",
+            className: "min-w-0 max-w-56 flex-1 [&>span]:min-w-0 [&>span]:w-full [&>span>button]:w-full",
             header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: KEY_CLASS, children: "Model id" }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                fields.SpecInput,
+                InputField.InputField,
                 {
-                  value: value.model,
-                  onChange: applyCustomModel,
-                  ariaLabel: "Model id",
-                  mono: true
+                  value: selectedModelUnavailable ? "" : value.model ?? "",
+                  onChange: onCustomModel,
+                  ...selectedModelUnavailable ? { placeholder: "Unavailable selection" } : {},
+                  "aria-label": "Model id",
+                  inputClassName: "font-mono text-xs",
+                  className: "bg-background"
                 }
               )
             ] }),
             items: modelItems({
               models: modelOptions,
               group: `${family.label} models`,
-              selectedId: (resolvedModel == null ? void 0 : resolvedModel.id) ?? value.model,
-              onSelect: applyModel,
-              onClear: clearModel
+              selectedId: selectedModelUnavailable ? void 0 : (resolvedModel == null ? void 0 : resolvedModel.id) ?? value.model,
+              onSelect: onModelSelect,
+              onClear: onModelClear
             }),
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate font-mono text-xs text-foreground", children: modelLabel })
           }
@@ -186,7 +132,7 @@ function RuntimeBar({
               ),
               supported: supportedEfforts,
               selected: value.effort,
-              onSelect: applyEffort
+              onSelect: onEffortChange
             }),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: KEY_CLASS, children: "Effort" }),
@@ -199,13 +145,6 @@ function RuntimeBar({
     }
   );
 }
-function withoutCatalogModel(value) {
-  return update.withOptionalRoot(
-    update.withOptionalRoot(value, "model", void 0),
-    "id",
-    void 0
-  );
-}
 const CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
 const KEY_CLASS = "text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground";
 function RuntimeSegment({
@@ -269,7 +208,7 @@ function itemLabel({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("block truncate", selected && "font-semibold"), children: text }),
-      hint && stacked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-mono text-[11px] text-muted-foreground", children: hint })
+      hint && stacked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block whitespace-normal text-[11px] leading-4 text-muted-foreground", children: hint })
     ] }),
     hint && !stacked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: hint }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -290,7 +229,9 @@ function familyItems({
   selectedId,
   onSelect
 }) {
-  return families.map((family) => {
+  return families.filter(
+    (family) => family.modes.some((mode) => !availability.isUnavailable(mode.availability))
+  ).map((family) => {
     const brand = RuntimeBar_model.runtimeFamilyBrand(family);
     const count = runtimeMode.modelsForFamily(models, family).length;
     return {
@@ -306,27 +247,21 @@ function familyItems({
   });
 }
 function modeItems({
-  families,
   family,
   selectedId,
   onSelect
 }) {
-  return runtimeMode.runtimeModeOptions(families).map((mode) => {
-    const supported = family.modes.find((entry) => entry.id === mode.id);
-    const hint = (supported == null ? void 0 : supported.title) ?? runtimeMode.unsupportedModeTitle(family);
-    return {
-      group: "Mode · runtime",
-      label: itemLabel({
-        text: (supported == null ? void 0 : supported.label) ?? mode.label,
-        hint,
-        selected: mode.id === selectedId
-      }),
-      ...mode.icon ? { icon: mode.icon } : {},
-      title: hint,
-      disabled: !supported,
-      onSelect: () => onSelect(mode.id)
-    };
-  });
+  return family.modes.filter((mode) => !availability.isUnavailable(mode.availability)).map((mode) => ({
+    group: "Mode · runtime",
+    label: itemLabel({
+      text: mode.label,
+      ...mode.title ? { hint: mode.title } : {},
+      selected: mode.id === selectedId
+    }),
+    ...mode.icon ? { icon: mode.icon } : {},
+    ...mode.title ? { title: mode.title } : {},
+    onSelect: () => onSelect(mode.id)
+  }));
 }
 function modelItems({
   models,
@@ -359,7 +294,6 @@ function modelItems({
           stacked: true
         }),
         ...glyph ? { icon: glyph } : {},
-        disabled: model.configured === false,
         onSelect: () => onSelect(model)
       };
     })
@@ -404,5 +338,5 @@ function effortUniverse(offered, supported, selected) {
   const all = [...offered, ...supported, selected ?? ""].map((effort) => effort.trim()).filter(Boolean);
   return [...new Set(all)];
 }
-exports.RuntimeBar = RuntimeBar;
-//# sourceMappingURL=RuntimeBar.cjs.map
+exports.RuntimeBarSegments = RuntimeBarSegments;
+//# sourceMappingURL=RuntimeBarSegments.cjs.map

package/dist/data/runtime/RuntimeBarSegments.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarSegments.cjs","sources":["../../../src/data/runtime/RuntimeBarSegments.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { InputField } from \"../../components/InputField\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport {\n  effortLevelColor,\n  effortLevelIcon,\n  effortLevelLabel,\n} from \"../chat/effort-icons\";\nimport { providerIcon } from \"../chat/provider-icons\";\nimport type { ChatModel } from \"../chat/types\";\nimport { runtimeFamilyBrand } from \"./RuntimeBar.model\";\nimport type { RuntimeBarValue } from \"./RuntimeBar\";\nimport { isUnavailable } from \"./availability\";\nimport {\n  modelsForFamily,\n  type SpecRuntimeFamily,\n  type SpecRuntimeModeOption,\n} from \"./runtime-mode\";\n\nexport type RuntimeBarSegmentsProps = {\n  value: RuntimeBarValue;\n  models: ChatModel[];\n  modelOptions: ChatModel[];\n  resolvedModel: ChatModel | undefined;\n  selectedModelUnavailable: boolean;\n  families: SpecRuntimeFamily[];\n  family: SpecRuntimeFamily;\n  mode: SpecRuntimeModeOption;\n  selectedMode: string;\n  reasoningEfforts: string[];\n  supportedEfforts: string[];\n  ariaLabel: string;\n  className?: string | undefined;\n  onBackendChange: (familyId: string, modeId: string) => void;\n  onCustomModel: (model: string) => void;\n  onModelSelect: (model: ChatModel) => void;\n  onModelClear: () => void;\n  onEffortChange: (effort: string) => void;\n};\n\nexport function RuntimeBarSegments({\n  value,\n  models,\n  modelOptions,\n  resolvedModel,\n  selectedModelUnavailable,\n  families,\n  family,\n  mode,\n  selectedMode,\n  reasoningEfforts,\n  supportedEfforts,\n  ariaLabel,\n  className,\n  onBackendChange,\n  onCustomModel,\n  onModelSelect,\n  onModelClear,\n  onEffortChange,\n}: RuntimeBarSegmentsProps) {\n  const brand = runtimeFamilyBrand(family);\n  const modelLabel = selectedModelUnavailable\n    ? \"Unavailable selection\"\n    : (resolvedModel?.label ?? value.model ?? \"Default\");\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex h-control-h w-fit max-w-full items-stretch overflow-hidden rounded-md border border-input bg-background\",\n        className,\n      )}\n    >\n      <RuntimeSegment\n        menuLabel=\"Family\"\n        title={`Family — ${family.label}`}\n        items={familyItems({\n          families,\n          models,\n          selectedId: family.id,\n          onSelect: (familyId) => onBackendChange(familyId, selectedMode),\n        })}\n      >\n        {brand.icon && (\n          <Icon\n            icon={brand.icon}\n            className={cn(\"size-4 shrink-0\", brand.color)}\n          />\n        )}\n        <span className={CAPTION_CLASS}>{family.label}</span>\n      </RuntimeSegment>\n      <RuntimeSegment\n        menuLabel=\"Runtime mode\"\n        title={mode.title ?? \"Runtime mode\"}\n        items={modeItems({\n          family,\n          selectedId: selectedMode,\n          onSelect: (modeId) => onBackendChange(family.id, modeId),\n        })}\n      >\n        {mode.icon && (\n          <Icon\n            icon={mode.icon}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n        )}\n        <span className={CAPTION_CLASS}>{mode.label}</span>\n      </RuntimeSegment>\n      <RuntimeSegment\n        menuLabel=\"Model\"\n        title={\n          selectedModelUnavailable\n            ? \"Model — unavailable selection\"\n            : value.model\n              ? `Model — ${value.model}`\n              : \"Model — prompt default\"\n        }\n        className=\"min-w-0 max-w-56 flex-1 [&>span]:min-w-0 [&>span]:w-full [&>span>button]:w-full\"\n        header={\n          <div className=\"grid gap-1\">\n            <span className={KEY_CLASS}>Model id</span>\n            <InputField\n              value={selectedModelUnavailable ? \"\" : (value.model ?? \"\")}\n              onChange={onCustomModel}\n              {...(selectedModelUnavailable\n                ? { placeholder: \"Unavailable selection\" }\n                : {})}\n              aria-label=\"Model id\"\n              inputClassName=\"font-mono text-xs\"\n              className=\"bg-background\"\n            />\n          </div>\n        }\n        items={modelItems({\n          models: modelOptions,\n          group: `${family.label} models`,\n          selectedId: selectedModelUnavailable\n            ? undefined\n            : (resolvedModel?.id ?? value.model),\n          onSelect: onModelSelect,\n          onClear: onModelClear,\n        })}\n      >\n        <span className=\"min-w-0 truncate font-mono text-xs text-foreground\">\n          {modelLabel}\n        </span>\n      </RuntimeSegment>\n      {supportedEfforts.length > 0 && (\n        <RuntimeSegment\n          menuLabel=\"Reasoning effort\"\n          title=\"Reasoning effort\"\n          items={effortItems({\n            offered: effortUniverse(\n              reasoningEfforts,\n              supportedEfforts,\n              value.effort,\n            ),\n            supported: supportedEfforts,\n            selected: value.effort,\n            onSelect: onEffortChange,\n          })}\n        >\n          <span className={KEY_CLASS}>Effort</span>\n          <EffortGlyph effort={value.effort} />\n          <span className={CAPTION_CLASS}>\n            {value.effort ? effortLevelLabel(value.effort) : \"None\"}\n          </span>\n        </RuntimeSegment>\n      )}\n    </div>\n  );\n}\n\nconst CAPTION_CLASS = \"truncate text-xs font-semibold text-foreground\";\nconst KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\nfunction RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"min-w-56 max-w-80\"\n      className={cn(\"border-l border-border first:border-l-0\", className)}\n      trigger={\n        <button\n          type=\"button\"\n          title={title}\n          className=\"inline-flex h-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          {children}\n          <Icon\n            icon={UiChevronDown}\n            className=\"size-3 shrink-0 text-muted-foreground/70\"\n          />\n        </button>\n      }\n    />\n  );\n}\n\nfunction EffortGlyph({ effort }: { effort?: string | undefined }) {\n  const glyph = effort ? effortLevelIcon(effort) : undefined;\n  if (!glyph) return null;\n  return (\n    <Icon\n      icon={glyph}\n      className={cn(\n        \"size-4 shrink-0\",\n        effort ? effortLevelColor(effort) : undefined,\n      )}\n    />\n  );\n}\n\nfunction itemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}): ReactNode {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n\nfunction familyItems({\n  families,\n  models,\n  selectedId,\n  onSelect,\n}: {\n  families: SpecRuntimeFamily[];\n  models: ChatModel[];\n  selectedId: string;\n  onSelect: (familyId: string) => void;\n}): DropdownMenuItem[] {\n  return families\n    .filter((family) =>\n      family.modes.some((mode) => !isUnavailable(mode.availability)),\n    )\n    .map((family) => {\n      const brand = runtimeFamilyBrand(family);\n      const count = modelsForFamily(models, family).length;\n      return {\n        group: \"Family\",\n        label: itemLabel({\n          text: family.label,\n          ...(count > 0 ? { hint: `${count} models` } : {}),\n          selected: family.id === selectedId,\n        }),\n        ...(brand.icon ? { icon: brand.icon } : {}),\n        onSelect: () => onSelect(family.id),\n      };\n    });\n}\n\nfunction modeItems({\n  family,\n  selectedId,\n  onSelect,\n}: {\n  family: SpecRuntimeFamily;\n  selectedId: string;\n  onSelect: (modeId: string) => void;\n}): DropdownMenuItem[] {\n  return family.modes\n    .filter((mode) => !isUnavailable(mode.availability))\n    .map((mode) => ({\n      group: \"Mode · runtime\",\n      label: itemLabel({\n        text: mode.label,\n        ...(mode.title ? { hint: mode.title } : {}),\n        selected: mode.id === selectedId,\n      }),\n      ...(mode.icon ? { icon: mode.icon } : {}),\n      ...(mode.title ? { title: mode.title } : {}),\n      onSelect: () => onSelect(mode.id),\n    }));\n}\n\nfunction modelItems({\n  models,\n  group,\n  selectedId,\n  onSelect,\n  onClear,\n}: {\n  models: ChatModel[];\n  group: string;\n  selectedId?: string | undefined;\n  onSelect: (model: ChatModel) => void;\n  onClear: () => void;\n}): DropdownMenuItem[] {\n  const clear: DropdownMenuItem = {\n    group: \"Model\",\n    label: itemLabel({\n      text: \"Prompt default\",\n      hint: \"no override\",\n      selected: !selectedId,\n    }),\n    onSelect: onClear,\n  };\n  return [\n    clear,\n    ...models.map((model) => {\n      const glyph: StaticIconComponent | undefined = providerIcon(\n        model.provider,\n      );\n      return {\n        group,\n        label: itemLabel({\n          text: model.label,\n          ...(model.id === model.label ? {} : { hint: model.id }),\n          selected: model.id === selectedId,\n          stacked: true,\n        }),\n        ...(glyph ? { icon: glyph } : {}),\n        onSelect: () => onSelect(model),\n      };\n    }),\n  ];\n}\n\nfunction effortItems({\n  offered,\n  supported,\n  selected,\n  onSelect,\n}: {\n  offered: string[];\n  supported: string[];\n  selected?: string | undefined;\n  onSelect: (effort: string) => void;\n}): DropdownMenuItem[] {\n  const current = selected?.trim() ?? \"\";\n  const none: DropdownMenuItem = {\n    group: \"Reasoning effort\",\n    label: itemLabel({\n      text: \"None\",\n      hint: \"single pass\",\n      selected: current === \"\",\n    }),\n    onSelect: () => onSelect(\"\"),\n  };\n  return [\n    none,\n    ...offered.map((effort) => {\n      const glyph = effortLevelIcon(effort);\n      const usable = supported.includes(effort);\n      return {\n        group: \"Reasoning effort\",\n        label: itemLabel({\n          text: effortLevelLabel(effort),\n          ...(usable ? {} : { hint: \"unsupported\" }),\n          selected: effort === current,\n        }),\n        ...(glyph ? { icon: glyph } : {}),\n        disabled: !usable,\n        onSelect: () => onSelect(effort),\n      };\n    }),\n  ];\n}\n\nfunction effortUniverse(\n  offered: readonly string[],\n  supported: readonly string[],\n  selected: string | undefined,\n): string[] {\n  const all = [...offered, ...supported, selected ?? \"\"]\n    .map((effort) => effort.trim())\n    .filter(Boolean);\n  return [...new Set(all)];\n}\n"],"names":["runtimeFamilyBrand","jsxs","cn","jsx","Icon","InputField","effortLevelLabel","DropdownMenu","UiChevronDown","effortLevelIcon","effortLevelColor","Fragment","UiCheck","isUnavailable","modelsForFamily","providerIcon"],"mappings":";;;;;;;;;;;;;;AA8CO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,QAAQA,iBAAAA,mBAAmB,MAAM;AACvC,QAAM,aAAa,2BACf,2BACC,+CAAe,UAAS,MAAM,SAAS;AAE5C,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,YAAY,OAAO,KAAK;AAAA,YAC/B,OAAO,YAAY;AAAA,cACjB;AAAA,cACA;AAAA,cACA,YAAY,OAAO;AAAA,cACnB,UAAU,CAAC,aAAa,gBAAgB,UAAU,YAAY;AAAA,YAAA,CAC/D;AAAA,YAEA,UAAA;AAAA,cAAA,MAAM,QACLE,2BAAAA;AAAAA,gBAACC,KAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM,MAAM;AAAA,kBACZ,WAAWF,MAAAA,GAAG,mBAAmB,MAAM,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGhDC,2BAAAA,IAAC,QAAA,EAAK,WAAW,eAAgB,iBAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhDF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,KAAK,SAAS;AAAA,YACrB,OAAO,UAAU;AAAA,cACf;AAAA,cACA,YAAY;AAAA,cACZ,UAAU,CAAC,WAAW,gBAAgB,OAAO,IAAI,MAAM;AAAA,YAAA,CACxD;AAAA,YAEA,UAAA;AAAA,cAAA,KAAK,QACJE,2BAAAA;AAAAA,gBAACC,KAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAM,KAAK;AAAA,kBACX,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGdD,2BAAAA,IAAC,QAAA,EAAK,WAAW,eAAgB,eAAK,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAE9CA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OACE,2BACI,kCACA,MAAM,QACJ,WAAW,MAAM,KAAK,KACtB;AAAA,YAER,WAAU;AAAA,YACV,QACEF,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,cAAAE,2BAAAA,IAAC,QAAA,EAAK,WAAW,WAAW,UAAA,YAAQ;AAAA,cACpCA,2BAAAA;AAAAA,gBAACE,WAAAA;AAAAA,gBAAA;AAAA,kBACC,OAAO,2BAA2B,KAAM,MAAM,SAAS;AAAA,kBACvD,UAAU;AAAA,kBACT,GAAI,2BACD,EAAE,aAAa,wBAAA,IACf,CAAA;AAAA,kBACJ,cAAW;AAAA,kBACX,gBAAe;AAAA,kBACf,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ,GACF;AAAA,YAEF,OAAO,WAAW;AAAA,cAChB,QAAQ;AAAA,cACR,OAAO,GAAG,OAAO,KAAK;AAAA,cACtB,YAAY,2BACR,UACC,+CAAe,OAAM,MAAM;AAAA,cAChC,UAAU;AAAA,cACV,SAAS;AAAA,YAAA,CACV;AAAA,YAED,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,sDACb,UAAA,WAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,iBAAiB,SAAS,KACzBF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAM;AAAA,YACN,OAAO,YAAY;AAAA,cACjB,SAAS;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA,MAAM;AAAA,cAAA;AAAA,cAER,WAAW;AAAA,cACX,UAAU,MAAM;AAAA,cAChB,UAAU;AAAA,YAAA,CACX;AAAA,YAED,UAAA;AAAA,cAAAE,2BAAAA,IAAC,QAAA,EAAK,WAAW,WAAW,UAAA,UAAM;AAAA,cAClCA,2BAAAA,IAAC,aAAA,EAAY,QAAQ,MAAM,OAAA,CAAQ;AAAA,cACnCA,2BAAAA,IAAC,QAAA,EAAK,WAAW,eACd,UAAA,MAAM,SAASG,YAAAA,iBAAiB,MAAM,MAAM,IAAI,OAAA,CACnD;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAM,gBAAgB;AACtB,MAAM,YACJ;AAEF,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACEH,2BAAAA;AAAAA,IAACI,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAWL,MAAAA,GAAG,2CAA2C,SAAS;AAAA,MAClE,SACED,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,WAAU;AAAA,UAET,UAAA;AAAA,YAAA;AAAA,YACDE,2BAAAA;AAAAA,cAACC,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAMI,cAAAA;AAAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEA,SAAS,YAAY,EAAE,UAA2C;AAChE,QAAM,QAAQ,SAASC,4BAAgB,MAAM,IAAI;AACjD,MAAI,CAAC,MAAO,QAAO;AACnB,SACEN,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAWF,MAAAA;AAAAA,QACT;AAAA,QACA,SAASQ,YAAAA,iBAAiB,MAAM,IAAI;AAAA,MAAA;AAAA,IACtC;AAAA,EAAA;AAGN;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKc;AACZ,SACET,2BAAAA,KAAAU,qBAAA,EACE,UAAA;AAAA,IAAAV,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAAE,2BAAAA,IAAC,UAAK,WAAWD,SAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACPC,2BAAAA,IAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,0CACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEFA,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAMQ,QAAAA;AAAAA,QACN,WAAWV,MAAAA;AAAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,SAAO,SACJ;AAAA,IAAO,CAAC,WACP,OAAO,MAAM,KAAK,CAAC,SAAS,CAACW,aAAAA,cAAc,KAAK,YAAY,CAAC;AAAA,EAAA,EAE9D,IAAI,CAAC,WAAW;AACf,UAAM,QAAQb,iBAAAA,mBAAmB,MAAM;AACvC,UAAM,QAAQc,YAAAA,gBAAgB,QAAQ,MAAM,EAAE;AAC9C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO,UAAU;AAAA,QACf,MAAM,OAAO;AAAA,QACb,GAAI,QAAQ,IAAI,EAAE,MAAM,GAAG,KAAK,UAAA,IAAc,CAAA;AAAA,QAC9C,UAAU,OAAO,OAAO;AAAA,MAAA,CACzB;AAAA,MACD,GAAI,MAAM,OAAO,EAAE,MAAM,MAAM,KAAA,IAAS,CAAA;AAAA,MACxC,UAAU,MAAM,SAAS,OAAO,EAAE;AAAA,IAAA;AAAA,EAEtC,CAAC;AACL;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,GAIuB;AACrB,SAAO,OAAO,MACX,OAAO,CAAC,SAAS,CAACD,2BAAc,KAAK,YAAY,CAAC,EAClD,IAAI,CAAC,UAAU;AAAA,IACd,OAAO;AAAA,IACP,OAAO,UAAU;AAAA,MACf,MAAM,KAAK;AAAA,MACX,GAAI,KAAK,QAAQ,EAAE,MAAM,KAAK,MAAA,IAAU,CAAA;AAAA,MACxC,UAAU,KAAK,OAAO;AAAA,IAAA,CACvB;AAAA,IACD,GAAI,KAAK,OAAO,EAAE,MAAM,KAAK,KAAA,IAAS,CAAA;AAAA,IACtC,GAAI,KAAK,QAAQ,EAAE,OAAO,KAAK,MAAA,IAAU,CAAA;AAAA,IACzC,UAAU,MAAM,SAAS,KAAK,EAAE;AAAA,EAAA,EAChC;AACN;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMuB;AACrB,QAAM,QAA0B;AAAA,IAC9B,OAAO;AAAA,IACP,OAAO,UAAU;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU,CAAC;AAAA,IAAA,CACZ;AAAA,IACD,UAAU;AAAA,EAAA;AAEZ,SAAO;AAAA,IACL;AAAA,IACA,GAAG,OAAO,IAAI,CAAC,UAAU;AACvB,YAAM,QAAyCE,cAAAA;AAAAA,QAC7C,MAAM;AAAA,MAAA;AAER,aAAO;AAAA,QACL;AAAA,QACA,OAAO,UAAU;AAAA,UACf,MAAM,MAAM;AAAA,UACZ,GAAI,MAAM,OAAO,MAAM,QAAQ,CAAA,IAAK,EAAE,MAAM,MAAM,GAAA;AAAA,UAClD,UAAU,MAAM,OAAO;AAAA,UACvB,SAAS;AAAA,QAAA,CACV;AAAA,QACD,GAAI,QAAQ,EAAE,MAAM,MAAA,IAAU,CAAA;AAAA,QAC9B,UAAU,MAAM,SAAS,KAAK;AAAA,MAAA;AAAA,IAElC,CAAC;AAAA,EAAA;AAEL;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,WAAU,qCAAU,WAAU;AACpC,QAAM,OAAyB;AAAA,IAC7B,OAAO;AAAA,IACP,OAAO,UAAU;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU,YAAY;AAAA,IAAA,CACvB;AAAA,IACD,UAAU,MAAM,SAAS,EAAE;AAAA,EAAA;AAE7B,SAAO;AAAA,IACL;AAAA,IACA,GAAG,QAAQ,IAAI,CAAC,WAAW;AACzB,YAAM,QAAQN,YAAAA,gBAAgB,MAAM;AACpC,YAAM,SAAS,UAAU,SAAS,MAAM;AACxC,aAAO;AAAA,QACL,OAAO;AAAA,QACP,OAAO,UAAU;AAAA,UACf,MAAMH,YAAAA,iBAAiB,MAAM;AAAA,UAC7B,GAAI,SAAS,CAAA,IAAK,EAAE,MAAM,cAAA;AAAA,UAC1B,UAAU,WAAW;AAAA,QAAA,CACtB;AAAA,QACD,GAAI,QAAQ,EAAE,MAAM,MAAA,IAAU,CAAA;AAAA,QAC9B,UAAU,CAAC;AAAA,QACX,UAAU,MAAM,SAAS,MAAM;AAAA,MAAA;AAAA,IAEnC,CAAC;AAAA,EAAA;AAEL;AAEA,SAAS,eACP,SACA,WACA,UACU;AACV,QAAM,MAAM,CAAC,GAAG,SAAS,GAAG,WAAW,YAAY,EAAE,EAClD,IAAI,CAAC,WAAW,OAAO,MAAM,EAC7B,OAAO,OAAO;AACjB,SAAO,CAAC,GAAG,IAAI,IAAI,GAAG,CAAC;AACzB;;"}

package/dist/data/runtime/RuntimeBarSegments.d.ts

@@ -0,0 +1,25 @@
+import { ChatModel } from '../chat/types';
+import { RuntimeBarValue } from './RuntimeBar';
+import { SpecRuntimeFamily, SpecRuntimeModeOption } from './runtime-mode';
+export type RuntimeBarSegmentsProps = {
+    value: RuntimeBarValue;
+    models: ChatModel[];
+    modelOptions: ChatModel[];
+    resolvedModel: ChatModel | undefined;
+    selectedModelUnavailable: boolean;
+    families: SpecRuntimeFamily[];
+    family: SpecRuntimeFamily;
+    mode: SpecRuntimeModeOption;
+    selectedMode: string;
+    reasoningEfforts: string[];
+    supportedEfforts: string[];
+    ariaLabel: string;
+    className?: string | undefined;
+    onBackendChange: (familyId: string, modeId: string) => void;
+    onCustomModel: (model: string) => void;
+    onModelSelect: (model: ChatModel) => void;
+    onModelClear: () => void;
+    onEffortChange: (effort: string) => void;
+};
+export declare function RuntimeBarSegments({ value, models, modelOptions, resolvedModel, selectedModelUnavailable, families, family, mode, selectedMode, reasoningEfforts, supportedEfforts, ariaLabel, className, onBackendChange, onCustomModel, onModelSelect, onModelClear, onEffortChange, }: RuntimeBarSegmentsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RuntimeBarSegments.d.ts.map

package/dist/data/runtime/RuntimeBarSegments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeBarSegments.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarSegments.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,eAAe,CAAC;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC;IACrC,wBAAwB,EAAE,OAAO,CAAC;IAClC,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,qBAAqB,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,wBAAwB,EACxB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,eAAe,EACf,aAAa,EACb,aAAa,EACb,YAAY,EACZ,cAAc,GACf,EAAE,uBAAuB,2CAiHzB"}

package/dist/data/{ai/RuntimeBar.js → runtime/RuntimeBarSegments.js}

@@ -1,98 +1,43 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { InputField } from "../../components/InputField.js";
 import { cn } from "../../lib/utils.js";
 import { DropdownMenu } from "../../overlay/DropdownMenu.js";
 import { Icon } from "../Icon.js";
-import { effortLevelLabel, DEFAULT_REASONING_EFFORTS, effortLevelIcon, effortLevelColor } from "../chat/effort-icons.js";
+import { effortLevelLabel, effortLevelIcon, effortLevelColor } from "../chat/effort-icons.js";
 import { providerIcon } from "../chat/provider-icons.js";
-import { runtimeModelMatches, runtimeFamilyBrand } from "./RuntimeBar.model.js";
-import { RuntimeBarCombo } from "./RuntimeBarCombo.js";
-import { SpecInput } from "./SpecRuntimeEditor/fields.js";
-import { withOptionalRoot, withRoot } from "./SpecRuntimeEditor/update.js";
-import { effortOptionsForModel, reconcileModelCapabilities } from "./model-capabilities.js";
-import { selectionForBackend, SPEC_RUNTIME_FAMILIES, familyById, firstMode, modelsForFamily, backendForFamilyMode, modelBelongsToFamily, runtimeModeOptions, unsupportedModeTitle } from "./runtime-mode.js";
+import { runtimeFamilyBrand } from "./RuntimeBar.model.js";
+import { isUnavailable } from "./availability.js";
+import { modelsForFamily } from "./runtime-mode.js";
 import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
 import { UiCheck } from "../../icons/components/UiCheck.js";
-function RuntimeBar({
+function RuntimeBarSegments({
   value,
-  onChange,
-  variant = "segmented",
-  models = [],
-  families = SPEC_RUNTIME_FAMILIES,
-  reasoningEfforts = DEFAULT_REASONING_EFFORTS,
-  ariaLabel = "Runtime",
-  className
+  models,
+  modelOptions,
+  resolvedModel,
+  selectedModelUnavailable,
+  families,
+  family,
+  mode,
+  selectedMode,
+  reasoningEfforts,
+  supportedEfforts,
+  ariaLabel,
+  className,
+  onBackendChange,
+  onCustomModel,
+  onModelSelect,
+  onModelClear,
+  onEffortChange
 }) {
-  const selection = selectionForBackend(families, value.backend);
-  const family = familyById(families, selection.family);
-  const mode = family.modes.find((entry) => entry.id === selection.mode) ?? firstMode(family);
-  const modelOptions = modelsForFamily(models, family, value.backend);
-  const selectedModel = models.find(
-    (entry) => {
-      var _a;
-      return ((_a = entry.runtime) == null ? void 0 : _a.backend) === value.backend && runtimeModelMatches(entry, value);
-    }
-  );
-  const resolvedModel = selectedModel ?? models.find((entry) => runtimeModelMatches(entry, value));
-  const supportedEfforts = effortOptionsForModel(
-    resolvedModel,
-    reasoningEfforts
-  );
-  const applyBackend = (familyId, modeId) => {
-    const backend = backendForFamilyMode(families, familyId, modeId);
-    if (backend === (value.backend ?? "")) return;
-    let next = withOptionalRoot(
-      withRoot(value, { backend }),
-      "cliArgs",
-      void 0
-    );
-    if (!modelBelongsToFamily(
-      value.model,
-      models,
-      familyById(families, familyId),
-      backend
-    )) {
-      next = withoutCatalogModel(next);
-    }
-    onChange(next);
-  };
-  const applyCustomModel = (model) => onChange(withOptionalRoot(withoutCatalogModel(value), "model", model));
-  const applyModel = (model) => onChange(reconcileModelCapabilities(value, model, reasoningEfforts));
-  const clearModel = () => onChange(withoutCatalogModel(value));
-  const applyEffort = (effort) => onChange(withOptionalRoot(value, "effort", effort));
-  if (variant === "combo") {
-    return /* @__PURE__ */ jsx(
-      RuntimeBarCombo,
-      {
-        value,
-        families,
-        family,
-        mode,
-        selectedMode: selection.mode,
-        models: modelOptions,
-        selectedModel: resolvedModel,
-        supportedEfforts,
-        ariaLabel,
-        className,
-        onFamilyChange: (familyId) => applyBackend(familyId, selection.mode),
-        onModeChange: (modeId) => applyBackend(family.id, modeId),
-        onModelSelect: applyModel,
-        onModelClear: clearModel,
-        onEffortChange: applyEffort
-      }
-    );
-  }
   const brand = runtimeFamilyBrand(family);
-  const modelLabel = (resolvedModel == null ? void 0 : resolvedModel.label) ?? value.model ?? "Default";
+  const modelLabel = selectedModelUnavailable ? "Unavailable selection" : (resolvedModel == null ? void 0 : resolvedModel.label) ?? value.model ?? "Default";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "group",
       "aria-label": ariaLabel,
       className: cn(
-        // `w-fit` so the bar hugs its segments instead of being stretched by a
-        // grid/flex parent — the row is content-sized, not a form field.
-        // The outer edge is a control border (`--input`); the segment dividers
-        // inside it are the subtler `--border`, so the bar reads as one object.
         "inline-flex h-control-h w-fit max-w-full items-stretch overflow-hidden rounded-md border border-input bg-background",
         className
       ),
@@ -106,7 +51,7 @@ function RuntimeBar({
               families,
               models,
               selectedId: family.id,
-              onSelect: (familyId) => applyBackend(familyId, selection.mode)
+              onSelect: (familyId) => onBackendChange(familyId, selectedMode)
             }),
             children: [
               brand.icon && /* @__PURE__ */ jsx(
@@ -126,10 +71,9 @@ function RuntimeBar({
             menuLabel: "Runtime mode",
             title: mode.title ?? "Runtime mode",
             items: modeItems({
-              families,
               family,
-              selectedId: selection.mode,
-              onSelect: (modeId) => applyBackend(family.id, modeId)
+              selectedId: selectedMode,
+              onSelect: (modeId) => onBackendChange(family.id, modeId)
             }),
             children: [
               mode.icon && /* @__PURE__ */ jsx(
@@ -147,26 +91,28 @@ function RuntimeBar({
           RuntimeSegment,
           {
             menuLabel: "Model",
-            title: value.model ? `Model — ${value.model}` : "Model — prompt default",
-            className: "min-w-0 max-w-56",
+            title: selectedModelUnavailable ? "Model — unavailable selection" : value.model ? `Model — ${value.model}` : "Model — prompt default",
+            className: "min-w-0 max-w-56 flex-1 [&>span]:min-w-0 [&>span]:w-full [&>span>button]:w-full",
             header: /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
               /* @__PURE__ */ jsx("span", { className: KEY_CLASS, children: "Model id" }),
               /* @__PURE__ */ jsx(
-                SpecInput,
+                InputField,
                 {
-                  value: value.model,
-                  onChange: applyCustomModel,
-                  ariaLabel: "Model id",
-                  mono: true
+                  value: selectedModelUnavailable ? "" : value.model ?? "",
+                  onChange: onCustomModel,
+                  ...selectedModelUnavailable ? { placeholder: "Unavailable selection" } : {},
+                  "aria-label": "Model id",
+                  inputClassName: "font-mono text-xs",
+                  className: "bg-background"
                 }
               )
             ] }),
             items: modelItems({
               models: modelOptions,
               group: `${family.label} models`,
-              selectedId: (resolvedModel == null ? void 0 : resolvedModel.id) ?? value.model,
-              onSelect: applyModel,
-              onClear: clearModel
+              selectedId: selectedModelUnavailable ? void 0 : (resolvedModel == null ? void 0 : resolvedModel.id) ?? value.model,
+              onSelect: onModelSelect,
+              onClear: onModelClear
             }),
             children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-xs text-foreground", children: modelLabel })
           }
@@ -184,7 +130,7 @@ function RuntimeBar({
               ),
               supported: supportedEfforts,
               selected: value.effort,
-              onSelect: applyEffort
+              onSelect: onEffortChange
             }),
             children: [
               /* @__PURE__ */ jsx("span", { className: KEY_CLASS, children: "Effort" }),
@@ -197,13 +143,6 @@ function RuntimeBar({
     }
   );
 }
-function withoutCatalogModel(value) {
-  return withOptionalRoot(
-    withOptionalRoot(value, "model", void 0),
-    "id",
-    void 0
-  );
-}
 const CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
 const KEY_CLASS = "text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground";
 function RuntimeSegment({
@@ -267,7 +206,7 @@ function itemLabel({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx("span", { className: cn("block truncate", selected && "font-semibold"), children: text }),
-      hint && stacked && /* @__PURE__ */ jsx("span", { className: "block truncate font-mono text-[11px] text-muted-foreground", children: hint })
+      hint && stacked && /* @__PURE__ */ jsx("span", { className: "block whitespace-normal text-[11px] leading-4 text-muted-foreground", children: hint })
     ] }),
     hint && !stacked && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: hint }),
     /* @__PURE__ */ jsx(
@@ -288,7 +227,9 @@ function familyItems({
   selectedId,
   onSelect
 }) {
-  return families.map((family) => {
+  return families.filter(
+    (family) => family.modes.some((mode) => !isUnavailable(mode.availability))
+  ).map((family) => {
     const brand = runtimeFamilyBrand(family);
     const count = modelsForFamily(models, family).length;
     return {
@@ -304,27 +245,21 @@ function familyItems({
   });
 }
 function modeItems({
-  families,
   family,
   selectedId,
   onSelect
 }) {
-  return runtimeModeOptions(families).map((mode) => {
-    const supported = family.modes.find((entry) => entry.id === mode.id);
-    const hint = (supported == null ? void 0 : supported.title) ?? unsupportedModeTitle(family);
-    return {
-      group: "Mode · runtime",
-      label: itemLabel({
-        text: (supported == null ? void 0 : supported.label) ?? mode.label,
-        hint,
-        selected: mode.id === selectedId
-      }),
-      ...mode.icon ? { icon: mode.icon } : {},
-      title: hint,
-      disabled: !supported,
-      onSelect: () => onSelect(mode.id)
-    };
-  });
+  return family.modes.filter((mode) => !isUnavailable(mode.availability)).map((mode) => ({
+    group: "Mode · runtime",
+    label: itemLabel({
+      text: mode.label,
+      ...mode.title ? { hint: mode.title } : {},
+      selected: mode.id === selectedId
+    }),
+    ...mode.icon ? { icon: mode.icon } : {},
+    ...mode.title ? { title: mode.title } : {},
+    onSelect: () => onSelect(mode.id)
+  }));
 }
 function modelItems({
   models,
@@ -357,7 +292,6 @@ function modelItems({
           stacked: true
         }),
         ...glyph ? { icon: glyph } : {},
-        disabled: model.configured === false,
         onSelect: () => onSelect(model)
       };
     })
@@ -403,6 +337,6 @@ function effortUniverse(offered, supported, selected) {
   return [...new Set(all)];
 }
 export {
-  RuntimeBar
+  RuntimeBarSegments
 };
-//# sourceMappingURL=RuntimeBar.js.map
+//# sourceMappingURL=RuntimeBarSegments.js.map