@marimo-team/frontend 0.19.8-dev5 → 0.19.8-dev50

package/src/plugins/impl/anywidget/schemas.ts

@@ -0,0 +1,32 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { z } from "zod";
+
+const BufferPathSchema = z.array(z.array(z.union([z.string(), z.number()])));
+const StateSchema = z.record(z.string(), z.any());
+
+export const AnyWidgetMessageSchema = z.discriminatedUnion("method", [
+  z.object({
+    method: z.literal("open"),
+    state: StateSchema,
+    buffer_paths: BufferPathSchema.optional(),
+  }),
+  z.object({
+    method: z.literal("update"),
+    state: StateSchema,
+    buffer_paths: BufferPathSchema.optional(),
+  }),
+  z.object({
+    method: z.literal("custom"),
+    content: z.any(),
+  }),
+  z.object({
+    method: z.literal("echo_update"),
+    buffer_paths: BufferPathSchema,
+    state: StateSchema,
+  }),
+  z.object({
+    method: z.literal("close"),
+  }),
+]);
+
+export type AnyWidgetMessage = z.infer<typeof AnyWidgetMessageSchema>;

package/src/plugins/impl/anywidget/serialization.ts

@@ -0,0 +1,120 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { get, set } from "lodash-es";
+import { invariant } from "../../../utils/invariant";
+import {
+  type Base64String,
+  base64ToDataView,
+  dataViewToBase64,
+} from "../../../utils/json/base64";
+import { Logger } from "../../../utils/Logger";
+import type { WireFormat } from "./types";
+
+type Path = (string | number)[];
+
+/**
+ * Recursively find all DataViews in an object and return their paths.
+ *
+ * This mirrors ipywidgets' _separate_buffers logic.
+ */
+function findDataViewPaths(obj: unknown, currentPath: Path = []): Path[] {
+  const paths: Path[] = [];
+
+  if (obj instanceof DataView) {
+    paths.push(currentPath);
+  } else if (Array.isArray(obj)) {
+    for (const [i, element] of obj.entries()) {
+      paths.push(...findDataViewPaths(element, [...currentPath, i]));
+    }
+  } else if (obj !== null && typeof obj === "object") {
+    for (const [key, value] of Object.entries(obj)) {
+      paths.push(...findDataViewPaths(value, [...currentPath, key]));
+    }
+  }
+
+  return paths;
+}
+
+/**
+ * Serialize DataView buffers to base64 strings.
+ *
+ * Finds all DataViews in the object.
+ */
+export function serializeBuffersToBase64<T extends Record<string, unknown>>(
+  inputObject: T,
+): WireFormat<T> {
+  // Dynamically find all DataView paths instead of using fixed bufferPaths
+  const dataViewPaths = findDataViewPaths(inputObject);
+
+  if (dataViewPaths.length === 0) {
+    return { state: inputObject, buffers: [], bufferPaths: [] };
+  }
+
+  const state = structuredClone(inputObject);
+  const buffers: Base64String[] = [];
+  const bufferPaths: Path[] = [];
+
+  for (const bufferPath of dataViewPaths) {
+    const dataView = get(inputObject, bufferPath);
+    if (dataView instanceof DataView) {
+      const base64 = dataViewToBase64(dataView);
+      buffers.push(base64);
+      bufferPaths.push(bufferPath);
+      set(state, bufferPath, base64);
+    }
+  }
+
+  return { state, buffers, bufferPaths };
+}
+
+/**
+ * Decode wire format or insert DataViews at specified paths.
+ *
+ * Accepts either:
+ * 1. Wire format: { state, bufferPaths, buffers } where buffers are base64 strings
+ * 2. Direct format: { state, bufferPaths, buffers } where buffers are DataViews
+ *
+ * For ndarray-like structures {view: null, dtype, shape}, we insert the DataView
+ * at the 'view' key, preserving the structure for round-tripping.
+ */
+export function decodeFromWire<T extends Record<string, unknown>>(input: {
+  state: T;
+  bufferPaths?: Path[];
+  buffers?: readonly (DataView | Base64String)[];
+}): T {
+  const { state, bufferPaths, buffers } = input;
+
+  // If no buffer paths, return the original state
+  if (!bufferPaths || bufferPaths.length === 0) {
+    return state;
+  }
+
+  // If has buffers, assert they are the same size
+  if (buffers) {
+    invariant(
+      buffers.length === bufferPaths.length,
+      "Buffers and buffer paths not the same length",
+    );
+  }
+
+  // We should avoid using structuredClone if possible since
+  // it can be very slow. If mutability is a concern, we should use a different approach.
+  const out = state;
+
+  for (const [i, bufferPath] of bufferPaths.entries()) {
+    const buffer = buffers?.[i];
+
+    if (buffer == null) {
+      Logger.warn("[anywidget] Could not find buffer at path", bufferPath);
+      continue;
+    }
+
+    // Handle both base64 strings (from wire format) and DataViews (direct usage)
+    if (typeof buffer === "string") {
+      set(out, bufferPath, base64ToDataView(buffer));
+    } else {
+      set(out, bufferPath, buffer);
+    }
+  }
+
+  return out;
+}

