@marimo-team/islands 0.25.3-dev40 → 0.25.3-dev44

package/src/components/data-table/export-actions.tsx

@@ -761,7 +761,10 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
             const expanded =
               configurableFormat !== null &&
               expandedFormat === configurableFormat;
+            const FormatHeader = configurableFormat ? "button" : "div";
             const panelId = `export-options-${option.format}`;
+            const descriptionId = `${panelId}-description`;
+            const summaryId = `${panelId}-summary`;
             const rowFailure =
               failure?.action.format === option.format ? failure : null;
             const summary =
@@ -802,55 +805,78 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
                 data-testid={`export-row-${option.format}`}
                 className={cn(expanded && "bg-muted/40")}
               >
-                <div className="grid min-h-[60px] grid-cols-[28px_minmax(0,1fr)_auto] items-center gap-x-1 px-2.5 py-2 hover:bg-accent/50">
-                  {configurableFormat ? (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      aria-label={`${optionLabel} options`}
-                      aria-expanded={expanded}
-                      aria-controls={panelId}
-                      onClick={() => toggleExpanded(option.format)}
+                <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center hover:bg-accent/50">
+                  <FormatHeader
+                    type={configurableFormat ? "button" : undefined}
+                    className={cn(
+                      "grid min-h-[60px] min-w-0 grid-cols-[28px_minmax(0,1fr)] items-center gap-x-1 py-2 pl-2.5 pr-1 text-left",
+                      configurableFormat &&
+                        "cursor-pointer focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                    )}
+                    aria-label={
+                      configurableFormat ? `${optionLabel} options` : undefined
+                    }
+                    aria-describedby={
+                      configurableFormat
+                        ? [descriptionId, summary && summaryId]
+                            .filter(Boolean)
+                            .join(" ")
+                        : undefined
+                    }
+                    aria-expanded={configurableFormat ? expanded : undefined}
+                    aria-controls={configurableFormat ? panelId : undefined}
+                    onClick={
+                      configurableFormat
+                        ? () => toggleExpanded(option.format)
+                        : undefined
+                    }
+                  >
+                    <span
+                      aria-hidden={true}
+                      className="inline-flex h-6 w-6 items-center justify-center"
                     >
-                      <ChevronRightIcon
-                        className={cn(
-                          "h-4 w-4 text-muted-foreground transition-transform",
-                          expanded && "rotate-90",
-                        )}
+                      {configurableFormat && (
+                        <ChevronRightIcon
+                          className={cn(
+                            "h-4 w-4 text-muted-foreground transition-transform",
+                            expanded && "rotate-90",
+                          )}
+                        />
+                      )}
+                    </span>
+                    <span className="flex min-w-0 items-center gap-3 pl-1">
+                      <option.icon
+                        aria-hidden={true}
+                        data-testid={`export-format-icon-${option.format}`}
+                        className="h-4 w-4 shrink-0 text-muted-foreground"
                       />
-                    </Button>
-                  ) : (
-                    <span aria-hidden={true} className="h-6 w-6" />
-                  )}
-                  <div className="flex min-w-0 items-center gap-3 pl-1">
-                    <option.icon
-                      aria-hidden={true}
-                      data-testid={`export-format-icon-${option.format}`}
-                      className="h-4 w-4 shrink-0 text-muted-foreground"
-                    />
-                    <div className="grid min-w-0 gap-1">
-                      <span className="flex min-w-0 items-baseline gap-x-2">
-                        <span className="text-sm font-medium leading-tight">
-                          {optionLabel}
-                        </span>
-                        {summary && (
-                          <span
-                            data-testid={`export-summary-${option.format}`}
-                            className="min-w-0 truncate text-xs text-muted-foreground"
-                          >
-                            {summary}
+                      <span className="grid min-w-0 gap-1">
+                        <span className="flex min-w-0 items-baseline gap-x-2">
+                          <span className="text-sm font-medium leading-tight">
+                            {optionLabel}
                           </span>
-                        )}
-                      </span>
-                      <span className="text-xs text-muted-foreground leading-tight">
-                        {option.format === "parquet" && hasGeometry
-                          ? "Parquet with geometry and CRS metadata"
-                          : option.description}
+                          {summary && (
+                            <span
+                              id={summaryId}
+                              data-testid={`export-summary-${option.format}`}
+                              className="min-w-0 truncate text-xs text-muted-foreground"
+                            >
+                              {summary}
+                            </span>
+                          )}
+                        </span>
+                        <span
+                          id={descriptionId}
+                          className="text-xs text-muted-foreground leading-tight"
+                        >
+                          {option.format === "parquet" && hasGeometry
+                            ? "Parquet with geometry and CRS metadata"
+                            : option.description}
+                        </span>
                       </span>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-0.5">
+                    </span>
+                  </FormatHeader>
+                  <div className="flex items-center gap-0.5 pr-2.5">
                     <Tooltip
                       content={
                         option.canDownload

package/src/core/attachments/state.ts

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom } from "jotai";
-import type { Attachment } from "@/core/host/protocol";
+import type { Attachment } from "@marimo-team/client/protocol";
 import { notebookClientAtom } from "@/core/websocket/state";
 
-export type { Attachment } from "@/core/host/protocol";
+export type { Attachment } from "@marimo-team/client/protocol";
 
 export const agentAttachmentsAtom = atom((get) => {
   const notebook = get(notebookClientAtom);

package/src/core/host/AGENTS.md

@@ -1,7 +1,11 @@
 # Host core
 
-Production code may import host modules, `jotai/vanilla`, `zod`, and
-`@/utils/Logger`. Enforced by `marimo/host-imports`. Tests are exempt.
+Production code may import host modules, `@marimo-team/client`,
+`jotai/vanilla`, `zod`, and `@/utils/Logger`. Enforced by
+`marimo/host-imports`. Tests are exempt.
+
+The protocol schemas and types live in `@marimo-team/client/protocol`.
+The native `marimo` event is a marimo extension and is defined in `events.ts`.
 
 Define interfaces here and inject application behavior through adapters.
 

package/src/core/host/__tests__/attachments.test.ts

@@ -2,15 +2,15 @@
 
 import { describe, expect, it } from "vitest";
 import { attachments } from "../resources/attachments";
-import { createStream } from "../stream";
+import { createReducer } from "@marimo-team/client/reducer";
 import { fixtureEvents } from "./fixtures";
 
-const stream = createStream({ attachments });
+const reducer = createReducer({ attachments });
 const snapshot = fixtureEvents("notebook-events.sse");
 const records = snapshot.flatMap((event) =>
   event.event === "attachment" ? [event.data.attachment] : [],
 );
-const confirmed = () => snapshot.reduce(stream.reduce, stream.initial);
+const confirmed = () => snapshot.reduce(reducer.reduce, reducer.initial);
 
 describe("attachment resource", () => {
   it("collects snapshot records, replaces by id, and removes attachments", () => {
@@ -18,7 +18,7 @@ describe("attachment resource", () => {
     expect(state.resources.attachments).toEqual(records);
     const [browser, agent] = records;
     const renamed = { ...agent, name: "Renamed agent" };
-    const updated = stream.reduce(state, {
+    const updated = reducer.reduce(state, {
       event: "attachment",
       id: "98",
       data: { attachment: renamed },
@@ -26,13 +26,13 @@ describe("attachment resource", () => {
     expect(updated.resources.attachments).toEqual([browser, renamed]);
     expect(state.resources.attachments).toEqual(records);
 
-    const removed = stream.reduce(updated, {
+    const removed = reducer.reduce(updated, {
       event: "attachment.removed",
       id: "99",
       data: { id: browser.id, time: "2026-10-01T09:30:00Z" },
     });
     expect(removed.resources.attachments).toEqual([renamed]);
-    const repeated = stream.reduce(removed, {
+    const repeated = reducer.reduce(removed, {
       event: "attachment.removed",
       id: "100",
       data: { id: browser.id, time: "2026-10-01T09:30:00Z" },
@@ -40,10 +40,9 @@ describe("attachment resource", () => {
     expect(repeated.resources.attachments).toBe(removed.resources.attachments);
   });
 
-  it("retains records for replay and rebuilds them after reset", () => {
+  it("rebuilds records after reset", () => {
     const state = confirmed();
-    expect(stream.resume(state)).toBe(state);
-    const reset = stream.reduce(state, { event: "reset", data: {} });
+    const reset = reducer.reduce(state, { event: "reset", data: {} });
     expect(reset.resources.attachments).toEqual([]);
     const replacement = snapshot
       .filter(
@@ -51,7 +50,7 @@ describe("attachment resource", () => {
           event.event !== "attachment" ||
           event.data.attachment.id === records[0].id,
       )
-      .reduce(stream.reduce, reset);
+      .reduce(reducer.reduce, reset);
     expect(replacement.resources.attachments).toEqual([records[0]]);
   });
 });

package/src/core/host/__tests__/document.test.ts

@@ -1,17 +1,20 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
-import type { NotebookEvent } from "../events";
+import type * as Protocol from "@marimo-team/client/protocol";
 import { document } from "../resources/document";
-import { createStream } from "../stream";
+import { createReducer } from "@marimo-team/client/reducer";
 import { fixtureEvents } from "./fixtures";
 
-const stream = createStream({ document });
+const reducer = createReducer({ document });
 const snapshot = fixtureEvents("notebook-events.sse");
 const edits = fixtureEvents("edits.sse");
 
-function replay(events: readonly NotebookEvent[], from = stream.initial) {
-  return events.reduce((state, event) => stream.reduce(state, event), from);
+function replay(
+  events: readonly Protocol.EventOutput[],
+  from = reducer.initial,
+) {
+  return events.reduce((state, event) => reducer.reduce(state, event), from);
 }
 
 const confirmed = () => replay(snapshot);
@@ -33,12 +36,12 @@ describe("document resource", () => {
       confirmed(),
     );
     expect(current(pending)).toEqual(first);
-    const changed = stream.reduce(pending, edit);
+    const changed = reducer.reduce(pending, edit);
     expect(current(changed)?.revision).toEqual(edit.data.document);
     expect([...current(changed)!.cells.keys()].toSorted()).toEqual(
       edit.data.document.order.toSorted(),
     );
-    const saved = current(stream.reduce(changed, save));
+    const saved = current(reducer.reduce(changed, save));
     expect(saved?.revision).toEqual(save.data.document);
     expect(saved?.cells.get("c3")?.code).toBe("x = 22");
     expect(saved?.cells.has("k7f2")).toBe(false);
@@ -55,7 +58,7 @@ describe("document resource", () => {
       order: revision.order.toReversed(),
       version: revision.version + 1,
     };
-    const changed = stream.reduce(state, {
+    const changed = reducer.reduce(state, {
       event: "document",
       data: { document: reordered },
       id: "200",
@@ -66,17 +69,17 @@ describe("document resource", () => {
     });
 
     const empty = { ...revision, order: [] };
-    const opening = stream.reduce(stream.initial, {
+    const opening = reducer.reduce(reducer.initial, {
       event: "document",
       data: { document: empty },
     });
     expect(current(opening)).toBeNull();
     expect(
-      current(stream.reduce(opening, { event: "ready", data: {}, id: "0" })),
+      current(reducer.reduce(opening, { event: "ready", data: {}, id: "0" })),
     ).toEqual({ revision: empty, cells: new Map() });
     expect(
       current(
-        stream.reduce(stream.initial, { event: "ready", data: {}, id: "0" }),
+        reducer.reduce(reducer.initial, { event: "ready", data: {}, id: "0" }),
       ),
     ).toBeNull();
   });
@@ -89,7 +92,6 @@ describe("document resource", () => {
     }
     const partial = replay([cell, removed], state);
     expect(current(partial)).toBe(current(state));
-    expect(stream.resume(partial)).toBe(partial);
     const completed = replay(
       [published, { event: "ready", data: {}, id: "113" }],
       partial,
@@ -98,7 +100,7 @@ describe("document resource", () => {
   });
 
   it("removes a notebook without waiting for individual cell removals", () => {
-    const removed = stream.reduce(confirmed(), {
+    const removed = reducer.reduce(confirmed(), {
       event: "notebook.removed",
       data: { id: "n1", time: "2026-10-01T09:30:00Z" },
       id: "200",
@@ -110,15 +112,15 @@ describe("document resource", () => {
     const state = confirmed();
     const revision = current(state)!.revision;
     expect(() =>
-      stream.reduce(state, {
+      reducer.reduce(state, {
         event: "document",
         data: { document: { ...revision, order: ["missing"] } },
         id: "200",
       }),
     ).toThrow("Document records do not match");
-    const partial = stream.reduce(state, edits[0]);
+    const partial = reducer.reduce(state, edits[0]);
     expect(() =>
-      stream.reduce(partial, { event: "ready", data: {}, id: "200" }),
+      reducer.reduce(partial, { event: "ready", data: {}, id: "200" }),
     ).toThrow("incomplete document update");
   });
 });

package/src/core/host/__tests__/events.test.ts

@@ -1,8 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { describe, expect, it } from "vitest";
+import { describe, expect, expectTypeOf, it } from "vitest";
 import { z } from "zod";
-import { parseNotebookEvent } from "../events";
+import { type NotebookEvent, parseNotebookEvent } from "../events";
 
 describe("notebook messages", () => {
   it("normalizes session and host envelopes for native marimo messages", () => {
@@ -10,6 +10,9 @@ describe("notebook messages", () => {
       op: "variables",
       variables: [{ name: "x", value: Number.NaN }],
     };
+    expectTypeOf<
+      Extract<NotebookEvent, { event: "marimo" }>["data"]["marimo"]
+    >().toBeUnknown();
     const host = { event: "marimo", data: { marimo: notification } };
     expect(parseNotebookEvent({ data: notification })).toEqual(host);
     expect(parseNotebookEvent({ ...host, id: "42" })).toEqual({

package/src/core/host/__tests__/fixtures.ts

@@ -2,7 +2,7 @@
 
 import NodeFs from "node:fs";
 import NodeUrl from "node:url";
-import { parseNotebookEvent, type NotebookEvent } from "../events";
+import * as Protocol from "@marimo-team/client/protocol";
 
 /** Read the protocol's portable examples as transport messages. */
 export function fixtureMessages(name: string) {
@@ -33,7 +33,9 @@ export function fixtureMessages(name: string) {
     });
 }
 
-/** Read the protocol's portable examples as decoded notebook events. */
-export function fixtureEvents(name: string): NotebookEvent[] {
-  return fixtureMessages(name).map(parseNotebookEvent);
+/** Read the protocol's portable examples as decoded protocol events. */
+export function fixtureEvents(name: string): Protocol.EventOutput[] {
+  return fixtureMessages(name).map(({ id, ...message }) =>
+    Protocol.Event.parse(id === undefined ? message : { ...message, id }),
+  );
 }

package/src/core/host/events.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { z } from "zod";
-import * as Protocol from "./protocol";
+import * as Protocol from "@marimo-team/client/protocol";
 
 /**
  * Notebook stream events, including native marimo notifications.
@@ -29,16 +29,29 @@ const knownNames = new Set<string>(
   Protocol.Event.options.flatMap((schema) => schema.shape.event.options),
 );
 
+/**
+ * A native marimo message carried by a host stream.
+ *
+ * The protocol leaves extension events to their producer. The payload is
+ * passed through for the session handler to interpret.
+ */
+const MarimoEvent = z.object({
+  event: z.literal("marimo"),
+  id: z.string().min(1).optional(),
+  data: z.object({ marimo: z.unknown() }),
+});
+
 /** A decoded event, or the name and cursor of an unrecognized event. */
 export type NotebookEvent =
   | Protocol.EventOutput
+  | z.output<typeof MarimoEvent>
   | {
       readonly event: "unknown";
       readonly name: string;
       readonly id?: string;
     };
 
-const sessionEnvelope = z.object({ data: Protocol.MarimoNotification });
+const sessionEnvelope = z.object({ data: z.unknown() });
 
 /**
  * Decode a host event or a legacy `{ data: notification }` session message.
@@ -54,6 +67,9 @@ export function parseNotebookEvent(value: unknown): NotebookEvent {
     };
   }
   const parsed = envelope.parse(value);
+  if (parsed.event === "marimo") {
+    return MarimoEvent.parse(parsed);
+  }
   if (knownNames.has(parsed.event)) {
     return Protocol.Event.parse(parsed);
   }

package/src/core/host/notebook-client.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Logger } from "@/utils/Logger";
+import type { Attachment } from "@marimo-team/client/protocol";
+import { createReducer } from "@marimo-team/client/reducer";
 import { type Atom, atom, type createStore } from "jotai/vanilla";
 import {
   type ConnectionStatus,
@@ -10,11 +12,16 @@ import {
   type NotebookTransport,
   TransportReadyState,
 } from "./connection";
-import { parseNotebookEvent } from "./events";
-import type { Attachment } from "./protocol";
+import { type NotebookEvent, parseNotebookEvent } from "./events";
 import { attachments } from "./resources/attachments";
 import { type Document, document } from "./resources/document";
-import { createStream } from "./stream";
+
+/** Events that may arrive without a cursor after `ready`. */
+const UNCURSORED = new Set<NotebookEvent["event"]>([
+  "reset",
+  "marimo",
+  "unknown",
+]);
 
 /** A connection to a notebook on a marimo host. */
 export interface NotebookClient {
@@ -64,8 +71,8 @@ export function createNotebookClient(store: ReturnType<typeof createStore>) {
     state: ConnectionState.NOT_STARTED,
   });
   // One atom holds the whole stream, which resource atoms derive from.
-  const stream = createStream({ document, attachments });
-  const streamAtom = atom(stream.initial);
+  const reducer = createReducer({ document, attachments });
+  const streamAtom = atom(reducer.initial);
   // A resumed stream is live, but presence waits for this connection's ready.
   const readyAtom = atom(false);
   const documentAtom = atom(
@@ -103,6 +110,8 @@ export function createNotebookClient(store: ReturnType<typeof createStore>) {
     let terminal = false;
     let checkingHealth = false;
     let streamKey: string | undefined;
+    // The id of the last live event. Null before `ready` and after `reset`.
+    let cursor: string | null = null;
     const transport = createTransport(() => {
       if (messageFormat === "session") {
         return url();
@@ -118,15 +127,23 @@ export function createNotebookClient(store: ReturnType<typeof createStore>) {
       identity.searchParams.delete("access_token");
       identity.searchParams.sort();
       const key = identity.toString();
+      const current = store.get(streamAtom);
+      // A live stream keeps its state and resumes from the cursor. An
+      // incomplete snapshot starts over.
       const state =
-        key === streamKey
-          ? stream.resume(store.get(streamAtom))
-          : stream.initial;
+        key !== streamKey
+          ? reducer.initial
+          : current.phase === "snapshot"
+            ? { ...reducer.initial, notebookId: current.notebookId }
+            : current;
+      if (state.phase === "snapshot") {
+        cursor = null;
+      }
       streamKey = key;
       store.set(readyAtom, false);
       store.set(streamAtom, state);
-      if (state.cursor !== null) {
-        next.searchParams.set("cursor", state.cursor);
+      if (cursor !== null) {
+        next.searchParams.set("cursor", cursor);
       }
       return next.toString();
     });
@@ -188,7 +205,22 @@ export function createNotebookClient(store: ReturnType<typeof createStore>) {
       let event;
       try {
         event = parseNotebookEvent(decodeJson(message.data));
-        store.set(streamAtom, stream.reduce(store.get(streamAtom), event));
+        const state = store.get(streamAtom);
+        if (
+          state.phase === "live" &&
+          event.id === undefined &&
+          !UNCURSORED.has(event.event)
+        ) {
+          throw new Error("Live notebook event is missing its cursor");
+        }
+        if (event.event !== "marimo" && event.event !== "unknown") {
+          store.set(streamAtom, reducer.reduce(state, event));
+        }
+        if (event.event === "reset") {
+          cursor = null;
+        } else if (event.event === "ready" || state.phase === "live") {
+          cursor = event.id ?? cursor;
+        }
         if (event.event === "ready" || event.event === "reset") {
           store.set(readyAtom, event.event === "ready");
         }
@@ -198,7 +230,8 @@ export function createNotebookClient(store: ReturnType<typeof createStore>) {
           onMessageError(error);
           return;
         }
-        store.set(streamAtom, stream.initial);
+        store.set(streamAtom, reducer.initial);
+        cursor = null;
         terminal = true;
         setStatus({
           ...disconnected,
@@ -256,7 +289,7 @@ export function createNotebookClient(store: ReturnType<typeof createStore>) {
         transport.removeEventListener("message", onMessage);
         transport.close();
         reconnect = undefined;
-        store.set(streamAtom, stream.initial);
+        store.set(streamAtom, reducer.initial);
         setStatus({ state: ConnectionState.NOT_STARTED });
       },
       { once: true },

package/src/core/host/resources/attachments.ts

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { Attachment } from "../protocol";
-import type { Resource } from "./resource";
+import type { Attachment } from "@marimo-team/client/protocol";
+import type { Resource } from "@marimo-team/client/reducer";
 
 /** Attachment records retained with the stream's resume cursor. */
-export const attachments: Resource<readonly Attachment[]> = {
+export const attachments: Resource<readonly Attachment[], "attachment"> = {
   initial: [],
   on: {
     attachment: (state, { data: { attachment } }) =>

package/src/core/host/resources/document.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type * as Protocol from "../protocol";
-import type { Resource } from "./resource";
+import type * as Protocol from "@marimo-team/client/protocol";
+import type { Resource } from "@marimo-team/client/reducer";
 
 /**
  * The notebook's content at one revision.
@@ -58,7 +58,7 @@ function publish(
   return { current: { revision, cells }, pending: null };
 }
 
-export const document: Resource<DocumentState> = {
+export const document: Resource<DocumentState, "cell" | "document"> = {
   initial: { current: null, pending: null },
   on: {
     cell: (state, { data }) => {

package/src/core/websocket/__tests__/useNotebookSession.hook.test.tsx

@@ -45,7 +45,7 @@ import { notebookAtom } from "@/core/cells/cells";
 import { AppConfigSchema } from "@/core/config/config-schema";
 import { ConnectionNotice } from "@/components/editor/alerts/connection-notice";
 import { kernelStartupErrorAtom } from "@/core/errors/state";
-import type { RunEvent } from "@/core/host/protocol";
+import type { RunEvent } from "@marimo-team/client/protocol";
 import type { NotificationPayload } from "@/core/kernel/messages";
 import { useRuntimeManager } from "@/core/runtime/config";
 import { initialRunCompletedAtom } from "../../kernel/state";