@marimo-team/islands 0.24.3-dev4 → 0.24.3-dev41

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

@@ -7,6 +7,7 @@ import {
   HelpCircleIcon,
 } from "lucide-react";
 import React from "react";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
 import { useOpenSettingsToTab } from "@/components/app-config/state";
 import { Spinner } from "@/components/icons/spinner";
 import { SearchInput } from "@/components/ui/input";
@@ -20,25 +21,22 @@ import {
 } from "@/components/ui/table";
 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 { isConnectedAtom } from "@/core/network/connection";
 import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
+import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { stripPackageManagerPrefix } from "@/core/packages/package-input-utils";
-import {
-  showPackageRestartToast,
-  showRemovePackageToast,
-  showUpgradePackageToast,
-} from "@/core/packages/toast-components";
+import { usePackageAction } from "@/core/packages/usePackageAction";
+import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { isWasm } from "@/core/wasm/utils";
-import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { Events } from "@/utils/events";
+import { SandboxFooter, SandboxStartupPanel } from "./sandbox-panel";
 import { PanelEmptyState } from "./empty-state";
 import { PACKAGES_INPUT_ID, packagesToInstallAtom } from "./packages-utils";
 
@@ -71,36 +69,44 @@ const PackageActionButton: React.FC<{
 };
 
 const PackagesPanel: React.FC = () => {
-  const [config] = useResolvedMarimoConfig();
-  const packageManager = config.package_management.manager;
-  const { getDependencyTree, getPackageList } = useRequestClient();
+  const sandbox = useAtomValue(sandboxAtom);
+  const connected = useAtomValue(isConnectedAtom);
+  const notice = useAtomValue(connectionNoticeAtom);
+  const operation = useAtomValue(sandboxSyncAtom);
+  if (sandbox?.backend) {
+    return (
+      <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+        {notice && (!operation.pending || !connected) ? (
+          <SandboxStartupPanel />
+        ) : (
+          <PackageContents />
+        )}
+        <SandboxFooter />
+      </div>
+    );
+  }
+  if (notice) {
+    return (
+      <div className="p-4 text-sm text-muted-foreground">
+        <div className="flex items-center gap-2">
+          {notice.pending && <Spinner className="size-3" />}
+          {notice.title}
+        </div>
+        {notice.error && (
+          <pre className="mt-3 text-xs whitespace-pre-wrap break-words max-h-52 overflow-auto">
+            {notice.error}
+          </pre>
+        )}
+      </div>
+    );
+  }
+  return <PackageContents />;
+};
 
