@pellux/goodvibes-agent 0.1.0

package/src/renderer/process-summary.ts

@@ -0,0 +1,67 @@
+export type ProcessSummaryAgent = {
+  readonly id: string;
+  readonly progress?: string;
+};
+
+export type RuntimeProcessSummaryAgent = {
+  readonly id: string;
+  readonly latestProgress?: string;
+};
+
+export type WrfcProcessSummaryChain = {
+  readonly state?: string;
+  readonly ownerAgentId?: string;
+  readonly engineerAgentId?: string;
+  readonly reviewerAgentId?: string;
+  readonly fixerAgentId?: string;
+  readonly allAgentIds?: readonly unknown[];
+};
+
+export type RunningAgentSummary = {
+  readonly count: number;
+  readonly progress?: string;
+};
+
+export function summarizeRunningAgents(
+  managerAgents: readonly ProcessSummaryAgent[],
+  runtimeAgents: readonly RuntimeProcessSummaryAgent[],
+  wrfcChains: readonly WrfcProcessSummaryChain[],
+): RunningAgentSummary {
+  const runningAgentIds = new Set<string>();
+  let progress: string | undefined;
+
+  for (const agent of managerAgents) {
+    runningAgentIds.add(agent.id);
+    if (!progress && agent.progress) progress = agent.progress;
+  }
+
+  for (const agent of runtimeAgents) {
+    runningAgentIds.add(agent.id);
+    if (!progress && agent.latestProgress) progress = agent.latestProgress;
+  }
+
+  for (const chain of wrfcChains) {
+    if (isTerminalWrfcState(chain.state)) continue;
+    const chainAgentIds = collectChainAgentIds(chain);
+    const hasVisibleChainWork = Array.from(chainAgentIds).some((id) => runningAgentIds.has(id));
+    if (!hasVisibleChainWork || !chain.ownerAgentId) continue;
+    runningAgentIds.add(chain.ownerAgentId);
+    if (!progress) progress = `WRFC chain ${chain.state ?? 'running'}`;
+  }
+
+  return { count: runningAgentIds.size, progress };
+}
+
+function isTerminalWrfcState(state: string | undefined): boolean {
+  return state === 'passed' || state === 'failed';
+}
+
+function collectChainAgentIds(chain: WrfcProcessSummaryChain): Set<string> {
+  return new Set([
+    chain.ownerAgentId,
+    chain.engineerAgentId,
+    chain.reviewerAgentId,
+    chain.fixerAgentId,
+    ...(chain.allAgentIds ?? []),
+  ].filter((id): id is string => typeof id === 'string' && id.length > 0));
+}

package/src/renderer/profile-picker-modal.ts

