@marimo-team/islands 0.25.2-dev0 → 0.25.2-dev100

package/src/components/editor/header/__tests__/status.test.tsx

@@ -10,7 +10,7 @@ import { viewStateAtom } from "@/core/mode";
 import {
   type ConnectionStatus,
   WebSocketClosedReason,
-  WebSocketState,
+  ConnectionState,
 } from "@/core/websocket/types";
 import { StatusOverlay } from "../status";
 
@@ -40,7 +40,7 @@ describe("StatusOverlay disconnect indicator", () => {
     const onReconnect = vi.fn();
     const { getByTestId } = renderOverlay(
       {
-        state: WebSocketState.CLOSED,
+        state: ConnectionState.CLOSED,
         code: WebSocketClosedReason.KERNEL_DISCONNECTED,
         reason: "kernel not found",
       },
@@ -57,7 +57,7 @@ describe("StatusOverlay disconnect indicator", () => {
 
   it("renders a disabled button when no onReconnect is provided", () => {
     const { getByTestId } = renderOverlay({
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_DISCONNECTED,
       reason: "kernel not found",
     });
@@ -68,7 +68,7 @@ describe("StatusOverlay disconnect indicator", () => {
 
   it("leaves editor startup failures to the inline notice", () => {
     const { queryByTestId } = renderOverlay({
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
       reason: "Failed to start kernel sandbox",
     });

package/src/components/editor/header/app-header.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import React, { type PropsWithChildren } from "react";
-import { type ConnectionStatus, WebSocketState } from "@/core/websocket/types";
+import { type ConnectionStatus, ConnectionState } from "@/core/websocket/types";
 import { Disconnected } from "../Disconnected";
 
 interface Props {
@@ -17,7 +17,7 @@ export const AppHeader: React.FC<PropsWithChildren<Props>> = ({
   return (
     <div className={className}>
       {children}
-      {connection.state === WebSocketState.CLOSED && (
+      {connection.state === ConnectionState.CLOSED && (
         <Disconnected reason={connection.reason} />
       )}
     </div>

package/src/components/editor/header/status.tsx

@@ -10,7 +10,7 @@ import { viewStateAtom } from "@/core/mode";
 import {
   type ConnectionStatus,
   WebSocketClosedReason,
-  WebSocketState,
+  ConnectionState,
 } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 
@@ -21,10 +21,10 @@ export const StatusOverlay: React.FC<{
 }> = ({ connection, isRunning, onReconnect }) => {
   const { mode } = useAtomValue(viewStateAtom);
   const isClosed =
-    connection.state === WebSocketState.CLOSED &&
+    connection.state === ConnectionState.CLOSED &&
     (mode === "read" ||
       connection.code !== WebSocketClosedReason.KERNEL_STARTUP_ERROR);
-  const isOpen = connection.state === WebSocketState.OPEN;
+  const isOpen = connection.state === ConnectionState.OPEN;
   // Editor startup failures have their own recovery UI.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -703,7 +703,7 @@ describe("useCellNavigationProps", () => {
       });
 
       expect(mockCopyCell).not.toHaveBeenCalled();
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
   });
 
@@ -714,7 +714,7 @@ describe("useCellNavigationProps", () => {
       );
 
       const mockEvent = Mocks.keyboardEvent({
-        key: "x",
+        key: "F24",
         target: document.createElement("div"),
       });
 
@@ -722,7 +722,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
   });
 
@@ -1749,7 +1749,7 @@ describe("useCellEditorNavigationProps", () => {
       });
 
       expect(focusCell).toHaveBeenCalledWith(mockCellId);
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
 
     it("should clear text selection when Escape is pressed with selection", () => {
@@ -1901,7 +1901,7 @@ describe("useCellEditorNavigationProps", () => {
       });
 
       expect(focusCell).not.toHaveBeenCalled();
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
   });
 
@@ -1932,7 +1932,7 @@ describe("useCellEditorNavigationProps", () => {
         });
 
         expect(focusCell).toHaveBeenCalledWith(mockCellId);
-        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
       });
     });
 
@@ -1954,7 +1954,7 @@ describe("useCellEditorNavigationProps", () => {
         });
 
         expect(focusCell).toHaveBeenCalledWith(mockCellId);
-        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
       });
     });
 
@@ -1979,7 +1979,7 @@ describe("useCellEditorNavigationProps", () => {
         });
 
         expect(focusCell).toHaveBeenCalledWith(mockCellId);
-        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
       });
     });
   });

