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

package/src/components/storage/components.tsx

@@ -8,15 +8,9 @@ import CoreweaveIcon from "@marimo-team/llm-info/icons/coreweave.svg?inline";
 import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?inline";
 import {
   DatabaseZapIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  FileVideoIcon,
   GithubIcon,
   GlobeIcon,
   HardDriveIcon,
-  ImageIcon,
 } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
@@ -24,38 +18,6 @@ import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 
-export function renderFileIcon(name: string): React.ReactNode {
-  const ext = name.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "png":
-    case "jpg":
-    case "jpeg":
-    case "gif":
-    case "svg":
-    case "webp":
-      return <ImageIcon className="h-3.5 w-3.5 text-purple-500" />;
-    case "csv":
-    case "parquet":
-    case "arrow":
-    case "xlsx":
-      return <FileSpreadsheetIcon className="h-3.5 w-3.5 text-green-500" />;
-    case "py":
-    case "js":
-    case "ts":
-    case "json":
-      return <FileCodeIcon className="h-3.5 w-3.5 text-blue-500" />;
-    case "mp4":
-    case "mpeg":
-      return <FileVideoIcon className="h-3.5 w-3.5 text-orange-500" />;
-    case "txt":
-    case "md":
-    case "log":
-      return <FileTextIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-    default:
-      return <FileIcon className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-}
-
 type IconEntry =
   | { src: string; dark?: string }
   | React.ComponentType<{ className?: string }>;

package/src/components/storage/storage-file-viewer.tsx

@@ -5,6 +5,7 @@ import type React from "react";
 import { useCallback } from "react";
 import { useLocale } from "react-aria";
 import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
