@marimo-team/frontend 0.23.16-dev3 → 0.23.16-dev31

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

@@ -12,12 +12,17 @@ import {
   type ViewUpdate,
 } from "@codemirror/view";
 import {
+  aliasColumnCompletionSource,
+  createCteCompletionSource,
   defaultSqlHoverTheme,
   NodeSqlParser,
   type NodeSqlParserResult,
+  QueryContextAnalyzer,
   type SupportedDialects as ParserDialects,
   type SqlParseError,
   sqlExtension,
+  SqlStructureAnalyzer,
+  unqualifiedColumnCompletionSource,
 } from "@marimo-team/codemirror-sql";
 import { DuckDBDialect } from "@marimo-team/codemirror-sql/dialects";
 import { type SQLMetadata, SQLParser } from "@marimo-team/smart-cells";
@@ -142,6 +147,7 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
     _placeholderType: PlaceholderType,
     lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig },
   ): Extension[] {
+    const analysis = createSQLAnalysis();
     const extensions = [
       // This can be updated with a dispatch effect
       sqlConfigCompartment.of(sql({ dialect: DEFAULT_DIALECT })),
@@ -167,6 +173,10 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
           variableCompletionSource,
           // Completions for dialect keywords
           customKeywordCompletionSource(),
+          // Completions based on the current query
+          analysis.cteCompletionSource,
+          analysis.aliasCompletionSource,
+          analysis.columnCompletionSource,
         ],
       }),
     ];
