@marimo-team/islands 0.23.9-dev9 → 0.23.10-dev0

package/dist/{toDate-ZVVIBmdk.js → toDate-x-WRDCH7.js}

@@ -6,7 +6,7 @@ import { _ as Logger } from "./button-C5K9fIPF.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-7O0YWlE5.js";
+import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-DHIrRQOe.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{useAsyncData-C008zUPi.js → useAsyncData-iRgKDT5s.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { w as useEvent_default } from "./useTheme-7O0YWlE5.js";
+import { T as useEvent_default } from "./useTheme-DHIrRQOe.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-BrA3_n61.js → useDeepCompareMemoize-CkQ57VS2.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { C as dequal } from "./useTheme-7O0YWlE5.js";
+import { w as dequal } from "./useTheme-DHIrRQOe.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useLifecycle-BNaoJ5a4.js → useLifecycle-BBO9PIph.js}

@@ -4,7 +4,7 @@ import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-7O0YWlE5.js";
+import { b as atom, v as useSetAtom } from "./useTheme-DHIrRQOe.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-7O0YWlE5.js → useTheme-DHIrRQOe.js}

@@ -556,6 +556,7 @@ const UserConfigSchema = looseObject({
   completion: object({
     activate_on_typing: boolean().prefault(true),
     signature_hint_on_typing: boolean().prefault(false),
+    auto_close_pairs: boolean().prefault(true),
     copilot: union([boolean(), _enum([
       "github",
       "codeium",
@@ -605,7 +606,9 @@ const UserConfigSchema = looseObject({
   }).prefault({}),
   package_management: looseObject({ manager: _enum(PackageManagerNames).prefault("pip") }).prefault({}),
   ai: looseObject({
+    enabled: boolean().prefault(true),
     rules: string().prefault(""),
+    max_tokens: number().int().positive().nullable().optional(),
     mode: _enum(COPILOT_MODES).prefault("manual"),
     inline_tooltip: boolean().prefault(false),
     open_ai: AiConfigSchema.optional(),
@@ -640,7 +643,8 @@ const UserConfigSchema = looseObject({
   }).prefault(() => ({})),
   sharing: looseObject({
     html: boolean().optional(),
-    wasm: boolean().optional()
+    wasm: boolean().optional(),
+    molab: boolean().optional()
   }).optional(),
   mcp: looseObject({ presets: array(_enum(["marimo", "context7"])).optional() }).optional().prefault({})
 }).partial().prefault(() => ({
@@ -704,13 +708,21 @@ function useResolvedMarimoConfig() {
 function getResolvedMarimoConfig() {
   return store.get(resolvedMarimoConfigAtom);
 }
-const aiEnabledAtom = atom((e) => isAiEnabled(e(resolvedMarimoConfigAtom)));
+atom((e) => isAiEnabled(e(resolvedMarimoConfigAtom))), atom((e) => isAiModelConfigured(e(resolvedMarimoConfigAtom)));
+const aiFeaturesEnabledAtom = atom((e) => isAiFeatureEnabled(e(resolvedMarimoConfigAtom)));
 atom((e) => e(resolvedMarimoConfigAtom).display.code_editor_font_size);
 const localeAtom = atom((e) => e(resolvedMarimoConfigAtom).display.locale);
 function isAiEnabled(e) {
+  var _a;
+  return ((_a = e.ai) == null ? void 0 : _a.enabled) !== false;
+}
+function isAiModelConfigured(e) {
   var _a, _b, _c, _d, _e, _f;
   return !!((_b = (_a = e.ai) == null ? void 0 : _a.models) == null ? void 0 : _b.chat_model) || !!((_d = (_c = e.ai) == null ? void 0 : _c.models) == null ? void 0 : _d.edit_model) || !!((_f = (_e = e.ai) == null ? void 0 : _e.models) == null ? void 0 : _f.autocomplete_model);
 }
+function isAiFeatureEnabled(e) {
+  return isAiEnabled(e) && isAiModelConfigured(e);
+}
 const appConfigAtom = atom(parseAppConfig({}));
 atom((e) => e(appConfigAtom).width), atom((e) => {
   var _a, _b;
@@ -777,28 +789,29 @@ function useTheme() {
   return e[1] === j ? M = e[2] : (M = { theme: j }, e[1] = j, e[2] = M), M;
 }
 export {
-  dequal as C,
-  getBuildingBlocks as S,
-  useSetAtom as _,
+  getBuildingBlocks as C,
+  buildStore as S,
+  useEvent_default as T,
+  useAtomValue as _,
   getResolvedMarimoConfig as a,
-  createStore as b,
-  AppConfigSchema as c,
-  useJotaiEffect as d,
-  waitFor as f,
-  useAtomValue as g,
-  useAtom as h,
+  atom as b,
+  useResolvedMarimoConfig as c,
+  store as d,
+  useJotaiEffect as f,
+  useAtom as g,
+  Provider as h,
   autoInstantiateAtom as i,
-  createDeepEqualAtom as l,
-  Provider as m,
+  AppConfigSchema as l,
+  isIslands as m,
   useTheme as n,
   localeAtom as o,
-  isIslands as p,
-  aiEnabledAtom as r,
-  useResolvedMarimoConfig as s,
+  waitFor as p,
+  aiFeaturesEnabledAtom as r,
+  resolvedMarimoConfigAtom as s,
   resolvedThemeAtom as t,
-  store as u,
-  useStore as v,
-  useEvent_default as w,
-  buildStore as x,
-  atom as y
+  createDeepEqualAtom as u,
+  useSetAtom as v,
+  dequal as w,
+  createStore as x,
+  useStore as y
 };

package/dist/{vega-component-DJNmOdUj.js → vega-component-Dq-SH463.js}

@@ -2,23 +2,23 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-ZVVIBmdk.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-x-WRDCH7.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
 import "./zod-CoBiJ5v4.js";
 import { n as ErrorBanner } from "./error-banner-5bz0L9hS.js";
 import { t as Tooltip } from "./tooltip-C5FYOpQc.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-7O0YWlE5.js";
+import { T as useEvent_default, n as useTheme } from "./useTheme-DHIrRQOe.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-DQ5qjo_Q.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-DHxc-FdY.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BWLPpjKK.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";
 import "./defaultLocale-u-3osm0P.js";
 import "./defaultLocale-BoHTsDG6.js";
-import { t as useAsyncData } from "./useAsyncData-C008zUPi.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BrA3_n61.js";
+import { t as useAsyncData } from "./useAsyncData-iRgKDT5s.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CkQ57VS2.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.9-dev9",
+  "version": "0.23.10-dev0",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -4,46 +4,51 @@ import type { AiModel } from "@marimo-team/llm-info";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { UserConfig } from "@/core/config/config-schema";
 
-// Mock the models.json import
 vi.mock("@marimo-team/llm-info/models.json", () => {
-  const models: AiModel[] = [
-    {
-      name: "GPT-4",
-      model: "gpt-4",
-      description: "OpenAI GPT-4 model",
-      providers: ["openai"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-    {
-      name: "Claude 3",
-      model: "claude-3-sonnet",
-      description: "Anthropic Claude 3 Sonnet",
-      providers: ["anthropic"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-    {
-      name: "Gemini Pro",
-      model: "gemini-pro",
-      description: "Google Gemini Pro model",
-      providers: ["google"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-    {
-      name: "Ollama Model",
-      model: "llama2",
-      description: "Ollama Llama 2 model",
-      providers: ["ollama"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-  ];
-
-  return {
-    models: models,
+  const make = (
+    overrides: Partial<AiModel> & Pick<AiModel, "name" | "model">,
+  ): AiModel => ({
+    description: "",
+    roles: ["chat", "edit"],
+    capabilities: [],
+    input_types: [],
+    output_types: [],
+    release_date: "1970-01-01",
+    ...overrides,
+  });
+
+  const models: Record<string, AiModel[]> = {
+    openai: [
+      make({
+        name: "GPT-4",
+        model: "gpt-4",
+        description: "OpenAI GPT-4 model",
+      }),
+    ],
+    anthropic: [
+      make({
+        name: "Claude 3",
+        model: "claude-3-sonnet",
+        description: "Anthropic Claude 3 Sonnet",
+      }),
+    ],
+    google: [
+      make({
+        name: "Gemini Pro",
+        model: "gemini-pro",
+        description: "Google Gemini Pro model",
+      }),
+    ],
+    ollama: [
+      make({
+        name: "Ollama Model",
+        model: "llama2",
+        description: "Ollama Llama 2 model",
+      }),
+    ],
   };
+
+  return { models };
 });
 
 // Must import after mock

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

@@ -305,7 +305,7 @@ const AiModelDropdownItem = ({
       <div className="flex flex-row w-full items-center">
         <span>{model.name}</span>
         <div className="ml-auto">
-          {model.thinking && (
+          {model.capabilities.includes("thinking") && (
             <Tooltip content="Reasoning model">
               <BrainIcon
                 className={`h-5 w-5 rounded-md p-1 ${getTagColour("thinking")}`}
@@ -362,7 +362,7 @@ export const AiModelInfoDisplay = ({
         </div>
       )}
 
-      {model.thinking && (
+      {model.capabilities.includes("thinking") && (
         <div className="flex items-center gap-2">
           <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse" />
           <span className="text-xs text-muted-foreground">

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

@@ -509,7 +509,7 @@ const ModelInfoCard = ({ model }: { model: AiModel }) => {
         <Tooltip content="Custom model">
           {model.custom && <BotIcon className="h-4 w-4" />}
         </Tooltip>
-        {model.thinking && (
+        {model.capabilities.includes("thinking") && (
           <div
             className={cn(
               "flex items-center gap-1 rounded px-1 py-0.5 w-fit",
@@ -1253,6 +1253,13 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
   config,
   onSubmit,
 }) => {
+  // Tracked locally rather than derived from the field value so that clearing
+  // the input (a transient empty value, which commits `null`) does not disable
+  // the input mid-edit and force the user to re-tick the Override checkbox.
+  const [maxTokensEnabled, setMaxTokensEnabled] = useState(
+    config.ai?.max_tokens != null,
+  );
+
   return (
     <SettingGroup>
       <SettingSubtitle>AI Assistant</SettingSubtitle>
@@ -1279,6 +1286,71 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         )}
       />
 
+      <FormField
+        control={form.control}
+        name="ai.max_tokens"
+        render={({ field }) => {
+          return (
+            <div className="flex flex-col gap-y-1">
+              <div className="flex items-center gap-x-2">
+                <FormItem className={formItemClasses}>
+                  <FormLabel className="font-normal">
+                    Max output tokens
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      data-testid="ai-max-tokens-input"
+                      type="number"
+                      min={1}
+                      disabled={!maxTokensEnabled}
+                      className="w-28 h-6"
+                      value={field.value ?? (maxTokensEnabled ? "" : 32768)}
+                      onChange={(e) => {
+                        const n = Number.parseInt(e.target.value, 10);
+                        field.onChange(Number.isFinite(n) && n > 0 ? n : null);
+                      }}
+                    />
+                  </FormControl>
+                </FormItem>
+                <FormItem className={formItemClasses}>
+                  <Checkbox
+                    data-testid="ai-max-tokens-checkbox"
+                    checked={maxTokensEnabled}
+                    onCheckedChange={(checked) => {
+                      const isChecked = checked === true;
+                      setMaxTokensEnabled(isChecked);
+                      // null signals delete to the server; cast because
+                      // UserConfig (OpenAPI-derived) types max_tokens as
+                      // `number | undefined`, but zod accepts `null`.
+                      const next = (
+                        isChecked ? (field.value ?? 32768) : null
+                      ) as number | undefined;
+                      // shouldDirty: true forces RHF to keep this in
+                      // dirtyFields even when `next` happens to equal the
+                      // form's defaultValue (e.g. untick → tick when disk
+                      // started with 32768). Otherwise getDirtyValues
+                      // would skip it and the save body would be empty.
+                      form.setValue("ai.max_tokens", next, {
+                        shouldDirty: true,
+                        shouldTouch: true,
+                      });
+                      onSubmit(form.getValues());
+                    }}
+                  />
+                  <FormLabel className="font-normal">Override</FormLabel>
+                </FormItem>
+              </div>
+
+              <FormDescription>
+                Each provider sets its own max output tokens (Anthropic uses a
+                recommended default). Adjust to control costs or enable more
+                output.
+              </FormDescription>
+            </div>
+          );
+        }}
+      />
+
       <FormErrorsBanner />
       <ModelSelector
         label="Chat Model"
@@ -1777,6 +1849,38 @@ export type AiSettingsSubTab =
   | "ai-models"
   | "mcp";
 
+const AiEnabledConfig: React.FC<AiConfigProps> = ({ form, config }) => {
+  return (
+    <SettingGroup>
+      <FormField
+        control={form.control}
+        name="ai.enabled"
+        render={({ field }) => (
+          <div className="flex flex-col gap-y-1">
+            <FormItem className={formItemClasses}>
+              <FormLabel className="font-normal">Enable AI features</FormLabel>
+              <FormControl>
+                <Checkbox
+                  data-testid="ai-enabled-checkbox"
+                  checked={field.value !== false}
+                  onCheckedChange={(checked) =>
+                    field.onChange(checked === true)
+                  }
+                />
+              </FormControl>
+              <IsOverridden userConfig={config} name="ai.enabled" />
+            </FormItem>
+            <FormDescription>
+              When disabled, AI actions and panels are hidden from the marimo
+              UI.
+            </FormDescription>
+          </div>
+        )}
+      />
+    </SettingGroup>
+  );
+};
+
 export const AiConfig: React.FC<AiConfigProps> = ({
   form,
   config,
@@ -1785,18 +1889,30 @@ export const AiConfig: React.FC<AiConfigProps> = ({
   // MCP is not supported in WASM
   const wasm = isWasm();
   const [activeTab, setActiveTab] = useAtom(aiSettingsSubTabAtom);
+  const aiEnabled = useWatch({
+    control: form.control,
+    name: "ai.enabled",
+  });
+  const activeVisibleTab =
+    aiEnabled === false && activeTab !== "ai-features"
+      ? "ai-features"
+      : activeTab;
 
   return (
     <Tabs
-      value={activeTab}
+      value={activeVisibleTab}
       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>
-        <TabsTrigger value="ai-models">AI Models</TabsTrigger>
-        {!wasm && <TabsTrigger value="mcp">MCP</TabsTrigger>}
+        {aiEnabled !== false && (
+          <>
+            <TabsTrigger value="ai-providers">AI Providers</TabsTrigger>
+            <TabsTrigger value="ai-models">AI Models</TabsTrigger>
+            {!wasm && <TabsTrigger value="mcp">MCP</TabsTrigger>}
+          </>
+        )}
       </TabsList>
 
       <TabsContent value="ai-features">
@@ -1805,18 +1921,33 @@ export const AiConfig: React.FC<AiConfigProps> = ({
           config={config}
           onSubmit={onSubmit}
         />
-        <AiAssistConfig form={form} config={config} onSubmit={onSubmit} />
-      </TabsContent>
-      <TabsContent value="ai-providers">
-        <AiProvidersConfig form={form} config={config} onSubmit={onSubmit} />
-      </TabsContent>
-      <TabsContent value="ai-models">
-        <AiModelDisplayConfig form={form} config={config} onSubmit={onSubmit} />
+        <AiEnabledConfig form={form} config={config} onSubmit={onSubmit} />
+        {aiEnabled !== false && (
+          <AiAssistConfig form={form} config={config} onSubmit={onSubmit} />
+        )}
       </TabsContent>
-      {!wasm && (
-        <TabsContent value="mcp">
-          <MCPConfig form={form} onSubmit={onSubmit} />
-        </TabsContent>
+      {aiEnabled !== false && (
+        <>
+          <TabsContent value="ai-providers">
+            <AiProvidersConfig
+              form={form}
+              config={config}
+              onSubmit={onSubmit}
+            />
+          </TabsContent>
+          <TabsContent value="ai-models">
+            <AiModelDisplayConfig
+              form={form}
+              config={config}
+              onSubmit={onSubmit}
+            />
+          </TabsContent>
+          {!wasm && (
+            <TabsContent value="mcp">
+              <MCPConfig form={form} onSubmit={onSubmit} />
+            </TabsContent>
+          )}
+        </>
       )}
     </Tabs>
   );

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

@@ -503,6 +503,42 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="completion.auto_close_pairs"
+                render={({ field }) => (
+                  <div className="flex flex-col space-y-1">
+                    <FormItem className={formItemClasses}>
+                      <FormLabel className="font-normal">
+                        Auto-close pairs
+                      </FormLabel>
+                      <FormControl>
+                        <Checkbox
+                          data-testid="auto-close-pairs-checkbox"
+                          checked={field.value ?? true}
+                          disabled={field.disabled}
+                          onCheckedChange={(checked) => {
+                            field.onChange(Boolean(checked));
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      <IsOverridden
+                        userConfig={config}
+                        name="completion.auto_close_pairs"
+                      />
+                    </FormItem>
+                    <FormDescription>
+                      Automatically insert closing brackets{" "}
+                      <code className="text-xs">{"()"}</code>,{" "}
+                      <code className="text-xs">{"[]"}</code>,{" "}
+                      <code className="text-xs">{"{}"}</code>, and quotes{" "}
+                      <code className="text-xs">{`""`}</code>,{" "}
+                      <code className="text-xs">{`''`}</code> when opening one.
+                    </FormDescription>
+                  </div>
+                )}
+              />
             </SettingGroup>
             <SettingGroup title="Language Servers">
               <FormDescription>
@@ -1319,7 +1355,7 @@ export const UserConfigForm: React.FC = () => {
     <Form {...form}>
       <form
         ref={formElement}
-        onChange={form.handleSubmit(onSubmit)}
+        onChange={form.handleSubmit((values) => onSubmit(values))}
         className="flex text-pretty overflow-hidden"
       >
         <Tabs