@rootly/wizard 0.1.0

package/src/tui/components/Banner.js

@@ -0,0 +1,145 @@
+import { createElement as h, useEffect, useState } from 'react';
+import { Box, Text, useWindowSize } from 'ink';
+import { palette, shimmerRamp } from '../theme.js';
+
+// The Rootly sprout, rasterized from assets/rootly-logo-glyph.png and pattern-
+// matched to Unicode half-blocks (▀ ▄ █) with a denoise pass to drop 1px tip
+// specks. Rendered at 19x8 — half the earlier 38x15 — to keep the banner compact
+// while still showing all six leaflets. Regenerate with
+// `node scripts/generate-logo-art.mjs 19 8`.
+const LOGO = [
+  '        ▄█▄',
+  '    ▄▄  ███  ▄▄',
+  '    ▀██  ▀  ██▀',
+  ' ▄▄▄▄    ▄    ▄▄▄▄',
+  '  ▀▀▀   ███   ▀▀▀',
+  '▄▄▄▄▄▄▄  ▀  ▄▄▄▄▄▄▄',
+  '▀▀▀▀▀▀▀██▄██▀▀▀▀▀▀▀',
+  '        ███'
+];
+const LOGO_WIDTH = Math.max(...LOGO.map((line) => line.length));
+// Pad every line to the same width: rendered in a centered column, unequal-length
+// lines would each be centered on their own width and drift horizontally.
+const LOGO_LINES = LOGO.map((line) => line.padEnd(LOGO_WIDTH));
+
+// Small single-line tagline under the sprout (the app name already lives in the
+// top-left header, so the hero says what the wizard does instead of repeating it).
+const TAGLINE = 'Your guided Rootly setup';
+
+// Bright-to-brand trail behind the reveal crest (white → brand purple, via
+// the P200/P300/P500 brand tints).
+const CREST = ['#FFFFFF', '#E0DAFB', '#C9BEF7', '#9D86F0', palette.brand];
+const REVEAL_STEP = 1;
+
+// Glimmer band swept diagonally across the sprout: a bright crest tapering back
+// to brand purple. Centered on the band's middle index.
+const GLIMMER = ['#9D86F0', '#C9BEF7', '#E0DAFB', '#FFFFFF', '#E0DAFB', '#C9BEF7', '#9D86F0'];
+const GLIMMER_CENTER = (GLIMMER.length - 1) / 2;
+// Diagonal span of the sprout plus a gap, so the glimmer sweeps then rests.
+const GLIMMER_PERIOD = LOGO_WIDTH + LOGO.length + 16;
+
+// Bloom-in on startup: the sprout grows outward from its base, brightest at the
+// expanding edge and settling to brand purple behind it — then the resting
+// glimmer takes over. Rows count ~2x columns (cells are taller than wide) so the
+// bloom front stays visually round.
+const BLOOM_ORIGIN_ROW = LOGO.length - 1;
+const BLOOM_ORIGIN_COL = (LOGO_WIDTH - 1) / 2;
+const bloomDistance = (row, col) => Math.hypot((BLOOM_ORIGIN_ROW - row) * 2, col - BLOOM_ORIGIN_COL);
+const BLOOM_MAX = Math.max(
+  ...LOGO_LINES.flatMap((line, row) =>
+    [...line].map((ch, col) => (ch === ' ' ? 0 : bloomDistance(row, col)))
+  )
+);
+const BLOOM_SPEED = 1.2; // distance units revealed per frame
+const BLOOM_FRAMES = Math.ceil((BLOOM_MAX + CREST.length) / BLOOM_SPEED);
+
+export function Banner() {
+  const { columns } = useWindowSize();
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setFrame((f) => f + 1), 70);
+    return () => clearInterval(timer);
+  }, []);
+
+  // Glimmer front sweeps along the diagonal (col + row); cells near it brighten.
+  const glimmerFront = frame % GLIMMER_PERIOD;
+  const glimmerColor = (row, col) => {
+    const idx = (col + row) - glimmerFront + GLIMMER_CENTER;
+    return idx >= 0 && idx < GLIMMER.length ? GLIMMER[idx] : palette.brand;
+  };
+
+  // Startup bloom: reveal cells outward from the base (bright at the growing
+  // edge, settling to brand). Once it finishes, fall straight through to the
+  // resting glimmer — so the eventual shape is exactly what we have today.
+  const bloomFront = frame * BLOOM_SPEED;
+  const bloomDone = frame > BLOOM_FRAMES;
+  const cellColor = (row, col) => {
+    if (bloomDone) return glimmerColor(row, col);
+    const edge = bloomFront - bloomDistance(row, col);
+    if (edge < 0) return null; // not yet bloomed — render blank
+    return CREST[Math.min(Math.floor(edge), CREST.length - 1)];
+  };
+
+  // Equal-width lines, each in its own Box, so the centered column lays the
+  // sprout out as one solid block (no per-line horizontal drift). Each ink cell
+  // is its own Text so the glimmer can light it up as the band passes.
+  const sprout = h(
+    Box,
+    // Breathing room above the sprout and between it and the tagline.
+    { flexDirection: 'column', alignItems: 'center', marginTop: 1, marginBottom: 1 },
+    ...LOGO_LINES.map((line, row) =>
+      h(
+        Box,
+        { key: `logo-${row}` },
+        ...[...line].map((char, col) => {
+          if (char === ' ') return h(Text, { key: `l-${col}` }, ' ');
+          const color = cellColor(row, col);
+          return color === null
+            ? h(Text, { key: `l-${col}` }, ' ')
+            : h(Text, { key: `l-${col}`, color }, char);
+        })
+      )
+    )
+  );
+
+  // Sprout too wide for this terminal: just the small wordmark with a sparkle.
+  if ((columns || 80) < LOGO_WIDTH + 4) {
+    return h(
+      Box,
+      { marginBottom: 1 },
+      h(Text, { color: palette.brand, bold: true }, '✦ Rootly Wizard')
+    );
+  }
+
+  const ramp = shimmerRamp;
+  // The tagline writes on after the sprout has finished blooming.
+  const reveal = (frame - BLOOM_FRAMES) * REVEAL_STEP;
+  const settled = reveal > TAGLINE.length + CREST.length;
+
+  const colorFor = (col) => {
+    if (settled) {
+      // Faint resting shimmer once fully revealed (slow, low-contrast).
+      const idx = (((col - Math.floor(frame / 3)) % ramp.length) + ramp.length) % ramp.length;
+      return ramp[idx];
+    }
+    const dist = reveal - col;
+    return dist >= 0 && dist < CREST.length ? CREST[dist] : palette.brand;
+  };
+
+  return h(
+    Box,
+    { flexDirection: 'column', alignItems: 'center', marginBottom: 1 },
+    sprout,
+    h(
+      Box,
+      null,
+      ...TAGLINE.split('').map((char, col) => {
+        if (char === ' ' || (!settled && col > reveal)) {
+          return h(Text, { key: `c-${col}` }, ' ');
+        }
+        return h(Text, { key: `c-${col}`, bold: true, color: colorFor(col) }, char);
+      })
+    )
+  );
+}

