dexterm-cli 0.1.5 → 0.1.7

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

@@ -12,8 +12,11 @@
   const $ = (id) => document.getElementById(id);
   const titleEl = $('title'), legendEl = $('legend'), liveEl = $('live'), bannerEl = $('banner'), hintEl = $('hint');
   const posEl = $('pos'), posTitleEl = $('pos-title'), posCapEl = $('pos-cap'), posCellsEl = $('pos-cells');
+  const chipEl = $('pnlchip');
   const imgSlot = $('coin-img-slot');
   const chartEl = $('chart'), drawCv = $('draw'), dctx = drawCv.getContext('2d');
+  // task-1483: the BUY / SELL marker hover card (built with textContent only)
+  const tipEl = document.createElement('div'); tipEl.className = 'mtip'; tipEl.hidden = true; chartEl.parentNode.appendChild(tipEl);
   const STALE_MS = 20_000;
   const DEFAULT_IND = ['volume', 'tape', 'ema9', 'ema21'];
   /** Exposed for the headless harness (measure/popup-v2-1325): first paint + setData → repaint latency. */
@@ -25,6 +28,8 @@
     draw: null, tPending: null, hover: null, drawings: [], lastDataAt: 0, firstPainted: false, fitNext: true,
     banners: { fallback: null, data: null },
     display: C.displayOf(null), // task-1366: price | mcap (from the VM's priceMode + supply)
+    marks: null, // task-1483: { set, on } — the BUY / SELL markers for the bars on screen (chart-lib chartMarkers)
+    mouse: null, // task-1483: crosshair point for the marker hover card
   };
 
   const banner = () => {
@@ -57,7 +62,7 @@
     if (type === 2) return String(d.getUTCDate());
     return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
   }
-  const volFmt = (v) => C.fmtUsd(v);
+  const volFmt = (v) => C.fmtCompactUsd(v); // task-1472: volume stays USD, compact k/M
 
   // ---------------------------------------------------------------- chart + series
   const chart = L.createChart(chartEl, {
@@ -80,14 +85,15 @@
     handleScroll: { mouseWheel: true, pressedMouseMove: true, horzTouchDrag: true, vertTouchDrag: false },
     handleScale: { axisPressedMouseMove: { time: true, price: true }, axisDoubleClickReset: true, mouseWheel: true, pinch: true },
   });
