@marimo-team/islands 0.20.2 → 0.20.3-dev76

package/src/components/dependency-graph/utils/__tests__/cell-preview.test.ts

@@ -0,0 +1,143 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { extractCellPreview } from "../cell-preview";
+
+describe("extractCellPreview", () => {
+  describe("markdown cells", () => {
+    it("extracts heading from f-string triple-double-quoted markdown", () => {
+      expect(extractCellPreview('mo.md(f"""# Heading\nbody""")')).toEqual({
+        text: "# Heading",
+        type: "markdown",
+      });
+    });
+
+    it("extracts text from r-prefixed triple-double-quoted markdown", () => {
+      expect(extractCellPreview('mo.md(r"""text""")')).toEqual({
+        text: "text",
+        type: "markdown",
+      });
+    });
+
+    it("skips leading empty lines", () => {
+      expect(extractCellPreview('mo.md(f"""\n# Heading\n""")')).toEqual({
+        text: "# Heading",
+        type: "markdown",
+      });
+    });
+
+    it("returns undefined text for empty markdown", () => {
+      expect(extractCellPreview('mo.md("")')).toEqual({
+        text: undefined,
+        type: "markdown",
+      });
+    });
+
+    it("works with single-quoted strings", () => {
+      expect(extractCellPreview("mo.md('single line')")).toEqual({
+        text: "single line",
+        type: "markdown",
+      });
+    });
+
+    it("works with triple-single-quoted strings", () => {
+      expect(extractCellPreview("mo.md('''some text''')")).toEqual({
+        text: "some text",
+        type: "markdown",
+      });
+    });
+
+    it("works with fr prefix", () => {
+      expect(extractCellPreview('mo.md(fr"""# Title\n{x}""")')).toEqual({
+        text: "# Title",
+        type: "markdown",
+      });
+    });
+
+    it("works with no prefix", () => {
+      expect(extractCellPreview('mo.md("""plain text""")')).toEqual({
+        text: "plain text",
+        type: "markdown",
+      });
+    });
+  });
+
+  describe("SQL cells", () => {
+    it("extracts SQL from assignment with f-string", () => {
+      expect(
+        extractCellPreview('_df = mo.sql(f"""SELECT * FROM cars""")'),
+      ).toEqual({
+        text: "SELECT * FROM cars",
+        type: "sql",
+      });
+    });
+
+    it("skips leading newlines in SQL", () => {
+      expect(
+        extractCellPreview('_df = mo.sql(f"""\nSELECT * FROM t\n""")'),
+      ).toEqual({
+        text: "SELECT * FROM t",
+        type: "sql",
+      });
+    });
+
+    it("returns first line of multi-line SQL", () => {
+      expect(
+        extractCellPreview(
+          '_df = mo.sql(f"""SELECT *\nFROM users\nWHERE id = 1""")',
+        ),
+      ).toEqual({
+        text: "SELECT *",
+        type: "sql",
+      });
+    });
+
+    it("handles SQL with engine kwarg after string", () => {
+      expect(
+        extractCellPreview('_df = mo.sql(f"""SELECT 1""", engine=my_engine)'),
+      ).toEqual({
+        text: "SELECT 1",
+        type: "sql",
+      });
+    });
+
+    it("returns undefined text for empty SQL string", () => {
+      expect(extractCellPreview('_df = mo.sql(f"""""")')).toEqual({
+        text: undefined,
+        type: "sql",
+      });
+    });
+  });
+
+  describe("Python fallback", () => {
+    it("returns first line of Python code", () => {
+      expect(extractCellPreview("import pandas as pd")).toEqual({
+        text: "import pandas as pd",
+        type: "python",
+      });
+    });
+
+    it("returns first line of multi-line Python", () => {
+      expect(extractCellPreview("x = 1\ny = 2")).toEqual({
+        text: "x = 1",
+        type: "python",
+      });
+    });
+
+    it("returns undefined text for empty string", () => {
+      // MarkdownParser.isSupported("") returns true, so empty cells
+      // are classified as markdown — the text is undefined either way.
+      expect(extractCellPreview("")).toEqual({
+        text: undefined,
+        type: "markdown",
+      });
+    });
+
+    it("returns undefined text for whitespace-only string", () => {
+      expect(extractCellPreview("   \n  ")).toEqual({
+        text: undefined,
+        type: "markdown",
+      });
+    });
+  });
+});

