# Architecture Complète: Système de Rapports Narratifs Militaires avec Garde-fous LLM et Conformité RGPD

## Architecture Technique Avancée

```mermaid
graph TB
subgraph "Couche API & Sécurité"
A[OpenRouter API] --> B[Routeur Intelligent Multi-Modèles]
B --> C[Gemma-3B]
B --> D[Mistral-24B]
B --> E[Llama-3.2-3B]
F[API Key Vault] --> B
end

subgraph "Couche Garde-fous LLM"
G[Guardrail Classification] --> H[Guardrail RGPD]
I[Guardrail Hallucinations] --> G
J[Guardrail Contextuel] --> G
K[Validation en Temps Réel] --> G
end

subgraph "Couche Mémoire & Conformité"
L[Mem0 Cloud API] --> M[Chiffrement AES-256]
N[Anonymisation RGPD] --> L
O[Journaux Audit] --> P[Blockchain Privée]
end

B --> G
G --> L
L --> Q[Base de Données Militaire Sécurisée]
```

## Implémentation Immédiate avec vos API

### 1. Configuration OpenRouter Multi-Modèles

```python
import os
from openai import OpenAI
from typing import Dict, List, Optional

class MilitaryLLMRouter:
def __init__(self):
self.client = OpenAI(
base_url="https://openrouter.ai/api/v1",
api_key="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"
)

self.models = {
"gemma": "google/gemma-3b-it:free",
"mistral": "mistralai/mistral-small-3.1-24b-instruct:free",
"llama": "meta-llama/llama-3.2-3b-instruct:free"
}

self.headers = {
"HTTP-Referer": "https://military-narrative-system.com",
"X-Title": "Military Narrative Reporting System"
}

def route_request(self, content: str, model_preference: str = "mistral") -> Dict:
"""Route vers le modèle approprié avec garde-fous intégrés"""

# Garde-fou de classification préalable
classification_result = self.classify_content(content)
if not classification_result["approved"]:
return {"error": "Classification non autorisée", "details": classification_result}

try:
completion = self.client.chat.completions.create(
extra_headers=self.headers,
model=self.models[model_preference],
messages=[
{
"role": "system",
"content": "Vous êtes un assistant militaire spécialisé dans la création de rapports narratifs. Répondez uniquement avec des informations classifiées appropriées et vérifiées."
},
{
"role": "user",
"content": content
}
],
temperature=0.1, # Faible température pour précision militaire
max_tokens=4000
)

# Validation post-génération
validation_result = self.validate_military_content(completion.choices[0].message.content)

return {
"content": completion.choices[0].message.content,
"model": model_preference,
"validation": validation_result,
"usage": completion.usage
}

except Exception as e:
return {"error": str(e), "model": model_preference}

def classify_content(self, content: str) -> Dict:
"""Garde-fou de classification militaire"""
# Implémentation simplifiée - à adapter selon vos critères
sensitive_terms = ["TOP_SECRET", "SECRET", "CONFIDENTIEL"]
detected_level = "PUBLIC"

for term in sensitive_terms:
if term in content.upper():
detected_level = term

return {
"approved": True,
"detected_level": detected_level,
"required_clearance": "CONFIDENTIEL"
}

def validate_military_content(self, content: str) -> Dict:
"""Validation post-génération des rapports"""
# Vérification des hallucinations
hallucination_score = self.detect_hallucinations(content)

# Vérification RGPD
pii_detected = self.detect_pii(content)

return {
"hallucination_score": hallucination_score,
"pii_detected": len(pii_detected),
"approved": hallucination_score < 0.3 and len(pii_detected) == 0,
"pii_entities": pii_detected
}
```

### 2. Intégration Mem0 sans IP (Solution Cloud)

