azeroth-shell 0.1.2 → 0.2.0

package/src/cli/tui.mjs

@@ -11,10 +11,11 @@ import { cityAccess, bankDialog, auctionDialog, mailDialog } from './tuiCity.mjs
 import { startFight, startAutopilot } from './tuiFight.mjs';
 import { openRun } from './tuiDungeon.mjs';
 import { openLoot } from './tuiLoot.mjs';
-import { fightPaneRule, fightPaneLines } from './tuiFightPanes.mjs';
+import { fightPaneRule, fightPaneLines, cycleFightPane, nextPaneId, fightPane } from './tuiFightPanes.mjs';
 import { MemoryPrefs, FilePrefs } from './prefs.mjs';
 import { settingsDialog, globalSettingsOpts, refreshMs } from './tuiSettings.mjs';
 import { autopilotSettingsDialog } from './tuiAutopilotSettings.mjs';
+import { runStripLine, runHeaderLine, bagsPaneKey } from './tuiAutopilot.mjs';
 import { macrosDialog, runMacro } from './tuiMacros.mjs';
 import { outfitterDialog } from './tuiOutfitter.mjs';
 import { journeyHeader, journeyTick } from './tuiWorld.mjs';
@@ -23,10 +24,15 @@ import { honorDialog, weeklyHonorPass } from './tuiHonor.mjs';
 import { devCommand } from './tuiDev.mjs';
 import { savePicker } from './tuiSaves.mjs';
 import { wikiDialog } from './tuiWiki.mjs';
-import { bold, dim, cyan, yellow, green, red, inverse, fit, vis, cut, bar, pct, wrapLines, brightYellow, magenta, brightBlue, strip, qualityPaint } from './text.mjs';
-import { createGame, newGameState, newGameStateFromWorldBot, pickRandomWorldBot } from '../engine/game.ts';
+import { bold, dim, cyan, yellow, green, red, inverse, fit, vis, cut, bar, pct, brightYellow, magenta, brightBlue, strip, qualityPaint } from './text.mjs';
+import { iconsOn, iconArt, iconBlank, wrapIconLines } from './iconArt.mjs';
+import { createGame } from '../engine/game.ts';
 import { toSave } from '../persistence/saveShape.ts';
 import { className, raceName } from '../domain/core/ids.ts';
+import { characterCreation } from './tuiCreate.mjs';
+import { missingHdBytes, downloadHdArt, downloadDir } from './hdArt.mjs';
+import { forgetHdArt } from './modelArt.mjs';
+import { sixelOn } from './sixel.mjs';
 import { moneyText, coinsText } from '../domain/economy/money.ts';
 import { maxHealth, maxPower } from '../domain/character/character.ts';
 import { powerType } from '../domain/character/characterStats.ts';
