azeroth-shell 0.1.2 → 0.3.0

package/src/cli/tuiFight.mjs

@@ -1,22 +1,34 @@
 // Live combat and the animated autopilot for the windowed game. A fight is the engine's real-time
-// session (Game.beginFight) ticked every 100 ms, drawn as unit frames with a cast slot and auras. Auto-play
-// runs the character's rotation; a number key presses an ability over it for one GCD. The numbered ability
-// bar only shows in manual play, where you need it.
-import { bold, dim, cyan, yellow, green, red, gray, inverse, fit, vis, cut, bar, strip, brightBlue, itemText } from './text.mjs';
-import { formatCombatLog, combatLogPlainText, POWER_MERGE_MS } from './combatLogFormat.ts';
+// session (Game.beginFight) ticked every 100 ms. A duel (you, maybe your pet, the foes) is drawn on a stage
+// (duelStage): the sprites face each other, each unit's plate sits under its feet, hits rise from the chest,
+// your cast bar is centred under the floor and the keyed ability bar runs along the bottom. A party fight or
+// a narrow terminal falls back to the list of unit frames (renderFrames). Auto-play runs the character's
+// rotation; a number key presses an ability over it for one GCD.
+import { bold, dim, cyan, yellow, green, red, gray, inverse, fit, vis, cut, bar, strip, brightBlue, itemText, orange, coinText } from './text.mjs';
+import { className } from '../domain/core/ids.ts';
+import { SIZES, youSize, foeSize, canvas, put, putLines, floorLine, POWER_PAINT, POP_MS, POP_RISE_MS, LUNGE_MS, SHORT_BUFF_MS, ROLE_GLYPH, plateLines, auraRows, castSlot, castRows, auraText, auraTime, putMissiles, lootToasts, putLootToasts } from './tuiStage.mjs';
+import { partyStage } from './tuiPartyStage.mjs';
+import { combatDistanceYd, DEFAULT_OPEN_YD, MELEE_CONTACT_YD } from '../engine/combat/combatGeometry.ts';
+import { formatCombatLog, combatLogPlainText, dropLogRepeats, POWER_MERGE_MS } from './combatLogFormat.ts';
 import { impliedDest } from './combatLogFilter.ts';
-import { moneyText } from '../domain/economy/money.ts';
 import { maxHealth, maxPower } from '../domain/character/character.ts';
 import { powerType } from '../domain/character/characterStats.ts';
 import { pullOpts, sessionLogNames } from './squad.mjs';
+import { prepOoc, prepText } from './oocPrep.mjs';
 import { slotContent, visibleBars } from './tuiBars.mjs';
 import { autoLootOn, openLoot } from './tuiLoot.mjs';
 import { createCombatMacroHost } from './macroHostCombat.ts';
-import { ensureMeter, noteLoot, cycleFightPane, cycleMeterSort, toggleMeterSegment, fightPane } from './tuiFightPanes.mjs';
-import { objectiveLines } from './tuiViews.mjs';
+import { ensureMeter, noteLoot, cycleFightPane, cycleMeterSort, toggleMeterSegment, fightPane, nextPaneId } from './tuiFightPanes.mjs';
+import { objectiveLines, playerArt } from './tuiViews.mjs';
+import { runPanelLines, endCard, stopText, stepBody } from './tuiAutopilot.mjs';
+import { creatureArt, artWidth } from './modelArt.mjs';
+import { iconArt, iconsOn } from './iconArt.mjs';
 
 export const TICK_MS = 100; // one engine tick per 100 ms of real time, like the web client
-const POWER_PAINT = { mana: brightBlue, rage: red, energy: yellow, focus: yellow };
+// Fight time with every living foe out of combat (an evade, a leash) before the fight ends as a stalemate.
+export const QUIET_END_MS = 3000;
+// A win holds the fight on screen this long (real time), plus a beat for each drop as it slides in.
+const WIN_HOLD_MS = 1000, DROP_HOLD_MS = 450, DROP_STAGGER_MS = 220, WIN_HOLD_MAX_MS = 3500;
 
 /** Start a live fight. Returns `{ ok: true, ctl }` or `{ ok: false, reason }`. `onEnd(outcome)` runs after the
  *  fight resolves (outcome null when the player ran); `label` names who is driving (the autopilot). `begin` replaces
@@ -28,6 +40,8 @@ const POWER_PAINT = { mana: brightBlue, rage: red, energy: yellow, focus: yellow
 export function startFight(app, creatureEntry, { onEnd, label, begin, after, resolve, onTick, why } = {}) {
   if (app.fight) return { ok: false, reason: 'Already in a fight.' };
   if (app.isDead()) { app.flashMsg('You are dead.'); return { ok: false, reason: 'You are dead.' }; }
+  // A pull you chose buffs first, standing still; a dungeon stop does it in pullStop, an ambush (begin) cannot.
+  if (!begin && !resolve) { const buffed = prepText(prepOoc(app.g, app.ds)); if (buffed) app.say(cyan(buffed)); }
   const opts = begin ? { withSquad: true } : pullOpts(app.g, app.ds, app.cmds.buffPace, creatureEntry, (l) => app.say(cyan(l)));
   const b = begin ? begin() : app.g.beginFight(creatureEntry, opts);
   if (!app.result(b)) { app.render(); return { ok: false, reason: b.reason || 'Cannot fight that.' }; }
@@ -43,7 +57,7 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
     auto: true, paused: false, speed: app.fightSpeed ?? 1, pressed: null, pressedTicks: 0, follow: [], focus: null, macros: null, timer: null, pend: null, ended: false,
     frames: newFrameMemory(app), compact: false, squeeze: 0,
     names: sessionLogNames(session, { playerName: app.ch.name, enemyName: b.enemyName, spellName: (id) => app.ds.spell(id)?.name }),
-    hint() { return `${this.plain ? (app.farmEntry === creatureEntry ? 'r: stop repeating   ' : 'r: fight again after   ') : ''}${this.auto ? 'a: manual play' : '1-0: your action bar   a: auto-play'}${session.alliesView().length ? '   t: orders' : ''}   c: cancel a buff${app.g.state.instance ? '   p: pull +1' : ''}   space: ${this.paused ? 'resume' : 'pause'}   + -: speed ${this.speed}x   Tab: ${fightPane(app) === 'log' ? 'meter' : fightPane(app) === 'meter' ? 'threat' : fightPane(app) === 'threat' ? 'loot' : 'log'}   l: log   Esc: ${this.label ? 'run away, stop autopilot' : 'run away'}`; },
+    hint() { if (this.holding) return `Enter, Esc: go on   Tab: ${nextPaneId(app)}   l: log`; return `${this.plain ? (app.farmEntry === creatureEntry ? 'r: stop repeating   ' : 'r: fight again after   ') : ''}1-0: your action bar   a: ${this.auto ? 'manual play' : 'auto-play'}${session.alliesView().length ? '   t: orders' : ''}   c: cancel a buff${app.g.state.instance ? '   p: pull +1' : ''}   space: ${this.paused ? 'resume' : 'pause'}   + -: speed ${this.speed}x   Tab: ${nextPaneId(app)}   l: log   ${this.label === 'autopilot' ? 'w, Esc: back to the run panel' : 'Esc: run away'}`; },
     schedule() {
       if (this.timer) app.term.clearInterval(this.timer);
       this.timer = app.term.setInterval(() => this.tick(), Math.max(10, TICK_MS / this.speed));
@@ -51,6 +65,7 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
     stop() { if (this.timer) app.term.clearInterval(this.timer); this.timer = null; },
     /** One engine tick (the check script calls this by hand). */
     tick() {
+      if (this.holding && !this.paused) { if (++this.heldTicks >= this.holding.ticks) this.release(); app.renderSoon(); return; }
       if (this.ended || this.paused) return;
       let action;
       // A macro's later steps go out one per tick once the step before has left the queue.
@@ -70,15 +85,48 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       else events = session.tick();
       this.logEvents(events);
       if (!session.ended) this.onTick?.();
+      if (!session.ended && !begin && !resolve) this.watchQuiet();
       if (session.ended) this.finish();
       app.renderSoon();
     },
