quoxcli 0.3.1 → 0.4.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,7 +24,8 @@ 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';
@@ -41,6 +43,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 +258,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 +298,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 +394,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 +525,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 +561,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 +588,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 +637,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 +649,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
@@ -770,6 +804,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 +826,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 +840,26 @@ 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: 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 || typeof n !== 'number') return { text: 'approvals ?', role: 'warn' };
+  if (n === 0) return { text: '✔ nothing waiting', role: 'ok' };
+  return { text: `⏸ ${n} approval${n === 1 ? '' : 's'} waiting`, 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 +892,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 +958,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 +977,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 +1023,25 @@ 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.
  */
+/** 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 }) {
   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)),
     // 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,22 +1057,26 @@ 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 }) {
   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 = [];
@@ -1009,7 +1096,7 @@ export function ApprovalCard({ card, org, cols, armed, draftHint = null, motionE
       : 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 });
+  return h(NeedsYouCard, { cols, title, rows, block, notes: [...(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 +1133,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 +1186,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 +1221,13 @@ 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 = '' }) {
+  const base = NotifyBarBase({ approvals, error, cols, signedOut, alerts, hideCount });
+  if (!inbox || signedOut) return base;
+  const line = h(Text, { key: 'inbox', color: c('ask'), bold: true }, ' ' + clip(inbox, cols - 3)); // HITL-INBOX-BAR: 📨 N new · newest title
+  return base ? h(Box, { flexDirection: 'column' }, base, line) : line;
+}
+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 +1251,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);
 }

package/lib/quoxon/roster.js

@@ -5,10 +5,11 @@
  * nothing (never a placeholder row).
  */
 import { clip } from './theme.js';
+import { humanReason, wrapText } from './loopCard.js';
 
 export const GLYPH = { running: '◐', waiting: '⏸', done: '✔', failed: '✖' };
 /** A row that ended without finishing says HOW: failed is the only error; the rest are neutral (no error colour). */
-export const OUTCOME_GLYPH = { failed: '✖', cancelled: '○', expired: '○', rejected: '⊘' };
+export const OUTCOME_GLYPH = { failed: '✖', halted: '⚠', cancelled: '○', expired: '○', rejected: '⊘' };
 export const FRESH_MS = 10 * 60 * 1000;      // finished rows linger this long
 export const USER_DONE_MS = 20 * 1000;       // a user-started completion vanishes quickly: rows come and go
 export const PENDING_FRESH_MS = 24 * 3600 * 1000; // an older "pending" is stale, not waiting
@@ -42,13 +43,17 @@ const FAILED = new Set(['failed', 'error', 'halted', 'cancelled', 'canceled', 't
 /** The word for how an ended row ended (state stays 'failed' for the ended-badly group; this says which). */
 export function outcomeOf(status) {
   const st = String(status || '').toLowerCase();
+  if (st === 'halted') return 'halted';
   if (st === 'cancelled' || st === 'canceled') return 'cancelled';
   if (st === 'expired') return 'expired';
   if (st === 'rejected') return 'rejected';
   return 'failed';
 }
 /** Word, glyph and whether it is an error, for a row. Non-failed states return their own state. */
-export function endWord(r) { return r.state === 'failed' ? outcomeOf(r.status) : r.state; }
+export function endWord(r) { return r.state === 'failed' ? (r.outcome || outcomeOf(r.status)) : r.state; }
+/** A human-halted loop keeps objective status 'failed'; the server says loop_state 'halted' (older servers: the halt text). */
+const HALT_TEXT = /^Loop (?:halted on demand|stopped by human review)/i;
+const isHaltedLoop = (o) => o.execution_mode === 'loop' && (o.loop_state === 'halted' || String(o.status || '').toLowerCase() === 'halted' || (String(o.status || '').toLowerCase() === 'failed' && HALT_TEXT.test(String(o.error_message || ''))));
 export const glyphOf = (r) => (r.state === 'failed' ? OUTCOME_GLYPH[endWord(r)] : GLYPH[r.state]);
 
 /** How long a finished row lingers before it leaves the roster (null while running/waiting). */
@@ -83,18 +88,22 @@ export function fromObjective(o, now = Date.now()) {
   if (!state) return null;
   const loop = o.execution_mode === 'loop';
   let activity = '';
-  if (state === 'failed' && o.error_message) activity = String(o.error_message);
+  const haltedLoop = state === 'failed' && isHaltedLoop(o);
+  // a halted loop reads its clean sentence (the server's loop_reason, with the person's name), never the raw record text
+  const shownError = !haltedLoop ? o.error_message : (o.loop_reason || ((n) => (n ? `Stopped by ${n[1].trim()}` : 'Halted on demand'))(/^Loop halted on demand by \S+ \(([^)]{1,80})\)/i.exec(String(o.error_message || ''))));
+  if (state === 'failed' && shownError) activity = humanReason(shownError); // the sentence whole, minus the raw spawner prefix; the view decides how to show it
+  else if (loop && state === 'done') activity = o.iteration_count > 0 ? `${o.iteration_count} turn${o.iteration_count === 1 ? '' : 's'}` : ''; // the row prints "done <age>" itself; a stale "iter 0/5" beside it was the lie
   else if (loop && o.max_iterations) activity = `iter ${o.iteration_count || 0}/${o.max_iterations}`;
   else if (o.task_count) activity = `${o.tasks_completed || 0}/${o.task_count} tasks`;
   else if (state === 'waiting') activity = 'waiting to start';
   const from = startedAt ?? createdAt;
   return {
     key: `objective:${o.id}`, id: o.id, source: 'objectives', background: false, kind: loop ? 'loop' : 'objective', state,
-    name: o.title || o.id, activity, status: o.status,
+    name: o.title || o.id, activity, status: o.status, ...(haltedLoop ? { outcome: 'halted' } : {}),
     startedAt: from, finishedAt, ageMs: from != null ? (state === 'done' || state === 'failed' ? (finishedAt ?? now) - from : now - from) : null,
     expiryMs: expiryFor(state, USER_DONE_MS),
     progressAt: latest(parseTime(o.updated_at), parseTime(o.last_progress_at), parseTime(o.last_heartbeat_at)),
-    detail: { description: o.description, error: o.error_message, tokens: o.tokens_used, toolCalls: o.tool_calls_used }
+    detail: { description: o.description, error: shownError ? humanReason(shownError) : shownError, tokens: o.tokens_used, toolCalls: o.tool_calls_used }
   };
 }
 
@@ -235,7 +244,7 @@ export function countsLine(rows) {
   const n = (s) => rows.filter(r => r.state === s).length;
   const o = (w) => rows.filter(r => r.state === 'failed' && endWord(r) === w).length;
   return [['running', 'running', n('running'), GLYPH.running], ['waiting', 'waiting', n('waiting'), GLYPH.waiting],
-    ['failed', 'failed', o('failed'), OUTCOME_GLYPH.failed], ['cancelled', 'cancelled', o('cancelled'), OUTCOME_GLYPH.cancelled],
+    ['failed', 'failed', o('failed'), OUTCOME_GLYPH.failed], ['halted', 'halted', o('halted'), OUTCOME_GLYPH.halted], ['cancelled', 'cancelled', o('cancelled'), OUTCOME_GLYPH.cancelled],
     ['expired', 'expired', o('expired'), OUTCOME_GLYPH.expired], ['rejected', 'rejected', o('rejected'), OUTCOME_GLYPH.rejected], ['done', 'finished', n('done'), GLYPH.done]]
     .filter(([, , k]) => k).map(([, w, k, g]) => `${g} ${k} ${w}`).join(' · ');
 }
@@ -261,6 +270,9 @@ export function collapseApprovals(rows, now = Date.now()) {
   return rows.flatMap(r => (aps.includes(r) ? (placed ? [] : (placed = true, [one])) : [r]));
 }
 
+const KIND_ICON = { loop: '∞', objective: '◎' }; // QuoxGlyph registry keys qloop / objective
+export const kindLabel = k => (KIND_ICON[k] ? `${KIND_ICON[k]} ${k}` : k);
+
 export function rosterView({ rows, cols, termRows = 40, max = MAX_ROWS, on = true, sel = 0, focus = false, now = Date.now(), motion = false }) {
   if (!on || !rows.length) return { mode: 'hidden', lines: [], more: 0 };
   if (!focus) rows = collapseApprovals(rows, now);
@@ -269,13 +281,14 @@ export function rosterView({ rows, cols, termRows = 40, max = MAX_ROWS, on = tru
   }
   const shown = rows.slice(0, max);
   const ageW = Math.max(5, ...shown.map(r => [...ageText(r, now)].length));
-  let pos = 0;
-  const kindW = Math.min(9, Math.max(...shown.map(r => r.kind.length)));
+  let pos = 0, reasonShown = false;
+  const kindW = Math.min(11, Math.max(...shown.map(r => [...kindLabel(r.kind)].length)));
   const lines = shown.map((r, i) => {
     const el = ageText(r, now).padStart(ageW);
     const tone = toneName(r, pos, now); if (r.kind !== 'approval') pos++;
     const actW = Math.min(18, Math.max(0, ...shown.map(x => [...(x.activity || '')].length)));
-    const act = clip(r.activity || '', actW).padEnd(actW);
+    const longReason = r.state === 'failed' && [...(r.activity || '')].length > actW; // a reason is never cut: the column says "stopped", the sentence follows wrapped
+    const act = (longReason ? clip('stopped', actW) : clip(r.activity || '', actW)).padEnd(actW);
     const fixed = 1 + 1 + 1 + kindW + 1 + 1 + actW + 1 + ageW + 2; // pulse column (space + glyph); marker glyph kind name act elapsed
     const nameW = Math.max(8, cols - 2 - fixed - 1);
     const name = clip(r.name, nameW).padEnd(nameW);
@@ -286,9 +299,10 @@ export function rosterView({ rows, cols, termRows = 40, max = MAX_ROWS, on = tru
       const text = room >= 12 ? `${head}${clip(r.newestTitle, room)}${tail}` : clip(`${r.count} approvals waiting · oldest ${elapsed(r.oldestMs)}${tail}`, cols - 4); // too narrow for a title
       return { key: r.key, kind: 'approval', state: r.state, tone: toneName(r, pos, now), selected: false, marker: ' ', glyph: GLYPH[r.state], rest: ' ' + text, pulse: '', pulseRole: 'dim', pulseKind: 'none', text: ` ${GLYPH[r.state]} ${text}` };
     }
-    const rest = `${r.kind.padEnd(kindW)} ${name} ${act} ${el}`;
+    const rest = `${kindLabel(r.kind).padEnd(kindW)} ${name} ${act} ${el}`;
     const p = pulseOf(r, now, { motion });
-    return { key: r.key, kind: r.kind, state: r.state, tone, selected: focus && i === sel, marker, glyph: glyphOf(r), glyphRole: r.state === 'failed' && endWord(r) !== 'failed' ? 'dim' : null, rest: ' ' + rest, pulse: ' ' + p.glyph, pulseRole: p.role, pulseKind: p.kind, text: `${marker}${glyphOf(r)} ${rest} ${p.glyph}` };
+    const extra = longReason && !reasonShown ? (reasonShown = true, wrapText(r.activity, Math.max(20, cols - 8))) : null; // spelled out for the newest stopped row only: the bar must not grow with every old failure
+    return { key: r.key, kind: r.kind, state: r.state, tone, extra, selected: focus && i === sel, marker, glyph: glyphOf(r), glyphRole: r.state === 'failed' && endWord(r) === 'halted' ? 'warn' : r.state === 'failed' && endWord(r) !== 'failed' ? 'dim' : null, rest: ' ' + rest, pulse: ' ' + p.glyph, pulseRole: p.role, pulseKind: p.kind, text: `${marker}${glyphOf(r)} ${rest} ${p.glyph}` };
   });
   return { mode: 'full', lines, more: Math.max(0, rows.length - shown.length) };
 }
@@ -302,6 +316,6 @@ export function peekLines(row, now = Date.now()) {
   if (d.description) out.push(`goal ${d.description}`);
   if (d.workflowId) out.push(`workflow ${d.workflowId}`);
   if (d.trigger) out.push(`trigger ${d.trigger}`);
-  if (d.error && row.state === 'failed') out.push(`error ${typeof d.error === 'string' ? d.error : JSON.stringify(d.error)}`);
+  if (d.error && row.state === 'failed') out.push(`error ${typeof d.error === 'string' ? humanReason(d.error) : JSON.stringify(d.error)}`);
   return out;
 }