@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev201

package/src/core/meta/__tests__/code-visibility.test.tsx

@@ -1,17 +1,21 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { renderHook } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
+import type * as Protocol from "@marimo-team/client/protocol";
+import { atom, createStore, Provider } from "jotai";
 import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { partial } from "@/__mocks__/partial";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { type AppMode, kioskModeAtom, viewStateAtom } from "@/core/mode";
+import type { Document, NotebookReplica } from "@/core/notebook/replica";
 import {
   remoteAdapter,
   runtimeAdapterAtom,
   staticAdapter,
   type RuntimeAdapter,
 } from "@/core/runtime/adapter";
+import { activeNotebookReplicaAtom } from "@/core/session/active-notebook";
 import { useNotebookCodeAvailable } from "../code-visibility";
 
 interface StoreOpts {
@@ -19,6 +23,39 @@ interface StoreOpts {
   kiosk?: boolean;
   showInRunMode?: boolean;
   runtime?: RuntimeAdapter;
+  /** Each cell's source as the host sent it; null is withheld. */
+  codes?: ReadonlyArray<string | null>;
+}
+
+function document(codes: ReadonlyArray<string | null>): Document {
+  const cells = codes.map((code, index): Protocol.Cell => ({
+    id: `cell-${index}` as Protocol.CellId,
+    notebook_id: "nb",
+    code,
+    name: "_",
+    config: {
+      column: null,
+      disabled: false,
+      hide_code: false,
+      expand_output: false,
+    },
+    etag: `etag-${index}`,
+    code_hash: `hash-${index}`,
+    version: 1,
+  }));
+  return {
+    revision: {
+      notebook_id: "nb",
+      order: cells.map((cell) => cell.id),
+      app_config: {},
+      etag: "etag",
+      saved_etag: "etag",
+      order_etag: "order",
+      app_config_etag: "config",
+      version: 1,
+    },
+    cells: new Map(cells.map((cell) => [cell.id, cell])),
+  };
 }
 
 function makeStore({
@@ -26,23 +63,32 @@ function makeStore({
   kiosk = false,
   showInRunMode = true,
   runtime = remoteAdapter,
+  codes = ["x = 1", ""],
 }: StoreOpts = {}) {
   const store = createStore();
   store.set(viewStateAtom, { mode, cellAnchor: null });
   store.set(kioskModeAtom, kiosk);
   store.set(showCodeInRunModeAtom, showInRunMode);
   store.set(runtimeAdapterAtom, runtime);
+  store.set(
+    activeNotebookReplicaAtom,
+    partial<NotebookReplica>(
+      { documentAtom: atom(document(codes)) },
+      "replica",
+    ),
+  );
   return store;
 }
 
-function wrap(store: ReturnType<typeof createStore>) {
-  return ({ children }: { children: ReactNode }) => (
+function render(store: ReturnType<typeof createStore>) {
+  const wrapper = ({ children }: { children: ReactNode }) => (
     <Provider store={store}>{children}</Provider>
   );
+  return renderHook(() => useNotebookCodeAvailable(), { wrapper }).result
+    .current;
 }
 
-const cellsWithCode = [{ code: "x = 1" }, { code: "" }];
-const cellsWithoutCode = [{ code: "" }, { code: "" }];
+const withheld = [null, null];
 
 const originalHref = window.location.href;
 
@@ -60,21 +106,11 @@ describe("useNotebookCodeAvailable", () => {
   });
 
   it("returns true in edit mode regardless of cells", () => {
-    const store = makeStore({ mode: "edit" });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithoutCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(true);
+    expect(render(makeStore({ mode: "edit", codes: withheld }))).toBe(true);
   });
 
   it("returns true in present mode (only reachable from edit)", () => {
-    const store = makeStore({ mode: "present" });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithoutCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(true);
+    expect(render(makeStore({ mode: "present", codes: withheld }))).toBe(true);
   });
 
   it("returns true in kiosk mode even when read mode and no code", () => {
@@ -82,88 +118,60 @@ describe("useNotebookCodeAvailable", () => {
       mode: "read",
       kiosk: true,
       showInRunMode: false,
+      codes: withheld,
     });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithoutCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(true);
+    expect(render(store)).toBe(true);
   });
 
   it("returns true in read mode when at least one cell has code", () => {
-    const store = makeStore({ mode: "read" });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(true);
+    expect(render(makeStore({ mode: "read" }))).toBe(true);
+  });
+
+  it("counts an empty cell as code the host sent", () => {
+    expect(render(makeStore({ mode: "read", codes: ["", null] }))).toBe(true);
+  });
+
+  it("returns false in read mode when the host withheld every source", () => {
+    expect(render(makeStore({ mode: "read", codes: withheld }))).toBe(false);
   });
 
-  it("returns false in read mode when every cell.code is empty (server stripped)", () => {
+  it("returns false in read mode before a document arrives", () => {
     const store = makeStore({ mode: "read" });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithoutCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(false);
+    store.set(activeNotebookReplicaAtom, null);
+    expect(render(store)).toBe(false);
   });
 
   it("returns false in read mode when host opts out via showAppCode", () => {
-    const store = makeStore({ mode: "read", showInRunMode: false });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithCode),
-      { wrapper: wrap(store) },
+    expect(render(makeStore({ mode: "read", showInRunMode: false }))).toBe(
+      false,
     );
-    expect(result.current).toBe(false);
   });
 
   it("returns false in read mode when ?include-code=false", () => {
     setSearch("?include-code=false");
-    const store = makeStore({ mode: "read" });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(false);
+    expect(render(makeStore({ mode: "read" }))).toBe(false);
   });
 
   it("ignores ?include-code=false in kiosk mode", () => {
     setSearch("?include-code=false");
-    const store = makeStore({ mode: "read", kiosk: true });
-    const { result } = renderHook(
-      () => useNotebookCodeAvailable(cellsWithoutCode),
-      { wrapper: wrap(store) },
-    );
-    expect(result.current).toBe(true);
+    expect(
+      render(makeStore({ mode: "read", kiosk: true, codes: withheld })),
+    ).toBe(true);
   });
 
   it("checks embedded code in a static kiosk", () => {
-    const store = makeStore({
+    const options = {
       mode: "read",
       kiosk: true,
       runtime: staticAdapter,
-    });
-
-    const withoutCode = renderHook(
-      () => useNotebookCodeAvailable(cellsWithoutCode),
-      { wrapper: wrap(store) },
-    );
-    const withCode = renderHook(() => useNotebookCodeAvailable(cellsWithCode), {
-      wrapper: wrap(store),
-    });
-
-    expect(withoutCode.result.current).toBe(false);
-    expect(withCode.result.current).toBe(true);
+    } as const;
+    expect(render(makeStore({ ...options, codes: withheld }))).toBe(false);
+    expect(render(makeStore(options))).toBe(true);
   });
 
   it("returns false for non-edit/non-read modes (home, gallery)", () => {
     for (const mode of ["home", "gallery"] as const) {
-      const store = makeStore({ mode });
-      const { result } = renderHook(
-        () => useNotebookCodeAvailable(cellsWithCode),
-        { wrapper: wrap(store) },
-      );
-      expect(result.current).toBe(false);
+      expect(render(makeStore({ mode }))).toBe(false);
     }
   });
 });

package/src/core/meta/code-visibility.ts

@@ -1,22 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtomValue } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import { KnownQueryParams } from "@/core/constants";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { runtimeAdapterAtom } from "@/core/runtime/adapter";
+import { confirmedDocumentAtom } from "@/core/session/active-notebook";
 import { logNever } from "@/utils/assertNever";
 
+/** Whether any cell's source reached this client. A host withholds source as null. */
+export const codeAvailableAtom = atom((get) => {
+  const document = get(confirmedDocumentAtom);
+  return (
+    document !== null &&
+    [...document.cells.values()].some((cell) => cell.code !== null)
+  );
+});
+
 /**
- * Whether the notebook source code reached the frontend and can be rendered.
+ * Whether the notebook source code can be rendered.
  *
- * In `marimo run` the server omits cell sources unless `--include-code` is
- * set (every `cell.code` arrives as `""`). Use this to gate any "show code"
- * / "copy code" / "download .py" affordance.
+ * In `marimo run` the server withholds cell sources unless `--include-code`
+ * is set. Use this to gate any "show code" / "copy code" / "download .py"
+ * affordance.
  */
-export function useNotebookCodeAvailable(
-  cells: ReadonlyArray<{ code: string }>,
-): boolean {
+export function useNotebookCodeAvailable(): boolean {
+  const available = useAtomValue(codeAvailableAtom);
   const kioskMode = useAtomValue(kioskModeAtom);
   const { mode } = useAtomValue(viewStateAtom);
   const showInRunMode = useAtomValue(showCodeInRunModeAtom);
@@ -41,7 +50,7 @@ export function useNotebookCodeAvailable(
       if (params.get(KnownQueryParams.includeCode) === "false") {
         return false;
       }
-      return cells.some((cell) => Boolean(cell.code));
+      return available;
     }
     default:
       logNever(mode);

package/src/core/network/__tests__/connection.test.ts

@@ -3,7 +3,7 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { initialModeAtom } from "@/core/mode";
 import { store } from "@/core/state/jotai";
-import { ConnectionState } from "../../websocket/types";
+import { ConnectionState } from "../../session/types";
 import { connectionAtom, waitForConnectionOpenIfNotebook } from "../connection";
 
 const NEVER = Symbol("never");

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -53,7 +53,6 @@ describe("createLazyRequests", () => {
       sendInstantiate: vi.fn().mockResolvedValue({ instantiated: true }),
       sendFunctionRequest: vi.fn().mockResolvedValue({ result: "data" }),
       sendRestart: vi.fn().mockResolvedValue({ restarted: true }),
-      sendDeleteCell: vi.fn().mockResolvedValue({ deleted: true }),
       sendInterrupt: vi.fn().mockResolvedValue({ interrupted: true }),
       sendPdb: vi.fn().mockResolvedValue({ pdb: true }),
       sendRunScratchpad: vi.fn().mockResolvedValue({ run: true }),
@@ -320,7 +319,6 @@ describe("createLazyRequests", () => {
         cellIds: [cellId("cell1")],
         codes: ["code"],
       });
-      await lazyRequests.sendDeleteCell({ cellId: cellId("cell2") });
       await lazyRequests.sendInstantiate({
         objectIds: [uiElementId("obj1")],
         values: [],
@@ -328,7 +326,7 @@ describe("createLazyRequests", () => {
 
       // Init should only be called once
       expect(mockInit).toHaveBeenCalledTimes(1);
-      expect(mockGetRuntimeManager).toHaveBeenCalledTimes(3);
+      expect(mockGetRuntimeManager).toHaveBeenCalledTimes(2);
     });
   });
 });

package/src/core/network/connection-notice.ts

@@ -6,7 +6,7 @@ import {
   type ConnectionPhase,
   WebSocketClosedReason,
   ConnectionState,
-} from "@/core/websocket/types";
+} from "@/core/session/types";
 import { connectionAtom } from "./connection";
 
 export interface ConnectionNotice {

package/src/core/network/connection.ts

@@ -4,7 +4,7 @@ import { atomWithReducer } from "jotai/utils";
 import type { NotificationMessageData } from "../kernel/messages";
 import { isNotebookPage } from "../mode";
 import { waitFor } from "../state/jotai";
-import { type ConnectionStatus, ConnectionState } from "../websocket/types";
+import { type ConnectionStatus, ConnectionState } from "../session/types";
 
 /**
  * Shared application state, not the actual event-stream status.

package/src/core/network/requests-lazy.ts

@@ -7,7 +7,7 @@ import { memoizeLastValue } from "@/utils/once";
 import { waitForKernelToBeInstantiated } from "../kernel/state";
 import type { RuntimeManager } from "../runtime/runtime";
 import { store } from "../state/jotai";
-import { ConnectionState } from "../websocket/types";
+import { ConnectionState } from "../session/types";
 import { connectionAtom, waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
@@ -52,10 +52,8 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   sendModelValue: "startConnection",
   sendInstantiate: "startConnectionWithoutKernel",
   sendRun: "startConnection",
-  sendDeleteCell: "startConnection",
   sendRunScratchpad: "startConnection",
   saveAppConfig: "startConnection",
-  saveCellConfig: "startConnection",
   discoverDataSources: "startConnection",
 
   // Export operations start a connection
@@ -144,7 +142,6 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   downloadStorage: "waitForConnectionOpen",
 
   // Sync operations that wait for connection
-  sendDocumentTransaction: "waitForConnectionOpen",
   sendCodeCompletionRequest: "waitForConnectionOpen",
 };
 

package/src/core/network/requests-network.ts

@@ -70,15 +70,6 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
-    sendDocumentTransaction: async (request) => {
-      await waitForConnectionOpen();
-      return getClient()
-        .POST("/api/document/transaction", {
-          body: request,
-          params: getParams(),
-        })
-        .then(handleResponseReturnNull);
-    },
     sendRename: (request) => {
       return getClient()
         .POST("/api/kernel/rename", {
@@ -151,14 +142,6 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
-    sendDeleteCell: (request) => {
-      return getClient()
-        .POST("/api/kernel/delete", {
-          body: request,
-          params: getParams(),
-        })
-        .then(handleResponseReturnNull);
-    },
     sendCodeCompletionRequest: async (request) => {
       await waitForConnectionOpen();
       return getClient()
@@ -184,14 +167,6 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
-    saveCellConfig: (request) => {
-      return getClient()
-        .POST("/api/kernel/set_cell_config", {
-          body: request,
-          params: getParams(),
-        })
-        .then(handleResponseReturnNull);
-    },
     sendFunctionRequest: (request) => {
       return getClient()
         .POST("/api/kernel/function_call", {

package/src/core/network/requests-static.ts

@@ -40,7 +40,6 @@ export function createStaticRequests(): EditRequests & RunRequests {
       return null;
     },
     sendRestart: throwNotInEditMode,
-    sendDocumentTransaction: throwNotInEditMode,
     sendRun: throwNotInEditMode,
     sendRunScratchpad: throwNotInEditMode,
     sendRename: throwNotInEditMode,
@@ -49,11 +48,9 @@ export function createStaticRequests(): EditRequests & RunRequests {
     sendInterrupt: throwNotInEditMode,
     sendShutdown: throwNotInEditMode,
     sendFormat: throwNotInEditMode,
-    sendDeleteCell: throwNotInEditMode,
     sendCodeCompletionRequest: throwNotInEditMode,
     saveUserConfig: throwNotInEditMode,
     saveAppConfig: throwNotInEditMode,
-    saveCellConfig: throwNotInEditMode,
     sendStdin: throwNotInEditMode,
     readCode: throwNotInEditMode,
     readSnippets: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -21,7 +21,6 @@ export function createErrorToastingRequests(
     sendInstantiate: "Failed to instantiate",
     sendFunctionRequest: "Failed to send function request",
     sendRestart: "Failed to restart",
-    sendDocumentTransaction: "Failed to sync document transaction",
     sendRun: "Failed to run",
     sendRunScratchpad: "Failed to run scratchpad",
     sendRename: "Failed to rename",
@@ -30,11 +29,9 @@ export function createErrorToastingRequests(
     sendInterrupt: "Failed to interrupt",
     sendShutdown: "Failed to shutdown",
     sendFormat: "Failed to format",
-    sendDeleteCell: "Failed to delete cell",
     sendCodeCompletionRequest: "Failed to complete code",
     saveUserConfig: "Failed to save user config",
     saveAppConfig: "Failed to save app config",
-    saveCellConfig: "Failed to save cell config",
     sendStdin: "Failed to send stdin",
     readCode: "Failed to read code",
     readSnippets: "Failed to fetch snippets",

package/src/core/network/types.ts

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { components, paths } from "@marimo-team/marimo-api";
-import type { CellId } from "../cells/ids";
 
 export type schemas = components["schemas"];
 export type AiCompletionRequest = schemas["AiCompletionRequest"];
@@ -16,7 +15,6 @@ export type CellConfig = schemas["CellConfig"];
  */
 export type RuntimeState = schemas["CellNotification"]["status"];
 export type CodeCompletionRequest = schemas["CodeCompletionRequest"];
-export type DeleteCellRequest = schemas["DeleteCellRequest"];
 export type AutoExportAsIPYNBRequest = schemas["AutoExportAsIPYNBRequest"];
 export type AutoExportAsMarkdownRequest =
   schemas["AutoExportAsMarkdownRequest"];
@@ -101,9 +99,6 @@ export type SaveNotebookRequest = schemas["SaveNotebookRequest"];
 export type CopyNotebookRequest = schemas["CopyNotebookRequest"];
 export type SaveUserConfigurationRequest =
   schemas["SaveUserConfigurationRequest"];
-export interface SetCellConfigRequest {
-  configs: Record<CellId, Partial<CellConfig>>;
-}
 /**
  * Client-side shape for creating a file/directory/notebook. The HTTP
  * transport sends this as multipart/form-data; the WASM bridge base64-encodes
@@ -117,8 +112,6 @@ export interface FileCreateInput {
 }
 export type UpdateUIElementRequest = schemas["UpdateUIElementRequest"];
 export type ModelRequest = schemas["ModelRequest"];
-export type NotebookDocumentTransactionRequest =
-  schemas["NotebookDocumentTransactionRequest"];
 export type UpdateUserConfigRequest = schemas["UpdateUserConfigRequest"];
 export type ShutdownSessionRequest = schemas["ShutdownSessionRequest"];
 export type Snippet = schemas["Snippet"];
@@ -173,15 +166,10 @@ export interface EditRequests {
   sendInterrupt: () => Promise<null>;
   sendShutdown: () => Promise<null>;
   sendFormat: (request: FormatCellsRequest) => Promise<FormatResponse>;
-  sendDeleteCell: (request: DeleteCellRequest) => Promise<null>;
   sendCodeCompletionRequest: (request: CodeCompletionRequest) => Promise<null>;
   saveUserConfig: (request: SaveUserConfigurationRequest) => Promise<null>;
   saveAppConfig: (request: SaveAppConfigurationRequest) => Promise<null>;
-  saveCellConfig: (request: SetCellConfigRequest) => Promise<null>;
   sendRestart: () => Promise<null>;
-  sendDocumentTransaction: (
-    request: NotebookDocumentTransactionRequest,
-  ) => Promise<null>;
   sendInstallMissingPackages: (
     request: InstallPackagesRequest,
   ) => Promise<null>;

package/src/core/network/useConnectionNotice.ts

@@ -17,11 +17,17 @@ export function useConnectionNotice(
   const notice = useAtomValue(connectionNoticeAtom);
   const connected = useAtomValue(isConnectedAtom);
   const elapsed = useDelayElapsed(notice?.pending ? delayMs : 0);
-  const [previous, setPrevious] = useState<ConnectionNotice | null>(null);
+  const [previous, setPrevious] = useState<ConnectionNotice | null>(
+    elapsed ? notice : null,
+  );
+
+  const visibleNotice = elapsed ? notice : null;
+  if ((notice || !connected) && previous !== visibleNotice) {
+    setPrevious(visibleNotice);
+  }
 
   useEffect(() => {
     if (notice || !connected) {
-      setPrevious(elapsed ? notice : null);
       return;
     }
     const timeout = setTimeout(() => setPrevious(null), 1500);

package/src/core/notebook/__tests__/operations.test.ts

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { NotebookOutput } from "@marimo-team/client/protocol";
+import { atom, createStore } from "jotai";
+import { describe, expect, it } from "vitest";
+import { partial } from "@/__mocks__/partial";
+import { kioskModeAtom } from "@/core/mode";
+import type { NotebookReplica } from "@/core/notebook/replica";
+import { activeNotebookReplicaAtom } from "@/core/session/active-notebook";
+import { canEditAtom, notebookOperationsAtom } from "../operations";
+
+function connect(
+  store: ReturnType<typeof createStore>,
+  operations: readonly string[] | null,
+) {
+  const notebook =
+    operations === null
+      ? null
+      : ({ id: "nb", operations } as unknown as NotebookOutput);
+  store.set(
+    activeNotebookReplicaAtom,
+    partial<NotebookReplica>({ notebookAtom: atom(notebook) }, "replica"),
+  );
+}
+
+describe("notebook operations", () => {
+  it("advertises nothing until the notebook is ready", () => {
+    const store = createStore();
+    expect(store.get(notebookOperationsAtom)).toEqual([]);
+    expect(store.get(canEditAtom)).toBe(false);
+    connect(store, null);
+    expect(store.get(canEditAtom)).toBe(false);
+  });
+
+  it("allows editing when the host lists notebook.edit", () => {
+    const store = createStore();
+    connect(store, ["notebook.edit", "runtime.run"]);
+    expect(store.get(canEditAtom)).toBe(true);
+    connect(store, ["runtime.run"]);
+    expect(store.get(canEditAtom)).toBe(false);
+  });
+
+  it("withholds editing from a kiosk connection", () => {
+    const store = createStore();
+    connect(store, ["notebook.edit"]);
+    store.set(kioskModeAtom, true);
+    expect(store.get(canEditAtom)).toBe(false);
+    store.set(kioskModeAtom, false);
+    expect(store.get(canEditAtom)).toBe(true);
+  });
+});

package/src/core/notebook/attachments.ts

@@ -0,0 +1,38 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { dequal } from "dequal";
+import { atom, useAtomValue } from "jotai";
+import { selectAtom } from "jotai/vanilla/utils";
+import { useMemo } from "react";
+import type { Attachment } from "@marimo-team/client/protocol";
+import { activeNotebookReplicaAtom } from "../session/active-notebook";
+
+export type { Attachment } from "@marimo-team/client/protocol";
+
+const EMPTY_ATTACHMENTS: readonly Attachment[] = [];
+
+/** Attachments visible to this session, empty while no notebook is available. */
+export const notebookAttachmentsAtom = atom((get) => {
+  const replica = get(activeNotebookReplicaAtom);
+  return replica ? get(replica.attachmentsAtom) : EMPTY_ATTACHMENTS;
+});
+
+/** Current notebook attachments, optionally restricted to one kind. */
+export function useNotebookAttachments(kind?: Attachment["kind"]) {
+  const attachments = useMemo(
+    () =>
+      kind === undefined
+        ? notebookAttachmentsAtom
+        : selectAtom(
+            notebookAttachmentsAtom,
+            (value) => value.filter((attachment) => attachment.kind === kind),
+            dequal,
+          ),
+    [kind],
+  );
+  return useAtomValue(attachments);
+}
+
+export function attachmentLabel(attachment: Attachment): string {
+  return attachment.name || "Agent";
+}