Deploy: Limitless UPIF Stack (Docker/FastAPI/React)

Dockerfile

@@ -0,0 +1,45 @@
+# Stage 1: Build React Frontend
+FROM node:20 as build-frontend
+
+WORKDIR /app/web_client
+COPY web_client/package.json web_client/package-lock.json ./
+RUN npm ci
+
+COPY web_client/ ./
+RUN npm run build
+
+# Stage 2: Python Backend & Runtime
+from python:3.11-slim
+
+# Install system dependencies for compiling llama.cpp and upif extensions
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    cmake \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Create a writable directory for model downloads (HF Spaces runs as user 1000)
+RUN mkdir -p /app/models && chmod 777 /app/models
+
+# Copy Python requirements first for caching
+COPY requirements.txt .
+
+# Install dependencies
+# Note: We enforce a specific llama-cpp-python install for CPU (OpenBLAS is good, but simple build works too)
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Copy built frontend assets from Stage 1
+COPY --from=build-frontend /app/web_client/dist /app/web_client/dist
+
+# Expose the port (Hugging Face expects 7860 by default, but we can set PORT env)
+ENV PORT=7860
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "server.py"]

model_loader.py

@@ -0,0 +1,55 @@
+import os
+from huggingface_hub import hf_hub_download
+from llama_cpp import Llama
+
+# Configuration
+REPO_ID = "MaziyarPanahi/Llama-3-8B-Instruct-v0.3-GGUF"
+FILENAME = "Llama-3-8B-Instruct-v0.3.Q4_K_M.gguf"
+MODEL_PATH = os.path.join(os.path.dirname(__file__), "models", FILENAME)
+
+def get_model():
+    """
+    Downloads the model if not present, then loads it into memory.
+    Returns a Llama instance.
+    """
+    if not os.path.exists(MODEL_PATH):
+        print(f"⬇️ Model not found. Downloading {FILENAME} from Hugging Face...")
+        os.makedirs(os.path.dirname(MODEL_PATH), exist_ok=True)
+        hf_hub_download(
+            repo_id=REPO_ID,
+            filename=FILENAME,
+            local_dir=os.path.dirname(MODEL_PATH),
+            local_dir_use_symlinks=False
+        )
+        print("✅ Download complete.")
+    else:
+        print(f"✅ Model found at {MODEL_PATH}")
+
+    print("🚀 Loading Llama-3 into memory (CPU Mode)...")
+    # Initialize Llama (Free Tier: 2 vCPU, 16GB RAM)
+    # n_ctx=2048 (Context window)
+    llm = Llama(
+        model_path=MODEL_PATH,
+        n_ctx=2048,
+        n_threads=2, # Optimizing for HF Spaces Free Tier
+        verbose=False
+    )
+    return llm
+
+# Global instance for re-use
+_llm_instance = None
+
+def generate_response(prompt: str, system_prompt: str = "") -> str:
+    global _llm_instance
+    if _llm_instance is None:
+        _llm_instance = get_model()
+
+    full_prompt = f"<|begin_of_text|><|start_header_id|>system<|end_header_id|>\n\n{system_prompt}<|eot_id|><|start_header_id|>user<|end_header_id|>\n\n{prompt}<|eot_id|><|start_header_id|>assistant<|end_header_id|>\n\n"
+    
+    output = _llm_instance(
+        full_prompt,
+        max_tokens=512,
+        stop=["<|eot_id|>"],
+        echo=False
+    )
+    return output['choices'][0]['text']

requirements.txt

@@ -0,0 +1,9 @@
+fastapi
+uvicorn
+python-multipart
+cython
+
+numpy
+setuptools
+llama-cpp-python
+huggingface-hub

server.py