+    /** A pull that went quiet: something was in combat, and every living foe has been out of it for QUIET_END_MS.
+     *  The engine keeps that session open (a reset mob stands passive and the rotation leaves it be, so a Scout
+     *  that evaded once held the fight for 970 s), so it ends here as a timeout, which settles as a stalemate:
+     *  the web client's "Enemies evade" settle. Not on a dungeon floor, whose session holds unpulled packs. */
+    wasEngaged: false, quietSince: null,
+    watchQuiet() {
+      const live = session.enemiesView().filter((e) => e.hp > 0);
+      if (live.some((e) => e.engaged)) { this.wasEngaged = true; this.quietSince = null; return; }
+      if (!this.wasEngaged || !live.length || !session.mirrorOutcome) return;
+      this.quietSince ??= session.t;
+      if (session.t - this.quietSince < QUIET_END_MS) return;
+      app.say(yellow(`${live.length > 1 ? 'Your foes reset' : `${live[0].name} resets`} and the fight is over.`));
+      session.mirrorOutcome(true, 'timeout');
+    },
+    /** A win holds the fight on screen a moment before it gives the screen back: the foe at 0 on its plate and
+     *  what it dropped sliding in beside it (putLootToasts). The timer keeps ticking through it, so the hold is
+     *  counted in ticks: the speed keys and the check script drive it like the fight. */
+    holding: null, heldTicks: 0,
+    /** The stage's clock: the fight's own, running on through the hold so the last hits finish rising. */
+    clock() { return session.t + this.heldTicks * TICK_MS; },
+    /** Real milliseconds into the hold (the toasts' clock). */
+    holdMs() { return this.heldTicks * (TICK_MS / this.speed); },
+    /** The drops in one line, for the frames list when the stage does not fit. Null outside a hold or with none. */
+    lootLine() {
+      const drops = this.holding ? lootToasts(app, this.holding) : [];
+      return drops.length ? ` ${cyan('Loot')}  ${drops.map((d) => d.text).join(dim(' · '))}` : null;
+    },
+    /** At 4x and up under the autopilot nobody reads the ticks: the log speaks in fights (the Victory line). */
+    folded() { return this.label === 'autopilot' && this.speed >= 4; },
     logEvents(events) {
       app.meter?.ingest(events);
       notePops(this.frames, events);
+      let known = null;
+      noteCasts(this.frames, events, (id) => (known ??= new Set(session.abilities().map((a) => a.spell.id))).has(id));
+      if (this.folded()) return;
       const flush = () => { if (this.pend && this.pend.amount > 0) app.say(line(this.pend.t, this.pend.remake(this.pend.amount))); this.pend = null; };
-      const line = (t, row) => `${dim((t / 1000).toFixed(1).padStart(5) + 's')} ${combatLogPlainText(row)}`;
-      for (const ev of events) {
+      const line = (t, row) => `${dim((t / 1000).toFixed(1).padStart(5) + 's')} ${paintLog(row)}`;
+      for (const ev of dropLogRepeats(events)) {
         const row = formatCombatLog(ev, this.names);
         if (!row) continue;
         if (row.merge) {
@@ -93,19 +141,17 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       if (this.pend && session.t - this.pend.t0 >= POWER_MERGE_MS) flush();
     },
     finish() {
+      if (this.ended) return;
       this.ended = true;
-      this.stop();
-      if (this.pend) { if (this.pend.amount > 0) app.say(`${dim((this.pend.t / 1000).toFixed(1).padStart(5) + 's')} ${combatLogPlainText(this.pend.remake(this.pend.amount))}`); this.pend = null; }
+      if (this.pend) { if (this.pend.amount > 0) app.say(`${dim((this.pend.t / 1000).toFixed(1).padStart(5) + 's')} ${paintLog(this.pend.remake(this.pend.amount))}`); this.pend = null; }
       // Auto-loot off: the corpse holds its drops and coin for the loot window. The autopilot always takes them.
       const hold = !this.resolve && this.label !== 'autopilot' && !autoLootOn(app);
       const r = this.resolve ? this.resolve(session) : app.g.resolveFight(session, hold ? { holdLoot: true } : undefined);
-      app.fight = null;
-      app.stack = this.savedStack;
       this.after?.(r);
       const tag = r.outcome === 'win' ? green(bold('Victory')) : r.outcome === 'defeat' ? red(bold('Defeat')) : yellow(bold('Stalemate'));
       const bits = [`${(r.result.durationMs / 1000).toFixed(1)} s`, `HP ${app.hpText()}`];
       if (r.xpGained) bits.push(`+${r.xpGained} xp`);
-      if (r.goldGained && !hold) bits.push(`+${moneyText(r.goldGained)}`);
+      if (r.goldGained && !hold) bits.push(`+${coinText(r.goldGained)}`);
       app.say(`${tag} against ${this.enemyName}  ${dim(bits.join('  '))}`);
       if (!hold) { noteLoot(app, r.loot, r.goldGained); for (const d of r.loot) app.say(`  ${yellow('You receive')} ${app.itemLabel(d.item)}${d.count > 1 ? ` x${d.count}` : ''}`); }
       const gained = (app.g.state.squad ?? []).filter((c) => (c.xp ?? 0) !== squadXp.get(c.id)).map((c) => `${c.name} ${(c.xp ?? 0) > (squadXp.get(c.id) ?? 0) ? `+${(c.xp ?? 0) - (squadXp.get(c.id) ?? 0)} xp` : 'levels up'}`);
@@ -114,6 +160,23 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       if (r.outcome === 'win') app.flashMsg(`${this.enemyName} dies.${r.xpGained ? `  +${r.xpGained} xp` : ''}`);
       // The lines above already tell the story; the engine's activity rows for this fight would repeat it.
       app.lastActivity = app.g.state.activity[0] ?? null;
+      this.done = { r, hold };
+      if (r.outcome !== 'win') { this.release(); return; }
+      // Real time: a second, a beat more for each drop as it slides in; at 4x and up it shortens with the speed.
+      const loot = hold ? [] : r.loot, copper = hold ? 0 : r.goldGained ?? 0;
+      const pace = Math.max(1, this.speed / 2), ms = Math.min(WIN_HOLD_MAX_MS, WIN_HOLD_MS + (loot.length + (copper ? 1 : 0)) * DROP_HOLD_MS) / pace;
+      this.holding = { loot, copper, until: ms, stagger: DROP_STAGGER_MS / pace, ticks: Math.max(1, Math.ceil(ms / (TICK_MS / this.speed))) };
+      app.renderSoon();
+    },
+    /** The fight is over and its hold too: the screen goes back to whoever opened the fight. */
+    release() {
+      if (!this.done || app.fight !== this) return;
+      const { r, hold } = this.done;
+      this.holding = null;
+      this.stop();
+      app.fight = null;
+      app.lastFight = this; // the meter and threat panes keep reading it between autopilot fights
+      app.stack = this.savedStack;
       if (hold) openLoot(app);
       app.afterAction();
       this.onEnd?.(r);
@@ -123,6 +186,7 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       }
     },
     flee() {
+      if (this.holding) { this.release(); return; }
       if (this.resolve) { session.forfeit('player'); for (let i = 0; i < 50 && !session.ended; i++) session.tick(); this.finish(); return; }
       this.ended = true;
       this.stop();
@@ -136,6 +200,11 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       this.onEnd?.(null);
     },
     key(k) {
+      // Over a win's hold Enter or Esc goes on at once; the panes, the log and the speed still answer.
+      if (this.holding) {
+        if (k === 'escape' || k === 'return') { this.release(); return; }
+        if (!['space', 'tab', 'shift-tab', 'l', 'pageup', 'pagedown', '+', '=', '-'].includes(k)) return;
+      }
       if (k === 'escape') { this.flee(); return; }
       if (k === 'space') { this.paused = !this.paused; app.render(); return; }
       if (k === 'a') { this.auto = !this.auto; session.aiPlayer = this.auto; app.say(dim(this.auto ? 'Auto-play on: your rotation plays.' : 'Auto-play off: you press every ability.')); app.render(); return; }
@@ -233,22 +302,78 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       if (out.length) return out;
       return abs.filter((x) => !x.spell.passive).slice(0, 9).map((ab, i) => ({ key: String(i + 1), spell: ab.spell, label: ab.spell.name, usable: ab.usable, reason: ab.reason, cooldownRemainingMs: ab.cooldownRemainingMs }));
     },
-    render(W, H) {
-      const lines = [];
+    /** The title line (who, how long, who drives) with why the fight is on its right, and the objective line under it. */
+    headLines(W, inline = false) {
       const t = (session.t / 1000).toFixed(1);
-      const mode = this.auto ? green('AUTO') : yellow('MANUAL');
-      let head = ` ${bold(`Fighting ${this.enemyName}`)}   ${dim(`${t}s`)}   ${mode}${this.paused ? red('  PAUSED') : ''}${this.speed !== 1 ? dim(`  ${this.speed}x`) : ''}${this.label ? cyan(`   ${this.label}`) : ''}`;
+      // One badge says who is driving. Under the autopilot the rotation flag only shows when you took it over;
+      // inside the run panel the panel's title already says who drives, so the head keeps to the fight.
+      const run = this.label === 'autopilot' ? app.auto : null;
+      const mode = inline ? (this.auto ? '' : yellow('you play'))
+        : run ? `${cyan(bold('AUTOPILOT'))}${this.speed !== 1 ? cyan(` ${this.speed}x`) : ''}${this.auto ? '' : yellow('  you play')}${dim(`  fight ${run.fights + 1} · step ${run.planner.step}${Number.isFinite(run.planner.steps) ? `/${run.planner.steps}` : ''}`)}`
+        : `${this.auto ? green('AUTO') : yellow('MANUAL')}${this.speed !== 1 ? dim(`  ${this.speed}x`) : ''}${this.label ? cyan(`   ${this.label}`) : ''}`;
+      let head = ` ${bold(`Fighting ${this.enemyName}`)}   ${dim(`${t}s`)}${mode ? `   ${mode}` : ''}${this.paused ? red('  PAUSED') : ''}`;
       // Why this fight, on the right of the title: the quest it serves, with its objective counters on the line below.
       const why = this.why?.();
       if (why?.right && W - vis(head) - 4 >= 12) { const r = cut(why.right, W - vis(head) - 4); head = fit(head, W - vis(r) - 1) + r + ' '; }
       const below = why?.below ? cut(` ${why.below}`, W) : '';
+      return { head, below };
+    },
+    /** The fight drawn inside the autopilot's run panel, so a pull never swaps the screen: the head, the objective
+     *  line, the enemies, then the party one line each, cut to `room` lines. `player` is the live player frame for
+     *  the panel's own slot. w opens the full view (render) with the party frames and the ability bar. */
+    inlineLines(W, room) {
+      const now = this.clock();
+      // No head line: the panel's title names the quest and its counts, the enemy frame names the foe. What is
+      // left of the head (the clock, paused, you play) goes on the title's right as `status`.
+      const status = `${dim(`${(now / 1000).toFixed(1)}s`)}${this.auto ? '' : yellow('  you play')}${this.paused ? red('  PAUSED') : ''}`;
+      const enemies = session.enemiesView(), allies = session.alliesView(), pet = session.petView();
+      // `player` is the live frame for the panel's own slot (the run's header has no bars of its own).
+      const player = unitFrame(app, this.frames, session.playerView(), W, now, true, false, {});
+      const foes = (compact) => enemies.flatMap((e) => unitFrame(app, this.frames, e, W, now, false, e === session.enemyView(), { compact }));
+      const nameOfSide = (side) => (side === 'player' ? app.ch.name : [...allies, ...enemies].find((v) => v.side === side)?.name ?? (pet?.side === side ? pet.name : null));
+      const party = [...(pet ? [pet] : []), ...allies].map((v) => {
+        const t = v !== pet && v.hp > 0 ? session.targetOf?.(v.side) : null;
+        return unitFrame(app, this.frames, v, W, now, false, false, { compact: true, party: v !== pet, role: v.groupRole, target: t ? nameOfSide(t) : null })[0];
+      });
+      let fight = [...foes(enemies.length > 1), ...party];
+      if (fight.length > room) {
+        const shown = Math.max(0, room - foes(true).length);
+        fight = [...foes(true), ...party.slice(0, shown), ...(party.length > shown ? [dim(`   +${party.length - shown} more in the party`)] : [])];
+      }
+      return { player, status, fight: fight.slice(0, Math.max(1, room)) };
+    },
+    /** The fight on its stage when the scene fits, 90 columns and up: a fight without allies on the duel stage
+     *  (duelStage), one with the party on the party stage (partyStage, every body small on one floor). Null when
+     *  the rows or the columns leave the sprites no room, and the frames list draws instead. `inline` is the
+     *  autopilot's run panel, where the number keys browse tabs, so the ability bar shows its keys dim. */
+    stage(W, H, { inline = false } = {}) {
+      if (W < 90) return null;
+      const lines = session.alliesView().length ? partyStage(app, this, W, H, { inline }) : duelStage(app, this, W, H, { inline });
+      if (lines && this.holding) putLootToasts(app, lines, this.holding, W, this.holdMs());
+      return lines;
+    },
+    /** The full fight view: the head line, then the stage; or the frames between the sprites (the foe down the
+     *  right, you in your gear down the left, fightArt) when the stage does not fit. */
+    render(W, H) {
+      const stage = this.stage(W, H - 1);
+      if (stage) return [this.headLines(W).head, ...stage];
+      const { me, foe, innerW } = fightArt(app, this, W, H);
+      const frames = this.renderFrames(innerW, H), loot = this.lootLine();
+      if (loot) frames.splice(1, 0, loot);
+      return flankArt(frames.slice(0, H), me, foe, W, H);
+    },
+    renderFrames(W, H) {
+      const lines = [];
+      const { head, below } = this.headLines(W);
       const pv = session.playerView(), now = session.t;
       const pet = session.petView();
       const allies = session.alliesView();
       const enemies = session.enemiesView();
       // Four companions and their pets do not fit two lines each: once the party outgrows the pane every
       // ally drops to one line for the rest of the fight, so frames never jump between the two shapes.
-      const need = 3 + 2 * (1 + (pet ? 1 : 0) + allies.length + enemies.length) + (this.auto ? 0 : 3);
+      // With icons a full frame is three lines (the aura icons and their times) and the ability bar two.
+      const fh = iconsOn() ? 3 : 2;
+      const need = 3 + fh * (1 + (pet ? 1 : 0) + allies.length + enemies.length) + (this.auto ? 0 : fh + 1);
       if (need > H) this.compact = true;
       const nameOfSide = (side) => (side === 'player' ? app.ch.name : [...allies, ...enemies].find((v) => v.side === side)?.name ?? (pet?.side === side ? pet.name : null));
       const party = [];
@@ -278,10 +403,44 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
       lines.push(...foeLines, ...tail);
       return lines.slice(0, H);
     },
-    /** Ability bar (manual play only): numbered, dim when unusable, cooldown shown. */
-    abilityRows(W) {
+    /** The ability bar: numbered, dim when unusable. With icons each slot is `cols / 2` lines (a 4 or 6 pixel
+     *  icon) of a fixed width, so nothing on the bar moves between ticks: the key, the icon and the name, and
+     *  under the name only a cooldown (seconds), the cast in progress, or nothing. The slot of a spell just
+     *  used flashes. `live` false (the autopilot's panel, where digits browse tabs) keeps the keys dim and says
+     *  what takes them. Slots fold onto more rows when W is short. */
+    abilityRows(W, cols = 4, { live = true } = {}) {
       const lines = [];
       const abs = this.abilityBar();
+      if (iconsOn()) {
+        const now = this.clock(), mem = this.frames, casting = session.playerView().casting;
+        const rows = cols / 2, blank = Array.from({ length: rows }, () => ' '.repeat(cols)), gap = ' '.repeat(4);
+        const nameW = 14, slotW = 4 + cols + 1 + nameW;
+        const slot = (key, art, label, state) => [`${key} ${art[0]} ${fit(label, nameW)}`, `${gap}${art[1]} ${fit(state, nameW)}`, ...art.slice(2).map((l) => `${gap}${l}`)];
+        const cells = abs.map((ab) => {
+          const icon = ab.spell ? ab.spell.icon : ab.item != null ? app.ds.item(ab.item)?.icon : null;
+          const art = iconArt(icon, cols) ?? blank;
+          const id = ab.spell?.id;
+          const isCasting = id != null && casting?.spellId === id;
+          const flash = id != null && now - (mem.used?.get(id) ?? -Infinity) < USED_FLASH_MS;
+          const cd = ab.cooldownRemainingMs > 0 ? `${Math.ceil(ab.cooldownRemainingMs / 1000)}s` : '';
+          const state = isCasting ? yellow(`${(Math.max(0, casting.endsAt - now) / 1000).toFixed(1)}s`) : cd ? dim(`◔ ${cd}`) : '';
+          const name = cut(ab.label, nameW);
+          const label = flash || (this.pressed != null && this.pressed === id) ? inverse(name) : isCasting ? yellow(name) : ab.usable ? name : dim(name);
+          const key = live && ab.usable ? inverse(` ${ab.key} `) : dim(` ${ab.key} `);
+          return slot(key, art, label, state);
+        });
+        const items = session.items().filter((x) => x.usable);
+        if (items.length) cells.push(slot(live ? inverse(' 0 ') : dim(' 0 '), iconArt(items[0].item?.icon, cols) ?? blank, cut(itemText(items[0].item), nameW), dim(`x${items[0].count}`)));
+        if (!live) cells.push([dim('w: take the keys'), '', '']);
+        let row = Array.from({ length: rows }, () => ' ');
+        for (const cell of cells) {
+          const w = Math.max(slotW, ...cell.map(vis));
+          if (vis(row[0]) + w + 3 > W && row[0].trim()) { lines.push(...row); row = Array.from({ length: rows }, () => ' '); }
+          row = row.map((r, i) => `${r}${fit(cell[i] ?? '', w)}   `);
+        }
+        lines.push(...row);
+        return lines;
+      }
       let row = ' ';
       for (let i = 0; i < abs.length; i++) {
         const ab = abs[i];
@@ -301,8 +460,8 @@ export function startFight(app, creatureEntry, { onEnd, label, begin, after, res
   };
   session.aiPlayer = true;
   app.fight = ctl;
-  app.stack = [];
-  if (app.auto) app.auto.browsing = false; // an autopilot fight always comes back on screen
+  // An autopilot fight draws inside the run panel (or under the run strip), so whatever you were reading stays up.
+  if (label !== 'autopilot') app.stack = [];
   app.say(cyan(`You attack ${b.enemyName}.`) + (b.packAssist?.length ? yellow(` ${b.packAssist.map((p) => p.name).join(', ')} join${b.packAssist.length === 1 ? 's' : ''} the fight!`) : ''));
   ctl.schedule();
   app.render();
@@ -399,23 +558,57 @@ function partyOrders(app, ctl) {
   });
 }
 
+/** A combat log row with its parts painted, like a classic client's log: you green, friends and pets cyan, foes
+ *  yellow, spells cyan, damage red, healing green. The words between stay plain so the line still reads. */
+function paintLog(row) {
+  return row.segs.map((s) => {
+    const c = s.cls ?? '';
+    if (c.includes('tw-clog-amt')) return c.includes('sch-heal') ? green(s.text) : red(s.text);
+    if (c.includes('tw-clog-u-mine')) return green(s.text);
+    if (c.includes('tw-clog-u-friend') || c.includes('tw-clog-u-pet')) return cyan(s.text);
+    if (c.includes('tw-clog-u-hostile')) return yellow(s.text);
+    if (c.includes('tw-clog-sp')) return cyan(s.text);
+    return s.text;
+  }).join('');
+}
+
 const CAST_W = 30; // the cast/control slot on a frame's second line, so auras never move when a cast starts
 
-/** Per-fight memory that keeps frames steady: which units have used the cast slot, and the order auras
- *  first showed up in, so a refreshed buff keeps its place instead of jumping to the end. */
+/** Per-fight memory that keeps frames steady: the order auras first showed up in, so a refreshed buff keeps
+ *  its place instead of jumping to the end. */
 function newFrameMemory(app) {
-  // The player's own slot and aura order carry across fights, so their frame never reshuffles.
+  // The player's own aura order carries across fights, so their frame never reshuffles.
   app.playerAuraOrder ??= new Map();
-  return { castSlot: new Set(app.playerCastSlot ? ['player'] : []), auraOrder: new Map([['player', app.playerAuraOrder]]), pops: new Map() };
+  return { auraOrder: new Map([['player', app.playerAuraOrder]]), pops: new Map(), used: new Map(), lunge: new Map(), casts: new Map(), barred: new Map() };
+}
+
+/** Every unit's casts as they go off, newest first, for its cast slot (castRows): a cast_finish with no
+ *  cast_start before it is an instant. `own(id)` keeps yours to the spells you know, so a proc's triggered
+ *  spell never shows as something you pressed. */
+function noteCasts(mem, events, own) {
+  for (const ev of events) {
+    if (!ev.actor || ev.spellId == null) continue;
+    if (ev.kind === 'cast_start') { mem.barred.set(ev.actor, ev.spellId); continue; }
+    if (ev.kind !== 'cast_finish' || (ev.actor === 'player' && !own(ev.spellId))) continue;
+    const instant = mem.barred.get(ev.actor) !== ev.spellId;
+    mem.barred.delete(ev.actor);
+    mem.casts.set(ev.actor, [{ t: ev.t, spellId: ev.spellId, name: ev.name, instant }, ...(mem.casts.get(ev.actor) ?? [])].slice(0, 8));
+  }
 }
 
-const POP_MS = 1500, POP_W = 18; // a hit or heal stays beside the bars this long (fight time), in a slot this wide
+const POP_W = 18; // a hit or heal stays beside the bars for POP_MS (fight time), in a slot this wide
+const USED_FLASH_MS = 500; // the ability bar slot of a spell just cast stays inverted this long
 const MISS_WORD = { miss: 'Miss', dodge: 'Dodge', parry: 'Parry', immune: 'Immune', deflect: 'Deflect', block: 'Block' };
 
-/** Damage and healing landing on each unit, newest first, for the numbers that pop up beside its bars. */
+/** Damage and healing landing on each unit, newest first, for the numbers that pop up beside its bars; the
+ *  player's casts, for the flash on the ability bar; and every melee auto-attack, for the lunge. */
 function notePops(mem, events) {
   for (const ev of events) {
     let side, text;
+    if (ev.actor === 'player' && ev.spellId != null && (ev.kind === 'cast_start' || ev.kind === 'cast_finish' || ev.kind === 'spell_hit' || ev.kind === 'cast_self')) mem.used?.set(ev.spellId, ev.t);
+    // Only a melee auto-attack lunges: spells, strikes and thorns do not, nor a ranged white (Auto Shot, Shoot
+    // or Throw), which the engine sends as a melee event tagged with the shoot spell's id and name.
+    if (ev.kind === 'melee' && ev.actor && ev.spellId == null && !ev.name) mem.lunge?.set(ev.actor, ev.t);
     if (ev.kind === 'melee' || ev.kind === 'spell_hit' || ev.kind === 'dot_tick') {
       side = ev.target ?? impliedDest(ev.actor);
       if (ev.amount > 0) text = ev.result === 'crit' ? bold(red(`-${ev.amount}!`)) : red(`-${ev.amount}`);
@@ -439,12 +632,18 @@ function popText(mem, key, now) {
   return out;
 }
 
-const ROLE_GLYPH = { tank: cyan('T'), healer: green('H'), damage: red('D') };
-
 /** Two lines: name/level/HP/power, then a fixed cast slot + auras. `now` is the clock `casting` runs on. A party
  *  frame carries its role letter and target; `compact` keeps it to the first line with the cast in it. */
-function unitFrame(app, mem, v, W, now, isPlayer, focused = false, { compact = false, party = false, role, target } = {}) {
+function unitFrame(app, mem, v, W, now, isPlayer, focused = false, { compact = false, party = false, role, target, bars = true } = {}) {
   const dead = v.hp <= 0;
+  // No bars (the header already shows them): one line of name, cast slot, hits landing and auras.
+  if (!bars) {
+    const key = isPlayer ? 'player' : (v.side ?? v.name);
+    const name = `${(dead ? gray : isPlayer ? green : yellow)(bold(v.name))} ${dim(`L${v.level}`)}`;
+    const slot = castSlot(v, now, mem.casts?.get(key));
+    const auras = auraText(app, mem, v, key);
+    return [cut(` ${fit(name, 20)} ${fit(slot, CAST_W)} ${fit(popText(mem, key, now), POP_W)} ${auras}`, W)];
+  }
   const namePaint = dead ? gray : isPlayer ? green : focused ? red : party ? cyan : yellow;
   const barW = Math.max(10, Math.min(30, Math.floor((W - 48 - POP_W) / 2)));
   const hpBar = bar(v.hp, v.maxHp, barW, dead ? gray : v.hp / v.maxHp < 0.25 ? red : green);
@@ -455,50 +654,201 @@ function unitFrame(app, mem, v, W, now, isPlayer, focused = false, { compact = f
   const key = isPlayer ? 'player' : (v.side ?? v.name);
   const head = ` ${fit(`${tag}${namePaint(bold(v.name))} ${dim(`L${v.level}`)}${focused ? red(' ◀') : ''}`, 26)} ${hpBar} ${fit(`${v.hp}/${v.maxHp}`, 11)}${pwBar} ${fit(popText(mem, key, now), POP_W)}`;
   if (compact) return [cut(`${head}${v.casting && !dead ? `  ${yellow(v.casting.name)}` : after}`, W)];
-  // Cast slot: a cast bar, else crowd control, else stealth. Once a unit has used it the slot stays
-  // reserved (blank when idle), so the auras after it hold still.
-  let slot = '';
-  if (v.casting) {
-    const total = v.casting.endsAt - v.casting.startedAt;
-    const left = Math.max(0, v.casting.endsAt - now);
-    const prog = v.casting.channeled ? left / total : 1 - left / total;
-    slot = `${fit(yellow(v.casting.name), 14)} ${bar(prog, 1, 10, yellow)} ${dim(`${(left / 1000).toFixed(1)}s`)}`;
-  } else if (v.controlled) slot = red(v.controlled.control);
-  else if (v.stealthed) slot = dim('stealthed');
-  if (slot) {
-    mem.castSlot.add(key);
-    if (isPlayer) app.playerCastSlot = true; // kept across fights and the autopilot's between-fight frame
+  // The second line is always there, cast slot first (a cast bar, else crowd control, else stealth, blank when
+  // idle) and the auras after it, so gaining a buff or starting a cast never moves this frame or the ones below.
+  const recent = mem.casts?.get(key);
+  if (iconsOn()) {
+    // Icons: the cast slot two lines tall (the spell's icon, its name, the casts before it), then a strip of
+    // 4x4 icons, each aura's time (or stacks) under it on the third line.
+    const [top, bottom] = auraIcons(app, mem, v, key);
+    const [slotTop, slotUnder] = dead ? ['', ''] : castRows(app, v, recent, now, CAST_W);
+    return [cut(`${head}${after}`, W), cut(`   ${fit(slotTop, CAST_W)}  ${top}`, W), cut(`   ${fit(slotUnder, CAST_W)}  ${bottom}`, W)];
   }
+  const slot = castSlot(v, now, recent);
+  const auras = auraText(app, mem, v, key);
+  return [cut(`${head}${after}`, W), cut(`   ${fit(slot, CAST_W)}  ${auras}`, W)];
+}
+
+/** The auras auraText lists, as two lines: icons (a 4-letter stub when one has no art) and their times. */
+function auraIcons(app, mem, v, key) {
   const order = mem.auraOrder.get(key) ?? new Map();
   mem.auraOrder.set(key, order);
   const placed = (list) => {
     for (const a of list) if (!order.has(a.spellId)) order.set(a.spellId, order.size);
     return [...list].sort((a, b) => order.get(a.spellId) - order.get(b.spellId));
   };
-  const aura = (a, paint) => paint(`${app.ds.spell(a.spellId)?.name ?? a.spellId}${a.stacks > 1 ? ` x${a.stacks}` : ''}${a.remainingMs != null ? dim(` ${auraTime(a.remainingMs)}`) : ''}`);
-  const auras = [...placed(v.buffs).slice(0, 6).map((a) => aura(a, green)), ...placed(v.debuffs).slice(0, 6).map((a) => aura(a, red))].join('  ');
-  const reserve = mem.castSlot.has(key);
-  if (!reserve && !auras) return [cut(`${head}${after}`, W)];
-  return [cut(`${head}${after}`, W), cut(`   ${reserve ? `${fit(slot, CAST_W)}  ` : ''}${auras}`, W)];
+  const short = v.buffs.filter((a) => a.remainingMs != null && a.remainingMs < SHORT_BUFF_MS);
+  const all = [...placed(short).slice(0, 6).map((a) => [a, green]), ...placed(v.debuffs).slice(0, 6).map((a) => [a, red])];
+  let top = '', bottom = '';
+  for (const [a, paint] of all) {
+    const sp = app.ds.spell(a.spellId);
+    const art = iconArt(sp?.icon, 4);
+    const name = sp?.name ?? String(a.spellId);
+    top += `${art ? art[0] : paint(fit(name, 4))} `;
+    bottom += `${art ? (a.stacks > 1 ? yellow(fit(`x${a.stacks}`, 4)) : paint(fit(a.remainingMs != null ? auraTime(a.remainingMs).trim() : '', 4))) : paint(fit(name.slice(4), 4))} `;
+  }
+  return [top, bottom];
 }
 
-/** Aura time left at a fixed width: "  9s", " 12s", " 30m". */
-function auraTime(ms) {
-  const s = Math.ceil(ms / 1000);
-  return (s < 60 ? `${s}s` : `${Math.ceil(s / 60)}m`).padStart(3);
+/** Columns an art column gets in a pane W wide: none under 90 columns, up to 28. */
+const artCols = (W) => (W >= 90 ? Math.min(28, Math.floor(W * 0.22)) : 0);
+
+/**
+ * The sprites round a fight pane W x H: the foe a controller faces down the right from 90 columns, you in
+ * your gear (playerArt) down the left from 130; `innerW` is what the frames keep. The full fight view and
+ * the autopilot's run panel both use it, so a run shows the same scene either way.
+ */
+export function fightArt(app, ctl, W, H) {
+  const cols = artCols(W);
+  const entry = ctl.session?.enemyView()?.creatureEntry ?? ctl.enemyEntry;
+  const foe = cols && entry != null ? creatureArt(app.ds.creature(entry)?.displayId, cols, H) : null;
+  const me = cols && W >= 130 ? playerArt(app, cols, H, ctl.session?.playerView())?.lines ?? null : null;
+  const innerW = W - (foe ? artWidth(foe) + 2 : 0) - (me ? artWidth(me) + 2 : 0);
+  return { me, foe, innerW };
+}
+
+/** `lines` (drawn to the width the art leaves) between `left` and `right` art, each centred on the pane's height; every line W wide. */
+export function flankArt(lines, left, right, W, H) {
+  if (!left && !right) return lines;
+  const lw = artWidth(left), rw = artWidth(right);
+  const innerW = W - (left ? lw + 2 : 0) - (right ? rw + 2 : 0);
+  const out = lines.slice(0, H);
+  while (out.length < H) out.push('');
+  const lt = Math.max(0, Math.floor((H - (left?.length ?? 0)) / 2)), rt = Math.max(0, Math.floor((H - (right?.length ?? 0)) / 2));
+  return out.map((l, i) => `${left ? `${fit(left[i - lt] ?? '', lw)}  ` : ''}${fit(l, innerW)}${right ? `  ${right[i - rt] ?? ''}` : ''}`);
+}
+
+// ---- the stage ----------------------------------------------------------------------------------------
+
+const PLATE_PAD = 12; // columns a plate needs past its bar: the numbers after it
+const GAP = 2;        // columns between the stage's edge and a column, and between columns
+const LANE_MIN = 8;   // the gap kept open between the two sides for the glyphs that cross it
+
+/**
+ * The duel on a stage W x H (the design page's §2): you down the left with your pet beside you, the foes
+ * down the right with the one you face outermost. Under each sprite sits its plate (name, level, class or
+ * rank; HP; power), its state (a cast bar, crowd control, stealth; a row kept even when empty, so the auras
+ * never move) and its aura strip. Hits rise from the chest, a spell crosses the gap as a glyph, the floor
+ * runs under the plates and the ability bar closes the scene. Returns H lines each W wide, or null when the rows leave
+ * the sprites no room (the frames list draws instead).
+ */
+function duelStage(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 barW = W >= 140 ? 30 : W >= 110 ? 24 : 18;
+  const plateW = barW + PLATE_PAD;
+  const auraH = icons ? 3 : 1, stateH = icons ? 2 : 1;
+  // Rows the scene keeps whatever the sprites get: the plate (3), the state rows, the auras and the floor.
+  // The state rows are there idle or casting, so a cast never moves the auras under them; with icons they are
+  // two, the spell's icon beside its name and the trail of casts before it (castRows). The ability bar goes
+  // when rows are short, and only under auto-play.
+  const barLines = ctl.abilityRows(W, W >= 140 ? 6 : 4, { live: !inline });
+  let barRows = barLines.length;
+  const fixed = () => 3 + stateH + auraH + 1 + barRows;
+  if (H - fixed() < 4 && ctl.auto) barRows = 0;
+  const artRows = H - fixed();
+  if (artRows < 4) return null;
+  const rankOf = (v) => { const c = v.creatureEntry != null ? app.ds.creature(v.creatureEntry) : null; return c?.rank ?? c?.scaling?.rank ?? 0; };
+  const creatureLines = (v, c, r) => (v.creatureEntry != null ? creatureArt(app.ds.creature(v.creatureEntry)?.displayId, c, r) : null);
+  /** One column of the stage: the unit, its box, its art and its plate; placed by x later. */
+  const column = (v, key, size, artOf, o) => {
+    const box = SIZES[size];
+    const art = artOf(box[0], Math.min(box[1], artRows));
+    const pw = (o.barW ?? barW) + PLATE_PAD;
+    return { v, key, art, aw: artWidth(art), cw: Math.max(pw, art ? artWidth(art) : 0), plateW: pw, ...o, barW: o.barW ?? barW };
+  };
+  const cols = [];
+  const you = column(pv, 'player', youSize(W), (c, r) => playerArt(app, c, r, pv)?.lines ?? null, { isPlayer: true });
+  const margin = Math.max(GAP, Math.floor(W / 16)); // the actors stand a little in from the edges
+  you.x = margin; cols.push(you);
+  let left = you.x + you.cw + GAP, right = W - margin, petCol = null;
+  if (pet) {
+    const c = column(pet, pet.side ?? pet.name, 'xs', (cc, r) => creatureLines(pet, cc, r), { friend: true, small: true, barW: 10 });
+    if (left + c.cw + LANE_MIN + plateW <= right) { c.x = left; left += c.cw + GAP; cols.push(c); petCol = c; }
+  }
+  // The other foes stand at the far edge. You and the foe you face stand where you really are: the engine
+  // keeps every unit's position in yards, so the gap between you is the real one, scaled from melee contact
+  // to the widest it has been this fight. Whoever walked closes it on screen: a melee character runs up to
+  // the mob (it stands where it was pulled), a mob chases the caster that hit it. Nobody slides who did not move.
+  let hidden = 0;
+  for (const e of s.enemiesView().filter((x) => x !== focus)) {
+    const c = column(e, e.side ?? e.name, 's', (cc, r) => creatureLines(e, cc, r), { small: true, barW: 12, rank: rankOf(e) });
+    if (right - c.cw - LANE_MIN - plateW < left) { hidden++; continue; }
+    c.x = right - c.cw; right = c.x - GAP; cols.push(c);
+  }
+  const foe = focus ? column(focus, focus.side ?? focus.name, foeSize(W, rankOf(focus)), (c, r) => creatureLines(focus, c, r), { focused: true, rank: rankOf(focus) }) : null;
+  if (foe) {
+    const near = left + LANE_MIN, far = Math.max(near, right - foe.cw);
+    const pP = s.unitPosYd?.('player'), pF = s.unitPosYd?.(focus.side);
+    const yd = combatDistanceYd(pP, pF);
+    mem.openYd = Math.max(mem.openYd ?? DEFAULT_OPEN_YD, yd ?? 0);
+    mem.openPos ??= new Map();
+    if (pP && !mem.openPos.has('player')) mem.openPos.set('player', { ...pP });
+    if (pF && !mem.openPos.has(foe.key)) mem.openPos.set(foe.key, { ...pF });
+    const walkedP = combatDistanceYd(mem.openPos.get('player'), pP) ?? 0, walkedF = combatDistanceYd(mem.openPos.get(foe.key), pF) ?? 0;
+    const share = walkedP + walkedF > 0 ? walkedP / (walkedP + walkedF) : 1; // your share of the closing; yours when nobody has walked yet
+    const frac = yd == null ? 1 : Math.max(0, Math.min(1, (yd - MELEE_CONTACT_YD) / Math.max(1, mem.openYd - MELEE_CONTACT_YD)));
+    const closing = Math.round((1 - frac) * (far - near)), yours = Math.round(closing * share);
+    for (const col of cols) if (col.isPlayer || col.friend) col.x += yours; // your pet walks beside you
+    foe.x = far - (closing - yours); foe.yd = yd;
+    // The pet has its own yards too: it runs out from your side to the foe and back. Its distance to the
+    // foe, from your gap down to melee contact, slides it from its place beside you to just in front of
+    // the foe's plate (the lane is at least LANE_MIN wide, so the two never overlap).
+    if (petCol && yd != null) {
+      const dPet = combatDistanceYd(s.unitPosYd?.(petCol.key), pF);
+      if (dPet != null) {
+        const out = Math.max(0, Math.min(1, (yd - dPet) / Math.max(1, yd - MELEE_CONTACT_YD)));
+        petCol.x += Math.round(out * Math.max(0, foe.x - GAP - (petCol.x + petCol.cw)));
+      }
+    }
+    cols.push(foe);
+  }
+  const zone = artRows, stateRow = zone + 3, auraTop = stateRow + stateH, floorRow = auraTop + auraH, 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 the plate, centred over it; the plate hangs under its feet. A swing lunges it two
+    // columns toward the other side for a moment.
+    if (col.art) {
+      const lunge = now - (mem.lunge?.get(col.key) ?? -Infinity) < LUNGE_MS ? (col.isPlayer || 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, plateLines(app, v, { ...col, dead }));
+    // Your cast sits where the foe's does: under the power bar, in the state rows every plate keeps.
+    const recent = mem.casts.get(col.key);
+    const slot = dead ? [''] : icons ? castRows(app, v, recent, now, col.plateW) : [castSlot(v, now, recent)];
+    if (slot[0] || slot[1]) putLines(c, col.x, stateRow, slot.map((l) => cut(l, col.plateW)));
+    else if (col === foe && hidden) put(c, col.x, stateRow, dim(`+${hidden} more in the fight`));
+    if (!col.small && !dead) putLines(c, col.x, auraTop, auraRows(app, mem, v, col.key, col.plateW, icons));
+    // Hits and heals rise from the chest, the newest lowest; without art they sit beside the name.
+    const pops = (mem.pops.get(col.key) ?? []).filter((p) => now - p.t < POP_MS);
+    pops.forEach((p, i) => {
+      const text = now - p.t > POP_MS / 2 ? dim(p.text) : p.text;
+      // On the sprite's inner shoulder, spilling toward the middle of the stage, so the body stays readable.
+      if (col.art) put(c, col.isPlayer || col.friend ? col.ax + col.aw - 1 : col.ax + 1 - vis(text), col.top + Math.floor(col.art.length / 3) - Math.floor((now - p.t) / POP_RISE_MS) - i, text);
+      else put(c, col.x + col.plateW + 1 + i * (vis(text) + 1), zone, text);
+    });
+  }
+  // The engine's missiles in flight cross the gap as glyphs (putMissiles), on a row through the sprites' chests.
+  putMissiles(c, s, cols, now, Math.max(0, zone - 1 - Math.floor(Math.min(artRows, 14) / 2)), (id) => app.ds.spell(id)?.name);
+  c[floorRow] = floorLine(W, gray);
+  if (barRows) putLines(c, 0, barTop, barLines);
+  const out = c.map((l) => fit(l, W));
+  // The open lane between your side's sprites and the faced foe's, for what is drawn over the stage later
+  // (the drops after a win, putLootToasts).
+  if (foe) out.lane = { left: Math.max(...cols.filter((x) => x.isPlayer || x.friend).map((x) => (x.art ? x.ax + x.aw : x.x))), right: foe.art ? foe.ax : foe.x, rows: zone };
+  return out;
 }
 
-/** The player's frame from the character between fights, shaped like the in-fight one so it stays put. */
-function idlePlayerFrame(app, mem, W) {
-  const ch = app.ch, ds = app.ds, now = Date.now();
-  const buffs = (ch.activeAuras ?? (ch.activeBuffs ?? []).map((spellId) => ({ spellId })))
-    .filter((a) => a.expiresAt == null || a.expiresAt > now)
-    .map((a) => ({ spellId: a.spellId, ...(a.expiresAt != null ? { remainingMs: a.expiresAt - now } : {}) }));
+/** The player's frame between fights: one line of name, level and bars. No auras here, the fight shows those. */
+export function idlePlayerFrame(app, mem, W) {
+  const ch = app.ch, ds = app.ds;
   const v = {
     name: ch.name, level: ch.level, hp: ch.health, maxHp: maxHealth(ch, ds), power: ch.power, maxPower: maxPower(ch, ds),
-    powerType: powerType(ch), casting: null, controlled: null, buffs, debuffs: [],
+    powerType: powerType(ch), casting: null, controlled: null, buffs: [], debuffs: [],
   };
-  return unitFrame(app, mem, v, W, 0, true);
+  return unitFrame(app, mem, v, W, 0, true, false, { compact: true });
 }
 
 export const AUTOPILOT_STEP_MS = 350;
@@ -506,19 +856,32 @@ const REST_SECONDS_PER_STEP = 10; // a rest step folds this much regen in; the l
 
 /** Watchable autopilot: the planner picks a step every few hundred ms; a fight step runs as a live session
  *  (the same frames and combat log as pressing Enter on a creature) and the planner waits for it to end.
- *  Esc stops the run; in a fight Esc runs away and stops it. `quest` pins the run to that quest (Do Quest). */
-export function startAutopilot(app, steps = 200, farmQuery, quest) {
+ *  Esc stops the run; in a fight Esc runs away and stops it. `quest` pins the run to that quest (Do Quest).
+ *  No step cap unless `steps` asks for one: the Stop after setting ends the run, in real minutes. */
+export function startAutopilot(app, steps = Infinity, farmQuery, quest) {
   if (app.fight || app.auto) return;
   const what = farmQuery ? `farming ${farmQuery}` : quest != null ? `doing ${app.ds.quest(quest)?.title ?? `quest ${quest}`}` : 'questing';
   const ctl = {
-    timer: null, fights: 0, kills: 0, xp: 0, restSteps: 0, status: '', browsing: false, frames: newFrameMemory(app),
+    timer: null, fights: 0, kills: 0, xp: 0, deaths: 0, items: 0, restSteps: 0, status: '', browsing: false, paused: false, frames: newFrameMemory(app),
+    // What the run strip, the run panel, the Run pane and the end card read (tuiAutopilot.mjs).
+    what, steps, farmQuery, quest, startedAt: Date.now(), gold0: app.ch.gold, level0: app.ch.level, ledger: [], turnedIn: [], ended: null,
+    get planner() { return ap; },
+    /** One row in the Run pane per planner step; a rest keeps updating its one row. */
+    note(kind, body, { replace = false } = {}) {
+      const last = this.ledger[this.ledger.length - 1];
+      if (replace && last && last.kind === kind) { last.n = ap.step; last.body = body; return last; }
+      const row = { n: ap.step, kind, body };
+      this.ledger.push(row);
+      if (this.ledger.length > 500) this.ledger.splice(0, this.ledger.length - 500);
+      return row;
+    },
     /** One planner step (the check script calls this by hand). Returns false when the run is over. */
     step() {
-      if (app.fight) return true; // the live fight calls back through onEnd
+      if (app.fight || this.paused) return true; // the live fight calls back through onEnd
       let line;
       try { line = ap.next(); }
       catch (err) { app.say(red(`autopilot error: ${err.message}`)); line = null; }
-      if (line == null) { this.stop(); app.say(`${cyan('Autopilot done.')} ${ap.summary()} ${dim(`${this.fights} fights, ${this.kills} kills, +${this.xp} xp`)}`); app.afterAction(); return false; }
+      if (line == null) { this.end(); return false; }
       if (ap.lastKind === 'wait') {
         // One rest line that keeps updating instead of a column of them.
         this.restSteps++;
@@ -526,48 +889,64 @@ export function startAutopilot(app, steps = 200, farmQuery, quest) {
         const text = `${dim('    resting')} ${dim(`${this.restSteps * REST_SECONDS_PER_STEP} s`)}  HP ${app.hpText()}  ${app.pwText()}`;
         if (this.restSteps > 1 && app.log.length && app.log[app.log.length - 1].includes('resting')) app.log[app.log.length - 1] = text;
         else app.say(text);
+        this.note('wait', `rest ${this.restSteps * REST_SECONDS_PER_STEP} s   ${dim(`HP ${app.hpText()}   ${app.pwText()}`)}`, { replace: true });
       } else {
         this.restSteps = 0;
-        if (line) { app.say(line); this.status = strip(line).trim(); }
+        if (line) {
+          app.say(line);
+          const body = stepBody(line), plain = strip(body).trim();
+          this.status = plain;
+          const kind = /^skipping /.test(plain) ? 'skip' : /^back to life/.test(plain) ? 'dead' : /^autopilot stopped/.test(plain) ? 'stop' : ap.lastKind ?? 'note';
+          this.note(kind, body);
+          if (kind === 'turnin' && /^turned in /.test(plain)) this.turnedIn.push(plain.slice('turned in '.length));
+        }
       }
       // The step line already tells the story; the engine's activity rows for it would repeat it.
       app.lastActivity = app.g.state.activity[0] ?? null;
       app.renderSoon();
       return true;
     },
-    stop() { if (this.timer) app.term.clearInterval(this.timer); this.timer = null; if (app.auto === this) app.auto = null; void app.persist(); app.render(); },
-    /** Between fights: the same top rows as a fight (header, player frame), so fast runs don't flash the menus. */
-    render(W, H) {
-      const speed = app.fightSpeed ?? 1;
-      const lines = [
-        ` ${bold('Autopilot')}   ${dim(what)}   ${dim(`${this.fights} fights  ${this.kills} kills  +${this.xp} xp`)}${speed !== 1 ? dim(`  ${speed}x`) : ''}`,
-        '',
-        ...idlePlayerFrame(app, this.frames, W),
-        '',
-        dim(` ${cut(this.status || 'planning the next step', W - 2)}`),
-      ];
-      return lines.slice(0, H);
+    stop() { if (this.timer) app.term.clearInterval(this.timer); this.timer = null; if (app.auto === this) { app.auto = null; app.lastRun = this; } void app.persist(); app.render(); },
+    /** The run is over (the planner stopped, or `why` says the player did): the log line, then the end card
+     *  once there is something to sum up. */
+    end(why) {
+      this.ended = why ?? null;
+      this.stop();
+      app.say(`${cyan(why ? 'Autopilot stopped.' : 'Autopilot done.')} ${dim(stopText(app, this))}  ${ap.summary()} ${dim(`${this.fights} fights, ${this.kills} kills, +${this.xp} xp`)}`);
+      if (!app.closed && (this.fights > 0 || ap.step > 3)) { app.stack = []; app.push(endCard(app, this)); }
+      app.afterAction();
     },
+    /** Between fights: the run panel (tuiAutopilot.mjs) fills the middle. */
+    render(W, H) { return runPanelLines(app, this, W, H); },
   };
   const liveFight = (step, settle) => {
     const c = app.ds.creature(step.creatureEntry);
+    const name = c?.name ?? String(step.creatureEntry);
     const why = () => fightReason(app, step);
     const reason = why();
-    ctl.status = `${step.forQuest ? 'quest target' : 'hunting'}: ${c?.name ?? step.creatureEntry}${reason && step.forQuest ? `  ${reason.short}` : ''}`;
+    ctl.status = `${step.forQuest ? 'quest target' : 'hunting'}: ${name}${reason && step.forQuest ? `  ${reason.short}` : ''}`;
     app.say(`${dim(String(ap.step).padStart(3) + '.')} ${ctl.status}`);
+    const row = ctl.note('fight', `${fit(name, 24)} ${cyan('fighting')}${reason ? `   ${dim(reason.short)}` : ''}`);
     const f = startFight(app, step.creatureEntry, {
       label: 'autopilot', why,
       onEnd: (r) => {
-        if (!r) { app.say(yellow('Autopilot stopped: you ran.')); ctl.stop(); return; }
+        ctl.watchFight = false; // w watches one fight; the next one draws inside the panel again
+        if (!r) { row.body = `${fit(name, 24)} ${yellow('ran')}`; ctl.end('you ran'); return; }
+        const skippedBefore = ap.skipped.length;
         settle(r);
-        ctl.status = `${r.outcome === 'win' ? 'beat' : r.outcome === 'defeat' ? 'lost to' : 'stalemate with'} ${c?.name ?? step.creatureEntry}`;
+        ctl.status = `${r.outcome === 'win' ? 'beat' : r.outcome === 'defeat' ? 'lost to' : 'stalemate with'} ${name}`;
         ctl.fights++;
-        if (r.outcome === 'win') { ctl.kills += r.killCount ?? 1; ctl.xp += r.xpGained; }
+        if (r.outcome === 'win') { ctl.kills += r.killCount ?? 1; ctl.xp += r.xpGained; ctl.items += r.loot.reduce((n, d) => n + (d.count ?? 1), 0); }
+        if (r.outcome === 'defeat') ctl.deaths++;
+        const outcome = r.outcome === 'win' ? green('won') : r.outcome === 'defeat' ? red('lost') : yellow('stalemate');
+        const loot = r.loot.map((d) => `${app.itemLabel(d.item)}${d.count > 1 ? ` x${d.count}` : ''}`).join(', ');
+        row.body = `${fit(name, 24)} ${outcome}  ${dim(`${(r.result.durationMs / 1000).toFixed(1)} s`)}${r.xpGained ? `   ${yellow(`+${r.xpGained} xp`)}` : ''}${loot ? `   ${loot}` : ''}`;
+        for (const entry of ap.skipped.slice(skippedBefore)) ctl.note('skip', `skipped ${app.ds.quest(entry)?.title ?? `quest ${entry}`}   ${dim(`died ${ap.questDefeats(entry)} times`)}`);
       },
     });
     return f.ok ? f : { ok: false, reason: f.reason };
   };
-  const ap = app.cmds.createAutopilot(`${steps}${farmQuery ? ` farm ${farmQuery}` : ''}`, { liveFight, quest });
+  const ap = app.cmds.createAutopilot(farmQuery ? `farm ${farmQuery}` : '', { liveFight, quest, maxSteps: steps, clock: () => Date.now() - ctl.startedAt });
   if (ap.error) { app.say(red(ap.error)); app.render(); return; }
   app.say(cyan(`Autopilot: ${what}, fights play live. Esc stops it.`));
   app.auto = ctl;