+import { renderFileIcon } from "@/components/editor/file-tree/file-icons";
 import {
   FileContentRenderer,
   isMediaMime,
@@ -18,7 +19,6 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
-import { renderFileIcon } from "./components";
 
 const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB
 

package/src/components/storage/storage-inspector.tsx

@@ -2,29 +2,38 @@
 
 import { CommandList } from "cmdk";
 import {
-  ChevronRightIcon,
   CopyIcon,
   DownloadIcon,
   FolderIcon,
   HardDriveIcon,
   HelpCircleIcon,
   LoaderCircle,
-  MoreVerticalIcon,
   PlusIcon,
-  RefreshCwIcon,
   ViewIcon,
   XIcon,
 } from "lucide-react";
 import React, { useCallback, useState } from "react";
 import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
+import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
 import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
+import {
+  FILE_ICON_COLOR,
+  renderFileIcon,
+} from "@/components/editor/file-tree/file-icons";
+import {
+  MENU_ITEM_ICON_CLASS,
+  MoreActionsButton,
+  RefreshIconButton,
+  TreeChevron,
+} from "@/components/editor/file-tree/tree-actions";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -40,7 +49,7 @@ import type {
   StorageNamespace,
   StoragePathKey,
 } from "@/core/storage/types";
-import { storagePathKey, storageUrl } from "@/core/storage/types";
+import { storagePathKey } from "@/core/storage/types";
 import type { VariableName } from "@/core/variables/types";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -49,8 +58,9 @@ import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { ErrorState } from "../datasources/components";
 import { Button } from "../ui/button";
-import { ProtocolIcon, renderFileIcon } from "./components";
+import { ProtocolIcon } from "./components";
 import { StorageFileViewer } from "./storage-file-viewer";
+import { STORAGE_SNIPPETS } from "./storage-snippets";
 
 interface OpenFileInfo {
   entry: StorageEntry;
@@ -138,6 +148,7 @@ const StorageEntryChildren: React.FC<{
   namespace: string;
   protocol: string;
   rootPath: string;
+  backendType: StorageNamespace["backendType"];
   prefix: string;
   depth: number;
   locale: string;
@@ -147,6 +158,7 @@ const StorageEntryChildren: React.FC<{
   namespace,
   protocol,
   rootPath,
+  backendType,
   prefix,
   depth,
   locale,
@@ -207,6 +219,7 @@ const StorageEntryChildren: React.FC<{
           namespace={namespace}
           protocol={protocol}
           rootPath={rootPath}
+          backendType={backendType}
           depth={depth}
           locale={locale}
           searchValue={searchValue}
@@ -222,6 +235,7 @@ const StorageEntryRow: React.FC<{
   namespace: string;
   protocol: string;
   rootPath: string;
+  backendType: StorageNamespace["backendType"];
   depth: number;
   locale: string;
   searchValue: string;
@@ -231,6 +245,7 @@ const StorageEntryRow: React.FC<{
   namespace,
   protocol,
   rootPath,
+  backendType,
   depth,
   locale,
   searchValue,
@@ -238,6 +253,7 @@ const StorageEntryRow: React.FC<{
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const { entriesByPath } = useStorage();
+  const addCodeToNewCell = useAddCodeToNewCell();
   const isDir = entry.kind === "directory";
   const name = displayName(entry.path);
   const hasSearch = !!searchValue.trim();
@@ -305,17 +321,14 @@ const StorageEntryRow: React.FC<{
         }}
       >
         {isDir ? (
-          <ChevronRightIcon
-            className={cn(
-              "h-3 w-3 shrink-0 transition-transform",
-              effectiveExpanded && "rotate-90",
-            )}
-          />
+          <TreeChevron isExpanded={effectiveExpanded} className="h-3 w-3" />
         ) : (
           <span className="w-3 shrink-0" />
         )}
         {isDir ? (
-          <FolderIcon className="h-3.5 w-3.5 text-amber-500 shrink-0" />
+          <FolderIcon
+            className={cn("h-3.5 w-3.5 shrink-0", FILE_ICON_COLOR.directory)}
+          />
         ) : (
           renderFileIcon(name)
         )}
@@ -337,14 +350,10 @@ const StorageEntryRow: React.FC<{
           )}
           <DropdownMenu>
             <DropdownMenuTrigger asChild={true}>
-              <Button
-                variant="text"
-                size="icon"
-                className="opacity-0 group-hover:opacity-100 transition-opacity hover:shadow-none hover:text-link text-muted-foreground"
+              <MoreActionsButton
+                iconClassName="h-3 w-3"
                 onClick={(e) => e.stopPropagation()}
-              >
-                <MoreVerticalIcon className="h-3 w-3" />
-              </Button>
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="end"
@@ -355,26 +364,47 @@ const StorageEntryRow: React.FC<{
                 <DropdownMenuItem
                   onSelect={() => onOpenFile({ entry, namespace })}
                 >
-                  <ViewIcon className="h-3.5 w-3.5 mr-2" />
+                  <ViewIcon className={MENU_ITEM_ICON_CLASS} />
                   View
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem
                 onSelect={async () => {
-                  const url = storageUrl(protocol, rootPath, entry.path);
-                  await copyToClipboard(url.toString());
+                  await copyToClipboard(entry.path);
                   toast({ title: "Copied to clipboard" });
                 }}
               >
-                <CopyIcon className="h-3.5 w-3.5 mr-2" />
-                Copy URL
+                <CopyIcon className={MENU_ITEM_ICON_CLASS} />
+                Copy path
               </DropdownMenuItem>
               {!isDir && (
                 <DropdownMenuItem onSelect={() => handleDownload()}>
-                  <DownloadIcon className="h-3.5 w-3.5 mr-2" />
+                  <DownloadIcon className={MENU_ITEM_ICON_CLASS} />
                   Download
                 </DropdownMenuItem>
               )}
+              <DropdownMenuSeparator />
+              {STORAGE_SNIPPETS.map((snippet) => {
+                const code = snippet.getCode({
+                  variableName: namespace,
+                  protocol,
+                  entry,
+                  backendType,
+                });
+                if (code === null) {
+                  return null;
+                }
+                const Icon = snippet.icon;
+                return (
+                  <DropdownMenuItem
+                    key={snippet.id}
+                    onSelect={() => addCodeToNewCell(code)}
+                  >
+                    <Icon className={MENU_ITEM_ICON_CLASS} />
+                    {snippet.label}
+                  </DropdownMenuItem>
+                );
+              })}
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
@@ -384,6 +414,7 @@ const StorageEntryRow: React.FC<{
           namespace={namespace}
           protocol={protocol}
           rootPath={rootPath}
+          backendType={backendType}
           prefix={entry.path}
           depth={depth + 1}
           locale={locale}
@@ -402,7 +433,6 @@ const StorageNamespaceSection: React.FC<{
   onOpenFile: (info: OpenFileInfo) => void;
 }> = ({ namespace, locale, searchValue, onOpenFile }) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const [isSpinning, setIsSpinning] = useState(false);
   const { entriesByPath } = useStorage();
   const { clearNamespaceCache } = useStorageActions();
   const namespaceName = namespace.name ?? namespace.displayName;
@@ -417,10 +447,8 @@ const StorageNamespaceSection: React.FC<{
   const handleRefresh = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      setIsSpinning(true);
       clearNamespaceCache(namespaceName);
       refetch();
-      setTimeout(() => setIsSpinning(false), 500);
     },
     [namespaceName, clearNamespaceCache, refetch],
   );
@@ -441,12 +469,7 @@ const StorageNamespaceSection: React.FC<{
         onSelect={() => setIsExpanded(!isExpanded)}
         className="flex flex-row font-semibold h-7 text-xs gap-1.5 bg-(--slate-2) text-muted-foreground rounded-none"
       >
-        <ChevronRightIcon
-          className={cn(
-            "h-3 w-3 shrink-0 transition-transform",
-            isExpanded && "rotate-90",
-          )}
-        />
+        <TreeChevron isExpanded={isExpanded} className="h-3 w-3" />
         <ProtocolIcon protocol={namespace.protocol} />
         <span>{namespace.displayName}</span>
         {namespace.name && (
@@ -454,21 +477,12 @@ const StorageNamespaceSection: React.FC<{
             (<EngineVariable variableName={namespace.name as VariableName} />)
           </span>
         )}
-        <Tooltip content="Refresh storage connection">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="hover:bg-transparent hover:shadow-none"
-            onClick={handleRefresh}
-          >
-            <RefreshCwIcon
-              className={cn(
-                "h-3 w-3 text-muted-foreground hover:text-foreground",
-                isSpinning && "animate-[spin_0.5s]",
-              )}
-            />
-          </Button>
-        </Tooltip>
+        <RefreshIconButton
+          onClick={handleRefresh}
+          tooltip="Refresh storage connection"
+          className="p-0"
+          iconClassName="h-3 w-3"
+        />
         <span className="text-[10px] text-muted-foreground font-normal tabular-nums ml-auto">
           {namespace.rootPath || "(root)"}
         </span>
@@ -488,7 +502,7 @@ const StorageNamespaceSection: React.FC<{
             <ErrorState
               error={error}
               style={indentStyle(1)}
-              className="py-1 text-xs h-auto"
+              className="py-1 text-xs h-auto overflow-auto max-h-32 items-start"
               showIcon={false}
             />
           )}
@@ -515,6 +529,7 @@ const StorageNamespaceSection: React.FC<{
               namespace={namespaceName}
               protocol={namespace.protocol}
               rootPath={namespace.rootPath}
+              backendType={namespace.backendType}
               depth={1}
               locale={locale}
               searchValue={searchValue}

package/src/components/storage/storage-snippets.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { LucideIcon } from "lucide-react";
+import { BookOpenIcon, LinkIcon } from "lucide-react";
+import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
+
+type BackendType = StorageNamespace["backendType"];
+
+export interface StorageSnippetContext {
+  variableName: string;
+  protocol: string;
+  entry: StorageEntry;
+  backendType: BackendType;
+}
+
+export interface StorageSnippet {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  /** Return the code string, or null to hide the snippet for this context. */
+  getCode: (ctx: StorageSnippetContext) => string | null;
+}
+
+const NOT_SIGNABLE_PROTOCOLS = new Set(["http", "file", "in-memory"]);
+
+function escapeForPythonString(value: string): string {
+  return JSON.stringify(value).slice(1, -1);
+}
+
+export const STORAGE_SNIPPETS: StorageSnippet[] = [
+  {
+    id: "read-file",
+    label: "Insert read snippet",
+    icon: BookOpenIcon,
+    getCode: (ctx) => {
+      if (ctx.entry.kind === "directory") {
+        return null;
+      }
+      const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "obstore") {
+        return `_data = ${ctx.variableName}.get("${path}").bytes()\n_data`;
+      }
+      return `_data = ${ctx.variableName}.cat_file("${path}")\n_data`;
+    },
+  },
+  {
+    id: "download-file",
+    label: "Insert download snippet",
+    icon: LinkIcon,
+    getCode: (ctx) => {
+      if (ctx.entry.kind === "directory") {
+        return null;
+      }
+      const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "obstore") {
+        if (NOT_SIGNABLE_PROTOCOLS.has(ctx.protocol)) {
+          return null;
+        }
+        return `from datetime import timedelta\nfrom obstore import sign\n\nsigned_url = sign(\n    ${ctx.variableName}, "GET", "${path}",\n    expires_in=timedelta(hours=1),\n)\nsigned_url`;
+      }
+      const filename = escapeForPythonString(
+        ctx.entry.path.split("/").pop() || "download",
+      );
+      return `${ctx.variableName}.get("${path}", "${filename}")`;
+    },
+  },
+];

package/src/components/ui/command.tsx

@@ -7,6 +7,7 @@ import { Search } from "lucide-react";
 import * as React from "react";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { cn } from "@/utils/cn";
+import { smartMatchFilter } from "@/utils/smartMatch";
 import { Strings } from "@/utils/strings";
 import {
   MENU_ITEM_DISABLED,
@@ -21,6 +22,7 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
+    filter={smartMatchFilter}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
       className,

package/src/components/ui/links.tsx

@@ -8,6 +8,7 @@ export const ExternalLink = ({
     | `https://console.anthropic.com/${string}`
     | `https://aistudio.google.com/${string}`
     | `https://github.com/${string}`
+    | `https://docs.github.com/${string}`
     | `https://openrouter.ai/${string}`
     | `https://docs.marimo.io/${string}`
     | `https://docs.python.org/${string}`

package/src/core/ai/tools/__tests__/run-cells-tool.test.ts

@@ -411,6 +411,212 @@ describe("RunStaleCellsTool", () => {
     });
   });
 
+  describe("output truncation", () => {
+    it("should summarize text/html output instead of dumping raw content", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "fig.show()", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeHtml = `<div>${"x".repeat(2_000_000)}</div>`;
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: null,
+          imageUrl: null,
+          output: { mimetype: "text/html", data: largeHtml },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      expect(result.status).toBe("success");
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).toContain("HTML Output:");
+      expect(output).toContain("text/html");
+      expect(output.length).toBeLessThan(200);
+      expect(output).not.toContain(largeHtml);
+    });
+
+    it("should truncate large text output to MAX_TEXT_OUTPUT_CHARS", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "print(big_string)", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeText = "a".repeat(10_000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: largeText,
+          imageUrl: null,
+          output: { mimetype: "text/plain", data: largeText },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).toContain("[TRUNCATED:");
+      expect(output).toContain("Full output visible in the notebook UI.");
+      // Output should be capped (2000 chars content + "Output:\n" prefix + truncation message)
+      expect(output.length).toBeLessThan(2200);
+    });
+
+    it("should omit output for cells that exceed total output budget", async () => {
+      const cellIds = Array.from(
+        { length: 25 },
+        (_, i) => `budget-cell-${i}` as CellId,
+      );
+      const cellData: Record<string, { code: string; edited: boolean }> = {};
+      for (const id of cellIds) {
+        cellData[id] = { code: "x = 1", edited: true };
+      }
+
+      const notebook = MockNotebook.notebookState({ cellData });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        for (const id of cellIds) {
+          updatedNotebook.cellRuntime[id] = {
+            ...updatedNotebook.cellRuntime[id],
+            status: "idle",
+          };
+        }
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      // Each cell produces ~2008 chars of formatted output ("Output:\n" + 2000 chars).
+      // After 20 cells the running total exceeds MAX_TOOL_OUTPUT_CHARS (40,000).
+      const content = "a".repeat(2000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: content,
+          imageUrl: null,
+          output: { mimetype: "text/plain", data: content },
+        },
+        consoleOutputs: null,
+        cellName: "cell",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      expect(result.cellsToOutput?.[cellIds[0]]?.cellOutput).toContain(
+        "Output:",
+      );
+      expect(result.cellsToOutput?.[cellIds[24]]?.cellOutput).toBe(
+        "Cell executed (output omitted due to context limits).",
+      );
+    });
+
+    it("should use higher truncation limit for error outputs", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "raise Exception()", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      // 2500 chars sits between MAX_TEXT_OUTPUT_CHARS (2000) and MAX_ERROR_OUTPUT_CHARS (3000)
+      const errorContent = "E".repeat(2500);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: errorContent,
+          imageUrl: null,
+          output: {
+            mimetype: "application/vnd.marimo+error",
+            data: errorContent,
+          },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).not.toContain("[TRUNCATED:");
+      expect(output).toContain(errorContent);
+    });
+
+    it("should truncate large console output", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: 'print("x" * 10000)', edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeConsoleText = "x".repeat(10_000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: null,
+        consoleOutputs: [
+          {
+            outputType: "text",
+            processedContent: largeConsoleText,
+            imageUrl: null,
+            output: { mimetype: "text/plain", data: largeConsoleText },
+          },
+        ],
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const consoleOutput =
+        result.cellsToOutput?.[cellId1]?.consoleOutput ?? "";
+      expect(consoleOutput).toContain("[TRUNCATED:");
+      expect(consoleOutput.length).toBeLessThan(2200);
+    });
+  });
+
   describe("cell execution completion", () => {
     it("should complete immediately if cells are already idle", async () => {
       const notebook = MockNotebook.notebookState({