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

package/src/components/editor/chrome/panels/outline/__tests__/outline-keyboard.test.tsx

@@ -0,0 +1,84 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { OutlineItem } from "@/core/cells/outline";
+import { MiniMap, OutlineList } from "../floating-outline";
+import { scrollToOutlineItem } from "../useActiveOutline";
+
+vi.mock("../useActiveOutline", () => ({ scrollToOutlineItem: vi.fn() }));
+
+const items: OutlineItem[] = [
+  { name: "First", level: 1, by: { id: "first" } },
+  { name: "Second", html: "<em>Second</em>", level: 2, by: { id: "second" } },
+];
+
+describe("outline keyboard navigation", () => {
+  it.each([
+    { Component: MiniMap, role: "button" },
+    { Component: OutlineList, role: "link" },
+  ])(
+    "keeps the focused $role when other headings change",
+    ({ Component, role }) => {
+      const duplicate: OutlineItem = {
+        name: "Repeated second",
+        level: 2,
+        by: { id: "second" },
+      };
+      const initial = [...items, duplicate];
+      const props = {
+        activeHeaderId: undefined,
+        activeOccurrences: undefined,
+      };
+      const { rerender } = render(<Component {...props} items={initial} />);
+      const focused = screen.getByRole(role, { name: "Repeated second" });
+      focused.focus();
+
+      for (const by of [{ id: "inserted" }, { path: "second" }]) {
+        const inserted: OutlineItem = { name: "Inserted", level: 1, by };
+        rerender(<Component {...props} items={[inserted, ...initial]} />);
+        expect(screen.getByRole(role, { name: "Repeated second" })).toBe(
+          focused,
+        );
+        expect(focused).toHaveFocus();
+      }
+
+      rerender(
+        <Component {...props} items={[items[1], duplicate, items[0]]} />,
+      );
+      expect(screen.getByRole(role, { name: "Repeated second" })).toBe(focused);
+      expect(focused).toHaveFocus();
+      fireEvent.click(focused);
+      expect(scrollToOutlineItem).toHaveBeenLastCalledWith(duplicate, 1);
+    },
+  );
+
+  it("activates plain and rich headings with Enter", () => {
+    render(
+      <OutlineList
+        items={items}
+        activeHeaderId={undefined}
+        activeOccurrences={undefined}
+      />,
+    );
+    items.forEach((item) => {
+      const link = screen.getByRole("link", { name: item.name });
+      expect(link).toHaveAttribute("tabindex", "0");
+      fireEvent.keyDown(link, { key: "Enter" });
+      expect(scrollToOutlineItem).toHaveBeenLastCalledWith(item, 0);
+    });
+  });
+
+  it("names each minimap button", () => {
+    render(
+      <MiniMap
+        items={items}
+        activeHeaderId={undefined}
+        activeOccurrences={undefined}
+      />,
+    );
+    const button = screen.getByRole("button", { name: "Second" });
+    fireEvent.click(button);
+    expect(scrollToOutlineItem).toHaveBeenLastCalledWith(items[1], 0);
+  });
+});

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -17,6 +17,8 @@ export const FloatingOutline: React.FC = () => {
     findOutlineElements(items),
   );
   const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const isVisible = isHovered || isFocused;
 
   // Hide if < 2 items
   // It's kinda useless to have an outline with only one item
