@marimo-team/frontend 0.25.3-dev5 → 0.25.3-dev55

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

@@ -1,8 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { BotIcon } from "lucide-react";
-import { useState } from "react";
+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,
@@ -13,43 +20,86 @@ import {
   agentAttachmentsAtom,
   attachmentLabel,
 } from "@/core/attachments/state";
-import { pairPreviewAtom } from "@/core/config/pair";
+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 { Objects } from "@/utils/objects";
 import { FooterItem } from "../footer-item";
 
 export function AttachmentStatus() {
-  const pairPreview = useAtomValue(pairPreviewAtom);
+  const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
   const agents = useAtomValue(agentAttachmentsAtom);
-  if (!pairPreview) {
+  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 groups = Objects.groupBy(
-    agents,
-    (attachment) =>
-      attachment.identity
-        ? `identity:${attachment.identity}`
-        : `attachment:${attachment.id}`,
-    (attachment) => attachment,
-  );
-  return Object.entries(groups).map(([identity, attachments]) => (
-    <AttachmentStatusItem key={identity} attachments={attachments} />
-  ));
-}
+  const identities = new Set(agents.map((agent) => agent.identity ?? agent.id));
+  const label =
+    identities.size === 1
+      ? `${attachmentLabel(agents[0])} connected`
+      : `${identities.size} agents connected`;
 
-function AttachmentStatusItem({ attachments }: { attachments: Attachment[] }) {
-  const [open, setOpen] = useState(false);
-  const timeAgo = useTimeAgo();
-  const label = attachmentLabel(attachments[0]);
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        automatic.current = false;
+        stopTimer();
+        setOpen(nextOpen);
+      }}
+    >
       <PopoverTrigger asChild={true}>
         <FooterItem
           asChild={true}
-          tooltip={`${label}: connected`}
+          tooltip={label}
           selected={open}
           data-testid="footer-attachment-status"
-          aria-label={`${label}: Connected`}
+          aria-label={label}
         >
           <button type="button">
             <span className="flex items-center gap-1.5">
@@ -59,24 +109,129 @@ function AttachmentStatusItem({ attachments }: { attachments: Attachment[] }) {
           </button>
         </FooterItem>
       </PopoverTrigger>
-      <PopoverContent className="w-64 text-sm">
-        <h4 className="font-medium">{label}</h4>
-        <ul className="space-y-2">
-          {attachments.map((attachment) => (
-            <li key={attachment.id}>
-              <p
-                className="truncate text-xs text-muted-foreground"
-                title={attachment.id}
-              >
-                {attachment.id}
-              </p>
-              <p className="text-muted-foreground">
-                Connected {timeAgo(attachment.since)}
-              </p>
-            </li>
+      <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} />
           ))}
-        </ul>
+        </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/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/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>
+    </>
   );
 };
 

package/src/components/editor/dynamic-favicon.tsx

@@ -1,8 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { usePrevious } from "@dnd-kit/utilities";
+import { useAtomValue } from "jotai";
 import { useEffect } from "react";
-import { useCellErrors } from "@/core/cells/cells";
+import { cellErrorCount } from "@/core/cells/cells";
 import { useEventListener } from "@/hooks/useEventListener";
 import successFaviconUrl from "../../assets/circle-check.ico";
 import runningFaviconUrl from "../../assets/circle-play.ico";
@@ -15,13 +16,6 @@ const FAVICON_PATHS = {
   error: errorFaviconUrl,
 } as const;
 
-// Cache favicon object URLs lazily
-type FaviconKey = keyof typeof FAVICON_PATHS;
-
-async function getFaviconUrl(key: FaviconKey): Promise<string> {
-  return FAVICON_PATHS[key];
-}
-
 function getOrCreateFavicon(): HTMLLinkElement {
   const existingFavicon =
     document.querySelector<HTMLLinkElement>("link[rel~='icon']");
@@ -44,16 +38,16 @@ function maybeSendNotification(numErrors: number) {
     return;
   }
 
-  const sendNotification = async () => {
+  const sendNotification = () => {
     if (numErrors === 0) {
       new Notification("Execution completed", {
         body: "Your notebook run completed successfully.",
-        icon: await getFaviconUrl("success"),
+        icon: FAVICON_PATHS.success,
       });
     } else {
       new Notification("Execution failed", {
         body: `Your notebook run encountered ${numErrors} error(s).`,
-        icon: await getFaviconUrl("error"),
+        icon: FAVICON_PATHS.error,
       });
     }
   };
@@ -75,7 +69,7 @@ function maybeSendNotification(numErrors: number) {
 
 export const DynamicFavicon = (props: Props) => {
   const { isRunning } = props;
-  const errors = useCellErrors();
+  const numErrors = useAtomValue(cellErrorCount);
 
   useEffect(() => {
     const favicon = getOrCreateFavicon();
@@ -86,46 +80,33 @@ export const DynamicFavicon = (props: Props) => {
       return;
     }
 
-    const updateFavicon = async () => {
-      let key: FaviconKey;
-      // When notebook is running, display running favicon
-      if (isRunning) {
-        key = "running";
-      } else {
-        // When run is complete, display success or error favicon
-        key = errors.length === 0 ? "success" : "error";
-      }
-      favicon.href = await getFaviconUrl(key);
+    const key = isRunning ? "running" : numErrors === 0 ? "success" : "error";
+    favicon.href = FAVICON_PATHS[key];
 
-      // If notebook is in focus, reset favicon after 3 seconds
-      // If not in focus, the focus event listener handles it
-      if (!document.hasFocus()) {
-        return;
-      }
-
-      const timeoutId = setTimeout(async () => {
-        favicon.href = await getFaviconUrl("idle");
-      }, 3000);
-
-      return () => clearTimeout(timeoutId);
-    };
+    if (!document.hasFocus()) {
+      // The focus listener resets the favicon when the user returns.
+      return;
+    }
 
-    updateFavicon();
-  }, [isRunning, errors]);
+    const timeoutId = setTimeout(() => {
+      favicon.href = FAVICON_PATHS.idle;
+    }, 3000);
+    return () => clearTimeout(timeoutId);
+  }, [isRunning, numErrors]);
 
   // Send user notification when run has completed
   const prevRunning = usePrevious(isRunning) ?? isRunning;
   useEffect(() => {
     if (prevRunning && !isRunning) {
-      maybeSendNotification(errors.length);
+      maybeSendNotification(numErrors);
     }
-  }, [errors, prevRunning, isRunning]);
+  }, [numErrors, prevRunning, isRunning]);
 
   // When notebook comes back in focus, reset favicon
-  useEventListener(window, "focus", async (_) => {
+  useEventListener(window, "focus", () => {
     if (!isRunning) {
       const favicon = getOrCreateFavicon();
-      favicon.href = await getFaviconUrl("idle");
+      favicon.href = FAVICON_PATHS.idle;
     }
   });