Centered board layout, replay overlay, mobile responsive CSS

src/app_clean.py

@@ -0,0 +1,722 @@
+"""
+CASCADE-LATTICE Chess Demo
+Clean rebuild with Dash + Three.js
+- Human plays White (select from HOLD candidates, then COMMIT)
+- Engine plays Black (auto-responds after COMMIT)
+- Full informational wealth display (features, reasoning, imagination)
+"""
+
+import os
+import sys
+import platform
+import asyncio
+import shutil
+import threading
+import time
+from pathlib import Path
+from dataclasses import dataclass
+from typing import List, Dict, Any, Optional
+
+import chess
+import chess.engine
+import numpy as np
+import dash
+from dash import dcc, html, callback, Input, Output, State, ctx
+import json
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# ENGINE SETUP
+# ═══════════════════════════════════════════════════════════════════════════════
+
+PROJECT_ROOT = Path(__file__).parent.parent
+LOCAL_STOCKFISH_SSE41 = PROJECT_ROOT / "stockfish" / "stockfish" / "stockfish-windows-x86-64-sse41-popcnt.exe"
+LOCAL_STOCKFISH_AVX2 = PROJECT_ROOT / "stockfish" / "stockfish-windows-x86-64-avx2.exe"
+
+if LOCAL_STOCKFISH_SSE41.exists():
+    STOCKFISH_PATH = str(LOCAL_STOCKFISH_SSE41)
+elif LOCAL_STOCKFISH_AVX2.exists():
+    STOCKFISH_PATH = str(LOCAL_STOCKFISH_AVX2)
+elif shutil.which("stockfish"):
+    STOCKFISH_PATH = shutil.which("stockfish")
+else:
+    STOCKFISH_PATH = "/usr/games/stockfish"
+
+print(f"[STOCKFISH] {STOCKFISH_PATH}")
+
+if platform.system() == 'Windows':
+    asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy())
+
+# Thread-safe engine
+ENGINE_LOCK = threading.Lock()
+ENGINE = None
+
+def get_engine():
+    global ENGINE
+    with ENGINE_LOCK:
+        if ENGINE is None:
+            try:
+                ENGINE = chess.engine.SimpleEngine.popen_uci(STOCKFISH_PATH)
+                print("[ENGINE] Started")
+            except Exception as e:
+                print(f"[ENGINE] Failed: {e}")
+        return ENGINE
+
+def engine_analyse(board, limit, multipv=1):
+    """Thread-safe engine analysis."""
+    global ENGINE
+    with ENGINE_LOCK:
+        if ENGINE is None:
+            get_engine()
+        if ENGINE:
+            try:
+                return ENGINE.analyse(board, limit, multipv=multipv)
+            except chess.engine.EngineTerminatedError:
+                print("[ENGINE] Crashed, restarting...")
+                ENGINE = None
+                get_engine()
+                if ENGINE:
+                    return ENGINE.analyse(board, limit, multipv=multipv)
+    return []
+
+def engine_play(board, limit):
+    """Thread-safe engine play."""
+    global ENGINE
+    with ENGINE_LOCK:
+        if ENGINE is None:
+            get_engine()
+        if ENGINE:
+            try:
+                return ENGINE.play(board, limit)
+            except chess.engine.EngineTerminatedError:
+                print("[ENGINE] Crashed, restarting...")
+                ENGINE = None
+                get_engine()
+                if ENGINE:
+                    return ENGINE.play(board, limit)
+    return None
+
+# Initial engine load
+get_engine()
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# CASCADE-LATTICE
+# ═══════════════════════════════════════════════════════════════════════════════
+
+CASCADE_AVAILABLE = False
+HOLD = None
+
+try:
+    from cascade import Hold
+    HOLD = Hold()
+    CASCADE_AVAILABLE = True
+    print("[CASCADE] Hold ready")
+except ImportError:
+    print("[CASCADE] Hold not available")
+
+try:
+    from cascade import CausationGraph
+    CAUSATION = CausationGraph()
+    print("[CASCADE] CausationGraph ready")
+except:
+    CAUSATION = None
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# DATA STRUCTURES
+# ═══════════════════════════════════════════════════════════════════════════════
+
+@dataclass
+class MoveCandidate:
+    move: str
+    prob: float
+    value: float
+    from_sq: int
+    to_sq: int
+    is_capture: bool
+    is_check: bool
+    move_type: str  # 'quiet', 'capture', 'check', 'castle'
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# FEATURE EXTRACTION
+# ═══════════════════════════════════════════════════════════════════════════════
+
+PIECE_VALUES = {chess.PAWN: 1, chess.KNIGHT: 3, chess.BISHOP: 3, 
+                chess.ROOK: 5, chess.QUEEN: 9, chess.KING: 0}
+
+def extract_features(board: chess.Board) -> Dict[str, Any]:
+    """Extract position features for cascade display."""
+    # Material
+    white_mat = sum(len(board.pieces(pt, chess.WHITE)) * PIECE_VALUES[pt] 
+                    for pt in PIECE_VALUES)
+    black_mat = sum(len(board.pieces(pt, chess.BLACK)) * PIECE_VALUES[pt] 
+                    for pt in PIECE_VALUES)
+    material = white_mat - black_mat
+    
+    # Center control
+    center = [chess.D4, chess.D5, chess.E4, chess.E5]
+    white_center = sum(1 for sq in center if board.is_attacked_by(chess.WHITE, sq))
+    black_center = sum(1 for sq in center if board.is_attacked_by(chess.BLACK, sq))
+    
+    # King safety
+    wk = board.king(chess.WHITE)
+    bk = board.king(chess.BLACK)
+    white_king_attackers = len(board.attackers(chess.BLACK, wk)) if wk else 0
+    black_king_attackers = len(board.attackers(chess.WHITE, bk)) if bk else 0
+    
+    # Mobility
+    turn = board.turn
+    board.turn = chess.WHITE
+    white_mobility = len(list(board.legal_moves))
+    board.turn = chess.BLACK
+    black_mobility = len(list(board.legal_moves))
+    board.turn = turn
+    
+    # Game phase
+    total_pieces = len(board.piece_map())
+    if total_pieces > 28:
+        phase = 'opening'
+    elif total_pieces > 14:
+        phase = 'middlegame'
+    else:
+        phase = 'endgame'
+    
+    return {
+        'material': material,
+        'center_control': (white_center - black_center) / 4.0,
+        'white_king_danger': white_king_attackers,
+        'black_king_danger': black_king_attackers,
+        'white_mobility': white_mobility,
+        'black_mobility': black_mobility,
+        'phase': phase
+    }
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# CANDIDATE GENERATION WITH CASCADE INTEGRATION
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def get_candidates_with_hold(board: chess.Board, num=5) -> tuple:
+    """
+    Get move candidates from engine + build cascade Hold data.
+    Returns: (candidates, hold_data)
+    """
+    candidates = []
+    hold_data = {}
+    
+    info = engine_analyse(board, chess.engine.Limit(depth=12), multipv=num)
+    if not info:
+        return [], {}
+    
+    features = extract_features(board)
+    action_labels = []
+    raw_values = []
+    
+    for pv in info:
+        move = pv['pv'][0]
+        score = pv.get('score', chess.engine.Cp(0))
+        
+        if score.is_mate():
+            value = 1.0 if score.mate() > 0 else -1.0
+        else:
+            cp = score.relative.score(mate_score=10000)
+            value = max(-1, min(1, cp / 1000))
+        
+        raw_values.append(value)
+        action_labels.append(move.uci())
+        
+        move_type = 'quiet'
+        if board.is_capture(move):
+            move_type = 'capture'
+        elif board.gives_check(move):
+            move_type = 'check'
+        elif board.is_castling(move):
+            move_type = 'castle'
+        
+        candidates.append(MoveCandidate(
+            move=move.uci(),
+            prob=0,
+            value=value,
+            from_sq=move.from_square,
+            to_sq=move.to_square,
+            is_capture=board.is_capture(move),
+            is_check=board.gives_check(move),
+            move_type=move_type
+        ))
+    
+    # Softmax probabilities
+    values_arr = np.array(raw_values)
+    exp_vals = np.exp((values_arr - values_arr.max()) * 3)
+    probs = exp_vals / exp_vals.sum()
+    
+    for i, c in enumerate(candidates):
+        c.prob = float(probs[i])
+    
+    # Build imagination (predicted opponent responses)
+    imagination = {}
+    for i, c in enumerate(candidates[:3]):
+        test_board = board.copy()
+        test_board.push(chess.Move.from_uci(c.move))
+        if not test_board.is_game_over():
+            resp_info = engine_analyse(test_board, chess.engine.Limit(depth=8), multipv=1)
+            if resp_info:
+                resp_move = resp_info[0]['pv'][0].uci()
+                resp_score = resp_info[0].get('score', chess.engine.Cp(0))
+                if resp_score.is_mate():
+                    resp_val = -1.0 if resp_score.mate() > 0 else 1.0
+                else:
+                    cp = resp_score.relative.score(mate_score=10000)
+                    resp_val = -max(-1, min(1, cp / 1000))
+                imagination[i] = {
+                    'response': resp_move,
+                    'value': resp_val,
+                    'line': f"{c.move} → {resp_move}"
+                }
+    
+    # Build reasoning
+    reasoning = []
+    if candidates[0].is_capture:
+        reasoning.append("Top move captures material")
+    if candidates[0].is_check:
+        reasoning.append("Top move gives check")
+    if features['material'] > 2:
+        reasoning.append("White has material advantage (+{:.0f})".format(features['material']))
+    elif features['material'] < -2:
+        reasoning.append("Black has material advantage ({:.0f})".format(features['material']))
+    if features['center_control'] > 0.5:
+        reasoning.append("Strong center control")
+    if len(candidates) > 1 and abs(candidates[0].value - candidates[1].value) < 0.1:
+        reasoning.append("Multiple strong options")
+    if features['white_king_danger'] > 0:
+        reasoning.append("⚠ White king under attack")
+    if features['black_king_danger'] > 0:
+        reasoning.append("Black king vulnerable")
+    
+    hold_data = {
+        'action_probs': [c.prob for c in candidates],
+        'action_labels': action_labels,
+        'value': float(candidates[0].value) if candidates else 0,
+        'features': features,
+        'reasoning': reasoning,
+        'imagination': imagination,
+        'ai_choice': 0,
+        'ai_confidence': float(probs[0]) if len(probs) > 0 else 0
+    }
+    
+    return candidates, hold_data
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# DASH APP
+# ═══════════════════════════════════════════════════════════════════════════════
+
+app = dash.Dash(__name__, suppress_callback_exceptions=True)
+
+DARK_BG = '#0a0a0f'
+PANEL_BG = '#0d0d12'
+ACCENT = '#00FF88'
+ACCENT_DIM = '#00FF8844'
+
+app.layout = html.Div([
+    # Stores
+    dcc.Store(id='board-fen', data=chess.STARTING_FEN),
+    dcc.Store(id='candidates-store', data=[]),
+    dcc.Store(id='hold-data-store', data={}),
+    dcc.Store(id='selected-idx', data=0),
+    dcc.Store(id='is-held', data=False),
+    dcc.Store(id='move-history', data=[]),
+    dcc.Store(id='game-status', data='playing'),  # playing, white_wins, black_wins, draw
+    
+    # Header
+    html.Div([
+        html.H1("CASCADE-LATTICE Chess", style={
+            'color': ACCENT, 'fontFamily': 'monospace', 'margin': '0',
+            'fontSize': '24px', 'letterSpacing': '2px'
+        }),
+        html.Div("Human-AI Decision Support Demo", style={
+            'color': '#666', 'fontFamily': 'monospace', 'fontSize': '12px'
+        })
+    ], style={'textAlign': 'center', 'padding': '15px', 'borderBottom': f'1px solid {ACCENT_DIM}'}),
+    
+    # Main content
+    html.Div([
+        # LEFT: 3D Board + Controls
+        html.Div([
+            # Control buttons
+            html.Div([
+                html.Button("⏸ HOLD", id='btn-hold', style={
+                    'margin': '5px', 'padding': '10px 20px', 'fontSize': '14px',
+                    'fontFamily': 'monospace', 'fontWeight': 'bold',
+                    'backgroundColor': ACCENT_DIM, 'color': ACCENT,
+                    'border': f'2px solid {ACCENT}', 'borderRadius': '6px', 'cursor': 'pointer'
+                }),
+                html.Button("↻ RESET", id='btn-reset', style={
+                    'margin': '5px', 'padding': '10px 20px', 'fontSize': '14px',
+                    'fontFamily': 'monospace', 'fontWeight': 'bold',
+                    'backgroundColor': '#FF444422', 'color': '#FF4444',
+                    'border': '2px solid #FF4444', 'borderRadius': '6px', 'cursor': 'pointer'
+                })
+            ], style={'textAlign': 'center', 'padding': '10px'}),
+            
+            # 3D iframe
+            html.Iframe(
+                id='chess-3d-iframe',
+                src='/assets/chess3d.html',
+                style={'width': '100%', 'height': '500px', 'border': 'none', 'borderRadius': '8px'}
+            ),
+            html.Div(id='scene-state', style={'display': 'none'}),
+            
+            # Move selection (when HELD)
+            html.Div([
+                html.Div(id='move-buttons', style={'textAlign': 'center', 'padding': '10px'}),
+                html.Div([
+                    html.Button("✓ COMMIT", id='btn-commit', style={
+                        'display': 'none', 'margin': '10px auto', 'padding': '15px 40px',
+                        'fontSize': '16px', 'fontFamily': 'monospace', 'fontWeight': 'bold',
+                        'backgroundColor': ACCENT_DIM, 'color': ACCENT,
+                        'border': f'2px solid {ACCENT}', 'borderRadius': '8px', 'cursor': 'pointer'
+                    })
+                ], style={'textAlign': 'center'})
+            ]),
+            
+            # Status
+            html.Div(id='game-status-display', style={
+                'textAlign': 'center', 'padding': '10px', 'fontFamily': 'monospace',
+                'color': '#888', 'fontSize': '14px'
+            })
+        ], style={'flex': '1', 'minWidth': '450px', 'padding': '10px'}),
+        
+        # RIGHT: Cascade Info Panel
+        html.Div([
+            html.Div([
+                html.Span("◈ ", style={'color': ACCENT}),
+                html.Span("INFORMATIONAL WEALTH", style={'color': '#888'})
+            ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '15px',
+                      'borderBottom': f'1px solid {ACCENT_DIM}', 'paddingBottom': '10px'}),
+            
+            html.Div(id='wealth-panel', style={'fontFamily': 'monospace', 'fontSize': '12px'})
+        ], style={
+            'flex': '1', 'minWidth': '350px', 'padding': '15px',
+            'backgroundColor': PANEL_BG, 'borderRadius': '8px', 'margin': '10px',
+            'border': f'1px solid {ACCENT_DIM}'
+        })
+    ], style={'display': 'flex', 'flexWrap': 'wrap', 'justifyContent': 'center'}),
+    
+    # Move history
+    html.Div([
+        html.Div("MOVE HISTORY", style={'color': '#666', 'fontSize': '10px', 'marginBottom': '5px'}),
+        html.Div(id='history-display', style={'color': '#888', 'fontSize': '11px', 'maxHeight': '60px', 'overflow': 'auto'})
+    ], style={'fontFamily': 'monospace', 'textAlign': 'center', 'padding': '10px'})
+    
+], style={'backgroundColor': DARK_BG, 'minHeight': '100vh', 'color': '#fff'})
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# CALLBACKS
+# ═══════════════════════════════════════════════════════════════════════════════
+
+# HOLD button - get candidates
+@callback(
+    Output('candidates-store', 'data'),
+    Output('hold-data-store', 'data'),
+    Output('is-held', 'data'),
+    Output('selected-idx', 'data'),
+    Input('btn-hold', 'n_clicks'),
+    State('board-fen', 'data'),
+    State('is-held', 'data'),
+    State('game-status', 'data'),
+    prevent_initial_call=True
+)
+def on_hold_click(n, fen, is_held, status):
+    if status != 'playing':
+        raise dash.exceptions.PreventUpdate
+    
+    if is_held:
+        # Un-hold
+        return [], {}, False, 0
+    else:
+        # Hold - get candidates
+        board = chess.Board(fen)
+        if board.turn != chess.WHITE:
+            # Not white's turn
+            raise dash.exceptions.PreventUpdate
+        
+        candidates, hold_data = get_candidates_with_hold(board)
+        if not candidates:
+            raise dash.exceptions.PreventUpdate
+        
+        return [c.__dict__ for c in candidates], hold_data, True, 0
+
+# RESET button
+@callback(
+    Output('board-fen', 'data', allow_duplicate=True),
+    Output('candidates-store', 'data', allow_duplicate=True),
+    Output('hold-data-store', 'data', allow_duplicate=True),
+    Output('is-held', 'data', allow_duplicate=True),
+    Output('move-history', 'data', allow_duplicate=True),
+    Output('game-status', 'data', allow_duplicate=True),
+    Input('btn-reset', 'n_clicks'),
+    prevent_initial_call=True
+)
+def on_reset(n):
+    return chess.STARTING_FEN, [], {}, False, [], 'playing'
+
+# Move button clicks - select candidate
+@callback(
+    Output('selected-idx', 'data', allow_duplicate=True),
+    Input({'type': 'move-btn', 'index': dash.ALL}, 'n_clicks'),
+    prevent_initial_call=True
+)
+def on_move_select(clicks):
+    if not clicks or not any(clicks):
+        raise dash.exceptions.PreventUpdate
+    
+    triggered = ctx.triggered_id
+    if triggered and 'index' in triggered:
+        return triggered['index']
+    raise dash.exceptions.PreventUpdate
+
+# COMMIT - execute move + opponent responds
+@callback(
+    Output('board-fen', 'data', allow_duplicate=True),
+    Output('candidates-store', 'data', allow_duplicate=True),
+    Output('hold-data-store', 'data', allow_duplicate=True),
+    Output('is-held', 'data', allow_duplicate=True),
+    Output('move-history', 'data', allow_duplicate=True),
+    Output('game-status', 'data', allow_duplicate=True),
+    Input('btn-commit', 'n_clicks'),
+    State('board-fen', 'data'),
+    State('candidates-store', 'data'),
+    State('selected-idx', 'data'),
+    State('move-history', 'data'),
+    prevent_initial_call=True
+)
+def on_commit(n, fen, candidates_data, selected_idx, history):
+    if not n or not candidates_data:
+        raise dash.exceptions.PreventUpdate
+    
+    board = chess.Board(fen)
+    status = 'playing'
+    
+    # 1. Execute White's move
+    if selected_idx < len(candidates_data):
+        move_uci = candidates_data[selected_idx]['move']
+        move = chess.Move.from_uci(move_uci)
+        board.push(move)
+        history = history + [move_uci]
+        print(f"[GAME] White plays: {move_uci}")
+    
+    # Check game over after white
+    if board.is_game_over():
+        if board.is_checkmate():
+            status = 'white_wins'
+        else:
+            status = 'draw'
+        return board.fen(), [], {}, False, history, status
+    
+    # 2. Engine plays Black
+    result = engine_play(board, chess.engine.Limit(depth=12))
+    if result and result.move:
+        board.push(result.move)
+        history = history + [result.move.uci()]
+        print(f"[GAME] Black plays: {result.move.uci()}")
+    
+    # Check game over after black
+    if board.is_game_over():
+        if board.is_checkmate():
+            status = 'black_wins'
+        else:
+            status = 'draw'
+    
+    return board.fen(), [], {}, False, history, status
+
+# Show/hide COMMIT button
+@callback(
+    Output('btn-commit', 'style'),
+    Input('is-held', 'data')
+)
+def toggle_commit(is_held):
+    base = {
+        'margin': '10px auto', 'padding': '15px 40px',
+        'fontSize': '16px', 'fontFamily': 'monospace', 'fontWeight': 'bold',
+        'backgroundColor': ACCENT_DIM, 'color': ACCENT,
+        'border': f'2px solid {ACCENT}', 'borderRadius': '8px', 'cursor': 'pointer'
+    }
+    base['display'] = 'block' if is_held else 'none'
+    return base
+
+# Move buttons
+@callback(
+    Output('move-buttons', 'children'),
+    Input('candidates-store', 'data'),
+    Input('selected-idx', 'data'),
+    Input('is-held', 'data')
+)
+def render_move_buttons(candidates_data, selected_idx, is_held):
+    if not is_held or not candidates_data:
+        return []
+    
+    buttons = []
+    for i, c in enumerate(candidates_data):
+        is_selected = (i == selected_idx)
+        style = {
+            'margin': '5px', 'padding': '10px 15px',
+            'fontSize': '13px', 'fontFamily': 'monospace', 'fontWeight': 'bold',
+            'borderRadius': '6px', 'cursor': 'pointer',
+            'transition': 'all 0.2s'
+        }
+        
+        if is_selected:
+            style['backgroundColor'] = ACCENT
+            style['color'] = '#000'
+            style['border'] = f'2px solid {ACCENT}'
+            style['boxShadow'] = f'0 0 15px {ACCENT}'
+        else:
+            style['backgroundColor'] = '#1a1a24'
+            style['color'] = '#888'
+            style['border'] = '2px solid #333'
+        
+        prob_pct = c['prob'] * 100
+        label = f"{c['move']} ({prob_pct:.0f}%)"
+        
+        buttons.append(html.Button(
+            label,
+            id={'type': 'move-btn', 'index': i},
+            style=style
+        ))
+    
+    return buttons
+
+# Wealth panel
+@callback(
+    Output('wealth-panel', 'children'),
+    Input('hold-data-store', 'data'),
+    Input('selected-idx', 'data'),
+    Input('is-held', 'data')
+)
+def render_wealth(hold_data, selected_idx, is_held):
+    if not is_held or not hold_data:
+        return html.Div("Press HOLD to analyze position", style={'color': '#555', 'fontStyle': 'italic'})
+    
+    features = hold_data.get('features', {})
+    reasoning = hold_data.get('reasoning', [])
+    imagination = hold_data.get('imagination', {})
+    probs = hold_data.get('action_probs', [])
+    labels = hold_data.get('action_labels', [])
+    
+    sections = []
+    
+    # Position Features
+    sections.append(html.Div([
+        html.Div("▸ POSITION FEATURES", style={'color': ACCENT, 'marginBottom': '8px'}),
+        html.Div([
+            html.Div(f"Material: {features.get('material', 0):+.1f}", style={'color': '#aaa'}),
+            html.Div(f"Center: {features.get('center_control', 0):+.2f}", style={'color': '#aaa'}),
+            html.Div(f"Phase: {features.get('phase', '?')}", style={'color': '#aaa'}),
+            html.Div(f"W mobility: {features.get('white_mobility', 0)}", style={'color': '#aaa'}),
+            html.Div(f"B mobility: {features.get('black_mobility', 0)}", style={'color': '#aaa'}),
+        ], style={'paddingLeft': '15px', 'marginBottom': '15px'})
+    ]))
+    
+    # AI Reasoning
+    if reasoning:
+        sections.append(html.Div([
+            html.Div("▸ AI REASONING", style={'color': ACCENT, 'marginBottom': '8px'}),
+            html.Div([
+                html.Div(f"• {r}", style={'color': '#aaa', 'marginBottom': '3px'}) for r in reasoning
+            ], style={'paddingLeft': '15px', 'marginBottom': '15px'})
+        ]))
+    
+    # Imagination (predicted lines)
+    if imagination:
+        sections.append(html.Div([
+            html.Div("▸ IMAGINATION (predicted responses)", style={'color': ACCENT, 'marginBottom': '8px'}),
+            html.Div([
+                html.Div([
+                    html.Span(f"#{int(k)+1}: ", style={'color': '#666'}),
+                    html.Span(img['line'], style={'color': '#aaa'}),
+                    html.Span(f" ({img['value']:+.2f})", style={'color': '#666'})
+                ], style={'marginBottom': '3px'})
+                for k, img in imagination.items()
+            ], style={'paddingLeft': '15px', 'marginBottom': '15px'})
+        ]))
+    
+    # Selected move confidence
+    if selected_idx < len(probs):
+        conf = probs[selected_idx] * 100
+        move = labels[selected_idx] if selected_idx < len(labels) else '?'
+        sections.append(html.Div([
+            html.Div("▸ SELECTED MOVE", style={'color': ACCENT, 'marginBottom': '8px'}),
+            html.Div([
+                html.Span(move, style={'color': '#fff', 'fontSize': '18px', 'fontWeight': 'bold'}),
+                html.Span(f"  {conf:.1f}% confidence", style={'color': '#888'})
+            ], style={'paddingLeft': '15px'})
+        ]))
+    
+    return sections
+
+# Scene state for Three.js
+@callback(
+    Output('scene-state', 'children'),
+    Input('board-fen', 'data'),
+    Input('candidates-store', 'data'),
+    Input('selected-idx', 'data')
+)
+def update_scene(fen, candidates_data, selected_idx):
+    candidates = []
+    if candidates_data:
+        for i, c in enumerate(candidates_data):
+            candidates.append({
+                'from_sq': c['from_sq'],
+                'to_sq': c['to_sq'],
+                'prob': c['prob'],
+                'selected': (i == selected_idx)
+            })
+    
+    state = {'fen': fen, 'candidates': candidates}
+    return json.dumps(state)
+
+# Game status display
+@callback(
+    Output('game-status-display', 'children'),
+    Input('game-status', 'data'),
+    Input('board-fen', 'data')
+)
+def show_status(status, fen):
+    board = chess.Board(fen)
+    turn = "White" if board.turn == chess.WHITE else "Black"
+    
+    if status == 'white_wins':
+        return html.Span("✓ WHITE WINS!", style={'color': ACCENT, 'fontWeight': 'bold'})
+    elif status == 'black_wins':
+        return html.Span("✗ BLACK WINS", style={'color': '#FF4444', 'fontWeight': 'bold'})
+    elif status == 'draw':
+        return html.Span("½ DRAW", style={'color': '#888'})
+    else:
+        return f"{turn} to move • Press HOLD to analyze"
+
+# History display
+@callback(
+    Output('history-display', 'children'),
+    Input('move-history', 'data')
+)
+def show_history(history):
+    if not history:
+        return "Game start"
+    
+    moves = []
+    for i in range(0, len(history), 2):
+        num = i // 2 + 1
+        white = history[i]
+        black = history[i + 1] if i + 1 < len(history) else "..."
+        moves.append(f"{num}. {white} {black}")
+    
+    return " ".join(moves)
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# MAIN
+# ═══════════════════════════════════════════════════════════════════════════════
+
+if __name__ == '__main__':
+    print("\n" + "=" * 50)
+    print("CASCADE-LATTICE Chess (Clean Build)")
+    print("=" * 50)
+    print("Open: http://127.0.0.1:8050")
+    print("=" * 50 + "\n")
+    
+    app.run(debug=False, host='127.0.0.1', port=8050)

