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

package/src/app/resources/ResourceEditor.spec.tsx

@@ -5,6 +5,18 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const sharedEditorProps = vi.hoisted(() => ({ current: null as any }));
+const modelCatalogMocks = vi.hoisted(() => ({ load: vi.fn() }));
+const resourceI18nMocks = vi.hoisted(() => ({
+  labels: {} as Record<string, string>,
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => resourceI18nMocks.labels[key] ?? key,
+}));
+
+vi.mock("@agent-native/core/client/use-chat-models", () => ({
+  loadChatModelCatalog: modelCatalogMocks.load,
+}));
 
 vi.mock("@agent-native/toolkit/editor/SharedRichEditor", async () => {
   const React = await import("react");
@@ -20,10 +32,23 @@ vi.mock("@agent-native/toolkit/editor/SharedRichEditor", async () => {
   };
 });
 
+import { BUILDER_MODEL_CONFIG } from "@agent-native/core/agent/model-config";
 import type { Resource } from "@agent-native/core/client/resources/use-resources";
 
 import { ResourceEditor } from "./ResourceEditor.js";
 
+const builderModelEngine = {
+  name: "builder",
+  label: "Builder.io Gateway",
+  ...BUILDER_MODEL_CONFIG,
+};
+const anthropicModelEngine = {
+  name: "anthropic",
+  label: "Anthropic",
+  defaultModel: "claude-sonnet-5-5",
+  supportedModels: ["claude-sonnet-5-5", "claude-haiku-5-5", "claude-fable-5"],
+};
+
 const resource: Resource = {
   id: "resource-1",
   path: "skills/release/SKILL.md",
@@ -48,6 +73,16 @@ describe("ResourceEditor markdown editing", () => {
   beforeEach(() => {
     vi.useFakeTimers();
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    resourceI18nMocks.labels = {
+      "agentResources.defaultModel": "Default model",
+      "agentResources.builderModelFallback": "Builder fallback",
+      "agentResources.modelOptionsUnavailable": "Model options unavailable",
+    };
+    modelCatalogMocks.load.mockReset();
+    modelCatalogMocks.load.mockResolvedValue({
+      state: "unavailable",
+      enginesUnavailable: true,
+    });
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -96,7 +131,7 @@ describe("ResourceEditor markdown editing", () => {
     );
   });
 
-  it("offers the gateway-compatible Sonnet model for custom agents", () => {
+  it("offers the current Claude models for custom agents", () => {
     const onSave = vi.fn();
     act(() => {
       root.render(
@@ -105,22 +140,222 @@ describe("ResourceEditor markdown editing", () => {
             ...resource,
             path: "agents/researcher.md",
             content:
-              "---\nname: Researcher\nmodel: claude-sonnet-5\n---\n# Research\n",
+              "---\nname: Researcher\nmodel: claude-sonnet-5-5\n---\n# Research\n",
           }}
           onSave={onSave}
           view="visual"
+          modelEngine={builderModelEngine}
+        />,
+      );
+    });
+
+    const modelPicker = container.querySelector("select")!;
+    expect(modelPicker.value).toBe("claude-sonnet-5-5");
+    expect(
+      Array.from(modelPicker.options).some(
+        (option) =>
+          option.value === "claude-sonnet-5-5" &&
+          option.textContent === "Claude Sonnet 5.5",
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(modelPicker.options).some(
+        (option) => option.value === "claude-haiku-5-5",
+      ),
+    ).toBe(true);
+  });
+
+  it("preserves a saved legacy Claude model in the picker", () => {
+    act(() => {
+      root.render(
+        <ResourceEditor
+          resource={{
+            ...resource,
+            path: "agents/researcher.md",
+            content:
+              "---\nname: Researcher\nmodel: claude-haiku-4-5-20251001\n---\n# Research\n",
+          }}
+          onSave={vi.fn()}
+          view="visual"
+          modelEngine={builderModelEngine}
         />,
       );
     });
 
     const modelPicker = container.querySelector("select")!;
-    expect(modelPicker.value).toBe("claude-sonnet-5");
+    expect(modelPicker.value).toBe("claude-haiku-4-5-20251001");
     expect(
       Array.from(modelPicker.options).some(
         (option) =>
-          option.value === "claude-sonnet-5" &&
-          option.textContent === "Claude Sonnet 5",
+          option.value === "claude-haiku-4-5-20251001" &&
+          option.textContent ===
+            "Claude Haiku 4.5 → Claude Haiku 5.5 · Builder fallback",
       ),
     ).toBe(true);
+    expect(
+      Array.from(modelPicker.options).some(
+        (option) => option.value === "claude-haiku-5-5",
+      ),
+    ).toBe(true);
+  });
+
+  it("shows the saved model label outside its curated options", () => {
+    resourceI18nMocks.labels["agentResources.builderModelFallback"] =
+      "Modelo alternativo";
+    act(() => {
+      root.render(
+        <ResourceEditor
+          resource={{
+            ...resource,
+            path: "agents/researcher.md",
+            content:
+              "---\nname: Researcher\nmodel: claude-fable-5\n---\n# Research\n",
+          }}
+          onSave={vi.fn()}
+          view="visual"
+          modelEngine={builderModelEngine}
+        />,
+      );
+    });
+
+    const modelPicker = container.querySelector("select")!;
+    expect(modelPicker.value).toBe("claude-fable-5");
+    expect(
+      Array.from(modelPicker.options).find(
+        (option) => option.value === "claude-fable-5",
+      )?.textContent,
+    ).toBe("Claude Fable 5 → GPT-6 Luna · Modelo alternativo");
+  });
+
+  it("keeps an unchecked but runtime-supported model from showing a false fallback", () => {
+    act(() => {
+      root.render(
+        <ResourceEditor
+          resource={{
+            ...resource,
+            path: "agents/researcher.md",
+            content:
+              "---\nname: Researcher\nmodel: claude-fable-5\n---\n# Research\n",
+          }}
+          onSave={vi.fn()}
+          view="visual"
+          modelEngine={{
+            name: "anthropic",
+            label: "Anthropic",
+            defaultModel: "claude-sonnet-5-5",
+            supportedModels: [
+              "claude-haiku-5-5",
+              "claude-sonnet-5-5",
+              "claude-fable-5",
+            ],
+            selectableModels: ["claude-haiku-5-5"],
+          }}
+        />,
+      );
+    });
+
+    const modelOption = Array.from(
+      container.querySelector("select")!.options,
+    ).find((option) => option.value === "claude-fable-5");
+    expect(modelOption?.textContent).toBe("Claude Fable 5");
+  });
+
+  it("loads model choices when a standalone custom-agent editor opens", async () => {
+    modelCatalogMocks.load.mockResolvedValue({
+      state: "available",
+      groups: [],
+      modelEngines: { anthropic: anthropicModelEngine },
+      currentModelEngine: anthropicModelEngine,
+      defaultModel: "claude-sonnet-5-5",
+      loadLiveGroups: async () => null,
+    });
+    await act(async () => {
+      root.render(
+        <ResourceEditor
+          resource={{
+            ...resource,
+            path: "agents/researcher.md",
+            content: "---\nname: Researcher\nmodel: inherit\n---\n# Research\n",
+          }}
+          onSave={vi.fn()}
+          view="visual"
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(modelCatalogMocks.load).toHaveBeenCalledOnce();
+    expect(
+      Array.from(container.querySelector("select")!.options).map(
+        (option) => option.value,
+      ),
+    ).toContain("claude-haiku-5-5");
+  });
+
+  it("offers Anthropic Fable and labels it without a Builder fallback", () => {
+    act(() => {
+      root.render(
+        <ResourceEditor
+          resource={{
+            ...resource,
+            path: "agents/researcher.md",
+            content:
+              "---\nname: Researcher\nmodel: claude-fable-5\n---\n# Research\n",
+          }}
+          onSave={vi.fn()}
+          view="visual"
+          modelEngine={anthropicModelEngine}
+        />,
+      );
+    });
+
+    const modelPicker = container.querySelector("select")!;
+    expect(
+      Array.from(modelPicker.options).some(
+        (option) =>
+          option.value === "claude-fable-5" &&
+          option.textContent === "Claude Fable 5",
+      ),
+    ).toBe(true);
+  });
+
+  it("uses friendly names for provider-prefixed custom-agent model choices", () => {
+    const engine = {
+      name: "ai-sdk:openrouter",
+      label: "OpenRouter",
+      defaultModel: "openai/gpt-5.5",
+      supportedModels: [
+        "openai/gpt-5.5",
+        "google/gemini-3.1-pro-preview",
+        "deepseek/deepseek-v4-pro",
+        "qwen/qwen3-coder",
+      ],
+    };
+
+    act(() => {
+      root.render(
+        <ResourceEditor
+          resource={{
+            ...resource,
+            path: "agents/researcher.md",
+            content:
+              "---\nname: Researcher\nmodel: openai/gpt-5.5\n---\n# Research\n",
+          }}
+          onSave={vi.fn()}
+          view="visual"
+          modelEngine={engine}
+        />,
+      );
+    });
+
+    const options = Array.from(container.querySelector("select")!.options);
+    expect(options.map((option) => option.textContent)).toEqual([
+      "Default model",
+      "GPT-5.5",
+      "Gemini 3.1 Pro",
+      "DeepSeek V4 Pro",
+      "Qwen3 Coder",
+    ]);
   });
 });

package/src/app/resources/ResourceEditor.tsx

@@ -1,8 +1,9 @@
 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 { agentNativePath } from "@agent-native/core/client/api-path";
+import { useT } from "@agent-native/core/client/i18n";
 import type { Resource } from "@agent-native/core/client/resources/use-resources";
 import {
   type ParsedFrontmatter,
@@ -24,6 +25,11 @@ import React, {
   useMemo,
 } from "react";
 
+import {
+  getCustomAgentModelOptions,
+  useCustomAgentModelEngine,
+} from "./custom-agent-model-options.js";
+
 export interface ResourceEditorProps {
   resource: Resource;
   onSave: (content: string) => void;
@@ -31,6 +37,8 @@ export interface ResourceEditorProps {
   onViewChange?: (v: "visual" | "code") => void;
   hideToolbar?: boolean;
   readOnly?: boolean;
+  modelEngine?: ModelEngineConfig | null;
+  builderFallbackLabel?: string;
 }
 
 const CONTROL_STYLE = { fontSize: 12, lineHeight: 1 } as const;
@@ -67,11 +75,15 @@ function FrontmatterBar({
   frontmatter,
   onChange,
   readOnly,
+  modelEngine,
+  builderFallbackLabel,
 }: {
   resourcePath: string;
   frontmatter: ParsedFrontmatter;
   onChange: (updated: ParsedFrontmatter) => void;
   readOnly?: boolean;
+  modelEngine?: ModelEngineConfig | null;
+  builderFallbackLabel?: string;
 }) {
   const getField = (key: string) => getFrontmatterValue(frontmatter, key) ?? "";
 
@@ -96,6 +108,18 @@ function FrontmatterBar({
   const tools = getField("tools") || "inherit";
   const isCustomAgent = isCustomAgentPath(resourcePath);
   const isSkill = isSkillPath(resourcePath);
+  const t = useT();
+  const modelEngineLoad = useCustomAgentModelEngine(
+    modelEngine,
+    !readOnly && isCustomAgent,
+  );
+  const effectiveModelEngine = modelEngineLoad.engine;
+  const effectiveBuilderFallbackLabel =
+    builderFallbackLabel ?? t("agentResources.builderModelFallback");
+  const modelOptions = getCustomAgentModelOptions(effectiveModelEngine, {
+    defaultModel: t("agentResources.defaultModel"),
+    builderFallback: effectiveBuilderFallbackLabel,
+  });
 
   return (
     <div
@@ -177,13 +201,26 @@ function FrontmatterBar({
               padding: "2px 6px",
             }}
           >
-            <option value="inherit">Default model</option>
-            <option value="claude-fable-5">Claude Fable 5</option>
-            <option value="claude-opus-5-5">Claude Opus 5.5</option>
-            <option value={BUILDER_CLAUDE_SONNET_MODEL_ID}>
-              {BUILDER_CLAUDE_SONNET_MODEL_LABEL}
-            </option>
-            <option value="claude-haiku-4-5-20251001">Claude Haiku 4.5</option>
+            {modelOptions.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>
+            )}
+            {model !== "inherit" &&
+              !modelOptions.some((option) => option.value === model) && (
+                <option value={model}>
+                  {getModelOptionLabel(
+                    model,
+                    effectiveModelEngine ?? undefined,
+                    effectiveBuilderFallbackLabel,
+                  )}
+                </option>
+              )}
           </select>
         ) : null}
       </div>
@@ -367,11 +404,15 @@ function VisualMarkdownEditor({
   onChange,
   resourcePath,
   readOnly,
+  modelEngine,
+  builderFallbackLabel,
 }: {
   content: string;
   onChange: (md: string) => void;
   resourcePath: string;
   readOnly?: boolean;
+  modelEngine?: ModelEngineConfig | null;
+  builderFallbackLabel?: string;
 }) {
   const parsed = useMemo(() => parseFrontmatter(content), [content]);
   const frontmatterRef = useRef(parsed);
@@ -393,6 +434,8 @@ function VisualMarkdownEditor({
           resourcePath={resourcePath}
           frontmatter={parsed}
           readOnly={readOnly}
+          modelEngine={modelEngine}
+          builderFallbackLabel={builderFallbackLabel}
           onChange={(updated) => {
             if (readOnly) return;
             frontmatterRef.current = updated;
@@ -569,6 +612,8 @@ export function ResourceEditor({
   onViewChange,
   hideToolbar,
   readOnly,
+  modelEngine,
+  builderFallbackLabel,
 }: ResourceEditorProps) {
   const [content, setContent] = useState(resource.content);
   const [internalView, setInternalView] = useState<"visual" | "code">(
@@ -687,6 +732,8 @@ export function ResourceEditor({
               onChange={handleChange}
               resourcePath={resource.path}
               readOnly={readOnly}
+              modelEngine={modelEngine}
+              builderFallbackLabel={builderFallbackLabel}
             />
           </div>
         ) : (

package/src/app/resources/ResourcesPanel.spec.ts

@@ -24,6 +24,11 @@ const storageMocks = vi.hoisted(() => ({
   dismiss: null as (() => void) | null,
   setup: null as (() => void) | null,
 }));
+const modelCatalogMocks = vi.hoisted(() => ({ load: vi.fn() }));
+
+vi.mock("@agent-native/core/client/use-chat-models", () => ({
+  loadChatModelCatalog: modelCatalogMocks.load,
+}));
 
 vi.mock("@agent-native/core/client/uploads/use-file-upload-status", () => ({
   useFileUploadStatus: () => ({
@@ -92,6 +97,7 @@ vi.mock("../chat/FileStorageSetupPopover.js", () => ({
   },
 }));
 
+import type { ModelEngineConfig } from "@agent-native/core/agent/model-version";
 import type { TreeNode } from "@agent-native/core/client/resources/use-resources";
 
 import { isResourceRowReadOnly } from "./ResourceSettingsGroups.js";
@@ -462,6 +468,11 @@ describe("ResourcesPanel storage retries", () => {
     storageMocks.retry = null;
     storageMocks.dismiss = null;
     storageMocks.setup = null;
+    modelCatalogMocks.load.mockReset();
+    modelCatalogMocks.load.mockResolvedValue({
+      state: "unavailable",
+      enginesUnavailable: true,
+    });
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -476,6 +487,7 @@ describe("ResourcesPanel storage retries", () => {
 
   function renderPanel(
     resourceFilter: "instructions" | "agents" = "instructions",
+    modelEngine?: ModelEngineConfig | null,
   ) {
     act(() =>
       root.render(
@@ -484,6 +496,7 @@ describe("ResourcesPanel storage retries", () => {
           showOnlyRequestedScope: true,
           resourceFilter,
           showMcpServers: false,
+          modelEngine,
         }),
       ),
     );
@@ -761,8 +774,17 @@ describe("ResourcesPanel storage retries", () => {
     ).toBe("current.png");
   });
 
-  it("offers the gateway-compatible Sonnet model when creating custom agents", () => {
-    renderPanel("agents");
+  it("offers the current Claude models when creating custom agents", () => {
+    renderPanel("agents", {
+      name: "anthropic",
+      label: "Anthropic",
+      defaultModel: "claude-sonnet-5-5",
+      supportedModels: [
+        "claude-haiku-5-5",
+        "claude-sonnet-5-5",
+        "claude-fable-5",
+      ],
+    });
     const addAgent = Array.from(document.querySelectorAll("button")).find(
       (button) => button.textContent?.includes("Add agent"),
     );
@@ -784,10 +806,70 @@ describe("ResourcesPanel storage retries", () => {
     const modelPicker = document.querySelector("select")!;
     expect(Array.from(modelPicker.options)).toContainEqual(
       expect.objectContaining({
-        value: "claude-sonnet-5",
-        textContent: "Claude Sonnet 5",
+        value: "claude-sonnet-5-5",
+        textContent: "Claude Sonnet 5.5",
       }),
     );
+    expect(Array.from(modelPicker.options)).toContainEqual(
+      expect.objectContaining({
+        value: "claude-haiku-5-5",
+        textContent: "Claude Haiku 5.5",
+      }),
+    );
+    expect(Array.from(modelPicker.options)).toContainEqual(
+      expect.objectContaining({
+        value: "claude-fable-5",
+        textContent: "Claude Fable 5",
+      }),
+    );
+  });
+
+  it("loads the model catalog only after opening the custom-agent form", async () => {
+    modelCatalogMocks.load.mockResolvedValue({
+      state: "available",
+      groups: [],
+      modelEngines: {},
+      currentModelEngine: {
+        name: "anthropic",
+        label: "Anthropic",
+        defaultModel: "claude-sonnet-5-5",
+        supportedModels: ["claude-haiku-5-5", "claude-sonnet-5-5"],
+        selectableModels: ["claude-haiku-5-5", "claude-sonnet-5-5"],
+      },
+      defaultModel: "claude-sonnet-5-5",
+      loadLiveGroups: async () => null,
+    });
+    renderPanel("agents");
+    expect(modelCatalogMocks.load).not.toHaveBeenCalled();
+
+    const addAgent = Array.from(document.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add agent"),
+    );
+    expect(addAgent).toBeDefined();
+    act(() => addAgent!.click());
+    const createAgent = Array.from(document.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Create Custom Agent"),
+    );
+    expect(createAgent).toBeDefined();
+    act(() => createAgent!.click());
+    expect(modelCatalogMocks.load).not.toHaveBeenCalled();
+
+    const fillForm = Array.from(document.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Fill Form"),
+    );
+    expect(fillForm).toBeDefined();
+    await act(async () => {
+      fillForm!.click();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(modelCatalogMocks.load).toHaveBeenCalledOnce();
+    expect(
+      Array.from(document.querySelector("select")!.options).map(
+        (option) => option.value,
+      ),
+    ).toContain("claude-haiku-5-5");
   });
 });