@agent-native/core 0.98.0 → 0.98.2

package/dist/client/settings/SettingsPanel.js

@@ -63,11 +63,11 @@ function pillButtonClass(isPage, tone = "outline") {
     }
     return cn(base, "border border-border text-foreground hover:bg-accent/40");
 }
-function SettingsSelect({ label, labelAdornment, value, options, onValueChange, }) {
+function SettingsSelect({ label, labelAdornment, value, options, onValueChange, disabled = false, }) {
     const isPage = useSettingsSurface() === "page";
     const controlStyle = isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE;
     const selected = options.find((option) => option.value === value);
-    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: fieldLabelClass(isPage), children: label }), labelAdornment] }), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, children: [_jsxs(SelectPrimitive.Trigger, { className: cn("flex w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground", isPage ? "h-10 text-sm" : "h-9 text-[12px]"), "aria-label": label, style: controlStyle, children: [_jsx(SelectPrimitive.Value, { children: selected?.label ?? value }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { size: 16, className: "text-muted-foreground" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: cn("relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", isPage ? "py-2.5 text-sm" : "py-2.5 text-[12px]"), style: controlStyle, children: [_jsx("span", { className: "absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { size: 14 }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), option.description ? (_jsx("span", { className: cn("mt-0.5 leading-relaxed text-muted-foreground", isPage ? "text-xs" : "text-[11px]"), children: option.description })) : null] })] }, option.value))) }) }) })] })] }));
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: fieldLabelClass(isPage), children: label }), labelAdornment] }), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, disabled: disabled, children: [_jsxs(SelectPrimitive.Trigger, { className: cn("flex w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60", isPage ? "h-10 text-sm" : "h-9 text-[12px]"), "aria-label": label, style: controlStyle, children: [_jsx(SelectPrimitive.Value, { children: selected?.label ?? value }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { size: 16, className: "text-muted-foreground" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: cn("relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", isPage ? "py-2.5 text-sm" : "py-2.5 text-[12px]"), style: controlStyle, children: [_jsx("span", { className: "absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { size: 14 }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), option.description ? (_jsx("span", { className: cn("mt-0.5 leading-relaxed text-muted-foreground", isPage ? "text-xs" : "text-[11px]"), children: option.description })) : null] })] }, option.value))) }) }) })] })] }));
 }
 // ─── Disconnect button for the Builder card's connected state ───────────────
 //
@@ -204,10 +204,30 @@ function friendlyModelName(model) {
         const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
         return `${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
     }
-    if (model.startsWith("gpt-"))
-        return `GPT-${model.slice(4)}`;
+    if (model.startsWith("gpt-")) {
+        const rest = model.slice(4);
+        const gpt = rest.match(/^(\d+)[.-](\d+)(?:[.-](.+))?$/);
+        if (gpt) {
+            const suffix = gpt[3]
+                ? ` ${gpt[3]
+                    .split("-")
+                    .map((part) => part[0].toUpperCase() + part.slice(1))
+                    .join(" ")}`
+                : "";
+            return `GPT-${gpt[1]}.${gpt[2]}${suffix}`;
+        }
+        return `GPT-${rest}`;
+    }
     if (/^o\d/.test(model))
         return model;
+    const geminiVersioned = model.match(/^gemini-(\d+)-(\d+)-(.+?)(?:-preview)?$/);
+    if (geminiVersioned) {
+        const variant = geminiVersioned[3]
+            .split("-")
+            .map((part) => part[0].toUpperCase() + part.slice(1))
+            .join(" ");
+        return `Gemini ${geminiVersioned[1]}.${geminiVersioned[2]} ${variant}`;
+    }
     const gemini = model.match(/^gemini-(.+?)(?:-preview)?$/);
     if (gemini) {
         const parts = gemini[1]
@@ -253,6 +273,21 @@ function latestModelsOnly(models) {
         return true;
     });
 }
+export function AppDefaultModelField({ engine, models, value, defaultModel, disabled, onValueChange, onEnter, }) {
+    const isPage = useSettingsSurface() === "page";
+    const modelOptions = latestModelsOnly(models).map((model) => ({ value: model, label: friendlyModelName(model) }));
+    // Builder models are a closed catalog (and are validated server-side), so a
+    // real select keeps every available model visible even when one is already
+    // selected. Native datalists filter against the current input value, which
+    // made this field appear to contain only the active model.
+    if (engine === "builder" && modelOptions.length > 0) {
+        return (_jsx(SettingsSelect, { label: "Model", value: value, options: modelOptions, onValueChange: onValueChange, disabled: disabled }));
+    }
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `app-model-suggestions-${engine}`, value: value, disabled: disabled, onChange: (event) => onValueChange(event.target.value), onKeyDown: (event) => {
+                    if (event.key === "Enter")
+                        onEnter?.();
+                }, placeholder: defaultModel ?? "model-id", spellCheck: false, autoComplete: "off", className: cn(textInputClass(isPage), "disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${engine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }));
+}
 const PROVIDER_DOCS = {
     anthropic: "https://console.anthropic.com/settings/keys",
     "ai-sdk:anthropic": "https://console.anthropic.com/settings/keys",
@@ -565,7 +600,6 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
                 ? `Install ${engine.installPackage ?? "the provider packages"} to use this provider`
                 : "Credentials not detected yet",
     }));
-    const modelOptions = latestModelsOnly(selectedEngineInfo?.supportedModels ?? []).map((model) => ({ value: model, label: friendlyModelName(model) }));
     const hasPendingChange = !!settings &&
         settings.canUpdate &&
         !!selectedEngine &&
@@ -646,13 +680,13 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
                                     const info = settings.engines.find((engine) => engine.name === value);
                                     setSelectedModel(info?.defaultModel ?? "");
                                     setError(null);
-                                } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `app-model-suggestions-${selectedEngine}`, value: selectedModel, disabled: !settings.canUpdate || saving, onChange: (event) => {
-                                            setSelectedModel(event.target.value);
-                                            setError(null);
-                                        }, onKeyDown: (event) => {
-                                            if (event.key === "Enter" && hasPendingChange)
-                                                void save();
-                                        }, placeholder: selectedEngineInfo?.defaultModel ?? "model-id", spellCheck: false, autoComplete: "off", className: cn(textInputClass(isPage), "disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${selectedEngine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate || !hasAppDefault || saving, className: pillButtonClass(isPage, "outline"), children: "Reset" })] })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change app model defaults." })), selectedEngineInfo?.packageInstalled === false ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "This app does not include the optional runtime packages for this provider." })) : selectedEngineInfo && !selectedEngineInfo.configured ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Credentials for this provider were not detected; runtime will fall back if the model cannot be used." })) : null, error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "App model defaults are unavailable." })) }));
+                                } }), _jsx(AppDefaultModelField, { engine: selectedEngine, models: selectedEngineInfo?.supportedModels ?? [], value: selectedModel, defaultModel: selectedEngineInfo?.defaultModel, disabled: !settings.canUpdate || saving, onValueChange: (value) => {
+                                    setSelectedModel(value);
+                                    setError(null);
+                                }, onEnter: () => {
+                                    if (hasPendingChange)
+                                        void save();
+                                } }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate || !hasAppDefault || saving, className: pillButtonClass(isPage, "outline"), children: "Reset" })] })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change app model defaults." })), selectedEngineInfo?.packageInstalled === false ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "This app does not include the optional runtime packages for this provider." })) : selectedEngineInfo && !selectedEngineInfo.configured ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Credentials for this provider were not detected; runtime will fall back if the model cannot be used." })) : null, error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "App model defaults are unavailable." })) }));
 }
 // ─── Email Section ──────────────────────────────────────────────────────────
 function EmailSectionInner({ open, onToggle, }) {