@marimo-team/islands 0.23.14-dev5 → 0.23.14-dev50

package/dist/{toDate-D-l5s8nn.js → toDate-D1Z7ZXWh.js}

@@ -6,7 +6,7 @@ import { _ as Logger } from "./button-BacYv-bE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-BrYvK-_A.js";
+import { S as atom, g as isIslands, h as waitFor, p as store } from "./useTheme-yGsGEk82.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{useAsyncData-1Dhzjfwf.js → useAsyncData-BMc8itk2.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 { T as useEvent_default } from "./useTheme-BrYvK-_A.js";
+import { D as useEvent_default } from "./useTheme-yGsGEk82.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-CDWT3BDz.js → useDeepCompareMemoize-ZwmDBRDY.js}

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

package/dist/{useLifecycle-AHlswLw-.js → useLifecycle-CxffarYV.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--2Bqjvs0.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { b as atom, v as useSetAtom } from "./useTheme-BrYvK-_A.js";
+import { S as atom, b as useSetAtom } from "./useTheme-yGsGEk82.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-BrYvK-_A.js → useTheme-yGsGEk82.js}

@@ -709,8 +709,8 @@ function useResolvedMarimoConfig() {
 function getResolvedMarimoConfig() {
   return store.get(resolvedMarimoConfigAtom);
 }
-atom((e) => isAiEnabled(e(resolvedMarimoConfigAtom))), atom((e) => isAiModelConfigured(e(resolvedMarimoConfigAtom)));
-const aiFeaturesEnabledAtom = atom((e) => isAiFeatureEnabled(e(resolvedMarimoConfigAtom)));
+atom((e) => isAiEnabled(e(resolvedMarimoConfigAtom)));
+const aiModelConfiguredAtom = atom((e) => isAiModelConfigured(e(resolvedMarimoConfigAtom))), 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) {
@@ -790,29 +790,31 @@ function useTheme() {
   return e[1] === j ? M = e[2] : (M = { theme: j }, e[1] = j, e[2] = M), M;
 }
 export {
-  getBuildingBlocks as C,
-  buildStore as S,
-  useEvent_default as T,
-  useAtomValue as _,
-  getResolvedMarimoConfig as a,
-  atom as b,
-  useResolvedMarimoConfig as c,
-  store as d,
-  useJotaiEffect as f,
-  useAtom as g,
-  Provider as h,
-  autoInstantiateAtom as i,
-  AppConfigSchema as l,
-  isIslands as m,
+  createStore as C,
+  useEvent_default as D,
+  dequal as E,
+  atom as S,
+  getBuildingBlocks as T,
+  Provider as _,
+  autoInstantiateAtom as a,
+  useSetAtom as b,
+  resolvedMarimoConfigAtom as c,
+  AppConfigSchema as d,
+  createDeepEqualAtom as f,
+  isIslands as g,
+  waitFor as h,
+  aiModelConfiguredAtom as i,
+  useResolvedMarimoConfig as l,
+  useJotaiEffect as m,
   useTheme as n,
-  localeAtom as o,
-  waitFor as p,
+  getResolvedMarimoConfig as o,
+  store as p,
   aiFeaturesEnabledAtom as r,
-  resolvedMarimoConfigAtom as s,
+  localeAtom as s,
   resolvedThemeAtom as t,
-  createDeepEqualAtom as u,
-  useSetAtom as v,
-  dequal as w,
-  createStore as x,
-  useStore as y
+  userConfigAtom as u,
+  useAtom as v,
+  buildStore as w,
+  useStore as x,
+  useAtomValue as y
 };

package/dist/{vega-component-Pk6lyc_a.js → vega-component-BFJTyykA.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-BacYv-bE.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-D-l5s8nn.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-D1Z7ZXWh.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
 import "./zod-CijjQh4u.js";
 import { n as ErrorBanner } from "./error-banner-DFPfz_Qf.js";
 import { t as Tooltip } from "./tooltip-Czds6Qr8.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
-import { T as useEvent_default, n as useTheme } from "./useTheme-BrYvK-_A.js";
+import { D as useEvent_default, n as useTheme } from "./useTheme-yGsGEk82.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-d6MhLuQ9.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-WsOgyW_K.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Boph2xIS.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-1Dhzjfwf.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CDWT3BDz.js";
+import { t as useAsyncData } from "./useAsyncData-BMc8itk2.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-ZwmDBRDY.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.14-dev5",
+  "version": "0.23.14-dev50",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -45,7 +45,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@glideapps/glide-data-grid": "6.0.4-alpha9",
+    "@glideapps/glide-data-grid": "6.0.4-alpha24",
     "@hookform/resolvers": "^5.2.2",
     "@img-comparison-slider/react": "^8.0.2",
     "@internationalized/date": "^3.10.1",
@@ -56,7 +56,7 @@
     "@lezer/python": "^1.1.18",
     "@marimo-team/codemirror-ai": "^0.3.7",
     "@marimo-team/codemirror-languageserver": "^1.16.12",
-    "@marimo-team/codemirror-mcp": "^0.1.5",
+    "@marimo-team/codemirror-mcp": "^0.1.7",
     "@marimo-team/codemirror-sql": "^0.2.8",
     "@marimo-team/llm-info": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",

package/src/__mocks__/requests.ts

@@ -45,6 +45,7 @@ export const MockRequestClient = {
       openFile: vi.fn().mockResolvedValue({}),
       getUsageStats: vi.fn().mockResolvedValue({}),
       sendPdb: vi.fn().mockResolvedValue({}),
+      sendSetBreakpoints: vi.fn().mockResolvedValue({}),
       sendListFiles: vi.fn().mockResolvedValue({ files: [] }),
       sendSearchFiles: vi
         .fn()

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

@@ -1288,6 +1288,32 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <OverriddenFormField
+              control={form.control}
+              name="experimental.debugger"
+              render={({ field, override }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">Debugger</FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="debugger-checkbox"
+                        checked={override.value === true}
+                        disabled={override.isOverridden}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden override={override} />
+                  <FormDescription>
+                    Enable the live debugger: a clickable breakpoint gutter,
+                    current-line highlighting while a cell runs, and dropping
+                    into <Kbd className="inline">pdb</Kbd> at breakpoints. This
+                    change requires a page refresh to take effect.
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }

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

@@ -49,6 +49,7 @@ import {
   addContextCompletion,
   CONTEXT_TRIGGER,
 } from "@/components/editor/ai/completion-utils";
+import { pendingAiPromptAtom } from "@/core/ai/state";
 import {
   Select,
   SelectContent,
@@ -72,6 +73,7 @@ import {
   SendButton,
 } from "../chat-components";
 import { useFileState } from "../chat-utils";
+import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
 import { ReadyToChatBlock } from "./blocks";
 import {
   convertFilesToResourceLinks,
@@ -305,6 +307,7 @@ interface PromptAreaProps {
   onModeChange?: (mode: string) => void;
   sessionModels?: SessionModelState | null;
   onModelChange?: (modelId: string) => void;
+  inputRef: React.RefObject<ReactCodeMirrorRef | null>;
 }
 
 const PromptArea = memo<PromptAreaProps>(
@@ -322,8 +325,8 @@ const PromptArea = memo<PromptAreaProps>(
     onModeChange,
     sessionModels,
     onModelChange,
+    inputRef,
   }) => {
-    const inputRef = useRef<ReactCodeMirrorRef | null>(null);
     const promptCompletions: AdditionalCompletions | undefined = useMemo(() => {
       if (!commands) {
         return undefined;
@@ -660,6 +663,8 @@ const AgentPanel: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | string | null>(null);
   const [promptValue, setPromptValue] = useState("");
+  const promptInputRef = useRef<ReactCodeMirrorRef | null>(null);
+  const [pendingPrompt, setPendingPrompt] = useAtom(pendingAiPromptAtom);
   const { files, addFiles, clearFiles, removeFile } = useFileState();
   const [sessionModels, setSessionModels] = useState<SessionModelState | null>(
     null,
@@ -973,6 +978,34 @@ const AgentPanel: React.FC = () => {
     },
   );
 
+  // Consume a prompt queued by another part of the app (e.g. error auto-fix).
+  useEffect(() => {
+    if (
+      !activeSessionId ||
+      !agent ||
+      isLoading ||
+      connectionState.status !== "connected" ||
+      !pendingPrompt
+    ) {
+      return;
+    }
+    setPendingPrompt(null);
+    if (pendingPrompt.submit) {
+      void handlePromptSubmit(undefined, pendingPrompt.prompt);
+    } else {
+      setPromptValue(pendingPrompt.prompt);
+      focusInputAndMoveToEnd(promptInputRef);
+    }
+  }, [
+    activeSessionId,
+    agent,
+    isLoading,
+    connectionState.status,
+    pendingPrompt,
+    setPendingPrompt,
+    handlePromptSubmit,
+  ]);
+
   // Handler for stopping the current operation
   const handleStop = useEvent(async () => {
     if (!activeSessionId || !agent) {
@@ -1187,6 +1220,7 @@ const AgentPanel: React.FC = () => {
           onModeChange={handleModeChange}
           sessionModels={sessionModels}
           onModelChange={handleModelChange}
+          inputRef={promptInputRef}
         />
       </>
     );

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

@@ -45,6 +45,7 @@ import {
   type Chat,
   type ChatId,
   chatStateAtom,
+  pendingAiPromptAtom,
 } from "@/core/ai/state";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
 import {
@@ -94,6 +95,7 @@ import {
   useFileState,
 } from "./chat-utils";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
+import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
 
 // Default mode for the AI
 const DEFAULT_MODE = "manual";
@@ -407,6 +409,7 @@ const ChatInput: React.FC<ChatInputProps> = memo(
       <div className="relative shrink-0 min-h-[80px] flex flex-col border-t">
         <div className={cn("px-2 py-3 flex-1", inputClassName)}>
           <PromptInput
+            className="max-h-[400px]"
             inputRef={inputRef}
             value={input}
             onChange={setInput}
@@ -481,6 +484,7 @@ const ChatPanel = () => {
 const ChatPanelBody = () => {
   const setChatState = useSetAtom(chatStateAtom);
   const [activeChat, setActiveChat] = useAtom(activeChatAtom);
+  const [pendingPrompt, setPendingPrompt] = useAtom(pendingAiPromptAtom);
   const [input, setInput] = useState("");
   const [newThreadInput, setNewThreadInput] = useState("");
   const { files, addFiles, clearFiles, removeFile } = useFileState();
@@ -600,10 +604,7 @@ const ChatPanelBody = () => {
     requestAnimationFrame(scrollToBottom);
   }, [activeChatId]);
 
-  const createNewThread = async (
-    initialMessage: string,
-    initialAttachments?: File[],
-  ) => {
+  const startNewChatState = useEvent((initialMessage: string) => {
     const now = Date.now();
     const newChat: Chat = {
       id: chatId as ChatId,
@@ -613,41 +614,41 @@ const ChatPanelBody = () => {
       updatedAt: now,
     };
 
-    // Create new chat and set as active
     setChatState((prev) => {
       const newChats = new Map(prev.chats);
       newChats.set(newChat.id, newChat);
-      const newState = {
+      return {
         ...prev,
         chats: newChats,
         activeChatId: newChat.id,
       };
-      return newState;
     });
+  });
 
-    const fileParts =
-      initialAttachments && initialAttachments.length > 0
-        ? await convertToFileUIPart(initialAttachments)
-        : undefined;
-    const { contextPart, attachments } =
-      await resolveChatContext(initialMessage);
+  const createNewThread = useEvent(
+    async (initialMessage: string, initialAttachments?: File[]) => {
+      startNewChatState(initialMessage);
 
-    // Trigger AI conversation with append
-    sendMessage({
-      role: "user",
-      parts: [
-        {
-          type: "text" as const,
-          text: initialMessage,
-        },
-        ...(contextPart ? [contextPart] : []),
-        ...(fileParts ?? []),
-        ...attachments,
-      ],
-    });
-    clearFiles();
-    setInput("");
-  };
+      const fileParts =
+        initialAttachments && initialAttachments.length > 0
+          ? await convertToFileUIPart(initialAttachments)
+          : undefined;
+      const { contextPart, attachments } =
+        await resolveChatContext(initialMessage);
+
+      sendMessage({
+        role: "user",
+        parts: [
+          { type: "text" as const, text: initialMessage },
+          ...(contextPart ? [contextPart] : []),
+          ...(fileParts ?? []),
+          ...attachments,
+        ],
+      });
+      clearFiles();
+      setInput("");
+    },
+  );
 
   const handleNewChat = useEvent(() => {
     setActiveChat(null);
@@ -728,7 +729,45 @@ const ChatPanelBody = () => {
 
   const handleOnCloseThread = () => newThreadInputRef.current?.editor?.blur();
 
+  const submitPendingPrompt = useEvent(async (prompt: string) => {
+    if (activeChatId == null) {
+      startNewChatState(prompt);
+      // Starting a chat swaps the new-thread input for the regular input;
+      // carry over any draft the user had typed so it isn't lost.
+      setInput(newThreadInput);
+    }
+    const { contextPart, attachments } = await resolveChatContext(prompt);
+    sendMessage({
+      role: "user",
+      parts: [
+        { type: "text", text: prompt },
+        ...(contextPart ? [contextPart] : []),
+        ...attachments,
+      ],
+    });
+  });
+
   const isNewThread = messages.length === 0;
+
+  // Deliver a prompt queued elsewhere (e.g. error auto-fix) to the chat,
+  // appending to the active thread or starting one if none exists.
+  useEffect(() => {
+    if (!pendingPrompt) {
+      return;
+    }
+    setPendingPrompt(null);
+    const { prompt, submit } = pendingPrompt;
+    if (submit) {
+      void submitPendingPrompt(prompt);
+    } else if (isNewThread) {
+      setNewThreadInput(prompt);
+      focusInputAndMoveToEnd(newThreadInputRef);
+    } else {
+      setInput(prompt);
+      focusInputAndMoveToEnd(newMessageInputRef);
+    }
+  }, [pendingPrompt, setPendingPrompt, isNewThread, submitPendingPrompt]);
+
   const chatInput = isNewThread ? (
     <ChatInput
       key="new-thread-input"

package/src/components/data-table/__tests__/column-explorer.test.tsx

@@ -126,3 +126,28 @@ describe("ColumnExplorerPanel header counts", () => {
     expect(screen.queryByText(/hidden/)).not.toBeInTheDocument();
   });
 });
+
+describe("ColumnExplorerPanel visibility actions", () => {
+  const showAll = () => screen.getByRole("button", { name: /Show all/ });
+  const hideAll = () => screen.getByRole("button", { name: /Hide all/ });
+
+  it("disables 'Show all' when every column is visible", () => {
+    renderPanel();
+    expect(showAll()).toBeDisabled();
+    expect(hideAll()).toBeEnabled();
+  });
+
+  it("disables 'Hide all' when every column is hidden", () => {
+    renderPanel({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(showAll()).toBeEnabled();
+    expect(hideAll()).toBeDisabled();
+  });
+
+  it("enables both actions when some columns are hidden", () => {
+    renderPanel({ initiallyHidden: ["cust_age"] });
+    expect(showAll()).toBeEnabled();
+    expect(hideAll()).toBeEnabled();
+  });
+});

package/src/components/data-table/__tests__/column-visibility-dropdown.test.tsx

@@ -21,10 +21,17 @@ beforeAll(() => {
 
 type Row = Record<string, unknown>;
 
+// Select, index, and nameless columns are non-hideable in production
+// (see columns.tsx), so the harness mirrors that to keep visibility counts
+// aligned with the real table.
 const TEST_COLUMNS: ColumnDef<Row>[] = [
-  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
-  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
-  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID, enableHiding: false },
+  {
+    id: INDEX_COLUMN_NAME,
+    accessorKey: INDEX_COLUMN_NAME,
+    enableHiding: false,
+  },
+  { id: "__m_column__0", accessorKey: "__m_column__0", enableHiding: false },
   {
     id: "customer_name",
     accessorKey: "customer_name",
@@ -101,6 +108,7 @@ describe("ColumnVisibilityDropdown", () => {
     renderAndOpen({ initiallyHidden: ["cust_age"] });
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -117,6 +125,7 @@ describe("ColumnVisibilityDropdown", () => {
 
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -132,6 +141,7 @@ describe("ColumnVisibilityDropdown", () => {
     fireEvent.click(getColumnOption("customer_name"));
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "cust_age",
       "customer_name",
       "order_total",
@@ -144,6 +154,7 @@ describe("ColumnVisibilityDropdown", () => {
     // Reopen sorts both hidden columns first, preserving table order.
     expect(getOptionTexts()).toEqual([
       "Show all",
+      "Hide all",
       "customer_name",
       "cust_age",
       "order_total",
@@ -189,6 +200,52 @@ describe("ColumnVisibilityDropdown", () => {
     );
   });
 
+  it("'Hide all' hides every hideable column", () => {
+    renderAndOpen();
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disables 'Hide all' when every column is already hidden", () => {
+    renderAndOpen({
+      initiallyHidden: ["customer_name", "cust_age", "order_total"],
+    });
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Hide all' leaves non-hideable columns visible", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    fireEvent.click(getColumnOption("Hide all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    const nonHideable = getColumnOption("customer_name");
+    expect(nonHideable).toHaveAttribute("aria-disabled", "true");
+    expect(nonHideable.querySelector(".lucide-eye-off")).toBeNull();
+    // Every hideable column is now hidden, so the action gates off.
+    expect(getColumnOption("Hide all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
   it("hides and shows matching columns via bulk actions while searching", () => {
     renderAndOpen();
     fireEvent.change(getSearchInput(), { target: { value: "cust" } });

package/src/components/data-table/charts/__tests__/altair-generator.test.ts

@@ -85,6 +85,10 @@ const Mocks = {
       type: "arc",
       innerRadius: 100,
     },
+    arcDefault: {
+      type: "arc",
+      innerRadius: undefined,
+    },
   },
 };
 
@@ -128,6 +132,26 @@ describe("generateAltairChart", () => {
     `);
   });
 
+  it("should generate a pie chart when arc has undefined innerRadius", () => {
+    const spec = createSpec({
+      mark: Mocks.marks.arcDefault,
+      encoding: {
+        theta: Mocks.thetaAxis,
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_arc()
+      .encode(theta=alt.Theta(field='theta', axis={
+          'title': 'Theta Axis'
+      }))"
+    `);
+  });
+
   it("should generate a donut chart", () => {
     const spec = createSpec({
       mark: Mocks.marks.arc,

package/src/components/data-table/charts/__tests__/merge-index-fields.test.ts

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { mergeIndexFields } from "../charts";
+
+describe("mergeIndexFields", () => {
+  it("appends row-header (index) fields to field types", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["v", ["number", "int64"]]];
+    const rowHeaders: FieldTypesWithExternalType = [
+      ["k", ["string", "object"]],
+    ];
+    expect(mergeIndexFields(fieldTypes, rowHeaders)).toEqual([
+      ["v", ["number", "int64"]],
+      ["k", ["string", "object"]],
+    ]);
+  });
+
+  it("de-dupes when an index name matches a column name", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["k", ["number", "int64"]]];
+    const rowHeaders: FieldTypesWithExternalType = [
+      ["k", ["string", "object"]],
+    ];
+    expect(mergeIndexFields(fieldTypes, rowHeaders)).toEqual([
+      ["k", ["number", "int64"]],
+    ]);
+  });
+
+  it("returns field types unchanged when there are no row headers", () => {
+    const fieldTypes: FieldTypesWithExternalType = [["v", ["number", "int64"]]];
+    expect(mergeIndexFields(fieldTypes, [])).toEqual(fieldTypes);
+  });
+});

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -30,7 +30,10 @@ export function generateAltairChart(
       if (typeof spec.mark === "object" && "type" in spec.mark) {
         markProps = Object.fromEntries(
           Object.entries(spec.mark)
-            .filter(([key]) => key !== "type")
+            .filter(
+              ([key, value]) =>
+                key !== "type" && value !== undefined && value !== null,
+            )
             .map(([key, value]) => [key, new Literal(value)]),
         );
       }