package/src/tui/components/BigText.js

@@ -0,0 +1,46 @@
+import { createElement as h } from 'react';
+import { Box, Text, useWindowSize } from 'ink';
+
+// Minimal 5-row block font — just the letters we need for headlines. Each
+// glyph's rows are equal width so they align when joined.
+const FONT = {
+  ' ': ['  ', '  ', '  ', '  ', '  '],
+  '-': ['   ', '   ', '███', '   ', '   '],
+  "'": ['█', '█', ' ', ' ', ' '],
+  A: ['▄█▄', '█ █', '███', '█ █', '█ █'],
+  C: ['▄██▄', '█   ', '█   ', '█   ', '▀██▀'],
+  D: ['██▄ ', '█ █ ', '█ █ ', '█ █ ', '██▀ '],
+  E: ['███', '█  ', '██ ', '█  ', '███'],
+  I: ['███', ' █ ', ' █ ', ' █ ', '███'],
+  N: ['█  █', '██ █', '█ ██', '█  █', '█  █'],
+  R: ['██▄', '█ █', '██▀', '█ █', '█ █'],
+  T: ['███', ' █ ', ' █ ', ' █ ', ' █ '],
+  Y: ['█ █', '█ █', ' █ ', ' █ ', ' █ ']
+};
+const ROWS = 5;
+
+function build(text) {
+  const chars = text.toUpperCase().split('');
+  if (chars.some((ch) => !FONT[ch])) return null;
+  const raw = Array.from({ length: ROWS }, (_, row) =>
+    chars.map((ch) => FONT[ch][row]).join(' ')
+  );
+  const width = Math.max(...raw.map((line) => line.length));
+  return raw.map((line) => line.padEnd(width));
+}
+
+export function BigText({ text, color }) {
+  const { columns } = useWindowSize();
+  const lines = build(text);
+
+  // Fall back to bold text if the block form is unknown or too wide to fit.
+  if (!lines || lines[0].length > (columns || 80) - 8) {
+    return h(Box, { justifyContent: 'center' }, h(Text, { color, bold: true }, text));
+  }
+
+  return h(
+    Box,
+    { flexDirection: 'column', alignItems: 'center' },
+    ...lines.map((line, row) => h(Text, { key: row, color, bold: true }, line))
+  );
+}