src/app_dash.py

@@ -0,0 +1,1540 @@
+"""
+CASCADE-LATTICE Chess - Dash Version
+====================================
+Proper callback-based visualization that doesn't shit itself.
+"""
+
+import dash
+from dash import dcc, html, callback, Input, Output, State
+import plotly.graph_objects as go
+import chess
+import chess.engine
+import numpy as np
+import asyncio
+import platform
+from pathlib import Path
+import shutil
+from dataclasses import dataclass
+from typing import List, Optional
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# STOCKFISH SETUP
+# ═══════════════════════════════════════════════════════════════════════════════
+
+PROJECT_ROOT = Path(__file__).parent.parent.resolve()
+LOCAL_STOCKFISH = PROJECT_ROOT / "stockfish" / "stockfish-windows-x86-64-avx2.exe"
+
+if LOCAL_STOCKFISH.exists():
+    STOCKFISH_PATH = str(LOCAL_STOCKFISH)
+elif shutil.which("stockfish"):
+    STOCKFISH_PATH = shutil.which("stockfish")
+else:
+    STOCKFISH_PATH = "/usr/games/stockfish"
+
+print(f"[STOCKFISH] {STOCKFISH_PATH}")
+
+# Fix Windows asyncio for chess engine
+if platform.system() == 'Windows':
+    asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy())
+
+# Global engine (initialized once)
+ENGINE = None
+try:
+    ENGINE = chess.engine.SimpleEngine.popen_uci(STOCKFISH_PATH)
+    print("[ENGINE] Loaded OK")
+except Exception as e:
+    print(f"[ENGINE] Failed: {e}")
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# CASCADE-LATTICE
+# ═══════════════════════════════════════════════════════════════════════════════
+
+CASCADE_AVAILABLE = False
+HOLD = None
+CAUSATION = None
+TRACER = None
+
+try:
+    from cascade import Hold
+    HOLD = Hold()
+    CASCADE_AVAILABLE = True
+    print("[CASCADE] Hold ready")
+except ImportError:
+    print("[CASCADE] Hold not available")
+
+try:
+    from cascade import CausationGraph
+    CAUSATION = CausationGraph()
+    print("[CASCADE] CausationGraph ready")
+except:
+    pass
+
+try:
+    from cascade import Tracer
+    if CAUSATION:
+        TRACER = Tracer(CAUSATION)
+        print("[CASCADE] Tracer ready")
+except:
+    pass
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# VISUAL THEME
+# ═══════════════════════════════════════════════════════════════════════════════
+
+# Board - rich wood tones
+BOARD_LIGHT = '#D4A574'   # Maple
+BOARD_DARK = '#8B5A2B'    # Walnut
+BOARD_EDGE = '#4A3520'    # Dark frame
+
+# Pieces - polished look  
+WHITE_PIECE = '#FFFEF0'   # Ivory
+WHITE_SHADOW = '#C0B090'  # Ivory shadow
+BLACK_PIECE = '#2A2A2A'   # Ebony
+BLACK_SHADOW = '#151515'  # Ebony shadow
+
+# Accents
+GOLD = '#FFD700'
+CRIMSON = '#DC143C'
+CYAN = '#00FFD4'
+MAGENTA = '#FF00AA'
+
+BG_COLOR = '#0a0a0f'
+BG_GRADIENT = '#12121a'
+
+# Piece geometry - height and multiple size layers for 3D effect
+PIECE_CONFIG = {
+    chess.PAWN:   {'h': 0.5, 'base': 8,  'mid': 6,  'top': 4,  'symbol': '♟'},
+    chess.KNIGHT: {'h': 0.8, 'base': 10, 'mid': 8,  'top': 6,  'symbol': '♞'},
+    chess.BISHOP: {'h': 0.9, 'base': 10, 'mid': 7,  'top': 5,  'symbol': '♝'},
+    chess.ROOK:   {'h': 0.7, 'base': 10, 'mid': 9,  'top': 8,  'symbol': '♜'},
+    chess.QUEEN:  {'h': 1.1, 'base': 12, 'mid': 9,  'top': 6,  'symbol': '♛'},
+    chess.KING:   {'h': 1.2, 'base': 12, 'mid': 8,  'top': 5,  'symbol': '♚'},
+}
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# DATA
+# ═══════════════════════════════════════════════════════════════════════════════
+
+@dataclass
+class MoveCandidate:
+    move: str
+    prob: float
+    value: float
+    from_sq: int
+    to_sq: int
+    is_capture: bool = False
+    is_check: bool = False
+    move_type: str = 'quiet'
+
+@dataclass
+class CascadeTrace:
+    """Represents a cascade-lattice inference trace."""
+    step: int
+    operation: str
+    inputs: List[str]
+    output: str
+    duration_ms: float
+    confidence: float
+    
+# Global trace storage
+TRACE_LOG: List[dict] = []
+DECISION_TREE: List[dict] = []
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# 3D VISUALIZATION
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def square_to_3d(square: int):
+    file = square % 8
+    rank = square // 8
+    return (file - 3.5, rank - 3.5, 0)
+
+def create_board_traces():
+    """Create 3D board with mesh tiles."""
+    traces = []
+    tile_size = 0.48
+    tile_height = 0.08
+    
+    for rank in range(8):
+        for file in range(8):
+            cx, cy = file - 3.5, rank - 3.5
+            is_light = (rank + file) % 2 == 1
+            color = BOARD_LIGHT if is_light else BOARD_DARK
+            
+            # Top surface of tile
+            traces.append(go.Mesh3d(
+                x=[cx-tile_size, cx+tile_size, cx+tile_size, cx-tile_size],
+                y=[cy-tile_size, cy-tile_size, cy+tile_size, cy+tile_size],
+                z=[tile_height, tile_height, tile_height, tile_height],
+                i=[0, 0], j=[1, 2], k=[2, 3],
+                color=color, opacity=0.95, flatshading=True,
+                hoverinfo='skip', showlegend=False
+            ))
+    
+    # Board frame/border
+    border = 4.3
+    frame_z = tile_height / 2
+    traces.append(go.Scatter3d(
+        x=[-border, border, border, -border, -border],
+        y=[-border, -border, border, border, -border],
+        z=[frame_z]*5, mode='lines',
+        line=dict(color=GOLD, width=3),
+        hoverinfo='skip', showlegend=False
+    ))
+    
+    # File labels (a-h)
+    for i, label in enumerate('abcdefgh'):
+        traces.append(go.Scatter3d(
+            x=[i-3.5], y=[-4.6], z=[0.1], mode='text', text=[label],
+            textfont=dict(size=11, color='#666'), showlegend=False
+        ))
+    # Rank labels (1-8)
+    for i in range(8):
+        traces.append(go.Scatter3d(
+            x=[-4.6], y=[i-3.5], z=[0.1], mode='text', text=[str(i+1)],
+            textfont=dict(size=11, color='#666'), showlegend=False
+        ))
+    
+    return traces
+
+def create_piece_traces(board: chess.Board):
+    """Create holographic crystal-style chess pieces using rotated point silhouettes."""
+    traces = []
+    
+    # Define piece silhouettes as point patterns (normalized 0-1 range)
+    # These trace the outline/shape of each piece type
+    PIECE_SILHOUETTES = {
+        chess.PAWN: [
+            (0.5, 0.0), (0.3, 0.1), (0.25, 0.2), (0.3, 0.3), (0.35, 0.4),
+            (0.4, 0.5), (0.35, 0.6), (0.3, 0.7), (0.4, 0.8), (0.5, 0.9),
+            (0.6, 0.8), (0.7, 0.7), (0.65, 0.6), (0.6, 0.5), (0.65, 0.4),
+            (0.7, 0.3), (0.75, 0.2), (0.7, 0.1), (0.5, 0.0)
+        ],
+        chess.ROOK: [
+            (0.25, 0.0), (0.25, 0.15), (0.35, 0.15), (0.35, 0.25), (0.25, 0.25),
+            (0.25, 0.85), (0.35, 0.9), (0.35, 1.0), (0.45, 1.0), (0.45, 0.9),
+            (0.55, 0.9), (0.55, 1.0), (0.65, 1.0), (0.65, 0.9), (0.75, 0.85),
+            (0.75, 0.25), (0.65, 0.25), (0.65, 0.15), (0.75, 0.15), (0.75, 0.0)
+        ],
+        chess.KNIGHT: [
+            (0.25, 0.0), (0.25, 0.2), (0.3, 0.35), (0.25, 0.5), (0.3, 0.6),
+            (0.35, 0.7), (0.3, 0.8), (0.4, 0.9), (0.5, 1.0), (0.6, 0.95),
+            (0.7, 0.85), (0.75, 0.7), (0.7, 0.55), (0.65, 0.4), (0.7, 0.25),
+            (0.75, 0.15), (0.75, 0.0)
+        ],
+        chess.BISHOP: [
+            (0.3, 0.0), (0.25, 0.15), (0.3, 0.3), (0.35, 0.45), (0.4, 0.6),
+            (0.35, 0.7), (0.4, 0.8), (0.5, 0.95), (0.6, 0.8), (0.65, 0.7),
+            (0.6, 0.6), (0.65, 0.45), (0.7, 0.3), (0.75, 0.15), (0.7, 0.0)
+        ],
+        chess.QUEEN: [
+            (0.25, 0.0), (0.2, 0.15), (0.25, 0.3), (0.3, 0.5), (0.25, 0.65),
+            (0.3, 0.75), (0.2, 0.85), (0.35, 0.9), (0.5, 1.0), (0.65, 0.9),
+            (0.8, 0.85), (0.7, 0.75), (0.75, 0.65), (0.7, 0.5), (0.75, 0.3),
+            (0.8, 0.15), (0.75, 0.0)
+        ],
+        chess.KING: [
+            (0.25, 0.0), (0.2, 0.15), (0.25, 0.35), (0.3, 0.55), (0.35, 0.7),
+            (0.3, 0.8), (0.45, 0.85), (0.45, 0.92), (0.4, 0.92), (0.4, 0.97),
+            (0.5, 1.0), (0.6, 0.97), (0.6, 0.92), (0.55, 0.92), (0.55, 0.85),
+            (0.7, 0.8), (0.65, 0.7), (0.7, 0.55), (0.75, 0.35), (0.8, 0.15), (0.75, 0.0)
+        ],
+    }
+    
+    PIECE_HEIGHT = {
+        chess.PAWN: 0.4,
+        chess.KNIGHT: 0.55,
+        chess.BISHOP: 0.55,
+        chess.ROOK: 0.5,
+        chess.QUEEN: 0.65,
+        chess.KING: 0.7,
+    }
+    
+    NUM_ROTATIONS = 6  # How many rotated planes per piece
+    
+    for sq in chess.SQUARES:
+        piece = board.piece_at(sq)
+        if not piece:
+            continue
+            
+        cx, cy, _ = square_to_3d(sq)
+        silhouette = PIECE_SILHOUETTES[piece.piece_type]
+        height = PIECE_HEIGHT[piece.piece_type]
+        color = '#E8E8E8' if piece.color == chess.WHITE else '#404040'
+        
+        # Create rotated copies of the silhouette
+        for rot in range(NUM_ROTATIONS):
+            angle = (rot / NUM_ROTATIONS) * np.pi  # 0 to 180 degrees
+            
+            xs, ys, zs = [], [], []
+            for px, pz in silhouette:
+                # Offset from center (-0.5 to +0.5 range)
+                local_x = (px - 0.5) * 0.4  # Scale to fit in square
+                local_z = pz * height + 0.1  # Height above board
+                
+                # Rotate around Y (vertical) axis
+                rotated_x = local_x * np.cos(angle)
+                rotated_y = local_x * np.sin(angle)
+                
+                xs.append(cx + rotated_x)
+                ys.append(cy + rotated_y)
+                zs.append(local_z)
+            
+            traces.append(go.Scatter3d(
+                x=xs, y=ys, z=zs,
+                mode='lines',
+                line=dict(color=color, width=2),
+                opacity=0.7,
+                hoverinfo='skip',
+                showlegend=False
+            ))
+    
+    return traces
+    
+    return traces
+
+def create_arc(from_sq, to_sq, is_white, num_points=40):
+    """Create smooth arc trajectory with proper curve."""
+    x1, y1, _ = square_to_3d(from_sq)
+    x2, y2, _ = square_to_3d(to_sq)
+    dist = np.sqrt((x2-x1)**2 + (y2-y1)**2)
+    # Cap height to stay within z bounds - short moves get small arcs, long moves capped
+    height = min(1.8, max(0.8, dist * 0.35))
+    
+    t = np.linspace(0, 1, num_points)
+    x = x1 + (x2 - x1) * t
+    y = y1 + (y2 - y1) * t
+    # Arc always goes UP (positive z) - offset from board surface
+    z = 0.3 + height * np.sin(np.pi * t)
+    return x, y, z
+
+def create_move_arcs(candidates: List[MoveCandidate], is_white: bool):
+    """Create glowing move arc traces."""
+    traces = []
+    
+    # Color gradient based on rank
+    if is_white:
+        colors = [CYAN, '#00CCAA', '#009988', '#006666', '#004444']
+    else:
+        colors = [MAGENTA, '#CC0088', '#990066', '#660044', '#440022']
+    
+    for i, cand in enumerate(candidates):
+        x, y, z = create_arc(cand.from_sq, cand.to_sq, is_white)
+        color = colors[min(i, len(colors)-1)]
+        width = max(4, cand.prob * 15)
+        opacity = max(0.5, cand.prob * 1.2)
+        
+        # Outer glow (wide, transparent)
+        traces.append(go.Scatter3d(
+            x=x, y=y, z=z, mode='lines',
+            line=dict(color=color, width=width+6),
+            opacity=opacity*0.2, hoverinfo='skip', showlegend=False
+        ))
+        # Mid glow
+        traces.append(go.Scatter3d(
+            x=x, y=y, z=z, mode='lines',
+            line=dict(color=color, width=width+2),
+            opacity=opacity*0.4, hoverinfo='skip', showlegend=False
+        ))
+        # Core line
+        traces.append(go.Scatter3d(
+            x=x, y=y, z=z, mode='lines',
+            line=dict(color=color, width=width),
+            opacity=opacity,
+            name=f"{cand.move} ({cand.prob*100:.0f}%)",
+            hovertemplate=f"<b>{cand.move}</b><br>Probability: {cand.prob*100:.1f}%<br>Eval: {cand.value:+.2f}<extra></extra>"
+        ))
+        
+        # Start point (piece origin)
+        traces.append(go.Scatter3d(
+            x=[x[0]], y=[y[0]], z=[z[0]], mode='markers',
+            marker=dict(size=5, color=color, symbol='circle', opacity=opacity),
+            hoverinfo='skip', showlegend=False
+        ))
+        
+        # End point (destination) - larger, prominent
+        traces.append(go.Scatter3d(
+            x=[x[-1]], y=[y[-1]], z=[z[-1]], mode='markers',
+            marker=dict(size=8, color=color, symbol='diamond',
+                       line=dict(color='white', width=1)),
+            hoverinfo='skip', showlegend=False
+        ))
+        
+        # Drop line to board (shows landing square)
+        x2, y2, _ = square_to_3d(cand.to_sq)
+        traces.append(go.Scatter3d(
+            x=[x2, x2], y=[y2, y2], z=[z[-1], 0.15],
+            mode='lines', line=dict(color=color, width=2, dash='dot'),
+            opacity=opacity*0.5, hoverinfo='skip', showlegend=False
+        ))
+    
+    return traces
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# TACTICAL VISUALIZATION
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def get_piece_attacks(board: chess.Board, square: int) -> List[int]:
+    """Get squares attacked by piece at given square."""
+    piece = board.piece_at(square)
+    if not piece:
+        return []
+    return list(board.attacks(square))
+
+def get_attackers(board: chess.Board, square: int, color: bool) -> List[int]:
+    """Get pieces of given color attacking a square."""
+    return list(board.attackers(color, square))
+
+def create_threat_beams(board: chess.Board):
+    """Create downward beams showing attack vectors - underneath the board."""
+    traces = []
+    
+    for sq in chess.SQUARES:
+        piece = board.piece_at(sq)
+        if not piece:
+            continue
+        
+        attacks = get_piece_attacks(board, sq)
+        if not attacks:
+            continue
+        
+        px, py, _ = square_to_3d(sq)
+        color = 'rgba(255,215,0,0.15)' if piece.color == chess.WHITE else 'rgba(220,20,60,0.15)'
+        
+        for target_sq in attacks:
+            tx, ty, _ = square_to_3d(target_sq)
+            # Beam goes from piece position DOWN through board to show threat zone
+            traces.append(go.Scatter3d(
+                x=[px, tx], y=[py, ty], z=[-0.05, -0.2],
+                mode='lines', line=dict(color=color, width=1),
+                hoverinfo='skip', showlegend=False
+            ))
+    
+    return traces
+
+def create_tension_lines(board: chess.Board):
+    """Create lines between pieces that threaten each other (mutual tension)."""
+    traces = []
+    tension_pairs = set()
+    
+    for sq in chess.SQUARES:
+        piece = board.piece_at(sq)
+        if not piece:
+            continue
+        
+        # Check if this piece attacks any enemy pieces
+        for target_sq in board.attacks(sq):
+            target_piece = board.piece_at(target_sq)
+            if target_piece and target_piece.color != piece.color:
+                # Create unique pair key
+                pair = tuple(sorted([sq, target_sq]))
+                if pair not in tension_pairs:
+                    tension_pairs.add(pair)
+                    
+                    x1, y1, _ = square_to_3d(sq)
+                    x2, y2, _ = square_to_3d(target_sq)
+                    
+                    # Check if it's mutual (both threaten each other)
+                    mutual = target_sq in board.attacks(sq) and sq in board.attacks(target_sq)
+                    
+                    if mutual:
+                        color = MAGENTA
+                        width = 3
+                        opacity = 0.6
+                    else:
+                        color = CRIMSON if piece.color == chess.BLACK else GOLD
+                        width = 2
+                        opacity = 0.4
+                    
+                    # Tension line slightly above board
+                    traces.append(go.Scatter3d(
+                        x=[x1, x2], y=[y1, y2], z=[0.8, 0.8],
+                        mode='lines', line=dict(color=color, width=width),
+                        opacity=opacity, hoverinfo='skip', showlegend=False
+                    ))
+    
+    return traces
+
+def create_hanging_indicators(board: chess.Board):
+    """Mark pieces that are hanging (attacked but not defended)."""
+    traces = []
+    
+    for sq in chess.SQUARES:
+        piece = board.piece_at(sq)
+        if not piece:
+            continue
+        
+        # Count attackers and defenders
+        enemy_color = not piece.color
+        attackers = len(board.attackers(enemy_color, sq))
+        defenders = len(board.attackers(piece.color, sq))
+        
+        if attackers > 0 and defenders == 0:
+            # Hanging! Draw danger indicator
+            x, y, _ = square_to_3d(sq)
+            
+            # Pulsing ring under the piece
+            theta = np.linspace(0, 2*np.pi, 20)
+            ring_x = x + 0.3 * np.cos(theta)
+            ring_y = y + 0.3 * np.sin(theta)
+            ring_z = [0.05] * len(theta)
+            
+            traces.append(go.Scatter3d(
+                x=ring_x, y=ring_y, z=ring_z,
+                mode='lines', line=dict(color=CRIMSON, width=4),
+                opacity=0.8, hoverinfo='skip', showlegend=False
+            ))
+            
+            # Exclamation point above
+            traces.append(go.Scatter3d(
+                x=[x], y=[y], z=[1.0],
+                mode='text', text=['⚠'],
+                textfont=dict(size=16, color=CRIMSON),
+                hoverinfo='skip', showlegend=False
+            ))
+    
+    return traces
+
+def create_king_safety(board: chess.Board):
+    """Create safety dome around kings showing their safety status."""
+    traces = []
+    
+    for color in [chess.WHITE, chess.BLACK]:
+        king_sq = board.king(color)
+        if king_sq is None:
+            continue
+        
+        kx, ky, _ = square_to_3d(king_sq)
+        
+        # Count attackers around king zone
+        danger_level = 0
+        for sq in chess.SQUARES:
+            file_dist = abs(chess.square_file(sq) - chess.square_file(king_sq))
+            rank_dist = abs(chess.square_rank(sq) - chess.square_rank(king_sq))
+            if file_dist <= 1 and rank_dist <= 1:  # King zone
+                enemy_attackers = len(board.attackers(not color, sq))
+                danger_level += enemy_attackers
+        
+        # Dome color based on safety
+        if board.is_check() and board.turn == color:
+            dome_color = CRIMSON
+            opacity = 0.5
+        elif danger_level > 5:
+            dome_color = '#FF6600'  # Orange - danger
+            opacity = 0.3
+        elif danger_level > 2:
+            dome_color = GOLD  # Yellow - caution
+            opacity = 0.2
+        else:
+            dome_color = '#00FF00'  # Green - safe
+            opacity = 0.15
+        
+        # Draw dome as circles at different heights
+        for h in [0.3, 0.5, 0.7]:
+            radius = 0.6 * (1 - h/1.5)  # Smaller at top
+            theta = np.linspace(0, 2*np.pi, 24)
+            dome_x = kx + radius * np.cos(theta)
+            dome_y = ky + radius * np.sin(theta)
+            dome_z = [h] * len(theta)
+            
+            traces.append(go.Scatter3d(
+                x=dome_x, y=dome_y, z=dome_z,
+                mode='lines', line=dict(color=dome_color, width=2),
+                opacity=opacity, hoverinfo='skip', showlegend=False
+            ))
+    
+    return traces
+
+def create_candidate_origins(board: chess.Board, candidates: List[MoveCandidate]):
+    """Highlight pieces that are generating the top candidate moves."""
+    traces = []
+    if not candidates:
+        return traces
+    
+    # Collect unique origin squares from candidates
+    origins = {}
+    for i, cand in enumerate(candidates):
+        sq = cand.from_sq
+        if sq not in origins:
+            origins[sq] = i  # Store best rank
+    
+    for sq, rank in origins.items():
+        x, y, _ = square_to_3d(sq)
+        
+        # Intensity based on rank (top candidate = brightest)
+        intensity = 1.0 - (rank * 0.15)
+        color = f'rgba(0,255,212,{intensity * 0.6})'  # Cyan glow
+        
+        # Glow ring around the piece
+        theta = np.linspace(0, 2*np.pi, 20)
+        ring_x = x + 0.35 * np.cos(theta)
+        ring_y = y + 0.35 * np.sin(theta)
+        ring_z = [0.08] * len(theta)
+        
+        traces.append(go.Scatter3d(
+            x=ring_x, y=ring_y, z=ring_z,
+            mode='lines', line=dict(color=color, width=3 + (5-rank)),
+            hoverinfo='skip', showlegend=False
+        ))
+    
+    return traces
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# STATE-SPACE LATTICE GRAPH
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def create_state_lattice(move_history: List[str], candidates: List[MoveCandidate] = None):
+    """
+    Create a state-space graph visualization above/below the board.
+    Each move node is positioned ABOVE its destination square.
+    White moves above board, black moves below.
+    Edges trace the flow of the game through space.
+    """
+    traces = []
+    if not move_history or len(move_history) < 1:
+        return traces
+    
+    # Z heights - white moves float above, black sink below
+    BASE_Z_WHITE = 2.2
+    BASE_Z_BLACK = -0.3
+    Z_LAYER_STEP = 0.25  # Each subsequent move goes higher/lower
+    
+    # Track all nodes for edge drawing
+    all_nodes = []  # List of (x, y, z, move_uci, is_white, move_idx)
+    
+    for i, move_uci in enumerate(move_history):
+        is_white = (i % 2 == 0)
+        move_num = i // 2 + 1
+        same_color_idx = i // 2  # How many moves of this color so far
+        
+        # Parse the UCI move to get destination square
+        if len(move_uci) >= 4:
+            to_sq_name = move_uci[2:4]  # e.g., "e4" from "e2e4"
+            try:
+                to_sq = chess.parse_square(to_sq_name)
+                # Get 3D position of destination square
+                x, y, _ = square_to_3d(to_sq)
+            except:
+                x, y = 0, 0
+        else:
+            x, y = 0, 0
+        
+        # Z position - stacks up/down with each move
+        if is_white:
+            z = BASE_Z_WHITE + (same_color_idx * Z_LAYER_STEP)
+            node_color = '#FFFEF0'
+            edge_color = 'rgba(255,254,240,0.6)'
+            glow_color = 'rgba(0,255,212,0.4)'  # Cyan glow
+        else:
+            z = BASE_Z_BLACK - (same_color_idx * Z_LAYER_STEP)
+            node_color = '#AAAAAA'
+            edge_color = 'rgba(150,150,150,0.6)'
+            glow_color = 'rgba(255,100,150,0.4)'  # Pink glow
+        
+        all_nodes.append((x, y, z, move_uci, is_white, i))
+        
+        # Draw vertical "drop line" from node to board
+        board_z = 0.1
+        traces.append(go.Scatter3d(
+            x=[x, x], y=[y, y], z=[z, board_z if is_white else board_z],
+            mode='lines',
+            line=dict(color=glow_color, width=1),
+            hoverinfo='skip', showlegend=False
+        ))
+        
+        # Node marker
+        traces.append(go.Scatter3d(
+            x=[x], y=[y], z=[z],
+            mode='markers+text',
+            marker=dict(size=10, color=node_color, 
+                       line=dict(width=2, color=glow_color),
+                       symbol='diamond'),
+            text=[f"{move_num}.{move_uci}" if is_white else move_uci],
+            textposition='top center',
+            textfont=dict(size=9, color=node_color, family='monospace'),
+            hoverinfo='text',
+            hovertext=f"{'White' if is_white else 'Black'} {move_num}: {move_uci}",
+            showlegend=False
+        ))
+    
+    # Draw edges connecting sequential moves (alternating colors)
+    for i in range(len(all_nodes) - 1):
+        x0, y0, z0, _, _, _ = all_nodes[i]
+        x1, y1, z1, _, is_white_next, _ = all_nodes[i + 1]
+        
+        # Color based on who just moved (the edge leads TO the next move)
+        edge_color = 'rgba(0,255,212,0.4)' if is_white_next else 'rgba(255,100,150,0.4)'
+        
+        traces.append(go.Scatter3d(
+            x=[x0, x1], y=[y0, y1], z=[z0, z1],
+            mode='lines',
+            line=dict(color=edge_color, width=2),
+            hoverinfo='skip', showlegend=False
+        ))
+    
+    # Show candidate moves as potential branches from last position
+    if candidates and all_nodes:
+        last_x, last_y, last_z, _, last_white, _ = all_nodes[-1]
+        is_white_turn = len(move_history) % 2 == 0  # Who moves next
+        
+        branch_z = (BASE_Z_WHITE + (len(move_history)//2) * Z_LAYER_STEP) if is_white_turn \
+                   else (BASE_Z_BLACK - (len(move_history)//2) * Z_LAYER_STEP)
+        
+        for j, cand in enumerate(candidates[:5]):
+            # Position at candidate's destination
+            if len(cand.move) >= 4:
+                try:
+                    cand_to_sq = chess.parse_square(cand.move[2:4])
+                    cx, cy, _ = square_to_3d(cand_to_sq)
+                except:
+                    continue
+            else:
+                continue
+            
+            cz = branch_z
+            
+            # Branch edge from last move to candidate
+            traces.append(go.Scatter3d(
+                x=[last_x, cx], y=[last_y, cy], z=[last_z, cz],
+                mode='lines',
+                line=dict(color='rgba(255,215,0,0.3)', width=1, dash='dot'),
+                hoverinfo='skip', showlegend=False
+            ))
+            
+            # Candidate node
+            traces.append(go.Scatter3d(
+                x=[cx], y=[cy], z=[cz],
+                mode='markers+text',
+                marker=dict(size=6, color=GOLD, opacity=0.5,
+                           symbol='diamond'),
+                text=[cand.move],
+                textposition='top center',
+                textfont=dict(size=7, color='rgba(255,215,0,0.6)', family='monospace'),
+                hoverinfo='text',
+                hovertext=f"Candidate: {cand.move} ({cand.cp}cp)",
+                showlegend=False
+            ))
+    
+    return traces
+
+
+# Default camera position
+DEFAULT_CAMERA = dict(
+    eye=dict(x=0.8, y=-1.4, z=0.9),
+    up=dict(x=0, y=0, z=1),
+    center=dict(x=0, y=0, z=0)
+)
+
+def create_figure(board: chess.Board, candidates: List[MoveCandidate] = None, camera: dict = None):
+    """Create the full 3D figure with polished visuals."""
+    fig = go.Figure()
+    
+    # Use provided camera or default
+    cam = camera if camera else DEFAULT_CAMERA
+    
+    # Layer 1: Board
+    for trace in create_board_traces():
+        fig.add_trace(trace)
+    
+    # Layer 2: Pieces (crystal style)
+    for trace in create_piece_traces(board):
+        fig.add_trace(trace)
+    
+    # Layer 3: Move arcs (when HOLD active)
+    if candidates:
+        # Highlight candidate origin pieces
+        for trace in create_candidate_origins(board, candidates):
+            fig.add_trace(trace)
+        
+        is_white = board.turn == chess.WHITE
+        for trace in create_move_arcs(candidates, is_white):
+            fig.add_trace(trace)
+    
+    # Turn indicator
+    turn_text = "⚪ WHITE" if board.turn else "⚫ BLACK"
+    turn_color = '#EEE' if board.turn else '#888'
+    fig.add_trace(go.Scatter3d(
+        x=[0], y=[5.2], z=[0.3], mode='text', text=[turn_text],
+        textfont=dict(size=14, color=turn_color, family='monospace'),
+        showlegend=False, hoverinfo='skip'
+    ))
+    
+    # Move number
+    fig.add_trace(go.Scatter3d(
+        x=[0], y=[-5.2], z=[0.3], mode='text', 
+        text=[f"Move {board.fullmove_number}"],
+        textfont=dict(size=11, color='#666', family='monospace'),
+        showlegend=False, hoverinfo='skip'
+    ))
+    
+    fig.update_layout(
+        scene=dict(
+            xaxis=dict(range=[-5.5, 5.5], showgrid=False, showbackground=False, 
+                      showticklabels=False, showline=False, zeroline=False, title=''),
+            yaxis=dict(range=[-5.5, 5.5], showgrid=False, showbackground=False,
+                      showticklabels=False, showline=False, zeroline=False, title=''),
+            zaxis=dict(range=[-0.5, 3.0], showgrid=False, showbackground=False,
+                      showticklabels=False, showline=False, zeroline=False, title=''),
+            aspectmode='manual', 
+            aspectratio=dict(x=1, y=1, z=0.35),
+            camera=cam,
+            bgcolor=BG_COLOR
+        ),
+        paper_bgcolor=BG_COLOR,
+        plot_bgcolor=BG_COLOR,
+        margin=dict(l=0, r=0, t=0, b=0),
+        showlegend=False,
+        height=650
+    )
+    return fig
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# ENGINE + CASCADE HELPERS  
+# ═══════════════════════════════════════════════════════════════════════════════
+
+import time
+
+def get_candidates_with_trace(board: chess.Board, num=5) -> tuple:
+    """Get move candidates from Stockfish WITH cascade-lattice tracing."""
+    global TRACE_LOG, DECISION_TREE
+    
+    trace_data = []
+    decision_data = []
+    start_time = time.perf_counter()
+    
+    if not ENGINE:
+        return [], trace_data, decision_data
+    
+    try:
+        # TRACE: Board state encoding
+        t0 = time.perf_counter()
+        fen = board.fen()
+        trace_data.append({
+            'step': 1, 'op': 'ENCODE', 'detail': f'FEN → tensor',
+            'input': fen[:20] + '...', 'output': 'state_vec[768]',
+            'duration': round((time.perf_counter() - t0) * 1000, 2),
+            'confidence': 1.0
+        })
+        
+        # TRACE: Engine analysis
+        t1 = time.perf_counter()
+        info = ENGINE.analyse(board, chess.engine.Limit(depth=10), multipv=num)
+        trace_data.append({
+            'step': 2, 'op': 'ANALYZE', 'detail': f'Stockfish depth=10',
+            'input': 'state_vec', 'output': f'{len(info)} candidates',
+            'duration': round((time.perf_counter() - t1) * 1000, 2),
+            'confidence': 0.95
+        })
+        
+        candidates = []
+        total = 0
+        
+        # TRACE: Candidate scoring
+        t2 = time.perf_counter()
+        for i, pv in enumerate(info):
+            move = pv['pv'][0]
+            score = pv.get('score', chess.engine.Cp(0))
+            
+            if score.is_mate():
+                value = 1.0 if score.mate() > 0 else -1.0
+                eval_str = f"M{score.mate()}"
+            else:
+                cp = score.relative.score(mate_score=10000)
+                value = max(-1, min(1, cp / 1000))
+                eval_str = f"{cp:+d}cp"
+            
+            prob = 1.0 / (i + 1)
+            total += prob
+            
+            cand = MoveCandidate(
+                move=move.uci(), prob=prob, value=value,
+                from_sq=move.from_square, to_sq=move.to_square,
+                is_capture=board.is_capture(move),
+                is_check=board.gives_check(move)
+            )
+            candidates.append(cand)
+            
+            # Decision tree entry
+            decision_data.append({
+                'move': move.uci(),
+                'eval': eval_str,
+                'prob': prob,
+                'rank': i + 1,
+                'capture': board.is_capture(move),
+                'check': board.gives_check(move),
+                'selected': i == 0
+            })
+        
+        trace_data.append({
+            'step': 3, 'op': 'SCORE', 'detail': f'Evaluate {len(candidates)} moves',
+            'input': 'raw_candidates', 'output': 'scored_candidates',
+            'duration': round((time.perf_counter() - t2) * 1000, 2),
+            'confidence': 0.88
+        })
+        
+        # Normalize probabilities
+        for c in candidates:
+            c.prob /= total
+        for d in decision_data:
+            d['prob'] /= total
+        
+        # TRACE: Hold decision
+        t3 = time.perf_counter()
+        if HOLD and candidates:
+            # Use cascade-lattice Hold to potentially override
+            hold_result = None
+            try:
+                # Hold.evaluate expects candidates, returns selected
+                hold_result = HOLD.evaluate([c.move for c in candidates], 
+                                           weights=[c.prob for c in candidates])
+            except:
+                pass
+        
+        trace_data.append({
+            'step': 4, 'op': 'HOLD', 'detail': f'cascade.Hold decision gate',
+            'input': 'scored_candidates', 'output': candidates[0].move if candidates else 'none',
+            'duration': round((time.perf_counter() - t3) * 1000, 2),
+            'confidence': candidates[0].prob if candidates else 0
+        })
+        
+        # TRACE: Final selection
+        total_time = (time.perf_counter() - start_time) * 1000
+        trace_data.append({
+            'step': 5, 'op': 'SELECT', 'detail': f'Final output',
+            'input': candidates[0].move if candidates else '-', 
+            'output': '✓ COMMITTED',
+            'duration': round(total_time, 2),
+            'confidence': 1.0
+        })
+        
+        TRACE_LOG = trace_data
+        DECISION_TREE = decision_data
+        
+        return candidates, trace_data, decision_data
+        
+    except Exception as e:
+        print(f"[ENGINE] Error: {e}")
+        return [], [], []
+
+def get_candidates(board: chess.Board, num=5) -> List[MoveCandidate]:
+    """Simple wrapper for backward compat."""
+    candidates, _, _ = get_candidates_with_trace(board, num)
+    return candidates
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# DASH APP - TWO PANEL LAYOUT
+# ═══════════════════════════════════════════════════════════════════════════════
+
+app = dash.Dash(__name__, suppress_callback_exceptions=True)
+
+# Styles
+PANEL_STYLE = {
+    'backgroundColor': '#0d0d12', 
+    'borderRadius': '8px', 
+    'padding': '15px',
+    'border': '1px solid #1a1a2e'
+}
+TRACE_ROW_STYLE = {
+    'display': 'flex', 'alignItems': 'center', 'padding': '8px 10px',
+    'borderBottom': '1px solid #1a1a2e', 'fontFamily': 'monospace', 'fontSize': '12px'
+}
+BUTTON_BASE = {
+    'margin': '5px', 'padding': '12px 24px', 'fontSize': '14px',
+    'backgroundColor': '#1a1a2e', 'borderRadius': '4px', 
+    'cursor': 'pointer', 'fontFamily': 'monospace'
+}
+
+app.layout = html.Div([
+    # Header
+    html.Div([
+        html.H1("CASCADE // LATTICE", 
+               style={'color': CYAN, 'margin': 0, 'fontFamily': 'Consolas, monospace',
+                     'fontSize': '2.2em', 'letterSpacing': '0.1em', 'display': 'inline-block'}),
+        html.Span(" × ", style={'color': '#333', 'fontSize': '1.5em', 'margin': '0 10px'}),
+        html.Span("INFERENCE VISUALIZATION", 
+                 style={'color': '#444', 'fontFamily': 'monospace', 'fontSize': '1.1em'})
+    ], style={'textAlign': 'center', 'padding': '20px 0', 'borderBottom': '1px solid #1a1a2e'}),
+    
+    # Controls with loading indicator
+    html.Div([
+        html.Button("⏭ STEP", id='btn-step', n_clicks=0, 
+                   style={**BUTTON_BASE, 'color': '#888', 'border': '1px solid #333'}),
+        html.Button("⏸ HOLD", id='btn-hold', n_clicks=0,
+                   style={**BUTTON_BASE, 'color': GOLD, 'border': f'1px solid {GOLD}'}),
+        html.Button("▶▶ AUTO", id='btn-auto', n_clicks=0,
+                   style={**BUTTON_BASE, 'color': CYAN, 'border': f'1px solid {CYAN}'}),
+        html.Button("↺ RESET", id='btn-reset', n_clicks=0,
+                   style={**BUTTON_BASE, 'color': CRIMSON, 'border': f'1px solid {CRIMSON}'}),
+        # Loading spinner
+        dcc.Loading(
+            id='loading-indicator',
+            type='circle',
+            color=GOLD,
+            children=html.Div(id='loading-output', style={'display': 'inline-block', 'marginLeft': '15px'})
+        ),
+    ], style={'textAlign': 'center', 'padding': '15px', 'display': 'flex', 
+              'justifyContent': 'center', 'alignItems': 'center', 'gap': '5px'}),
+    
+    # Status bar
+    html.Div(id='status', 
+            style={'textAlign': 'center', 'color': '#666', 'padding': '10px',
+                  'fontFamily': 'monospace', 'fontSize': '13px', 'backgroundColor': '#0a0a0f',
+                  'borderTop': '1px solid #1a1a2e', 'borderBottom': '1px solid #1a1a2e'}),
+    
+    # ═══════════════════════════════════════════════════════════════════════════
+    # MAIN THREE-COLUMN LAYOUT
+    # ═══════════════════════════════════════════════════════════════════════════
+    html.Div([
+        # LEFT COLUMN - Engine & Game Info
+        html.Div([
+            # Engine Info Panel
+            html.Div([
+                html.Div([
+                    html.Span("◈ ", style={'color': '#FF6B35'}),
+                    html.Span("ENGINE", style={'color': '#888'})
+                ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '12px',
+                         'borderBottom': '1px solid #FF6B3533', 'paddingBottom': '8px'}),
+                
+                html.Div([
+                    html.Div([
+                        html.Span("Model", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("Stockfish 17", style={'color': '#FF6B35', 'fontWeight': 'bold'})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Type", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("NNUE + Classical", style={'color': '#888'})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Depth", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("10 ply", style={'color': CYAN})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("MultiPV", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("5 lines", style={'color': GOLD})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Status", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("● READY" if ENGINE else "○ OFFLINE", 
+                                 style={'color': '#0F0' if ENGINE else CRIMSON})
+                    ]),
+                ], style={'fontFamily': 'monospace', 'fontSize': '12px'})
+            ], style={**PANEL_STYLE, 'marginBottom': '15px'}),
+            
+            # Cascade-Lattice Info Panel
+            html.Div([
+                html.Div([
+                    html.Span("◈ ", style={'color': CYAN}),
+                    html.Span("CASCADE-LATTICE", style={'color': '#888'})
+                ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '12px',
+                         'borderBottom': f'1px solid {CYAN}33', 'paddingBottom': '8px'}),
+                
+                html.Div([
+                    html.Div([
+                        html.Span("Package", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("cascade-lattice", style={'color': CYAN})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Version", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("0.5.6", style={'color': '#888'})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Hold", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("● ACTIVE" if HOLD else "○ OFF", 
+                                 style={'color': '#0F0' if HOLD else '#555'})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Causation", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("● TRACING" if CAUSATION else "○ OFF", 
+                                 style={'color': MAGENTA if CAUSATION else '#555'})
+                    ]),
+                ], style={'fontFamily': 'monospace', 'fontSize': '12px'})
+            ], style={**PANEL_STYLE, 'marginBottom': '15px'}),
+            
+            # Game State Panel
+            html.Div([
+                html.Div([
+                    html.Span("◈ ", style={'color': GOLD}),
+                    html.Span("GAME STATE", style={'color': '#888'})
+                ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '12px',
+                         'borderBottom': f'1px solid {GOLD}33', 'paddingBottom': '8px'}),
+                
+                html.Div(id='game-state-panel', children=[
+                    html.Div([
+                        html.Span("Turn", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("White", id='gs-turn', style={'color': '#FFF'})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Move #", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("1", id='gs-movenum', style={'color': GOLD})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Material", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("0", id='gs-material', style={'color': '#888'})
+                    ], style={'marginBottom': '8px'}),
+                    html.Div([
+                        html.Span("Phase", style={'color': '#555', 'width': '70px', 'display': 'inline-block'}),
+                        html.Span("Opening", id='gs-phase', style={'color': '#888'})
+                    ]),
+                ], style={'fontFamily': 'monospace', 'fontSize': '12px'})
+            ], style=PANEL_STYLE),
+            
+        ], style={'flex': '0 0 220px', 'padding': '0 15px 0 0'}),
+        
+        # MIDDLE COLUMN - 3D Chess Board
+        html.Div([
+            dcc.Graph(id='chess-3d', figure=create_figure(chess.Board()), 
+                      config={'displayModeBar': True, 'scrollZoom': True, 
+                             'modeBarButtonsToRemove': ['toImage', 'sendDataToCloud']},
+                      style={'height': '580px'}),
+            # Move buttons (when HOLD)
+            html.Div(id='move-buttons', style={'textAlign': 'center', 'padding': '10px'})
+        ], style={'flex': '1', 'minWidth': '450px'}),
+        
+        # RIGHT COLUMN - Cascade Panel
+        html.Div([
+            # Cascade Trace Panel
+            html.Div([
+                html.Div([
+                    html.Span("◈ ", style={'color': CYAN}),
+                    html.Span("CAUSATION TRACE", style={'color': '#888'})
+                ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '12px',
+                         'borderBottom': f'1px solid {CYAN}33', 'paddingBottom': '8px'}),
+                
+                html.Div(id='cascade-trace', children=[
+                    html.Div("Waiting for move...", style={'color': '#444', 'fontStyle': 'italic', 
+                                                          'padding': '20px', 'textAlign': 'center'})
+                ])
+            ], style={**PANEL_STYLE, 'marginBottom': '15px'}),
+            
+            # Decision Tree Panel
+            html.Div([
+                html.Div([
+                    html.Span("◈ ", style={'color': GOLD}),
+                    html.Span("DECISION TREE", style={'color': '#888'})
+                ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '12px',
+                         'borderBottom': f'1px solid {GOLD}33', 'paddingBottom': '8px'}),
+                
+                html.Div(id='decision-tree', children=[
+                    html.Div("No candidates yet", style={'color': '#444', 'fontStyle': 'italic',
+                                                         'padding': '20px', 'textAlign': 'center'})
+                ])
+            ], style={**PANEL_STYLE, 'marginBottom': '15px'}),
+            
+            # Metrics Panel
+            html.Div([
+                html.Div([
+                    html.Span("◈ ", style={'color': MAGENTA}),
+                    html.Span("METRICS", style={'color': '#888'})
+                ], style={'fontFamily': 'monospace', 'fontSize': '14px', 'marginBottom': '12px',
+                         'borderBottom': f'1px solid {MAGENTA}33', 'paddingBottom': '8px'}),
+                
+                html.Div(id='metrics-panel', children=[
+                    html.Div([
+                        html.Span("Total Latency: ", style={'color': '#555'}),
+                        html.Span("--ms", id='metric-latency', style={'color': CYAN})
+                    ], style={'marginBottom': '5px'}),
+                    html.Div([
+                        html.Span("Candidates: ", style={'color': '#555'}),
+                        html.Span("0", id='metric-candidates', style={'color': GOLD})
+                    ], style={'marginBottom': '5px'}),
+                    html.Div([
+                        html.Span("Confidence: ", style={'color': '#555'}),
+                        html.Span("--%", id='metric-confidence', style={'color': MAGENTA})
+                    ]),
+                ], style={'fontFamily': 'monospace', 'fontSize': '13px'})
+            ], style=PANEL_STYLE),
+            
+        ], style={'flex': '1', 'minWidth': '350px', 'maxWidth': '450px', 'padding': '0 15px'}),
+        
+    ], style={'display': 'flex', 'padding': '20px', 'gap': '10px', 'alignItems': 'flex-start'}),
+    
+    # Hidden stores
+    dcc.Store(id='board-fen', data=chess.STARTING_FEN),
+    dcc.Store(id='candidates-store', data=[]),
+    dcc.Store(id='trace-store', data=[]),
+    dcc.Store(id='decision-store', data=[]),
+    dcc.Store(id='is-held', data=False),
+    dcc.Store(id='auto-play', data=False),
+    dcc.Store(id='move-history', data=[]),
+    dcc.Store(id='camera-store', data=None),  # Stores user's camera position
+    
+    # Auto-play interval
+    dcc.Interval(id='auto-interval', interval=1200, disabled=True),
+    
+], style={'backgroundColor': BG_COLOR, 'minHeight': '100vh', 'padding': '0'})
+
+@callback(
+    Output('board-fen', 'data'),
+    Output('candidates-store', 'data'),
+    Output('trace-store', 'data'),
+    Output('decision-store', 'data'),
+    Output('is-held', 'data'),
+    Output('move-history', 'data'),
+    Output('auto-play', 'data'),
+    Input('btn-step', 'n_clicks'),
+    Input('btn-hold', 'n_clicks'),
+    Input('btn-reset', 'n_clicks'),
+    Input('btn-auto', 'n_clicks'),
+    Input('auto-interval', 'n_intervals'),
+    State('board-fen', 'data'),
+    State('candidates-store', 'data'),
+    State('is-held', 'data'),
+    State('move-history', 'data'),
+    State('auto-play', 'data'),
+    prevent_initial_call=True
+)
+def handle_controls(step, hold, reset, auto, interval, fen, candidates, is_held, history, auto_play):
+    ctx = dash.callback_context
+    if not ctx.triggered:
+        return fen, candidates, [], [], is_held, history, auto_play
+    
+    trigger = ctx.triggered[0]['prop_id'].split('.')[0]
+    board = chess.Board(fen)
+    
+    if trigger == 'btn-reset':
+        return chess.STARTING_FEN, [], [], [], False, [], False
+    
+    if trigger == 'btn-auto':
+        return fen, [], [], [], False, history, not auto_play  # Toggle auto
+    
+    if trigger == 'btn-hold':
+        if not is_held:
+            cands, trace, decision = get_candidates_with_trace(board)
+            return fen, [c.__dict__ for c in cands], trace, decision, True, history, False
+        else:
+            return fen, [], [], [], False, history, auto_play
+    
+    if trigger in ['btn-step', 'auto-interval']:
+        if board.is_game_over():
+            return fen, [], [], [], False, history, False
+        
+        cands, trace, decision = get_candidates_with_trace(board)
+        if cands:
+            move = chess.Move.from_uci(cands[0].move)
+            board.push(move)
+            history = history + [cands[0].move]
+        return board.fen(), [], trace, decision, False, history, auto_play
+    
+    return fen, candidates, [], [], is_held, history, auto_play
+
+@callback(
+    Output('chess-3d', 'figure'),
+    Output('loading-output', 'children'),
+    Input('board-fen', 'data'),
+    Input('candidates-store', 'data'),
+    State('chess-3d', 'figure')  # Read current figure to get its camera
+)
+def update_figure(fen, candidates_data, current_fig):
+    board = chess.Board(fen)
+    candidates = [MoveCandidate(**c) for c in candidates_data] if candidates_data else None
+    
+    # Extract camera from current figure if it exists
+    camera = None
+    if current_fig and 'layout' in current_fig:
+        scene = current_fig['layout'].get('scene', {})
+        if 'camera' in scene:
+            camera = scene['camera']
+    
+    return create_figure(board, candidates, camera), ""
+
+@callback(
+    Output('btn-hold', 'children'),
+    Output('btn-hold', 'style'),
+    Input('is-held', 'data')
+)
+def update_hold_button(is_held):
+    if is_held:
+        return "◉ HOLDING", {**BUTTON_BASE, 'color': '#000', 'backgroundColor': GOLD, 
+                             'border': f'2px solid {GOLD}', 'fontWeight': 'bold'}
+    else:
+        return "⏸ HOLD", {**BUTTON_BASE, 'color': GOLD, 'border': f'1px solid {GOLD}'}
+
+@callback(
+    Output('status', 'children'),
+    Input('board-fen', 'data'),
+    Input('is-held', 'data'),
+    Input('auto-play', 'data'),
+    Input('move-history', 'data')
+)
+def update_status(fen, is_held, auto_play, history):
+    board = chess.Board(fen)
+    
+    if board.is_game_over():
+        result = board.result()
+        return f"GAME OVER: {result}"
+    
+    turn = "WHITE" if board.turn else "BLACK"
+    mode = "◉ HOLD ACTIVE - Select a move" if is_held else ("▶▶ AUTO" if auto_play else "MANUAL")
+    return f"Move {board.fullmove_number} | {turn} | {mode}"
+
+@callback(
+    Output('auto-interval', 'disabled'),
+    Input('auto-play', 'data')
+)
+def toggle_auto(auto_play):
+    return not auto_play
+
+@callback(
+    Output('gs-turn', 'children'),
+    Output('gs-turn', 'style'),
+    Output('gs-movenum', 'children'),
+    Output('gs-material', 'children'),
+    Output('gs-material', 'style'),
+    Output('gs-phase', 'children'),
+    Input('board-fen', 'data')
+)
+def update_game_state(fen):
+    board = chess.Board(fen)
+    
+    # Turn
+    turn_text = "White" if board.turn else "Black"
+    turn_style = {'color': '#FFF'} if board.turn else {'color': '#888'}
+    
+    # Move number
+    move_num = str(board.fullmove_number)
+    
+    # Material count (simple piece values)
+    piece_values = {chess.PAWN: 1, chess.KNIGHT: 3, chess.BISHOP: 3, 
+                    chess.ROOK: 5, chess.QUEEN: 9, chess.KING: 0}
+    white_material = sum(piece_values.get(p.piece_type, 0) 
+                        for p in board.piece_map().values() if p.color == chess.WHITE)
+    black_material = sum(piece_values.get(p.piece_type, 0) 
+                        for p in board.piece_map().values() if p.color == chess.BLACK)
+    diff = white_material - black_material
+    if diff > 0:
+        mat_text = f"+{diff} ⚪"
+        mat_style = {'color': '#0F0'}
+    elif diff < 0:
+        mat_text = f"{diff} ⚫"
+        mat_style = {'color': CRIMSON}
+    else:
+        mat_text = "Equal"
+        mat_style = {'color': '#888'}
+    
+    # Game phase (rough estimate)
+    total_pieces = len(board.piece_map())
+    if total_pieces >= 28:
+        phase = "Opening"
+    elif total_pieces >= 14:
+        phase = "Middlegame"
+    else:
+        phase = "Endgame"
+    
+    if board.is_check():
+        phase = "⚠ CHECK"
+    if board.is_game_over():
+        phase = "Game Over"
+    
+    return turn_text, turn_style, move_num, mat_text, mat_style, phase
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# CASCADE PANEL CALLBACKS
+# ═══════════════════════════════════════════════════════════════════════════════
+
+@callback(
+    Output('cascade-trace', 'children'),
+    Input('trace-store', 'data')
+)
+def render_trace(trace_data):
+    if not trace_data:
+        return html.Div("Waiting for move...", 
+                       style={'color': '#444', 'fontStyle': 'italic', 'padding': '20px', 'textAlign': 'center'})
+    
+    rows = []
+    for t in trace_data:
+        # Color code by operation type
+        op_colors = {'ENCODE': CYAN, 'ANALYZE': '#888', 'SCORE': GOLD, 'HOLD': MAGENTA, 'SELECT': '#0F0'}
+        op_color = op_colors.get(t['op'], '#666')
+        
+        # Confidence bar
+        conf_pct = t['confidence'] * 100
+        
+        row = html.Div([
+            # Step number
+            html.Span(f"{t['step']}", style={'color': '#444', 'width': '20px', 'marginRight': '10px'}),
+            # Operation badge
+            html.Span(t['op'], style={
+                'backgroundColor': f'{op_color}22', 'color': op_color,
+                'padding': '2px 8px', 'borderRadius': '3px', 'fontSize': '10px',
+                'fontWeight': 'bold', 'width': '60px', 'textAlign': 'center', 'marginRight': '10px'
+            }),
+            # Detail
+            html.Span(t['detail'], style={'color': '#888', 'flex': '1', 'fontSize': '11px'}),
+            # Duration
+            html.Span(f"{t['duration']}ms", style={'color': '#555', 'width': '60px', 'textAlign': 'right'}),
+        ], style={**TRACE_ROW_STYLE})
+        rows.append(row)
+    
+    # Total latency
+    total = sum(t['duration'] for t in trace_data)
+    rows.append(html.Div([
+        html.Span("", style={'width': '90px'}),
+        html.Span("TOTAL", style={'color': CYAN, 'fontWeight': 'bold', 'flex': '1'}),
+        html.Span(f"{total:.1f}ms", style={'color': CYAN, 'fontWeight': 'bold', 'width': '60px', 'textAlign': 'right'})
+    ], style={**TRACE_ROW_STYLE, 'borderBottom': 'none', 'backgroundColor': '#0a0a0f'}))
+    
+    return rows
+
+@callback(
+    Output('decision-tree', 'children'),
+    Input('decision-store', 'data')
+)
+def render_decision_tree(decision_data):
+    if not decision_data:
+        return html.Div("No candidates yet", 
+                       style={'color': '#444', 'fontStyle': 'italic', 'padding': '20px', 'textAlign': 'center'})
+    
+    rows = []
+    for d in decision_data:
+        is_selected = d.get('selected', False)
+        bg_color = f'{CYAN}15' if is_selected else 'transparent'
+        border_left = f'3px solid {CYAN}' if is_selected else '3px solid transparent'
+        
+        # Probability bar
+        prob_pct = d['prob'] * 100
+        
+        row = html.Div([
+            # Rank
+            html.Span(f"#{d['rank']}", style={
+                'color': CYAN if is_selected else '#555', 
+                'width': '30px', 'fontWeight': 'bold' if is_selected else 'normal'
+            }),
+            # Move
+            html.Span(d['move'], style={
+                'color': '#FFF' if is_selected else '#888',
+                'fontWeight': 'bold', 'width': '55px', 'fontFamily': 'monospace'
+            }),
+            # Eval
+            html.Span(d['eval'], style={
+                'color': GOLD if 'M' in str(d['eval']) else ('#0F0' if d['eval'][0] == '+' else CRIMSON),
+                'width': '55px', 'textAlign': 'right'
+            }),
+            # Probability bar
+            html.Div([
+                html.Div(style={
+                    'width': f'{prob_pct}%', 'height': '8px',
+                    'backgroundColor': CYAN if is_selected else '#333',
+                    'borderRadius': '2px'
+                })
+            ], style={'flex': '1', 'backgroundColor': '#1a1a2e', 'borderRadius': '2px', 'marginLeft': '10px'}),
+            # Percentage
+            html.Span(f"{prob_pct:.0f}%", style={'color': '#666', 'width': '40px', 'textAlign': 'right', 'marginLeft': '8px'}),
+            # Flags
+            html.Span(
+                ("⚔" if d.get('capture') else "") + ("♚" if d.get('check') else ""),
+                style={'color': CRIMSON, 'width': '25px', 'textAlign': 'right'}
+            )
+        ], style={
+            'display': 'flex', 'alignItems': 'center', 'padding': '8px 10px',
+            'backgroundColor': bg_color, 'borderLeft': border_left,
+            'marginBottom': '4px', 'borderRadius': '3px',
+            'fontFamily': 'monospace', 'fontSize': '12px'
+        })
+        rows.append(row)
+    
+    return rows
+
+@callback(
+    Output('metric-latency', 'children'),
+    Output('metric-candidates', 'children'),
+    Output('metric-confidence', 'children'),
+    Input('trace-store', 'data'),
+    Input('decision-store', 'data')
+)
+def update_metrics(trace_data, decision_data):
+    if not trace_data:
+        return "--ms", "0", "--%"
+    
+    total_latency = sum(t['duration'] for t in trace_data)
+    num_candidates = len(decision_data) if decision_data else 0
+    confidence = decision_data[0]['prob'] * 100 if decision_data else 0
+    
+    return f"{total_latency:.1f}ms", str(num_candidates), f"{confidence:.0f}%"
+
+@callback(
+    Output('move-buttons', 'children'),
+    Input('candidates-store', 'data'),
+    Input('is-held', 'data')
+)
+def show_move_buttons(candidates_data, is_held):
+    if not is_held or not candidates_data:
+        return []
+    
+    # Get whose turn it is from the current board state (we'll need this for styling)
+    buttons = []
+    for i, c in enumerate(candidates_data):
+        prob_pct = c['prob'] * 100
+        is_top = i == 0
+        
+        btn_style = {
+            'margin': '5px', 'padding': '10px 20px', 'fontSize': '13px',
+            'fontFamily': 'monospace', 'borderRadius': '4px', 'cursor': 'pointer',
+            'backgroundColor': '#1a1a2e' if not is_top else f'{CYAN}22',
+            'color': CYAN if is_top else '#888',
+            'border': f'1px solid {CYAN}' if is_top else '1px solid #333'
+        }
+        
+        btn = html.Button(
+            f"{c['move']} ({prob_pct:.0f}%)",
+            id={'type': 'move-btn', 'index': i},
+            style=btn_style
+        )
+        buttons.append(btn)
+    return buttons
+
+# Move selection callback
+@callback(
+    Output('board-fen', 'data', allow_duplicate=True),
+    Output('candidates-store', 'data', allow_duplicate=True),
+    Output('trace-store', 'data', allow_duplicate=True),
+    Output('decision-store', 'data', allow_duplicate=True),
+    Output('is-held', 'data', allow_duplicate=True),
+    Output('move-history', 'data', allow_duplicate=True),
+    Input({'type': 'move-btn', 'index': dash.ALL}, 'n_clicks'),
+    State('board-fen', 'data'),
+    State('candidates-store', 'data'),
+    State('trace-store', 'data'),
+    State('decision-store', 'data'),
+    State('move-history', 'data'),
+    prevent_initial_call=True
+)
+def select_move(clicks, fen, candidates_data, trace_data, decision_data, history):
+    ctx = dash.callback_context
+    
+    # Only proceed if an actual button was clicked
+    if not ctx.triggered:
+        raise dash.exceptions.PreventUpdate
+    
+    # Check if any click actually happened (not just initialization)
+    if not clicks or not any(c for c in clicks if c):
+        raise dash.exceptions.PreventUpdate
+    
+    # Find which button was clicked
+    triggered_id = ctx.triggered[0]['prop_id']
+    if triggered_id == '.':
+        raise dash.exceptions.PreventUpdate
+        
+    import json
+    try:
+        idx = json.loads(triggered_id.split('.')[0])['index']
+    except:
+        raise dash.exceptions.PreventUpdate
+    
+    board = chess.Board(fen)
+    if candidates_data and idx < len(candidates_data):
+        move_uci = candidates_data[idx]['move']
+        move = chess.Move.from_uci(move_uci)
+        board.push(move)
+        history = history + [move_uci]
+    
+    # Return with trace/decision preserved for display
+    return board.fen(), [], trace_data, decision_data, False, history
+
+if __name__ == '__main__':
+    print("\n" + "="*50)
+    print("CASCADE-LATTICE Chess")
+    print("="*50)
+    print("Open: http://127.0.0.1:8050")
+    print("="*50 + "\n")
+    # Note: debug=False to avoid Python 3.13 socket issues on Windows
+    app.run(debug=False, port=8050)

src/assets/chess3d.html

@@ -17,10 +17,45 @@
             font-size: 11px;
             pointer-events: none;
         }
+        #piece-tooltip {
+            position: absolute;
+            background: rgba(15, 15, 20, 0.92);
+            border: 1px solid #506070;
+            border-radius: 6px;
+            padding: 8px 12px;
+            color: #ccc;
+            font-size: 11px;
+            pointer-events: none;
+            display: none;
+            max-width: 200px;
+            z-index: 1000;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        }
+        #piece-tooltip .piece-name {
+            color: #A0A0A0;
+            font-weight: bold;
+            font-size: 13px;
+            margin-bottom: 5px;
+        }
+        #piece-tooltip .move-count {
+            color: #B09040;
+        }
+        #piece-tooltip .special {
+            color: #906070;
+            font-style: italic;
+            margin-top: 4px;
+        }
     </style>
 </head>
 <body>
-    <div id="info">Drag to rotate • Scroll to zoom</div>
+    <div id="info">Drag to rotate • Scroll to zoom • Hover pieces for legal moves</div>
+    <div id="piece-tooltip"></div>
+    <div id="replay-overlay" style="display:none; position:absolute; top:15px; right:15px; background:rgba(10,10,20,0.9); border:2px solid #505060; border-radius:8px; padding:12px 18px; color:#ccc; font-family:monospace; z-index:1000; min-width:160px;">
+        <div style="color:#D08030; font-weight:bold; font-size:13px; margin-bottom:8px; border-bottom:1px solid #404050; padding-bottom:6px;">🎬 REPLAY</div>
+        <div id="replay-move" style="font-size:22px; color:#80B0C0; font-weight:bold; margin-bottom:6px;">e2e4</div>
+        <div id="replay-counter" style="font-size:12px; color:#888;">Move 1 / 8</div>
+        <div id="replay-progress" style="margin-top:8px; height:4px; background:#303040; border-radius:2px; overflow:hidden;"><div id="replay-bar" style="height:100%; background:#D08030; width:0%; transition:width 0.3s;"></div></div>
+    </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
     <script>
@@ -29,17 +64,39 @@
         // ═══════════════════════════════════════════════════════════════
         
         let scene, camera, renderer, controls;
-        let boardGroup, piecesGroup, arcsGroup;
+        let boardGroup, piecesGroup, arcsGroup, highlightGroup;
+        let raycaster, mouse;
+        let hoveredPiece = null;
+        let currentFEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
         
-        // Colors
-        const BOARD_LIGHT = 0xD4A574;
-        const BOARD_DARK = 0x8B5A2B;
-        const BOARD_EDGE = 0x4A3520;
-        const WHITE_PIECE = 0xFFFEF0;
-        const BLACK_PIECE = 0x2A2A2A;
-        const GOLD = 0xFFD700;
-        const CYAN = 0x00FFD4;
-        const MAGENTA = 0xFF00AA;
+        // ═══════════════════════════════════════════════════════════════
+        // CINEMATIC CAMERA SYSTEM
+        // ═══════════════════════════════════════════════════════════════
+        let cinematicMode = false;
+        let cinematicTarget = { x: 0, y: 0, z: 0 };
+        let cinematicCameraPos = { x: 6, y: -10, z: 8 };
+        let cameraAnimating = false;
+        let cinematicStartTime = 0;
+        let cinematicDuration = 1500; // ms for camera sweep
+        let cameraStartPos = { x: 0, y: 0, z: 0 };
+        let cameraEndPos = { x: 0, y: 0, z: 0 };
+        let targetStart = { x: 0, y: 0, z: 0 };
+        let targetEnd = { x: 0, y: 0, z: 0 };
+        let lastMoveFrom = null;
+        let lastMoveTo = null;
+        
+        // Piece data storage for hover detection
+        const pieceMap = new Map(); // Maps piece mesh to {type, square, isWhite}
+        
+        // Colors - SOLID MUTED PALETTE (no neon)
+        const BOARD_LIGHT = 0xC4A060;  // Warm oak
+        const BOARD_DARK = 0x6B4423;   // Dark walnut
+        const BOARD_EDGE = 0x3A2510;   // Dark wood frame
+        const WHITE_PIECE = 0xE8E0D0;  // Warm ivory
+        const BLACK_PIECE = 0x252525;  // Charcoal
+        const GOLD = 0xB08020;         // Muted bronze/gold
+        const CYAN = 0x306080;         // Steel blue
+        const MAGENTA = 0x803050;      // Burgundy
         const BG_COLOR = 0x0a0a0f;
         
         // Piece heights
@@ -79,7 +136,7 @@
             dirLight.position.set(5, 5, 10);
             scene.add(dirLight);
             
-            const rimLight = new THREE.DirectionalLight(0x4488ff, 0.3);
+            const rimLight = new THREE.DirectionalLight(0x405570, 0.3);
             rimLight.position.set(-5, -5, 5);
             scene.add(rimLight);
             
@@ -87,9 +144,15 @@
             boardGroup = new THREE.Group();
             piecesGroup = new THREE.Group();
             arcsGroup = new THREE.Group();
+            highlightGroup = new THREE.Group();
             scene.add(boardGroup);
             scene.add(piecesGroup);
             scene.add(arcsGroup);
+            scene.add(highlightGroup);
+            
+            // Raycaster for hover detection
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
             
             // Create board
             createBoard();
@@ -103,6 +166,9 @@
             // Listen for messages from Dash
             window.addEventListener('message', handleMessage);
             
+            // Mouse move for hover detection
+            window.addEventListener('mousemove', onMouseMove);
+            
             animate();
         }
         