@@ -0,0 +1,129 @@
+/**
+ * renderProfilePickerModal — renders the /profiles picker modal as Line[]
+ * using ModalFactory.
+ *
+ * Shows a list of saved profiles with:
+ *   - name, timestamp (formatted), settings preview
+ * Footer hints: [Up/Down] Navigate  [Enter] Load  [d] Arm/Delete  [s] Save current  [Esc] Close
+ */
+
+import type { Line } from '../types/grid.ts';
+import { ModalFactory } from './modal-factory.ts';
+import type { ProfilePickerModal } from '../input/profile-picker-modal.ts';
+import { formatTimestamp } from './modal-utils.ts';
+import { fitDisplay } from '../utils/terminal-width.ts';
+import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
+
+// ---------------------------------------------------------------------------
+// Renderer
+// ---------------------------------------------------------------------------
+
+/**
+ * Render the profile picker modal as Line[] for overlay in the viewport.
+ *
+ * @param modal  ProfilePickerModal state object.
+ * @param width  Terminal width.
+ */
+export function renderProfilePickerModal(
+  modal: ProfilePickerModal,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    chromeRows: 6,
+    minContentRows: 5,
+    maxContentRows: 9,
+  });
+  const boxMargin = metrics.margin;
+  const boxW = metrics.boxWidth;
+  const contentW = metrics.contentWidth;
+  const visibleRows = metrics.contentRows;
+  const targetContentRows = getStableOverlayContentRows(metrics.contentRows, 8);
+  modal.setVisibleRows(visibleRows);
+
+  const sections: import('./modal-factory.ts').ModalSection[] = [];
+
+  if (modal.profiles.length === 0) {
+    sections.push({
+      type: 'text',
+      content: 'No saved profiles.',
+      style: { fg: '244', dim: true },
+    });
+    sections.push({
+      type: 'text',
+      content: 'Press [s] to save the current settings as a profile.',
+      style: { fg: '240', dim: true },
+    });
+  } else {
+    // Column widths: name(24) | timestamp(16) | preview(remaining)
+    const nameW = 24;
+    const tsW = 16;
+    const previewW = Math.max(4, contentW - nameW - tsW - 4);
+
+    // Column header
+    const nameHdr    = fitDisplay('Name', nameW);
+    const tsHdr      = fitDisplay('Saved', tsW);
+    const previewHdr = fitDisplay('Settings', previewW);
+    sections.push({
+      type: 'text',
+      content: `${nameHdr}  ${tsHdr}  ${previewHdr}`,
+      style: { fg: '240', dim: true },
+    });
+    sections.push({ type: 'separator' });
+
+    const visibleProfiles = modal.profiles.slice(modal.scrollOffset, modal.scrollOffset + visibleRows);
+    const listItems: import('./modal-factory.ts').ModalListItem[] = visibleProfiles.map((prof, idx) => {
+      const isSelected = modal.scrollOffset + idx === modal.selectedIndex;
+
+      const nameStr = fitDisplay(prof.name, nameW);
+
+      const tsStr = fitDisplay(formatTimestamp(prof.timestamp), tsW);
+
+      // Read the profile file to get a preview of settings
+      // (We only have name/timestamp in ProfileInfo, so show a placeholder)
+      const preview = fitDisplay('(display/provider/behavior)', previewW);
+
+      const label = `${nameStr}  ${tsStr}  ${preview}`;
+      return { label, selected: isSelected };
+    });
+
+    sections.push({ type: 'list', items: listItems });
+    if (modal.profiles.length > visibleRows) {
+      sections.push({ type: 'separator' });
+      sections.push({
+        type: 'text',
+        content: `[${modal.scrollOffset + 1}-${Math.min(modal.profiles.length, modal.scrollOffset + visibleRows)} of ${modal.profiles.length}]`,
+        style: { fg: '244', dim: true },
+      });
+    }
+  }
+
+  // Status message if present
+  if (modal.statusMessage) {
+    sections.push({ type: 'separator' });
+    sections.push({
+      type: 'text',
+      content: modal.statusMessage,
+      style: { fg: '#00ffcc' },
+    });
+  }
+  if (modal.deleteConfirmationTarget) {
+    sections.push({
+      type: 'text',
+      content: `Press [d] again to permanently delete ${modal.deleteConfirmationTarget}.`,
+      style: { fg: '#f59e0b', dim: true },
+    });
+  }
+
+  return ModalFactory.createModal(
+    {
+      title: 'Profiles',
+      width: boxW,
+      margin: boxMargin,
+      targetContentRows,
+      sections,
+      hints: ['[Up/Down] Navigate', '[Enter] Load', '[d] Arm/Delete', '[s] Save current', '[Esc] Close'],
+    },
+    width,
+  );
+}

package/src/renderer/progress.ts