```python
from mem0 import MemoryClient
import os

class SecureMilitaryMemory:
def __init__(self):
# Utilisation de l'API Mem0 Cloud - pas d'IP exposée
self.client = MemoryClient(
api_key="m0-xxxx" # À configurer via Mem0 Dashboard
)

self.config = {
"collection_name": "military_narrative_memory",
"embedding_model": "military-embeddings-v3",
"anonymization": True,
"retention_days": 365
}

def add_secure_memory(self, user_id: str, content: str, metadata: Dict) -> str:
"""Ajoute une mémoire avec chiffrement et anonymisation RGPD"""

# Anonymisation préalable
anonymized_content = self.anonymize_for_gdpr(content)

memory_id = self.client.add(
user_id=user_id,
content=anonymized_content,
metadata={
**metadata,
"classification": metadata.get('classification', 'PUBLIC'),
"timestamp": os.utcnow().isoformat(),
"anonymized": True
}
)

return memory_id

def retrieve_context(self, user_id: str, query: str, filters: Dict) -> List:
"""Récupère le contexte avec filtres de sécurité militaire"""

# Filtres de sécurité par défaut
security_filters = {
"classification": {"$lte": self.get_user_clearance(user_id)},
"access_control": {"$in": self.get_user_roles(user_id)}
}

combined_filters = {**filters, **security_filters}

results = self.client.search(
user_id=user_id,
query=query,
filters=combined_filters,
limit=10
)

return self.anonymize_results(results, user_id)

def anonymize_for_gdpr(self, content: str) -> str:
"""Anonymisation conforme RGPD"""
# Implémentation simplifiée - utiliser une bibliothèque dédiée
import re

# Masquage des noms de personnes
content = re.sub(r'\b[A-Z][a-z]+ [A-Z][a-z]+\b', '[PERSONNE]', content)

# Masquage des coordonnées
content = re.sub(r'\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b', '[IP]', content)
content = re.sub(r'\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b', '[EMAIL]', content)

return content
```

### 3. Système Complet de Garde-fous LLM

```python
class MilitaryLLMGuardrails:
def __init__(self):
self.classification_levels = {
0: "PUBLIC",
1: "RESTREINT",
2: "CONFIDENTIEL",
3: "SECRET",
4: "TOP_SECRET"
}

# Initialisation des modèles de détection
self.hallucination_detector = self.load_hallucination_model()
self.pii_detector = self.load_pii_model()

def comprehensive_check(self, content: str, user_clearance: int) -> Dict:
"""Vérification complète avec tous les garde-fous"""

results = {
"approved": True,
"checks": {},
"violations": []
}

# 1. Garde-fou de classification
classification_check = self.check_classification(content, user_clearance)
results["checks"]["classification"] = classification_check

if not classification_check["approved"]:
results["approved"] = False
results["violations"].append("CLASSIFICATION_VIOLATION")

# 2. Garde-fou d'hallucinations
hallucination_check = self.check_hallucinations(content)
results["checks"]["hallucinations"] = hallucination_check

if hallucination_check["score"] > 0.25:
results["approved"] = False
results["violations"].append("HALLUCINATION_DETECTED")

# 3. Garde-fou RGPD
gdpr_check = self.check_gdpr_compliance(content)
results["checks"]["gdpr"] = gdpr_check

if not gdpr_check["compliant"]:
results["approved"] = False
results["violations"].append("GDPR_VIOLATION")

# 4. Garde-fou contextuel militaire
context_check = self.check_military_context(content)
results["checks"]["context"] = context_check

if not context_check["valid"]:
results["approved"] = False
results["violations"].append("CONTEXT_VIOLATION")

return results

def check_classification(self, content: str, user_clearance: int) -> Dict:
"""Vérification de la classification militaire"""
# Implémentation avec modèle de classification
detected_level = self.classify_military_content(content)

if detected_level["level"] > user_clearance:
return {
"approved": False,
"detected_level": detected_level["name"],
"user_clearance": self.classification_levels.get(user_clearance, "PUBLIC"),
"message": "Niveau de classification insuffisant"
}

return {
"approved": True,
"detected_level": detected_level["name"],
"user_clearance": self.classification_levels.get(user_clearance, "PUBLIC")
}

def check_hallucinations(self, content: str) -> Dict:
"""Détection d'hallucinations avec modèle spécialisé"""
# Utilisation d'un modèle de détection d'hallucinations
hallucination_score = sel

README.md

@@ -1,10 +1,13 @@
 ---
-title: Ironchronicle
-emoji: 📉
-colorFrom: yellow
-colorTo: purple
+title: IronChronicle 🛡️
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/ops-navbar.js

@@ -0,0 +1,84 @@
+class OpsNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+                :host {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    background-color: #0f172a; /* Slate 900 */
+                    border-bottom: 1px solid #334155; /* Slate 700 */
+                    padding: 0.75rem 1.5rem;
+                    height: 64px;
+                    z-index: 50;
+                }
+                .brand {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    color: #22c55e; /* Military 500 */
+                    font-family: 'Inter', sans-serif;
+                    letter-spacing: -0.025em;
+                }
+                .brand span {
+                    color: #fff;
+                }
+                .user-profile {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+                .status-badge {
+                    font-size: 0.75rem;
+                    background: rgba(34, 197, 94, 0.1);
+                    color: #22c55e;
+                    padding: 0.25rem 0.75rem;
+                    border-radius: 9999px;
+                    border: 1px solid rgba(34, 197, 94, 0.2);
+                }
+                .avatar {
+                    width: 36px;
+                    height: 36px;
+                    border-radius: 50%;
+                    border: 2px solid #334155;
+                }
+                /* Mobile Menu Button */
+                .menu-toggle {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .menu-toggle {
+                        display: block;
+                    }
+                }
+            </style>
+            
+            <div class="brand">
+                <i data-feather="shield"></i>
+                Iron<span>Chronicle</span>
+            </div>
+
+            <div class="user-profile">
+                <div class="status-badge flex items-center gap-2">
+                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                    SECURE CONNECTION
+                </div>
+                <div class="hidden md:block text-right">
+                    <div class="text-sm font-semibold text-white">Maj. Carter</div>
+                    <div class="text-xs text-slate-400">ID: MCX-9921</div>
+                </div>
+                <img src="http://static.photos/people/200x200/1" alt="User Avatar" class="avatar">
+            </div>
+        `;
+    }
+}
+
+customElements.define('ops-navbar', OpsNavbar);

