@marimo-team/frontend 0.23.16-dev9 → 0.23.17-dev0

package/src/core/codemirror/reactive-references/analyzer.ts

@@ -5,6 +5,7 @@ import type { EditorState } from "@codemirror/state";
 import type { SyntaxNode, Tree, TreeCursor } from "@lezer/common";
 import { type CellId, SETUP_CELL_ID } from "@/core/cells/ids";
 import type { VariableName, Variables } from "@/core/variables/types";
+import { PyKeyword, PyNode, SCOPE_CREATING_NODES } from "../python-node-names";
 
 export interface ReactiveVariableRange {
   from: number;
@@ -12,16 +13,6 @@ export interface ReactiveVariableRange {
   variableName: string;
 }
 
-const SCOPE_CREATING_NODES = new Set([
-  "FunctionDefinition",
-  "LambdaExpression",
-  "ArrayComprehensionExpression",
-  "SetComprehensionExpression",
-  "DictionaryComprehensionExpression",
-  "ComprehensionExpression",
-  "ClassDefinition",
-]);
-
 /**
  * Analyzes the given editor state to find variable names that represent
  * reactive dependencies from other cells (similar to ObservableHQ's approach).
@@ -88,11 +79,11 @@ export function findReactiveVariables(options: {
     }
 
     switch (nodeName) {
-      case "FunctionDefinition": {
+      case PyNode.FunctionDefinition: {
         const subCursor = node.cursor();
         subCursor.firstChild();
         do {
-          if (subCursor.name === "VariableName") {
+          if (subCursor.name === PyNode.VariableName) {
             const functionName = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
@@ -111,11 +102,11 @@ export function findReactiveVariables(options: {
         const paramCursor = node.cursor();
         paramCursor.firstChild();
         do {
-          if (paramCursor.name === "ParamList") {
+          if (paramCursor.name === PyNode.ParamList) {
             const paramListCursor = paramCursor.node.cursor();
             paramListCursor.firstChild();
             do {
-              if (paramListCursor.name === "VariableName") {
+              if (paramListCursor.name === PyNode.VariableName) {
                 const paramName = options.state.doc.sliceString(
                   paramListCursor.from,
                   paramListCursor.to,
@@ -128,16 +119,16 @@ export function findReactiveVariables(options: {
 
         break;
       }
-      case "LambdaExpression": {
+      case PyNode.LambdaExpression: {
         // Lambda params
         const subCursor = node.cursor();
         subCursor.firstChild();
         do {
-          if (subCursor.name === "ParamList") {
+          if (subCursor.name === PyNode.ParamList) {
             const paramCursor = subCursor.node.cursor();
             paramCursor.firstChild();
             do {
-              if (paramCursor.name === "VariableName") {
+              if (paramCursor.name === PyNode.VariableName) {
                 const paramName = options.state.doc.sliceString(
                   paramCursor.from,
                   paramCursor.to,
@@ -150,29 +141,29 @@ export function findReactiveVariables(options: {
 
         break;
       }
-      case "ArrayComprehensionExpression":
-      case "DictionaryComprehensionExpression":
-      case "SetComprehensionExpression":
-      case "ComprehensionExpression": {
+      case PyNode.ArrayComprehensionExpression:
+      case PyNode.DictionaryComprehensionExpression:
+      case PyNode.SetComprehensionExpression:
+      case PyNode.ComprehensionExpression: {
         // Domprehension variables - look for VariableName or TupleExpression after 'for'
         const subCursor = node.cursor();
         subCursor.firstChild();
         let foundFor = false;
         do {
-          if (subCursor.name === "for") {
+          if (subCursor.name === PyKeyword.For) {
             foundFor = true;
-          } else if (foundFor && subCursor.name === "VariableName") {
+          } else if (foundFor && subCursor.name === PyNode.VariableName) {
             const varName = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
             );
             allDeclarations.get(nodeStart)?.add(varName);
-          } else if (foundFor && subCursor.name === "TupleExpression") {
+          } else if (foundFor && subCursor.name === PyNode.TupleExpression) {
             // Handle tuple destructuring like (k, v)
             const tupleCursor = subCursor.node.cursor();
             tupleCursor.firstChild();
             do {
-              if (tupleCursor.name === "VariableName") {
+              if (tupleCursor.name === PyNode.VariableName) {
                 const varName = options.state.doc.sliceString(
                   tupleCursor.from,
                   tupleCursor.to,
@@ -180,18 +171,18 @@ export function findReactiveVariables(options: {
                 allDeclarations.get(nodeStart)?.add(varName);
               }
             } while (tupleCursor.nextSibling());
-          } else if (foundFor && subCursor.name === "in") {
+          } else if (foundFor && subCursor.name === PyKeyword.In) {
             foundFor = false; // Stop collecting variables after 'in'
           }
         } while (subCursor.nextSibling());
 
         break;
       }
-      case "ClassDefinition": {
+      case PyNode.ClassDefinition: {
         const subCursor = node.cursor();
         subCursor.firstChild();
         do {
-          if (subCursor.name === "VariableName") {
+          if (subCursor.name === PyNode.VariableName) {
             const className = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
@@ -210,7 +201,7 @@ export function findReactiveVariables(options: {
 
         break;
       }
-      case "AssignStatement": {
+      case PyNode.AssignStatement: {
         // Assignments - capture all variables being assigned to (variables that come before the last AssignOp)
         const subCursor = node.cursor();
 
@@ -218,7 +209,7 @@ export function findReactiveVariables(options: {
         const assignOpPositions: number[] = [];
         subCursor.firstChild();
         do {
-          if (subCursor.name === "AssignOp") {
+          if (subCursor.name === PyNode.AssignOp) {
             assignOpPositions.push(subCursor.from);
           }
         } while (subCursor.nextSibling());
@@ -248,15 +239,15 @@ export function findReactiveVariables(options: {
 
         break;
       }
-      case "ForStatement": {
+      case PyNode.ForStatement: {
         // For loop variables
         const subCursor = node.cursor();
         subCursor.firstChild();
         let foundFor = false;
         do {
-          if (subCursor.name === "for") {
+          if (subCursor.name === PyKeyword.For) {
             foundFor = true;
-          } else if (foundFor && subCursor.name === "VariableName") {
+          } else if (foundFor && subCursor.name === PyNode.VariableName) {
             const varName = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
@@ -268,14 +259,14 @@ export function findReactiveVariables(options: {
               allDeclarations.set(currentScope, new Set());
             }
             allDeclarations.get(currentScope)?.add(varName);
-          } else if (foundFor && subCursor.name === "in") {
+          } else if (foundFor && subCursor.name === PyKeyword.In) {
             foundFor = false; // Stop collecting variables after 'in'
           }
         } while (subCursor.nextSibling());
 
         break;
       }
-      case "ImportStatement": {
+      case PyNode.ImportStatement: {
         // The grammar emits a single ImportStatement for both `import x [as y]`
         // and `from m import x [as y], ...`. Direct children mix keywords,
         // module-path names (before `import`), imported names, and aliases.
@@ -299,19 +290,19 @@ export function findReactiveVariables(options: {
           pending = null;
         };
         do {
-          if (subCursor.name === "import") {
+          if (subCursor.name === PyKeyword.Import) {
             pastImport = true;
             continue;
           }
           if (!pastImport) {
             continue;
           }
-          if (subCursor.name === "as") {
+          if (subCursor.name === PyKeyword.As) {
             // Drop the imported name; the next VariableName is the alias.
             pending = null;
             continue;
           }
-          if (subCursor.name === "VariableName") {
+          if (subCursor.name === PyNode.VariableName) {
             commit();
             pending = options.state.doc.sliceString(
               subCursor.from,
@@ -325,15 +316,15 @@ export function findReactiveVariables(options: {
 
         break;
       }
-      case "TryStatement": {
+      case PyNode.TryStatement: {
         // Exception variable binding - look for 'as' followed by VariableName
         const subCursor = node.cursor();
         subCursor.firstChild();
         let foundAs = false;
         do {
-          if (subCursor.name === "as") {
+          if (subCursor.name === PyKeyword.As) {
             foundAs = true;
-          } else if (foundAs && subCursor.name === "VariableName") {
+          } else if (foundAs && subCursor.name === PyNode.VariableName) {
             const varName = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
@@ -350,14 +341,14 @@ export function findReactiveVariables(options: {
 
         break;
       }
-      case "WithStatement": {
+      case PyNode.WithStatement: {
         const subCursor = node.cursor();
         subCursor.firstChild();
         let foundAs = false;
         do {
-          if (subCursor.name === "as") {
+          if (subCursor.name === PyKeyword.As) {
             foundAs = true;
-          } else if (foundAs && subCursor.name === "VariableName") {
+          } else if (foundAs && subCursor.name === PyNode.VariableName) {
             const varName = options.state.doc.sliceString(
               subCursor.from,
               subCursor.to,
@@ -405,7 +396,7 @@ export function findReactiveVariables(options: {
     for (const scope of scopeStack) {
       const scopeType = scopeTypes.get(scope);
 
-      if (scopeType === "ClassDefinition") {
+      if (scopeType === PyNode.ClassDefinition) {
         // for class scopes, check position-based declarations
         if (isVariableDeclaredInClassScope(varName, scope, cursorPosition)) {
           return true;
@@ -429,7 +420,7 @@ export function findReactiveVariables(options: {
 
     // Names inside an import statement are module paths, imported names, or
     // aliases — none of them are reactive *uses* of an outer-cell global.
-    if (nodeName === "ImportStatement") {
+    if (nodeName === PyNode.ImportStatement) {
       return;
     }
 
@@ -440,7 +431,7 @@ export function findReactiveVariables(options: {
       currentScopeStack = [...scopeStack, nodeStart];
     }
 
-    if (nodeName === "VariableName") {
+    if (nodeName === PyNode.VariableName) {
       const varName = options.state.doc.sliceString(cursor.from, cursor.to);
 
       if (shouldHighlightVariable(varName, cursor)) {
@@ -498,13 +489,17 @@ export function findReactiveVariables(options: {
 function isKeywordArgumentName(cursor: TreeCursor): boolean {
   const temp = cursor.node.cursor();
   temp.moveTo(cursor.from);
-  if (temp.parent() && temp.name === "CallExpression" && temp.firstChild()) {
+  if (
+    temp.parent() &&
+    temp.name === PyNode.CallExpression &&
+    temp.firstChild()
+  ) {
     do {
       // @ts-expect-error: comparing disjoint string literals is intentional due to do/while traversal
-      if (temp.name === "ArgList" && temp.firstChild()) {
+      if (temp.name === PyNode.ArgList && temp.firstChild()) {
         do {
           if (temp.from === cursor.from && temp.to === cursor.to) {
-            return temp.nextSibling() && temp.name === "AssignOp";
+            return temp.nextSibling() && temp.name === PyNode.AssignOp;
           }
         } while (temp.nextSibling());
         break;
@@ -519,14 +514,14 @@ function isAssignmentTarget(cursor: TreeCursor): boolean {
   const temp = cursor.node.cursor();
 
   // Check if parent is AssignStatement
-  if (temp.parent() && temp.name === "AssignStatement") {
+  if (temp.parent() && temp.name === PyNode.AssignStatement) {
     // Now check if this VariableName is before the AssignOp
     const assignStatementCursor = temp.node.cursor();
     assignStatementCursor.firstChild();
 
     let assignOpPosition = -1;
     do {
-      if (assignStatementCursor.name === "AssignOp") {
+      if (assignStatementCursor.name === PyNode.AssignOp) {
         assignOpPosition = assignStatementCursor.from;
         break;
       }
@@ -556,7 +551,7 @@ function isPropertyAccess(cursor: TreeCursor): boolean {
  * Checks if the syntax tree contains any syntax errors.
  * If there are errors, we shouldn't show reactive variable highlighting.
  */
-function hasSyntaxErrors(tree: Tree): boolean {
+export function hasSyntaxErrors(tree: Tree): boolean {
   const cursor = tree.cursor();
   do {
     // Lezer uses "⚠" as the error node name for syntax errors
@@ -583,11 +578,11 @@ function extractAssignmentTargets(
   },
 ) {
   switch (cursor.name) {
-    case "VariableName": {
+    case PyNode.VariableName: {
       const varName = options.state.doc.sliceString(cursor.from, cursor.to);
       const isInClassScope =
         options.currentScope !== -1 &&
-        options.scopeTypes.get(options.currentScope) === "ClassDefinition";
+        options.scopeTypes.get(options.currentScope) === PyNode.ClassDefinition;
 
       if (isInClassScope) {
         // For class-level assignments, track the position of the assignment
@@ -606,7 +601,7 @@ function extractAssignmentTargets(
 
       break;
     }
-    case "TupleExpression": {
+    case PyNode.TupleExpression: {
       // Handle tuple unpacking like (x, (y, z)) = ...
       const tupleCursor = cursor.node.cursor();
       tupleCursor.firstChild();
@@ -616,7 +611,7 @@ function extractAssignmentTargets(
 
       break;
     }
-    case "ArrayExpression": {
+    case PyNode.ArrayExpression: {
       // Handle list unpacking like [a, b, c] = ...
       const arrayCursor = cursor.node.cursor();
       arrayCursor.firstChild();

package/src/core/codemirror/utils.ts

@@ -52,6 +52,34 @@ export function focusInputAndMoveToEnd(
   });
 }
 
+/**
+ * Scrolls the `.marimo-cell` that owns `view` into view.
+ *
+ * `EditorView.scrollIntoView` doesn't work in columns mode: it stops at the
+ * first overflowing ancestor even if that ancestor doesn't actually scroll,
+ * so it never reaches the real horizontally-scrolling container. The
+ * browser's native `Element.scrollIntoView` doesn't have that problem.
+ *
+ * Deferred a frame so CodeMirror's own scroll settles first; otherwise it
+ * clamps this scroll right back.
+ *
+ * https://github.com/marimo-team/marimo/issues/10222
+ */
+export function scrollOwnerCell(view: EditorView): void {
+  const cell = view.dom.closest(".marimo-cell");
+  if (!cell) {
+    return;
+  }
+
+  requestAnimationFrame(() => {
+    cell.scrollIntoView({
+      behavior: "instant",
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+}
+
 export function isInVimMode(ev: EditorView): boolean {
   return getCM(ev)?.state.vim != null;
 }

package/src/core/config/feature-flag.tsx

@@ -13,6 +13,7 @@ export interface ExperimentalFeatures {
   external_agents: boolean;
   debugger: boolean; // Live frame-watching debugger (gutter breakpoints + pdb)
   line_timing: boolean; // Green active-line highlight + per-line elapsed timer
+  editor_code_lens: boolean; // Inline icons in cell editors linking datasources/buckets/caches to their panels
   // Add new feature flags here
 }
 
@@ -20,10 +21,11 @@ const defaultValues: ExperimentalFeatures = {
   markdown: true,
   wasm_layouts: false,
   rtc_v2: false,
-  cache_panel: false,
+  cache_panel: import.meta.env.DEV,
   external_agents: import.meta.env.DEV,
   debugger: false,
   line_timing: false,
+  editor_code_lens: import.meta.env.DEV,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(

package/src/core/datasets/data-source-discovery.ts

@@ -0,0 +1,5 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { components } from "@marimo-team/marimo-api";
+
+export type DetectedDataSource = components["schemas"]["DetectedDataSource"];

package/src/core/datasets/request-registry.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type {
+  DataSourceDiscoveryResult,
   SQLSchemaListPreview,
   SQLTableListPreview,
   SQLTablePreview,
@@ -19,6 +20,16 @@ import type {
 // The backend returns data tables, which could also exist in other engines, dbs, schemas
 // Thus, we use the request ID pattern to match the response to the request
 
+export const DiscoverDataSources = new DeferredRequestRegistry<
+  {},
+  DataSourceDiscoveryResult
+>("data-source-discovery-result", async (requestId) => {
+  const client = getRequestClient();
+  await client.discoverDataSources({
+    requestId,
+  });
+});
+
 export const PreviewSQLTable = new DeferredRequestRegistry<
   Omit<PreviewSQLTableRequest, "requestId">,
   SQLTablePreview

package/src/core/edit-app.tsx

@@ -164,6 +164,7 @@ export const EditApp: React.FC<AppProps> = ({
         width={appConfig.width}
         onReconnect={reconnect}
       >
+        <ViewerBanner />
         <AppHeader
           connection={connection}
           className={cn(
@@ -179,8 +180,6 @@ export const EditApp: React.FC<AppProps> = ({
           )}
         </AppHeader>
 
-        <ViewerBanner />
-
         {/* Don't render until we have a single cell. NotStartedConnectionAlert
             still covers the "no remote runtime started" prompt. */}
         <ProgressiveBoundary

package/src/core/export/__tests__/hooks.test.ts

@@ -648,8 +648,7 @@ describe("updateCellOutputsWithScreenshots", () => {
     );
     expect(toast).toHaveBeenCalledWith({
       title: "Failed to capture cell outputs",
-      description:
-        "Some outputs may not appear in the PDF. Continuing with export.",
+      description: "Some outputs may be missing from the export. Continuing.",
       variant: "danger",
     });
   });
@@ -679,8 +678,7 @@ describe("updateCellOutputsWithScreenshots", () => {
     );
     expect(toast).toHaveBeenCalledWith({
       title: "Failed to capture cell outputs",
-      description:
-        "Some outputs may not appear in the PDF. Continuing with export.",
+      description: "Some outputs may be missing from the export. Continuing.",
       variant: "danger",
     });
   });

package/src/core/export/hooks.ts

@@ -112,7 +112,9 @@ interface UseEnrichCellOutputsOptions {
 }
 
 /**
- * Take screenshots of cells with HTML outputs. These images will be sent to the backend to be exported to IPYNB.
+ * Capture browser-rendered cell outputs for current-session exports.
+ *
+ * The caller uploads these PNG representations before requesting an export.
  * @returns A map of cell IDs to their screenshots data.
  */
 export function useEnrichCellOutputs(): (
@@ -221,8 +223,7 @@ export async function updateCellOutputsWithScreenshots(opts: {
     Logger.error("Error updating cell outputs with screenshots:", error);
     toast({
       title: "Failed to capture cell outputs",
-      description:
-        "Some outputs may not appear in the PDF. Continuing with export.",
+      description: "Some outputs may be missing from the export. Continuing.",
       variant: "danger",
     });
   }

package/src/core/islands/__tests__/bridge.test.ts

@@ -10,6 +10,7 @@ import {
 } from "@/__tests__/branded";
 import { notebookAtom } from "@/core/cells/cells";
 import { islandsPendingInitialRunsAtom } from "@/core/islands/state";
+import type { IslandsKernelMessage } from "../worker/worker";
 
 type Base64String = components["schemas"]["Base64String"];
 interface TestIslandApp {
@@ -173,6 +174,19 @@ describe("IslandsPyodideBridge", () => {
     });
   }
 
+  function sendKernelMessage(sessionGeneration: number) {
+    const listener = mockMessageListeners.get("kernelMessage");
+    if (!listener) {
+      throw new Error("Missing kernel message listener");
+    }
+    const message = {
+      message: "" as IslandsKernelMessage["message"],
+      sessionGeneration,
+    };
+    listener(message as never);
+    return message;
+  }
+
   async function initializeSingleApp() {
     mockSingleApp();
     await bridge.initializeApps();
@@ -281,6 +295,99 @@ describe("IslandsPyodideBridge", () => {
   });
 
   describe("app lifecycle", () => {
+    it("ignores messages after a session yields ownership", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockSingleApp();
+      await bridge.initializeApps();
+
+      const firstMessage = sendKernelMessage(1);
+      let finishReplacement!: () => void;
+      mockReplaceSessionRequest.mockReturnValueOnce(
+        new Promise<void>((resolve) => {
+          finishReplacement = resolve;
+        }),
+      );
+      setSingleApp("generated app 2");
+      const replacement = bridge.initializeApps();
+      await vi.waitFor(() =>
+        expect(mockReplaceSessionRequest).toHaveBeenCalledOnce(),
+      );
+      sendKernelMessage(1);
+      const currentMessage = sendKernelMessage(2);
+
+      expect(consumeMessage.mock.calls).toEqual([
+        [firstMessage],
+        [currentMessage],
+      ]);
+
+      finishReplacement();
+      await replacement;
+    });
+
+    it("restores message ownership when replacement fails", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockSingleApp();
+      await bridge.initializeApps();
+      mockReplaceSessionRequest.mockRejectedValueOnce(
+        new Error("replacement failed"),
+      );
+      setSingleApp("generated app 2");
+
+      await expect(bridge.initializeApps()).rejects.toThrow(
+        "replacement failed",
+      );
+      const previousMessage = sendKernelMessage(1);
+      sendKernelMessage(2);
+
+      expect(consumeMessage.mock.calls).toEqual([[previousMessage]]);
+    });
+
+    it("ignores messages while their session is stopping", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockSingleApp();
+      await bridge.initializeApps();
+      let finishStop!: () => void;
+      mockStopSessionRequest.mockReturnValueOnce(
+        new Promise<void>((resolve) => {
+          finishStop = resolve;
+        }),
+      );
+
+      const stop = bridge.stopSession();
+      await vi.waitFor(() =>
+        expect(mockStopSessionRequest).toHaveBeenCalledOnce(),
+      );
+      sendKernelMessage(1);
+
+      expect(consumeMessage).not.toHaveBeenCalled();
+
+      finishStop();
+      await stop;
+    });
+
+    it("forwards messages from every app in a multi-app document", async () => {
+      const consumeMessage = vi.fn();
+      bridge.consumeMessages(consumeMessage);
+      mockParseMarimoIslandApps.mockReturnValue([app(), app("app-2")]);
+      mockCreateMarimoFile
+        .mockReturnValueOnce("generated app 1")
+        .mockReturnValueOnce("generated app 2");
+      signalWorkerReady();
+
+      await bridge.initializeApps();
+      const firstMessage = sendKernelMessage(1);
+      const secondMessage = sendKernelMessage(2);
+      sendKernelMessage(3);
+
+      expect(consumeMessage.mock.calls).toEqual([
+        [firstMessage],
+        [secondMessage],
+      ]);
+    });
+
     it("holds controls until the first app session is ready", async () => {
       setSingleApp();
 

package/src/core/islands/bootstrap.ts

@@ -194,6 +194,7 @@ function handleMessage(
       case "sql-schema-list-preview":
       case "datasets":
       case "data-source-connections":
+      case "data-source-discovery-result":
       case "validate-sql-result":
       case "storage-namespaces":
       case "storage-entries":