@axplusb/kepler 1.0.10 → 2.0.0

package/src/ui/approval.mjs

@@ -0,0 +1,167 @@
+/**
+ * Approval prompt UI — Mission Control (PRD-055 §8.2).
+ *
+ *   ┃ AWAITING APPROVAL                                                ┃
+ *   ┃                                                                  ┃
+ *   ┃   ⚙️  shell "rm -rf node_modules"                                ┃
+ *   ┃                                                                  ┃
+ *   ┃   Tier:    SHELL-DANGEROUS                                       ┃
+ *   ┃   Why:     Recursive delete in project directory                 ┃
+ *   ┃                                                                  ┃
+ *   ┃   [Enter] approve   [e] edit   [r] re-plan   [n] reject   [?] why
+ *
+ * The border colour is `brand.accent` (magenta) for explicit-approval
+ * tiers; safe-default prompts use `brand.data` so they read as advisory.
+ *
+ * Pure — caller writes the returned string to stderr.
+ */
+
+import { paint, width as visibleWidth } from './palette.mjs';
+import { icon } from './icons.mjs';
+import { toolDisplayLabel, toolDisplaySummary } from '../terminal/tool-display.mjs';
+import { label as tierLabel, requiresExplicitApproval, TIERS } from '../core/risk-tier.mjs';
+
+const VBAR = '┃';
+const PAD_X = 3;
+
+/**
+ * Default option set per tier. Caller can override via `opts.options`.
+ *
+ * Each option is `{ key, label, value, hint? }`:
+ *   key   — single-letter shortcut (case-insensitive)
+ *   label — text shown in the menu
+ *   value — return value from the menu loop
+ *   hint  — secondary description shown to the right of the label
+ */
+export function defaultOptions(tier) {
+  if (requiresExplicitApproval(tier)) {
+    return [
+      { key: 'y', label: 'approve',  value: 'approve',  hint: 'run this once' },
+      { key: 'e', label: 'edit',     value: 'edit',     hint: 'tweak the args before running' },
+      { key: 'r', label: 're-plan',  value: 'replan',   hint: 'send back to the agent' },
+      { key: 'n', label: 'reject',   value: 'reject',   hint: 'do not run' },
+      { key: '?', label: 'why',      value: 'why',      hint: 'show reasoning' },
+    ];
+  }
+  return [
+    { key: 'y', label: 'approve',         value: 'approve',     hint: 'run this once' },
+    { key: 't', label: 'always allow',    value: 'allow-type',  hint: 'auto-approve future calls to this tool' },
+    { key: 'n', label: 'reject',          value: 'reject',      hint: 'do not run' },
+    { key: '?', label: 'why',             value: 'why',         hint: 'show reasoning' },
+  ];
+}
+
+/**
+ * Render the bordered prompt with vertical, arrow-navigable options.
+ *
+ *   ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ *   ┃ AWAITING APPROVAL          ┃
+ *   ┃                            ┃
+ *   ┃   ⚙️  shell "rm -rf …"     ┃
+ *   ┃                            ┃
+ *   ┃   Tier: SHELL-DANGEROUS    ┃
+ *   ┃   Why:  Recursive delete…  ┃
+ *   ┃                            ┃
+ *   ┃   ▸ [y] approve            ┃   ← selected (accent)
+ *   ┃     [e] edit               ┃
+ *   ┃     [r] re-plan            ┃
+ *   ┃     [n] reject             ┃
+ *   ┃     [?] why                ┃
+ *   ┃                            ┃
+ *   ┃   ↑↓ move · Enter pick     ┃
+ *   ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ *
+ * @param {object} opts
+ * @param {string} opts.tool
+ * @param {object} opts.args
+ * @param {string} opts.tier
+ * @param {string} [opts.why]
+ * @param {number} [opts.width]
+ * @param {Array}  [opts.options]    — override default option set
+ * @param {number} [opts.selected]   — index of the highlighted option
+ */
+export function renderApprovalPrompt({
+  tool, args = {}, tier, why = '', width,
+  options, selected = 0,
+} = {}) {
+  const cols = Math.max(60, Math.min(width || process.stderr.columns || 96, 120));
+  const explicit = requiresExplicitApproval(tier);
+  const accent = explicit ? paint.brand.accent : paint.brand.data;
+  const opts = options || defaultOptions(tier);
+
+  const summary = toolDisplaySummary(tool, args, {});
+  const toolLine = `${icon(tool)} ${paint.text.primary(toolDisplayLabel(tool))} ${paint.text.muted(summary ? `"${truncate(summary, cols - 20)}"` : '')}`;
+
+  const lines = [
+    bar(cols, accent),
+    fill(' AWAITING APPROVAL', cols, accent, paint.bold(accent('AWAITING APPROVAL'))),
+    fill('', cols, accent),
+    fill(' ' + ' '.repeat(PAD_X - 1) + toolLine, cols, accent),
+    fill('', cols, accent),
+    fill(' ' + ' '.repeat(PAD_X - 1) + paint.text.dim('Tier: ') + accent(tierLabel(tier)), cols, accent),
+  ];
+  if (why) {
+    lines.push(fill(' ' + ' '.repeat(PAD_X - 1) + paint.text.dim('Why:  ') + paint.text.primary(truncate(why, cols - PAD_X - 12)), cols, accent));
+  }
+  lines.push(fill('', cols, accent));
+
+  for (let i = 0; i < opts.length; i++) {
+    const o = opts[i];
+    const isSel = i === selected;
+    const cursor = isSel ? accent('▸ ') : paint.text.dim('  ');
+    const keyTag = paint.text.dim('[') + (isSel ? accent(o.key) : paint.brand.data(o.key)) + paint.text.dim('] ');
+    const label = isSel ? paint.bold(accent(o.label)) : paint.text.primary(o.label);
+    const hint = o.hint ? '   ' + paint.text.muted(o.hint) : '';
+    lines.push(fill(' ' + ' '.repeat(PAD_X - 1) + cursor + keyTag + label + hint, cols, accent));
+  }
+
+  lines.push(fill('', cols, accent));
+  lines.push(fill(' ' + ' '.repeat(PAD_X - 1) +
+    paint.text.dim('↑↓ ') + paint.brand.data('move') +
+    paint.text.dim('  ·  Enter ') + paint.brand.data('pick') +
+    paint.text.dim('  ·  or press a letter'), cols, accent));
+  lines.push(bar(cols, accent));
+
+  return '\n' + lines.join('\n');
+}
+
+function bar(width, painter) {
+  // Top / bottom rule: a magenta vertical-stack line spanning the full width.
+  return painter('▔'.repeat(width));
+}
+
+function fill(text, width, painter, override) {
+  const visible = override ?? text;
+  const pad = Math.max(0, width - 2 - visibleWidth(visible));
+  return painter(VBAR) + visible + ' '.repeat(pad) + painter(VBAR);
+}
+
+function truncate(text, n) {
+  const s = String(text || '');
+  if (s.length <= n) return s;
+  return s.slice(0, Math.max(0, n - 1)) + '…';
+}
+
+// ── Inline (safe-default) prompt for shell-medium / network ────────────
+
+/**
+ * Render the compact one-line prompt used for safe-default tiers.
+ * The bordered block is reserved for explicit-approval tiers.
+ *
+ *   ? Run `npm install lodash`?  Tier: SHELL-MEDIUM   [Enter=yes  n=no  ?=why]
+ */
+export function renderInlinePrompt({ tool, args = {}, tier, why = '' } = {}) {
+  const summary = toolDisplaySummary(tool, args, {});
+  const label = toolDisplayLabel(tool);
+  const lines = [];
+  const head = `${paint.brand.data('?')} ${paint.text.primary(label)} ${paint.text.muted(summary ? `"${truncate(summary, 80)}"` : '')}`;
+  lines.push('  ' + head);
+  lines.push('  ' + paint.text.dim('Tier ') + paint.brand.data(tierLabel(tier)) +
+             (why ? '   ' + paint.text.dim('Why ') + paint.text.muted(truncate(why, 60)) : ''));
+  lines.push('  ' + paint.text.dim('[') + paint.brand.data('Enter') + paint.text.dim('=yes  ') +
+             paint.brand.data('n') + paint.text.dim('=no  ') +
+             paint.brand.data('?') + paint.text.dim('=why]'));
+  return '\n' + lines.join('\n');
+}
+
+export { TIERS };