-  // task-1366: the axis formatter follows the terminal's price mode (mcap = price × the current supply, K/M/B)
+  // task-1366/1472: the axis formatter follows the terminal's chart axis (mcap = price × the current supply, compact k/M/B)
   const pricePF = (p) => ({ type: 'custom', formatter: C.axisFormatter(S.display), minMove: C.priceFormatFor(p).minMove });
   // Keep the position levels (entry / stop / target) and the live price in view: autoscale widens to include them
   // when they are within 3× of the last close (a far-away level would squash the candles; its row cell still shows it).
   function levels() {
     const vm = S.vm || {}, pos = vm.position || null, out = [];
     const last = S.bars.length ? S.bars[S.bars.length - 1].close : null;
-    for (const v of [pos && pos.avgEntryUsd, pos && pos.stopUsd, pos && pos.targetUsd, vm.feed === 'LIVE' ? vm.livePrice : null]) {
+    const mk = S.marks && S.marks.on ? S.marks.set.markers.map((m) => m.priceUsd) : []; // task-1483: keep the fills in view
+    for (const v of [pos && pos.avgEntryUsd, pos && pos.stopUsd, pos && pos.targetUsd, vm.feed === 'LIVE' ? vm.livePrice : null, ...mk]) {
       if (typeof v === 'number' && v > 0 && last && v / last < 3 && last / v < 3) out.push(v);
     }
     return out;
@@ -159,13 +165,18 @@
   DT.onTheme(applyChartTheme);
 
   // ---------------------------------------------------------------- toolbar (buttons built with textContent only)
-  const btns = { tf: new Map(), styles: new Map(), scales: new Map(), inds: new Map(), draws: new Map() };
+  const btns = { tf: new Map(), axis: new Map(), marks: new Map(), styles: new Map(), scales: new Map(), inds: new Map(), draws: new Map() };
   function mkBtn(group, id, label, title, onClick) {
     const b = document.createElement('button'); b.type = 'button'; b.className = 'tb'; b.textContent = label; b.title = title;
     b.addEventListener('click', (e) => { e.preventDefault(); onClick(); });
     $(group).appendChild(b); btns[group].set(id, b); return b;
   }
   C.INTERVALS.forEach((iv, i) => mkBtn('tf', iv, iv, `timeframe ${iv} (${i + 1})`, () => requestInterval(iv)));
+  // task-1472: MCAP | PRICE asks the terminal to switch (and save) the chart axis; the next VM re-labels the page
+  mkBtn('axis', 'mcap', 'MCAP', 'Y axis: market cap (A / y toggles; saved by the terminal)', () => setAxis('mcap'));
+  mkBtn('axis', 'price', 'PRICE', 'Y axis: USD price (A / y toggles; saved by the terminal)', () => setAxis('price'));
+  // task-1483: MARKERS on/off asks the terminal to switch (and save) display.chartMarkers; the next VM carries it
+  mkBtn('marks', 'on', 'MARKERS', 'BUY / SELL markers of your paper + live fills (k toggles; saved by the terminal)', () => setMarkers(!(S.vm && S.vm.marks && S.vm.marks.on)));
   mkBtn('styles', 'candles', 'candles', 'candlesticks (c cycles)', () => setStyle('candles', true));
   mkBtn('styles', 'line', 'line', 'line (c cycles)', () => setStyle('line', true));
   mkBtn('styles', 'area', 'area', 'area (c cycles)', () => setStyle('area', true));
@@ -183,6 +194,10 @@
   mkBtn('draws', 'x', '✕ clear', 'clear drawings (x; backspace = undo last)', () => clearDrawings());
   function syncToolbar() {
     for (const [iv, b] of btns.tf) { b.classList.toggle('on', iv === S.interval); b.classList.toggle('pending', iv === S.pendingInterval && iv !== S.interval); }
+    const ax = S.vm && S.vm.priceMode === 'mcap' ? 'mcap' : 'price';
+    for (const [k, b] of btns.axis) b.classList.toggle('on', k === ax);
+    const mOn = !!(S.vm && S.vm.marks && S.vm.marks.on);
+    for (const [, b] of btns.marks) { b.classList.toggle('on', mOn); b.hidden = !(S.vm && S.vm.marks); }
     for (const [k, b] of btns.styles) b.classList.toggle('on', k === S.style);
     for (const [k, b] of btns.scales) b.classList.toggle('on', k === S.scale);
     for (const [k, b] of btns.inds) b.classList.toggle('on', S.ind.has(k));
@@ -196,6 +211,16 @@
     S.pendingInterval = iv; S.reqAt = performance.now(); syncToolbar();
     DT.send({ type: 'event', name: 'chart.interval', payload: { interval: iv } });
   }
+  /** task-1472: ask the terminal for a Y axis; nothing changes here until its next VM carries the new mode. */
+  function setAxis(axis) {
+    if (axis !== 'mcap' && axis !== 'price') return;
+    DT.send({ type: 'event', name: 'chart.axis', payload: { axis } });
+  }
+  /** task-1483: ask the terminal to show / hide the markers; nothing changes here until its next VM says so. */
+  function setMarkers(on) {
+    if (typeof on !== 'boolean') return;
+    DT.send({ type: 'event', name: 'chart.markers', payload: { on } });
+  }
   function setStyle(st, user) {
     if (!C.STYLES.includes(st) || st === S.style) return;
     S.style = st;
@@ -260,9 +285,82 @@
     const times = new Set(S.bars.map((b) => b.time));
     const list = [];
     if (S.ind.has('tape')) list.push(...C.tapeMarkers(vm.trades, periodMs(), times, { up: DT.rgba(T.up, 0.85), down: DT.rgba(T.down, 0.85) }));
-    if (vm.position && vm.position.fills) list.push(...C.fillMarkers(vm.position.fills, periodMs(), times, { buy: T.accent, sell: T.warn }));
     list.sort((a, b) => a.time - b.time);
     markers[S.style].setMarkers(list);
+    computeMarks();
+  }
+
+  // ---------------------------------------------------------------- task-1483: BUY / SELL markers of the ledgers' fills
+  // Bucketed to THIS page's timeframe by the bars' real times (re-bucketed on every timeframe change), drawn on the
+  // overlay canvas so paper (hollow) and live (solid) read apart, re-clustered when zooming out, hover card per marker.
+  function computeMarks() {
+    const mk = S.vm && S.vm.marks;
+    if (!mk) { S.marks = null; return; }
+    S.marks = { on: !!mk.on, truncated: mk.truncated | 0, set: C.chartMarkers(mk.fills, periodMs(), S.bars.map((b) => b.t)) };
+  }
+  const MARK_PX = 6;
+  let markHits = [];
+  function drawMarks(ts, s, paneH) {
+    markHits = [];
+    const mk = S.marks;
+    if (!mk || !mk.on || !S.bars.length) return;
+    const x0 = ts.logicalToCoordinate(0), x1 = ts.logicalToCoordinate(1);
+    const spacing = x0 != null && x1 != null ? Math.abs(x1 - x0) : 7;
+    // closed round trips: a faint wash entry → exit (green when sold above the entry)
+    for (const r of mk.set.trips) {
+      const a = C.logicalOf(S.bars, C.chartTime(Math.floor(r.openT / periodMs()) * periodMs()), periodMs() / 1000);
+      const b = C.logicalOf(S.bars, C.chartTime(Math.floor(r.closeT / periodMs()) * periodMs()), periodMs() / 1000);
+      const xa = ts.logicalToCoordinate(a), xb = ts.logicalToCoordinate(b);
+      if (xa == null || xb == null) continue;
+      const win = r.entryUsd !== null && r.exitUsd !== null ? r.exitUsd >= r.entryUsd : null;
+      dctx.fillStyle = DT.rgba(win === null ? T.muted : win ? T.up : T.down, 0.07);
+      dctx.fillRect(Math.min(xa, xb) - spacing / 2, 0, Math.abs(xb - xa) + spacing, paneH);
+    }
+    const shown = C.clusterMarkers(mk.set.markers, spacing, 14);
+    const used = new Map();
+    dctx.font = 'bold 10px ui-monospace, Menlo, monospace'; dctx.textAlign = 'center'; dctx.textBaseline = 'middle';
+    for (const m of shown) {
+      const x = ts.logicalToCoordinate(m.index);
+      const bar = S.bars[m.index];
+      if (x == null || !bar) continue;
+      const buy = m.side === 'buy';
+      let y = m.priceUsd !== null ? s.priceToCoordinate(m.priceUsd) : s.priceToCoordinate(buy ? bar.low : bar.high);
+      if (y == null) continue;
+      if (m.priceUsd === null) y += buy ? 4 : -4; // no recorded price: against the bar, never at a made-up price
+      // a second marker on the same bar and side steps away from the bar, never across it
+      const k = `${m.index}|${m.side}`; const n = used.get(k) || 0; used.set(k, n + 1);
+      if (n) y += (buy ? 1 : -1) * n * (MARK_PX * 1.6 + 12);
+      if (y < -20 || y > paneH + 20) continue;
+      const g = C.markerShape(m.side, x, y, MARK_PX);
+      const col = buy ? T.up : T.down;
+      dctx.beginPath(); dctx.moveTo(g.tri[0][0], g.tri[0][1]); dctx.lineTo(g.tri[1][0], g.tri[1][1]); dctx.lineTo(g.tri[2][0], g.tri[2][1]); dctx.closePath();
+      // a dark halo first, so a green buy still reads on a green candle (and a red sell on a red one)
+      dctx.setLineDash([]); dctx.lineJoin = 'round'; dctx.lineWidth = 4; dctx.strokeStyle = DT.rgba(T.bg, 0.92); dctx.stroke();
+      if (m.source === 'live') { dctx.fillStyle = col; dctx.fill(); dctx.lineWidth = 1.2; dctx.strokeStyle = DT.rgba(T.text, 0.95); dctx.stroke(); } // solid + a light edge: never mistaken for a hollow paper mark on a same-colour candle
+      else { dctx.fillStyle = DT.rgba(T.bg, 0.85); dctx.fill(); dctx.fillStyle = DT.rgba(col, 0.22); dctx.fill(); dctx.lineWidth = 1.6; dctx.strokeStyle = col; dctx.stroke(); }
+      const txt = `${C.markerLetter(m.side)}${m.count > 1 ? '×' + m.count : ''}`;
+      dctx.lineWidth = 3; dctx.strokeStyle = DT.rgba(T.bg, 0.92); dctx.strokeText(txt, g.labelX, g.labelY);
+      dctx.fillStyle = col; dctx.fillText(txt, g.labelX, g.labelY);
+      markHits.push({ m, hit: g.hit, x, y });
+    }
+    hoverMarks();
+  }
+  /** The hover card for the marker under the crosshair (time, price, size, source). Text only. */
+  function hoverMarks() {
+    const p = S.mouse;
+    const hit = p ? markHits.find((h) => p.x >= h.hit.x0 && p.x <= h.hit.x1 && p.y >= h.hit.y0 && p.y <= h.hit.y1) : null;
+    if (!hit) { if (!tipEl.hidden) tipEl.hidden = true; return; }
+    const lines = C.markerTooltip(hit.m, S.display, (ms) => fmtTime(C.chartTime(ms)));
+    const key = lines.join('|');
+    if (tipEl.dataset.k !== key) {
+      tipEl.dataset.k = key;
+      while (tipEl.firstChild) tipEl.removeChild(tipEl.firstChild);
+      lines.forEach((t, i) => tipEl.appendChild(el('div', i === 0 ? `h ${hit.m.side}` : i === lines.length - 1 ? `src ${hit.m.source}` : null, t)));
+    }
+    tipEl.hidden = false;
+    const w = chartEl.clientWidth;
+    const left = hit.x + 14 + 190 > w ? hit.x - 14 - tipEl.offsetWidth : hit.x + 14;
+    tipEl.style.left = `${Math.max(4, left)}px`; tipEl.style.top = `${Math.max(4, hit.y - 20)}px`;
   }
 
   function renderOverlays() {
@@ -270,7 +368,8 @@
     const pos = vm.position || null;
     if (pos && typeof pos.avgEntryUsd === 'number' && pos.avgEntryUsd > 0) {
       const pct = typeof pos.unrealizedPct === 'number' ? ` ${C.fmtPct(pos.unrealizedPct, 1)}` : '';
-      setLine('entry', { price: pos.avgEntryUsd, color: T.warn, lineWidth: 1, lineStyle: L.LineStyle.Solid, axisLabelVisible: true, axisLabelColor: T.warn, axisLabelTextColor: T.bg, title: `ENTRY ${pos.sizeLabel}${pct}` });
+      // task-1483: the average entry of the open position is a DASHED line (fills are the triangles)
+      setLine('entry', { price: pos.avgEntryUsd, color: pos.kind === 'paper' ? T.warn : T.text, lineWidth: 1, lineStyle: L.LineStyle.LargeDashed, axisLabelVisible: true, axisLabelColor: pos.kind === 'paper' ? T.warn : T.text, axisLabelTextColor: T.bg, title: `AVG ENTRY ${pos.sizeLabel}${pct}` });
     } else setLine('entry', null);
     setLine('stop', pos && typeof pos.stopUsd === 'number' && pos.stopUsd > 0 ? { price: pos.stopUsd, color: T.down, lineWidth: 1, lineStyle: L.LineStyle.Dashed, axisLabelVisible: true, title: 'STOP' } : null);
     setLine('target', pos && typeof pos.targetUsd === 'number' && pos.targetUsd > 0 ? { price: pos.targetUsd, color: T.up, lineWidth: 1, lineStyle: L.LineStyle.Dashed, axisLabelVisible: true, title: 'TARGET' } : null);
@@ -331,8 +430,14 @@
       r2.appendChild(s);
     }
     if (r2.firstChild) legendEl.appendChild(r2);
+    // task-1483: which markers are on screen, and what the window left off (never moved onto another bar)
+    if (S.marks && S.marks.on) {
+      const lg = C.markerLegend(S.marks.set.markers);
+      const om = C.omittedNote({ ...S.marks.set, before: S.marks.set.before + S.marks.truncated });
+      if (lg || om) { const r3 = el('div', 'row3'); if (lg) r3.appendChild(el('span', S.marks.set.markers.some((m) => m.source === 'paper') ? 'paper' : null, lg)); if (om) r3.appendChild(el('span', null, `${lg ? '  · ' : ''}${om}`)); legendEl.appendChild(r3); }
+    }
   }
-  chart.subscribeCrosshairMove((p) => { S.hover = p && p.time != null ? p.time : null; renderLegend(S.hover); });
+  chart.subscribeCrosshairMove((p) => { S.hover = p && p.time != null ? p.time : null; S.mouse = p && p.point ? { x: p.point.x, y: p.point.y } : null; renderLegend(S.hover); });
 
   // ---------------------------------------------------------------- header, LIVE badge, banner, position row
   function renderHeader() {
@@ -397,6 +502,23 @@
     }
   }
 
