@marimo-team/frontend 0.25.3-dev52 → 0.25.3-dev57

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BdCbOYjS.js"></script>
+    <script type="module" crossorigin src="./assets/index-Bu8_lPMx.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-DVplv7_D.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BrajqUja.js">
@@ -111,12 +111,12 @@
     <link rel="modulepreload" crossorigin href="./assets/arrays-0R2reF2y.js">
     <link rel="modulepreload" crossorigin href="./assets/once-6KNTRW0u.js">
     <link rel="modulepreload" crossorigin href="./assets/numbers-CsZVw3Dc.js">
-    <link rel="modulepreload" crossorigin href="./assets/useDebounce-B_ccBZTp.js">
-    <link rel="modulepreload" crossorigin href="./assets/input-ByHt6aoV.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDebounce-k9QTpQ9-.js">
+    <link rel="modulepreload" crossorigin href="./assets/input-BZdRe7pb.js">
     <link rel="modulepreload" crossorigin href="./assets/use-toast-Wu434mLr.js">
     <link rel="modulepreload" crossorigin href="./assets/requests-lt0JK8Jt.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-k9DpjH68.js">
-    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-usRSi1bb.js">
+    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-7DzehGyr.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-C5silF6g.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-DcgaW8fn.js">
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-uBIymjUX.js">
@@ -139,7 +139,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useTheme-DLtPc-39.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-DhhdOGGd.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es--06brOip.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-0e2dpq3z.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-T9_Y4Jlv.js">
     <link rel="modulepreload" crossorigin href="./assets/coerce-DWjFeXOY.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
@@ -154,40 +154,40 @@
     <link rel="modulepreload" crossorigin href="./assets/copy-KlhazlhB.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-BIpRENEC.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BRDCZeXA.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-pKc_bFac.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Djr5m5ac.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-8-a5vovc.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DqLsZnRn.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-PyMU3fBB.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-DmUUV8Xf.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BFeZMi7f.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-CfQ6i3QV.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-e6VlOmQP.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-pdKBv96t.js">
-    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DDjpV5RE.js">
+    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-C7neMPwh.js">
     <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CbjD81T1.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DzEMMFh0.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-BRYi026f.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DJhsFCsX.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-eAtVhbNZ.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DS6umAnH.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-D_0rd3_B.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-Csw35OD4.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-1h011wlH.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-C8Gw-D0Y.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-IoWE8PbW.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-CY8E4r9U.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DG7Ap4H4.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CxVozGAC.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-Qw1f8Jhy.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-Dof5VISm.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-Cb-nUK1F.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-63DyBLHQ.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-UrX9KO36.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-DyNE-o8o.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-C3rKm8_a.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-C8RhSVii.js">
     <link rel="modulepreload" crossorigin href="./assets/package-GSoSTiIK.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-BpMPWJoj.js">
-    <link rel="modulepreload" crossorigin href="./assets/error-entries-D3H6JH3A.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-gqFgG9Qd.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-entries-uyqOG5tg.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DTaqCu_d.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-ClkxCKxQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-BNDZZ97N.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BT8Qy5wh.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Bye6rCo4.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-DFqfW-Ym.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DlEjLCZ-.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-DA-62E-Y.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-Buu61juQ.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-q_Ad80ug.js">
@@ -206,7 +206,8 @@
     <link rel="modulepreload" crossorigin href="./assets/formats-zylfwejq.js">
     <link rel="modulepreload" crossorigin href="./assets/table-vrvqpuKJ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-Dbe0MrFr.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-9IONH7hu.js">
+    <link rel="modulepreload" crossorigin href="./assets/useStateForKey-CGMJQT8x.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-Pm6OCP3J.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-C4_v6fQW.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-_W_Lo0P4.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-uCpVvaAR.js">
@@ -220,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/file-icons-CdJgUy-I.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-UdPdIbF7.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-CI_o7NhW.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-CqnFgwhm.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-XeDpkiXX.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-Bielffe0.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-B81AjzXM.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-HFqhvWHI.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-D7sTOokc.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-C6uXRJry.js">
     <link rel="modulepreload" crossorigin href="./assets/square-BPmgQFnh.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-DmIqR8sY.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
@@ -235,8 +236,9 @@
     <link rel="modulepreload" crossorigin href="./assets/bundle.esm-D3tw5rqW.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-CiZ_8zS-.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-DFIVN9dn.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDelayElapsed-BlsDT4TV.js">
     <link rel="modulepreload" crossorigin href="./assets/pathUtils-DPmlLd-r.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-Dtc8YhnE.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-GQD9km0W.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.3-dev52",
