@marimo-team/frontend 0.23.2-dev3 → 0.23.2-dev30

package/src/core/cells/__tests__/logs.test.ts

@@ -5,6 +5,11 @@ import { cellId } from "@/__tests__/branded";
 import type { CellMessage } from "../../kernel/messages";
 import { formatLogTimestamp, getCellLogsForMessage } from "../logs";
 
+// Stable mock reference so every (re)import of use-toast sees the same spy,
+// even after vi.resetModules() clears the module cache between tests.
+const { toastMock } = vi.hoisted(() => ({ toastMock: vi.fn() }));
+vi.mock("@/components/ui/use-toast", () => ({ toast: toastMock }));
+
 describe("getCellLogsForMessage", () => {
   beforeEach(() => {
     // Mock console.log to avoid cluttering test output
@@ -324,6 +329,102 @@ describe("getCellLogsForMessage", () => {
   });
 });
 
+describe("getCellLogsForMessage - internal error toast", () => {
+  // Re-imported per test after vi.resetModules() so the module-level
+  // `didAlreadyToastError` flag starts fresh and all jotai atom references
+  // (initialModeAtom, etc.) match the versions used by the reset logs.ts.
+  let getLogs: typeof import("../logs").getCellLogsForMessage;
+  let store: typeof import("@/core/state/jotai").store;
+  let initialModeAtom: typeof import("@/core/mode").initialModeAtom;
+
+  beforeEach(async () => {
+    vi.spyOn(console, "log").mockImplementation(() => {
+      // no-op
+    });
+    vi.resetModules();
+    ({ getCellLogsForMessage: getLogs } = await import("../logs"));
+    ({ store } = await import("@/core/state/jotai"));
+    ({ initialModeAtom } = await import("@/core/mode"));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+  });
+
+  const makeErrorCellMessage = (id: CellMessage["cell_id"]): CellMessage => ({
+    cell_id: id,
+    console: [],
+    output: {
+      mimetype: "application/vnd.marimo+error",
+      data: [
+        {
+          type: "exception",
+          exception_type: "ValueError",
+          msg: "something exploded",
+          traceback: ["File foo.py, line 1", "ValueError: something exploded"],
+        },
+      ],
+      channel: "marimo-error",
+      timestamp: 0,
+    } as unknown as CellMessage["output"],
+    status: "idle",
+    stale_inputs: null,
+    timestamp: 0,
+  });
+
+  test("shows toast for internal errors in app (read) mode", () => {
+    store.set(initialModeAtom, "read");
+
+    getLogs(makeErrorCellMessage(cellId("cell-err-1")));
+
+    expect(toastMock).toHaveBeenCalledTimes(1);
+    expect(toastMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "An internal error occurred",
+        variant: "danger",
+      }),
+    );
+  });
+
+  test("does not show toast for internal errors in edit mode", () => {
+    store.set(initialModeAtom, "edit");
+
+    getLogs(makeErrorCellMessage(cellId("cell-err-2")));
+
+    expect(toastMock).not.toHaveBeenCalled();
+  });
+
+  test("edit-mode errors do not consume the once-per-session toast slot", () => {
+    // Errors received while in edit mode should be silently skipped...
+    store.set(initialModeAtom, "edit");
+    getLogs(makeErrorCellMessage(cellId("cell-err-3")));
+    expect(toastMock).not.toHaveBeenCalled();
+
+    // ...and a subsequent error in app mode should still toast.
+    store.set(initialModeAtom, "read");
+    getLogs(makeErrorCellMessage(cellId("cell-err-4")));
+    expect(toastMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("toast only fires once across multiple app-mode errors", () => {
+    store.set(initialModeAtom, "read");
+
+    getLogs(makeErrorCellMessage(cellId("cell-err-5")));
+    getLogs(makeErrorCellMessage(cellId("cell-err-6")));
+
+    expect(toastMock).toHaveBeenCalledTimes(1);
+  });
+
+  test("suppresses toast when initial mode has not been set", () => {
+    // Leave initialModeAtom at its default (undefined); getInitialAppMode
+    // will throw and the logic should swallow it without toasting.
+    getLogs(makeErrorCellMessage(cellId("cell-err-7")));
+
+    expect(toastMock).not.toHaveBeenCalled();
+  });
+});
+
 describe("formatLogTimestamp", () => {
   test("formats unix timestamp correctly", () => {
     // January 1, 2024, 12:00:00 PM UTC

package/src/core/cells/logs.ts

@@ -7,6 +7,7 @@ import { Strings } from "@/utils/strings";
 import type { CellMessage, OutputMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
 import type { CellId } from "./ids";
+import { initialModeAtom } from "../mode";
 import { store } from "../state/jotai";
 import { tracebackModalAtom } from "../errors/traceback-atom";
 import React from "react";
@@ -83,7 +84,14 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
         error.type === "internal",
     );
 
-    if (exceptionErrors.length > 0 && !didAlreadyToastError) {
+    // Only show the toast in app mode: edit mode already surfaces errors in
+    // the cell UI, so toasting there would be noisy and duplicative. Read the
+    // atom directly so an unset initial mode (e.g. in tests/islands) simply
+    // returns undefined instead of throwing and masking real errors.
+    const isAppMode = store.get(initialModeAtom) === "read";
+
+    // Only show toast once, and only in app mode
+    if (exceptionErrors.length > 0 && !didAlreadyToastError && isAppMode) {
       didAlreadyToastError = true;
 
       // Find first error with a traceback

package/src/core/codemirror/__tests__/__snapshots__/setup.test.ts.snap

@@ -9,9 +9,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
@@ -27,9 +25,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
@@ -118,15 +114,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
-      "run": "cursorLineDown",
-      "shift": "selectLineDown",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "ArrowUp": [
@@ -136,15 +129,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
-      "run": "cursorLineUp",
-      "shift": "selectLineUp",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "Backspace": [

package/src/core/codemirror/cells/extensions.ts

@@ -169,8 +169,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowUp",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);
@@ -188,8 +186,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowDown",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);

package/src/core/codemirror/keymaps/keymaps.ts

@@ -1,8 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  cursorCharLeft,
+  cursorCharRight,
+  cursorLineDown,
+  cursorLineUp,
   insertNewlineAndIndent,
   defaultKeymap as originalDefaultKeymap,
+  selectCharLeft,
+  selectCharRight,
+  selectLineDown,
+  selectLineUp,
   toggleBlockComment,
   toggleComment,
 } from "@codemirror/commands";
@@ -13,7 +21,7 @@ import {
   type KeyBinding,
   keymap,
 } from "@codemirror/view";
-import { getCM, vim } from "@replit/codemirror-vim";
+import { type CodeMirror, getCM, vim } from "@replit/codemirror-vim";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { logNever } from "@/utils/assertNever";
@@ -62,6 +70,12 @@ export function keymapBundle(
             },
           ),
         ),
+        // Arrow keys: use CodeMirror's cursor movement except in vim visual
+        // mode, where vim must handle them to maintain selection.
+        // The original cursorLineUp/Down bindings from the default keymap are
+        // filtered out (see defaultVimKeymap) because their preventDefault
+        // flag blocks vim's handler even when their run function returns false.
+        keymap.of(vimVisualModeArrowKeyBindings()),
         // Base vim mode
         vim({ status: false }),
         // Custom vim keymaps for cell navigation
@@ -101,12 +115,22 @@ const overrideKeymap = (keymap: HotkeyProvider): readonly KeyBinding[] => {
 };
 
 const defaultVimKeymap = once(() => {
-  const toRemove = new Set(["Enter", "Ctrl-v"]);
+  const toRemove = new Set([
+    "Enter",
+    "Ctrl-v",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+  ]);
   // Remove conflicting keys from the keymap
   // Enter (<CR>) adds a new line
   //   - it should just go to the next line
   // Ctrl-v goes to the bottom of the cell
   //   - should enter blockwise visual mode
+  // ArrowUp/ArrowDown (cursorLineUp/Down) always handle the event and have
+  //   preventDefault, which blocks vim's handler from processing arrow keys.
+  //   Replaced with visual-mode-aware wrappers in keymapBundle.
   return defaultKeymap().filter(
     (k) => !toRemove.has(k.key || k.mac || k.linux || k.win || ""),
   );
@@ -155,6 +179,49 @@ function doubleCharacterListener(
   ]);
 }
 
+function isInVimVisualMode(cm: CodeMirror | undefined | null): boolean {
+  return cm?.state.vim?.visualMode === true;
+}
+
+/**
+ * In vim visual mode, arrow keys must be handled by vim to maintain selection.
+ * Wrap each arrow key's run and shift so they defer to vim in visual mode,
+ * but use CodeMirror's cursor commands in all other modes.
+ */
+function vimVisualModeArrowKeyBindings(): KeyBinding[] {
+  const wrap =
+    (cmd: Command): Command =>
+    (view) => {
+      if (isInVimVisualMode(getCM(view))) {
+        return false;
+      }
+      return cmd(view);
+    };
+
+  return [
+    {
+      key: "ArrowDown",
+      run: wrap(cursorLineDown),
+      shift: wrap(selectLineDown),
+    },
+    {
+      key: "ArrowUp",
+      run: wrap(cursorLineUp),
+      shift: wrap(selectLineUp),
+    },
+    {
+      key: "ArrowLeft",
+      run: wrap(cursorCharLeft),
+      shift: wrap(selectCharLeft),
+    },
+    {
+      key: "ArrowRight",
+      run: wrap(cursorCharRight),
+      shift: wrap(selectCharRight),
+    },
+  ];
+}
+
 export const visibleForTesting = {
   defaultKeymap,
   defaultVimKeymap,

package/src/core/codemirror/language/languages/python.ts

@@ -36,7 +36,7 @@ import { FederatedLanguageServerClient } from "../../lsp/federated-lsp";
 import { NotebookLanguageServerClient } from "../../lsp/notebook-lsp";
 import { createTransport } from "../../lsp/transports";
 import { CellDocumentUri, type ILanguageServerClient } from "../../lsp/types";
-import { getLSPDocumentRootUri } from "../../lsp/utils";
+import { getLspRootUri, getLspWorkspaceFolders } from "../../lsp/utils";
 import {
   clickablePlaceholderExtension,
   smartPlaceholderExtension,
@@ -54,8 +54,8 @@ const pylspClient = once((lspConfig: LSPConfig) => {
 
   const lspClientOpts = {
     transport,
-    rootUri: getLSPDocumentRootUri(),
-    workspaceFolders: [],
+    rootUri: getLspRootUri(),
+    workspaceFolders: getLspWorkspaceFolders(),
   };
   const config = lspConfig?.pylsp;
 
@@ -161,8 +161,8 @@ const tyLspClient = once((_: LSPConfig) => {
 
   const lspClientOpts = {
     transport,
-    rootUri: getLSPDocumentRootUri(),
-    workspaceFolders: [],
+    rootUri: getLspRootUri(),
+    workspaceFolders: getLspWorkspaceFolders(),
   };
 
   // We wrap the client in a NotebookLanguageServerClient to add some
@@ -192,8 +192,8 @@ const pyreflyClient = once(
 
     const lspClientOpts = {
       transport,
-      rootUri: getLSPDocumentRootUri(),
-      workspaceFolders: [],
+      rootUri: getLspRootUri(),
+      workspaceFolders: getLspWorkspaceFolders(),
     };
 
     // We wrap the client in a NotebookLanguageServerClient to add some
@@ -230,8 +230,8 @@ const pyrightClient = once((_: LSPConfig) => {
 
   const lspClientOpts = {
     transport,
-    rootUri: getLSPDocumentRootUri(),
-    workspaceFolders: [],
+    rootUri: getLspRootUri(),
+    workspaceFolders: getLspWorkspaceFolders(),
   };
 
   // We wrap the client in a NotebookLanguageServerClient to add some

package/src/core/codemirror/lsp/__tests__/notebook-lsp.test.ts

@@ -12,6 +12,7 @@ import { cellId } from "@/__tests__/branded";
 import type { CellId } from "@/core/cells/ids";
 import { store } from "@/core/state/jotai";
 import { topologicalCodesAtom } from "../../copilot/getCodes";
+import { lspWorkspaceAtom } from "@/core/saving/file-state";
 import { languageAdapterState } from "../../language/extension";
 import { PythonLanguageAdapter } from "../../language/languages/python";
 import { languageMetadataField } from "../../language/metadata";
@@ -285,6 +286,12 @@ describe("NotebookLanguageServerClient", () => {
           },
         };
       }
+      if (atom === lspWorkspaceAtom) {
+        return {
+          rootUri: "file:///project",
+          documentUri: "file:///project/__marimo_notebook__.py",
+        };
+      }
       return undefined;
     });
 
@@ -421,7 +428,7 @@ describe("NotebookLanguageServerClient", () => {
       expect(result).toEqual(mockCompletionResponse);
       expect(mockClient.textDocumentCompletion).toHaveBeenCalledWith(
         expect.objectContaining({
-          textDocument: { uri: "file:///__marimo_notebook__.py" },
+          textDocument: { uri: "file:///project/__marimo_notebook__.py" },
         }),
       );
     });

package/src/core/codemirror/lsp/federated-lsp.ts

@@ -3,7 +3,7 @@
 import type * as LSP from "vscode-languageserver-protocol";
 import { Objects } from "@/utils/objects";
 import type { ILanguageServerClient } from "./types";
-import { getLSPDocument } from "./utils";
+import { getLspDocumentUri } from "./utils";
 
 function removeFalseyValues<T extends object>(obj: T): T {
   return Objects.filter(obj, (value) => value !== false && value !== null) as T;
@@ -20,7 +20,7 @@ export class FederatedLanguageServerClient implements ILanguageServerClient {
 
   constructor(clients: ILanguageServerClient[]) {
     this.clients = clients;
-    this.documentUri = getLSPDocument();
+    this.documentUri = getLspDocumentUri();
   }
 
   onNotification(

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -22,7 +22,7 @@ import {
   type ILanguageServerClient,
   isClientWithNotify,
 } from "./types";
-import { getLSPDocument } from "./utils";
+import { getLspDocumentUri } from "./utils";
 
 /**
  * Check if a variable name is private (starts with underscore but not dunder).
@@ -189,7 +189,7 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
       EditorView | null | undefined
     > = defaultGetNotebookEditors,
   ) {
-    this.documentUri = getLSPDocument();
+    this.documentUri = getLspDocumentUri();
     this.getNotebookEditors = getNotebookEditors;
     this.initialSettings = initialSettings;
     this.client = client;

package/src/core/codemirror/lsp/utils.ts

@@ -1,11 +1,26 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { getFilenameFromDOM } from "@/core/dom/htmlUtils";
-import { Paths } from "@/utils/paths";
+import { lspWorkspaceAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
 
-export function getLSPDocument() {
-  return `file://${getFilenameFromDOM() ?? "/__marimo_notebook__.py"}`;
+export function getLspRootUri() {
+  const lspWorkspace = store.get(lspWorkspaceAtom);
+  // The backend provides rootUri for active notebook sessions.
+  // For non-notebook pages (home, gallery), lspWorkspace is null,
+  // so return a valid file URI fallback.
+  return lspWorkspace?.rootUri ?? "file:///";
 }
 
-export function getLSPDocumentRootUri() {
-  return `file://${Paths.dirname(getFilenameFromDOM() ?? "/")}`;
+export function getLspWorkspaceFolders() {
+  const lspWorkspace = store.get(lspWorkspaceAtom);
+  const rootUri = lspWorkspace?.rootUri;
+  // Return workspace folders only if rootUri is set; empty array otherwise.
+  return rootUri ? [{ uri: rootUri, name: "marimo" }] : [];
+}
+
+export function getLspDocumentUri() {
+  const lspWorkspace = store.get(lspWorkspaceAtom);
+  // The backend provides documentUri for active notebook sessions.
+  // For non-notebook pages (home, gallery), lspWorkspace is null,
+  // so return a valid file URI fallback.
+  return lspWorkspace?.documentUri ?? "file:///__marimo_notebook__.py";
 }

package/src/core/constants.ts

@@ -7,6 +7,7 @@ export const Constants = {
   discordLink: "https://marimo.io/discord?ref=notebook",
   docsPage: "https://docs.marimo.io",
   youtube: "https://www.youtube.com/@marimo-team",
+  molab: "https://molab.marimo.io",
 };
 
 export const KnownQueryParams = {

package/src/plugins/impl/DataTablePlugin.tsx

@@ -28,10 +28,7 @@ import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
-import {
-  type ColumnFilterValue,
-  filterToFilterCondition,
-} from "@/components/data-table/filters";
+import { filtersToFilterGroup } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import {
@@ -86,8 +83,8 @@ import { rpc } from "../core/rpc";
 import { Banner } from "./common/error-banner";
 import { Labeled } from "./common/labeled";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
 } from "./data-frames/schema";
 
@@ -213,7 +210,7 @@ type DataTableFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
     max_columns?: number | null;
@@ -312,7 +309,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
           max_columns: z.number().nullable().optional(),
@@ -578,12 +575,7 @@ export const LoadingDataTableComponent = memo(
         query: searchQuery,
         page_number: paginationState.pageIndex,
         page_size: paginationState.pageSize,
-        filters: filters.flatMap((filter) => {
-          return filterToFilterCondition(
-            filter.id,
-            filter.value as ColumnFilterValue,
-          );
-        }),
+        filters: filtersToFilterGroup(filters),
       });
 
       if (canShowInitialPage) {
@@ -641,12 +633,7 @@ export const LoadingDataTableComponent = memo(
           page_size: 1,
           sort: sortArgs,
           query: searchQuery,
-          filters: filters.flatMap((filter) => {
-            return filterToFilterCondition(
-              filter.id,
-              filter.value as ColumnFilterValue,
-            );
-          }),
+          filters: filtersToFilterGroup(filters),
           // Do not clamp number of columns since we are viewing a single row
           max_columns: null,
         });

package/src/plugins/impl/TabsPlugin.tsx

@@ -9,12 +9,14 @@ import {
 } from "../../components/ui/tabs";
 import { renderHTML } from "../core/RenderHTML";
 import type { IPlugin, IPluginProps } from "../types";
+import { Labeled } from "./common/labeled";
 
 interface Data {
   /**
    * The labels for each tab; raw HTML.
    */
   tabs: string[];
+  label: string | null;
 }
 
 // Selected tab index
@@ -25,6 +27,7 @@ export class TabsPlugin implements IPlugin<T, Data> {
 
   validator = z.object({
     tabs: z.array(z.string()),
+    label: z.string().nullable(),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -47,6 +50,7 @@ interface TabComponentProps extends Data {
 
 const TabComponent = ({
   tabs,
+  label,
   value,
   setValue,
   children,
@@ -67,17 +71,19 @@ const TabComponent = ({
   }
 
   return (
-    <Tabs value={internalValue} onValueChange={handleChange}>
-      <TabsList>
-        {tabs.map((tab, index) => (
-          <TabsTrigger key={index} value={index.toString()}>
-            {renderHTML({ html: tab })}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {React.Children.map(children, (child, index) => {
-        return <TabsContent value={index.toString()}>{child}</TabsContent>;
-      })}
-    </Tabs>
+    <Labeled label={label} align="top">
+      <Tabs value={internalValue} onValueChange={handleChange}>
+        <TabsList>
+          {tabs.map((tab, index) => (
+            <TabsTrigger key={index} value={index.toString()}>
+              {renderHTML({ html: tab })}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {React.Children.map(children, (child, index) => {
+          return <TabsContent value={index.toString()}>{child}</TabsContent>;
+        })}
+      </Tabs>
+    </Labeled>
   );
 };

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -29,8 +29,8 @@ import { LoadingDataTableComponent, TableProviders } from "../DataTablePlugin";
 import type { DataType } from "../vega/vega-loader";
 import { TransformPanel, type TransformPanelHandle } from "./panel";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
   type Transformations,
 } from "./schema";
@@ -75,7 +75,7 @@ type PluginFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
   }) => Promise<{
@@ -138,7 +138,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
         }),