@marimo-team/frontend 0.23.14-dev2 → 0.23.14-dev21

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/column-explorer-panel/column-explorer.tsx

@@ -50,7 +50,10 @@ import {
 import { smartMatch } from "@/utils/smartMatch";
 import type { Column, Table } from "@tanstack/react-table";
 import { cn } from "@/utils/cn";
-import { getColumnCountForDisplay } from "../hooks/use-column-visibility";
+import {
+  getColumnCountForDisplay,
+  getUserColumnVisibilityCounts,
+} from "../hooks/use-column-visibility";
 
 interface ColumnExplorerPanelProps<TData> {
   previewColumn: PreviewColumn;
@@ -90,6 +93,7 @@ export function ColumnExplorerPanel<TData>({
     totalColumns: effectiveTotalColumns,
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
+  const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,
@@ -108,17 +112,34 @@ export function ColumnExplorerPanel<TData>({
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
           className="h-3 w-3"
         />
-        {hiddenColumnCount > 0 && (
-          <Button
-            type="button"
-            variant="link"
-            size="xs"
-            className="h-auto p-0"
-            onClick={() => table.resetColumnVisibility(true)}
-          >
-            Unhide all
-          </Button>
-        )}
+        <div className="ml-auto flex items-center gap-1">
+          <Tooltip content="Show all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={hiddenColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(true)}
+            >
+              <EyeIcon className="w-3 h-3" />
+              Show all
+            </Button>
+          </Tooltip>
+          <Tooltip content="Hide all columns" delayDuration={400}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              className="gap-1"
+              disabled={visibleColumnCount === 0}
+              onClick={() => table.toggleAllColumnsVisible(false)}
+            >
+              <EyeOffIcon className="w-3 h-3" />
+              Hide all
+            </Button>
+          </Tooltip>
+        </div>
       </div>
       <Command className="h-5/6 bg-background" shouldFilter={false}>
         <CommandInput

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

@@ -59,6 +59,12 @@ export const ColumnVisibilityDropdown = <TData,>({
   const hiddenIds = userColumns
     .filter((column) => !column.getIsVisible())
     .map((column) => column.id);
+  const hideableIds = userColumns
+    .filter((column) => column.getCanHide())
+    .map((column) => column.id);
+  const visibleHideableCount = hideableIds.filter(
+    (id) => !hiddenIds.includes(id),
+  ).length;
 
   const applyHidden = (next: string[] | string | null) => {
     const hidden = new Set(Array.isArray(next) ? next : []);
@@ -127,6 +133,15 @@ export const ColumnVisibilityDropdown = <TData,>({
                   <EyeIcon className="w-3 h-3 mr-1.5" />
                   Show all
                 </CommandItem>
+                <CommandItem
+                  value="__hide_all__"
+                  disabled={visibleHideableCount === 0}
+                  onSelect={() => applyHidden(hideableIds)}
+                  className="cursor-pointer"
+                >
+                  <EyeOffIcon className="w-3 h-3 mr-1.5" />
+                  Hide all
+                </CommandItem>
                 <CommandSeparator />
               </>
             ) : (

package/src/components/editor/actions/useNotebookActions.tsx

@@ -688,13 +688,13 @@ export function useNotebookActions() {
     {
       divider: true,
       icon: <Home size={14} strokeWidth={1.5} />,
-      label: "Return home",
+      label: "Open home",
       // If file is in the url, then we ran `marimo edit`
       // without a specific file
       hidden: !location.search.includes("file"),
       handle: () => {
         const withoutSearch = document.baseURI.split("?")[0];
-        window.open(withoutSearch, "_self");
+        window.open(withoutSearch, "_blank", "noopener");
       },
     },
 

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -31,6 +31,7 @@ import { cn } from "@/utils/cn";
 import { HideInKioskMode } from "../../kiosk-mode";
 import { ContributeSnippetButton } from "../components/contribute-snippet-button";
 import { usePanelOrientation, usePanelSection } from "./panel-context";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 const extensions = [EditorView.lineWrapping];
 
@@ -187,6 +188,8 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
             return null;
           }
 
+          const { language, code: displayCode } = getReadonlyCodeDisplay(code);
+
           return (
             <div
               className="relative hover-actions-parent pr-2"
@@ -210,10 +213,10 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
                 <LazyAnyLanguageCodeMirror
                   key={`${snippet.title}-${id}`}
                   theme={theme === "dark" ? "dark" : "light"}
-                  language="python"
+                  language={language}
                   className="cm border rounded overflow-hidden"
                   extensions={extensions}
-                  value={code}
+                  value={displayCode}
                   readOnly={true}
                 />
               </Suspense>

package/src/components/editor/chrome/wrapper/__tests__/useOpenAiAssistant.test.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const getFeatureFlag = vi.fn<(flag: string) => boolean>();
+
+vi.mock("@/core/config/feature-flag", () => ({
+  getFeatureFlag: (flag: string) => getFeatureFlag(flag),
+}));
+
+const { resolveAiPanelTab } = await import("../useOpenAiAssistant");
+
+describe("resolveAiPanelTab", () => {
+  beforeEach(() => {
+    getFeatureFlag.mockReset();
+  });
+
+  it("honors an explicit panel regardless of the feature flag", () => {
+    getFeatureFlag.mockReturnValue(false);
+    expect(resolveAiPanelTab("agents", "chat")).toBe("agents");
+    expect(resolveAiPanelTab("chat", "agents")).toBe("chat");
+  });
+
+  it("uses the stored tab when external agents are enabled", () => {
+    getFeatureFlag.mockReturnValue(true);
+    expect(resolveAiPanelTab(undefined, "agents")).toBe("agents");
+    expect(resolveAiPanelTab(undefined, "chat")).toBe("chat");
+  });
+
+  it("falls back to chat when external agents are disabled", () => {
+    getFeatureFlag.mockReturnValue(false);
+    // A stale "agents" preference must not strand the prompt.
+    expect(resolveAiPanelTab(undefined, "agents")).toBe("chat");
+    expect(resolveAiPanelTab(undefined, "chat")).toBe("chat");
+  });
+});

package/src/components/editor/chrome/wrapper/footer-items/pyodide-status.tsx

@@ -1,47 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtomValue } from "jotai";
-import { AlertCircleIcon } from "lucide-react";
 import type React from "react";
-import { Spinner } from "@/components/icons/spinner";
-import { Tooltip } from "@/components/ui/tooltip";
-import { wasmInitializationAtom, wasmInitStatusAtom } from "@/core/wasm/state";
+import { RuntimeStatusBadge } from "@/components/lifecycle/RuntimeStatusBadge";
 import { isWasm } from "@/core/wasm/utils";
 
 /**
- * Footer indicator that surfaces Pyodide initialization progress. Mirrors
- * the "Kernel" indicator but tracks the WASM runtime instead of the server
- * connection. Hides itself once Pyodide is ready.
+ * Footer indicator that surfaces Pyodide initialization progress. Thin
+ * wrapper around `<RuntimeStatusBadge>` so the rest of the footer chrome
+ * doesn't need to know about adapters.
  */
 export const PyodideStatus: React.FC = () => {
-  const status = useAtomValue(wasmInitStatusAtom);
-  const message = useAtomValue(wasmInitializationAtom);
-
-  if (!isWasm() || status === "ready") {
+  if (!isWasm()) {
     return null;
   }
-
-  const icon =
-    status === "error" ? (
-      <AlertCircleIcon className="w-4 h-4 text-destructive" />
-    ) : (
-      <Spinner size="small" />
-    );
-
-  const tooltip = status === "error" ? "Pyodide failed to initialize" : message;
-
-  return (
-    <Tooltip
-      content={<div className="text-sm whitespace-pre-line">{tooltip}</div>}
-      data-testid="footer-pyodide-status"
-    >
-      <div
-        className="p-1 hover:bg-accent rounded flex items-center gap-1.5 text-xs text-muted-foreground"
-        data-testid="pyodide-status"
-      >
-        {icon}
-        <span>Pyodide</span>
-      </div>
-    </Tooltip>
-  );
+  return <RuntimeStatusBadge />;
 };

package/src/components/editor/chrome/wrapper/useAiPanel.ts

@@ -6,7 +6,9 @@ import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 const AI_PANEL_TAB_KEY = "marimo:chrome:ai-panel-tab";
 
-const aiPanelTabAtom = atomWithStorage<"chat" | "agents">(
+export type AiPanelTab = "chat" | "agents";
+
+export const aiPanelTabAtom = atomWithStorage<AiPanelTab>(
   AI_PANEL_TAB_KEY,
   "chat",
   jotaiJsonStorage,

package/src/components/editor/chrome/wrapper/useOpenAiAssistant.ts

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useSetAtom, useStore } from "jotai";
+import useEvent from "react-use-event-hook";
+import { agentSessionStateAtom } from "@/components/chat/acp/state";
+import { toast } from "@/components/ui/use-toast";
+import { useModelChange } from "@/core/ai/config";
+import { pendingAiPromptAtom } from "@/core/ai/state";
+import type { CopilotMode } from "@/core/ai/tools/registry";
+import { aiModelConfiguredAtom } from "@/core/config/config";
+import { getFeatureFlag } from "@/core/config/feature-flag";
+import { Logger } from "@/utils/Logger";
+import { useChromeActions } from "../state";
+import { type AiPanelTab, aiPanelTabAtom, useAiPanelTab } from "./useAiPanel";
+
+// Error fixes work best with kernel access, so we default the chat panel to
+// code mode. The agents panel manages its own mode, so this is chat-only.
+const FIX_CHAT_MODE: CopilotMode = "code_mode";
+
+export interface OpenAiAssistantOptions {
+  prompt: string;
+  submit?: boolean;
+  /** Override the user's AI sidebar tab. When omitted, the stored tab is used. */
+  panel?: AiPanelTab;
+}
+
+// Resolve which AI panel to open.
+export function resolveAiPanelTab(
+  panel: AiPanelTab | undefined,
+  storedTab: AiPanelTab,
+): AiPanelTab {
+  if (panel) {
+    return panel;
+  }
+  return getFeatureFlag("external_agents") ? storedTab : "chat";
+}
+
+/**
+ * Opens the AI assistant sidebar panel and delivers a prompt to it.
+ *
+ * If no `panel` is given, the user's configured tab is respected.
+ */
+export function useOpenAiAssistant() {
+  const { openApplication } = useChromeActions();
+  const { setAiPanelTab } = useAiPanelTab();
+  const { saveModeChange } = useModelChange();
+  const setPendingPrompt = useSetAtom(pendingAiPromptAtom);
+  const store = useStore();
+
+  return useEvent(async (opts: OpenAiAssistantOptions) => {
+    const tab = resolveAiPanelTab(opts.panel, store.get(aiPanelTabAtom));
+
+    const chatPanelReady = store.get(aiModelConfiguredAtom);
+    const agentsPanelReady =
+      getFeatureFlag("external_agents") &&
+      store.get(agentSessionStateAtom).sessions.length > 0;
+    const isReady = tab === "agents" ? agentsPanelReady : chatPanelReady;
+
+    if (!isReady) {
+      toast({
+        title: tab === "agents" ? "No agent session" : "AI not configured",
+        description:
+          tab === "agents"
+            ? "Start an agent session or switch to the chat panel."
+            : "Configure an AI provider and chat model to fix with AI.",
+        variant: "danger",
+      });
+      return;
+    }
+
+    if (opts.panel) {
+      setAiPanelTab(opts.panel);
+    }
+
+    if (tab === "chat") {
+      await saveModeChange(FIX_CHAT_MODE).catch(() =>
+        Logger.error("Failed to save mode change"),
+      );
+    }
+
+    setPendingPrompt({
+      prompt: opts.prompt,
+      submit: opts.submit ?? false,
+    });
+
+    openApplication("ai");
+  });
+}

package/src/components/editor/code/readonly-python-code.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import CodeMirror, {
   EditorView,
@@ -11,6 +12,7 @@ import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -22,6 +24,18 @@ const pythonExtensions = [
   EditorView.lineWrapping,
 ];
 const sqlExtensions = [sql(), EditorView.lineWrapping];
+const markdownExtensions = [markdown(), EditorView.lineWrapping];
+
+function readonlyCodeExtensions(language: LanguageAdapterType) {
+  switch (language) {
+    case "sql":
+      return sqlExtensions;
+    case "markdown":
+      return markdownExtensions;
+    default:
+      return pythonExtensions;
+  }
+}
 
 /**
  * A readonly code component that can be used to display code in a readonly state.
@@ -42,7 +56,7 @@ export const ReadonlyCode = memo(
       showHideCode?: boolean;
       showCopyCode?: boolean;
       insertNewCell?: boolean;
-      language?: "python" | "sql";
+      language?: LanguageAdapterType;
     } & ReactCodeMirrorProps,
   ) => {
     const { theme } = useTheme();
@@ -84,7 +98,7 @@ export const ReadonlyCode = memo(
           theme={theme === "dark" ? "dark" : "light"}
           height="100%"
           editable={!hideCode}
-          extensions={language === "python" ? pythonExtensions : sqlExtensions}
+          extensions={readonlyCodeExtensions(language)}
           value={code}
           readOnly={true}
         />

package/src/components/editor/errors/__tests__/auto-fix.test.ts

@@ -0,0 +1,23 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { buildFixInChatPrompt } from "../auto-fix";
+
+describe("buildFixInChatPrompt", () => {
+  it("references the per-cell error context URI", () => {
+    expect(buildFixInChatPrompt(cellId("cell-1"))).toBe(
+      "@error://cell-1\n\nPlease fix this error.",
+    );
+  });
+
+  it("falls back to inline error text when no cell id", () => {
+    expect(buildFixInChatPrompt(undefined, "ValueError: boom")).toBe(
+      "My code gives the following error. Please fix it:\n\nValueError: boom",
+    );
+  });
+
+  it("uses a generic prompt when no cell id and no error text", () => {
+    expect(buildFixInChatPrompt(undefined)).toBe("Please fix this error.");
+  });
+});