feat(chart): layers panel + selection-first fib

- Adds Layers drawer (visible/lock/opacity) and effective opacity wiring.
- Implements selection-first overlay: click selects, drag moves selected, Ctrl-drag edits B, Space-drag always pans.
- Routes pointer events via capture and adds Fib opacity support.
- Updates .gitignore to keep secrets/local scratch out of git.

.gitignore

@@ -1,7 +1,14 @@
+# Secrets (never commit)
+tokens/*
+!tokens/*.example.json
+!tokens/*.example.yml
+!tokens/*.example.yaml
+
 node_modules/
 dist/
 .env
 *.log
-tokens/*.json
-tokens/*.yml
-tokens/*.yaml
+
+# Local scratch / build output
+_tmp/
+apps/visualizer/dist/

apps/visualizer/src/features/chart/ChartIcons.tsx

@@ -156,6 +156,21 @@ export function IconEye(props: IconProps) {
   );
 }
 
+export function IconLayers(props: IconProps) {
+  return (
+    <Svg title={props.title ?? 'Layers'} {...props}>
+      <path
+        d="M3.0 6.2L9.0 3.2L15.0 6.2L9.0 9.2L3.0 6.2Z"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+      <path d="M3.0 9.2L9.0 12.2L15.0 9.2" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" opacity="0.85" />
+      <path d="M3.0 12.2L9.0 15.2L15.0 12.2" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" opacity="0.65" />
+    </Svg>
+  );
+}
+
 export function IconTrash(props: IconProps) {
   return (
     <Svg title={props.title ?? 'Delete'} {...props}>

apps/visualizer/src/features/chart/ChartLayersPanel.tsx

@@ -0,0 +1,215 @@
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import type { OverlayLayer } from './ChartPanel.types';
+import { IconEye, IconLock, IconTrash } from './ChartIcons';
+
+type Props = {
+  open: boolean;
+  layers: OverlayLayer[];
+  onRequestClose: () => void;
+
+  onToggleLayerVisible: (layerId: string) => void;
+  onToggleLayerLocked: (layerId: string) => void;
+  onSetLayerOpacity: (layerId: string, opacity: number) => void;
+
+  fibPresent: boolean;
+  fibSelected: boolean;
+  fibVisible: boolean;
+  fibLocked: boolean;
+  fibOpacity: number;
+  onSelectFib: () => void;
+  onToggleFibVisible: () => void;
+  onToggleFibLocked: () => void;
+  onSetFibOpacity: (opacity: number) => void;
+  onDeleteFib: () => void;
+};
+
+function clamp01(v: number): number {
+  if (!Number.isFinite(v)) return 1;
+  return Math.max(0, Math.min(1, v));
+}
+
+function opacityToPct(opacity: number): number {
+  return Math.round(clamp01(opacity) * 100);
+}
+
+function pctToOpacity(pct: number): number {
+  if (!Number.isFinite(pct)) return 1;
+  return clamp01(pct / 100);
+}
+
+function IconButton({
+  title,
+  active,
+  disabled,
+  onClick,
+  children,
+}: {
+  title: string;
+  active?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={['layersBtn', active ? 'layersBtn--active' : null].filter(Boolean).join(' ')}
+      title={title}
+      aria-label={title}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+      }}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+function OpacitySlider({
+  value,
+  disabled,
+  onChange,
+}: {
+  value: number;
+  disabled?: boolean;
+  onChange: (next: number) => void;
+}) {
+  const pct = opacityToPct(value);
+  return (
+    <div className="layersOpacity">
+      <input
+        className="layersOpacity__range"
+        type="range"
+        min={0}
+        max={100}
+        value={pct}
+        onChange={(e) => onChange(pctToOpacity(Number(e.target.value)))}
+        disabled={disabled}
+      />
+      <div className="layersOpacity__pct">{pct}%</div>
+    </div>
+  );
+}
+
+export default function ChartLayersPanel({
+  open,
+  layers,
+  onRequestClose,
+  onToggleLayerVisible,
+  onToggleLayerLocked,
+  onSetLayerOpacity,
+  fibPresent,
+  fibSelected,
+  fibVisible,
+  fibLocked,
+  fibOpacity,
+  onSelectFib,
+  onToggleFibVisible,
+  onToggleFibLocked,
+  onSetFibOpacity,
+  onDeleteFib,
+}: Props) {
+  const drawingsLayer = useMemo(() => layers.find((l) => l.id === 'drawings'), [layers]);
+
+  return (
+    <>
+      <div
+        className={['chartLayersBackdrop', open ? 'chartLayersBackdrop--open' : null].filter(Boolean).join(' ')}
+        onClick={open ? onRequestClose : undefined}
+      />
+      <div className={['chartLayersPanel', open ? 'chartLayersPanel--open' : null].filter(Boolean).join(' ')}>
+        <div className="chartLayersPanel__head">
+          <div className="chartLayersPanel__title">Layers</div>
+          <button type="button" className="chartLayersPanel__close" onClick={onRequestClose} aria-label="Close">
+            ✕
+          </button>
+        </div>
+
+        <div className="chartLayersTable">
+          <div className="chartLayersRow chartLayersRow--head">
+            <div className="chartLayersCell chartLayersCell--icon" title="Visible">
+              <IconEye />
+            </div>
+            <div className="chartLayersCell chartLayersCell--icon" title="Lock">
+              <IconLock />
+            </div>
+            <div className="chartLayersCell chartLayersCell--name">Name</div>
+            <div className="chartLayersCell chartLayersCell--opacity">Opacity</div>
+            <div className="chartLayersCell chartLayersCell--actions">Actions</div>
+          </div>
+
+          {drawingsLayer ? (
+            <div className="chartLayersRow chartLayersRow--layer">
+              <div className="chartLayersCell chartLayersCell--icon">
+                <IconButton
+                  title="Toggle visible"
+                  active={drawingsLayer.visible}
+                  onClick={() => onToggleLayerVisible(drawingsLayer.id)}
+                >
+                  <IconEye />
+                </IconButton>
+              </div>
+              <div className="chartLayersCell chartLayersCell--icon">
+                <IconButton
+                  title="Toggle lock"
+                  active={drawingsLayer.locked}
+                  onClick={() => onToggleLayerLocked(drawingsLayer.id)}
+                >
+                  <IconLock />
+                </IconButton>
+              </div>
+              <div className="chartLayersCell chartLayersCell--name">
+                <div className="layersName layersName--layer">
+                  {drawingsLayer.name}
+                  <span className="layersName__meta">{fibPresent ? ' (1)' : ' (0)'}</span>
+                </div>
+              </div>
+              <div className="chartLayersCell chartLayersCell--opacity">
+                <OpacitySlider value={drawingsLayer.opacity} onChange={(next) => onSetLayerOpacity(drawingsLayer.id, next)} />
+              </div>
+              <div className="chartLayersCell chartLayersCell--actions" />
+            </div>
+          ) : null}
+
+          {drawingsLayer && fibPresent ? (
+            <div
+              className={['chartLayersRow', 'chartLayersRow--object', fibSelected ? 'chartLayersRow--selected' : null]
+                .filter(Boolean)
+                .join(' ')}
+              onClick={onSelectFib}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="chartLayersCell chartLayersCell--icon">
+                <IconButton title="Toggle visible" active={fibVisible} onClick={onToggleFibVisible}>
+                  <IconEye />
+                </IconButton>
+              </div>
+              <div className="chartLayersCell chartLayersCell--icon">
+                <IconButton title="Toggle lock" active={fibLocked} onClick={onToggleFibLocked}>
+                  <IconLock />
+                </IconButton>
+              </div>
+              <div className="chartLayersCell chartLayersCell--name">
+                <div className="layersName layersName--object">Fib Retracement</div>
+              </div>
+              <div className="chartLayersCell chartLayersCell--opacity">
+                <OpacitySlider value={fibOpacity} onChange={onSetFibOpacity} />
+              </div>
+              <div className="chartLayersCell chartLayersCell--actions">
+                <IconButton title="Delete fib" onClick={onDeleteFib}>
+                  <IconTrash />
+                </IconButton>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}
+

apps/visualizer/src/features/chart/ChartPanel.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Candle, ChartIndicators } from '../../lib/api';
 import Card from '../../ui/Card';
+import ChartLayersPanel from './ChartLayersPanel';
 import ChartSideToolbar from './ChartSideToolbar';
 import ChartToolbar from './ChartToolbar';
 import TradingChart from './TradingChart';
 import type { FibAnchor, FibRetracement } from './FibRetracementPrimitive';
 import type { IChartApi } from 'lightweight-charts';
+import type { OverlayLayer } from './ChartPanel.types';
 
 type Props = {
   candles: Candle[];
@@ -17,6 +19,25 @@ type Props = {
   seriesLabel: string;
 };
 
+type FibDragMode = 'move' | 'edit-b';
+
+type FibDrag = {
+  pointerId: number;
+  mode: FibDragMode;
+  startClientX: number;
+  startClientY: number;
+  start: FibAnchor;
+  origin: FibRetracement;
+  moved: boolean;
+};
+
+function isEditableTarget(t: EventTarget | null): boolean {
+  if (!(t instanceof HTMLElement)) return false;
+  const tag = t.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+  return t.isContentEditable;
+}
+
 export default function ChartPanel({
   candles,
   indicators,
@@ -31,11 +52,27 @@ export default function ChartPanel({
   const [fibStart, setFibStart] = useState<FibAnchor | null>(null);
   const [fib, setFib] = useState<FibRetracement | null>(null);
   const [fibDraft, setFibDraft] = useState<FibRetracement | null>(null);
+  const [layers, setLayers] = useState<OverlayLayer[]>([
+    { id: 'drawings', name: 'Drawings', visible: true, locked: false, opacity: 1 },
+  ]);
+  const [layersOpen, setLayersOpen] = useState(false);
+  const [fibVisible, setFibVisible] = useState(true);
+  const [fibLocked, setFibLocked] = useState(false);
+  const [fibOpacity, setFibOpacity] = useState(1);
+  const [selectedOverlayId, setSelectedOverlayId] = useState<string | null>(null);
+  const [priceAutoScale, setPriceAutoScale] = useState(true);
+
   const chartApiRef = useRef<IChartApi | null>(null);
   const activeToolRef = useRef(activeTool);
   const fibStartRef = useRef<FibAnchor | null>(fibStart);
   const pendingMoveRef = useRef<FibAnchor | null>(null);
+  const pendingDragRef = useRef<{ anchor: FibAnchor; clientX: number; clientY: number } | null>(null);
   const rafRef = useRef<number | null>(null);
+  const spaceDownRef = useRef<boolean>(false);
+  const dragRef = useRef<FibDrag | null>(null);
+  const selectPointerRef = useRef<number | null>(null);
+  const selectedOverlayIdRef = useRef<string | null>(selectedOverlayId);
+  const fibRef = useRef<FibRetracement | null>(fib);
 
   useEffect(() => {
     if (!isFullscreen) return;
@@ -67,16 +104,64 @@ export default function ChartPanel({
     fibStartRef.current = fibStart;
   }, [fibStart]);
 
+  useEffect(() => {
+    selectedOverlayIdRef.current = selectedOverlayId;
+  }, [selectedOverlayId]);
+
+  useEffect(() => {
+    fibRef.current = fib;
+  }, [fib]);
+
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return;
-      if (activeToolRef.current !== 'fib-retracement') return;
+      if (isEditableTarget(e.target)) return;
+
+      if (e.code === 'Space') {
+        spaceDownRef.current = true;
+        e.preventDefault();
+        return;
+      }
+
+      if (e.key === 'Escape') {
+        if (dragRef.current) {
+          dragRef.current = null;
+          pendingDragRef.current = null;
+          selectPointerRef.current = null;
+          setFibDraft(null);
+          return;
+        }
+
+        if (activeToolRef.current === 'fib-retracement') {
           setFibStart(null);
           setFibDraft(null);
           setActiveTool('cursor');
+          return;
+        }
+
+        if (selectedOverlayIdRef.current) setSelectedOverlayId(null);
+        return;
+      }
+
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (selectedOverlayIdRef.current === 'fib') {
+          clearFib();
+        }
+      }
     };
+
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        spaceDownRef.current = false;
+      }
+    };
+
     window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -98,6 +183,80 @@ export default function ChartPanel({
     ts.setVisibleLogicalRange({ from: center - span / 2, to: center + span / 2 });
   }
 
+  function clamp01(v: number): number {
+    if (!Number.isFinite(v)) return 1;
+    return Math.max(0, Math.min(1, v));
+  }
+
+  function updateLayer(layerId: string, patch: Partial<OverlayLayer>) {
+    setLayers((prev) => prev.map((l) => (l.id === layerId ? { ...l, ...patch } : l)));
+  }
+
+  function clearFib() {
+    setFib(null);
+    setFibStart(null);
+    setFibDraft(null);
+    dragRef.current = null;
+    pendingDragRef.current = null;
+    selectPointerRef.current = null;
+    setSelectedOverlayId(null);
+  }
+
+  function computeFibFromDrag(drag: FibDrag, pointer: FibAnchor): FibRetracement {
+    if (drag.mode === 'edit-b') return { a: drag.origin.a, b: pointer };
+    const deltaLogical = pointer.logical - drag.start.logical;
+    const deltaPrice = pointer.price - drag.start.price;
+    return {
+      a: { logical: drag.origin.a.logical + deltaLogical, price: drag.origin.a.price + deltaPrice },
+      b: { logical: drag.origin.b.logical + deltaLogical, price: drag.origin.b.price + deltaPrice },
+    };
+  }
+
+  function scheduleFrame() {
+    if (rafRef.current != null) return;
+    rafRef.current = window.requestAnimationFrame(() => {
+      rafRef.current = null;
+
+      const drag = dragRef.current;
+      const pendingDrag = pendingDragRef.current;
+      if (drag && pendingDrag) {
+        if (!drag.moved) {
+          const dx = pendingDrag.clientX - drag.startClientX;
+          const dy = pendingDrag.clientY - drag.startClientY;
+          if (dx * dx + dy * dy >= 16) drag.moved = true; // ~4px threshold
+        }
+        if (drag.moved) {
+          setFibDraft(computeFibFromDrag(drag, pendingDrag.anchor));
+        }
+        return;
+      }
+
+      const pointer = pendingMoveRef.current;
+      if (!pointer) return;
+      if (activeToolRef.current !== 'fib-retracement') return;
+      const start2 = fibStartRef.current;
+      if (!start2) return;
+      setFibDraft({ a: start2, b: pointer });
+    });
+  }
+
+  const drawingsLayer =
+    layers.find((l) => l.id === 'drawings') ?? { id: 'drawings', name: 'Drawings', visible: true, locked: false, opacity: 1 };
+  const fibEffectiveVisible = fibVisible && drawingsLayer.visible;
+  const fibEffectiveOpacity = fibOpacity * drawingsLayer.opacity;
+  const fibEffectiveLocked = fibLocked || drawingsLayer.locked;
+  const fibSelected = selectedOverlayId === 'fib';
+  const fibRenderable = fibEffectiveVisible ? (fibDraft ?? fib) : null;
+
+  useEffect(() => {
+    if (selectedOverlayId !== 'fib') return;
+    if (!fib) {
+      setSelectedOverlayId(null);
+      return;
+    }
+    if (!fibEffectiveVisible) setSelectedOverlayId(null);
+  }, [fib, fibEffectiveVisible, selectedOverlayId]);
+
   return (
     <>
       {isFullscreen ? <div className="chartBackdrop" onClick={() => setIsFullscreen(false)} /> : null}
@@ -108,6 +267,8 @@ export default function ChartPanel({
             onTimeframeChange={onTimeframeChange}
             showIndicators={showIndicators}
             onToggleIndicators={onToggleIndicators}
+            priceAutoScale={priceAutoScale}
+            onTogglePriceAutoScale={() => setPriceAutoScale((v) => !v)}
             seriesLabel={seriesLabel}
             isFullscreen={isFullscreen}
             onToggleFullscreen={() => setIsFullscreen((v) => !v)}
@@ -118,15 +279,13 @@ export default function ChartPanel({
             timeframe={timeframe}
             activeTool={activeTool}
             hasFib={fib != null || fibDraft != null}
+            isLayersOpen={layersOpen}
             onToolChange={setActiveTool}
+            onToggleLayers={() => setLayersOpen((v) => !v)}
             onZoomIn={() => zoomTime(0.8)}
             onZoomOut={() => zoomTime(1.25)}
             onResetView={() => chartApiRef.current?.timeScale().resetTimeScale()}
-            onClearFib={() => {
-              setFib(null);
-              setFibStart(null);
-              setFibDraft(null);
-            }}
+            onClearFib={clearFib}
           />
           <div className="chartCard__chart">
             <TradingChart
@@ -136,12 +295,15 @@ export default function ChartPanel({
               ema20={indicators.ema20}
               bb20={indicators.bb20}
               showIndicators={showIndicators}
-              fib={fibDraft ?? fib}
+              fib={fibRenderable}
+              fibOpacity={fibEffectiveOpacity}
+              fibSelected={fibSelected}
+              priceAutoScale={priceAutoScale}
               onReady={({ chart }) => {
                 chartApiRef.current = chart;
               }}
               onChartClick={(p) => {
-                if (activeTool !== 'fib-retracement') return;
+                if (activeTool === 'fib-retracement') {
                   if (!fibStartRef.current) {
                     fibStartRef.current = p;
                     setFibStart(p);
@@ -153,21 +315,103 @@ export default function ChartPanel({
                   fibStartRef.current = null;
                   setFibDraft(null);
                   setActiveTool('cursor');
+                  return;
+                }
+
+                if (p.target === 'chart') setSelectedOverlayId(null);
               }}
               onChartCrosshairMove={(p) => {
-                if (activeToolRef.current !== 'fib-retracement') return;
-                const start = fibStartRef.current;
-                if (!start) return;
                 pendingMoveRef.current = p;
-                if (rafRef.current != null) return;
-                rafRef.current = window.requestAnimationFrame(() => {
-                  rafRef.current = null;
-                  const move = pendingMoveRef.current;
-                  const start2 = fibStartRef.current;
-                  if (!move || !start2) return;
-                  setFibDraft({ a: start2, b: move });
-                });
+                scheduleFrame();
               }}
+              onPointerEvent={({ type, logical, price, target, event }) => {
+                const pointer: FibAnchor = { logical, price };
+
+                if (type === 'pointerdown') {
+                  if (event.button !== 0) return;
+                  if (spaceDownRef.current) return;
+                  if (activeToolRef.current !== 'cursor') return;
+                  if (target !== 'fib') return;
+                  if (!fibRef.current) return;
+                  if (!fibEffectiveVisible) return;
+
+                  if (selectedOverlayIdRef.current !== 'fib') {
+                    setSelectedOverlayId('fib');
+                    selectPointerRef.current = event.pointerId;
+                    return { consume: true, capturePointer: true };
+                  }
+
+                  if (fibEffectiveLocked) {
+                    selectPointerRef.current = event.pointerId;
+                    return { consume: true, capturePointer: true };
+                  }
+
+                  dragRef.current = {
+                    pointerId: event.pointerId,
+                    mode: event.ctrlKey ? 'edit-b' : 'move',
+                    startClientX: event.clientX,
+                    startClientY: event.clientY,
+                    start: pointer,
+                    origin: fibRef.current,
+                    moved: false,
+                  };
+                  pendingDragRef.current = { anchor: pointer, clientX: event.clientX, clientY: event.clientY };
+                  setFibDraft(fibRef.current);
+                  return { consume: true, capturePointer: true };
+                }
+
+                const drag = dragRef.current;
+                if (drag && drag.pointerId === event.pointerId) {
+                  if (type === 'pointermove') {
+                    pendingDragRef.current = { anchor: pointer, clientX: event.clientX, clientY: event.clientY };
+                    scheduleFrame();
+                    return { consume: true };
+                  }
+                  if (type === 'pointerup' || type === 'pointercancel') {
+                    if (drag.moved) setFib(computeFibFromDrag(drag, pointer));
+                    dragRef.current = null;
+                    pendingDragRef.current = null;
+                    setFibDraft(null);
+                    return { consume: true };
+                  }
+                  return;
+                }
+
+                if (selectPointerRef.current != null && selectPointerRef.current === event.pointerId) {
+                  if (type === 'pointermove') return { consume: true };
+                  if (type === 'pointerup' || type === 'pointercancel') {
+                    selectPointerRef.current = null;
+                    return { consume: true };
+                  }
+                }
+              }}
+            />
+
+            <ChartLayersPanel
+              open={layersOpen}
+              layers={layers}
+              onRequestClose={() => setLayersOpen(false)}
+              onToggleLayerVisible={(layerId) => {
+                const layer = layers.find((l) => l.id === layerId);
+                if (!layer) return;
+                updateLayer(layerId, { visible: !layer.visible });
+              }}
+              onToggleLayerLocked={(layerId) => {
+                const layer = layers.find((l) => l.id === layerId);
+                if (!layer) return;
+                updateLayer(layerId, { locked: !layer.locked });
+              }}
+              onSetLayerOpacity={(layerId, opacity) => updateLayer(layerId, { opacity: clamp01(opacity) })}
+              fibPresent={fib != null}
+              fibSelected={fibSelected}
+              fibVisible={fibVisible}
+              fibLocked={fibLocked}
+              fibOpacity={fibOpacity}
+              onSelectFib={() => setSelectedOverlayId('fib')}
+              onToggleFibVisible={() => setFibVisible((v) => !v)}
+              onToggleFibLocked={() => setFibLocked((v) => !v)}
+              onSetFibOpacity={(opacity) => setFibOpacity(clamp01(opacity))}
+              onDeleteFib={clearFib}
             />
           </div>
         </div>

apps/visualizer/src/features/chart/ChartPanel.types.ts

@@ -0,0 +1,8 @@
+export type OverlayLayer = {
+  id: string;
+  name: string;
+  visible: boolean;
+  locked: boolean;
+  opacity: number; // 0..1
+};
+

apps/visualizer/src/features/chart/ChartSideToolbar.tsx

@@ -4,8 +4,8 @@ import {
   IconBrush,
   IconCrosshair,
   IconCursor,
-  IconEye,
   IconFib,
+  IconLayers,
   IconLock,
   IconPlus,
   IconRuler,
@@ -24,7 +24,9 @@ type Props = {
   timeframe: string;
   activeTool: ActiveTool;
   hasFib: boolean;
+  isLayersOpen: boolean;
   onToolChange: (tool: ActiveTool) => void;
+  onToggleLayers: () => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
   onResetView: () => void;
@@ -35,7 +37,9 @@ export default function ChartSideToolbar({
   timeframe,
   activeTool,
   hasFib,
+  isLayersOpen,
   onToolChange,
+  onToggleLayers,
   onZoomIn,
   onZoomOut,
   onResetView,
@@ -195,9 +199,15 @@ export default function ChartSideToolbar({
           </span>
         </button>
 
-        <button type="button" className="chartToolBtn" title="Visibility" aria-label="Visibility" disabled>
+        <button
+          type="button"
+          className={['chartToolBtn', isLayersOpen ? 'chartToolBtn--active' : ''].filter(Boolean).join(' ')}
+          title="Layers"
+          aria-label="Layers"
+          onClick={onToggleLayers}
+        >
           <span className="chartToolBtn__icon" aria-hidden="true">
-            <IconEye />
+            <IconLayers />
           </span>
         </button>
       </div>

apps/visualizer/src/features/chart/ChartToolbar.tsx

@@ -5,6 +5,8 @@ type Props = {
   onTimeframeChange: (tf: string) => void;
   showIndicators: boolean;
   onToggleIndicators: () => void;
+  priceAutoScale: boolean;
+  onTogglePriceAutoScale: () => void;
   seriesLabel: string;
   isFullscreen: boolean;
   onToggleFullscreen: () => void;
@@ -17,6 +19,8 @@ export default function ChartToolbar({
   onTimeframeChange,
   showIndicators,
   onToggleIndicators,
+  priceAutoScale,
+  onTogglePriceAutoScale,
   seriesLabel,
   isFullscreen,
   onToggleFullscreen,
@@ -41,6 +45,9 @@ export default function ChartToolbar({
         <Button size="sm" variant={showIndicators ? 'primary' : 'ghost'} onClick={onToggleIndicators} type="button">
           Indicators
         </Button>
+        <Button size="sm" variant={priceAutoScale ? 'primary' : 'ghost'} onClick={onTogglePriceAutoScale} type="button">
+          Auto Scale
+        </Button>
         <Button size="sm" variant={isFullscreen ? 'primary' : 'ghost'} onClick={onToggleFullscreen} type="button">
           {isFullscreen ? 'Exit' : 'Fullscreen'}
         </Button>

apps/visualizer/src/features/chart/FibRetracementPrimitive.ts

@@ -54,6 +54,8 @@ type State = {
   fib: FibRetracement | null;
   series: ISeriesApi<'Candlestick', Time> | null;
   chart: SeriesAttachedParameter<Time>['chart'] | null;
+  selected: boolean;
+  opacity: number;
 };
 
 class FibPaneRenderer implements IPrimitivePaneRenderer {
@@ -64,8 +66,10 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
   }
 
   draw(target: any) {
-    const { fib, series, chart } = this._getState();
+    const { fib, series, chart, selected, opacity } = this._getState();
     if (!fib || !series || !chart) return;
+    const clampedOpacity = Math.max(0, Math.min(1, opacity));
+    if (clampedOpacity <= 0) return;
 
     const x1 = chart.timeScale().logicalToCoordinate(fib.a.logical as any);
     const x2 = chart.timeScale().logicalToCoordinate(fib.b.logical as any);
@@ -78,6 +82,9 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
     const delta = p1 - p0;
 
     target.useBitmapCoordinateSpace(({ context, bitmapSize, horizontalPixelRatio, verticalPixelRatio }: any) => {
+      context.save();
+      context.globalAlpha *= clampedOpacity;
+      try {
       const xStart = Math.max(0, Math.round(xLeftMedia * horizontalPixelRatio));
       let xEnd = Math.min(bitmapSize.width, Math.round(xRightMedia * horizontalPixelRatio));
       if (xEnd <= xStart) xEnd = Math.min(bitmapSize.width, xStart + Math.max(1, Math.round(1 * horizontalPixelRatio)));
@@ -132,7 +139,7 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
         const bx = Math.round(x2 * horizontalPixelRatio);
         const by = Math.round(y1 * verticalPixelRatio);
 
-        context.strokeStyle = 'rgba(226,232,240,0.55)';
+        context.strokeStyle = selected ? 'rgba(250,204,21,0.65)' : 'rgba(226,232,240,0.55)';
         context.lineWidth = Math.max(1, Math.round(1 * horizontalPixelRatio));
         context.setLineDash([Math.max(2, Math.round(5 * horizontalPixelRatio)), Math.max(2, Math.round(5 * horizontalPixelRatio))]);
         context.beginPath();
@@ -141,14 +148,23 @@ class FibPaneRenderer implements IPrimitivePaneRenderer {
         context.stroke();
         context.setLineDash([]);
 
-        const r = Math.max(2, Math.round(3 * horizontalPixelRatio));
-        context.fillStyle = 'rgba(147,197,253,0.95)';
+        const r = Math.max(2, Math.round((selected ? 4 : 3) * horizontalPixelRatio));
+        context.fillStyle = selected ? 'rgba(250,204,21,0.95)' : 'rgba(147,197,253,0.95)';
+        if (selected) {
+          context.strokeStyle = 'rgba(15,23,42,0.85)';
+          context.lineWidth = Math.max(1, Math.round(1 * horizontalPixelRatio));
+        }
         context.beginPath();
         context.arc(ax, ay, r, 0, Math.PI * 2);
         context.fill();
+        if (selected) context.stroke();
         context.beginPath();
         context.arc(bx, by, r, 0, Math.PI * 2);
         context.fill();
+        if (selected) context.stroke();
+      }
+      } finally {
+        context.restore();
       }
     });
   }
@@ -170,11 +186,19 @@ export class FibRetracementPrimitive implements ISeriesPrimitive<Time> {
   private _param: SeriesAttachedParameter<Time> | null = null;
   private _series: ISeriesApi<'Candlestick', Time> | null = null;
   private _fib: FibRetracement | null = null;
+  private _selected = false;
+  private _opacity = 1;
   private readonly _paneView: FibPaneView;
   private readonly _paneViews: readonly IPrimitivePaneView[];
 
   constructor() {
-    this._paneView = new FibPaneView(() => ({ fib: this._fib, series: this._series, chart: this._param?.chart ?? null }));
+    this._paneView = new FibPaneView(() => ({
+      fib: this._fib,
+      series: this._series,
+      chart: this._param?.chart ?? null,
+      selected: this._selected,
+      opacity: this._opacity,
+    }));
     this._paneViews = [this._paneView];
   }
 
@@ -196,4 +220,14 @@ export class FibRetracementPrimitive implements ISeriesPrimitive<Time> {
     this._fib = next;
     this._param?.requestUpdate();
   }
+
+  setSelected(next: boolean) {
+    this._selected = next;
+    this._param?.requestUpdate();
+  }
+
+  setOpacity(next: number) {
+    this._opacity = Number.isFinite(next) ? next : 1;
+    this._param?.requestUpdate();
+  }
 }

apps/visualizer/src/features/chart/TradingChart.tsx

@@ -26,9 +26,21 @@ type Props = {
   bb20?: { upper: SeriesPoint[]; lower: SeriesPoint[]; mid: SeriesPoint[] };
   showIndicators: boolean;
   fib?: FibRetracement | null;
+  fibOpacity?: number;
+  fibSelected?: boolean;
+  priceAutoScale?: boolean;
   onReady?: (api: { chart: IChartApi; candles: ISeriesApi<'Candlestick', UTCTimestamp> }) => void;
-  onChartClick?: (p: FibAnchor) => void;
+  onChartClick?: (p: FibAnchor & { target: 'chart' | 'fib' }) => void;
   onChartCrosshairMove?: (p: FibAnchor) => void;
+  onPointerEvent?: (p: {
+    type: 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+    logical: number;
+    price: number;
+    x: number;
+    y: number;
+    target: 'chart' | 'fib';
+    event: PointerEvent;
+  }) => { consume?: boolean; capturePointer?: boolean } | void;
 };
 
 type LinePoint = LineData | WhitespaceData;
@@ -37,6 +49,27 @@ function toTime(t: number): UTCTimestamp {
   return t as UTCTimestamp;
 }
 
+function samplePriceFromCandles(candles: Candle[]): number | null {
+  for (let i = candles.length - 1; i >= 0; i -= 1) {
+    const close = candles[i]?.close;
+    if (typeof close !== 'number') continue;
+    if (!Number.isFinite(close)) continue;
+    if (close === 0) continue;
+    return close;
+  }
+  return null;
+}
+
+function priceFormatForSample(price: number) {
+  const abs = Math.abs(price);
+  if (!Number.isFinite(abs) || abs === 0) return { type: 'price' as const, precision: 2, minMove: 0.01 };
+  if (abs >= 1000) return { type: 'price' as const, precision: 0, minMove: 1 };
+  if (abs >= 1) return { type: 'price' as const, precision: 2, minMove: 0.01 };
+  const exponent = Math.floor(Math.log10(abs)); // negative for abs < 1
+  const precision = Math.min(8, Math.max(4, -exponent + 3));
+  return { type: 'price' as const, precision, minMove: Math.pow(10, -precision) };
+}
+
 function toCandleData(candles: Candle[]): CandlestickData[] {
   return candles.map((c) => ({
     time: toTime(c.time),
@@ -71,16 +104,26 @@ export default function TradingChart({
   bb20,
   showIndicators,
   fib,
+  fibOpacity = 1,
+  fibSelected = false,
+  priceAutoScale = true,
   onReady,
   onChartClick,
   onChartCrosshairMove,
+  onPointerEvent,
 }: Props) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<IChartApi | null>(null);
   const fibPrimitiveRef = useRef<FibRetracementPrimitive | null>(null);
+  const fibRef = useRef<FibRetracement | null>(fib ?? null);
+  const fibOpacityRef = useRef<number>(fibOpacity);
+  const priceAutoScaleRef = useRef<boolean>(priceAutoScale);
+  const prevPriceAutoScaleRef = useRef<boolean>(priceAutoScale);
   const onReadyRef = useRef<Props['onReady']>(onReady);
   const onChartClickRef = useRef<Props['onChartClick']>(onChartClick);
   const onChartCrosshairMoveRef = useRef<Props['onChartCrosshairMove']>(onChartCrosshairMove);
+  const onPointerEventRef = useRef<Props['onPointerEvent']>(onPointerEvent);
+  const capturedOverlayPointerRef = useRef<number | null>(null);
   const seriesRef = useRef<{
     candles?: ISeriesApi<'Candlestick'>;
     volume?: ISeriesApi<'Histogram'>;
@@ -100,6 +143,10 @@ export default function TradingChart({
   const bbUpper = useMemo(() => toLineSeries(bb20?.upper), [bb20?.upper]);
   const bbLower = useMemo(() => toLineSeries(bb20?.lower), [bb20?.lower]);
   const bbMid = useMemo(() => toLineSeries(bb20?.mid), [bb20?.mid]);
+  const priceFormat = useMemo(() => {
+    const sample = samplePriceFromCandles(candles);
+    return sample == null ? { type: 'price' as const, precision: 2, minMove: 0.01 } : priceFormatForSample(sample);
+  }, [candles]);
 
   useEffect(() => {
     onReadyRef.current = onReady;
@@ -113,6 +160,23 @@ export default function TradingChart({
     onChartCrosshairMoveRef.current = onChartCrosshairMove;
   }, [onChartCrosshairMove]);
 
+  useEffect(() => {
+    onPointerEventRef.current = onPointerEvent;
+  }, [onPointerEvent]);
+
+  useEffect(() => {
+    fibRef.current = fib ?? null;
+  }, [fib]);
+
+  useEffect(() => {
+    fibOpacityRef.current = fibOpacity;
+    fibPrimitiveRef.current?.setOpacity(fibOpacity);
+  }, [fibOpacity]);
+
+  useEffect(() => {
+    priceAutoScaleRef.current = priceAutoScale;
+  }, [priceAutoScale]);
+
   useEffect(() => {
     if (!containerRef.current) return;
     if (chartRef.current) return;
@@ -146,12 +210,14 @@ export default function TradingChart({
       borderVisible: false,
       wickUpColor: '#22c55e',
       wickDownColor: '#ef4444',
+      priceFormat,
     });
 
     const fibPrimitive = new FibRetracementPrimitive();
     candleSeries.attachPrimitive(fibPrimitive);
     fibPrimitiveRef.current = fibPrimitive;
     fibPrimitive.setFib(fib ?? null);
+    fibPrimitive.setOpacity(fibOpacityRef.current);
 
     const volumeSeries = chart.addSeries(HistogramSeries, {
       priceFormat: { type: 'volume' },
@@ -166,16 +232,18 @@ export default function TradingChart({
       color: 'rgba(251,146,60,0.9)',
       lineWidth: 1,
       lineStyle: LineStyle.Dotted,
+      priceFormat,
     });
 
-    const smaSeries = chart.addSeries(LineSeries, { color: 'rgba(248,113,113,0.9)', lineWidth: 1 });
-    const emaSeries = chart.addSeries(LineSeries, { color: 'rgba(52,211,153,0.9)', lineWidth: 1 });
-    const bbUpperSeries = chart.addSeries(LineSeries, { color: 'rgba(250,204,21,0.6)', lineWidth: 1 });
-    const bbLowerSeries = chart.addSeries(LineSeries, { color: 'rgba(163,163,163,0.6)', lineWidth: 1 });
+    const smaSeries = chart.addSeries(LineSeries, { color: 'rgba(248,113,113,0.9)', lineWidth: 1, priceFormat });
+    const emaSeries = chart.addSeries(LineSeries, { color: 'rgba(52,211,153,0.9)', lineWidth: 1, priceFormat });
+    const bbUpperSeries = chart.addSeries(LineSeries, { color: 'rgba(250,204,21,0.6)', lineWidth: 1, priceFormat });
+    const bbLowerSeries = chart.addSeries(LineSeries, { color: 'rgba(163,163,163,0.6)', lineWidth: 1, priceFormat });
     const bbMidSeries = chart.addSeries(LineSeries, {
       color: 'rgba(250,204,21,0.35)',
       lineWidth: 1,
       lineStyle: LineStyle.Dashed,
+      priceFormat,
     });
 
     seriesRef.current = {
@@ -197,7 +265,35 @@ export default function TradingChart({
       if (logical == null) return;
       const price = candleSeries.coordinateToPrice(param.point.y);
       if (price == null) return;
-      onChartClickRef.current?.({ logical: Number(logical), price: Number(price) });
+
+      const currentFib = fibRef.current;
+      let target: 'chart' | 'fib' = 'chart';
+      if (currentFib) {
+        const x1 = chart.timeScale().logicalToCoordinate(currentFib.a.logical as any);
+        const x2 = chart.timeScale().logicalToCoordinate(currentFib.b.logical as any);
+        if (x1 != null && x2 != null) {
+          const tol = 6;
+          const left = Math.min(x1, x2) - tol;
+          const right = Math.max(x1, x2) + tol;
+          const p0 = currentFib.a.price;
+          const delta = currentFib.b.price - p0;
+          const yRatioMin = 0;
+          const yRatioMax = 4.236;
+          const pMin = Math.min(p0 + delta * yRatioMin, p0 + delta * yRatioMax);
+          const pMax = Math.max(p0 + delta * yRatioMin, p0 + delta * yRatioMax);
+          const y1 = candleSeries.priceToCoordinate(pMin);
+          const y2 = candleSeries.priceToCoordinate(pMax);
+          if (y1 != null && y2 != null) {
+            const top = Math.min(y1, y2) - tol;
+            const bottom = Math.max(y1, y2) + tol;
+            if (param.point.x >= left && param.point.x <= right && param.point.y >= top && param.point.y <= bottom) {
+              target = 'fib';
+            }
+          }
+        }
+      }
+
+      onChartClickRef.current?.({ logical: Number(logical), price: Number(price), target });
     };
     chart.subscribeClick(onClick);
 
@@ -211,6 +307,218 @@ export default function TradingChart({
     };
     chart.subscribeCrosshairMove(onCrosshairMove);
 
+    const container = containerRef.current;
+    const toAnchorFromPoint = (x: number, y: number): FibAnchor | null => {
+      const logical = chart.timeScale().coordinateToLogical(x);
+      if (logical == null) return null;
+      const price = candleSeries.coordinateToPrice(y);
+      if (price == null) return null;
+      return { logical: Number(logical), price: Number(price) };
+    };
+
+    const isOverFib = (x: number, y: number, currentFib: FibRetracement): boolean => {
+      const x1 = chart.timeScale().logicalToCoordinate(currentFib.a.logical as any);
+      const x2 = chart.timeScale().logicalToCoordinate(currentFib.b.logical as any);
+      if (x1 == null || x2 == null) return false;
+
+      const tol = 6;
+      const left = Math.min(x1, x2) - tol;
+      const right = Math.max(x1, x2) + tol;
+
+      const p0 = currentFib.a.price;
+      const delta = currentFib.b.price - p0;
+      const yRatioMin = 0;
+      const yRatioMax = 4.236;
+      const pMin = Math.min(p0 + delta * yRatioMin, p0 + delta * yRatioMax);
+      const pMax = Math.max(p0 + delta * yRatioMin, p0 + delta * yRatioMax);
+      const y1 = candleSeries.priceToCoordinate(pMin);
+      const y2 = candleSeries.priceToCoordinate(pMax);
+      if (y1 == null || y2 == null) return false;
+
+      const top = Math.min(y1, y2) - tol;
+      const bottom = Math.max(y1, y2) + tol;
+      return x >= left && x <= right && y >= top && y <= bottom;
+    };
+
+    const onOverlayPointer = (e: PointerEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const anchor = toAnchorFromPoint(x, y);
+      if (!anchor) return;
+
+      const currentFib = fibRef.current;
+      const target: 'chart' | 'fib' = currentFib && isOverFib(x, y, currentFib) ? 'fib' : 'chart';
+      const type =
+        e.type === 'pointerdown'
+          ? ('pointerdown' as const)
+          : e.type === 'pointermove'
+            ? ('pointermove' as const)
+            : e.type === 'pointerup'
+              ? ('pointerup' as const)
+              : ('pointercancel' as const);
+
+      const decision = onPointerEventRef.current?.({
+        type,
+        logical: anchor.logical,
+        price: anchor.price,
+        x,
+        y,
+        target,
+        event: e,
+      });
+
+      if (decision?.capturePointer) {
+        capturedOverlayPointerRef.current = e.pointerId;
+        try {
+          containerRef.current.setPointerCapture(e.pointerId);
+        } catch {
+          // ignore
+        }
+      }
+
+      if (decision?.consume) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+
+      if (type === 'pointerup' || type === 'pointercancel') {
+        if (capturedOverlayPointerRef.current === e.pointerId) {
+          capturedOverlayPointerRef.current = null;
+          try {
+            containerRef.current.releasePointerCapture(e.pointerId);
+          } catch {
+            // ignore
+          }
+        }
+      }
+    };
+    container?.addEventListener('pointerdown', onOverlayPointer, { capture: true });
+    container?.addEventListener('pointermove', onOverlayPointer, { capture: true });
+    container?.addEventListener('pointerup', onOverlayPointer, { capture: true });
+    container?.addEventListener('pointercancel', onOverlayPointer, { capture: true });
+
+    const onWheel = (e: WheelEvent) => {
+      if (!e.ctrlKey) return;
+      if (!containerRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (priceAutoScaleRef.current) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const pivotPrice = candleSeries.coordinateToPrice(y);
+      if (pivotPrice == null) return;
+
+      const ps = candleSeries.priceScale();
+      const range = ps.getVisibleRange();
+      let low: number;
+      let high: number;
+      if (range) {
+        low = Math.min(range.from, range.to);
+        high = Math.max(range.from, range.to);
+      } else {
+        const top = candleSeries.coordinateToPrice(0);
+        const bottom = candleSeries.coordinateToPrice(rect.height);
+        if (top == null || bottom == null) return;
+        low = Math.min(top, bottom);
+        high = Math.max(top, bottom);
+      }
+      const span = high - low;
+      if (!(span > 0)) return;
+
+      const zoomFactor = Math.exp(e.deltaY * 0.002);
+      if (!Number.isFinite(zoomFactor) || zoomFactor <= 0) return;
+      const t = Math.min(1, Math.max(0, (pivotPrice - low) / span));
+      const minSpan = span * 1e-6;
+      const maxSpan = span * 1e6;
+      const nextSpan = Math.min(maxSpan, Math.max(minSpan, span * zoomFactor));
+      const nextLow = pivotPrice - t * nextSpan;
+      const nextHigh = nextLow + nextSpan;
+
+      ps.setAutoScale(false);
+      ps.setVisibleRange({ from: nextLow, to: nextHigh });
+    };
+    container?.addEventListener('wheel', onWheel, { passive: false, capture: true });
+
+    let pan: { pointerId: number; startPrice: number; startRange: { from: number; to: number } } | null = null;
+    const onPointerDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      if (!e.ctrlKey) return;
+      if (priceAutoScaleRef.current) return;
+      if (!containerRef.current) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const startPrice = candleSeries.coordinateToPrice(y);
+      if (startPrice == null) return;
+
+      const ps = candleSeries.priceScale();
+      const range = ps.getVisibleRange();
+      let from: number;
+      let to: number;
+      if (range) {
+        from = range.from;
+        to = range.to;
+      } else {
+        const top = candleSeries.coordinateToPrice(0);
+        const bottom = candleSeries.coordinateToPrice(rect.height);
+        if (top == null || bottom == null) return;
+        from = Math.min(top, bottom);
+        to = Math.max(top, bottom);
+      }
+      if (!(to > from)) return;
+
+      pan = { pointerId: e.pointerId, startPrice, startRange: { from, to } };
+      try {
+        containerRef.current.setPointerCapture(e.pointerId);
+      } catch {
+        // ignore
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const onPointerMove = (e: PointerEvent) => {
+      if (!pan) return;
+      if (pan.pointerId !== e.pointerId) return;
+      if (!containerRef.current) return;
+      if (!e.ctrlKey || priceAutoScaleRef.current) {
+        pan = null;
+        return;
+      }
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const currentPrice = candleSeries.coordinateToPrice(y);
+      if (currentPrice == null) return;
+      const delta = pan.startPrice - currentPrice;
+
+      const ps = candleSeries.priceScale();
+      ps.setAutoScale(false);
+      ps.setVisibleRange({ from: pan.startRange.from + delta, to: pan.startRange.to + delta });
+
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const stopPan = (e: PointerEvent) => {
+      if (!pan) return;
+      if (pan.pointerId !== e.pointerId) return;
+      pan = null;
+      try {
+        containerRef.current?.releasePointerCapture(e.pointerId);
+      } catch {
+        // ignore
+      }
+    };
+
+    container?.addEventListener('pointerdown', onPointerDown, { capture: true });
+    container?.addEventListener('pointermove', onPointerMove, { capture: true });
+    container?.addEventListener('pointerup', stopPan, { capture: true });
+    container?.addEventListener('pointercancel', stopPan, { capture: true });
+
     const ro = new ResizeObserver(() => {
       if (!containerRef.current) return;
       const { width, height } = containerRef.current.getBoundingClientRect();
@@ -221,6 +529,15 @@ export default function TradingChart({
     return () => {
       chart.unsubscribeClick(onClick);
       chart.unsubscribeCrosshairMove(onCrosshairMove);
+      container?.removeEventListener('pointerdown', onOverlayPointer, { capture: true });
+      container?.removeEventListener('pointermove', onOverlayPointer, { capture: true });
+      container?.removeEventListener('pointerup', onOverlayPointer, { capture: true });
+      container?.removeEventListener('pointercancel', onOverlayPointer, { capture: true });
+      container?.removeEventListener('wheel', onWheel, { capture: true });
+      container?.removeEventListener('pointerdown', onPointerDown, { capture: true });
+      container?.removeEventListener('pointermove', onPointerMove, { capture: true });
+      container?.removeEventListener('pointerup', stopPan, { capture: true });
+      container?.removeEventListener('pointercancel', stopPan, { capture: true });
       ro.disconnect();
       if (fibPrimitiveRef.current) {
         candleSeries.detachPrimitive(fibPrimitiveRef.current);
@@ -251,9 +568,51 @@ export default function TradingChart({
     s.bbMid?.applyOptions({ visible: showIndicators });
   }, [candleData, volumeData, oracleData, smaData, emaData, bbUpper, bbLower, bbMid, showIndicators]);
 
+  useEffect(() => {
+    const s = seriesRef.current;
+    if (!s.candles) return;
+    s.candles.applyOptions({ priceFormat });
+    s.oracle?.applyOptions({ priceFormat });
+    s.sma20?.applyOptions({ priceFormat });
+    s.ema20?.applyOptions({ priceFormat });
+    s.bbUpper?.applyOptions({ priceFormat });
+    s.bbLower?.applyOptions({ priceFormat });
+    s.bbMid?.applyOptions({ priceFormat });
+  }, [priceFormat]);
+
   useEffect(() => {
     fibPrimitiveRef.current?.setFib(fib ?? null);
   }, [fib]);
 
+  useEffect(() => {
+    fibPrimitiveRef.current?.setSelected(Boolean(fibSelected));
+  }, [fibSelected]);
+
+  useEffect(() => {
+    const candlesSeries = seriesRef.current.candles;
+    if (!candlesSeries) return;
+    const ps = candlesSeries.priceScale();
+    const prev = prevPriceAutoScaleRef.current;
+    prevPriceAutoScaleRef.current = priceAutoScale;
+
+    if (priceAutoScale) {
+      ps.setAutoScale(true);
+      return;
+    }
+
+    ps.setAutoScale(false);
+    if (!prev) return;
+    if (!containerRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const top = candlesSeries.coordinateToPrice(0);
+    const bottom = candlesSeries.coordinateToPrice(rect.height);
+    if (top == null || bottom == null) return;
+    const from = Math.min(top, bottom);
+    const to = Math.max(top, bottom);
+    if (!(to > from)) return;
+    ps.setVisibleRange({ from, to });
+  }, [priceAutoScale]);
+
   return <div className="tradingChart" ref={containerRef} />;
 }

apps/visualizer/src/layout/TopNav.tsx

@@ -16,16 +16,15 @@ type Props = {
   active?: NavId;
   onSelect?: (id: NavId) => void;
   rightSlot?: ReactNode;
-  rightEndSlot?: ReactNode;
 };
 
-export default function TopNav({ active = 'trade', onSelect, rightSlot, rightEndSlot }: Props) {
+export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props) {
   return (
     <header className="topNav">
       <div className="topNav__left">
-        <div className="topNav__brand" aria-label="Drift">
+        <div className="topNav__brand" aria-label="Trade">
           <div className="topNav__brandMark" aria-hidden="true" />
-          <div className="topNav__brandName">Drift</div>
+          <div className="topNav__brandName">Trade</div>
         </div>
         <nav className="topNav__menu" aria-label="Primary">
           {navItems.map((it) => (
@@ -56,7 +55,6 @@ export default function TopNav({ active = 'trade', onSelect, rightSlot, rightEnd
             </div>
           </>
         )}
-        {rightEndSlot}
       </div>
     </header>
   );

apps/visualizer/src/styles.css

@@ -689,6 +689,216 @@ a:hover {
   white-space: nowrap;
 }
 
+.chartLayersBackdrop {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  z-index: 60;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 140ms ease;
+}
+
+.chartLayersBackdrop--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.chartLayersPanel {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 8px;
+  width: 420px;
+  max-width: calc(100% - 16px);
+  background: rgba(17, 19, 28, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 14px;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(14px);
+  overflow: hidden;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  transform: translateX(-10px);
+  pointer-events: none;
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.chartLayersPanel--open {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
+}
+
+.chartLayersPanel__head {
+  padding: 10px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.chartLayersPanel__title {
+  font-weight: 900;
+  letter-spacing: 0.02em;
+}
+
+.chartLayersPanel__close {
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  background: transparent;
+  color: rgba(230, 233, 239, 0.85);
+  cursor: pointer;
+}
+
+.chartLayersPanel__close:hover {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(230, 233, 239, 0.92);
+}
+
+.chartLayersTable {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.chartLayersRow {
+  display: grid;
+  grid-template-columns: 34px 34px minmax(0, 1fr) 150px 40px;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 10px;
+}
+
+.chartLayersRow--head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: rgba(17, 19, 28, 0.92);
+  color: rgba(230, 233, 239, 0.60);
+  font-size: 11px;
+  font-weight: 850;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.chartLayersRow--layer {
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.chartLayersRow--object {
+  cursor: pointer;
+  padding-left: 18px;
+}
+
+.chartLayersRow--object:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.chartLayersRow--selected {
+  background: rgba(168, 85, 247, 0.12);
+}
+
+.chartLayersCell {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.chartLayersCell--icon {
+  justify-content: center;
+}
+
+.chartLayersCell--name {
+  min-width: 0;
+}
+
+.chartLayersCell--opacity {
+  min-width: 0;
+}
+
+.chartLayersCell--actions {
+  justify-content: flex-end;
+}
+
+.layersBtn {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  background: rgba(0, 0, 0, 0.10);
+  color: rgba(230, 233, 239, 0.88);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.layersBtn:hover {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.layersBtn--active {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.22);
+  color: var(--text);
+}
+
+.layersBtn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.layersName {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.layersName--layer {
+  font-weight: 900;
+}
+
+.layersName--object {
+  font-weight: 800;
+  color: rgba(230, 233, 239, 0.92);
+}
+
+.layersName__meta {
+  opacity: 0.65;
+  font-weight: 800;
+  margin-left: 6px;
+}
+
+.layersOpacity {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 44px;
+  gap: 8px;
+  align-items: center;
+}
+
+.layersOpacity__range {
+  width: 100%;
+}
+
+.layersOpacity__pct {
+  font-size: 12px;
+  color: rgba(230, 233, 239, 0.70);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
 .chartCard__chart {
   min-height: 0;
   height: 100%;