+  // task-1473 r2: the POSITION PnL chip (formatted terminal-side; textContent only, display only)
+  function renderChip() {
+    const chip = S.vm && S.vm.chip;
+    if (!chipEl) return;
+    if (!chip || !Array.isArray(chip.segments) || !chip.segments.length) { chipEl.hidden = true; return; }
+    chipEl.hidden = false;
+    while (chipEl.firstChild) chipEl.removeChild(chipEl.firstChild);
+    const tone = ['up', 'down'].includes(chip.tone) ? chip.tone : '';
+    for (const sg of chip.segments.slice(0, 8)) {
+      const id = ['head', 'pnl', 'peak', 'px', 'held', 'dd', 'tp'].includes(sg.id) ? sg.id : 'x';
+      let cls = `seg ${id}`;
+      if (id === 'pnl') cls += ` ${tone}${chip.newPeak ? ' flash' : ''}`;
+      if (id === 'peak') cls += ` ${/^peak −/.test(String(sg.text)) ? 'down' : 'up'}`;
+      chipEl.appendChild(el('span', cls, String(sg.text).slice(0, 48)));
+    }
+  }
+
   // ---------------------------------------------------------------- incoming view models
   function onData(vm) {
     if (!vm || typeof vm !== 'object') return;
@@ -409,7 +531,7 @@
     // task-1366: a mode / supply change re-labels the axis in place (the bars are prices either way)
     const disp = C.displayOf(vm);
     if (disp.key !== S.display.key) { S.display = disp; applyPriceFormat(); }
-    if (tail && (!vm.seriesKey || vm.seriesKey !== S.key)) { S.vm = { ...vm, candles: [] }; renderHeader(); renderPosition(); renderOverlays(); return; }
+    if (tail && (!vm.seriesKey || vm.seriesKey !== S.key)) { S.vm = { ...vm, candles: [] }; renderHeader(); renderPosition(); renderChip(); renderOverlays(); computeMarks(); syncToolbar(); return; }
     const intervalChanged = vm.interval !== S.interval;
     S.interval = vm.interval;
     const answered = S.pendingInterval === vm.interval ? S.reqAt : null;
@@ -425,7 +547,7 @@
       if (intervalChanged || S.key !== prevKey) S.fitNext = true;
       renderFull();
     }
