@marimo-team/islands 0.24.3-dev9 → 0.25.0

package/src/components/editor/renderers/cell-array.tsx

@@ -43,10 +43,7 @@ import type { AppMode } from "../../../core/mode";
 import { useHotkey } from "../../../hooks/useHotkey";
 import { type Theme, useTheme } from "../../../theme/useTheme";
 import { AddCellWithAI } from "../ai/add-cell-with-ai";
-import {
-  ConnectingAlert,
-  NotStartedConnectionAlert,
-} from "../alerts/connecting-alert";
+import { NotStartedConnectionAlert } from "../alerts/connecting-alert";
 import { FloatingOutline } from "../chrome/panels/outline/floating-outline";
 import { useChromeActions } from "../chrome/state";
 import { Column } from "../columns/cell-column";
@@ -140,7 +137,6 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
       <PackageAlert />
       <StartupLogsAlert />
       <StdinBlockingAlert />
-      <ConnectingAlert />
       <NotebookBanner width={appConfig.width} />
       {/* Only show if not cells, otherwise running a single cell will start the connection */}
       {cellIds.idLength === 0 && <NotStartedConnectionAlert />}

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -217,7 +217,7 @@ interface BackwardsCompatCase {
    * properties need to be listed — extra properties are ignored.
    */
   expected: {
-    deck?: unknown;
+    deck: unknown;
     cellIds: string[];
     cellEntries?: Array<[string, unknown]>;
   };
@@ -355,9 +355,7 @@ describe("SlidesLayoutPlugin backwards compatibility", () => {
       // known field, the deserialized config won't carry it and the
       // assertion below fails.
       const layout = SlidesLayoutPlugin.deserializeLayout(parsed.data, cells);
-      if (expected.deck !== undefined) {
-        expect(layout.deck).toEqual(expected.deck);
-      }
+      expect(layout.deck).toEqual(expected.deck);
       for (const [cellEntryId, expectedConfig] of expected.cellEntries ?? []) {
         expect(layout.cells.get(cellId(cellEntryId))).toMatchObject(
           expectedConfig as object,
@@ -379,9 +377,7 @@ describe("SlidesLayoutPlugin backwards compatibility", () => {
           expectedConfig as object,
         );
       }
-      if (expected.deck !== undefined) {
-        expect(redeserialized.deck).toEqual(expected.deck);
-      }
+      expect(redeserialized.deck).toEqual(expected.deck);
     },
   );
 

package/src/components/slides/slide-form.tsx

@@ -427,6 +427,7 @@ export const SlideSidebar = ({
   const [isConfigOpen, setIsConfigOpen] = useAtom(slideConfigOpenAtom);
 
   return (
+    // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Prevent slide navigation while using controls in the sidebar.
     <aside
       className="h-full flex flex-col border-l border-border/60 bg-muted/20 transition-[width] duration-200 ease-out overflow-hidden"
       style={{

package/src/components/slides/slide-notes-editor.tsx

@@ -89,6 +89,7 @@ export const SlideNotesEditor = ({
   };
 
   return (
+    // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Prevent slide navigation while editing speaker notes.
     <section
       className={cn(
         "h-full min-h-0 flex flex-col bg-muted/40 dark:bg-muted/20 border-t",

package/src/components/tracing/tracing-spec.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { TopLevelSpec } from "vega-lite";
-import type { TimeUnit } from "vega-typings";
+import type { TimeUnit } from "vega-lite/types_unstable/timeunit.js";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRun } from "@/core/cells/runs";
 import type { ResolvedTheme } from "@/theme/useTheme";

package/src/components/ui/__tests__/badge.test.ts

@@ -54,10 +54,12 @@ describe("badgeVariants", () => {
           ].join(" "),
         ),
       );
-      if (variant !== "outline") {
-        expect(classes).toContain("forced-colors:hover:bg-[Highlight]");
-        expect(classes).toContain("forced-colors:hover:text-[HighlightText]");
-      }
+      expect(classes.includes("forced-colors:hover:bg-[Highlight]")).toBe(
+        variant !== "outline",
+      );
+      expect(classes.includes("forced-colors:hover:text-[HighlightText]")).toBe(
+        variant !== "outline",
+      );
     },
   );
 });

package/src/components/ui/use-toast.ts

@@ -161,6 +161,14 @@ function dispatch(action: Action) {
   });
 }
 
+export function clearToasts() {
+  for (const timeout of toastTimeouts.values()) {
+    clearTimeout(timeout);
+  }
+  toastTimeouts.clear();
+  dispatch({ type: "REMOVE_TOAST" });
+}
+
 type Toast = Omit<ToasterToast, "id">;
 
 function toast({

package/src/core/MarimoApp.tsx

@@ -12,7 +12,6 @@ import { getInitialAppMode } from "@/core/mode";
 import { CssVariables } from "@/theme/ThemeProvider";
 import { reactLazyWithPreload } from "@/utils/lazy";
 import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
-import { KernelStartupErrorModal } from "../components/editor/KernelStartupErrorModal";
 import { TracebackModalContainer } from "../components/editor/TracebackModalContainer";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
@@ -105,7 +104,6 @@ const Providers = memo(({ children }: PropsWithChildren) => {
                 {children}
                 <Toaster />
                 <TailwindIndicator />
-                <KernelStartupErrorModal />
                 <TracebackModalContainer />
               </ModalProvider>
             </LocaleProvider>

package/src/core/ai/context/providers/__tests__/error.test.ts

@@ -104,10 +104,10 @@ describe("ErrorContextProvider", () => {
       ]);
 
       const items = provider.getItems();
-      expect(items[1].data.type).toBe("cell-error");
-      if (items[1].data.type === "cell-error") {
-        expect(items[1].data.error.cellName).toBe("cell-0");
-      }
+      expect(items[1].data).toMatchObject({
+        type: "cell-error",
+        error: { cellName: "cell-0" },
+      });
       expect(items[1].name).toBe("Error: cell-0");
       expect(items[1].description).toBe("Invalid syntax");
     });
@@ -150,25 +150,19 @@ describe("ErrorContextProvider", () => {
       `);
 
       // Test the info function
-      expect(completion.info).toBeDefined();
-      if (typeof completion.info === "function") {
-        const infoResult = completion.info(completion);
-        if (
-          infoResult &&
-          typeof infoResult === "object" &&
-          "dom" in infoResult
-        ) {
-          const infoElement = infoResult.dom as HTMLElement;
-          expect(infoElement.tagName).toBe("DIV");
-          expect(infoElement.textContent).toContain("Errors");
-          expect(infoElement.textContent).toContain("2 errors");
-        } else if (infoResult && "tagName" in (infoResult as any)) {
-          const infoElement = infoResult as HTMLElement;
-          expect(infoElement.tagName).toBe("DIV");
-          expect(infoElement.textContent).toContain("Errors");
-          expect(infoElement.textContent).toContain("2 errors");
-        }
+      if (typeof completion.info !== "function") {
+        throw new Error("Expected completion info to be a function");
+      }
+      const infoResult = completion.info(completion);
+      if (!infoResult || typeof infoResult !== "object") {
+        throw new Error("Expected completion info to return an element");
       }
+      const infoElement = (
+        "dom" in infoResult ? infoResult.dom : infoResult
+      ) as HTMLElement;
+      expect(infoElement.tagName).toBe("DIV");
+      expect(infoElement.textContent).toContain("Errors");
+      expect(infoElement.textContent).toContain("2 errors");
     });
 
     it("should handle single error correctly", () => {

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: {},
+    },
+  ]);
+});

package/src/core/alerts/__tests__/state.test.tsx

@@ -0,0 +1,240 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it } from "vitest";
+import type { EnvironmentOperation } from "../environment";
+import { alertAtom, getPackageAlert, useAlertActions } from "../state";
+
+it.each(["install", "remove"] as const)(
+  "restores active %s progress without announcing old successes",
+  (action) => {
+    const store = createStore();
+    const { result } = renderHook(() => useAlertActions(), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+    const operation: EnvironmentOperation = {
+      operation_id: "package",
+      action,
+      source: "kernel",
+      status: { kind: "succeeded" },
+      packages: { numpy: "succeeded" },
+      logs: { numpy: "Done\n" },
+    };
+    const snapshot = (value: EnvironmentOperation) =>
+      result.current.setEnvironment({
+        source: value.source,
+        state: { restart_required: false, operations: [value] },
+      });
+    act(() => snapshot(operation));
+    expect(getPackageAlert(store.get(alertAtom))).toBeNull();
+    expect(store.get(alertAtom).environments.kernel.operations).toEqual([
+      operation,
+    ]);
+
+    const active: EnvironmentOperation = {
+      ...operation,
+      status: { kind: "running" },
+      packages: { numpy: "running" },
+      logs: { numpy: "Working\n" },
+    };
+    act(() => snapshot(active));
+    expect(getPackageAlert(store.get(alertAtom))).toEqual({
+      ...active,
+      id: active.operation_id,
+      kind: "environment",
+      restartRequired: false,
+    });
+
+    // Reconnecting can complete work that was already visible on this page.
+    act(() => snapshot(operation));
+    expect(getPackageAlert(store.get(alertAtom))).toEqual({
+      ...operation,
+      id: operation.operation_id,
+      kind: "environment",
+      restartRequired: false,
+    });
+    act(() => result.current.clearPackageAlert(operation.operation_id));
+    act(() => snapshot(operation));
+    expect(getPackageAlert(store.get(alertAtom))).toBeNull();
+
+    // A live result still gives feedback for a new package action.
+    act(() =>
+      result.current.updateEnvironment({
+        ...operation,
+        operation_id: "new",
+        log_mode: "replace",
+      }),
+    );
+    expect(getPackageAlert(store.get(alertAtom))?.id).toBe("new");
+
+    // Earlier changes can still require a restart after a later action succeeds.
+    act(() => result.current.clearPackageAlert("new"));
+    act(() =>
+      result.current.setEnvironment({
+        source: operation.source,
+        state: { restart_required: true, operations: [operation] },
+      }),
+    );
+    expect(getPackageAlert(store.get(alertAtom))).toEqual({
+      ...operation,
+      id: operation.operation_id,
+      kind: "environment",
+      restartRequired: true,
+    });
+  },
+);
+
+it.each(["prepare", "sync"] as const)(
+  "retains %s progress without turning it into a package alert",
+  (action) => {
+    const store = createStore();
+    const { result } = renderHook(() => useAlertActions(), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+    const operation: EnvironmentOperation = {
+      operation_id: "sandbox",
+      action,
+      source: "kernel",
+      status: { kind: "succeeded" },
+      packages: {},
+      logs: { environment: "Environment ready\n" },
+    };
+    const environment = { restart_required: false, operations: [operation] };
+
+    // A refreshed browser restores the result without announcing it again.
+    act(() =>
+      result.current.setEnvironment({ source: "kernel", state: environment }),
+    );
+    expect(getPackageAlert(store.get(alertAtom))).toBeNull();
+    expect(store.get(alertAtom).environments.kernel).toEqual(environment);
+
+    const install: EnvironmentOperation = {
+      ...operation,
+      operation_id: "install",
+      action: "install",
+      status: { kind: "running" },
+      packages: { numpy: "running" },
+      logs: { numpy: "Installing\n" },
+    };
+    act(() =>
+      result.current.updateEnvironment({ ...install, log_mode: "replace" }),
+    );
+    const packageAlert = getPackageAlert(store.get(alertAtom));
+    for (const status of [
+      { kind: "running" },
+      { kind: "failed", error: "Sync failed" },
+    ] as const) {
+      act(() =>
+        result.current.updateEnvironment({
+          ...operation,
+          status,
+          log_mode: "replace",
+        }),
+      );
+      expect(getPackageAlert(store.get(alertAtom))).toEqual(packageAlert);
+    }
+
+    act(() => result.current.clearPackageAlert(install.operation_id));
+    act(() =>
+      result.current.updateEnvironment({ ...operation, log_mode: "replace" }),
+    );
+    expect(getPackageAlert(store.get(alertAtom))).toBeNull();
+  },
+);
+
+it.each(["kernel", "server"] as const)(
+  "preserves the selected %s result across snapshots and follows new work",
+  (source) => {
+    const store = createStore();
+    const { result } = renderHook(() => useAlertActions(), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+    const selected: EnvironmentOperation = {
+      operation_id: "selected",
+      action: "install",
+      source,
+      status: { kind: "failed", error: "Network unavailable" },
+      packages: { numpy: "failed" },
+      logs: { numpy: "Selected logs\n" },
+    };
+    const other: EnvironmentOperation = {
+      ...selected,
+      operation_id: "other",
+      source: source === "kernel" ? "server" : "kernel",
+      status: { kind: "succeeded" },
+      packages: { numpy: "succeeded" },
+      logs: { numpy: "Other logs\n" },
+    };
+    const snapshot = (operation: EnvironmentOperation) =>
+      result.current.setEnvironment({
+        source: operation.source,
+        state: { restart_required: false, operations: [operation] },
+      });
+    act(() => snapshot(selected));
+    for (const operations of [
+      [selected, other],
+      [other, selected],
+    ]) {
+      act(() => operations.forEach(snapshot));
+      expect(getPackageAlert(store.get(alertAtom))).toEqual({
+        ...selected,
+        id: selected.operation_id,
+        kind: "environment",
+        restartRequired: false,
+      });
+    }
+
+    // Live work in the other environment should still take over the banner.
+    const active: EnvironmentOperation = {
+      ...other,
+      operation_id: "new-work",
+      status: { kind: "running" },
+      packages: { numpy: "running" },
+      logs: { numpy: "Installing\n" },
+    };
+    act(() =>
+      result.current.updateEnvironment({ ...active, log_mode: "replace" }),
+    );
+    act(() => snapshot(selected));
+    expect(getPackageAlert(store.get(alertAtom))?.id).toBe(active.operation_id);
+    act(() =>
+      result.current.updateEnvironment({
+        ...active,
+        status: { kind: "succeeded" },
+        packages: { numpy: "succeeded" },
+        logs: {},
+        log_mode: "append",
+      }),
+    );
+    act(() => snapshot(selected));
+    expect(getPackageAlert(store.get(alertAtom))).toEqual({
+      ...active,
+      id: active.operation_id,
+      kind: "environment",
+      restartRequired: false,
+      status: { kind: "succeeded" },
+      packages: { numpy: "succeeded" },
+    });
+
+    // Replacing that environment with an empty snapshot removes its selection.
+    act(() =>
+      result.current.setEnvironment({
+        source: active.source,
+        state: { restart_required: false, operations: [] },
+      }),
+    );
+    expect(getPackageAlert(store.get(alertAtom))?.id).toBe(
+      selected.operation_id,
+    );
+    act(() =>
+      result.current.updateEnvironment({
+        ...other,
+        operation_id: "latest-result",
+        log_mode: "replace",
+      }),
+    );
+    expect(getPackageAlert(store.get(alertAtom))?.id).toBe("latest-result");
+  },
+);

package/src/core/alerts/environment.ts

@@ -0,0 +1,57 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { NotificationMessageData, schemas } from "@/core/kernel/messages";
+
+export type EnvironmentState = schemas["EnvironmentState"];
+export type EnvironmentOperation = schemas["EnvironmentOperation"];
+export type EnvironmentSource = EnvironmentOperation["source"];
+
+export function emptyEnvironmentState(): EnvironmentState {
+  return { restart_required: false, operations: [] };
+}
+
+/** Apply a live delta after the connection's authoritative snapshot. */
+export function reduceEnvironmentState(
+  state: EnvironmentState,
+  update: NotificationMessageData<"environment-operation">,
+): EnvironmentState {
+  const previous = state.operations.find(
+    (operation) => operation.operation_id === update.operation_id,
+  );
+  const logs = { ...previous?.logs };
+  for (const [name, content] of Object.entries(update.logs)) {
+    logs[name] =
+      update.log_mode === "replace" ? content : (logs[name] ?? "") + content;
+  }
+
+  const operation: EnvironmentOperation = {
+    operation_id: update.operation_id,
+    action: update.action,
+    status: update.status,
+    packages: update.packages,
+    logs,
+    source: update.source,
+  };
+  const operations = state.operations.filter(
+    (item) =>
+      (previous && update.status.kind === "running") ||
+      item.status.kind === "running" ||
+      (item.action === "prepare" && update.action !== "prepare"),
+  );
+  const index = operations.findIndex(
+    (item) => item.operation_id === update.operation_id,
+  );
+  if (index === -1) {
+    operations.push(operation);
+  } else {
+    operations[index] = operation;
+  }
+
+  return {
+    restart_required:
+      state.restart_required ||
+      update.status.kind === "restart-required" ||
+      Object.values(update.packages).includes("restart-required"),
+    operations,
+  };
+}