Upload 170 files

.dockerignore

@@ -0,0 +1,71 @@
+# Git files
+.git
+.gitignore
+
+# Python cache files
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environment
+venv/
+ENV/
+
+# Node.js files
+node_modules/
+frontend/node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+frontend/build/
+.npm
+.yarn
+
+# IDE files
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Logs
+*.log
+logs/
+
+# Local configuration
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Temp files
+.DS_Store
+Thumbs.db
+*.tmp
+*.temp
+
+# Documentation
+README.md
+DEPLOYMENT.md
+*.md
+
+# Docker files
+Dockerfile*
+docker-compose*

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+image.png filter=lfs diff=lfs merge=lfs -text
+static/img/favicon.ico filter=lfs diff=lfs merge=lfs -text
+static/img/image.png filter=lfs diff=lfs merge=lfs -text

.github/workflows/fly-deploy.yml

@@ -0,0 +1,18 @@
+# See https://fly.io/docs/app-guides/continuous-deployment-with-Facebook-actions/
+
+name: Fly Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Deploy app
+    runs-on: ubuntu-latest
+    concurrency: deploy-group    # optional: ensure only one action runs at a time
+    steps:
+      - uses: actions/checkout@v4
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.gitignore

@@ -0,0 +1,101 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Node.js dependencies
+node_modules/
+frontend/node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# React build output
+frontend/build/
+frontend/dist/
+
+# Static build artifacts
+static/media/
+
+# Package files
+package-lock.json
+yarn.lock
+
+# Logs
+*.log
+logs/
+*.log.*
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp
+.cache/
+
+# Coverage reports
+htmlcov/
+.coverage
+.coverage.*
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# Flask
+instance/
+.webassets-cache
+
+# Docker
+.dockerignore

.idea/.gitignore

@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/QuantumFieldKit.iml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.venv" />
+    </content>
+    <orderEntry type="jdk" jdkName="Python 3.13 (QuantumFieldKit)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/templates" />
+      </list>
+    </option>
+  </component>
+</module>

.idea/copilot.data.migration.agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

.idea/copilot.data.migration.ask.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

.idea/copilot.data.migration.edit.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13 (QuantumFieldKit)" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/QuantumFieldKit.iml" filepath="$PROJECT_DIR$/.idea/QuantumFieldKit.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="13f18b08-acbd-4bdc-87f0-1f84f46c3585" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FlaskConsoleOptions" custom-start-script="import sys; print('Python %s on %s' % (sys.version, sys.platform)); sys.path.extend([WORKING_DIR_AND_PYTHON_PATHS])&#10;from flask.cli import ScriptInfo, NoAppException&#10;for module in [&quot;main.py&quot;, &quot;wsgi.py&quot;, &quot;app.py&quot;]:&#10;    try: locals().update(ScriptInfo(app_import_path=module, create_app=None).load_app().make_shell_context()); print(&quot;\nFlask App: %s&quot; % app.import_name); break&#10;    except NoAppException: pass">
+    <envs>
+      <env key="FLASK_APP" value="app" />
+    </envs>
+    <option name="myCustomStartScript" value="import sys; print('Python %s on %s' % (sys.version, sys.platform)); sys.path.extend([WORKING_DIR_AND_PYTHON_PATHS])&#10;from flask.cli import ScriptInfo, NoAppException&#10;for module in [&quot;main.py&quot;, &quot;wsgi.py&quot;, &quot;app.py&quot;]:&#10;    try: locals().update(ScriptInfo(app_import_path=module, create_app=None).load_app().make_shell_context()); print(&quot;\nFlask App: %s&quot; % app.import_name); break&#10;    except NoAppException: pass" />
+    <option name="myEnvs">
+      <map>
+        <entry key="FLASK_APP" value="app" />
+      </map>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 8
+}</component>
+  <component name="ProjectId" id="33dH1si7wAg3HCmgZrxnQXxBaQj" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  }
+}</component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-js-predefined-d6986cc7102b-256f9dae541f-JavaScript-PY-253.20558.58" />
+        <option value="bundled-python-sdk-7e710ed067e7-8e468156c80b-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-253.20558.58" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="13f18b08-acbd-4bdc-87f0-1f84f46c3585" name="Changes" comment="" />
+      <created>1759639829082</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1759639829082</updated>
+      <workItem from="1759639837125" duration="2723000" />
+      <workItem from="1759642793213" duration="40000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>

Dockerfile

@@ -0,0 +1,66 @@
+# Multi-stage build for better optimization
+FROM node:18-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy package files
+COPY frontend/package*.json ./
+
+# Clear npm cache and install dependencies
+RUN npm cache clean --force && \
+    (npm ci --no-audit --no-fund || npm install --no-audit --no-fund)
+
+# Copy frontend source code
+COPY frontend/ ./
+
+# Build the frontend
+RUN npm run build
+
+# Python backend stage
+FROM python:3.11-slim AS backend
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create non-root user for security
+RUN groupadd -r appuser && useradd -r -g appuser appuser
+
+WORKDIR /app
+
+# Copy and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Copy built frontend from previous stage
+COPY --from=frontend-builder /app/frontend/build ./frontend/build
+
+# Create directories with proper permissions for containerized environments
+RUN mkdir -p /tmp/logs /tmp/matplotlib && \
+    chown -R appuser:appuser /app /tmp/logs /tmp/matplotlib
+
+# Switch to non-root user
+USER appuser
+
+# Set environment variables for containerized environments
+ENV PORT=8080
+ENV HOST=0.0.0.0
+ENV FLASK_ENV=production
+ENV PYTHONPATH=/app
+ENV LOG_DIR=/tmp/logs
+ENV MPLCONFIGDIR=/tmp/matplotlib
+
+EXPOSE 8080
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:8080/api/plugins || exit 1
+
+# Use our startup script which ensures directories are properly configured
+CMD ["python", "startup_hf.py"]

HUGGINGFACE_DEPLOYMENT.md

