wave-code 1.3.0 → 1.5.0

package/src/components/ConfirmationSelector.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useReducer, useRef } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useEffect, useReducer } from "react";
+import { Box, Text, useInput, usePaste } from "ink";
+import type { Key } from "ink";
 import type {
   PermissionDecision,
   PermissionMode,
@@ -15,7 +16,6 @@ import {
 } from "wave-agent-sdk";
 import { confirmationReducer } from "../reducers/confirmationReducer.js";
 import { questionReducer } from "../reducers/questionReducer.js";
-import { createBracketedPasteDetector } from "../utils/bracketedPaste.js";
 
 const getHeaderColor = (header: string) => {
   const colors = ["red", "green", "blue", "magenta", "cyan"] as const;
@@ -124,46 +124,41 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     outsideSafeZoneDirectory ?? "",
   )}/ this session`;
 
-  const pasteDetectorRef = useRef(createBracketedPasteDetector());
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onCancel();
-      return;
-    }
-
-    const result = pasteDetectorRef.current.process(input);
-    if (result.kind === "consume") {
-      // Content of an in-flight bracketed paste: hold it, never submit.
-      return;
-    }
-    let cleanInput: string;
-    if (result.kind === "paste") {
-      cleanInput = (result.leadingInput ?? "") + result.text;
-    } else {
-      cleanInput = result.input;
-    }
-
+  const dispatchInput = (input: string, key: Key) => {
     if (toolName === ASK_USER_QUESTION_TOOL_NAME) {
       questionDispatch({
         type: "HANDLE_KEY",
-        input: cleanInput,
+        input,
         key,
         questions,
       });
-    } else {
-      dispatch({
-        type: "HANDLE_KEY",
-        input: cleanInput,
-        key,
-        toolName,
-        toolInput,
-        suggestedPrefix,
-        hidePersistentOption,
-        outsideSafeZoneDirectory,
-        permissionMode,
-      });
+      return;
+    }
+    dispatch({
+      type: "HANDLE_KEY",
+      input,
+      key,
+      toolName,
+      toolInput,
+      suggestedPrefix,
+      hidePersistentOption,
+      outsideSafeZoneDirectory,
+      permissionMode,
+    });
+  };
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
     }
+    dispatchInput(input, key);
+  });
+
+  // A pasted string arrives here as one chunk with no key flags, so it can fill
+  // an answer/instruction field but never confirm the decision itself.
+  usePaste((text) => {
+    dispatchInput(text, {} as Key);
   });
 
   const placeholderText = "Type here to tell Wave what to change";

package/src/components/DiffDisplay.tsx

@@ -385,7 +385,7 @@ export const DiffDisplay = ({
 
   return (
     <Box flexDirection="column">
-      <Box paddingLeft={2} borderLeft borderColor="cyan" flexDirection="column">
+      <Box paddingLeft={2} flexDirection="column">
         <Box flexDirection="column">{diffLines}</Box>
       </Box>
     </Box>

package/src/components/HooksManager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useReducer } from "react";
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput, useWindowSize } from "ink";
 import {
   HOOK_EVENT_SUMMARIES,
   type HookEvent,
@@ -60,7 +60,7 @@ export const HooksManager: React.FC<HooksManagerProps> = ({
   hooks,
 }) => {
   const [state, dispatch] = useReducer(hooksManagerReducer, initialState);
-  const { stdout } = useStdout();
+  const { rows } = useWindowSize();
 
   // Handle pending effects
   useEffect(() => {
@@ -125,7 +125,7 @@ export const HooksManager: React.FC<HooksManagerProps> = ({
   // Window slice: center the selected item within the visible area, clamping
   // to the terminal's available rows (reusable pattern from
   // AgentsManager/SkillsManager).
-  const availableRows = stdout?.rows ?? 24;
+  const availableRows = rows || 24;
   const maxVisible = Math.max(3, Math.min(15, availableRows - 12));
   const selectedFlatIndex = entries.findIndex(
     (e) => e.selectableIndex === state.selectedIndex,

package/src/components/InputBox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import { Box, Text } from "ink";
-import { useInput } from "ink";
+import { useInput, usePaste } from "ink";
 import { FileSelector } from "./FileSelector.js";
 import { CommandSelector } from "./CommandSelector.js";
 import { HistorySearch } from "./HistorySearch.js";
@@ -13,6 +13,7 @@ import { RewindCommand } from "./RewindCommand.js";
 import { ResumeCommand } from "./ResumeCommand.js";
 import { HelpView } from "./HelpView.js";
 import { StatusCommand } from "./StatusCommand.js";
+import { RemoteControlView } from "./RemoteControlView.js";
 import { LoginCommand } from "./LoginCommand.js";
 import { PluginManagerShell } from "./PluginManagerShell.js";
 import { ModelSelector } from "./ModelSelector.js";
@@ -161,6 +162,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showResumeSelector,
     showHelp,
     showStatusCommand,
+    showRemoteControl,
     showLoginCommand,
     showPluginManager,
     showModelSelector,
@@ -174,6 +176,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setShowResumeSelector,
     setShowHelp,
     setShowStatusCommand,
+    setShowRemoteControl,
     setShowLoginCommand,
     setShowPluginManager,
     setShowModelSelector,
@@ -189,6 +192,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     escClearPending,
     // Main handler
     handleInput,
+    insertPastedText,
     // Manager ready state
     isManagerReady,
     // Direct state setters
@@ -231,13 +235,11 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setPermissionMode(chatPermissionMode);
   }, [chatPermissionMode, setPermissionMode]);
 
-  // Use the InputManager's unified input handler
-  useInput(async (input, key) => {
-    // These views have their own useInput handlers that handle escape and navigation.
-    // If they are active, we should skip InputBox's global input handling to avoid
-    // duplicate dispatches or state update conflicts.
-    if (
-      planView ||
+  // These views have their own useInput handlers that handle escape and
+  // navigation. While one is open it owns the keyboard: InputBox must skip its
+  // own handling to avoid duplicate dispatches or state update conflicts.
+  const overlayOwnsKeyboard = Boolean(
+    planView ||
       showRewindManager ||
       showResumeSelector ||
       showHelp ||
@@ -250,13 +252,32 @@ export const InputBox: React.FC<InputBoxProps> = ({
       showAgentsManager ||
       showWorkflowManager ||
       showSkillsManager ||
-      showHooksManager
-    ) {
+      showHooksManager ||
+      showRemoteControl,
+  );
+
+  // Use the InputManager's unified input handler
+  useInput(async (input, key) => {
+    if (overlayOwnsKeyboard) {
       return;
     }
     await handleInput(input, key);
   });
 
+  // ink enables bracketed paste mode (DECSET 2004) while this hook is active and
+  // delivers the whole paste as one string here instead of through useInput, so
+  // its newlines are inserted rather than submitted. Deactivating it while an
+  // overlay owns the keyboard hands pasted text back to ink's `useInput`
+  // fallback, where the overlay's own handler sees it — text-entry overlays
+  // (login token, plugin source form, confirmation answer) additionally keep a
+  // `usePaste` of their own, which gets the empty-key chunk directly.
+  usePaste(
+    (text) => {
+      insertPastedText(text);
+    },
+    { isActive: !overlayOwnsKeyboard },
+  );
+
   const handleRewindCancel = () => {
     if (setShowRewindManager) {
       setShowRewindManager(false);
@@ -408,6 +429,10 @@ export const InputBox: React.FC<InputBoxProps> = ({
         <StatusCommand onCancel={() => setShowStatusCommand(false)} />
       )}
 
+      {showRemoteControl && (
+        <RemoteControlView onCancel={() => setShowRemoteControl(false)} />
+      )}
+
       {showLoginCommand && (
         <LoginCommand onCancel={() => setShowLoginCommand(false)} />
       )}
@@ -453,7 +478,8 @@ export const InputBox: React.FC<InputBoxProps> = ({
             showLoginCommand ||
             showPluginManager ||
             showModelSelector ||
-            showWorkflowManager || (
+            showWorkflowManager ||
+            showRemoteControl || (
               <Box flexDirection="column">
                 {escClearPending && (
                   <Text color="gray">Press Esc again to clear input</Text>

package/src/components/LoginCommand.tsx

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from "react";
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, usePaste } from "ink";
 import { execFile } from "child_process";
 import { promisify } from "util";
 import { authService } from "wave-agent-sdk";
-import { createBracketedPasteDetector } from "../utils/bracketedPaste.js";
 
 const execFileAsync = promisify(execFile);
 
@@ -33,12 +32,6 @@ export const LoginCommand: React.FC<LoginCommandProps> = ({ onCancel }) => {
   const isLoadingRef = useRef(isLoading);
   isLoadingRef.current = isLoading;
 
-  // Detects and strips bracketed paste markers (\x1b[200~ ... \x1b[201~)
-  // that terminals wrap pasted text in. Unlike the main InputBox pipeline,
-  // this overlay's token input goes through raw ink useInput, which only
-  // strips ONE leading ESC, leaving the markers (e.g. "[200~") in the input.
-  const pasteDetectorRef = useRef(createBracketedPasteDetector());
-
   // Resolve/reject refs for the token promise
   const tokenResolveRef = useRef<((token: string) => void) | null>(null);
   const tokenRejectRef = useRef<((err: Error) => void) | null>(null);
@@ -78,34 +71,23 @@ export const LoginCommand: React.FC<LoginCommandProps> = ({ onCancel }) => {
       setTokenInput((prev) => prev.slice(0, -1));
       return;
     }
-    // Regular character input (single or pasted multi-char). Run through the
-    // bracketed paste detector: a pasted token arrives wrapped in
-    // \x1b[200~ ... \x1b[201~ markers (possibly split across chunks), which
-    // must be stripped instead of being appended to the token.
+    // Regular character input (single keypress). A pasted token arrives on
+    // ink's paste channel instead (see usePaste below).
     if (input && !key.ctrl && !key.meta && !key.return && input.length > 0) {
-      const result = pasteDetectorRef.current.process(input);
-
-      if (result.kind === "consume") {
-        // In-flight bracketed paste content: hold it; the final chunk
-        // delivers the complete text.
-        return;
-      }
-
-      if (result.kind === "paste") {
-        // Tokens never contain carriage returns — drop \r (CRLF terminals
-        // send \r, not \n, in pasted text).
-        const leading = result.leadingInput?.replace(/\r/g, "");
-        if (leading) {
-          setTokenInput((prev) => prev + leading);
-        }
-        const text = result.text.replace(/\r/g, "");
-        if (text) {
-          setTokenInput((prev) => prev + text);
-        }
-        return;
-      }
+      setTokenInput((prev) => prev + input);
+    }
+  });
 
-      setTokenInput((prev) => prev + result.input);
+  // A pasted token arrives as one string here, so its content is appended
+  // verbatim instead of being read as keystrokes. Tokens never contain carriage
+  // returns — CRLF terminals send \r inside pasted text.
+  usePaste((text) => {
+    if (!isLoadingRef.current) {
+      return;
+    }
+    const token = text.replace(/\r/g, "");
+    if (token) {
+      setTokenInput((prev) => prev + token);
     }
   });
 
@@ -125,7 +107,6 @@ export const LoginCommand: React.FC<LoginCommandProps> = ({ onCancel }) => {
     setError("");
     setAuthUrl("");
     setTokenInput("");
-    pasteDetectorRef.current.reset();
     setMessage("Starting authentication...");
 
     // Promise that resolves when user presses Enter with token input

package/src/components/Markdown.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text } from "ink";
 import { Renderer, marked, type Tokens } from "marked";
 import chalk from "chalk";
 import { highlightToAnsi } from "../utils/highlightUtils.js";
@@ -155,8 +155,12 @@ export const renderMarkdownToAnsi = (
 
 // Markdown component using custom ANSI renderer
 export const Markdown = React.memo(({ children }: MarkdownProps) => {
-  const { stdout } = useStdout();
-  const columns = stdout?.columns ?? 80;
+  // Read the width without subscribing: one <Markdown> is mounted per text
+  // block (including frozen <Static> ones), and ink's `useWindowSize()` adds a
+  // `resize` listener per instance — enough of them trips Node's
+  // MaxListenersExceededWarning on stdout. Table widths only need to be right
+  // for the frame being rendered, exactly as with ink 7's `stdout.columns`.
+  const columns = process.stdout.columns || 80;
   const ansiContent = useMemo(
     () => renderMarkdownToAnsi(children, columns),
     [children, columns],

package/src/components/MarketplaceAddForm.tsx

@@ -1,12 +1,12 @@
-import React, { useReducer, useEffect, useRef } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useReducer, useEffect } from "react";
+import { Box, Text, useInput, usePaste } from "ink";
+import type { Key } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 import {
   marketplaceAddFormReducer,
   SCOPES,
   type MarketplaceAddFormState,
 } from "../reducers/marketplaceAddFormReducer.js";
-import { createBracketedPasteDetector } from "../utils/bracketedPaste.js";
 
 export const MarketplaceAddForm: React.FC = () => {
   const { state: ctxState, actions } = usePluginManagerContext();
@@ -33,27 +33,23 @@ export const MarketplaceAddForm: React.FC = () => {
     dispatch({ type: "CLEAR_PENDING_ACTION" });
   }, [state.pendingAction, actions]);
 
-  const pasteDetectorRef = useRef(createBracketedPasteDetector());
-
-  useInput((input, key) => {
-    const result = pasteDetectorRef.current.process(input);
-    if (result.kind === "consume") {
-      // Content of an in-flight bracketed paste: hold it, never submit.
-      return;
-    }
-    let cleanInput: string;
-    if (result.kind === "paste") {
-      cleanInput = (result.leadingInput ?? "") + result.text;
-    } else {
-      cleanInput = result.input;
-    }
-
+  const dispatchKey = (input: string, key: Key) => {
     dispatch({
       type: "HANDLE_KEY",
       key,
-      input: cleanInput,
+      input,
       isLoading: ctxState.isLoading,
     });
+  };
+
+  useInput((input, key) => {
+    dispatchKey(input, key);
+  });
+
+  // A pasted source arrives here as one string with no key flags, so it fills
+  // the field without stepping the form or submitting it.
+  usePaste((text) => {
+    dispatchKey(text, {} as Key);
   });
 
   const { source, scopeIndex, step } = state;

package/src/components/MessageBlockItem.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
 import type { Message, MessageBlock } from "wave-agent-sdk";
-import { MessageSource } from "wave-agent-sdk";
 import { ToolDisplay } from "./ToolDisplay.js";
 import { CompactDisplay } from "./CompactDisplay.js";
 import { ReasoningDisplay } from "./ReasoningDisplay.js";
@@ -25,11 +24,6 @@ export const MessageBlockItem = ({
     <Box flexDirection="column" paddingTop={paddingTop}>
       {block.type === "text" && block.content.trim() && (
         <Box>
-          {block.source === MessageSource.HOOK && (
-            <Text color="magenta" bold>
-              ~{" "}
-            </Text>
-          )}
           {message.role === "user" || isExpanded ? (
             <Text
               backgroundColor={message.role === "user" ? "gray" : undefined}

package/src/components/RemoteControlView.tsx

@@ -0,0 +1,175 @@
+/**
+ * RemoteControlView — `/remote-control` 的覆盖层（把这条前台会话交给手机）。
+ *
+ * 规格：docs/specs/ui/remote-control.md「前台 CLI 会话也能被手机接管」。
+ *
+ * **这个斜杠命令不带参数**：没有 `on` / `off` / `status` 子命令，也不收机器名。
+ * 判据是「状态自己决定动作」——`off` / `error` 时唯一合法动作是开启，`connecting`
+ * / `online` 时唯一合法动作是断开，所以层里只呈现当前那一个动作，而不是把两个
+ * 动词写成命令参数让用户先自己算一遍状态。命名归脚本入口
+ * `wave remote-control on <name>`（且只在登记那一次生效）。
+ *
+ * 所有结果（四态、说明、地址、二维码、失败原因）都只回显在这一层里，**一律不进
+ * 消息列表**：这块内容要停在屏幕上够久以便掏手机扫码，而状态还会继续变，一条快照
+ * 消息既留不住也更新不了。与 GUI 设置页的「远程控制」选项卡同一口径。
+ *
+ * 状态怎么刷新：链路活在 CLI 进程里，没有推送通道，`useRemoteControl` 自己每秒读
+ * 一次快照（`status` 每次都是新对象），本视图读它即随渲染刷新，不另开轮询。
+ */
+
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { toString as qrToString } from "qrcode";
+import type { RemoteControlStatus } from "wave-agent-sdk";
+import { useChat } from "../contexts/useChat.js";
+
+export interface RemoteControlViewProps {
+  onCancel: () => void;
+}
+
+const STATE_LABELS: Record<RemoteControlStatus["state"], string> = {
+  off: "Not serving",
+  connecting: "Connecting…",
+  online: "Serving",
+  error: "Failed",
+};
+
+/** Colour per state — literal union, so `<Text color>` takes it as-is. */
+function stateColor(state: RemoteControlStatus["state"]) {
+  if (state === "online") return "green";
+  if (state === "error") return "red";
+  if (state === "connecting") return "yellow";
+  return "gray";
+}
+
+export const RemoteControlView: React.FC<RemoteControlViewProps> = ({
+  onCancel,
+}) => {
+  const { remoteControl } = useChat();
+  const { enabled, status, getSnapshot, connect, disconnect } = remoteControl;
+
+  // `status` is the per-second tick that makes this view re-render while it is
+  // open; the page address lives only on the snapshot (it is not part of
+  // `status`), so both are read on every render.
+  const { pageUrl } = getSnapshot();
+
+  const [showQr, setShowQr] = useState(false);
+  const [qrText, setQrText] = useState("");
+
+  // Opening this panel *is* the intent to serve: dial when nothing is running.
+  // A link that is already connecting or online is left alone — re-dialling
+  // would tear down a working connection (same rule as the GUI tab, whose
+  // single button flips on `state === "off" || state === "error"`).
+  //
+  // The deps are the two callbacks, not the `remoteControl` object: that object
+  // is rebuilt on every render, so depending on it would re-run this effect
+  // after every state change — which is exactly what made `d` unusable (the
+  // disconnect set `off`, the effect saw `off` and dialled again).
+  useEffect(() => {
+    if (!enabled) return;
+    const current = getSnapshot().state;
+    if (current === "off" || current === "error") connect();
+  }, [enabled, connect, getSnapshot]);
+
+  // The QR is folded away by default: it is ~35 rows tall, and the panel also
+  // has to stay readable when all the user wants is the state.
+  useEffect(() => {
+    if (!showQr || !pageUrl) {
+      setQrText("");
+      return;
+    }
+    let cancelled = false;
+    qrToString(pageUrl, { type: "utf8", errorCorrectionLevel: "L" })
+      .then((text) => {
+        if (!cancelled) setQrText(text);
+      })
+      .catch(() => {
+        if (!cancelled) setQrText("");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [showQr, pageUrl]);
+
+  const serving = status.state === "connecting" || status.state === "online";
+
+  useInput((input, key) => {
+    if (key.escape || key.return) {
+      onCancel();
+      return;
+    }
+    if (input === " ") {
+      setShowQr((prev) => !prev);
+      return;
+    }
+    // One key, and its label is whichever action is legal right now — the layer
+    // never asks the user to work out which of two verbs applies.
+    if (input === "d") {
+      if (serving) disconnect();
+      else connect();
+    }
+  });
+
+  // The switch is read once per process, so a process started with it off can
+  // only be told what to change — it cannot pick the setting up by itself.
+  const note = enabled
+    ? status.message
+    : 'Remote control is unavailable in this process. Set "enableRemoteControl": true in ~/.wave/settings.json (or .wave/settings.json in the project), then restart the CLI — a process that is already running keeps the settings it started with.';
+
+  const row = (label: string, value: string, color?: string) => (
+    <Box>
+      <Box width={14}>
+        <Text color="yellow">{label}</Text>
+      </Box>
+      <Box flexShrink={1}>
+        <Text color={color} wrap="wrap">
+          {value}
+        </Text>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color="cyan" bold underline>
+          Remote Control
+        </Text>
+      </Box>
+
+      {row("Status:", STATE_LABELS[status.state], stateColor(status.state))}
+
+      {note ? row("Note:", note) : null}
+
+      {pageUrl ? row("Phone page:", pageUrl) : null}
+
+      {showQr && qrText ? (
+        <Box flexDirection="column" marginTop={1}>
+          {qrText
+            .split("\n")
+            .filter((line) => line.length > 0)
+            .map((line, index) => (
+              <Text key={index}>{line}</Text>
+            ))}
+        </Box>
+      ) : null}
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          {!enabled
+            ? "Esc close"
+            : serving
+              ? "space QR code · d disconnect · Esc close"
+              : "space QR code · d connect · Esc close"}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/ScrolledContent.tsx

@@ -1,5 +1,5 @@
-import React, { useLayoutEffect, useRef } from "react";
-import { Box, type DOMElement } from "ink";
+import React, { useEffect, useRef } from "react";
+import { Box, useBoxMetrics, type DOMElement } from "ink";
 
 export interface ScrolledContentProps {
   /** Every content row — rows are never sliced, the viewport clips them. */
@@ -15,16 +15,16 @@ export interface ScrolledContentProps {
 
 /**
  * Hard-bounded, clipping viewport for content that can be wider than the
- * terminal: the content is rendered once and translated up by `scrollOffset`
- * rows, and rows outside the viewport are clipped away.
+ * terminal: the content is rendered once and shifted up by `scrollOffset` rows,
+ * and rows outside the viewport are clipped away.
  *
  * Height is bounded by construction — a line that wraps grows the content
  * instead of the frame — so the row budget of the surrounding layout holds no
  * matter how many rows the content really needs.
  *
- * The row count is read back from the layout rather than predicted from the
- * text: by the time this effect runs, Yoga has wrapped the content to the
- * terminal width, so the computed height already includes wrapped rows.
+ * The row count is read back from the layout (`useBoxMetrics`) rather than
+ * predicted from the text: by the time it reports, Yoga has wrapped the content
+ * to the terminal width, so the measured height already includes wrapped rows.
  */
 export const ScrolledContent: React.FC<ScrolledContentProps> = ({
   children,
@@ -33,24 +33,27 @@ export const ScrolledContent: React.FC<ScrolledContentProps> = ({
   onMeasuredRows,
 }) => {
   const contentRef = useRef<DOMElement | null>(null);
+  const { height, hasMeasured } = useBoxMetrics(contentRef);
   const reportedRows = useRef(0);
 
-  useLayoutEffect(() => {
-    const yogaNode = contentRef.current?.yogaNode;
-    if (!yogaNode) {
+  useEffect(() => {
+    if (!hasMeasured) {
       return;
     }
-    const rows = Math.round(yogaNode.getComputedHeight());
+    const rows = Math.round(height);
     if (rows > 0 && rows !== reportedRows.current) {
       reportedRows.current = rows;
       onMeasuredRows(rows);
     }
-  });
+  }, [height, hasMeasured, onMeasuredRows]);
 
   return (
     <Box
       maxHeight={visibleRows}
       overflow="hidden"
+      // Children are shifted up by this many rows; `overflow="hidden"` clips
+      // whatever the shift pushes out of the viewport.
+      contentOffsetY={scrollOffset}
       flexShrink={0}
       flexDirection="column"
     >
@@ -60,7 +63,6 @@ export const ScrolledContent: React.FC<ScrolledContentProps> = ({
         // Without this the fixed-height parent shrinks the content to fit and
         // renders garbled rows instead of clipping them.
         flexShrink={0}
-        marginTop={-scrollOffset}
       >
         {children}
       </Box>