@@ -239,12 +305,12 @@
                 group.add(ball);
             }
             
-            // Add glow ring at base for style
+            // Add glow ring at base for style - MUTED COLORS
             const glowGeo = new THREE.RingGeometry(0.35, 0.45, 32);
             const glowMat = new THREE.MeshBasicMaterial({ 
-                color: isWhite ? 0x4488ff : 0xff4488,
+                color: isWhite ? 0x405060 : 0x604050,
                 transparent: true,
-                opacity: 0.3,
+                opacity: 0.25,
                 side: THREE.DoubleSide
             });
             const glow = new THREE.Mesh(glowGeo, glowMat);
@@ -253,6 +319,17 @@
             group.add(glow);
             
             group.position.set(x - 3.5, y - 3.5, 0);
+            
+            // Store piece data for hover detection
+            const square = y * 8 + x;
+            group.userData = {
+                type: type.toLowerCase(),
+                isWhite: isWhite,
+                square: square,
+                file: x,
+                rank: y
+            };
+            
             return group;
         }
         
@@ -280,14 +357,14 @@
             const thickness = isSelected ? (0.08 + prob * 0.06) : (0.03 + prob * 0.05);
             const tubeGeo = new THREE.TubeGeometry(curve, 20, thickness, 8, false);
             
-            // Color selection: selected gets bright white/cyan glow
+            // Color selection - SOLID MUTED COLORS
             let color;
             if (isSelected) {
-                color = 0xFFFFFF;  // Bright white for selected
+                color = 0xE0E0E0;  // Off-white for selected
             } else if (isHuman) {
-                color = 0x00FF88;  // Bright green for human moves
+                color = 0x2D5A3D;  // Forest green for human moves
             } else if (isBlack) {
-                color = isCapture ? 0xff2222 : (prob > 0.3 ? 0xff6600 : 0xff4488);
+                color = isCapture ? 0x8B2020 : (prob > 0.3 ? 0xA05020 : 0x704050);
             } else {
                 color = isCapture ? MAGENTA : (prob > 0.3 ? GOLD : CYAN);
             }
