thincoder 0.11.0 → 0.12.0

package/src/tui/render-frame.mjs

@@ -7,13 +7,14 @@
  * The legacy renderFrame() wrapper is kept for compatibility.
  */
 import { ansi, C, ESC } from "./ansi.mjs"
-import { computeLayout, MAX_SUB_LINES } from "./layout.mjs"
-import {
-  sliceByWidth, stringWidth, wrapText, formatTables, sanitizeDisplay,
-} from "./render.mjs"
+import { convCacheKey, renderConversation, countConvLines } from "./render-conversation.mjs"
+import { sliceByWidth, stringWidth, wrapText, formatTables, sanitizeDisplay } from "./render.mjs"
 import { specForModel } from "../config.mjs"
+import { computeLayout, MAX_SUB_LINES } from "./layout.mjs"
 import { basename } from "node:path"
 
+export { convCacheKey, renderConversation, countConvLines } from "./render-conversation.mjs"
+
 // ---------- status bar slash-command hints ----------
 const SLASH_HINTS = {
   "/config": "open config menu",
@@ -44,30 +45,6 @@ export function renderHeader(agent, cols) {
   return `${ansi.bold}${C.tool} ThinCoder ${ansi.reset}${ansi.dim}│ ${sliceByWidth(model, 30)}${thinkBadge ? " " + thinkBadge : ""} │ ${sliceByWidth(basename(agent.cwd), Math.max(10, cols - 60))}${ansi.reset}`
 }
 
-/**
- * Compute a cheap cache key for the conversation panel.
- * Structural hints that change ONLY when the conversation actually changes.
- * Used by the incremental renderer to skip rebuilding convLines when nothing changed.
- */
-export function convCacheKey(state) {
-  const lastLine = state.lines.length > 0 ? state.lines[state.lines.length - 1] : null
-  return `${state.lines.length}|${lastLine?.text.length ?? 0}|${state.streaming.length}|${state.reasoning.length}|${Object.keys(state.toolStreams).length}|${state.foldEnabled !== false ? "f" : "u"}`
-}
-
-/** Conversation panel (scrollable, variable height). Returns exactly `visibleH` lines. */
-export function renderConversation(state, cols, visibleH, scroll) {
-  const convLines = buildConvLines(state, cols)
-  const maxScroll = Math.max(0, convLines.length - visibleH)
-  const clamped = Math.min(scroll, maxScroll)
-  const end = convLines.length - clamped
-  const visible = convLines.slice(Math.max(0, end - visibleH), end)
-  const pad = visibleH - visible.length
-  const out = []
-  for (let i = 0; i < pad; i++) out.push("")
-  for (const l of visible) out.push(`${l.color}${l.text}${ansi.reset}`)
-  return out
-}
-
 /** Todo/task panel. Returns empty array when no tasks visible. */
 export function renderTodo(visibleTasks, cols) {
   return visibleTasks.map((t) => {
@@ -106,24 +83,47 @@ export function renderSubagent(allSubs, W) {
   return out
 }
 
-/** Tool output panels (streaming output like tail -f). Returns empty when no active output. */
+/** Per-kind panel colors: reasoning faint, tool progress cyan, main output gray. */
+const PANEL_KIND_COLORS = { think: C.reason, tool: C.tool, text: C.dim }
+
+/**
+ * Flatten panel parts into display lines, tracking each line's kind.
+ * A part not starting mid-line continues the previous line (kind of the line's first fragment wins).
+ */
+function panelLines(p) {
+  const lines = []
+  for (const part of p.parts ?? []) {
+    part.text.split("\n").forEach((seg, j) => {
+      if (j === 0 && lines.length > 0) {
+        const last = lines[lines.length - 1]
+        // Empty trailing line = previous part ended exactly at a line break — the new
+        // part owns this line's kind. Otherwise it's a genuine mid-line continuation.
+        if (last.text === "") last.kind = part.kind
+        last.text += seg
+      } else {
+        lines.push({ kind: part.kind, text: seg })
+      }
+    })
+  }
+  return lines.filter((l) => l.text.trim())
+}
+
+/** Tool output panels (streaming output like tail -f). Returns empty when no visible output. */
 export function renderOutput(state, W, panelH) {
-  const active = Object.values(state.outputPanels).filter((p) => !p.done)
+  // Same visibility predicate as computeLayout: done panels linger until closeAt
+  const active = Object.values(state.outputPanels).filter((p) => !p.done || (p.closeAt ?? 0) > Date.now())
   if (active.length === 0) return []
   const out = []
   const linesPerPanel = Math.max(1, Math.floor(panelH / active.length))
-  for (const p of active) {
-    const textLines = (p.text ?? "").split("\n").filter((l) => l.trim())
-    const tail = textLines.slice(-linesPerPanel)
-    for (const line of tail) {
-      out.push(`${C.dim}  │ ${sliceByWidth(sanitizeDisplay(line), W - 5)}${ansi.reset}`)
+  const perPanel = active.map((p) => panelLines(p).slice(-linesPerPanel))
+  for (const lines of perPanel) {
+    for (const l of lines) {
+      const color = PANEL_KIND_COLORS[l.kind] ?? C.dim
+      out.push(`${color}  │ ${sliceByWidth(sanitizeDisplay(l.text), W - 5)}${ansi.reset}`)
     }
   }
   // Fill remaining rows to match panelH exactly
-  const used = active.reduce((s, p) => {
-    const tl = (p.text ?? "").split("\n").filter((l) => l.trim()).slice(-linesPerPanel)
-    return s + tl.length
-  }, 0)
+  const used = perPanel.reduce((s, lines) => s + lines.length, 0)
   for (let i = used; i < panelH; i++) out.push("")
   return out
 }
@@ -204,17 +204,36 @@ export function renderInputBox(state, W, boxLines, cols, inputLayout, inputOffse
 
   for (let li = 0; li < boxLines.length; li++) {
     const l = boxLines[li]
-    let content = sliceByWidth(l, W - 4)
-    const fill = " ".repeat(Math.max(0, W - 4 - stringWidth(content)))
+    const original = sliceByWidth(l, W - 4)
+    let content = original
+    const contentWidth = stringWidth(original)
+    let fillLen = W - 4 - contentWidth
 
     if (li === curLine && curCol >= 0) {
-      const beforeWidth = Math.min(curCol, stringWidth(content))
+      const beforeWidth = Math.min(curCol, contentWidth)
       const before = sliceByWidth(content, beforeWidth)
       const atIdx = before.length   // character index (not display width — CJK chars diverge)
       const at = content[atIdx] ?? " "
       const after = content.slice(atIdx + 1)
       content = before + `${ansi.reset}\x1b[7m${at}\x1b[27m${ansi.reset}` + after
+      // Cursor at end of input: at=[\x20] adds one display column — compensate fill.
+      // When fill is already 0 (content fills the line), don't add the extra space at all
+      // — instead, move the cursor to the last real character.
+      if (atIdx >= original.length) {
+        if (fillLen > 0) {
+          fillLen = Math.max(0, fillLen - 1)
+        } else {
+          // No room for extra space: place cursor on last character instead
+          const lastIdx = original.length - 1
+          if (lastIdx >= 0) {
+            const before2 = sliceByWidth(original, stringWidth(original.slice(0, lastIdx)))
+            const at2 = original[lastIdx] ?? " "
+            content = before2 + `${ansi.reset}\x1b[7m${at2}\x1b[27m${ansi.reset}`
+          }
+        }
+      }
     }
+    const fill = " ".repeat(Math.max(0, fillLen))
 
     out.push(`${borderColor}│${ansi.reset} ${content}${fill} ${borderColor}│${ansi.reset}`)
   }
@@ -234,158 +253,65 @@ export function renderStatus(state, agent, cols, slashCommands) {
 }
 
 // ====================================================================
-// Legacy: full-frame renderer (wraps individual panel functions)
+// Frame composition
 // ====================================================================
 
 /**
- * Render one frame, returns { frame, cursorRow, cursorCol }.
- * Pure function: does not modify state/agent.
- * @deprecated Prefer individual panel functions for incremental rendering.
+ * Compose the whole screen as a rows array, placing each panel at its
+ * layout-computed y coordinate. Single source of truth for what the screen
+ * should look like — the render loop diffs these rows against what it last
+ * wrote and repaints only changed rows (absolute positioning).
+ *
+ * @returns {{ rows: string[], cursorRow: number, cursorCol: number, layout: object }}
  */
-export function renderFrame(state, agent, opts) {
+export function renderRows(state, agent, opts) {
   const cols = opts.cols || 80
   const rows = opts.rows || 24
   const slashCommands = opts.slashCommands ?? []
-  const platform = opts.platform ?? process.platform
 
   const layout = computeLayout(state, { cols, rows })
   const { W, panels, inputLayout, inputOffset, boxLines, visibleTasks, allSubs, permPreviewLines, overlay } = layout
 
-  const out = [ansi.home]
-  let cursorRow = 0, cursorCol = 0
-
-  // header
-  out.push(`${renderHeader(agent, cols)}\x1b[K`)
-
-  // conversation
-  for (const l of renderConversation(state, cols, panels.conversation.h, state.scroll)) {
-    out.push(`${l}\x1b[K`)
-  }
-
-  // picker
-  if (panels.picker) {
-    for (const l of renderPicker(state, cols, panels.picker, overlay)) {
-      out.push(`${l}\x1b[K`)
+  const screen = new Array(rows).fill("")
+  const put = (y, lines) => {
+    for (let i = 0; i < lines.length && y + i < rows; i++) {
+      if (y + i >= 0) screen[y + i] = `${lines[i]}\x1b[K`
     }
   }
 
-  // todo
-  for (const l of renderTodo(visibleTasks, cols)) out.push(`${l}\x1b[K`)
-
-  // subagent
-  if (panels.subagent) {
-    for (const l of renderSubagent(allSubs, W)) out.push(`${l}\x1b[K`)
-  }
-
-  // output panels
-  if (panels.output) {
-    for (const l of renderOutput(state, W, panels.output.h)) out.push(`${l}\x1b[K`)
-  }
-
-  // permission preview
-  if (panels.permission) {
-    for (const l of renderPermission(permPreviewLines)) out.push(`${l}\x1b[K`)
-  }
+  put(panels.header.y, [renderHeader(agent, cols)])
+  put(panels.conversation.y, renderConversation(state, cols, panels.conversation.h, state.scroll))
+  if (panels.subagent) put(panels.subagent.y, renderSubagent(allSubs, W))
+  if (panels.output) put(panels.output.y, renderOutput(state, W, panels.output.h))
+  if (panels.todo) put(panels.todo.y, renderTodo(visibleTasks, cols))
+  if (panels.picker) put(panels.picker.y, renderPicker(state, cols, panels.picker, overlay))
+  if (panels.permission) put(panels.permission.y, renderPermission(permPreviewLines))
+  if (panels.queue) put(panels.queue.y, [renderQueue(state, W)])
+  put(panels.inputBox.y, renderInputBox(state, W, boxLines, cols, inputLayout, inputOffset))
+  put(panels.status.y, [renderStatus(state, agent, cols, slashCommands)])
 
-  // queue preview
-  if (panels.queue) {
-    const qLine = renderQueue(state, W)
-    if (qLine) out.push(`${qLine}\x1b[K`)
-  }
-
-  // input box
-  for (const l of renderInputBox(state, W, boxLines, cols, inputLayout, inputOffset)) out.push(`${l}\x1b[K`)
-
-  // status bar
-  out.push(`${renderStatus(state, agent, cols, slashCommands)}\x1b[K`)
-
-  const frame = out.join("\r\n")
-
-  // cursor position
+  let cursorRow = 0, cursorCol = 0
   if (!state.permission && !state.question && !state.picker && state.wizard?.step !== "provider") {
     cursorRow = panels.inputBox.y + 1 + (inputLayout.cursorLine - inputOffset) + 1
     cursorCol = 3 + inputLayout.cursorCol
   }
 
-  return { frame, cursorRow, cursorCol }
+  return { rows: screen, cursorRow, cursorCol, layout }
+}
+
+/**
+ * Render one frame, returns { frame, cursorRow, cursorCol }.
+ * @deprecated Use renderRows + row-diff (render-loop). Kept for tests/legacy callers.
+ */
+export function renderFrame(state, agent, opts) {
+  const { rows, cursorRow, cursorCol } = renderRows(state, agent, opts)
+  return { frame: rows.join("\r\n"), cursorRow, cursorCol }
 }
 
 // ====================================================================
 // Internal helpers (unchanged from original)
 // ====================================================================
 
-export function countConvLines(state, cols) {
-  return buildConvLines(state, cols).length
-}
-
-let _convCache = { key: "", cols: 0, lines: [] }
-function buildConvLines(state, cols) {
-  const lastLine = state.lines.length > 0 ? state.lines[state.lines.length - 1] : null
-  const key = convCacheKey(state)
-  if (_convCache.key === key && _convCache.cols === cols) return _convCache.lines
-
-  const convLines = []
-  for (const l of state.lines) {
-    for (const line of formatTables(sanitizeDisplay(l.text), cols - 1)) {
-      for (const wrapped of wrapText(line, cols - 1)) {
-        convLines.push({ text: wrapped, color: l.color, _foldId: l._foldId })
-      }
-    }
-  }
-  // Messages after the conversation (streaming / thinking / tool output):
-  // appended after history lines so they appear at the bottom.
-  if (state.reasoning) {
-    for (const wrapped of wrapText(sanitizeDisplay(state.reasoning), cols - 1)) {
-      convLines.push({ text: wrapped, color: C.reason })
-    }
-  }
-  if (state.streaming) {
-    for (const line of formatTables(sanitizeDisplay(state.streaming), cols - 1)) {
-      for (const wrapped of wrapText(line, cols - 1)) {
-        convLines.push({ text: wrapped, color: C.text })
-      }
-    }
-  }
-  const allStreams = Object.values(state.toolStreams).join("")
-  if (allStreams) {
-    const tail = sanitizeDisplay(allStreams.slice(-4000))
-    for (const wrapped of wrapText(tail, cols - 1)) {
-      convLines.push({ text: wrapped, color: C.dim })
-    }
-  }
-
-  // ---- Fold long blocks (> 8 consecutive dim lines) ----
-  const FOLD_LINES = 8
-  let foldCounter = 0
-  const folded = []
-  let i = 0
-  while (i < convLines.length) {
-    const line = convLines[i]
-    // Only fold dim-colored lines (tool results, subagent previews)
-    if (line.color === C.dim) {
-      let j = i
-      while (j < convLines.length && convLines[j].color === C.dim) j++
-      const blockLen = j - i
-      if (blockLen > FOLD_LINES) {
-        const foldKey = `fold-${foldCounter++}`
-        if (state.foldEnabled !== false && !state.expandedBlocks?.has(foldKey)) {
-          // Show first 2 lines + fold hint
-          folded.push(convLines[i])
-          if (blockLen > 2) folded.push(convLines[i + 1])
-          folded.push({ text: `  … ${blockLen - 2} more lines — Enter to expand`, color: C.fold, _foldToggle: foldKey })
-          i = j
-          continue
-        }
-      }
-    }
-    folded.push(line)
-    i++
-  }
-
-  _convCache = { key, cols, lines: folded }
-  return folded
-}
-
 function inputBoxStyle(state) {
   let borderColor = C.tool
   let title

package/src/tui/render-loop.mjs

@@ -0,0 +1,110 @@
+/**
+ * render-loop.mjs — frame scheduler + row-diff rendering
+ *
+ * Single render path: every frame recomputes the whole screen via renderRows
+ * (pure function of state), diffs against the previously written rows, and
+ * repaints only changed rows with absolute cursor positioning.
+ *
+ * This replaces the old dual-path design (full redraw vs per-panel incremental
+ * caches) which required fragile manual cache invalidation — the source of
+ * repeated "panel renders blank / frozen" bugs. Row content IS the cache key:
+ * if a row should look different, it is rewritten; otherwise untouched.
+ *
+ * Conversation wrapping stays memoized inside render-conversation (convCacheKey),
+ * so recomputing the frame each paint is cheap.
+ */
+import { countConvLines, renderRows } from "./render-frame.mjs"
+import { estimateTokens } from "../context.mjs"
+import { ansi, C } from "./ansi.mjs"
+
+const MIN_RENDER_INTERVAL_MS = 16
+
+/**
+ * Create the render loop closure. Returns { render, scheduleRender }.
+ *
+ * @param {object} state  — TUI state
+ * @param {object} agent  — agent instance
+ * @param {object} ctx    — mutable context: { startupDims, SLASH_COMMANDS, showUpdateNotice }
+ * @param {Function} pushLine — for error logging
+ * @param {Function} [write] — frame output (default process.stdout.write); injectable for tests
+ */
+export function createRenderLoop(state, agent, ctx, pushLine, write = (s) => process.stdout.write(s)) {
+  const { startupDims, SLASH_COMMANDS } = ctx
+  let prevRows = []
+  let lastCols = 0, lastRows = 0
+  let renderRequested = false, renderTimer = null, lastRenderAt = 0
+
+  function scheduleRender() {
+    if (renderTimer) return
+    const elapsed = performance.now() - lastRenderAt
+    const delay = Math.max(0, MIN_RENDER_INTERVAL_MS - elapsed)
+    renderTimer = setTimeout(() => {
+      renderTimer = null
+      if (!renderRequested) return
+      renderRequested = false
+      lastRenderAt = performance.now()
+      doRender()
+      if (renderRequested) scheduleRender()
+    }, delay)
+  }
+
+  function render() {
+    if (renderRequested) return
+    renderRequested = true
+    process.nextTick(() => scheduleRender())
+  }
+
+  function doRender() {
+    try {
+      const dims = { cols: process.stdout.columns || startupDims.cols, rows: process.stdout.rows || startupDims.rows }
+
+      // Expired output panels: prune once their close grace elapsed (done + closeAt in the past)
+      const now = Date.now()
+      for (const [name, p] of Object.entries(state.outputPanels)) {
+        if (p.done && (p.closeAt ?? 0) <= now) delete state.outputPanels[name]
+      }
+
+      const { rows, cursorRow, cursorCol, layout } = renderRows(state, agent,
+        { cols: dims.cols, rows: dims.rows, slashCommands: SLASH_COMMANDS })
+
+      // Clamp scroll (bookkeeping for the status-bar hint; renderConversation clamps internally too)
+      state.scroll = Math.min(state.scroll, Math.max(0, countConvLines(state, dims.cols) - layout.panels.conversation.h))
+
+      if (state.ctxCache.len !== agent.history.length) {
+        state.ctxCache = { len: agent.history.length, tokens: estimateTokens(agent.history) }
+      }
+
+      // Deferred upgrade notice — pop when no overlay is active
+      if (ctx.pendingNoticeReady(state)) {
+        const notice = state.pendingNotice
+        state.pendingNotice = null
+        ctx.showUpdateNotice(notice).catch((e) => pushLine(`[error] ${e.message}`, C.error))
+      }
+
+      // Full repaint on terminal resize (row model no longer matches the physical screen)
+      const fullRepaint = dims.cols !== lastCols || dims.rows !== lastRows || rows.length !== prevRows.length
+      lastCols = dims.cols; lastRows = dims.rows
+
+      const out = []
+      if (fullRepaint) {
+        // No trailing newline after the last row — it sits on the terminal's bottom
+        // row and a trailing \r\n would scroll the whole screen up by one line.
+        out.push(ansi.home, rows.join("\r\n"), ansi.clearToEnd)
+      } else {
+        for (let i = 0; i < rows.length; i++) {
+          if (rows[i] !== prevRows[i]) out.push(`\x1b[${i + 1};1H${rows[i]}`)
+        }
+      }
+      prevRows = rows
+
+      const hasOverlay = state.permission || state.question || state.picker || state.wizard?.step === "provider"
+      const cursorSuffix = hasOverlay ? "" : `\x1b[${cursorRow};${cursorCol}H${ansi.hideCursor}`
+
+      if (out.length || cursorSuffix) write(ansi.syncUpdateStart + out.join("") + ansi.syncUpdateEnd + cursorSuffix)
+    } catch (e) {
+      // Don't let a render error crash the TUI
+    }
+  }
+
+  return { render, scheduleRender }
+}