components/ops-sidebar.js

@@ -0,0 +1,122 @@
+class OpsSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+                :host {
+                    width: 250px;
+                    background-color: #020617; /* Slate 950 */
+                    border-right: 1px solid #1e293b; /* Slate 800 */
+                    display: flex;
+                    flex-direction: column;
+                    padding: 1.5rem 1rem;
+                    height: 100%;
+                    transition: transform 0.3s ease;
+                }
+                .nav-list {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                .nav-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem 1rem;
+                    border-radius: 0.5rem;
+                    color: #94a3b8; /* Slate 400 */
+                    text-decoration: none;
+                    font-weight: 500;
+                    font-size: 0.95rem;
+                    transition: all 0.2s ease;
+                    cursor: pointer;
+                }
+                .nav-item:hover {
+                    background-color: #1e293b;
+                    color: #fff;
+                }
+                .nav-item.active {
+                    background-color: #14532d; /* Military 800 with opacity */
+                    color: #22c55e;
+                    border-left: 3px solid #22c55e;
+                }
+                .nav-item i {
+                    width: 18px;
+                    height: 18px;
+                }
+                .sidebar-footer {
+                    margin-top: auto;
+                    border-top: 1px solid #1e293b;
+                    padding-top: 1rem;
+                }
+                .system-info {
+                    font-family: 'Courier Prime', monospace;
+                    font-size: 0.7rem;
+                    color: #475569;
+                }
+                
+                @media (max-width: 768px) {
+                    :host {
+                        position: absolute;
+                        z-index: 40;
+                        transform: translateX(-100%);
+                    }
+                    :host.open {
+                        transform: translateX(0);
+                    }
+                }
+            </style>
+
+            <nav class="nav-list">
+                <a href="#" class="nav-item active" data-page="dashboard">
+                    <i data-feather="grid"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="#" class="nav-item" data-page="generator">
+                    <i data-feather="file-text"></i>
+                    <span>Generator</span>
+                </a>
+                <a href="#" class="nav-item" data-page="memory">
+                    <i data-feather="database"></i>
+                    <span>Secure Memory</span>
+                </a>
+                <a href="#" class="nav-item" data-page="settings">
+                    <i data-feather="settings"></i>
+                    <span>System Config</span>
+                </a>
+            </nav>
+
+            <div class="sidebar-footer">
+                <div class="system-info">
+                    <div>SYS.VER: 4.2.0-ALPHA</div>
+                    <div>ENCRYPTION: AES-256</div>
+                    <div>NODE: EU-WEST-4</div>
+                </div>
+            </div>
+        `;
+
+        // Event Handling inside Shadow DOM for navigation
+        const links = this.shadowRoot.querySelectorAll('.nav-item');
+        links.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                // Update active class visual
+                links.forEach(l => l.classList.remove('active'));
+                link.classList.add('active');
+
+                // Dispatch custom event to main document to handle page switching
+                this.dispatchEvent(new CustomEvent('nav-change', { 
+                    detail: { page: link.getAttribute('data-page') },
+                    bubbles: true, 
+                    composed: true 
+                }));
+            });
+        });
+    }
+}
+
+customElements.define('ops-sidebar', OpsSidebar);

components/ops-status-card.js

@@ -0,0 +1,98 @@
+class OpsStatusCard extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        
+        const title = this.getAttribute('title') || 'Unknown';
+        const status = this.getAttribute('status') || 'Offline';
+        const icon = this.getAttribute('icon') || 'help-circle';
+        const color = this.getAttribute('color') || 'text-slate-400';
+        const detail = this.getAttribute('detail') || '';
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+                .card {
+                    background-color: #0f172a; /* Slate 900 */
+                    border: 1px solid #1e293b; /* Slate 800 */
+                    border-radius: 0.75rem;
+                    padding: 1.5rem;
+                    position: relative;
+                    overflow: hidden;
+                    transition: transform 0.2s, box-shadow 0.2s;
+                }
+                .card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+                    border-color: #334155;
+                }
+                .card-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: flex-start;
+                    margin-bottom: 1rem;
+                }
+                .icon-box {
+                    padding: 0.5rem;
+                    border-radius: 0.5rem;
+                    background-color: rgba(255, 255, 255, 0.05);
+                }
+                h3 {
+                    margin: 0;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    color: #94a3b8; /* Slate 400 */
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                }
+                .status-text {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #f8fafc;
+                    margin-bottom: 0.5rem;
+                }
+                .detail-text {
+                    font-size: 0.75rem;
+                    font-family: 'Courier Prime', monospace;
+                    color: #64748b;
+                }
+                /* Decorative bar */
+                .card::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    width: 4px;
+                    background-color: var(--accent-color, #64748b);
+                }
+            </style>
+
+            <div class="card" style="--accent-color: ${this.getColorValue(status)}">
+                <div class="card-header">
+                    <div>
+                        <h3>${title}</h3>
+                    </div>
+                    <div class="icon-box ${color}">
+                        <i data-feather="${icon}" class="w-5 h-5"></i>
+                    </div>
+                </div>
+                <div class="status-text">${status}</div>
+                <div class="detail-text">${detail}</div>
+            </div>
+        `;
+    }
+
+    getColorValue(status) {
+        if (status === 'Operational' || status === 'Secure' || status === 'Active' || status === 'Strict') {
+            return '#22c55e'; // Green
+        }
+        if (status === 'Warning' || status === 'Checking') {
+            return '#f59e0b'; // Amber
+        }
+        return '#ef4444'; // Red/Gray
+    }
+}
+
+customElements.define('ops-status-card', OpsStatusCard);

