quoxcli 0.3.1 → 0.5.0

package/lib/quoxon/render.js

@@ -2,6 +2,7 @@
  * QUOXON view layer (Ink 6, React.createElement). Width-aware everywhere,
  * horizontal rules only (no side borders), semantic colour, mono-safe.
  */
+import { toolCardLines } from './toolCards.js';
 import React from 'react';
 import chalk from 'chalk';
 import { Box, Text, useStdout } from 'ink';
@@ -23,11 +24,13 @@ import { dividerRuleEl } from './dividerRule.js';
 import * as themeNs from './theme.js';
 import { qArt, qArtFrame } from '../core/banner.js';
 import { cmd } from './palette.js';
-import { themeRole, rowParts, clipParts, labelWidth } from './rows.js';
+import { themeRole, layoutRows, expandLines, limitGrid } from './rows.js';
+import { wrapHang } from './objects/model.js';
 import { Markdown, wrapCell, markdownRows, wrapRows, WText, Heading } from './markdown.js';
 import { parseAsk, keysLabel, askText } from './ask.js';
 import { parseAsideNote } from './asideView.js';
 import { formatSlotBody, inlineable, codeRows } from './slotFormat.js';
+import { BACKGROUND_NOTE } from './backgroundWork.js';
 import { termRows } from './term.js';
 import { cellWidth, ambiguousWide } from './cells.js';
 import { welcomeModel } from './welcome.js';
@@ -41,6 +44,8 @@ import { CLIPS as DRAGON_CLIPS, clipCells } from './qdragonScenes.js';
 import { dragonLayout } from './qdragon.js';
 import { ObjectView } from './objects/view.js';
 import { aoclLineSegs, aoclTableLines } from './aocl.js';
+import { cardLines, wrapText, loopPinned } from './loopCard.js';
+import { orgLabel } from './orgLabel.js';
 export { COLORS, MODE_COLOR, MIN_COLS, clampCols, clip, reducedMotion };
 
 // ---- working indicator (the one animated line) -------------------------------------------------
