mini-coder 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-coder",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "A small, fast CLI coding agent",
   "module": "src/index.ts",
   "type": "module",

package/src/index.ts

@@ -47,6 +47,7 @@ import {
 } from "./prompt.ts";
 import {
   appendMessage,
+  computeContextTokens,
   computeStats,
   createSession,
   filterModelMessages,
@@ -526,6 +527,8 @@ export interface AppState {
   messages: ReturnType<typeof loadMessages>;
   /** Cumulative session input/output/cost stats for the status bar. */
   stats: SessionStats;
+  /** Estimated model-visible context tokens for the next request. */
+  contextTokens: number;
   /** Discovered AGENTS.md files. */
   agentsMd: AgentsMdFile[];
   /** Discovered skills. */
@@ -610,6 +613,7 @@ export async function init(): Promise<AppState> {
   const effort = startup.effort;
   const messages: ReturnType<typeof loadMessages> = [];
   const stats = computeStats(messages);
+  const contextTokens = computeContextTokens(messages);
   const promptContext = await loadPromptContext(filterModelMessages(messages), {
     cwd,
   });
@@ -621,6 +625,7 @@ export async function init(): Promise<AppState> {
     effort,
     messages,
     stats,
+    contextTokens,
     agentsMd: promptContext.agentsMd,
     skills: promptContext.skills,
     plugins: promptContext.plugins,

package/src/session.ts

@@ -107,7 +107,7 @@ export interface UiMessage {
 }
 
 /** Any message persisted in session history. */
-type PersistedMessage = Message | UiMessage;
+export type PersistedMessage = Message | UiMessage;
 
 /** Options for creating a new session. */
 interface CreateSessionOpts {
@@ -1071,3 +1071,153 @@ export function computeStats(
 
   return stats;
 }
+
+// ---------------------------------------------------------------------------
+// Context estimation
+// ---------------------------------------------------------------------------
+
+/** Conservative fixed estimate for an image block's token footprint. */
+const ESTIMATED_IMAGE_TOKENS = 1_200;
+
+/** Calculate context tokens from assistant usage, falling back when `totalTokens` is zero. */
+function calculateUsageTokens(usage: AssistantMessage["usage"]): number {
+  return (
+    usage.totalTokens ||
+    usage.input + usage.output + usage.cacheRead + usage.cacheWrite
+  );
+}
+
+/** Estimate token usage from a character count using a conservative chars/4 heuristic. */
+function estimateCharacterTokens(charCount: number): number {
+  return Math.ceil(charCount / 4);
+}
+
+type UserMultipartContent = Exclude<
+  Extract<Message, { role: "user" }>["content"],
+  string
+>;
+type TextOrImageContentBlock =
+  | UserMultipartContent[number]
+  | Extract<Message, { role: "toolResult" }>["content"][number];
+
+function estimateTextOrImageContentTokens(
+  content: readonly TextOrImageContentBlock[],
+): number {
+  let chars = 0;
+  let imageTokens = 0;
+
+  for (const block of content) {
+    if (block.type === "text") {
+      chars += block.text.length;
+      continue;
+    }
+    if (block.type === "image") {
+      imageTokens += ESTIMATED_IMAGE_TOKENS;
+    }
+  }
+
+  return estimateCharacterTokens(chars) + imageTokens;
+}
+
+function estimateUserMessageTokens(
+  message: Extract<Message, { role: "user" }>,
+): number {
+  if (typeof message.content === "string") {
+    return estimateCharacterTokens(message.content.length);
+  }
+  return estimateTextOrImageContentTokens(message.content);
+}
+
+function estimateAssistantBlockCharacters(
+  block: Extract<Message, { role: "assistant" }>["content"][number],
+): number {
+  if (block.type === "text") {
+    return block.text.length;
+  }
+  if (block.type === "thinking") {
+    return block.thinking.length;
+  }
+  return block.name.length + JSON.stringify(block.arguments).length;
+}
+
+function estimateAssistantMessageTokens(
+  message: Extract<Message, { role: "assistant" }>,
+): number {
+  const chars = message.content.reduce((total, block) => {
+    return total + estimateAssistantBlockCharacters(block);
+  }, 0);
+  return estimateCharacterTokens(chars);
+}
+
+function estimateToolResultMessageTokens(
+  message: Extract<Message, { role: "toolResult" }>,
+): number {
+  return estimateTextOrImageContentTokens(message.content);
+}
+
+/** Estimate token usage for a model-visible message. */
+function estimateMessageTokens(message: Message): number {
+  switch (message.role) {
+    case "user":
+      return estimateUserMessageTokens(message);
+    case "assistant":
+      return estimateAssistantMessageTokens(message);
+    case "toolResult":
+      return estimateToolResultMessageTokens(message);
+  }
+}
+
+/**
+ * Fold one persisted message into the running context estimate for the next request.
+ *
+ * Assistant messages with valid usage anchor the full model-visible context for
+ * that point in the transcript, so they replace the running estimate. All other
+ * model-visible messages are added incrementally using the same conservative
+ * estimation logic used before the first valid assistant usage appears.
+ *
+ * @param contextTokens - Running estimate before this message.
+ * @param message - Persisted message to fold into the estimate.
+ * @returns Updated context-token estimate.
+ */
+export function addMessageToContextTokens(
+  contextTokens: number,
+  message: PersistedMessage,
+): number {
+  if (message.role === "ui") {
+    return contextTokens;
+  }
+
+  const usage = getAssistantUsage(message);
+  if (
+    message.role === "assistant" &&
+    usage &&
+    message.stopReason !== "aborted" &&
+    message.stopReason !== "error"
+  ) {
+    return calculateUsageTokens(usage);
+  }
+
+  return contextTokens + estimateMessageTokens(message);
+}
+
+/**
+ * Estimate the current model-visible context size for the next request.
+ *
+ * Recomputed on session-load boundaries and maintained incrementally during an
+ * active turn so render-time status-bar updates do not need to rescan the full
+ * message history.
+ *
+ * @param messages - Full persisted session history.
+ * @returns Estimated context tokens visible to the next model request.
+ */
+export function computeContextTokens(
+  messages: readonly PersistedMessage[],
+): number {
+  let contextTokens = 0;
+
+  for (const message of messages) {
+    contextTokens = addMessageToContextTokens(contextTokens, message);
+  }
+
+  return contextTokens;
+}

package/src/submit.ts

@@ -19,6 +19,7 @@ import {
 } from "./index.ts";
 import { parseInput } from "./input.ts";
 import {
+  addMessageToContextTokens,
   addMessageToStats,
   appendMessage,
   appendPromptHistory,
@@ -212,9 +213,17 @@ function handleAgentEvent(event: AgentEvent, state: AppState): void {
     case "assistant_message":
       state.messages.push(event.message);
       state.stats = addMessageToStats(state.stats, event.message);
+      state.contextTokens = addMessageToContextTokens(
+        state.contextTokens,
+        event.message,
+      );
       break;
     case "tool_result":
       state.messages.push(event.message);
+      state.contextTokens = addMessageToContextTokens(
+        state.contextTokens,
+        event.message,
+      );
       break;
     case "text_delta":
     case "thinking_delta":
@@ -277,6 +286,10 @@ export async function submitResolvedInput(
 
   const turn = appendMessage(state.db, session.id, userMessage);
   state.messages.push(userMessage);
+  state.contextTokens = addMessageToContextTokens(
+    state.contextTokens,
+    userMessage,
+  );
   hooks?.onUserMessage?.(state);
 
   state.git = await loadGitState(state.cwd);

package/src/ui/commands.test.ts

@@ -8,6 +8,7 @@ import type { AppState } from "../index.ts";
 import { COMMANDS } from "../input.ts";
 import {
   appendPromptHistory,
+  computeContextTokens,
   createSession,
   openDatabase,
 } from "../session.ts";
@@ -75,6 +76,7 @@ function createTestState(): AppState {
     effort: "medium",
     messages: [],
     stats: { totalInput: 0, totalOutput: 0, totalCost: 0 },
+    contextTokens: 0,
     agentsMd: [],
     skills: [],
     plugins: [],
@@ -377,6 +379,7 @@ describe("ui/commands", () => {
         totalOutput: 0,
         totalCost: 0,
       });
+      expect(state.contextTokens).toBe(computeContextTokens(state.messages));
     } finally {
       state.db.close();
     }
@@ -436,6 +439,7 @@ describe("ui/commands", () => {
       { role: "ui", kind: "info", content: "old", timestamp: 1 },
     ];
     state.stats = { totalInput: 10, totalOutput: 20, totalCost: 0.5 };
+    state.contextTokens = 123;
 
     try {
       expect(controller.handleCommand("new", state)).toBe(true);
@@ -449,6 +453,7 @@ describe("ui/commands", () => {
         totalOutput: 0,
         totalCost: 0,
       });
+      expect(state.contextTokens).toBe(0);
       expect(state.agentsMd).toEqual([
         { path: "/tmp/reloaded/AGENTS.md", content: "Reloaded context" },
       ]);

package/src/ui/commands.ts

@@ -19,6 +19,7 @@ import type { AppState } from "../index.ts";
 import { getAvailableModels, saveOAuthCredentials } from "../index.ts";
 import { COMMANDS } from "../input.ts";
 import {
+  computeContextTokens,
   computeStats,
   forkSession,
   listPromptHistory,
@@ -387,6 +388,7 @@ export function createCommandController(
             state.session = picked;
             state.messages = loadMessages(state.db, picked.id);
             state.stats = computeStats(state.messages);
+            state.contextTokens = computeContextTokens(state.messages);
             runtime.scrollConversationToBottom();
           }
         }
@@ -402,6 +404,7 @@ export function createCommandController(
     state.session = null;
     state.messages = [];
     state.stats = { totalInput: 0, totalOutput: 0, totalCost: 0 };
+    state.contextTokens = 0;
     await runtime.reloadPromptContext(state);
     runtime.scrollConversationToBottom();
     runtime.render();
@@ -415,6 +418,7 @@ export function createCommandController(
     state.session = forked;
     state.messages = loadMessages(state.db, forked.id);
     state.stats = computeStats(state.messages);
+    state.contextTokens = computeContextTokens(state.messages);
     runtime.appendInfoMessage("Forked session.", state);
   };
 
@@ -434,6 +438,7 @@ export function createCommandController(
     if (removed) {
       state.messages = loadMessages(state.db, state.session.id);
       state.stats = computeStats(state.messages);
+      state.contextTokens = computeContextTokens(state.messages);
       runtime.scrollConversationToBottom();
       runtime.render();
     }

package/src/ui/conversation.test.ts

@@ -838,6 +838,93 @@ describe("ui/conversation", () => {
     expect(text.some((line) => line.includes("TAIL"))).toBe(true);
   });
 
+  test("renderAssistantMessage for a long single-token shell argument wraps through the tail in a narrow viewport", async () => {
+    // Arrange
+    const command = `printf ${"x".repeat(40)}TAIL`;
+    const assistant = {
+      content: [fauxToolCall("shell", { command }, { id: "tool-1" })],
+    };
+
+    // Act
+    const text = await renderVisibleText(
+      renderAssistantMessage(assistant, {
+        ...RENDER_OPTS,
+        verbose: true,
+        previewWidth: 12,
+      }),
+      12,
+      20,
+    );
+
+    // Assert
+    expect(text.some((line) => line.includes("TAIL"))).toBe(true);
+  });
+
+  test("renderAssistantMessage for a long quoted shell string preserves string color across wrapped rows", async () => {
+    // Arrange
+    const command = `printf "${"x".repeat(80)}TAIL"`;
+    const assistant = {
+      content: [fauxToolCall("shell", { command }, { id: "tool-1" })],
+    };
+
+    // Act
+    const rows = await renderBufferRows(
+      renderAssistantMessage(assistant, {
+        ...RENDER_OPTS,
+        verbose: true,
+        previewWidth: 24,
+      }),
+      24,
+      20,
+    );
+    const headRowIndex = rows.findIndex((row) => row.text.includes('"x'));
+    const headRow = headRowIndex >= 0 ? rows[headRowIndex] : undefined;
+    const wrappedRow =
+      headRowIndex >= 0
+        ? rows
+            .slice(headRowIndex + 1)
+            .find((row) => row.text.includes("xxxxxxxx"))
+        : undefined;
+
+    // Assert
+    expect(headRow).toBeDefined();
+    expect(wrappedRow).toBeDefined();
+    expect(headRow?.fgColors[headRow.text.indexOf('"')]).toBe(
+      DEFAULT_THEME.diffAdded ?? null,
+    );
+    expect(wrappedRow?.fgColors[wrappedRow.text.indexOf("x")]).toBe(
+      DEFAULT_THEME.diffAdded ?? null,
+    );
+  });
+
+  test("renderAssistantMessage for long inline markdown code keeps the tail visible", async () => {
+    // Arrange
+    const message = fauxAssistantMessage(`Use \`${"x".repeat(80)}TAIL\``);
+
+    // Act
+    const rows = await renderBufferRows(
+      renderAssistantMessage(message, {
+        ...RENDER_OPTS,
+        previewWidth: 24,
+      }),
+      24,
+      20,
+    );
+    const codeRows = rows.filter(
+      (row) => row.text.includes("x") || row.text.includes("TAIL`"),
+    );
+
+    // Assert
+    expect(codeRows.length).toBeGreaterThan(1);
+    expect(rows.some((row) => row.text.includes("TAIL`"))).toBe(true);
+    expect(codeRows[0]?.fgColors[codeRows[0].text.indexOf("x")]).toBe(
+      DEFAULT_THEME.diffAdded ?? null,
+    );
+    expect(codeRows.at(-1)?.fgColors[codeRows.at(-1)!.text.indexOf("T")]).toBe(
+      DEFAULT_THEME.diffAdded ?? null,
+    );
+  });
+
   test("renderAssistantMessage for a long single-token shell command uses wrapped preview height when verbose is off", () => {
     // Arrange
     const command = `printf ${"x".repeat(220)}TAIL`;

package/src/ui/conversation.ts

@@ -34,6 +34,9 @@ const UI_TOOL_PREVIEW_ROWS = 8;
 /** Default width used when preview measurements do not receive one explicitly. */
 const DEFAULT_TOOL_PREVIEW_WIDTH = 80;
 
+/** Horizontal columns consumed by assistant-markdown padding. */
+const MARKDOWN_BLOCK_CHROME_WIDTH = 2;
+
 /** Horizontal columns consumed by tool-block padding and the left border. */
 const TOOL_BLOCK_CHROME_WIDTH = 4;
 
@@ -226,7 +229,11 @@ function renderUserMessage(msg: UserMessage, theme: Theme): Node {
 }
 
 /** Render a syntax-highlighted raw markdown block. */
-function renderMarkdownTextBlock(content: string, theme: Theme): Node | null {
+function renderMarkdownTextBlock(
+  content: string,
+  theme: Theme,
+  previewWidth?: number,
+): Node | null {
   if (content === "") {
     return null;
   }
@@ -238,6 +245,7 @@ function renderMarkdownTextBlock(content: string, theme: Theme): Node | null {
       themeVariant: "markdown",
     },
     theme,
+    getMarkdownBodyWidth(previewWidth),
   );
   if (children.length === 0) {
     return null;
@@ -313,7 +321,7 @@ function renderAssistantContentBlock(
   opts: ConversationRenderOpts,
 ): Node | null {
   if (block.type === "text" && block.text) {
-    return renderMarkdownTextBlock(block.text, opts.theme);
+    return renderMarkdownTextBlock(block.text, opts.theme, opts.previewWidth);
   }
   if (block.type === "thinking" && block.thinking) {
     return renderThinkingBlock(block.thinking, opts);
@@ -366,10 +374,21 @@ function getPreviewWidth(previewWidth?: number): number {
   return Math.max(1, Math.floor(previewWidth!));
 }
 
+function getMarkdownBodyWidth(previewWidth?: number): number {
+  return Math.max(
+    1,
+    getPreviewWidth(previewWidth) - MARKDOWN_BLOCK_CHROME_WIDTH,
+  );
+}
+
 function getToolBodyWidth(previewWidth?: number): number {
   return Math.max(1, getPreviewWidth(previewWidth) - TOOL_BLOCK_CHROME_WIDTH);
 }
 
+function getHighlightWrapChunkSize(bodyWidth: number): number {
+  return Math.max(1, Math.min(HIGHLIGHT_WRAP_MAX_CHUNK_GRAPHEMES, bodyWidth));
+}
+
 /** Split multi-line tool text into logical render lines. */
 function splitToolTextLines(
   text: string,
@@ -426,6 +445,7 @@ type SyntaxThemeTokenColor = NonNullable<
 const graphemeSegmenter = new Intl.Segmenter(undefined, {
   granularity: "grapheme",
 });
+const HIGHLIGHT_WRAP_MAX_CHUNK_GRAPHEMES = 32;
 const syntaxThemeCache: Record<
   SyntaxThemeVariant,
   WeakMap<Theme, SyntaxThemeRegistration>
@@ -559,6 +579,7 @@ function getSyntaxTheme(
 
 function splitHighlightedTextNode(
   node: Extract<Node, { type: "text" }>,
+  chunkSize: number,
 ): Node[] {
   if (node.content === "") {
     return [Text("", node.props)];
@@ -576,21 +597,37 @@ function splitHighlightedTextNode(
       continue;
     }
 
+    let chunk = "";
+    let chunkGraphemes = 0;
     for (const { segment } of graphemeSegmenter.segment(part)) {
-      children.push(Text(segment, node.props));
+      chunk += segment;
+      chunkGraphemes += 1;
+
+      if (chunkGraphemes === chunkSize) {
+        children.push(Text(chunk, node.props));
+        chunk = "";
+        chunkGraphemes = 0;
+      }
+    }
+
+    if (chunk !== "") {
+      children.push(Text(chunk, node.props));
     }
   }
 
   return children;
 }
 
-function normalizeHighlightedLine(line: Node): Node {
+function normalizeHighlightedLine(line: Node, bodyWidth: number): Node {
   if (line.type !== "hstack") {
     return line;
   }
 
+  const chunkSize = getHighlightWrapChunkSize(bodyWidth);
   const children = line.children.flatMap((child) => {
-    return child.type === "text" ? splitHighlightedTextNode(child) : [child];
+    return child.type === "text"
+      ? splitHighlightedTextNode(child, chunkSize)
+      : [child];
   });
   return HStack(line.props, children);
 }
@@ -598,6 +635,7 @@ function normalizeHighlightedLine(line: Node): Node {
 function getHighlightedBodyLines(
   spec: HighlightedBodySpec,
   theme: Theme,
+  bodyWidth: number,
 ): Node[] {
   if (spec.text === "") {
     return [];
@@ -606,7 +644,9 @@ function getHighlightedBodyLines(
   const highlighted = SyntaxHighlight(spec.text, spec.language, {
     theme: getSyntaxTheme(theme, spec.themeVariant),
   });
-  return highlighted.children.map((line) => normalizeHighlightedLine(line));
+  return highlighted.children.map((line) =>
+    normalizeHighlightedLine(line, bodyWidth),
+  );
 }
 
 /** Render a single styled text node for a tool line. */
@@ -740,7 +780,11 @@ function renderToolBody(
 ): { body: Node | null; summary?: ToolRenderLine } {
   if (spec.highlightedBody) {
     return renderToolBodyFromNodes(
-      getHighlightedBodyLines(spec.highlightedBody, opts.theme),
+      getHighlightedBodyLines(
+        spec.highlightedBody,
+        opts.theme,
+        getToolBodyWidth(opts.previewWidth),
+      ),
       spec.previewBody,
       opts,
     );

package/src/ui/render-performance.test.ts

@@ -0,0 +1,443 @@
+import { afterEach, describe, test } from "bun:test";
+import { cel, MockTerminal } from "@cel-tui/core";
+import type { Node } from "@cel-tui/types";
+import {
+  fauxAssistantMessage,
+  fauxThinking,
+  fauxToolCall,
+} from "@mariozechner/pi-ai";
+import type { AppState } from "../index.ts";
+import {
+  computeContextTokens,
+  computeStats,
+  createUiMessage,
+  openDatabase,
+} from "../session.ts";
+import { DEFAULT_SHOW_REASONING, DEFAULT_VERBOSE } from "../settings.ts";
+import { DEFAULT_THEME } from "../theme.ts";
+import {
+  buildConversationLogNodes,
+  resetConversationRenderCache,
+} from "../ui/conversation.ts";
+import {
+  createInputController,
+  renderActiveOverlay,
+  renderBaseLayout,
+  resetUiState,
+} from "../ui.ts";
+
+const VIEWPORT_COLS = 120;
+const VIEWPORT_ROWS = 40;
+const TYPING_SAMPLE_COUNT = 9;
+const LARGE_MARKDOWN_SECTION_COUNT = 8;
+const NODE_BUDGET = 6_000;
+const TYPING_MEDIAN_BUDGET_MS = 40;
+
+function flushCelRender(): Promise<void> {
+  return new Promise((resolve) => {
+    process.nextTick(resolve);
+  });
+}
+
+function startUiViewport(
+  state: AppState,
+  terminal: MockTerminal,
+  controller: ReturnType<typeof createInputController>,
+): void {
+  cel.init(terminal);
+  cel.viewport(() => {
+    const base = renderBaseLayout(state, terminal.columns, controller);
+    const overlay = renderActiveOverlay(state);
+    return overlay ? [base, overlay] : base;
+  });
+}
+
+function createTestState(): AppState {
+  const cwd = "/tmp/mini-coder-ui-render-perf-test";
+  const model: NonNullable<AppState["model"]> = {
+    id: "gpt-5.4",
+    name: "gpt-5.4",
+    provider: "openai-codex",
+    api: "responses",
+    baseUrl: "http://localhost:0",
+    reasoning: true,
+    input: ["text"],
+    cost: {
+      input: 0,
+      output: 0,
+      cacheRead: 0,
+      cacheWrite: 0,
+    },
+    contextWindow: 272_000,
+    maxTokens: 8_192,
+  };
+
+  return {
+    db: openDatabase(":memory:"),
+    session: null,
+    model,
+    effort: "medium",
+    messages: [],
+    stats: { totalInput: 0, totalOutput: 0, totalCost: 0 },
+    contextTokens: 0,
+    agentsMd: [],
+    skills: [],
+    plugins: [],
+    theme: DEFAULT_THEME,
+    git: null,
+    providers: new Map(),
+    oauthCredentials: {},
+    settings: {},
+    settingsPath: `${cwd}/settings.json`,
+    cwd,
+    canonicalCwd: cwd,
+    running: false,
+    abortController: null,
+    activeTurnPromise: null,
+    showReasoning: DEFAULT_SHOW_REASONING,
+    verbose: DEFAULT_VERBOSE,
+    versionLabel: "dev",
+    customModels: [],
+    startupWarnings: [],
+  };
+}
+
+function setMessages(state: AppState, messages: AppState["messages"]): void {
+  state.messages = messages;
+  state.stats = computeStats(messages);
+  state.contextTokens = computeContextTokens(messages);
+}
+
+function buildLargeMarkdown(seed: number): string {
+  return Array.from({ length: LARGE_MARKDOWN_SECTION_COUNT }, (_, index) => {
+    const section = seed * 100 + index;
+    return [
+      `# Section ${section}`,
+      "",
+      `Paragraph ${section}: ${"lorem ipsum dolor sit amet ".repeat(10)}`,
+      "",
+      `- item ${section}a with [link](https://example.com/${section})`,
+      `- item ${section}b with **bold** text and \`inline_code_${section}\``,
+      "",
+      `> Quote ${section}: ${"wrapped quoted text ".repeat(10)}`,
+      "",
+      "```ts",
+      `const value${section} = ${section};`,
+      `console.log(value${section});`,
+      "```",
+    ].join("\n");
+  }).join("\n\n");
+}
+
+function createLargeMarkdownMessages(): AppState["messages"] {
+  return [
+    {
+      role: "user",
+      content: "Investigate the rendering lag in this session.",
+      timestamp: 1,
+    },
+    fauxAssistantMessage(buildLargeMarkdown(1), { timestamp: 2 }),
+    {
+      role: "user",
+      content: "Keep going with the detailed write-up.",
+      timestamp: 3,
+    },
+    fauxAssistantMessage(buildLargeMarkdown(2), { timestamp: 4 }),
+    {
+      role: "user",
+      content: "Add one more large markdown response for history.",
+      timestamp: 5,
+    },
+    fauxAssistantMessage(buildLargeMarkdown(3), { timestamp: 6 }),
+  ];
+}
+
+function countNodes(node: Node): number {
+  if (node.type === "text" || node.type === "textinput") {
+    return 1;
+  }
+
+  return (
+    1 + node.children.reduce((total, child) => total + countNodes(child), 0)
+  );
+}
+
+function getConversationNode(
+  messages: AppState["messages"],
+  index: number,
+): Node {
+  resetConversationRenderCache();
+
+  const nodes = buildConversationLogNodes(
+    {
+      messages,
+      showReasoning: true,
+      verbose: false,
+      theme: DEFAULT_THEME,
+      versionLabel: "dev",
+    },
+    {
+      isStreaming: false,
+      content: [],
+      pendingToolResults: [],
+    },
+    0,
+    80,
+  );
+  const node = nodes[index];
+
+  if (!node) {
+    throw new Error(`Expected a rendered node at index ${index}`);
+  }
+
+  return node;
+}
+
+function expectNodeCountAtMost(
+  label: string,
+  node: Node,
+  maxNodes: number,
+): void {
+  const nodeCount = countNodes(node);
+
+  if (nodeCount > maxNodes) {
+    throw new Error(
+      `Expected ${label} node count <= ${maxNodes}, got ${nodeCount}`,
+    );
+  }
+}
+
+function median(values: readonly number[]): number {
+  const sorted = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+
+  if (sorted.length % 2 === 0) {
+    return (sorted[middle - 1]! + sorted[middle]!) / 2;
+  }
+
+  return sorted[middle]!;
+}
+
+async function measureTypingMedianRerenderMs(state: AppState): Promise<number> {
+  const terminal = new MockTerminal(VIEWPORT_COLS, VIEWPORT_ROWS);
+  const controller = createInputController(state);
+  const samples: number[] = [];
+
+  startUiViewport(state, terminal, controller);
+  await flushCelRender();
+
+  try {
+    for (let index = 0; index < TYPING_SAMPLE_COUNT; index++) {
+      const nextValue = index % 2 === 0 ? "a" : "ab";
+      const start = performance.now();
+      controller.onChange(nextValue);
+      await flushCelRender();
+      samples.push(performance.now() - start);
+    }
+  } finally {
+    cel.stop();
+  }
+
+  return median(samples);
+}
+
+afterEach(() => {
+  resetUiState();
+  cel.stop();
+});
+
+describe("ui render performance", () => {
+  test("renderBaseLayout with large historical assistant markdown stays within the node budget", () => {
+    // Arrange
+    const state = createTestState();
+    setMessages(state, createLargeMarkdownMessages());
+    const controller = createInputController(state);
+
+    try {
+      // Act
+      const base = renderBaseLayout(state, VIEWPORT_COLS, controller);
+      const nodeCount = countNodes(base);
+
+      // Assert
+      if (nodeCount > NODE_BUDGET) {
+        throw new Error(
+          `Expected large-markdown layout node count <= ${NODE_BUDGET}, got ${nodeCount}`,
+        );
+      }
+    } finally {
+      state.db.close();
+    }
+  });
+
+  test("non-markdown conversation log items stay within bounded node budgets", () => {
+    // Arrange
+    const userNode = getConversationNode(
+      [
+        {
+          role: "user",
+          content: "lorem ipsum dolor sit amet ".repeat(400),
+          timestamp: 1,
+        },
+      ],
+      0,
+    );
+    const uiNode = getConversationNode(
+      [createUiMessage("status update ".repeat(400))],
+      0,
+    );
+    const thinkingNode = getConversationNode(
+      [fauxAssistantMessage([fauxThinking("plan\n".repeat(400))])],
+      0,
+    );
+    const assistantToolCallsNode = getConversationNode(
+      [
+        fauxAssistantMessage([
+          fauxThinking("brief plan"),
+          fauxToolCall(
+            "shell",
+            { command: "printf 'foo\\nbar'" },
+            { id: "tool-1" },
+          ),
+          fauxToolCall(
+            "edit",
+            {
+              path: "src/app.ts",
+              oldText: "before",
+              newText: "after",
+            },
+            { id: "tool-2" },
+          ),
+          fauxToolCall("readImage", { path: "diagram.png" }, { id: "tool-3" }),
+        ]),
+      ],
+      0,
+    );
+    const longShellToolCallNode = getConversationNode(
+      [
+        fauxAssistantMessage([
+          fauxToolCall(
+            "shell",
+            { command: `printf ${"x".repeat(300)}TAIL` },
+            { id: "tool-4" },
+          ),
+        ]),
+      ],
+      0,
+    );
+    const shellResultNode = getConversationNode(
+      [
+        fauxAssistantMessage([
+          fauxToolCall("shell", { command: "seq 1 200" }, { id: "tool-1" }),
+        ]),
+        {
+          role: "toolResult",
+          toolCallId: "tool-1",
+          toolName: "shell",
+          content: [
+            {
+              type: "text",
+              text: Array.from(
+                { length: 200 },
+                (_, index) => `line ${index + 1}`,
+              ).join("\n"),
+            },
+          ],
+          isError: false,
+          timestamp: 2,
+        },
+      ],
+      1,
+    );
+    const editErrorNode = getConversationNode(
+      [
+        fauxAssistantMessage([
+          fauxToolCall(
+            "edit",
+            {
+              path: "src/app.ts",
+              oldText: "before",
+              newText: "after",
+            },
+            { id: "tool-2" },
+          ),
+        ]),
+        {
+          role: "toolResult",
+          toolCallId: "tool-2",
+          toolName: "edit",
+          content: [
+            {
+              type: "text",
+              text: Array.from(
+                { length: 120 },
+                (_, index) => `line ${index + 1}`,
+              ).join("\n"),
+            },
+          ],
+          isError: true,
+          timestamp: 3,
+        },
+      ],
+      1,
+    );
+    const genericResultNode = getConversationNode(
+      [
+        {
+          role: "toolResult",
+          toolCallId: "tool-3",
+          toolName: "pluginSearch",
+          content: [
+            {
+              type: "text",
+              text: Array.from(
+                { length: 200 },
+                (_, index) => `row ${index + 1}`,
+              ).join("\n"),
+            },
+          ],
+          isError: false,
+          timestamp: 4,
+        },
+      ],
+      0,
+    );
+
+    // Assert
+    expectNodeCountAtMost("long user message", userNode, 4);
+    expectNodeCountAtMost("long UI message", uiNode, 4);
+    expectNodeCountAtMost("thinking-only assistant message", thinkingNode, 4);
+    expectNodeCountAtMost(
+      "assistant tool-call bundle",
+      assistantToolCallsNode,
+      64,
+    );
+    expectNodeCountAtMost(
+      "long single-token shell tool call",
+      longShellToolCallNode,
+      64,
+    );
+    expectNodeCountAtMost("shell tool-result preview", shellResultNode, 24);
+    expectNodeCountAtMost("edit error preview", editErrorNode, 24);
+    expectNodeCountAtMost("generic tool result", genericResultNode, 240);
+  });
+
+  test("typing into the input with large historical assistant markdown stays within the rerender budget", async () => {
+    // Arrange
+    const state = createTestState();
+    setMessages(state, createLargeMarkdownMessages());
+
+    try {
+      // Act
+      const medianRerenderMs = await measureTypingMedianRerenderMs(state);
+
+      // Assert
+      if (medianRerenderMs > TYPING_MEDIAN_BUDGET_MS) {
+        throw new Error(
+          `Expected typing median rerender <= ${TYPING_MEDIAN_BUDGET_MS}ms, got ${medianRerenderMs.toFixed(1)}ms`,
+        );
+      }
+    } finally {
+      state.db.close();
+    }
+  });
+});

package/src/ui/status.test.ts

@@ -4,7 +4,11 @@ import {
   registerFauxProvider,
 } from "@mariozechner/pi-ai";
 import type { AppState } from "../index.ts";
-import { createUiMessage, openDatabase } from "../session.ts";
+import {
+  computeContextTokens,
+  createUiMessage,
+  openDatabase,
+} from "../session.ts";
 import { DEFAULT_SHOW_REASONING, DEFAULT_VERBOSE } from "../settings.ts";
 import { DEFAULT_THEME } from "../theme.ts";
 import { renderStatusBar } from "./status.ts";
@@ -87,6 +91,7 @@ function createTestState(): AppState {
     effort: "medium",
     messages: [],
     stats: { totalInput: 0, totalOutput: 0, totalCost: 0 },
+    contextTokens: 0,
     agentsMd: [],
     skills: [],
     plugins: [],
@@ -109,6 +114,11 @@ function createTestState(): AppState {
   };
 }
 
+function setMessages(state: AppState, messages: AppState["messages"]): void {
+  state.messages = messages;
+  state.contextTokens = computeContextTokens(messages);
+}
+
 function makeAssistantWithUsage(
   text: string,
   usage: Partial<ReturnType<typeof fauxAssistantMessage>["usage"]>,
@@ -217,11 +227,11 @@ describe("ui/status", () => {
       ] as const;
 
       for (const testCase of cases) {
-        state.messages = [
+        setMessages(state, [
           makeAssistantWithUsage("context anchor", {
             totalTokens: testCase.totalTokens,
           }),
-        ];
+        ]);
         expect(getUsagePill(state)).toMatchObject({
           text: `in:0 out:0 · ${testCase.totalTokens.toFixed(1)}%/100 · $0.00`,
           bgColor: testCase.bgColor,
@@ -234,6 +244,24 @@ describe("ui/status", () => {
     }
   });
 
+  test("renderStatusBar uses cached contextTokens instead of rescanning messages", () => {
+    const faux = registerFauxProvider();
+    const state = createTestState();
+    state.model = {
+      ...faux.getModel(),
+      contextWindow: 100,
+    };
+    state.messages = [{ role: "user", content: "x".repeat(400), timestamp: 1 }];
+    state.contextTokens = 25;
+
+    try {
+      expect(getUsageSummary(state)).toBe("in:0 out:0 · 25.0%/100 · $0.00");
+    } finally {
+      faux.unregister();
+      state.db.close();
+    }
+  });
+
   test("renderStatusBar colors the model and usage pills independently", () => {
     const faux = registerFauxProvider();
     const state = createTestState();
@@ -244,9 +272,9 @@ describe("ui/status", () => {
 
     try {
       state.effort = "xhigh";
-      state.messages = [
+      setMessages(state, [
         makeAssistantWithUsage("cold context", { totalTokens: 10 }),
-      ];
+      ]);
       expect(getModelPill(state)).toMatchObject({
         bgColor: "color09",
         fgColor: "color00",
@@ -257,9 +285,9 @@ describe("ui/status", () => {
       });
 
       state.effort = "low";
-      state.messages = [
+      setMessages(state, [
         makeAssistantWithUsage("hot context", { totalTokens: 95 }),
-      ];
+      ]);
       expect(getModelPill(state)).toMatchObject({
         bgColor: "color02",
         fgColor: "color00",
@@ -288,26 +316,29 @@ describe("ui/status", () => {
     };
 
     try {
-      state.messages = [
+      setMessages(state, [
         { role: "user", content: "first", timestamp: 1 },
         makeAssistantWithUsage("Second.", {
           input: 200,
           output: 50,
           totalTokens: 250,
         }),
-      ];
+      ]);
       const anchoredPercent = getUsagePercent(state);
 
-      state.messages = [...state.messages, createUiMessage("x".repeat(5_000))];
+      setMessages(state, [
+        ...state.messages,
+        createUiMessage("x".repeat(5_000)),
+      ]);
       const withUiOnlyPercent = getUsagePercent(state);
 
-      state.messages = [
+      setMessages(state, [
         ...state.messages,
         { role: "user", content: "12345678", timestamp: 2 },
-      ];
+      ]);
       const withTrailingUserPercent = getUsagePercent(state);
 
-      state.messages = [
+      setMessages(state, [
         ...state.messages,
         {
           role: "toolResult",
@@ -317,7 +348,7 @@ describe("ui/status", () => {
           isError: false,
           timestamp: 3,
         },
-      ];
+      ]);
       const withToolResultPercent = getUsagePercent(state);
 
       expect(getUsageSummary(state)).toBe(
@@ -341,16 +372,19 @@ describe("ui/status", () => {
     };
 
     try {
-      state.messages = [{ role: "user", content: "12345678", timestamp: 1 }];
+      setMessages(state, [{ role: "user", content: "12345678", timestamp: 1 }]);
       const initialPercent = getUsagePercent(state);
 
-      state.messages = [createUiMessage("x".repeat(5_000)), ...state.messages];
+      setMessages(state, [
+        createUiMessage("x".repeat(5_000)),
+        ...state.messages,
+      ]);
       const withUiOnlyPercent = getUsagePercent(state);
 
-      state.messages = [
+      setMessages(state, [
         ...state.messages,
         { role: "user", content: "more visible text", timestamp: 2 },
-      ];
+      ]);
       const withSecondUserPercent = getUsagePercent(state);
 
       expect(initialPercent).toBeGreaterThan(0);
@@ -383,7 +417,7 @@ describe("ui/status", () => {
         ...faux.getModel(),
         contextWindow: 1_000,
       };
-      state.messages = [
+      setMessages(state, [
         { role: "user", content: "first", timestamp: 1 },
         makeAssistantWithUsage("valid", {
           input: 150,
@@ -392,7 +426,7 @@ describe("ui/status", () => {
         }),
         aborted,
         { role: "user", content: "1234", timestamp: 2 },
-      ];
+      ]);
       return state;
     };
 
@@ -422,7 +456,7 @@ describe("ui/status", () => {
       ...faux.getModel(),
       contextWindow: 1_000,
     };
-    fromComponents.messages = [
+    setMessages(fromComponents, [
       makeAssistantWithUsage("fallback", {
         input: 120,
         output: 30,
@@ -430,8 +464,8 @@ describe("ui/status", () => {
         cacheWrite: 25,
         totalTokens: 0,
       }),
-    ];
-    fromTotalTokens.messages = [
+    ]);
+    setMessages(fromTotalTokens, [
       makeAssistantWithUsage("fallback", {
         input: 120,
         output: 30,
@@ -439,7 +473,7 @@ describe("ui/status", () => {
         cacheWrite: 25,
         totalTokens: 200,
       }),
-    ];
+    ]);
 
     try {
       expect(getUsagePercent(fromComponents)).toBe(

package/src/ui/status.ts

@@ -2,8 +2,7 @@
  * Status-bar formatting and rendering for the terminal UI.
  *
  * Computes the cumulative usage pill, abbreviates the working directory, and
- * estimates current model-visible context usage from persisted conversation
- * history.
+ * formats the cached current-context estimate maintained on application state.
  *
  * @module
  */
@@ -12,14 +11,9 @@ import { homedir } from "node:os";
 import { Spacer } from "@cel-tui/components";
 import { HStack, Text, visibleWidth } from "@cel-tui/core";
 import type { Node } from "@cel-tui/types";
-import type { AssistantMessage, Message } from "@mariozechner/pi-ai";
 import type { AppState } from "../index.ts";
-import { filterModelMessages, getAssistantUsage } from "../session.ts";
 import type { StatusTone, Theme } from "../theme.ts";
 
-/** Conservative fixed estimate for an image block's token footprint. */
-const ESTIMATED_IMAGE_TOKENS = 1_200;
-
 /**
  * Abbreviate a path with `~` for the home directory.
  *
@@ -84,143 +78,12 @@ function formatModelInfo(state: AppState): string {
   return `${state.model.provider}/${state.model.id} · ${formatEffort(state.effort)}`;
 }
 
-/** Calculate context tokens from assistant usage, falling back when `totalTokens` is zero. */
-function calculateUsageTokens(usage: AssistantMessage["usage"]): number {
-  return (
-    usage.totalTokens ||
-    usage.input + usage.output + usage.cacheRead + usage.cacheWrite
-  );
-}
-
-/** Estimate token usage from a character count using a conservative chars/4 heuristic. */
-function estimateCharacterTokens(charCount: number): number {
-  return Math.ceil(charCount / 4);
-}
-
-type UserMultipartContent = Exclude<
-  Extract<Message, { role: "user" }>["content"],
-  string
->;
-type TextOrImageContentBlock =
-  | UserMultipartContent[number]
-  | Extract<Message, { role: "toolResult" }>["content"][number];
-
-function estimateTextOrImageContentTokens(
-  content: readonly TextOrImageContentBlock[],
-): number {
-  let chars = 0;
-  let imageTokens = 0;
-
-  for (const block of content) {
-    if (block.type === "text") {
-      chars += block.text.length;
-      continue;
-    }
-    if (block.type === "image") {
-      imageTokens += ESTIMATED_IMAGE_TOKENS;
-    }
-  }
-
-  return estimateCharacterTokens(chars) + imageTokens;
-}
-
-function estimateUserMessageTokens(
-  message: Extract<Message, { role: "user" }>,
-): number {
-  if (typeof message.content === "string") {
-    return estimateCharacterTokens(message.content.length);
-  }
-  return estimateTextOrImageContentTokens(message.content);
-}
-
-function estimateAssistantBlockCharacters(
-  block: Extract<Message, { role: "assistant" }>["content"][number],
-): number {
-  if (block.type === "text") {
-    return block.text.length;
-  }
-  if (block.type === "thinking") {
-    return block.thinking.length;
-  }
-  return block.name.length + JSON.stringify(block.arguments).length;
-}
-
-function estimateAssistantMessageTokens(
-  message: Extract<Message, { role: "assistant" }>,
-): number {
-  const chars = message.content.reduce((total, block) => {
-    return total + estimateAssistantBlockCharacters(block);
-  }, 0);
-  return estimateCharacterTokens(chars);
-}
-
-function estimateToolResultMessageTokens(
-  message: Extract<Message, { role: "toolResult" }>,
-): number {
-  return estimateTextOrImageContentTokens(message.content);
-}
-
-/** Estimate token usage for a model-visible message. */
-function estimateMessageTokens(message: Message): number {
-  switch (message.role) {
-    case "user":
-      return estimateUserMessageTokens(message);
-    case "assistant":
-      return estimateAssistantMessageTokens(message);
-    case "toolResult":
-      return estimateToolResultMessageTokens(message);
-  }
-}
-
-/** Find the latest assistant usage that can anchor context estimation. */
-function getLatestValidAssistantUsage(
-  messages: readonly Message[],
-): { index: number; tokens: number } | null {
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const message = messages[i];
-    if (
-      message?.role === "assistant" &&
-      message.stopReason !== "aborted" &&
-      message.stopReason !== "error"
-    ) {
-      const usage = getAssistantUsage(message);
-      if (!usage) {
-        continue;
-      }
-      return {
-        index: i,
-        tokens: calculateUsageTokens(usage),
-      };
-    }
-  }
-  return null;
-}
-
-/** Estimate the current model-visible context size for the next request. */
-function estimateCurrentContextTokens(state: AppState): number {
-  const messages = filterModelMessages(state.messages);
-  const latestUsage = getLatestValidAssistantUsage(messages);
-
-  if (!latestUsage) {
-    return messages.reduce((total, message) => {
-      return total + estimateMessageTokens(message);
-    }, 0);
-  }
-
-  let total = latestUsage.tokens;
-  for (let i = latestUsage.index + 1; i < messages.length; i++) {
-    total += estimateMessageTokens(messages[i]!);
-  }
-  return total;
-}
-
 /** Estimate current context usage as a percentage of the active model window. */
 function getContextPercentage(state: AppState): number {
   if (!state.model || state.model.contextWindow <= 0) {
     return 0;
   }
-  const contextTokens = estimateCurrentContextTokens(state);
-  return (contextTokens / state.model.contextWindow) * 100;
+  return (state.contextTokens / state.model.contextWindow) * 100;
 }
 
 /** Format cumulative session totals plus estimated current context usage for the status bar. */