@marimo-team/islands 0.24.3-dev3 → 0.24.3-dev30

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

@@ -22,9 +22,13 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
-import type { DependencyTreeNode } from "@/core/network/types";
+import type {
+  DependencyTreeNode,
+  DependencyTreeResponse,
+} from "@/core/network/types";
 import { stripPackageManagerPrefix } from "@/core/packages/package-input-utils";
 import {
+  showPackageRestartToast,
   showRemovePackageToast,
   showUpgradePackageToast,
 } from "@/core/packages/toast-components";
@@ -39,6 +43,7 @@ import { PanelEmptyState } from "./empty-state";
 import { PACKAGES_INPUT_ID, packagesToInstallAtom } from "./packages-utils";
 
 type ViewMode = "tree" | "list";
+type PackageInstallationContext = DependencyTreeResponse["context"];
 
 const PackageActionButton: React.FC<{
   onClick: () => void;
@@ -77,12 +82,22 @@ const PackagesPanel: React.FC = () => {
     refetch,
     isPending,
   } = useAsyncData(async () => {
-    const [listPackagesResponse, dependencyTreeResponse] = await Promise.all([
-      getPackageList(),
-      getDependencyTree(),
-    ]);
+    // A sandbox's list and tree both inspect the same environment. Wait for
+    // the context before issuing the list request so sandboxes do that work
+    // only once; non-sandbox managers still need both views.
+    const dependencyTreeResponse = await getDependencyTree();
+    if (dependencyTreeResponse.context.kind === "sandbox") {
+      return {
+        list: [],
+        context: dependencyTreeResponse.context,
+        tree: dependencyTreeResponse.tree,
+      };
+    }
+
+    const listPackagesResponse = await getPackageList();
     return {
       list: listPackagesResponse.packages,
+      context: dependencyTreeResponse.context,
       tree: dependencyTreeResponse.tree,
     };
   }, [packageManager]);
@@ -97,48 +112,66 @@ const PackagesPanel: React.FC = () => {
   }
 
   const isTreeSupported = dependencies.tree != null;
-  const viewMode = resolveViewMode(userViewMode, isTreeSupported);
   const name = dependencies.tree?.name;
   const version = dependencies?.tree?.version;
-  const isSandbox = name === "<root>"; // name is the project name otherwise
+  const sandboxBackend =
+    dependencies.context.kind === "sandbox"
+      ? dependencies.context.backend
+      : null;
+  const isSandbox = sandboxBackend !== null;
+  const viewMode = isSandbox
+    ? "tree"
+    : resolveViewMode(userViewMode, isTreeSupported);
+  const scopeLabel = sandboxBackend
+    ? `${sandboxBackend} sandbox`
+    : name && name !== "<root>"
+      ? "project"
+      : "environment";
+  const scopeTitle = sandboxBackend
+    ? `Dependencies are managed by the ${sandboxBackend} sandbox selected when marimo started.`
+    : scopeLabel;
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
-      <InstallPackageForm packageManager={packageManager} onSuccess={refetch} />
-      {isTreeSupported && (
+      <InstallPackageForm context={dependencies.context} onSuccess={refetch} />
+      {(isTreeSupported || isSandbox) && (
         <div className="flex items-center justify-between px-2 py-1 border-b">
-          <div className="flex gap-1">
-            <button
-              type="button"
-              className={cn(
-                "px-2 py-1 text-xs rounded",
-                viewMode === "list"
-                  ? "bg-accent text-accent-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-              onClick={() => setUserViewMode("list")}
-            >
-              List
-            </button>
-            <button
-              type="button"
-              className={cn(
-                "px-2 py-1 text-xs rounded",
-                viewMode === "tree"
-                  ? "bg-accent text-accent-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-              onClick={() => setUserViewMode("tree")}
-            >
-              Tree
-            </button>
-          </div>
+          {isTreeSupported && !isSandbox ? (
+            <div className="flex gap-1">
+              <button
+                type="button"
+                className={cn(
+                  "px-2 py-1 text-xs rounded",
+                  viewMode === "list"
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                onClick={() => setUserViewMode("list")}
+              >
+                List
+              </button>
+              <button
+                type="button"
+                className={cn(
+                  "px-2 py-1 text-xs rounded",
+                  viewMode === "tree"
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+                onClick={() => setUserViewMode("tree")}
+              >
+                Tree
+              </button>
+            </div>
+          ) : (
+            <div />
+          )}
           <div className="flex items-center gap-2">
             <div
               className="items-center border px-2 py-0.5 text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground rounded-sm text-ellipsis block overflow-hidden max-w-fit font-medium"
-              title={isSandbox ? "sandbox" : "project"}
+              title={scopeTitle}
             >
-              {isSandbox ? "sandbox" : "project"}
+              {scopeLabel}
             </div>
             {name && !isSandbox && (
               <span className="text-xs text-muted-foreground">
@@ -155,6 +188,7 @@ const PackagesPanel: React.FC = () => {
         <DependencyTree
           tree={dependencies.tree}
           error={error}
+          sandboxBackend={sandboxBackend}
           onSuccess={refetch}
         />
       )}
@@ -165,11 +199,13 @@ const PackagesPanel: React.FC = () => {
 export default PackagesPanel;
 
 const InstallPackageForm: React.FC<{
-  packageManager: string;
+  context: PackageInstallationContext;
   onSuccess: () => void;
-}> = ({ onSuccess, packageManager }) => {
+}> = ({ onSuccess, context }) => {
   const [input, setInput] = React.useState("");
   const { handleClick: openSettings } = useOpenSettingsToTab();
+  const isSandbox = context.kind === "sandbox";
+  const packageManager = isSandbox ? context.backend : context.name;
 
   // Get the packages to install from the atom
   const packagesToInstall = useAtomValue(packagesToInstallAtom);
@@ -201,7 +237,11 @@ const InstallPackageForm: React.FC<{
   return (
     <div className="flex items-center w-full border-b">
       <SearchInput
-        placeholder={`Install packages with ${packageManager}...`}
+        placeholder={
+          isSandbox
+            ? `Add packages to ${packageManager} sandbox...`
+            : `Install packages with ${packageManager}...`
+        }
         id={PACKAGES_INPUT_ID}
         icon={
           loading ? (
@@ -209,12 +249,23 @@ const InstallPackageForm: React.FC<{
               size="small"
               className="mr-2 h-4 w-4 shrink-0 opacity-50"
             />
+          ) : isSandbox ? (
+            <BoxIcon
+              aria-hidden="true"
+              className="mr-2 h-4 w-4 shrink-0 opacity-50"
+            />
           ) : (
-            <Tooltip content="Change package manager">
-              <BoxIcon
+            <Tooltip
+              content={`Change package manager (currently ${packageManager})`}
+            >
+              <button
+                type="button"
+                aria-label="Change package manager"
                 onClick={() => openSettings("packageManagementAndData")}
-                className="mr-2 h-4 w-4 shrink-0 opacity-50 hover:opacity-80 cursor-pointer"
-              />
+                className="pointer-events-auto mr-2 rounded-sm opacity-50 hover:opacity-80 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+              >
+                <BoxIcon aria-hidden="true" className="h-4 w-4 shrink-0" />
+              </button>
             </Tooltip>
           )
         }
@@ -234,9 +285,21 @@ const InstallPackageForm: React.FC<{
         align="start"
         content={
           <div className="text-sm flex flex-col w-full max-w-[360px]">
-            Packages are installed using the package manager specified in your
-            user configuration. Depending on your package manager, you can
-            install packages with various formats:
+            {isSandbox ? (
+              <span>
+                Packages are recorded in this notebook&apos;s inline metadata
+                and synchronized with its {packageManager} sandbox. To switch
+                backends, restart marimo with a different --sandbox option.
+              </span>
+            ) : (
+              <span>
+                Packages are installed using {packageManager}, selected in your
+                user configuration.
+              </span>
+            )}
+            <span className="mt-2">
+              You can install packages with various formats:
+            </span>
             <div className="flex flex-col gap-2 mt-2">
               <div>
                 <span className="font-bold tracking-wide">Package name:</span> A
@@ -379,7 +442,9 @@ const UpgradeButton: React.FC<{
         upgrade: true,
         group,
       });
-      if (response.success) {
+      if (response.restartRequired) {
+        showPackageRestartToast();
+      } else if (response.success) {
         onSuccess();
         showUpgradePackageToast(packageName);
       } else {
@@ -413,7 +478,9 @@ const RemoveButton: React.FC<{
         package: packageName,
         group,
       });
-      if (response.success) {
+      if (response.restartRequired) {
+        showPackageRestartToast();
+      } else if (response.success) {
         onSuccess();
         showRemovePackageToast(packageName);
       } else {
@@ -434,8 +501,9 @@ const RemoveButton: React.FC<{
 const DependencyTree: React.FC<{
   tree: DependencyTreeNode | null;
   error?: Error | null;
+  sandboxBackend: "uv" | "pixi" | null;
   onSuccess: () => void;
-}> = ({ tree, error, onSuccess }) => {
+}> = ({ tree, error, sandboxBackend, onSuccess }) => {
   const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
     new Set(),
   );
@@ -450,10 +518,25 @@ const DependencyTree: React.FC<{
   }
 
   if (!tree) {
-    return <Spinner size="medium" centered={true} />;
+    return (
+      <PanelEmptyState
+        title="Dependency tree unavailable"
+        description="The sandbox did not return a dependency tree."
+        icon={<BoxIcon />}
+      />
+    );
   }
 
   if (tree.dependencies.length === 0) {
+    if (sandboxBackend === "pixi") {
+      return (
+        <PanelEmptyState
+          title="No PyPI dependencies"
+          description="Conda dependencies are not shown in this panel."
+          icon={<BoxIcon />}
+        />
+      );
+    }
     return (
       <PanelEmptyState
         title="No dependencies"
@@ -575,6 +658,17 @@ const DependencyTreeNode: React.FC<{
         {/* Tags */}
         <div className="flex items-center gap-1 ml-2">
           {node.tags.map((tag, index) => {
+            if (tag.kind === "dedupe") {
+              return (
+                <div
+                  key={index}
+                  className="items-center border px-2 py-0.5 text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 text-muted-foreground rounded-sm text-ellipsis block overflow-hidden max-w-fit font-medium"
+                  title="Package tree already displayed"
+                >
+                  already in tree
+                </div>
+              );
+            }
             if (tag.kind === "cycle") {
               return (
                 <div

package/src/components/editor/code/__tests__/readonly-diff.test.tsx

@@ -0,0 +1,65 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ReadonlyDiff } from "../readonly-diff";
+
+const mocks = vi.hoisted(() => ({
+  mergeView: vi.fn(),
+  useTheme: vi.fn(),
+}));
+
+vi.mock("@codemirror/merge", () => ({
+  unifiedMergeView: mocks.mergeView,
+}));
+
+vi.mock("@uiw/react-codemirror", () => ({
+  default: ({ theme, value }: { theme: string; value: string }) => (
+    <div data-testid="code-mirror" data-theme={theme} data-value={value} />
+  ),
+}));
+
+vi.mock("@/theme/useTheme", () => ({
+  useTheme: mocks.useTheme,
+}));
+
+describe("ReadonlyDiff", () => {
+  beforeEach(() => {
+    mocks.mergeView.mockReset();
+    mocks.mergeView.mockReturnValue([]);
+    mocks.useTheme.mockReturnValue({ theme: "light" });
+  });
+
+  it("updates modified code without rebuilding the diff extensions", () => {
+    const { rerender } = render(
+      <ReadonlyDiff original="before" modified="first revision" />,
+    );
+
+    expect(screen.getByTestId("code-mirror")).toHaveAttribute(
+      "data-value",
+      "first revision",
+    );
+    expect(mocks.mergeView).toHaveBeenCalledTimes(1);
+
+    rerender(<ReadonlyDiff original="before" modified="second revision" />);
+
+    expect(screen.getByTestId("code-mirror")).toHaveAttribute(
+      "data-value",
+      "second revision",
+    );
+    expect(mocks.mergeView).toHaveBeenCalledTimes(1);
+  });
+
+  it("rebuilds diff extensions when the original code changes", () => {
+    const { rerender } = render(
+      <ReadonlyDiff original="before" modified="after" />,
+    );
+
+    rerender(<ReadonlyDiff original="earlier" modified="after" />);
+
+    expect(mocks.mergeView).toHaveBeenCalledTimes(2);
+    expect(mocks.mergeView).toHaveBeenLastCalledWith(
+      expect.objectContaining({ original: "earlier" }),
+    );
+  });
+});

package/src/components/editor/code/readonly-diff.tsx

@@ -21,7 +21,7 @@ export const ReadonlyDiff = memo(
           },
         }),
       ];
-    }, [props.original, props.modified, theme]);
+    }, [props.original]);
 
     return (
       <CodeMirror

package/src/components/editor/file-tree/__tests__/tree-actions.test.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { RefreshIconButton } from "../tree-actions";
+
+vi.mock("@/components/ui/tooltip", () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe("RefreshIconButton", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("spins for at least 500ms after a refresh completes", async () => {
+    const onClick = vi.fn().mockResolvedValue(undefined);
+    const { container } = render(<RefreshIconButton onClick={onClick} />);
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(container.querySelector("svg")).toHaveClass("animate-[spin_0.5s]");
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(500);
+    });
+
+    expect(container.querySelector("svg")).not.toHaveClass(
+      "animate-[spin_0.5s]",
+    );
+  });
+
+  it("uses the latest refresh callback after a rerender", async () => {
+    const initialOnClick = vi.fn().mockResolvedValue(undefined);
+    const updatedOnClick = vi.fn().mockResolvedValue(undefined);
+    const { rerender } = render(<RefreshIconButton onClick={initialOnClick} />);
+
+    rerender(<RefreshIconButton onClick={updatedOnClick} />);
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(initialOnClick).not.toHaveBeenCalled();
+    expect(updatedOnClick).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(500);
+    });
+  });
+});

package/src/components/editor/file-tree/tree-actions.tsx

@@ -7,7 +7,7 @@ import {
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
@@ -41,19 +41,16 @@ export const RefreshIconButton: React.FC<{
 }> = ({ onClick, tooltip = "Refresh", className, iconClassName }) => {
   const [isSpinning, setIsSpinning] = useState(false);
 
-  const handleClick = useCallback(
-    async (e: React.MouseEvent) => {
-      setIsSpinning(true);
-      // Artificially spin for 500ms to show the user that the button is working.
-      const minDelay = new Promise<void>((r) => setTimeout(r, 500));
-      try {
-        await Promise.all([onClick(e), minDelay]);
-      } finally {
-        setIsSpinning(false);
-      }
-    },
-    [onClick],
-  );
+  const handleClick = async (e: React.MouseEvent) => {
+    setIsSpinning(true);
+    // Artificially spin for 500ms to show the user that the button is working.
+    const minDelay = new Promise<void>((r) => setTimeout(r, 500));
+    try {
+      await Promise.all([onClick(e), minDelay]);
+    } finally {
+      setIsSpinning(false);
+    }
+  };
 
   const button = (
     <Button

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

@@ -451,7 +451,8 @@ const EditableCellComponent = ({
       cellRuntime.staleInputs) &&
     !cellRuntime.interrupted;
 
-  // Callback to get the editor view.
+  // This getter is called during render, so useEvent cannot be used here.
+  // oxlint-disable-next-line react/preserve-manual-memoization
   const getEditorView = useCallback(() => editorView.current, [editorView]);
 
   // Use the extracted hooks
@@ -1096,7 +1097,8 @@ const SetupCellComponent = ({
       cellRuntime.staleInputs) &&
     !cellRuntime.interrupted;
 
-  // Callback to get the editor view.
+  // This getter is called during render, so useEvent cannot be used here.
+  // oxlint-disable-next-line react/preserve-manual-memoization
   const getEditorView = useCallback(() => editorView.current, [editorView]);
 
   const { isCellCodeShown, showHiddenCode } = useCellHiddenLogic({

package/src/components/editor/output/Outputs.css

@@ -72,6 +72,7 @@
   /* Coarse hack to stop children from overflowing; doesn't seem to affect
    * margin collapse. */
   overflow: auto;
+  overscroll-behavior: contain;
   @apply text-xs;
 
   .data-key-pair:not(:last-child) {

package/src/components/editor/package-alert.tsx

@@ -10,6 +10,7 @@ import {
   PackageCheckIcon,
   PackageXIcon,
   PlusIcon,
+  RotateCwIcon,
   XIcon,
 } from "lucide-react";
 import type React from "react";
@@ -32,6 +33,7 @@ import {
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import type { PackageInstallationStatus } from "@/core/kernel/messages";
 import { useRequestClient } from "@/core/network/requests";
+import { RESTART_REQUIRED_DESCRIPTION } from "@/core/packages/toast-components";
 import { isWasm } from "@/core/wasm/utils";
 import { usePackageMetadata } from "@/hooks/usePackageMetadata";
 import { Banner } from "@/plugins/impl/common/error-banner";
@@ -55,6 +57,12 @@ import {
 import { ExternalLink } from "../ui/links";
 import { NativeSelect } from "../ui/native-select";
 import { Tooltip } from "../ui/tooltip";
+import { useRestartKernel } from "./actions/useRestartKernel";
+
+const RestartKernelButton = () => {
+  const restartKernel = useRestartKernel();
+  return <Button onClick={restartKernel}>Restart Kernel</Button>;
+};
 
 function parsePackageSpecifier(spec: string): {
   name: string;
@@ -251,6 +259,10 @@ export const PackageAlert: React.FC = () => {
             )}
           >
             <p>{description}</p>
+            {status !== "installing" &&
+              Object.values(packageAlert.packages).includes(
+                "restart-required",
+              ) && <RestartKernelButton />}
             <ul className="list-disc ml-2 mt-1">
               {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
                 <li
@@ -290,7 +302,9 @@ function getInstallationStatusElements(packages: PackageInstallationStatus) {
       ? "installing"
       : statuses.has("failed")
         ? "failed"
-        : "installed";
+        : statuses.has("restart-required")
+          ? "restart-required"
+          : "installed";
 
   if (status === "installing") {
     return {
@@ -300,6 +314,14 @@ function getInstallationStatusElements(packages: PackageInstallationStatus) {
       description: "Installing packages:",
     };
   }
+  if (status === "restart-required") {
+    return {
+      status,
+      title: "Changes saved — restart required",
+      titleIcon: <RotateCwIcon className="w-5 h-5 inline-block mr-2" />,
+      description: RESTART_REQUIRED_DESCRIPTION,
+    };
+  }
   if (status === "installed") {
     return {
       status: "installed",
@@ -330,6 +352,8 @@ const ProgressIcon = ({
       return <CheckIcon size="1rem" />;
     case "failed":
       return <XIcon size="1rem" />;
+    case "restart-required":
+      return <RotateCwIcon size="1rem" />;
     default:
       logNever(status);
       return null;

package/src/components/home/components.tsx

@@ -31,6 +31,7 @@ import {
 import { Constants } from "@/core/constants";
 import { useRequestClient } from "@/core/network/requests";
 import type { TutorialId } from "@/core/network/types";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import { openNotebook } from "@/utils/links";
 import { Objects } from "@/utils/objects";
 import { MarimoPlusIcon } from "../icons/marimo-icons";
@@ -186,6 +187,22 @@ export const ResourceLinks: React.FC = () => {
   );
 };
 
+/**
+ * Shown when the workspace scan stopped early, so the file list the user is
+ * looking at is missing files and folders.
+ */
+export const TruncatedWorkspaceBanner: React.FC<{
+  fileCount: number | undefined;
+}> = ({ fileCount }) => {
+  return (
+    <Banner kind="warn" className="rounded p-4">
+      Showing {fileCount} files. Some files and folders were skipped because
+      your workspace is large or deeply nested. Start marimo from a subfolder to
+      see them.
+    </Banner>
+  );
+};
+
 export const Header: React.FC<{
   Icon: React.FC<React.SVGProps<SVGSVGElement>>;
   control?: React.ReactNode;

package/src/components/pages/gallery-page.tsx

@@ -4,6 +4,7 @@ import { SearchIcon } from "lucide-react";
 import type React from "react";
 import { Suspense, useMemo, useState } from "react";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
+import { TruncatedWorkspaceBanner } from "@/components/home/components";
 import { Spinner } from "@/components/icons/spinner";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -119,10 +120,7 @@ const GalleryPage: React.FC = () => {
         <ErrorBoundary>
           <div className="flex flex-col gap-2">
             {workspace.hasMore && (
-              <Banner kind="warn" className="rounded p-4">
-                Showing first {workspace.fileCount} files. Your workspace has
-                more files.
-              </Banner>
+              <TruncatedWorkspaceBanner fileCount={workspace.fileCount} />
             )}
             {formattedFiles.length > SEARCH_THRESHOLD && (
               <Input

package/src/components/pages/home-page.tsx

@@ -67,6 +67,7 @@ import {
   Header,
   OpenTutorialDropDown,
   ResourceLinks,
+  TruncatedWorkspaceBanner,
 } from "../home/components";
 import {
   expandedFoldersAtom,
@@ -196,10 +197,7 @@ const WorkspaceNotebooks: React.FC<{ onRefreshRecents: () => void }> = ({
     <WorkspaceContext value={workspaceContextValue}>
       <div className="flex flex-col gap-2">
         {workspace.hasMore && (
-          <Banner kind="warn" className="rounded p-4">
-            Showing first {workspace.fileCount} files. Your workspace has more
-            files.
-          </Banner>
+          <TruncatedWorkspaceBanner fileCount={workspace.fileCount} />
         )}
         <Header
           Icon={BookTextIcon}