package/src/tui/components/Celebration.js

@@ -0,0 +1,47 @@
+import { createElement as h, useEffect, useState } from 'react';
+import { Box, Text, useWindowSize } from 'ink';
+import { palette } from '../theme.js';
+
+// A few rows of confetti that twinkle and drift downward — a bit of fanfare,
+// built from glyphs + brand colors rather than emoji.
+const GLYPHS = ['✦', '✧', '✶', '*', '•', '·', '+'];
+// Brand-forward confetti: Rootly purple + orange, with lighter purple/white
+// sparkles. (No off-brand greens/blues.)
+const COLORS = [palette.brand, palette.accent, '#9D86F0', '#C9BEF7', '#FFFFFF'];
+const ROWS = 3;
+
+// Deterministic per-cell hash (no Math.random), so the field is stable per
+// frame and animates purely from the frame counter.
+function hash(c, r, salt) {
+  let x = (c * 374761393 + r * 668265263 + salt * 2246822519) >>> 0;
+  x = ((x ^ (x >>> 13)) * 1274126177) >>> 0;
+  return (x ^ (x >>> 16)) >>> 0;
+}
+
+export function Celebration() {
+  const { columns } = useWindowSize();
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => setFrame((f) => f + 1), 120);
+    return () => clearInterval(timer);
+  }, []);
+
+  const width = Math.max(20, Math.min(46, (columns || 80) - 12));
+  const rows = [];
+  for (let r = 0; r < ROWS; r += 1) {
+    const cells = [];
+    for (let c = 0; c < width; c += 1) {
+      // Seed by (row - frame) so the pattern scrolls down as frames advance.
+      const v = hash(c, r - frame, 7);
+      if (v % 5 === 0) {
+        cells.push(h(Text, { key: c, color: COLORS[(v >>> 5) % COLORS.length] }, GLYPHS[(v >>> 3) % GLYPHS.length]));
+      } else {
+        cells.push(h(Text, { key: c }, ' '));
+      }
+    }
+    rows.push(h(Box, { key: r }, ...cells));
+  }
+
+  return h(Box, { flexDirection: 'column', alignItems: 'center', marginBottom: 1 }, ...rows);
+}

package/src/tui/components/KeyValueList.js

@@ -0,0 +1,22 @@
+import { createElement as h } from 'react';
+import { Box, Text } from 'ink';
+import { palette, glyphs } from '../theme.js';
+
+export function KeyValueList({ title, rows }) {
+  const labelWidth = Math.max(8, ...rows.map((row) => String(row.label).length));
+
+  return h(
+    Box,
+    { flexDirection: 'column', marginBottom: 1 },
+    title ? h(Box, { marginBottom: 1 }, h(Text, { bold: true, color: palette.text }, title)) : null,
+    ...rows.map((row, index) =>
+      h(
+        Box,
+        { key: `${row.label}-${index}` },
+        h(Text, { color: palette.accent }, `${glyphs.dot} `),
+        h(Text, { color: palette.muted }, `${String(row.label).padEnd(labelWidth + 2)}`),
+        h(Text, { color: row.color || palette.text, bold: Boolean(row.color) }, String(row.value))
+      )
+    )
+  );
+}

package/src/tui/components/MenuList.js

