@marimo-team/frontend 0.23.10-dev9 → 0.23.11-dev1

package/src/components/datasources/__tests__/filter-empty.test.ts

@@ -0,0 +1,183 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type {
+  Database,
+  DatabaseSchema,
+  DataTable,
+} from "@/core/kernel/messages";
+import { filterEmptyDatabases } from "../datasources";
+
+function makeTable(name: string): DataTable {
+  return {
+    name,
+    columns: [],
+    source: "memory",
+    source_type: "local",
+    type: "table",
+    engine: null,
+    indexes: null,
+    num_columns: null,
+    num_rows: null,
+    variable_name: null,
+    primary_keys: null,
+  };
+}
+
+function makeSchema(opts: {
+  name: string;
+  tables: DataTable[];
+  tables_resolved?: boolean;
+}): DatabaseSchema {
+  return {
+    name: opts.name,
+    tables: opts.tables,
+    tables_resolved: opts.tables_resolved ?? true,
+  };
+}
+
+function makeDatabase(
+  name: string,
+  schemas: DatabaseSchema[],
+  schemas_resolved = true,
+): Database {
+  return {
+    name,
+    dialect: "duckdb",
+    schemas,
+    schemas_resolved,
+    engine: null,
+  };
+}
+
+describe("filterEmptyDatabases", () => {
+  it("hides schemas whose tables are resolved and empty", () => {
+    const databases = [
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+        makeSchema({ name: "empty_schema", tables: [] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ]);
+  });
+
+  it("preserves databases whose schemas have not been resolved yet (lazy state)", () => {
+    const databases = [
+      makeDatabase("not_loaded_yet", [], /* schemas_resolved */ false),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("not_loaded_yet", [], false),
+    ]);
+  });
+
+  it("hides databases that have been resolved as empty", () => {
+    const databases = [
+      makeDatabase("really_empty", [], /* schemas_resolved */ true),
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ]);
+  });
+
+  it("hides databases whose schemas all filtered to empty", () => {
+    const databases = [
+      makeDatabase("only_empty", [
+        makeSchema({ name: "a", tables: [] }),
+        makeSchema({ name: "b", tables: [] }),
+      ]),
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ]);
+  });
+
+  it("treats missing schemas_resolved as resolved (backward compatible)", () => {
+    const databases = [
+      { name: "memory", dialect: "duckdb", schemas: [], engine: null },
+    ] as Database[];
+
+    expect(filterEmptyDatabases(databases)).toEqual([]);
+  });
+
+  it("preserves schemas whose tables have not been resolved yet", () => {
+    const databases = [
+      makeDatabase("snowflake_db", [
+        // include_tables=False was used; the schema is not actually empty,
+        // tables will be fetched lazily on expand.
+        makeSchema({ name: "public", tables: [], tables_resolved: false }),
+        makeSchema({ name: "audit", tables: [], tables_resolved: false }),
+        makeSchema({
+          name: "really_empty",
+          tables: [],
+          tables_resolved: true,
+        }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("snowflake_db", [
+        makeSchema({ name: "public", tables: [], tables_resolved: false }),
+        makeSchema({ name: "audit", tables: [], tables_resolved: false }),
+      ]),
+    ]);
+  });
+
+  it("treats missing tables_resolved as resolved (backward compatible)", () => {
+    // Older payloads predating the new flag may omit it; default semantics
+    // treat the schema as resolved/authoritative.
+    const databases = [
+      makeDatabase("memory", [
+        { name: "main", tables: [makeTable("t1")] },
+        { name: "empty_schema", tables: [] },
+      ] as DatabaseSchema[]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("memory", [
+        { name: "main", tables: [makeTable("t1")] },
+      ] as DatabaseSchema[]),
+    ]);
+  });
+
+  it("returns the same reference when nothing was filtered", () => {
+    const databases = [
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toBe(databases);
+  });
+
+  it("does not mutate the input", () => {
+    const databases = [
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+        makeSchema({ name: "empty_schema", tables: [] }),
+      ]),
+    ];
+    const snapshot = JSON.parse(JSON.stringify(databases));
+
+    filterEmptyDatabases(databases);
+
+    expect(databases).toEqual(snapshot);
+  });
+});

package/src/components/datasources/datasources.tsx

@@ -1,13 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { CommandList } from "cmdk";
-import { atom, useAtomValue, useSetAtom } from "jotai";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { DatabaseLogo } from "@/components/databases/icon";
-import { RefreshIconButton } from "@/components/editor/file-tree/tree-actions";
+import {
+  RefreshIconButton,
+  VisibilityToggleButton,
+} from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Button } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
@@ -52,6 +56,7 @@ import { sortBy } from "@/utils/arrays";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import {
   DatabaseIcon,
   SchemaIcon,
@@ -116,6 +121,63 @@ const sortedTablesAtom = atom((get) => {
   });
 });
 
