Chart: volume dots, price dots, multi-symbol volumes; FIX UI back button

Price chart:
- Volume bars narrowed to 25% slot width, capped at 5px
- Close-price overlay replaced with orange dots per candle (not a line)
- Legend updated to dot symbol instead of line

Multi-symbol chart:
- Volume data now passed from loadAllHistory (live + candle modes)
- drawMultiChart splits into 70% price / 30% volume when volumes present
- Aggregated volume bars (sum across symbols per 60s bucket) shown below
- Volume Y-axis labels on right side (0, 50%, max)

FIX UI:
- Added "← Dashboard" back button in header (links to /)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dashboard/templates/index.html

@@ -781,7 +781,7 @@
       const n       = points.length;
       const slotW   = W / n;
       const bodyW   = Math.max(1, Math.floor(slotW * 0.65));
-      const volBarW = Math.max(1, Math.floor(slotW * 0.35));
+      const volBarW = Math.max(1, Math.min(Math.floor(slotW * 0.25), 5));
 
       // Price grid
       ctx.strokeStyle = "#eee"; ctx.lineWidth = 1;
@@ -831,14 +831,14 @@
         ctx.fillRect(x, bodyTop, bodyW, bodyH);
       });
 
-      // Close-price line overlay (orange)
-      ctx.strokeStyle = "rgba(255,152,0,0.85)"; ctx.lineWidth = 1.5;
-      ctx.beginPath();
+      // Close-price dots (orange) — one point per candle
+      ctx.fillStyle = "rgba(255,152,0,0.9)";
       points.forEach((p, i) => {
         const x = pad.left + i * slotW + slotW / 2;
-        i === 0 ? ctx.moveTo(x, toY(p.close)) : ctx.lineTo(x, toY(p.close));
+        ctx.beginPath();
+        ctx.arc(x, toY(p.close), 2, 0, Math.PI * 2);
+        ctx.fill();
       });
-      ctx.stroke();
 
       // Time labels (up to 5 evenly spaced)
       ctx.fillStyle = "#888"; ctx.font = "9px Arial"; ctx.textAlign = "center";
@@ -856,8 +856,8 @@
       ctx.fillStyle = "#26a69a"; ctx.fillText("▲", pad.left, 12);
       ctx.fillStyle = "#ef5350"; ctx.fillText("▼", pad.left + 14, 12);
       ctx.fillStyle = "#888";    ctx.fillText("candle", pad.left + 24, 12);
-      ctx.strokeStyle = "rgba(255,152,0,0.85)"; ctx.lineWidth = 1.5;
-      ctx.beginPath(); ctx.moveTo(pad.left + 66, 9); ctx.lineTo(pad.left + 78, 9); ctx.stroke();
+      ctx.fillStyle = "rgba(255,152,0,0.9)";
+      ctx.beginPath(); ctx.arc(pad.left + 72, 9, 2.5, 0, Math.PI * 2); ctx.fill();
       ctx.fillStyle = "#ff9800"; ctx.fillText("close", pad.left + 80, 12);
       if (labelSuffix) { ctx.fillStyle = "#bbb"; ctx.fillText(labelSuffix, pad.left + 114, 12); }
     }
@@ -1180,9 +1180,15 @@
         return;
       }
 