package/src/ui/banner.mjs

@@ -1,162 +1,173 @@
 /**
  * Banner & Branding — Kepler CLI startup display.
+ *
+ * Refreshed for Mission Control (PRD-055 §4.3). Uses the semantic palette
+ * (`paint.brand.*`) so the same banner renders correctly across truecolor,
+ * 256-color, ansi16, and monochrome terminals.
  */
 
 import { execSync } from 'node:child_process';
 import * as path from 'node:path';
 
-// ANSI color helpers
-const BOLD = '\x1b[1m';
-const DIM = '\x1b[2m';
-const RESET = '\x1b[0m';
-const GREEN = '\x1b[32m';
-const CYAN = '\x1b[36m';
-const YELLOW = '\x1b[33m';
-const RED = '\x1b[31m';
-const BLUE = '\x1b[34m';
-const BOLD_GREEN = '\x1b[1;32m';
-const BOLD_CYAN = '\x1b[1;36m';
+import { icons } from './icons.mjs';
+import { paint, strip } from './palette.mjs';
+import { term } from './term.mjs';
+
+const out = process.stderr;
+const write = (s) => { try { out.write(s); } catch {} };
+
+// ── Brand banner ─────────────────────────────────────────────────────────
+
+const KEPLER_LETTERS = ['K', 'E', 'P', 'L', 'E', 'R'];
+
+/**
+ * Render `KEPLER` letter-by-letter as a purple→magenta→cyan gradient.
+ * Each letter picks the appropriate brand token; the palette handles tier
+ * fallbacks transparently.
+ *
+ * Falls back to a single solid color in monochrome / ascii mode so we
+ * still see something distinctive on hostile terminals.
+ */
+function gradientKepler() {
+  if (!term().color) return KEPLER_LETTERS.join(' · ');
+
+  // Three-stop gradient mapped onto six letters. Stop selection:
+  //   0,1 → primary  2,3 → accent  4,5 → data
+  const painters = [
+    paint.brand.primary, paint.brand.primary,
+    paint.brand.accent,  paint.brand.accent,
+    paint.brand.data,    paint.brand.data,
+  ];
+  return KEPLER_LETTERS.map((ch, i) => painters[i](ch)).join(paint.text.dim(' · '));
+}
 
 /**
  * Print the branded orbital banner.
  */
 export function printBanner() {
-    process.stderr.write('\n');
-    process.stderr.write(`${DIM}         ✦${RESET}\n`);
-    process.stderr.write(`${DIM}      ╭──────────────────────────╮${RESET}\n`);
-    process.stderr.write(`${DIM}      │${RESET}  ${BOLD}${CYAN}K · E · P · L · E · R${RESET}  ${DIM}│${RESET}\n`);
-    process.stderr.write(`${DIM}      ╰──────── ${YELLOW}◯${RESET}${DIM} ───────────────╯${RESET}\n`);
-    process.stderr.write(`${DIM}            ╱ ╲${RESET}\n`);
-    process.stderr.write(`${DIM}       the agentic os${RESET}\n`);
-    process.stderr.write('\n');
+  const dim = paint.text.dim;
+  const brandMark = paint.brand.primary(icons.brand);
+  const orbit = paint.brand.accent(icons.orbit);
+
+  write('\n');
+  write(`         ${brandMark}\n`);
+  write(`      ${dim('╭───────────────────────────╮')}\n`);
+  write(`      ${dim('│')}   ${gradientKepler()}   ${dim('│')}\n`);
+  write(`      ${dim('╰────── ')}${orbit}${dim(' ─────────────────╯')}\n`);
+  write(`            ${dim('╱ ╲')}\n`);
+  write(`       ${dim('the agentic os')}\n`);
+  write('\n');
 }
 
