@marimo-team/islands 0.24.3-dev5 → 0.24.3-dev52

package/src/components/editor/output/json-output/pagination.ts

@@ -0,0 +1,155 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { isPlainObject } from "lodash-es";
+
+export const PAGE_SIZE = 30;
+
+interface Page {
+  path: string;
+  remaining: number;
+}
+
+interface Options {
+  limits: Record<string, number>;
+  pageSize: number;
+}
+
+export function paginateJson(data: object, { limits, pageSize }: Options) {
+  const originals = new WeakMap<object, object>();
+  const pages = new Map<symbol, Page>();
+
+  function visit(node: object, path: string[]): object {
+    if (!Array.isArray(node) && !isPlainObject(node)) {
+      return node;
+    }
+    const pathKey = JSON.stringify(path);
+    const limit = limits[pathKey] ?? pageSize;
+    const keys = Array.isArray(node)
+      ? Array.from({ length: Math.min(node.length, limit) }, (_, i) =>
+          String(i),
+        )
+      : Object.keys(node).slice(0, limit);
+    const count = Array.isArray(node) ? node.length : Object.keys(node).length;
+    const result: object = Array.isArray(node) ? [] : Object.create(null);
+    originals.set(result, node);
+
+    for (const key of keys) {
+      // Materialize only the branches the viewer reads, including after expansion.
+      Object.defineProperty(result, key, {
+        enumerable: true,
+        configurable: true,
+        get() {
+          const original: unknown = Reflect.get(node, key);
+          const value =
+            original !== null && typeof original === "object"
+              ? visit(original, [...path, key])
+              : original;
+          Object.defineProperty(result, key, {
+            value,
+            enumerable: true,
+            configurable: true,
+          });
+          return value;
+        },
+      });
+    }
+    if (count > limit) {
+      const marker = Symbol("show more");
+      pages.set(marker, { remaining: count - limit, path: pathKey });
+      let key = Array.isArray(node) ? String(limit) : "";
+      while (Object.hasOwn(result, key)) {
+        key += "\0";
+      }
+      Object.defineProperty(result, key, { value: marker, enumerable: true });
+    }
+    return result;
+  }
+
+  return {
+    data: visit(data, []),
+    getOriginal(value: unknown): unknown {
+      return value !== null && typeof value === "object"
+        ? (originals.get(value) ?? value)
+        : value;
+    },
+    getPage(value: unknown): Page | undefined {
+      return typeof value === "symbol" ? pages.get(value) : undefined;
+    },
+  };
+}
+
+export function estimateExpandedLines(
+  node: unknown,
+  cap: number,
+  depth = 0,
+): number {
+  if (
+    depth > 4 ||
+    node === null ||
+    node === undefined ||
+    typeof node !== "object"
+  ) {
+    return 1;
+  }
+  const children: unknown[] = Array.isArray(node) ? node : Object.values(node);
+  let lines = 0;
+  for (let i = 0; i < children.length && lines < cap; i++) {
+    const child = children[i];
+    if (child === null || child === undefined || typeof child !== "object") {
+      lines++;
+    } else {
+      const childLen = Array.isArray(child)
+        ? child.length
+        : Object.keys(child).length;
+      lines +=
+        childLen <= 8
+          ? estimateExpandedLines(child, cap - lines, depth + 1)
+          : 1;
+    }
+  }
+  return lines;
+}
+
+export function shouldExpandNode(
+  _isExpanded: boolean,
+  { value, level }: { value?: object; level: number },
+): boolean {
+  if (level <= 1) {
+    return true;
+  }
+  if (level > 5) {
+    return false;
+  }
+  if (value === null || value === undefined || typeof value !== "object") {
+    return true;
+  }
+  const len = Array.isArray(value) ? value.length : Object.keys(value).length;
+  if (len === 0) {
+    return true;
+  }
+  if (len > 200) {
+    return false;
+  }
+  return estimateExpandedLines(value, 150) <= 120;
+}
+
+export function determineMaxDisplayLength(data: unknown): number | undefined {
+  if (!Array.isArray(data)) {
+    return undefined;
+  }
+  const sample = data.slice(0, 15);
+  let maxLength = 0;
+  for (const el of sample) {
+    if (Array.isArray(el)) {
+      for (const next of el.slice(0, 5)) {
+        if (Array.isArray(next)) {
+          return 5;
+        }
+      }
+      maxLength = Math.max(maxLength, el.length);
+    }
+  }
+  if (maxLength <= 20) {
+    return undefined;
+  }
+  return maxLength >= 50 ? 5 : 10;
+}

