@marimo-team/frontend 0.24.1-dev99 → 0.24.2-dev129

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

@@ -206,7 +206,7 @@ export const FileActionsDropdown = ({
     </DropdownMenuTrigger>
     <DropdownMenuContent
       align="end"
-      className={contentClassName ?? "print:hidden w-[220px]"}
+      className={contentClassName ?? "print:hidden w-[240px]"}
       onClick={(e) => e.stopPropagation()}
       onCloseAutoFocus={(e) => e.preventDefault()}
     >

package/src/components/editor/file-tree/file-search-results.tsx

@@ -0,0 +1,142 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { FileIcon, FolderIcon } from "lucide-react";
+import type { RefObject } from "react";
+import {
+  Tree,
+  type NodeRendererProps,
+  type RowRendererProps,
+  type TreeApi,
+} from "react-arborist";
+import { Spinner } from "@/components/icons/spinner";
+import { cn } from "@/utils/cn";
+import { useTreeDndManager } from "./dnd-wrapper";
+import { FileTreeRow } from "./file-tree-row";
+import type { FileTreeNode } from "./requesting-tree";
+import type { useFileSearch } from "./use-file-search";
+
+export function FileSearchResults({
+  treeRef,
+  search,
+  height,
+  onReveal,
+}: {
+  treeRef: RefObject<TreeApi<FileTreeNode> | null>;
+  search: ReturnType<typeof useFileSearch>;
+  height: number;
+  onReveal: (node: FileTreeNode) => Promise<void>;
+}) {
+  const dndManager = useTreeDndManager();
+  const { state, refetch } = search;
+  if (state.status === "idle") {
+    return null;
+  }
+
+  if (state.status === "error") {
+    return (
+      <div role="alert" className="px-3 py-2 text-sm">
+        Could not search files.{" "}
+        <button type="button" className="underline" onClick={refetch}>
+          Retry
+        </button>
+      </div>
+    );
+  }
+  if (state.status === "loading") {
+    return (
+      <div
+        role="status"
+        className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground"
+      >
+        <Spinner size="small" />
+        Searching files…
+      </div>
+    );
+  }
+  const { files, hasMore, isPartial } = state;
+  const count = files.length;
+  return (
+    <div
+      onKeyDownCapture={(event) => {
+        if (
+          event.key === "Enter" &&
+          event.target instanceof HTMLElement &&
+          event.target.closest('[role="tree"]')
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          treeRef.current?.focusedNode?.activate();
+        }
+      }}
+    >
+      {isPartial && (
+        <div role="alert" className="px-3 py-2 text-xs text-muted-foreground">
+          Some locations could not be searched.{" "}
+          <button type="button" className="underline" onClick={refetch}>
+            Retry
+          </button>
+        </div>
+      )}
+      <p role="status" className="px-3 py-2 text-xs text-muted-foreground">
+        {files.length
+          ? `${count} ${count === 1 ? "match" : "matches"}`
+          : "No matching files or folders."}
+        {hasMore && " · Refine your search for more results."}
+      </p>
+      <Tree<FileTreeNode>
+        ref={treeRef}
+        data={files}
+        childrenAccessor={() => null}
+        width="100%"
+        height={Math.max(0, height - 48 - (isPartial ? 48 : 0))}
+        rowHeight={48}
+        overscanCount={8}
+        dndManager={dndManager}
+        disableDrag={true}
+        disableDrop={true}
+        disableEdit={true}
+        disableMultiSelection={true}
+        selectionFollowsFocus={true}
+        rowClassName="outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"
+        renderRow={SearchResultRow}
+        onActivate={(node) => {
+          void onReveal(node.data);
+        }}
+      >
+        {SearchResult}
+      </Tree>
+      <p className="px-3 text-xs text-muted-foreground">
+        Enter or double-click to open · Esc to clear
+      </p>
+    </div>
+  );
+}
+
+function SearchResultRow(props: RowRendererProps<FileTreeNode>) {
+  return <FileTreeRow {...props} ariaLabel={props.node.data.path} />;
+}
+
+function SearchResult({ node }: NodeRendererProps<FileTreeNode>) {
+  const Icon = node.data.isDirectory ? FolderIcon : FileIcon;
+  return (
+    <div
+      className={cn(
+        "flex h-full items-start gap-2.5 px-3 py-1 cursor-pointer hover:bg-accent/50",
+        node.isSelected && "bg-accent/60",
+      )}
+      onDoubleClick={(event) => {
+        event.stopPropagation();
+        node.activate();
+      }}
+      title={node.data.path}
+    >
+      <Icon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="truncate text-sm leading-5">{node.data.name}</div>
+        <div className="truncate text-xs leading-4 text-muted-foreground">
+          {node.data.path}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { RowRendererProps } from "react-arborist";
+import type { FileTreeNode } from "./requesting-tree";
+
+export function FileTreeRow({
+  node,
+  attrs,
+  innerRef,
+  children,
+  ariaLabel = node.data.name,
+}: RowRendererProps<FileTreeNode> & { ariaLabel?: string }) {
+  return (
+    <div
+      {...attrs}
+      ref={innerRef}
+      aria-label={ariaLabel}
+      aria-expanded={node.isInternal ? node.isOpen : undefined}
+      onFocus={(event) => {
+        event.stopPropagation();
+        attrs.onFocus?.(event);
+        if (event.target === event.currentTarget && !node.isFocused) {
+          node.focus();
+        }
+      }}
+      onClick={(event) => {
+        if (attrs.onClick) {
+          attrs.onClick(event);
+        } else {
+          node.select();
+        }
+        if (!event.defaultPrevented) {
+          event.currentTarget.focus({ preventScroll: true });
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -156,11 +156,12 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
       onDownload={disableFileDownloads ? undefined : handleDownload}
       actions={
         <>
-          {file.isMarimoFile && onOpenNotebook && !isWasm() && (
+          {data.file.isMarimoFile && onOpenNotebook && !isWasm() && (
             <Tooltip content="Open notebook">
               <Button
                 variant="text"
                 size="xs"
+                aria-label="Open notebook"
                 onClick={(evt) => onOpenNotebook(evt)}
               >
                 <ExternalLinkIcon className="h-3.5 w-3.5" />

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

@@ -189,6 +189,8 @@ export const MediaRenderer: React.FC<MediaSource & { mimeType: string }> = ({
  * based on MIME type. Used by both the local file viewer and the
  * storage file viewer.
  */
+const EMPTY_EXTENSIONS: readonly Extension[] = [];
+
 export const FileContentRenderer: React.FC<{
   mimeType: string;
   filename?: string;
@@ -199,7 +201,7 @@ export const FileContentRenderer: React.FC<{
   readOnly?: boolean;
   onChange?: (value: string) => void;
   /** Additional CodeMirror extensions (e.g. save hotkey). */
-  extensions?: Extension[];
+  extensions?: readonly Extension[];
 }> = ({
   mimeType,
   filename,
@@ -207,7 +209,7 @@ export const FileContentRenderer: React.FC<{
   mediaSource,
   readOnly = true,
   onChange,
-  extensions = [],
+  extensions = EMPTY_EXTENSIONS,
 }) => {
   const { theme } = useTheme();
 

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

@@ -22,6 +22,7 @@ export type FileTreeNode = Omit<FileInfo, "children"> & {
   isRoot: boolean;
   rootPath: string;
   isPrimaryRoot: boolean;
+  loadState?: "unloaded" | "loading" | "loaded" | "error";
 };
 
 /**
@@ -66,6 +67,7 @@ export class RequestingTree {
   }
 
   private roots: FileRoot[] = [];
+  private pendingExpansions = new Map<string, Promise<boolean>>();
   private onChange: (data: FileTreeNode[]) => void = Functions.NOOP;
   private path = new PathBuilder("/");
 
@@ -87,12 +89,7 @@ export class RequestingTree {
           const data = await this.callbacks.listFiles({
             path: primaryRoot.path,
           });
-          this.delegate.update({
-            id: this.getPrimaryRootId(),
-            changes: {
-              children: annotateFiles(data.files, primaryRoot),
-            },
-          });
+          this.updateDirectory(this.getPrimaryRootId(), data.files);
         }
       } catch (error) {
         toast({
@@ -105,24 +102,91 @@ export class RequestingTree {
     this.emitChange();
   };
 
-  async expand(id: string): Promise<boolean> {
+  expand(id: string): Promise<boolean> {
+    return this.requestDirectory(id);
+  }
+
+  private requestDirectory(id: string, force = false): Promise<boolean> {
+    const pending = this.pendingExpansions.get(id);
+    if (pending) {
+      return pending;
+    }
     const node = this.delegate.find(id);
     if (!node?.data.isDirectory) {
-      return false;
+      return Promise.resolve(false);
     }
 
-    if (node.children && node.children.length > 0) {
-      return true;
+    if (!force && node.data.loadState === "loaded") {
+      return Promise.resolve(true);
     }
 
-    const data = await this.callbacks.listFiles({ path: node.data.path });
-    this.delegate.update({
-      id,
-      changes: {
-        children: annotateFiles(data.files, this.getRootForNode(node.data)),
-      },
+    const request = this.loadDirectory(id, node.data).finally(() => {
+      this.pendingExpansions.delete(id);
     });
+    this.pendingExpansions.set(id, request);
+    return request;
+  }
+
+  private async loadDirectory(
+    id: string,
+    node: FileTreeNode,
+  ): Promise<boolean> {
+    this.delegate.update({ id, changes: { loadState: "loading" } });
     this.emitChange();
+    try {
+      const data = await this.callbacks.listFiles({ path: node.path });
+      this.updateDirectory(id, data.files);
+      return true;
+    } catch (error) {
+      this.delegate.update({ id, changes: { loadState: "error" } });
+      toast({
+        title: `Could not load ${node.name}`,
+        description: prettyError(error),
+      });
+      return false;
+    } finally {
+      this.emitChange();
+    }
+  }
+
+  getRoots(): readonly FileRoot[] {
+    return this.roots;
+  }
+
+  async reveal(node: FileTreeNode): Promise<boolean> {
+    const relative = relativePath(node.path as FilePath, node.rootPath);
+    if (relative === null) {
+      return false;
+    }
+    let path = node.rootPath as FilePath;
+    const parts = relative.split(pathDelimiter(node.rootPath)).filter(Boolean);
+    if (!node.isDirectory) {
+      parts.pop();
+    }
+    for (const part of [null, ...parts]) {
+      if (part !== null) {
+        const parentId = fileTreeNodeId(node.rootPath, path);
+        path = joinPath(path, part);
+        // Search sees the live filesystem; a cached parent may not contain
+        // a directory that was created since its last listing.
+        if (!this.delegate.find(fileTreeNodeId(node.rootPath, path))) {
+          if (!(await this.requestDirectory(parentId, true))) {
+            return false;
+          }
+        }
+      }
+      const id = fileTreeNodeId(node.rootPath, path);
+      if (!this.delegate.find(id)) {
+        toast({
+          title: "Could not reveal folder",
+          description: `The folder may have moved or been deleted: ${path}`,
+        });
+        return false;
+      }
+      if (!(await this.expand(id))) {
+        return false;
+      }
+    }
     return true;
   }
 
@@ -252,7 +316,13 @@ export class RequestingTree {
         .map((id) => this.delegate.find(id)?.data.path)
         .filter((path): path is string => Boolean(path)),
     ];
-    await this.refreshPaths(paths);
+    await this.refreshPaths(
+      paths,
+      new Set([
+        ...this.roots.map((root) => fileTreeNodeId(root.path, root.path)),
+        ...ids,
+      ]),
+    );
   };
 
   refreshPath = async (path: FilePath): Promise<void> => {
@@ -344,8 +414,13 @@ export class RequestingTree {
     return node;
   }
 
-  private refreshPaths = async (paths: string[]): Promise<void> => {
-    const uniquePaths = [...new Set(paths)];
+  private refreshPaths = async (
+    paths: string[],
+    retainedIds?: ReadonlySet<string>,
+  ): Promise<void> => {
+    const uniquePaths = [...new Set(paths)].toSorted(
+      (left, right) => left.length - right.length,
+    );
     if (uniquePaths.length === 0) {
       return;
     }
@@ -360,31 +435,84 @@ export class RequestingTree {
       if (!result) {
         continue;
       }
-      // The same absolute path may appear below multiple overlapping roots.
-      // Refresh every occurrence, while keeping each occurrence in its own ID
-      // namespace and preserving its root metadata.
+      // Fetch overlapping paths once, but retain loaded folders independently
+      // for each root-qualified occurrence.
       for (const root of this.roots) {
-        const node = this.delegate.find(fileTreeNodeId(root.path, path));
-        if (!node?.data.isDirectory) {
-          continue;
+        const id = fileTreeNodeId(root.path, path);
+        if (!retainedIds || retainedIds.has(id)) {
+          this.updateDirectory(id, result.files, retainedIds);
         }
-        this.delegate.update({
-          id: node.id,
-          changes: {
-            children: annotateFiles(result.files, root),
-          },
-        });
       }
     }
     this.emitChange();
   };
 
+  private updateDirectory(
+    id: string,
+    files: FileInfo[],
+    retainedIds?: ReadonlySet<string>,
+  ): void {
+    const node = this.delegate.find(id)?.data;
+    if (!node?.isDirectory) {
+      return;
+    }
+    const children = mergeDirectoryChildren(
+      annotateFiles(files, this.getRootForNode(node)),
+      node.children,
+    );
+    this.delegate.update({
+      id,
+      changes: {
+        children: retainedIds
+          ? invalidateClosedDirectories(children, retainedIds)
+          : children,
+        loadState: "loaded",
+      },
+    });
+  }
+
   private emitChange(): void {
     const data = this.delegate.data;
-    this.onChange(this.roots.length === 1 ? (data[0]?.children ?? []) : data);
+    // SimpleTree mutates child arrays in place. Publish a new array so React
+    // observes completed directory loads even when the root is flattened.
+    this.onChange(
+      this.roots.length === 1 ? [...(data[0]?.children ?? [])] : data,
+    );
   }
 }
 
+function mergeDirectoryChildren(
+  files: FileTreeNode[],
+  previous: FileTreeNode[],
+): FileTreeNode[] {
+  const byId = new Map(previous.map((node) => [node.id, node]));
+  return files.map((file) => {
+    const old = byId.get(file.id);
+    if (!file.isDirectory || !old?.isDirectory) {
+      return file;
+    }
+    return { ...file, children: old.children, loadState: old.loadState };
+  });
+}
+
+function invalidateClosedDirectories(
+  files: FileTreeNode[],
+  openIds: ReadonlySet<string>,
+): FileTreeNode[] {
+  return files.map((file) => {
+    if (!file.isDirectory) {
+      return file;
+    }
+    if (!openIds.has(file.id)) {
+      return { ...file, children: [], loadState: "unloaded" };
+    }
+    return {
+      ...file,
+      children: invalidateClosedDirectories(file.children, openIds),
+    };
+  });
+}
+
 function toRootNode(root: FileRoot): FileTreeNode {
   return {
     id: fileTreeNodeId(root.path, root.path),
@@ -396,6 +524,7 @@ function toRootNode(root: FileRoot): FileTreeNode {
     isRoot: true,
     rootPath: root.path,
     isPrimaryRoot: root.isPrimary,
+    loadState: "unloaded",
   };
 }
 
@@ -404,6 +533,7 @@ function annotateFiles(files: FileInfo[], root: FileRoot): FileTreeNode[] {
     ...file,
     id: fileTreeNodeId(root.path, file.path),
     children: annotateFiles(file.children ?? [], root),
+    loadState: file.children?.length ? "loaded" : "unloaded",
     isRoot: false,
     rootPath: root.path,
     isPrimaryRoot: root.isPrimary,

package/src/components/editor/file-tree/use-file-search.ts

@@ -0,0 +1,142 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRequestClient } from "@/core/network/requests";
+import { useDebounce } from "@/hooks/useDebounce";
+import {
+  fileTreeNodeId,
+  type FileTreeNode,
+  type RequestingTree,
+} from "./requesting-tree";
+
+const RESULT_LIMIT = 200;
+
+export type FileSearchState =
+  | { status: "idle" }
+  | { status: "loading"; query: string }
+  | { status: "error"; query: string; error: unknown }
+  | {
+      status: "success";
+      query: string;
+      files: FileTreeNode[];
+      hasMore: boolean;
+      isPartial: boolean;
+    };
+
+export function useFileSearch({
+  query,
+  tree,
+  showHiddenFiles,
+}: {
+  query: string;
+  tree: RequestingTree;
+  showHiddenFiles: boolean;
+}): { state: FileSearchState; refetch: () => void } {
+  const { sendSearchFiles } = useRequestClient();
+  const debouncedQuery = useDebounce(query, 300);
+  const pending = useRef<Promise<void>>(Promise.resolve());
+  const [revision, setRevision] = useState(0);
+  const refetch = useCallback(() => setRevision((value) => value + 1), []);
+  const [result, setResult] = useState<FileSearchState>({ status: "idle" });
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!query || query !== debouncedQuery) {
+      return;
+    }
+    setResult({ status: "loading", query });
+    // Let the in-flight server scan finish before starting another. Superseded
+    // queued queries and remaining roots are skipped, keeping scan work bounded.
+    const request = pending.current.then(async () => {
+      const filesByPath = new Map<string, FileTreeNode>();
+      let rootLimitReached = false;
+      let failedRootCount = 0;
+      const roots = tree.getRoots();
+      for (const root of roots) {
+        if (cancelled) {
+          return;
+        }
+        try {
+          const response = await sendSearchFiles({
+            query,
+            path: root.path,
+            includeFiles: true,
+            includeDirectories: true,
+            includeHidden: showHiddenFiles,
+            depth: 20,
+            limit: RESULT_LIMIT,
+          });
+          rootLimitReached ||= response.files.length >= RESULT_LIMIT;
+          for (const file of response.files) {
+            const existing = filesByPath.get(file.path);
+            if (existing && (!root.isPrimary || existing.isPrimaryRoot)) {
+              continue;
+            }
+            filesByPath.set(file.path, {
+              ...file,
+              id: fileTreeNodeId(root.path, file.path),
+              children: [],
+              isRoot: false,
+              rootPath: root.path,
+              isPrimaryRoot: root.isPrimary,
+            });
+          }
+        } catch {
+          failedRootCount += 1;
+        }
+      }
+      if (!cancelled) {
+        if (roots.length > 0 && failedRootCount === roots.length) {
+          setResult({
+            status: "error",
+            query,
+            error: new Error("Could not search any root"),
+          });
+          return;
+        }
+        const rank = (file: FileTreeNode) => {
+          const name = file.name.toLowerCase();
+          const needle = query.toLowerCase();
+          if (name === needle) {
+            return 0;
+          }
+          if (name.startsWith(needle)) {
+            return 1;
+          }
+          return 2;
+        };
+        const sortedFiles = [...filesByPath.values()].toSorted(
+          (left, right) =>
+            rank(left) - rank(right) || left.name.localeCompare(right.name),
+        );
+        setResult({
+          status: "success",
+          isPartial: failedRootCount > 0,
+          query,
+          files: sortedFiles.slice(0, RESULT_LIMIT),
+          hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+        });
+      }
+    });
+    pending.current = request.catch((error: unknown) => {
+      if (!cancelled) {
+        setResult({ status: "error", query, error });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [query, debouncedQuery, tree, showHiddenFiles, revision, sendSearchFiles]);
+
+  if (!query) {
+    return { state: { status: "idle" }, refetch };
+  }
+  if (
+    query !== debouncedQuery ||
+    result.status === "idle" ||
+    result.query !== query
+  ) {
+    return { state: { status: "loading", query }, refetch };
+  }
+  return { state: result, refetch };
+}

package/src/components/editor/file-tree/use-hover-expand.ts

@@ -0,0 +1,34 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useEffect, useRef } from "react";
+import type { NodeApi } from "react-arborist";
+import type { FileTreeNode } from "./requesting-tree";
+
+export const HOVER_EXPAND_DELAY = 600;
+
+export function useHoverExpand(
+  node: NodeApi<FileTreeNode>,
+  isHovering: boolean,
+) {
+  const tree = node.tree;
+  const attemptedNode = useRef<string | null>(null);
+  useEffect(() => {
+    if (!isHovering) {
+      attemptedNode.current = null;
+      return;
+    }
+    if (
+      !node.data.isDirectory ||
+      node.isOpen ||
+      attemptedNode.current === node.id
+    ) {
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      // A failed load closes the folder. Retry only after leaving and reentering.
+      attemptedNode.current = node.id;
+      tree.open(node.id);
+    }, HOVER_EXPAND_DELAY);
+    return () => window.clearTimeout(timeout);
+  }, [isHovering, node.data.isDirectory, node.isOpen, node.id, tree]);
+}