@@ -0,0 +1,98 @@
+import { type Line } from '../types/grid.ts';
+import { UIFactory } from './ui-factory.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+
+// Rich spinner frames (used by progress indicators)
+export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+// Braille thinking spinner frames (used by the orchestrator thinking animation)
+export const THINKING_SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+/**
+ * renderSpinner - Render a spinner with label as a single Line.
+ */
+export function renderSpinner(
+  frame: string,
+  label: string,
+  width: number,
+  fg: string = '135'
+): Line {
+  const text = ` ${frame} ${label}`;
+  return UIFactory.stringToLine(text.padEnd(width), width, { fg, bold: true });
+}
+
+/**
+ * renderToolProgress - Render tool execution progress.
+ * E.g. "[2/5] Editing src/config.ts..."
+ */
+export function renderToolProgress(
+  current: number,
+  total: number,
+  label: string,
+  width: number
+): Line[] {
+  const counter = `[${current}/${total}]`;
+  const text = ` ${counter} ${label}`;
+  return [
+    UIFactory.stringToLine(text.padEnd(width), width, { fg: '#ffcc00', bold: true }),
+  ];
+}
+
+/**
+ * renderTokenBar - Render a token usage bar for the footer.
+ * Shows used/max tokens as a visual bar + numbers.
+ */
+export function renderTokenBar(
+  used: number,
+  max: number,
+  width: number,
+  model: string,
+  toolCount: number
+): Line[] {
+  const lines: Line[] = [];
+
+  // Stats row
+  const usedK = used >= 1000 ? `${(used / 1000).toFixed(1)}k` : String(used);
+  const maxK = max >= 1000 ? `${(max / 1000).toFixed(1)}k` : String(max);
+  const pct = max > 0 ? Math.min(100, Math.round((used / max) * 100)) : 0;
+  const toolStr = toolCount > 0 ? `  tools:${toolCount}` : '';
+  const statsText = ` ${model}  in:${usedK}/${maxK} (${pct}%)${toolStr}`;
+
+  // Progress bar
+  const barLabel = ' ctx ';
+  const barLabelW = getDisplayWidth(barLabel);
+  const barW = Math.max(10, Math.floor(width * 0.3));
+  const filled = Math.round((pct / 100) * barW);
+  const empty = barW - filled;
+
+  // Color based on usage
+  const barFg = pct > 85 ? '#ef4444' : pct > 60 ? '#ffcc00' : '#22c55e';
+
+  const bar = '#'.repeat(filled) + '-'.repeat(empty);
+  const barText = barLabel + bar;
+
+  const statsW = getDisplayWidth(statsText);
+  const barTextW = getDisplayWidth(barText);
+  const spacingW = Math.max(1, width - statsW - barTextW - 2);
+
+  // Build with mixed colors
+  const line = UIFactory.stringToLine(statsText + ' '.repeat(spacingW), width, { fg: '244', dim: true });
+
+  // Overlay the bar with color
+  let barStartX = getDisplayWidth(statsText) + spacingW;
+  for (const ch of barLabel) {
+    if (barStartX >= width) break;
+    const cw = getDisplayWidth(ch);
+    line[barStartX] = { char: ch, fg: '244', bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false };
+    if (cw === 2 && barStartX + 1 < width) line[barStartX + 1] = { ...line[barStartX], char: '' };
+    barStartX += cw;
+  }
+  for (let i = 0; i < filled && barStartX + i < width; i++) {
+    line[barStartX + i] = { char: '#', fg: barFg, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
+  }
+  for (let i = 0; i < empty && barStartX + filled + i < width; i++) {
+    line[barStartX + filled + i] = { char: '-', fg: '238', bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false };
+  }
+
+  lines.push(line);
+  return lines;
+}

package/src/renderer/qr-renderer.ts

@@ -0,0 +1,120 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine, createStyledCell } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { generateQrMatrix } from '@pellux/goodvibes-sdk/platform/pairing';
+
+export { generateQrMatrix };
+
+/**
+ * Render a QR boolean matrix to terminal Lines using Unicode half-block characters.
+ *
+ * Two matrix rows map to one terminal row:
+ *   top=dark, bottom=dark  → '█'  (FULL BLOCK)
+ *   top=dark, bottom=light → '▀'  (UPPER HALF BLOCK)
+ *   top=light, bottom=dark → '▄'  (LOWER HALF BLOCK)
+ *   top=light, bottom=light → ' ' (SPACE)
+ *
+ * @param modules - 2D boolean matrix where true = dark module
+ * @param width   - Terminal width available for centering
+ * @param options - Optional fg/bg overrides
+ */
+export function renderQrMatrix(
+  modules: readonly boolean[][],
+  width: number,
+  options?: { fg?: string; bg?: string },
+): Line[] {
+  const fg = options?.fg ?? '#000000';
+  const bg = options?.bg ?? '#ffffff';
+
+  const rows = modules.length;
+  const cols = modules[0]?.length ?? 0;
+  if (rows === 0 || cols === 0) return [];
+
+  // Each terminal row covers two matrix rows
+  const terminalRows = Math.ceil(rows / 2);
+  // Left-align with a single-cell indent. Visually aligns with the text above
+  // the QR when rendered with half-block characters; bumping higher
+  // mis-registers the finder patterns by a visible unit.
+  const leftPad = 1;
+
+  const lines: Line[] = [];
+
+  // Prepend a half-height top quiet band: the BOTTOM half of this terminal row
+  // is white (QR bg) flush against the QR's first module row below; the TOP half
+  // is the terminal's default background (chrome). Using '▄' (LOWER HALF BLOCK)
+  // with fg = QR bg and no bg override achieves the half-height effect.
+  // Combined with the leftPad=1 on the horizontal axis, this keeps the
+  // finder-pattern square margin consistent on both axes without stealing a
+  // full row of vertical space.
+  {
+    const topBand = createEmptyLine(width);
+    const endCol = Math.min(leftPad + cols + 1, width);
+    for (let col = 0; col < endCol; col++) {
+      topBand[col] = createStyledCell('▄', { fg: bg });
+    }
+    lines.push(topBand);
+  }
+
+  for (let termRow = 0; termRow < terminalRows; termRow++) {
+    const matrixRowTop = termRow * 2;
+    const matrixRowBot = termRow * 2 + 1;
+    const topRow = modules[matrixRowTop];
+    const botRow = matrixRowBot < rows ? modules[matrixRowBot] : null;
+
+    const line = createEmptyLine(width);
+
+    // Fill leading padding with bg
+    for (let col = 0; col < leftPad && col < width; col++) {
+      line[col] = createStyledCell(' ', { fg, bg });
+    }
+
+    // Render QR columns
+    for (let col = 0; col < cols; col++) {
+      const termCol = leftPad + col;
+      if (termCol >= width) break;
+
+      const topDark = topRow ? (topRow[col] ?? false) : false;
+      const botDark = botRow ? (botRow[col] ?? false) : false;
+
+      let char: string;
+      let cellFg: string;
+      let cellBg: string;
+
+      if (topDark && botDark) {
+        char = '█';
+        cellFg = fg;
+        cellBg = bg;
+      } else if (topDark && !botDark) {
+        char = '▀';
+        cellFg = fg;
+        cellBg = bg;
+      } else if (!topDark && botDark) {
+        char = '▄';
+        cellFg = fg;
+        cellBg = bg;
+      } else {
+        char = ' ';
+        cellFg = fg;
+        cellBg = bg;
+      }
+
+      // Some terminals may not render block chars at full width — guard
+      const charWidth = getDisplayWidth(char);
+      if (charWidth <= 0) {
+        line[termCol] = createStyledCell(' ', { fg: cellFg, bg: cellBg });
+      } else {
+        line[termCol] = createStyledCell(char, { fg: cellFg, bg: cellBg });
+      }
+    }
+
+    // Fill trailing with bg up to end of QR block
+    for (let col = leftPad + cols; col < leftPad + cols + 1 && col < width; col++) {
+      line[col] = createStyledCell(' ', { fg, bg });
+    }
+
+    lines.push(line);
+  }
+
+  return lines;
+}
+