+// ── Project info bar ─────────────────────────────────────────────────────
+
+const BAR_WIDTH = 60;
+
 /**
  * Print project info bar with version, project name, and git info.
- * @param {string} version
  */
 export function printProjectInfo(version) {
-    const cwd = process.cwd();
-    const projectName = path.basename(cwd);
-    const gitInfo = getGitInfo(cwd);
-
-    const sep = `${DIM} │ ${RESET}`;
-    let info = `  ${DIM}v${version}${RESET}${sep}${BOLD}${projectName}${RESET}`;
-    if (gitInfo) {
-        info += `${sep}${YELLOW}${gitInfo}${RESET}`;
-    }
-
-    // Draw a boxed info bar
-    const barWidth = 60;
-    const topBorder = `${BLUE}┌${'─'.repeat(barWidth)}┐${RESET}`;
-    const bottomBorder = `${BLUE}└${'─'.repeat(barWidth)}┘${RESET}`;
-
-    process.stderr.write(`${topBorder}\n`);
-    process.stderr.write(`${BLUE}│${RESET} ${info}${' '.repeat(Math.max(0, barWidth - stripAnsi(info).length - 1))}${BLUE}│${RESET}\n`);
-    process.stderr.write(`${bottomBorder}\n`);
+  const cwd = process.cwd();
+  const projectName = path.basename(cwd);
+  const gitInfo = getGitInfo(cwd);
+
+  const sep = paint.text.dim(' │ ');
+  let info = `  ${paint.text.dim('v' + version)}${sep}${paint.bold(projectName)}`;
+  if (gitInfo) {
+    info += `${sep}${paint.state.warn(gitInfo)}`;
+  }
+
+  const padCount = Math.max(0, BAR_WIDTH - strip(info).length - 1);
+  const border = paint.brand.primary;
+
+  write(`${border('┌' + '─'.repeat(BAR_WIDTH) + '┐')}\n`);
+  write(`${border('│')} ${info}${' '.repeat(padCount)}${border('│')}\n`);
+  write(`${border('└' + '─'.repeat(BAR_WIDTH) + '┘')}\n`);
 }
 