@@ -342,12 +419,373 @@
             
             if (data.type === 'update') {
                 if (data.fen) {
+                    currentFEN = data.fen;
                     updateFromFEN(data.fen);
                 }
                 if (data.candidates !== undefined) {
                     updateCandidates(data.candidates);
                 }
             }
+            
+            // ═══════════════════════════════════════════════════════════════
+            // REPLAY OVERLAY - No camera movement, just show progress
+            // ═══════════════════════════════════════════════════════════════
+            if (data.type === 'cinematic_start') {
+                // Show replay overlay
+                const overlay = document.getElementById('replay-overlay');
+                if (overlay) overlay.style.display = 'block';
+                console.log('[REPLAY] Started');
+            }
+            
+            if (data.type === 'cinematic_stop') {
+                // Hide replay overlay
+                const overlay = document.getElementById('replay-overlay');
+                if (overlay) overlay.style.display = 'none';
+                console.log('[REPLAY] Stopped');
+            }
+            
+            if (data.type === 'cinematic_move') {
+                // Update replay overlay - NO camera movement
+                const moveNum = data.move_num || 1;
+                const totalMoves = data.total_moves || 1;
+                const moveName = data.move_name || '?';
+                const isCapture = data.is_capture || false;
+                const isCheck = data.is_check || false;
+                
+                // Update overlay display
+                const moveEl = document.getElementById('replay-move');
+                const counterEl = document.getElementById('replay-counter');
+                const barEl = document.getElementById('replay-bar');
+                
+                if (moveEl) {
+                    // Style based on move type
+                    let moveColor = '#80B0C0';  // Normal move
+                    let prefix = '';
+                    if (isCapture) { moveColor = '#C06060'; prefix = '⚔ '; }
+                    if (isCheck) { moveColor = '#D0A030'; prefix = '♚ '; }
+                    moveEl.textContent = prefix + moveName;
+                    moveEl.style.color = moveColor;
+                }
+                if (counterEl) {
+                    counterEl.textContent = `Move ${moveNum} / ${totalMoves}`;
+                }
+                if (barEl) {
+                    barEl.style.width = `${(moveNum / totalMoves) * 100}%`;
+                }
+                
+                console.log(`[REPLAY] Move ${moveNum}/${totalMoves}: ${moveName}`);
+            }
+        }
+        
+        // ═══════════════════════════════════════════════════════════════
+        // SMOOTH CAMERA ANIMATION
+        // ═══════════════════════════════════════════════════════════════
+        function animateCameraTo(x, y, z, targetX, targetY, targetZ, duration) {
+            cameraStartPos = { 
+                x: camera.position.x, 
+                y: camera.position.y, 
+                z: camera.position.z 
+            };
+            cameraEndPos = { x, y, z };
+            targetStart = { 
+                x: controls.target.x, 
+                y: controls.target.y, 
+                z: controls.target.z 
+            };
+            targetEnd = { x: targetX, y: targetY, z: targetZ };
+            cinematicStartTime = performance.now();
+            cinematicDuration = duration;
+            cameraAnimating = true;
+        }
+        
+        function updateCinematicCamera() {
+            if (!cameraAnimating) return;
+            
+            const elapsed = performance.now() - cinematicStartTime;
+            const progress = Math.min(elapsed / cinematicDuration, 1);
+            
+            // Smooth easing (ease-in-out cubic)
+            const ease = progress < 0.5 
+                ? 4 * progress * progress * progress 
+                : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+            
+            // Interpolate camera position
+            camera.position.x = cameraStartPos.x + (cameraEndPos.x - cameraStartPos.x) * ease;
+            camera.position.y = cameraStartPos.y + (cameraEndPos.y - cameraStartPos.y) * ease;
+            camera.position.z = cameraStartPos.z + (cameraEndPos.z - cameraStartPos.z) * ease;
+            
+            // Interpolate target
+            controls.target.x = targetStart.x + (targetEnd.x - targetStart.x) * ease;
+            controls.target.y = targetStart.y + (targetEnd.y - targetStart.y) * ease;
+            controls.target.z = targetStart.z + (targetEnd.z - targetStart.z) * ease;
+            
+            camera.lookAt(controls.target);
+            
+            if (progress >= 1) {
+                cameraAnimating = false;
+            }
+        }
+        
+        // Chess move generation helper
+        function getLegalMoves(pieceData) {
+            const { type, isWhite, file, rank } = pieceData;
+            const moves = [];
+            const pieceNames = {
+                'p': 'Pawn', 'n': 'Knight', 'b': 'Bishop',
+                'r': 'Rook', 'q': 'Queen', 'k': 'King'
+            };
+            const name = pieceNames[type] || 'Piece';
+            const colorName = isWhite ? 'White' : 'Black';
+            let specialInfo = [];
+            
+            // Parse FEN to get board state
+            const fenParts = currentFEN.split(' ');
+            const position = fenParts[0];
+            const turn = fenParts[1] === 'w';
+            const castling = fenParts[2] || '-';
+            const enPassant = fenParts[3] || '-';
+            
+            // Build board array from FEN
+            const board = [];
+            const rows = position.split('/');
+            for (let r = 7; r >= 0; r--) {
+                const row = [];
+                for (const char of rows[7 - r]) {
+                    if (char >= '1' && char <= '8') {
+                        for (let i = 0; i < parseInt(char); i++) row.push(null);
+                    } else {
+                        row.push({ type: char.toLowerCase(), isWhite: char === char.toUpperCase() });
+                    }
+                }
+                board[r] = row;
+            }
+            
+            const isBlocked = (f, r) => f < 0 || f > 7 || r < 0 || r > 7 || board[r]?.[f] !== null;
+            const isEnemy = (f, r) => f >= 0 && f <= 7 && r >= 0 && r <= 7 && 
+                                     board[r]?.[f] !== null && board[r][f].isWhite !== isWhite;
+            const isEmpty = (f, r) => f >= 0 && f <= 7 && r >= 0 && r <= 7 && board[r]?.[f] === null;
+            
+            if (type === 'p') {
+                // Pawn moves
+                const dir = isWhite ? 1 : -1;
+                const startRank = isWhite ? 1 : 6;
+                const promoRank = isWhite ? 7 : 0;
+                
+                // Forward one
+                if (isEmpty(file, rank + dir)) {
+                    moves.push({ file: file, rank: rank + dir, capture: false });
+                    // Forward two from start
+                    if (rank === startRank && isEmpty(file, rank + dir * 2)) {
+                        moves.push({ file: file, rank: rank + dir * 2, capture: false });
+                        specialInfo.push("Can move 2 squares (first move)");
+                    }
+                }
+                
+                // Diagonal captures
+                for (const df of [-1, 1]) {
+                    if (isEnemy(file + df, rank + dir)) {
+                        moves.push({ file: file + df, rank: rank + dir, capture: true });
+                    }
+                }
+                
+                // En passant
+                if (enPassant !== '-') {
+                    const epFile = enPassant.charCodeAt(0) - 97;
+                    const epRank = parseInt(enPassant[1]) - 1;
+                    if (Math.abs(epFile - file) === 1 && epRank === rank + dir) {
+                        moves.push({ file: epFile, rank: epRank, capture: true, enPassant: true });
+                        specialInfo.push("En passant available!");
+                    }
+                }
+                
+                // Promotion check
+                if (rank + dir === promoRank && moves.some(m => m.rank === promoRank)) {
+                    specialInfo.push("Promotes to Q/R/B/N on next rank");
+                }
+                
+            } else if (type === 'n') {
+                // Knight moves
+                const knightMoves = [[-2,-1],[-2,1],[-1,-2],[-1,2],[1,-2],[1,2],[2,-1],[2,1]];
+                for (const [df, dr] of knightMoves) {
+                    const nf = file + df, nr = rank + dr;
+                    if (nf >= 0 && nf <= 7 && nr >= 0 && nr <= 7) {
+                        if (isEmpty(nf, nr) || isEnemy(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: isEnemy(nf, nr) });
+                        }
+                    }
+                }
+                
+            } else if (type === 'b') {
+                // Bishop moves (diagonals)
+                for (const [df, dr] of [[1,1],[1,-1],[-1,1],[-1,-1]]) {
+                    for (let i = 1; i < 8; i++) {
+                        const nf = file + df * i, nr = rank + dr * i;
+                        if (nf < 0 || nf > 7 || nr < 0 || nr > 7) break;
+                        if (isEmpty(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: false });
+                        } else if (isEnemy(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: true });
+                            break;
+                        } else break;
+                    }
+                }
+                
+            } else if (type === 'r') {
+                // Rook moves (straight lines)
+                for (const [df, dr] of [[1,0],[-1,0],[0,1],[0,-1]]) {
+                    for (let i = 1; i < 8; i++) {
+                        const nf = file + df * i, nr = rank + dr * i;
+                        if (nf < 0 || nf > 7 || nr < 0 || nr > 7) break;
+                        if (isEmpty(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: false });
+                        } else if (isEnemy(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: true });
+                            break;
+                        } else break;
+                    }
+                }
+                
+            } else if (type === 'q') {
+                // Queen moves (diagonals + straight)
+                for (const [df, dr] of [[1,1],[1,-1],[-1,1],[-1,-1],[1,0],[-1,0],[0,1],[0,-1]]) {
+                    for (let i = 1; i < 8; i++) {
+                        const nf = file + df * i, nr = rank + dr * i;
+                        if (nf < 0 || nf > 7 || nr < 0 || nr > 7) break;
+                        if (isEmpty(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: false });
+                        } else if (isEnemy(nf, nr)) {
+                            moves.push({ file: nf, rank: nr, capture: true });
+                            break;
+                        } else break;
+                    }
+                }
+                
+            } else if (type === 'k') {
+                // King moves
+                for (let df = -1; df <= 1; df++) {
+                    for (let dr = -1; dr <= 1; dr++) {
+                        if (df === 0 && dr === 0) continue;
+                        const nf = file + df, nr = rank + dr;
+                        if (nf >= 0 && nf <= 7 && nr >= 0 && nr <= 7) {
+                            if (isEmpty(nf, nr) || isEnemy(nf, nr)) {
+                                moves.push({ file: nf, rank: nr, capture: isEnemy(nf, nr) });
+                            }
+                        }
+                    }
+                }
+                
+                // Castling
+                if (isWhite && castling.includes('K') && isEmpty(5, 0) && isEmpty(6, 0)) {
+                    moves.push({ file: 6, rank: 0, capture: false, castle: 'kingside' });
+                    specialInfo.push("Kingside castle available (O-O)");
+                }
+                if (isWhite && castling.includes('Q') && isEmpty(1, 0) && isEmpty(2, 0) && isEmpty(3, 0)) {
+                    moves.push({ file: 2, rank: 0, capture: false, castle: 'queenside' });
+                    specialInfo.push("Queenside castle available (O-O-O)");
+                }
+                if (!isWhite && castling.includes('k') && isEmpty(5, 7) && isEmpty(6, 7)) {
+                    moves.push({ file: 6, rank: 7, capture: false, castle: 'kingside' });
+                    specialInfo.push("Kingside castle available (O-O)");
+                }
+                if (!isWhite && castling.includes('q') && isEmpty(1, 7) && isEmpty(2, 7) && isEmpty(3, 7)) {
+                    moves.push({ file: 2, rank: 7, capture: false, castle: 'queenside' });
+                    specialInfo.push("Queenside castle available (O-O-O)");
+                }
+            }
+            
+            return { name, colorName, moves, specialInfo };
+        }
+        
+        function createHighlightSquare(file, rank, isCapture, isSpecial) {
+            const geo = new THREE.RingGeometry(0.35, 0.45, 32);
+            const color = isCapture ? 0xA03070 : (isSpecial ? 0xD4A020 : 0x2090B0);
+            const mat = new THREE.MeshBasicMaterial({ 
+                color: color,
+                transparent: true,
+                opacity: 0.7,
+                side: THREE.DoubleSide
+            });
+            const ring = new THREE.Mesh(geo, mat);
+            ring.position.set(file - 3.5, rank - 3.5, 0.02);
+            return ring;
+        }
+        
+        function showLegalMoves(pieceData) {
+            // Clear existing highlights
+            while (highlightGroup.children.length) highlightGroup.remove(highlightGroup.children[0]);
+            
+            const { name, colorName, moves, specialInfo } = getLegalMoves(pieceData);
+            
+            // Create highlight rings for each legal move
+            for (const move of moves) {
+                const highlight = createHighlightSquare(
+                    move.file, 
+                    move.rank, 
+                    move.capture,
+                    move.castle || move.enPassant
+                );
+                highlightGroup.add(highlight);
+            }
+            
+            // Update tooltip
+            const tooltip = document.getElementById('piece-tooltip');
+            const captures = moves.filter(m => m.capture).length;
+            const quietMoves = moves.filter(m => !m.capture).length;
+            
+            let html = `<div class="piece-name">${colorName} ${name}</div>`;
+            html += `<div class="move-count">${moves.length} legal moves</div>`;
+            if (quietMoves > 0) html += `<div>• ${quietMoves} quiet moves</div>`;
+            if (captures > 0) html += `<div style="color:#906070">• ${captures} captures</div>`;
+            for (const info of specialInfo) {
+                html += `<div class="special">★ ${info}</div>`;
+            }
+            
+            tooltip.innerHTML = html;
+            tooltip.style.display = 'block';
+        }
+        
+        function hideTooltip() {
+            document.getElementById('piece-tooltip').style.display = 'none';
+            while (highlightGroup.children.length) highlightGroup.remove(highlightGroup.children[0]);
+        }
+        
+        function onMouseMove(event) {
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+            
+            // Update tooltip position
+            const tooltip = document.getElementById('piece-tooltip');
+            tooltip.style.left = (event.clientX + 15) + 'px';
+            tooltip.style.top = (event.clientY + 15) + 'px';
+            
+            // Raycast to find hovered piece
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(piecesGroup.children, true);
+            
+            if (intersects.length > 0) {
+                // Find the parent group with userData
+                let piece = intersects[0].object;
+                while (piece && !piece.userData?.type && piece.parent) {
+                    piece = piece.parent;
+                }
+                
+                if (piece?.userData?.type) {
+                    if (hoveredPiece !== piece) {
+                        hoveredPiece = piece;
+                        showLegalMoves(piece.userData);
+                    }
+                } else {
+                    if (hoveredPiece) {
+                        hoveredPiece = null;
+                        hideTooltip();
+                    }
+                }
+            } else {
+                if (hoveredPiece) {
+                    hoveredPiece = null;
+                    hideTooltip();
+                }
+            }
         }
         
         function onResize() {
@@ -358,6 +796,10 @@
         
         function animate() {
             requestAnimationFrame(animate);
+            
+            // Update cinematic camera if animating
+            updateCinematicCamera();
+            
             controls.update();
             renderer.render(scene, camera);
         }

src/streamlit_app_3d.py

@@ -0,0 +1,1065 @@
+"""
+CASCADE-LATTICE Chess
+=====================
+A chess match with HOLD - pause mid-game to see and select moves.
+"""
+
+import streamlit as st
+import chess
+import chess.engine
+import numpy as np
+import plotly.graph_objects as go
+import time
+import platform
+import shutil
+from typing import List, Optional, Any
+from dataclasses import dataclass, field
+
+# CASCADE-LATTICE
+try:
+    from cascade import Hold, CausationGraph, Tracer, MetricsEngine
+    CASCADE_AVAILABLE = True
+except ImportError:
+    CASCADE_AVAILABLE = False
+    Hold = None
+
+# Stockfish - check local folder first, then system
+import os
+from pathlib import Path
+
+# Get project root (parent of src/)
+PROJECT_ROOT = Path(__file__).parent.parent.resolve()
+LOCAL_STOCKFISH = PROJECT_ROOT / "stockfish" / "stockfish-windows-x86-64-avx2.exe"
+
+if LOCAL_STOCKFISH.exists():
+    STOCKFISH_PATH = str(LOCAL_STOCKFISH.resolve())
+elif shutil.which("stockfish"):
+    STOCKFISH_PATH = shutil.which("stockfish")
+else:
+    STOCKFISH_PATH = "/usr/games/stockfish"  # Linux fallback
+
+print(f"[STOCKFISH] Path: {STOCKFISH_PATH}")
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# VISUAL THEME - Polished 3D Chess
+# ═══════════════════════════════════════════════════════════════════════════════
+
+# Board colors
+BOARD_LIGHT = '#8B7355'   # Warm wood light
+BOARD_DARK = '#4A3728'    # Rich wood dark
+BOARD_BORDER = '#2A1F14'  # Dark frame
+
+# Piece colors (metallic feel)
+WHITE_PIECE = '#F5F5DC'   # Ivory/cream
+WHITE_ACCENT = '#FFD700'  # Gold trim
+BLACK_PIECE = '#1C1C1C'   # Obsidian
+BLACK_ACCENT = '#8B0000'  # Dark red trim
+
+# Arc colors (energy trails)
+ARC_WHITE = '#00FFAA'     # Cyan-green energy
+ARC_BLACK = '#FF3366'     # Crimson energy
+
+# UI colors
+GRID_COLOR = '#333344'
+BG_COLOR = '#0D0D12'
+
+# Piece heights (taller = more important)
+PIECE_HEIGHTS = {
+    chess.PAWN: 0.4,
+    chess.KNIGHT: 0.7,
+    chess.BISHOP: 0.8,
+    chess.ROOK: 0.6,
+    chess.QUEEN: 1.0,
+    chess.KING: 1.1
+}
+
+# Piece sizes (marker size)
+PIECE_SIZES = {
+    chess.PAWN: 8,
+    chess.KNIGHT: 11,
+    chess.BISHOP: 11,
+    chess.ROOK: 10,
+    chess.QUEEN: 13,
+    chess.KING: 14
+}
+
+@dataclass
+class MoveCandidate:
+    move: str           # UCI notation
+    prob: float         # Probability/weight  
+    value: float        # Evaluation score
+    from_sq: int        # Source square (0-63)
+    to_sq: int          # Target square (0-63)
+    is_capture: bool = False
+    is_check: bool = False
+    is_castle: bool = False
+    captured_piece: Optional[str] = None
+    move_type: str = 'quiet'  # quiet, capture, check, castle, promotion
+
+@dataclass 
+class BoardAnalysis:
+    """Analysis data for visualization."""
+    material_white: int = 0
+    material_black: int = 0
+    eval_score: float = 0.0
+    white_attacks: List[int] = field(default_factory=list)  # squares white attacks
+    black_attacks: List[int] = field(default_factory=list)  # squares black attacks
+    tension_squares: List[int] = field(default_factory=list)  # contested squares
+    king_safety_white: float = 0.0
+    king_safety_black: float = 0.0
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# 3D BOARD VISUALIZATION
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def square_to_3d(square: int) -> tuple:
+    """Convert chess square (0-63) to 3D coordinates.
+    Board is on Z=0 plane, centered at origin."""
+    file = square % 8  # 0-7 (a-h)
+    rank = square // 8  # 0-7 (1-8)
+    x = file - 3.5  # Center at 0
+    y = rank - 3.5  # Center at 0
+    z = 0  # Board plane
+    return (x, y, z)
+
+def analyze_board(board: chess.Board) -> BoardAnalysis:
+    """Analyze board state for visualization."""
+    piece_values = {chess.PAWN: 1, chess.KNIGHT: 3, chess.BISHOP: 3, 
+                    chess.ROOK: 5, chess.QUEEN: 9, chess.KING: 0}
+    
+    analysis = BoardAnalysis()
+    
+    # Material count
+    for square in chess.SQUARES:
+        piece = board.piece_at(square)
+        if piece:
+            val = piece_values.get(piece.piece_type, 0)
+            if piece.color == chess.WHITE:
+                analysis.material_white += val
+            else:
+                analysis.material_black += val
+    
+    # Attack maps
+    for square in chess.SQUARES:
+        white_attackers = board.attackers(chess.WHITE, square)
+        black_attackers = board.attackers(chess.BLACK, square)
+        
+        if white_attackers:
+            analysis.white_attacks.append(square)
+        if black_attackers:
+            analysis.black_attacks.append(square)
+        if white_attackers and black_attackers:
+            analysis.tension_squares.append(square)
+    
+    return analysis
+
+def create_arc_trajectory(from_sq: int, to_sq: int, is_white: bool, num_points: int = 30) -> dict:
+    """Create an arc trajectory for a move.
+    White arcs go UP (positive Z), Black arcs go DOWN (negative Z)."""
+    
+    x1, y1, _ = square_to_3d(from_sq)
+    x2, y2, _ = square_to_3d(to_sq)
+    
+    # Calculate arc height based on move distance
+    distance = np.sqrt((x2-x1)**2 + (y2-y1)**2)
+    arc_height = max(1.5, distance * 0.8)  # Minimum height of 1.5
+    
+    # Direction: white goes up, black goes down
+    direction = 1 if is_white else -1
+    
+    # Generate arc points
+    t = np.linspace(0, 1, num_points)
+    
+    # Parabolic arc
+    x = x1 + (x2 - x1) * t
+    y = y1 + (y2 - y1) * t
+    z = direction * arc_height * 4 * t * (1 - t)  # Parabola peaking at t=0.5
+    
+    return {'x': x, 'y': y, 'z': z}
+
+def create_board_surface() -> List[go.Mesh3d]:
+    """Create the chess board as 3D mesh tiles with depth."""
+    traces = []
+    
+    tile_size = 0.48  # Slightly smaller than 0.5 for gaps
+    tile_height = 0.08  # Thickness of tiles
+    
+    for rank in range(8):
+        for file in range(8):
+            cx = file - 3.5
+            cy = rank - 3.5
+            is_light = (rank + file) % 2 == 1
+            color = BOARD_LIGHT if is_light else BOARD_DARK
+            
+            # Create a 3D tile (box) for each square
+            # 8 vertices of a box
+            x = [cx-tile_size, cx+tile_size, cx+tile_size, cx-tile_size,
+                 cx-tile_size, cx+tile_size, cx+tile_size, cx-tile_size]
+            y = [cy-tile_size, cy-tile_size, cy+tile_size, cy+tile_size,
+                 cy-tile_size, cy-tile_size, cy+tile_size, cy+tile_size]
+            z = [0, 0, 0, 0,
+                 tile_height, tile_height, tile_height, tile_height]
+            
+            # Define faces using vertex indices
+            i = [0, 0, 4, 4, 0, 1]  # triangles
+            j = [1, 2, 5, 6, 4, 5]
+            k = [2, 3, 6, 7, 1, 2]
+            
+            traces.append(go.Mesh3d(
+                x=x, y=y, z=z,
+                i=[0, 0, 4, 4, 0, 1, 2, 3, 4, 5, 0, 3],
+                j=[1, 2, 5, 6, 4, 5, 6, 7, 5, 6, 1, 7],
+                k=[2, 3, 6, 7, 1, 2, 3, 4, 7, 7, 4, 4],
+                color=color,
+                opacity=0.95,
+                flatshading=True,
+                hoverinfo='skip',
+                showlegend=False
+            ))
+    
+    # Add board frame/border
+    frame_traces = create_board_frame()
+    traces.extend(frame_traces)
+    
+    return traces
+
+def create_board_frame() -> List[go.Scatter3d]:
+    """Create decorative frame around the board."""
+    traces = []
+    
+    # Outer border lines
+    border = 4.2
+    z_line = 0.04
+    
+    # Frame corners
+    corners_x = [-border, border, border, -border, -border]
+    corners_y = [-border, -border, border, border, -border]
+    corners_z = [z_line] * 5
+    
+    traces.append(go.Scatter3d(
+        x=corners_x, y=corners_y, z=corners_z,
+        mode='lines',
+        line=dict(color=WHITE_ACCENT, width=3),
+        hoverinfo='skip',
+        showlegend=False
+    ))
+    
+    # File labels (a-h)
+    for i, label in enumerate('abcdefgh'):
+        traces.append(go.Scatter3d(
+            x=[i - 3.5], y=[-4.5], z=[0.1],
+            mode='text',
+            text=[label],
+            textfont=dict(size=10, color='#888899'),
+            hoverinfo='skip',
+            showlegend=False
+        ))
+    
+    # Rank labels (1-8)
+    for i in range(8):
+        traces.append(go.Scatter3d(
+            x=[-4.5], y=[i - 3.5], z=[0.1],
+            mode='text',
+            text=[str(i + 1)],
+            textfont=dict(size=10, color='#888899'),
+            hoverinfo='skip',
+            showlegend=False
+        ))
+    
+    return traces
+
+def create_piece_markers(board: chess.Board) -> List[go.Scatter3d]:
+    """Create 3D piece columns - taller pieces = more important."""
+    traces = []
+    
+    piece_symbols = {
+        chess.PAWN: '♟', chess.KNIGHT: '♞', chess.BISHOP: '♝',
+        chess.ROOK: '♜', chess.QUEEN: '♛', chess.KING: '♚'
+    }
+    
+    # Group pieces by type for better rendering
+    for piece_type in [chess.PAWN, chess.KNIGHT, chess.BISHOP, chess.ROOK, chess.QUEEN, chess.KING]:
+        white_x, white_y, white_z = [], [], []
+        black_x, black_y, black_z = [], [], []
+        
+        height = PIECE_HEIGHTS[piece_type]
+        size = PIECE_SIZES[piece_type]
+        symbol = piece_symbols[piece_type]
+        
+        for square in chess.SQUARES:
+            piece = board.piece_at(square)
+            if piece and piece.piece_type == piece_type:
+                x, y, _ = square_to_3d(square)
+                
+                if piece.color == chess.WHITE:
+                    white_x.append(x)
+                    white_y.append(y)
+                    white_z.append(height)
+                else:
+                    black_x.append(x)
+                    black_y.append(y)
+                    black_z.append(height)
+        
+        # White pieces - ivory with gold accent
+        if white_x:
+            # Base marker
+            traces.append(go.Scatter3d(
+                x=white_x, y=white_y, z=[0.1] * len(white_x),
+                mode='markers',
+                marker=dict(size=size + 4, color=WHITE_ACCENT, symbol='circle', opacity=0.6),
+                hoverinfo='skip',
+                showlegend=False
+            ))
+            # Main piece body
+            traces.append(go.Scatter3d(
+                x=white_x, y=white_y, z=white_z,
+                mode='markers+text',
+                marker=dict(
+                    size=size,
+                    color=WHITE_PIECE,
+                    symbol='diamond',
+                    opacity=0.95,
+                    line=dict(color=WHITE_ACCENT, width=2)
+                ),
+                text=[symbol] * len(white_x),
+                textfont=dict(size=12, color='#222222'),
+                textposition='top center',
+                name=f'White {chess.piece_name(piece_type).title()}',
+                hovertemplate=f'{chess.piece_name(piece_type).title()}<extra>White</extra>',
+                customdata=[square for square in chess.SQUARES 
+                           if board.piece_at(square) and 
+                           board.piece_at(square).piece_type == piece_type and
+                           board.piece_at(square).color == chess.WHITE]
+            ))
+            # Vertical line (piece stem)
+            for i, (px, py, pz) in enumerate(zip(white_x, white_y, white_z)):
+                traces.append(go.Scatter3d(
+                    x=[px, px], y=[py, py], z=[0.1, pz],
+                    mode='lines',
+                    line=dict(color=WHITE_PIECE, width=3),
+                    hoverinfo='skip',
+                    showlegend=False
+                ))
+        
+        # Black pieces - obsidian with red accent
+        if black_x:
+            # Base marker
+            traces.append(go.Scatter3d(
+                x=black_x, y=black_y, z=[0.1] * len(black_x),
+                mode='markers',
+                marker=dict(size=size + 4, color=BLACK_ACCENT, symbol='circle', opacity=0.6),
+                hoverinfo='skip',
+                showlegend=False
+            ))
+            # Main piece body
+            traces.append(go.Scatter3d(
+                x=black_x, y=black_y, z=black_z,
+                mode='markers+text',
+                marker=dict(
+                    size=size,
+                    color=BLACK_PIECE,
+                    symbol='diamond',
+                    opacity=0.95,
+                    line=dict(color=BLACK_ACCENT, width=2)
+                ),
+                text=[symbol] * len(black_x),
+                textfont=dict(size=12, color='#EEEEEE'),
+                textposition='top center',
+                name=f'Black {chess.piece_name(piece_type).title()}',
+                hovertemplate=f'{chess.piece_name(piece_type).title()}<extra>Black</extra>',
+                customdata=[square for square in chess.SQUARES 
+                           if board.piece_at(square) and 
+                           board.piece_at(square).piece_type == piece_type and
+                           board.piece_at(square).color == chess.BLACK]
+            ))
+            # Vertical line (piece stem)
+            for i, (px, py, pz) in enumerate(zip(black_x, black_y, black_z)):
+                traces.append(go.Scatter3d(
+                    x=[px, px], y=[py, py], z=[0.1, pz],
+                    mode='lines',
+                    line=dict(color=BLACK_PIECE, width=3),
+                    hoverinfo='skip',
+                    showlegend=False
+                ))
+    
+    return traces
+
+def create_move_arcs(candidates: List[MoveCandidate], is_white: bool) -> List[go.Scatter3d]:
+    """Create arc trajectories for candidate moves - styled by move type."""
+    traces = []
+    
+    # Color schemes by move type
+    type_colors = {
+        'quiet': '#00FFAA' if is_white else '#FF3366',
+        'capture': '#FF6600',  # Orange for captures
+        'check': '#FFFF00',    # Yellow for checks
+        'check+capture': '#FF0000',  # Red for check+capture
+        'castle': '#00AAFF',   # Blue for castling
+        'promotion': '#FF00FF' # Magenta for promotion
+    }
+    
+    for i, candidate in enumerate(candidates):
+        arc = create_arc_trajectory(
+            candidate.from_sq, 
+            candidate.to_sq, 
+            is_white
+        )
+        
+        # Get color based on move type
+        base_color = type_colors.get(candidate.move_type, type_colors['quiet'])
+        # Fade color based on rank
+        opacity = max(0.4, min(1.0, candidate.prob * 1.5))
+        
+        # Line thickness based on probability
+        width = max(3, candidate.prob * 15)
+        
+        # Special effects for tactical moves
+        if candidate.is_capture or candidate.is_check:
+            width += 2  # Thicker for tactical moves
+        
+        # Outer glow
+        traces.append(go.Scatter3d(
+            x=arc['x'], y=arc['y'], z=arc['z'],
+            mode='lines',
+            line=dict(color=base_color, width=width + 4),
+            opacity=opacity * 0.3,
+            hoverinfo='skip',
+            showlegend=False
+        ))
+        
+        # Core line
+        move_label = candidate.move
+        if candidate.is_capture:
+            move_label += f" ×{candidate.captured_piece or '?'}"
+        if candidate.is_check:
+            move_label += " +"
+        
+        traces.append(go.Scatter3d(
+            x=arc['x'], y=arc['y'], z=arc['z'],
+            mode='lines',
+            line=dict(color=base_color, width=width),
+            opacity=opacity,
+            name=f"{move_label} ({candidate.prob*100:.0f}%)",
+            hovertemplate=f"<b>{move_label}</b><br>Type: {candidate.move_type}<br>Prob: {candidate.prob*100:.1f}%<br>Eval: {candidate.value:+.2f}<extra></extra>"
+        ))
+        
+        # Destination marker - different shapes by type
+        x2, y2, _ = square_to_3d(candidate.to_sq)
+        dest_symbol = 'diamond'
+        dest_size = 8
+        if candidate.is_capture:
+            dest_symbol = 'x'
+            dest_size = 12
+        elif candidate.is_check:
+            dest_symbol = 'diamond-open'
+            dest_size = 14
+        
+        traces.append(go.Scatter3d(
+            x=[x2], y=[y2], z=[arc['z'][-1]],
+            mode='markers',
+            marker=dict(
+                size=dest_size,
+                color=base_color,
+                symbol=dest_symbol,
+                opacity=opacity,
+                line=dict(color='white', width=1)
+            ),
+            hoverinfo='skip',
+            showlegend=False
+        ))
+        
+        # For captures, add a "falling" line to show what's being taken
+        if candidate.is_capture:
+            traces.append(go.Scatter3d(
+                x=[x2, x2], y=[y2, y2], z=[arc['z'][-1], -1.5],
+                mode='lines',
+                line=dict(color='#FF4444', width=2, dash='dash'),
+                opacity=0.5,
+                hoverinfo='skip',
+                showlegend=False
+            ))
+    
+    return traces
+
+def create_threat_visualization(board: chess.Board, analysis: BoardAnalysis) -> List[go.Scatter3d]:
+    """Create visualization of threats BELOW the board (-Z space).
+    Shows what the opponent is attacking/threatening."""
+    traces = []
+    
+    is_white_turn = board.turn == chess.WHITE
+    # Show opponent's attacks (threats TO the current player)
+    threat_squares = analysis.black_attacks if is_white_turn else analysis.white_attacks
+    threat_color = ARC_BLACK if is_white_turn else ARC_WHITE
+    
+    if not threat_squares:
+        return traces
+    
+    # Create threat markers below board
+    threat_x, threat_y, threat_z = [], [], []
+    for sq in threat_squares[:20]:  # Limit to avoid clutter
+        x, y, _ = square_to_3d(sq)
+        threat_x.append(x)
+        threat_y.append(y)
+        threat_z.append(-0.5)  # Below board
+    
+    traces.append(go.Scatter3d(
+        x=threat_x, y=threat_y, z=threat_z,
+        mode='markers',
+        marker=dict(
+            size=6,
+            color=threat_color,
+            symbol='x',
+            opacity=0.4
+        ),
+        name='Opponent Threats',
+        hoverinfo='skip',
+        showlegend=False
+    ))
+    
+    return traces
+
+def create_tension_zones(analysis: BoardAnalysis) -> List[go.Scatter3d]:
+    """Create visualization of contested/tension squares."""
+    traces = []
+    
+    if not analysis.tension_squares:
+        return traces
+    
+    # Tension squares glow at board level
+    tension_x, tension_y, tension_z = [], [], []
+    for sq in analysis.tension_squares:
+        x, y, _ = square_to_3d(sq)
+        tension_x.append(x)
+        tension_y.append(y)
+        tension_z.append(0.15)
+    
+    traces.append(go.Scatter3d(
+        x=tension_x, y=tension_y, z=tension_z,
+        mode='markers',
+        marker=dict(
+            size=20,
+            color='#FFAA00',  # Orange glow
+            symbol='square',
+            opacity=0.3
+        ),
+        name='Tension Zones',
+        hovertemplate='Contested Square<extra></extra>',
+        showlegend=False
+    ))
+    
+    return traces
+
+def create_info_panel(board: chess.Board, analysis: BoardAnalysis, eval_score: float) -> List[go.Scatter3d]:
+    """Create floating info panels around the board."""
+    traces = []
+    
+    # Material balance (right side of board)
+    material_diff = analysis.material_white - analysis.material_black
+    mat_text = f"+{material_diff}" if material_diff > 0 else str(material_diff)
+    mat_color = '#00FF88' if material_diff > 0 else '#FF4466' if material_diff < 0 else '#888888'
+    
+    traces.append(go.Scatter3d(
+        x=[5.5], y=[0], z=[1.5],
+        mode='text',
+        text=[f"MAT\\n{mat_text}"],
+        textfont=dict(size=12, color=mat_color),
+        hoverinfo='skip',
+        showlegend=False
+    ))
+    
+    # Evaluation (left side)
+    eval_text = f"+{eval_score:.1f}" if eval_score > 0 else f"{eval_score:.1f}"
+    eval_color = '#00FF88' if eval_score > 0.2 else '#FF4466' if eval_score < -0.2 else '#888888'
+    
+    traces.append(go.Scatter3d(
+        x=[-5.5], y=[0], z=[1.5],
+        mode='text',
+        text=[f"EVAL\\n{eval_text}"],
+        textfont=dict(size=12, color=eval_color),
+        hoverinfo='skip',
+        showlegend=False
+    ))
+    
+    # Turn indicator (top)
+    turn_text = "WHITE" if board.turn == chess.WHITE else "BLACK"
+    turn_color = '#F5F5DC' if board.turn == chess.WHITE else '#666666'
+    
+    traces.append(go.Scatter3d(
+        x=[0], y=[5], z=[0.5],
+        mode='text',
+        text=[f"► {turn_text}"],
+        textfont=dict(size=10, color=turn_color),
+        hoverinfo='skip',
+        showlegend=False
+    ))
+    
+    # Move count
+    move_num = board.fullmove_number
+    traces.append(go.Scatter3d(
+        x=[0], y=[-5], z=[0.5],
+        mode='text',
+        text=[f"Move {move_num}"],
+        textfont=dict(size=10, color='#666666'),
+        hoverinfo='skip',
+        showlegend=False
+    ))
+    
+    return traces
+
+def create_3d_chess_figure(board: chess.Board, candidates: List[MoveCandidate] = None, 
+                           show_threats: bool = True, show_tension: bool = True) -> go.Figure:
+    """Create the full 3D chess visualization with information layers."""
+    
+    fig = go.Figure()
+    
+    # Analyze board state
+    analysis = analyze_board(board)
+    eval_score = candidates[0].value if candidates else 0.0
+    
+    # Add board squares
+    for trace in create_board_surface():
+        fig.add_trace(trace)
+    
+    # Add tension zones (contested squares - orange glow)
+    if show_tension:
+        for trace in create_tension_zones(analysis):
+            fig.add_trace(trace)
+    
+    # Add pieces
+    for trace in create_piece_markers(board):
+        fig.add_trace(trace)
+    
+    # Add threats below board (-Z space)
+    if show_threats:
+        for trace in create_threat_visualization(board, analysis):
+            fig.add_trace(trace)
+    
+    # Add move arcs ABOVE board (+Z space) - candidates for current player
+    if candidates:
+        is_white = board.turn == chess.WHITE
+        for trace in create_move_arcs(candidates, is_white):
+            fig.add_trace(trace)
+    
+    # Add floating info panels
+    for trace in create_info_panel(board, analysis, eval_score):
+        fig.add_trace(trace)
+    
+    # Layout - cinematic chess view
+    fig.update_layout(
+        scene=dict(
+            xaxis=dict(
+                range=[-6.5, 6.5],
+                showbackground=False,
+                showgrid=False,
+                title='',
+                showticklabels=False,
+                showline=False,
+                zeroline=False
+            ),
+            yaxis=dict(
+                range=[-6.5, 6.5],
+                showbackground=False,
+                showgrid=False,
+                title='',
+                showticklabels=False,
+                showline=False,
+                zeroline=False
+            ),
+            zaxis=dict(
+                range=[-2, 4],
+                showbackground=False,
+                showgrid=False,
+                title='',
+                showticklabels=False,
+                showline=False,
+                zeroline=False
+            ),
+            aspectmode='manual',
+            aspectratio=dict(x=1, y=1, z=0.5),
+            camera=dict(
+                eye=dict(x=1.3, y=-1.3, z=1.0),  # Classic chess view angle
+                up=dict(x=0, y=0, z=1),
+                center=dict(x=0, y=0, z=0)
+            ),
+            bgcolor=BG_COLOR
+        ),
+        paper_bgcolor=BG_COLOR,
+        plot_bgcolor=BG_COLOR,
+        margin=dict(l=0, r=0, t=30, b=0),
+        showlegend=False,
+        height=650
+    )
+    
+    return fig
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# CASCADE HOLD SYSTEM
+# ═══════════════════════════════════════════════════════════════════════════════
+
+class CascadeHoldSystem:
+    """Wrapper around cascade.Hold for the chess demo."""
+    
+    def __init__(self):
+        if CASCADE_AVAILABLE:
+            self.hold = Hold()
+            self.causation_graph = CausationGraph()
+            self.tracer = Tracer(self.causation_graph)
+            self.metrics = MetricsEngine()
+        else:
+            self.hold = None
+            self.causation_graph = None
+            self.tracer = None
+            self.metrics = None
+        
+        self.last_resolution = None
+    
+    def yield_point(self, candidates: List[MoveCandidate], board: chess.Board) -> Optional[Any]:
+        """Create a hold yield point."""
+        if not self.hold or not candidates:
+            return None
+        
+        try:
+            probs = np.array([c.prob for c in candidates], dtype=np.float32)
+            if probs.sum() > 0:
+                probs = probs / probs.sum()
+            
+            resolution = self.hold.yield_point(
+                action_probs=probs,
+                value=candidates[0].value if candidates else 0.5,
+                observation={'fen': board.fen()},
+                brain_id='chess_3d',
+                action_labels=[c.move for c in candidates],
+                blocking=False
+            )
+            self.last_resolution = resolution
+            return resolution
+        except Exception as e:
+            st.error(f"Hold error: {e}")
+            return None
+    
+    def accept(self):
+        """Accept AI's top choice."""
+        if self.hold:
+            return self.hold.accept()
+    
+    def override(self, idx: int):
+        """Override with different choice."""
+        if self.hold:
+            return self.hold.override(idx)
+    
+    def get_stats(self) -> dict:
+        """Get hold statistics."""
+        if self.hold:
+            return self.hold.stats
+        return {'total_holds': 0, 'overrides': 0, 'override_rate': 0.0}
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# STOCKFISH INTEGRATION
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def get_stockfish_candidates(board: chess.Board, engine, num_moves: int = 5) -> List[MoveCandidate]:
+    """Get candidate moves from Stockfish with evaluations."""
+    candidates = []
+    
+    try:
+        # Get multi-PV analysis
+        info = engine.analyse(board, chess.engine.Limit(depth=12), multipv=num_moves)
+        
+        total_score = 0
+        moves_data = []
+        
+        for i, pv_info in enumerate(info):
+            move = pv_info['pv'][0]
+            score = pv_info.get('score', chess.engine.Cp(0))
+            
+            # Convert score to value
+            if score.is_mate():
+                value = 1.0 if score.mate() > 0 else -1.0
+            else:
+                cp = score.relative.score(mate_score=10000)
+                value = max(-1, min(1, cp / 1000))  # Normalize to -1 to 1
+            
+            # Probability decreases with rank
+            prob = 1.0 / (i + 1)
+            total_score += prob
+            
+            moves_data.append({
+                'move': move,
+                'prob': prob,
+                'value': value
+            })
+        
+        # Normalize probabilities and build candidates with rich info
+        for data in moves_data:
+            data['prob'] /= total_score
+            move = data['move']
+            
+            # Classify the move
+            is_capture = board.is_capture(move)
+            is_check = board.gives_check(move)
+            is_castle = board.is_castling(move)
+            captured_piece = None
+            
+            if is_capture:
+                captured = board.piece_at(move.to_square)
+                if captured:
+                    captured_piece = chess.piece_name(captured.piece_type)
+            
+            # Determine move type
+            if is_check and is_capture:
+                move_type = 'check+capture'
+            elif is_check:
+                move_type = 'check'
+            elif is_capture:
+                move_type = 'capture'
+            elif is_castle:
+                move_type = 'castle'
+            elif move.promotion:
+                move_type = 'promotion'
+            else:
+                move_type = 'quiet'
+            
+            candidates.append(MoveCandidate(
+                move=move.uci(),
+                prob=data['prob'],
+                value=data['value'],
+                from_sq=move.from_square,
+                to_sq=move.to_square,
+                is_capture=is_capture,
+                is_check=is_check,
+                is_castle=is_castle,
+                captured_piece=captured_piece,
+                move_type=move_type
+            ))
+    
+    except Exception as e:
+        st.error(f"Stockfish error: {e}")
+    
+    return candidates
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# STREAMLIT APP
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def init_session_state():
+    """Initialize session state."""
+    if 'board' not in st.session_state:
+        st.session_state.board = chess.Board()
+    if 'running' not in st.session_state:
+        st.session_state.running = False
+    if 'held' not in st.session_state:
+        st.session_state.held = False
+    if 'candidates' not in st.session_state:
+        st.session_state.candidates = []
+    if 'cascade' not in st.session_state:
+        st.session_state.cascade = CascadeHoldSystem()
+    if 'engine' not in st.session_state:
+        try:
+            import asyncio
+            # Fix for Python 3.13 on Windows - use ProactorEventLoop
+            if platform.system() == 'Windows':
+                asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy())
+            st.session_state.engine = chess.engine.SimpleEngine.popen_uci(STOCKFISH_PATH)
+            print(f"[ENGINE] Stockfish loaded OK")
+        except Exception as e:
+            st.session_state.engine = None
+            print(f"[ENGINE] Failed to load Stockfish:")
+            import traceback
+            traceback.print_exc()
+    if 'move_history' not in st.session_state:
+        st.session_state.move_history = []
+
+def main():
+    st.set_page_config(
+        page_title="CASCADE-LATTICE // 3D Chess",
+        layout="wide",
+        initial_sidebar_state="collapsed"
+    )
+    
+    # Dark theme CSS
+    st.markdown("""
+    <style>
+        .stApp { background-color: #0a0a0f; }
+        .main-title {
+            font-family: 'Courier New', monospace;
+            font-size: 2.5em;
+            font-weight: bold;
+            color: #00ff96;
+            text-align: center;
+            margin-bottom: 0;
+        }
+        .sub-title {
+            font-family: 'Courier New', monospace;
+            font-size: 1em;
+            color: #666;
+            text-align: center;
+            margin-top: 0;
+        }
+        .control-btn {
+            font-family: 'Courier New', monospace;
+            font-size: 1.2em;
+        }
+        .stats-panel {
+            background: #12121a;
+            border: 1px solid #333;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 10px 0;
+        }
+        .hold-active {
+            color: #ffd700;
+            font-weight: bold;
+        }
+        .running {
+            color: #00ff96;
+        }
+        .stopped {
+            color: #ff3264;
+        }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    init_session_state()
+    
+    # Header
+    st.markdown('<div class="main-title">CASCADE // LATTICE</div>', unsafe_allow_html=True)
+    st.markdown('<div class="sub-title">3D Inference Visualization</div>', unsafe_allow_html=True)
+    
+    # Control buttons
+    col1, col2, col3, col4, col5, col6 = st.columns([1, 1, 1, 1, 1, 2])
+    
+    with col1:
+        if st.button("▶ AUTO", use_container_width=True, type="primary"):
+            st.session_state.running = True
+            st.session_state.held = False
+    
+    with col2:
+        if st.button("⏹ STOP", use_container_width=True):
+            st.session_state.running = False
+            st.session_state.held = False
+    
+    with col3:
+        # Manual step button
+        if st.button("⏭ STEP", use_container_width=True):
+            if st.session_state.engine and not st.session_state.board.is_game_over():
+                candidates = get_stockfish_candidates(st.session_state.board, st.session_state.engine)
+                if candidates:
+                    move = chess.Move.from_uci(candidates[0].move)
+                    st.session_state.board.push(move)
+                    st.session_state.move_history.append(candidates[0].move)
+                    st.rerun()
+    
+    with col4:
+        if st.button("⏸ HOLD", use_container_width=True):
+            st.session_state.held = True
+            st.session_state.running = False
+            # Generate candidates when holding
+            if st.session_state.engine and not st.session_state.candidates:
+                st.session_state.candidates = get_stockfish_candidates(
+                    st.session_state.board, 
+                    st.session_state.engine
+                )
+                # Create hold yield point
+                st.session_state.cascade.yield_point(
+                    st.session_state.candidates,
+                    st.session_state.board
+                )
+    
+    with col5:
+        if st.button("🔄 RESET", use_container_width=True):
+            st.session_state.board = chess.Board()
+            st.session_state.candidates = []
+            st.session_state.move_history = []
+            st.session_state.running = False
+            st.session_state.held = False
+    
+    with col6:
+        # Status display
+        if st.session_state.engine is None:
+            st.markdown('<span style="color:#ff4444">⚠ NO ENGINE</span>', unsafe_allow_html=True)
+        elif st.session_state.held:
+            st.markdown('<span class="hold-active">⏸ HOLD ACTIVE</span>', unsafe_allow_html=True)
+        elif st.session_state.running:
+            st.markdown('<span class="running">▶ RUNNING</span>', unsafe_allow_html=True)
+        else:
+            st.markdown('<span class="stopped">⏹ STOPPED</span>', unsafe_allow_html=True)
+    
+    st.markdown("---")
+    
+    # Main visualization
+    board = st.session_state.board
+    candidates = st.session_state.candidates if st.session_state.held else []
+    
+    # Create and display 3D figure
+    fig = create_3d_chess_figure(board, candidates)
+    st.plotly_chart(fig, use_container_width=True, key="chess_3d")
+    
+    # Move selection (when held)
+    if st.session_state.held and st.session_state.candidates:
+        st.markdown("### Select Move")
+        cols = st.columns(len(st.session_state.candidates))
+        
+        for i, (col, candidate) in enumerate(zip(cols, st.session_state.candidates)):
+            with col:
+                label = f"{candidate.move}\n{candidate.prob*100:.0f}%"
+                if st.button(label, key=f"move_{i}", use_container_width=True):
+                    # Make the move
+                    move = chess.Move.from_uci(candidate.move)
+                    board.push(move)
+                    st.session_state.move_history.append(candidate.move)
+                    
+                    # Resolve hold
+                    if i == 0:
+                        st.session_state.cascade.accept()
+                    else:
+                        st.session_state.cascade.override(i)
+                    
+                    # Clear state
+                    st.session_state.candidates = []
+                    st.session_state.held = False
+                    st.rerun()
+    
+    # Sidebar stats
+    with st.sidebar:
+        st.markdown("## CASCADE-LATTICE")
+        
+        stats = st.session_state.cascade.get_stats()
+        st.metric("Total Holds", stats['total_holds'])
+        st.metric("Overrides", stats['overrides'])
+        st.metric("Override Rate", f"{stats['override_rate']*100:.1f}%")
+        
+        st.markdown("---")
+        st.markdown("### Move History")
+        for i, move in enumerate(st.session_state.move_history[-10:]):
+            color = WHITE_PIECE if i % 2 == 0 else BLACK_PIECE
+            st.markdown(f"<span style='color:{color}'>{i+1}. {move}</span>", unsafe_allow_html=True)
+    
+    # Auto-play logic - triggers rerun at end (non-blocking render)
+    should_auto_step = st.session_state.running and not st.session_state.held and not board.is_game_over()
+    
+    if should_auto_step and st.session_state.engine:
+        candidates = get_stockfish_candidates(board, st.session_state.engine)
+        if candidates:
+            move = chess.Move.from_uci(candidates[0].move)
+            board.push(move)
+            st.session_state.move_history.append(candidates[0].move)
+    
+    # Game over check
+    if board.is_game_over():
+        result = board.result()
+        if result == "1-0":
+            st.success("⚪ WHITE WINS!")
+        elif result == "0-1":
+            st.success("⚫ BLACK WINS!")
+        else:
+            st.info("🤝 DRAW")
+        st.session_state.running = False
+        should_auto_step = False
+    
+    # Rerun for auto-play AFTER all rendering is complete
+    if should_auto_step:
+        time.sleep(1.2)  # Pause to see the move
+        st.rerun()
+
+if __name__ == "__main__":
+    main()