@marimo-team/frontend 0.25.2-dev0 → 0.25.2-dev10

package/src/components/editor/actions/useSetOutputsExpanded.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useCallback } from "react";
+import {
+  getNotebook,
+  type NotebookState,
+  useCellActions,
+} from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { isOutputEmpty } from "@/core/cells/outputs";
+import { useRequestClient } from "@/core/network/requests";
+import type { CellConfig } from "@/core/network/types";
+import { Objects } from "@/utils/objects";
+
+/**
+ * The `expand_output` config changes needed to expand or clamp every output.
+ *
+ * Both actions skip cells without output, so their source isn't annotated
+ * with a config that has no effect.
+ */
+export function outputExpansionConfigs(
+  notebook: NotebookState,
+  expanded: boolean,
+): Record<CellId, Partial<CellConfig>> {
+  const configs: Record<CellId, Partial<CellConfig>> = {};
+  for (const cellId of notebook.cellIds.inOrderIds) {
+    const cell = notebook.cellData[cellId];
+    if (
+      cell === undefined ||
+      (cell.config.expand_output ?? false) === expanded
+    ) {
+      continue;
+    }
+    if (isOutputEmpty(notebook.cellRuntime[cellId]?.output)) {
+      continue;
+    }
+    configs[cellId] = { expand_output: expanded };
+  }
+  return configs;
+}
+
+/**
+ * Hook returning a callback that shows every cell's output in full, or clamps
+ * every output to a fixed height, by setting each cell's `expand_output` config.
+ */
+export const useSetOutputsExpanded = () => {
+  const { updateCellConfig } = useCellActions();
+  const { saveCellConfig } = useRequestClient();
+
+  return useCallback(
+    async (expanded: boolean) => {
+      const newConfigs = outputExpansionConfigs(getNotebook(), expanded);
+
+      const entries = Objects.entries(newConfigs);
+      if (entries.length === 0) {
+        return;
+      }
+
+      await saveCellConfig({ configs: newConfigs });
+
+      for (const [cellId, config] of entries) {
+        updateCellConfig({ cellId, config });
+      }
+    },
+    [updateCellConfig, saveCellConfig],
+  );
+};

package/src/components/tracing/tracing.test.tsx