package/src/components/tracing/tracing.test.tsx

@@ -5,36 +5,36 @@ import { formatChartTime } from "./utils";
 describe("formatChartTime", () => {
   beforeAll(() => {
     // Mock Date to always use UTC
-    vi.spyOn(global.Date.prototype, "getFullYear").mockImplementation(
-      function (this: Date) {
-        return this.getUTCFullYear();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getMonth").mockImplementation(
-      function (this: Date) {
-        return this.getUTCMonth();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getDate").mockImplementation(
-      function (this: Date) {
-        return this.getUTCDate();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getHours").mockImplementation(
-      function (this: Date) {
-        return this.getUTCHours();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getMinutes").mockImplementation(
-      function (this: Date) {
-        return this.getUTCMinutes();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getSeconds").mockImplementation(
-      function (this: Date) {
-        return this.getUTCSeconds();
-      },
-    );
+    vi.spyOn(global.Date.prototype, "getFullYear").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCFullYear();
+    });
+    vi.spyOn(global.Date.prototype, "getMonth").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCMonth();
+    });
+    vi.spyOn(global.Date.prototype, "getDate").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCDate();
+    });
+    vi.spyOn(global.Date.prototype, "getHours").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCHours();
+    });
+    vi.spyOn(global.Date.prototype, "getMinutes").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCMinutes();
+    });
+    vi.spyOn(global.Date.prototype, "getSeconds").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCSeconds();
+    });
     vi.spyOn(global.Date.prototype, "getMilliseconds").mockImplementation(
       function (this: Date) {
         return this.getUTCMilliseconds();

package/src/components/ui/__tests__/slider.test.tsx

@@ -0,0 +1,37 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { Slider } from "../slider";
+
+SetupMocks.resizeObserver();
+
+describe("Slider", () => {
+  // Regression for #2593: steps below 1e-6 stringify in exponent notation
+  // ("1e-7"), which older radix versions counted as 0 decimal places, so
+  // every value was rounded to an integer and the slider never moved.
+  it.each([1e-6, 1e-7, 1e-9])("moves by a tiny step of %s", (step) => {
+    const onValueChange = vi.fn();
+    const { getByRole } = render(
+      <Slider
+        value={[step]}
+        min={step}
+        max={100 * step}
+        step={step}
+        onValueChange={onValueChange}
+        valueMap={(v) => v}
+      />,
+    );
+
+    fireEvent.keyDown(getByRole("slider"), { key: "ArrowRight" });
+
+    expect(onValueChange).toHaveBeenCalledWith([2 * step]);
+  });
+
+  it("forwards a direct accessible name to the thumb", () => {
+    const { getByRole } = render(
+      <Slider aria-label="Opacity" value={[50]} valueMap={(v) => v} />,
+    );
+    expect(getByRole("slider")).toHaveAccessibleName("Opacity");
+  });
+});

package/src/components/ui/progress-stages.tsx

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { AlertCircleIcon, CheckIcon, CircleIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { cn } from "@/utils/cn";
+
+export type ProgressState = "waiting" | "running" | "succeeded" | "failed";
+
+export interface ProgressStage {
+  id: string;
+  state: ProgressState;
+  title: string;
+  description: string;
+  details?: ReactNode;
+}
+
+export function ProgressStatusIcon({
+  state,
+  variant = "icon",
+}: {
+  state: ProgressState;
+  variant?: "icon" | "dot";
+}) {
+  if (variant === "dot") {
+    return (
+      <span
+        aria-hidden={true}
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          {
+            waiting: "bg-muted-foreground",
+            running: "bg-muted-foreground motion-safe:animate-pulse",
+            succeeded: "bg-(--grass-9)",
+            failed: "bg-(--red-9)",
+          }[state],
+        )}
+      />
+    );
+  }
+  const Icon = {
+    waiting: CircleIcon,
+    running: Spinner,
+    succeeded: CheckIcon,
+    failed: AlertCircleIcon,
+  }[state];
+  return (
+    <Icon
+      aria-hidden={true}
+      className={cn(
+        "size-4 shrink-0",
+        {
+          waiting: "text-muted-foreground/50",
+          running: "motion-reduce:animate-none",
+          succeeded: "text-(--grass-11)",
+          failed: "text-(--red-11)",
+        }[state],
+      )}
+    />
+  );
+}
+
+export function ProgressStages({
+  stages,
+  label,
+  className,
+}: {
+  stages: readonly ProgressStage[];
+  label: string;
+  className?: string;
+}) {
+  return (
+    <ol aria-label={label} className={cn("space-y-6", className)}>
+      {stages.map((stage, index) => (
+        <li
+          key={stage.id}
+          aria-current={
+            stage.state === "running" || stage.state === "failed"
+              ? "step"
+              : undefined
+          }
+          className="relative flex items-start gap-3"
+        >
+          {index < stages.length - 1 && (
+            <span
+              aria-hidden={true}
+              className="absolute left-2 top-4.5 -bottom-6.5 border-l border-border"
+            />
+          )}
+          <span className="mt-0.5 text-muted-foreground">
+            <ProgressStatusIcon state={stage.state} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <div
+              className={cn(
+                "text-sm",
+                stage.state === "failed"
+                  ? "text-(--red-11)"
+                  : stage.state === "waiting"
+                    ? "text-muted-foreground"
+                    : "text-foreground",
+              )}
+            >
+              {stage.title}
+            </div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              {stage.description}
+            </p>
+            {stage.details}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/ui/slider.tsx

@@ -57,6 +57,8 @@ const Slider = React.forwardRef<
         <TooltipRoot delayDuration={0} open={open}>
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
+              aria-label={props["aria-label"]}
+              aria-labelledby={props["aria-labelledby"]}
               data-testid="thumb"
               className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
               onFocus={openActions.setTrue}

package/src/core/ai/__tests__/state.test.ts

@@ -0,0 +1,120 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createStore } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "@/components/ui/use-toast";
+import { type Chat, type ChatId, chatStateAtom } from "../state";
+
+vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
+
+const KEY = "marimo:ai:chatState:v5";
+const chatId = "saved-chat" as ChatId;
+const chat: Chat = {
+  id: chatId,
+  title: "Saved conversation",
+  messages: [
+    { id: "message", role: "user", parts: [{ type: "text", text: "Hello" }] },
+  ],
+  createdAt: 1,
+  updatedAt: 1,
+};
+
+const unsubscribers: (() => void)[] = [];
+
+function loadStore() {
+  const store = createStore();
+  unsubscribers.push(store.sub(chatStateAtom, vi.fn()));
+  return store;
+}
+
+function fillStorage() {
+  vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+    throw new DOMException("Storage is full", "QuotaExceededError");
+  });
+}
+
+describe("chat history storage", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      KEY,
+      JSON.stringify({
+        chats: [[chatId, chat]],
+        activeChatId: chatId,
+      }),
+    );
+  });
+
+  afterEach(() => {
+    for (const unsubscribe of unsubscribers.splice(0)) {
+      unsubscribe();
+    }
+    vi.restoreAllMocks();
+  });
+
+  it("loads saved history when storage is full", () => {
+    fillStorage();
+    expect(loadStore().get(chatStateAtom)).toEqual({
+      chats: new Map([[chatId, chat]]),
+      activeChatId: chatId,
+    });
+  });
+
+  it("warns on save failure without interrupting in-memory updates", () => {
+    const store = loadStore();
+    const savedHistory = window.localStorage.getItem(KEY);
+    fillStorage();
+    const updatedChat = { ...chat, title: "Unsaved conversation" };
+    expect(() =>
+      store.set(chatStateAtom, {
+        chats: new Map([[chatId, updatedChat]]),
+        activeChatId: chatId,
+      }),
+    ).not.toThrow();
+
+    expect(store.get(chatStateAtom).chats.get(chatId)).toEqual(updatedChat);
+    expect(window.localStorage.getItem(KEY)).toBe(savedHistory);
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "chat-storage-error",
+        once: true,
+        title: "Chat history couldn't be saved",
+      }),
+    );
+  });
+
+  it("frees storage when history is cleared even if further writes fail", () => {
+    window.localStorage.setItem("unrelated-setting", "keep");
+    const store = loadStore();
+    fillStorage();
+    store.set(chatStateAtom, { chats: new Map(), activeChatId: null });
+
+    expect(window.localStorage.getItem(KEY)).toBeNull();
+    expect(window.localStorage.getItem("unrelated-setting")).toBe("keep");
+    expect(loadStore().get(chatStateAtom)).toEqual({
+      chats: new Map(),
+      activeChatId: null,
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("removes saved history when only an empty chat remains and writes fail", () => {
+    const store = loadStore();
+    const emptyChat = { ...chat, messages: [] };
+    const state = {
+      chats: new Map([[chatId, emptyChat]]),
+      activeChatId: chatId,
+    };
+    fillStorage();
+
+    store.set(chatStateAtom, state);
+
+    expect(window.localStorage.getItem(KEY)).toBeNull();
+    expect(store.get(chatStateAtom)).toEqual(state);
+    expect(loadStore().get(chatStateAtom)).toEqual({
+      chats: new Map(),
+      activeChatId: null,
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+});

package/src/core/ai/state.ts

@@ -4,7 +4,9 @@ import type { UIMessage } from "@ai-sdk/react";
 import type { FileUIPart } from "ai";
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { toast } from "@/components/ui/use-toast";
 import { uniqueBy } from "@/utils/arrays";
+import { Logger } from "@/utils/Logger";
 import { adaptForLocalStorage, jotaiJsonStorage } from "@/utils/storage/jotai";
 import type { TypedString } from "@/utils/typed";
 import type { CellId } from "../cells/ids";
@@ -85,22 +87,46 @@ function removeEmptyChats(chatState: Map<ChatId, Chat>): Map<ChatId, Chat> {
   return result;
 }
 
+const chatStorage = adaptForLocalStorage({
+  toSerializable: (value: ChatState) => ({
+    chats: [...removeEmptyChats(value.chats).entries()],
+    activeChatId: value.activeChatId,
+  }),
+  fromSerializable: (value) => ({
+    chats: new Map(value.chats),
+    activeChatId: value.activeChatId,
+  }),
+});
+
 export const chatStateAtom = atomWithStorage<ChatState>(
   KEY,
   {
     chats: new Map(),
     activeChatId: null,
   },
-  adaptForLocalStorage({
-    toSerializable: (value: ChatState) => ({
-      chats: [...removeEmptyChats(value.chats).entries()],
-      activeChatId: value.activeChatId,
-    }),
-    fromSerializable: (value) => ({
-      chats: new Map(value.chats),
-      activeChatId: value.activeChatId,
-    }),
-  }),
+  {
+    ...chatStorage,
+    setItem: (key, value) => {
+      try {
+        // Removing the key frees space even when no further writes can fit.
+        if (removeEmptyChats(value.chats).size === 0) {
+          chatStorage.removeItem(key);
+        } else {
+          chatStorage.setItem(key, value);
+        }
+      } catch (error) {
+        Logger.warn("Could not save chat history", error);
+        toast({
+          id: "chat-storage-error",
+          once: true,
+          title: "Chat history couldn't be saved",
+          description:
+            "Try deleting old chats. New messages may be lost when you reload.",
+          variant: "danger",
+        });
+      }
+    },
+  },
 );
 
 export const activeChatAtom = atom(