@pellux/goodvibes-tui 0.29.0 → 1.1.0

package/src/renderer/model-picker-overlay.ts

@@ -1,504 +1,13 @@
-import { type Line } from '../types/grid.ts';
-import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
-import { abbreviateCount } from '../utils/format-number.ts';
-import type { ModelPickerModal } from '../input/model-picker.ts';
-import { EFFORT_DESCRIPTIONS } from '@pellux/goodvibes-sdk/platform/providers';
-import { getQualityTier, getQualityTierFromScore } from '@pellux/goodvibes-sdk/platform/providers';
-import {
-  createOverlayBoxLayout,
-  createOverlayContentLine,
-  createOverlayFilledBorderLine,
-  DEFAULT_OVERLAY_PALETTE,
-  OVERLAY_GLYPHS,
-  putOverlayText,
-} from './overlay-box.ts';
-import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
-import { formatHints, type HintSpec } from './hint-grammar.ts';
-
-/** Format a context window number into a short human-readable string. */
-function fmtContext(n: number): string {
-  return abbreviateCount(n, { rounding: 'round', decimals: 0 });
-}
-
-/** Title text per picker mode. */
-const MODE_TITLES: Record<string, string> = {
-  model: 'Select Model',
-  provider: 'Select Provider',
-  effort: 'Select Effort Level',
-  contextCap: 'Set Context Window',
-};
-
 /**
  * Number of fixed chrome lines in the model-picker overlay (title + search + divider + detail×2 + footer).
  * Used by callers to compute maxVisible item rows.
- */
-export const MODEL_PICKER_CHROME_LINES = 7;
-
-const renderCache = new WeakMap<ModelPickerModal, { key: string; lines: Line[] }>();
-const objectIds = new WeakMap<object, number>();
-let nextObjectId = 1;
-
-function putRowText(line: Line, startX: number, maxWidth: number, text: string, fg: string, bg = '', bold = false, dim = false): void {
-  putOverlayText(line, startX, maxWidth, text, { fg, bg, bold, dim });
-}
-
-/**
- * Render the model picker modal as Line[] for overlay in the viewport.
- * Handles model, provider, and effort modes.
  *
- * @param maxVisible - Maximum number of item rows to show (controls the scroll window).
- *   Derived from viewport height minus chrome lines. Defaults to 20.
+ * WO-206: this file used to also hold `renderModelPickerOverlay`, the
+ * overlay-style model-picker renderer. It was superseded by
+ * `renderModelWorkspace` (model-workspace.ts) — conversation-overlays.ts
+ * routes `input.modelPicker.active` there, not here — and had no remaining
+ * non-test import site, so it (and its dedicated unit/golden tests) were
+ * removed. This constant is still live: handler-picker-routes.ts uses it to
+ * size the current workspace's visible-row window.
  */