-    renderHeader(); renderLegend(S.hover); renderDataBanner(); renderPosition(); syncToolbar(); renderLive();
+    renderHeader(); renderLegend(S.hover); renderDataBanner(); renderPosition(); renderChip(); syncToolbar(); renderLive();
     // rain mood follows direction (gold on a pump, red-shift on a dump), as in the v1 HUD; chg is in percent
     const dir = vm.chg ? (vm.chg.h24 ?? vm.chg.h1 ?? 0) : 0;
     if (rain) { rain.setMood(dir > 1 ? 'rainPump' : dir < -1 ? 'rainDump' : 'rain'); rain.setActivity(Math.min(1, 0.4 + Math.abs(dir) / 100)); rain.setSources([String(vm.symbol || ''), String(vm.mint || '').slice(0, 6)]); }
@@ -492,10 +614,12 @@
     dctx.clearRect(0, 0, w, h);
     const segs = S.drawings.filter((d) => d.kind === 't').map((d) => [d.a, d.b]);
     if (S.tPending && mouse) segs.push([S.tPending, mouse]);
-    if (!segs.length || !S.bars.length) return;
+    if (!S.bars.length) return;
     const ts = chart.timeScale(), s = active(), pS = periodMs() / 1000;
     const paneH = chart.panes()[0] ? chart.panes()[0].getHeight() : h;
     dctx.save(); dctx.beginPath(); dctx.rect(0, 0, ts.width(), paneH); dctx.clip();