@@ -0,0 +1,170 @@
+import { createElement as h, useMemo, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import { palette, glyphs } from '../theme.js';
+
+function wrapText(text, width) {
+  const words = String(text || '').split(/\s+/).filter(Boolean);
+  const lines = [];
+  let current = '';
+
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length <= width || !current) {
+      current = candidate;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+
+  if (current) lines.push(current);
+  return lines.length ? lines : [''];
+}
+
+function computeWindow(items, selectedIndex, maxRows) {
+  let start = selectedIndex;
+  let used = items[selectedIndex]?.height || 1;
+  while (start > 0) {
+    const next = items[start - 1].height;
+    if (used + next > maxRows) break;
+    start -= 1;
+    used += next;
+  }
+  let end = selectedIndex;
+  while (end < items.length - 1) {
+    const next = items[end + 1].height;
+    if (used + next > maxRows) break;
+    end += 1;
+    used += next;
+  }
+  return { start, end };
+}
+
+export function MenuList({ options, onSelect, onCancel, title, tint }) {
+  const { rows, columns } = useWindowSize();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [typedDigits, setTypedDigits] = useState('');
+  const contentWidth = Math.max(30, Math.min(72, columns - 12));
+  const textWidth = Math.max(10, contentWidth - 6);
+
+  const items = useMemo(
+    () =>
+      options.map((option, index) => {
+        const lines = wrapText(option.label, textWidth);
+        return { option, index, lines, height: lines.length };
+      }),
+    [options, textWidth]
+  );
+
+  const maxRows = Math.max(5, rows - 14);
+  const { start, end } = computeWindow(items, selectedIndex, maxRows);
+  const visibleItems = items.slice(start, end + 1);
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      onCancel?.();
+      return;
+    }
+    if (key.escape) {
+      onCancel?.();
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIndex((current) => Math.max(0, current - 1));
+      setTypedDigits('');
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedIndex((current) => Math.min(options.length - 1, current + 1));
+      setTypedDigits('');
+      return;
+    }
+    if (key.return) {
+      if (typedDigits) {
+        const parsed = Number.parseInt(typedDigits, 10) - 1;
+        if (!Number.isNaN(parsed) && parsed >= 0 && parsed < options.length) {
+          onSelect(options[parsed]);
+          return;
+        }
+      }
+      onSelect(options[selectedIndex]);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setTypedDigits((current) => current.slice(0, -1));
+      return;
+    }
+    if (/^\d$/.test(input)) {
+      // Lists of 9 or fewer: a single digit unambiguously picks a row, so jump
+      // to it and clear the buffer immediately (no two-digit accumulation).
+      if (options.length <= 9) {
+        const parsed = Number.parseInt(input, 10) - 1;
+        if (parsed >= 0 && parsed < options.length) {
+          setSelectedIndex(parsed);
+        }
+        setTypedDigits('');
+        return;
+      }
+      const next = `${typedDigits}${input}`.slice(0, 2);
+      setTypedDigits(next);
+      const parsed = Number.parseInt(next, 10) - 1;
+      if (!Number.isNaN(parsed) && parsed >= 0 && parsed < options.length) {
+        setSelectedIndex(parsed);
+      }
+    }
+    // Any other key (letters, symbols) is ignored — only digits, arrows,
+    // enter, and backspace affect the menu.
+  });
+
+  const children = [];
+  if (title) {
+    children.push(
+      h(Box, { key: 'title', marginBottom: 1 }, h(Text, { color: palette.muted }, title))
+    );
+  }
+  if (start > 0) {
+    children.push(h(Box, { key: 'uphint', marginBottom: 1 }, h(Text, { color: palette.border }, `  ${glyphs.more}${glyphs.more}${glyphs.more} more above`)));
+  }
+  visibleItems.forEach(({ option, index, lines }, visibleIndex) => {
+    const active = index === selectedIndex;
+    const numLabel = `${index + 1}`;
+    const indent = ' '.repeat(2 + numLabel.length + 2);
+    const cursorColor = tint || (active ? palette.brand : palette.border);
+    const numColor = tint || (active ? palette.brand : palette.muted);
+    const labelColor = tint || (active ? palette.text : palette.muted);
+    const bold = tint ? false : active;
+    // Separate option clusters with a blank row when the group changes (e.g.
+    // grouping Disconnect + Exit apart from the primary actions).
+    const prev = visibleItems[visibleIndex - 1]?.option;
+    const groupBreak = prev && option.group && prev.group !== option.group;
+    children.push(
+      h(
+        Box,
+        { key: `${option.label}-${index}`, flexDirection: 'column', marginTop: groupBreak ? 1 : 0 },
+        ...lines.map((line, lineIndex) =>
+          lineIndex === 0
+            ? h(
+                Box,
+                { key: `${index}-0` },
+                h(Text, { color: cursorColor, bold }, active ? `${glyphs.cursor} ` : '  '),
+                h(Text, { color: numColor }, `${numLabel}  `),
+                h(Text, { color: labelColor, bold }, line)
+              )
+            : h(
+                Box,
+                { key: `${index}-${lineIndex}` },
+                h(Text, { color: labelColor, bold }, `${indent}${line}`)
+              )
+        )
+      )
+    );
+  });
+  if (end < items.length - 1) {
+    children.push(h(Box, { key: 'downhint', marginTop: 1 }, h(Text, { color: palette.border }, `  ${glyphs.more}${glyphs.more}${glyphs.more} more below`)));
+  }
+  if (typedDigits) {
+    children.push(h(Box, { key: 'typed', marginTop: 1 }, h(Text, { color: palette.muted }, `jump → ${typedDigits}`)));
+  }
+
+  return h(Box, { flexDirection: 'column' }, ...children);
+}

