free-coding-models 0.2.4 → 0.2.8

package/src/overlays.js

@@ -22,6 +22,7 @@ export function createOverlayRenderers(state, deps) {
     chalk,
     sources,
     PROVIDER_METADATA,
+    PROVIDER_COLOR,
     LOCAL_VERSION,
     getApiKey,
     getProxySettings,
@@ -56,7 +57,9 @@ export function createOverlayRenderers(state, deps) {
 
   // 📖 Wrap plain diagnostic text so long Settings messages stay readable inside
   // 📖 the overlay instead of turning into one truncated red line.
-  const wrapPlainText = (text, width = 104) => {
+  // 📖 Uses 100% of terminal width minus padding for better readability.
+  const wrapPlainText = (text, width = null) => {
+    const effectiveWidth = width || (state.terminalCols - 16)
     const normalized = typeof text === 'string' ? text.trim() : ''
     if (!normalized) return []
     const words = normalized.split(/\s+/)
@@ -64,7 +67,7 @@ export function createOverlayRenderers(state, deps) {
     let current = ''
     for (const word of words) {
       const next = current ? `${current} ${word}` : word
-      if (next.length > width && current) {
+      if (next.length > effectiveWidth && current) {
         lines.push(current)
         current = word
       } else {
@@ -85,6 +88,44 @@ export function createOverlayRenderers(state, deps) {
     return String(Math.floor(safeTotal))
   }
 
+  // 📖 Colorize latency with gradient: green (<500ms) → orange (<1000ms) → yellow (<1500ms) → red (>=1500ms)
+  const colorizeLatency = (latency, text) => {
+    const ms = Number(latency) || 0
+    if (ms <= 0) return chalk.dim(text)
+    if (ms < 500) return chalk.greenBright(text)
+    if (ms < 1000) return chalk.rgb(255, 165, 0)(text)  // Orange
+    if (ms < 1500) return chalk.yellow(text)
+    return chalk.red(text)
+  }
+
+  // 📖 Colorize tokens with gradient: dim green (few) → bright green (many)
+  const colorizeTokens = (tokens, text) => {
+    const tok = Number(tokens) || 0
+    if (tok <= 0) return chalk.dim(text)
+    // Gradient: light green (low) → medium green → bright green (high, >30k)
+    if (tok < 10_000) return chalk.hex('#90EE90')(text)  // Light green
+    if (tok < 30_000) return chalk.hex('#32CD32')(text)  // Lime green
+    return chalk.greenBright(text)  // Full brightness green
+  }
+
+  // 📖 Get model color based on status code - distinct colors for each error type
+  const getModelColorByStatus = (status) => {
+    const sc = String(status)
+    if (sc === '200') return chalk.greenBright  // Success - bright green
+    if (sc === '404') return chalk.rgb(139, 0, 0)  // Not found - dark red
+    if (sc === '400') return chalk.hex('#8B008B')  // Bad request - dark magenta
+    if (sc === '401') return chalk.hex('#9932CC')  // Unauthorized - dark orchid
+    if (sc === '403') return chalk.hex('#BA55D3')  // Forbidden - medium orchid
+    if (sc === '413') return chalk.hex('#FF6347')  // Payload too large - tomato red
+    if (sc === '429') return chalk.hex('#FFB90F')  // Rate limit - dark orange
+    if (sc === '500') return chalk.hex('#DC143C')  // Internal server error - crimson
+    if (sc === '502') return chalk.hex('#C71585')  // Bad gateway - medium violet red
+    if (sc === '503') return chalk.hex('#9370DB')  // Service unavailable - medium purple
+    if (sc.startsWith('5')) return chalk.magenta  // Other 5xx - magenta
+    if (sc === '0') return chalk.hex('#696969')  // Timeout/error - dim gray
+    return chalk.white  // Unknown - white
+  }
+
   // ─── Settings screen renderer ─────────────────────────────────────────────
   // 📖 renderSettings: Draw the settings overlay in the alt screen buffer.
   // 📖 Shows all providers with their API key (masked) + enabled state.
@@ -102,14 +143,19 @@ export function createOverlayRenderers(state, deps) {
     const lines = []
     const cursorLineByRow = {}
 
-    lines.push('')
-    lines.push(`  ${chalk.bold('⚙  Settings')}  ${chalk.dim('— free-coding-models v' + LOCAL_VERSION)}`)
+    // 📖 Branding header
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold('⚙  Settings')}`)
+
     if (state.settingsErrorMsg) {
       lines.push(`  ${chalk.red.bold(state.settingsErrorMsg)}`)
+      lines.push('')
     }
-    lines.push('')
+
     lines.push(`  ${chalk.bold('🧩 Providers')}`)
-    lines.push(`  ${chalk.dim('  ' + '─'.repeat(112))}`)
+    // 📖 Dynamic separator line using 100% terminal width
+    const separatorWidth = Math.max(20, state.terminalCols - 10)
+    lines.push(`  ${chalk.dim('  ' + '─'.repeat(separatorWidth))}`)
     lines.push('')
 
     for (let i = 0; i < providerKeys.length; i++) {
@@ -153,10 +199,13 @@ export function createOverlayRenderers(state, deps) {
       else if (testResult === 'rate_limited') testBadge = chalk.yellow('[Rate limit ⏳]')
       else if (testResult === 'no_callable_model') testBadge = chalk.magenta('[No model ⚠]')
       else if (testResult === 'fail') testBadge = chalk.red('[Test ❌]')
-      const rateSummary = chalk.dim((meta.rateLimits || 'No limit info').slice(0, 36))
+      // 📖 No truncation of rate limits - overlay now uses 100% terminal width
+      const rateSummary = chalk.dim(meta.rateLimits || 'No limit info')
 
       const enabledBadge = enabled ? chalk.greenBright('✅') : chalk.redBright('❌')
-      const providerName = chalk.bold((meta.label || src.name || pk).slice(0, 22).padEnd(22))
+      // 📖 Color provider names the same way as in the main table
+      const providerRgb = PROVIDER_COLOR[pk] ?? [105, 190, 245]
+      const providerName = chalk.bold.rgb(...providerRgb)((meta.label || src.name || pk).slice(0, 22).padEnd(22))
       const bullet = isCursor ? chalk.bold.cyan('  ❯ ') : chalk.dim('    ')
 
       const row = `${bullet}[ ${enabledBadge} ] ${providerName}  ${keyDisplay.padEnd(30)}  ${testBadge}  ${rateSummary}`
@@ -171,7 +220,10 @@ export function createOverlayRenderers(state, deps) {
     if (selectedSource && state.settingsCursor < providerKeys.length) {
       const selectedKey = getApiKey(state.config, selectedProviderKey)
       const setupStatus = selectedKey ? chalk.green('API key detected ✅') : chalk.yellow('API key missing ⚠')
-      lines.push(`  ${chalk.bold('Setup Instructions')} — ${selectedMeta.label || selectedSource.name || selectedProviderKey}`)
+      // 📖 Color the provider name in the setup instructions header
+      const selectedProviderRgb = PROVIDER_COLOR[selectedProviderKey] ?? [105, 190, 245]
+      const coloredProviderName = chalk.bold.rgb(...selectedProviderRgb)(selectedMeta.label || selectedSource.name || selectedProviderKey)
+      lines.push(`  ${chalk.bold('Setup Instructions')} — ${coloredProviderName}`)
       lines.push(chalk.dim(`  1) Create a ${selectedMeta.label || selectedSource.name} account: ${selectedMeta.signupUrl || 'signup link missing'}`))
       lines.push(chalk.dim(`  2) ${selectedMeta.signupHint || 'Generate an API key and paste it with Enter on this row'}`))
       lines.push(chalk.dim(`  3) Press ${chalk.yellow('T')} to test your key. Status: ${setupStatus}`))
@@ -193,7 +245,7 @@ export function createOverlayRenderers(state, deps) {
 
     lines.push('')
     lines.push(`  ${chalk.bold('🛠 Maintenance')}`)
-    lines.push(`  ${chalk.dim('  ' + '─'.repeat(112))}`)
+    lines.push(`  ${chalk.dim('  ' + '─'.repeat(separatorWidth))}`)
     lines.push('')
 
     const updateCursor = state.settingsCursor === updateRowIdx
@@ -218,7 +270,7 @@ export function createOverlayRenderers(state, deps) {
 
     lines.push('')
     lines.push(`  ${chalk.bold('🔀 Proxy')}`)
-    lines.push(`  ${chalk.dim('  ' + '─'.repeat(112))}`)
+    lines.push(`  ${chalk.dim('  ' + '─'.repeat(separatorWidth))}`)
     lines.push('')
 
     const proxyEnabledBullet = state.settingsCursor === proxyEnabledRowIdx ? chalk.bold.cyan('  ❯ ') : chalk.dim('    ')
@@ -251,7 +303,7 @@ export function createOverlayRenderers(state, deps) {
 
     lines.push('')
     lines.push(`  ${chalk.bold('📋 Profiles')}  ${chalk.dim(savedProfiles.length > 0 ? `(${savedProfiles.length} saved)` : '(none — press Shift+S in main view to save)')}`)
-    lines.push(`  ${chalk.dim('  ' + '─'.repeat(112))}`)
+    lines.push(`  ${chalk.dim('  ' + '─'.repeat(separatorWidth))}`)
     lines.push('')
 
     if (savedProfiles.length === 0) {
@@ -287,6 +339,18 @@ export function createOverlayRenderers(state, deps) {
     }
     lines.push('')
 
+    // 📖 Footer with credits
+    lines.push('')
+    lines.push(
+      chalk.dim('  ') +
+      chalk.rgb(255, 150, 200)('Made with 💖 & ☕ by ') +
+      chalk.cyanBright('\x1b]8;;https://github.com/vava-nessa\x1b\\vava-nessa\x1b]8;;\x1b\\') +
+      chalk.dim('  •  ☕ ') +
+      chalk.rgb(255, 200, 100)('\x1b]8;;https://buymeacoffee.com/vavanessadev\x1b\\Buy me a coffee\x1b]8;;\x1b\\') +
+      chalk.dim('  •  ') +
+      'Esc to close'
+    )
+
     // 📖 Keep selected Settings row visible on small terminals by scrolling the overlay viewport.
     const targetLine = cursorLineByRow[state.settingsCursor] ?? 0
     state.settingsScrollOffset = keepOverlayTargetVisible(
@@ -298,7 +362,7 @@ export function createOverlayRenderers(state, deps) {
     const { visible, offset } = sliceOverlayLines(lines, state.settingsScrollOffset, state.terminalRows)
     state.settingsScrollOffset = offset
 
-    const tintedLines = tintOverlayLines(visible, SETTINGS_OVERLAY_BG)
+    const tintedLines = tintOverlayLines(visible, SETTINGS_OVERLAY_BG, state.terminalCols)
     const cleared = tintedLines.map(l => l + EL)
     return cleared.join('\n')
   }
@@ -341,7 +405,11 @@ export function createOverlayRenderers(state, deps) {
       : '—'
 
     lines.push('')
-    lines.push(`  ${chalk.bold('🔌 Install Endpoints')}  ${chalk.dim('— install provider catalogs into supported coding tools')}`)
+    // 📖 Branding header
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold('🔌 Install Endpoints')}`)
+    lines.push('')
+    lines.push(chalk.dim('  — install provider catalogs into supported coding tools'))
     if (state.installEndpointsErrorMsg) {
       lines.push(`  ${chalk.yellow(state.installEndpointsErrorMsg)}`)
     }
@@ -460,7 +528,7 @@ export function createOverlayRenderers(state, deps) {
     const { visible, offset } = sliceOverlayLines(lines, state.installEndpointsScrollOffset, state.terminalRows)
     state.installEndpointsScrollOffset = offset
 
-    const tintedLines = tintOverlayLines(visible, SETTINGS_OVERLAY_BG)
+    const tintedLines = tintOverlayLines(visible, SETTINGS_OVERLAY_BG, state.terminalCols)
     const cleared = tintedLines.map((line) => line + EL)
     return cleared.join('\n')
   }
@@ -471,9 +539,12 @@ export function createOverlayRenderers(state, deps) {
   function renderHelp() {
     const EL = '\x1b[K'
     const lines = []
+
+    // 📖 Branding header
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold('❓ Help & Keyboard Shortcuts')}`)
     lines.push('')
-    lines.push(`  ${chalk.bold('❓ Keyboard Shortcuts')}  ${chalk.dim('— ↑↓ / PgUp / PgDn / Home / End scroll • K or Esc close')}`)
-    lines.push('')
+    lines.push(`  ${chalk.dim('— ↑↓ / PgUp / PgDn / Home / End scroll • K or Esc close')}`)
     lines.push(`  ${chalk.bold('Columns')}`)
     lines.push('')
     lines.push(`  ${chalk.cyan('Rank')}        SWE-bench rank (1 = best coding score)  ${chalk.dim('Sort:')} ${chalk.yellow('R')}`)
@@ -580,7 +651,7 @@ export function createOverlayRenderers(state, deps) {
     // 📖 Help overlay can be longer than viewport, so keep a dedicated scroll offset.
     const { visible, offset } = sliceOverlayLines(lines, state.helpScrollOffset, state.terminalRows)
     state.helpScrollOffset = offset
-    const tintedLines = tintOverlayLines(visible, HELP_OVERLAY_BG)
+    const tintedLines = tintOverlayLines(visible, HELP_OVERLAY_BG, state.terminalCols)
     const cleared = tintedLines.map(l => l + EL)
     return cleared.join('\n')
   }
@@ -592,14 +663,19 @@ export function createOverlayRenderers(state, deps) {
   function renderLog() {
     const EL = '\x1b[K'
     const lines = []
+
+    // 📖 Branding header
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold('📋 Request Log')}`)
     lines.push('')
-    lines.push(`  ${chalk.bold('📋 Request Log')}  ${chalk.dim('— recent requests • ↑↓ scroll • X or Esc close')}`)
+    lines.push(chalk.dim('  — recent requests • ↑↓ scroll • A toggle all/500 • X or Esc close'))
     lines.push(chalk.dim('  Works only when the multi-account proxy is enabled and requests go through it.'))
     lines.push(chalk.dim('  Direct provider launches do not currently write into this log.'))
-    lines.push('')
 
     // 📖 Load recent log entries — bounded read, newest-first, malformed lines skipped.
-    const logRows = loadRecentLogs({ limit: 200 })
+    // 📖 Show up to 500 entries by default, or all if logShowAll is true.
+    const logLimit = state.logShowAll ? Number.MAX_SAFE_INTEGER : 500
+    const logRows = loadRecentLogs({ limit: logLimit })
     const totalTokens = logRows.reduce((sum, row) => sum + (Number(row.tokens) || 0), 0)
 
     if (logRows.length === 0) {
@@ -627,8 +703,15 @@ export function createOverlayRenderers(state, deps) {
       const hStatus = chalk.dim('Status'.padEnd(W_STATUS))
       const hTok    = chalk.dim('Tokens Used'.padEnd(W_TOKENS))
       const hLat    = chalk.dim('Latency'.padEnd(W_LAT))
+
+      // 📖 Show mode indicator (all vs limited)
+      const modeBadge = state.logShowAll
+        ? chalk.yellow.bold('ALL')
+        : chalk.cyan.bold('500')
+      const countBadge = chalk.dim(`Showing ${logRows.length} entries`)
+
       lines.push(`  ${hTime}  ${hProv}  ${hModel}  ${hRoute}  ${hStatus}  ${hTok}  ${hLat}`)
-      lines.push(chalk.dim('  ' + '─'.repeat(W_TIME + W_PROV + W_MODEL + W_ROUTE + W_STATUS + W_TOKENS + W_LAT + 12)))
+      lines.push(`  ${chalk.dim('─'.repeat(W_TIME + W_PROV + W_MODEL + W_ROUTE + W_STATUS + W_TOKENS + W_LAT + 12))}  ${modeBadge}  ${countBadge}`)
 
       for (const row of logRows) {
         // 📖 Format time as HH:MM:SS (strip the date part for compactness)
@@ -645,15 +728,33 @@ export function createOverlayRenderers(state, deps) {
           ? `${requestedModelLabel} → ${row.model}`
           : row.model
 
-        // 📖 Color-code status
+        // 📖 Color-code status with distinct colors for each error type
         let statusCell
         const sc = String(row.status)
         if (sc === '200') {
           statusCell = chalk.greenBright(sc.padEnd(W_STATUS))
+        } else if (sc === '404') {
+          statusCell = chalk.rgb(139, 0, 0).bold(sc.padEnd(W_STATUS))  // Dark red for 404
+        } else if (sc === '400') {
+          statusCell = chalk.hex('#8B008B').bold(sc.padEnd(W_STATUS))  // Dark magenta
+        } else if (sc === '401') {
+          statusCell = chalk.hex('#9932CC').bold(sc.padEnd(W_STATUS))  // Dark orchid
+        } else if (sc === '403') {
+          statusCell = chalk.hex('#BA55D3').bold(sc.padEnd(W_STATUS))  // Medium orchid
+        } else if (sc === '413') {
+          statusCell = chalk.hex('#FF6347').bold(sc.padEnd(W_STATUS))  // Tomato red
         } else if (sc === '429') {
-          statusCell = chalk.yellow(sc.padEnd(W_STATUS))
-        } else if (sc.startsWith('5') || sc === 'error') {
-          statusCell = chalk.red(sc.padEnd(W_STATUS))
+          statusCell = chalk.hex('#FFB90F').bold(sc.padEnd(W_STATUS))  // Dark orange
+        } else if (sc === '500') {
+          statusCell = chalk.hex('#DC143C').bold(sc.padEnd(W_STATUS))  // Crimson
+        } else if (sc === '502') {
+          statusCell = chalk.hex('#C71585').bold(sc.padEnd(W_STATUS))  // Medium violet red
+        } else if (sc === '503') {
+          statusCell = chalk.hex('#9370DB').bold(sc.padEnd(W_STATUS))  // Medium purple
+        } else if (sc.startsWith('5')) {
+          statusCell = chalk.magenta(sc.padEnd(W_STATUS))  // Other 5xx - magenta
+        } else if (sc === '0') {
+          statusCell = chalk.hex('#696969')(sc.padEnd(W_STATUS))  // Dim gray for timeout
         } else {
           statusCell = chalk.dim(sc.padEnd(W_STATUS))
         }
@@ -664,18 +765,47 @@ export function createOverlayRenderers(state, deps) {
           ? `SWITCHED ↻ ${row.switchReason || 'fallback'}`
           : 'direct'
 
+        // 📖 Detect failed requests with zero tokens - these get special red highlighting
+        const isFailedWithZeroTokens = row.status !== '200' && (!row.tokens || Number(row.tokens) === 0)
+
         const timeCell  = chalk.dim(timeStr.slice(0, W_TIME).padEnd(W_TIME))
-        const provCell  = chalk.cyan(row.provider.slice(0, W_PROV).padEnd(W_PROV))
-        const modelCell = row.switched
-          ? chalk.bold.rgb(255, 210, 90)(displayModel.slice(0, W_MODEL).padEnd(W_MODEL))
-          : chalk.white(displayModel.slice(0, W_MODEL).padEnd(W_MODEL))
+        // 📖 Color provider the same way as in the main table (row.provider is already the providerKey, e.g. "nvidia")
+        const providerRgb = PROVIDER_COLOR[row.provider] ?? [105, 190, 245]
+        const provCell  = chalk.bold.rgb(...providerRgb)(row.provider.slice(0, W_PROV).padEnd(W_PROV))
+
+        // 📖 Color model based on status - red for failed requests with zero tokens
+        let modelCell
+        if (isFailedWithZeroTokens) {
+          modelCell = chalk.red.bold(displayModel.slice(0, W_MODEL).padEnd(W_MODEL))
+        } else {
+          const modelColorFn = getModelColorByStatus(row.status)
+          modelCell = row.switched
+            ? chalk.bold.rgb(255, 210, 90)(displayModel.slice(0, W_MODEL).padEnd(W_MODEL))
+            : modelColorFn(displayModel.slice(0, W_MODEL).padEnd(W_MODEL))
+        }
+
         const routeCell = row.switched
           ? chalk.bgRgb(120, 25, 25).yellow.bold(` ${routeLabel.slice(0, W_ROUTE - 2).padEnd(W_ROUTE - 2)} `)
           : chalk.dim(routeLabel.padEnd(W_ROUTE))
-        const tokCell   = chalk.dim(tokStr.padEnd(W_TOKENS))
-        const latCell   = chalk.dim(latStr.padEnd(W_LAT))
 
-        lines.push(`  ${timeCell}  ${provCell}  ${modelCell}  ${routeCell}  ${statusCell}  ${tokCell}  ${latCell}`)
+        // 📖 Colorize tokens - red cross emoji for failed requests with zero tokens
+        let tokCell
+        if (isFailedWithZeroTokens) {
+          tokCell = chalk.red.bold('✗'.padEnd(W_TOKENS))
+        } else {
+          tokCell = colorizeTokens(row.tokens, tokStr.padEnd(W_TOKENS))
+        }
+
+        // 📖 Colorize latency with gradient (green → orange → yellow → red)
+        const latCell = colorizeLatency(row.latency, latStr.padEnd(W_LAT))
+
+        // 📖 Build the row line - add dark red background for failed requests with zero tokens
+        const rowText = `  ${timeCell}  ${provCell}  ${modelCell}  ${routeCell}  ${statusCell}  ${tokCell}  ${latCell}`
+        if (isFailedWithZeroTokens) {
+          lines.push(chalk.bgRgb(40, 0, 0)(rowText))
+        } else {
+          lines.push(rowText)
+        }
       }
     }
 
@@ -685,7 +815,7 @@ export function createOverlayRenderers(state, deps) {
 
     const { visible, offset } = sliceOverlayLines(lines, state.logScrollOffset, state.terminalRows)
     state.logScrollOffset = offset
-    const tintedLines = tintOverlayLines(visible, LOG_OVERLAY_BG)
+    const tintedLines = tintOverlayLines(visible, LOG_OVERLAY_BG, state.terminalCols)
     const cleared = tintedLines.map(l => l + EL)
     return cleared.join('\n')
   }
@@ -698,8 +828,12 @@ export function createOverlayRenderers(state, deps) {
     const EL = '\x1b[K'
     const lines = []
 
+    // 📖 Branding header
+    lines.push('')
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold('🎯 Smart Recommend')}`)
     lines.push('')
-    lines.push(`  ${chalk.bold('🎯 Smart Recommend')}  ${chalk.dim('— find the best model for your task')}`)
+    lines.push(chalk.dim('  — find the best model for your task'))
     lines.push('')
 
     if (state.recommendPhase === 'questionnaire') {
@@ -825,7 +959,7 @@ export function createOverlayRenderers(state, deps) {
     lines.push('')
     const { visible, offset } = sliceOverlayLines(lines, state.recommendScrollOffset, state.terminalRows)
     state.recommendScrollOffset = offset
-    const tintedLines = tintOverlayLines(visible, RECOMMEND_OVERLAY_BG)
+    const tintedLines = tintOverlayLines(visible, RECOMMEND_OVERLAY_BG, state.terminalCols)
     const cleared2 = tintedLines.map(l => l + EL)
     return cleared2.join('\n')
   }
@@ -898,8 +1032,8 @@ export function createOverlayRenderers(state, deps) {
     const EL = '\x1b[K'
     const lines = []
 
-    // 📖 Calculate available space for multi-line input
-    const maxInputWidth = OVERLAY_PANEL_WIDTH - 8 // 8 = padding (4 spaces each side)
+    // 📖 Calculate available space for multi-line input (dynamic based on terminal width)
+    const maxInputWidth = state.terminalCols - 8 // 8 = padding (4 spaces each side)
     const maxInputLines = 10 // Show up to 10 lines of input
     
     // 📖 Split buffer into lines for display (with wrapping)
@@ -923,10 +1057,13 @@ export function createOverlayRenderers(state, deps) {
 
     const inputLines = wrapText(state.featureRequestBuffer, maxInputWidth)
     const displayLines = inputLines.slice(0, maxInputLines)
-    
-    // 📖 Header
+
+    // 📖 Branding header
     lines.push('')
-    lines.push(`  ${chalk.bold.rgb(57, 255, 20)('📝 Feature Request')}  ${chalk.dim('— send anonymous feedback to the project team')}`)
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold.rgb(57, 255, 20)('📝 Feature Request')}`)
+    lines.push('')
+    lines.push(chalk.dim('  — send anonymous feedback to the project team'))
     lines.push('')
     
     // 📖 Status messages (if any)
@@ -989,8 +1126,8 @@ export function createOverlayRenderers(state, deps) {
     lines.push(chalk.dim('  Enter Send  •  Esc Cancel  •  Backspace Delete'))
 
     // 📖 Apply overlay tint and return
-    const FEATURE_REQUEST_OVERLAY_BG = chalk.bgRgb(26, 26, 46) // Dark blue-ish background (RGB: 26, 26, 46)
-    const tintedLines = tintOverlayLines(lines, FEATURE_REQUEST_OVERLAY_BG)
+    const FEATURE_REQUEST_OVERLAY_BG = chalk.bgRgb(0, 0, 0) // Dark blue-ish background (RGB: 26, 26, 46)
+    const tintedLines = tintOverlayLines(lines, FEATURE_REQUEST_OVERLAY_BG, state.terminalCols)
     const cleared = tintedLines.map(l => l + EL)
     return cleared.join('\n')
   }
@@ -1002,8 +1139,8 @@ export function createOverlayRenderers(state, deps) {
     const EL = '\x1b[K'
     const lines = []
 
-    // 📖 Calculate available space for multi-line input
-    const maxInputWidth = OVERLAY_PANEL_WIDTH - 8 // 8 = padding (4 spaces each side)
+    // 📖 Calculate available space for multi-line input (dynamic based on terminal width)
+    const maxInputWidth = state.terminalCols - 8 // 8 = padding (4 spaces each side)
     const maxInputLines = 10 // Show up to 10 lines of input
     
     // 📖 Split buffer into lines for display (with wrapping)
@@ -1027,10 +1164,13 @@ export function createOverlayRenderers(state, deps) {
 
     const inputLines = wrapText(state.bugReportBuffer, maxInputWidth)
     const displayLines = inputLines.slice(0, maxInputLines)
-    
-    // 📖 Header
+
+    // 📖 Branding header
+    lines.push('')
+    lines.push(`  ${chalk.cyanBright('🚀')} ${chalk.bold.cyanBright('free-coding-models')} ${chalk.dim(`v${LOCAL_VERSION}`)}`)
+    lines.push(`  ${chalk.bold.rgb(255, 87, 51)('🐛 Bug Report')}`)
     lines.push('')
-    lines.push(`  ${chalk.bold.rgb(255, 87, 51)('🐛 Bug Report')}  ${chalk.dim('— send anonymous bug reports to the project team')}`)
+    lines.push(chalk.dim('  — send anonymous bug reports to the project team'))
     lines.push('')
     
     // 📖 Status messages (if any)
@@ -1093,8 +1233,8 @@ export function createOverlayRenderers(state, deps) {
     lines.push(chalk.dim('  Enter Send  •  Esc Cancel  •  Backspace Delete'))
 
     // 📖 Apply overlay tint and return
-    const BUG_REPORT_OVERLAY_BG = chalk.bgRgb(46, 20, 20) // Dark red-ish background (RGB: 46, 20, 20)
-    const tintedLines = tintOverlayLines(lines, BUG_REPORT_OVERLAY_BG)
+    const BUG_REPORT_OVERLAY_BG = chalk.bgRgb(0, 0, 0) // Dark red-ish background (RGB: 46, 20, 20)
+    const tintedLines = tintOverlayLines(lines, BUG_REPORT_OVERLAY_BG, state.terminalCols)
     const cleared = tintedLines.map(l => l + EL)
     return cleared.join('\n')
   }

package/src/provider-metadata.js

@@ -80,21 +80,21 @@ export const PROVIDER_METADATA = {
     color: chalk.rgb(178, 235, 190),
     signupUrl: 'https://build.nvidia.com',
     signupHint: 'Profile → API Keys → Generate',
-    rateLimits: 'Free tier (provider quota by model)',
+    rateLimits: 'Free tier: 40 requests/min (no credit card needed)',
   },
   groq: {
     label: 'Groq',
     color: chalk.rgb(255, 204, 188),
     signupUrl: 'https://console.groq.com/keys',
     signupHint: 'API Keys → Create API Key',
-    rateLimits: 'Free dev tier (provider quota)',
+    rateLimits: 'Free tier: 30‑50 RPM per model (varies by model)',
   },
   cerebras: {
     label: 'Cerebras',
     color: chalk.rgb(179, 229, 252),
     signupUrl: 'https://cloud.cerebras.ai',
     signupHint: 'API Keys → Create',
-    rateLimits: 'Free dev tier (provider quota)',
+    rateLimits: 'Free tier: generous (developer tier 10× higher limits)',
   },
   sambanova: {
     label: 'SambaNova',
@@ -108,7 +108,8 @@ export const PROVIDER_METADATA = {
     color: chalk.rgb(225, 190, 231),
     signupUrl: 'https://openrouter.ai/keys',
     signupHint: 'API Keys → Create',
-    rateLimits: '50 req/day, 20/min (:free shared quota)',
+    rateLimits: 'Free on :free: 50/day <$10, 1000/day ≥$10 (20 req/min)',
+    detailedLimits: 'No credits (or <$10) → 50 requests/day (20 req/min)\n≥ $10 in credits → 1000 requests/day (20 req/min)\n• Free models (:free) never consume credits\n• Failed requests count toward quota\n• Quota resets daily at midnight UTC\n• Free-tier models may be rate-limited during peak hours',
   },
   huggingface: {
     label: 'Hugging Face Inference',
@@ -124,21 +125,21 @@ export const PROVIDER_METADATA = {
     color: chalk.rgb(187, 222, 251),
     signupUrl: 'https://replicate.com/account/api-tokens',
     signupHint: 'Account → API Tokens',
-    rateLimits: 'Developer free quota',
+    rateLimits: 'Free tier: 6 req/min (no payment) – up to 3,000 RPM (API) / 600 RPM (predictions) with payment',
   },
   deepinfra: {
     label: 'DeepInfra',
     color: chalk.rgb(178, 223, 219),
     signupUrl: 'https://deepinfra.com/login',
     signupHint: 'Login → API keys',
-    rateLimits: 'Free dev tier (low-latency quota)',
+    rateLimits: 'Free tier: 200 concurrent requests (default)',
   },
   fireworks: {
     label: 'Fireworks AI',
     color: chalk.rgb(255, 205, 210),
     signupUrl: 'https://fireworks.ai',
     signupHint: 'Create account → Generate API key',
-    rateLimits: '$1 free credits (new dev accounts)',
+    rateLimits: 'Free tier: $1 credits – 10 req/min without payment method (full limits with payment)',
   },
   codestral: {
     label: 'Mistral Codestral',

package/src/render-helpers.js

@@ -106,13 +106,15 @@ export function padEndDisplay(str, width) {
   return str + ' '.repeat(need)
 }
 
-// 📖 tintOverlayLines: Tint overlay lines with a fixed dark panel width so the background is clearly visible.
-// 📖 Applies bgColor to each line and pads to OVERLAY_PANEL_WIDTH for consistent panel look.
-export function tintOverlayLines(lines, bgColor) {
+// 📖 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.
+export function tintOverlayLines(lines, bgColor, terminalCols = null) {
+  const panelWidth = terminalCols || OVERLAY_PANEL_WIDTH
   return lines.map((line) => {
     const text = String(line)
     const visibleWidth = stripAnsi(text).length
-    const padding = ' '.repeat(Math.max(0, OVERLAY_PANEL_WIDTH - visibleWidth))
+    const padding = ' '.repeat(Math.max(0, panelWidth - visibleWidth))
     return bgColor(text + padding)
   })
 }

package/src/render-table.js

@@ -59,7 +59,8 @@ const { version: LOCAL_VERSION } = require('../package.json')
 
 // 📖 Provider column palette: soft pastel rainbow so each provider stays easy
 // 📖 to spot without turning the table into a harsh neon wall.
-const PROVIDER_COLOR = {
+// 📖 Exported for use in overlays (settings screen) and logs.
+export const PROVIDER_COLOR = {
   nvidia: [178, 235, 190],
   groq: [255, 204, 188],
   cerebras: [179, 229, 252],
@@ -170,11 +171,6 @@ export function renderTable(results, pendingPings, frame, cursor = null, sortCol
     }
   }
 
-  let configuredBadge = ''
-  if (hideUnconfiguredModels) {
-    configuredBadge = ` ${activeHeaderBadge('CONFIGURED ONLY')}`
-  }
-
   // 📖 Profile badge — shown when a named profile is active (Shift+P to cycle, Shift+S to save)
   let profileBadge = ''
   if (activeProfile) {
@@ -227,7 +223,8 @@ export function renderTable(results, pendingPings, frame, cursor = null, sortCol
   const sorted = sortResultsWithPinnedFavorites(visibleResults, sortColumn, sortDirection)
 
   const lines = [
-    `  ${chalk.greenBright.bold(`✅ Free-Coding-Models v${LOCAL_VERSION}`)}${modeBadge}${pingControlBadge}${tierBadge}${originBadge}${configuredBadge}${profileBadge}${chalk.reset('')}   ` +
+    `  ${chalk.cyanBright.bold(`🚀 free-coding-models v${LOCAL_VERSION}`)}${modeBadge}${pingControlBadge}${tierBadge}${originBadge}${profileBadge}${chalk.reset('')}   ` +
+      chalk.dim('📦 ') + chalk.cyanBright.bold(`${completedPings}/${totalVisible}`) + chalk.dim('  ') +
       chalk.greenBright(`✅ ${up}`) + chalk.dim(' up  ') +
       chalk.yellow(`⏳ ${timeout}`) + chalk.dim(' timeout  ') +
       chalk.red(`❌ ${down}`) + chalk.dim(' down  ') +
@@ -660,6 +657,9 @@ export function renderTable(results, pendingPings, frame, cursor = null, sortCol
     '🤝 ' +
     chalk.rgb(255, 165, 0)('\x1b]8;;https://github.com/vava-nessa/free-coding-models/graphs/contributors\x1b\\Contributors\x1b]8;;\x1b\\') +
     chalk.dim('  •  ') +
+    '☕ ' +
+    chalk.rgb(255, 200, 100)('\x1b]8;;https://buymeacoffee.com/vavanessadev\x1b\\Buy me a coffee\x1b]8;;\x1b\\') +
+    chalk.dim('  •  ') +
     '💬 ' +
     chalk.rgb(200, 150, 255)('\x1b]8;;https://discord.gg/5MbTnDC3Md\x1b\\Discord\x1b]8;;\x1b\\') +
     chalk.dim(' → ') +