-export function renderModelPickerOverlay(
-  picker: ModelPickerModal,
-  width: number,
-  maxVisible = 20,
-  viewportHeight?: number,
-): Line[] {
-  const cacheKey = getRenderCacheKey(picker, width, maxVisible, viewportHeight);
-  const cached = renderCache.get(picker);
-  if (cached?.key === cacheKey) return cached.lines;
-
-  const lines: Line[] = [];
-  const metrics = getOverlaySurfaceMetrics(width, viewportHeight ?? 24, {
-    chromeRows: MODEL_PICKER_CHROME_LINES,
-    maxWidth: 72,
-    minContentRows: 6,
-    maxContentRows: Math.max(10, maxVisible),
-  });
-  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
-  const contentW = layout.innerWidth;
-  const borderFg = DEFAULT_OVERLAY_PALETTE.borderFg;
-  const titleFg = DEFAULT_OVERLAY_PALETTE.titleFg;
-  const bodyFg = DEFAULT_OVERLAY_PALETTE.bodyFg;
-  const mutedFg = DEFAULT_OVERLAY_PALETTE.mutedFg;
-  const selectedBg = DEFAULT_OVERLAY_PALETTE.selectedBg;
-
-  // ── Title bar ───────────────────────────────────────────────────────────────────────
-  const titleLine = createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.topLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.topRight, borderFg, DEFAULT_OVERLAY_PALETTE.titleBg);
-  putRowText(
-    titleLine,
-    layout.margin + 2,
-    layout.width - 4,
-    truncateDisplay((MODE_TITLES[picker.mode] ?? MODE_TITLES.model).replace(/^─\s*/, '').trim(), layout.width - 4),
-    titleFg,
-    '',
-    true,
-  );
-  lines.push(titleLine);
-
-  // ── Search bar (model and provider modes) ────────────────────────────────────
-  if (picker.mode === 'model' || picker.mode === 'provider') {
-    const searchLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.inputBg);
-    const searchPrefix = '/ ';
-    const queryDisplay = picker.query + (picker.searchFocused ? OVERLAY_GLYPHS.cursor : '');
-    let filterTag = '';
-    let filterTagW = 0;
-    if (picker.mode === 'model') {
-      // Category filter indicator — model mode only
-      const filterLabels: Record<string, string> = { all: 'All', free: 'Free', paid: 'Paid', subscription: 'Sub' };
-      const filterLabel = filterLabels[picker.categoryFilter] ?? 'All';
-      filterTag = `[${filterLabel}]`;
-      filterTagW = getDisplayWidth(filterTag);
-    }
-    const maxQueryW = contentW - getDisplayWidth(searchPrefix) - filterTagW - (filterTagW > 0 ? 2 : 0);
-    const queryTrunc = getDisplayWidth(queryDisplay) > maxQueryW
-      ? truncateDisplay(queryDisplay, maxQueryW)
-      : queryDisplay;
-    let rowX = layout.margin + 2;
-    putRowText(searchLine, rowX, getDisplayWidth(searchPrefix), searchPrefix, picker.searchFocused ? bodyFg : mutedFg);
-    rowX += getDisplayWidth(searchPrefix);
-    const queryAreaWidth = filterTag
-      ? Math.max(0, contentW - getDisplayWidth(searchPrefix) - filterTagW - 1)
-      : Math.max(0, contentW - getDisplayWidth(searchPrefix));
-    putRowText(searchLine, rowX, queryAreaWidth, fitDisplay(queryTrunc, queryAreaWidth), picker.query.length > 0 || picker.searchFocused ? '#ffffff' : mutedFg);
-    if (filterTag) {
-      putRowText(
-        searchLine,
-        layout.margin + 2 + contentW - filterTagW,
-        filterTagW,
-        filterTag,
-        mutedFg,
-      );
-    }
-    lines.push(searchLine);
-
-    // Thin divider under search bar
-    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-  } else {
-    lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-  }
-
-  if (picker.mode === 'model') {
-    // ── Model list (grouped, with scroll window) ────────────────────────────────────
-    const filtered = picker.getFilteredModels();
-    if (filtered.length === 0) {
-      const msg = picker.query.length > 0
-        ? `No models match "${picker.query.length > 20 ? picker.query.slice(0, 20) + '...' : picker.query}"`
-        : 'No models available';
-      const noModels = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-      putRowText(noModels, layout.margin + 2, contentW, fitDisplay(truncateDisplay(msg, contentW), contentW), '244', '', false, true);
-      lines.push(noModels);
-    } else {
-      // Determine the visible slice [scrollOffset, scrollOffset + maxVisible)
-      const scrollOffset = Math.max(0, Math.min(picker.scrollOffset, Math.max(0, filtered.length - maxVisible)));
-      const visibleEnd = Math.min(filtered.length, scrollOffset + maxVisible);
-      const visibleModels = filtered.slice(scrollOffset, visibleEnd);
-
-      // Scroll indicators
-      if (scrollOffset > 0) {
-        const upHint = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-        putRowText(upHint, layout.margin + 2, contentW, fitDisplay(`${OVERLAY_GLYPHS.moreAbove} ${scrollOffset} more above`, contentW), mutedFg, '', false, true);
-        lines.push(upHint);
-      }
-
-      let lastGroupKey = '';
-      // Track the absolute index for group header display
-      // Use getModelGroupKey for synthetic sub-group support (Top Models / All Synthetic)
-      for (let i = 0; i < visibleModels.length; i++) {
-        const model = visibleModels[i];
-        const absIdx = scrollOffset + i; // index into filtered[] for selectedIndex comparison
-
-        // Group header — show when group key changes within the visible window
-        // For the first visible item, always check if header is needed
-        const groupKey = picker.getModelGroupKey(model);
-        if (groupKey !== lastGroupKey) {
-          const headerRow = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-          putRowText(headerRow, layout.margin + 2, contentW, fitDisplay(`[${groupKey}]`, contentW), '#4488cc');
-          lines.push(headerRow);
-          lastGroupKey = groupKey;
-        }
-
-        const isSelected = absIdx === picker.selectedIndex;
-        const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
-
-        // Pre-compute synthetic info once per model (avoid 3 separate lookups per frame)
-        const synthInfo = model.provider === 'synthetic' ? picker.getSyntheticModelInfo(model.id) : null;
-
-        // Quality tier badge: [S] / [A] / [B] / [C]
-        let tier: string | null = null;
-        if (model.provider === 'synthetic') {
-          if (synthInfo?.bestCompositeScore != null) {
-            tier = getQualityTierFromScore(synthInfo.bestCompositeScore);
-          }
-        } else {
-          const bData = picker.getBenchmarkEntry(model);
-          tier = bData ? getQualityTier(bData.benchmarks) : null;
-        }
-        const tierBadge = tier ? `[${tier}]` : '   ';
-        // Pin marker: keep the Unicode star instead of ASCII fallback
-        const pinStar = picker.pinnedIds.has(model.id) ? '★ ' : '  ';
-        // Free badge: dot marker, not an asterisk
-        const freeBadge = model.tier === 'free' ? '•' : ' ';
-        // Provider count for synthetic models
-        let providerCountStr = '     '; // 5 chars wide (fixed)
-        if (synthInfo) {
-          const countLabel = `(${synthInfo.keyedBackendCount}p)`;
-          providerCountStr = countLabel.padEnd(5);
-        }
-
-        // Layout: indicator(2) + pin(2) + id(maxIdLen) + gap(2) + name(remaining) + provCount(5) + free(1) + tier(3)
-        const maxIdLen = 20;
-        const provCountW = 5;
-        const badgesW = 3 + 1 + 2; // tierBadge(3) + freeBadge(1) + gap(2)
-        const idStr = model.id.length > maxIdLen
-          ? model.id.slice(0, maxIdLen - 3) + '...'
-          : model.id.padEnd(maxIdLen);
-        const remaining = contentW - maxIdLen - 4 - badgesW - 2 - provCountW; // 4 = indicator+pin, 2 = gap before name
-        const nameStr = model.displayName.length > Math.max(0, remaining)
-          ? model.displayName.slice(0, Math.max(0, remaining) - 3) + '...'
-          : model.displayName.padEnd(Math.max(0, remaining));
-
-        const row = createOverlayContentLine(width, layout, borderFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg);
-        let x = layout.margin + 2;
-        const rowText = indicator + pinStar + idStr + '  ' + nameStr + providerCountStr + ' ' + freeBadge + tierBadge;
-        putRowText(row, x, contentW, fitDisplay(truncateDisplay(rowText, contentW), contentW), isSelected ? titleFg : bodyFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg, isSelected);
-        lines.push(row);
-      }
-
-      if (visibleEnd < filtered.length) {
-        const remaining2 = filtered.length - visibleEnd;
-        const downHint = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-        putRowText(downHint, layout.margin + 2, contentW, fitDisplay(`${OVERLAY_GLYPHS.moreBelow} ${remaining2} more below`, contentW), mutedFg, '', false, true);
-        lines.push(downHint);
-      }
-    }
-
-    // ── Divider ────────────────────────────────────────────────────────────────────
-    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-
-    // ── Capability detail for selected model ────────────────────────────────────────────
-    const selected = picker.getSelected();
-    if (selected) {
-      const providerLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-      putRowText(providerLine, layout.margin + 2, contentW, fitDisplay(`Provider: ${selected.provider}`, contentW), '244');
-      lines.push(providerLine);
-
-      // Synthetic models show fallback ladder rungs instead of capabilities.
-      const syntheticChain = selected.provider === 'synthetic' ? picker.getSyntheticChain(selected.id) : null;
-      if (syntheticChain !== null && syntheticChain.length > 0) {
-        const rung0 = syntheticChain[0];
-        const rest = syntheticChain.length - 1;
-        const rung0Base = `  0. ${rung0.provider}/${rung0.model}`;
-        const rung0Label = rest > 0 ? `${rung0Base}  (+${rest} more)` : rung0Base;
-        const chainLine0 = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-        putRowText(chainLine0, layout.margin + 2, contentW, fitDisplay(truncateDisplay(rung0Label, contentW), contentW), '244');
-        lines.push(chainLine0);
-      } else {
-        const caps = selected.capabilities ?? { reasoning: false, multimodal: false, toolCalling: false, codeEditing: false };
-        const ctxStr = `Context: ${fmtContext(selected.contextWindow)}`;
-        const capParts: string[] = [ctxStr];
-        if (caps.reasoning)  capParts.push('Reasoning: \u2713');
-        if (caps.multimodal) capParts.push('Vision: \u2713');
-        if (caps.toolCalling) capParts.push('Tools: \u2713');
-        if (caps.codeEditing) capParts.push('Code: \u2713');
-        const capText = capParts.join('  ');
-        const capLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-        putRowText(capLine, layout.margin + 2, contentW, fitDisplay(truncateDisplay(capText, contentW), contentW), '244');
-        lines.push(capLine);
-      }
-    } else {
-      lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
-      lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
-    }
-  } else if (picker.mode === 'provider') {
-    // ── Provider list (grouped: Popular / All Providers) ───────────────────────────────────
-    const allProviderItems = picker.getItems(); // includes group headers
-    const selectableCount = picker.getFilteredProviders().length;
-    if (selectableCount === 0) {
-      const msg = picker.query.length > 0
-        ? `No providers match "${picker.query.length > 20 ? picker.query.slice(0, 20) + '...' : picker.query}"`
-        : 'No providers available';
-      const noProviders = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-      putRowText(noProviders, layout.margin + 2, contentW, fitDisplay(truncateDisplay(msg, contentW), contentW), '244', '', false, true);
-      lines.push(noProviders);
-    } else {
-      // Build the flat selectable index → item-list-index mapping for scroll tracking
-      // scrollOffset / selectedIndex track selectable items only
-      const providerScrollOffset = Math.max(0, Math.min(picker.scrollOffset, Math.max(0, selectableCount - maxVisible)));
-      const providerVisibleEnd = Math.min(selectableCount, providerScrollOffset + maxVisible);
-
-      // Scroll indicator — items above
-      if (providerScrollOffset > 0) {
-        const upHint = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-        putRowText(upHint, layout.margin + 2, contentW, fitDisplay(`${OVERLAY_GLYPHS.moreAbove} ${providerScrollOffset} more above`, contentW), mutedFg, '', false, true);
-        lines.push(upHint);
-      }
-
-      // Walk all provider items (headers + selectables), rendering only selectables
-      // in [providerScrollOffset, providerVisibleEnd). Headers are shown when the
-      // first selectable item in their group is visible.
-      let selectableIdx = -1;
-      let pendingHeader: string | null = null;
-
-      for (const item of allProviderItems) {
-        if (item.isGroupHeader) {
-          pendingHeader = item.label;
-          continue;
-        }
-        selectableIdx++;
-        if (selectableIdx < providerScrollOffset) {
-          pendingHeader = null; // group header passed, no longer pending
-          continue;
-        }
-        if (selectableIdx >= providerVisibleEnd) break;
-
-        // Emit pending group header before first visible item in the group
-        if (pendingHeader !== null) {
-          const headerRow = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-          putRowText(headerRow, layout.margin + 2, contentW, fitDisplay(`[${pendingHeader}]`, contentW), '#4488cc');
-          lines.push(headerRow);
-          pendingHeader = null;
-        }
-
-        const isSelected = selectableIdx === picker.selectedIndex;
-        const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
-        const checkmark = item.isConfigured ? '✓ ' : '  ';
-        // configuredVia badge: right-aligned short label (env/sub/anon)
-        const viaBadge = item.configuredVia === 'env' ? ' [env]'
-          : item.configuredVia === 'secrets' ? ' [key]'
-          : item.configuredVia === 'subscription' ? ' [sub]'
-          : item.configuredVia === 'anonymous' ? ' [anon]'
-          : '';
-        const badgeW = viaBadge.length;
-        const labelW = contentW - 2 - 2 - badgeW; // indicator(2) + checkmark(2) + badge
-        const labelStr = item.label.length > labelW
-          ? item.label.slice(0, labelW - 3) + '...'
-          : item.label.padEnd(labelW);
-        const row = createOverlayContentLine(width, layout, borderFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg);
-        const rowText = indicator + checkmark + labelStr + viaBadge;
-        putRowText(row, layout.margin + 2, contentW, fitDisplay(truncateDisplay(rowText, contentW), contentW), isSelected ? titleFg : bodyFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg, isSelected);
-        lines.push(row);
-      }
-
-      // Scroll indicator — items below
-      if (providerVisibleEnd < selectableCount) {
-        const remaining2 = selectableCount - providerVisibleEnd;
-        const downHint = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-        putRowText(downHint, layout.margin + 2, contentW, fitDisplay(`${OVERLAY_GLYPHS.moreBelow} ${remaining2} more below`, contentW), mutedFg, '', false, true);
-        lines.push(downHint);
-      }
-    }
-
-    // ── Divider + hint ──────────────────────────────────────────────────────────────────
-    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-    const hintLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-    putRowText(hintLine, layout.margin + 2, contentW, fitDisplay('Select a provider to browse its models', contentW), '244');
-    lines.push(hintLine);
-    lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
-  } else if (picker.mode === 'contextCap') {
-    // ── Context cap input ──────────────────────────────────────────────────────────────
-    const capModel = picker.contextCapPendingModel;
-    const modelName = capModel ? capModel.displayName : 'unknown';
-    const currentCtx = capModel ? fmtContext(capModel.contextWindow) : '?';
-    const provenance = capModel?.contextWindowProvenance ?? 'configured_cap';
-
-    const promptLabel = 'Context window (tokens):';
-    const cursorChar = OVERLAY_GLYPHS.cursor;
-    const inputDisplay = picker.contextCapQuery + cursorChar;
-    const promptRow = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.inputBg);
-    putRowText(promptRow, layout.margin + 2, contentW, fitDisplay(`${promptLabel} ${inputDisplay}`, contentW), '#ffffff');
-    lines.push(promptRow);
-
-    if (picker.contextCapError) {
-      const errRow = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-      putRowText(errRow, layout.margin + 2, contentW, fitDisplay(picker.contextCapError, contentW), '#ff6666');
-      lines.push(errRow);
-    }
-
-    lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
-
-    const hintText = `Leave blank to use default (current: ${currentCtx}, source: ${provenance})`;
-    const hintTrunc = getDisplayWidth(hintText) > contentW
-      ? hintText.slice(0, contentW - 3) + '...'
-      : hintText;
-    const hintRow = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-    putRowText(hintRow, layout.margin + 2, contentW, fitDisplay(hintTrunc, contentW), '244', '', false, true);
-    lines.push(hintRow);
-
-    // Divider + model info
-    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-    const modelInfoLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-    putRowText(modelInfoLine, layout.margin + 2, contentW, fitDisplay(`Model: ${modelName}`, contentW), '244');
-    lines.push(modelInfoLine);
-    lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
-  } else {
-    // ── Effort list ────────────────────────────────────────────────────────────────────────
-    for (let i = 0; i < picker.effortLevels.length; i++) {
-      const level = picker.effortLevels[i];
-      const isSelected = i === picker.selectedIndex;
-      const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
-      const desc = EFFORT_DESCRIPTIONS[level] ?? '';
-      const labelW = 10;
-      const labelStr = level.padEnd(labelW);
-      const remaining = contentW - labelW - 4;
-      const descStr = desc.length > remaining ? desc.slice(0, remaining - 3) + '...' : desc.padEnd(remaining);
-      const row = createOverlayContentLine(width, layout, borderFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg);
-      const rowText = indicator + labelStr + '  ' + descStr;
-      putRowText(row, layout.margin + 2, contentW, fitDisplay(truncateDisplay(rowText, contentW), contentW), isSelected ? titleFg : bodyFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg, isSelected);
-      lines.push(row);
-    }
-
-    // ── Divider + model context ──────────────────────────────────────────────────────
-    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-    const modelName = picker.pendingModel ? picker.pendingModel.displayName : 'unknown';
-    const modelLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-    putRowText(modelLine, layout.margin + 2, contentW, fitDisplay(`Model: ${modelName}`, contentW), '244');
-    lines.push(modelLine);
-    lines.push(createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg));
-  }
-
-  // ── Bottom border with hints ─────────────────────────────────────────────────────────
-  const filterLabelsFooter: Record<string, string> = { all: 'All', free: 'Free', paid: 'Paid', subscription: 'Sub' };
-  const filterLabelFooter = filterLabelsFooter[picker.categoryFilter] ?? 'All';
-  const groupByLabel = picker.groupBy ?? 'provider';
-  const selectedModel = picker.mode === 'model' ? picker.getSelected() : null;
-  const showContextCapHint = selectedModel != null && selectedModel.contextWindowProvenance !== undefined;
-  let hints: string;
-  if (picker.mode === 'model') {
-    // The model-picker box caps at 72 cols, so the footer stays compact: the
-    // list nav (Up/Down/Enter) is the obvious interaction and lives in the
-    // /shortcuts overlay; the footer prioritizes the stateful controls. The
-    // live filter/group value is folded into each key's verb so it stays
-    // adjacent to its control and reads inside the width.
-    const modelHints: HintSpec[] = [{ key: '/', verb: 'Search' }];
-    if (showContextCapHint) modelHints.push({ key: 'Space', verb: 'Ctx' });
-    modelHints.push(
-      { key: 'Tab', verb: `Filter: ${filterLabelFooter}` },
-      { key: 'G', verb: `Group: ${groupByLabel}` },
-      { key: 'Esc', verb: 'Close' },
-    );
-    hints = formatHints(modelHints);
-  } else if (picker.mode === 'contextCap') {
-    hints = formatHints([{ key: 'Enter', verb: 'Confirm' }, { key: 'Esc', verb: 'Cancel' }]);
-  } else {
-    hints = formatHints([{ key: 'Up/Down', verb: 'Move' }, { key: 'Enter', verb: 'Select' }, { key: 'Esc', verb: 'Cancel' }]);
-  }
-  const footerLine = createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.bottomLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.bottomRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-  putRowText(footerLine, layout.margin + 2, contentW, fitDisplay(truncateDisplay(hints, contentW), contentW), mutedFg, '', false, true);
-  lines.push(footerLine);
-
-  renderCache.set(picker, { key: cacheKey, lines });
-  return lines;
-}
-
-function getRenderCacheKey(
-  picker: ModelPickerModal,
-  width: number,
-  maxVisible: number,
-  viewportHeight: number | undefined,
-): string {
-  const base = [
-    width,
-    maxVisible,
-    viewportHeight ?? '',
-    picker.mode,
-    picker.target,
-    picker.query,
-    picker.searchFocused ? 1 : 0,
-    picker.selectedIndex,
-    picker.scrollOffset,
-    picker.categoryFilter,
-    picker.capabilityFilter,
-    picker.availableOnly ? 1 : 0,
-    picker.benchmarkSort,
-    picker.groupBy,
-    keyForSet(picker.pinnedIds),
-    keyForSet(picker.configuredProviders),
-  ];
-
-  if (picker.mode === 'model') {
-    const filtered = picker.getFilteredModels();
-    const selected = filtered[picker.selectedIndex];
-    base.push(objectId(picker.models), objectId(filtered), filtered.length, selected?.registryKey ?? selected?.id ?? '');
-  } else if (picker.mode === 'provider') {
-    const filteredProviders = picker.getFilteredProviders();
-    base.push(objectId(picker.providers), objectId(filteredProviders), filteredProviders.length, keyForMap(picker.configuredViaMap));
-  } else if (picker.mode === 'effort') {
-    base.push(objectId(picker.effortLevels), picker.effortLevels.join('\u001f'), picker.pendingModel?.registryKey ?? picker.pendingModel?.id ?? '');
-  } else if (picker.mode === 'contextCap') {
-    base.push(picker.contextCapQuery, picker.contextCapPendingModel?.registryKey ?? picker.contextCapPendingModel?.id ?? '', picker.contextCapError ?? '');
-  }
-
-  return base.join('\u001e');
-}
-
-function objectId(value: object): number {
-  const existing = objectIds.get(value);
-  if (existing !== undefined) return existing;
-  const next = nextObjectId++;
-  objectIds.set(value, next);
-  return next;
-}
-
-function keyForSet(values: ReadonlySet<string>): string {
-  return values.size === 0 ? '' : [...values].sort().join('\u001f');
-}
-
-function keyForMap(values: ReadonlyMap<string, string | undefined>): string {
-  if (values.size === 0) return '';
-  return [...values.entries()]
-    .sort(([left], [right]) => left.localeCompare(right))
-    .map(([key, value]) => `${key}\u001d${value ?? ''}`)
-    .join('\u001f');
-}
+export const MODEL_PICKER_CHROME_LINES = 7;

