free-coding-models 0.5.81 → 0.5.83

package/src/tui/overlays.js

@@ -25,6 +25,8 @@ import { renderRouterDashboard as renderRouterDashboardOverlay } from '../core/r
 import { renderPlayground as renderPlaygroundOverlay } from '../core/playground.js'
 import { themeColors, getThemeStatusLabel, getProviderRgb } from './theme.js'
 import { getProviderBillingNote, getProviderLabelWithBilling } from '../core/provider-metadata.js'
+import { detectTerminalCapabilities } from '../core/utils.js'
+import { truncateAnsiWidth } from './render-helpers.js'
 
 export function createOverlayRenderers(state, deps) {
   const {
@@ -725,29 +727,48 @@ export function createOverlayRenderers(state, deps) {
   // ─── Command palette renderer ──────────────────────────────────────────────
   // 📖 renderCommandPalette draws a centered floating modal over the live table.
   // 📖 Supports hierarchical categories with expand/collapse and rich colors.
+  // 📖 Degrades gracefully on limited terminals (issue #169): width is clamped to
+  // 📖 the screen, long descriptions truncate with an ellipsis, and colors are
+  // 📖 dropped entirely when the terminal cannot render them.
   function renderCommandPalette() {
     const terminalRows = state.terminalRows || 24
     const terminalCols = state.terminalCols || 80
-    const panelWidth = Math.max(52, Math.min(100, terminalCols - 8))
-    const panelInnerWidth = Math.max(32, panelWidth - 4)
+    const caps = detectTerminalCapabilities({ env: process.env, cols: terminalCols, rows: terminalRows, isTTY: true })
+
+    // 📖 Style set: identity wrappers when color is unsupported so the palette
+    // 📖 renders as plain default text (no SGR noise on dumb/mono terminals).
+    const id = (x) => x
+    const sty = caps.colorSupported ? themeColors : {
+      dim: id,
+      infoBold: id,
+      headerBold: id,
+      textBold: id,
+      accentBold: id,
+      bgCursor: id,
+      provider: (_key, text) => text,
+      tier: (_tier, text) => text,
+      overlayBgCommandPalette: id,
+    }
+
+    // 📖 Width budget: never wider than the screen. Outer = inner content + 2 cols
+    // 📖 padding per side. The floors shrink with the terminal so outer width stays
+    // 📖 <= cols for any terminal >= 20 columns (below that the whole TUI is unusable).
+    const panelWidth = Math.min(100, Math.max(16, terminalCols - 8))
+    const panelInnerWidth = Math.max(10, panelWidth - 4)
     const panelPad = 2
     const panelOuterWidth = panelWidth + (panelPad * 2)
-    const headerRowCount = 4
-    const bodyRows = Math.max(8, Math.min(18, terminalRows - 12))
-
-    const truncatePlain = (text, width) => {
-      if (width <= 1) return ''
-      if (displayWidth(text) <= width) return text
-      if (width <= 2) return text.slice(0, width)
-      return text.slice(0, width - 1) + '…'
-    }
+
+    // 📖 Height budget: compact terminals (cols<90 or rows<24) drop the decorative
+    // 📖 blank frame and merge footer hints so bodyRows always leaves room for
+    // 📖 header + footer inside the screen.
+    const bodyRows = Math.max(1, Math.min(18, terminalRows - (caps.compact ? 5 : 10)))
 
     const highlightMatch = (label, positions = []) => {
       if (!Array.isArray(positions) || positions.length === 0) return label
       const posSet = new Set(positions)
       let out = ''
       for (let i = 0; i < label.length; i++) {
-        out += posSet.has(i) ? themeColors.accentBold(label[i]) : label[i]
+        out += posSet.has(i) ? sty.accentBold(label[i]) : label[i]
       }
       return out
     }
@@ -756,64 +777,78 @@ export function createOverlayRenderers(state, deps) {
     const panelLines = []
     const cursorLineByRow = {}
 
+    // 📖 Compose one entry row inside `budget` display columns: prefix and label are
+    // 📖 prioritized, shortcut is kept when it fits, description is truncated last.
+    const composeRow = (budget, { prefixPlain, prefixStyled, label, labelStyled, shortcut, description }) => {
+      const prefixW = displayWidth(prefixPlain)
+      const avail = Math.max(0, budget - prefixW)
+      const shortcutW = shortcut ? displayWidth(` (${shortcut})`) : 0
+      // 📖 Keep at least 6 columns of label so the entry name stays readable.
+      const labelMax = avail - shortcutW
+      let usedShortcut = shortcut
+      let labelPlain = label
+      if (labelMax >= 6) {
+        labelPlain = truncateAnsiWidth(label, labelMax, { ellipsis: '' })
+      } else {
+        usedShortcut = ''
+        labelPlain = truncateAnsiWidth(label, Math.max(1, avail), { ellipsis: '' })
+      }
+      let row = `${prefixStyled}${labelStyled(labelPlain)}`
+      if (usedShortcut) row += sty.dim(` (${usedShortcut})`)
+      if (description) {
+        const descRoom = budget - prefixW - displayWidth(labelPlain) - (usedShortcut ? displayWidth(` (${usedShortcut})`) : 0) - 3
+        // 📖 Below 8 columns a truncated description reads as garbage; drop it instead.
+        if (descRoom >= 8) row += sty.dim(` - ${truncateAnsiWidth(description, descRoom, { ellipsis: '…' })}`)
+      }
+      return truncateAnsiWidth(row, budget)
+    }
+
     if (allResults.length === 0) {
-      panelLines.push(themeColors.dim('  No commands found. Try a different search.'))
+      panelLines.push(sty.dim('  No commands found. Try a different search.'))
     } else {
       for (let idx = 0; idx < allResults.length; idx++) {
         const entry = allResults[idx]
         const isCursor = idx === state.commandPaletteCursor
-        
+
         const indent = '  '.repeat(entry.depth || 0)
         const expandIndicator = entry.hasChildren
-          ? (entry.isExpanded ? themeColors.infoBold('▼') : themeColors.dim('▶'))
-          : themeColors.dim('•')
-        
-        // 📖 Only use icon from entry, label should NOT include emoji
-        const iconPrefix = entry.icon ? `${entry.icon} ` : ''
-        const plainLabel = truncatePlain(entry.label, panelInnerWidth - indent.length - iconPrefix.length - 4)
-        const label = entry.matchPositions ? highlightMatch(plainLabel, entry.matchPositions) : plainLabel
-        
-        let rowLine
-        if (entry.type === 'category') {
-          rowLine = `${indent}${expandIndicator} ${iconPrefix}${themeColors.headerBold(label)}`
-        } else if (entry.type === 'subcategory') {
-          rowLine = `${indent}${expandIndicator} ${iconPrefix}${themeColors.textBold(label)}`
-        } else if (entry.type === 'page') {
-          // 📖 Pages are at root level with icon + label + shortcut + description
-          const shortcut = entry.shortcut ? themeColors.dim(` (${entry.shortcut})`) : ''
-          const description = entry.description ? themeColors.dim(` — ${entry.description}`) : ''
-          rowLine = `${expandIndicator} ${iconPrefix}${themeColors.textBold(label)}${shortcut}${description}`
-        } else if (entry.type === 'action') {
-          // 📖 Actions are at root level with icon + label + shortcut + description
-          const shortcut = entry.shortcut ? themeColors.dim(` (${entry.shortcut})`) : ''
-          const description = entry.description ? themeColors.dim(` — ${entry.description}`) : ''
-          rowLine = `${expandIndicator} ${iconPrefix}${themeColors.textBold(label)}${shortcut}${description}`
-        } else {
-          // 📖 Regular commands in submenus
-          const shortcut = entry.shortcut ? themeColors.dim(` (${entry.shortcut})`) : ''
-          const description = entry.description ? themeColors.dim(` — ${entry.description}`) : ''
-          // 📖 Color tiers and providers
-          let coloredLabel = label
-          let prefixWithIcon = iconPrefix
-          
-          if (entry.providerKey && !entry.icon) {
-            // 📖 Model filter: add provider icon
-            const providerIcon = '🏢'
-            prefixWithIcon = `${providerIcon} `
-            coloredLabel = themeColors.provider(entry.providerKey, label, { bold: false })
-          } else if (entry.tier) {
-            coloredLabel = themeColors.tier(entry.tier, label)
-          } else if (entry.providerKey) {
-            coloredLabel = themeColors.provider(entry.providerKey, label, { bold: false })
-          }
-          
-          rowLine = `${indent}  ${expandIndicator} ${prefixWithIcon}${coloredLabel}${shortcut}${description}`
-        }
+          ? (entry.isExpanded ? sty.infoBold('▼') : sty.dim('▶'))
+          : sty.dim('•')
+
+        // 📖 Only use icon from entry, label should NOT include emoji.
+        // 📖 Model filter rows without an icon keep their provider building glyph.
+        const iconPrefix = entry.icon
+          ? `${entry.icon} `
+          : (entry.providerKey && entry.type === 'command' ? '🏢 ' : '')
+        // 📖 Submenu commands keep their extra 2-space indent inside the tree.
+        const rowGap = entry.type === 'command' ? '  ' : ''
+        const prefixPlain = `${indent}${rowGap}  ${iconPrefix}`
+        const prefixStyled = `${indent}${rowGap}${expandIndicator} ${iconPrefix}`
+
+        // 📖 Width of prefixPlain and prefixStyled match (indicator is 1 column).
+        const rowLine = composeRow(panelInnerWidth, {
+          prefixPlain,
+          prefixStyled,
+          label: entry.label,
+          labelStyled: (plainLabel) => {
+            const highlighted = entry.matchPositions ? highlightMatch(plainLabel, entry.matchPositions) : plainLabel
+            if (entry.type === 'category') return sty.headerBold(highlighted)
+            if (entry.type === 'subcategory') return sty.textBold(highlighted)
+            if (entry.providerKey && !entry.icon) return sty.provider(entry.providerKey, highlighted, { bold: false })
+            if (entry.tier) return sty.tier(entry.tier, highlighted)
+            if (entry.providerKey) return sty.provider(entry.providerKey, highlighted, { bold: false })
+            return sty.textBold(highlighted)
+          },
+          shortcut: entry.shortcut || '',
+          description: entry.description || '',
+        })
 
         cursorLineByRow[idx] = panelLines.length
-        
+
         if (isCursor) {
-          panelLines.push(themeColors.bgCursor(rowLine))
+          // 📖 Without color the bg highlight is invisible, so mark the cursor row
+          // 📖 with an ASCII '>' (safe on dumb/mono consoles where ❯ may not exist).
+          panelLines.push(caps.colorSupported ? sty.bgCursor(rowLine) : `> ${rowLine}`)
         } else {
           panelLines.push(rowLine)
         }
@@ -827,42 +862,43 @@ export function createOverlayRenderers(state, deps) {
       panelLines.length,
       bodyRows
     )
-    const { visible, offset } = sliceOverlayLines(panelLines, state.commandPaletteScrollOffset, bodyRows)
-    state.commandPaletteScrollOffset = offset
+    const { visible } = sliceOverlayLines(panelLines, state.commandPaletteScrollOffset, bodyRows)
 
     const query = state.commandPaletteQuery || ''
     const queryWithCursor = query.length > 0
-      ? `${query}${themeColors.accentBold('▏')}`
-      : themeColors.accentBold('▏') + themeColors.dim(' Search commands…')
-
-    const headerLines = []
-    const title = themeColors.headerBold('⚡️ Command Palette')
-    const titleLeft = ` ${title}`
-    const titleRight = themeColors.dim('Esc')
-    const titleWidth = Math.max(1, panelInnerWidth - 1 - displayWidth('Esc'))
-    headerLines.push(`${padEndDisplay(titleLeft, titleWidth)} ${titleRight}`)
-    headerLines.push(` ${padEndDisplay(`> ${queryWithCursor}`, panelInnerWidth)}`)
-    headerLines.push(themeColors.dim(` ${'─'.repeat(Math.max(1, panelInnerWidth))}`))
-
-    const footerLines = [
-      themeColors.dim(` ${'─'.repeat(Math.max(1, panelInnerWidth))}`),
-      ` ${padEndDisplay(themeColors.dim('↵ Select • ← → Expand'), panelInnerWidth)}`,
-      ` ${padEndDisplay(themeColors.dim('↑↓ Navigate • Type search'), panelInnerWidth)}`,
+      ? `${query}${sty.accentBold('▏')}`
+      : sty.accentBold('▏') + sty.dim(' Search commands…')
+
+    // 📖 Header: title left, Esc hint right, search input, separator. Each piece is
+    // 📖 width-budgeted so the header can never push past the panel on tiny screens.
+    const escHint = sty.dim('Esc')
+    const titleBudget = Math.max(1, panelInnerWidth - 1 - displayWidth('Esc'))
+    const queryBudget = Math.max(1, panelInnerWidth - 1)
+    const headerLines = [
+      ` ${padEndDisplay(truncateAnsiWidth(sty.headerBold('⚡️ Command Palette'), titleBudget, { ellipsis: '…' }), titleBudget)} ${escHint}`,
+      ` ${padEndDisplay(truncateAnsiWidth(`> ${queryWithCursor}`, queryBudget, { ellipsis: '…' }), queryBudget)}`,
+      sty.dim(` ${'─'.repeat(Math.max(1, panelInnerWidth - 1))}`),
     ]
 
+    const sepLine = sty.dim(` ${'─'.repeat(Math.max(1, panelInnerWidth - 1))}`)
+    const footerLines = caps.compact
+      ? [sepLine, ` ${sty.dim(truncateAnsiWidth('↵ Select • ↑↓ Navigate • Type search', panelInnerWidth - 1))}`]
+      : [
+          sepLine,
+          ` ${padEndDisplay(sty.dim('↵ Select • ← → Expand'), panelInnerWidth - 1)}`,
+          ` ${padEndDisplay(sty.dim('↑↓ Navigate • Type search'), panelInnerWidth - 1)}`,
+        ]
+
+    // 📖 Compact mode skips the decorative blank frame above/below the panel.
+    // 📖 truncateAnsiWidth is a final safety clamp: rows are already budgeted to
+    // 📖 panelInnerWidth, this only catches emoji width miscounts so a line can
+    // 📖 never wrap and corrupt the frame on an 80-col console.
+    const blankFrameRows = caps.compact ? 0 : 2
     const allPanelLines = [...headerLines, ...visible, ...footerLines]
-    
-    while (allPanelLines.length < bodyRows + headerRowCount + 3) {
-      allPanelLines.splice(headerLines.length + visible.length, 0, ` ${' '.repeat(panelInnerWidth)}`)
-    }
-
-    const blankPaddedLine = ' '.repeat(panelOuterWidth)
     const paddedPanelLines = [
-      blankPaddedLine,
-      blankPaddedLine,
-      ...allPanelLines.map((line) => `${' '.repeat(panelPad)}${padEndDisplay(line, panelWidth)}${' '.repeat(panelPad)}`),
-      blankPaddedLine,
-      blankPaddedLine,
+      ...Array.from({ length: blankFrameRows }, () => ' '.repeat(panelOuterWidth)),
+      ...allPanelLines.map((line) => `${' '.repeat(panelPad)}${padEndDisplay(truncateAnsiWidth(line, panelWidth), panelWidth)}${' '.repeat(panelPad)}`),
+      ...Array.from({ length: blankFrameRows }, () => ' '.repeat(panelOuterWidth)),
     ]
 
     const panelHeight = paddedPanelLines.length
@@ -870,8 +906,8 @@ export function createOverlayRenderers(state, deps) {
     const left = Math.max(1, Math.floor((terminalCols - panelOuterWidth) / 2) + 1)
 
     // 📖 Mouse support: record CP layout so clicks inside the modal can select items.
-    // 📖 Body rows start after 2 blank-padding lines + headerLines (3).
-    const bodyStartRow = top + 2 + headerLines.length // 📖 1-based terminal row of first body line
+    // 📖 Body rows start after the blank frame + headerLines (3).
+    const bodyStartRow = top + blankFrameRows + headerLines.length // 📖 1-based terminal row of first body line
     overlayLayout.commandPaletteCursorToLine = { ...cursorLineByRow }
     overlayLayout.commandPaletteScrollOffset = state.commandPaletteScrollOffset
     overlayLayout.commandPaletteBodyStartRow = bodyStartRow
@@ -883,11 +919,14 @@ export function createOverlayRenderers(state, deps) {
 
     const tintedLines = paddedPanelLines.map((line) => {
       const padded = padEndDisplay(line, panelOuterWidth)
-      return themeColors.overlayBgCommandPalette(padded)
+      return sty.overlayBgCommandPalette(padded)
     })
 
+    // 📖 Emit each row from column 1 and clear to end of line so stale table cells
+    // 📖 in the margins beside the panel can never bleed through (the artifacts
+    // 📖 reported in issue #169). \x1b[K never wraps: panel right edge <= cols.
     return tintedLines
-      .map((line, idx) => `\x1b[${top + idx};${left}H${line}`)
+      .map((line, idx) => `\x1b[${top + idx};1H${' '.repeat(left - 1)}${line}\x1b[K`)
       .join('')
   }
 
@@ -963,7 +1002,9 @@ export function createOverlayRenderers(state, deps) {
     lines.push(`  ${key('Ctrl+P')}  Open ⚡️ command palette  ${hint('(search and run actions quickly)')}`)
     lines.push(`  ${key('Ctrl+A')}  AI Speed Test  ${hint('(benchmark selected model → time + TPS)')}`)
     lines.push(`  ${key('Ctrl+U')}  Global AI Speed Test  ${hint('(benchmark all models; Settings can auto-run it on startup)')}`)
-    lines.push(`  ${key('Ctrl+Shift+P')}  Probe 404 Models  ${hint('(test all configured models; auto-hide broken 404/410)')}`)
+    lines.push(`  ${key('Shift+P')}  Re-probe failed rows  ${hint('(retry only rows showing auth fail / 429 / 404 / timeout - not the whole list)')}`)
+    lines.push(`  ${key('Ctrl+Shift+P')}  Probe All Models  ${hint('(test all configured models; auto-hide broken 404/410)')}`)
+    lines.push(`  ${key('Space')}  Expand selected row  ${hint('(2-line detail: provider, endpoint, full model id; Space again or move to collapse)')}`)
     lines.push(`  ${key('E')}  Cycle filter mode  ${hint('(Normal → Configured only → Usable only)')}`)
     lines.push(`  ${key('Z')}  Cycle tool mode  ${hint('(📦 OpenCode → π Pi → 🪼 jcode → 📦 Desktop → 🦞 OpenClaw → 💘 Crush → 🪿 Goose → 🛠 Aider → 🐉 Qwen → 🤲 OpenHands → ⚡ Amp)')}`)
     lines.push(`  ${key('F')}  Toggle favorite on selected row  ${hint('(1️⃣2️⃣3️⃣ = router fallback order, capped at 🔟)')}`)

package/src/tui/render-helpers.js

@@ -52,10 +52,11 @@ import chalk from 'chalk'
 import { OVERLAY_PANEL_WIDTH, TABLE_FIXED_LINES, TABLE_HEADER_LINES, TABLE_FOOTER_LINES } from '../core/constants.js'
 import { sortResults } from '../core/utils.js'
 
-// 📖 stripAnsi: Remove ANSI color/control sequences to estimate visible text width before padding.
-// 📖 Strips CSI sequences (SGR colors) and OSC sequences (hyperlinks).
+// 📖 stripAnsi: Remove ANSI control sequences to estimate visible text width before padding.
+// 📖 Strips ALL CSI sequences (SGR colors, \x1b[K clear, cursor moves) and OSC
+// 📖 sequences (hyperlinks) - every escape is zero-width for measurement purposes.
 export function stripAnsi(input) {
-  return String(input).replace(/\x1b\[[0-9;]*m/g, '').replace(/\x1b\][^\x1b]*\x1b\\/g, '')
+  return String(input).replace(/\x1b\[[0-9;?]*[A-Za-z]/g, '').replace(/\x1b\][^\x1b]*\x1b\\/g, '')
 }
 
 // 📖 fadedRow: Multiply every 24-bit RGB channel inside an ANSI-colored string by `factor`
@@ -158,6 +159,44 @@ export function padEndDisplay(str, width) {
   return str + ' '.repeat(need)
 }
 
+// 📖 truncateAnsiWidth: Hard-clamp ANY string (plain or ANSI-styled) to a max
+// 📖 display width, appending an ellipsis when content is cut. ANSI escape
+// 📖 sequences are preserved (they cost 0 columns) so styled overlay rows can be
+// 📖 clamped as a final safety pass without breaking colors. A reset (\x1b[0m) is
+// 📖 inserted before the ellipsis so a cut inside a colored run cannot bleed the
+// 📖 color into the ellipsis or the following cells.
+export function truncateAnsiWidth(input, maxWidth, { ellipsis = '…' } = {}) {
+  const text = String(input)
+  const budget = Math.max(0, Math.floor(maxWidth) || 0)
+  if (budget === 0) return ''
+  if (displayWidth(text) <= budget) return text
+
+  // 📖 Split into ANSI sequences and visible characters so escapes are kept verbatim.
+  // 📖 Capturing group makes String.split keep the separators (ANSI tokens) in the result.
+  const ANSI_TOKEN = /(\x1b\[[0-9;?]*[A-Za-z]|\x1b\][^\x1b]*(?:\x1b\\|\u0007)?|\x1b.)/g
+  const tokens = text.split(ANSI_TOKEN).filter((t) => t !== '')
+  let out = ''
+  let w = 0
+  const ellWidth = displayWidth(ellipsis)
+  // 📖 Reserve room for the ellipsis, but never let the reserve swallow the whole budget.
+  const cutBudget = Math.max(0, budget - Math.min(ellWidth, Math.max(0, budget - 1)))
+
+  let cut = false
+  for (const token of tokens) {
+    const isAnsi = token.startsWith('\x1b')
+    if (isAnsi) { out += token; continue }
+    // 📖 Walk visible characters code point by code point (emoji are 2 columns).
+    for (const ch of token) {
+      const cw = displayWidth(ch)
+      if (w + cw > cutBudget) { cut = true; break }
+      out += ch
+      w += cw
+    }
+    if (cut) break
+  }
+  return out + '\x1b[0m' + ellipsis
+}
+
 // 📖 tintOverlayLines: Tint overlay lines with a terminal width so the background is clearly visible.
 // 📖 Applies bgColor to each line and pads to terminalCols for full-width panel look.
 // 📖 If terminalCols is not provided, falls back to OVERLAY_PANEL_WIDTH for compatibility.

package/src/tui/render-table.js

@@ -162,6 +162,8 @@ export const PROVIDER_COLOR = new Proxy({}, {
  *     'models.dev': number,
  *   },
  *   modelsDevCacheCached?: boolean,  // t5: whether the models.dev cache is still within TTL
+ *   expandedRowKey?: string|null,    // 📖 issue #168: Space-expanded row ("provider/modelId"), renders a 2-line detail card under the cursor row
+ *   actionErrorMsg?: string|null,    // 📖 issue #168: non-fatal command/probe failure shown as a footer chip instead of crashing
  *   quota?: Record<string, {         // t2: live quota from response headers
  *     remaining: number, limit: number, percent: number,
  *     source: 'header'|'endpoint', lastUpdated: number, windowType?: string,
@@ -212,6 +214,8 @@ export function renderTable({
   probeTotal = 0,
   probeCompleted = 0,
   probeHiddenCount = 0,
+  expandedRowKey = null,         // 📖 issue #168: "providerKey/modelId" of the Space-expanded row (null = collapsed)
+  actionErrorMsg = null,         // 📖 issue #168: non-fatal command/probe failure for the footer chip
   probeCacheHits = 0,
   probeCacheMisses = 0,
   probeCacheBrokenHidden = 0,
@@ -650,9 +654,37 @@ export function renderTable({
   const hasCustomFilter = typeof customTextFilter === 'string' && customTextFilter.trim().length > 0
   const hasReleaseFooter = typeof lastReleaseDate === 'string' && lastReleaseDate.trim().length > 0
   const extraFooterLines = (versionStatus.isOutdated ? 1 : 0) + (hasCustomFilter ? 1 : 0) + (hasReleaseFooter ? 1 : 0)
+
+  // 📖 Expanded row detail (issue #168): Space toggles a 2-line card under the
+  // 📖 cursor row showing provider + model specifics that tight columns truncate.
+  // 📖 The card only renders when the expanded key still matches the cursor row
+  // 📖 (any cursor move clears state.expandedRowKey), and the viewport reserves
+  // 📖 2 lines up front so the footer never gets pushed off-screen.
+  const EXPANDED_DETAIL_LINES = 2
+  const cursorRow = cursor !== null ? sorted[cursor] : null
+  const expansionActive = !!expandedRowKey && !!cursorRow
+    && `${cursorRow.providerKey}/${cursorRow.modelId}` === expandedRowKey
   const vp = calculateViewport(terminalRows, scrollOffset, sorted.length, {
-    extraFixedLines: extraFooterLines,
+    extraFixedLines: extraFooterLines + (expansionActive ? EXPANDED_DETAIL_LINES : 0),
   })
+
+  // 📖 clipPlainWidth: Clip a PLAIN string (no ANSI codes) to a max display
+  // 📖 width, appending an ellipsis when truncated. Used by the Space detail
+  // 📖 card so long endpoint URLs and model IDs degrade gracefully on narrow
+  // 📖 terminals instead of wrapping the table.
+  const clipPlainWidth = (text, max) => {
+    if (max <= 0) return ''
+    const chars = [...String(text)]
+    let w = 0
+    let out = ''
+    for (const ch of chars) {
+      const cw = displayWidth(ch)
+      if (w + cw > max - 1) return out + '…'
+      out += ch
+      w += cw
+    }
+    return out
+  }
   const paintSweScore = (score, paddedText) => {
     if (score >= 70) return chalk.bold.rgb(...getTierRgb('S+'))(paddedText)
     if (score >= 60) return chalk.bold.rgb(...getTierRgb('S'))(paddedText)
@@ -1042,6 +1074,30 @@ export function renderTable({
       renderedRow = row
     }
     lines.push(isUnusable ? fadedRow(renderedRow, 0.8) : renderedRow)
+
+    // 📖 Expanded detail card (issue #168): 2 lines under the selected row so
+    // 📖 provider and model specifics stay readable even when tight columns
+    // 📖 truncate them. Plain text is built first, clipped to the terminal
+    // 📖 width, then colorized (same pattern as the table header).
+    if (isCursor && expansionActive) {
+      const maxDetailWidth = Math.max(0, (terminalCols || 80) - 4)
+      const keyText = r.hasApiKey ? 'key configured' : 'no key'
+      const endpoint = sources[r.providerKey]?.url ?? 'unknown endpoint'
+      const detailProvider = clipPlainWidth(
+        `  ↳ ${providerName} (${r.providerKey}) · ${keyText} · ${endpoint}`,
+        maxDetailWidth
+      )
+      const lastMsText = latestPing
+        ? (typeof latestPing.ms === 'number' ? `${latestPing.ms}ms` : String(latestPing.ms))
+        : 'no ping yet'
+      const lastCodeText = latestPing ? `HTTP ${latestPing.code}` : ''
+      const detailModel = clipPlainWidth(
+        `  ↳ ${r.modelId} · tier ${r.tier} · SWE ${r.sweScore ?? '-'} · ctx ${r.ctx ?? '-'} · last ${lastMsText}${lastCodeText ? ` ${lastCodeText}` : ''} · added ${r.addedDate ?? '-'}`,
+        maxDetailWidth
+      )
+      lines.push(themeColors.provider(r.providerKey, detailProvider))
+      lines.push(themeColors.dim(detailModel))
+    }
   }
 
   // 📖 Mouse support: record the 1-based terminal row range of model data rows.
@@ -1214,11 +1270,15 @@ export function renderTable({
   const speedTestLabel = chalk.bgRgb(...currentPalette().badgeSpeedTestBg).rgb(...currentPalette().badgeSpeedTestFg).bold(' NEW ⭐️ Ctrl+A 🤖 AI Speed Test ')
   const globalBenchmarkLabel = chalk.bgRgb(...currentPalette().badgeBenchmarkBg).rgb(...currentPalette().badgeBenchmarkFg).bold(' NEW Ctrl+U : Global AI Speed Test (Uses a lot of requests!) ')
 
-  // 📖 Probe badge: show progress when 404 probe is running or recently completed
+  // 📖 Probe badge: show progress when 404 probe is running or recently completed.
+  // 📖 Bar width is clamped to 0-20 cells (issue #168 kick-out fix): a transient
+  // 📖 counter hiccup must never reach String.repeat with a negative count - a
+  // 📖 RangeError here crashes the render interval and kills the whole TUI.
   let probeLabel = ''
   if (probeRunning) {
     const pct = probeTotal > 0 ? Math.round((probeCompleted / probeTotal) * 100) : 0
-    const bar = '█'.repeat(Math.floor(pct / 5)) + '░'.repeat(20 - Math.floor(pct / 5))
+    const filled = Math.max(0, Math.min(20, Math.floor(pct / 5)))
+    const bar = '█'.repeat(filled) + '░'.repeat(20 - filled)
     probeLabel = chalk.bgRgb(180, 40, 40).rgb(255, 255, 255).bold(` 🔍 Probe ${bar} ${probeCompleted}/${probeTotal} `)
   } else if (probeHiddenCount > 0 && probeTotal > 0) {
     probeLabel = chalk.bgRgb(120, 60, 60).rgb(255, 200, 200).bold(` 🔍 Probe done: ${probeHiddenCount} broken model${probeHiddenCount > 1 ? 's' : ''} hidden `)
@@ -1308,8 +1368,16 @@ export function renderTable({
     }
   }
 
+  // 📖 Action error chip (issue #168): non-fatal failures from command palette
+  // 📖 actions or the 404 probe land here instead of crashing the TUI. Red chip
+  // 📖 so it reads as an error, auto-expires (app.js passes null when stale).
+  let actionErrorLabel = ''
+  if (actionErrorMsg) {
+    actionErrorLabel = chalk.bgRgb(170, 30, 30).rgb(255, 220, 220).bold(` ⚠ ${actionErrorMsg} `)
+  }
+
   // 📖 Line 3: Speed Test + Global Benchmark + Probe + Probe-cache + Paused-providers + Enrichment + Quota + Last release
-  if (releaseLabel || speedTestLabel || globalBenchmarkLabel || probeLabel || probeCacheLabel || pausedProvidersLabel || enrichmentLabel || quotaLabel) {
+  if (releaseLabel || speedTestLabel || globalBenchmarkLabel || probeLabel || probeCacheLabel || pausedProvidersLabel || enrichmentLabel || quotaLabel || actionErrorLabel) {
     const parts = [
       { text: '  ', key: null },
       { text: speedTestLabel, key: 'a' },
@@ -1317,6 +1385,8 @@ export function renderTable({
       { text: globalBenchmarkLabel, key: 'u' },
       { text: probeLabel ? '  ' : '', key: null },
       { text: probeLabel, key: null },
+      { text: actionErrorLabel ? '  ' : '', key: null },
+      { text: actionErrorLabel, key: null },
       { text: probeCacheLabel ? '  ' : '', key: null },
       { text: probeCacheLabel, key: null },
       { text: pausedProvidersLabel ? '  ' : '', key: null },

package/src/tui/theme.js

@@ -194,6 +194,7 @@ const PROVIDER_PALETTES = {
     novita: [255, 185, 120],
     pollinations: [255, 105, 180],
     requesty: [100, 149, 255],
+    orcarouter: [255, 138, 64],
     'ollama-cloud': [230, 230, 230],
   },
   light: {
@@ -226,6 +227,7 @@ const PROVIDER_PALETTES = {
     novita: [173, 84, 0],
     pollinations: [170, 45, 110],
     requesty: [0, 72, 170],
+    orcarouter: [170, 74, 0],
     'ollama-cloud': [88, 88, 88],
   },
 }

package/src/tui/tui-state.js

@@ -294,12 +294,26 @@ export function createTuiState({
     globalBenchmarkTotal: 0,
     globalBenchmarkCompleted: 0,
 
-    // 📖 404 Probe state (Ctrl+Shift+P)
+    // 📖 404 Probe state (Ctrl+Shift+P / Shift+P)
     probeRunning: false,
     probeTotal: 0,
     probeCompleted: 0,
     probeHiddenCount: 0,
 
+    // 📖 Space-expanded row (issue #168): the selected row can blow up into a
+    // 📖 2-line detail card showing provider + model specifics that tight
+    // 📖 columns truncate. Stored as "providerKey/modelId" so the detail always
+    // 📖 follows the highlighted row; null = collapsed. Any cursor move clears it.
+    expandedRowKey: null,
+
+    // 📖 Non-fatal action error chip (footer): set when a command palette action
+    // 📖 or the 404 probe throws. Part of the issue #168 "kicked out" fix: those
+    // 📖 actions used to run fire-and-forget, so any rejection became an unhandled
+    // 📖 promise rejection and Node killed the whole TUI process. Failures now
+    // 📖 land here and render as a footer chip until actionErrorMsgUntil (epoch ms).
+    actionErrorMsg: null,
+    actionErrorMsgUntil: 0,
+
     // 📖 Persistent probe-cache (t1): TTL'd cross-session health cache.
     // 📖 - probeCacheHits / Misses: telemetry counters per session (footer chip).
     // 📖 - probeCacheBrokenHidden: live count of broken rows currently hidden.