diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0c3050c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.venv/*
+__pycache__/app.cpython-312.pyc
+__pycache__/layout_engine.cpython-312.pyc
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..ed60c2a
--- /dev/null
+++ b/app.py
@@ -0,0 +1,434 @@
+"""
+Neo4j Graph Visualizer - A beautiful, high-performance graph visualization app.
+
+Connects to Neo4j, executes Cypher queries, precomputes layouts in Python,
+and renders stunning visualizations in the browser.
+"""
+
+import os
+import json
+import hashlib
+import colorsys
+import logging
+import time
+import base64
+from collections import defaultdict
+from urllib.parse import urlparse
+
+import requests as http_requests
+from flask import Flask, render_template, jsonify, request
+
+from layout_engine import compute_layout, get_available_algorithms
+
+# ---------------------------------------------------------------------------
+# Configuration
+# ---------------------------------------------------------------------------
+logging.basicConfig(level=logging.INFO, format='%(asctime)s [%(levelname)s] %(message)s')
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+
+# Neo4j HTTP API endpoint (not Bolt)
+NEO4J_HTTP_URL = os.environ.get("NEO4J_HTTP_URL", "https://neo4j.develop.cortex.cloud.otto.de")
+NEO4J_USER = os.environ.get("NEO4J_USER", "neo4j")
+NEO4J_PASSWORD = os.environ.get("NEO4J_PASSWORD", "")
+NEO4J_DATABASE = os.environ.get("NEO4J_DATABASE", "neo4j")
+
+
+# ---------------------------------------------------------------------------
+# Neo4j HTTP Transactional API helpers
+# ---------------------------------------------------------------------------
+def _neo4j_auth_header():
+    """Build Basic auth header for Neo4j HTTP API."""
+    cred = f"{NEO4J_USER}:{NEO4J_PASSWORD}"
+    b64 = base64.b64encode(cred.encode()).decode()
+    return {"Authorization": f"Basic {b64}", "Content-Type": "application/json", "Accept": "application/json;charset=UTF-8"}
+
+
+def _neo4j_tx_url(database=None):
+    """Build the transactional commit endpoint URL."""
+    db = database or NEO4J_DATABASE
+    base = NEO4J_HTTP_URL.rstrip('/')
+    return f"{base}/db/{db}/tx/commit"
+
+
+def execute_cypher(cypher: str, params: dict | None = None):
+    """
+    Execute a Cypher query via the Neo4j HTTP Transactional API.
+    Returns (nodes_dict, edges_list, records_list, keys).
+    """
+    url = _neo4j_tx_url()
+    headers = _neo4j_auth_header()
+    payload = {
+        "statements": [{
+            "statement": cypher,
+            "parameters": params or {},
+            "resultDataContents": ["row", "graph"]
+        }]
+    }
+
+    resp = http_requests.post(url, json=payload, headers=headers, timeout=120)
+    resp.raise_for_status()
+    body = resp.json()
+
+    # Check for Neo4j-level errors
+    if body.get("errors"):
+        err_msgs = "; ".join(e.get("message", str(e)) for e in body["errors"])
+        raise RuntimeError(err_msgs)
+
+    nodes: dict = {}
+    edges: list = []
+    seen_edges: set = set()
+    records_out: list = []
+    keys: list = []
+
+    for result in body.get("results", []):
+        keys = result.get("columns", [])
+
+        for datum in result.get("data", []):
+            # --- Extract row data for table view ---
+            row_data = datum.get("row", [])
+            row = {}
+            for i, key in enumerate(keys):
+                row[key] = row_data[i] if i < len(row_data) else None
+            records_out.append(row)
+
+            # --- Extract graph data for visualization ---
+            graph_data = datum.get("graph", {})
+
+            for node_data in graph_data.get("nodes", []):
+                nid = str(node_data["id"])
+                if nid not in nodes:
+                    labels = node_data.get("labels", [])
+                    props = node_data.get("properties", {})
+                    display = (
+                        props.get('name')
+                        or props.get('title')
+                        or props.get('id')
+                        or props.get('sku')
+                        or (labels[0] if labels else nid)
+                    )
+                    nodes[nid] = {
+                        'id': nid,
+                        'labels': labels,
+                        'properties': props,
+                        'label': str(display)[:80],
+                    }
+
+            for rel_data in graph_data.get("relationships", []):
+                eid = str(rel_data["id"])
+                if eid not in seen_edges:
+                    seen_edges.add(eid)
+                    edges.append({
+                        'id': eid,
+                        'source': str(rel_data["startNode"]),
+                        'target': str(rel_data["endNode"]),
+                        'type': rel_data.get("type", "RELATED"),
+                        'properties': rel_data.get("properties", {}),
+                    })
+
+    return nodes, edges, records_out, keys
+
+
+def _execute_simple(cypher: str):
+    """Execute a simple Cypher query and return rows."""
+    url = _neo4j_tx_url()
+    headers = _neo4j_auth_header()
+    payload = {"statements": [{"statement": cypher}]}
+    resp = http_requests.post(url, json=payload, headers=headers, timeout=30)
+    resp.raise_for_status()
+    body = resp.json()
+    if body.get("errors"):
+        err_msgs = "; ".join(e.get("message", str(e)) for e in body["errors"])
+        raise RuntimeError(err_msgs)
+    rows = []
+    for result in body.get("results", []):
+        for datum in result.get("data", []):
+            rows.append(datum.get("row", []))
+    return rows
+
+
+# ---------------------------------------------------------------------------
+# Color generation
+# ---------------------------------------------------------------------------
+_PALETTE = [
+    '#00d4ff', '#ff6b6b', '#ffd93d', '#6bcb77', '#9b59b6',
+    '#e67e22', '#1abc9c', '#e74c3c', '#3498db', '#f39c12',
+    '#2ecc71', '#e91e63', '#00bcd4', '#ff9800', '#8bc34a',
+    '#673ab7', '#009688', '#ff5722', '#607d8b', '#cddc39',
+]
+
+
+def color_for_label(label: str) -> str:
+    """Return a vivid, consistent color for a label string."""
+    idx = int(hashlib.md5(label.encode()).hexdigest()[:8], 16)
+    return _PALETTE[idx % len(_PALETTE)]
+
+
+# ---------------------------------------------------------------------------
+# Routes
+# ---------------------------------------------------------------------------
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/api/query', methods=['POST'])
+def api_query():
+    data = request.get_json(force=True)
+    cypher = data.get('query', '').strip()
+    layout_algo = data.get('layout', 'auto')
+    spacing = float(data.get('spacing', 1.0))
+    iterations = int(data.get('iterations', 300))
+
+    if not cypher:
+        return jsonify({'error': 'Empty query'}), 400
+
+    try:
+        t0 = time.time()
+        nodes_dict, edges, records, keys = execute_cypher(cypher)
+        t_query = time.time() - t0
+
+        # Assign colours
+        label_colors: dict[str, str] = {}
+        for nd in nodes_dict.values():
+            for lb in nd.get('labels', []):
+                if lb not in label_colors:
+                    label_colors[lb] = color_for_label(lb)
+
+        # Compute layout server-side
+        t1 = time.time()
+        positions = compute_layout(nodes_dict, edges, algorithm=layout_algo, spacing=spacing, iterations=iterations)
+        t_layout = time.time() - t1
+
+        # Degree for sizing
+        degree: dict[str, int] = defaultdict(int)
+        for e in edges:
+            degree[e['source']] += 1
+            degree[e['target']] += 1
+        max_deg = max(degree.values()) if degree else 1
+
+        nodes_list = []
+        for nid, nd in nodes_dict.items():
+            pos = positions.get(nid, {'x': 0, 'y': 0})
+            primary = nd['labels'][0] if nd.get('labels') else 'Unknown'
+            nd['x'] = pos['x']
+            nd['y'] = pos['y']
+            nd['color'] = label_colors.get(primary, '#888888')
+            d = degree.get(nid, 0)
+            nd['size'] = 3 + (d / max(max_deg, 1)) * 22
+            nodes_list.append(nd)
+
+        # Deduplicate edges (keep unique source-target-type combos)
+        seen = set()
+        unique_edges = []
+        for e in edges:
+            key = (e['source'], e['target'], e['type'])
+            if key not in seen:
+                seen.add(key)
+                unique_edges.append(e)
+
+        return jsonify({
+            'nodes': nodes_list,
+            'edges': unique_edges,
+            'label_colors': label_colors,
+            'records': records[:500],  # cap tabular results
+            'keys': keys,
+            'stats': {
+                'node_count': len(nodes_list),
+                'edge_count': len(unique_edges),
+                'labels': list(label_colors.keys()),
+                'query_time_ms': round(t_query * 1000),
+                'layout_time_ms': round(t_layout * 1000),
+            },
+        })
+    except Exception as exc:
+        logger.exception("Query failed")
+        return jsonify({'error': str(exc)}), 400
+
+
+@app.route('/api/schema')
+def api_schema():
+    try:
+        labels = [r[0] for r in _execute_simple("CALL db.labels()")]
+        rel_types = [r[0] for r in _execute_simple("CALL db.relationshipTypes()")]
+        prop_keys = [r[0] for r in _execute_simple("CALL db.propertyKeys()")]
+        return jsonify({'labels': labels, 'relationship_types': rel_types, 'property_keys': prop_keys})
+    except Exception as exc:
+        return jsonify({'error': str(exc)}), 400
+
+
+@app.route('/api/connection-test')
+def api_connection_test():
+    try:
+        rows = _execute_simple("RETURN 1 AS ok")
+        if rows and rows[0][0] == 1:
+            return jsonify({'status': 'connected', 'uri': NEO4J_HTTP_URL})
+        raise RuntimeError("Unexpected response")
+    except Exception as exc:
+        return jsonify({'status': 'error', 'message': str(exc)}), 500
+
+
+@app.route('/api/reconnect', methods=['POST'])
+def api_reconnect():
+    global NEO4J_HTTP_URL, NEO4J_USER, NEO4J_PASSWORD, NEO4J_DATABASE
+    data = request.get_json(force=True)
+    new_url = data.get('uri', '').strip()
+    new_user = data.get('user', '').strip()
+    new_pass = data.get('password', '')
+
+    if not new_url:
+        return jsonify({'status': 'error', 'message': 'URL is required'}), 400
+
+    NEO4J_HTTP_URL = new_url
+    NEO4J_USER = new_user
+    NEO4J_PASSWORD = new_pass
+
+    try:
+        rows = _execute_simple("RETURN 1 AS ok")
+        if rows and rows[0][0] == 1:
+            return jsonify({'status': 'connected', 'uri': NEO4J_HTTP_URL})
+        raise RuntimeError("Unexpected response")
+    except Exception as exc:
+        return jsonify({'status': 'error', 'message': str(exc)}), 500
+
+
+@app.route('/api/layouts')
+def api_layouts():
+    return jsonify(get_available_algorithms())
+
+
+@app.route('/api/sample-queries')
+def api_sample_queries():
+    queries = [
+        {'name': 'Sample Graph (100)',
+         'query': 'MATCH (n)-[r]->(m) RETURN n, r, m LIMIT 100'},
+        {'name': 'Sample Graph (500)',
+         'query': 'MATCH (n)-[r]->(m) RETURN n, r, m LIMIT 500'},
+        {'name': 'Sample Graph (2000)',
+         'query': 'MATCH (n)-[r]->(m) RETURN n, r, m LIMIT 2000'},
+        {'name': 'Node Label Counts',
+         'query': 'MATCH (n) RETURN labels(n)[0] AS label, count(*) AS count ORDER BY count DESC LIMIT 25'},
+        {'name': 'Relationship Type Counts',
+         'query': 'MATCH ()-[r]->() RETURN type(r) AS type, count(*) AS count ORDER BY count DESC LIMIT 25'},
+        {'name': 'High-Connectivity Nodes',
+         'query': 'MATCH (n)-[r]-() WITH n, count(r) AS degree ORDER BY degree DESC LIMIT 20 MATCH (n)-[r2]->(m) RETURN n, r2, m LIMIT 300'},
+        {'name': 'Shortest Path (sample)',
+         'query': 'MATCH (a), (b) WHERE a <> b WITH a, b LIMIT 1 MATCH path = shortestPath((a)-[*..5]-(b)) RETURN path'},
+        {'name': 'Connected Component (depth 3)',
+         'query': 'MATCH (start) WITH start LIMIT 1 MATCH path = (start)-[*1..3]-(connected) RETURN path LIMIT 300'},
+        {'name': 'Schema Visualization',
+         'query': 'CALL db.schema.visualization()'},
+    ]
+    return jsonify(queries)
+
+
+@app.route('/api/demo', methods=['POST'])
+def api_demo():
+    """Generate a demo graph for testing the visualization without Neo4j."""
+    import random
+    data = request.get_json(force=True) if request.is_json else {}
+    size = min(int(data.get('size', 300)), 5000)
+    layout_algo = data.get('layout', 'auto')
+    spacing = float(data.get('spacing', 1.0))
+    iterations = int(data.get('iterations', 300))
+
+    random.seed(42)
+
+    label_types = ['Product', 'Category', 'Brand', 'Supplier', 'Attribute',
+                   'Color', 'Material', 'Tag', 'Collection', 'Review']
+    rel_types = ['BELONGS_TO', 'MADE_BY', 'SUPPLIED_BY', 'HAS_ATTRIBUTE',
+                 'HAS_COLOR', 'MADE_OF', 'TAGGED_WITH', 'PART_OF', 'REVIEWED_IN', 'SIMILAR_TO']
+
+    adj_names = ['Premium', 'Eco', 'Organic', 'Classic', 'Modern', 'Vintage',
+                 'Smart', 'Ultra', 'Compact', 'Deluxe']
+    noun_names = ['Widget', 'Gadget', 'Module', 'Unit', 'Element', 'Component',
+                  'System', 'Kit', 'Bundle', 'Pack']
+
+    nodes_dict = {}
+    edges = []
+
+    # assign label distribution (more products, fewer reviews)
+    weights = [30, 15, 10, 8, 10, 5, 5, 7, 5, 5]
+
+    for i in range(size):
+        r = random.random() * sum(weights)
+        cumulative = 0
+        chosen_label = label_types[0]
+        for idx, w in enumerate(weights):
+            cumulative += w
+            if r <= cumulative:
+                chosen_label = label_types[idx]
+                break
+
+        name = f"{random.choice(adj_names)} {random.choice(noun_names)} {i}"
+        nid = f"demo_{i}"
+        nodes_dict[nid] = {
+            'id': nid,
+            'labels': [chosen_label],
+            'properties': {'name': name, 'sku': f"SKU-{i:05d}", 'price': round(random.uniform(5, 500), 2)},
+            'label': name,
+        }
+
+    # Create edges — mix of random & preferential attachment
+    node_ids = list(nodes_dict.keys())
+    edge_count = int(size * 1.5)
+    degree = defaultdict(int)
+    for _ in range(edge_count):
+        src = random.choice(node_ids)
+        # Preferential attachment: higher-degree nodes more likely as targets
+        if random.random() < 0.3 and degree:
+            top = sorted(degree, key=degree.get, reverse=True)[:max(1, len(top) if 'top' in dir() else 10)]
+            tgt = random.choice(top)
+        else:
+            tgt = random.choice(node_ids)
+        if src != tgt:
+            edges.append({
+                'id': f"edge_{len(edges)}",
+                'source': src,
+                'target': tgt,
+                'type': random.choice(rel_types),
+                'properties': {},
+            })
+            degree[src] += 1
+            degree[tgt] += 1
+
+    # Color
+    label_colors = {lt: color_for_label(lt) for lt in label_types}
+
+    # Layout
+    t1 = time.time()
+    positions = compute_layout(nodes_dict, edges, algorithm=layout_algo, spacing=spacing, iterations=iterations)
+    t_layout = time.time() - t1
+
+    max_deg = max(degree.values()) if degree else 1
+    nodes_list = []
+    for nid, nd in nodes_dict.items():
+        pos = positions.get(nid, {'x': 0, 'y': 0})
+        primary = nd['labels'][0]
+        nd['x'] = pos['x']
+        nd['y'] = pos['y']
+        nd['color'] = label_colors.get(primary, '#888')
+        d = degree.get(nid, 0)
+        nd['size'] = 3 + (d / max(max_deg, 1)) * 22
+        nodes_list.append(nd)
+
+    return jsonify({
+        'nodes': nodes_list,
+        'edges': edges,
+        'label_colors': label_colors,
+        'records': [],
+        'keys': [],
+        'stats': {
+            'node_count': len(nodes_list),
+            'edge_count': len(edges),
+            'labels': list(label_colors.keys()),
+            'query_time_ms': 0,
+            'layout_time_ms': round(t_layout * 1000),
+        },
+    })
+
+
+# ---------------------------------------------------------------------------
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5555)
diff --git a/layout_engine.py b/layout_engine.py
new file mode 100644
index 0000000..161c9f2
--- /dev/null
+++ b/layout_engine.py
@@ -0,0 +1,292 @@
+"""
+Layout Engine - Efficient graph layout precomputation for large graphs.
+
+Uses igraph (C-based) for maximum performance, with networkx fallback.
+Supports multiple layout algorithms optimized for different graph sizes and structures.
+"""
+
+import numpy as np
+import time
+import logging
+from collections import defaultdict
+
+logger = logging.getLogger(__name__)
+
+try:
+    import igraph as ig
+    HAS_IGRAPH = True
+except ImportError:
+    HAS_IGRAPH = False
+    logger.warning("igraph not available, falling back to networkx layouts")
+
+import networkx as nx
+
+
+def compute_layout(nodes_dict, edges, algorithm='auto', spacing=1.0, iterations=300):
+    """
+    Precompute node positions using efficient graph layout algorithms.
+    
+    Strategy based on graph size:
+    - Small (<300 nodes): High-quality force-directed with many iterations
+    - Medium (300-3000): Force-directed with optimized parameters
+    - Large (3000-20000): Community-based layout (Louvain + per-community layout)
+    - Very large (>20000): DrL or spectral layout
+    
+    Args:
+        spacing: Multiplier for target_range (1.0 = default, >1 = more spread)
+        iterations: Number of layout iterations (higher = better quality, slower)
+    
+    Returns dict of {node_id: {'x': float, 'y': float}}
+    """
+    if not nodes_dict:
+        return {}
+
+    start_time = time.time()
+    node_ids = list(nodes_dict.keys())
+    n = len(node_ids)
+
+    if n == 0:
+        return {}
+
+    if n == 1:
+        return {node_ids[0]: {'x': 0.0, 'y': 0.0}}
+
+    # Build adjacency
+    node_index = {nid: i for i, nid in enumerate(node_ids)}
+    edge_list = []
+    for edge in edges:
+        src = edge.get('source')
+        tgt = edge.get('target')
+        if src in node_index and tgt in node_index:
+            si, ti = node_index[src], node_index[tgt]
+            if si != ti:  # skip self-loops for layout
+                edge_list.append((si, ti))
+
+    # Choose algorithm
+    if algorithm == 'auto':
+        if n > 20000:
+            algorithm = 'drl' if HAS_IGRAPH else 'spectral'
+        elif n > 3000:
+            algorithm = 'community'
+        elif n > 300:
+            algorithm = 'force_directed'
+        else:
+            algorithm = 'force_directed_hq'
+
+    logger.info(f"Computing layout for {n} nodes, {len(edge_list)} edges using '{algorithm}' (spacing={spacing}, iterations={iterations})")
+
+    if HAS_IGRAPH and algorithm != 'spectral':
+        positions = _layout_igraph(node_ids, edge_list, n, algorithm, iterations)
+    else:
+        positions = _layout_networkx(node_ids, edge_list, n, algorithm, iterations)
+
+    # Apply spacing multiplier by re-normalizing with scaled range
+    target_range = 2000 * spacing
+    elapsed = time.time() - start_time
+    logger.info(f"Layout computed in {elapsed:.2f}s")
+
+    # Re-normalize if spacing != 1.0
+    if abs(spacing - 1.0) > 0.01:
+        coords_list = [[positions[nid]['x'], positions[nid]['y']] for nid in node_ids]
+        coords = np.array(coords_list)
+        return _normalize_and_scale(node_ids, coords, target_range=target_range)
+
+    return positions
+
+
+def _layout_igraph(node_ids, edge_list, n, algorithm, iterations=300):
+    """Use igraph's C-based layout algorithms for maximum speed."""
+    g = ig.Graph(n=n, edges=edge_list, directed=False)
+
+    iters = max(50, int(iterations))
+
+    if algorithm == 'drl':
+        # DrL: Distributed Recursive Layout - excellent for very large graphs
+        layout = g.layout_drl()
+    elif algorithm == 'community':
+        # Community-based: detect communities, then layout
+        layout = _community_layout_igraph(g, iterations=iters)
+    elif algorithm == 'force_directed_hq':
+        # High quality Fruchterman-Reingold with more iterations
+        layout = g.layout_fruchterman_reingold(niter=max(iters, 500))
+    elif algorithm == 'fruchterman_reingold':
+        layout = g.layout_fruchterman_reingold(niter=iters)
+    elif algorithm == 'kamada_kawai':
+        if n < 1000:
+            layout = g.layout_kamada_kawai()
+        else:
+            layout = g.layout_fruchterman_reingold(niter=iters)
+    elif algorithm == 'circle':
+        layout = g.layout_circle()
+    else:
+        # Default: Fruchterman-Reingold
+        layout = g.layout_fruchterman_reingold(niter=iters)
+
+    coords = np.array(layout.coords)
+    return _normalize_and_scale(node_ids, coords)
+
+
+def _community_layout_igraph(g, iterations=200):
+    """
+    Community-based layout: detect communities with Louvain,
+    arrange communities in a circle, then layout nodes within each community.
+    """
+    try:
+        communities = g.community_multilevel()
+        membership = communities.membership
+    except Exception:
+        return g.layout_fruchterman_reingold(niter=200)
+
+    n = g.vcount()
+    positions = np.zeros((n, 2))
+
+    # Group nodes by community
+    comm_nodes = defaultdict(list)
+    for i, comm_id in enumerate(membership):
+        comm_nodes[comm_id].append(i)
+
+    num_communities = len(comm_nodes)
+
+    # Arrange communities in a circle
+    comm_positions = {}
+    radius = max(500, num_communities * 50)
+    for idx, comm_id in enumerate(sorted(comm_nodes.keys())):
+        angle = 2 * np.pi * idx / max(num_communities, 1)
+        comm_positions[comm_id] = (radius * np.cos(angle), radius * np.sin(angle))
+
+    # Layout nodes within each community
+    for comm_id, node_indices in comm_nodes.items():
+        cx, cy = comm_positions[comm_id]
+
+        if len(node_indices) == 1:
+            positions[node_indices[0]] = [cx, cy]
+            continue
+
+        # Create subgraph
+        subgraph = g.subgraph(node_indices)
+
+        # Use FR layout for the subgraph
+        sub_layout = subgraph.layout_fruchterman_reingold(niter=iterations)
+        sub_coords = np.array(sub_layout.coords)
+
+        # Scale based on community size
+        scale = max(30, np.sqrt(len(node_indices)) * 15)
+        if sub_coords.std() > 0:
+            sub_coords = (sub_coords - sub_coords.mean(axis=0)) / max(sub_coords.std(), 1e-6) * scale
+
+        # Offset to community position
+        for local_idx, global_idx in enumerate(node_indices):
+            positions[global_idx] = [cx + sub_coords[local_idx][0], cy + sub_coords[local_idx][1]]
+
+    return ig.Layout(positions.tolist())
+
+
+def _layout_networkx(node_ids, edge_list, n, algorithm, iterations=300):
+    """Fallback to networkx layouts."""
+    G = nx.Graph()
+    G.add_nodes_from(range(n))
+    G.add_edges_from(edge_list)
+
+    iters = max(50, int(iterations))
+
+    if algorithm == 'spectral':
+        try:
+            pos = nx.spectral_layout(G, dim=2, scale=1000)
+        except Exception:
+            pos = nx.spring_layout(G, seed=42, scale=1000, iterations=iters)
+    elif algorithm in ('force_directed_hq', 'force_directed'):
+        k = 2.0 / np.sqrt(max(n, 1))
+        pos = nx.spring_layout(G, k=k, iterations=iters, scale=1000, seed=42)
+    elif algorithm == 'community':
+        pos = _community_layout_networkx(G, n)
+    elif algorithm == 'kamada_kawai':
+        if n < 500:
+            pos = nx.kamada_kawai_layout(G, scale=1000)
+        else:
+            pos = nx.spring_layout(G, seed=42, scale=1000, iterations=iters)
+    elif algorithm == 'circle':
+        pos = nx.circular_layout(G, scale=1000)
+    else:
+        k = 2.0 / np.sqrt(max(n, 1))
+        pos = nx.spring_layout(G, k=k, iterations=iters, scale=1000, seed=42)
+
+    coords = np.array([pos[i] for i in range(n)])
+    return _normalize_and_scale(node_ids, coords)
+
+
+def _community_layout_networkx(G, n):
+    """Community-based layout using networkx."""
+    try:
+        from networkx.algorithms.community import greedy_modularity_communities
+        communities = list(greedy_modularity_communities(G))
+    except Exception:
+        return nx.spring_layout(G, seed=42, scale=1000, iterations=200)
+
+    positions = {}
+    num_communities = len(communities)
+    radius = max(500, num_communities * 50)
+
+    for idx, comm in enumerate(communities):
+        angle = 2 * np.pi * idx / max(num_communities, 1)
+        cx = radius * np.cos(angle)
+        cy = radius * np.sin(angle)
+
+        comm_nodes = list(comm)
+        if len(comm_nodes) == 1:
+            positions[comm_nodes[0]] = np.array([cx, cy])
+            continue
+
+        subG = G.subgraph(comm_nodes)
+        sub_pos = nx.spring_layout(subG, seed=42, scale=max(20, np.sqrt(len(comm_nodes)) * 15), iterations=200)
+
+        for node, pos in sub_pos.items():
+            positions[node] = pos + np.array([cx, cy])
+
+    return positions
+
+
+def _normalize_and_scale(node_ids, coords, target_range=2000):
+    """Normalize coordinates to a centered range for consistent rendering."""
+    if len(coords) == 0:
+        return {}
+
+    # Center
+    center = coords.mean(axis=0)
+    coords = coords - center
+
+    # Scale to target range
+    max_extent = max(np.abs(coords).max(), 1e-6)
+    coords = coords / max_extent * (target_range / 2)
+
+    # Add slight jitter to prevent perfect overlaps
+    jitter = np.random.RandomState(42).uniform(-1, 1, coords.shape) * 2
+    coords += jitter
+
+    positions = {}
+    for i, node_id in enumerate(node_ids):
+        positions[node_id] = {'x': float(coords[i][0]), 'y': float(coords[i][1])}
+
+    return positions
+
+
+def get_available_algorithms():
+    """Return list of available layout algorithms."""
+    algos = [
+        {'id': 'auto', 'name': 'Auto (best for size)', 'description': 'Automatically selects based on graph size'},
+        {'id': 'force_directed', 'name': 'Force-Directed', 'description': 'Classic spring-electric layout'},
+        {'id': 'force_directed_hq', 'name': 'Force-Directed (HQ)', 'description': 'Higher quality, more iterations'},
+        {'id': 'community', 'name': 'Community-Based', 'description': 'Groups by community detection'},
+        {'id': 'circle', 'name': 'Circular', 'description': 'Nodes arranged in a circle'},
+    ]
+
+    if HAS_IGRAPH:
+        algos.extend([
+            {'id': 'drl', 'name': 'DrL (Large Graphs)', 'description': 'Distributed Recursive Layout for 10k+ nodes'},
+            {'id': 'kamada_kawai', 'name': 'Kamada-Kawai', 'description': 'Energy-based layout (small graphs)'},
+        ])
+    else:
+        algos.append(
+            {'id': 'spectral', 'name': 'Spectral', 'description': 'Eigenvalue-based layout (fast for large graphs)'},
+        )
+
+    return algos
diff --git a/requirements.txt b/requirements.txt
index 2c1bc47..7303ed1 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,7 @@
-requests
-lxml
-urllib3
+flask>=3.0
+neo4j>=5.0
+networkx>=3.0
+numpy>=1.24
+scipy>=1.10
+python-igraph>=0.11
+gunicorn>=21.0
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..d16dd3b
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,1887 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Cortex Graph Explorer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<style>
+/* =========================================================
+   CSS — Cortex Graph Explorer
+   Dark theme with glass-morphism, glow accents
+   ========================================================= */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg-deep:    #060a1a;
+  --bg-surface: rgba(12, 16, 38, 0.85);
+  --bg-card:    rgba(255,255,255,0.04);
+  --bg-card-hover: rgba(255,255,255,0.07);
+  --border:     rgba(255,255,255,0.08);
+  --border-glow:rgba(0,212,255,0.25);
+  --text:       #e2e8f0;
+  --text-dim:   #7a8ba8;
+  --text-muted: #4a5568;
+  --accent:     #00d4ff;
+  --accent-dim: rgba(0,212,255,0.15);
+  --danger:     #ff6b6b;
+  --success:    #6bcb77;
+  --warn:       #ffd93d;
+  --purple:     #9b59b6;
+  --radius:     12px;
+  --radius-sm:  8px;
+  --font:       'Inter', -apple-system, sans-serif;
+  --mono:       'JetBrains Mono', 'Fira Code', monospace;
+  --sidebar-w:  380px;
+  --transition: 0.25s cubic-bezier(.4,0,.2,1);
+}
+
+html, body { height: 100%; overflow: hidden; }
+body {
+  font-family: var(--font);
+  background: var(--bg-deep);
+  color: var(--text);
+  display: flex;
+  position: relative;
+}
+
+/* ---- Sidebar ---- */
+#sidebar {
+  width: var(--sidebar-w);
+  min-width: var(--sidebar-w);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface);
+  backdrop-filter: blur(24px) saturate(1.4);
+  border-right: 1px solid var(--border);
+  z-index: 10;
+  overflow: hidden;
+  transition: transform var(--transition);
+}
+#sidebar.collapsed { transform: translateX(calc(-1 * var(--sidebar-w) + 36px)); }
+
+.sidebar-header {
+  padding: 20px 20px 14px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.sidebar-header .logo {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--purple));
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 15px; color: #fff;
+  box-shadow: 0 0 20px rgba(0,212,255,0.3);
+}
+.sidebar-header h1 { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
+.sidebar-header .subtitle { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
+
+.sidebar-scroll {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+.sidebar-scroll::-webkit-scrollbar { width: 5px; }
+.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
+.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ---- Panels / Cards ---- */
+.panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.panel-head {
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .8px;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+}
+.panel-head .arrow { transition: transform var(--transition); font-size: 10px; }
+.panel-head.collapsed .arrow { transform: rotate(-90deg); }
+.panel-body { padding: 0 14px 14px; }
+.panel-body.collapsed { display: none; }
+
+/* ---- Connection indicator ---- */
+#connection-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+}
+#connection-status .dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  transition: background var(--transition), box-shadow var(--transition);
+}
+#connection-status.ok .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
+#connection-status.err .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
+
+/* ---- Query editor ---- */
+#query-editor {
+  width: 100%;
+  min-height: 120px;
+  max-height: 300px;
+  resize: vertical;
+  background: rgba(0,0,0,0.35);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  outline: none;
+  transition: border-color var(--transition), box-shadow var(--transition);
+  tab-size: 2;
+}
+#query-editor:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
+}
+#query-editor::placeholder { color: var(--text-muted); }
+
+/* ---- Controls row ---- */
+.controls-row {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+
+/* ---- Buttons ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), #0099cc);
+  color: #000;
+  box-shadow: 0 2px 12px rgba(0,212,255,0.3);
+}
+.btn-primary:hover { box-shadow: 0 4px 20px rgba(0,212,255,0.5); transform: translateY(-1px); }
+.btn-primary:active { transform: translateY(0); }
+.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
+.btn-secondary {
+  background: var(--bg-card);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+.btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-glow); }
+.btn-sm { padding: 5px 10px; font-size: 11px; }
+
+/* ---- Select ---- */
+.styled-select {
+  background: rgba(0,0,0,0.35);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 12px;
+  outline: none;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+}
+.styled-select:focus { border-color: var(--accent); }
+.styled-select option { background: #141428; color: var(--text); }
+
+/* ---- Sample queries ---- */
+.sample-query {
+  display: block;
+  padding: 8px 10px;
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: var(--text-dim);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+  border: 1px solid transparent;
+}
+.sample-query:hover {
+  background: var(--accent-dim);
+  color: var(--accent);
+  border-color: var(--border-glow);
+}
+
+/* ---- Schema tags ---- */
+.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
+.tag {
+  display: inline-block;
+  padding: 3px 9px;
+  font-size: 11px;
+  border-radius: 20px;
+  background: var(--accent-dim);
+  color: var(--accent);
+  border: 1px solid rgba(0,212,255,0.15);
+  font-family: var(--mono);
+  cursor: default;
+}
+.tag.rel {
+  background: rgba(255,107,107,0.12);
+  color: var(--danger);
+  border-color: rgba(255,107,107,0.15);
+}
+
+/* ---- Stats bar ---- */
+#stats-bar {
+  padding: 10px 14px;
+  font-size: 11px;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+#stats-bar .stat-val { color: var(--accent); font-weight: 600; font-family: var(--mono); }
+
+/* ---- Legend ---- */
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.legend-dot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ---- Graph area ---- */
+#graph-area {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: radial-gradient(ellipse at 50% 50%, #0e1230 0%, #060a1a 70%);
+}
+#graph-canvas {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  cursor: grab;
+}
+#graph-canvas:active { cursor: grabbing; }
+
+/* ---- Overlay controls ---- */
+.graph-controls {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 5;
+}
+.graph-controls button {
+  width: 36px; height: 36px;
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
+  backdrop-filter: blur(12px);
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+.graph-controls button:hover {
+  background: var(--bg-card-hover);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ---- Tooltip ---- */
+#tooltip {
+  position: absolute;
+  pointer-events: none;
+  background: var(--bg-surface);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-glow);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  max-width: 360px;
+  min-width: 180px;
+  font-size: 12px;
+  z-index: 20;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity .15s, transform .15s;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.08);
+}
+#tooltip.visible { opacity: 1; transform: translateY(0); }
+#tooltip .tt-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
+#tooltip .tt-labels { margin-bottom: 6px; }
+#tooltip .tt-props { color: var(--text-dim); line-height: 1.7; }
+#tooltip .tt-props .key { color: var(--accent); font-family: var(--mono); font-size: 11px; }
+#tooltip .tt-props .val { color: var(--text); }
+
+/* ---- Loading overlay ---- */
+#loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(6,10,26,0.85);
+  backdrop-filter: blur(8px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 30;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .3s;
+}
+#loading-overlay.active { opacity: 1; pointer-events: all; }
+.spinner {
+  width: 40px; height: 40px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+  margin-bottom: 14px;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+#loading-text { font-size: 13px; color: var(--text-dim); }
+
+/* ---- Table view ---- */
+#table-view {
+  display: none;
+  position: absolute;
+  inset: 0;
+  background: var(--bg-deep);
+  z-index: 8;
+  overflow: auto;
+  padding: 20px;
+}
+#table-view.active { display: block; }
+#table-view table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+#table-view th {
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 600;
+  color: var(--accent);
+  border-bottom: 2px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--bg-deep);
+  font-family: var(--mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+#table-view td {
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-dim);
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--mono);
+  font-size: 11px;
+}
+#table-view tr:hover td { background: var(--bg-card); color: var(--text); }
+
+/* ---- View toggle ---- */
+.view-toggle {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  background: var(--bg-surface);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  overflow: hidden;
+  z-index: 9;
+}
+.view-toggle button {
+  padding: 7px 18px;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.view-toggle button.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+.view-toggle button:hover:not(.active) { color: var(--text); }
+
+/* ---- Search box ---- */
+#node-search {
+  width: 100%;
+  padding: 8px 12px;
+  background: rgba(0,0,0,0.3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 12px;
+  outline: none;
+  margin-bottom: 8px;
+  transition: border-color var(--transition);
+}
+#node-search:focus { border-color: var(--accent); }
+#node-search::placeholder { color: var(--text-muted); }
+
+/* ---- Sidebar toggle ---- */
+#sidebar-toggle {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 15;
+  width: 32px; height: 32px;
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
+  backdrop-filter: blur(12px);
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+#sidebar.collapsed ~ #graph-area #sidebar-toggle { display: flex; }
+
+/* ---- Error toast ---- */
+#error-toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: rgba(255,107,107,0.15);
+  border: 1px solid var(--danger);
+  color: var(--danger);
+  padding: 12px 24px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity .3s, transform .3s;
+  max-width: 600px;
+  text-align: center;
+  backdrop-filter: blur(12px);
+}
+#error-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* ---- Minimap ---- */
+#minimap {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  width: 160px;
+  height: 120px;
+  background: rgba(6,10,26,0.7);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  z-index: 5;
+  overflow: hidden;
+}
+#minimap-canvas { width: 100%; height: 100%; }
+
+/* ---- Range sliders ---- */
+.slider-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.slider-row label {
+  font-size: 11px;
+  color: var(--text-dim);
+  min-width: 90px;
+  white-space: nowrap;
+}
+.slider-row input[type="range"] {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px rgba(0,212,255,0.4);
+  cursor: pointer;
+  transition: box-shadow .2s;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 14px rgba(0,212,255,0.7);
+}
+.slider-row input[type="range"]::-moz-range-thumb {
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: none;
+  box-shadow: 0 0 8px rgba(0,212,255,0.4);
+  cursor: pointer;
+}
+.slider-row .slider-val {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--accent);
+  min-width: 32px;
+  text-align: right;
+}
+.color-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.color-row label {
+  font-size: 11px;
+  color: var(--text-dim);
+  min-width: 90px;
+}
+.color-row input[type="color"] {
+  -webkit-appearance: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  width: 32px; height: 24px;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+}
+.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
+.color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
+.color-row select {
+  flex: 1;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 900px) {
+  :root { --sidebar-w: 320px; }
+}
+</style>
+</head>
+<body>
+
+<!-- ============ SIDEBAR ============ -->
+<div id="sidebar">
+  <div class="sidebar-header">
+    <div class="logo">G</div>
+    <div>
+      <h1>Cortex Graph Explorer</h1>
+      <div class="subtitle">Neo4j Product Graph Visualizer</div>
+    </div>
+  </div>
+
+  <div class="sidebar-scroll">
+    <!-- Connection -->
+    <div id="connection-status">
+      <div class="dot"></div>
+      <span id="conn-text">Connecting…</span>
+    </div>
+    <div id="conn-error-detail" style="display:none;font-size:11px;color:var(--danger);background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.15);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:12px;word-break:break-word"></div>
+
+    <!-- Connection Settings -->
+    <div class="panel">
+      <div class="panel-head collapsed" data-panel="conn-settings">Connection Settings <span class="arrow">▼</span></div>
+      <div class="panel-body collapsed" data-panel="conn-settings">
+        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Neo4j HTTP URL</label>
+        <input type="text" id="conn-uri" class="styled-select" style="width:100%;margin-bottom:8px" value="https://neo4j.develop.cortex.cloud.otto.de">
+        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Username</label>
+        <input type="text" id="conn-user" class="styled-select" style="width:100%;margin-bottom:8px" value="neo4j">
+        <label style="font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px">Password</label>
+        <input type="password" id="conn-pass" class="styled-select" style="width:100%;margin-bottom:8px" value="" placeholder="(empty)">
+        <button class="btn btn-secondary btn-sm" onclick="reconnect()" style="width:100%">Reconnect</button>
+        <div style="font-size:10px;color:var(--text-muted);margin-top:6px">Uses Neo4j HTTP Transactional API</div>
+      </div>
+    </div>
+
+    <!-- Query Editor -->
+    <div class="panel">
+      <div class="panel-head" data-panel="query">Cypher Query <span class="arrow">▼</span></div>
+      <div class="panel-body" data-panel="query">
+        <textarea id="query-editor" spellcheck="false" placeholder="MATCH (n)-[r]->(m)&#10;RETURN n, r, m&#10;LIMIT 100"></textarea>
+        <div class="controls-row">
+          <button class="btn btn-primary" id="run-btn" onclick="runQuery()">▶ Run</button>
+          <button class="btn btn-secondary" onclick="runDemo()" title="Generate demo graph without Neo4j">✦ Demo</button>
+          <select class="styled-select" id="layout-select" title="Layout algorithm">
+            <option value="auto">Auto Layout</option>
+          </select>
+        </div>
+        <div class="controls-row" style="margin-top:4px">
+          <select class="styled-select" id="demo-size" title="Demo graph size">
+            <option value="100">Demo: 100 nodes</option>
+            <option value="300" selected>Demo: 300 nodes</option>
+            <option value="1000">Demo: 1,000 nodes</option>
+            <option value="3000">Demo: 3,000 nodes</option>
+            <option value="5000">Demo: 5,000 nodes</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sample Queries -->
+    <div class="panel">
+      <div class="panel-head collapsed" data-panel="samples">Sample Queries <span class="arrow">▼</span></div>
+      <div class="panel-body collapsed" data-panel="samples" id="sample-queries-list"></div>
+    </div>
+
+    <!-- Schema -->
+    <div class="panel">
+      <div class="panel-head collapsed" data-panel="schema">Database Schema <span class="arrow">▼</span></div>
+      <div class="panel-body collapsed" data-panel="schema" id="schema-body">
+        <div style="color:var(--text-muted);font-size:12px">Loading…</div>
+      </div>
+    </div>
+
+    <!-- Visual Settings -->
+    <div class="panel">
+      <div class="panel-head" data-panel="visuals">Visual Settings <span class="arrow">▼</span></div>
+      <div class="panel-body" data-panel="visuals">
+        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;font-weight:600">Edges</div>
+        <div class="slider-row">
+          <label>Curvature</label>
+          <input type="range" id="sl-curvature" min="0" max="1" step="0.05" value="0.35" oninput="updateVisual('curvature',this.value)">
+          <span class="slider-val" id="sv-curvature">0.35</span>
+        </div>
+        <div class="slider-row">
+          <label>Edge Opacity</label>
+          <input type="range" id="sl-edge-opacity" min="0" max="1" step="0.02" value="0" oninput="updateVisual('edgeOpacity',this.value)">
+          <span class="slider-val" id="sv-edge-opacity">auto</span>
+        </div>
+        <div class="slider-row">
+          <label>Edge Width</label>
+          <input type="range" id="sl-edge-width" min="0.3" max="5" step="0.1" value="1" oninput="updateVisual('edgeWidth',this.value)">
+          <span class="slider-val" id="sv-edge-width">1.0</span>
+        </div>
+        <div class="color-row">
+          <label>Edge Color</label>
+          <select class="styled-select" id="edge-color-scheme" onchange="updateVisual('edgeColorScheme',this.value)" style="flex:1">
+            <option value="byType" selected>By Rel Type</option>
+            <option value="gradient">Gradient (src→tgt)</option>
+            <option value="uniform">Uniform Color</option>
+          </select>
+        </div>
+        <div class="color-row" id="uniform-color-row" style="display:none">
+          <label>Color</label>
+          <input type="color" id="edge-uniform-color" value="#00d4ff" onchange="updateVisual('edgeColor',this.value)">
+        </div>
+
+        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin:12px 0 8px;font-weight:600">Nodes &amp; Labels</div>
+        <div class="slider-row">
+          <label>Node Size</label>
+          <input type="range" id="sl-node-size" min="0.3" max="3" step="0.1" value="1" oninput="updateVisual('nodeSize',this.value)">
+          <span class="slider-val" id="sv-node-size">1.0</span>
+        </div>
+        <div class="slider-row">
+          <label>Label Zoom</label>
+          <input type="range" id="sl-label-zoom" min="0.3" max="5" step="0.1" value="1.2" oninput="updateVisual('labelZoom',this.value)">
+          <span class="slider-val" id="sv-label-zoom">1.2</span>
+        </div>
+        <div class="slider-row">
+          <label>Label Size</label>
+          <input type="range" id="sl-label-size" min="0.3" max="4" step="0.1" value="1" oninput="updateVisual('labelSize',this.value)">
+          <span class="slider-val" id="sv-label-size">1.0</span>
+        </div>
+
+        <div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin:12px 0 8px;font-weight:600">Layout</div>
+        <div class="slider-row">
+          <label>Spacing</label>
+          <input type="range" id="sl-spacing" min="0.3" max="4" step="0.1" value="1" oninput="updateVisual('spacing',this.value)">
+          <span class="slider-val" id="sv-spacing">1.0</span>
+        </div>
+        <div class="slider-row">
+          <label>Iterations</label>
+          <input type="range" id="sl-iterations" min="50" max="1000" step="50" value="300" oninput="updateVisual('iterations',this.value)">
+          <span class="slider-val" id="sv-iterations">300</span>
+        </div>
+        <div style="font-size:10px;color:var(--text-muted);margin-top:6px">Spacing &amp; Iterations apply on next query run</div>
+      </div>
+    </div>
+
+    <!-- Node Search -->
+    <div class="panel">
+      <div class="panel-head" data-panel="search">Search Nodes <span class="arrow">▼</span></div>
+      <div class="panel-body" data-panel="search">
+        <input type="text" id="node-search" placeholder="Search by label…" oninput="searchNodes(this.value)">
+        <div id="search-results"></div>
+      </div>
+    </div>
+
+    <!-- Legend -->
+    <div class="panel">
+      <div class="panel-head" data-panel="legend">Legend <span class="arrow">▼</span></div>
+      <div class="panel-body" data-panel="legend" id="legend-body">
+        <div style="color:var(--text-muted);font-size:12px">Run a query to see labels</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Stats bar -->
+  <div id="stats-bar">
+    <span>Nodes: <span class="stat-val" id="stat-nodes">0</span></span>
+    <span>Edges: <span class="stat-val" id="stat-edges">0</span></span>
+    <span>Query: <span class="stat-val" id="stat-query-ms">–</span></span>
+    <span>Layout: <span class="stat-val" id="stat-layout-ms">–</span></span>
+  </div>
+</div>
+
+<!-- ============ GRAPH AREA ============ -->
+<div id="graph-area">
+  <div class="view-toggle">
+    <button class="active" id="btn-graph-view" onclick="setView('graph')">Graph</button>
+    <button id="btn-table-view" onclick="setView('table')">Table</button>
+  </div>
+
+  <canvas id="graph-canvas"></canvas>
+  <div id="table-view"></div>
+
+  <div id="minimap"><canvas id="minimap-canvas"></canvas></div>
+
+  <div class="graph-controls">
+    <button onclick="zoomIn()" title="Zoom in">+</button>
+    <button onclick="zoomOut()" title="Zoom out">−</button>
+    <button onclick="fitGraph()" title="Fit to screen">⊡</button>
+    <button onclick="resetView()" title="Reset">↺</button>
+  </div>
+
+  <div id="tooltip">
+    <div class="tt-label"></div>
+    <div class="tt-labels"></div>
+    <div class="tt-props"></div>
+  </div>
+
+  <div id="loading-overlay">
+    <div class="spinner"></div>
+    <div id="loading-text">Executing query…</div>
+  </div>
+
+  <button id="sidebar-toggle" onclick="toggleSidebar()">☰</button>
+</div>
+
+<div id="error-toast"></div>
+
+<!-- ============================================================
+     JAVASCRIPT — Graph Renderer & Application Logic
+     ============================================================ -->
+<script>
+(function() {
+'use strict';
+
+/* =================================================================
+   STATE
+   ================================================================= */
+const state = {
+  nodes: [],
+  edges: [],
+  records: [],
+  keys: [],
+  labelColors: {},
+  // Spatial index
+  quadtree: null,
+  // Interaction
+  hoveredNode: null,
+  selectedNode: null,
+  highlightedNodes: new Map(),  // nodeId -> hop distance
+  highlightedEdges: new Map(),  // edge index -> hop distance
+  // View
+  currentView: 'graph',
+  // Edge index
+  edgeIndex: {},  // nodeId -> [edge indices]
+  // Visual settings (synced with sliders)
+  vis: {
+    curvature: 0.35,
+    edgeOpacity: 0,      // 0 = auto
+    edgeWidth: 1.0,
+    edgeColorScheme: 'byType',  // 'byType' | 'gradient' | 'uniform'
+    edgeColor: '#00d4ff',
+    nodeSize: 1.0,
+    labelZoom: 1.2,
+    labelSize: 1.0,
+    spacing: 1.0,
+    iterations: 300,
+  },
+};
+
+/* Canvas & rendering */
+const canvas = document.getElementById('graph-canvas');
+const ctx = canvas.getContext('2d');
+const mmCanvas = document.getElementById('minimap-canvas');
+const mmCtx = mmCanvas.getContext('2d');
+
+let dpr = window.devicePixelRatio || 1;
+let width, height;
+let transform = d3.zoomIdentity;
+let zoomBehavior;
+
+/* =================================================================
+   INIT
+   ================================================================= */
+function init() {
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+  setupZoom();
+  setupHover();
+  loadLayouts();
+  loadSampleQueries();
+  loadSchema();
+  testConnection();
+  setupPanelToggles();
+  setupKeyboard();
+  draw();
+}
+
+function resizeCanvas() {
+  const rect = canvas.parentElement.getBoundingClientRect();
+  width = rect.width;
+  height = rect.height;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+  // Minimap
+  const mr = mmCanvas.parentElement.getBoundingClientRect();
+  mmCanvas.width = mr.width * dpr;
+  mmCanvas.height = mr.height * dpr;
+  mmCanvas.style.width = mr.width + 'px';
+  mmCanvas.style.height = mr.height + 'px';
+
+  draw();
+}
+
+/* =================================================================
+   ZOOM & PAN (D3)
+   ================================================================= */
+function setupZoom() {
+  zoomBehavior = d3.zoom()
+    .scaleExtent([0.01, 20])
+    .on('zoom', (event) => {
+      transform = event.transform;
+      draw();
+    });
+  d3.select(canvas).call(zoomBehavior);
+  // Disable double-click zoom
+  d3.select(canvas).on('dblclick.zoom', null);
+}
+
+window.zoomIn = () => d3.select(canvas).transition().duration(300).call(zoomBehavior.scaleBy, 1.4);
+window.zoomOut = () => d3.select(canvas).transition().duration(300).call(zoomBehavior.scaleBy, 0.7);
+
+window.fitGraph = function() {
+  if (!state.nodes.length) return;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of state.nodes) {
+    if (n.x < minX) minX = n.x;
+    if (n.x > maxX) maxX = n.x;
+    if (n.y < minY) minY = n.y;
+    if (n.y > maxY) maxY = n.y;
+  }
+  const gw = maxX - minX || 1;
+  const gh = maxY - minY || 1;
+  const pad = 60;
+  const scale = Math.min((width - 2*pad) / gw, (height - 2*pad) / gh, 5);
+  const cx = (minX + maxX) / 2;
+  const cy = (minY + maxY) / 2;
+  const tx = width/2 - cx * scale;
+  const ty = height/2 - cy * scale;
+  d3.select(canvas).transition().duration(600).ease(d3.easeCubicInOut)
+    .call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+};
+
+window.resetView = function() {
+  d3.select(canvas).transition().duration(500)
+    .call(zoomBehavior.transform, d3.zoomIdentity);
+};
+
+/* =================================================================
+   HOVER / CLICK
+   ================================================================= */
+function setupHover() {
+  canvas.addEventListener('mousemove', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    // Convert to graph coords
+    const gx = (mx - transform.x) / transform.k;
+    const gy = (my - transform.y) / transform.k;
+    const node = findNodeAt(gx, gy);
+    if (node !== state.hoveredNode) {
+      state.hoveredNode = node;
+      updateHighlight();
+      draw();
+      updateTooltip(e, node);
+    } else if (node) {
+      updateTooltip(e, node);
+    }
+    canvas.style.cursor = node ? 'pointer' : 'grab';
+  });
+
+  canvas.addEventListener('mouseleave', () => {
+    state.hoveredNode = null;
+    updateHighlight();
+    draw();
+    hideTooltip();
+  });
+
+  canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const gx = (mx - transform.x) / transform.k;
+    const gy = (my - transform.y) / transform.k;
+    const node = findNodeAt(gx, gy);
+    state.selectedNode = (state.selectedNode === node) ? null : node;
+    updateHighlight();
+    draw();
+  });
+
+  canvas.addEventListener('dblclick', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const gx = (mx - transform.x) / transform.k;
+    const gy = (my - transform.y) / transform.k;
+    const node = findNodeAt(gx, gy);
+    if (node) {
+      // Zoom to node
+      const scale = 3;
+      const tx = width/2 - node.x * scale;
+      const ty = height/2 - node.y * scale;
+      d3.select(canvas).transition().duration(600)
+        .call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+    }
+  });
+}
+
+function findNodeAt(gx, gy) {
+  // Use quadtree for efficient hit testing
+  if (state.quadtree) {
+    const hitRadius = 20 / Math.max(transform.k, 0.1);
+    return state.quadtree.find(gx, gy, hitRadius) || null;
+  }
+  return null;
+}
+
+function updateHighlight() {
+  state.highlightedNodes.clear();
+  state.highlightedEdges.clear();
+  const focus = state.selectedNode || state.hoveredNode;
+  if (!focus) return;
+
+  // BFS: propagate highlight with increasing hop distance
+  const maxHops = 6;
+  state.highlightedNodes.set(focus.id, 0);
+  const queue = [focus.id];
+  let depth = 0;
+
+  while (queue.length > 0 && depth < maxHops) {
+    const nextQueue = [];
+    for (const nodeId of queue) {
+      const indices = state.edgeIndex[nodeId] || [];
+      for (const idx of indices) {
+        if (state.highlightedEdges.has(idx)) continue;
+        const e = state.edges[idx];
+        const neighbor = e.source === nodeId ? e.target : e.source;
+        state.highlightedEdges.set(idx, depth + 1);
+        if (!state.highlightedNodes.has(neighbor)) {
+          state.highlightedNodes.set(neighbor, depth + 1);
+          nextQueue.push(neighbor);
+        }
+      }
+    }
+    queue.length = 0;
+    queue.push(...nextQueue);
+    depth++;
+  }
+}
+
+/* =================================================================
+   TOOLTIP
+   ================================================================= */
+const tooltip = document.getElementById('tooltip');
+
+function updateTooltip(event, node) {
+  if (!node) { hideTooltip(); return; }
+  const ttLabel = tooltip.querySelector('.tt-label');
+  const ttLabels = tooltip.querySelector('.tt-labels');
+  const ttProps = tooltip.querySelector('.tt-props');
+
+  ttLabel.textContent = node.label;
+  ttLabels.innerHTML = (node.labels || []).map(l =>
+    `<span class="tag" style="background:${hexToAlpha(state.labelColors[l]||'#888', 0.2)};color:${state.labelColors[l]||'#888'};border-color:${hexToAlpha(state.labelColors[l]||'#888', 0.3)}">${l}</span>`
+  ).join(' ');
+
+  const props = node.properties || {};
+  const propKeys = Object.keys(props).slice(0, 12);
+  ttProps.innerHTML = propKeys.map(k => {
+    let v = props[k];
+    if (typeof v === 'object') v = JSON.stringify(v);
+    if (typeof v === 'string' && v.length > 60) v = v.substring(0, 57) + '…';
+    return `<div><span class="key">${k}:</span> <span class="val">${escHtml(String(v))}</span></div>`;
+  }).join('');
+
+  tooltip.classList.add('visible');
+  const x = event.clientX + 14;
+  const y = event.clientY - 10;
+  const graphRect = document.getElementById('graph-area').getBoundingClientRect();
+  tooltip.style.left = Math.min(x, graphRect.right - 380) + 'px';
+  tooltip.style.top = Math.min(y, graphRect.bottom - 200) + 'px';
+}
+
+function hideTooltip() {
+  tooltip.classList.remove('visible');
+}
+
+/* =================================================================
+   DRAW — Canvas Rendering
+   ================================================================= */
+function draw() {
+  ctx.save();
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, width, height);
+
+  // Background gradient
+  const bgGrad = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, Math.max(width, height)*0.7);
+  bgGrad.addColorStop(0, '#0e1230');
+  bgGrad.addColorStop(1, '#060a1a');
+  ctx.fillStyle = bgGrad;
+  ctx.fillRect(0, 0, width, height);
+
+  // Subtle grid
+  drawGrid();
+
+  // Apply transform
+  ctx.translate(transform.x, transform.y);
+  ctx.scale(transform.k, transform.k);
+
+  const isHighlighting = state.highlightedNodes.size > 0;
+  const maxHopInHighlight = isHighlighting ? Math.max(...state.highlightedEdges.values(), 1) : 1;
+  const nodeCount = state.nodes.length;
+  const edgeCount = state.edges.length;
+
+  // Build node lookup for edge drawing
+  const nodeMap = state._nodeMap;
+  const V = state.vis;
+
+  // === EDGES ===
+  const autoAlpha = Math.max(0.03, Math.min(0.35, 30 / Math.sqrt(Math.max(edgeCount, 1))));
+  const baseAlpha = V.edgeOpacity > 0 ? V.edgeOpacity : autoAlpha;
+  const baseLw = Math.max(0.3, Math.min(1.5, 2 / Math.max(transform.k, 0.2))) * V.edgeWidth;
+  const curvature = V.curvature;
+
+  // Edge color palette by relationship type
+  const relColorCache = {};
+  function relColor(type) {
+    if (relColorCache[type]) return relColorCache[type];
+    let hash = 0;
+    for (let i = 0; i < type.length; i++) hash = ((hash << 5) - hash + type.charCodeAt(i)) | 0;
+    const h = ((hash % 360) + 360) % 360;
+    relColorCache[type] = `hsla(${h}, 50%, 60%, `;
+    return relColorCache[type];
+  }
+
+  function hexToRgba(hex, alpha) {
+    hex = hex.replace('#', '');
+    const r = parseInt(hex.substring(0,2), 16);
+    const g = parseInt(hex.substring(2,4), 16);
+    const b = parseInt(hex.substring(4,6), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+
+  // Detect multi-edges for curving
+  const edgePairCount = {};
+  const edgePairIndex = {};
+  for (let i = 0; i < edgeCount; i++) {
+    const e = state.edges[i];
+    const pairKey = e.source < e.target ? e.source + '|' + e.target : e.target + '|' + e.source;
+    edgePairCount[pairKey] = (edgePairCount[pairKey] || 0) + 1;
+    edgePairIndex[i] = edgePairCount[pairKey] - 1;
+  }
+
+  for (let i = 0; i < edgeCount; i++) {
+    const e = state.edges[i];
+    const src = nodeMap[e.source];
+    const tgt = nodeMap[e.target];
+    if (!src || !tgt) continue;
+
+    const sx = src.x, sy = src.y, tx = tgt.x, ty = tgt.y;
+    if (!lineVisible(sx, sy, tx, ty)) continue;
+
+    let alpha = baseAlpha;
+    let lw = baseLw;
+
+    if (isHighlighting) {
+      if (state.highlightedEdges.has(i)) {
+        const hop = state.highlightedEdges.get(i);
+        const fade = Math.pow(0.35, hop);  // steeper exponential decay per hop
+        const maxAlpha = V.edgeOpacity > 0 ? V.edgeOpacity : 0.9;
+        alpha = maxAlpha * fade;
+        lw *= 1 + 1.5 * fade;
+      } else {
+        alpha *= 0.04;
+      }
+    }
+
+    // Determine curve offset for multi-edges + global curvature
+    const pairKey = e.source < e.target ? e.source + '|' + e.target : e.target + '|' + e.source;
+    const pairTotal = edgePairCount[pairKey] || 1;
+    const pairIdx = edgePairIndex[i] || 0;
+
+    const dx = tx - sx;
+    const dy = ty - sy;
+    const dist = Math.sqrt(dx * dx + dy * dy + 0.01);
+    const nx_ = -dy / dist;  // perpendicular normal
+    const ny_ = dx / dist;
+
+    // Multi-edge spread + base curvature
+    let offset = 0;
+    if (pairTotal > 1) {
+      offset = (pairIdx - (pairTotal - 1) / 2) * 30 * Math.max(curvature, 0.3);
+    } else if (curvature > 0) {
+      // Single edge: use a deterministic offset based on edge index
+      const sign = (i % 2 === 0) ? 1 : -1;
+      offset = sign * curvature * dist * 0.15;
+    }
+
+    const mx = (sx + tx) / 2;
+    const my = (sy + ty) / 2;
+    const cpx = mx + nx_ * offset;
+    const cpy = my + ny_ * offset;
+
+    // Color based on scheme
+    let strokeStyle;
+    if (V.edgeColorScheme === 'uniform') {
+      strokeStyle = hexToRgba(V.edgeColor, alpha);
+    } else if (V.edgeColorScheme === 'gradient' && src.color && tgt.color) {
+      const grad = ctx.createLinearGradient(sx, sy, tx, ty);
+      grad.addColorStop(0, hexToAlpha(src.color, alpha));
+      grad.addColorStop(1, hexToAlpha(tgt.color, alpha));
+      strokeStyle = grad;
+    } else {
+      strokeStyle = relColor(e.type || 'RELATED') + alpha + ')';
+    }
+
+    ctx.beginPath();
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lw;
+
+    if (Math.abs(offset) > 0.5) {
+      ctx.moveTo(sx, sy);
+      ctx.quadraticCurveTo(cpx, cpy, tx, ty);
+    } else {
+      ctx.moveTo(sx, sy);
+      ctx.lineTo(tx, ty);
+    }
+    ctx.stroke();
+
+    // Draw relationship type label on highlighted edges when zoomed in (first 2 hops only)
+    if (isHighlighting && state.highlightedEdges.has(i) && state.highlightedEdges.get(i) <= 2 && transform.k > 1.0) {
+      // Label at the curve midpoint
+      const lx = (pairTotal > 1 || curvature > 0) ? (sx + 2*cpx + tx) / 4 : mx;
+      const ly = (pairTotal > 1 || curvature > 0) ? (sy + 2*cpy + ty) / 4 : my;
+      const fontSize = Math.max(6, Math.min(10, 8 / Math.max(transform.k * 0.3, 0.5)));
+      ctx.font = `500 ${fontSize}px Inter, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      const colorBase = relColor(e.type || 'RELATED');
+      ctx.fillStyle = colorBase + '0.9)';
+      ctx.shadowColor = 'rgba(0,0,0,0.9)';
+      ctx.shadowBlur = 3;
+      ctx.fillText(e.type || '', lx, ly - 6);
+      ctx.shadowBlur = 0;
+    }
+  }
+
+  // === NODES ===
+  const showLabels = transform.k > V.labelZoom && nodeCount < 2000;
+  const showLabelsAlways = transform.k > V.labelZoom * 2;
+
+  for (const node of state.nodes) {
+    // Frustum culling
+    const sx = node.x * transform.k + transform.x;
+    const sy = node.y * transform.k + transform.y;
+    if (sx < -100 || sx > width + 100 || sy < -100 || sy > height + 100) continue;
+
+    const r = Math.max(1.5, node.size * V.nodeSize * Math.min(transform.k * 0.5, 4));
+    const isHighlighted = state.highlightedNodes.has(node.id);
+    const isHovered = node === state.hoveredNode;
+    const isSelected = node === state.selectedNode;
+
+    let alpha = 1;
+    if (isHighlighting) {
+      if (isHighlighted) {
+        const hop = state.highlightedNodes.get(node.id);
+        alpha = Math.max(0.15, Math.pow(0.6, hop));
+      } else {
+        alpha = 0.06;
+      }
+    }
+
+    ctx.globalAlpha = alpha;
+
+    // Glow for hovered/selected/highlighted nodes
+    if ((isHovered || isSelected || (isHighlighted && isHighlighting)) && alpha > 0.5) {
+      ctx.save();
+      ctx.shadowColor = node.color;
+      ctx.shadowBlur = isHovered ? 25 : isSelected ? 20 : 12;
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, r * 1.3, 0, Math.PI * 2);
+      ctx.fillStyle = node.color;
+      ctx.globalAlpha = alpha * 0.35;
+      ctx.fill();
+      ctx.restore();
+      ctx.globalAlpha = alpha;
+    }
+
+    // Node body — radial gradient
+    const grad = ctx.createRadialGradient(
+      node.x - r * 0.25, node.y - r * 0.25, 0,
+      node.x, node.y, r
+    );
+    grad.addColorStop(0, lightenColor(node.color, 50));
+    grad.addColorStop(1, node.color);
+
+    ctx.beginPath();
+    ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+    // Bright edge
+    ctx.strokeStyle = `rgba(255,255,255,${alpha * 0.25})`;
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+    // Label — in highlight mode only show for hop 0-1; sliders always apply
+    const hopDist = isHighlighted ? state.highlightedNodes.get(node.id) : Infinity;
+    const nearFocus = isHighlighting && isHighlighted && hopDist <= 1;
+    const normalShow = showLabelsAlways || (showLabels && r > 3);
+    const showLabel = alpha > 0.1 && (isHovered || isSelected || nearFocus || (!isHighlighting && normalShow) || (isHighlighting && normalShow && isHighlighted && hopDist <= 1));
+    if (showLabel) {
+      const fontSize = Math.max(4, Math.min(28, r * 1.2 * V.labelSize));
+      ctx.font = `500 ${fontSize}px Inter, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'top';
+      ctx.fillStyle = `rgba(255,255,255,${alpha * 0.9})`;
+      ctx.shadowColor = 'rgba(0,0,0,0.8)';
+      ctx.shadowBlur = 4;
+      const lines = wrapLabel(node.label, 20);
+      const lh = fontSize * 1.25;
+      for (let li = 0; li < lines.length; li++) {
+        ctx.fillText(lines[li], node.x, node.y + r + 3 + li * lh);
+      }
+      ctx.shadowBlur = 0;
+    }
+
+    ctx.globalAlpha = 1;
+  }
+
+  ctx.restore();
+
+  // Minimap
+  drawMinimap();
+
+  requestAnimationFrame(() => {}); // keep event loop alive
+}
+
+function drawGrid() {
+  const gridSize = 60;
+  const alpha = Math.min(0.06, 0.03 * transform.k);
+  if (alpha < 0.005) return;
+  ctx.strokeStyle = `rgba(100,140,200,${alpha})`;
+  ctx.lineWidth = 0.5;
+
+  const startX = (-transform.x / transform.k);
+  const startY = (-transform.y / transform.k);
+  const endX = startX + width / transform.k;
+  const endY = startY + height / transform.k;
+  const gs = gridSize / Math.max(transform.k, 0.05);
+
+  const gStartX = Math.floor(startX / gs) * gs;
+  const gStartY = Math.floor(startY / gs) * gs;
+
+  ctx.save();
+  ctx.translate(transform.x, transform.y);
+  ctx.scale(transform.k, transform.k);
+
+  for (let x = gStartX; x <= endX; x += gs) {
+    ctx.beginPath();
+    ctx.moveTo(x, startY);
+    ctx.lineTo(x, endY);
+    ctx.stroke();
+  }
+  for (let y = gStartY; y <= endY; y += gs) {
+    ctx.beginPath();
+    ctx.moveTo(startX, y);
+    ctx.lineTo(endX, y);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+function lineVisible(x1, y1, x2, y2) {
+  const sx1 = x1 * transform.k + transform.x;
+  const sy1 = y1 * transform.k + transform.y;
+  const sx2 = x2 * transform.k + transform.x;
+  const sy2 = y2 * transform.k + transform.y;
+  // Broad check
+  const margin = 50;
+  if (Math.max(sx1, sx2) < -margin) return false;
+  if (Math.min(sx1, sx2) > width + margin) return false;
+  if (Math.max(sy1, sy2) < -margin) return false;
+  if (Math.min(sy1, sy2) > height + margin) return false;
+  return true;
+}
+
+/* =================================================================
+   MINIMAP
+   ================================================================= */
+function drawMinimap() {
+  if (!state.nodes.length) return;
+  const mw = mmCanvas.width / dpr;
+  const mh = mmCanvas.height / dpr;
+
+  mmCtx.save();
+  mmCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  mmCtx.clearRect(0, 0, mw, mh);
+  mmCtx.fillStyle = 'rgba(6,10,26,0.9)';
+  mmCtx.fillRect(0, 0, mw, mh);
+
+  // Compute bounds
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of state.nodes) {
+    if (n.x < minX) minX = n.x;
+    if (n.x > maxX) maxX = n.x;
+    if (n.y < minY) minY = n.y;
+    if (n.y > maxY) maxY = n.y;
+  }
+  const pad = 20;
+  const gw = (maxX - minX) || 1;
+  const gh = (maxY - minY) || 1;
+  const scale = Math.min((mw - 2*pad) / gw, (mh - 2*pad) / gh);
+  const ox = (mw - gw * scale) / 2;
+  const oy = (mh - gh * scale) / 2;
+
+  // Draw nodes
+  const dotSize = Math.max(0.5, Math.min(2, 1));
+  for (const n of state.nodes) {
+    const x = (n.x - minX) * scale + ox;
+    const y = (n.y - minY) * scale + oy;
+    mmCtx.fillStyle = n.color;
+    mmCtx.globalAlpha = 0.7;
+    mmCtx.fillRect(x - dotSize/2, y - dotSize/2, dotSize, dotSize);
+  }
+  mmCtx.globalAlpha = 1;
+
+  // Viewport rectangle
+  const vx1 = (-transform.x / transform.k - minX) * scale + ox;
+  const vy1 = (-transform.y / transform.k - minY) * scale + oy;
+  const vw = (width / transform.k) * scale;
+  const vh = (height / transform.k) * scale;
+  mmCtx.strokeStyle = 'rgba(0,212,255,0.6)';
+  mmCtx.lineWidth = 1;
+  mmCtx.strokeRect(vx1, vy1, vw, vh);
+
+  mmCtx.restore();
+}
+
+/* =================================================================
+   DATA LOADING
+   ================================================================= */
+function loadGraphData(data) {
+  state.nodes = data.nodes || [];
+  state.edges = data.edges || [];
+  state.records = data.records || [];
+  state.keys = data.keys || [];
+  state.labelColors = data.label_colors || {};
+  state.hoveredNode = null;
+  state.selectedNode = null;
+  state.highlightedNodes = new Map();
+  state.highlightedEdges = new Map();
+
+  // Build node map
+  state._nodeMap = {};
+  for (const n of state.nodes) {
+    state._nodeMap[n.id] = n;
+  }
+
+  // Build edge index
+  state.edgeIndex = {};
+  for (let i = 0; i < state.edges.length; i++) {
+    const e = state.edges[i];
+    if (!state.edgeIndex[e.source]) state.edgeIndex[e.source] = [];
+    if (!state.edgeIndex[e.target]) state.edgeIndex[e.target] = [];
+    state.edgeIndex[e.source].push(i);
+    state.edgeIndex[e.target].push(i);
+  }
+
+  // Build quadtree for hit testing
+  state.quadtree = d3.quadtree()
+    .x(d => d.x)
+    .y(d => d.y)
+    .addAll(state.nodes);
+
+  // Update legend
+  updateLegend();
+  // Update stats
+  updateStats(data.stats);
+  // Update table
+  updateTable();
+
+  // Fit view
+  setTimeout(() => fitGraph(), 100);
+  draw();
+}
+
+/* =================================================================
+   LEGEND
+   ================================================================= */
+function updateLegend() {
+  const el = document.getElementById('legend-body');
+  const entries = Object.entries(state.labelColors);
+  if (!entries.length) {
+    el.innerHTML = '<div style="color:var(--text-muted);font-size:12px">No labels</div>';
+    return;
+  }
+  el.innerHTML = entries.map(([label, color]) => {
+    const count = state.nodes.filter(n => n.labels && n.labels.includes(label)).length;
+    return `<div class="legend-item">
+      <div class="legend-dot" style="background:${color};box-shadow:0 0 6px ${color}"></div>
+      <span>${escHtml(label)}</span>
+      <span style="color:var(--text-muted);font-size:11px;margin-left:auto">${count}</span>
+    </div>`;
+  }).join('');
+}
+
+function updateStats(stats) {
+  if (!stats) return;
+  document.getElementById('stat-nodes').textContent = stats.node_count?.toLocaleString() || '0';
+  document.getElementById('stat-edges').textContent = stats.edge_count?.toLocaleString() || '0';
+  document.getElementById('stat-query-ms').textContent = stats.query_time_ms ? stats.query_time_ms + 'ms' : '–';
+  document.getElementById('stat-layout-ms').textContent = stats.layout_time_ms ? stats.layout_time_ms + 'ms' : '–';
+}
+
+/* =================================================================
+   TABLE VIEW
+   ================================================================= */
+function updateTable() {
+  const el = document.getElementById('table-view');
+  if (!state.records.length || !state.keys.length) {
+    el.innerHTML = '<div style="color:var(--text-muted);padding:40px;text-align:center">No tabular data</div>';
+    return;
+  }
+  let html = '<table><thead><tr>';
+  for (const k of state.keys) {
+    html += `<th>${escHtml(k)}</th>`;
+  }
+  html += '</tr></thead><tbody>';
+  for (const row of state.records.slice(0, 500)) {
+    html += '<tr>';
+    for (const k of state.keys) {
+      let v = row[k];
+      if (v && typeof v === 'object') v = JSON.stringify(v);
+      html += `<td title="${escHtml(String(v ?? ''))}">${escHtml(String(v ?? ''))}</td>`;
+    }
+    html += '</tr>';
+  }
+  html += '</tbody></table>';
+  el.innerHTML = html;
+}
+
+/* =================================================================
+   VIEW TOGGLE
+   ================================================================= */
+window.setView = function(view) {
+  state.currentView = view;
+  document.getElementById('btn-graph-view').classList.toggle('active', view === 'graph');
+  document.getElementById('btn-table-view').classList.toggle('active', view === 'table');
+  document.getElementById('table-view').classList.toggle('active', view === 'table');
+  canvas.style.display = view === 'graph' ? 'block' : 'none';
+  document.getElementById('minimap').style.display = view === 'graph' ? 'block' : 'none';
+  if (view === 'graph') draw();
+};
+
+/* =================================================================
+   SEARCH
+   ================================================================= */
+window.searchNodes = function(query) {
+  const el = document.getElementById('search-results');
+  if (!query || query.length < 2) { el.innerHTML = ''; return; }
+  const q = query.toLowerCase();
+  const matches = state.nodes.filter(n => n.label.toLowerCase().includes(q)).slice(0, 20);
+  el.innerHTML = matches.map(n => `
+    <div class="sample-query" onclick="focusNode('${n.id}')" style="font-family:var(--mono);">
+      <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${n.color};margin-right:6px"></span>
+      ${escHtml(n.label)}
+    </div>
+  `).join('');
+};
+
+window.focusNode = function(nodeId) {
+  const node = state._nodeMap[nodeId];
+  if (!node) return;
+  state.selectedNode = node;
+  updateHighlight();
+  const scale = 3;
+  const tx = width/2 - node.x * scale;
+  const ty = height/2 - node.y * scale;
+  d3.select(canvas).transition().duration(600)
+    .call(zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
+};
+
+/* =================================================================
+   API CALLS
+   ================================================================= */
+window.runQuery = async function() {
+  const editor = document.getElementById('query-editor');
+  const query = editor.value.trim();
+  if (!query) return;
+
+  const layout = document.getElementById('layout-select').value;
+  const spacing = state.vis.spacing;
+  const iterations = state.vis.iterations;
+
+  showLoading('Executing query…');
+  try {
+    const resp = await fetch('/api/query', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ query, layout, spacing, iterations }),
+    });
+    const data = await resp.json();
+    if (data.error) throw new Error(data.error);
+    loadGraphData(data);
+    hideLoading();
+  } catch (err) {
+    hideLoading();
+    showError(err.message);
+  }
+};
+
+window.runDemo = async function() {
+  const size = parseInt(document.getElementById('demo-size').value);
+  const layout = document.getElementById('layout-select').value;
+  const spacing = state.vis.spacing;
+  const iterations = state.vis.iterations;
+  showLoading(`Generating demo graph (${size} nodes)…`);
+  try {
+    const resp = await fetch('/api/demo', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ size, layout, spacing, iterations }),
+    });
+    const data = await resp.json();
+    if (data.error) throw new Error(data.error);
+    loadGraphData(data);
+    hideLoading();
+  } catch (err) {
+    hideLoading();
+    showError(err.message);
+  }
+};
+
+async function testConnection() {
+  const errDetail = document.getElementById('conn-error-detail');
+  try {
+    const resp = await fetch('/api/connection-test');
+    const data = await resp.json();
+    const el = document.getElementById('connection-status');
+    const txt = document.getElementById('conn-text');
+    if (data.status === 'connected') {
+      el.className = '';
+      el.classList.add('ok');
+      txt.textContent = 'Connected to Neo4j';
+      errDetail.style.display = 'none';
+    } else {
+      el.className = '';
+      el.classList.add('err');
+      txt.textContent = 'Connection failed';
+      errDetail.textContent = data.message || 'Unknown error';
+      errDetail.style.display = 'block';
+    }
+  } catch (e) {
+    const el = document.getElementById('connection-status');
+    el.className = '';
+    el.classList.add('err');
+    document.getElementById('conn-text').textContent = 'Connection error';
+    errDetail.textContent = e.message;
+    errDetail.style.display = 'block';
+  }
+}
+
+window.reconnect = async function() {
+  const uri = document.getElementById('conn-uri').value.trim();
+  const user = document.getElementById('conn-user').value.trim();
+  const pass = document.getElementById('conn-pass').value;
+  document.getElementById('conn-text').textContent = 'Reconnecting…';
+  document.getElementById('conn-error-detail').style.display = 'none';
+  try {
+    const resp = await fetch('/api/reconnect', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ uri, user, password: pass }),
+    });
+    const data = await resp.json();
+    if (data.status === 'connected') {
+      document.getElementById('connection-status').className = 'ok';
+      document.getElementById('conn-text').textContent = 'Connected to Neo4j';
+      loadSchema();
+    } else {
+      document.getElementById('connection-status').className = 'err';
+      document.getElementById('conn-text').textContent = 'Connection failed';
+      const errDetail = document.getElementById('conn-error-detail');
+      errDetail.textContent = data.message || 'Unknown error';
+      errDetail.style.display = 'block';
+    }
+  } catch (e) {
+    document.getElementById('connection-status').className = 'err';
+    document.getElementById('conn-text').textContent = 'Connection error';
+  }
+};
+
+async function loadSchema() {
+  try {
+    const resp = await fetch('/api/schema');
+    const data = await resp.json();
+    if (data.error) throw new Error(data.error);
+    const el = document.getElementById('schema-body');
+    let html = '';
+    if (data.labels?.length) {
+      html += '<div style="margin-bottom:8px;font-size:11px;color:var(--text-dim);font-weight:600">NODE LABELS</div>';
+      html += '<div class="tag-list">';
+      data.labels.forEach(l => html += `<span class="tag">${escHtml(l)}</span>`);
+      html += '</div>';
+    }
+    if (data.relationship_types?.length) {
+      html += '<div style="margin:12px 0 8px;font-size:11px;color:var(--text-dim);font-weight:600">RELATIONSHIPS</div>';
+      html += '<div class="tag-list">';
+      data.relationship_types.forEach(r => html += `<span class="tag rel">${escHtml(r)}</span>`);
+      html += '</div>';
+    }
+    el.innerHTML = html || '<div style="color:var(--text-muted);font-size:12px">Empty schema</div>';
+  } catch {
+    document.getElementById('schema-body').innerHTML = '<div style="color:var(--danger);font-size:12px">Failed to load schema</div>';
+  }
+}
+
+async function loadSampleQueries() {
+  try {
+    const resp = await fetch('/api/sample-queries');
+    const queries = await resp.json();
+    const el = document.getElementById('sample-queries-list');
+    el.innerHTML = queries.map(q => `
+      <div class="sample-query" onclick="loadSample(this)" data-query="${escAttr(q.query)}">
+        ${escHtml(q.name)}
+      </div>
+    `).join('');
+  } catch {}
+}
+
+async function loadLayouts() {
+  try {
+    const resp = await fetch('/api/layouts');
+    const layouts = await resp.json();
+    const sel = document.getElementById('layout-select');
+    sel.innerHTML = '';
+    layouts.forEach(l => {
+      const opt = document.createElement('option');
+      opt.value = l.id;
+      opt.textContent = l.name;
+      opt.title = l.description;
+      sel.appendChild(opt);
+    });
+  } catch {}
+}
+
+window.loadSample = function(el) {
+  const query = el.getAttribute('data-query');
+  document.getElementById('query-editor').value = query;
+};
+
+/* =================================================================
+   PANEL TOGGLES
+   ================================================================= */
+function setupPanelToggles() {
+  document.querySelectorAll('.panel-head').forEach(head => {
+    head.addEventListener('click', () => {
+      head.classList.toggle('collapsed');
+      const panel = head.getAttribute('data-panel');
+      document.querySelector(`.panel-body[data-panel="${panel}"]`).classList.toggle('collapsed');
+    });
+  });
+}
+
+/* =================================================================
+   KEYBOARD SHORTCUTS
+   ================================================================= */
+function setupKeyboard() {
+  document.addEventListener('keydown', (e) => {
+    // Ctrl/Cmd + Enter to run query
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      runQuery();
+    }
+    // Escape to deselect
+    if (e.key === 'Escape') {
+      state.selectedNode = null;
+      state.hoveredNode = null;
+      updateHighlight();
+      draw();
+      hideTooltip();
+    }
+  });
+}
+
+/* =================================================================
+   VISUAL SETTINGS
+   ================================================================= */
+window.updateVisual = function(key, value) {
+  const num = parseFloat(value);
+  state.vis[key] = isNaN(num) ? value : num;
+  // Update display label
+  const label = document.getElementById('sv-' + key.replace(/([A-Z])/g, '-$1').toLowerCase());
+  if (label) {
+    if (key === 'edgeOpacity' && parseFloat(value) === 0) {
+      label.textContent = 'auto';
+    } else {
+      label.textContent = isNaN(num) ? value : num.toFixed(key === 'iterations' ? 0 : (key === 'spacing' ? 1 : 2));
+    }
+  }
+  // Show/hide uniform color picker
+  if (key === 'edgeColorScheme') {
+    document.getElementById('uniform-color-row').style.display = value === 'uniform' ? 'flex' : 'none';
+  }
+  draw();
+};
+
+/* =================================================================
+   UI HELPERS
+   ================================================================= */
+function showLoading(text) {
+  document.getElementById('loading-text').textContent = text || 'Loading…';
+  document.getElementById('loading-overlay').classList.add('active');
+  document.getElementById('run-btn').disabled = true;
+}
+
+function hideLoading() {
+  document.getElementById('loading-overlay').classList.remove('active');
+  document.getElementById('run-btn').disabled = false;
+}
+
+let errorTimeout;
+function showError(msg) {
+  const el = document.getElementById('error-toast');
+  el.textContent = msg;
+  el.classList.add('visible');
+  clearTimeout(errorTimeout);
+  errorTimeout = setTimeout(() => el.classList.remove('visible'), 6000);
+}
+
+window.toggleSidebar = function() {
+  document.getElementById('sidebar').classList.toggle('collapsed');
+  setTimeout(() => { resizeCanvas(); }, 300);
+};
+
+/* =================================================================
+   COLOR UTILITIES
+   ================================================================= */
+function wrapLabel(text, maxLen) {
+  if (!text || text.length <= maxLen) return [text || ''];
+  // Try to break at a space near maxLen
+  let breakIdx = text.lastIndexOf(' ', maxLen);
+  if (breakIdx < 4) breakIdx = maxLen; // no good space, hard break
+  const line1 = text.substring(0, breakIdx).trim();
+  let line2 = text.substring(breakIdx).trim();
+  if (line2.length > maxLen) line2 = line2.substring(0, maxLen - 1) + '\u2026';
+  return [line1, line2];
+}
+
+function lightenColor(hex, amount) {
+  hex = hex.replace('#', '');
+  let r = parseInt(hex.substring(0,2), 16);
+  let g = parseInt(hex.substring(2,4), 16);
+  let b = parseInt(hex.substring(4,6), 16);
+  r = Math.min(255, r + amount);
+  g = Math.min(255, g + amount);
+  b = Math.min(255, b + amount);
+  return `rgb(${r},${g},${b})`;
+}
+
+function hexToAlpha(hex, alpha) {
+  hex = hex.replace('#', '');
+  const r = parseInt(hex.substring(0,2), 16);
+  const g = parseInt(hex.substring(2,4), 16);
+  const b = parseInt(hex.substring(4,6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function escHtml(s) {
+  const map = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'};
+  return s.replace(/[&<>"']/g, m => map[m]);
+}
+
+function escAttr(s) {
+  return s.replace(/"/g, '&quot;').replace(/'/g, '&#039;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/* =================================================================
+   BOOT
+   ================================================================= */
+init();
+
+})();
+</script>
+</body>
+</html>