package/src/components/editor/output/json-output/renderers.tsx

@@ -0,0 +1,196 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useState } from "react";
+import type { OutputMessage } from "@/core/kernel/messages";
+import { isUrl } from "@/utils/urls";
+import { OutputRenderer } from "../../Output";
+import { HtmlOutput } from "../HtmlOutput";
+import { ImageOutput } from "../ImageOutput";
+import { JsonOutput } from "../JsonOutput";
+import { VideoOutput } from "../VideoOutput";
+import {
+  decodePythonKey,
+  formatTuplePayload,
+  formatSetPayload,
+  formatFrozensetPayload,
+  splitLeaf,
+} from "./formatting";
+
+export const COLLAPSED_TEXT_LENGTH = 100;
+
+// Keep long text and quotes wrapping together.
+/* oxlint-disable jsx-a11y/prefer-tag-over-role */
+const CollapsibleTextOutput: React.FC<{ text: string }> = ({ text }) => {
+  const [collapsed, setCollapsed] = useState(true);
+  if (text.length <= COLLAPSED_TEXT_LENGTH) {
+    return <span className="break-all">{text}</span>;
+  }
+  return (
+    <span
+      className="cursor-pointer hover:opacity-90 break-all"
+      role="button"
+      tabIndex={0}
+      aria-expanded={!collapsed}
+      onClick={() => setCollapsed(!collapsed)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setCollapsed(!collapsed);
+        }
+      }}
+    >
+      {collapsed ? `${text.slice(0, COLLAPSED_TEXT_LENGTH)}...` : text}
+    </span>
+  );
+};
+
+/* oxlint-enable jsx-a11y/prefer-tag-over-role */
+
+type LeafRenderer = (
+  data: string,
+  mimeType: OutputMessage["mimetype"],
+) => React.ReactNode;
+
+const LEAF_RENDERERS: Record<string, LeafRenderer> = {
+  "image/": (v) => <ImageOutput src={v} />,
+  "video/": (v) => <VideoOutput src={v} />,
+  "text/html:": (v) => (
+    <HtmlOutput html={v} inline={true} alwaysSanitizeHtml={false} />
+  ),
+  "text/markdown:": (v) => (
+    <HtmlOutput html={v} inline={true} alwaysSanitizeHtml={true} />
+  ),
+  "text/plain+float:": (v) => <span>{v}</span>,
+  "text/plain+bigint:": (v) => <span>{v}</span>,
+  "text/plain+set:": (v) => <span>{formatSetPayload(v)}</span>,
+  "text/plain+frozenset:": (v) => <span>{formatFrozensetPayload(v)}</span>,
+  "text/plain+tuple:": (v) => <span>{formatTuplePayload(v)}</span>,
+  "text/plain:": (v) => <CollapsibleTextOutput text={v} />,
+  "application/json:": (v) => <JsonOutput data={JSON.parse(v)} />,
+  "application/": (v, mime) => (
+    <OutputRenderer
+      message={{ channel: "output", data: v, mimetype: mime }}
+      renderFallback={() => (
+        <span>
+          {mime}:{v}
+        </span>
+      )}
+    />
+  ),
+};
+
+function tryRenderMimeLeaf(value: string): React.ReactNode | null {
+  for (const prefix of Object.keys(LEAF_RENDERERS)) {
+    if (value.startsWith(prefix)) {
+      const [data, mime] = splitLeaf(value);
+      return mime
+        ? LEAF_RENDERERS[prefix](data, mime as OutputMessage["mimetype"])
+        : null;
+    }
+  }
+  return null;
+}
+
+interface KeyRenderResult {
+  keyName?: string | number;
+}
+
+export function renderKeyName(
+  props: Record<string, unknown>,
+  { keyName }: KeyRenderResult,
+): React.ReactNode {
+  const decoded = decodePythonKey(keyName);
+  if (!decoded) {
+    return undefined;
+  }
+  return <span {...props}>{decoded.text}</span>;
+}
+
+export function renderKeyQuote(
+  _props: Record<string, unknown>,
+  { keyName }: KeyRenderResult,
+): React.ReactNode {
+  // The viewer treats null/undefined as a request for its default quotes.
+  return decodePythonKey(keyName)?.quoted === false ? <span /> : undefined;
+}
+
+export interface RenderResult {
+  type: string;
+  value?: unknown;
+}
+
+export function renderStringValue(
+  _props: React.HTMLAttributes<HTMLSpanElement>,
+  result: RenderResult,
+  mode: "python" | "json",
+): React.ReactNode {
+  if (result.type !== "value" || typeof result.value !== "string") {
+    return undefined;
+  }
+  const { value } = result;
+  if (mode !== "python") {
+    return renderPlainString(value);
+  }
+
+  const mimeResult = tryRenderMimeLeaf(value);
+  if (mimeResult !== null) {
+    return <span className="w-rjv-value">{mimeResult}</span>;
+  }
+  if (isUrl(value)) {
+    return (
+      <span className="w-rjv-value">
+        <a
+          href={value}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-link hover:underline"
+        >
+          {value}
+        </a>
+      </span>
+    );
+  }
+  return renderPlainString(value);
+}
+
+function renderPlainString(value: string) {
+  if (value.length <= COLLAPSED_TEXT_LENGTH) {
+    return undefined;
+  }
+  return (
+    <span
+      className="inline-block"
+      style={{ color: "var(--w-rjv-type-string-color)" }}
+    >
+      &quot;
+      <CollapsibleTextOutput text={value} />
+      &quot;
+    </span>
+  );
+}
+
+export function renderArrow(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  { keyName }: KeyRenderResult,
+): React.ReactNode {
+  // alpha.43's data-expanded is inverted and omits initial collapse rules.
+  // NestedOpen's transform reflects the effective state.
+  const expanded = props.style?.transform === "rotate(0deg)";
+  return (
+    <button
+      {...props}
+      type="button"
+      aria-label={`${expanded ? "Collapse" : "Expand"} ${keyName ?? "root"}`}
+      aria-expanded={expanded}
+    />
+  );
+}
+
+function renderLiteral(text: string) {
+  return (_props: Record<string, unknown>, { type }: RenderResult) =>
+    type === "value" ? <span className="w-rjv-value">{text}</span> : undefined;
+}
+
+export const PYTHON_TRUE_RENDER = renderLiteral("True");
+export const PYTHON_FALSE_RENDER = renderLiteral("False");
+export const PYTHON_NULL_RENDER = renderLiteral("None");
+export const JSON_NULL_RENDER = renderLiteral("null");

