thincoder 0.11.1 → 0.12.0

package/src/tui/render-loop.mjs

@@ -1,14 +1,19 @@
 /**
- * render-loop.mjs — frame scheduler + incremental panel rendering
- * Extracted from src/tui/index.mjs to keep the TUI entry point under 500 lines.
+ * 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 { computeLayout } from "./layout.mjs"
-import {
-  renderFrame, countConvLines, convCacheKey,
-  renderHeader, renderConversation, renderTodo, renderSubagent,
-  renderOutput, renderPermission, renderQueue, renderPicker,
-  renderInputBox, renderStatus,
-} from "./render-frame.mjs"
+import { countConvLines, renderRows } from "./render-frame.mjs"
 import { estimateTokens } from "../context.mjs"
 import { ansi, C } from "./ansi.mjs"
 
@@ -16,18 +21,17 @@ 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) {
+export function createRenderLoop(state, agent, ctx, pushLine, write = (s) => process.stdout.write(s)) {
   const { startupDims, SLASH_COMMANDS } = ctx
-  const panelCache = new Map()
+  let prevRows = []
   let lastCols = 0, lastRows = 0
-  let lastConvKey = "", lastConvCols = 0, lastConvScroll = -1
-  const convLineCache = []
   let renderRequested = false, renderTimer = null, lastRenderAt = 0
 
   function scheduleRender() {
@@ -50,46 +54,22 @@ export function createRenderLoop(state, agent, ctx, pushLine) {
     process.nextTick(() => scheduleRender())
   }
 
-  function buildPanel(name, panelLayout, lines, cacheKey) {
-    if (!panelLayout) {
-      if (panelCache.has(name)) panelCache.delete(name)
-      return null
-    }
-    const content = lines.join("\r\n")
-    const cached = panelCache.get(name)
-    const effectiveKey = cacheKey ?? content
-    if (cached && cached.y === panelLayout.y && cached.h === panelLayout.h && cached.key === effectiveKey) return null
-    const rows = []
-    for (let i = 0; i < panelLayout.h; i++) {
-      rows.push(`\x1b[${panelLayout.y + 1 + i};1H${lines[i] ?? ""}\x1b[K`)
-    }
-    panelCache.set(name, { y: panelLayout.y, h: panelLayout.h, key: effectiveKey })
-    return rows.join("")
-  }
-
-  function layoutStructureChanged(layout) {
-    for (const [name, cached] of panelCache) {
-      const p = layout.panels[name] ?? null
-      if (p == null) return true
-      if (p.y !== cached.y || p.h !== cached.h) return true
-    }
-    return false
-  }
-
   function doRender() {
     try {
-      const startupCols = startupDims.cols, startupRows = startupDims.rows
-      const dims = { cols: process.stdout.columns || startupCols, rows: process.stdout.rows || startupRows }
-      const layout = computeLayout(state, dims)
-      const { W, panels, inputLayout, inputOffset, boxLines, visibleTasks, allSubs, permPreviewLines, overlay } = layout
+      const dims = { cols: process.stdout.columns || startupDims.cols, rows: process.stdout.rows || startupDims.rows }
 
-      const convLines = countConvLines(state, dims.cols)
-      state.scroll = Math.min(state.scroll, Math.max(0, convLines - panels.conversation.h))
-      if (overlay && panels.picker) {
-        const winH = panels.picker.h - 1
-        if (overlay.selectedLine < overlay.scroll) overlay.scroll = overlay.selectedLine
-        if (overlay.selectedLine >= overlay.scroll + winH) overlay.scroll = overlay.selectedLine - winH + 1
+      // 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) }
       }
@@ -101,77 +81,26 @@ export function createRenderLoop(state, agent, ctx, pushLine) {
         ctx.showUpdateNotice(notice).catch((e) => pushLine(`[error] ${e.message}`, C.error))
       }
 
-      // Terminal resize or panel layout shift → full redraw
-      if (dims.cols !== lastCols || dims.rows !== lastRows || layoutStructureChanged(layout)) {
-        lastCols = dims.cols; lastRows = dims.rows
-        for (const [name, panelLayout] of Object.entries(panels)) {
-          if (!panelLayout) { panelCache.delete(name); continue }
-          const cached = panelCache.get(name)
-          if (cached) { cached.y = panelLayout.y; cached.h = panelLayout.h }
-        }
-        const isStreaming = state.processing && !state.permission && !state.question && !state.picker
-        const isWizard = state.wizard?.step === "provider"
-        const { frame, cursorRow, cursorCol } = renderFrame(state, agent, { cols: dims.cols, rows: dims.rows, slashCommands: SLASH_COMMANDS })
-        if (isStreaming) {
-          process.stdout.write(ansi.syncUpdateStart + ansi.home + frame + ansi.clearToEnd + ansi.syncUpdateEnd + `\x1b[${cursorRow};${cursorCol}H${ansi.hideCursor}`)
-        } else if (isWizard) {
-          process.stdout.write(ansi.syncUpdateStart + ansi.home + frame + ansi.clearToEnd + ansi.syncUpdateEnd + ansi.hideCursor)
-        } else {
-          process.stdout.write(ansi.syncUpdateStart + ansi.home + frame + ansi.clearToEnd + ansi.syncUpdateEnd + `\x1b[${cursorRow};${cursorCol}H${ansi.hideCursor}`)
-        }
-        return
-      }
+      // 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
 
-      // ---- Incremental rendering (layout stable) ----
       const out = []
-      const push = (s) => { if (s != null) out.push(s) }
-
-      push(buildPanel("header", panels.header, [renderHeader(agent, dims.cols)]))
-      push(buildPanel("status", panels.status, [renderStatus(state, agent, dims.cols, SLASH_COMMANDS)]))
-      push(buildPanel("inputBox", panels.inputBox, renderInputBox(state, W, boxLines, dims.cols, inputLayout, inputOffset)))
-
-      const convKey = convCacheKey(state)
-      const convChanged = convKey !== lastConvKey || dims.cols !== lastConvCols || state.scroll !== lastConvScroll
-      if (convChanged) {
-        lastConvKey = convKey; lastConvCols = dims.cols; lastConvScroll = state.scroll
-        const lines = renderConversation(state, dims.cols, panels.conversation.h, state.scroll)
-        const y = panels.conversation.y + 1
-        for (let i = 0; i < lines.length; i++) {
-          if (lines[i] !== convLineCache[i]) {
-            out.push(`\x1b[${y + i};1H${lines[i]}\x1b[K`)
-            convLineCache[i] = lines[i]
-          }
+      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]}`)
         }
-        if (convLineCache.length > lines.length) {
-          for (let i = lines.length; i < convLineCache.length; i++) {
-            out.push(`\x1b[${y + i};1H\x1b[K`)
-          }
-        }
-        convLineCache.length = lines.length
-      }
-
-      push(buildPanel("todo", panels.todo, renderTodo(visibleTasks, dims.cols)))
-      push(buildPanel("subagent", panels.subagent, renderSubagent(allSubs, W)))
-      push(buildPanel("output", panels.output, renderOutput(state, W, panels.output?.h ?? 0),
-        // Key by append counter, not text length: panel text is capped at 4000 chars (agent-turn),
-        // so length stops changing once the cap is hit and the panel would freeze mid-stream.
-        Object.values(state.outputPanels).filter(p => !p.done).map(p => p.seq ?? 0).join(",")))
-      push(buildPanel("permission", panels.permission, renderPermission(permPreviewLines)))
-      if (panels.queue) push(buildPanel("queue", panels.queue, [renderQueue(state, W)]))
-      else panelCache.delete("queue")
-      if (panels.picker) push(buildPanel("picker", panels.picker, renderPicker(state, dims.cols, panels.picker, overlay)))
-      else panelCache.delete("picker")
-
-      for (const p of Object.values(state.outputPanels)) {
-        if (p._pendingDone) { p.done = true; delete p._pendingDone }
       }
+      prevRows = rows
 
-      const cr = panels.inputBox.y + 1 + (inputLayout.cursorLine - inputOffset) + 1
-      const cc = 3 + inputLayout.cursorCol
       const hasOverlay = state.permission || state.question || state.picker || state.wizard?.step === "provider"
-      const cursorSuffix = hasOverlay ? "" : `\x1b[${cr};${cc}H${ansi.hideCursor}`
+      const cursorSuffix = hasOverlay ? "" : `\x1b[${cursorRow};${cursorCol}H${ansi.hideCursor}`
 
-      if (out.length || cursorSuffix) process.stdout.write(ansi.syncUpdateStart + out.join("") + ansi.syncUpdateEnd + cursorSuffix)
+      if (out.length || cursorSuffix) write(ansi.syncUpdateStart + out.join("") + ansi.syncUpdateEnd + cursorSuffix)
     } catch (e) {
       // Don't let a render error crash the TUI
     }