@marimo-team/frontend 0.25.2-dev4 → 0.25.2-dev40

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -18,8 +18,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
 import { API } from "@/core/network/api";
 import { pairPreviewAtom } from "@/core/config/pair";
-import { getSessionId } from "@/core/kernel/session";
-import { useFilename } from "@/core/saving/filename";
+import { stableSessionIdAtom } from "@/core/kernel/session";
 import {
   AGENT_LABELS,
   AGENT_TABS,
@@ -54,16 +53,14 @@ export const PairWithAgentModal: React.FC<{
   const [activeTab, setActiveTab] = useState<AgentTab>("claude");
   const runtimeManager = useRuntimeManager();
   const preview = useAtomValue(pairPreviewAtom);
-  const filename = useFilename();
+  const stableSessionId = useAtomValue(stableSessionIdAtom);
   const commandStep = preview ? 1 : 2;
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
   const connection: ConnectionInfo = {
     url: runtimeManager.httpURL.toString(),
-    file:
-      getFileFromURL(window.location.href) ??
-      (preview ? filename || undefined : undefined),
-    session: preview ? getSessionId() : undefined,
+    file: preview ? undefined : getFileFromURL(window.location.href),
+    session: preview ? (stableSessionId ?? undefined) : undefined,
   };
 
   return (

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

@@ -7,6 +7,8 @@ import {
   CheckIcon,
   ChevronDownCircleIcon,
   ChevronRightCircleIcon,
+  ChevronsDownUpIcon,
+  ChevronsUpDownIcon,
   ClipboardCopyIcon,
   CodeIcon,
   CommandIcon,
@@ -100,6 +102,7 @@ import type { ActionButton } from "./types";
 import { useCopyNotebook } from "./useCopyNotebook";
 import { useRestartKernel } from "./useRestartKernel";
 import { useSetCodeVisibility } from "./useSetCodeVisibility";
+import { useSetOutputsExpanded } from "./useSetOutputsExpanded";
 
 const NOOP_HANDLER = (event?: Event) => {
   event?.preventDefault();
@@ -118,6 +121,7 @@ export function useNotebookActions({
   const [viewState] = useAtom(viewStateAtom);
   const kioskMode = useAtomValue(kioskModeAtom);
   const setCodeVisibility = useSetCodeVisibility();
+  const setOutputsExpanded = useSetOutputsExpanded();
   const [resolvedConfig] = useResolvedMarimoConfig();
   const capabilities = useAtomValue(capabilitiesAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
@@ -596,6 +600,22 @@ export function useNotebookActions({
       handle: () => setCodeVisibility(true, "markdown"),
       redundant: true,
     },
+    {
+      icon: <ChevronsUpDownIcon size={14} strokeWidth={1.5} />,
+      label: "Expand all outputs",
+      hotkey: "global.expandAllOutputs",
+      hidden: viewState.mode !== "edit",
+      handle: () => setOutputsExpanded(true),
+      redundant: true,
+    },
+    {
+      icon: <ChevronsDownUpIcon size={14} strokeWidth={1.5} />,
+      label: "Clamp all outputs",
+      hotkey: "global.clampAllOutputs",
+      hidden: viewState.mode !== "edit",
+      handle: () => setOutputsExpanded(false),
+      redundant: true,
+    },
     {
       icon: <ChevronRightCircleIcon size={14} strokeWidth={1.5} />,
       label: "Collapse all sections",

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/core/config/pair.ts

@@ -7,7 +7,6 @@ export const pairPreviewSchema = z.object({
   command: z.string(),
   templates: z.object({
     prompt: z.string(),
-    file: z.string(),
     session: z.string(),
     token_file: z.string(),
     token: z.string(),

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/core/kernel/session.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { init } from "@paralleldrive/cuid2";
+import { atom } from "jotai";
 import { Logger } from "@/utils/Logger";
 import type { TypedString } from "@/utils/typed";
 import { updateQueryParams } from "@/utils/urls";
@@ -9,6 +10,14 @@ import { store } from "../state/jotai";
 
 export type SessionId = TypedString<"SessionId">;
 
+/**
+ * Server-owned identity of the notebook Session. It survives browser reloads
+ * and reconnects and ends with the Session.
+ */
+export type StableSessionId = TypedString<"StableSessionId">;
+
+export const stableSessionIdAtom = atom<StableSessionId | null>(null);
+
 const createId = init({ length: 6 });
 
 export function generateSessionId(): SessionId {

package/src/core/wasm/__tests__/bootstrap.test.ts

@@ -3,7 +3,7 @@
 import { loadPyodide } from "pyodide";
 import type { PyodideInterface } from "pyodide";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DefaultWasmController } from "../worker/bootstrap";
+import { DefaultWasmController, requirementName } from "../worker/bootstrap";
 
 vi.mock("pyodide", () => ({ loadPyodide: vi.fn() }));
 vi.mock("../worker/getMarimoWheel", () => ({
@@ -61,3 +61,35 @@ describe("WASM runtime sources", () => {
     expect(controller.requirePyodide).toBe(pyodide);
   });
 });
+
+describe("requirementName", () => {
+  it("returns the distribution name for a bare requirement", () => {
+    expect(requirementName("pandas")).toBe("pandas");
+  });
+
+  it.each([
+    ["pandas==2.1.0", "pandas"],
+    ["pandas>=2", "pandas"],
+    ["pandas<=2", "pandas"],
+    ["pandas~=2.1", "pandas"],
+    ["pandas!=2.0", "pandas"],
+    ["nltools===0.6.0.dev2", "nltools"],
+  ])("cuts the specifier off %s", (requirement, expected) => {
+    expect(requirementName(requirement)).toBe(expected);
+  });
+
+  it("cuts extras and markers", () => {
+    expect(requirementName("rich[jupyter]>=13")).toBe("rich");
+    expect(requirementName('cowsay==6.1; sys_platform == "emscripten"')).toBe(
+      "cowsay",
+    );
+  });
+
+  it("cuts a URL requirement at the name", () => {
+    expect(requirementName("pkg @ https://example.com/pkg.whl")).toBe("pkg");
+  });
+
+  it("tolerates surrounding whitespace", () => {
+    expect(requirementName("  pandas >= 2  ")).toBe("pandas");
+  });
+});

package/src/core/wasm/worker/bootstrap.ts

@@ -30,6 +30,17 @@ type SessionResources = [
 //   3.b Install from micropip
 // 4. Initialize the notebook
 
+/**
+ * The distribution name of a PEP 508 requirement: "pandas>=2" -> "pandas".
+ *
+ * Extras, markers and URL forms are all cut at their first delimiter, which is
+ * enough for the "already installed" lookups this is used for.
+ */
+export function requirementName(requirement: string): string {
+  // Trim first: a leading space would otherwise split into an empty name.
+  return requirement.trim().split(/[[<>=!~;@\s]/)[0];
+}
+
 export class DefaultWasmController implements WasmController {
   protected pyodide: PyodideInterface | null = null;
   private packageLoadQueue = Promise.resolve();
@@ -314,18 +325,26 @@ export class DefaultWasmController implements WasmController {
     });
     loadSpan.end();
 
-    // Load from micropip
+    // Load from micropip.
+    //
+    // `imports` are PEP 508 requirements and may carry a version specifier
+    // ("pandas>=2", "nltools==0.6.0.dev2"). micropip wants them whole, but the
+    // "do we already have this?" checks below are keyed by name, so compare on
+    // the name and install the requirement.
     loadSpan = t.startSpan("micropip.install");
     const missingPackages = imports.filter(
-      (pkg) => !pyodide.loadedPackages[pkg],
+      (pkg) => !pyodide.loadedPackages[requirementName(pkg)],
     );
     if (missingPackages.length > 0) {
+      const byName = missingPackages.map(
+        (pkg) => [requirementName(pkg), pkg] as const,
+      );
       await pyodide
         .runPythonAsync(`
         import micropip
         import sys
         # Filter out builtins
-        missing = [p for p in ${JSON.stringify(missingPackages)} if p not in sys.modules]
+        missing = [req for name, req in ${JSON.stringify(byName)} if name not in sys.modules]
         if len(missing) > 0:
           print("Loading from micropip:", missing)
           await micropip.install(missing)

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -60,7 +60,11 @@ import {
   handleRemoveUIElements,
 } from "../kernel/handlers";
 import { queryParamHandlers } from "../kernel/queryParamHandlers";
-import type { SessionId } from "../kernel/session";
+import {
+  type SessionId,
+  type StableSessionId,
+  stableSessionIdAtom,
+} from "../kernel/session";
 import { initialRunCompletedAtom, kernelStateAtom } from "../kernel/state";
 import { type LayoutState, useLayoutActions } from "../layout/state";
 import { kioskModeAtom } from "../mode";
@@ -231,6 +235,7 @@ export function useMarimoKernelConnection(opts: {
     addStartupLog,
   } = useAlertActions();
   const setKioskMode = useSetAtom(kioskModeAtom);
+  const setStableSessionId = useSetAtom(stableSessionIdAtom);
   const setCapabilities = useSetAtom(capabilitiesAtom);
   const runtimeManager = useRuntimeManager();
   const transportType = useAtomValue(connectionTransportTypeAtom);
@@ -284,6 +289,10 @@ export function useMarimoKernelConnection(opts: {
           invalidateDataSourceDiscovery();
         }
         setKioskMode(msg.data.kiosk);
+        setStableSessionId(
+          (msg.data.stable_session_id as StableSessionId | null | undefined) ??
+            null,
+        );
         // A freshly started kernel has no breakpoints of its own; re-push
         // the client's set so they still apply, and clear the stale
         // highlighted line from the previous kernel instance.