package/src/plugins/impl/anywidget/types.ts

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Base64String } from "@/utils/json/base64";
+import type { TypedString } from "@/utils/typed";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type EventHandler = (...args: any[]) => void;
+
+/**
+ * Type-safe widget model id.
+ */
+export type WidgetModelId = TypedString<"WidgetModelId">;
+
+/**
+ * AnyWidget model state with buffers.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ModelState = Record<string | number, any>;
+
+/**
+ * Wire format for anywidget state with binary data.
+ * Buffers can be either base64 strings (from network) or DataViews (in-memory).
+ */
+export interface WireFormat<T = Record<string, unknown>> {
+  state: T;
+  bufferPaths: (string | number)[][];
+  buffers: Base64String[];
+}

package/src/plugins/impl/chat/chat-ui.tsx

@@ -16,12 +16,13 @@ import {
   HelpCircleIcon,
   PaperclipIcon,
   RotateCwIcon,
-  SendIcon,
+  SendHorizontalIcon,
   SettingsIcon,
   Trash2Icon,
   X,
 } from "lucide-react";
 import React, { useEffect, useRef, useState } from "react";
+import { z } from "zod";
 import { renderUIMessage } from "@/components/chat/chat-display";
 import { convertToFileUIPart } from "@/components/chat/chat-utils";
 import {
@@ -71,6 +72,16 @@ interface Props extends PluginFunctions {
   host: HTMLElement;
 }
 
+const ChatMessageIncomingSchema = z.object({
+  type: z.literal("stream_chunk"),
+  message_id: z.string(),
+  content: z
+    .any()
+    .nullable()
+    .transform((val) => val as UIMessageChunk | null),
+  is_final: z.boolean().optional(),
+});
+
 export const Chatbot: React.FC<Props> = (props) => {
   const [input, setInput] = useState("");
   const [config, setConfig] = useState<ChatConfig>(props.config);
@@ -252,15 +263,13 @@ export const Chatbot: React.FC<Props> = (props) => {
     props.host as HTMLElementNotDerivedFromRef,
     MarimoIncomingMessageEvent.TYPE,
     (e) => {
-      const message = e.detail.message;
-      if (
-        typeof message !== "object" ||
-        message === null ||
-        !("type" in message) ||
-        message.type !== "stream_chunk"
-      ) {
+      const parsedMessage = ChatMessageIncomingSchema.safeParse(
+        e.detail.message,
+      );
+      if (!parsedMessage.success) {
         return;
       }
+      const message = parsedMessage.data;
 
       // Push to the stream for useChat to process
       const controller = frontendStreamControllerRef.current;
@@ -268,17 +277,10 @@ export const Chatbot: React.FC<Props> = (props) => {
         return;
       }
 
-      const frontendMessage = message as {
-        type: string;
-        message_id: string;
-        content?: UIMessageChunk;
-        is_final?: boolean;
-      };
-
-      if (frontendMessage.content) {
-        controller.enqueue(frontendMessage.content);
+      if (message.content) {
+        controller.enqueue(message.content);
       }
-      if (frontendMessage.is_final) {
+      if (message.is_final) {
         controller.close();
         frontendStreamControllerRef.current = null;
       }
@@ -559,10 +561,10 @@ export const Chatbot: React.FC<Props> = (props) => {
           type="submit"
           disabled={isLoading || !input}
           variant="outline"
-          size="sm"
+          size="xs"
           className="text-(--slate-11)"
         >
-          <SendIcon className="h-5 w-5" />
+          <SendHorizontalIcon className="h-4 w-4" />
         </Button>
       </form>
     </div>

package/src/utils/Deferred.ts

@@ -1,9 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * A deferred promise that can be resolved or rejected externally.
+ *
+ * Provides synchronous access to status and resolved value, useful for
+ * cases where you need to check if a promise has settled without awaiting it.
+ */
 export class Deferred<T> {
   promise: Promise<T>;
   resolve!: (value: T | PromiseLike<T>) => void;
   reject!: (reason?: unknown) => void;
   status: "pending" | "resolved" | "rejected" = "pending";
+  value: T | undefined = undefined;
 
   constructor() {
     this.promise = new Promise<T>((resolve, reject) => {
@@ -13,8 +21,21 @@ export class Deferred<T> {
       };
       this.resolve = (value) => {
         this.status = "resolved";
+        // Store the value for synchronous access
+        if (!isPromiseLike(value)) {
+          this.value = value;
+        }
         resolve(value);
       };
     });
   }
 }
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "then" in value &&
+    typeof value.then === "function"
+  );
+}

package/src/utils/__tests__/blob.test.ts

@@ -20,7 +20,7 @@ describe("Blob serialization and deserialization", () => {
 
   test("deserializeBlob should deserialize a base64 string to a Blob", async () => {
     const serialized = await serializeBlob(testBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     expect(deserialized).toBeDefined();
     expect(deserialized.size).toBe(testBlob.size);
     expect(deserialized.type).toBe(testBlob.type);
@@ -28,7 +28,7 @@ describe("Blob serialization and deserialization", () => {
 
   test("deserialized Blob should contain the original content", async () => {
     const serialized = await serializeBlob(testBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     const reader = new FileReader();
     // eslint-disable-next-line unicorn/prefer-blob-reading-methods
     reader.readAsText(deserialized);
@@ -45,7 +45,7 @@ describe("Blob serialization and deserialization", () => {
       type: "image/png",
     });
     const serialized = await serializeBlob(imageBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     expect(deserialized).toBeDefined();
     expect(deserialized.size).toBe(imageBlob.size);
     expect(deserialized.type).toBe(imageBlob.type);

package/src/utils/__tests__/id-tree.test.ts

@@ -214,16 +214,19 @@ describe("CollapsibleTree", () => {
     `);
   });
 
-  it("fails to expand", () => {
+  it("fails to expand when node not found", () => {
     expect(() => tree.expand("five")).toThrowErrorMatchingInlineSnapshot(
       "[Error: Node five not found in tree. Valid ids: one,two,three,four]",
     );
-    expect(() => {
-      tree.expand("one");
-      tree.expand("one");
-    }).toThrowErrorMatchingInlineSnapshot(
-      "[Error: Node one is already expanded]",
-    );
+  });
+
+  it("expand on already expanded node is a no-op", () => {
+    // Expanding an already expanded node should return the same tree (no-op)
+    const result = tree.expand("one");
+    expect(result).toBe(tree);
+    // Can call multiple times without error
+    const result2 = tree.expand("one");
+    expect(result2).toBe(tree);
   });
 
   it("moves nodes correctly", () => {
@@ -378,6 +381,18 @@ describe("CollapsibleTree", () => {
     `);
   });
 
+  it("can delete non-collapsed nodes without throwing", () => {
+    // Deleting a non-collapsed node should not throw
+    // (previously this would throw "Node is already expanded" internally)
+    const result = tree.deleteAtIndex(1);
+    expect(result.toString()).toMatchInlineSnapshot(`
+      "one
+      three
+      four
+      "
+    `);
+  });
+
   it("fails to delete nodes", () => {
     expect(() => tree.deleteAtIndex(5)).toThrowErrorMatchingInlineSnapshot(
       "[Error: Node at index 5 not found in tree]",

package/src/utils/__tests__/mime-types.test.ts

@@ -132,7 +132,7 @@ describe("mime-types", () => {
 
   describe("sortByPrecedence", () => {
     it("should sort entries by precedence order", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["image/png", "png"],
@@ -151,7 +151,7 @@ describe("mime-types", () => {
     });
 
     it("should place unknown mime types at the end", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["application/json", "json"],
@@ -173,7 +173,7 @@ describe("mime-types", () => {
     });
 
     it("should handle empty precedence", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
       ];
@@ -184,7 +184,7 @@ describe("mime-types", () => {
     });
 
     it("should not mutate original array", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
       ];
@@ -198,7 +198,7 @@ describe("mime-types", () => {
 
   describe("processMimeBundle", () => {
     it("should filter and sort mime entries", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["image/png", "png"],
@@ -226,7 +226,7 @@ describe("mime-types", () => {
     });
 
     it("should use default config when not provided", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/html", "html"],
         ["image/png", "png"],
         ["text/markdown", "md"],
@@ -240,9 +240,7 @@ describe("mime-types", () => {
 
     it("should preserve data associated with mime types", () => {
       const htmlData = { content: "<h1>Hello</h1>" };
-      const entries: Array<[MimeType, typeof htmlData]> = [
-        ["text/html", htmlData],
-      ];
+      const entries: [MimeType, typeof htmlData][] = [["text/html", htmlData]];
 
       const result = processMimeBundle(entries);
 
@@ -250,7 +248,7 @@ describe("mime-types", () => {
     });
 
     it("should sort by precedence after filtering", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/markdown", "md"],
         ["text/html", "html"],

package/src/utils/__tests__/url-parser.test.ts

@@ -76,4 +76,26 @@ describe("parseContent", () => {
       url: "https://avatars.githubusercontent.com/u/123",
     });
   });
+
+  it("preserves newlines between URLs", () => {
+    const parts = parseContent("https://marimo.io\nhttps://github.com\n");
+    expect(parts).toEqual([
+      { type: "url", url: "https://marimo.io" },
+      { type: "text", value: "\n" },
+      { type: "url", url: "https://github.com" },
+      { type: "text", value: "\n" },
+    ]);
+  });
+
+  it("preserves whitespace in mixed content", () => {
+    const parts = parseContent(
+      "Line 1: https://marimo.io\nLine 2: https://github.com",
+    );
+    expect(parts).toEqual([
+      { type: "text", value: "Line 1: " },
+      { type: "url", url: "https://marimo.io" },
+      { type: "text", value: "\nLine 2: " },
+      { type: "url", url: "https://github.com" },
+    ]);
+  });
 });

package/src/utils/blob.ts

@@ -14,32 +14,19 @@ export function serializeBlob<T>(blob: Blob): Promise<DataURLString> {
   });
 }
 
-export function deserializeBlob(serializedBlob: DataURLString): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    try {
-      // Extract the base64 data from the data URL
-      const [prefix, base64Data] = serializedBlob.split(",", 2);
-      const mimeType = /^data:(.+);base64$/.exec(prefix)?.[1];
-      // Decode the base64 string
-      const binaryString = atob(base64Data);
-      // Convert the binary string to an array buffer
-      const len = binaryString.length;
-      const bytes = new Uint8Array(len);
-      for (let i = 0; i < len; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-      }
-      // Create a new Blob from the array buffer
-      const blob = new Blob([bytes], { type: mimeType });
-      resolve(blob);
-    } catch (error) {
-      reject(ensureError(error));
-    }
-  });
-}
-
-function ensureError(error: unknown): Error {
-  if (error instanceof Error) {
-    return error;
+export function deserializeBlob(serializedBlob: DataURLString): Blob {
+  // Extract the base64 data from the data URL
+  const [prefix, base64Data] = serializedBlob.split(",", 2);
+  const mimeType = /^data:(.+);base64$/.exec(prefix)?.[1];
+  // Decode the base64 string
+  const binaryString = atob(base64Data);
+  // Convert the binary string to an array buffer
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
   }
-  return new Error(`${error}`);
+  // Create a new Blob from the array buffer
+  const blob = new Blob([bytes], { type: mimeType });
+  return blob;
 }

package/src/utils/id-tree.tsx

@@ -360,7 +360,8 @@ export class CollapsibleTree<T> {
   }
 
   /**
-   * Expand a node and all of its children
+   * Expand a node and all of its children.
+   * If the node is already expanded, returns the same tree (no-op).
    */
   expand(id: T): CollapsibleTree<T> {
     const nodeIndex = this.nodes.findIndex((n) => n.value === id);
@@ -373,7 +374,8 @@ export class CollapsibleTree<T> {
     let nodes = [...this.nodes];
     const node = nodes[nodeIndex];
     if (!node.isCollapsed) {
-      throw new Error(`Node ${id} is already expanded`);
+      // Already expanded, no-op
+      return this;
     }
 
     nodes[nodeIndex] = new TreeNode(node.value, false, []);
@@ -495,13 +497,9 @@ export class CollapsibleTree<T> {
    */
   deleteAtIndex(idx: number): CollapsibleTree<T> {
     const id = this.atOrThrow(idx);
-    let tree = this.withNodes(this.nodes);
-    try {
-      tree = tree.expand(id);
-    } catch {
-      // Don't care if its not expanded
-    }
-    return this.withNodes(arrayDelete(tree.nodes, idx));
+    // Expand the node first (if collapsed) to bring children back to top level
+    const tree = this.expand(id);
+    return tree.withNodes(arrayDelete(tree.nodes, idx));
   }
 
   delete(id: T): CollapsibleTree<T> {
@@ -524,16 +522,10 @@ export class CollapsibleTree<T> {
     if (found.length === 0) {
       return this;
     }
-    let result = this.withNodes(this.nodes);
-    for (const node of found) {
-      try {
-        result = result.expand(node);
-      } catch {
-        // Don't care if its the last node and its not expanded
-      }
-    }
-
-    return result;
+    return found.reduce<CollapsibleTree<T>>(
+      (acc, node) => acc.expand(node),
+      this,
+    );
   }
 
   /**

package/src/utils/json/base64.ts

@@ -52,13 +52,27 @@ export function extractBase64FromDataURL(str: DataURLString): Base64String {
 }
 
 /**
- * Convert a base64 string to a Uint8Array.
+ * Convert a base64 string to a Uint8Array (fallback implementation).
+ * See benchmarks/base64-conversion.bench.ts for why we use a manual loop.
  */
-export function base64ToUint8Array(bytes: Base64String): Uint8Array {
-  const binary = window.atob(bytes);
-  return Uint8Array.from(binary, (c) => c.charCodeAt(0));
+function base64ToUint8ArrayFallback(bytes: string): Uint8Array {
+  const binary = globalThis.atob(bytes);
+  const len = binary.length;
+  const uint8Array = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    uint8Array[i] = binary.charCodeAt(i);
+  }
+  return uint8Array;
 }
 
+/**
+ * Convert a base64 string to a Uint8Array.
+ * Uses native Uint8Array.fromBase64 if available, otherwise falls back to manual implementation.
+ */
+export const base64ToUint8Array: (bytes: Base64String) => Uint8Array =
+  // @ts-expect-error - Uint8Array.fromBase64 types coming in TypeScript 5.10+
+  Uint8Array.fromBase64 ?? base64ToUint8ArrayFallback;
+
 /**
  * Convert a base64 string to a DataView.
  */
@@ -68,13 +82,29 @@ export function base64ToDataView(bytes: Base64String): DataView {
 }
 
 /**
- * Convert a Uint8Array to a base64 string.
+ * Convert a Uint8Array to a base64 string (fallback implementation).
+ * See benchmarks/uint8array-to-base64.bench.ts for why we use a manual loop.
  */
-export function uint8ArrayToBase64(binary: Uint8Array): Base64String {
-  const chars = Array.from(binary, (byte) => String.fromCharCode(byte));
-  return window.btoa(chars.join("")) as Base64String;
+function uint8ArrayToBase64Fallback(binary: Uint8Array): Base64String {
+  let binaryString = "";
+  const len = binary.length;
+  for (let i = 0; i < len; i++) {
+    binaryString += String.fromCharCode(binary[i]);
+  }
+  return globalThis.btoa(binaryString) as Base64String;
 }
 
+/**
+ * Convert a Uint8Array to a base64 string.
+ * Uses native Uint8Array.prototype.toBase64 if available, otherwise falls back to manual implementation.
+ */
+export const uint8ArrayToBase64: (binary: Uint8Array) => Base64String =
+  // @ts-expect-error - Uint8Array.prototype.toBase64 types coming in TypeScript 5.10+
+  Uint8Array.prototype.toBase64
+    ? // @ts-expect-error - Uint8Array.prototype.toBase64 types coming in TypeScript 5.10+
+      (binary) => binary.toBase64()
+    : uint8ArrayToBase64Fallback;
+
 /**
  * Convert a DataView to a base64 string.
  */