@marimo-team/islands 0.24.3-dev5 → 0.24.3-dev52

package/src/components/editor/cell/code/cell-editor.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { historyField } from "@codemirror/commands";
-import { EditorState, StateEffect } from "@codemirror/state";
+import { EditorState, type Extension, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
 import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useAtom, useAtomValue } from "jotai";
@@ -95,6 +95,21 @@ export interface CellEditorProps
   tooltipParentSelector?: string;
 }
 
+export function composeRtcEditorConfig(
+  code: string,
+  extensions: Extension[],
+  rtc: ReturnType<typeof realTimeCollaboration> | undefined,
+): { code: string; extensions: Extension[] } {
+  if (!rtc) {
+    return { code, extensions };
+  }
+
+  return {
+    code: rtc.code,
+    extensions: [...extensions, rtc.extension],
+  };
+}
+
 const CellEditorInternal = ({
   theme,
   showPlaceholder,
@@ -343,27 +358,31 @@ const CellEditorInternal = ({
   ]);
 
   const rtcEnabled = isRtcEnabled() && canUseRtc(cellId);
-  const handleInitializeEditor = useEvent(() => {
-    // If rtc is enabled, use collaborative editing
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(
-        cellId,
-        (code) => {
-          // It's not really a formatting change,
-          // but this means it won't be marked as stale
-          cellActions.updateCellCode({ cellId, code, formattingChange: true });
-        },
-        code,
-      );
-      extensions.push(rtc.extension);
-      code = rtc.code;
+  const createEditorConfig = (initialCode?: string) => {
+    if (!rtcEnabled) {
+      return composeRtcEditorConfig(code, extensions, undefined);
     }
 
+    const rtc = realTimeCollaboration(
+      cellId,
+      (code) => {
+        // It's not really a formatting change,
+        // but this means it won't be marked as stale
+        cellActions.updateCellCode({ cellId, code, formattingChange: true });
+      },
+      initialCode,
+    );
+    return composeRtcEditorConfig(code, extensions, rtc);
+  };
+
+  const handleInitializeEditor = useEvent(() => {
+    const editorConfig = createEditorConfig(code);
+
     // Create a new editor
     const ev = new EditorView({
       state: EditorState.create({
-        doc: code,
-        extensions: extensions,
+        doc: editorConfig.code,
+        extensions: editorConfig.extensions,
       }),
     });
     setEditorView(ev);
@@ -377,19 +396,11 @@ const CellEditorInternal = ({
 
   const handleReconfigureEditor = useEvent(() => {
     invariant(editorViewRef.current !== null, "Editor view is not initialized");
-    // If rtc is enabled, use collaborative editing
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(cellId, (code) => {
-        // It's not really a formatting change,
-        // but this means it won't be marked as stale
-        cellActions.updateCellCode({ cellId, code, formattingChange: true });
-      });
-      extensions.push(rtc.extension);
-    }
+    const editorConfig = createEditorConfig();
 
     editorViewRef.current.dispatch({
       effects: [
-        StateEffect.reconfigure.of([extensions]),
+        StateEffect.reconfigure.of([editorConfig.extensions]),
         reconfigureLanguageEffect(editorViewRef.current, {
           completionConfig: userConfig.completion,
           hotkeysProvider: new OverridingHotkeyProvider(
@@ -406,26 +417,14 @@ const CellEditorInternal = ({
 
   const handleDeserializeEditor = useEvent(() => {
     invariant(serializedEditorState, "Editor view is not initialized");
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(
-        cellId,
-        (code) => {
-          // It's not really a formatting change,
-          // but this means it won't be marked as stale
-          cellActions.updateCellCode({ cellId, code, formattingChange: true });
-        },
-        code,
-      );
-      extensions.push(rtc.extension);
-      code = rtc.code;
-    }
+    const editorConfig = createEditorConfig(code);
 
     const ev = new EditorView({
       state: EditorState.fromJSON(
         serializedEditorState,
         {
-          doc: code,
-          extensions: extensions,
+          doc: editorConfig.code,
+          extensions: editorConfig.extensions,
         },
         { history: historyField },
       ),

package/src/components/editor/chrome/components/__tests__/feedback-button.test.tsx

@@ -208,4 +208,98 @@ describe("FeedbackModal issue reporting", () => {
       expect(href).toContain(encodeURIComponent('"marimo": "1.2.3"'));
     });
   });
+
+  it("shows partial environment details when the request client is missing", async () => {
+    store.set(requestClientAtom, null);
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Environment details");
+    expect(
+      screen.getByText("Server environment information unavailable"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Loading environment details…"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Retry" }),
+    ).not.toBeInTheDocument();
+
+    const link = screen.getByRole("link", { name: "Open GitHub issue" });
+    const href = link.getAttribute("href") ?? "";
+    expect(href).toContain("&env=");
+    expect(href).toContain(encodeURIComponent("Environment Collection Error"));
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Copy environment JSON" }),
+    );
+    await waitFor(() =>
+      expect(copyModule.copyToClipboard).toHaveBeenCalledWith(
+        expect.stringContaining("Environment Collection Error"),
+      ),
+    );
+  });
+
+  it("disables source collection when the request client is missing", async () => {
+    localStorage.setItem(
+      "marimo:issue-report:include-code",
+      JSON.stringify(true),
+    );
+    store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    store.set(requestClientAtom, null);
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Environment details");
+    expect(
+      screen.getByRole("checkbox", { name: "Include notebook code" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByText("Notebook source is unavailable."),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Connect the notebook to include its source."),
+    ).not.toBeInTheDocument();
+    const link = screen.getByRole("link", { name: "Open GitHub issue" });
+    expect(link.getAttribute("href") ?? "").not.toContain("reproduction-code=");
+  });
+
+  it("preserves partial diagnostics when the environment request throws", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockImplementation(() => {
+          throw new Error("offline");
+        }),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Server environment information unavailable");
+    expect(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+    expect(
+      screen.getByText(/Environment Collection Error/),
+    ).toBeInTheDocument();
+  });
+
+  it("replaces partial diagnostics after a successful environment retry", async () => {
+    const getEnvironmentInfo = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockResolvedValueOnce(environment);
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({ getEnvironmentInfo }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Server environment information unavailable");
+    fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+
+    await screen.findByText(/"marimo": "1.2.3"/);
+    expect(
+      screen.queryByText("Server environment information unavailable"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Retry" }),
+    ).not.toBeInTheDocument();
+  });
 });

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -6,7 +6,7 @@ const Slot = SlotPrimitive.Slot;
 
 import { useAtomValue } from "jotai";
 import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
-import React, { type PropsWithChildren, useMemo, useState } from "react";
+import React, { type PropsWithChildren, useState } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { Button } from "@/components/ui/button";
@@ -36,7 +36,7 @@ import {
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { getMarimoVersion } from "@/core/meta/globals";
 import { connectionAtom } from "@/core/network/connection";
-import { useRequestClient } from "@/core/network/requests";
+import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { WebSocketState } from "@/core/websocket/types";
@@ -74,6 +74,27 @@ const CollapsiblePreview: React.FC<{ content: string }> = ({ content }) => {
   );
 };
 
+function getNotebookSourceUnavailableReason(args: {
+  hasRequestClient: boolean;
+  filename: string | null;
+  codeAvailable: boolean;
+  connectionState: WebSocketState;
+}): string | undefined {
+  if (!args.hasRequestClient) {
+    return "Notebook source is unavailable.";
+  }
+  if (args.filename === null) {
+    return "Save the notebook first.";
+  }
+  if (!args.codeAvailable) {
+    return "Notebook source is hidden in this view.";
+  }
+  if (args.connectionState !== WebSocketState.OPEN) {
+    return "Connect the notebook to include its source.";
+  }
+  return undefined;
+}
+
 export const FeedbackButton: React.FC<PropsWithChildren> = ({ children }) => {
   const { openModal, closeModal } = useImperativeModal();
 
@@ -85,17 +106,18 @@ export const FeedbackButton: React.FC<PropsWithChildren> = ({ children }) => {
 };
 
 export const FeedbackModal: React.FC<{
-  onClose: () => void;
+  onClose?: () => void;
 }> = () => {
-  const { getEnvironmentInfo, readCode } = useRequestClient();
-  const environmentRequest = useAsyncData(
-    async () => getEnvironmentInfo(),
-    [getEnvironmentInfo],
-  );
+  const requestClient = useAtomValue(requestClientAtom);
+  const environmentRequest = useAsyncData(async () => {
+    if (requestClient == null) {
+      return undefined;
+    }
+    return requestClient.getEnvironmentInfo();
+  }, [requestClient]);
 
   const notebook = useAtomValue(notebookAtom);
-  // biome-ignore lint/correctness/useExhaustiveDependencies: recompute when the notebook changes
-  const errors = useMemo(() => getCellErrorEntries(store), [notebook]);
+  const errors = getCellErrorEntries(store);
 
   const cells = notebook.cellIds.inOrderIds.map(
     (cellId) => notebook.cellData[cellId],
@@ -103,18 +125,13 @@ export const FeedbackModal: React.FC<{
   const codeAvailable = useNotebookCodeAvailable(cells);
   const filename = useAtomValue(filenameAtom);
   const connection = useAtomValue(connectionAtom);
-  const notebookSourceAvailable =
-    filename !== null &&
-    codeAvailable &&
-    connection.state === WebSocketState.OPEN;
-
-  const notebookSourceReason = notebookSourceAvailable
-    ? undefined
-    : filename === null
-      ? "Save the notebook first."
-      : !codeAvailable
-        ? "Notebook source is hidden in this view."
-        : "Connect the notebook to include its source.";
+  const notebookSourceReason = getNotebookSourceUnavailableReason({
+    hasRequestClient: requestClient != null,
+    filename,
+    codeAvailable,
+    connectionState: connection.state,
+  });
+  const notebookSourceAvailable = notebookSourceReason === undefined;
 
   const [includeErrors, setIncludeErrors] = useLocalStorage(
     "marimo:issue-report:include-errors",
@@ -128,7 +145,7 @@ export const FeedbackModal: React.FC<{
   const environment: EnvironmentDiagnostics | undefined =
     environmentRequest.data
       ? enrichEnvironment(environmentRequest.data, navigator.userAgent)
-      : environmentRequest.status === "error"
+      : environmentRequest.status === "error" || requestClient == null
         ? createPartialEnvironment(
             getMarimoVersion(),
             navigator.userAgent,
@@ -138,17 +155,16 @@ export const FeedbackModal: React.FC<{
         : undefined;
 
   const codeRequest = useAsyncData(async () => {
-    if (!includeCode || !notebookSourceAvailable) {
+    if (!includeCode || !notebookSourceAvailable || requestClient == null) {
       return undefined;
     }
-    const { contents } = await readCode();
+    const { contents } = await requestClient.readCode();
     return contents;
-  }, [includeCode, notebookSourceAvailable, readCode]);
+  }, [includeCode, notebookSourceAvailable, requestClient]);
 
-  const { url: githubIssueUrl, omitted } = useMemo(() => {
-    if (!environment) {
-      return { url: Constants.bugReportUrl, omitted: [] as string[] };
-    }
+  let githubIssueUrl = Constants.bugReportUrl;
+  let omitted: string[] = [];
+  if (environment) {
     const fields: Record<string, string> = {
       env: formatEnvironmentSection(environment),
     };
@@ -158,8 +174,11 @@ export const FeedbackModal: React.FC<{
     if (includeCode && codeRequest.data) {
       fields["reproduction-code"] = formatCodeSection(codeRequest.data);
     }
-    return buildBugReportUrl(Constants.bugReportUrl, fields);
-  }, [environment, errors, includeErrors, includeCode, codeRequest.data]);
+    ({ url: githubIssueUrl, omitted } = buildBugReportUrl(
+      Constants.bugReportUrl,
+      fields,
+    ));
+  }
 
   const omittedLabels = omitted
     .map((field) =>
@@ -254,7 +273,7 @@ export const FeedbackModal: React.FC<{
           )}
         </div>
 
-        {environmentRequest.status === "pending" && (
+        {environmentRequest.status === "pending" && requestClient != null && (
           <div className="flex flex-col gap-2">
             <span className="text-sm text-muted-foreground">
               Loading environment details…
@@ -265,18 +284,20 @@ export const FeedbackModal: React.FC<{
           </div>
         )}
 
-        {environmentRequest.status === "error" && (
+        {(environmentRequest.status === "error" || requestClient == null) && (
           <div className="flex items-center gap-2 text-sm">
             <TriangleAlertIcon className="w-4 h-4 text-(--yellow-11) shrink-0" />
             <span>Server environment information unavailable</span>
-            <Button
-              type="button"
-              variant="link"
-              size="xs"
-              onClick={() => environmentRequest.refetch()}
-            >
-              Retry
-            </Button>
+            {requestClient != null && (
+              <Button
+                type="button"
+                variant="link"
+                size="xs"
+                onClick={() => environmentRequest.refetch()}
+              >
+                Retry
+              </Button>
+            )}
           </div>
         )}
 

package/src/components/editor/chrome/panels/__tests__/packages-panel.test.tsx

@@ -1,6 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
@@ -10,6 +17,9 @@ import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
+import { withPackageInvalidation } from "@/core/packages/package-data";
+import { useInstallPackages } from "@/core/packages/useInstallPackage";
+import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { store } from "@/core/state/jotai";
 import PackagesPanel from "../packages-panel";
 
@@ -51,16 +61,22 @@ function renderPanel(
   context: DependencyTreeResponse["context"],
   tree: DependencyTreeNode = emptyTree,
 ) {
-  const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
   store.set(
-    requestClientAtom,
-    MockRequestClient.create({
-      getPackageList,
-      getDependencyTree: vi.fn().mockResolvedValue({ tree, context }),
-    }),
+    sandboxAtom,
+    context.kind === "sandbox"
+      ? { backend: context.backend, manifest: "", filename: "notebook.py" }
+      : null,
   );
+  store.set(sandboxSyncAtom, { pending: false, error: null });
+  const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
+  const client = MockRequestClient.create({
+    getPackageList,
+    getDependencyTree: vi.fn().mockResolvedValue({ tree, context }),
+  });
+  store.set(requestClientAtom, client);
 
   return {
+    client,
     getPackageList,
     ...render(
       <Provider store={store}>
@@ -141,3 +157,94 @@ describe("PackagesPanel", () => {
     expect(getPackageList).toHaveBeenCalledOnce();
   });
 });
+
+it("refreshes an open panel when a package is installed elsewhere, after installation succeeds", async () => {
+  const { promise, resolve } = Promise.withResolvers<{ success: boolean }>();
+  const client = MockRequestClient.create({
+    addPackage: vi.fn(() => promise),
+    getDependencyTree: vi
+      .fn()
+      .mockResolvedValueOnce({
+        tree: emptyTree,
+        context: { kind: "sandbox", backend: "uv" },
+      })
+      .mockResolvedValue({
+        tree: populatedTree,
+        context: { kind: "sandbox", backend: "uv" },
+      }),
+  });
+  store.set(sandboxAtom, {
+    backend: "uv",
+    manifest: "",
+    filename: "notebook.py",
+  });
+  store.set(sandboxSyncAtom, { pending: false, error: null });
+  store.set(requestClientAtom, withPackageInvalidation(client));
+  function InstallElsewhere() {
+    const { handleInstallPackages } = useInstallPackages();
+    return (
+      <button onClick={() => handleInstallPackages(["polars"])}>
+        Install from another panel
+      </button>
+    );
+  }
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <PackagesPanel />
+        <InstallElsewhere />
+      </TooltipProvider>
+    </Provider>,
+  );
+  await screen.findByPlaceholderText("Add packages to uv sandbox...");
+  fireEvent.click(
+    screen.getByRole("button", { name: "Install from another panel" }),
+  );
+  expect(client.getDependencyTree).toHaveBeenCalledTimes(1);
+  await act(async () => resolve({ success: true }));
+  await waitFor(() =>
+    expect(client.getDependencyTree).toHaveBeenCalledTimes(2),
+  );
+  expect(await screen.findByText("polars")).toBeInTheDocument();
+});
+
+it.each(["uv", "pixi", "list"] as const)(
+  "allows upgrading marimo but not removing it in the %s view",
+  async (view) => {
+    const tree = {
+      ...populatedTree,
+      dependencies: [
+        ...populatedTree.dependencies,
+        { name: "marimo", version: "0.24.0", tags: [], dependencies: [] },
+      ],
+    };
+    const { client, getPackageList } = renderPanel(
+      view === "list"
+        ? { kind: "package-manager", name: "pip" }
+        : { kind: "sandbox", backend: view },
+      tree,
+    );
+    getPackageList.mockResolvedValue({ packages: tree.dependencies });
+    vi.mocked(client.addPackage).mockResolvedValue({ success: true });
+    if (view === "list") {
+      fireEvent.click(await screen.findByRole("button", { name: "List" }));
+    }
+    const role = view === "list" ? "row" : "treeitem";
+    const marimo = within(await screen.findByRole(role, { name: /marimo/ }));
+    expect(marimo.getByText(/0\.24\.0/)).toBeInTheDocument();
+    expect(
+      marimo.queryByRole("button", { name: "Remove" }),
+    ).not.toBeInTheDocument();
+    const polars = within(screen.getByRole(role, { name: /polars/ }));
+    expect(polars.getByRole("button", { name: "Remove" })).toBeInTheDocument();
+    fireEvent.click(marimo.getByRole("button", { name: "Upgrade" }));
+    await waitFor(() =>
+      expect(client.addPackage).toHaveBeenCalledWith({
+        package: "marimo",
+        upgrade: true,
+        group: undefined,
+      }),
+    );
+    expect(client.removePackage).not.toHaveBeenCalled();
+  },
+);