@marimo-team/frontend 0.24.3-dev2 → 0.24.3-dev4

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/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/core/packages/__tests__/useInstallPackage.test.tsx

@@ -1,10 +1,22 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { act, renderHook } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useInstallPackages } from "../useInstallPackage";
+import { Toast, ToastProvider, ToastViewport } from "@/components/ui/toast";
 
 const toast = vi.fn();
 const addPackage = vi.fn();
+const restartKernel = vi.fn();
+
+vi.mock("@/components/editor/actions/useRestartKernel", () => ({
+  useRestartKernel: () => restartKernel,
+}));
 
 vi.mock("@/components/ui/use-toast", () => ({
   toast: (...args: unknown[]) => toast(...args),
@@ -20,6 +32,7 @@ describe("useInstallPackages", () => {
   beforeEach(() => {
     toast.mockClear();
     addPackage.mockClear();
+    restartKernel.mockClear();
   });
 
   it("batches all packages into a single install call", async () => {
@@ -109,6 +122,39 @@ describe("useInstallPackages", () => {
     );
   });
 
+  it("reports saved changes requiring restart without claiming installation", async () => {
+    addPackage.mockResolvedValue({
+      success: false,
+      error: null,
+      restartRequired: true,
+    });
+    const { result } = renderHook(() => useInstallPackages());
+    await act(async () => {
+      await result.current.handleInstallPackages(["boltons", "six"]);
+    });
+    expect(toast).toHaveBeenCalledTimes(1);
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Changes saved — restart required",
+        description: expect.stringContaining(
+          "Restarting clears in-memory variables",
+        ),
+        duration: Infinity,
+        action: expect.anything(),
+      }),
+    );
+    expect(toast.mock.calls[0][0].variant).not.toBe("danger");
+    render(
+      <ToastProvider>
+        <Toast>{toast.mock.calls[0][0].action}</Toast>
+        <ToastViewport />
+      </ToastProvider>,
+    );
+    expect(restartKernel).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Restart Kernel" }));
+    expect(restartKernel).toHaveBeenCalledTimes(1);
+  });
+
   it("calls onSuccess after a successful install", async () => {
     addPackage.mockResolvedValue({ success: true, error: null });
     const onSuccess = vi.fn();

package/src/core/packages/toast-components.tsx

@@ -1,8 +1,34 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useRestartKernel } from "@/components/editor/actions/useRestartKernel";
 import { Kbd } from "@/components/ui/kbd";
+import { ToastAction } from "@/components/ui/toast";
 import { toast } from "@/components/ui/use-toast";
 
+export const RESTART_REQUIRED_DESCRIPTION =
+  "Your dependency changes are saved. Restart the kernel to use the updated environment. Restarting clears in-memory variables.";
+
+const RestartKernelAction = () => {
+  const restartKernel = useRestartKernel();
+  return (
+    <ToastAction
+      altText="Restart the kernel to use the updated dependencies"
+      onClick={restartKernel}
+    >
+      Restart Kernel
+    </ToastAction>
+  );
+};
+
+export const showPackageRestartToast = () => {
+  toast({
+    title: "Changes saved — restart required",
+    description: RESTART_REQUIRED_DESCRIPTION,
+    duration: Infinity,
+    action: <RestartKernelAction />,
+  });
+};
+
 export const showAddPackageToast = (
   packageName: string | string[],
   error?: string | null,

package/src/core/packages/useInstallPackage.ts

@@ -3,7 +3,10 @@
 import { useState } from "react";
 import { Logger } from "@/utils/Logger";
 import { useRequestClient } from "../network/requests";
-import { showAddPackageToast } from "./toast-components";
+import {
+  showAddPackageToast,
+  showPackageRestartToast,
+} from "./toast-components";
 
 export function useInstallPackages(): {
   handleInstallPackages: (
@@ -30,7 +33,9 @@ export function useInstallPackages(): {
       // response only carries an aggregate success/error. Report a single
       // toast covering all requested packages rather than implying a
       // per-package outcome we don't actually have.
-      if (response.success) {
+      if (response.restartRequired) {
+        showPackageRestartToast();
+      } else if (response.success) {
         showAddPackageToast(packages);
       } else {
         showAddPackageToast(packages, response.error);

package/src/core/wasm/bridge.ts

@@ -649,6 +649,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
         tags: [],
         version: null,
       },
+      context: { kind: "package-manager", name: "micropip" },
     };
   };