@marimo-team/islands 0.25.3-dev47 → 0.25.3-dev48

package/dist/{number-overlay-editor-yOSMD6Af.js → number-overlay-editor-CaspWg5p.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-blkbnr2a.js";
+import { a as n } from "./glide-data-editor-BXXphavz.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/{reveal-component-BHOMrvDj.js → reveal-component-CWk_paD2.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-BCntm-jf.js";
 import { O as u } from "./error-entries-D3ouOLDe.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-DPSFvO_K.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-DBC1NAar.js";
 import { M as C } from "./select-D2iqeJYk.js";
 import { q as ee } from "./dropdown-menu-ugNoZmKx.js";
 import { _ as w } from "./toDate-C0jaysq2.js";
 import { t as T } from "./jsx-runtime-3BD1kT0s.js";
 import { X as E } from "./use-restore-focus-BhXhsNLV.js";
 import { A as D, C as O, b as k } from "./useTheme-BC8Lof0B.js";
-import { a as A, n as te, t as ne } from "./code-visibility-BbrgXRMG.js";
+import { a as A, n as te, t as ne } from "./code-visibility-5llx6KCK.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",

package/package.json

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

package/src/components/chat/__tests__/message-queue.test.tsx

@@ -77,6 +77,23 @@ describe("useMessageQueue", () => {
     expect(result.current.messages).toEqual([]);
   });
 
+  it("preserves multiple enqueues and flushes before React renders", () => {
+    const { result } = renderHook(() => useMessageQueue());
+    const send = vi.fn();
+
+    act(() => {
+      result.current.enqueue([textPart("first")]);
+      result.current.enqueue([textPart("second")]);
+      result.current.flushNext(send);
+      result.current.flushNext(send);
+    });
+
+    expect(send).toHaveBeenNthCalledWith(1, [textPart("first")]);
+    expect(send).toHaveBeenNthCalledWith(2, [textPart("second")]);
+    expect(result.current.messages).toEqual([]);
+    expect(result.current.hasQueuedRef.current).toBe(false);
+  });
+
   it("flushNext on an empty queue is a no-op", () => {
     const { result } = renderHook(() => useMessageQueue());
     const send = vi.fn();

package/src/components/chat/chat-panel.tsx

@@ -716,14 +716,10 @@ const ChatPanelBody = () => {
   );
 
   const isLoading = status === "submitted" || status === "streaming";
-  // Read via a ref so the queue-vs-send decision stays correct even when it is
-  // made after an `await` (e.g. resolving @-context), by which point the render
-  // closure's `isLoading` may be stale.
-  const isLoadingRef = useRef(isLoading);
-  isLoadingRef.current = isLoading;
-
+  // useEvent reads the latest loading state, even when called after an await
+  // (e.g. resolving @-context) that outlives the original render's closure.
   const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
-    if (isLoadingRef.current || hasQueuedRef.current) {
+    if (isLoading || hasQueuedRef.current) {
       enqueueUserMessage(parts);
     } else {
       sendUserMessage(parts);

package/src/components/chat/chat-utils.ts

@@ -294,16 +294,12 @@ export function useMessageQueue() {
   // invoked from a callback (e.g. `onFinish`) in the same tick as `enqueue`.
   const messagesRef = useRef<QueuedUserMessage[]>([]);
   const hasQueuedRef = useRef(false);
-  messagesRef.current = messages;
-  hasQueuedRef.current = messages.length > 0;
 
   const enqueue = useEvent((parts: ChatMessagePart[]) => {
-    setMessages((prev) => {
-      const next = [...prev, { id: generateUUID(), parts }];
-      messagesRef.current = next;
-      hasQueuedRef.current = true;
-      return next;
-    });
+    const next = [...messagesRef.current, { id: generateUUID(), parts }];
+    messagesRef.current = next;
+    hasQueuedRef.current = true;
+    setMessages(next);
   });
 
   const flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {

package/src/components/data-table/__tests__/context-menu-interaction.test.tsx

@@ -0,0 +1,130 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type Cell, createTable, getCoreRowModel } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useRef } from "react";
+import { expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { DataTableContextMenu } from "../context-menu";
+
+SetupMocks.resizeObserver();
+
+const rows = [{ value: "first" }, { value: "second" }];
+const columns = [
+  { accessorKey: "value", meta: { filterType: "text" as const } },
+];
+
+function createCells() {
+  const table = createTable({
+    data: rows,
+    columns,
+    locale: "en-US",
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: () => undefined,
+    state: {},
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+  });
+  return table.getRowModel().rows.map((row) => row.getAllCells()[0]);
+}
+
+function Harness({ cells }: { cells: Cell<(typeof rows)[number], unknown>[] }) {
+  const contextMenuRef = useRef<Cell<(typeof rows)[number], unknown> | null>(
+    null,
+  );
+  const tableRef = useRef<HTMLTableSectionElement>(null);
+  const tableBody = (
+    <tbody ref={tableRef}>
+      <tr>
+        <td>empty</td>
+      </tr>
+      {cells.map((cell) => {
+        return (
+          <tr key={cell.id}>
+            <td
+              data-cell-id={cell.id}
+              onContextMenu={() => {
+                contextMenuRef.current = cell;
+              }}
+            >
+              {String(cell.getValue())}
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+  return (
+    <table>
+      <DataTableContextMenu
+        contextMenuRef={contextMenuRef}
+        tableRef={tableRef}
+        tableBody={tableBody}
+        copyAllCells={() => undefined}
+      />
+    </table>
+  );
+}
+
+it("filters the latest right-clicked cell when the menu is already open", () => {
+  const onFilter = vi.fn();
+  const table = createTable({
+    data: rows,
+    columns,
+    locale: "en-US",
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: onFilter,
+    state: {},
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+  });
+  render(
+    <Harness
+      cells={table.getRowModel().rows.map((row) => row.getAllCells()[0])}
+    />,
+  );
+
+  const firstCell = screen.getByText("first");
+  const secondCell = screen.getByText("second");
+  fireEvent.contextMenu(firstCell);
+  expect(firstCell).toHaveClass("bg-(--green-4)");
+  expect(
+    screen.getByRole("menuitem", { name: "Filter by this value" }),
+  ).toBeInTheDocument();
+  fireEvent.contextMenu(secondCell);
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(secondCell).toHaveClass("bg-(--green-4)");
+  fireEvent.click(
+    screen.getByRole("menuitem", { name: "Filter by this value" }),
+  );
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(secondCell).not.toHaveClass("bg-(--green-4)");
+
+  const update = onFilter.mock.calls.at(-1)?.[0];
+  expect(update([])).toEqual([
+    {
+      id: "value",
+      value: { type: "text", operator: "equals", text: "second" },
+    },
+  ]);
+});
+
+it("does not reuse a previous cell after the menu closes", () => {
+  render(<Harness cells={createCells()} />);
+
+  const firstCell = screen.getByText("first");
+  fireEvent.contextMenu(firstCell);
+  expect(firstCell).toHaveClass("bg-(--green-4)");
+  fireEvent.keyDown(document.activeElement ?? document.body, {
+    key: "Escape",
+  });
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+
+  // Right-clicking outside any data cell must not resurrect the old one
+  fireEvent.contextMenu(screen.getByText("empty"));
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(
+    screen.queryByRole("menuitem", { name: "Filter by this value" }),
+  ).not.toBeInTheDocument();
+});

package/src/components/data-table/context-menu.tsx

@@ -12,7 +12,7 @@ import { Logger } from "@/utils/Logger";
 import type { Cell } from "@tanstack/react-table";
 import { useAtomValue } from "jotai";
 import { CopyIcon, FilterIcon, SquareStack } from "lucide-react";
-import type { RefObject } from "react";
+import { type RefObject, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import {
   ContextMenu,
@@ -123,8 +123,21 @@ export const DataTableContextMenu = <TData,>({
   tableRef: RefObject<HTMLTableSectionElement | null>;
   copyAllCells: () => void;
 }) => {
+  const [activeCell, setActiveCell] = useState<Cell<TData, unknown> | null>(
+    null,
+  );
+  const highlightedCell = useRef<Element | null>(null);
   const handleContextMenuChange = useEvent((open: boolean) => {
+    highlightedCell.current?.classList.remove("bg-(--green-4)");
+    highlightedCell.current = null;
+    if (!open) {
+      // Forget the cell so a later right-click outside any cell can't reuse it
+      contextMenuRef.current = null;
+      return;
+    }
+
     const cell = contextMenuRef.current;
+    setActiveCell(cell);
     if (!cell) {
       return;
     }
@@ -138,42 +151,45 @@ export const DataTableContextMenu = <TData,>({
       return;
     }
 
-    if (open) {
-      cellElement.classList.add("bg-(--green-4)");
-    } else {
-      cellElement.classList.remove("bg-(--green-4)");
-    }
+    cellElement.classList.add("bg-(--green-4)");
+    highlightedCell.current = cellElement;
   });
 
   return (
-    <ContextMenu onOpenChange={handleContextMenuChange}>
-      <ContextMenuTrigger asChild={true}>{tableBody}</ContextMenuTrigger>
+    // Open via the trigger so a right-click while already open retargets the
+    // menu; Radix only reports open changes, so use it for closing.
+    <ContextMenu
+      onOpenChange={(open) => {
+        if (!open) {
+          handleContextMenuChange(false);
+        }
+      }}
+    >
+      <ContextMenuTrigger
+        asChild={true}
+        onContextMenu={() => handleContextMenuChange(true)}
+      >
+        {tableBody}
+      </ContextMenuTrigger>
       <ContextMenuPortal>
-        <CellContextMenu
-          cellRef={contextMenuRef}
-          copySelectedCells={copyAllCells}
-        />
+        {activeCell && (
+          <CellContextMenu cell={activeCell} copySelectedCells={copyAllCells} />
+        )}
       </ContextMenuPortal>
     </ContextMenu>
   );
 };
 
 export const CellContextMenu = <TData,>({
-  cellRef,
+  cell,
   copySelectedCells,
 }: {
-  cellRef: RefObject<Cell<TData, unknown> | null>;
+  cell: Cell<TData, unknown>;
   copySelectedCells: () => void;
 }) => {
   const selectedCells = useAtomValue(selectedCellsAtom);
   const multipleSelectedCells = selectedCells.size > 1;
 
-  const cell = cellRef.current;
-  if (!cell) {
-    Logger.error("No cell found in context menu");
-    return;
-  }
-
   const table = cell.getContext().table;
   const displayedValue = cell.getValue();
   const rawValue =

package/src/components/editor/cell/CreateCellButton.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "@/components/editor/inputs/Inputs";
 import { MinimalHotkeys } from "@/components/shortcuts/renderShortcut";
 import {
@@ -36,7 +36,8 @@ export const CreateCellButton = ({
   const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
   const shortcut = `${oneClickShortcut}-Click`;
   const [open, setOpen] = useState(false);
-  const [justOpened, setJustOpened] = useState(false);
+  // Time the dropdown last opened, to ignore the click that opened it
+  const openedAt = useRef(0);
 
   const baseTooltipContent =
     getConnectionTooltip(connectionState) || tooltipContent;
@@ -83,9 +84,7 @@ export const CreateCellButton = ({
 
   const openDropdown = () => {
     setOpen(true);
-    setJustOpened(true);
-    // Allow interactions after a brief delay to prevent the dropdown items immediately being clicked
-    setTimeout(() => setJustOpened(false), 200);
+    openedAt.current = Date.now();
   };
 
   // We use onPointerDownCapture (not onPointerDown) to intercept events in
@@ -121,15 +120,14 @@ export const CreateCellButton = ({
   const handleOpenChange = (isOpen: boolean) => {
     setOpen(isOpen);
     if (isOpen) {
-      setJustOpened(true);
-      // Allow interactions after a brief delay
-      setTimeout(() => setJustOpened(false), 200);
+      openedAt.current = Date.now();
     }
   };
 
   const handleFirstItemClick = (e: React.MouseEvent) => {
-    // Hack to prevent the first item from being clicked when the dropdown is opened
-    if (justOpened) {
+    // Hack to prevent the first item from being clicked when the dropdown is
+    // opened: allow interactions only after a brief delay
+    if (Date.now() - openedAt.current < 200) {
       e.preventDefault();
       e.stopPropagation();
       return;

package/src/components/editor/cell/code/__tests__/language-toggle.test.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { switchLanguage } from "@/core/codemirror/language/extension";
+import { LanguageToggle } from "../language-toggle";
+
+vi.mock("@/core/codemirror/language/extension", () => ({
+  switchLanguage: vi.fn(),
+}));
+
+describe("LanguageToggle", () => {
+  afterEach(() => {
+    vi.mocked(switchLanguage).mockClear();
+  });
+
+  it("uses the editor mounted after the button rendered", () => {
+    const editorViewRef = createRef<EditorView>();
+    const onAfterToggle = vi.fn();
+    render(
+      <TooltipProvider>
+        <LanguageToggle
+          editorViewRef={editorViewRef}
+          currentLanguageAdapter="python"
+          canSwitchToLanguage={true}
+          toType="markdown"
+          displayName="Markdown"
+          icon="Markdown"
+          onAfterToggle={onAfterToggle}
+        />
+      </TooltipProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Markdown" }));
+    expect(switchLanguage).not.toHaveBeenCalled();
+    expect(onAfterToggle).not.toHaveBeenCalled();
+
+    const view = new EditorView({ state: EditorState.create() });
+    editorViewRef.current = view;
+    try {
+      fireEvent.click(screen.getByRole("button", { name: "Markdown" }));
+      expect(switchLanguage).toHaveBeenCalledWith(view, {
+        language: "markdown",
+      });
+      expect(onAfterToggle).toHaveBeenCalledOnce();
+    } finally {
+      view.destroy();
+    }
+  });
+});

package/src/components/editor/cell/code/cell-editor.tsx

@@ -572,7 +572,7 @@ const CellEditorInternal = ({
           <div className="absolute top-1 right-5">
             <LanguageToggles
               code={code}
-              editorView={editorViewRef.current}
+              editorViewRef={editorViewRef}
               currentLanguageAdapter={languageAdapter}
               onAfterToggle={afterToggleMarkdown}
             />

package/src/components/editor/cell/code/language-toggle.tsx

@@ -13,7 +13,7 @@ import { Functions } from "@/utils/functions";
 import { MarkdownIcon, PythonIcon } from "./icons";
 
 interface LanguageTogglesProps {
-  editorView: EditorView | null;
+  editorViewRef: React.RefObject<EditorView | null>;
   code: string;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   onAfterToggle: () => void;
@@ -25,7 +25,7 @@ interface LanguageTogglesProps {
 }
 
 export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
-  editorView,
+  editorViewRef,
   code,
   currentLanguageAdapter,
   onAfterToggle,
@@ -43,7 +43,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   return (
     <div className={className}>
       <LanguageToggle
-        editorView={editorView}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={currentLanguageAdapter}
         canSwitchToLanguage={canUseSQL && currentLanguageAdapter === "python"}
         icon={
@@ -58,7 +58,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
         onAfterToggle={onAfterToggle}
       />
       <LanguageToggle
-        editorView={editorView}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={currentLanguageAdapter}
         canSwitchToLanguage={
           canUseMarkdown && currentLanguageAdapter === "python"
@@ -75,7 +75,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
         onAfterToggle={onAfterToggle}
       />
       <LanguageToggle
-        editorView={editorView}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={currentLanguageAdapter}
         canSwitchToLanguage={true}
         icon={
@@ -95,7 +95,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
 
 interface Props {
   className?: string;
-  editorView: EditorView | null;
+  editorViewRef: React.RefObject<EditorView | null>;
   canSwitchToLanguage: boolean;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   toType: LanguageAdapter["type"];
@@ -105,7 +105,7 @@ interface Props {
 }
 
 export const LanguageToggle: React.FC<Props> = ({
-  editorView,
+  editorViewRef,
   currentLanguageAdapter,
   canSwitchToLanguage,
   icon,
@@ -114,6 +114,7 @@ export const LanguageToggle: React.FC<Props> = ({
   onAfterToggle,
 }) => {
   const handleClick = () => {
+    const editorView = editorViewRef.current;
     if (!editorView) {
       return;
     }

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

@@ -9,7 +9,7 @@ import {
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -82,7 +82,9 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
-  internalValueRef.current = internalValue;
+  useLayoutEffect(() => {
+    internalValueRef.current = internalValue;
+  }, [internalValue]);
   useEffect(() => {
     return () => {
       if (

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -49,31 +49,21 @@ export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
  */
 function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
   const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Non-empty outputs: apply immediately and cancel any pending clear
+  // Non-empty outputs: apply immediately. Effect cleanup cancels pending clears.
   if (outputs.length > 0 && debouncedOutputs !== outputs) {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
     setDebouncedOutputs(outputs);
   }
 
   // Empty outputs: delay the clear so new outputs can arrive first
   useEffect(() => {
-    if (outputs.length === 0 && timerRef.current === null) {
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setDebouncedOutputs([]);
-      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    if (outputs.length > 0) {
+      return;
     }
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
+    const timer = setTimeout(() => {
+      setDebouncedOutputs([]);
+    }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [outputs]);
 
   return debouncedOutputs;

package/src/components/slides/slide-cell-view.tsx

@@ -117,7 +117,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       />
       <LanguageToggles
         code={cell.code}
-        editorView={editorViewRef.current}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={languageAdapter}
         onAfterToggle={afterToggleLanguage}
         className="flex items-center gap-1"

package/src/core/static/files.ts

@@ -125,6 +125,8 @@ function withoutLeadingDot(path: string): string {
 /**
  * Resolve a URL to a blob URL if it's a virtual file, for use with dynamic import().
  * Unlike fetch, import() can't be patched, so we need to convert data URLs to blob URLs.
+ * The caller owns a returned URL that differs from the input and must revoke it
+ * once no module consumers or their cleanup callbacks need it.
  *
  * @returns The original URL if not a virtual file, or a blob URL if it is
  */

package/src/hooks/useInputHistory.ts

@@ -37,12 +37,9 @@ export function useInputHistory({
   const historyIndexRef = React.useRef<number>(-1);
   // Store the current input when navigating history
   const pendingInputRef = React.useRef<string>("");
-  // Keep a ref to history for use in callbacks without causing re-renders
-  const historyRef = React.useRef(history);
-  historyRef.current = history;
 
   const navigateUp = React.useCallback(() => {
-    const currentHistory = historyRef.current;
+    const currentHistory = history;
     if (currentHistory.length === 0) {
       return;
     }
@@ -59,10 +56,10 @@ export function useInputHistory({
       historyIndexRef.current = newIndex;
       setValue(currentHistory[currentHistory.length - 1 - newIndex]);
     }
-  }, [value, setValue]);
+  }, [history, value, setValue]);
 
   const navigateDown = React.useCallback(() => {
-    const currentHistory = historyRef.current;
+    const currentHistory = history;
     if (currentHistory.length === 0) {
       return;
     }
@@ -79,7 +76,7 @@ export function useInputHistory({
       historyIndexRef.current = -1;
       setValue(pendingInputRef.current);
     }
-  }, [setValue]);
+  }, [history, setValue]);
 
   const addToHistory = React.useCallback((command: string) => {
     setHistory((prev) => {