@marimo-team/frontend 0.25.3-dev4 → 0.25.3-dev42

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -17,18 +17,16 @@ import { Events } from "@/utils/events";
 import { Tooltip } from "@/components/ui/tooltip";
 import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
 import { API } from "@/core/network/api";
-import { pairPreviewAtom } from "@/core/config/pair";
+import { pairConfigAtom } from "@/core/config/pair";
 import { stableSessionIdAtom } from "@/core/kernel/session";
 import {
   AGENT_LABELS,
   AGENT_TABS,
   type AgentTab,
   type ConnectionInfo,
-  getFileFromURL,
   getRawPrompt,
   getTerminalCommand,
   maskToken,
-  SKILL_INSTALL,
   TERMINAL_TABS,
 } from "./pair-with-agent-commands";
 
@@ -52,15 +50,64 @@ export const PairWithAgentModal: React.FC<{
 }> = ({ onClose }) => {
   const [activeTab, setActiveTab] = useState<AgentTab>("claude");
   const runtimeManager = useRuntimeManager();
-  const preview = useAtomValue(pairPreviewAtom);
+  const config = useAtomValue(pairConfigAtom);
+  const hostEnabled = config?.hostEnabled ?? false;
   const stableSessionId = useAtomValue(stableSessionIdAtom);
-  const commandStep = preview ? 1 : 2;
+  const [lookup, setLookup] = useState<
+    {
+      sessionId: string;
+    } & (
+      | { status: "ready"; notebookId: string | null }
+      | { status: "loading" | "error" }
+    )
+  >();
+  useEffect(() => {
+    if (!hostEnabled || !stableSessionId) {
+      setLookup(undefined);
+      return;
+    }
+    const sessionId = stableSessionId;
+    setLookup({ sessionId, status: "loading" });
+    let cancelled = false;
+    API.get<Record<string, { session_id: string; notebook_id: string | null }>>(
+      "/sessions",
+    )
+      .then((sessions) => {
+        if (!cancelled) {
+          const session = Object.values(sessions).find(
+            (session) => session.session_id === sessionId,
+          );
+          setLookup(
+            session
+              ? { sessionId, status: "ready", notebookId: session.notebook_id }
+              : { sessionId, status: "error" },
+          );
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setLookup({ sessionId, status: "error" });
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [hostEnabled, stableSessionId]);
+  const currentLookup =
+    lookup?.sessionId === stableSessionId ? lookup : undefined;
+  const verified = !hostEnabled || currentLookup?.status === "ready";
+  const notebookId =
+    hostEnabled && currentLookup?.status === "ready"
+      ? currentLookup.notebookId
+      : undefined;
+  const targetReady = Boolean(stableSessionId) && verified;
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
   const connection: ConnectionInfo = {
     url: runtimeManager.httpURL.toString(),
-    file: preview ? undefined : getFileFromURL(window.location.href),
-    session: preview ? (stableSessionId ?? undefined) : undefined,
+    notebook: notebookId ?? undefined,
+    session:
+      targetReady && !notebookId ? (stableSessionId ?? undefined) : undefined,
   };
 
   return (
@@ -83,6 +130,13 @@ export const PairWithAgentModal: React.FC<{
       </DialogHeader>
 
       <div className="flex flex-col gap-4 py-2">
+        {!targetReady && (
+          <output className="text-sm text-muted-foreground">
+            {currentLookup?.status === "error"
+              ? "Could not verify this notebook. Close this dialog and try again."
+              : "Waiting for the notebook connection…"}
+          </output>
+        )}
         <Tabs
           value={activeTab}
           onValueChange={(v) => setActiveTab(v as AgentTab)}
@@ -101,30 +155,27 @@ export const PairWithAgentModal: React.FC<{
               value={tab}
               className="mt-4 flex flex-col gap-4"
             >
-              {!preview && (
-                <Step
-                  index={1}
-                  title="Install the skill"
-                  hint="Run once per machine."
-                >
-                  <CommandBlock command={SKILL_INSTALL} />
-                </Step>
-              )}
-              <Step index={commandStep} title="Run in your terminal">
+              <Step
+                index={1}
+                title="Run in your terminal"
+                hint={
+                  hostEnabled && tab === "opencode"
+                    ? "Agent connections require OpenCode 2.x."
+                    : undefined
+                }
+              >
                 <CommandBlock
                   command={getTerminalCommand(
                     tab,
                     connection,
                     hasToken,
-                    preview,
+                    config,
                   )}
+                  disabled={!targetReady}
                 />
               </Step>
               {hasToken && authToken && (
-                <Step
-                  index={commandStep + 1}
-                  title="Paste when prompted for a token"
-                >
+                <Step index={2} title="Paste when prompted for a token">
                   <CommandBlock
                     command={authToken}
                     display={maskToken(authToken)}
@@ -136,17 +187,8 @@ export const PairWithAgentModal: React.FC<{
           ))}
 
           <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
-            {!preview && (
-              <Step
-                index={1}
-                title="Make sure the marimo-pair skill is available to your agent"
-                hint="Skip if your agent already has it."
-              >
-                <CommandBlock command={SKILL_INSTALL} />
-              </Step>
-            )}
             <Step
-              index={commandStep}
+              index={1}
               title="Copy this prompt into your agent"
               hint={
                 hasToken
@@ -155,13 +197,14 @@ export const PairWithAgentModal: React.FC<{
               }
             >
               <CommandBlock
-                command={getRawPrompt(connection, authToken, preview)}
+                command={getRawPrompt(connection, authToken, config)}
                 display={getRawPrompt(
                   connection,
                   authToken ? maskToken(authToken) : null,
-                  preview,
+                  config,
                 )}
                 multiline={true}
+                disabled={!targetReady}
               />
             </Step>
           </TabsContent>
@@ -199,11 +242,21 @@ const CommandBlock: React.FC<{
   display?: string;
   multiline?: boolean;
   copyLabel?: string;
-}> = ({ command, display, multiline = false, copyLabel = "Copy command" }) => {
+  disabled?: boolean;
+}> = ({
+  command,
+  display,
+  multiline = false,
+  copyLabel = "Copy command",
+  disabled = false,
+}) => {
   const [copied, setCopied] = useState(false);
 
   const copy = Events.stopPropagation(async (e) => {
     e.preventDefault();
+    if (disabled) {
+      return;
+    }
     await copyToClipboard(command);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
@@ -218,6 +271,7 @@ const CommandBlock: React.FC<{
         <Tooltip content="Copied!" open={copied}>
           <Button
             aria-label="Copy prompt"
+            disabled={disabled}
             onClick={copy}
             size="xs"
             variant="ghost"
@@ -240,7 +294,13 @@ const CommandBlock: React.FC<{
         {display ?? command}
       </code>
       <Tooltip content="Copied!" open={copied}>
-        <Button aria-label={copyLabel} onClick={copy} size="xs" variant="ghost">
+        <Button
+          aria-label={copyLabel}
+          onClick={copy}
+          size="xs"
+          variant="ghost"
+          disabled={disabled}
+        >
           {copied ? (
             <CheckIcon size={14} strokeWidth={1.5} />
           ) : (

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -106,9 +106,9 @@ export const AddCellWithAI: React.FC<{
   const runtimeManager = useRuntimeManager();
 
   const inputRef = useRef<ReactCodeMirrorRef>(null);
-  const submissionController = useRef(
-    new StagedCellSubmissionController(),
-  ).current;
+  const [submissionController] = useState(
+    () => new StagedCellSubmissionController(),
+  );
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { files, addFiles, removeFile } = useFileState();

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

@@ -25,6 +25,7 @@ const ErrorsPanel: React.FC = () => {
             <MarimoErrorOutput
               key={error.cellId}
               errors={error.output.data}
+              code={error.output.code}
               cellId={error.cellId}
             />
           </div>

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 {
+  type StableSessionId,
+  stableSessionIdAtom,
+} from "@/core/kernel/session";
+import { API } from "@/core/network/api";
+import { connectionAtom } from "@/core/network/connection";
+import { notebookClientAtom } 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(notebookClientAtom, {
+    connectionAtom: atom({ state: ConnectionState.OPEN }),
+    documentAtom: atom(null),
+    attachmentsAtom,
+    reconnect: async () => undefined,
+  });
+  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/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";