From e1e0e40c108de95ad3222efde620b16f2ee47f69 Mon Sep 17 00:00:00 2001
From: Chris Amow <chris@amow.com>
Date: Wed, 26 Aug 2026 03:39:56 -0500
Subject: [PATCH] =?UTF-8?q?Keep=20the=20live-price=20=E2=86=90=20just=20in?=
 =?UTF-8?q?side=20the=20chart,=20after=20the=20label.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The plot overlay cannot reach the axis; this one sits on #chart.
---
 static/chart.js  | 34 ++++++++++++++++++++++++++--------
 static/style.css |  4 ++--
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/static/chart.js b/static/chart.js
index 52d8d48..5dd7ef1 100644
--- a/static/chart.js
+++ b/static/chart.js
@@ -206,6 +206,7 @@ class ConfluenceChart {
     this.priceLines = new Map();
     this.currentPriceLine = null;
     this.currentPricePulse = null;
+    this.currentPriceRight = null;
     this.projectionDiagnostic = null;
     this.projectionDiagnosticFrame = null;
     this.animateCurrentPrice = true;
@@ -493,10 +494,15 @@ class ConfluenceChart {
     this.ohlcReadout.hidden = true;
     this.overlayLayer.appendChild(this.ohlcReadout);
     this.currentPricePulse = document.createElement('div');
-    this.currentPricePulse.className = 'current-price-pulse';
-    this.currentPricePulse.innerHTML = '<span>→</span><span>←</span>';
+    this.currentPricePulse.className = 'current-price-pulse current-price-pulse-left';
+    this.currentPricePulse.textContent = '→';
     this.currentPricePulse.hidden = true;
     this.overlayLayer.appendChild(this.currentPricePulse);
+    this.currentPriceRight = document.createElement('div');
+    this.currentPriceRight.className = 'current-price-pulse current-price-pulse-right';
+    this.currentPriceRight.textContent = '←';
+    this.currentPriceRight.hidden = true;
+    el.appendChild(this.currentPriceRight);
     this.projectionDiagnostic = document.createElement('pre');
     this.projectionDiagnostic.className = 'projection-diagnostic';
     this.projectionDiagnostic.hidden = true;
@@ -940,15 +946,27 @@ class ConfluenceChart {
   }
 
   syncCurrentPricePulse() {
-    const showFrame = this.animateCurrentPrice && this.lastCurrentPrice != null;
+    const show = this.animateCurrentPrice && this.lastCurrentPrice != null;
     if (this.currentPricePulse) {
-      this.currentPricePulse.hidden = !showFrame;
-      this.currentPricePulse.classList.toggle('active', showFrame);
+      this.currentPricePulse.hidden = !show;
+      this.currentPricePulse.classList.toggle('active', show);
     }
-    if (!this.candles || this.lastCurrentPrice == null) return;
+    if (this.currentPriceRight) {
+      this.currentPriceRight.hidden = !show;
+      this.currentPriceRight.classList.toggle('active', show);
+    }
+    if (!show || !this.candles || this.lastCurrentPrice == null || !this.chartEl) return;
     const y = this.candles.priceToCoordinate(this.lastCurrentPrice);
-    if (y == null || !this.currentPricePulse) return;
-    this.currentPricePulse.style.top = `${Math.round(y - 8)}px`;
+    const canvas = this.plotCanvas();
+    if (y == null || !canvas) return;
+    const top = Math.round(y - 8);
+    if (this.currentPricePulse) this.currentPricePulse.style.top = `${top}px`;
+    if (this.currentPriceRight) {
+      const chart = this.chartEl.getBoundingClientRect();
+      const plot = canvas.getBoundingClientRect();
+      this.currentPriceRight.style.top = `${Math.round(plot.top - chart.top + y - 8)}px`;
+      this.currentPriceRight.style.left = `${Math.max(0, this.chartEl.clientWidth - 16)}px`;
+    }
   }
 
   setCommentHandlers({ onToggle, onMove, onSelect }) {
diff --git a/static/style.css b/static/style.css
index 2e45cbd..91f829c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,8 +13,8 @@ main { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; }
 button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:6px 11px; font:inherit; cursor:pointer; }button.active { color:var(--bg); background:var(--accent); border-color:var(--accent); }
 .chart-head-tools { display:flex; align-items:center; gap:8px; }.undo-btn { display:grid; place-items:center; width:32px; height:28px; padding:0; flex:none; }.undo-btn:disabled { opacity:.35; cursor:default; }.timeframes { display:flex; flex-wrap:wrap; justify-content:flex-end; }.timeframes button+button { border-left:0; }
 .drawing-tools { min-height:38px; padding:5px 12px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }.drawing-tools button,.drawing-tools select,.drawing-tools .line-name { padding:4px 8px; font-size:10px; }.drawing-tools select,.drawing-tools .line-name { background:var(--panel); color:var(--fg); border:1px solid var(--line); }.drawing-tools .line-name { width:130px; font:inherit; }.drawing-tools label { display:flex; gap:4px; align-items:center; }.drawing-tools input { accent-color:var(--accent); }
-#chart { position:relative; height:calc(100vh - 190px); min-height:420px; touch-action:pan-y; }.chart-preview,.chart-line-bridges,.chart-handles { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }.chart-preview,.chart-line-bridges { z-index:4; }.chart-line-bridges line { stroke-linecap:round; }.chart-handles { z-index:6; }.chart-preview line[hidden],.chart-anchor[hidden],.chart-line-hit[hidden],.chart-line-focus[hidden],.chart-fib-focus[hidden] { display:none; }.chart-line-focus { stroke-linecap:round; pointer-events:none; animation:line-focus .75s ease-out forwards; }.chart-line-hit { fill:none; stroke:transparent; stroke-width:16px; pointer-events:stroke; cursor:move; touch-action:none; }.chart-anchor { stroke:var(--panel); stroke-width:2px; cursor:grab; pointer-events:all; touch-action:none; }.chart-anchor:active { cursor:grabbing; }.chart-tooltip { position:absolute; z-index:5; padding:4px 7px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:10px; white-space:pre-line; pointer-events:none; }.chart-tooltip[hidden] { display:none; }
-.current-price-pulse { position:absolute; left:4px; right:4px; z-index:8; display:flex; justify-content:space-between; color:var(--accent); font:700 16px/1 "IBM Plex Mono",monospace; text-shadow:0 0 3px var(--chart-bg); opacity:0; pointer-events:none; }.current-price-pulse.active { opacity:1; animation:current-price-frame 1.8s ease-in-out infinite; }@keyframes current-price-frame { 0%,100% { opacity:1; } 50% { opacity:.35; } }
+#chart { position:relative; overflow:visible; height:calc(100vh - 190px); min-height:420px; touch-action:pan-y; }.chart-preview,.chart-line-bridges,.chart-handles { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; }.chart-preview,.chart-line-bridges { z-index:4; }.chart-line-bridges line { stroke-linecap:round; }.chart-handles { z-index:6; }.chart-preview line[hidden],.chart-anchor[hidden],.chart-line-hit[hidden],.chart-line-focus[hidden],.chart-fib-focus[hidden] { display:none; }.chart-line-focus { stroke-linecap:round; pointer-events:none; animation:line-focus .75s ease-out forwards; }.chart-line-hit { fill:none; stroke:transparent; stroke-width:16px; pointer-events:stroke; cursor:move; touch-action:none; }.chart-anchor { stroke:var(--panel); stroke-width:2px; cursor:grab; pointer-events:all; touch-action:none; }.chart-anchor:active { cursor:grabbing; }.chart-tooltip { position:absolute; z-index:5; padding:4px 7px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:10px; white-space:pre-line; pointer-events:none; }.chart-tooltip[hidden] { display:none; }
+.current-price-pulse { position:absolute; z-index:10; color:var(--accent); font:700 16px/1 "IBM Plex Mono",monospace; text-shadow:0 0 3px var(--chart-bg); opacity:0; pointer-events:none; }.current-price-pulse-left { left:4px; }.current-price-pulse.active { opacity:1; animation:current-price-frame 1.8s ease-in-out infinite; }@keyframes current-price-frame { 0%,100% { opacity:1; } 50% { opacity:.35; } }
 .chart-ohlc { position:absolute; top:6px; left:8px; z-index:5; padding:2px 6px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 90%,transparent); color:var(--fg); font-size:10px; font-variant-numeric:tabular-nums; pointer-events:none; white-space:nowrap; }.chart-ohlc.up { color:var(--green); }.chart-ohlc.down { color:var(--red); }.chart-ohlc[hidden] { display:none; }
 .projection-diagnostic { position:absolute; top:8px; left:8px; z-index:9; margin:0; padding:5px 7px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%,transparent); color:var(--fg); font:9px/1.35 "IBM Plex Mono", monospace; white-space:pre; }
 @media (prefers-reduced-motion:reduce) { .current-price-pulse.active { animation:none; opacity:.85; } }