@agent-native/toolkit 0.205.0 → 0.206.0-nightly-20261009011246

package/src/app/resources/ResourcesPanel.tsx

@@ -1,7 +1,7 @@
 import {
-  BUILDER_CLAUDE_SONNET_MODEL_ID,
-  BUILDER_CLAUDE_SONNET_MODEL_LABEL,
-} from "@agent-native/core/agent/model-config";
+  getModelOptionLabel,
+  type ModelEngineConfig,
+} from "@agent-native/core/agent/model-version";
 import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
@@ -94,6 +94,10 @@ import {
   type FileStorageSetupCloseReason,
 } from "../chat/FileStorageSetupPopover.js";
 import { BuiltinCapabilityDetail } from "./BuiltinCapabilityDetail.js";
+import {
+  getCustomAgentModelOptions,
+  useCustomAgentModelEngine,
+} from "./custom-agent-model-options.js";
 import { McpIntegrationDialog } from "./McpIntegrationDialog.js";
 import { McpServerDetail } from "./McpServerDetail.js";
 import { ResourceEditor } from "./ResourceEditor.js";
@@ -233,17 +237,6 @@ type CreateMenuView =
   | "agent-prompt"
   | "agent-form";
 
-const AGENT_MODEL_OPTIONS = [
-  { value: "inherit", label: "Default model" },
-  { value: "claude-fable-5", label: "Claude Fable 5" },
-  { value: "claude-opus-5-5", label: "Claude Opus 5.5" },
-  {
-    value: BUILDER_CLAUDE_SONNET_MODEL_ID,
-    label: BUILDER_CLAUDE_SONNET_MODEL_LABEL,
-  },
-  { value: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
-] as const;
-
 export function slugifyName(value: string): string {
   return (
     value
@@ -433,6 +426,7 @@ function CreateMenu({
   triggerVariant = "icon",
   triggerLabel,
   initialView = "menu",
+  modelEngine,
 }: {
   scope: ResourceScope;
   resourceFilter?: ResourceView;
@@ -466,11 +460,25 @@ function CreateMenu({
   triggerVariant?: "icon" | "outline";
   triggerLabel?: string;
   initialView?: CreateMenuView;
+  modelEngine?: ModelEngineConfig | null;
 }) {
   const t = useT();
   const [open, setOpen] = useState(false);
   const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
   const [view, setView] = useState<CreateMenuView>("menu");
+  const modelEngineLoad = useCustomAgentModelEngine(
+    modelEngine,
+    open && view === "agent-form",
+  );
+  const effectiveModelEngine = modelEngineLoad.engine;
+  const modelLabels = {
+    defaultModel: t("agentResources.defaultModel"),
+    builderFallback: t("agentResources.builderModelFallback"),
+  };
+  const agentModelOptions = getCustomAgentModelOptions(
+    effectiveModelEngine,
+    modelLabels,
+  );
   const showMcpIntegrations = useMemo(
     () => hasAvailableMcpIntegrations(mcpIntegrations),
     [mcpIntegrations],
@@ -1108,11 +1116,28 @@ The job will run automatically on the schedule. Make the instructions specific
                   onChange={(e) => setAgentModel(e.target.value)}
                   className="w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none focus:ring-1 focus:ring-accent"
                 >
-                  {AGENT_MODEL_OPTIONS.map((option) => (
+                  {agentModelOptions.map((option) => (
                     <option key={option.value} value={option.value}>
                       {option.label}
                     </option>
                   ))}
+                  {modelEngineLoad.state === "unavailable" && (
+                    <option value="__model-options-unavailable" disabled>
+                      {t("agentResources.modelOptionsUnavailable")}
+                    </option>
+                  )}
+                  {agentModel !== "inherit" &&
+                    !agentModelOptions.some(
+                      (option) => option.value === agentModel,
+                    ) && (
+                      <option value={agentModel}>
+                        {getModelOptionLabel(
+                          agentModel,
+                          effectiveModelEngine ?? undefined,
+                          modelLabels.builderFallback,
+                        )}
+                      </option>
+                    )}
                 </select>
                 <label className="block text-[11px] font-medium text-muted-foreground">
                   Instructions
@@ -1240,6 +1265,8 @@ export interface ResourcesPanelProps {
   openResourceRef?: { current: ((id: string) => void) | null };
   /** Called when the editor opens or closes, so a page can yield to it. */
   onEditingChange?: (editing: boolean) => void;
+  /** Exact selected chat engine, when this panel is paired with a chat. */
+  modelEngine?: ModelEngineConfig | null;
 }
 
 /** Owners, admins, and solo deployments (no organization) edit org resources. */
@@ -1348,11 +1375,12 @@ export function ResourcesPanel({
   settingsGroups,
   openResourceRef,
   onEditingChange,
+  modelEngine,
 }: ResourcesPanelProps = {}) {
   const t = useT();
   const { data: org } = useOrg();
   const canEditOrg = canEditOrganizationResources(org);
-
+  const effectiveModelEngine = modelEngine;
   const [activeScope, setActiveScope] = useState<ResourceScope>(() =>
     resolveInitialResourceScope(requestedScope, canEditOrg),
   );
@@ -1918,6 +1946,7 @@ export function ResourcesPanel({
     return (
       <CreateMenu
         scope={targetScope}
+        modelEngine={effectiveModelEngine}
         resourceFilter={resourceFilter}
         personalMcpOnly={mode === "personal-mcp"}
         onCreateFile={(name) => handleCreateFromToolbar(targetScope, name)}
@@ -1962,6 +1991,7 @@ export function ResourcesPanel({
       return (
         <CreateMenu
           scope={targetScope}
+          modelEngine={effectiveModelEngine}
           resourceFilter={resourceFilter}
           personalMcpOnly={mode === "personal-mcp"}
           onCreateFile={(name) => handleCreateFromToolbar(targetScope, name)}
@@ -2232,6 +2262,7 @@ export function ResourcesPanel({
             (!resourceFilter || resourceFilter === "files") && (
               <CreateMenu
                 scope={activeScope}
+                modelEngine={effectiveModelEngine}
                 resourceFilter={resourceFilter}
                 personalMcpOnly={activeCreateMenuMode === "personal-mcp"}
                 onCreateFile={(name) =>
@@ -2349,6 +2380,8 @@ export function ResourcesPanel({
                 onViewChange={setEditorView}
                 hideToolbar
                 readOnly={selectedResourceReadOnly}
+                modelEngine={effectiveModelEngine}
+                builderFallbackLabel={t("agentResources.builderModelFallback")}
               />
             </div>
           ) : resourceQuery.isError ? (

package/src/app/resources/custom-agent-model-options.ts

@@ -0,0 +1,92 @@
+import { CURRENT_BUILDER_CLAUDE_MODEL_OPTIONS } from "@agent-native/core/agent/model-config";
+import {
+  getModelOptionLabel,
+  type ModelEngineConfig,
+} from "@agent-native/core/agent/model-version";
+import { loadChatModelCatalog } from "@agent-native/core/client/use-chat-models";
+import { useEffect, useState } from "react";
+
+export interface CustomAgentModelOption {
+  value: string;
+  label: string;
+}
+
+export interface CustomAgentModelOptionLabels {
+  defaultModel: string;
+  builderFallback: string;
+}
+
+export type CustomAgentModelEngineLoadState =
+  | "idle"
+  | "loading"
+  | "available"
+  | "unavailable";
+
+export function useCustomAgentModelEngine(
+  suppliedEngine: ModelEngineConfig | null | undefined,
+  enabled: boolean,
+): {
+  engine: ModelEngineConfig | null;
+  state: CustomAgentModelEngineLoadState;
+} {
+  const [loaded, setLoaded] = useState<{
+    engine: ModelEngineConfig | null;
+    state: CustomAgentModelEngineLoadState;
+  }>({ engine: null, state: "idle" });
+
+  useEffect(() => {
+    if (suppliedEngine !== undefined || !enabled) return;
+    let cancelled = false;
+    setLoaded({ engine: null, state: "loading" });
+    void loadChatModelCatalog()
+      .then((catalog) => {
+        if (cancelled) return;
+        const engine =
+          catalog.state === "available" ? catalog.currentModelEngine : null;
+        setLoaded({
+          engine,
+          state: engine ? "available" : "unavailable",
+        });
+      })
+      .catch((error: unknown) => {
+        if (cancelled) return;
+        console.error(
+          "[agent-resources] model catalog could not be loaded",
+          error,
+        );
+        setLoaded({ engine: null, state: "unavailable" });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, suppliedEngine]);
+
+  if (suppliedEngine !== undefined) {
+    return {
+      engine: suppliedEngine,
+      state: suppliedEngine ? "available" : "unavailable",
+    };
+  }
+  return loaded;
+}
+
+export function getCustomAgentModelOptions(
+  engine: ModelEngineConfig | null | undefined,
+  labels: CustomAgentModelOptionLabels,
+): CustomAgentModelOption[] {
+  const selectableModels = engine?.selectableModels ?? engine?.supportedModels;
+  const models =
+    engine?.name === "builder"
+      ? CURRENT_BUILDER_CLAUDE_MODEL_OPTIONS.filter((option) =>
+          selectableModels?.includes(option.value),
+        ).map((option) => option.value)
+      : (selectableModels ?? []);
+
+  return [
+    { value: "inherit", label: labels.defaultModel },
+    ...[...new Set(models)].map((value) => ({
+      value,
+      label: getModelOptionLabel(value),
+    })),
+  ];
+}

package/src/app/settings/SettingsPanel.model-defaults.spec.tsx

@@ -4,20 +4,31 @@ import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { AppDefaultModelField } from "./SettingsPanel.js";
+import { AppDefaultModelField, friendlyModelName } from "./SettingsPanel.js";
 
 const BUILDER_MODELS = [
   "auto",
+  "claude-haiku-5-5",
+  "claude-sonnet-5-5",
   "claude-opus-5-5",
-  "claude-sonnet-5",
-  "claude-haiku-4-5",
-  "gpt-5-6-sol",
+  "gpt-6-1-sol",
   "gpt-5-6-terra",
-  "gpt-5-6-luna",
+  "gpt-6-luna",
   "gemini-3-1-pro",
-  "gemini-3-5-flash",
+  "gemini-3-8-flash",
+  "gemini-3-5-flash-lite",
+  "gemini-3-1-flash-lite",
 ];
 
+describe("friendlyModelName", () => {
+  it("keeps custom model ids safe and formats dated Claude ids", () => {
+    expect(friendlyModelName("toString")).toBe("toString");
+    expect(friendlyModelName("claude-haiku-4-20251001")).toBe("Haiku 4");
+    expect(friendlyModelName("claude-fable-5-1")).toBe("Fable 5.1");
+    expect(friendlyModelName("x-ai/grok-build-0.1")).toBe("Grok Build 0.1");
+  });
+});
+
 describe("AppDefaultModelField", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -42,7 +53,7 @@ describe("AppDefaultModelField", () => {
         <AppDefaultModelField
           engine="builder"
           models={BUILDER_MODELS}
-          value="gpt-5-6-sol"
+          value="gpt-6-1-sol"
           onValueChange={vi.fn()}
         />,
       );
@@ -52,7 +63,7 @@ describe("AppDefaultModelField", () => {
       'button[role="combobox"][aria-label="Model"]',
     );
     expect(trigger).not.toBeNull();
-    expect(trigger?.textContent).toContain("GPT-5.6 Sol");
+    expect(trigger?.textContent).toContain("GPT-6.1 Sol");
     expect(container.querySelector("input[list]")).toBeNull();
 
     act(() => {
@@ -71,14 +82,16 @@ describe("AppDefaultModelField", () => {
     );
     expect(options).toEqual([
       "auto",
+      "Haiku 5.5",
+      "Sonnet 5.5",
       "Opus 5.5",
-      "Sonnet 5",
-      "Haiku 4.5",
-      "GPT-5.6 Sol",
+      "GPT-6.1 Sol",
       "GPT-5.6 Terra",
-      "GPT-5.6 Luna",
+      "GPT-6 Luna",
       "Gemini 3.1 Pro",
-      "Gemini 3.5 Flash",
+      "Gemini 3.8 Flash",
+      "Gemini 3.5 Flash Lite",
+      "Gemini 3.1 Flash Lite",
     ]);
   });
 

package/src/app/settings/SettingsPanel.tsx

@@ -584,11 +584,43 @@ function ManualSetupCard({
   );
 }
 
+const FRIENDLY_MODEL_NAMES: Record<string, string> = {
+  "z-ai/glm-5.2": "GLM 5.2",
+  "grok-code-fast": "Grok Code Fast",
+  "x-ai/grok-4.7": "Grok 4.7",
+  "x-ai/grok-build-0.1": "Grok Build 0.1",
+  "qwen3-coder": "Qwen3 Coder",
+  "qwen/qwen3-coder": "Qwen3 Coder",
+  "kimi-k2-5": "Kimi K2.5",
+  "moonshotai/kimi-k2.5": "Kimi K2.5",
+  "deepseek-v4-pro": "DeepSeek V4 Pro",
+  "deepseek-v4-1-flash": "DeepSeek V4.1 Flash",
+  "deepseek-v3-1": "DeepSeek v3.1",
+  "deepseek/deepseek-v4-pro": "DeepSeek V4 Pro",
+  "deepseek/deepseek-v4.1-flash": "DeepSeek V4.1 Flash",
+  "deepseek/deepseek-chat-v3.1": "DeepSeek v3.1",
+  "z-ai-glm-4-5": "Z-AI GLM 4.5",
+  "z-ai-glm-5-1": "Z-AI GLM 5.1",
+  "z-ai-glm-5-3-flash": "Z-AI GLM 5.3 Flash",
+  "z-ai/glm-4.5": "GLM 4.5",
+  "z-ai/glm-5.1": "GLM 5.1",
+  "z-ai/glm-5.3-flash": "GLM 5.3 Flash",
+  "anthropic/claude-haiku-5.5": "Claude Haiku 5.5",
+  "google/gemini-3.8-flash": "Gemini 3.8 Flash",
+  "google/gemini-3.5-flash-lite": "Gemini 3.5 Flash-Lite",
+  "google/gemini-3.1-flash-lite": "Gemini 3.1 Flash-Lite",
+  "google/gemini-3.1-pro-preview": "Gemini 3.1 Pro",
+};
+
 export function friendlyModelName(model: string): string {
-  if (model === "z-ai/glm-5.2") return "GLM 5.2";
+  const friendlyName = Object.hasOwn(FRIENDLY_MODEL_NAMES, model)
+    ? FRIENDLY_MODEL_NAMES[model]
+    : undefined;
+  if (friendlyName !== undefined) return friendlyName;
   const normalizedModel = model.replace(/^(?:anthropic|openai)\//, "");
-  const claude = normalizedModel.match(
-    /^claude-(opus|sonnet|haiku)-(\d+)(?:[-.](\d+))?(?:-\d{8,})?$/,
+  const undatedModel = normalizedModel.replace(/-\d{8,}$/, "");
+  const claude = undatedModel.match(
+    /^claude-(opus|sonnet|haiku|fable)-(\d+)(?:[-.](\d+))?$/,
   );
   if (claude) {
     const tier = claude[1][0].toUpperCase() + claude[1].slice(1);

package/src/app/settings/SettingsTabsPage.spec.tsx

@@ -1,5 +1,9 @@
 // @vitest-environment happy-dom
 
+import {
+  setCustomKeyOnboardingAttempt,
+  trackCustomKeyOnboardingOutcome,
+} from "@agent-native/core/client/onboarding/use-onboarding";
 import { SIGN_OUT_SEARCH_TERMS } from "@agent-native/core/client/sign-out";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { act } from "react";
@@ -78,6 +82,30 @@ function captureAnimationFrame() {
 }
 
 let activeQueryClient: QueryClient | null = null;
+let restoreLocalStorage: (() => void) | null = null;
+
+function installTestLocalStorage() {
+  const descriptor = Object.getOwnPropertyDescriptor(window, "localStorage");
+  const values = new Map<string, string>();
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    value: {
+      get length() {
+        return values.size;
+      },
+      clear: () => values.clear(),
+      getItem: (key: string) => values.get(key) ?? null,
+      key: (index: number) => [...values.keys()][index] ?? null,
+      removeItem: (key: string) => values.delete(key),
+      setItem: (key: string, value: string) => values.set(key, String(value)),
+    } satisfies Storage,
+  });
+  restoreLocalStorage = () => {
+    if (descriptor) Object.defineProperty(window, "localStorage", descriptor);
+    else Reflect.deleteProperty(window, "localStorage");
+    restoreLocalStorage = null;
+  };
+}
 
 function createQueryClientWithLabs(labs: Record<string, unknown>) {
   const queryClient = new QueryClient({
@@ -104,6 +132,7 @@ describe("SettingsTabsPage", () => {
     act(() => root.unmount());
     activeQueryClient?.clear();
     activeQueryClient = null;
+    restoreLocalStorage?.();
     container.remove();
     document.body.innerHTML = "";
     vi.unstubAllGlobals();
@@ -256,6 +285,74 @@ describe("SettingsTabsPage", () => {
     expect(document.activeElement).toBe(teamTab);
   });
 
+  it("keeps an onboarding attempt through legacy settings tab navigation", async () => {
+    installTestLocalStorage();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () =>
+          new Response(JSON.stringify({ error: "not authenticated" }), {
+            headers: { "Content-Type": "application/json" },
+          }),
+      ),
+    );
+    expect(await setCustomKeyOnboardingAttempt("legacy-settings-nav")).toBe(
+      "stored",
+    );
+
+    act(() => {
+      root.render(
+        <SettingsTabsPage
+          general={<div>General content</div>}
+          team={<div>Team members</div>}
+          redesign={false}
+        />,
+      );
+    });
+
+    const teamTab =
+      container.querySelector<HTMLButtonElement>("#settings-tab-team");
+    expect(teamTab).not.toBeNull();
+    act(() => teamTab!.click());
+
+    expect(trackCustomKeyOnboardingOutcome("credential_saved")).toBe("tracked");
+  });
+
+  it("records abandonment when a legacy settings route exits", async () => {
+    installTestLocalStorage();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () =>
+          new Response(JSON.stringify({ error: "not authenticated" }), {
+            headers: { "Content-Type": "application/json" },
+          }),
+      ),
+    );
+    expect(await setCustomKeyOnboardingAttempt("legacy-settings-exit")).toBe(
+      "stored",
+    );
+
+    act(() => {
+      root.render(
+        <SettingsTabsPage
+          general={<div>General content</div>}
+          team={<div>Team members</div>}
+          redesign={false}
+        />,
+      );
+    });
+
+    const renderedRoot = root;
+    await act(async () => {
+      renderedRoot.unmount();
+      await Promise.resolve();
+    });
+    root = createRoot(container);
+
+    expect(trackCustomKeyOnboardingOutcome("credential_saved")).toBe("missing");
+  });
+
   it("opens general settings by default when the route has no hash", () => {
     act(() => {
       root.render(

package/src/app/settings/SettingsTabsPage.tsx

@@ -5,6 +5,7 @@ import {
 import { useFeatureFlagState } from "@agent-native/core/client/feature-flags/use-feature-flag";
 import { useT } from "@agent-native/core/client/i18n";
 import type { LabStates } from "@agent-native/core/client/labs/use-lab";
+import { useCustomKeyOnboardingAttemptLifecycle } from "@agent-native/core/client/onboarding/use-onboarding";
 import { useActionQuery } from "@agent-native/core/client/use-action";
 import { SETTINGS_REDESIGN_FLAG } from "@agent-native/core/feature-flags/registry";
 import { CHATGPT_SUBSCRIPTION_LAB } from "@agent-native/core/labs/core-labs";
@@ -1058,6 +1059,7 @@ function RedesignedSettingsTabsPage(props: SettingsTabsPageProps) {
 }
 
 export function SettingsTabsPage(props: SettingsTabsPageProps) {
+  useCustomKeyOnboardingAttemptLifecycle();
   // No query client means no action surface to read the flag from, so the
   // flag fails closed exactly as it does for a signed-out viewer. It also
   // means the server's registered labs are unknown, so core labs stay hidden.