-      const pad = { top: 18, right: 48, bottom: 32, left: 46 };
-      const W   = canvas.width  - pad.left - pad.right;
-      const H   = canvas.height - pad.top  - pad.bottom;
+      const hasVolume = active.some(s => s.points.some(p => (p.volume || 0) > 0));
+      const pad    = { top: 18, right: 48, bottom: 32, left: 46 };
+      const W      = canvas.width  - pad.left - pad.right;
+      const H      = canvas.height - pad.top  - pad.bottom;
+      const priceH = hasVolume ? H * 0.70 : H;
+      const gapH   = hasVolume ? H * 0.03 : 0;
+      const volH   = hasVolume ? H * 0.27 : 0;
+      const priceY = pad.top;
+      const volY   = pad.top + priceH + gapH;
 
       // Normalise each series to % change from its first point
       const norm = active.map(s => {
@@ -1202,10 +1208,10 @@
       const maxTs  = Math.max(...allTs);
       const tsRng  = maxTs - minTs || 1;
 
-      const toX = ts  => pad.left + ((ts  - minTs)  / tsRng)  * W;
-      const toY = pct => pad.top  + H - ((pct - minPct) / (maxPct - minPct)) * H;
+      const toX = ts  => pad.left + ((ts - minTs) / tsRng) * W;
+      const toY = pct => priceY + priceH - ((pct - minPct) / (maxPct - minPct)) * priceH;
 
-      // Grid + Y labels
+      // Price grid + Y labels
       ctx.strokeStyle = "#eee"; ctx.lineWidth = 1;
       for (let i = 0; i <= 4; i++) {
         const pct = minPct + (maxPct - minPct) * i / 4;
@@ -1236,6 +1242,44 @@
         ctx.stroke();
       });
 
+      // Volume section — aggregate all symbols by time bucket
+      if (hasVolume) {
+        const volMap = {};
+        active.forEach(s => {
+          s.points.forEach(p => {
+            const bucket = Math.round(p.ts / 60) * 60;
+            volMap[bucket] = (volMap[bucket] || 0) + (p.volume || 0);
+          });
+        });
+        const volPoints = Object.entries(volMap)
+          .map(([ts, vol]) => ({ ts: +ts, volume: vol }))
+          .sort((a, b) => a.ts - b.ts);
+        const maxVol = Math.max(...volPoints.map(v => v.volume), 1);
+
+        // Divider
+        ctx.strokeStyle = "#e0e0e0"; ctx.lineWidth = 1;
+        ctx.beginPath(); ctx.moveTo(pad.left, volY); ctx.lineTo(canvas.width - pad.right, volY); ctx.stroke();
+
+        // Bars
+        const volSlotW = W / Math.max(volPoints.length, 1);
+        const volBarW  = Math.max(1, Math.min(Math.floor(volSlotW * 0.25), 5));
+        volPoints.forEach(v => {
+          const x  = toX(v.ts) - volBarW / 2;
+          const bh = (v.volume / maxVol) * volH;
+          ctx.fillStyle = "rgba(96,125,139,0.5)";
+          ctx.fillRect(x, volY + volH - bh, volBarW, bh);
+        });
+
+        // Volume Y-axis labels (right side)
+        ctx.fillStyle = "#888"; ctx.font = "9px Arial"; ctx.textAlign = "left";
+        [1.0, 0.5, 0.0].forEach(frac => {
+          const val = Math.round(maxVol * frac);
+          const y   = volY + volH * (1 - frac);
+          const lbl = val >= 1000 ? (val / 1000).toFixed(1) + "k" : val.toString();
+          ctx.fillText(lbl, canvas.width - pad.right + 3, y + 3);
+        });
+      }
+
       // Time labels (up to 4)
       ctx.fillStyle = "#888"; ctx.font = "9px Arial"; ctx.textAlign = "center";
       for (let i = 0; i <= 3; i++) {
@@ -1277,7 +1321,7 @@
       if (period === "live") {
         const series = symbols.map(sym => {
           let trades = state.trades.filter(t => t.symbol === sym).slice(0, 100).reverse();
-          return { symbol: sym, points: trades.map(t => ({ price: t.price || 0, ts: t.timestamp || Date.now()/1000 })) };
+          return { symbol: sym, points: trades.map(t => ({ price: t.price || 0, ts: t.timestamp || Date.now()/1000, volume: t.quantity || t.qty || 0 })) };
         });
         drawMultiChart(series, `${symbols.length} symbols`);
         statusEl.textContent = `${symbols.length} symbols`;
@@ -1291,7 +1335,7 @@
         );
         const series = symbols.map((sym, i) => ({
           symbol: sym,
-          points: (results[i].candles || []).map(c => ({ price: c.c, ts: c.t }))
+          points: (results[i].candles || []).map(c => ({ price: c.c, ts: c.t, volume: c.v || 0 }))
         }));
         const filled = series.filter(s => s.points.length > 0);
         drawMultiChart(series, `${filled.length} symbols`);

fix-ui-client/templates/index.html

@@ -125,6 +125,7 @@
       <span class="dot"></span>
       <span>{{ 'CONNECTED' if connected else 'DISCONNECTED' }}</span>
     </span>
+    <a href="/" style="margin-left:auto; padding:4px 14px; background:#6c757d; color:#fff; border-radius:20px; font-size:12px; font-weight:bold; text-decoration:none;">← Dashboard</a>
   </h1>
 
   <div class="container">