@marimo-team/islands 0.25.3-dev51 → 0.25.3-dev55

package/dist/{number-overlay-editor-Z_H6x5b-.js → number-overlay-editor-Do7_pdca.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { a as n } from "./glide-data-editor-BxMhUd3K.js";
+import { a as n } from "./glide-data-editor-Cd3d8sya.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js
 var r = /* @__PURE__ */ e(t()), i = /*#__PURE__*/ n("div")({
 	name: "NumberOverlayEditorStyle",

package/dist/{process-output-D-OMW5sV.js → process-output-BJRJFobf.js}

@@ -1,4 +1,4 @@
-import { O as e } from "./html-to-image-By72ALyI.js";
+import { O as e } from "./html-to-image-6xcoTKhC.js";
 import { h as t } from "./tooltip-CKO1pHJo.js";
 import { C as n, w as r } from "./error-entries-CMNtA8NK.js";
 import { b as i } from "./select-B0LRDH0g.js";

package/dist/{reveal-component-tAB5K3QE.js → reveal-component-CVYLwPCH.js}

@@ -4,14 +4,14 @@ import { t as o } from "./react-sHtZdjeP.js";
 import { t as s } from "./compiler-runtime-CldRdSsv.js";
 import { h as c, t as l } from "./tooltip-CKO1pHJo.js";
 import { O as u } from "./error-entries-CMNtA8NK.js";
-import { $ as d, Q as f, Z as p, an as m, i as h, l as g, ln as _, n as v, on as y, r as b, t as x, u as S } from "./common-D1PacyXO.js";
+import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-Bqcl1bUR.js";
 import { M as C } from "./select-B0LRDH0g.js";
-import { q as ee } from "./dropdown-menu-MG5hiCIa.js";
+import { q as ee } from "./dropdown-menu-B3eUiVJB.js";
 import { _ as w } from "./toDate-CjPuEPou.js";
 import { t as T } from "./jsx-runtime-3BD1kT0s.js";
 import { q as E } from "./use-restore-focus-DBCITLeF.js";
 import { A as D, C as O, b as k } from "./useTheme-DympCsQg.js";
-import { a as A, n as te, t as ne } from "./code-visibility-DoZ9lxzx.js";
+import { a as A, n as te, t as ne } from "./code-visibility-CtaHItnb.js";
 /* empty css                */
 var j = c("sticky-note", [["path", {
 	d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",
@@ -6556,7 +6556,7 @@ var sa = (e) => {
 	return t[3] === n ? o = t[4] : (o = /* @__PURE__ */ (0, G.jsx)(ia, { cell: n }), t[3] = n, t[4] = o), o;
 }, ca = (e) => {
 	let n = (0, N.c)(160), { slideCells: o, layout: s, setLayout: c, noOutputIds: u, activeIndex: x, onSlideChange: S, mode: C, configWidth: ee, isEditable: T } = e, j = T !== void 0 && T, re = (0, M.useRef)(null), P = (0, M.useRef)(null), { width: ie, height: ae } = Zi(re), oe = E() != null, F = O(w), I = O(te).kind, se = O(A), ce = I !== "wasm" || se, L;
-	n[0] !== F || n[1] !== I ? (L = F || !h(I) ? [] : [Ui], n[0] = F, n[1] = I, n[2] = L) : L = n[2];
+	n[0] !== F || n[1] !== I ? (L = F || !g(I) ? [] : [Ui], n[0] = F, n[1] = I, n[2] = L) : L = n[2];
 	let le = L, [ue, de] = (0, M.useState)(la), fe = ne(o), pe;
 	n[3] === fe ? pe = n[4] : (pe = !k() && fe, n[3] = fe, n[4] = pe);
 	let me = pe, he;
@@ -6601,7 +6601,7 @@ var sa = (e) => {
 	let { cellToTarget: Pe, targetToCellIndex: Fe } = Ne, Ie = s.deck?.transition ?? "slide", Le = s.deck?.verticalAlign, Re;
 	n[37] === Le ? Re = n[38] : (Re = ra(Le), n[37] = Le, n[38] = Re);
 	let ze = Re, Be;
-	n[39] === Symbol.for("react.memo_cache_sentinel") ? (Be = v(window.location.href), n[39] = Be) : Be = n[39];
+	n[39] === Symbol.for("react.memo_cache_sentinel") ? (Be = y(window.location.href), n[39] = Be) : Be = n[39];
 	let Ve = Be, H;
 	n[40] !== Ie || n[41] !== ae || n[42] !== ie ? (H = {
 		embedded: !0,
@@ -6751,7 +6751,7 @@ var sa = (e) => {
 		"aria-label": ot ?? void 0,
 		children: [ot && /* @__PURE__ */ (0, G.jsxs)("div", {
 			className: "flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground border-b bg-muted/40",
-			children: [/* @__PURE__ */ (0, G.jsx)(m, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, G.jsx)("span", { children: ot })]
+			children: [/* @__PURE__ */ (0, G.jsx)(_, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, G.jsx)("span", { children: ot })]
 		}), /* @__PURE__ */ (0, G.jsx)("div", {
 			className: "flex-1 overflow-auto flex",
 			children: /* @__PURE__ */ (0, G.jsx)("div", {
@@ -6778,7 +6778,7 @@ var sa = (e) => {
 			"aria-disabled": ke,
 			"aria-label": ke ? "Code always shown" : De ? "Hide code" : "Show code",
 			onClick: qe,
-			children: /* @__PURE__ */ (0, G.jsx)(_, { className: "h-4 w-4" })
+			children: /* @__PURE__ */ (0, G.jsx)(h, { className: "h-4 w-4" })
 		})
 	}), n[124] = De, n[125] = ke, n[126] = R, n[127] = qe, n[128] = gt) : gt = n[128];
 	let _t;
@@ -6793,7 +6793,7 @@ var sa = (e) => {
 			onClick: () => {
 				P.current?.getViewportElement()?.requestFullscreen().catch(pa);
 			},
-			children: /* @__PURE__ */ (0, G.jsx)(y, { className: "h-4 w-4" })
+			children: /* @__PURE__ */ (0, G.jsx)(m, { className: "h-4 w-4" })
 		})
 	}), n[129] = _t) : _t = n[129];
 	let K;
@@ -6824,7 +6824,7 @@ var sa = (e) => {
 		}), n[137] = q, n[138] = e), e;
 	}
 	let bt;
-	n[139] === q ? bt = n[140] : (bt = /* @__PURE__ */ (0, G.jsx)(p, {
+	n[139] === q ? bt = n[140] : (bt = /* @__PURE__ */ (0, G.jsx)(f, {
 		defaultSize: 92,
 		minSize: 60,
 		children: q
@@ -6841,7 +6841,7 @@ var sa = (e) => {
 		disabled: oe
 	}), n[142] = oe, n[143] = J);
 	let St = ve?.id, Y;
-	n[144] !== s || n[145] !== c || n[146] !== St ? (Y = /* @__PURE__ */ (0, G.jsx)(p, {
+	n[144] !== s || n[145] !== c || n[146] !== St ? (Y = /* @__PURE__ */ (0, G.jsx)(f, {
 		defaultSize: 10,
 		minSize: 4,
 		collapsible: !0,
@@ -6853,7 +6853,7 @@ var sa = (e) => {
 		})
 	}), n[144] = s, n[145] = c, n[146] = St, n[147] = Y) : Y = n[147];
 	let Ct;
-	n[148] !== bt || n[149] !== J || n[150] !== Y ? (Ct = /* @__PURE__ */ (0, G.jsxs)(f, {
+	n[148] !== bt || n[149] !== J || n[150] !== Y ? (Ct = /* @__PURE__ */ (0, G.jsxs)(p, {
 		direction: "vertical",
 		autoSaveId: "marimo:slides:notes-panel",
 		className: "flex-1 min-w-0",
@@ -6864,7 +6864,7 @@ var sa = (e) => {
 		]
 	}), n[148] = bt, n[149] = J, n[150] = Y, n[151] = Ct) : Ct = n[151];
 	let wt;
-	n[152] !== ve || n[153] !== ee || n[154] !== s || n[155] !== c ? (wt = /* @__PURE__ */ (0, G.jsx)(g, {
+	n[152] !== ve || n[153] !== ee || n[154] !== s || n[155] !== c ? (wt = /* @__PURE__ */ (0, G.jsx)(v, {
 		configWidth: ee,
 		layout: s,
 		setLayout: c,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev51",
+  "version": "0.25.3-dev55",
   "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");
+  });
+});

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

@@ -201,11 +201,16 @@ export const FileExplorer: React.FC<{
     () => filterHiddenTree(data, showHiddenFiles),
     [data, showHiddenFiles],
   );
-  React.useEffect(() => {
-    if (selectedFolder && !treeContainsId(visibleData, selectedFolder.id)) {
-      setSelectedFolder(null);
-    }
-  }, [selectedFolder, visibleData]);
+  const selectedFolderId = selectedFolder?.id;
+  const selectedFolderVisible = React.useMemo(
+    () =>
+      selectedFolderId === undefined ||
+      treeContainsId(visibleData, selectedFolderId),
+    [visibleData, selectedFolderId],
+  );
+  if (!selectedFolderVisible) {
+    setSelectedFolder(null);
+  }
   const contextValue = React.useMemo<FileExplorerContextValue>(
     () => ({
       tree,