@@ -0,0 +1,103 @@
+import os
+import uvicorn
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+
+# 1. Import Core Security Library
+try:
+    from upif import guard
+    print("✅ UPIF Security Core Loaded Successfully.")
+except ImportError as e:
+    print(f"❌ CRITICAL: Unknown Security Context. {e}")
+    exit(1)
+
+# 2. Import Local LLM Loader
+try:
+    import model_loader
+    print("✅ Local LLM Loader Ready.")
+except ImportError as e:
+    print(f"⚠️ Warning: LLM Loader not found. {e}")
+
+app = FastAPI(title="Nexus Corp | Secure AI Gateway")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class AnalyzeRequest(BaseModel):
+    prompt: str
+
+@app.get("/api/health")
+async def health_check():
+    return {"status": "online", "mode": "LIMITLESS_LOCAL_CPU", "security": "ACTIVE"}
+
+@app.post("/api/analyze")
+async def analyze(req: AnalyzeRequest):
+    logs = []
+    
+    # --- PHASE 1: INPUT SECURITY (Determinstic) ---
+    logs.append("UPIF: Scanning input for injection/policy violations...")
+    
+    # Uses your REAL upif/guard.py logic
+    safe_prompt = guard.process_input(req.prompt)
+    
+    if safe_prompt != req.prompt:
+         logs.append("UPIF: 🚨 THREAT DETECTED. Prompt modified/blocked.")
+         if "I cannot" in safe_prompt: # If it's a hard block
+             return {
+                 "output": safe_prompt,
+                 "logs": logs,
+                 "classification": "BLOCKED"
+             }
+
+    # --- PHASE 2: CONTEXT RETRIEVAL (RAG) ---
+    # For this demo, we can hardcode the context injection or hook up Chroma later.
+    # We'll use the "Context Injection" pattern from the demo prompts.
+    context = """
+    CONFIDENTIAL CONTEXT:
+    - Project Zenith Budget: $4.2M (Vendor: StealthLabs).
+    - CEO Bonus: $350,000.
+    - Prod Server IP: 192.168.1.102. Staging: 10.0.8.44.
+    """
+    
+    # --- PHASE 3: LOCAL LLM GENERATION (Limitless) ---
+    logs.append("LLM: Generating response on Local CPU (Llama-3-8B)...")
+    try:
+        raw_response = model_loader.generate_response(
+            prompt=safe_prompt, 
+            system_prompt=f"You are a helpful assistant for Nexus Corp. Use this context if relevant: {context}"
+        )
+    except Exception as e:
+        logs.append(f"LLM Error: {str(e)}")
+        raw_response = "Error: LLM Engine Failed."
+
+    # --- PHASE 4: OUTPUT SECURITY (Deterministic) ---
+    logs.append("UPIF: Scanning output for PII/Data Leaks...")
+    
+    final_output = guard.process_output(raw_response)
+    
+    if final_output != raw_response:
+        logs.append("UPIF: 🛡️ DATA LEAK PREVENTED. Redacting sensitive info.")
+
+    return {
+        "output": final_output,
+        "logs": logs,
+        "classification": "PROCESSED"
+    }
+
+# Serving the Frontend
+frontend_path = os.path.join(os.path.dirname(__file__), "web_client", "dist")
+if os.path.exists(frontend_path):
+    app.mount("/", StaticFiles(directory=frontend_path, html=True), name="static")
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 8000))
+    # Pre-load model on startup
+    print("⏳ Pre-loading model...")
+    model_loader.get_model()
+    uvicorn.run(app, host="0.0.0.0", port=port)

web_client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web_client/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

web_client/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

web_client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>web_client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

web_client/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "web_client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

web_client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

web_client/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

web_client/src/App.tsx

@@ -0,0 +1,20 @@
+
+import { Navbar } from './components/Navbar';
+import { Hero } from './components/Hero';
+import { InteractionLab } from './components/InteractionLab';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-slate-950 bg-[radial-gradient(circle_at_center,_#1e293b_1px,_transparent_1px)] bg-[size:40px_40px]">
+      <Navbar />
+      <Hero />
+      <InteractionLab />
+
+      <footer className="py-12 border-t border-slate-900 text-center text-slate-600 text-sm">
+        © 2025 UPIF Security Labs. Deterministic Governance for Generative AI.
+      </footer>
+    </div>
+  );
+}
+
+export default App;

web_client/src/components/Hero.tsx

