claude-buddy-reroll 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-buddy-reroll",
-  "version": "2.0.0",
+  "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/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 };