@marimo-team/islands 0.19.7-dev10 → 0.19.7-dev15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.7-dev10",
+  "version": "0.19.7-dev15",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/ai/__tests__/ai-utils.test.ts

@@ -61,14 +61,14 @@ describe("ai-utils", () => {
   describe("getConfiguredProvider", () => {
     it("should return undefined when no AI config", () => {
       const config: UserConfig = {} as UserConfig;
-      expect(getConfiguredProvider(config)).toBeUndefined();
+      expect(getConfiguredProvider(config.ai)).toBeUndefined();
     });
 
     it("should return undefined when AI config has no credentials", () => {
       const config: UserConfig = {
         ai: {},
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBeUndefined();
+      expect(getConfiguredProvider(config.ai)).toBeUndefined();
     });
 
     it("should return openai when OpenAI API key is set", () => {
@@ -77,7 +77,7 @@ describe("ai-utils", () => {
           open_ai: { api_key: "sk-test" },
         },
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBe("openai");
+      expect(getConfiguredProvider(config.ai)).toBe("openai");
     });
 
     it("should return anthropic when Anthropic API key is set", () => {
@@ -86,7 +86,7 @@ describe("ai-utils", () => {
           anthropic: { api_key: "sk-ant-test" },
         },
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBe("anthropic");
+      expect(getConfiguredProvider(config.ai)).toBe("anthropic");
     });
 
     it("should return google when Google API key is set", () => {
@@ -95,7 +95,7 @@ describe("ai-utils", () => {
           google: { api_key: "google-key" },
         },
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBe("google");
+      expect(getConfiguredProvider(config.ai)).toBe("google");
     });
 
     it("should return ollama when Ollama base URL is set", () => {
@@ -104,7 +104,7 @@ describe("ai-utils", () => {
           ollama: { base_url: "http://localhost:11434" },
         },
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBe("ollama");
+      expect(getConfiguredProvider(config.ai)).toBe("ollama");
     });
 
     it("should return azure only when both API key and base URL are set", () => {
@@ -113,7 +113,7 @@ describe("ai-utils", () => {
           azure: { api_key: "azure-key", base_url: "https://azure.com" },
         },
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBe("azure");
+      expect(getConfiguredProvider(config.ai)).toBe("azure");
     });
 
     it("should return undefined for azure with only API key", () => {
@@ -122,7 +122,7 @@ describe("ai-utils", () => {
           azure: { api_key: "azure-key" },
         },
       } as UserConfig;
-      expect(getConfiguredProvider(config)).toBeUndefined();
+      expect(getConfiguredProvider(config.ai)).toBeUndefined();
     });
 
     it("should return custom provider when configured", () => {
@@ -133,14 +133,14 @@ describe("ai-utils", () => {
           },
         },
       } as unknown as UserConfig;
-      expect(getConfiguredProvider(config)).toBe("my_provider");
+      expect(getConfiguredProvider(config.ai)).toBe("my_provider");
     });
   });
 
   describe("getRecommendedModel", () => {
     it("should return undefined when no provider is configured", () => {
       const config: UserConfig = {} as UserConfig;
-      expect(getRecommendedModel(config)).toBeUndefined();
+      expect(getRecommendedModel(config.ai)).toBeUndefined();
     });
 
     it("should return openai model when OpenAI is configured", () => {
@@ -149,7 +149,7 @@ describe("ai-utils", () => {
           open_ai: { api_key: "sk-test" },
         },
       } as UserConfig;
-      expect(getRecommendedModel(config)).toBe("openai/gpt-4");
+      expect(getRecommendedModel(config.ai)).toBe("openai/gpt-4");
     });
 
     it("should return anthropic model when Anthropic is configured", () => {
@@ -158,7 +158,7 @@ describe("ai-utils", () => {
           anthropic: { api_key: "sk-ant-test" },
         },
       } as UserConfig;
-      expect(getRecommendedModel(config)).toBe("anthropic/claude-3-sonnet");
+      expect(getRecommendedModel(config.ai)).toBe("anthropic/claude-3-sonnet");
     });
 
     it("should return google model when Google is configured", () => {
@@ -167,7 +167,7 @@ describe("ai-utils", () => {
           google: { api_key: "google-key" },
         },
       } as UserConfig;
-      expect(getRecommendedModel(config)).toBe("google/gemini-pro");
+      expect(getRecommendedModel(config.ai)).toBe("google/gemini-pro");
     });
 
     it("should return ollama model when Ollama is configured", () => {
@@ -176,7 +176,7 @@ describe("ai-utils", () => {
           ollama: { base_url: "http://localhost:11434" },
         },
       } as UserConfig;
-      expect(getRecommendedModel(config)).toBe("ollama/llama2");
+      expect(getRecommendedModel(config.ai)).toBe("ollama/llama2");
     });
   });
 
@@ -194,7 +194,7 @@ describe("ai-utils", () => {
         },
       } as unknown as UserConfig;
 
-      const result = autoPopulateModels(values);
+      const result = autoPopulateModels(values.ai);
 
       expect(result.chatModel).toBeUndefined();
       expect(result.editModel).toBeUndefined();
@@ -205,7 +205,7 @@ describe("ai-utils", () => {
         ai: {},
       } as UserConfig;
 
-      const result = autoPopulateModels(values);
+      const result = autoPopulateModels(values.ai);
 
       expect(result.chatModel).toBeUndefined();
       expect(result.editModel).toBeUndefined();
@@ -218,7 +218,7 @@ describe("ai-utils", () => {
         },
       } as UserConfig;
 
-      const result = autoPopulateModels(values);
+      const result = autoPopulateModels(values.ai);
 
       expect(result.chatModel).toBe("openai/gpt-4");
       expect(result.editModel).toBe("openai/gpt-4");
@@ -236,7 +236,7 @@ describe("ai-utils", () => {
         },
       } as unknown as UserConfig;
 
-      const result = autoPopulateModels(values);
+      const result = autoPopulateModels(values.ai);
 
       expect(result.chatModel).toBe("openai/gpt-4");
       expect(result.editModel).toBeUndefined();
@@ -254,7 +254,7 @@ describe("ai-utils", () => {
         },
       } as unknown as UserConfig;
 
-      const result = autoPopulateModels(values);
+      const result = autoPopulateModels(values.ai);
 
       expect(result.chatModel).toBeUndefined();
       expect(result.editModel).toBe("openai/gpt-4");
@@ -267,7 +267,7 @@ describe("ai-utils", () => {
         },
       } as UserConfig;
 
-      const result = autoPopulateModels(values);
+      const result = autoPopulateModels(values.ai);
 
       expect(result.chatModel).toBe("anthropic/claude-3-sonnet");
       expect(result.editModel).toBe("anthropic/claude-3-sonnet");

package/src/components/ai/ai-model-dropdown.tsx

@@ -19,6 +19,7 @@ import {
 } from "@/core/ai/ids/ids";
 import { type AiModel, AiModelRegistry } from "@/core/ai/model-registry";
 import { aiAtom, completionAtom } from "@/core/config/config";
+import { useOpenSettingsToTab } from "../app-config/state";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -62,6 +63,7 @@ export const AIModelDropdown = ({
   const ai = useAtomValue(aiAtom);
   const completion = useAtomValue(completionAtom);
   const { saveModelChange } = useModelChange();
+  const { handleClick } = useOpenSettingsToTab();
 
   // Only include autocompleteModel if copilot is set to "custom"
   const autocompleteModel =
@@ -188,16 +190,12 @@ export const AIModelDropdown = ({
         {showAddCustomModelDocs && (
           <>
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="flex items-center gap-2">
-              <a
-                className="flex items-center gap-1"
-                href="https://links.marimo.app/custom-models"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <CircleHelpIcon className="h-3 w-3" />
-                <span>How to add a custom model</span>
-              </a>
+            <DropdownMenuItem
+              className="h-7 flex items-center gap-2"
+              onClick={() => handleClick("ai", "ai-models")}
+            >
+              <CircleHelpIcon className="h-3 w-3" />
+              <span className="cursor-pointer text-link">Add custom model</span>
             </DropdownMenuItem>
           </>
         )}

package/src/components/ai/ai-utils.ts

@@ -32,18 +32,16 @@ const CREDENTIAL_CHECKERS: Record<KnownProviderId, CredentialChecker> = {
  * Returns the first configured provider based on credentials.
  */
 export function getConfiguredProvider(
-  config: UserConfig,
+  config: UserConfig["ai"],
 ): ProviderId | undefined {
-  const ai = config.ai;
-
   for (const provider of KNOWN_PROVIDERS) {
-    if (CREDENTIAL_CHECKERS[provider](ai)) {
+    if (CREDENTIAL_CHECKERS[provider](config)) {
       return provider;
     }
   }
 
   // Check custom providers
-  const customProviders = ai?.custom_providers;
+  const customProviders = config?.custom_providers;
   if (customProviders) {
     const firstCustomProvider = Object.entries(customProviders).find(
       ([_, providerConfig]) => providerConfig?.base_url,
@@ -54,7 +52,9 @@ export function getConfiguredProvider(
   }
 }
 
-export function getRecommendedModel(config: UserConfig): string | undefined {
+export function getRecommendedModel(
+  config: UserConfig["ai"],
+): string | undefined {
   const provider = getConfiguredProvider(config);
   if (!provider) {
     return undefined;
@@ -73,14 +73,16 @@ export interface AutoPopulateResult {
  *
  * @param values - The full form values
  */
-export function autoPopulateModels(values: UserConfig): AutoPopulateResult {
+export function autoPopulateModels(
+  values: UserConfig["ai"],
+): AutoPopulateResult {
   const result: AutoPopulateResult = {
     chatModel: undefined,
     editModel: undefined,
   };
 
-  const needsChatModel = !values.ai?.models?.chat_model;
-  const needsEditModel = !values.ai?.models?.edit_model;
+  const needsChatModel = !values?.models?.chat_model;
+  const needsEditModel = !values?.models?.edit_model;
 
   if (!needsChatModel && !needsEditModel) {
     return result;

package/src/components/app-config/__tests__/get-dirty-values.test.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, test } from "vitest";
-import { getDirtyValues } from "../user-config-form";
+import type { UserConfig } from "@/core/config/config-schema";
+import { applyManualInjections, getDirtyValues } from "../user-config-form";
 
 describe("getDirtyValues", () => {
   test("extracts only dirty fields", () => {
@@ -71,4 +72,49 @@ describe("getDirtyValues", () => {
     expect(result).toEqual({ display: { theme: "dark" } });
     expect(result).not.toHaveProperty("runtime");
   });
+
+  test("applyManualInjections injects touched ai model fields", () => {
+    const values = {
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    } as UserConfig;
+    const dirtyValues: Partial<UserConfig> = {};
+    const touchedFields = {
+      ai: { models: { displayed_models: true } },
+    };
+
+    applyManualInjections({ values, dirtyValues, touchedFields });
+
+    expect(dirtyValues).toEqual({
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    });
+  });
+
+  test("applyManualInjections skips when field not touched", () => {
+    const values = {
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    } as UserConfig;
+    const dirtyValues: Partial<UserConfig> = {};
+    const touchedFields = {
+      ai: { models: { displayed_models: false } },
+    };
+
+    applyManualInjections({ values, dirtyValues, touchedFields });
+
+    expect(dirtyValues).toEqual({});
+  });
 });

package/src/components/app-config/ai-config.tsx

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useAtom } from "jotai";
 import {
   BotIcon,
   BrainIcon,
   ChevronRightIcon,
-  InfoIcon,
   PlusIcon,
   Trash2Icon,
 } from "lucide-react";
@@ -61,7 +61,6 @@ import {
 } from "../ui/accordion";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
-import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { Label } from "../ui/label";
 import { ExternalLink } from "../ui/links";
 import {
@@ -79,6 +78,7 @@ import { AWS_REGIONS } from "./constants";
 import { IncorrectModelId } from "./incorrect-model-id";
 import { IsOverridden } from "./is-overridden";
 import { MCPConfig } from "./mcp-config";
+import { aiSettingsSubTabAtom } from "./state";
 
 interface AiConfigProps {
   form: UseFormReturn<UserConfig>;
@@ -234,9 +234,7 @@ interface ModelSelectorProps {
   config: UserConfig;
   name: FieldPath<UserConfig>;
   placeholder: string;
-  testId: string;
   description?: React.ReactNode;
-  disabled?: boolean;
   label: string;
   forRole: SupportedRole;
   onSubmit: (values: UserConfig) => void;
@@ -247,9 +245,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   config,
   name,
   placeholder,
-  testId,
   description,
-  disabled = false,
   label,
   forRole,
   onSubmit,
@@ -276,34 +272,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 placeholder={placeholder}
                 onSelect={selectModel}
                 triggerClassName="text-sm"
-                customDropdownContent={
-                  <>
-                    <DropdownMenuSeparator />
-                    <p className="px-2 py-1.5 text-sm text-muted-secondary flex items-center gap-1">
-                      Enter a custom model
-                      <Tooltip content="Models should include the provider prefix, e.g. 'openai/gpt-4o'">
-                        <InfoIcon className="h-3 w-3" />
-                      </Tooltip>
-                    </p>
-                    <div className="px-2 py-1">
-                      <Input
-                        data-testid={testId}
-                        className="w-full border-border shadow-none focus-visible:shadow-xs"
-                        placeholder={placeholder}
-                        {...field}
-                        value={asStringOrEmpty(field.value)}
-                        disabled={disabled}
-                        onKeyDown={Events.stopPropagation()}
-                      />
-                      {value && (
-                        <IncorrectModelId
-                          value={value}
-                          includeSuggestion={false}
-                        />
-                      )}
-                    </div>
-                  </>
-                }
                 forRole={forRole}
               />
             </FormControl>
@@ -432,7 +400,6 @@ const renderCopilotProvider = ({
         config={config}
         name="ai.models.autocomplete_model"
         placeholder="ollama/qwen2.5-coder:1.5b"
-        testId="custom-model-input"
         description="Model to use for code completion when using a custom provider."
         onSubmit={onSubmit}
         forRole="autocomplete"
@@ -1209,8 +1176,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
   config,
   onSubmit,
 }) => {
-  const isWasmRuntime = isWasm();
-
   return (
     <SettingGroup>
       <SettingSubtitle>AI Assistant</SettingSubtitle>
@@ -1244,8 +1209,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         config={config}
         name="ai.models.chat_model"
         placeholder={DEFAULT_AI_MODEL}
-        testId="ai-chat-model-input"
-        disabled={isWasmRuntime}
         description={
           <span>Model to use for chat conversations in the Chat panel.</span>
         }
@@ -1258,8 +1221,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         config={config}
         name="ai.models.edit_model"
         placeholder={DEFAULT_AI_MODEL}
-        testId="ai-edit-model-input"
-        disabled={isWasmRuntime}
         description={
           <span>
             Model to use for code editing with the{" "}
@@ -1270,18 +1231,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         onSubmit={onSubmit}
       />
 
-      <ul className="bg-muted p-2 rounded-md list-disc space-y-1 pl-6">
-        <li className="text-xs text-muted-secondary">
-          Models should include the provider name and model name separated by a
-          slash. For example, "anthropic/claude-3-5-sonnet-latest" or
-          "google/gemini-2.0-flash-exp"
-        </li>
-        <li className="text-xs text-muted-secondary">
-          Depending on the provider, we will use the respective API key and
-          additional configuration.
-        </li>
-      </ul>
-
       <FormField
         control={form.control}
         name="ai.rules"
@@ -1434,6 +1383,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
     form.setValue("ai.models.displayed_models", newModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
   });
@@ -1453,6 +1403,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
       form.setValue("ai.models.displayed_models", newModels, {
         shouldDirty: true,
+        shouldTouch: true,
       });
       onSubmit(form.getValues());
     },
@@ -1466,9 +1417,11 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
     );
     form.setValue("ai.models.displayed_models", newDisplayedModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     form.setValue("ai.models.custom_models", newModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
   });
@@ -1548,6 +1501,7 @@ export const AddModelForm: React.FC<{
 
     form.setValue("ai.models.custom_models", [newModel.id, ...customModels], {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
     resetForm();
@@ -1740,6 +1694,12 @@ const AddButton = ({
   );
 };
 
+export type AiSettingsSubTab =
+  | "ai-features"
+  | "ai-providers"
+  | "ai-models"
+  | "mcp";
+
 export const AiConfig: React.FC<AiConfigProps> = ({
   form,
   config,
@@ -1747,8 +1707,14 @@ export const AiConfig: React.FC<AiConfigProps> = ({
 }) => {
   // MCP is not supported in WASM
   const wasm = isWasm();
+  const [activeTab, setActiveTab] = useAtom(aiSettingsSubTabAtom);
+
   return (
-    <Tabs defaultValue="ai-features" className="flex-1">
+    <Tabs
+      value={activeTab}
+      onValueChange={(value) => setActiveTab(value as AiSettingsSubTab)}
+      className="flex-1"
+    >
       <TabsList className="mb-2">
         <TabsTrigger value="ai-features">AI Features</TabsTrigger>
         <TabsTrigger value="ai-providers">AI Providers</TabsTrigger>

package/src/components/app-config/state.ts

@@ -1,17 +1,27 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom, useSetAtom } from "jotai";
+import type { AiSettingsSubTab } from "./ai-config";
 import {
   activeUserConfigCategoryAtom,
   type SettingCategoryId,
 } from "./user-config-form";
 
+export const aiSettingsSubTabAtom = atom<AiSettingsSubTab>("ai-features");
+
 export const settingDialogAtom = atom<boolean>(false);
 
 export function useOpenSettingsToTab() {
   const setActiveCategory = useSetAtom(activeUserConfigCategoryAtom);
   const setSettingsDialog = useSetAtom(settingDialogAtom);
-  const handleClick = (tab: SettingCategoryId) => {
+  const setAiSubTab = useSetAtom(aiSettingsSubTabAtom);
+
+  // Note: If more settings categories need sub-tabs or deep-linking is required,
+  // consider using a different strategy like query params
+  const handleClick = (tab: SettingCategoryId, subTab?: AiSettingsSubTab) => {
     setActiveCategory(tab);
+    if (tab === "ai") {
+      setAiSubTab(subTab ?? "ai-features");
+    }
     setSettingsDialog(true);
   };
   return { handleClick };

package/src/components/app-config/user-config-form.tsx

@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldValues } from "react-hook-form";
+import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -95,6 +95,68 @@ export function getDirtyValues<T extends FieldValues>(
   return result;
 }
 
+type ManualInjector = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => void;
+
+const modelsAiInjection = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => {
+  dirtyValues.ai = {
+    ...dirtyValues.ai,
+    models: {
+      ...dirtyValues.ai?.models,
+      displayed_models: values.ai?.models?.displayed_models ?? [],
+      custom_models: values.ai?.models?.custom_models ?? [],
+    },
+  };
+};
+
+// Some fields (like AI model lists) have empty arrays as default values.
+// If a user explicitly clears them, RHF won't mark them dirty, so we use
+// touchedFields to force-include those values in the payload.
+const MANUAL_INJECT_ENTRIES = [
+  ["ai.models.displayed_models", modelsAiInjection],
+  ["ai.models.custom_models", modelsAiInjection],
+] as const satisfies readonly (readonly [
+  FieldPath<UserConfig>,
+  ManualInjector,
+])[];
+
+const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
+
+const isTouchedPath = (
+  touched: unknown,
+  path: FieldPath<UserConfig>,
+): boolean => {
+  if (!touched) {
+    return false;
+  }
+  let current: unknown = touched;
+  for (const segment of path.split(".")) {
+    if (typeof current !== "object" || current === null) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current === true;
+};
+
+export const applyManualInjections = (opts: {
+  values: UserConfig;
+  dirtyValues: Partial<UserConfig>;
+  touchedFields: unknown;
+}) => {
+  const { values, dirtyValues, touchedFields } = opts;
+  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
+    if (isTouchedPath(touchedFields, fieldPath)) {
+      injector(values, dirtyValues);
+    }
+  }
+};
+
 const categories = [
   {
     id: "editor",
@@ -181,7 +243,10 @@ export const UserConfigForm: React.FC = () => {
     defaultValues: config,
   });
 
-  const setAiModels = (values: UserConfig, dirtyAiConfig: UserConfig["ai"]) => {
+  const setAiModels = (
+    values: UserConfig["ai"],
+    dirtyAiConfig: UserConfig["ai"],
+  ) => {
     const { chatModel, editModel } = autoPopulateModels(values);
     if (chatModel || editModel) {
       dirtyAiConfig = {
@@ -207,13 +272,18 @@ export const UserConfigForm: React.FC = () => {
     // Only send values that were actually changed to avoid
     // overwriting backend values the form doesn't manage
     const dirtyValues = getDirtyValues(values, form.formState.dirtyFields);
+    applyManualInjections({
+      values,
+      dirtyValues,
+      touchedFields: form.formState.touchedFields,
+    });
     if (Object.keys(dirtyValues).length === 0) {
       return; // Nothing changed
     }
 
     // Auto-populate AI models when credentials are set, makes it easier to get started
     if (dirtyValues.ai) {
-      dirtyValues.ai = setAiModels(values, dirtyValues.ai);
+      dirtyValues.ai = setAiModels(values.ai, dirtyValues.ai);
     }
 
     await saveUserConfig({ config: dirtyValues }).then(() => {

package/src/components/chat/chat-panel.tsx

@@ -435,7 +435,11 @@ const ChatPanel = () => {
         title="Chat with AI"
         description="No AI provider configured or model selected"
         action={
-          <Button variant="outline" size="sm" onClick={() => handleClick("ai")}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleClick("ai", "ai-providers")}
+          >
             Edit AI settings
           </Button>
         }