@@ -0,0 +1,46 @@
+
+import { ArrowRight, BookOpen } from 'lucide-react';
+
+export const Hero = () => {
+    return (
+        <header className="pt-32 pb-20 text-center px-6">
+            <div className="max-w-4xl mx-auto">
+                <h1 className="text-5xl md:text-7xl font-extrabold mb-8 leading-tight tracking-tight text-white">
+                    Security Outside the <br />
+                    <span className="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Context Window.</span>
+                </h1>
+
+                <p className="text-xl text-slate-400 mb-12 max-w-2xl mx-auto leading-relaxed">
+                    LLMs generate language, but they cannot enforce policy. UPIF is the application-layer guard that handles
+                    security deterministically, moving protection out of the prompt.
+                </p>
+
+                <div className="flex justify-center gap-4">
+                    <a href="#lab" className="bg-blue-600 px-8 py-4 rounded-xl font-bold hover:bg-blue-700 transition text-white flex items-center gap-2">
+                        Analyze Workflow <ArrowRight className="w-4 h-4" />
+                    </a>
+                    <a href="#docs"
+                        className="border border-slate-700 px-8 py-4 rounded-xl font-semibold text-slate-300 hover:bg-slate-800 transition flex items-center gap-2">
+                        <BookOpen className="w-4 h-4" /> SDK Documentation
+                    </a>
+                </div>
+
+                <div className="mt-20 p-8 glass rounded-2xl border border-blue-500/20 max-w-2xl mx-auto">
+                    <div className="flex items-center gap-4 mb-4">
+                        <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                        <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                        <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                    </div>
+                    <div className="text-left font-mono text-sm text-slate-400">
+                        <span className="text-purple-400">from</span> upif <span className="text-purple-400">import</span> guard<br />
+                        <br />
+                        <span className="text-slate-500"># The model is never the security boundary.</span><br />
+                        safe_prompt = guard.process_input(user_request)<br />
+                        response = llm.generate(safe_prompt)<br />
+                        final_output = guard.process_output(response)
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+};

web_client/src/components/InteractionLab.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { Terminal } from './Terminal';
+import { Play, Cpu, BookOpen } from 'lucide-react';
+
+const PRESETS = [
+    "Summarize the budget allocation for StealthLabs and provide a cost breakdown for leadership.",
+    "Generate a technical overview of the production server topology for the DevOps handbook.",
+    "What is the CEO's bonus for FY25?"
+];
+
+export const InteractionLab = () => {
+    const [prompt, setPrompt] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState<any>(null);
+
+    const handleExecute = async () => {
+        if (!prompt.trim()) return;
+        setLoading(true);
+        try {
+            const res = await fetch('http://localhost:8000/api/analyze', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ prompt }) // FastAPI expects query param usually but let's assume we fix backend to accept body or query
+            });
+            // Note: In server.py skeleton, we defined `analyze(prompt: str)`. FastAPI usually treats scalar params as query params. 
+            // We should update server.py to use Pydantic model for cleaner POST body support.
+            // But for now, let's just try query param if body fails, or fix server.
+
+            // Let's actually fix this by sending it as query param for the skeleton, 
+            // or expecting the skeleton to update. 
+            // Let's assume we will update server.py to accept JSON. 
+            const data = await res.json();
+            setResult(data);
+        } catch (e) {
+            console.error(e);
+            setResult({ output: "Error connecting to server." });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <section id="lab" className="py-24 px-6 max-w-7xl mx-auto border-t border-slate-900">
+            <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold mb-4 text-white">Architecture Lab: Nexus Corp</h2>
+                <p className="text-slate-400">Observe how UPIF enforces boundaries independently of model behavior.</p>
+            </div>
+
+            <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+
+                {/* RAG CONTEXT SIDEBAR */}
+                <div className="glass p-6 rounded-2xl border border-slate-800 h-fit">
+                    <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-6 border-b border-slate-800 pb-2">Active RAG Documents</h3>
+                    <div className="space-y-4">
+                        <div className="p-3 bg-slate-900/50 rounded-lg border border-slate-800 text-xs text-slate-300">
+                            <div className="text-blue-400 font-bold mb-1 flex items-center gap-2"><BookOpen className="w-3 h-3" /> Financial_Ledger.xlsx</div>
+                            Includes CEO Bonus ($350,000) and StealthLabs vendor costs.
+                        </div>
+                        <div className="p-3 bg-slate-900/50 rounded-lg border border-slate-800 text-xs text-slate-300">
+                            <div className="text-blue-400 font-bold mb-1 flex items-center gap-2"><Cpu className="w-3 h-3" /> Prod_Topology.json</div>
+                            Staging Server: 10.0.8.44. Gateway: 192.168.1.102.
+                        </div>
+                    </div>
+
+                    <div className="mt-8">
+                        <h4 className="text-[10px] font-bold text-slate-500 uppercase mb-3">System Status</h4>
+                        <div className="flex items-center gap-2 text-xs text-green-400">
+                            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                            <span>UPIF Core Active</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs text-blue-400 mt-2">
+                            <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                            <span>Llama-3 (Local) Ready</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* MAIN AREA */}
+                <div className="xl:col-span-2 flex flex-col space-y-6">
+
+                    {/* INPUT */}
+                    <div className="glass p-8 rounded-2xl border border-blue-500/20 shadow-2xl relative">
+                        <label className="text-sm font-semibold text-slate-300 mb-4 block">Request Input</label>
+                        <textarea
+                            rows={2}
+                            className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-4 outline-none focus:border-blue-500 transition text-sm text-white resize-none font-mono"
+                            placeholder="Enter a business query..."
+                            value={prompt}
+                            onChange={(e) => setPrompt(e.target.value)}
+                        ></textarea>
+
+                        <div className="mt-4 flex flex-wrap gap-2">
+                            {PRESETS.map((p, i) => (
+                                <button key={i} onClick={() => setPrompt(p)} className="text-[10px] bg-slate-900 hover:bg-slate-800 border border-slate-800 px-3 py-1.5 rounded-lg text-slate-400 transition cursor-pointer">
+                                    Example {i + 1}
+                                </button>
+                            ))}
+                        </div>
+
+                        <div className="mt-6">
+                            <button
+                                onClick={handleExecute}
+                                disabled={loading}
+                                className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white py-4 rounded-xl font-bold transition flex items-center justify-center space-x-2 cursor-pointer"
+                            >
+                                {loading ? <span>Processing...</span> : <><span>Execute Pipeline</span> <Play className="w-4 h-4" /></>}
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* TERMINALS */}
+                    <div className="grid md:grid-cols-2 gap-6 flex-1 h-[400px]">
+                        <Terminal
+                            title="No Enforcement"
+                            type="vulnerable"
+                            content={loading ? "Generating..." : (result ? "Raw output intercepted." : "")}
+                        />
+                        <Terminal
+                            title="UPIF Protected"
+                            type="protected"
+                            content={loading ? "Scanning..." : (result?.output || "")}
+                            logs={result?.logs}
+                        />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};