package/src/components/editor/output/json-output/themes.ts

@@ -0,0 +1,52 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type React from "react";
+
+type ViewerStyle = React.CSSProperties & Record<`--w-rjv-${string}`, string>;
+
+const BASE_THEME: ViewerStyle = {
+  fontSize: "var(--text-xs, .75rem)",
+  lineHeight: "var(--text-xs--line-height, 1rem)",
+  "--w-rjv-font-family": "monospace",
+  "--w-rjv-background-color": "transparent",
+  "--w-rjv-key-string": "var(--w-rjv-color)",
+  "--w-rjv-arrow-color": "var(--w-rjv-color)",
+  "--w-rjv-curlybraces-color": "var(--w-rjv-color)",
+  "--w-rjv-colon-color": "var(--w-rjv-color)",
+  "--w-rjv-brackets-color": "var(--w-rjv-color)",
+  "--w-rjv-quotes-color": "var(--w-rjv-color)",
+  "--w-rjv-ellipsis-color": "var(--w-rjv-type-string-color)",
+  "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
+  "--w-rjv-type-bigint-color": "var(--w-rjv-type-int-color)",
+  "--w-rjv-type-url-color": "var(--link)",
+  "--w-rjv-type-nan-color": "var(--w-rjv-type-null-color)",
+};
+
+export const marimoLightTheme: ViewerStyle = {
+  ...BASE_THEME,
+  "--w-rjv-color": "#002b36",
+  "--w-rjv-key-number": "#6c71c4",
+  "--w-rjv-line-color": "rgb(235, 235, 235)",
+  "--w-rjv-info-color": "rgba(0, 0, 0, 0.3)",
+  "--w-rjv-type-string-color": "#cb4b16",
+  "--w-rjv-type-int-color": "#268bd2",
+  "--w-rjv-type-float-color": "#859900",
+  "--w-rjv-type-boolean-color": "#2aa198",
+  "--w-rjv-type-date-color": "#586e75",
+  "--w-rjv-type-null-color": "#d33682",
+  "--w-rjv-type-undefined-color": "#586e75",
+};
+
+export const marimoDarkTheme: ViewerStyle = {
+  ...BASE_THEME,
+  "--w-rjv-color": "#f8f8f8",
+  "--w-rjv-key-number": "#86c1b9",
+  "--w-rjv-line-color": "#383838",
+  "--w-rjv-info-color": "#b8b8b8",
+  "--w-rjv-type-string-color": "#dc9656",
+  "--w-rjv-type-int-color": "#a16946",
+  "--w-rjv-type-float-color": "#a1b56c",
+  "--w-rjv-type-boolean-color": "#ba8baf",
+  "--w-rjv-type-date-color": "#7cafc2",
+  "--w-rjv-type-null-color": "#ab4642",
+  "--w-rjv-type-undefined-color": "#d8d8d8",
+};