@@ -185,10 +195,23 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
 
       extensions.push(
         sqlExtension({
+          schema: getSchema,
           enableLinting: true,
           linterConfig: {
             delay: 250, // Delay before running validation
             parser: parser,
+            // CustomSqlParser performs backend DuckDB validation in validateSql.
+            perStatement: false,
+          },
+          enableSemanticLinting: true,
+          semanticLinterConfig: {
+            parser: analysis.parser,
+            structureAnalyzer: analysis.structureAnalyzer,
+            severity: {
+              unknownTable: "off",
+              unknownColumn: "warning",
+              ambiguousColumn: "warning",
+            },
           },
           enableGutterMarkers: true,
           gutterConfig: {
@@ -198,14 +221,21 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
             parser: parser,
           },
           hoverConfig: {
-            schema: getSchema, // Use the same schema as autocomplete
             hoverTime: 300, // 300ms hover delay
             enableKeywords: true, // Show keyword information
             enableTables: true, // Show table information
             enableColumns: true, // Show column information
-            parser: parser,
+            parser: analysis.parser,
+            contextAnalyzer: analysis.contextAnalyzer,
             theme: defaultSqlHoverTheme(theme),
           },
+          enableNavigation: true,
+          navigationConfig: {
+            contextAnalyzer: analysis.contextAnalyzer,
+            keymap: false,
+            parser: analysis.parser,
+            structureAnalyzer: analysis.structureAnalyzer,
+          },
         }),
         EditorView.updateListener.of((update) => {
           if (update.focusChanged) {
@@ -223,6 +253,123 @@ export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMet
   }
 }
 
+function createSQLAnalysis() {
+  const parser = new NodeSqlParser({
+    getParserOptions: (state: EditorState) => {
+      return {
+        database: getAnalysisDialect(state),
+      };
+    },
+  });
+  const contextAnalyzer = new DialectAwareQueryContextAnalyzer(parser);
+  const structureAnalyzer = new DialectAwareSqlStructureAnalyzer(parser);
+
+  return {
+    parser,
+    contextAnalyzer,
+    structureAnalyzer,
+    cteCompletionSource: createCteCompletionSource({
+      parser,
+      contextAnalyzer,
+      structureAnalyzer,
+    }),
+    aliasCompletionSource: aliasColumnCompletionSource({
+      schema: getSchema,
+      parser,
+      contextAnalyzer,
+    }),
+    columnCompletionSource: unqualifiedColumnCompletionSource({
+      schema: getSchema,
+      parser,
+      contextAnalyzer,
+    }),
+  };
+}
+
+function getAnalysisDialect(state: EditorState): ParserDialects {
+  return guessParserDialect(state) ?? DEFAULT_PARSER_DIALECT;
+}
+
+class DialectAwareQueryContextAnalyzer extends QueryContextAnalyzer {
+  private readonly analyzers = new Map<ParserDialects, QueryContextAnalyzer>();
+  private readonly analysisParser: NodeSqlParser;
+
+  constructor(analysisParser: NodeSqlParser) {
+    super(analysisParser);
+    this.analysisParser = analysisParser;
+  }
+
+  override getContext(
+    sql: string,
+    opts: { state: EditorState },
+  ): ReturnType<QueryContextAnalyzer["getContext"]> {
+    return this.getAnalyzer(opts.state).getContext(sql, opts);
+  }
+
+  override clearCache(): void {
+    for (const analyzer of this.analyzers.values()) {
+      analyzer.clearCache();
+    }
+  }
+
+  private getAnalyzer(state: EditorState): QueryContextAnalyzer {
+    const dialect = getAnalysisDialect(state);
+    let analyzer = this.analyzers.get(dialect);
+    if (!analyzer) {
+      analyzer = new QueryContextAnalyzer(this.analysisParser);
+      this.analyzers.set(dialect, analyzer);
+    }
+    return analyzer;
+  }
+}
+
+class DialectAwareSqlStructureAnalyzer extends SqlStructureAnalyzer {
+  private readonly analyzers = new Map<ParserDialects, SqlStructureAnalyzer>();
+  private readonly analysisParser: NodeSqlParser;
+
+  constructor(analysisParser: NodeSqlParser) {
+    super(analysisParser);
+    this.analysisParser = analysisParser;
+  }
+
+  override analyzeDocument(
+    state: EditorState,
+  ): ReturnType<SqlStructureAnalyzer["analyzeDocument"]> {
+    return this.getAnalyzer(state).analyzeDocument(state);
+  }
+
+  override getStatementAtPosition(
+    state: EditorState,
+    position: number,
+  ): ReturnType<SqlStructureAnalyzer["getStatementAtPosition"]> {
+    return this.getAnalyzer(state).getStatementAtPosition(state, position);
+  }
+
+  override getStatementsInRange(
+    state: EditorState,
+    from: number,
+    to: number,
+  ): ReturnType<SqlStructureAnalyzer["getStatementsInRange"]> {
+    return this.getAnalyzer(state).getStatementsInRange(state, from, to);
+  }
+
+  override clearCache(): void {
+    for (const analyzer of this.analyzers.values()) {
+      analyzer.clearCache();
+    }
+  }
+
+  private getAnalyzer(state: EditorState): SqlStructureAnalyzer {
+    const dialect = getAnalysisDialect(state);
+    let analyzer = this.analyzers.get(dialect);
+    if (!analyzer) {
+      analyzer = new SqlStructureAnalyzer(this.analysisParser);
+      this.analyzers.set(dialect, analyzer);
+    }
+    return analyzer;
+  }
+}
+
 class CustomSqlParser extends NodeSqlParser {
   private validationTimeout: number | null = null;
   private readonly VALIDATION_DELAY_MS = 300; // Wait 300ms after user stops typing
@@ -344,7 +491,61 @@ function getSchema(view: EditorView): SQLNamespace {
     return {};
   }
 
-  return config.schema;
+  const schema = config.schema;
+  if (!isNamespaceMap(schema)) {
+    return schema;
+  }
+
+  const defaultSchema = config.defaultSchema;
+  const defaultSchemaNamespace = defaultSchema
+    ? schema[defaultSchema]
+    : undefined;
+
+  // The completion schema contains both default-schema and fully qualified
+  // paths. Promote default-schema tables so unqualified references resolve to
+  // one exact match instead of appearing ambiguous.
+  if (
+    defaultSchemaNamespace &&
+    !Array.isArray(defaultSchemaNamespace) &&
+    typeof defaultSchemaNamespace === "object" &&
+    "children" in defaultSchemaNamespace &&
+    isNamespaceMap(defaultSchemaNamespace.children)
+  ) {
+    return {
+      ...schema,
+      ...Object.fromEntries(
+        Object.entries(defaultSchemaNamespace.children).filter(
+          ([name]) => !Object.hasOwn(schema, name),
+        ),
+      ),
+    };
+  }
+
+  return schema;
+}
+
+function isNamespaceMap(
+  namespace: SQLNamespace,
+): namespace is Record<string, SQLNamespace> {
+  if (Array.isArray(namespace)) {
+    return false;
+  }
+
+  if (!("self" in namespace) || !("children" in namespace)) {
+    return true;
+  }
+
+  // A self/children wrapper stores a Completion in `self`. A table or schema
+  // literally named "self" stores another namespace there.
+  const self = namespace.self;
+  const isSelfChildrenWrapper =
+    typeof self === "object" &&
+    self !== null &&
+    !Array.isArray(self) &&
+    "label" in self &&
+    typeof self.label === "string";
+
+  return !isSelfChildrenWrapper;
 }
 
 function guessParserDialect(state: EditorState): ParserDialects | null {
@@ -529,3 +730,9 @@ async function validateSQL(
   }
   return result;
 }
+
+export const exportedForTesting = {
+  createSQLAnalysis,
+  CustomSqlParser,
+  getSchema,
+};

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/hotkeys/hotkeys.ts

@@ -256,13 +256,11 @@ const DEFAULT_HOT_KEY = {
     name: "Copy line(s) up",
     group: "Editing",
     key: "Alt-Shift-ArrowUp",
-    editable: false,
   },
   "cell.copyLineDown": {
     name: "Copy line(s) down",
     group: "Editing",
     key: "Alt-Shift-ArrowDown",
-    editable: false,
   },
 
   // Markdown

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/bridge.ts

@@ -66,6 +66,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   private session: AppSession | undefined;
   private sessionReady = new Deferred<AppSession>();
   private nextSessionGeneration = 0;
+  private readonly activeSessionGenerations = new Set<number>();
   private appTransition = Promise.resolve();
   private workerReady = new Deferred<void>();
 
@@ -110,6 +111,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     );
 
     this.rpc.addMessageListener("kernelMessage", (message) => {
+      // A stopped session can still have messages in transit after the next
+      // app takes ownership of the shared frontend state.
+      if (!this.activeSessionGenerations.has(message.sessionGeneration)) {
+        return;
+      }
       this.messageConsumer?.(message);
     });
   }
