thincoder 0.11.0 → 0.11.1

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) => {
@@ -204,17 +181,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}`)
   }
@@ -314,78 +310,6 @@ export function renderFrame(state, agent, opts) {
 // 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,181 @@
+/**
+ * render-loop.mjs — frame scheduler + incremental panel rendering
+ * Extracted from src/tui/index.mjs to keep the TUI entry point under 500 lines.
+ */
+import { computeLayout } from "./layout.mjs"
+import {
+  renderFrame, countConvLines, convCacheKey,
+  renderHeader, renderConversation, renderTodo, renderSubagent,
+  renderOutput, renderPermission, renderQueue, renderPicker,
+  renderInputBox, renderStatus,
+} 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
+ */
+export function createRenderLoop(state, agent, ctx, pushLine) {
+  const { startupDims, SLASH_COMMANDS } = ctx
+  const panelCache = new Map()
+  let lastCols = 0, lastRows = 0
+  let lastConvKey = "", lastConvCols = 0, lastConvScroll = -1
+  const convLineCache = []
+  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 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 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
+      }
+      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))
+      }
+
+      // 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
+      }
+
+      // ---- 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 (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 }
+      }
+
+      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}`
+
+      if (out.length || cursorSuffix) process.stdout.write(ansi.syncUpdateStart + out.join("") + ansi.syncUpdateEnd + cursorSuffix)
+    } catch (e) {
+      // Don't let a render error crash the TUI
+    }
+  }
+
+  return { render, scheduleRender }
+}