index.html

@@ -1,19 +1,208 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IronChronicle | Military Narrative System</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛡️</text></svg>">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        military: {
+                            50: '#f0fdf4',
+                            100: '#dcfce7',
+                            500: '#22c55e', // Primary Green
+                            600: '#16a34a',
+                            800: '#14532d',
+                            900: '#052e16',
+                            950: '#020617', // Dark BG
+                        },
+                        alert: {
+                            500: '#f59e0b', // Secondary/Warning
+                            900: '#78350f',
+                        }
+                    },
+                    fontFamily: {
+                        mono: ['"Courier Prime"', 'Courier', 'monospace'],
+                        sans: ['"Inter"', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-military-950 text-slate-300 font-sans antialiased overflow-hidden h-screen flex flex-col">
+
+    <!-- Top Navigation -->
+    <ops-navbar></ops-navbar>
+
+    <div class="flex flex-1 overflow-hidden relative">
+        <!-- Sidebar -->
+        <ops-sidebar></ops-sidebar>
+
+        <!-- Main Content Area -->
+        <main class="flex-1 overflow-y-auto bg-military-950 p-4 md:p-8 relative z-0" id="main-content">
+            
+            <!-- Dashboard View -->
+            <section id="view-dashboard" class="space-y-6 fade-in">
+                <header class="mb-8">
+                    <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2">
+                        <i data-feather="monitor" class="text-military-500"></i>
+                        System Overview
+                    </h1>
+                    <p class="text-slate-400 mt-2 font-mono text-sm">REAL-TIME MONITORING // ACTIVE GUARDRAILS</p>
+                </header>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <ops-status-card 
+                        title="OpenRouter API" 
+                        status="Operational" 
+                        icon="cpu" 
+                        color="text-blue-400"
+                        detail="Latency: 124ms"
+                    ></ops-status-card>
+                    
+                    <ops-status-card 
+                        title="Mem0 Memory" 
+                        status="Secure" 
+                        icon="database" 
+                        color="text-military-500"
+                        detail="AES-256 Encrypted"
+                    ></ops-status-card>
+
+                    <ops-status-card 
+                        title="GDPR Compliance" 
+                        status="Active" 
+                        icon="shield" 
+                        color="text-alert-500"
+                        detail="Anonymization: ON"
+                    ></ops-status-card>
+
+                    <ops-status-card 
+                        title="Guardrails" 
+                        status="Strict" 
+                        icon="check-square" 
+                        color="text-purple-400"
+                        detail="Hallucination Check: ON"
+                    ></ops-status-card>
+                </div>
+
+                <!-- Recent Activity Feed -->
+                <div class="mt-8 bg-slate-900/50 backdrop-blur border border-slate-800 rounded-lg p-6">
+                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                        <i data-feather="activity"></i> Live Audit Logs
+                    </h3>
+                    <div class="space-y-3 font-mono text-sm" id="audit-log-container">
+                        <!-- Logs injected via JS -->
+                    </div>
+                </div>
+            </section>
+
+            <!-- Report Generator View -->
+            <section id="view-generator" class="hidden space-y-6 fade-in">
+                <header class="mb-6">
+                    <h1 class="text-3xl font-bold text-white tracking-wide uppercase flex items-center gap-2">
+                        <i data-feather="edit-3" class="text-military-500"></i>
+                        Narrative Generation
+                    </h1>
+                    <p class="text-slate-400 mt-2 font-mono text-sm">SECURE INPUT // MULTI-MODEL ROUTING</p>
+                </header>
+
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Input Panel -->
+                    <div class="lg:col-span-1 space-y-4">
+                        <div class="bg-slate-900/50 border border-slate-800 p-6 rounded-lg">
+                            <label class="block text-sm font-medium text-slate-400 mb-2">Classification Level</label>
+                            <select id="classification-level" class="w-full bg-slate-950 border border-slate-700 text-white rounded p-2 focus:border-military-500 focus:outline-none">
+                                <option value="PUBLIC">PUBLIC</option>
+                                <option value="RESTREINT">RESTREINT</option>
+                                <option value="CONFIDENTIEL" selected>CONFIDENTIEL</option>
+                                <option value="SECRET">SECRET</option>
+                                <option value="TOP_SECRET">TOP SECRET</option>
+                            </select>
+                        </div>
+
+                        <div class="bg-slate-900/50 border border-slate-800 p-6 rounded-lg">
+                            <label class="block text-sm font-medium text-slate-400 mb-2">AI Model Preference</label>
+                            <div class="space-y-2">
+                                <label class="flex items-center space-x-2 cursor-pointer">
+                                    <input type="radio" name="model" value="mistral" checked class="form-radio text-military-500 bg-slate-800 border-slate-600">
+                                    <span class="text-white">Mistral Small 24B (Precise)</span>
+                                </label>
+                                <label class="flex items-center space-x-2 cursor-pointer">
+                                    <input type="radio" name="model" value="llama" class="form-radio text-military-500 bg-slate-800 border-slate-600">
+                                    <span class="text-white">Llama 3.2 3B (Fast)</span>
+                                </label>
+                                <label class="flex items-center space-x-2 cursor-pointer">
+                                    <input type="radio" name="model" value="gemma" class="form-radio text-military-500 bg-slate-800 border-slate-600">
+                                    <span class="text-white">Gemma 3B (Efficient)</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="bg-slate-900/50 border border-slate-800 p-6 rounded-lg">
+                            <label class="block text-sm font-medium text-slate-400 mb-2">Raw Intel Input</label>
+                            <textarea id="report-input" rows="8" class="w-full bg-slate-950 border border-slate-700 text-slate-300 rounded p-3 focus:border-military-500 focus:outline-none font-mono text-sm resize-none" placeholder="Paste raw data or observations here..."></textarea>
+                            <button id="generate-btn" class="w-full mt-4 bg-military-600 hover:bg-military-500 text-white font-bold py-3 px-4 rounded transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-military-900/50">
+                                <i data-feather="zap"></i> Initialize Generation
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Output Panel -->
+                    <div class="lg:col-span-2 bg-slate-900/50 border border-slate-800 rounded-lg flex flex-col h-[600px]">
+                        <div class="p-4 border-b border-slate-800 flex justify-between items-center bg-slate-900/80">
+                            <span class="text-sm font-mono text-slate-400">OUTPUT STREAM //</span>
+                            <div class="flex gap-2">
+                                <span id="guard-status" class="hidden px-2 py-1 rounded text-xs font-bold bg-yellow-900/50 text-yellow-400 border border-yellow-700/50 animate-pulse">CHECKING GUARDRAILS...</span>
+                            </div>
+                        </div>
+                        
+                        <div id="output-container" class="flex-1 p-6 overflow-y-auto font-mono text-sm leading-relaxed text-slate-300">
+                            <div class="text-slate-600 italic flex flex-col items-center justify-center h-full">
+                                <i data-feather="terminal" class="w-12 h-12 mb-4 opacity-50"></i>
+                                <p>System Ready. Awaiting input...</p>
+                            </div>
+                        </div>
+
+                        <!-- Result Footer -->
+                        <div id="result-footer" class="hidden p-4 border-t border-slate-800 bg-slate-900/80">
+                            <div class="flex justify-between items-center text-xs font-mono">
+                                <div class="flex gap-4">
+                                    <span class="text-green-400">PII: <span id="res-pii">None</span></span>
+                                    <span class="text-blue-400">Hallucination: <span id="res-hallucination">0.02</span></span>
+                                </div>
+                                <button class="text-military-500 hover:text-white flex items-center gap-1">
+                                    <i data-feather="save"></i> Save to Memory
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"></div>
+
+    <!-- Web Components Scripts -->
+    <script src="components/ops-navbar.js"></script>
+    <script src="components/ops-sidebar.js"></script>
+    <script src="components/ops-status-card.js"></script>
+    <script src="components/ops-modal.js"></script>
+
+    <!-- Main Logic -->
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,178 @@
+/**
+ * IronChronicle Main Logic
+ * Handles routing, state management, and API simulation.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    
+    // --- Navigation Logic ---
+    const navLinks = document.querySelectorAll('.nav-link');
+    const views = {
+        'dashboard': document.getElementById('view-dashboard'),
+        'generator': document.getElementById('view-generator')
+    };
+
+    navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const target = link.getAttribute('data-page');
+            
+            // Update Active State
+            navLinks.forEach(l => l.classList.remove('text-military-500', 'bg-slate-800'));
+            navLinks.forEach(l => l.classList.add('text-slate-400', 'hover:bg-slate-800'));
+            link.classList.remove('text-slate-400', 'hover:bg-slate-800');
+            link.classList.add('text-military-500', 'bg-slate-800');
+
+            // Switch View
+            Object.values(views).forEach(view => view.classList.add('hidden'));
+            views[target].classList.remove('hidden');
+            
+            // Trigger re-anim
+            views[target].classList.remove('fade-in');
+            void views[target].offsetWidth; // trigger reflow
+            views[target].classList.add('fade-in');
+        });
+    });
+
+    // --- Audit Log Simulation ---
+    const logContainer = document.getElementById('audit-log-container');
+    const mockLogs = [
+        { time: '08:42:11', event: 'USER_LOGIN', user: 'Cmdr. Shepard', status: 'SUCCESS' },
+        { time: '08:45:03', event: 'MEMORY_WRITE', user: 'System', status: 'ENCRYPTED' },
+        { time: '08:50:22', event: 'GUARDRAIL_CHECK', user: 'AI_Model_Gemma', status: 'PASSED' },
+        { time: '09:12:44', event: 'REPORT_GENERATE', user: 'Lt. Ripley', status: 'APPROVED' }
+    ];
+
+    function renderLogs() {
+        logContainer.innerHTML = mockLogs.map(log => `
+            <div class="flex items-center justify-between p-2 bg-slate-950/50 rounded border-l-2 ${log.status === 'SUCCESS' || log.status === 'APPROVED' || log.status === 'ENCRYPTED' ? 'border-green-500' : 'border-yellow-500'}">
+                <span class="text-slate-500">[${log.time}]</span>
+                <span class="text-slate-300 font-bold flex-1 ml-4">${log.event}</span>
+                <span class="text-slate-400 mr-4">${log.user}</span>
+                <span class="text-xs ${log.status.includes('PASS') || log.status.includes('SUCCESS') ? 'text-green-400' : 'text-yellow-400'}">${log.status}</span>
+            </div>
+        `).join('');
+    }
+    renderLogs();
+
+    // --- Report Generation Simulation ---
+    const generateBtn = document.getElementById('generate-btn');
+    const inputArea = document.getElementById('report-input');
+    const outputContainer = document.getElementById('output-container');
+    const guardStatus = document.getElementById('guard-status');
+    const resultFooter = document.getElementById('result-footer');
+    
+    // Stats
+    const resPii = document.getElementById('res-pii');
+    const resHallucination = document.getElementById('res-hallucination');
+
+    generateBtn.addEventListener('click', async () => {
+        const inputText = inputArea.value.trim();
+        if(!inputText) {
+            showToast('Input required. Please enter raw intel.', 'error');
+            return;
+        }
+
+        // UI Loading State
+        generateBtn.disabled = true;
+        generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Processing...';
+        feather.replace();
+        outputContainer.innerHTML = ''; // Clear previous
+        
+        // Step 1: Guardrails Simulation (Visual feedback)
+        guardStatus.classList.remove('hidden');
+        guardStatus.innerText = "CHECKING CLASSIFICATION...";
+        
+        await wait(800);
+        guardStatus.innerText = "SCANNING PII & GDPR...";
+        guardStatus.className = "px-2 py-1 rounded text-xs font-bold bg-blue-900/50 text-blue-400 border border-blue-700/50 animate-pulse";
+
+        await wait(1000);
+        guardStatus.innerText = "RUNNING HALLUCINATION DETECTION...";
+        guardStatus.className = "px-2 py-1 rounded text-xs font-bold bg-purple-900/50 text-purple-400 border border-purple-700/50 animate-pulse";
+
+        await wait(1200);
+
+        // Step 2: Generation Simulation
+        guardStatus.classList.add('hidden');
+        resultFooter.classList.add('hidden');
+        
+        const reportText = `CLASSIFIED REPORT // GENERATED AT ${new Date().toLocaleTimeString()}\n\nBased on the provided intel, the operational situation in sector 7G indicates heightened activity. The 3rd Battalion has secured the perimeter, but reconnaissance drones have detected irregular movement patterns consistent with guerrilla tactics.\n\nRECOMMENDATIONS:\n1. Increase surveillance frequency.\n2. Deploy counter-sniper teams to vantage points Alpha and Bravo.\n3. Secure supply lines via Route 66.\n\nNote: Civilian presence detected within the exclusion zone. Coordinates logged and forwarded to Command.`;
+
+        // Typewriter effect
+        outputContainer.innerHTML = '<div class="typing-cursor text-military-500"></div>';
+        const cursor = outputContainer.querySelector('.typing-cursor');
+        let i = 0;
+        
+        const typeInterval = setInterval(() => {
+            cursor.textContent = reportText.substring(0, i);
+            i++;
+            if (i > reportText.length) {
+                clearInterval(typeInterval);
+                finalizeReport();
+            }
+            // Auto scroll
+            outputContainer.scrollTop = outputContainer.scrollHeight;
+        }, 20); // Speed of typing
+
+        function finalizeReport() {
+            generateBtn.disabled = false;
+            generateBtn.innerHTML = '<i data-feather="zap"></i> Initialize Generation';
+            feather.replace();
+            
+            // Show footer stats
+            resultFooter.classList.remove('hidden');
+            
+            // Random stats for demo
+            const pii = Math.random() > 0.8 ? "1 Name Redacted" : "None";
+            const hallScore = (Math.random() * 0.1).toFixed(3);
+            
+            resPii.textContent = pii;
+            resPii.className = pii === "None" ? "text-green-400" : "text-alert-500";
+            
+            resHallucination.textContent = hallScore;
+
+            // Add to logs
+            mockLogs.unshift({
+                time: new Date().toLocaleTimeString(),
+                event: 'REPORT_GEN_SUCCESS',
+                user: 'CurrentUser',
+                status: 'VERIFIED'
+            });
+            renderLogs();
+            
+            showToast('Narrative report generated successfully.', 'success');
+        }
+    });
+
+    function wait(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    // --- Toast System ---
+    window.showToast = function(message, type = 'info') {
+        const container = document.getElementById('toast-container');
+        const toast = document.createElement('div');
+        
+        let colors = type === 'success' ? 'bg-military-600 border-green-400' : 
+                     type === 'error' ? 'bg-red-900/90 border-red-500' : 
+                     'bg-slate-800 border-slate-500';
+        
+        let icon = type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info';
+
+        toast.className = `toast flex items-center gap-3 px-4 py-3 rounded shadow-lg border-l-4 ${colors} text-white min-w-[300px] backdrop-blur-sm`;
+        toast.innerHTML = `
+            <i data-feather="${icon}" class="w-5 h-5"></i>
+            <span class="text-sm font-medium">${message}</span>
+        `;
+
+        container.appendChild(toast);
+        feather.replace();
+
+        setTimeout(() => {
+            toast.style.opacity = '0';
+            toast.style.transform = 'translateY(100%)';
+            setTimeout(() => toast.remove(), 300);
+        }, 4000);
+    };
+});

style.css

@@ -1,28 +1,111 @@
+/* Custom Styles & Utilities */
+
+:root {
+    --glass-bg: rgba(15, 23, 42, 0.6);
+    --glass-border: rgba(51, 65, 85, 0.5);
+    --neon-green: #22c55e;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    background-color: #020617; /* Slate 950 */
+    color: #cbd5e1; /* Slate 300 */
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #0f172a; 
+}
+::-webkit-scrollbar-thumb {
+    background: #334155; 
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #475569; 
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+@keyframes scanline {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(100%); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.scanline::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+    z-index: 2;
+    background-size: 100% 2px, 3px 100%;
+    pointer-events: none;
+}
+
+/* Glassmorphism Utilities */
+.glass-panel {
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+}
+
+/* Typography Enhancements */
+.font-tech {
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+/* Custom Button Effects */
+.btn-glitch {
+    position: relative;
+    overflow: hidden;
+}
+.btn-glitch::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: 0.5s;
+}
+.btn-glitch:hover::after {
+    left: 100%;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Loader */
+.typing-cursor::after {
+    content: '▋';
+    animation: blink 1s step-start infinite;
+    color: var(--neon-green);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes blink {
+    50% { opacity: 0; }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Toast Notification */
+.toast {
+    transform: translateX(100%);
+    animation: slideIn 0.3s forwards;
 }
+@keyframes slideIn {
+    to { transform: translateX(0); }
+}