@marimo-team/islands 0.25.3-dev4 → 0.25.3-dev5

package/dist/{swimlanes-42K2YHIH-BkSppxp8.js → swimlanes-42K2YHIH-Do6L-cYg.js}

@@ -9,7 +9,7 @@ import "./chunk-4HAMMTFA-D4eFPyFh.js";
 import "./chunk-GVQU2GXP-Cwbt-lF0.js";
 import "./chunk-L3NEJ4N5-n-zgIVSy.js";
 import { o as n } from "./chunk-OSK3NFVY-DXa-Cxbn.js";
-import { c as r } from "./mermaid-CiAXjLpA.js";
+import { c as r } from "./mermaid-CHo49Yv-.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-42K2YHIH.mjs
 var i = 5, a = 1e-5, o = 1e-6;
 function s(e) {

package/dist/{swimlanesDiagram-VR7AAH4N-c8G5pGxC.js → swimlanesDiagram-VR7AAH4N-DUzPvSVU.js}

@@ -9,11 +9,11 @@ import "./chunk-4HAMMTFA-D4eFPyFh.js";
 import "./chunk-GVQU2GXP-Cwbt-lF0.js";
 import "./chunk-L3NEJ4N5-n-zgIVSy.js";
 import "./chunk-OSK3NFVY-DXa-Cxbn.js";
-import "./mermaid-CiAXjLpA.js";
+import "./mermaid-CHo49Yv-.js";
 import "./chunk-F27PBJKO-ufseIn5y.js";
 import "./chunk-XXDRQBXY-Dnl5VBqG.js";
 import "./chunk-POPQ4Y6H-hYOXbYH_.js";
-import { r as t, t as n } from "./chunk-SHT3W25Y-lHiGx3ZC.js";
+import { r as t, t as n } from "./chunk-SHT3W25Y-CV9J3rAB.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-VR7AAH4N.mjs
 var r = n({
 	defaultLayout: "swimlane",

package/dist/{timeline-definition-24CTP7MA-CaMQayqK.js → timeline-definition-24CTP7MA-D3c46WM5.js}

@@ -3,7 +3,7 @@ import { p as t } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n, t as r } from "./src-CA_m4ONl.js";
 import { n as i, t as a } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as o, J as s, a as c, b as l, et as u, nt as d, o as f, x as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-CiAXjLpA.js";
+import { p as m } from "./mermaid-CHo49Yv-.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/timeline-definition-24CTP7MA.mjs
 var h = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/{toDate-BNJf01u1.js → toDate-vIXljnsr.js}

@@ -465,54 +465,55 @@ function M({ href: e, queryParams: t, keys: n }) {
 	let m = f.toString();
 	return m ? `${o}?${m}${s}` : e;
 }
-a(null);
-var N = (0, O.init)({ length: 6 });
-function P() {
-	return `s_${N()}`;
+//#endregion
+//#region src/core/kernel/session.ts
+var N = a(null), P = (0, O.init)({ length: 6 });
+function F() {
+	return `s_${P()}`;
 }
-function F(e) {
+function I(e) {
 	return e ? /^s_[\da-z]{6}$/.test(e) : !1;
 }
-var I = null;
-function L() {
-	let e = o.get(v) === "edit", n = new URL(window.location.href).searchParams.get(s.sessionId), r = F(n) ? n : null;
+var L = null;
+function R() {
+	let e = o.get(v) === "edit", n = new URL(window.location.href).searchParams.get(s.sessionId), r = I(n) ? n : null;
 	return k((t) => {
 		if (!e) {
 			t.delete(s.sessionId), t.delete(s.kiosk);
 			return;
 		}
 		t.has(s.kiosk) || t.delete(s.sessionId);
-	}), r === null ? (t.debug("Starting a new session", { sessionId: n }), P()) : e ? (t.debug("Connecting to existing session", { sessionId: r }), r) : (t.debug("Ignoring session_id from URL outside the editor", { sessionId: r }), P());
+	}), r === null ? (t.debug("Starting a new session", { sessionId: n }), F()) : e ? (t.debug("Connecting to existing session", { sessionId: r }), r) : (t.debug("Ignoring session_id from URL outside the editor", { sessionId: r }), F());
 }
-function R() {
-	return I === null && (I = L()), I;
+function z() {
+	return L === null && (L = R()), L;
 }
 //#endregion
 //#region src/core/static/static-state.ts
-function z(e) {
+function B(e) {
 	if (typeof e != "object" || !e || Array.isArray(e)) return !1;
 	for (let t of Object.values(e)) if (typeof t != "string") return !1;
 	return !0;
 }
-function B(e) {
+function V(e) {
 	if (typeof e != "object" || !e || Array.isArray(e)) return !1;
 	let t = e;
-	return !(!z(t.files) || t.modelNotifications !== void 0 && !Array.isArray(t.modelNotifications));
-}
-function V() {
-	let e = typeof window > "u" ? void 0 : window.__MARIMO_STATIC__;
-	return B(e) ? e : void 0;
+	return !(!B(t.files) || t.modelNotifications !== void 0 && !Array.isArray(t.modelNotifications));
 }
 function H() {
-	return V() !== void 0;
+	let e = typeof window > "u" ? void 0 : window.__MARIMO_STATIC__;
+	return V(e) ? e : void 0;
 }
 function U() {
-	let e = V();
+	return H() !== void 0;
+}
+function W() {
+	let e = H();
 	return l(e !== void 0, "Not a static notebook"), e.files;
 }
 //#endregion
 //#region src/core/runtime/runtime.ts
-var W = class {
+var G = class {
 	initialHealthyCheck = new m();
 	config;
 	lazy;
@@ -535,7 +536,7 @@ var W = class {
 		return this.httpURL.origin === window.location.origin;
 	}
 	get isServerless() {
-		return p() || c() || H();
+		return p() || c() || U();
 	}
 	formatHttpURL({ path: e = "", searchParams: t, restrictToKnownQueryParams: n = !0 }) {
 		let r = this.httpURL, i = new URLSearchParams(window.location.search);
@@ -559,7 +560,7 @@ var W = class {
 			searchParams: t,
 			restrictToKnownQueryParams: !1
 		});
-		return G(this.appendCrossOriginAuth(n).toString());
+		return K(this.appendCrossOriginAuth(n).toString());
 	}
 	getSessionSearchParams(e) {
 		let t = new URL(this.config.url), n = new URLSearchParams(t.search);
@@ -645,17 +646,17 @@ var W = class {
 	}
 	headers() {
 		let e = {
-			"Marimo-Session-Id": R(),
+			"Marimo-Session-Id": z(),
 			"Marimo-Server-Token": this.config.serverToken ?? "",
 			"x-runtime-url": this.httpURL.toString()
 		};
 		return this.config.authToken && (e.Authorization = `Bearer ${this.config.authToken}`), e;
 	}
 	sessionHeaders() {
-		return { "Marimo-Session-Id": R() };
+		return { "Marimo-Session-Id": z() };
 	}
 };
-function G(e) {
+function K(e) {
 	if (!e.startsWith("http")) {
 		t.warn(`URL must start with http: ${e}`);
 		let n = new URL(e);
@@ -665,29 +666,29 @@ function G(e) {
 }
 //#endregion
 //#region src/core/runtime/config.ts
-function K() {
+function q() {
 	let e = new URL(document.baseURI);
 	return e.search = "", e.hash = "", e.toString();
 }
-var q = {
+var J = {
 	lazy: !0,
-	url: K()
-}, J = a(q), Y = a((e) => {
-	let t = e(J);
-	return new W(t, t.lazy);
+	url: q()
+}, Y = a(J), ee = a((e) => {
+	let t = e(Y);
+	return new G(t, t.lazy);
 });
 function X() {
-	return o.get(Y);
+	return o.get(ee);
 }
-function ee(e) {
+function te(e) {
 	if (e.startsWith("http")) return new URL(e);
 	let t = X().httpURL.toString();
 	return t.startsWith("blob:") && (t = t.replace("blob:", "")), new URL(e, t);
 }
 //#endregion
 //#region ../node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/constants.js
-var te = 365.2425, ne = 6048e5, re = 864e5, Z = 86400;
-Z * 7, Z * te / 12 * 3;
+var ne = 365.2425, re = 6048e5, ie = 864e5, Z = 86400;
+Z * 7, Z * ne / 12 * 3;
 var Q = Symbol.for("constructDateFrom");
 //#endregion
 //#region ../node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/constructFrom.js
@@ -696,8 +697,8 @@ function $(e, t) {
 }
 //#endregion
 //#region ../node_modules/.pnpm/date-fns@4.4.0/node_modules/date-fns/toDate.js
-function ie(e, t) {
+function ae(e, t) {
 	return $(t || e, e);
 }
 //#endregion
-export { u as S, x as _, ee as a, p as b, H as c, k as d, D as f, b as g, y as h, ne as i, M as l, v as m, $ as n, X as o, g as p, re as r, U as s, ie as t, j as u, _ as v, f as x, m as y };
+export { u as C, f as S, b as _, te as a, m as b, U as c, j as d, k as f, y as g, v as h, re as i, N as l, g as m, $ as n, X as o, D as p, ie as r, W as s, ae as t, M as u, x as v, p as x, _ as y };

package/dist/{vega-component-DG29TAB7.js → vega-component-DTG6zxaY.js}

@@ -3,15 +3,15 @@ import { g as t, h as n, m as r, o as i } from "./button-CvjkwdSk.js";
 import { t as a } from "./react-sHtZdjeP.js";
 import { t as o } from "./compiler-runtime-CldRdSsv.js";
 import { t as s } from "./tooltip-BO1REbqs.js";
-import { S as c, a as l } from "./toDate-BNJf01u1.js";
+import { C as c, a as l } from "./toDate-vIXljnsr.js";
 import { t as u } from "./jsx-runtime-3BD1kT0s.js";
-import { n as d } from "./error-banner-Da600cwz.js";
+import { n as d } from "./error-banner-D-WCIiMt.js";
 import { t as f } from "./debounce-C3jyATpc.js";
 import { A as p, n as ee } from "./useTheme-CRnjkku0.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as te } from "./objects-CzUgoMIF.js";
 import { t as h } from "./useAsyncData-Deh5kszT.js";
-import { a as ne, i as re, n as ie, t as g } from "./formats-BGh2thRc.js";
+import { a as ne, i as re, n as ie, t as g } from "./formats-CeOmU1MU.js";
 import { M as ae, n as oe } from "./vega-loader.browser-DNST6uVf.js";
 import { t as se } from "./react-vega-BED0DjiB.js";
 import { a as ce, n as _ } from "./loader-BQOfjTIJ.js";

package/dist/{vennDiagram-4TSXK5OY-CF8pfaK3.js → vennDiagram-4TSXK5OY-BSZD8JcZ.js}

@@ -3,7 +3,7 @@ import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-CiAXjLpA.js";
+import { p as v } from "./mermaid-CHo49Yv-.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-dGPu39d-.js → wardleyDiagram-VM6X3IG4-48cUWkfA.js}

@@ -2,7 +2,7 @@ import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-CiAXjLpA.js";
+import { p as m } from "./mermaid-CHo49Yv-.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-CP6-9q56.js → xychartDiagram-S5SC5T6Z-CswYgYeu.js}

@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import "./chunk-PWAF6VOD-CQw5qATZ.js";
 import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
-import { p as x } from "./mermaid-CiAXjLpA.js";
+import { p as x } from "./mermaid-CHo49Yv-.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev4",
+  "version": "0.25.3-dev5",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/Output.tsx

@@ -66,7 +66,7 @@ export type OnRefactorWithAI = (opts: {
  * Renders an output based on an OutputMessage.
  */
 export const OutputRenderer: React.FC<{
-  message: Pick<OutputMessage, "channel" | "data" | "mimetype">;
+  message: Pick<OutputMessage, "channel" | "data" | "mimetype" | "code">;
   cellId?: CellId;
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
@@ -172,7 +172,9 @@ export const OutputRenderer: React.FC<{
 
     case "application/vnd.marimo+error":
       invariant(Array.isArray(data), "Expected array data");
-      return <MarimoErrorOutput cellId={cellId} errors={data} />;
+      return (
+        <MarimoErrorOutput cellId={cellId} errors={data} code={message.code} />
+      );
 
     case "application/vnd.marimo+traceback":
       invariant(
@@ -183,6 +185,7 @@ export const OutputRenderer: React.FC<{
         <MarimoTracebackOutput
           onRefactorWithAI={onRefactorWithAI}
           traceback={data}
+          code={message.code}
           cellId={cellId}
         />
       );

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,167 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { userEvent } from "storybook/test";
+import { describe, expect, it } from "vitest";
+import { PAIR_PREVIEW } from "@/__tests__/fixtures/pair-preview";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { type Attachment, attachmentsAtom } from "@/core/attachments/state";
+import { pairPreviewAtom } from "@/core/config/pair";
+import { connectionAtom } from "@/core/network/connection";
+import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { AttachmentStatus } from "../footer-items/attachment-status";
+
+const AGENT: Attachment = {
+  id: "a1",
+  kind: "agent",
+  name: "Pi",
+  notebook_id: "nb-test",
+  identity: "pi-thread",
+  since: new Date().toISOString(),
+};
+
+function renderStatus(attachments: Attachment[] = [AGENT], preview = true) {
+  const store = createStore();
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
+  store.set(pairPreviewAtom, preview ? PAIR_PREVIEW : undefined);
+  store.set(attachmentsAtom, attachments);
+  return {
+    store,
+    ...render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <AttachmentStatus />
+        </TooltipProvider>
+      </Provider>,
+    ),
+  };
+}
+
+describe("AttachmentStatus", () => {
+  it("renders nothing outside the preview", () => {
+    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", identity: "claude-thread", name: "Claude Code" },
+      { ...AGENT, id: "c1", kind: "client", name: "Browser" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(2);
+    expect(screen.getByLabelText("Pi: Connected")).toBeInTheDocument();
+    expect(screen.getByLabelText("Claude Code: Connected")).toBeInTheDocument();
+    expect(screen.queryByText("Browser")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText("Pi: Connected"));
+    expect(screen.getByText(/^Connected /)).toBeInTheDocument();
+  });
+
+  it("uses Agent when no name was supplied", () => {
+    renderStatus([{ ...AGENT, name: null }]);
+    expect(screen.getByLabelText("Agent: Connected")).toBeInTheDocument();
+  });
+
+  it("groups attachments by identity while retaining each connection row", () => {
+    renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", since: "2026-10-14T00:00:00Z" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(1);
+    fireEvent.click(screen.getByLabelText("Pi: Connected"));
+    expect(screen.getAllByText(/^Connected /)).toHaveLength(2);
+    expect(screen.getByText("a1")).toBeInTheDocument();
+    expect(screen.getByText("a2")).toBeInTheDocument();
+  });
+
+  it("preserves an open popover when the same identity reconnects", () => {
+    const { store } = renderStatus();
+    fireEvent.click(screen.getByLabelText("Pi: Connected"));
+    act(() =>
+      store.set(attachmentsAtom, [
+        { ...AGENT, id: "a2", since: "2026-10-14T00:00:00Z" },
+      ]),
+    );
+    expect(
+      screen.getByRole("button", { name: "Pi: Connected" }),
+    ).toHaveAttribute("aria-expanded", "true");
+    expect(screen.queryByText("a1")).not.toBeInTheDocument();
+    expect(screen.getByText("a2")).toBeInTheDocument();
+  });
+
+  it("does not open a closed popover when the same identity reconnects", () => {
+    const { store } = renderStatus();
+    act(() => store.set(attachmentsAtom, [{ ...AGENT, id: "a2" }]));
+    expect(
+      screen.getByRole("button", { name: "Pi: Connected" }),
+    ).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("keeps anonymous attachments separate from matching client identities", () => {
+    renderStatus([
+      { ...AGENT, identity: undefined },
+      { ...AGENT, id: "a2", identity: undefined },
+      { ...AGENT, id: "a3", identity: "a1" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(3);
+  });
+
+  it("accepts client identities that match object property names", () => {
+    renderStatus([
+      { ...AGENT, identity: "__proto__" },
+      { ...AGENT, id: "a2", identity: "constructor" },
+    ]);
+    expect(screen.getAllByTestId("footer-attachment-status")).toHaveLength(2);
+  });
+
+  it.each(["{Enter}", " "])("opens from the keyboard with %j", async (key) => {
+    const user = userEvent.setup();
+    renderStatus();
+    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.each([
+    { state: ConnectionState.CONNECTING },
+    { state: ConnectionState.CLOSING },
+    { state: ConnectionState.NOT_STARTED },
+    {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "offline",
+    },
+  ])("hides connected claims while the browser is %j", (connection) => {
+    const { store, container } = renderStatus();
+    act(() => store.set(connectionAtom, connection));
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("removes detached agents when the list is replaced", () => {
+    const { store, container } = renderStatus([
+      AGENT,
+      { ...AGENT, id: "a2", identity: "claude-thread", name: "Claude Code" },
+    ]);
+    act(() => store.set(attachmentsAtom, [AGENT]));
+    expect(
+      screen.queryByLabelText("Claude Code: Connected"),
+    ).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";

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

@@ -0,0 +1,82 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { BotIcon } from "lucide-react";
+import { useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  type Attachment,
+  agentAttachmentsAtom,
+  attachmentLabel,
+} from "@/core/attachments/state";
+import { pairPreviewAtom } from "@/core/config/pair";
+import { useTimeAgo } from "@/hooks/useFormatting";
+import { Objects } from "@/utils/objects";
+import { FooterItem } from "../footer-item";
+
+export function AttachmentStatus() {
+  const pairPreview = useAtomValue(pairPreviewAtom);
+  const agents = useAtomValue(agentAttachmentsAtom);
+  if (!pairPreview) {
+    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} />
+  ));
+}
+
+function AttachmentStatusItem({ attachments }: { attachments: Attachment[] }) {
+  const [open, setOpen] = useState(false);
+  const timeAgo = useTimeAgo();
+  const label = attachmentLabel(attachments[0]);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild={true}>
+        <FooterItem
+          asChild={true}
+          tooltip={`${label}: connected`}
+          selected={open}
+          data-testid="footer-attachment-status"
+          aria-label={`${label}: Connected`}
+        >
+          <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-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>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}

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 />