@marimo-team/frontend 0.24.3-dev1 → 0.24.3-dev10

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/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}

package/src/components/terminal/terminal.tsx

@@ -254,7 +254,9 @@ const TerminalComponent: React.FC<TerminalComponentProps> = ({
       try {
         await waitForConnectionOpen();
 
-        const socket = new WebSocket(runtimeManager.getTerminalWsURL());
+        // Size the PTY before the shell draws its first prompt.
+        fitAddon.fit();
+        const socket = new WebSocket(runtimeManager.getTerminalWsURL(terminal));
         const attachAddon = new AttachAddon(socket);
         terminal.loadAddon(attachAddon);
         wsRef.current = socket;
@@ -270,9 +272,7 @@ const TerminalComponent: React.FC<TerminalComponentProps> = ({
 
         const handleOpen = () => {
           updateReadyState();
-          // Send initial dimensions: the mount-time fit() may have fired
-          // before the WS was OPEN, dropping the resize message and leaving
-          // the PTY at its default 0x0 winsize.
+          // The container may have resized while the connection was opening.
           fitAddon.fit();
           if (terminal.cols > 0 && terminal.rows > 0) {
             socket.send(

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

@@ -19,6 +19,13 @@ import {
 } from "../parse";
 import { createMockIslandElement, createMockIslands } from "./test-utils.tsx";
 
+function islandSnapshotPath(filename: string): string {
+  return new URL(
+    `../../../../../tests/_islands/snapshots/${filename}`,
+    import.meta.url,
+  ).pathname.replace(/^\/@fs/, "");
+}
+
 function createPayloadCell(
   overrides: Partial<{
     cellId: string;
@@ -47,6 +54,7 @@ function appendPayload(
   payload: {
     schemaVersion: number;
     appId: string;
+    dependencies?: unknown;
     cells: ReturnType<typeof createPayloadCell>[];
   },
 ) {
@@ -58,6 +66,33 @@ function appendPayload(
 }
 
 describe("createMarimoFile", () => {
+  it("should serialize dependencies as top-level script metadata", () => {
+    const file = createMarimoFile({
+      dependencies: ['cowsay==6.1; sys_platform == "emscripten"'],
+      cells: [{ code: "import cowsay" }],
+    });
+    expect(file).toBe(
+      [
+        "# /// script",
+        '# dependencies = ["cowsay==6.1; sys_platform == \\"emscripten\\""]',
+        "# ///",
+        "import marimo",
+        "app = marimo.App()",
+        "@app.cell",
+        "def __():",
+        "    import cowsay",
+        "    return",
+      ].join("\n"),
+    );
+  });
+
+  it("should omit metadata for empty dependencies", () => {
+    const cells = [{ code: "import cowsay" }];
+    expect(createMarimoFile({ cells, dependencies: [] })).toBe(
+      createMarimoFile({ cells }),
+    );
+  });
+
   it("should return a string", () => {
     const app = {
       cells: [
@@ -736,13 +771,7 @@ describe("parseMarimoIslandApps", () => {
   });
 
   it("should parse Python-generated island payload snapshots", () => {
-    const html = readFileSync(
-      new URL(
-        "../../../../../tests/_islands/snapshots/html-payload.txt",
-        import.meta.url,
-      ).pathname.replace(/^\/@fs/, ""),
-      "utf8",
-    );
+    const html = readFileSync(islandSnapshotPath("html-payload.txt"), "utf8");
     container.innerHTML = html;
 
     const result = parseMarimoIslandApps(container);
@@ -775,6 +804,108 @@ describe("parseMarimoIslandApps", () => {
     expect(islands[2].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("1");
   });
 
+  it("should restore metadata from a Python-generated dependency payload", () => {
+    container.innerHTML = readFileSync(
+      islandSnapshotPath("body-dependencies.txt"),
+      "utf8",
+    );
+
+    const probed = parseMarimoIslandApps(container, { materialize: false });
+    const apps = parseMarimoIslandApps(container);
+
+    expect(probed).toEqual(apps);
+    expect(apps).toEqual([
+      {
+        id: "main",
+        payloadBacked: true,
+        dependencies: [
+          'cowsay==6.1; sys_platform == "emscripten"',
+          "rich[jupyter]>=13",
+          "desktop; sys_platform != 'emscripten'",
+          "older-python; python_version < '3.13'",
+          "newer-python; python_version >= '3.13'",
+        ],
+        cells: [{ cellId: "Hbol", code: "import cowsay", output: "", idx: 0 }],
+      },
+    ]);
+    // The Python Pyodide test reads this file with the real metadata parser.
+    expect(createMarimoFile(apps[0])).toBe(
+      readFileSync(islandSnapshotPath("notebook-dependencies.txt"), "utf8"),
+    );
+  });
+
+  it("should carry dependencies from payloads into each generated notebook", () => {
+    for (const [appId, dependencies] of [
+      ["app1", ["cowsay==6.1"]],
+      ["app2", ["rich[jupyter]>=13"]],
+    ] as const) {
+      container.appendChild(
+        createMockIslandElement({ appId, cellId: "cell-1" }),
+      );
+      appendPayload(container, {
+        schemaVersion: 1,
+        appId,
+        dependencies,
+        cells: [createPayloadCell()],
+      });
+    }
+
+    const apps = parseMarimoIslandApps(container);
+    expect(apps.map((app) => [app.id, app.dependencies])).toEqual([
+      ["app1", ["cowsay==6.1"]],
+      ["app2", ["rich[jupyter]>=13"]],
+    ]);
+    expect(createMarimoFile(apps[0])).toContain(
+      '# /// script\n# dependencies = ["cowsay==6.1"]\n# ///\n',
+    );
+  });
+
+  it.each([null, "cowsay", [123], ["cowsay", null]])(
+    "should ignore payloads with malformed dependencies: %j",
+    (dependencies) => {
+      const island = createMockIslandElement({
+        appId: "app1",
+        cellId: "cell-1",
+        code: "import cowsay",
+        innerHTML: "<div>dom</div>",
+      });
+      island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+      container.appendChild(island);
+      appendPayload(container, {
+        schemaVersion: 1,
+        appId: "app1",
+        dependencies,
+        cells: [createPayloadCell()],
+      });
+
+      expect(parseMarimoIslandApps(container)).toEqual([
+        {
+          id: "app1",
+          cells: [{ code: "import cowsay", output: "<div>dom</div>", idx: 0 }],
+        },
+      ]);
+    },
+  );
+
+  it("should merge dependencies from payloads belonging to the same app", () => {
+    for (const [cellId, dependencies] of [
+      ["cell-1", ["cowsay"]],
+      ["cell-2", ["cowsay", "rich"]],
+    ] as const) {
+      container.appendChild(createMockIslandElement({ appId: "app1", cellId }));
+      appendPayload(container, {
+        schemaVersion: 1,
+        appId: "app1",
+        dependencies,
+        cells: [createPayloadCell({ cellId })],
+      });
+    }
+
+    expect(
+      parseMarimoIslandApps(container).map((app) => app.dependencies),
+    ).toEqual([["cowsay", "rich"]]);
+  });
+
   it("should fall back to DOM islands for unsupported payload versions", () => {
     const island = createMockIslandElement({
       appId: "app1",
@@ -990,6 +1121,7 @@ describe("parseMarimoIslandApps", () => {
           outputHtml: "<div>payload only</div>",
         }),
       ],
+      dependencies: ["cowsay"],
     });
 
     const result = parseMarimoIslandApps(container);
@@ -1076,6 +1208,7 @@ describe("parseMarimoIslandApps", () => {
           reactive: false,
         }),
       ],
+      dependencies: ["cowsay"],
     });
 
     const result = parseMarimoIslandApps(container);