wickchart 1.6.0 → 2.0.0

package/src/wick-chart.js

@@ -12,8 +12,9 @@
  * Zero dependencies. Canvas-rendered. Framework-agnostic (works in React,
  * Vue, plain HTML). Themeable with --wick-* CSS custom properties.
  *
- * The 0.x names (<hab-chart>, --hab-*, hab:* events) still work as
- * deprecated aliases — see the README migration notes.
+ * 2.0: the guided-playback (narrate/walk/sonify/story), co-view, scenario/
+ * risk-plan and AI-agent families live in their plugin packages; the core
+ * methods are warn-once stubs until a package attaches.
  *
  * MIT License.
  * ========================================================================== */
@@ -21,38 +22,62 @@
 import {
   clamp, isNum, numberFmt, fmtCompact, autoPrecision, niceStep, hexToRgba,
   FONT_STACK, axisFont, pillFont, roundRectPath,
-  TIME_STEPS, HOUR, DAY, hhmm, fmtDay, fmtMonth, fmtYear, fmtFull,
+  TIME_STEPS, HOUR, DAY, toMs, zoneOffset, hhmm, fmtDay, fmtMonth, fmtYear, fmtFull,
   THEMES, mergeOlderData, detectGaps,
   parseIndicators, normalizeIndicatorResult, BUILTIN_INDICATORS,
-  positionPnl, checkAlertCross, computeStats, safeColor,
+  positionPnl, positionPnlPct, checkAlertCross, computeStats, safeColor,
   SERIES_TYPES, calcHeikinAshi, buildColumns, computeVolumeProfile,
-  calcRSI, detectAnnotations, priceToFreq,
+  calcRSI, detectAnnotations,
   calcRealizedVol, volRegimeBands, percentileOfSorted, parseVolShading,
   windowSummary, normalizeOverlays, barIndexForTime, resolveOverlayColor,
   compileScript, predicateTrueSeries, scriptAlertStep,
-  AI_TOOLS, aiPromptText, applyChartOps,
-  calcVolCone, normalizeScenario, normalizeRiskPlan, PresenceTracker,
-  narrateWindow, brushStats,
-  easeInOutCubic, sceneList,
+  brushStats,
+  warnDeprecatedAlias,
 } from './core.js';
 
 /* ------------------------------------------------------------------ *
  * <wick-chart>
  * ------------------------------------------------------------------ */
 
-/** Indicator registry — module scope so registrations are shared by
- *  <wick-chart> and the deprecated <hab-chart> alias element. */
+/** Indicator registry — module scope, shared by every chart instance. */
 const REGISTRY = new Map(BUILTIN_INDICATORS);
 
