Deploy demo from GitHub Actions - 2025-12-24 02:23:20

.gitattributes

@@ -0,0 +1,7 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,55 @@
+FROM node:20-slim AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm ci --legacy-peer-deps
+
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM python:3.11-slim AS runner
+
+RUN apt-get update && apt-get install -y \
+    curl \
+    gnupg \
+    git \
+    git-lfs \
+    && curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -m -u 1000 app
+WORKDIR /app
+
+COPY --from=ghcr.io/astral-sh/uv:latest /uv /usr/local/bin/uv
+
+COPY pyproject.toml ./
+
+RUN uv venv .venv && \
+    . .venv/bin/activate && \
+    uv pip install -e . && \
+    rm -rf /root/.cache/uv
+
+COPY --from=builder --chown=app:app /app/.next/standalone ./
+COPY --from=builder --chown=app:app /app/.next/static ./.next/static
+COPY --from=builder --chown=app:app /app/public ./public
+
+RUN chown -R app:app /app
+
+USER app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+ENV PYTHON_PATH=/app/.venv/bin/python
+
+EXPOSE 7860
+
+CMD ["node", "server.js"]
+

README.md

@@ -0,0 +1,44 @@
+---
+title: Quantum Assistant
+emoji: ♾️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: true
+app_port: 7860
+license: apache-2.0
+short_description: Multimodal VLM for Quantum Computing with Qiskit
+datasets:
+  - samuellimabraz/quantum-assistant
+models:
+  - samuellimabraz/Qwen3-VL-8B-rslora-r32-2
+---
+
+Interactive demo for **Quantum Assistant** - A Multimodal Vision Language Model specialized for Quantum Computing with Qiskit.
+
+## Features
+
+- 💬 **Chat Interface**: Interact with the quantum-specialized VLM
+- 📊 **Dataset Explorer**: Browse examples from the quantum-assistant dataset
+- ⚡ **Code Execution**: Run Qiskit code directly in the browser
+- 🖼️ **Image Understanding**: Analyze quantum circuit diagrams, Bloch spheres, and histograms
+
+## Resources
+
+- 📦 [Dataset](https://huggingface.co/datasets/samuellimabraz/quantum-assistant)
+- 🤖 [Models](https://huggingface.co/collections/samuellimabraz/quantum-assistant)
+- 💻 [GitHub](https://github.com/samuellimabraz/quantum-assistant)
+
+## Configuration
+
+Configure the model endpoint via Space secrets:
+
+- `DEMO_MODEL_URL`: VLM API endpoint (OpenAI-compatible)
+- `DEMO_MODEL_NAME`: Model identifier
+- `DEMO_API_KEY`: API authentication key
+
+## Author
+
+**Samuel Lima Braz** - UNIFEI (Universidade Federal de Itajubá)
+
+Final Graduation Project - 2025

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -0,0 +1,31 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+
+  output: 'standalone',
+
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'huggingface.co',
+      },
+      {
+        protocol: 'https',
+        hostname: '*.hf.space',
+      },
+      {
+        protocol: 'https',
+        hostname: 'datasets-server.huggingface.co',
+      },
+    ],
+    unoptimized: process.env.NODE_ENV === 'production',
+  },
+
+  env: {
+    NEXT_PUBLIC_HF_SPACE: process.env.NEXT_PUBLIC_HF_SPACE || '',
+  },
+};
+
+module.exports = nextConfig;
+

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "quantum-assistant-demo",
+  "version": "1.0.0",
+  "description": "Interactive demo for Quantum Assistant - Multimodal VLM for Quantum Computing",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@types/react-katex": "^3.0.4",
+    "clsx": "^2.1.0",
+    "katex": "^0.16.27",
+    "lucide-react": "^0.400.0",
+    "monaco-editor": "^0.55.1",
+    "next": "^14.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-katex": "^3.1.0",
+    "react-markdown": "^9.0.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.4.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+

pyproject.toml

@@ -0,0 +1,43 @@
+[project]
+name = "quantum-assistant-demo"
+version = "0.1.0"
+description = "Python runtime for Quantum Assistant demo"
+requires-python = ">=3.11"
+dependencies = [
+    "qiskit==2.2.3",
+    "qiskit-aer>=0.17.2",
+    "qiskit-ibm-runtime>=0.43.1",
+    "qiskit-machine-learning>=0.8.2",
+    "qiskit-addon-sqd>=0.12.0",
+    "qiskit-addon-pna>=0.2.0",
+    "qiskit-addon-slc>=0.1.0",
+    "qiskit-addon-utils>=0.3.0",
+    "qiskit-addon-obp>=0.3.0",
+    "qiskit-addon-mpf>=0.3.0",
+    "qiskit-addon-aqc-tensor[aer,quimb-jax]>=0.2.0",
+    "qiskit-addon-opt-mapper>=0.1.0",
+    "qiskit-addon-cutting>=0.10.0",
+    "qiskit-ibm-transpiler>=0.13.1",
+    "qiskit-ibm-catalog>=0.12.0",
+    "qiskit-quimb>=0.0.9",
+    "scipy>=1.15.3",
+    "torch>=2.8.0,<2.9.0",
+    "numpy>=1.24.0",
+    "matplotlib>=3.7.0",
+    "pillow>=10.0",
+    "samplomatic>=0.13.0",
+    "mthree>=3.0.0",
+    "rustworkx>=0.17.1",
+    "imbalanced-learn>=0.14.0",
+    "gem-suite>=0.1.6",
+    "quimb>=1.11.2",
+    "numba>=0.57.0",
+    "yfinance>=0.2.66",
+    "plotly>=6.5.0",
+    "kaleido>=1.2.0",
+    "pylatexenc>=2.10",
+    "seaborn>=0.13.2",
+    "ffsim>=0.0.63",
+    "pytest>=9.0.0",
+]
+

src/app/api/chat/route.ts

