@marimo-team/islands 0.23.9-dev34 → 0.23.9-dev37

package/dist/{useTheme-CK_R9Mn8.js → useTheme-DNcgchnA.js}

@@ -606,6 +606,7 @@ 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"),
@@ -706,13 +707,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;
@@ -796,7 +805,7 @@ export {
   useTheme as n,
   localeAtom as o,
   waitFor as p,
-  aiEnabledAtom as r,
+  aiFeaturesEnabledAtom as r,
   resolvedMarimoConfigAtom as s,
   resolvedThemeAtom as t,
   createDeepEqualAtom as u,

package/dist/{vega-component-ikfBfkZO.js → vega-component-7odw1pLZ.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-BeKbrOvs.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-DLCQY32Y.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 { T as useEvent_default, n as useTheme } from "./useTheme-CK_R9Mn8.js";
+import { T as useEvent_default, n as useTheme } from "./useTheme-DNcgchnA.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-BIKFEOlR.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-B7_JC7Ba.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-yp6n17kh.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-DJvAHUIC.js";
+import { t as useAsyncData } from "./useAsyncData-3f5sSgzf.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-Cu37j2QD.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-dev34",
+  "version": "0.23.9-dev37",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -1849,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,
@@ -1857,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">
@@ -1877,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/chat/chat-panel.tsx

@@ -51,7 +51,7 @@ import {
   FRONTEND_TOOL_REGISTRY,
 } from "@/core/ai/tools/registry";
 import { useCellActions } from "@/core/cells/cells";
-import { aiAtom, aiEnabledAtom } from "@/core/config/config";
+import { aiAtom, aiModelConfiguredAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { useRequestClient } from "@/core/network/requests";
 import { useRuntimeManager } from "@/core/runtime/config";
@@ -442,7 +442,7 @@ const PairWithAgentCallout: React.FC<{
 };
 
 const ChatPanel = () => {
-  const aiConfigured = useAtomValue(aiEnabledAtom);
+  const aiConfigured = useAtomValue(aiModelConfiguredAtom);
   const { handleClick } = useOpenSettingsToTab();
 
   if (!aiConfigured) {

package/src/components/data-table/__tests__/header-items.test.tsx

@@ -1,6 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { Column, SortingState } from "@tanstack/react-table";
+import type {
+  Column,
+  SortDirection,
+  SortingState,
+  Table,
+} from "@tanstack/react-table";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import {
@@ -8,7 +13,23 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { HideColumn } from "../header-items";
+import {
+  ColumnPinning,
+  ColumnWrapping,
+  CopyColumn,
+  DataType,
+  FormatOptions,
+  HideColumn,
+  Sorts,
+} from "../header-items";
+
+const renderInMenu = (node: React.ReactNode) =>
+  render(
+    <DropdownMenu open={true}>
+      <DropdownMenuTrigger />
+      <DropdownMenuContent>{node}</DropdownMenuContent>
+    </DropdownMenu>,
+  );
 
 describe("multi-column sorting logic", () => {
   // Extract the core sorting logic to test in isolation
@@ -167,14 +188,6 @@ describe("HideColumn", () => {
       toggleVisibility,
     }) as unknown as Column<unknown, unknown>;
 
-  const renderInMenu = (node: React.ReactNode) =>
-    render(
-      <DropdownMenu open={true}>
-        <DropdownMenuTrigger />
-        <DropdownMenuContent>{node}</DropdownMenuContent>
-      </DropdownMenu>,
-    );
-
   it("renders 'Hide column' when canHide is true", () => {
     renderInMenu(<HideColumn column={makeColumn()} />);
     expect(screen.getByText("Hide column")).toBeInTheDocument();
@@ -192,3 +205,200 @@ describe("HideColumn", () => {
     expect(toggleVisibility).toHaveBeenCalledWith(false);
   });
 });
+
+describe("DataType", () => {
+  const makeColumn = (dtype?: string) =>
+    ({
+      columnDef: { meta: dtype === undefined ? {} : { dtype } },
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders the dtype label when present", () => {
+    renderInMenu(<DataType column={makeColumn("int64")} />);
+    expect(screen.getByText("int64")).toBeInTheDocument();
+  });
+
+  it("returns null when dtype is absent", () => {
+    renderInMenu(<DataType column={makeColumn()} />);
+    expect(screen.queryByText("int64")).toBeNull();
+  });
+});
+
+describe("Sorts", () => {
+  const makeColumn = ({
+    canSort = true,
+    sorted = false,
+    sortIndex = 0,
+  }: {
+    canSort?: boolean;
+    sorted?: false | SortDirection;
+    sortIndex?: number;
+  } = {}) =>
+    ({
+      getCanSort: () => canSort,
+      getIsSorted: () => sorted,
+      getSortIndex: () => sortIndex,
+      clearSorting: vi.fn(),
+      toggleSorting: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  const makeTable = (sorting: SortingState) =>
+    ({
+      getState: () => ({ sorting }),
+      resetSorting: vi.fn(),
+    }) as unknown as Table<unknown>;
+
+  it("returns null when the column cannot sort", () => {
+    renderInMenu(<Sorts column={makeColumn({ canSort: false })} />);
+    expect(screen.queryByText("Asc")).toBeNull();
+  });
+
+  it("renders Asc and Desc items", () => {
+    renderInMenu(<Sorts column={makeColumn()} />);
+    expect(screen.getByText("Asc")).toBeInTheDocument();
+    expect(screen.getByText("Desc")).toBeInTheDocument();
+  });
+
+  it("offers single-column 'Clear sort' when sorted without multi-sort", () => {
+    renderInMenu(<Sorts column={makeColumn({ sorted: "asc" })} />);
+    expect(screen.getByText("Clear sort")).toBeInTheDocument();
+  });
+
+  it("offers 'Clear all sorts' when the table has multiple sorts", () => {
+    renderInMenu(
+      <Sorts
+        column={makeColumn({ sorted: "asc" })}
+        table={makeTable([
+          { id: "a", desc: false },
+          { id: "b", desc: true },
+        ])}
+      />,
+    );
+    expect(screen.getByText("Clear all sorts")).toBeInTheDocument();
+  });
+});
+
+describe("CopyColumn", () => {
+  const makeColumn = ({
+    canCopy = true,
+    id = "name",
+  }: {
+    canCopy?: boolean;
+    id?: string;
+  } = {}) =>
+    ({
+      id,
+      getCanCopy: () => canCopy,
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders 'Copy column name' when copyable", () => {
+    renderInMenu(<CopyColumn column={makeColumn()} />);
+    expect(screen.getByText("Copy column name")).toBeInTheDocument();
+  });
+
+  it("returns null when the column cannot be copied", () => {
+    renderInMenu(<CopyColumn column={makeColumn({ canCopy: false })} />);
+    expect(screen.queryByText("Copy column name")).toBeNull();
+  });
+});
+
+describe("ColumnPinning", () => {
+  const makeColumn = ({
+    canPin = true,
+    pinned = false,
+  }: {
+    canPin?: boolean;
+    pinned?: false | "left" | "right";
+  } = {}) =>
+    ({
+      getCanPin: () => canPin,
+      getIsPinned: () => pinned,
+      pin: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  it("returns null when the column cannot be pinned", () => {
+    renderInMenu(<ColumnPinning column={makeColumn({ canPin: false })} />);
+    expect(screen.queryByText("Freeze left")).toBeNull();
+  });
+
+  it("offers freeze options when unpinned", () => {
+    renderInMenu(<ColumnPinning column={makeColumn()} />);
+    expect(screen.getByText("Freeze left")).toBeInTheDocument();
+    expect(screen.getByText("Freeze right")).toBeInTheDocument();
+  });
+
+  it("offers 'Unfreeze' when pinned", () => {
+    renderInMenu(<ColumnPinning column={makeColumn({ pinned: "left" })} />);
+    expect(screen.getByText("Unfreeze")).toBeInTheDocument();
+  });
+});
+
+describe("ColumnWrapping", () => {
+  const makeColumn = ({
+    canWrap = true,
+    wrapping = "nowrap",
+  }: {
+    canWrap?: boolean;
+    wrapping?: "wrap" | "nowrap";
+  } = {}) =>
+    ({
+      getCanWrap: () => canWrap,
+      getColumnWrapping: () => wrapping,
+      toggleColumnWrapping: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  it("returns null when the column cannot wrap", () => {
+    renderInMenu(<ColumnWrapping column={makeColumn({ canWrap: false })} />);
+    expect(screen.queryByText("Wrap text")).toBeNull();
+  });
+
+  it("offers 'Wrap text' when not wrapping", () => {
+    renderInMenu(<ColumnWrapping column={makeColumn()} />);
+    expect(screen.getByText("Wrap text")).toBeInTheDocument();
+  });
+
+  it("offers 'No wrap text' when wrapping", () => {
+    renderInMenu(<ColumnWrapping column={makeColumn({ wrapping: "wrap" })} />);
+    expect(screen.getByText("No wrap text")).toBeInTheDocument();
+  });
+});
+
+describe("FormatOptions", () => {
+  const makeColumn = ({
+    dataType = "number",
+    canFormat = true,
+  }: {
+    dataType?: string;
+    canFormat?: boolean;
+  } = {}) =>
+    ({
+      columnDef: { meta: { dataType } },
+      getCanFormat: () => canFormat,
+      getColumnFormatting: () => undefined,
+      setColumnFormatting: vi.fn(),
+    }) as unknown as Column<unknown, unknown>;
+
+  it("renders the 'Format' submenu trigger for formattable columns", () => {
+    renderInMenu(<FormatOptions column={makeColumn()} locale="en-US" />);
+    expect(screen.getByText("Format")).toBeInTheDocument();
+  });
+
+  it("returns null when the column cannot be formatted", () => {
+    renderInMenu(
+      <FormatOptions
+        column={makeColumn({ canFormat: false })}
+        locale="en-US"
+      />,
+    );
+    expect(screen.queryByText("Format")).toBeNull();
+  });
+
+  it("returns null when the data type has no format options", () => {
+    renderInMenu(
+      <FormatOptions
+        column={makeColumn({ dataType: "unknown" })}
+        locale="en-US"
+      />,
+    );
+    expect(screen.queryByText("Format")).toBeNull();
+  });
+});

package/src/components/data-table/column-header.tsx

@@ -17,14 +17,14 @@ import { useFilterEditor } from "./filter-editor-context";
 import { EDITABLE_FILTER_TYPES, isMembershipFilterType } from "./filters";
 import {
   ClearFilterMenuItem,
+  ColumnPinning,
+  ColumnWrapping,
+  CopyColumn,
+  DataType,
+  FormatOptions,
   HideColumn,
-  renderColumnPinning,
-  renderColumnWrapping,
-  renderCopyColumn,
-  renderDataType,
-  renderFormatOptions,
   renderSortIcon,
-  renderSorts,
+  Sorts,
 } from "./header-items";
 
 interface DataTableColumnHeaderProps<
@@ -36,6 +36,11 @@ interface DataTableColumnHeaderProps<
   subheader?: React.ReactNode;
   justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
+  /**
+   * Optional: only used to surface multi-column sort actions ("Clear all
+   * sorts"). Omitted by call sites that define their header inside column
+   * definitions, where the table instance isn't yet available.
+   */
   table?: Table<TData>;
 }
 
@@ -119,12 +124,12 @@ export const DataTableColumnHeader = <TData, TValue>({
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-            {renderDataType(column)}
-            {renderSorts(column, table)}
-            {renderCopyColumn(column)}
-            {renderColumnPinning(column)}
-            {renderColumnWrapping(column)}
-            {renderFormatOptions(column, locale)}
+            <DataType column={column} />
+            <Sorts column={column} table={table} />
+            <CopyColumn column={column} />
+            <ColumnPinning column={column} />
+            <ColumnWrapping column={column} />
+            <FormatOptions column={column} locale={locale} />
             <HideColumn column={column} />
             {canEditFilter && <DropdownMenuSeparator />}
             {canEditFilter && (

package/src/components/data-table/export-actions.tsx

@@ -9,7 +9,6 @@ import {
   TableIcon,
 } from "lucide-react";
 import React from "react";
-import { useLocale } from "react-aria";
 import { downloadSizeLimitAtom } from "./download-policy/atoms";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
@@ -20,7 +19,6 @@ import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
-  jsonToTSV,
 } from "@/utils/json/json-parser";
 import { MissingPackagePrompt } from "../datasources/missing-package-prompt";
 import { Button } from "../ui/button";
@@ -68,7 +66,12 @@ const FILE_TYPES = {
   },
 } as const;
 
-const downloadOptions = [FILE_TYPES.CSV, FILE_TYPES.JSON, FILE_TYPES.PARQUET];
+const downloadOptions = [
+  FILE_TYPES.CSV,
+  FILE_TYPES.TSV,
+  FILE_TYPES.JSON,
+  FILE_TYPES.PARQUET,
+];
 const copyOptions = [
   FILE_TYPES.TSV,
   FILE_TYPES.JSON,
@@ -79,6 +82,15 @@ const copyOptions = [
 type DownloadFormat = (typeof downloadOptions)[number]["format"];
 type CopyFormat = (typeof copyOptions)[number]["format"];
 
+// Each clipboard-copy format fetches from a backend download format, then
+// transforms the payload client-side as needed.
+const COPY_SOURCE_FORMAT: Record<CopyFormat, DownloadFormat> = {
+  csv: "csv",
+  tsv: "tsv",
+  json: "json",
+  markdown: "json",
+};
+
 export interface ExportActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<{
     url: string;
@@ -100,7 +112,6 @@ const labelForCopyFormat = (format: CopyFormat): string =>
   copyOptions.find((opt) => opt.format === format)?.label ?? format;
 
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
-  const { locale } = useLocale();
   const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
   const policy = useAtomValue(downloadSizeLimitAtom);
   const overLimit = !!(
@@ -213,7 +224,7 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
     await withLoadingToast(
       `Preparing ${labelForCopyFormat(format)} for clipboard...`,
       async () => {
-        const sourceFormat: DownloadFormat = format === "csv" ? "csv" : "json";
+        const sourceFormat = COPY_SOURCE_FORMAT[format];
         const result = await resolveDownloadUrl(sourceFormat, () => {
           void handleClipboardCopy(format);
         });
@@ -223,19 +234,15 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
 
         let text: string;
         switch (format) {
-          case "tsv": {
-            const json = await fetchJson(result.url);
-            text = jsonToTSV(json, locale);
+          case "tsv":
+          case "csv":
+            text = await fetchText(result.url);
             break;
-          }
           case "json": {
             const json = await fetchJson(result.url);
             text = JSON.stringify(json, null, 2);
             break;
           }
-          case "csv":
-            text = await fetchText(result.url);
-            break;
           case "markdown": {
             const json = await fetchJson(result.url);
             text = jsonToMarkdown(json);