@@ -29,6 +31,12 @@ export const FloatingOutline: React.FC = () => {
     <div
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          setIsFocused(false);
+        }
+      }}
       className={cn(
         "fixed top-[25vh] right-8 z-10000 print:hidden",
         // Hide on small screens
@@ -36,9 +44,10 @@ export const FloatingOutline: React.FC = () => {
       )}
     >
       <OutlineList
+        inert={!isVisible}
         className={cn(
           "-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border",
-          isHovered ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
+          isVisible ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
         )}
         items={items}
         activeHeaderId={activeHeaderId}
@@ -62,17 +71,20 @@ export const MiniMap: React.FC<{
   const seen = new Map<string, number>();
   return (
     <div className="flex flex-col gap-4 items-end max-h-[70vh] overflow-hidden">
-      {items.map((item, idx) => {
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
         return (
-          <div
-            key={`${identifier}-${idx}`}
+          <button
+            type="button"
+            aria-label={item.name}
+            key={`${selector}-${occurrences}`}
             className={cn(
-              "h-[2px] bg-muted-foreground/60",
+              "h-[2px] bg-muted-foreground/60 focus-visible:outline focus-visible:outline-ring",
               item.level === 1 && "w-5",
               item.level === 2 && "w-4",
               item.level === 3 && "w-3",
@@ -91,24 +103,31 @@ export const MiniMap: React.FC<{
 
 export const OutlineList: React.FC<{
   className?: string;
+  inert?: boolean;
   items: OutlineItem[];
   activeHeaderId: string | undefined;
   activeOccurrences: number | undefined;
-}> = ({ items, activeHeaderId, activeOccurrences, className }) => {
+}> = ({ items, activeHeaderId, activeOccurrences, className, inert }) => {
   // Map of selector to its occurrences
   const seen = new Map<string, number>();
   return (
-    <div className={cn("flex flex-col overflow-auto py-4 pl-2", className)}>
-      {items.map((item, idx) => {
+    <div
+      inert={inert}
+      className={cn("flex flex-col overflow-auto py-4 pl-2", className)}
+    >
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
-        const key = `${identifier}-${idx}`;
+        const key = `${selector}-${occurrences}`;
         const sharedProps = {
+          role: "link",
+          tabIndex: 0,
           className: cn(
-            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l",
+            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l focus-visible:outline focus-visible:outline-ring",
             item.level === 1 && "font-semibold",
             item.level === 2 && "ml-3",
             item.level === 3 && "ml-6",
@@ -118,6 +137,12 @@ export const OutlineList: React.FC<{
               "text-accent-foreground",
           ),
           onClick: () => scrollToOutlineItem(item, occurrences),
+          onKeyDown: (e: React.KeyboardEvent) => {
+            if (e.target === e.currentTarget && e.key === "Enter") {
+              e.preventDefault();
+              scrollToOutlineItem(item, occurrences);
+            }
+          },
         };
 
         if (item.html) {

package/src/components/editor/chrome/panels/outline/useActiveOutline.tsx

@@ -113,9 +113,10 @@ export function findOutlineElements(items: OutlineItem[]) {
   return items
     .map((item) => {
       const identifier = "id" in item.by ? item.by.id : item.by.path;
+      const selector = JSON.stringify(item.by);
       // Keep track of how many times we've seen this selector
-      const occurrences = seen.get(identifier) ?? 0;
-      seen.set(identifier, occurrences + 1);
+      const occurrences = seen.get(selector) ?? 0;
+      seen.set(selector, occurrences + 1);
 
       const el = findOutlineItem(item, occurrences);
       if (!el) {

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -31,6 +31,7 @@ import { usePackageAction } from "@/core/packages/usePackageAction";
 import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { isWasm } from "@/core/wasm/utils";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -440,15 +441,11 @@ const DependencyTree: React.FC<{
   error?: Error | null;
   sandboxBackend: "uv" | "pixi" | null;
 }> = ({ tree, error, sandboxBackend }) => {
-  const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
-    new Set(),
+  const [expandedNodes, setExpandedNodes] = useStateForKey(
+    tree,
+    () => new Set<string>(),
   );
 
-  // Reset tree to collapsed state when tree data changes (including refetches)
-  React.useEffect(() => {
-    setExpandedNodes(new Set());
-  }, [tree]);
-
   if (error) {
     return <ErrorBanner error={error} />;
   }

package/src/components/editor/chrome/panels/secrets-panel.tsx

@@ -66,6 +66,7 @@ const SecretsPanel: React.FC = () => {
           <div className="flex justify-start h-8 border-b">
             <button
               type="button"
+              aria-label="Add environment variable"
               className="border-r px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
               onClick={() =>
                 openModal(

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -71,7 +71,11 @@ const SnippetsPanel: React.FC = () => {
                 rootClassName="flex-1 border-r"
               />
               <ContributeSnippetButton>
-                <button className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
+                <button
+                  type="button"
+                  aria-label="Contribute snippet"
+                  className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
+                >
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </ContributeSnippetButton>

package/src/components/editor/chrome/wrapper/__tests__/attachment-status.test.tsx

@@ -0,0 +1,366 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import { userEvent } from "storybook/test";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { toast } from "@/components/ui/use-toast";
+import type { Attachment } from "@/core/attachments/state";
+import { pairConfigAtom } from "@/core/config/pair";
+import { createNotebookReplica } from "@/core/host/replica";
+import {
+  type StableSessionId,
+  stableSessionIdAtom,
+} from "@/core/kernel/session";
+import { API } from "@/core/network/api";
+import { connectionAtom } from "@/core/network/connection";
+import { notebookReplicaAtom } from "@/core/websocket/state";
+import { ConnectionState } from "@/core/websocket/types";
+import { Deferred } from "@/utils/Deferred";
+import { AttachmentStatus } from "../footer-items/attachment-status";
+
+vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
+vi.mock("@/core/network/api", () => ({ API: { post: vi.fn() } }));
+
+const attachmentsAtom = atom<Attachment[]>([]);
+
+const AGENT: Attachment = {
+  id: "a1",
+  kind: "agent",
+  name: "Pi",
+  since: new Date().toISOString(),
+  notebook_id: "nb-one",
+};
+
+function renderStatus(attachments: Attachment[] = [AGENT], preview = true) {
+  const store = createStore();
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
+  store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
+  store.set(notebookReplicaAtom, {
+    ...createNotebookReplica(store),
+    connectionAtom: atom({ state: ConnectionState.OPEN }),
+    attachmentsAtom,
+  });
+  store.set(attachmentsAtom, attachments);
+  store.set(stableSessionIdAtom, "stable/test" as StableSessionId);
+  return {
+    store,
+    ...render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <AttachmentStatus />
+        </TooltipProvider>
+      </Provider>,
+    ),
+  };
+}
+
+describe("AttachmentStatus", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(API.post).mockResolvedValue("");
+    vi.mocked(toast).mockReturnValue({
+      id: "notice",
+      dismiss: vi.fn(),
+      update: vi.fn(),
+      upsert: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders nothing when host is disabled", () => {
+    expect(renderStatus([AGENT], false).container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing without agents", () => {
+    expect(
+      renderStatus([{ ...AGENT, kind: "client" }]).container,
+    ).toBeEmptyDOMElement();
+  });
+
+  it("lists each agent by its self-described name", () => {
+    renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", name: "Claude Code" },
+      { ...AGENT, id: "c1", kind: "client", name: "Browser" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(1);
+    expect(screen.getByLabelText("2 agents connected")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Pi" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Claude Code" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("a1")).toBeInTheDocument();
+    expect(screen.getByText("a2")).toBeInTheDocument();
+    expect(screen.queryByText("Browser")).not.toBeInTheDocument();
+    expect(screen.getAllByText(/^Connected /)).toHaveLength(2);
+  });
+
+  it("uses Agent when no name was supplied", () => {
+    renderStatus([{ ...AGENT, name: null }]);
+    expect(screen.getByLabelText("Agent connected")).toBeInTheDocument();
+  });
+
+  it.each(["{Enter}", " "])("opens from the keyboard with %j", async (key) => {
+    vi.useFakeTimers();
+    renderStatus();
+    act(() => vi.advanceTimersByTime(3000));
+    vi.useRealTimers();
+    const user = userEvent.setup();
+    const button = screen.getByRole("button", { name: "Pi connected" });
+    expect(button.tagName).toBe("BUTTON");
+    expect(button).toHaveAttribute("type", "button");
+    await user.tab();
+    expect(button).toHaveFocus();
+    await user.keyboard(key);
+    expect(button).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText(/^Connected /)).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(button).toHaveAttribute("aria-expanded", "false");
+    expect(button).toHaveFocus();
+  });
+
+  it("opens for three seconds on connection without moving editor focus", () => {
+    vi.useFakeTimers();
+    const { store } = renderStatus([]);
+    const editor = document.createElement("textarea");
+    document.body.append(editor);
+    editor.focus();
+    act(() => store.set(attachmentsAtom, [AGENT]));
+    const trigger = screen.getByRole("button", { name: "Pi connected" });
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(editor).toHaveFocus();
+    act(() => vi.advanceTimersByTime(3000));
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(editor).toHaveFocus();
+    editor.remove();
+  });
+
+  it("reopens on a new agent but not a metadata update or disconnection", () => {
+    vi.useFakeTimers();
+    const { store } = renderStatus();
+    act(() => vi.advanceTimersByTime(3000));
+    act(() => store.set(attachmentsAtom, [{ ...AGENT, name: "New name" }]));
+    expect(screen.getByLabelText("New name connected")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    act(() => store.set(attachmentsAtom, [AGENT, { ...AGENT, id: "a2" }]));
+    expect(screen.getByLabelText("2 agents connected")).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    act(() => vi.advanceTimersByTime(3000));
+    act(() => store.set(attachmentsAtom, [AGENT]));
+    expect(screen.getByLabelText("Pi connected")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("keeps manually opened details open past the automatic timeout", () => {
+    vi.useFakeTimers();
+    renderStatus();
+    const trigger = screen.getByLabelText("Pi connected");
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+    act(() => vi.advanceTimersByTime(5000));
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("keeps manual confirmation open when another agent connects", () => {
+    vi.useFakeTimers();
+    const { store } = renderStatus();
+    const trigger = screen.getByLabelText("Pi connected");
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect Pi" }));
+    act(() =>
+      store.set(attachmentsAtom, [
+        AGENT,
+        { ...AGENT, id: "a2", name: "Claude" },
+      ]),
+    );
+    act(() => vi.advanceTimersByTime(5000));
+    expect(
+      screen.getByRole("button", { name: "Confirm disconnect Pi" }),
+    ).toBeInTheDocument();
+    expect(API.post).not.toHaveBeenCalled();
+  });
+
+  it("keeps focused details open when another agent connects", () => {
+    vi.useFakeTimers();
+    const { store } = renderStatus();
+    act(() => screen.getByRole("button", { name: "Disconnect Pi" }).focus());
+    act(() => store.set(attachmentsAtom, [AGENT, { ...AGENT, id: "a2" }]));
+    act(() => vi.advanceTimersByTime(5000));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("keeps hovered details open when another agent connects", () => {
+    vi.useFakeTimers();
+    const { store } = renderStatus();
+    fireEvent.pointerEnter(screen.getByRole("dialog"));
+    act(() => store.set(attachmentsAtom, [AGENT, { ...AGENT, id: "a2" }]));
+    act(() => vi.advanceTimersByTime(5000));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("pauses the automatic close while the pointer is over the details", () => {
+    vi.useFakeTimers();
+    renderStatus();
+    const details = screen.getByRole("dialog");
+    fireEvent.pointerEnter(details);
+    act(() => vi.advanceTimersByTime(5000));
+    expect(screen.getByLabelText("Pi connected")).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    fireEvent.pointerLeave(details);
+    act(() => vi.advanceTimersByTime(3000));
+    expect(screen.getByLabelText("Pi connected")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("groups identities while keeping separate attachment rows", () => {
+    renderStatus([
+      { ...AGENT, identity: "same" },
+      { ...AGENT, id: "a2", identity: "same" },
+    ]);
+    expect(screen.getByLabelText("Pi connected")).toBeInTheDocument();
+    expect(
+      screen.getAllByRole("button", { name: "Disconnect Pi" }),
+    ).toHaveLength(2);
+    for (const text of screen.getAllByText(/^Connected /)) {
+      expect(text).not.toHaveTextContent("Invalid Date");
+    }
+  });
+
+  it("keeps the popover closed across a same-identity reconnect gap", () => {
+    vi.useFakeTimers();
+    const { store } = renderStatus([{ ...AGENT, identity: "same" }]);
+    act(() => vi.advanceTimersByTime(3000));
+    act(() => store.set(attachmentsAtom, []));
+    act(() =>
+      store.set(attachmentsAtom, [{ ...AGENT, id: "a2", identity: "same" }]),
+    );
+    expect(screen.getByLabelText("Pi connected")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("disconnects only the selected attachment and waits for the server update", async () => {
+    const { store } = renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", name: "Codex" },
+    ]);
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect Pi" }));
+    expect(API.post).not.toHaveBeenCalled();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Confirm disconnect Pi" }),
+    );
+    await waitFor(() =>
+      expect(API.post).toHaveBeenCalledWith(
+        "/pair/notebooks/stable%2Ftest/attachments/detach",
+        { attachment_id: "a1" },
+      ),
+    );
+    expect(screen.getByLabelText("2 agents connected")).toBeInTheDocument();
+    act(() =>
+      store.set(attachmentsAtom, [{ ...AGENT, id: "a2", name: "Codex" }]),
+    );
+    expect(screen.getByLabelText("Codex connected")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Disconnect Pi" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("disables duplicate disconnects while pending", async () => {
+    const deferred = new Deferred<string>();
+    vi.mocked(API.post).mockReturnValue(deferred.promise);
+    renderStatus();
+    const button = screen.getByRole("button", { name: "Disconnect Pi" });
+    fireEvent.click(button);
+    fireEvent.click(
+      screen.getByRole("button", { name: "Confirm disconnect Pi" }),
+    );
+    expect(button).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Cancel disconnect Pi" }),
+    ).toBeDisabled();
+    fireEvent.click(button);
+    expect(API.post).toHaveBeenCalledOnce();
+    await act(async () => deferred.resolve(""));
+  });
+
+  it("shows disconnect failures and retains the attachment", async () => {
+    vi.mocked(API.post).mockRejectedValue(new Error("offline"));
+    renderStatus();
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect Pi" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "Confirm disconnect Pi" }),
+    );
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith({
+        variant: "danger",
+        title: "Could not disconnect Pi",
+        duration: 5000,
+      }),
+    );
+    expect(screen.getByLabelText("Pi connected")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Disconnect Pi" })).toBeEnabled();
+  });
+
+  it("cancels confirmation without disconnecting and restores focus", () => {
+    renderStatus();
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect Pi" }));
+    expect(screen.getByText("Disconnect?")).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "Confirm disconnect Pi" }),
+    ).toBeEnabled();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Cancel disconnect Pi" }),
+    );
+    expect(API.post).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: "Disconnect Pi" })).toHaveFocus();
+    expect(
+      screen.queryByRole("button", { name: "Confirm disconnect Pi" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("disables disconnect without a stable session ID", () => {
+    const { store } = renderStatus();
+    act(() => store.set(stableSessionIdAtom, null));
+    expect(
+      screen.getByRole("button", { name: "Disconnect Pi" }),
+    ).toBeDisabled();
+  });
+
+  it("removes detached agents when the list is replaced", () => {
+    const { store, container } = renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", name: "Claude Code" },
+    ]);
+    act(() => store.set(attachmentsAtom, [AGENT]));
+    expect(
+      screen.queryByRole("heading", { name: "Claude Code" }),
+    ).not.toBeInTheDocument();
+    act(() => store.set(attachmentsAtom, []));
+    expect(container).toBeEmptyDOMElement();
+  });
+});