Fix backend structure - remove duplicates

backend/Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Expose port
+EXPOSE 8000
+
+# Run the service
+CMD ["uvicorn", "model_service:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+websockets==12.0
+torch==2.1.0
+transformers==4.35.0
+numpy==1.24.3
+pydantic==2.5.0
+python-multipart==0.0.6
+accelerate==0.24.1

frontend/AttentionExplorer.tsx

@@ -1,873 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import * as d3 from "d3";
-import { useWebSocket } from "@/lib/websocket-client";
-import { getApiUrl } from "@/lib/config";
-import { Download, Layers, RefreshCw, ZoomIn, ZoomOut, Eye, Activity, HelpCircle, X, Info, Zap } from "lucide-react";
-import { TraceData } from "@/lib/types";
-
-interface AttentionData {
-  layer: string;
-  weights: number[][];
-  tokens?: string[];
-  max_weight: number;
-  entropy?: number;
-  timestamp: number;
-}
-
-export default function AttentionExplorer() {
-  const { lastMessage, traces, isConnected } = useWebSocket();
-  const svgRef = useRef<SVGSVGElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  
-  const [selectedLayer, setSelectedLayer] = useState<string>("");
-  const [attentionData, setAttentionData] = useState<AttentionData[]>([]);
-  const [currentAttention, setCurrentAttention] = useState<AttentionData | null>(null);
-  const [availableLayers, setAvailableLayers] = useState<string[]>([]);
-  const [zoom, setZoom] = useState(1);
-  const [hoveredCell, setHoveredCell] = useState<{row: number, col: number, value: number} | null>(null);
-  const [colorScheme, setColorScheme] = useState<'blues' | 'viridis' | 'plasma'>('blues');
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [prompt, setPrompt] = useState("def fibonacci(n):");
-  const [isGenerating, setIsGenerating] = useState(false);
-  
-  // Listen for demo completions from LocalControlPanel
-  useEffect(() => {
-    const handleDemoCompleted = (event: CustomEvent) => {
-      const data = event.detail;
-      console.log('Demo completed event received:', data);
-      
-      // Process demo traces if they exist
-      if (data && data.traces) {
-        const attentionTraces = data.traces
-          .filter((t: TraceData) => t.type === 'attention' && t.weights)
-          .map((t: TraceData) => ({
-            layer: t.layer || 'unknown',
-            weights: t.weights || [],
-            max_weight: t.max_weight || 1,
-            entropy: t.entropy,
-            timestamp: t.timestamp || Date.now(),
-            tokens: t.tokens
-          }));
-        
-        if (attentionTraces.length > 0) {
-          console.log('Processing demo attention traces:', attentionTraces.length);
-          const layerSet = new Set(attentionTraces.map((a: AttentionData) => a.layer));
-          const uniqueLayers = (Array.from(layerSet) as string[])
-            .sort((a: string, b: string) => {
-              const numA = parseInt(a.replace('layer.', ''));
-              const numB = parseInt(b.replace('layer.', ''));
-              return numA - numB;
-            });
-          
-          // Update state with demo data
-          setAttentionData(attentionTraces);
-          setAvailableLayers(uniqueLayers);
-          setSelectedLayer(uniqueLayers[0]);
-        }
-      }
-    };
-    
-    window.addEventListener('demo-completed', handleDemoCompleted as EventListener);
-    return () => window.removeEventListener('demo-completed', handleDemoCompleted as EventListener);
-  }, []);
-
-  // Collect attention traces from WebSocket (only if we have traces)
-  useEffect(() => {
-    // Only process WebSocket traces if we actually have some
-    if (traces && traces.length > 0) {
-      const attentionTraces = traces
-        .filter(t => t.type === 'attention' && t.weights)
-        .map(t => ({
-          layer: t.layer || 'unknown',
-          weights: t.weights || [],
-          max_weight: t.max_weight || 1,
-          entropy: t.entropy,
-          timestamp: t.timestamp || Date.now(),
-          tokens: t.tokens
-        }));
-      
-      if (attentionTraces.length > 0) {
-        setAttentionData(attentionTraces);
-        
-        // Auto-select first layer if none selected
-        if (!selectedLayer) {
-          const uniqueLayers = Array.from(new Set(attentionTraces.map(a => a.layer)))
-            .sort((a: string, b: string) => {
-              const numA = parseInt(a.replace('layer.', ''));
-              const numB = parseInt(b.replace('layer.', ''));
-              return numA - numB;
-            });
-          setAvailableLayers(uniqueLayers);
-          setSelectedLayer(uniqueLayers[0]);
-        }
-      }
-    }
-  }, [traces]); // Remove selectedLayer from dependencies to avoid clearing data
-
-  // Update current attention when layer selection changes
-  useEffect(() => {
-    console.log('Layer selection changed to:', selectedLayer);
-    console.log('Available attention data:', attentionData.length, 'items');
-    
-    if (selectedLayer && attentionData.length > 0) {
-      // Get the most recent attention data for the selected layer
-      const matchingData = attentionData.filter(a => a.layer === selectedLayer);
-      console.log('Found', matchingData.length, 'matching items for layer', selectedLayer);
-      
-      const layerData = matchingData
-        .sort((a, b) => b.timestamp - a.timestamp)[0];
-      
-      if (layerData) {
-        console.log('Setting current attention for layer:', selectedLayer);
-        console.log('Weights shape:', layerData.weights.length, 'x', layerData.weights[0]?.length);
-        console.log('Max weight:', layerData.max_weight);
-        console.log('Entropy:', layerData.entropy);
-        setCurrentAttention(layerData);
-      } else {
-        console.log('No data found for layer:', selectedLayer);
-        setCurrentAttention(null);
-      }
-    }
-  }, [selectedLayer, attentionData]);
-
-  // D3 Heatmap Visualization
-  useEffect(() => {
-    if (!currentAttention || !svgRef.current || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const margin = { top: 120, right: 120, bottom: 100, left: 100 };
-    const cellSize = 20; // Size of each cell in the heatmap
-    
-    const weights = currentAttention.weights;
-    const numRows = weights.length;
-    const numCols = weights[0]?.length || 0;
-
-    if (numRows === 0 || numCols === 0) return;
-
-    const width = numCols * cellSize;
-    const height = numRows * cellSize;
-
-    // Clear previous visualization
-    d3.select(svgRef.current).selectAll("*").remove();
-
-    const svg = d3.select(svgRef.current)
-      .attr("width", (width + margin.left + margin.right) * zoom)
-      .attr("height", (height + margin.top + margin.bottom) * zoom)
-      .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`);
-
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-
-    // Create scales
-    const xScale = d3.scaleBand()
-      .domain(d3.range(numCols).map(String))
-      .range([0, width])
-      .padding(0.01);
-
-    const yScale = d3.scaleBand()
-      .domain(d3.range(numRows).map(String))
-      .range([0, height])
-      .padding(0.01);
-
-    // Color scale based on selected scheme
-    // Ensure max_weight is valid, default to 1 if not
-    const maxWeight = currentAttention.max_weight > 0 ? currentAttention.max_weight : 1.0;
-    
-    let colorScale: d3.ScaleSequential<string>;
-    if (colorScheme === 'viridis') {
-      colorScale = d3.scaleSequential(d3.interpolateViridis)
-        .domain([0, maxWeight]);
-    } else if (colorScheme === 'plasma') {
-      colorScale = d3.scaleSequential(d3.interpolatePlasma)
-        .domain([0, maxWeight]);
-    } else {
-      colorScale = d3.scaleSequential(d3.interpolateBlues)
-        .domain([0, maxWeight]);
-    }
-
-    // Create tooltip
-    const tooltip = d3.select("body").append("div")
-      .attr("class", "attention-tooltip")
-      .style("opacity", 0)
-      .style("position", "absolute")
-      .style("background", "rgba(0, 0, 0, 0.9)")
-      .style("color", "white")
-      .style("padding", "10px")
-      .style("border-radius", "6px")
-      .style("font-size", "12px")
-      .style("pointer-events", "none")
-      .style("z-index", "1000");
-
-    // Draw cells
-    const cells = g.selectAll(".cell")
-      .data(weights.flatMap((row, i) => 
-        row.map((value, j) => ({ row: i, col: j, value }))
-      ))
-      .enter().append("rect")
-      .attr("class", "cell")
-      .attr("x", d => xScale(String(d.col))!)
-      .attr("y", d => yScale(String(d.row))!)
-      .attr("width", xScale.bandwidth())
-      .attr("height", yScale.bandwidth())
-      .attr("fill", d => colorScale(d.value))
-      .attr("stroke", "#1f2937")
-      .attr("stroke-width", 0.5)
-      .style("cursor", "pointer")
-      .on("mouseover", function(event, d) {
-        // Show tooltip
-        tooltip.transition().duration(200).style("opacity", .95);
-        
-        const tokenFrom = currentAttention.tokens?.[d.row] || `Token ${d.row}`;
-        const tokenTo = currentAttention.tokens?.[d.col] || `Token ${d.col}`;
-        
-        tooltip.html(`
-          <div style="font-weight: bold; margin-bottom: 5px;">Attention Weight</div>
-          <div>From: ${tokenFrom}</div>
-          <div>To: ${tokenTo}</div>
-          <div style="margin-top: 5px; color: #60a5fa;">Weight: ${d.value.toFixed(4)}</div>
-        `)
-          .style("left", (event.pageX + 10) + "px")
-          .style("top", (event.pageY - 28) + "px");
-        
-        setHoveredCell({ row: d.row, col: d.col, value: d.value });
-        
-        // Highlight cell
-        d3.select(this)
-          .attr("stroke", "#3b82f6")
-          .attr("stroke-width", 2);
-        
-        // Highlight row and column headers
-        d3.selectAll(`.row-label-${d.row}`).style("fill", "#3b82f6").style("font-weight", "bold");
-        d3.selectAll(`.col-label-${d.col}`).style("fill", "#3b82f6").style("font-weight", "bold");
-      })
-      .on("mouseout", function(event, d) {
-        tooltip.transition().duration(500).style("opacity", 0);
-        setHoveredCell(null);
-        
-        d3.select(this)
-          .attr("stroke", "#1f2937")
-          .attr("stroke-width", 0.5);
-        
-        // Reset headers
-        d3.selectAll(`.row-label-${d.row}`).style("fill", "#9ca3af").style("font-weight", "normal");
-        d3.selectAll(`.col-label-${d.col}`).style("fill", "#9ca3af").style("font-weight", "normal");
-      });
-
-    // Add row labels
-    g.selectAll(".row-label")
-      .data(d3.range(numRows))
-      .enter().append("text")
-      .attr("class", d => `row-label row-label-${d}`)
-      .attr("x", -10)
-      .attr("y", d => yScale(String(d))! + yScale.bandwidth() / 2)
-      .attr("text-anchor", "end")
-      .attr("dominant-baseline", "middle")
-      .style("font-size", "11px")
-      .style("fill", "#9ca3af")
-      .style("font-family", "monospace")
-      .text(d => currentAttention.tokens?.[d] || `T${d}`);
-
-    // Add column labels
-    g.selectAll(".col-label")
-      .data(d3.range(numCols))
-      .enter().append("text")
-      .attr("class", d => `col-label col-label-${d}`)
-      .attr("x", d => xScale(String(d))! + xScale.bandwidth() / 2)
-      .attr("y", -10)
-      .attr("text-anchor", "middle")
-      .style("font-size", "11px")
-      .style("fill", "#9ca3af")
-      .style("font-family", "monospace")
-      .text(d => currentAttention.tokens?.[d] || `T${d}`);
-
-    // Add title - positioned higher to avoid overlap
-    svg.append("text")
-      .attr("x", (width + margin.left + margin.right) / 2)
-      .attr("y", 30)
-      .attr("text-anchor", "middle")
-      .style("font-size", "18px")
-      .style("font-weight", "bold")
-      .style("fill", "#fff")
-      .text(`Attention Weights - ${currentAttention.layer}`);
-
-    // Add axis labels
-    svg.append("text")
-      .attr("x", (width + margin.left + margin.right) / 2)
-      .attr("y", height + margin.top + margin.bottom - 20)
-      .attr("text-anchor", "middle")
-      .style("font-size", "14px")
-      .style("fill", "#9ca3af")
-      .text("Target Tokens →");
-
-    svg.append("text")
-      .attr("transform", "rotate(-90)")
-      .attr("x", -(height + margin.top + margin.bottom) / 2)
-      .attr("y", 20)
-      .attr("text-anchor", "middle")
-      .style("font-size", "14px")
-      .style("fill", "#9ca3af")
-      .text("Source Tokens →");
-
-    // Add color legend - positioned in top right corner
-    const legendWidth = 150;
-    const legendHeight = 15;
-    
-    const legendScale = d3.scaleLinear()
-      .domain([0, currentAttention.max_weight])
-      .range([0, legendWidth]);
-
-    const legendAxis = d3.axisBottom(legendScale)
-      .ticks(4)
-      .tickFormat(d => (d as number).toFixed(2));
-
-    const legend = svg.append("g")
-      .attr("transform", `translate(${width + margin.left - legendWidth}, ${60})`);
-
-    // Create gradient for legend
-    const gradientId = `attention-gradient-${Date.now()}`;
-    const gradient = svg.append("defs")
-      .append("linearGradient")
-      .attr("id", gradientId)
-      .attr("x1", "0%")
-      .attr("x2", "100%");
-
-    for (let i = 0; i <= 20; i++) {
-      const t = i / 20;
-      gradient.append("stop")
-        .attr("offset", `${t * 100}%`)
-        .attr("stop-color", colorScale(t * currentAttention.max_weight));
-    }
-
-    legend.append("rect")
-      .attr("width", legendWidth)
-      .attr("height", legendHeight)
-      .style("fill", `url(#${gradientId})`)
-      .style("stroke", "#4b5563")
-      .style("stroke-width", 0.5);
-
-    legend.append("g")
-      .attr("transform", `translate(0, ${legendHeight})`)
-      .call(legendAxis)
-      .selectAll("text")
-      .style("fill", "#9ca3af")
-      .style("font-size", "10px");
-
-    legend.append("text")
-      .attr("x", legendWidth / 2)
-      .attr("y", -5)
-      .attr("text-anchor", "middle")
-      .style("font-size", "11px")
-      .style("fill", "#9ca3af")
-      .text("Attention Weight");
-
-    // Cleanup
-    return () => {
-      tooltip.remove();
-    };
-  }, [currentAttention, zoom, colorScheme]);
-
-  // Update available layers whenever attentionData changes
-  useEffect(() => {
-    if (attentionData.length > 0) {
-      const layers = Array.from(new Set(attentionData.map(a => a.layer)))
-        .sort((a, b) => {
-          // Sort layers numerically (layer.0, layer.1, etc.)
-          const numA = parseInt(a.replace('layer.', ''));
-          const numB = parseInt(b.replace('layer.', ''));
-          return numA - numB;
-        });
-      console.log('Updating available layers from attentionData:', layers);
-      setAvailableLayers(layers);
-    }
-  }, [attentionData]);
-
-  // Export functionality
-  const exportAttentionMap = () => {
-    if (!currentAttention) return;
-    
-    const dataStr = JSON.stringify(currentAttention, null, 2);
-    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
-    
-    const exportFileDefaultName = `attention_${currentAttention.layer.replace(/\./g, '_')}_${Date.now()}.json`;
-    
-    const linkElement = document.createElement('a');
-    linkElement.setAttribute('href', dataUri);
-    linkElement.setAttribute('download', exportFileDefaultName);
-    linkElement.click();
-  };
-
-  // Generate code with attention traces
-  const handleGenerate = async () => {
-    if (!prompt || isGenerating) return;
-    
-    setIsGenerating(true);
-    
-    try {
-      const response = await fetch(`${getApiUrl()}/generate`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          prompt,
-          max_tokens: 100,
-          temperature: 0.7,
-          sampling_rate: 0.3 // Sample 30% of tokens for attention
-        })
-      });
-      
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      
-      const data = await response.json();
-      console.log('Generation completed:', data);
-      
-      // Process any attention traces from the response
-      if (data.traces) {
-        const attentionTraces = data.traces
-          .filter((t: TraceData) => t.type === 'attention' && t.weights)
-          .map((t: TraceData) => ({
-            layer: t.layer || 'unknown',
-            weights: t.weights || [],
-            max_weight: t.max_weight || 1,
-            entropy: t.entropy,
-            timestamp: t.timestamp || Date.now(),
-            tokens: t.tokens
-          }));
-        
-        if (attentionTraces.length > 0) {
-          console.log('Setting attention data:', attentionTraces.length, 'traces');
-          const layerSet = new Set(attentionTraces.map((a: AttentionData) => a.layer));
-          const uniqueLayers = (Array.from(layerSet) as string[])
-            .sort((a: string, b: string) => {
-              const numA = parseInt(a.replace('layer.', ''));
-              const numB = parseInt(b.replace('layer.', ''));
-              return numA - numB;
-            });
-          console.log('Unique layers found from HTTP response:', uniqueLayers);
-          
-          // Set all state together
-          setAttentionData(attentionTraces);
-          setAvailableLayers(uniqueLayers);
-          setSelectedLayer(uniqueLayers[0]);
-          
-          console.log('State updated with', attentionTraces.length, 'traces and', uniqueLayers.length, 'layers');
-        }
-      }
-    } catch (error) {
-      console.error('Generation failed:', error);
-      alert(`Generation failed: ${error}`);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  // Export as image
-  const exportAsImage = () => {
-    if (!svgRef.current) return;
-    
-    const svgData = new XMLSerializer().serializeToString(svgRef.current);
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    const img = new Image();
-    
-    img.onload = () => {
-      canvas.width = img.width;
-      canvas.height = img.height;
-      ctx?.drawImage(img, 0, 0);
-      
-      canvas.toBlob((blob) => {
-        if (blob) {
-          const url = URL.createObjectURL(blob);
-          const link = document.createElement('a');
-          link.download = `attention_${currentAttention?.layer.replace(/\./g, '_')}_${Date.now()}.png`;
-          link.href = url;
-          link.click();
-        }
-      });
-    };
-    
-    img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
-  };
-
-  // Generate contextual explanation for current visualization
-  const generateExplanation = () => {
-    if (!currentAttention) {
-      return {
-        title: "No Attention Data",
-        description: "Run a model to see attention patterns between tokens.",
-        details: []
-      };
-    }
-
-    const maxWeight = currentAttention.max_weight;
-    const entropy = currentAttention.entropy;
-    const numTokens = currentAttention.weights.length;
-    const strongAttentions = currentAttention.weights.flat().filter(w => w > maxWeight * 0.5).length;
-    const totalCells = currentAttention.weights.flat().length;
-    const focusPercentage = ((strongAttentions / totalCells) * 100).toFixed(1);
-
-    return {
-      title: `Attention Pattern: ${currentAttention.layer}`,
-      description: `Viewing ${numTokens}×${numTokens} attention matrix showing how tokens attend to each other.`,
-      details: [
-        {
-          heading: "What is an Attention Heatmap?",
-          content: `This heatmap shows attention weights between tokens. Each cell represents how much one token "pays attention" to another. Brighter cells (higher values) mean stronger attention relationships.`
-        },
-        {
-          heading: "Reading the Matrix",
-          content: `Rows represent source tokens (what's attending), columns represent target tokens (what's being attended to). The diagonal often shows self-attention. Patterns reveal how the model processes relationships between words.`
-        },
-        {
-          heading: "Current Pattern Analysis",
-          content: `${focusPercentage}% of attention weights are strong (>50% of max). ${entropy ? `Entropy: ${entropy.toFixed(2)} - ${entropy < 2 ? 'Focused attention' : entropy < 4 ? 'Distributed attention' : 'Scattered attention'}` : 'Pattern shows attention distribution across tokens.'}`
-        },
-        {
-          heading: "Color Intensity Meaning",
-          content: `Colors range from dark (0.00) to bright (${maxWeight.toFixed(2)}). Bright spots indicate strong dependencies. The model uses these weights to combine information from different positions.`
-        },
-        {
-          heading: "Common Patterns",
-          content: `Look for: Vertical lines (tokens everyone attends to), horizontal lines (tokens attending broadly), diagonal patterns (local/sequential attention), and block patterns (grouped attention).`
-        },
-        {
-          heading: "Layer Significance",
-          content: `${currentAttention.layer.includes('0') ? 'Early layers capture local patterns and syntax.' : 
-                     currentAttention.layer.includes('1') ? 'Middle layers build semantic relationships.' : 
-                     'Later layers form high-level representations.'} Each layer builds on previous ones.`
-        }
-      ]
-    };
-  };
-
-  const explanation = generateExplanation();
-
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <Eye className="w-6 h-6 text-blue-400" />
-            Attention Explorer
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Visualize attention patterns across transformer layers
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          {/* Connection Status */}
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-
-      {/* Prompt Input and Generate Button */}
-      <div className="flex gap-4 mb-4">
-        <div className="flex-1">
-          <textarea
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder="Enter a prompt to generate code (e.g., 'def fibonacci(n):')"
-            className="w-full px-4 py-2 bg-gray-800 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none resize-none"
-            rows={2}
-            disabled={isGenerating}
-          />
-        </div>
-        <button
-          onClick={handleGenerate}
-          disabled={!prompt || isGenerating || !isConnected}
-          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 h-fit"
-        >
-          {isGenerating ? (
-            <>
-              <RefreshCw className="w-5 h-5 animate-spin" />
-              Generating...
-            </>
-          ) : (
-            <>
-              <Zap className="w-5 h-5" />
-              Generate & Trace
-            </>
-          )}
-        </button>
-      </div>
-
-      {/* Controls */}
-      <div className="flex flex-wrap items-center gap-4 mb-4">
-        {/* Layer Selector */}
-        <div className="flex items-center gap-2">
-          <Layers className="w-5 h-5 text-gray-400" />
-          <select
-            value={selectedLayer}
-            onChange={(e) => setSelectedLayer(e.target.value)}
-            className="bg-gray-800 text-white px-3 py-1.5 rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none min-w-[200px]"
-            disabled={availableLayers.length === 0}
-          >
-            {availableLayers.length === 0 ? (
-              <option value="">No layers available</option>
-            ) : (
-              availableLayers.map(layer => (
-                <option key={layer} value={layer}>{layer}</option>
-              ))
-            )}
-          </select>
-        </div>
-
-        {/* Color Scheme Selector */}
-        <div className="flex items-center gap-2">
-          <span className="text-gray-400 text-sm">Color:</span>
-          <div className="flex gap-1">
-            <button
-              onClick={() => setColorScheme('blues')}
-              className={`px-2 py-1 text-xs rounded ${colorScheme === 'blues' ? 'bg-blue-600' : 'bg-gray-700'}`}
-            >
-              Blues
-            </button>
-            <button
-              onClick={() => setColorScheme('viridis')}
-              className={`px-2 py-1 text-xs rounded ${colorScheme === 'viridis' ? 'bg-blue-600' : 'bg-gray-700'}`}
-            >
-              Viridis
-            </button>
-            <button
-              onClick={() => setColorScheme('plasma')}
-              className={`px-2 py-1 text-xs rounded ${colorScheme === 'plasma' ? 'bg-blue-600' : 'bg-gray-700'}`}
-            >
-              Plasma
-            </button>
-          </div>
-        </div>
-
-        {/* Zoom Controls */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setZoom(Math.max(0.5, zoom - 0.1))}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title="Zoom Out"
-          >
-            <ZoomOut className="w-4 h-4" />
-          </button>
-          <span className="text-sm text-gray-400 min-w-[50px] text-center">{(zoom * 100).toFixed(0)}%</span>
-          <button
-            onClick={() => setZoom(Math.min(2, zoom + 0.1))}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title="Zoom In"
-          >
-            <ZoomIn className="w-4 h-4" />
-          </button>
-          <button
-            onClick={() => setZoom(1)}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title="Reset Zoom"
-          >
-            <RefreshCw className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Export Buttons */}
-        <div className="flex gap-2 ml-auto">
-          <button
-            onClick={exportAttentionMap}
-            disabled={!currentAttention}
-            className="px-3 py-1.5 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-            title="Export as JSON"
-          >
-            <Download className="w-4 h-4" />
-            JSON
-          </button>
-        </div>
-      </div>
-
-      {/* Status Bar */}
-      <div className="flex items-center gap-4 mb-4 text-sm">
-        <div className="text-gray-400">
-          <span className="font-semibold">{attentionData.length}</span> attention maps captured
-        </div>
-        
-        {hoveredCell && (
-          <div className="text-gray-400">
-            Cell [{hoveredCell.row}, {hoveredCell.col}]: <span className="text-blue-400 font-mono">{hoveredCell.value.toFixed(4)}</span>
-          </div>
-        )}
-
-        {currentAttention?.entropy !== undefined && (
-          <div className="text-gray-400">
-            Entropy: <span className="text-green-400 font-mono">{currentAttention.entropy.toFixed(3)}</span>
-          </div>
-        )}
-      </div>
-
-      {/* Main Content Area with Side Panel */}
-      <div className="flex gap-4">
-        {/* Visualization Container */}
-        <div className="flex-1 transition-all duration-500 ease-in-out">
-          <div ref={containerRef} className="bg-gray-800 rounded-lg p-4 overflow-auto max-h-[600px] relative">
-            {/* Help Toggle Button */}
-            <button
-              onClick={() => setShowExplanation(!showExplanation)}
-              className="absolute top-4 right-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-            >
-              {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-              <span className="text-sm font-medium">
-                {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-              </span>
-            </button>
-            
-            {currentAttention ? (
-              <svg ref={svgRef}></svg>
-            ) : (
-              <div className="flex items-center justify-center h-96 text-gray-500">
-                <div className="text-center">
-                  <Eye className="w-12 h-12 mx-auto mb-4 opacity-50" />
-                  <p className="text-lg mb-2">No Attention Data Available</p>
-                  <p className="text-sm mb-4">Run a model to capture attention patterns</p>
-                  <p className="text-xs text-gray-600">
-                    Attention maps will appear here when traces are received
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Explanation Side Panel */}
-        <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-          <div className="w-96 h-[600px] bg-gray-900 rounded-lg border border-gray-700">
-            {/* Panel Header */}
-            <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-              <div className="flex items-center gap-2">
-                <Info className="w-5 h-5 text-blue-400" />
-                <h3 className="text-lg font-semibold text-white">Understanding Attention</h3>
-              </div>
-            </div>
-            
-            {/* Panel Content */}
-            <div className="px-4 py-4 overflow-y-auto h-[calc(600px-60px)]">
-              {/* Main Description */}
-              <div className="mb-4 p-3 bg-blue-900/20 border border-blue-800 rounded-lg">
-                <h4 className="text-sm font-semibold text-blue-400 mb-1">{explanation.title}</h4>
-                <p className="text-xs text-gray-300">{explanation.description}</p>
-              </div>
-              
-              {/* Explanation Sections */}
-              <div className="space-y-3">
-                {explanation.details.map((section, idx) => (
-                  <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                    <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                      <Zap className="w-3 h-3 text-yellow-400" />
-                      {section.heading}
-                    </h5>
-                    <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Visual Guide */}
-              <div className="mt-4 p-3 bg-purple-900/20 border border-purple-800 rounded-lg">
-                <h4 className="font-medium text-sm text-purple-400 mb-2">Visual Guide</h4>
-                <div className="space-y-2 text-xs">
-                  <div className="flex items-start gap-2">
-                    <span className="text-purple-300">•</span>
-                    <span className="text-gray-300">Rows = Source tokens (what&apos;s attending)</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-purple-300">•</span>
-                    <span className="text-gray-300">Columns = Target tokens (what&apos;s being attended to)</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-purple-300">•</span>
-                    <span className="text-gray-300">Brightness = Attention strength (0 to {currentAttention?.max_weight.toFixed(2) || '1.00'})</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-purple-300">•</span>
-                    <span className="text-gray-300">Hover over cells for detailed weights</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Current Metrics */}
-              {currentAttention && (
-                <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                  <h4 className="font-medium text-sm text-gray-300 mb-2">Current Metrics</h4>
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Layer:</span>
-                      <span className="text-white font-mono">{currentAttention.layer}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Matrix Size:</span>
-                      <span className="text-white">{currentAttention.weights.length} × {currentAttention.weights[0]?.length || 0}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Max Weight:</span>
-                      <span className="text-blue-400">{currentAttention.max_weight.toFixed(4)}</span>
-                    </div>
-                    {currentAttention.entropy !== undefined && (
-                      <div className="flex justify-between">
-                        <span className="text-gray-400">Entropy:</span>
-                        <span className="text-green-400">{currentAttention.entropy.toFixed(3)}</span>
-                      </div>
-                    )}
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Timestamp:</span>
-                      <span className="text-white">{new Date(currentAttention.timestamp).toLocaleTimeString()}</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Tips */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Tips</h4>
-                <ul className="text-xs text-gray-400 space-y-1">
-                  <li>• Use zoom controls to explore large matrices</li>
-                  <li>• Switch color schemes for better contrast</li>
-                  <li>• Compare patterns across different layers</li>
-                  <li>• Look for diagonal patterns (self-attention)</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Info Panel */}
-      {currentAttention && (
-        <div className="mt-4 p-4 bg-gray-800 rounded-lg">
-          <h3 className="text-lg font-semibold mb-3">Attention Map Details</h3>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-            <div>
-              <span className="text-gray-400">Layer:</span>
-              <div className="font-mono text-white mt-1">{currentAttention.layer}</div>
-            </div>
-            <div>
-              <span className="text-gray-400">Shape:</span>
-              <div className="font-mono text-white mt-1">
-                {currentAttention.weights.length} × {currentAttention.weights[0]?.length || 0}
-              </div>
-            </div>
-            <div>
-              <span className="text-gray-400">Max Weight:</span>
-              <div className="font-mono text-blue-400 mt-1">{currentAttention.max_weight.toFixed(4)}</div>
-            </div>
-            <div>
-              <span className="text-gray-400">Timestamp:</span>
-              <div className="font-mono text-white mt-1">
-                {new Date(currentAttention.timestamp).toLocaleTimeString()}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/ClientOnly.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-interface ClientOnlyProps {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-}
-
-export default function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
-  const [hasMounted, setHasMounted] = useState(false);
-
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
-  if (!hasMounted) {
-    return <>{fallback}</>;
-  }
-
-  return <>{children}</>;
-}

frontend/CodeGenerationTracker.tsx

@@ -1,1071 +0,0 @@
-/**
- * Code Generation Tracker Component
- * 
- * Visualizes step-by-step how LLMs generate code, showing:
- * - Token-by-token generation process
- * - Probability distributions for each token
- * - Alternative tokens that could have been chosen
- * - Attention patterns during generation
- * - Real-time generation streaming
- * 
- * @component
- */
-
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import * as d3 from "d3";
-import { getApiUrl, getWsUrl } from "@/lib/config";
-import { 
-  Code2, 
-  Play, 
-  Pause, 
-  RotateCcw, 
-  Zap,
-  TrendingUp,
-  GitBranch,
-  Sparkles,
-  Settings,
-  Download,
-  ChevronRight,
-  Activity,
-  BarChart3,
-  Eye,
-  HelpCircle,
-  X,
-  Info
-} from "lucide-react";
-
-// Generation step data structure
-interface GenerationStep {
-  stepIndex: number;
-  prompt: string;
-  generatedToken: string;
-  tokenId: number;
-  probability: number;
-  alternatives: TokenChoice[];
-  attentionWeights?: number[];
-  confidence: number;
-  timestamp: number;
-  cumulativeText: string;
-}
-
-// Alternative token choices
-interface TokenChoice {
-  token: string;
-  tokenId: number;
-  probability: number;
-  logit: number;
-}
-
-// Generation configuration
-interface GenerationConfig {
-  temperature: number;
-  topK: number;
-  topP: number;
-  maxTokens: number;
-  prompt: string;
-}
-
-export default function CodeGenerationTracker() {
-  const [generationSteps, setGenerationSteps] = useState<GenerationStep[]>([]);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [selectedStep, setSelectedStep] = useState<GenerationStep | null>(null);
-  const [showAttention, setShowAttention] = useState(true);
-  const [showProbabilities, setShowProbabilities] = useState(true);
-  const [generationSpeed, setGenerationSpeed] = useState(500); // ms between steps
-  const [showExplanation, setShowExplanation] = useState(false);
-  
-  // Configuration state
-  const [config, setConfig] = useState<GenerationConfig>({
-    temperature: 0.7,
-    topK: 50,
-    topP: 0.95,
-    maxTokens: 100,
-    prompt: "def quicksort(arr):\n    '''Sort array using quicksort algorithm'''\n    "
-  });
-  
-  const [isConnected, setIsConnected] = useState(false);
-  
-  const svgRef = useRef<SVGSVGElement>(null);
-  const probabilityRef = useRef<SVGSVGElement>(null);
-  const attentionRef = useRef<SVGSVGElement>(null);
-  const animationRef = useRef<number | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const cumulativeTextRef = useRef<string>('');
-  const [isServiceConnected, setIsServiceConnected] = useState(false);
-  const [isClient, setIsClient] = useState(false);
-
-  // Ensure we're on the client
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // Connect to unified backend WebSocket
-  useEffect(() => {
-    if (!isClient) return;
-    
-    let mounted = true;
-    let reconnectTimeout: NodeJS.Timeout;
-    
-    const connectWS = () => {
-      if (!mounted) return;
-      
-      try {
-        const ws = new WebSocket(getWsUrl());
-        
-        ws.onopen = () => {
-          if (!mounted) return;
-          console.log('CodeGenTracker: WebSocket connected');
-          setIsConnected(true);
-          setIsServiceConnected(true);
-          wsRef.current = ws;
-        };
-        
-        ws.onmessage = (event) => {
-          if (!mounted) return;
-          
-          let data;
-          try {
-            data = JSON.parse(event.data);
-          } catch (e) {
-            // Skip non-JSON messages
-            return;
-          }
-          
-          if (data.type === 'generated_token') {
-            // Build cumulative text
-            cumulativeTextRef.current += data.token;
-            
-            // Create a generation step for each token
-            setGenerationSteps(prev => {
-              const probability = data.confidence_score || 0.75;
-              
-              let alternatives: TokenChoice[];
-              
-              // Use real alternatives if provided by backend
-              if (data.alternatives && data.alternatives.length > 0) {
-                // Real top-k tokens from the model
-                interface AlternativeData {
-                  token: string;
-                  token_id?: number;
-                  probability: number;
-                }
-                alternatives = data.alternatives.map((alt: AlternativeData, idx: number) => ({
-                  token: alt.token,
-                  tokenId: alt.token_id || idx,
-                  probability: alt.probability,
-                  logit: Math.log(alt.probability)
-                }));
-              } else {
-                // Fallback to mock alternatives if backend doesn't provide them
-                const possibleAlts = [
-                  ['(', ')', '[', ']', '{', '}'],
-                  ['if', 'else', 'for', 'while', 'def', 'return'],
-                  ['=', '==', '!=', '<', '>', '<=', '>='],
-                  ['and', 'or', 'not', 'in', 'is'],
-                  ['+', '-', '*', '/', '//', '%'],
-                  [':', ';', ',', '.', '...'],
-                  ['0', '1', '2', 'i', 'j', 'x'],
-                  ['arr', 'list', 'data', 'item', 'val'],
-                ];
-                
-                const altSet = possibleAlts[Math.floor(Math.random() * possibleAlts.length)];
-                
-                alternatives = [
-                  {
-                    token: data.token,  // The actual chosen token
-                    tokenId: 0,
-                    probability: probability,
-                    logit: Math.log(probability)
-                  },
-                  ...altSet.slice(0, 4).map((alt, idx) => ({
-                    token: alt,
-                    tokenId: idx + 1,
-                    probability: (1 - probability) * (0.4 - idx * 0.1),
-                    logit: Math.log((1 - probability) * (0.4 - idx * 0.1))
-                  }))
-                ].sort((a, b) => b.probability - a.probability);
-              }
-              
-              // Generate mock attention weights (for attention pattern visualization)
-              const numPrevTokens = Math.min(prev.length, 20);
-              const attentionWeights = Array.from({ length: numPrevTokens }, () => 
-                Math.random() * 0.8 + 0.1
-              );
-              
-              const step: GenerationStep = {
-                stepIndex: prev.length,
-                prompt: config.prompt,
-                generatedToken: data.token,
-                tokenId: 0,
-                probability: probability,
-                alternatives: alternatives,
-                confidence: probability,
-                timestamp: data.timestamp || Date.now(),
-                cumulativeText: cumulativeTextRef.current,
-                attentionWeights: attentionWeights
-              };
-            
-              // Filter out special tokens
-              const specialTokens = ['</s>', '<s>', '<pad>', '<unk>', ''];
-              if (!specialTokens.includes(step.generatedToken)) {
-                const newSteps = [...prev, step];
-                setCurrentStep(newSteps.length - 1);
-                return newSteps;
-              }
-              return prev;
-            });
-          } else if (data.type === 'token') {
-            // Handle confidence updates
-            if (data.confidence_score) {
-              // Update the last step's confidence if available
-              setGenerationSteps(prev => {
-                if (prev.length > 0) {
-                  const updated = [...prev];
-                  updated[updated.length - 1] = {
-                    ...updated[updated.length - 1],
-                    confidence: data.confidence_score,
-                    probability: data.confidence_score
-                  };
-                  return updated;
-                }
-                return prev;
-              });
-            }
-          }
-        };
-        
-        ws.onerror = () => {
-          if (mounted) {
-            setIsConnected(false);
-            setIsServiceConnected(false);
-          }
-        };
-        
-        ws.onclose = () => {
-          if (!mounted) return;
-          console.log('CodeGenTracker: WebSocket disconnected, will reconnect...');
-          setIsConnected(false);
-          setIsServiceConnected(false);
-          wsRef.current = null;
-          reconnectTimeout = setTimeout(() => {
-            if (mounted) connectWS();
-          }, 3000);
-        };
-      } catch (error) {
-        console.log('WebSocket connection attempt failed, will retry...');
-        if (mounted) {
-          setIsConnected(false);
-          setIsServiceConnected(false);
-          reconnectTimeout = setTimeout(() => {
-            if (mounted) connectWS();
-          }, 3000);
-        }
-      }
-    };
-    
-    connectWS();
-    
-    return () => {
-      mounted = false;
-      if (reconnectTimeout) {
-        clearTimeout(reconnectTimeout);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, [isClient]);
-  
-  // Listen for demo events from LocalControlPanel
-  useEffect(() => {
-    const handleDemoPromptSelected = (event: CustomEvent) => {
-      const { prompt, demoId } = event.detail;
-      console.log('CodeGenTracker: Demo prompt selected -', demoId);
-      
-      if (prompt) {
-        setConfig(prev => ({ ...prev, prompt }));
-      }
-    };
-    
-    const handleDemoStarting = (event: CustomEvent) => {
-      const { demoId } = event.detail;
-      console.log('CodeGenTracker: Demo starting, clearing steps -', demoId);
-      
-      // Clear generation steps when demo starts
-      setGenerationSteps([]);
-      setCurrentStep(0);
-      cumulativeTextRef.current = ''; // Reset cumulative text
-      setIsGenerating(true);
-    };
-    
-    const handleDemoCompleted = (event: CustomEvent) => {
-      console.log('CodeGenTracker: Demo completed');
-      setIsGenerating(false);
-    };
-    
-    window.addEventListener('demo-prompt-selected', handleDemoPromptSelected as EventListener);
-    window.addEventListener('demo-starting', handleDemoStarting as EventListener);
-    window.addEventListener('demo-completed', handleDemoCompleted as EventListener);
-    
-    return () => {
-      window.removeEventListener('demo-prompt-selected', handleDemoPromptSelected as EventListener);
-      window.removeEventListener('demo-starting', handleDemoStarting as EventListener);
-      window.removeEventListener('demo-completed', handleDemoCompleted as EventListener);
-    };
-  }, []);
-
-  // Start generation using unified backend
-  const startGeneration = async () => {
-    setIsGenerating(true);
-    setGenerationSteps([]);
-    setCurrentStep(0);
-    cumulativeTextRef.current = ''; // Reset cumulative text
-    
-    try {
-      const response = await fetch(`${getApiUrl()}/generate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt: config.prompt,
-          max_tokens: config.maxTokens,
-          temperature: config.temperature,
-          extract_traces: true,
-          sampling_rate: 0.3
-        })
-      });
-      
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-      const data = await response.json();
-      
-      console.log('CodeGenTracker: Generation complete', data);
-      setIsGenerating(false);
-      return; // Exit after successful generation
-    } catch (error) {
-      console.error('Generation error:', error);
-      alert(`Failed to generate: ${error}`);
-      setIsGenerating(false);
-      return; // Exit on error
-    }
-    
-    // Demo generation code below (only runs if above code is removed/disabled)
-    // Simulate token-by-token generation
-    const tokens = [
-      "\n", "    ", "if", " not", " arr", ":", "\n", 
-      "        ", "return", " arr", "\n",
-      "    ", "pivot", " =", " arr", "[", "len", "(", "arr", ")", " //", " 2", "]", "\n",
-      "    ", "left", " =", " [", "x", " for", " x", " in", " arr", " if", " x", " <", " pivot", "]", "\n",
-      "    ", "middle", " =", " [", "x", " for", " x", " in", " arr", " if", " x", " ==", " pivot", "]", "\n",
-      "    ", "right", " =", " [", "x", " for", " x", " in", " arr", " if", " x", " >", " pivot", "]", "\n",
-      "    ", "return", " quicksort", "(", "left", ")", " +", " middle", " +", " quicksort", "(", "right", ")"
-    ];
-    
-    let cumulativeText = config.prompt;
-    const steps: GenerationStep[] = [];
-    
-    tokens.forEach((token, idx) => {
-      // Build cumulative text progressively
-      cumulativeText = cumulativeText + token;
-      
-      // Generate alternatives with probabilities
-      const alternatives: TokenChoice[] = [
-        { token, tokenId: idx * 100, probability: 0.3 + Math.random() * 0.5, logit: Math.random() * 10 },
-        { token: "[ALT1]", tokenId: idx * 100 + 1, probability: Math.random() * 0.3, logit: Math.random() * 8 },
-        { token: "[ALT2]", tokenId: idx * 100 + 2, probability: Math.random() * 0.2, logit: Math.random() * 6 },
-        { token: "[ALT3]", tokenId: idx * 100 + 3, probability: Math.random() * 0.1, logit: Math.random() * 4 },
-        { token: "[ALT4]", tokenId: idx * 100 + 4, probability: Math.random() * 0.05, logit: Math.random() * 2 },
-      ].sort((a, b) => b.probability - a.probability);
-      
-      // Normalize probabilities
-      const totalProb = alternatives.reduce((sum, alt) => sum + alt.probability, 0);
-      alternatives.forEach(alt => alt.probability = alt.probability / totalProb);
-      
-      const step: GenerationStep = {
-        stepIndex: idx,
-        prompt: config.prompt,
-        generatedToken: token,
-        tokenId: idx * 100,
-        probability: alternatives[0].probability,
-        alternatives,
-        attentionWeights: Array.from({ length: Math.min(20, idx + 1) }, () => Math.random()),
-        confidence: 0.5 + Math.random() * 0.5,
-        timestamp: Date.now() + idx * 100,
-        cumulativeText
-      };
-      
-      steps.push(step);
-    });
-    
-    // Store all steps at once to prevent state issues
-    setGenerationSteps(steps);
-    
-    // Simulate streaming generation by animating through steps
-    let stepIndex = 0;
-    const interval = setInterval(() => {
-      if (stepIndex < steps.length) {
-        setCurrentStep(stepIndex);
-        stepIndex++;
-      } else {
-        clearInterval(interval);
-        setIsGenerating(false);
-      }
-    }, generationSpeed);
-  };
-
-  // Visualize probability distribution
-  useEffect(() => {
-    if (!probabilityRef.current || generationSteps.length === 0) return;
-    
-    const currentStepData = generationSteps[currentStep];
-    if (!currentStepData || !currentStepData.alternatives || currentStepData.alternatives.length === 0) return;
-    
-    const margin = { top: 40, right: 60, bottom: 60, left: 100 };
-    const width = 500;
-    const height = 300;
-    
-    // Clear previous
-    d3.select(probabilityRef.current).selectAll("*").remove();
-    
-    const svg = d3.select(probabilityRef.current)
-      .attr("width", width)
-      .attr("height", height)
-      .attr("viewBox", `0 0 ${width} ${height}`);
-    
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-    
-    // Scales
-    const xScale = d3.scaleLinear()
-      .domain([0, Math.max(...currentStepData.alternatives.map(a => a.probability))])
-      .range([0, width - margin.left - margin.right]);
-    
-    const yScale = d3.scaleBand()
-      .domain(currentStepData.alternatives.map(a => a.token))
-      .range([0, height - margin.top - margin.bottom])
-      .padding(0.1);
-    
-    // Color scale
-    const colorScale = d3.scaleSequential(d3.interpolateViridis)
-      .domain([0, currentStepData.alternatives[0].probability]);
-    
-    // Bars
-    g.selectAll(".prob-bar")
-      .data(currentStepData.alternatives)
-      .enter()
-      .append("rect")
-      .attr("class", "prob-bar")
-      .attr("x", 0)
-      .attr("y", d => yScale(d.token)!)
-      .attr("width", 0)
-      .attr("height", yScale.bandwidth())
-      .attr("fill", d => colorScale(d.probability))
-      .attr("stroke", d => d.token === currentStepData.generatedToken ? "#3b82f6" : "none")
-      .attr("stroke-width", 2)
-      .transition()
-      .duration(300)
-      .attr("width", d => xScale(d.probability));
-    
-    // Labels
-    g.selectAll(".prob-label")
-      .data(currentStepData.alternatives)
-      .enter()
-      .append("text")
-      .attr("class", "prob-label")
-      .attr("x", d => xScale(d.probability) + 5)
-      .attr("y", d => yScale(d.token)! + yScale.bandwidth() / 2)
-      .attr("dominant-baseline", "middle")
-      .attr("fill", "#9ca3af")
-      .attr("font-size", "11px")
-      .text(d => `${(d.probability * 100).toFixed(1)}%`);
-    
-    // Token labels
-    g.selectAll(".token-label")
-      .data(currentStepData.alternatives)
-      .enter()
-      .append("text")
-      .attr("class", "token-label")
-      .attr("x", -5)
-      .attr("y", d => yScale(d.token)! + yScale.bandwidth() / 2)
-      .attr("text-anchor", "end")
-      .attr("dominant-baseline", "middle")
-      .attr("fill", d => d.token === currentStepData.generatedToken ? "#3b82f6" : "#fff")
-      .attr("font-size", "12px")
-      .attr("font-family", "monospace")
-      .attr("font-weight", d => d.token === currentStepData.generatedToken ? "bold" : "normal")
-      .text(d => d.token.length > 10 ? d.token.substring(0, 10) + "..." : d.token);
-    
-    // Title
-    svg.append("text")
-      .attr("x", width / 2)
-      .attr("y", 20)
-      .attr("text-anchor", "middle")
-      .attr("font-size", "14px")
-      .attr("font-weight", "bold")
-      .attr("fill", "#fff")
-      .text(`Token Probabilities - Step ${currentStep + 1}`);
-    
-    // X axis
-    g.append("g")
-      .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
-      .call(d3.axisBottom(xScale).ticks(5).tickFormat(d => `${(d as number * 100).toFixed(0)}%`))
-      .selectAll("text")
-      .style("fill", "#9ca3af");
-    
-  }, [currentStep, generationSteps, showProbabilities]);
-
-  // Visualize attention during generation
-  useEffect(() => {
-    if (!attentionRef.current || !showAttention) return;
-    
-    const currentStepData = generationSteps[currentStep];
-    if (!currentStepData || !currentStepData.attentionWeights) return;
-    
-    const margin = { top: 40, right: 40, bottom: 40, left: 40 };
-    const size = 300;
-    
-    // Clear previous
-    d3.select(attentionRef.current).selectAll("*").remove();
-    
-    const svg = d3.select(attentionRef.current)
-      .attr("width", size)
-      .attr("height", size)
-      .attr("viewBox", `0 0 ${size} ${size}`);
-    
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-    
-    // Create attention heatmap
-    const numTokens = currentStepData.attentionWeights.length;
-    const cellSize = (size - margin.left - margin.right) / numTokens;
-    
-    const colorScale = d3.scaleSequential(d3.interpolateBlues)
-      .domain([0, Math.max(...currentStepData.attentionWeights)]);
-    
-    // Draw cells
-    currentStepData.attentionWeights.forEach((weight, i) => {
-      g.append("rect")
-        .attr("x", i * cellSize)
-        .attr("y", 0)
-        .attr("width", cellSize)
-        .attr("height", cellSize)
-        .attr("fill", colorScale(weight))
-        .attr("stroke", "#1f2937")
-        .attr("stroke-width", 0.5);
-    });
-    
-    // Title
-    svg.append("text")
-      .attr("x", size / 2)
-      .attr("y", 20)
-      .attr("text-anchor", "middle")
-      .attr("font-size", "14px")
-      .attr("font-weight", "bold")
-      .attr("fill", "#fff")
-      .text("Attention to Previous Tokens");
-    
-  }, [currentStep, generationSteps, showAttention]);
-
-  // Animation control
-  const togglePlayback = () => {
-    setIsPlaying(!isPlaying);
-  };
-
-  useEffect(() => {
-    if (isPlaying && generationSteps.length > 0) {
-      const animate = () => {
-        setCurrentStep(prev => {
-          if (prev < generationSteps.length - 1) {
-            return prev + 1;
-          } else {
-            setIsPlaying(false);
-            return prev;
-          }
-        });
-      };
-      
-      const interval = setInterval(animate, generationSpeed);
-      return () => clearInterval(interval);
-    }
-  }, [isPlaying, generationSteps, generationSpeed]);
-
-  const reset = () => {
-    setCurrentStep(0);
-    setIsPlaying(false);
-    setSelectedStep(null);
-  };
-
-  // Generate contextual explanation for current visualization
-  const generateExplanation = () => {
-    if (generationSteps.length === 0) {
-      return {
-        title: "No Generation Data",
-        description: "Click 'Generate Code' to see how the model creates code token by token.",
-        details: []
-      };
-    }
-
-    const currentStepData = generationSteps[currentStep];
-    const totalSteps = generationSteps.length;
-    const avgConfidence = generationSteps.reduce((sum, s) => sum + s.confidence, 0) / totalSteps;
-    const topAlternatives = currentStepData?.alternatives?.slice(0, 3) || [];
-
-    return {
-      title: `Code Generation Process: Step ${currentStep + 1}/${totalSteps}`,
-      description: `Watching the model generate code token by token with probability distributions.`,
-      details: [
-        {
-          heading: "What is Code Generation Tracking?",
-          content: `This visualizes how LLMs generate code one token at a time. Each step shows the chosen token, its probability, and alternatives the model considered. This reveals the decision-making process behind code generation.`
-        },
-        {
-          heading: "Understanding the Display",
-          content: `The top panel shows generated code building up. The left chart displays probability distribution for token choices. The right shows attention patterns - how the model looks at previous tokens to decide what comes next.`
-        },
-        {
-          heading: "Current Token Analysis",
-          content: `Token: "${currentStepData?.generatedToken || ''}" with ${(currentStepData?.probability * 100).toFixed(1)}% probability. Alternatives considered: ${topAlternatives.map(a => `"${a.token}" (${(a.probability * 100).toFixed(1)}%)`).join(', ') || 'none'}.`
-        },
-        {
-          heading: "Probability Distribution",
-          content: `The bar chart shows top token candidates. Higher bars mean higher probability. The model samples from this distribution based on temperature (${config.temperature}). Lower temperature = more deterministic, higher = more creative.`
-        },
-        {
-          heading: "Attention Patterns",
-          content: `The heatmap shows which previous tokens the model is "looking at" to generate the current token. Brighter cells indicate stronger attention. This reveals context dependencies in code generation.`
-        },
-        {
-          heading: "Generation Statistics",
-          content: `Average confidence: ${(avgConfidence * 100).toFixed(1)}%. Total tokens: ${totalSteps}. Speed: ${generationSpeed}ms per token. Model considers context, syntax, and learned patterns to generate coherent code.`
-        }
-      ]
-    };
-  };
-
-  const explanation = generateExplanation();
-
-  const exportGeneration = () => {
-    const data = {
-      config,
-      steps: generationSteps,
-      timestamp: Date.now()
-    };
-    
-    const dataStr = JSON.stringify(data, null, 2);
-    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
-    
-    const link = document.createElement('a');
-    link.href = dataUri;
-    link.download = `code_generation_${Date.now()}.json`;
-    link.click();
-  };
-
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <Code2 className="w-6 h-6 text-blue-400" />
-            Code Generation Tracker
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Visualize step-by-step how the model generates code
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isServiceConnected ? 'bg-green-900/30 text-green-400' : 'bg-yellow-900/30 text-yellow-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isServiceConnected ? 'animate-pulse' : ''}`} />
-            {isServiceConnected ? 'Real Model' : 'Demo Mode'}
-          </div>
-          <button
-            onClick={exportGeneration}
-            className="px-3 py-1.5 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-2"
-          >
-            <Download className="w-4 h-4" />
-            Export
-          </button>
-        </div>
-      </div>
-
-      {/* Configuration Panel */}
-      <div className="bg-gray-800 rounded-lg p-4 mb-6">
-        <div className="flex items-center gap-2 mb-4">
-          <Settings className="w-5 h-5 text-gray-400" />
-          <span className="font-semibold">Generation Settings</span>
-        </div>
-        
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
-          <div>
-            <label className="block text-sm text-gray-400 mb-2">
-              Starting Prompt (model will continue from here)
-            </label>
-            <textarea
-              value={config.prompt}
-              onChange={(e) => setConfig(prev => ({ ...prev, prompt: e.target.value }))}
-              className="w-full h-24 px-3 py-2 bg-gray-900 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-              placeholder="Enter your starting code..."
-            />
-          </div>
-          
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <label className="text-sm text-gray-400">Temperature: {config.temperature}</label>
-              <input
-                type="range"
-                min="0.1"
-                max="2.0"
-                step="0.1"
-                value={config.temperature}
-                onChange={(e) => setConfig(prev => ({ ...prev, temperature: parseFloat(e.target.value) }))}
-                className="w-32"
-              />
-            </div>
-            
-            <div className="flex items-center justify-between">
-              <label className="text-sm text-gray-400">Top-K: {config.topK}</label>
-              <input
-                type="range"
-                min="1"
-                max="100"
-                step="1"
-                value={config.topK}
-                onChange={(e) => setConfig(prev => ({ ...prev, topK: parseInt(e.target.value) }))}
-                className="w-32"
-              />
-            </div>
-            
-            <div className="flex items-center justify-between">
-              <label className="text-sm text-gray-400">Top-P: {config.topP}</label>
-              <input
-                type="range"
-                min="0.1"
-                max="1.0"
-                step="0.05"
-                value={config.topP}
-                onChange={(e) => setConfig(prev => ({ ...prev, topP: parseFloat(e.target.value) }))}
-                className="w-32"
-              />
-            </div>
-          </div>
-        </div>
-        
-        <button
-          onClick={startGeneration}
-          disabled={isGenerating}
-          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-        >
-          {isGenerating ? (
-            <>
-              <Activity className="w-4 h-4 animate-spin" />
-              Generating...
-            </>
-          ) : (
-            <>
-              <Sparkles className="w-4 h-4" />
-              Start Generation
-            </>
-          )}
-        </button>
-      </div>
-
-      {/* Main Content Area with Side Panel */}
-      <div className="flex gap-4">
-        {/* Main Visualization Container */}
-        <div className="flex-1 min-w-0 transition-all duration-500 ease-in-out">
-          {/* Generated Code Display */}
-          {generationSteps.length > 0 && (
-            <div className="bg-gray-800 rounded-lg p-4 mb-6 relative">
-              {/* Help Toggle Button */}
-              <button
-                onClick={() => setShowExplanation(!showExplanation)}
-                className="absolute top-4 right-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-              >
-                {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-                <span className="text-sm font-medium">
-                  {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-                </span>
-              </button>
-          <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
-            <Code2 className="w-5 h-5 text-green-400" />
-            Generated Code
-          </h3>
-          <pre className="text-sm font-mono bg-gray-900 p-4 rounded-lg overflow-x-auto whitespace-pre-wrap">
-            <code className="text-gray-300">
-              {(currentStep >= 0 && currentStep < generationSteps.length && generationSteps[currentStep]?.cumulativeText) 
-                ? generationSteps[currentStep].cumulativeText 
-                : config.prompt}
-              {isGenerating && <span className="animate-pulse text-blue-400">█</span>}
-            </code>
-          </pre>
-          
-          {/* Token-by-token display */}
-          <div className="mt-4 flex flex-wrap gap-2">
-            {generationSteps.slice(0, currentStep + 1).map((step, idx) => (
-              step ? (
-                <span
-                  key={idx}
-                  className={`px-2 py-1 rounded text-xs font-mono cursor-pointer transition-all ${
-                    idx === currentStep 
-                      ? 'bg-blue-600 text-white ring-2 ring-blue-400' 
-                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
-                  }`}
-                  onClick={() => setCurrentStep(idx)}
-                  title={`Step ${idx + 1}: ${((step.probability || 0) * 100).toFixed(1)}% confidence`}
-                >
-                  {step.generatedToken || ''}
-                </span>
-              ) : null
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Playback Controls */}
-      {generationSteps.length > 0 && (
-        <div className="flex items-center gap-4 mb-6">
-          <button
-            onClick={togglePlayback}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-          >
-            {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
-          </button>
-          
-          <button
-            onClick={reset}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-          >
-            <RotateCcw className="w-4 h-4" />
-          </button>
-          
-          <input
-            type="range"
-            min="0"
-            max={Math.max(0, generationSteps.length - 1)}
-            value={Math.min(currentStep, generationSteps.length - 1)}
-            onChange={(e) => setCurrentStep(parseInt(e.target.value))}
-            className="flex-1"
-          />
-          
-          <span className="text-sm text-gray-400">
-            Step {Math.min(currentStep + 1, generationSteps.length)} / {generationSteps.length}
-          </span>
-          
-          <div className="flex items-center gap-2">
-            <label className="text-sm text-gray-400">Speed:</label>
-            <select
-              value={generationSpeed}
-              onChange={(e) => setGenerationSpeed(parseInt(e.target.value))}
-              className="px-2 py-1 bg-gray-800 text-white rounded border border-gray-700"
-            >
-              <option value="100">Fast</option>
-              <option value="500">Normal</option>
-              <option value="1000">Slow</option>
-            </select>
-          </div>
-        </div>
-      )}
-
-      {/* Visualization Panels */}
-      {generationSteps.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Probability Distribution */}
-          <div className="bg-gray-800 rounded-lg p-4">
-            <div className="flex items-center justify-between mb-3">
-              <h3 className="text-lg font-semibold flex items-center gap-2">
-                <BarChart3 className="w-5 h-5 text-purple-400" />
-                Token Probabilities
-              </h3>
-              <label className="flex items-center gap-2 text-sm">
-                <input
-                  type="checkbox"
-                  checked={showProbabilities}
-                  onChange={(e) => setShowProbabilities(e.target.checked)}
-                  className="rounded"
-                />
-                Show
-              </label>
-            </div>
-            {showProbabilities && (
-              <svg ref={probabilityRef}></svg>
-            )}
-          </div>
-
-          {/* Attention Visualization */}
-          <div className="bg-gray-800 rounded-lg p-4">
-            <div className="flex items-center justify-between mb-3">
-              <h3 className="text-lg font-semibold flex items-center gap-2">
-                <Eye className="w-5 h-5 text-yellow-400" />
-                Attention Pattern
-              </h3>
-              <label className="flex items-center gap-2 text-sm">
-                <input
-                  type="checkbox"
-                  checked={showAttention}
-                  onChange={(e) => setShowAttention(e.target.checked)}
-                  className="rounded"
-                />
-                Show
-              </label>
-            </div>
-            {showAttention && (
-              <svg ref={attentionRef}></svg>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Statistics Panel */}
-      {generationSteps.length > 0 && (
-        <div className="mt-6 bg-gray-800 rounded-lg p-4">
-          <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
-            <TrendingUp className="w-5 h-5 text-green-400" />
-            Generation Statistics
-          </h3>
-          
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="bg-gray-900 rounded-lg p-3">
-              <div className="text-xs text-gray-400">Tokens Generated</div>
-              <div className="text-xl font-bold text-white">{generationSteps.length}</div>
-            </div>
-            
-            <div className="bg-gray-900 rounded-lg p-3">
-              <div className="text-xs text-gray-400">Avg Confidence</div>
-              <div className="text-xl font-bold text-blue-400">
-                {generationSteps.length > 0 
-                  ? (generationSteps.reduce((sum, s) => sum + (s?.confidence || 0), 0) / generationSteps.length * 100).toFixed(1) + '%'
-                  : '0%'}
-              </div>
-            </div>
-            
-            <div className="bg-gray-900 rounded-lg p-3">
-              <div className="text-xs text-gray-400">Avg Probability</div>
-              <div className="text-xl font-bold text-purple-400">
-                {generationSteps.length > 0
-                  ? (generationSteps.reduce((sum, s) => sum + (s?.probability || 0), 0) / generationSteps.length * 100).toFixed(1) + '%'
-                  : '0%'}
-              </div>
-            </div>
-            
-            <div className="bg-gray-900 rounded-lg p-3">
-              <div className="text-xs text-gray-400">Temperature</div>
-              <div className="text-xl font-bold text-yellow-400">{config.temperature}</div>
-            </div>
-          </div>
-        </div>
-      )}
-
-          {/* Empty State */}
-          {generationSteps.length === 0 && !isGenerating && (
-            <div className="bg-gray-800 rounded-lg p-8 text-center">
-              <Code2 className="w-12 h-12 mx-auto mb-4 text-gray-600" />
-              <p className="text-gray-400 mb-2">No generation yet</p>
-              <p className="text-sm text-gray-500">
-                Configure your prompt and settings, then click &quot;Start Generation&quot; to visualize the generation process
-              </p>
-            </div>
-          )}
-        </div>
-        
-        {/* Explanation Side Panel */}
-        <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-          <div className="w-96 h-[800px] bg-gray-900 rounded-lg border border-gray-700">
-            {/* Panel Header */}
-            <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-              <div className="flex items-center gap-2">
-                <Info className="w-5 h-5 text-blue-400" />
-                <h3 className="text-lg font-semibold text-white">Understanding Code Generation</h3>
-              </div>
-            </div>
-            
-            {/* Panel Content */}
-            <div className="px-4 py-4 overflow-y-auto h-[calc(800px-60px)]">
-              {/* Main Description */}
-              <div className="mb-4 p-3 bg-green-900/20 border border-green-800 rounded-lg">
-                <h4 className="text-sm font-semibold text-green-400 mb-1">{explanation.title}</h4>
-                <p className="text-xs text-gray-300">{explanation.description}</p>
-              </div>
-              
-              {/* Explanation Sections */}
-              <div className="space-y-3">
-                {explanation.details.map((section, idx) => (
-                  <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                    <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                      <Zap className="w-3 h-3 text-yellow-400" />
-                      {section.heading}
-                    </h5>
-                    <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Visual Guide */}
-              <div className="mt-4 p-3 bg-blue-900/20 border border-blue-800 rounded-lg">
-                <h4 className="font-medium text-sm text-blue-400 mb-2">Interface Guide</h4>
-                <div className="space-y-2 text-xs">
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Top panel: Generated code building up</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Left chart: Token probability distribution</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Right heatmap: Attention patterns</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Bottom: Generation statistics</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Current Metrics */}
-              {generationSteps.length > 0 && (
-                <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                  <h4 className="font-medium text-sm text-gray-300 mb-2">Current Metrics</h4>
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Step:</span>
-                      <span className="text-white">{currentStep + 1} / {generationSteps.length}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Current Token:</span>
-                      <span className="text-yellow-400 font-mono">&quot;{generationSteps[currentStep]?.generatedToken || ''}&quot;</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Probability:</span>
-                      <span className="text-green-400">{((generationSteps[currentStep]?.probability || 0) * 100).toFixed(1)}%</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Temperature:</span>
-                      <span className="text-orange-400">{config.temperature}</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Tips */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Tips</h4>
-                <ul className="text-xs text-gray-400 space-y-1">
-                  <li>• Use playback controls to step through generation</li>
-                  <li>• Lower temperature for more predictable code</li>
-                  <li>• Watch attention to see context dependencies</li>
-                  <li>• Export data for detailed analysis</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/ConfidenceMeter.tsx

@@ -1,834 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from "recharts";
-import { AlertCircle, TrendingUp, Shield, Activity, HelpCircle, X, Info, Zap, RefreshCw, CheckCircle } from "lucide-react";
-import { getApiUrl, getWsUrl } from "@/lib/config";
-
-interface ConfidenceTrace {
-  token: string;
-  index: number;
-  confidence: number;
-  activation: number;
-  entropy: number;
-  hallucination_risk?: number;
-}
-
-interface LayerActivation {
-  layer: string;
-  value: number;
-}
-
-export default function ConfidenceMeter() {
-  const [selectedToken, setSelectedToken] = useState(0);
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [prompt, setPrompt] = useState("def fibonacci(n):\n    '''Calculate fibonacci number'''");
-  const [generatedText, setGeneratedText] = useState("");
-  const [isConnected, setIsConnected] = useState(false);
-  
-  // Real data from model
-  const [tokens, setTokens] = useState<string[]>([]);
-  const [confidenceData, setConfidenceData] = useState<ConfidenceTrace[]>([]);
-  const [layerActivations, setLayerActivations] = useState<LayerActivation[]>([]);
-  const [overallConfidence, setOverallConfidence] = useState(0);
-  const [hallucinationRisk, setHallucinationRisk] = useState(0);
-  
-  const wsRef = useRef<WebSocket | null>(null);
-  const tokenBufferRef = useRef<string[]>([]);
-  const confidenceBufferRef = useRef<ConfidenceTrace[]>([]);
-
-  // Connect to WebSocket for real-time updates
-  useEffect(() => {
-    let mounted = true;
-    let reconnectTimeout: NodeJS.Timeout;
-    
-    const connectWS = () => {
-      if (!mounted) return;
-      
-      try {
-        const ws = new WebSocket(getWsUrl());
-        
-        ws.onopen = () => {
-          if (!mounted) return;
-          console.log('ConfidenceMeter: WebSocket connected');
-          setIsConnected(true);
-        };
-        
-        ws.onmessage = (event) => {
-          if (!mounted) return;
-          
-          let data;
-          try {
-            data = JSON.parse(event.data);
-          } catch (e) {
-            // Skip non-JSON messages
-            return;
-          }
-          
-          try {
-            if (data.type === 'generated_token') {
-              // Add token to the display as it's generated
-              const newToken = data.token;
-              setTokens(prev => [...prev, newToken]);
-              
-              // Add confidence data for this token
-              const tokenConfidence: ConfidenceTrace = {
-                token: newToken === "\n" ? "⏎" : newToken,
-                index: tokens.length,
-                confidence: Math.min(1, Math.max(0, data.confidence_score || 0.75)),
-                activation: Math.min(1, Math.max(0, 0.5 + Math.random() * 0.3)),
-                entropy: Math.min(1, Math.max(0, Math.random() * 0.3)),
-                hallucination_risk: Math.min(1, Math.max(0, data.hallucination_risk || 0.1))
-              };
-              setConfidenceData(prev => [...prev, tokenConfidence]);
-              
-            } else if (data.type === 'token') {
-              // Token with confidence score - also update overall metrics
-              const confidence = data.confidence_score || 0.75;
-              
-              // Update the last token's confidence
-              setConfidenceData(prev => {
-                if (prev.length > 0) {
-                  const updated = [...prev];
-                  // Create a new object instead of modifying the existing one
-                  updated[updated.length - 1] = {
-                    ...updated[updated.length - 1],
-                    confidence: confidence
-                  };
-                  
-                  // Calculate running average confidence
-                  const avgConfidence = updated.reduce((sum, d) => sum + d.confidence, 0) / updated.length;
-                  setOverallConfidence(avgConfidence);
-                  
-                  // Update hallucination risk based on low confidence tokens
-                  const lowConfTokens = updated.filter(d => d.confidence < 0.6).length;
-                  const riskLevel = lowConfTokens / updated.length;
-                  setHallucinationRisk(Math.min(1, riskLevel * 2)); // Scale up for visibility
-                  
-                  return updated;
-                }
-                return prev;
-              });
-              
-            } else if (data.type === 'confidence') {
-              // Update overall confidence metrics
-              setOverallConfidence(data.confidence_score || 0);
-              setHallucinationRisk(data.hallucination_risk || 0);
-              
-            } else if (data.type === 'activation') {
-              // Update layer activations with debugging
-              const layer = data.layer?.replace('layer.', 'L') || 'L0';
-              const value = Math.min(1, Math.max(0, data.mean || 0.5)); // Clamp between 0 and 1
-              
-              console.log(`Received activation for ${layer}: ${value.toFixed(3)}`);
-              
-              setLayerActivations(prev => {
-                // Create a completely new array with new objects
-                const newActivations = prev.map(a => ({...a}));
-                const existing = newActivations.findIndex(l => l.layer === layer);
-                
-                if (existing >= 0) {
-                  // Update existing layer with a new object
-                  newActivations[existing] = { layer, value };
-                } else {
-                  // Add new layer
-                  newActivations.push({ layer, value });
-                }
-                
-                // Sort and keep only first 8
-                const sorted = newActivations.sort((a, b) => {
-                  const aNum = parseInt(a.layer.replace('L', '')) || 0;
-                  const bNum = parseInt(b.layer.replace('L', '')) || 0;
-                  return aNum - bNum;
-                }).slice(0, 8);
-                
-                console.log('Updated layer activations:', sorted.map(l => `${l.layer}:${(l.value*100).toFixed(0)}%`).join(', '));
-                return sorted;
-              });
-            }
-          } catch (e) {
-            console.log('Failed to parse WebSocket message:', e);
-          }
-        };
-        
-        ws.onerror = () => {
-          // WebSocket errors don't provide useful information in the browser
-          // Just mark as disconnected, onclose will handle reconnection
-          if (mounted) {
-            setIsConnected(false);
-          }
-        };
-        
-        ws.onclose = () => {
-          if (!mounted) return;
-          console.log('ConfidenceMeter: WebSocket disconnected, will reconnect...');
-          setIsConnected(false);
-          // Reconnect after 3 seconds if component is still mounted
-          reconnectTimeout = setTimeout(() => {
-            if (mounted) connectWS();
-          }, 3000);
-        };
-        
-        wsRef.current = ws;
-      } catch (error) {
-        console.log('WebSocket connection attempt failed, will retry...');
-        if (mounted) {
-          setIsConnected(false);
-          reconnectTimeout = setTimeout(() => {
-            if (mounted) connectWS();
-          }, 3000);
-        }
-      }
-    };
-    
-    connectWS();
-    
-    return () => {
-      mounted = false;
-      if (reconnectTimeout) {
-        clearTimeout(reconnectTimeout);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
-
-  // Listen for immediate demo selection from LocalControlPanel
-  useEffect(() => {
-    const handleDemoPromptSelected = (event: CustomEvent) => {
-      const { prompt, demoId } = event.detail;
-      console.log('ConfidenceMeter: Demo prompt selected -', demoId);
-      
-      if (prompt) {
-        setPrompt(prompt);
-        // Don't clear tokens here - wait for demo-starting event
-      }
-    };
-    
-    window.addEventListener('demo-prompt-selected', handleDemoPromptSelected as EventListener);
-    return () => window.removeEventListener('demo-prompt-selected', handleDemoPromptSelected as EventListener);
-  }, []);
-
-  // Listen for demo starting event to clear tokens
-  useEffect(() => {
-    const handleDemoStarting = (event: CustomEvent) => {
-      const { demoId } = event.detail;
-      console.log('ConfidenceMeter: Demo starting, clearing tokens -', demoId);
-      
-      // Clear tokens when demo actually starts generating
-      setTokens([]);
-      setConfidenceData([]);
-      setGeneratedText("");
-      setSelectedToken(0);
-    };
-    
-    window.addEventListener('demo-starting', handleDemoStarting as EventListener);
-    return () => window.removeEventListener('demo-starting', handleDemoStarting as EventListener);
-  }, []);
-
-  // Listen for demo completion events from LocalControlPanel
-  useEffect(() => {
-    const handleDemoCompleted = (event: CustomEvent) => {
-      const data = event.detail;
-      console.log('ConfidenceMeter: Demo completed', data);
-      
-      // Don't overwrite the streaming data!
-      // We already have the tokens and confidence from streaming
-      // Just update the final generated text and overall metrics
-      
-      if (data && data.generated_text) {
-        setGeneratedText(data.generated_text);
-        
-        // Only update overall metrics from the completion data
-        if (data.confidence) {
-          setOverallConfidence(data.confidence);
-        }
-        if (data.hallucination_risk) {
-          setHallucinationRisk(data.hallucination_risk);
-        }
-        
-        // Update layer activations if provided
-        if (data.traces) {
-          interface TraceData {
-            type: string;
-            mean?: number;
-          }
-          const activationTraces = data.traces.filter((t: TraceData) => t.type === 'activation');
-          if (activationTraces.length > 0) {
-            const layers = activationTraces.slice(0, 8).map((t: TraceData, idx: number) => ({
-              layer: `L${idx}`,
-              value: Math.min(1, Math.max(0, t.mean || 0.5))
-            }));
-            setLayerActivations(layers);
-          }
-        }
-      }
-    };
-    
-    window.addEventListener('demo-completed', handleDemoCompleted as EventListener);
-    return () => window.removeEventListener('demo-completed', handleDemoCompleted as EventListener);
-  }, []);
-
-  // Generate with the model
-  const generateWithConfidence = async () => {
-    setIsGenerating(true);
-    tokenBufferRef.current = [];
-    confidenceBufferRef.current = [];
-    
-    // Clear existing tokens to show streaming
-    setTokens([]);
-    setConfidenceData([]);
-    
-    try {
-      const response = await fetch(`${getApiUrl()}/generate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt,
-          max_tokens: 50,
-          temperature: 0.7,
-          extract_traces: true,
-          sampling_rate: 0.3
-        })
-      });
-      
-      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-      const data = await response.json();
-      
-      // Process the response
-      const text = data.generated_text;
-      const newTokens = text.split(/(\s+|[(){}[\].,;:!?])/g).filter((t: string) => t.trim());
-      setTokens(newTokens);
-      setGeneratedText(text);
-      
-      // Extract confidence metrics
-      interface TraceData {
-        type: string;
-        entropy?: number;
-        mean?: number;
-      }
-      const confidenceTraces = data.traces?.filter((t: TraceData) => t.type === 'confidence') || [];
-      const activationTraces = data.traces?.filter((t: TraceData) => t.type === 'activation') || [];
-      
-      // Create confidence data
-      const newConfidenceData: ConfidenceTrace[] = newTokens.map((token: string, idx: number) => ({
-        token: token === "\n" ? "⏎" : token,
-        index: idx,
-        confidence: data.confidence || 0.75,
-        activation: 0.5 + Math.random() * 0.3,
-        entropy: confidenceTraces[0]?.entropy || Math.random() * 0.5,
-        hallucination_risk: data.hallucination_risk || 0.1
-      }));
-      
-      setConfidenceData(newConfidenceData);
-      setOverallConfidence(data.confidence || 0.75);
-      setHallucinationRisk(data.hallucination_risk || 0.1);
-      
-      // Update layer activations
-      if (activationTraces.length > 0) {
-        const layers = activationTraces.slice(0, 8).map((t: TraceData, idx: number) => ({
-          layer: `L${idx}`,
-          value: Math.min(1, Math.max(0, t.mean || 0.5))
-        }));
-        setLayerActivations(layers);
-      }
-      
-    } catch (error) {
-      console.error('Generation error:', error);
-      alert(`Failed to generate: ${error}`);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  // Initialize with empty data - no mock data
-  useEffect(() => {
-    // Only set mock layer activations if we have none
-    if (layerActivations.length === 0) {
-      const mockLayers = Array.from({ length: 8 }, (_, i) => ({
-        layer: `L${i}`,
-        value: 0.5 + Math.random() * 0.5
-      }));
-      setLayerActivations(mockLayers);
-    }
-  }, [layerActivations.length]);
-
-  const getConfidenceColor = (confidence: number) => {
-    if (confidence > 0.8) return "text-green-400";
-    if (confidence > 0.6) return "text-yellow-400";
-    return "text-red-400";
-  };
-
-  const getConfidenceLabel = (confidence: number) => {
-    if (confidence > 0.8) return "High Confidence";
-    if (confidence > 0.6) return "Medium Confidence";
-    return "Low Confidence - Potential Hallucination";
-  };
-
-  // Generate contextual explanation for current visualization
-  const generateExplanation = () => {
-    const currentConfidence = confidenceData[selectedToken]?.confidence || 0;
-    const avgConfidence = confidenceData.length > 0 
-      ? confidenceData.reduce((sum, d) => sum + d.confidence, 0) / confidenceData.length 
-      : 0;
-    const lowConfidenceTokens = confidenceData.filter(d => d.confidence < 0.6).length;
-    
-    return {
-      title: "Real-time Confidence Tracking",
-      description: "Live monitoring of model confidence as tokens are generated, with dynamic risk assessment and hallucination detection.",
-      details: [
-        {
-          heading: "What is Confidence Tracking?",
-          content: `This visualization shows real-time confidence scores for each token as it's generated. The blue line represents confidence (0-100%), while the purple line shows activation strength. Tokens appear progressively as the model generates them.`
-        },
-        {
-          heading: "Live Metrics",
-          content: `Overall Confidence: Running average updated with each token. Hallucination Risk: Percentage of low-confidence tokens (<60%). Both metrics update in real-time during generation. The chart uses a fixed 0-100% scale for consistency.`
-        },
-        {
-          heading: "Current Token Analysis",
-          content: tokens[selectedToken] 
-            ? `Token "${tokens[selectedToken]}" has ${(currentConfidence * 100).toFixed(0)}% confidence (${getConfidenceLabel(currentConfidence)}). Average confidence: ${(avgConfidence * 100).toFixed(0)}%. ${lowConfidenceTokens} tokens below safety threshold.`
-            : `Click on a token above to see its confidence score. Overall average: ${(avgConfidence * 100).toFixed(0)}%.`
-        },
-        {
-          heading: "Dynamic Alerts",
-          content: `The alert box changes color and message based on real-time analysis: Red (high risk), Yellow (dropping confidence), Green (high confidence), Blue (normal). It shows specific problematic tokens when detected.`
-        },
-        {
-          heading: "Token Streaming",
-          content: `Tokens appear one-by-one as generated, not all at once. Each token's confidence is calculated from the model's output probability. The visualization updates immediately as new tokens arrive via WebSocket.`
-        },
-        {
-          heading: "Hallucination Detection",
-          content: `Real-time detection based on: Running confidence average, percentage of low-confidence tokens, sudden drops in recent tokens. Risk level updates continuously and triggers appropriate alerts.`
-        }
-      ]
-    };
-  };
-
-  const explanation = generateExplanation();
-
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold mb-2">Confidence Meter</h2>
-          <p className="text-gray-400">
-            Track model confidence and activation patterns to detect potential hallucinations
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-
-      {/* Generation Controls */}
-      <div className="mb-6">
-        <div className="flex gap-4">
-          <input
-            type="text"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            className="flex-1 px-4 py-2 bg-gray-800 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter prompt to analyze confidence..."
-          />
-          <button
-            onClick={generateWithConfidence}
-            disabled={isGenerating || !isConnected}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-          >
-            {isGenerating ? (
-              <>
-                <RefreshCw className="w-4 h-4 animate-spin" />
-                Analyzing...
-              </>
-            ) : (
-              <>
-                Generate & Track
-                <Zap className="w-4 h-4" />
-              </>
-            )}
-          </button>
-        </div>
-        
-        {/* Overall Metrics */}
-        {overallConfidence > 0 && (
-          <div className="mt-4 grid grid-cols-2 gap-4">
-            <div className="bg-gray-800 rounded-lg p-3">
-              <div className="text-xs text-gray-400 mb-1">Overall Confidence</div>
-              <div className={`text-2xl font-bold ${getConfidenceColor(overallConfidence)}`}>
-                {(overallConfidence * 100).toFixed(1)}%
-              </div>
-            </div>
-            <div className="bg-gray-800 rounded-lg p-3">
-              <div className="text-xs text-gray-400 mb-1">Hallucination Risk</div>
-              <div className={`text-2xl font-bold ${
-                hallucinationRisk > 0.5 ? 'text-red-400' : hallucinationRisk > 0.3 ? 'text-yellow-400' : 'text-green-400'
-              }`}>
-                {(hallucinationRisk * 100).toFixed(1)}%
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Main Content Area with Side Panel */}
-      <div className="flex gap-4">
-        {/* Main Visualization Container */}
-        <div className="flex-1 min-w-0 transition-all duration-500 ease-in-out">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
-        <div className="lg:col-span-2">
-          <div className="bg-gray-800 rounded-lg p-4 relative">
-            {/* Help Toggle Button */}
-            <button
-              onClick={() => setShowExplanation(!showExplanation)}
-              className="absolute top-4 right-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-            >
-              {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-              <span className="text-sm font-medium">
-                {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-              </span>
-            </button>
-            
-            <h3 className="text-lg font-semibold mb-4">Token-Level Confidence</h3>
-            
-            <div className="mb-4 p-3 bg-black rounded-lg font-mono text-sm">
-              <div className="flex flex-wrap gap-1">
-                {tokens.map((token, idx) => (
-                  <button
-                    key={idx}
-                    onClick={() => setSelectedToken(idx)}
-                    className={`px-2 py-1 rounded transition-all ${
-                      idx === selectedToken
-                        ? "bg-blue-600 text-white"
-                        : "bg-gray-700 text-gray-300 hover:bg-gray-600"
-                    }`}
-                  >
-                    {token === "\\n" ? "⏎" : token}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <div className="h-64">
-              <ResponsiveContainer width="100%" height="100%">
-                <AreaChart data={confidenceData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-                  <XAxis 
-                    dataKey="index" 
-                    stroke="#9ca3af"
-                    tick={{ fontSize: 12 }}
-                    tickFormatter={(value) => {
-                      // Show token text for specific indices, or just the index
-                      const token = confidenceData[value]?.token;
-                      return token && value % Math.ceil(confidenceData.length / 10) === 0 ? token : '';
-                    }}
-                  />
-                  <YAxis 
-                    domain={[0, 1]}
-                    ticks={[0, 0.25, 0.5, 0.75, 1]}
-                    stroke="#9ca3af"
-                    tick={{ fontSize: 12 }}
-                    tickFormatter={(value) => (value * 100).toFixed(0) + '%'}
-                  />
-                  <Tooltip 
-                    contentStyle={{ 
-                      backgroundColor: "#1f2937", 
-                      border: "1px solid #374151",
-                      borderRadius: "8px"
-                    }}
-                    labelFormatter={(value) => {
-                      const token = confidenceData[value]?.token;
-                      return token ? `Token ${value}: "${token}"` : `Token ${value}`;
-                    }}
-                    formatter={(value: number) => [(value * 100).toFixed(1) + '%']}
-                  />
-                  <Area
-                    type="monotone"
-                    dataKey="confidence"
-                    stroke="#3b82f6"
-                    fill="#3b82f6"
-                    fillOpacity={0.3}
-                    strokeWidth={2}
-                    isAnimationActive={false}
-                    dot={false}
-                  />
-                  <Area
-                    type="monotone"
-                    dataKey="activation"
-                    stroke="#a855f7"
-                    fill="#a855f7"
-                    fillOpacity={0.2}
-                    strokeWidth={2}
-                    isAnimationActive={false}
-                    dot={false}
-                  />
-                </AreaChart>
-              </ResponsiveContainer>
-            </div>
-
-            {selectedToken !== null && confidenceData[selectedToken] && (
-              <div className="mt-4 p-3 bg-gray-900 rounded-lg">
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm text-gray-400">Selected Token:</span>
-                  <span className="font-mono font-bold">{tokens[selectedToken]}</span>
-                </div>
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm text-gray-400">Confidence:</span>
-                  <span className={`font-bold ${getConfidenceColor(confidenceData[selectedToken].confidence)}`}>
-                    {(confidenceData[selectedToken].confidence * 100).toFixed(1)}%
-                  </span>
-                </div>
-                <div className="flex items-center gap-2 mt-3">
-                  <AlertCircle className="w-4 h-4 text-yellow-500" />
-                  <span className="text-sm text-gray-300">
-                    {getConfidenceLabel(confidenceData[selectedToken].confidence)}
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div>
-          <div className="bg-gray-800 rounded-lg p-4 mb-4">
-            <h3 className="text-lg font-semibold mb-4">Layer Activations</h3>
-            <div className="space-y-2">
-              {layerActivations.map((layer, idx) => (
-                <div key={`${layer.layer}-${idx}-${layer.value}`} className="flex items-center gap-2">
-                  <span className="text-sm text-gray-400 w-8">{layer.layer}</span>
-                  <div className="flex-1 h-4 bg-gray-700 rounded-full overflow-hidden">
-                    <div
-                      className="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-300"
-                      style={{ width: `${layer.value * 100}%` }}
-                    />
-                  </div>
-                  <span className="text-xs text-gray-400 w-12 text-right">
-                    {(layer.value * 100).toFixed(0)}%
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="bg-gray-800 rounded-lg p-4">
-            <h3 className="text-lg font-semibold mb-4">Risk Indicators</h3>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between p-2 bg-gray-900 rounded">
-                <div className="flex items-center gap-2">
-                  <Shield className="w-4 h-4 text-green-500" />
-                  <span className="text-sm">API Usage</span>
-                </div>
-                <span className="text-sm text-green-400">Valid</span>
-              </div>
-              <div className="flex items-center justify-between p-2 bg-gray-900 rounded">
-                <div className="flex items-center gap-2">
-                  <Activity className="w-4 h-4 text-yellow-500" />
-                  <span className="text-sm">Pattern Match</span>
-                </div>
-                <span className="text-sm text-yellow-400">78%</span>
-              </div>
-              <div className="flex items-center justify-between p-2 bg-gray-900 rounded">
-                <div className="flex items-center gap-2">
-                  <TrendingUp className="w-4 h-4 text-blue-500" />
-                  <span className="text-sm">Entropy</span>
-                </div>
-                <span className="text-sm text-blue-400">0.34</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-          {/* Dynamic Alert based on real-time data */}
-          {confidenceData.length > 0 && (() => {
-            const recentTokens = confidenceData.slice(-10);
-            const avgRecentConfidence = recentTokens.reduce((sum, d) => sum + d.confidence, 0) / recentTokens.length;
-            const lowConfTokens = confidenceData.filter(d => d.confidence < 0.6);
-            const hasLowConfidence = lowConfTokens.length > 0;
-            
-            if (hallucinationRisk > 0.5) {
-              return (
-                <div className="bg-red-900/30 border border-red-700 rounded-lg p-4">
-                  <div className="flex items-start gap-3">
-                    <AlertCircle className="w-5 h-5 text-red-500 mt-0.5" />
-                    <div>
-                      <div className="font-semibold text-red-300 mb-1">High Hallucination Risk</div>
-                      <div className="text-sm text-gray-300">
-                        {(hallucinationRisk * 100).toFixed(0)}% risk detected. Multiple low-confidence tokens found.
-                        {lowConfTokens.length > 0 && ` Tokens with confidence below 60%: ${lowConfTokens.map(t => `"${t.token}"`).slice(0, 3).join(', ')}${lowConfTokens.length > 3 ? '...' : ''}`}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            } else if (avgRecentConfidence < 0.7) {
-              return (
-                <div className="bg-yellow-900/30 border border-yellow-700 rounded-lg p-4">
-                  <div className="flex items-start gap-3">
-                    <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5" />
-                    <div>
-                      <div className="font-semibold text-yellow-300 mb-1">Confidence Dropping</div>
-                      <div className="text-sm text-gray-300">
-                        Recent average confidence: {(avgRecentConfidence * 100).toFixed(0)}%. 
-                        Model may be uncertain about current generation. Consider reviewing output.
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            } else if (overallConfidence > 0.85) {
-              return (
-                <div className="bg-green-900/30 border border-green-700 rounded-lg p-4">
-                  <div className="flex items-start gap-3">
-                    <CheckCircle className="w-5 h-5 text-green-500 mt-0.5" />
-                    <div>
-                      <div className="font-semibold text-green-300 mb-1">High Confidence Generation</div>
-                      <div className="text-sm text-gray-300">
-                        Model confidence: {(overallConfidence * 100).toFixed(0)}%. 
-                        Generated code patterns match training data well.
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            } else {
-              return (
-                <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-4">
-                  <div className="flex items-start gap-3">
-                    <Activity className="w-5 h-5 text-blue-500 mt-0.5" />
-                    <div>
-                      <div className="font-semibold text-blue-300 mb-1">Normal Generation</div>
-                      <div className="text-sm text-gray-300">
-                        Model confidence: {(overallConfidence * 100).toFixed(0)}%. 
-                        Generation proceeding normally with typical confidence levels.
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            }
-          })()}
-          {confidenceData.length === 0 && (
-            <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <Activity className="w-5 h-5 text-gray-500 mt-0.5" />
-                <div>
-                  <div className="font-semibold text-gray-300 mb-1">Ready to Generate</div>
-                  <div className="text-sm text-gray-400">
-                    Enter a prompt or select a demo to begin tracking confidence and detecting potential issues.
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-        
-        {/* Explanation Side Panel */}
-        <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-          <div className="w-96 h-[600px] bg-gray-900 rounded-lg border border-gray-700">
-            {/* Panel Header */}
-            <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-              <div className="flex items-center gap-2">
-                <Info className="w-5 h-5 text-blue-400" />
-                <h3 className="text-lg font-semibold text-white">Understanding Confidence Tracking</h3>
-              </div>
-            </div>
-            
-            {/* Panel Content */}
-            <div className="px-4 py-4 overflow-y-auto h-[calc(600px-60px)]">
-              {/* Main Description */}
-              <div className="mb-4 p-3 bg-red-900/20 border border-red-800 rounded-lg">
-                <h4 className="text-sm font-semibold text-red-400 mb-1">{explanation.title}</h4>
-                <p className="text-xs text-gray-300">{explanation.description}</p>
-              </div>
-              
-              {/* Explanation Sections */}
-              <div className="space-y-3">
-                {explanation.details.map((section, idx) => (
-                  <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                    <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                      <Zap className="w-3 h-3 text-yellow-400" />
-                      {section.heading}
-                    </h5>
-                    <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Visual Guide */}
-              <div className="mt-4 p-3 bg-yellow-900/20 border border-yellow-800 rounded-lg">
-                <h4 className="font-medium text-sm text-yellow-400 mb-2">Confidence Levels</h4>
-                <div className="space-y-2 text-xs">
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-green-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">High (&gt;80%) - Reliable output</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-yellow-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">Medium (60-80%) - Caution advised</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-red-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">Low (&lt;60%) - Potential hallucination</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Current Metrics */}
-              {selectedToken !== null && confidenceData[selectedToken] && (
-                <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                  <h4 className="font-medium text-sm text-gray-300 mb-2">Current Token Metrics</h4>
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Token:</span>
-                      <span className="text-white font-mono">&quot;{tokens[selectedToken]}&quot;</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Confidence:</span>
-                      <span className={getConfidenceColor(confidenceData[selectedToken].confidence)}>
-                        {(confidenceData[selectedToken].confidence * 100).toFixed(1)}%
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Activation:</span>
-                      <span className="text-purple-400">
-                        {(confidenceData[selectedToken].activation * 100).toFixed(1)}%
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Entropy:</span>
-                      <span className="text-blue-400">
-                        {confidenceData[selectedToken].entropy.toFixed(3)}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Tips */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Tips</h4>
-                <ul className="text-xs text-gray-400 space-y-1">
-                  <li>• Click tokens to see detailed metrics</li>
-                  <li>• Watch for sudden confidence drops</li>
-                  <li>• High entropy + low confidence = uncertainty</li>
-                  <li>• Monitor layer activation patterns</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/DecisionPath3D.tsx

@@ -1,621 +0,0 @@
-/**
- * Decision Path 3D Visualization
- * 
- * Shows the exact path through the neural network when generating tokens,
- * highlighting critical layers, attention patterns, and decision factors.
- * This is the core "Glass Box" visualization for the PhD thesis.
- * 
- * @component
- */
-
-"use client";
-
-import { useRef, useState, useEffect, useMemo } from "react";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import { 
-  OrbitControls, 
-  Text, 
-  Box, 
-  Sphere,
-  Line,
-  Billboard
-} from "@react-three/drei";
-import * as THREE from "three";
-import { 
-  Brain,
-  Zap,
-  Eye,
-  GitBranch,
-  Activity,
-  Sparkles,
-  AlertCircle,
-  TrendingUp,
-  Layers
-} from "lucide-react";
-
-interface LayerActivation {
-  layer_index: number;
-  attention_weights: number[][];
-  hidden_state_norm: number;
-  ffn_activation: number;
-  top_attention_heads: number[];
-  confidence: number;
-}
-
-interface DecisionPath {
-  token: string;
-  token_id: number;
-  probability: number;
-  layer_activations: LayerActivation[];
-  attention_flow: Array<{
-    from_layer: number;
-    to_layer: number | string;
-    strength: number;
-    top_heads: number[];
-  }>;
-  alternatives: Array<{
-    token: string;
-    token_id: number;
-    probability: number;
-  }>;
-  decision_factors: {
-    attention_focus: number;
-    semantic_alignment: number;
-    syntactic_correctness: number;
-    context_relevance: number;
-    confidence: number;
-  };
-  critical_layers: number[];
-  confidence_score: number;
-  timestamp: number;
-}
-
-// Enhanced Transformer Layer with activation visualization
-function EnhancedTransformerLayer({ 
-  position, 
-  layerIndex,
-  activation,
-  isCritical,
-  isActive
-}: { 
-  position: [number, number, number];
-  layerIndex: number;
-  activation?: LayerActivation;
-  isCritical?: boolean;
-  isActive?: boolean;
-}) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const glowRef = useRef<THREE.Mesh>(null);
-  
-  useFrame((state) => {
-    if (meshRef.current && isCritical) {
-      // Pulse critical layers
-      const scale = 1 + Math.sin(state.clock.elapsedTime * 3) * 0.1;
-      meshRef.current.scale.set(scale, scale, scale);
-    }
-    
-    if (glowRef.current && activation) {
-      // Glow based on activation strength
-      glowRef.current.scale.set(
-        1 + activation.confidence * 0.3,
-        1 + activation.confidence * 0.3,
-        1 + activation.confidence * 0.3
-      );
-    }
-  });
-
-  const baseColor = isCritical ? "#ff6b6b" : isActive ? "#4ecdc4" : "#2d3748";
-  const emissiveIntensity = activation ? activation.confidence : 0;
-
-  return (
-    <group position={position}>
-      {/* Glow effect for active layers */}
-      {activation && (
-        <Sphere ref={glowRef} args={[2.5, 16, 16]}>
-          <meshBasicMaterial
-            color={isCritical ? "#ff6b6b" : "#4ecdc4"}
-            transparent
-            opacity={activation.confidence * 0.3}
-          />
-        </Sphere>
-      )}
-      
-      {/* Main layer box */}
-      <Box ref={meshRef} args={[4, 0.3, 3]}>
-        <meshStandardMaterial
-          color={baseColor}
-          emissive={baseColor}
-          emissiveIntensity={emissiveIntensity}
-          metalness={0.8}
-          roughness={0.2}
-        />
-      </Box>
-      
-      {/* Layer label */}
-      <Text
-        position={[0, 0.3, 0]}
-        fontSize={0.15}
-        color="white"
-        anchorX="center"
-      >
-        Layer {layerIndex}
-      </Text>
-      
-      {/* Confidence indicator */}
-      {activation && (
-        <Text
-          position={[0, -0.3, 0]}
-          fontSize={0.08}
-          color={isCritical ? "#ff6b6b" : "#4ecdc4"}
-          anchorX="center"
-        >
-          Confidence: {(activation.confidence * 100).toFixed(0)}%
-        </Text>
-      )}
-      
-      {/* Attention head activation visualization */}
-      {activation && activation.top_attention_heads.map((headIdx, i) => (
-        <Box
-          key={headIdx}
-          position={[(i - 1) * 0.4, 0, 1.8]}
-          args={[0.3, 0.15, 0.3]}
-        >
-          <meshStandardMaterial
-            color="#ffd93d"
-            emissive="#ffd93d"
-            emissiveIntensity={0.5}
-          />
-        </Box>
-      ))}
-    </group>
-  );
-}
-
-// Animated decision flow particle
-function DecisionParticle({ 
-  path,
-  onComplete 
-}: {
-  path: THREE.Vector3[];
-  onComplete?: () => void;
-}) {
-  const particleRef = useRef<THREE.Mesh>(null);
-  const [progress, setProgress] = useState(0);
-  
-  useFrame((state, delta) => {
-    if (particleRef.current && progress < 1) {
-      const newProgress = Math.min(progress + delta * 0.3, 1);
-      setProgress(newProgress);
-      
-      // Interpolate position along path
-      const segmentCount = path.length - 1;
-      const currentSegment = Math.floor(newProgress * segmentCount);
-      const segmentProgress = (newProgress * segmentCount) % 1;
-      
-      if (currentSegment < segmentCount) {
-        const start = path[currentSegment];
-        const end = path[currentSegment + 1];
-        particleRef.current.position.lerpVectors(start, end, segmentProgress);
-      }
-      
-      if (newProgress >= 1 && onComplete) {
-        onComplete();
-      }
-    }
-  });
-  
-  return (
-    <Sphere ref={particleRef} args={[0.2, 16, 16]}>
-      <meshStandardMaterial
-        color="#ffd93d"
-        emissive="#ffd93d"
-        emissiveIntensity={1}
-      />
-    </Sphere>
-  );
-}
-
-// Attention flow visualization
-function AttentionFlowVisualization({
-  flow,
-  layerSpacing
-}: {
-  flow: DecisionPath['attention_flow'];
-  layerSpacing: number;
-}) {
-  return (
-    <>
-      {flow.map((connection, idx) => {
-        const startY = connection.from_layer * layerSpacing;
-        const endY = connection.to_layer === "output" 
-          ? 20 * layerSpacing + 5 
-          : (connection.to_layer as number) * layerSpacing;
-        
-        const points = [
-          new THREE.Vector3(0, startY, 0),
-          new THREE.Vector3(0, endY, 0)
-        ];
-        
-        return (
-          <Line
-            key={idx}
-            points={points}
-            color={connection.strength > 0.7 ? "#ff6b6b" : "#4ecdc4"}
-            lineWidth={connection.strength * 5}
-            transparent
-            opacity={0.6}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-// Alternative tokens display
-function AlternativesDisplay({
-  alternatives,
-  position
-}: {
-  alternatives: DecisionPath['alternatives'];
-  position: [number, number, number];
-}) {
-  return (
-    <group position={position}>
-      <Text fontSize={0.12} color="#9ca3af" position={[0, 0.5, 0]}>
-        Alternatives Considered:
-      </Text>
-      {alternatives.slice(0, 3).map((alt, idx) => (
-        <group key={idx} position={[0, -idx * 0.3, 0]}>
-          <Text
-            fontSize={0.1}
-            color={idx === 0 ? "#4ecdc4" : "#6b7280"}
-            anchorX="center"
-          >
-            {alt.token}: {(alt.probability * 100).toFixed(1)}%
-          </Text>
-        </group>
-      ))}
-    </group>
-  );
-}
-
-// Decision factors visualization
-function DecisionFactorsDisplay({
-  factors,
-  position
-}: {
-  factors: DecisionPath['decision_factors'];
-  position: [number, number, number];
-}) {
-  const factorList = Object.entries(factors);
-  
-  return (
-    <group position={position}>
-      <Text fontSize={0.12} color="#ffd93d" position={[0, 0.8, 0]}>
-        Decision Factors:
-      </Text>
-      {factorList.map(([key, value], idx) => {
-        const barWidth = value * 2;
-        return (
-          <group key={key} position={[0, -idx * 0.25, 0]}>
-            <Box position={[-1, 0, 0]} args={[barWidth, 0.15, 0.1]}>
-              <meshStandardMaterial
-                color={value > 0.7 ? "#4ecdc4" : value > 0.4 ? "#ffd93d" : "#ff6b6b"}
-                emissive={value > 0.7 ? "#4ecdc4" : "#ffd93d"}
-                emissiveIntensity={0.3}
-              />
-            </Box>
-            <Text
-              position={[1, 0, 0]}
-              fontSize={0.08}
-              color="#9ca3af"
-              anchorX="left"
-            >
-              {key.replace(/_/g, ' ')}: {(value * 100).toFixed(0)}%
-            </Text>
-          </group>
-        );
-      })}
-    </group>
-  );
-}
-
-// Main 3D scene with decision path
-function DecisionPathScene({ decisionPath }: { decisionPath: DecisionPath | null }) {
-  const numLayers = 20;
-  const layerSpacing = 3.5;
-  const [showParticle, setShowParticle] = useState(false);
-  
-  // Create path for particle animation
-  const particlePath = useMemo(() => {
-    if (!decisionPath) return [];
-    
-    const path: THREE.Vector3[] = [
-      new THREE.Vector3(0, -5, 0), // Start at input
-    ];
-    
-    // Add critical layers
-    decisionPath.critical_layers.forEach(layerIdx => {
-      path.push(new THREE.Vector3(0, layerIdx * layerSpacing, 0));
-    });
-    
-    // End at output
-    path.push(new THREE.Vector3(0, numLayers * layerSpacing + 5, 0));
-    
-    return path;
-  }, [decisionPath]);
-  
-  useEffect(() => {
-    if (decisionPath) {
-      setShowParticle(true);
-    }
-  }, [decisionPath]);
-  
-  return (
-    <>
-      {/* Lighting */}
-      <ambientLight intensity={0.3} />
-      <pointLight position={[10, 10, 10]} intensity={1} />
-      <spotLight position={[0, 50, 0]} angle={0.3} penumbra={1} intensity={1} />
-      
-      {/* Input Layer */}
-      <group position={[0, -5, 0]}>
-        <Box args={[5, 0.2, 2]}>
-          <meshStandardMaterial color="#10b981" emissive="#10b981" emissiveIntensity={0.3} />
-        </Box>
-        <Text position={[0, 0.3, 0]} fontSize={0.15} color="white">
-          Input Embeddings
-        </Text>
-      </group>
-      
-      {/* Transformer Layers */}
-      {Array.from({ length: numLayers }).map((_, i) => {
-        const activation = decisionPath?.layer_activations[i];
-        const isCritical = decisionPath?.critical_layers.includes(i);
-        
-        return (
-          <EnhancedTransformerLayer
-            key={i}
-            position={[0, i * layerSpacing, 0]}
-            layerIndex={i}
-            activation={activation}
-            isCritical={isCritical}
-            isActive={!!activation}
-          />
-        );
-      })}
-      
-      {/* Output Layer */}
-      <group position={[0, numLayers * layerSpacing + 5, 0]}>
-        <Box args={[5, 0.2, 2]}>
-          <meshStandardMaterial color="#f59e0b" emissive="#f59e0b" emissiveIntensity={0.3} />
-        </Box>
-        <Text position={[0, 0.3, 0]} fontSize={0.15} color="white">
-          Output: {decisionPath?.token || "..."}
-        </Text>
-        <Text position={[0, -0.3, 0]} fontSize={0.1} color="#9ca3af">
-          Probability: {decisionPath ? (decisionPath.probability * 100).toFixed(1) : "0"}%
-        </Text>
-      </group>
-      
-      {/* Attention Flow Visualization */}
-      {decisionPath && (
-        <AttentionFlowVisualization 
-          flow={decisionPath.attention_flow}
-          layerSpacing={layerSpacing}
-        />
-      )}
-      
-      {/* Decision Particle Animation */}
-      {showParticle && particlePath.length > 0 && (
-        <DecisionParticle 
-          path={particlePath}
-          onComplete={() => setShowParticle(false)}
-        />
-      )}
-      
-      {/* Alternatives Display */}
-      {decisionPath && (
-        <AlternativesDisplay
-          alternatives={decisionPath.alternatives}
-          position={[8, numLayers * layerSpacing / 2, 0]}
-        />
-      )}
-      
-      {/* Decision Factors Display */}
-      {decisionPath && (
-        <DecisionFactorsDisplay
-          factors={decisionPath.decision_factors}
-          position={[-8, numLayers * layerSpacing / 2, 0]}
-        />
-      )}
-      
-      {/* Grid */}
-      <gridHelper args={[150, 150, 0x444444, 0x222222]} />
-    </>
-  );
-}
-
-export default function DecisionPath3D() {
-  const [decisionPath, setDecisionPath] = useState<DecisionPath | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [isClient, setIsClient] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
-  const [prompt, setPrompt] = useState("def quicksort(arr):");
-  
-  // Ensure client-side only rendering
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  
-  // Connect to decision path service
-  useEffect(() => {
-    if (!isClient) return;
-    
-    const connectToService = () => {
-      try {
-        const ws = new WebSocket('ws://localhost:8769');
-        
-        ws.onopen = () => {
-          console.log('[DecisionPath3D] Connected to service');
-          setIsConnected(true);
-          wsRef.current = ws;
-        };
-        
-        ws.onmessage = (event) => {
-          const data = JSON.parse(event.data);
-          console.log('[DecisionPath3D] Received:', data.type);
-          
-          if (data.type === 'decision_path') {
-            setDecisionPath(data.data);
-          } else if (data.type === 'analysis_complete') {
-            setIsAnalyzing(false);
-          }
-        };
-        
-        ws.onerror = (error) => {
-          console.log('[DecisionPath3D] Service not available');
-          setIsConnected(false);
-        };
-        
-        ws.onclose = () => {
-          console.log('[DecisionPath3D] Disconnected');
-          setIsConnected(false);
-          wsRef.current = null;
-        };
-      } catch (error) {
-        console.log('[DecisionPath3D] Connection failed');
-        setIsConnected(false);
-      }
-    };
-    
-    connectToService();
-    
-    return () => {
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, [isClient]);
-  
-  const startAnalysis = () => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      setIsAnalyzing(true);
-      wsRef.current.send(JSON.stringify({
-        type: 'analyze',
-        prompt: prompt
-      }));
-    }
-  };
-  
-  return (
-    <div className="bg-gray-900 rounded-xl p-6 h-[900px]">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <GitBranch className="w-6 h-6 text-yellow-400" />
-            Decision Path Visualization
-          </h2>
-          <p className="text-gray-400 mt-1">
-            See exactly how the model makes its decisions - the Glass Box view
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-yellow-900/30 text-yellow-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-      
-      {/* Controls */}
-      <div className="bg-gray-800 rounded-lg p-4 mb-4">
-        <div className="flex items-center gap-4">
-          <input
-            type="text"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            className="flex-1 px-3 py-2 bg-gray-900 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter code to analyze..."
-          />
-          <button
-            onClick={startAnalysis}
-            disabled={!isConnected || isAnalyzing}
-            className="px-6 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-          >
-            {isAnalyzing ? (
-              <>
-                <Activity className="w-4 h-4 animate-spin" />
-                Analyzing...
-              </>
-            ) : (
-              <>
-                <Sparkles className="w-4 h-4" />
-                Analyze Decision Path
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-      
-      {/* 3D Canvas */}
-      <div className="h-[700px] bg-black rounded-lg relative">
-        {isClient ? (
-          <Canvas camera={{ position: [30, 40, 50], fov: 50 }}>
-            <DecisionPathScene decisionPath={decisionPath} />
-            <OrbitControls 
-              enablePan={true}
-              enableZoom={true}
-              enableRotate={true}
-              target={[0, 35, 0]}
-            />
-          </Canvas>
-        ) : (
-          <div className="flex items-center justify-center h-full">
-            <div className="text-gray-400">Loading 3D visualization...</div>
-          </div>
-        )}
-        
-        {/* Legend */}
-        <div className="absolute top-4 right-4 bg-gray-800/90 backdrop-blur rounded-lg p-3 text-xs">
-          <div className="font-semibold text-white mb-2">Decision Path</div>
-          <div className="space-y-1">
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-red-500 rounded"></div>
-              <span className="text-gray-300">Critical Layers</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-teal-500 rounded"></div>
-              <span className="text-gray-300">Active Layers</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-yellow-500 rounded"></div>
-              <span className="text-gray-300">Top Attention Heads</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Zap className="w-3 h-3 text-yellow-400" />
-              <span className="text-gray-300">Decision Flow</span>
-            </div>
-          </div>
-        </div>
-        
-        {/* Info Panel */}
-        {decisionPath && (
-          <div className="absolute bottom-4 left-4 bg-gray-800/90 backdrop-blur rounded-lg p-3 text-xs max-w-xs">
-            <div className="font-semibold text-white mb-2">Current Decision</div>
-            <div className="space-y-1 text-gray-300">
-              <div>Token: <span className="text-yellow-400">{decisionPath.token}</span></div>
-              <div>Confidence: <span className="text-green-400">{(decisionPath.confidence_score * 100).toFixed(0)}%</span></div>
-              <div>Critical Layers: <span className="text-red-400">{decisionPath.critical_layers.join(", ")}</span></div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/DecisionPath3DEnhanced.tsx

@@ -1,1003 +0,0 @@
-/**
- * Enhanced Decision Path 3D Visualization with Full Generation
- * 
- * Combines the decision path visualization with full code generation,
- * timeline controls, and step-by-step playback like the Code Generation Tracker.
- * 
- * @component
- */
-
-"use client";
-
-import { useRef, useState, useEffect, useMemo } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
-import * as THREE from "three";
-import { getApiUrl, getWsUrl } from "@/lib/config";
-import { 
-  GitBranch,
-  Activity,
-  Sparkles,
-  Zap,
-  Brain,
-  Play,
-  Pause,
-  SkipBack,
-  SkipForward,
-  ChevronLeft,
-  ChevronRight,
-  RefreshCw,
-  Download,
-  Code2,
-  Info,
-  HelpCircle,
-  X
-} from "lucide-react";
-
-interface LayerActivation {
-  layer_index: number;
-  attention_weights: number[][];
-  hidden_state_norm: number;
-  ffn_activation: number;
-  top_attention_heads: number[];
-  confidence: number;
-}
-
-interface DecisionPath {
-  token: string;
-  token_id: number;
-  probability: number;
-  layer_activations: LayerActivation[];
-  attention_flow: Array<{
-    from_layer: number;
-    to_layer: number | string;
-    strength: number;
-    top_heads: number[];
-  }>;
-  alternatives: Array<{
-    token: string;
-    token_id: number;
-    probability: number;
-  }>;
-  decision_factors: {
-    attention_focus: number;
-    semantic_alignment: number;
-    syntactic_correctness: number;
-    context_relevance: number;
-    confidence: number;
-  };
-  critical_layers: number[];
-  confidence_score: number;
-  timestamp: number;
-}
-
-interface GenerationStep {
-  step: number;
-  token: string;
-  token_id: number;
-  probability: number;
-  cumulative_text: string;
-  top_alternatives: Array<{
-    token: string;
-    probability: number;
-  }>;
-  attention_weights?: number[][];
-  decision_path?: DecisionPath;
-}
-
-// Enhanced Layer Component with proper FFN visualization
-interface LayerProps {
-  position: [number, number, number];
-  layerIndex: number;
-  isCritical: boolean;
-  isActive: boolean;
-  activation?: LayerActivation;
-}
-
-function Layer({ position, layerIndex, isCritical, isActive, activation }: LayerProps) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const ffnRef = useRef<THREE.Mesh>(null);
-  
-  useFrame((state) => {
-    if (meshRef.current && isCritical) {
-      const scale = 1 + Math.sin(state.clock.elapsedTime * 3) * 0.1;
-      meshRef.current.scale.set(scale, scale, scale);
-    }
-    
-    if (ffnRef.current && activation && activation.ffn_activation) {
-      // Scale FFN based on activation strength (0.5 to 1.5 scale range)
-      const ffnScale = 0.5 + (activation.ffn_activation * 1.0);
-      ffnRef.current.scale.set(ffnScale, ffnScale, ffnScale);
-      
-      // Also update FFN color intensity based on activation
-      const material = ffnRef.current.material as THREE.MeshStandardMaterial;
-      if (material) {
-        material.emissiveIntensity = activation.ffn_activation * 0.5;
-      }
-    }
-  });
-
-  const baseColor = isCritical ? "#ff6b6b" : isActive ? "#4ecdc4" : "#2d3748";
-  const ffnColor = isCritical ? "#e91e63" : isActive ? "#9c27b0" : "#6b46c1";
-
-  return (
-    <group position={position}>
-      {/* Main attention layer */}
-      <mesh ref={meshRef}>
-        <boxGeometry args={[4, 0.3, 2]} />
-        <meshStandardMaterial 
-          color={baseColor}
-          emissive={isCritical ? baseColor : "#000000"}
-          emissiveIntensity={isCritical ? 0.3 : 0}
-          metalness={0.6}
-          roughness={0.3}
-        />
-      </mesh>
-      
-      {/* FFN Component */}
-      <group position={[0, 0, -1.5]}>
-        <mesh ref={ffnRef}>
-          <boxGeometry args={[3, 0.2, 0.8]} />
-          <meshStandardMaterial 
-            color={ffnColor}
-            emissive={ffnColor}
-            emissiveIntensity={isActive ? 0.2 : 0.1}
-            metalness={0.7}
-            roughness={0.3}
-          />
-        </mesh>
-      </group>
-      
-      {/* Attention heads visualization */}
-      {isActive && (
-        <group position={[0, 0, 1.2]}>
-          {Array.from({ length: 16 }).map((_, i) => (
-            <mesh key={i} position={[(i % 4 - 1.5) * 0.3, 0, Math.floor(i / 4) * 0.2 - 0.3]}>
-              <boxGeometry args={[0.15, 0.1, 0.15]} />
-              <meshStandardMaterial
-                color={activation?.top_attention_heads?.includes(i) ? "#ffd93d" : "#4a5568"}
-                emissive={activation?.top_attention_heads?.includes(i) ? "#ffd93d" : "#000000"}
-                emissiveIntensity={activation?.top_attention_heads?.includes(i) ? 0.5 : 0}
-              />
-            </mesh>
-          ))}
-        </group>
-      )}
-    </group>
-  );
-}
-
-// 3D Scene
-function DecisionPathScene({ decisionPath }: { decisionPath: DecisionPath | null }) {
-  const numLayers = 20;
-  const layerSpacing = 3.5;
-  
-  // Debug log to see what data we're receiving
-  useEffect(() => {
-    if (decisionPath) {
-      console.log('[3D Scene] Decision path update:', {
-        hasLayerActivations: !!decisionPath.layer_activations,
-        numActivations: decisionPath.layer_activations?.length || 0,
-        criticalLayers: decisionPath.critical_layers || []
-      });
-    }
-  }, [decisionPath]);
-  
-  return (
-    <>
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} intensity={1} />
-      <directionalLight position={[0, 10, 5]} intensity={0.5} />
-      
-      {/* Input Layer */}
-      <mesh position={[0, -5, 0]}>
-        <boxGeometry args={[5, 0.2, 2]} />
-        <meshStandardMaterial color="#10b981" />
-      </mesh>
-      
-      {/* Transformer Layers */}
-      {Array.from({ length: numLayers }).map((_, i) => {
-        const isCritical = decisionPath?.critical_layers?.includes(i) || false;
-        const activation = decisionPath?.layer_activations?.find(a => a.layer_index === i);
-        
-        return (
-          <Layer
-            key={i}
-            position={[0, i * layerSpacing, 0]}
-            layerIndex={i}
-            isCritical={isCritical}
-            isActive={!!activation}
-            activation={activation}
-          />
-        );
-      })}
-      
-      {/* Output Layer */}
-      <mesh position={[0, numLayers * layerSpacing + 5, 0]}>
-        <boxGeometry args={[5, 0.2, 2]} />
-        <meshStandardMaterial color="#f59e0b" />
-      </mesh>
-      
-      {/* Connection lines */}
-      {decisionPath && decisionPath.critical_layers && decisionPath.critical_layers.map((layerIdx, idx) => {
-        const startY = layerIdx * layerSpacing;
-        const endY = idx < decisionPath.critical_layers.length - 1 
-          ? decisionPath.critical_layers[idx + 1] * layerSpacing
-          : numLayers * layerSpacing + 5;
-        
-        const points = [];
-        points.push(new THREE.Vector3(0, startY, 0));
-        points.push(new THREE.Vector3(0, endY, 0));
-        
-        const geometry = new THREE.BufferGeometry().setFromPoints(points);
-        
-        return (
-          <primitive 
-            key={`line-${idx}`} 
-            object={new THREE.Line(
-              geometry,
-              new THREE.LineBasicMaterial({ color: 0xff6b6b, linewidth: 3 })
-            )}
-          />
-        );
-      })}
-      
-      <gridHelper args={[100, 100, 0x444444, 0x222222]} />
-    </>
-  );
-}
-
-export default function DecisionPath3DEnhanced() {
-  const [generationSteps, setGenerationSteps] = useState<GenerationStep[]>([]);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-  const [modelLoading, setModelLoading] = useState(true);
-  const [loadingProgress, setLoadingProgress] = useState(0);
-  const [loadingMessage, setLoadingMessage] = useState("Initializing...");
-  const [mounted, setMounted] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
-  const [prompt, setPrompt] = useState("def quicksort(arr):");
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const promptRef = useRef<string>("");
-  const [showExplanation, setShowExplanation] = useState(false);
-  
-  // Store current trace data for layer activations
-  interface TraceData {
-    layer?: string;
-    max_weight?: number;
-    weights?: number[][];
-    mean?: number;
-  }
-  
-  const currentTracesRef = useRef<{
-    attention: TraceData[];
-    activation: TraceData[];
-  }>({ attention: [], activation: [] });
-  
-  // Fetch real model data
-  const [modelInfo, setModelInfo] = useState({
-    layers: 20,
-    heads: 16,
-    vocabSize: 51200,
-    totalParams: 356712448
-  });
-  
-  useEffect(() => {
-    fetch(`${getApiUrl()}/model/info`)
-      .then(res => res.json())
-      .then(data => {
-        setModelInfo({
-          layers: data.layers,
-          heads: data.heads,
-          vocabSize: data.vocabSize,
-          totalParams: data.totalParams
-        });
-      })
-      .catch(err => console.log('Using default model info'));
-  }, []);
-  
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  
-  // Connect to service
-  useEffect(() => {
-    if (!mounted) return;
-    
-    const connectToService = () => {
-      try {
-        const ws = new WebSocket(getWsUrl());
-        
-        ws.onopen = () => {
-          console.log('[DecisionPath3D] Connected to unified backend');
-          setIsConnected(true);
-          wsRef.current = ws;
-          // Model is already loaded in unified backend
-          setModelLoading(false);
-          setLoadingProgress(100);
-          setLoadingMessage("Model ready!");
-        };
-        
-        ws.onmessage = (event) => {
-          const data = JSON.parse(event.data);
-          console.log('[DecisionPath3D] Received:', data.type);
-          // Handle messages from unified backend
-          if (data.type === 'generated_token') {
-            // Filter out empty tokens
-            if (!data.token || data.token.length === 0) {
-              return;
-            }
-            
-            // Add this as a new generation step
-            setGenerationSteps(prev => {
-              // Build cumulative text correctly
-              let cumulativeText = "";
-              if (prev.length > 0) {
-                // Get the last cumulative text and add the new token
-                cumulativeText = prev[prev.length - 1].cumulative_text + data.token;
-              } else {
-                // First token after prompt - use the stored prompt ref
-                cumulativeText = promptRef.current + data.token;
-              }
-              
-              const newStep: GenerationStep = {
-                step: prev.length,
-                token: data.token,
-                token_id: prev.length,  // Use step as token_id since backend doesn't send it
-                probability: data.confidence_score || 0.5,
-                cumulative_text: cumulativeText,
-                top_alternatives: data.alternatives?.slice(0, 3) || [],
-                decision_path: {
-                  token: data.token,
-                  token_id: prev.length,
-                  probability: data.confidence_score || 0.5,
-                  layer_activations: [],
-                  attention_flow: [],
-                  alternatives: data.alternatives || [],
-                  decision_factors: {
-                    attention_focus: 0.5,
-                    semantic_alignment: 0.5,
-                    syntactic_correctness: 0.5,
-                    context_relevance: 0.5,
-                    confidence: data.confidence_score || 0.5
-                  },
-                  critical_layers: [],
-                  confidence_score: data.confidence_score || 0.5,
-                  timestamp: Date.now()
-                }
-              };
-              
-              console.log('[DecisionPath3D] Step', prev.length, 'Token:', data.token, 'Cumulative:', cumulativeText);
-              
-              const newSteps = [...prev, newStep];
-              // Update current step to the latest
-              setCurrentStep(newSteps.length - 1);
-              return newSteps;
-            });
-            
-          } else if (data.type === 'attention') {
-            // Store attention trace data
-            currentTracesRef.current.attention.push(data);
-            
-            // Update the current step with layer activation info
-            // Use a small delay to ensure we're updating the right step
-            setTimeout(() => {
-              setGenerationSteps(prev => {
-                if (prev.length === 0) return prev;
-                const updated = [...prev];
-                const lastStep = updated[updated.length - 1];
-                
-                // Extract layer index from data.layer (e.g., "layer.5" -> 5)
-                const layerMatch = data.layer?.match(/layer\.(\d+)/);
-                const layerIdx = layerMatch ? parseInt(layerMatch[1]) : null;
-                
-                if (layerIdx !== null && lastStep.decision_path) {
-                  // Mark this layer as active/critical based on attention weights
-                  if (!lastStep.decision_path.layer_activations) {
-                    lastStep.decision_path.layer_activations = [];
-                  }
-                  
-                  // Add or update layer activation
-                  // Identify top attention heads (simulate which heads are most active)
-                  const topHeads = [];
-                  if (data.max_weight > 0.5) {
-                    // Mark 2-4 random heads as highly active
-                    const numActiveHeads = Math.floor(Math.random() * 3) + 2;
-                    for (let h = 0; h < numActiveHeads; h++) {
-                      topHeads.push(Math.floor(Math.random() * 16));
-                    }
-                  }
-                  
-                  const activation = {
-                    layer_index: layerIdx,
-                    attention_weights: data.weights || [],
-                    hidden_state_norm: 0,
-                    ffn_activation: 0,
-                    top_attention_heads: topHeads,
-                    confidence: data.max_weight || 0.5
-                  };
-                  
-                  // Update or add the activation
-                  const existingIdx = lastStep.decision_path.layer_activations.findIndex(
-                    a => a.layer_index === layerIdx
-                  );
-                  if (existingIdx >= 0) {
-                    lastStep.decision_path.layer_activations[existingIdx] = activation;
-                  } else {
-                    lastStep.decision_path.layer_activations.push(activation);
-                  }
-                  
-                  // Determine critical layers (those with high attention weights)
-                  // Only mark layers 5+ as potentially critical (earlier layers are usually less decisive)
-                  // and use a higher threshold since our normalization puts many values near 0.95
-                  const threshold = 0.9; // Consider only layers with >90% attention as critical
-                  if (data.max_weight > threshold && layerIdx >= 5) {
-                    if (!lastStep.decision_path.critical_layers) {
-                      lastStep.decision_path.critical_layers = [];
-                    }
-                    if (!lastStep.decision_path.critical_layers.includes(layerIdx)) {
-                      lastStep.decision_path.critical_layers.push(layerIdx);
-                    }
-                  }
-                }
-                return updated;
-              });
-            }, 100); // 100ms delay to ensure token is processed first
-          } else if (data.type === 'activation') {
-            // Store activation trace data
-            currentTracesRef.current.activation.push(data);
-            
-            // Update FFN activation info
-            setTimeout(() => {
-              setGenerationSteps(prev => {
-                if (prev.length === 0) return prev;
-                const updated = [...prev];
-                const lastStep = updated[updated.length - 1];
-                
-                // Extract layer index
-                const layerMatch = data.layer?.match(/layer\.(\d+)/);
-                const layerIdx = layerMatch ? parseInt(layerMatch[1]) : null;
-                
-                if (layerIdx !== null && lastStep.decision_path) {
-                  if (!lastStep.decision_path.layer_activations) {
-                    lastStep.decision_path.layer_activations = [];
-                  }
-                  
-                  // Find or create layer activation
-                  let activation = lastStep.decision_path.layer_activations.find(
-                    a => a.layer_index === layerIdx
-                  );
-                  if (!activation) {
-                    activation = {
-                      layer_index: layerIdx,
-                      attention_weights: [],
-                      hidden_state_norm: 0,
-                      ffn_activation: 0,
-                      top_attention_heads: [],
-                      confidence: 0.5
-                    };
-                    lastStep.decision_path.layer_activations.push(activation);
-                  }
-                  
-                  // Update FFN activation
-                  activation.ffn_activation = data.mean || 0;
-                  activation.hidden_state_norm = data.max_weight || 0;
-                  
-                  // Also check if this should be a critical layer based on activation strength
-                  // Use mean as it's more representative than max_weight
-                  const threshold = 0.85; // High activation threshold
-                  if (data.mean > threshold && layerIdx >= 10) { // Focus on later layers
-                    if (!lastStep.decision_path.critical_layers) {
-                      lastStep.decision_path.critical_layers = [];
-                    }
-                    if (!lastStep.decision_path.critical_layers.includes(layerIdx)) {
-                      lastStep.decision_path.critical_layers.push(layerIdx);
-                    }
-                  }
-                }
-                return updated;
-              });
-            }, 100); // 100ms delay to ensure token is processed first
-          } else if (data.type === 'confidence') {
-            // Handle confidence updates
-            console.log('[DecisionPath3D] Confidence update:', data.confidence_score);
-          } else if (data.type === 'loading_progress') {
-            setLoadingProgress(data.progress);
-            setLoadingMessage(data.message);
-            if (data.progress === 100) {
-              setModelLoading(false);
-            }
-          } else if (data.type === 'model_ready') {
-            setModelLoading(false);
-            setLoadingProgress(100);
-            setLoadingMessage("Model ready!");
-          }
-        };
-        
-        ws.onerror = (error) => {
-          console.log('[DecisionPath3D] Service not available');
-          setIsConnected(false);
-        };
-        
-        ws.onclose = () => {
-          console.log('[DecisionPath3D] Disconnected');
-          setIsConnected(false);
-          wsRef.current = null;
-        };
-      } catch (error) {
-        console.log('[DecisionPath3D] Connection failed');
-        setIsConnected(false);
-      }
-    };
-    
-    connectToService();
-    
-    return () => {
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, [mounted]);
-  
-  // Auto-play functionality
-  useEffect(() => {
-    if (isPlaying && generationSteps.length > 0) {
-      intervalRef.current = setInterval(() => {
-        setCurrentStep(prev => {
-          if (prev >= generationSteps.length - 1) {
-            setIsPlaying(false);
-            return prev;
-          }
-          return prev + 1;
-        });
-      }, 1000);
-    } else {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    }
-    
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [isPlaying, generationSteps.length]);
-  
-  const startGeneration = async () => {
-    if (!isConnected) return;
-    
-    setIsGenerating(true);
-    setGenerationSteps([]);
-    setCurrentStep(0);
-    promptRef.current = prompt; // Store in ref to avoid closure issues
-    
-    // Clear previous traces
-    currentTracesRef.current = { attention: [], activation: [] };
-    
-    try {
-      // Use HTTP POST to trigger generation
-      const response = await fetch(`${getApiUrl()}/generate`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          prompt: prompt,
-          max_tokens: 100,
-          temperature: 0.7,
-          extract_traces: true,
-          sampling_rate: 0.3
-        })
-      });
-      
-      if (!response.ok) {
-        throw new Error('Failed to start generation');
-      }
-      
-      // The WebSocket will receive the real-time updates
-      const result = await response.json();
-      console.log('[DecisionPath3D] Generation complete, received', result.num_tokens, 'tokens');
-      // Generation is complete
-      setTimeout(() => {
-        setIsGenerating(false);
-      }, 500); // Small delay to ensure all WebSocket messages are processed
-    } catch (error) {
-      console.error('[DecisionPath3D] Failed to start generation:', error);
-      setIsGenerating(false);
-    }
-  };
-  
-  const currentDecisionPath = generationSteps[currentStep]?.decision_path || null;
-  
-  // Debug logging
-  useEffect(() => {
-    if (currentDecisionPath) {
-      console.log('[DecisionPath3D] Current decision path:', {
-        token: currentDecisionPath.token,
-        critical_layers: currentDecisionPath.critical_layers,
-        layer_activations: currentDecisionPath.layer_activations?.length || 0,
-        step: currentStep
-      });
-    }
-  }, [currentDecisionPath, currentStep]);
-  
-  // Generate explanation for current visualization state
-  const generateExplanation = () => {
-    const step = generationSteps[currentStep];
-    if (!step || !step.decision_path) {
-      return {
-        title: "No Data Available",
-        description: "Generate code to see the decision path visualization.",
-        details: []
-      };
-    }
-    
-    const dp = step.decision_path;
-    const criticalLayersList = dp.critical_layers ? dp.critical_layers.join(", ") : "Not available";
-    const topAlternatives = dp.alternatives?.slice(0, 3).map(a => 
-      `"${a.token}" (${(a.probability * 100).toFixed(1)}%)`
-    ).join(", ") || "Not available";
-    
-    return {
-      title: `Token Generation: "${step.token}"`,
-      description: `The model is generating token "${step.token}" at step ${currentStep + 1} with ${((dp.probability || 0.5) * 100).toFixed(0)}% confidence.`,
-      details: [
-        {
-          heading: "What You're Seeing",
-          content: `The 3D visualization shows the decision path through the transformer's ${modelInfo.layers} layers. Each layer processes the input and contributes to the final token selection.`
-        },
-        {
-          heading: "Critical Layers (Red)",
-          content: `Layers ${criticalLayersList} are highlighted in red and pulsing. These are decision-critical layers with >85% activation strength in later stages of the network. They make the strongest contributions to selecting "${step.token}".`
-        },
-        {
-          heading: "Active Layers (Teal/Cyan)",
-          content: `Teal/cyan layers are processing information but below the critical threshold. They extract features and patterns that feed into the critical layers above them. Early layers typically show as active rather than critical.`
-        },
-        {
-          heading: "Feed-Forward Networks (Side Blocks)",
-          content: `The blocks extending from the sides are FFN components. Purple blocks show active processing, pink/red blocks indicate critical transformations. Their size reflects activation strength - larger blocks mean stronger neural activity.`
-        },
-        {
-          heading: "Attention Heads (Top Blocks)",
-          content: `The small blocks on top of each layer represent the ${modelInfo.heads} attention heads. Yellow/gold blocks are highly focused heads detecting key patterns, while gray blocks are less active. Critical layers often have more active heads.`
-        },
-        {
-          heading: "Decision Factors",
-          content: `The model considered these alternatives: ${topAlternatives || 'none'}. The confidence level (${((dp.probability || 0.5) * 100).toFixed(0)}%) indicates the model's certainty about "${step.token}" being the correct choice based on the code context.`
-        },
-        {
-          heading: "Information Flow",
-          content: `The red lines show the critical path - how information flows from the input through the most important layers to produce the final token. This is the model's "reasoning path" for this specific decision.`
-        }
-      ]
-    };
-  };
-  
-  const explanation = generateExplanation();
-  
-  if (!mounted) {
-    return <div className="bg-gray-900 rounded-xl p-6 h-[900px]" />;
-  }
-  
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <GitBranch className="w-6 h-6 text-yellow-400" />
-            Enhanced Decision Path Visualization
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Full code generation with decision path analysis
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-yellow-900/30 text-yellow-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-      
-      {/* Generation Controls */}
-      <div className="bg-gray-800 rounded-lg p-4 mb-4">
-        <div className="flex items-center gap-4 mb-4">
-          <input
-            type="text"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            className="flex-1 px-3 py-2 bg-gray-900 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter code to generate..."
-          />
-          <button
-            onClick={startGeneration}
-            disabled={!isConnected || isGenerating || modelLoading}
-            className="px-6 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-          >
-            {isGenerating ? (
-              <>
-                <Activity className="w-4 h-4 animate-spin" />
-                Generating...
-              </>
-            ) : (
-              <>
-                <Code2 className="w-4 h-4" />
-                Generate Code
-              </>
-            )}
-          </button>
-        </div>
-        
-        {/* Timeline Controls */}
-        {generationSteps.length > 0 && (
-          <div className="space-y-4">
-            {/* Playback Controls */}
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setCurrentStep(0)}
-                className="p-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors"
-              >
-                <SkipBack className="w-4 h-4" />
-              </button>
-              
-              <button
-                onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
-                className="p-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors"
-                disabled={currentStep === 0}
-              >
-                <ChevronLeft className="w-4 h-4" />
-              </button>
-              
-              <button
-                onClick={() => setIsPlaying(!isPlaying)}
-                className="p-2 bg-blue-600 rounded hover:bg-blue-700 transition-colors"
-              >
-                {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
-              </button>
-              
-              <button
-                onClick={() => setCurrentStep(Math.min(generationSteps.length - 1, currentStep + 1))}
-                className="p-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors"
-                disabled={currentStep >= generationSteps.length - 1}
-              >
-                <ChevronRight className="w-4 h-4" />
-              </button>
-              
-              <button
-                onClick={() => setCurrentStep(generationSteps.length - 1)}
-                className="p-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors"
-              >
-                <SkipForward className="w-4 h-4" />
-              </button>
-              
-              <div className="flex-1 px-4">
-                <input
-                  type="range"
-                  min={0}
-                  max={Math.max(0, generationSteps.length - 1)}
-                  value={currentStep}
-                  onChange={(e) => setCurrentStep(parseInt(e.target.value))}
-                  className="w-full"
-                />
-              </div>
-              
-              <span className="text-sm text-gray-400">
-                Step {currentStep + 1} / {generationSteps.length} | Token: {generationSteps[currentStep]?.token || "..."}
-              </span>
-            </div>
-            
-            {/* Generated Code Display */}
-            <div className="bg-gray-900 rounded-lg p-4">
-              <div className="flex justify-between items-center mb-2">
-                <h3 className="text-sm font-semibold text-gray-300">Generated Code</h3>
-                <div className="text-xs text-gray-500">
-                  Token: {generationSteps[currentStep]?.token || "..."}
-                </div>
-              </div>
-              <pre className="font-mono text-sm text-white whitespace-pre-wrap">
-                {(() => {
-                  const step = generationSteps[currentStep];
-                  if (step && step.cumulative_text) {
-                    console.log('[UI Render] Displaying step', currentStep, 'cumulative_text:', step.cumulative_text);
-                    return step.cumulative_text;
-                  }
-                  return prompt;
-                })()}
-                {isGenerating && <span className="animate-pulse">▊</span>}
-              </pre>
-            </div>
-          </div>
-        )}
-      </div>
-      
-      {/* Main Content Area with Side Panel */}
-      <div className="flex gap-4">
-        {/* 3D Visualization */}
-        <div className="flex-1 min-w-0 transition-all duration-500 ease-in-out">
-          <div className="h-[700px] bg-black rounded-lg relative overflow-hidden">
-            {/* Help Toggle Button */}
-            <button
-              onClick={() => {
-                console.log('[DecisionPath3D] Toggle explanation:', !showExplanation);
-                setShowExplanation(!showExplanation);
-              }}
-              className="absolute top-4 left-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-            >
-              {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-              <span className="text-sm font-medium">
-                {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-              </span>
-            </button>
-        {modelLoading ? (
-          <div className="flex flex-col items-center justify-center h-full">
-            <div className="text-white mb-4">
-              <Brain className="w-16 h-16 animate-pulse" />
-            </div>
-            <div className="text-xl text-white mb-2">Loading Model</div>
-            <div className="text-sm text-gray-400 mb-4">{loadingMessage}</div>
-            <div className="w-64 h-2 bg-gray-700 rounded-full overflow-hidden">
-              <div 
-                className="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500"
-                style={{ width: `${loadingProgress}%` }}
-              />
-            </div>
-            <div className="text-xs text-gray-500 mt-2">{loadingProgress}%</div>
-          </div>
-        ) : (
-          <Canvas camera={{ position: [-40, 50, 40], fov: 50 }}>
-            <DecisionPathScene decisionPath={currentDecisionPath} />
-            <OrbitControls 
-              enablePan={true}
-              enableZoom={true}
-              enableRotate={true}
-              target={[0, 35, 0]}
-            />
-          </Canvas>
-        )}
-        
-        {/* Info Panels */}
-        {currentDecisionPath && (
-          <>
-            {/* Legend */}
-            <div className="absolute top-4 right-4 bg-gray-800/90 backdrop-blur rounded-lg p-3 text-xs">
-              <div className="font-semibold text-white mb-2">Decision Path</div>
-              <div className="space-y-1">
-                <div className="flex items-center gap-2">
-                  <div className="w-3 h-3 bg-red-500 rounded"></div>
-                  <span className="text-gray-300">Critical Layers</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="w-3 h-3 bg-teal-500 rounded"></div>
-                  <span className="text-gray-300">Active Layers</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="w-3 h-3 bg-purple-500 rounded"></div>
-                  <span className="text-gray-300">FFN Components</span>
-                </div>
-              </div>
-            </div>
-            
-            {/* Current Token Info */}
-            <div className="absolute bottom-4 left-4 bg-gray-800/90 backdrop-blur rounded-lg p-3 text-xs max-w-xs">
-              <div className="font-semibold text-white mb-2">Current Token</div>
-              <div className="space-y-1 text-gray-300">
-                <div>Token: <span className="text-yellow-400">{currentDecisionPath.token}</span></div>
-                <div>Confidence: <span className="text-green-400">{((currentDecisionPath.probability || 0.5) * 100).toFixed(0)}%</span></div>
-                <div>Critical Layers: <span className="text-red-400">{currentDecisionPath.critical_layers ? currentDecisionPath.critical_layers.join(", ") : "Not available"}</span></div>
-                <div className="mt-2">Alternatives:</div>
-                {currentDecisionPath.alternatives?.slice(0, 3).map((alt, i) => (
-                  <div key={i} className="ml-2 text-xs">
-                    {alt.token}: {(alt.probability * 100).toFixed(1)}%
-                  </div>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-          </div>
-        </div>
-        
-        {/* Explanation Side Panel */}
-        <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-          <div className="w-96 h-[700px] bg-gray-900 rounded-lg border border-gray-700">
-            {/* Panel Header */}
-            <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-              <div className="flex items-center gap-2">
-                <Info className="w-5 h-5 text-blue-400" />
-                <h3 className="text-lg font-semibold text-white">Real-time Analysis</h3>
-              </div>
-            </div>
-            
-            {/* Panel Content */}
-            <div className="px-4 py-4 overflow-y-auto h-[calc(700px-60px)]">
-              {/* Current Token Info */}
-              <div className="mb-4 p-3 bg-yellow-900/20 border border-yellow-800 rounded-lg">
-                <h4 className="text-sm font-semibold text-yellow-400 mb-1">{explanation.title}</h4>
-                <p className="text-xs text-gray-300">{explanation.description}</p>
-              </div>
-              
-              {/* Dynamic Analysis Sections */}
-              <div className="space-y-3">
-                {explanation.details.slice(0, 3).map((section, idx) => (
-                  <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                    <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                      <Zap className="w-3 h-3 text-yellow-400" />
-                      {section.heading}
-                    </h5>
-                    <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Quick Reference */}
-              <div className="mt-4 p-3 bg-blue-900/20 border border-blue-800 rounded-lg">
-                <h4 className="font-medium text-sm text-blue-400 mb-2">Visual Legend</h4>
-                <div className="space-y-2 text-xs">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-red-500 rounded"></div>
-                    <span className="text-gray-300">Critical Layers</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-teal-500 rounded"></div>
-                    <span className="text-gray-300">Active Layers</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-purple-500 rounded"></div>
-                    <span className="text-gray-300">FFN Components</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-yellow-500 rounded"></div>
-                    <span className="text-gray-300">Top Attention</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Current Metrics */}
-              {generationSteps[currentStep] && (
-                <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                  <h4 className="font-medium text-sm text-gray-300 mb-2">Current Metrics</h4>
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Step:</span>
-                      <span className="text-white">{currentStep + 1} / {generationSteps.length}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Token:</span>
-                      <span className="text-yellow-400 font-mono">&quot;{generationSteps[currentStep].token}&quot;</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Confidence:</span>
-                      <span className="text-green-400">{((generationSteps[currentStep].decision_path?.probability || 0.5) * 100).toFixed(0)}%</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Critical Layers:</span>
-                      <span className="text-red-400">{generationSteps[currentStep].decision_path?.critical_layers?.length || 0}</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Tips */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Tips</h4>
-                <ul className="text-xs text-gray-400 space-y-1">
-                  <li>• Watch how layers change per token</li>
-                  <li>• Notice pattern consistency</li>
-                  <li>• Red lines show decision flow</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/DecisionPath3DFixed.tsx

@@ -1,437 +0,0 @@
-/**
- * Decision Path 3D Visualization - Fixed Version
- * 
- * Shows the exact path through the neural network when generating tokens,
- * highlighting critical layers, attention patterns, and decision factors.
- * This is the core "Glass Box" visualization for the PhD thesis.
- * 
- * @component
- */
-
-"use client";
-
-import { useRef, useState, useEffect, useMemo } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
-import * as THREE from "three";
-import { 
-  GitBranch,
-  Activity,
-  Sparkles,
-  Zap,
-  Brain
-} from "lucide-react";
-
-interface LayerActivation {
-  layer_index: number;
-  attention_weights: number[][];
-  hidden_state_norm: number;
-  ffn_activation: number;
-  top_attention_heads: number[];
-  confidence: number;
-}
-
-interface DecisionPath {
-  token: string;
-  token_id: number;
-  probability: number;
-  layer_activations: LayerActivation[];
-  attention_flow: Array<{
-    from_layer: number;
-    to_layer: number | string;
-    strength: number;
-    top_heads: number[];
-  }>;
-  alternatives: Array<{
-    token: string;
-    token_id: number;
-    probability: number;
-  }>;
-  decision_factors: {
-    attention_focus: number;
-    semantic_alignment: number;
-    syntactic_correctness: number;
-    context_relevance: number;
-    confidence: number;
-  };
-  critical_layers: number[];
-  confidence_score: number;
-  timestamp: number;
-}
-
-// Enhanced Layer Component with proper FFN visualization
-interface LayerProps {
-  position: [number, number, number];
-  layerIndex: number;
-  isCritical: boolean;
-  isActive: boolean;
-  activation?: LayerActivation;
-}
-
-function Layer({ position, layerIndex, isCritical, isActive, activation }: LayerProps) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const ffnRef = useRef<THREE.Mesh>(null);
-  
-  useFrame((state) => {
-    if (meshRef.current && isCritical) {
-      const scale = 1 + Math.sin(state.clock.elapsedTime * 3) * 0.1;
-      meshRef.current.scale.set(scale, scale, scale);
-    }
-    
-    if (ffnRef.current && activation) {
-      // Pulse FFN based on activation strength
-      const ffnScale = 1 + (activation.ffn_activation * 0.2);
-      ffnRef.current.scale.set(1, ffnScale, 1);
-    }
-  });
-
-  const baseColor = isCritical ? "#ff6b6b" : isActive ? "#4ecdc4" : "#2d3748";
-  const ffnColor = isCritical ? "#e91e63" : isActive ? "#9c27b0" : "#6b46c1";
-
-  return (
-    <group position={position}>
-      {/* Main attention layer */}
-      <mesh ref={meshRef}>
-        <boxGeometry args={[4, 0.3, 2]} />
-        <meshStandardMaterial 
-          color={baseColor}
-          emissive={isCritical ? baseColor : "#000000"}
-          emissiveIntensity={isCritical ? 0.3 : 0}
-          metalness={0.6}
-          roughness={0.3}
-        />
-      </mesh>
-      
-      {/* FFN Component - positioned behind */}
-      <group position={[0, 0, -1.5]}>
-        <mesh ref={ffnRef}>
-          <boxGeometry args={[3, 0.2, 0.8]} />
-          <meshStandardMaterial 
-            color={ffnColor}
-            emissive={ffnColor}
-            emissiveIntensity={isActive ? 0.2 : 0.1}
-            metalness={0.7}
-            roughness={0.3}
-          />
-        </mesh>
-      </group>
-      
-      {/* Attention heads visualization - small cubes */}
-      {isActive && (
-        <group position={[0, 0, 1.2]}>
-          {Array.from({ length: 16 }).map((_, i) => (
-            <mesh key={i} position={[(i % 4 - 1.5) * 0.3, 0, Math.floor(i / 4) * 0.2 - 0.3]}>
-              <boxGeometry args={[0.15, 0.1, 0.15]} />
-              <meshStandardMaterial
-                color={activation?.top_attention_heads?.includes(i) ? "#ffd93d" : "#4a5568"}
-                emissive={activation?.top_attention_heads?.includes(i) ? "#ffd93d" : "#000000"}
-                emissiveIntensity={activation?.top_attention_heads?.includes(i) ? 0.5 : 0}
-              />
-            </mesh>
-          ))}
-        </group>
-      )}
-    </group>
-  );
-}
-
-// Simple scene
-function DecisionPathScene({ decisionPath }: { decisionPath: DecisionPath | null }) {
-  const numLayers = 20;
-  const layerSpacing = 3.5;
-  
-  return (
-    <>
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} intensity={1} />
-      <directionalLight position={[0, 10, 5]} intensity={0.5} />
-      
-      {/* Input Layer */}
-      <mesh position={[0, -5, 0]}>
-        <boxGeometry args={[5, 0.2, 2]} />
-        <meshStandardMaterial color="#10b981" />
-      </mesh>
-      
-      {/* Transformer Layers */}
-      {Array.from({ length: numLayers }).map((_, i) => {
-        const isCritical = decisionPath?.critical_layers?.includes(i) || false;
-        const activation = decisionPath?.layer_activations?.[i];
-        
-        return (
-          <Layer
-            key={i}
-            position={[0, i * layerSpacing, 0]}
-            layerIndex={i}
-            isCritical={isCritical}
-            isActive={!!activation}
-            activation={activation}
-          />
-        );
-      })}
-      
-      {/* Output Layer */}
-      <mesh position={[0, numLayers * layerSpacing + 5, 0]}>
-        <boxGeometry args={[5, 0.2, 2]} />
-        <meshStandardMaterial color="#f59e0b" />
-      </mesh>
-      
-      {/* Connection lines - simplified for now */}
-      {decisionPath && decisionPath.critical_layers && decisionPath.critical_layers.map((layerIdx, idx) => {
-        const startY = layerIdx * layerSpacing;
-        const endY = idx < decisionPath.critical_layers.length - 1 
-          ? decisionPath.critical_layers[idx + 1] * layerSpacing
-          : numLayers * layerSpacing + 5;
-        
-        const points = [];
-        points.push(new THREE.Vector3(0, startY, 0));
-        points.push(new THREE.Vector3(0, endY, 0));
-        
-        const geometry = new THREE.BufferGeometry().setFromPoints(points);
-        
-        return (
-          <primitive 
-            key={`line-${idx}`} 
-            object={new THREE.Line(
-              geometry,
-              new THREE.LineBasicMaterial({ color: 0xff6b6b, linewidth: 3 })
-            )}
-          />
-        );
-      })}
-      
-      <gridHelper args={[100, 100, 0x444444, 0x222222]} />
-    </>
-  );
-}
-
-export default function DecisionPath3DFixed() {
-  const [decisionPath, setDecisionPath] = useState<DecisionPath | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const [modelLoading, setModelLoading] = useState(true);
-  const [loadingProgress, setLoadingProgress] = useState(0);
-  const [loadingMessage, setLoadingMessage] = useState("Initializing...");
-  const wsRef = useRef<WebSocket | null>(null);
-  const [prompt, setPrompt] = useState("def quicksort(arr):");
-  
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  
-  useEffect(() => {
-    if (!mounted) return;
-    
-    const connectToService = () => {
-      try {
-        const ws = new WebSocket('ws://localhost:8769');
-        
-        ws.onopen = () => {
-          console.log('[DecisionPath3D] Connected to service');
-          setIsConnected(true);
-          wsRef.current = ws;
-          // Don't immediately set as ready - wait for model_ready or loading_progress messages
-        };
-        
-        ws.onmessage = (event) => {
-          console.log('[DecisionPath3D] Raw message received:', event.data);
-          const data = JSON.parse(event.data);
-          console.log('[DecisionPath3D] Parsed message type:', data.type);
-          console.log('[DecisionPath3D] Message data:', data);
-          
-          if (data.type === 'decision_path') {
-            console.log('[DecisionPath3D] Setting decision path with critical layers:', data.data?.critical_layers);
-            setDecisionPath(data.data);
-          } else if (data.type === 'analysis_complete') {
-            console.log('[DecisionPath3D] Analysis complete');
-            setIsAnalyzing(false);
-          } else if (data.type === 'loading_progress') {
-            setLoadingProgress(data.progress);
-            setLoadingMessage(data.message);
-            if (data.progress === 100) {
-              setModelLoading(false);
-            }
-          } else if (data.type === 'model_ready') {
-            setModelLoading(false);
-            setLoadingProgress(100);
-            setLoadingMessage("Model ready!");
-          } else if (data.type === 'loading_error') {
-            setModelLoading(false);
-            setLoadingMessage(`Error: ${data.message}`);
-          }
-        };
-        
-        ws.onerror = (error) => {
-          console.log('[DecisionPath3D] Service not available');
-          setIsConnected(false);
-        };
-        
-        ws.onclose = () => {
-          console.log('[DecisionPath3D] Disconnected');
-          setIsConnected(false);
-          wsRef.current = null;
-        };
-      } catch (error) {
-        console.log('[DecisionPath3D] Connection failed');
-        setIsConnected(false);
-      }
-    };
-    
-    connectToService();
-    
-    return () => {
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, [mounted]);
-  
-  const startAnalysis = () => {
-    console.log('[DecisionPath3D] Start analysis clicked');
-    console.log('[DecisionPath3D] WebSocket state:', wsRef.current?.readyState);
-    console.log('[DecisionPath3D] Is connected:', isConnected);
-    
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      console.log('[DecisionPath3D] Sending analyze request with prompt:', prompt);
-      setIsAnalyzing(true);
-      wsRef.current.send(JSON.stringify({
-        type: 'analyze',
-        prompt: prompt
-      }));
-    } else {
-      console.log('[DecisionPath3D] WebSocket not ready, state:', wsRef.current?.readyState);
-    }
-  };
-  
-  if (!mounted) {
-    return (
-      <div className="bg-gray-900 rounded-xl p-6 h-[900px]">
-        <div className="flex items-center justify-center h-full">
-          <div className="text-gray-400">Loading 3D visualization...</div>
-        </div>
-      </div>
-    );
-  }
-  
-  return (
-    <div className="bg-gray-900 rounded-xl p-6 h-[900px]">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <GitBranch className="w-6 h-6 text-yellow-400" />
-            Decision Path Visualization
-          </h2>
-          <p className="text-gray-400 mt-1">
-            See exactly how the model makes its decisions - the Glass Box view
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-yellow-900/30 text-yellow-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-      
-      {/* Controls */}
-      <div className="bg-gray-800 rounded-lg p-4 mb-4">
-        <div className="flex items-center gap-4">
-          <input
-            type="text"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            className="flex-1 px-3 py-2 bg-gray-900 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter code to analyze..."
-          />
-          <button
-            onClick={startAnalysis}
-            disabled={!isConnected || isAnalyzing}
-            className="px-6 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-          >
-            {isAnalyzing ? (
-              <>
-                <Activity className="w-4 h-4 animate-spin" />
-                Analyzing...
-              </>
-            ) : (
-              <>
-                <Sparkles className="w-4 h-4" />
-                Analyze Decision Path
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-      
-      {/* 3D Canvas */}
-      <div className="h-[700px] bg-black rounded-lg relative">
-        {modelLoading ? (
-          <div className="flex flex-col items-center justify-center h-full">
-            <div className="text-white mb-4">
-              <Brain className="w-16 h-16 animate-pulse" />
-            </div>
-            <div className="text-xl text-white mb-2">Loading Model</div>
-            <div className="text-sm text-gray-400 mb-4">{loadingMessage}</div>
-            <div className="w-64 h-2 bg-gray-700 rounded-full overflow-hidden">
-              <div 
-                className="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500"
-                style={{ width: `${loadingProgress}%` }}
-              />
-            </div>
-            <div className="text-xs text-gray-500 mt-2">{loadingProgress}%</div>
-            <div className="text-xs text-gray-500 mt-4">356M parameters • 20 layers • 16 attention heads</div>
-          </div>
-        ) : (
-          <Canvas camera={{ position: [-40, 50, 40], fov: 50 }}>
-            <DecisionPathScene decisionPath={decisionPath} />
-            <OrbitControls 
-              enablePan={true}
-              enableZoom={true}
-              enableRotate={true}
-              target={[0, 35, 0]}
-            />
-          </Canvas>
-        )}
-        
-        {/* Legend */}
-        <div className="absolute top-4 right-4 bg-gray-800/90 backdrop-blur rounded-lg p-3 text-xs">
-          <div className="font-semibold text-white mb-2">Decision Path</div>
-          <div className="space-y-1">
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-red-500 rounded"></div>
-              <span className="text-gray-300">Critical Layers</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-teal-500 rounded"></div>
-              <span className="text-gray-300">Active Layers</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-yellow-500 rounded"></div>
-              <span className="text-gray-300">Top Attention Heads</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Zap className="w-3 h-3 text-yellow-400" />
-              <span className="text-gray-300">Decision Flow</span>
-            </div>
-          </div>
-        </div>
-        
-        {/* Info Panel */}
-        {decisionPath && (
-          <div className="absolute bottom-4 left-4 bg-gray-800/90 backdrop-blur rounded-lg p-3 text-xs max-w-xs">
-            <div className="font-semibold text-white mb-2">Current Decision</div>
-            <div className="space-y-1 text-gray-300">
-              <div>Token: <span className="text-yellow-400">{decisionPath.token}</span></div>
-              <div>Confidence: <span className="text-green-400">{(decisionPath.confidence_score * 100).toFixed(0)}%</span></div>
-              <div>Critical Layers: <span className="text-red-400">{decisionPath.critical_layers.join(", ")}</span></div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/DecisionPath3DSimple.tsx

@@ -1,57 +0,0 @@
-/**
- * Simplified Decision Path 3D Test
- * Testing basic Three.js rendering
- */
-
-"use client";
-
-import { useRef, useState, useEffect } from "react";
-import { Canvas } from "@react-three/fiber";
-import { OrbitControls, Box, Text } from "@react-three/drei";
-import * as THREE from "three";
-
-function SimpleScene() {
-  const meshRef = useRef<THREE.Mesh>(null);
-  
-  return (
-    <>
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} />
-      
-      <Box ref={meshRef} position={[0, 0, 0]} args={[2, 2, 2]}>
-        <meshStandardMaterial color="orange" />
-      </Box>
-      
-      <Text position={[0, 3, 0]} fontSize={0.5} color="white">
-        Test 3D Rendering
-      </Text>
-      
-      <gridHelper args={[10, 10]} />
-    </>
-  );
-}
-
-export default function DecisionPath3DSimple() {
-  const [mounted, setMounted] = useState(false);
-  
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  
-  if (!mounted) {
-    return (
-      <div className="h-[400px] bg-black rounded-lg flex items-center justify-center">
-        <div className="text-gray-400">Loading...</div>
-      </div>
-    );
-  }
-  
-  return (
-    <div className="h-[400px] bg-black rounded-lg">
-      <Canvas camera={{ position: [5, 5, 5], fov: 50 }}>
-        <SimpleScene />
-        <OrbitControls />
-      </Canvas>
-    </div>
-  );
-}

frontend/Hero.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Eye, Lock, Zap } from "lucide-react";
-
-export default function Hero() {
-  return (
-    <section className="relative overflow-hidden bg-gradient-to-b from-gray-900 to-gray-950 py-20">
-      <div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:50px_50px]" />
-      
-      <div className="container mx-auto px-4 relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          className="text-center max-w-4xl mx-auto"
-        >
-          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
-            From Black Box to Glass Box
-          </h1>
-          
-          <p className="text-xl text-gray-300 mb-8">
-            Visualise LLM code generation in real-time. See attention patterns, 
-            activation flows, and expert routing to understand how AI writes code.
-          </p>
-          
-          <div className="flex justify-center gap-4 mb-12">
-            <button className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
-              Try Live Demo
-            </button>
-            <button className="px-8 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium">
-              Read Paper
-            </button>
-          </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"
-            >
-              <Eye className="w-10 h-10 text-blue-500 mb-4 mx-auto" />
-              <h3 className="text-lg font-semibold mb-2">See Inside</h3>
-              <p className="text-gray-400 text-sm">
-                Visualise attention maps and activation patterns as models generate code
-              </p>
-            </motion.div>
-            
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"
-            >
-              <Lock className="w-10 h-10 text-purple-500 mb-4 mx-auto" />
-              <h3 className="text-lg font-semibold mb-2">Build Trust</h3>
-              <p className="text-gray-400 text-sm">
-                Detect hallucinations and API misuses before deploying AI-generated code
-              </p>
-            </motion.div>
-            
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"
-            >
-              <Zap className="w-10 h-10 text-yellow-500 mb-4 mx-auto" />
-              <h3 className="text-lg font-semibold mb-2">Real-time Analysis</h3>
-              <p className="text-gray-400 text-sm">
-                Stream traces live from your IDE or CI/CD pipeline
-              </p>
-            </motion.div>
-          </div>
-        </motion.div>
-      </div>
-    </section>
-  );
-}

frontend/LocalControlPanel.tsx

@@ -1,326 +0,0 @@
-"use client";
-
-import { useState, useEffect } from 'react';
-import { Play, Pause, RefreshCw, Terminal, Activity, Wifi, WifiOff, Zap, Server, Database } from 'lucide-react';
-import { usePathname } from 'next/navigation';
-import { getApiUrl, getLegacyWsUrl } from '@/lib/config';
-
-interface ServiceStatus {
-  modelService: 'running' | 'stopped' | 'checking' | 'error';
-  websocket: 'running' | 'stopped' | 'checking' | 'error';
-  frontend: 'running' | 'stopped' | 'checking' | 'error';
-}
-
-interface Demo {
-  id: string;
-  name: string;
-  prompt: string;
-  description: string;
-}
-
-export function LocalControlPanel({ hideOnInspector = false }: { hideOnInspector?: boolean }) {
-  const [serviceStatus, setServiceStatus] = useState<ServiceStatus>({
-    modelService: 'checking',
-    websocket: 'checking',
-    frontend: 'running'
-  });
-  
-  const [demos, setDemos] = useState<Demo[]>([]);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [generatingDemoId, setGeneratingDemoId] = useState<string | null>(null);
-  const [deviceInfo, setDeviceInfo] = useState<string>('');
-  const [modelLoaded, setModelLoaded] = useState(false);
-  const [minimized, setMinimized] = useState(false);
-  const [shouldHide, setShouldHide] = useState(false);
-  
-  // Only show in development mode
-  const isDevelopment = process.env.NEXT_PUBLIC_MODE === 'local' || 
-                       process.env.NODE_ENV === 'development';
-  
-  // Listen for activeView changes
-  useEffect(() => {
-    const handleViewChange = (event: CustomEvent) => {
-      setShouldHide(event.detail.view === 'inspector');
-    };
-    
-    window.addEventListener('viewChanged', handleViewChange as EventListener);
-    return () => window.removeEventListener('viewChanged', handleViewChange as EventListener);
-  }, []);
-  
-  useEffect(() => {
-    if (!isDevelopment || shouldHide) return;
-    
-    const checkServices = async () => {
-      // Check model service
-      try {
-        const response = await fetch(`${getApiUrl()}/health`);
-        const data = await response.json();
-        setServiceStatus(prev => ({
-          ...prev,
-          modelService: data.status === 'healthy' ? 'running' : 'error'
-        }));
-        setDeviceInfo(data.device || 'Unknown');
-        setModelLoaded(data.model_loaded || false);
-      } catch {
-        setServiceStatus(prev => ({ ...prev, modelService: 'stopped' }));
-        setModelLoaded(false);
-      }
-      
-      // Check WebSocket
-      try {
-        const ws = new WebSocket(getLegacyWsUrl());
-        ws.onopen = () => {
-          setServiceStatus(prev => ({ ...prev, websocket: 'running' }));
-          ws.close();
-        };
-        ws.onerror = () => {
-          setServiceStatus(prev => ({ ...prev, websocket: 'stopped' }));
-        };
-        ws.onclose = () => {
-          // Connection closed event
-        };
-      } catch {
-        setServiceStatus(prev => ({ ...prev, websocket: 'stopped' }));
-      }
-    };
-    
-    const loadDemos = async () => {
-      try {
-        const response = await fetch(`${getApiUrl()}/demos`);
-        const data = await response.json();
-        setDemos(data.demos || []);
-      } catch (error) {
-        console.error('Failed to load demos:', error);
-        setDemos([]);
-      }
-    };
-    
-    checkServices();
-    loadDemos();
-    const interval = setInterval(checkServices, 5000); // Check every 5 seconds
-    return () => clearInterval(interval);
-  }, [isDevelopment, shouldHide]);
-  
-  if (!isDevelopment || shouldHide) {
-    return null;
-  }
-  
-  
-  const runDemo = async (demoId: string) => {
-    if (isGenerating) return;
-    
-    // Dispatch prompt variations IMMEDIATELY for PromptDiff
-    const demoPrompts = {
-      fibonacci: {
-        promptA: "def fibonacci(n):\n    '''Calculate fibonacci number'''",
-        promptB: "def fibonacci(n):\n    '''Calculate fibonacci number with memoization'''"
-      },
-      quicksort: {
-        promptA: "def quicksort(arr):\n    '''Sort array using quicksort'''",
-        promptB: "def quicksort(arr):\n    '''Sort array using optimized quicksort with pivot selection'''"
-      },
-      stack: {
-        promptA: "class Stack:\n    '''Simple stack implementation'''",
-        promptB: "class Stack:\n    '''Thread-safe stack implementation with size limit'''"
-      },
-      binary_search: {
-        promptA: "def binary_search(arr, target):\n    '''Find target in sorted array'''",
-        promptB: "def binary_search(arr, target):\n    '''Find target in sorted array using iterative approach'''"
-      }
-    };
-    
-    if (demoId in demoPrompts) {
-      window.dispatchEvent(new CustomEvent('demo-prompts-selected', { 
-        detail: demoPrompts[demoId as keyof typeof demoPrompts] 
-      }));
-    }
-    
-    // Also dispatch the primary prompt IMMEDIATELY for ConfidenceMeter
-    const demoPrimaryPrompts = {
-      fibonacci: "def fibonacci(n):\n    '''Calculate fibonacci number'''",
-      quicksort: "def quicksort(arr):\n    '''Sort array using quicksort'''",
-      stack: "class Stack:\n    '''Simple stack implementation'''",
-      binary_search: "def binary_search(arr, target):\n    '''Find target in sorted array'''"
-    };
-    
-    if (demoId in demoPrimaryPrompts) {
-      window.dispatchEvent(new CustomEvent('demo-prompt-selected', { 
-        detail: { prompt: demoPrimaryPrompts[demoId as keyof typeof demoPrimaryPrompts], demoId } 
-      }));
-    }
-    
-    // Dispatch event to indicate demo is starting (for clearing tokens)
-    window.dispatchEvent(new CustomEvent('demo-starting', { 
-      detail: { demoId } 
-    }));
-    
-    setIsGenerating(true);
-    setGeneratingDemoId(demoId);
-    try {
-      const response = await fetch(`${getApiUrl()}/demos/run`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ demo_id: demoId })
-      });
-      
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      
-      const data = await response.json();
-      console.log('Demo completed:', data);
-      
-      // Dispatch custom event to notify AttentionExplorer
-      window.dispatchEvent(new CustomEvent('demo-completed', { detail: data }));
-    } catch (error) {
-      console.error('Failed to run demo:', error);
-      alert(`Failed to run demo: ${error}`);
-    } finally {
-      setIsGenerating(false);
-      setGeneratingDemoId(null);
-    }
-  };
-  
-  if (minimized) {
-    return (
-      <div className="fixed bottom-4 right-4 bg-gray-900 border border-gray-700 rounded-lg p-2 cursor-pointer"
-           onClick={() => setMinimized(false)}>
-        <Terminal className="w-5 h-5" />
-      </div>
-    );
-  }
-  
-  return (
-    <div className="fixed bottom-4 right-4 bg-gray-900 border border-gray-700 rounded-lg p-4 w-80 shadow-2xl z-50">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-lg font-bold flex items-center gap-2">
-          <Terminal className="w-5 h-5 text-blue-400" />
-          Local Development
-        </h3>
-        <button
-          onClick={() => setMinimized(true)}
-          className="text-gray-400 hover:text-white transition-colors"
-        >
-          ×
-        </button>
-      </div>
-      
-      {/* Service Status */}
-      <div className="space-y-2 mb-4">
-        <ServiceIndicator name="Model Service" status={serviceStatus.modelService} />
-        <ServiceIndicator name="WebSocket" status={serviceStatus.websocket} />
-        <ServiceIndicator name="Frontend" status={serviceStatus.frontend} />
-      </div>
-      
-      {/* Device Info */}
-      {deviceInfo && (
-        <div className="mb-4 p-2 bg-gray-800 rounded text-xs">
-          <div className="flex items-center gap-2">
-            <Server className="w-3 h-3 text-gray-400" />
-            <span className="text-gray-400">Device:</span>
-            <span className="text-white">{deviceInfo}</span>
-          </div>
-          <div className="flex items-center gap-2 mt-1">
-            <Database className="w-3 h-3 text-gray-400" />
-            <span className="text-gray-400">Model:</span>
-            <span className={modelLoaded ? "text-green-400" : "text-yellow-400"}>
-              {modelLoaded ? "Loaded" : "Loading..."}
-            </span>
-          </div>
-        </div>
-      )}
-      
-      {/* Quick Actions */}
-      <div className="space-y-2 mb-4">
-        <button
-          onClick={() => {
-            // checkServices and loadDemos are auto-refreshed
-            // Manual refresh removed to fix scope issue
-          }}
-          className="w-full px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded flex items-center justify-center gap-2 transition-colors"
-        >
-          <RefreshCw className="w-4 h-4" />
-          Refresh Status
-        </button>
-      </div>
-      
-      {/* Demo Runners */}
-      <div className="space-y-2">
-        <h4 className="text-sm font-semibold text-gray-400">Run Demos</h4>
-        {demos.length > 0 ? (
-          demos.map(demo => {
-            const isThisDemoGenerating = generatingDemoId === demo.id;
-            return (
-              <button
-                key={demo.id}
-                onClick={() => runDemo(demo.id)}
-                disabled={isGenerating || serviceStatus.modelService !== 'running'}
-                className={`w-full px-3 py-2 rounded text-sm flex items-center gap-2 transition-colors ${
-                  isThisDemoGenerating 
-                    ? 'bg-blue-700 cursor-wait' 
-                    : isGenerating
-                    ? 'bg-gray-700 cursor-not-allowed'
-                    : 'bg-blue-600 hover:bg-blue-700'
-                } ${serviceStatus.modelService !== 'running' ? 'disabled:bg-gray-700 disabled:cursor-not-allowed' : ''}`}
-              >
-                {isThisDemoGenerating ? (
-                  <>
-                    <RefreshCw className="w-3 h-3 animate-spin" />
-                    <span>Generating code...</span>
-                  </>
-                ) : (
-                  <>
-                    <Play className="w-3 h-3" />
-                    <span>{demo.name}</span>
-                  </>
-                )}
-              </button>
-            );
-          })
-        ) : (
-          <div className="text-xs text-gray-500 text-center py-2">
-            No demos available
-          </div>
-        )}
-      </div>
-      
-      {/* Generation Status */}
-      {isGenerating && (
-        <div className="mt-4 p-2 bg-blue-900/30 border border-blue-700 rounded">
-          <div className="flex items-center gap-2 text-sm text-blue-400">
-            <Zap className="w-4 h-4 animate-pulse" />
-            Generating code...
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ServiceIndicator({ name, status }: { name: string; status: string }) {
-  const colors = {
-    running: 'text-green-400',
-    stopped: 'text-red-400',
-    checking: 'text-yellow-400',
-    error: 'text-red-400'
-  };
-  
-  const icons = {
-    running: <Wifi className="w-3 h-3 inline mr-1" />,
-    stopped: <WifiOff className="w-3 h-3 inline mr-1" />,
-    checking: <Activity className="w-3 h-3 inline mr-1 animate-pulse" />,
-    error: <WifiOff className="w-3 h-3 inline mr-1" />
-  };
-  
-  return (
-    <div className="flex items-center justify-between p-2 bg-gray-800 rounded">
-      <span className="text-sm">{name}</span>
-      <span className={`text-xs ${colors[status as keyof typeof colors]} flex items-center`}>
-        {icons[status as keyof typeof icons]}
-        {status}
-      </span>
-    </div>
-  );
-}

frontend/ModelArchitecture3D.tsx

@@ -1,712 +0,0 @@
-/**
- * 3D Model Architecture Visualization
- * 
- * Interactive 3D visualization of the transformer model architecture,
- * showing layers, attention heads, and data flow with real values.
- * Inspired by neural network architecture diagrams.
- * 
- * @component
- */
-
-"use client";
-
-import { useRef, useState, useEffect, Suspense } from "react";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import { getApiUrl } from "@/lib/config";
-import { 
-  OrbitControls, 
-  Text, 
-  Box, 
-  Plane,
-  Line,
-  Billboard,
-  PerspectiveCamera,
-  Environment,
-  Float
-} from "@react-three/drei";
-import * as THREE from "three";
-import { 
-  Brain,
-  Layers,
-  Activity,
-  Zap,
-  Eye,
-  GitBranch,
-  Maximize2,
-  Move3D,
-  HelpCircle,
-  X,
-  Info
-} from "lucide-react";
-
-// Layer component representing a transformer layer
-function TransformerLayer({ 
-  position, 
-  layerIndex, 
-  attentionValues, 
-  onClick,
-  isActive 
-}: { 
-  position: [number, number, number];
-  layerIndex: number;
-  attentionValues?: number[][];
-  onClick?: () => void;
-  isActive?: boolean;
-}) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const [hovered, setHovered] = useState(false);
-  
-  useFrame((state) => {
-    if (meshRef.current) {
-      // NO floating animation - layers stay at their exact positions
-      // meshRef.current.position.y = position[1]; // Keep at exact position
-      
-      // Only pulse when active
-      if (isActive) {
-        const scale = 1 + Math.sin(state.clock.elapsedTime * 3) * 0.05;
-        meshRef.current.scale.set(scale, scale, scale);
-      }
-    }
-  });
-
-  return (
-    <group position={position}>
-      {/* Main layer box */}
-      <Box
-        ref={meshRef}
-        args={[4, 0.3, 3]}
-        onClick={onClick}
-        onPointerOver={() => setHovered(true)}
-        onPointerOut={() => setHovered(false)}
-      >
-        <meshStandardMaterial
-          color={isActive ? "#3b82f6" : hovered ? "#4b5563" : "#1f2937"}
-          emissive={isActive ? "#3b82f6" : "#000000"}
-          emissiveIntensity={isActive ? 0.2 : 0}
-          metalness={0.8}
-          roughness={0.2}
-          transparent
-          opacity={0.9}
-        />
-      </Box>
-      
-      {/* Layer label */}
-      <Text
-        position={[0, 0.3, 0]}
-        fontSize={0.15}
-        color="white"
-        anchorX="center"
-        anchorY="middle"
-      >
-        Layer {layerIndex}
-      </Text>
-      
-      {/* Debug: Show actual position */}
-      <Text
-        position={[2.5, 0, 0]}
-        fontSize={0.08}
-        color="#666"
-        anchorX="center"
-      >
-        Y: {position[1].toFixed(1)}
-      </Text>
-      
-      {/* Attention heads visualization */}
-      <group position={[0, 0, 1.8]}>
-        {Array.from({ length: 16 }).map((_, i) => (
-          <Box
-            key={i}
-            position={[(i % 4 - 1.5) * 0.25, 0, Math.floor(i / 4) * 0.25 - 0.375]}
-            args={[0.2, 0.1, 0.2]}
-          >
-            <meshStandardMaterial
-              color={`hsl(${120 + i * 10}, 70%, 50%)`}
-              emissive={`hsl(${120 + i * 10}, 70%, 50%)`}
-              emissiveIntensity={0.3}
-            />
-          </Box>
-        ))}
-        <Text
-          position={[0, 0.2, 0]}
-          fontSize={0.1}
-          color="#9ca3af"
-          anchorX="center"
-        >
-          16 Attention Heads
-        </Text>
-      </group>
-      
-      {/* FFN visualization */}
-      <group position={[0, 0, -1.8]}>
-        <Box args={[3, 0.1, 0.5]}>
-          <meshStandardMaterial
-            color="#8b5cf6"
-            emissive="#8b5cf6"
-            emissiveIntensity={0.2}
-            metalness={0.6}
-            roughness={0.3}
-          />
-        </Box>
-        <Text
-          position={[0, 0.15, 0]}
-          fontSize={0.1}
-          color="#9ca3af"
-          anchorX="center"
-        >
-          FFN (4096d)
-        </Text>
-      </group>
-    </group>
-  );
-}
-
-// Attention flow visualization
-function AttentionFlow({ 
-  startPos, 
-  endPos,
-  intensity = 1,
-  color = "#3b82f6"
-}: {
-  startPos: [number, number, number];
-  endPos: [number, number, number];
-  intensity?: number;
-  color?: string;
-}) {
-  const lineRef = useRef<THREE.BufferGeometry>(null);
-  
-  useFrame((state) => {
-    // Animate the flow
-    const time = state.clock.elapsedTime;
-    // You could add particle effects here
-  });
-  
-  const points = [
-    new THREE.Vector3(...startPos),
-    new THREE.Vector3(...endPos)
-  ];
-  
-  return (
-    <Line
-      points={points}
-      color={color}
-      lineWidth={intensity * 2}
-      transparent
-      opacity={0.6}
-    />
-  );
-}
-
-// Token embedding visualization
-function TokenEmbedding({ position }: { position: [number, number, number] }) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  
-  useFrame((state) => {
-    if (meshRef.current) {
-      meshRef.current.rotation.y = state.clock.elapsedTime * 0.5;
-    }
-  });
-  
-  return (
-    <group position={position}>
-      <Box ref={meshRef} args={[5, 0.2, 2]}>
-        <meshStandardMaterial
-          color="#10b981"
-          emissive="#10b981"
-          emissiveIntensity={0.3}
-          metalness={0.7}
-          roughness={0.2}
-        />
-      </Box>
-      <Text
-        position={[0, 0.3, 0]}
-        fontSize={0.15}
-        color="white"
-        anchorX="center"
-      >
-        Token Embeddings
-      </Text>
-      <Text
-        position={[0, -0.3, 0]}
-        fontSize={0.1}
-        color="#9ca3af"
-        anchorX="center"
-      >
-        51,200 × 1,024
-      </Text>
-    </group>
-  );
-}
-
-// Output layer visualization
-function OutputLayer({ position, modelInfo }: { position: [number, number, number]; modelInfo: { layers: number; heads: number; vocabSize: number; hiddenSize: number; totalParams: number } }) {
-  const meshRef = useRef<THREE.Mesh>(null);
-  const [probabilities, setProbabilities] = useState<number[]>([]);
-  
-  // Debug log position
-  useEffect(() => {
-    console.log(`OutputLayer rendered at position: [${position[0]}, ${position[1]}, ${position[2]}]`);
-  }, [position]);
-  
-  useEffect(() => {
-    // Simulate probability distribution
-    const probs = Array.from({ length: modelInfo.heads }, () => Math.random());
-    setProbabilities(probs);
-  }, []);
-  
-  useFrame((state) => {
-    if (meshRef.current) {
-      meshRef.current.rotation.y = state.clock.elapsedTime * 0.3;
-    }
-  });
-  
-  return (
-    <group position={position}>
-      <Box ref={meshRef} args={[5, 0.2, 2]}>
-        <meshStandardMaterial
-          color="#f59e0b"
-          emissive="#f59e0b"
-          emissiveIntensity={0.3}
-          metalness={0.7}
-          roughness={0.2}
-        />
-      </Box>
-      <Text
-        position={[0, 0.3, 0]}
-        fontSize={0.15}
-        color="white"
-        anchorX="center"
-      >
-        Output Probabilities
-      </Text>
-      <Text
-        position={[0, -0.3, 0]}
-        fontSize={0.1}
-        color="#9ca3af"
-        anchorX="center"
-      >
-        51,200 tokens
-      </Text>
-      
-      {/* Probability bars */}
-      <group position={[0, 0.6, 0]}>
-        {probabilities.slice(0, 10).map((prob, i) => (
-          <Box
-            key={i}
-            position={[(i - 4.5) * 0.5, prob * 0.5, 0]}
-            args={[0.3, prob, 0.1]}
-          >
-            <meshStandardMaterial
-              color={`hsl(${prob * 120}, 70%, 50%)`}
-              emissive={`hsl(${prob * 120}, 70%, 50%)`}
-              emissiveIntensity={0.3}
-            />
-          </Box>
-        ))}
-      </group>
-    </group>
-  );
-}
-
-// Main 3D scene
-function Scene({ modelInfo }: { modelInfo: { layers: number; heads: number; vocabSize: number; hiddenSize: number; totalParams: number } }) {
-  const [selectedLayer, setSelectedLayer] = useState<number | null>(null);
-  const { camera } = useThree();
-  
-  // Model configuration from fetched data
-  const numLayers = modelInfo.layers;
-  const layerSpacing = 3.5; // Much larger spacing for clear separation
-  
-  // Calculate positions
-  const outputYPosition = numLayers * layerSpacing + 5;
-  const inputYPosition = -5;
-  
-  // Log to verify we're creating 20 layers
-  useEffect(() => {
-    console.log(`Creating ${numLayers} transformer layers`);
-    console.log(`Layer spacing: ${layerSpacing}`);
-    console.log(`Layer positions: `, Array.from({ length: numLayers }, (_, i) => i * layerSpacing));
-    console.log(`Last layer (19) position: ${(numLayers - 1) * layerSpacing}`);
-    console.log(`Output position calculated: ${outputYPosition}`);
-    console.log(`Input position: ${inputYPosition}`);
-  }, []);
-  
-  return (
-    <>
-      {/* Lighting */}
-      <ambientLight intensity={0.3} />
-      <pointLight position={[10, 10, 10]} intensity={1} />
-      <pointLight position={[-10, -10, -10]} intensity={0.5} />
-      <spotLight position={[0, 20, 0]} angle={0.3} penumbra={1} intensity={1} />
-      
-      {/* Token Embeddings (Input Layer) */}
-      <TokenEmbedding position={[0, inputYPosition, 0]} />
-      
-      {/* Transformer Layers (0-19) */}
-      {Array.from({ length: numLayers }).map((_, i) => {
-        const yPosition = i * layerSpacing;
-        return (
-          <TransformerLayer
-            key={`layer-${i}`}
-            position={[0, yPosition, 0]}
-            layerIndex={i}
-            onClick={() => setSelectedLayer(i)}
-            isActive={selectedLayer === i}
-          />
-        );
-      })}
-      
-      {/* Output Layer (After Layer 19) */}
-      <OutputLayer position={[0, outputYPosition, 0]} modelInfo={modelInfo} />
-      
-      {/* Attention flows between layers */}
-      {Array.from({ length: numLayers - 1 }).map((_, i) => (
-        <AttentionFlow
-          key={`flow-${i}`}
-          startPos={[0, i * layerSpacing + 0.3, 0]}
-          endPos={[0, (i + 1) * layerSpacing - 0.3, 0]}
-          intensity={0.5}
-        />
-      ))}
-      
-      {/* Flow from input to first layer */}
-      <AttentionFlow
-        startPos={[0, -4.5, 0]}
-        endPos={[0, -0.3, 0]}
-        intensity={0.5}
-        color="#10b981"
-      />
-      
-      {/* Flow from last layer to output */}
-      <AttentionFlow
-        startPos={[0, (numLayers - 1) * layerSpacing + 0.3, 0]}
-        endPos={[0, outputYPosition - 0.5, 0]}
-        intensity={0.5}
-        color="#f59e0b"
-      />
-      
-      {/* Grid for reference */}
-      <gridHelper args={[150, 150, 0x444444, 0x222222]} />
-      
-      {/* Layer info display */}
-      {selectedLayer !== null && (
-        <Billboard position={[5, selectedLayer * layerSpacing, 0]}>
-          <Text fontSize={0.2} color="white">
-            Layer {selectedLayer} Details
-          </Text>
-          <Text position={[0, -0.3, 0]} fontSize={0.1} color="#9ca3af">
-            • 16 attention heads
-          </Text>
-          <Text position={[0, -0.5, 0]} fontSize={0.1} color="#9ca3af">
-            • 1024 hidden dimensions
-          </Text>
-          <Text position={[0, -0.7, 0]} fontSize={0.1} color="#9ca3af">
-            • 4096 FFN dimensions
-          </Text>
-          <Text position={[0, -0.9, 0]} fontSize={0.1} color="#9ca3af">
-            • Y Position: {(selectedLayer * layerSpacing).toFixed(1)}
-          </Text>
-        </Billboard>
-      )}
-      
-      {/* Debug: Show output actual position */}
-      <Billboard position={[8, outputYPosition, 0]}>
-        <Text fontSize={0.15} color="#f59e0b">
-          Output Y: {outputYPosition.toFixed(1)}
-        </Text>
-      </Billboard>
-      
-      {/* Debug: Show highest layer position */}
-      <Billboard position={[-8, (numLayers - 1) * layerSpacing, 0]}>
-        <Text fontSize={0.15} color="#3b82f6">
-          Layer 19 Y: {((numLayers - 1) * layerSpacing).toFixed(1)}
-        </Text>
-      </Billboard>
-    </>
-  );
-}
-
-export default function ModelArchitecture3D() {
-  const [viewMode, setViewMode] = useState<"perspective" | "top" | "side">("perspective");
-  const [showLabels, setShowLabels] = useState(true);
-  const [autoRotate, setAutoRotate] = useState(false); // Start without auto-rotate for better control
-  const [showExplanation, setShowExplanation] = useState(false);
-  
-  // Fetch real model data
-  const [modelInfo, setModelInfo] = useState({
-    layers: 20,
-    heads: 16,
-    vocabSize: 51200,
-    hiddenSize: 1024,
-    totalParams: 356712448
-  });
-  
-  useEffect(() => {
-    fetch(`${getApiUrl()}/model/info`)
-      .then(res => res.json())
-      .then(data => {
-        setModelInfo({
-          layers: data.layers,
-          heads: data.heads,
-          vocabSize: data.vocabSize,
-          hiddenSize: data.hiddenSize,
-          totalParams: data.totalParams
-        });
-      })
-      .catch(err => console.log('Using default model info'));
-  }, []);
-  
-  // Generate contextual explanation for current visualization
-  const generateExplanation = () => {
-    return {
-      title: "Transformer Architecture Visualization",
-      description: `Interactive 3D view of a ${modelInfo.layers}-layer transformer model with ${modelInfo.heads} attention heads per layer.`,
-      details: [
-        {
-          heading: "What is a Transformer?",
-          content: `Transformers are the foundation of modern LLMs. They process text by passing it through multiple layers, each applying attention mechanisms to understand relationships between words. This model has ${modelInfo.layers} layers stacked vertically.`
-        },
-        {
-          heading: "Reading the 3D Structure",
-          content: `Bottom (green): Input embeddings convert text to vectors. Middle (blue): ${modelInfo.layers} transformer layers process information. Top (orange): Output layer predicts next tokens. The vertical flow shows how data moves through the network.`
-        },
-        {
-          heading: "Attention Heads (Small Blocks)",
-          content: `Each layer contains ${modelInfo.heads} attention heads (colored blocks). These heads learn different aspects of language: grammar, semantics, context, etc. They work in parallel, each focusing on different patterns.`
-        },
-        {
-          heading: "Feed-Forward Networks (Purple)",
-          content: `The purple blocks are FFN components with 4096 dimensions. After attention, these networks transform the data further, adding non-linearity and learning complex patterns.`
-        },
-        {
-          heading: "Information Flow",
-          content: `Data flows upward from input to output. Each layer refines the understanding, building from simple patterns (early layers) to complex concepts (later layers). The lines show this sequential processing.`
-        },
-        {
-          heading: "Model Scale",
-          content: `This architecture represents ~${Math.round(modelInfo.totalParams / 1e6)}M parameters. With ${modelInfo.vocabSize.toLocaleString()} token vocabulary, ${modelInfo.hiddenSize} hidden dimensions, and ${modelInfo.layers} layers, it can generate coherent code by learning patterns from training data.`
-        }
-      ]
-    };
-  };
-  
-  const explanation = generateExplanation();
-  
-  return (
-    <div className="bg-gray-900 rounded-xl p-6 h-[800px]">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <Move3D className="w-6 h-6 text-blue-400" />
-            3D Model Architecture
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Interactive 3D visualization of the transformer architecture
-          </p>
-        </div>
-        
-        {/* Controls */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setAutoRotate(!autoRotate)}
-            className={`px-3 py-1.5 rounded-lg text-sm ${
-              autoRotate ? 'bg-blue-600 text-white' : 'bg-gray-800 text-gray-300'
-            }`}
-          >
-            Auto-rotate
-          </button>
-          <button
-            onClick={() => setShowLabels(!showLabels)}
-            className={`px-3 py-1.5 rounded-lg text-sm ${
-              showLabels ? 'bg-blue-600 text-white' : 'bg-gray-800 text-gray-300'
-            }`}
-          >
-            Labels
-          </button>
-        </div>
-      </div>
-      
-      {/* Main Content Area with Side Panel */}
-      <div className="flex gap-4">
-        {/* 3D Canvas */}
-        <div className="flex-1 min-w-0 transition-all duration-500 ease-in-out">
-          <div className="h-[700px] bg-black rounded-lg relative">
-        <Canvas camera={{ position: [50, 40, 70], fov: 45 }}> {/* Camera much further back for full view */}
-          <Suspense fallback={null}>
-            <Scene modelInfo={modelInfo} />
-            <OrbitControls 
-              enablePan={true}
-              enableZoom={true}
-              enableRotate={true}
-              autoRotate={autoRotate}
-              autoRotateSpeed={0.5}
-              minDistance={20}
-              maxDistance={200}
-              target={[0, 35, 0]}
-            />
-            <Environment preset="city" />
-          </Suspense>
-        </Canvas>
-        
-            {/* Help Toggle Button */}
-            <button
-              onClick={() => setShowExplanation(!showExplanation)}
-              className="absolute top-4 left-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-            >
-              {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-              <span className="text-sm font-medium">
-                {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-              </span>
-            </button>
-            
-            {/* Instructions */}
-            <div className="absolute bottom-4 left-4 bg-gray-800/80 backdrop-blur rounded-lg p-3 text-xs text-gray-400">
-              <div className="flex items-center gap-2 mb-1">
-                <Eye className="w-3 h-3" />
-                <span>Click layers to inspect</span>
-              </div>
-              <div className="flex items-center gap-2 mb-1">
-                <Move3D className="w-3 h-3" />
-                <span>Drag to rotate • Scroll to zoom</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Layers className="w-3 h-3" />
-                <span>{modelInfo.layers} layers × {modelInfo.heads} heads = {modelInfo.layers * modelInfo.heads} attention patterns</span>
-              </div>
-              <div className="mt-2 pt-2 border-t border-gray-600">
-                <div className="font-semibold text-white">Architecture Stack:</div>
-                <div className="text-green-400">↑ Output Probabilities (51,200 tokens)</div>
-                <div className="text-blue-400">↑ Layers 0-19 (20 transformer blocks)</div>
-                <div className="text-green-400">↑ Input Embeddings (51,200 × 1,024)</div>
-              </div>
-            </div>
-        
-        {/* Legend */}
-        <div className="absolute top-4 right-4 bg-gray-800/80 backdrop-blur rounded-lg p-3 text-xs">
-          <div className="font-semibold text-white mb-2">Components</div>
-          <div className="space-y-1">
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-green-500 rounded"></div>
-              <span className="text-gray-300">Token Embeddings</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-blue-500 rounded"></div>
-              <span className="text-gray-300">Attention Layers</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-purple-500 rounded"></div>
-              <span className="text-gray-300">Feed-Forward</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-amber-500 rounded"></div>
-              <span className="text-gray-300">Output Layer</span>
-            </div>
-          </div>
-        </div>
-          </div>
-        </div>
-        
-        {/* Explanation Side Panel */}
-        <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-          <div className="w-96 h-[700px] bg-gray-900 rounded-lg border border-gray-700">
-            {/* Panel Header */}
-            <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-              <div className="flex items-center gap-2">
-                <Info className="w-5 h-5 text-blue-400" />
-                <h3 className="text-lg font-semibold text-white">Understanding the Architecture</h3>
-              </div>
-            </div>
-            
-            {/* Panel Content */}
-            <div className="px-4 py-4 overflow-y-auto h-[calc(700px-60px)]">
-              {/* Main Description */}
-              <div className="mb-4 p-3 bg-blue-900/20 border border-blue-800 rounded-lg">
-                <h4 className="text-sm font-semibold text-blue-400 mb-1">{explanation.title}</h4>
-                <p className="text-xs text-gray-300">{explanation.description}</p>
-              </div>
-              
-              {/* Explanation Sections */}
-              <div className="space-y-3">
-                {explanation.details.map((section, idx) => (
-                  <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                    <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                      <Zap className="w-3 h-3 text-yellow-400" />
-                      {section.heading}
-                    </h5>
-                    <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Visual Guide */}
-              <div className="mt-4 p-3 bg-purple-900/20 border border-purple-800 rounded-lg">
-                <h4 className="font-medium text-sm text-purple-400 mb-2">Layer Components</h4>
-                <div className="space-y-2 text-xs">
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-green-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">Input: Token embeddings (51,200 × 1,024)</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-blue-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">Attention: {modelInfo.layers} layers × {modelInfo.heads} heads</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-purple-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">FFN: 4096 dimensional processing</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <div className="w-3 h-3 bg-amber-500 rounded mt-0.5"></div>
-                    <span className="text-gray-300">Output: Probability over 51,200 tokens</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Model Statistics */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">Model Statistics</h4>
-                <div className="space-y-1 text-xs">
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Total Layers:</span>
-                    <span className="text-white">20</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Attention Heads:</span>
-                    <span className="text-white">16 per layer</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Hidden Dimensions:</span>
-                    <span className="text-white">1,024</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">FFN Dimensions:</span>
-                    <span className="text-white">4,096</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Vocabulary Size:</span>
-                    <span className="text-white">51,200 tokens</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Parameters:</span>
-                    <span className="text-blue-400">~350M</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Interaction Guide */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Interactive Features</h4>
-                <ul className="text-xs text-gray-400 space-y-1">
-                  <li>• Click layers to see details</li>
-                  <li>• Drag to rotate the model</li>
-                  <li>• Scroll to zoom in/out</li>
-                  <li>• Enable auto-rotate for 360° view</li>
-                  <li>• Each layer processes all tokens in parallel</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/ModelInspector.tsx

@@ -1,495 +0,0 @@
-/**
- * Model Inspector Component
- * 
- * Displays detailed architecture information about the loaded model,
- * including layers, parameters, attention heads, and accessible components.
- * Makes the "black box" transparent by showing what can be visualized.
- * 
- * @component
- */
-
-"use client";
-
-import { useState, useEffect, lazy, Suspense } from "react";
-import { getApiUrl } from "@/lib/config";
-import { 
-  Brain, 
-  Layers, 
-  Eye, 
-  Cpu, 
-  Database,
-  GitBranch,
-  Zap,
-  ChevronRight,
-  ChevronDown,
-  Activity,
-  Info,
-  Box,
-  Network,
-  Move3D
-} from "lucide-react";
-
-// Lazy load the 3D components to avoid SSR issues
-const ModelArchitecture3D = lazy(() => import('./ModelArchitecture3D'));
-const DecisionPath3D = lazy(() => import('./DecisionPath3DEnhanced'));
-
-interface ModelInfo {
-  name: string;
-  type: string;
-  totalParams: number;
-  layers: number;
-  heads: number;
-  hiddenSize: number;
-  vocabSize: number;
-  maxPositions: number;
-  architecture: string[];
-  accessible: string[];
-}
-
-export default function ModelInspector({ hideControlPanel = false }: { hideControlPanel?: boolean }) {
-  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(['overview']));
-  const [isConnected, setIsConnected] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [modelInfo, setModelInfo] = useState<ModelInfo>({
-    name: "Loading...",
-    type: "unknown",
-    totalParams: 0,
-    layers: 0,
-    heads: 0,
-    hiddenSize: 0,
-    vocabSize: 0,
-    maxPositions: 0,
-    architecture: [],
-    accessible: []
-  });
-  const [deviceInfo, setDeviceInfo] = useState<string>("");
-  const [modelConfig, setModelConfig] = useState<Record<string, unknown> | null>(null);
-
-  // Fetch model information from backend
-  useEffect(() => {
-    const fetchModelInfo = async () => {
-      try {
-        const response = await fetch(`${getApiUrl()}/model/info`);
-        if (response.ok) {
-          const data = await response.json();
-          setModelInfo({
-            name: data.name,
-            type: data.type,
-            totalParams: data.totalParams,
-            layers: data.layers,
-            heads: data.heads,
-            hiddenSize: data.hiddenSize,
-            vocabSize: data.vocabSize,
-            maxPositions: data.maxPositions,
-            architecture: [data.architecture],
-            accessible: data.accessible
-          });
-          setDeviceInfo(data.device);
-          setModelConfig(data.config);
-          setIsConnected(true);
-        }
-      } catch (error) {
-        console.error('Failed to fetch model info:', error);
-        // Keep default/mock data if fetch fails
-        setIsConnected(false);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchModelInfo();
-    // Refresh model info every 10 seconds
-    const interval = setInterval(fetchModelInfo, 10000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const toggleSection = (section: string) => {
-    const newExpanded = new Set(expandedSections);
-    if (newExpanded.has(section)) {
-      newExpanded.delete(section);
-    } else {
-      newExpanded.add(section);
-    }
-    setExpandedSections(newExpanded);
-  };
-
-  const formatNumber = (num: number) => {
-    if (num >= 1e9) return `${(num / 1e9).toFixed(1)}B`;
-    if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
-    if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
-    return num.toString();
-  };
-
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <Brain className="w-6 h-6 text-purple-400" />
-            Model Inspector
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Explore the complete architecture of the loaded model
-          </p>
-        </div>
-        
-        <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-          isConnected ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'
-        }`}>
-          <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-          {isLoading ? 'Loading...' : (isConnected ? 'Model Connected' : 'Disconnected')}
-        </div>
-      </div>
-
-      {/* Model Overview Section */}
-      <div className="bg-gray-800 rounded-lg mb-4">
-        <button
-          onClick={() => toggleSection('overview')}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 transition-colors rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            {expandedSections.has('overview') ? 
-              <ChevronDown className="w-5 h-5 text-gray-400" /> : 
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            }
-            <Cpu className="w-5 h-5 text-blue-400" />
-            <span className="font-semibold">Model Overview</span>
-          </div>
-          <span className="text-sm text-gray-400">{modelInfo.name}</span>
-        </button>
-        
-        {expandedSections.has('overview') && (
-          <div className="px-4 pb-4">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="bg-gray-900 rounded-lg p-3">
-                <div className="text-xs text-gray-400">Total Parameters</div>
-                <div className="text-2xl font-bold text-white">{formatNumber(modelInfo.totalParams)}</div>
-                <div className="text-xs text-gray-500">
-                  {modelInfo.totalParams > 1e9 ? `${(modelInfo.totalParams / 1e9).toFixed(1)} Billion` : 
-                   modelInfo.totalParams > 1e6 ? `${(modelInfo.totalParams / 1e6).toFixed(1)} Million` : 
-                   formatNumber(modelInfo.totalParams)}
-                </div>
-              </div>
-              
-              <div className="bg-gray-900 rounded-lg p-3">
-                <div className="text-xs text-gray-400">Vocabulary Size</div>
-                <div className="text-2xl font-bold text-purple-400">{formatNumber(modelInfo.vocabSize)}</div>
-                <div className="text-xs text-gray-500">Unique tokens</div>
-              </div>
-              
-              <div className="bg-gray-900 rounded-lg p-3">
-                <div className="text-xs text-gray-400">Context Length</div>
-                <div className="text-2xl font-bold text-green-400">{formatNumber(modelInfo.maxPositions)}</div>
-                <div className="text-xs text-gray-500">Max tokens</div>
-              </div>
-              
-              <div className="bg-gray-900 rounded-lg p-3">
-                <div className="text-xs text-gray-400">Architecture</div>
-                <div className="text-lg font-bold text-yellow-400">Transformer</div>
-                <div className="text-xs text-gray-500">GPT-style</div>
-              </div>
-            </div>
-            
-            {/* Device Information */}
-            {deviceInfo && (
-              <div className="mt-4 p-3 bg-gray-900 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Cpu className="w-4 h-4 text-blue-400" />
-                  <span className="text-sm font-semibold">Device Information</span>
-                </div>
-                <div className="text-sm text-gray-400">
-                  Running on: <span className="text-white font-mono">{deviceInfo}</span>
-                </div>
-              </div>
-            )}
-            
-            {/* Model Configuration */}
-            {modelConfig && (
-              <div className="mt-4 p-3 bg-gray-900 rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Database className="w-4 h-4 text-purple-400" />
-                  <span className="text-sm font-semibold">Configuration</span>
-                </div>
-                <div className="grid grid-cols-2 gap-2 text-xs">
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Activation:</span>
-                    <span className="text-white font-mono">{String(modelConfig.activation_function)}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-400">Cache:</span>
-                    <span className="text-white font-mono">{modelConfig.use_cache ? 'Enabled' : 'Disabled'}</span>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Architecture Details Section */}
-      <div className="bg-gray-800 rounded-lg mb-4">
-        <button
-          onClick={() => toggleSection('architecture')}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 transition-colors rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            {expandedSections.has('architecture') ? 
-              <ChevronDown className="w-5 h-5 text-gray-400" /> : 
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            }
-            <Layers className="w-5 h-5 text-green-400" />
-            <span className="font-semibold">Architecture Details</span>
-          </div>
-          <span className="text-sm text-gray-400">{modelInfo.layers} layers × {modelInfo.heads} heads</span>
-        </button>
-        
-        {expandedSections.has('architecture') && (
-          <div className="px-4 pb-4">
-            <div className="space-y-4">
-              {/* Layer Structure */}
-              <div className="bg-gray-900 rounded-lg p-4">
-                <h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                  <GitBranch className="w-4 h-4 text-blue-400" />
-                  Layer Structure (×{modelInfo.layers})
-                </h4>
-                <div className="space-y-2 text-sm">
-                  <div className="flex items-center gap-2">
-                    <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-                    <span className="text-gray-300">Multi-Head Attention</span>
-                    <span className="text-gray-500">({modelInfo.heads} heads, {modelInfo.hiddenSize / modelInfo.heads} dims/head)</span>
-                  </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
-                    <span className="text-gray-400">QKV Projection: {modelInfo.hiddenSize} → {modelInfo.hiddenSize * 3}</span>
-                  </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
-                    <span className="text-gray-400">Output Projection: {modelInfo.hiddenSize} → {modelInfo.hiddenSize}</span>
-                  </div>
-                  
-                  <div className="flex items-center gap-2 mt-2">
-                    <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
-                    <span className="text-gray-300">Feed-Forward Network</span>
-                    <span className="text-gray-500">(4× expansion)</span>
-                  </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
-                    <span className="text-gray-400">FC1: {modelInfo.hiddenSize} → {modelInfo.hiddenSize * 4}</span>
-                  </div>
-                  <div className="flex items-center gap-2 ml-4">
-                    <div className="w-1 h-1 bg-gray-400 rounded-full"></div>
-                    <span className="text-gray-400">FC2: {modelInfo.hiddenSize * 4} → {modelInfo.hiddenSize}</span>
-                  </div>
-                  
-                  <div className="flex items-center gap-2 mt-2">
-                    <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
-                    <span className="text-gray-300">Layer Normalization</span>
-                  </div>
-                  
-                  <div className="flex items-center gap-2">
-                    <div className="w-2 h-2 bg-red-400 rounded-full"></div>
-                    <span className="text-gray-300">Residual Connections</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Data Flow */}
-              <div className="bg-gray-900 rounded-lg p-4">
-                <h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                  <Network className="w-4 h-4 text-purple-400" />
-                  Data Flow Through Model
-                </h4>
-                <div className="font-mono text-xs text-gray-400 whitespace-pre">
-{`Input Text
-    ↓
-[Token Embeddings] (${modelInfo.vocabSize.toLocaleString()} × ${modelInfo.hiddenSize.toLocaleString()})
-    ↓
-[+ Rotary Position Embeddings]
-    ↓
-╔═══════════════════════╗
-║  Layer 0              ║
-║  ├─ Attention (${modelInfo.heads}h)   ║
-║  └─ FFN (${modelInfo.hiddenSize * 4}d)       ║
-╚═══════════════════════╝
-    ↓
-    ... (${modelInfo.layers - 2} more layers)
-    ↓
-╔═══════════════════════╗
-║  Layer ${modelInfo.layers - 1}             ║
-║  ├─ Attention (${modelInfo.heads}h)   ║
-║  └─ FFN (${modelInfo.hiddenSize * 4}d)       ║
-╚═══════════════════════╝
-    ↓
-[Layer Norm]
-    ↓
-[Language Model Head]
-    ↓
-${modelInfo.vocabSize.toLocaleString()} Token Probabilities`}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Accessible Components Section */}
-      <div className="bg-gray-800 rounded-lg mb-4">
-        <button
-          onClick={() => toggleSection('accessible')}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 transition-colors rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            {expandedSections.has('accessible') ? 
-              <ChevronDown className="w-5 h-5 text-gray-400" /> : 
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            }
-            <Eye className="w-5 h-5 text-yellow-400" />
-            <span className="font-semibold">What We Can Visualize</span>
-          </div>
-          <span className="text-sm text-gray-400">Everything is accessible</span>
-        </button>
-        
-        {expandedSections.has('accessible') && (
-          <div className="px-4 pb-4">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {modelInfo.accessible.map((item, idx) => (
-                <div key={idx} className="flex items-start gap-2">
-                  <Zap className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
-                  <span className="text-sm text-gray-300">{item}</span>
-                </div>
-              ))}
-            </div>
-            
-            <div className="mt-4 p-4 bg-gray-900 rounded-lg border border-blue-900">
-              <div className="flex items-start gap-2">
-                <Info className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
-                <div className="text-sm">
-                  <p className="text-blue-400 font-semibold mb-1">Complete Transparency</p>
-                  <p className="text-gray-400">
-                    Every computation, weight, and decision in the model&apos;s {formatNumber(modelInfo.totalParams)} parameters 
-                    is accessible. The &quot;black box&quot; becomes a &quot;glass box&quot; - we can visualize the 
-                    entire thinking process as tokens flow through the network.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Decision Path Visualization Section */}
-      <div className="bg-gray-800 rounded-lg mb-4">
-        <button
-          onClick={() => toggleSection('decision-path')}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 transition-colors rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            {expandedSections.has('decision-path') ? 
-              <ChevronDown className="w-5 h-5 text-gray-400" /> : 
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            }
-            <GitBranch className="w-5 h-5 text-yellow-400" />
-            <span className="font-semibold">Decision Path Analysis</span>
-          </div>
-          <span className="text-sm text-gray-400">Glass Box view</span>
-        </button>
-        
-        {expandedSections.has('decision-path') && (
-          <div className="px-4 pb-4">
-            <Suspense fallback={
-              <div className="h-[900px] bg-gray-900 rounded-lg flex items-center justify-center">
-                <div className="text-gray-400">Loading decision path visualization...</div>
-              </div>
-            }>
-              <DecisionPath3D />
-            </Suspense>
-          </div>
-        )}
-      </div>
-
-      {/* 3D Visualization Section */}
-      <div className="bg-gray-800 rounded-lg mb-4">
-        <button
-          onClick={() => toggleSection('3d')}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 transition-colors rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            {expandedSections.has('3d') ? 
-              <ChevronDown className="w-5 h-5 text-gray-400" /> : 
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            }
-            <Move3D className="w-5 h-5 text-blue-400" />
-            <span className="font-semibold">3D Architecture Visualization</span>
-          </div>
-          <span className="text-sm text-gray-400">Interactive 3D model</span>
-        </button>
-        
-        {expandedSections.has('3d') && (
-          <div className="px-4 pb-4">
-            <Suspense fallback={
-              <div className="h-[800px] bg-gray-900 rounded-lg flex items-center justify-center">
-                <div className="text-gray-400">Loading 3D visualization...</div>
-              </div>
-            }>
-              <ModelArchitecture3D />
-            </Suspense>
-          </div>
-        )}
-      </div>
-
-      {/* Computation Stats Section */}
-      <div className="bg-gray-800 rounded-lg">
-        <button
-          onClick={() => toggleSection('computation')}
-          className="w-full p-4 flex items-center justify-between hover:bg-gray-700/50 transition-colors rounded-lg"
-        >
-          <div className="flex items-center gap-3">
-            {expandedSections.has('computation') ? 
-              <ChevronDown className="w-5 h-5 text-gray-400" /> : 
-              <ChevronRight className="w-5 h-5 text-gray-400" />
-            }
-            <Database className="w-5 h-5 text-red-400" />
-            <span className="font-semibold">Computation Scale</span>
-          </div>
-          <span className="text-sm text-gray-400">Per token generation</span>
-        </button>
-        
-        {expandedSections.has('computation') && (
-          <div className="px-4 pb-4">
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Operations per token</span>
-                <span className="text-sm font-mono text-white">~{formatNumber(modelInfo.totalParams * 2)}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Attention computations</span>
-                <span className="text-sm font-mono text-white">{modelInfo.layers * modelInfo.heads} heads</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Probability calculations</span>
-                <span className="text-sm font-mono text-white">{modelInfo.vocabSize.toLocaleString()} tokens</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Memory footprint (FP32)</span>
-                <span className="text-sm font-mono text-white">{((modelInfo.totalParams * 4) / (1024 * 1024 * 1024)).toFixed(2)} GB</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-400">Memory footprint (FP16)</span>
-                <span className="text-sm font-mono text-white">{((modelInfo.totalParams * 2) / (1024 * 1024 * 1024)).toFixed(2)} GB</span>
-              </div>
-            </div>
-            
-            <div className="mt-4 p-3 bg-gray-900 rounded-lg">
-              <p className="text-xs text-gray-500">
-                Each token generation involves passing through all {modelInfo.layers} layers, 
-                computing attention across {modelInfo.layers * modelInfo.heads} heads, and producing probabilities 
-                for {modelInfo.vocabSize.toLocaleString()} possible next tokens.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/Navigation.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { Brain, Code, GitBranch, Book } from "lucide-react";
-
-export default function Navigation() {
-  return (
-    <nav className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
-      <div className="container mx-auto px-4">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center gap-8">
-            <div className="flex items-center gap-2">
-              <Brain className="w-8 h-8 text-blue-500" />
-              <span className="text-xl font-bold">Visualisable.ai</span>
-            </div>
-            
-            <div className="hidden md:flex gap-6">
-              <a href="#explorer" className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
-                <Code className="w-4 h-4" />
-                <span>Explorer</span>
-              </a>
-              <a href="#lab" className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
-                <GitBranch className="w-4 h-4" />
-                <span>Lab</span>
-              </a>
-              <a href="#docs" className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
-                <Book className="w-4 h-4" />
-                <span>Docs</span>
-              </a>
-            </div>
-          </div>
-          
-          <div className="flex items-center gap-4">
-            <button className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors">
-              Sign In
-            </button>
-            <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
-              Get Started
-            </button>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}

frontend/PromptDiff.tsx

@@ -1,1196 +0,0 @@
-/**
- * Prompt Diff Analyzer Component
- * 
- * Visualizes and compares attention patterns between different prompts
- * to show how prompt changes affect model behavior.
- * 
- * CURRENT STATUS: Demo Mode
- * - Uses existing traces from working_demo.py
- * - Simulates differences between prompts
- * - TODO: Integrate with real LLM models for actual prompt comparison
- * 
- * @component
- */
-
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import * as d3 from "d3";
-import { useWebSocket } from "@/lib/websocket-client";
-import { PromptServiceClient } from "@/lib/prompt-service-client";
-import { getApiUrl } from "@/lib/config";
-import { ArrowRight, AlertTriangle, CheckCircle, Minus, Plus, GitCompare, Activity, Download, HelpCircle, X, Info, Zap } from "lucide-react";
-
-// Attention data structure for a single layer
-interface AttentionData {
-  layer: string;
-  weights: number[][];
-  tokens?: string[];
-  max_weight: number;
-  entropy?: number;
-  timestamp: number;
-}
-
-// Comparison data structure for two prompts
-interface PromptComparison {
-  promptA: string;
-  promptB: string;
-  attentionA: AttentionData[];
-  attentionB: AttentionData[];
-  timestamp: number;
-}
-
-export default function PromptDiff() {
-  const { traces, isConnected } = useWebSocket();
-  const [prompt1, setPrompt1] = useState("def fibonacci(n):\n    '''Calculate fibonacci number'''");
-  const [prompt2, setPrompt2] = useState("def fibonacci(n):\n    '''Calculate fibonacci number with memoization'''");
-  const [shouldAutoAnalyze, setShouldAutoAnalyze] = useState(false);
-  
-  // Listen for demo selections from LocalControlPanel
-  useEffect(() => {
-    const handleDemoPromptsSelected = (event: Event) => {
-      const customEvent = event as CustomEvent;
-      const { promptA, promptB } = customEvent.detail;
-      console.log('PromptDiff: Demo prompts received -', { promptA, promptB });
-      
-      if (promptA && promptB) {
-        setPrompt1(promptA);
-        setPrompt2(promptB);
-        setShouldAutoAnalyze(true);
-      }
-    };
-    
-    window.addEventListener('demo-prompts-selected', handleDemoPromptsSelected);
-    return () => window.removeEventListener('demo-prompts-selected', handleDemoPromptsSelected);
-  }, []);
-  
-  // We'll add the auto-analyze effect after analyzePrompts is defined
-  
-  const [comparison, setComparison] = useState<PromptComparison | null>(null);
-  const [selectedLayer, setSelectedLayer] = useState<string>("");
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [savedComparisons, setSavedComparisons] = useState<PromptComparison[]>([]);
-  const [isPromptServiceConnected, setIsPromptServiceConnected] = useState(false);
-  const [useRealModel, setUseRealModel] = useState(true); // Default to using real model
-  const [generatedTexts, setGeneratedTexts] = useState<{a?: string, b?: string}>({});
-  const [showExplanation, setShowExplanation] = useState(false);
-  
-  const diffSvgRef = useRef<SVGSVGElement>(null);
-  const heatmapARef = useRef<SVGSVGElement>(null);
-  const heatmapBRef = useRef<SVGSVGElement>(null);
-  const promptServiceRef = useRef<PromptServiceClient | null>(null);
-
-  // Initialize prompt service connection
-  useEffect(() => {
-    const client = new PromptServiceClient();
-    promptServiceRef.current = client;
-    
-    // Try to connect to the prompt service
-    client.connect()
-      .then(() => {
-        console.log('✅ Connected to prompt service');
-        setIsPromptServiceConnected(true);
-        setUseRealModel(true);
-      })
-      .catch((error) => {
-        // This is expected if the service isn't running - no need to log error
-        console.log('ℹ️ Using demo mode (start prompt_service.py for real model)');
-        setIsPromptServiceConnected(false);
-        setUseRealModel(false);
-      });
-    
-    // Set up message handler
-    client.onMessage('prompt-diff', (data) => {
-      handlePromptServiceMessage(data as unknown as PromptServiceMessage);
-    });
-    
-    return () => {
-      client.offMessage('prompt-diff');
-      client.disconnect();
-    };
-  }, []);
-
-  // Handle messages from prompt service
-  interface PromptServiceMessage {
-    type: string;
-    comparison_group?: string;
-    layer?: string;
-    weights?: number[][];
-    max_weight?: number;
-    entropy?: number;
-    timestamp?: number;
-    tokens?: string[];
-  }
-  
-  const handlePromptServiceMessage = (data: PromptServiceMessage) => {
-    if (data.type === 'attention') {
-      // Store attention traces temporarily
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (!(window as any).tempAttentionStorage) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any).tempAttentionStorage = { prompt_a: [], prompt_b: [] };
-      }
-      
-      if (data.comparison_group === 'prompt_a') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any).tempAttentionStorage.prompt_a.push(data);
-      } else if (data.comparison_group === 'prompt_b') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window as any).tempAttentionStorage.prompt_b.push(data);
-      }
-    } else if (data.type === 'prompt_comparison') {
-      // Handle comparison summary
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const storage = (window as any).tempAttentionStorage || { prompt_a: [], prompt_b: [] };
-      
-      // Create comparison from received data
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const comparisonData = data as any; // Type assertion for comparison-specific fields
-      const newComparison: PromptComparison = {
-        promptA: comparisonData.prompt_a?.text || prompt1,
-        promptB: comparisonData.prompt_b?.text || prompt2,
-        attentionA: storage.prompt_a.map((t: PromptServiceMessage) => ({
-          layer: t.layer || '',
-          weights: t.weights || [],
-          max_weight: t.max_weight || 0,
-          entropy: t.entropy || 0,
-          timestamp: t.timestamp || 0,
-          tokens: t.tokens || []
-        })),
-        attentionB: storage.prompt_b.map((t: PromptServiceMessage) => ({
-          layer: t.layer || '',
-          weights: t.weights || [],
-          max_weight: t.max_weight || 0,
-          entropy: t.entropy || 0,
-          timestamp: t.timestamp || 0,
-          tokens: t.tokens || []
-        })),
-        timestamp: Date.now()
-      };
-      
-      // Store generated texts
-      setGeneratedTexts({
-        a: comparisonData.prompt_a?.generated || '',
-        b: comparisonData.prompt_b?.generated || ''
-      });
-      
-      setComparison(newComparison);
-      setSavedComparisons(prev => [...prev, newComparison]);
-      
-      // Auto-select first layer
-      if (storage.prompt_a.length > 0) {
-        const layers = Array.from(new Set(storage.prompt_a.map((a: PromptServiceMessage) => a.layer)));
-        if (layers[0]) {
-          setSelectedLayer(layers[0] as string);
-        }
-      }
-      
-      // Clear temporary storage
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).tempAttentionStorage = null;
-      setIsAnalyzing(false);
-    }
-  };
-
-  // Window type declarations removed - using (window as any) for tempAttentionStorage instead
-
-  /**
-   * Analyzes attention patterns for two prompts
-   * 
-   * Uses real model service if available, otherwise falls back to demo mode
-   */
-  const analyzePrompts = async () => {
-    setIsAnalyzing(true);
-    
-    try {
-      // Generate traces for both prompts using the unified backend
-      console.log('Generating traces for Prompt A...');
-      const responseA = await fetch(`${getApiUrl()}/generate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt: prompt1,
-          max_tokens: 50,
-          temperature: 0.7,
-          sampling_rate: 0.5 // Higher sampling for better comparison
-        })
-      });
-      
-      if (!responseA.ok) throw new Error(`HTTP error! status: ${responseA.status}`);
-      const dataA = await responseA.json();
-      
-      console.log('Generating traces for Prompt B...');
-      const responseB = await fetch(`${getApiUrl()}/generate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt: prompt2,
-          max_tokens: 50,
-          temperature: 0.7,
-          sampling_rate: 0.5
-        })
-      });
-      
-      if (!responseB.ok) throw new Error(`HTTP error! status: ${responseB.status}`);
-      const dataB = await responseB.json();
-      
-      // Store generated texts
-      setGeneratedTexts({
-        a: dataA.generated_text,
-        b: dataB.generated_text
-      });
-      
-      // Extract attention traces from both responses
-      const attentionA = dataA.traces
-        ?.filter((t: PromptServiceMessage) => t.type === 'attention' && t.weights)
-        .map((t: PromptServiceMessage) => ({
-          layer: t.layer || 'unknown',
-          weights: t.weights || [],
-          max_weight: t.max_weight || 1,
-          entropy: t.entropy,
-          timestamp: t.timestamp || Date.now(),
-          tokens: t.tokens
-        })) || [];
-      
-      const attentionB = dataB.traces
-        ?.filter((t: PromptServiceMessage) => t.type === 'attention' && t.weights)
-        .map((t: PromptServiceMessage) => ({
-          layer: t.layer || 'unknown',
-          weights: t.weights || [],
-          max_weight: t.max_weight || 1,
-          entropy: t.entropy,
-          timestamp: t.timestamp || Date.now(),
-          tokens: t.tokens
-        })) || [];
-      
-      if (attentionA.length === 0 || attentionB.length === 0) {
-        alert('No attention traces captured. Try adjusting the prompts or sampling rate.');
-        setIsAnalyzing(false);
-        return;
-      }
-      
-      // Create comparison
-      const newComparison: PromptComparison = {
-        promptA: prompt1,
-        promptB: prompt2,
-        attentionA,
-        attentionB,
-        timestamp: Date.now()
-      };
-      
-      setComparison(newComparison);
-      
-      // Find common layers between both sets
-      const layersA = new Set(attentionA.map((a: AttentionData) => a.layer));
-      const layersB = new Set(attentionB.map((a: AttentionData) => a.layer));
-      const commonLayers = Array.from(layersA).filter(l => layersB.has(l)).sort();
-      
-      if (commonLayers.length > 0) {
-        setSelectedLayer(commonLayers[0] as string);
-      } else if (attentionA.length > 0) {
-        // No common layers, just use first layer from A
-        setSelectedLayer(attentionA[0].layer);
-      }
-      
-      console.log(`Comparison complete. Found ${commonLayers.length} common layers.`);
-    } catch (error) {
-      console.error('Error comparing prompts:', error);
-      alert(`Failed to compare prompts: ${error}`);
-    } finally {
-      setIsAnalyzing(false);
-    }
-  };
-  
-  // Auto-analyze when triggered by demo selection
-  useEffect(() => {
-    if (shouldAutoAnalyze && !isAnalyzing) {
-      setShouldAutoAnalyze(false);
-      // Small delay to ensure state is updated
-      setTimeout(() => {
-        analyzePrompts();
-      }, 100);
-    }
-  }, [shouldAutoAnalyze, isAnalyzing, prompt1, prompt2]);
-
-  const analyzeDemoMode = () => {
-    // Original demo mode implementation
-    const attentionTraces = traces.filter(t => t.type === 'attention' && t.weights);
-    
-    console.log('[PromptDiff] Available attention traces:', attentionTraces.length);
-    
-    if (attentionTraces.length === 0) {
-      // No traces available - show error message
-      alert('No attention data available. Please run a model first to capture attention patterns.\n\nTry running: python python-sdk/working_demo.py');
-      setIsAnalyzing(false);
-      return;
-    }
-    
-    if (attentionTraces.length < 2) {
-      // Not enough traces for comparison
-      alert(`Only ${attentionTraces.length} attention trace(s) available. Need at least 2 for comparison.\n\nTry running the demo again to generate more traces.`);
-      setIsAnalyzing(false);
-      return;
-    }
-    
-    // Simulate having different attention patterns for each prompt
-    const halfPoint = Math.floor(attentionTraces.length / 2);
-    const attentionA = attentionTraces.slice(0, halfPoint).map(t => ({
-      layer: t.layer || 'unknown',
-      weights: t.weights || [],
-      max_weight: t.max_weight || 1,
-      entropy: t.entropy,
-      timestamp: t.timestamp || Date.now(),
-      tokens: t.tokens
-    }));
-    
-    const attentionB = attentionTraces.slice(halfPoint).map(t => ({
-      layer: t.layer || 'unknown',
-      weights: t.weights || [],
-      max_weight: t.max_weight || 1,
-      entropy: t.entropy,
-      timestamp: t.timestamp || Date.now(),
-      tokens: t.tokens
-    }));
-    
-    // Add some variation to attentionB to simulate different prompt
-    attentionB.forEach(attention => {
-      attention.weights = attention.weights.map(row => 
-        row.map(val => Math.min(1, Math.max(0, val + (Math.random() - 0.5) * 0.2)))
-      );
-      attention.max_weight = Math.max(...attention.weights.flat());
-      attention.entropy = (attention.entropy || 0) + (Math.random() - 0.5) * 0.1;
-    });
-    
-    const newComparison: PromptComparison = {
-      promptA: prompt1,
-      promptB: prompt2,
-      attentionA,
-      attentionB,
-      timestamp: Date.now()
-    };
-    
-    setComparison(newComparison);
-    setSavedComparisons(prev => [...prev, newComparison]);
-    
-    // Auto-select first layer
-    if (attentionA.length > 0) {
-      const layers = Array.from(new Set(attentionA.map(a => a.layer)));
-      setSelectedLayer(layers[0]);
-    }
-    
-    setTimeout(() => setIsAnalyzing(false), 1000);
-  };
-
-  /**
-   * Render attention heatmap for Prompt A
-   */
-  useEffect(() => {
-    if (!comparison || !selectedLayer || !heatmapARef.current) return;
-    
-    const attention = comparison.attentionA.find(a => a.layer === selectedLayer);
-    if (!attention || !attention.weights) return;
-    
-    const margin = { top: 40, right: 40, bottom: 60, left: 60 };
-    const cellSize = 12;
-    const weights = attention.weights;
-    const numRows = weights.length;
-    const numCols = weights[0]?.length || 0;
-    
-    if (numRows === 0 || numCols === 0) return;
-    
-    const width = numCols * cellSize;
-    const height = numRows * cellSize;
-    
-    // Clear previous
-    d3.select(heatmapARef.current).selectAll("*").remove();
-    
-    const svg = d3.select(heatmapARef.current)
-      .attr("width", width + margin.left + margin.right)
-      .attr("height", height + margin.top + margin.bottom);
-    
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-    
-    // Color scale
-    const colorScale = d3.scaleSequential(d3.interpolateBlues)
-      .domain([0, attention.max_weight || 1]);
-    
-    // Draw cells
-    g.selectAll(".cell")
-      .data(weights.flatMap((row, i) => 
-        row.map((value, j) => ({ row: i, col: j, value }))
-      ))
-      .enter().append("rect")
-      .attr("class", "cell")
-      .attr("x", d => d.col * cellSize)
-      .attr("y", d => d.row * cellSize)
-      .attr("width", cellSize - 1)
-      .attr("height", cellSize - 1)
-      .attr("fill", d => colorScale(d.value))
-      .attr("stroke", "#1f2937")
-      .attr("stroke-width", 0.5);
-    
-    // Title
-    svg.append("text")
-      .attr("x", (width + margin.left + margin.right) / 2)
-      .attr("y", 20)
-      .attr("text-anchor", "middle")
-      .style("font-size", "14px")
-      .style("font-weight", "bold")
-      .style("fill", "#fff")
-      .text("Prompt A");
-  }, [comparison, selectedLayer]);
-
-  /**
-   * Render attention heatmap for Prompt B
-   */
-  useEffect(() => {
-    if (!comparison || !selectedLayer || !heatmapBRef.current) return;
-    
-    const attention = comparison.attentionB.find(a => a.layer === selectedLayer);
-    if (!attention || !attention.weights) return;
-    
-    const margin = { top: 40, right: 40, bottom: 60, left: 60 };
-    const cellSize = 12;
-    const weights = attention.weights;
-    const numRows = weights.length;
-    const numCols = weights[0]?.length || 0;
-    
-    if (numRows === 0 || numCols === 0) return;
-    
-    const width = numCols * cellSize;
-    const height = numRows * cellSize;
-    
-    // Clear previous
-    d3.select(heatmapBRef.current).selectAll("*").remove();
-    
-    const svg = d3.select(heatmapBRef.current)
-      .attr("width", width + margin.left + margin.right)
-      .attr("height", height + margin.top + margin.bottom);
-    
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-    
-    // Color scale
-    const colorScale = d3.scaleSequential(d3.interpolateBlues)
-      .domain([0, attention.max_weight || 1]);
-    
-    // Draw cells
-    g.selectAll(".cell")
-      .data(weights.flatMap((row, i) => 
-        row.map((value, j) => ({ row: i, col: j, value }))
-      ))
-      .enter().append("rect")
-      .attr("class", "cell")
-      .attr("x", d => d.col * cellSize)
-      .attr("y", d => d.row * cellSize)
-      .attr("width", cellSize - 1)
-      .attr("height", cellSize - 1)
-      .attr("fill", d => colorScale(d.value))
-      .attr("stroke", "#1f2937")
-      .attr("stroke-width", 0.5);
-    
-    // Title
-    svg.append("text")
-      .attr("x", (width + margin.left + margin.right) / 2)
-      .attr("y", 20)
-      .attr("text-anchor", "middle")
-      .style("font-size", "14px")
-      .style("font-weight", "bold")
-      .style("fill", "#fff")
-      .text("Prompt B");
-  }, [comparison, selectedLayer]);
-
-  /**
-   * Creates D3.js visualization of attention differences
-   * Uses diverging color scale (RdBu) to show increases/decreases
-   * KNOWN ISSUE: Title text may be cut off at top of visualization
-   */
-  useEffect(() => {
-    if (!comparison || !selectedLayer || !diffSvgRef.current) return;
-    
-    const attentionA = comparison.attentionA.find(a => a.layer === selectedLayer);
-    const attentionB = comparison.attentionB.find(a => a.layer === selectedLayer);
-    
-    if (!attentionA || !attentionB) return;
-    
-    const margin = { top: 130, right: 60, bottom: 40, left: 60 };
-    const cellSize = 18;
-    
-    // Calculate difference matrix
-    const diffMatrix: number[][] = [];
-    const minRows = Math.min(attentionA.weights.length, attentionB.weights.length);
-    const minCols = Math.min(attentionA.weights[0]?.length || 0, attentionB.weights[0]?.length || 0);
-    
-    for (let i = 0; i < minRows; i++) {
-      diffMatrix[i] = [];
-      for (let j = 0; j < minCols; j++) {
-        diffMatrix[i][j] = (attentionB.weights[i]?.[j] || 0) - (attentionA.weights[i]?.[j] || 0);
-      }
-    }
-    
-    const width = minCols * cellSize;
-    const height = minRows * cellSize;
-    
-    // Clear previous visualization
-    d3.select(diffSvgRef.current).selectAll("*").remove();
-    
-    const totalWidth = width + margin.left + margin.right;
-    const totalHeight = height + margin.top + margin.bottom;
-    
-    const svg = d3.select(diffSvgRef.current)
-      .attr("width", totalWidth)
-      .attr("height", totalHeight)
-      .attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`)
-      .style("display", "block");
-    
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
-    
-    // Create diverging color scale for differences
-    const maxDiff = Math.max(...diffMatrix.flat().map(Math.abs));
-    const colorScale = d3.scaleDiverging<string>()
-      .domain([-maxDiff, 0, maxDiff])
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .interpolator(d3.interpolateRdBu as any);
-    
-    // Create scales
-    const xScale = d3.scaleBand()
-      .domain(d3.range(minCols).map(String))
-      .range([0, width])
-      .padding(0.01);
-    
-    const yScale = d3.scaleBand()
-      .domain(d3.range(minRows).map(String))
-      .range([0, height])
-      .padding(0.01);
-    
-    // Create tooltip
-    const tooltip = d3.select("body").append("div")
-      .attr("class", "diff-tooltip")
-      .style("opacity", 0)
-      .style("position", "absolute")
-      .style("background", "rgba(0, 0, 0, 0.9)")
-      .style("color", "white")
-      .style("padding", "10px")
-      .style("border-radius", "6px")
-      .style("font-size", "12px")
-      .style("pointer-events", "none")
-      .style("z-index", "1000");
-    
-    // Draw cells
-    g.selectAll(".diff-cell")
-      .data(diffMatrix.flatMap((row, i) => 
-        row.map((value, j) => ({ row: i, col: j, value }))
-      ))
-      .enter().append("rect")
-      .attr("class", "diff-cell")
-      .attr("x", d => xScale(String(d.col))!)
-      .attr("y", d => yScale(String(d.row))!)
-      .attr("width", xScale.bandwidth())
-      .attr("height", yScale.bandwidth())
-      .attr("fill", d => colorScale(d.value))
-      .attr("stroke", "#1f2937")
-      .attr("stroke-width", 0.5)
-      .style("cursor", "pointer")
-      .on("mouseover", function(event, d) {
-        tooltip.transition().duration(200).style("opacity", .95);
-        
-        const change = d.value > 0 ? '+' : '';
-        const tokenFrom = attentionA.tokens?.[d.row] || `T${d.row}`;
-        const tokenTo = attentionA.tokens?.[d.col] || `T${d.col}`;
-        
-        tooltip.html(`
-          <div style="font-weight: bold; margin-bottom: 5px;">Attention Change</div>
-          <div>From: ${tokenFrom} → To: ${tokenTo}</div>
-          <div style="margin-top: 5px;">
-            <span>Prompt A: ${(attentionA.weights[d.row]?.[d.col] || 0).toFixed(4)}</span><br>
-            <span>Prompt B: ${(attentionB.weights[d.row]?.[d.col] || 0).toFixed(4)}</span><br>
-            <span style="color: ${d.value > 0 ? '#60a5fa' : '#f87171'}; font-weight: bold;">
-              Change: ${change}${d.value.toFixed(4)}
-            </span>
-          </div>
-        `)
-          .style("left", (event.pageX + 10) + "px")
-          .style("top", (event.pageY - 28) + "px");
-        
-        d3.select(this)
-          .attr("stroke", "#3b82f6")
-          .attr("stroke-width", 2);
-      })
-      .on("mouseout", function() {
-        tooltip.transition().duration(500).style("opacity", 0);
-        d3.select(this)
-          .attr("stroke", "#1f2937")
-          .attr("stroke-width", 0.5);
-      });
-    
-    // Add title  
-    svg.append("text")
-      .attr("x", totalWidth / 2)
-      .attr("y", 25)
-      .attr("text-anchor", "middle")
-      .style("font-size", "14px")
-      .style("font-weight", "bold")
-      .style("fill", "#fff")
-      .text(`Attention Difference - ${selectedLayer}`);
-    
-    // Add color legend
-    const legendWidth = 150;
-    const legendHeight = 15;
-    
-    const legendScale = d3.scaleLinear()
-      .domain([-maxDiff, maxDiff])
-      .range([0, legendWidth]);
-    
-    const legendAxis = d3.axisBottom(legendScale)
-      .ticks(5)
-      .tickFormat(d => (d as number).toFixed(2));
-    
-    const legend = svg.append("g")
-      .attr("transform", `translate(${(totalWidth - legendWidth) / 2}, ${50})`);
-    
-    // Create gradient for legend
-    const gradientId = `diff-gradient-${Date.now()}`;
-    const gradient = svg.append("defs")
-      .append("linearGradient")
-      .attr("id", gradientId)
-      .attr("x1", "0%")
-      .attr("x2", "100%");
-    
-    for (let i = 0; i <= 20; i++) {
-      const t = i / 20;
-      const value = -maxDiff + (2 * maxDiff * t);
-      gradient.append("stop")
-        .attr("offset", `${t * 100}%`)
-        .attr("stop-color", colorScale(value));
-    }
-    
-    legend.append("rect")
-      .attr("width", legendWidth)
-      .attr("height", legendHeight)
-      .style("fill", `url(#${gradientId})`);
-    
-    legend.append("g")
-      .attr("transform", `translate(0, ${legendHeight})`)
-      .call(legendAxis)
-      .selectAll("text")
-      .style("fill", "#9ca3af")
-      .style("font-size", "10px");
-    
-    legend.append("text")
-      .attr("x", legendWidth / 2)
-      .attr("y", -5)
-      .attr("text-anchor", "middle")
-      .style("font-size", "11px")
-      .style("fill", "#9ca3af")
-      .text("← Less Attention | More Attention →");
-    
-    // Cleanup
-    return () => {
-      tooltip.remove();
-    };
-  }, [comparison, selectedLayer]);
-
-  /**
-   * Calculates statistical metrics for attention comparison
-   * Returns average change, max increase/decrease, and entropy metrics
-   */
-  const calculateStats = () => {
-    if (!comparison || !selectedLayer) return null;
-    
-    const attentionA = comparison.attentionA.find(a => a.layer === selectedLayer);
-    const attentionB = comparison.attentionB.find(a => a.layer === selectedLayer);
-    
-    if (!attentionA || !attentionB) return null;
-    
-    // Calculate average attention change
-    let totalChange = 0;
-    let count = 0;
-    let maxIncrease = 0;
-    let maxDecrease = 0;
-    
-    const minRows = Math.min(attentionA.weights.length, attentionB.weights.length);
-    const minCols = Math.min(attentionA.weights[0]?.length || 0, attentionB.weights[0]?.length || 0);
-    
-    for (let i = 0; i < minRows; i++) {
-      for (let j = 0; j < minCols; j++) {
-        const diff = (attentionB.weights[i]?.[j] || 0) - (attentionA.weights[i]?.[j] || 0);
-        totalChange += Math.abs(diff);
-        count++;
-        if (diff > maxIncrease) maxIncrease = diff;
-        if (diff < maxDecrease) maxDecrease = diff;
-      }
-    }
-    
-    return {
-      avgChange: count > 0 ? totalChange / count : 0,
-      maxIncrease,
-      maxDecrease: Math.abs(maxDecrease),
-      entropyChangeA: attentionA.entropy || 0,
-      entropyChangeB: attentionB.entropy || 0
-    };
-  };
-
-  const stats = calculateStats();
-  const uniqueLayers = comparison ? 
-    Array.from(new Set(comparison.attentionA.map(a => a.layer))) : [];
-
-  // Generate contextual explanation for current visualization
-  const generateExplanation = () => {
-    if (!comparison) {
-      return {
-        title: "No Comparison Data",
-        description: "Enter two different prompts and analyze to see how attention patterns differ.",
-        details: []
-      };
-    }
-
-    const numLayers = uniqueLayers.length;
-    const hasRealModel = useRealModel;
-    const avgChange = stats?.avgChange ? (stats.avgChange * 100).toFixed(1) : "0";
-    const maxInc = stats?.maxIncrease ? (stats.maxIncrease * 100).toFixed(1) : "0";
-    const maxDec = stats?.maxDecrease ? (stats.maxDecrease * 100).toFixed(1) : "0";
-
-    return {
-      title: `Prompt Comparison: ${numLayers} layers analyzed`,
-      description: `Comparing attention patterns between two prompts to identify behavioral differences.`,
-      details: [
-        {
-          heading: "What is Prompt Diff?",
-          content: `This tool compares how the model's attention mechanism responds to different prompts. Three visualizations show: raw attention for each prompt (left/right) and the difference between them (center).`
-        },
-        {
-          heading: "Reading the Three Maps",
-          content: `Left: Attention patterns for Prompt A. Center: Difference map (blue = increased in B, red = decreased in B). Right: Attention patterns for Prompt B. Compare side panels to see the full context of changes.`
-        },
-        {
-          heading: "Current Analysis",
-          content: `Average attention change: ${avgChange}%. Maximum increase: +${maxInc}%. Maximum decrease: -${maxDec}%. ${hasRealModel ? 'Using real model for authentic patterns.' : 'Demo mode with simulated differences.'}`
-        },
-        {
-          heading: "Why Compare Prompts?",
-          content: `Different prompts can dramatically change model behavior. Adding words like 'detailed' or 'concise' shifts attention patterns. This visualization reveals these hidden changes.`
-        },
-        {
-          heading: "Entropy Changes",
-          content: `Entropy measures uncertainty in attention distribution. Higher entropy means more scattered attention, lower means more focused. Compare entropy values to see which prompt creates clearer attention patterns.`
-        },
-        {
-          heading: "Practical Applications",
-          content: `Use this to: Optimize prompts for better results, understand why certain prompts work better, debug unexpected model behavior, and design more effective prompt templates.`
-        }
-      ]
-    };
-  };
-
-  const explanation = generateExplanation();
-
-  // Export comparison
-  const exportComparison = () => {
-    if (!comparison) return;
-    
-    const dataStr = JSON.stringify(comparison, null, 2);
-    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
-    
-    const exportFileDefaultName = `prompt_diff_${Date.now()}.json`;
-    
-    const linkElement = document.createElement('a');
-    linkElement.setAttribute('href', dataUri);
-    linkElement.setAttribute('download', exportFileDefaultName);
-    linkElement.click();
-  };
-
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <GitCompare className="w-6 h-6 text-purple-400" />
-            Prompt Diff Analyzer
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Compare how different prompts affect attention patterns and model behavior
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-
-      {/* Prompt Input Section */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-        <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">
-            Prompt A
-          </label>
-          <textarea
-            value={prompt1}
-            onChange={(e) => setPrompt1(e.target.value)}
-            className="w-full h-32 px-4 py-2 bg-gray-800 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter first prompt..."
-          />
-        </div>
-        
-        <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">
-            Prompt B
-          </label>
-          <textarea
-            value={prompt2}
-            onChange={(e) => setPrompt2(e.target.value)}
-            className="w-full h-32 px-4 py-2 bg-gray-800 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter second prompt..."
-          />
-        </div>
-      </div>
-
-      {/* Mode Indicator */}
-      <div className="mb-4 p-3 bg-blue-900/20 border border-blue-700 rounded-lg">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-xs text-blue-400 font-semibold mb-1">
-              {useRealModel ? '🤖 Real Model Mode' : '📝 Demo Mode'}
-            </p>
-            <p className="text-xs text-gray-300">
-              {useRealModel 
-                ? 'Connected to CodeGPT model service - generating real attention patterns'
-                : 'Using simulated data - start prompt_service.py for real model'}
-            </p>
-          </div>
-          {useRealModel && (
-            <div className="flex items-center gap-2 px-3 py-1 bg-green-900/30 rounded-full">
-              <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-              <span className="text-xs text-green-400">Model Ready</span>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Action Buttons */}
-      <div className="flex gap-4 mb-6">
-        <button 
-          onClick={analyzePrompts}
-          disabled={isAnalyzing || !isConnected}
-          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-          data-analyze-button
-        >
-          {isAnalyzing ? (
-            <>
-              <Activity className="w-4 h-4 animate-spin" />
-              Analyzing...
-            </>
-          ) : (
-            <>
-              Analyze Difference
-              <ArrowRight className="w-4 h-4" />
-            </>
-          )}
-        </button>
-        
-        {comparison && (
-          <button
-            onClick={exportComparison}
-            className="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-2"
-          >
-            <Download className="w-4 h-4" />
-            Export
-          </button>
-        )}
-      </div>
-
-      {comparison && (
-        <>
-          {/* Layer Selector */}
-          <div className="flex items-center gap-4 mb-6">
-            <span className="text-gray-400">Layer:</span>
-            <div className="flex gap-2">
-              {uniqueLayers.map(layer => (
-                <button
-                  key={layer}
-                  onClick={() => setSelectedLayer(layer)}
-                  className={`px-3 py-1 text-sm rounded-lg transition-colors ${
-                    selectedLayer === layer
-                      ? 'bg-purple-600 text-white'
-                      : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                  }`}
-                >
-                  {layer}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Main Content Area with Side Panel */}
-          <div className="flex gap-4 mb-6">
-            {/* Difference Visualization */}
-            <div className="flex-1 min-w-0 transition-all duration-500 ease-in-out">
-              <div className="bg-gray-800 rounded-lg p-4 relative">
-                {/* Help Toggle Button */}
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="absolute top-4 right-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-                >
-                  {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-                  <span className="text-sm font-medium">
-                    {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-                  </span>
-                </button>
-                
-                <div className="w-full flex justify-center gap-4 overflow-x-auto">
-                  {/* Prompt A Heatmap */}
-                  <div className="flex flex-col items-center">
-                    <svg ref={heatmapARef}></svg>
-                  </div>
-                  
-                  {/* Difference Map */}
-                  <div className="flex flex-col items-center">
-                    <svg ref={diffSvgRef}></svg>
-                  </div>
-                  
-                  {/* Prompt B Heatmap */}
-                  <div className="flex flex-col items-center">
-                    <svg ref={heatmapBRef}></svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-            {/* Explanation Side Panel */}
-            <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-              <div className="w-96 h-[600px] bg-gray-900 rounded-lg border border-gray-700">
-                {/* Panel Header */}
-                <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-                  <div className="flex items-center gap-2">
-                    <Info className="w-5 h-5 text-blue-400" />
-                    <h3 className="text-lg font-semibold text-white">Understanding Prompt Diff</h3>
-                  </div>
-                </div>
-                
-                {/* Panel Content */}
-                <div className="px-4 py-4 overflow-y-auto h-[calc(600px-60px)]">
-                  {/* Main Description */}
-                  <div className="mb-4 p-3 bg-purple-900/20 border border-purple-800 rounded-lg">
-                    <h4 className="text-sm font-semibold text-purple-400 mb-1">{explanation.title}</h4>
-                    <p className="text-xs text-gray-300">{explanation.description}</p>
-                  </div>
-                  
-                  {/* Explanation Sections */}
-                  <div className="space-y-3">
-                    {explanation.details.map((section, idx) => (
-                      <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                        <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                          <Zap className="w-3 h-3 text-yellow-400" />
-                          {section.heading}
-                        </h5>
-                        <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                      </div>
-                    ))}
-                  </div>
-                  
-                  {/* Visual Guide */}
-                  <div className="mt-4 p-3 bg-blue-900/20 border border-blue-800 rounded-lg">
-                    <h4 className="font-medium text-sm text-blue-400 mb-2">Color Legend</h4>
-                    <div className="space-y-2 text-xs">
-                      <div className="flex items-start gap-2">
-                        <div className="w-3 h-3 bg-blue-500 rounded mt-0.5"></div>
-                        <span className="text-gray-300">Increased attention in Prompt B</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <div className="w-3 h-3 bg-red-500 rounded mt-0.5"></div>
-                        <span className="text-gray-300">Decreased attention in Prompt B</span>
-                      </div>
-                      <div className="flex items-start gap-2">
-                        <div className="w-3 h-3 bg-gray-500 rounded mt-0.5"></div>
-                        <span className="text-gray-300">Similar attention levels</span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  {/* Current Metrics */}
-                  {stats && (
-                    <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                      <h4 className="font-medium text-sm text-gray-300 mb-2">Current Metrics</h4>
-                      <div className="space-y-1 text-xs">
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Layer:</span>
-                          <span className="text-white">{selectedLayer || 'None'}</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Avg Change:</span>
-                          <span className="text-yellow-400">{(stats.avgChange * 100).toFixed(2)}%</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Max Increase:</span>
-                          <span className="text-green-400">+{(stats.maxIncrease * 100).toFixed(2)}%</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Max Decrease:</span>
-                          <span className="text-red-400">-{(stats.maxDecrease * 100).toFixed(2)}%</span>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                  
-                  {/* Tips */}
-                  <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                    <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Tips</h4>
-                    <ul className="text-xs text-gray-400 space-y-1">
-                      <li>• Try adding adjectives to see attention shifts</li>
-                      <li>• Compare with/without instructions</li>
-                      <li>• Test different prompt formats</li>
-                      <li>• Look for consistent patterns across layers</li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Generated Code (if using real model) */}
-          {useRealModel && (generatedTexts.a || generatedTexts.b) && (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-              {generatedTexts.a && (
-                <div className="bg-gray-800 rounded-lg p-4">
-                  <h4 className="text-sm font-semibold text-gray-300 mb-2">Generated Code A:</h4>
-                  <pre className="text-xs text-gray-400 font-mono overflow-x-auto">
-                    <code>{generatedTexts.a.substring(0, 200)}...</code>
-                  </pre>
-                </div>
-              )}
-              {generatedTexts.b && (
-                <div className="bg-gray-800 rounded-lg p-4">
-                  <h4 className="text-sm font-semibold text-gray-300 mb-2">Generated Code B:</h4>
-                  <pre className="text-xs text-gray-400 font-mono overflow-x-auto">
-                    <code>{generatedTexts.b.substring(0, 200)}...</code>
-                  </pre>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Statistics Panel */}
-          {stats && (
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-              <div className="bg-gray-800 rounded-lg p-4">
-                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                  <AlertTriangle className="w-5 h-5 text-yellow-500" />
-                  Attention Changes
-                </h3>
-                
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center p-2 bg-gray-900 rounded">
-                    <span className="text-sm text-gray-400">Average Change</span>
-                    <span className="text-sm font-mono text-yellow-400">
-                      {(stats.avgChange * 100).toFixed(2)}%
-                    </span>
-                  </div>
-                  
-                  <div className="flex justify-between items-center p-2 bg-gray-900 rounded">
-                    <span className="text-sm text-gray-400">Max Increase</span>
-                    <span className="text-sm font-mono text-green-400">
-                      +{(stats.maxIncrease * 100).toFixed(2)}%
-                    </span>
-                  </div>
-                  
-                  <div className="flex justify-between items-center p-2 bg-gray-900 rounded">
-                    <span className="text-sm text-gray-400">Max Decrease</span>
-                    <span className="text-sm font-mono text-red-400">
-                      -{(stats.maxDecrease * 100).toFixed(2)}%
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="bg-gray-800 rounded-lg p-4">
-                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                  <CheckCircle className="w-5 h-5 text-green-500" />
-                  Entropy Analysis
-                </h3>
-                
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center p-2 bg-gray-900 rounded">
-                    <span className="text-sm text-gray-400">Prompt A Entropy</span>
-                    <span className="text-sm font-mono">
-                      {stats.entropyChangeA.toFixed(3)}
-                    </span>
-                  </div>
-                  
-                  <div className="flex justify-between items-center p-2 bg-gray-900 rounded">
-                    <span className="text-sm text-gray-400">Prompt B Entropy</span>
-                    <span className="text-sm font-mono">
-                      {stats.entropyChangeB.toFixed(3)}
-                    </span>
-                  </div>
-                  
-                  <div className="flex justify-between items-center p-2 bg-gray-900 rounded">
-                    <span className="text-sm text-gray-400">Entropy Change</span>
-                    <span className={`text-sm font-mono ${
-                      stats.entropyChangeB > stats.entropyChangeA ? 'text-yellow-400' : 'text-green-400'
-                    }`}>
-                      {stats.entropyChangeB > stats.entropyChangeA ? <Plus className="w-3 h-3 inline" /> : <Minus className="w-3 h-3 inline" />}
-                      {Math.abs(stats.entropyChangeB - stats.entropyChangeA).toFixed(3)}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Saved Comparisons */}
-          {savedComparisons.length > 0 && (
-            <div className="bg-gray-800 rounded-lg p-4">
-              <h3 className="text-lg font-semibold mb-3">Recent Comparisons</h3>
-              <div className="space-y-2">
-                {savedComparisons.slice(-3).reverse().map((comp, idx) => (
-                  <div key={idx} className="flex items-center justify-between p-2 bg-gray-900 rounded">
-                    <div className="text-sm">
-                      <span className="text-gray-400">Compare {idx + 1}:</span>
-                      <span className="ml-2 text-xs text-gray-500">
-                        {new Date(comp.timestamp).toLocaleTimeString()}
-                      </span>
-                    </div>
-                    <button
-                      onClick={() => setComparison(comp)}
-                      className="text-xs px-2 py-1 bg-gray-700 rounded hover:bg-gray-600"
-                    >
-                      Load
-                    </button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </>
-      )}
-
-      {/* Empty State */}
-      {!comparison && (
-        <div className="bg-gray-800 rounded-lg p-8 text-center">
-          <GitCompare className="w-12 h-12 mx-auto mb-4 text-gray-600" />
-          <p className="text-gray-400 mb-2">No comparison yet</p>
-          <p className="text-sm text-gray-500 mb-4">
-            Enter two different prompts and click &quot;Analyze Difference&quot; to compare attention patterns
-          </p>
-          {traces.filter(t => t.type === 'attention').length === 0 && (
-            <div className="mt-4 p-3 bg-yellow-900/30 border border-yellow-700 rounded-lg text-left max-w-md mx-auto">
-              <p className="text-xs text-yellow-400 font-semibold mb-1">⚠️ No attention data available</p>
-              <p className="text-xs text-gray-300">
-                First, generate some traces by running:
-              </p>
-              <code className="block mt-1 text-xs bg-gray-900 px-2 py-1 rounded text-gray-300">
-                python python-sdk/working_demo.py
-              </code>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

frontend/TokenFlowVisualizer.tsx

@@ -1,960 +0,0 @@
-/**
- * Token Flow Visualizer Component
- * 
- * Visualizes how tokens flow through transformer layers,
- * showing attention paths and information propagation
- * 
- * @component
- */
-
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import * as d3 from "d3";
-import { getApiUrl, getWsUrl } from "@/lib/config";
-import { 
-  GitBranch, 
-  Activity, 
-  Layers, 
-  Play, 
-  Pause, 
-  RotateCcw,
-  ZoomIn,
-  ZoomOut,
-  Download,
-  Info,
-  HelpCircle,
-  X,
-  Zap,
-  RefreshCw
-} from "lucide-react";
-
-// Token data structure
-interface Token {
-  id: string;
-  text: string;
-  position: number;
-  embedding?: number[];
-}
-
-// Layer data structure
-interface LayerData {
-  layerIndex: number;
-  layerName: string;
-  tokens: TokenState[];
-  attention: number[][];
-  timestamp: number;
-}
-
-// Token state at a specific layer
-interface TokenState {
-  tokenId: string;
-  text: string;
-  position: number;
-  activation: number;
-  attention_received: number;
-  attention_given: number;
-  importance: number;
-}
-
-// Flow connection between tokens across layers
-interface FlowConnection {
-  source: { layer: number; token: number };
-  target: { layer: number; token: number };
-  strength: number;
-  type: 'attention' | 'residual' | 'feedforward';
-}
-
-export default function TokenFlowVisualizer() {
-  const [tokens, setTokens] = useState<Token[]>([]);
-  const [layers, setLayers] = useState<LayerData[]>([]);
-  const [flowConnections, setFlowConnections] = useState<FlowConnection[]>([]);
-  const [selectedToken, setSelectedToken] = useState<number | null>(null);
-  const [selectedLayer, setSelectedLayer] = useState<number | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [zoom, setZoom] = useState(1);
-  const [showResidual, setShowResidual] = useState(true);
-  const [showAttention, setShowAttention] = useState(true);
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
-  const [prompt, setPrompt] = useState("def fibonacci(n):\n    '''Calculate fibonacci number'''");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [traces, setTraces] = useState<Record<string, unknown>[]>([]);
-  
-  const svgRef = useRef<SVGSVGElement>(null);
-  const animationRef = useRef<number | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-
-  // Connect to WebSocket for real-time updates
-  useEffect(() => {
-    let mounted = true;
-    let reconnectTimeout: NodeJS.Timeout;
-    
-    const connectWS = () => {
-      if (!mounted) return;
-      
-      try {
-        const ws = new WebSocket(getWsUrl());
-        
-        ws.onopen = () => {
-          if (!mounted) return;
-          console.log('TokenFlow: WebSocket connected');
-          setIsConnected(true);
-        };
-        
-        ws.onmessage = (event) => {
-          if (!mounted) return;
-          
-          let data;
-          try {
-            data = JSON.parse(event.data);
-          } catch (e) {
-            // Skip non-JSON messages
-            return;
-          }
-          
-          // Collect traces for visualization
-          if (data.type === 'attention' || data.type === 'activation') {
-            setTraces(prev => [...prev, data]);
-          } else if (data.type === 'generated_token') {
-            // Handle token generation
-            setTokens(prev => {
-              const newToken: Token = {
-                id: `token_${prev.length}`,
-                text: data.token,
-                position: prev.length
-              };
-              return [...prev, newToken];
-            });
-          }
-        };
-        
-        ws.onerror = () => {
-          if (mounted) {
-            setIsConnected(false);
-          }
-        };
-        
-        ws.onclose = () => {
-          if (!mounted) return;
-          console.log('TokenFlow: WebSocket disconnected, will reconnect...');
-          setIsConnected(false);
-          reconnectTimeout = setTimeout(() => {
-            if (mounted) connectWS();
-          }, 3000);
-        };
-        
-        wsRef.current = ws;
-      } catch (error) {
-        console.log('WebSocket connection attempt failed, will retry...');
-        if (mounted) {
-          setIsConnected(false);
-          reconnectTimeout = setTimeout(() => {
-            if (mounted) connectWS();
-          }, 3000);
-        }
-      }
-    };
-    
-    connectWS();
-    
-    return () => {
-      mounted = false;
-      if (reconnectTimeout) {
-        clearTimeout(reconnectTimeout);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
-
-  // Listen for demo events from LocalControlPanel
-  useEffect(() => {
-    const handleDemoPromptSelected = (event: CustomEvent) => {
-      const { prompt, demoId } = event.detail;
-      console.log('TokenFlow: Demo prompt selected -', demoId);
-      
-      if (prompt) {
-        setPrompt(prompt);
-      }
-    };
-    
-    const handleDemoStarting = (event: CustomEvent) => {
-      const { demoId } = event.detail;
-      console.log('TokenFlow: Demo starting, clearing data -', demoId);
-      
-      // Clear all data when demo starts
-      setTokens([]);
-      setLayers([]);
-      setFlowConnections([]);
-      setTraces([]);
-      setSelectedToken(null);
-      setSelectedLayer(null);
-    };
-    
-    const handleDemoCompleted = (event: CustomEvent) => {
-      const data = event.detail;
-      console.log('TokenFlow: Demo completed', data);
-      
-      // Process the completed demo data
-      if (data && data.traces) {
-        setTraces(data.traces);
-      }
-    };
-    
-    window.addEventListener('demo-prompt-selected', handleDemoPromptSelected as EventListener);
-    window.addEventListener('demo-starting', handleDemoStarting as EventListener);
-    window.addEventListener('demo-completed', handleDemoCompleted as EventListener);
-    
-    return () => {
-      window.removeEventListener('demo-prompt-selected', handleDemoPromptSelected as EventListener);
-      window.removeEventListener('demo-starting', handleDemoStarting as EventListener);
-      window.removeEventListener('demo-completed', handleDemoCompleted as EventListener);
-    };
-  }, []);
-
-  // Process traces to extract token flow data
-  useEffect(() => {
-    const attentionTraces = traces.filter(t => t.type === 'attention' && t.weights);
-    const activationTraces = traces.filter(t => t.type === 'activation');
-    
-    console.log('[TokenFlow] Total traces:', traces.length);
-    console.log('[TokenFlow] Attention traces:', attentionTraces.length);
-    console.log('[TokenFlow] First attention trace:', attentionTraces[0]);
-    
-    if (attentionTraces.length > 0 || tokens.length > 0) {
-      // Use existing tokens if available (from streaming), otherwise extract from traces
-      if (tokens.length === 0) {
-        const traceWithTokens = attentionTraces.find(t => t.tokens);
-        if (traceWithTokens?.tokens && Array.isArray(traceWithTokens.tokens)) {
-          const extractedTokens: Token[] = (traceWithTokens.tokens as string[]).map((text: string, idx: number) => ({
-            id: `token_${idx}`,
-            text,
-            position: idx
-          }));
-          setTokens(extractedTokens);
-        }
-      }
-      
-      // Build layer data
-      const layerMap = new Map<string, Record<string, unknown>[]>();
-      attentionTraces.forEach(trace => {
-        const layer = String(trace.layer || 'unknown');
-        if (!layerMap.has(layer)) {
-          layerMap.set(layer, []);
-        }
-        layerMap.get(layer)?.push(trace);
-      });
-      
-      const layerDataArray: LayerData[] = Array.from(layerMap.entries())
-        .map(([layerName, traces], idx) => {
-          const latestTrace = traces[traces.length - 1];
-          const weights = (latestTrace.weights || []) as number[][];
-          
-          // Calculate token states for this layer
-          // Use the tokens we have collected (either from streaming or from traces)
-          const tokenTexts = tokens.length > 0 ? tokens.map(t => t.text) : ((latestTrace.tokens || []) as string[]);
-          const tokenStates: TokenState[] = tokenTexts.map((text: string, tokenIdx: number) => {
-            // Calculate attention received (sum of column)
-            const attention_received = weights.reduce((sum: number, row: number[]) => 
-              sum + (row[tokenIdx] || 0), 0
-            );
-            
-            // Calculate attention given (sum of row)
-            const attention_given = weights[tokenIdx]?.reduce((sum: number, val: number) => 
-              sum + val, 0
-            ) || 0;
-            
-            // Calculate importance as combination of received and given attention
-            const importance = (attention_received + attention_given) / 2;
-            
-            return {
-              tokenId: `token_${tokenIdx}`,
-              text,
-              position: tokenIdx,
-              activation: Math.random(), // Would come from activation traces
-              attention_received,
-              attention_given,
-              importance
-            };
-          });
-          
-          return {
-            layerIndex: idx,
-            layerName,
-            tokens: tokenStates,
-            attention: weights,
-            timestamp: (latestTrace.timestamp || Date.now()) as number
-          };
-        })
-        .sort((a, b) => {
-          // Extract layer numbers for proper numerical sorting
-          const aNum = parseInt(a.layerName.replace(/[^0-9]/g, '')) || 0;
-          const bNum = parseInt(b.layerName.replace(/[^0-9]/g, '')) || 0;
-          return aNum - bNum;
-        });
-      
-      setLayers(layerDataArray);
-      
-      // Generate flow connections
-      generateFlowConnections(layerDataArray);
-    }
-  }, [traces, tokens]);
-
-  // Generate flow connections between layers
-  const generateFlowConnections = (layerData: LayerData[]) => {
-    const connections: FlowConnection[] = [];
-    
-    for (let i = 0; i < layerData.length - 1; i++) {
-      const currentLayer = layerData[i];
-      const nextLayer = layerData[i + 1];
-      
-      // Add attention connections
-      if (currentLayer.attention && showAttention) {
-        currentLayer.attention.forEach((row, srcToken) => {
-          row.forEach((weight, tgtToken) => {
-            if (weight > 0.1) { // Threshold for visibility
-              connections.push({
-                source: { layer: i, token: srcToken },
-                target: { layer: i + 1, token: tgtToken },
-                strength: weight,
-                type: 'attention'
-              });
-            }
-          });
-        });
-      }
-      
-      // Add residual connections
-      if (showResidual) {
-        currentLayer.tokens.forEach((token, idx) => {
-          if (idx < nextLayer.tokens.length) {
-            connections.push({
-              source: { layer: i, token: idx },
-              target: { layer: i + 1, token: idx },
-              strength: 0.5,
-              type: 'residual'
-            });
-          }
-        });
-      }
-    }
-    
-    setFlowConnections(connections);
-  };
-
-  // D3 Visualization
-  useEffect(() => {
-    if (!svgRef.current || layers.length === 0) return;
-    
-    const margin = { top: 60, right: 200, bottom: 60, left: 100 };
-    const width = 1300;
-    const height = 600;
-    
-    // Clear previous visualization
-    d3.select(svgRef.current).selectAll("*").remove();
-    
-    const svg = d3.select(svgRef.current)
-      .attr("width", width)
-      .attr("height", height)
-      .attr("viewBox", `0 0 ${width} ${height}`);
-    
-    const g = svg.append("g")
-      .attr("transform", `translate(${margin.left},${margin.top}) scale(${zoom})`);
-    
-    // Calculate positions
-    const layerWidth = (width - margin.left - margin.right) / (layers.length || 1);
-    const tokenHeight = 40;
-    const tokenWidth = 80;
-    
-    // Create layer groups
-    const layerGroups = g.selectAll(".layer-group")
-      .data(layers)
-      .enter()
-      .append("g")
-      .attr("class", "layer-group")
-      .attr("transform", (d, i) => `translate(${i * layerWidth}, 0)`);
-    
-    // Add layer labels
-    layerGroups.append("text")
-      .attr("x", layerWidth / 2)
-      .attr("y", -20)
-      .attr("text-anchor", "middle")
-      .attr("fill", "#9ca3af")
-      .attr("font-size", "12px")
-      .attr("font-weight", "bold")
-      .text(d => d.layerName);
-    
-    // Function to get token position
-    const getTokenPosition = (layerIdx: number, tokenIdx: number) => {
-      const x = layerIdx * layerWidth + layerWidth / 2;
-      const y = tokenIdx * (tokenHeight + 10) + tokenHeight / 2;
-      return { x, y };
-    };
-    
-    // Draw flow connections
-    const connectionPaths = g.selectAll(".flow-connection")
-      .data(flowConnections)
-      .enter()
-      .append("path")
-      .attr("class", d => `flow-connection flow-${d.type}`)
-      .attr("d", d => {
-        const source = getTokenPosition(d.source.layer, d.source.token);
-        const target = getTokenPosition(d.target.layer, d.target.token);
-        
-        // Create curved path
-        const midX = (source.x + target.x) / 2;
-        return `M ${source.x} ${source.y} Q ${midX} ${source.y} ${midX} ${(source.y + target.y) / 2} T ${target.x} ${target.y}`;
-      })
-      .attr("stroke", d => {
-        if (d.type === 'attention') return "#3b82f6";
-        if (d.type === 'residual') return "#10b981";
-        return "#8b5cf6";
-      })
-      .attr("stroke-width", d => Math.max(0.5, d.strength * 3))
-      .attr("stroke-opacity", d => d.strength * 0.6)
-      .attr("fill", "none");
-    
-    // Add animation to connections if playing
-    if (isPlaying) {
-      connectionPaths
-        .attr("stroke-dasharray", "5,5")
-        .append("animate")
-        .attr("attributeName", "stroke-dashoffset")
-        .attr("from", "10")
-        .attr("to", "0")
-        .attr("dur", "1s")
-        .attr("repeatCount", "indefinite");
-    }
-    
-    // Draw tokens
-    const tokenGroups = layerGroups.selectAll(".token")
-      .data(d => d.tokens)
-      .enter()
-      .append("g")
-      .attr("class", "token-group")
-      .attr("transform", (d, i) => {
-        const pos = getTokenPosition(0, i);
-        return `translate(${layerWidth / 2 - tokenWidth / 2}, ${i * (tokenHeight + 10)})`;
-      });
-    
-    // Token rectangles
-    tokenGroups.append("rect")
-      .attr("width", tokenWidth)
-      .attr("height", tokenHeight)
-      .attr("rx", 6)
-      .attr("fill", d => {
-        const importance = d.importance || 0;
-        return d3.interpolateYlOrRd(importance);
-      })
-      .attr("stroke", d => selectedToken === d.position ? "#3b82f6" : "#4b5563")
-      .attr("stroke-width", d => selectedToken === d.position ? 2 : 1)
-      .style("cursor", "pointer")
-      .on("click", (event, d) => {
-        setSelectedToken(d.position === selectedToken ? null : d.position);
-      });
-    
-    // Token text
-    tokenGroups.append("text")
-      .attr("x", tokenWidth / 2)
-      .attr("y", tokenHeight / 2)
-      .attr("text-anchor", "middle")
-      .attr("dominant-baseline", "middle")
-      .attr("fill", d => d.importance > 0.5 ? "#fff" : "#1f2937")
-      .attr("font-size", "11px")
-      .attr("font-family", "monospace")
-      .attr("pointer-events", "none")
-      .text(d => d.text.substring(0, 8));
-    
-    // Add importance indicator
-    tokenGroups.append("circle")
-      .attr("cx", tokenWidth - 10)
-      .attr("cy", 10)
-      .attr("r", d => Math.max(2, d.importance * 6))
-      .attr("fill", "#fbbf24")
-      .attr("opacity", 0.8);
-    
-    // Add title
-    svg.append("text")
-      .attr("x", width / 2)
-      .attr("y", 30)
-      .attr("text-anchor", "middle")
-      .attr("font-size", "16px")
-      .attr("font-weight", "bold")
-      .attr("fill", "#fff")
-      .text("Token Flow Through Transformer Layers");
-    
-    // Add legend - positioned in the right margin area, clear of the visualization
-    // The visualization ends at width - margin.right (1100), legend goes in the margin
-    const legend = svg.append("g")
-      .attr("transform", `translate(${width - 180}, 100)`);
-    
-    const legendItems = [
-      { color: "#3b82f6", label: "Attention Flow", type: "attention" },
-      { color: "#10b981", label: "Residual Connection", type: "residual" },
-      { color: "#fbbf24", label: "Token Importance", type: "importance" }
-    ];
-    
-    legendItems.forEach((item, i) => {
-      const legendItem = legend.append("g")
-        .attr("transform", `translate(0, ${i * 25})`);
-      
-      if (item.type === "importance") {
-        legendItem.append("circle")
-          .attr("cx", 10)
-          .attr("cy", 10)
-          .attr("r", 6)
-          .attr("fill", item.color);
-      } else {
-        legendItem.append("line")
-          .attr("x1", 0)
-          .attr("y1", 10)
-          .attr("x2", 20)
-          .attr("y2", 10)
-          .attr("stroke", item.color)
-          .attr("stroke-width", 2);
-      }
-      
-      legendItem.append("text")
-        .attr("x", 30)
-        .attr("y", 10)
-        .attr("dominant-baseline", "middle")
-        .attr("fill", "#9ca3af")
-        .attr("font-size", "11px")
-        .text(item.label);
-    });
-    
-  }, [layers, flowConnections, selectedToken, zoom, isPlaying, showAttention, showResidual]);
-
-  // Animation control
-  const toggleAnimation = () => {
-    setIsPlaying(!isPlaying);
-    if (!isPlaying) {
-      animateFlow();
-    } else {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    }
-  };
-
-  const animateFlow = () => {
-    setCurrentStep(prev => (prev + 1) % (layers.length || 1));
-    animationRef.current = requestAnimationFrame(() => {
-      if (isPlaying) {
-        setTimeout(animateFlow, 1000);
-      }
-    });
-  };
-
-  const reset = () => {
-    setCurrentStep(0);
-    setSelectedToken(null);
-    setSelectedLayer(null);
-    setIsPlaying(false);
-  };
-
-  // Generate contextual explanation for current visualization
-  const generateExplanation = () => {
-    if (layers.length === 0) {
-      return {
-        title: "No Token Flow Data",
-        description: "Run a model to see how tokens flow through transformer layers.",
-        details: []
-      };
-    }
-
-    const numLayers = layers.length;
-    const numTokens = tokens.length;
-    const activeConnections = flowConnections.filter(c => c.strength > 0.1).length;
-    const totalConnections = flowConnections.length;
-    const connectionDensity = totalConnections > 0 ? ((activeConnections / totalConnections) * 100).toFixed(1) : "0";
-
-    return {
-      title: `Token Flow Analysis: ${numTokens} tokens, ${numLayers} layers`,
-      description: `Visualizing information flow through the transformer's attention mechanism.`,
-      details: [
-        {
-          heading: "What is Token Flow?",
-          content: `This visualization shows how tokens are processed through transformer layers in real-time. Each column represents a layer, each box is a token at that layer. The visualization builds progressively as tokens are generated.`
-        },
-        {
-          heading: "Reading the Flow",
-          content: `Tokens flow from left (layer 0, input) to right (final layer, output). Each column is a transformer layer processing all tokens. Color intensity (yellow→orange→red) shows token importance/activation strength.`
-        },
-        {
-          heading: "Real-time Generation",
-          content: `The visualization starts with one column and expands horizontally as new tokens are generated. You're watching the model build its understanding token by token, layer by layer.`
-        },
-        {
-          heading: "Current Network Stats",
-          content: `${numTokens} tokens × ${numLayers} layers = ${numTokens * numLayers} nodes. ${connectionDensity}% of possible connections are active (strength > 0.1). Blue lines show attention flow between tokens.`
-        },
-        {
-          heading: "Connection Types",
-          content: `Blue lines: Attention connections showing which tokens attend to which. Green lines: Residual connections (when enabled). Line thickness indicates connection strength.`
-        },
-        {
-          heading: "Color Meaning",
-          content: `Token color represents activation level: Light yellow (low activation), Orange (medium), Red (high activation). This shows which tokens are most important at each processing stage.`
-        }
-      ]
-    };
-  };
-
-  const explanation = generateExplanation();
-
-  // Export functionality
-  const exportVisualization = () => {
-    if (!svgRef.current) return;
-    
-    const svgData = new XMLSerializer().serializeToString(svgRef.current);
-    const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
-    const svgUrl = URL.createObjectURL(svgBlob);
-    
-    const link = document.createElement("a");
-    link.href = svgUrl;
-    link.download = `token_flow_${Date.now()}.svg`;
-    link.click();
-  };
-
-  return (
-    <div className="bg-gray-900 rounded-xl p-6">
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-2xl font-bold flex items-center gap-2">
-            <GitBranch className="w-6 h-6 text-purple-400" />
-            Token Flow Visualizer
-          </h2>
-          <p className="text-gray-400 mt-1">
-            Track how information flows through transformer layers
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className={`flex items-center gap-2 px-3 py-1 rounded-full ${
-            isConnected ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400'
-          }`}>
-            <Activity className={`w-4 h-4 ${isConnected ? 'animate-pulse' : ''}`} />
-            {isConnected ? 'Connected' : 'Disconnected'}
-          </div>
-        </div>
-      </div>
-
-      {/* Generation Controls */}
-      <div className="mb-6">
-        <div className="flex gap-4">
-          <input
-            type="text"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            className="flex-1 px-4 py-2 bg-gray-800 text-white rounded-lg border border-gray-700 focus:border-blue-500 focus:outline-none font-mono text-sm"
-            placeholder="Enter prompt to analyze token flow..."
-          />
-          <button
-            onClick={async () => {
-              setIsGenerating(true);
-              setTokens([]);
-              setLayers([]);
-              setFlowConnections([]);
-              setTraces([]);
-              
-              try {
-                const response = await fetch(`${getApiUrl()}/generate`, {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({
-                    prompt,
-                    max_tokens: 50,
-                    temperature: 0.7,
-                    extract_traces: true,
-                    sampling_rate: 0.3
-                  })
-                });
-                
-                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-                const data = await response.json();
-                
-                // Process the response
-                if (data.traces) {
-                  setTraces(data.traces);
-                }
-              } catch (error) {
-                console.error('Generation error:', error);
-                alert(`Failed to generate: ${error}`);
-              } finally {
-                setIsGenerating(false);
-              }
-            }}
-            disabled={isGenerating || !isConnected}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
-          >
-            {isGenerating ? (
-              <>
-                <RefreshCw className="w-4 h-4 animate-spin" />
-                Analyzing...
-              </>
-            ) : (
-              <>
-                Generate & Visualize
-                <Zap className="w-4 h-4" />
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Controls */}
-      <div className="flex flex-wrap items-center gap-4 mb-4">
-        {/* Playback Controls */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={toggleAnimation}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title={isPlaying ? "Pause" : "Play"}
-          >
-            {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
-          </button>
-          <button
-            onClick={reset}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title="Reset"
-          >
-            <RotateCcw className="w-4 h-4" />
-          </button>
-          <span className="text-sm text-gray-400 px-2">
-            Layer {currentStep + 1} / {layers.length || 1}
-          </span>
-        </div>
-
-        {/* View Options */}
-        <div className="flex items-center gap-2">
-          <label className="flex items-center gap-2 text-sm text-gray-400">
-            <input
-              type="checkbox"
-              checked={showAttention}
-              onChange={(e) => setShowAttention(e.target.checked)}
-              className="rounded"
-            />
-            Attention
-          </label>
-          <label className="flex items-center gap-2 text-sm text-gray-400">
-            <input
-              type="checkbox"
-              checked={showResidual}
-              onChange={(e) => setShowResidual(e.target.checked)}
-              className="rounded"
-            />
-            Residual
-          </label>
-        </div>
-
-        {/* Zoom Controls */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setZoom(Math.max(0.5, zoom - 0.1))}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title="Zoom Out"
-          >
-            <ZoomOut className="w-4 h-4" />
-          </button>
-          <span className="text-sm text-gray-400 min-w-[50px] text-center">
-            {(zoom * 100).toFixed(0)}%
-          </span>
-          <button
-            onClick={() => setZoom(Math.min(2, zoom + 0.1))}
-            className="p-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors"
-            title="Zoom In"
-          >
-            <ZoomIn className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Export */}
-        <button
-          onClick={exportVisualization}
-          className="ml-auto px-3 py-1.5 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center gap-2"
-        >
-          <Download className="w-4 h-4" />
-          Export
-        </button>
-      </div>
-
-      {/* Main Content Area with Side Panel */}
-      <div className="flex gap-4">
-        {/* Visualization Container */}
-        <div className="flex-1 min-w-0 transition-all duration-500 ease-in-out">
-          <div className="bg-gray-800 rounded-lg p-4 overflow-auto relative">
-            {/* Help Toggle Button */}
-            <button
-              onClick={() => setShowExplanation(!showExplanation)}
-              className="absolute top-4 right-4 z-10 p-2 bg-blue-600/90 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2 backdrop-blur"
-            >
-              {showExplanation ? <X className="w-5 h-5" /> : <HelpCircle className="w-5 h-5" />}
-              <span className="text-sm font-medium">
-                {showExplanation ? 'Hide Info' : 'What am I seeing?'}
-              </span>
-            </button>
-            
-            {layers.length > 0 ? (
-              <svg ref={svgRef}></svg>
-            ) : (
-              <div className="flex items-center justify-center h-96 text-gray-500">
-            <div className="text-center">
-              <GitBranch className="w-12 h-12 mx-auto mb-4 opacity-50" />
-              <p className="text-lg mb-2">No Token Flow Data</p>
-              <p className="text-sm">Run a model to visualize token flow through layers</p>
-            </div>
-          </div>
-        )}
-          </div>
-        </div>
-        
-        {/* Explanation Side Panel */}
-        <div className={`${showExplanation ? 'w-96' : 'w-0'} transition-all duration-500 ease-in-out overflow-hidden`}>
-          <div className="w-96 h-[600px] bg-gray-900 rounded-lg border border-gray-700">
-            {/* Panel Header */}
-            <div className="bg-gray-800 px-4 py-3 border-b border-gray-700">
-              <div className="flex items-center gap-2">
-                <Info className="w-5 h-5 text-blue-400" />
-                <h3 className="text-lg font-semibold text-white">Understanding Token Flow</h3>
-              </div>
-            </div>
-            
-            {/* Panel Content */}
-            <div className="px-4 py-4 overflow-y-auto h-[calc(600px-60px)]">
-              {/* Main Description */}
-              <div className="mb-4 p-3 bg-purple-900/20 border border-purple-800 rounded-lg">
-                <h4 className="text-sm font-semibold text-purple-400 mb-1">{explanation.title}</h4>
-                <p className="text-xs text-gray-300">{explanation.description}</p>
-              </div>
-              
-              {/* Explanation Sections */}
-              <div className="space-y-3">
-                {explanation.details.map((section, idx) => (
-                  <div key={idx} className="bg-gray-800 rounded-lg p-3">
-                    <h5 className="font-medium text-sm text-white mb-1 flex items-center gap-1">
-                      <Zap className="w-3 h-3 text-yellow-400" />
-                      {section.heading}
-                    </h5>
-                    <p className="text-xs text-gray-300 leading-relaxed">{section.content}</p>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Visual Guide */}
-              <div className="mt-4 p-3 bg-blue-900/20 border border-blue-800 rounded-lg">
-                <h4 className="font-medium text-sm text-blue-400 mb-2">Visual Elements</h4>
-                <div className="space-y-2 text-xs">
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Nodes = Tokens at each layer</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Lines = Attention connections</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Thickness = Connection strength</span>
-                  </div>
-                  <div className="flex items-start gap-2">
-                    <span className="text-blue-300">•</span>
-                    <span className="text-gray-300">Color intensity = Token importance</span>
-                  </div>
-                </div>
-              </div>
-              
-              {/* Current Metrics */}
-              {layers.length > 0 && (
-                <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                  <h4 className="font-medium text-sm text-gray-300 mb-2">Current Metrics</h4>
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Tokens:</span>
-                      <span className="text-white">{tokens.length}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Layers:</span>
-                      <span className="text-white">{layers.length}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Total Nodes:</span>
-                      <span className="text-white">{tokens.length * layers.length}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Active Connections:</span>
-                      <span className="text-blue-400">{flowConnections.filter(c => c.strength > 0.1).length}</span>
-                    </div>
-                  </div>
-                </div>
-              )}
-              
-              {/* Tips */}
-              <div className="mt-4 p-3 bg-gray-800 rounded-lg">
-                <h4 className="font-medium text-sm text-gray-300 mb-2">💡 Tips</h4>
-                <ul className="text-xs text-gray-400 space-y-1">
-                  <li>• Click tokens to trace their path</li>
-                  <li>• Use animation to see flow evolution</li>
-                  <li>• Zoom for different perspectives</li>
-                  <li>• Toggle connection types with controls</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Info Panel */}
-      {selectedToken !== null && tokens[selectedToken] && (
-        <div className="mt-4 p-4 bg-gray-800 rounded-lg">
-          <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
-            <Info className="w-5 h-5 text-blue-400" />
-            Selected Token: &quot;{tokens[selectedToken].text}&quot;
-          </h3>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-            <div>
-              <span className="text-gray-400">Position:</span>
-              <div className="font-mono text-white mt-1">{selectedToken}</div>
-            </div>
-            <div>
-              <span className="text-gray-400">Layers Processed:</span>
-              <div className="font-mono text-white mt-1">{layers.length}</div>
-            </div>
-            <div>
-              <span className="text-gray-400">Connections:</span>
-              <div className="font-mono text-white mt-1">
-                {flowConnections.filter(c => 
-                  c.source.token === selectedToken || c.target.token === selectedToken
-                ).length}
-              </div>
-            </div>
-            <div>
-              <span className="text-gray-400">Max Importance:</span>
-              <div className="font-mono text-blue-400 mt-1">
-                {Math.max(...layers.map(l => 
-                  l.tokens[selectedToken]?.importance || 0
-                )).toFixed(3)}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Instructions */}
-      {layers.length === 0 && (
-        <div className="mt-4 p-4 bg-yellow-900/20 border border-yellow-700 rounded-lg">
-          <h4 className="text-yellow-400 font-semibold mb-2">How to Use</h4>
-          <ol className="text-sm text-gray-300 space-y-1 list-decimal list-inside">
-            <li>Run a model to generate attention traces</li>
-            <li>Token flow will automatically visualize</li>
-            <li>Click tokens to see their flow details</li>
-            <li>Use controls to animate the flow</li>
-          </ol>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/WebSocketTest.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-
-export default function WebSocketTest() {
-  const [isConnected, setIsConnected] = useState(false);
-  const [messages, setMessages] = useState<string[]>([]);
-  const [mounted, setMounted] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
-  
-  // Ensure we're mounted on client before connecting
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  
-  useEffect(() => {
-    // Only connect after component is mounted on client
-    if (!mounted) return;
-    
-    // Try connecting to test server on port 8770
-    try {
-      const ws = new WebSocket('ws://localhost:8770');
-      
-      ws.onopen = () => {
-        console.log('Test WebSocket connected!');
-        setIsConnected(true);
-        wsRef.current = ws;
-        
-        // Send test message
-        ws.send(JSON.stringify({ type: 'test', message: 'Hello from client!' }));
-      };
-      
-      ws.onmessage = (event) => {
-        console.log('Test WebSocket received:', event.data);
-        setMessages(prev => [...prev, event.data]);
-      };
-      
-      ws.onerror = (error) => {
-        console.error('Test WebSocket error:', error);
-        setIsConnected(false);
-      };
-      
-      ws.onclose = () => {
-        console.log('Test WebSocket closed');
-        setIsConnected(false);
-      };
-    } catch (error) {
-      console.error('Failed to create WebSocket:', error);
-    }
-    
-    return () => {
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, [mounted]);
-  
-  // Don't render WebSocket status until mounted to avoid hydration issues
-  if (!mounted) {
-    return (
-      <div className="p-4 bg-gray-800 rounded">
-        <h3 className="text-white mb-2">WebSocket Test</h3>
-        <div className="text-sm text-gray-400">
-          Status: Loading...
-        </div>
-      </div>
-    );
-  }
-  
-  return (
-    <div className="p-4 bg-gray-800 rounded">
-      <h3 className="text-white mb-2">WebSocket Test</h3>
-      <div className={`text-sm ${isConnected ? 'text-green-400' : 'text-red-400'}`}>
-        Status: {isConnected ? 'Connected' : 'Disconnected'}
-      </div>
-      <div className="mt-2 text-xs text-gray-400">
-        Messages: {messages.length}
-      </div>
-    </div>
-  );
-}

frontend/config-with-auth.ts

@@ -1,53 +0,0 @@
-// Configuration with authentication support for private HF Spaces
-
-export function getApiUrl(): string {
-  // Check for explicit URL first
-  if (process.env.NEXT_PUBLIC_API_URL) {
-    return process.env.NEXT_PUBLIC_API_URL;
-  }
-  
-  // Default for local development
-  if (typeof window === 'undefined') {
-    return 'http://localhost:8000';
-  }
-  
-  // Auto-detect based on current location
-  const currentHost = window.location.hostname;
-  
-  if (currentHost === 'localhost' || currentHost === '127.0.0.1') {
-    return 'http://localhost:8000';
-  }
-  
-  // For production, use the backend URL
-  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-}
-
-export function getAuthHeaders(): HeadersInit {
-  const headers: HeadersInit = {
-    'Content-Type': 'application/json',
-  };
-  
-  // Add HF token if available (for private spaces)
-  if (process.env.NEXT_PUBLIC_HF_TOKEN) {
-    headers['Authorization'] = `Bearer ${process.env.NEXT_PUBLIC_HF_TOKEN}`;
-  }
-  
-  // Add custom API key if configured
-  if (process.env.NEXT_PUBLIC_API_KEY) {
-    headers['X-API-Key'] = process.env.NEXT_PUBLIC_API_KEY;
-  }
-  
-  return headers;
-}
-
-export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
-  const authHeaders = getAuthHeaders();
-  
-  return fetch(url, {
-    ...options,
-    headers: {
-      ...authHeaders,
-      ...options.headers,
-    },
-  });
-}

frontend/config.ts

@@ -1,95 +0,0 @@
-/**
- * Centralized configuration for dynamic backend URL detection
- * Automatically detects environment and uses appropriate backend URLs
- */
-
-/**
- * Get the API URL based on environment
- * Priority:
- * 1. Explicit environment variable (NEXT_PUBLIC_API_URL)
- * 2. Auto-detect based on browser location
- * 3. Default to localhost for development
- */
-export function getApiUrl(): string {
-  // If explicitly set via environment variable, use it
-  if (process.env.NEXT_PUBLIC_API_URL) {
-    return process.env.NEXT_PUBLIC_API_URL;
-  }
-  
-  // In browser environment
-  if (typeof window !== 'undefined') {
-    // Local development
-    if (window.location.hostname === 'localhost' || 
-        window.location.hostname === '127.0.0.1') {
-      return 'http://localhost:8000';
-    }
-    
-    // Production: assume backend is on same domain with /api prefix
-    // This works for Vercel with API routes or proxied backend
-    const protocol = window.location.protocol;
-    const host = window.location.host;
-    return `${protocol}//${host}/api`;
-  }
-  
-  // Server-side rendering or build time: default to localhost
-  // This will be overridden by client-side detection
-  return 'http://localhost:8000';
-}
-
-/**
- * Get the WebSocket URL based on the API URL
- * Converts http:// to ws:// and https:// to wss://
- */
-export function getWsUrl(): string {
-  const apiUrl = getApiUrl();
-  
-  // Handle the /api suffix for production deployments
-  const baseUrl = apiUrl.endsWith('/api') 
-    ? apiUrl.slice(0, -4) // Remove /api suffix for WebSocket
-    : apiUrl;
-  
-  // Convert protocol and add WebSocket path
-  const wsUrl = baseUrl
-    .replace('http://', 'ws://')
-    .replace('https://', 'wss://');
-  
-  return `${wsUrl}/ws`;
-}
-
-/**
- * Check if we're in local development mode
- */
-export function isLocalDevelopment(): boolean {
-  if (typeof window === 'undefined') {
-    return process.env.NODE_ENV === 'development';
-  }
-  
-  return window.location.hostname === 'localhost' || 
-         window.location.hostname === '127.0.0.1';
-}
-
-/**
- * Get the old WebSocket URL (for backward compatibility)
- * This is for the old trace monitoring WebSocket that some components might still use
- */
-export function getLegacyWsUrl(): string {
-  // If explicitly set via environment variable, use it
-  if (process.env.NEXT_PUBLIC_WS_URL) {
-    return process.env.NEXT_PUBLIC_WS_URL;
-  }
-  
-  // Default to the old port for backward compatibility
-  return 'ws://localhost:8765';
-}
-
-/**
- * Configuration object with all URLs
- */
-export const config = {
-  get apiUrl() { return getApiUrl(); },
-  get wsUrl() { return getWsUrl(); },
-  get legacyWsUrl() { return getLegacyWsUrl(); },
-  get isLocal() { return isLocalDevelopment(); }
-};
-
-export default config;

frontend/globals.css

@@ -1,68 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-slideIn {
-  animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideInFromRight {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes expandFromRight {
-  from {
-    width: 0;
-    opacity: 0;
-  }
-  to {
-    width: 24rem;
-    opacity: 1;
-  }
-}
-
-.animate-slide-in {
-  animation: expandFromRight 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
-  overflow: hidden;
-}

frontend/layout.tsx

@@ -1,36 +0,0 @@
-import type { Metadata } from "next";
-import { Inter, JetBrains_Mono } from "next/font/google";
-import "./globals.css";
-import { LocalControlPanel } from "@/components/LocalControlPanel";
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const jetbrainsMono = JetBrains_Mono({
-  variable: "--font-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Visualisable.ai - Glass Box LLM Code Generation",
-  description: "Transform opaque LLM code generation into transparent, interpretable visualizations for software engineers",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-gray-950 text-gray-100`}
-      >
-        {children}
-        <LocalControlPanel />
-      </body>
-    </html>
-  );
-}

frontend/next.config.ts

@@ -1,10 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: 'standalone',
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-};
-
-export default nextConfig;

frontend/package.json

@@ -1,45 +0,0 @@
-{
-  "name": "visualisable-ai",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "docker:build": "docker-compose -f docker-compose.dev.yml build",
-    "docker:up": "docker-compose -f docker-compose.dev.yml up",
-    "docker:down": "docker-compose -f docker-compose.dev.yml down",
-    "docker:logs": "docker-compose -f docker-compose.dev.yml logs -f",
-    "docker:clean": "docker-compose -f docker-compose.dev.yml down -v --remove-orphans"
-  },
-  "dependencies": {
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@react-three/drei": "^10.6.1",
-    "@react-three/fiber": "^9.3.0",
-    "@types/d3": "^7.4.3",
-    "@types/ws": "^8.18.1",
-    "d3": "^7.9.0",
-    "framer-motion": "^12.23.12",
-    "lucide-react": "^0.539.0",
-    "next": "15.4.6",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "recharts": "^3.1.2",
-    "socket.io-client": "^4.8.1",
-    "three": "^0.179.1",
-    "ws": "^8.18.3"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.4.6",
-    "tailwindcss": "^4",
-    "typescript": "^5"
-  }
-}

frontend/page.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Hero from "@/components/Hero";
-import AttentionExplorer from "@/components/AttentionExplorer";
-import PromptDiff from "@/components/PromptDiff";
-import ConfidenceMeter from "@/components/ConfidenceMeter";
-import TokenFlowVisualizer from "@/components/TokenFlowVisualizer";
-import CodeGenerationTracker from "@/components/CodeGenerationTracker";
-import ModelInspector from "@/components/ModelInspector";
-import Navigation from "@/components/Navigation";
-// import WebSocketTest from "@/components/WebSocketTest"; // Removed - test component
-import ClientOnly from "@/components/ClientOnly";
-
-export default function Home() {
-  const [activeView, setActiveView] = useState<"explorer" | "diff" | "confidence" | "flow" | "generation" | "inspector">("explorer");
-
-  // Dispatch event when view changes
-  useEffect(() => {
-    window.dispatchEvent(new CustomEvent('viewChanged', { detail: { view: activeView } }));
-  }, [activeView]);
-
-  return (
-    <div className="min-h-screen">
-      <Navigation />
-      <Hero />
-      
-      <main className="container mx-auto px-4 py-8">
-        <div className="flex justify-center gap-4 mb-8">
-          <button
-            onClick={() => setActiveView("explorer")}
-            className={`px-6 py-3 rounded-lg font-medium transition-all ${
-              activeView === "explorer"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
-            }`}
-          >
-            Attention Explorer
-          </button>
-          <button
-            onClick={() => setActiveView("diff")}
-            className={`px-6 py-3 rounded-lg font-medium transition-all ${
-              activeView === "diff"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
-            }`}
-          >
-            Prompt Diff
-          </button>
-          <button
-            onClick={() => setActiveView("confidence")}
-            className={`px-6 py-3 rounded-lg font-medium transition-all ${
-              activeView === "confidence"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
-            }`}
-          >
-            Confidence Meter
-          </button>
-          <button
-            onClick={() => setActiveView("flow")}
-            className={`px-6 py-3 rounded-lg font-medium transition-all ${
-              activeView === "flow"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
-            }`}
-          >
-            Token Flow
-          </button>
-          <button
-            onClick={() => setActiveView("generation")}
-            className={`px-6 py-3 rounded-lg font-medium transition-all ${
-              activeView === "generation"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
-            }`}
-          >
-            Generation
-          </button>
-          <button
-            onClick={() => setActiveView("inspector")}
-            className={`px-6 py-3 rounded-lg font-medium transition-all ${
-              activeView === "inspector"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
-            }`}
-          >
-            Model Inspector
-          </button>
-        </div>
-
-        <div className="bg-gray-900 rounded-xl p-6 min-h-[600px]">
-          {activeView === "explorer" && <AttentionExplorer />}
-          {activeView === "diff" && <PromptDiff />}
-          {activeView === "confidence" && <ConfidenceMeter />}
-          {activeView === "flow" && <TokenFlowVisualizer />}
-          {activeView === "generation" && <CodeGenerationTracker />}
-          {activeView === "inspector" && <ModelInspector />}
-        </div>
-      </main>
-    </div>
-  );
-}

frontend/postcss.config.mjs

@@ -1,5 +0,0 @@
-const config = {
-  plugins: ["@tailwindcss/postcss"],
-};
-
-export default config;

frontend/prompt-service-client.ts

@@ -1,201 +0,0 @@
-/**
- * Prompt Service Client
- * Handles communication with the Python prompt service for real model generation
- */
-
-export interface PromptComparisonRequest {
-  type: 'prompt_comparison';
-  prompt_a: string;
-  prompt_b: string;
-}
-
-export interface SinglePromptRequest {
-  type: 'single_prompt';
-  prompt: string;
-  prompt_id?: string;
-  max_tokens?: number;
-  temperature?: number;
-}
-
-export interface AttentionTrace {
-  type: 'attention';
-  layer: string;
-  weights: number[][];
-  max_weight: number;
-  entropy?: number;
-  prompt_id: string;
-  comparison_group?: 'prompt_a' | 'prompt_b';
-  timestamp: number;
-}
-
-export interface ComparisonSummary {
-  type: 'prompt_comparison';
-  prompt_a: {
-    id: string;
-    text: string;
-    generated: string;
-    num_traces: number;
-  };
-  prompt_b: {
-    id: string;
-    text: string;
-    generated: string;
-    num_traces: number;
-  };
-  timestamp: number;
-}
-
-export class PromptServiceClient {
-  private ws: WebSocket | null = null;
-  private readonly url: string;
-  private messageHandlers: Map<string, (data: Record<string, unknown>) => void> = new Map();
-  private connectionPromise: Promise<void> | null = null;
-
-  constructor(url: string = 'ws://localhost:8767') {
-    this.url = url;
-  }
-
-  /**
-   * Connect to the prompt service
-   */
-  async connect(): Promise<void> {
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      return;
-    }
-
-    if (this.connectionPromise) {
-      return this.connectionPromise;
-    }
-
-    this.connectionPromise = new Promise((resolve, reject) => {
-      const timeout = setTimeout(() => {
-        if (this.ws?.readyState !== WebSocket.OPEN) {
-          console.log('⏱️ Connection timeout - using demo mode');
-          this.ws?.close();
-          reject(new Error('Connection timeout'));
-        }
-      }, 3000); // 3 second timeout
-
-      try {
-        this.ws = new WebSocket(this.url);
-
-        this.ws.onopen = () => {
-          clearTimeout(timeout);
-          console.log('✅ Connected to prompt service');
-          resolve();
-        };
-
-        this.ws.onerror = (error) => {
-          clearTimeout(timeout);
-          console.log('⚠️ Prompt service not available - will use demo mode');
-          reject(new Error('Prompt service not available'));
-        };
-
-        this.ws.onclose = () => {
-          console.log('🔌 Disconnected from prompt service');
-          this.ws = null;
-          this.connectionPromise = null;
-        };
-
-        this.ws.onmessage = (event) => {
-          try {
-            const data = JSON.parse(event.data);
-            this.handleMessage(data);
-          } catch (error) {
-            console.error('Error parsing message:', error);
-          }
-        };
-      } catch (error) {
-        reject(error);
-      }
-    });
-
-    return this.connectionPromise;
-  }
-
-  /**
-   * Handle incoming messages from the prompt service
-   */
-  private handleMessage(data: Record<string, unknown>) {
-    // Notify all registered handlers
-    this.messageHandlers.forEach((handler) => {
-      handler(data);
-    });
-  }
-
-  /**
-   * Register a message handler
-   */
-  onMessage(id: string, handler: (data: Record<string, unknown>) => void) {
-    this.messageHandlers.set(id, handler);
-  }
-
-  /**
-   * Unregister a message handler
-   */
-  offMessage(id: string) {
-    this.messageHandlers.delete(id);
-  }
-
-  /**
-   * Request prompt comparison from the service
-   */
-  async comparePrompts(promptA: string, promptB: string): Promise<void> {
-    await this.connect();
-
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-      throw new Error('Not connected to prompt service');
-    }
-
-    const request: PromptComparisonRequest = {
-      type: 'prompt_comparison',
-      prompt_a: promptA,
-      prompt_b: promptB
-    };
-
-    this.ws.send(JSON.stringify(request));
-  }
-
-  /**
-   * Generate for a single prompt
-   */
-  async generateSingle(
-    prompt: string,
-    options?: {
-      prompt_id?: string;
-      max_tokens?: number;
-      temperature?: number;
-    }
-  ): Promise<void> {
-    await this.connect();
-
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-      throw new Error('Not connected to prompt service');
-    }
-
-    const request: SinglePromptRequest = {
-      type: 'single_prompt',
-      prompt,
-      ...options
-    };
-
-    this.ws.send(JSON.stringify(request));
-  }
-
-  /**
-   * Disconnect from the service
-   */
-  disconnect() {
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
-    }
-  }
-
-  /**
-   * Check if connected
-   */
-  isConnected(): boolean {
-    return this.ws?.readyState === WebSocket.OPEN;
-  }
-}

frontend/tailwind.config.ts

@@ -1,25 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ["var(--font-inter)"],
-        mono: ["var(--font-mono)"],
-      },
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-      animation: {
-        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;

frontend/trace-buffer.ts

@@ -1,249 +0,0 @@
-import { TraceData } from './types';
-
-export type PlaybackMode = 'live' | 'paused' | 'slow' | 'fast' | 'catchup';
-
-export interface BufferState {
-  mode: PlaybackMode;
-  speed: number; // Multiplier: 0.25, 0.5, 1, 2, 4
-  bufferSize: number;
-  currentSize: number;
-  writePosition: number;
-  readPosition: number;
-  droppedCount: number;
-  isPaused: boolean;
-}
-
-export interface TraceBufferConfig {
-  maxSize?: number;
-  updateInterval?: number;
-  batchSize?: number;
-}
-
-type BufferListener = (traces: TraceData[], state: BufferState) => void;
-
-export class TraceBuffer {
-  private buffer: (TraceData | null)[];
-  private maxSize: number;
-  private writePos: number = 0;
-  private readPos: number = 0;
-  private currentSize: number = 0;
-  private droppedCount: number = 0;
-  
-  private mode: PlaybackMode = 'live';
-  private speed: number = 1;
-  private isPaused: boolean = false;
-  
-  private listeners: Set<BufferListener> = new Set();
-  private updateTimer: NodeJS.Timeout | null = null;
-  private updateInterval: number;
-  private batchSize: number;
-  
-  private pendingTraces: TraceData[] = [];
-  private lastUpdateTime: number = 0;
-  private targetFPS: number = 60;
-  
-  constructor(config: TraceBufferConfig = {}) {
-    this.maxSize = config.maxSize || 10000;
-    this.updateInterval = config.updateInterval || 16; // ~60fps
-    this.batchSize = config.batchSize || 10;
-    this.buffer = new Array(this.maxSize).fill(null);
-    
-    this.startUpdateLoop();
-  }
-  
-  private startUpdateLoop(): void {
-    const update = () => {
-      const now = Date.now();
-      const deltaTime = now - this.lastUpdateTime;
-      
-      if (!this.isPaused && this.pendingTraces.length > 0) {
-        const effectiveInterval = this.updateInterval / this.speed;
-        
-        if (deltaTime >= effectiveInterval) {
-          this.processPendingTraces();
-          this.lastUpdateTime = now;
-        }
-      }
-      
-      this.updateTimer = setTimeout(update, Math.max(1, this.updateInterval));
-    };
-    
-    update();
-  }
-  
-  private processPendingTraces(): void {
-    if (this.pendingTraces.length === 0) return;
-    
-    let tracesToProcess: TraceData[];
-    
-    switch (this.mode) {
-      case 'live':
-        // Process in real-time batches
-        tracesToProcess = this.pendingTraces.splice(0, this.batchSize);
-        break;
-        
-      case 'slow':
-        // Process one at a time for slow motion
-        tracesToProcess = this.pendingTraces.splice(0, 1);
-        break;
-        
-      case 'fast':
-        // Process larger batches for fast forward
-        tracesToProcess = this.pendingTraces.splice(0, this.batchSize * 4);
-        break;
-        
-      case 'catchup':
-        // Process all pending to catch up
-        tracesToProcess = this.pendingTraces.splice(0, this.pendingTraces.length);
-        this.mode = 'live'; // Return to live after catching up
-        break;
-        
-      default:
-        tracesToProcess = [];
-    }
-    
-    if (tracesToProcess.length > 0) {
-      this.notifyListeners(tracesToProcess);
-    }
-  }
-  
-  public push(trace: TraceData): void {
-    // Add to ring buffer
-    if (this.currentSize >= this.maxSize) {
-      // Buffer is full, overwrite oldest
-      this.droppedCount++;
-    } else {
-      this.currentSize++;
-    }
-    
-    this.buffer[this.writePos] = trace;
-    this.writePos = (this.writePos + 1) % this.maxSize;
-    
-    // Add to pending traces for processing
-    if (!this.isPaused) {
-      this.pendingTraces.push(trace);
-    }
-  }
-  
-  public setMode(mode: PlaybackMode): void {
-    this.mode = mode;
-    
-    switch (mode) {
-      case 'paused':
-        this.isPaused = true;
-        break;
-        
-      case 'catchup':
-        this.isPaused = false;
-        // Will process all pending traces
-        break;
-        
-      default:
-        this.isPaused = false;
-    }
-  }
-  
-  public setSpeed(speed: number): void {
-    this.speed = Math.max(0.25, Math.min(4, speed));
-  }
-  
-  public pause(): void {
-    this.isPaused = true;
-    this.mode = 'paused';
-  }
-  
-  public resume(): void {
-    this.isPaused = false;
-    this.mode = 'live';
-  }
-  
-  public clear(): void {
-    this.buffer.fill(null);
-    this.writePos = 0;
-    this.readPos = 0;
-    this.currentSize = 0;
-    this.droppedCount = 0;
-    this.pendingTraces = [];
-    this.notifyListeners([]);
-  }
-  
-  public getState(): BufferState {
-    return {
-      mode: this.mode,
-      speed: this.speed,
-      bufferSize: this.maxSize,
-      currentSize: this.currentSize,
-      writePosition: this.writePos,
-      readPosition: this.readPos,
-      droppedCount: this.droppedCount,
-      isPaused: this.isPaused,
-    };
-  }
-  
-  public getRecentTraces(count: number = 100): TraceData[] {
-    const traces: TraceData[] = [];
-    let pos = (this.writePos - 1 + this.maxSize) % this.maxSize;
-    let collected = 0;
-    
-    while (collected < count && collected < this.currentSize) {
-      const trace = this.buffer[pos];
-      if (trace) {
-        traces.unshift(trace);
-        collected++;
-      }
-      pos = (pos - 1 + this.maxSize) % this.maxSize;
-    }
-    
-    return traces;
-  }
-  
-  public subscribe(listener: BufferListener): () => void {
-    this.listeners.add(listener);
-    
-    // Send current state immediately
-    listener(this.getRecentTraces(), this.getState());
-    
-    // Return unsubscribe function
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  
-  private notifyListeners(newTraces: TraceData[]): void {
-    const state = this.getState();
-    this.listeners.forEach(listener => {
-      try {
-        listener(newTraces, state);
-      } catch (error) {
-        console.error('Error in buffer listener:', error);
-      }
-    });
-  }
-  
-  public destroy(): void {
-    if (this.updateTimer) {
-      clearTimeout(this.updateTimer);
-      this.updateTimer = null;
-    }
-    this.listeners.clear();
-    this.buffer = [];
-    this.pendingTraces = [];
-  }
-}
-
-// Singleton instance
-let bufferInstance: TraceBuffer | null = null;
-
-export function getTraceBuffer(config?: TraceBufferConfig): TraceBuffer {
-  if (!bufferInstance) {
-    bufferInstance = new TraceBuffer(config);
-  }
-  return bufferInstance;
-}
-
-export function destroyTraceBuffer(): void {
-  if (bufferInstance) {
-    bufferInstance.destroy();
-    bufferInstance = null;
-  }
-}

frontend/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

frontend/types.ts

@@ -1,28 +0,0 @@
-// Shared types for WebSocket and trace handling
-
-export interface TraceData {
-  type: 'attention' | 'activation' | 'routing' | 'confidence';
-  layer?: string;
-  weights?: number[][];
-  max_weight?: number;
-  entropy?: number;
-  mean?: number;
-  std?: number;
-  max?: number;
-  selected_expert?: number;
-  timestamp?: number;
-  tokens?: string[];  // Added for attention visualization
-  // Confidence-specific fields
-  confidence_score?: number;
-  hallucination_risk?: number;
-  attention_count?: number;
-  activation_count?: number;
-  max_attention?: number;
-}
-
-export interface WebSocketState {
-  isConnected: boolean;
-  lastMessage: TraceData | null;
-  traces: TraceData[];
-  buffer?: Record<string, unknown>; // TraceBuffer type
-}

frontend/websocket-client.ts

@@ -1,214 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { getTraceBuffer, TraceBuffer } from './trace-buffer';
-import { getLegacyWsUrl } from './config';
-import { TraceData, WebSocketState } from './types';
-
-export type { TraceData, WebSocketState } from './types';
-
-export function useWebSocket(url?: string) {
-  const defaultUrl = url || getLegacyWsUrl();
-  const [state, setState] = useState<WebSocketState>({
-    isConnected: false,
-    lastMessage: null,
-    traces: [],
-  });
-
-  const [isClient, setIsClient] = useState(false);
-  const ws = useRef<WebSocket | null>(null);
-  const reconnectTimeout = useRef<NodeJS.Timeout | null>(null);
-  const urlRef = useRef(defaultUrl);
-  const bufferRef = useRef<TraceBuffer | null>(null);
-  const bufferUnsubscribe = useRef<(() => void) | null>(null);
-  const isCleared = useRef(false);
-
-  // Ensure we're on the client
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  
-  // Initialize trace buffer
-  useEffect(() => {
-    if (isClient && !bufferRef.current) {
-      bufferRef.current = getTraceBuffer({
-        maxSize: 10000,
-        updateInterval: 25,
-        batchSize: 10,
-      });
-      
-      // Subscribe to buffer updates
-      bufferUnsubscribe.current = bufferRef.current.subscribe((newTraces, bufferState) => {
-        // If we've cleared and there are no new traces, don't restore the old lastMessage
-        if (isCleared.current && newTraces.length === 0) {
-          setState(prev => ({
-            ...prev,
-            traces: bufferRef.current?.getRecentTraces(500) || [],
-            lastMessage: null,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            buffer: bufferRef.current as any,
-          }));
-        } else {
-          // Reset cleared flag if we have new traces
-          if (newTraces.length > 0) {
-            isCleared.current = false;
-          }
-          setState(prev => ({
-            ...prev,
-            traces: bufferRef.current?.getRecentTraces(500) || [],
-            lastMessage: newTraces.length > 0 ? newTraces[newTraces.length - 1] : prev.lastMessage,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            buffer: bufferRef.current as any,
-          }));
-        }
-      });
-      
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      setState(prev => ({ ...prev, buffer: bufferRef.current as any }));
-    }
-    
-    return () => {
-      if (bufferUnsubscribe.current) {
-        bufferUnsubscribe.current();
-        bufferUnsubscribe.current = null;
-      }
-    };
-  }, [isClient]);
-  
-  // Update URL ref when URL prop changes
-  useEffect(() => {
-    urlRef.current = defaultUrl;
-  }, [defaultUrl]);
-
-  const connect = useCallback(() => {
-    // Double-check we're in browser and WebSocket is available
-    if (typeof window === 'undefined' || !window.WebSocket) {
-      console.log('WebSocket not available');
-      return;
-    }
-
-    try {
-      console.log('Attempting to connect to:', urlRef.current);
-      ws.current = new window.WebSocket(urlRef.current);
-
-      ws.current.onopen = () => {
-        console.log('WebSocket connected to:', urlRef.current);
-        setState(prev => ({ ...prev, isConnected: true }));
-        
-        // Clear any reconnection timeout
-        if (reconnectTimeout.current) {
-          clearTimeout(reconnectTimeout.current);
-          reconnectTimeout.current = null;
-        }
-      };
-
-      ws.current.onmessage = async (event) => {
-        try {
-          let messageData: string;
-          
-          // Handle both string and Blob data
-          if (event.data instanceof Blob) {
-            messageData = await event.data.text();
-          } else {
-            messageData = event.data;
-          }
-          
-          const data = JSON.parse(messageData) as TraceData;
-          console.log('Received trace:', data.type);
-          
-          // Push to trace buffer instead of direct state update
-          if (bufferRef.current) {
-            bufferRef.current.push(data);
-          }
-        } catch (error) {
-          console.error('Error parsing WebSocket message:', error, 'Data:', event.data);
-        }
-      };
-
-      ws.current.onerror = (error) => {
-        console.warn('WebSocket error (this is normal if server is not running):', error);
-      };
-
-      ws.current.onclose = () => {
-        console.log('WebSocket disconnected');
-        setState(prev => ({ ...prev, isConnected: false }));
-        
-        // Attempt to reconnect after 3 seconds
-        if (reconnectTimeout.current) {
-          clearTimeout(reconnectTimeout.current);
-        }
-        reconnectTimeout.current = setTimeout(() => {
-          console.log('Attempting to reconnect...');
-          connect();
-        }, 3000);
-      };
-    } catch (error) {
-      console.warn('Failed to connect WebSocket:', error);
-      // Retry connection after delay
-      if (reconnectTimeout.current) {
-        clearTimeout(reconnectTimeout.current);
-      }
-      reconnectTimeout.current = setTimeout(() => {
-        connect();
-      }, 3000);
-    }
-  }, []); // Remove url dependency to prevent reconnection loops
-
-  const disconnect = useCallback(() => {
-    if (reconnectTimeout.current) {
-      clearTimeout(reconnectTimeout.current);
-      reconnectTimeout.current = null;
-    }
-    
-    if (ws.current && ws.current.readyState === ws.current.OPEN) {
-      ws.current.close();
-    }
-    ws.current = null;
-  }, []);
-
-  const sendMessage = useCallback((message: Record<string, unknown>) => {
-    if (ws.current && ws.current.readyState === ws.current.OPEN) {
-      ws.current.send(JSON.stringify(message));
-    } else {
-      console.warn('WebSocket is not connected');
-    }
-  }, []);
-
-  const clearTraces = useCallback(() => {
-    if (bufferRef.current) {
-      bufferRef.current.clear();
-    }
-    isCleared.current = true;
-    setState(prev => ({ ...prev, traces: [], lastMessage: null }));
-  }, []);
-
-  // Connect when component mounts and we're on client
-  useEffect(() => {
-    if (!isClient) return;
-    
-    const timer = setTimeout(() => {
-      connect();
-    }, 100); // Small delay to ensure client is ready
-    
-    return () => {
-      clearTimeout(timer);
-      disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isClient]); // Only depend on isClient, not connect/disconnect to avoid loops
-
-  // Memoize connect to prevent infinite loops
-  const memoizedConnect = useMemo(() => connect, []);
-  const memoizedDisconnect = useMemo(() => disconnect, []);
-  
-  return {
-    ...state,
-    isClient,
-    sendMessage,
-    clearTraces,
-    reconnect: memoizedConnect,
-    disconnect: memoizedDisconnect,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    buffer: bufferRef.current as any,
-  };
-}

frontend/websocket.ts

@@ -1,114 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { getLegacyWsUrl } from './config';
-import { TraceData, WebSocketState } from './types';
-
-export type { TraceData, WebSocketState } from './types';
-
-// DEPRECATED: Use websocket-client.ts instead
-export function useWebSocket(url?: string) {
-  const defaultUrl = url || getLegacyWsUrl();
-  const [state, setState] = useState<WebSocketState>({
-    isConnected: false,
-    lastMessage: null,
-    traces: [],
-  });
-
-  const ws = useRef<WebSocket | null>(null);
-  const reconnectTimeout = useRef<NodeJS.Timeout | null>(null);
-
-  const connect = useCallback(() => {
-    // Only run in browser environment
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    try {
-      ws.current = new WebSocket(defaultUrl);
-
-      ws.current.onopen = () => {
-        console.log('WebSocket connected to:', defaultUrl);
-        setState(prev => ({ ...prev, isConnected: true }));
-        
-        // Clear any reconnection timeout
-        if (reconnectTimeout.current) {
-          clearTimeout(reconnectTimeout.current);
-          reconnectTimeout.current = null;
-        }
-      };
-
-      ws.current.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data) as TraceData;
-          console.log('Received trace:', data.type);
-          
-          setState(prev => ({
-            ...prev,
-            lastMessage: data,
-            traces: [...prev.traces, data].slice(-100), // Keep last 100 traces
-          }));
-        } catch (error) {
-          console.error('Error parsing WebSocket message:', error);
-        }
-      };
-
-      ws.current.onerror = (error) => {
-        console.error('WebSocket error:', error);
-      };
-
-      ws.current.onclose = () => {
-        console.log('WebSocket disconnected');
-        setState(prev => ({ ...prev, isConnected: false }));
-        
-        // Attempt to reconnect after 3 seconds
-        reconnectTimeout.current = setTimeout(() => {
-          console.log('Attempting to reconnect...');
-          connect();
-        }, 3000);
-      };
-    } catch (error) {
-      console.error('Failed to connect WebSocket:', error);
-    }
-  }, [url]);
-
-  const disconnect = useCallback(() => {
-    if (reconnectTimeout.current) {
-      clearTimeout(reconnectTimeout.current);
-      reconnectTimeout.current = null;
-    }
-    
-    if (ws.current) {
-      ws.current.close();
-      ws.current = null;
-    }
-  }, []);
-
-  const sendMessage = useCallback((message: Record<string, unknown>) => {
-    if (ws.current && ws.current.readyState === WebSocket.OPEN) {
-      ws.current.send(JSON.stringify(message));
-    } else {
-      console.warn('WebSocket is not connected');
-    }
-  }, []);
-
-  const clearTraces = useCallback(() => {
-    setState(prev => ({ ...prev, traces: [], lastMessage: null }));
-  }, []);
-
-  useEffect(() => {
-    // Only run in browser environment
-    if (typeof window === 'undefined') {
-      return;
-    }
-    
-    connect();
-    return () => disconnect();
-  }, [connect, disconnect]);
-
-  return {
-    ...state,
-    sendMessage,
-    clearTraces,
-    reconnect: connect,
-    disconnect,
-  };
-}