thincoder 0.10.0 → 0.11.1

package/src/tui/render-conversation.mjs

@@ -0,0 +1,92 @@
+/**
+ * render-conversation.mjs — conversation panel line builder
+ * Extracted from render-frame.mjs.
+ */
+import { ansi, C } from "./ansi.mjs"
+import { formatTables, sanitizeDisplay, wrapText } from "./render.mjs"
+
+let _convCache = { key: "", cols: 0, lines: [] }
+
+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"}`
+}
+
+function buildConvLines(state, cols) {
+  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 })
+      }
+    }
+  }
+  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]
+    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)) {
+          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
+}
+
+export function countConvLines(state, cols) {
+  return buildConvLines(state, cols).length
+}
+
+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 p = 0; p < pad; p++) out.push("")
+  for (const l of visible) out.push(`${l.color ?? ""}${l.text}${ansi.reset}`)
+  return out
+}

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",
@@ -35,7 +36,7 @@ const SLASH_HINTS = {
 export function renderHeader(agent, cols) {
   const model = agent.provider.model
   const spec = specForModel(model)
-  const thinkOnValue = spec.thinkOnValue ?? "enabled"
+  const thinkOnValue = spec.thinkEnabledValue ?? "enabled"
   const t = agent.provider.thinking
   const effort = agent.provider.reasoningEffort
   const thinkBadge = t?.type === "disabled" ? "│ think: off"
@@ -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) => {
@@ -146,12 +123,29 @@ export function renderPicker(state, cols, panel, overlay) {
   if (!panel || !overlay) return []
   const out = []
   const winH = panel.h - 1
-  const start = Math.max(0, Math.min(overlay.scroll, Math.max(0, overlay.lines.length - winH)))
+  const total = overlay.lines.length
+  const start = Math.max(0, Math.min(overlay.scroll, Math.max(0, total - winH)))
   const shown = overlay.lines.slice(start, start + winH)
-  const title = state.picker ? ` ❯ ${state.picker.title} ` : " ❯ Setup "
-  out.push(`${ansi.bold}${C.tool}${title}${ansi.reset}${ansi.dim}${state.picker ? "(↑↓ navigate, Enter confirm, Esc cancel)" : ""}${ansi.reset}`)
-  for (const l of shown) {
-    out.push(`${l.color}${sliceByWidth(l.text, cols - 1)}${ansi.reset}`)
+  // 标题行：左侧标题 + filter（截断防撑破帧），右侧位置指示（按键提示在状态栏，不重复）
+  const p = state.picker
+  const right = p && p.filteredItems?.length ? `${p.index + 1}/${p.filteredItems.length} ` : ""
+  const rawLeft = p ? ` ❯ ${p.title}${p.filter ? `  filter: ${p.filter}` : ""} ` : " ❯ Setup "
+  const left = sliceByWidth(rawLeft, Math.max(1, cols - 2 - stringWidth(right)))
+  const titlePad = " ".repeat(Math.max(1, cols - 1 - stringWidth(left) - stringWidth(right)))
+  out.push(`${ansi.bold}${C.tool}${left}${ansi.reset}${ansi.dim}${titlePad}${right}${ansi.reset}`)
+  const hasMoreAbove = start > 0
+  const hasMoreBelow = start + winH < total
+  for (let i = 0; i < shown.length; i++) {
+    const l = shown[i]
+    // 可视窗上方/下方有更多内容时，在首行/末行右侧给 dim 提示；单行窗口两个方向都有则合并指示
+    const moreAbove = i === 0 && hasMoreAbove
+    const moreBelow = i === shown.length - 1 && hasMoreBelow
+    const ind = moreAbove && moreBelow ? "↑↓ more" : moreAbove ? "↑ more" : moreBelow ? "↓ more" : ""
+    const maxW = cols - 1 - (ind ? stringWidth(ind) + 1 : 0)
+    // 超宽行截断并加省略号
+    const text = stringWidth(l.text) > maxW ? sliceByWidth(l.text, Math.max(0, maxW - 1)) + "…" : l.text
+    const pad = ind ? " ".repeat(Math.max(1, cols - 1 - stringWidth(text) - stringWidth(ind))) : ""
+    out.push(`${l.color}${text}${ansi.reset}${ind ? `${ansi.dim}${pad}${ind}${ansi.reset}` : ""}`)
   }
   for (let i = shown.length; i < winH; i++) out.push("")
   return out
@@ -187,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 = 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}`)
   }
@@ -297,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
@@ -406,7 +347,7 @@ function buildStatusLine(state, agent, { cols, slashCommands }) {
       ? " y: continue │ n: stop"
       : " y: approve │ n: deny │ a: approve all (AUTO)"
   }
-  if (state.picker) return " ↑↓: select │ Enter: confirm │ Esc: cancel"
+  if (state.picker) return " type: filter │ ↑↓/PgUp/PgDn: select │ Enter: confirm │ Esc: cancel"
   if (state.wizard) {
     return state.wizard.step === "provider"
       ? " ↑↓: select │ Enter: confirm │ Esc: skip"
@@ -434,10 +375,11 @@ function buildStatusLine(state, agent, { cols, slashCommands }) {
   const elapsed = state.processing ? ` ${Math.floor((Date.now() - state.processingStarted) / 1000)}s` : ""
   const toolHint = state.currentTool ? ` ${state.currentTool}…` : ""
   const statusText = state.processing ? `${state.status}${toolHint}${elapsed}` : state.status
-  const ctxThreshold = agent.config?.agent?.compactThreshold ?? 100_000
-  const ctxPct = Math.round((state.ctxCache.tokens / ctxThreshold) * 100)
+  const modelContext = specForModel(agent.provider.model).context
+  const ctxPct = Math.round((state.ctxCache.tokens / modelContext) * 100)
+  const ctxTokensHint = state.ctxCache.tokens > 0 ? ` ${fmtK(state.ctxCache.tokens)}` : ""
   const ctxHint = ctxPct > 0
-    ? ctxPct >= 80 ? ` │ ${ansi.reset}${C.warn}context ${ctxPct}%${ansi.reset}${ansi.dim}` : ` │ context ${ctxPct}%` : ""
+    ? ctxPct >= 80 ? ` │ ${ansi.reset}${C.warn}context ${ctxPct}%${ctxTokensHint}${ansi.reset}${ansi.dim}` : ` │ context ${ctxPct}%${ctxTokensHint}` : ""
   const queueHint = state.queue.length > 0 ? ` │ queue: ${state.queue.length}` : ""
   return ` ${statusText}${taskHint}${tokenHint}${ctxHint}${queueHint}${scrollHint} │ Enter: send${state.processing ? " (queue)" : ""} │ /: commands │ wheel/PgUp/PgDn: scroll │ Ctrl+I: inject │ Ctrl+C: exit`
 }

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 }
+}

package/src/tui/slash-commands.mjs

@@ -4,11 +4,12 @@
  *
  * ctx object is injected by index.mjs and forwarded to each handler:
  *   { agent, state, distillOpts, pushLine, pushLabel, render,
- *     openPicker, openModelPicker, setProviderKey, runDistill,
+ *     showPicker, closePicker, openModelPicker, setProviderKey, runDistill,
  *     persistRaw, syncProviderField, maskKey, exit, SLASH_COMMANDS }
  */
 
 import { C } from "./ansi.mjs"
+import { specForModel } from "../config.mjs"
 import { handleClearCommand } from "./cmd-clear.mjs"
 import { handleNewCommand } from "./cmd-new.mjs"
 import { handleExitCommand } from "./cmd-exit.mjs"
@@ -55,8 +56,11 @@ export const SLASH_COMMANDS = [
   { name: "/help", group: "System", desc: "this list" },
 ]
 
-/** Command → handler mapping table */
-const HANDLERS = {
+/** High-frequency command aliases (single source of truth — also used by index.mjs and cmd-help.mjs) */
+export const SLASH_ALIASES = { "/h": "/help", "/x": "/exit", "/m": "/model", "/p": "/plan", "/t": "/think", "/c": "/clear", "/n": "/new" }
+
+/** Command → handler mapping table (exported for tests) */
+export const HANDLERS = {
   "/clear": handleClearCommand,
   "/new": handleNewCommand,
   "/exit": handleExitCommand,
@@ -90,27 +94,29 @@ export function createSlashCommands(ctx) {
   const handlerCtx = { ...ctx, SLASH_COMMANDS }
 
   async function handleSlash(text) {
-    const [cmd] = text.split(/\s+/)
-    // high-frequency command aliases
-    const aliases = { "/h": "/help", "/x": "/exit", "/m": "/model", "/p": "/plan", "/t": "/think", "/c": "/clear", "/n": "/new" }
-    const resolved = aliases[cmd] ?? cmd
+    const [rawCmd, ...args] = text.split(/\s+/)
+    // case-insensitive matching + alias resolution
+    const cmd = rawCmd.toLowerCase()
+    const resolved = SLASH_ALIASES[cmd] ?? cmd
     const handler = HANDLERS[resolved]
     if (handler) {
-      await handler(handlerCtx)
+      await handler(handlerCtx, args)
       return
     }
-    ctx.pushLine(`Unknown command: ${cmd} (/help for available commands)`, C.error)
+    ctx.pushLine(`Unknown command: ${rawCmd} (/help for available commands)`, C.error)
   }
 
   /** Tab completion candidates: command names / subcommands / provider names / preset names / think params */
   function completions(input) {
     if (!input.startsWith("/")) return []
     const parts = input.split(/\s+/)
-    // still typing the first token: complete command names
+    // still typing the first token: complete command names (case-insensitive)
     if (parts.length === 1) {
-      return SLASH_COMMANDS.filter((c) => c.name.startsWith(parts[0])).map((c) => c.name)
+      const prefix = parts[0].toLowerCase()
+      return SLASH_COMMANDS.filter((c) => c.name.startsWith(prefix)).map((c) => c.name)
     }
-    const cmd = parts[0]
+    // aliases resolve to their target command, so `/m <Tab>` completes /model args
+    const cmd = SLASH_ALIASES[parts[0].toLowerCase()] ?? parts[0].toLowerCase()
     const last = parts.at(-1) // when trailing space, list all candidates
     const head = parts.slice(0, -1).join(" ")
     const argIndex = parts.length - 2 // which parameter is being typed (0-based)
@@ -118,13 +124,17 @@ export function createSlashCommands(ctx) {
     if (cmd === "/model" && argIndex === 0) return match(agent.providers.map((p) => p.name))
     if (cmd === "/think") {
       if (argIndex === 0) return match(["on", "off", "effort"])
-      if (argIndex === 1 && parts[1] === "effort") return match(["low", "high", "max"])
+      if (argIndex === 1 && parts[1].toLowerCase() === "effort") {
+        // effort enum is model-specific — take it from the current model's spec
+        const levels = specForModel(agent.provider?.model).reasoningEffortEnum ?? ["high", "max"]
+        return match(levels)
+      }
     }
-    if (cmd === "/config" && argIndex === 0) return match(["embedkey", "set"])
+    if (cmd === "/config" && argIndex === 0) return match(["embedkey"])
     if (cmd === "/goal" && argIndex === 0) return match(["set", "cancel"])
     if (cmd === "/mcp") {
-      if (argIndex === 0) return match(["add", "url", "ws", "remove", "connect", "list"])
-      if (argIndex === 1 && (parts[1] === "remove" || parts[1] === "connect")) return match((agent.config?.mcp?.servers ?? []).map((s) => s.name))
+      if (argIndex === 0) return match(["add", "http", "ws", "stdio", "ai", "remove", "connect", "list"])
+      if (argIndex === 1 && (parts[1]?.toLowerCase() === "remove" || parts[1]?.toLowerCase() === "connect")) return match((agent.config?.mcp?.servers ?? []).map((s) => s.name))
     }
     return []
   }