azeroth-shell 0.1.1 → 0.2.0

package/src/cli/tuiFightPanes.mjs

@@ -5,13 +5,18 @@
 import { bold, dim, cyan, yellow, green, red, inverse, fit, vis, cut, bar, pct } from './text.mjs';
 import { createDpsMateMeter, partyMeterSnapshot } from '../domain/bots/dpsMate.ts';
 import { moneyText } from '../domain/economy/money.ts';
+import { runPaneLines, questPaneLines, bagsPaneLines } from './tuiAutopilot.mjs';
 
 export const FIGHT_PANES = [
   { id: 'log', label: 'Log' },
   { id: 'meter', label: 'Meter' },
   { id: 'threat', label: 'Threat' },
   { id: 'loot', label: 'Loot' },
+  { id: 'run', label: 'Run' }, // the autopilot's ledger: only once a run exists
+  { id: 'quests', label: 'Quests' }, // during a run: the quests it works on
+  { id: 'bags', label: 'Bags' }, // during a run: the bags, with a cursor, so items can be used while it plays
 ];
+const panesOf = (app) => FIGHT_PANES.filter((p) => (p.id === 'run' ? app.auto || app.lastRun : p.id === 'quests' || p.id === 'bags' ? !!app.auto : true));
 // The meter's views, like a classic meter addon's modes. Each ranks the party by its own number.
 const METER_VIEWS = [
   { id: 'damage', title: 'Damage done', value: (a) => a.damage },
@@ -26,10 +31,22 @@ const meterView = (app) => METER_VIEWS.find((v) => v.id === app.meterSort) ?? ME
 
 export const fightPane = (app) => app.fightPane ?? 'log';
 
+/** The pane shows in a fight and on the autopilot's between-fight panel, so a run holds the chosen pane
+ *  instead of dropping to the log after every kill. */
+export const showsPanes = (app) => !app.stack.length && (app.auto ? !app.auto.browsing : !!app.fight);
+
+/** What Tab moves to next ("meter", "threat", "loot", "log"), for the hint line. */
+export function nextPaneId(app) {
+  const panes = panesOf(app);
+  const i = Math.max(0, panes.findIndex((p) => p.id === fightPane(app)));
+  return panes[(i + 1) % panes.length].id;
+}
+
 /** Tab / Shift-Tab in a fight: the next or previous pane. */
 export function cycleFightPane(app, dir = 1) {
-  const i = Math.max(0, FIGHT_PANES.findIndex((p) => p.id === fightPane(app)));
-  app.fightPane = FIGHT_PANES[(i + dir + FIGHT_PANES.length) % FIGHT_PANES.length].id;
+  const panes = panesOf(app);
+  const i = Math.max(0, panes.findIndex((p) => p.id === fightPane(app)));
+  app.fightPane = panes[(i + dir + panes.length) % panes.length].id;
   app.render();
 }
 
@@ -67,21 +84,23 @@ export function noteLoot(app, taken = [], copper = 0) {
 
 /** The rule between the frames and the pane. In a fight it carries the pane tabs. */
 export function fightPaneRule(app, L) {
-  if (!app.fight || app.stack.length) return dim('─'.repeat(L.W));
+  if (!showsPanes(app)) return dim('─'.repeat(L.W));
   const cur = fightPane(app);
-  const tabs = FIGHT_PANES.map((p) => (p.id === cur ? inverse(` ${p.label} `) : dim(` ${p.label} `))).join(dim('─'));
+  const tabs = panesOf(app).map((p) => (p.id === cur ? inverse(` ${p.label} `) : dim(` ${p.label} `))).join(dim('─'));
   const left = `${dim('──')}${tabs}`;
-  const right = `${dim('Tab: switch')}${dim('──')}`;
+  const folded = cur === 'log' && app.fight?.folded?.() ? dim(`log folded at ${app.fight.speed}x, - unfolds it   `) : '';
+  const right = `${folded}${dim('Tab: switch')}${dim('──')}`;
   const mid = Math.max(0, L.W - vis(left) - vis(right));
   return cut(`${left}${dim('─'.repeat(mid))}${right}`, L.W);
 }
 
 /** The pane's lines (exactly L.logH of them). */
 export function fightPaneLines(app, L) {
-  const ctl = app.fight;
-  if (!ctl || app.stack.length || fightPane(app) === 'log') return app.logLines(L);
+  if (!showsPanes(app) || fightPane(app) === 'log') return app.logLines(L);
+  const ctl = app.fight ?? app.lastFight; // between autopilot fights: the one just over
   const pane = fightPane(app);
-  const lines = pane === 'meter' ? meterLines(app, ctl, L) : pane === 'threat' ? threatLines(app, ctl, L) : lootLines(app, L);
+  const lines = pane === 'run' ? runPaneLines(app, L) : pane === 'quests' ? questPaneLines(app, L) : pane === 'bags' ? bagsPaneLines(app, L)
+    : pane === 'loot' ? lootLines(app, L) : !ctl ? [dim(' No fight yet.')] : pane === 'meter' ? meterLines(app, ctl, L) : threatLines(app, ctl, L);
   const out = lines.slice(0, L.logH).map((l) => fit(l, L.W));
   while (out.length < L.logH) out.push('');
   return out;

package/src/cli/tuiFloor.mjs

@@ -277,7 +277,7 @@ function engage(app, f, ents) {
   if (!live.length) return false;
   const fight = app.fight;
   if (!fight) return fightBodies(app, f, live);
-  if (!fight.floor) { f.waiting.push(...live); return false; }
+  if (!fight.floor || fight.ended) { f.waiting.push(...live); return false; } // a fight over (its win still on screen) takes nobody in
   let n = 0;
   for (const e of live) {
     if (fight.session.sideOfGuid?.(e.guid)) continue;
@@ -453,7 +453,7 @@ function floorView(app, f) {
     f.timer = a.term.setInterval(() => {
       if (a.top()?.id !== 'floor' || a.fight) return;
       for (let i = 0; i < f.speed; i++) if (stepFloor(a, f)) break;
-      a.render();
+      a.renderSoon();
     }, TICK_MS);
   };
   const view = {

package/src/cli/tuiGear.mjs

@@ -52,6 +52,15 @@ export function repairOne(app, slot) {
   app.result(r, r.ok ? `${q.vendorName} repairs it for ${moneyText(r.spent)}.` : '');
 }
 
+/** Enter on Repair all, or R on the Gear tab: mend everything you wear at the repairer the quote prices against. */
+export function repairAll(app) {
+  const q = app.g.repairQuote();
+  if (!q.cost) { app.flashMsg('Nothing needs repair.'); return; }
+  if (!q.vendorName) { app.flashMsg('Nobody here repairs.'); return; }
+  const r = app.g.repairAll(q.vendorEntry ?? undefined);
+  app.result(r, r.ok ? `Repaired for ${moneyText(r.spent)}.` : '');
+}
+
 export function slotRepairLines(app, slot) {
   const cost = repairCostSlot(app.ch, slot, (e) => app.ds.item(e));
   if (!cost) return [];
@@ -125,12 +134,7 @@ export function gearExtraRows(app) {
   rows.push({
     text: `Repair all  ${q.cost ? yellow(moneyText(q.cost)) : dim('nothing to mend')}${q.cost ? dim(q.vendorName ? `  at ${q.vendorName}` : '  nobody here repairs') : ''}`,
     detail: () => [bold('Repair'), '', q.cost ? `Mending everything you wear costs ${moneyText(q.cost)}.` : 'Everything you wear is in good shape.', q.vendorName ? dim(`Priced at ${q.vendorName}.`) : dim('A smith or general goods vendor repairs.'), '', dim('Enter: repair all   r on a slot: repair one piece')],
-    act: (a) => {
-      if (!q.cost) { a.flashMsg('Nothing needs repair.'); return; }
-      if (!q.vendorName) { a.flashMsg('Nobody here repairs.'); return; }
-      const r = a.g.repairAll(q.vendorEntry ?? undefined);
-      a.result(r, r.ok ? `Repaired for ${moneyText(r.spent)}.` : '');
-    },
+    act: (a) => repairAll(a),
   });
   const weapon = rangedWeapon(app);
   const hasAmmo = app.g.state.inventory.stacks.some((s) => isAmmoItem(app.ds.item(s.item)));

package/src/cli/tuiLoot.mjs

@@ -77,6 +77,7 @@ export function lootDialog(app) {
       L.rows.forEach((r, i) => {
         rows.push({
           text: `${rowName(a, r)}${r.count > 1 ? ` x${r.count}` : ''}${r.blocked ? red('  bags full') : ''}`,
+          icon: a.ds.item(r.item)?.icon, sub: dim(a.ds.item(r.item)?.typeName ?? ''),
           detail: () => itemLines(a, a.ds.item(r.item), r.blocked ? ['', red('No room in your bags for this.')] : []),
           act: (a2) => {
             const res = a2.g.takeLoot(i);

package/src/cli/tuiPaperdoll.mjs

@@ -0,0 +1,107 @@
+// The Gear tab as a character sheet: you in your gear in the middle, the worn pieces' icons down both sides
+// the way the client's paperdoll lays them out (head to wrists on the left, hands to trinkets on the right,
+// the weapons and the bag bar underneath), each framed in its quality colour. Arrows move between the
+// slots (Up and Down in order, Shift+arrows across the picture), the detail pane is the piece's tooltip, and Enter, x and r act on the slot as they do in the list.
+// The rows are the gear view's own (a slot row carries `cell`); this file only places them. No colour, or a
+// window too small for the sheet, and the view lists its rows as before.
+import { canvas, drawCell, gridStep } from './iconGrid.mjs';
+import { iconsOn } from './iconArt.mjs';
+import { artWidth } from './modelArt.mjs';
+import { bold, dim, green, inverse, fit, cut, vis, qualityPaint, qualityCodes, plural } from './text.mjs';
+import { SLOT_LABEL } from '../domain/items/equipment.ts';
+
+const LEFT = ['head', 'neck', 'shoulder', 'back', 'chest', 'shirt', 'wrist'];
+const RIGHT = ['hands', 'waist', 'legs', 'feet', 'finger1', 'finger2', 'trinket1', 'trinket2'];
+const WEAPONS = ['mainhand', 'offhand', 'ranged'];
+const BAGS = ['bag1', 'bag2', 'bag3', 'bag4'];
+const SIDE = RIGHT.length;
+// What an empty slot says on its dark square (four columns at most).
+const SHORT = {
+  head: 'Head', neck: 'Neck', shoulder: 'Shld', back: 'Back', chest: 'Chst', shirt: 'Shrt', wrist: 'Wrst',
+  hands: 'Hand', waist: 'Wst', legs: 'Legs', feet: 'Feet', finger1: 'Ring', finger2: 'Ring', trinket1: 'Trk', trinket2: 'Trk',
+  mainhand: 'MH', offhand: 'OH', ranged: 'Rng', bag1: 'Bag', bag2: 'Bag', bag3: 'Bag', bag4: 'Bag',
+};
+
+/** The icon size the sheet takes in a `w` x `h` list pane and how many of the `extras` rows (repair, ammo,
+ *  outfits) fit under it, or null when it does not fit and the view should list instead. Big icons win over
+ *  the upkeep rows: R and o reach those from the keys, and the view leaves undrawn ones out of its rows. */
+function sheetSize(w, h, extras) {
+  for (const s of [6, 4]) {
+    for (const room of [extras, 0]) {
+      const need = 2 + SIDE * (s / 2) + 1 + s / 2 + (room ? 1 + room : 0);
+      if (h >= need && w >= 7 * (s + 2) + 6) return { s, extras: room };
+    }
+  }
+  return null;
+}
+
+/** Will the Gear tab draw as the sheet right now? `extras` is how many rows follow the slots. */
+export function paperdollPlan(app, extras) {
+  if (!iconsOn()) return null;
+  const L = app.layout();
+  return L.detailW ? sheetSize(L.listW, L.mainH, extras) : null;
+}
+
+/**
+ * The sheet's lines for the gear view's `rows` in a `W` x `H` pane, with `body(cols, lines)` drawing the
+ * character (playerArt), plus where the arrows go; null when it does not fit.
+ */
+export function paperdollGrid(app, rows, W, H, body) {
+  const extraRows = rows.map((r, i) => ({ r, i })).filter(({ r }) => !r.cell && !r.header);
+  const plan = iconsOn() ? sheetSize(W, H, extraRows.length) : null;
+  if (!plan) return null;
+  const { s } = plan, cw = s + 2, ch = s / 2;
+  const cur = app.top()?.cursor ?? 0;
+  const cv = canvas(W, H);
+  const pts = [];
+  const index = new Map(rows.map((r, i) => [r.cell?.slot, i]));
+  const top = 2, colH = SIDE * ch;
+
+  const ups = rows.filter((r) => r.cell?.up).length;
+  cv.text(1, 0, `${bold('Equipment')}   ${ups ? green(`▲ ${plural(ups, 'upgrade')} in your bags   u: put on all`) : dim(`Shift+arrows: move on the sheet   Enter: change${plan.extras ? '' : '   R: repair all   o: outfits'}`)}`);
+
+  // Labels take a share of the width beside each column; the body gets the middle.
+  const lw = Math.max(0, Math.min(22, Math.floor((W - 2 * cw) * 0.28)));
+  const midX = cw + lw + 1, midW = W - 2 * cw - 2 * lw - 2;
+  const art = midW >= 6 ? body(midW, colH) : null;
+  if (art?.length) cv.art(midX + Math.floor((midW - artWidth(art)) / 2), top + Math.max(0, Math.floor((colH - art.length) / 2)), art);
+
+  const cell = (slot, x, y, px, py, side) => {
+    const i = index.get(slot);
+    if (i == null) return;
+    const c = rows[i].cell, it = c.it;
+    const sel = i === cur;
+    drawCell(cv, x, y, s, {
+      icon: it?.icon, frame: it ? qualityCodes(it.quality) : '90', selected: sel, empty: SHORT[slot],
+      mark: c.up ? { text: '▲', codes: '92' } : null,
+    });
+    pts.push({ i, x: px, y: py });
+    if (!side || lw < 4) return;
+    const name = it ? qualityPaint(it.quality)(it.name) : dim(SLOT_LABEL[slot] ?? slot);
+    const lines = [sel ? bold(name) : name, ...(ch > 2 ? [c.sub ?? '', c.dur ?? ''] : [c.dur || c.sub || ''])].slice(0, ch);
+    lines.forEach((t, k) => {
+      const text = cut(t, lw - 1);
+      cv.text(side === 'left' ? x + cw + 1 : x - 1 - vis(text), y + k, text);
+    });
+  };
+  LEFT.forEach((slot, k) => cell(slot, 0, top + k * ch, 0, k, 'left'));
+  RIGHT.forEach((slot, k) => cell(slot, W - cw, top + k * ch, 4, k, 'right'));
+
+  // Under the columns: the weapons centred under the body, the bag bar at the right edge.
+  const by = top + colH + 1;
+  const bagsX = W - BAGS.length * cw;
+  const wx = Math.max(0, Math.min(Math.round(midX + midW / 2 - 1.5 * cw), bagsX - 3 * cw - 2));
+  WEAPONS.forEach((slot, k) => cell(slot, wx + k * cw, by, 1 + k, SIDE));
+  BAGS.forEach((slot, k) => cell(slot, bagsX + k * cw, by, 5 + k, SIDE));
+
+  // Upkeep rows (repair all, ammo, outfits, auto use) under the sheet when they fit.
+  const ey = by + ch + 1;
+  extraRows.slice(0, plan.extras).forEach(({ r, i }, k) => {
+    const sel = i === cur;
+    const text = ` ${sel ? '▶' : ' '} ${r.text}`;
+    cv.text(0, ey + k, sel ? inverse(fit(text, W - 1)) : text, W - 1);
+    pts.push({ i, x: 1, y: SIDE + 1 + k });
+  });
+
+  return { lines: cv.lines(), nav: (dir, from) => gridStep(pts, from, dir, { dyW: 1, dxW: 10 }) };
+}

package/src/cli/tuiPartyStage.mjs

@@ -0,0 +1,177 @@
+// The party stage: a dungeon pull or a squad fight drawn the way the duel is, every body small on one floor.
+// The party stands down the left (you in your gear, the companions in theirs, the pets a size under), the pack
+// down the right, and each column stands where its unit really is: its yards projected onto the line from
+// where the party opened to where the pack stood, so the tank runs in, the healer hangs back and a mob that
+// chases a caster crosses over. Under every sprite a narrow plate (name, HP, power) and a state row (a cast
+// bar filling under the spell's name, crowd control, dead); hits rise over the head; missiles cross the lane.
+// The boxes shrink with the crowd: the widest size whose rows and columns fit, down to the smallest, after
+// which the furthest foes and the pets are hidden and counted on the floor.
+import { dim, gray, fit } from './text.mjs';
+import { SIZES, canvas, put, putLines, putRight, floorLine, narrowPlate, narrowState, auraRows, putMissiles, putPopsAbove, POP_MS, LUNGE_MS } from './tuiStage.mjs';
+import { creatureArt, artWidth } from './modelArt.mjs';
+import { paperdollArt } from './paperdoll.mjs';
+import { playerArt } from './tuiViews.mjs';
+import { iconsOn } from './iconArt.mjs';
+import { allyIndexOfSide } from '../engine/core/events.ts';
+import { combatDistanceYd, DEFAULT_OPEN_YD, MELEE_CONTACT_YD } from '../engine/combat/combatGeometry.ts';
+
+const GAP = 1;        // columns between two columns of the same side
+const LANE = 6;       // columns kept open between a party column and a foe column, for the glyphs that cross
+const PLATE_MIN = 9;  // a plate's narrowest: a 5-cell bar and "100%"
+const PLATE_FULL = 14; // and its widest when the stage has width to spare: a 10-cell bar, a 12-letter name
+const SIZE_ORDER = ['xs', 's', 'm', 'l'];
+// Who stands nearest the foes among units on the same spot (the melee pile opens on one): the healer last.
+const ROLE_RANK = { healer: 0, damage: 2, tank: 3 };
+
+/** The companion an ally seat holds: ally_N is squad[N] (the humans first), else the one of that name. */
+function companionOf(app, v) {
+  const squad = app.g.state.squad ?? [];
+  const i = allyIndexOfSide(v.side);
+  const byIndex = i >= 0 && i < squad.length ? squad[i] : null;
+  return byIndex?.name === v.name ? byIndex : squad.find((c) => c.name === v.name) ?? byIndex;
+}
+
+/** A unit's sprite in a box: you in your gear, a creature by its display id, a companion in its gear. */
+function spriteOf(app, u, cols, rows) {
+  if (u.isPlayer) return playerArt(app, cols, rows)?.lines ?? null;
+  if (u.v.creatureEntry != null) return creatureArt(app.ds.creature(u.v.creatureEntry)?.displayId, cols, rows);
+  const comp = u.friend ? companionOf(app, u.v) : null;
+  return comp ? paperdollArt(comp, cols, rows) : null;
+}
+
+/** The box a unit gets when the big ones get `size`: pets a size under, a boss a size over. */
+function sizeOf(u, size) {
+  const i = SIZE_ORDER.indexOf(size);
+  if (u.small) return SIZE_ORDER[Math.max(0, i - 1)];
+  if (u.rank === 3) return SIZE_ORDER[Math.min(SIZE_ORDER.length - 1, i + 1)];
+  return size;
+}
+
+/**
+ * The party stage W x H: H lines each W wide, or null when the rows or the columns leave the sprites no
+ * room (the frames list draws instead). `inline` is the autopilot's run panel (the ability bar's keys dim).
+ */
+export function partyStage(app, ctl, W, H, { inline }) {
+  const s = ctl.session, now = ctl.clock(), mem = ctl.frames;
+  const pv = s.playerView(), pet = s.petView(), focus = s.enemyView();
+  const icons = iconsOn();
+  const petSides = new Set((s.companionPets?.() ?? []).map((p) => p.side));
+  const rankOf = (v) => { const c = v.creatureEntry != null ? app.ds.creature(v.creatureEntry) : null; return c?.rank ?? c?.scaling?.rank ?? 0; };
+  const order = (v, fallback) => ROLE_RANK[v.groupRole] ?? (v.mode === 'ranged' ? 1 : fallback);
+  const units = [
+    { v: pv, key: 'player', isPlayer: true, friend: true, role: pv.groupRole, order: order(pv, 2.5) },
+    ...(pet ? [{ v: pet, key: pet.side ?? pet.name, friend: true, small: true, order: 2 }] : []),
+    ...s.alliesView().map((v) => ({ v, key: v.side, friend: true, small: petSides.has(v.side) || !!v.summoned, role: v.groupRole, order: order(v, 2) })),
+    ...s.enemiesView().map((v) => ({ v, key: v.side, foe: true, focused: v === focus, rank: rankOf(v), order: v === focus ? 0 : 1 })),
+  ];
+  // Rows the scene keeps whatever the sprites get: the plate (3), the state row, the floor and the ability bar
+  // (dropped under auto-play when rows are short); the aura strip only when the sprites still get a box after it.
+  const barLines = ctl.abilityRows(W, W >= 140 ? 6 : 4, { live: !inline });
+  let barRows = barLines.length;
+  const auraH = icons ? 3 : 1;
+  let fixed = 3 + 1 + 1 + barRows;
+  if (H - fixed < SIZES.xs[1] && ctl.auto) { barRows = 0; fixed = 5; }
+  const showAuras = H - fixed - auraH >= SIZES.s[1];
+  if (showAuras) fixed += auraH;
+  const artRows = H - fixed;
+  if (artRows < SIZES.xs[1]) return null;
+  // The widest size whose rows fit and whose columns fit the width: every column its sprite's width or a plate
+  // at least PLATE_MIN wide, a gap between neighbours, one lane between the sides, a margin at each edge. When
+  // even the smallest does not fit, the foes you do not face go first (from the far end), then the pets, then
+  // the party's tail, and the floor counts them.
+  const margin = Math.max(GAP, Math.floor(W / 40));
+  const columnOf = (u, size) => {
+    const box = SIZES[sizeOf(u, size)];
+    const art = spriteOf(app, u, box[0], Math.min(box[1], artRows));
+    const cw = Math.max(PLATE_MIN, art ? artWidth(art) : 0);
+    return { ...u, art, aw: artWidth(art), cw, plateW: cw };
+  };
+  const widthOf = (list) => list.reduce((n, col) => n + col.cw, 0) + (list.length - 1) * GAP + (LANE - GAP) + 2 * margin;
+  let cols = null, hidden = 0;
+  for (const size of ['m', 's', 'xs'].filter((k) => SIZES[k][1] <= artRows)) {
+    const all = units.map((u) => columnOf(u, size));
+    if (widthOf(all) <= W) { cols = all; break; }
+    if (size !== 'xs') continue;
+    const drop = (pick) => { const i = all.findLastIndex(pick); if (i < 0) return false; all.splice(i, 1); hidden++; return true; };
+    while (widthOf(all) > W && (drop((u) => u.foe && !u.focused) || drop((u) => u.small) || drop((u) => u.friend && !u.isPlayer)));
+    if (widthOf(all) <= W) cols = all;
+  }
+  if (!cols) return null;
+  // Width to spare goes to the plates, up to PLATE_FULL each, so names and bars get longer as the crowd thins.
+  const spare = Math.floor((W - widthOf(cols)) / cols.length);
+  if (spare > 0) for (const col of cols) { col.cw = Math.max(col.cw, Math.min(col.cw + spare, PLATE_FULL)); col.plateW = col.cw; }
+  // Where each unit stands in its half: by its distance in yards to the nearest living unit of the other side,
+  // from the far edge at the widest gap this fight has seen to the lane at melee contact (the duel's rule, one
+  // unit at a time). The place it opened at is its own; the closing since then goes to whoever walked it, so
+  // a mob that runs onto the healer crosses to the lane while the healer stays put, and a mage walking into
+  // range slides in while its mob stands. Melee units park all round a mob, so this is read off distances, not
+  // bearings: a rogue behind its target still stands on the party's side.
+  const posOf = (u) => s.unitPosYd?.(u.key);
+  mem.openPos ??= new Map(); mem.openD ??= new Map();
+  const nearest = (u) => {
+    let best = null;
+    for (const o of units) {
+      if (!!o.friend === !!u.friend || o.v.hp <= 0) continue;
+      const d = combatDistanceYd(posOf(u), posOf(o));
+      if (d != null && (!best || d < best.d)) best = { o, d };
+    }
+    return best;
+  };
+  const near = new Map(units.map((u) => [u.key, nearest(u)]));
+  mem.openYd = Math.max(mem.openYd ?? DEFAULT_OPEN_YD, ...[...near.values()].map((n) => n?.d ?? 0));
+  const frac = (d) => Math.max(0, Math.min(1, (d - MELEE_CONTACT_YD) / Math.max(1, mem.openYd - MELEE_CONTACT_YD)));
+  const walked = (u) => combatDistanceYd(mem.openPos.get(u.key), posOf(u)) ?? 0;
+  const closingOf = (u) => {
+    const n = near.get(u.key), p = posOf(u);
+    if (p && !mem.openPos.has(u.key)) mem.openPos.set(u.key, { ...p });
+    if (!n) return mem.openD.has(u.key) ? 1 - frac(mem.openD.get(u.key)) : 1; // no positions: everyone at the lane
+    if (!mem.openD.has(u.key)) mem.openD.set(u.key, n.d);
+    const w = walked(u), wo = walked(n.o);
+    const share = w + wo > 0 ? w / (w + wo) : u.friend ? 1 : 0;
+    const c0 = 1 - frac(mem.openD.get(u.key));
+    return Math.max(0, Math.min(1, c0 + (1 - frac(n.d) - c0) * share));
+  };
+  for (const col of cols) col.c = closingOf(col);
+  // The party's half and the pack's, the free width shared by head count, the lane between. In each half the
+  // columns stand by their closing, the nearest to the lane innermost; on the same spot the healer, the
+  // ranged, the melee, then the tank, and the foe you face before the rest. Then nobody overlaps: a column
+  // is pushed away from the one before it, and what runs past the half's far edge is pushed back in turn.
+  const side = (friend) => cols.filter((col) => !!col.friend === friend);
+  const widthOfSide = (list) => list.reduce((n, col) => n + col.cw, 0) + Math.max(0, list.length - 1) * GAP;
+  const friends = side(true), foes = side(false);
+  const free = Math.max(0, W - 2 * margin - LANE - widthOfSide(friends) - widthOfSide(foes));
+  const partyR = margin + widthOfSide(friends) + Math.floor((free * friends.length) / Math.max(1, cols.length));
+  const foeL = Math.min(W - margin - widthOfSide(foes), partyR + LANE);
+  const q = (col) => Math.round(col.c * 50);
+  friends.sort((a, b) => q(a) - q(b) || a.order - b.order);
+  foes.sort((a, b) => q(b) - q(a) || a.order - b.order);
+  const place = (list, L, R) => {
+    for (const col of list) col.x = col.friend ? L + col.c * (R - col.cw - L) : R - col.cw - col.c * (R - col.cw - L);
+    for (let i = 1; i < list.length; i++) list[i].x = Math.max(list[i].x, list[i - 1].x + list[i - 1].cw + GAP);
+    for (let i = list.length - 1; i >= 0; i--) list[i].x = Math.min(list[i].x, i === list.length - 1 ? R - list[i].cw : list[i + 1].x - GAP - list[i].cw);
+    for (const col of list) col.x = Math.max(0, Math.round(col.x));
+  };
+  place(friends, margin, partyR);
+  place(foes, foeL, W - margin);
+  const zone = artRows, stateRow = zone + 3, auraTop = zone + 4, floorRow = auraTop + (showAuras ? auraH : 0), barTop = floorRow + 1;
+  const c = canvas(W, H);
+  for (const col of cols) {
+    const v = col.v, dead = v.hp <= 0;
+    // The sprite stands on its plate, centred over it; a swing lunges it two columns toward the other side.
+    if (col.art) {
+      const lunge = now - (mem.lunge?.get(col.key) ?? -Infinity) < LUNGE_MS ? (col.friend ? 2 : -2) : 0;
+      col.ax = col.x + Math.max(0, Math.floor((col.cw - col.aw) / 2)) + lunge; col.top = zone - col.art.length;
+      putLines(c, col.ax, col.top, col.art);
+    }
+    putLines(c, col.x, zone, narrowPlate(app, v, { ...col, dead, w: col.cw }));
+    const state = narrowState(v, now, col.cw);
+    if (state) put(c, col.x, stateRow, state);
+    if (showAuras && !col.small && !dead) putLines(c, col.x, auraTop, auraRows(app, mem, v, col.key, col.cw, icons));
+    putPopsAbove(c, col, (mem.pops.get(col.key) ?? []).filter((p) => now - p.t < POP_MS), now, zone);
+  }
+  putMissiles(c, s, cols, now, Math.max(0, zone - 1 - Math.floor(Math.min(artRows, 10) / 2)), (id) => app.ds.spell(id)?.name);
+  c[floorRow] = floorLine(W, gray);
+  if (hidden) putRight(c, W - 1, floorRow, dim(` +${hidden} more in the fight `));
+  if (barRows) putLines(c, 0, barTop, barLines);
+  return c.map((l) => fit(l, W));
+}

package/src/cli/tuiProfessions.mjs

@@ -268,6 +268,7 @@ export function recipeBook(app, crafterId, skill) {
         const name = DIFF_PAINT[diffOf(cr, skill, r)](r.name);
         rows.push({
           text: `${fit(name + (who.length ? green(' ▲') : ''), W)} ${craftChip(chk)}`, data: { recipe: r, chk, cr },
+          icon: prod?.icon, sub: dim((r.reagents ?? []).map((x) => `${a.ds.item(x.item)?.name ?? x.item}${x.count > 1 ? ` x${x.count}` : ''}`).join(', ')),
           detail: () => recipeDetail(a, cr, r, chk, who),
           act: () => (chk.ok ? craftMany(a, cr, r, 1) : a.say(red(chk.reason ?? `Cannot make ${prod?.name ?? r.name}.`))),
         });
@@ -751,6 +752,7 @@ export function professionsView(app) {
           const away = cr.comp?.mission?.skill === prof.id;
           return {
             text: `${cr.id ? `${fit(cr.name, 10)} ` : ''}${fit(prof.name, 15)} ${fit(`${sk.current}/${sk.max}`, 8)}${ready ? green(`${ready} ready`) : GATHER_LINES.has(prof.id) ? dim(prof.kind) : ''}${away ? yellow('  away') : ''}`,
+            icon: prof.icon, sub: dim(currentRank(cr.char, prof)?.name ?? ''),
             data: { cr, skill: prof.id },
             detail: () => profRowLines(a, cr, prof, sk, ready),
             act: () => a.push(recipeBook(a, cr.id, prof.id)),
@@ -785,13 +787,13 @@ export function professionsView(app) {
           const prof = ds.profession(t.skill);
           const sk = a.ch.skills[t.skill];
           const newOnes = sk ? ds.recipes().filter((r) => r.skill === t.skill && r.source === 'trainer' && !a.ch.knownRecipes.includes(r.id) && sk.current >= r.orange && a.ch.level >= (r.reqLevel ?? 0)).length : 0;
-          rows.push({ text: `${t.name} ${dim(`<${prof?.name ?? t.skill} Trainer>`)}${newOnes ? green(`  ${newOnes} to learn`) : ''}`, detail: () => [bold(t.name), `${prof?.name ?? t.skill} trainer`, '', dim('Enter: ranks and recipes')], act: () => a.push(profTrainerDialog(a, t)) });
+          rows.push({ text: `${t.name} ${dim(`<${prof?.name ?? t.skill} Trainer>`)}${newOnes ? green(`  ${newOnes} to learn`) : ''}`, icon: prof?.icon, sub: dim(sk ? `your skill ${sk.current}/${sk.max}` : 'not learned'), detail: () => [bold(t.name), `${prof?.name ?? t.skill} trainer`, '', dim('Enter: ranks and recipes')], act: () => a.push(profTrainerDialog(a, t)) });
         }
       }
       const books2 = [];
       g.state.inventory.stacks.forEach((s) => {
         const it = ds.item(s.item), teach = itemTeachIntent(it, ds);
-        if (teach?.kind === 'recipe' || teach?.kind === 'enchant') books2.push({ text: `${qualityPaint(it.quality)(it.name)}${s.count > 1 ? ` x${s.count}` : ''}`, detail: () => itemLines(a, it, ['', dim('Enter: pick who learns it (you or a companion with the craft)')]), act: () => teachFromItem(a, s) });
+        if (teach?.kind === 'recipe' || teach?.kind === 'enchant') books2.push({ text: `${qualityPaint(it.quality)(it.name)}${s.count > 1 ? ` x${s.count}` : ''}`, icon: it.icon, sub: dim(teach.kind), detail: () => itemLines(a, it, ['', dim('Enter: pick who learns it (you or a companion with the craft)')]), act: () => teachFromItem(a, s) });
       });
       if (books2.length) rows.push(H(''), H('Recipes in your bags'), ...books2);
       return rows;