@marimo-team/frontend 0.21.2-dev5 → 0.21.2-dev52

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

@@ -1,15 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
 import { beforeEach, describe, expect, it } from "vitest";
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import type { CellFocusState } from "../focus";
 import { exportedForTesting } from "../focus";
 
 const { initialState, reducer, createActions } = exportedForTesting;
 
 const CellIds = {
-  a: "a" as CellId,
-  b: "b" as CellId,
-  c: "c" as CellId,
+  a: cellId("a"),
+  b: cellId("b"),
+  c: cellId("c"),
 };
 
 describe("cell focus reducer", () => {

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { CellMessage } from "../../kernel/messages";
 import { formatLogTimestamp, getCellLogsForMessage } from "../logs";
 
@@ -18,7 +19,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles text/plain MIME type on stdout", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-1",
+      cell_id: cellId("cell-1"),
       console: [
         {
           mimetype: "text/plain",
@@ -46,7 +47,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles text/plain MIME type on stderr", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-2",
+      cell_id: cellId("cell-2"),
       console: [
         {
           mimetype: "text/plain",
@@ -74,7 +75,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles text/html MIME type and strips HTML tags", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-3",
+      cell_id: cellId("cell-3"),
       console: [
         {
           mimetype: "text/html",
@@ -102,7 +103,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles text/html MIME type on stderr", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-4",
+      cell_id: cellId("cell-4"),
       console: [
         {
           mimetype: "text/html",
@@ -130,7 +131,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles application/vnd.marimo+traceback MIME type and strips HTML", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-5",
+      cell_id: cellId("cell-5"),
       console: [
         {
           mimetype: "application/vnd.marimo+traceback",
@@ -156,7 +157,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles multiple console outputs with different MIME types", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-7",
+      cell_id: cellId("cell-7"),
       console: [
         {
           mimetype: "text/plain",
@@ -196,7 +197,7 @@ describe("getCellLogsForMessage", () => {
     vi.spyOn(Date, "now").mockReturnValue(now);
 
     const cellMessage: CellMessage = {
-      cell_id: "cell-8",
+      cell_id: cellId("cell-8"),
       console: [
         {
           mimetype: "text/plain",
@@ -219,7 +220,7 @@ describe("getCellLogsForMessage", () => {
 
   test("ignores unsupported MIME types", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-9",
+      cell_id: cellId("cell-9"),
       console: [
         {
           mimetype: "application/json",
@@ -241,7 +242,7 @@ describe("getCellLogsForMessage", () => {
 
   test("ignores non-logging channels", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-10",
+      cell_id: cellId("cell-10"),
       console: [
         {
           mimetype: "text/plain",
@@ -263,7 +264,7 @@ describe("getCellLogsForMessage", () => {
 
   test("returns empty array when console is null", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-11",
+      cell_id: cellId("cell-11"),
       console: null as unknown as CellMessage["console"],
       output: null,
       status: "idle",
@@ -278,7 +279,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles complex HTML with nested elements in text/html", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-12",
+      cell_id: cellId("cell-12"),
       console: [
         {
           mimetype: "text/html",
@@ -301,7 +302,7 @@ describe("getCellLogsForMessage", () => {
 
   test("handles marimo-error channel as stderr level", () => {
     const cellMessage: CellMessage = {
-      cell_id: "cell-13",
+      cell_id: cellId("cell-13"),
       console: [
         {
           mimetype: "text/plain",

package/src/core/cells/__tests__/pending-delete-service.test.tsx

@@ -4,11 +4,11 @@ import { act, renderHook, waitFor } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockNotebook } from "@/__mocks__/notebook";
+import { variableName } from "@/__tests__/branded";
 import { notebookAtom } from "@/core/cells/cells";
 import { CellId } from "@/core/cells/ids";
 import { createCellRuntimeState } from "@/core/cells/types";
 import { variablesAtom } from "@/core/variables/state";
-import type { VariableName } from "@/core/variables/types";
 import type { Milliseconds } from "@/utils/time";
 import {
   usePendingDelete,
@@ -138,8 +138,8 @@ describe("pending-delete-service", () => {
 
     store.set(notebookAtom, notebook);
     store.set(variablesAtom, {
-      ["x" as VariableName]: {
-        name: "x" as VariableName,
+      [variableName("x")]: {
+        name: variableName("x"),
         declaredBy: [cell1Id],
         usedBy: [cell2Id],
       },

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { beforeEach, describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { CellMessage } from "@/core/kernel/messages";
 import { invariant } from "@/utils/invariant";
 import {
@@ -22,13 +23,13 @@ describe("RunsState Reducer", () => {
   let state: RunsState;
 
   const runId = "run1" as RunId;
-  const cellId = "cell1";
+  const testCellId = cellId("cell1");
   const timestamp = Date.now();
   const code = "print('Hello World')";
 
   const cellNotification: CellMessage = {
     run_id: runId,
-    cell_id: cellId,
+    cell_id: testCellId,
     timestamp,
     status: "queued",
   };
@@ -61,9 +62,9 @@ describe("RunsState Reducer", () => {
       runStartTime: timestamp,
       cellRuns: new Map([
         [
-          cellId,
+          testCellId,
           {
-            cellId,
+            cellId: testCellId,
             code: code.slice(0, MAX_CODE_LENGTH),
             elapsedTime: 0,
             startTime: timestamp,
@@ -98,7 +99,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId2,
-          cell_id: "cell2",
+          cell_id: cellId("cell2"),
           timestamp,
           status: "queued",
         },
@@ -124,7 +125,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp: timestamp + 1000,
           status: "running",
         },
@@ -145,7 +146,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp: runStartTimestamp + 5000,
           status: "success",
         },
@@ -171,8 +172,8 @@ describe("RunsState Reducer", () => {
         type: "addCellNotification",
         payload: {
           cellNotification: {
-            run_id: `run${i}`,
-            cell_id: `cell${i}`,
+            run_id: `run${i}` as RunId,
+            cell_id: cellId(`cell${i}`),
             timestamp: timestamp,
             status: "queued",
           },
@@ -198,7 +199,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp,
           status: "queued",
         },
@@ -220,7 +221,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp: errorTimestamp,
           status: "running",
           output: {
@@ -248,7 +249,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp: errorTimestamp,
           status: "running",
           output: {
@@ -273,7 +274,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp,
           output: {
             channel: "marimo-error",
@@ -288,7 +289,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp: timestamp + 2000,
           status: "running", // shouldn't happen
         },
@@ -312,7 +313,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId2,
-          cell_id: "cell2",
+          cell_id: cellId("cell2"),
           timestamp: timestamp + 1000,
           status: "queued",
         },
@@ -325,7 +326,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId3,
-          cell_id: "cell3",
+          cell_id: cellId("cell3"),
           timestamp: timestamp + 2000,
           status: "queued",
         },
@@ -345,7 +346,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: "cell2",
+          cell_id: cellId("cell2"),
           timestamp: timestamp + 1000,
           status: "queued",
         },
@@ -367,7 +368,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp: timestamp + 1000,
           status: "running",
         },
@@ -386,7 +387,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp,
           status: "queued",
         },
@@ -405,7 +406,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: cellId,
+          cell_id: testCellId,
           timestamp,
           status: "queued",
         },
@@ -419,7 +420,7 @@ describe("RunsState Reducer", () => {
       payload: {
         cellNotification: {
           run_id: runId,
-          cell_id: "cell2",
+          cell_id: cellId("cell2"),
           timestamp: timestamp + 1000,
           status: "queued",
         },

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

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { type CellId, HTMLCellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
+import { HTMLCellId } from "@/core/cells/ids";
 import { Logger } from "@/utils/Logger";
 
 // Mock the getCellEditorView function
@@ -20,12 +21,12 @@ vi.mock("@/core/codemirror/extensions", () => ({
 const { scrollCellIntoView } = await import("@/core/cells/scrollCellIntoView");
 
 describe("scrollCellIntoView", () => {
-  const cellId = "test-cell-id" as CellId;
+  const cid = cellId("test-cell-id");
   let cellElement: HTMLElement;
 
   beforeEach(() => {
     cellElement = document.createElement("div");
-    cellElement.id = HTMLCellId.create(cellId);
+    cellElement.id = HTMLCellId.create(cid);
     cellElement.scrollIntoView = vi.fn();
     document.body.append(cellElement);
 
@@ -42,7 +43,7 @@ describe("scrollCellIntoView", () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mockGetCellEditorView.mockReturnValue(mockEditor as any);
 
-    scrollCellIntoView(cellId);
+    scrollCellIntoView(cid);
 
     expect(mockScrollActiveLineIntoView).toHaveBeenCalledWith(mockEditor, {
       behavior: "instant",
@@ -51,7 +52,7 @@ describe("scrollCellIntoView", () => {
   });
 
   it("should scroll cell element when editor is not focused", () => {
-    scrollCellIntoView(cellId);
+    scrollCellIntoView(cid);
 
     expect(mockScrollActiveLineIntoView).not.toHaveBeenCalled();
     expect(cellElement.scrollIntoView).toHaveBeenCalledWith({
@@ -64,10 +65,10 @@ describe("scrollCellIntoView", () => {
     const warnSpy = vi.spyOn(Logger, "warn").mockImplementation(vi.fn());
     cellElement.remove();
 
-    scrollCellIntoView(cellId);
+    scrollCellIntoView(cid);
 
     expect(warnSpy).toHaveBeenCalledWith(
-      `[CellFocusManager] scrollCellIntoView: element not found: ${cellId}`,
+      `[CellFocusManager] scrollCellIntoView: element not found: ${cid}`,
     );
     warnSpy.mockRestore();
   });

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

@@ -4,11 +4,12 @@ import type * as api from "@marimo-team/marimo-api";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { Mocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
 import { parseOutline } from "@/core/dom/outline";
 import { MultiColumn, visibleForTesting } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
 import { Logger } from "@/utils/Logger";
-import { type CellId, SETUP_CELL_ID } from "../ids";
+import { SETUP_CELL_ID } from "../ids";
 import { notebookStateFromSession } from "../session";
 
 // Mock dependencies
@@ -22,7 +23,7 @@ type SessionCell = api.Session["NotebookSessionV1"]["cells"][0];
 type NotebookCell = api.Notebook["NotebookV1"]["cells"][0];
 
 // Test constants
-const CELL_1 = "cell-1" as CellId;
+const CELL_1 = cellId("cell-1");
 
 describe("notebookStateFromSession", () => {
   beforeEach(() => {
@@ -671,9 +672,9 @@ describe("notebookStateFromSession", () => {
       );
       // Should have correct code and output for each cell
       for (const code of ["a", "b", "c", "d", "e", "f"]) {
-        const cellId = `cell-${code}` as CellId;
-        expect(result.cellData[cellId].code).toBe(code);
-        expect(result.cellRuntime[cellId].output).toEqual({
+        const cid = cellId(`cell-${code}`);
+        expect(result.cellData[cid].code).toBe(code);
+        expect(result.cellRuntime[cid].output).toEqual({
           channel: "output",
           data: `${code.toUpperCase()}!`,
           mimetype: "text/plain",
@@ -751,26 +752,26 @@ describe("notebookStateFromSession", () => {
       );
 
       // Should have correct code for each cell
-      expect(result.cellData["cell-a" as CellId].code).toBe("a");
-      expect(result.cellData["cell-c" as CellId].code).toBe("c");
-      expect(result.cellData["cell-z" as CellId].code).toBe("z");
-      expect(result.cellData["cell-e" as CellId].code).toBe("e");
-      expect(result.cellData["cell-g" as CellId].code).toBe("g");
+      expect(result.cellData[cellId("cell-a")].code).toBe("a");
+      expect(result.cellData[cellId("cell-c")].code).toBe("c");
+      expect(result.cellData[cellId("cell-z")].code).toBe("z");
+      expect(result.cellData[cellId("cell-e")].code).toBe("e");
+      expect(result.cellData[cellId("cell-g")].code).toBe("g");
 
       // Should have session outputs for matching cells (a, c, e)
-      expect(result.cellRuntime["cell-a" as CellId].output).toEqual({
+      expect(result.cellRuntime[cellId("cell-a")].output).toEqual({
         channel: "output",
         data: "A!",
         mimetype: "text/plain",
         timestamp: 0,
       });
-      expect(result.cellRuntime["cell-c" as CellId].output).toEqual({
+      expect(result.cellRuntime[cellId("cell-c")].output).toEqual({
         channel: "output",
         data: "C!",
         mimetype: "text/plain",
         timestamp: 0,
       });
-      expect(result.cellRuntime["cell-e" as CellId].output).toEqual({
+      expect(result.cellRuntime[cellId("cell-e")].output).toEqual({
         channel: "output",
         data: "E!",
         mimetype: "text/plain",
@@ -778,8 +779,8 @@ describe("notebookStateFromSession", () => {
       });
 
       // Should have no output for new cells (z, g) - they get stub session cells
-      expect(result.cellRuntime["cell-z" as CellId].output).toBeNull();
-      expect(result.cellRuntime["cell-g" as CellId].output).toBeNull();
+      expect(result.cellRuntime[cellId("cell-z")].output).toBeNull();
+      expect(result.cellRuntime[cellId("cell-g")].output).toBeNull();
 
       // Should log warning about different cells
       expect(Logger.warn).toHaveBeenCalledWith(
@@ -875,18 +876,18 @@ describe("notebookStateFromSession", () => {
       );
 
       // Should have correct code from notebook
-      expect(result.cellData["cell-1" as CellId].code).toBe("1 / 0");
-      expect(result.cellData["cell-2" as CellId].code).toBe('mo.md("Hello")');
-      expect(result.cellData["cell-3" as CellId].code).toBe(
+      expect(result.cellData[cellId("cell-1")].code).toBe("1 / 0");
+      expect(result.cellData[cellId("cell-2")].code).toBe('mo.md("Hello")');
+      expect(result.cellData[cellId("cell-3")].code).toBe(
         "x = mo.ui.slider(0, 10)",
       );
 
       // cell-1: No matching session cell (hash is null), gets stub session cell
-      expect(result.cellRuntime["cell-1" as CellId].output).toBeNull();
-      expect(result.cellRuntime["cell-1" as CellId].consoleOutputs).toEqual([]);
+      expect(result.cellRuntime[cellId("cell-1")].output).toBeNull();
+      expect(result.cellRuntime[cellId("cell-1")].consoleOutputs).toEqual([]);
 
       // cell-2: Matches session cell-1 by hash (moMd), gets its output
-      expect(result.cellRuntime["cell-2" as CellId].output).toEqual({
+      expect(result.cellRuntime[cellId("cell-2")].output).toEqual({
         channel: "output",
         data: "Welcome to marimo!",
         mimetype: "text/markdown",
@@ -894,7 +895,7 @@ describe("notebookStateFromSession", () => {
       });
 
       // cell-3: Matches session cell-2 by hash (slider), gets its output
-      expect(result.cellRuntime["cell-3" as CellId].output).toEqual({
+      expect(result.cellRuntime[cellId("cell-3")].output).toEqual({
         channel: "output",
         data: "",
         mimetype: "text/plain",

package/src/core/cells/cells.ts

@@ -755,7 +755,7 @@ const {
     });
   },
   handleCellMessage: (state, message: CellMessage) => {
-    const cellId = message.cell_id as CellId;
+    const cellId = message.cell_id;
     const nextState = updateCellRuntimeState({
       state,
       cellId,

package/src/core/cells/ids.ts

@@ -1,9 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* eslint-disable @typescript-eslint/no-redeclare */
 
+import type { components } from "@marimo-team/marimo-api";
 import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { invariant } from "@/utils/invariant";
-import type { TypedString } from "../../utils/typed";
 
 const lowercase = "abcdefghijklmnopqrstuvwxyz";
 const uppercase = lowercase.toUpperCase();
@@ -14,9 +14,9 @@ export const SCRATCH_CELL_ID = "__scratch__" as CellId;
 export const SETUP_CELL_ID = "setup" as CellId;
 
 /**
- * A typed CellId
+ * A typed CellId — derived from the generated OpenAPI schema.
  */
-export type CellId = TypedString<"CellId">;
+export type CellId = components["schemas"]["CellId"];
 export const CellId = {
   /**
    * Create a new CellId, a random 4 letter string.
@@ -106,9 +106,9 @@ export function findCellId(element: HTMLElement): CellId | null {
 }
 
 /**
- * A typed UIElementId
+ * A typed UIElementId — derived from the generated OpenAPI schema.
  */
-export type UIElementId = `${CellId}-${string}`;
+export type UIElementId = components["schemas"]["UIElementId"];
 export const UIElementId = {
   parse(element: Element): UIElementId | null {
     return element.getAttribute(OBJECT_ID_ATTR) as UIElementId | null;

package/src/core/cells/logs.ts

@@ -43,7 +43,7 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
             timestamp: output.timestamp || Date.now(),
             level: isError ? "stderr" : "stdout",
             message: message,
-            cellId: cell.cell_id as CellId,
+            cellId: cell.cell_id,
           });
           break;
         }
@@ -66,7 +66,7 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
     cell.output.data.forEach((error) => {
       CellLogLogger.log({
         level: "stderr",
-        cellId: cell.cell_id as CellId,
+        cellId: cell.cell_id,
         timestamp: cell.timestamp ?? 0,
         message: JSON.stringify(error),
       });

package/src/core/cells/runs.ts

@@ -79,9 +79,9 @@ const {
         runId,
         cellRuns: new Map([
           [
-            cellNotification.cell_id as CellId,
+            cellNotification.cell_id,
             {
-              cellId: cellNotification.cell_id as CellId,
+              cellId: cellNotification.cell_id,
               code: code.slice(0, MAX_CODE_LENGTH),
               elapsedTime: 0,
               status: status,
@@ -111,9 +111,7 @@ const {
 
     // Update existing run
     const nextCellRuns = new Map(existingRun.cellRuns);
-    const existingCellRun = nextCellRuns.get(
-      cellNotification.cell_id as CellId,
-    );
+    const existingCellRun = nextCellRuns.get(cellNotification.cell_id);
 
     // Early return if nothing changed
     if (
@@ -140,15 +138,15 @@ const {
           ? timestamp - existingCellRun.startTime
           : undefined;
 
-      nextCellRuns.set(cellNotification.cell_id as CellId, {
+      nextCellRuns.set(cellNotification.cell_id, {
         ...existingCellRun,
         startTime,
         elapsedTime,
         status,
       });
     } else {
-      nextCellRuns.set(cellNotification.cell_id as CellId, {
-        cellId: cellNotification.cell_id as CellId,
+      nextCellRuns.set(cellNotification.cell_id, {
+        cellId: cellNotification.cell_id,
         code: code.slice(0, MAX_CODE_LENGTH),
         elapsedTime: 0,
         status: status,