azeroth-shell 0.1.1 → 0.2.0

package/src/cli/tuiCity.mjs

@@ -1,7 +1,7 @@
 // City services: the bank, the auction house and the mailbox. Same view shape as tuiViews.mjs; every
 // change is a Game facade call. Where they open follows phonecraft's CITY_PANEL rule: the auction
 // house in the six capitals, the bank there plus the goblin and Crossroads banker towns.
-import { bold, dim, cyan, yellow, green, red, qualityPaint, fit, secondsText, plural, itemText } from './text.mjs';
+import { bold, dim, cyan, yellow, green, red, inverse, vis, useColor, qualityPaint, fit, secondsText, plural, itemText } from './text.mjs';
 import { itemLines } from './tuiViews.mjs';
 import { moneyText } from '../domain/economy/money.ts';
 import { bagCapacity } from '../domain/items/equipment.ts';
@@ -116,17 +116,100 @@ export function bankDialog(app, startMode = 'deposit') {
 
 // ---- auction house ------------------------------------------------------------------------------
 
+// Browse categories: ItemClass.dbc in AuctionFrame.lua order, as phonecraft's auctionModel.ts. Subclass names are
+// ItemSubClass.dbc; the TBC-era consumable and trade goods subclasses the item table carries get their names too.
+const AH_CLASSES = [
+  [2, 'Weapons'], [4, 'Armor'], [1, 'Container'], [0, 'Consumable'], [7, 'Trade Goods'],
+  [6, 'Projectile'], [11, 'Quiver'], [9, 'Recipe'], [5, 'Reagent'], [15, 'Miscellaneous'],
+];
+const AH_SUBCLASSES = {
+  0: ['Consumable', 'Potion', 'Elixir', 'Flask', 'Scroll', 'Food & Drink', 'Item Enhancement', 'Bandage', 'Other'],
+  1: ['Bag', 'Soul Bag', 'Herb Bag', 'Enchanting Bag', 'Engineering Bag'],
+  2: { 0: 'One-Handed Axes', 1: 'Two-Handed Axes', 2: 'Bows', 3: 'Guns', 4: 'One-Handed Maces', 5: 'Two-Handed Maces', 6: 'Polearms', 7: 'One-Handed Swords', 8: 'Two-Handed Swords', 10: 'Staves', 13: 'Fist Weapons', 14: 'Miscellaneous', 15: 'Daggers', 16: 'Thrown', 17: 'Spears', 18: 'Crossbows', 19: 'Wands', 20: 'Fishing Poles' },
+  4: { 0: 'Miscellaneous', 1: 'Cloth', 2: 'Leather', 3: 'Mail', 4: 'Plate', 6: 'Shields', 7: 'Librams', 8: 'Idols', 9: 'Totems' },
+  5: ['Reagent'],
+  6: { 2: 'Arrows', 3: 'Bullets' },
+  7: ['Trade Goods', 'Parts', 'Explosives', 'Devices', 'Jewelcrafting', 'Cloth', 'Leather', 'Metal & Stone', 'Meat', 'Herbs', 'Elemental', 'Other', 'Enchanting'],
+  9: ['Books', 'Leatherworking', 'Tailoring', 'Engineering', 'Blacksmithing', 'Cooking', 'Alchemy', 'First Aid', 'Enchanting', 'Fishing'],
+  11: { 2: 'Quivers', 3: 'Ammo Pouches' },
+  15: ['Junk'],
+};
+
+/** [category, subcategory] of an item: a browse class (15 catches the rest) and a subclass name. */
+function ahCategory(it) {
+  const cls = AH_CLASSES.some(([c]) => c === it?.itemClass) ? it.itemClass : 15;
+  const sub = it?.itemSubclass ?? it?.weaponSubclass ?? it?.armorSubclass ?? 0;
+  return [cls, AH_SUBCLASSES[cls]?.[sub] ?? 'Other'];
+}
+
+/**
+ * One line of tabs, the picked one inverse; when it does not fit it scrolls to keep the pick in view. A strip
+ * under the cursor is drawn inverse whole, so there the pick is bracketed instead.
+ */
+function tabStrip(labels, at, width, focused = false) {
+  const cells = labels.map((l, i) => (i === at ? (useColor && !focused ? inverse(` ${l} `) : focused ? bold(`[${l}]`) : `[${l}]`) : ` ${l} `));
+  let from = 0, to = cells.length;
+  const len = () => cells.slice(from, to).reduce((n, c) => n + vis(c), 0) + (from > 0 ? 2 : 0) + (to < cells.length ? 2 : 0);
+  while (len() > width && to - from > 1) { if (at - from > to - 1 - at) from++; else to--; }
+  return `${from > 0 ? dim('‹ ') : ''}${cells.slice(from, to).join('')}${to < cells.length ? dim(' ›') : ''}`;
+}
+
 export function auctionDialog(app) {
   app.g.refillAuctions(Date.now());
   let mode = 'browse';
   let filter = '';
+  let cat = 'all', sub = 'all';
   const MODES = ['browse', 'sell', 'mine'];
-  const hint = () => ({ browse: 'Enter: buyout   Tab: sell', sell: 'Enter: list for sale   Tab: my auctions', mine: 'Enter: cancel listing   Tab: browse' })[mode];
+  // The category and subcategory strips are cursor rows: Up from the listings lands on them, Left Right turns them.
+  let lastRows = [];
+  const stripAt = () => lastRows[view.cursor]?.data?.strip;
+  const hint = () => {
+    if (mode === 'browse') {
+      const s = stripAt(), hasSub = lastRows.some((r) => r.data?.strip === 'sub');
+      if (s === 'cat') return `Left Right: category   Down: ${hasSub ? 'subcategory' : 'listings'}   Tab: sell`;
+      if (s === 'sub') return 'Left Right: subcategory   Up: category   Down: listings   Tab: sell';
+      return `Enter: buyout   Left Right: category   Up to the tabs: ${hasSub ? 'subcategory' : 'category'}   Tab: sell`;
+    }
+    return { sell: 'Enter: list for sale   Tab: my auctions', mine: 'Enter: cancel listing   Tab: browse' }[mode];
+  };
   const unit = (x) => Math.round(x.buyoutCopper / x.quantity);
+  // Back to the top of the list; in browse the cursor goes to the first listing, past the strips.
+  let toList = true;
+  const top = () => { toList = true; view.scroll = 0; };
+  // The listings the search leaves, the categories they fall in (the picked one stays even when it empties)
+  // and the subcategories of the picked category, each with its count.
+  const browse = (a, now) => {
+    let all = a.g.browseAuctions(now).map((au) => { const it = a.ds.item(au.item); return { au, it, c: ahCategory(it) }; });
+    if (filter) all = all.filter((x) => (x.it?.name ?? '').toLowerCase().includes(filter));
+    const count = (pred) => all.filter(pred).length;
+    const cats = [{ key: 'all', label: 'All', n: all.length }];
+    for (const [c, label] of AH_CLASSES) { const n = count((x) => x.c[0] === c); if (n || c === cat) cats.push({ key: c, label, n }); }
+    const inCat = cat === 'all' ? all : all.filter((x) => x.c[0] === cat);
+    const subs = [{ key: 'all', label: 'All', n: inCat.length }];
+    for (const x of inCat) { const s = subs.find((y) => y.key === x.c[1]); if (s) s.n++; else subs.push({ key: x.c[1], label: x.c[1], n: 1 }); }
+    if (sub !== 'all' && !subs.some((s) => s.key === sub)) subs.push({ key: sub, label: sub, n: 0 });
+    const order = Object.values(AH_SUBCLASSES[cat] ?? {}), rank = (s) => (s.key === 'all' ? -1 : order.includes(s.key) ? order.indexOf(s.key) : order.length);
+    subs.sort((x, y) => rank(x) - rank(y));
+    const list = sub === 'all' ? inCat : inCat.filter((x) => x.c[1] === sub);
+    return { cats, subs, list };
+  };
+  // Turn a strip; on a strip the cursor stays put so it can keep turning, from a listing it goes back to the top.
+  const step = (a, which, d) => {
+    const b = browse(a, Date.now());
+    const opts = which === 'cat' ? b.cats : b.subs;
+    if (opts.length < 2) return;
+    const i = opts.findIndex((o) => o.key === (which === 'cat' ? cat : sub));
+    const next = opts[(i + d + opts.length) % opts.length].key;
+    if (which === 'cat') { cat = next; sub = 'all'; } else sub = next;
+    if (stripAt()) view.scroll = 0; else top();
+  };
   const view = {
-    id: 'auction', title: 'Auction House', hint: hint(),
+    id: 'auction', title: 'Auction House',
+    get hint() { return hint(); },
     keys: {
-      s: { hint: 'search', fn: (a) => { if (mode !== 'browse') return; a.prompt('Search: ', (t) => { filter = t.trim().toLowerCase(); view.cursor = 0; view.scroll = 0; a.render(); }, filter); } },
+      s: { hint: 'search', fn: (a) => { if (mode !== 'browse') return; a.prompt('Search: ', (t) => { filter = t.trim().toLowerCase(); top(); a.render(); }, filter); } },
+      '[': { fn: (a) => { if (mode === 'browse') step(a, 'sub', -1); } },
+      ']': { fn: (a) => { if (mode === 'browse') step(a, 'sub', +1); } },
       b: { hint: 'bid', fn: (a, row) => {
         if (mode !== 'browse' || !row?.data?.auction) return;
         const au = row.data.auction, min = minNextBid(au);
@@ -140,25 +223,39 @@ export function auctionDialog(app) {
       m: { hint: 'mailbox', fn: (a) => a.push(mailDialog(a)) },
     },
     onKey(a, k) {
-      if (k !== 'tab') return false;
-      mode = MODES[(MODES.indexOf(mode) + 1) % MODES.length];
+      if (mode === 'browse' && (k === 'left' || k === 'right')) { step(a, stripAt() ?? 'cat', k === 'right' ? +1 : -1); return true; }
+      if (k !== 'tab' && k !== 'shift-tab') return false;
+      mode = MODES[(MODES.indexOf(mode) + (k === 'tab' ? 1 : MODES.length - 1)) % MODES.length];
       if (mode === 'browse') a.g.refillAuctions(Date.now());
-      view.cursor = 0; view.scroll = 0; view.hint = hint();
+      top();
       return true;
     },
     rows(a) {
       const now = Date.now(), ds = a.ds;
       const unread = a.g.unreadMailCount(now);
+      const L = a.layout(), width = (L.detailW ? L.listW : L.W) - 2;
+      const modeLabels = MODES.map((m) => ({ browse: 'Browse', sell: 'Sell', mine: 'My auctions' }[m]));
       const rows = [
-        { text: `${bold('Auction House')}   ${MODES.map((m) => (m === mode ? bold : dim)({ browse: 'Browse', sell: 'Sell', mine: 'My auctions' }[m])).join(dim(' | '))}   ${yellow(moneyText(a.ch.gold) || '0c')}${unread ? yellow(`   ${unread} new mail`) : ''}`, header: true },
-        { text: '', header: true },
+        { text: `${bold('Auction House')}  ${tabStrip(modeLabels, MODES.indexOf(mode), 40)}  ${yellow(moneyText(a.ch.gold) || '0c')}${unread ? yellow(`   ${unread} new mail`) : ''}`, header: true },
       ];
       if (mode === 'browse') {
-        let list = a.g.browseAuctions(now);
-        if (filter) list = list.filter((x) => (ds.item(x.item)?.name ?? '').toLowerCase().includes(filter));
+        const b = browse(a, now);
+        const strip = (which, opts, key, label) => {
+          const focused = !toList && view.cursor === rows.length;
+          rows.push({
+            text: tabStrip(opts.map((o) => `${o.label} ${o.n}`), opts.findIndex((o) => o.key === key), width - 1, focused), data: { strip: which },
+            detail: () => [bold(label), '', dim('Left Right: pick one'), dim(`Down${which === 'cat' && rows.some((r) => r.data?.strip === 'sub') ? ': subcategories' : ' or Enter: the listings'}`)],
+            act: (a2) => a2.moveCursor(view, a2.rowsOf(view), +1),
+          });
+        };
+        strip('cat', b.cats, cat, 'Category');
+        if (cat !== 'all' && b.subs.length > 2) strip('sub', b.subs, sub, 'Subcategory');
+        rows.push({ text: '', header: true });
+        const list = b.list.map((x) => x.au);
         list.sort((x, y) => (ds.item(x.item)?.name ?? '').localeCompare(ds.item(y.item)?.name ?? '') || unit(x) - unit(y));
-        rows.push({ text: `${filter ? `"${filter}": ` : ''}${plural(list.length, 'listing')}${filter ? dim('   s: change search') : dim('   s: search by name')}`, header: true });
-        if (!list.length) rows.push({ text: dim('Nothing on the boards right now.'), header: true });
+        const where = cat === 'all' ? '' : `${b.cats.find((c) => c.key === cat)?.label}${sub === 'all' ? '' : ` › ${sub}`}: `;
+        rows.push({ text: `${where}${filter ? `"${filter}": ` : ''}${plural(list.length, 'listing')}${filter ? dim('   s: change search') : dim('   s: search by name')}`, header: true });
+        if (!list.length) rows.push({ text: dim(filter || cat !== 'all' ? 'Nothing listed here.' : 'Nothing on the boards right now.'), header: true });
         for (const au of list) {
           const it = ds.item(au.item);
           const can = au.buyoutCopper <= a.ch.gold;
@@ -171,6 +268,7 @@ export function auctionDialog(app) {
           });
         }
       } else if (mode === 'sell') {
+        rows.push({ text: '', header: true });
         const st = a.g.state.inventory.stacks;
         rows.push({ text: dim('Pick something from your bags to put up for auction.'), header: true });
         if (!st.length) rows.push({ text: dim('Your bags are empty.'), header: true });
@@ -185,6 +283,7 @@ export function auctionDialog(app) {
           });
         }
       } else {
+        rows.push({ text: '', header: true });
         const own = a.g.ownAuctions(), bids = a.g.myBidAuctions();
         const mail = a.g.listMail(now);
         rows.push({ text: `Mailbox: ${mail.length ? `${plural(mail.length, 'letter')} waiting` : 'empty'}${dim('  (sales and refunds arrive here)')}`, act: () => a.push(mailDialog(a)), data: {} });
@@ -206,6 +305,12 @@ export function auctionDialog(app) {
           rows.push({ text: `  ${qualityPaint(it?.quality)(it?.name ?? au.item)}${au.quantity > 1 ? ` x${au.quantity}` : ''}  ${dim('your bid')} ${moneyText(au.bidCopper)}  ${timeLeft(au, now)}`, header: true });
         }
       }
+      if (toList) {
+        toList = false;
+        const first = mode === 'browse' ? rows.findIndex((r) => r.data?.auction) : -1;
+        view.cursor = first >= 0 ? first : 0;
+      }
+      lastRows = rows;
       return rows;
     },
   };

package/src/cli/tuiCompanions.mjs

@@ -1,7 +1,7 @@
 // The Companions tab: your party and bench, hiring at an inn, one page per companion (role, gear, bags,
 // professions) and their gathering trips, and the squad mode that decides who fights beside you. A trimmed
 // port of phonecraft's companionsPanel.ts, companionMissionsDesk.ts and squadModePicker.ts.
-import { bold, dim, cyan, yellow, green, red, qualityPaint, fit, plural, itemText } from './text.mjs';
+import { bold, dim, cyan, yellow, green, red, qualityPaint, fit, plural, itemText, vis, wrapLines } from './text.mjs';
 import { itemLines } from './tuiViews.mjs';
 import { recipeBook, openSendGoods, companionsOf } from './tuiProfessions.mjs';
 import { SQUAD_MODES, SQUAD_MODE_LABEL, squadModeOf, setSquadMode } from './squad.mjs';
@@ -10,6 +10,7 @@ import { barsDialog, companionBarsOwner } from './tuiBars.mjs';
 import { enchantLines } from './tuiGear.mjs';
 import { moneyText } from '../domain/economy/money.ts';
 import { className, raceName } from '../domain/core/ids.ts';
+import { paperdollArt } from './paperdoll.mjs';
 import { bagCapacity, EQUIP_SLOTS, SLOT_LABEL, itemSlotTargets } from '../domain/items/equipment.ts';
 import { equippedEntry } from '../domain/items/itemInstance.ts';
 import { companionCharacter, companionLevel, hireSkillMap, MAX_COMPANIONS, SQUAD_ROLES } from '../domain/bots/squad.ts';
@@ -76,7 +77,15 @@ function statLines(app, char) {
 
 function statRows(app, char, note) {
   const lines = statLines(app, char);
-  return lines.map((l) => ({ text: l.trim(), detail: () => [bold('Stats'), '', ...lines, '', dim(note)] }));
+  return lines.map((l) => ({ text: l.trim(), detail: () => withArt(app, char, [bold('Stats'), '', ...lines, '', dim(note)]) }));
+}
+
+/** The text, then `subject` (a companion, a candidate's body, any { race, gender, name, equipped }) drawn in their gear under it when the pane has room. */
+function withArt(app, subject, text) {
+  const L = app.layout(), w = L.detailW - 2;
+  const used = text.reduce((n, line) => n + (vis(line) > w ? wrapLines(line, w).length : 1), 0); // as the pane wraps them
+  const art = paperdollArt(subject, w, L.mainH - used - 1);
+  return art ? [...text, '', ...art] : text;
 }
 
 function wornLines(app, gear) {
@@ -134,7 +143,7 @@ export function companionsView(app) {
       const rows = [H(`Party ${squad.length}/${MAX_COMPANIONS}   ${dim(`trip energy ${energy}/${MAX_COMPANION_ENERGY}`)}   ${yellow(moneyText(a.ch.gold) || '0c')}`), squadModeRow(a)];
       const row = (c) => ({
         text: `${fit(c.name, 12)} ${fit(dim(`L${companionLevel(c, a.ch.level)} ${className(c.cls)}`), 12)} ${fit(roleText(c.role), 6)} ${c.mission ? yellow('away ') : ''}${profTags(compProfLines(a, c))}`,
-        detail: () => [...compLines(a, c), '', dim('Enter: open their page')],
+        detail: () => withArt(a, c, [...compLines(a, c), '', dim('Enter: open their page')]), // them in their gear
         act: () => a.push(companionDialog(a, c.id)),
       });
       if (!squad.length && !bench.length) rows.push(H(''), H(dim('  You travel alone. Innkeepers hire out companions: they fight beside you, carry and craft.')));
@@ -249,7 +258,7 @@ function hireDialog(app, results) {
         rows.push({
           text: `${fit(b.name, 12)} ${fit(dim(`L${b.level} ${className(b.cls)}`), 12)} ${fit(c.specRole ? roleText(c.specRole) : '', 6)} ${fit(hireText(a, c, true), 7)} ${profTags(candProfLines(c))}`,
           data: b.id,
-          detail: () => [...candLines(a, c), '', dim('Enter: their page   h: hire')],
+          detail: () => withArt(a, candCharacter(a, c), [...candLines(a, c), '', dim('Enter: their page   h: hire')]),
           act: () => a.push(candidateDialog(a, b.id)),
         });
       }
@@ -266,7 +275,7 @@ function candidateDialog(app, botId) {
     rows(a) {
       const c = findCand(a, botId);
       if (!c) { setTimeout(() => { if (a.top()?.id === viewId) a.pop(); }, 0); return [H('They are no longer looking for work.')]; }
-      const b = c.bot, ds = a.ds;
+      const b = c.bot, ds = a.ds, body = candCharacter(a, c);
       const rows = [H(`${bold(b.name)}  ${dim(`L${b.level} ${raceName(b.race)} ${className(b.cls)}`)}  ${c.specName ?? ''}  ${hireText(a, c)}`), H('')];
 
       // Hire: their spec's role first; any role works, it rebuilds talents and rotation.
@@ -275,9 +284,9 @@ function candidateDialog(app, botId) {
       for (const role of roles) {
         rows.push({
           text: `Hire as ${roleText(role)} for ${hireText(a, c)}${role === c.specRole ? dim('  their spec') : ''}`,
-          detail: () => [bold(`Hire ${b.name} as ${role}`), '', `Cost: ${hireText(a, c)}   you have ${yellow(moneyText(a.ch.gold) || '0c')}`,
+          detail: () => withArt(a, body, [bold(`Hire ${b.name} as ${role}`), `Cost: ${hireText(a, c)}   you have ${yellow(moneyText(a.ch.gold) || '0c')}`,
             role === c.specRole ? dim(`They already play ${c.specName}.`) : dim('They respec for the role: talents and rotation rebuild for free.'),
-            (a.g.state.squad ?? []).length >= MAX_COMPANIONS ? yellow('Your party is full: they start on the bench.') : '', '', dim('A released hire refunds the price.')],
+            ...((a.g.state.squad ?? []).length >= MAX_COMPANIONS ? [yellow('Your party is full: they start on the bench.')] : []), dim('A released hire refunds the price.')]),
           act: () => { if (hireAs(a, c, role)) a.pop(); },
         });
       }
@@ -293,7 +302,7 @@ function candidateDialog(app, botId) {
         });
       }
 
-      rows.push(H(''), H('Stats'), ...statRows(a, candCharacter(a, c), 'With the gear they arrive in, on their own spec.'));
+      rows.push(H(''), H('Stats'), ...statRows(a, body, 'With the gear they arrive in, on their own spec.'));
 
       rows.push(H(''), H(`Wearing ${dim(c.gearProfile ? `${gearProfileLabel(c.gearProfile)} kit` : '')}`));
       for (const slot of EQUIP_SLOTS) {
@@ -330,15 +339,16 @@ export function companionDialog(app, id) {
         rows.push({ text: yellow(awayText(a, comp)), detail: () => missionStatusLines(a, comp), act: () => a.push(missionDialog(a, id, comp.mission.skill)) });
       }
       rows.push(H(''));
-      rows.push({ text: `Role: ${roleText(comp.role)}`, detail: () => [bold('Role'), '', 'Tank, healer or damage. Changing it is free and rebuilds their talents and rotation for the role.'],
+      const note = (title, ...lines) => withArt(a, comp, [bold(title), '', ...lines]);
+      rows.push({ text: `Role: ${roleText(comp.role)}`, detail: () => note('Role', 'Tank, healer or damage. Changing it is free and rebuilds their talents and rotation for the role.'),
         act: () => a.pick(`${comp.name}: what role?`, SQUAD_ROLES.map((r) => ({ label: roleText(r), value: r })), (r) => a.result(g.setCompanionRole(id, r), `${comp.name} is now your ${r}.`)) });
       rows.push(seated
-        ? { text: 'Move to the bench', detail: () => [bold('Bench'), '', 'They stay yours with their gear, level and bags, and come back free from any inn or right here.'], act: () => a.result(g.dismissCompanion(id), `${comp.name} waits on the bench.`) }
-        : { text: green('Seat in the party'), detail: () => [bold('Party'), '', `Up to ${MAX_COMPANIONS} companions travel with you.`], act: () => a.result(g.activateCompanion(id), `${comp.name} joins the party.`) });
-      rows.push({ text: 'Put on their best gear', detail: () => [bold('Best gear'), '', 'Strict upgrades from their own bags first, then from yours. What you hand over becomes theirs.'], act: () => { const r = g.equipCompanionBest(id); a.result(r, r.equipped ? `${comp.name} puts on ${plural(r.equipped, 'piece')}.` : `${comp.name} already wears the best they can.`); } });
-      rows.push({ text: 'Give them something from your bags…', detail: () => [bold('Give'), '', 'Anything you hand over is theirs. A Plans or Pattern they can use is learned on the spot.'], act: () => giveDialog(a, id) });
+        ? { text: 'Move to the bench', detail: () => note('Bench', 'They stay yours with their gear, level and bags, and come back free from any inn or right here.'), act: () => a.result(g.dismissCompanion(id), `${comp.name} waits on the bench.`) }
+        : { text: green('Seat in the party'), detail: () => note('Party', `Up to ${MAX_COMPANIONS} companions travel with you.`), act: () => a.result(g.activateCompanion(id), `${comp.name} joins the party.`) });
+      rows.push({ text: 'Put on their best gear', detail: () => note('Best gear', 'Strict upgrades from their own bags first, then from yours. What you hand over becomes theirs.'), act: () => { const r = g.equipCompanionBest(id); a.result(r, r.equipped ? `${comp.name} puts on ${plural(r.equipped, 'piece')}.` : `${comp.name} already wears the best they can.`); } });
+      rows.push({ text: 'Give them something from your bags…', detail: () => note('Give', 'Anything you hand over is theirs. A Plans or Pattern they can use is learned on the spot.'), act: () => giveDialog(a, id) });
       rows.push(...teachRow(a, comp));
-      rows.push({ text: 'Action bars…', detail: () => [bold('Action bars'), '', 'Their kit: what they can fire when you take them over, and the bag items their autopilot preps with.'], act: () => a.push(barsDialog(a, (x) => companionBarsOwner(x, findComp(x, id)))) });
+      rows.push({ text: 'Action bars…', detail: () => note('Action bars', 'Their kit: what they can fire when you take them over, and the bag items their autopilot preps with.'), act: () => a.push(barsDialog(a, (x) => companionBarsOwner(x, findComp(x, id)))) });
       rows.push(...settingsRows(a, comp));
       rows.push(...petRows(a, comp));
       rows.push(...questRows(a, comp));
@@ -382,7 +392,7 @@ export function companionDialog(app, id) {
       rows.push(...bagRows(a, comp, bagCapacity(companionCharacter(comp, lvl, ds), ds)));
       rows.push(...bankRows(a, comp));
 
-      rows.push(H(''), { text: red(`Release ${comp.name} for good`), detail: () => [bold('Release'), '', 'They leave your roster for good. You get the hire price back. Their bags and gear go with them.'],
+      rows.push(H(''), { text: red(`Release ${comp.name} for good`), detail: () => note('Release', 'They leave your roster for good. You get the hire price back. Their bags and gear go with them.'),
         act: () => a.confirm(`Release ${comp.name} for good? Their bags and gear go with them.`, () => { const r = g.releaseCompanions({ ids: [id] }); if (a.result(r, `${comp.name} leaves.${r.refundCopper ? ` You get ${moneyText(r.refundCopper)} back.` : ''}`)) a.popTo('__none__'); }) });
       return rows;
     },

package/src/cli/tuiCreate.mjs

@@ -0,0 +1,223 @@
+// The character create screen: faction, race, class, gender, name and the five looks of the body on one form, the
+// hero drawn in the starting gear beside it, and under the form a card of what they start with (the race
+// and the class in a sentence, racials, pools and attributes at level 1, spells, gear). Left and Right
+// change the row under the cursor; Enter on Race or Class opens a list with each choice drawn; Enter on
+// Name types one; Enter on Create rolls the character. Esc goes back to the character list.
+import { bold, dim, green, red, wrapLines, fit } from './text.mjs';
+import { className, raceName } from '../domain/core/ids.ts';
+import { newGameState, newGameStateFromWorldBot, pickRandomWorldBot } from '../engine/game.ts';
+import { maxHealth, maxPower, knownUsableSpells } from '../domain/character/character.ts';
+import { effectiveStats, powerType } from '../domain/character/characterStats.ts';
+import { bodyOptions, clampAppearance, cycleAppearance, lowestSelectable, slotCount, APPEARANCE_SLOTS } from '../domain/character/appearance.ts';
+import { equippedEntry } from '../domain/items/itemInstance.ts';
+import { nativeDisplayId } from '../domain/character/displayForm.ts';
+import { creatureArt } from './modelArt.mjs';
+import { paperdollArt } from './paperdoll.mjs';
+
+// A sentence on each race and class, in the voice of the client's create screen; the racials, the start
+// zone and everything else on the card come from the data.
+const RACE_BLURB = {
+  1: 'The people of Stormwind, adaptable and diplomatic: their spirit runs deeper, reputation comes sooner, and they see through stealth a little further.',
+  2: 'The Horde of Thrall, hardy and fierce. Blood Fury hardens their attacks, stuns slide off them more often, their axes bite deeper, and their pets strike harder.',
+  3: 'The stout folk of Ironforge. Stoneform shrugs off poison, disease and bleeding; they resist frost, shoot guns truer, and can find treasure in the earth.',
+  4: 'The Kaldorei of Teldrassil, ancient and watchful. They melt into Shadowmeld, are harder to hit, resist nature, and walk as wisps when they fall.',
+  5: 'The Forsaken of the Undercity, free of the Lich King. Will of the Forsaken breaks fear, charm and sleep; they eat the dead to heal, breathe underwater longer, and resist shadow.',
+  6: 'The Shu\'halo of Mulgore, peaceful until roused. War Stomp stuns everything around them, they stand with more health, resist nature, and gather herbs faster.',
+  7: 'The tinkers of Gnomeregan, guests of Ironforge. Escape Artist slips any snare, their minds hold more mana, they resist arcane, and they are born engineers.',
+  8: 'The Darkspear, who followed Thrall from the Echo Isles. Berserking quickens blows and spells, they regenerate even in a fight, slay beasts harder, and throw and shoot bows truer.',
+};
+const CLASS_BLURB = {
+  1: 'Steel and rage. Warriors wear the heaviest armour, hold the line behind a shield or swing a two-hander, and build rage by hitting and being hit.',
+  2: 'The Light\'s champion in plate: a healer, a protector and a slow but sure fighter, with blessings for the party and a bubble for when it goes wrong.',
+  3: 'A ranger with a bow or gun and a pet tamed from the wild. The pet holds the foe while the hunter shoots, and the map shows what they track.',
+  4: 'A stealthy fighter who builds combo points with blades and spends them on finishing moves. Poisons, lockpicking and picking pockets come with the trade.',
+  5: 'The great healer, in cloth. Holy mends and shields the party; Shadow drains and torments from Shadowform, trading the healing for the dark.',
+  6: 'The Horde\'s keeper of the elements, in mail: totems, lightning and shocks, heals and weapon imbues, half melee and half spell at every turn.',
+  7: 'The master of frost, fire and arcane, fragile in cloth and lethal at range. Conjures food and water, sheeps a foe, and opens portals between cities.',
+  8: 'A wielder of fel magic in cloth: curses and damage over time, a demon summoned to tank or drain, and health, soul shards and healthstones traded for power.',
+  9: 'The shapeshifter: a bear to tank, a cat to claw, healing and nature magic in caster form, and travel form for the road.',
+};
+
+const NAME_RE = /^[A-Za-z]{2,12}$/;
+const properName = (s) => s[0].toUpperCase() + s.slice(1).toLowerCase();
+const rand = (n) => Math.floor(Math.random() * n);
+const newSeed = () => (Date.now() ^ (Math.random() * 0x7fffffff)) >>> 0;
+
+/** A random look within the body's legal choices (the create screen's shuffle; bald and hornless allowed where offered). */
+export function randomLook(race, gender) {
+  const look = {};
+  APPEARANCE_SLOTS.forEach((key, s) => {
+    const floor = lowestSelectable(race, gender, s), count = slotCount(race, gender, s);
+    look[key] = count > floor ? floor + rand(count - floor) : 0;
+  });
+  return clampAppearance(look, race, gender);
+}
+
+/** A name from the world bots' pool for the gender, fit for a character. */
+export function randomName(ds, gender) {
+  const pool = ds.botNames()[gender === 1 ? 'female' : 'male'];
+  for (let i = 0; i < 50 && pool.length; i++) { const n = pool[rand(pool.length)]; if (NAME_RE.test(n)) return properName(n); }
+  return gender === 1 ? 'Aalina' : 'Aalart';
+}
+
+/** The screen. `done(state)` gets the new character's game state; `onCancel` is Esc (back to the character list). */
+export function characterCreation(app, done, { onCancel } = {}) {
+  const ds = app.ds;
+  const races = ds.races();
+  const classesOf = (race) => race.classes.filter((c) => ds.createInfo(race.id, c));
+  const st = { race: races[0], cls: classesOf(races[0])[0], gender: 0, name: '', look: null };
+  st.look = randomLook(st.race.id, st.gender);
+  // The state a Create would make for a body and class, less the name and the look: its character carries the
+  // starting gear, pools and attributes the card and the drawing read. One per combination, kept.
+  const previews = new Map();
+  const previewOf = (race, cls, gender) => {
+    const key = `${race}-${cls}-${gender}`;
+    let p = previews.get(key);
+    if (!p) { p = newGameState(ds, race, cls, 'Preview', 1, gender); previews.set(key, p); }
+    return p;
+  };
+  const preview = () => previewOf(st.race.id, st.cls, st.gender);
+  const hero = (cls = st.cls) => ({ ...previewOf(st.race.id, cls, st.gender).char, name: st.name || 'Preview', appearance: st.look });
+  const setRace = (r) => { st.race = r; lastRace[r.faction] = r; const cs = classesOf(r); if (!cs.includes(st.cls)) st.cls = cs[0]; st.look = clampAppearance(st.look, r.id, st.gender); };
+  // Faction comes first: Race cycles and lists only its races, and flipping back returns to the race last chosen there.
+  const factions = [...new Set(races.map((r) => r.faction))];
+  const racesOf = (f) => races.filter((r) => r.faction === f);
+  const lastRace = { [st.race.faction]: st.race };
+  const setFaction = (f) => setRace(lastRace[f] ?? racesOf(f)[0]);
+  const setGender = (g) => { st.gender = g; st.look = clampAppearance(st.look, st.race.id, g); };
+  const cycle = (list, cur, dir) => list[(list.indexOf(cur) + dir + list.length) % list.length];
+  const genderName = () => (st.gender === 1 ? 'Female' : 'Male');
+  const factionName = (r) => (r.faction === 'horde' ? 'Horde' : 'Alliance');
+
+  const view = { id: 'create', title: 'New character', hint: 'Left Right: change   Enter: pick or type' + (onCancel ? '   Esc: character list' : '') };
+  const rowAt = (id) => app.rowsOf(view).findIndex((r) => r.id === id);
+  const goTo = (id) => { const i = rowAt(id); if (i >= 0) { view.cursor = i; app.ensureVisible(view, app.rowsOf(view)); } app.render(); };
+
+  // The hero drawn for the pane: the body in its starting gear with the look, or the bare body when the gear pack lacks it.
+  const drawn = (cls, maxCols, maxRows) => paperdollArt(hero(cls), maxCols, maxRows) ?? creatureArt(nativeDisplayId(st.race.id, st.gender), maxCols, maxRows);
+  const withBody = (text, art) => (art ? [...text, '', ...art] : text);
+
+  const askName = () => app.prompt('Name (2-12 letters): ', (raw) => {
+    const name = raw.trim();
+    if (!NAME_RE.test(name)) { app.say(red('Letters only, 2 to 12 of them.')); askName(); return; } // said in the log: the prompt covers the hint line
+    st.name = properName(name);
+    goTo('create'); // named: Enter again creates
+  }); // the line starts empty: Esc keeps the name they had
+  const rollName = () => { st.name = randomName(ds, st.gender); app.render(); };
+  const shuffle = () => { st.look = randomLook(st.race.id, st.gender); app.render(); };
+  const create = () => {
+    if (!st.name) { app.flashMsg('Give them a name first.'); goTo('name'); return; }
+    done(newGameState(ds, st.race.id, st.cls, st.name, newSeed(), st.gender, st.look));
+  };
+  const randomCharacter = () => {
+    const seed = newSeed();
+    done(newGameStateFromWorldBot(ds, pickRandomWorldBot(ds, seed), seed));
+  };
+
+  // Enter on Race: the faction's races listed with each body drawn; on Class: every class this race may be, drawn in its gear.
+  const racePicker = () => {
+    const list = racesOf(st.race.faction);
+    const p = app.pick('Race', list.map((r) => ({
+      label: `${fit(r.name, 10)} ${dim(factionName(r))}`,
+      detail: () => {
+        const L = app.layout();
+        const text = [bold(r.name), dim(factionName(r)), `Starts in ${ds.zone(r.startZone)?.name ?? r.startZone}`, dim('Classes: ') + classesOf(r).map(className).join(', ')];
+        return withBody(text, creatureArt(nativeDisplayId(r.id, st.gender), L.detailW - 2, L.mainH - text.length - 1));
+      },
+      value: r,
+    })), (r) => { setRace(r); app.render(); }, { hint: 'Enter: choose' });
+    p.cursor = list.indexOf(st.race);
+  };
+  const classPicker = () => {
+    const classes = classesOf(st.race);
+    const p = app.pick('Class', classes.map((c) => ({
+      label: className(c),
+      detail: () => {
+        const L = app.layout();
+        const text = [bold(className(c)), ...wrapLines(dim(CLASS_BLURB[c] ?? ''), L.detailW - 2)];
+        return withBody(text, drawn(c, L.detailW - 2, L.mainH - text.length - 1));
+      },
+      value: c,
+    })), (c) => { st.cls = c; app.render(); }, { hint: 'Enter: choose' });
+    p.cursor = classes.indexOf(st.cls);
+  };
+
+  // A form row: the label, the value, and the arrows when Left and Right change it.
+  const field = (id, label, value, { cycle: cyc, act, arrows = true }) => ({ id, text: `${fit(label, 12)} ${fit(bold(value), 10)}${arrows ? ` ${dim('◂ ▸')}` : ''}`, cycle: cyc, act });
+  const H = (text = '', plain = false) => ({ text, header: true, plain });
+
+  // Under the form: what the race and the class are, and what a level 1 of them starts with.
+  const card = () => {
+    const L = app.layout();
+    const w = Math.max(24, (L.detailW ? L.listW : L.W) - 3);
+    const wrap = (t) => wrapLines(t, w).map((l) => H(l, true));
+    const r = st.race, p = preview(), ch = p.char;
+    const out = [H(`${r.name} · ${factionName(r)}`)];
+    if (RACE_BLURB[r.id]) out.push(...wrap(RACE_BLURB[r.id]));
+    out.push(...wrap(dim(`Starts in ${ds.zone(r.startZone)?.name ?? r.startZone}; home city ${r.city}.`)));
+    const racials = [...new Set(r.racials.map((id) => ds.spell(id)?.name).filter(Boolean))];
+    if (racials.length) out.push(...wrap(`${dim('Racials:')} ${racials.join(', ')}`));
+    out.push(H(), H(className(st.cls)));
+    if (CLASS_BLURB[st.cls]) out.push(...wrap(CLASS_BLURB[st.cls]));
+    const s = effectiveStats(ch, ds), pt = powerType(ch);
+    out.push(...wrap(`${dim('Level 1:')} ${maxHealth(ch, ds)} health, ${maxPower(ch, ds)} ${pt}`));
+    out.push(...wrap(`${dim('Str')} ${s.str}  ${dim('Agi')} ${s.agi}  ${dim('Sta')} ${s.sta}  ${dim('Int')} ${s.int}  ${dim('Spi')} ${s.spi}`));
+    const spells = [...new Set(knownUsableSpells(ch, p.spellbook, ds).map((sp) => sp.name))];
+    if (spells.length) out.push(...wrap(`${dim('Knows:')} ${spells.join(', ')}`));
+    const worn = new Set(Object.values(ch.equipped ?? {}).map(equippedEntry));
+    const wears = [], carries = [];
+    for (const it of ds.createInfo(r.id, st.cls)?.items ?? []) {
+      const def = ds.item(it.item);
+      if (def) (worn.has(it.item) ? wears : carries).push(it.amount > 1 ? `${def.name} ×${it.amount}` : def.name);
+    }
+    if (wears.length) out.push(...wrap(`${dim('Wears:')} ${wears.join(', ')}`));
+    if (carries.length) out.push(...wrap(`${dim('Carries:')} ${carries.join(', ')}`));
+    return out;
+  };
+
+  view.rows = () => {
+    const rows = [
+      field('faction', 'Faction', factionName(st.race), { cycle: (d) => setFaction(cycle(factions, st.race.faction, d)), act: () => { setFaction(cycle(factions, st.race.faction, 1)); app.render(); } }),
+      field('race', 'Race', st.race.name, { cycle: (d) => setRace(cycle(racesOf(st.race.faction), st.race, d)), act: racePicker }),
+      field('class', 'Class', className(st.cls), { cycle: (d) => { st.cls = cycle(classesOf(st.race), st.cls, d); }, act: classPicker }),
+      field('gender', 'Gender', genderName(), { cycle: () => setGender(st.gender === 1 ? 0 : 1), act: () => { setGender(st.gender === 1 ? 0 : 1); app.render(); } }),
+      { id: 'name', text: `${fit('Name', 12)} ${st.name ? bold(st.name) : dim('Enter: type one   n: a random one')}`, act: askName },
+      H(), H('Look'),
+    ];
+    // The body's own slots, by the names the client gives them (Horn Style, Tusks…); a slot with one choice is left out.
+    const body = bodyOptions(st.race.id, st.gender);
+    APPEARANCE_SLOTS.forEach((key, s) => {
+      const opt = body?.options[s];
+      if (!opt) return;
+      const floor = lowestSelectable(st.race.id, st.gender, s), count = opt.count;
+      if (count - floor <= 1) return;
+      const i = st.look[key];
+      const value = i === 0 && opt.none ? 'None' : `${i + 1 - floor} of ${count - floor}`;
+      rows.push(field(key, opt.name, value, { cycle: (d) => { st.look = cycleAppearance(st.look, st.race.id, st.gender, s, d); }, act: () => { st.look = cycleAppearance(st.look, st.race.id, st.gender, s, 1); app.render(); } }));
+    });
+    rows.push({ id: 'shuffle', text: `${fit('', 12)} ${dim('r: a random look')}`, act: shuffle });
+    rows.push(H());
+    rows.push({ id: 'create', text: green(bold(st.name ? `Create ${st.name}, ${genderName()} ${st.race.name} ${className(st.cls)}` : 'Create (needs a name)')), act: create });
+    rows.push({ id: 'random', text: `Random character  ${dim('a world bot at its own level, geared and named')}`, act: randomCharacter });
+    rows.push(H(), ...card());
+    return rows;
+  };
+  // The pane: the hero as they will stand on the Character tab, in the starting gear, as large as the pane allows.
+  view.detail = () => {
+    const L = app.layout();
+    const head = [`${st.name ? bold(st.name) : dim('Unnamed')}  ${dim(`${genderName()} ${raceName(st.race.id)} ${className(st.cls)}`)}`, ''];
+    const art = drawn(st.cls, L.detailW - 2, L.mainH - head.length);
+    return art ? [...head, ...art] : head;
+  };
+  view.keys = {
+    n: { hint: 'random name', fn: rollName },
+    r: { hint: 'random look', fn: shuffle },
+  };
+  view.onKey = (a, k, row) => {
+    if ((k === 'left' || k === 'right') && row?.cycle) { row.cycle(k === 'left' ? -1 : 1); a.render(); return true; }
+    if (k === 'escape') { onCancel?.(); return true; }
+    return false;
+  };
+  app.push(view);
+  return view;
+}

package/src/cli/tuiDungeon.mjs

@@ -314,7 +314,7 @@ function objectRow(app, def, o) {
   const name = spawn.name ?? ds.creature(spawn.entry)?.name ?? `npc ${spawn.entry}`;
   const marks = `${quests.turnIn.length ? green(' ?') : ''}${quests.offer.length ? yellow(' !') : ''}${quests.escort.length ? cyan(' escort') : ''}`;
   return {
-    text: `${dim('☺')} ${name}${marks}`,
+    text: `${dim('•')} ${name}${marks}`,
     detail: () => [bold(name), ...quests.offer.map((q) => `${yellow('!')} ${q.title}`), ...quests.turnIn.map((q) => `${green('?')} ${q.title}`), ...quests.escort.map((q) => `${cyan('escort')} ${q.title}`), '', dim('Enter: speak with them')],
     act: () => npcDialog(app, spawn.entry, name),
   };