+    drawMarks(ts, s, paneH); // task-1483
+    if (!segs.length) { dctx.restore(); return; }
     dctx.strokeStyle = T.accent; dctx.fillStyle = T.accent; dctx.lineWidth = 1.5;
     for (const [a, b] of segs) {
       const xa = ts.logicalToCoordinate(C.logicalOf(S.bars, a.time, pS)), xb = ts.logicalToCoordinate(C.logicalOf(S.bars, b.time, pS));
@@ -514,6 +638,7 @@
     const n = parseInt(k, 10);
     if (n >= 1 && n <= 6) { requestInterval(C.INTERVALS[n - 1]); return; }
     switch (k) {
+      case 'A': case 'y': setAxis(S.vm && S.vm.priceMode === 'mcap' ? 'price' : 'mcap'); break; // task-1472
       case 'c': setStyle(C.STYLES[(C.STYLES.indexOf(S.style) + 1) % C.STYLES.length], true); break;
       case 'a': setScale('auto', true); break;
       case 'l': setScale(S.scale === 'log' ? 'auto' : 'log', true); break;
@@ -523,6 +648,7 @@
       case 'm': toggleInd('volma'); break;
       case 'v': toggleInd('volume'); break;
       case 'b': toggleInd('tape'); break;
+      case 'k': setMarkers(!(S.vm && S.vm.marks && S.vm.marks.on)); break; // task-1483
       case 'h': armDraw('h'); break;
       case 't': armDraw('t'); break;
       case 'x': clearDrawings(); break;

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

@@ -43,3 +43,48 @@
 .spec-act-age { color: var(--warn); }
 
 .spec-foot-redact { color: var(--up); font-weight: 600; }
+
+/* task-1466 spectator v2: the agent story (phase rail + heartbeat, thought ribbon, call timeline, vetting + PAPER cards) */
+.spec-story { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; font: 12px ui-monospace, Menlo, monospace; }
+.spec-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.spec-heart { width: 10px; height: 10px; border-radius: 50%; background: var(--down); margin-right: 6px; box-shadow: 0 0 8px var(--down); animation: spec-beat 1s infinite ease-out; }
+.spec-heart.still { animation: none; background: var(--warn); box-shadow: none; }
+.spec-heart.dead { animation: none; background: var(--dim); box-shadow: none; }
+@keyframes spec-beat { 0% { transform: scale(1.35); opacity: 1; } 30% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1); opacity: 0.85; } }
+.spec-bpm { color: var(--muted); margin-right: 8px; min-width: 44px; }
+.spec-phase { padding: 2px 8px; border-radius: 4px; color: var(--dim); border: 1px solid transparent; letter-spacing: 0.05em; }
+.spec-phase.done { color: var(--muted); }
+.spec-phase.on { color: #000; background: var(--accent); font-weight: 700; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
+.spec-phase.on.p-vetting { background: var(--borderFocus); box-shadow: 0 0 12px color-mix(in srgb, var(--borderFocus) 60%, transparent); }
+.spec-phase.on.p-sizing { background: var(--warn); }
+.spec-phase.on.p-executing { background: var(--up); }
+.spec-phase.on.p-holding { background: var(--pump); }
+.spec-phase.on.p-exiting { background: var(--ai, var(--accent)); }
+.spec-sep { color: var(--border); }
+.spec-paper { margin-left: auto; padding: 1px 6px; border-radius: 4px; background: var(--warn); color: #000; font-weight: 700; }
+.spec-ctlstate { padding: 1px 6px; border-radius: 4px; font-weight: 700; color: #000; }
+.spec-ctlstate.paused { background: var(--warn); }
+.spec-ctlstate.takeover { background: var(--accent); }
+.spec-ctlstate.killed { background: var(--down); color: #fff; }
+.spec-ribbon { padding: 6px 8px; border-left: 3px solid var(--ai, var(--accent)); background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--text); min-height: 1.4em; }
+.spec-ribbon.ours { border-left-color: var(--border); color: var(--muted); font-style: italic; }
+.spec-ribbon-who { color: var(--ai, var(--accent)); margin-right: 6px; font-style: normal; }
+.spec-timeline { display: flex; align-items: flex-start; gap: 0; overflow: hidden; justify-content: flex-end; }
+.spec-node { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 2px; }
+.spec-node-l { color: var(--text); white-space: nowrap; }
+.spec-node.paper .spec-node-l { color: var(--warn); font-weight: 700; }
+.spec-chip { font-size: 10px; padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
+.spec-chip.slow { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
+.spec-chip.fail, .spec-chip.refused { background: color-mix(in srgb, var(--down) 22%, transparent); color: var(--down); }
+.spec-link { color: var(--border); align-self: flex-start; margin-top: 1px; }
+.spec-cards { display: flex; flex-wrap: wrap; gap: 8px; }
+.spec-card { flex: 1 1 220px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
+.spec-card-h { color: #000; background: var(--borderFocus); font-weight: 700; padding: 0 6px; border-radius: 3px; display: inline-block; margin-bottom: 4px; }
+.spec-card.trade .spec-card-h { background: var(--pump); }
+.spec-check { margin-right: 8px; color: var(--dim); }
+.spec-check.ok { color: var(--up); font-weight: 600; }
+.spec-big { font-size: 30px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
+.spec-big.up { color: var(--up); text-shadow: 0 0 14px color-mix(in srgb, var(--up) 45%, transparent); }
+.spec-big.down { color: var(--down); }
+.spec-kv { color: var(--muted); }
+.spec-kv b { color: var(--text); font-weight: 600; }

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

@@ -12,6 +12,7 @@
 <div id="hud" class="hud">
   <div id="drag" class="drag"><span class="mark">✦</span><span id="title" class="title">dexterm · WATCH THE AGENT COOK</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="story" class="spec-story"></div>
     <div id="screen" class="spec-screen"></div>
     <div id="agents" class="spec-agents"></div>
     <div class="spec-activity-head">agent activity</div>

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

@@ -14,8 +14,77 @@
 
   let vm = null;
 
+  const pctS = (p) => (p == null ? '—' : `${p >= 0 ? '+' : '−'}${Math.abs(p * 100).toFixed(1)}%`);
+  const px = (n) => (n == null ? '—' : n >= 1 ? `$${n.toFixed(4)}` : `$${Number(n.toPrecision(3))}`);
+  const fmtMs = (ms) => (ms == null ? '·' : ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`);
+  const CHECKS = ['price', 'tape', 'chart', 'holders', 'rug', 'dev', 'larp', 'verdict'];
+
+  // task-1466 spectator v2: the agent story above the activity list (textContent only; strings redacted TUI-side).
+  function renderStory(st) {
+    const host = $('story'); host.textContent = '';
+    if (!st) return;
+    const rail = el('div', 'spec-rail');
+    const heart = el('span', 'spec-heart' + (st.control === 'killed' ? ' dead' : st.control !== 'running' ? ' still' : ''));
+    if (st.bpm > 0) heart.style.animationDuration = `${(60 / st.bpm).toFixed(2)}s`;
+    rail.appendChild(heart);
+    rail.appendChild(el('span', 'spec-bpm', st.control === 'killed' ? '— bpm' : `${st.bpm} bpm`));
+    const ai = st.rail.indexOf(st.phase);
+    st.rail.forEach((p, i) => {
+      if (i) rail.appendChild(el('span', 'spec-sep', '─'));
+      const on = i === ai && st.control !== 'killed';
+      rail.appendChild(el('span', 'spec-phase p-' + p + (on ? ' on' : i < ai ? ' done' : ''), (on ? '▸' : '') + p.toUpperCase() + (on && st.sub ? ` · ${st.sub}` : '')));
+    });
+    if (st.control !== 'running') rail.appendChild(el('span', 'spec-ctlstate ' + st.control, st.control === 'killed' ? '■ KILLED' : st.control === 'paused' ? '❚❚ PAUSED' : 'YOU ARE DRIVING'));
+    rail.appendChild(el('span', 'spec-paper', 'PAPER'));
+    host.appendChild(rail);
+    const th = (st.thoughts || []).slice().reverse();
+    const agentT = th.find((x) => x.source === 'agent');
+    const ours = th.find((x) => x.source === 'dexterm');
+    const pick = agentT && (!ours || agentT.t >= ours.t - 1500 || Date.now() - agentT.t < 9000) ? agentT : ours || agentT;
+    const rib = el('div', 'spec-ribbon' + (pick && pick.source === 'dexterm' ? ' ours' : ''));
+    if (pick) { if (pick.source === 'agent') rib.appendChild(el('span', 'spec-ribbon-who', '❯')); rib.appendChild(el('span', '', pick.text)); }
+    else rib.appendChild(el('span', 'spec-dim', 'the agent has not said anything yet'));
+    host.appendChild(rib);
+    const tl = el('div', 'spec-timeline');
+    (st.nodes || []).slice(-14).forEach((n, i) => {
+      if (i) tl.appendChild(el('span', 'spec-link', '──'));
+      const node = el('div', 'spec-node' + (n.paper ? ' paper' : ''));
+      node.appendChild(el('span', 'spec-node-l', `${n.status === 'refused' ? '✗' : n.paper ? '■' : '●'} ${n.label}${n.count > 1 ? ` ×${n.count}` : ''}`));
+      node.appendChild(el('span', 'spec-chip ' + n.status, n.status === 'refused' ? 'refused' : fmtMs(n.ms)));
+      tl.appendChild(node);
+    });
+    host.appendChild(tl);
+    const cards = el('div', 'spec-cards');
+    if (st.focus) {
+      const c = el('div', 'spec-card');
+      c.appendChild(el('span', 'spec-card-h', `VETTING $${st.focus.symbol}`));
+      const row = el('div');
+      for (const k of CHECKS) row.appendChild(el('span', 'spec-check' + (st.focus.checks.includes(k) ? ' ok' : ''), `${st.focus.checks.includes(k) ? '✓' : '·'}${k}`));
+      c.appendChild(row);
+      if (st.focus.larpFlags != null) c.appendChild(el('div', 'spec-kv', `LARP evidence: ${st.focus.larpFlags} flag${st.focus.larpFlags === 1 ? '' : 's'} (not a verdict)`));
+      if (st.focus.verdict) c.appendChild(el('div', 'spec-kv', `verdict ${st.focus.verdict}${st.focus.rug != null ? ` · rug heuristic ${Math.round(st.focus.rug * 100)}%` : ''}`));
+      cards.appendChild(c);
+    }
+    if (st.arc) {
+      const a = st.arc;
+      const c = el('div', 'spec-card trade');
+      c.appendChild(el('span', 'spec-card-h', `PAPER · $${a.symbol} · ${a.stage === 'closed' ? 'RESULT' : a.stage === 'open' ? 'HOLDING' : a.stage === 'refused' ? 'REFUSED' : 'TICKET'}`));
+      const big = a.stage === 'closed' ? a.resultPct : a.pnlPct;
+      if (big != null) c.appendChild(el('div', 'spec-big ' + (big >= 0 ? 'up' : 'down'), pctS(big)));
+      const kv = el('div', 'spec-kv');
+      kv.textContent = [a.sizeUsd != null ? `size $${a.sizeUsd.toFixed(2)}` : null, a.entryUsd != null ? `entry ${px(a.entryUsd)}` : null, a.markUsd != null && a.stage !== 'closed' ? `mark ${px(a.markUsd)}` : null,
+        a.peakPct != null ? `peak ${pctS(a.peakPct)}` : null, a.exits ? `exits ${a.exits}` : null, a.realizedSol != null ? `realized ${a.realizedSol >= 0 ? '+' : ''}${a.realizedSol.toFixed(4)} SOL` : null,
+        a.refusal ? `refused: ${a.refusal}` : null].filter(Boolean).join(' · ');
+      c.appendChild(kv);
+      c.appendChild(el('div', 'spec-dim', 'simulated paper trade · not a result'));
+      cards.appendChild(c);
+    }
+    if (cards.childNodes.length) host.appendChild(cards);
+  }
+
   function render() {
     if (!vm) return;
+    renderStory(vm.story || null);
 
     const scr = $('screen'); scr.textContent = '';
     const s = vm.screen || {};

package/dist/packages/popup/src/protocol.js

@@ -28,4 +28,8 @@ export const CHART_INDICATORS = ['ema9', 'ema21', 'vwap', 'volma', 'volume', 'ta
 export const CHART_STYLES = ['candles', 'line', 'area'];
 /** Price-scale mode: auto (normal, autoscaled), logarithmic, percent (from the first visible bar). */
 export const CHART_SCALES = ['auto', 'log', 'percent'];
+/** task-1472: what the chart's Y axis shows (the popup's MCAP | PRICE control / `A` ask the terminal to switch). */
+export const CHART_AXES = ['mcap', 'price'];
+/** The most fills one chart VM carries (newest kept). */
+export const CHART_MARKS_MAX = 500;
 export const PROTOCOL_VERSION = 'dexterm-popup/1';

package/dist/packages/popup/src/server.js

@@ -26,7 +26,7 @@ import { createHash, randomBytes, timingSafeEqual } from 'node:crypto';
 import { readFileSync, existsSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
-import { PROTOCOL_VERSION, CHART_INTERVALS, CHART_INDICATORS, CHART_STYLES, CHART_SCALES, WIDGET_TOPICS, WIDGET_HTML_MAX } from "./protocol.js";
+import { PROTOCOL_VERSION, CHART_INTERVALS, CHART_INDICATORS, CHART_STYLES, CHART_SCALES, CHART_AXES, WIDGET_TOPICS, WIDGET_HTML_MAX } from "./protocol.js";
 import { auditWidgetHtml, inlineHashes, normalizeWidgetHtml } from "./widget-html.js";
 const here = path.dirname(fileURLToPath(import.meta.url));
 const PAGES_DIR = path.join(here, 'pages');
@@ -48,6 +48,10 @@ export const POPUP_EVENTS = new Set([
     'event:popup.close-request', 'event:popup.focus', 'event:popup.drag',
     // task-1325 chart v2 requests (payloads validated by validateEventPayload below)
     'event:chart.interval', 'event:chart.indicator', 'event:chart.style', 'event:chart.scale', 'event:chart.painted',
+    // task-1472: the chart's Y axis (market cap ⇄ price): a display preference the terminal saves, nothing else
+    'event:chart.axis',
+    // task-1483: show / hide the chart's BUY / SELL markers (display.chartMarkers): a display preference, nothing else
+    'event:chart.markers',
     // task-1345 agent roster: per-agent pause / kick, by agent name (the only writes this popup can send)
     'event:roster.pause', 'event:roster.resume', 'event:roster.kick',
     // task-1355 order plans: cancel a plan by id (the ONLY write the plans popup can send — never arm/cap/sign)
@@ -94,6 +98,10 @@ export function validateEventPayload(name, payload) {
             return oneOf(CHART_STYLES, p.style) ? { style: p.style } : null;
         case 'chart.scale':
             return oneOf(CHART_SCALES, p.scale) ? { scale: p.scale } : null;
+        case 'chart.axis':
+            return oneOf(CHART_AXES, p.axis) ? { axis: p.axis } : null;
+        case 'chart.markers': // task-1483: show / hide the BUY / SELL markers (a display setting; nothing else)
+            return typeof p.on === 'boolean' ? { on: p.on } : null;
         case 'chart.painted':
             return (p.kind === 'first' || p.kind === 'data') && finiteIn(p.ms, 0, 600_000) && finiteIn(p.sentAt, 0, 1e15)
                 ? { kind: p.kind, ms: p.ms, sentAt: p.sentAt } : null;

package/dist/packages/recorder/src/dev-history.js

@@ -38,7 +38,7 @@ export function queryDevHistory(db, q) {
         creator: q.creator, status: 'unknown', asOf, source: DEV_HISTORY_SOURCE,
         launches: { n: 0, newestT: null, ageSec: null },
         labelled: { n: 0, rug: 0, dead: 0, fade: 0, flat: 0, runner: 0, horizon: '72h preferred', tier: 'keyless-proxy', newestT: null, ageSec: null },
-        rugRate: null, badRate: null, devExit: { n: 0, medianMin: null, within60m: 0 }, serialRugger: false, recent: [],
+        rugRate: null, badRate: null, devExit: { n: 0, medianMin: null, within60m: 0, newestT: null, ageSec: null }, serialRugger: false, recent: [],
     };
     let links;
     try {
@@ -56,6 +56,7 @@ export function queryDevHistory(db, q) {
     const counts = { rug: 0, dead: 0, fade: 0, flat: 0, runner: 0 };
     let labelledN = 0, labelledNewest = null;
     const exits = [];
+    let exitNewest = null;
     const launches = [];
     for (const l of links) {
         const firstT = Number(l.first_t);
@@ -93,6 +94,7 @@ export function queryDevHistory(db, q) {
                     const from = createdAt ?? Number(series[held].t);
                     devExitMin = Math.max(0, (Number(out.t) - from) / 60_000);
                     exits.push(devExitMin);
+                    exitNewest = Math.max(exitNewest ?? 0, Number(out.t));
                 }
             }
         }
@@ -109,12 +111,14 @@ export function queryDevHistory(db, q) {
         labelled: { ...empty.labelled, n: labelledN, ...counts, newestT: labelledNewest, ageSec: labelledNewest === null ? null : Math.max(0, Math.round((asOf - labelledNewest) / 1000)) },
         rugRate: labelledN ? counts.rug / labelledN : null,
         badRate: labelledN ? (counts.rug + counts.dead) / labelledN : null,
-        devExit: { n: exits.length, medianMin: median(exits), within60m: exits.filter((m) => m <= 60).length },
+        devExit: { n: exits.length, medianMin: median(exits), within60m: exits.filter((m) => m <= 60).length, newestT: exitNewest, ageSec: exitNewest === null ? null : Math.max(0, Math.round((asOf - exitNewest) / 1000)) },
         serialRugger: counts.rug >= SERIAL_RUGGER_MIN,
         recent: launches,
     };
 }
-const ago = (sec) => sec === null ? 'age unknown' : sec < 3600 ? `${Math.max(1, Math.round(sec / 60))}m ago` : sec < 172800 ? `${Math.round(sec / 3600)}h ago` : `${Math.round(sec / 86400)}d ago`;
+/** Compact age for a panel cell: `5m`, `3h`, `40d`; `age ?` when unknown. */
+export const ageShort = (sec) => sec === null ? 'age ?' : sec < 3600 ? `${Math.max(1, Math.round(sec / 60))}m` : sec < 172800 ? `${Math.round(sec / 3600)}h` : `${Math.round(sec / 86400)}d`;
+const ago = (sec) => sec === null ? 'age unknown' : `${ageShort(sec)} ago`;
 /**
  * The one-line summary every surface shows (DEV panel, rug-signal row, MCP note): counts with the sample size and
  * the age, or `unknown` with why. Plain wording: a risk flag from observed history, never "rug confirmed" or "safe".

package/dist/packages/recorder/src/index.js

@@ -9,6 +9,8 @@ export * from "./open.js";
 export * from "./verdicts.js";
 export * from "./schedule.js";
 export * from "./dev-history.js";
+export * from "./ticks.js";
+export * from "./retention.js";
 export { recorderCli, RECORDER_HELP } from "./cli.js";
 /** `--no-recorder` / `DEXTERM_RECORDER=0` resolution: the recorder is on in live mode unless either says no. */
 export function recorderEnabled(env, flagOff) {