@@ -5,36 +5,36 @@ import { formatChartTime } from "./utils";
 describe("formatChartTime", () => {
   beforeAll(() => {
     // Mock Date to always use UTC
-    vi.spyOn(global.Date.prototype, "getFullYear").mockImplementation(
-      function (this: Date) {
-        return this.getUTCFullYear();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getMonth").mockImplementation(
-      function (this: Date) {
-        return this.getUTCMonth();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getDate").mockImplementation(
-      function (this: Date) {
-        return this.getUTCDate();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getHours").mockImplementation(
-      function (this: Date) {
-        return this.getUTCHours();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getMinutes").mockImplementation(
-      function (this: Date) {
-        return this.getUTCMinutes();
-      },
-    );
-    vi.spyOn(global.Date.prototype, "getSeconds").mockImplementation(
-      function (this: Date) {
-        return this.getUTCSeconds();
-      },
-    );
+    vi.spyOn(global.Date.prototype, "getFullYear").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCFullYear();
+    });
+    vi.spyOn(global.Date.prototype, "getMonth").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCMonth();
+    });
+    vi.spyOn(global.Date.prototype, "getDate").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCDate();
+    });
+    vi.spyOn(global.Date.prototype, "getHours").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCHours();
+    });
+    vi.spyOn(global.Date.prototype, "getMinutes").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCMinutes();
+    });
+    vi.spyOn(global.Date.prototype, "getSeconds").mockImplementation(function (
+      this: Date,
+    ) {
+      return this.getUTCSeconds();
+    });
     vi.spyOn(global.Date.prototype, "getMilliseconds").mockImplementation(
       function (this: Date) {
         return this.getUTCMilliseconds();

package/src/core/edit-app.tsx

@@ -23,6 +23,7 @@ import {
   useRunStaleCells,
 } from "../components/editor/cell/useRunCells";
 import { useSetCodeVisibility } from "../components/editor/actions/useSetCodeVisibility";
+import { useSetOutputsExpanded } from "../components/editor/actions/useSetOutputsExpanded";
 import { CellArray } from "../components/editor/renderers/cell-array";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
 import { useHotkey } from "../hooks/useHotkey";
@@ -115,6 +116,7 @@ export const EditApp: React.FC<AppProps> = ({
   const runAllCells = useRunAllCells();
   const togglePresenting = useTogglePresenting();
   const setCodeVisibility = useSetCodeVisibility();
+  const setOutputsExpanded = useSetOutputsExpanded();
 
   // HOTKEYS
   useHotkey("global.runStale", () => {
@@ -141,6 +143,20 @@ export const EditApp: React.FC<AppProps> = ({
   useHotkey("global.hideAllMarkdownCode", () => {
     setCodeVisibility(true, "markdown");
   });
+  useHotkey(
+    "global.expandAllOutputs",
+    () => {
+      setOutputsExpanded(true);
+    },
+    { disabled: !isEditing },
+  );
+  useHotkey(
+    "global.clampAllOutputs",
+    () => {
+      setOutputsExpanded(false);
+    },
+    { disabled: !isEditing },
+  );
   useHotkey("global.collapseAllSections", () => {
     collapseAllCells();
   });

package/src/core/hotkeys/hotkeys.ts

@@ -389,6 +389,18 @@ const DEFAULT_HOT_KEY = {
     group: "Editing",
     key: NOT_SET,
   },
+  "global.expandAllOutputs": {
+    name: "Expand all outputs",
+    group: "Editing",
+    key: NOT_SET,
+    additionalKeywords: ["show full output", "unclamp"],
+  },
+  "global.clampAllOutputs": {
+    name: "Clamp all outputs",
+    group: "Editing",
+    key: NOT_SET,
+    additionalKeywords: ["collapse outputs", "shrink outputs"],
+  },
   "global.collapseAllSections": {
     name: "Collapse all sections",
     group: "Editing",

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type LucideIcon, CornerLeftUp } from "lucide-react";
+import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
 import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
@@ -12,7 +12,6 @@ import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { NativeSelect } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
@@ -472,12 +471,19 @@ export const FileBrowser = ({
   //
   // Assumes that path contains at least one delimiter, which is true
   // only if this is an absolute path.
-  const { parentDirectories } = getProtocolAndParentDirectories({
+  const { protocol, parentDirectories } = getProtocolAndParentDirectories({
     path,
     delimiter,
     initialPath,
     restrictNavigation,
   });
+  const breadcrumbs = parentDirectories.toReversed().map((dir) => ({
+    path: dir,
+    name:
+      dir === protocol
+        ? protocol
+        : (dir.split(delimiter).findLast(Boolean) ?? dir),
+  }));
 
   const selectionKindLabel =
     selectionMode === "all"
@@ -515,18 +521,42 @@ export const FileBrowser = ({
     <div>
       {error && <Banner kind="danger">{error.message}</Banner>}
       {renderHeader()}
-      <NativeSelect
-        className="mt-2 w-full"
-        placeholder={path}
-        value={path}
-        onChange={(e) => setNewPath(e.target.value)}
-      >
-        {parentDirectories.map((dir) => (
-          <option value={dir} key={dir}>
-            {dir}
-          </option>
-        ))}
-      </NativeSelect>
+      <nav aria-label="Current directory" className="mt-2">
+        <ol className="flex flex-wrap items-center gap-0.5 text-sm">
+          {breadcrumbs.map((crumb, index) => {
+            const isCurrent = index === breadcrumbs.length - 1;
+            return (
+              <li key={crumb.path} className="flex items-center gap-0.5">
+                {index > 0 && (
+                  <ChevronRightIcon
+                    size={14}
+                    className="text-muted-foreground shrink-0"
+                    aria-hidden={true}
+                  />
+                )}
+                <button
+                  type="button"
+                  title={crumb.path}
+                  aria-current={isCurrent ? "page" : undefined}
+                  onClick={() => {
+                    if (!isCurrent) {
+                      setNewPath(crumb.path);
+                    }
+                  }}
+                  className={cn(
+                    "rounded px-1 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+                    isCurrent
+                      ? "font-medium cursor-default"
+                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                  )}
+                >
+                  {crumb.name}
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
 
       {data && typeof data.total_count === "number" && (
         <div className="text-xs text-muted-foreground mt-1 px-1">

package/src/plugins/impl/__tests__/FileBrowserPlugin.test.tsx

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { initialModeAtom } from "@/core/mode";
@@ -187,7 +193,7 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
     const docsRow = docs.closest('[role="row"]')!;
     fireEvent.keyDown(docsRow, { key: "ArrowDown" }); // move active off the parent
     fireEvent.click(docs); // navigate into "docs"
-    await screen.findByText("docs"); // listing reloads (mock returns same files)
+    await within(screen.getByRole("grid")).findByText("docs"); // listing reloads (mock returns same files)
     const rows = screen.getAllByRole("row");
     expect(rows[0]).toHaveAttribute("tabindex", "0");
     // the focused row must match the only tabbable row
@@ -361,3 +367,80 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
 function rowFor(name: string): HTMLElement {
   return screen.getByText(name).closest('[role="row"]') as HTMLElement;
 }
+
+describe("FileBrowserPlugin breadcrumbs", () => {
+  function breadcrumbs() {
+    return within(
+      screen.getByRole("navigation", { name: "Current directory" }),
+    );
+  }
+
+  it("renders a crumb per ancestor with the current directory last", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["/", "home", "user"]);
+    expect(breadcrumbs().getByRole("button", { name: "user" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      breadcrumbs().getByRole("button", { name: "home" }),
+    ).not.toHaveAttribute("aria-current");
+  });
+
+  it("keeps focus on a crumb after navigating to it", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    const home = breadcrumbs().getByRole("button", { name: "home" });
+    home.focus();
+    fireEvent.click(home);
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    const current = breadcrumbs().getByRole("button", { name: "home" });
+    expect(current).toHaveAttribute("aria-current", "page");
+    expect(current).toBe(home);
+    expect(current).toHaveFocus();
+  });
+
+  it("does not reload when the current crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "user" }));
+    expect(listDirectory).toHaveBeenCalledTimes(1);
+  });
+
+  it("navigates to an ancestor when a crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "home" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "/" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/" }),
+    );
+  });
+
+  it("hides ancestors outside the initial path when navigation is restricted", async () => {
+    render(
+      <FileBrowser
+        initialPath="/home/user"
+        filetypes={[]}
+        selectionMode="all"
+        multiple={true}
+        label={null}
+        restrictNavigation={true}
+        value={[]}
+        setValue={vi.fn()}
+        host={document.createElement("div")}
+        list_directory={mockListDirectory(FILES)}
+      />,
+    );
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["user"]);
+  });
+});

package/dist/assets/has-cJsIKK9t.js

@@ -1 +0,0 @@
-import{Wa as e}from"./index-DafnX1Xx.js";var t=Object.prototype.hasOwnProperty;function n(e,n){return e!=null&&t.call(e,n)}function r(t,r){return t!=null&&e(t,r,n)}export{r as t};