@marimo-team/islands 0.24.3-dev82 → 0.24.3-dev83

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

@@ -14,7 +14,7 @@ import {
   XIcon,
 } from "lucide-react";
 import type React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 import {
@@ -25,19 +25,20 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import {
-  isInstallingPackageAlert,
+  type EnvironmentOperationAlert,
+  isEnvironmentOperationAlert,
   isMissingPackageAlert,
   useAlertActions,
   useAlerts,
 } from "@/core/alerts/state";
 import { useResolvedMarimoConfig } from "@/core/config/config";
-import type { PackageInstallationStatus } from "@/core/kernel/messages";
+import type { PackageOperationStatus } 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";
-import { logNever } from "@/utils/assertNever";
+import { assertNever, logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import {
@@ -100,7 +101,7 @@ const SourceBadge: React.FC<{ source?: "kernel" | "server" }> = ({
 };
 
 export const PackageAlert: React.FC = () => {
-  const { packageAlert, packageLogs } = useAlerts();
+  const { packageAlert } = useAlerts();
   const { clearPackageAlert } = useAlertActions();
   const [userConfig] = useResolvedMarimoConfig();
   const [desiredPackageVersions, setDesiredPackageVersions] = useState<
@@ -110,6 +111,23 @@ export const PackageAlert: React.FC = () => {
     Record<string, string[]>
   >({});
 
+  const completedAlertId =
+    packageAlert?.kind === "environment" &&
+    packageAlert.status.kind === "succeeded" &&
+    !packageAlert.restartRequired
+      ? packageAlert.id
+      : null;
+  useEffect(() => {
+    if (completedAlertId === null) {
+      return;
+    }
+    const timeout = setTimeout(
+      () => clearPackageAlert(completedAlertId),
+      10_000,
+    );
+    return () => clearTimeout(timeout);
+  }, [completedAlertId, clearPackageAlert]);
+
   if (packageAlert === null) {
     return null;
   }
@@ -224,12 +242,9 @@ export const PackageAlert: React.FC = () => {
     );
   }
 
-  if (isInstallingPackageAlert(packageAlert)) {
+  if (isEnvironmentOperationAlert(packageAlert)) {
     const { status, title, titleIcon, description } =
-      getInstallationStatusElements(packageAlert.packages);
-    if (status === "installed") {
-      setTimeout(() => clearPackageAlert(packageAlert.id), 10_000);
-    }
+      getOperationStatusElements(packageAlert);
 
     return (
       <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
@@ -255,23 +270,27 @@ export const PackageAlert: React.FC = () => {
           <div
             className={cn(
               "flex flex-col gap-4 justify-between items-start text-muted-foreground text-base",
-              status === "installed" && "text-accent-foreground",
+              status === "succeeded" && "text-accent-foreground",
             )}
           >
             <p>{description}</p>
-            {status !== "installing" &&
-              Object.values(packageAlert.packages).includes(
-                "restart-required",
-              ) && <RestartKernelButton />}
+            {status !== "running" && packageAlert.restartRequired && (
+              <>
+                {status !== "restart-required" && (
+                  <p>{RESTART_REQUIRED_DESCRIPTION}</p>
+                )}
+                <RestartKernelButton />
+              </>
+            )}
             <ul className="list-disc ml-2 mt-1">
               {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
                 <li
                   className={cn(
                     "flex items-center gap-1 font-mono text-sm",
-                    st === "installing" && "font-semibold",
+                    st === "running" && "font-semibold",
                     st === "failed" && "text-destructive",
-                    st === "installed" && "text-accent-foreground",
-                    st === "installed" &&
+                    st === "succeeded" && "text-accent-foreground",
+                    st === "succeeded" &&
                       status === "failed" &&
                       "text-muted-foreground",
                   )}
@@ -282,8 +301,11 @@ export const PackageAlert: React.FC = () => {
                 </li>
               ))}
             </ul>
-            {Object.keys(packageLogs).length > 0 && (
-              <StreamingLogsViewer packageLogs={packageLogs} />
+            {Object.keys(packageAlert.logs).length > 0 && (
+              <StreamingLogsViewer
+                key={packageAlert.id}
+                packageLogs={packageAlert.logs}
+              />
             )}
           </div>
         </Banner>
@@ -295,60 +317,84 @@ export const PackageAlert: React.FC = () => {
   return null;
 };
 
-function getInstallationStatusElements(packages: PackageInstallationStatus) {
-  const statuses = new Set(Object.values(packages));
-  const status =
-    statuses.has("queued") || statuses.has("installing")
-      ? "installing"
-      : statuses.has("failed")
-        ? "failed"
-        : statuses.has("restart-required")
-          ? "restart-required"
-          : "installed";
-
-  if (status === "installing") {
-    return {
-      status: "installing",
-      title: "Installing packages",
-      titleIcon: <DownloadCloudIcon className="w-5 h-5 inline-block mr-2" />,
-      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",
-      title: "All packages installed!",
-      titleIcon: <PackageCheckIcon className="w-5 h-5 inline-block mr-2" />,
-      description: "Installed packages:",
-    };
+function getOperationStatusElements({
+  action,
+  status: outcome,
+  restartRequired,
+}: EnvironmentOperationAlert) {
+  const status: EnvironmentOperationAlert["status"] =
+    outcome.kind === "succeeded" && restartRequired
+      ? { kind: "restart-required", reason: RESTART_REQUIRED_DESCRIPTION }
+      : outcome;
+  const titles = {
+    install: {
+      running: "Installing packages",
+      succeeded: "All packages installed!",
+      failed: "Some packages failed to install",
+      cancelled: "Package installation cancelled",
+    },
+    remove: {
+      running: "Removing packages",
+      succeeded: "Packages removed",
+      failed: "Some packages failed to remove",
+      cancelled: "Package removal cancelled",
+    },
+  }[action];
+  switch (status.kind) {
+    case "running":
+      return {
+        status: "running",
+        title: titles.running,
+        titleIcon: <DownloadCloudIcon className="w-5 h-5 inline-block mr-2" />,
+        description:
+          action === "install" ? "Installing packages:" : "Removing packages:",
+      };
+    case "restart-required":
+      return {
+        status: "restart-required",
+        title: "Changes saved — restart required",
+        titleIcon: <RotateCwIcon className="w-5 h-5 inline-block mr-2" />,
+        description: status.reason,
+      };
+    case "succeeded":
+      return {
+        status: "succeeded",
+        title: titles.succeeded,
+        titleIcon: <PackageCheckIcon className="w-5 h-5 inline-block mr-2" />,
+        description:
+          action === "install" ? "Installed packages:" : "Removed packages:",
+      };
+    case "failed":
+      return {
+        status: "failed",
+        title: titles.failed,
+        titleIcon: <PackageXIcon className="w-5 h-5 inline-block mr-2" />,
+        description: status.error,
+      };
+    case "cancelled":
+      return {
+        status: "cancelled",
+        title: titles.cancelled,
+        titleIcon: <XIcon className="w-5 h-5 inline-block mr-2" />,
+        description:
+          "The operation was interrupted. Some packages may have changed.",
+      };
+    default:
+      return assertNever(status);
   }
-  return {
-    status: "failed",
-    title: "Some packages failed to install",
-    titleIcon: <PackageXIcon className="w-5 h-5 inline-block mr-2" />,
-    description: "See error logs.",
-  };
 }
 
 const ProgressIcon = ({
   status,
 }: {
-  status: PackageInstallationStatus[string];
+  status: PackageOperationStatus[string];
 }) => {
   switch (status) {
     case "queued":
       return <BoxIcon size="1rem" />;
-    case "installing":
+    case "running":
       return <DownloadCloudIcon size="1rem" />;
-    case "installed":
+    case "succeeded":
       return <CheckIcon size="1rem" />;
     case "failed":
       return <XIcon size="1rem" />;
@@ -672,7 +718,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
   }
 
   return (
-    <div className="mt-4 border-t border-border pt-4 w-full">
+    <div className="mt-4 border-t border-border pt-4 w-full contain-inline-size">
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
@@ -683,7 +729,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
         ) : (
           <ChevronRightIcon className="w-4 h-4" />
         )}
-        Installation logs
+        Logs
       </button>
 
       {isExpanded && (
@@ -694,7 +740,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
                 {packageName}
               </h4>
               <div className="border border-border rounded w-full">
-                <pre className="p-3 text-xs font-mono bg-background max-h-64 overflow-y-auto text-muted-foreground whitespace-pre-wrap scrollbar-thin">
+                <pre className="p-3 text-xs font-mono bg-background max-h-64 overflow-auto text-muted-foreground whitespace-pre scrollbar-thin">
                   {logs || "No logs available"}
                 </pre>
               </div>

package/src/core/alerts/__tests__/environment.test.ts

@@ -0,0 +1,183 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { NotificationMessageData } from "@/core/kernel/messages";
+import { emptyEnvironmentState, reduceEnvironmentState } from "../environment";
+
+function progress(
+  operation_id: string,
+  update: Partial<NotificationMessageData<"environment-operation">> = {},
+): NotificationMessageData<"environment-operation"> {
+  return {
+    operation_id,
+    action: "install",
+    source: "kernel",
+    status: { kind: "running" },
+    packages: { numpy: "running" },
+    logs: { numpy: "Downloading\n" },
+    log_mode: "append",
+    ...update,
+  };
+}
+
+describe("environment progress", () => {
+  it("continues snapshot logs without mutating or duplicating them", () => {
+    const snapshot = reduceEnvironmentState(
+      emptyEnvironmentState(),
+      progress("one"),
+    );
+    const result = reduceEnvironmentState(
+      snapshot,
+      progress("one", {
+        status: { kind: "succeeded" },
+        packages: { numpy: "succeeded" },
+        logs: { numpy: "Installed\n" },
+        log_mode: "append",
+      }),
+    );
+    expect(result).toEqual({
+      restart_required: false,
+      operations: [
+        {
+          operation_id: "one",
+          action: "install",
+          source: "kernel",
+          status: { kind: "succeeded" },
+          packages: { numpy: "succeeded" },
+          logs: { numpy: "Downloading\nInstalled\n" },
+        },
+      ],
+    });
+    expect(snapshot.operations[0].logs).toEqual({ numpy: "Downloading\n" });
+  });
+
+  it("isolates overlapping operations and starts retries with fresh logs", () => {
+    let state = reduceEnvironmentState(
+      emptyEnvironmentState(),
+      progress("one"),
+    );
+    state = reduceEnvironmentState(
+      state,
+      progress("two", { logs: { numpy: "Other\n" } }),
+    );
+    state = reduceEnvironmentState(
+      state,
+      progress("one", {
+        status: { kind: "failed", error: "Network unavailable" },
+        logs: {},
+      }),
+    );
+    expect(state.operations.map((op) => [op.operation_id, op.logs])).toEqual([
+      ["one", { numpy: "Downloading\n" }],
+      ["two", { numpy: "Other\n" }],
+    ]);
+    state = reduceEnvironmentState(state, progress("retry", { logs: {} }));
+    expect(state.operations.map((op) => [op.operation_id, op.logs])).toEqual([
+      ["two", { numpy: "Other\n" }],
+      ["retry", {}],
+    ]);
+  });
+
+  it("replaces named logs independently of the package map", () => {
+    const state = reduceEnvironmentState(
+      emptyEnvironmentState(),
+      progress("one", {
+        packages: { numpy: "succeeded", pandas: "running" },
+        logs: { numpy: "Old\n", pandas: "Old\n" },
+      }),
+    );
+    const result = reduceEnvironmentState(
+      state,
+      progress("one", {
+        log_mode: "replace",
+        logs: { numpy: "", pandas: "Ignored\n" },
+      }),
+    );
+    expect(result.operations[0].logs).toEqual({
+      numpy: "",
+      pandas: "Ignored\n",
+    });
+  });
+
+  it("keeps a restart requirement after a later operation succeeds", () => {
+    let state = reduceEnvironmentState(
+      emptyEnvironmentState(),
+      progress("one", {
+        status: { kind: "restart-required", reason: "Python changed" },
+      }),
+    );
+    state = reduceEnvironmentState(
+      state,
+      progress("two", {
+        status: { kind: "succeeded" },
+        packages: { numpy: "succeeded" },
+        logs: {},
+      }),
+    );
+    expect(state).toEqual({
+      restart_required: true,
+      operations: [
+        {
+          operation_id: "two",
+          action: "install",
+          source: "kernel",
+          status: { kind: "succeeded" },
+          packages: { numpy: "succeeded" },
+          logs: {},
+        },
+      ],
+    });
+  });
+});
+
+it("retains preparation through later package changes and replaces it on a new attempt", () => {
+  const preparation = progress("prepare", {
+    action: "prepare",
+    status: { kind: "succeeded" },
+    packages: {},
+    logs: { environment: "Prepared environment\n" },
+  });
+  let state = reduceEnvironmentState(emptyEnvironmentState(), preparation);
+  const retained = state.operations[0];
+  for (const action of ["install", "sync", "remove"] as const) {
+    state = reduceEnvironmentState(state, progress(action, { action }));
+    state = reduceEnvironmentState(
+      state,
+      progress(action, {
+        action,
+        status: { kind: "succeeded" },
+        packages: { numpy: "succeeded" },
+        logs: {},
+      }),
+    );
+    expect(state.operations).toEqual([
+      retained,
+      {
+        operation_id: action,
+        action,
+        source: "kernel",
+        status: { kind: "succeeded" },
+        packages: { numpy: "succeeded" },
+        logs: { numpy: "Downloading\n" },
+      },
+    ]);
+  }
+  state = reduceEnvironmentState(
+    state,
+    progress("prepare-again", {
+      action: "prepare",
+      packages: {},
+      logs: {},
+    }),
+  );
+  expect(state.operations).toEqual([
+    {
+      operation_id: "prepare-again",
+      action: "prepare",
+      source: "kernel",
+      status: { kind: "running" },
+      packages: {},
+      logs: {},
+    },
+  ]);
+});