@marimo-team/frontend 0.23.15-dev7 → 0.23.15-dev71

package/src/core/diagnostics/__tests__/issue-details.test.ts

@@ -0,0 +1,173 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import type { CellErrorEntry } from "@/core/errors/error-entries";
+import type { EnvironmentInfo } from "@/core/network/types";
+import {
+  buildBugReportUrl,
+  buildIssueDetails,
+  createPartialEnvironment,
+  enrichEnvironment,
+  markdownCodeFence,
+  MAX_PREFILL_URL_LENGTH,
+} from "../issue-details";
+
+const environment: EnvironmentInfo = {
+  marimo: "1.2.3",
+  editable: false,
+  location: "~/.venv/site-packages/marimo",
+  OS: "Darwin",
+  "OS Version": "25.0",
+  Processor: "arm",
+  "Python Version": "3.12.9",
+  Locale: "en_US",
+  Binaries: { Browser: "chrome 140", Node: "v22", uv: "0.11" },
+  Dependencies: { click: "8.4.2" },
+  "Optional Dependencies": { pandas: "3.0.0" },
+  "Experimental Flags": {},
+};
+
+describe("enrichEnvironment", () => {
+  it("replaces server Chrome detection with the active browser", () => {
+    const result = enrichEnvironment(environment, "Firefox/140");
+    expect(result.Binaries.Browser).toBe("Firefox/140");
+    expect(result.Binaries.Node).toBe("v22");
+  });
+
+  it("does not mutate the input", () => {
+    enrichEnvironment(environment, "Firefox/140");
+    expect(environment.Binaries.Browser).toBe("chrome 140");
+  });
+});
+
+describe("createPartialEnvironment", () => {
+  it("records the collection error and keeps the active browser", () => {
+    const partial = createPartialEnvironment(
+      "1.2.3",
+      "Firefox/140",
+      "en_US",
+      "Server environment information unavailable",
+    );
+    expect(partial.marimo).toBe("1.2.3");
+    expect(partial.Binaries?.Browser).toBe("Firefox/140");
+    expect(partial.Locale).toBe("en_US");
+    expect(partial["Environment Collection Error"]).toBe(
+      "Server environment information unavailable",
+    );
+  });
+
+  it("omits empty fields rather than filling placeholders", () => {
+    const partial = createPartialEnvironment(
+      "1.2.3",
+      "Firefox/140",
+      "",
+      "boom",
+    );
+    expect(partial.Locale).toBeUndefined();
+    expect(partial.location).toBeUndefined();
+    expect(partial.OS).toBeUndefined();
+    expect(partial.Dependencies).toBeUndefined();
+  });
+});
+
+describe("markdownCodeFence", () => {
+  it("uses a fence longer than any backtick run in the content", () => {
+    const block = markdownCodeFence("python", 'text = "```"');
+    expect(block.startsWith("````python\n")).toBe(true);
+    expect(block.endsWith("\n````")).toBe(true);
+    expect(block).toContain('text = "```"');
+  });
+
+  it("uses a minimum fence of three backticks", () => {
+    const block = markdownCodeFence("json", "{}");
+    expect(block.startsWith("```json\n")).toBe(true);
+    expect(block.endsWith("\n```")).toBe(true);
+  });
+});
+
+describe("buildIssueDetails", () => {
+  it("includes the environment and omits notebook source unless provided", () => {
+    const markdown = buildIssueDetails({
+      environment,
+      errors: [],
+      notebook: undefined,
+    });
+    expect(markdown).toContain("<summary>Environment</summary>");
+    expect(markdown).toContain('"marimo": "1.2.3"');
+    expect(markdown).not.toContain("Notebook source");
+    expect(markdown).not.toContain("Current errors");
+  });
+
+  it("includes current errors as plain text without notebook source", () => {
+    const errors: CellErrorEntry[] = [
+      {
+        cellId: cellId("cell-1"),
+        cellName: "Cell 1",
+        cellCode: "password = 'private'",
+        errorData: [],
+        tracebackHtml:
+          '<span class="gr">ValueError</span>: <span class="n">bad value</span>',
+      },
+    ];
+    const markdown = buildIssueDetails({ environment, errors });
+    expect(markdown).toContain("<summary>Current errors</summary>");
+    expect(markdown).toContain("ValueError: bad value");
+    expect(markdown).not.toContain("password");
+  });
+
+  it("includes notebook source under its basename when provided", () => {
+    const markdown = buildIssueDetails({
+      environment,
+      errors: [],
+      notebook: {
+        filename: "/project/example.py",
+        contents: "x = 1",
+      },
+    });
+    expect(markdown).toContain(
+      "<summary>Notebook source: example.py</summary>",
+    );
+    expect(markdown).toContain("x = 1");
+  });
+
+  it("escapes the summary label as text", () => {
+    const markdown = buildIssueDetails({
+      environment,
+      errors: [],
+      notebook: {
+        filename: "/project/<script>.py",
+        contents: "x = 1",
+      },
+    });
+    expect(markdown).toContain("&lt;script&gt;.py");
+    expect(markdown).not.toContain("<script>.py");
+  });
+});
+
+describe("buildBugReportUrl", () => {
+  const baseUrl =
+    "https://github.com/marimo-team/marimo/issues/new?template=bug_report.yaml";
+
+  it("prefills the env field with the encoded issue details", () => {
+    const url = buildBugReportUrl(baseUrl, "hello world");
+    expect(url).toBe(`${baseUrl}&env=hello%20world`);
+  });
+
+  it("appends env with a query separator when the base URL has none", () => {
+    const url = buildBugReportUrl("https://example.com/new", "x");
+    expect(url).toBe("https://example.com/new?env=x");
+  });
+
+  it("encodes markdown so it survives as a single query param", () => {
+    const details = buildIssueDetails({ environment, errors: [] });
+    const url = buildBugReportUrl(baseUrl, details);
+    expect(url).toContain("&env=");
+    expect(new URL(url).searchParams.get("env")).toBe(details);
+  });
+
+  it("falls back to the plain base URL when the prefill exceeds the cap", () => {
+    const huge = "x".repeat(MAX_PREFILL_URL_LENGTH);
+    expect(buildBugReportUrl(baseUrl, huge)).toBe(baseUrl);
+  });
+});

