mini-coder 0.5.12 → 0.5.14

package/src/ui/help.ts

@@ -5,7 +5,7 @@
  */
 
 import type { AppState } from "../index.ts";
-import { COMMANDS } from "../input.ts";
+import { COMMANDS, SKILL_COMMAND } from "../input.ts";
 import { abbreviatePath } from "./status.ts";
 
 /** Help text inputs derived from application state. */
@@ -18,12 +18,12 @@ export interface HelpRenderState {
   agentsMd: AppState["agentsMd"];
   /** Discovered skills. */
   skills: AppState["skills"];
-  /** Active plugins. */
-  plugins: AppState["plugins"];
   /** Whether reasoning blocks are shown in the log. */
   showReasoning: AppState["showReasoning"];
   /** Whether verbose tool rendering is enabled in the log. */
   verbose: AppState["verbose"];
+  /** Configured MCP servers and their current on/off state. */
+  mcpServers: AppState["mcpServers"];
 }
 
 /** Command descriptions for `/help` and command autocomplete. */
@@ -36,12 +36,20 @@ export const COMMAND_DESCRIPTIONS: Record<string, string> = {
   undo: "Undo last turn",
   reasoning: "Toggle thinking display",
   verbose: "Toggle verbose tool rendering",
+  mcp: "Toggle configured MCP servers",
   todo: "Show the current todo list",
   login: "OAuth login",
   logout: "OAuth logout",
   help: "Show help",
 };
 