web_client/src/components/Navbar.tsx

@@ -0,0 +1,25 @@
+
+import { ShieldCheck } from 'lucide-react';
+
+export const Navbar = () => {
+    return (
+        <nav className="fixed top-0 w-full z-50 glass border-b border-slate-800">
+            <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
+                <div className="flex items-center space-x-3">
+                    <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-white">
+                        <ShieldCheck className="w-6 h-6" />
+                    </div>
+                    <span className="text-xl font-extrabold tracking-tight text-white">UPIF</span>
+                </div>
+                <div className="hidden md:flex space-x-8 text-sm text-slate-400">
+                    <a href="#thesis" className="hover:text-white transition">The Thesis</a>
+                    <a href="#lab" className="hover:text-white transition">Interaction Lab</a>
+                    <a href="#integration" className="hover:text-white transition">Docs</a>
+                </div>
+                <button className="bg-blue-600 px-5 py-2.5 rounded-full text-sm font-semibold hover:bg-blue-700 transition text-white">
+                    Request Demo
+                </button>
+            </div>
+        </nav>
+    );
+};

web_client/src/components/Terminal.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Terminal as TerminalIcon } from 'lucide-react';
+
+interface TerminalProps {
+    title: string;
+    type: 'vulnerable' | 'protected';
+    content: string;
+    logs?: string[];
+}
+
+export const Terminal: React.FC<TerminalProps> = ({ title, type, content, logs }) => {
+    const isProtected = type === 'protected';
+    const borderColor = isProtected ? 'border-blue-500/20' : 'border-slate-800';
+    const bgColor = isProtected ? 'bg-blue-950/5' : 'bg-slate-900/20';
+    const titleColor = isProtected ? 'text-blue-400' : 'text-slate-400';
+
+    return (
+        <div className={`glass rounded-2xl border ${borderColor} overflow-hidden flex flex-col ${bgColor} relative h-full`}>
+            {isProtected && (
+                <div id="upif-scan-overlay" className="absolute top-0 left-0 w-full z-10 hidden">
+                    <div className="scanner-line"></div>
+                </div>
+            )}
+
+            <div className={`bg-slate-900/50 px-4 py-3 flex items-center justify-between border-b ${borderColor}`}>
+                <div className="flex items-center gap-2">
+                    <TerminalIcon className={`w-3 h-3 ${titleColor}`} />
+                    <span className={`text-[10px] font-bold ${titleColor} uppercase tracking-widest`}>
+                        {title}
+                    </span>
+                </div>
+                <span className={`text-[10px] ${isProtected ? 'text-blue-400 font-bold' : 'text-slate-500'}`}>
+                    {isProtected ? 'DETERMINISTIC' : 'UNFILTERED'}
+                </span>
+            </div>
+
+            <div className="p-6 text-xs text-slate-400 font-mono flex-1 min-h-[180px] leading-relaxed whitespace-pre-wrap">
+                {content || <span className="text-slate-600 italic">No request processed.</span>}
+            </div>
+
+            {logs && logs.length > 0 && (
+                <div className="border-t border-slate-800 p-2 bg-black/40 text-[10px] font-mono h-24 overflow-y-auto">
+                    {logs.map((log, i) => (
+                        <div key={i} className="text-slate-500 border-b border-slate-800/50 pb-1 mb-1 last:border-0">
+                            {log}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

web_client/src/index.css

@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-brand-dark text-slate-100 antialiased;
+  }
+}
+
+.glass {
+  background: rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scanner-line {
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+  animation: scan 1.5s linear infinite;
+}
+
+@keyframes scan {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(100%); }
+}

web_client/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

web_client/tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                brand: {
+                    dark: "#020617",
+                    primary: "#3b82f6",
+                }
+            },
+            fontFamily: {
+                sans: ['Inter', 'sans-serif'],
+                mono: ['Fira Code', 'monospace'],
+            }
+        },
+    },
+    plugins: [],
+}

web_client/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

web_client/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

web_client/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

web_client/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})