package/src/components/dependency-graph/utils/cell-preview.ts

@@ -0,0 +1,46 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { MarkdownParser, SQLParser } from "@marimo-team/smart-cells";
+
+export interface CellPreview {
+  text: string | undefined;
+  type: "python" | "markdown" | "sql";
+}
+
+const markdownParser = new MarkdownParser();
+const sqlParser = new SQLParser();
+
+function firstNonEmptyLine(content: string): string | undefined {
+  for (const line of content.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed.length > 0) {
+      return trimmed;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Extract a human-readable preview and cell type from raw cell code.
+ *
+ * For markdown cells (`mo.md(...)`) and SQL cells (`mo.sql(...)`),
+ * returns the inner content's first non-empty line instead of the
+ * Python wrapper boilerplate.
+ */
+export function extractCellPreview(code: string): CellPreview {
+  const trimmed = code.trim();
+
+  if (markdownParser.isSupported(trimmed)) {
+    const { code: inner } = markdownParser.transformIn(trimmed);
+    return { text: firstNonEmptyLine(inner), type: "markdown" };
+  }
+
+  if (sqlParser.isSupported(trimmed)) {
+    const { code: inner } = sqlParser.transformIn(trimmed);
+    return { text: firstNonEmptyLine(inner), type: "sql" };
+  }
+
+  // Python fallback: first line of raw code
+  const firstLine = trimmed.split("\n")[0]?.trim();
+  return { text: firstLine || undefined, type: "python" };
+}

package/src/components/editor/Output.tsx

@@ -1,12 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, {
-  memo,
-  Suspense,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { memo, Suspense, useMemo, useRef } from "react";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
 import type { CellOutput, OutputMessage } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
@@ -30,6 +23,7 @@ import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
 import { viewStateAtom } from "@/core/mode";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
+import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import type { TopLevelFacetedUnitSpec } from "@/plugins/impl/data-explorer/queries/types";
@@ -427,28 +421,9 @@ const ExpandableOutput = React.memo(
   }) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [isExpanded, setIsExpanded] = useExpandedOutput(cellId);
-    const [isOverflowing, setIsOverflowing] = useState(false);
+    const isOverflowing = useOverflowDetection(containerRef);
     const { hasFullscreen } = useIframeCapabilities();
 
-    // Create resize observer to detect overflow
-    useEffect(() => {
-      if (!containerRef.current) {
-        return;
-      }
-      const el = containerRef.current;
-
-      const detectOverflow = () => {
-        setIsOverflowing(el.scrollHeight > el.clientHeight);
-      };
-
-      const resizeObserver = new ResizeObserver(detectOverflow);
-      resizeObserver.observe(el);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }, [props.id]);
-
     return (
       <>
         <div>

package/src/components/editor/cell/cell-actions.tsx

@@ -64,6 +64,10 @@ const CellActionsDropdownInternal = (
   const buttonRef = useRef<HTMLButtonElement>(null);
   const actions = useCellActionButtons({ cell: props, closePopover });
 
+  const visibleActions = actions
+    .map((group) => group.filter((action) => !action.redundant))
+    .filter((group) => group.length > 0);
+
   // store the last focused element so we can restore it when the popover closes
   const restoreFocus = useRestoreFocus();
 
@@ -112,13 +116,10 @@ const CellActionsDropdownInternal = (
         />
         <CommandList>
           <CommandEmpty>No results</CommandEmpty>
-          {actions.map((group, i) => (
+          {visibleActions.map((group, i) => (
             <Fragment key={i}>
               <CommandGroup key={i}>
                 {group.map((action) => {
-                  if (action.redundant) {
-                    return null;
-                  }
                   let body = (
                     <div className="flex items-center flex-1">
                       {action.icon && (
@@ -162,7 +163,7 @@ const CellActionsDropdownInternal = (
                   );
                 })}
               </CommandGroup>
-              {i < actions.length - 1 && <CommandSeparator />}
+              {i < visibleActions.length - 1 && <CommandSeparator />}
             </Fragment>
           ))}
         </CommandList>

package/src/components/editor/cell/cell-context-menu.tsx

@@ -26,6 +26,7 @@ import { isOutputEmpty } from "@/core/cells/outputs";
 import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
 import { copyToClipboard } from "@/utils/copy";
+import { getImageExtension } from "@/utils/filenames";
 import { Logger } from "@/utils/Logger";
 import type { ActionButton } from "../actions/types";
 import {
@@ -154,8 +155,9 @@ export const CellActionsContextMenu = ({
       handle: () => {
         if (imageRightClicked) {
           const link = document.createElement("a");
-          link.download = "image.png";
           link.href = imageRightClicked.src;
+          const ext = getImageExtension(imageRightClicked.src) || "png";
+          link.download = `image.${ext}`;
           link.click();
         }
       },
@@ -174,6 +176,12 @@ export const CellActionsContextMenu = ({
 
   const allActions: ActionButton[][] = [DEFAULT_CONTEXT_MENU_ITEMS, ...actions];
 
+  const visibleActions = allActions
+    .map((group) =>
+      group.filter((action) => !action.hidden && !action.redundant),
+    )
+    .filter((group) => group.length > 0);
+
   return (
     <ContextMenu>
       <ContextMenuTrigger
@@ -189,13 +197,9 @@ export const CellActionsContextMenu = ({
         {children}
       </ContextMenuTrigger>
       <ContextMenuContent className="w-[300px]" scrollable={true}>
-        {allActions.map((group, i) => (
+        {visibleActions.map((group, i) => (
           <Fragment key={i}>
             {group.map((action) => {
-              if (action.hidden || action.redundant) {
-                return null;
-              }
-
               let body = (
                 <div className="flex items-center flex-1">
                   {action.icon && (
@@ -256,7 +260,7 @@ export const CellActionsContextMenu = ({
                 </Fragment>
               );
             })}
-            {i < allActions.length - 1 && <ContextMenuSeparator />}
+            {i < visibleActions.length - 1 && <ContextMenuSeparator />}
           </Fragment>
         ))}
       </ContextMenuContent>

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

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import * as React from "react";
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/utils/cn";
+
+/**
+ * Styled AccordionItem for sidebar panels.
+ * Applies border-b by default; set `lastItem` to remove it on the final item.
+ */
+const PanelAccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionItem>,
+  React.ComponentPropsWithoutRef<typeof AccordionItem> & {
+    lastItem?: boolean;
+  }
+>(({ className, lastItem, ...props }, ref) => (
+  <AccordionItem
+    ref={ref}
+    className={cn(lastItem && "border-b-0", className)}
+    {...props}
+  />
+));
+PanelAccordionItem.displayName = "PanelAccordionItem";
+
+/**
+ * Styled AccordionTrigger for sidebar panels.
+ * Applies compact uppercase styling and wraps children in a flex container
+ * with gap for icon + label layout.
+ */
+const PanelAccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionTrigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionTrigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionTrigger
+    ref={ref}
+    className={cn(
+      "px-3 py-2 text-xs font-semibold uppercase tracking-wide hover:no-underline",
+      className,
+    )}
+    {...props}
+  >
+    <span className="flex items-center gap-2">{children}</span>
+  </AccordionTrigger>
+));
+PanelAccordionTrigger.displayName = "PanelAccordionTrigger";
+
+/**
+ * Styled AccordionContent for sidebar panels.
+ * Removes default wrapper padding.
+ */
+const PanelAccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionContent>,
+  React.ComponentPropsWithoutRef<typeof AccordionContent>
+>(({ wrapperClassName, ...props }, ref) => (
+  <AccordionContent
+    ref={ref}
+    wrapperClassName={cn("p-0", wrapperClassName)}
+    {...props}
+  />
+));
+PanelAccordionContent.displayName = "PanelAccordionContent";
+
+/**
+ * Styled Badge for sidebar panels.
+ */
+const PanelBadge = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Badge>) => (
+  <Badge
+    variant="secondary"
+    className={cn("py-0 px-1.5 text-[10px]", className)}
+    {...props}
+  />
+);
+PanelBadge.displayName = "PanelBadge";
+
+export {
+  PanelAccordionItem,
+  PanelAccordionTrigger,
+  PanelAccordionContent,
+  PanelBadge,
+};

package/src/components/editor/chrome/panels/file-explorer-panel.tsx

@@ -1,14 +1,40 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import React from "react";
+import { useAtom, useAtomValue } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { FileIcon, HardDrive } from "lucide-react";
+import React, { useCallback, useMemo } from "react";
 import useResizeObserver from "use-resize-observer";
+import { StorageInspector } from "@/components/storage/storage-inspector";
+import { Accordion } from "@/components/ui/accordion";
+import { getFeatureFlag } from "@/core/config/feature-flag";
+import { storageNamespacesAtom } from "@/core/storage/state";
 import { cn } from "@/utils/cn";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { TreeDndProvider } from "../../file-tree/dnd-wrapper";
 import { FileExplorer } from "../../file-tree/file-explorer";
 import { useFileExplorerUpload } from "../../file-tree/upload";
+import {
+  PanelAccordionContent,
+  PanelAccordionItem,
+  PanelAccordionTrigger,
+  PanelBadge,
+} from "./components";
 
-const FileExplorerPanel: React.FC = () => {
-  const { ref, height = 1 } = useResizeObserver<HTMLDivElement>();
+type OpenSections = "files" | "remote-storage";
+
+interface FileExplorerPanelState {
+  openSections: OpenSections[];
+  hasUserInteracted: boolean;
+}
+
+const fileExplorerPanelAtom = atomWithStorage<FileExplorerPanelState>(
+  "marimo:file-explorer-panel:state",
+  { openSections: ["files"], hasUserInteracted: false },
+  jotaiJsonStorage,
+);
+
+const FileExplorerComponent: React.FC<{ height: number }> = ({ height }) => {
   const { getRootProps, getInputProps, isDragActive } = useFileExplorerUpload({
     noClick: true,
     noKeyboard: true,
@@ -18,7 +44,8 @@ const FileExplorerPanel: React.FC = () => {
     <TreeDndProvider>
       <div
         {...getRootProps()}
-        className={cn("flex flex-col flex-1 overflow-hidden relative")}
+        className={cn("flex flex-col overflow-hidden relative")}
+        style={{ height }}
       >
         <input {...getInputProps()} />
         {isDragActive && (
@@ -27,12 +54,98 @@ const FileExplorerPanel: React.FC = () => {
           </div>
         )}
 
-        <div ref={ref} className="flex flex-col flex-1 overflow-hidden">
-          <FileExplorer height={height} />
-        </div>
+        <FileExplorer height={height} />
       </div>
     </TreeDndProvider>
   );
 };
 
+// Height of each accordion trigger (px-3 py-2 text-xs = ~33px)
+const TRIGGER_HEIGHT = 33;
+
+const FileExplorerPanel: React.FC = () => {
+  const { ref: panelRef, height: panelHeight = 500 } =
+    useResizeObserver<HTMLDivElement>();
+  const [state, setState] = useAtom(fileExplorerPanelAtom);
+
+  const storageNamespaces = useAtomValue(storageNamespacesAtom);
+  const remoteStorageConnections = storageNamespaces.length;
+
+  const openSections = useMemo<OpenSections[]>(() => {
+    if (!state.hasUserInteracted && remoteStorageConnections > 0) {
+      if (state.openSections.includes("remote-storage")) {
+        return state.openSections;
+      }
+      return [...state.openSections, "remote-storage"];
+    }
+    return state.openSections;
+  }, [state.hasUserInteracted, state.openSections, remoteStorageConnections]);
+
+  const handleValueChange = useCallback(
+    (value: OpenSections[]) => {
+      setState({
+        openSections: value,
+        hasUserInteracted: true,
+      });
+    },
+    [setState],
+  );
+
+  const availableContent = panelHeight - TRIGGER_HEIGHT * 2;
+  const storageIsOpen = openSections.includes("remote-storage");
+  const bothOpen = storageIsOpen && openSections.includes("files");
+
+  const storageMaxHeight = bothOpen
+    ? Math.round(availableContent * 0.4)
+    : availableContent;
+  const fileTreeHeight = Math.max(
+    200,
+    bothOpen ? availableContent - storageMaxHeight : availableContent,
+  );
+
+  const storageInspectorEnabled = getFeatureFlag("storage_inspector");
+  if (!storageInspectorEnabled) {
+    return (
+      <div ref={panelRef} className="h-full overflow-auto">
+        <FileExplorerComponent height={panelHeight} />
+      </div>
+    );
+  }
+
+  return (
+    <div ref={panelRef} className="h-full overflow-auto">
+      <Accordion
+        type="multiple"
+        value={openSections}
+        onValueChange={handleValueChange}
+      >
+        <PanelAccordionItem value="remote-storage">
+          <PanelAccordionTrigger>
+            <HardDrive className="w-4 h-4" /> Remote storage
+            {remoteStorageConnections > 0 && (
+              <PanelBadge>{remoteStorageConnections}</PanelBadge>
+            )}
+          </PanelAccordionTrigger>
+          <PanelAccordionContent
+            className="overflow-auto"
+            style={{ maxHeight: storageMaxHeight }}
+          >
+            <StorageInspector />
+          </PanelAccordionContent>
+        </PanelAccordionItem>
+
+        <PanelAccordionItem value="files">
+          <PanelAccordionTrigger>
+            <FileIcon className="w-4 h-4" />
+            Files
+          </PanelAccordionTrigger>
+          <PanelAccordionContent>
+            <FileExplorerComponent height={fileTreeHeight} />
+          </PanelAccordionContent>
+        </PanelAccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
 export default FileExplorerPanel;

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -30,7 +30,7 @@ export const FloatingOutline: React.FC = () => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       className={cn(
-        "fixed top-[25vh] right-8 z-10000",
+        "fixed top-[25vh] right-8 z-10000 print:hidden",
         // Hide on small screens
         "hidden md:block",
       )}
@@ -105,21 +105,33 @@ export const OutlineList: React.FC<{
         const occurrences = seen.get(identifier) ?? 0;
         seen.set(identifier, occurrences + 1);
 
+        const key = `${identifier}-${idx}`;
+        const sharedProps = {
+          className: cn(
+            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l",
+            item.level === 1 && "font-semibold",
+            item.level === 2 && "ml-3",
+            item.level === 3 && "ml-6",
+            item.level === 4 && "ml-9",
+            occurrences === activeOccurrences &&
+              activeHeaderId === identifier &&
+              "text-accent-foreground",
+          ),
+          onClick: () => scrollToOutlineItem(item, occurrences),
+        };
+
+        if (item.html) {
+          return (
+            <div
+              key={key}
+              {...sharedProps}
+              dangerouslySetInnerHTML={{ __html: item.html }}
+            />
+          );
+        }
+
         return (
-          <div
-            key={`${identifier}-${idx}`}
-            className={cn(
-              "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l",
-              item.level === 1 && "font-semibold",
-              item.level === 2 && "ml-3",
-              item.level === 3 && "ml-6",
-              item.level === 4 && "ml-9",
-              occurrences === activeOccurrences &&
-                activeHeaderId === identifier &&
-                "text-accent-foreground",
-            )}
-            onClick={() => scrollToOutlineItem(item, occurrences)}
-          >
+          <div key={key} {...sharedProps}>
             {item.name}
           </div>
         );