@@ -36,6 +42,8 @@ const POWER_PAINT = { mana: brightBlue, rage: red, energy: yellow, focus: yellow
 /** Digit key → tab index: 1-9 are the first nine, 0 the tenth. */
 const digitTab = (k) => (k === '0' ? 9 : Number(k) - 1);
 const MOVE_KEYS = new Set(['up', 'down', 'j', 'k', 'pageup', 'pagedown', 'home', 'end']);
+/** A view's hint and its labelled keys, as "k: what it does" items. */
+const viewKeyHints = (view) => [...(view?.hint ? [view.hint] : []), ...Object.entries(view?.keys ?? {}).filter(([, v]) => v.hint).map(([k, v]) => `${k === 'space' ? 'Space' : k}: ${v.hint}`)];
 const HELP_LINES = [
   'Moving around',
   '  1-9 0 / Tab / Left Right switch tab             Up Down j k     move the cursor',
@@ -43,17 +51,21 @@ const HELP_LINES = [
   '  PgUp PgDn                page the list or text   Home End        first / last row',
   '  l                        open the full log       :               command line (same verbs as the line game)',
   '  /                        search the wiki: items, spells, quests, NPCs, zones, dungeons (:wiki <words>)',
-  '  s (World tab)            find a thing in the world: who sells an item and where, what drops it, where an',
-  '                           ore or herb grows, a dungeon entrance, an NPC. Enter travels there or opens it.',
+  '  s (World tab)            find a thing in this zone: a vendor, a trainer, who sells an item, what drops it.',
+  '                           a in the search (or S on World) widens it to the whole world. Enter goes or opens.',
   '  z                        sit and rest 30 s       ?               this help',
   '  Ctrl-C / :quit           save and leave          Ctrl-L          repaint a garbled screen',
   '',
   'In the world',
   '  Enter on a creature starts a live fight; f fights it instantly. Enter on a quest, vendor, trainer or',
-  '  exit opens it. a hands the character to the autopilot: it quests and hunts on its own, and every',
-  '  fight plays out live on screen. Esc stops it. A quest it dies on 2 times or cannot finish is skipped',
-  '  for the rest of the session. Quests tab: d (or Do the quest in the quest window) runs the autopilot on',
-  '  that one quest. :autopilot (or A on the Rotation tab) sets how it rests, pulls, fights and quests.',
+  '  exit opens it. a shows what the autopilot will do; Enter hands the character over: it quests and hunts',
+  '  on its own and its panel shows what it is doing, what comes next and what will stop it. Its fights play',
+  '  live inside that panel (w takes the keys: 1-0 press the action bar; w or Esc hands them back). Esc stops the run, space',
+  '  pauses it, 1-9 browse the tabs under a run strip, Tab cycles the bottom pane (the Run pane lists every',
+  '  step). At 4x and up the log folds to one line a fight. For a CRT look, turn on your terminal\'s retro',
+  '  effect (Windows Terminal: "experimental.retroTerminalEffect": true on the profile).',
+  '  A quest it dies on 2 times or cannot finish is skipped for the rest of the session. Quests tab: d (or Do',
+  '  the quest in the quest window) runs it on that one quest. :autopilot (or A) sets how it rests, pulls, fights and quests.',
   '  In a capital the World tab lists the Bank, the Auction House and the Mailbox under Services.',
   '  Rogues: P on a creature picks its pocket (Stealth first). A resist starts the fight.',
   '  :honor: your PvP rank, the arena (1v1 to 5v5), Warsong Gulch and Arathi Basin (pick your job, watch it play,',
@@ -65,7 +77,8 @@ const HELP_LINES = [
   'Gear and bags',
   '  Gear tab: Enter on a slot lists everything in your bags (and the bank, in a bank town) that fits it.',
   '  ▲ marks an upgrade the equipment helper found; u puts on every upgrade at once, x takes a piece off.',
-  '  r repairs one piece; o opens the Outfitter (gear sets). :outfit <name> wears a set from anywhere.',
+  '  r repairs one piece, R everything; o opens the Outfitter (gear sets). :outfit <name> wears a set from anywhere.',
+  '  In a big enough window the Gear tab is a character sheet (the Talents tab the three trees): Up and Down walk the icons in order, Shift+arrows move across them.',
   '  Bags tab: Enter uses, equips, opens, unwraps or learns; m lists every verb for the stack. s sells to the open',
   '  vendor, j sells junk, b opens the bank, d destroys, S sorts, / splits a stack, [ ] move it, A uses the whole stack.',
   '  D lists every green, blue or epic the group can disenchant; L lists every book someone can learn. G runs it.',
@@ -79,7 +92,7 @@ const HELP_LINES = [
   '  t gives a companion an order: attack a target, cast one ability, or hold ground (the fight waits).',
   '  c cancels one of your buffs (also from the Character tab, out of a fight).',
   '  r (in a fight you started with Enter) fights the same creature again after each win, until r again or Esc.',
-  '  The numbered ability bar shows in manual play (a); auto-play keeps the screen to the unit frames.',
+  '  The ability bar runs along the bottom of the stage with its cooldowns; a takes the keys off the rotation.',
   '',
   'Professions and Companions',
   '  Professions: Enter on a profession opens its recipe book. Enter makes one, A makes all you can, N asks',
@@ -112,6 +125,43 @@ export class App {
     this.lastActivity = null;
     term.onKey = (k) => { try { this.onKey(k); } catch (err) { this.say(red(`Error: ${err.message}`)); if (process.env.AZSH_DEBUG) this.say(dim(String(err.stack).split('\n').slice(1, 4).join(' '))); this.render(); } };
     term.onResize = () => this.render();
+    term.onSixel = () => setImmediate(() => this.offerHdArt());
+  }
+
+  // ---- full-size art -----------------------------------------------------------------------------
+
+  /** The terminal draws sixel and the full-size art is not here: offer it once a run, unless told never. */
+  offerHdArt() {
+    const bytes = missingHdBytes();
+    if (!bytes || this.closed || this.hdOffered || this.prefs.get('hdArt') === 'never') return;
+    this.hdOffered = true;
+    const mb = Math.round(bytes / 1e6);
+    this.pick(`Your terminal draws real pixels. Download the full-size art (${mb} MB)?`, [
+      { label: `Download now  ${dim(`${mb} MB into ${downloadDir()}`)}`, value: 'yes' },
+      { label: `Not now  ${dim('asked again next time; :art download fetches it')}`, value: 'later' },
+      { label: `Never ask  ${dim(':art download still fetches it')}`, value: 'never' },
+    ], (v) => { if (v === 'yes') this.fetchHdArt(); else if (v === 'never') this.prefs.set('hdArt', 'never'); });
+  }
+
+  /** Fetch the full-size art in the background, progress on the hint row; the screen repaints in it when done. */
+  fetchHdArt() {
+    if (this.hdFetching) return;
+    this.hdFetching = true;
+    let shown = 0;
+    this.flashMsg('Downloading the full-size art...');
+    this.render();
+    void downloadHdArt((done, total) => {
+      if (Date.now() - shown < 250) return;
+      shown = Date.now();
+      this.flashMsg(`Downloading the full-size art: ${Math.round(done / 1e6)} of ${Math.round(total / 1e6)} MB`);
+      this.render();
+    }).then((res) => {
+      this.hdFetching = false;
+      if (this.closed) return;
+      if (res.ok) { forgetHdArt(); this.flash = null; this.say(green('Full-size art downloaded: creatures, characters and icons draw in real pixels.')); this.term.refresh?.(); }
+      else this.say(red(`The art download stopped: ${res.reason}. :art download tries again.`));
+      this.render();
+    });
   }
 
   // ---- game lifecycle ---------------------------------------------------------------------------
@@ -124,7 +174,9 @@ export class App {
     this.slot = slot; this.createdAt = createdAt ?? Date.now();
     const awayMs = updatedAt > 0 ? Math.max(0, Date.now() - updatedAt) : 0;
     // Travel pace is a setting (instant by default, like phonecraft); `skipping` lets Arrive now land a trip at any pace.
-    const g = createGame(this.ds, state, { travelPace: () => (this.skipping ? 'instant' : this.prefs.get('travelPace') ?? 'instant'), offlineTimeMs: awayMs, ...globalSettingsOpts(this.prefs) });
+    // wallWorldClock: aura and cooldown stamps on Date.now(), the clock every screen reads. Without it they ride the
+    // fight chain, which runs hours ahead once fights resolve faster than real time (Forbearance showing 8h).
+    const g = createGame(this.ds, state, { travelPace: () => (this.skipping ? 'instant' : this.prefs.get('travelPace') ?? 'instant'), offlineTimeMs: awayMs, wallWorldClock: true, ...globalSettingsOpts(this.prefs) });
     this.g = g;
     if (g.state.char.journey) { if (this.prefs.get('travelPace') === 'instant') this.arriveNow(); else g.journeyTick(); }
     // Real createInfo has no starting weapon (ETL gap KI-003); phonecraft's harness hands one over too.
@@ -268,25 +320,49 @@ export class App {
       if (!this.stack.length) { this.fight?.onOrdersClosed?.(); this.render(); }
       return;
     }
-    if (this.fight) { this.fight.key(k); return; }
+    if (this.fight && !this.inlineFight()) {
+      // The full fight view. Under the autopilot Esc goes back to the run panel; the fight plays on.
+      if ((k === 'escape' || k === 'w') && this.auto && this.fight.label === 'autopilot') { this.auto.watchFight = false; this.render(); return; }
+      this.fight.key(k); return;
+    }
     if (this.auto) {
-      // The run's own panel shows between fights; a tab key browses the tabs instead (only acting is locked
-      // out while it plays) and w goes back to watching. The next fight always comes back on screen.
-      const auto = this.auto;
-      if (k === 'escape' || k === 'q') { auto.stop(); this.say(yellow('Autopilot stopped.')); this.render(); return; }
+      // The run's panel holds the screen, fights included. A tab key browses the tabs, and a browsed tab works as
+      // it does without a run (Enter acts, its own keys act): the run plays on underneath, under the run strip.
+      // Esc or w on a tab comes back to the run; Esc on the panel stops it; w on a fight opens the full view.
+      const auto = this.auto, f = this.fight;
+      // A window on top (a dialog a tab or the Bags pane opened) takes the keys until it closes.
+      if (this.stack.length && this.top()?.id !== 'log') { if (k === 'escape') this.pop(); else this.viewKey(k); return; }
+      if (auto.browsing) {
+        if (k === 'escape' || k === 'w') { auto.browsing = false; this.stack = []; this.render(); return; }
+        if (k === 'l' && !this.top()?.keys?.l) { this.openLog(); return; }
+        if (/^[0-9]$/.test(k)) { this.switchTab(digitTab(k)); return; }
+        if (k === 'tab' || k === 'right') { this.switchTab((this.tab + 1) % this.tabs.length); return; }
+        if (k === 'shift-tab' || k === 'left') { this.switchTab((this.tab + this.tabs.length - 1) % this.tabs.length); return; }
+        if (k === '?') { this.push(this.helpView()); return; }
+        this.viewKey(k);
+        return;
+      }
+      // The Bags pane at the bottom has its own cursor; Enter there uses the item under it.
+      if (fightPane(this) === 'bags' && (MOVE_KEYS.has(k) || k === 'return') && bagsPaneKey(this, k)) return;
+      // Over a win's hold there is nothing to run from: the hold lets go and the run stops.
+      if (k === 'escape' || k === 'q') { if (f && !f.holding) f.flee(); else { f?.release(); if (this.auto === auto) auto.end('you stopped it'); } return; }
+      if (k === 'space') { auto.paused = !auto.paused; if (f) f.paused = auto.paused; this.render(); return; }
       if (k === 'l') { this.openLog(); return; }
-      if (k === 'w') { auto.browsing = false; this.stack = []; this.render(); return; }
+      if ((k === 'w' || k === 'return') && f) { auto.watchFight = true; this.render(); return; }
+      if (k === 'a' && f) { auto.watchFight = true; f.key('a'); return; } // play it yourself: needs the ability bar
+      if ((k === '+' || k === '=' || k === '-') && f) { f.key(k); return; } // the fight owns the clock while it runs
       if (k === '+' || k === '=') { this.fightSpeed = Math.min(8, this.fightSpeed * 2); this.render(); return; }
       if (k === '-') { this.fightSpeed = Math.max(0.5, this.fightSpeed / 2); this.render(); return; }
       if (/^[0-9]$/.test(k)) { auto.browsing = true; this.switchTab(digitTab(k)); return; }
-      if (k === 'tab' || k === 'right') { auto.browsing = true; this.switchTab((this.tab + 1) % this.tabs.length); return; }
-      if (k === 'shift-tab' || k === 'left') { auto.browsing = true; this.switchTab((this.tab + this.tabs.length - 1) % this.tabs.length); return; }
-      if (MOVE_KEYS.has(k) && auto.browsing) { this.stack = []; this.viewKey(k); return; }
+      // Watching the run, Tab cycles the bottom pane; the arrows step onto the tabs.
+      if (k === 'tab' || k === 'shift-tab') { cycleFightPane(this, k === 'tab' ? +1 : -1); return; }
+      if (k === 'right') { auto.browsing = true; this.switchTab((this.tab + 1) % this.tabs.length); return; }
+      if (k === 'left') { auto.browsing = true; this.switchTab((this.tab + this.tabs.length - 1) % this.tabs.length); return; }
       return;
     }
-    if (!this.g) return this.viewKey(k);
+    if (!this.g) { if (!this.viewKey(k) && k === 'escape' && this.stack.length > 1) this.pop(); return; }
     if (k === ':') { this.prompt(':', (line) => this.runCommand(line)); return; }
-    if (k === '?') { this.push({ id: 'help', title: 'Keys', hint: 'Esc: back', noDetail: true, rows: () => HELP_LINES.map((t) => ({ text: t, header: true })) }); return; }
+    if (k === '?') { this.push(this.helpView()); return; }
     if (k === 'l' && this.top()?.id !== 'log' && !this.top()?.keys?.l) { this.openLog(); return; }
     if (this.isDead() && this.top()?.id !== 'death') { this.push(deathView(this)); return; }
     if (k === 'z' && !this.stack.length) { this.idleTick(30, true); this.say(dim(`You sit and rest for 30 s.  HP ${this.hpText()}  ${this.pwText()}`)); this.afterAction(); return; }
@@ -322,11 +398,20 @@ export class App {
     if (row?.keys?.[k]) { row.keys[k](this, row); this.afterAction(); return true; }
     if (view.keys?.[k]) { view.keys[k].fn(this, row); this.afterAction(); return true; }
     if (view.onKey?.(this, k, row)) { this.afterAction(); return true; }
+    // A view drawn as an icon grid (the paperdoll, the talent trees): Up and Down still walk its rows in order
+    // and Left and Right still change tabs; Shift+arrows move on the picture in two dimensions.
+    const gridDir = { 'shift-up': 'up', 'shift-down': 'down', 'shift-left': 'left', 'shift-right': 'right' }[k];
+    if (view.gridNav && gridDir) {
+      const to = view.gridNav(gridDir, view.cursor);
+      if (to != null) view.cursor = to;
+      this.render();
+      return true;
+    }
     switch (k) {
       case 'up': case 'k': this.moveCursor(view, rows, -1); return true;
       case 'down': case 'j': this.moveCursor(view, rows, +1); return true;
       case 'home': view.cursor = Math.max(0, rows.findIndex((r) => !r.header)); view.scroll = 0; this.render(); return true;
-      case 'end': { let i = rows.length - 1; while (i > 0 && rows[i].header) i--; view.cursor = i; this.ensureVisible(view, rows); view.scroll = Math.max(0, rows.length - this.layout().mainH); this.render(); return true; }
+      case 'end': { let i = rows.length - 1; while (i > 0 && rows[i].header) i--; view.cursor = i; this.ensureVisible(view, rows); const L = this.layout(); view.scroll = this.maxScrollOf(rows, L.mainH, this.listWOf(view, L)); this.render(); return true; }
       case 'pageup': case 'pagedown': this.pageView(view, rows, k === 'pageup' ? -1 : +1); return true;
       case 'return': case 'space': if (row && !row.header && row.act) { row.act(this, row); this.afterAction(); } return true;
       default: return false;
@@ -339,30 +424,48 @@ export class App {
     if (i >= 0 && i < rows.length) { view.cursor = i; this.ensureVisible(view, rows); }
     else {
       // No selectable row that way: scroll the pane instead so long text can be read.
-      const maxScroll = Math.max(0, rows.length - this.layout().mainH);
+      const L = this.layout();
+      const maxScroll = this.maxScrollOf(rows, L.mainH, this.listWOf(view, L));
       view.scroll = Math.max(0, Math.min(maxScroll, view.scroll + delta));
     }
     this.render();
   }
   /** Scroll the pane by a page; the cursor follows onto a selectable row inside the new window when there is one. */
   pageView(view, rows, dir) {
-    const h = this.layout().mainH;
-    const maxScroll = Math.max(0, rows.length - h);
+    const L = this.layout(), h = L.mainH, listW = this.listWOf(view, L);
+    const maxScroll = this.maxScrollOf(rows, h, listW);
     view.scroll = Math.max(0, Math.min(maxScroll, (view.scroll ?? 0) + dir * Math.max(1, h - 1)));
-    const inWindow = (i) => i >= view.scroll && i < view.scroll + h;
+    const end = this.windowEnd(rows, view.scroll, h, listW);
+    const inWindow = (i) => i >= view.scroll && i < end;
     if (!inWindow(view.cursor)) {
-      const from = dir > 0 ? view.scroll : view.scroll + h - 1;
+      const from = dir > 0 ? view.scroll : end - 1;
       let i = from;
-      while (i >= view.scroll && i < view.scroll + h && rows[i]?.header) i += dir;
+      while (i >= view.scroll && i < end && rows[i]?.header) i += dir;
       if (inWindow(i) && rows[i] && !rows[i].header) view.cursor = i;
     }
     this.render();
   }
   ensureVisible(view, rows) {
-    const h = this.layout().mainH;
+    const L = this.layout(), h = L.mainH, listW = this.listWOf(view, L);
     if (view.cursor < view.scroll) view.scroll = view.cursor;
-    if (view.cursor >= view.scroll + h) view.scroll = view.cursor - h + 1;
-    view.scroll = Math.max(0, Math.min(view.scroll, Math.max(0, rows.length - h)));
+    while (view.scroll < view.cursor && this.windowEnd(rows, view.scroll, h, listW) <= view.cursor) view.scroll++;
+    view.scroll = Math.max(0, Math.min(view.scroll, this.maxScrollOf(rows, h, listW)));
+  }
+  /** The list's width in a layout: the whole pane when the view has no detail column. */
+  listWOf(view, L) { return L.detailW > 0 && !view.noDetail ? L.listW : L.W; }
+  /** Lines a row takes: two for a row with an icon when icons draw and the list has room for them. */
+  rowH(r, listW) { return r.icon && listW >= 40 && iconsOn() ? 2 : 1; }
+  /** The first row a window of `h` lines from `scroll` does not show (rows fit whole). */
+  windowEnd(rows, scroll, h, listW) {
+    let used = 0, i = scroll;
+    while (i < rows.length && used + this.rowH(rows[i], listW) <= h) { used += this.rowH(rows[i], listW); i++; }
+    return Math.max(i, scroll + 1);
+  }
+  /** The largest scroll that still fills the window from the end. */
+  maxScrollOf(rows, h, listW) {
+    let used = 0, s = rows.length;
+    while (s > 0 && used + this.rowH(rows[s - 1], listW) <= h) { used += this.rowH(rows[s - 1], listW); s--; }
+    return s;
   }
   rowsOf(view) {
     const rows = view.rows(this) ?? [];
@@ -399,7 +502,15 @@ export class App {
     const [, cmd = '', args = ''] = line.match(/^(\S+)\s*(.*)$/) ?? [];
     const c = cmd.toLowerCase();
     if (c === 'quit' || c === 'exit' || c === 'q') { await this.quit(); return; }
-    if (c === 'auto') { const m = args.match(/^(\d+)?\s*(?:farm\s+(.+))?$/i); startAutopilot(this, Number(m?.[1] ?? 200), m?.[2]); return; }
+    if (c === 'auto') { const m = args.match(/^(\d+)?\s*(?:farm\s+(.+))?$/i); startAutopilot(this, m?.[1] ? Number(m[1]) : Infinity, m?.[2]); return; }
+    if (c === 'art') {
+      const missing = missingHdBytes();
+      if (args.trim().toLowerCase() === 'download') { if (missing) this.fetchHdArt(); else this.say('The full-size art is all here.'); this.render(); return; }
+      const how = sixelOn() ? green('this terminal draws real pixels') : yellow('this terminal draws half-block art (no sixel)');
+      this.say(`Art: ${how}; ${missing ? `${Math.round(missing / 1e6)} MB of full-size art not downloaded (:art download)` : `full-size art in ${downloadDir()}`}.`);
+      this.render();
+      return;
+    }
     if (c === 'autoloot') {
       const want = args.trim().toLowerCase();
       if (want === 'on' || want === 'off') this.prefs.set('autoLoot', want === 'on');
@@ -451,10 +562,11 @@ export class App {
 
   layout() {
     const W = this.term.cols, H = this.term.rows;
-    const logH = Math.max(5, Math.min(12, Math.floor(H * 0.3)));
-    const top = 4; // title, bars, tabs, rule
+    const logH = this.g ? Math.max(5, Math.min(12, Math.floor(H * 0.3))) : 3;
+    const top = this.compactHeader() ? 2 : 4 + (this.showsRunStrip() ? 1 : 0); // title, bars, tabs, (the run strip), rule; a run keeps only XP
     const mainH = H - top - 1 - logH - 1;
-    const detailW = W >= 90 ? Math.floor(W * 0.4) : 0;
+    // A view can ask for a narrower detail pane (the talent trees want three side by side).
+    const detailW = W >= 90 ? Math.floor(W * (this.top()?.detailShare ?? 0.4)) : 0;
     const listW = detailW ? W - detailW - 1 : W;
     return { W, H, logH, top, mainH, listW, detailW };
   }
@@ -474,7 +586,7 @@ export class App {
     const L = this.layout();
     const lines = [];
     lines.push(...this.headerLines(L));
-    if (this.fight && !this.stack.length) lines.push(...this.fight.render(L.W, L.mainH));
+    if (this.fight && !this.stack.length && !this.inlineFight()) lines.push(...this.fight.render(L.W, L.mainH));
     else if (this.auto && !this.auto.browsing && !this.stack.length) lines.push(...this.auto.render(L.W, L.mainH));
     else lines.push(...this.mainLines(L));
     while (lines.length < L.top + L.mainH) lines.push('');
@@ -488,8 +600,11 @@ export class App {
 
   headerLines(L) {
     if (!this.g) {
-      return [bold(' azsh') + dim('  Azeroth shell. WoW Classic 1.12 via CMaNGOS data.'), '', '', dim('─'.repeat(L.W))];
+      const crumbs = this.stack.map((v) => bold(v.title ?? '')).join(dim(' › '));
+      return [bold(' azsh') + dim('  Azeroth shell. WoW Classic 1.12 via CMaNGOS data.'), crumbs ? cut(` ${crumbs}`, L.W) : '', '', dim('─'.repeat(L.W))];
     }
+    // Watching a run, the name, bars and tabs go: the panel has your frame, and the XP line is what a run is for.
+    if (this.compactHeader()) return [runHeaderLine(this, L.W), dim('─'.repeat(L.W))];
     const ch = this.ch, ds = this.ds;
     const z = this.zone();
     const dead = this.isDead() ? red(bold('  DEAD')) : ch.mountedItem != null ? dim('  mounted') : '';
@@ -497,26 +612,43 @@ export class App {
     const road = journeyHeader(this);
     const right = `${road ? yellow(road) : cyan(z?.name ?? ch.zoneId)}  ${yellow(moneyText(ch.gold) || '0c')} `;
     const l0 = fit(title, L.W - vis(right)) + right;
-    const hpMax = maxHealth(ch, ds), pwMax = maxPower(ch, ds), pt = powerType(ch);
+    // In a fight the bars follow the live session, so the header is the player's frame and no panel needs another.
+    const live = this.fight?.session?.playerView?.() ?? null;
+    const hp = live ? live.hp : ch.health, hpMax = live ? live.maxHp : maxHealth(ch, ds);
+    const pw = live ? live.power : ch.power, pwMax = live ? live.maxPower : maxPower(ch, ds), pt = powerType(ch);
     const xpMax = ds.xpToNext(ch.level);
     const seg = Math.max(8, Math.floor((L.W - 50) / 3));
-    const l1 = ` ${green('HP')} ${bar(ch.health, hpMax, seg, green)} ${fit(`${ch.health}/${hpMax}`, 9)}`
-      + ` ${(POWER_PAINT[pt] ?? cyan)(pt === 'mana' ? 'MP' : pt === 'rage' ? 'RG' : 'EN')} ${bar(ch.power, pwMax, seg, POWER_PAINT[pt] ?? cyan)} ${fit(`${ch.power}/${pwMax}`, 9)}`
+    const l1 = ` ${green('HP')} ${bar(hp, hpMax, seg, hp / Math.max(1, hpMax) < 0.25 ? red : green)} ${fit(`${hp}/${hpMax}`, 9)}`
+      + ` ${(POWER_PAINT[pt] ?? cyan)(pt === 'mana' ? 'MP' : pt === 'rage' ? 'RG' : 'EN')} ${bar(pw, pwMax, seg, POWER_PAINT[pt] ?? cyan)} ${fit(`${pw}/${pwMax}`, 9)}`
       + ` ${magenta('XP')} ${bar(ch.xp, xpMax, seg, magenta)} ${dim(`${pct(ch.xp, xpMax)}%${ch.restedXp ? ' rested' : ''}`)}`;
-    // Tabs 1-9 and 0 have a digit. Short labels take over when the full ones do not fit, and inside a
-    // dialog the bar shrinks to the current tab so the breadcrumb stays readable.
+    // Tabs 1-9 and 0 have a digit, and where the terminal draws sixel a one-line icon in front while there is
+    // room (as half-block cells an icon two wide is a smudge of colour, so those get none). Short labels take
+    // over when the full ones do not fit, then the icons go, and inside a dialog the bar shrinks to the
+    // current tab so the breadcrumb stays readable.
     const digit = (i) => (i < 9 ? String(i + 1) : i === 9 ? '0' : '');
-    const tabBar = (short) => this.tabs.map((t, i) => {
+    const tabBar = (short, icons) => (icons && sixelOn() ? ' ' : '') + this.tabs.map((t, i) => {
       const label = short ? (t.short ?? t.label) : t.label, d = digit(i);
-      return i === this.tab && !this.stack.length ? inverse(` ${d ? `${d} ` : ''}${label} `) : ` ${d ? `${dim(d)} ` : ''}${label} `;
+      const art = icons && sixelOn() ? iconArt(t.icon, 2)?.[0] : null;
+      const tab = i === this.tab && !this.stack.length ? inverse(` ${d ? `${d} ` : ''}${label} `) : ` ${d ? `${dim(d)} ` : ''}${label} `;
+      return art ? `${art}${tab}` : tab;
     }).join('');
     const crumbs = this.stack.map((v) => ` › ${bold(v.title)}`).join('');
-    let tabs = tabBar(false);
-    if (vis(tabs + crumbs) > L.W) tabs = tabBar(true);
+    let tabs = tabBar(false, true);
+    for (const [short, icons] of [[true, true], [false, false], [true, false]]) if (vis(tabs + crumbs) > L.W) tabs = tabBar(short, icons);
     if (vis(tabs + crumbs) > L.W && this.stack.length) { const d = digit(this.tab); tabs = ` ${d ? `${dim(d)} ` : ''}${this.tabs[this.tab]?.label ?? ''}`; }
-    return [l0, l1, cut(tabs + crumbs, L.W), dim('─'.repeat(L.W))];
+    const strip = this.showsRunStrip() ? [runStripLine(this, L.W)] : [];
+    return [l0, l1, cut(tabs + crumbs, L.W), ...strip, dim('─'.repeat(L.W))];
   }
 
+  /** The run strip sits under the tabs whenever a run is alive and neither its panel nor its fight fills the middle. */
+  showsRunStrip() { return !!this.auto && (this.stack.length > 0 || this.auto.browsing) && !(this.fight && !this.stack.length && !this.inlineFight()); }
+
+  /** An autopilot fight draws inside the run panel unless w asked for the full fight view. */
+  inlineFight() { return !!this.fight && this.fight.label === 'autopilot' && !!this.auto && !this.auto.watchFight; }
+
+  /** Watching a run (its panel or its fight on screen): the header is only the XP line. */
+  compactHeader() { return !!this.auto && !this.auto.browsing && !this.stack.length; }
+
   mainLines(L) {
     const view = this.top();
     const out = [];
@@ -524,26 +656,40 @@ export class App {
     const rows = this.rowsOf(view);
     const showDetail = L.detailW > 0 && !view.noDetail;
     const listW = showDetail ? L.listW : L.W;
-    const maxScroll = Math.max(0, rows.length - L.mainH);
+    const maxScroll = this.maxScrollOf(rows, L.mainH, listW);
     view.scroll = Math.max(0, Math.min(view.scroll ?? 0, maxScroll));
-    const listLines = [];
-    for (let i = view.scroll; i < Math.min(rows.length, view.scroll + L.mainH); i++) {
+    // A grid view draws its own list side when it fits (null when it does not, and the rows list as usual).
+    const grid = view.grid?.(this, rows, listW, L.mainH) ?? null;
+    view.gridNav = grid?.nav ?? null;
+    const listLines = grid ? grid.lines.slice(0, L.mainH) : [];
+    const end = grid ? rows.length : this.windowEnd(rows, view.scroll, L.mainH, listW);
+    for (let i = grid ? end : view.scroll; i < end; i++) {
       const r = rows[i];
       const sel = i === view.cursor && !r.header;
-      let text = r.header ? (r.text ? cyan(bold(r.text)) : '') : ` ${r.text}`;
+      // A row with an icon is two lines: the icon's cells down the left, the text beside the top row and
+      // the row's `sub` (a kind, a cost) beside the bottom one. The icon keeps its own colours when selected.
+      if (this.rowH(r, listW) === 2) {
+        const art = iconArt(r.icon, 4) ?? iconBlank(4);
+        const w = listW - 6;
+        const t1 = fit(` ${r.text}`, w), t2 = fit(` ${r.sub ?? ''}`, w);
+        listLines.push(`${sel ? '▶' : ' '}${art[0]}${sel ? inverse(t1) : t1}`, ` ${art[1]}${sel ? inverse(t2) : t2}`);
+        continue;
+      }
+      // A header row is a cyan title; a plain one (a card's line of text) keeps its own paint.
+      let text = r.header ? (!r.text ? '' : r.plain ? r.text : cyan(bold(r.text))) : ` ${r.text}`;
       text = fit(sel ? `${'▶'}${text.slice(1)}` : text, listW - 1);
       listLines.push(sel ? inverse(text) : text);
     }
     // A cursor row scrolled out of view is echoed on the last line so Enter is never a mystery.
     const cursorRow = rows[view.cursor];
-    if (cursorRow && !cursorRow.header && (view.cursor < view.scroll || view.cursor >= view.scroll + L.mainH) && listLines.length === L.mainH) {
+    if (!grid && cursorRow && !cursorRow.header && (view.cursor < view.scroll || view.cursor >= end) && listLines.length === L.mainH) {
       listLines[L.mainH - 1] = inverse(fit(` ${view.cursor < view.scroll ? '▲' : '▼'} ${cursorRow.text}`, listW - 1));
     }
     if (!rows.length && view.empty) listLines.push(dim(` ${view.empty}`));
     let detailLines = [];
     if (showDetail) {
       const d = cursorRow?.detail?.(this, cursorRow) ?? view.detail?.(this, cursorRow) ?? [];
-      for (const line of d) detailLines.push(...(vis(line) > L.detailW - 2 ? wrapLines(line, L.detailW - 2) : [line]));
+      detailLines = wrapIconLines(d, L.detailW - 2);
       if (detailLines.length > L.mainH) detailLines = detailLines.slice(0, L.mainH - 1).concat(dim('…'));
     }
     for (let i = 0; i < L.mainH; i++) {
@@ -566,23 +712,43 @@ export class App {
   hintLine(L) {
     if (this.cmd) return ` ${bold(this.cmd.label)}${this.cmd.text}${inverse(' ')}`;
     if (this.flash && Date.now() < this.flash.until) return ` ${brightYellow(this.flash.text)}`;
-    if (this.fight && !this.stack.length) return ` ${dim(this.fight.hint())}`;
-    if (this.auto && !this.stack.length) return ` ${dim(`autopilot running: it quests, hunts and rests on its own.  Esc: stop   l: log   + -: speed   ${this.auto.browsing ? 'w: watch the run' : '1-9: look at a tab'}`)}`;
+    if (this.fight && !this.stack.length && !this.inlineFight()) return ` ${dim(this.fight.hint())}`;
+    if (this.auto && !this.stack.length && !this.auto.browsing) {
+      const f = this.inlineFight() ? this.fight : null;
+      const pace = f ? f.speed : this.fightSpeed;
+      const bags = fightPane(this) === 'bags' && !this.auto.browsing ? 'Up Down: pick an item   Enter: use it   ' : '';
+      return ` ${dim(`${bags}Esc: stop   space: ${(f ? f.paused : this.auto.paused) ? 'resume' : 'pause'}   + -: pace ${pace}x   l: log   ${this.auto.browsing ? 'w: watch the run' : `${f ? 'w: take the keys (1-0: action bar)   a: play it yourself   ' : ''}Tab: ${nextPaneId(this)}   1-9: look at a tab`}`)}`;
+    }
+    // The view's own keys fill the line while they fit; the way out and ? always stay. What does not fit is on ?.
     const view = this.top();
-    const hints = [];
-    if (view?.hint) hints.push(view.hint);
-    if (view?.keys) hints.push(...Object.entries(view.keys).filter(([, v]) => v.hint).map(([k, v]) => `${k === 'space' ? 'Space' : k}: ${v.hint}`));
-    if (view?.id !== 'log') hints.push('l: log');
-    hints.push(this.stack.length ? 'Esc: back' : '1-9: tabs', '?: help');
+    const head = viewKeyHints(view);
+    if (!this.g) return ` ${dim(cut([...new Set([...head, ...(this.stack.length > 1 ? ['Esc: back'] : [])])].join('   '), L.W - 2))}`;
+    const tail = [...(view?.id !== 'log' ? ['l: log'] : []), this.stack.length ? 'Esc: back' : this.auto ? 'Esc: back to the run   1-9: tabs' : '1-9: tabs'];
+    const room = L.W - 2 - vis([...tail, '?: more keys'].join('   ')) - 3;
+    const shown = [];
+    for (const h of head) { if (vis([...shown, h].join('   ')) > room) break; shown.push(h); }
+    const hints = [...shown, ...tail, shown.length < head.length ? '?: more keys' : '?: help'];
     return ` ${dim(cut(hints.join('   '), L.W - 2))}`;
   }
+
+  /** The key list: the open window's own keys first, then the global ones. */
+  helpView() {
+    const own = viewKeyHints(this.top());
+    const lines = own.length ? [bold(`This window (${strip(this.top().title ?? this.top().id)})`), ...own.map((h) => `  ${h}`), ''] : [];
+    return { id: 'help', title: 'Keys', hint: 'Esc: back', noDetail: true, rows: () => [...lines, ...HELP_LINES].map((t) => ({ text: t, header: true })) };
+  }
 }
 
 // ---- boot ----------------------------------------------------------------------------------------
 
 /** The save-pick screen, then the game. Resolves when the player quits. */
 export async function runTui({ term = new RealTerm(), argv = [] } = {}) {
-  const ds = bootDataStore();
+  term.open();
+  // The tables take a second or two to load: say so, stage by stage, instead of leaving the screen blank.
+  const loading = (stage) => term.draw([bold(' azsh') + dim('  Azeroth shell. WoW Classic 1.12 via CMaNGOS data.'), '', dim(`  Loading ${stage}…`)]);
+  loading('the game');
+  await new Promise((r) => setImmediate(r)); // the first frame leaves before the synchronous load holds the loop
+  const ds = bootDataStore(loading);
   const repo = new FileSaveRepository();
   const app = new App({ term, ds, repo, prefs: new FilePrefs() });
   // Engine diagnostics (console.warn from the combat layer) would print over the frame: while the screen is
@@ -591,7 +757,6 @@ export async function runTui({ term = new RealTerm(), argv = [] } = {}) {
   const quiet = (...a) => { if (process.env.AZSH_DEBUG) app.say(dim(a.map(String).join(' '))); };
   Object.assign(console, { log: quiet, warn: quiet, info: quiet, debug: quiet });
   app.restoreConsole = () => Object.assign(console, saved);
-  term.open();
   app.render();
   const saves = await repo.list();
   const begin = async (save) => {
@@ -606,39 +771,10 @@ export async function runTui({ term = new RealTerm(), argv = [] } = {}) {
     app.startGame(state, `${state.char.name.toLowerCase()}-${Date.now().toString(36)}`, Date.now(), true);
     void app.persist();
     app.render();
-  });
+  }, { onCancel: saves.length ? reopenPicker : null });
   if (saves.length && !argv.includes('--new')) await reopenPicker();
   else createFlow();
   return new Promise((resolve) => { app.onQuit = resolve; });
 }
 
-export function characterCreation(app, done) {
-  const ds = app.ds;
-  const races = ds.races();
-  // A random world bot: a whole character at its own level, geared, with its name (phonecraft's dev roll).
-  const randomBot = { label: `${dim('Random character')}  ${dim('a world bot at its own level')}`, value: 'random' };
-  app.pick('Choose a race', [...races.map((r) => ({
-    label: `${r.name.padEnd(10)} ${dim(r.faction)}`,
-    detail: [bold(r.name), r.faction, `Starts in ${ds.zone(r.startZone)?.name ?? r.startZone}`, '', dim('Classes: ') + r.classes.filter((c) => ds.createInfo(r.id, c)).map(className).join(', ')],
-    value: r,
-  })), randomBot], (race) => {
-    if (race === 'random') {
-      const seed = (Date.now() ^ (Math.random() * 0x7fffffff)) >>> 0;
-      const bot = pickRandomWorldBot(ds, seed);
-      done(newGameStateFromWorldBot(ds, bot, seed));
-      return;
-    }
-    const classes = race.classes.filter((c) => ds.createInfo(race.id, c));
-    app.pick(`${race.name}: choose a class`, classes.map((c) => ({ label: className(c), value: c })), (cls) => {
-      app.pick('Gender', [{ label: 'Male', value: 0 }, { label: 'Female', value: 1 }], (gender) => {
-        const askName = () => app.prompt('Name (2-12 letters): ', (raw) => {
-          const name = raw.trim();
-          if (!/^[A-Za-z]{2,12}$/.test(name)) { app.flashMsg('Letters only, 2 to 12 of them.'); askName(); return; }
-          const seed = (Date.now() ^ (Math.random() * 0x7fffffff)) >>> 0;
-          done(newGameState(ds, race.id, cls, name[0].toUpperCase() + name.slice(1).toLowerCase(), seed, gender));
-        });
-        askName();
-      });
-    });
-  });
-}
+export { characterCreation } from './tuiCreate.mjs';