mini-coder 0.5.11 → 0.5.12

package/src/ui/input.test.ts

@@ -2,13 +2,7 @@ import { afterEach, describe, expect, test } from "bun:test";
 import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { DEFAULT_THEME } from "../theme.ts";
-import {
-  autocompleteInputPath,
-  findInputPathMatches,
-  type InputController,
-  renderInputArea,
-} from "./input.ts";
+import { autocompleteInputPath, findInputPathMatches } from "./input.ts";
 
 const tempDirs: string[] = [];
 
@@ -24,43 +18,7 @@ afterEach(() => {
   }
 });
 
-function expectTextInput(node: ReturnType<typeof renderInputArea>) {
-  if (node.type !== "textinput") {
-    throw new Error("Expected a TextInput node");
-  }
-  return node;
-}
-
 describe("ui/input", () => {
-  test("renderInputArea shows the current draft with the configured placeholder and size limits", () => {
-    const controller: InputController = {
-      onChange: () => {},
-      onFocus: () => {},
-      onBlur: () => {},
-      onKeyPress: () => undefined,
-    };
-
-    const input = expectTextInput(
-      renderInputArea(DEFAULT_THEME, controller, "draft", true),
-    );
-    const placeholder = input.props.placeholder;
-
-    expect(input.props.value).toBe("draft");
-    expect(input.props.focused).toBe(true);
-    expect(input.props.minHeight).toBe(2);
-    expect(input.props.maxHeight).toBe(10);
-    expect(input.props.padding).toEqual({ x: 1 });
-    expect(placeholder?.type).toBe("text");
-    if (!placeholder || placeholder.type !== "text") {
-      throw new Error("Expected a text placeholder");
-    }
-    expect(placeholder.content).toBe(
-      "`Ctrl+R` for input history, `/` + `Tab` for interactive menu, or type a message…",
-    );
-    expect(placeholder.props.fgColor).toBe(DEFAULT_THEME.mutedText);
-    expect(placeholder.props.italic).toBe(true);
-  });
-
   test("autocompleteInputPath completes the last file path token when exactly one match is available", () => {
     const cwd = createTempDir();
     mkdirSync(join(cwd, "src"), { recursive: true });

package/src/ui/runtime.ts

@@ -0,0 +1,69 @@
+/**
+ * Runtime-only helper bindings for the terminal UI.
+ *
+ * @module
+ */
+
+import type { AppState } from "../index.ts";
+import {
+  appendConversationMessage,
+  appendMessage,
+  createUiMessage,
+  createUiTodoMessage,
+  type UiInfoFormat,
+  type UiMessage,
+} from "../session.ts";
+import type { TodoItem } from "../tools.ts";
+
+/** Render scheduling priorities used by the terminal UI. */
+export type UiRenderPriority = "immediate" | "normal" | "stream" | "animation";
+
+interface UiRuntimeHooks {
+  /** Schedule a UI render. */
+  requestRender: (priority?: UiRenderPriority) => void;
+  /** Re-enable stick-to-bottom behavior for the conversation log. */
+  scrollConversationToBottom: () => void;
+}
+
+interface UiRuntimeHelpers {
+  /** Append a UI-only info message to the conversation log. */
+  appendInfoMessage: (
+    text: string,
+    state: AppState,
+    format?: UiInfoFormat,
+  ) => void;
+  /** Append a UI-only todo snapshot to the conversation log. */
+  appendTodoMessage: (todos: readonly TodoItem[], state: AppState) => void;
+}
+
+function appendUiMessage(
+  message: UiMessage,
+  state: AppState,
+  runtime: UiRuntimeHooks,
+): void {
+  if (state.session) {
+    appendMessage(state.db, state.session.id, message);
+  }
+  appendConversationMessage(state, message);
+  runtime.scrollConversationToBottom();
+  runtime.requestRender("normal");
+}
+
+/**
+ * Create runtime-bound helpers that append UI-only conversation messages.
+ *
+ * @param runtime - Render and scroll hooks owned by `ui.ts`.
+ * @returns Helpers shared by the command and agent controllers.
+ */
+export function createUiRuntimeHelpers(
+  runtime: UiRuntimeHooks,
+): UiRuntimeHelpers {
+  return {
+    appendInfoMessage: (text, state, format) => {
+      appendUiMessage(createUiMessage(text, format), state, runtime);
+    },
+    appendTodoMessage: (todos, state) => {
+      appendUiMessage(createUiTodoMessage(todos), state, runtime);
+    },
+  };
+}

package/src/ui.ts

@@ -22,18 +22,9 @@ 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,
@@ -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";
@@ -85,6 +77,12 @@ const TERMINAL_TITLE_FRAMES = [
 /** Maximum number of committed messages rendered before older history is chunked. */
 const CONVERSATION_CHUNK_MESSAGES = 50;
 
+/** 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<{
   /** Submitted raw inputs that trigger graceful quit. */
@@ -173,7 +171,8 @@ export function resetUiState(): void {
   inputFocused = true;
   dividerTick = 0;
   stopDividerAnimation();
-  resetUiAgentState();
+  renderScheduler.reset();
+  agentController.reset();
   resetConversationRenderCache();
   activeOverlay = null;
   stdinWasRaw = false;
@@ -186,28 +185,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 +201,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 +284,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 +458,7 @@ function startDividerAnimation(): void {
   dividerTick = 0;
   dividerTimer = setInterval(() => {
     dividerTick++;
-    requestRender();
+    requestRender("animation");
   }, DIVIDER_FRAME_MS);
 }
 
@@ -412,7 +539,7 @@ export function buildConversationLog(
 ): Node[] {
   return buildConversationLogNodes(
     state,
-    getStreamingConversationState(),
+    agentController.getStreamingConversationState(),
     getVisibleConversationStart(state.messages.length),
     width,
   );
@@ -428,7 +555,7 @@ function measureConversationHeight(
       { gap: CONVERSATION_GAP },
       buildConversationLogNodes(
         state,
-        getStreamingConversationState(),
+        agentController.getStreamingConversationState(),
         startIndex,
         width,
       ),
@@ -455,14 +582,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 {
@@ -500,7 +625,6 @@ function handleTabKeyPress(state: AppState): void {
   const completedInput = autocompleteInputPath(inputValue, state.cwd);
   if (completedInput) {
     inputValue = completedInput;
-    requestRender();
     return;
   }
 
@@ -539,16 +663,16 @@ export function createInputController(state: AppState): InputController {
 
   return {
     onChange: (value) => {
+      if (inputValue === value) {
+        return;
+      }
       inputValue = value;
-      requestRender();
     },
     onFocus: () => {
       inputFocused = true;
-      requestRender();
     },
     onBlur: () => {
       inputFocused = false;
-      requestRender();
     },
     onKeyPress: (key) => {
       if (key === "enter") {
@@ -556,13 +680,11 @@ export function createInputController(state: AppState): InputController {
 
         if (isQuitInput(raw)) {
           inputValue = "";
-          requestRender();
           requestGracefulExit(state);
           return false;
         }
 
         inputValue = "";
-        requestRender();
         handleInput(raw, state);
         return false;
       }
@@ -641,63 +763,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 (inputValue === value) {
+      return;
+    }
     inputValue = value;
   },
-  appendInfoMessage,
-  appendTodoMessage,
+  appendInfoMessage: uiRuntimeHelpers.appendInfoMessage,
+  appendTodoMessage: uiRuntimeHelpers.appendTodoMessage,
   scrollConversationToBottom,
-  render: requestRender,
+  requestRender,
   reloadPromptContext,
   openInBrowser,
 });
@@ -708,10 +792,10 @@ 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,
   startDividerAnimation,
   stopDividerAnimation,
@@ -830,8 +914,6 @@ function renderConversationLog(state: AppState, width: number): Node {
         if (!stickToBottom && offset === 0 && visibleConversationStart > 0) {
           prependConversationChunk(state, width);
         }
-
-        requestRender();
       },
     },
     buildConversationLog(state, width),
@@ -930,7 +1012,7 @@ export function startUI(state: AppState): void {
         if (state.running) {
           startDividerAnimation();
         }
-        requestRender();
+        requestRender("immediate");
       });
     });
     const overlay = renderActiveOverlay(state);
@@ -948,6 +1030,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);
   }
 }