@marimo-team/islands 0.23.7-dev3 → 0.23.7-dev31

package/src/components/chat/tool-call/tool-result.tsx

@@ -0,0 +1,101 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { isEmpty } from "lodash-es";
+import { InfoIcon } from "lucide-react";
+import React from "react";
+import { z } from "zod";
+
+// A value worth rendering: drop null/undefined and empty containers
+// (`{}`, `[]`), but keep meaningful primitives (`0`, `false`, `""`).
+function isUninformative(value: unknown): boolean {
+  if (value == null) {
+    return true;
+  }
+  if (typeof value === "object") {
+    return isEmpty(value);
+  }
+  return false;
+}
+
+// Zod schema matching the Python SuccessResult dataclass
+const SuccessResultSchema = z.looseObject({
+  status: z.string().default("success"),
+  auth_required: z.boolean().default(false),
+  action_url: z.any(),
+  next_steps: z.any(),
+  meta: z.any(),
+  message: z.string().nullish(),
+});
+
+type SuccessResult = z.infer<typeof SuccessResultSchema>;
+
+const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
+  const {
+    status,
+    auth_required,
+    action_url: _action_url,
+    meta: _meta,
+    next_steps: _next_steps,
+    message,
+    ...rest
+  } = data;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-semibold text-muted-foreground">
+          Tool Result
+        </h3>
+        <div className="flex items-center gap-2">
+          <span className="text-xs px-2 py-0.5 bg-(--grass-2) text-(--grass-11) rounded-full font-medium capitalize">
+            {status}
+          </span>
+          {auth_required && (
+            <span className="text-xs px-2 py-0.5 bg-(--amber-2) text-(--amber-11) rounded-full">
+              Auth Required
+            </span>
+          )}
+        </div>
+      </div>
+
+      {message && (
+        <div className="flex items-start gap-2">
+          <InfoIcon className="h-3 w-3 text-(--blue-11) mt-0.5 shrink-0" />
+          <div className="text-xs text-foreground">{message}</div>
+        </div>
+      )}
+
+      {rest && (
+        <div className="space-y-3">
+          {Object.entries(rest).map(([key, value]) => {
+            if (isUninformative(value)) {
+              return null;
+            }
+            return (
+              <div key={key} className="space-y-1.5">
+                <span className="text-xs text-muted-foreground">{key}</span>
+                <pre className="bg-(--slate-2) p-2 text-muted-foreground border border-(--slate-4) rounded text-xs overflow-auto scrollbar-thin max-h-64">
+                  {JSON.stringify(value, null, 2)}
+                </pre>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ResultRenderer: React.FC<{ result: unknown }> = ({ result }) => {
+  const parseResult = SuccessResultSchema.safeParse(result);
+
+  if (parseResult.success) {
+    return <PrettySuccessResult data={parseResult.data} />;
+  }
+
+  return (
+    <div className="text-xs font-medium text-muted-foreground mb-1 max-h-64 overflow-y-auto scrollbar-thin">
+      {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+    </div>
+  );
+};

package/src/components/data-table/TableTopBar.tsx

@@ -34,6 +34,7 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   showTableExplorer?: boolean;
   togglePanel?: (panelType: PanelType) => void;
   isAnyPanelOpen?: boolean;
+  sizeBytes?: number | null;
 }
 
 export const TableTopBar: React.FC<TableTopBarProps> = ({
@@ -48,6 +49,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   togglePanel,
   isAnyPanelOpen,
   downloadAs,
+  sizeBytes,
 }) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
@@ -130,7 +132,9 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             Explore
           </Button>
         )}
-        {downloadAs && <ExportMenu downloadAs={downloadAs} />}
+        {downloadAs && (
+          <ExportMenu downloadAs={downloadAs} sizeBytes={sizeBytes} />
+        )}
       </div>
     </div>
   );

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

@@ -70,6 +70,9 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   setSorting?: OnChangeFn<SortingState>; // controlled sorting
   // Pagination
   totalRows: number | TooManyRows;
+  // JSON-serialized size of the currently-rendered data. Forwarded to
+  // ExportMenu so hosts can size-gate the Export button via downloadSizeLimitAtom.
+  sizeBytes?: number | null;
   totalColumns: number;
   pagination?: boolean;
   manualPagination?: boolean; // server-side pagination
@@ -121,6 +124,7 @@ const DataTableInternal = <TData,>({
   selection,
   totalColumns,
   totalRows,
+  sizeBytes,
   manualSorting = false,
   sorting,
   setSorting,
@@ -309,6 +313,7 @@ const DataTableInternal = <TData,>({
             togglePanel={togglePanel}
             isAnyPanelOpen={isAnyPanelOpen}
             downloadAs={downloadAs}
+            sizeBytes={sizeBytes}
           />
           <Table
             className={cn(

package/src/components/data-table/download-policy/atoms.ts

@@ -0,0 +1,10 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom } from "jotai";
+
+export interface DownloadSizeLimit {
+  limitBytes: number;
+  unavailableMessage: string;
+}
+
+export const downloadSizeLimitAtom = atom<DownloadSizeLimit | null>(null);

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useAtomValue } from "jotai";
 import {
   BracesIcon,
   BrickWallIcon,
@@ -9,6 +10,7 @@ import {
 } from "lucide-react";
 import React from "react";
 import { useLocale } from "react-aria";
+import { downloadSizeLimitAtom } from "./download-policy/atoms";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -84,6 +86,11 @@ export interface ExportActionProps {
     error?: string | null;
     missing_packages?: string[] | null;
   }>;
+  // JSON-serialized size of the currently-rendered data. Used together with
+  // downloadSizeLimitAtom to disable the Export button when a host (e.g.,
+  // marimo-lsp inside VS Code) declares a download size cap. Null/undefined
+  // means "no info" and the gate stays disabled (fail-open).
+  sizeBytes?: number | null;
 }
 
 const labelForDownloadFormat = (format: DownloadFormat): string =>
@@ -94,12 +101,19 @@ const labelForCopyFormat = (format: CopyFormat): string =>
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const { locale } = useLocale();
   const [open, setOpen] = React.useState(false);
+  const policy = useAtomValue(downloadSizeLimitAtom);
+  const disabled = !!(
+    policy &&
+    props.sizeBytes != null &&
+    props.sizeBytes > policy.limitBytes
+  );
 
   const button = (
     <Button
       data-testid="export-button"
       size="xs"
       variant="text"
+      disabled={disabled}
       className={cn(
         "print:hidden text-xs gap-1",
         open ? "text-primary" : "text-muted-foreground",
@@ -113,7 +127,10 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const resolveDownloadUrl = async (
     format: DownloadFormat,
     onRetry: () => void,
-  ): Promise<{ url: string; filename: string } | null> => {
+  ): Promise<{
+    url: string;
+    filename: string;
+  } | null> => {
     let response: Awaited<ReturnType<typeof props.downloadAs>>;
     try {
       response = await props.downloadAs({ format });
@@ -143,7 +160,10 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
       return null;
     }
 
-    return { url: response.url, filename: response.filename };
+    return {
+      url: response.url,
+      filename: response.filename,
+    };
   };
 
   const handleDownload = async (format: DownloadFormat) => {
@@ -229,8 +249,15 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
 
   return (
     <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
-      <Tooltip content="Export" open={open ? false : undefined}>
-        <DropdownMenuTrigger asChild={true}>{button}</DropdownMenuTrigger>
+      <Tooltip
+        content={disabled ? policy?.unavailableMessage : "Export"}
+        open={open ? false : undefined}
+      >
+        <DropdownMenuTrigger asChild={true} disabled={disabled}>
+          <span tabIndex={disabled ? 0 : -1} className="inline-flex">
+            {button}
+          </span>
+        </DropdownMenuTrigger>
       </Tooltip>
       <DropdownMenuContent side="bottom" className="print:hidden">
         <DropdownMenuLabel className="text-xs text-muted-foreground">

package/src/components/editor/actions/useNotebookActions.tsx

@@ -53,6 +53,7 @@ import {
   canUndoDeletesAtom,
   getNotebook,
   hasDisabledCellsAtom,
+  undoLabelAtom,
   useCellActions,
 } from "@/core/cells/cells";
 import { disabledCellIds } from "@/core/cells/utils";
@@ -137,6 +138,7 @@ export function useNotebookActions() {
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
   const canUndoDeletes = useAtomValue(canUndoDeletesAtom);
+  const undoLabel = useAtomValue(undoLabelAtom);
   const { selectedLayout } = useLayoutState();
   const { setLayoutView } = useLayoutActions();
   const togglePresenting = useTogglePresenting();
@@ -525,7 +527,7 @@ export function useNotebookActions() {
     },
     {
       icon: <Undo2Icon size={14} strokeWidth={1.5} />,
-      label: "Undo cell deletion",
+      label: undoLabel,
       hidden: !canUndoDeletes || kioskMode,
       handle: () => {
         undoDeleteCell();

package/src/components/editor/app-container.tsx

@@ -15,6 +15,7 @@ interface Props {
   connection: ConnectionStatus;
   isRunning: boolean;
   width: AppConfig["width"];
+  onReconnect?: () => void;
 }
 
 export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
@@ -22,13 +23,18 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
   connection,
   isRunning,
   children,
+  onReconnect,
 }) => {
   const connectionState = connection.state;
 
   return (
     <>
       <DynamicFavicon isRunning={isRunning} />
-      <StatusOverlay connection={connection} isRunning={isRunning} />
+      <StatusOverlay
+        connection={connection}
+        isRunning={isRunning}
+        onReconnect={onReconnect}
+      />
       <PyodideLoader>
         <WrappedWithSidebar>
           {/** oxlint-ignore-next-line -- ID is used by other components to grab the DOM element */}

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -133,7 +133,12 @@ export const ContextAwarePanel: React.FC = () => {
         onDragging={handleDragging}
         className="resize-handle border-border z-20 print:hidden border-l"
       />
-      <Panel defaultSize={25} minSize={25} maxSize={80}>
+      <Panel
+        data-testid="chrome-context-aware-panel"
+        defaultSize={25}
+        minSize={25}
+        maxSize={80}
+      >
         {renderBody()}
       </Panel>
     </>
@@ -167,7 +172,10 @@ const ResizableComponent = ({ children }: ResizableComponentProps) => {
   });
 
   return (
-    <div className="absolute z-40 right-0 h-full bg-background flex flex-row">
+    <div
+      data-testid="chrome-context-aware-panel"
+      className="absolute z-40 right-0 h-full bg-background flex flex-row"
+    >
       <div
         ref={handleRefs.left}
         className="w-1 h-full cursor-col-resize border-l"

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -537,6 +537,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         {helperPanel}
         <Panel
           id="app-chrome-body"
+          data-testid="chrome-body"
           className={cn(isDeveloperPanelOpen && !isSidebarOpen && "border-l")}
         >
           <PanelGroup autoSaveId="marimo:chrome:v1:l1" direction="vertical">

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -58,7 +58,10 @@ export const Footer: React.FC = () => {
   });
 
   return (
-    <footer className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin">
+    <footer
+      data-testid="chrome-footer"
+      className="h-10 py-1 gap-1 bg-background flex items-center text-muted-foreground text-md pl-2 pr-1 border-t border-border select-none print:hidden text-sm z-50 hide-on-fullscreen overflow-x-auto overflow-y-hidden scrollbar-thin"
+    >
       <FooterItem
         className="h-full"
         tooltip={

package/src/components/editor/chrome/wrapper/panels.tsx

@@ -3,7 +3,10 @@ import type { PropsWithChildren } from "react";
 
 export const PanelsWrapper: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="flex flex-col flex-1 overflow-hidden absolute inset-0 print:relative">
+    <div
+      data-testid="chrome-wrapper"
+      className="flex flex-col flex-1 overflow-hidden absolute inset-0 print:relative"
+    >
       {children}
     </div>
   );

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -115,7 +115,10 @@ export const Sidebar: React.FC = () => {
   ]);
 
   return (
-    <div className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen">
+    <div
+      data-testid="chrome-sidebar"
+      className="h-full pt-4 pb-1 px-1 flex flex-col items-start text-muted-foreground text-md select-none text-sm z-50 dark:bg-background print:hidden hide-on-fullscreen"
+    >
       <ReorderableList<PanelDescriptor>
         value={sidebarItems}
         setValue={handleSetSidebarItems}

package/src/components/editor/controls/Controls.tsx

@@ -27,6 +27,7 @@ import { Functions } from "@/utils/functions";
 import {
   canUndoDeletesAtom,
   needsRunAtom,
+  undoLabelAtom,
   useCellActions,
 } from "../../../core/cells/cells";
 import { ConfigButton } from "../../app-config/app-config-button";
@@ -56,6 +57,7 @@ export const Controls = ({
   running,
 }: ControlsProps): JSX.Element => {
   const undoAvailable = useAtomValue(canUndoDeletesAtom);
+  const undoLabel = useAtomValue(undoLabelAtom);
   const needsRun = useAtomValue(needsRunAtom);
   const { undoDeleteCell } = useCellActions();
   const closed = connectionState === WebSocketState.CLOSED;
@@ -63,7 +65,7 @@ export const Controls = ({
   let undoControl: JSX.Element | null = null;
   if (!closed && undoAvailable) {
     undoControl = (
-      <Tooltip content="Undo cell deletion">
+      <Tooltip content={undoLabel}>
         <Button
           data-testid="undo-delete-cell"
           size="medium"
@@ -86,7 +88,10 @@ export const Controls = ({
       {!presenting && <FindReplace />}
 
       {!closed && (
-        <div className={topRightControls}>
+        <div
+          data-testid="chrome-controls-top-right"
+          className={topRightControls}
+        >
           {presenting && <LayoutSelect />}
           <NotebookMenuDropdown
             disabled={disabled}
@@ -101,7 +106,10 @@ export const Controls = ({
         </div>
       )}
 
-      <div className={cn(bottomRightControls)}>
+      <div
+        data-testid="chrome-controls-bottom-right"
+        className={cn(bottomRightControls)}
+      >
         <HideInKioskMode>
           <SaveComponent kioskMode={false} />
         </HideInKioskMode>

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -11,6 +11,9 @@ import { prettyError } from "@/utils/errors";
 import { Functions } from "@/utils/functions";
 import { type FilePath, PathBuilder } from "@/utils/paths";
 import { resolvePaths } from "@/utils/pathUtils";
+import { mapWithConcurrency } from "@/utils/semaphore";
+
+const FILE_OP_CONCURRENCY = 5;
 
 /**
  * Normalized result of a file mutation: the server response when successful,
@@ -159,28 +162,26 @@ export class RequestingTree {
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
 
-    await Promise.all(
-      fromIds.map(async (id) => {
-        const node = this.delegate.find(id);
-        if (!node) {
-          return;
-        }
-        const originalPath = node.data.path;
-        const newPath = this.path.join(
-          parentPath,
-          this.path.basename(originalPath as FilePath),
-        );
-        const result = await this.callbacks
-          .renameFileOrFolder({ path: originalPath, newPath })
-          .then(handleFileResponse);
-        if (!result) {
-          return;
-        }
+    await mapWithConcurrency(fromIds, FILE_OP_CONCURRENCY, async (id) => {
+      const node = this.delegate.find(id);
+      if (!node) {
+        return;
+      }
+      const originalPath = node.data.path;
+      const newPath = this.path.join(
+        parentPath,
+        this.path.basename(originalPath as FilePath),
+      );
+      const result = await this.callbacks
+        .renameFileOrFolder({ path: originalPath, newPath })
+        .then(handleFileResponse);
+      if (!result) {
+        return;
+      }
 
-        this.delegate.move({ id, parentId, index: 0 });
-        this.delegate.update({ id, changes: { path: newPath } });
-      }),
-    );
+      this.delegate.move({ id, parentId, index: 0 });
+      this.delegate.update({ id, changes: { path: newPath } });
+    });
 
     this.onChange(this.delegate.data);
 
@@ -262,11 +263,12 @@ export class RequestingTree {
       this.rootPath,
       ...ids.map((id) => this.delegate.find(id)?.data.path),
     ].filter(Boolean);
-    // Request all folders in parallel, and catch any errors
-    const data = await Promise.all(
-      openFolders.map((path) =>
+    // Request open folders with bounded concurrency; swallow per-folder errors.
+    const data = await mapWithConcurrency(
+      openFolders,
+      FILE_OP_CONCURRENCY,
+      (path) =>
         this.callbacks.listFiles({ path: path }).catch(() => ({ files: [] })),
-      ),
     );
 
     for (const [idx, openFolder] of openFolders.entries()) {

package/src/components/editor/file-tree/upload.tsx

@@ -3,13 +3,14 @@
 import { type DropzoneOptions, useDropzone } from "react-dropzone";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
-import { serializeBlob } from "@/utils/blob";
 import { withLoadingToast } from "@/utils/download";
 import { Logger } from "@/utils/Logger";
 import { type FilePath, PathBuilder } from "@/utils/paths";
+import { mapWithConcurrency } from "@/utils/semaphore";
 import { refreshRoot } from "./state";
 
 const MAX_SIZE = 1024 * 1024 * 100; // 100MB
+const UPLOAD_CONCURRENCY = 5;
 
 export function useFileExplorerUpload(options: DropzoneOptions = {}) {
   const { sendCreateFileOrFolder } = useRequestClient();
@@ -59,30 +60,28 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
         loadingTitle,
         async (progress) => {
           progress.addTotal(acceptedFiles.length);
-          for (const file of acceptedFiles) {
-            // We strip the leading slash since File.path can return
-            // `/path/to/file`.
-            const filePath = stripLeadingSlash(getPath(file));
-            let directoryPath = "" as FilePath;
-            if (filePath) {
-              directoryPath =
-                PathBuilder.guessDeliminator(filePath).dirname(filePath);
-            }
+          await mapWithConcurrency(
+            acceptedFiles,
+            UPLOAD_CONCURRENCY,
+            async (file) => {
+              // We strip the leading slash since File.path can return
+              // `/path/to/file`.
+              const filePath = stripLeadingSlash(getPath(file));
+              let directoryPath = "" as FilePath;
+              if (filePath) {
+                directoryPath =
+                  PathBuilder.guessDeliminator(filePath).dirname(filePath);
+              }
 
-            // File contents are sent base64-encoded to support arbitrary
-            // bytes data
-            //
-            // get the raw base64-encoded data from a string starting with
-            // data:*/*;base64,
-            const base64 = (await serializeBlob(file)).split(",")[1];
-            await sendCreateFileOrFolder({
-              path: directoryPath,
-              type: "file",
-              name: file.name,
-              contents: base64,
-            });
-            progress.increment(1);
-          }
+              await sendCreateFileOrFolder({
+                path: directoryPath,
+                type: "file",
+                name: file.name,
+                file,
+              });
+              progress.increment(1);
+            },
+          );
           await refreshRoot();
         },
         onFinish,