@@ -149,6 +155,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       return;
     }
     if (apps.length > 0) {
+      this.activeSessionGenerations.clear();
       this.store.set(
         islandsPendingInitialRunsAtom,
         new Set(apps.map((_, index) => this.nextSessionGeneration + index + 1)),
@@ -165,6 +172,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       };
       const previousSession = this.session;
       const replacesSession = managesSingleApp && previousSession !== undefined;
+      this.activeSessionGenerations.add(request.sessionGeneration);
       if (replacesSession) {
         this.store.set(notebookAtom, initialNotebookState());
       }
@@ -186,8 +194,14 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
           this.sessionReady.resolve(this.session);
         }
       } catch (error) {
+        this.activeSessionGenerations.delete(request.sessionGeneration);
         if (this.session?.sessionGeneration === request.sessionGeneration) {
           this.session = previousSession;
+          if (previousSession) {
+            this.activeSessionGenerations.add(
+              previousSession.sessionGeneration,
+            );
+          }
         }
         Logger.error(`Failed to start session for app ${app.id}:`, error);
         if (managesSingleApp) {
@@ -203,6 +217,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
       if (session?.code === undefined || (appId && session.appId !== appId)) {
         return;
       }
+      this.activeSessionGenerations.delete(session.sessionGeneration);
       await this.rpc.proxy.request.stopSession({
         appId: session.appId,
         sessionGeneration: session.sessionGeneration,
@@ -339,6 +354,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendUpdateFile = throwNotImplemented;
   sendFileDetails = throwNotImplemented;
   openTutorial = throwNotImplemented;
+  getExportAvailability = throwNotImplemented;
   exportAsHTML = throwNotImplemented;
   exportAsIPYNB = throwNotImplemented;
   exportAsMarkdown = throwNotImplemented;

package/src/core/mode.ts

@@ -78,6 +78,16 @@ export const viewStateAtom = atom<ViewState>({
 
 export const initialModeAtom = atom<AppMode | undefined>(undefined);
 
+/**
+ * Whether the current page hosts a notebook, and so connects to a kernel.
+ * False for non-notebook pages (home, gallery), which are served without a
+ * session.
+ */
+export function isNotebookPage(): boolean {
+  const mode = store.get(initialModeAtom);
+  return mode !== "home" && mode !== "gallery";
+}
+
 export const kioskModeAtom = atom<boolean>(false);
 
 /**

package/src/core/network/__tests__/api.test.ts

@@ -94,4 +94,46 @@ describe("API", () => {
       }),
     ).rejects.toBeInstanceOf(HTTPError);
   });
+
+  it("preserves export metadata from response headers", async () => {
+    const response = new Response("markdown", {
+      headers: {
+        "Content-Disposition":
+          "attachment; filename*=UTF-8''r%C3%A9sum%C3%A9.qmd",
+        "Content-Type": "text/plain; charset=utf-8",
+      },
+    });
+
+    await expect(
+      API.handleExportResponse({ data: "markdown", response }),
+    ).resolves.toEqual({
+      contents: "markdown",
+      filename: "résumé.qmd",
+      mediaType: "text/plain; charset=utf-8",
+    });
+  });
+
+  it("rejects export responses without a filename", async () => {
+    await expect(
+      API.handleExportResponse({
+        data: "markdown",
+        response: new Response(null, {
+          headers: { "Content-Type": "text/plain" },
+        }),
+      }),
+    ).rejects.toThrow("Export response is missing a filename");
+  });
+
+  it("rejects export responses without a media type", async () => {
+    await expect(
+      API.handleExportResponse({
+        data: "markdown",
+        response: new Response(null, {
+          headers: {
+            "Content-Disposition": "attachment; filename*=UTF-8''notebook.md",
+          },
+        }),
+      }),
+    ).rejects.toThrow("Export response is missing a media type");
+  });
 });

package/src/core/network/__tests__/connection.test.ts

@@ -0,0 +1,45 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it } from "vitest";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "../../websocket/types";
+import { connectionAtom, waitForConnectionOpenIfNotebook } from "../connection";
+
+const NEVER = Symbol("never");
+
+/**
+ * Resolves to NEVER if the promise does not settle within a macrotask.
+ */
+function settledOrNever(promise: Promise<unknown>) {
+  return Promise.race([
+    promise,
+    new Promise((resolve) => setTimeout(() => resolve(NEVER), 0)),
+  ]);
+}
+
+describe("waitForConnectionOpenIfNotebook", () => {
+  afterEach(() => {
+    store.set(connectionAtom, { state: WebSocketState.NOT_STARTED });
+    store.set(initialModeAtom, undefined);
+  });
+
+  it.each(["home", "gallery"] as const)(
+    "resolves without a connection in %s mode",
+    async (mode) => {
+      store.set(initialModeAtom, mode);
+      await expect(
+        settledOrNever(waitForConnectionOpenIfNotebook()),
+      ).resolves.not.toBe(NEVER);
+    },
+  );
+
+  it("waits for the connection to open in edit mode", async () => {
+    store.set(initialModeAtom, "edit");
+    const promise = waitForConnectionOpenIfNotebook();
+    await expect(settledOrNever(promise)).resolves.toBe(NEVER);
+
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    await expect(settledOrNever(promise)).resolves.not.toBe(NEVER);
+  });
+});

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -4,7 +4,11 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId, requestId, uiElementId } from "@/__tests__/branded";
 import type { RuntimeManager } from "../../runtime/runtime";
 import { createLazyRequests } from "../requests-lazy";
-import type { EditRequests, RunRequests } from "../types";
+import type {
+  EditRequests,
+  ExportAvailabilityResponse,
+  RunRequests,
+} from "../types";
 
 // Mock the connection module
 vi.mock("../connection", async () => {
@@ -72,6 +76,33 @@ describe("createLazyRequests", () => {
     expect(mockDelegate.getEnvironmentInfo).toHaveBeenCalledOnce();
   });
 
+  it("gets export availability without starting a kernel", async () => {
+    const availability: ExportAvailabilityResponse = {
+      source: "server",
+      formats: [
+        {
+          format: "ipynb",
+          dependenciesAvailable: false,
+          missingPackages: ["nbformat"],
+        },
+      ],
+    };
+    mockDelegate.getExportAvailability = vi
+      .fn()
+      .mockResolvedValue(availability) as EditRequests["getExportAvailability"];
+
+    const lazyRequests = createLazyRequests(
+      mockDelegate,
+      mockGetRuntimeManager,
+    );
+
+    await expect(lazyRequests.getExportAvailability()).resolves.toEqual(
+      availability,
+    );
+    expect(mockInit).not.toHaveBeenCalled();
+    expect(mockDelegate.getExportAvailability).toHaveBeenCalledOnce();
+  });
+
   it("should call init once before first request", async () => {
     const lazyRequests = createLazyRequests(
       mockDelegate,