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

package/src/components/data-table/charts/charts.tsx

@@ -27,6 +27,7 @@ import { useDebouncedCallback } from "@/hooks/useDebounce";
 import type { GetDataUrl } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { useTheme } from "@/theme/useTheme";
+import { uniqueBy } from "@/utils/arrays";
 import { inferFieldTypes } from "../columns";
 import {
   type FieldTypesWithExternalType,
@@ -54,6 +55,22 @@ const CHART_HEIGHT = 290;
 const CHART_MAX_ROWS = 50_000;
 const CHART_MAX_COLUMNS = 50;
 
+/**
+ * Append row-header (index) fields to the chart field list, skipping any whose
+ * name already exists as a data column so the chart builder never offers the
+ * same axis twice.
+ */
+export function mergeIndexFields(
+  fieldTypes: FieldTypesWithExternalType | null | undefined,
+  rowHeaders: FieldTypesWithExternalType | null | undefined,
+): FieldTypesWithExternalType {
+  const base = fieldTypes ?? [];
+  if (!rowHeaders || rowHeaders.length === 0) {
+    return base;
+  }
+  return uniqueBy([...base, ...rowHeaders], (f) => f[0]);
+}
+
 export interface TablePanelProps {
   cellId: CellId | null;
   data: unknown[];
@@ -64,6 +81,7 @@ export interface TablePanelProps {
   onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
+  rowHeaders?: FieldTypesWithExternalType | null;
 }
 
 export const TablePanel: React.FC<TablePanelProps> = ({
@@ -74,6 +92,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   columns,
   getDataUrl,
   fieldTypes,
+  rowHeaders,
   displayHeader,
   onCloseChartBuilder,
 }) => {
@@ -265,7 +284,10 @@ export const TablePanel: React.FC<TablePanelProps> = ({
               saveChart={saveChart}
               saveChartType={saveChartType}
               getDataUrl={getDataUrl}
-              fieldTypes={fieldTypes ?? inferFieldTypes(dataTable.props.data)}
+              fieldTypes={mergeIndexFields(
+                fieldTypes ?? inferFieldTypes(dataTable.props.data),
+                rowHeaders,
+              )}
               isLargeDataset={isLargeDataset}
             />
           </TabsContent>

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/debugger/debugger-code.tsx

@@ -208,7 +208,7 @@ export const DebuggerControls: React.FC<{
         </Button>
       </Tooltip>
       {onClear && (
-        <Tooltip content="Clear">
+        <Tooltip content="Quit and clear">
           <Button
             variant="text"
             size="icon"
@@ -217,7 +217,12 @@ export const DebuggerControls: React.FC<{
               buttonClasses,
               "text-(--red-11) hover:text-(--red-11) hover:bg-(--red-2) hover:border-(--red-8)",
             )}
-            onClick={onClear}
+            onClick={() => {
+              // Quit the debugger (`q`) before tearing down the console, so
+              // the stdin response targets the still-present pdb prompt.
+              onSubmit("q");
+              onClear();
+            }}
           >
             <TrashIcon fontSize={36} className={iconClasses} />
           </Button>

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/cell/cell-context-menu.tsx

@@ -23,7 +23,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useCellData, useCellRuntime } from "@/core/cells/cells";
 import { CellOutputId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
+import { goToDefinitionWithLspFallback } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
 import { copyImageToClipboard, copyToClipboard } from "@/utils/copy";
 import { getImageExtension } from "@/utils/filenames";
@@ -170,7 +170,7 @@ export const CellActionsContextMenu = ({
           // Only suppress focus restoration when we actually navigated;
           // otherwise let Radix return focus to the trigger cell.
           suppressCloseAutoFocus.current =
-            goToDefinitionAtCursorPosition(editorView);
+            goToDefinitionWithLspFallback(editorView);
         }
       },
     },

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

@@ -31,7 +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 { getSnippetDisplay } from "./snippet-display";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 const extensions = [EditorView.lineWrapping];
 
@@ -188,7 +188,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
             return null;
           }
 
-          const { language, value } = getSnippetDisplay(code);
+          const { language, code: displayCode } = getReadonlyCodeDisplay(code);
 
           return (
             <div
@@ -216,7 +216,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
                   language={language}
                   className="cm border rounded overflow-hidden"
                   extensions={extensions}
-                  value={value}
+                  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/__tests__/readonly-python-code.test.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ReadonlyCode } from "../readonly-python-code";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+/**
+ * The only button is the show/hide toggle: copy is disabled and the
+ * insert-cell button is off by default.
+ */
+function renderReadonly(props: { initiallyHideCode?: boolean }) {
+  return render(
+    <TooltipProvider>
+      <ReadonlyCode code="x = 1" showCopyCode={false} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function isCollapsed(root: ParentNode) {
+  return root.querySelector(".cm")?.classList.contains("opacity-20") ?? false;
+}
+
+describe("ReadonlyCode", () => {
+  it("starts collapsed when initiallyHideCode is true", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("starts expanded when initiallyHideCode is false", () => {
+    const { container } = renderReadonly({ initiallyHideCode: false });
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("starts expanded when initiallyHideCode is unset", () => {
+    const { container } = renderReadonly({});
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("toggles visibility locally on click", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    const toggle = screen.getByRole("button");
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(false);
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("keeps each instance's visibility independent", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <ReadonlyCode
+          code="a = 1"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+        <ReadonlyCode
+          code="b = 2"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+      </TooltipProvider>,
+    );
+    const [firstToggle] = screen.getAllByRole("button");
+    const [first, second] = container.querySelectorAll(".cm");
+
+    fireEvent.click(firstToggle);
+
+    expect(first.classList.contains("opacity-20")).toBe(false);
+    expect(second.classList.contains("opacity-20")).toBe(true);
+  });
+});