@marimo-team/frontend 0.23.7-dev5 → 0.23.7-dev51

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -11,7 +11,10 @@ import type {
   NotificationMessageData,
   NotificationPayload,
 } from "@/core/kernel/messages";
-import { useConnectionTransport } from "@/core/websocket/useWebSocket";
+import {
+  MAX_RETRIES,
+  useConnectionTransport,
+} from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   handleWidgetMessage,
@@ -69,10 +72,96 @@ import { useStorageActions } from "../storage/state";
 import { useVariablesActions } from "../variables/state";
 import type { VariableName } from "../variables/types";
 import { isWasm } from "../wasm/utils";
-import { WebSocketClosedReason, WebSocketState } from "./types";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "./types";
 
 const SUPPORTS_LAZY_KERNELS = true;
 
+export type CloseDecision =
+  | { kind: "terminal"; status: ConnectionStatus; closeTransport: boolean }
+  | { kind: "gave-up"; status: ConnectionStatus }
+  | { kind: "retry"; status: ConnectionStatus };
+
+export function classifyCloseEvent(
+  event: { reason?: string },
+  context: { retryCount: number; maxRetries: number },
+): CloseDecision {
+  switch (event.reason) {
+    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 "MARIMO_WRONG_KERNEL_ID":
+    case "MARIMO_NO_FILE_KEY":
+    case "MARIMO_NO_SESSION_ID":
+    case "MARIMO_NO_SESSION":
+    case "MARIMO_SHUTDOWN":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+          reason: "kernel not found",
+        },
+        closeTransport: true,
+      };
+    case "MARIMO_MALFORMED_QUERY":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.MALFORMED_QUERY,
+          reason:
+            "the kernel did not recognize a request; please file a bug with marimo",
+        },
+        closeTransport: false,
+      };
+    case "MARIMO_KERNEL_STARTUP_ERROR":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+          reason: "Failed to start kernel sandbox",
+        },
+        closeTransport: true,
+      };
+    default:
+      // Empty/undefined reasons are normal transient closes. Anything else is
+      // an unknown server reason; warn so a new MARIMO_* reason doesn't fall
+      // silently into the retry path.
+      if (event.reason) {
+        logNever(event.reason as never);
+      }
+  }
+  // partysocket stops retrying silently once `maxRetries` is hit; surface
+  // CLOSED so callers can detect the give-up.
+  if (context.retryCount >= context.maxRetries) {
+    return {
+      kind: "gave-up",
+      status: {
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      },
+    };
+  }
+  return {
+    kind: "retry",
+    status: { state: WebSocketState.CONNECTING },
+  };
+}
+
 function getExistingCells(): CellData[] | undefined {
   if (!SUPPORTS_LAZY_KERNELS) {
     return undefined;
@@ -340,6 +429,30 @@ export function useMarimoKernelConnection(opts: {
     }
   };
 
+  // Manual reconnect. Probes /health first to fail fast when the runtime
+  // is unreachable, instead of waiting on partysocket's retry budget.
+  const reconnect = async () => {
+    if (
+      ws.readyState === WebSocket.OPEN ||
+      ws.readyState === WebSocket.CONNECTING
+    ) {
+      return;
+    }
+    shouldTryReconnecting.current = true;
+    setConnection({ state: WebSocketState.CONNECTING });
+    const healthy = await runtimeManager.isHealthy();
+    if (!healthy) {
+      shouldTryReconnecting.current = false;
+      setConnection({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      });
+      return;
+    }
+    ws.reconnect();
+  };
+
   const ws = useConnectionTransport({
     static: isStaticNotebook(),
     /**
@@ -399,58 +512,20 @@ export function useMarimoKernelConnection(opts: {
      */
     onClose: (e) => {
       Logger.warn("WebSocket closed", e.code, e.reason);
-      switch (e.reason) {
-        case "MARIMO_ALREADY_CONNECTED":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.ALREADY_RUNNING,
-            reason: "another browser tab is already connected to the kernel",
-            canTakeover: true,
-          });
-          ws.close(); // close to prevent reconnecting
-          return;
-
-        case "MARIMO_WRONG_KERNEL_ID":
-        case "MARIMO_NO_FILE_KEY":
-        case "MARIMO_NO_SESSION_ID":
-        case "MARIMO_NO_SESSION":
-        case "MARIMO_SHUTDOWN":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-            reason: "kernel not found",
-          });
-          ws.close(); // close to prevent reconnecting
-          return;
-
-        case "MARIMO_MALFORMED_QUERY":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.MALFORMED_QUERY,
-            reason:
-              "the kernel did not recognize a request; please file a bug with marimo",
-          });
-          return;
-
-        default:
-          // Check for kernel startup error (full error already received via message)
-          if (e.reason === "MARIMO_KERNEL_STARTUP_ERROR") {
-            setConnection({
-              state: WebSocketState.CLOSED,
-              code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
-              reason: "Failed to start kernel sandbox",
-            });
-            ws.close(); // prevent reconnecting
-            return;
-          }
-
-          // Session should be valid
-          // - browser tab might have been closed or re-opened
-          // - computer might have just woken from sleep
-          //
-          // so try reconnecting.
-          setConnection({ state: WebSocketState.CONNECTING });
-          tryReconnecting(e.code, e.reason);
+      const decision = classifyCloseEvent(e, {
+        retryCount: ws.retryCount,
+        maxRetries: MAX_RETRIES,
+      });
+      setConnection(decision.status);
+      if (decision.kind === "terminal" && decision.closeTransport) {
+        ws.close(); // close to prevent reconnecting
+        return;
+      }
+      if (decision.kind === "retry") {
+        // Session should be valid
+        // - browser tab might have been closed or re-opened
+        // - computer might have just woken from sleep
+        tryReconnecting(e.code, e.reason);
       }
     },
 
