@marimo-team/islands 0.25.3-dev2 → 0.25.3-dev200

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

@@ -22,7 +22,7 @@ import { Suspense } from "react";
 import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { useRequestClient } from "@/core/network/requests";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
@@ -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>
@@ -121,18 +125,16 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
   onClose,
 }) => {
   const { theme } = useTheme();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
 
   const handleInsertSnippet = () => {
     // Add below last focused cell in reverse order
     for (const section of snippet.sections.toReversed()) {
       if (section.code) {
-        createNewCell({
+        createCell({
+          after: lastFocusedCellId,
           code: section.code,
-          before: false,
-          cellId: lastFocusedCellId ?? "__end__",
-          // If the code already exists, skip creation
           skipIfCodeExists: true,
         });
       }
@@ -140,11 +142,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
   };
 
   const handleInsertCode = (code: string) => {
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code });
   };
 
   return (

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

@@ -22,11 +22,7 @@ const VariablePanel: React.FC = () => {
   }
 
   return (
-    <VariableTable
-      className="flex-1"
-      cellIds={cellIds.inOrderIds}
-      variables={variables}
-    />
+    <VariableTable className="flex-1" cellIds={cellIds} variables={variables} />
   );
 };
 

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

@@ -0,0 +1,363 @@
+/* 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/notebook/attachments";
+import { pairConfigAtom } from "@/core/config/pair";
+import {
+  type StableSessionId,
+  stableSessionIdAtom,
+} from "@/core/kernel/session";
+import { API } from "@/core/network/api";
+import { connectionAtom } from "@/core/network/connection";
+import { ConnectionState } from "@/core/session/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[]>([]);
+vi.mock("@/core/session/active-notebook", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/session/active-notebook")>()),
+  activeNotebookReplicaAtom: atom(() => ({ attachmentsAtom })),
+}));
+
+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(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();
+  });
+});

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

@@ -0,0 +1,92 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createDocumentModel } from "@/core/notebook/document";
+import { document } from "@/core/notebook/document/__tests__/fixtures";
+import {
+  type FakeEdit,
+  fakeBackend,
+} from "@/core/notebook/replica/__tests__/fixtures";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+import { DocumentSyncStatus } from "../footer-items/document-sync-status";
+
+const lifetimes: AbortController[] = [];
+
+afterEach(() => {
+  act(() => lifetimes.splice(0).forEach((controller) => controller.abort()));
+});
+
+const conflict = {
+  ok: false as const,
+  status: 409,
+  problem: {
+    type: "tag:marimo.io,2026:host/conflict",
+    title: "Conflict",
+    status: 409,
+    detail: "cell c1 has changed since it was read.",
+  },
+};
+
+function setup(edit: FakeEdit) {
+  const store = createStore();
+  const model = createDocumentModel({
+    store,
+    documentAtom: atom(document()),
+    backendAtom: atom(fakeBackend({ edit })),
+  });
+  const controller = new AbortController();
+  lifetimes.push(controller);
+  model.start({ signal: controller.signal });
+  store.set(activeDocumentModelAtom, model);
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <DocumentSyncStatus />
+      </TooltipProvider>
+    </Provider>,
+  );
+  return { store, model };
+}
+
+describe("DocumentSyncStatus", () => {
+  it("renders nothing while edits reach the server", () => {
+    setup(vi.fn<FakeEdit>());
+    expect(screen.queryByTestId("footer-document-sync")).toBeNull();
+  });
+
+  it("shows a rejected edit and resubmits it on click", async () => {
+    const accepted = document().revision;
+    const edit = vi
+      .fn<FakeEdit>()
+      .mockResolvedValueOnce(conflict)
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        data: {
+          document: { ...accepted, version: 2, etag: "document-2" },
+          cells: {},
+        },
+      });
+    const { store, model } = setup(edit);
+
+    await act(async () => {
+      store.set(model.editAtom, (tx) => tx.setCode("c1", "x = 2"));
+      await model.flush().catch(() => undefined);
+    });
+    const item = screen.getByTestId("footer-document-sync");
+    expect(item).toHaveAttribute(
+      "aria-label",
+      "Edits are not reaching the server",
+    );
+
+    await act(async () => {
+      fireEvent.click(item);
+      await Promise.resolve();
+    });
+    expect(edit).toHaveBeenCalledTimes(2);
+    expect(screen.queryByTestId("footer-document-sync")).toBeNull();
+  });
+});

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", () => ({
@@ -14,8 +15,10 @@ vi.mock("@/components/editor/cell/useDeleteCell", () => ({
 
 vi.mock("@/core/cells/cells", () => ({
   getCellEditorView: vi.fn(),
+}));
+vi.mock("@/core/cells/actions", () => ({
   useCellActions: () => ({
-    createNewCell: vi.fn(),
+    createCell: vi.fn(),
     updateCellCode: vi.fn(),
   }),
 }));
@@ -29,6 +32,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";