package/src/renderer/search-overlay.ts

@@ -0,0 +1,54 @@
+import type { Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import type { SearchManager } from '../input/search.ts';
+import { createBottomBarLine, writeBottomBarText } from './bottom-bar.ts';
+
+/**
+ * Render the search bar as a single Line[] overlay at the bottom of the viewport.
+ * Format: [ Find: <query>   3/17 up/down  [n] next [N] prev [Esc] close ]
+ * The match count is dim grey; the rest of the bar is teal.
+ */
+export function renderSearchOverlay(
+  manager: SearchManager,
+  width: number
+): Line[] {
+  // Match count text — displayed in dim grey, right of query, left of hints
+  const matchCount = manager.matches?.length > 0
+    ? `${manager.currentMatch + 1}/${manager.matches.length} up/down`
+    : manager.query.length > 0
+      ? 'No matches'
+      : '';
+
+  const locked = manager.locked;
+  const cursor = locked ? '' : '█';
+  const queryDisplay = manager.query + cursor;
+  const hints = locked
+    ? '  [Up/Down] or [jk] navigate  [Bksp] edit  [Esc] close'
+    : '  [Enter/Tab] lock  [Esc] close';
+  const label = ' Find: ';
+  const matchStr = matchCount ? ` ${matchCount}` : '';
+
+  // Build left portion: label + query (no match count — that gets separate styling)
+  const leftPart = label + queryDisplay;
+  const hintsW = getDisplayWidth(hints);
+  const matchStrW = getDisplayWidth(matchStr);
+  // Available width for left content (query area)
+  const leftWidth = width - hintsW - matchStrW - 2;
+  const truncatedLeft = fitDisplay(
+    getDisplayWidth(leftPart) > leftWidth ? truncateDisplay(leftPart, leftWidth) : leftPart,
+    leftWidth,
+  );
+
+  // Build the full line text (match count embedded for positional tracking)
+  const fullLine = truncatedLeft + matchStr + hints + ' ';
+  const line = createBottomBarLine(width, { fg: '#000000', bg: '#00ffcc' });
+  writeBottomBarText(line, 0, width, fitDisplay(truncateDisplay(fullLine, width), width), { fg: '#000000', bg: '#00ffcc' });
+
+  // Overwrite match count segment with dim grey styling
+  if (matchStr.length > 0) {
+    const matchStart = getDisplayWidth(truncatedLeft);
+    writeBottomBarText(line, matchStart, matchStrW, matchStr, { fg: '#888888', bg: '#00ffcc', dim: true });
+  }
+
+  return [line];
+}

package/src/renderer/selection-modal-overlay.ts

@@ -0,0 +1,214 @@
+import { type Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import type { SelectionModal } from '../input/selection-modal.ts';
+import {
+  createOverlayBoxLayout,
+  createOverlayContentLine,
+  createOverlayFilledBorderLine,
+  DEFAULT_OVERLAY_PALETTE,
+  OVERLAY_GLYPHS,
+  putOverlayText,
+} from './overlay-box.ts';
+import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
+import { fitLabelDetailColumns, wrapWithHangingIndent } from './text-layout.ts';
+
+const BORDER_FG = DEFAULT_OVERLAY_PALETTE.borderFg;
+const TITLE_FG = DEFAULT_OVERLAY_PALETTE.titleFg;
+const BODY_FG = DEFAULT_OVERLAY_PALETTE.bodyFg;
+const MUTED_FG = DEFAULT_OVERLAY_PALETTE.mutedFg;
+const CATEGORY_FG = '#4488cc';
+const SELECTED_BG = DEFAULT_OVERLAY_PALETTE.selectedBg;
+
+interface CellStyle {
+  fg: string;
+  bg?: string;
+  bold?: boolean;
+  dim?: boolean;
+}
+
+function putText(line: Line, startX: number, maxWidth: number, text: string, style: CellStyle): void {
+  putOverlayText(line, startX, maxWidth, text, style);
+}
+
+/**
+ * Render the selection modal as Line[] for overlay in the viewport.
+ */
+export function renderSelectionModalOverlay(
+  modal: SelectionModal,
+  width: number,
+  viewportHeight = 24,
+): Line[] {
+  const lines: Line[] = [];
+  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
+    margin: 4,
+    maxWidth: 72,
+    chromeRows: modal.allowSearch ? 5 : 4,
+    minContentRows: 6,
+    maxContentRows: 10,
+  });
+  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
+
+  lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.topLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.topRight, BORDER_FG, DEFAULT_OVERLAY_PALETTE.titleBg));
+
+  const titleLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.titleBg);
+  putText(
+    titleLine,
+    layout.margin + 2,
+    layout.innerWidth,
+    fitDisplay(truncateDisplay(modal.title, layout.innerWidth), layout.innerWidth),
+    { fg: TITLE_FG, bold: true },
+  );
+  lines.push(titleLine);
+
+  if (modal.allowSearch) {
+    const labelLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+    putText(labelLine, layout.margin + 2, layout.innerWidth, fitDisplay(' Search', layout.innerWidth), {
+      fg: CATEGORY_FG,
+      dim: true,
+    });
+    lines.push(labelLine);
+    const searchLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.inputBg);
+    const prefix = '/ ';
+    const queryAreaWidth = layout.innerWidth - getDisplayWidth(prefix);
+    const queryValue = modal.query + (modal.searchFocused ? OVERLAY_GLYPHS.cursor : '');
+    const queryText = fitDisplay(
+      truncateDisplay(queryValue, queryAreaWidth),
+      queryAreaWidth,
+    );
+    putText(searchLine, layout.margin + 2, getDisplayWidth(prefix), prefix, { fg: modal.searchFocused ? BODY_FG : MUTED_FG });
+    putText(searchLine, layout.margin + 2 + getDisplayWidth(prefix), queryAreaWidth, queryText, {
+      fg: modal.query.length > 0 || modal.searchFocused ? BODY_FG : MUTED_FG,
+    });
+    lines.push(searchLine);
+    lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg));
+  } else {
+    lines.push(createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg));
+  }
+
+  const listTitle = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+  putText(listTitle, layout.margin + 2, layout.innerWidth, fitDisplay(' Results', layout.innerWidth), {
+    fg: CATEGORY_FG,
+    dim: true,
+  });
+  lines.push(listTitle);
+
+  const items = modal.filteredItems;
+  if (items.length === 0) {
+    const line = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.bodyBg);
+    const message = modal.query ? 'No matching items' : 'No items';
+    putText(line, layout.margin + 2, layout.innerWidth, fitDisplay(message, layout.innerWidth), { fg: MUTED_FG, dim: true });
+    lines.push(line);
+  } else {
+    const maxVisible = metrics.contentRows;
+    let startIdx = 0;
+    if (items.length > maxVisible) {
+      startIdx = Math.max(0, Math.min(
+        modal.selectedIndex - Math.floor(maxVisible / 2),
+        items.length - maxVisible,
+      ));
+    }
+    const endIdx = Math.min(startIdx + maxVisible, items.length);
+    let lastCategory: string | undefined;
+
+    for (let i = startIdx; i < endIdx; i++) {
+      const item = items[i];
+      const isSelected = i === modal.selectedIndex;
+
+      if (item.category && item.category !== lastCategory) {
+        lastCategory = item.category;
+        const categoryLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+        putText(categoryLine, layout.margin + 2, layout.innerWidth, fitDisplay(`  ${item.category}`, layout.innerWidth), {
+          fg: CATEGORY_FG,
+          dim: true,
+        });
+        lines.push(categoryLine);
+      }
+
+      const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
+      const indicatorWidth = 2;
+      const remaining = layout.innerWidth - indicatorWidth;
+      const labelColor = isSelected ? TITLE_FG : (item.fg ?? BODY_FG);
+      const detailColor = isSelected ? BODY_FG : MUTED_FG;
+      const labelWidth = item.detail
+        ? fitLabelDetailColumns(item.label, item.detail, remaining).labelWidth
+        : remaining;
+      const labelLine = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg);
+        putText(labelLine, layout.margin + 2, indicatorWidth, indicator, {
+          fg: isSelected ? TITLE_FG : MUTED_FG,
+          bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          bold: isSelected,
+        });
+      putText(labelLine, layout.margin + 2 + indicatorWidth, labelWidth, fitDisplay(truncateDisplay(item.label, labelWidth), labelWidth), {
+        fg: labelColor,
+        bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+        bold: isSelected,
+      });
+      if (item.detail) {
+          const detailWidth = fitLabelDetailColumns(item.label, item.detail, remaining).detailWidth;
+        if (detailWidth >= 12) {
+          putText(labelLine, layout.margin + 2 + indicatorWidth + labelWidth, 2, '  ', {
+            fg: BODY_FG,
+            bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          });
+          putText(labelLine, layout.margin + 2 + indicatorWidth + labelWidth + 2, detailWidth, fitDisplay(truncateDisplay(item.detail, detailWidth), detailWidth), {
+            fg: detailColor,
+            bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+          });
+          lines.push(labelLine);
+        } else {
+          lines.push(labelLine);
+          const wrappedDetails = wrapWithHangingIndent(item.detail, Math.max(8, remaining), '', 2);
+          for (const detailLineText of wrappedDetails) {
+            const detailLine = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg);
+            putText(detailLine, layout.margin + 2 + indicatorWidth, remaining, fitDisplay(truncateDisplay(detailLineText, remaining), remaining), {
+              fg: detailColor,
+              bg: isSelected ? SELECTED_BG : DEFAULT_OVERLAY_PALETTE.bodyBg,
+              dim: !isSelected,
+            });
+            lines.push(detailLine);
+          }
+        }
+      } else {
+        lines.push(labelLine);
+      }
+    }
+
+    if (items.length > maxVisible) {
+      const above = startIdx;
+      const below = items.length - endIdx;
+      const scrollHint = above > 0 && below > 0
+        ? `(${above} above, ${below} below)`
+        : below > 0
+        ? `(${below} below)`
+        : `(${above} above)`;
+      const hintLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+      putText(hintLine, layout.margin + 2, layout.innerWidth, fitDisplay(scrollHint, layout.innerWidth), { fg: MUTED_FG, dim: true });
+      lines.push(hintLine);
+    }
+  }
+
+  const footerLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
+  const selectedItem = modal.getSelected();
+  const primaryVerb = selectedItem?.primaryAction === 'toggle'
+    ? '[Enter] Toggle'
+    : selectedItem?.primaryAction === 'edit'
+    ? '[Enter] Edit'
+    : selectedItem?.primaryAction === 'delete'
+    ? '[Enter] Delete'
+    : '[Enter] Select';
+  let hints = `[Up/Down] Navigate  ${primaryVerb}  [Esc] Close`;
+  if (modal.allowSearch) hints += '  [/] Search';
+  if (selectedItem?.primaryAction === 'toggle' && !selectedItem.actions) hints += '  [Space] Toggle';
+  if (selectedItem?.actions) hints += `  ${selectedItem.actions}`;
+  putText(
+    footerLine,
+    layout.margin + 2,
+    layout.innerWidth,
+    fitDisplay(truncateDisplay(hints, layout.innerWidth), layout.innerWidth),
+    { fg: MUTED_FG, dim: true },
+  );
+  lines.push(footerLine);
+  lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.bottomLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.bottomRight, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg));
+
+  return lines;
+}