+/**
+ * Whether to hide empty schemas and databases (those with no tables) in the
+ * datasources panel.
+ */
+export const hideEmptyDatasourcesAtom = atomWithStorage<boolean>(
+  "marimo:datasources:hideEmpty",
+  false,
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
+
+function isKnownEmptySchema(schema: DatabaseSchema): boolean {
+  return schema.tables_resolved !== false && schema.tables.length === 0;
+}
+
+/**
+ * Apply the "hide empty" filter to a connection's databases.
+ *
+ * - Schemas with confirmed-empty table lists are hidden.
+ * - Databases are hidden when either (a) their schemas have been enumerated
+ *   and the list is empty, or (b) every schema in them was hidden by the
+ *   schema-level filter.
+ * - Databases / schemas whose contents haven't been resolved yet (deferred
+ *   discovery — `schemas_resolved === false` or `tables_resolved === false`)
+ *   are preserved so the user can expand them to trigger a fetch.
+ */
+export function filterEmptyDatabases(databases: Database[]): Database[] {
+  let changed = false;
+  const result: Database[] = [];
+  for (const database of databases) {
+    // Known-empty database: schema list was enumerated and is empty.
+    if (database.schemas_resolved !== false && database.schemas.length === 0) {
+      changed = true;
+      continue;
+    }
+    // Deferred schema discovery — keep so the user can expand and load.
+    if (database.schemas.length === 0) {
+      result.push(database);
+      continue;
+    }
+    const visibleSchemas = database.schemas.filter(
+      (schema) => !isKnownEmptySchema(schema),
+    );
+    if (visibleSchemas.length === 0) {
+      changed = true;
+      continue;
+    }
+    if (visibleSchemas.length === database.schemas.length) {
+      result.push(database);
+      continue;
+    }
+    changed = true;
+    result.push({ ...database, schemas: visibleSchemas });
+  }
+  return changed ? result : databases;
+}
+
 /**
  * This atom is used to get the data connections that are available to the user.
  * It filters out the internal engines if it has no databases or if it has only the in-memory database and no schemas.
@@ -152,10 +214,27 @@ export const connectionsAtom = atom((get) => {
 
 export const DataSources: React.FC = () => {
   const [searchValue, setSearchValue] = React.useState<string>("");
+  const [hideEmpty, setHideEmpty] = useAtom(hideEmptyDatasourcesAtom);
 
   const closeAllColumns = useSetAtom(closeAllColumnsAtom);
   const tables = useAtomValue(sortedTablesAtom);
-  const dataConnections = useAtomValue(connectionsAtom);
+  const rawConnections = useAtomValue(connectionsAtom);
+
+  const dataConnections = React.useMemo(() => {
+    if (!hideEmpty) {
+      return rawConnections;
+    }
+    let changed = false;
+    const filtered = rawConnections.map((connection) => {
+      const databases = filterEmptyDatabases(connection.databases);
+      if (databases === connection.databases) {
+        return connection;
+      }
+      changed = true;
+      return { ...connection, databases };
+    });
+    return changed ? filtered : rawConnections;
+  }, [rawConnections, hideEmpty]);
 
   if (tables.length === 0 && dataConnections.length === 0) {
     return (
@@ -204,6 +283,16 @@ export const DataSources: React.FC = () => {
           </button>
         )}
 
+        <VisibilityToggleButton
+          data-testid="datasources-hide-empty-button"
+          isVisible={!hideEmpty}
+          onToggle={() => setHideEmpty(!hideEmpty)}
+          showTooltip="Show empty schemas and databases"
+          hideTooltip="Hide empty schemas and databases"
+          size="sm"
+          className="px-2 rounded-none focus-visible:outline-hidden"
+        />
+
         <AddConnectionDialog>
           <Button
             variant="ghost"

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -27,7 +27,7 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
-import { stagedAICellsAtom } from "@/core/ai/staged-cells";
+import { stripWrappingBackticks } from "@/core/ai/strip-wrapping-backticks";
 import { type AiCompletionCell, includeOtherCellsAtom } from "@/core/ai/state";
 import type { CellId } from "@/core/cells/ids";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
@@ -45,6 +45,7 @@ import {
   RejectCompletionButton,
 } from "./completion-handlers";
 import { addContextCompletion, getAICompletionBody } from "./completion-utils";
+import { stagedAICellsAtom } from "@/core/ai/staged-cells";
 
 const Original = CodeMirrorMerge.Original;
 const Modified = CodeMirrorMerge.Modified;
@@ -123,7 +124,6 @@ export const AiCompletionEditor: React.FC<Props> = ({
     api: runtimeManager.getAiURL("completion").toString(),
     headers: runtimeManager.headers(),
     initialInput: initialPrompt,
-    streamProtocol: "text",
     // Throttle the messages and data updates to 100ms
     experimental_throttle: 100,
     body: {
@@ -143,13 +143,14 @@ export const AiCompletionEditor: React.FC<Props> = ({
       });
     },
     onFinish: (_prompt, completion) => {
-      // Remove trailing new lines
-      setCompletion(completion.trimEnd());
+      setCompletion(stripWrappingBackticks(completion).trimEnd());
     },
   });
 
   const inputRef = React.useRef<ReactCodeMirrorRef>(null);
-  const completion = untrimmedCompletion.trimEnd();
+  const completion = stripWrappingBackticks(untrimmedCompletion, {
+    streaming: isLoading,
+  }).trimEnd();
 
   const initialSubmit = useCallback(() => {
     if (triggerImmediately && !isLoading && initialPrompt) {

package/src/components/editor/cell/code/cell-editor.tsx

@@ -2,8 +2,9 @@
 import { historyField } from "@codemirror/commands";
 import { EditorState, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useAtom, useAtomValue } from "jotai";
-import React, { memo, useEffect, useMemo, useRef } from "react";
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
@@ -14,6 +15,7 @@ import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import { setupCodeMirror } from "@/core/codemirror/cm";
 import { acceptCompletionOnEnterAtom } from "@/core/codemirror/completion/accept-on-enter-atom";
+import { editorMountScheduler } from "@/core/codemirror/editor-mount-scheduler";
 import {
   getInitialLanguageAdapter,
   languageAdapterState,
@@ -45,6 +47,7 @@ import {
 } from "../../navigation/navigation";
 import { useDeleteCellCallback } from "../useDeleteCell";
 import { useSplitCellCallback } from "../useSplitCell";
+import { CodePlaceholder } from "./code-placeholder";
 import { LanguageToggles } from "./language-toggle";
 
 export interface CellEditorProps
@@ -405,38 +408,45 @@ const CellEditorInternal = ({
     // Clear the serialized state so that we don't re-create the editor next time
     cellActions.clearSerializedEditorState({ cellId });
   });
+  const [isEditorMounted, setIsEditorMounted] = useState(
+    serializedEditorState !== null,
+  );
 
+  // Build the editor. Deserialize eagerly; otherwise queue an async build so
+  // large notebooks stay responsive while editors come online progressively.
   useEffect(() => {
-    if (serializedEditorState === null) {
-      if (editorViewRef.current === null) {
-        handleInitializeEditor();
-      } else {
-        // If the editor already exists, reconfigure it with the new extensions.
-        handleReconfigureEditor();
-      }
-    } else {
-      handleDeserializeEditor();
+    if (editorViewRef.current !== null) {
+      setIsEditorMounted(true);
+      return;
     }
-
-    if (
-      editorViewRef.current !== null &&
-      editorViewParentRef &&
-      editorViewParentRef.current !== null
-    ) {
-      // Always replace the children in case the editor view was re-created.
-      editorViewParentRef.current.replaceChildren(editorViewRef.current.dom);
+    if (serializedEditorState !== null) {
+      handleDeserializeEditor();
+      setIsEditorMounted(true);
+      return;
     }
+    editorMountScheduler.request(cellId, () => {
+      if (editorViewRef.current !== null) {
+        return;
+      }
+      handleInitializeEditor();
+      setIsEditorMounted(true);
+    });
+    return () => editorMountScheduler.cancel(cellId);
   }, [
-    handleInitializeEditor,
-    handleReconfigureEditor,
-    handleDeserializeEditor,
+    cellId,
     editorViewRef,
-    editorViewParentRef,
+    handleDeserializeEditor,
+    handleInitializeEditor,
     serializedEditorState,
-    // Props to trigger reconfiguration
-    extensions,
   ]);
 
+  useEffect(() => {
+    if (editorViewRef.current === null) {
+      return;
+    }
+    handleReconfigureEditor();
+  }, [handleReconfigureEditor, extensions, editorViewRef]);
+
   // Destroy the editor when the component is unmounted
   useEffect(() => {
     const ev = editorViewRef.current;
@@ -445,6 +455,26 @@ const CellEditorInternal = ({
     };
   }, [editorViewRef]);
 
+  // Prioritize building this cell's editor when it scrolls into view, so the
+  // visible region fills in first instead of waiting for the top-to-bottom
+  // queue. The margin builds cells just before they reach the viewport.
+  // uidotdev sets threshold default to 1. Set it 0 so cells are prioritized
+  // at 300px.
+  const [intersectionRef, intersection] = useIntersectionObserver({
+    rootMargin: "300px 0px",
+    threshold: 0,
+  });
+  useEffect(() => {
+    if (isEditorMounted) {
+      return;
+    }
+    if (intersection?.isIntersecting) {
+      editorMountScheduler.prioritize(cellId);
+    } else {
+      editorMountScheduler.deprioritize(cellId);
+    }
+  }, [isEditorMounted, intersection?.isIntersecting, cellId]);
+
   const navigationProps = useCellEditorNavigationProps(cellId, editorViewRef);
 
   let editorClassName = "";
@@ -489,14 +519,22 @@ const CellEditorInternal = ({
       runCell={handleRunCell}
       outputArea={outputArea}
     >
-      <div className="relative w-full" {...navigationProps}>
-        <CellCodeMirrorEditor
-          className={editorClassName}
-          editorView={editorViewRef.current}
-          ref={editorViewParentRef}
-          hidden={hidden}
-          showHiddenCode={showHiddenCode}
-        />
+      <div
+        className="relative w-full"
+        ref={intersectionRef}
+        {...navigationProps}
+      >
+        {isEditorMounted ? (
+          <CellCodeMirrorEditor
+            className={editorClassName}
+            editorView={editorViewRef.current}
+            ref={editorViewParentRef}
+            hidden={hidden}
+            showHiddenCode={showHiddenCode}
+          />
+        ) : (
+          <CodePlaceholder code={code} className={editorClassName} />
+        )}
         {!hidden && showLanguageToggles && (
           <div className="absolute top-1 right-5">
             <LanguageToggles

package/src/components/editor/cell/code/code-placeholder.css

@@ -0,0 +1,18 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+.mo-code-placeholder {
+  --mo-skeleton-bar: color-mix(in srgb, var(--muted), var(--foreground) 18%);
+  cursor: default;
+  padding: 4px 10px;
+  font-size: var(--cm-font-size, 0.875rem);
+}
+
+.mo-code-placeholder-line {
+  display: flex;
+  align-items: center;
+  height: 1.5em;
+}
+
+.mo-code-placeholder-bar {
+  height: 0.7em;
+  background-color: var(--mo-skeleton-bar);
+}

package/src/components/editor/cell/code/code-placeholder.tsx

@@ -0,0 +1,47 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import "./code-placeholder.css";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/utils/cn";
+
+interface CodePlaceholderProps {
+  code: string;
+  className?: string;
+}
+
+// Bound the rendered bars so a very long cell does not create excessive nodes.
+const MAX_LINES = 50;
+const MIN_LINE_WIDTH_CH = 4;
+const MAX_LINE_WIDTH_CH = 60;
+
+function getLineWidthCh(length: number): number {
+  return Math.min(MAX_LINE_WIDTH_CH, Math.max(MIN_LINE_WIDTH_CH, length));
+}
+
+/**
+ * Stand-in shown while a cell's CodeMirror editor has not been built yet.
+ * one skeleton bar per code line, so the final render doesn't cause a big jump.
+ */
+export const CodePlaceholder = ({ code, className }: CodePlaceholderProps) => {
+  const lines = code.split("\n", MAX_LINES);
+  return (
+    <div
+      className={cn("cm", "mo-code-placeholder", className)}
+      data-testid="cell-editor-placeholder"
+      aria-hidden={true}
+    >
+      {lines.map((line, index) => {
+        const length = line.trimEnd().length;
+        return (
+          <div key={index} className="mo-code-placeholder-line">
+            {length > 0 && (
+              <Skeleton
+                className="mo-code-placeholder-bar"
+                style={{ width: `${getLineWidthCh(length)}ch` }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/editor/cell/code/language-toggle.tsx

@@ -17,6 +17,11 @@ interface LanguageTogglesProps {
   code: string;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   onAfterToggle: () => void;
+  /**
+   * Classes for the wrapper element. Defaults to the absolutely-positioned,
+   * hover-revealed placement used inside the notebook cell editor.
+   */
+  className?: string;
 }
 
 export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
@@ -24,6 +29,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   code,
   currentLanguageAdapter,
   onAfterToggle,
+  className = "absolute right-3 top-2 z-20 flex hover-action gap-1",
 }) => {
   const canUseMarkdown = useMemo(
     () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
@@ -35,7 +41,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   );
 
   return (
-    <div className="absolute right-3 top-2 z-20 flex hover-action gap-1">
+    <div className={className}>
       <LanguageToggle
         editorView={editorView}
         currentLanguageAdapter={currentLanguageAdapter}