mini-coder 0.5.11 → 0.5.13

package/src/ui.ts

@@ -22,21 +22,12 @@ import {
 import type { Node } from "@cel-tui/types";
 import type { AppState } from "./index.ts";
 import { reloadPromptContext, shutdown } from "./index.ts";
-import {
-  appendMessage,
-  createUiMessage,
-  createUiTodoMessage,
-  type UiInfoFormat,
-} from "./session.ts";
+import { collapseWhitespaceToNull, joinTextBlocks } from "./text.ts";
 import type { Theme } from "./theme.ts";
-import {
-  createUiAgentController,
-  getStreamingConversationState,
-  resetUiAgentState,
-} from "./ui/agent.ts";
+import { createUiAgentController } from "./ui/agent.ts";
 import { createCommandController } from "./ui/commands.ts";
 import {
-  buildConversationLogNodes,
+  buildConversationLayoutSnapshot,
   CONVERSATION_GAP,
   resetConversationRenderCache,
 } from "./ui/conversation.ts";
@@ -51,6 +42,7 @@ import {
   OVERLAY_MAX_VISIBLE,
   renderOverlay,
 } from "./ui/overlay.ts";
+import { createUiRuntimeHelpers, type UiRenderPriority } from "./ui/runtime.ts";
 import { renderStatusBar } from "./ui/status.ts";
 
 export type { InputController } from "./ui/input.ts";
@@ -82,8 +74,14 @@ const TERMINAL_TITLE_FRAMES = [
   "[o=---]",
 ] as const;
 
-/** Maximum number of committed messages rendered before older history is chunked. */
-const CONVERSATION_CHUNK_MESSAGES = 50;
+/** Overscan applied above and below the viewport for virtualized log rendering. */
+const CONVERSATION_OVERSCAN_ROWS = 6;
+
+/** Minimum delay between coalesced streaming renders. */
+const STREAM_RENDER_MIN_INTERVAL_MS = 33;
+
+/** Minimum delay between low-priority divider animation renders. */
+const ANIMATION_RENDER_MIN_INTERVAL_MS = DIVIDER_FRAME_MS;
 
 /** Centralized interactive quit rules for keypresses and submitted input. */
 const QUIT_RULES: Readonly<{
@@ -99,6 +97,14 @@ const QUIT_RULES: Readonly<{
   keysWhenEmptyInput: new Set(["ctrl+d"]),
 };
 
+/** Keypresses that still bubble while the queued steering draft is readonly. */
+const READONLY_INPUT_BUBBLE_KEYS = new Set([
+  "ctrl+c",
+  "ctrl+d",
+  "ctrl+z",
+  "escape",
+]);
+
 // ---------------------------------------------------------------------------
 // UI state (module-scoped, not in AppState)
 // ---------------------------------------------------------------------------
@@ -109,12 +115,12 @@ let scrollOffset = 0;
 /** Whether the log auto-scrolls to the bottom. */
 let stickToBottom = true;
 
-/** First visible committed message when older history is chunked. */
-let visibleConversationStart = 0;
-
 /** Current text in the input area. */
 let inputValue = "";
 
+/** Whether the visible input draft is temporarily readonly. */
+let inputReadOnly = false;
+
 /** Whether the text input is focused. */
 let inputFocused = true;
 
@@ -168,12 +174,13 @@ export function isQuitKey(key: string, input: string): boolean {
 export function resetUiState(): void {
   scrollOffset = 0;
   stickToBottom = true;
-  visibleConversationStart = 0;
   inputValue = "";
+  inputReadOnly = false;
   inputFocused = true;
   dividerTick = 0;
   stopDividerAnimation();
-  resetUiAgentState();
+  renderScheduler.reset();
+  agentController.reset();
   resetConversationRenderCache();
   activeOverlay = null;
   stdinWasRaw = false;
@@ -186,28 +193,14 @@ export function resetUiState(): void {
 // Terminal title
 // ---------------------------------------------------------------------------
 
-function collapseTerminalTitleText(text: string): string | null {
-  const collapsed = text.replace(/\s+/g, " ").trim();
-  return collapsed.length > 0 ? collapsed : null;
-}
-
 function getUserTerminalTitleText(
   content: Extract<AppState["messages"][number], { role: "user" }>["content"],
 ): string | null {
   if (typeof content === "string") {
-    return collapseTerminalTitleText(content);
+    return collapseWhitespaceToNull(content);
   }
 
-  const text = content
-    .filter(
-      (block): block is Extract<(typeof content)[number], { type: "text" }> => {
-        return block.type === "text";
-      },
-    )
-    .map((block) => block.text)
-    .join(" ");
-
-  return collapseTerminalTitleText(text);
+  return collapseWhitespaceToNull(joinTextBlocks(content));
 }
 
 function getAssistantTerminalTitleText(
@@ -216,24 +209,7 @@ function getAssistantTerminalTitleText(
     { role: "assistant" }
   >["content"],
 ): string | null {
-  const text = content
-    .filter(
-      (
-        block,
-      ): block is Extract<
-        Extract<
-          AppState["messages"][number],
-          { role: "assistant" }
-        >["content"][number],
-        { type: "text" }
-      > => {
-        return block.type === "text";
-      },
-    )
-    .map((block) => block.text)
-    .join(" ");
-
-  return collapseTerminalTitleText(text);
+  return collapseWhitespaceToNull(joinTextBlocks(content));
 }
 
 function truncateTerminalTitleTail(text: string): string {
@@ -316,9 +292,168 @@ function invalidateTerminalTitleCache(): void {
   lastTerminalTitle = null;
 }
 
-function requestRender(): void {
-  syncTerminalTitle(titleState);
-  cel.render();
+interface RenderSchedulerRuntime {
+  /** Render-time clock used for throttling in tests and production. */
+  now?: () => number;
+  /** Microtask queue used for coalescing normal-priority flushes. */
+  queueMicrotask?: (callback: () => void) => void;
+  /** Timer primitive used for deferred stream/animation flushes. */
+  setTimeout?: typeof setTimeout;
+  /** Timer cancellation primitive paired with `setTimeout`. */
+  clearTimeout?: typeof clearTimeout;
+  /** Optional hook to sync the terminal title before rendering. */
+  syncTitle?: () => void;
+  /** cel render primitive invoked for each scheduled flush. */
+  render: () => void;
+}
+
+interface RenderScheduler {
+  /** Schedule a render with the given priority. */
+  requestRender: (priority?: UiRenderPriority) => void;
+  /** Cancel any pending render work and reset throttling state. */
+  reset: () => void;
+}
+
+function getRenderPriorityRank(priority: UiRenderPriority): number {
+  switch (priority) {
+    case "immediate":
+      return 3;
+    case "normal":
+      return 2;
+    case "stream":
+      return 1;
+    case "animation":
+      return 0;
+  }
+}
+
+function getRenderMinInterval(priority: UiRenderPriority): number {
+  switch (priority) {
+    case "stream":
+      return STREAM_RENDER_MIN_INTERVAL_MS;
+    case "animation":
+      return ANIMATION_RENDER_MIN_INTERVAL_MS;
+    default:
+      return 0;
+  }
+}
+
+function chooseHigherRenderPriority(
+  left: UiRenderPriority | null,
+  right: UiRenderPriority,
+): UiRenderPriority {
+  if (!left) {
+    return right;
+  }
+  return getRenderPriorityRank(left) >= getRenderPriorityRank(right)
+    ? left
+    : right;
+}
+
+/**
+ * Create the coalescing render scheduler used by the terminal UI.
+ *
+ * @param runtime - Render/timer hooks for production code and focused tests.
+ * @returns A scheduler that coalesces repeated render requests by priority.
+ */
+export function createRenderScheduler(
+  runtime: RenderSchedulerRuntime,
+): RenderScheduler {
+  let pendingPriority: UiRenderPriority | null = null;
+  let microtaskQueued = false;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let lastRenderTime = 0;
+
+  const now = (): number => runtime.now?.() ?? Date.now();
+  const enqueueMicrotask = runtime.queueMicrotask ?? queueMicrotask;
+  const startTimer = runtime.setTimeout ?? setTimeout;
+  const stopTimer = runtime.clearTimeout ?? clearTimeout;
+
+  const clearRenderTimer = (): void => {
+    if (timer) {
+      stopTimer(timer);
+      timer = null;
+    }
+  };
+
+  const flushRender = (): void => {
+    pendingPriority = null;
+    microtaskQueued = false;
+    clearRenderTimer();
+    runtime.syncTitle?.();
+    runtime.render();
+    lastRenderTime = now();
+  };
+
+  const schedulePendingRender = (): void => {
+    if (!pendingPriority) {
+      return;
+    }
+
+    if (pendingPriority === "immediate") {
+      flushRender();
+      return;
+    }
+
+    if (pendingPriority === "normal") {
+      clearRenderTimer();
+      if (microtaskQueued) {
+        return;
+      }
+      microtaskQueued = true;
+      enqueueMicrotask(() => {
+        microtaskQueued = false;
+        if (!pendingPriority) {
+          return;
+        }
+        flushRender();
+      });
+      return;
+    }
+
+    if (microtaskQueued) {
+      return;
+    }
+
+    const delay = Math.max(
+      0,
+      lastRenderTime + getRenderMinInterval(pendingPriority) - now(),
+    );
+    clearRenderTimer();
+    timer = startTimer(() => {
+      timer = null;
+      if (!pendingPriority) {
+        return;
+      }
+      flushRender();
+    }, delay);
+  };
+
+  return {
+    requestRender: (priority = "normal") => {
+      pendingPriority = chooseHigherRenderPriority(pendingPriority, priority);
+      schedulePendingRender();
+    },
+    reset: () => {
+      pendingPriority = null;
+      microtaskQueued = false;
+      clearRenderTimer();
+      lastRenderTime = 0;
+    },
+  };
+}
+
+const renderScheduler = createRenderScheduler({
+  render: () => {
+    cel.render();
+  },
+  syncTitle: () => {
+    syncTerminalTitle(titleState);
+  },
+});
+
+function requestRender(priority: UiRenderPriority = "normal"): void {
+  renderScheduler.requestRender(priority);
 }
 
 // ---------------------------------------------------------------------------
@@ -331,7 +466,7 @@ function startDividerAnimation(): void {
   dividerTick = 0;
   dividerTimer = setInterval(() => {
     dividerTick++;
-    requestRender();
+    requestRender("animation");
   }, DIVIDER_FRAME_MS);
 }
 
@@ -389,62 +524,151 @@ function renderDivider(state: AppState, width: number): Node {
 // Conversation log
 // ---------------------------------------------------------------------------
 
-function getLatestConversationChunkStart(messageCount: number): number {
-  return Math.max(0, messageCount - CONVERSATION_CHUNK_MESSAGES);
+function measureConversationSliceHeight(
+  prefixHeights: readonly number[],
+  startIndex: number,
+  endIndex: number,
+): number {
+  const count = endIndex - startIndex;
+  if (count <= 0) {
+    return 0;
+  }
+  return (
+    prefixHeights[endIndex]! -
+    prefixHeights[startIndex]! +
+    CONVERSATION_GAP * Math.max(0, count - 1)
+  );
+}
+
+function getConversationItemTop(
+  prefixHeights: readonly number[],
+  index: number,
+): number {
+  return prefixHeights[index]! + CONVERSATION_GAP * index;
 }
 
-function getVisibleConversationStart(messageCount: number): number {
-  if (stickToBottom) {
-    return getLatestConversationChunkStart(messageCount);
+function findConversationStartIndex(
+  itemHeights: readonly { height: number }[],
+  prefixHeights: readonly number[],
+  offset: number,
+): number {
+  let low = 0;
+  let high = itemHeights.length;
+
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    const bottom =
+      getConversationItemTop(prefixHeights, mid) + itemHeights[mid]!.height;
+    if (bottom > offset) {
+      high = mid;
+    } else {
+      low = mid + 1;
+    }
   }
 
-  visibleConversationStart = Math.min(
-    visibleConversationStart,
-    getLatestConversationChunkStart(messageCount),
-  );
-  return visibleConversationStart;
+  return Math.min(low, Math.max(0, itemHeights.length - 1));
+}
+
+function findConversationEndIndex(
+  items: readonly { height: number }[],
+  prefixHeights: readonly number[],
+  offset: number,
+): number {
+  let low = 0;
+  let high = items.length;
+
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if (getConversationItemTop(prefixHeights, mid) < offset) {
+      low = mid + 1;
+    } else {
+      high = mid;
+    }
+  }
+
+  return low;
+}
+
+function renderConversationSpacer(height: number): Node | null {
+  const rows = Math.max(0, Math.floor(height));
+  if (rows === 0) {
+    return null;
+  }
+
+  const paddingY = Math.floor(rows / 2);
+  if (rows % 2 === 0) {
+    return VStack({ padding: { y: paddingY } }, []);
+  }
+
+  return VStack({ padding: { y: paddingY } }, [Text("")]);
 }
 
 /** Build the full conversation log as an array of nodes. */
 export function buildConversationLog(
   state: AppState,
   width = Number.POSITIVE_INFINITY,
+  viewportHeight = Number.POSITIVE_INFINITY,
 ): Node[] {
-  return buildConversationLogNodes(
+  const layout = buildConversationLayoutSnapshot(
     state,
-    getStreamingConversationState(),
-    getVisibleConversationStart(state.messages.length),
+    agentController.getStreamingConversationState(),
     width,
   );
-}
+  const { items, prefixHeights } = layout;
+  if (!Number.isFinite(viewportHeight) || items.length <= 1) {
+    return items.map((item) => item.node);
+  }
 
-function measureConversationHeight(
-  state: AppState,
-  width: number,
-  startIndex: number,
-): number {
-  return measureContentHeight(
-    VStack(
-      { gap: CONVERSATION_GAP },
-      buildConversationLogNodes(
-        state,
-        getStreamingConversationState(),
-        startIndex,
-        width,
-      ),
-    ),
-    { width: Math.max(1, width) },
+  const totalHeight = measureConversationSliceHeight(
+    prefixHeights,
+    0,
+    items.length,
   );
-}
+  const visibleHeight = Math.max(1, Math.floor(viewportHeight));
+  const maxOffset = Math.max(0, totalHeight - visibleHeight);
+  const effectiveScrollOffset = stickToBottom
+    ? maxOffset
+    : Math.max(0, Math.min(scrollOffset, maxOffset));
+  const paddedTop = Math.max(
+    0,
+    effectiveScrollOffset - CONVERSATION_OVERSCAN_ROWS,
+  );
+  const paddedBottom = Math.min(
+    totalHeight,
+    effectiveScrollOffset + visibleHeight + CONVERSATION_OVERSCAN_ROWS,
+  );
+
+  let startIndex = findConversationStartIndex(items, prefixHeights, paddedTop);
+  let endIndex = findConversationEndIndex(items, prefixHeights, paddedBottom);
+  if (endIndex <= startIndex) {
+    endIndex = Math.min(items.length, startIndex + 1);
+  }
+  startIndex = Math.min(startIndex, Math.max(0, endIndex - 1));
 
-function prependConversationChunk(state: AppState, width: number): void {
-  const currentStart = visibleConversationStart;
-  const nextStart = Math.max(0, currentStart - CONVERSATION_CHUNK_MESSAGES);
-  const currentHeight = measureConversationHeight(state, width, currentStart);
-  const nextHeight = measureConversationHeight(state, width, nextStart);
+  const topSpacerHeight = measureConversationSliceHeight(
+    prefixHeights,
+    0,
+    startIndex,
+  );
+  const bottomSpacerHeight = measureConversationSliceHeight(
+    prefixHeights,
+    endIndex,
+    items.length,
+  );
 
-  visibleConversationStart = nextStart;
-  scrollOffset += Math.max(0, nextHeight - currentHeight);
+  const nodes: Node[] = [];
+  const topSpacer = renderConversationSpacer(topSpacerHeight);
+  if (topSpacer) {
+    nodes.push(topSpacer);
+  }
+  for (let index = startIndex; index < endIndex; index++) {
+    nodes.push(items[index]!.node);
+  }
+  const bottomSpacer = renderConversationSpacer(bottomSpacerHeight);
+  if (bottomSpacer) {
+    nodes.push(bottomSpacer);
+  }
+  return nodes;
 }
 
 // ---------------------------------------------------------------------------
@@ -455,14 +679,12 @@ function prependConversationChunk(state: AppState, width: number): void {
 function openOverlay(overlay: ActiveOverlay): void {
   activeOverlay = overlay;
   inputFocused = false;
-  requestRender();
 }
 
 /** Dismiss the active overlay and return focus to the input. */
 function dismissOverlay(): void {
   activeOverlay = null;
   inputFocused = true;
-  requestRender();
 }
 
 function openPathAutocompleteOverlay(state: AppState): void {
@@ -485,6 +707,13 @@ function openPathAutocompleteOverlay(state: AppState): void {
       inputValue = value;
       dismissOverlay();
     },
+    onKeyPress: (key) => {
+      if (key === "escape") {
+        dismissOverlay();
+        return;
+      }
+      return false;
+    },
     onBlur: dismissOverlay,
   });
 
@@ -500,7 +729,6 @@ function handleTabKeyPress(state: AppState): void {
   const completedInput = autocompleteInputPath(inputValue, state.cwd);
   if (completedInput) {
     inputValue = completedInput;
-    requestRender();
     return;
   }
 
@@ -539,31 +767,41 @@ export function createInputController(state: AppState): InputController {
 
   return {
     onChange: (value) => {
+      if (inputReadOnly || inputValue === value) {
+        return;
+      }
       inputValue = value;
-      requestRender();
     },
     onFocus: () => {
       inputFocused = true;
-      requestRender();
     },
     onBlur: () => {
       inputFocused = false;
-      requestRender();
     },
     onKeyPress: (key) => {
+      if (inputReadOnly) {
+        if (READONLY_INPUT_BUBBLE_KEYS.has(key)) {
+          return;
+        }
+        return false;
+      }
+
       if (key === "enter") {
         const raw = inputValue;
 
         if (isQuitInput(raw)) {
           inputValue = "";
-          requestRender();
           requestGracefulExit(state);
           return false;
         }
 
-        inputValue = "";
-        requestRender();
+        const queuedInputCount = state.queuedUserMessages.length;
         handleInput(raw, state);
+        if (state.queuedUserMessages.length > queuedInputCount) {
+          inputReadOnly = true;
+        } else {
+          inputValue = "";
+        }
         return false;
       }
       if (key === "tab") {
@@ -641,63 +879,25 @@ function scrollConversationToBottom(): void {
   stickToBottom = true;
 }
 
-function appendUiMessage(
-  message: AppState["messages"][number],
-  state: AppState,
-): void {
-  if (state.session) {
-    appendMessage(state.db, state.session.id, message);
-  }
-  state.messages.push(message);
-  scrollConversationToBottom();
-  requestRender();
-}
-
-/**
- * Append a UI-only info message to the conversation log.
- *
- * When no persisted session exists yet, the message stays in memory and is
- * backfilled if the user later starts a session by sending a message.
- *
- * @param text - Display text to append.
- * @param state - Application state.
- * @param format - Optional rich-text format hint for the content.
- */
-function appendInfoMessage(
-  text: string,
-  state: AppState,
-  format?: UiInfoFormat,
-): void {
-  appendUiMessage(createUiMessage(text, format), state);
-}
-
-/**
- * Append a UI-only todo snapshot to the conversation log.
- *
- * When no persisted session exists yet, the message stays in memory and is
- * backfilled if the user later starts a session by sending a message.
- *
- * @param todos - Todo snapshot to append.
- * @param state - Application state.
- */
-function appendTodoMessage(
-  todos: Parameters<typeof createUiTodoMessage>[0],
-  state: AppState,
-): void {
-  appendUiMessage(createUiTodoMessage(todos), state);
-}
+const uiRuntimeHelpers = createUiRuntimeHelpers({
+  requestRender,
+  scrollConversationToBottom,
+});
 
 /** Command controller bound to the module-scoped UI runtime hooks. */
 const commandController = createCommandController({
   openOverlay,
   dismissOverlay,
   setInputValue: (value) => {
+    if (inputReadOnly || inputValue === value) {
+      return;
+    }
     inputValue = value;
   },
-  appendInfoMessage,
-  appendTodoMessage,
+  appendInfoMessage: uiRuntimeHelpers.appendInfoMessage,
+  appendTodoMessage: uiRuntimeHelpers.appendTodoMessage,
   scrollConversationToBottom,
-  render: requestRender,
+  requestRender,
   reloadPromptContext,
   openInBrowser,
 });
@@ -708,11 +908,19 @@ const commandController = createCommandController({
 
 /** Agent controller bound to the module-scoped UI runtime hooks. */
 const agentController = createUiAgentController({
-  appendInfoMessage,
+  appendInfoMessage: uiRuntimeHelpers.appendInfoMessage,
   handleCommand: (command, state) =>
     commandController.handleCommand(command, state),
-  render: requestRender,
+  requestRender,
   scrollConversationToBottom,
+  clearQueuedInputDraft: () => {
+    if (!inputReadOnly) {
+      return;
+    }
+    inputReadOnly = false;
+    inputValue = "";
+    inputFocused = true;
+  },
   startDividerAnimation,
   stopDividerAnimation,
 });
@@ -807,7 +1015,30 @@ export function suspendToBackground(
 // Main
 // ---------------------------------------------------------------------------
 
-function renderConversationLog(state: AppState, width: number): Node {
+function getConversationViewportHeight(
+  cols: number,
+  rows: number,
+  divider: Node,
+  input: Node,
+  statusBar: Node,
+): number {
+  if (!Number.isFinite(rows)) {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  const width = Math.max(1, Math.floor(cols));
+  const reservedHeight =
+    measureContentHeight(divider, { width }) +
+    measureContentHeight(input, { width }) +
+    measureContentHeight(statusBar, { width });
+  return Math.max(1, Math.floor(rows) - reservedHeight);
+}
+
+function renderConversationLog(
+  state: AppState,
+  width: number,
+  viewportHeight: number,
+): Node {
   return VStack(
     {
       flex: 1,
@@ -816,25 +1047,11 @@ function renderConversationLog(state: AppState, width: number): Node {
       justifyContent: state.messages.length === 0 ? "center" : undefined,
       scrollOffset: stickToBottom ? Infinity : scrollOffset,
       onScroll: (offset, maxOffset) => {
-        const wasStickToBottom = stickToBottom;
         scrollOffset = offset;
-
-        if (wasStickToBottom && offset < maxOffset) {
-          visibleConversationStart = getLatestConversationChunkStart(
-            state.messages.length,
-          );
-        }
-
         stickToBottom = offset >= maxOffset;
-
-        if (!stickToBottom && offset === 0 && visibleConversationStart > 0) {
-          prependConversationChunk(state, width);
-        }
-
-        requestRender();
       },
     },
-    buildConversationLog(state, width),
+    buildConversationLog(state, width, viewportHeight),
   );
 }
 
@@ -847,6 +1064,8 @@ function renderConversationLog(state: AppState, width: number): Node {
  * @param state - Application state.
  * @param cols - Current terminal width in columns.
  * @param inputController - Stable callbacks for the controlled TextInput.
+ * @param onSuspend - Optional suspend handler for Ctrl+Z.
+ * @param rows - Current terminal height in rows.
  * @returns The base layout node.
  */
 export function renderBaseLayout(
@@ -854,6 +1073,7 @@ export function renderBaseLayout(
   cols: number,
   inputController: InputController,
   onSuspend?: () => void,
+  rows = Number.POSITIVE_INFINITY,
 ): Node {
   titleState = state;
   titleViewportActive = true;
@@ -861,6 +1081,17 @@ export function renderBaseLayout(
     syncTerminalTitle(state);
   }
 
+  const divider = renderDivider(state, cols);
+  const input = renderInputArea(state.theme, inputController);
+  const statusBar = renderStatusBar(state, cols);
+  const conversationViewportHeight = getConversationViewportHeight(
+    cols,
+    rows,
+    divider,
+    input,
+    statusBar,
+  );
+
   return VStack(
     {
       height: "100%",
@@ -891,16 +1122,16 @@ export function renderBaseLayout(
     },
     [
       // ── Conversation log ──
-      renderConversationLog(state, cols),
+      renderConversationLog(state, cols, conversationViewportHeight),
 
       // ── Animated divider (pulse when agent is working) ──
-      renderDivider(state, cols),
+      divider,
 
       // ── Input area ──
-      renderInputArea(state.theme, inputController),
+      input,
 
       // ── Status bar (1 line) ──
-      renderStatusBar(state, cols),
+      statusBar,
     ],
   );
 }
@@ -923,16 +1154,22 @@ export function startUI(state: AppState): void {
 
   cel.viewport(() => {
     const cols = terminal.columns;
-    const base = renderBaseLayout(state, cols, inputController, () => {
-      suspendToBackground(() => {
-        resumeTerminalUi();
-        cel._getBuffer()?.clear();
-        if (state.running) {
-          startDividerAnimation();
-        }
-        requestRender();
-      });
-    });
+    const base = renderBaseLayout(
+      state,
+      cols,
+      inputController,
+      () => {
+        suspendToBackground(() => {
+          resumeTerminalUi();
+          cel._getBuffer()?.clear();
+          if (state.running) {
+            startDividerAnimation();
+          }
+          requestRender("immediate");
+        });
+      },
+      terminal.rows,
+    );
     const overlay = renderActiveOverlay(state);
 
     if (overlay) {
@@ -948,6 +1185,6 @@ export function startUI(state: AppState): void {
 
   // Show warnings from custom provider discovery
   for (const warning of state.startupWarnings) {
-    appendInfoMessage(warning, state);
+    uiRuntimeHelpers.appendInfoMessage(warning, state);
   }
 }