@@ -0,0 +1,252 @@
+import { NextRequest } from 'next/server';
+import { createVLMClient } from '@/lib/api/vlm-client';
+import { ALLOWED_TOPICS, BLOCKED_INPUT_PATTERNS } from '@/config/constants';
+
+export const maxDuration = 120;
+
+interface MessageContent {
+  type: 'text' | 'image_url';
+  text?: string;
+  image_url?: { url: string };
+}
+
+interface ChatMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string | MessageContent[];
+}
+
+interface ChatRequestBody {
+  messages: ChatMessage[];
+  stream?: boolean;
+}
+
+interface ContentValidation {
+  valid: boolean;
+  reason?: string;
+  isOffTopic?: boolean;
+}
+
+/**
+ * Extract text content from a message for validation
+ */
+function extractTextContent(content: string | MessageContent[]): string {
+  if (typeof content === 'string') {
+    return content;
+  }
+  return content
+    .filter((c): c is MessageContent & { type: 'text'; text: string } => c.type === 'text' && !!c.text)
+    .map(c => c.text)
+    .join(' ');
+}
+
+/**
+ * Validate user input for malicious patterns and topic relevance
+ */
+function validateUserInput(text: string): ContentValidation {
+  const lowerText = text.toLowerCase();
+  
+  // Check for blocked patterns (prompt injection, harmful content, etc.)
+  for (const pattern of BLOCKED_INPUT_PATTERNS) {
+    if (pattern.test(text)) {
+      return {
+        valid: false,
+        reason: "I can't process this request. Please ask a question related to quantum computing, Qiskit, physics, or mathematics.",
+      };
+    }
+  }
+  
+  // Check message length (prevent abuse)
+  if (text.length > 10000) {
+    return {
+      valid: false,
+      reason: 'Message too long. Please keep your question under 10,000 characters.',
+    };
+  }
+  
+  // Check if the message contains any relevant topic keywords
+  // Images are always allowed (circuit diagrams, Bloch spheres, etc.)
+  const hasImage = text.includes('[IMAGE]') || text.length < 20; // Short messages might be follow-ups
+  
+  if (!hasImage) {
+    const words = lowerText.split(/\s+/);
+    const hasRelevantTopic = ALLOWED_TOPICS.some(topic => {
+      // Check for whole word or part of compound word
+      return words.some(word => 
+        word.includes(topic.toLowerCase()) || 
+        topic.toLowerCase().includes(word)
+      );
+    });
+    
+    // Also check for common question patterns
+    const isQuestion = /^(what|how|why|when|where|can|could|would|should|is|are|do|does|explain|describe|help|show|create|implement|write|generate|build|make)/i.test(lowerText.trim());
+    const hasCodeContext = /```|def\s|import\s|class\s|function|circuit/i.test(text);
+    
+    // Be permissive: if it's a question or has code context, allow it
+    // The model will redirect off-topic questions anyway
+    if (!hasRelevantTopic && !isQuestion && !hasCodeContext && text.length > 50) {
+      return {
+        valid: true, // Still valid, but flag as potentially off-topic
+        isOffTopic: true,
+      };
+    }
+  }
+  
+  return { valid: true };
+}
+
+/**
+ * Create off-topic response message
+ */
+function createOffTopicResponse(): string {
+  return `I'm **Quantum Assistant**, specialized in quantum computing, Qiskit, physics, and related mathematics.
+
+I can help you with:
+- 🔬 **Quantum Computing**: Circuits, gates, algorithms, error correction
+- 💻 **Qiskit**: Code generation, debugging, best practices
+- 📐 **Physics & Math**: Quantum mechanics, linear algebra, probability
+- 🤖 **Quantum ML**: Variational algorithms, optimization, hybrid systems
+
+**Please ask a question related to these topics!**
+
+For example:
+- "How do I create a Bell state in Qiskit?"
+- "Explain the Grover's algorithm"
+- "What is quantum entanglement?"`;
+}
+
+function isConnectionError(error: unknown): boolean {
+  if (error instanceof Error) {
+    const message = error.message.toLowerCase();
+    const cause = (error as Error & { cause?: Error })?.cause;
+
+    if (message.includes('fetch failed') || message.includes('econnrefused')) {
+      return true;
+    }
+
+    if (cause && 'code' in cause && cause.code === 'ECONNREFUSED') {
+      return true;
+    }
+  }
+  return false;
+}
+
+function createErrorMessage(isConnection: boolean): string {
+  if (isConnection) {
+    const modelUrl = process.env.DEMO_MODEL_URL || 'http://localhost:8000/v1';
+    return `**Model Server Not Available**\n\nCould not connect to the model at:\n\`${modelUrl}\`\n\n**To use the chat feature:**\n1. Start a VLM server (vLLM, Ollama, etc.)\n2. Configure \`.env.local\` with your endpoint:\n\`\`\`\nDEMO_MODEL_URL=http://your-server:port/v1\nDEMO_MODEL_NAME=your-model-name\nDEMO_API_KEY=your-api-key\n\`\`\`\n3. Restart the demo server\n\n*Examples panel still works - try selecting a test sample!*`;
+  }
+  return 'An error occurred while processing your request.';
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: ChatRequestBody = await request.json();
+    const { messages, stream = true } = body;
+
+    if (!messages || !Array.isArray(messages) || messages.length === 0) {
+      return new Response(
+        JSON.stringify({ error: 'Invalid request: messages array required' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // Find the last user message for validation
+    const userMessages = messages.filter(m => m.role === 'user');
+    const lastUserMessage = userMessages[userMessages.length - 1];
+    
+    if (lastUserMessage) {
+      const userText = extractTextContent(lastUserMessage.content);
+      const validation = validateUserInput(userText);
+      
+      // If input is invalid (malicious/harmful), return error
+      if (!validation.valid && validation.reason) {
+        const encoder = new TextEncoder();
+        
+        if (stream) {
+          const errorStream = new ReadableStream({
+            start(controller) {
+              const data = JSON.stringify({ content: validation.reason, done: false });
+              controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+              controller.enqueue(encoder.encode(`data: ${JSON.stringify({ done: true })}\n\n`));
+              controller.close();
+            },
+          });
+          
+          return new Response(errorStream, {
+            headers: {
+              'Content-Type': 'text/event-stream',
+              'Cache-Control': 'no-cache',
+              'Connection': 'keep-alive',
+            },
+          });
+        } else {
+          return new Response(
+            JSON.stringify({ content: validation.reason }),
+            { headers: { 'Content-Type': 'application/json' } }
+          );
+        }
+      }
+    }
+
+    const client = createVLMClient();
+
+    if (stream) {
+      const encoder = new TextEncoder();
+
+      const readableStream = new ReadableStream({
+        async start(controller) {
+          try {
+            for await (const chunk of client.chatStream(messages)) {
+              const data = JSON.stringify({ content: chunk, done: false });
+              controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+            }
+            controller.enqueue(encoder.encode(`data: ${JSON.stringify({ done: true })}\n\n`));
+            controller.close();
+          } catch (error) {
+            console.error('Stream error:', error);
+            const isConnection = isConnectionError(error);
+            const errorMessage = isConnection
+              ? createErrorMessage(true)
+              : (error instanceof Error ? error.message : 'Stream error occurred');
+
+            controller.enqueue(
+              encoder.encode(`data: ${JSON.stringify({ error: errorMessage, done: true })}\n\n`)
+            );
+            controller.close();
+          }
+        },
+      });
+
+      return new Response(readableStream, {
+        headers: {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+        },
+      });
+    } else {
+      const response = await client.chat(messages);
+      return new Response(
+        JSON.stringify({ content: response }),
+        { headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  } catch (error) {
+    console.error('Chat API error:', error);
+
+    if (isConnectionError(error)) {
+      return new Response(
+        JSON.stringify({ error: createErrorMessage(true) }),
+        { status: 503, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    const errorMessage =
+      error instanceof Error ? error.message : 'Internal server error';
+
+    return new Response(
+      JSON.stringify({ error: errorMessage }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+}

src/app/api/examples/route.ts

@@ -0,0 +1,91 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { datasetLoader } from '@/lib/dataset/loader';
+import type { TaskType, Category } from '@/types';
+
+// Server-side loader for API route (used for split info and fallback)
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    const split = (searchParams.get('split') as 'train' | 'validation' | 'test') || 'test';
+    const limit = Math.min(parseInt(searchParams.get('limit') || '50', 10), 100);
+    const offset = parseInt(searchParams.get('offset') || '0', 10);
+    const type = searchParams.get('type') as TaskType | null;
+    const category = searchParams.get('category') as Category | null;
+    const hasImage = searchParams.get('hasImage');
+    const search = searchParams.get('search') || undefined;
+    const codingOnly = searchParams.get('codingOnly') === 'true';
+
+    // Ensure the split is loaded
+    if (!datasetLoader.isLoaded(split)) {
+      await datasetLoader.preloadSplit(split);
+    }
+
+    // Build filters
+    const filters: {
+      type?: TaskType;
+      category?: Category;
+      hasImage?: boolean;
+      search?: string;
+      codingOnly?: boolean;
+    } = { codingOnly };
+
+    if (type) filters.type = type;
+    if (category) filters.category = category;
+    if (hasImage !== null) filters.hasImage = hasImage === 'true';
+    if (search) filters.search = search;
+
+    const result = datasetLoader.filterExamples(split, filters, limit, offset);
+
+    return NextResponse.json({
+      examples: result.examples,
+      total: result.total,
+      split,
+      offset,
+      limit,
+      hasMore: offset + result.examples.length < result.total,
+    });
+  } catch (error) {
+    console.error('Examples API error:', error);
+
+    const errorMessage =
+      error instanceof Error ? error.message : 'Failed to load examples';
+
+    return NextResponse.json(
+      { error: errorMessage, examples: [], total: 0 },
+      { status: 500 }
+    );
+  }
+}
+
+// Endpoint to get split info
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    
+    if (body.action === 'getSplitInfo') {
+      const splitInfo = await datasetLoader.getSplitInfo();
+      return NextResponse.json({ splitInfo });
+    }
+    
+    if (body.action === 'getCodingCount') {
+      const split = (body.split || 'test') as 'train' | 'validation' | 'test';
+      
+      // Ensure the split is loaded
+      if (!datasetLoader.isLoaded(split)) {
+        await datasetLoader.preloadSplit(split);
+      }
+      
+      const codingProblems = datasetLoader.getCodingProblems(split);
+      return NextResponse.json({ count: codingProblems.length, split });
+    }
+
+    return NextResponse.json({ error: 'Unknown action' }, { status: 400 });
+  } catch (error) {
+    console.error('Examples API POST error:', error);
+    return NextResponse.json(
+      { error: 'Failed to process request' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/execute/route.ts

@@ -0,0 +1,568 @@
+import { NextRequest } from 'next/server';
+import { spawn } from 'child_process';
+import { writeFile, unlink, mkdir, readFile, readdir } from 'fs/promises';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { randomUUID } from 'crypto';
+
+export const maxDuration = 60;
+
+interface ExecuteRequestBody {
+    code: string;
+    timeout?: number;
+}
+
+interface ExecutionResult {
+    success: boolean;
+    output: string;
+    error: string;
+    executionTime: number;
+    hasCircuitOutput: boolean;
+    images?: string[]; // Base64 encoded images
+}
+
+const DANGEROUS_PATTERNS = [
+    /os\.environ/,
+    /environ\[/,
+    /getenv\s*\(/,
+    // Dangerous modules
+    /\bctypes\b/,
+    /\bpickle\b/,
+    /\bmarshal\b/,
+    /\bshelve\b/,
+    /\bcommands\b/,
+    /\bpty\b/,
+    /\bpexpect\b/,
+    // System/shell access
+    /\bos\.system\b/,
+    /\bos\.popen\b/,
+    /\bos\.spawn/,
+    /\bos\.exec/,
+    /\bos\.fork\b/,
+    /\bsubprocess\b/,
+    /\bcommands\b/,
+    // File system attacks outside sandbox
+    /open\s*\(\s*['"]\s*\/etc/,
+    /open\s*\(\s*['"]\s*\/proc/,
+    /open\s*\(\s*['"]\s*\/sys/,
+    /open\s*\(\s*['"]\s*\/dev/,
+    /open\s*\(\s*['"]\s*\/var/,
+    /open\s*\(\s*['"]\s*\/root/,
+    /open\s*\(\s*['"]\s*\/home/,
+    /open\s*\(\s*['"]\s*\/tmp/,
+    /open\s*\(\s*['"]\s*\.env/,
+    /open\s*\(\s*['"]\s*\.\.\//, // Path traversal
+    /open\s*\(\s*f?['"]\s*\{/,  // f-string with path
+    // Network access
+    /\bsocket\b/,
+    /\burllib\b/,
+    /\brequests\b/,
+    /\bhttpx\b/,
+    /\baiohttp\b/,
+    /\bhttp\.client\b/,
+    /\bftplib\b/,
+    /\bsmtplib\b/,
+    /\btelnetlib\b/,
+    /\bparamiko\b/,
+    // Code execution
+    /\beval\s*\(/,
+    /\bexec\s*\(/,
+    /\bcompile\s*\(/,
+    /\b__import__\b/,
+    /\bimportlib\b/,
+    /\bbuiltins\b/,
+    /\bglobals\s*\(\s*\)/,
+    /\blocals\s*\(\s*\)/,
+    /\bgetattr\s*\([^,]+,\s*['"]/,  // getattr with string
+    /\bsetattr\s*\(/,
+    /\bdelattr\s*\(/,
+    // Class/object manipulation for sandbox escape
+    /\b__class__\b/,
+    /\b__bases__\b/,
+    /\b__subclasses__\b/,
+    /\b__mro__\b/,
+    /\b__globals__\b/,
+    /\b__code__\b/,
+    /\b__reduce__\b/,
+    /\b__getstate__\b/,
+    /\b__setstate__\b/,
+    // Multiprocessing (can be used to bypass restrictions)
+    /\bmultiprocessing\b/,
+    /\bthreading\b/,
+    /\bconcurrent\b/,
+    /\basyncio\.subprocess/,
+];
+
+const ALLOWED_PATTERNS = [
+    /from qiskit/,
+    /import qiskit/,
+    /from numpy/,
+    /import numpy/,
+    /from scipy/,
+    /import scipy/,
+    /from matplotlib/,
+    /import matplotlib/,
+];
+
+function validateCode(code: string): { valid: boolean; error?: string } {
+    const codeWithoutComments = code
+        .replace(/#.*$/gm, '')  // Remove single-line comments
+        .replace(/'''[\s\S]*?'''/g, '')  // Remove triple-single-quote strings
+        .replace(/"""[\s\S]*?"""/g, ''); // Remove triple-double-quote strings
+
+    for (const pattern of DANGEROUS_PATTERNS) {
+        if (pattern.test(codeWithoutComments)) {
+            return {
+                valid: false,
+                error: `Security error: Potentially dangerous code pattern detected. For security reasons, certain operations are not allowed in the sandbox.`
+            };
+        }
+    }
+
+    return { valid: true };
+}
+
+const createSafetyWrapper = (figureDir: string) => `
+import sys
+import io
+import os
+import warnings
+import builtins
+from contextlib import redirect_stdout, redirect_stderr
+
+# Suppress warnings for cleaner output
+warnings.filterwarnings('ignore')
+
+# Setup figure capture directory
+_FIGURE_DIR = "${figureDir.replace(/\\/g, '\\\\')}"
+_figure_counter = [0]
+
+# ============================================
+# SECURITY SANDBOX SETUP (Second Line of Defense)
+# Primary security is pattern detection + clean environment
+# ============================================
+
+# Block dangerous system operations
+os.system = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.system not allowed in sandbox"))
+os.popen = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.popen not allowed in sandbox"))
+if hasattr(os, 'spawn'):
+    os.spawn = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawn not allowed"))
+if hasattr(os, 'spawnl'):
+    os.spawnl = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnl not allowed"))
+if hasattr(os, 'spawnle'):
+    os.spawnle = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnle not allowed"))
+if hasattr(os, 'spawnlp'):
+    os.spawnlp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnlp not allowed"))
+if hasattr(os, 'spawnlpe'):
+    os.spawnlpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnlpe not allowed"))
+if hasattr(os, 'spawnv'):
+    os.spawnv = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnv not allowed"))
+if hasattr(os, 'spawnve'):
+    os.spawnve = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnve not allowed"))
+if hasattr(os, 'spawnvp'):
+    os.spawnvp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnvp not allowed"))
+if hasattr(os, 'spawnvpe'):
+    os.spawnvpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnvpe not allowed"))
+if hasattr(os, 'execl'):
+    os.execl = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execl not allowed"))
+if hasattr(os, 'execle'):
+    os.execle = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execle not allowed"))
+if hasattr(os, 'execlp'):
+    os.execlp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execlp not allowed"))
+if hasattr(os, 'execlpe'):
+    os.execlpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execlpe not allowed"))
+if hasattr(os, 'execv'):
+    os.execv = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execv not allowed"))
+if hasattr(os, 'execve'):
+    os.execve = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execve not allowed"))
+if hasattr(os, 'execvp'):
+    os.execvp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execvp not allowed"))
+if hasattr(os, 'execvpe'):
+    os.execvpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execvpe not allowed"))
+if hasattr(os, 'fork'):
+    os.fork = lambda: (_ for _ in ()).throw(PermissionError("os.fork not allowed"))
+if hasattr(os, 'forkpty'):
+    os.forkpty = lambda: (_ for _ in ()).throw(PermissionError("os.forkpty not allowed"))
+if hasattr(os, 'killpg'):
+    os.killpg = lambda *args: (_ for _ in ()).throw(PermissionError("os.killpg not allowed"))
+if hasattr(os, 'kill'):
+    os.kill = lambda *args: (_ for _ in ()).throw(PermissionError("os.kill not allowed"))
+
+# Block subprocess module
+try:
+    import subprocess
+    subprocess.run = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.call = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.check_call = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.check_output = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.Popen = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.getoutput = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.getstatusoutput = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+except ImportError:
+    pass
+
+# Create restricted open function to block access to sensitive files
+_original_open = builtins.open
+_ALLOWED_PATHS = [_FIGURE_DIR, '/tmp/quantum-sandbox']
+
+def _restricted_open(file, mode='r', *args, **kwargs):
+    """Restricted open that blocks access to sensitive files"""
+    if isinstance(file, (str, bytes)):
+        file_str = file if isinstance(file, str) else file.decode()
+        # Don't block relative paths that are needed for library operation
+        if file_str.startswith('/'):
+            file_str_lower = file_str.lower()
+            
+            # Block reading system sensitive paths
+            blocked_prefixes = ['/etc/passwd', '/etc/shadow', '/proc/self', '/proc/1']
+            for prefix in blocked_prefixes:
+                if file_str_lower.startswith(prefix):
+                    raise PermissionError(f"Access to {prefix} is not allowed in sandbox")
+            
+            # Block reading obvious secrets
+            blocked_patterns = ['.env.local', '.env.', 'secrets', 'credentials', 'private_key']
+            for pattern in blocked_patterns:
+                if pattern in file_str_lower:
+                    raise PermissionError(f"Access to files matching '{pattern}' is not allowed in sandbox")
+    
+    return _original_open(file, mode, *args, **kwargs)
+
+builtins.open = _restricted_open
+
+# ============================================
+# END SECURITY SANDBOX SETUP
+# ============================================
+
+# Capture all output
+_stdout_capture = io.StringIO()
+_stderr_capture = io.StringIO()
+
+# Setup matplotlib figure capture
+try:
+    import matplotlib
+    matplotlib.use('Agg')
+    import matplotlib.pyplot as plt
+    
+    _original_show = plt.show
+    _original_savefig = plt.savefig
+    
+    def _capture_show(*args, **kwargs):
+        """Capture plt.show() calls and save figures"""
+        figs = [plt.figure(i) for i in plt.get_fignums()]
+        for fig in figs:
+            _figure_counter[0] += 1
+            filepath = os.path.join(_FIGURE_DIR, f"figure_{_figure_counter[0]}.png")
+            fig.savefig(filepath, format='png', dpi=150, bbox_inches='tight', 
+                       facecolor='#18181b', edgecolor='none', transparent=False)
+        plt.close('all')
+    
+    def _capture_savefig(fname, *args, **kwargs):
+        """Capture savefig calls"""
+        _figure_counter[0] += 1
+        filepath = os.path.join(_FIGURE_DIR, f"figure_{_figure_counter[0]}.png")
+        kwargs_copy = dict(kwargs)
+        kwargs_copy['format'] = 'png'
+        kwargs_copy['dpi'] = kwargs_copy.get('dpi', 150)
+        kwargs_copy['bbox_inches'] = kwargs_copy.get('bbox_inches', 'tight')
+        kwargs_copy['facecolor'] = kwargs_copy.get('facecolor', '#18181b')
+        _original_savefig(filepath, **kwargs_copy)
+    
+    plt.show = _capture_show
+    plt.savefig = _capture_savefig
+    
+    # Also capture Qiskit circuit.draw() with mpl output
+    try:
+        from qiskit import QuantumCircuit
+        _original_draw = QuantumCircuit.draw
+        
+        def _capture_draw(self, output=None, **kwargs):
+            result = _original_draw(self, output=output, **kwargs)
+            if output == 'mpl' and result is not None:
+                _figure_counter[0] += 1
+                filepath = os.path.join(_FIGURE_DIR, f"figure_{_figure_counter[0]}.png")
+                result.savefig(filepath, format='png', dpi=150, bbox_inches='tight',
+                              facecolor='#18181b', edgecolor='none')
+                plt.close(result)
+            return result
+        
+        QuantumCircuit.draw = _capture_draw
+    except ImportError:
+        pass
+        
+except ImportError:
+    pass
+
+# Now execute the user code with output capture
+with redirect_stdout(_stdout_capture), redirect_stderr(_stderr_capture):
+    try:
+        exec(compile('''
+__USER_CODE__
+''', '<user_code>', 'exec'), {'__builtins__': builtins, '__name__': '__main__'})
+    except Exception as e:
+        print(f"{type(e).__name__}: {e}", file=sys.stderr)
+
+# Final figure capture - save any remaining open figures
+try:
+    import matplotlib.pyplot as plt
+    figs = [plt.figure(i) for i in plt.get_fignums()]
+    for fig in figs:
+        _figure_counter[0] += 1
+        filepath = os.path.join(_FIGURE_DIR, f"figure_{_figure_counter[0]}.png")
+        fig.savefig(filepath, format='png', dpi=150, bbox_inches='tight',
+                   facecolor='#18181b', edgecolor='none', transparent=False)
+    plt.close('all')
+except:
+    pass
+
+# Print captured output
+_stdout_result = _stdout_capture.getvalue()
+_stderr_result = _stderr_capture.getvalue()
+
+if _stdout_result:
+    print(_stdout_result, end='')
+if _stderr_result:
+    print(_stderr_result, end='', file=sys.stderr)
+`;
+
+function createSafeCode(userCode: string, figureDir: string): string {
+    const escapedCode = userCode
+        .replace(/\\/g, '\\\\')
+        .replace(/'''/g, "\\'\\'\\'");
+
+    return createSafetyWrapper(figureDir).replace('__USER_CODE__', escapedCode);
+}
+
+function getSafeEnv(): Record<string, string> {
+    const env: Record<string, string> = {
+        PATH: '/usr/bin:/bin:/usr/local/bin',
+        HOME: '/tmp',
+        PYTHONUNBUFFERED: '1',
+        MPLBACKEND: 'Agg',
+        MallocStackLogging: '0',
+        MallocNanoZone: '0',
+        LANG: 'en_US.UTF-8',
+        LC_ALL: 'en_US.UTF-8',
+    };
+    if (process.env.PYTHON_PATH) {
+        env.PYTHON_PATH = process.env.PYTHON_PATH;
+    }
+    return env;
+}
+
+function detectCircuitOutput(code: string, output: string): boolean {
+    // Check if the code likely produces circuit visualization
+    const circuitPatterns = [
+        /\.draw\(/,
+        /circuit_drawer/,
+        /plot_histogram/,
+        /plot_bloch/,
+        /\.decompose\(\)/,
+        /print.*circuit/i,
+    ];
+
+    const outputPatterns = [
+        /[┌─┬┐│├┼┤└┴┘═║╔╗╚╝]/,  // ASCII circuit characters
+        /q\d*.*[─┤├]/,           // Qubit lines
+        /[HXYZTSRx].*├/,         // Gate symbols
+    ];
+
+    const hasCircuitCode = circuitPatterns.some(p => p.test(code));
+    const hasCircuitOutput = outputPatterns.some(p => p.test(output));
+
+    return hasCircuitCode || hasCircuitOutput;
+}
+
+async function collectFigures(figureDir: string): Promise<string[]> {
+    const images: string[] = [];
+    try {
+        const files = await readdir(figureDir);
+        const pngFiles = files.filter(f => f.endsWith('.png')).sort();
+
+        for (const file of pngFiles) {
+            const filepath = join(figureDir, file);
+            const data = await readFile(filepath);
+            images.push(data.toString('base64'));
+            // Clean up the file
+            await unlink(filepath).catch(() => { });
+        }
+    } catch {
+        // Directory might not exist or be empty
+    }
+    return images;
+}
+
+async function executeCode(code: string, timeout: number): Promise<ExecutionResult> {
+    const startTime = Date.now();
+    const execId = randomUUID();
+    const tempDir = join(tmpdir(), 'quantum-sandbox');
+    const figureDir = join(tempDir, `figures_${execId}`);
+    const tempFile = join(tempDir, `exec_${execId}.py`);
+
+    try {
+        // Ensure temp directories exist
+        await mkdir(tempDir, { recursive: true });
+        await mkdir(figureDir, { recursive: true });
+
+        // Create safe wrapped code
+        const safeCode = createSafeCode(code, figureDir);
+        await writeFile(tempFile, safeCode, 'utf-8');
+
+        return await new Promise<ExecutionResult>(async (resolve) => {
+            let stdout = '';
+            let stderr = '';
+            let killed = false;
+
+            // Use the PYTHON_PATH environment variable if set, otherwise default to python3
+            const pythonPath = process.env.PYTHON_PATH || 'python3';
+
+            const pythonProcess = spawn(pythonPath, [tempFile], {
+                timeout: timeout * 1000,
+                env: getSafeEnv() as NodeJS.ProcessEnv,  // Use minimal safe environment, no secrets
+                cwd: tempDir,  // Run in isolated temp directory
+            });
+
+            pythonProcess.stdout.on('data', (data: Buffer) => {
+                stdout += data.toString();
+            });
+
+            pythonProcess.stderr.on('data', (data: Buffer) => {
+                stderr += data.toString();
+            });
+
+            const timeoutId = setTimeout(() => {
+                killed = true;
+                pythonProcess.kill('SIGKILL');
+            }, timeout * 1000);
+
+            pythonProcess.on('close', async (exitCode: number | null) => {
+                clearTimeout(timeoutId);
+                const executionTime = Date.now() - startTime;
+
+                // Collect any generated figures
+                const images = await collectFigures(figureDir);
+
+                if (killed) {
+                    resolve({
+                        success: false,
+                        output: stdout,
+                        error: `Execution timeout (>${timeout}s). The code took too long to execute.`,
+                        executionTime,
+                        hasCircuitOutput: false,
+                        images,
+                    });
+                    return;
+                }
+
+                // Clean up stderr from common warnings
+                const cleanStderr = stderr
+                    .split('\n')
+                    .filter(line => !line.includes('UserWarning') &&
+                        !line.includes('DeprecationWarning') &&
+                        !line.includes('FutureWarning'))
+                    .join('\n')
+                    .trim();
+
+                const success = exitCode === 0 && !cleanStderr;
+
+                resolve({
+                    success,
+                    output: stdout.trim(),
+                    error: cleanStderr,
+                    executionTime,
+                    hasCircuitOutput: detectCircuitOutput(code, stdout),
+                    images,
+                });
+            });
+
+            pythonProcess.on('error', (err: Error) => {
+                clearTimeout(timeoutId);
+                resolve({
+                    success: false,
+                    output: '',
+                    error: `Failed to start Python: ${err.message}`,
+                    executionTime: Date.now() - startTime,
+                    hasCircuitOutput: false,
+                    images: [],
+                });
+            });
+        });
+    } finally {
+        // Clean up temp file and figure directory
+        try {
+            await unlink(tempFile);
+        } catch {
+            // Ignore cleanup errors
+        }
+        try {
+            // Clean up figure directory
+            const files = await readdir(figureDir).catch(() => []);
+            for (const file of files) {
+                await unlink(join(figureDir, file)).catch(() => { });
+            }
+            await unlink(figureDir).catch(() => { });
+        } catch {
+            // Ignore cleanup errors
+        }
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: ExecuteRequestBody = await request.json();
+        const { code, timeout = 30 } = body;
+
+        if (!code || typeof code !== 'string') {
+            return new Response(
+                JSON.stringify({ error: 'Invalid request: code string required' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        // Limit code length
+        if (code.length > 50000) {
+            return new Response(
+                JSON.stringify({ error: 'Code too long (max 50KB)' }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        // Validate code for dangerous patterns (first line of defense)
+        const validation = validateCode(code);
+        if (!validation.valid) {
+            return new Response(
+                JSON.stringify({
+                    success: false,
+                    output: '',
+                    error: validation.error,
+                    executionTime: 0,
+                    hasCircuitOutput: false,
+                    images: [],
+                }),
+                { status: 400, headers: { 'Content-Type': 'application/json' } }
+            );
+        }
+
+        // Limit timeout
+        const safeTimeout = Math.min(Math.max(timeout, 5), 60);
+
+        const result = await executeCode(code, safeTimeout);
+
+        return new Response(JSON.stringify(result), {
+            headers: { 'Content-Type': 'application/json' },
+        });
+    } catch (error) {
+        console.error('Execute API error:', error);
+
+        return new Response(
+            JSON.stringify({
+                success: false,
+                output: '',
+                error: error instanceof Error ? error.message : 'Execution failed',
+                executionTime: 0,
+                hasCircuitOutput: false,
+                images: [],
+            }),
+            { status: 500, headers: { 'Content-Type': 'application/json' } }
+        );
+    }
+}

src/app/api/status/route.ts

@@ -0,0 +1,145 @@
+import { NextResponse } from 'next/server';
+
+export interface RunPodHealth {
+  jobs: {
+    completed: number;
+    failed: number;
+    inProgress: number;
+    inQueue: number;
+    retried: number;
+  };
+  workers: {
+    idle: number;
+    initializing: number;
+    running: number;
+    throttled: number;
+  };
+}
+
+export interface StatusResponse {
+  status: 'ready' | 'cold_start' | 'initializing' | 'processing' | 'unavailable';
+  message: string;
+  workers: {
+    idle: number;
+    running: number;
+    initializing: number;
+  };
+  queue: {
+    inProgress: number;
+    inQueue: number;
+  };
+  estimatedWait?: number; // seconds
+}
+
+/**
+ * Check RunPod endpoint health to provide user feedback during cold starts
+ */
+export async function GET(): Promise<NextResponse<StatusResponse>> {
+  const baseUrl = process.env.DEMO_MODEL_URL || 'http://localhost:8000/v1';
+  const apiKey = process.env.DEMO_API_KEY || '';
+
+  // Extract RunPod endpoint URL from the vLLM base URL
+  // vLLM URL format: https://api.runpod.ai/v2/{endpoint_id}/openai/v1
+  // Health URL format: https://api.runpod.ai/v2/{endpoint_id}/health
+  const runpodMatch = baseUrl.match(/https:\/\/api\.runpod\.ai\/v2\/([^/]+)/);
+  
+  if (!runpodMatch) {
+    // Not a RunPod endpoint, assume it's always ready (local/other provider)
+    return NextResponse.json({
+      status: 'ready',
+      message: 'Model server ready',
+      workers: { idle: 1, running: 0, initializing: 0 },
+      queue: { inProgress: 0, inQueue: 0 },
+    });
+  }
+
+  const endpointId = runpodMatch[1];
+  const healthUrl = `https://api.runpod.ai/v2/${endpointId}/health`;
+
+  try {
+    const response = await fetch(healthUrl, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+      },
+      // Short timeout for health check
+      signal: AbortSignal.timeout(5000),
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({
+        status: 'unavailable',
+        message: 'Unable to check model status',
+        workers: { idle: 0, running: 0, initializing: 0 },
+        queue: { inProgress: 0, inQueue: 0 },
+      });
+    }
+
+    const health: RunPodHealth = await response.json();
+    
+    const totalWorkers = health.workers.idle + health.workers.running + (health.workers.initializing || 0);
+    const hasActiveWorkers = totalWorkers > 0;
+    const hasIdleWorkers = health.workers.idle > 0;
+    const isInitializing = (health.workers.initializing || 0) > 0;
+    const hasQueuedJobs = health.jobs.inQueue > 0;
+    const hasRunningJobs = health.jobs.inProgress > 0;
+
+    let status: StatusResponse['status'];
+    let message: string;
+    let estimatedWait: number | undefined;
+
+    if (hasIdleWorkers) {
+      status = 'ready';
+      message = 'Model ready';
+    } else if (isInitializing) {
+      status = 'initializing';
+      message = 'Model loading...';
+      estimatedWait = 30; // Typical vLLM model load time
+    } else if (health.workers.running > 0) {
+      status = 'processing';
+      message = hasQueuedJobs 
+        ? `Processing (${health.jobs.inQueue} in queue)` 
+        : 'Processing request...';
+      estimatedWait = hasQueuedJobs ? health.jobs.inQueue * 15 : undefined;
+    } else if (!hasActiveWorkers && (hasQueuedJobs || hasRunningJobs)) {
+      status = 'cold_start';
+      message = 'Starting worker...';
+      estimatedWait = 45; // Cold start + model load
+    } else if (!hasActiveWorkers) {
+      status = 'cold_start';
+      message = 'Workers scaled to zero, will start on request';
+      estimatedWait = 45;
+    } else {
+      status = 'ready';
+      message = 'Model ready';
+    }
+
+    return NextResponse.json({
+      status,
+      message,
+      workers: {
+        idle: health.workers.idle,
+        running: health.workers.running,
+        initializing: health.workers.initializing || 0,
+      },
+      queue: {
+        inProgress: health.jobs.inProgress,
+        inQueue: health.jobs.inQueue,
+      },
+      estimatedWait,
+    });
+  } catch (error) {
+    console.error('Health check error:', error);
+    
+    // Network error might indicate cold start
+    return NextResponse.json({
+      status: 'cold_start',
+      message: 'Connecting to model server...',
+      workers: { idle: 0, running: 0, initializing: 0 },
+      queue: { inProgress: 0, inQueue: 0 },
+      estimatedWait: 45,
+    });
+  }
+}
+

src/app/api/test/route.ts

@@ -0,0 +1,610 @@
+import { NextRequest } from 'next/server';
+import { spawn } from 'child_process';
+import { writeFile, unlink, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { randomUUID } from 'crypto';
+import type { TestResult } from '@/types';
+
+export const maxDuration = 60;
+
+interface TestRequestBody {
+  userCode: string;
+  testCode: string;
+  entryPoint: string;
+  timeout?: number;
+}
+
+// List of dangerous patterns that should be blocked (same as execute route)
+const DANGEROUS_PATTERNS = [
+  // Environment variable access
+  /os\.environ/,
+  /environ\[/,
+  /getenv\s*\(/,
+  // Dangerous modules
+  /\bctypes\b/,
+  /\bpickle\b/,
+  /\bmarshal\b/,
+  /\bshelve\b/,
+  /\bcommands\b/,
+  /\bpty\b/,
+  /\bpexpect\b/,
+  // System/shell access
+  /\bos\.system\b/,
+  /\bos\.popen\b/,
+  /\bos\.spawn/,
+  /\bos\.exec/,
+  /\bos\.fork\b/,
+  /\bsubprocess\b/,
+  /\bcommands\b/,
+  // File system attacks outside sandbox
+  /open\s*\(\s*['"]\s*\/etc/,
+  /open\s*\(\s*['"]\s*\/proc/,
+  /open\s*\(\s*['"]\s*\/sys/,
+  /open\s*\(\s*['"]\s*\/dev/,
+  /open\s*\(\s*['"]\s*\/var/,
+  /open\s*\(\s*['"]\s*\/root/,
+  /open\s*\(\s*['"]\s*\/home/,
+  /open\s*\(\s*['"]\s*\/tmp/,
+  /open\s*\(\s*['"]\s*\.env/,
+  /open\s*\(\s*['"]\s*\.\.\//, // Path traversal
+  /open\s*\(\s*f?['"]\s*\{/,  // f-string with path
+  // Network access
+  /\bsocket\b/,
+  /\burllib\b/,
+  /\brequests\b/,
+  /\bhttpx\b/,
+  /\baiohttp\b/,
+  /\bhttp\.client\b/,
+  /\bftplib\b/,
+  /\bsmtplib\b/,
+  /\btelnetlib\b/,
+  /\bparamiko\b/,
+  // Code execution
+  /\beval\s*\(/,
+  /\bexec\s*\(/,
+  /\bcompile\s*\(/,
+  /\b__import__\b/,
+  /\bimportlib\b/,
+  /\bbuiltins\b/,
+  /\bglobals\s*\(\s*\)/,
+  /\blocals\s*\(\s*\)/,
+  /\bgetattr\s*\([^,]+,\s*['"]/,  // getattr with string
+  /\bsetattr\s*\(/,
+  /\bdelattr\s*\(/,
+  // Class/object manipulation for sandbox escape
+  /\b__class__\b/,
+  /\b__bases__\b/,
+  /\b__subclasses__\b/,
+  /\b__mro__\b/,
+  /\b__globals__\b/,
+  /\b__code__\b/,
+  /\b__reduce__\b/,
+  /\b__getstate__\b/,
+  /\b__setstate__\b/,
+  // Multiprocessing (can be used to bypass restrictions)
+  /\bmultiprocessing\b/,
+  /\bthreading\b/,
+  /\bconcurrent\b/,
+  /\basyncio\.subprocess/,
+];
+
+function validateCode(code: string): { valid: boolean; error?: string } {
+  const codeWithoutComments = code
+    .replace(/#.*$/gm, '')  // Remove single-line comments
+    .replace(/'''[\s\S]*?'''/g, '')  // Remove triple-single-quote strings
+    .replace(/"""[\s\S]*?"""/g, ''); // Remove triple-double-quote strings
+
+  for (const pattern of DANGEROUS_PATTERNS) {
+    if (pattern.test(codeWithoutComments)) {
+      return {
+        valid: false,
+        error: `Security error: Potentially dangerous code pattern detected. For security reasons, certain operations are not allowed in the sandbox.`
+      };
+    }
+  }
+
+  return { valid: true };
+}
+
+// Minimal safe environment variables for Python execution
+function getSafeEnv(): Record<string, string> {
+  const env: Record<string, string> = {
+    PATH: '/usr/bin:/bin:/usr/local/bin',
+    HOME: '/tmp',
+    PYTHONUNBUFFERED: '1',
+    MPLBACKEND: 'Agg',
+    MallocStackLogging: '0',
+    MallocNanoZone: '0',
+    LANG: 'en_US.UTF-8',
+    LC_ALL: 'en_US.UTF-8',
+  };
+  // Only pass PYTHON_PATH if needed, but not other secrets
+  if (process.env.PYTHON_PATH) {
+    env.PYTHON_PATH = process.env.PYTHON_PATH;
+  }
+  return env;
+}
+
+// Security wrapper for test execution
+// Primary security is pattern detection + clean environment
+const SECURITY_WRAPPER = `
+import sys
+import io
+import os
+import builtins
+import warnings
+from contextlib import redirect_stdout, redirect_stderr
+
+# Suppress warnings for cleaner output
+warnings.filterwarnings('ignore')
+
+# ============================================
+# SECURITY SANDBOX SETUP (Second Line of Defense)
+# Primary security is pattern detection + clean environment
+# ============================================
+
+# Block dangerous system operations
+os.system = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.system not allowed in sandbox"))
+os.popen = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.popen not allowed in sandbox"))
+if hasattr(os, 'spawn'):
+    os.spawn = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawn not allowed"))
+if hasattr(os, 'spawnl'):
+    os.spawnl = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnl not allowed"))
+if hasattr(os, 'spawnle'):
+    os.spawnle = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnle not allowed"))
+if hasattr(os, 'spawnlp'):
+    os.spawnlp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnlp not allowed"))
+if hasattr(os, 'spawnlpe'):
+    os.spawnlpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnlpe not allowed"))
+if hasattr(os, 'spawnv'):
+    os.spawnv = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnv not allowed"))
+if hasattr(os, 'spawnve'):
+    os.spawnve = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnve not allowed"))
+if hasattr(os, 'spawnvp'):
+    os.spawnvp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnvp not allowed"))
+if hasattr(os, 'spawnvpe'):
+    os.spawnvpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.spawnvpe not allowed"))
+if hasattr(os, 'execl'):
+    os.execl = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execl not allowed"))
+if hasattr(os, 'execle'):
+    os.execle = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execle not allowed"))
+if hasattr(os, 'execlp'):
+    os.execlp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execlp not allowed"))
+if hasattr(os, 'execlpe'):
+    os.execlpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execlpe not allowed"))
+if hasattr(os, 'execv'):
+    os.execv = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execv not allowed"))
+if hasattr(os, 'execve'):
+    os.execve = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execve not allowed"))
+if hasattr(os, 'execvp'):
+    os.execvp = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execvp not allowed"))
+if hasattr(os, 'execvpe'):
+    os.execvpe = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("os.execvpe not allowed"))
+if hasattr(os, 'fork'):
+    os.fork = lambda: (_ for _ in ()).throw(PermissionError("os.fork not allowed"))
+if hasattr(os, 'forkpty'):
+    os.forkpty = lambda: (_ for _ in ()).throw(PermissionError("os.forkpty not allowed"))
+if hasattr(os, 'killpg'):
+    os.killpg = lambda *args: (_ for _ in ()).throw(PermissionError("os.killpg not allowed"))
+if hasattr(os, 'kill'):
+    os.kill = lambda *args: (_ for _ in ()).throw(PermissionError("os.kill not allowed"))
+
+# Block subprocess module
+try:
+    import subprocess
+    subprocess.run = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.call = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.check_call = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.check_output = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.Popen = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.getoutput = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+    subprocess.getstatusoutput = lambda *args, **kwargs: (_ for _ in ()).throw(PermissionError("subprocess not allowed"))
+except ImportError:
+    pass
+
+# Create restricted open function to block access to sensitive files
+_original_open = builtins.open
+_ALLOWED_PATHS = ['/tmp/quantum-sandbox']
+
+def _restricted_open(file, mode='r', *args, **kwargs):
+    """Restricted open that blocks access to sensitive files"""
+    if isinstance(file, (str, bytes)):
+        file_str = file if isinstance(file, str) else file.decode()
+        if file_str.startswith('/'):
+            file_str_lower = file_str.lower()
+            
+            # Block reading system sensitive paths
+            blocked_prefixes = ['/etc/passwd', '/etc/shadow', '/proc/self', '/proc/1']
+            for prefix in blocked_prefixes:
+                if file_str_lower.startswith(prefix):
+                    raise PermissionError(f"Access to {prefix} is not allowed in sandbox")
+            
+            # Block reading obvious secrets
+            blocked_patterns = ['.env.local', '.env.', 'secrets', 'credentials', 'private_key']
+            for pattern in blocked_patterns:
+                if pattern in file_str_lower:
+                    raise PermissionError(f"Access to files matching '{pattern}' is not allowed in sandbox")
+    
+    return _original_open(file, mode, *args, **kwargs)
+
+builtins.open = _restricted_open
+
+# ============================================
+# END SECURITY SANDBOX SETUP
+# ============================================
+
+# Setup matplotlib non-interactive backend
+try:
+    import matplotlib
+    matplotlib.use('Agg')
+except ImportError:
+    pass
+
+# Now execute the user code
+`;
+
+/**
+ * Build executable code combining solution and test with security wrapper.
+ */
+function buildSecureExecutableCode(
+  userCode: string,
+  testCode: string,
+  entryPoint: string
+): string {
+  // Deduplicate imports between code and test
+  const codeImports = new Set(
+    userCode.match(/^(?:from|import)\s+.+$/gm) || []
+  );
+
+  const testLines: string[] = [];
+  for (const line of testCode.split('\n')) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('from ') || trimmed.startsWith('import ')) {
+      if (!codeImports.has(trimmed)) {
+        testLines.push(line);
+      }
+    } else {
+      testLines.push(line);
+    }
+  }
+
+  const cleanedTest = testLines.join('\n');
+  const executionTrigger = getTestExecutionTrigger(testCode, entryPoint);
+
+  // Escape user code for embedding
+  const escapedUserCode = userCode
+    .replace(/\\/g, '\\\\')
+    .replace(/'''/g, "\\'\\'\\'");
+
+  const escapedTestCode = cleanedTest
+    .replace(/\\/g, '\\\\')
+    .replace(/'''/g, "\\'\\'\\'");
+
+  return `${SECURITY_WRAPPER}
+try:
+    exec(compile('''
+${escapedUserCode}
+
+${escapedTestCode}${executionTrigger}
+
+print("TEST_PASSED")
+''', '<user_code>', 'exec'), {'__builtins__': builtins, '__name__': '__main__'})
+except Exception as e:
+    import traceback
+    traceback.print_exc()
+`;
+}
+
+/**
+ * Determine the test execution trigger.
+ */
+function getTestExecutionTrigger(testCode: string, entryPoint: string): string {
+  const hasCheck = /def\s+check\s*\(/.test(testCode);
+  const testFuncMatch = testCode.match(/def\s+(test_\w+)\s*\(/);
+
+  if (hasCheck && entryPoint) {
+    const checkCallPattern = new RegExp(
+      `check\\s*\\(\\s*${entryPoint.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\)`
+    );
+    if (checkCallPattern.test(testCode)) {
+      return '';
+    }
+    return `\ncheck(${entryPoint})`;
+  } else if (testFuncMatch) {
+    const testName = testFuncMatch[1];
+    return `\n${testName}()`;
+  }
+
+  return '';
+}
+
+/**
+ * Extract meaningful error message from stderr.
+ */
+function extractErrorMessage(stderr: string): string {
+  if (!stderr) return 'Unknown error';
+
+  const lines = stderr.split('\n');
+
+  const errorTypes = [
+    'AssertionError',
+    'TypeError',
+    'ValueError',
+    'AttributeError',
+    'ImportError',
+    'ModuleNotFoundError',
+    'NameError',
+    'KeyError',
+    'IndexError',
+    'RuntimeError',
+    'SyntaxError',
+    'IndentationError',
+    'PermissionError',
+  ];
+
+  let errorLineIdx = -1;
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i].trim();
+    if (
+      line &&
+      (errorTypes.some((et) => line.startsWith(et)) || line.includes('Error:'))
+    ) {
+      errorLineIdx = i;
+      break;
+    }
+  }
+
+  if (errorLineIdx === -1) {
+    return stderr.slice(-500).trim();
+  }
+
+  const errorLine = lines[errorLineIdx].trim();
+
+  if (errorLine.startsWith('AssertionError')) {
+    for (let i = errorLineIdx - 1; i >= Math.max(0, errorLineIdx - 10); i--) {
+      const line = lines[i].trim();
+      if (line.startsWith('assert ')) {
+        if (errorLine === 'AssertionError') {
+          return `AssertionError at: ${line}`;
+        }
+        return `${errorLine} at: ${line}`;
+      }
+    }
+
+    for (let i = errorLineIdx - 1; i >= Math.max(0, errorLineIdx - 5); i--) {
+      if (lines[i].includes('File ') && lines[i].includes(', line ')) {
+        if (i + 1 < errorLineIdx) {
+          const codeLine = lines[i + 1].trim();
+          if (errorLine === 'AssertionError') {
+            return `AssertionError at: ${codeLine}`;
+          }
+          return `${errorLine} at: ${codeLine}`;
+        }
+        break;
+      }
+    }
+  }
+
+  if (
+    errorLine.startsWith('AttributeError') ||
+    errorLine.startsWith('ImportError') ||
+    errorLine.startsWith('ModuleNotFoundError') ||
+    errorLine.startsWith('PermissionError')
+  ) {
+    return errorLine;
+  }
+
+  return errorLine || stderr.slice(-500).trim();
+}
+
+/**
+ * Run tests with security wrapper.
+ */
+async function runTests(
+  userCode: string,
+  testCode: string,
+  entryPoint: string,
+  timeout: number
+): Promise<TestResult> {
+  const startTime = Date.now();
+  const tempDir = join(tmpdir(), 'quantum-sandbox');
+  const tempFile = join(tempDir, `test_${randomUUID()}.py`);
+
+  try {
+    await mkdir(tempDir, { recursive: true });
+
+    // Build secure executable code with security wrapper
+    const fullCode = buildSecureExecutableCode(userCode, testCode, entryPoint);
+    await writeFile(tempFile, fullCode, 'utf-8');
+
+    return await new Promise<TestResult>((resolve) => {
+      let stdout = '';
+      let stderr = '';
+      let killed = false;
+
+      const pythonPath = process.env.PYTHON_PATH || 'python3';
+
+      const pythonProcess = spawn(pythonPath, [tempFile], {
+        timeout: timeout * 1000,
+        env: getSafeEnv() as NodeJS.ProcessEnv,
+        cwd: tempDir,
+      });
+
+      pythonProcess.stdout.on('data', (data: Buffer) => {
+        stdout += data.toString();
+      });
+
+      pythonProcess.stderr.on('data', (data: Buffer) => {
+        stderr += data.toString();
+      });
+
+      const timeoutId = setTimeout(() => {
+        killed = true;
+        pythonProcess.kill('SIGKILL');
+      }, timeout * 1000);
+
+      pythonProcess.on('close', (code) => {
+        clearTimeout(timeoutId);
+        const executionTime = Date.now() - startTime;
+
+        if (killed) {
+          resolve({
+            passed: false,
+            total: 1,
+            failed: 1,
+            details: [
+              {
+                name: 'Execution',
+                passed: false,
+                error: `Execution timeout (>${timeout}s). Your code took too long to execute.`,
+              },
+            ],
+            executionTime,
+            error: `Execution timeout (>${timeout}s)`,
+          });
+          return;
+        }
+
+        const stdoutClean = stdout.trim();
+        const testPassed = code === 0 && stdoutClean.includes('TEST_PASSED');
+
+        if (testPassed) {
+          const outputBeforePass = stdoutClean
+            .replace('TEST_PASSED', '')
+            .trim();
+
+          resolve({
+            passed: true,
+            total: 1,
+            failed: 0,
+            details: [
+              {
+                name: 'All tests',
+                passed: true,
+              },
+            ],
+            executionTime,
+            output: outputBeforePass || undefined,
+          });
+        } else {
+          const cleanStderr = stderr
+            .split('\n')
+            .filter(
+              (line) =>
+                !line.includes('UserWarning') &&
+                !line.includes('DeprecationWarning') &&
+                !line.includes('FutureWarning') &&
+                !line.includes('from cryptography')
+            )
+            .join('\n')
+            .trim();
+
+          const errorMessage = extractErrorMessage(cleanStderr);
+          const fullTraceback = cleanStderr || stderr.trim();
+
+          resolve({
+            passed: false,
+            total: 1,
+            failed: 1,
+            details: [
+              {
+                name: 'Test execution',
+                passed: false,
+                error: errorMessage,
+              },
+            ],
+            executionTime,
+            error: errorMessage,
+            traceback: fullTraceback !== errorMessage ? fullTraceback : undefined,
+            output: stdoutClean || undefined,
+          });
+        }
+      });
+
+      pythonProcess.on('error', (err) => {
+        clearTimeout(timeoutId);
+        resolve({
+          passed: false,
+          total: 0,
+          failed: 0,
+          details: [],
+          executionTime: Date.now() - startTime,
+          error: `Failed to start Python: ${err.message}`,
+        });
+      });
+    });
+  } finally {
+    try {
+      await unlink(tempFile);
+    } catch {
+      // Ignore cleanup errors
+    }
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body: TestRequestBody = await request.json();
+    const { userCode, testCode, entryPoint, timeout = 30 } = body;
+
+    if (!userCode || typeof userCode !== 'string') {
+      return new Response(
+        JSON.stringify({ error: 'Invalid request: userCode string required' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    if (!testCode || typeof testCode !== 'string') {
+      return new Response(
+        JSON.stringify({ error: 'Invalid request: testCode string required' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // Limit code length
+    if (userCode.length > 50000 || testCode.length > 50000) {
+      return new Response(
+        JSON.stringify({ error: 'Code too long (max 50KB each)' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // Validate user code for dangerous patterns (first line of defense)
+    const userValidation = validateCode(userCode);
+    if (!userValidation.valid) {
+      return new Response(
+        JSON.stringify({
+          passed: false,
+          total: 0,
+          failed: 0,
+          details: [],
+          executionTime: 0,
+          error: userValidation.error,
+        } as TestResult),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    const safeTimeout = Math.min(Math.max(timeout, 5), 60);
+    const result = await runTests(userCode, testCode, entryPoint, safeTimeout);
+
+    return new Response(JSON.stringify(result), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    console.error('Test API error:', error);
+
+    return new Response(
+      JSON.stringify({
+        passed: false,
+        total: 0,
+        failed: 0,
+        details: [],
+        executionTime: 0,
+        error: error instanceof Error ? error.message : 'Test execution failed',
+      } as TestResult),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+}

src/app/api/warmup/route.ts

@@ -0,0 +1,192 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(): Promise<NextResponse> {
+  const baseUrl = process.env.DEMO_MODEL_URL || 'http://localhost:8000/v1';
+  const apiKey = process.env.DEMO_API_KEY || '';
+  const modelName = process.env.DEMO_MODEL_NAME || 'default';
+
+  console.log('[Warmup] Starting warmup...');
+  console.log('[Warmup] Base URL:', baseUrl);
+
+  const runpodMatch = baseUrl.match(/https:\/\/api\.runpod\.ai\/v2\/([^/]+)/);
+  
+  if (!runpodMatch) {
+    console.log('[Warmup] Not a RunPod endpoint, skipping');
+    return NextResponse.json({ 
+      status: 'skipped', 
+      message: 'Not a RunPod endpoint',
+    });
+  }
+
+  const endpointId = runpodMatch[1];
+  console.log('[Warmup] Endpoint ID:', endpointId);
+
+  try {
+    const healthUrl = `https://api.runpod.ai/v2/${endpointId}/health`;
+    let healthData = null;
+    
+    try {
+      const healthResponse = await fetch(healthUrl, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+        },
+        signal: AbortSignal.timeout(5000),
+      });
+
+      if (healthResponse.ok) {
+        healthData = await healthResponse.json();
+        console.log('[Warmup] Health:', JSON.stringify(healthData));
+        
+        if (healthData.workers?.idle > 0) {
+          console.log('[Warmup] Idle workers available');
+          return NextResponse.json({
+            status: 'ready',
+            message: 'Workers already available',
+            workers: healthData.workers,
+          });
+        }
+        
+        if (healthData.workers?.initializing > 0) {
+          console.log('[Warmup] Workers already initializing');
+          return NextResponse.json({
+            status: 'warming',
+            message: 'Workers already starting',
+            workers: healthData.workers,
+          });
+        }
+      }
+    } catch (e) {
+      console.log('[Warmup] Health check error:', e);
+    }
+
+    const openaiUrl = `${baseUrl}/chat/completions`;
+    console.log('[Warmup] Sending to OpenAI endpoint:', openaiUrl);
+    
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), 5000);
+    
+    try {
+      const warmupResponse = await fetch(openaiUrl, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          model: modelName,
+          messages: [{ role: 'user', content: 'hi' }],
+          max_tokens: 1,
+          stream: false,
+        }),
+        signal: abortController.signal,
+      });
+
+      clearTimeout(timeoutId);
+      
+      console.log('[Warmup] Response status:', warmupResponse.status);
+      
+      return NextResponse.json({
+        status: warmupResponse.status === 200 ? 'ready' : 'warming',
+        message: warmupResponse.status === 200 
+          ? 'Model responded (was ready)' 
+          : 'Request queued, worker starting',
+        httpStatus: warmupResponse.status,
+        workers: healthData?.workers,
+      });
+      
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+      
+      if ((fetchError as Error).name === 'AbortError') {
+        console.log('[Warmup] Request sent (aborted wait - worker starting)');
+        return NextResponse.json({
+          status: 'warming',
+          message: 'Request sent, worker starting',
+          workers: healthData?.workers,
+        });
+      }
+      
+      throw fetchError;
+    }
+
+  } catch (error) {
+    console.error('[Warmup] Error:', error);
+    return NextResponse.json({
+      status: 'error',
+      message: error instanceof Error ? error.message : 'Warmup failed',
+    }, { status: 500 });
+  }
+}
+
+export async function GET(): Promise<NextResponse> {
+  const baseUrl = process.env.DEMO_MODEL_URL || 'http://localhost:8000/v1';
+  const apiKey = process.env.DEMO_API_KEY || '';
+
+  const runpodMatch = baseUrl.match(/https:\/\/api\.runpod\.ai\/v2\/([^/]+)/);
+  
+  if (!runpodMatch) {
+    return NextResponse.json({ 
+      ready: true,
+      message: 'Not a RunPod endpoint' 
+    });
+  }
+
+  const endpointId = runpodMatch[1];
+  const healthUrl = `https://api.runpod.ai/v2/${endpointId}/health`;
+
+  try {
+    const response = await fetch(healthUrl, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+      },
+      signal: AbortSignal.timeout(10000), 
+    });
+
+    if (!response.ok) {
+      console.log('[Warmup GET] Health check failed:', response.status);
+      return NextResponse.json({ ready: false, message: 'Health check failed' });
+    }
+
+    const health = await response.json();
+    console.log('[Warmup GET] Health:', JSON.stringify(health));
+    
+    const idleWorkers = health.workers?.idle || 0;
+    const readyWorkers = health.workers?.ready || 0;
+    const runningWorkers = health.workers?.running || 0;
+    const initializingWorkers = health.workers?.initializing || 0;
+    const throttledWorkers = health.workers?.throttled || 0;
+    
+    const isReady = idleWorkers > 0 || readyWorkers > 0;
+    const isWarming = initializingWorkers > 0;
+    const isBusy = runningWorkers > 0 && !isReady;
+    const jobsInQueue = health.jobs?.inQueue || 0;
+    const jobsInProgress = health.jobs?.inProgress || 0;
+
+    return NextResponse.json({
+      ready: isReady,
+      warming: isWarming,
+      busy: isBusy,
+      jobsInQueue,
+      jobsInProgress,
+      workers: {
+        idle: idleWorkers,
+        ready: readyWorkers,
+        running: runningWorkers,
+        initializing: initializingWorkers,
+        throttled: throttledWorkers,
+      },
+    });
+  } catch (error) {
+    const isTimeout = error instanceof Error && error.name === 'TimeoutError';
+    if (!isTimeout) {
+      console.error('[Warmup GET] Error:', error);
+    }
+    return NextResponse.json({ 
+      ready: false, 
+      warming: true, 
+      message: isTimeout ? 'Health check timed out' : 'Check failed'
+    });
+  }
+}

src/app/globals.css

@@ -0,0 +1,390 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+@layer base {
+  * {
+    @apply border-zinc-800;
+  }
+
+  body {
+    @apply bg-zinc-950 text-zinc-100 antialiased;
+    font-family: var(--font-sans);
+  }
+
+  ::selection {
+    @apply bg-teal-600/40 text-white;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-zinc-700 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-zinc-600;
+  }
+}
+
+@layer utilities {
+  .animate-in {
+    animation: animateIn 0.3s ease-out forwards;
+  }
+
+  @keyframes animateIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .typing-indicator span {
+    @apply inline-block w-2 h-2 bg-teal-500 rounded-full mx-0.5;
+    animation: typing 1.4s infinite ease-in-out both;
+  }
+
+  .typing-indicator span:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+
+  .typing-indicator span:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+
+  .typing-indicator span:nth-child(3) {
+    animation-delay: 0s;
+  }
+
+  @keyframes typing {
+
+    0%,
+    80%,
+    100% {
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+/* Code block wrapper - clean backgrounds */
+.code-block-wrapper pre,
+.code-block-wrapper code,
+.code-block-wrapper span {
+  background: transparent !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
+.code-block-wrapper pre>div {
+  background: #18181b !important;
+}
+
+.code-block-wrapper .token {
+  background: transparent !important;
+}
+
+.code-block-wrapper pre code span {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+}
+
+/* Markdown styling */
+.markdown-content {
+  @apply leading-relaxed;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3 {
+  @apply font-semibold text-zinc-100 mt-6 mb-3;
+}
+
+.markdown-content h1 {
+  @apply text-2xl;
+}
+
+.markdown-content h2 {
+  @apply text-xl;
+}
+
+.markdown-content h3 {
+  @apply text-lg;
+}
+
+.markdown-content p {
+  @apply mb-4 text-zinc-300;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  @apply mb-4 pl-6 text-zinc-300;
+}
+
+.markdown-content ul {
+  @apply list-disc;
+}
+
+.markdown-content ol {
+  @apply list-decimal;
+}
+
+.markdown-content li {
+  @apply mb-1;
+}
+
+.markdown-content code:not(pre code) {
+  @apply bg-zinc-800 px-1.5 py-0.5 rounded text-teal-300 text-sm font-mono;
+}
+
+.markdown-content pre {
+  @apply mb-4 !bg-zinc-900 rounded-lg overflow-x-auto;
+}
+
+.markdown-content a {
+  @apply text-teal-400 hover:text-teal-300 underline underline-offset-2;
+}
+
+.markdown-content blockquote {
+  @apply border-l-4 border-teal-600/50 pl-4 italic text-zinc-400 my-4;
+}
+
+.markdown-content hr {
+  @apply border-zinc-800 my-6;
+}
+
+.markdown-content table {
+  @apply w-full border-collapse mb-4;
+}
+
+.markdown-content th,
+.markdown-content td {
+  @apply border border-zinc-700 px-3 py-2 text-left;
+}
+
+.markdown-content th {
+  @apply bg-zinc-800 font-medium;
+}
+
+/* KaTeX math styling for dark theme */
+.markdown-content .katex {
+  @apply text-zinc-100;
+  font-size: 1.1em;
+}
+
+.markdown-content .katex-display {
+  @apply my-4 overflow-x-auto overflow-y-hidden py-2;
+}
+
+.markdown-content .katex-display>.katex {
+  @apply text-zinc-100;
+}
+
+/* Inline math styling */
+.markdown-content .math-inline {
+  @apply text-zinc-100;
+}
+
+/* Display/block math styling */
+.markdown-content .math-display {
+  @apply bg-zinc-800/50 rounded-lg px-4 py-3 my-4;
+}
+
+/* KaTeX color overrides for dark theme */
+.katex .mord,
+.katex .mbin,
+.katex .mrel,
+.katex .mopen,
+.katex .mclose,
+.katex .mpunct,
+.katex .minner {
+  color: inherit;
+}
+
+.katex .mathnormal {
+  color: #93c5fd;
+  /* blue-300 for variables */
+}
+
+.katex .text {
+  color: #d4d4d8;
+  /* zinc-300 */
+}
+
+.katex .mop {
+  color: #c4b5fd;
+  /* violet-300 for operators like sum, integral */
+}
+
+.katex .sqrt>.root {
+  color: #86efac;
+  /* emerald-300 */
+}
+
+.katex-html {
+  color: #e4e4e7;
+  /* zinc-200 */
+}
+
+/* Execution result styling */
+.execution-output {
+  @apply font-mono text-sm;
+}
+
+.execution-output pre {
+  @apply whitespace-pre-wrap break-words;
+}
+
+/* Circuit ASCII art preservation */
+.circuit-output {
+  @apply font-mono text-xs leading-tight tracking-tight;
+  font-feature-settings: "liga" 0;
+}
+
+/* Pulse animation for loading states */
+@keyframes executePulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.execution-loading {
+  animation: executePulse 1.5s ease-in-out infinite;
+}
+
+/* Run button glow effect */
+.run-button-glow {
+  box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
+}
+
+.run-button-glow:hover {
+  box-shadow: 0 0 20px rgba(20, 184, 166, 0.5);
+}
+
+/* Practice mode styles */
+.practice-layout {
+  @apply flex h-full;
+}
+
+/* Monaco editor container */
+.monaco-container {
+  @apply h-full w-full;
+}
+
+.monaco-container .monaco-editor {
+  @apply rounded-none;
+}
+
+/* Problem panel transition */
+.problem-panel-transition {
+  transition: width 200ms ease-out;
+}
+
+/* Drag handle indicator */
+.drag-handle-active {
+  @apply bg-teal-500/70;
+}
+
+/* Test result animations */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.test-result-animate {
+  animation: slideIn 0.2s ease-out forwards;
+}
+
+/* AI Helper chat bubble */
+.ai-bubble {
+  @apply relative;
+}
+
+.ai-bubble::before {
+  content: '';
+  @apply absolute w-2 h-2 bg-zinc-800/80 rotate-45;
+  left: -4px;
+  top: 12px;
+}
+
+/* Code completion success glow */
+.success-glow {
+  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
+}
+
+/* Scrollbar customization for panels */
+.panel-scrollbar::-webkit-scrollbar {
+  @apply w-1.5;
+}
+
+.panel-scrollbar::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+.panel-scrollbar::-webkit-scrollbar-thumb {
+  @apply bg-zinc-700/50 rounded-full;
+}
+
+.panel-scrollbar::-webkit-scrollbar-thumb:hover {
+  @apply bg-zinc-600/50;
+}
+
+/* Mode toggle active state */
+.mode-toggle-active {
+  @apply bg-teal-600 text-white shadow-sm;
+}
+
+/* Problem card hover effect */
+.problem-card-hover {
+  @apply hover:border-teal-700/40 hover:bg-zinc-800/80;
+}
+
+/* Solved problem indicator */
+.solved-indicator {
+  @apply text-emerald-500;
+}
+
+/* Resize cursor override */
+.resizing-active * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}

src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import { PROJECT_CONFIG } from '@/config/constants';
+import { DatasetProvider } from '@/lib/dataset/DatasetProvider';
+import 'katex/dist/katex.min.css';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: `${PROJECT_CONFIG.name} | Demo`,
+  description: PROJECT_CONFIG.description,
+  authors: [{ name: PROJECT_CONFIG.author }],
+  keywords: [
+    'quantum computing',
+    'qiskit',
+    'vision language model',
+    'code generation',
+    'multimodal AI',
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <body className="min-h-screen bg-zinc-950">
+        <DatasetProvider initialSplits={['test', 'validation']}>
+          <div className="relative z-10">{children}</div>
+        </DatasetProvider>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { PanelRightOpen, PanelRightClose, ChevronRight, ChevronLeft, MessageSquare, Code } from 'lucide-react';
+import { clsx } from 'clsx';
+import { Header, ChatInterface, ExamplesPanel, PracticeInterface } from '@/components';
+import { PROJECT_CONFIG } from '@/config/constants';
+import type { DatasetExample, AppMode } from '@/types';
+
+export default function HomePage() {
+  const [selectedExample, setSelectedExample] = useState<DatasetExample | null>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(true);
+  const [isPanelCollapsed, setIsPanelCollapsed] = useState(false);
+  const [panelWidth, setPanelWidth] = useState(320);
+  const [mode, setMode] = useState<AppMode>('chat');
+  const [isDragging, setIsDragging] = useState(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+
+  const handleSelectExample = useCallback((example: DatasetExample) => {
+    setSelectedExample(example);
+  }, []);
+
+  const handleExampleUsed = useCallback(() => {
+    setSelectedExample(null);
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+    startWidthRef.current = panelWidth;
+  }, [panelWidth]);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging) return;
+      const diff = startXRef.current - e.clientX;
+      const newWidth = Math.min(500, Math.max(240, startWidthRef.current + diff));
+      setPanelWidth(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      if (isDragging) {
+        setIsDragging(false);
+        localStorage.setItem('examplesPanelWidth', panelWidth.toString());
+      }
+    };
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isDragging, panelWidth]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('examplesPanelWidth');
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (!isNaN(parsed) && parsed >= 240 && parsed <= 500) {
+          setPanelWidth(parsed);
+        }
+      }
+    }
+  }, []);
+
+  const currentWidth = isPanelCollapsed ? 48 : panelWidth;
+
+  return (
+    <div className="min-h-screen flex flex-col bg-zinc-950">
+      <Header mode={mode} onModeChange={setMode} />
+
+      <main className="flex-1 flex overflow-hidden">
+        {mode === 'chat' ? (
+          <>
+            <div
+              className={clsx(
+                'flex-1 flex flex-col',
+                'transition-[margin]',
+                isDragging ? 'duration-0' : 'duration-300',
+                isPanelOpen && !isPanelCollapsed ? '' : '',
+                isPanelOpen ? '' : ''
+              )}
+              style={{
+                marginRight: isPanelOpen ? currentWidth : 0,
+              }}
+            >
+              <div className="flex items-center justify-end px-4 py-2 border-b border-zinc-800/80 lg:hidden">
+                <button
+                  onClick={() => setIsPanelOpen(!isPanelOpen)}
+                  className="p-2 rounded-md hover:bg-zinc-800/50 transition-colors"
+                >
+                  {isPanelOpen ? (
+                    <PanelRightClose className="w-5 h-5 text-zinc-500" />
+                  ) : (
+                    <PanelRightOpen className="w-5 h-5 text-zinc-500" />
+                  )}
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-hidden">
+                <ChatInterface
+                  selectedExample={selectedExample}
+                  onExampleUsed={handleExampleUsed}
+                />
+              </div>
+            </div>
+
+            <aside
+              className={clsx(
+                'fixed right-0 top-[57px] bottom-0 bg-zinc-900/95 backdrop-blur-sm border-l border-zinc-800/80',
+                'transform z-40',
+                'transition-[transform,width]',
+                isDragging ? 'duration-0' : 'duration-300',
+                'lg:translate-x-0',
+                isPanelOpen ? 'translate-x-0' : 'translate-x-full'
+              )}
+              style={{ width: currentWidth }}
+            >
+              {/* Resize handle */}
+              {!isPanelCollapsed && (
+                <div
+                  onMouseDown={handleMouseDown}
+                  className={clsx(
+                    'absolute top-0 bottom-0 -left-0.5 w-1 cursor-col-resize z-50',
+                    'hover:bg-teal-500/50 transition-colors',
+                    isDragging && 'bg-teal-500/70'
+                  )}
+                >
+                  <div
+                    className={clsx(
+                      'absolute top-1/2 -translate-y-1/2 w-4 h-16 -left-1.5',
+                      'flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity',
+                      isDragging && 'opacity-100'
+                    )}
+                  >
+                    <div className="w-1 h-8 rounded-full bg-zinc-600 flex flex-col items-center justify-center gap-1">
+                      <div className="w-0.5 h-1 rounded-full bg-zinc-400" />
+                      <div className="w-0.5 h-1 rounded-full bg-zinc-400" />
+                      <div className="w-0.5 h-1 rounded-full bg-zinc-400" />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <button
+                onClick={() => setIsPanelCollapsed(!isPanelCollapsed)}
+                className="hidden lg:flex absolute -left-3 top-4 w-6 h-6 rounded-full bg-zinc-800 border border-zinc-700/50 items-center justify-center hover:bg-zinc-700 transition-colors z-50"
+                title={isPanelCollapsed ? 'Expand panel' : 'Collapse panel'}
+              >
+                {isPanelCollapsed ? (
+                  <ChevronLeft className="w-4 h-4 text-zinc-400" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 text-zinc-400" />
+                )}
+              </button>
+
+              {isPanelCollapsed ? (
+                <div className="h-full flex flex-col items-center pt-8">
+                  <button
+                    onClick={() => setIsPanelCollapsed(false)}
+                    className="p-2 rounded-md hover:bg-zinc-800/50 transition-colors"
+                    title="Expand examples"
+                  >
+                    <span className="text-xs text-zinc-500 [writing-mode:vertical-lr] rotate-180 font-medium">
+                      Test Examples
+                    </span>
+                  </button>
+                </div>
+              ) : (
+                <ExamplesPanel onSelectExample={handleSelectExample} />
+              )}
+            </aside>
+
+            {isPanelOpen && (
+              <div
+                className="fixed inset-0 bg-black/50 z-30 lg:hidden"
+                onClick={() => setIsPanelOpen(false)}
+              />
+            )}
+          </>
+        ) : (
+          <PracticeInterface className="flex-1" />
+        )}
+      </main>
+
+      <footer className="bg-zinc-900/95 border-t border-zinc-800/80 py-3 px-4 text-center text-xs text-zinc-500">
+        <p>
+          {PROJECT_CONFIG.name} - {PROJECT_CONFIG.year} |{' '}
+          <span>{PROJECT_CONFIG.institution}</span> |{' '}
+          Apache 2.0 License
+        </p>
+      </footer>
+    </div>
+  );
+}

src/components/Chat/ChatInterface.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Message } from './Message';
+import { MessageInput, MessageInputRef } from './MessageInput';
+import { QubitIcon } from './QubitIcon';
+import { LoadingStatus } from './LoadingStatus';
+import { SYSTEM_PROMPT } from '@/config/constants';
+import { resizeImageForInference, fetchAndResizeImage } from '@/lib/utils/image';
+import { postProcessResponse } from '@/lib/utils/response';
+import type { Message as MessageType, DatasetExample } from '@/types';
+
+interface ChatInterfaceProps {
+  selectedExample?: DatasetExample | null;
+  onExampleUsed?: () => void;
+}
+
+export function ChatInterface({ selectedExample, onExampleUsed }: ChatInterfaceProps) {
+  const [messages, setMessages] = useState<MessageType[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasStartedStreaming, setHasStartedStreaming] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<MessageInputRef>(null);
+  const processedExampleRef = useRef<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  useEffect(() => {
+    if (
+      selectedExample &&
+      selectedExample.id !== processedExampleRef.current
+    ) {
+      processedExampleRef.current = selectedExample.id;
+      inputRef.current?.setContent(
+        selectedExample.question,
+        selectedExample.imageUrl
+      );
+      onExampleUsed?.();
+    }
+  }, [selectedExample, onExampleUsed]);
+
+  const handleSendMessage = async (
+    content: string,
+    imageUrl?: string,
+    imageBase64?: string
+  ) => {
+    if (!content.trim() && !imageUrl && !imageBase64) return;
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+
+    const userMessage: MessageType = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      content,
+      imageUrl,
+      imageBase64,
+      timestamp: new Date(),
+    };
+
+    const assistantMessageId = crypto.randomUUID();
+    const loadingMessage: MessageType = {
+      id: assistantMessageId,
+      role: 'assistant',
+      content: '',
+      timestamp: new Date(),
+      isLoading: true,
+    };
+
+    setMessages((prev) => [...prev, userMessage, loadingMessage]);
+    setIsLoading(true);
+    setHasStartedStreaming(false);
+
+    try {
+      let imageData: string | undefined;
+
+      if (imageBase64) {
+        try {
+          imageData = await resizeImageForInference(`data:image/jpeg;base64,${imageBase64}`);
+        } catch (e) {
+          console.error('Failed to resize image:', e);
+          imageData = imageBase64;
+        }
+      } else if (imageUrl) {
+        try {
+          imageData = await fetchAndResizeImage(imageUrl);
+        } catch (e) {
+          console.error('Failed to fetch and resize image:', e);
+        }
+      }
+
+      const userContent = imageData
+        ? [
+          { type: 'text', text: content },
+          { type: 'image_url', image_url: { url: `data:image/jpeg;base64,${imageData}` } },
+        ]
+        : content;
+
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: [
+            { role: 'system', content: SYSTEM_PROMPT },
+            ...messages.map((m) => ({
+              role: m.role,
+              content: m.content,
+            })),
+            { role: 'user', content: userContent },
+          ],
+          stream: true,
+        }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Request failed');
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('No response body');
+      }
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let fullContent = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed || !trimmed.startsWith('data: ')) continue;
+
+          const jsonStr = trimmed.slice(6);
+          try {
+            const data = JSON.parse(jsonStr);
+
+            if (data.error) {
+              throw new Error(data.error);
+            }
+
+            if (data.content) {
+              // First content received - streaming has started
+              if (fullContent === '') {
+                setHasStartedStreaming(true);
+                setMessages((prev) =>
+                  prev.map((m) =>
+                    m.id === assistantMessageId ? { ...m, isLoading: false } : m
+                  )
+                );
+              }
+              
+              fullContent += data.content;
+              const processedContent = postProcessResponse(fullContent);
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantMessageId
+                    ? { ...m, content: processedContent }
+                    : m
+                )
+              );
+            }
+          } catch (e) {
+            if (e instanceof SyntaxError) continue;
+            throw e;
+          }
+        }
+      }
+
+      const finalContent = postProcessResponse(fullContent);
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantMessageId
+            ? { ...m, content: finalContent }
+            : m
+        )
+      );
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') {
+        return;
+      }
+
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantMessageId
+            ? {
+              ...m,
+              content: `Error: ${error instanceof Error ? error.message : 'Failed to get response'}`,
+              isLoading: false,
+            }
+            : m
+        )
+      );
+    } finally {
+      setIsLoading(false);
+      setHasStartedStreaming(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleClearChat = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    setMessages([]);
+    inputRef.current?.clear();
+    processedExampleRef.current = null;
+  };
+
+  const handleCopyCode = (code: string) => {
+    console.log('Code copied:', code.substring(0, 50) + '...');
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {messages.length > 0 && (
+        <div className="flex justify-end px-4 pt-2">
+          <button
+            onClick={handleClearChat}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-zinc-500 
+                       hover:text-zinc-300 hover:bg-zinc-800/50 rounded-md transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            Clear chat
+          </button>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center px-4">
+            <div className="w-16 h-16 mb-5 rounded-xl bg-zinc-800/80 border border-teal-700/30 flex items-center justify-center">
+              <QubitIcon size={32} className="text-teal-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-zinc-200 mb-2">
+              Quantum Assistant
+            </h2>
+            <p className="text-zinc-500 max-w-md mb-8 text-sm leading-relaxed">
+              Ask questions about quantum computing, generate Qiskit code, or upload circuit diagrams for analysis.
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full max-w-xl">
+              {[
+                { label: 'Circuits', text: 'Create a Bell state circuit' },
+                { label: 'Concepts', text: 'Explain Bloch sphere representation' },
+                { label: 'Algorithms', text: 'Implement VQE algorithm' },
+              ].map((suggestion, i) => (
+                <button
+                  key={i}
+                  onClick={() => inputRef.current?.setContent(suggestion.text)}
+                  className="bg-zinc-800/60 hover:bg-zinc-800 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg p-4 text-left group transition-all"
+                >
+                  <span className="text-[10px] font-mono text-teal-500/80 mb-2 block uppercase tracking-wider">
+                    {suggestion.label}
+                  </span>
+                  <span className="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors">
+                    {suggestion.text}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : (
+          messages.map((message) => (
+            <Message
+              key={message.id}
+              message={message}
+              onCopyCode={handleCopyCode}
+              loadingStatus={
+                message.isLoading ? (
+                  <LoadingStatus
+                    isLoading={isLoading}
+                    hasStartedStreaming={hasStartedStreaming}
+                  />
+                ) : undefined
+              }
+            />
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="p-4 border-t border-zinc-800/80">
+        <MessageInput ref={inputRef} onSend={handleSendMessage} isLoading={isLoading} />
+      </div>
+    </div>
+  );
+}

src/components/Chat/ExecutionResult.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useState } from 'react';
+import {
+    CheckCircle2,
+    XCircle,
+    Clock,
+    ChevronDown,
+    ChevronUp,
+    Terminal,
+    AlertTriangle,
+    Copy,
+    Check,
+    Image as ImageIcon,
+    Download,
+    ZoomIn,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+
+export interface ExecutionResultData {
+    success: boolean;
+    output: string;
+    error: string;
+    executionTime: number;
+    hasCircuitOutput?: boolean;
+    images?: string[]; // Base64 encoded images
+}
+
+interface ExecutionResultProps {
+    result: ExecutionResultData;
+    isLoading?: boolean;
+}
+
+function ImageViewer({ images }: { images: string[] }) {
+    const [selectedImage, setSelectedImage] = useState<number | null>(null);
+
+    const handleDownload = (base64: string, index: number) => {
+        const link = document.createElement('a');
+        link.href = `data:image/png;base64,${base64}`;
+        link.download = `quantum_output_${index + 1}.png`;
+        link.click();
+    };
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-2 text-xs text-zinc-500 mb-2">
+                <ImageIcon className="w-3.5 h-3.5" />
+                <span>Generated Figures ({images.length})</span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {images.map((base64, idx) => (
+                    <div
+                        key={idx}
+                        className="relative group rounded-lg overflow-hidden border border-zinc-700/50 bg-zinc-900"
+                    >
+                        <img
+                            src={`data:image/png;base64,${base64}`}
+                            alt={`Output figure ${idx + 1}`}
+                            className="w-full h-auto cursor-pointer hover:opacity-90 transition-opacity"
+                            onClick={() => setSelectedImage(idx)}
+                        />
+                        <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button
+                                onClick={() => setSelectedImage(idx)}
+                                className="p-1.5 rounded bg-zinc-800/90 hover:bg-zinc-700 transition-colors"
+                                title="View full size"
+                            >
+                                <ZoomIn className="w-3.5 h-3.5 text-zinc-300" />
+                            </button>
+                            <button
+                                onClick={() => handleDownload(base64, idx)}
+                                className="p-1.5 rounded bg-zinc-800/90 hover:bg-zinc-700 transition-colors"
+                                title="Download image"
+                            >
+                                <Download className="w-3.5 h-3.5 text-zinc-300" />
+                            </button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Full-size image modal */}
+            {selectedImage !== null && (
+                <div
+                    className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+                    onClick={() => setSelectedImage(null)}
+                >
+                    <div className="relative max-w-4xl max-h-[90vh] overflow-auto">
+                        <img
+                            src={`data:image/png;base64,${images[selectedImage]}`}
+                            alt={`Output figure ${selectedImage + 1}`}
+                            className="max-w-full h-auto rounded-lg"
+                            onClick={(e) => e.stopPropagation()}
+                        />
+                        <div className="absolute top-2 right-2 flex gap-2">
+                            <button
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleDownload(images[selectedImage], selectedImage);
+                                }}
+                                className="p-2 rounded-lg bg-zinc-800/90 hover:bg-zinc-700 transition-colors"
+                                title="Download image"
+                            >
+                                <Download className="w-4 h-4 text-zinc-300" />
+                            </button>
+                            <button
+                                onClick={() => setSelectedImage(null)}
+                                className="p-2 rounded-lg bg-zinc-800/90 hover:bg-zinc-700 transition-colors"
+                                title="Close"
+                            >
+                                <XCircle className="w-4 h-4 text-zinc-300" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function ExecutionResult({ result, isLoading }: ExecutionResultProps) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const [copied, setCopied] = useState(false);
+
+    const hasOutput = result.output.trim().length > 0;
+    const hasError = result.error.trim().length > 0;
+    const hasImages = result.images && result.images.length > 0;
+    const outputToShow = hasError ? result.error : result.output;
+
+    const handleCopy = async () => {
+        await navigator.clipboard.writeText(outputToShow);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    if (isLoading) {
+        return (
+            <div className="mt-3 rounded-lg border border-zinc-700/50 bg-zinc-900/50 overflow-hidden">
+                <div className="flex items-center gap-2 px-3 py-2 bg-zinc-800/50 border-b border-zinc-700/50">
+                    <div className="w-4 h-4 border-2 border-teal-500/30 border-t-teal-500 rounded-full animate-spin" />
+                    <span className="text-xs font-medium text-zinc-400">Executing code...</span>
+                </div>
+                <div className="p-3">
+                    <div className="flex items-center gap-2 text-zinc-500">
+                        <Terminal className="w-4 h-4" />
+                        <span className="text-sm">Running Python with Qiskit...</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={clsx(
+            'mt-3 rounded-lg border overflow-hidden transition-all duration-200',
+            result.success
+                ? 'border-emerald-600/30 bg-emerald-950/20'
+                : 'border-red-600/30 bg-red-950/20'
+        )}>
+            {/* Header */}
+            <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className={clsx(
+                    'w-full flex items-center justify-between px-3 py-2 transition-colors',
+                    result.success
+                        ? 'bg-emerald-900/30 hover:bg-emerald-900/40'
+                        : 'bg-red-900/30 hover:bg-red-900/40'
+                )}
+            >
+                <div className="flex items-center gap-2">
+                    {result.success ? (
+                        <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+                    ) : (
+                        <XCircle className="w-4 h-4 text-red-400" />
+                    )}
+                    <span className={clsx(
+                        'text-xs font-medium',
+                        result.success ? 'text-emerald-300' : 'text-red-300'
+                    )}>
+                        {result.success ? 'Execution Successful' : 'Execution Failed'}
+                    </span>
+
+                    <span className="flex items-center gap-1 text-xs text-zinc-500 ml-2">
+                        <Clock className="w-3 h-3" />
+                        {result.executionTime}ms
+                    </span>
+
+                    {hasImages && (
+                        <span className="flex items-center gap-1 text-xs text-teal-400 ml-2">
+                            <ImageIcon className="w-3 h-3" />
+                            {result.images?.length} figure{result.images?.length !== 1 ? 's' : ''}
+                        </span>
+                    )}
+                </div>
+
+                <div className="flex items-center gap-2">
+                    {(hasOutput || hasError || hasImages) && (
+                        <span className="text-xs text-zinc-500">
+                            {isExpanded ? 'Hide' : 'Show'} output
+                        </span>
+                    )}
+                    {isExpanded ? (
+                        <ChevronUp className="w-4 h-4 text-zinc-500" />
+                    ) : (
+                        <ChevronDown className="w-4 h-4 text-zinc-500" />
+                    )}
+                </div>
+            </button>
+
+            {/* Output */}
+            {isExpanded && (hasOutput || hasError || hasImages) && (
+                <div className="relative">
+                    {(hasOutput || hasError) && (
+                        <div className="absolute right-2 top-2 z-10">
+                            <button
+                                onClick={handleCopy}
+                                className="p-1.5 rounded bg-zinc-800/80 hover:bg-zinc-700 transition-colors"
+                                title="Copy output"
+                            >
+                                {copied ? (
+                                    <Check className="w-3.5 h-3.5 text-emerald-400" />
+                                ) : (
+                                    <Copy className="w-3.5 h-3.5 text-zinc-400" />
+                                )}
+                            </button>
+                        </div>
+                    )}
+
+                    <div className={clsx(
+                        'p-3 font-mono text-sm',
+                        result.success ? 'bg-zinc-900/50' : 'bg-zinc-900/50'
+                    )}>
+                        {hasError && (
+                            <div className="flex items-start gap-2 mb-3 text-red-400">
+                                <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                                <pre className="whitespace-pre-wrap break-words text-red-300">{result.error}</pre>
+                            </div>
+                        )}
+
+                        {hasOutput && (
+                            <pre className={clsx(
+                                'whitespace-pre-wrap break-words mb-3',
+                                result.hasCircuitOutput ? 'text-teal-300' : 'text-zinc-300'
+                            )}>
+                                {result.output}
+                            </pre>
+                        )}
+
+                        {!hasOutput && !hasError && !hasImages && result.success && (
+                            <span className="text-zinc-500 italic">
+                                Code executed successfully with no output
+                            </span>
+                        )}
+
+                        {/* Display generated images */}
+                        {hasImages && (
+                            <ImageViewer images={result.images!} />
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/Chat/LoadingStatus.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { Loader2, Server, Cpu, Zap, Clock, AlertCircle } from 'lucide-react';
+import { clsx } from 'clsx';
+import type { StatusResponse } from '@/app/api/status/route';
+
+type LoadingPhase = 
+  | 'sending'      // Initial request sent
+  | 'cold_start'   // Workers starting up
+  | 'initializing' // Model loading
+  | 'processing'   // Actively generating
+  | 'streaming';   // Receiving response
+
+interface LoadingStatusProps {
+  isLoading: boolean;
+  hasStartedStreaming: boolean;
+  onStatusChange?: (status: StatusResponse | null) => void;
+}
+
+const PHASE_CONFIG: Record<LoadingPhase, { 
+  icon: React.ElementType; 
+  label: string; 
+  color: string;
+  pulseColor: string;
+}> = {
+  sending: {
+    icon: Zap,
+    label: 'Sending request...',
+    color: 'text-blue-400',
+    pulseColor: 'bg-blue-400',
+  },
+  cold_start: {
+    icon: Server,
+    label: 'Starting worker...',
+    color: 'text-amber-400',
+    pulseColor: 'bg-amber-400',
+  },
+  initializing: {
+    icon: Cpu,
+    label: 'Loading model...',
+    color: 'text-purple-400',
+    pulseColor: 'bg-purple-400',
+  },
+  processing: {
+    icon: Loader2,
+    label: 'Generating response...',
+    color: 'text-teal-400',
+    pulseColor: 'bg-teal-400',
+  },
+  streaming: {
+    icon: Zap,
+    label: 'Receiving...',
+    color: 'text-emerald-400',
+    pulseColor: 'bg-emerald-400',
+  },
+};
+
+export function LoadingStatus({ isLoading, hasStartedStreaming, onStatusChange }: LoadingStatusProps) {
+  const [phase, setPhase] = useState<LoadingPhase>('sending');
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [estimatedWait, setEstimatedWait] = useState<number | undefined>();
+  const [statusMessage, setStatusMessage] = useState<string>('');
+
+  // Poll for status while loading
+  const checkStatus = useCallback(async () => {
+    try {
+      const response = await fetch('/api/status');
+      if (response.ok) {
+        const status: StatusResponse = await response.json();
+        onStatusChange?.(status);
+        
+        // Map status to phase
+        if (status.status === 'cold_start') {
+          setPhase('cold_start');
+          setStatusMessage(status.message);
+        } else if (status.status === 'initializing') {
+          setPhase('initializing');
+          setStatusMessage(status.message);
+        } else if (status.status === 'processing') {
+          setPhase('processing');
+          setStatusMessage(status.message);
+        }
+        
+        if (status.estimatedWait) {
+          setEstimatedWait(status.estimatedWait);
+        }
+      }
+    } catch {
+      // Silently fail, keep current phase
+    }
+  }, [onStatusChange]);
+
+  // Start polling when loading starts
+  useEffect(() => {
+    if (!isLoading) {
+      setPhase('sending');
+      setElapsedTime(0);
+      setEstimatedWait(undefined);
+      setStatusMessage('');
+      return;
+    }
+
+    // Initial status check
+    checkStatus();
+
+    // Poll every 2 seconds while loading and not streaming
+    const statusInterval = setInterval(() => {
+      if (!hasStartedStreaming) {
+        checkStatus();
+      }
+    }, 2000);
+
+    // Track elapsed time
+    const timeInterval = setInterval(() => {
+      setElapsedTime((prev) => prev + 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(statusInterval);
+      clearInterval(timeInterval);
+    };
+  }, [isLoading, hasStartedStreaming, checkStatus]);
+
+  // Update phase based on streaming state
+  useEffect(() => {
+    if (hasStartedStreaming) {
+      setPhase('streaming');
+    }
+  }, [hasStartedStreaming]);
+
+  // After 3 seconds without response, likely a cold start
+  useEffect(() => {
+    if (isLoading && !hasStartedStreaming && elapsedTime >= 3 && phase === 'sending') {
+      setPhase('cold_start');
+    }
+  }, [isLoading, hasStartedStreaming, elapsedTime, phase]);
+
+  if (!isLoading) return null;
+
+  const config = PHASE_CONFIG[phase];
+  const Icon = config.icon;
+  const showEstimate = estimatedWait && phase !== 'streaming';
+  
+  // Calculate progress percentage
+  const progress = estimatedWait ? Math.min((elapsedTime / estimatedWait) * 100, 95) : undefined;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Main status indicator */}
+      <div className="flex items-center gap-3">
+        {/* Animated icon */}
+        <div className="relative">
+          <div className={clsx(
+            'w-8 h-8 rounded-lg flex items-center justify-center',
+            'bg-zinc-800/80 border border-zinc-700/50'
+          )}>
+            <Icon className={clsx(
+              'w-4 h-4',
+              config.color,
+              phase !== 'streaming' && 'animate-pulse'
+            )} />
+          </div>
+          {/* Pulse effect for cold start */}
+          {(phase === 'cold_start' || phase === 'initializing') && (
+            <span className={clsx(
+              'absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full',
+              config.pulseColor,
+              'animate-ping opacity-75'
+            )} />
+          )}
+        </div>
+
+        {/* Status text */}
+        <div className="flex-1">
+          <div className={clsx('text-sm font-medium', config.color)}>
+            {statusMessage || config.label}
+          </div>
+          
+          {/* Time indicator */}
+          <div className="flex items-center gap-2 text-xs text-zinc-500">
+            <Clock className="w-3 h-3" />
+            <span>{formatTime(elapsedTime)}</span>
+            {showEstimate && (
+              <>
+                <span className="text-zinc-600">•</span>
+                <span>~{formatTime(Math.max(0, estimatedWait - elapsedTime))} remaining</span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Progress bar for cold start */}
+      {showEstimate && progress !== undefined && (
+        <div className="h-1 bg-zinc-800 rounded-full overflow-hidden">
+          <div 
+            className={clsx(
+              'h-full rounded-full transition-all duration-1000',
+              phase === 'cold_start' && 'bg-amber-500/50',
+              phase === 'initializing' && 'bg-purple-500/50',
+              phase === 'processing' && 'bg-teal-500/50'
+            )}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+
+      {/* Cold start explanation */}
+      {phase === 'cold_start' && elapsedTime >= 5 && (
+        <div className="flex items-start gap-2 p-2 bg-amber-500/5 border border-amber-500/20 rounded-lg text-xs">
+          <AlertCircle className="w-3.5 h-3.5 text-amber-400 mt-0.5 flex-shrink-0" />
+          <p className="text-zinc-400">
+            <span className="text-amber-400 font-medium">Cold start detected.</span>{' '}
+            The model is scaling up from zero. This typically takes 30-60 seconds on first request.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatTime(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}m ${secs}s`;
+}
+

src/components/Chat/Message.tsx

@@ -0,0 +1,563 @@
+'use client';
+
+import { useMemo, useState, useCallback } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import { InlineMath, BlockMath } from 'react-katex';
+import { Copy, Check, Play, Square, Edit2, X } from 'lucide-react';
+import Editor from '@monaco-editor/react';
+import { clsx } from 'clsx';
+import { QubitIcon } from './QubitIcon';
+import { ExecutionResult, ExecutionResultData } from './ExecutionResult';
+import type { Message as MessageType } from '@/types';
+
+interface MessageProps {
+  message: MessageType;
+  onCopyCode?: (code: string) => void;
+  loadingStatus?: React.ReactNode;
+}
+
+// Custom matte dark theme - muted, professional colors
+const customTheme: { [key: string]: React.CSSProperties } = {
+  'code[class*="language-"]': {
+    color: '#d4d4d8',
+    background: 'none',
+    fontFamily: "'JetBrains Mono', Consolas, Monaco, 'Andale Mono', monospace",
+    fontSize: '0.875rem',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.6',
+    tabSize: 4,
+    hyphens: 'none',
+  },
+  'pre[class*="language-"]': {
+    color: '#d4d4d8',
+    background: '#18181b',
+    fontFamily: "'JetBrains Mono', Consolas, Monaco, 'Andale Mono', monospace",
+    fontSize: '0.875rem',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.6',
+    tabSize: 4,
+    hyphens: 'none',
+    padding: '1rem',
+    margin: '0',
+    overflow: 'auto',
+    borderRadius: '0.5rem',
+  },
+  comment: { color: '#71717a' },
+  prolog: { color: '#71717a' },
+  doctype: { color: '#71717a' },
+  cdata: { color: '#71717a' },
+  punctuation: { color: '#a1a1aa' },
+  namespace: { opacity: 0.7 },
+  property: { color: '#f0abfc' },
+  tag: { color: '#f0abfc' },
+  boolean: { color: '#c4b5fd' },
+  number: { color: '#c4b5fd' },
+  constant: { color: '#c4b5fd' },
+  symbol: { color: '#c4b5fd' },
+  deleted: { color: '#fca5a5' },
+  selector: { color: '#86efac' },
+  'attr-name': { color: '#fcd34d' },
+  string: { color: '#86efac' },
+  char: { color: '#86efac' },
+  builtin: { color: '#86efac' },
+  inserted: { color: '#86efac' },
+  operator: { color: '#f0abfc' },
+  entity: { color: '#fcd34d', cursor: 'help' },
+  url: { color: '#67e8f9' },
+  '.language-css .token.string': { color: '#67e8f9' },
+  '.style .token.string': { color: '#67e8f9' },
+  variable: { color: '#d4d4d8' },
+  atrule: { color: '#93c5fd' },
+  'attr-value': { color: '#86efac' },
+  function: { color: '#93c5fd' },
+  'class-name': { color: '#93c5fd' },
+  keyword: { color: '#c4b5fd' },
+  regex: { color: '#fcd34d' },
+  important: { color: '#fcd34d', fontWeight: 'bold' },
+  bold: { fontWeight: 'bold' },
+  italic: { fontStyle: 'italic' },
+};
+
+function isPythonCode(language: string, code: string): boolean {
+  if (language === 'python') return true;
+
+  const pythonPatterns = [
+    /^from\s+\w+\s+import/m,
+    /^import\s+\w+/m,
+    /^def\s+\w+\s*\(/m,
+    /^class\s+\w+/m,
+    /QuantumCircuit/,
+    /qiskit/i,
+  ];
+
+  return pythonPatterns.some(p => p.test(code));
+}
+
+function CodeBlock({
+  language,
+  code: initialCode,
+  onCopy,
+}: {
+  language: string;
+  code: string;
+  onCopy?: (code: string) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedCode, setEditedCode] = useState(initialCode);
+  const [executionResult, setExecutionResult] = useState<ExecutionResultData | null>(null);
+
+  // The code to use (edited or original)
+  const code = isEditing ? editedCode : initialCode;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    onCopy?.(code);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleExecute = useCallback(async () => {
+    if (isExecuting) return;
+
+    setIsExecuting(true);
+    setExecutionResult(null);
+
+    try {
+      const response = await fetch('/api/execute', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code, timeout: 30 }),
+      });
+
+      const result = await response.json();
+      setExecutionResult(result);
+    } catch (error) {
+      setExecutionResult({
+        success: false,
+        output: '',
+        error: error instanceof Error ? error.message : 'Execution failed',
+        executionTime: 0,
+        hasCircuitOutput: false,
+      });
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [code, isExecuting]);
+
+  const handleStopExecution = () => {
+    setIsExecuting(false);
+  };
+
+  const handleToggleEdit = () => {
+    if (isEditing) {
+      // Exiting edit mode - keep the edited code
+      setIsEditing(false);
+    } else {
+      // Entering edit mode
+      setEditedCode(initialCode);
+      setIsEditing(true);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setEditedCode(initialCode);
+    setIsEditing(false);
+  };
+
+  const detectedLanguage = language || detectLanguage(code);
+  const canExecute = isPythonCode(detectedLanguage, code);
+  
+  // Calculate editor height based on line count
+  const lineCount = code.split('\n').length;
+  const editorHeight = Math.min(Math.max(lineCount * 20 + 32, 100), 400);
+
+  return (
+    <div className="relative group my-3 code-block-wrapper">
+      {/* Action buttons */}
+      <div className="absolute right-2 top-2 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+        <span className="text-xs text-zinc-500 bg-zinc-800 px-2 py-0.5 rounded">
+          {detectedLanguage || 'code'}
+        </span>
+
+        {/* Edit toggle */}
+        <button
+          onClick={isEditing ? handleCancelEdit : handleToggleEdit}
+          className={clsx(
+            'flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-all',
+            isEditing
+              ? 'bg-amber-600/20 text-amber-400 hover:bg-amber-600/30'
+              : 'bg-zinc-700/50 text-zinc-400 hover:bg-zinc-700'
+          )}
+          title={isEditing ? 'Cancel editing' : 'Edit code'}
+        >
+          {isEditing ? (
+            <>
+              <X className="w-3 h-3" />
+              <span>Cancel</span>
+            </>
+          ) : (
+            <>
+              <Edit2 className="w-3 h-3" />
+              <span>Edit</span>
+            </>
+          )}
+        </button>
+
+        {canExecute && (
+          <button
+            onClick={isExecuting ? handleStopExecution : handleExecute}
+            disabled={isExecuting}
+            className={clsx(
+              'flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-all',
+              isExecuting
+                ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30'
+                : 'bg-teal-600/20 text-teal-400 hover:bg-teal-600/30'
+            )}
+            title={isExecuting ? 'Stop execution' : 'Run code'}
+          >
+            {isExecuting ? (
+              <>
+                <Square className="w-3 h-3" />
+                <span>Stop</span>
+              </>
+            ) : (
+              <>
+                <Play className="w-3 h-3" />
+                <span>Run</span>
+              </>
+            )}
+          </button>
+        )}
+
+        <button
+          onClick={handleCopy}
+          className="p-1.5 rounded bg-zinc-800 hover:bg-zinc-700 transition-colors"
+          title="Copy code"
+        >
+          {copied ? (
+            <Check className="w-3.5 h-3.5 text-emerald-400" />
+          ) : (
+            <Copy className="w-3.5 h-3.5 text-zinc-400" />
+          )}
+        </button>
+      </div>
+
+      {isEditing ? (
+        // Monaco Editor for editing
+        <div 
+          className="rounded-lg overflow-hidden border border-amber-600/30"
+          style={{ height: editorHeight }}
+        >
+          <Editor
+            height="100%"
+            language={detectedLanguage || 'python'}
+            value={editedCode}
+            onChange={(value) => setEditedCode(value || '')}
+            theme="vs-dark"
+            options={{
+              fontSize: 14,
+              fontFamily: "'JetBrains Mono', Consolas, Monaco, monospace",
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              lineNumbers: 'on',
+              glyphMargin: false,
+              folding: false,
+              lineDecorationsWidth: 8,
+              lineNumbersMinChars: 3,
+              padding: { top: 12, bottom: 12 },
+              renderLineHighlight: 'line',
+              tabSize: 4,
+              insertSpaces: true,
+              wordWrap: 'on',
+              automaticLayout: true,
+            }}
+          />
+        </div>
+      ) : (
+        // Static code display
+        <SyntaxHighlighter
+          style={customTheme}
+          language={detectedLanguage || 'python'}
+          PreTag="div"
+          customStyle={{
+            margin: 0,
+            borderRadius: '0.5rem',
+            background: '#18181b',
+            padding: '1rem',
+            fontSize: '0.875rem',
+            border: '1px solid #27272a',
+            lineHeight: '1.6',
+          }}
+          codeTagProps={{
+            style: {
+              background: 'none',
+              padding: 0,
+            },
+          }}
+          wrapLongLines={false}
+        >
+          {code}
+        </SyntaxHighlighter>
+      )}
+
+      {/* Execution result */}
+      {(isExecuting || executionResult) && (
+        <ExecutionResult
+          result={executionResult || { success: false, output: '', error: '', executionTime: 0 }}
+          isLoading={isExecuting}
+        />
+      )}
+    </div>
+  );
+}
+
+function detectLanguage(code: string): string {
+  const pythonPatterns = [
+    /^from\s+\w+\s+import/m,
+    /^import\s+\w+/m,
+    /^def\s+\w+\s*\(/m,
+    /^class\s+\w+/m,
+    /QuantumCircuit/,
+    /qiskit/i,
+    /\.measure/,
+    /numpy|np\./,
+    /print\s*\(/,
+  ];
+
+  if (pythonPatterns.some((p) => p.test(code))) {
+    return 'python';
+  }
+
+  const jsPatterns = [
+    /^const\s+\w+\s*=/m,
+    /^let\s+\w+\s*=/m,
+    /^function\s+\w+/m,
+    /=>\s*{/,
+    /console\.log/,
+  ];
+
+  if (jsPatterns.some((p) => p.test(code))) {
+    return 'javascript';
+  }
+
+  const bashPatterns = [/^\$\s+/m, /^#!\/bin\/(ba)?sh/m, /\|\s*grep/, /apt-get|pip\s+install/];
+
+  if (bashPatterns.some((p) => p.test(code))) {
+    return 'bash';
+  }
+
+  return 'python';
+}
+
+function looksLikeCode(text: string): boolean {
+  // Multi-line code indicators
+  if (text.includes('\n')) {
+    const codeIndicators = [
+      /^from\s+/m,
+      /^import\s+/m,
+      /^def\s+/m,
+      /^class\s+/m,
+      /^\s*return\s+/m,
+      /QuantumCircuit/,
+      /Parameter\(/,
+      /\.\w+\([^)]*\)/m, // Method calls like qc.h(), qc.cx()
+    ];
+    return codeIndicators.some((p) => p.test(text));
+  }
+
+  // Single-line code indicators for function completion responses
+  const singleLinePatterns = [
+    /^return\s+\w+/,                          // return circuit.control(...)
+    /^\w+\s*=\s*\w+\([^)]*\)/,                // theta = Parameter("theta")
+    /^\w+\.\w+\([^)]*\)$/,                    // circuit.control(num_ctrl_qubits)
+    /\w+\s*=\s*\w+\([^)]*\)(?:\s+\w+\.|\s+\w+\s*=)/, // Multiple statements
+    /QuantumCircuit\(/,
+    /Parameter\(/,
+    /\.control\(/,
+    /\.measure\(/,
+  ];
+  return singleLinePatterns.some((p) => p.test(text.trim()));
+}
+
+export function Message({ message, onCopyCode, loadingStatus }: MessageProps) {
+  const isUser = message.role === 'user';
+  const isLoading = message.isLoading;
+
+  const avatar = useMemo(() => {
+    if (isUser) {
+      return (
+        <div className="w-8 h-8 rounded-md bg-zinc-800 flex items-center justify-center border border-zinc-700/50">
+          <span className="text-[10px] font-bold text-zinc-400 font-mono">YOU</span>
+        </div>
+      );
+    }
+    return (
+      <div className="w-8 h-8 rounded-md bg-zinc-800 flex items-center justify-center border border-teal-700/40">
+        <QubitIcon size={18} className="text-teal-400" />
+      </div>
+    );
+  }, [isUser]);
+
+  const imageSource =
+    message.imageUrl || (message.imageBase64 ? `data:image/jpeg;base64,${message.imageBase64}` : null);
+
+  const processedContent = useMemo(() => {
+    let content = message.content;
+
+    // Convert non-standard math delimiters to standard LaTeX format
+    // Display math: [ ... ] containing LaTeX → $$ ... $$
+    content = content.replace(
+      /\[\s*(\\[a-zA-Z][^\]]*)\s*\]/g,
+      (match, inner) => `\n$$\n${inner.trim()}\n$$\n`
+    );
+
+    // Inline math with \(...\) → $...$
+    content = content.replace(
+      /\\\(([^)]+)\\\)/g,
+      (match, inner) => `$${inner}$`
+    );
+
+    // Inline math: (expression) containing LaTeX → $...$
+    // Match parentheses containing backslash commands but not nested parens
+    content = content.replace(
+      /\(([^()]*(?:\\[a-zA-Z{}^_]|\\frac|\\sqrt|\\sum|\\exp|\\left|\\right|\\bigl|\\bigr|\\Bigl|\\Bigr|\|[01]\\rangle)[^()]*)\)/g,
+      (match, inner) => {
+        // Only convert if it really looks like math
+        if (/\\[a-zA-Z]/.test(inner) || /\|[01n]\\rangle/.test(inner)) {
+          return `$${inner}$`;
+        }
+        return match;
+      }
+    );
+
+    // Code detection for non-markdown responses
+    if (!content.includes('```') && !content.includes('$$') && !content.includes('$') && looksLikeCode(content)) {
+      content = content
+        .replace(/(\w+\s*=\s*\w+\([^)]*\))\s+(\w+\.)/g, '$1\n$2')
+        .replace(/(\w+\.[a-z_]+\([^)]*\))\s+(\w+\.)/g, '$1\n$2');
+
+      content = '```python\n' + content + '\n```';
+    }
+
+    return content;
+  }, [message.content]);
+
+  return (
+    <div className={clsx('flex gap-3 animate-in', isUser ? 'flex-row-reverse' : 'flex-row')}>
+      <div className="flex-shrink-0">{avatar}</div>
+
+      <div className={clsx('flex-1 max-w-[85%]', isUser ? 'flex flex-col items-end' : '')}>
+        {imageSource && (
+          <div className="mb-2 max-w-xs">
+            <img
+              src={imageSource}
+              alt="Attached image"
+              className="rounded-lg border border-zinc-700/50 max-h-64 object-contain bg-zinc-900"
+            />
+          </div>
+        )}
+
+        <div
+          className={clsx(
+            'rounded-xl px-4 py-3',
+            isUser
+              ? 'bg-teal-700/80 text-white rounded-tr-sm'
+              : 'bg-zinc-800/90 border border-zinc-700/50 rounded-tl-sm'
+          )}
+        >
+          {isLoading ? (
+            loadingStatus || (
+              <div className="typing-indicator py-1">
+                <span />
+                <span />
+                <span />
+              </div>
+            )
+          ) : (
+            <div className={clsx('markdown-content', isUser && 'text-white/90')}>
+              <ReactMarkdown
+                remarkPlugins={[remarkMath]}
+                rehypePlugins={[rehypeKatex]}
+                components={{
+                  code({ className, children, ...props }) {
+                    const match = /language-(\w+)/.exec(className || '');
+                    const code = String(children).replace(/\n$/, '');
+
+                    // Check if this is a math block (from remark-math)
+                    if (className === 'language-math' || className === 'math-inline') {
+                      try {
+                        return <InlineMath math={code} />;
+                      } catch {
+                        return <code className="text-red-400">{code}</code>;
+                      }
+                    }
+
+                    const isBlock = match || code.includes('\n') || looksLikeCode(code);
+
+                    if (isBlock) {
+                      return <CodeBlock language={match?.[1] || ''} code={code} onCopy={onCopyCode} />;
+                    }
+
+                    return (
+                      <code className={clsx('bg-zinc-700/50 px-1.5 py-0.5 rounded text-sm', className)} {...props}>
+                        {children}
+                      </code>
+                    );
+                  },
+                  pre({ children }) {
+                    return <>{children}</>;
+                  },
+                  // Handle math blocks from remark-math
+                  span({ className, children, ...props }) {
+                    if (className === 'math math-inline') {
+                      try {
+                        const math = String(children);
+                        return <InlineMath math={math} />;
+                      } catch {
+                        return <span className="text-red-400">{children}</span>;
+                      }
+                    }
+                    return <span className={className} {...props}>{children}</span>;
+                  },
+                  div({ className, children, ...props }) {
+                    if (className === 'math math-display') {
+                      try {
+                        const math = String(children);
+                        return <BlockMath math={math} />;
+                      } catch {
+                        return <div className="text-red-400">{children}</div>;
+                      }
+                    }
+                    return <div className={className} {...props}>{children}</div>;
+                  },
+                }}
+              >
+                {processedContent}
+              </ReactMarkdown>
+            </div>
+          )}
+        </div>
+
+        <span className="text-xs text-zinc-500 mt-1 px-2">
+          {message.timestamp.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/Chat/MessageInput.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import { useState, useRef, useCallback, useImperativeHandle, forwardRef } from 'react';
+import { Send, Image as ImageIcon, X, Loader2 } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface MessageInputProps {
+  onSend: (message: string, imageUrl?: string, imageBase64?: string) => void;
+  isLoading: boolean;
+  placeholder?: string;
+}
+
+export interface MessageInputRef {
+  setContent: (text: string, imageUrl?: string) => void;
+  clear: () => void;
+}
+
+export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
+  function MessageInput(
+    {
+      onSend,
+      isLoading,
+      placeholder = 'Ask about quantum computing, Qiskit, or upload a circuit diagram...',
+    },
+    ref
+  ) {
+    const [message, setMessage] = useState('');
+    const [imageBase64, setImageBase64] = useState<string | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [imagePreview, setImagePreview] = useState<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      setContent: (text: string, url?: string) => {
+        setMessage(text);
+        if (url) {
+          setImageUrl(url);
+          setImagePreview(url);
+          setImageBase64(null);
+        }
+        if (textareaRef.current) {
+          textareaRef.current.style.height = 'auto';
+          setTimeout(() => {
+            if (textareaRef.current) {
+              textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
+            }
+          }, 0);
+        }
+      },
+      clear: () => {
+        setMessage('');
+        setImageBase64(null);
+        setImageUrl(null);
+        setImagePreview(null);
+        if (textareaRef.current) {
+          textareaRef.current.style.height = 'auto';
+        }
+      },
+    }));
+
+    const handleSubmit = useCallback(() => {
+      if ((!message.trim() && !imageBase64 && !imageUrl) || isLoading) return;
+
+      onSend(message.trim(), imageUrl || undefined, imageBase64 || undefined);
+      setMessage('');
+      setImageBase64(null);
+      setImageUrl(null);
+      setImagePreview(null);
+
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    }, [message, imageBase64, imageUrl, isLoading, onSend]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+
+    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      if (!file.type.startsWith('image/')) {
+        alert('Please upload an image file');
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const result = event.target?.result as string;
+        const base64 = result.split(',')[1];
+        setImageBase64(base64);
+        setImageUrl(null);
+        setImagePreview(result);
+      };
+      reader.readAsDataURL(file);
+    };
+
+    const removeImage = () => {
+      setImageBase64(null);
+      setImageUrl(null);
+      setImagePreview(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    };
+
+    const adjustTextareaHeight = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const textarea = e.target;
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+      setMessage(textarea.value);
+    };
+
+    const hasContent = message.trim() || imageBase64 || imageUrl;
+
+    return (
+      <div className="bg-zinc-800/60 border border-zinc-700/50 rounded-xl p-3">
+        {imagePreview && (
+          <div className="mb-3 relative inline-block">
+            <img
+              src={imagePreview}
+              alt="Upload preview"
+              className="h-24 rounded-lg border border-zinc-700/50 object-contain bg-zinc-900"
+            />
+            <button
+              onClick={removeImage}
+              className="absolute -top-2 -right-2 p-1 bg-red-600/80 rounded-full hover:bg-red-600 transition-colors"
+            >
+              <X className="w-3 h-3 text-white" />
+            </button>
+          </div>
+        )}
+
+        <div className="flex items-end gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleImageUpload}
+            className="hidden"
+          />
+
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isLoading}
+            className={clsx(
+              'p-3 rounded-lg transition-all duration-200',
+              'hover:bg-zinc-700/50 text-zinc-500 hover:text-zinc-300',
+              isLoading && 'opacity-50 cursor-not-allowed'
+            )}
+            title="Upload image"
+          >
+            <ImageIcon className="w-5 h-5" />
+          </button>
+
+          <textarea
+            ref={textareaRef}
+            value={message}
+            onChange={adjustTextareaHeight}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={isLoading}
+            rows={1}
+            className={clsx(
+              'flex-1 bg-transparent border-none outline-none resize-none',
+              'text-zinc-200 placeholder:text-zinc-500',
+              'min-h-[44px] max-h-[200px] py-3',
+              isLoading && 'opacity-50'
+            )}
+          />
+
+          <button
+            onClick={handleSubmit}
+            disabled={!hasContent || isLoading}
+            className={clsx(
+              'p-3 rounded-lg transition-all duration-200',
+              hasContent
+                ? 'bg-teal-700/80 hover:bg-teal-600/80 text-white'
+                : 'bg-zinc-700/50 text-zinc-500',
+              isLoading && 'opacity-50 cursor-not-allowed'
+            )}
+          >
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <Send className="w-5 h-5" />
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  }
+);

src/components/Chat/QubitIcon.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+interface QubitIconProps {
+    size?: number;
+    className?: string;
+}
+
+/**
+ * Minimalist qubit icon representing a Bloch sphere.
+ * Simple, clean design suitable for a professional interface.
+ */
+export function QubitIcon({ size = 24, className = '' }: QubitIconProps) {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            {/* Outer circle - Bloch sphere */}
+            <circle
+                cx="12"
+                cy="12"
+                r="9"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                fill="none"
+                opacity="0.6"
+            />
+
+            {/* Equator ellipse */}
+            <ellipse
+                cx="12"
+                cy="12"
+                rx="9"
+                ry="3"
+                stroke="currentColor"
+                strokeWidth="1"
+                fill="none"
+                opacity="0.4"
+            />
+
+            {/* Vertical meridian */}
+            <ellipse
+                cx="12"
+                cy="12"
+                rx="3"
+                ry="9"
+                stroke="currentColor"
+                strokeWidth="1"
+                fill="none"
+                opacity="0.4"
+            />
+
+            {/* State vector arrow */}
+            <line
+                x1="12"
+                y1="12"
+                x2="16"
+                y2="6"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+
+            {/* State point */}
+            <circle
+                cx="16"
+                cy="6"
+                r="2"
+                fill="currentColor"
+            />
+
+            {/* Center point */}
+            <circle
+                cx="12"
+                cy="12"
+                r="1.5"
+                fill="currentColor"
+                opacity="0.5"
+            />
+        </svg>
+    );
+}
+

src/components/Chat/WarmupIndicator.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useWarmup, WarmupStatus } from '@/lib/hooks/useWarmup';
+import { Cpu, Check, Loader2, AlertCircle } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface WarmupIndicatorProps {
+  className?: string;
+  showWhenReady?: boolean;
+}
+
+const STATUS_CONFIG: Record<WarmupStatus, {
+  icon: React.ElementType;
+  label: string;
+  color: string;
+  bgColor: string;
+  animate?: boolean;
+}> = {
+  idle: {
+    icon: Cpu,
+    label: 'Checking model...',
+    color: 'text-zinc-400',
+    bgColor: 'bg-zinc-800/50',
+  },
+  checking: {
+    icon: Loader2,
+    label: 'Checking model...',
+    color: 'text-blue-400',
+    bgColor: 'bg-blue-500/10',
+    animate: true,
+  },
+  warming: {
+    icon: Cpu,
+    label: 'Pre-warming model...',
+    color: 'text-amber-400',
+    bgColor: 'bg-amber-500/10',
+    animate: true,
+  },
+  ready: {
+    icon: Check,
+    label: 'Model ready',
+    color: 'text-emerald-400',
+    bgColor: 'bg-emerald-500/10',
+  },
+  error: {
+    icon: AlertCircle,
+    label: 'Warmup failed',
+    color: 'text-red-400',
+    bgColor: 'bg-red-500/10',
+  },
+};
+
+/**
+ * Small indicator showing the pre-warming status of the model.
+ * Appears in the header or corner of the chat interface.
+ */
+export function WarmupIndicator({ className, showWhenReady = false }: WarmupIndicatorProps) {
+  const { status, workers } = useWarmup(true);
+
+  if (status === 'ready' && !showWhenReady) {
+    return null;
+  }
+
+  if (status === 'idle') {
+    return null;
+  }
+
+  const config = STATUS_CONFIG[status];
+  const Icon = config.icon;
+
+  return (
+    <div
+      className={clsx(
+        'inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium transition-all duration-300',
+        config.bgColor,
+        config.color,
+        className
+      )}
+    >
+      <Icon
+        className={clsx(
+          'w-3 h-3',
+          config.animate && 'animate-spin'
+        )}
+      />
+      <span>{config.label}</span>
+      {workers && status === 'warming' && workers.initializing > 0 && (
+        <span className="text-zinc-500">
+          ({workers.initializing} starting)
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function WarmupIndicatorCompact({ className }: { className?: string }) {
+  const { status, message } = useWarmup(true);
+
+  if (status === 'ready' || status === 'idle') {
+    return null;
+  }
+
+  const config = STATUS_CONFIG[status];
+  const Icon = config.icon;
+
+  return (
+    <div
+      className={clsx(
+        'relative group',
+        className
+      )}
+      title={message || config.label}
+    >
+      <div
+        className={clsx(
+          'p-1.5 rounded-full',
+          config.bgColor
+        )}
+      >
+        <Icon
+          className={clsx(
+            'w-3.5 h-3.5',
+            config.color,
+            config.animate && 'animate-spin'
+          )}
+        />
+      </div>
+      
+      {/* Pulse effect for warming */}
+      {status === 'warming' && (
+        <span className="absolute inset-0 rounded-full bg-amber-400/30 animate-ping" />
+      )}
+    </div>
+  );
+}
+

src/components/Examples/ExampleCard.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { Image as ImageIcon, Code, FileQuestion, ChevronRight } from 'lucide-react';
+import { clsx } from 'clsx';
+import { TASK_LABELS, CATEGORY_LABELS } from '@/config/constants';
+import type { DatasetExample } from '@/types';
+
+interface ExampleCardProps {
+  example: DatasetExample;
+  onSelect: (example: DatasetExample) => void;
+  isSelected?: boolean;
+}
+
+export function ExampleCard({ example, onSelect, isSelected }: ExampleCardProps) {
+  const taskConfig = TASK_LABELS[example.type];
+  const categoryConfig = CATEGORY_LABELS[example.category];
+
+  const getTaskIcon = () => {
+    switch (example.type) {
+      case 'function_completion':
+        return <Code className="w-3.5 h-3.5" />;
+      case 'code_generation':
+        return <Code className="w-3.5 h-3.5" />;
+      case 'qa':
+        return <FileQuestion className="w-3.5 h-3.5" />;
+    }
+  };
+
+  const truncateText = (text: string, maxLength: number) => {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength).trim() + '...';
+  };
+
+  // Muted badge colors
+  const badgeColors: Record<string, string> = {
+    function_completion: 'bg-emerald-900/30 text-emerald-400 border-emerald-700/30',
+    code_generation: 'bg-blue-900/30 text-blue-400 border-blue-700/30',
+    qa: 'bg-amber-900/30 text-amber-400 border-amber-700/30',
+  };
+
+  return (
+    <button
+      onClick={() => onSelect(example)}
+      className={clsx(
+        'w-full text-left p-3 rounded-lg transition-all duration-200 group',
+        'border hover:border-teal-700/40',
+        isSelected
+          ? 'bg-teal-900/20 border-teal-700/40'
+          : 'bg-zinc-800/50 border-zinc-700/30 hover:bg-zinc-800/80'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {example.hasImage && (
+          <div className="flex-shrink-0 w-14 h-14 rounded-md bg-zinc-800 border border-zinc-700/50 flex items-center justify-center overflow-hidden">
+            {example.imageUrl ? (
+              <img
+                src={example.imageUrl}
+                alt=""
+                className="w-full h-full object-cover"
+                loading="lazy"
+              />
+            ) : (
+              <ImageIcon className="w-5 h-5 text-zinc-500" />
+            )}
+          </div>
+        )}
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium border', badgeColors[example.type])}>
+              {getTaskIcon()}
+              <span className="ml-1">{taskConfig.label}</span>
+            </span>
+            <span className="text-[10px] text-zinc-500">
+              {categoryConfig}
+            </span>
+          </div>
+
+          <p className="text-sm text-zinc-300 leading-snug font-mono">
+            {truncateText(example.question, 120)}
+          </p>
+        </div>
+
+        <ChevronRight
+          className={clsx(
+            'w-4 h-4 flex-shrink-0 transition-transform duration-200',
+            'text-zinc-600 group-hover:text-teal-500',
+            'group-hover:translate-x-1'
+          )}
+        />
+      </div>
+    </button>
+  );
+}

src/components/Examples/ExamplesPanel.tsx

@@ -0,0 +1,420 @@
+'use client';
+
+import { useState, useEffect, useMemo, useRef } from 'react';
+import {
+  Database,
+  Filter,
+  Image as ImageIcon,
+  FileText,
+  Loader2,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Search,
+  X,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { ExampleCard } from './ExampleCard';
+import { useDataset } from '@/lib/dataset/DatasetProvider';
+import { TASK_LABELS, CATEGORY_LABELS } from '@/config/constants';
+import type { DatasetExample, TaskType, Category } from '@/types';
+
+interface ExamplesPanelProps {
+  onSelectExample: (example: DatasetExample) => void;
+}
+
+type ModalityFilter = 'all' | 'multimodal' | 'text-only';
+type Split = 'train' | 'validation' | 'test';
+
+const ITEMS_PER_PAGE = 25;
+
+export function ExamplesPanel({ onSelectExample }: ExamplesPanelProps) {
+  const { isLoading: isDatasetLoading, loadedSplits, splitCounts, filterExamples, loadSplit } = useDataset();
+
+  const [typeFilter, setTypeFilter] = useState<TaskType | 'all'>('all');
+  const [categoryFilter, setCategoryFilter] = useState<Category | 'all'>('all');
+  const [modalityFilter, setModalityFilter] = useState<ModalityFilter>('all');
+  const [showFilters, setShowFilters] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [split, setSplit] = useState<Split>('test');
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Load train split if selected (not loaded by default)
+  useEffect(() => {
+    if (split === 'train' && !loadedSplits.has('train')) {
+      loadSplit('train');
+    }
+  }, [split, loadedSplits, loadSplit]);
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+      setCurrentPage(0);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Reset page when filters change
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [split, typeFilter, categoryFilter, modalityFilter, debouncedSearch]);
+
+  // Filter locally loaded data
+  const { examples, totalExamples } = useMemo(() => {
+    if (!loadedSplits.has(split)) {
+      return { examples: [], totalExamples: 0 };
+    }
+
+    const filters: {
+      type?: TaskType;
+      category?: Category;
+      hasImage?: boolean;
+      search?: string;
+    } = {};
+
+    if (typeFilter !== 'all') filters.type = typeFilter;
+    if (categoryFilter !== 'all') filters.category = categoryFilter;
+    if (modalityFilter === 'multimodal') filters.hasImage = true;
+    else if (modalityFilter === 'text-only') filters.hasImage = false;
+    if (debouncedSearch) filters.search = debouncedSearch;
+
+    const result = filterExamples(split, filters, ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+
+    return { examples: result.examples, totalExamples: result.total };
+  }, [loadedSplits, split, filterExamples, typeFilter, categoryFilter, modalityFilter, debouncedSearch, currentPage]);
+
+  // Scroll to top on page change
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  }, [currentPage]);
+
+  const totalPages = Math.ceil(totalExamples / ITEMS_PER_PAGE);
+
+  const stats = useMemo(() => ({
+    total: totalExamples,
+    displayed: examples.length,
+  }), [examples, totalExamples]);
+
+  const clearSearch = () => {
+    setSearchQuery('');
+    searchInputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      clearSearch();
+    }
+  };
+
+  const isLoading = isDatasetLoading || !loadedSplits.has(split);
+
+  return (
+    <div className="h-full flex flex-col bg-zinc-900/95 overflow-hidden">
+      {/* Header */}
+      <div className="p-4 border-b border-zinc-800/80 flex-shrink-0">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Database className="w-4 h-4 text-teal-500" />
+            <h2 className="font-semibold text-zinc-200">Dataset Examples</h2>
+          </div>
+          {isLoading && (
+            <Loader2 className="w-4 h-4 animate-spin text-zinc-500" />
+          )}
+        </div>
+
+        {/* Split Selector */}
+        <div className="flex gap-1 mb-3 bg-zinc-800/50 p-1 rounded-lg">
+          {(['train', 'validation', 'test'] as Split[]).map((s) => (
+            <button
+              key={s}
+              onClick={() => setSplit(s)}
+              className={clsx(
+                'flex-1 px-2 py-1.5 text-xs font-medium rounded-md transition-all',
+                split === s
+                  ? 'bg-teal-600/80 text-white shadow-sm'
+                  : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/50'
+              )}
+            >
+              <div className="flex items-center justify-center gap-1">
+                <span className="capitalize">{s}</span>
+                {splitCounts[s] && (
+                  <span className="text-[10px] opacity-70">({splitCounts[s]})</span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* Search */}
+        <div className="relative mb-3">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search examples..."
+            className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-lg pl-9 pr-8 py-2 text-sm text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:ring-1 focus:ring-teal-600/50 focus:border-teal-700/50"
+          />
+          {searchQuery && (
+            <button
+              onClick={clearSearch}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300 transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+
+        {/* Stats */}
+        <div className="flex items-center gap-2 text-xs text-zinc-500 mb-3">
+          <span className="flex items-center gap-1">
+            <FileText className="w-3.5 h-3.5" />
+            {stats.total} examples
+          </span>
+          {debouncedSearch && (
+            <>
+              <span className="text-zinc-600">|</span>
+              <span className="text-teal-400 truncate max-w-[100px]">
+                &quot;{debouncedSearch}&quot;
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* Filters Toggle */}
+        <button
+          onClick={() => setShowFilters(!showFilters)}
+          className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-300 transition-colors"
+        >
+          <Filter className="w-4 h-4" />
+          <span>Filters</span>
+          {(typeFilter !== 'all' || categoryFilter !== 'all' || modalityFilter !== 'all') && (
+            <span className="px-1.5 py-0.5 text-[10px] bg-teal-600/30 text-teal-400 rounded">
+              Active
+            </span>
+          )}
+          <ChevronDown
+            className={clsx(
+              'w-4 h-4 transition-transform',
+              showFilters && 'rotate-180'
+            )}
+          />
+        </button>
+
+        {/* Filter Options */}
+        {showFilters && (
+          <div className="mt-3 space-y-3 animate-in slide-in-from-top-2 duration-200">
+            <div>
+              <label className="text-xs text-zinc-500 mb-1 block">
+                Task Type
+              </label>
+              <select
+                value={typeFilter}
+                onChange={(e) => setTypeFilter(e.target.value as TaskType | 'all')}
+                className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-teal-600/50"
+              >
+                <option value="all">All Types</option>
+                {Object.entries(TASK_LABELS).map(([key, config]) => (
+                  <option key={key} value={key}>
+                    {config.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="text-xs text-zinc-500 mb-1 block">
+                Category
+              </label>
+              <select
+                value={categoryFilter}
+                onChange={(e) => setCategoryFilter(e.target.value as Category | 'all')}
+                className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-teal-600/50"
+              >
+                <option value="all">All Categories</option>
+                {Object.entries(CATEGORY_LABELS).map(([key, label]) => (
+                  <option key={key} value={key}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="text-xs text-zinc-500 mb-1 block">
+                Modality
+              </label>
+              <div className="flex gap-2">
+                {(['all', 'multimodal', 'text-only'] as ModalityFilter[]).map((mode) => (
+                  <button
+                    key={mode}
+                    onClick={() => setModalityFilter(mode)}
+                    className={clsx(
+                      'flex-1 py-1.5 px-2 rounded-md text-xs font-medium transition-all',
+                      modalityFilter === mode
+                        ? 'bg-teal-700/80 text-white'
+                        : 'bg-zinc-800/80 text-zinc-400 hover:text-zinc-200'
+                    )}
+                  >
+                    {mode === 'all' ? 'All' : mode === 'multimodal' ? 'Multimodal' : 'Text'}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Clear Filters */}
+            {(typeFilter !== 'all' || categoryFilter !== 'all' || modalityFilter !== 'all') && (
+              <button
+                onClick={() => {
+                  setTypeFilter('all');
+                  setCategoryFilter('all');
+                  setModalityFilter('all');
+                }}
+                className="w-full py-2 text-xs text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50 rounded-md transition-colors"
+              >
+                Clear all filters
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Examples List */}
+      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-3 scroll-smooth min-h-0">
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center h-40 text-zinc-500">
+            <Loader2 className="w-6 h-6 animate-spin mb-2" />
+            <span className="text-sm">Loading examples...</span>
+          </div>
+        ) : examples.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-40 text-zinc-500 text-center">
+            <Filter className="w-6 h-6 mb-2 opacity-50" />
+            <p className="text-sm">No examples match your filters</p>
+            {debouncedSearch && (
+              <button
+                onClick={clearSearch}
+                className="mt-2 text-teal-400 hover:text-teal-300 text-sm"
+              >
+                Clear search
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <p className="text-xs text-zinc-500 px-1 mb-2">
+              Showing {currentPage * ITEMS_PER_PAGE + 1}–{Math.min((currentPage + 1) * ITEMS_PER_PAGE, totalExamples)} of {totalExamples}
+            </p>
+            {examples.map((example) => (
+              <ExampleCard
+                key={example.id}
+                example={example}
+                onSelect={onSelectExample}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && !isLoading && (
+        <div className="p-2 border-t border-zinc-800/80 flex-shrink-0">
+          <div className="flex items-center justify-between gap-1">
+            <button
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              disabled={currentPage === 0}
+              className={clsx(
+                'flex items-center gap-0.5 px-2 py-1 text-xs font-medium rounded-md transition-colors flex-shrink-0',
+                currentPage === 0
+                  ? 'text-zinc-600 cursor-not-allowed'
+                  : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+              )}
+            >
+              <ChevronLeft className="w-3.5 h-3.5" />
+              <span className="hidden sm:inline">Prev</span>
+            </button>
+
+            <div className="flex items-center gap-0.5 overflow-hidden flex-1 justify-center min-w-0">
+              {(() => {
+                const maxVisible = 3;
+                const pages: (number | 'ellipsis')[] = [];
+
+                if (totalPages <= maxVisible + 2) {
+                  for (let i = 0; i < totalPages; i++) pages.push(i);
+                } else {
+                  pages.push(0);
+
+                  if (currentPage > 2) {
+                    pages.push('ellipsis');
+                  }
+
+                  const start = Math.max(1, currentPage - 1);
+                  const end = Math.min(totalPages - 2, currentPage + 1);
+
+                  for (let i = start; i <= end; i++) {
+                    if (!pages.includes(i)) pages.push(i);
+                  }
+
+                  if (currentPage < totalPages - 3) {
+                    pages.push('ellipsis');
+                  }
+
+                  if (!pages.includes(totalPages - 1)) {
+                    pages.push(totalPages - 1);
+                  }
+                }
+
+                return pages.map((page, idx) => {
+                  if (page === 'ellipsis') {
+                    return (
+                      <span key={`ellipsis-${idx}`} className="text-zinc-600 px-0.5 text-xs">
+                        …
+                      </span>
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => setCurrentPage(page)}
+                      className={clsx(
+                        'w-6 h-6 text-[11px] font-medium rounded transition-colors flex-shrink-0',
+                        currentPage === page
+                          ? 'bg-teal-600/80 text-white'
+                          : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200'
+                      )}
+                    >
+                      {page + 1}
+                    </button>
+                  );
+                });
+              })()}
+            </div>
+
+            <button
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={currentPage >= totalPages - 1}
+              className={clsx(
+                'flex items-center gap-0.5 px-2 py-1 text-xs font-medium rounded-md transition-colors flex-shrink-0',
+                currentPage >= totalPages - 1
+                  ? 'text-zinc-600 cursor-not-allowed'
+                  : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+              )}
+            >
+              <span className="hidden sm:inline">Next</span>
+              <ChevronRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Header/Header.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { Github, Database, Boxes, ExternalLink, MessageSquare, Code } from 'lucide-react';
+import { clsx } from 'clsx';
+import { PROJECT_CONFIG, LINKS } from '@/config/constants';
+import { WarmupIndicator } from '@/components/Chat/WarmupIndicator';
+import type { AppMode } from '@/types';
+
+interface HeaderProps {
+  mode?: AppMode;
+  onModeChange?: (mode: AppMode) => void;
+}
+
+interface BadgeProps {
+  href: string;
+  icon: React.ReactNode;
+  label: string;
+  variant: 'default' | 'accent' | 'highlight';
+}
+
+function Badge({ href, icon, label, variant }: BadgeProps) {
+  const variantStyles = {
+    default: 'bg-zinc-800/80 hover:bg-zinc-700/80 text-zinc-300 border-zinc-700/50',
+    accent: 'bg-teal-900/30 hover:bg-teal-800/40 text-teal-400 border-teal-700/40',
+    highlight: 'bg-amber-900/30 hover:bg-amber-800/40 text-amber-400 border-amber-700/40',
+  };
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium 
+                  transition-all duration-200 hover:scale-[1.02] border ${variantStyles[variant]}`}
+    >
+      {icon}
+      <span>{label}</span>
+      <ExternalLink className="w-3 h-3 opacity-50" />
+    </a>
+  );
+}
+
+interface ModeToggleProps {
+  mode: AppMode;
+  onModeChange: (mode: AppMode) => void;
+}
+
+function ModeToggle({ mode, onModeChange }: ModeToggleProps) {
+  return (
+    <div className="flex items-center bg-zinc-800/60 rounded-lg p-1 border border-zinc-700/50">
+      <button
+        onClick={() => onModeChange('chat')}
+        className={clsx(
+          'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all',
+          mode === 'chat'
+            ? 'bg-teal-600 text-white shadow-sm'
+            : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/50'
+        )}
+      >
+        <MessageSquare className="w-3.5 h-3.5" />
+        <span>Chat</span>
+      </button>
+      <button
+        onClick={() => onModeChange('practice')}
+        className={clsx(
+          'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all',
+          mode === 'practice'
+            ? 'bg-teal-600 text-white shadow-sm'
+            : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/50'
+        )}
+      >
+        <Code className="w-3.5 h-3.5" />
+        <span>Practice</span>
+      </button>
+    </div>
+  );
+}
+
+export function Header({ mode = 'chat', onModeChange }: HeaderProps) {
+  return (
+    <header className="bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-800/80 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 py-3">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+          {/* Title - far left */}
+          <div className="flex-shrink-0">
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-semibold text-zinc-100 tracking-tight">
+                {PROJECT_CONFIG.name}
+              </h1>
+              <WarmupIndicator />
+            </div>
+            <p className="text-xs text-zinc-500">
+              {PROJECT_CONFIG.description}
+            </p>
+          </div>
+
+          {/* Mode Toggle - center */}
+          {onModeChange && (
+            <div className="flex-1 flex justify-center">
+              <ModeToggle mode={mode} onModeChange={onModeChange} />
+            </div>
+          )}
+
+          {/* Badges - far right */}
+          <div className="flex flex-wrap items-center gap-2 flex-shrink-0 sm:ml-auto">
+            <Badge
+              href={LINKS.github}
+              icon={<Github className="w-3.5 h-3.5" />}
+              label="GitHub"
+              variant="default"
+            />
+            <Badge
+              href={LINKS.dataset}
+              icon={<Database className="w-3.5 h-3.5" />}
+              label="Dataset"
+              variant="highlight"
+            />
+            <Badge
+              href={LINKS.models}
+              icon={<Boxes className="w-3.5 h-3.5" />}
+              label="Models"
+              variant="accent"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/Practice/AIHelper.tsx

@@ -0,0 +1,692 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Sparkles, Send, Loader2, Trash2, ChevronLeft, Copy, Check, Play } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { clsx } from 'clsx';
+import type { CodingProblem } from '@/types';
+import { postProcessResponse } from '@/lib/utils/response';
+import { LoadingStatus } from '../Chat/LoadingStatus';
+
+interface AIHelperProps {
+  problem: CodingProblem | null;
+  userCode: string;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onApplyCode?: (code: string) => void;
+}
+
+interface HelperMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+}
+
+// Custom matte dark theme - matching Chat component
+const customTheme: { [key: string]: React.CSSProperties } = {
+  'code[class*="language-"]': {
+    color: '#d4d4d8',
+    background: 'none',
+    fontFamily: "'JetBrains Mono', Consolas, Monaco, monospace",
+    fontSize: '0.8rem',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.5',
+    tabSize: 4,
+  },
+  'pre[class*="language-"]': {
+    color: '#d4d4d8',
+    background: '#18181b',
+    fontFamily: "'JetBrains Mono', Consolas, Monaco, monospace",
+    fontSize: '0.8rem',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    wordWrap: 'normal',
+    lineHeight: '1.5',
+    tabSize: 4,
+    padding: '0.75rem',
+    margin: '0',
+    overflow: 'auto',
+    borderRadius: '0.375rem',
+  },
+  comment: { color: '#71717a' },
+  prolog: { color: '#71717a' },
+  doctype: { color: '#71717a' },
+  punctuation: { color: '#a1a1aa' },
+  property: { color: '#f0abfc' },
+  tag: { color: '#f0abfc' },
+  boolean: { color: '#c4b5fd' },
+  number: { color: '#c4b5fd' },
+  constant: { color: '#c4b5fd' },
+  symbol: { color: '#c4b5fd' },
+  selector: { color: '#86efac' },
+  string: { color: '#86efac' },
+  char: { color: '#86efac' },
+  builtin: { color: '#86efac' },
+  operator: { color: '#f0abfc' },
+  variable: { color: '#d4d4d8' },
+  function: { color: '#93c5fd' },
+  'class-name': { color: '#93c5fd' },
+  keyword: { color: '#c4b5fd' },
+  regex: { color: '#fcd34d' },
+  important: { color: '#fcd34d', fontWeight: 'bold' },
+};
+
+const HELPER_PROMPT = `You are a helpful coding assistant for quantum computing practice problems using Qiskit.
+
+Your role is to:
+1. Provide hints and guidance without giving away the complete solution
+2. Explain quantum computing concepts when asked
+3. Help debug code issues
+4. Suggest improvements to the user's approach
+
+Guidelines:
+- Be encouraging and educational
+- Give progressively more detailed hints if the user is stuck
+- Focus on teaching, not just solving
+- Reference Qiskit 2.0 best practices
+- Keep responses concise and focused
+
+Current problem context will be provided. Help the user learn while they solve the problem themselves.`;
+
+function getSolvePrompt(problemType: 'function_completion' | 'code_generation') {
+  if (problemType === 'function_completion') {
+    return `You are a quantum computing expert using Qiskit.
+
+Your task is to provide ONLY the code lines that complete the function body. Do NOT include the function signature/definition - just the implementation lines that go inside the function.
+
+Guidelines:
+- Provide ONLY the implementation code (the lines after the function definition)
+- Do NOT repeat the function signature like "def function_name(...):"
+- Include proper indentation for the function body
+- Use Qiskit 2.0 best practices
+- Add brief comments for complex steps
+
+Example: If the function is:
+\`\`\`python
+def create_bell_state():
+    """Create a Bell state circuit."""
+    pass
+\`\`\`
+
+You should respond with ONLY:
+\`\`\`python
+    qc = QuantumCircuit(2)
+    qc.h(0)
+    qc.cx(0, 1)
+    return qc
+\`\`\`
+
+Format your response with ONLY the implementation code in a Python code block.`;
+  }
+
+  return `You are a quantum computing expert using Qiskit.
+
+Your task is to provide a complete, working solution for the given problem.
+
+Guidelines:
+- Provide a complete, executable Python solution
+- Include all necessary imports
+- Use Qiskit 2.0 best practices
+- Include brief comments explaining key steps
+- Make sure the solution passes the provided tests
+
+Format your response with the complete code in a Python code block.`;
+}
+
+function looksLikeCode(text: string): boolean {
+  const codeIndicators = [
+    /^from\s+/m,
+    /^import\s+/m,
+    /^def\s+/m,
+    /^class\s+/m,
+    /^\s*return\s+/m,
+    /QuantumCircuit/,
+    /Parameter\(/,
+    /\.\w+\([^)]*\)/m,
+    /^\s{4}/m, // Indented code
+    /qc\.\w+/,
+    /circuit\.\w+/,
+  ];
+  return codeIndicators.some((p) => p.test(text));
+}
+
+interface CodeBlockProps {
+  code: string;
+  language: string;
+  onCopy: () => void;
+  onApply?: () => void;
+  copied: boolean;
+}
+
+function CodeBlock({ code, language, onCopy, onApply, copied }: CodeBlockProps) {
+  return (
+    <div className="relative group my-2">
+      {/* Action buttons - always visible for better discoverability */}
+      <div className="absolute right-2 top-2 flex items-center gap-1.5 z-10">
+        <span className="text-[10px] text-zinc-500 bg-zinc-900/80 px-1.5 py-0.5 rounded">
+          {language || 'python'}
+        </span>
+
+        <button
+          onClick={onCopy}
+          className="p-1 rounded bg-zinc-800/90 hover:bg-zinc-700 transition-colors"
+          title="Copy code"
+        >
+          {copied ? (
+            <Check className="w-3 h-3 text-emerald-400" />
+          ) : (
+            <Copy className="w-3 h-3 text-zinc-400" />
+          )}
+        </button>
+
+        {onApply && (
+          <button
+            onClick={onApply}
+            className="flex items-center gap-1 px-1.5 py-1 rounded bg-teal-700/80 hover:bg-teal-600 text-teal-100 transition-colors text-[10px] font-medium"
+            title="Apply code to editor"
+          >
+            <Play className="w-3 h-3" />
+            Apply
+          </button>
+        )}
+      </div>
+
+      <SyntaxHighlighter
+        style={customTheme}
+        language={language || 'python'}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.375rem',
+          background: '#18181b',
+          padding: '0.75rem',
+          paddingTop: '2rem', // Space for buttons
+          fontSize: '0.8rem',
+          border: '1px solid #27272a',
+          lineHeight: '1.5',
+        }}
+        codeTagProps={{
+          style: {
+            background: 'none',
+            padding: 0,
+          },
+        }}
+        wrapLongLines={false}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
+export function AIHelper({
+  problem,
+  userCode,
+  isCollapsed,
+  onToggleCollapse,
+  onApplyCode,
+}: AIHelperProps) {
+  const [messages, setMessages] = useState<HelperMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasStartedStreaming, setHasStartedStreaming] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    // Scroll only within the messages container, not the whole page
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  }, []);
+
+  useEffect(() => {
+    // Only scroll within the AI Helper panel, not the whole page
+    requestAnimationFrame(() => {
+      scrollToBottom();
+    });
+  }, [messages, scrollToBottom]);
+
+  useEffect(() => {
+    setMessages([]);
+  }, [problem?.id]);
+
+  // Fetch image as base64 for multimodal problems
+  const fetchImageBase64 = async (imageUrl: string): Promise<string | null> => {
+    try {
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64 = reader.result as string;
+          const base64Data = base64.split(',')[1] || base64;
+          resolve(base64Data);
+        };
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      return null;
+    }
+  };
+
+  const handleSendMessage = async (customMessage?: string, isSolveRequest = false) => {
+    const messageText = customMessage || input.trim();
+    if (!messageText || isLoading || !problem) return;
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+
+    const userMessage: HelperMessage = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      content: messageText,
+      timestamp: new Date(),
+    };
+
+    const assistantId = crypto.randomUUID();
+    const loadingMessage: HelperMessage = {
+      id: assistantId,
+      role: 'assistant',
+      content: '',
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage, loadingMessage]);
+    setInput('');
+    setIsLoading(true);
+    setHasStartedStreaming(false);
+
+    try {
+      // Build context message with problem info
+      let contextMessage = `Problem: ${problem.question}`;
+
+      if (!isSolveRequest && userCode) {
+        contextMessage += `\n\nUser's current code:\n\`\`\`python\n${userCode || '# No code written yet'}\n\`\`\``;
+      }
+
+      contextMessage += `\n\nUser's request: ${messageText}`;
+
+      // Select appropriate system prompt
+      const systemPrompt = isSolveRequest
+        ? getSolvePrompt(problem.type as 'function_completion' | 'code_generation')
+        : HELPER_PROMPT;
+
+      // Build messages array
+      const apiMessages: Array<{
+        role: 'system' | 'user' | 'assistant';
+        content: string | Array<{ type: string; text?: string; image_url?: { url: string } }>;
+      }> = [
+          { role: 'system', content: systemPrompt },
+          ...messages.map((m) => ({
+            role: m.role as 'user' | 'assistant',
+            content: m.content,
+          })),
+        ];
+
+      // Handle multimodal problems - include image if available
+      if (problem.imageUrl && problem.hasImage) {
+        const imageBase64 = await fetchImageBase64(problem.imageUrl);
+        if (imageBase64) {
+          apiMessages.push({
+            role: 'user',
+            content: [
+              { type: 'text', text: contextMessage },
+              {
+                type: 'image_url',
+                image_url: { url: `data:image/jpeg;base64,${imageBase64}` },
+              },
+            ],
+          });
+        } else {
+          apiMessages.push({ role: 'user', content: contextMessage });
+        }
+      } else {
+        apiMessages.push({ role: 'user', content: contextMessage });
+      }
+
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: apiMessages,
+          stream: true,
+        }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Request failed');
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error('No response body');
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let fullContent = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed || !trimmed.startsWith('data: ')) continue;
+
+          const jsonStr = trimmed.slice(6);
+          try {
+            const data = JSON.parse(jsonStr);
+            if (data.content) {
+              // First content received - streaming has started
+              if (fullContent === '') {
+                setHasStartedStreaming(true);
+              }
+              fullContent += data.content;
+              // Use postProcessResponse like ChatInterface does for proper formatting
+              const processedContent = postProcessResponse(fullContent);
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantId ? { ...m, content: processedContent } : m
+                )
+              );
+            }
+          } catch {
+            continue;
+          }
+        }
+      }
+
+      // Apply final post-processing
+      const finalContent = postProcessResponse(fullContent);
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantId ? { ...m, content: finalContent } : m
+        )
+      );
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') return;
+
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantId
+            ? { ...m, content: `Error: ${error instanceof Error ? error.message : 'Failed'}` }
+            : m
+        )
+      );
+    } finally {
+      setIsLoading(false);
+      setHasStartedStreaming(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  const clearMessages = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    setMessages([]);
+  };
+
+  // Extract code blocks from message content, preserving indentation
+  const extractCodeBlocks = (content: string): string[] => {
+    const codeBlockRegex = /```(?:python)?\n?([\s\S]*?)```/g;
+    const blocks: string[] = [];
+    let match;
+    while ((match = codeBlockRegex.exec(content)) !== null) {
+      // Preserve indentation - only trim trailing newlines, not leading whitespace
+      const code = match[1].replace(/\n+$/, '');
+      blocks.push(code);
+    }
+    return blocks;
+  };
+
+  const handleCopyCode = (code: string, messageId: string) => {
+    navigator.clipboard.writeText(code);
+    setCopiedId(messageId);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  const handleApplyCode = (code: string) => {
+    if (onApplyCode) {
+      onApplyCode(code);
+    }
+  };
+
+  // Process content to add code blocks where needed
+  const processContent = useCallback((content: string): string => {
+    // If already has code blocks, return as-is
+    if (content.includes('```')) {
+      return content;
+    }
+
+    // If it looks like code, wrap it
+    if (looksLikeCode(content)) {
+      return '```python\n' + content + '\n```';
+    }
+
+    return content;
+  }, []);
+
+  // Collapsed view
+  if (isCollapsed) {
+    return (
+      <button
+        onClick={onToggleCollapse}
+        className="h-full w-full flex flex-col items-center justify-center gap-2 bg-zinc-900/95 border-l border-zinc-800/80 hover:bg-zinc-800/50 transition-colors cursor-pointer"
+        title="Expand AI Helper"
+      >
+        <Sparkles className="w-5 h-5 text-teal-500" />
+        <span className="text-xs text-zinc-500 [writing-mode:vertical-lr] rotate-180 font-medium">
+          AI Helper
+        </span>
+      </button>
+    );
+  }
+
+  // Expanded view
+  return (
+    <div className="h-full flex flex-col bg-zinc-900/95 border-l border-zinc-800/80">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800/80 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <Sparkles className="w-4 h-4 text-teal-500" />
+          <h3 className="font-semibold text-zinc-200 text-sm">AI Helper</h3>
+        </div>
+        <div className="flex items-center gap-1">
+          {messages.length > 0 && (
+            <button
+              onClick={clearMessages}
+              className="p-1.5 rounded-md hover:bg-zinc-800/50 transition-colors"
+              title="Clear chat"
+            >
+              <Trash2 className="w-3.5 h-3.5 text-zinc-500" />
+            </button>
+          )}
+          <button
+            onClick={onToggleCollapse}
+            className="p-1.5 rounded-md hover:bg-zinc-800/50 transition-colors"
+            title="Collapse"
+          >
+            <ChevronLeft className="w-4 h-4 text-zinc-500 rotate-180" />
+          </button>
+        </div>
+      </div>
+
+      <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-3 space-y-3 min-h-0">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center px-4">
+            <Sparkles className="w-8 h-8 text-teal-500/50 mb-3" />
+            <p className="text-sm text-zinc-500 mb-4">
+              Need help? Ask for hints or get the solution.
+            </p>
+            {problem && (
+              <div className="space-y-2 w-full">
+                {[
+                  { label: 'Give me a hint', isSolve: false },
+                  { label: 'Explain the concept', isSolve: false },
+                  { label: 'Solve it', isSolve: true },
+                ].map(({ label, isSolve }) => (
+                  <button
+                    key={label}
+                    onClick={() => handleSendMessage(label, isSolve)}
+                    className={clsx(
+                      'w-full text-left px-3 py-2 rounded-md text-xs transition-colors',
+                      isSolve
+                        ? 'bg-teal-900/40 hover:bg-teal-800/50 text-teal-300 hover:text-teal-200 border border-teal-700/30'
+                        : 'bg-zinc-800/60 hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200'
+                    )}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          messages.map((message) => {
+            const processedContent = processContent(message.content);
+            const codeBlocks = extractCodeBlocks(processedContent);
+            const hasCode = codeBlocks.length > 0;
+
+            return (
+              <div
+                key={message.id}
+                className={clsx(
+                  'flex flex-col',
+                  message.role === 'user' ? 'items-end' : 'items-start'
+                )}
+              >
+                <div
+                  className={clsx(
+                    'max-w-[95%] rounded-lg px-3 py-2 text-sm',
+                    message.role === 'user'
+                      ? 'bg-teal-700/60 text-white'
+                      : 'bg-zinc-800/80 text-zinc-300'
+                  )}
+                >
+                  {message.role === 'assistant' && !message.content ? (
+                    <LoadingStatus
+                      isLoading={isLoading}
+                      hasStartedStreaming={hasStartedStreaming}
+                    />
+                  ) : (
+                    <ReactMarkdown
+                      components={{
+                        code({ className, children, ...props }) {
+                          const match = /language-(\w+)/.exec(className || '');
+                          const code = String(children).replace(/\n$/, '');
+                          const isBlock = match || code.includes('\n') || looksLikeCode(code);
+
+                          if (isBlock) {
+                            return (
+                              <CodeBlock
+                                code={code}
+                                language={match?.[1] || 'python'}
+                                onCopy={() => handleCopyCode(code, message.id)}
+                                onApply={onApplyCode ? () => handleApplyCode(code) : undefined}
+                                copied={copiedId === message.id}
+                              />
+                            );
+                          }
+
+                          return (
+                            <code className="bg-zinc-700/50 px-1 py-0.5 rounded text-xs" {...props}>
+                              {children}
+                            </code>
+                          );
+                        },
+                        pre({ children }) {
+                          return <>{children}</>;
+                        },
+                        p({ children }) {
+                          return <p className="mb-2 last:mb-0">{children}</p>;
+                        },
+                        ul({ children }) {
+                          return <ul className="list-disc ml-4 mb-2 space-y-1">{children}</ul>;
+                        },
+                        ol({ children }) {
+                          return <ol className="list-decimal ml-4 mb-2 space-y-1">{children}</ol>;
+                        },
+                        li({ children }) {
+                          return <li className="text-zinc-300">{children}</li>;
+                        },
+                        strong({ children }) {
+                          return <strong className="font-semibold text-zinc-200">{children}</strong>;
+                        },
+                      }}
+                    >
+                      {processedContent}
+                    </ReactMarkdown>
+                  )}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {problem && (
+        <div className="p-3 border-t border-zinc-800/80 flex-shrink-0">
+          <div className="flex items-end gap-2">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask for help..."
+              disabled={isLoading}
+              rows={1}
+              className="flex-1 bg-zinc-800/60 border border-zinc-700/50 rounded-lg px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-500 resize-none focus:outline-none focus:ring-1 focus:ring-teal-600/50 min-h-[40px] max-h-[100px]"
+              style={{ height: 'auto' }}
+              onInput={(e) => {
+                const target = e.target as HTMLTextAreaElement;
+                target.style.height = 'auto';
+                target.style.height = `${Math.min(target.scrollHeight, 100)}px`;
+              }}
+            />
+            <button
+              onClick={() => handleSendMessage()}
+              disabled={!input.trim() || isLoading}
+              className={clsx(
+                'p-2 rounded-lg transition-all',
+                input.trim() && !isLoading
+                  ? 'bg-teal-600 hover:bg-teal-500 text-white'
+                  : 'bg-zinc-800 text-zinc-500'
+              )}
+            >
+              {isLoading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Send className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Practice/CodeEditor.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useRef, useCallback } from 'react';
+import Editor, { OnMount, OnChange } from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+import { Loader2 } from 'lucide-react';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  language?: string;
+  readOnly?: boolean;
+  height?: string;
+  className?: string;
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  language = 'python',
+  readOnly = false,
+  height = '100%',
+  className,
+}: CodeEditorProps) {
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  const handleEditorMount: OnMount = useCallback((editor) => {
+    editorRef.current = editor;
+    // Don't auto-focus to prevent unwanted page scroll when selecting problems
+  }, []);
+
+  const handleChange: OnChange = useCallback((val) => {
+    onChange(val || '');
+  }, [onChange]);
+
+  return (
+    <div className={className} style={{ height, minHeight: '300px' }}>
+      <Editor
+        height="100%"
+        width="100%"
+        language={language}
+        value={value}
+        onChange={handleChange}
+        onMount={handleEditorMount}
+        theme="quantum-dark"
+        loading={
+          <div className="flex items-center justify-center h-full bg-zinc-900">
+            <Loader2 className="w-6 h-6 animate-spin text-teal-500" />
+          </div>
+        }
+        beforeMount={(monaco) => {
+          monaco.editor.defineTheme('quantum-dark', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [
+              { token: 'comment', foreground: '71717a', fontStyle: 'italic' },
+              { token: 'keyword', foreground: 'c4b5fd' },
+              { token: 'string', foreground: '86efac' },
+              { token: 'number', foreground: 'c4b5fd' },
+              { token: 'type', foreground: '93c5fd' },
+              { token: 'function', foreground: '93c5fd' },
+              { token: 'variable', foreground: 'd4d4d8' },
+              { token: 'operator', foreground: 'f0abfc' },
+              { token: 'delimiter', foreground: 'a1a1aa' },
+            ],
+            colors: {
+              'editor.background': '#18181b',
+              'editor.foreground': '#d4d4d8',
+              'editor.lineHighlightBackground': '#27272a',
+              'editor.selectionBackground': '#0d9488aa',
+              'editor.inactiveSelectionBackground': '#27272a',
+              'editorCursor.foreground': '#14b8a6',
+              'editorLineNumber.foreground': '#52525b',
+              'editorLineNumber.activeForeground': '#a1a1aa',
+              'editorIndentGuide.background': '#27272a',
+              'editorIndentGuide.activeBackground': '#3f3f46',
+              'editor.selectionHighlightBackground': '#0d94882a',
+              'editorBracketMatch.background': '#0d94884a',
+              'editorBracketMatch.border': '#14b8a6',
+              'scrollbar.shadow': '#00000000',
+              'scrollbarSlider.background': '#3f3f4680',
+              'scrollbarSlider.hoverBackground': '#52525b80',
+              'scrollbarSlider.activeBackground': '#71717a80',
+            },
+          });
+        }}
+        options={{
+          readOnly,
+          fontSize: 14,
+          fontFamily: "'JetBrains Mono', Consolas, 'Courier New', monospace",
+          fontLigatures: true,
+          lineHeight: 1.6,
+          padding: { top: 16, bottom: 16 },
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          tabSize: 4,
+          insertSpaces: true,
+          wordWrap: 'on',
+          lineNumbers: 'on',
+          glyphMargin: false,
+          folding: true,
+          lineDecorationsWidth: 8,
+          lineNumbersMinChars: 4,
+          renderLineHighlight: 'line',
+          cursorBlinking: 'smooth',
+          cursorSmoothCaretAnimation: 'on',
+          smoothScrolling: true,
+          contextmenu: true,
+          quickSuggestions: true,
+          suggestOnTriggerCharacters: true,
+          acceptSuggestionOnEnter: 'on',
+          formatOnPaste: true,
+          formatOnType: true,
+          bracketPairColorization: { enabled: true },
+        }}
+      />
+    </div>
+  );
+}
+

src/components/Practice/PracticeInterface.tsx

@@ -0,0 +1,460 @@
+'use client';
+
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { ChevronLeft, ChevronRight, FileText, Lightbulb, Image as ImageIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { CodeEditor } from './CodeEditor';
+import { ProblemList } from './ProblemList';
+import { TestRunner } from './TestRunner';
+import { AIHelper } from './AIHelper';
+import { TASK_LABELS, CATEGORY_LABELS } from '@/config/constants';
+import { extractCodeFromResponse, normalizeIndentation } from '@/lib/utils/response';
+import type { CodingProblem, TestResult } from '@/types';
+
+interface PracticeInterfaceProps {
+  className?: string;
+}
+
+// State saved per problem
+interface ProblemState {
+  code: string;
+  testResult: TestResult | null;
+}
+
+export function PracticeInterface({ className }: PracticeInterfaceProps) {
+  const [selectedProblem, setSelectedProblem] = useState<CodingProblem | null>(null);
+  const [userCode, setUserCode] = useState('');
+  const [currentTestResult, setCurrentTestResult] = useState<TestResult | null>(null);
+
+  // Store state per problem (code and test results)
+  const [problemStates, setProblemStates] = useState<Map<string, ProblemState>>(new Map());
+
+  const [solvedProblems, setSolvedProblems] = useState<Set<string>>(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('solvedProblems');
+      if (stored) {
+        try {
+          return new Set(JSON.parse(stored));
+        } catch {
+          return new Set();
+        }
+      }
+    }
+    return new Set();
+  });
+
+  const [isProblemListCollapsed, setIsProblemListCollapsed] = useState(false);
+  const [isAIHelperCollapsed, setIsAIHelperCollapsed] = useState(true);
+  const [problemListWidth, setProblemListWidth] = useState(320);
+  const [aiHelperWidth, setAIHelperWidth] = useState(320);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('solvedProblems', JSON.stringify([...solvedProblems]));
+    }
+  }, [solvedProblems]);
+
+  // Save current problem state when code changes
+  useEffect(() => {
+    if (selectedProblem && userCode) {
+      setProblemStates(prev => {
+        const newStates = new Map(prev);
+        const existing = newStates.get(selectedProblem.id);
+        newStates.set(selectedProblem.id, {
+          code: userCode,
+          testResult: existing?.testResult ?? currentTestResult,
+        });
+        return newStates;
+      });
+    }
+  }, [selectedProblem, userCode]);
+
+  // Extract code from question for function_completion problems
+  const extractCodeFromQuestion = useCallback((question: string): { description: string; code: string | null } => {
+    const codeBlockMatch = question.match(/```python\n([\s\S]*?)```/);
+    if (codeBlockMatch) {
+      // Remove the code block from the description
+      const description = question.replace(/```python\n[\s\S]*?```/, '').trim();
+      return { description, code: codeBlockMatch[1].trim() };
+    }
+    return { description: question, code: null };
+  }, []);
+
+  // Get display description (without code block for function_completion)
+  const displayDescription = useMemo(() => {
+    if (!selectedProblem) return '';
+    if (selectedProblem.type === 'function_completion') {
+      const { description } = extractCodeFromQuestion(selectedProblem.question);
+      return description || 'Complete the function below:';
+    }
+    return selectedProblem.question;
+  }, [selectedProblem, extractCodeFromQuestion]);
+
+  // Get the function signature for function_completion problems
+  // Returns imports + def line + docstring (everything before 'pass')
+  const getFunctionSignature = useCallback((question: string): string | null => {
+    const { code } = extractCodeFromQuestion(question);
+    if (!code) return null;
+
+    const lines = code.split('\n');
+    const signatureLines: string[] = [];
+    let foundDef = false;
+    let inDocstring = false;
+    let docstringChar = '';
+    let docstringComplete = false;
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+
+      // Check if this is the def line
+      if (!foundDef && trimmed.startsWith('def ')) {
+        foundDef = true;
+        signatureLines.push(line);
+        continue;
+      }
+
+      // If we haven't found def yet, this is an import or other preamble - include it
+      if (!foundDef) {
+        signatureLines.push(line);
+        continue;
+      }
+
+      // After def line, check for docstring
+      if (!inDocstring && !docstringComplete && (line.includes('"""') || line.includes("'''"))) {
+        signatureLines.push(line);
+        docstringChar = line.includes('"""') ? '"""' : "'''";
+        // Check if docstring starts and ends on same line
+        const count = (line.match(new RegExp(docstringChar.replace(/"/g, '\\"'), 'g')) || []).length;
+        if (count >= 2) {
+          // Docstring complete on one line
+          docstringComplete = true;
+          continue;
+        }
+        inDocstring = true;
+        continue;
+      }
+
+      // Check for docstring end (multi-line docstring)
+      if (inDocstring && line.includes(docstringChar)) {
+        signatureLines.push(line);
+        inDocstring = false;
+        docstringComplete = true;
+        continue;
+      }
+
+      // Still inside multi-line docstring
+      if (inDocstring) {
+        signatureLines.push(line);
+        continue;
+      }
+
+      // After docstring is complete, stop at 'pass' or any actual code
+      if (docstringComplete || foundDef) {
+        if (trimmed === 'pass' || trimmed === '' || trimmed.startsWith('#')) {
+          // Skip 'pass', empty lines, and comments after docstring
+          continue;
+        }
+        // Found actual implementation code - stop here
+        break;
+      }
+    }
+
+    return signatureLines.join('\n');
+  }, [extractCodeFromQuestion]);
+
+  const handleSelectProblem = useCallback((problem: CodingProblem) => {
+    // Check if we have saved state for this problem
+    const savedState = problemStates.get(problem.id);
+
+    if (savedState) {
+      // Restore saved code and test result
+      setUserCode(savedState.code);
+      setCurrentTestResult(savedState.testResult);
+    } else {
+      // Set initial code template based on problem type
+      if (problem.type === 'function_completion') {
+        const { code } = extractCodeFromQuestion(problem.question);
+        if (code) {
+          setUserCode(code + '\n    # Your code here\n    pass');
+        } else {
+          setUserCode('# Write your solution here\n');
+        }
+      } else {
+        setUserCode('# Write your solution here\n');
+      }
+      // Reset test result for new problem
+      setCurrentTestResult(null);
+    }
+
+    setSelectedProblem(problem);
+  }, [extractCodeFromQuestion, problemStates]);
+
+  const handleTestComplete = useCallback((result: TestResult) => {
+    setCurrentTestResult(result);
+
+    if (selectedProblem) {
+      // Save test result to problem state
+      setProblemStates(prev => {
+        const newStates = new Map(prev);
+        newStates.set(selectedProblem.id, {
+          code: userCode,
+          testResult: result,
+        });
+        return newStates;
+      });
+
+      if (result.passed) {
+        setSolvedProblems((prev) => new Set([...prev, selectedProblem.id]));
+      }
+    }
+  }, [selectedProblem, userCode]);
+
+  const toggleAIHelper = useCallback(() => {
+    setIsAIHelperCollapsed(prev => !prev);
+  }, []);
+
+  // Handler to apply code from AI Helper to the editor
+  const handleApplyCode = useCallback((code: string) => {
+    if (!selectedProblem) {
+      setUserCode(code);
+      return;
+    }
+
+    // Extract actual code from markdown code blocks if present
+    const extractedCode = extractCodeFromResponse(code, selectedProblem.entryPoint);
+
+    if (selectedProblem.type === 'function_completion') {
+      // For function completion, combine the function signature with the generated body
+      const signature = getFunctionSignature(selectedProblem.question);
+      if (signature) {
+        // Check if the AI response already includes the full function definition
+        const hasFullFunction = extractedCode.match(/^\s*def\s+\w+\s*\(/m);
+
+        if (hasFullFunction) {
+          // AI returned full function - use it directly
+          const normalized = normalizeIndentation(extractedCode, 0);
+          setUserCode(normalized);
+        } else {
+          // AI returned only the body - combine with signature
+          // Normalize the body code to have consistent 4-space indentation for function body
+          const normalizedBody = normalizeIndentation(extractedCode, 4);
+          setUserCode(signature + '\n' + normalizedBody);
+        }
+      } else {
+        setUserCode(extractedCode);
+      }
+    } else {
+      // For code generation, replace the entire code
+      const normalized = normalizeIndentation(extractedCode, 0);
+      setUserCode(normalized);
+    }
+  }, [selectedProblem, getFunctionSignature]);
+
+  return (
+    <div className={clsx('h-full flex overflow-hidden', className)}>
+      {/* Problem List Sidebar */}
+      <div
+        className={clsx(
+          'flex-shrink-0 transition-all duration-200 relative h-full',
+          isProblemListCollapsed ? 'w-12' : ''
+        )}
+        style={{ width: isProblemListCollapsed ? 48 : problemListWidth }}
+      >
+        {isProblemListCollapsed ? (
+          <div className="h-full flex flex-col items-center pt-4 bg-zinc-900/95 border-r border-zinc-800/80">
+            <button
+              onClick={() => setIsProblemListCollapsed(false)}
+              className="p-2 rounded-md hover:bg-zinc-800/50 transition-colors"
+              title="Expand problems"
+            >
+              <span className="text-xs text-zinc-500 [writing-mode:vertical-lr] font-medium">
+                Problems
+              </span>
+            </button>
+          </div>
+        ) : (
+          <>
+            <ProblemList
+              onSelectProblem={handleSelectProblem}
+              selectedProblemId={selectedProblem?.id}
+              solvedProblems={solvedProblems}
+            />
+            <button
+              onClick={() => setIsProblemListCollapsed(true)}
+              className="absolute -right-3 top-4 w-6 h-6 rounded-full bg-zinc-800 border border-zinc-700/50 flex items-center justify-center hover:bg-zinc-700 transition-colors z-50"
+              title="Collapse problems"
+            >
+              <ChevronLeft className="w-4 h-4 text-zinc-400" />
+            </button>
+            <div
+              className="absolute top-0 bottom-0 -right-0.5 w-1 cursor-col-resize hover:bg-teal-500/50 transition-colors z-40"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                const startX = e.clientX;
+                const startWidth = problemListWidth;
+
+                const handleMouseMove = (moveEvent: MouseEvent) => {
+                  const newWidth = Math.min(500, Math.max(240, startWidth + moveEvent.clientX - startX));
+                  setProblemListWidth(newWidth);
+                };
+
+                const handleMouseUp = () => {
+                  document.removeEventListener('mousemove', handleMouseMove);
+                  document.removeEventListener('mouseup', handleMouseUp);
+                  document.body.style.cursor = '';
+                  document.body.style.userSelect = '';
+                };
+
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+                document.body.style.cursor = 'col-resize';
+                document.body.style.userSelect = 'none';
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0 bg-zinc-950 h-full overflow-hidden">
+        {selectedProblem ? (
+          <>
+            {/* Problem Description - compact header */}
+            <div className="flex-shrink-0 border-b border-zinc-800/80 bg-zinc-900/50">
+              <div className="px-4 py-3">
+                <div className="flex items-center gap-2 mb-2 flex-wrap">
+                  <span
+                    className={clsx(
+                      'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border',
+                      selectedProblem.type === 'function_completion'
+                        ? 'bg-emerald-900/30 text-emerald-400 border-emerald-700/30'
+                        : 'bg-blue-900/30 text-blue-400 border-blue-700/30'
+                    )}
+                  >
+                    {TASK_LABELS[selectedProblem.type].label}
+                  </span>
+                  <span className="text-xs text-zinc-500">
+                    {CATEGORY_LABELS[selectedProblem.category]}
+                  </span>
+                  {selectedProblem.hasImage && (
+                    <span className="flex items-center gap-1 text-xs text-zinc-500">
+                      <ImageIcon className="w-3.5 h-3.5" />
+                      Has image
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-start gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-zinc-300 leading-relaxed">
+                      {displayDescription}
+                    </p>
+                  </div>
+                  {selectedProblem.imageUrl && (
+                    <div className="flex-shrink-0">
+                      <img
+                        src={selectedProblem.imageUrl}
+                        alt="Problem illustration"
+                        className="max-w-[160px] max-h-24 rounded-lg border border-zinc-700/50 bg-zinc-900 object-contain"
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Test Runner - at top, compact */}
+            <div className="flex-shrink-0 border-b border-zinc-800/80">
+              <TestRunner
+                key={selectedProblem.id}
+                userCode={userCode}
+                testCode={selectedProblem.testCode}
+                entryPoint={selectedProblem.entryPoint}
+                onTestComplete={handleTestComplete}
+                initialResult={currentTestResult}
+              />
+            </div>
+
+            {/* Code Editor - takes remaining space */}
+            <div className="flex-1 min-h-0">
+              <CodeEditor
+                value={userCode}
+                onChange={setUserCode}
+                language="python"
+                height="calc(100vh - 220px)"
+              />
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center text-center px-4">
+            <div className="w-16 h-16 mb-5 rounded-xl bg-zinc-800/80 border border-teal-700/30 flex items-center justify-center">
+              <FileText className="w-8 h-8 text-teal-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-zinc-200 mb-2">
+              Practice Mode
+            </h2>
+            <p className="text-zinc-500 max-w-md mb-6 text-sm leading-relaxed">
+              Select a coding problem from the sidebar to start practicing.
+              Solve problems and run unit tests to verify your solutions.
+            </p>
+            <div className="flex items-center gap-2 text-xs text-zinc-600">
+              <Lightbulb className="w-4 h-4" />
+              <span>Use the AI Helper for hints and guidance</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* AI Helper Sidebar */}
+      <div
+        className={clsx(
+          'flex-shrink-0 transition-all duration-200 relative h-full'
+        )}
+        style={{ width: isAIHelperCollapsed ? 48 : aiHelperWidth }}
+      >
+        {!isAIHelperCollapsed && (
+          <>
+            <button
+              onClick={toggleAIHelper}
+              className="absolute -left-3 top-4 w-6 h-6 rounded-full bg-zinc-800 border border-zinc-700/50 flex items-center justify-center hover:bg-zinc-700 transition-colors z-50"
+              title="Collapse AI Helper"
+            >
+              <ChevronRight className="w-4 h-4 text-zinc-400" />
+            </button>
+            <div
+              className="absolute top-0 bottom-0 -left-0.5 w-1 cursor-col-resize hover:bg-teal-500/50 transition-colors z-40"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                const startX = e.clientX;
+                const startWidth = aiHelperWidth;
+
+                const handleMouseMove = (moveEvent: MouseEvent) => {
+                  const newWidth = Math.min(500, Math.max(240, startWidth - (moveEvent.clientX - startX)));
+                  setAIHelperWidth(newWidth);
+                };
+
+                const handleMouseUp = () => {
+                  document.removeEventListener('mousemove', handleMouseMove);
+                  document.removeEventListener('mouseup', handleMouseUp);
+                  document.body.style.cursor = '';
+                  document.body.style.userSelect = '';
+                };
+
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+                document.body.style.cursor = 'col-resize';
+                document.body.style.userSelect = 'none';
+              }}
+            />
+          </>
+        )}
+        <AIHelper
+          problem={selectedProblem}
+          userCode={userCode}
+          isCollapsed={isAIHelperCollapsed}
+          onToggleCollapse={toggleAIHelper}
+          onApplyCode={handleApplyCode}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Practice/ProblemList.tsx

@@ -0,0 +1,489 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import {
+  Code,
+  Loader2,
+  RefreshCw,
+  Filter,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CheckCircle2,
+  Circle,
+  Search,
+  X,
+  Image as ImageIcon,
+  Database,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { useDataset } from '@/lib/dataset/DatasetProvider';
+import { TASK_LABELS, CATEGORY_LABELS } from '@/config/constants';
+import type { CodingProblem, TaskType, Category } from '@/types';
+
+interface ProblemListProps {
+  onSelectProblem: (problem: CodingProblem) => void;
+  selectedProblemId?: string;
+  solvedProblems: Set<string>;
+}
+
+const ITEMS_PER_PAGE = 25;
+
+type Split = 'validation' | 'test';
+
+export function ProblemList({
+  onSelectProblem,
+  selectedProblemId,
+  solvedProblems,
+}: ProblemListProps) {
+  const { isLoading: isDatasetLoading, loadedSplits, splitCounts, filterExamples } = useDataset();
+  
+  const [typeFilter, setTypeFilter] = useState<TaskType | 'all'>('all');
+  const [categoryFilter, setCategoryFilter] = useState<Category | 'all'>('all');
+  const [multimodalFilter, setMultimodalFilter] = useState<'all' | 'with' | 'without'>('all');
+  const [showFilters, setShowFilters] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [split, setSplit] = useState<Split>('test');
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+      setCurrentPage(0);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Reset page when filters change
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [split, typeFilter, categoryFilter, multimodalFilter, debouncedSearch]);
+
+  // Filter locally loaded data
+  const { problems, totalProblems } = useMemo(() => {
+    if (!loadedSplits.has(split)) {
+      return { problems: [], totalProblems: 0 };
+    }
+
+    const filters: {
+      type?: TaskType;
+      category?: Category;
+      hasImage?: boolean;
+      search?: string;
+      codingOnly: boolean;
+    } = { codingOnly: true };
+
+    if (typeFilter !== 'all') filters.type = typeFilter;
+    if (categoryFilter !== 'all') filters.category = categoryFilter;
+    if (multimodalFilter === 'with') filters.hasImage = true;
+    else if (multimodalFilter === 'without') filters.hasImage = false;
+    if (debouncedSearch) filters.search = debouncedSearch;
+
+    const result = filterExamples(split, filters, ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
+    
+    const codingProblems = result.examples.filter(
+      (e): e is CodingProblem =>
+        e.testCode !== undefined &&
+        e.entryPoint !== undefined &&
+        (e.type === 'function_completion' || e.type === 'code_generation')
+    );
+
+    return { problems: codingProblems, totalProblems: result.total };
+  }, [loadedSplits, split, filterExamples, typeFilter, categoryFilter, multimodalFilter, debouncedSearch, currentPage]);
+
+  // Scroll to top on page change
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = 0;
+    }
+  }, [currentPage]);
+
+  const totalPages = Math.ceil(totalProblems / ITEMS_PER_PAGE);
+
+  const stats = useMemo(() => ({
+    total: totalProblems,
+    solved: problems.filter((p) => solvedProblems.has(p.id)).length,
+    currentPageSolved: problems.filter((p) => solvedProblems.has(p.id)).length,
+    displayed: problems.length,
+  }), [problems, solvedProblems, totalProblems]);
+
+  const truncateText = (text: string, maxLength: number) => {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength).trim() + '...';
+  };
+
+  const clearSearch = () => {
+    setSearchQuery('');
+    searchInputRef.current?.focus();
+  };
+
+  const badgeColors: Record<string, string> = {
+    function_completion: 'bg-emerald-900/30 text-emerald-400 border-emerald-700/30',
+    code_generation: 'bg-blue-900/30 text-blue-400 border-blue-700/30',
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      clearSearch();
+    }
+  };
+
+  const isLoading = isDatasetLoading || !loadedSplits.has(split);
+
+  return (
+    <div className="h-full flex flex-col bg-zinc-900/95 overflow-hidden">
+      {/* Header */}
+      <div className="p-4 border-b border-zinc-800/80 flex-shrink-0">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Code className="w-4 h-4 text-teal-500" />
+            <h2 className="font-semibold text-zinc-200">Practice Problems</h2>
+          </div>
+          {isLoading && (
+            <Loader2 className="w-4 h-4 animate-spin text-zinc-500" />
+          )}
+        </div>
+
+        {/* Split Selector */}
+        <div className="flex gap-1 mb-3 bg-zinc-800/50 p-1 rounded-lg">
+          {(['test', 'validation'] as Split[]).map((s) => (
+            <button
+              key={s}
+              onClick={() => setSplit(s)}
+              className={clsx(
+                'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all',
+                split === s
+                  ? 'bg-teal-600/80 text-white shadow-sm'
+                  : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/50'
+              )}
+            >
+              <div className="flex items-center justify-center gap-1.5">
+                <Database className="w-3 h-3" />
+                <span className="capitalize">{s}</span>
+                {splitCounts[s] && (
+                  <span className="text-[10px] opacity-70">({splitCounts[s]})</span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* Search */}
+        <div className="relative mb-3">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search problems..."
+            className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-lg pl-9 pr-8 py-2 text-sm text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:ring-1 focus:ring-teal-600/50 focus:border-teal-700/50"
+          />
+          {searchQuery && (
+            <button
+              onClick={clearSearch}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300 transition-colors"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+
+        {/* Stats */}
+        <div className="flex items-center gap-2 text-xs text-zinc-500 mb-3">
+          <span className="flex items-center gap-1">
+            <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
+            {stats.currentPageSolved} solved
+          </span>
+          <span className="text-zinc-600">|</span>
+          <span>{stats.total} problems</span>
+          {debouncedSearch && (
+            <>
+              <span className="text-zinc-600">|</span>
+              <span className="text-teal-400 truncate max-w-[100px]">
+                &quot;{debouncedSearch}&quot;
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* Filters Toggle */}
+        <button
+          onClick={() => setShowFilters(!showFilters)}
+          className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-300 transition-colors"
+        >
+          <Filter className="w-4 h-4" />
+          <span>Filters</span>
+          {(typeFilter !== 'all' || categoryFilter !== 'all' || multimodalFilter !== 'all') && (
+            <span className="px-1.5 py-0.5 text-[10px] bg-teal-600/30 text-teal-400 rounded">
+              Active
+            </span>
+          )}
+          <ChevronDown
+            className={clsx(
+              'w-4 h-4 transition-transform',
+              showFilters && 'rotate-180'
+            )}
+          />
+        </button>
+
+        {/* Filter Options */}
+        {showFilters && (
+          <div className="mt-3 space-y-3 animate-in slide-in-from-top-2 duration-200">
+            <div>
+              <label className="text-xs text-zinc-500 mb-1 block">
+                Task Type
+              </label>
+              <select
+                value={typeFilter}
+                onChange={(e) => setTypeFilter(e.target.value as TaskType | 'all')}
+                className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-teal-600/50"
+              >
+                <option value="all">All Types</option>
+                <option value="function_completion">Function Completion</option>
+                <option value="code_generation">Code Generation</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="text-xs text-zinc-500 mb-1 block">
+                Category
+              </label>
+              <select
+                value={categoryFilter}
+                onChange={(e) => setCategoryFilter(e.target.value as Category | 'all')}
+                className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-teal-600/50"
+              >
+                <option value="all">All Categories</option>
+                {Object.entries(CATEGORY_LABELS).map(([key, label]) => (
+                  <option key={key} value={key}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="text-xs text-zinc-500 mb-1 block">
+                Multimodal
+              </label>
+              <select
+                value={multimodalFilter}
+                onChange={(e) => setMultimodalFilter(e.target.value as 'all' | 'with' | 'without')}
+                className="w-full bg-zinc-800/80 border border-zinc-700/50 rounded-md px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:ring-1 focus:ring-teal-600/50"
+              >
+                <option value="all">All Problems</option>
+                <option value="with">With Images</option>
+                <option value="without">Text Only</option>
+              </select>
+            </div>
+
+            {/* Clear Filters */}
+            {(typeFilter !== 'all' || categoryFilter !== 'all' || multimodalFilter !== 'all') && (
+              <button
+                onClick={() => {
+                  setTypeFilter('all');
+                  setCategoryFilter('all');
+                  setMultimodalFilter('all');
+                }}
+                className="w-full py-2 text-xs text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50 rounded-md transition-colors"
+              >
+                Clear all filters
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Problem List */}
+      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto p-3 scroll-smooth min-h-0">
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center h-40 text-zinc-500">
+            <Loader2 className="w-6 h-6 animate-spin mb-2" />
+            <span className="text-sm">Loading problems...</span>
+          </div>
+        ) : problems.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-40 text-zinc-500 text-center">
+            <Filter className="w-6 h-6 mb-2 opacity-50" />
+            <p className="text-sm">No problems match your filters</p>
+            {debouncedSearch && (
+              <button
+                onClick={clearSearch}
+                className="mt-2 text-teal-400 hover:text-teal-300 text-sm"
+              >
+                Clear search
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <p className="text-xs text-zinc-500 px-1 mb-2">
+              Showing {currentPage * ITEMS_PER_PAGE + 1}–{Math.min((currentPage + 1) * ITEMS_PER_PAGE, totalProblems)} of {totalProblems}
+            </p>
+            {problems.map((problem, idx) => {
+              const isSolved = solvedProblems.has(problem.id);
+              const isSelected = problem.id === selectedProblemId;
+              const taskConfig = TASK_LABELS[problem.type];
+              const globalIndex = currentPage * ITEMS_PER_PAGE + idx + 1;
+
+              return (
+                <button
+                  key={problem.id}
+                  onClick={() => onSelectProblem(problem)}
+                  className={clsx(
+                    'w-full text-left p-3 rounded-lg transition-all duration-200 group',
+                    'border',
+                    isSelected
+                      ? 'bg-teal-900/20 border-teal-700/40 ring-1 ring-teal-600/30'
+                      : 'bg-zinc-800/50 border-zinc-700/30 hover:bg-zinc-800/80 hover:border-zinc-600/40'
+                  )}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="flex-shrink-0 mt-0.5">
+                      {isSolved ? (
+                        <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                      ) : (
+                        <Circle className="w-4 h-4 text-zinc-600" />
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                        <span className="text-[10px] text-zinc-600 font-mono">
+                          #{globalIndex}
+                        </span>
+                        <span
+                          className={clsx(
+                            'inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium border',
+                            badgeColors[problem.type]
+                          )}
+                        >
+                          <Code className="w-3 h-3 mr-1" />
+                          {taskConfig.label}
+                        </span>
+                        <span className="text-[10px] text-zinc-500 truncate">
+                          {CATEGORY_LABELS[problem.category]}
+                        </span>
+                        {problem.hasImage && (
+                          <span className="inline-flex items-center gap-0.5 text-[10px] text-amber-500/80">
+                            <ImageIcon className="w-3 h-3" />
+                          </span>
+                        )}
+                      </div>
+
+                      <p className="text-sm text-zinc-300 leading-snug">
+                        {truncateText(problem.question, 120)}
+                      </p>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Pagination - Fixed overflow */}
+      {totalPages > 1 && !isLoading && (
+        <div className="p-2 border-t border-zinc-800/80 flex-shrink-0">
+          <div className="flex items-center justify-between gap-1">
+            <button
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              disabled={currentPage === 0}
+              className={clsx(
+                'flex items-center gap-0.5 px-2 py-1 text-xs font-medium rounded-md transition-colors flex-shrink-0',
+                currentPage === 0
+                  ? 'text-zinc-600 cursor-not-allowed'
+                  : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+              )}
+            >
+              <ChevronLeft className="w-3.5 h-3.5" />
+              <span className="hidden sm:inline">Prev</span>
+            </button>
+
+            <div className="flex items-center gap-0.5 overflow-hidden flex-1 justify-center min-w-0">
+              {(() => {
+                const maxVisible = 3;
+                const pages: (number | 'ellipsis')[] = [];
+                
+                if (totalPages <= maxVisible + 2) {
+                  // Show all pages
+                  for (let i = 0; i < totalPages; i++) pages.push(i);
+                } else {
+                  // Always show first page
+                  pages.push(0);
+                  
+                  if (currentPage > 2) {
+                    pages.push('ellipsis');
+                  }
+                  
+                  // Show pages around current
+                  const start = Math.max(1, currentPage - 1);
+                  const end = Math.min(totalPages - 2, currentPage + 1);
+                  
+                  for (let i = start; i <= end; i++) {
+                    if (!pages.includes(i)) pages.push(i);
+                  }
+                  
+                  if (currentPage < totalPages - 3) {
+                    pages.push('ellipsis');
+                  }
+                  
+                  // Always show last page
+                  if (!pages.includes(totalPages - 1)) {
+                    pages.push(totalPages - 1);
+                  }
+                }
+
+                return pages.map((page, idx) => {
+                  if (page === 'ellipsis') {
+                    return (
+                      <span key={`ellipsis-${idx}`} className="text-zinc-600 px-0.5 text-xs">
+                        …
+                      </span>
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={page}
+                      onClick={() => setCurrentPage(page)}
+                      className={clsx(
+                        'w-6 h-6 text-[11px] font-medium rounded transition-colors flex-shrink-0',
+                        currentPage === page
+                          ? 'bg-teal-600/80 text-white'
+                          : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200'
+                      )}
+                    >
+                      {page + 1}
+                    </button>
+                  );
+                });
+              })()}
+            </div>
+
+            <button
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={currentPage >= totalPages - 1}
+              className={clsx(
+                'flex items-center gap-0.5 px-2 py-1 text-xs font-medium rounded-md transition-colors flex-shrink-0',
+                currentPage >= totalPages - 1
+                  ? 'text-zinc-600 cursor-not-allowed'
+                  : 'text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100'
+              )}
+            >
+              <span className="hidden sm:inline">Next</span>
+              <ChevronRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Practice/TestRunner.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Play,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  ChevronDown,
+  ChevronUp,
+  AlertTriangle,
+  Loader2,
+  Terminal,
+  FileCode,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import type { TestResult } from '@/types';
+
+interface TestRunnerProps {
+  userCode: string;
+  testCode: string;
+  entryPoint: string;
+  onTestComplete: (result: TestResult) => void;
+  initialResult?: TestResult | null;
+}
+
+export function TestRunner({
+  userCode,
+  testCode,
+  entryPoint,
+  onTestComplete,
+  initialResult = null,
+}: TestRunnerProps) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [result, setResult] = useState<TestResult | null>(initialResult);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showTraceback, setShowTraceback] = useState(false);
+
+  const runTests = async () => {
+    if (isRunning) return;
+
+    setIsRunning(true);
+    setResult(null);
+    setShowTraceback(false);
+
+    try {
+      const response = await fetch('/api/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userCode,
+          testCode,
+          entryPoint,
+          timeout: 30,
+        }),
+      });
+
+      const data = await response.json();
+      setResult(data);
+      onTestComplete(data);
+      // Auto-expand on failure
+      if (!data.passed) {
+        setIsExpanded(true);
+      }
+    } catch (error) {
+      const errorResult: TestResult = {
+        passed: false,
+        total: 0,
+        failed: 0,
+        details: [],
+        executionTime: 0,
+        error: error instanceof Error ? error.message : 'Failed to run tests',
+      };
+      setResult(errorResult);
+      onTestComplete(errorResult);
+      setIsExpanded(true);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  const hasDetails = result && (result.error || result.details.length > 0 || result.traceback || result.output);
+  const passedCount = result?.details?.filter(t => t.passed).length ?? 0;
+  const totalCount = result?.total ?? result?.details?.length ?? 0;
+
+  return (
+    <div className="flex flex-col">
+      {/* Compact header with Run button and status */}
+      <div className="flex items-center justify-between px-4 py-2 bg-zinc-900/50">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={runTests}
+            disabled={isRunning || !userCode.trim()}
+            className={clsx(
+              'flex items-center gap-2 px-3 py-1.5 rounded-md font-medium text-sm transition-all',
+              isRunning || !userCode.trim()
+                ? 'bg-zinc-800 text-zinc-500 cursor-not-allowed'
+                : 'bg-teal-600 hover:bg-teal-500 text-white'
+            )}
+          >
+            {isRunning ? (
+              <>
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                Running...
+              </>
+            ) : (
+              <>
+                <Play className="w-3.5 h-3.5" />
+                Run Tests
+              </>
+            )}
+          </button>
+
+          {result && (
+            <div className="flex items-center gap-2 text-sm">
+              {result.passed ? (
+                <span className="flex items-center gap-1.5 text-emerald-400">
+                  <CheckCircle2 className="w-4 h-4" />
+                  <span>Passed</span>
+                  {totalCount > 0 && (
+                    <span className="text-emerald-400/70 text-xs font-normal">
+                      ({passedCount}/{totalCount} tests)
+                    </span>
+                  )}
+                </span>
+              ) : (
+                <span className="flex items-center gap-1.5 text-red-400">
+                  <XCircle className="w-4 h-4" />
+                  <span>Failed</span>
+                  {totalCount > 0 && (
+                    <span className="text-red-400/70 text-xs font-normal">
+                      ({passedCount}/{totalCount} tests)
+                    </span>
+                  )}
+                </span>
+              )}
+              <span className="flex items-center gap-1 text-zinc-500 text-xs">
+                <Clock className="w-3 h-3" />
+                {result.executionTime}ms
+              </span>
+            </div>
+          )}
+        </div>
+
+        {result && (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+          >
+            {isExpanded ? 'Hide' : 'Show'} details
+            {isExpanded ? (
+              <ChevronUp className="w-3.5 h-3.5" />
+            ) : (
+              <ChevronDown className="w-3.5 h-3.5" />
+            )}
+          </button>
+        )}
+      </div>
+
+      {/* Expandable details section */}
+      {isExpanded && result && (
+        <div className="px-4 py-3 bg-zinc-900/30 border-t border-zinc-800/50 max-h-64 overflow-y-auto">
+          {/* Summary for passed tests */}
+          {result.passed && !result.error && (
+            <div className="p-3 rounded-lg bg-emerald-950/20 border border-emerald-800/30 mb-3">
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+                <span className="text-sm text-emerald-300 font-medium">
+                  All {totalCount} test{totalCount !== 1 ? 's' : ''} passed successfully!
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Main error message */}
+          {result.error && (
+            <div className="p-3 rounded-lg bg-red-950/30 border border-red-800/40 mb-3">
+              <div className="flex items-start gap-2">
+                <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" />
+                <pre className="text-xs text-red-200/80 whitespace-pre-wrap font-mono flex-1 break-all">
+                  {result.error}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {/* Traceback toggle and display */}
+          {result.traceback && result.traceback !== result.error && (
+            <div className="mb-3">
+              <button
+                onClick={() => setShowTraceback(!showTraceback)}
+                className="flex items-center gap-2 text-xs text-zinc-400 hover:text-zinc-200 transition-colors mb-2"
+              >
+                <FileCode className="w-3.5 h-3.5" />
+                {showTraceback ? 'Hide' : 'Show'} full traceback
+                {showTraceback ? (
+                  <ChevronUp className="w-3 h-3" />
+                ) : (
+                  <ChevronDown className="w-3 h-3" />
+                )}
+              </button>
+              {showTraceback && (
+                <div className="p-3 rounded-lg bg-zinc-900/80 border border-zinc-700/50 overflow-x-auto">
+                  <pre className="text-[11px] text-zinc-300 whitespace-pre font-mono">
+                    {result.traceback}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Output display */}
+          {result.output && (
+            <div className="mb-3">
+              <div className="flex items-center gap-2 text-xs text-zinc-500 mb-1.5">
+                <Terminal className="w-3.5 h-3.5" />
+                <span>Output</span>
+              </div>
+              <div className="p-2 rounded-lg bg-zinc-900/60 border border-zinc-800/50">
+                <pre className="text-[11px] text-zinc-400 whitespace-pre-wrap font-mono">
+                  {result.output}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {/* Test details - always show */}
+          {result.details && result.details.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-xs text-zinc-500 mb-2">Test Results:</div>
+              {result.details.map((test, idx) => (
+                <div
+                  key={idx}
+                  className={clsx(
+                    'p-2 rounded-md border text-xs',
+                    test.passed
+                      ? 'bg-emerald-950/20 border-emerald-800/30'
+                      : 'bg-red-950/20 border-red-800/30'
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    {test.passed ? (
+                      <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
+                    ) : (
+                      <XCircle className="w-3.5 h-3.5 text-red-400" />
+                    )}
+                    <span
+                      className={clsx(
+                        'font-medium',
+                        test.passed ? 'text-emerald-300' : 'text-red-300'
+                      )}
+                    >
+                      {test.name}
+                    </span>
+                  </div>
+
+                  {!test.passed && (test.expected || test.actual || test.error) && (
+                    <div className="ml-5 mt-1 space-y-0.5 font-mono text-[11px]">
+                      {test.expected && (
+                        <p className="text-zinc-400">
+                          <span className="text-zinc-500">Expected: </span>
+                          <span className="text-emerald-300">{test.expected}</span>
+                        </p>
+                      )}
+                      {test.actual && (
+                        <p className="text-zinc-400">
+                          <span className="text-zinc-500">Actual: </span>
+                          <span className="text-red-300">{test.actual}</span>
+                        </p>
+                      )}
+                      {test.error && !result.error && (
+                        <p className="text-red-300/80">{test.error}</p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Practice/index.ts

@@ -0,0 +1,6 @@
+export { CodeEditor } from './CodeEditor';
+export { ProblemList } from './ProblemList';
+export { TestRunner } from './TestRunner';
+export { AIHelper } from './AIHelper';
+export { PracticeInterface } from './PracticeInterface';
+

src/components/ResizablePanel/ResizablePanel.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect, ReactNode } from 'react';
+import { clsx } from 'clsx';
+
+interface ResizablePanelProps {
+  children: ReactNode;
+  defaultWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  side: 'left' | 'right';
+  isOpen: boolean;
+  isCollapsed: boolean;
+  collapsedWidth: number;
+  storageKey?: string;
+  className?: string;
+}
+
+export function ResizablePanel({
+  children,
+  defaultWidth,
+  minWidth,
+  maxWidth,
+  side,
+  isOpen,
+  isCollapsed,
+  collapsedWidth,
+  storageKey,
+  className,
+}: ResizablePanelProps) {
+  const [width, setWidth] = useState(() => {
+    if (typeof window !== 'undefined' && storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (!isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
+          return parsed;
+        }
+      }
+    }
+    return defaultWidth;
+  });
+
+  const [isDragging, setIsDragging] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+    startWidthRef.current = width;
+  }, [width]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging) return;
+
+    const diff = side === 'right'
+      ? startXRef.current - e.clientX
+      : e.clientX - startXRef.current;
+
+    const newWidth = Math.min(maxWidth, Math.max(minWidth, startWidthRef.current + diff));
+    setWidth(newWidth);
+  }, [isDragging, minWidth, maxWidth, side]);
+
+  const handleMouseUp = useCallback(() => {
+    if (isDragging) {
+      setIsDragging(false);
+      if (storageKey) {
+        localStorage.setItem(storageKey, width.toString());
+      }
+    }
+  }, [isDragging, storageKey, width]);
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+
+  return (
+    <div
+      ref={panelRef}
+      style={{ width: currentWidth }}
+      className={clsx(
+        'relative flex-shrink-0 transition-[width]',
+        isDragging ? 'duration-0' : 'duration-200',
+        !isOpen && 'hidden lg:flex',
+        className
+      )}
+    >
+      {children}
+
+      {!isCollapsed && isOpen && (
+        <div
+          onMouseDown={handleMouseDown}
+          className={clsx(
+            'absolute top-0 bottom-0 w-1 cursor-col-resize z-50',
+            'hover:bg-teal-500/50 transition-colors',
+            isDragging && 'bg-teal-500/70',
+            side === 'right' ? '-left-0.5' : '-right-0.5'
+          )}
+        >
+          <div
+            className={clsx(
+              'absolute top-1/2 -translate-y-1/2 w-4 h-16 -left-1.5',
+              'flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity',
+              isDragging && 'opacity-100'
+            )}
+          >
+            <div className="w-1 h-8 rounded-full bg-zinc-600 flex flex-col items-center justify-center gap-1">
+              <div className="w-0.5 h-1 rounded-full bg-zinc-400" />
+              <div className="w-0.5 h-1 rounded-full bg-zinc-400" />
+              <div className="w-0.5 h-1 rounded-full bg-zinc-400" />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function useResizableWidth(
+  defaultWidth: number,
+  minWidth: number,
+  maxWidth: number,
+  storageKey?: string
+) {
+  const [width, setWidth] = useState(() => {
+    if (typeof window !== 'undefined' && storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = parseInt(stored, 10);
+        if (!isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
+          return parsed;
+        }
+      }
+    }
+    return defaultWidth;
+  });
+
+  const updateWidth = useCallback((newWidth: number) => {
+    const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));
+    setWidth(clamped);
+    if (storageKey) {
+      localStorage.setItem(storageKey, clamped.toString());
+    }
+  }, [minWidth, maxWidth, storageKey]);
+
+  return [width, updateWidth] as const;
+}
+

src/components/index.ts

@@ -0,0 +1,14 @@
+export { Header } from './Header/Header';
+export { ChatInterface } from './Chat/ChatInterface';
+export { Message } from './Chat/Message';
+export { MessageInput } from './Chat/MessageInput';
+export type { MessageInputRef } from './Chat/MessageInput';
+export { QubitIcon } from './Chat/QubitIcon';
+export { ExecutionResult } from './Chat/ExecutionResult';
+export type { ExecutionResultData } from './Chat/ExecutionResult';
+export { LoadingStatus } from './Chat/LoadingStatus';
+export { WarmupIndicator, WarmupIndicatorCompact } from './Chat/WarmupIndicator';
+export { ExamplesPanel } from './Examples/ExamplesPanel';
+export { ExampleCard } from './Examples/ExampleCard';
+export { ResizablePanel, useResizableWidth } from './ResizablePanel/ResizablePanel';
+export { PracticeInterface, CodeEditor, ProblemList, TestRunner, AIHelper } from './Practice';

src/config/constants.ts

@@ -0,0 +1,172 @@
+import type { Category, TaskType } from '@/types';
+
+export const PROJECT_CONFIG = {
+  name: 'Quantum Assistant',
+  description: 'Multimodal VLM specialized for Quantum Computing with Qiskit',
+  version: '1.0.0',
+  author: 'Samuel Lima Braz',
+  advisor: 'João Paulo Reus Rodrigues Leite',
+  institution: 'UNIFEI - Universidade Federal de Itajubá',
+  year: 2025,
+} as const;
+
+export const LINKS = {
+  github: 'https://github.com/samuellimabraz/quantum-assistant',
+  dataset: 'https://huggingface.co/datasets/samuellimabraz/quantum-assistant',
+  models: 'https://huggingface.co/collections/samuellimabraz/quantum-assistant',
+  qiskit: 'https://qiskit.org/',
+} as const;
+
+export const TASK_LABELS: Record<TaskType, { label: string; description: string; color: string }> = {
+  function_completion: {
+    label: 'Function Completion',
+    description: 'Complete function body from signature + docstring',
+    color: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
+  },
+  code_generation: {
+    label: 'Code Generation',
+    description: 'Generate complete code from natural language',
+    color: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+  },
+  qa: {
+    label: 'Question Answering',
+    description: 'Conceptual explanations and theory',
+    color: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
+  },
+};
+
+export const CATEGORY_LABELS: Record<Category, string> = {
+  circuits_and_gates: 'Circuits & Gates',
+  quantum_info_and_operators: 'Quantum Info',
+  algorithms_and_applications: 'Algorithms',
+  hardware_and_providers: 'Hardware',
+  transpilation_and_compilation: 'Transpilation',
+  primitives_and_execution: 'Primitives',
+  noise_and_error_mitigation: 'Error Mitigation',
+};
+
+export const SYSTEM_PROMPT = `You are Quantum Assistant, an expert AI specialized in quantum computing, physics, mathematics, and the Qiskit framework.
+
+## SCOPE RESTRICTIONS (STRICTLY ENFORCED)
+You ONLY answer questions related to:
+- Quantum computing (circuits, gates, algorithms, hardware, error correction)
+- Qiskit framework and IBM Quantum services
+- Physics (quantum mechanics, quantum information theory)
+- Mathematics (linear algebra, probability, complex numbers as they relate to quantum)
+- Machine learning for quantum (QML, variational algorithms, optimization)
+- Scientific computing related to quantum (NumPy, SciPy for quantum applications)
+
+## FORBIDDEN TOPICS - DO NOT ANSWER
+If asked about any of the following, politely decline and redirect to quantum computing:
+- General programming unrelated to quantum computing
+- Personal advice, relationships, lifestyle
+- Politics, news, current events, opinions
+- Harmful, illegal, or unethical content
+- Medical, legal, or financial advice
+- Creative writing, stories, poetry (unless quantum-themed educational)
+- Other AI systems, jailbreaking, prompt injection
+- Anything that could be used maliciously
+
+## RESPONSE GUIDELINES
+1. Generate precise, well-documented Qiskit code following Qiskit 2.0 best practices
+2. Explain quantum computing concepts clearly with mathematical rigor when appropriate
+3. Interpret quantum circuit diagrams, Bloch spheres, and measurement histograms
+4. Help with function completion, code generation, and conceptual questions
+5. Use Qiskit 2.0 APIs exclusively
+6. Prefer primitives (SamplerV2, EstimatorV2) over legacy execute()
+7. Use assign_parameters() instead of deprecated bind_parameters()
+8. Use generate_preset_pass_manager() for circuit optimization
+9. Include all necessary imports in code solutions
+10. Provide clear, educational explanations
+
+## CODE SAFETY
+- Never generate code that accesses environment variables, files outside the sandbox, or network resources
+- Never generate code using dangerous modules (ctypes, pickle, subprocess, etc.)
+- Keep code focused on quantum computing tasks
+
+## OFF-TOPIC RESPONSE
+If a question is outside your scope, respond with:
+"I'm Quantum Assistant, specialized in quantum computing, Qiskit, physics, and related mathematics. I can't help with [topic], but I'd be happy to assist with quantum computing questions! For example, I can help you understand quantum gates, create quantum circuits, or explain quantum algorithms."
+
+Respond accurately and helpfully to quantum computing questions while maintaining strict topic boundaries.`;
+
+// List of allowed topic keywords for input validation
+export const ALLOWED_TOPICS = [
+  // Quantum Computing
+  'quantum', 'qubit', 'qubits', 'superposition', 'entanglement', 'measurement',
+  'circuit', 'gate', 'hadamard', 'cnot', 'pauli', 'rotation', 'phase',
+  'bloch', 'sphere', 'state', 'vector', 'amplitude', 'probability',
+  'algorithm', 'grover', 'shor', 'vqe', 'qaoa', 'qft', 'fourier',
+  'error', 'correction', 'noise', 'decoherence', 'fidelity', 'mitigation',
+  'transpiler', 'transpile', 'optimization', 'compilation',
+  
+  // Qiskit
+  'qiskit', 'ibm', 'aer', 'simulator', 'backend', 'provider', 'runtime',
+  'sampler', 'estimator', 'primitive', 'job', 'result', 'counts',
+  'quantumcircuit', 'classicalregister', 'quantumregister',
+  'pass', 'manager', 'layout', 'routing', 'scheduling',
+  
+  // Physics & Math
+  'physics', 'mechanics', 'hamiltonian', 'unitary', 'hermitian', 'operator',
+  'eigenvalue', 'eigenvector', 'matrix', 'tensor', 'linear', 'algebra',
+  'hilbert', 'space', 'basis', 'orthogonal', 'projection',
+  'complex', 'number', 'exponential', 'trigonometric',
+  'probability', 'distribution', 'expectation', 'variance',
+  'wave', 'function', 'schrodinger', 'dirac', 'bra', 'ket', 'notation',
+  
+  // QML & Optimization
+  'machine', 'learning', 'variational', 'ansatz', 'parameter', 'parametrized',
+  'optimization', 'gradient', 'descent', 'cost', 'function', 'loss',
+  'training', 'classical', 'hybrid', 'neural', 'kernel',
+  
+  // Scientific Computing
+  'numpy', 'scipy', 'matplotlib', 'plot', 'histogram', 'visualization',
+  'array', 'matrix', 'calculation', 'computation', 'simulation',
+  
+  // General programming (quantum-related)
+  'python', 'code', 'function', 'class', 'import', 'library',
+  'example', 'tutorial', 'explain', 'how', 'what', 'why', 'help',
+  'implement', 'create', 'build', 'make', 'generate', 'write',
+];
+
+// Blocked patterns that should never be allowed
+export const BLOCKED_INPUT_PATTERNS = [
+  // Prompt injection attempts
+  /ignore\s+(previous|all|above|prior)\s+(instructions?|prompts?|rules?)/i,
+  /disregard\s+(previous|all|above|prior)/i,
+  /forget\s+(everything|all|your)\s+(instructions?|rules?|training)/i,
+  /new\s+instructions?:/i,
+  /system\s*prompt/i,
+  /jailbreak/i,
+  /dan\s*mode/i,
+  /pretend\s+(you\s+are|to\s+be)/i,
+  /act\s+as\s+(if|a)/i,
+  /roleplay\s+as/i,
+  /you\s+are\s+now/i,
+  
+  // Harmful content requests
+  /how\s+to\s+(hack|attack|exploit|break\s+into)/i,
+  /malware|virus|trojan|ransomware/i,
+  /steal\s+(data|information|credentials|password)/i,
+  /bypass\s+(security|authentication|firewall)/i,
+  /injection\s+attack/i,
+  /sql\s+injection/i,
+  /xss|cross.?site/i,
+  
+  // Explicit requests to bypass restrictions
+  /bypass\s+(filter|restriction|limitation|safety)/i,
+  /disable\s+(safety|filter|moderation)/i,
+  /unlock\s+(hidden|secret|restricted)/i,
+  /override\s+(rules?|restrictions?)/i,
+  
+  // Off-topic explicit requests
+  /write\s+(me\s+)?(a\s+)?(story|poem|essay|article|blog)/i,
+  /tell\s+me\s+(a\s+)?joke/i,
+  /relationship\s+advice/i,
+  /dating\s+advice/i,
+  /political\s+opinion/i,
+  /investment\s+advice/i,
+  /medical\s+(advice|diagnosis)/i,
+  /legal\s+advice/i,
+];
+

src/lib/api/vlm-client.ts

@@ -0,0 +1,212 @@
+import type { ModelConfig } from '@/types';
+
+interface MessageContent {
+  type: 'text' | 'image_url';
+  text?: string;
+  image_url?: { url: string };
+}
+
+interface ChatMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string | MessageContent[];
+}
+
+interface VLMResponse {
+  choices: Array<{
+    message: {
+      content: string;
+    };
+  }>;
+}
+
+interface StreamChoice {
+  delta: {
+    content?: string;
+  };
+}
+
+interface StreamChunk {
+  choices: StreamChoice[];
+}
+
+export class VLMClient {
+  private config: ModelConfig;
+
+  constructor(config: ModelConfig) {
+    this.config = config;
+  }
+
+  private buildPayload(messages: ChatMessage[], stream = false): Record<string, unknown> {
+    return {
+      model: this.config.modelName,
+      messages,
+      max_tokens: this.config.maxTokens,
+      temperature: this.config.temperature,
+      stream,
+    };
+  }
+
+  async generate(
+    prompt: string,
+    systemPrompt?: string,
+    imageBase64?: string
+  ): Promise<string> {
+    const messages: ChatMessage[] = [];
+
+    if (systemPrompt) {
+      messages.push({ role: 'system', content: systemPrompt });
+    }
+
+    if (imageBase64) {
+      messages.push({
+        role: 'user',
+        content: [
+          { type: 'text', text: prompt },
+          {
+            type: 'image_url',
+            image_url: { url: `data:image/jpeg;base64,${imageBase64}` },
+          },
+        ],
+      });
+    } else {
+      messages.push({ role: 'user', content: prompt });
+    }
+
+    return this.chat(messages);
+  }
+
+  async chat(messages: ChatMessage[]): Promise<string> {
+    const url = `${this.config.baseUrl}/chat/completions`;
+    const headers: HeadersInit = { 'Content-Type': 'application/json' };
+
+    if (this.config.apiKey) {
+      headers['Authorization'] = `Bearer ${this.config.apiKey}`;
+    }
+
+    const payload = this.buildPayload(messages, false);
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(
+      () => controller.abort(),
+      this.config.timeout * 1000
+    );
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`API error: ${response.status} - ${errorText}`);
+      }
+
+      const data: VLMResponse = await response.json();
+      const content = data.choices[0]?.message?.content;
+
+      if (!content) {
+        throw new Error('Empty response from model');
+      }
+
+      return content;
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error instanceof Error && error.name === 'AbortError') {
+        throw new Error(`Request timeout after ${this.config.timeout}s`);
+      }
+      throw error;
+    }
+  }
+
+  async *chatStream(messages: ChatMessage[]): AsyncGenerator<string, void, unknown> {
+    const url = `${this.config.baseUrl}/chat/completions`;
+    const headers: HeadersInit = { 'Content-Type': 'application/json' };
+
+    if (this.config.apiKey) {
+      headers['Authorization'] = `Bearer ${this.config.apiKey}`;
+    }
+
+    const payload = this.buildPayload(messages, true);
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(
+      () => controller.abort(),
+      this.config.timeout * 1000
+    );
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(payload),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`API error: ${response.status} - ${errorText}`);
+      }
+
+      if (!response.body) {
+        throw new Error('No response body for streaming');
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed || !trimmed.startsWith('data: ')) continue;
+
+          const data = trimmed.slice(6);
+          if (data === '[DONE]') return;
+
+          try {
+            const chunk: StreamChunk = JSON.parse(data);
+            const content = chunk.choices[0]?.delta?.content;
+            if (content) {
+              yield content;
+            }
+          } catch {
+            // Skip malformed chunks
+          }
+        }
+      }
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error instanceof Error && error.name === 'AbortError') {
+        throw new Error(`Request timeout after ${this.config.timeout}s`);
+      }
+      throw error;
+    }
+  }
+}
+
+export function createVLMClient(): VLMClient {
+  const config: ModelConfig = {
+    baseUrl: process.env.DEMO_MODEL_URL || 'http://localhost:8000/v1',
+    modelName: process.env.DEMO_MODEL_NAME || 'Qwen/Qwen3-VL-8B-Instruct',
+    apiKey: process.env.DEMO_API_KEY || '',
+    maxTokens: parseInt(process.env.DEMO_MAX_TOKENS || '4096', 10),
+    temperature: parseFloat(process.env.DEMO_TEMPERATURE || '0.1'),
+    timeout: parseInt(process.env.DEMO_TIMEOUT || '120', 10),
+  };
+
+  return new VLMClient(config);
+}

src/lib/dataset/DatasetProvider.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import {
+    createContext,
+    useContext,
+    useState,
+    useEffect,
+    useCallback,
+    ReactNode,
+} from 'react';
+import { datasetLoader, FilterOptions, LoadExamplesResult } from './loader';
+import type { DatasetExample, CodingProblem } from '@/types';
+
+type Split = 'train' | 'validation' | 'test';
+
+interface DatasetContextValue {
+    isLoading: boolean;
+    loadedSplits: Set<Split>;
+    splitCounts: Record<string, number>;
+    loadSplit: (split: Split) => Promise<void>;
+    filterExamples: (
+        split: Split,
+        filters: FilterOptions,
+        limit?: number,
+        offset?: number
+    ) => LoadExamplesResult;
+    getCodingProblems: (split: Split) => CodingProblem[];
+    getAllExamples: (split: Split) => DatasetExample[];
+}
+
+const DatasetContext = createContext<DatasetContextValue | null>(null);
+
+interface DatasetProviderProps {
+    children: ReactNode;
+    initialSplits?: Split[];
+}
+
+export function DatasetProvider({
+    children,
+    initialSplits = ['train', 'test', 'validation'],
+}: DatasetProviderProps) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [loadedSplits, setLoadedSplits] = useState<Set<Split>>(new Set());
+    const [splitCounts, setSplitCounts] = useState<Record<string, number>>({});
+
+    // Load initial splits on mount
+    useEffect(() => {
+        const loadInitialData = async () => {
+            setIsLoading(true);
+            try {
+                // Load split info first
+                const info = await datasetLoader.getSplitInfo();
+                setSplitCounts(info);
+
+                // Load initial splits in parallel
+                await Promise.all(
+                    initialSplits.map(async (split) => {
+                        await datasetLoader.preloadSplit(split);
+                        setLoadedSplits((prev) => new Set([...prev, split]));
+                    })
+                );
+            } catch (error) {
+                console.error('Failed to load dataset:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadInitialData();
+    }, []);
+
+    const loadSplit = useCallback(async (split: Split) => {
+        if (datasetLoader.isLoaded(split)) {
+            setLoadedSplits((prev) => new Set([...prev, split]));
+            return;
+        }
+
+        await datasetLoader.preloadSplit(split);
+        setLoadedSplits((prev) => new Set([...prev, split]));
+
+        // Update counts after loading
+        const examples = datasetLoader.getAllExamples(split);
+        setSplitCounts((prev) => ({ ...prev, [split]: examples.length }));
+    }, []);
+
+    const filterExamples = useCallback(
+        (
+            split: Split,
+            filters: FilterOptions,
+            limit: number = 50,
+            offset: number = 0
+        ): LoadExamplesResult => {
+            if (!datasetLoader.isLoaded(split)) {
+                return { examples: [], total: 0 };
+            }
+            return datasetLoader.filterExamples(split, filters, limit, offset);
+        },
+        []
+    );
+
+    const getCodingProblems = useCallback((split: Split): CodingProblem[] => {
+        return datasetLoader.getCodingProblems(split);
+    }, []);
+
+    const getAllExamples = useCallback((split: Split): DatasetExample[] => {
+        return datasetLoader.getAllExamples(split);
+    }, []);
+
+    return (
+        <DatasetContext.Provider
+            value={{
+                isLoading,
+                loadedSplits,
+                splitCounts,
+                loadSplit,
+                filterExamples,
+                getCodingProblems,
+                getAllExamples,
+            }}
+        >
+            {children}
+        </DatasetContext.Provider>
+    );
+}
+
+export function useDataset() {
+    const context = useContext(DatasetContext);
+    if (!context) {
+        throw new Error('useDataset must be used within a DatasetProvider');
+    }
+    return context;
+}
+

src/lib/dataset/loader.ts

@@ -0,0 +1,252 @@
+import type { DatasetExample, TaskType, Category, CodingProblem } from '@/types';
+
+interface HFImage {
+  src: string;
+  height: number;
+  width: number;
+}
+
+interface HFDatasetRow {
+  question: string;
+  answer: string;
+  type: string;
+  category: string;
+  image: HFImage | null;
+  test_code: string | null;
+  entry_point: string | null;
+  source: string;
+}
+
+interface HFDatasetResponse {
+  rows: Array<{ row: HFDatasetRow; row_idx: number }>;
+  num_rows_total: number;
+}
+
+interface HFSplitInfo {
+  num_examples: number;
+}
+
+interface HFDatasetInfo {
+  dataset_info?: {
+    default?: {
+      splits?: Record<string, HFSplitInfo>;
+    };
+  };
+}
+
+export interface LoadExamplesResult {
+  examples: DatasetExample[];
+  total: number;
+}
+
+export interface FilterOptions {
+  type?: TaskType;
+  category?: Category;
+  hasImage?: boolean;
+  search?: string;
+  codingOnly?: boolean;
+}
+
+const HF_DATASET_API = 'https://datasets-server.huggingface.co';
+const DATASET_ID = 'samuellimabraz/quantum-assistant';
+const MAX_FETCH_LIMIT = 100;
+
+export class DatasetLoader {
+  private splitData: Map<string, DatasetExample[]> = new Map();
+  private splitInfo: Record<string, number> = {};
+  private isLoading: Map<string, Promise<void>> = new Map();
+
+  /**
+   * Preload all examples for a split (fetches all data at once)
+   */
+  async preloadSplit(split: 'train' | 'validation' | 'test'): Promise<void> {
+    if (this.splitData.has(split)) {
+      return;
+    }
+
+    // Prevent duplicate loading
+    if (this.isLoading.has(split)) {
+      return this.isLoading.get(split);
+    }
+
+    const loadPromise = this.fetchAllExamples(split);
+    this.isLoading.set(split, loadPromise);
+
+    try {
+      await loadPromise;
+    } finally {
+      this.isLoading.delete(split);
+    }
+  }
+
+  private async fetchAllExamples(split: 'train' | 'validation' | 'test'): Promise<void> {
+    const allExamples: DatasetExample[] = [];
+    let offset = 0;
+    let total = 0;
+
+    // First request to get total count
+    const firstBatch = await this.fetchBatch(split, 0, MAX_FETCH_LIMIT);
+    allExamples.push(...firstBatch.examples);
+    total = firstBatch.total;
+    offset = firstBatch.examples.length;
+
+    // Fetch remaining batches
+    while (offset < total) {
+      const batch = await this.fetchBatch(split, offset, MAX_FETCH_LIMIT);
+      allExamples.push(...batch.examples);
+      offset += batch.examples.length;
+
+      if (batch.examples.length < MAX_FETCH_LIMIT) break;
+    }
+
+    this.splitData.set(split, allExamples);
+    this.splitInfo[split] = allExamples.length;
+  }
+
+  private async fetchBatch(
+    split: string,
+    offset: number,
+    limit: number
+  ): Promise<{ examples: DatasetExample[]; total: number }> {
+    const url = `${HF_DATASET_API}/rows?dataset=${encodeURIComponent(DATASET_ID)}&config=default&split=${split}&offset=${offset}&length=${limit}`;
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to load dataset: ${response.status}`);
+    }
+
+    const data: HFDatasetResponse = await response.json();
+
+    const examples: DatasetExample[] = data.rows.map((item) => {
+      const row = item.row;
+      return {
+        id: `${split}-${item.row_idx}`,
+        question: row.question,
+        answer: row.answer,
+        type: row.type as TaskType,
+        category: row.category as Category,
+        imageUrl: row.image?.src || undefined,
+        hasImage: row.image !== null,
+        testCode: row.test_code || undefined,
+        entryPoint: row.entry_point || undefined,
+        source: row.source,
+      };
+    });
+
+    return { examples, total: data.num_rows_total };
+  }
+
+  /**
+   * Check if a split is loaded
+   */
+  isLoaded(split: 'train' | 'validation' | 'test'): boolean {
+    return this.splitData.has(split);
+  }
+
+  /**
+   * Get loading progress (for UI feedback)
+   */
+  isCurrentlyLoading(split: 'train' | 'validation' | 'test'): boolean {
+    return this.isLoading.has(split);
+  }
+
+  /**
+   * Get all examples for a split (must be preloaded first)
+   */
+  getAllExamples(split: 'train' | 'validation' | 'test'): DatasetExample[] {
+    return this.splitData.get(split) || [];
+  }
+
+  /**
+   * Get coding problems from loaded data
+   */
+  getCodingProblems(split: 'train' | 'validation' | 'test'): CodingProblem[] {
+    const examples = this.splitData.get(split) || [];
+    return examples.filter(
+      (e): e is CodingProblem =>
+        e.testCode !== undefined &&
+        e.entryPoint !== undefined &&
+        (e.type === 'function_completion' || e.type === 'code_generation')
+    );
+  }
+
+  /**
+   * Filter and paginate locally loaded data
+   */
+  filterExamples(
+    split: 'train' | 'validation' | 'test',
+    filters: FilterOptions,
+    limit: number = 50,
+    offset: number = 0
+  ): LoadExamplesResult {
+    let examples = filters.codingOnly
+      ? this.getCodingProblems(split)
+      : this.getAllExamples(split);
+
+    // Apply filters
+    if (filters.type) {
+      examples = examples.filter((e) => e.type === filters.type);
+    }
+    if (filters.category) {
+      examples = examples.filter((e) => e.category === filters.category);
+    }
+    if (filters.hasImage !== undefined) {
+      examples = examples.filter((e) => e.hasImage === filters.hasImage);
+    }
+    if (filters.search) {
+      const searchLower = filters.search.toLowerCase();
+      examples = examples.filter(
+        (e) =>
+          e.question.toLowerCase().includes(searchLower) ||
+          e.answer.toLowerCase().includes(searchLower)
+      );
+    }
+
+    const total = examples.length;
+    const paginated = examples.slice(offset, offset + limit);
+
+    return { examples: paginated, total };
+  }
+
+  /**
+   * Get split information
+   */
+  async getSplitInfo(): Promise<Record<string, number>> {
+    // Return cached if available
+    if (Object.keys(this.splitInfo).length > 0) {
+      return this.splitInfo;
+    }
+
+    const url = `${HF_DATASET_API}/info?dataset=${encodeURIComponent(DATASET_ID)}`;
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        return { train: 8366, validation: 1247, test: 1291 };
+      }
+
+      const data: HFDatasetInfo = await response.json();
+      const splits = data.dataset_info?.default?.splits || {};
+
+      const result: Record<string, number> = {};
+      for (const [name, info] of Object.entries(splits)) {
+        result[name] = info.num_examples || 0;
+      }
+
+      this.splitInfo = result;
+      return result;
+    } catch {
+      return { train: 8366, validation: 1247, test: 1291 };
+    }
+  }
+
+  /**
+   * Clear cache
+   */
+  clearCache(): void {
+    this.splitData.clear();
+    this.splitInfo = {};
+  }
+}
+
+export const datasetLoader = new DatasetLoader();

src/lib/hooks/useWarmup.ts

@@ -0,0 +1,174 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export type WarmupStatus = 'idle' | 'checking' | 'warming' | 'ready' | 'error';
+
+interface WarmupState {
+  status: WarmupStatus;
+  message: string;
+  workers: {
+    idle: number;
+    ready?: number;
+    running: number;
+    initializing: number;
+  } | null;
+}
+
+interface UseWarmupReturn extends WarmupState {
+  triggerWarmup: () => Promise<void>;
+  checkStatus: () => Promise<void>;
+}
+
+let warmupInProgress = false;
+let lastWarmupTime = 0;
+const WARMUP_COOLDOWN = 5000; 
+
+/**
+ * Hook to pre-warm RunPod workers when user lands on the page.
+ * Automatically triggers warmup on mount and polls for readiness.
+ */
+export function useWarmup(autoWarmup = true): UseWarmupReturn {
+  const [state, setState] = useState<WarmupState>({
+    status: 'idle',
+    message: '',
+    workers: null,
+  });
+  const mountedRef = useRef(true);
+
+  const checkStatus = useCallback(async () => {
+    try {
+      const response = await fetch('/api/warmup', { method: 'GET' });
+      if (response.ok && mountedRef.current) {
+        const data = await response.json();
+        
+        if (data.ready) {
+          setState({
+            status: 'ready',
+            message: 'Model ready',
+            workers: data.workers || null,
+          });
+          return;
+        }
+        
+        if (data.warming) {
+          setState({
+            status: 'warming',
+            message: 'Model starting...',
+            workers: data.workers || null,
+          });
+          return;
+        }
+
+        if (data.busy) {
+          setState({
+            status: 'warming',
+            message: 'Model busy...',
+            workers: data.workers || null,
+          });
+          return;
+        }
+
+        setState((prev) => ({
+          ...prev,
+          workers: data.workers || null,
+        }));
+      }
+    } catch {
+      // Silently fail status checks
+    }
+  }, []);
+
+  const triggerWarmup = useCallback(async () => {
+    // Prevent duplicate warmups
+    const now = Date.now();
+    if (warmupInProgress || (now - lastWarmupTime) < WARMUP_COOLDOWN) {
+      await checkStatus();
+      return;
+    }
+    
+    warmupInProgress = true;
+    lastWarmupTime = now;
+    
+    setState((prev) => ({ ...prev, status: 'checking', message: 'Checking model status...' }));
+
+    try {
+      const response = await fetch('/api/warmup', { method: 'POST' });
+      const data = await response.json();
+      
+      if (!mountedRef.current) return;
+
+      if (data.status === 'ready') {
+        setState({
+          status: 'ready',
+          message: 'Model ready',
+          workers: data.workers || null,
+        });
+      } else if (data.status === 'warming') {
+        setState({
+          status: 'warming',
+          message: data.message || 'Starting model...',
+          workers: data.workers || null,
+        });
+      } else if (data.status === 'skipped') {
+        setState({
+          status: 'ready',
+          message: '',
+          workers: null,
+        });
+      } else if (data.status === 'error') {
+        setState({
+          status: 'error',
+          message: data.message || 'Warmup failed',
+          workers: null,
+        });
+      }
+    } catch (error) {
+      if (mountedRef.current) {
+        setState({
+          status: 'error',
+          message: error instanceof Error ? error.message : 'Warmup request failed',
+          workers: null,
+        });
+      }
+    } finally {
+      warmupInProgress = false;
+    }
+  }, [checkStatus]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    
+    if (autoWarmup) {
+      triggerWarmup();
+    }
+    
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [autoWarmup, triggerWarmup]);
+
+  useEffect(() => {
+    if (state.status !== 'warming') return;
+
+    const pollInterval = setInterval(() => {
+      checkStatus();
+    }, 5000); 
+
+    const timeout = setTimeout(() => {
+      clearInterval(pollInterval);
+    }, 180000);
+
+    return () => {
+      clearInterval(pollInterval);
+      clearTimeout(timeout);
+    };
+  }, [state.status, checkStatus]);
+
+  return {
+    ...state,
+    triggerWarmup,
+    checkStatus,
+  };
+}
+

src/lib/utils/image.ts

@@ -0,0 +1,77 @@
+const MAX_DIMENSION = 640;
+
+export async function resizeImageForInference(
+    imageSource: string
+): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+
+        img.onload = () => {
+            let { width, height } = img;
+
+            if (width <= MAX_DIMENSION && height <= MAX_DIMENSION) {
+                if (imageSource.startsWith('data:')) {
+                    resolve(imageSource.split(',')[1]);
+                } else {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = width;
+                    canvas.height = height;
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    ctx.drawImage(img, 0, 0);
+                    const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
+                    resolve(dataUrl.split(',')[1]);
+                }
+                return;
+            }
+
+            const scale = Math.min(MAX_DIMENSION / width, MAX_DIMENSION / height);
+            const newWidth = Math.round(width * scale);
+            const newHeight = Math.round(height * scale);
+
+            const canvas = document.createElement('canvas');
+            canvas.width = newWidth;
+            canvas.height = newHeight;
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Failed to get canvas context'));
+                return;
+            }
+
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+            const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
+            resolve(dataUrl.split(',')[1]);
+        };
+
+        img.onerror = () => {
+            reject(new Error('Failed to load image'));
+        };
+
+        img.src = imageSource;
+    });
+}
+
+export async function fetchAndResizeImage(url: string): Promise<string> {
+    try {
+        const response = await fetch(url);
+        const blob = await response.blob();
+        const dataUrl = await new Promise<string>((resolve) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result as string);
+            reader.readAsDataURL(blob);
+        });
+        return resizeImageForInference(dataUrl);
+    } catch (error) {
+        console.error('Failed to fetch and resize image:', error);
+        throw error;
+    }
+}
+

src/lib/utils/response.ts

@@ -0,0 +1,267 @@
+/**
+ * Response processing utilities for formatting model output.
+ * Handles code extraction, markdown formatting, and indentation normalization.
+ */
+
+/**
+ * Extract code blocks from model response.
+ * Handles markdown code blocks and detects code patterns.
+ */
+export function extractCodeFromResponse(response: string, entryPoint?: string): string {
+  // Find all markdown code blocks
+  const codeBlockRegex = /```(?:python)?\s*\n([\s\S]*?)```/g;
+  const matches: string[] = [];
+  let match;
+
+  while ((match = codeBlockRegex.exec(response)) !== null) {
+    // Preserve indentation - only trim trailing whitespace, not leading
+    matches.push(match[1].replace(/\s+$/, ''));
+  }
+
+  if (matches.length === 0) {
+    // No code blocks found - the response itself might be code
+    // Preserve indentation by only trimming trailing whitespace
+    return response.replace(/\s+$/, '');
+  }
+
+  if (matches.length === 1) {
+    return matches[0];
+  }
+
+  // If multiple blocks, prefer one with entry point
+  if (entryPoint) {
+    const entryPointRegex = new RegExp(`def\\s+${escapeRegex(entryPoint)}\\s*\\(`);
+    for (const block of matches) {
+      if (entryPointRegex.test(block)) {
+        return block;
+      }
+    }
+  }
+
+  // Return longest block
+  return matches.reduce((a, b) => (a.length > b.length ? a : b));
+}
+
+/**
+ * Detect if text contains Python code patterns.
+ */
+export function detectsPythonCode(text: string): boolean {
+  const pythonPatterns = [
+    /^from\s+\w+\s+import/m,
+    /^import\s+\w+/m,
+    /^def\s+\w+\s*\(/m,
+    /^class\s+\w+/m,
+    /^\s*@\w+/m, // decorators
+    /QuantumCircuit\s*\(/,
+    /\.h\s*\(/,
+    /\.cx\s*\(/,
+    /\.measure/,
+    /qc\s*=\s*QuantumCircuit/,
+  ];
+
+  return pythonPatterns.some((pattern) => pattern.test(text));
+}
+
+/**
+ * Format response with proper markdown code blocks.
+ * Ensures code is properly fenced for rendering.
+ */
+export function formatResponseWithCodeBlocks(response: string): string {
+  // If response already has code blocks, return as-is
+  if (/```[\s\S]*```/.test(response)) {
+    return response;
+  }
+
+  // Check if the entire response looks like code
+  const lines = response.split('\n');
+  const codeLines = lines.filter((line) => {
+    const trimmed = line.trim();
+    return (
+      trimmed.startsWith('from ') ||
+      trimmed.startsWith('import ') ||
+      trimmed.startsWith('def ') ||
+      trimmed.startsWith('class ') ||
+      trimmed.startsWith('@') ||
+      trimmed.startsWith('#') ||
+      /^\s*\w+\s*=/.test(trimmed) ||
+      /^\s*\w+\.\w+\(/.test(trimmed) ||
+      /^\s*return\s/.test(trimmed) ||
+      /^\s*if\s/.test(trimmed) ||
+      /^\s*for\s/.test(trimmed) ||
+      /^\s*while\s/.test(trimmed) ||
+      /^\s*try:/.test(trimmed) ||
+      /^\s*except/.test(trimmed) ||
+      trimmed === '' ||
+      trimmed === 'pass'
+    );
+  });
+
+  // If most lines look like code, wrap entire response
+  if (codeLines.length > lines.length * 0.7 && detectsPythonCode(response)) {
+    return '```python\n' + response.trim() + '\n```';
+  }
+
+  // Try to detect inline code that should be blocks
+  // Pattern: text followed by code on same line or multiple statements
+  const inlineCodePattern =
+    /(from\s+\w+\s+import\s+[\w,\s]+)\s+([\w]+\s*=\s*\w+\([^)]*\)(?:\s+[\w.]+\([^)]*\))*)/g;
+
+  if (inlineCodePattern.test(response)) {
+    // Split inline code into proper lines
+    const formatted = response
+      .replace(
+        /(from\s+\w+\s+import\s+[\w,\s]+)/g,
+        '\n```python\n$1'
+      )
+      .replace(
+        /\s+([\w]+\s*=\s*\w+\([^)]*\))/g,
+        '\n$1'
+      )
+      .replace(
+        /(\s+[\w.]+\([^)]*\))(?=\s+[\w.]+\()/g,
+        '$1\n'
+      );
+
+    // Clean up and close code block
+    const lines = formatted.split('\n');
+    let inCodeBlock = false;
+    const result: string[] = [];
+
+    for (const line of lines) {
+      if (line.includes('```python')) {
+        inCodeBlock = true;
+      }
+      result.push(line);
+    }
+
+    if (inCodeBlock) {
+      result.push('```');
+    }
+
+    return result.join('\n');
+  }
+
+  return response;
+}
+
+/**
+ * Process streaming chunk to maintain markdown structure.
+ * Handles partial code blocks during streaming.
+ */
+export function processStreamingContent(
+  fullContent: string,
+  previousContent: string
+): { content: string; isInCodeBlock: boolean } {
+  // Count code block markers
+  const openMarkers = (fullContent.match(/```/g) || []).length;
+  const isInCodeBlock = openMarkers % 2 === 1;
+
+  return {
+    content: fullContent,
+    isInCodeBlock,
+  };
+}
+
+/**
+ * Normalize code indentation.
+ * Similar to _normalize_body_indentation in synthetic.py
+ * 
+ * Handles the common pattern where model outputs function completion code with:
+ * - First line at 0 indentation
+ * - Subsequent lines with extra indentation (e.g., 4 spaces)
+ */
+export function normalizeIndentation(code: string, targetIndent: number = 0): string {
+  const lines = code.split('\n');
+  const nonEmptyLines = lines
+    .map((line, idx) => ({ line, idx }))
+    .filter(({ line }) => line.trim().length > 0);
+
+  if (nonEmptyLines.length === 0) {
+    return code;
+  }
+
+  // Get first non-empty line's indentation
+  const firstNonEmpty = nonEmptyLines[0];
+  const firstIndent = getIndent(firstNonEmpty.line);
+
+  // Check for the common pattern: first line at 0, rest at 4+
+  if (firstIndent === 0 && nonEmptyLines.length > 1) {
+    const subsequentIndents = nonEmptyLines.slice(1).map(({ line }) => getIndent(line));
+    const minSubsequent = Math.min(...subsequentIndents);
+
+    // If subsequent lines have extra indentation, they should align with first line
+    if (minSubsequent > 0) {
+      const result: string[] = [];
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (!line.trim()) {
+          result.push('');
+        } else if (i === firstNonEmpty.idx) {
+          // First line gets target indent
+          result.push(' '.repeat(targetIndent) + line.trim());
+        } else {
+          // Subsequent lines: remove extra base indent, add target
+          const currentIndent = getIndent(line);
+          const relative = currentIndent - minSubsequent;
+          const newIndent = ' '.repeat(targetIndent + Math.max(0, relative));
+          result.push(newIndent + line.trim());
+        }
+      }
+      return result.join('\n');
+    }
+  }
+
+  // Standard case: subtract min indent and add target
+  const minIndent = Math.min(
+    ...nonEmptyLines.map(({ line }) => getIndent(line))
+  );
+
+  return lines
+    .map((line) => {
+      if (line.trim().length === 0) {
+        return '';
+      }
+      const currentIndent = getIndent(line);
+      const relativeIndent = currentIndent - minIndent;
+      const newIndent = ' '.repeat(targetIndent + relativeIndent);
+      return newIndent + line.trim();
+    })
+    .join('\n');
+}
+
+/**
+ * Get the indentation level of a line.
+ */
+function getIndent(line: string): number {
+  const match = line.match(/^(\s*)/);
+  return match ? match[1].length : 0;
+}
+
+/**
+ * Post-process complete response for display.
+ * Applies formatting, code detection, and normalization.
+ */
+export function postProcessResponse(response: string): string {
+  if (!response || response.trim().length === 0) {
+    return response;
+  }
+
+  // First, try to format with proper code blocks
+  let processed = formatResponseWithCodeBlocks(response);
+
+  // Normalize indentation within code blocks
+  processed = processed.replace(
+    /```python\n([\s\S]*?)```/g,
+    (match, code) => {
+      const normalized = normalizeIndentation(code.trim());
+      return '```python\n' + normalized + '\n```';
+    }
+  );
+
+  return processed;
+}
+
+function escapeRegex(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+

src/types/index.ts

@@ -0,0 +1,94 @@
+export type TaskType = 'function_completion' | 'code_generation' | 'qa';
+
+export type Category =
+  | 'circuits_and_gates'
+  | 'quantum_info_and_operators'
+  | 'algorithms_and_applications'
+  | 'hardware_and_providers'
+  | 'transpilation_and_compilation'
+  | 'primitives_and_execution'
+  | 'noise_and_error_mitigation';
+
+export interface DatasetExample {
+  id: string;
+  question: string;
+  answer: string;
+  type: TaskType;
+  category: Category;
+  imageUrl?: string;
+  hasImage: boolean;
+  testCode?: string;
+  entryPoint?: string;
+  source: string;
+}
+
+export interface CodingProblem extends DatasetExample {
+  testCode: string;
+  entryPoint: string;
+}
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  imageUrl?: string;
+  imageBase64?: string;
+  timestamp: Date;
+  isLoading?: boolean;
+}
+
+export interface ChatRequest {
+  messages: Array<{
+    role: string;
+    content: string | Array<{ type: string; text?: string; image_url?: { url: string } }>;
+  }>;
+  image?: string;
+}
+
+export interface ChatResponse {
+  content: string;
+  error?: string;
+}
+
+export interface ModelConfig {
+  baseUrl: string;
+  modelName: string;
+  apiKey: string;
+  maxTokens: number;
+  temperature: number;
+  timeout: number;
+}
+
+export interface ExecuteRequest {
+  code: string;
+  timeout?: number;
+}
+
+export interface ExecuteResponse {
+  success: boolean;
+  output: string;
+  error: string;
+  executionTime: number;
+  hasCircuitOutput?: boolean;
+}
+
+export interface TestResult {
+  passed: boolean;
+  total: number;
+  failed: number;
+  details: TestCaseResult[];
+  executionTime: number;
+  error?: string;
+  traceback?: string;
+  output?: string;
+}
+
+export interface TestCaseResult {
+  name: string;
+  passed: boolean;
+  expected?: string;
+  actual?: string;
+  error?: string;
+}
+
+export type AppMode = 'chat' | 'practice';

tailwind.config.js

@@ -0,0 +1,66 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        quantum: {
+          50: '#f0f4ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+          950: '#1e1b4b',
+        },
+        surface: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-geist-sans)', 'system-ui', 'sans-serif'],
+        mono: ['var(--font-geist-mono)', 'JetBrains Mono', 'monospace'],
+        display: ['var(--font-display)', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'gradient': 'gradient 8s ease infinite',
+        'float': 'float 6s ease-in-out infinite',
+      },
+      keyframes: {
+        gradient: {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+      },
+      backgroundImage: {
+        'grid-pattern': 'linear-gradient(to right, rgba(99, 102, 241, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 0.03) 1px, transparent 1px)',
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+      },
+      backgroundSize: {
+        'grid': '24px 24px',
+      },
+    },
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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" }],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+