dexterm-cli 0.0.0-stage → 0.1.1

package/dist/packages/popup/src/pages/common.js

@@ -0,0 +1,187 @@
+// dexterm popup — shared page harness (task-1290). Inlined BEFORE each page script under a CSP nonce.
+// Provides the window.DT API the page scripts build on. No remote content, no innerHTML: every untrusted
+// string (token name, symbol, address, feed text) is rendered with textContent / fillText only.
+//
+// Channels: a WebSocket to the TUI's loopback server (ticket → one-time token in the page's meta tags) and
+// a native shell bridge (wry ipc) for drag / close. The page may ONLY send the allow-listed events in
+// PopupToTui; the server drops anything else.
+(() => {
+  'use strict';
+  const meta = (n) => document.querySelector(`meta[name="${n}"]`)?.content || '';
+  const WS_TOKEN = meta('dexterm-ws'), POPUP_ID = meta('dexterm-popup'), PORT = meta('dexterm-port');
+
+  // ---------------------------------------------------------------- color helpers
+  function hex(c) { const n = parseInt(String(c).slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }
+  function mix(a, b, t) { const A = hex(a), B = hex(b); return `rgb(${A.map((v, i) => Math.round(v + (B[i] - v) * t)).join(',')})`; }
+  function rgba(c, a) { const [r, g, b] = hex(c); return `rgba(${r},${g},${b},${a})`; }
+  const shortAddr = (s, n = 4) => { s = String(s); return s.length > 2 * n + 1 ? `${s.slice(0, n)}…${s.slice(-n)}` : s; };
+
+  // ---------------------------------------------------------------- theme
+  let T = { bg: '#020507', panel: '#03090c', border: '#0c3a24', borderFocus: '#39ff14', text: '#eafff0', muted: '#62c98a', dim: '#3aa866', accent: '#00f0ff', up: '#5dff6e', down: '#ff3b6b', warn: '#f5ff2d', ai: '#d97757', pump: '#ff2bd6', dbc: '#ff8a3d', rain: ['#06301a', '#0b5a2c', '#16a848', '#b8ffc8'], rainPump: ['#3a2a05', '#8a6410', '#f0b429', '#fff1b3'], rainDump: ['#3a0a12', '#7a1226', '#d12a4a', '#ffb3c1'], scan: '#000000' };
+  const themeCbs = [];
+  function applyTheme(t) {
+    T = { ...T, ...t };
+    const r = document.documentElement.style;
+    for (const k of ['bg', 'panel', 'panelAlt', 'border', 'borderFocus', 'text', 'muted', 'dim', 'accent', 'up', 'down', 'warn', 'ai', 'pump', 'dbc']) if (T[k]) r.setProperty(`--${k}`, T[k]);
+    if (rain) rain.invalidate();
+    for (const cb of themeCbs) try { cb(T); } catch { /* page error reported separately */ }
+  }
+
+  // ---------------------------------------------------------------- matrix rain (full panel, glyph atlas → drawImage)
+  const KATAKANA = 'ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
+  const HEX = '0123456789ABCDEF∷⋮⋯╳◇◆';
+  const CELL = 14, CELL_H = 16;
+  class Rain {
+    constructor(canvas, cfg) {
+      this.canvas = canvas; this.ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
+      this.cfg = cfg || { enabled: true, speedScale: 1, density: 0.55 };
+      this.atlas = null; this.drops = []; this.cols = 0; this.rows = 0; this.W = 0; this.H = 0; this.dpr = 1;
+      this.mood = 'rain'; this.activity = this.cfg.density; this.sources = [];
+    }
+    invalidate() { this.atlas = null; }
+    setSources(arr) { this.sources = (arr || []).filter(Boolean); this.atlas = null; }
+    setActivity(a) { this.activity = Math.max(0.1, Math.min(1, a)); }
+    setMood(m) { if (m && m !== this.mood) { this.mood = m; this.atlas = null; } }
+    resize(W, H) {
+      this.W = W; this.H = H; this.dpr = 1; // rain renders at 1x: phosphor can be soft, the viz above it cannot
+      this.canvas.width = Math.max(1, Math.floor(W)); this.canvas.height = Math.max(1, Math.floor(H));
+      this.cols = Math.floor(W / CELL); this.rows = Math.floor(H / CELL_H); this.drops = [];
+      for (let c = 0; c < this.cols; c++) this.drops.push(this.newDrop(c, true));
+      this.atlas = null;
+    }
+    randGlyph() { return Math.random() < 0.7 ? KATAKANA[Math.floor(Math.random() * KATAKANA.length)] : HEX[Math.floor(Math.random() * HEX.length)]; }
+    newDrop(c, init) {
+      const src = this.sources.length && Math.random() < 0.5 ? this.sources[Math.floor(Math.random() * this.sources.length)] : null;
+      const len = 6 + Math.floor(Math.random() * 14);
+      const cells = Array.from({ length: len }, (_, i) => (src && i < src.length ? src[src.length - 1 - i] : this.randGlyph()));
+      const speed = (0.18 + 0.5 * this.activity) * (0.6 + Math.random() * 0.9) * (this.cfg.speedScale || 1);
+      return { c, y: init ? Math.random() * this.rows * 2 - this.rows : -len - Math.random() * this.rows, speed, len, cells, period: 1 + Math.floor(Math.random() * 3), t: 0 };
+    }
+    buildAtlas() {
+      const glyphs = [...KATAKANA, ...HEX, ...this.sources.join('')].filter((c, i, a) => a.indexOf(c) === i);
+      const ramp = T[this.mood] || T.rain;
+      const cv = document.createElement('canvas'); cv.width = Math.ceil(glyphs.length * CELL); cv.height = Math.ceil(4 * CELL_H);
+      const g = cv.getContext('2d'); g.textBaseline = 'top'; g.textAlign = 'center';
+      for (let tier = 0; tier < 4; tier++) { g.font = `${tier === 3 ? 'bold ' : ''}12px ui-monospace, Menlo, monospace`; g.fillStyle = ramp[tier]; for (let i = 0; i < glyphs.length; i++) g.fillText(glyphs[i], i * CELL + CELL / 2, tier * CELL_H + 1); }
+      this.atlas = { cv, index: new Map(glyphs.map((c, i) => [c, i])) };
+    }
+    draw() {
+      if (!this.cfg.enabled) return;
+      if (!this.atlas) this.buildAtlas();
+      const { cv, index } = this.atlas; const ctx = this.ctx;
+      ctx.clearRect(0, 0, this.W, this.H);
+      const density = 0.4 + 0.55 * this.activity;
+      for (const d of this.drops) {
+        if (++d.t % d.period === 0) d.y += d.speed * d.period;
+        if (d.y - d.len > this.rows) { this.drops[d.c] = this.newDrop(d.c, false); continue; }
+        if (Math.random() > density + 0.3) continue;
+        for (let i = 0; i < d.len; i++) {
+          const row = Math.floor(d.y) - i; if (row < 0 || row >= this.rows) continue;
+          if (Math.random() < 0.04) d.cells[i] = this.randGlyph();
+          const tier = i === 0 ? 3 : i < 3 ? 2 : i < d.len * 0.6 ? 1 : 0;
+          const gi = index.get(d.cells[i]); if (gi == null) continue;
+          ctx.drawImage(cv, gi * CELL, tier * CELL_H, CELL, CELL_H, d.c * CELL, row * CELL_H, CELL, CELL_H);
+        }
+      }
+    }
+  }
+  let rain = null;
+
+  // ---------------------------------------------------------------- shell bridge (wry ipc; Electron/WK kept for parity)
+  function shellPost(obj) {
+    const s = JSON.stringify(obj);
+    if (window.ipc && window.ipc.postMessage) return window.ipc.postMessage(s);
+    if (window.dextermShell && window.dextermShell.post) return window.dextermShell.post(s);
+    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.dexterm) return window.webkit.messageHandlers.dexterm.postMessage(s);
+  }
+
+  // ---------------------------------------------------------------- WebSocket to the TUI's loopback server
+  let ws = null, queue = [];
+  const handlers = { hello: [], theme: [], data: [], update: [], pause: [], focus: [], close: [] };
+  function send(o) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(o)); else queue.push(o); }
+  let rainCfg = { enabled: true, speedScale: 1, density: 0.55 };
+  function connect() {
+    ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws?t=${encodeURIComponent(WS_TOKEN)}`);
+    ws.onopen = () => { for (const q of queue) ws.send(JSON.stringify(q)); queue = []; send({ type: 'ready', page: DT.page, t: performance.now() }); };
+    ws.onmessage = (e) => {
+      let m; try { m = JSON.parse(e.data); } catch { return; }
+      switch (m.type) {
+        case 'hello': if (m.rain) { rainCfg = m.rain; if (rain) rain.cfg = m.rain; } if (m.theme) applyTheme(m.theme); fire('hello', m); break;
+        case 'theme': applyTheme(m.tokens || {}); break;
+        case 'data': fire('data', m.payload, m.topic); break; // (task-1358 r3) the topic rides along for the widget wrapper
+        case 'update': {
+          const p = m.patch || {};
+          if (rain) { if (p.activity != null) rain.setActivity(+p.activity); if (p.mood) rain.setMood(p.mood); if (p.rain != null) rain.cfg = { ...rain.cfg, enabled: !!p.rain }; }
+          fire('update', p); break;
+        }
+        case 'pause': DT.paused = !!m.on; fire('pause', DT.paused); break;
+        case 'focus': window.focus(); fire('focus', null); break;
+        case 'close': fire('close', null); window.close && window.close(); break;
+      }
+    };
+    ws.onclose = () => { const s = document.getElementById('status'); if (s) { s.textContent = 'disconnected'; s.style.color = T.down; } };
+  }
+  function fire(type, arg, extra) { for (const cb of handlers[type]) try { cb(arg, extra); } catch (err) { send({ type: 'log', msg: `handler ${type}: ${err && err.message}` }); } }
+
+  // ---------------------------------------------------------------- chrome wiring (drag strip + close button + Escape)
+  function wireChrome() {
+    const drag = document.getElementById('drag'), close = document.getElementById('close');
+    if (drag) drag.addEventListener('mousedown', (e) => { if (e.button === 0 && e.target.id !== 'close') { send({ type: 'event', name: 'popup.drag', payload: {} }); shellPost({ type: 'drag' }); } });
+    if (close) close.addEventListener('click', requestClose);
+    // task-1325: a page may consume Esc first (e.g. to cancel an armed drawing tool) via DT.onEscape.
+    window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !(DT.onEscape && DT.onEscape())) requestClose(); });
+  }
+  // The TUI hears the request over the WS (and closes its handle); the native shell closes this window itself
+  // on the ipc message (task-1325), so a close never depends on the TUI being responsive.
+  function requestClose() { send({ type: 'event', name: 'popup.close-request', payload: {} }); shellPost({ type: 'close-request' }); }
+
+  // ---------------------------------------------------------------- rAF loop + perf reporter (self-throttled to fpsCap)
+  function loop(renderFn) {
+    const frameTimes = []; let frames = 0, lastPerfT = performance.now(), lastT = performance.now(), longFrames = 0, lastFrameAt = 0;
+    const minMs = 1000 / (DT.fpsCap || 60) - 0.5;
+    const fpsEl = document.getElementById('fps');
+    function frame(now) {
+      requestAnimationFrame(frame);
+      if (DT.paused) { lastT = now; return; }
+      if (now - lastFrameAt < minMs) return;
+      const dt = now - lastT; lastT = now; lastFrameAt = now; frames++; frameTimes.push(dt); if (dt > 20) longFrames++;
+      if (rain && (DT.rainEvery <= 1 || frames % DT.rainEvery === 0)) rain.draw();
+      try { renderFn(now, dt); } catch (err) { send({ type: 'log', msg: `render: ${err && err.message}` }); }
+      if (now - lastPerfT >= 1000) {
+        const fps = frames * 1000 / (now - lastPerfT);
+        const sorted = frameTimes.slice().sort((a, b) => a - b); const p95 = sorted[Math.floor(sorted.length * 0.95)] || 0;
+        const mean = frameTimes.reduce((s, v) => s + v, 0) / (frameTimes.length || 1);
+        if (fpsEl) fpsEl.textContent = `${fps.toFixed(0)} fps · ${mean.toFixed(1)} ms`;
+        send({ type: 'perf', fps: +fps.toFixed(1), frameMs: +mean.toFixed(2), p95Ms: +p95.toFixed(2), long: longFrames, dpr: Math.min(2, window.devicePixelRatio || 1), w: innerWidth, h: innerHeight, pwned: typeof window.__pwned });
+        frames = 0; frameTimes.length = 0; longFrames = 0; lastPerfT = now;
+      }
+    }
+    requestAnimationFrame(frame);
+  }
+
+  // ---------------------------------------------------------------- public API
+  const DT = {
+    page: 'popup', paused: false, fpsCap: 60,
+    /** Draw the rain every Nth frame (task-1325: the chart page halves it; the chart itself renders on demand). */
+    rainEvery: 1,
+    /** True inside the native wry window (its ipc bridge exists), false in the browser fallback. */
+    native: !!(window.ipc && window.ipc.postMessage),
+    /** Optional page hook: return true to consume Escape before the default close. */
+    onEscape: null,
+    popupId: POPUP_ID,
+    send, shellPost, requestClose, wireChrome, loop,
+    hex, mix, rgba, shortAddr,
+    get theme() { return T; },
+    onData(fn) { handlers.data.push(fn); }, onUpdate(fn) { handlers.update.push(fn); }, onTheme(fn) { themeCbs.push(fn); },
+    onHello(fn) { handlers.hello.push(fn); }, onPause(fn) { handlers.pause.push(fn); }, onClose(fn) { handlers.close.push(fn); }, onFocus(fn) { handlers.focus.push(fn); },
+    status(text, kind) { const s = document.getElementById('status'); if (s) { s.textContent = text; s.style.color = kind === 'up' ? T.up : kind === 'down' ? T.down : kind === 'warn' ? T.warn : T.muted; } },
+    /** Attach a full-panel rain canvas (by element id). Returns the Rain controller. */
+    mountRain(canvasId) { const el = document.getElementById(canvasId); if (el) rain = new Rain(el, rainCfg); return rain; },
+    rain() { return rain; },
+    /** Start the WS connection; call once after handlers are registered. */
+    connect,
+  };
+  window.addEventListener('error', (e) => send({ type: 'log', msg: `error: ${e.message} @${e.lineno}:${e.colno}` }));
+  window.addEventListener('unhandledrejection', (e) => send({ type: 'log', msg: `rejection: ${e.reason && (e.reason.message || e.reason)}` }));
+  window.DT = DT;
+})();

package/dist/packages/popup/src/pages/feeds.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="dexterm-ws" content="__WS_TOKEN__">
+<meta name="dexterm-popup" content="__POPUP_ID__">
+<meta name="dexterm-port" content="__PORT__">
+<title>dexterm · feeds</title>
+<style nonce="__NONCE__">/*__CSS__*/</style>
+</head>
+<body>
+<div id="hud" class="hud">
+  <div id="drag" class="drag"><span class="mark">✦</span><span id="title" class="title">dexterm · FEEDS</span><span id="status" class="status">connecting…</span><button id="close" class="close" type="button" aria-label="close">✕</button></div>
+  <div class="stage"><canvas id="rain"></canvas><div class="body"><div id="rows" class="rows"></div></div></div>
+  <div id="foot" class="foot"><span>↑↓ select</span><span>enter  open</span><span>esc  close</span><span id="fps" class="fps">— fps</span></div>
+</div>
+<script nonce="__NONCE__">/*__COMMON_JS__*/</script>
+<script nonce="__NONCE__">/*__JS__*/</script>
+</body>
+</html>

package/dist/packages/popup/src/pages/feeds.js

@@ -0,0 +1,77 @@
+// dexterm popup — FEEDS HUD (newest-first list over full-panel rain; task-1290 stub but functional).
+// Inlined after common.js under a CSP nonce. No remote content, no innerHTML: every untrusted string
+// (feed text, source, title) is rendered with textContent only. Data is a FeedVM pushed over the WS.
+(() => {
+  'use strict';
+  const DT = window.DT; DT.page = 'feeds';
+  const $ = (id) => document.getElementById(id);
+  const titleEl = $('title'), rowsEl = $('rows');
+  const rain = DT.mountRain('rain');
+  let items = [], sel = 0;
+
+  function relTime(t) {
+    if (t == null) return '';
+    const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
+    if (s < 60) return s + 's';
+    if (s < 3600) return Math.floor(s / 60) + 'm';
+    if (s < 86400) return Math.floor(s / 3600) + 'h';
+    return Math.floor(s / 86400) + 'd';
+  }
+
+  function resize() { if (rain) rain.resize(window.innerWidth, window.innerHeight); }
+  window.addEventListener('resize', resize);
+
+  function clear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
+
+  // newest-first; selection highlights a .row.sel; every value is textContent only.
+  function render() {
+    clear(rowsEl);
+    if (!items.length) {
+      const row = document.createElement('div'); row.className = 'row';
+      const k = document.createElement('div'); k.className = 'k muted'; k.textContent = 'feed';
+      const v = document.createElement('div'); v.className = 'v muted'; v.textContent = 'waiting for feed…';
+      row.appendChild(k); row.appendChild(v); rowsEl.appendChild(row);
+      return;
+    }
+    const ordered = items.slice().sort((a, b) => (b.t || 0) - (a.t || 0));
+    for (let i = 0; i < ordered.length; i++) {
+      const it = ordered[i];
+      const row = document.createElement('div'); row.className = 'row' + (i === sel ? ' sel' : '');
+      const k = document.createElement('div'); k.className = 'k';
+      const rt = relTime(it.t);
+      k.textContent = `${it.source || '—'}${rt ? ' · ' + rt : ''}`;
+      const v = document.createElement('div'); v.className = 'v' + (it.kind ? ' ' + kindCls(it.kind) : '');
+      v.textContent = it.text == null ? '' : String(it.text);
+      row.appendChild(k); row.appendChild(v); rowsEl.appendChild(row);
+    }
+    const selRow = rowsEl.children[sel];
+    if (selRow && selRow.scrollIntoView) selRow.scrollIntoView({ block: 'nearest' });
+  }
+  const kindCls = (k) => /up|buy|pump|good/i.test(k) ? 'up' : /down|sell|dump|rug|bad/i.test(k) ? 'down' : /warn|alert/i.test(k) ? 'warn' : 'muted';
+
+  // arrows move the selection; Enter emits the allow-listed feed.selected event (payload index into newest-first list).
+  window.addEventListener('keydown', (e) => {
+    if (!items.length) return;
+    if (e.key === 'ArrowDown') { sel = Math.min(items.length - 1, sel + 1); e.preventDefault(); render(); }
+    else if (e.key === 'ArrowUp') { sel = Math.max(0, sel - 1); e.preventDefault(); render(); }
+    else if (e.key === 'Enter') { e.preventDefault(); DT.send({ type: 'event', name: 'feed.selected', payload: { i: sel } }); }
+  });
+
+  function setData(vm) {
+    vm = vm || {};
+    items = Array.isArray(vm.items) ? vm.items : [];
+    if (sel >= items.length) sel = Math.max(0, items.length - 1);
+    titleEl.textContent = `dexterm · ${vm.title == null ? 'FEEDS' : String(vm.title)}`;
+    if (rain) { rain.setActivity(Math.min(1, 0.3 + items.length * 0.03)); rain.setSources(items.slice(0, 4).map((it) => String(it.source || ''))); }
+    DT.status(items.length ? items.length + ' items' : 'no feed', items.length ? 'up' : 'warn');
+    render();
+  }
+
+  DT.onData(setData);
+  DT.onTheme(render);
+  DT.wireChrome();
+  resize();
+  render();
+  DT.connect();
+  DT.loop(() => {});
+})();

package/dist/packages/popup/src/pages/narrative.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="dexterm-ws" content="__WS_TOKEN__">
+<meta name="dexterm-popup" content="__POPUP_ID__">
+<meta name="dexterm-port" content="__PORT__">
+<title>dexterm · narrative</title>
+<style nonce="__NONCE__">/*__CSS__*/</style>
+</head>
+<body>
+<div id="hud" class="hud">
+  <div id="drag" class="drag"><span class="mark">✦</span><span id="title" class="title">dexterm · NARRATIVE</span><span id="status" class="status">connecting…</span><button id="close" class="close" type="button" aria-label="close">✕</button></div>
+  <div class="stage"><canvas id="rain"></canvas><div class="body"><div id="rows" class="rows"></div></div></div>
+  <div id="foot" class="foot"><span id="meta">—</span><span id="limits">model output: none</span><span id="fps" class="fps">— fps</span></div>
+</div>
+<script nonce="__NONCE__">/*__COMMON_JS__*/</script>
+<script nonce="__NONCE__">/*__JS__*/</script>
+</body>
+</html>

package/dist/packages/popup/src/pages/narrative.js

@@ -0,0 +1,61 @@
+// dexterm popup — NARRATIVE BOARD HUD (task-1356, AI-SUITE-DESIGN §7). What is running and what is
+// working, over full-panel rain. Deterministic board (no model): every number is from the TUI's board VM.
+// Inlined after common.js under a CSP nonce. No remote content, no innerHTML: every untrusted string
+// (narrative name, runner symbol) is rendered with textContent only.
+(() => {
+  'use strict';
+  const DT = window.DT; DT.page = 'narrative';
+  const $ = (id) => document.getElementById(id);
+  const titleEl = $('title'), rowsEl = $('rows'), metaEl = $('meta'), limitsEl = $('limits');
+  const rain = DT.mountRain('rain');
+  let vm = null;
+
+  function resize() { if (rain) rain.resize(window.innerWidth, window.innerHeight); }
+  window.addEventListener('resize', resize);
+  function clear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
+
+  const fmtUsd = (v) => { if (v == null) return '—'; const a = Math.abs(v); if (a >= 1e9) return (v / 1e9).toFixed(2) + 'B'; if (a >= 1e6) return (v / 1e6).toFixed(2) + 'M'; if (a >= 1e3) return (v / 1e3).toFixed(1) + 'K'; return String(Math.round(v)); };
+  const fmtPct = (v) => (v == null ? '—' : (v > 0 ? '+' : '') + v.toFixed(1) + '%');
+
+  function render() {
+    clear(rowsEl);
+    const rows = vm && Array.isArray(vm.rows) ? vm.rows : [];
+    if (!rows.length) {
+      const row = document.createElement('div'); row.className = 'row';
+      const k = document.createElement('div'); k.className = 'k muted'; k.textContent = 'narrative';
+      const v = document.createElement('div'); v.className = 'v muted'; v.textContent = 'collecting narratives…';
+      row.appendChild(k); row.appendChild(v); rowsEl.appendChild(row);
+      return;
+    }
+    for (const n of rows) {
+      const row = document.createElement('div'); row.className = 'row';
+      const k = document.createElement('div'); k.className = 'k';
+      k.textContent = `${n.rank == null ? '·' : '#' + n.rank} ${n.narrative}`;
+      const v = document.createElement('div'); v.className = 'v';
+      const med = n.med_chg;
+      const runner = n.runner ? ` · ${n.runner.symbol} ${fmtPct(n.runner.chg)} ${fmtUsd(n.runner.mcap)}` : '';
+      v.textContent = `${n.score == null ? '—' : n.score} · ${n.tokens} tok · ${fmtUsd(n.vol)} · ${n.new_1h}/${n.new_24h} new · med ${fmtPct(med)}${runner}`;
+      if (med != null) v.className = 'v ' + (med >= 0 ? 'up' : 'down');
+      row.appendChild(k); row.appendChild(v); rowsEl.appendChild(row);
+    }
+  }
+
+  function setData(next) {
+    vm = next || {};
+    titleEl.textContent = `dexterm · NARRATIVE ${vm.window ? vm.window.toUpperCase() : ''}`;
+    metaEl.textContent = `${vm.tokens_total ?? 0} tokens · ${vm.unclassified_pct ?? 0}% unclassified · ${vm.copycats ?? 0} copycats · age ${vm.data_age ?? '—'} · lex v${vm.lexicon_version ?? '—'}`;
+    limitsEl.textContent = vm.limits || 'model output: none (deterministic). Name-based: X/TG-only narratives are missed.';
+    const n = (vm.rows || []).length;
+    if (rain) rain.setActivity(Math.min(1, 0.3 + n * 0.05));
+    DT.status(n ? n + ' narratives' : 'collecting', n ? 'up' : 'warn');
+    render();
+  }
+
+  DT.onData(setData);
+  DT.onTheme(render);
+  DT.wireChrome();
+  resize();
+  render();
+  DT.connect();
+  DT.loop(() => {});
+})();

package/dist/packages/popup/src/pages/plans.css

@@ -0,0 +1,30 @@
+/* dexterm popup — order plans & standing mandates page styles (task-1355). Reuses the roster layout classes
+   (rows, stats, control buttons) and adds the status-tone pill variants the plans/mandate statuses map to.
+   The palette comes from the theme CSS vars common.js sets (--text, --muted, --accent, --up, --down, …). */
+.body { overflow-y: auto; padding: 6px 8px; }
+.roster-summary { font: 12px ui-monospace, Menlo, monospace; color: var(--text); margin-bottom: 6px; }
+.roster-k { color: var(--accent); font-weight: 600; }
+.roster-dim { color: var(--dim); }
+
+.roster-agents { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
+.roster-row { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
+.roster-row.paused { opacity: 0.7; border-color: var(--warn); }
+.roster-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 12px ui-monospace, Menlo, monospace; }
+.roster-name { color: var(--text); font-weight: 600; }
+.roster-tier { font-size: 10px; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
+/* status tones (buy/armed = up, cancelled/expired/revoked = dim, paused = warn/down, else muted) */
+.tier-up { color: var(--up); border-color: color-mix(in srgb, var(--up) 55%, var(--border)); }
+.tier-dim { color: var(--dim); }
+.tier-muted { color: var(--muted); }
+.tier-bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 55%, var(--border)); }
+
+.roster-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font: 11px ui-monospace, Menlo, monospace; color: var(--muted); }
+.roster-stat.bad { color: var(--down); }
+
+.roster-ctl { display: flex; gap: 6px; margin-top: 6px; }
+.roster-btn { font: 11px ui-monospace, Menlo, monospace; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
+.roster-btn:hover { border-color: var(--borderFocus); }
+.roster-btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, var(--border)); }
+.roster-btn.danger:hover { border-color: var(--down); }
+
+.roster-audit-head { margin: 10px 0 4px; font: 11px ui-monospace, Menlo, monospace; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }

package/dist/packages/popup/src/pages/plans.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="dexterm-ws" content="__WS_TOKEN__">
+<meta name="dexterm-popup" content="__POPUP_ID__">
+<meta name="dexterm-port" content="__PORT__">
+<title>dexterm · plans</title>
+<style nonce="__NONCE__">/*__CSS__*/</style>
+</head>
+<body>
+<div id="hud" class="hud">
+  <div id="drag" class="drag"><span class="mark">◈</span><span id="title" class="title">dexterm · ORDER PLANS</span><span id="status" class="status">connecting…</span><button id="close" class="close" type="button" aria-label="close">✕</button></div>
+  <div class="stage"><canvas id="rain"></canvas><div class="body">
+    <div id="summary" class="roster-summary"></div>
+    <div class="roster-audit-head">order plans</div>
+    <div id="plans" class="roster-agents"></div>
+    <div class="roster-audit-head">standing mandates</div>
+    <div id="mandates" class="roster-agents"></div>
+  </div></div>
+  <div id="foot" class="foot"><span>arming needs a keypress at the terminal</span><span>read-only · cancel only</span><span id="fps" class="fps">— fps</span></div>
+</div>
+<script nonce="__NONCE__">/*__COMMON_JS__*/</script>
+<script nonce="__NONCE__">/*__JS__*/</script>
+</body>
+</html>

package/dist/packages/popup/src/pages/plans.js

@@ -0,0 +1,82 @@
+// dexterm popup — order plans & standing mandates page (task-1355). Renders the PlansVM: the conditional
+// order plans and the standing mandates with their status and ledgers, plus the journal-integrity note. This
+// popup is the read-only HUD of the signer trust domain: it receives VIEW MODELS only, never a key, a
+// signature, a mandate secret or trade capability. The ONLY message it can send is `plan.cancel` (cancel a
+// plan by id), which the terminal re-validates against its own live list before acting. There is deliberately
+// NO control here to arm, raise a cap, widen or arm a mandate, resume a paused plan, or sign — arming is a
+// physical keypress at the terminal, and the server drops anything off the event allow-list. Every untrusted
+// string (a coin symbol) is rendered with textContent only — never innerHTML.
+(() => {
+  'use strict';
+  const DT = window.DT; DT.page = 'plans';
+  const $ = (id) => document.getElementById(id);
+  const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = String(text); return e; };
+  const usd = (n) => { const x = Number(n); if (!Number.isFinite(x)) return '—'; const a = Math.abs(x); if (a >= 1e6) return `$${(x / 1e6).toFixed(2)}M`; if (a >= 1e3) return `$${(x / 1e3).toFixed(1)}k`; return `$${x.toFixed(2)}`; };
+  const ttl = (expiresAt, now) => { const ms = Number(expiresAt) - Number(now); if (!Number.isFinite(ms) || ms <= 0) return 'expired'; const h = Math.floor(ms / 3600000); const m = Math.floor((ms % 3600000) / 60000); return h > 0 ? `${h}h${m}m` : `${m}m`; };
+  // Status tone: armed / filling = up, cancelled/failed/expired/revoked = dim, else muted.
+  const tone = (status, paused) => paused ? 'bad' : /^(armed|filled)/.test(status) ? 'up' : /^(cancel|fail|expir|revok|done)/.test(status) ? 'dim' : 'muted';
+
+  let vm = null;
+
+  function render() {
+    if (!vm) return;
+    const sum = $('summary'); sum.textContent = '';
+    sum.appendChild(el('span', 'roster-k', vm.mode || 'PAPER'));
+    // Gate state is read-only here: turning hands-free on/off is a physical keypress at the terminal (G).
+    sum.appendChild(el('span', vm.handsFree ? 'roster-k tier-bad' : 'roster-k', vm.handsFree ? ' · HANDS-FREE' : ' · GATE ON'));
+    sum.appendChild(el('span', 'roster-dim', ` · ${vm.plans.length} plan${vm.plans.length === 1 ? '' : 's'} · ${vm.mandates.length} mandate${vm.mandates.length === 1 ? '' : 's'} · ${vm.journal || 'journal —'}`));
+
+    const ph = $('plans'); ph.textContent = '';
+    if (!vm.plans.length) ph.appendChild(el('div', 'roster-dim', 'no order plans. propose one: dexterm plan propose  (or by voice — a proposal is inert until you arm it with a keypress)'));
+    for (const p of vm.plans) {
+      const row = el('div', 'roster-row' + (p.paused ? ' paused' : ''));
+      const head = el('div', 'roster-row-head');
+      head.appendChild(el('span', 'roster-name', p.symbol));          // textContent — untrusted symbol is safe
+      head.appendChild(el('span', 'roster-tier tier-' + tone(p.status, p.paused), p.status + (p.paused ? ' · paused' : '')));
+      head.appendChild(el('span', 'roster-dim', ` ${p.side} · ${usd(p.sizeUsd)}${p.tier ? ' · ' + p.tier : ''}${p.mandateId ? ' · ' + p.mandateId : ''}`));
+      row.appendChild(head);
+      row.appendChild(el('div', 'roster-stats', p.readBack));         // textContent — the signer's read-back line
+      if (typeof p.levels === 'string' && p.levels) row.appendChild(el('div', 'roster-dim', p.levels)); // task-1366: mc + price per level
+      // Cancel is the only write; proposed/armed plans can be cancelled, terminal ones cannot.
+      if (!/^(cancel|fail|expir|done)/.test(p.status)) {
+        const ctl = el('div', 'roster-ctl');
+        const cancel = el('button', 'roster-btn danger', 'cancel'); cancel.type = 'button';
+        cancel.addEventListener('click', () => DT.send({ type: 'event', name: 'plan.cancel', payload: { id: p.id } }));
+        ctl.appendChild(cancel);
+        row.appendChild(ctl);
+      }
+      ph.appendChild(row);
+    }
+
+    const mh = $('mandates'); mh.textContent = '';
+    if (!vm.mandates.length) mh.appendChild(el('div', 'roster-dim', 'no standing mandates. draft one: dexterm mandate draft  (arming is a keypress; caps are signer-side and can never be raised)'));
+    for (const m of vm.mandates) {
+      const row = el('div', 'roster-row');
+      const head = el('div', 'roster-row-head');
+      head.appendChild(el('span', 'roster-name', m.id));
+      head.appendChild(el('span', 'roster-tier tier-' + tone(m.status, false), m.status));
+      head.appendChild(el('span', 'roster-dim', ` ${m.maxTier} · ${ttl(m.expiresAt, vm.now)}`));
+      row.appendChild(head);
+      const stats = el('div', 'roster-stats');
+      stats.appendChild(el('span', 'roster-stat', `budget ${usd(m.totalUsd)}`));
+      stats.appendChild(el('span', 'roster-stat', `reserved ${usd(m.reservedUsd)}`));
+      stats.appendChild(el('span', 'roster-stat', `spent ${usd(m.spentUsd)}`));
+      stats.appendChild(el('span', 'roster-stat', `pnl ${usd(m.realizedUsd)}`));
+      stats.appendChild(el('span', 'roster-stat' + (m.lossUsd ? ' bad' : ''), `loss ${usd(m.lossUsd)}`));
+      stats.appendChild(el('span', 'roster-stat', `/trade ${usd(m.perTradeUsd)} · /coin ${usd(m.perCoinUsd)}`));
+      row.appendChild(stats);
+      mh.appendChild(row);
+    }
+    const armed = vm.plans.filter((p) => /^armed/.test(p.status)).length;
+    DT.status(`${vm.plans.length} plan${vm.plans.length === 1 ? '' : 's'}${armed ? ` · ${armed} armed` : ''}`, armed ? 'up' : 'muted');
+  }
+
+  DT.onHello(() => { DT.mountRain('rain'); const r = DT.rain(); if (r) { r.setActivity(0.2); r.setMood('rain'); } });
+  DT.onData((payload) => { vm = payload; render(); });
+  DT.onUpdate(() => { /* plans are pushed as full `data` frames; nothing incremental */ });
+  DT.wireChrome();
+  let lastTick = 0;
+  DT.rainEvery = 2; DT.fpsCap = 30;
+  DT.loop((now) => { if (now - lastTick > 1000) { lastTick = now; if (vm) render(); } });
+  DT.connect();
+})();

package/dist/packages/popup/src/pages/roster.css

@@ -0,0 +1,41 @@
+/* dexterm popup — agent roster page styles (task-1345). Responsive: compact under ~90 cols, roomy wider.
+   The palette comes from the theme CSS vars common.js sets (--text, --muted, --accent, --up, --down, …). */
+.body { overflow-y: auto; padding: 6px 8px; }
+.roster-summary { font: 12px ui-monospace, Menlo, monospace; color: var(--text); margin-bottom: 6px; }
+.roster-k { color: var(--accent); font-weight: 600; }
+.roster-dim { color: var(--dim); }
+
+.roster-agents { display: flex; flex-direction: column; gap: 6px; }
+.roster-row { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
+.roster-row.paused { opacity: 0.6; border-color: var(--warn); }
+.roster-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 12px ui-monospace, Menlo, monospace; }
+.roster-name { color: var(--text); font-weight: 600; }
+.roster-tier { font-size: 10px; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
+.tier-observe { color: var(--muted); }
+.tier-annotate { color: var(--accent); border-color: var(--accent); }
+.tier-propose { color: var(--pump); border-color: var(--pump); }
+.roster-badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--warn); color: #000; }
+
+.roster-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font: 11px ui-monospace, Menlo, monospace; color: var(--muted); }
+.roster-stat.bad { color: var(--down); }
+
+.roster-ctl { display: flex; gap: 6px; margin-top: 6px; }
+.roster-btn { font: 11px ui-monospace, Menlo, monospace; padding: 2px 10px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
+.roster-btn:hover { border-color: var(--borderFocus); }
+.roster-btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, var(--border)); }
+.roster-btn.danger:hover { border-color: var(--down); }
+
+.roster-audit-head { margin: 10px 0 4px; font: 11px ui-monospace, Menlo, monospace; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
+.roster-audit { display: flex; flex-direction: column; gap: 1px; font: 11px ui-monospace, Menlo, monospace; }
+.roster-audit-row { display: grid; grid-template-columns: 34px 90px 72px 1fr; gap: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; }
+.roster-audit-row.bad { color: var(--down); }
+.roster-audit-t { color: var(--dim); }
+.roster-audit-agent { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
+.roster-audit-kind { color: var(--accent); }
+.roster-audit-tool { display: none; }
+.roster-audit-detail { overflow: hidden; text-overflow: ellipsis; }
+
+@media (min-width: 720px) {
+  .roster-audit-row { grid-template-columns: 40px 120px 90px 140px 1fr; }
+  .roster-audit-tool { display: inline; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
+}

package/dist/packages/popup/src/pages/roster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="dexterm-ws" content="__WS_TOKEN__">
+<meta name="dexterm-popup" content="__POPUP_ID__">
+<meta name="dexterm-port" content="__PORT__">
+<title>dexterm · agents</title>
+<style nonce="__NONCE__">/*__CSS__*/</style>
+</head>
+<body>
+<div id="hud" class="hud">
+  <div id="drag" class="drag"><span class="mark">✦</span><span id="title" class="title">dexterm · AGENTS</span><span id="status" class="status">connecting…</span><button id="close" class="close" type="button" aria-label="close">✕</button></div>
+  <div class="stage"><canvas id="rain"></canvas><div class="body">
+    <div id="summary" class="roster-summary"></div>
+    <div id="agents" class="roster-agents"></div>
+    <div class="roster-audit-head">audit log</div>
+    <div id="audit" class="roster-audit"></div>
+  </div></div>
+  <div id="foot" class="foot"><span>pause / kick per agent</span><span>untrusted by default</span><span id="fps" class="fps">— fps</span></div>
+</div>
+<script nonce="__NONCE__">/*__COMMON_JS__*/</script>
+<script nonce="__NONCE__">/*__JS__*/</script>
+</body>
+</html>