@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/data/chat/ModelSelector.cjs

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Combobox = require("../../components/Combobox.cjs");
+const SegmentedControl = require("../../components/SegmentedControl.cjs");
 const utils = require("../../lib/utils.cjs");
+const effortIcons = require("./effort-icons.cjs");
 const providerIcons = require("./provider-icons.cjs");
-function ModelSelector({ models, value, onChange, className }) {
+function ModelSelector({ models, value, onChange, className, size = "sm" }) {
   if (models.length === 0) return null;
   const selected = models.find((m) => m.id === value);
   const SelectedGlyph = providerIcons.providerIcon(selected == null ? void 0 : selected.provider);
@@ -16,14 +19,14 @@ function ModelSelector({ models, value, onChange, className }) {
       onChange,
       allowCustomValue: false,
       required: true,
-      size: "sm",
+      size,
       className: utils.cn("w-48", className),
       ...SelectedGlyph ? { prefix: /* @__PURE__ */ jsxRuntime.jsx(SelectedGlyph, { className: "size-4" }) } : {},
       options: models.map((m) => {
         const Icon = providerIcons.providerIcon(m.provider);
         return {
           value: m.id,
-          label: m.reasoning ? `${m.label} ·🧠` : m.label,
+          label: m.label,
           ...Icon ? { icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) } : {},
           disabled: m.configured === false
         };
@@ -31,7 +34,12 @@ function ModelSelector({ models, value, onChange, className }) {
     }
   );
 }
-function EffortSelector({ efforts, value, onChange, className }) {
+function EffortSelector({ efforts, value, onChange, className, size = "sm" }) {
+  const supportedEfforts = efforts.filter(Boolean);
+  const selectedEffort = value && supportedEfforts.includes(value) ? value : "";
+  const selectedGlyph = selectedEffort ? effortIcons.effortLevelIcon(selectedEffort) : void 0;
+  const selectedColor = selectedEffort ? effortIcons.effortLevelColor(selectedEffort) : void 0;
+  const selectedIcon = selectedGlyph ? react.createElement(selectedGlyph, { className: utils.cn("size-4", selectedColor) }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
@@ -40,18 +48,139 @@ function EffortSelector({ efforts, value, onChange, className }) {
       onChange,
       allowCustomValue: false,
       required: true,
-      size: "sm",
+      size,
       className: utils.cn("w-36", className),
+      ...selectedIcon ? { prefix: selectedIcon } : {},
       options: [
-        { value: "", label: "No reasoning" },
-        ...efforts.map((e) => {
-          var _a;
-          return { value: e, label: `${(_a = e[0]) == null ? void 0 : _a.toUpperCase()}${e.slice(1)} reasoning` };
-        })
+        { value: "", label: "None" },
+        ...supportedEfforts.map((effort) => ({
+          value: effort,
+          label: fullEffortLabel(effort),
+          selectedLabel: shortEffortLabel(effort)
+        }))
       ]
     }
   );
 }
+function fullEffortLabel(value) {
+  switch (value.trim().toLowerCase()) {
+    case "xhigh":
+      return "Extra high";
+    case "max":
+      return "Maximum";
+    default:
+      return titleCaseEffort(value);
+  }
+}
+function shortEffortLabel(value) {
+  switch (value.trim().toLowerCase()) {
+    case "minimal":
+      return "Min";
+    case "medium":
+      return "Med";
+    case "xhigh":
+      return "XHigh";
+    case "adaptive":
+      return "Auto";
+    case "max":
+      return "Max";
+    default:
+      return titleCaseEffort(value);
+  }
+}
+function titleCaseEffort(value) {
+  var _a;
+  const effort = value.trim();
+  return `${((_a = effort[0]) == null ? void 0 : _a.toUpperCase()) ?? ""}${effort.slice(1)}`;
+}
+function ProviderSelector({
+  providers,
+  value,
+  onChange,
+  className,
+  ariaLabel = "AI provider"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SegmentedControl.SegmentedControl,
+    {
+      "aria-label": ariaLabel,
+      size: "sm",
+      value,
+      onChange,
+      className: utils.cn("w-fit", className),
+      options: providers.map((provider) => {
+        const icon = provider.icon ?? providerIcons.providerIcon(provider.provider);
+        return {
+          id: provider.id,
+          label: provider.label,
+          ...provider.title ? { title: provider.title } : {},
+          ...provider.disabled !== void 0 ? { disabled: provider.disabled } : {},
+          ...icon ? { icon } : {}
+        };
+      })
+    }
+  );
+}
+function BudgetSelector({
+  budget,
+  onBudgetChange,
+  className,
+  disabled = false,
+  costLabel = "Max cost",
+  maxTokensLabel = "Max tokens",
+  maxTokensStep = 1
+}) {
+  const updateBudget = (key, raw, integer = false) => {
+    const next = { ...budget };
+    const parsed = parseOptionalNumber(raw, integer);
+    if (parsed === void 0) {
+      delete next[key];
+    } else {
+      next[key] = parsed;
+    }
+    onBudgetChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("grid grid-cols-2 gap-3", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "space-y-1 text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: costLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          step: 0.01,
+          value: (budget == null ? void 0 : budget.cost) ?? "",
+          onChange: (event) => updateBudget("cost", event.target.value),
+          disabled,
+          className: "h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "space-y-1 text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: maxTokensLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          step: maxTokensStep,
+          value: (budget == null ? void 0 : budget.maxTokens) ?? "",
+          onChange: (event) => updateBudget("maxTokens", event.target.value, maxTokensStep >= 1),
+          disabled,
+          className: "h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] })
+  ] });
+}
+function parseOptionalNumber(raw, integer = false) {
+  if (raw.trim() === "") return void 0;
+  const value = Number(raw);
+  if (!Number.isFinite(value)) return void 0;
+  return integer ? Math.max(0, Math.trunc(value)) : value;
+}
+exports.BudgetSelector = BudgetSelector;
 exports.EffortSelector = EffortSelector;
 exports.ModelSelector = ModelSelector;
+exports.ProviderSelector = ProviderSelector;
 //# sourceMappingURL=ModelSelector.cjs.map

package/dist/data/chat/ModelSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.cjs","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Combobox } from \"../../components/Combobox\";\nimport { cn } from \"../../lib/utils\";\nimport { providerIcon } from \"./provider-icons\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A searchable model picker driven by the backend model menu, showing each\n *  provider's brand icon. Models whose provider is not configured are disabled\n *  rather than hidden, so the menu communicates what would be available with the\n *  right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  const selected = models.find((m) => m.id === value);\n  const SelectedGlyph = providerIcon(selected?.provider);\n  return (\n    <Combobox\n      ariaLabel=\"Model\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-48\", className)}\n      {...(SelectedGlyph ? { prefix: <SelectedGlyph className=\"size-4\" /> } : {})}\n      options={models.map((m) => {\n        const Icon = providerIcon(m.provider);\n        return {\n          value: m.id,\n          label: m.reasoning ? `${m.label} ·🧠` : m.label,\n          ...(Icon ? { icon: <Icon className=\"size-4\" /> } : {}),\n          disabled: m.configured === false,\n        };\n      })}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". Strict: only the listed options commit. */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Combobox\n      ariaLabel=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-36\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":["providerIcon","jsx","Combobox","cn"],"mappings":";;;;;;AAiBO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAM,WAAW,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AAClD,QAAM,gBAAgBA,cAAAA,aAAa,qCAAU,QAAQ;AACrD,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAI,gBAAgB,EAAE,QAAQF,+BAAC,iBAAc,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,MACxE,SAAS,OAAO,IAAI,CAAC,MAAM;AACzB,cAAM,OAAOD,cAAAA,aAAa,EAAE,QAAQ;AACpC,eAAO;AAAA,UACL,OAAO,EAAE;AAAA,UACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,UAC1C,GAAI,OAAO,EAAE,MAAMC,+BAAC,QAAK,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,UACnD,UAAU,EAAE,eAAe;AAAA,QAAA;AAAA,MAE/B,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,QAAQ,SAAS;AAAA,MAC/B,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;;;"}
+{"version":3,"file":"ModelSelector.cjs","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { createElement, type ReactNode } from \"react\";\nimport { Combobox } from \"../../components/Combobox\";\nimport type { FormSize } from \"../../components/json-schema-form-size\";\nimport { SegmentedControl } from \"../../components/SegmentedControl\";\nimport type { StaticIconComponent } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\nimport { effortLevelColor, effortLevelIcon } from \"./effort-icons\";\nimport { providerIcon } from \"./provider-icons\";\nimport type { ChatBudgetConfig, ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n  /** Control size. Defaults to `sm` (compact chat toolbar); pass `md` to match\n   *  a standard-density form row. */\n  size?: FormSize;\n};\n\n/** A searchable model picker driven by the backend model menu, showing each\n *  provider's brand icon. Models whose provider is not configured are disabled\n *  rather than hidden, so the menu communicates what would be available with the\n *  right API key. */\nexport function ModelSelector({ models, value, onChange, className, size = \"sm\" }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  const selected = models.find((m) => m.id === value);\n  const SelectedGlyph = providerIcon(selected?.provider);\n  return (\n    <Combobox\n      ariaLabel=\"Model\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size={size}\n      className={cn(\"w-48\", className)}\n      {...(SelectedGlyph ? { prefix: <SelectedGlyph className=\"size-4\" /> } : {})}\n      options={models.map((m) => {\n        const Icon = providerIcon(m.provider);\n        return {\n          value: m.id,\n          label: m.label,\n          ...(Icon ? { icon: <Icon className=\"size-4\" /> } : {}),\n          disabled: m.configured === false,\n        };\n      })}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n  /** Control size. Defaults to `sm`; pass `md` to match a standard form row. */\n  size?: FormSize;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". Strict: only the listed options commit. */\nexport function EffortSelector({ efforts, value, onChange, className, size = \"sm\" }: EffortSelectorProps) {\n  const supportedEfforts = efforts.filter(Boolean);\n  const selectedEffort = value && supportedEfforts.includes(value) ? value : \"\";\n  const selectedGlyph = selectedEffort ? effortLevelIcon(selectedEffort) : undefined;\n  const selectedColor = selectedEffort ? effortLevelColor(selectedEffort) : undefined;\n  const selectedIcon = selectedGlyph\n    ? createElement(selectedGlyph, { className: cn(\"size-4\", selectedColor) })\n    : undefined;\n  return (\n    <Combobox\n      ariaLabel=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size={size}\n      className={cn(\"w-36\", className)}\n      {...(selectedIcon ? { prefix: selectedIcon } : {})}\n      options={[\n        { value: \"\", label: \"None\" },\n        ...supportedEfforts.map((effort) => ({\n          value: effort,\n          label: fullEffortLabel(effort),\n          selectedLabel: shortEffortLabel(effort),\n        })),\n      ]}\n    />\n  );\n}\n\nfunction fullEffortLabel(value: string): string {\n  switch (value.trim().toLowerCase()) {\n    case \"xhigh\":\n      return \"Extra high\";\n    case \"max\":\n      return \"Maximum\";\n    default:\n      return titleCaseEffort(value);\n  }\n}\n\nfunction shortEffortLabel(value: string): string {\n  switch (value.trim().toLowerCase()) {\n    case \"minimal\":\n      return \"Min\";\n    case \"medium\":\n      return \"Med\";\n    case \"xhigh\":\n      return \"XHigh\";\n    case \"adaptive\":\n      return \"Auto\";\n    case \"max\":\n      return \"Max\";\n    default:\n      return titleCaseEffort(value);\n  }\n}\n\nfunction titleCaseEffort(value: string): string {\n  const effort = value.trim();\n  return `${effort[0]?.toUpperCase() ?? \"\"}${effort.slice(1)}`;\n}\n\nexport type ProviderSelectorOption<T extends string = string> = {\n  id: T;\n  label: ReactNode;\n  /** Provider id used for the default brand glyph when `icon` is omitted. */\n  provider?: string | undefined;\n  icon?: string | StaticIconComponent | undefined;\n  title?: string | undefined;\n  disabled?: boolean | undefined;\n};\n\nexport type ProviderSelectorProps<T extends string = string> = {\n  providers: ProviderSelectorOption<T>[];\n  value: T;\n  onChange: (provider: T) => void;\n  className?: string | undefined;\n  ariaLabel?: string | undefined;\n};\n\n/** Segmented AI provider picker with the same provider glyphs used by the model\n * selector. Use when the backend needs the provider/agent axis separate from the\n * concrete model id. */\nexport function ProviderSelector<T extends string = string>({\n  providers,\n  value,\n  onChange,\n  className,\n  ariaLabel = \"AI provider\",\n}: ProviderSelectorProps<T>) {\n  return (\n    <SegmentedControl\n      aria-label={ariaLabel}\n      size=\"sm\"\n      value={value}\n      onChange={onChange}\n      className={cn(\"w-fit\", className)}\n      options={providers.map((provider) => {\n        const icon = provider.icon ?? providerIcon(provider.provider);\n        return {\n          id: provider.id,\n          label: provider.label,\n          ...(provider.title ? { title: provider.title } : {}),\n          ...(provider.disabled !== undefined ? { disabled: provider.disabled } : {}),\n          ...(icon ? { icon } : {}),\n        };\n      })}\n    />\n  );\n}\n\nexport type BudgetSelectorProps = {\n  budget?: ChatBudgetConfig | undefined;\n  onBudgetChange: (budget: ChatBudgetConfig) => void;\n  className?: string | undefined;\n  disabled?: boolean | undefined;\n  costLabel?: string | undefined;\n  maxTokensLabel?: string | undefined;\n  maxTokensStep?: number | undefined;\n};\n\n/** Compact budget fields matching the advanced chat settings surface. Callers may\n * relabel the token field when their payload contract uses a different budgeted\n * unit, such as conversation turns. */\nexport function BudgetSelector({\n  budget,\n  onBudgetChange,\n  className,\n  disabled = false,\n  costLabel = \"Max cost\",\n  maxTokensLabel = \"Max tokens\",\n  maxTokensStep = 1,\n}: BudgetSelectorProps) {\n  const updateBudget = (key: keyof ChatBudgetConfig, raw: string, integer = false) => {\n    const next: ChatBudgetConfig = { ...budget };\n    const parsed = parseOptionalNumber(raw, integer);\n    if (parsed === undefined) {\n      delete next[key];\n    } else {\n      next[key] = parsed;\n    }\n    onBudgetChange(next);\n  };\n\n  return (\n    <div className={cn(\"grid grid-cols-2 gap-3\", className)}>\n      <label className=\"space-y-1 text-xs\">\n        <span className=\"text-muted-foreground\">{costLabel}</span>\n        <input\n          type=\"number\"\n          min={0}\n          step={0.01}\n          value={budget?.cost ?? \"\"}\n          onChange={(event) => updateBudget(\"cost\", event.target.value)}\n          disabled={disabled}\n          className=\"h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50\"\n        />\n      </label>\n      <label className=\"space-y-1 text-xs\">\n        <span className=\"text-muted-foreground\">{maxTokensLabel}</span>\n        <input\n          type=\"number\"\n          min={0}\n          step={maxTokensStep}\n          value={budget?.maxTokens ?? \"\"}\n          onChange={(event) => updateBudget(\"maxTokens\", event.target.value, maxTokensStep >= 1)}\n          disabled={disabled}\n          className=\"h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50\"\n        />\n      </label>\n    </div>\n  );\n}\n\nfunction parseOptionalNumber(raw: string, integer = false): number | undefined {\n  if (raw.trim() === \"\") return undefined;\n  const value = Number(raw);\n  if (!Number.isFinite(value)) return undefined;\n  return integer ? Math.max(0, Math.trunc(value)) : value;\n}\n"],"names":["providerIcon","jsx","Combobox","cn","effortLevelIcon","effortLevelColor","createElement","SegmentedControl","jsxs"],"mappings":"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"}

package/dist/data/chat/ModelSelector.d.ts

@@ -1,23 +1,64 @@
-import { ChatModel } from './types';
+import { ReactNode } from 'react';
+import { FormSize } from '../../components/json-schema-form-size';
+import { StaticIconComponent } from '../Icon';
+import { ChatBudgetConfig, ChatModel } from './types';
 export type ModelSelectorProps = {
     models: ChatModel[];
     /** Currently selected model id. */
     value?: string | undefined;
     onChange: (id: string) => void;
     className?: string;
+    /** Control size. Defaults to `sm` (compact chat toolbar); pass `md` to match
+     *  a standard-density form row. */
+    size?: FormSize;
 };
 /** A searchable model picker driven by the backend model menu, showing each
  *  provider's brand icon. Models whose provider is not configured are disabled
  *  rather than hidden, so the menu communicates what would be available with the
  *  right API key. */
-export declare function ModelSelector({ models, value, onChange, className }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ModelSelector({ models, value, onChange, className, size }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export type EffortSelectorProps = {
     efforts: string[];
     value?: string | undefined;
     onChange: (effort: string) => void;
     className?: string;
+    /** Control size. Defaults to `sm`; pass `md` to match a standard form row. */
+    size?: FormSize;
 };
 /** Reasoning-effort picker, shown only for reasoning-capable models. The empty
  *  value means "no extended thinking". Strict: only the listed options commit. */
-export declare function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function EffortSelector({ efforts, value, onChange, className, size }: EffortSelectorProps): import("react/jsx-runtime").JSX.Element;
+export type ProviderSelectorOption<T extends string = string> = {
+    id: T;
+    label: ReactNode;
+    /** Provider id used for the default brand glyph when `icon` is omitted. */
+    provider?: string | undefined;
+    icon?: string | StaticIconComponent | undefined;
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+};
+export type ProviderSelectorProps<T extends string = string> = {
+    providers: ProviderSelectorOption<T>[];
+    value: T;
+    onChange: (provider: T) => void;
+    className?: string | undefined;
+    ariaLabel?: string | undefined;
+};
+/** Segmented AI provider picker with the same provider glyphs used by the model
+ * selector. Use when the backend needs the provider/agent axis separate from the
+ * concrete model id. */
+export declare function ProviderSelector<T extends string = string>({ providers, value, onChange, className, ariaLabel, }: ProviderSelectorProps<T>): import("react/jsx-runtime").JSX.Element;
+export type BudgetSelectorProps = {
+    budget?: ChatBudgetConfig | undefined;
+    onBudgetChange: (budget: ChatBudgetConfig) => void;
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    costLabel?: string | undefined;
+    maxTokensLabel?: string | undefined;
+    maxTokensStep?: number | undefined;
+};
+/** Compact budget fields matching the advanced chat settings surface. Callers may
+ * relabel the token field when their payload contract uses a different budgeted
+ * unit, such as conversation turns. */
+export declare function BudgetSelector({ budget, onBudgetChange, className, disabled, costLabel, maxTokensLabel, maxTokensStep, }: BudgetSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModelSelector.d.ts.map

package/dist/data/chat/ModelSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ModelSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;qBAGqB;AACrB,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,kDAyBvF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;kFACkF;AAClF,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAgB1F"}
+{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ModelSelector.tsx"],"names":[],"mappings":"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"}

package/dist/data/chat/ModelSelector.js

@@ -1,8 +1,11 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
 import { Combobox } from "../../components/Combobox.js";
+import { SegmentedControl } from "../../components/SegmentedControl.js";
 import { cn } from "../../lib/utils.js";
+import { effortLevelIcon, effortLevelColor } from "./effort-icons.js";
 import { providerIcon } from "./provider-icons.js";
-function ModelSelector({ models, value, onChange, className }) {
+function ModelSelector({ models, value, onChange, className, size = "sm" }) {
   if (models.length === 0) return null;
   const selected = models.find((m) => m.id === value);
   const SelectedGlyph = providerIcon(selected == null ? void 0 : selected.provider);
@@ -14,14 +17,14 @@ function ModelSelector({ models, value, onChange, className }) {
       onChange,
       allowCustomValue: false,
       required: true,
-      size: "sm",
+      size,
       className: cn("w-48", className),
       ...SelectedGlyph ? { prefix: /* @__PURE__ */ jsx(SelectedGlyph, { className: "size-4" }) } : {},
       options: models.map((m) => {
         const Icon = providerIcon(m.provider);
         return {
           value: m.id,
-          label: m.reasoning ? `${m.label} ·🧠` : m.label,
+          label: m.label,
           ...Icon ? { icon: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) } : {},
           disabled: m.configured === false
         };
@@ -29,7 +32,12 @@ function ModelSelector({ models, value, onChange, className }) {
     }
   );
 }
-function EffortSelector({ efforts, value, onChange, className }) {
+function EffortSelector({ efforts, value, onChange, className, size = "sm" }) {
+  const supportedEfforts = efforts.filter(Boolean);
+  const selectedEffort = value && supportedEfforts.includes(value) ? value : "";
+  const selectedGlyph = selectedEffort ? effortLevelIcon(selectedEffort) : void 0;
+  const selectedColor = selectedEffort ? effortLevelColor(selectedEffort) : void 0;
+  const selectedIcon = selectedGlyph ? createElement(selectedGlyph, { className: cn("size-4", selectedColor) }) : void 0;
   return /* @__PURE__ */ jsx(
     Combobox,
     {
@@ -38,20 +46,141 @@ function EffortSelector({ efforts, value, onChange, className }) {
       onChange,
       allowCustomValue: false,
       required: true,
-      size: "sm",
+      size,
       className: cn("w-36", className),
+      ...selectedIcon ? { prefix: selectedIcon } : {},
       options: [
-        { value: "", label: "No reasoning" },
-        ...efforts.map((e) => {
-          var _a;
-          return { value: e, label: `${(_a = e[0]) == null ? void 0 : _a.toUpperCase()}${e.slice(1)} reasoning` };
-        })
+        { value: "", label: "None" },
+        ...supportedEfforts.map((effort) => ({
+          value: effort,
+          label: fullEffortLabel(effort),
+          selectedLabel: shortEffortLabel(effort)
+        }))
       ]
     }
   );
 }
+function fullEffortLabel(value) {
+  switch (value.trim().toLowerCase()) {
+    case "xhigh":
+      return "Extra high";
+    case "max":
+      return "Maximum";
+    default:
+      return titleCaseEffort(value);
+  }
+}
+function shortEffortLabel(value) {
+  switch (value.trim().toLowerCase()) {
+    case "minimal":
+      return "Min";
+    case "medium":
+      return "Med";
+    case "xhigh":
+      return "XHigh";
+    case "adaptive":
+      return "Auto";
+    case "max":
+      return "Max";
+    default:
+      return titleCaseEffort(value);
+  }
+}
+function titleCaseEffort(value) {
+  var _a;
+  const effort = value.trim();
+  return `${((_a = effort[0]) == null ? void 0 : _a.toUpperCase()) ?? ""}${effort.slice(1)}`;
+}
+function ProviderSelector({
+  providers,
+  value,
+  onChange,
+  className,
+  ariaLabel = "AI provider"
+}) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      "aria-label": ariaLabel,
+      size: "sm",
+      value,
+      onChange,
+      className: cn("w-fit", className),
+      options: providers.map((provider) => {
+        const icon = provider.icon ?? providerIcon(provider.provider);
+        return {
+          id: provider.id,
+          label: provider.label,
+          ...provider.title ? { title: provider.title } : {},
+          ...provider.disabled !== void 0 ? { disabled: provider.disabled } : {},
+          ...icon ? { icon } : {}
+        };
+      })
+    }
+  );
+}
+function BudgetSelector({
+  budget,
+  onBudgetChange,
+  className,
+  disabled = false,
+  costLabel = "Max cost",
+  maxTokensLabel = "Max tokens",
+  maxTokensStep = 1
+}) {
+  const updateBudget = (key, raw, integer = false) => {
+    const next = { ...budget };
+    const parsed = parseOptionalNumber(raw, integer);
+    if (parsed === void 0) {
+      delete next[key];
+    } else {
+      next[key] = parsed;
+    }
+    onBudgetChange(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-3", className), children: [
+    /* @__PURE__ */ jsxs("label", { className: "space-y-1 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: costLabel }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          step: 0.01,
+          value: (budget == null ? void 0 : budget.cost) ?? "",
+          onChange: (event) => updateBudget("cost", event.target.value),
+          disabled,
+          className: "h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "space-y-1 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: maxTokensLabel }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          step: maxTokensStep,
+          value: (budget == null ? void 0 : budget.maxTokens) ?? "",
+          onChange: (event) => updateBudget("maxTokens", event.target.value, maxTokensStep >= 1),
+          disabled,
+          className: "h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] })
+  ] });
+}
+function parseOptionalNumber(raw, integer = false) {
+  if (raw.trim() === "") return void 0;
+  const value = Number(raw);
+  if (!Number.isFinite(value)) return void 0;
+  return integer ? Math.max(0, Math.trunc(value)) : value;
+}
 export {
+  BudgetSelector,
   EffortSelector,
-  ModelSelector
+  ModelSelector,
+  ProviderSelector
 };
 //# sourceMappingURL=ModelSelector.js.map

package/dist/data/chat/ModelSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.js","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Combobox } from \"../../components/Combobox\";\nimport { cn } from \"../../lib/utils\";\nimport { providerIcon } from \"./provider-icons\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A searchable model picker driven by the backend model menu, showing each\n *  provider's brand icon. Models whose provider is not configured are disabled\n *  rather than hidden, so the menu communicates what would be available with the\n *  right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  const selected = models.find((m) => m.id === value);\n  const SelectedGlyph = providerIcon(selected?.provider);\n  return (\n    <Combobox\n      ariaLabel=\"Model\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-48\", className)}\n      {...(SelectedGlyph ? { prefix: <SelectedGlyph className=\"size-4\" /> } : {})}\n      options={models.map((m) => {\n        const Icon = providerIcon(m.provider);\n        return {\n          value: m.id,\n          label: m.reasoning ? `${m.label} ·🧠` : m.label,\n          ...(Icon ? { icon: <Icon className=\"size-4\" /> } : {}),\n          disabled: m.configured === false,\n        };\n      })}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". Strict: only the listed options commit. */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Combobox\n      ariaLabel=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-36\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAM,WAAW,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AAClD,QAAM,gBAAgB,aAAa,qCAAU,QAAQ;AACrD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAI,gBAAgB,EAAE,QAAQ,oBAAC,iBAAc,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,MACxE,SAAS,OAAO,IAAI,CAAC,MAAM;AACzB,cAAM,OAAO,aAAa,EAAE,QAAQ;AACpC,eAAO;AAAA,UACL,OAAO,EAAE;AAAA,UACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,UAC1C,GAAI,OAAO,EAAE,MAAM,oBAAC,QAAK,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,UACnD,UAAU,EAAE,eAAe;AAAA,QAAA;AAAA,MAE/B,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC/B,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ModelSelector.js","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { createElement, type ReactNode } from \"react\";\nimport { Combobox } from \"../../components/Combobox\";\nimport type { FormSize } from \"../../components/json-schema-form-size\";\nimport { SegmentedControl } from \"../../components/SegmentedControl\";\nimport type { StaticIconComponent } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\nimport { effortLevelColor, effortLevelIcon } from \"./effort-icons\";\nimport { providerIcon } from \"./provider-icons\";\nimport type { ChatBudgetConfig, ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n  /** Control size. Defaults to `sm` (compact chat toolbar); pass `md` to match\n   *  a standard-density form row. */\n  size?: FormSize;\n};\n\n/** A searchable model picker driven by the backend model menu, showing each\n *  provider's brand icon. Models whose provider is not configured are disabled\n *  rather than hidden, so the menu communicates what would be available with the\n *  right API key. */\nexport function ModelSelector({ models, value, onChange, className, size = \"sm\" }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  const selected = models.find((m) => m.id === value);\n  const SelectedGlyph = providerIcon(selected?.provider);\n  return (\n    <Combobox\n      ariaLabel=\"Model\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size={size}\n      className={cn(\"w-48\", className)}\n      {...(SelectedGlyph ? { prefix: <SelectedGlyph className=\"size-4\" /> } : {})}\n      options={models.map((m) => {\n        const Icon = providerIcon(m.provider);\n        return {\n          value: m.id,\n          label: m.label,\n          ...(Icon ? { icon: <Icon className=\"size-4\" /> } : {}),\n          disabled: m.configured === false,\n        };\n      })}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n  /** Control size. Defaults to `sm`; pass `md` to match a standard form row. */\n  size?: FormSize;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". Strict: only the listed options commit. */\nexport function EffortSelector({ efforts, value, onChange, className, size = \"sm\" }: EffortSelectorProps) {\n  const supportedEfforts = efforts.filter(Boolean);\n  const selectedEffort = value && supportedEfforts.includes(value) ? value : \"\";\n  const selectedGlyph = selectedEffort ? effortLevelIcon(selectedEffort) : undefined;\n  const selectedColor = selectedEffort ? effortLevelColor(selectedEffort) : undefined;\n  const selectedIcon = selectedGlyph\n    ? createElement(selectedGlyph, { className: cn(\"size-4\", selectedColor) })\n    : undefined;\n  return (\n    <Combobox\n      ariaLabel=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size={size}\n      className={cn(\"w-36\", className)}\n      {...(selectedIcon ? { prefix: selectedIcon } : {})}\n      options={[\n        { value: \"\", label: \"None\" },\n        ...supportedEfforts.map((effort) => ({\n          value: effort,\n          label: fullEffortLabel(effort),\n          selectedLabel: shortEffortLabel(effort),\n        })),\n      ]}\n    />\n  );\n}\n\nfunction fullEffortLabel(value: string): string {\n  switch (value.trim().toLowerCase()) {\n    case \"xhigh\":\n      return \"Extra high\";\n    case \"max\":\n      return \"Maximum\";\n    default:\n      return titleCaseEffort(value);\n  }\n}\n\nfunction shortEffortLabel(value: string): string {\n  switch (value.trim().toLowerCase()) {\n    case \"minimal\":\n      return \"Min\";\n    case \"medium\":\n      return \"Med\";\n    case \"xhigh\":\n      return \"XHigh\";\n    case \"adaptive\":\n      return \"Auto\";\n    case \"max\":\n      return \"Max\";\n    default:\n      return titleCaseEffort(value);\n  }\n}\n\nfunction titleCaseEffort(value: string): string {\n  const effort = value.trim();\n  return `${effort[0]?.toUpperCase() ?? \"\"}${effort.slice(1)}`;\n}\n\nexport type ProviderSelectorOption<T extends string = string> = {\n  id: T;\n  label: ReactNode;\n  /** Provider id used for the default brand glyph when `icon` is omitted. */\n  provider?: string | undefined;\n  icon?: string | StaticIconComponent | undefined;\n  title?: string | undefined;\n  disabled?: boolean | undefined;\n};\n\nexport type ProviderSelectorProps<T extends string = string> = {\n  providers: ProviderSelectorOption<T>[];\n  value: T;\n  onChange: (provider: T) => void;\n  className?: string | undefined;\n  ariaLabel?: string | undefined;\n};\n\n/** Segmented AI provider picker with the same provider glyphs used by the model\n * selector. Use when the backend needs the provider/agent axis separate from the\n * concrete model id. */\nexport function ProviderSelector<T extends string = string>({\n  providers,\n  value,\n  onChange,\n  className,\n  ariaLabel = \"AI provider\",\n}: ProviderSelectorProps<T>) {\n  return (\n    <SegmentedControl\n      aria-label={ariaLabel}\n      size=\"sm\"\n      value={value}\n      onChange={onChange}\n      className={cn(\"w-fit\", className)}\n      options={providers.map((provider) => {\n        const icon = provider.icon ?? providerIcon(provider.provider);\n        return {\n          id: provider.id,\n          label: provider.label,\n          ...(provider.title ? { title: provider.title } : {}),\n          ...(provider.disabled !== undefined ? { disabled: provider.disabled } : {}),\n          ...(icon ? { icon } : {}),\n        };\n      })}\n    />\n  );\n}\n\nexport type BudgetSelectorProps = {\n  budget?: ChatBudgetConfig | undefined;\n  onBudgetChange: (budget: ChatBudgetConfig) => void;\n  className?: string | undefined;\n  disabled?: boolean | undefined;\n  costLabel?: string | undefined;\n  maxTokensLabel?: string | undefined;\n  maxTokensStep?: number | undefined;\n};\n\n/** Compact budget fields matching the advanced chat settings surface. Callers may\n * relabel the token field when their payload contract uses a different budgeted\n * unit, such as conversation turns. */\nexport function BudgetSelector({\n  budget,\n  onBudgetChange,\n  className,\n  disabled = false,\n  costLabel = \"Max cost\",\n  maxTokensLabel = \"Max tokens\",\n  maxTokensStep = 1,\n}: BudgetSelectorProps) {\n  const updateBudget = (key: keyof ChatBudgetConfig, raw: string, integer = false) => {\n    const next: ChatBudgetConfig = { ...budget };\n    const parsed = parseOptionalNumber(raw, integer);\n    if (parsed === undefined) {\n      delete next[key];\n    } else {\n      next[key] = parsed;\n    }\n    onBudgetChange(next);\n  };\n\n  return (\n    <div className={cn(\"grid grid-cols-2 gap-3\", className)}>\n      <label className=\"space-y-1 text-xs\">\n        <span className=\"text-muted-foreground\">{costLabel}</span>\n        <input\n          type=\"number\"\n          min={0}\n          step={0.01}\n          value={budget?.cost ?? \"\"}\n          onChange={(event) => updateBudget(\"cost\", event.target.value)}\n          disabled={disabled}\n          className=\"h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50\"\n        />\n      </label>\n      <label className=\"space-y-1 text-xs\">\n        <span className=\"text-muted-foreground\">{maxTokensLabel}</span>\n        <input\n          type=\"number\"\n          min={0}\n          step={maxTokensStep}\n          value={budget?.maxTokens ?? \"\"}\n          onChange={(event) => updateBudget(\"maxTokens\", event.target.value, maxTokensStep >= 1)}\n          disabled={disabled}\n          className=\"h-8 w-full rounded border border-border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50\"\n        />\n      </label>\n    </div>\n  );\n}\n\nfunction parseOptionalNumber(raw: string, integer = false): number | undefined {\n  if (raw.trim() === \"\") return undefined;\n  const value = Number(raw);\n  if (!Number.isFinite(value)) return undefined;\n  return integer ? Math.max(0, Math.trunc(value)) : value;\n}\n"],"names":[],"mappings":"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"}