@@ -254,15 +259,24 @@ export function ToolRow({ b, cols, fx = null, pulse = null, ignite = 0 }) {
   const running = b.status === 'running';
   // the facts after the result: duration, then witnessing state
   let after = [];
+  let envExtra = null; // an id never shares a clipped line: when it does not fit it wraps onto its own line(s)
   if (!running && b.receipt) {
     const v = b.receipt.verified;
     after = [dur, v === true ? 'witnessed' : v === false ? 'unverified' : 'verification pending', `receipt ward:${b.receipt.ward_seq}`].filter(Boolean);
+    if (b.envelopeId) envExtra = `envelope ${b.envelopeId}`;
   } else if (!running) {
-    after = [dur, b.envelopeId ? `envelope ${String(b.envelopeId).slice(0, 8)}` : '', b.envelopeId ? 'witnessing pending' : ''].filter(Boolean);
+    after = [dur, b.envelopeId ? `envelope ${b.envelopeId}` : '', b.envelopeId ? 'witnessing pending' : ''].filter(Boolean);
   }
   const result = running ? '' : deleg && deleg.result ? deleg.result : (b.resultSummary ? `${b.status === 'unknown' ? 'unknown: ' : ''}${b.resultSummary}` : b.status);
   const bodyStr = clipWords(body0, running || !result ? room : Math.max(6, Math.min(gw(body0), Math.floor(room / 2))));
   const tailRoom = room - gw(bodyStr) - 3;
+  if (!running && !b.receipt && b.envelopeId && gw(after.join(' · ')) + 3 > Math.max(0, tailRoom)) {
+    envExtra = `envelope ${b.envelopeId} · witnessing pending`;
+    after = after.filter(f => !/^envelope /.test(f) && f !== 'witnessing pending');
+  }
+  const extra = envExtra ? wrapHang(envExtra, Math.max(12, cols - 6), 2).map((l, i) => h(Text, { key: `e${i}`, color: c('muted') }, `    ${l}`)) : [];
+  if (!running) extra.push(...toolCardLines(b, cols).map((l, i) => h(Text, { key: `c${i}`, color: c(l.head ? 'muted' : 'prose'), wrap: 'truncate-end' }, `    ${l.text}`))); // HITL-INBOX-BAR: a list answer as a table
+  const withExtra = (node) => (extra.length ? h(Box, { flexDirection: 'column' }, node, ...extra) : node);
   let tail = '';
   if (!running && tailRoom > 0) {
     const facts = after.join(' · ');
@@ -285,9 +299,9 @@ export function ToolRow({ b, cols, fx = null, pulse = null, ignite = 0 }) {
   if (fx?.settle != null && !running) {
     const flash = fx.settle < 0.12 && !mono();
     if (flash) head[1] = { t: glyph, color: '#ffffff', bold: true };
-    return h(Box, null, ...fxNodes(head, null), ...fxNodes(tailSegs, { e: fx.settle, timing: TIMING.settle }, 7));
+    return withExtra(h(Box, null, ...fxNodes(head, null), ...fxNodes(tailSegs, { e: fx.settle, timing: TIMING.settle }, 7)));
   }
-  return h(Box, null, ...fxNodes([...head, ...tailSegs], fx, 3));
+  return withExtra(h(Box, null, ...fxNodes([...head, ...tailSegs], fx, 3)));
 }
 
 /** Compact protocol detail: drop the quox.chat./quox. intent prefix and keep only the tail of long correlation ids, so the line fits instead of clipping. */
@@ -381,6 +395,7 @@ export function HelpView({ model, cols }) {
   const keyW = Math.min(24, Math.max(...model.filter(m => m.key).map(m => [...m.key].length), 8) + 2);
   return h(Box, { flexDirection: 'column', marginTop: 1, width: cols }, ...model.map((m, i) => {
     if (m.kind === 'gap') return h(Text, { key: i }, ' ');
+    if (m.kind === 'subhead') return h(Heading, { key: i, text: m.text });
     if (m.kind === 'head') return m.dim ? h(Text, { key: i, bold: true, color: c('muted') }, m.text) : h(Heading, { key: i, text: m.text });
     if (m.kind === 'row' || (m.kind === 'dim' && m.key)) {
       const dim = m.kind === 'dim';
@@ -511,6 +526,7 @@ const GROUP = { tool: 'tools', trace: 'tools', note: 'notice', error: 'notice',
 const FOOTER = new Set(['aocl', 'summary']);
 export function historyGap(prev, item, rows = null) {
   if (!item || SELF_SPACED.has(item.kind)) return 0;
+  if (item.kind === 'loopcard' && loopPinned(item.card)) return 0; // drawn above the composer, not here
   if (item.kind === 'user') return 1;
   if (!prev) return item.kind === 'text' ? 1 : 0;
   if (rows != null && rows < 20) return 0;
@@ -546,6 +562,7 @@ export function HistoryItem({ item, cols, live = false, fx = null, pulse = null,
     case 'error': return h(ErrorView, { item, cols, fx });
     case 'note': return h(NoteView, { item, cols, fx });
     case 'slotmsg': return h(SlotMsgView, { item, cols });
+    case 'loopcard': return loopPinned(item.card) ? null : h(LoopCardView, { item, cols });
     case 'tip': return h(TipView, { item, cols });
     case 'whatsnew': return h(WhatsNewView, { item, cols });
     case 'bcard': return h(BroadcastCardView, { item, cols });
@@ -572,7 +589,10 @@ export function noteLines(text, width) {
 }
 /** A note line that is one bare URL longer than the row: never hard-wrapped (a break inside a token breaks copy and click). */
 const longUrl = (l, width) => { const t = stripMarks(l); return /^https?:\/\/\S+$/.test(t) && graphemes(t).length > width; };
-export const noteRows = (text, cols, tone) => noteLines(toneText(text, tone), cols - 2).reduce((n, l) => n + (longUrl(l, cols - 2) ? 1 : wrapRows(stripMarks(l), cols - 2)), 0);
+/** A note line that opens with a status glyph and wraps hangs under its text, not under the glyph (the glyph keeps its own 2 cells). */
+const GLYPH_LEAD = /^(?:▶|✔|✖|⚠|∞) /u;
+const hangs = (l, width) => GLYPH_LEAD.test(l) && !longUrl(l, width) && wrapRows(stripMarks(l), width) > 1;
+export const noteRows = (text, cols, tone) => noteLines(toneText(text, tone), cols - 2).reduce((n, l) => n + (longUrl(l, cols - 2) ? 1 : hangs(l, cols - 2) ? wrapRows(stripMarks(l).slice(2), cols - 4) : wrapRows(stripMarks(l), cols - 2)), 0);
 
 /**
  * Z2H-7B3: a failure message can be several lines (what ran, what did not, the advice). Every line shows,
@@ -618,6 +638,8 @@ function NoteView({ item, cols, fx = null }) {
   // While it reveals, a line that fits decodes in; a line that wraps keeps plain wrapping (never mis-measured).
   return h(Box, { paddingLeft: 2, flexDirection: 'column', width: cols }, ...noteLines(text, cols - 2).map((l, i) => longUrl(l, cols - 2)
     ? h(Box, { key: i, width: graphemes(stripMarks(l)).length, flexShrink: 0 }, h(Text, { color: c('link'), wrap: 'truncate-end' }, stripMarks(l)))
+    : hangs(l, cols - 2)
+    ? h(Box, { key: i }, h(Box, { width: 2, flexShrink: 0 }, h(Text, null, ...runs(paintLine(l.slice(0, 2), item.tone)))), h(Box, { flexGrow: 1, flexShrink: 1 }, h(WText, { color, bold: item.tone === 'ask' }, ...runs(paintLine(l.slice(2), item.tone)))))
     : (fx && wrapRows(stripMarks(l), cols - 2) === 1
     ? h(Text, { key: i }, ...fxNodes(paintLine(l, item.tone).map(r => (typeof r === 'string' ? { t: r, color: 'prose' } : { t: r.text, color: r.role || 'prose' })), { e: fx.e - i * 0.05, timing: fx.timing }, 17 + i))
     : h(WText, { key: i, color, bold: item.tone === 'ask' }, ...runs(paintLine(l, item.tone))))));
@@ -628,6 +650,19 @@ function NoteView({ item, cols, fx = null }) {
  * outgoing "→ quox2 04:56 hello ✔" (sky: you). A file shows its name, three lines and a /slot log pointer;
  * /slot log prints the whole file (`full`).
  */
+/** QLOOP-LIVE: the live loop card. The card object is updated in place by loopCards.js; this reads it on every draw. */
+export const loopCardLines = (card, cols, now = Date.now(), hint = false) => cardLines(card.state, { cols, now, frame: Math.floor(now / 250), expanded: card.expanded, focused: card.focused, confirm: card.confirm, hint });
+const cardMemo = new WeakMap(); // card -> { key, lines }: re-laid-out only when what it draws changed
+export function LoopCardView({ item, cols, pinned = false }) {
+  const card = item.card, now = Date.now(), st = card.state;
+  const key = [cols, pinned, card.focused, card.expanded, card.confirm, Math.floor(now / 250), Math.floor(now / 1000), st, st.observed?.length, st.spool?.length].map(String).join('|');
+  let hit = cardMemo.get(card);
+  if (!hit || hit.st !== st || hit.key !== key) { hit = { st, key, lines: loopCardLines(card, cols, now, pinned) }; cardMemo.set(card, hit); }
+  const lines = hit.lines;
+  return h(Box, { flexDirection: 'column', paddingLeft: 2, width: cols },
+    ...lines.map((rs, i) => h(Text, { key: i }, ...rs.map((r, j) => h(Text, { key: j, color: c(r.role), bold: r.bold || undefined }, r.t)))));
+}
+
 function SlotMsgView({ item, cols }) {
   const l = item.line || {};
   if (l.roomLine) { // QUOXON-ROOMS: `#group-chat  QUOXON: text`, a stable colour per sender
@@ -699,10 +734,12 @@ function TipView({ item, cols }) {
   const body = wrapPlain(item.text, inner).map((l, i) => row(`t${i}`, [h(Text, { key: 0, color: c('prose') }, l)], [...l].length));
   const cmdText = clip(item.cmd, inner - 5);
   const tryRow = row('try', [h(Text, { key: 0, color: c('prose'), bold: true }, 'Try: '), h(Text, { key: 1, color: c('command') }, cmdText)], 5 + [...cmdText].length);
-  const hintRow = row('hint', runs(paintRuns(TIP_HINT, 'quiet')), [...stripMarks(TIP_HINT)].length);
+  const hintPlain = stripMarks(TIP_HINT); // too long for the frame: wrap it inside, never let the terminal wrap the border
+  const hintRows = [...hintPlain].length <= inner ? [row('hint', runs(paintRuns(TIP_HINT, 'quiet')), [...hintPlain].length)]
+    : wrapPlain(hintPlain, inner).map((l, i) => row(`hint${i}`, [h(Text, { key: 0, color: c('quiet') }, l)], [...l].length));
   return h(Box, { paddingLeft: 2, flexDirection: 'column' },
     h(Text, edge, '╭─ ', h(Text, { bold: true }, 'Tip'), ' ', '─'.repeat(W - 8), '╮'),
-    ...body, tryRow, hintRow,
+    ...body, tryRow, ...hintRows,
     h(Text, edge, '╰', '─'.repeat(W - 2), '╯'));
 }
 
@@ -730,9 +767,13 @@ function WhatsNewView({ item, cols }) {
     return out;
   });
   if (more) rows.push(row('more', [h(Text, { key: 0, color: c('prose') }, lead), h(Text, { key: 1, color: c('prose'), bold: true }, 'Try: '), h(Text, { key: 2, color: c('command') }, '/whatsnew')], [...more].length));
+  // a head that does not fit in the top edge (the compact "N new commands (...)" line at a narrow width) goes inside the
+  // frame, wrapped, under a bare top edge: the terminal must never be the one to wrap a border row
+  const headFits = [...HEAD].length <= W - 6;
+  if (!headFits) rows.unshift(...wrapPlain(HEAD, inner).map((l, i) => row(`h${i}`, [h(Text, { key: 0, color: c('prose'), bold: true }, l)], [...l].length)));
   if (item.pad) { rows.unshift(row('p0', [], 0)); rows.push(row('p1', [], 0)); }
   return h(Box, { paddingLeft: 2, flexDirection: 'column' },
-    h(Text, edge, '╭─ ', h(Text, { bold: true }, HEAD), ' ', '─'.repeat(Math.max(1, W - 5 - HEAD.length)), '╮'),
+    headFits ? h(Text, edge, '╭─ ', h(Text, { bold: true }, HEAD), ' ', '─'.repeat(W - 5 - [...HEAD].length), '╮') : h(Text, edge, '╭', '─'.repeat(W - 2), '╮'),
     ...rows,
     h(Text, edge, '╰', '─'.repeat(W - 2), '╯'));
 }
@@ -770,6 +811,8 @@ export function liveRows(blocks, cols) {
       case 'summary': return n + noteLines(b.text, cols - 4).length;
       case 'error': return n + errorRows(b.text, cols);
       case 'slotmsg': return n + (b.line?.run && !b.line.run.settled ? 9 + Math.ceil(String(b.line.run.cmd || '').length / Math.max(10, cols - 8)) : 1); // ASK-SETTLE: an armed run card is held live
+      case 'tool': return n + 1 + (b.status === 'running' ? 0 : toolCardLines(b, cols).length);
+      case 'loopcard': return n + (loopPinned(b.card) ? 0 : 1 + loopCardLines(b.card, cols).length);
       default: return n + 1;
     }
   }, 0);
@@ -790,10 +833,11 @@ export const Grad = ({ text }) => {
  * never wraps: full, then a shortened provider (`anth claude-sonnet-5-5`), then the model alone, then the
  * model clipped. Leaves at least four rule cells on the left. Below 30 cols, or no model: ''.
  */
-export function modelRuleLabel(cols, model) {
+export function modelRuleLabel(cols, model, reserve = 0) {
   const full = String(model || '').trim();
   if (!full || cols < 30) return '';
-  const room = cols - 7; // ' label ' + one trailing dash + four leading dashes
+  const room = cols - 7 - reserve; // ' label ' + one trailing dash + four leading dashes (+ the approvals indicator)
+  if (reserve && room < 6) return '';
   const fits = (t) => cellWidth(t) <= room; // cells under the ambiguous-width policy (cells.js)
   if (fits(full)) return full;
   const segs = full.split(' · ');
@@ -803,7 +847,43 @@ export function modelRuleLabel(cols, model) {
   const provider = segs.length > 1 ? segs[0] : words.length > 1 ? words[0] : '';
   if (provider) { const short = `${provider.slice(0, 4)} ${name}`; if (fits(short)) return short; }
   if (fits(name)) return name;
-  return clip(name, room);
+  return reserve ? '' : clip(name, room); // with the approvals indicator the model is dropped before the indicator is cut
+}
+
+/** Pure: a failed approvals poll goes stale (footer `?`) only after 3 consecutive misses or 60 s without a good read. */
+export function approvalsPollStale({ fails, lastOkAt, now }) {
+  if (!(fails > 0)) return false;
+  return fails >= 3 || (typeof lastOkAt === 'number' && now - lastOkAt > 60000);
+}
+
+/**
+ * Pure: the permanent approvals indicator on the bottom rule. `a` = { count, error, signedOut }.
+ * Never a false 0: signed out, an unreachable inbox, or a count not read yet is `approvals ?` (warn).
+ */
+export function approvalsIndicator(a) {
+  if (!a) return null;
+  const n = a.count;
+  if (!a.signedOut && a.error && a.slow) return { text: 'approvals ? (server slow)', role: 'warn' }; // sustained failure, never an all-clear
+  if (a.signedOut || a.error || typeof n !== 'number') return { text: 'approvals ?', role: 'warn' };
+  // Never an all-clear next to outstanding items or an unseen source: scope the claim to approvals and say what else is open.
+  const out = Number(a.outstanding) || 0, blind = Number(a.blind) || 0;
+  if (n === 0 && (out > 0 || blind > 0)) {
+    const more = [out > 0 ? `${out} other item${out === 1 ? '' : 's'} open` : null, blind > 0 ? `can't see ${blind} source${blind === 1 ? '' : 's'}` : null].filter(Boolean).join(' · ');
+    return { text: `no approvals in this view · ${more}`, role: 'warn' };
+  }
+  // Other orgs the user belongs to (cached counts, core/crossOrgApprovals): never an all-clear beside a waiting approval elsewhere.
+  const others = (Array.isArray(a.others) ? a.others : []).filter((o) => o && o.count > 0);
+  const elsewhere = others.reduce((t, o) => t + o.count, 0);
+  if (n === 0 && elsewhere > 0) return { text: others.length === 1 ? `⏸ ${elsewhere} in ${others[0].name} · /approvals` : `⏸ ${elsewhere} in ${others.length} other orgs · /approvals`, role: 'warn' };
+  if (n === 0) return { text: '✔ nothing waiting', role: 'ok' };
+  return { text: `⏸ ${n} approval${n === 1 ? '' : 's'} waiting${elsewhere ? ` · +${elsewhere} in ${others.length === 1 ? others[0].name : `${others.length} other orgs`}` : ''}`, role: 'warn' };
+}
+
+/** Pure: the labels for this width. The indicator sits top-left, the model bottom-right: independent of each other. */
+export function barLabels(cols, model, a) {
+  const ind = cols >= 30 ? approvalsIndicator(a) : null;
+  if (ind && cols - cellWidth(` ${ind.text} `) - 5 < 4) return { model: modelRuleLabel(cols, model), ind: null }; // no room for the whole indicator
+  return { model: modelRuleLabel(cols, model), ind };
 }
 
 /** Pure: the rule split around a right-aligned session name: `───── name ─`. Below 30 cols, or no name: plain. */
@@ -836,10 +916,23 @@ function ringString(str, rgbs, from = 0) {
  * A composer rule. `ring` (motion only, never under NO_COLOR) = { state, top }: the rule becomes half of the
  * light ring (motion/ring.js); the session name stays bright on top of it.
  */
-export const Rule = ({ cols, color, name, ring = null, labelColor = null }) => {
+export const Rule = ({ cols, color, name, ring = null, labelColor = null, extra = null }) => {
   const p = ruleParts(cols, name);
   // `labelColor` (the model on the bottom rule): its own colour, not bold, so it reads as context, not a title
   const lab = labelColor ? { color: labelColor } : null;
+  if (extra) { // TUI-BAR: the approvals indicator at the LEFT, the session name (if any) at the RIGHT: `─ ✔ nothing waiting ──── name ─`
+    const d = cellWidth('─');
+    const el = ` ${extra.text} `;
+    const nm = name ? ` ${name} ` : '';
+    const fill = '─'.repeat(Math.max(1, Math.floor((cols - cellWidth(nm) - cellWidth(el) - 2 * d) / d)));
+    const ex = { color: c(extra.role), bold: true };
+    if (ring && ring.state && ring.state.k > 0 && !mono()) {
+      const rgbs = ruleColors(cols, ring.top, ring.state, COLORS[color] || color);
+      const fl = [...fill].length, ln = [...el].length;
+      return h(Text, null, ringString('─', rgbs), h(Text, ex, el), ringString(fill, rgbs, 1 + ln), nm ? h(Text, lab || { color: c('violet'), bold: true }, nm) : null, ringString('─', rgbs, 1 + ln + fl + [...nm].length));
+    }
+    return h(Text, null, h(Text, { color: c(color) }, '─'), h(Text, ex, el), h(Text, { color: c(color) }, fill), nm ? h(Text, lab || { color: c('violet'), bold: true }, nm) : null, h(Text, { color: c(color) }, '─'));
+  }
   if (ring && ring.state && ring.state.k > 0 && !mono()) {
     const rgbs = ruleColors(cols, ring.top, ring.state, COLORS[color] || color);
     if (!p.label) return h(Text, null, ringString(p.left, rgbs));
@@ -889,7 +982,13 @@ export function endsInRule({ card = null, asks = [], background = 0, pending = [
   return Boolean(card);
 }
 
-export function Composer({ buf, cols, mode, busy, placeholder, name, model = null, ring = null, divider = null, now = 0, topRule = true }) {
+export function Composer({ buf, cols, mode, busy, placeholder, name, model = null, ring = null, divider = null, now = 0, topRule = true, approvals = null }) {
+  const bar = barLabels(cols, model, approvals);
+  // TUI-BAR (owner 2026-10-23): the indicator once, top-left; the session name top-right (it drops before the indicator
+  // is cut); the model bottom-right. The top rule is drawn whenever the indicator is, even above a card's closing rule.
+  const topExtra = bar.ind;
+  const nameRoom = topExtra ? cols - 4 - cellWidth(` ${topExtra.text} `) - 4 : cols - 8;
+  const topName = name && topExtra ? (nameRoom >= 6 ? clip(name, nameRoom) : '') : name;
   const empty = buf.text === '';
   const lines = composerLines(buf);
   const body = empty
@@ -902,10 +1001,10 @@ export function Composer({ buf, cols, mode, busy, placeholder, name, model = nul
         ? h(Text, { color: c('input') }, l.text || ' ')
         : h(Text, { color: c('input') }, l.before, h(Text, { inverse: true }, l.at), l.after)));
   return h(Box, { flexDirection: 'column', width: cols },
-    topRule ? h(Rule, { cols, color: MODE_COLOR[mode] || 'sky', name, ring: ring ? { state: ring, top: true } : null }) : null,
+    (topRule || topExtra) ? h(Rule, { cols, color: MODE_COLOR[mode] || 'sky', name: topName, extra: topExtra, labelColor: topExtra ? c('violet') : null, ring: ring ? { state: ring, top: true } : null }) : null,
     ...body,
-    (ring && divider && dividerRuleEl({ cols, label: modelRuleLabel(cols, model), divider: divider.d, now, ruleColor: c('dim'), labelColor: modelColor(model), mono: mono(), reduced: cellWidth('─') !== 1, slow: divider.slow }))
-      || h(Rule, { cols, color: 'dim', name: modelRuleLabel(cols, model), labelColor: modelColor(model), ring: ring ? { state: ring, top: false } : null }));
+    (ring && divider && dividerRuleEl({ cols, label: bar.model, extra: null, divider: divider.d, now, ruleColor: c('dim'), labelColor: modelColor(model), mono: mono(), reduced: cellWidth('─') !== 1, slow: divider.slow }))
+      || h(Rule, { cols, color: 'dim', name: bar.model, labelColor: modelColor(model), ring: ring ? { state: ring, top: false } : null }));
 }
 
 /** The model label's colour: its provider's brand colour, else the label role (never a grey). */
@@ -948,17 +1047,26 @@ export function WaitingNotice({ items = [], cols }) {
  * a rule, a bold title saying who is asking, label/value rows (what a yes does, in full, and why), then the
  * "▶ question? keys" footer in the ask colour, and a closing rule. `arming` replaces the footer until keys are live.
  */
-export function NeedsYouCard({ cols, title, rows = [], block = [], notes = [], footer, arming = null, motionE = null }) {
+/** The "▶ question? keys" line: the glyph keeps its own 2 cells and a wrapped question hangs under its text, not under the glyph. */
+const HANG_ASK = /^▶ /;
+export function AskFoot({ footer }) {
+  const f = String(footer ?? '');
+  if (!HANG_ASK.test(f)) return h(Text, { color: c('prose'), bold: true, wrap: 'wrap' }, '  ', ...runs(paintLine(f, 'ask')));
+  return h(Box, { paddingLeft: 2 }, h(Box, { width: 2, flexShrink: 0 }, h(Text, { bold: true }, ...runs(paintLine('▶ ', 'ask')))), h(Box, { flexGrow: 1, flexShrink: 1 }, h(Text, { color: c('prose'), bold: true, wrap: 'wrap' }, ...runs(paintLine(f.slice(2), 'ask')))));
+}
+const footRows = (footer, cols) => (HANG_ASK.test(footer) ? wrapRows(footer.slice(2), cols - 4) : wrapRows(footer, cols - 2));
+export function NeedsYouCard({ cols, title, rows = [], block = [], notes = [], footer, arming = null, motionE = null, lead = null }) {
   const e = motionE;
   return h(Box, { flexDirection: 'column', width: cols, marginTop: 1 },
     e == null ? h(Rule, { cols, color: 'warn' }) : h(DrawRule, { cols, color: 'warn', e }),
     e == null ? h(Text, { color: c('warn'), bold: true, wrap: 'wrap' }, title) : h(Text, null, ...fxNodes([{ t: title, color: 'warn', bold: true }], { e: e - 0.1, timing: TIMING.title }, 23)),
+    lead ? h(Text, { color: c('warn'), bold: true, wrap: 'wrap' }, `  ${lead}`) : null, // a destructive approval leads with what it deletes
     // APPROVAL-WHAT: wrap at word boundaries under the label instead of cutting the action or target off
-    ...rows.flatMap(([k, v]) => wrapPlain(String(v), Math.max(10, cols - 10)).slice(0, 8).map((line, i) => h(Text, { key: `${k}${i}`, color: c('text') }, '  ', h(Text, { color: c('label') }, (i ? '' : k).padEnd(7)), h(Text, { color: c(k === 'risk' ? 'warn' : 'value') }, line)))),
+    ...rows.flatMap(([k, v], ri) => wrapPlain(String(v), Math.max(10, cols - 10)).slice(0, 8).map((line, i) => h(Text, { key: `${ri}${k}${i}`, color: c('text') }, '  ', h(Text, { color: c('label') }, (i ? '' : k).padEnd(7)), h(Text, { color: c(k === 'risk' ? 'warn' : 'value') }, line)))),
     // block: pre-shaped segment rows shown verbatim (a command to run: never word-wrapped, never clipped)
     ...block.map((segs, i) => h(Box, { key: `b${i}`, paddingLeft: 2, width: cols }, h(Text, null, ...segs.map((sg, j) => h(Text, { key: j, color: c(sg.role || 'text'), bold: sg.bold || undefined }, sg.t))))),
     ...notes.map((n, i) => h(Text, { key: `n${i}`, color: c('warn'), bold: true, wrap: 'wrap' }, `  ${n}`)),
-    arming || h(Text, { color: c('prose'), bold: true, wrap: 'wrap' }, '  ', ...runs(paintLine(footer, 'ask'))),
+    arming || h(AskFoot, { footer }),
     e == null ? h(Rule, { cols, color: 'warn' }) : h(DrawRule, { cols, color: 'warn', e }));
 }
 
@@ -974,29 +1082,43 @@ export function askCardModel(text) {
 export function AskCard({ text, cols }) {
   if (!String(text ?? '').replace(/^\s*▶?\s*/, '').trim()) return null; // an empty ask draws nothing: no rules, no blank line
   const m = askCardModel(text);
-  if (m.plain) return h(Box, { width: cols, marginTop: 1 }, h(Text, { color: c('prose'), bold: true, wrap: 'wrap' }, '  ', ...runs(paintLine(m.footer, 'ask'))));
+  if (m.plain) return h(Box, { width: cols, marginTop: 1, flexDirection: 'column' }, h(AskFoot, { footer: m.footer }));
   return h(NeedsYouCard, { cols, title: m.title, rows: m.rows, footer: m.footer });
 }
 /** Rows an AskCard takes (sizes the live region). */
 export const askCardRows = (text, cols) => {
   if (!String(text ?? '').replace(/^\s*▶?\s*/, '').trim()) return 0;
   const m = askCardModel(text);
-  if (m.plain) return 1 + wrapRows(m.footer, cols - 2);
-  return 4 + wrapRows(m.title, cols) + m.rows.reduce((n, [, v]) => n + Math.min(8, wrapPlain(String(v), Math.max(10, cols - 10)).length), 0) + wrapRows(m.footer, cols - 2);
+  if (m.plain) return 1 + footRows(m.footer, cols);
+  return 4 + wrapRows(m.title, cols) + m.rows.reduce((n, [, v]) => n + Math.min(8, wrapPlain(String(v), Math.max(10, cols - 10)).length), 0) + footRows(m.footer, cols);
 };
 
-export function ApprovalCard({ card, org, cols, armed, draftHint = null, motionE = null, confirm = false, position = null }) {
+/** APPROVAL-BURST: one card for 2+ approvals from one agent for one tool (approvalBatch.batchModel). */
+export function BatchCard({ model, cols, armed, motionE = null }) {
+  const e = motionE;
+  const block = model.lines.map((l) => [{ t: `• ${clip(l, Math.max(10, cols - 8))}`, role: 'text' }]);
+  if (model.more) block.push([{ t: model.more, role: 'dim' }]);
+  const footer = askText(`Approve all ${model.n}?`, { keys: model.keys });
+  return h(NeedsYouCard, { cols, title: model.title, rows: [], block, notes: model.notes, footer, arming: armed ? null : (e == null ? h(Text, { color: c('dim') }, '  arming…') : null), motionE: e });
+}
+
+export function ApprovalCard({ card, org, cols, armed, draftHint = null, motionE = null, confirm = false, position = null, signedOut = false }) {
   const when = card.askedAt ? String(card.askedAt).replace('T', ' ').slice(0, 16) + ' UTC' : null;
   const rows = card.undescribable ? [['what', card.what], ['from', card.askedBy || card.origin], ['asked', when], ['org', org]].filter(r => r[1]) : [
-    ['what', card.what && card.what !== card.tool ? card.what : null], ['tool', card.tool], ['target', card.target], ['scope', card.scope], ['risk', card.risk], ['from', card.foreign ? card.origin : null], ['org', org]
+    ['what', card.what && card.what !== card.tool ? card.what : null], ['tool', card.tool], ['target', card.target], ['scope', card.scope], ['risk', card.risk], ['from', card.foreign ? card.origin : null], ['org', card.plan && (card.plan.orgName || card.plan.orgId) ? orgLabel(card.plan.orgName, card.plan.orgId) : org]
   ].filter(r => r[1]);
+  if (card.plan) { // the plan itself, so the approver sees what they are approving
+    if (card.plan.lines.length) card.plan.lines.forEach((l, i) => rows.push([i ? '' : 'plan', l]));
+    else rows.push(['plan', card.plan.loaded ? 'this objective has no steps recorded' : 'could not load the plan steps, deny or check `quox objective get` first']);
+  }
   if (card.privileged) rows.push(['grants', `PRIVILEGED: ${[card.tool, card.target].filter(Boolean).join(' ')}`]);
   // APPROVAL-WWWH: what exactly (verbatim), where, who, why, when, read-only or write. The command is a block: never word-wrapped.
   const f = card.facts || null; const block = [];
   if (f && !card.undescribable) {
     if (f.where && /^\d+ (hosts|targets):/.test(f.where)) { for (const k of ['target', 'what']) { const i = rows.findIndex(r => r[0] === k && (k === 'target' || String(r[1]).includes(f.hostList[1]))); if (i >= 0) rows.splice(i, 1); } }
+    if (f.background) { const i = rows.findIndex(r => r[0] === 'what'); const note = BACKGROUND_NOTE[0].toUpperCase() + BACKGROUND_NOTE.slice(1); if (i >= 0) rows[i] = ['what', `${rows[i][1]}. ${note}`]; else rows.unshift(['what', note]); }
     if (f.command) { block.push([{ t: f.command.kind === 'input' ? 'input:' : 'command:', role: 'label' }]); block.push(...codeRows(f.command.shown.split('\n'), cols - 4)); }
-    for (const r of [['where', f.where], ['who', f.who], ['why', f.why], ['asked', [f.asked && `"${f.asked}"`, f.when].filter(Boolean).join(' · ') || null], ['class', f.access]]) if (r[1]) rows.push(r);
+    for (const r of [['where', f.where], ['who', f.who], ['why', f.why], ['asked', [f.asked && (f.askedRich ? f.asked : `"${f.asked}"`), f.when].filter(Boolean).join(' · ') || null], ['class', f.access]]) if (r[1]) rows.push(r);
   }
   const e = motionE;
   const title = `⚠ Approval needed${position && position.n > 1 ? ` (${position.i} of ${position.n})` : ''}: execution is held`;
@@ -1004,12 +1126,15 @@ export function ApprovalCard({ card, org, cols, armed, draftHint = null, motionE
   const arming = e == null || mono()
     ? h(Text, { color: c('dim') }, e == null ? '  arming…' : `  arming… ${'▰'.repeat(filled)}${'▱'.repeat(ARM_BAR - filled)}`)
     : h(Text, null, h(Text, { color: c('dim') }, '  arming… '), h(Text, { color: c('warn') }, '▰'.repeat(filled)), h(Text, { color: c('faint') }, '▱'.repeat(ARM_BAR - filled)));
-  const footer = card.privileged && confirm ? `▶ Grant ${[card.tool, card.target].filter(Boolean).join(' ')}? press y again to confirm, any other key cancels`
+  const footer = signedOut ? askText('Read-only while signed out. Sign in to answer?', { keys: 'y signs in' })
+    : card.privileged && confirm ? `▶ Grant ${[card.tool, card.target].filter(Boolean).join(' ')}? press y again to confirm, any other key cancels`
     : card.undescribable && confirm ? '▶ Quox could not describe this action. Approve it anyway? press y again to confirm, any other key cancels'
+      : draftHint === 'reason' ? askText('Why deny it?', { keys: 'type a reason · Enter denies · Esc goes back to y/n' })
       : draftHint === 'focus' ? askText('Approve it?', { keys: 'y approve · n deny · card focused (Esc returns to your draft)' }) // RESTORE-TUI: every y/n goes through askText (same text)
       : draftHint === 'draft' ? askText('Approve it?', { keys: 'y/n answer once your draft is empty · Tab to answer the approval card (your draft is kept)' })
-        : '▶ Approve it? y approve · n deny · c chat · Tab later · /approvals all';
-  return h(NeedsYouCard, { cols, title, rows, block, notes: card.undescribable && !confirm ? ['Quox could not describe this action'] : [], footer, arming: armed ? null : arming, motionE: e });
+        : card.destructive ? '▶ Delete it? y then type the name · n deny · c chat · Tab later · /approvals all'
+          : '▶ Approve it? y approve · n deny · c chat · Tab later · /approvals all';
+  return h(NeedsYouCard, { cols, title, rows, block, lead: card.destructive ? `DELETES ${card.destructive.label}` : null, notes: [...(f && f.askedNone ? ['nothing in your request asks for this'] : []), ...(card.undescribable && !confirm ? ['Quox could not describe this action'] : []), ...(position && position.others > 0 ? [`other sessions: ${position.others} waiting · /approvals`] : [])], footer, arming: armed ? null : arming, motionE: e });
 }
 
 /** Columns the status line's Q takes: 2 for the Braille glyph, 1 for the Ⓠ fallback (2 where Ambiguous is wide). */
@@ -1046,8 +1171,10 @@ export function statusRows({ cols, slot, agent, groups = [], parts, hint, qw = s
   // every context item says what it is (owner: "profile moo .. ask?? what?"); /help status explains each in a line
   const word = { profile: 'profile ', org: 'org ', mode: 'mode ' };
   const val = (k) => k === 'mode' ? (MODE_WORDS[p.mode] || null) : k === 'auto' ? '↻ auto-restart' : String(p[k]);
-  for (const k of ['profile', 'org', 'mode', 'rules', 'auto'].filter(k => p[k])) tokens.push({ pre: ' · ',
-    segs: word[k] && val(k) ? [[word[k], 'label'], [val(k), k === 'mode' && p.mode === 'plan' ? 'violet' : 'value']] : [[k === 'mode' ? String(p[k]) : val(k), 'label']] });
+  for (const k of ['profile', 'org', 'server', 'remote', 'mode', 'rules', 'auto'].filter(k => p[k])) tokens.push({ pre: ' · ',
+    segs: k === 'server' ? [['⬡ ', 'icon'], ['server ', 'label'], [p.server.name, 'value'], ...(p.server.role ? [[` (${p.server.role})`, 'label']] : [])]
+      : k === 'remote' ? [['→ ', 'icon'], [String(p.remote), 'value']]
+      : word[k] && val(k) ? [[word[k], 'label'], [val(k), k === 'mode' && p.mode === 'plan' ? 'violet' : 'value']] : [[k === 'mode' ? String(p[k]) : val(k), 'label']] });
   const tlen = (tk) => tk.segs.reduce((n, sg) => n + len(sg[0]), 0);
   // split a token too wide for a row into row-sized pieces (whole characters by cell width, never an ellipsis)
   const fit = (tk) => {
@@ -1097,20 +1224,21 @@ export function statusRows({ cols, slot, agent, groups = [], parts, hint, qw = s
 }
 
 /** QUOXON-FW17: custom rows, one truncated line each, just above the status line. */
-export function RowsBar({ rows, cols }) {
+export function RowsBar({ rows, cols, limit }) {
   if (!rows?.length) return null;
-  const shown = rows.slice(0, 3);
-  const labelW = labelWidth(shown); // labels line up across rows
+  // TUI-QPE: layoutRows fits cells rows by keep (whole items drop, never mid-word), lines up a grid's columns and
+  // leaves out rows below their min_cols; plain rows take the classic rowParts + clipParts path unchanged.
+  // /qpe N keeps the first N lines of a grid; it applies to drawn lines (a row can bring several), so expand first.
+  const laid = layoutRows(limit ? limitGrid(expandLines(rows), limit.grid, limit.n) : rows, cols);
+  if (!laid.length) return null;
   return h(Box, { flexDirection: 'column', width: cols },
-    ...shown.map((r) => {
-      const parts = clipParts(rowParts(r, { labelW }), Math.max(1, cols - 2));
+    ...laid.map(({ st: r, parts }) =>
       // ROWS: label, value, tone and trend as their own runs; every role is a palette colour (no grey, owner rule).
-      return h(Text, { key: r.row.id, wrap: 'truncate-end' }, ' ', ...parts.map(([t, role, bold], i) => h(Text, { key: i, color: c(themeRole(role)), bold: Boolean(bold) }, t)));
-    }));
+      h(Text, { key: r.row.id, wrap: 'truncate-end' }, ' ', ...parts.map(([t, role, bold], i) => h(Text, { key: i, color: c(themeRole(role)), bold: Boolean(bold) }, t)))));
 }
 
 export function StatusLine({ cols, slot, agent, groups = [], parts, right }) {
-  const p = Array.isArray(parts) ? { profile: parts[0], org: parts[1], model: parts[2], mode: parts[3], rules: parts[4], auto: parts[5] } : parts;
+  const p = Array.isArray(parts) ? { profile: parts[0], org: parts[1], model: parts[2], mode: parts[3], rules: parts[4], auto: parts[5], server: parts[6], remote: parts[7] } : parts;
   const qw = statusGlyphWidth();
   const rows = statusRows({ cols, slot, agent, groups, parts: p, hint: right, qw });
   // The still Q (qglyph.js): two Braille cells, or Ⓠ under NO_COLOR / no Braille. statusRows reserved its width.
@@ -1131,7 +1259,24 @@ function hintNodes(hint) {
 }
 
 /** Live, actionable counts under the status line. Never a transcript message. */
-export function NotifyBar({ approvals, error, cols, signedOut = false, alerts = [], hideCount = false }) {
+export function NotifyBar({ approvals, error, cols, signedOut = false, alerts = [], hideCount = false, inbox = '', spinner = '', away = false, awayCount = 0, dnd = false, dndCount = 0, awaySince = 0, dndUntil = 0, awayUnknown = false }) {
+  const hm = (ms) => { const d = new Date(ms); return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; };
+  if (away && dnd && !signedOut) { // DND: one persistent quiet line, shown even at 0 waiting so the mode is never invisible
+    const head = dndUntil ? `🌙 do not disturb until ${hm(dndUntil)}` : '🌙 do not disturb';
+    return h(Text, { color: c('ask'), bold: true }, ' ' + clip(`${head}${dndCount ? ` · ${dndCount} waiting` : ''} · /morningreport`, cols - 3));
+  }
+  if (away && !signedOut) { // AFK-QUIET-CARDS: away shows one quiet line, never a prompt
+    const n = awayCount || approvals || 0;
+    const head = awaySince ? `🌙 away since ${hm(awaySince)} · /back` : awayUnknown ? '🌙 away (since before this window opened) · /back' : '🌙 away · /back';
+    return h(Text, { color: c('ask'), bold: true }, ' ' + clip(n ? `⏸ ${n} approval${n === 1 ? '' : 's'} waiting · /back to review` : head, cols - 3)); // >0 keeps the existing wording (asserted elsewhere)
+  }
+  const base = NotifyBarBase({ approvals, error, cols, signedOut, alerts, hideCount });
+  const line = inbox && !signedOut ? h(Text, { key: 'inbox', color: c('ask'), bold: true }, ' ' + clip(inbox, cols - 3)) : null; // HITL-INBOX-BAR: 📨 N new · newest title
+  const spin = spinner ? h(Text, { key: 'spin', color: c('ask') }, ' ' + clip(spinner, cols - 3)) : null; // INSTANT-FEEDBACK: ⠋ <verb>…
+  const parts = [base, line, spin].filter(Boolean);
+  return parts.length > 1 ? h(Box, { flexDirection: 'column' }, ...parts) : (parts[0] || base);
+}
+function NotifyBarBase({ approvals, error, cols, signedOut = false, alerts = [], hideCount = false }) {
   if (signedOut) return h(Text, { color: c('warn') }, ' ' + clip('not signed in: approvals unavailable until you sign in', cols - 2));
   const count = approvals && !hideCount ? h(Text, { key: 'n', color: c('ask'), bold: true }, ' ' + clip(`▶ ${approvals} approval${approvals === 1 ? '' : 's'} waiting for you${error ? ' (last known)' : ''} · /approvals`, cols - 3)) : null;
   // Background workflows that keep failing: one deduped line each (max 2), never roster rows.
@@ -1155,13 +1300,14 @@ export function Roster({ view, peek = [], confirm = null, hint = null, cols, fx
     // glyph keeps the state colour; the rest of the line steps down in tone with position and (for finished rows) age
     ...view.lines.map((l, i) => {
       const e = fx && l.key != null ? fx(l.key) : null; // a row that just appeared decodes in (new rows land on top)
-      return h(Text, { key: 'r' + i, bold: l.selected, wrap: 'truncate-end' },
+      const row = h(Text, { key: 'r' + i, bold: l.selected, wrap: 'truncate-end' },
         h(Text, { color: c(l.selected ? 'text' : (l.glyphRole || ROSTER_TONE[l.state])) }, ' ' + l.marker + l.glyph),
         e == null ? h(Text, { color: c(l.selected ? 'text' : l.tone) }, l.rest) : h(Text, null, ...fxNodes([{ t: l.rest, color: l.selected ? 'text' : l.tone }], { e, timing: TIMING.roster }, 29 + i)),
         l.pulse ? h(Text, { color: c(l.pulseRole === 'dim' && l.selected ? 'text' : l.pulseRole) }, l.pulse) : null);
+      return l.extra ? h(Box, { key: 'rx' + i, flexDirection: 'column' }, row, ...l.extra.map((t, j) => h(Text, { key: j, color: c('error') }, '     ' + t))) : row; // the stop reason, whole and wrapped
     }),
     view.more ? h(Text, { key: 'more', color: c('dim') }, `   +${view.more} more · /roster`) : null,
-    ...peek.map((p, i) => h(Text, { key: 'p' + i, color: c('dim'), wrap: 'truncate-end' }, '   ' + clip(p, cols - 5))),
+    ...peek.flatMap((p, i) => wrapText(p, cols - 5).map((t, j) => h(Text, { key: `p${i}.${j}`, color: c('dim') }, (j ? '     ' : '   ') + t))), // QLOOP-LIVE: a peek line wraps, it is never cut
     confirm ? h(Text, { key: 'cf', color: c('warn') }, ' ' + clip(confirm, cols - 2)) : null,
     hint ? h(Text, { key: 'h', color: c('dim') }, ' ' + clip(hint, cols - 2)) : null);
 }