package/src/components/editor/renderers/cell-array.tsx

@@ -43,10 +43,7 @@ import type { AppMode } from "../../../core/mode";
 import { useHotkey } from "../../../hooks/useHotkey";
 import { type Theme, useTheme } from "../../../theme/useTheme";
 import { AddCellWithAI } from "../ai/add-cell-with-ai";
-import {
-  ConnectingAlert,
-  NotStartedConnectionAlert,
-} from "../alerts/connecting-alert";
+import { NotStartedConnectionAlert } from "../alerts/connecting-alert";
 import { FloatingOutline } from "../chrome/panels/outline/floating-outline";
 import { useChromeActions } from "../chrome/state";
 import { Column } from "../columns/cell-column";
@@ -140,7 +137,6 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
       <PackageAlert />
       <StartupLogsAlert />
       <StdinBlockingAlert />
-      <ConnectingAlert />
       <NotebookBanner width={appConfig.width} />
       {/* Only show if not cells, otherwise running a single cell will start the connection */}
       {cellIds.idLength === 0 && <NotStartedConnectionAlert />}

package/src/components/home/components.tsx

@@ -31,6 +31,7 @@ import {
 import { Constants } from "@/core/constants";
 import { useRequestClient } from "@/core/network/requests";
 import type { TutorialId } from "@/core/network/types";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import { openNotebook } from "@/utils/links";
 import { Objects } from "@/utils/objects";
 import { MarimoPlusIcon } from "../icons/marimo-icons";
@@ -186,6 +187,22 @@ export const ResourceLinks: React.FC = () => {
   );
 };
 
