@pellux/goodvibes-tui 1.20.0 → 1.21.0

package/src/renderer/markdown.ts

@@ -4,6 +4,12 @@ import { renderCodeBlock } from './code-block.ts';
 import { getDisplayWidth } from '../utils/terminal-width.ts';
 import { LAYOUT } from './layout.ts';
 import { activeTheme } from './theme.ts';
+import { renderInlineMarkdown, type InlineToken } from './markdown-inline.ts';
+import { isLikelyTableHeaderRow, isLikelyTableSeparatorRow, renderTable } from './markdown-table.ts';
+
+// Re-exported so existing importers of renderInlineMarkdown keep working after
+// the tokenizer moved to markdown-inline.ts (see that module's header).
+export { renderInlineMarkdown, type InlineToken };
 
 // Transcript tokens are read live per render (const T = activeTheme() at the top
 // of each render function below) so a dark→light repaint re-resolves with no
@@ -15,27 +21,6 @@ export interface MarkdownRenderOptions {
   isStreaming?: boolean;
 }
 
-/** Module-level set of inline markdown special characters (hoisted out of hot loop). */
-const INLINE_SPECIAL_CHARS = new Set(['[', '`', '*', '_', '~']);
-
-function splitTableCells(row: string): string[] {
-  const cells = row.trim().split('|').map((c) => c.trim());
-  if (cells.length > 0 && cells[0] === '') cells.shift();
-  if (cells.length > 0 && cells[cells.length - 1] === '') cells.pop();
-  return cells;
-}
-
-function isLikelyTableSeparatorRow(row: string): boolean {
-  if (!row.includes('|')) return false;
-  const cells = splitTableCells(row);
-  if (cells.length === 0) return false;
-  return cells.every((cell) => /:?-{3,}:?/.test(cell));
-}
-
-function isLikelyTableHeaderRow(row: string): boolean {
-  return splitTableCells(row).length >= 2;
-}
-
 /**
  * renderMarkdown - Parse markdown text into styled Line[].
  * Thin wrapper over renderMarkdownTracked for callers that don't need code-block metadata.
@@ -220,320 +205,6 @@ export function renderMarkdownTracked(
   return { lines, codeBlocks };
 }
 
-/**
- * Strip markdown formatting from text for width measurement.
- * Removes **, *, `, ~~ markers but keeps the inner text.
- */
-function stripMarkdown(text: string): string {
-  return text
-    .replace(/\*\*(.+?)\*\*/g, '$1')  // bold
-    .replace(/\*(.+?)\*/g, '$1')      // italic
-    .replace(/~~(.+?)~~/g, '$1')      // strikethrough
-    .replace(/`(.+?)`/g, '$1');       // inline code
-}
-
-/**
- * Render a markdown table with box-drawing borders.
- * Parses inline markdown in cells, fits to terminal width,
- * truncates long content, and renders with proper styling.
- */
-function renderTable(rows: string[], width: number, indent: number): Line[] {
-  const T = activeTheme();
-  const lines: Line[] = [];
-
-  // Parse rows into cells, skip separator
-  const parsedRows: string[][] = [];
-  let hasSeparator = false;
-  for (const row of rows) {
-    const trimmed = row.trim();
-    if (isLikelyTableSeparatorRow(trimmed)) {
-      hasSeparator = true;
-      continue;
-    }
-    const cells = splitTableCells(trimmed);
-    if (cells.length > 0) parsedRows.push(cells);
-  }
-
-  if (parsedRows.length === 0) return lines;
-
-  const colCount = Math.max(...parsedRows.map(r => r.length));
-  const availW = width - indent;
-
-  // Measure column widths using stripped text (no markdown markers)
-  const naturalWidths: number[] = new Array(colCount).fill(0);
-  for (const row of parsedRows) {
-    for (let c = 0; c < row.length; c++) {
-      naturalWidths[c] = Math.max(naturalWidths[c], getDisplayWidth(stripMarkdown(row[c])));
-    }
-  }
-
-  // Budget: availW minus borders (colCount+1) minus padding (2 per col)
-  const overhead = (colCount + 1) + (colCount * 2);
-  const contentBudget = Math.max(colCount, availW - overhead);
-  const totalNatural = naturalWidths.reduce((a, b) => a + b, 0);
-
-  // Compute final column widths
-  const colWidths: number[] = new Array(colCount).fill(0);
-  if (totalNatural <= contentBudget) {
-    // Everything fits
-    for (let c = 0; c < colCount; c++) colWidths[c] = naturalWidths[c];
-  } else {
-    // Proportionally shrink, with minimum of 4 chars per column
-    const minW = 4;
-    for (let c = 0; c < colCount; c++) {
-      colWidths[c] = Math.max(minW, Math.floor((naturalWidths[c] / totalNatural) * contentBudget));
-    }
-    // Distribute leftover from rounding
-    let used = colWidths.reduce((a, b) => a + b, 0);
-    for (let c = 0; c < colCount && used < contentBudget; c++) {
-      colWidths[c]++;
-      used++;
-    }
-  }
-
-  const bc = '240'; // border color
-
-  // Helper: build a border line
-  const makeBorder = (left: string, mid: string, right: string, horiz: string): Line => {
-    let s = ' '.repeat(indent) + left;
-    for (let c = 0; c < colCount; c++) {
-      s += horiz.repeat(colWidths[c] + 2) + (c < colCount - 1 ? mid : right);
-    }
-    return UIFactory.stringToLine(s, width, { fg: bc });
-  };
-
-  // Helper: render a cell's content with inline markdown into Cell[]
-  const renderCellContent = (raw: string, maxW: number, isHdr: boolean): Cell[] => {
-    const cells: Cell[] = [];
-    const tokens = renderInlineMarkdown(raw);
-    let w = 0;
-
-    for (const token of tokens) {
-      const text = token.text;
-      for (const ch of text) {
-        const cw = getDisplayWidth(ch);
-        if (w + cw > maxW) {
-          // Truncate with ellipsis. If the last cell pushed is a wide-glyph
-          // placeholder (the empty second column of a 2-wide character),
-          // overwriting it in place would leave the wide glyph's first
-          // column dangling next to the ellipsis with no placeholder cell \u2014
-          // step back one more cell so the ellipsis replaces the actual
-          // glyph, not its placeholder.
-          if (cells.length > 0 && cells[cells.length - 1].char === '' && cells.length > 1) {
-            cells.pop();
-          }
-          if (cells.length > 0) cells[cells.length - 1] = createStyledCell('\u2026', cells[cells.length - 1]);
-          return cells;
-        }
-        let style: Partial<Cell> = {};
-        if (token.type === 'code') {
-          style = { fg: T.inlineCodeFg, bold: true };
-        } else if (token.type === 'link') {
-          style = { fg: T.link, underline: true };
-        } else {
-          style = { ...token.style };
-        }
-        if (isHdr) {
-          style.fg = style.fg || T.heading1;
-          style.bold = true;
-        } else {
-          style.fg = style.fg || '252';
-        }
-        cells.push(createStyledCell(ch, style));
-        if (cw === 2) cells.push(createStyledCell('', style)); // wide char placeholder
-        w += cw;
-      }
-    }
-
-    // Pad remaining space
-    while (w < maxW) {
-      cells.push(createStyledCell(' ', isHdr ? { fg: T.heading1 } : { fg: '252' }));
-      w++;
-    }
-    return cells;
-  };
-
-  // Top border
-  lines.push(makeBorder('\u250c', '\u252c', '\u2510', '\u2500'));
-
-  // Rows
-  for (let r = 0; r < parsedRows.length; r++) {
-    const row = parsedRows[r];
-    const isHeader = hasSeparator && r === 0;
-
-    // Build the row line cell-by-cell
-    const line = new Array(width).fill(null).map(() => createStyledCell(' ')) as Cell[];
-    let x = indent;
-
-    // Left border
-    if (x < width) line[x] = createStyledCell('\u2502', { fg: bc });
-    x++;
-
-    for (let c = 0; c < colCount; c++) {
-      // Space before content
-      if (x < width) line[x] = createStyledCell(' ');
-      x++;
-
-      // Cell content
-      const raw = c < row.length ? row[c] : '';
-      const cellContent = renderCellContent(raw, colWidths[c], isHeader);
-      for (const cell of cellContent) {
-        if (x < width) line[x] = cell;
-        x++;
-      }
-
-      // Space after content
-      if (x < width) line[x] = createStyledCell(' ');
-      x++;
-
-      // Column separator
-      if (x < width) line[x] = createStyledCell('\u2502', { fg: bc });
-      x++;
-    }
-
-    lines.push(line);
-
-    // Header separator
-    if (isHeader) {
-      lines.push(makeBorder('\u251c', '\u253c', '\u2524', '\u2500'));
-    }
-  }
-
-  // Bottom border
-  lines.push(makeBorder('\u2514', '\u2534', '\u2518', '\u2500'));
-
-  return lines;
-}
-
-/**
- * Inline markdown token types.
- */
-type InlineToken =
-  | { type: 'text'; text: string; style: Partial<Cell> }
-  | { type: 'code'; text: string }
-  | { type: 'link'; text: string; url: string };
-
-/**
- * renderInlineMarkdown - Parse inline markdown (bold, italic, inline code, links)
- * and return a flat array of tokens with style info.
- */
-export function renderInlineMarkdown(text: string): InlineToken[] {
-  const tokens: InlineToken[] = [];
-  let i = 0;
-
-  while (i < text.length) {
-    // Link: [text](url)
-    if (text[i] === '[') {
-      const closeB = text.indexOf(']', i);
-      if (closeB !== -1 && text[closeB + 1] === '(') {
-        const closeP = text.indexOf(')', closeB + 2);
-        if (closeP !== -1) {
-          const linkText = text.slice(i + 1, closeB);
-          const url = text.slice(closeB + 2, closeP);
-          tokens.push({ type: 'link', text: linkText, url });
-          i = closeP + 1;
-          continue;
-        }
-      }
-    }
-
-    // Inline code: `code`
-    if (text[i] === '`') {
-      const end = text.indexOf('`', i + 1);
-      if (end !== -1) {
-        tokens.push({ type: 'code', text: text.slice(i + 1, end) });
-        i = end + 1;
-        continue;
-      }
-    }
-
-    // Bold+italic: ***text***
-    if (text.slice(i, i + 3) === '***') {
-      const end = text.indexOf('***', i + 3);
-      if (end !== -1) {
-        tokens.push({ type: 'text', text: text.slice(i + 3, end), style: { bold: true, italic: true } });
-        i = end + 3;
-        continue;
-      }
-      // No closing *** found — emit the leading * as plain text so the ** bold
-      // check can handle the remaining ** on the next iteration.
-      tokens.push({ type: 'text', text: '*', style: {} });
-      i += 1;
-      continue;
-    }
-
-    // Bold: **text**
-    if (text.slice(i, i + 2) === '**') {
-      const end = text.indexOf('**', i + 2);
-      if (end !== -1) {
-        tokens.push({ type: 'text', text: text.slice(i + 2, end), style: { bold: true } });
-        i = end + 2;
-        continue;
-      }
-    }
-
-    // Italic: *text* or _text_
-    // Guard: text[i - 1] !== '*' prevents the second * of ** from starting italic.
-    // Guard: text[i + 1] !== text[i] prevents the first * of ** (or _ of __) from
-    // starting italic when bold/underscore-bold detection failed (e.g. unclosed **).
-    if (
-      (text[i] === '*' || text[i] === '_') &&
-      text[i - 1] !== text[i] &&
-      text[i + 1] !== text[i]
-    ) {
-      const closer = text[i];
-      const end = text.indexOf(closer, i + 1);
-      if (end !== -1 && end > i + 1) {
-        tokens.push({ type: 'text', text: text.slice(i + 1, end), style: { italic: true } });
-        i = end + 1;
-        continue;
-      }
-    }
-
-    // Strikethrough: ~~text~~
-    if (text.slice(i, i + 2) === '~~') {
-      const end = text.indexOf('~~', i + 2);
-      if (end !== -1) {
-        tokens.push({ type: 'text', text: text.slice(i + 2, end), style: { strikethrough: true, fg: '244' } });
-        i = end + 2;
-        continue;
-      }
-    }
-
-    // Plain text — accumulate until next special char, detect bare URLs and file paths
-    let end = i + 1;
-    while (end < text.length && !INLINE_SPECIAL_CHARS.has(text[end])) {
-      const code = text.charCodeAt(end);
-      end += (code >= 0xD800 && code <= 0xDBFF) ? 2 : 1;
-    }
-    const plainText = text.slice(i, end);
-
-    // Detect http/https URLs in plain text
-    const urlMatch = plainText.match(/^(https?:\/\/[^\s,)>"]+)/);
-    if (urlMatch) {
-      const url = urlMatch[1];
-      tokens.push({ type: 'link', text: url, url });
-      i += url.length;
-      continue;
-    }
-
-    // Detect absolute file paths in plain text (require at least one directory separator)
-    const fileMatch = plainText.match(/^(\/[^\s,)>"]+\/[^\s,)>"]+(?:\.[a-zA-Z0-9]+)?)/);
-    if (fileMatch) {
-      const filePath = fileMatch[1];
-      const fileUrl = `file://${filePath}`;
-      tokens.push({ type: 'link', text: filePath, url: fileUrl });
-      i += filePath.length;
-      continue;
-    }
-
-    tokens.push({ type: 'text', text: plainText, style: {} });
-    i = end;
-  }
-
-  return tokens;
-}
-
 /**
  * compositeInlineLine - Convert a prefix + InlineTokens into Line[], applying word wrap.
  * Builds cells directly from token styles.

package/src/renderer/model-workspace.ts

@@ -280,14 +280,49 @@ function renderModelRows(picker: ModelPickerModal, lines: Line[], rows: number,
   if (end < models.length && lines[rows - 1]) writeText(lines[rows - 1]!, startX + 1, width - 2, `${GLYPHS.navigation.moreBelow} ${models.length - end} more model(s) below`, { fg: PALETTE.dim, bg: PALETTE.bodyBg, dim: true });
 }
 
+/**
+ * The effort step of the model picker.
+ *
+ * The list is exactly the levels the chosen model resolved to — not a fixed
+ * four — and it is introduced by a headline naming what this model does with
+ * the setting (named levels, a thinking-token budget, an on/off toggle, or
+ * nothing at all). A best-guess spec prints its caveat under the list rather
+ * than presenting unverified levels as if the provider had confirmed them.
+ */
 function renderEffortRows(picker: ModelPickerModal, lines: Line[], rows: number, startX: number, width: number): void {
-  for (let row = 0; row < Math.min(rows, picker.effortLevels.length); row += 1) {
-    const effort = picker.effortLevels[row]!;
-    const selected = row === picker.selectedIndex;
+  const presentation = picker.effortPresentation;
+  let row = 0;
+
+  if (presentation && rows > 0) {
+    fillRange(lines[row]!, startX, startX + width - 1, PALETTE.bodyBg);
+    writeText(lines[row]!, startX + 1, width - 2, presentation.headline, { fg: PALETTE.subtitle, bg: PALETTE.bodyBg });
+    row += 1;
+  }
+
+  // A model with nothing to configure gets a statement, not an empty list.
+  if (presentation && !presentation.configurable) {
+    if (row < rows) {
+      fillRange(lines[row]!, startX, startX + width - 1, PALETTE.bodyBg);
+      writeText(lines[row]!, startX + 1, width - 2, 'Esc returns to the model list.', { fg: PALETTE.dim, bg: PALETTE.bodyBg, dim: true });
+    }
+    return;
+  }
+
+  const firstLevelRow = row;
+  for (let i = 0; i < picker.effortLevels.length && row < rows; i += 1, row += 1) {
+    const effort = picker.effortLevels[i]!;
+    const selected = i === picker.selectedIndex;
     const bg = selected ? PALETTE.selectedBg : PALETTE.bodyBg;
     fillRange(lines[row]!, startX, startX + width - 1, bg);
     const marker = selected ? GLYPHS.navigation.selected : ' ';
-    writeText(lines[row]!, startX + 1, width - 2, `${marker} ${effort}`, { fg: selected ? PALETTE.text : PALETTE.muted, bg, bold: selected });
+    const detail = presentation?.choices[i]?.description ?? '';
+    const text = detail ? `${marker} ${effort.padEnd(8)}${detail}` : `${marker} ${effort}`;
+    writeText(lines[row]!, startX + 1, width - 2, text, { fg: selected ? PALETTE.text : PALETTE.muted, bg, bold: selected });
+  }
+
+  if (presentation?.caveat && row < rows && row > firstLevelRow) {
+    fillRange(lines[row]!, startX, startX + width - 1, PALETTE.bodyBg);
+    writeText(lines[row]!, startX + 1, width - 2, presentation.caveat, { fg: PALETTE.dim, bg: PALETTE.bodyBg, dim: true });
   }
 }
 
@@ -489,7 +524,15 @@ function getRenderCacheKey(picker: ModelPickerModal, width: number, viewportHeig
     const filteredProviders = picker.getFilteredProviders();
     base.push(objectId(picker.providers), objectId(filteredProviders), filteredProviders.length);
   } else if (picker.mode === 'effort') {
-    base.push(objectId(picker.effortLevels), picker.effortLevels.join('\u001f'), picker.pendingModel?.registryKey ?? picker.pendingModel?.id ?? '');
+    base.push(
+      objectId(picker.effortLevels),
+      picker.effortLevels.join('\u001f'),
+      picker.pendingModel?.registryKey ?? picker.pendingModel?.id ?? '',
+      // The headline and caveat are rendered content too: two models with the
+      // same level list but different spec kinds must not share a cache entry.
+      picker.effortPresentation?.headline ?? '',
+      picker.effortPresentation?.caveat ?? '',
+    );
   } else if (picker.mode === 'contextCap') {
     base.push(picker.contextCapQuery, picker.contextCapPendingModel?.registryKey ?? picker.contextCapPendingModel?.id ?? '');
   } else if (picker.mode === 'embeddingProvider') {

package/src/renderer/shell-surface.ts

@@ -19,6 +19,13 @@ export interface ShellFooterBuildOptions {
   readonly showExitNotice: boolean;
   readonly lastCopyTime: number;
   readonly model?: string;
+  /**
+   * Divergence marker appended to the model segment while the serving backend
+   * is not the user's configured selection (core/active-model-identity.ts),
+   * e.g. "failover from abacusai:route-llm". Absent/empty in the normal case,
+   * where the context-info line renders exactly as it always has.
+   */
+  readonly modelNote?: string;
   readonly toolCount?: number;
   readonly workingDir?: string;
   readonly provider?: string;
@@ -112,6 +119,34 @@ const DIM_STATUS_FG = '#64748b';
  */
 let lastRenderedFooterHeight: { compact: boolean; height: number } | null = null;
 
+/**
+ * The wrapped-prompt shape the composer reports each frame — the subset
+ * promptCursorOffset needs (see InputHandler.getWrappedPromptInfo).
+ */
+export interface WrappedPromptCursorInfo {
+  readonly visibleLines: readonly string[];
+  readonly visibleCursorLine: number;
+  readonly visibleCursorCol: number;
+}
+
+/**
+ * Flatten a wrapped-prompt cursor position (line + column) into the single
+ * character offset createFooter's `cursorPos` expects, counting one separator
+ * per wrapped line. Returns undefined when the cursor is not on a visible line
+ * (scrolled out of the composer's window), which suppresses the cursor overlay
+ * rather than drawing it in the wrong place.
+ *
+ * Lives here rather than inline at the render site so main.ts (a composition
+ * root already at the source-line gate) stays a wiring file.
+ */
+export function promptCursorOffset(info: WrappedPromptCursorInfo): number | undefined {
+  if (info.visibleCursorLine < 0) return undefined;
+  const precedingChars = info.visibleLines
+    .slice(0, info.visibleCursorLine)
+    .reduce((sum: number, line: string) => sum + line.length + 1, 0);
+  return precedingChars + info.visibleCursorCol;
+}
+
 export function estimateShellFooterHeight(
   promptLineCount: number,
   contextWindow?: number,
@@ -158,6 +193,7 @@ export function buildShellFooter(
     options.permissionMode,
     options.webSurfaceUrl,
     options.powerKeepAwake,
+    options.modelNote,
   );
   // Compact posture drops the process indicator and context hint entirely so
   // the footer fits within ~5 rows on short terminals.

package/src/renderer/ui-factory.ts

@@ -3,6 +3,7 @@ import { LAYOUT } from './layout.ts';
 import { VERSION } from '../version.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor, joinPrioritizedSegments, type PrioritizedSegment } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
+import { renderHeaderLine } from './header-line.ts';
 import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
 import { GLYPHS } from './ui-primitives.ts';
 import { activeUiTones } from './theme.ts';
@@ -42,22 +43,6 @@ export interface ThinkingStallInfo {
   readonly reconnect?: { readonly attempt: number; readonly maxAttempts: number };
 }
 
-/** Build the git segment string and its display width. Single source of truth for header layout. */
-function buildGitSegment(gitInfo: GitHeaderInfo): { text: string; width: number } {
-  const branch = ` git:${gitInfo.branch}`;
-  if (gitInfo.dirty) {
-    const text = `${branch} * `;
-    return { text, width: getDisplayWidth(text) };
-  }
-  if (gitInfo.ahead > 0 || gitInfo.behind > 0) {
-    const arrows = (gitInfo.ahead > 0 ? ` +${gitInfo.ahead}` : '') + (gitInfo.behind > 0 ? ` -${gitInfo.behind}` : '');
-    const text = `${branch}${arrows} `;
-    return { text, width: getDisplayWidth(text) };
-  }
-  const text = `${branch} `;
-  return { text, width: getDisplayWidth(text) };
-}
-
 /** Format a number: up to 999, then 1.0k, 1.0M, 1.0B, 1.0T */
 function fmtNum(n: number): string {
   return abbreviateCount(n, { bSuffix: true });
@@ -75,68 +60,19 @@ function fmtCost(usd: number): string {
  * UIFactory - Generates standard UI fragments without needing Ink/React overhead.
  */
 export class UIFactory {
-  // `version` defaults to the live build VERSION; tests pass a pinned fixture so
-  // golden snapshots don't break on every release bump (version-decoupled goldens,
-  // mirroring the splash fixture-version pattern).
-  public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo, version: string = VERSION): Line[] {
-    const lines: Line[] = [];
-    // Header/footer/thinking paint on the transparent terminal background, so
-    // they read chrome.* (light-terminal-aware) — NOT fg.*/state.*, which stay
-    // tuned for the opaque dark modal/panel boxes. Read live per render so a
-    // mode flip re-resolves without any module reload (see theme.ts).
-    const t = activeUiTones();
-    const CYAN = t.accent.brand;
-    const GREY = t.chrome.faint;
-    const TITLE_COLOR = t.chrome.label;
-    const brand = ` GoodVibes `;
-    const ver = `v${version} `;
-    const stats = ` ${model} `;
-    const prov = `(${provider}) `;
-    const line = createEmptyLine(width);
-    let curX = 0;
-    for (const char of brand) { line[curX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
-    for (const char of ver) { line[curX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
-    // Optional conversation title — shown after brand/ver, truncated to fit
-    if (title) {
-      const titleStr = `│ ${title} `;
-      // Reserve space for git info (if present) + model/provider on the right
-      const gitReserved = gitInfo ? buildGitSegment(gitInfo).width : 0;
-      const rightReserved = getDisplayWidth(stats + prov) + gitReserved;
-      const maxTitleW = width - curX - rightReserved - 1;
-      let displayTitle: string;
-      if (getDisplayWidth(titleStr) <= maxTitleW) {
-        displayTitle = titleStr;
-      } else {
-        let truncated = '';
-        let w = 0;
-        for (const ch of titleStr) {
-          const cw = getDisplayWidth(ch);
-          if (w + cw > maxTitleW - 3) { truncated += '...'; break; }
-          truncated += ch;
-          w += cw;
-        }
-        displayTitle = truncated;
-      }
-      for (const char of displayTitle) { if (curX < width) line[curX++] = { char, fg: TITLE_COLOR, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
-    }
-    // Build git info segment
-    let gitStr = '';
-    let gitFg: string = t.chrome.faint;
-    if (gitInfo) {
-      gitStr = buildGitSegment(gitInfo).text;
-      if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
-        gitFg = t.chrome.warn; // yellow when dirty or out-of-sync
-      }
-    }
-    const rightSideText = stats + prov;
-    const rightSideW = getDisplayWidth(rightSideText) + getDisplayWidth(gitStr);
-    let rightX = width - rightSideW;
-    for (const char of gitStr) { if (rightX >= 0 && rightX < width) line[rightX++] = { char, fg: gitFg, bg: '', bold: false, dim: !gitInfo?.dirty && !(gitInfo?.ahead || gitInfo?.behind), underline: false, italic: false, strikethrough: false }; }
-    for (const char of stats) { if (rightX < width) line[rightX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
-    for (const char of prov) { if (rightX < width) line[rightX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
-    lines.push(line);
-    lines.push(this.stringToLine('━'.repeat(width), width, { fg: t.chrome.faint }));
-    return lines;
+  /**
+   * The header row. Delegates to renderHeaderLine (header-line.ts) — extracted
+   * when the header gained the failover divergence marker and this file was
+   * already on the 800-line source gate.
+   *
+   * `model`/`provider` are the SERVING backend and `note` the divergence
+   * marker, both resolved by core/active-model-identity.ts so the header and
+   * the footer answer "who is serving?" from one place. `version` defaults to
+   * the live build VERSION; tests pass a pinned fixture so golden snapshots
+   * don't break on every release bump.
+   */
+  public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo, version: string = VERSION, note: string = ''): Line[] {
+    return renderHeaderLine(width, model, provider, title, gitInfo, version, note);
   }
 
   /**
@@ -221,6 +157,11 @@ export class UIFactory {
     // "sleep disabled" chip in the posture block (the danger-mode idiom: a
     // persistent, colored surface indicator, the safety mechanism itself).
     powerKeepAwake?: boolean,
+    // Divergence marker for the model segment (core/active-model-identity.ts):
+    // set only while the serving backend is not the user's configured
+    // selection, e.g. "failover from abacusai:route-llm". Empty/undefined
+    // renders the context-info line exactly as it did before the marker existed.
+    modelNote?: string,
   ): Line[] {
     const lines: Line[] = [];
     const promptLines = prompt.split('\n');
@@ -499,6 +440,12 @@ export class UIFactory {
       if (model) {
         ctxParts.push({ text: model + (provider ? ` (${provider})` : ''), priority: 0 });
       }
+      // Divergence marker — its own segment so a narrow line drops it WHOLE
+      // (joinPrioritizedSegments breaks priority ties toward the later
+      // segment) rather than truncating it into a half-word. Priority 0: it
+      // outranks every decorative segment, and what survives without it is
+      // still the SERVING backend, never a claim about the configured one.
+      if (modelNote) ctxParts.push({ text: modelNote, priority: 0 });
       // Cross-surface spine posture — plain words, no blame. Adopted mode only.
       if (sessionSpineStatus) ctxParts.push({ text: `spine:${sessionSpineStatus}`, priority: 1 });
       // Web surface reachability — plain, persistent; dropped first under width pressure.