@marimo-team/islands 0.24.3-dev9 → 0.25.0

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/package-alert.tsx

@@ -14,7 +14,7 @@ import {
   XIcon,
 } from "lucide-react";
 import type React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 import {
@@ -25,19 +25,20 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import {
-  isInstallingPackageAlert,
+  type EnvironmentOperationAlert,
+  isEnvironmentOperationAlert,
   isMissingPackageAlert,
   useAlertActions,
   useAlerts,
 } from "@/core/alerts/state";
 import { useResolvedMarimoConfig } from "@/core/config/config";
-import type { PackageInstallationStatus } from "@/core/kernel/messages";
+import type { PackageOperationStatus } from "@/core/kernel/messages";
 import { useRequestClient } from "@/core/network/requests";
 import { RESTART_REQUIRED_DESCRIPTION } from "@/core/packages/toast-components";
 import { isWasm } from "@/core/wasm/utils";
 import { usePackageMetadata } from "@/hooks/usePackageMetadata";
 import { Banner } from "@/plugins/impl/common/error-banner";
-import { logNever } from "@/utils/assertNever";
+import { assertNever, logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import {
@@ -100,7 +101,7 @@ const SourceBadge: React.FC<{ source?: "kernel" | "server" }> = ({
 };
 
 export const PackageAlert: React.FC = () => {
-  const { packageAlert, packageLogs } = useAlerts();
+  const { packageAlert } = useAlerts();
   const { clearPackageAlert } = useAlertActions();
   const [userConfig] = useResolvedMarimoConfig();
   const [desiredPackageVersions, setDesiredPackageVersions] = useState<
@@ -110,6 +111,23 @@ export const PackageAlert: React.FC = () => {
     Record<string, string[]>
   >({});
 
+  const completedAlertId =
+    packageAlert?.kind === "environment" &&
+    packageAlert.status.kind === "succeeded" &&
+    !packageAlert.restartRequired
+      ? packageAlert.id
+      : null;
+  useEffect(() => {
+    if (completedAlertId === null) {
+      return;
+    }
+    const timeout = setTimeout(
+      () => clearPackageAlert(completedAlertId),
+      10_000,
+    );
+    return () => clearTimeout(timeout);
+  }, [completedAlertId, clearPackageAlert]);
+
   if (packageAlert === null) {
     return null;
   }
@@ -224,12 +242,9 @@ export const PackageAlert: React.FC = () => {
     );
   }
 
-  if (isInstallingPackageAlert(packageAlert)) {
+  if (isEnvironmentOperationAlert(packageAlert)) {
     const { status, title, titleIcon, description } =
-      getInstallationStatusElements(packageAlert.packages);
-    if (status === "installed") {
-      setTimeout(() => clearPackageAlert(packageAlert.id), 10_000);
-    }
+      getOperationStatusElements(packageAlert);
 
     return (
       <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
@@ -255,23 +270,27 @@ export const PackageAlert: React.FC = () => {
           <div
             className={cn(
               "flex flex-col gap-4 justify-between items-start text-muted-foreground text-base",
-              status === "installed" && "text-accent-foreground",
+              status === "succeeded" && "text-accent-foreground",
             )}
           >
             <p>{description}</p>
-            {status !== "installing" &&
-              Object.values(packageAlert.packages).includes(
-                "restart-required",
-              ) && <RestartKernelButton />}
+            {status !== "running" && packageAlert.restartRequired && (
+              <>
+                {status !== "restart-required" && (
+                  <p>{RESTART_REQUIRED_DESCRIPTION}</p>
+                )}
+                <RestartKernelButton />
+              </>
+            )}
             <ul className="list-disc ml-2 mt-1">
               {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
                 <li
                   className={cn(
                     "flex items-center gap-1 font-mono text-sm",
-                    st === "installing" && "font-semibold",
+                    st === "running" && "font-semibold",
                     st === "failed" && "text-destructive",
-                    st === "installed" && "text-accent-foreground",
-                    st === "installed" &&
+                    st === "succeeded" && "text-accent-foreground",
+                    st === "succeeded" &&
                       status === "failed" &&
                       "text-muted-foreground",
                   )}
@@ -282,8 +301,11 @@ export const PackageAlert: React.FC = () => {
                 </li>
               ))}
             </ul>
-            {Object.keys(packageLogs).length > 0 && (
-              <StreamingLogsViewer packageLogs={packageLogs} />
+            {Object.keys(packageAlert.logs).length > 0 && (
+              <StreamingLogsViewer
+                key={packageAlert.id}
+                packageLogs={packageAlert.logs}
+              />
             )}
           </div>
         </Banner>
@@ -295,60 +317,84 @@ export const PackageAlert: React.FC = () => {
   return null;
 };
 
-function getInstallationStatusElements(packages: PackageInstallationStatus) {
-  const statuses = new Set(Object.values(packages));
-  const status =
-    statuses.has("queued") || statuses.has("installing")
-      ? "installing"
-      : statuses.has("failed")
-        ? "failed"
-        : statuses.has("restart-required")
-          ? "restart-required"
-          : "installed";
-
-  if (status === "installing") {
-    return {
-      status: "installing",
-      title: "Installing packages",
-      titleIcon: <DownloadCloudIcon className="w-5 h-5 inline-block mr-2" />,
-      description: "Installing packages:",
-    };
-  }
-  if (status === "restart-required") {
-    return {
-      status,
-      title: "Changes saved — restart required",
-      titleIcon: <RotateCwIcon className="w-5 h-5 inline-block mr-2" />,
-      description: RESTART_REQUIRED_DESCRIPTION,
-    };
-  }
-  if (status === "installed") {
-    return {
-      status: "installed",
-      title: "All packages installed!",
-      titleIcon: <PackageCheckIcon className="w-5 h-5 inline-block mr-2" />,
-      description: "Installed packages:",
-    };
+function getOperationStatusElements({
+  action,
+  status: outcome,
+  restartRequired,
+}: EnvironmentOperationAlert) {
+  const status: EnvironmentOperationAlert["status"] =
+    outcome.kind === "succeeded" && restartRequired
+      ? { kind: "restart-required", reason: RESTART_REQUIRED_DESCRIPTION }
+      : outcome;
+  const titles = {
+    install: {
+      running: "Installing packages",
+      succeeded: "All packages installed!",
+      failed: "Some packages failed to install",
+      cancelled: "Package installation cancelled",
+    },
+    remove: {
+      running: "Removing packages",
+      succeeded: "Packages removed",
+      failed: "Some packages failed to remove",
+      cancelled: "Package removal cancelled",
+    },
+  }[action];
+  switch (status.kind) {
+    case "running":
+      return {
+        status: "running",
+        title: titles.running,
+        titleIcon: <DownloadCloudIcon className="w-5 h-5 inline-block mr-2" />,
+        description:
+          action === "install" ? "Installing packages:" : "Removing packages:",
+      };
+    case "restart-required":
+      return {
+        status: "restart-required",
+        title: "Changes saved — restart required",
+        titleIcon: <RotateCwIcon className="w-5 h-5 inline-block mr-2" />,
+        description: status.reason,
+      };
+    case "succeeded":
+      return {
+        status: "succeeded",
+        title: titles.succeeded,
+        titleIcon: <PackageCheckIcon className="w-5 h-5 inline-block mr-2" />,
+        description:
+          action === "install" ? "Installed packages:" : "Removed packages:",
+      };
+    case "failed":
+      return {
+        status: "failed",
+        title: titles.failed,
+        titleIcon: <PackageXIcon className="w-5 h-5 inline-block mr-2" />,
+        description: status.error,
+      };
+    case "cancelled":
+      return {
+        status: "cancelled",
+        title: titles.cancelled,
+        titleIcon: <XIcon className="w-5 h-5 inline-block mr-2" />,
+        description:
+          "The operation was interrupted. Some packages may have changed.",
+      };
+    default:
+      return assertNever(status);
   }
-  return {
-    status: "failed",
-    title: "Some packages failed to install",
-    titleIcon: <PackageXIcon className="w-5 h-5 inline-block mr-2" />,
-    description: "See error logs.",
-  };
 }
 
 const ProgressIcon = ({
   status,
 }: {
-  status: PackageInstallationStatus[string];
+  status: PackageOperationStatus[string];
 }) => {
   switch (status) {
     case "queued":
       return <BoxIcon size="1rem" />;
-    case "installing":
+    case "running":
       return <DownloadCloudIcon size="1rem" />;
-    case "installed":
+    case "succeeded":
       return <CheckIcon size="1rem" />;
     case "failed":
       return <XIcon size="1rem" />;
@@ -672,7 +718,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
   }
 
   return (
-    <div className="mt-4 border-t border-border pt-4 w-full">
+    <div className="mt-4 border-t border-border pt-4 w-full contain-inline-size">
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
@@ -683,7 +729,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
         ) : (
           <ChevronRightIcon className="w-4 h-4" />
         )}
-        Installation logs
+        Logs
       </button>
 
       {isExpanded && (
@@ -694,7 +740,7 @@ const StreamingLogsViewer: React.FC<StreamingLogsViewerProps> = ({
                 {packageName}
               </h4>
               <div className="border border-border rounded w-full">
-                <pre className="p-3 text-xs font-mono bg-background max-h-64 overflow-y-auto text-muted-foreground whitespace-pre-wrap scrollbar-thin">
+                <pre className="p-3 text-xs font-mono bg-background max-h-64 overflow-auto text-muted-foreground whitespace-pre scrollbar-thin">
                   {logs || "No logs available"}
                 </pre>
               </div>