+  "version": "0.25.3-dev57",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/ai-config.tsx

@@ -1850,7 +1850,7 @@ export const AddModelForm: React.FC<{
         id={modelNameInputId}
         value={modelName}
         onChange={(e) => setModelName(e.target.value)}
-        placeholder="gpt-4"
+        placeholder="gpt-5.6-sol"
         className="text-xs mb-0"
       />
     </div>

package/src/components/data-table/__tests__/export-actions.test.tsx

@@ -531,6 +531,23 @@ describe("ExportActions dialog", () => {
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 
+  it("does not revive an earlier source failure when switching back", async () => {
+    downloadAs.mockRejectedValueOnce(new Error("First source failed"));
+    const { rerenderExportActions } = renderExportActions({
+      metadataSource: "first",
+    });
+    await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "First source failed",
+    );
+
+    rerenderExportActions({ metadataSource: "second" });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    rerenderExportActions({ metadataSource: "first" });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
   async function startGeoParquetInstall(strictMode = false) {
     const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
     downloadAs.mockResolvedValueOnce({

package/src/components/data-table/charts/charts.tsx

@@ -13,8 +13,8 @@ import {
   XIcon,
 } from "lucide-react";
 import type { JSX } from "react";
-import React, { useMemo, useRef, useState } from "react";
-import { type UseFormReturn, useForm } from "react-hook-form";
+import React, { useMemo, useState } from "react";
+import { type UseFormReturn, useForm, useWatch } from "react-hook-form";
 import useResizeObserver from "use-resize-observer";
 import { PythonIcon } from "@/components/editor/cell/code/icons";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -103,16 +103,14 @@ export const TablePanel: React.FC<TablePanelProps> = ({
 
   const [selectedTab, setSelectedTab] = useState(DEFAULT_TAB_NAME);
   const [tabCounter, setTabCounter] = useState(tabs.length);
-  const prevDisplayHeader = useRef(displayHeader);
+  const [prevDisplayHeader, setPrevDisplayHeader] = useState(displayHeader);
+
+  if (displayHeader !== prevDisplayHeader) {
+    setPrevDisplayHeader(displayHeader);
+  }
 
   // Auto-create a default chart tab when chart builder opens with no tabs
-  if (
-    displayHeader &&
-    !prevDisplayHeader.current &&
-    tabs.length === 0 &&
-    cellId
-  ) {
-    prevDisplayHeader.current = displayHeader;
+  if (displayHeader && !prevDisplayHeader && tabs.length === 0 && cellId) {
     const tabName = getChartTabName(0, NEW_CHART_TYPE);
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
@@ -122,7 +120,6 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     setTabCounter(1);
     setSelectedTab(tabName);
   }
-  prevDisplayHeader.current = displayHeader;
 
   if (!displayHeader || (tabs.length === 0 && !displayHeader)) {
     return dataTable;
@@ -320,9 +317,10 @@ export const ChartPanel: React.FC<{
   saveChartType,
   getDataUrl,
   fieldTypes,
-  hasSchema = Boolean(fieldTypes?.length),
+  hasSchema: providedHasSchema,
   isLargeDataset,
 }) => {
+  const hasSchema = providedHasSchema ?? Boolean(fieldTypes?.length);
   const { theme } = useTheme();
   const form = useForm<ChartSchemaType>({
     defaultValues: chartConfig ?? getChartDefaults(),
@@ -370,16 +368,13 @@ export const ChartPanel: React.FC<{
     // Re-run when the data table changes
   }, [tableData, renderLargeCharts, csvFieldTypes]);
 
-  const formValues = form.watch();
-
-  // This ensures the chart re-renders when the actual values change
-  const memoizedFormValues = useMemo(() => {
-    return structuredClone(formValues);
-  }, [formValues]);
+  // useWatch returns a new object only when a value changes. It is typed as
+  // deeply partial, but the form always starts from complete defaults.
+  const formValues = useWatch({ control: form.control }) as ChartSchemaType;
 
   const specWithoutData = createSpecWithoutData(
     selectedChartType,
-    memoizedFormValues,
+    formValues,
     theme,
     "container",
     CHART_HEIGHT,

package/src/components/data-table/export-actions.tsx

@@ -24,6 +24,7 @@ import type {
   GetExportMetadata,
 } from "./schemas";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -354,7 +355,6 @@ interface ExportContext {
 export const ExportActions: React.FC<ExportActionProps> = (props) => {
   const { getExportMetadata, metadataSource } = props;
   const [exportDialogOpen, setExportDialogOpen] = React.useState(false);
-  const [failure, setFailure] = React.useState<ExportFailure | null>(null);
   const [settings, setSettings] =
     React.useState<ExportSettings>(DEFAULT_SETTINGS);
   const [exportContext, setExportContext] = React.useState<ExportContext>(
@@ -363,6 +363,10 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
   if (exportContext.source !== metadataSource) {
     setExportContext({ source: metadataSource });
   }
+  const [failure, setFailure] = useStateForKey<ExportFailure | null>(
+    exportContext,
+    () => null,
+  );
   const mounted = React.useRef(false);
   const isCurrentContext = useEvent(
     (context: ExportContext) => mounted.current && context === exportContext,
@@ -416,7 +420,6 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
   }, []);
   React.useEffect(() => {
     latestActionId.current += 1;
-    setFailure(null);
   }, [metadataSource]);
   const policy = useAtomValue(downloadSizeLimitAtom);
   const overLimit = !!(
@@ -452,7 +455,6 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
     setExportDialogOpen(open);
     if (!open) {
       latestActionId.current += 1;
-      setFailure(null);
       setExpandedFormat(null);
       setSettings(DEFAULT_SETTINGS);
       setGeometryColumn(null);

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

@@ -314,6 +314,30 @@ describe("PairWithAgentModal", () => {
     expect(screen.getByRole("tabpanel")).not.toHaveTextContent("--notebook");
   });
 
+  it("reverifies the target when host mode is enabled again for the same Session", async () => {
+    await act(async () => {
+      render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+    });
+    expect(screen.getByRole("tabpanel")).toHaveTextContent(NOTEBOOK_ID);
+    act(() =>
+      store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: false }),
+    );
+
+    const pending = new Deferred<Response>();
+    vi.mocked(fetch).mockImplementation((url) =>
+      String(url).endsWith("/api/sessions")
+        ? pending.promise
+        : responseFor(url),
+    );
+    act(() => store.set(pairConfigAtom, PAIR_CONFIG));
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeDisabled();
+    expect(screen.getByRole("tabpanel")).not.toHaveTextContent(NOTEBOOK_ID);
+
+    await act(async () => pending.resolve(await responseFor("/api/sessions")));
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeEnabled();
+    expect(screen.getByRole("tabpanel")).toHaveTextContent(NOTEBOOK_ID);
+  });
+
   it("keeps copying disabled when Notebook verification fails", async () => {
     vi.mocked(fetch).mockImplementation((url) =>
       String(url).endsWith("/api/sessions")

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { CheckIcon, CopyIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
 import { Button } from "@/components/ui/button";
 import {
@@ -53,21 +53,20 @@ export const PairWithAgentModal: React.FC<{
   const config = useAtomValue(pairConfigAtom);
   const hostEnabled = config?.hostEnabled ?? false;
   const stableSessionId = useAtomValue(stableSessionIdAtom);
+  const lookupIdentity = useMemo(
+    () => ({ hostEnabled, stableSessionId }),
+    [hostEnabled, stableSessionId],
+  );
   const [lookup, setLookup] = useState<
     {
-      sessionId: string;
-    } & (
-      | { status: "ready"; notebookId: string | null }
-      | { status: "loading" | "error" }
-    )
+      identity: typeof lookupIdentity;
+    } & ({ status: "ready"; notebookId: string | null } | { status: "error" })
   >();
   useEffect(() => {
-    if (!hostEnabled || !stableSessionId) {
-      setLookup(undefined);
+    const { hostEnabled, stableSessionId: sessionId } = lookupIdentity;
+    if (!hostEnabled || !sessionId) {
       return;
     }
-    const sessionId = stableSessionId;
-    setLookup({ sessionId, status: "loading" });
     let cancelled = false;
     API.get<Record<string, { session_id: string; notebook_id: string | null }>>(
       "/sessions",
@@ -79,22 +78,26 @@ export const PairWithAgentModal: React.FC<{
           );
           setLookup(
             session
-              ? { sessionId, status: "ready", notebookId: session.notebook_id }
-              : { sessionId, status: "error" },
+              ? {
+                  identity: lookupIdentity,
+                  status: "ready",
+                  notebookId: session.notebook_id,
+                }
+              : { identity: lookupIdentity, status: "error" },
           );
         }
       })
       .catch(() => {
         if (!cancelled) {
-          setLookup({ sessionId, status: "error" });
+          setLookup({ identity: lookupIdentity, status: "error" });
         }
       });
     return () => {
       cancelled = true;
     };
-  }, [hostEnabled, stableSessionId]);
+  }, [lookupIdentity]);
   const currentLookup =
-    lookup?.sessionId === stableSessionId ? lookup : undefined;
+    lookup?.identity === lookupIdentity ? lookup : undefined;
   const verified = !hostEnabled || currentLookup?.status === "ready";
   const notebookId =
     hostEnabled && currentLookup?.status === "ready"

package/src/components/editor/cell/__tests__/useShouldShowInterrupt.test.ts

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useShouldShowInterrupt } from "../useShouldShowInterrupt";
+
+describe("useShouldShowInterrupt", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("waits for each run and hides immediately when it stops", () => {
+    const { result, rerender } = renderHook(useShouldShowInterrupt, {
+      initialProps: false,
+    });
+    expect(result.current).toBe(false);
+    rerender(true);
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(200));
+    expect(result.current).toBe(true);
+    rerender(false);
+    expect(result.current).toBe(false);
+    rerender(true);
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(199));
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(1));
+    expect(result.current).toBe(true);
+  });
+
+  it("cancels the delay for a short run", () => {
+    const { result, rerender } = renderHook(useShouldShowInterrupt, {
+      initialProps: true,
+    });
+    act(() => vi.advanceTimersByTime(100));
+    rerender(false);
+    act(() => vi.advanceTimersByTime(200));
+    expect(result.current).toBe(false);
+  });
+});

package/src/components/editor/cell/useShouldShowInterrupt.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useEffect, useState } from "react";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
 
 const DELAY_MS = 200;
 
@@ -10,17 +10,7 @@ const DELAY_MS = 200;
 export function useShouldShowInterrupt(running: boolean) {
   // Start a timer when the run starts.
   // After 200ms, show the interrupt button to avoid flickering.
-  const [hasRunLongEnough, setHasRunLongEnough] = useState(false);
-  useEffect(() => {
-    if (!running) {
-      return;
-    }
-    setHasRunLongEnough(false);
-    const timeout = setTimeout(() => {
-      setHasRunLongEnough(true);
-    }, DELAY_MS);
-    return () => clearTimeout(timeout);
-  }, [running]);
+  const hasRunLongEnough = useDelayElapsed(running ? DELAY_MS : 0);
 
   return running && hasRunLongEnough;
 }

package/src/components/editor/chrome/panels/__tests__/packages-panel.test.tsx

@@ -18,7 +18,10 @@ import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
-import { withPackageInvalidation } from "@/core/packages/package-data";
+import {
+  invalidatePackageData,
+  withPackageInvalidation,
+} from "@/core/packages/package-data";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { store } from "@/core/state/jotai";
@@ -143,6 +146,32 @@ describe("PackagesPanel", () => {
     expect(screen.queryByText("cycle")).not.toBeInTheDocument();
   });
 
+  it("collapses expanded nodes when the dependency tree is refreshed", async () => {
+    const { client } = renderPanel(
+      { kind: "sandbox", backend: "pixi" },
+      populatedTree,
+    );
+    fireEvent.click(await screen.findByRole("treeitem", { name: /polars/ }));
+    expect(screen.getByText("already in tree")).toBeInTheDocument();
+
+    vi.mocked(client.getDependencyTree).mockResolvedValue({
+      tree: structuredClone(populatedTree),
+      context: { kind: "sandbox", backend: "pixi" },
+    });
+    act(() => invalidatePackageData());
+
+    await waitFor(() =>
+      expect(client.getDependencyTree).toHaveBeenCalledTimes(2),
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("already in tree")).not.toBeInTheDocument(),
+    );
+    expect(screen.getByRole("treeitem", { name: /polars/ })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
   it("keeps the configured package manager changeable outside a sandbox", async () => {
     const { getPackageList } = renderPanel({
       kind: "package-manager",

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -31,6 +31,7 @@ import { usePackageAction } from "@/core/packages/usePackageAction";
 import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { isWasm } from "@/core/wasm/utils";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -440,15 +441,11 @@ const DependencyTree: React.FC<{
   error?: Error | null;
   sandboxBackend: "uv" | "pixi" | null;
 }> = ({ tree, error, sandboxBackend }) => {
-  const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
-    new Set(),
+  const [expandedNodes, setExpandedNodes] = useStateForKey(
+    tree,
+    () => new Set<string>(),
   );
 
-  // Reset tree to collapsed state when tree data changes (including refetches)
-  React.useEffect(() => {
-    setExpandedNodes(new Set());
-  }, [tree]);
-
   if (error) {
     return <ErrorBanner error={error} />;
   }

package/src/components/editor/file-tree/__tests__/file-explorer-interactions.test.tsx

@@ -137,5 +137,11 @@ describe("FileExplorer upload destination", () => {
       }),
     ).toBeVisible();
     expect(screen.queryByText(".hidden")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("file-explorer-hidden-files-button"));
+    expect(await screen.findByText(".hidden")).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "Upload files to workspace" }),
+    ).toBeVisible();
   });
 });

package/src/components/editor/file-tree/__tests__/use-file-search.test.tsx

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { EditRequests } from "@/core/network/types";
+import { Deferred } from "@/utils/Deferred";
+import { RequestingTree } from "../requesting-tree";
+import { useFileSearch } from "../use-file-search";
+
+const sendSearchFiles = vi.hoisted(() =>
+  vi.fn<EditRequests["sendSearchFiles"]>(),
+);
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ sendSearchFiles }),
+}));
+
+describe("useFileSearch", () => {
+  let tree: RequestingTree;
+
+  beforeEach(async () => {
+    sendSearchFiles.mockReset();
+    tree = new RequestingTree({
+      getRoots: vi.fn().mockResolvedValue({
+        roots: [{ path: "/root", name: "workspace", isPrimary: true }],
+      }),
+      listFiles: vi.fn().mockResolvedValue({ files: [], root: "/root" }),
+      createFileOrFolder: vi.fn(),
+      deleteFileOrFolder: vi.fn(),
+      copyFileOrFolder: vi.fn(),
+      renameFileOrFolder: vi.fn(),
+    });
+    await tree.initialize(() => undefined);
+  });
+
+  it("derives loading for a refetch and a changed hidden-file filter", async () => {
+    sendSearchFiles.mockResolvedValue({
+      files: [],
+      query: "file",
+      totalFound: 0,
+    });
+    const { result, rerender } = renderHook(
+      ({ showHiddenFiles }) =>
+        useFileSearch({ query: "file", tree, showHiddenFiles }),
+      { initialProps: { showHiddenFiles: false } },
+    );
+    await waitFor(() => expect(result.current.state.status).toBe("success"));
+
+    const pending = new Deferred<
+      Awaited<ReturnType<EditRequests["sendSearchFiles"]>>
+    >();
+    sendSearchFiles.mockReturnValue(pending.promise);
+    act(() => result.current.refetch());
+    expect(result.current.state.status).toBe("loading");
+    await act(async () =>
+      pending.resolve({ files: [], query: "file", totalFound: 0 }),
+    );
+    expect(result.current.state.status).toBe("success");
+
+    sendSearchFiles.mockReturnValue(new Promise(() => undefined));
+    rerender({ showHiddenFiles: true });
+    expect(result.current.state.status).toBe("loading");
+    await waitFor(() =>
+      expect(sendSearchFiles).toHaveBeenLastCalledWith(
+        expect.objectContaining({ includeHidden: true }),
+      ),
+    );
+  });
+
+  it("keeps superseded scans serial and ignores their results", async () => {
+    const first = new Deferred<
+      Awaited<ReturnType<EditRequests["sendSearchFiles"]>>
+    >();
+    sendSearchFiles
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValue({ files: [], query: "file", totalFound: 0 });
+    const { result } = renderHook(() =>
+      useFileSearch({ query: "file", tree, showHiddenFiles: false }),
+    );
+    await waitFor(() => expect(sendSearchFiles).toHaveBeenCalledOnce());
+
+    act(() => result.current.refetch());
+    expect(sendSearchFiles).toHaveBeenCalledOnce();
+    expect(result.current.state.status).toBe("loading");
+    await act(async () =>
+      first.resolve({ files: [], query: "file", totalFound: 0 }),
+    );
+
+    expect(sendSearchFiles).toHaveBeenCalledTimes(2);
+    expect(result.current.state.status).toBe("success");
+  });
+});