tinker-agent 1.4.0 → 1.5.1

package/src/tui/app.tsx

@@ -1,6 +1,15 @@
-import { Box, Text, useApp, useInput } from "ink";
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Box, Static, Text, useApp, useInput, useStdout, useWindowSize } from "ink";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { clearTerminal } from "ansi-escapes";
 import { TurnCancelledError } from "../agent/turn-cancellation";
+import { boundedMemoryError, type StoredMemorySummary } from "../memory/contracts";
 import {
   ContextManagerError,
   type ContextCompactionResult,
@@ -10,14 +19,16 @@ import { ContextBudgetExceededError } from "../model/model-request-preflight";
 import { ModelRequestMediaAggregateError } from "../model/model-client";
 import type { SessionId } from "../ids/runtime-id";
 import { readLastAssistantResponse } from "../session/session-last-response-reader";
-import { visibleTimelineItems } from "./event-store";
+import type { TimelineItem } from "./event-store";
 import type { PromptHistory } from "./prompt-history";
 import { Footer } from "./components/footer";
+import { AssistantMarkdownProvider } from "./components/assistant-markdown";
 import { ContextStatus } from "./components/context-status";
 import { BackgroundTasks } from "./components/background-tasks";
 import { Header } from "./components/header";
 import { ModelPicker } from "./components/model-picker";
 import { FileViewer, FileViewerLoading } from "./components/file-viewer";
+import { MemoryBrowser } from "./components/memory-browser";
 import {
   PromptInput,
   type PromptMaintenanceAction,
@@ -31,7 +42,7 @@ import {
   ResumeSessionPicker,
   ResumeSessionPickerLoading,
 } from "./components/resume-session-picker";
-import { Timeline } from "./components/timeline";
+import { Timeline, TimelineRow } from "./components/timeline";
 import { parseSlashCommand, SLASH_COMMANDS } from "./slash-commands";
 import {
   resolveProjectSlashCommand,
@@ -59,12 +70,16 @@ export type AppProps = {
   ) => Promise<string | undefined>;
   writeClipboard?: (markdown: string) => Promise<void>;
   onQuit?: () => void;
+  initialNotice?: string;
+  listStoredMemories?: () => readonly StoredMemorySummary[];
+  memoryDisabledNotice?: string;
 };
 
 type ResumePickerState =
-  | { status: "loading" }
+  | { status: "loading"; ownerSessionId: SessionId }
   | {
       status: "ready";
+      ownerSessionId: SessionId;
       sessions: readonly SessionSummary[];
       isResuming: boolean;
       error?: string;
@@ -79,8 +94,15 @@ type FileViewState =
   | { status: "loading"; filePath: string }
   | { status: "ready"; file: ViewFile };
 
+const STATIC_HEADER = Symbol("tui-static-header");
+const LIVE_TIMELINE_MAX_ROWS = 8;
+const LIVE_TIMELINE_WITH_TASKS_MAX_ROWS = 3;
+const BACKGROUND_TASKS_MAX_ROWS = 12;
+
 export function App(props: AppProps) {
   const { exit } = useApp();
+  const { write } = useStdout();
+  const windowSize = useWindowSize();
   const binding = useSyncExternalStore(
     props.sessionController.subscribe,
     props.sessionController.getBinding,
@@ -95,11 +117,16 @@ export function App(props: AppProps) {
     binding.projectionStore.getSnapshot,
     binding.projectionStore.getSnapshot,
   );
+  const log = useSyncExternalStore(
+    binding.projectionStore.subscribe,
+    binding.projectionStore.getLogSnapshot,
+    binding.projectionStore.getLogSnapshot,
+  );
   const [isRunning, setIsRunning] = useState(false);
   const [isSessionOperation, setIsSessionOperation] = useState(false);
   const [isCopying, setIsCopying] = useState(false);
   const [isCancelling, setIsCancelling] = useState(false);
-  const [notice, setNotice] = useState<string | undefined>(undefined);
+  const [notice, setNotice] = useState<string | undefined>(props.initialNotice);
   const [showStatus, setShowStatus] = useState(false);
   const [showSkills, setShowSkills] = useState(false);
   const [showMcp, setShowMcp] = useState(false);
@@ -111,19 +138,36 @@ export function App(props: AppProps) {
     ModelPickerState | undefined
   >(undefined);
   const [fileView, setFileView] = useState<FileViewState | undefined>(undefined);
+  const [memoryView, setMemoryView] = useState<
+    readonly StoredMemorySummary[] | undefined
+  >(undefined);
   const [viewError, setViewError] = useState<string | undefined>(undefined);
+  const [staticRenderEpoch, setStaticRenderEpoch] = useState(0);
   const [gitBranch, setGitBranch] = useState<string | undefined>(undefined);
   const [gitBranchRefresh, setGitBranchRefresh] = useState(0);
   const gitBranchReadQueue = useRef<Promise<void>>(Promise.resolve());
   const activeController = useRef<AbortController | undefined>(undefined);
   const resumePickerRequest = useRef(0);
   const fileViewRequest = useRef(0);
+  const beforeSessionCommit = useCallback(() => {
+    write(clearTerminal);
+  }, [write]);
+  const restoreStaticViewport = useCallback(() => {
+    write(clearTerminal);
+    setStaticRenderEpoch((current) => current + 1);
+  }, [write]);
+  const staticItems = useMemo<Array<typeof STATIC_HEADER | TimelineItem>>(
+    () => [STATIC_HEADER, ...log.committed],
+    [log.committed],
+  );
 
   const canSwitchModel =
     state.recentTurns.length === 0 &&
     state.activeTurn === undefined &&
     props.profiles !== undefined &&
     props.profiles.profiles.size > 1;
+  const activeResumePicker =
+    resumePicker?.ownerSessionId === binding.sessionId ? resumePicker : undefined;
 
   const builtInCommands = canSwitchModel
     ? SLASH_COMMANDS
@@ -176,17 +220,22 @@ export function App(props: AppProps) {
   );
 
   const closeResumePicker = () => {
+    const shouldRestoreViewport = activeResumePicker !== undefined;
     resumePickerRequest.current += 1;
     setResumePicker(undefined);
     setIsSessionOperation(false);
     setNotice(undefined);
+    if (shouldRestoreViewport) {
+      restoreStaticViewport();
+    }
   };
 
   const openResumePicker = () => {
     const requestId = resumePickerRequest.current + 1;
+    const ownerSessionId = binding.sessionId;
     resumePickerRequest.current = requestId;
     setNotice(undefined);
-    setResumePicker({ status: "loading" });
+    setResumePicker({ status: "loading", ownerSessionId });
     setIsSessionOperation(true);
     void props.sessionController
       .listSessions()
@@ -197,14 +246,21 @@ export function App(props: AppProps) {
         if (sessions.length === 0) {
           setResumePicker(undefined);
           setNotice("No stored sessions found for this workspace.");
+          restoreStaticViewport();
           return;
         }
-        setResumePicker({ status: "ready", sessions, isResuming: false });
+        setResumePicker({
+          status: "ready",
+          ownerSessionId,
+          sessions,
+          isResuming: false,
+        });
       })
       .catch((error: unknown) => {
         if (resumePickerRequest.current === requestId) {
           setResumePicker(undefined);
           setNotice(`Session operation failed: ${errorMessage(error)}`);
+          restoreStaticViewport();
         }
       })
       .finally(() => {
@@ -222,7 +278,7 @@ export function App(props: AppProps) {
     );
     setIsSessionOperation(true);
     void props.sessionController
-      .resume(session.sessionId)
+      .resume(session.sessionId, beforeSessionCommit)
       .then(() => {
         setResumePicker(undefined);
         setNotice(`Resumed session ${session.sessionId}.`);
@@ -245,6 +301,7 @@ export function App(props: AppProps) {
     setShowModelPicker(false);
     setModelPickerState(undefined);
     setNotice(undefined);
+    restoreStaticViewport();
   };
 
   const doSwitchModel = (profile: ModelProfile) => {
@@ -253,7 +310,7 @@ export function App(props: AppProps) {
     setNotice(undefined);
     setIsSessionOperation(true);
     void props.sessionController
-      .switchModel(profile)
+      .switchModel(profile, beforeSessionCommit)
       .then(async () => {
         setGitBranchRefresh((current) => current + 1);
         try {
@@ -266,6 +323,7 @@ export function App(props: AppProps) {
         }
       })
       .catch((error: unknown) => {
+        restoreStaticViewport();
         setNotice(`Model switch failed: ${errorMessage(error)}`);
       })
       .finally(() => setIsSessionOperation(false));
@@ -274,6 +332,26 @@ export function App(props: AppProps) {
   const closeFileView = () => {
     fileViewRequest.current += 1;
     setFileView(undefined);
+    restoreStaticViewport();
+  };
+
+  const closeMemoryView = () => {
+    setMemoryView(undefined);
+    restoreStaticViewport();
+  };
+
+  const openMemoryView = () => {
+    if (props.listStoredMemories === undefined) {
+      setNotice(props.memoryDisabledNotice ?? "memory disabled: not configured");
+      return;
+    }
+    try {
+      const snapshot = props.listStoredMemories();
+      setNotice(undefined);
+      setMemoryView(snapshot);
+    } catch (error) {
+      setNotice(`memory unavailable: ${boundedMemoryError(error)}`);
+    }
   };
 
   const openFileView = (filePath: string) => {
@@ -294,6 +372,7 @@ export function App(props: AppProps) {
         if (fileViewRequest.current === requestId) {
           setFileView(undefined);
           setViewError(`View failed: ${errorMessage(error)}`);
+          restoreStaticViewport();
         }
       });
   };
@@ -408,7 +487,7 @@ export function App(props: AppProps) {
         setNotice(formatContextRetirementNotice(result));
         return;
       }
-      await props.sessionController.clear();
+      await props.sessionController.clear(beforeSessionCommit);
       signal.throwIfAborted();
       const sessionId = props.sessionController.getBinding().sessionId;
       setGitBranchRefresh((current) => current + 1);
@@ -426,10 +505,14 @@ export function App(props: AppProps) {
   ): PromptSubmissionOutcome | Promise<PromptSubmissionOutcome> => {
     const { userMessage } = submission;
     const trimmed = userMessage.content.trim();
+    const shouldRestoreViewport = showStatus || showSkills || showMcp;
     setShowStatus(false);
     setShowSkills(false);
     setShowMcp(false);
     setViewError(undefined);
+    if (shouldRestoreViewport) {
+      restoreStaticViewport();
+    }
 
     if (userMessage.attachments === undefined && trimmed.startsWith("/")) {
       try {
@@ -454,6 +537,10 @@ export function App(props: AppProps) {
           openFileView(command.filePath);
           return true;
         }
+        if (command.type === "memory") {
+          openMemoryView();
+          return true;
+        }
         if (command.type === "copy") {
           copyLastResponse();
           return true;
@@ -495,7 +582,7 @@ export function App(props: AppProps) {
         if (command.type === "clear") {
           setIsSessionOperation(true);
           void props.sessionController
-            .clear()
+            .clear(beforeSessionCommit)
             .then(() => {
               const sessionId = props.sessionController.getBinding().sessionId;
               setGitBranchRefresh((current) => current + 1);
@@ -512,7 +599,7 @@ export function App(props: AppProps) {
         if (command.type === "fork") {
           setIsSessionOperation(true);
           void props.sessionController
-            .fork()
+            .fork(beforeSessionCommit)
             .then((sessionId) => {
               setGitBranchRefresh((current) => current + 1);
               setNotice(
@@ -558,7 +645,7 @@ export function App(props: AppProps) {
         const operation =
           command.type === "resume"
             ? props.sessionController
-                .resume(command.sessionId)
+                .resume(command.sessionId, beforeSessionCommit)
                 .then(() => setNotice(`Resumed session ${command.sessionId}.`))
             : props.sessionController
                 .delete(command.sessionId)
@@ -578,91 +665,122 @@ export function App(props: AppProps) {
   };
 
   return (
-    <Box flexDirection="column">
-      {fileView?.status === "loading" ? (
-        <FileViewerLoading filePath={fileView.filePath} onCancel={closeFileView} />
-      ) : fileView?.status === "ready" ? (
-        <FileViewer file={fileView.file} onClose={closeFileView} />
-      ) : resumePicker?.status === "loading" ? (
-        <ResumeSessionPickerLoading onCancel={closeResumePicker} />
-      ) : resumePicker?.status === "ready" ? (
-        <ResumeSessionPicker
-          sessions={resumePicker.sessions}
-          isResuming={resumePicker.isResuming}
-          error={resumePicker.error}
-          onCancel={closeResumePicker}
-          onSelect={resumeSelectedSession}
-        />
-      ) : (
-        <>
-          <Header
-            key={binding.sessionId}
-            modelName={binding.modelName}
-            workspaceRoot={binding.workspaceRoot}
-            sessionId={binding.sessionId}
+    <AssistantMarkdownProvider>
+      <Box flexDirection="column">
+        <Static key={`${binding.sessionId}:${staticRenderEpoch}`} items={staticItems}>
+          {(item) =>
+            item === STATIC_HEADER ? (
+              <Header
+                key={`header-${binding.sessionId}`}
+                modelName={binding.modelName}
+                workspaceRoot={binding.workspaceRoot}
+                sessionId={binding.sessionId}
+              />
+            ) : (
+              <TimelineRow key={item.id} item={item} />
+            )
+          }
+        </Static>
+        {fileView?.status === "loading" ? (
+          <FileViewerLoading filePath={fileView.filePath} onCancel={closeFileView} />
+        ) : fileView?.status === "ready" ? (
+          <FileViewer file={fileView.file} onClose={closeFileView} />
+        ) : memoryView !== undefined ? (
+          <MemoryBrowser memories={memoryView} onClose={closeMemoryView} />
+        ) : activeResumePicker?.status === "loading" ? (
+          <ResumeSessionPickerLoading onCancel={closeResumePicker} />
+        ) : activeResumePicker?.status === "ready" ? (
+          <ResumeSessionPicker
+            sessions={activeResumePicker.sessions}
+            isResuming={activeResumePicker.isResuming}
+            error={activeResumePicker.error}
+            onCancel={closeResumePicker}
+            onSelect={resumeSelectedSession}
           />
-          <Box marginTop={1} flexDirection="column">
-            <Timeline items={visibleTimelineItems(state)} />
-          </Box>
-          {state.backgroundTasks.length === 0 ? null : (
-            <Box marginTop={1}>
-              <BackgroundTasks tasks={state.backgroundTasks} />
-            </Box>
-          )}
-          {showStatus ? (
-            <Box marginTop={1}>
-              <ContextStatus state={state} />
+        ) : (
+          <Box
+            flexDirection="column"
+            maxHeight={
+              state.status === "running" ? Math.max(1, windowSize.rows - 1) : undefined
+            }
+            overflow={state.status === "running" ? "hidden" : "visible"}
+          >
+            <Box marginTop={1} flexDirection="column">
+              <Box
+                maxHeight={
+                  state.backgroundTasks.length === 0
+                    ? LIVE_TIMELINE_MAX_ROWS
+                    : LIVE_TIMELINE_WITH_TASKS_MAX_ROWS
+                }
+                overflow="hidden"
+              >
+                <Timeline items={log.live} />
+              </Box>
             </Box>
-          ) : null}
-          {showSkills ? (
+            {state.backgroundTasks.length === 0 ? null : (
+              <Box
+                marginTop={1}
+                maxHeight={BACKGROUND_TASKS_MAX_ROWS}
+                overflow="hidden"
+              >
+                <BackgroundTasks tasks={state.backgroundTasks} />
+              </Box>
+            )}
+            {showStatus ? (
+              <Box marginTop={1}>
+                <ContextStatus state={state} />
+              </Box>
+            ) : null}
+            {showSkills ? (
+              <Box marginTop={1}>
+                <SkillsPanel snapshot={binding.skills()} />
+              </Box>
+            ) : null}
+            {showMcp ? (
+              <Box marginTop={1}>
+                <McpPanel snapshot={binding.mcp()} />
+              </Box>
+            ) : null}
             <Box marginTop={1}>
-              <SkillsPanel snapshot={binding.skills()} />
+              <Footer
+                status={isCancelling ? "cancelling" : state.status}
+                workedForMs={state.workedForMs}
+              />
             </Box>
-          ) : null}
-          {showMcp ? (
-            <Box marginTop={1}>
-              <McpPanel snapshot={binding.mcp()} />
+            <Box marginTop={1} flexDirection="column">
+              {showModelPicker ? (
+                <ModelPicker
+                  profiles={profileList}
+                  currentProfileName={binding.profileName}
+                  isSwitching={modelPickerState?.isSwitching}
+                  error={modelPickerState?.error}
+                  onCancel={closeModelPicker}
+                  onSelect={doSwitchModel}
+                />
+              ) : (
+                <PromptInput
+                  modelName={binding.modelName}
+                  workspaceRoot={binding.workspaceRoot}
+                  gitBranch={gitBranch}
+                  contextUsage={state.contextUsage}
+                  isDisabled={isRunning || isSessionOperation || isCopying}
+                  history={props.history}
+                  commands={availableCommands}
+                  fileLister={props.fileLister}
+                  importImage={binding.importImage}
+                  verifyImageAssets={binding.verifyImageAssets}
+                  onSubmit={onSubmit}
+                  onMaintenance={onMaintenance}
+                  placeholder='Enter a coding request, or "/" for commands'
+                />
+              )}
+              {viewError === undefined ? null : <Text color="red">{viewError}</Text>}
+              {notice === undefined ? null : <Text color="yellow">{notice}</Text>}
             </Box>
-          ) : null}
-          <Box marginTop={1}>
-            <Footer
-              status={isCancelling ? "cancelling" : state.status}
-              workedForMs={state.workedForMs}
-            />
-          </Box>
-          <Box marginTop={1} flexDirection="column">
-            {showModelPicker ? (
-              <ModelPicker
-                profiles={profileList}
-                currentProfileName={binding.profileName}
-                isSwitching={modelPickerState?.isSwitching}
-                error={modelPickerState?.error}
-                onCancel={closeModelPicker}
-                onSelect={doSwitchModel}
-              />
-            ) : (
-              <PromptInput
-                modelName={binding.modelName}
-                workspaceRoot={binding.workspaceRoot}
-                gitBranch={gitBranch}
-                contextUsage={state.contextUsage}
-                isDisabled={isRunning || isSessionOperation || isCopying}
-                history={props.history}
-                commands={availableCommands}
-                fileLister={props.fileLister}
-                importImage={binding.importImage}
-                verifyImageAssets={binding.verifyImageAssets}
-                onSubmit={onSubmit}
-                onMaintenance={onMaintenance}
-                placeholder='Enter a coding request, or "/" for commands'
-              />
-            )}
-            {viewError === undefined ? null : <Text color="red">{viewError}</Text>}
-            {notice === undefined ? null : <Text color="yellow">{notice}</Text>}
           </Box>
-        </>
-      )}
-    </Box>
+        )}
+      </Box>
+    </AssistantMarkdownProvider>
   );
 }
 

package/src/tui/clipboard.ts

@@ -1,5 +1,27 @@
 import clipboard from "clipboardy";
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
 
 export async function writeClipboardText(text: string): Promise<void> {
   await clipboard.write(text);
 }
+
+export function clipboardWriterForEnvironment(
+  env: NodeJS.ProcessEnv,
+): ((text: string) => Promise<void>) | undefined {
+  const filePath = env.TINKER_TEST_CLIPBOARD_FILE;
+  if (filePath === undefined || filePath === "") {
+    return undefined;
+  }
+  if (env.TINKER_TEST_FAKE_MODEL === undefined || env.TINKER_TEST_FAKE_MODEL === "") {
+    throw new Error("TINKER_TEST_CLIPBOARD_FILE requires TINKER_TEST_FAKE_MODEL.");
+  }
+  if (!path.isAbsolute(filePath)) {
+    throw new Error("TINKER_TEST_CLIPBOARD_FILE must be an absolute path.");
+  }
+  return (text) =>
+    writeFile(filePath, text, {
+      encoding: "utf8",
+      mode: 0o600,
+    });
+}

package/src/tui/components/assistant-markdown.tsx

@@ -1,38 +1,39 @@
+import { createContext, memo, useContext, type ReactNode } from "react";
+import { MarkdownText, type RenderOptions } from "@assistant-ui/react-ink-markdown";
 import {
-  MarkdownText,
-  type RenderOptions,
-  useShikiHighlighter,
-} from "@assistant-ui/react-ink-markdown";
+  getPreparedShikiHighlighter,
+  type TuiShikiHighlighter,
+} from "../shiki-highlighter";
 
 export type AssistantMarkdownProps = {
   text: string;
 };
 
-const highlightedLanguages = [
-  "typescript",
-  "javascript",
-  "tsx",
-  "jsx",
-  "json",
-  "bash",
-  "shellscript",
-  "python",
-  "markdown",
-  "html",
-  "css",
-  "yaml",
-  "diff",
-];
-
 const tableOptions = {
   tableTruncate: false,
 } satisfies Pick<RenderOptions, "tableTruncate">;
 
-export function AssistantMarkdown(props: AssistantMarkdownProps) {
-  const highlighter = useShikiHighlighter({
-    theme: "github-dark",
-    langs: highlightedLanguages,
-  });
+const HighlighterContext = createContext<TuiShikiHighlighter | undefined>(undefined);
+
+// The runner resolves Shiki initialization before mounting App, so immutable
+// messages can safely move into Ink Static on their first rendered frame.
+export function AssistantMarkdownProvider(props: { children: ReactNode }) {
+  const highlighter = getPreparedShikiHighlighter();
+  return (
+    <HighlighterContext.Provider value={highlighter}>
+      {props.children}
+    </HighlighterContext.Provider>
+  );
+}
+
+// Memoized on `text`: settled assistant messages are immutable, so an
+// unchanged text guarantees an unchanged render and the whole markdown
+// subtree (including the markdansi re-run inside MarkdownText) can be
+// skipped for unrelated frames.
+export const AssistantMarkdown = memo(function AssistantMarkdown(
+  props: AssistantMarkdownProps,
+) {
+  const highlighter = useContext(HighlighterContext);
 
   return (
     <MarkdownText
@@ -44,4 +45,4 @@ export function AssistantMarkdown(props: AssistantMarkdownProps) {
       tableBorder="unicode"
     />
   );
-}
+});

package/src/tui/components/background-tasks.tsx

@@ -2,9 +2,11 @@ import { Box, Text } from "ink";
 import type { ShellTaskSnapshot, ShellTaskStatus } from "../../tools/bash-task";
 
 export type BackgroundTasksProps = {
-  tasks: ShellTaskSnapshot[];
+  tasks: readonly ShellTaskSnapshot[];
 };
 
+const MAX_VISIBLE_TASKS = 5;
+
 export function BackgroundTasks(props: BackgroundTasksProps) {
   if (props.tasks.length === 0) {
     return null;
@@ -13,13 +15,15 @@ export function BackgroundTasks(props: BackgroundTasksProps) {
   const runningCount = props.tasks.filter(
     (task) => task.status === "running" || task.status === "stopping",
   ).length;
+  const visibleTasks = props.tasks.slice(0, MAX_VISIBLE_TASKS);
+  const omittedTaskCount = props.tasks.length - visibleTasks.length;
 
   return (
     <Box flexDirection="column">
       <Text bold>
         Background tasks · {runningCount} running / {props.tasks.length} total
       </Text>
-      {props.tasks.map((task) => (
+      {visibleTasks.map((task) => (
         <Box key={task.taskId} flexDirection="column">
           <Text color={colorForStatus(task.status)}>
             {symbolForStatus(task.status)} {task.status} {taskDescription(task)}
@@ -28,6 +32,7 @@ export function BackgroundTasks(props: BackgroundTasksProps) {
           <Text dimColor>{taskTiming(task)}</Text>
         </Box>
       ))}
+      {omittedTaskCount === 0 ? null : <Text dimColor>+{omittedTaskCount} more</Text>}
     </Box>
   );
 }

package/src/tui/components/file-viewer.tsx

@@ -18,7 +18,7 @@ export type FileViewerProps = {
 export function FileViewer(props: FileViewerProps) {
   const windowSize = useWindowSize();
   const { stdout } = useStdout();
-  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  const rows = Math.max(4, props.viewportRows ?? windowSize.rows - 1);
   const columns = Math.max(20, props.viewportColumns ?? windowSize.columns);
   const bodyRows = Math.max(1, rows - VIEWER_CHROME_ROWS);
   const normalizedLines = useMemo(
@@ -141,7 +141,7 @@ export function FileViewerLoading(props: {
   viewportColumns?: number;
 }) {
   const windowSize = useWindowSize();
-  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  const rows = Math.max(4, props.viewportRows ?? windowSize.rows - 1);
   const columns = Math.max(20, props.viewportColumns ?? windowSize.columns);
 
   useInput((_input, key) => {