@@ -468,5 +543,5 @@ export function useMarimoKernelConnection(opts: {
     },
   });
 
-  return { connection };
+  return { connection, reconnect };
 }

package/src/core/websocket/useWebSocket.tsx

@@ -18,6 +18,10 @@ interface UseConnectionTransportOptions {
   onError: (event: WebSocketEventMap["error"]) => void;
 }
 
+// Per-`reconnect()` retry budget for partysocket. After exhaustion, partysocket
+// stops silently; treat `retryCount >= MAX_RETRIES` as the give-up signal.
+export const MAX_RETRIES = 10;
+
 function createConnectionTransport(
   options: Pick<UseConnectionTransportOptions, "url" | "static">,
 ): IConnectionTransport {
@@ -33,8 +37,7 @@ function createConnectionTransport(
   // Cast needed: ReconnectingWebSocket types readyState as `number`
   // but IConnectionTransport expects `0 | 1 | 2 | 3`
   return new ReconnectingWebSocket(urlProvider, undefined, {
-    // We don't want Infinity retries
-    maxRetries: 10,
+    maxRetries: MAX_RETRIES,
     debug: false,
     startClosed: true,
     // long timeout -- the server can become slow when many notebooks

package/src/css/app/Cell.css

@@ -73,6 +73,16 @@
     }
   }
 
+  /* Styling for cells marked for cut */
+  &.pending-cut {
+    .output-area,
+    .cm-gutters,
+    .cm {
+      background-color: var(--gray-2);
+      opacity: 0.55;
+    }
+  }
+
   &:focus-within {
     z-index: 20;
   }

package/src/plugins/core/__test__/sanitize.test.ts

@@ -557,4 +557,34 @@ describe("sanitizeHtml", () => {
     const html = "<some-custom-element>Content</some-custom-element>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(`"Content"`);
   });
+
+  // DOMPurify SAFE_FOR_XML strips attribute values containing `]>`, `-->`,
+  // `--!>`, or `</(style|script|...)`. `_build_attr` JSON-escapes `<`/`>`
+  // (`<`/`>`) before HTML-escaping so the parsed attribute value
+  // never matches. These tests pin that contract.
+  test("preserves data-* attribute with JSON-escaped ]> payload", () => {
+    const html =
+      "<marimo-table data-data='[{&quot;x&quot;:&quot;]&#92;u003e&quot;}]'></marimo-table>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-table data-data="[{&quot;x&quot;:&quot;]\\u003e&quot;}]"></marimo-table>"`,
+    );
+  });
+
+  test("preserves data-* attribute with JSON-escaped </script> payload", () => {
+    const html =
+      "<marimo-table data-data='[{&quot;x&quot;:&quot;&#92;u003c/script&#92;u003e&quot;}]'></marimo-table>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-table data-data="[{&quot;x&quot;:&quot;\\u003c/script\\u003e&quot;}]"></marimo-table>"`,
+    );
+  });
+
+  // Regression sentinel: confirms DOMPurify still strips an UN-escaped `]>`,
+  // which is precisely the condition `_build_attr` exists to prevent.
+  test("strips data-* attribute when raw ]> leaks through", () => {
+    const html =
+      "<marimo-table data-data='[{&quot;x&quot;:&quot;]&gt;&quot;}]'></marimo-table>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-table></marimo-table>"`,
+    );
+  });
 });

package/src/plugins/impl/DataTablePlugin.tsx

@@ -194,6 +194,7 @@ interface Data<T> {
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
+  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -220,6 +221,7 @@ type DataTableFunctions = {
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
+    size_bytes?: number | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -270,6 +272,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
+      sizeBytes: z.number().nullish(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
@@ -327,6 +330,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
           raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
+          size_bytes: z.number().nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -532,6 +536,7 @@ export const LoadingDataTableComponent = memo(
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
+      sizeBytes?: number | null;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -548,6 +553,7 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
+      let sizeBytes = props.sizeBytes ?? null;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -591,6 +597,7 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
+        sizeBytes = searchResults.size_bytes ?? null;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -603,6 +610,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -614,6 +622,7 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
+      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -728,6 +737,7 @@ export const LoadingDataTableComponent = memo(
         setFilters={setFilters}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
+        sizeBytes={data?.sizeBytes ?? props.sizeBytes ?? null}
         paginationState={paginationState}
         setPaginationState={setPaginationState}
         cellStyles={data?.cellStyles ?? props.cellStyles}
@@ -774,6 +784,7 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  sizeBytes,
   maxColumns,
   pagination,
   selection,
@@ -1053,6 +1064,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            sizeBytes={sizeBytes}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}

package/src/plugins/impl/DropdownPlugin.tsx

@@ -13,6 +13,7 @@ interface Data {
   allowSelectNone: boolean;
   fullWidth: boolean;
   searchable: boolean;
+  disabled: boolean;
 }
 
 export class DropdownPlugin implements IPlugin<string[], Data> {
@@ -25,6 +26,7 @@ export class DropdownPlugin implements IPlugin<string[], Data> {
     allowSelectNone: z.boolean(),
     fullWidth: z.boolean().default(false),
     searchable: z.boolean().default(false),
+    disabled: z.boolean().default(false),
   });
 
   render(props: IPluginProps<string[], Data>): JSX.Element {
@@ -61,7 +63,15 @@ interface DropdownProps extends Data {
 const EMPTY_VALUE = "--";
 
 const Dropdown = (props: DropdownProps): JSX.Element => {
-  const { label, options, value, setValue, allowSelectNone, fullWidth } = props;
+  const {
+    label,
+    options,
+    value,
+    setValue,
+    allowSelectNone,
+    fullWidth,
+    disabled,
+  } = props;
 
   const id = useId();
 
@@ -85,6 +95,7 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
         })}
         value={singleValue}
         id={id}
+        disabled={disabled}
       >
         {allowSelectNone ? (
           <option value={EMPTY_VALUE} selected={value.length === 0}>

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -14,6 +14,7 @@ interface Data {
   options: string[];
   fullWidth: boolean;
   maxSelections?: number | undefined;
+  disabled: boolean;
 }
 
 type T = string[];
@@ -27,6 +28,7 @@ export class MultiselectPlugin implements IPlugin<T, Data> {
     options: z.array(z.string()),
     fullWidth: z.boolean().default(false),
     maxSelections: z.number().optional(),
+    disabled: z.boolean().default(false),
   });
 
   render(props: IPluginProps<string[], Data>): JSX.Element {
@@ -63,6 +65,7 @@ export const Multiselect = ({
   setValue,
   fullWidth,
   maxSelections,
+  disabled,
 }: MultiselectProps): JSX.Element => {
   const id = useId();
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -199,6 +202,7 @@ export const Multiselect = ({
         shouldFilter={false}
         search={searchQuery}
         onSearchChange={setSearchQuery}
+        disabled={disabled}
       >
         {renderList()}
       </Combobox>

package/src/plugins/impl/SearchableSelect.tsx

@@ -13,12 +13,21 @@ interface SearchableSelectProps {
   label: string | null;
   allowSelectNone: boolean;
   fullWidth: boolean;
+  disabled: boolean;
 }
 
 const NONE_KEY = "__none__";
 
 export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
-  const { options, value, setValue, label, allowSelectNone, fullWidth } = props;
+  const {
+    options,
+    value,
+    setValue,
+    label,
+    allowSelectNone,
+    fullWidth,
+    disabled,
+  } = props;
   const id = useId();
   const [searchQuery, setSearchQuery] = useState<string>("");
 
@@ -113,6 +122,7 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
         shouldFilter={false}
         search={searchQuery}
         onSearchChange={setSearchQuery}
+        disabled={disabled}
         data-testid="marimo-plugin-searchable-dropdown"
       >
         {renderList()}

package/src/plugins/impl/TabsPlugin.tsx

@@ -7,6 +7,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components/ui/tabs";
+import { cn } from "../../utils/cn";
 import { renderHTML } from "../core/RenderHTML";
 import type { IPlugin, IPluginProps } from "../types";
 import { Labeled } from "./common/labeled";
@@ -17,6 +18,7 @@ interface Data {
    */
   tabs: string[];
   label: string | null;
+  orientation: "horizontal" | "vertical";
 }
 
 // Selected tab index
@@ -28,6 +30,7 @@ export class TabsPlugin implements IPlugin<T, Data> {
   validator = z.object({
     tabs: z.array(z.string()),
     label: z.string().nullable(),
+    orientation: z.enum(["horizontal", "vertical"]).default("horizontal"),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -51,6 +54,7 @@ interface TabComponentProps extends Data {
 const TabComponent = ({
   tabs,
   label,
+  orientation,
   value,
   setValue,
   children,
@@ -70,19 +74,43 @@ const TabComponent = ({
     setInternalValue(value);
   }
 
+  const isVertical = orientation === "vertical";
+  const childArray =
+    children == null ? [] : Array.isArray(children) ? children : [children];
+
   return (
-    <Labeled label={label} align="top">
-      <Tabs value={internalValue} onValueChange={handleChange}>
-        <TabsList>
+    <Labeled label={label} align="top" fullWidth={true}>
+      <Tabs
+        value={internalValue}
+        onValueChange={handleChange}
+        orientation={orientation}
+        className={cn(isVertical && "flex flex-row gap-3")}
+      >
+        <TabsList
+          className={cn(
+            "scrollbar-thin",
+            isVertical
+              ? "flex flex-col items-stretch justify-start h-auto max-h-none shrink-0 min-w-[10rem] overflow-y-auto"
+              : "max-w-full overflow-x-auto justify-start",
+          )}
+        >
           {tabs.map((tab, index) => (
-            <TabsTrigger key={index} value={index.toString()}>
+            <TabsTrigger
+              key={index}
+              value={index.toString()}
+              className={cn(isVertical && "w-full justify-start")}
+            >
               {renderHTML({ html: tab })}
             </TabsTrigger>
           ))}
         </TabsList>
-        {React.Children.map(children, (child, index) => {
-          return <TabsContent value={index.toString()}>{child}</TabsContent>;
-        })}
+        <div className={cn(isVertical && "flex-1 min-w-0")}>
+          {childArray.map((child, index) => (
+            <TabsContent key={index} value={index.toString()}>
+              {child}
+            </TabsContent>
+          ))}
+        </div>
       </Tabs>
     </Labeled>
   );

package/src/plugins/impl/__tests__/DropdownPlugin.test.tsx

@@ -36,6 +36,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: true,
           initialValue: [],
+          disabled: false,
         },
         value: [],
         setValue: vi.fn(),
@@ -48,6 +49,58 @@ describe("DropdownPlugin", () => {
       ).toBeInTheDocument();
     });
 
+    it("renders disabled native select when disabled is true", () => {
+      const plugin = new DropdownPlugin();
+      const host = document.createElement("div");
+      const props: IPluginProps<
+        string[],
+        z.infer<(typeof plugin)["validator"]>
+      > = {
+        data: {
+          label: "Test Label",
+          options: ["Option 1", "Option 2"],
+          allowSelectNone: false,
+          fullWidth: false,
+          searchable: false,
+          disabled: true,
+          initialValue: [],
+        },
+        value: [],
+        setValue: vi.fn(),
+        host,
+        functions: {},
+      };
+      render(plugin.render(props));
+      expect(screen.getByTestId("marimo-plugin-dropdown")).toBeDisabled();
+    });
+
+    it("renders disabled searchable combobox with aria-disabled", () => {
+      const plugin = new DropdownPlugin();
+      const host = document.createElement("div");
+      const props: IPluginProps<
+        string[],
+        z.infer<(typeof plugin)["validator"]>
+      > = {
+        data: {
+          label: "Test Label",
+          options: ["Option 1", "Option 2"],
+          allowSelectNone: false,
+          fullWidth: false,
+          searchable: true,
+          disabled: true,
+          initialValue: [],
+        },
+        value: [],
+        setValue: vi.fn(),
+        host,
+        functions: {},
+      };
+      render(plugin.render(props));
+      const trigger = screen.getByTestId("marimo-plugin-searchable-dropdown")
+        .firstChild as HTMLElement;
+      expect(trigger).toHaveAttribute("aria-disabled", "true");
+    });
+
     it("renders default dropdown when searchable is false", () => {
       const plugin = new DropdownPlugin();
       const host = document.createElement("div");
@@ -62,6 +115,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: false,
           initialValue: [],
+          disabled: false,
         },
         value: [],
         setValue: vi.fn(),
@@ -87,6 +141,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: true,
           initialValue: [],
+          disabled: false,
         },
         value: [],
         setValue,
@@ -129,6 +184,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: true,
           initialValue: [],
+          disabled: false,
         },
         value: ["Apple"],
         setValue,