@marimo-team/frontend 0.23.9-dev8 → 0.23.10-dev0

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -82,7 +82,6 @@ const SUPPORTS_LAZY_KERNELS = true;
 // (marimo/_server/api/endpoints/ws_endpoint.py and ws/*.py). Keep in sync with
 // the backend literals.
 export type CloseReason =
-  | "MARIMO_ALREADY_CONNECTED"
   | "MARIMO_WRONG_KERNEL_ID"
   | "MARIMO_NO_FILE_KEY"
   | "MARIMO_NO_SESSION_ID"
@@ -99,17 +98,6 @@ export type CloseDecision =
 
 export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
   switch (event.reason as CloseReason | undefined) {
-    case "MARIMO_ALREADY_CONNECTED":
-      return {
-        kind: "terminal",
-        status: {
-          state: WebSocketState.CLOSED,
-          code: WebSocketClosedReason.ALREADY_RUNNING,
-          reason: "another browser tab is already connected to the kernel",
-          canTakeover: true,
-        },
-        closeTransport: true,
-      };
     case TRANSPORT_EXHAUSTED_REASON:
       return {
         kind: "gave-up",
@@ -421,6 +409,9 @@ export function useMarimoKernelConnection(opts: {
       case "notebook-document-transaction":
         handleDocumentTransaction(msg.data.transaction);
         return;
+      case "consumer-capabilities":
+        setKioskMode(!msg.data.consumer_capabilities.edit);
+        return;
       default:
         logNever(msg.data);
     }

package/src/css/app/Cell.css

@@ -214,7 +214,6 @@
   &.error-outline,
   &.error-outline:focus-within {
     box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--error), transparent 80%);
-    background-color: var(--red-2);
   }
 
   /* Needs Run */

package/src/plugins/impl/DataTablePlugin.tsx

@@ -8,6 +8,7 @@ import type {
   PaginationState,
   RowSelectionState,
   SortingState,
+  Table as TanstackTable,
 } from "@tanstack/react-table";
 import { Provider, useAtomValue } from "jotai";
 import { Table2Icon } from "lucide-react";
@@ -1040,6 +1041,52 @@ const DataTableComponent = ({
   const isInVscode = isInVscodeExtension();
   const isIslandsMode = isIslands();
 
+  const renderTableExplorerPanel = useMemo(() => {
+    if (!isAnyPanelOpen || !(showRowExplorer || canShowColumnExplorer)) {
+      return undefined;
+    }
+    return (table: TanstackTable<unknown>) => (
+      <ContextAwarePanelItem>
+        <TableExplorerPanel
+          rowIdx={viewedRowIdx}
+          setRowIdx={setViewedRow}
+          totalRows={totalRows}
+          fieldTypes={memoizedUnclampedFieldTypes}
+          getRow={getRow}
+          isSelectable={isSelectable}
+          isRowSelected={Boolean(rowSelection[viewedRowIdx])}
+          handleRowSelectionChange={handleRowSelectionChange}
+          previewColumn={preview_column}
+          totalColumns={totalColumns}
+          tableId={id}
+          table={table}
+          showRowExplorer={showRowExplorer && !isInVscode}
+          showColumnExplorer={canShowColumnExplorer && !isInVscode}
+          activeTab={panelType}
+          onTabChange={setPanelType}
+        />
+      </ContextAwarePanelItem>
+    );
+  }, [
+    isAnyPanelOpen,
+    showRowExplorer,
+    canShowColumnExplorer,
+    viewedRowIdx,
+    setViewedRow,
+    totalRows,
+    memoizedUnclampedFieldTypes,
+    getRow,
+    isSelectable,
+    rowSelection,
+    handleRowSelectionChange,
+    preview_column,
+    totalColumns,
+    id,
+    isInVscode,
+    panelType,
+    setPanelType,
+  ]);
+
   return (
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
@@ -1065,28 +1112,6 @@ const DataTableComponent = ({
         </Banner>
       )}
 
-      {isAnyPanelOpen && (showRowExplorer || canShowColumnExplorer) && (
-        <ContextAwarePanelItem>
-          <TableExplorerPanel
-            rowIdx={viewedRowIdx}
-            setRowIdx={setViewedRow}
-            totalRows={totalRows}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            getRow={getRow}
-            isSelectable={isSelectable}
-            isRowSelected={Boolean(rowSelection[viewedRowIdx])}
-            handleRowSelectionChange={handleRowSelectionChange}
-            previewColumn={preview_column}
-            totalColumns={totalColumns}
-            tableId={id}
-            showRowExplorer={showRowExplorer && !isInVscode}
-            showColumnExplorer={canShowColumnExplorer && !isInVscode}
-            activeTab={panelType}
-            onTabChange={setPanelType}
-          />
-        </ContextAwarePanelItem>
-      )}
-
       <ColumnChartContext value={chartSpecModel}>
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
@@ -1143,6 +1168,7 @@ const DataTableComponent = ({
             isAnyPanelOpen={isAnyPanelOpen}
             viewedRowIdx={viewedRowIdx}
             onViewedRowChange={(rowIdx) => setViewedRowIdx(rowIdx)}
+            renderTableExplorerPanel={renderTableExplorerPanel}
           />
         </Labeled>
       </ColumnChartContext>

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -6,7 +6,7 @@ import { z } from "zod";
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import { Arrays } from "@/utils/arrays";
-import type { SendMessageRequest } from "./types";
+import type { CancelPromptRequest, SendMessageRequest } from "./types";
 
 const LazyChatbot = React.lazy(() =>
   import("./chat-ui").then((m) => ({ default: m.Chatbot })),
@@ -18,6 +18,7 @@ export type PluginFunctions = {
   delete_chat_history: (req: {}) => Promise<null>;
   delete_chat_message: (req: { index: number }) => Promise<null>;
   send_prompt: (req: SendMessageRequest) => Promise<unknown>;
+  cancel_prompt: (req: CancelPromptRequest) => Promise<null>;
 };
 
 const messageSchema = z.array(
@@ -65,11 +66,15 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
     send_prompt: rpc
       .input(
         z.object({
+          request_id: z.string(),
           messages: messageSchema,
           config: configSchema,
         }),
       )
       .output(z.unknown()),
+    cancel_prompt: rpc
+      .input(z.object({ request_id: z.string() }))
+      .output(z.null()),
   })
   .renderer((props) => (
     <Suspense>
@@ -84,6 +89,7 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
         delete_chat_history={props.functions.delete_chat_history}
         delete_chat_message={props.functions.delete_chat_message}
         send_prompt={props.functions.send_prompt}
+        cancel_prompt={props.functions.cancel_prompt}
         value={props.value?.messages || Arrays.EMPTY}
         setValue={(messages) => props.setValue({ messages })}
         host={props.host}

package/src/plugins/impl/chat/__tests__/chat-ui.test.ts

@@ -0,0 +1,278 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessageChunk } from "ai";
+import { describe, expect, it, vi } from "vitest";
+import { routeIncomingChatChunk } from "../chat-ui";
+
+/**
+ * The stale-chunk filter prevents chunks from an aborted run from being enqueued into a new run's stream.
+ *
+ * It triggers when:
+ *   1. User sends a prompt (request_id = OLD), kernel starts emitting chunks
+ *   2. User clicks Stop — frontend tears down its controller, fires cancel_prompt
+ *   3. Kernel hasn't received the cancel yet and is still emitting chunks
+ *   4. User sends a new prompt (request_id = NEW), new controller opens
+ *   5. Late chunks tagged OLD arrive after NEW's controller is in place
+ */
+
+const makeChunk = (opts: {
+  messageId: string;
+  content: unknown;
+  isFinal?: boolean;
+}): Parameters<typeof routeIncomingChatChunk>[0] => ({
+  type: "stream_chunk",
+  message_id: opts.messageId,
+  content: opts.content as UIMessageChunk | null,
+  is_final: opts.isFinal ?? false,
+});
+
+const makeRefs = () => ({
+  controllerRef: {
+    current: null as ReadableStreamDefaultController<UIMessageChunk> | null,
+  },
+  activeRequestIdRef: { current: null as string | null },
+});
+
+const makeMockController = () => {
+  return {
+    enqueue: vi.fn(),
+    close: vi.fn(),
+    error: vi.fn(),
+    desiredSize: 0,
+  } as unknown as ReadableStreamDefaultController<UIMessageChunk> & {
+    enqueue: ReturnType<typeof vi.fn>;
+    close: ReturnType<typeof vi.fn>;
+  };
+};
+
+describe("routeIncomingChatChunk", () => {
+  it("drops chunks when there is no active controller", () => {
+    const refs = makeRefs();
+
+    const result = routeIncomingChatChunk(
+      makeChunk({
+        messageId: "req-A",
+        content: { type: "text-delta", id: "t1", delta: "hi" },
+      }),
+      refs,
+    );
+
+    expect(result).toBe("dropped-no-controller");
+  });
+
+  it("enqueues chunks that match the active request_id", () => {
+    const refs = makeRefs();
+    const controller = makeMockController();
+    refs.controllerRef.current = controller;
+    refs.activeRequestIdRef.current = "req-A";
+
+    const chunk = { type: "text-delta", id: "t1", delta: "hi" } as const;
+    const result = routeIncomingChatChunk(
+      makeChunk({ messageId: "req-A", content: chunk }),
+      refs,
+    );
+
+    expect(result).toBe("enqueued");
+    expect(controller.enqueue).toHaveBeenCalledWith(chunk);
+    expect(controller.close).not.toHaveBeenCalled();
+  });
+
+  it("closes the controller and clears refs on is_final", () => {
+    const refs = makeRefs();
+    const controller = makeMockController();
+    refs.controllerRef.current = controller;
+    refs.activeRequestIdRef.current = "req-A";
+
+    const result = routeIncomingChatChunk(
+      makeChunk({ messageId: "req-A", content: null, isFinal: true }),
+      refs,
+    );
+
+    expect(result).toBe("closed");
+    expect(controller.close).toHaveBeenCalledTimes(1);
+    expect(refs.controllerRef.current).toBeNull();
+    expect(refs.activeRequestIdRef.current).toBeNull();
+  });
+
+  it("drops chunks whose message_id does not match the active run", () => {
+    // Simulates the bug: kernel hasn't received cancel for OLD yet but the
+    // user has already started a NEW run. A reasoning-delta for OLD arrives
+    // here; it must not be enqueued into NEW's stream.
+    const refs = makeRefs();
+    const controller = makeMockController();
+    refs.controllerRef.current = controller;
+    refs.activeRequestIdRef.current = "req-NEW";
+
+    const staleChunk = {
+      type: "reasoning-delta",
+      id: "r-old",
+      delta: "...",
+    } as const;
+    const result = routeIncomingChatChunk(
+      makeChunk({ messageId: "req-OLD", content: staleChunk }),
+      refs,
+    );
+
+    expect(result).toBe("dropped-stale");
+    expect(controller.enqueue).not.toHaveBeenCalled();
+    expect(controller.close).not.toHaveBeenCalled();
+    expect(refs.activeRequestIdRef.current).toBe("req-NEW");
+  });
+
+  it("drops is_final from a stale run without closing the active stream", () => {
+    // Belt-and-suspenders: an `is_final` for OLD that races in after NEW
+    // started must not tear down NEW's controller.
+    const refs = makeRefs();
+    const controller = makeMockController();
+    refs.controllerRef.current = controller;
+    refs.activeRequestIdRef.current = "req-NEW";
+
+    const result = routeIncomingChatChunk(
+      makeChunk({ messageId: "req-OLD", content: null, isFinal: true }),
+      refs,
+    );
+
+    expect(result).toBe("dropped-stale");
+    expect(controller.close).not.toHaveBeenCalled();
+    expect(refs.controllerRef.current).toBe(controller);
+    expect(refs.activeRequestIdRef.current).toBe("req-NEW");
+  });
+
+  it("forwards reasoning-start/delta/end sequences when ids match", () => {
+    // Walks the canonical happy path for a reasoning stream end-to-end.
+    const refs = makeRefs();
+    const controller = makeMockController();
+    refs.controllerRef.current = controller;
+    refs.activeRequestIdRef.current = "req-A";
+
+    const sequence = [
+      { type: "reasoning-start", id: "r1" },
+      { type: "reasoning-delta", id: "r1", delta: "thinking" },
+      { type: "reasoning-end", id: "r1" },
+    ] as const;
+    for (const chunk of sequence) {
+      const result = routeIncomingChatChunk(
+        makeChunk({ messageId: "req-A", content: chunk }),
+        refs,
+      );
+      expect(result).toBe("enqueued");
+    }
+
+    expect(controller.enqueue).toHaveBeenCalledTimes(3);
+    expect(controller.enqueue).toHaveBeenNthCalledWith(1, sequence[0]);
+    expect(controller.enqueue).toHaveBeenNthCalledWith(2, sequence[1]);
+    expect(controller.enqueue).toHaveBeenNthCalledWith(3, sequence[2]);
+  });
+
+  it(
+    "drops stale reasoning-delta after Stop → new run sequence " +
+      "(regression for missing reasoning part error)",
+    () => {
+      // Full scenario: A runs, A is stopped, B starts, A's late chunk arrives.
+      const refs = makeRefs();
+
+      // 1. Run A starts: controller A active.
+      const controllerA = makeMockController();
+      refs.controllerRef.current = controllerA;
+      refs.activeRequestIdRef.current = "req-A";
+
+      // First reasoning chunks for A flow through.
+      routeIncomingChatChunk(
+        makeChunk({
+          messageId: "req-A",
+          content: { type: "reasoning-start", id: "rA" },
+        }),
+        refs,
+      );
+      routeIncomingChatChunk(
+        makeChunk({
+          messageId: "req-A",
+          content: {
+            type: "reasoning-delta",
+            id: "rA",
+            delta: "thinking",
+          },
+        }),
+        refs,
+      );
+      expect(controllerA.enqueue).toHaveBeenCalledTimes(2);
+
+      // 2. User clicks Stop: abort handler clears refs (simulated).
+      refs.controllerRef.current = null;
+      refs.activeRequestIdRef.current = null;
+
+      // A late chunk for A arrives in this window — must be a no-op.
+      const between = routeIncomingChatChunk(
+        makeChunk({
+          messageId: "req-A",
+          content: {
+            type: "reasoning-delta",
+            id: "rA",
+            delta: "leftover",
+          },
+        }),
+        refs,
+      );
+      expect(between).toBe("dropped-no-controller");
+
+      // 3. User sends Run B: new controller, new active id.
+      const controllerB = makeMockController();
+      refs.controllerRef.current = controllerB;
+      refs.activeRequestIdRef.current = "req-B";
+
+      // 4. Another late chunk for A arrives AFTER B opened. This is the
+      // case that previously threw `Received reasoning-delta for missing
+      // reasoning part with ID "rA"` in the SDK parser.
+      const stale = routeIncomingChatChunk(
+        makeChunk({
+          messageId: "req-A",
+          content: {
+            type: "reasoning-delta",
+            id: "rA",
+            delta: "still leaking",
+          },
+        }),
+        refs,
+      );
+      expect(stale).toBe("dropped-stale");
+      expect(controllerB.enqueue).not.toHaveBeenCalled();
+
+      // 5. B's own chunks flow normally.
+      routeIncomingChatChunk(
+        makeChunk({
+          messageId: "req-B",
+          content: { type: "reasoning-start", id: "rB" },
+        }),
+        refs,
+      );
+      routeIncomingChatChunk(
+        makeChunk({
+          messageId: "req-B",
+          content: { type: "reasoning-delta", id: "rB", delta: "fresh" },
+        }),
+        refs,
+      );
+      expect(controllerB.enqueue).toHaveBeenCalledTimes(2);
+    },
+  );
+
+  it("enqueues content alongside is_final and then closes", () => {
+    // Sanity: a single chunk that carries both `content` and `is_final` (rare
+    // but legal — backend may bundle final content with the terminator)
+    // should enqueue then close.
+    const refs = makeRefs();
+    const controller = makeMockController();
+    refs.controllerRef.current = controller;
+    refs.activeRequestIdRef.current = "req-A";
+
+    const chunk = { type: "text-delta", id: "t1", delta: "bye" } as const;
+    const result = routeIncomingChatChunk(
+      makeChunk({ messageId: "req-A", content: chunk, isFinal: true }),
+      refs,
+    );
+
+    expect(result).toBe("closed");
+    expect(controller.enqueue).toHaveBeenCalledWith(chunk);
+    expect(controller.close).toHaveBeenCalledTimes(1);
+  });
+});