+/** Slash-skill label shown in `/help` and command autocomplete. */
+export const SKILL_REFERENCE_LABEL = `/${SKILL_COMMAND}:name`;
+
+/** Description for the slash-skill input helper. */
+export const SKILL_REFERENCE_DESCRIPTION =
+  "Insert a discovered skill into the next message";
+
 /**
  * Get the `/help` description for a command, including current state when relevant.
  *
@@ -71,6 +79,12 @@ function formatInlineCodeList(items: readonly string[]): string {
   return items.map((item) => formatInlineCode(item)).join(", ");
 }
 
+function formatMcpServerState(
+  server: HelpRenderState["mcpServers"][number],
+): string {
+  return `${formatInlineCode(server.name)} (${server.enabled ? "on" : "off"})`;
+}
+
 /**
  * Build the `/help` text shown in the conversation log.
  *
@@ -85,15 +99,21 @@ export function buildHelpText(state: HelpRenderState): string {
       `- ${formatInlineCode(`/${command}`)} — ${getHelpCommandDescription(command, state)}`,
     );
   }
+  lines.push(
+    `- ${formatInlineCode(SKILL_REFERENCE_LABEL)} — ${SKILL_REFERENCE_DESCRIPTION}; submit ${formatInlineCode(`/${SKILL_COMMAND}`)} to open the skill picker.`,
+  );
 
   const providerNames = Array.from(state.providers.keys());
+  const mcpServerStates = state.mcpServers.map((server) =>
+    formatMcpServerState(server),
+  );
   lines.push(
     "",
     "## Keyboard",
     "",
     "- `Enter` submits the current draft.",
     "- `Shift+Enter` inserts a newline.",
-    "- `Tab` opens command autocomplete when the draft starts with `/`.",
+    "- `Tab` opens command autocomplete when the draft starts with `/`, preserving the current draft.",
     "- Otherwise, `Tab` autocompletes file paths and can open a path picker when there are multiple matches.",
     "- `Ctrl+R` opens global input history search.",
     "- `Escape` closes the current overlay and returns focus to the input.",
@@ -111,6 +131,9 @@ export function buildHelpText(state: HelpRenderState): string {
     state.model
       ? `- Model: ${formatInlineCode(`${state.model.provider}/${state.model.id}`)}`
       : "- Model: none — use `/model`",
+    mcpServerStates.length > 0
+      ? `- MCP servers: ${mcpServerStates.join(", ")}`
+      : "- MCP servers: none — configure them in `settings.json`",
   );
 
   if (state.agentsMd.length > 0) {
@@ -131,12 +154,5 @@ export function buildHelpText(state: HelpRenderState): string {
     }
   }
 
-  if (state.plugins.length > 0) {
-    lines.push("", "## Plugins", "");
-    for (const plugin of state.plugins) {
-      lines.push(`- ${formatInlineCode(plugin.entry.name)}`);
-    }
-  }
-
   return lines.join("\n");
 }

package/src/ui.ts

@@ -27,7 +27,7 @@ import type { Theme } from "./theme.ts";
 import { createUiAgentController } from "./ui/agent.ts";
 import { createCommandController } from "./ui/commands.ts";
 import {
-  buildConversationLogNodes,
+  buildConversationLayoutSnapshot,
   CONVERSATION_GAP,
   resetConversationRenderCache,
 } from "./ui/conversation.ts";
@@ -74,8 +74,8 @@ 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;
@@ -97,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)
 // ---------------------------------------------------------------------------
@@ -107,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;
 
@@ -166,8 +174,8 @@ 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();
@@ -516,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 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;
+    }
+  }
+
+  return Math.min(low, Math.max(0, itemHeights.length - 1));
 }
 
-function getVisibleConversationStart(messageCount: number): number {
-  if (stickToBottom) {
-    return getLatestConversationChunkStart(messageCount);
+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;
+    }
   }
 
-  visibleConversationStart = Math.min(
-    visibleConversationStart,
-    getLatestConversationChunkStart(messageCount),
-  );
-  return visibleConversationStart;
+  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,
     agentController.getStreamingConversationState(),
-    getVisibleConversationStart(state.messages.length),
     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,
-        agentController.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,
   );
-}
 
-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);
+  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));
 
-  visibleConversationStart = nextStart;
-  scrollOffset += Math.max(0, nextHeight - currentHeight);
+  const topSpacerHeight = measureConversationSliceHeight(
+    prefixHeights,
+    0,
+    startIndex,
+  );
+  const bottomSpacerHeight = measureConversationSliceHeight(
+    prefixHeights,
+    endIndex,
+    items.length,
+  );
+
+  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;
 }
 
 // ---------------------------------------------------------------------------
@@ -610,6 +707,13 @@ function openPathAutocompleteOverlay(state: AppState): void {
       inputValue = value;
       dismissOverlay();
     },
+    onKeyPress: (key) => {
+      if (key === "escape") {
+        dismissOverlay();
+        return;
+      }
+      return false;
+    },
     onBlur: dismissOverlay,
   });
 
@@ -663,7 +767,7 @@ export function createInputController(state: AppState): InputController {
 
   return {
     onChange: (value) => {
-      if (inputValue === value) {
+      if (inputReadOnly || inputValue === value) {
         return;
       }
       inputValue = value;
@@ -675,6 +779,13 @@ export function createInputController(state: AppState): InputController {
       inputFocused = false;
     },
     onKeyPress: (key) => {
+      if (inputReadOnly) {
+        if (READONLY_INPUT_BUBBLE_KEYS.has(key)) {
+          return;
+        }
+        return false;
+      }
+
       if (key === "enter") {
         const raw = inputValue;
 
@@ -684,8 +795,13 @@ export function createInputController(state: AppState): InputController {
           return false;
         }
 
-        inputValue = "";
+        const queuedInputCount = state.queuedUserMessages.length;
         handleInput(raw, state);
+        if (state.queuedUserMessages.length > queuedInputCount) {
+          inputReadOnly = true;
+        } else {
+          inputValue = "";
+        }
         return false;
       }
       if (key === "tab") {
@@ -773,7 +889,7 @@ const commandController = createCommandController({
   openOverlay,
   dismissOverlay,
   setInputValue: (value) => {
-    if (inputValue === value) {
+    if (inputReadOnly || inputValue === value) {
       return;
     }
     inputValue = value;
@@ -797,6 +913,14 @@ const agentController = createUiAgentController({
     commandController.handleCommand(command, state),
   requestRender,
   scrollConversationToBottom,
+  clearQueuedInputDraft: () => {
+    if (!inputReadOnly) {
+      return;
+    }
+    inputReadOnly = false;
+    inputValue = "";
+    inputFocused = true;
+  },
   startDividerAnimation,
   stopDividerAnimation,
 });
@@ -891,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,
@@ -900,23 +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);
-        }
       },
     },
-    buildConversationLog(state, width),
+    buildConversationLog(state, width, viewportHeight),
   );
 }
 
@@ -929,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(
@@ -936,6 +1073,7 @@ export function renderBaseLayout(
   cols: number,
   inputController: InputController,
   onSuspend?: () => void,
+  rows = Number.POSITIVE_INFINITY,
 ): Node {
   titleState = state;
   titleViewportActive = true;
@@ -943,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%",
@@ -973,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,
     ],
   );
 }
@@ -1005,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("immediate");
-      });
-    });
+    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) {