+/**
+ * Shown when the workspace scan stopped early, so the file list the user is
+ * looking at is missing files and folders.
+ */
+export const TruncatedWorkspaceBanner: React.FC<{
+  fileCount: number | undefined;
+}> = ({ fileCount }) => {
+  return (
+    <Banner kind="warn" className="rounded p-4">
+      Showing {fileCount} files. Some files and folders were skipped because
+      your workspace is large or deeply nested. Start marimo from a subfolder to
+      see them.
+    </Banner>
+  );
+};
+
 export const Header: React.FC<{
   Icon: React.FC<React.SVGProps<SVGSVGElement>>;
   control?: React.ReactNode;

package/src/components/pages/gallery-page.tsx

@@ -4,6 +4,7 @@ import { SearchIcon } from "lucide-react";
 import type React from "react";
 import { Suspense, useMemo, useState } from "react";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
+import { TruncatedWorkspaceBanner } from "@/components/home/components";
 import { Spinner } from "@/components/icons/spinner";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -119,10 +120,7 @@ const GalleryPage: React.FC = () => {
         <ErrorBoundary>
           <div className="flex flex-col gap-2">
             {workspace.hasMore && (
-              <Banner kind="warn" className="rounded p-4">
-                Showing first {workspace.fileCount} files. Your workspace has
-                more files.
-              </Banner>
+              <TruncatedWorkspaceBanner fileCount={workspace.fileCount} />
             )}
             {formattedFiles.length > SEARCH_THRESHOLD && (
               <Input

package/src/components/pages/home-page.tsx

@@ -67,6 +67,7 @@ import {
   Header,
   OpenTutorialDropDown,
   ResourceLinks,
+  TruncatedWorkspaceBanner,
 } from "../home/components";
 import {
   expandedFoldersAtom,
@@ -196,10 +197,7 @@ const WorkspaceNotebooks: React.FC<{ onRefreshRecents: () => void }> = ({
     <WorkspaceContext value={workspaceContextValue}>
       <div className="flex flex-col gap-2">
         {workspace.hasMore && (
-          <Banner kind="warn" className="rounded p-4">
-            Showing first {workspace.fileCount} files. Your workspace has more
-            files.
-          </Banner>
+          <TruncatedWorkspaceBanner fileCount={workspace.fileCount} />
         )}
         <Header
           Icon={BookTextIcon}

package/src/components/slides/slide-form.tsx

@@ -427,6 +427,7 @@ export const SlideSidebar = ({
   const [isConfigOpen, setIsConfigOpen] = useAtom(slideConfigOpenAtom);
 
   return (
+    // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Prevent slide navigation while using controls in the sidebar.
     <aside
       className="h-full flex flex-col border-l border-border/60 bg-muted/20 transition-[width] duration-200 ease-out overflow-hidden"
       style={{

package/src/components/slides/slide-notes-editor.tsx

@@ -89,6 +89,7 @@ export const SlideNotesEditor = ({
   };
 
   return (
+    // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Prevent slide navigation while editing speaker notes.
     <section
       className={cn(
         "h-full min-h-0 flex flex-col bg-muted/40 dark:bg-muted/20 border-t",

package/src/components/terminal/terminal.tsx

@@ -254,7 +254,9 @@ const TerminalComponent: React.FC<TerminalComponentProps> = ({
       try {
         await waitForConnectionOpen();
 
-        const socket = new WebSocket(runtimeManager.getTerminalWsURL());
+        // Size the PTY before the shell draws its first prompt.
+        fitAddon.fit();
+        const socket = new WebSocket(runtimeManager.getTerminalWsURL(terminal));
         const attachAddon = new AttachAddon(socket);
         terminal.loadAddon(attachAddon);
         wsRef.current = socket;
@@ -270,9 +272,7 @@ const TerminalComponent: React.FC<TerminalComponentProps> = ({
 
         const handleOpen = () => {
           updateReadyState();
-          // Send initial dimensions: the mount-time fit() may have fired
-          // before the WS was OPEN, dropping the resize message and leaving
-          // the PTY at its default 0x0 winsize.
+          // The container may have resized while the connection was opening.
           fitAddon.fit();
           if (terminal.cols > 0 && terminal.rows > 0) {
             socket.send(

package/src/components/tracing/tracing-spec.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { TopLevelSpec } from "vega-lite";
-import type { TimeUnit } from "vega-typings";
+import type { TimeUnit } from "vega-lite/types_unstable/timeunit.js";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRun } from "@/core/cells/runs";
 import type { ResolvedTheme } from "@/theme/useTheme";

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto scrollbar-thin flex-1 print:overflow-hidden">
+  <div className="w-full overflow-auto overscroll-contain scrollbar-thin flex-1 print:overflow-hidden">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

package/src/components/ui/use-toast.ts

@@ -161,6 +161,14 @@ function dispatch(action: Action) {
   });
 }
 
+export function clearToasts() {
+  for (const timeout of toastTimeouts.values()) {
+    clearTimeout(timeout);
+  }
+  toastTimeouts.clear();
+  dispatch({ type: "REMOVE_TOAST" });
+}
+
 type Toast = Omit<ToasterToast, "id">;
 
 function toast({

package/src/core/MarimoApp.tsx

@@ -12,7 +12,6 @@ import { getInitialAppMode } from "@/core/mode";
 import { CssVariables } from "@/theme/ThemeProvider";
 import { reactLazyWithPreload } from "@/utils/lazy";
 import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
-import { KernelStartupErrorModal } from "../components/editor/KernelStartupErrorModal";
 import { TracebackModalContainer } from "../components/editor/TracebackModalContainer";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
@@ -105,7 +104,6 @@ const Providers = memo(({ children }: PropsWithChildren) => {
                 {children}
                 <Toaster />
                 <TailwindIndicator />
-                <KernelStartupErrorModal />
                 <TracebackModalContainer />
               </ModalProvider>
             </LocaleProvider>