+const PackageContents: React.FC = () => {
+  const { pending: syncing } = useAtomValue(sandboxSyncAtom);
   const [userViewMode, setUserViewMode] = React.useState<ViewMode | null>(null);
-  const {
-    data: dependencies,
-    error,
-    refetch,
-    isPending,
-  } = useAsyncData(async () => {
-    // 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]);
+  const { data: dependencies, error, isPending } = usePackageDependencies();
 
   // Only show on the first load
   if (isPending) {
@@ -122,58 +128,49 @@ const PackagesPanel: React.FC = () => {
   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;
+  const scopeLabel = name && name !== "<root>" ? "project" : "environment";
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
-      <InstallPackageForm context={dependencies.context} onSuccess={refetch} />
-      {(isTreeSupported || isSandbox) && (
+      <fieldset disabled={syncing} className="contents">
+        <InstallPackageForm context={dependencies.context} />
+      </fieldset>
+      {isTreeSupported && !isSandbox && (
         <div className="flex items-center justify-between px-2 py-1 border-b">
-          {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 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 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={scopeTitle}
+              title={scopeLabel}
             >
               {scopeLabel}
             </div>
-            {name && !isSandbox && (
+            {name && (
               <span className="text-xs text-muted-foreground">
                 {name}
                 {version && ` v${version}`}
@@ -183,13 +180,12 @@ const PackagesPanel: React.FC = () => {
         </div>
       )}
       {viewMode === "list" ? (
-        <PackagesList packages={dependencies.list} onSuccess={refetch} />
+        <PackagesList packages={dependencies.list} />
       ) : (
         <DependencyTree
           tree={dependencies.tree}
           error={error}
           sandboxBackend={sandboxBackend}
-          onSuccess={refetch}
         />
       )}
     </div>
@@ -200,8 +196,7 @@ export default PackagesPanel;
 
 const InstallPackageForm: React.FC<{
   context: PackageInstallationContext;
-  onSuccess: () => void;
-}> = ({ onSuccess, context }) => {
+}> = ({ context }) => {
   const [input, setInput] = React.useState("");
   const { handleClick: openSettings } = useOpenSettingsToTab();
   const isSandbox = context.kind === "sandbox";
@@ -222,7 +217,6 @@ const InstallPackageForm: React.FC<{
 
   const { loading, handleInstallPackages } = useInstallPackages();
   const onSuccessInstallPackages = () => {
-    onSuccess();
     setInput("");
   };
 
@@ -363,9 +357,8 @@ const InstallPackageForm: React.FC<{
 };
 
 const PackagesList: React.FC<{
-  onSuccess: () => void;
   packages: { name: string; version: string }[];
-}> = ({ onSuccess, packages }) => {
+}> = ({ packages }) => {
   // Sort case-insensitively so packages are strictly alphabetical
   // regardless of capitalization (package managers sort inconsistently).
   const sortedPackages = React.useMemo(
@@ -410,8 +403,8 @@ const PackagesList: React.FC<{
             <TableCell>{item.name}</TableCell>
             <TableCell>{item.version}</TableCell>
             <TableCell className="flex justify-end">
-              <UpgradeButton packageName={item.name} onSuccess={onSuccess} />
-              <RemoveButton packageName={item.name} onSuccess={onSuccess} />
+              <UpgradeButton packageName={item.name} />
+              <RemoveButton packageName={item.name} />
             </TableCell>
           </TableRow>
         ))}
@@ -423,40 +416,14 @@ const PackagesList: React.FC<{
 const UpgradeButton: React.FC<{
   packageName: string;
   tags?: { kind: string; value: string }[];
-  onSuccess: () => void;
-}> = ({ packageName, tags, onSuccess }) => {
-  const [loading, setLoading] = React.useState(false);
-  const { addPackage } = useRequestClient();
-
-  // Hide upgrade button in WASM
+}> = ({ packageName, tags }) => {
+  const { loading, run } = usePackageAction("upgrade", packageName, tags);
   if (isWasm()) {
     return null;
   }
 
-  const handleUpgradePackage = async () => {
-    try {
-      setLoading(true);
-      const group = tags?.find((tag) => tag.kind === "group")?.value;
-      const response = await addPackage({
-        package: packageName,
-        upgrade: true,
-        group,
-      });
-      if (response.restartRequired) {
-        showPackageRestartToast();
-      } else if (response.success) {
-        onSuccess();
-        showUpgradePackageToast(packageName);
-      } else {
-        showUpgradePackageToast(packageName, response.error);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
   return (
-    <PackageActionButton onClick={handleUpgradePackage} loading={loading}>
+    <PackageActionButton onClick={run} loading={loading}>
       Upgrade
     </PackageActionButton>
   );
@@ -465,34 +432,14 @@ const UpgradeButton: React.FC<{
 const RemoveButton: React.FC<{
   packageName: string;
   tags?: { kind: string; value: string }[];
-  onSuccess: () => void;
-}> = ({ packageName, tags, onSuccess }) => {
-  const [loading, setLoading] = React.useState(false);
-  const { removePackage } = useRequestClient();
-
-  const handleRemovePackage = async () => {
-    try {
-      setLoading(true);
-      const group = tags?.find((tag) => tag.kind === "group")?.value;
-      const response = await removePackage({
-        package: packageName,
-        group,
-      });
-      if (response.restartRequired) {
-        showPackageRestartToast();
-      } else if (response.success) {
-        onSuccess();
-        showRemovePackageToast(packageName);
-      } else {
-        showRemovePackageToast(packageName, response.error);
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
+}> = ({ packageName, tags }) => {
+  const { loading, run } = usePackageAction("remove", packageName, tags);
+  if (packageName.toLowerCase() === "marimo") {
+    return null;
+  }
 
   return (
-    <PackageActionButton onClick={handleRemovePackage} loading={loading}>
+    <PackageActionButton onClick={run} loading={loading}>
       Remove
     </PackageActionButton>
   );
@@ -502,8 +449,7 @@ const DependencyTree: React.FC<{
   tree: DependencyTreeNode | null;
   error?: Error | null;
   sandboxBackend: "uv" | "pixi" | null;
-  onSuccess: () => void;
-}> = ({ tree, error, sandboxBackend, onSuccess }) => {
+}> = ({ tree, error, sandboxBackend }) => {
   const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
     new Set(),
   );
@@ -570,7 +516,6 @@ const DependencyTree: React.FC<{
               isTopLevel={true}
               expandedNodes={expandedNodes}
               onToggle={toggleNode}
-              onSuccess={onSuccess}
             />
           </div>
         ))}
@@ -586,16 +531,7 @@ const DependencyTreeNode: React.FC<{
   isTopLevel?: boolean;
   expandedNodes: Set<string>;
   onToggle: (nodeId: string) => void;
-  onSuccess: () => void;
-}> = ({
-  nodeId,
-  node,
-  level,
-  isTopLevel = false,
-  expandedNodes,
-  onToggle,
-  onSuccess,
-}) => {
+}> = ({ nodeId, node, level, isTopLevel = false, expandedNodes, onToggle }) => {
   const hasChildren = node.dependencies.length > 0;
   const isExpanded = expandedNodes.has(nodeId);
   const indent = isTopLevel ? 0 : 16 + level * 16; // Top-level uses CSS padding, children use calculated indent
@@ -709,17 +645,9 @@ const DependencyTreeNode: React.FC<{
         {/* Actions for top-level packages */}
         {isTopLevel && (
           <div className="flex gap-1 invisible group-hover:visible">
-            <UpgradeButton
-              packageName={node.name}
-              tags={node.tags}
-              onSuccess={onSuccess}
-            />
+            <UpgradeButton packageName={node.name} tags={node.tags} />
 
-            <RemoveButton
-              packageName={node.name}
-              tags={node.tags}
-              onSuccess={onSuccess}
-            />
+            <RemoveButton packageName={node.name} tags={node.tags} />
           </div>
         )}
       </div>
@@ -736,7 +664,6 @@ const DependencyTreeNode: React.FC<{
               isTopLevel={false}
               expandedNodes={expandedNodes}
               onToggle={onToggle}
-              onSuccess={onSuccess}
             />
           ))}
         </div>

package/src/components/editor/chrome/panels/sandbox-controller.tsx

@@ -0,0 +1,106 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { Suspense } from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useSandboxController } from "@/core/packages/useSandboxController";
+import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
+import { useTheme } from "@/theme/useTheme";
+import { Paths } from "@/utils/paths";
+import { SandboxErrorOutput } from "./sandbox-panel";
+
+export function SandboxController({
+  onReconnect,
+}: {
+  onReconnect: () => Promise<void>;
+}) {
+  const {
+    filename,
+    open,
+    setOpen,
+    draft,
+    setDraft,
+    dirty,
+    loading,
+    saving,
+    pending,
+    error,
+    diagnostic,
+    conflict,
+    loadManifest,
+    saveAndSync,
+  } = useSandboxController(onReconnect);
+  const { theme } = useTheme();
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="sm:max-w-xl grid-cols-1 max-h-[80vh] overflow-auto">
+        <DialogHeader>
+          <DialogTitle>Edit manifest</DialogTitle>
+          <DialogDescription className="font-mono text-xs">
+            {Paths.basename(filename ?? "Untitled notebook")} · script metadata
+          </DialogDescription>
+        </DialogHeader>
+        {draft !== null && !loading ? (
+          <Suspense fallback={<Spinner />}>
+            <LazyAnyLanguageCodeMirror
+              language="toml"
+              theme={theme}
+              value={draft}
+              onChange={setDraft}
+              editable={!pending}
+              height="260px"
+              basicSetup={{ lineNumbers: false, foldGutter: false }}
+              className="border rounded overflow-hidden"
+              aria-label="Notebook manifest"
+            />
+          </Suspense>
+        ) : (
+          !error && <Spinner />
+        )}
+        {diagnostic && <SandboxErrorOutput error={diagnostic} />}
+        {conflict && (
+          <Button variant="text" size="sm" onClick={loadManifest}>
+            Discard draft and reload manifest
+          </Button>
+        )}
+        <DialogFooter className="items-center sm:justify-between gap-3">
+          <span className="text-xs text-muted-foreground mr-auto">
+            {loading
+              ? "Loading…"
+              : dirty
+                ? "Unsaved changes"
+                : draft !== null
+                  ? "Saved"
+                  : ""}
+          </span>
+          <Button variant="text" size="sm" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+          <Button
+            size="sm"
+            disabled={draft === null || pending}
+            onClick={saveAndSync}
+          >
+            {pending && <Spinner className="size-3 mr-2" />}
+            {loading
+              ? "Loading…"
+              : saving
+                ? "Saving…"
+                : pending
+                  ? "Syncing…"
+                  : dirty
+                    ? "Save & sync"
+                    : "Sync"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,173 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtomValue } from "jotai";
+import {
+  AlertCircleIcon,
+  ChevronUpIcon,
+  FileCodeIcon,
+  RefreshCwIcon,
+} from "lucide-react";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
+import { Spinner } from "@/components/icons/spinner";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip } from "@/components/ui/tooltip";
+import { isConnectedAtom } from "@/core/network/connection";
+import {
+  sandboxActionsAtom,
+  sandboxAtom,
+  sandboxSyncAtom,
+} from "@/core/packages/sandbox-state";
+import { cn } from "@/utils/cn";
+
+export function SandboxErrorOutput({ error }: { error: string }) {
+  return (
+    <pre
+      tabIndex={0}
+      aria-label="Error details"
+      className="mt-3 p-3 rounded border bg-muted/30 text-xs text-muted-foreground whitespace-pre min-w-0 max-w-full max-h-52 overflow-auto"
+    >
+      {error}
+    </pre>
+  );
+}
+
+export function SandboxStartupPanel() {
+  const notice = useAtomValue(connectionNoticeAtom);
+  const sandbox = useAtomValue(sandboxAtom);
+  const actions = useAtomValue(sandboxActionsAtom);
+  if (!notice) {
+    return null;
+  }
+  return (
+    <div className="flex-1 min-h-0 overflow-auto p-4 text-sm">
+      <div
+        className={cn(
+          "flex items-center gap-2",
+          notice.pending
+            ? "text-muted-foreground"
+            : "font-medium text-(--red-11)",
+        )}
+      >
+        {notice.pending ? (
+          <Spinner className="size-4 shrink-0" aria-hidden={true} />
+        ) : (
+          <AlertCircleIcon className="size-4 shrink-0" aria-hidden={true} />
+        )}
+        <h2>{notice.title}</h2>
+      </div>
+      {!notice.pending && (
+        <>
+          <p className="mt-2 text-foreground">{notice.description}</p>
+          {notice.error && <SandboxErrorOutput error={notice.error} />}
+          <div className="flex items-center gap-2 mt-3">
+            <Button
+              variant="outline"
+              size="xs"
+              disabled={!actions || sandbox?.manifest == null}
+              onClick={() => actions?.editManifest()}
+            >
+              Edit manifest…
+            </Button>
+            <Button
+              variant="text"
+              size="xs"
+              disabled={!actions}
+              onClick={() => actions?.sync()}
+            >
+              Retry sync
+            </Button>
+          </div>
+          {sandbox?.manifest == null && (
+            <p className="mt-3 text-xs text-muted-foreground">
+              A manifest will be available once this new notebook starts.
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function SandboxFooter() {
+  const sandbox = useAtomValue(sandboxAtom);
+  const connected = useAtomValue(isConnectedAtom);
+  const actions = useAtomValue(sandboxActionsAtom);
+  const operation = useAtomValue(sandboxSyncAtom);
+  const notice = useAtomValue(connectionNoticeAtom);
+  if (!sandbox?.backend) {
+    return null;
+  }
+  const pending = operation.pending || notice?.pending;
+  const status = operation.pending
+    ? "Syncing sandbox…"
+    : (notice?.title ?? (connected ? "Sandbox ready" : "Sandbox not started"));
+  return (
+    <div className="border-t p-1.5 shrink-0">
+      <DropdownMenu>
+        <Tooltip content={status}>
+          <DropdownMenuTrigger asChild={true}>
+            <button
+              type="button"
+              className="flex items-center gap-2 w-full px-2 py-1.5 rounded text-xs text-muted-foreground hover:bg-accent data-[state=open]:bg-accent"
+              aria-label={`${sandbox.backend} sandbox actions`}
+            >
+              <span
+                role="status"
+                aria-label={status}
+                className={cn(
+                  "size-1.5 shrink-0 rounded-full",
+                  pending
+                    ? "bg-amber-500 motion-safe:animate-pulse"
+                    : notice
+                      ? "bg-(--red-9)"
+                      : connected
+                        ? "bg-emerald-500"
+                        : "bg-muted-foreground",
+                )}
+              />
+              <span>{sandbox.backend} sandbox</span>
+              <span className="ml-auto">
+                {pending
+                  ? operation.pending
+                    ? "Syncing…"
+                    : notice?.title
+                  : ""}
+              </span>
+              <ChevronUpIcon className="size-3" />
+            </button>
+          </DropdownMenuTrigger>
+        </Tooltip>
+        <DropdownMenuContent
+          side="top"
+          align="start"
+          className="w-52"
+          sideOffset={8}
+        >
+          <DropdownMenuItem
+            disabled={pending || !actions}
+            onSelect={() => {
+              void actions?.sync();
+            }}
+          >
+            <RefreshCwIcon className="size-3.5 mr-2" />
+            Sync
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!actions || sandbox.manifest === null}
+            onSelect={() => {
+              void actions?.editManifest();
+            }}
+          >
+            <FileCodeIcon className="size-3.5 mr-2" />
+            Edit manifest…
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}