@@ -0,0 +1,166 @@
+# Deploying QuantumFieldKit on Hugging Face Spaces
+
+This guide explains how to deploy QuantumFieldKit on Hugging Face Spaces.
+
+## Prerequisites
+
+1. A Hugging Face account
+2. A Space repository on Hugging Face
+
+## Deployment Steps
+
+### 1. Create a New Space
+
+1. Go to [Hugging Face Spaces](https://huggingface.co/spaces)
+2. Click "New Space"
+3. Choose a name for your space
+4. Select "Docker" as the Space SDK
+5. Choose your visibility settings (Public/Private)
+
+### 2. Configure Your Space
+
+In your Space repository, create or update the following files:
+
+#### `requirements.txt`
+
+Use the optimized requirements file:
+
+```
+# Requirements specifically optimized for Hugging Face Spaces deployment
+flask>=2.3.0,<3.0.0
+flask-cors>=4.0.0
+flask-socketio>=5.3.2
+Werkzeug>=2.3.0,<3.0.0
+cirq-core>=1.1.0
+numpy>=1.24.0,<2.0.0
+sympy>=1.11.1
+eventlet>=0.33.3
+gunicorn>=20.1.0,<22.0.0
+psutil>=5.9.0
+```
+
+#### `Dockerfile`
+
+Create a Dockerfile that's optimized for Hugging Face Spaces:
+
+```dockerfile
+FROM python:3.11-slim
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create directories with proper permissions for containerized environments
+RUN mkdir -p /tmp/logs /tmp/matplotlib
+
+# Set environment variables for containerized environments
+ENV PORT=7860
+ENV HOST=0.0.0.0
+ENV FLASK_ENV=production
+ENV LOG_DIR=/tmp/logs
+ENV MPLCONFIGDIR=/tmp/matplotlib
+
+EXPOSE 7860
+
+# Use our startup script which ensures directories are properly configured
+CMD ["python", "startup_hf.py"]
+```
+
+### 3. Push Your Code
+
+Push your QuantumFieldKit code to the Space repository:
+
+```bash
+git clone https://huggingface.co/spaces/username/your-space-name
+cd your-space-name
+# Add your QuantumFieldKit files here
+git add .
+git commit -m "Add QuantumFieldKit"
+git push
+```
+
+### 4. Environment Variables
+
+The following environment variables are automatically set for optimal performance on Hugging Face Spaces:
+
+- `PORT`: The port the application should listen on (default: 7860)
+- `HOST`: The host to bind to (default: 0.0.0.0)
+- `FLASK_ENV`: Set to "production"
+- `LOG_DIR`: Set to "/tmp/logs" (writable directory)
+- `MPLCONFIGDIR`: Set to "/tmp/matplotlib" (writable directory)
+
+### 5. Build and Deploy
+
+After pushing your code, Hugging Face Spaces will automatically:
+
+1. Build the Docker image using your Dockerfile
+2. Install the dependencies from requirements.txt
+3. Start the application using the [startup_hf.py](file:///d:/Projects/QuantumFieldKit/startup_hf.py) script
+
+## Troubleshooting
+
+### Permission Errors
+
+If you encounter permission errors like:
+
+```
+PermissionError: [Errno 13] Permission denied: '/app/logs/quantum_field_kit_2025-10-05.log'
+```
+
+This is because the application is trying to write to a non-writable directory. The solution is to:
+
+1. Use `/tmp` directory for logs (already configured in the Dockerfile)
+2. Set the `LOG_DIR` environment variable to `/tmp/logs`
+
+### Matplotlib Configuration Errors
+
+If you see errors like:
+
+```
+mkdir -p failed for path /.config/matplotlib: [Errno 13] Permission denied: '/.config'
+```
+
+This is resolved by setting the `MPLCONFIGDIR` environment variable to a writable directory like `/tmp/matplotlib`.
+
+The [startup_hf.py](file:///d:/Projects/QuantumFieldKit/startup_hf.py) script handles this automatically by:
+
+1. Creating the required directories at startup
+2. Testing write access to these directories
+3. Falling back to alternative directories if needed
+4. Setting the appropriate environment variables
+
+## Performance Considerations
+
+1. **Resource Limits**: Hugging Face Spaces have resource limits. Complex quantum simulations might take longer to execute.
+
+2. **Timeout Settings**: The gunicorn timeout is set to 120 seconds to accommodate longer simulations.
+
+3. **Memory Usage**: Monitor memory usage as quantum simulations can be memory-intensive.
+
+## Customization
+
+You can customize the deployment by:
+
+1. Modifying the Dockerfile to include additional dependencies
+2. Adjusting the gunicorn settings in the [startup_hf.py](file:///d:/Projects/QuantumFieldKit/startup_hf.py) script
+3. Adding custom environment variables in the Hugging Face Space settings
+
+## Support
+
+For issues with deployment, please check:
+
+1. The Hugging Face Space logs
+2. Ensure all dependencies are correctly specified in requirements.txt
+3. Verify the Dockerfile is correctly configured

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mason Parle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,11 +1,246 @@
----
-title: MophongLT
-emoji: 📚
-colorFrom: red
-colorTo: red
-sdk: docker
-pinned: false
-license: cc-by-nc-nd-4.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# GXS - QuantumNexus
+[![Website](https://img.shields.io/website?url=https%3A%2F%2Fquantumfieldkit.com&logo=flyio&label=quantumfieldkit.com&style=for-the-badge)](https://quantumfieldkit.com) [![License](https://img.shields.io/Facebook/license/ChuyenDoiXanh?style=for-the-badge)](LICENSE) [![Python Version](https://img.shields.io/badge/Python-3.8+-blue?style=for-the-badge&logo=python&logoColor=white)](https://www.python.org/) [![Flask](https://img.shields.io/badge/Flask-2.2.3%2B-lightgrey?style=for-the-badge&logo=flask&logoColor=white)](https://flask.palletsprojects.com/) [![Cirq](https://img.shields.io/badge/Cirq-1.1.0%2B-purple?style=for-the-badge&logo=google&logoColor=white)](https://quantumai.google/cirq) [![Docker](https://img.shields.io/badge/Docker-Containerized-blue?style=for-the-badge&logo=docker&logoColor=white)](https://www.docker.com/)
+
+
+##### Visit the live app: [quantumfieldkit.com](https://quantumfieldkit.com/)
+
+## Project Overview
+
+GXS - QuantumNexus is a web-based quantum computing simulation platform designed to bridge the gap between theoretical quantum mechanics and practical quantum computing education. The project aims to provide accessible visualizations and interactive demonstrations of quantum phenomena that are typically difficult to comprehend through traditional learning methods.
+
+## Purpose & Motivation
+
+### Why This Project Exists
+
+The field of quantum computing is growing rapidly, but learning resources often fall into two categories:
+1. Highly theoretical texts with complex mathematics
+2. Oversimplified explanations that miss critical quantum concepts
+
+GXS - QuantumNexus addresses this gap by providing:
+- Visual, interactive representations of quantum states and operations
+- Accurate simulations of quantum algorithms and protocols
+- Educational content that connects theory to visual behavior
+- A no-installation learning environment accessible via web browser
+
+The project was created to democratize quantum computing education and provide both students and professionals with an intuitive understanding of quantum behavior through direct interaction and experimentation.
+
+## Architecture
+
+GXS - QuantumNexus follows a modern web application architecture with a focus on real-time interactivity and computational integrity.
+
+### System Architecture Overview
+
+
+![System Architecture](static/img/image-1.png)
+
+
+### Component Breakdown
+
+#### 1. Backend Architecture
+
+- **Flask Application Layer**
+  - Routes for simulation plugins
+  - Parameter validation and security controls
+  - Template rendering with Jinja2
+  - Error handling and graceful degradation
+
+- **Real-time Communication Layer**
+  - Socket.IO for bidirectional communication
+  - Progress updates during simulation execution
+  - Streaming results for long-running simulations
+
+- **Quantum Simulation Layer**
+  - Google Cirq integration for quantum circuit simulation
+  - Modular plugin system for different quantum algorithms
+  - Advanced visualization data preparation
+  - Optimized for web-appropriate computation limits
+
+#### 2. Frontend Architecture
+
+- **User Interface Layer**
+  - Bootstrap 5 framework for responsive design
+  - Form-based interaction model for simulation parameters
+  - Tab-based result visualization
+  - Educational content modals
+
+- **Visualization Layer**
+  - THREE.js for 3D quantum state visualization (Bloch sphere)
+  - Chart.js for statistical results and distributions
+  - SVG-based circuit diagram visualization
+  - Custom visualization adapters for different quantum protocols
+
+- **Client-side Processing**
+  - JavaScript modules for post-processing simulation results
+  - Dynamic content generation from simulation data
+  - Browser-appropriate computation delegation
+
+#### 3. Deployment Architecture
+
+- **Containerization**
+  - Docker for consistent runtime environment
+  - Multi-stage build process for optimization
+  - Environment-based configuration
+
+- **Hosting**
+  - Fly.io for global edge deployment
+  - Automated deployment pipeline
+  - Resource-constrained execution environment
+
+### Data Flow
+
+1. User configures simulation parameters through web interface
+2. Parameters are validated and passed to the appropriate simulation plugin
+3. Simulation runs on server using Google Cirq
+4. Results streamed back to client via Socket.IO
+5. Client-side processing transforms data into visualizations
+6. Interactive visualization elements respond to user interaction
+
+## Development Process & Technical Decisions
+
+### Technology Selection Rationale
+
+- **Flask**: Chosen for its lightweight nature and flexibility in designing API endpoints and serving web content
+- **Google Cirq**: Selected as the quantum simulation library for its comprehensive gate implementations and support for noise models
+- **Socket.IO**: Implemented to provide real-time feedback during computationally intensive simulations
+- **THREE.js**: Used for 3D visualization of quantum states on the Bloch sphere, providing intuitive representation of qubit states
+- **Bootstrap 5**: Selected for rapid UI development with responsive design principles
+- **Docker + Fly.io**: Chosen for simplified deployment and scaling capabilities
+
+### Development Workflow
+
+The project was developed through several phases:
+
+1. **Research & Planning**
+   - Study of quantum algorithms and their visual representation needs
+   - Identification of key educational quantum protocols
+   - User experience mapping for quantum concept exploration
+
+2. **Core Architecture Development**
+   - Flask application setup with plugin architecture
+   - Integration of Cirq simulation capabilities
+   - Real-time communication layer implementation
+
+3. **Quantum Simulation Implementation**
+   - Protocol-by-protocol implementation of quantum simulations
+   - Enhanced with realistic physics effects (noise, error, etc.)
+   - Development of detailed logging for educational insights
+
+4. **Visualization Layer Development**
+   - Custom visualization components for quantum states
+   - Circuit diagram rendering with interactive elements
+   - Adaptive visualizations for different quantum phenomena
+
+5. **Educational Content Creation**
+   - Writing accessible explanations of quantum concepts
+   - Creating analogies and simplified models for complex ideas
+   - Structuring content to complement interactive elements
+
+6. **Deployment & Optimization**
+   - Containerization with Docker
+   - Performance optimization for web environment
+   - Security hardening and input validation
+
+### Technical Challenges Overcome
+
+- **Computation Balance**: Finding the right balance between simulation accuracy and web performance
+- **Visualization Complexity**: Creating intuitive visualizations for non-intuitive quantum behavior
+- **Cross-browser Compatibility**: Ensuring consistent 3D visualization across different browsers
+- **Resource Constraints**: Optimizing simulations to work within memory and computation limits of web environments
+
+## Key Features & Implementation Details
+
+### Quantum Protocols Implementation
+
+#### BB84 Protocol (Quantum Key Distribution)
+- Implementation of realistic channel effects (noise, loss)
+- Visual pipeline of the BB84 steps from qubit generation to secure key
+- Eavesdropper simulation with detection probability
+
+#### Quantum Teleportation
+- Full circuit implementation with Bell state preparation
+- Step-by-step visualization of the teleportation process
+- Detailed mathematical explanation of quantum operations
+
+#### Quantum Network (Entanglement Swapping)
+- Multi-node quantum network simulation
+- Visualization of entanglement distribution
+- Correlation measurements across network nodes
+
+### Quantum Algorithms Implementation
+
+#### Grover's Algorithm
+- Variable qubit implementation with adjustable search targets
+- Amplitude visualization throughout the algorithm steps
+- Performance comparison with classical search
+
+#### Quantum Fourier Transform
+- Interactive representation of quantum basis transformation
+- Phase visualization before and after transformation
+- Applications in other quantum algorithms explained
+
+#### QAOA (Quantum Approximate Optimization Algorithm)
+- Graph problem visualization
+- Solution quality analysis
+- Classical/quantum hybrid approach demonstration
+
+### Core Visualization Components
+
+#### Bloch Sphere Visualization
+- Interactive 3D representation of qubit states
+- Real-time state updates based on quantum operations
+- Custom implementation using THREE.js with optimizations
+
+#### Quantum Circuit Diagrams
+- SVG-based circuit rendering
+- Gate-by-gate visualization with educational tooltips
+- Downloadable circuit diagrams for educational use
+
+## Resources & Dependencies
+
+### Core Libraries & Frameworks
+
+#### Backend
+- **Flask**: Web application framework
+- **Werkzeug**: WSGI web application toolkit
+- **Flask-SocketIO**: WebSocket communication
+- **Eventlet**: Concurrent networking library
+- **Gunicorn**: WSGI HTTP Server
+
+#### Quantum Computing
+- **Cirq**: Google's framework for creating, editing, and invoking Noisy Intermediate Scale Quantum (NISQ) circuits
+- **NumPy**: Scientific computing package
+- **SymPy**: Symbolic mathematics
+- **NetworkX**: Network creation and analysis
+
+#### Frontend
+- **Bootstrap 5**: Front-end component library
+- **Chart.js**: JavaScript charting library
+- **THREE.js**: JavaScript 3D library
+- **Socket.IO-client**: Real-time bidirectional communication
+
+### Learning Resources
+
+For those interested in quantum computing fundamentals that informed this project:
+
+- **Quantum Computation and Quantum Information**: [Michael Nielsen & Isaac Chuang](https://archive.org/details/QuantumComputationAndQuantumInformation10thAnniversaryEdition/page/n461/mode/2up)
+- **Google Cirq Documentation**: [https://quantumai.google/cirq](https://quantumai.google/cirq)
+- **Qiskit Textbook**: [https://qiskit.org/textbook](https://qiskit.org/textbook)
+- **Quantum Algorithm Zoo**: [https://quantumalgorithmzoo.org/](https://quantumalgorithmzoo.org/)
+
+## Future Development
+
+The project is continually evolving with planned enhancements:
+
+- Additional quantum algorithms and protocols
+- Enhanced visualization components for educational clarity
+- Improved performance for larger quantum systems
+- Advanced noise models for realistic quantum behavior
+- API endpoints for external application integration
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+---
+
+For questions, feedback, or support, please visit [issues](https://Facebook.com/ChuyenDoiXanh/issues)

README_HF.md

@@ -0,0 +1,28 @@
+# QuantumFieldKit on Hugging Face Spaces
+
+This is a deployment of QuantumFieldKit specifically configured for Hugging Face Spaces.
+
+## Quick Start
+
+1. Create a new Docker Space on Hugging Face
+2. Use the files in this repository
+3. The application will automatically start on the port specified by Hugging Face Spaces
+
+## Configuration
+
+The application is pre-configured to work with Hugging Face Spaces:
+
+- Uses `/tmp` directory for logs and temporary files
+- Sets appropriate environment variables for containerized deployment
+- Handles permission restrictions in containerized environments
+
+## Files
+
+- `Dockerfile`: Optimized Docker configuration for Hugging Face Spaces
+- `huggingface_requirements.txt`: Dependencies optimized for Hugging Face Spaces
+- `app.py`: Main application with containerized environment fixes
+- `HUGGINGFACE_DEPLOYMENT.md`: Full deployment guide
+
+## Support
+
+For issues with the deployment, please refer to `HUGGINGFACE_DEPLOYMENT.md` or check the Hugging Face Space logs.

app.py

@@ -0,0 +1,1453 @@
+import os
+import traceback
+import json
+import logging
+from flask import Flask, request, render_template, jsonify, session, abort, send_from_directory
+from flask_socketio import SocketIO, emit
+from werkzeug.middleware.proxy_fix import ProxyFix
+import signal
+from functools import wraps
+#import threading
+#import multiprocessing
+import concurrent.futures
+from datetime import datetime
+import psutil
+import re
+from flask_cors import CORS
+
+# Import simulation functions from plugins
+from plugins.authentication.auth import generate_quantum_fingerprint_cirq
+from plugins.encryption_bb84.bb84 import bb84_protocol_cirq
+from plugins.error_correction.shor_code import run_shor_code
+from plugins.grover.grover import run_grover
+from plugins.handshake.handshake import handshake_cirq
+from plugins.network.network import entanglement_swapping_cirq
+from plugins.qrng.qrng import generate_random_number_cirq
+from plugins.quantum_decryption.quantum_decryption import grover_key_search, shor_factorization
+from plugins.teleportation.teleport import teleportation_circuit
+from plugins.variational.vqe import run_vqe
+from plugins.deutsch_jozsa.deutsch_jozsa import deutsch_jozsa_cirq
+from plugins.quantum_fourier.qft import run_qft
+from plugins.phase_estimation.phase_estimation import run_phase_estimation
+from plugins.optimization.qaoa import run_qaoa
+
+# Configure Errors
+class SimulationError(Exception):
+    """Base class for simulation errors"""
+    def __init__(self, message, param_info=None, suggestion=None):
+        self.message = message
+        self.param_info = param_info
+        self.suggestion = suggestion
+        super().__init__(self.message)
+
+class ParameterError(SimulationError):
+    """Error for invalid simulation parameters"""
+    pass
+
+class QuantumCircuitError(SimulationError):
+    """Error in quantum circuit construction or execution"""
+    pass
+
+class ResourceExceededError(SimulationError):
+    """Error when simulation exceeds available resources"""
+    pass
+
+
+
+def configure_logging():
+    # Use environment variable to determine log directory, fallback to tmp directory for containerized environments
+    log_dir = os.environ.get('LOG_DIR', '/tmp' if os.path.exists('/tmp') else '.')
+    
+    # Create logs directory if it doesn't exist and we have permission
+    try:
+        if not os.path.exists(log_dir):
+            os.makedirs(log_dir, exist_ok=True)
+        # Test if we can write to the directory
+        test_file = os.path.join(log_dir, '.test_write_access')
+        with open(test_file, 'w') as f:
+            f.write('test')
+        os.remove(test_file)
+    except Exception as e:
+        # Fallback to current directory if we can't write to the log directory
+        log_dir = '.'
+        try:
+            if not os.path.exists(log_dir):
+                os.makedirs(log_dir, exist_ok=True)
+        except Exception:
+            # If we still can't create directory, use current directory
+            log_dir = '.'
+    
+    # Create log file with date-based naming
+    log_filename = f"{log_dir}/quantum_field_kit_{datetime.now().strftime('%Y-%m-%d')}.log"
+    
+    # Configure root logger
+    logging.basicConfig(
+        level=logging.INFO,
+        format="%(asctime)s [%(levelname)s] %(name)s - %(message)s",
+        handlers=[
+            # Console handler for immediate feedback (always works)
+            logging.StreamHandler()
+        ]
+    )
+    
+    # Try to add file handler, but don't fail if we can't write to file
+    try:
+        file_handler = logging.FileHandler(log_filename)
+        logging.getLogger().addHandler(file_handler)
+        logger.info(f"File logging configured successfully. Log file: {log_filename}")
+    except Exception as e:
+        # In containerized environments, we might not be able to write files
+        # Just continue with console logging only
+        logger.warning(f"File logging not available: {e}. Using console logging only.")
+    
+    # Set specific logger levels
+    logging.getLogger('werkzeug').setLevel(logging.WARNING)
+    logging.getLogger('socketio').setLevel(logging.WARNING)
+    
+    return logging.getLogger('quantum_field_kit')
+
+# Create application logger
+logger = configure_logging()
+
+# Configure matplotlib for containerized environments
+# Set MPLCONFIGDIR to a writable directory to avoid permission errors
+def setup_matplotlib_config():
+    """Setup matplotlib configuration directory with proper permissions"""
+    mpl_config_dir = os.environ.get('MPLCONFIGDIR', '/tmp/matplotlib' if os.path.exists('/tmp') else './.matplotlib')
+    
+    try:
+        # Create the directory with exist_ok to avoid errors if it already exists
+        os.makedirs(mpl_config_dir, exist_ok=True)
+        
+        # Test if we can write to the directory
+        test_file = os.path.join(mpl_config_dir, '.test_write_access')
+        with open(test_file, 'w') as f:
+            f.write('test')
+        os.remove(test_file)
+        
+        # Set the environment variable
+        os.environ['MPLCONFIGDIR'] = mpl_config_dir
+        logger.info(f"Matplotlib config directory set to: {mpl_config_dir}")
+        return True
+    except Exception as e:
+        logger.warning(f"Could not configure matplotlib directory {mpl_config_dir}: {e}")
+        
+        # Try fallback directories
+        fallback_dirs = ['./.matplotlib', '.', '/tmp']
+        for fallback_dir in fallback_dirs:
+            try:
+                os.makedirs(fallback_dir, exist_ok=True)
+                test_file = os.path.join(fallback_dir, '.test_write_access')
+                with open(test_file, 'w') as f:
+                    f.write('test')
+                os.remove(test_file)
+                os.environ['MPLCONFIGDIR'] = fallback_dir
+                logger.info(f"Matplotlib config directory set to fallback: {fallback_dir}")
+                return True
+            except Exception as fallback_e:
+                logger.warning(f"Fallback directory {fallback_dir} also failed: {fallback_e}")
+                continue
+        
+        # If all else fails, let matplotlib handle it
+        logger.warning("All attempts to set matplotlib config directory failed. Letting matplotlib use its default.")
+        return False
+
+# Setup matplotlib configuration
+setup_matplotlib_config()
+
+# Initialize Flask application (serve React build in production)
+app = Flask(__name__, static_folder='frontend/build', static_url_path='/')
+
+# Configure CORS origins from environment variable
+cors_origins = os.environ.get('CORS_ORIGINS', 
+    'http://localhost:3000,http://127.0.0.1:3000,http://localhost:5000,http://127.0.0.1:5000,https://quantumfieldkit.com,https://www.quantumfieldkit.com,https://quantumfieldkit.fly.dev'
+).split(',')
+
+CORS(app, resources={
+    r"/api/*": {
+        "origins": [origin.strip() for origin in cors_origins],
+        "methods": ["GET", "POST", "OPTIONS"],
+        "allow_headers": ["Content-Type"]
+    }
+})
+app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', os.urandom(24))
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# Add proxy fix for proper IP handling behind reverse proxies
+app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1)
+
+# Initialize Socket.IO for real-time communication
+socketio = SocketIO(app, async_mode='eventlet', cors_allowed_origins="*")
+
+def timeout(seconds):
+    """
+    Decorator that adds a timeout to a function.
+    If the function takes longer than 'seconds' to execute, it will be terminated.
+    
+    Args:
+        seconds: Maximum execution time in seconds
+        
+    Returns:
+        Decorated function with timeout capability
+    """
+    def decorator(func):
+        @wraps(func)
+        def wrapper(*args, **kwargs):
+            plugin_name = kwargs.get('_plugin_name', 'Unknown plugin')
+            with concurrent.futures.ThreadPoolExecutor(max_workers=1) as executor:
+                future = executor.submit(func, *args, **kwargs)
+                try:
+                    return future.result(timeout=seconds)
+                except concurrent.futures.TimeoutError:
+                    # More detailed timeout message
+                    return {
+                        "output": None, 
+                        "log": f"Simulation for {plugin_name} started but could not complete within {seconds} seconds.\n"
+                               f"This may be due to complex parameters or high precision settings.",
+                        "error": f"Execution timed out after {seconds} seconds. Try reducing complexity of the simulation."
+                    }
+        return wrapper
+    return decorator
+
+def json_safe(obj):
+    """
+    Recursively convert non-JSON-serializable objects to strings.
+    Preserve raw SVG (under the key "circuit_svg") so it is not altered.
+    """
+    try:
+        json.dumps(obj)
+        return obj
+    except (TypeError, OverflowError):
+        if isinstance(obj, dict):
+            new_obj = {}
+            for k, v in obj.items():
+                new_obj[k] = v if k == "circuit_svg" else json_safe(v)
+            return new_obj
+        elif isinstance(obj, (list, tuple)):
+            return [json_safe(item) for item in obj]
+        elif hasattr(obj, 'tolist'):  # For numpy arrays
+            return obj.tolist()
+        else:
+            return str(obj)
+
+def check_memory_usage():
+    """Check if memory usage is within acceptable limits"""
+    try:
+        process = psutil.Process(os.getpid())
+        memory_usage = process.memory_info().rss / (1024 * 1024) # MB
+        memory_percent = process.memory_percent()
+        
+        if memory_percent > 85:
+            logger.warning(f"High memory usage detected: {memory_usage:.2f} MB ({memory_percent:.1f}%)")
+            return False
+        
+        return True
+    except Exception as e:
+        logger.error(f"Error checking memory usage: {e}")
+        return True  # Assume it's safe if we can't check
+
+def wrap_result(sim_result):
+    """
+    Standardize the simulation result into a dictionary with keys:
+      - "output": All keys except "log"
+      - "log": Detailed process log
+      - "error": None if successful, or the error message.
+    """
+    if isinstance(sim_result, dict):
+        if 'log' in sim_result:
+            output = {k: v for k, v in sim_result.items() if k != 'log'}
+            output = json_safe(output)
+            return {"output": output, "log": sim_result['log'], "error": None}
+        else:
+            return {"output": json_safe(sim_result), "log": "", "error": None}
+    elif isinstance(sim_result, tuple):
+        if len(sim_result) > 1:
+            *outputs, log = sim_result
+            output = outputs[0] if len(outputs) == 1 else outputs
+            output = json_safe(output)
+            return {"output": output, "log": log, "error": None}
+        else:
+            return {"output": json_safe(sim_result[0]), "log": "", "error": None}
+    else:
+        return {"output": json_safe(sim_result), "log": "", "error": None}
+
+def run_plugin(sim_func, **params):
+    """
+    Calls the simulation function with the given parameters.
+    Returns a standardized result dictionary with improved error handling.
+    """
+    # Check memory before running simulation
+    if not check_memory_usage():
+        return {
+            "output": None,
+            "log": "Server is currently experiencing high memory usage. Please try again later.",
+            "error": "Insufficient memory available for simulation. Try reducing simulation complexity."
+        }
+    
+    try:
+        # Extract plugin key for error reporting but don't pass it to the simulation function
+        plugin_key = params.pop('_plugin_key', 'unknown_plugin')
+        
+        # Also remove _plugin_name if it exists (backward compatibility)
+        params.pop('_plugin_name', None)
+        
+        logger.info(f"Running {plugin_key} simulation with parameters: {params}")
+        
+        # Apply timeout to simulation function
+        @timeout(15)  # Increased timeout for complex simulations
+        def run_with_timeout():
+            # Don't pass plugin identifiers to the actual simulation function
+            return sim_func(**params)
+        
+        sim_result = run_with_timeout()
+        if isinstance(sim_result, dict) and "error" in sim_result and sim_result["error"] is not None:
+            # This is a timeout error from our decorator
+            return sim_result
+        
+        return wrap_result(sim_result)
+    except ParameterError as e:
+        # Handle parameter errors with helpful suggestions
+        error_msg = f"Parameter error: {e.message}"
+        if e.param_info:
+            error_msg += f"\nParameter: {e.param_info}"
+        if e.suggestion:
+            error_msg += f"\nSuggestion: {e.suggestion}"
+        
+        logger.error(f"Parameter error in {plugin_key}: {error_msg}")
+        return {"output": None, "log": None, "error": error_msg}
+    except QuantumCircuitError as e:
+        # Handle quantum circuit specific errors
+        error_msg = f"Quantum circuit error: {e.message}"
+        if e.suggestion:
+            error_msg += f"\nSuggestion: {e.suggestion}"
+        
+        logger.error(f"Circuit error in {plugin_key}: {error_msg}")
+        return {"output": None, "log": None, "error": error_msg}
+    except Exception as e:
+        # Generic exception handling with improved context
+        error_type = type(e).__name__
+        error_msg = str(e)
+        stack_trace = traceback.format_exc()
+        
+        # Create a user-friendly error message
+        user_error = f"Error ({error_type}): {error_msg}"
+        
+        # Log the full technical details
+        logger.error(f"Simulation error in {plugin_key}: {error_type} - {error_msg}\n{stack_trace}")
+        
+        return {
+            "output": None, 
+            "log": f"Simulation failed. See error tab for details.",
+            "error": user_error
+        }
+    
+def validate_parameters(plugin, params):
+    """Enhanced parameter validation with detailed error messages"""
+    validated_params = {}
+    
+    for param in plugin["parameters"]:
+        param_name = param["name"]
+        
+        # Check if required parameter is missing
+        if param_name not in params and "default" not in param:
+            raise ParameterError(
+                f"Missing required parameter: {param_name}",
+                param_info=f"{param_name} ({param['type']})",
+                suggestion="Please provide a value for this required parameter."
+            )
+        
+        # Use default if parameter is missing
+        if param_name not in params and "default" in param:
+            validated_params[param_name] = param["default"]
+            continue
+            
+        # Validate parameter based on type
+        raw_val = params[param_name]
+        
+        if param["type"] == "int":
+            try:
+                val = int(raw_val)
+                # Check min/max bounds
+                if "min" in param and val < param["min"]:
+                    raise ParameterError(
+                        f"Value for {param_name} is too small",
+                        param_info=f"{param_name} = {val}",
+                        suggestion=f"Minimum allowed value is {param['min']}."
+                    )
+                if "max" in param and val > param["max"]:
+                    raise ParameterError(
+                        f"Value for {param_name} is too large",
+                        param_info=f"{param_name} = {val}",
+                        suggestion=f"Maximum allowed value is {param['max']}."
+                    )
+                validated_params[param_name] = val
+            except ValueError:
+                raise ParameterError(
+                    f"Invalid integer value for {param_name}",
+                    param_info=f"Received: {raw_val}",
+                    suggestion="Please provide a valid integer value."
+                )
+                
+        elif param["type"] == "float":
+            try:
+                val = float(raw_val)
+                # Check min/max bounds
+                if "min" in param and val < param["min"]:
+                    raise ParameterError(
+                        f"Value for {param_name} is too small",
+                        param_info=f"{param_name} = {val}",
+                        suggestion=f"Minimum allowed value is {param['min']}."
+                    )
+                if "max" in param and val > param["max"]:
+                    raise ParameterError(
+                        f"Value for {param_name} is too large",
+                        param_info=f"{param_name} = {val}",
+                        suggestion=f"Maximum allowed value is {param['max']}."
+                    )
+                validated_params[param_name] = val
+            except ValueError:
+                raise ParameterError(
+                    f"Invalid float value for {param_name}",
+                    param_info=f"Received: {raw_val}",
+                    suggestion="Please provide a valid decimal number."
+                )
+                
+        elif param["type"] == "bool":
+            if isinstance(raw_val, bool):
+                validated_params[param_name] = raw_val
+            elif isinstance(raw_val, str):
+                validated_params[param_name] = raw_val.lower() == "true"
+            else:
+                raise ParameterError(
+                    f"Invalid boolean value for {param_name}",
+                    param_info=f"Received: {raw_val}",
+                    suggestion="Please provide 'true' or 'false'."
+                )
+                
+        elif param["type"] == "str":
+            if not isinstance(raw_val, str):
+                raw_val = str(raw_val)
+                
+            # Check max length for strings
+            if "max_length" in param and len(raw_val) > param["max_length"]:
+                raise ParameterError(
+                    f"Value for {param_name} is too long",
+                    param_info=f"Length: {len(raw_val)} characters",
+                    suggestion=f"Maximum allowed length is {param['max_length']} characters."
+                )
+                
+            # Check if value is in allowed options
+            if "options" in param and raw_val not in param["options"]:
+                raise ParameterError(
+                    f"Invalid option for {param_name}",
+                    param_info=f"Received: {raw_val}",
+                    suggestion=f"Allowed options are: {', '.join(param['options'])}"
+                )
+                
+            validated_params[param_name] = raw_val
+        
+        elif param["type"] == "select":
+            if "options" in param and raw_val not in param["options"]:
+                raise ParameterError(
+                    f"Invalid selection for {param_name}",
+                    param_info=f"Received: {raw_val}",
+                    suggestion=f"Please select one of: {', '.join(param['options'])}"
+                )
+            validated_params[param_name] = raw_val
+            
+        else:
+            # For unrecognized types, just pass through the value
+            validated_params[param_name] = raw_val
+            
+    return validated_params
+
+
+# --- Plugin Registry ---
+# Define all available quantum simulation plugins
+PLUGINS = {
+    'auth': {
+        'name': 'Post-Quantum Authentication',
+        'description': 'Simulate a lattice-based authentication system that remains secure against quantum computer attacks, based on the Ring-LWE problem.',
+        'icon': 'fa-lock',
+        'category': 'security',
+        'parameters': [
+            {'name': 'username', 'type': 'str', 'default': 'Bob', 'description': 'Username for authentication'},
+            {'name': 'noise', 'type': 'float', 'default': 0.0, 'description': 'Noise level (0.0 - 0.2)',"min": 0, "max": 0.2},
+            {'name': 'dimension', 'type': 'int', 'default': 4, 'description': 'Lattice dimension parameter',"min": 1, "max": 32}
+        ],
+        'function': generate_quantum_fingerprint_cirq,
+        # Standardized runner to match other plugins and Socket.IO flow
+        'run': lambda p: run_plugin(
+            generate_quantum_fingerprint_cirq,
+            _plugin_key="auth",
+            data=p.get("username", "Bob"),
+            num_qubits=p.get("dimension", 4)
+        )
+    },
+
+    "bb84": {
+        "name": "BB84 Protocol Simulation",
+        "description": "Simulate the BB84 quantum key distribution protocol with realistic physical effects.",
+        "icon": "fa-key",
+        "category": "cryptography",
+        "parameters": [
+            {"name": "num_bits", "type": "int", "default": 10, "description": "Number of bits to simulate",
+            "min": 1, "max": 16},
+            
+            {"name": "distance_km", "type": "float", "default": 0.0, "description": "Distance between Alice and Bob (km)",
+            "min": 0.0, "max": 1000.0},
+            
+            {"name": "hardware_type", "type": "select", "default": "fiber", 
+            "description": "Hardware type (fiber, satellite, trapped_ion)", 
+            "options": ["fiber", "satellite", "trapped_ion"]},
+            
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Additional noise probability",
+            "min": 0.0, "max": 0.3},
+            
+            {"name": "eve_present", "type": "bool", "default": False, 
+            "description": "Eavesdropper present"},
+            
+            {"name": "eve_strategy", "type": "select", "default": "intercept_resend", 
+            "description": "Eavesdropper strategy (intercept_resend, beam_splitting, trojan)", 
+            "options": ["intercept_resend", "beam_splitting", "trojan_horse"]},
+            
+            {"name": "detailed_simulation", "type": "bool", "default": True, 
+            "description": "Run detailed quantum simulation"}
+        ],
+        "run": lambda p: run_plugin(bb84_protocol_cirq, 
+                                _plugin_key="bb84",
+                                num_bits=p["num_bits"],
+                                distance_km=p["distance_km"],
+                                hardware_type=p["hardware_type"],
+                                eve_present=p["eve_present"] if isinstance(p["eve_present"], bool) else p["eve_present"].lower() == "true",
+                                eve_strategy=p["eve_strategy"],
+                                detailed_simulation=p["detailed_simulation"] if isinstance(p["detailed_simulation"], bool) else p["detailed_simulation"].lower() == "true",
+                                noise_prob=p["noise"])
+    },
+    
+    "shor": {
+        "name": "Shor's Code Simulation",
+        "description": "Simulate quantum error correction using Shor's code.",
+        "icon": "fa-shield-alt",
+        "category": "error-correction",
+        "parameters": [
+            {"name": "noise", "type": "float", "default": 0.01, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(run_shor_code, _plugin_key="shor", noise_prob=p["noise"])
+    },
+    
+    "grover": {
+        "name": "Grover's Algorithm Simulation",
+        "description": "Simulate Grover's search algorithm.",
+        "icon": "fa-search",
+        "category": "algorithms",
+        "parameters": [
+            {"name": "n", "type": "int", "default": 3, "description": "Number of qubits",
+             "min": 1, "max": 8},
+            {"name": "target_state", "type": "str", "default": "101", "description": "Target state (binary)",
+             "max_length": 8},
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(run_grover, _plugin_key="grover", n=p["n"], target_state=p["target_state"], noise_prob=p["noise"])
+    },
+    
+    "handshake": {
+        "name": "Quantum Handshake Simulation",
+        "description": "Simulate a quantum handshake using entangled Bell pairs.",
+        "icon": "fa-handshake",
+        "category": "protocols",
+        "parameters": [
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(handshake_cirq, _plugin_key="handshake", noise_prob=p["noise"])
+    },
+    
+    "network": {
+        "name": "Entanglement Swapping Simulation",
+        "description": "Simulate a quantum network using entanglement swapping.",
+        "icon": "fa-network-wired",
+        "category": "protocols",
+        "parameters": [
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(entanglement_swapping_cirq, _plugin_key="network", noise_prob=p["noise"])
+    },
+    
+    "qrng": {
+        "name": "Enhanced Quantum Random Number Generator",
+        "description": "Generate truly random numbers using multiple quantum sources with advanced statistical analysis.",
+        "icon": "fa-dice",
+        "category": "utilities",
+        "parameters": [
+            {"name": "num_bits", "type": "int", "default": 8, "description": "Number of quantum bits to generate",
+             "min": 1, "max": 32},
+            {"name": "source_type", "type": "select", "default": "superposition", 
+             "description": "Quantum randomness source",
+             "options": ["superposition", "vacuum_fluctuation", "entanglement"]},
+            {"name": "noise_level", "type": "float", "default": 0.0, "description": "Hardware noise level",
+             "min": 0.0, "max": 0.3},
+            {"name": "enable_post_processing", "type": "bool", "default": False, 
+             "description": "Apply bias correction"},
+            {"name": "hardware_simulation", "type": "bool", "default": False, 
+             "description": "Add timing delays"}
+        ],
+        "run": lambda p: run_plugin(generate_random_number_cirq, 
+                                  _plugin_key="qrng", 
+                                  num_bits=p["num_bits"],
+                                  source_type=p["source_type"],
+                                  noise_level=p["noise_level"],
+                                  enable_post_processing=p["enable_post_processing"] if isinstance(p["enable_post_processing"], bool) else p["enable_post_processing"].lower() == "true",
+                                  hardware_simulation=p["hardware_simulation"] if isinstance(p["hardware_simulation"], bool) else p["hardware_simulation"].lower() == "true")
+    },
+    
+    "teleport": {
+        "name": "Quantum Teleportation Simulation",
+        "description": "Simulate quantum teleportation protocol.",
+        "icon": "fa-atom",
+        "category": "protocols",
+        "parameters": [
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(teleportation_circuit, _plugin_key="teleport", noise_prob=p["noise"])
+    },
+    
+    "vqe": {
+        "name": "Variational Quantum Eigensolver (VQE)",
+        "description": "Simulate VQE to find the ground state energy of a hydrogen molecule with quantum chemical accuracy.",
+        "icon": "fa-wave-square",
+        "category": "algorithms",
+        "parameters": [
+            {"name": "num_qubits", "type": "int", "default": 2, "description": "Number of qubits",
+            "min": 2, "max": 4},
+            {"name": "noise_prob", "type": "float", "default": 0.01, "description": "Noise probability",
+            "min": 0.0, "max": 0.3},
+            {"name": "max_iter", "type": "int", "default": 3, "description": "Maximum iterations",
+            "min": 1, "max": 5},
+            {"name": "bond_distance", "type": "float", "default": 0.7414, "description": "H-H bond distance (Å)",
+            "min": 0.0, "max": 2.5}
+        ],
+        "run": lambda p: run_plugin(run_vqe, 
+                                _plugin_key="vqe", 
+                                num_qubits=p["num_qubits"], 
+                                noise_prob=p["noise_prob"], 
+                                max_iter=p["max_iter"],
+                                bond_distance=p["bond_distance"])
+    },
+    
+    "quantum_decryption_grover": {
+        "name": "Quantum Decryption via Grover Key Search",
+        "description": "Use Grover's algorithm to search for a secret key.",
+        "icon": "fa-unlock",
+        "category": "cryptography",
+        "parameters": [
+            {"name": "key", "type": "int", "default": 5, "description": "Secret key (integer)",
+             "min": 0, "max": 255},
+            {"name": "num_bits", "type": "int", "default": 4, "description": "Number of bits (search space)",
+             "min": 1, "max": 8},
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(grover_key_search, _plugin_key="quantum_decryption_grover", key=p["key"], num_bits=p["num_bits"], noise_prob=p["noise"])
+    },
+    
+    "quantum_decryption_shor": {
+        "name": "Quantum Decryption via Shor Factorization",
+        "description": "Simulate quantum decryption using Shor's code simulation.",
+        "icon": "fa-key",
+        "category": "cryptography",
+        "parameters": [
+            {"name": "N", "type": "int", "default": 15, "description": "Composite number",
+             "min": 4, "max": 100}
+        ],
+        "run": lambda p: run_plugin(shor_factorization, _plugin_key="quantum_decryption_shor", N=p["N"])
+    },
+    
+    "deutsch_jozsa": {
+        "name": "Deutsch-Jozsa Algorithm",
+        "description": "Determine if a function is constant or balanced with a single quantum query.",
+        "icon": "fa-balance-scale",
+        "category": "algorithms",
+        "parameters": [
+            {"name": "n_qubits", "type": "int", "default": 3, "description": "Number of input qubits",
+             "min": 1, "max": 8},
+            {"name": "oracle_type", "type": "str", "default": "random", "description": "Oracle type: constant_0, constant_1, balanced, or random",
+             "options": ["constant_0", "constant_1", "balanced", "random"], "max_length": 10},
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(deutsch_jozsa_cirq, _plugin_key="deutsch_jozsa", n_qubits=p["n_qubits"], oracle_type=p["oracle_type"], noise_prob=p["noise"])
+    },
+
+    "qft": {
+        "name": "Quantum Fourier Transform",
+        "description": "Implement the quantum analogue of the discrete Fourier transform.",
+        "icon": "fa-wave-square",
+        "category": "algorithms",
+        "parameters": [
+            {"name": "n_qubits", "type": "int", "default": 3, "description": "Number of qubits",
+             "min": 1, "max": 8}, 
+            {"name": "input_state", "type": "str", "default": "010", "description": "Input state (binary)",
+             "max_length": 8},
+            {"name": "include_inverse", "type": "str", "default": "False", "description": "Include inverse QFT",
+             "options": ["True", "False"], "max_length": 5},
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(run_qft, _plugin_key="qft", n_qubits=p["n_qubits"], input_state=p["input_state"], 
+                                    include_inverse=p["include_inverse"].lower() == "true", noise_prob=p["noise"])
+    },
+
+    "phase_estimation": {
+        "name": "Quantum Phase Estimation",
+        "description": "Estimate eigenvalues of unitary operators with applications in quantum computing.",
+        "icon": "fa-ruler-combined",
+        "category": "algorithms",
+        "parameters": [
+            {"name": "precision_bits", "type": "int", "default": 3, "description": "Number of bits of precision",
+             "min": 1, "max": 6},
+            {"name": "target_phase", "type": "float", "default": 0.125, "description": "Target phase to estimate (0-1)",
+             "min": 0.0, "max": 1.0},
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3}
+        ],
+        "run": lambda p: run_plugin(run_phase_estimation, _plugin_key="phase_estimation", precision_bits=p["precision_bits"], 
+                                    target_phase=p["target_phase"], noise_prob=p["noise"])
+    },
+
+    "qaoa": {
+        "name": "Quantum Approximate Optimization Algorithm",
+        "description": "Solve combinatorial optimization problems like MaxCut using a hybrid quantum-classical approach.",
+        "icon": "fa-project-diagram",
+        "category": "optimization",
+        "parameters": [
+            {"name": "n_nodes", "type": "int", "default": 4, "description": "Number of nodes in the graph",
+             "min": 2, "max": 8},
+            {"name": "edge_probability", "type": "float", "default": 0.5, "description": "Probability of edge creation",
+             "min": 0.1, "max": 1.0},
+            {"name": "p_layers", "type": "int", "default": 1, "description": "Number of QAOA layers",
+             "min": 1, "max": 3},
+            {"name": "noise", "type": "float", "default": 0.0, "description": "Noise probability",
+             "min": 0.0, "max": 0.3},
+            {"name": "num_samples", "type": "int", "default": 100, "description": "Number of samples",
+             "min": 10, "max": 500}
+        ],
+        "run": lambda p: run_plugin(run_qaoa, _plugin_key="qaoa", n_nodes=p["n_nodes"], edge_probability=p["edge_probability"], 
+                                    p_layers=p["p_layers"], noise_prob=p["noise"], num_samples=p["num_samples"])
+    }
+}
+
+def get_template_path(plugin_key):
+    """
+    Returns the appropriate template file path for the plugin's educational content.
+    This function only returns the path, it doesn't extract content.
+    """
+    templates = {
+        'bb84': 'educational/bb84.html',
+        'teleport': 'educational/teleport.html',
+        'grover': 'educational/grover.html',
+        'handshake': 'educational/handshake.html',
+        'auth': 'educational/auth.html',
+        'network': 'educational/network.html',
+        'qrng': 'educational/qrng.html',
+        'shor': 'educational/shor.html',
+        'vqe': 'educational/vqe.html',
+        'quantum_decryption_grover': 'educational/grover.html',
+        'quantum_decryption_shor': 'educational/shor.html',
+        'deutsch_jozsa': 'educational/deutsch_jozsa.html',
+        'qft': 'educational/qft.html',
+        'phase_estimation': 'educational/phase_estimation.html',
+        'qaoa': 'educational/qaoa.html',
+    }
+    
+    # Return the template path or a default
+    template_name = templates.get(plugin_key, 'educational/default.html')
+    return os.path.join('templates', template_name)
+
+def extract_educational_content(template_path):
+    """
+    Extracts the full educational content from a template file.
+    Looks for content between <!-- EDUCATIONAL-CONTENT BEGIN --> and <!-- EDUCATIONAL-CONTENT END -->
+    """
+    try:
+        if not os.path.exists(template_path):
+            logger.warning(f"Template file not found: {template_path}")
+            return None
+            
+        with open(template_path, 'r') as f:
+            content = f.read()
+            
+        # Use regex to extract content between markers
+        content_pattern = re.compile(r'<!-- EDUCATIONAL-CONTENT BEGIN -->(.*?)<!-- EDUCATIONAL-CONTENT END -->', 
+                                    re.DOTALL)
+        match = content_pattern.search(content)
+        
+        if match:
+            return match.group(1).strip()
+        else:
+            logger.warning(f"Educational content markers not found in {template_path}")
+            return None
+            
+    except Exception as e:
+        logger.error(f"Error extracting educational content: {e}")
+        return None
+
+def extract_mini_explanation(template_path):
+    """
+    Extracts mini explanation from a template file.
+    """
+    try:
+        if not os.path.exists(template_path):
+            logger.warning(f"Template file not found: {template_path}")
+            return None
+            
+        with open(template_path, 'r') as f:
+            content = f.read()
+        
+        # Try all possible marker formats
+        marker_patterns = [
+            r'<!-- MINI_EXPLANATION_START -->(.*?)<!-- MINI_EXPLANATION_END -->'
+        ]
+        
+        for pattern in marker_patterns:
+            mini_pattern = re.compile(pattern, re.DOTALL)
+            match = mini_pattern.search(content)
+            
+            if match:
+                logger.info(f"Found mini explanation using pattern: {pattern}")
+                return match.group(1).strip()
+        
+        logger.warning(f"No mini explanation markers found in {template_path}")
+        return None
+    except Exception as e:
+        logger.error(f"Error extracting mini explanation: {e}")
+        return None
+
+def get_mini_explanation(plugin_key):
+    """
+    Gets the mini explanation for a plugin, either from its template file
+    or returns a default explanation based on the plugin info.
+    """
+    # Get the template path
+    template_path = get_template_path(plugin_key)
+    
+    # Try to extract from template file
+    mini_content = extract_mini_explanation(template_path)
+    
+    if mini_content:
+        return mini_content
+        
+    # If no template or no mini section, generate default mini explanation
+    plugin = PLUGINS.get(plugin_key, {})
+    plugin_name = plugin.get('name', plugin_key.replace('_', ' ').title())
+    
+    return f"""
+    <h5 class="fw-bold">{plugin_name}</h5>
+    <p>This simulation demonstrates key quantum computing concepts including superposition, entanglement, and measurement.</p>
+    <div class="alert alert-primary">
+        <strong>Key Quantum Concept:</strong> Quantum simulations provide insight into quantum behavior without requiring actual quantum hardware.
+    </div>
+    """
+
+def get_educational_content(plugin_key):
+    """
+    Gets the educational content for a plugin's modal.
+    """
+    template_path = get_template_path(plugin_key)
+    print(f"Template path: {template_path}")
+    return extract_educational_content(template_path)
+
+# --- Route handlers ---
+@app.route("/")
+def index():
+    # Serve React index.html
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route('/sitemap.xml')
+def sitemap():
+    """Generate the sitemap.xml file dynamically."""
+    # Get base URL from request or use production URL
+    if app.config.get('ENV') == 'production':
+        base_url = "https://quantumfieldkit.com"
+    else:
+        base_url = request.url_root.rstrip('/')
+    
+    # Current date for lastmod
+    import datetime
+    today = datetime.date.today().isoformat()
+    
+    # Build the sitemap XML string
+    xml = ['<?xml version="1.0" encoding="UTF-8"?>',
+           '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+           '  <url>',
+           f'    <loc>{base_url}/</loc>',
+           f'    <lastmod>{today}</lastmod>',
+           '    <changefreq>weekly</changefreq>',
+           '    <priority>1.0</priority>',
+           '  </url>']
+    
+     # Add glossary page
+    xml.append('  <url>')
+    xml.append(f'    <loc>{base_url}/glossary</loc>')
+    xml.append(f'    <lastmod>{today}</lastmod>')
+    xml.append('    <changefreq>monthly</changefreq>')
+    xml.append('    <priority>0.8</priority>')
+    xml.append('  </url>')
+    
+    
+    # Add all plugin pages with categorization
+    for plugin_key, plugin in PLUGINS.items():
+        # Group plugins by category for better SEO
+        category = plugin.get("category", "other")
+        xml.append('  <url>')
+        xml.append(f'    <loc>{base_url}/plugin/{plugin_key}</loc>')
+        xml.append(f'    <lastmod>{today}</lastmod>')
+        xml.append('    <changefreq>monthly</changefreq>')
+        xml.append('    <priority>0.8</priority>')
+        xml.append('  </url>')
+    
+    # Add category pages if you implement them
+    categories = set(plugin.get("category", "other") for plugin in PLUGINS.values())
+    for category in categories:
+        xml.append('  <url>')
+        xml.append(f'    <loc>{base_url}/category/{category}</loc>')
+        xml.append(f'    <lastmod>{today}</lastmod>')
+        xml.append('    <changefreq>monthly</changefreq>')
+        xml.append('    <priority>0.7</priority>')
+        xml.append('  </url>')
+    
+    xml.append('</urlset>')
+    
+    return app.response_class(
+        response='\n'.join(xml),
+        status=200,
+        mimetype='application/xml'
+    )
+
+@app.route("/sitemap")
+def html_sitemap():
+    # Serve SPA index for HTML sitemap requests
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route('/robots.txt')
+def robots():
+    """Serve robots.txt dynamically."""
+    if app.config.get('ENV') == 'production':
+        base_url = "https://quantumfieldkit.com"
+    else:
+        base_url = request.url_root.rstrip('/')
+    
+    robots_txt = f"""User-agent: *
+Allow: /
+
+Sitemap: {base_url}/sitemap.xml
+"""
+    return app.response_class(
+        response=robots_txt,
+        status=200,
+        mimetype='text/plain'
+    )
+
+@app.route("/category/<category>")
+def category_view(category):
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route("/glossary")
+def glossary():
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.after_request
+def add_cache_headers(response):
+    """Add cache headers to responses to improve performance."""
+    import datetime
+    # Don't cache dynamic content
+    if request.path.startswith('/static/'):
+        # Cache static files for 1 week
+        expiry = datetime.datetime.now() + datetime.timedelta(days=7)
+        response.headers['Cache-Control'] = 'public, max-age=604800'
+        response.headers['Expires'] = expiry.strftime("%a, %d %b %Y %H:%M:%S GMT")
+    else:
+        # Don't cache dynamic content
+        response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, max-age=0'
+    
+    return response
+
+@app.route("/plugin/<plugin_key>", methods=["GET", "POST"])
+def plugin_view(plugin_key):
+    if request.method == 'POST':
+        # Support legacy AJAX POSTs from static JS (if any)
+        if plugin_key not in PLUGINS:
+            return jsonify({"error": "Plugin not found"}), 404
+        plugin = PLUGINS[plugin_key]
+        try:
+            raw_params = {}
+            for param in plugin.get('parameters', []):
+                param_name = param['name']
+                if param_name in request.form:
+                    raw_params[param_name] = request.form.get(param_name)
+            params = validate_parameters(plugin, raw_params)
+            if 'run' not in plugin:
+                return jsonify({"error": "Plugin runner not defined"}), 500
+            result = plugin['run'](params)
+            return jsonify(result)
+        except Exception as e:
+            return jsonify({"error": str(e)}), 400
+    # GET falls back to React
+    return send_from_directory(app.static_folder, 'index.html')
+
+@app.route("/api/plugins", methods=["GET"])
+def api_plugins():
+    """Return a list of available plugins."""
+    categories = {}
+    for key, plugin in PLUGINS.items():
+        category = plugin.get("category", "other")
+        if category not in categories:
+            categories[category] = []
+        # Only include serializable data
+        serializable_plugin = {
+            "key": key,
+            "name": plugin.get("name"),
+            "description": plugin.get("description"),
+            "icon": plugin.get("icon"),
+            "category": plugin.get("category"),
+            "parameters": plugin.get("parameters", [])
+        }
+        categories[category].append(serializable_plugin)
+    return jsonify(categories)
+
+@app.route("/api/plugin/<plugin_key>", methods=["GET"])
+def api_plugin(plugin_key):
+    """Return details for a specific plugin."""
+    if plugin_key not in PLUGINS:
+        return jsonify({"error": "Plugin not found"}), 404
+    
+    plugin = PLUGINS[plugin_key]
+    # Only include serializable data
+    serializable_plugin = {
+        "key": plugin_key,
+        "name": plugin.get("name"),
+        "description": plugin.get("description"),
+        "icon": plugin.get("icon"),
+        "category": plugin.get("category"),
+        "parameters": plugin.get("parameters", [])
+    }
+    return jsonify(serializable_plugin)
+
+@app.route("/api/run/<plugin_key>", methods=["POST"])
+def api_run_plugin(plugin_key):
+    """Run a plugin simulation."""
+    if plugin_key not in PLUGINS:
+        return jsonify({"error": "Plugin not found"}), 404
+    try:
+        params = request.get_json()
+        plugin = PLUGINS[plugin_key]
+        if 'run' in plugin and callable(plugin['run']):
+            # Use standardized runner which already wraps results
+            result = plugin['run'](params or {})
+        elif 'function' in plugin and callable(plugin['function']):
+            # Fallback for legacy plugins
+            result = run_plugin(plugin['function'], _plugin_key=plugin_key, **(params or {}))
+        else:
+            return jsonify({"error": "Plugin is misconfigured"}), 500
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 400
+
+@app.route("/api/glossary", methods=["GET"])
+def api_glossary():
+    """Return glossary terms."""
+    # Prefer glossary shipped with the built SPA, then public, then repo static fallback
+    candidates = [
+        os.path.join(os.path.dirname(__file__), 'frontend', 'build', 'data', 'glossary_terms.json'),
+        os.path.join(os.path.dirname(__file__), 'frontend', 'public', 'data', 'glossary_terms.json'),
+        os.path.join(os.path.dirname(__file__), 'static', 'data', 'glossary_terms.json'),
+    ]
+    terms_file = next((p for p in candidates if os.path.exists(p)), None)
+    try:
+        with open(terms_file, 'r') as f:
+            terms = json.load(f)
+        return jsonify(terms)
+    except (FileNotFoundError, json.JSONDecodeError) as e:
+        app.logger.error(f"Error loading glossary terms: {e}")
+        return jsonify([{"term": "Qubit", "definition": "The fundamental unit of quantum information."},
+                       {"term": "Superposition", "definition": "A quantum property allowing particles to exist in multiple states."}])
+
+@app.route("/api/category/<category>", methods=["GET"])
+def api_category(category):
+    """Return plugins in a specific category."""
+    plugins_in_category = {k: v for k, v in PLUGINS.items() if v.get("category", "other") == category}
+    if not plugins_in_category:
+        return jsonify({"error": "Category not found"}), 404
+    return jsonify(plugins_in_category)
+
+@app.route("/api/educational/<plugin_key>", methods=["GET"])
+def api_educational(plugin_key):
+    """Return educational content for a specific plugin."""
+    if plugin_key not in PLUGINS:
+        return jsonify({"error": "Plugin not found"}), 404
+    
+    try:
+        # Get the template path for the plugin
+        template_path = get_template_path(plugin_key)
+        
+        # Extract educational content
+        content = extract_educational_content(template_path)
+        
+        if content:
+            return jsonify({"content": content})
+        else:
+            return jsonify({"error": "Educational content not found"}), 404
+            
+    except Exception as e:
+        logger.error(f"Error loading educational content: {e}")
+        return jsonify({"error": "Failed to load educational content"}), 500
+
+@app.route("/api/validate/<plugin_key>", methods=["POST", "OPTIONS"])
+def api_validate(plugin_key):
+    """Validate parameters for a specific plugin."""
+    if request.method == "OPTIONS":
+        return jsonify({"status": "ok"}), 200
+        
+    if plugin_key not in PLUGINS:
+        return jsonify({"error": "Plugin not found"}), 404
+        
+    try:
+        params = request.get_json()
+        plugin = PLUGINS[plugin_key]
+        validated_params = validate_parameters(plugin, params)
+        return jsonify({"status": "valid", "params": validated_params})
+    except ParameterError as e:
+        return jsonify({
+            "status": "invalid",
+            "error": e.message,
+            "param_info": e.param_info,
+            "suggestion": e.suggestion
+        }), 400
+    except Exception as e:
+        return jsonify({"status": "error", "error": str(e)}), 500
+
+@app.route("/circuit")
+def circuit_designer():
+    # SPA route
+    return send_from_directory(app.static_folder, 'index.html')
+
+# API routes for Circuit Designer
+
+@app.route("/api/circuit/gates", methods=["GET"])
+def api_circuit_gates():
+    """Get available quantum gates for the circuit designer"""
+    try:
+        # Basic set of gates organized by categories
+        gates = {
+            "single_qubit": [
+                {"id": "x", "name": "X", "description": "Pauli-X gate (NOT gate)", "symbol": "X"},
+                {"id": "y", "name": "Y", "description": "Pauli-Y gate", "symbol": "Y"},
+                {"id": "z", "name": "Z", "description": "Pauli-Z gate", "symbol": "Z"},
+                {"id": "h", "name": "H", "description": "Hadamard gate", "symbol": "H"},
+                {"id": "s", "name": "S", "description": "Phase gate (S)", "symbol": "S"},
+                {"id": "t", "name": "T", "description": "π/8 gate (T)", "symbol": "T"},
+                {"id": "rx", "name": "RX", "description": "Rotation around X-axis", "symbol": "RX", "params": [{"name": "theta", "default": "π/2"}]},
+                {"id": "ry", "name": "RY", "description": "Rotation around Y-axis", "symbol": "RY", "params": [{"name": "theta", "default": "π/2"}]},
+                {"id": "rz", "name": "RZ", "description": "Rotation around Z-axis", "symbol": "RZ", "params": [{"name": "theta", "default": "π/2"}]}
+            ],
+            "multi_qubit": [
+                {"id": "cnot", "name": "CNOT", "description": "Controlled-NOT gate", "symbol": "CNOT", "qubits": 2},
+                {"id": "cz", "name": "CZ", "description": "Controlled-Z gate", "symbol": "CZ", "qubits": 2},
+                {"id": "swap", "name": "SWAP", "description": "SWAP gate", "symbol": "SWAP", "qubits": 2},
+                {"id": "ccx", "name": "Toffoli", "description": "Toffoli gate (CCX)", "symbol": "CCX", "qubits": 3},
+                {"id": "cswap", "name": "Fredkin", "description": "Fredkin gate (CSWAP)", "symbol": "CSWAP", "qubits": 3}
+            ],
+            "special": [
+                {"id": "measure", "name": "Measure", "description": "Measurement operation", "symbol": "M"},
+                {"id": "reset", "name": "Reset", "description": "Reset qubit to |0⟩", "symbol": "R"}
+            ]
+        }
+        return jsonify(gates)
+    except Exception as e:
+        logger.error(f"Error getting available gates: {str(e)}")
+        return jsonify({"error": "Failed to get available gates"}), 500
+
+@app.route("/api/circuit/simulate", methods=["POST"])
+def api_circuit_simulate():
+    """Simulate a quantum circuit"""
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({"error": "No circuit data provided"}), 400
+            
+        circuit = data.get("circuit")
+        shots = data.get("shots", 1024)
+        
+        if not circuit:
+            return jsonify({"error": "No circuit definition provided"}), 400
+            
+        # Ensure shots is an integer and within reasonable limits
+        try:
+            shots = int(shots)
+            if shots < 1 or shots > 10000:
+                return jsonify({"error": "Shots must be between 1 and 10000"}), 400
+        except ValueError:
+            return jsonify({"error": "Shots must be an integer"}), 400
+        
+        # This is where we'd build and simulate the circuit using Cirq
+        # For now, we'll use mock data
+        
+        import numpy as np
+        import cirq
+        
+        # Convert JSON circuit representation to a Cirq circuit
+        cirq_circuit = cirq.Circuit()
+        qubits = [cirq.LineQubit(i) for i in range(circuit.get("num_qubits", 3))]
+        
+        # Add gates to circuit based on the circuit data
+        # This would need to be implemented based on your circuit JSON schema
+        
+        # For now, return mock simulation results
+        result = {
+            "state_vector": {
+                "amplitudes": [
+                    {"state": "000", "amplitude": 1.0, "probability": 1.0}
+                    # Additional states would be added here in a real implementation
+                ],
+                "visualization_data": {}  # Visualization data would go here
+            },
+            "measurements": {
+                "counts": {"000": shots},
+                "probabilities": {"000": 1.0}
+            },
+            "circuit_representation": {
+                "qubits": circuit.get("num_qubits", 3),
+                "depth": len(circuit.get("gates", [])),
+                "gates": circuit.get("gates", [])
+            }
+        }
+        
+        return jsonify(result)
+    except Exception as e:
+        logger.error(f"Error simulating circuit: {str(e)}\n{traceback.format_exc()}")
+        return jsonify({"error": f"Failed to simulate circuit: {str(e)}"}), 500
+
+@app.route("/api/circuit/save", methods=["POST"])
+def api_circuit_save():
+    """Save a quantum circuit"""
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({"error": "No circuit data provided"}), 400
+            
+        # Here you would save the circuit to a database or file
+        # For this example, we'll pretend to save it and return a mock ID
+        
+        circuit_id = datetime.now().strftime("%Y%m%d%H%M%S")
+        
+        return jsonify({
+            "id": circuit_id,
+            "name": data.get("name", "Unnamed Circuit"),
+            "saved": True,
+            "timestamp": datetime.now().isoformat()
+        })
+    except Exception as e:
+        logger.error(f"Error saving circuit: {str(e)}")
+        return jsonify({"error": f"Failed to save circuit: {str(e)}"}), 500
+
+@app.route("/api/circuit/load/<circuit_id>", methods=["GET"])
+def api_circuit_load(circuit_id):
+    """Load a saved quantum circuit"""
+    try:
+        # Here you would load the circuit from a database or file
+        # For this example, we'll return a mock circuit
+        
+        mock_circuit = {
+            "id": circuit_id,
+            "name": f"Circuit {circuit_id}",
+            "num_qubits": 3,
+            "gates": [
+                {"type": "h", "targets": [0]},
+                {"type": "cnot", "controls": [0], "targets": [1]},
+                {"type": "measure", "targets": [0, 1]}
+            ],
+            "created_at": datetime.now().isoformat()
+        }
+        
+        return jsonify(mock_circuit)
+    except Exception as e:
+        logger.error(f"Error loading circuit {circuit_id}: {str(e)}")
+        return jsonify({"error": f"Failed to load circuit: {str(e)}"}), 500
+
+@app.route("/api/circuit/saved", methods=["GET"])
+def api_circuit_saved():
+    """Get list of saved circuits"""
+    try:
+        # Here you would query a database for saved circuits
+        # For this example, we'll return mock data
+        
+        mock_saved_circuits = [
+            {"id": "20230512120000", "name": "Bell State", "num_qubits": 2, "created_at": "2023-05-12T12:00:00"},
+            {"id": "20230513130000", "name": "GHZ State", "num_qubits": 3, "created_at": "2023-05-13T13:00:00"},
+            {"id": "20230514140000", "name": "Quantum Teleportation", "num_qubits": 3, "created_at": "2023-05-14T14:00:00"}
+        ]
+        
+        return jsonify(mock_saved_circuits)
+    except Exception as e:
+        logger.error(f"Error getting saved circuits: {str(e)}")
+        return jsonify({"error": f"Failed to get saved circuits: {str(e)}"}), 500
+
+@app.route("/api/circuit/export", methods=["POST"])
+def api_circuit_export():
+    """Export circuit to code (Cirq, Qiskit, etc.)"""
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({"error": "No circuit data provided"}), 400
+            
+        circuit = data.get("circuit")
+        format = data.get("format", "cirq").lower()
+        
+        if not circuit:
+            return jsonify({"error": "No circuit definition provided"}), 400
+            
+        if format not in ["cirq", "qiskit"]:
+            return jsonify({"error": f"Unsupported export format: {format}"}), 400
+            
+        # Generate code based on the circuit definition
+        num_qubits = circuit.get("num_qubits", 3)
+        
+        if format == "cirq":
+            code = f"""
+import cirq
+import numpy as np
+
+# Create a circuit with {num_qubits} qubits
+circuit = cirq.Circuit()
+
+# Define qubits
+qubits = [cirq.LineQubit(i) for i in range({num_qubits})]
+
+# Add gates
+"""
+            # Here you would iterate through the gates and add them to the code
+            
+            code += """
+# Simulate
+simulator = cirq.Simulator()
+result = simulator.simulate(circuit)
+
+print("Final state vector:")
+print(result.final_state_vector)
+"""
+        elif format == "qiskit":
+            code = f"""
+from qiskit import QuantumCircuit, Aer, execute
+import numpy as np
+
+# Create a circuit with {num_qubits} qubits and {num_qubits} classical bits
+qc = QuantumCircuit({num_qubits}, {num_qubits})
+
+# Add gates
+"""
+            # Here you would iterate through the gates and add them to the code
+            
+            code += """
+# Simulate
+simulator = Aer.get_backend('statevector_simulator')
+result = execute(qc, simulator).result()
+statevector = result.get_statevector()
+
+print("Final state vector:")
+print(statevector)
+"""
+        
+        return jsonify({
+            "code": code,
+            "format": format
+        })
+    except Exception as e:
+        logger.error(f"Error exporting circuit: {str(e)}")
+        return jsonify({"error": f"Failed to export circuit: {str(e)}"}), 500
+
+# --- Socket.IO event handlers for real-time updates ---
+@socketio.on('connect')
+def handle_connect():
+    """Handle client connection."""
+    logger.info(f"Client connected: {request.sid}")
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    """Handle client disconnection."""
+    logger.info(f"Client disconnected: {request.sid}")
+
+@socketio.on('run_plugin')
+def handle_run_plugin(data):
+    """Run a plugin and emit progress updates."""
+    plugin_key = data.get('plugin_key')
+    raw_params = data.get('params', {})
+    
+    if plugin_key not in PLUGINS:
+        emit('plugin_error', {'error': f"Plugin '{plugin_key}' not found"})
+        return
+    
+    plugin = PLUGINS[plugin_key]
+    
+    try:
+        # Validate parameters
+        params = validate_parameters(plugin, raw_params)
+        
+        # Add plugin key for better error reporting
+        params['_plugin_key'] = plugin_key
+        
+        # Set up progress tracking
+        session_id = request.sid
+        
+        def progress_callback(step, total, message):
+            progress = int(100 * step / total) if total > 0 else 0
+            emit('plugin_progress', {
+                'plugin_key': plugin_key,
+                'progress': progress,
+                'message': message
+            })
+        
+        # Add progress callback to parameters if supported
+        params['progress_callback'] = progress_callback
+        
+        # Run the plugin and emit the result
+        emit('plugin_start', {'plugin_key': plugin_key})
+        result = plugin["run"](params)
+        emit('plugin_result', {'plugin_key': plugin_key, 'result': result})
+        
+    except SimulationError as e:
+        # Handle validation errors
+        error_msg = str(e)
+        if hasattr(e, 'suggestion') and e.suggestion:
+            error_msg += f"\n\nSuggestion: {e.suggestion}"
+            
+        emit('plugin_error', {'plugin_key': plugin_key, 'error': error_msg})
+    except Exception as e:
+        emit('plugin_error', {'plugin_key': plugin_key, 'error': str(e)})
+
+# --- Error handling ---
+@app.errorhandler(404)
+def page_not_found(e):
+    # SPA fallback
+    try:
+        return send_from_directory(app.static_folder, 'index.html')
+    except Exception:
+        return jsonify({"error": "Not found"}), 404
+
+@app.errorhandler(500)
+def server_error(e):
+    return jsonify({"error": "Server error"}), 500
+
+# --- Main entry point ---
+if __name__ == "__main__":
+    # SSL Configuration for production
+    if os.environ.get('FLASK_ENV') == 'production' and os.path.exists('cert.pem') and os.path.exists('key.pem'):
+        socketio.run(app, debug=False, host='0.0.0.0', port=int(os.environ.get('PORT', 5000)),
+                     certfile='cert.pem', keyfile='key.pem')
+    else:
+        # Development environment
+        socketio.run(app, debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 5000)))

docker-compose.yml

@@ -0,0 +1,46 @@
+version: '3.8'
+
+services:
+  quantum-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "5000:8080"
+    environment:
+      - FLASK_ENV=development
+      - PORT=8080
+      - HOST=0.0.0.0
+    volumes:
+      - ./logs:/app/logs
+      - ./plugins:/app/plugins
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080/api/plugins"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # Optional: Add Redis for caching
+  # redis:
+  #   image: redis:7-alpine
+  #   ports:
+  #     - "6379:6379"
+  #   restart: unless-stopped
+
+  # Optional: Add PostgreSQL for persistence
+  # postgres:
+  #   image: postgres:15-alpine
+  #   environment:
+  #     POSTGRES_DB: quantumfieldkit
+  #     POSTGRES_USER: quantum
+  #     POSTGRES_PASSWORD: quantum_password
+  #   ports:
+  #     - "5432:5432"
+  #   volumes:
+  #     - postgres_data:/var/lib/postgresql/data
+  #   restart: unless-stopped
+
+# volumes:
+#   postgres_data:

fly.toml

@@ -0,0 +1,44 @@
+app = "quantumfieldkit"
+primary_region = "arn"
+kill_signal = "SIGINT"
+kill_timeout = "10s"
+
+[build]
+  dockerfile = "Dockerfile"
+
+[env]
+  PORT = "8080"
+  FLASK_ENV = "production"
+  PYTHONPATH = "/app"
+
+[http_service]
+  internal_port = 8080
+  force_https = true
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 1
+  max_machines_running = 2
+  processes = ["app"]
+
+  [http_service.concurrency]
+    type = "connections"
+    hard_limit = 1000
+    soft_limit = 500
+
+  # Health check configuration
+  [[http_service.checks]]
+    grace_period = "10s"
+    interval = "30s"
+    method = "GET"
+    path = "/api/plugins"
+    timeout = "5s"
+    headers = {}
+
+[[vm]]
+  cpu_kind = "shared"
+  cpus = 1
+  memory_mb = 1024
+
+# Optional: Add secrets for sensitive configuration
+# [secrets]
+#   SECRET_KEY = "your-secret-key"

frontend/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "quantum-field-kit-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fontsource/inter": "^5.2.6",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "bootstrap": "^5.3.5",
+    "daisyui": "^5.0.54",
+    "framer-motion": "^12.23.12",
+    "lucide-react": "^0.542.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.9",
+    "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
+    "react-intersection-observer": "^9.16.0",
+    "react-router-dom": "^6.14.2",
+    "react-scripts": "5.0.1",
+    "socket.io-client": "^4.7.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "proxy": "http://localhost:5000",
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.14"
+  }
+}

frontend/postcss.config.js

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

frontend/public/data/glossary_terms.json

@@ -0,0 +1,218 @@
+[
+  {
+    "term": "Qubit",
+    "definition": "The fundamental unit of quantum information, analogous to a classical bit but with the ability to exist in a superposition of states. Unlike classical bits that are either 0 or 1, qubits can be in a probabilistic combination of both states simultaneously.",
+    "category": "Fundamentals",
+    "tags": ["basic", "information", "state"]
+  },
+  {
+    "term": "Superposition",
+    "definition": "A quantum mechanical principle where a quantum system can exist in multiple states simultaneously until measured. This allows quantum computers to process multiple possibilities in parallel, providing exponential computational advantages for certain problems.",
+    "category": "Fundamentals",
+    "tags": ["basic", "state", "parallel"]
+  },
+  {
+    "term": "Entanglement",
+    "definition": "A quantum mechanical phenomenon where particles become correlated to predictably interact with each other regardless of distance. When qubits are entangled, measuring one instantly affects the state of its partner, enabling quantum communication and computation protocols.",
+    "category": "Fundamentals",
+    "tags": ["correlation", "communication", "non-locality"]
+  },
+  {
+    "term": "Quantum Gate",
+    "definition": "A basic quantum circuit operating on a small number of qubits, analogous to classical logic gates. Common gates include Pauli-X (bit flip), Pauli-Z (phase flip), Hadamard (superposition creator), and CNOT (controlled operations).",
+    "category": "Gates & Circuits",
+    "tags": ["circuit", "operation", "unitary"]
+  },
+  {
+    "term": "Measurement",
+    "definition": "The process of observing a quantum system, which causes it to collapse from a superposition of states into a definite state. This is probabilistic and irreversible, fundamentally changing the quantum system being observed.",
+    "category": "Fundamentals",
+    "tags": ["observation", "collapse", "probabilistic"]
+  },
+  {
+    "term": "Quantum Circuit",
+    "definition": "A sequence of quantum gates applied to a set of qubits to perform a quantum computation. Circuits are read from left to right and represent the time evolution of the quantum system through unitary operations.",
+    "category": "Gates & Circuits",
+    "tags": ["computation", "sequence", "unitary"]
+  },
+  {
+    "term": "Quantum Algorithm",
+    "definition": "An algorithm that runs on a quantum computer, taking advantage of quantum mechanical phenomena like superposition and entanglement. Famous examples include Shor's algorithm for factoring and Grover's algorithm for search.",
+    "category": "Algorithms",
+    "tags": ["computation", "advantage", "protocol"]
+  },
+  {
+    "term": "Quantum Error Correction",
+    "definition": "Techniques used to protect quantum information from errors due to decoherence and other quantum noise. These methods use redundancy and syndrome detection to identify and correct errors without directly measuring the quantum state.",
+    "category": "Error Correction",
+    "tags": ["protection", "noise", "redundancy"]
+  },
+  {
+    "term": "Decoherence",
+    "definition": "The loss of quantum coherence due to interaction with the environment, leading to the collapse of quantum states. This is the primary challenge in building practical quantum computers and limits the time available for quantum computations.",
+    "category": "Noise & Errors",
+    "tags": ["environment", "noise", "decay"]
+  },
+  {
+    "term": "Quantum Teleportation",
+    "definition": "A process by which quantum information can be transmitted from one location to another, using a classical communication channel and quantum entanglement. The original quantum state is destroyed in the process, making it true teleportation rather than copying.",
+    "category": "Communication",
+    "tags": ["transmission", "entanglement", "protocol"]
+  },
+  {
+    "term": "Hadamard Gate",
+    "definition": "A fundamental quantum gate that creates superposition by rotating a qubit from the computational basis to the diagonal basis. It maps |0> to (|0> + |1>)/sqrt(2) and |1> to (|0> - |1>)/sqrt(2).",
+    "category": "Gates & Circuits",
+    "tags": ["superposition", "rotation", "basis"]
+  },
+  {
+    "term": "CNOT Gate",
+    "definition": "A two-qubit controlled gate that flips the target qubit if and only if the control qubit is in state |1>. It's essential for creating entanglement and implementing quantum algorithms.",
+    "category": "Gates & Circuits",
+    "tags": ["controlled", "entanglement", "two-qubit"]
+  },
+  {
+    "term": "Bloch Sphere",
+    "definition": "A geometric representation of qubit states as points on a unit sphere. The north and south poles represent |0> and |1> states, while points on the equator represent equal superposition states with different phases.",
+    "category": "Visualization",
+    "tags": ["geometry", "representation", "visualization"]
+  },
+  {
+    "term": "Quantum Fourier Transform",
+    "definition": "The quantum analog of the discrete Fourier transform, efficiently implementable on quantum computers. It's a key component of Shor's algorithm and other quantum algorithms for period finding.",
+    "category": "Algorithms",
+    "tags": ["fourier", "period-finding", "efficient"]
+  },
+  {
+    "term": "Grover's Algorithm",
+    "definition": "A quantum search algorithm that finds a marked item in an unsorted database with quadratic speedup over classical algorithms. It requires O(sqrt(N)) operations compared to O(N) classically.",
+    "category": "Algorithms",
+    "tags": ["search", "speedup", "amplitude"]
+  },
+  {
+    "term": "Shor's Algorithm",
+    "definition": "A quantum algorithm for efficiently factoring large integers, which threatens current RSA cryptography. It combines period finding using the quantum Fourier transform with classical post-processing.",
+    "category": "Algorithms",
+    "tags": ["factoring", "cryptography", "period-finding"]
+  },
+  {
+    "term": "Variational Quantum Eigensolver",
+    "definition": "A hybrid quantum-classical algorithm for finding ground states of quantum systems. It uses a parameterized quantum circuit optimized by classical methods, making it suitable for near-term quantum devices.",
+    "category": "Algorithms",
+    "tags": ["hybrid", "optimization", "ground-state"]
+  },
+  {
+    "term": "Quantum Approximate Optimization Algorithm",
+    "definition": "A variational quantum algorithm designed to solve combinatorial optimization problems. QAOA alternates between problem-specific and mixing Hamiltonians to explore the solution space.",
+    "category": "Algorithms",
+    "tags": ["optimization", "variational", "combinatorial"]
+  },
+  {
+    "term": "Bell State",
+    "definition": "One of four maximally entangled two-qubit states that form the Bell basis. These states exhibit perfect correlation and are fundamental to quantum communication protocols like quantum teleportation.",
+    "category": "Fundamentals",
+    "tags": ["entanglement", "correlation", "basis"]
+  },
+  {
+    "term": "Quantum Supremacy",
+    "definition": "The point at which a quantum computer can perform a calculation that is practically impossible for classical computers. Also called quantum advantage, it represents a computational milestone rather than practical utility.",
+    "category": "Milestones",
+    "tags": ["advantage", "milestone", "computational"]
+  },
+  {
+    "term": "NISQ",
+    "definition": "Noisy Intermediate-Scale Quantum devices - current quantum computers with 50-1000 qubits that have significant noise but may still provide quantum advantages for specific problems.",
+    "category": "Hardware",
+    "tags": ["current", "noisy", "intermediate"]
+  },
+  {
+    "term": "Quantum Volume",
+    "definition": "A metric that measures the capability of a quantum computer, considering both the number of qubits and the quality of operations. It provides a more comprehensive assessment than qubit count alone.",
+    "category": "Metrics",
+    "tags": ["capability", "quality", "assessment"]
+  },
+  {
+    "term": "Adiabatic Quantum Computing",
+    "definition": "A model of quantum computation based on the adiabatic theorem, where the system evolves slowly from an easy initial Hamiltonian to a problem-encoding final Hamiltonian.",
+    "category": "Models",
+    "tags": ["adiabatic", "evolution", "hamiltonian"]
+  },
+  {
+    "term": "Quantum Annealing",
+    "definition": "A metaheuristic for finding the global minimum of a given objective function using quantum fluctuations. It's implemented in systems like D-Wave quantum computers for optimization problems.",
+    "category": "Models",
+    "tags": ["optimization", "annealing", "metaheuristic"]
+  },
+  {
+    "term": "Topological Quantum Computing",
+    "definition": "A theoretical approach to quantum computing using anyons and topological properties to create naturally error-resistant qubits. Microsoft's approach with Majorana fermions is an example.",
+    "category": "Models",
+    "tags": ["topological", "anyons", "error-resistant"]
+  },
+  {
+    "term": "Quantum Key Distribution",
+    "definition": "A secure communication method that uses quantum mechanics to detect eavesdropping. The BB84 protocol is the most famous implementation, providing information-theoretic security.",
+    "category": "Communication",
+    "tags": ["security", "cryptography", "eavesdropping"]
+  },
+  {
+    "term": "No-Cloning Theorem",
+    "definition": "A fundamental principle stating that arbitrary quantum states cannot be perfectly copied. This theorem is crucial for quantum cryptography security and explains why quantum teleportation destroys the original state.",
+    "category": "Principles",
+    "tags": ["fundamental", "copying", "security"]
+  },
+  {
+    "term": "Quantum Phase Estimation",
+    "definition": "An algorithm for estimating the eigenvalues (phases) of a unitary operator. It's a subroutine in many quantum algorithms including Shor's algorithm and is essential for quantum simulation.",
+    "category": "Algorithms",
+    "tags": ["eigenvalue", "estimation", "subroutine"]
+  },
+  {
+    "term": "Quantum Error Syndrome",
+    "definition": "Information extracted from a quantum error correction code that indicates what type of error occurred without revealing the actual quantum state. Syndromes enable error correction without measurement.",
+    "category": "Error Correction",
+    "tags": ["syndrome", "detection", "correction"]
+  },
+  {
+    "term": "Surface Code",
+    "definition": "A topological quantum error correction code that arranges qubits on a 2D lattice. It has a high threshold for error correction and is considered one of the most promising codes for fault-tolerant quantum computing.",
+    "category": "Error Correction",
+    "tags": ["topological", "threshold", "fault-tolerant"]
+  },
+  {
+    "term": "Quantum Coherence Time",
+    "definition": "The time scale over which a quantum system maintains its quantum properties before decoherence destroys the quantum information. Longer coherence times allow for more complex quantum computations.",
+    "category": "Noise & Errors",
+    "tags": ["time", "coherence", "decoherence"]
+  },
+  {
+    "term": "Fidelity",
+    "definition": "A measure of how close two quantum states are to each other, ranging from 0 (orthogonal states) to 1 (identical states). High fidelity operations are crucial for reliable quantum computing.",
+    "category": "Metrics",
+    "tags": ["similarity", "quality", "measure"]
+  },
+  {
+    "term": "Quantum Simulator",
+    "definition": "A controllable quantum system used to study another quantum system that is difficult to investigate directly. Both analog and digital quantum simulators are used to understand complex quantum phenomena.",
+    "category": "Applications",
+    "tags": ["simulation", "modeling", "investigation"]
+  },
+  {
+    "term": "Variational Quantum Algorithm",
+    "definition": "A class of hybrid quantum-classical algorithms that use parameterized quantum circuits optimized by classical computers. These algorithms are designed for near-term quantum devices with limited coherence.",
+    "category": "Algorithms",
+    "tags": ["hybrid", "parameterized", "near-term"]
+  },
+  {
+    "term": "Quantum Machine Learning",
+    "definition": "The integration of quantum computing with machine learning, potentially offering advantages in training speed, feature mapping, or handling quantum data. Still largely theoretical with ongoing research.",
+    "category": "Applications",
+    "tags": ["machine-learning", "integration", "research"]
+  },
+  {
+    "term": "Quantum Sensing",
+    "definition": "The use of quantum systems to measure physical quantities with enhanced precision beyond classical limits. Applications include atomic clocks, magnetometry, and gravitational wave detection.",
+    "category": "Applications",
+    "tags": ["sensing", "precision", "measurement"]
+  }
+] 

frontend/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="GXS QuantumNexus - A high-fidelity quantum computing simulation platform" />
+    <title>GXS QuantumNexus</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <meta name="color-scheme" content="light dark" />
+    <script>
+      (function() {
+        try {
+          var stored = localStorage.getItem('theme');
+          var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          var theme = stored || (prefersDark ? 'dark' : 'quantumlight');
+          var html = document.documentElement;
+          var head = document.querySelector('head');
+          html.setAttribute('data-theme', theme);
+          if (head) head.setAttribute('data-theme', theme);
+          if (theme === 'dark') html.classList.add('dark');
+          else html.classList.remove('dark');
+        } catch (e) { /* no-op */ }
+      })();
+    </script>
+    
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-SZH9MSH6K5"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-SZH9MSH6K5');
+    </script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html> 

frontend/src/App.js

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import Home from './pages/Home';
+import Plugin from './pages/Plugin';
+import EnhancedPlugin from './pages/EnhancedPlugin';
+import Glossary from './pages/Glossary';
+import Category from './pages/Category';
+import CircuitDesigner from './pages/CircuitDesigner';
+import Error from './pages/Error';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
+import FloatingActionButton from './components/FloatingActionButton';
+import ErrorBoundary from './components/ErrorBoundary';
+import analytics from './services/analytics';
+
+function App() {
+  const location = useLocation();
+
+  // Initialize Google Analytics
+  useEffect(() => {
+    analytics.initialize();
+  }, []);
+
+  // Track page views on route changes
+  useEffect(() => {
+    const getPageTitle = (pathname) => {
+      const routes = {
+        '/': 'Home - GXS QuantumNexus',
+        '/glossary': 'Glossary - GXS QuantumNexus',
+        '/circuit-designer': 'Circuit Designer - GXS QuantumNexus'
+      };
+
+      // Handle dynamic routes
+      if (pathname.startsWith('/plugin/')) {
+        const pluginKey = pathname.split('/')[2];
+        return `${pluginKey} Plugin - GXS QuantumNexus`;
+      }
+      
+      if (pathname.startsWith('/legacy-plugin/')) {
+        const pluginKey = pathname.split('/')[2];
+        return `${pluginKey} Legacy Plugin - GXS QuantumNexus`;
+      }
+      
+      if (pathname.startsWith('/category/')) {
+        const category = pathname.split('/')[2];
+        return `${category} Category - GXS QuantumNexus`;
+      }
+
+      return routes[pathname] || 'GXS QuantumNexus';
+    };
+
+    const title = getPageTitle(location.pathname);
+    analytics.trackPageView(location.pathname, title);
+  }, [location]);
+
+  return (
+    <ErrorBoundary>
+      <div className="App app-shell min-h-screen bg-base-100 text-base-content">
+        <Navbar />
+        <main>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/plugin/:pluginKey" element={<EnhancedPlugin />} />
+            <Route path="/legacy-plugin/:pluginKey" element={<Plugin />} />
+            <Route path="/glossary" element={<Glossary />} />
+            <Route path="/category/:category" element={<Category />} />
+            <Route path="/circuit-designer" element={<CircuitDesigner />} />
+            <Route path="*" element={<Error />} />
+          </Routes>
+        </main>
+        <Footer />
+        <FloatingActionButton />
+      </div>
+    </ErrorBoundary>
+  );
+}
+
+export default App; 

frontend/src/components/AccessibilityProvider.js

@@ -0,0 +1,122 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const AccessibilityContext = createContext();
+
+export const useAccessibility = () => {
+  const context = useContext(AccessibilityContext);
+  if (!context) {
+    throw new Error('useAccessibility must be used within AccessibilityProvider');
+  }
+  return context;
+};
+
+const AccessibilityProvider = ({ children }) => {
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const [highContrast, setHighContrast] = useState(false);
+  const [fontSize, setFontSize] = useState('medium');
+  const [announcements, setAnnouncements] = useState([]);
+
+  // Detect user preferences
+  useEffect(() => {
+    // Check for reduced motion preference
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReducedMotion(mediaQuery.matches);
+    
+    const handleChange = (e) => setReducedMotion(e.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  useEffect(() => {
+    // Check for high contrast preference
+    const mediaQuery = window.matchMedia('(prefers-contrast: high)');
+    setHighContrast(mediaQuery.matches);
+    
+    const handleChange = (e) => setHighContrast(e.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // Announce to screen readers
+  const announce = (message, priority = 'polite') => {
+    const id = Date.now();
+    const announcement = { id, message, priority };
+    
+    setAnnouncements(prev => [...prev, announcement]);
+    
+    // Remove announcement after it's been read
+    setTimeout(() => {
+      setAnnouncements(prev => prev.filter(a => a.id !== id));
+    }, 1000);
+  };
+
+  // Skip to main content
+  const skipToMain = () => {
+    const main = document.querySelector('main');
+    if (main) {
+      main.focus();
+      main.scrollIntoView();
+    }
+  };
+
+  // Focus management
+  const focusElement = (selector) => {
+    const element = document.querySelector(selector);
+    if (element) {
+      element.focus();
+      return true;
+    }
+    return false;
+  };
+
+  const value = {
+    reducedMotion,
+    highContrast,
+    fontSize,
+    setFontSize,
+    announce,
+    skipToMain,
+    focusElement,
+    announcements,
+  };
+
+  return (
+    <AccessibilityContext.Provider value={value}>
+      {children}
+      
+      {/* Screen reader announcements */}
+      <div className="sr-only" aria-live="polite" aria-atomic="true">
+        {announcements
+          .filter(a => a.priority === 'polite')
+          .map(a => (
+            <div key={a.id}>{a.message}</div>
+          ))}
+      </div>
+      
+      <div className="sr-only" aria-live="assertive" aria-atomic="true">
+        {announcements
+          .filter(a => a.priority === 'assertive')
+          .map(a => (
+            <div key={a.id}>{a.message}</div>
+          ))}
+      </div>
+      
+      {/* Skip to main content link */}
+      <button
+        onClick={skipToMain}
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary-500 text-white px-4 py-2 rounded-lg z-50 focus:z-[9999]"
+      >
+        Skip to main content
+      </button>
+    </AccessibilityContext.Provider>
+  );
+};
+
+AccessibilityProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default AccessibilityProvider;

frontend/src/components/ErrorBoundary.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
+import Button from '../design-system/components/Button';
+import Card from '../design-system/components/Card';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      hasError: false, 
+      error: null, 
+      errorInfo: null,
+      retryCount: 0 
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error,
+      errorInfo,
+    });
+
+    // Log error to monitoring service in production
+    if (process.env.NODE_ENV === 'production') {
+      console.error('Error caught by boundary:', error, errorInfo);
+      // Here you would typically send to error monitoring service
+      // e.g., Sentry.captureException(error, { extra: errorInfo });
+    }
+  }
+
+  handleRetry = () => {
+    this.setState(prevState => ({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      retryCount: prevState.retryCount + 1
+    }));
+  };
+
+  handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-gradient-to-br from-neutral-50 to-neutral-100 flex items-center justify-center p-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="w-full max-w-md"
+          >
+            <Card variant="elevated" padding="lg" className="text-center">
+              <motion.div
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ delay: 0.2, type: "spring" }}
+                className="w-16 h-16 bg-error-100 rounded-full flex items-center justify-center mx-auto mb-4"
+              >
+                <AlertTriangle size={32} className="text-error-500" />
+              </motion.div>
+
+              <Card.Title className="text-xl mb-2">
+                Oops! Something went wrong
+              </Card.Title>
+
+              <Card.Description className="mb-6">
+                We encountered an unexpected error. This has been logged and our team will investigate.
+              </Card.Description>
+
+              {process.env.NODE_ENV === 'development' && this.state.error && (
+                <details className="text-left mb-6 p-4 bg-neutral-50 rounded-lg">
+                  <summary className="cursor-pointer text-sm font-medium text-neutral-700 mb-2">
+                    Error Details (Development)
+                  </summary>
+                  <pre className="text-xs text-error-600 overflow-auto">
+                    {this.state.error.toString()}
+                    {this.state.errorInfo.componentStack}
+                  </pre>
+                </details>
+              )}
+
+              <div className="flex gap-3">
+                <Button
+                  variant="outline"
+                  onClick={this.handleRetry}
+                  icon={<RefreshCw size={16} />}
+                  className="flex-1"
+                >
+                  Try Again
+                </Button>
+                <Button
+                  onClick={this.handleGoHome}
+                  icon={<Home size={16} />}
+                  className="flex-1"
+                >
+                  Go Home
+                </Button>
+              </div>
+
+              {this.state.retryCount > 2 && (
+                <motion.p
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="text-sm text-neutral-600 mt-4"
+                >
+                  Still having issues? Try refreshing the page or contact support.
+                </motion.p>
+              )}
+            </Card>
+          </motion.div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/components/FloatingActionButton.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Search, Zap, BookOpen, Facebook, Settings } from 'lucide-react';
+
+const FloatingActionButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const actions = [
+    //{ icon: Search, label: 'Search', action: () => console.log('Search') },
+    //{ icon: Zap, label: 'Quick Run', action: () => console.log('Quick Run') },
+    { icon: BookOpen, label: 'Docs', action: () => window.open('/glossary', '_blank') },
+    { icon: Facebook, label: 'Facebook', action: () => window.open('https://Facebook.com/ChuyenDoiXanh', '_blank') },
+    //{ icon: Settings, label: 'Settings', action: () => console.log('Settings') },
+  ];
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            className="absolute bottom-16 right-0 space-y-3"
+          >
+            {actions.map((action, index) => (
+              <motion.button
+                key={action.label}
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ 
+                  opacity: 1, 
+                  x: 0,
+                  transition: { delay: index * 0.1 }
+                }}
+                exit={{ 
+                  opacity: 0, 
+                  x: 20,
+                  transition: { delay: (actions.length - index) * 0.05 }
+                }}
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={action.action}
+                className="flex items-center gap-3 bg-white/90 backdrop-blur-md rounded-full px-4 py-3 shadow-lg border border-white/20 hover:bg-white/95 transition-all group"
+              >
+                <action.icon size={20} className="text-primary group-hover:text-primary-focus" />
+                <span className="text-sm font-medium text-gray-700 whitespace-nowrap">
+                  {action.label}
+                </span>
+              </motion.button>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <motion.button
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-14 h-14 bg-gradient-to-r from-primary to-secondary rounded-full shadow-lg flex items-center justify-center text-white hover:shadow-xl transition-all"
+      >
+        <motion.div
+          animate={{ rotate: isOpen ? 45 : 0 }}
+          transition={{ type: "spring", stiffness: 200, damping: 10 }}
+        >
+          <Zap size={24} />
+        </motion.div>
+      </motion.button>
+    </div>
+  );
+};
+
+export default FloatingActionButton;

frontend/src/components/Footer.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Footer() {
+  return (
+    <footer className="border-t border-base-200 mt-12">
+      <div className="container mx-auto px-4 py-10">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div>
+            <h5 className="font-semibold mb-2">GXS QuantumNexus</h5>
+            <p className="text-base-content/60">
+              A high-fidelity quantum computing simulation platform for exploring quantum protocols,
+              algorithms, and concepts.
+            </p>
+          </div>
+          <div>
+            <h5 className="font-semibold mb-2">Quick Links</h5>
+            <ul className="space-y-2 text-base-content/70">
+              <li>
+                <Link to="/" className="hover:text-primary transition-colors">
+                  <i className="fas fa-home mr-2"></i>Home
+                </Link>
+              </li>
+              <li>
+                <Link to="/glossary" className="hover:text-primary transition-colors">
+                  <i className="fas fa-book mr-2"></i>Glossary
+                </Link>
+              </li>
+              <li>
+                <a href="https://www.facebook.com/ChuyenDoiXanh" className="hover:text-primary transition-colors" target="_blank" rel="noopener noreferrer">
+                  <i className="fab fa-Facebook mr-2"></i>Facebook
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <ul className="space-y-2 text-base-content/70">
+              <li>
+                <a href="mailto:contact@p4cng.biz.vn" className="hover:text-primary transition-colors">
+                  <i className="fas fa-envelope mr-2"></i>Email
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="mt-8 flex flex-col md:flex-row items-center justify-between text-sm text-base-content/60">
+          <p>&copy; {new Date().getFullYear()} GXS Innovation Hub</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

frontend/src/components/Navbar.js

@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sun, Moon, Menu, X } from 'lucide-react';
+
+function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [theme, setTheme] = useState(() => {
+    // Check for saved theme in localStorage or default to quantumlight
+    return localStorage.getItem('theme') || 'quantumlight';
+  });
+  const location = useLocation();
+
+  useEffect(() => {
+    const html = document.documentElement;
+    const head = document.querySelector('head');
+    
+    // Set data-theme on both html and head for compatibility
+    html.setAttribute('data-theme', theme);
+    head.setAttribute('data-theme', theme);
+    
+    // Handle Tailwind dark mode
+    if (theme === 'quantumdark') {
+      html.classList.add('dark');
+    } else {
+      html.classList.remove('dark');
+    }
+    
+    // Save theme to localStorage
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleNavbar = () => setIsOpen(!isOpen);
+
+  return (
+    <motion.nav
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ type: "spring", stiffness: 100, damping: 20 }}
+      className="fixed top-0 w-full z-50 bg-base-100/80 backdrop-blur-md border-b border-base-200/50"
+    >
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <Link className="flex items-center gap-2 text-xl font-bold" to="/">
+              <motion.i
+                animate={{ rotate: 360 }}
+                transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
+                className="fas fa-atom text-primary"
+              />
+              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                GXS QuantumNexus
+              </span>
+            </Link>
+          </motion.div>
+
+          {/* Desktop Menu */}
+          <div className="hidden lg:flex items-center space-x-1">
+            {[
+              { path: '/', label: 'Home', icon: 'fas fa-home' },
+              //{ path: '/circuit-designer', label: 'Circuit Designer', icon: 'fas fa-project-diagram' },
+              { path: '/glossary', label: 'Glossary', icon: 'fas fa-book' },
+            ].map((item) => (
+              <motion.div key={item.path} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+                <Link
+                  to={item.path}
+                  className={`px-4 py-2 rounded-lg transition-all flex items-center gap-2 ${
+                    location.pathname === item.path
+                      ? 'bg-primary text-primary-content'
+                      : 'hover:bg-base-200'
+                  }`}
+                >
+                  <i className={`${item.icon} text-sm`}></i>
+                  {item.label}
+                </Link>
+              </motion.div>
+            ))}
+            
+            <motion.a
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              href="https://www.facebook.com/ChuyenDoiXanh"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-4 py-2 rounded-lg hover:bg-base-200 transition-all flex items-center gap-2"
+            >
+              <i className="fab fa-Facebook text-sm"></i>
+              Facebook
+            </motion.a>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* Theme Toggle */}
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+              onClick={() => setTheme(theme === 'quantumlight' ? 'quantumdark' : 'quantumlight')}
+              className="p-2 rounded-lg hover:bg-base-200 transition-all"
+            >
+              <AnimatePresence mode="wait">
+                {theme === 'quantumlight' ? (
+                  <motion.div
+                    key="sun"
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <Sun size={20} />
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="moon"
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <Moon size={20} />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.button>
+
+            {/* Mobile Menu Toggle */}
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+              onClick={toggleNavbar}
+              className="lg:hidden p-2 rounded-lg hover:bg-base-200 transition-all"
+            >
+              <AnimatePresence mode="wait">
+                {isOpen ? (
+                  <motion.div
+                    key="close"
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <X size={20} />
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="menu"
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <Menu size={20} />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.3 }}
+              className="lg:hidden border-t border-base-200/50 mt-2 pt-4 pb-4"
+            >
+              <div className="space-y-2">
+                {[
+                  { path: '/', label: 'Home', icon: 'fas fa-home' },
+                  //{ path: '/circuit-designer', label: 'Circuit Designer', icon: 'fas fa-project-diagram' },
+                  { path: '/glossary', label: 'Glossary', icon: 'fas fa-book' },
+                ].map((item, index) => (
+                  <motion.div
+                    key={item.path}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                  >
+                    <Link
+                      to={item.path}
+                      onClick={() => setIsOpen(false)}
+                      className={`block px-4 py-3 rounded-lg transition-all flex items-center gap-3 ${
+                        location.pathname === item.path
+                          ? 'bg-primary text-primary-content'
+                          : 'hover:bg-base-200'
+                      }`}
+                    >
+                      <i className={item.icon}></i>
+                      {item.label}
+                    </Link>
+                  </motion.div>
+                ))}
+                
+                <motion.a
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.3 }}
+                  href="https://Facebook.com/ChuyenDoiXanh"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setIsOpen(false)}
+                  className="block px-4 py-3 rounded-lg hover:bg-base-200 transition-all flex items-center gap-3"
+                >
+                  <i className="fab fa-Facebook"></i>
+                  Facebook
+                </motion.a>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.nav>
+  );
+}
+
+export default Navbar; 

frontend/src/components/QuantumParticles.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react';
+
+const QuantumParticles = () => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const particles = [];
+    const particleCount = 50;
+
+    // Set canvas size
+    const resizeCanvas = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+
+    // Particle class
+    class Particle {
+      constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.vx = (Math.random() - 0.5) * 0.5;
+        this.vy = (Math.random() - 0.5) * 0.5;
+        this.radius = Math.random() * 2 + 1;
+        this.opacity = Math.random() * 0.5 + 0.2;
+        this.hue = Math.random() * 60 + 200; // Blue to purple range
+      }
+
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+
+        // Wrap around edges
+        if (this.x < 0) this.x = canvas.width;
+        if (this.x > canvas.width) this.x = 0;
+        if (this.y < 0) this.y = canvas.height;
+        if (this.y > canvas.height) this.y = 0;
+
+        // Quantum-like behavior - occasional teleportation
+        if (Math.random() < 0.001) {
+          this.x = Math.random() * canvas.width;
+          this.y = Math.random() * canvas.height;
+        }
+      }
+
+      draw() {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `hsla(${this.hue}, 70%, 60%, ${this.opacity})`;
+        ctx.fill();
+
+        // Add glow effect
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = `hsla(${this.hue}, 70%, 60%, 0.8)`;
+        ctx.fill();
+        ctx.shadowBlur = 0;
+      }
+    }
+
+    // Initialize particles
+    for (let i = 0; i < particleCount; i++) {
+      particles.push(new Particle());
+    }
+
+    // Animation loop
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      particles.forEach(particle => {
+        particle.update();
+        particle.draw();
+      });
+
+      // Draw connections between nearby particles
+      particles.forEach((particle, i) => {
+        particles.slice(i + 1).forEach(otherParticle => {
+          const dx = particle.x - otherParticle.x;
+          const dy = particle.y - otherParticle.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance < 100) {
+            ctx.beginPath();
+            ctx.moveTo(particle.x, particle.y);
+            ctx.lineTo(otherParticle.x, otherParticle.y);
+            ctx.strokeStyle = `hsla(220, 70%, 60%, ${0.1 * (1 - distance / 100)})`;
+            ctx.lineWidth = 0.5;
+            ctx.stroke();
+          }
+        });
+      });
+
+      requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      window.removeEventListener('resize', resizeCanvas);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 pointer-events-none"
+      style={{ zIndex: 1 }}
+    />
+  );
+};
+
+export default QuantumParticles;

frontend/src/components/SkeletonLoader.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const SkeletonCard = () => (
+  <div className="card bg-base-100 border border-base-200 shadow-sm">
+    <div className="card-body">
+      <div className="flex items-center mb-3">
+        <motion.div
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 1.5, repeat: Infinity }}
+          className="w-10 h-10 rounded-full bg-base-300 mr-3"
+        />
+        <motion.div
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 1.5, repeat: Infinity, delay: 0.2 }}
+          className="h-6 bg-base-300 rounded w-32"
+        />
+      </div>
+      <motion.div
+        animate={{ opacity: [0.5, 1, 0.5] }}
+        transition={{ duration: 1.5, repeat: Infinity, delay: 0.4 }}
+        className="space-y-2 mb-4"
+      >
+        <div className="h-4 bg-base-300 rounded w-full" />
+        <div className="h-4 bg-base-300 rounded w-3/4" />
+      </motion.div>
+      <motion.div
+        animate={{ opacity: [0.5, 1, 0.5] }}
+        transition={{ duration: 1.5, repeat: Infinity, delay: 0.6 }}
+        className="h-10 bg-base-300 rounded w-32"
+      />
+    </div>
+  </div>
+);
+
+const SkeletonGrid = ({ count = 6 }) => (
+  <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+    {Array.from({ length: count }, (_, i) => (
+      <SkeletonCard key={i} />
+    ))}
+  </div>
+);
+
+const SkeletonLoader = ({ type = 'grid', count }) => {
+  if (type === 'grid') {
+    return <SkeletonGrid count={count} />;
+  }
+
+  return <SkeletonCard />;
+};
+
+export default SkeletonLoader;

frontend/src/components/plugin/EnhancedPluginParameterForm.js

@@ -0,0 +1,297 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { RotateCcw, Settings, HelpCircle, Zap } from 'lucide-react';
+import PropTypes from 'prop-types';
+import Button from '../../design-system/components/Button';
+import Input from '../../design-system/components/Input';
+import Card from '../../design-system/components/Card';
+
+const EnhancedPluginParameterForm = ({ 
+  parameters, 
+  initialValues, 
+  onSubmit, 
+  loading,
+  onParameterChange,
+  showAdvanced = false 
+}) => {
+  const [values, setValues] = useState(initialValues || {});
+  const [errors, setErrors] = useState({});
+  const [showAdvancedParams, setShowAdvancedParams] = useState(showAdvanced);
+  const [focusedParam, setFocusedParam] = useState(null);
+
+  // Categorize parameters
+  const { basicParams, advancedParams } = useMemo(() => {
+    const basic = parameters.filter(p => !p.advanced);
+    const advanced = parameters.filter(p => p.advanced);
+    return { basicParams: basic, advancedParams: advanced };
+  }, [parameters]);
+
+  const validateParameter = useCallback((param, value) => {
+    const errors = [];
+    
+    if (param.required && (value === undefined || value === null || value === '')) {
+      errors.push('This field is required');
+    }
+    
+    if (param.type === 'int' || param.type === 'float') {
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        errors.push('Must be a valid number');
+      } else {
+        if (param.min !== undefined && numValue < param.min) {
+          errors.push(`Must be at least ${param.min}`);
+        }
+        if (param.max !== undefined && numValue > param.max) {
+          errors.push(`Must be at most ${param.max}`);
+        }
+      }
+    }
+    
+    if (param.type === 'string' && param.max_length && value.length > param.max_length) {
+      errors.push(`Must be at most ${param.max_length} characters`);
+    }
+    
+    return errors;
+  }, []);
+
+  const handleChange = useCallback((paramName, value) => {
+    setValues(prev => {
+      const newValues = { ...prev, [paramName]: value };
+      
+      // Validate the parameter
+      const param = parameters.find(p => p.name === paramName);
+      if (param) {
+        const paramErrors = validateParameter(param, value);
+        setErrors(prev => ({
+          ...prev,
+          [paramName]: paramErrors.length > 0 ? paramErrors[0] : undefined
+        }));
+      }
+      
+      onParameterChange?.(newValues);
+      return newValues;
+    });
+  }, [parameters, validateParameter, onParameterChange]);
+
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault();
+    
+    // Validate all parameters
+    const newErrors = {};
+    let hasErrors = false;
+    
+    parameters.forEach(param => {
+      const paramErrors = validateParameter(param, values[param.name]);
+      if (paramErrors.length > 0) {
+        newErrors[param.name] = paramErrors[0];
+        hasErrors = true;
+      }
+    });
+    
+    setErrors(newErrors);
+    
+    if (!hasErrors) {
+      onSubmit(values);
+    }
+  }, [parameters, values, validateParameter, onSubmit]);
+
+  const handleReset = useCallback(() => {
+    setValues(initialValues || {});
+    setErrors({});
+  }, [initialValues]);
+
+  const renderParameterInput = (param) => {
+    const value = values[param.name] ?? param.default ?? '';
+    const error = errors[param.name];
+    const isFocused = focusedParam === param.name;
+
+    const inputProps = {
+      value,
+      onChange: (e) => handleChange(param.name, e.target.value),
+      onFocus: () => setFocusedParam(param.name),
+      onBlur: () => setFocusedParam(null),
+      error,
+      required: param.required,
+      disabled: loading,
+    };
+
+    switch (param.type) {
+      case 'int':
+      case 'float':
+        return (
+          <Input
+            {...inputProps}
+            type="number"
+            label={param.description || param.name}
+            helperText={`${param.type}${param.min !== undefined ? `, min: ${param.min}` : ''}${param.max !== undefined ? `, max: ${param.max}` : ''}`}
+            min={param.min}
+            max={param.max}
+            step={param.type === 'float' ? 'any' : '1'}
+          />
+        );
+      
+      case 'bool':
+        return (
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-neutral-700">
+              {param.description || param.name}
+              {param.required && <span className="text-error-500 ml-1">*</span>}
+            </label>
+            <motion.button
+              type="button"
+              onClick={() => handleChange(param.name, !value)}
+              disabled={loading}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              className={`
+                relative inline-flex h-6 w-11 items-center rounded-full transition-colors
+                ${value ? 'bg-primary-500' : 'bg-neutral-200'}
+                ${loading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              `}
+            >
+              <motion.span
+                layout
+                className="inline-block h-4 w-4 transform rounded-full bg-base-100 dark:bg-neutral-200 shadow-sm transition-transform"
+                animate={{ x: value ? 24 : 4 }}
+                transition={{ type: "spring", stiffness: 500, damping: 30 }}
+              />
+            </motion.button>
+          </div>
+        );
+      
+      case 'select':
+        return (
+          <div className="space-y-2">
+            <label className="block text-sm font-medium text-neutral-700">
+              {param.description || param.name}
+              {param.required && <span className="text-error-500 ml-1">*</span>}
+            </label>
+            <select
+              value={value}
+              onChange={(e) => handleChange(param.name, e.target.value)}
+              disabled={loading}
+              className="w-full rounded-lg border border-neutral-300 px-4 py-2.5 text-base transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 disabled:bg-neutral-50 disabled:text-neutral-500"
+            >
+              {param.options?.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+      
+      default:
+        return (
+          <Input
+            {...inputProps}
+            type="text"
+            label={param.description || param.name}
+            helperText={param.max_length ? `Max ${param.max_length} characters` : undefined}
+            maxLength={param.max_length}
+          />
+        );
+    }
+  };
+
+  return (
+    <Card variant="elevated" padding="lg">
+      <Card.Header>
+        <div className="flex items-center justify-between">
+          <Card.Title className="flex items-center gap-2">
+            <Settings size={20} className="text-primary-500" />
+            Parameters
+          </Card.Title>
+          {advancedParams.length > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowAdvancedParams(!showAdvancedParams)}
+            >
+              Advanced {showAdvancedParams ? '−' : '+'}
+            </Button>
+          )}
+        </div>
+      </Card.Header>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Basic Parameters */}
+        <div className="space-y-4">
+          {basicParams.map((param) => (
+            <motion.div
+              key={param.name}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              {renderParameterInput(param)}
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Advanced Parameters */}
+        <AnimatePresence>
+          {showAdvancedParams && advancedParams.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.3 }}
+              className="space-y-4 pt-4 border-t border-neutral-200 dark:border-neutral-700"
+            >
+              <div className="flex items-center gap-2 text-sm text-neutral-600">
+                <HelpCircle size={16} />
+                Advanced Parameters
+              </div>
+              {advancedParams.map((param) => (
+                <motion.div
+                  key={param.name}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  {renderParameterInput(param)}
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-3 pt-4">
+          <Button
+            type="submit"
+            variant="primary"
+            loading={loading}
+            icon={<Zap size={16} />}
+            className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white border-0 shadow-lg min-h-[48px] sm:min-h-[44px]"
+          >
+            {loading ? 'Running Simulation...' : 'Run Simulation'}
+          </Button>
+          
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleReset}
+            disabled={loading}
+            icon={<RotateCcw size={16} />}
+            className="border-2 border-neutral-400 hover:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-base-200 dark:hover:bg-neutral-700 min-h-[48px] sm:min-h-[44px] sm:flex-shrink-0"
+          >
+            Reset
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+};
+
+EnhancedPluginParameterForm.propTypes = {
+  parameters: PropTypes.array.isRequired,
+  initialValues: PropTypes.object,
+  onSubmit: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+  onParameterChange: PropTypes.func,
+  showAdvanced: PropTypes.bool,
+};
+
+export default EnhancedPluginParameterForm;

frontend/src/components/plugin/EnhancedPluginResultsPanel.js

@@ -0,0 +1,333 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { 
+  Activity, 
+  BarChart3, 
+  FileText, 
+  Download, 
+  Share2, 
+  Maximize2,
+  Copy,
+  CheckCircle2
+} from 'lucide-react';
+import PropTypes from 'prop-types';
+import Button from '../../design-system/components/Button';
+import Card from '../../design-system/components/Card';
+import SimpleTabs from './SimpleTabs';
+import QuantumVisualization from './QuantumVisualization';
+
+const EnhancedPluginResultsPanel = ({ result, loading, onExport, onShare }) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyData = useCallback(async () => {
+    if (!result || !result.output) return;
+    
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(result.output, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy data:', err);
+    }
+  }, [result]);
+
+  const tabs = useMemo(() => {
+    if (!result) {
+      return [
+        {
+          id: 'visualization',
+          label: 'Visualization',
+          icon: <Activity size={16} />,
+          available: true,
+          content: <QuantumVisualization result={null} />
+        }
+      ];
+    }
+
+    return [
+      {
+        id: 'visualization',
+        label: 'Visualization',
+        icon: <Activity size={16} />,
+        available: true,
+        content: <QuantumVisualization result={result} />
+      },
+      {
+        id: 'data',
+        label: 'Raw Data',
+        icon: <BarChart3 size={16} />,
+        available: !!(result && result.output),
+        content: (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="space-y-4"
+          >
+            <div className="flex items-center justify-between">
+              <h4 className="text-sm font-medium text-neutral-700">Raw Output Data</h4>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCopyData}
+                icon={copied ? <CheckCircle2 size={14} /> : <Copy size={14} />}
+              >
+                {copied ? 'Copied!' : 'Copy JSON'}
+              </Button>
+            </div>
+            
+            <div className="bg-neutral-50 rounded-lg p-4 max-h-96 overflow-auto">
+              <pre className="text-sm text-neutral-800 whitespace-pre-wrap">
+                {result && result.output ? JSON.stringify(result.output, null, 2) : 'No data available'}
+              </pre>
+            </div>
+          </motion.div>
+        )
+      },
+      {
+        id: 'log',
+        label: 'Process Log',
+        icon: <FileText size={16} />,
+        available: !!(result && result.log),
+        content: (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="space-y-4"
+          >
+            <h4 className="text-sm font-medium text-neutral-700">Process Log</h4>
+            
+            <div className="bg-neutral-900 rounded-lg p-4 max-h-96 overflow-auto">
+              <pre className="text-sm text-green-400 font-mono whitespace-pre-wrap">
+                {(result && result.log) ? result.log : 'No log data available.'}
+              </pre>
+            </div>
+          </motion.div>
+        )
+      },
+    ].filter(tab => tab.available);
+  }, [result, copied, handleCopyData]);
+
+  const handleExport = () => {
+    if (!result?.output) return;
+    
+    const dataStr = JSON.stringify(result.output, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `quantum-simulation-${Date.now()}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    
+    onExport?.(result);
+  };
+
+  if (loading) {
+    return (
+      <Card variant="elevated" padding="lg">
+        <div className="flex flex-col items-center justify-center py-12">
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+            className="mb-4"
+          >
+            <Activity size={48} className="text-primary-500" />
+          </motion.div>
+          <motion.h3
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="text-lg font-semibold text-neutral-900 mb-2"
+          >
+            Processing Quantum Simulation
+          </motion.h3>
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="text-neutral-600 text-center max-w-md"
+          >
+            Your quantum computation is being executed. This may take a few moments depending on the complexity.
+          </motion.p>
+          
+          {/* Animated progress indicators */}
+          <div className="flex gap-2 mt-6">
+            {[0, 1, 2].map((i) => (
+              <motion.div
+                key={i}
+                animate={{ 
+                  scale: [1, 1.2, 1],
+                  opacity: [0.3, 1, 0.3]
+                }}
+                transition={{ 
+                  duration: 1.5, 
+                  repeat: Infinity,
+                  delay: i * 0.2
+                }}
+                className="w-2 h-2 bg-primary-500 rounded-full"
+              />
+            ))}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  if (!result) {
+    return (
+      <Card variant="outlined" padding="lg">
+        <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
+          <Activity size={48} className="mb-4 opacity-50" />
+          <h3 className="text-lg font-semibold mb-2">Ready for Simulation</h3>
+          <p className="text-center max-w-md">
+            Configure your parameters and run a simulation to see quantum results and visualizations.
+          </p>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className={isFullscreen ? 'fixed inset-4 z-50 bg-base-100 dark:bg-base-200 rounded-xl shadow-2xl' : ''}
+    >
+      <Card variant="elevated" padding="none" className="h-full">
+        <div className="p-4 sm:p-6 border-b border-neutral-200 dark:border-neutral-700 bg-base-100 dark:bg-base-200">
+          {/* Main Header */}
+          <div className="flex items-center justify-between mb-3 sm:mb-0">
+            <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center flex-shrink-0">
+                <Activity size={16} className="sm:w-5 sm:h-5 text-white" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <h3 className="text-base sm:text-lg font-semibold text-neutral-900 truncate">
+                  Simulation Results
+                </h3>
+                <p className="text-xs sm:text-sm text-neutral-600 hidden sm:block">
+                  Quantum computation completed successfully
+                </p>
+              </div>
+            </div>
+            
+            {/* Mobile: Only show fullscreen button */}
+            <div className="sm:hidden flex-shrink-0">
+              <button
+                onClick={() => setIsFullscreen(!isFullscreen)}
+                className="p-2 rounded-lg bg-base-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-200 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center"
+                title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+              >
+                <Maximize2 size={16} />
+              </button>
+            </div>
+            
+            {/* Desktop: Show all buttons */}
+            <div className="hidden sm:flex items-center gap-2 flex-shrink-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCopyData}
+                icon={copied ? <CheckCircle2 size={16} /> : <Copy size={16} />}
+                disabled={!result?.output}
+              >
+                {copied ? 'Copied!' : 'Copy'}
+              </Button>
+              
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleExport}
+                icon={<Download size={16} />}
+                disabled={!result?.output}
+              >
+                Export
+              </Button>
+              
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onShare?.(result)}
+                icon={<Share2 size={16} />}
+                disabled={!result?.output}
+              >
+                Share
+              </Button>
+              
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setIsFullscreen(!isFullscreen)}
+                icon={<Maximize2 size={16} />}
+              >
+                {isFullscreen ? 'Exit' : 'Fullscreen'}
+              </Button>
+            </div>
+          </div>
+          
+          {/* Mobile Action Buttons Row */}
+          <div className="flex gap-2 sm:hidden overflow-x-auto pb-1">
+            <button
+              onClick={handleCopyData}
+              disabled={!result?.output}
+              className={`
+                flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all min-h-[44px]
+                ${copied 
+                  ? 'bg-green-100 text-green-700' 
+                  : 'bg-base-200 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 disabled:opacity-50'
+                }
+              `}
+            >
+              {copied ? <CheckCircle2 size={14} /> : <Copy size={14} />}
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+            
+            <button
+              onClick={handleExport}
+              disabled={!result?.output}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 disabled:opacity-50 whitespace-nowrap min-h-[44px]"
+            >
+              <Download size={14} />
+              Export
+            </button>
+            
+            <button
+              onClick={() => onShare?.(result)}
+              disabled={!result?.output}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium bg-purple-100 text-purple-700 hover:bg-purple-200 disabled:opacity-50 whitespace-nowrap min-h-[44px]"
+            >
+              <Share2 size={14} />
+              Share
+            </button>
+          </div>
+        </div>
+
+        <div className="p-4 sm:p-6">
+          <SimpleTabs tabs={tabs} defaultTab="visualization" />
+        </div>
+      </Card>
+      
+      {isFullscreen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 bg-black/50 z-40"
+          onClick={() => setIsFullscreen(false)}
+        />
+      )}
+    </motion.div>
+  );
+};
+
+EnhancedPluginResultsPanel.propTypes = {
+  result: PropTypes.object,
+  loading: PropTypes.bool,
+  onExport: PropTypes.func,
+  onShare: PropTypes.func,
+};
+
+export default EnhancedPluginResultsPanel;

frontend/src/components/plugin/FullscreenCircuitViewer.js

@@ -0,0 +1,205 @@
+import React, { useState, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ZoomIn, ZoomOut, RotateCcw, Maximize2 } from 'lucide-react';
+import PropTypes from 'prop-types';
+
+const FullscreenCircuitViewer = ({ circuitSvg, isOpen, onClose }) => {
+  const [zoom, setZoom] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [scrollPos, setScrollPos] = useState({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+
+  const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.3, 5));
+  const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.3, 0.3));
+  const handleResetZoom = () => setZoom(1);
+
+  // Keyboard support
+  React.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (!isOpen) return;
+      
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case '+':
+        case '=':
+          e.preventDefault();
+          handleZoomIn();
+          break;
+        case '-':
+          e.preventDefault();
+          handleZoomOut();
+          break;
+        case '0':
+          e.preventDefault();
+          handleResetZoom();
+          break;
+        default:
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  const handleMouseDown = (e) => {
+    if (e.target.closest('.zoom-controls')) return;
+    setIsDragging(true);
+    setDragStart({ x: e.clientX, y: e.clientY });
+    if (containerRef.current) {
+      setScrollPos({
+        x: containerRef.current.scrollLeft,
+        y: containerRef.current.scrollTop
+      });
+    }
+  };
+
+  const handleMouseMove = (e) => {
+    if (!isDragging || !containerRef.current) return;
+    
+    const deltaX = e.clientX - dragStart.x;
+    const deltaY = e.clientY - dragStart.y;
+    
+    containerRef.current.scrollLeft = scrollPos.x - deltaX;
+    containerRef.current.scrollTop = scrollPos.y - deltaY;
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  if (!isOpen || !circuitSvg) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 bg-black/90 backdrop-blur-sm flex items-center justify-center"
+        onClick={onClose}
+      >
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.9 }}
+          onClick={(e) => e.stopPropagation()}
+          className="w-full h-full max-w-7xl max-h-[90vh] bg-white dark:bg-neutral-900 rounded-lg shadow-2xl overflow-hidden m-4"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800">
+            <div>
+              <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+                Quantum Circuit Diagram
+              </h3>
+              <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                Full-screen view with advanced zoom and pan controls
+              </p>
+            </div>
+            
+            {/* Controls */}
+            <div className="flex items-center gap-2">
+              <div className="zoom-controls flex items-center gap-1 bg-white dark:bg-neutral-800 rounded-lg p-1 border border-neutral-200 dark:border-neutral-600">
+                <button
+                  onClick={handleZoomOut}
+                  className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors"
+                  title="Zoom Out"
+                >
+                  <ZoomOut size={16} />
+                </button>
+                
+                <span className="text-sm text-neutral-600 dark:text-neutral-400 min-w-[4rem] text-center px-2">
+                  {Math.round(zoom * 100)}%
+                </span>
+                
+                <button
+                  onClick={handleZoomIn}
+                  className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors"
+                  title="Zoom In"
+                >
+                  <ZoomIn size={16} />
+                </button>
+                
+                <button
+                  onClick={handleResetZoom}
+                  className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors"
+                  title="Reset Zoom"
+                >
+                  <RotateCcw size={16} />
+                </button>
+              </div>
+              
+              <button
+                onClick={onClose}
+                className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors"
+                title="Close Fullscreen"
+              >
+                <X size={20} />
+              </button>
+            </div>
+          </div>
+
+          {/* Circuit Container */}
+          <div 
+            ref={containerRef}
+            className="flex-1 overflow-auto bg-neutral-50 dark:bg-neutral-900 cursor-grab active:cursor-grabbing"
+            style={{ 
+              height: 'calc(100% - 80px)',
+              scrollbarWidth: 'thin',
+              scrollbarColor: '#cbd5e1 #f1f5f9'
+            }}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+          >
+            <div className="flex items-center justify-center min-h-full p-8">
+              <div
+                dangerouslySetInnerHTML={{ __html: circuitSvg }}
+                className="transition-transform duration-200 bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-lg"
+                style={{ 
+                  transform: `scale(${zoom})`,
+                  transformOrigin: 'center center'
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Footer with instructions */}
+          <div className="p-3 bg-neutral-50 dark:bg-neutral-800 border-t border-neutral-200 dark:border-neutral-700">
+            <div className="flex items-center justify-center gap-6 text-xs text-neutral-500 dark:text-neutral-400">
+              <span className="flex items-center gap-1">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M9 11H1m22 0h-8M9 11l3-3m-3 3l3 3"/>
+                </svg>
+                Drag to pan around the circuit
+              </span>
+              <span className="flex items-center gap-1">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="M21 21l-4.35-4.35"/>
+                </svg>
+                Use zoom controls or mouse wheel
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="px-1 py-0.5 bg-neutral-200 dark:bg-neutral-700 rounded text-xs">Esc</kbd>
+                Close fullscreen
+              </span>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+FullscreenCircuitViewer.propTypes = {
+  circuitSvg: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default FullscreenCircuitViewer;

frontend/src/components/plugin/PluginExplanation.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, Alert } from 'react-bootstrap';
+
+const PluginExplanation = ({ educationalContent, miniExplanation, onLearnMore }) => (
+  <div className="plugin-explanation">
+    {miniExplanation && (
+      <Alert variant="info" className="mb-3">
+        <div dangerouslySetInnerHTML={{ __html: miniExplanation }} />
+        {onLearnMore && (
+          <div className="text-end mt-2">
+            <button className="btn btn-link btn-sm" onClick={onLearnMore}>
+              Learn More
+            </button>
+          </div>
+        )}
+      </Alert>
+    )}
+    {educationalContent && (
+      <Card className="mb-3">
+        <Card.Body>
+          <div dangerouslySetInnerHTML={{ __html: educationalContent }} />
+        </Card.Body>
+      </Card>
+    )}
+  </div>
+);
+
+PluginExplanation.propTypes = {
+  educationalContent: PropTypes.string,
+  miniExplanation: PropTypes.string,
+  onLearnMore: PropTypes.func,
+};
+
+export default PluginExplanation; 

frontend/src/components/plugin/PluginLayout.css

@@ -0,0 +1,27 @@
+.plugin-layout {
+    min-height: 80vh;
+  }
+  .plugin-sidebar {
+    background: transparent;
+    border-right: 1px solid rgba(229,231,235,1);
+    min-height: 100vh;
+    padding-top: 2rem;
+    position: sticky;
+    top: 4rem;
+  }
+  .plugin-main-content {
+    padding: 2rem 2rem 2rem 2rem;
+  }
+  @media (max-width: 1024px) {
+    .plugin-sidebar {
+      min-height: auto;
+      padding-top: 1rem;
+      position: static;
+      border-right: none;
+      border-bottom: 1px solid rgba(229,231,235,1);
+      margin-bottom: 1rem;
+    }
+    .plugin-main-content {
+      padding: 1rem;
+    }
+  }

frontend/src/components/plugin/PluginLayout.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PluginLayout.css';
+
+const PluginLayout = ({ sidebar, children }) => (
+  <div className="container mx-auto px-4 plugin-layout">
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+      <aside className="lg:col-span-3 xl:col-span-2 plugin-sidebar">
+        {sidebar}
+      </aside>
+      <main className="lg:col-span-9 xl:col-span-10 plugin-main-content">
+        {children}
+      </main>
+    </div>
+  </div>
+);
+
+PluginLayout.propTypes = {
+  sidebar: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default PluginLayout; 

frontend/src/components/plugin/PluginParameterForm.js

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Form } from 'react-bootstrap';
+
+const PluginParameterForm = ({ parameters, initialValues, onSubmit, loading }) => {
+  const [values, setValues] = useState(initialValues || {});
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (e, param) => {
+    const { name, value, type, checked } = e.target;
+    setValues((prev) => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setErrors({});
+    onSubmit(values);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} className="plugin-parameter-form">
+      {parameters.map((param) => (
+        <Form.Group className="mb-3" controlId={`param-${param.name}`} key={param.name}>
+          <Form.Label>{param.description || param.name} {param.type === 'int' && <span className="text-muted">(int{param.min !== undefined ? `, min: ${param.min}` : ''}{param.max !== undefined ? `, max: ${param.max}` : ''})</span>} {param.type === 'float' && <span className="text-muted">(float{param.min !== undefined ? `, min: ${param.min}` : ''}{param.max !== undefined ? `, max: ${param.max}` : ''})</span>}</Form.Label>
+          {param.type === 'int' || param.type === 'float' ? (
+            <Form.Control
+              type="number"
+              name={param.name}
+              value={values[param.name] ?? param.default ?? ''}
+              min={param.min}
+              max={param.max}
+              step={param.type === 'float' ? 'any' : '1'}
+              onChange={(e) => handleChange(e, param)}
+              required={param.default === undefined}
+            />
+          ) : param.type === 'bool' ? (
+            <Form.Check
+              type="checkbox"
+              name={param.name}
+              label="Yes"
+              checked={!!values[param.name]}
+              onChange={(e) => handleChange(e, param)}
+            />
+          ) : param.type === 'select' ? (
+            <Form.Select
+              name={param.name}
+              value={values[param.name] ?? param.default ?? ''}
+              onChange={(e) => handleChange(e, param)}
+            >
+              {param.options.map((opt) => (
+                <option value={opt} key={opt}>{opt}</option>
+              ))}
+            </Form.Select>
+          ) : (
+            <Form.Control
+              type="text"
+              name={param.name}
+              value={values[param.name] ?? param.default ?? ''}
+              maxLength={param.max_length}
+              onChange={(e) => handleChange(e, param)}
+              required={param.default === undefined}
+            />
+          )}
+          {errors[param.name] && <Form.Text className="text-danger">{errors[param.name]}</Form.Text>}
+        </Form.Group>
+      ))}
+      <Button variant="primary" type="submit" disabled={loading} className="w-100 mb-2">
+        {loading ? 'Running...' : 'Run Simulation'}
+      </Button>
+      <Button variant="outline-secondary" type="button" className="w-100" onClick={() => setValues(initialValues || {})}>
+        Reset Parameters
+      </Button>
+    </Form>
+  );
+};
+
+PluginParameterForm.propTypes = {
+  parameters: PropTypes.array.isRequired,
+  initialValues: PropTypes.object,
+  onSubmit: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+};
+
+export default PluginParameterForm; 

frontend/src/components/plugin/PluginResultsPanel.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Tab, Card } from 'react-bootstrap';
+
+const PluginResultsPanel = ({ result, loading }) => {
+  const [activeTab, setActiveTab] = useState('visualization');
+
+  return (
+    <Card className="plugin-results-panel mb-4">
+      <Card.Header>
+        <Tabs
+          id="plugin-results-tabs"
+          activeKey={activeTab}
+          onSelect={(k) => setActiveTab(k)}
+          className="mb-0"
+        >
+          <Tab eventKey="visualization" title="Visualization" />
+          <Tab eventKey="raw" title="Raw Data" />
+          <Tab eventKey="log" title="Process Log" />
+        </Tabs>
+      </Card.Header>
+      <Card.Body>
+        {loading && <div className="text-center text-muted">Processing...</div>}
+        {!loading && result && (
+          <>
+            {activeTab === 'visualization' && (
+              <>
+                {result.output && result.output.circuit_svg && (
+                  <div className="mb-3">
+                    <div
+                      className="circuit-svg"
+                      style={{
+                        backgroundColor: '#fff',
+                        padding: '1rem',
+                        borderRadius: '8px',
+                        marginBottom: '1.5rem',
+                        textAlign: 'center',
+                        overflow: 'auto',
+                        maxWidth: '100%'
+                      }}
+                    >
+                      <div
+                        dangerouslySetInnerHTML={{ __html: result.output.circuit_svg }}
+                        style={{
+                          display: 'inline-block',
+                          maxWidth: '100%',
+                          height: 'auto'
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+                {result.output && result.output.probabilities && (
+                  <div className="mb-3">
+                    {/* Render probability distribution as a bar chart if available */}
+                    {/* You can use a chart library or a simple table here */}
+                    <h6>Probability Distribution</h6>
+                    <pre style={{ background: '#f8f9fa', padding: '1em', borderRadius: '6px' }}>{JSON.stringify(result.output.probabilities, null, 2)}</pre>
+                  </div>
+                )}
+              </>
+            )}
+            {activeTab === 'raw' && (
+              <pre style={{ background: '#f8f9fa', padding: '1em', borderRadius: '6px' }}>{JSON.stringify(result.output, null, 2)}</pre>
+            )}
+            {activeTab === 'log' && (
+              <pre style={{ background: '#f8f9fa', padding: '1em', borderRadius: '6px' }}>{result.log || 'No log available.'}</pre>
+            )}
+          </>
+        )}
+        {!loading && !result && <div className="text-center text-muted">No results yet.</div>}
+      </Card.Body>
+    </Card>
+  );
+};
+
+PluginResultsPanel.propTypes = {
+  result: PropTypes.object,
+  loading: PropTypes.bool,
+};
+
+export default PluginResultsPanel; 

frontend/src/components/plugin/QuantumVisualization.js

@@ -0,0 +1,393 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { BarChart3, Activity, Zap, Info, Maximize2 } from 'lucide-react';
+import PropTypes from 'prop-types';
+import FullscreenCircuitViewer from './FullscreenCircuitViewer';
+
+const QuantumVisualization = ({ result, type = 'auto' }) => {
+  const [activeVisualization, setActiveVisualization] = useState('circuit');
+  const [showFullscreen, setShowFullscreen] = useState(false);
+
+  // Bloch Sphere Visualization
+  const BlochSphere = ({ stateVector }) => {
+    const canvasRef = useRef(null);
+
+    useEffect(() => {
+      if (!canvasRef.current || !stateVector) return;
+
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const radius = Math.min(centerX, centerY) - 20;
+
+      // Clear canvas
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Draw sphere outline
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+      ctx.strokeStyle = '#e5e7eb';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      // Draw axes
+      ctx.strokeStyle = '#9ca3af';
+      ctx.lineWidth = 1;
+      
+      // X axis
+      ctx.beginPath();
+      ctx.moveTo(centerX - radius, centerY);
+      ctx.lineTo(centerX + radius, centerY);
+      ctx.stroke();
+      
+      // Y axis (vertical)
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY - radius);
+      ctx.lineTo(centerX, centerY + radius);
+      ctx.stroke();
+
+      // Calculate state vector position on Bloch sphere
+      if (stateVector && stateVector.length >= 2) {
+        const alpha = stateVector[0];
+        const beta = stateVector[1];
+        
+        // Convert to Bloch sphere coordinates
+        const theta = 2 * Math.acos(Math.abs(alpha));
+        const phi = Math.arg ? Math.arg(beta / alpha) : 0;
+        
+        const x = radius * Math.sin(theta) * Math.cos(phi);
+        const z = radius * Math.cos(theta);
+
+        // Project to 2D (simple projection)
+        const projX = centerX + x;
+        const projY = centerY - z; // Flip Y for canvas coordinates
+
+        // Draw state vector
+        ctx.beginPath();
+        ctx.moveTo(centerX, centerY);
+        ctx.lineTo(projX, projY);
+        ctx.strokeStyle = '#6366f1';
+        ctx.lineWidth = 3;
+        ctx.stroke();
+
+        // Draw state point
+        ctx.beginPath();
+        ctx.arc(projX, projY, 6, 0, 2 * Math.PI);
+        ctx.fillStyle = '#6366f1';
+        ctx.fill();
+      }
+
+      // Add labels
+      ctx.fillStyle = '#374151';
+      ctx.font = '12px Inter';
+      ctx.textAlign = 'center';
+      ctx.fillText('|0⟩', centerX, centerY - radius - 10);
+      ctx.fillText('|1⟩', centerX, centerY + radius + 20);
+      ctx.textAlign = 'left';
+      ctx.fillText('|+⟩', centerX + radius + 10, centerY + 5);
+      ctx.textAlign = 'right';
+      ctx.fillText('|-⟩', centerX - radius - 10, centerY + 5);
+    }, [stateVector]);
+
+    return (
+      <canvas
+        ref={canvasRef}
+        width={300}
+        height={300}
+        className="border border-neutral-200 dark:border-neutral-600 rounded-lg bg-base-100 dark:bg-base-200"
+      />
+    );
+  };
+
+  // Probability Bar Chart
+  const ProbabilityChart = ({ probabilities }) => {
+    if (!probabilities || typeof probabilities !== 'object') return null;
+
+    const entries = Object.entries(probabilities);
+    const maxProb = Math.max(...entries.map(([, prob]) => prob));
+
+    return (
+      <div className="space-y-3">
+        {entries.map(([state, probability]) => (
+          <motion.div
+            key={state}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            className="flex items-center gap-3"
+          >
+            <div className="w-12 text-sm font-mono text-neutral-600">|{state}⟩</div>
+            <div className="flex-1 bg-base-200 dark:bg-neutral-800 rounded-full h-6 relative overflow-hidden">
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${(probability / maxProb) * 100}%` }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+                className="h-full bg-gradient-to-r from-primary-400 to-primary-600 rounded-full"
+              />
+              <div className="absolute inset-0 flex items-center justify-center text-xs font-medium text-neutral-700">
+                {(probability * 100).toFixed(1)}%
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    );
+  };
+
+  // Circuit SVG Display
+  const CircuitDisplay = ({ circuitSvg }) => {
+    const [zoom, setZoom] = useState(1);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [scrollPos, setScrollPos] = useState({ x: 0, y: 0 });
+    const containerRef = useRef(null);
+
+    if (!circuitSvg) return null;
+
+    const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.2, 3));
+    const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.2, 0.5));
+    const handleResetZoom = () => setZoom(1);
+
+    const handleMouseDown = (e) => {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX, y: e.clientY });
+    };
+
+    const handleMouseMove = (e) => {
+      if (!isDragging || !containerRef.current) return;
+      
+      const deltaX = e.clientX - dragStart.x;
+      const deltaY = e.clientY - dragStart.y;
+      
+      containerRef.current.scrollLeft = scrollPos.x - deltaX;
+      containerRef.current.scrollTop = scrollPos.y - deltaY;
+    };
+
+    const handleMouseUp = () => {
+      if (containerRef.current) {
+        setScrollPos({
+          x: containerRef.current.scrollLeft,
+          y: containerRef.current.scrollTop
+        });
+      }
+      setIsDragging(false);
+    };
+
+    return (
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="bg-base-100 dark:bg-base-200 p-6 rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"
+      >
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h4 className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+              Quantum Circuit Diagram
+            </h4>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              Scroll or drag to navigate • Use zoom controls for better viewing
+            </p>
+          </div>
+          
+          {/* Controls */}
+          <div className="flex items-center gap-2">
+            {/* Zoom Controls */}
+            <div className="flex items-center gap-1 sm:gap-2 bg-base-200 dark:bg-neutral-800 rounded-lg p-1">
+              <button
+                onClick={handleZoomOut}
+                className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors min-h-[44px] sm:min-h-[32px] min-w-[44px] sm:min-w-[32px] flex items-center justify-center"
+                title="Zoom Out"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="M21 21l-4.35-4.35"/>
+                  <line x1="8" y1="11" x2="14" y2="11"/>
+                </svg>
+              </button>
+              
+              <span className="text-xs text-neutral-600 dark:text-neutral-400 min-w-[3rem] text-center px-1">
+                {Math.round(zoom * 100)}%
+              </span>
+              
+              <button
+                onClick={handleZoomIn}
+                className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors min-h-[44px] sm:min-h-[32px] min-w-[44px] sm:min-w-[32px] flex items-center justify-center"
+                title="Zoom In"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="M21 21l-4.35-4.35"/>
+                  <line x1="8" y1="11" x2="14" y2="11"/>
+                  <line x1="11" y1="8" x2="11" y2="14"/>
+                </svg>
+              </button>
+              
+              <button
+                onClick={handleResetZoom}
+                className="p-2 sm:p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-400 transition-colors text-xs min-h-[44px] sm:min-h-[32px] px-2 sm:px-1"
+                title="Reset Zoom"
+              >
+                <span className="hidden sm:inline">Reset</span>
+                <span className="sm:hidden">↺</span>
+              </button>
+            </div>
+            
+            {/* Fullscreen Button */}
+            <button
+              onClick={() => setShowFullscreen(true)}
+              className="p-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors min-h-[44px] sm:min-h-[40px] min-w-[44px] sm:min-w-[40px] flex items-center justify-center"
+              title="View in Fullscreen"
+            >
+              <Maximize2 size={16} />
+            </button>
+          </div>
+        </div>
+        
+        <div 
+          ref={containerRef}
+          className="overflow-auto bg-base-100 dark:bg-neutral-800 rounded-lg border border-neutral-100 dark:border-neutral-600 p-2 sm:p-4 cursor-grab active:cursor-grabbing touch-pan-x touch-pan-y"
+          style={{ 
+            maxHeight: '400px',
+            scrollbarWidth: 'thin',
+            scrollbarColor: '#cbd5e1 #f1f5f9',
+            WebkitOverflowScrolling: 'touch'
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          onTouchStart={(e) => {
+            const touch = e.touches[0];
+            handleMouseDown({ clientX: touch.clientX, clientY: touch.clientY });
+          }}
+          onTouchMove={(e) => {
+            const touch = e.touches[0];
+            handleMouseMove({ clientX: touch.clientX, clientY: touch.clientY });
+          }}
+          onTouchEnd={handleMouseUp}
+        >
+          <div
+            dangerouslySetInnerHTML={{ __html: circuitSvg }}
+            className="min-w-max transition-transform duration-200"
+            style={{ 
+              minWidth: 'fit-content',
+              display: 'inline-block',
+              transform: `scale(${zoom})`,
+              transformOrigin: 'top left'
+            }}
+          />
+        </div>
+        
+        {/* Navigation hints */}
+        <div className="mt-3 flex items-center justify-between text-xs text-neutral-400 dark:text-neutral-500">
+          <span className="flex items-center gap-1">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M9 11H1m22 0h-8M9 11l3-3m-3 3l3 3"/>
+            </svg>
+            <span className="hidden sm:inline">Drag to pan • Scroll to navigate</span>
+            <span className="sm:hidden">Drag or swipe to navigate</span>
+          </span>
+          
+          <span className="flex items-center gap-1">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="11" cy="11" r="8"/>
+              <path d="M21 21l-4.35-4.35"/>
+            </svg>
+            Use zoom controls for detail
+          </span>
+        </div>
+      </motion.div>
+    );
+  };
+
+  const visualizations = [
+    {
+      id: 'circuit',
+      label: 'Circuit',
+      icon: <Activity size={16} />,
+      component: <CircuitDisplay circuitSvg={result?.output?.circuit_svg} />,
+      available: !!result?.output?.circuit_svg,
+    },
+    {
+      id: 'probabilities',
+      label: 'Probabilities',
+      icon: <BarChart3 size={16} />,
+      component: <ProbabilityChart probabilities={result?.output?.probabilities} />,
+      available: !!result?.output?.probabilities,
+    },
+    {
+      id: 'bloch',
+      label: 'Bloch Sphere',
+      icon: <Zap size={16} />,
+      component: <BlochSphere stateVector={result?.output?.state_vector} />,
+      available: !!result?.output?.state_vector,
+    },
+  ];
+
+  const availableVisualizations = visualizations.filter(viz => viz.available);
+
+  if (!result || availableVisualizations.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
+        <Info size={48} className="mb-4 opacity-50" />
+        <p className="text-lg font-medium">No visualization data available</p>
+        <p className="text-sm">Run a simulation to see results</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {availableVisualizations.length > 1 && (
+        <div className="flex gap-2 p-1 bg-base-200 rounded-lg">
+          {availableVisualizations.map((viz) => (
+            <button
+              key={viz.id}
+              onClick={() => setActiveVisualization(viz.id)}
+              className={`
+                flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all
+                ${activeVisualization === viz.id
+                  ? 'bg-base-100 text-neutral-900 dark:text-neutral-100 shadow-sm'
+                  : 'text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-base-100/50'
+                }
+              `}
+            >
+              {viz.icon}
+              {viz.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <AnimatePresence mode="wait">
+        {availableVisualizations.map((viz) => (
+          viz.id === activeVisualization && (
+            <motion.div
+              key={viz.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.3 }}
+            >
+              {viz.component}
+            </motion.div>
+          )
+        ))}
+      </AnimatePresence>
+
+      {/* Fullscreen Circuit Viewer */}
+      <FullscreenCircuitViewer
+        circuitSvg={result?.output?.circuit_svg}
+        isOpen={showFullscreen}
+        onClose={() => setShowFullscreen(false)}
+      />
+    </div>
+  );
+};
+
+QuantumVisualization.propTypes = {
+  result: PropTypes.object,
+  type: PropTypes.string,
+};
+
+export default QuantumVisualization;

frontend/src/components/plugin/SimpleTabs.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+const SimpleTabs = ({ tabs, defaultTab = null }) => {
+  const [activeTab, setActiveTab] = useState(defaultTab || (tabs.length > 0 ? tabs[0].id : ''));
+
+  return (
+    <div className="w-full">
+      {/* Tab Headers */}
+      <div className="flex bg-base-200 rounded-lg p-1 mb-4 gap-1 overflow-x-auto">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`
+              flex items-center gap-2 px-3 py-3 sm:px-4 sm:py-2 rounded-md border-0 text-sm font-medium cursor-pointer transition-all duration-200 whitespace-nowrap min-h-[44px] sm:min-h-[36px] flex-1 sm:flex-initial
+              ${activeTab === tab.id 
+                ? 'bg-base-100 text-neutral-900 dark:text-neutral-100 shadow-sm' 
+                : 'bg-transparent text-neutral-600 dark:text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-100'
+              }
+            `}
+          >
+            {tab.icon}
+            <span className="hidden sm:inline">
+              {tab.label}
+            </span>
+            <span className="sm:hidden">
+              {tab.label.split(' ')[0]}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      <AnimatePresence mode="wait">
+        {tabs.map((tab) => (
+          activeTab === tab.id && (
+            <motion.div
+              key={tab.id}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.2 }}
+            >
+              {tab.content}
+            </motion.div>
+          )
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+SimpleTabs.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      icon: PropTypes.node,
+      content: PropTypes.node.isRequired,
+    })
+  ).isRequired,
+  defaultTab: PropTypes.string,
+};
+
+export default SimpleTabs;

frontend/src/design-system/components/Button.js

@@ -0,0 +1,87 @@
+import React, { forwardRef } from 'react';
+import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
+import PropTypes from 'prop-types';
+
+const Button = forwardRef(({
+  children,
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  icon,
+  iconPosition = 'left',
+  fullWidth = false,
+  className = '',
+  onClick,
+  type = 'button',
+  ...props
+}, ref) => {
+  const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+  
+  const variants = {
+    primary: 'bg-primary-500 hover:bg-primary-600 text-white focus:ring-primary-500 shadow-sm hover:shadow-md border-0',
+    secondary: 'bg-secondary-500 hover:bg-secondary-600 text-white focus:ring-secondary-500 shadow-sm hover:shadow-md border-0',
+    outline: 'border-2 border-primary-500 bg-transparent hover:bg-primary-500 text-primary-500 hover:text-white focus:ring-primary-500 shadow-sm',
+    ghost: 'hover:bg-primary-100 hover:text-primary-700 text-current focus:ring-primary-500 border-0',
+    danger: 'bg-error-500 hover:bg-error-600 text-white focus:ring-error-500 shadow-sm hover:shadow-md border-0',
+  };
+
+  const sizes = {
+    sm: 'px-3 py-2 text-sm gap-1.5 min-h-[44px] sm:py-1.5 sm:min-h-[36px]',
+    md: 'px-4 py-3 text-base gap-2 min-h-[48px] sm:py-2 sm:min-h-[40px]',
+    lg: 'px-6 py-4 text-lg gap-2.5 min-h-[52px] sm:py-3 sm:min-h-[44px]',
+    xl: 'px-8 py-5 text-xl gap-3 min-h-[56px] sm:py-4 sm:min-h-[48px]',
+  };
+
+  const classes = `
+    ${baseClasses}
+    ${variants[variant]}
+    ${sizes[size]}
+    ${fullWidth ? 'w-full' : ''}
+    ${className}
+  `.trim();
+
+  const content = (
+    <>
+      {loading && <Loader2 size={16} className="animate-spin" />}
+      {!loading && icon && iconPosition === 'left' && icon}
+      <span>{children}</span>
+      {!loading && icon && iconPosition === 'right' && icon}
+    </>
+  );
+
+  return (
+    <motion.button
+      ref={ref}
+      type={type}
+      className={classes}
+      disabled={disabled || loading}
+      onClick={onClick}
+      whileHover={{ scale: disabled || loading ? 1 : 1.02 }}
+      whileTap={{ scale: disabled || loading ? 1 : 0.98 }}
+      transition={{ type: "spring", stiffness: 400, damping: 17 }}
+      {...props}
+    >
+      {content}
+    </motion.button>
+  );
+});
+
+Button.displayName = 'Button';
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary', 'outline', 'ghost', 'danger']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  fullWidth: PropTypes.bool,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+};
+
+export default Button;

frontend/src/design-system/components/Card.js

@@ -0,0 +1,129 @@
+import React, { forwardRef } from 'react';
+import { motion } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+const Card = forwardRef(({
+  children,
+  variant = 'default',
+  padding = 'md',
+  hover = false,
+  className = '',
+  ...props
+}, ref) => {
+  const baseClasses = 'rounded-xl border transition-all duration-200';
+  
+  const variants = {
+    default: 'border-neutral-200 dark:border-neutral-500 shadow-sm bg-base-100 dark:bg-base-200',
+    elevated: 'border-neutral-200 dark:border-neutral-500 shadow-md bg-base-100 dark:bg-base-200',
+    outlined: 'border-neutral-300 dark:border-neutral-400 shadow-none bg-base-100 dark:bg-base-200',
+    glass: 'border-white/20 bg-base-100/80 dark:bg-base-200/80 backdrop-blur-md shadow-lg',
+  };
+
+  const paddings = {
+    none: 'p-0',
+    sm: 'p-3',
+    md: 'p-4 sm:p-6',
+    lg: 'p-6 sm:p-8',
+    xl: 'p-8 sm:p-10',
+  };
+
+  const hoverClasses = hover ? 'hover:shadow-lg hover:-translate-y-1' : '';
+
+  const classes = `
+    ${baseClasses}
+    ${variants[variant]}
+    ${paddings[padding]}
+    ${hoverClasses}
+    ${className}
+  `.trim();
+
+  const CardComponent = hover ? motion.div : 'div';
+  const motionProps = hover ? {
+    whileHover: { y: -4, transition: { type: "spring", stiffness: 300 } },
+    transition: { type: "spring", stiffness: 400, damping: 17 }
+  } : {};
+
+  return (
+    <CardComponent
+      ref={ref}
+      className={classes}
+      {...motionProps}
+      {...props}
+    >
+      {children}
+    </CardComponent>
+  );
+});
+
+Card.displayName = 'Card';
+
+const CardHeader = ({ children, className = '', ...props }) => (
+  <div className={`pb-3 sm:pb-4 border-b border-neutral-200 dark:border-neutral-500 mb-4 sm:mb-6 ${className}`} {...props}>
+    {children}
+  </div>
+);
+
+const CardTitle = ({ children, className = '', ...props }) => (
+  <h3 className={`text-base sm:text-lg font-semibold text-neutral-900 dark:text-neutral-100 ${className}`} {...props}>
+    {children}
+  </h3>
+);
+
+const CardDescription = ({ children, className = '', ...props }) => (
+  <p className={`text-sm text-neutral-600 dark:text-neutral-200 mt-1 ${className}`} {...props}>
+    {children}
+  </p>
+);
+
+const CardContent = ({ children, className = '', ...props }) => (
+  <div className={className} {...props}>
+    {children}
+  </div>
+);
+
+const CardFooter = ({ children, className = '', ...props }) => (
+  <div className={`pt-4 border-t border-neutral-200 dark:border-neutral-500 mt-6 ${className}`} {...props}>
+    {children}
+  </div>
+);
+
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['default', 'elevated', 'outlined', 'glass']),
+  padding: PropTypes.oneOf(['none', 'sm', 'md', 'lg', 'xl']),
+  hover: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+CardHeader.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+CardTitle.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+CardDescription.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+CardContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+CardFooter.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+
+export default Card;

frontend/src/design-system/components/Input.js

@@ -0,0 +1,162 @@
+import React, { forwardRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AlertCircle, Eye, EyeOff } from 'lucide-react';
+import PropTypes from 'prop-types';
+
+const Input = forwardRef(({
+  label,
+  type = 'text',
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  error,
+  helperText,
+  required = false,
+  disabled = false,
+  size = 'md',
+  icon,
+  iconPosition = 'left',
+  className = '',
+  ...props
+}, ref) => {
+  const [focused, setFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const inputType = type === 'password' && showPassword ? 'text' : type;
+
+  const baseClasses = 'w-full rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 text-base sm:text-sm md:text-base';
+  
+  const sizes = {
+    sm: 'px-3 py-2 text-sm min-h-[40px]',
+    md: 'px-4 py-3 text-base min-h-[48px] sm:py-2.5 sm:min-h-[44px]',
+    lg: 'px-5 py-4 text-lg min-h-[52px] sm:py-3 sm:min-h-[48px]',
+  };
+
+  const stateClasses = error 
+    ? 'border-error-300 focus:border-error-500 focus:ring-error-500/20'
+    : focused
+    ? 'border-primary-300 focus:border-primary-500 focus:ring-primary-500/20'
+    : 'border-neutral-300 hover:border-neutral-400';
+
+  const disabledClasses = disabled 
+    ? 'bg-base-200 text-neutral-500 cursor-not-allowed'
+    : 'bg-base-100 text-neutral-900 dark:text-neutral-100';
+
+  const iconClasses = icon ? (iconPosition === 'left' ? 'pl-10' : 'pr-10') : '';
+  const passwordToggleClasses = type === 'password' ? 'pr-10' : '';
+
+  const inputClasses = `
+    ${baseClasses}
+    ${sizes[size]}
+    ${stateClasses}
+    ${disabledClasses}
+    ${iconClasses}
+    ${passwordToggleClasses}
+    ${className}
+  `.trim();
+
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <motion.label
+          className={`block text-sm font-medium ${error ? 'text-error-700' : 'text-neutral-700'}`}
+          animate={{ color: error ? '#b91c1c' : focused ? '#4f46e5' : '#374151' }}
+          transition={{ duration: 0.2 }}
+        >
+          {label}
+          {required && <span className="text-error-500 ml-1">*</span>}
+        </motion.label>
+      )}
+      
+      <div className="relative">
+        {icon && (
+          <div className={`absolute inset-y-0 ${iconPosition === 'left' ? 'left-0 pl-3' : 'right-0 pr-3'} flex items-center pointer-events-none`}>
+            <div className={`${error ? 'text-error-400' : focused ? 'text-primary-500' : 'text-neutral-400'} transition-colors duration-200`}>
+              {icon}
+            </div>
+          </div>
+        )}
+        
+        <input
+          ref={ref}
+          type={inputType}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          required={required}
+          className={inputClasses}
+          {...props}
+        />
+        
+        {type === 'password' && (
+          <button
+            type="button"
+            className="absolute inset-y-0 right-0 pr-3 flex items-center"
+            onClick={() => setShowPassword(!showPassword)}
+            tabIndex={-1}
+          >
+            <motion.div
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+              className="text-neutral-400 hover:text-neutral-600 transition-colors duration-200"
+            >
+              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+            </motion.div>
+          </button>
+        )}
+      </div>
+      
+      <AnimatePresence>
+        {(error || helperText) && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className={`flex items-center gap-2 text-sm ${error ? 'text-error-600' : 'text-neutral-600'}`}
+          >
+            {error && <AlertCircle size={14} />}
+            <span>{error || helperText}</span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+Input.displayName = 'Input';
+
+Input.propTypes = {
+  label: PropTypes.string,
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  error: PropTypes.string,
+  helperText: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+};
+
+export default Input;