+/** Bars from which the worker compute path engages — below it, sync wins
+ *  (posting the epoch snapshot costs more than the compute it saves). */
+const WORKER_MIN_BARS = 50000;
+/** Returned while an off-thread compute is in flight: no lines yet, and —
+ *  like a failed compute — every renderer draws nothing. */
+const PENDING_SERIES = { lines: [], histogram: null };
+/**
+ * Built-ins a streamed tick can update by recomputing a bounded tail with
+ * the SAME batch definition (window indicators exactly, recursive ones
+ * converge geometrically). Excluded: obv/vwap are cumulative over all
+ * history, supertrend is a path-dependent state machine — no tail can
+ * patch those; they keep the full-recompute behavior.
+ */
+const ONLINE_SKIP = new Set(['obv', 'vwap', 'supertrend']);
+/** Tail warm-up bars per tick: past the recursion decay of any realistic
+ *  period (~10×), and still ~0.1 ms of work per indicator. */
+const ONLINE_WARMUP = 400;
+/** Per-chart worker session ids (see _workerCompute / src/worker-core.js). */
+let CHART_SID = 0;
+
   /* SSR safety: importing this module under Node (Next.js/Nuxt server render)
  * must not throw — the element simply registers only in browsers. */
 const HTMLElementBase = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};
 
 class WickChart extends HTMLElementBase {
     static get observedAttributes() {
-      return ['theme', 'type', 'log', 'auto', 'indicators', 'precision', 'label', 'stats', 'profile', 'annotations', 'volshading', 'overlays', 'co-view', 'co-view-name', 'brush', 'sonify'];
+      return ['theme', 'type', 'log', 'auto', 'indicators', 'precision', 'label', 'stats', 'profile', 'annotations', 'volshading', 'overlays', 'brush', 'alert-evaluate', 'timezone', 'vwap-anchor', 'worker'];
     }
 
+    /**
+     * Shared ChartWorkerPool for the worker compute path (set by importing
+     * 'wickchart/worker'; null — everything sync — until then).
+     * @type {object|null}
+     */
+    static _workerPool = null;
+
     constructor() {
       super();
       const root = this.attachShadow({ mode: 'open' });
@@ -65,9 +90,12 @@ class WickChart extends HTMLElementBase {
             height: 100%;
             min-height: 220px;
             contain: content;
+            /* the overlays lay themselves out against the chart's own width
+               (see the @container rule at the end of this sheet) */
+            container-type: inline-size;
           }
           :host(:focus-visible) {
-            outline: 2px solid var(--wick-accent, var(--hab-accent, #4c8dff));
+            outline: 2px solid var(--wick-accent, #4c8dff);
             outline-offset: -2px;
           }
           .wrap { position: absolute; inset: 0; overflow: hidden; }
@@ -75,10 +103,17 @@ class WickChart extends HTMLElementBase {
             position: absolute; inset: 0;
             width: 100%; height: 100%;
             display: block;
-            touch-action: none;
+            /* pan-y, not none: a vertical swipe belongs to the page, or a
+               chart embedded in a phone article becomes a dead zone the
+               reader cannot scroll past. Horizontal drags and pinches still
+               arrive as pointer events; _onTouchMove takes the gesture back
+               (preventDefault) once the chart owns it. */
+            touch-action: pan-y;
             cursor: crosshair;
             user-select: none;
             -webkit-user-select: none;
+            /* long-press is the scrub gesture — suppress the iOS callout */
+            -webkit-touch-callout: none;
           }
           canvas.grabbing { cursor: grabbing; }
           .legend {
@@ -90,26 +125,26 @@ class WickChart extends HTMLElementBase {
           }
           .legend .row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
           .legend .sym {
-            color: var(--wick-text-strong, var(--hab-text-strong, #e6edf3));
+            color: var(--wick-text-strong, #e6edf3);
             font-weight: 700;
             font-size: 13px;
             letter-spacing: 0.02em;
           }
           .legend .kv { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; }
-          .legend .k { color: var(--wick-text, var(--hab-text, #8b949e)); font-size: 11px; }
-          .legend .v { color: var(--wick-text-strong, var(--hab-text-strong, #e6edf3)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+          .legend .k { color: var(--wick-text, #8b949e); font-size: 11px; }
+          .legend .v { color: var(--wick-text-strong, #e6edf3); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
           .legend .pct { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
-          .legend .up { color: var(--wick-up, var(--hab-up, #16c784)); }
-          .legend .dn { color: var(--wick-down, var(--hab-down, #ea3943)); }
+          .legend .up { color: var(--wick-up, #16c784); }
+          .legend .dn { color: var(--wick-down, #ea3943); }
           .legend .ind {
             display: inline-flex; align-items: center; gap: 6px;
-            color: var(--wick-text, var(--hab-text, #8b949e)); font-size: 11.5px; white-space: nowrap;
+            color: var(--wick-text, #8b949e); font-size: 11.5px; white-space: nowrap;
           }
           .legend .ind i { width: 8px; height: 2.5px; border-radius: 2px; display: inline-block; }
           .legend .ind .v { font-size: 12px; }
           .legend .insight {
-            color: var(--wick-accent, var(--hab-accent, #4c8dff));
-            background: var(--wick-chip, var(--hab-chip, rgba(127, 137, 153, 0.12)));
+            color: var(--wick-accent, #4c8dff);
+            background: var(--wick-chip, rgba(127, 137, 153, 0.12));
             border-radius: 6px;
             padding: 1px 8px;
             font-size: 11.5px;
@@ -118,7 +153,7 @@ class WickChart extends HTMLElementBase {
           .nodata {
             position: absolute; inset: 0;
             display: flex; align-items: center; justify-content: center;
-            color: var(--wick-text, var(--hab-text, #8b949e));
+            color: var(--wick-text, #8b949e);
             font: 500 13px ${FONT_STACK};
             pointer-events: none;
           }
@@ -131,25 +166,51 @@ class WickChart extends HTMLElementBase {
           }
           .hud .pos {
             display: inline-flex; gap: 9px; align-items: baseline; white-space: nowrap;
-            background: var(--wick-chip, var(--hab-chip, rgba(127, 137, 153, 0.12)));
-            border: 1px solid var(--wick-border, var(--hab-border, rgba(148, 163, 184, 0.2)));
+            background: var(--wick-chip, rgba(127, 137, 153, 0.12));
+            border: 1px solid var(--wick-border, rgba(148, 163, 184, 0.2));
             border-radius: 7px;
             padding: 3px 9px;
           }
           .hud .statsrow {
             display: inline-flex; gap: 12px; white-space: nowrap;
-            background: var(--wick-chip, var(--hab-chip, rgba(127, 137, 153, 0.12)));
-            border: 1px solid var(--wick-border, var(--hab-border, rgba(148, 163, 184, 0.2)));
+            background: var(--wick-chip, rgba(127, 137, 153, 0.12));
+            border: 1px solid var(--wick-border, rgba(148, 163, 184, 0.2));
             border-radius: 7px;
             padding: 3px 10px;
-            color: var(--wick-text, var(--hab-text, #8b949e));
+            color: var(--wick-text, #8b949e);
             font-variant-numeric: tabular-nums;
           }
-          .hud .statsrow b { color: var(--wick-text-strong, var(--hab-text-strong, #e6edf3)); font-weight: 600; }
-          .hud .k { color: var(--wick-text, var(--hab-text, #8b949e)); font-weight: 500; }
-          .hud .v { color: var(--wick-text-strong, var(--hab-text-strong, #e6edf3)); font-variant-numeric: tabular-nums; }
-          .hud .up { color: var(--wick-up, var(--hab-up, #16c784)); }
-          .hud .dn { color: var(--wick-down, var(--hab-down, #ea3943)); }
+          .hud .statsrow b { color: var(--wick-text-strong, #e6edf3); font-weight: 600; }
+          .hud .k { color: var(--wick-text, #8b949e); font-weight: 500; }
+          .hud .v { color: var(--wick-text-strong, #e6edf3); font-variant-numeric: tabular-nums; }
+          .hud .up { color: var(--wick-up, #16c784); }
+          .hud .dn { color: var(--wick-down, #ea3943); }
+
+          /* Narrow charts: the legend (top-left) and the HUD (top-right) are
+             both pinned to the top, so on a phone they land on top of each
+             other — a label plus a few indicators wraps the legend to three
+             rows and the stats row draws straight through it. Below 560px
+             they stack instead.
+
+             A container query, not a media query: what matters is how wide
+             the chart is, not the screen. A narrow chart in a sidebar on a
+             desktop has exactly the same problem.
+
+             They become position:relative rather than static so they stay in
+             flow *and* keep their stacking context — an unpositioned box would
+             paint underneath the absolutely positioned canvas. The canvas is
+             out of flow either way, so the flex column never moves it. */
+          @container (max-width: 560px) {
+            .wrap { display: flex; flex-direction: column; align-items: flex-start; }
+            .legend, .hud {
+              position: relative;
+              left: auto; right: auto; top: auto;
+              max-width: calc(100% - 20px);
+            }
+            .legend { margin: 8px 10px 0; }
+            .hud { margin: 4px 10px 0; align-items: flex-start; }
+            .hud .pos, .hud .statsrow { white-space: normal; }
+          }
         </style>
         <div class="wrap" part="wrap">
           <canvas part="canvas" role="img"></canvas>
@@ -200,40 +261,48 @@ class WickChart extends HTMLElementBase {
       this._annoList = null;
       this._volshade = null;
 
-      // cross-tab co-view state
-      this._coviewName = null;
+      // co-view seams (2.0: driven by the wickchart-coview plugin — the
+      // layer/state contract its presence bands and ghost crosshair use,
+      // and disconnectedCallback cleans up)
       this._coviewCh = null;
-      this._coviewPeer = '';
-      this._coviewLast = 0;
       this._ghost = null;
       this._ghostTimer = 0;
-      // presence: peer viewports (who is looking where)
-      this._coviewLabel = null; // display name from the co-view-name attribute
-      this._presence = new PresenceTracker();
+      this._presence = null;
       this._coviewBeat = 0;
-      this._coviewViewLast = 0;
+      // scenario/risk seams (2.0: driven by the wickchart-scenario plugin;
+      // _rightMargin reserves future space from the active scenario)
+      this._scenario = null;
+      this._riskPlan = null;
 
-      // sonification state
-      this._sonify = false;
-      this._actx = null;
-      this._lastToneIdx = -1;
-      this._playToken = 0;
       this._measure = null; // { iA, pA, iB, pB, done }
       this._measuring = false;
-      // bar-walk narrator state
-      this._walkTimer = 0;
-      // story mode state: token cancels stale async runs
-      this._storyToken = 0;
-      this._story = null;
       // delta brush state: mode flag + current/finished selection
       this._brush = false;
       this._brushSel = null; // { i0, i1, stats } — the committed selection
       this._brushDrag = null; // { i0, i1 } — while the pointer is down
       this._ind = { overlays: [], panes: [], volume: true };
 
+      // worker compute path (see _indicatorSeries): built-in indicators over
+      // big histories compute off the main thread. Results are cached per
+      // data *epoch* (bulk loads: setData/clearData/backfill) — streamed
+      // ticks bump _version, not _epoch, so they stop recomputing the full
+      // series per bar; the forming bar's value catches up on the next load.
+      this._workerOn = false;
+      this._epoch = 0;
+      this._workerCache = { epoch: -1, map: {}, pending: {}, sent: -1 };
+      this._sid = ++CHART_SID;
+      // incremental tick updates: { epoch, map: key → { v, res } } — the
+      // freshest series per key, patched in place by _onlineTick
+      this._onlineSeries = { epoch: -1, map: {} };
+
       this._pointers = new Map();
       this._pan = null;
       this._pinch = null;
+      // long-press scrub: touch has no hover, so reading a bar needs a
+      // gesture of its own (see _armPress)
+      this._scrub = false;
+      this._pressTimer = 0;
+      this._pressOrigin = null;
 
       // plugin layers: external draw hooks + pointer claims (see addLayer)
       this._layers = [];
@@ -248,15 +317,16 @@ class WickChart extends HTMLElementBase {
       this._positions = [];
       this._alerts = [];
       this._seq = 0;
+      // Default evaluation mode for alerts that don't pick one, and the last
+      // bar index known to be final — see _lastClosedIndex().
+      this._alertEval = 'live';
+      this._lastClosedIdx = -1;
+      this._tz = 'local';
+      this._vwapAnchor = 'utc';
 
       // server-side overlays (zones & levels)
       this._overlays = [];
 
-      // scenario projection (ghost path + vol cone)
-      this._scenario = null;
-      // risk plan (R-multiple grid)
-      this._riskPlan = null;
-
       this._onResize = () => this._invalidate();
       this._onPointerDown = (e) => this._pointerDown(e);
       this._onPointerMove = (e) => this._pointerMove(e);
@@ -270,10 +340,35 @@ class WickChart extends HTMLElementBase {
       };
       this._onWheel = (e) => this._wheel(e);
       this._onDbl = () => {
-        this._stopPlayback();
         this.fit();
       };
       this._onKey = (e) => this._keydown(e);
+      // The canvas leaves vertical scrolling to the page (touch-action:
+      // pan-y). Once a chart gesture owns the touch — a pinch, a scrub, a
+      // layer drag, or a pan that has committed to a direction — the
+      // gesture is taken back, or the browser would hand it to the scroller
+      // halfway through. Must be non-passive to be allowed to.
+      this._onTouchMove = (e) => {
+        if (
+          this._scrub ||
+          this._pointers.size >= 2 ||
+          this._layerClaim ||
+          (this._pan && this._pan.moved)
+        ) {
+          e.preventDefault();
+        }
+      };
+      // devicePixelRatio changes without the CSS box changing size — dragging
+      // the window to a monitor with a different ratio, or a browser zoom
+      // that lands on the same layout width. ResizeObserver stays silent for
+      // those, so the canvas would keep its old backing store and render
+      // soft until something else forced a resize. A `resolution` media
+      // query is the only event for it; it only ever matches the ratio it
+      // was created with, so each change re-arms a fresh one.
+      this._onDprChange = () => {
+        this._watchDpr();
+        this._invalidate();
+      };
     }
 
     connectedCallback() {
@@ -294,23 +389,23 @@ class WickChart extends HTMLElementBase {
       cv.addEventListener('pointercancel', this._onPointerUp);
       cv.addEventListener('pointerleave', this._onPointerLeave);
       cv.addEventListener('wheel', this._onWheel, { passive: false });
+      cv.addEventListener('touchmove', this._onTouchMove, { passive: false });
       cv.addEventListener('dblclick', this._onDbl);
       this.addEventListener('keydown', this._onKey);
 
       if (document.fonts && document.fonts.ready) {
         document.fonts.ready.then(() => this._invalidate()).catch(() => {});
       }
-      if (this._coviewName) this._setupCoView();
+      this._watchDpr();
       this._invalidate();
     }
 
     disconnectedCallback() {
       this._connected = false;
-      this.stopWalk(true);
-      this.stopStory(true);
       this._layerClaim = null;
+      // co-view seams (driven by the wickchart-coview plugin): close the
+      // room cleanly and stop its timers so a removed chart goes quiet
       if (this._coviewCh) {
-        this._coviewSend({ type: 'bye' });
         try {
           this._coviewCh.close();
         } catch (_) {}
@@ -318,13 +413,11 @@ class WickChart extends HTMLElementBase {
       }
       clearInterval(this._coviewBeat);
       this._coviewBeat = 0;
-      if (this._presence && this._presence.peers.size) {
-        const left = this._presence.list();
-        this._presence = new PresenceTracker();
-        this._fire('peers', { peers: [], joined: [], left });
-      }
       clearTimeout(this._ghostTimer);
+      this._ghost = null;
+      this._presence = null;
       if (this._ro) this._ro.disconnect();
+      this._unwatchDpr();
       const cv = this._canvas;
       cv.removeEventListener('pointerdown', this._onPointerDown);
       cv.removeEventListener('pointermove', this._onPointerMove);
@@ -332,11 +425,29 @@ class WickChart extends HTMLElementBase {
       cv.removeEventListener('pointercancel', this._onPointerUp);
       cv.removeEventListener('pointerleave', this._onPointerLeave);
       cv.removeEventListener('wheel', this._onWheel);
+      cv.removeEventListener('touchmove', this._onTouchMove);
       cv.removeEventListener('dblclick', this._onDbl);
       this.removeEventListener('keydown', this._onKey);
+      this._disarmPress();
+      this._scrub = false;
       if (this._raf) cancelAnimationFrame(this._raf), (this._raf = 0);
     }
 
+    /** (Re)arm the devicePixelRatio watcher for the current ratio. */
+    _watchDpr() {
+      this._unwatchDpr();
+      if (typeof matchMedia !== 'function') return;
+      const dpr = window.devicePixelRatio || 1;
+      this._dprMq = matchMedia(`(resolution: ${dpr}dppx)`);
+      this._dprMq.addEventListener('change', this._onDprChange);
+    }
+
+    _unwatchDpr() {
+      if (!this._dprMq) return;
+      this._dprMq.removeEventListener('change', this._onDprChange);
+      this._dprMq = null;
+    }
+
     attributeChangedCallback(name, _old, val) {
       switch (name) {
         case 'theme':
@@ -360,6 +471,10 @@ class WickChart extends HTMLElementBase {
         case 'indicators':
           this._ind = parseIndicators(val, WickChart._registry());
           break;
+        case 'worker':
+          this._workerOn = val != null && val !== 'false';
+          this._invalidate();
+          break;
         case 'stats':
           this._stats = val != null && val !== 'false';
           this._statsKey = '';
@@ -388,23 +503,31 @@ class WickChart extends HTMLElementBase {
           this._overlays = ovs;
           break;
         }
-        case 'co-view':
-          this._coviewName = val || null;
-          this._setupCoView();
-          break;
-        case 'co-view-name':
-          // display name travels with every presence message; no re-render
-          this._coviewLabel = val || null;
-          break;
         case 'brush':
           this._brush = val != null && val !== 'false';
           this._brushSel = null;
           this._brushDrag = null;
           this._invalidate();
           break;
-        case 'sonify':
-          this._sonify = val != null && val !== 'false';
-          this._lastToneIdx = -1;
+        // Default evaluation mode for alerts added without one. Anything
+        // other than "close" means live, so a typo cannot silently mute
+        // signals — it degrades to today's behaviour.
+        case 'alert-evaluate':
+          this._alertEval = val === 'close' ? 'close' : 'live';
+          break;
+        // Display zone for axis labels and the crosshair readout: 'local'
+        // (default), 'utc', or an IANA name. Deliberately does NOT re-anchor
+        // VWAP — the trading session is a separate question from how times
+        // are shown; see calcVWAP's `anchor`.
+        case 'timezone':
+          this._tz = val || 'local';
+          break;
+        // Session anchor for VWAP: 'utc' (default), 'local', an IANA zone, or
+        // a fixed offset in ms. Bumping the version drops the per-version
+        // indicator cache so the series recomputes on the next frame.
+        case 'vwap-anchor':
+          this._vwapAnchor = val || 'utc';
+          this._version++;
           break;
       }
       this._invalidate();
@@ -449,9 +572,9 @@ class WickChart extends HTMLElementBase {
       });
     }
 
-    /** The custom element class (also exported implicitly for users). */
+    /** The tag this class registers as. */
     static get elementName() {
-      return 'hab-chart';
+      return 'wick-chart';
     }
 
     /* ------------------------------------------------------------ *
@@ -487,9 +610,23 @@ class WickChart extends HTMLElementBase {
         }
       }
       if (!sorted) norm.sort((a, b) => a.time - b.time);
+      // One bar per timestamp. A REST history fetch and the websocket that
+      // takes over from it overlap, so the same final candle routinely
+      // arrives twice; the later copy is the corrected one and wins. In
+      // place and allocation-free when the data is already unique.
+      let dst = 0;
+      for (let i = 0; i < norm.length; i++) {
+        if (dst > 0 && norm[i].time === norm[dst - 1].time) norm[dst - 1] = norm[i];
+        else norm[dst++] = norm[i];
+      }
+      norm.length = dst;
       this._data = norm;
       this._version++;
+      this._epoch++;
       this._computeDt();
+      // history is not a live signal: re-baseline so close-mode alerts only
+      // fire on candles that close from here on
+      this._syncClosedIdx();
       this._needsFit = true;
       this._auto = this._autoAttr();
       this._hover = null;
@@ -508,21 +645,37 @@ class WickChart extends HTMLElementBase {
       if (!b) return;
       const d = this._data;
       const last = d[d.length - 1];
-      this._checkAlerts(last ? last.close : NaN, b);
+      const prevClose = last ? last.close : NaN;
+      // Only the front of the series is a live signal. A historical
+      // correction or a backfilled candle must never be compared against the
+      // latest price — that would fire an alert on a stale bar.
+      let live = true;
       if (!last || b.time > last.time) {
         d.push(b);
         if (d.length > 1) this._computeDt();
       } else if (b.time === last.time) {
         d[d.length - 1] = b;
       } else {
-        // out-of-order / backfill: replace matching or insert
-        let i = d.length - 1;
-        while (i >= 0 && d[i].time > b.time) i--;
-        if (i >= 0 && d[i].time === b.time) d[i] = b;
-        else d.splice(i + 1, 0, b);
+        // out-of-order / backfill: replace matching or insert. Binary search
+        // for the slot — a backward scan is O(n) per bar, which turns a
+        // backfill of old candles into O(n·m) over a long history.
+        live = false;
+        const i = WickChart._indexForTime(d, b.time);
+        if (d[i] && d[i].time === b.time) d[i] = b;
+        else d.splice(i, 0, b);
         this._computeDt();
       }
       this._version++;
+      // a live tick (append / forming-bar replace) patches every
+      // online-capable series in O(warm-up) before the next render
+      if (live) this._onlineTick();
+      // Alerts run after the dataset AND the version are updated, so scripted
+      // predicates evaluate over the bar that just arrived rather than
+      // re-reading the previous version's memoized series.
+      // A historical insert shifts indices without closing anything, so the
+      // cursor moves with the data rather than reading as a fresh close.
+      if (live) this._checkAlerts(prevClose, b);
+      else this._syncClosedIdx();
       if (this._hover && this._hover.index >= d.length) this._hover = null;
       this._updateAria();
       this._invalidate();
@@ -531,6 +684,8 @@ class WickChart extends HTMLElementBase {
     clearData() {
       this._data = [];
       this._version++;
+      this._epoch++;
+      this._syncClosedIdx();
       this._hover = null;
       this._needsFit = true;
       this._noMore = false;
@@ -574,9 +729,11 @@ class WickChart extends HTMLElementBase {
           }
           this._data = merged;
           this._version++;
+          this._epoch++;
           this._computeDt();
           // keep the exact same bars on screen: every index shifts by `added`
           this._view.rightIndex += added;
+          this._syncClosedIdx(); // backfill shifts indices, it closes nothing
           if (this._hover) this._hover.index = Math.min(this._hover.index + added, this._data.length - 1);
           this._clampView();
           this._invalidate();
@@ -701,8 +858,8 @@ class WickChart extends HTMLElementBase {
           .filter((a) => !a.fired)
           .map((a) =>
             a.when != null
-              ? { id: a.id, when: a.when, once: a.once }
-              : { id: a.id, price: a.price, direction: a.direction, once: a.once }
+              ? { id: a.id, when: a.when, once: a.once, evaluate: a.evaluate }
+              : { id: a.id, price: a.price, direction: a.direction, once: a.once, evaluate: a.evaluate }
           ),
       };
     }
@@ -750,6 +907,7 @@ class WickChart extends HTMLElementBase {
                   when: a.when.trim(),
                   compiled: compileScript(a.when),
                   once: a.once !== false,
+                  evaluate: this._evalMode(a.evaluate),
                   fired: false,
                   armed: true,
                 };
@@ -762,6 +920,7 @@ class WickChart extends HTMLElementBase {
               price: a.price,
               direction: a.direction || 'cross',
               once: a.once !== false,
+              evaluate: this._evalMode(a.evaluate),
               fired: false,
             };
           })
@@ -823,8 +982,7 @@ class WickChart extends HTMLElementBase {
      * WickScript predicate (`when`) on every streamed bar and fire on its
      * false→true edge — e.g. `when: 'crossup(rsi(close,14), 30)'` or
      * `when: 'volume > sma(volume,20) * 3'`. Scripted events carry the
-     * triggering close as `price` plus the `when` source (deprecated
-     * `hab:alert` alias still dispatched).
+     * triggering close as `price` plus the `when` source.
      * @param {{id?: string, price?: number, direction?: 'above'|'below'|'cross',
      *          when?: string, once?: boolean}} alert
      * @returns {string|null} the alert id (null when no valid price/when,
@@ -845,6 +1003,7 @@ class WickChart extends HTMLElementBase {
           when: alert.when.trim(),
           compiled,
           once: alert.once !== false,
+          evaluate: this._evalMode(alert.evaluate),
           fired: false,
           armed: true,
         };
@@ -855,6 +1014,7 @@ class WickChart extends HTMLElementBase {
           price: alert.price,
           direction: alert.direction || 'cross',
           once: alert.once !== false,
+          evaluate: this._evalMode(alert.evaluate),
           fired: false,
         };
       }
@@ -926,182 +1086,97 @@ class WickChart extends HTMLElementBase {
       this._invalidate();
     }
 
-    /**
-     * Scenario projection into future space: a ghost path of future prices
-     * plus optional σ-bands (vol cone) from realized volatility.
-     *
-     *   chart.setScenario({ path: [64000, 65500, 68000], label: 'bull case' });
-     *   chart.setScenario({ horizon: 48, cone: true });   // cone-only
-     *
-     * The path is an array of prices (or {price} objects) for future bars
-     * 1..N; horizon defaults to the path length (1–500). `cone` (default
-     * true) draws ±levels·σ bands widening with √h from the current realized
-     * vol; `color` accepts up|down|accent or safe CSS colors. Setting a
-     * scenario reserves future space on the right; analysis data — excluded
-     * from getState/setState.
-     * @param {object} spec
-     * @returns {object|null} the normalized scenario, or null when invalid
-     */
-    setScenario(spec) {
-      this._scenario = normalizeScenario(spec);
-      this._invalidate();
-      return this._scenario;
-    }
-
-    clearScenario() {
-      this._scenario = null;
-      this._invalidate();
-    }
-
-    /** @returns {object|null} a copy of the active scenario */
+    /** @returns {object|null} a copy of the active scenario (set through the
+     *  `_scenario` seam by the wickchart-scenario plugin; reserves future
+     *  space via _rightMargin) */
     get scenario() {
       if (!this._scenario) return null;
       return { ...this._scenario, path: this._scenario.path.map((p) => ({ ...p })) };
     }
 
-    /**
-     * Risk plan: an R-multiple grid anchored at entry/stop. 1R = |entry −
-     * stop| (the risk unit); reward lines are drawn at kR beyond the entry
-     * with the risk/reward zones shaded, so sizing and take-profit choices
-     * read directly off the chart.
-     *
-     *   chart.setRiskPlan({ entry: 64500, stop: 63800, multiples: [1, 2, 3] });
-     *   chart.setRiskPlan({ entry: 64500, stop: 63800, targets: [65900, 67300] });
-     *
-     * Direction is derived (stop below entry ⇒ long). Targets convert to
-     * their R multiple; `multiples` win when both are given. Invalid specs
-     * clear the plan (replace semantics, like setScenario); excluded from
-     * getState/setState — it is app state, not chart state.
-     * @param {object} spec
-     * @returns {object|null} the normalized plan, or null when invalid
-     */
-    setRiskPlan(spec) {
-      this._riskPlan = normalizeRiskPlan(spec);
-      this._invalidate();
-      return this._riskPlan;
-    }
-
-    clearRiskPlan() {
-      if (this._riskPlan) {
-        this._riskPlan = null;
-        this._invalidate();
-      }
-    }
-
-    /** @returns {object|null} a copy of the active risk plan */
+    /** @returns {object|null} a copy of the active risk plan (set through
+     *  the `_riskPlan` seam by the wickchart-scenario plugin) */
     get riskPlan() {
       if (!this._riskPlan) return null;
       return { ...this._riskPlan, levels: this._riskPlan.levels.map((l) => ({ ...l })) };
     }
 
-    /** σ-cone for the active scenario, cached per data version. */
-    _scenarioConeCache() {
-      if (!this._scenario || !this._data.length) return null;
-      if (this._cache.v !== this._version) {
-        this._cache = { v: this._version, map: {} };
-      }
-      if (!this._cache.map.__scenario) {
-        const d = this._data;
-        const vol = calcRealizedVol(d.map((b) => b.close), 20);
-        let v = NaN;
-        for (let i = vol.length - 1; i >= 0; i--) {
-          if (Number.isFinite(vol[i])) { v = vol[i]; break; }
-        }
-        this._cache.map.__scenario = calcVolCone(
-          d[d.length - 1].close,
-          v,
-          this._scenario.horizon,
-          this._scenario.levels
-        );
-      }
-      return this._cache.map.__scenario;
-    }
-
-    /* ------------------------------------------------------------ *
-     * AI agent interface — the chart as a tool surface
-     * ------------------------------------------------------------ */
-
-    /** Tool manifest for LLM control — JSON-safe copy of AI_TOOLS. */
-    aiTools() {
-      return JSON.parse(JSON.stringify(AI_TOOLS));
-    }
 
-    /** System prompt for agent control — paste into any LLM alongside aiTools(). */
-    aiPrompt() {
-      return aiPromptText();
+    /** Check alerts against an incoming bar (prev close → new close).
+     *  Scripted (`when`) alerts evaluate their predicate series, cached per
+     *  data version, and fire on the false→true edge. */
+    /**
+     * Index of the newest bar known to be final: any bar with a newer bar
+     * behind it, plus the front bar when the feed flagged it `closed: true`
+     * (Binance's `k.x`). -1 when nothing has closed yet.
+     */
+    _lastClosedIndex() {
+      const d = this._data;
+      if (!d.length) return -1;
+      const last = d.length - 1;
+      return d[last] && d[last].closed === true ? last : last - 1;
     }
 
-    /** Grounding context for a model: current state + visible-window summary. */
-    aiContext() {
-      return { state: this.getState(), window: this.getDataWindow() };
+    /** Re-baseline the closed-bar cursor without firing anything. */
+    _syncClosedIdx() {
+      this._lastClosedIdx = this._lastClosedIndex();
     }
 
     /**
-     * Apply a list of {tool, args} ops (typically LLM output) through the
-     * validated dispatcher in core. Never throws — each op resolves
-     * {ok, tool, result} or {ok: false, tool, error} so an agent can
-     * self-correct.
-     * @param {any} ops
-     * @returns {Array<object>}
+     * Resolve an alert's evaluation mode: an explicit 'close' / 'live' on the
+     * alert wins, otherwise the chart-level `alert-evaluate` default (itself
+     * 'live', so 1.x behaviour is unchanged unless asked for).
+     * @param {string|undefined} v
+     * @returns {'live'|'close'}
      */
-    applyAI(ops) {
-      return applyChartOps(this, ops);
+    _evalMode(v) {
+      if (v === 'close' || v === 'live') return v;
+      return this._alertEval === 'close' ? 'close' : 'live';
     }
 
-    /**
-     * Ask an AI to operate the chart. Builds the payload {system,
-     * instruction, chart, tools}; with a `run` async function (your model
-     * call — the chart itself never touches the network), applies the
-     * returned ops and resolves {payload, ops, results}. Without `run`,
-     * returns the payload for manual wiring — send it anywhere, then call
-     * chart.applyAI(ops) with the model's answer.
-     *
-     *   const { results } = await chart.ask('add RSI and mark the demand zone', {
-     *     run: async (payload) => (await callMyLLM(payload)).ops,
-     *   });
-     *
-     * @param {string} instruction natural-language request
-     * @param {{run?: (payload: object) => Promise<any>}} [opts]
-     */
-    async ask(instruction, opts = {}) {
-      const payload = {
-        system: aiPromptText(),
-        instruction: String(instruction == null ? '' : instruction),
-        chart: this.aiContext(),
-        tools: this.aiTools(),
-      };
-      if (typeof opts.run !== 'function') {
-        return { payload, ops: null, results: null };
-      }
-      const ops = await opts.run(payload);
-      const results = this.applyAI(ops);
-      return { payload, ops, results };
+    /** Dispatch one alert, retiring it when it was a `once` alert. */
+    _fireAlert(alert, detail) {
+      if (alert.once) alert.fired = true;
+      this._fire('alert', { id: alert.id, ...detail });
+      if (alert.once) this._alerts = this._alerts.filter((x) => x !== alert);
     }
 
-    /** Check alerts against an incoming bar (prev close → new close).
-     *  Scripted (`when`) alerts evaluate their predicate series, cached per
-     *  data version, and fire on the false→true edge. */
     _checkAlerts(prevClose, bar) {
+      const closedIdx = this._lastClosedIndex();
+      // A bar closing is an edge, not a level: close-mode alerts evaluate
+      // only on the update that finalizes a candle, so a candle that ticks
+      // through a threshold and back never produces a signal.
+      const justClosed = closedIdx > this._lastClosedIdx;
+      if (justClosed) this._lastClosedIdx = closedIdx;
       if (!this._alerts.length) return;
+      const d = this._data;
       for (const a of [...this._alerts]) {
+        // `fired` means "spent forever" — it is only ever set on `once`
+        // alerts. Repeating (once:false) alerts re-fire on every edge:
+        // price alerts are edge-triggered by checkAlertCross(), scripted
+        // ones by the armed/scriptAlertStep() latch.
         if (a.fired) continue;
+
+        // Close mode reads the newest final candle; live mode reads the
+        // front of the series, forming or not.
+        const onClose = a.evaluate === 'close';
+        if (onClose && (!justClosed || closedIdx < 0)) continue;
+        const idx = onClose ? closedIdx : d.length - 1;
+        const cur = onClose ? d[idx] : bar;
+        if (!cur) continue;
+
         if (a.when != null) {
-          const series = this._predicateCache(a);
-          const curTrue = series.length ? series[series.length - 1] : false;
-          const step = scriptAlertStep(a.armed, curTrue);
+          // predicates are causal, so the value at `idx` is the same whether
+          // it was computed over the whole series or just the prefix
+          const step = scriptAlertStep(a.armed, this._predicateCache(a)[idx] === true);
           a.armed = step.armed;
-          if (step.fire) {
-            a.fired = true;
-            this._fire('alert', { id: a.id, price: bar.close, when: a.when, bar });
-            if (a.once) this._alerts = this._alerts.filter((x) => x !== a);
-          }
+          if (step.fire) this._fireAlert(a, { price: cur.close, when: a.when, bar: cur });
           continue;
         }
-        if (!isNum(prevClose)) continue;
-        if (checkAlertCross(a, prevClose, bar.close)) {
-          a.fired = true;
-          this._fire('alert', { id: a.id, price: a.price, bar });
-          if (a.once) this._alerts = this._alerts.filter((x) => x !== a);
+        const prev = onClose ? (d[idx - 1] ? d[idx - 1].close : NaN) : prevClose;
+        if (!isNum(prev)) continue;
+        if (checkAlertCross(a, prev, cur.close)) {
+          this._fireAlert(a, { price: a.price, bar: cur });
         }
       }
     }
@@ -1136,6 +1211,11 @@ class WickChart extends HTMLElementBase {
 
     static _MAX_SP = 90;
 
+    /** Hold this long on a touchscreen to open the crosshair (ms). */
+    static _PRESS_MS = 350;
+    /** Finger travel that cancels the press and makes it a pan (px). */
+    static _PRESS_SLOP = 10;
+
     /**
      * Lowest allowed px/bar: either 0.35, or whatever fits the entire
      * dataset on screen — so any history can be zoomed out fully.
@@ -1147,18 +1227,19 @@ class WickChart extends HTMLElementBase {
     }
 
     static _timeToMs(t) {
-      return isNum(t) ? (t < 1e12 ? t * 1000 : t) : Date.now();
+      if (t instanceof Date) return t.getTime();
+      return isNum(t) ? toMs(t) : Date.now();
     }
 
     static _normBar(b) {
       if (!b) return null;
       const t = b.time != null ? b.time : b.t;
-      if (!isNum(t)) return null;
+      if (!isNum(t) && !(t instanceof Date)) return null;
       const time = WickChart._timeToMs(t);
       const close = isNum(b.close) ? b.close : isNum(b.value) ? b.value : NaN;
       if (!isNum(close)) return null;
       const open = isNum(b.open) ? b.open : close;
-      return {
+      const nb = {
         time,
         open,
         high: isNum(b.high) ? b.high : Math.max(open, close),
@@ -1166,6 +1247,10 @@ class WickChart extends HTMLElementBase {
         close,
         volume: isNum(b.volume) ? b.volume : isNum(b.v) ? b.v : 0,
       };
+      // Only carried when the feed actually says the candle is final
+      // (Binance `k.x`), so the bar shape is unchanged for everyone else.
+      if (b.closed === true) nb.closed = true;
+      return nb;
     }
 
     static _indexForTime(d, time) {
@@ -1233,11 +1318,7 @@ class WickChart extends HTMLElementBase {
       if (this._pal && this._palKey === this._theme) return this._pal;
       const base = THEMES[this._theme] || THEMES.dark;
       const cs = getComputedStyle(this);
-      // --wick-* is canonical; --hab-* still honored as the 0.x fallback
-      const get = (name, fallback) => {
-        const v = cs.getPropertyValue('--wick-' + name).trim() || cs.getPropertyValue('--hab-' + name).trim();
-        return v || fallback;
-      };
+      const get = (name, fallback) => cs.getPropertyValue('--wick-' + name).trim() || fallback;
       const pal = {};
       for (const k of Object.keys(base)) {
         if (k === 'overlay') {
@@ -1246,8 +1327,7 @@ class WickChart extends HTMLElementBase {
             o.push(get('overlay-' + i, base.overlay[i]));
           }
           // allow single overlay color
-          const single =
-            cs.getPropertyValue('--wick-overlay').trim() || cs.getPropertyValue('--hab-overlay').trim();
+          const single = get('overlay', '');
           pal.overlay = single ? base.overlay.map(() => single) : o;
         } else {
           pal[k] = get(k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()), base[k]);
@@ -1303,22 +1383,188 @@ class WickChart extends HTMLElementBase {
 
     /** Compute (and cache per data version) an indicator entry's series. */
     _indicatorSeries(entry) {
+      {
+        // incremental path first: a series patched for this exact version
+        // by _onlineTick is the freshest thing there is
+        const on = this._onlineSeries;
+        const cur = on.epoch === this._epoch ? on.map['ind:' + entry.key] : null;
+        if (cur && cur.v === this._version) return cur.res;
+      }
       if (this._cache.v !== this._version) {
         this._cache = { v: this._version, map: {} };
       }
       const k = 'ind:' + entry.key;
       if (!this._cache.map[k]) {
+        // Worker compute path: built-in indicators over big histories run
+        // off the main thread. The dataset crosses once per data epoch as
+        // six transferable Float64Arrays (~25 ms/M bars — cloning objects
+        // would cost ~1 s). Closures (custom/scripted defs) can't cross;
+        // neither can anything below WORKER_MIN_BARS — both stay sync.
+        const pool = WickChart._workerPool;
+        if (pool && pool.available && this._workerOn && this._data.length >= WORKER_MIN_BARS &&
+            BUILTIN_INDICATORS.get(entry.name) === entry.def) {
+          const wc = this._workerCache;
+          if (wc.epoch === this._epoch && wc.map[k]) return wc.map[k];
+          this._workerCompute(pool, entry, k);
+          return PENDING_SERIES; // the line lands when the result arrives
+        }
         let res;
         try {
-          res = entry.def.compute(this._data, entry.params);
+          // the session anchor rides along for indicators that observe one
+          // (vwap); the rest ignore the extra key
+          res = entry.def.compute(this._data, { ...entry.params, anchor: this._vwapAnchor });
         } catch (err) {
           res = null;
         }
         this._cache.map[k] = normalizeIndicatorResult(res);
+        this._seedOnline(k, entry, this._cache.map[k]);
       }
       return this._cache.map[k];
     }
 
+    /**
+     * After a live stream tick (append or forming-bar replace), patch every
+     * online-capable series by recomputing a bounded tail with the same
+     * batch definition — O(warm-up) instead of a full-history recompute per
+     * indicator per tick. Bases are seeded by the sync or worker path; bulk
+     * loads (epoch changes) reseed automatically.
+     */
+    _onlineTick() {
+      const d = this._data;
+      const on = this._onlineSeries;
+      if (!d.length || on.epoch !== this._epoch) return;
+      for (const entry of this._ind.overlays.concat(this._ind.panes)) {
+        const k = 'ind:' + entry.key;
+        const cur = on.map[k];
+        if (!cur || ONLINE_SKIP.has(entry.name) || BUILTIN_INDICATORS.get(entry.name) !== entry.def) {
+          continue;
+        }
+        if (this._patchSeriesTail(cur.res, entry, d)) cur.v = this._version;
+        else delete on.map[k]; // length mismatch etc. — reseed on the next compute
+      }
+    }
+
+    /** Recompute the last K bars of one series in place (K = max(400,
+     *  10×period), clamped to the data). False when the series and data
+     *  lengths can't line up — the caller drops the base and reseeds. */
+    _patchSeriesTail(res, entry, d) {
+      let p = 0;
+      for (const v of Object.values(entry.params || {})) {
+        if (Number.isFinite(+v) && +v > p) p = +v;
+      }
+      const K = Math.min(d.length - 1, Math.max(ONLINE_WARMUP, p * 10));
+      if (K < 2 || !res.lines.length) return false;
+      let tail;
+      try {
+        tail = normalizeIndicatorResult(
+          entry.def.compute(d.slice(d.length - 1 - K), { ...entry.params, anchor: this._vwapAnchor })
+        );
+      } catch (_) {
+        return false;
+      }
+      const want = d.length;
+      const base = want - 1 - K; // data index of tail[0]
+      // Only the last `p` values can have changed (window indicators depend
+      // on the trailing window alone; recursive ones only move the new bar).
+      // Writing deeper would replace good full-history values with the
+      // tail's own warm-up error.
+      const from = Math.max(base, want - 1 - p);
+      const patch = (dst, src) => {
+        if (!Array.isArray(src) || src.length !== K + 1) return false;
+        if (dst.length === want - 1) dst.push(src[src.length - 1]); // a bar was appended
+        else if (dst.length !== want) return false;
+        for (let di = from; di < want; di++) {
+          const v = src[di - base];
+          if (v != null || dst[di] == null) dst[di] = v; // warm-up null never clobbers
+        }
+        return true;
+      };
+      for (let i = 0; i < res.lines.length; i++) {
+        const t = tail.lines[i];
+        if (!t || !patch(res.lines[i].values, t.values)) return false;
+      }
+      if (Array.isArray(res.histogram) && !patch(res.histogram, tail.histogram)) return false;
+      return true;
+    }
+
+    /** Remember a fresh series as the base for incremental tick updates
+     *  (online-capable builtins only). */
+    _seedOnline(k, entry, res) {
+      if (ONLINE_SKIP.has(entry.name) || BUILTIN_INDICATORS.get(entry.name) !== entry.def) return;
+      const on = this._onlineSeries;
+      if (on.epoch !== this._epoch) {
+        on.epoch = this._epoch;
+        on.map = {};
+      }
+      on.map[k] = { v: this._version, res };
+    }
+
+    /** Bar count from which the worker path engages (below it, sync wins). */
+    _workerCols() {
+      const d = this._data;
+      const n = d.length;
+      const cols = {
+        time: new Float64Array(n), open: new Float64Array(n), high: new Float64Array(n),
+        low: new Float64Array(n), close: new Float64Array(n), volume: new Float64Array(n),
+      };
+      for (let i = 0; i < n; i++) {
+        const b = d[i];
+        cols.time[i] = b.time;
+        cols.open[i] = b.open;
+        cols.high[i] = b.high;
+        cols.low[i] = b.low;
+        cols.close[i] = b.close;
+        cols.volume[i] = b.volume || 0;
+      }
+      return cols;
+    }
+
+    /** Kick an off-thread compute for one indicator (idempotent per epoch). */
+    _workerCompute(pool, entry, k) {
+      const wc = this._workerCache;
+      wc.epoch = this._epoch;
+      if (wc.sent !== this._epoch) {
+        wc.sent = this._epoch;
+        wc.pending = {};
+        pool
+          .run({ type: 'epoch', sid: this._sid, epoch: this._epoch, cols: this._workerCols() })
+          .catch(() => {
+            if (wc.sent === this._epoch) wc.sent = -1; // resend on the next kick
+          });
+      }
+      if (wc.pending[k] === this._epoch) return; // already in flight
+      wc.pending[k] = this._epoch;
+      const epoch = this._epoch; // captured at kick time — a bulk load that
+      // lands while the compute is in flight must not adopt its result
+      pool
+        .run({
+          type: 'indicator', sid: this._sid, epoch,
+          name: entry.name, params: { ...entry.params, anchor: this._vwapAnchor },
+        })
+        .then((res) => this._workerArrived(k, epoch, res, entry))
+        .catch((err) => {
+          delete wc.pending[k];
+          if (err && err.stale && wc.sent === this._epoch) {
+            wc.sent = -1; // the worker no longer holds this epoch's data — resend
+          } else if (wc.epoch === epoch) {
+            wc.map[k] = { lines: [], histogram: null }; // negative cache: draw nothing this epoch
+          }
+        });
+    }
+
+    _workerArrived(k, epoch, res, entry) {
+      const wc = this._workerCache;
+      delete wc.pending[k];
+      if (wc.epoch !== epoch) return; // a newer bulk load won — drop the stale line
+      const norm = normalizeIndicatorResult(res);
+      wc.map[k] = norm;
+      // the worker base doubles as the seed for incremental tick updates,
+      // so streamed ticks stay fresh instead of waiting for the next load
+      if (entry) this._seedOnline(k, entry, norm);
+      this._fire('worker', { key: k, epoch });
+      this._invalidate();
+    }
+
     /** Resolve a line color: #hex / rgb() / CSS name / palette key ('rsi', 'up', …) / cycle.
      *  Untrusted values (URL/attribute-sourced) are validated — never interpolated raw. */
     _lineColor(entry, line, pal, cycleIdx) {
@@ -1492,6 +1738,11 @@ class WickChart extends HTMLElementBase {
      * the walk to those bars — used at deep zoom where bars are aggregated
      * into pixel columns (keeps this O(screen) instead of O(visible bars)).
      */
+    /** An instant shifted into the chart's display zone, for the formatters. */
+    _zt(t) {
+      return t + zoneOffset(t, this._tz);
+    }
+
     _timeTicks(i0, i1, sampleIdx) {
       const d = this._data;
       const sp = this._view.spacing;
@@ -1519,7 +1770,6 @@ class WickChart extends HTMLElementBase {
         }
       }
 
-      const tz = (t) => -new Date(t).getTimezoneOffset() * 60000;
       const ticks = [];
       let prevKey = null;
       // Labels are built lazily — only for bars that actually start a new step.
@@ -1527,30 +1777,32 @@ class WickChart extends HTMLElementBase {
       const visit = (i) => {
         if (i < 0 || i >= d.length) return;
         const t = d[i].time;
+        // shifted into the display zone once, then read with UTC getters
+        const zt = this._zt(t);
         let key;
         let label = null;
         if (stepMs != null) {
-          key = Math.floor((t + tz(t)) / stepMs);
+          key = Math.floor(zt / stepMs);
           if (prevKey !== null && key !== prevKey) {
             if (stepLabel === 'time') {
               const prevT = d[i - 1] ? d[i - 1].time : t;
-              const dayKey = Math.floor((t + tz(t)) / DAY);
-              const prevDay = Math.floor((prevT + tz(prevT)) / DAY);
-              label = dayKey !== prevDay ? fmtDay(t) : hhmm(t);
+              const dayKey = Math.floor(zt / DAY);
+              const prevDay = Math.floor(this._zt(prevT) / DAY);
+              label = dayKey !== prevDay ? fmtDay(zt) : hhmm(zt);
             } else {
-              const dt_ = new Date(t);
-              label = dt_.getDate() === 1 ? fmtMonth(t, dt_.getMonth() === 0) : fmtDay(t);
+              const dt_ = new Date(zt);
+              label = dt_.getUTCDate() === 1 ? fmtMonth(zt, dt_.getUTCMonth() === 0) : fmtDay(zt);
             }
           }
         } else if (monthStep) {
-          const dt_ = new Date(t);
-          key = Math.floor((dt_.getFullYear() * 12 + dt_.getMonth()) / monthStep);
+          const dt_ = new Date(zt);
+          key = Math.floor((dt_.getUTCFullYear() * 12 + dt_.getUTCMonth()) / monthStep);
           if (prevKey !== null && key !== prevKey) {
-            label = fmtMonth(t, dt_.getMonth() === 0 || monthStep > 1);
+            label = fmtMonth(zt, dt_.getUTCMonth() === 0 || monthStep > 1);
           }
         } else {
-          key = new Date(t).getFullYear();
-          if (prevKey !== null && key !== prevKey) label = fmtYear(t);
+          key = new Date(zt).getUTCFullYear();
+          if (prevKey !== null && key !== prevKey) label = fmtYear(zt);
         }
         if (label !== null) ticks.push({ x: this._xFor(i), label });
         prevKey = key;
@@ -1795,82 +2047,7 @@ class WickChart extends HTMLElementBase {
         }
       }
 
-      /* scenario projection: ghost path + σ-cone in future space (clipped to
-       * the main plot so out-of-range bands never bleed into the axis) */
-      if (this._scenario && d.length) {
-        const sc = this._scenario;
-        const col = resolveOverlayColor(sc.color, pal);
-        const baseIdx = d.length - 1;
-        const xAt = (h) => this._xFor(baseIdx + h);
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(0, main.y0, plotRight, main.h);
-        ctx.clip();
-        if (sc.cone) {
-          const cone = this._scenarioConeCache();
-          if (cone) {
-            for (let li = cone.levels.length - 1; li >= 0; li--) {
-              const b = cone.bands[cone.levels[li]];
-              ctx.globalAlpha = li === 0 ? 0.1 : 0.05;
-              ctx.fillStyle = col;
-              ctx.beginPath();
-              ctx.moveTo(xAt(0), yOf(b.up[0]));
-              for (let h = 1; h <= cone.horizon; h++) ctx.lineTo(xAt(h), yOf(b.up[h]));
-              for (let h = cone.horizon; h >= 0; h--) ctx.lineTo(xAt(h), yOf(b.down[h]));
-              ctx.closePath();
-              ctx.fill();
-            }
-            const inner = cone.bands[cone.levels[0]];
-            ctx.globalAlpha = 0.4;
-            ctx.strokeStyle = col;
-            ctx.lineWidth = 1;
-            ctx.setLineDash([4, 4]);
-            for (const arr of [inner.up, inner.down]) {
-              ctx.beginPath();
-              ctx.moveTo(xAt(0), yOf(arr[0]));
-              for (let h = 1; h <= cone.horizon; h++) ctx.lineTo(xAt(h), yOf(arr[h]));
-              ctx.stroke();
-            }
-            ctx.setLineDash([]);
-          }
-        }
-        if (sc.path.length) {
-          ctx.globalAlpha = 0.9;
-          ctx.strokeStyle = col;
-          ctx.lineWidth = 1.5;
-          ctx.setLineDash([6, 4]);
-          ctx.beginPath();
-          ctx.moveTo(xAt(0), yOf(d[baseIdx].close));
-          for (const p of sc.path) ctx.lineTo(xAt(p.h), yOf(p.price));
-          ctx.stroke();
-          ctx.setLineDash([]);
-          ctx.fillStyle = col;
-          for (const p of sc.path) {
-            const y = yOf(p.price);
-            if (y >= main.y0 && y <= main.y1) {
-              ctx.beginPath();
-              ctx.arc(xAt(p.h), y, 2.5, 0, Math.PI * 2);
-              ctx.fill();
-            }
-          }
-          if (sc.label) {
-            const p = sc.path[sc.path.length - 1];
-            ctx.font = pillFont();
-            ctx.globalAlpha = 0.95;
-            ctx.fillStyle = col;
-            ctx.textAlign = 'left';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(
-              sc.label,
-              Math.min(xAt(p.h) + 8, plotRight - 4),
-              clamp(yOf(p.price), main.y0 + 8, main.y1 - 8)
-            );
-          }
-        }
-        ctx.restore();
-      }
-
-      /* position zones (under series) */
+/* position zones (under series) */
       for (const pos of this._positions) {
         const yE = clamp(yOf(pos.entry), main.y0, main.y1);
         if (isNum(pos.target)) {
@@ -1885,68 +2062,7 @@ class WickChart extends HTMLElementBase {
         }
       }
 
-      /* risk plan: R-multiple grid — risk/reward shading + kR lines */
-      if (this._riskPlan && d.length) {
-        const rp = this._riskPlan;
-        const fP = numberFmt(this._prec(scale.rawHi || 1));
-        const yE = yOf(rp.entry);
-        const yS = yOf(rp.stop);
-        ctx.fillStyle = hexToRgba(pal.down, 0.06);
-        ctx.fillRect(0, Math.min(yE, yS), plotRight, Math.abs(yS - yE));
-        const yTop = yOf(rp.levels[rp.levels.length - 1].price);
-        ctx.fillStyle = hexToRgba(pal.up, 0.05);
-        ctx.fillRect(0, Math.min(yE, yTop), plotRight, Math.abs(yTop - yE));
-        const line = (p, col, dash) => {
-          const y = yOf(p);
-          if (y < main.y0 || y > main.y1) return null;
-          ctx.strokeStyle = col;
-          ctx.lineWidth = 1.5;
-          if (dash) ctx.setLineDash([5, 4]);
-          ctx.beginPath();
-          ctx.moveTo(0, Math.round(y) + 0.5);
-          ctx.lineTo(plotRight, Math.round(y) + 0.5);
-          ctx.stroke();
-          ctx.setLineDash([]);
-          ctx.lineWidth = 1;
-          return y;
-        };
-        const pills = [];
-        for (let i = rp.levels.length - 1; i >= 0; i--) {
-          const lv = rp.levels[i];
-          const y = line(lv.price, pal.up, true);
-          if (y != null) {
-            const kk = lv.k % 1 === 0 ? lv.k : +lv.k.toFixed(2);
-            pills.push({ y, text: `${kk}R ${fP.format(lv.price)}`, bg: pal.up });
-          }
-        }
-        const yStop = line(rp.stop, pal.down, false);
-        if (yStop != null) pills.push({ y: yStop, text: `STOP ${fP.format(rp.stop)}`, bg: pal.down });
-        const yEnt = line(rp.entry, pal.accent, false);
-        if (yEnt != null) {
-          pills.push({ y: yEnt, text: `${rp.direction === 'long' ? 'LONG' : 'SHORT'} ${fP.format(rp.entry)}`, bg: pal.accent });
-        }
-        // stack right-edge pills instead of letting close lines overlap
-        pills.sort((a, b) => a.y - b.y);
-        let lastY = -Infinity;
-        for (const p of pills) {
-          const y = Math.max(p.y, lastY + 20);
-          lastY = y;
-          ctx.font = pillFont();
-          const tw = ctx.measureText(p.text).width + 12;
-          this._pill(plotRight - tw - 8, y, p.text, p.bg, pal.pillText, 'left', tw);
-        }
-        if (rp.label) {
-          ctx.font = pillFont();
-          ctx.fillStyle = pal.accent;
-          ctx.globalAlpha = 0.9;
-          ctx.textAlign = 'left';
-          ctx.textBaseline = 'bottom';
-          ctx.fillText(rp.label, 8, clamp(yE, main.y0 + 14, main.y1) - 3);
-          ctx.globalAlpha = 1;
-        }
-      }
-
-      /* volume profile (behind the series) */
+/* volume profile (behind the series) */
       if (this._profile) {
         const pkey = `${i0}:${i1}:${this._version}`;
         if (this._profileKey !== pkey) {
@@ -2604,7 +2720,7 @@ class WickChart extends HTMLElementBase {
         }
 
         // time pill
-        const tLabel = fmtFull(d[h.index].time);
+        const tLabel = fmtFull(this._zt(d[h.index].time));
         ctx.font = pillFont();
         const tw = ctx.measureText(tLabel).width + 12;
         this._pill(
@@ -2618,78 +2734,6 @@ class WickChart extends HTMLElementBase {
         );
       }
 
-      /* co-view presence: peer viewport bands along the top of the plot */
-      if (this._presence && this._presence.peers.size && d.length) {
-        const peers = this._presence.list().slice(0, 4);
-        ctx.save();
-        ctx.font = pillFont();
-        for (let row = 0; row < peers.length; row++) {
-          const p = peers[row];
-          if (!p.range) continue;
-          const cols = pal.overlay || [];
-          const col = cols[(row + 1) % Math.max(cols.length, 1)] || pal.accent;
-          const i0 = WickChart._indexForTime(this._data, p.range.from);
-          const i1 = WickChart._indexForTime(this._data, p.range.to);
-          const x0 = clamp(this._xFor(i0), 0, plotRight);
-          const x1 = clamp(this._xFor(i1), 0, plotRight);
-          const y = main.y0 + 2 + row * 5;
-          ctx.globalAlpha = 0.8;
-          ctx.fillStyle = col;
-          ctx.fillRect(x0, y, Math.max(x1 - x0, 3), 3);
-          if (x1 - x0 > 44) {
-            ctx.globalAlpha = 0.95;
-            ctx.textAlign = 'left';
-            ctx.textBaseline = 'top';
-            ctx.fillText(p.name || p.id, x0 + 3, y + 4);
-          }
-        }
-        ctx.restore();
-      }
-
-      /* co-view ghost crosshair (peer pointer from another tab/chart) */
-      if (this._ghost) {
-        const g = this._ghost;
-        const gx = this._xFor(g.index);
-        const gxVisible = gx >= 0 && gx <= plotRight;
-        ctx.save();
-        ctx.strokeStyle = pal.accent;
-        ctx.globalAlpha = 0.7;
-        ctx.setLineDash([2, 3]);
-        ctx.beginPath();
-        if (gxVisible) {
-          const cx = Math.round(gx) + 0.5;
-          ctx.moveTo(cx, 0);
-          ctx.lineTo(cx, plotBottom);
-        }
-        if (g.yFrac != null) {
-          const gy = Math.round(main.y0 + g.yFrac * main.h) + 0.5;
-          ctx.moveTo(0, gy);
-          ctx.lineTo(plotRight, gy);
-          if (gxVisible) {
-            ctx.fillStyle = pal.accent;
-            ctx.beginPath();
-            ctx.arc(gx, main.y0 + g.yFrac * main.h, 3, 0, Math.PI * 2);
-            ctx.fill();
-          }
-        }
-        ctx.stroke();
-        ctx.restore();
-        if (gxVisible && this._data[g.index]) {
-          const tLabel = fmtFull(this._data[g.index].time);
-          ctx.font = pillFont();
-          const tw = ctx.measureText(tLabel).width + 12;
-          this._pill(
-            clamp(gx - tw / 2, 2, plotRight - tw - 2),
-            plotBottom + 2,
-            tLabel,
-            pal.accent,
-            pal.pillText,
-            'left',
-            tw
-          );
-        }
-      }
-
       /* measure tool overlay */
       if (this._measure && this._measure.pA != null && this._measure.pB != null) {
         const m = this._measure;
@@ -2921,7 +2965,7 @@ class WickChart extends HTMLElementBase {
       let html = '';
       for (const p of this._positions) {
         const pnl = positionPnl(p, price);
-        const pct = p.entry ? (pnl / p.entry) * 100 : 0;
+        const pct = positionPnlPct(p, price);
         const cls = pnl >= 0 ? 'up' : 'dn';
         const qtyStr = p.qty != null ? ' ' + p.qty : '';
         html +=
@@ -3093,7 +3137,7 @@ class WickChart extends HTMLElementBase {
       const ly = this._ly;
       const d = this._data;
       if (!ly || !d.length || !isNum(time)) return null;
-      const t = time < 1e12 ? time * 1000 : time;
+      const t = toMs(time);
       const last = d.length - 1;
       if (t >= d[last].time) {
         return this._xFor(last + (t - d[last].time) / (this._dt || HOUR));
@@ -3165,9 +3209,60 @@ class WickChart extends HTMLElementBase {
       return { x: e.clientX - r.left, y: e.clientY - r.top };
     }
 
+    /**
+     * Put the crosshair on the bar under a point and announce it. Shared by
+     * mouse hover, keyboard walking and the touch scrub gesture.
+     */
+    _hoverAt(pt) {
+      if (!this._ly || !this._data.length) return;
+      const idx = clamp(Math.round(this._indexForX(pt.x)), 0, this._data.length - 1);
+      this._hover = { index: idx, x: this._xFor(idx), y: pt.y };
+      this._emitCrosshair(this._hover);
+      this._invalidate();
+    }
+
+    /**
+     * Start the long-press timer for a touch. A touchscreen has no hover, so
+     * without this there is no way to read a bar's values on a phone: a tap
+     * selects, a drag pans, and the legend never leaves the last candle.
+     * Holding still opens the crosshair; moving first cancels and pans.
+     */
+    _armPress(pointerId, pt) {
+      this._disarmPress();
+      this._pressOrigin = { pointerId, x: pt.x, y: pt.y };
+      this._pressTimer = setTimeout(() => {
+        this._pressTimer = 0;
+        const origin = this._pressOrigin;
+        // Still one finger, still down, nothing else has claimed the gesture.
+        if (!origin || this._pointers.size !== 1 || this._layerClaim) return;
+        if (!this._pointers.has(origin.pointerId)) return;
+        this._scrub = true;
+        this._pan = null;
+        this._measuring = false;
+        this._canvas.classList.remove('grabbing');
+        this._hoverAt(origin);
+      }, WickChart._PRESS_MS);
+    }
+
+    _disarmPress() {
+      if (this._pressTimer) clearTimeout(this._pressTimer);
+      this._pressTimer = 0;
+      this._pressOrigin = null;
+    }
+
+    /** Leave scrub mode and put the crosshair away. */
+    _endScrub() {
+      if (!this._scrub) return;
+      this._scrub = false;
+      if (this._hover) {
+        this._hover = null;
+        this._emitCrosshair(null);
+        this._invalidate();
+      }
+    }
+
     _pointerDown(e) {
       if (e.button !== 0) return;
-      this._stopPlayback(); // any touch interrupts the story
       this._canvas.setPointerCapture(e.pointerId);
       const pt = this._localPoint(e);
       this._pointers.set(e.pointerId, pt);
@@ -3185,6 +3280,9 @@ class WickChart extends HTMLElementBase {
         }
       }
       if (this._pointers.size === 2) {
+        // a second finger is a pinch, never a press or a scrub
+        this._disarmPress();
+        this._endScrub();
         const [a, b] = [...this._pointers.values()];
         const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
         this._pinch = {
@@ -3220,6 +3318,7 @@ class WickChart extends HTMLElementBase {
       } else {
         this._pan = { x: pt.x, rightIndex: this._view.rightIndex, moved: false };
         this._canvas.classList.add('grabbing');
+        if (e.pointerType === 'touch') this._armPress(e.pointerId, pt);
       }
     }
 
@@ -3234,6 +3333,20 @@ class WickChart extends HTMLElementBase {
       if (this._pointers.has(e.pointerId)) this._pointers.set(e.pointerId, pt);
       const ly = this._ly;
 
+      // A finger that wanders before the press lands wanted to pan.
+      const origin = this._pressOrigin;
+      if (this._pressTimer && origin && origin.pointerId === e.pointerId) {
+        if (Math.hypot(pt.x - origin.x, pt.y - origin.y) > WickChart._PRESS_SLOP) {
+          this._disarmPress();
+        }
+      }
+
+      // Scrub: the finger walks the crosshair, the viewport stays put.
+      if (this._scrub && this._pointers.has(e.pointerId)) {
+        this._hoverAt(pt);
+        return;
+      }
+
       if (this._pinch && this._pointers.size >= 2 && ly) {
         const [a, b] = [...this._pointers.values()];
         const dist = Math.hypot(a.x - b.x, a.y - b.y) || 1;
@@ -3281,11 +3394,7 @@ class WickChart extends HTMLElementBase {
 
       if (!ly) return;
       // hover / crosshair
-      const idx = clamp(Math.round(this._indexForX(pt.x)), 0, this._data.length - 1);
-      this._hover = { index: idx, x: this._xFor(idx), y: pt.y };
-      this._maybeSonify(idx);
-      this._emitCrosshair(this._hover);
-      this._invalidate();
+      this._hoverAt(pt);
     }
 
     _pointerUp(e) {
@@ -3299,8 +3408,12 @@ class WickChart extends HTMLElementBase {
       }
       const had = this._pointers.delete(e.pointerId);
       if (this._pointers.size < 2) this._pinch = null;
+      if (this._pressOrigin && this._pressOrigin.pointerId === e.pointerId) this._disarmPress();
       if (this._pointers.size === 0) {
         this._canvas.classList.remove('grabbing');
+        // Lifting ends the scrub — the crosshair is not left stranded on a
+        // touchscreen, where nothing else would ever clear it.
+        this._endScrub();
         if (this._brushDrag && had) {
           const b = this._brushDrag;
           this._brushDrag = null;
@@ -3346,10 +3459,14 @@ class WickChart extends HTMLElementBase {
       return useLog ? Math.pow(10, t) : t;
     }
 
+    /** Dispatch a `wick:name` event on the element. */
+    _fire(name, detail) {
+      this.dispatchEvent(new CustomEvent('wick:' + name, { detail }));
+    }
+
     _wheel(e) {
       const ly = this._ly;
       if (!ly || !this._data.length) return;
-      this._stopPlayback();
       e.preventDefault();
       const pt = this._localPoint(e);
       const dx = e.deltaX;
@@ -3383,7 +3500,6 @@ class WickChart extends HTMLElementBase {
     _keydown(e) {
       const ly = this._ly;
       if (!ly || !this._data.length) return;
-      this._stopPlayback();
       if (e.key === 'Escape' && this._layerClaim) {
         const claim = this._layerClaim;
         this._layerClaim = null;
@@ -3404,7 +3520,6 @@ class WickChart extends HTMLElementBase {
         const cur = this._hover ? this._hover.index : d.length - 1;
         const idx = clamp(cur + (key === 'ArrowRight' ? step : -step), 0, d.length - 1);
         this._hover = { index: idx, x: this._xFor(idx), y: this._hover ? this._hover.y : ly.main.y1 * 0.5 };
-        this._maybeSonify(idx);
         this._emitCrosshair(this._hover);
         this._invalidate();
       } else if (key === 'Home') {
@@ -3442,103 +3557,9 @@ class WickChart extends HTMLElementBase {
     }
 
     /* ------------------------------------------------------------ *
-     * Sonification — the chart by ear (a11y)
+     * Crosshair events
      * ------------------------------------------------------------ */
 
-    /** Lazily-created shared AudioContext (enable within a user gesture). */
-    _audio() {
-      if (this._actx) return this._actx;
-      const AC = window.AudioContext || window.webkitAudioContext;
-      if (!AC) return null;
-      try {
-        this._actx = new AC();
-      } catch (_) {
-        this._actx = null;
-      }
-      return this._actx;
-    }
-
-    /** Short sine blip; `when` schedules against AudioContext time. */
-    _tone(freq, dur = 0.14, when = 0) {
-      const ctx = this._audio();
-      if (!ctx) return;
-      if (ctx.state === 'suspended') ctx.resume().catch(() => {});
-      const t0 = when || ctx.currentTime;
-      const osc = ctx.createOscillator();
-      const gain = ctx.createGain();
-      osc.type = 'sine';
-      osc.frequency.value = freq;
-      gain.gain.setValueAtTime(0.0001, t0);
-      gain.gain.exponentialRampToValueAtTime(0.18, t0 + 0.012);
-      gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
-      osc.connect(gain).connect(ctx.destination);
-      osc.start(t0);
-      osc.stop(t0 + dur + 0.03);
-    }
-
-    /** One tone for a bar's close, pitched by its position on the y-scale. */
-    _sonifyBar(i) {
-      if (!this._sonify || !this._data.length || !this._lastScale) return;
-      const d = this._renderBars();
-      const b = d[clamp(i, 0, d.length - 1)];
-      if (!b) return;
-      this._tone(priceToFreq(b.close, this._lastScale));
-    }
-
-    /** One tone per crosshair bar change (dedupes y-only moves). */
-    _maybeSonify(idx) {
-      if (!this._sonify) return;
-      if (this._lastToneIdx === idx) return;
-      this._lastToneIdx = idx;
-      this._sonifyBar(idx);
-    }
-
-    /**
-     * Play the visible range as a pitch sweep (~4s), riding the crosshair —
-     * the audible equivalent of running your eye along the price line.
-     */
-    playRange() {
-      if (!this._data.length || !this._ly) return;
-      const ctx = this._audio();
-      if (!ctx) return;
-      if (ctx.state === 'suspended') ctx.resume().catch(() => {});
-      const d = this._renderBars();
-      const count = Math.max(2, Math.round(this._ly.plotRight / this._view.spacing));
-      const i0 = clamp(Math.floor(this._view.rightIndex - count) - 1, 0, d.length - 1);
-      const i1 = clamp(Math.ceil(this._view.rightIndex), 0, d.length - 1);
-      if (i1 - i0 < 2) return;
-      const N = Math.min(120, i1 - i0 + 1);
-      const stepMs = Math.min(70, Math.max(24, 4000 / N));
-      const t0 = ctx.currentTime + 0.05;
-      for (let k = 0; k < N; k++) {
-        const i = Math.round(i0 + ((i1 - i0) * k) / (N - 1));
-        const b = d[i];
-        if (!b) continue;
-        this._tone(priceToFreq(b.close, this._lastScale), stepMs / 1000 * 0.9, t0 + (k * stepMs) / 1000);
-      }
-      // ride the crosshair along the sweep for sighted users
-      this._playToken++;
-      const token = this._playToken;
-      let k = 0;
-      const timer = setInterval(() => {
-        if (token !== this._playToken || !this._connected) {
-          clearInterval(timer);
-          return;
-        }
-        if (k >= N) {
-          clearInterval(timer);
-          this._hover = null;
-          this._emitCrosshair(null);
-          this._invalidate();
-          return;
-        }
-        const i = Math.round(i0 + ((i1 - i0) * k) / (N - 1));
-        this._hover = { index: i, x: this._xFor(i), y: this._ly ? this._ly.main.h * 0.5 : 0 };
-        this._invalidate();
-        k++;
-      }, stepMs);
-    }
-
     _emitCrosshair(hover) {
       let detail = null;
       if (hover && this._data[hover.index]) {
@@ -3551,250 +3572,6 @@ class WickChart extends HTMLElementBase {
         };
       }
       this._fire('crosshair', detail);
-
-      // co-view: share the pointer with peer charts (leave events bypass throttle)
-      if (this._coviewCh) {
-        if (!detail) {
-          this._coviewSend({ type: 'cross', time: null, yFrac: null });
-        } else {
-          const now = performance.now();
-          if (now - this._coviewLast > 40) {
-            this._coviewLast = now;
-            const ly = this._ly;
-            this._coviewSend({
-              type: 'cross',
-              time: detail.bar.time,
-              yFrac: ly && isNum(detail.y) ? clamp(detail.y / ly.main.h, 0, 1) : null,
-            });
-          }
-        }
-      }
-    }
-
-    /* ------------------------------------------------------------ *
-     * Cross-tab co-view (BroadcastChannel)
-     * ------------------------------------------------------------ */
-
-    /** Join/leave the co-view channel named by the `co-view` attribute. */
-    _setupCoView() {
-      if (this._coviewCh) {
-        try {
-          this._coviewCh.close();
-        } catch (_) {}
-        this._coviewCh = null;
-      }
-      clearInterval(this._coviewBeat);
-      this._coviewBeat = 0;
-      clearTimeout(this._ghostTimer);
-      if (this._ghost) {
-        this._ghost = null;
-        this._invalidate();
-      }
-      if (this._presence && this._presence.peers.size) {
-        const left = this._presence.list();
-        this._presence = new PresenceTracker();
-        this._fire('peers', { peers: [], joined: [], left });
-      }
-      const name = this._coviewName;
-      if (!name || !this._connected || typeof BroadcastChannel === 'undefined') return;
-      if (!this._coviewPeer) this._coviewPeer = 'p' + Math.random().toString(36).slice(2, 8);
-      try {
-        const ch = new BroadcastChannel('wick-co-view:' + name);
-        ch.onmessage = (ev) => this._onCoMessage(ev.data);
-        this._coviewCh = ch;
-      } catch (_) {}
-      // presence: announce immediately, then heartbeat so idle peers stay
-      // warm (and stale ones sweep) without waiting for a pan/zoom
-      this._coviewSendView(true);
-      this._coviewBeat = setInterval(() => {
-        this._coviewSendView(true);
-        const left = this._presence.sweep();
-        if (left.length) {
-          this._fire('peers', { peers: this._presence.list(), joined: [], left });
-          this._invalidate();
-        }
-      }, 4000);
-    }
-
-    /** Broadcast our visible range for presence; throttled unless forced. */
-    _coviewSendView(force) {
-      if (!this._coviewCh) return;
-      const r = this.getVisibleRange();
-      if (!r) return;
-      const now = performance.now();
-      if (!force && now - this._coviewViewLast < 120) return;
-      this._coviewViewLast = now;
-      this._coviewSend({
-        type: 'view',
-        from: r.from,
-        to: r.to,
-        name: this._coviewLabel || null,
-      });
-    }
-
-    _coviewSend(msg) {
-      if (!this._coviewCh) return;
-      try {
-        this._coviewCh.postMessage({ v: 1, peer: this._coviewPeer, ...msg });
-      } catch (_) {}
-    }
-
-    _onCoMessage(m) {
-      if (!m || m.v !== 1 || m.peer === this._coviewPeer) return;
-      if (m.type === 'view') {
-        const joined = this._presence.track(m.peer, {
-          range: { from: m.from, to: m.to },
-          name: m.name,
-        });
-        this._invalidate();
-        if (joined) {
-          const p = this._presence.peers.get(m.peer);
-          this._fire('peers', {
-            peers: this._presence.list(),
-            joined: [p ? { ...p, range: p.range && { ...p.range } } : { id: m.peer }],
-            left: [],
-          });
-        }
-        return;
-      }
-      if (m.type === 'bye') {
-        const left = this._presence.drop(m.peer);
-        if (left) this._fire('peers', { peers: this._presence.list(), joined: [], left: [left] });
-        this._invalidate();
-        return;
-      }
-      if (m.type !== 'cross') return;
-      if (m.time == null) {
-        if (this._ghost) {
-          this._ghost = null;
-          clearTimeout(this._ghostTimer);
-          this._invalidate();
-        }
-        return;
-      }
-      if (!isNum(m.time) || !this._data.length) return;
-      this._ghost = {
-        index: WickChart._indexForTime(this._data, m.time),
-        yFrac: isNum(m.yFrac) ? clamp(m.yFrac, 0, 1) : null,
-        at: Date.now(),
-      };
-      clearTimeout(this._ghostTimer);
-      this._ghostTimer = setTimeout(() => {
-        this._ghost = null;
-        this._invalidate();
-      }, 2500);
-      this._invalidate();
-    }
-
-    /** Dispatch `wick:name` (canonical) plus the deprecated `hab:name` alias,
-     *  so 0.x listeners keep working until 2.0. */
-    _fire(name, detail) {
-      this.dispatchEvent(new CustomEvent('wick:' + name, { detail }));
-      this.dispatchEvent(new CustomEvent('hab:' + name, { detail }));
-    }
-
-    /**
-     * Live co-view peers: who else is in the room and the time window each
-     * one is looking at — [{ id, name, range: {from, to}, at }], oldest
-     * sighting first. Peers fade out ~12 s after their last sighting.
-     * @returns {object[]}
-     */
-    getPeers() {
-      return this._presence ? this._presence.list() : [];
-    }
-
-    /**
-     * Narrated timeline for a window (default: the visible range) — pivot
-     * highs/lows, volume spikes, gaps, RSI divergences plus derived legs
-     * ("+12.4% over 38 bars"), sorted by index. Pure data, perfect for
-     * caption UIs or the walk player.
-     *   chart.narrate();                        // visible range
-     *   chart.narrate({ from, to });            // times in ms (s accepted)
-     * @param {{from?: number, to?: number}} [range]
-     * @returns {{i: number, time: number, type: string, side: string, note: string,
-     *            legPct?: number, legBars?: number}[]}
-     */
-    narrate(range) {
-      const d = this._data;
-      if (!d.length) return [];
-      let i0 = 0;
-      let i1 = d.length - 1;
-      if (range && isNum(range.from) && isNum(range.to)) {
-        i0 = WickChart._indexForTime(d, WickChart._timeToMs(range.from));
-        i1 = WickChart._indexForTime(d, WickChart._timeToMs(range.to));
-        if (i0 > i1) [i0, i1] = [i1, i0];
-      }
-      return narrateWindow(d, i0, i1);
-    }
-
-    /**
-     * Walk the chart through history like a story: the viewport slides
-     * from `from` to `to` while `wick:walk` events announce every step and
-     * the narrator's events (spikes, gaps, pivots, legs) as they're crossed.
-     * Any user interaction — pointer, wheel, keys, double-click — stops it.
-     *   chart.walk({ from: 0, to: 500, speed: 120, step: 10 });
-     *   chart.addEventListener('wick:walk', (e) => showCaption(e.detail));
-     *   // detail: { phase: 'step'|'end'|'stop', index, events: [...], from, to }
-     * @param {{from?: number, to?: number, speed?: number, step?: number}} [opts]
-     *        from/to are bar indices (default: last ~500 bars → the end)
-     * @returns {boolean} true when the walk started
-     */
-    walk(opts = {}) {
-      this.stopWalk(true);
-      const d = this._data;
-      if (!d.length || !this._connected) return false;
-      const to = clamp(Math.round(+opts.to || d.length - 1), 0, d.length - 1);
-      const from = clamp(Math.round(opts.from != null ? +opts.from : Math.max(0, to - 500)), 0, to);
-      const span = to - from + 1;
-      // window width: the current viewport, but never more than ~⅓ of the
-      // span (a fully zoomed-out chart would otherwise start at `to`)
-      const widthBars = clamp(
-        Math.min(
-          this._ly ? Math.round(this._ly.plotRight / this._view.spacing) : 120,
-          Math.max(10, Math.ceil(span / 3))
-        ),
-        10,
-        span
-      );
-      const events = narrateWindow(d, from, to, { pivot: 8 });
-      const speed = clamp(Math.round(+opts.speed || 120), 16, 2000);
-      const step = clamp(Math.round(+opts.step || Math.max(1, Math.round(widthBars / 12))), 1, 500);
-      let cursor = Math.min(from + widthBars - 1, to);
-      let ev = 0;
-      let ended = false;
-      const tick = () => {
-        if (ended) return;
-        this._auto = false;
-        this._view.rightIndex = cursor;
-        this._clampView();
-        this._invalidate();
-        this._emitRange();
-        const hits = [];
-        while (ev < events.length && events[ev].i <= cursor) hits.push(events[ev++]);
-        this._fire('walk', { phase: 'step', index: cursor, events: hits, from, to });
-        if (cursor >= to) {
-          ended = true;
-          clearInterval(this._walkTimer);
-          this._walkTimer = 0;
-          this._fire('walk', { phase: 'end', index: cursor, events: [], from, to });
-        } else {
-          cursor = Math.min(cursor + step, to);
-        }
-      };
-      this._walkTimer = setInterval(tick, speed);
-      tick(); // first step lands immediately
-      return true;
-    }
-
-    /**
-     * Stop the running walk (if any). Fires a final `wick:walk`
-     * { phase: 'stop' } unless called internally.
-     */
-    stopWalk(silent) {
-      if (!this._walkTimer) return;
-      clearInterval(this._walkTimer);
-      this._walkTimer = 0;
-      if (!silent) this._fire('walk', { phase: 'stop' });
     }
 
     /**
@@ -3832,171 +3609,47 @@ class WickChart extends HTMLElementBase {
       return { i0, i1, stats: { ...stats, from: { ...stats.from }, to: { ...stats.to } } };
     }
 
-    /**
-     * Capture the current chart state as a story scene: view, series type,
-     * indicators, overlays, scenario and risk plan, plus a title/note.
-     * Build guided tours by capturing several and playing them back.
-     *   const story = [
-     *     chart.captureScene('Overview', 'The full picture'),
-     *     { title: 'The breakout', range: { from, to }, indicators: 'sma:20' },
-     *   ];
-     *   chart.playStory(story);
-     * @param {string} [title]
-     * @param {string} [note]
-     * @returns {object} scene (plain data — snapshot of the moment)
-     */
-    captureScene(title, note) {
-      const scene = {
-        title: title != null ? String(title).slice(0, 60) : '',
-        note: note != null ? String(note).slice(0, 200) : '',
-        range: this.getVisibleRange() || undefined,
-        type: this.getAttribute('type') || 'candles',
-        indicators: this.getAttribute('indicators') || null,
-      };
-      const ovs = this.overlays;
-      if (ovs.length) scene.overlays = ovs;
-      const sc = this.scenario;
-      if (sc) scene.scenario = sc;
-      const rp = this.riskPlan;
-      if (rp) scene.riskPlan = rp;
-      return scene;
-    }
-
-    /** @returns {object[]|null} a copy of the last played story */
-    getStory() {
-      return this._story ? this._story.map((s) => ({ ...s })) : null;
-    }
-
-    /**
-     * Play a story: each scene applies its state (type / indicators /
-     * overlays / scenario / risk plan — set or clear), the camera eases
-     * to its range, then holds for its dwell. `wick:story` events narrate:
-     *   { phase: 'scene' | 'end' | 'stop', index, total, scene, title, note }
-     * Any user interaction — pointer, wheel, keys, double-click — stops it.
-     * @param {object[]} story scenes (invalid entries dropped, max 20)
-     * @param {{dwell?: number, panMs?: number, loop?: boolean}} [opts]
-     *        panMs clamps 100–5000 (default 900); loop replays forever
-     * @returns {boolean} true when playback started
-     */
-    playStory(story, opts = {}) {
-      this.stopStory(true);
-      const scenes = sceneList(story);
-      if (!scenes.length || !this._data.length || !this._connected) return false;
-      const token = ++this._storyToken;
-      this._story = scenes;
-      const panMs = clamp(Math.round(+opts.panMs || 900), 100, 5000);
-      const loop = opts.loop === true;
-      const wait = (ms) => new Promise((r) => setTimeout(r, ms));
-      const run = async () => {
-        let idx = 0;
-        while (token === this._storyToken) {
-          const sc = scenes[idx];
-          this._fire('story', {
-            phase: 'scene', index: idx, total: scenes.length,
-            scene: sc, title: sc.title, note: sc.note,
-          });
-          this._applyScene(sc);
-          const target = this._sceneTarget(sc);
-          if (target) await this._storyTween(target, panMs, token);
-          if (token !== this._storyToken) return;
-          await wait(sc.dwell);
-          if (token !== this._storyToken) return;
-          idx++;
-          if (idx >= scenes.length) {
-            if (loop) idx = 0;
-            else {
-              this._fire('story', { phase: 'end', index: idx - 1, total: scenes.length });
-              return;
-            }
-          }
-        }
-      };
-      run();
-      return true;
-    }
-
-    /**
-     * Stop story playback (if running). Fires a final `wick:story`
-     * { phase: 'stop' } unless called internally.
-     */
-    stopStory(silent) {
-      if (!this._storyToken) return;
-      this._storyToken = 0;
-      if (!silent) this._fire('story', { phase: 'stop' });
-    }
-
-    /** Apply a scene's state (only the fields it carries). */
-    _applyScene(sc) {
-      if (sc.type) this.setAttribute('type', sc.type);
-      if (sc.indicators != null) this.setAttribute('indicators', sc.indicators);
-      if (sc.overlays) this.setOverlays(sc.overlays);
-      if (sc.scenario === 'clear') this.clearScenario();
-      else if (sc.scenario) this.setScenario(sc.scenario);
-      if (sc.riskPlan === 'clear') this.clearRiskPlan();
-      else if (sc.riskPlan) this.setRiskPlan(sc.riskPlan);
-    }
-
-    /** Map a scene's time range to bar indices (null when not applicable). */
-    _sceneTarget(sc) {
-      if (!sc.range || !this._data.length) return null;
-      let i0 = WickChart._indexForTime(this._data, WickChart._timeToMs(sc.range.from));
-      let i1 = WickChart._indexForTime(this._data, WickChart._timeToMs(sc.range.to));
-      if (i0 > i1) [i0, i1] = [i1, i0];
-      return i1 - i0 >= 2 ? { i0, i1 } : null;
-    }
-
-    /** Ease the viewport to { i0, i1 } over `ms`; resolves early if the
-     *  token changes (superseded or stopped). rAF when available. */
-    _storyTween(target, ms, token) {
-      const ly = this._ly;
-      const d = this._data;
-      if (!ly || !d.length) return Promise.resolve();
-      const sp1 = clamp(ly.plotRight / (target.i1 - target.i0), this._minSpacing(), WickChart._MAX_SP);
-      const from = { right: this._view.rightIndex, sp: this._view.spacing };
-      const to = { right: target.i1, sp: sp1 };
-      const t0 = performance.now();
-      this._auto = false;
-      return new Promise((resolve) => {
-        const step = () => {
-          if (token !== this._storyToken) return resolve();
-          const e = easeInOutCubic(Math.min(1, (performance.now() - t0) / ms));
-          this._view.rightIndex = from.right + (to.right - from.right) * e;
-          this._view.spacing = from.sp + (to.sp - from.sp) * e;
-          this._clampView();
-          this._invalidate();
-          this._emitRange();
-          if (e >= 1) resolve();
-          else if (typeof requestAnimationFrame === 'function') requestAnimationFrame(step);
-          else setTimeout(step, 16);
-        };
-        step();
-      });
-    }
-
-    /** Interrupt narrated playback (walk / story) on user input. */
-    _stopPlayback() {
-      if (this._walkTimer) this.stopWalk();
-      if (this._storyToken) this.stopStory();
-    }
-
     _emitRange() {
       const r = this.getVisibleRange();
       if (!r) return;
       this._fire('range', r);
-      if (this._coviewCh) this._coviewSendView();
     }
   }
 
+/* 2.0: the guided-playback, planning, co-view and agent families moved to
+ * their packages. Until one attaches, the familiar methods warn once and
+ * no-op (deleted in 3.0); attaching installs the real thing as an own
+ * property that shadows these. */
+for (const [name, pkg] of [
+  ['narrate', 'wickchart-narrator'],
+  ['walk', 'wickchart-narrator'],
+  ['stopWalk', 'wickchart-narrator'],
+  ['playRange', 'wickchart-narrator'],
+  ['captureScene', 'wickchart-narrator'],
+  ['getStory', 'wickchart-narrator'],
+  ['playStory', 'wickchart-narrator'],
+  ['stopStory', 'wickchart-narrator'],
+  ['getPeers', 'wickchart-coview'],
+  ['setScenario', 'wickchart-scenario'],
+  ['clearScenario', 'wickchart-scenario'],
+  ['setRiskPlan', 'wickchart-scenario'],
+  ['clearRiskPlan', 'wickchart-scenario'],
+  ['aiTools', 'wickchart-ai'],
+  ['aiPrompt', 'wickchart-ai'],
+  ['aiContext', 'wickchart-ai'],
+  ['applyAI', 'wickchart-ai'],
+  ['ask', 'wickchart-ai'],
+]) {
+  WickChart.prototype[name] = function () {
+    warnDeprecatedAlias(`${name}() moved to the ${pkg} package in 2.0`);
+    return undefined;
+  };
+}
+
 if (typeof customElements !== 'undefined') {
   if (!customElements.get('wick-chart')) {
     customElements.define('wick-chart', WickChart);
   }
-  // 0.x alias: same element under its old tag name (deprecated, removed in 2.0)
-  if (!customElements.get('hab-chart')) {
-    /** @deprecated use <wick-chart> */
-    class HabChart extends WickChart {}
-    customElements.define('hab-chart', HabChart);
-  }
 }
 
 export default WickChart;