claude-buddy-reroll 1.9.1 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-buddy-reroll",
-  "version": "1.9.1",
+  "version": "2.0.1",
   "description": "Speaki-styled npm terminal for buddy rerolls, dex replay, and SALT patching.",
   "type": "module",
   "bin": {

package/src/dex-ui.mjs

@@ -41,28 +41,31 @@ function pushUniqueVariant(ordered, seen, variant) {
 
 function makeBox(title, lines, width = 28) {
   const innerWidth = width - 4;
+  const DIM = '\x1b[2m';
+  const BOLD = '\x1b[1m';
+  const GRAY = '\x1b[90m';
+  const R = '\x1b[0m';
   const output = [
-    `+${'-'.repeat(width - 2)}+`,
-    `| ${fitLine(title, innerWidth)} |`,
-    `+${'-'.repeat(width - 2)}+`,
+    `${GRAY}${BOLD}${title}${R}`,
+    `${GRAY}${'─'.repeat(width - 2)}${R}`,
   ];
 
   for (const line of lines) {
-    output.push(`| ${fitLine(line, innerWidth)} |`);
+    output.push(`${DIM} ${fitLine(line, innerWidth)}${R}`);
   }
 
-  output.push(`+${'-'.repeat(width - 2)}+`);
+  output.push('');
   return output;
 }
 
-function joinColumns(leftLines, rightLines, leftWidth = 28, gap = '  ') {
+function joinColumns(leftLines, rightLines, leftWidth = 28, gap = '    ') {
   const totalRows = Math.max(leftLines.length, rightLines.length);
   const output = [];
 
   for (let row = 0; row < totalRows; row++) {
     const left = leftLines[row] || ' '.repeat(leftWidth);
     const right = rightLines[row] || '';
-    output.push(`${left}${gap}${right}`);
+    output.push(`  ${left}${gap}${right}`);
   }
 
   return output;

package/src/display.mjs

@@ -1,151 +1,309 @@
-// Display utilities for buddy cards — v2 redesign
+// Display utilities for buddy cards — v3: rarity = structure
+// Each rarity tier has a fundamentally different card layout.
 
 import { RARITY_STARS, STAT_FLOORS, STATS } from './engine.mjs';
 import { renderSprite } from './sprites.mjs';
 import { formatEye, formatShinyTag, formatStars, isAsciiOnlyTerminal, toTerminalSafeText } from './terminal.mjs';
 import { padAnsiEnd, visibleLength } from './ansi.mjs';
 
-const RESET = '\x1b[0m';
-const DIM = '\x1b[2m';
+const R = '\x1b[0m';
 const BOLD = '\x1b[1m';
-const GRAY = '\x1b[90m';
+const DIM = '\x1b[2m';
 const ITALIC = '\x1b[3m';
-const BG_RESET = '\x1b[49m';
-
-const RARITY_STYLE = {
-  common:    { color: '\x1b[37m',    label: '\x1b[37m',    bg: '',              badge: 'COMMON',    accent: '\x1b[90m',   tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' },
-  uncommon:  { color: '\x1b[32m',    label: '\x1b[32m',    bg: '',              badge: 'UNCOMMON',  accent: '\x1b[32m',   tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
-  rare:      { color: '\x1b[36m',    label: '\x1b[36m',    bg: '',              badge: 'RARE',      accent: '\x1b[36m',   tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
-  epic:      { color: '\x1b[35m',    label: '\x1b[35m',    bg: '\x1b[48;5;53m', badge: 'EPIC',      accent: '\x1b[35;1m', tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
-  legendary: { color: '\x1b[33;1m',  label: '\x1b[33;1m',  bg: '\x1b[48;5;58m', badge: 'LEGENDARY', accent: '\x1b[33;1m', tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
-};
+const GRAY = '\x1b[90m';
 
-const ASCII_STYLE = {
-  common:    { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' },
-  uncommon:  { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' },
-  rare:      { tl: '+', tr: '+', bl: '+', br: '+', h: '=', v: '|' },
-  epic:      { tl: '#', tr: '#', bl: '#', br: '#', h: '=', v: '#' },
-  legendary: { tl: '#', tr: '#', bl: '#', br: '#', h: '#', v: '#' },
+const RARITY = {
+  common:    { color: '\x1b[90m',    accent: '\x1b[37m',    bg: '' },
+  uncommon:  { color: '\x1b[32m',    accent: '\x1b[32;1m',  bg: '' },
+  rare:      { color: '\x1b[34m',    accent: '\x1b[34;1m',  bg: '' },
+  epic:      { color: '\x1b[35m',    accent: '\x1b[35;1m',  bg: '\x1b[48;5;53m' },
+  legendary: { color: '\x1b[33;1m',  accent: '\x1b[33;1m',  bg: '\x1b[48;5;58m' },
 };
 
-const CARD_WIDTH = 38;
-const INNER = CARD_WIDTH - 4; // content area (minus border + padding)
-
-function box(style, ascii) {
-  const s = ascii ? { ...style, ...ASCII_STYLE[Object.keys(RARITY_STYLE).find(k => RARITY_STYLE[k] === style)] } : style;
-  return {
-    top:    `${style.color}${s.tl}${s.h.repeat(CARD_WIDTH - 2)}${s.tr}${RESET}`,
-    bottom: `${style.color}${s.bl}${s.h.repeat(CARD_WIDTH - 2)}${s.br}${RESET}`,
-    mid:    `${style.color}${s.v}${s.h.repeat(CARD_WIDTH - 2)}${s.v}${RESET}`,
-    row: (content) => {
-      const padded = padAnsiEnd(content, CARD_WIDTH - 4);
-      return `${style.color}${s.v}${RESET} ${padded} ${style.color}${s.v}${RESET}`;
-    },
-    empty: () => `${style.color}${s.v}${RESET}${' '.repeat(CARD_WIDTH - 2)}${style.color}${s.v}${RESET}`,
-  };
+function statBar(value, color) {
+  const w = 12;
+  const filled = Math.round((value / 100) * w);
+  return `${color}${'█'.repeat(filled)}${GRAY}${'░'.repeat(w - filled)}${R}`;
 }
 
-function centerPad(text, width) {
+function centerText(text, width) {
   const vis = visibleLength(text);
   if (vis >= width) return text;
   const left = Math.floor((width - vis) / 2);
-  const right = width - vis - left;
-  return ' '.repeat(left) + text + ' '.repeat(right);
+  return ' '.repeat(left) + text;
 }
 
-function statBar(value, color) {
-  const width = 12;
-  const filled = Math.round((value / 100) * width);
-  const bar = `${color}${'█'.repeat(filled)}${GRAY}${'░'.repeat(width - filled)}${RESET}`;
-  return bar;
+// ─── COMMON: compact, no frame, disposable feel ─────────
+
+function renderCommon(result, { index, frame }) {
+  const { bones } = result;
+  const { species, eye } = bones;
+  const c = RARITY.common;
+  const idx = index !== null ? `${GRAY}#${index + 1}${R} ` : '';
+
+  // Extract just the "face" — second or third line of sprite
+  const spriteLines = renderSprite(species, formatEye(eye), 'none', frame).split('\n');
+  const faceLine = spriteLines.find(l => l.includes(formatEye(eye))) || spriteLines[1] || '';
+
+  return [
+    '',
+    `  ${idx}${c.color}★ ${species}${R}  ${GRAY}${formatEye(eye)}${R}`,
+    `  ${c.color}${toTerminalSafeText(faceLine.trim())}${R}`,
+    '',
+  ].join('\n');
 }
 
-export function renderCard(result, { showSalt = false, index = null, frame = 0 } = {}) {
+// ─── UNCOMMON: light frame, adds stats ──────────────────
+
+function renderUncommon(result, { index, frame, showSalt }) {
   const { bones } = result;
-  const { rarity, species, eye, hat, shiny, stats } = bones;
-  const style = RARITY_STYLE[rarity];
-  const ascii = isAsciiOnlyTerminal();
-  const b = box(style, ascii);
-  const stars = formatStars(RARITY_STARS[rarity]);
-  const shinyTag = shiny ? formatShinyTag(' ✨') : '';
-  const sprite = toTerminalSafeText(renderSprite(species, formatEye(eye), hat, frame));
-  const floor = STAT_FLOORS[rarity] || 5;
+  const { species, eye, hat, stats } = bones;
+  const c = RARITY.uncommon;
+  const W = 32;
+  const idx = index !== null ? `#${index + 1} ` : '';
+  const stars = formatStars(RARITY_STARS.uncommon);
 
-  const header = index !== null ? `#${index + 1} ` : '';
-  const badgeText = `${style.accent}${BOLD}[ ${style.badge} ]${RESET}`;
-  const nameText = `${style.label}${BOLD}${header}${species.toUpperCase()}${RESET} ${style.color}${stars}${shinyTag}${RESET}`;
+  const spriteLines = renderSprite(species, formatEye(eye), hat, frame).split('\n');
+  const faceLine = spriteLines.find(l => l.includes(formatEye(eye))) || spriteLines[1] || '';
 
   const lines = [];
   lines.push('');
-  lines.push(b.top);
+  lines.push(`  ${c.color}╭${'─'.repeat(W)}╮${R}`);
+  lines.push(`  ${c.color}│${R} ${c.accent}${BOLD}${idx}${species.toUpperCase()}${R} ${c.color}${stars}${R}${' '.repeat(Math.max(0, W - visibleLength(`${idx}${species.toUpperCase()} ${stars}`) - 1))}${c.color}│${R}`);
+  lines.push(`  ${c.color}│${R} ${toTerminalSafeText(padAnsiEnd(faceLine.trim(), W - 1))}${c.color}│${R}`);
+  lines.push(`  ${c.color}│${R} ${DIM}Eye${R} ${formatEye(eye)}  ${DIM}Hat${R} ${toTerminalSafeText(hat === 'none' ? '—' : hat)}${' '.repeat(Math.max(0, W - 20))}${c.color}│${R}`);
 
-  // Badge row (centered)
-  lines.push(b.row(centerPad(badgeText, INNER)));
+  // Compact stats
+  if (stats) {
+    const top = STATS.filter(s => stats[s] !== undefined)
+      .sort((a, b) => (stats[b] ?? 0) - (stats[a] ?? 0))
+      .slice(0, 3);
+    const statStr = top.map(s => `${s.slice(0, 3)}:${stats[s]}`).join(' ');
+    lines.push(`  ${c.color}│${R} ${GRAY}${statStr}${R}${' '.repeat(Math.max(0, W - visibleLength(statStr) - 1))}${c.color}│${R}`);
+  }
 
-  // Name + stars row (centered)
-  lines.push(b.row(centerPad(nameText, INNER)));
+  if (showSalt && result.salt) {
+    lines.push(`  ${c.color}│${R} ${DIM}${ITALIC}${result.salt}${R}${' '.repeat(Math.max(0, W - result.salt.length - 1))}${c.color}│${R}`);
+  }
+  lines.push(`  ${c.color}╰${'─'.repeat(W)}╯${R}`);
+  lines.push('');
+  return lines.join('\n');
+}
 
-  // Separator
-  lines.push(b.mid);
+// ─── RARE: double frame, full sprite, stat bars ─────────
 
-  // Sprite (centered)
-  const spriteLines = sprite.split('\n');
-  for (const sl of spriteLines) {
-    lines.push(b.row(centerPad(`${style.color}${sl}${RESET}`, INNER)));
-  }
+function renderRare(result, { index, frame, showSalt }) {
+  const { bones } = result;
+  const { species, eye, hat, shiny, stats, rarity } = bones;
+  const c = RARITY.rare;
+  const W = 36;
+  const inner = W - 2;
+  const idx = index !== null ? `#${index + 1} ` : '';
+  const stars = formatStars(RARITY_STARS[rarity]);
+  const floor = STAT_FLOORS[rarity] || 25;
 
-  // Separator
-  lines.push(b.mid);
+  const v = (content) => {
+    const padded = padAnsiEnd(content, inner);
+    return `  ${c.color}║${R} ${padded}${c.color}║${R}`;
+  };
 
-  // Traits row — compact
-  const eyeStr = formatEye(eye);
-  const hatStr = toTerminalSafeText(hat === 'none' ? '—' : hat);
-  lines.push(b.row(`${DIM}Eye${RESET} ${eyeStr}  ${DIM}Hat${RESET} ${hatStr}  ${DIM}Shiny${RESET} ${shiny ? `${style.accent}YES${RESET}` : `${GRAY}no${RESET}`}`));
+  const lines = [];
+  lines.push('');
+  lines.push(`  ${c.color}╔${'═'.repeat(W)}╗${R}`);
+  lines.push(v(`${c.accent}${BOLD}${rarity.toUpperCase()}${R} ${c.color}${stars}${R}`));
+  lines.push(v(`${c.accent}${BOLD}${idx}${species.toUpperCase()}${R}${shiny ? ` ${formatShinyTag('✨')}` : ''}`));
+  lines.push(`  ${c.color}╠${'═'.repeat(W)}╣${R}`);
 
-  // Separator
-  lines.push(b.mid);
+  // Full sprite
+  const sprite = toTerminalSafeText(renderSprite(species, formatEye(eye), hat, frame));
+  for (const sl of sprite.split('\n')) {
+    lines.push(v(centerText(`${c.color}${sl}${R}`, inner)));
+  }
+
+  lines.push(`  ${c.color}╠${'═'.repeat(W)}╣${R}`);
+  lines.push(v(`${DIM}Eye${R} ${formatEye(eye)}  ${DIM}Hat${R} ${toTerminalSafeText(hat === 'none' ? '—' : hat)}`));
 
-  // Stats — compact bars with value
-  if (stats && Object.keys(stats).length > 0) {
+  // Stat bars
+  if (stats) {
+    lines.push(v(''));
     for (const name of STATS) {
       if (stats[name] === undefined) continue;
       const val = stats[name];
       const isHigh = val >= floor + 40;
       const isLow = val <= floor;
+      const bar = statBar(val, c.color);
+      const marker = isHigh ? `${c.accent}▲${R}` : isLow ? `\x1b[31m▼${R}` : ' ';
+      lines.push(v(`${GRAY}${name.slice(0, 5).padEnd(5)}${R} ${bar} ${String(val).padStart(3)} ${marker}`));
+    }
+  }
+
+  if (showSalt && result.salt) {
+    lines.push(`  ${c.color}╠${'═'.repeat(W)}╣${R}`);
+    lines.push(v(`${DIM}${ITALIC}${result.salt}${R}`));
+  }
+  lines.push(`  ${c.color}╚${'═'.repeat(W)}╝${R}`);
+  lines.push('');
+  return lines.join('\n');
+}
+
+// ─── EPIC: bg tint, wide padding, decorative ────────────
+
+function renderEpic(result, { index, frame, showSalt }) {
+  const { bones } = result;
+  const { species, eye, hat, shiny, stats, rarity } = bones;
+  const c = RARITY.epic;
+  const W = 38;
+  const inner = W - 2;
+  const floor = STAT_FLOORS[rarity] || 35;
+  const idx = index !== null ? `#${index + 1} ` : '';
+  const stars = formatStars(RARITY_STARS[rarity]);
+
+  const v = (content) => {
+    const padded = padAnsiEnd(content, inner);
+    return `  ${c.color}║${R}${c.bg} ${padded}${R} ${c.color}║${R}`;
+  };
+  const blank = () => v('');
 
-      const label = name.slice(0, 5).padEnd(5);
-      const bar = statBar(val, style.color);
-      const valStr = String(val).padStart(3);
-      const marker = isHigh ? `${style.accent}▲${RESET}` : isLow ? `\x1b[31m▼${RESET}` : ' ';
+  const decorChar = isAsciiOnlyTerminal() ? '*' : '✦';
+  const decor = `  ${c.color}╠${'─'.repeat(Math.floor(W / 2 - 2))}${decorChar}${'─'.repeat(Math.ceil(W / 2 - 1))}╣${R}`;
 
-      lines.push(b.row(`${GRAY}${label}${RESET} ${bar} ${valStr} ${marker}`));
+  const lines = [];
+  lines.push('');
+  lines.push(`  ${c.color}╔${'═'.repeat(W)}╗${R}`);
+  lines.push(blank());
+  lines.push(v(centerText(`${c.accent}${BOLD}${formatStars(RARITY_STARS[rarity])} ${rarity.toUpperCase()}${R}`, inner)));
+  lines.push(v(centerText(`${c.accent}${BOLD}${idx}${species.toUpperCase()}${R}${shiny ? ` ${formatShinyTag('✨ SHINY')}` : ''}`, inner)));
+  lines.push(blank());
+  lines.push(decor);
+  lines.push(blank());
+
+  // Full sprite (colored)
+  const sprite = toTerminalSafeText(renderSprite(species, formatEye(eye), hat, frame));
+  for (const sl of sprite.split('\n')) {
+    lines.push(v(centerText(`${c.accent}${sl}${R}`, inner)));
+  }
+
+  lines.push(blank());
+  lines.push(decor);
+  lines.push(v(`${DIM}Eye${R} ${formatEye(eye)}   ${DIM}Hat${R} ${toTerminalSafeText(hat === 'none' ? '—' : hat)}   ${DIM}Shiny${R} ${shiny ? `${c.accent}YES${R}` : `${GRAY}no${R}`}`));
+  lines.push(blank());
+
+  // Stat bars with wide format
+  if (stats) {
+    for (const name of STATS) {
+      if (stats[name] === undefined) continue;
+      const val = stats[name];
+      const isHigh = val >= floor + 40;
+      const isLow = val <= floor;
+      const bar = statBar(val, c.color);
+      const marker = isHigh ? `${c.accent}▲${R}` : isLow ? `\x1b[31m▼${R}` : ' ';
+      lines.push(v(`  ${GRAY}${name.padEnd(9)}${R} ${bar} ${String(val).padStart(3)} ${marker}`));
     }
   }
 
-  // Salt line
+  lines.push(blank());
   if (showSalt && result.salt) {
-    lines.push(b.mid);
-    lines.push(b.row(`${DIM}${ITALIC}${result.salt}${RESET}`));
+    lines.push(v(`${DIM}${ITALIC}${result.salt}${R}`));
   }
+  lines.push(`  ${c.color}╚${'═'.repeat(W)}╝${R}`);
+  lines.push('');
+  return lines.join('\n');
+}
+
+// ─── LEGENDARY: sparkle frame, maximum presence ─────────
 
-  lines.push(b.bottom);
+function renderLegendary(result, { index, frame, showSalt }) {
+  const { bones } = result;
+  const { species, eye, hat, shiny, stats, rarity } = bones;
+  const c = RARITY.legendary;
+  const W = 40;
+  const inner = W - 2;
+  const floor = STAT_FLOORS[rarity] || 50;
+  const idx = index !== null ? `#${index + 1} ` : '';
+
+  const v = (content) => {
+    const padded = padAnsiEnd(content, inner);
+    return `  ${c.color}║${R}${c.bg} ${padded}${R} ${c.color}║${R}`;
+  };
+  const blank = () => v('');
+
+  const sp = isAsciiOnlyTerminal() ? '*' : '✦';
+  const sparkleTop = `  ${c.color}${sp}${'═'.repeat(W)}${sp}${R}`;
+  const sparkleBot = `  ${c.color}${sp}${'═'.repeat(W)}${sp}${R}`;
+  const decor = `  ${c.color}║${'─'.repeat(Math.floor(W / 2 - 3))} ${sp} ${sp} ${sp} ${'─'.repeat(Math.ceil(W / 2 - 4))}║${R}`;
+
+  const lines = [];
   lines.push('');
+  lines.push(sparkleTop);
+  lines.push(blank());
+  lines.push(v(centerText(`${c.accent}${BOLD}${formatStars('★ ★ ★ ★ ★')}  L E G E N D A R Y${R}`, inner)));
+  lines.push(blank());
+  lines.push(v(centerText(`${c.accent}${BOLD}${sp} ${idx}${species.toUpperCase()} ${sp}${R}`, inner)));
+  lines.push(blank());
+  lines.push(decor);
+  lines.push(blank());
 
+  // Full sprite (golden)
+  const sprite = toTerminalSafeText(renderSprite(species, formatEye(eye), hat, frame));
+  for (const sl of sprite.split('\n')) {
+    lines.push(v(centerText(`${c.accent}${sl}${R}`, inner)));
+  }
+
+  lines.push(blank());
+  lines.push(decor);
+  lines.push(blank());
+  lines.push(v(`  ${DIM}Eye${R} ${formatEye(eye)}    ${DIM}Hat${R} ${toTerminalSafeText(hat === 'none' ? '—' : hat)}    ${shiny ? `${c.accent}${BOLD}✨ SHINY!${R}` : ''}`));
+  lines.push(blank());
+
+  // Full stat bars
+  if (stats) {
+    for (const name of STATS) {
+      if (stats[name] === undefined) continue;
+      const val = stats[name];
+      const isHigh = val >= floor + 40;
+      const isLow = val <= floor;
+      const bar = statBar(val, c.color);
+      const marker = isHigh ? `${c.accent}▲${R}` : isLow ? `\x1b[31m▼${R}` : ' ';
+      lines.push(v(`  ${c.accent}${name.padEnd(9)}${R} ${bar} ${String(val).padStart(3)} ${marker}`));
+    }
+  }
+
+  lines.push(blank());
+  if (showSalt && result.salt) {
+    lines.push(v(`${DIM}${ITALIC}${result.salt}${R}`));
+    lines.push(blank());
+  }
+  lines.push(sparkleBot);
+  lines.push('');
   return lines.join('\n');
 }
 
+// ─── Public API ─────────────────────────────────────────
+
+export function renderCard(result, { showSalt = false, index = null, frame = 0 } = {}) {
+  const { rarity } = result.bones;
+  const opts = { index, frame, showSalt };
+
+  switch (rarity) {
+    case 'common':    return renderCommon(result, opts);
+    case 'uncommon':  return renderUncommon(result, opts);
+    case 'rare':      return renderRare(result, opts);
+    case 'epic':      return renderEpic(result, opts);
+    case 'legendary': return renderLegendary(result, opts);
+    default:          return renderCommon(result, opts);
+  }
+}
+
 export function renderMiniCard(result, index) {
   const { bones } = result;
   const { rarity, species, eye, hat, shiny } = bones;
-  const style = RARITY_STYLE[rarity];
+  const c = RARITY[rarity] || RARITY.common;
   const stars = formatStars(RARITY_STARS[rarity]);
   const shinyTag = shiny
     ? (isAsciiOnlyTerminal() ? ' [S]' : ` ${formatShinyTag('✨')}`)
     : '';
+  const hatTag = hat !== 'none' ? ` ${DIM}+${toTerminalSafeText(hat)}${R}` : '';
 
   const idx = String(index + 1).padStart(2, ' ');
-  const badge = style.badge.slice(0, 3);
-  const hatTag = hat !== 'none' ? ` ${DIM}+${toTerminalSafeText(hat)}${RESET}` : '';
-
-  return `${style.color}${idx}. ${formatEye(eye)} ${BOLD}${species.padEnd(10)}${RESET}${style.color} ${stars.padEnd(5)} ${badge}${shinyTag}${hatTag}${RESET}`;
+  return `${c.color}${idx}. ${formatEye(eye)} ${BOLD}${species.padEnd(10)}${R}${c.color} ${stars.padEnd(5)} ${rarity.slice(0, 3).toUpperCase()}${shinyTag}${hatTag}${R}`;
 }

package/src/selector.mjs

@@ -1,212 +1,216 @@
-// Terminal UI selector — zero dependencies, arrow key navigation
-import { emitKeypressEvents } from 'readline';
-import { padAnsiEnd, stripAnsi } from './ansi.mjs';
-
-export function getSelectorRenderLineCount(bodyRows) {
-  return bodyRows + 5;
-}
-
-export function getFullscreenBodyRows({ gridRows, previewHeight = 0, previewLinesLength = 0, footerLinesLength = 1, terminalRows = 24 }) {
-  const desiredBodyRows = Math.max(gridRows, previewHeight, previewLinesLength);
-  const reservedRows = 2 + 1 + Math.max(1, footerLinesLength);
-  const availableBodyRows = Math.max(gridRows, terminalRows - reservedRows);
-  return Math.min(desiredBodyRows, availableBodyRows);
-}
-
-/**
- * Show an interactive list selector with arrow key navigation.
- * @param {Object} options
- * @param {string} options.title - Title shown above the list
- * @param {Array<{label: string, description?: string, value: any}>} options.items
- * @param {number} [options.columns=2] - Number of columns
- * @param {number} [options.selected=0] - Initial selection index
- * @param {(item: any, meta: { cursor: number, tick: number }) => string} [options.preview] - Optional preview panel renderer
- * @param {number} [options.previewHeight=0] - Reserved preview panel height
- * @param {boolean} [options.fullscreen=false] - Render as fullscreen screen instead of in-place widget
- * @param {number} [options.animationIntervalMs=0] - Optional preview animation interval
- * @param {(item: any, meta: { cursor: number, tick: number, state: any }) => string[]} [options.footer] - Optional footer renderer
- * @param {any} [options.state] - Mutable selector-local state passed to preview/footer handlers
- * @param {(str: string, key: any, meta: { cursor: number, item: any, items: any[], tick: number, state: any }) => {handled?: boolean, state?: any, patch?: object, tick?: number}|void} [options.onKey] - Optional custom key handler
- * @returns {Promise<{index: number, value: any} | null>} Selected item or null if cancelled
- */
-export async function select({ title, items, columns = 2, selected = 0, preview = null, previewHeight = 0, fullscreen = false, animationIntervalMs = 0, footer = null, state = {}, onKey = null }) {
-  if (!process.stdin.isTTY) return null;
-
-  const RESET = '\x1b[0m';
-  const BOLD = '\x1b[1m';
-  const DIM = '\x1b[2m';
-  const CYAN = '\x1b[36m';
-  const BG_CYAN = '\x1b[46m\x1b[30m';
-  const HIDE_CURSOR = '\x1b[?25l';
-  const SHOW_CURSOR = '\x1b[?25h';
-  const CLEAR = '\x1b[2J\x1b[H';
-
-  let cursor = selected;
-  let tick = 0;
-  let selectorState = state;
-  const rows = Math.ceil(items.length / columns);
-  const colWidth = 22;
-  let renderedBodyRows = rows;
-  let didFullscreenInit = false;
-
-  function render() {
-    const meta = { cursor, tick, state: selectorState };
-    const previewText = typeof preview === 'function' ? preview(items[cursor], meta) : '';
-    const previewLines = previewText ? String(previewText).split('\n') : [];
-    const footerLines = typeof footer === 'function' ? footer(items[cursor], meta) : null;
-    const resolvedFooter = Array.isArray(footerLines) && footerLines.length > 0
-      ? footerLines
-      : [`${CYAN}▶${RESET} ${items[cursor].label}${items[cursor].description ? `  ${DIM}${items[cursor].description}${RESET}` : ''}`];
-    const bodyRows = fullscreen
-      ? getFullscreenBodyRows({
-        gridRows: rows,
-        previewHeight,
-        previewLinesLength: previewLines.length,
-        footerLinesLength: resolvedFooter.length,
-        terminalRows: process.stdout.rows || 24,
-      })
-      : Math.max(rows, previewHeight, previewLines.length);
-    const totalLines = getSelectorRenderLineCount(Math.max(renderedBodyRows, bodyRows)) + (resolvedFooter.length - 1);
-
-    if (fullscreen) {
-      if (!didFullscreenInit) {
-        process.stdout.write(CLEAR);
-        for (let i = 0; i < totalLines; i++) process.stdout.write('\n');
-        didFullscreenInit = true;
-      }
-      process.stdout.write(`\x1b[${totalLines}A`);
-    } else {
-      process.stdout.write(`\x1b[${totalLines}A`);
-    }
-
-    // Title
-    process.stdout.write(`\x1b[2K  ${BOLD}${title}${RESET}\n`);
-    process.stdout.write(`\x1b[2K\n`);
-
-    for (let row = 0; row < bodyRows; row++) {
-      let gridLine = '  ';
-
-      if (row < rows) {
-        for (let col = 0; col < columns; col++) {
-          const idx = row * columns + col;
-          if (idx >= items.length) {
-            gridLine += ' '.repeat(colWidth);
-            continue;
-          }
-          const item = items[idx];
-          const num = String(idx + 1).padStart(2);
-          const text = `${num}. ${item.label}`;
-          const padded = padAnsiEnd(text, colWidth - 1);
-
-          if (idx === cursor) {
-            const inverted = stripAnsi(text).padEnd(colWidth - 1);
-            gridLine += `${BG_CYAN} ${inverted}${RESET}`;
-          } else {
-            gridLine += ` ${padded}`;
-          }
-        }
-      } else {
-        gridLine += ' '.repeat(columns * colWidth);
-      }
-
-      const previewLine = previewLines[row] ? `    ${previewLines[row]}` : '';
-      process.stdout.write(`\x1b[2K${gridLine}${previewLine}\n`);
-    }
-
-    process.stdout.write(`\x1b[2K\n`);
-    for (const line of resolvedFooter) {
-      process.stdout.write(`\x1b[2K  ${line}\n`);
-    }
-    renderedBodyRows = bodyRows;
-  }
-
-  return new Promise((resolve) => {
-    process.stdout.write(HIDE_CURSOR);
-
-    let animationTimer = null;
-
-    if (!fullscreen) {
-      const initialPreviewText = typeof preview === 'function' ? preview(items[cursor], { cursor, tick, state: selectorState }) : '';
-      const initialPreviewLines = initialPreviewText ? String(initialPreviewText).split('\n') : [];
-      const initialFooter = typeof footer === 'function' ? footer(items[cursor], { cursor, tick, state: selectorState }) : null;
-      const resolvedFooter = Array.isArray(initialFooter) && initialFooter.length > 0 ? initialFooter : [''];
-      const totalLines = getSelectorRenderLineCount(Math.max(rows, previewHeight, initialPreviewLines.length)) + (resolvedFooter.length - 1);
-      for (let i = 0; i < totalLines; i++) process.stdout.write('\n');
-    }
-
-    render();
-
-    if (animationIntervalMs > 0) {
-      animationTimer = setInterval(() => {
-        tick++;
-        render();
-      }, animationIntervalMs);
-    }
-
-    emitKeypressEvents(process.stdin);
-    if (process.stdin.setRawMode) process.stdin.setRawMode(true);
-    process.stdin.resume();
-
-    function cleanup() {
-      if (process.stdin.setRawMode) process.stdin.setRawMode(false);
-      process.stdin.pause();
-      process.stdin.removeListener('keypress', handleKeypress);
-      if (animationTimer) clearInterval(animationTimer);
-      if (fullscreen) process.stdout.write(CLEAR);
-      process.stdout.write(SHOW_CURSOR);
-    }
-
-    function handleKeypress(str, key) {
-      if (!key) return;
-
-      if (typeof onKey === 'function') {
-        const custom = onKey(str, key, {
-          cursor,
-          item: items[cursor],
-          items,
-          tick,
-          state: selectorState,
-        });
-        if (custom) {
-          if (Object.prototype.hasOwnProperty.call(custom, 'state')) {
-            selectorState = custom.state;
-          } else if (custom.patch && selectorState && typeof selectorState === 'object') {
-            selectorState = { ...selectorState, ...custom.patch };
-          }
-          if (typeof custom.tick === 'number') tick = custom.tick;
-          if (custom.handled) {
-            tick++;
-            render();
-            return;
-          }
-        }
-      }
-
-      if (key.name === 'up') {
-        cursor = (cursor - columns + items.length) % items.length;
-        tick++;
-        render();
-      } else if (key.name === 'down') {
-        cursor = (cursor + columns) % items.length;
-        tick++;
-        render();
-      } else if (key.name === 'left') {
-        cursor = (cursor - 1 + items.length) % items.length;
-        tick++;
-        render();
-      } else if (key.name === 'right') {
-        cursor = (cursor + 1) % items.length;
-        tick++;
-        render();
-      } else if (key.name === 'return') {
-        cleanup();
-        resolve({ index: cursor, value: items[cursor].value });
-      } else if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
-        cleanup();
-        resolve(null);
-      }
-    }
-
-    process.stdin.on('keypress', handleKeypress);
-  });
-}
+// Terminal UI selector — v2: clean layout, subtle focus, smooth feel
+import { emitKeypressEvents } from 'readline';
+import { padAnsiEnd, stripAnsi, visibleLength } from './ansi.mjs';
+
+const R = '\x1b[0m';
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const CYAN = '\x1b[36m';
+const GRAY = '\x1b[90m';
+const WHITE = '\x1b[37m';
+const HIDE_CURSOR = '\x1b[?25l';
+const SHOW_CURSOR = '\x1b[?25h';
+const CLEAR = '\x1b[2J\x1b[H';
+
+// Focus style: subtle arrow + bold text, no heavy BG inversion
+const FOCUS_POINTER = `${CYAN}›${R}`;
+const UNFOCUS_SPACE = ' ';
+
+export function getSelectorRenderLineCount(bodyRows) {
+  return bodyRows + 5;
+}
+
+export function getFullscreenBodyRows({ gridRows, previewHeight = 0, previewLinesLength = 0, footerLinesLength = 1, terminalRows = 24 }) {
+  const desiredBodyRows = Math.max(gridRows, previewHeight, previewLinesLength);
+  const reservedRows = 2 + 1 + Math.max(1, footerLinesLength);
+  const availableBodyRows = Math.max(gridRows, terminalRows - reservedRows);
+  return Math.min(desiredBodyRows, availableBodyRows);
+}
+
+/**
+ * Show an interactive list selector with arrow key navigation.
+ * @param {Object} options
+ * @param {string} options.title
+ * @param {Array<{label: string, description?: string, value: any}>} options.items
+ * @param {number} [options.columns=2]
+ * @param {number} [options.selected=0]
+ * @param {(item: any, meta: { cursor: number, tick: number }) => string} [options.preview]
+ * @param {number} [options.previewHeight=0]
+ * @param {boolean} [options.fullscreen=false]
+ * @param {number} [options.animationIntervalMs=0]
+ * @param {(item: any, meta: { cursor: number, tick: number, state: any }) => string[]} [options.footer]
+ * @param {any} [options.state]
+ * @param {(str: string, key: any, meta: { cursor: number, item: any, items: any[], tick: number, state: any }) => {handled?: boolean, state?: any, patch?: object, tick?: number}|void} [options.onKey]
+ * @returns {Promise<{index: number, value: any} | null>}
+ */
+export async function select({ title, items, columns = 2, selected = 0, preview = null, previewHeight = 0, fullscreen = false, animationIntervalMs = 0, footer = null, state = {}, onKey = null }) {
+  if (!process.stdin.isTTY) return null;
+
+  let cursor = selected;
+  let tick = 0;
+  let selectorState = state;
+  const rows = Math.ceil(items.length / columns);
+  const colWidth = Math.min(24, Math.floor(((process.stdout.columns || 80) - 6) / columns));
+  let renderedBodyRows = rows;
+  let didFullscreenInit = false;
+
+  function render() {
+    const meta = { cursor, tick, state: selectorState };
+    const previewText = typeof preview === 'function' ? preview(items[cursor], meta) : '';
+    const previewLines = previewText ? String(previewText).split('\n') : [];
+    const footerLines = typeof footer === 'function' ? footer(items[cursor], meta) : null;
+    const resolvedFooter = Array.isArray(footerLines) && footerLines.length > 0
+      ? footerLines
+      : [`  ${FOCUS_POINTER} ${items[cursor].label}${items[cursor].description ? `  ${DIM}${items[cursor].description}${R}` : ''}`];
+    const bodyRows = fullscreen
+      ? getFullscreenBodyRows({
+        gridRows: rows,
+        previewHeight,
+        previewLinesLength: previewLines.length,
+        footerLinesLength: resolvedFooter.length,
+        terminalRows: process.stdout.rows || 24,
+      })
+      : Math.max(rows, previewHeight, previewLines.length);
+    const totalLines = getSelectorRenderLineCount(Math.max(renderedBodyRows, bodyRows)) + (resolvedFooter.length - 1);
+
+    if (fullscreen) {
+      if (!didFullscreenInit) {
+        process.stdout.write(CLEAR);
+        for (let i = 0; i < totalLines; i++) process.stdout.write('\n');
+        didFullscreenInit = true;
+      }
+      process.stdout.write(`\x1b[${totalLines}A`);
+    } else {
+      process.stdout.write(`\x1b[${totalLines}A`);
+    }
+
+    // Title
+    process.stdout.write(`\x1b[2K  ${BOLD}${title}${R}\n`);
+    process.stdout.write(`\x1b[2K\n`);
+
+    for (let row = 0; row < bodyRows; row++) {
+      let gridLine = '  ';
+
+      if (row < rows) {
+        for (let col = 0; col < columns; col++) {
+          const idx = row * columns + col;
+          if (idx >= items.length) {
+            gridLine += ' '.repeat(colWidth);
+            continue;
+          }
+          const item = items[idx];
+          const isFocused = idx === cursor;
+
+          if (isFocused) {
+            const text = `${FOCUS_POINTER} ${BOLD}${stripAnsi(item.label)}${R}`;
+            gridLine += padAnsiEnd(text, colWidth);
+          } else {
+            const text = `${UNFOCUS_SPACE} ${DIM}${stripAnsi(item.label)}${R}`;
+            gridLine += padAnsiEnd(text, colWidth);
+          }
+        }
+      } else {
+        gridLine += ' '.repeat(columns * colWidth);
+      }
+
+      const previewLine = previewLines[row] ? `   ${previewLines[row]}` : '';
+      process.stdout.write(`\x1b[2K${gridLine}${previewLine}\n`);
+    }
+
+    process.stdout.write(`\x1b[2K\n`);
+    for (const line of resolvedFooter) {
+      process.stdout.write(`\x1b[2K  ${line}\n`);
+    }
+    renderedBodyRows = bodyRows;
+  }
+
+  return new Promise((resolve) => {
+    process.stdout.write(HIDE_CURSOR);
+
+    let animationTimer = null;
+
+    if (!fullscreen) {
+      const initialPreviewText = typeof preview === 'function' ? preview(items[cursor], { cursor, tick, state: selectorState }) : '';
+      const initialPreviewLines = initialPreviewText ? String(initialPreviewText).split('\n') : [];
+      const initialFooter = typeof footer === 'function' ? footer(items[cursor], { cursor, tick, state: selectorState }) : null;
+      const resolvedFooter = Array.isArray(initialFooter) && initialFooter.length > 0 ? initialFooter : [''];
+      const totalLines = getSelectorRenderLineCount(Math.max(rows, previewHeight, initialPreviewLines.length)) + (resolvedFooter.length - 1);
+      for (let i = 0; i < totalLines; i++) process.stdout.write('\n');
+    }
+
+    render();
+
+    if (animationIntervalMs > 0) {
+      animationTimer = setInterval(() => {
+        tick++;
+        render();
+      }, animationIntervalMs);
+    }
+
+    emitKeypressEvents(process.stdin);
+    if (process.stdin.setRawMode) process.stdin.setRawMode(true);
+    process.stdin.resume();
+
+    function cleanup() {
+      if (process.stdin.setRawMode) process.stdin.setRawMode(false);
+      process.stdin.pause();
+      process.stdin.removeListener('keypress', handleKeypress);
+      if (animationTimer) clearInterval(animationTimer);
+      if (fullscreen) process.stdout.write(CLEAR);
+      process.stdout.write(SHOW_CURSOR);
+    }
+
+    function handleKeypress(str, key) {
+      if (!key) return;
+
+      if (typeof onKey === 'function') {
+        const custom = onKey(str, key, {
+          cursor,
+          item: items[cursor],
+          items,
+          tick,
+          state: selectorState,
+        });
+        if (custom) {
+          if (Object.prototype.hasOwnProperty.call(custom, 'state')) {
+            selectorState = custom.state;
+          } else if (custom.patch && selectorState && typeof selectorState === 'object') {
+            selectorState = { ...selectorState, ...custom.patch };
+          }
+          if (typeof custom.tick === 'number') tick = custom.tick;
+          if (custom.handled) {
+            tick++;
+            render();
+            return;
+          }
+        }
+      }
+
+      if (key.name === 'up') {
+        cursor = (cursor - columns + items.length) % items.length;
+        tick++;
+        render();
+      } else if (key.name === 'down') {
+        cursor = (cursor + columns) % items.length;
+        tick++;
+        render();
+      } else if (key.name === 'left') {
+        cursor = (cursor - 1 + items.length) % items.length;
+        tick++;
+        render();
+      } else if (key.name === 'right') {
+        cursor = (cursor + 1) % items.length;
+        tick++;
+        render();
+      } else if (key.name === 'return') {
+        cleanup();
+        resolve({ index: cursor, value: items[cursor].value });
+      } else if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
+        cleanup();
+        resolve(null);
+      }
+    }
+
+    process.stdin.on('keypress', handleKeypress);
+  });
+}

package/src/ui.mjs

@@ -1,106 +1,136 @@
-import { RARITIES, RARITY_STARS, RARITY_WEIGHTS } from './engine.mjs';
-import { padAnsiEnd, visibleLength } from './ansi.mjs';
-
-const RESET = '\x1b[0m';
-const BOLD = '\x1b[1m';
-const DIM = '\x1b[2m';
-const CYAN = '\x1b[36m';
-const GREEN = '\x1b[32m';
-const MAGENTA = '\x1b[35m';
-const YELLOW = '\x1b[33m';
-const RED = '\x1b[31m';
-const WHITE = '\x1b[37m';
-const GRAY = '\x1b[90m';
-
-const RARITY_TONE = {
-  common: WHITE,
-  uncommon: GREEN,
-  rare: CYAN,
-  epic: MAGENTA,
-  legendary: '\x1b[33;1m',
-};
-
-export function renderBanner(title = 'SPEAKI BUDDY LAB', subtitle = 'npm-only buddy reroll terminal') {
-  const border = '═'.repeat(54);
-  return [
-    '',
-    `${MAGENTA}${border}${RESET}`,
-    `${MAGENTA}  ${BOLD}${title}${RESET}`,
-    `${DIM}  ${subtitle}${RESET}`,
-    `${DIM}  collectible-rpg terminal companion${RESET}`,
-    `${MAGENTA}${border}${RESET}`,
-    '',
-  ].join('\n');
-}
-
-export function renderPanel(title, lines = [], tone = CYAN) {
-  const width = Math.max(visibleLength(title) + 6, ...lines.map((line) => visibleLength(String(line))), 28);
-  const content = lines.map((line) => `  ${tone}│${RESET} ${padAnsiEnd(String(line), width - 4)} ${tone}│${RESET}`);
-  return [
-    `${tone}┌${'─'.repeat(width - 2)}┐${RESET}`,
-    `${tone}│${RESET} ${tone}${BOLD}${title}${RESET}${' '.repeat(Math.max(0, width - visibleLength(title) - 4))}${tone}│${RESET}`,
-    `${tone}├${'─'.repeat(width - 2)}┤${RESET}`,
-    ...content,
-    `${tone}└${'─'.repeat(width - 2)}┘${RESET}`,
-    '',
-  ].join('\n');
-}
-
-export function renderQuotaSummary({ used = 0, limit = 0, starred = false, eventRemaining = 0 } = {}) {
-  const remaining = Math.max(0, limit - used);
-  return [
-    `${BOLD}Quota${RESET} ${remaining}/${limit} left${starred ? '  ⭐' : ''}`,
-    `${DIM}Used today: ${used}${RESET}`,
-    `${DIM}Event rerolls left: ${eventRemaining}${RESET}`,
-  ];
-}
-
-export function renderRarityOverview() {
-  return RARITIES.map((rarity) => {
-    const pct = `${RARITY_WEIGHTS[rarity]}%`.padStart(3);
-    const color = RARITY_TONE[rarity] || WHITE;
-    return `${color}${RARITY_STARS[rarity].padEnd(6)}${RESET} ${color}${rarity.padEnd(10)}${RESET} ${GRAY}${pct}${RESET}`;
-  });
-}
-
-export function renderHomeScreen() {
-  return [
-    renderBanner(),
-    renderPanel('What You Can Do', [
-      `${GREEN}bdy check${RESET}      current buddy + install state`,
-      `${GREEN}bdy gacha 10${RESET}   run a 10-pull session`,
-      `${GREEN}bdy reroll${RESET}     preview and patch a chosen buddy`,
-      `${GREEN}bdy dex${RESET}        browse collected buddies`,
-      `${GREEN}bdy restore${RESET}    restore original salt`,
-    ]),
-    renderPanel('Design Direction', [
-      'Speaki-first terminal UX',
-      'npm install is the primary path',
-      'dex replays discovered buddies deterministically',
-      'forms, rarity, and flavor presented as card sections',
-    ], YELLOW),
-    renderPanel('Rarity Table', renderRarityOverview(), MAGENTA),
-  ].join('\n');
-}
-
-export function renderCheckScreen({ accountLabel, installLabel, salt, patched, quotaLines, buddyCard, profileLine = '' }) {
-  return [
-    renderBanner('SPEAKI BUDDY STATUS', 'current companion, install, and quota'),
-    renderPanel('Runtime', [
-      `${BOLD}Account${RESET} ${accountLabel}`,
-      `${BOLD}Install${RESET} ${installLabel}`,
-      `${BOLD}Salt${RESET} ${salt}${patched ? ` ${YELLOW}(patched)${RESET}` : ` ${DIM}(original)${RESET}`}`,
-      ...(profileLine ? [profileLine] : []),
-    ]),
-    renderPanel('Quota', quotaLines, GREEN),
-    buddyCard,
-  ].join('\n');
-}
-
-export function renderSearchStatus({ targetSpecies, criteria, attempts }) {
-  const rarityText = criteria?.rarity ? ` @ ${criteria.rarity}` : '';
-  const sourceText = criteria?.source ? `${DIM}${criteria.source}${RESET}` : '';
-  return `${CYAN}  Searching ${targetSpecies}${rarityText}${RESET} ${sourceText} ${DIM}(attempts: ${attempts})${RESET}`;
-}
-
-export { RESET, BOLD, DIM, CYAN, GREEN, MAGENTA, YELLOW, RED };
+// UI layout primitives — v2: clean, consistent, Speaki-branded
+import { RARITIES, RARITY_STARS, RARITY_WEIGHTS } from './engine.mjs';
+import { padAnsiEnd, visibleLength } from './ansi.mjs';
+import { formatStars } from './terminal.mjs';
+
+const R = '\x1b[0m';
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const ITALIC = '\x1b[3m';
+const CYAN = '\x1b[36m';
+const GREEN = '\x1b[32m';
+const MAGENTA = '\x1b[35m';
+const YELLOW = '\x1b[33;1m';
+const RED = '\x1b[31m';
+const WHITE = '\x1b[37m';
+const GRAY = '\x1b[90m';
+
+const RARITY_TONE = {
+  common: GRAY,
+  uncommon: GREEN,
+  rare: '\x1b[34m',
+  epic: MAGENTA,
+  legendary: YELLOW,
+};
+
+// ─── Layout primitives ──────────────────────────────────
+
+function hr(width = 48, char = '─', color = GRAY) {
+  return `${color}${char.repeat(width)}${R}`;
+}
+
+function heading(text, color = MAGENTA) {
+  return `${color}${BOLD}${text}${R}`;
+}
+
+function label(key, value) {
+  return `  ${GRAY}${key}${R}  ${value}`;
+}
+
+function bullet(text, icon = '›', color = GREEN) {
+  return `  ${color}${icon}${R} ${text}`;
+}
+
+// ─── Banner ─────────────────────────────────────────────
+
+export function renderBanner(title = 'BUDDY LAB', subtitle = 'collectible companion terminal') {
+  return [
+    '',
+    `  ${MAGENTA}${BOLD}${title}${R}`,
+    `  ${DIM}${subtitle}${R}`,
+    `  ${hr(40)}`,
+    '',
+  ].join('\n');
+}
+
+// ─── Section panel ──────────────────────────────────────
+
+export function renderPanel(title, lines = [], color = GRAY) {
+  const out = [];
+  out.push(`  ${color}${BOLD}${title}${R}`);
+  for (const line of lines) {
+    out.push(`    ${line}`);
+  }
+  out.push('');
+  return out.join('\n');
+}
+
+// ─── Quota summary ──────────────────────────────────────
+
+export function renderQuotaSummary({ used = 0, limit = 0, starred = false, eventRemaining = 0 } = {}) {
+  const remaining = Math.max(0, limit - used);
+  const bar = renderQuotaBar(used, limit);
+  return [
+    `${bar}  ${DIM}${remaining}/${limit} left${starred ? '  ⭐' : ''}${R}`,
+    `${DIM}사용: ${used}  이벤트: ${eventRemaining}회 남음${R}`,
+  ];
+}
+
+function renderQuotaBar(used, limit) {
+  const w = 10;
+  const filled = Math.min(w, Math.round((used / Math.max(limit, 1)) * w));
+  const remaining = w - filled;
+  return `${GREEN}${'█'.repeat(remaining)}${GRAY}${'░'.repeat(filled)}${R}`;
+}
+
+// ─── Rarity table ───────────────────────────────────────
+
+export function renderRarityOverview() {
+  return RARITIES.map((rarity) => {
+    const pct = `${RARITY_WEIGHTS[rarity]}%`.padStart(3);
+    const color = RARITY_TONE[rarity] || WHITE;
+    const stars = formatStars(RARITY_STARS[rarity]);
+    return `${color}${stars.padEnd(6)}${R} ${color}${rarity.padEnd(10)}${R} ${GRAY}${pct}${R}`;
+  });
+}
+
+// ─── Home screen ────────────────────────────────────────
+
+export function renderHomeScreen() {
+  return [
+    renderBanner(),
+    renderPanel('Commands', [
+      `${GREEN}bdy check${R}      ${DIM}현재 버디 + 설치 상태${R}`,
+      `${GREEN}bdy gacha 10${R}   ${DIM}10연차 가챠${R}`,
+      `${GREEN}bdy reroll${R}     ${DIM}후보 뽑고 바로 적용${R}`,
+      `${GREEN}bdy dex${R}        ${DIM}도감 탐색${R}`,
+      `${GREEN}bdy restore${R}    ${DIM}원래 버디로 복원${R}`,
+    ]),
+    renderPanel('Rarity', renderRarityOverview(), MAGENTA),
+  ].join('\n');
+}
+
+// ─── Check screen ───────────────────────────────────────
+
+export function renderCheckScreen({ accountLabel, installLabel, salt, patched, quotaLines, buddyCard, profileLine = '' }) {
+  return [
+    renderBanner('BUDDY STATUS', '현재 버디 + 설치 상태'),
+    renderPanel('Runtime', [
+      label('Account', accountLabel),
+      label('Install', installLabel),
+      label('Salt', `${salt}${patched ? ` ${YELLOW}(patched)${R}` : ` ${DIM}(original)${R}`}`),
+      ...(profileLine ? [label('Profile', profileLine)] : []),
+    ]),
+    renderPanel('Quota', quotaLines, GREEN),
+    buddyCard,
+  ].join('\n');
+}
+
+// ─── Search status ──────────────────────────────────────
+
+export function renderSearchStatus({ targetSpecies, criteria, attempts }) {
+  const rarityText = criteria?.rarity ? ` ${RARITY_TONE[criteria.rarity] || ''}${criteria.rarity}${R}` : '';
+  return `  ${CYAN}›${R} ${targetSpecies}${rarityText} ${GRAY}(${attempts} attempts)${R}`;
+}
+
+export { R as RESET, BOLD, DIM, CYAN, GREEN, MAGENTA, YELLOW, RED };