package/src/renderer/model-workspace.ts

@@ -10,22 +10,22 @@ import type { ModelPickerModal } from '../input/model-picker.ts';
 import type { ModelPickerTargetInfo } from '../input/model-picker.ts';
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine, createStyledCell } from '../types/grid.ts';
-import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
+import { fitDisplay, getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { abbreviateCount } from '../utils/format-number.ts';
 import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 
 const PALETTE = {
-  border: '#64748b',
+  border: UI_TONES.border,
   title: '#67e8f9',
-  subtitle: '#93c5fd',
-  text: '#e2e8f0',
-  muted: '#94a3b8',
-  dim: '#64748b',
-  selectedBg: '#223049',
+  subtitle: UI_TONES.accent.conversation,
+  text: UI_TONES.fg.primary,
+  muted: UI_TONES.fg.muted,
+  dim: UI_TONES.border,
+  selectedBg: UI_TONES.bg.selected,
   targetBg: '#141b25',
   detailBg: '#121923',
   bodyBg: '#0f141d',
-  footerBg: '#111827',
+  footerBg: UI_TONES.bg.footer,
   good: UI_TONES.state.good,
   warn: UI_TONES.state.warn,
   info: UI_TONES.state.info,
@@ -100,23 +100,8 @@ function drawVertical(line: Line, x: number, bg = ''): void {
   line[x] = createStyledCell(GLYPHS.frame.vertical, { fg: PALETTE.border, bg });
 }
 
-function clipDisplay(text: string, width: number): string {
-  if (width <= 0) return '';
-  let used = 0;
-  let output = '';
-  for (const ch of text) {
-    const chWidth = getDisplayWidth(ch);
-    if (chWidth <= 0) continue;
-    if (used + chWidth > width) break;
-    output += ch;
-    used += chWidth;
-  }
-  return output;
-}
-
 function padDisplay(text: string, width: number): string {
-  const clipped = clipDisplay(text, width);
-  return clipped + ' '.repeat(Math.max(0, width - getDisplayWidth(clipped)));
+  return fitDisplay(text, width, '');
 }
 
 function stableWindow(total: number, selected: number, visible: number): { start: number; end: number } {

package/src/renderer/overlay-box.ts

@@ -53,7 +53,13 @@ export function createOverlayBoxLayout(
   maxWidth: number,
 ): OverlayBoxLayout {
   const resolvedMaxWidth = getOverlayMaxWidth(terminalWidth, margin, maxWidth);
-  const width = Math.max(20, Math.min(terminalWidth - margin * 2, resolvedMaxWidth));
+  // The 20-column floor exists so overlays stay legible on ordinary narrow
+  // terminals, but on a hostile-narrow terminal (terminalWidth smaller than
+  // margin*2 + 20) that floor alone can push the box wider than the real
+  // terminal, walking cells off the right edge of the line array. Clamp the
+  // floored result back down to what actually fits before returning it.
+  const availableWidth = Math.max(1, terminalWidth - margin * 2);
+  const width = Math.min(availableWidth, Math.max(20, Math.min(availableWidth, resolvedMaxWidth)));
   const contentWidth = width - 2;
   const innerWidth = contentWidth - 2;
   return { margin, width, contentWidth, innerWidth };
@@ -128,14 +134,6 @@ export function createOverlayFilledBorderLine(
   return line;
 }
 
-export function createOverlayFrameLine(
-  terminalWidth: number,
-  layout: OverlayBoxLayout,
-  bg = DEFAULT_OVERLAY_PALETTE.bodyBg,
-): Line {
-  return createOverlayContentLine(terminalWidth, layout, DEFAULT_OVERLAY_PALETTE.borderFg, bg);
-}
-
 export const OVERLAY_GLYPHS = {
   topLeft: GLYPHS.frame.topLeft,
   topRight: GLYPHS.frame.topRight,