package/src/tui/components/MultiSelectList.js

@@ -0,0 +1,181 @@
+import { createElement as h, useMemo, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import { palette, glyphs } from '../theme.js';
+
+function wrapText(text, width) {
+  const words = String(text || '').split(/\s+/).filter(Boolean);
+  const lines = [];
+  let current = '';
+
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length <= width || !current) {
+      current = candidate;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+
+  if (current) lines.push(current);
+  return lines.length ? lines : [''];
+}
+
+function computeWindow(items, selectedIndex, maxRows) {
+  if (!items.length) return { start: 0, end: -1 };
+  const focus = Math.min(selectedIndex, items.length - 1);
+  let start = focus;
+  let used = items[focus]?.height || 1;
+  while (start > 0) {
+    const next = items[start - 1].height;
+    if (used + next > maxRows) break;
+    start -= 1;
+    used += next;
+  }
+  let end = focus;
+  while (end < items.length - 1) {
+    const next = items[end + 1].height;
+    if (used + next > maxRows) break;
+    end += 1;
+    used += next;
+  }
+  return { start, end };
+}
+
+export function MultiSelectList({ options, onSubmit, onCancel, title, initialSelectedValues = [] }) {
+  const { rows, columns } = useWindowSize();
+  // selectedIndex spans the options plus one extra row (CONFIRM) at the end.
+  const CONFIRM = options.length;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  // Pre-check options whose value is already selected (e.g. components already
+  // on the page) so submitting preserves them instead of replacing the set.
+  const [selected, setSelected] = useState(() => {
+    const wanted = new Set(initialSelectedValues);
+    const set = new Set();
+    options.forEach((option, index) => {
+      if (wanted.has(option.value)) set.add(index);
+    });
+    return set;
+  });
+  const contentWidth = Math.max(30, Math.min(72, columns - 12));
+  const textWidth = Math.max(10, contentWidth - 10);
+
+  const items = useMemo(
+    () =>
+      options.map((option, index) => {
+        const lines = wrapText(option.label, textWidth);
+        return { option, index, lines, height: lines.length };
+      }),
+    [options, textWidth]
+  );
+
+  const toggle = (index) =>
+    setSelected((current) => {
+      const next = new Set(current);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+
+  const maxRows = Math.max(5, rows - 16);
+  const { start, end } = computeWindow(items, selectedIndex, maxRows);
+  const visibleItems = items.slice(start, end + 1);
+  const onConfirm = selectedIndex === CONFIRM;
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      onCancel?.();
+      return;
+    }
+    if (key.escape) {
+      onCancel?.();
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIndex((current) => Math.max(0, current - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedIndex((current) => Math.min(CONFIRM, current + 1));
+      return;
+    }
+    // 'a' toggles the whole list — select everyone or clear.
+    if (input === 'a') {
+      setSelected((current) =>
+        current.size === options.length ? new Set() : new Set(options.map((_, index) => index))
+      );
+      return;
+    }
+    // Enter confirms on the Confirm row; otherwise it toggles the current item.
+    if (key.return) {
+      if (onConfirm) onSubmit([...selected].map((index) => options[index]));
+      else toggle(selectedIndex);
+      return;
+    }
+    // Space also toggles the current item (Ink reports space as input === ' ').
+    if (input === ' ' || key.space) {
+      if (!onConfirm) toggle(selectedIndex);
+    }
+  });
+
+  const children = [];
+  if (title) {
+    children.push(h(Box, { key: 'title', marginBottom: 1 }, h(Text, { color: palette.muted }, title)));
+  }
+  // Spell out the model — it isn't obvious from the checkboxes alone.
+  children.push(
+    h(
+      Box,
+      { key: 'howto', marginBottom: 1 },
+      h(Text, { color: palette.accent, bold: true }, 'enter'),
+      h(Text, { color: palette.muted }, ' or '),
+      h(Text, { color: palette.accent, bold: true }, 'space'),
+      h(Text, { color: palette.muted }, ' to check · arrow down to ' ),
+      h(Text, { color: palette.accent, bold: true }, 'Confirm'),
+      h(Text, { color: palette.muted }, ' to finish')
+    )
+  );
+  if (start > 0) {
+    children.push(h(Box, { key: 'uphint', marginBottom: 1 }, h(Text, { color: palette.border }, `  ${glyphs.more}${glyphs.more}${glyphs.more} more above`)));
+  }
+  visibleItems.forEach(({ option, index, lines }) => {
+    const active = index === selectedIndex;
+    const checked = selected.has(index);
+    children.push(
+      h(
+        Box,
+        { key: `${option.label}-${index}`, flexDirection: 'column' },
+        ...lines.map((line, lineIndex) =>
+          lineIndex === 0
+            ? h(
+                Box,
+                { key: `${index}-0` },
+                h(Text, { color: active ? palette.brand : palette.border, bold: active }, active ? `${glyphs.cursor} ` : '  '),
+                h(Text, { color: checked ? palette.success : palette.muted }, `${checked ? glyphs.check : glyphs.uncheck} `),
+                h(Text, { color: active ? palette.text : palette.muted, bold: active }, line)
+              )
+            : h(
+                Box,
+                { key: `${index}-${lineIndex}` },
+                h(Text, { color: active ? palette.text : palette.muted, bold: active }, `    ${line}`)
+              )
+        )
+      )
+    );
+  });
+  if (end < items.length - 1) {
+    children.push(h(Box, { key: 'downhint', marginTop: 1 }, h(Text, { color: palette.border }, `  ${glyphs.more}${glyphs.more}${glyphs.more} more below`)));
+  }
+  const count = selected.size;
+  // The Confirm row — navigable like an option; Enter here submits.
+  children.push(
+    h(
+      Box,
+      { key: 'confirm', marginTop: 1 },
+      h(Text, { color: onConfirm ? palette.brand : palette.border, bold: onConfirm }, onConfirm ? `${glyphs.cursor} ` : '  '),
+      h(Text, { color: onConfirm ? palette.text : palette.muted, bold: onConfirm }, `Confirm${count ? ` (${count} selected)` : ' (none selected)'}`)
+    )
+  );
+
+  return h(Box, { flexDirection: 'column' }, ...children);
+}

package/src/tui/components/NoticeBox.js

@@ -0,0 +1,56 @@
+import { createElement as h } from 'react';
+import { Box, Text, useWindowSize } from 'ink';
+import { palette } from '../theme.js';
+
+// Greedy word-wrap to `width`, trimming each segment. We pre-wrap rather than
+// letting Ink wrap, because Ink keeps the boundary space and the continuation
+// line ends up indented one space (visible when the terminal is resized).
+function wrapLine(text, width) {
+  const words = String(text).split(/\s+/).filter(Boolean);
+  if (!words.length) return [''];
+  const out = [];
+  let current = '';
+  for (const word of words) {
+    if (!current) {
+      current = word;
+    } else if ((current + ' ' + word).length <= width) {
+      current += ' ' + word;
+    } else {
+      out.push(current);
+      current = word;
+    }
+  }
+  if (current) out.push(current);
+  return out;
+}
+
+export function NoticeBox({ title, lines = [] }) {
+  const { columns } = useWindowSize();
+  // Mirror AppShell's content width: card width (min 82 / cols-4) minus the
+  // round border (2) and paddingX (2 each side = 4).
+  const cardWidth = Math.min(82, Math.max(24, (columns || 80) - 4));
+  const wrapWidth = Math.max(18, cardWidth - 6);
+
+  const rendered = [];
+  if (title) {
+    rendered.push(h(Box, { key: 'title', marginBottom: 1 }, h(Text, { bold: true, color: palette.text }, title)));
+  }
+  // Lines are plain strings, or objects { text, color, bold } for emphasis.
+  lines.forEach((line, index) => {
+    const isObject = line && typeof line === 'object';
+    const text = isObject ? line.text : line;
+    if (String(text ?? '').trim() === '') {
+      rendered.push(h(Box, { key: `blank-${index}` }, h(Text, null, ' ')));
+      return;
+    }
+    const color = (isObject && line.color) || palette.text;
+    const bold = isObject ? Boolean(line.bold) : false;
+    wrapLine(text, wrapWidth).forEach((segment, segIndex) => {
+      rendered.push(
+        h(Box, { key: `line-${index}-${segIndex}` }, h(Text, { color, bold }, segment))
+      );
+    });
+  });
+
+  return h(Box, { flexDirection: 'column', marginBottom: 1 }, ...rendered);
+}