-/**
- * Print keyboard hints and usage tips.
- */
-export function printHints() {
-    const env = process.env.TARANG_ENV || process.env.NODE_ENV || 'production';
+// ── Hints ────────────────────────────────────────────────────────────────
 
-    process.stderr.write(`${GREEN}Type your instructions${RESET}, or ${CYAN}/help${RESET} for commands\n`);
-    process.stderr.write(`${DIM}Ctrl+C${RESET}${DIM}=exit  ${RESET}${DIM}/clear${RESET}${DIM}=reset  ${RESET}${DIM}/config${RESET}${DIM}=settings  ${RESET}${DIM}/login${RESET}${DIM}=auth${RESET}\n`);
-    process.stderr.write(`${DIM}env:${env}  models:configured via browser (/config)${RESET}\n`);
-    process.stderr.write('\n');
+export function printHints() {
+  const env = process.env.TARANG_ENV || process.env.NODE_ENV || 'production';
+  const dim = paint.text.dim;
+  const accent = paint.brand.data;
+
+  write(`${paint.state.success('Type your instructions')}, or ${accent('/help')} for commands\n`);
+  write(`${dim('Ctrl+C')}${dim('=exit  ')}${dim('/clear')}${dim('=reset  ')}${dim('/config')}${dim('=settings  ')}${dim('/login')}${dim('=auth')}\n`);
+  write(`${dim('env:' + env + '  models:configured via browser (/config)')}\n`);
+  write('\n');
 }
 
-/**
- * Print auth status indicators.
- * @param {object} creds - { token, openRouterKey, anthropicKey, backendUrl, mode }
- */
-export function printAuthStatus(creds) {
-    const check = `${GREEN}✓${RESET}`;
-    const cross = `${RED}✗${RESET}`;
+// ── Auth + config ────────────────────────────────────────────────────────
 
-    const tokenOk = !!creds.token;
-    const env = process.env.TARANG_ENV || process.env.NODE_ENV || 'production';
-
-    process.stderr.write(`  Auth:     ${tokenOk ? `${check} logged in ${DIM}(/whoami for details)${RESET}` : `${cross} not logged in ${DIM}(/login)${RESET}`}\n`);
-    process.stderr.write(`  Env:      ${DIM}${env}${RESET}\n`);
-    process.stderr.write(`  Mode:     ${DIM}${creds.mode || 'auto'}${RESET}\n`);
-    process.stderr.write('\n');
+export function printAuthStatus(creds) {
+  const check = paint.state.success(icons.pass);
+  const cross = paint.state.danger(icons.fail);
+  const dim = paint.text.dim;
+
+  const tokenOk = !!creds.token;
+  const env = process.env.TARANG_ENV || process.env.NODE_ENV || 'production';
+
+  write(`  Auth:     ${tokenOk
+    ? `${check} logged in ${dim('(/whoami for details)')}`
+    : `${cross} not logged in ${dim('(/login)')}`}\n`);
+  write(`  Env:      ${dim(env)}\n`);
+  write(`  Mode:     ${dim(creds.mode || 'auto')}\n`);
+  write('\n');
 }
 
-/**
- * Print config in a styled format.
- * @param {object} creds
- */
 export function printStyledConfig(creds) {
-    const check = `${GREEN}✓${RESET}`;
-    const cross = `${RED}✗${RESET}`;
-    const mask = (val) => {
-        if (!val) return `${cross} not set`;
-        if (val.length <= 8) return `${check} ****`;
-        return `${check} ${val.slice(0, 6)}...${val.slice(-4)}`;
-    };
-
-    process.stderr.write(`\n${BOLD}Kepler Configuration${RESET} ${DIM}(~/.kepler/config.json)${RESET}\n`);
-    process.stderr.write(`${'─'.repeat(50)}\n`);
-    process.stderr.write(`  Token:          ${mask(creds.token)}\n`);
-    process.stderr.write(`  OpenRouter:     ${mask(creds.openRouterKey)}\n`);
-    process.stderr.write(`  Anthropic:      ${mask(creds.anthropicKey)}\n`);
-    const env = process.env.TARANG_ENV || process.env.NODE_ENV || 'production';
-    process.stderr.write(`  Environment:    ${DIM}${env}${RESET}\n`);
-    process.stderr.write(`  Backend URL:    ${DIM}${creds.backendUrl}${RESET}\n`);
-    process.stderr.write(`  Mode:           ${DIM}${creds.mode || 'auto'}${RESET}\n`);
-    process.stderr.write('\n');
+  const check = paint.state.success(icons.pass);
+  const cross = paint.state.danger(icons.fail);
+  const dim = paint.text.dim;
+
+  const mask = (val) => {
+    if (!val) return `${cross} not set`;
+    if (val.length <= 8) return `${check} ****`;
+    return `${check} ${val.slice(0, 6)}...${val.slice(-4)}`;
+  };
+
+  const env = process.env.TARANG_ENV || process.env.NODE_ENV || 'production';
+
+  write(`\n${paint.bold('Kepler Configuration')} ${dim('(~/.kepler/config.json)')}\n`);
+  write(`${dim('─'.repeat(50))}\n`);
+  write(`  Token:          ${mask(creds.token)}\n`);
+  write(`  OpenRouter:     ${mask(creds.openRouterKey)}\n`);
+  write(`  Anthropic:      ${mask(creds.anthropicKey)}\n`);
+  write(`  Environment:    ${dim(env)}\n`);
+  write(`  Backend URL:    ${dim(creds.backendUrl)}\n`);
+  write(`  Mode:           ${dim(creds.mode || 'auto')}\n`);
+  write('\n');
 }
 
-/**
- * Print a goodbye message.
- */
 export function printGoodbye() {
-    process.stderr.write(`\n${BOLD_CYAN}Goodbye!${RESET}\n\n`);
+  write(`\n${paint.bold(paint.brand.primary('Goodbye!'))}\n\n`);
 }
 
-/**
- * Get git branch and change count for current directory.
- * @param {string} cwd
- * @returns {string|null}
- */
-function getGitInfo(cwd) {
-    try {
-        const branch = execSync('git branch --show-current', {
-            cwd, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'],
-        }).trim();
-
-        if (!branch) return null;
-
-        const status = execSync('git status --porcelain', {
-            cwd, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'],
-        }).trim();
+// ── Git probe ────────────────────────────────────────────────────────────
 
-        const changes = status ? status.split('\n').filter(Boolean).length : 0;
-
-        if (changes > 0) {
-            return `\u2387 ${branch} (${changes} changed)`;
-        }
-        return `\u2387 ${branch}`;
-    } catch {
-        return null;
-    }
+function getGitInfo(cwd) {
+  try {
+    const branch = execSync('git branch --show-current', {
+      cwd, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'],
+    }).trim();
+    if (!branch) return null;
+
+    const status = execSync('git status --porcelain', {
+      cwd, encoding: 'utf-8', timeout: 2000, stdio: ['pipe', 'pipe', 'pipe'],
+    }).trim();
+    const changes = status ? status.split('\n').filter(Boolean).length : 0;
+
+    return changes > 0 ? `⎇ ${branch} (${changes} changed)` : `⎇ ${branch}`;
+  } catch {
+    return null;
+  }
 }
 
-/**
- * Strip ANSI escape codes for length calculation.
- */
-function stripAnsi(str) {
-    return str.replace(/\x1b\[[0-9;]*m/g, '');
-}
+// ── OAuth success page (unchanged from prior version) ────────────────────
 
-/**
- * Branded HTML for OAuth success page.
- */
 export function getLoginSuccessHTML() {
-    return `<!DOCTYPE html>
+  return `<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">

package/src/ui/dock.mjs

@@ -0,0 +1,88 @@
+/**
+ * Keyboard dock — Mission Control (PRD-055 §5.4).
+ *
+ * Maps each orbit to the dock hint shown on the second line of the status
+ * bar. Pure data so tests, the status bar, and `/help` stay in sync.
+ *
+ *   import { dockForOrbit } from './dock.mjs';
+ *   const hints = dockForOrbit(orbit);          // → [{ key, label }, ...]
+ *   const text  = renderDock(hints, paint);     // → ANSI-styled single line
+ */
+
+import { ORBITS } from '../state/orbit.mjs';
+import { paint, width } from './palette.mjs';
+import { term } from './term.mjs';
+
+const DEFAULT = [
+  { key: 'Enter', label: 'send'     },
+  { key: '/',     label: 'commands' },
+  { key: '?',     label: 'help'     },
+];
+
+const HINTS = {
+  [ORBITS.IDLE]: DEFAULT,
+  [ORBITS.DISCOVERY]: DEFAULT,
+
+  [ORBITS.PLANNING]: [
+    { key: 'p',   label: 'pause'      },
+    { key: 'Esc', label: 'interrupt'  },
+    { key: '?',   label: 'why'        },
+  ],
+
+  [ORBITS.EXECUTION]: [
+    { key: 'd',   label: 'last diff'  },
+    { key: 'p',   label: 'pause'      },
+    { key: 'Esc', label: 'interrupt'  },
+  ],
+
+  [ORBITS.ALIGNMENT]: [
+    { key: 'd',   label: 'last result' },
+    { key: '?',   label: 'explain'    },
+  ],
+
+  [ORBITS.AWAITING]: [
+    { key: 'Enter', label: 'approve' },
+    { key: 'e',     label: 'edit'    },
+    { key: 'r',     label: 're-plan' },
+    { key: 'n',     label: 'reject'  },
+    { key: '?',     label: 'why'     },
+  ],
+
+  [ORBITS.PAUSED]: [
+    { key: 'r',   label: 'resume'    },
+    { key: 'Esc', label: 'cancel'    },
+    { key: 'q',   label: 'quit'      },
+  ],
+};
+
+/**
+ * Return the array of hints for the given orbit.
+ * Falls back to the default dock for unknown orbits so the bar is never empty.
+ */
+export function dockForOrbit(orbit) {
+  return HINTS[orbit] || DEFAULT;
+}
+
+/**
+ * Render a hint list to an ANSI-styled line that fits within `maxWidth`
+ * visible characters. Drops trailing entries when they don't fit, never
+ * mid-hint truncates.
+ */
+export function renderDock(hints, maxWidth = term().columns - 2) {
+  if (!Array.isArray(hints) || hints.length === 0) return '';
+  const parts = [];
+  let used = 0;
+  for (const h of hints) {
+    const piece = `[${h.key}] ${h.label}`;
+    const sep = parts.length ? '  ' : '';
+    const cost = width(sep) + width(piece);
+    if (used + cost > maxWidth) break;
+    parts.push(sep + paintHint(h));
+    used += cost;
+  }
+  return parts.join('');
+}
+
+function paintHint(h) {
+  return paint.text.dim('[') + paint.brand.data(h.key) + paint.text.dim('] ' + h.label);
+}