@marimo-team/islands 0.25.3-dev141 → 0.25.3-dev142

package/src/components/editor/chrome/wrapper/__tests__/pending-ai-cells.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render, screen, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { stagedAICellsAtom, visibleForTesting } from "@/core/ai/staged-cells";
+import { scrollAndHighlightCell } from "../../../links/cell-link";
 import { PendingAICells } from "../pending-ai-cells";
 
 vi.mock("@/components/editor/cell/useDeleteCell", () => ({
@@ -29,6 +30,62 @@ vi.mock("@/components/editor/links/cell-link", () => ({
 }));
 
 describe("PendingAICells", () => {
+  it("navigates between pending cells through named controls", () => {
+    const store = createStore();
+    const first = cellId("first-pending-cell");
+    const second = cellId("second-pending-cell");
+    const third = cellId("third-pending-cell");
+    store.set(
+      stagedAICellsAtom,
+      new Map([
+        [first, { type: "add_cell" }],
+        [second, { type: "add_cell" }],
+        [third, { type: "add_cell" }],
+      ]),
+    );
+
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <PendingAICells />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    const next = screen.getByRole("button", { name: "Next pending AI cell" });
+    const previous = screen.getByRole("button", {
+      name: "Previous pending AI cell",
+    });
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+  });
+
   it("disables bulk actions while cells are still generating", () => {
     const store = createStore();
     const generationId = Symbol("staged-cell-generation");

package/src/components/editor/chrome/wrapper/footer-item.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type React from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
 import { forwardRef } from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
@@ -8,36 +9,43 @@ import { cn } from "@/utils/cn";
 type FooterItemProps = {
   selected: boolean;
   tooltip: React.ReactNode;
+  asChild?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const FooterItem: React.FC<FooterItemProps> = forwardRef<
   HTMLDivElement,
   FooterItemProps
->(({ children, tooltip, selected, className, ...rest }, ref) => {
-  const content = (
-    <div
-      ref={ref}
-      className={cn(
-        "h-full flex items-center p-2 text-sm shadow-inset font-mono cursor-pointer rounded",
-        !selected && "hover:bg-(--sage-3)",
-        selected && "bg-(--sage-4)",
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-
-  if (tooltip) {
-    return (
-      <Tooltip content={tooltip} side="top" delayDuration={200}>
-        {content}
-      </Tooltip>
+>(
+  (
+    { children, tooltip, selected, className, asChild = false, ...rest },
+    ref,
+  ) => {
+    const Component = asChild ? SlotPrimitive.Slot : "div";
+    const content = (
+      <Component
+        ref={ref}
+        className={cn(
+          "h-full flex items-center p-2 text-sm shadow-inset font-mono cursor-pointer rounded",
+          !selected && "hover:bg-(--sage-3)",
+          selected && "bg-(--sage-4)",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
     );
-  }
 
-  return content;
-});
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} side="top" delayDuration={200}>
+          {content}
+        </Tooltip>
+      );
+    }
+
+    return content;
+  },
+);
 
 FooterItem.displayName = "FooterItem";

package/src/components/editor/chrome/wrapper/footer-items/attachment-status.tsx

@@ -0,0 +1,237 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import {
+  BotIcon,
+  CheckIcon,
+  Loader2Icon,
+  UnplugIcon,
+  XIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  type Attachment,
+  agentAttachmentsAtom,
+  attachmentLabel,
+} from "@/core/attachments/state";
+import { agentToast } from "@/core/attachments/toast";
+import { pairConfigAtom } from "@/core/config/pair";
+import { stableSessionIdAtom } from "@/core/kernel/session";
+import { API } from "@/core/network/api";
+import { useTimeAgo } from "@/hooks/useFormatting";
+import { FooterItem } from "../footer-item";
+
+export function AttachmentStatus() {
+  const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
+  const agents = useAtomValue(agentAttachmentsAtom);
+  const [open, setOpen] = useState(false);
+  const previous = useRef(new Set<string>());
+  const automatic = useRef(false);
+  const pointerInside = useRef(false);
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const stopTimer = useCallback(() => clearTimeout(timeout.current), []);
+  const startTimer = useCallback(() => {
+    stopTimer();
+    timeout.current = setTimeout(() => setOpen(false), 3000);
+  }, [stopTimer]);
+  const preserveEditorFocus = (event: Event) => {
+    if (automatic.current) {
+      event.preventDefault();
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      pointerInside.current = false;
+    }
+    const current = new Set(
+      hostEnabled ? agents.map((agent) => agent.identity ?? agent.id) : [],
+    );
+    const connected = [...current].some((id) => !previous.current.has(id));
+    for (const id of current) {
+      previous.current.add(id);
+    }
+    if (current.size === 0) {
+      stopTimer();
+      setOpen(false);
+    } else if (connected) {
+      if (open && !automatic.current) {
+        return;
+      }
+      automatic.current = true;
+      setOpen(true);
+      if (!pointerInside.current) {
+        startTimer();
+      }
+    }
+  }, [agents, hostEnabled, open, startTimer, stopTimer]);
+
+  useEffect(() => stopTimer, [stopTimer]);
+
+  if (!hostEnabled || agents.length === 0) {
+    return null;
+  }
+  const identities = new Set(agents.map((agent) => agent.identity ?? agent.id));
+  const label =
+    identities.size === 1
+      ? `${attachmentLabel(agents[0])} connected`
+      : `${identities.size} agents connected`;
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        automatic.current = false;
+        stopTimer();
+        setOpen(nextOpen);
+      }}
+    >
+      <PopoverTrigger asChild={true}>
+        <FooterItem
+          asChild={true}
+          tooltip={label}
+          selected={open}
+          data-testid="footer-attachment-status"
+          aria-label={label}
+        >
+          <button type="button">
+            <span className="flex items-center gap-1.5">
+              <BotIcon className="w-4 h-4" />
+              <span className="max-w-48 truncate">{label}</span>
+            </span>
+          </button>
+        </FooterItem>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0 text-sm"
+        side="top"
+        align="start"
+        onOpenAutoFocus={preserveEditorFocus}
+        onCloseAutoFocus={preserveEditorFocus}
+        onPointerEnter={() => {
+          pointerInside.current = true;
+          stopTimer();
+        }}
+        onPointerLeave={() => {
+          pointerInside.current = false;
+          if (automatic.current) {
+            startTimer();
+          }
+        }}
+        onFocusCapture={() => {
+          automatic.current = false;
+          stopTimer();
+        }}
+      >
+        <h4 className="font-medium px-4 py-3 border-b">{label}</h4>
+        <div className="max-h-72 overflow-auto divide-y">
+          {agents.map((attachment) => (
+            <AttachmentStatusItem key={attachment.id} attachment={attachment} />
+          ))}
+        </div>
+        <p className="px-4 py-3 border-t text-xs text-muted-foreground">
+          Disconnect removes the notebook connection. The agent session keeps
+          running.
+        </p>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function AttachmentStatusItem({ attachment }: { attachment: Attachment }) {
+  const stableSessionId = useAtomValue(stableSessionIdAtom);
+  const [state, setState] = useState<"idle" | "confirming" | "disconnecting">(
+    "idle",
+  );
+  const confirming = state !== "idle";
+  const disconnecting = state === "disconnecting";
+  const disconnectButton = useRef<HTMLButtonElement>(null);
+  const timeAgo = useTimeAgo();
+  const label = attachmentLabel(attachment);
+  const disconnectLabel = disconnecting
+    ? `Disconnecting ${label}`
+    : confirming
+      ? `Confirm disconnect ${label}`
+      : `Disconnect ${label}`;
+
+  const disconnect = async () => {
+    if (disconnecting || !stableSessionId) {
+      return;
+    }
+    setState("disconnecting");
+    try {
+      await API.post(
+        `/pair/notebooks/${encodeURIComponent(stableSessionId)}/attachments/detach`,
+        { attachment_id: attachment.id },
+      );
+    } catch {
+      agentToast({ variant: "danger", title: `Could not disconnect ${label}` });
+    } finally {
+      setState("idle");
+    }
+  };
+
+  return (
+    <div className="flex items-start gap-3 px-4 py-3">
+      <div className="min-w-0 flex-1">
+        <h5 className="font-medium">{label}</h5>
+        <p className="text-xs text-muted-foreground mt-1">
+          Connected {timeAgo(attachment.since)}
+        </p>
+        <p
+          className="text-xs font-mono text-muted-foreground truncate mt-1"
+          title={attachment.id}
+        >
+          {attachment.id}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {confirming && (
+          <span className="text-xs text-muted-foreground">
+            {disconnecting ? "Disconnecting…" : "Disconnect?"}
+          </span>
+        )}
+        <Button
+          ref={disconnectButton}
+          size="icon"
+          variant="outlineDestructive"
+          disabled={disconnecting || !stableSessionId}
+          onClick={confirming ? disconnect : () => setState("confirming")}
+          aria-label={disconnectLabel}
+          title={disconnectLabel}
+          aria-busy={disconnecting}
+        >
+          {disconnecting ? (
+            <Loader2Icon className="size-3.5 animate-spin" aria-hidden={true} />
+          ) : confirming ? (
+            <CheckIcon className="size-3.5" aria-hidden={true} />
+          ) : (
+            <UnplugIcon className="size-3.5" aria-hidden={true} />
+          )}
+        </Button>
+        {confirming && (
+          <Button
+            size="icon"
+            variant="outline"
+            disabled={disconnecting}
+            onClick={() => {
+              setState("idle");
+              disconnectButton.current?.focus();
+            }}
+            aria-label={`Cancel disconnect ${label}`}
+            title={`Cancel disconnect ${label}`}
+          >
+            <XIcon className="size-3.5" aria-hidden={true} />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -26,13 +26,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { FooterItem } from "../footer-item";
 
-interface RuntimeSettingsProps {
-  className?: string;
-}
-
-export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
-  className,
-}) => {
+export const RuntimeSettings: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
   const [config, setUserConfig] = useResolvedMarimoConfig();
 

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -12,6 +12,7 @@ import { ShowInKioskMode } from "../../kiosk-mode";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
 import { FooterItem } from "./footer-item";
 import { AIStatusIcon } from "./footer-items/ai-status";
+import { AttachmentStatus } from "./footer-items/attachment-status";
 import {
   BackendConnectionStatus,
   connectionStatusAtom,
@@ -107,6 +108,7 @@ export const Footer: React.FC = () => {
 
       <div className="flex items-center shrink-0 min-w-0">
         <MachineStats />
+        <AttachmentStatus />
         <AIStatusIcon />
         <CopilotStatusIcon />
         <RTCStatus />

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -79,7 +79,12 @@ export const PendingAICells: React.FC = () => {
       <SparklesIcon className="h-4 w-4 text-primary" />
 
       <div className="flex items-center">
-        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
+        <Button
+          aria-label="Previous pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("down")}
+        >
           <ChevronUp className="h-3.5 w-3.5" />
         </Button>
         <span className="text-xs font-mono min-w-14 text-center">
@@ -87,7 +92,12 @@ export const PendingAICells: React.FC = () => {
             ? `${listStagedCells.length} pending`
             : `${currentIndex + 1} / ${listStagedCells.length}`}
         </span>
-        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
+        <Button
+          aria-label="Next pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("up")}
+        >
           <ChevronDown className="h-3.5 w-3.5" />
         </Button>
       </div>

package/src/components/editor/chrome/wrapper/storage.ts

@@ -15,7 +15,7 @@ let storedValue: string | null = null;
  */
 export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
   return {
-    getItem(name) {
+    getItem(_name) {
       if (!storedValue) {
         return storedValue ?? null;
       }

package/src/components/editor/connections/components.tsx

@@ -48,7 +48,7 @@ export const SelectorButton: React.FC<{
 }> = ({ name, color, icon, onSelect }) => (
   <button
     type="button"
-    className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
+    className="py-3 flex flex-col items-center justify-center gap-1 transition-[scale,filter,box-shadow] hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
     style={{ backgroundColor: color }}
     onClick={onSelect}
   >

package/src/components/editor/controls/__tests__/command-palette.test.tsx

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { useNotebookActions } from "../../actions/useNotebookActions";
+import CommandPalette from "../command-palette";
+
+vi.mock("../../actions/useNotebookActions", () => ({
+  useNotebookActions: vi.fn(),
+}));
+vi.mock("../../actions/useCellActionButton", () => ({
+  useCellActionButtons: () => [],
+}));
+vi.mock("../../actions/useConfigActions", () => ({
+  useConfigActions: () => [],
+}));
+
+it("builds current actions only while open and keeps the opening shortcut active", async () => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  const firstAction = vi.fn();
+  const nextAction = vi.fn();
+  vi.mocked(useNotebookActions).mockReturnValue([
+    { label: "First action", handle: firstAction },
+  ]);
+  render(
+    <Provider store={createStore()}>
+      <CommandPalette />
+    </Provider>,
+  );
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  fireEvent.click(screen.getByText("First action"));
+  await waitFor(() => expect(firstAction).toHaveBeenCalledOnce());
+  await waitFor(() =>
+    expect(screen.queryByPlaceholderText("Type to search...")).toBeNull(),
+  );
+
+  vi.mocked(useNotebookActions)
+    .mockClear()
+    .mockReturnValue([{ label: "Updated action", handle: nextAction }]);
+  fireEvent.keyDown(document, { key: "x" });
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  expect(screen.queryByText("First action")).toBeNull();
+  fireEvent.click(screen.getByText("Updated action"));
+  await waitFor(() => expect(nextAction).toHaveBeenCalledOnce());
+  expect(firstAction).toHaveBeenCalledOnce();
+});

package/src/components/editor/controls/__tests__/keyboard-shortcuts.test.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { getDefaultHotkey } from "@/core/hotkeys/hotkeys";
+import {
+  KeyboardShortcuts,
+  keyboardShortcutsAtom,
+} from "../keyboard-shortcuts";
+
+const saveUserConfig = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ saveUserConfig }),
+}));
+
+describe("shortcut recorder keyboard navigation", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("allows Tab navigation and Reset without saving a shortcut", async () => {
+    const store = createStore();
+    const config = defaultUserConfig();
+    store.set(userConfigAtom, {
+      ...config,
+      keymap: { ...config.keymap, overrides: { "cell.run": "Ctrl-9" } },
+    });
+    store.set(keyboardShortcutsAtom, true);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <KeyboardShortcuts />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const edit = screen.getByRole("button", {
+      name: `Edit shortcut: ${getDefaultHotkey("cell.run").name}`,
+    });
+    act(() => edit.focus());
+    fireEvent.click(edit, { detail: 0 });
+    const recorder = screen.getByPlaceholderText(
+      getDefaultHotkey("cell.run").name,
+    );
+    expect(recorder).toHaveFocus();
+    expect(fireEvent.keyDown(recorder, { key: "Tab" })).toBe(true);
+    expect(fireEvent.keyDown(recorder, { key: "Tab", shiftKey: true })).toBe(
+      true,
+    );
+    expect(recorder).toBeInTheDocument();
+    expect(saveUserConfig).not.toHaveBeenCalled();
+    const reset = screen.getByRole("button", { name: /^Reset to default:/ });
+    act(() => reset.focus());
+    expect(reset).toHaveFocus();
+    await act(async () => fireEvent.click(reset, { detail: 0 }));
+    expect(saveUserConfig).toHaveBeenCalledExactlyOnceWith({
+      config: { keymap: { ...config.keymap, overrides: {} } },
+    });
+  });
+});

package/src/components/editor/controls/command-palette.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   CommandDialog,
   CommandEmpty,
@@ -32,6 +32,25 @@ import { commandPaletteAtom } from "./state";
 
 const CommandPalette = () => {
   const [open, setOpen] = useAtom(commandPaletteAtom);
+  const hotkeys = useAtomValue(hotkeysAtom);
+
+  useEventListener(document, "keydown", (e) => {
+    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
+      e.preventDefault();
+      setOpen((open) => !open);
+    }
+  });
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandPaletteContent />
+    </CommandDialog>
+  );
+};
+
+// The dialog mounts these subscriptions only while its content is present.
+const CommandPaletteContent = () => {
+  const setOpen = useSetAtom(commandPaletteAtom);
   const registeredActions = useRegisteredActions();
   const lastFocusedCell = useAtomValue(lastFocusedCellAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
@@ -55,13 +74,6 @@ const CommandPalette = () => {
   const { recentCommands, addRecentCommand } = useRecentCommands();
   const recentCommandsSet = new Set(recentCommands);
 
-  useEventListener(document, "keydown", (e) => {
-    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
-      e.preventDefault();
-      setOpen((open) => !open);
-    }
-  });
-
   const renderShortcutCommandItem = (
     shortcut: HotkeyAction,
     props: {
@@ -142,7 +154,7 @@ const CommandPalette = () => {
   };
 
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
+    <>
       <CommandInput placeholder="Type to search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
@@ -211,7 +223,7 @@ const CommandPalette = () => {
           })}
         </CommandGroup>
       </CommandList>
-    </CommandDialog>
+    </>
   );
 };