package/src/core/diagnostics/issue-details.ts

@@ -0,0 +1,139 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  type CellErrorEntry,
+  formatCellError,
+} from "@/core/errors/error-entries";
+import type { EnvironmentInfo } from "@/core/network/types";
+import { Paths } from "@/utils/paths";
+import { Strings } from "@/utils/strings";
+
+/**
+ * Environment information augmented with a client-side collection error, used
+ * when the server environment request fails and only partial data is available.
+ * Fields are optional because a partial environment only carries what the
+ * client could determine without the server.
+ */
+export type EnvironmentDiagnostics = Partial<EnvironmentInfo> & {
+  "Environment Collection Error"?: string;
+};
+
+export interface NotebookSource {
+  filename: string;
+  contents: string;
+}
+
+export interface IssueDetailsInput {
+  environment: EnvironmentDiagnostics;
+  errors: CellErrorEntry[];
+  notebook?: NotebookSource;
+}
+
+/**
+ * Replace the server-detected browser with the active browser's user agent.
+ *
+ * The server cannot know which browser is driving the UI, so diagnostics
+ * generated from the modal reflect the live `navigator.userAgent` instead.
+ */
+export function enrichEnvironment(
+  environment: EnvironmentInfo,
+  userAgent: string,
+): EnvironmentInfo {
+  return {
+    ...environment,
+    Binaries: {
+      ...environment.Binaries,
+      Browser: userAgent,
+    },
+  };
+}
+
+export function createPartialEnvironment(
+  marimoVersion: string,
+  userAgent: string,
+  locale: string,
+  message: string,
+): EnvironmentDiagnostics {
+  return {
+    marimo: marimoVersion,
+    Locale: locale || undefined,
+    Binaries: { Browser: userAgent },
+    "Environment Collection Error": message,
+  };
+}
+
+/**
+ * Wrap `contents` in a Markdown code fence long enough to survive backtick runs
+ * inside it, so pasted diagnostics render as a single block on GitHub.
+ */
+export function markdownCodeFence(language: string, contents: string): string {
+  const longest = Math.max(
+    2,
+    ...Array.from(contents.matchAll(/`+/g), (match) => match[0].length),
+  );
+  const fence = "`".repeat(longest + 1);
+  return `${fence}${language}\n${contents}\n${fence}`;
+}
+
+/**
+ * GitHub returns HTTP 414 for issue-form URLs beyond roughly 8 KB, so prefill is
+ * skipped once the encoded body would push the URL past this conservative cap.
+ */
+export const MAX_PREFILL_URL_LENGTH = 6000;
+
+/**
+ * Build a bug-report URL with `issueDetails` prefilled into the form's `env`
+ * field. Falls back to `baseUrl` unchanged when the prefilled URL would exceed
+ * `MAX_PREFILL_URL_LENGTH`.
+ */
+export function buildBugReportUrl(
+  baseUrl: string,
+  issueDetails: string,
+): string {
+  const separator = baseUrl.includes("?") ? "&" : "?";
+  const prefilled = `${baseUrl}${separator}env=${encodeURIComponent(issueDetails)}`;
+  return prefilled.length > MAX_PREFILL_URL_LENGTH ? baseUrl : prefilled;
+}
+
+function detailsSection(summary: string, body: string): string {
+  return [
+    "<details>",
+    `<summary>${Strings.htmlEscape(summary) ?? ""}</summary>`,
+    "",
+    body,
+    "",
+    "</details>",
+  ].join("\n");
+}
+
+export function buildIssueDetails(input: IssueDetailsInput): string {
+  const sections = [
+    detailsSection(
+      "Environment",
+      markdownCodeFence("json", JSON.stringify(input.environment, null, 2)),
+    ),
+  ];
+
+  if (input.errors.length > 0) {
+    sections.push(
+      detailsSection(
+        "Current errors",
+        markdownCodeFence(
+          "text",
+          input.errors.map(formatCellError).join("\n\n---\n\n"),
+        ),
+      ),
+    );
+  }
+
+  if (input.notebook) {
+    sections.push(
+      detailsSection(
+        `Notebook source: ${Paths.basename(input.notebook.filename)}`,
+        markdownCodeFence("python", input.notebook.contents),
+      ),
+    );
+  }
+
+  return sections.join("\n\n");
+}

package/src/core/errors/__tests__/error-entries.test.ts

@@ -0,0 +1,25 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { type CellErrorEntry, formatCellError } from "../error-entries";
+
+describe("formatCellError", () => {
+  it("formats current tracebacks without notebook source", () => {
+    const entry: CellErrorEntry = {
+      cellId: cellId("cell-1"),
+      cellName: "Cell 1",
+      cellCode: "password = 'private'",
+      errorData: [],
+      tracebackHtml:
+        '<span class="gr">ValueError</span>: <span class="n">bad value</span>',
+    };
+
+    const text = formatCellError(entry);
+
+    expect(text).toContain("Cell 1");
+    expect(text).toContain("ValueError: bad value");
+    expect(text).not.toContain("password");
+    expect(text).not.toContain("<span");
+  });
+});

package/src/core/errors/error-entries.ts

@@ -0,0 +1,176 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { notebookAtom } from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { displayCellName } from "@/core/cells/names";
+import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
+import { isErrorMime, isMarimoErrorsMime, isTracebackMime } from "@/core/mime";
+import type { JotaiStore } from "@/core/state/jotai";
+import { logNever } from "@/utils/assertNever";
+import { parseHtmlContent } from "@/utils/dom";
+
+export interface CellErrorEntry {
+  cellId: CellId;
+  cellName: string;
+  cellCode: string;
+  errorData: MarimoError[];
+  tracebackHtml?: string;
+}
+
+function parseCellErrorOutput(
+  output: OutputMessage,
+): Pick<CellErrorEntry, "errorData" | "tracebackHtml"> | null {
+  if (isMarimoErrorsMime(output.mimetype)) {
+    if (!Array.isArray(output.data)) {
+      return null;
+    }
+    const errorData = output.data.filter(
+      (error) => !error.type.includes("ancestor"),
+    );
+    if (errorData.length === 0) {
+      return null;
+    }
+    return { errorData };
+  }
+
+  if (isTracebackMime(output.mimetype)) {
+    if (typeof output.data !== "string" || output.data.length === 0) {
+      return null;
+    }
+    return { errorData: [], tracebackHtml: output.data };
+  }
+
+  return null;
+}
+
+function errorDataHasTraceback(errorData: MarimoError[]): boolean {
+  return errorData.some((error) => "traceback" in error && error.traceback);
+}
+
+function getTracebackFromConsole(
+  consoleOutputs: OutputMessage[] | undefined,
+): string | undefined {
+  const tracebackOutput = consoleOutputs?.find((output) =>
+    isTracebackMime(output.mimetype),
+  );
+  if (
+    !tracebackOutput ||
+    typeof tracebackOutput.data !== "string" ||
+    tracebackOutput.data.length === 0
+  ) {
+    return undefined;
+  }
+  return tracebackOutput.data;
+}
+
+function resolveTracebackHtml(
+  parsed: Pick<CellErrorEntry, "errorData" | "tracebackHtml">,
+  consoleOutputs: OutputMessage[] | undefined,
+): string | undefined {
+  if (parsed.tracebackHtml) {
+    return parsed.tracebackHtml;
+  }
+  if (errorDataHasTraceback(parsed.errorData)) {
+    return undefined;
+  }
+  return getTracebackFromConsole(consoleOutputs);
+}
+
+export function getCellErrorEntries(store: JotaiStore): CellErrorEntry[] {
+  const { cellIds, cellRuntime, cellData } = store.get(notebookAtom);
+  const entries: CellErrorEntry[] = [];
+
+  for (const [cellIndex, cellId] of cellIds.inOrderIds.entries()) {
+    const cell = cellRuntime[cellId];
+    const output = cell.output;
+    if (!output || !isErrorMime(output.mimetype)) {
+      continue;
+    }
+
+    const parsed = parseCellErrorOutput(output);
+    if (!parsed) {
+      continue;
+    }
+
+    const cellName = displayCellName(cellData[cellId].name, cellIndex);
+    // Prefer the code from the last execution: runtime errors correspond to
+    // the previous run, while `code` may already contain unsaved edits.
+    const cellCode = cellData[cellId].lastCodeRun ?? cellData[cellId].code;
+
+    entries.push({
+      cellId,
+      cellName,
+      cellCode,
+      errorData: parsed.errorData,
+      tracebackHtml: resolveTracebackHtml(parsed, cell.consoleOutputs),
+    });
+  }
+
+  return entries;
+}
+
+export function describeError(error: MarimoError): string {
+  if (error.type === "setup-refs") {
+    return "The setup cell cannot have references";
+  }
+  if (error.type === "cycle") {
+    return "This cell is in a cycle";
+  }
+  if (error.type === "multiple-defs") {
+    return `The variable '${error.name}' was defined by another cell`;
+  }
+  if (error.type === "import-star") {
+    return error.msg;
+  }
+  if (error.type === "ancestor-stopped") {
+    return error.msg;
+  }
+  if (error.type === "ancestor-prevented") {
+    return error.msg;
+  }
+  if (error.type === "exception") {
+    return error.msg;
+  }
+  if (error.type === "strict-exception") {
+    return error.msg;
+  }
+  if (error.type === "interruption") {
+    return "This cell was interrupted and needs to be re-run";
+  }
+  if (error.type === "syntax") {
+    return error.msg;
+  }
+  if (error.type === "unknown") {
+    return error.msg;
+  }
+  if (error.type === "sql-error") {
+    return error.msg;
+  }
+  if (error.type === "internal") {
+    return error.msg || "An internal error occurred";
+  }
+  logNever(error);
+  return "Unknown error";
+}
+
+export function formatSingleError(error: MarimoError): string {
+  let text = describeError(error);
+  if ("traceback" in error && error.traceback) {
+    text += `\n\nTraceback:\n${parseHtmlContent(error.traceback)}`;
+  }
+  return text;
+}
+
+export function formatCellError(entry: CellErrorEntry): string {
+  const parts = [entry.cellName];
+
+  if (entry.tracebackHtml) {
+    parts.push(parseHtmlContent(entry.tracebackHtml));
+  }
+
+  if (entry.errorData.length > 0) {
+    parts.push(entry.errorData.map(formatSingleError).join("\n\n"));
+  }
+
+  return parts.join("\n\n");
+}

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

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { RuntimeState } from "@/core/kernel/RuntimeState";
+import { initializeIslands } from "../bootstrap";
+import type { IslandsPyodideBridge } from "../bridge";
+import { islandsHydratedAtom, islandsPendingInitialRunsAtom } from "../state";
+import type { IslandsKernelMessage } from "../worker/worker";
+
+function completedRun(sessionGeneration: number): IslandsKernelMessage {
+  return {
+    sessionGeneration,
+    message: JSON.stringify({
+      op: "completed-run",
+      data: { op: "completed-run", run_id: null },
+    }) as IslandsKernelMessage["message"],
+  };
+}
+
+describe("initializeIslands", () => {
+  afterEach(vi.restoreAllMocks);
+
+  it("waits for each initial session to complete", async () => {
+    const root = document.createElement("div");
+    root.innerHTML =
+      '<marimo-island data-app-id="app-1" data-reactive="true"></marimo-island>';
+
+    let consumeMessage: ((message: IslandsKernelMessage) => void) | undefined;
+    const bridge = {
+      consumeMessages: (consumer: (message: IslandsKernelMessage) => void) => {
+        consumeMessage = consumer;
+      },
+      sendComponentValues: vi.fn(),
+    } as unknown as IslandsPyodideBridge;
+    const store = createStore();
+    vi.spyOn(RuntimeState.INSTANCE, "start").mockImplementation(
+      () => undefined,
+    );
+
+    await initializeIslands({
+      bridge,
+      store,
+      root,
+      autoInitializePlugins: false,
+    });
+
+    expect(store.get(islandsHydratedAtom)).toBe(false);
+    store.set(islandsPendingInitialRunsAtom, new Set([1, 2]));
+
+    consumeMessage?.(completedRun(1));
+    expect(store.get(islandsHydratedAtom)).toBe(false);
+
+    consumeMessage?.(completedRun(1));
+    consumeMessage?.(completedRun(0));
+    expect(store.get(islandsHydratedAtom)).toBe(false);
+
+    consumeMessage?.(completedRun(2));
+    expect(store.get(islandsHydratedAtom)).toBe(true);
+  });
+});