docs: add training metrics, wheel SVG, and legacy docs

docs/README_legacy.md

@@ -0,0 +1,10 @@
+# Project Mahoraga
+
+This is a controlled reinforcement learning environment designed to demonstrate adaptive intelligence via a resistance trade-off system. 
+
+## Project Structure
+
+- `env/`: Contains the core logic for the environment, state handling, enemy behavior, and mechanics.
+- `utils/`: Contains constants and validators for actions.
+- `tests/`: Contains manual basic sanity tests to verify correct environment behavior.
+- `main.py`: Entry point to run a single manual episode with random actions.

docs/SYSTEM_REPORT.md

@@ -0,0 +1,429 @@
+# Project Mahoraga — Complete System Report
+
+> **Version**: 1.0 (Post-Merge)
+> **Branch**: `main` (fully merged from `phase1-env-setup`)
+> **Tests**: 143/143 passing
+> **Date**: 2026-04-25
+
+---
+
+## 1. Project Overview
+
+**Project Mahoraga** is a reinforcement learning environment where an AI agent ("Mahoraga") learns adaptive combat through a resistance trade-off system. Named after Jujutsu Kaisen's Mahoraga — a shikigami that adapts to any attack — the system trains an LLM (Qwen 2.5 3B) to make tactical decisions in a turn-based combat loop.
+
+**Core Loop**: `Observe → Adapt → Accumulate → Punish`
+
+The agent must:
+1. Observe enemy attack patterns
+2. Build resistance to the correct attack category
+3. Accumulate adaptation stacks
+4. Execute Judgment Strike for burst damage at the right moment
+
+**This is NOT a game.** It is a clean, testable RL environment designed for LLM fine-tuning via reward-weighted SFT.
+
+---
+
+## 2. Architecture Breakdown
+
+```
+project_mahoraga/
+├── env/
+│   ├── mahoraga_env.py      # Main environment orchestrator
+│   ├── mechanics.py         # Resistance, damage, action math
+│   ├── enemy.py             # CurriculumEnemy (3-phase AI)
+│   ├── rewards.py           # 6-component composable reward system
+│   ├── state.py             # State dict builder
+│   └── gym_wrapper.py       # Gymnasium-compatible wrapper
+├── utils/
+│   ├── constants.py         # All game constants and mappings
+│   └── validators.py        # Action validation
+├── tests/
+│   ├── test_env.py          # 110 core tests
+│   └── test_gym_wrapper.py  # 33 wrapper tests
+├── notebooks/
+│   ├── mahoraga_training.py     # Training notebook (source)
+│   └── mahoraga_training.ipynb  # Training notebook (Kaggle)
+├── scripts/
+│   └── random_agent_gym.py  # Random agent demo
+├── app.py                   # Gradio interactive UI
+├── main.py                  # CLI episode runner
+└── README.md
+```
+
+### Module Details
+
+#### `env/mahoraga_env.py` — Environment Orchestrator
+- `MahoragaEnv(debug=False)` — main class
+- `reset()` → returns state dict
+- `step(action)` → returns `(state, reward, done, info)`
+- Coordinates enemy attacks, agent actions, reward computation
+- Tracks: HP, resistances, adaptation stack, heal cooldown, last adapted category
+
+#### `env/mechanics.py` — Core Math
+- `new_resistances()` — creates `{PHYSICAL: 0, CE: 0, TECHNIQUE: 0}`
+- `apply_resistance_change(res, type)` — +40 target, -20 others, clamp [0,80]
+- `compute_enemy_damage(category, res, ignore_armor)` — damage formula
+- `compute_judgment_damage(last_adapted, enemy_cat)` — adaptation-match burst
+- `apply_action_effects(...)` — dispatches action 0-4
+- `check_correct_adaptation(action, category)` — validates adaptation
+
+#### `env/enemy.py` — CurriculumEnemy
+- Single `CurriculumEnemy` class with 3-phase behavior
+- `get_attack(turn_number, resistances)` → `{category, subtype, damage, ignore_armor}`
+- Phase selection based on turn number
+
+#### `env/rewards.py` — Composable Rewards
+- 6 independent functions + 1 aggregator
+- Returns dict, NOT a single scalar
+- `compute_rewards(info, state, action, done)` → dict
+
+#### `env/state.py` — State Builder
+- Converts internal uppercase keys to lowercase for RL observation
+- `build_state_dict(...)` → dict with 7 keys
+
+#### `env/gym_wrapper.py` — Gymnasium Interface
+- `MahoragaGymEnv(gym.Env)` wraps `MahoragaEnv`
+- `Discrete(5)` action space, `Dict` observation space
+- Encodes categoricals to integers for neural networks
+
+#### `app.py` — Gradio UI
+- Interactive combat arena with 5 action buttons
+- Displays HP, resistances, stack, cooldown, combat log
+- Launch: `python app.py`
+
+---
+
+## 3. Core Mechanics
+
+### Resistance System
+Three categories: **PHYSICAL**, **CE**, **TECHNIQUE**. Range: [0, 80].
+
+When agent adapts to a category:
+- Target category: **+40**
+- Other categories: **-20**
+- All clamped to [0, 80]
+
+Higher resistance = less damage from that category.
+
+### Action Space (0–4)
+
+| Action | Name | Effect |
+|--------|------|--------|
+| 0 | Adapt PHYSICAL | +40 PHYSICAL res, -20 others |
+| 1 | Adapt CE | +40 CE res, -20 others |
+| 2 | Adapt TECHNIQUE | +40 TECHNIQUE res, -20 others |
+| 3 | Judgment Strike | Deal damage, consume stacks, reset res |
+| 4 | Regeneration | +300 HP, 3-turn cooldown |
+
+### Adaptation Stack
+- +1 when agent correctly adapts to current enemy attack category
+- Consumed by Judgment Strike: each stack adds +50 damage
+- Reset to 0 after Judgment Strike
+
+### Judgment Strike Logic
+**Condition**: Burst (350 dmg) if `last_adapted_category == current_enemy_category`
+**Otherwise**: Base (100 dmg)
+**Total**: `burst_or_base + (stacks × 50)`
+**After**: Resistances reset to 0, stacks reset to 0
+
+### Heal Cooldown
+- Heals +300 HP (capped at MAX_HP=1200)
+- 3-turn cooldown after use
+- Does NOT reset resistances
+- If used while on cooldown → wasted turn (action nullified)
+
+### Damage Formula
+```
+resistance = category_resistance
+if ignore_armor:
+    resistance = resistance × 0.8    # 20% bypass (PIERCE only)
+damage = base_damage × (1 - resistance / 100)
+```
+
+### HP Configuration
+| Entity | HP |
+|--------|----|
+| Agent (Mahoraga) | 1200 |
+| Enemy | 1000 |
+
+---
+
+## 4. Enemy System — CurriculumEnemy
+
+Three-phase curriculum designed for progressive learning:
+
+### Phase 1: Tutorial (Turns 1–5)
+- Always attacks with **PHYSICAL**
+- Agent learns basic adaptation against a single category
+- Predictable — builds confidence
+
+### Phase 2: Pattern (Turns 6–15)
+- Cycles: **PHYSICAL → CE → TECHNIQUE**
+- 15% random injection (picks random category instead of pattern)
+- Agent learns to predict cycling patterns and handle surprises
+
+### Phase 3: Adaptive (Turns 16–25)
+- **Targets the agent's lowest resistance category**
+- Reads `resistances` dict, picks `min(resistances, key=resistances.get)`
+- Agent must learn balanced defense or get exploited
+- If no resistances provided, falls back to random
+
+### Subtypes
+Each category has 3 subtypes (visual/variation only):
+
+| Category | Subtypes |
+|----------|----------|
+| PHYSICAL | SLASH, IMPACT, **PIERCE** |
+| CE | BLAST, WAVE, BEAM |
+| TECHNIQUE | SPIKE, DELAYED, PATTERN |
+
+**PIERCE** is special: `ignore_armor=True` → bypasses 20% of resistance.
+
+### Attack Dict Schema (LOCKED)
+```python
+{
+    "category": "PHYSICAL" | "CE" | "TECHNIQUE",
+    "subtype": "SLASH" | "IMPACT" | ... ,
+    "damage": int,
+    "ignore_armor": bool
+}
+```
+
+---
+
+## 5. Reward System
+
+Six independent components computed per step. Final reward = sum of all components.
+
+| Component | Formula | Purpose | Typical Range |
+|-----------|---------|---------|---------------|
+| **Survival** | `-(damage_taken / 100)` | Penalize taking damage | [-2.2, 0] |
+| **Combat** | `+(damage_dealt / 100)` | Reward dealing damage | [0, 4.5] |
+| **Adaptation** | `+1.5` if correct, else `0` | **Strongest signal** — correct resistance match | {0, 1.5} |
+| **Anti-Cowardice** | `-1.0` if heal at >70% HP | Prevent heal spam exploit | {-1.0, 0} |
+| **Efficiency** | `+0.5` if damage >= 200 | Encourage big hits | {0, 0.5} |
+| **Terminal** | `+5.0` win / `-5.0` loss | Strong episode-end signal | {-5.0, 0, 5.0} |
+
+### Why Each Exists
+- **Survival**: Without it, agent ignores defense
+- **Combat**: Without it, agent never attacks
+- **Adaptation**: Core learning signal — the entire point of Mahoraga
+- **Anti-Cowardice**: Agent discovers healing is "safe" and spams it; this prevents that
+- **Efficiency**: Encourages building stacks before striking instead of weak Judgments
+- **Terminal**: Large signal at episode boundary for credit assignment
+
+### Reward Breakdown
+Every `step()` returns `info["reward_breakdown"]` with all 6 components as a dict. This is critical for debugging and analysis.
+
+---
+
+## 6. Training Pipeline
+
+### Model: Qwen 2.5 3B Instruct (via Unsloth)
+- 4-bit quantized loading
+- LoRA: r=16, targets q/k/v/o_proj, no bias
+- max_seq_length: 1024
+
+### Prompt Design
+```
+You are Mahoraga, an adaptive combat agent...
+Current State: HP, resistances, last attack, turn
+Available Actions: 0-4 with descriptions + strategy hints
+→ Return ONLY a single integer (0-4)
+```
+
+### Rollout Loop
+1. Reset env
+2. For each turn: build prompt → generate → parse action → env.step()
+3. Collect trajectory: `{prompt, response, action, reward, state, info}`
+4. Track: total reward, correct adaptation rate, win/loss
+
+### Reward-Weighted SFT (GRPO-style)
+Instead of PPO (complex, unstable on T4s), uses reward-weighted supervised fine-tuning:
+- Collect episodes with current model
+- Weight actions by reward: **>1.0 → 3 copies**, **>0 → 2**, **>-1.5 → 1**, **else → skip**
+- Fine-tune via SFTTrainer on weighted dataset
+- Repeat for N iterations
+
+### Training Loop
+```
+for iteration in range(5):
+    episodes = collect_episodes(10)
+    dataset = reward_weight(episodes)
+    sft_train(model, dataset)
+    save_checkpoint()
+    log_metrics()
+```
+
+### Checkpoints & Metrics
+- LoRA weights saved per iteration: `/kaggle/working/checkpoints/iteration_N/`
+- Metrics JSON: avg_reward, win_rate, avg_steps, adapt_rate
+- Plot: 3-panel chart (reward, win rate, adaptation rate vs iteration)
+
+---
+
+## 7. UI System (Gradio)
+
+### Structure
+- 5 action buttons (Adapt×3, Judgment, Heal) + Reset
+- Two columns: Agent stats (HP, resistances, stack, cooldown) | Enemy stats (HP, turn, reward)
+- Monospace combat log
+
+### State Mapping
+UI reads directly from `MahoragaEnv` instance — no intermediary layer.
+
+### Log Format
+```
+Turn X:
+  Enemy:
+    → [Subtype] ([Category])
+  Mahoraga:
+    → [Action]
+  Result:
+    → Damage: Y | Correct Adaptation: YES/NO | Stack: Z
+    → Reward: R.RR
+```
+
+---
+
+## 8. Data Flow
+
+```
+┌─────────┐    ┌──────────┐    ┌───────��    ┌────────┐    ┌─────┐
+│  State   │───▶│  Prompt  │───▶│ Model │───▶│ Action │───▶│ Env │
+│  Dict    │    │ Builder  │    │ (LLM) │    │ Parser │    │     │
+└─────────┘    └──────────┘    └───────┘    └────────┘    └──┬──┘
+                                                             │
+     ┌───────────────────────────────────────────────────────┘
+     │
+     ▼
+┌──────────┐    ┌──────────┐    ┌──────────────┐
+│ Rewards  │───▶│ Dataset  │───▶│ SFT Trainer  │
+│ (6 comp) │    │ (weight) │    │ (LoRA update)│
+└──────────┘    └──────────┘    └──────────────┘
+```
+
+1. **State** → 7-key dict (HP, resistances, last attack, turn, etc.)
+2. **Prompt** → Natural language with state + action descriptions
+3. **Model** → Generates single integer 0-4
+4. **Parser** → Extracts int, fallback to 0
+5. **Env** → Applies action, computes damage, checks termination
+6. **Rewards** → 6 independent components, summed to scalar
+7. **Dataset** → High-reward actions duplicated, low-reward filtered
+8. **Training** → SFT on weighted dataset updates LoRA weights
+
+---
+
+## 9. Key Design Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| **Unified schema** (`category/damage/ignore_armor`) | Two teams used different field names; unified to prevent silent bugs |
+| **CurriculumEnemy** | Progressive difficulty prevents early collapse; Phase 3 forces balanced play |
+| **Adaptation-match Judgment** | Old threshold-based burst was exploitable; matching requires tactical awareness |
+| **Composable rewards (NOT monolithic)** | Debugging, tuning, and analysis require visibility into individual signals |
+| **Reward-weighted SFT over PPO** | PPO on T4 GPUs with LLMs is unstable; GRPO-style SFT is simpler and proven |
+| **Asymmetric HP (1200 vs 1000)** | Slight agent advantage encourages exploration; symmetric HP led to agent always losing |
+| **Heal does NOT reset resistances** | Prevents heal+reset exploit that nullifies adaptation investment |
+
+---
+
+## 10. Known Risks / Edge Cases
+
+| Risk | Description | Mitigation |
+|------|-------------|------------|
+| **Reward imbalance** | Adaptation (+1.5) may dominate over combat signals | Monitor adapt_rate; if >80%, reduce adaptation reward |
+| **Over-adaptation** | Agent may only adapt, never attack | Terminal reward (-5.0 loss) penalizes passive play |
+| **Phase 3 exploit** | Agent could learn to keep all resistances equal to confuse Phase 3 | Phase 3 picks min, so equal res still gets attacked |
+| **Training instability** | SFT on small datasets can overfit | Use gradient accumulation, low LR (2e-5), 1 epoch per iter |
+| **Heal spam** | Agent learns heal is safe | Anti-cowardice penalty (-1.0) + cooldown (3 turns) |
+| **Wasted turns** | Heal on cooldown wastes a turn | Action nullified, no positive rewards possible |
+| **PIERCE bypass** | 20% resistance bypass can surprise agent | Only 1/3 chance of PIERCE subtype, negligible long-term |
+| **Zero reward on notebook** | Cloning wrong branch (main vs phase1-env-setup) | Notebook has `--branch phase1-env-setup` + assertion check |
+
+---
+
+## 11. How to Run
+
+### Local Environment
+```bash
+cd project_mahoraga
+python main.py                  # Run random episode
+python tests/test_env.py        # Run 110 core tests
+python tests/test_gym_wrapper.py  # Run 33 gym tests
+```
+
+### Gradio UI
+```bash
+cd project_mahoraga
+python app.py                   # Opens browser at localhost:7860
+```
+
+### Kaggle Training
+1. Upload `notebooks/mahoraga_training.ipynb` to Kaggle
+2. Enable **GPU** (2× T4)
+3. Run all 14 cells in order
+4. Model saves to `/kaggle/working/mahoraga_lora_final`
+
+### Debug Mode
+```python
+env = MahoragaEnv(debug=True)
+# Prints reward breakdown every step
+```
+
+---
+
+## 12. Future Improvements
+
+| Area | Improvement | Effort |
+|------|-------------|--------|
+| **Training** | Replace reward-weighted SFT with true GRPO/PPO | High |
+| **Enemy** | Add Phase 4: combo attacks (multi-type per turn) | Medium |
+| **Enemy** | Better randomness model (Markov chain instead of uniform) | Medium |
+| **Rewards** | Dynamic reward scaling based on training progress | Medium |
+| **Multi-agent** | Two Mahoraga agents competing | High |
+| **Observation** | Add enemy history buffer (last N attacks) to state | Low |
+| **UI** | Add resistance bar charts, HP progress graphs | Low |
+| **Eval** | Automated benchmark suite (win rate vs each phase) | Medium |
+| **Deploy** | HuggingFace Spaces deployment for Gradio UI | Low |
+
+---
+
+## 13. Git History
+
+```
+ec92cdd MERGE: Unified schema, CurriculumEnemy, Gradio UI
+c8f2f7c CRITICAL FIX: Clone correct branch + debug mode
+cfb710a Phase 5: Kaggle training notebook
+e9f91da Phase 4: Gymnasium wrapper
+fd4d842 Phase 3: Composable reward system
+b27a5b7 Phase 2: Enemy subtypes
+5ed57fe Patch: Judgment/heal/HP fixes
+832e7c6 Phase 1: Core environment
+22712d1 Initial commit
+```
+
+---
+
+## 14. Constants Reference
+
+```python
+MAX_HP = 1200           # Agent HP
+ENEMY_HP = 1000         # Enemy HP
+MAX_TURNS = 25
+ADAPT_INCREASE = 40     # Resistance gain on adapt
+ADAPT_DECREASE = 20     # Resistance loss on others
+RESISTANCE_MAX = 80
+JUDGMENT_BASE_DAMAGE = 100
+JUDGMENT_BURST_DAMAGE = 350
+HEAL_AMOUNT = 300
+HEAL_COOLDOWN = 3
+ARMOR_BYPASS_RATIO = 0.2  # PIERCE effect
+PHASE_1_END = 5
+PHASE_2_END = 15
+PHASE_2_DEVIATION = 0.15
+```
+
+---
+
+*This report is a complete knowledge transfer document. A new engineer or AI model should be able to understand, modify, and extend the system using only this document and the source code.*

docs/stitch_aero_dashboard.html

@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Combat Dashboard - Aero-Tactical</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-dim": "#0b1120",
+                        "secondary-container": "#1e293b",
+                        "primary-container": "#1e3a8a",
+                        "on-secondary-container": "#cbd5e1",
+                        "surface-variant": "#1e293b",
+                        "on-background": "#f8fafc",
+                        "surface-container-lowest": "#020617",
+                        "on-secondary": "#020617",
+                        "on-tertiary-fixed": "#020617",
+                        "inverse-surface": "#f8fafc",
+                        "on-tertiary": "#020617",
+                        "primary-fixed-dim": "#3b82f6",
+                        "surface-tint": "#0ea5e9",
+                        "surface": "#0f172a",
+                        "on-tertiary-fixed-variant": "#020617",
+                        "tertiary-fixed-dim": "#1e293b",
+                        "on-error": "#020617",
+                        "inverse-on-surface": "#020617",
+                        "secondary-fixed-dim": "#64748b",
+                        "on-secondary-fixed-variant": "#020617",
+                        "on-primary-fixed": "#020617",
+                        "tertiary-fixed": "#334155",
+                        "inverse-primary": "#1e3a8a",
+                        "on-primary-container": "#dbeafe",
+                        "tertiary-container": "#1e293b",
+                        "secondary": "#64748b",
+                        "tertiary": "#94a3b8",
+                        "on-primary-fixed-variant": "#020617",
+                        "on-error-container": "#fecaca",
+                        "surface-container-low": "#0b1120",
+                        "on-surface-variant": "#94a3b8",
+                        "surface-bright": "#1e293b",
+                        "secondary-fixed": "#94a3b8",
+                        "surface-container-highest": "#334155",
+                        "on-surface": "#f8fafc",
+                        "primary": "#00f6ff",
+                        "background": "#0b1120",
+                        "on-primary": "#000000",
+                        "outline-variant": "#334155",
+                        "error-container": "#7f1d1d",
+                        "outline": "#475569",
+                        "on-secondary-fixed": "#020617",
+                        "error": "#f87171",
+                        "surface-container": "#0f172a",
+                        "on-tertiary-container": "#00f6ff",
+                        "primary-fixed": "#bfdbfe",
+                        "surface-container-high": "#1e293b"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "gutter": "20px",
+                        "sm": "8px",
+                        "lg": "24px",
+                        "xl": "40px",
+                        "unit": "4px",
+                        "margin": "32px",
+                        "md": "16px",
+                        "xs": "4px"
+                    },
+                    "fontFamily": {
+                        "body-md": ["Inter"],
+                        "label-caps": ["Inter"],
+                        "mono-data": ["monospace"],
+                        "display": ["Inter"],
+                        "h1": ["Inter"],
+                        "h2": ["Inter"],
+                        "body-lg": ["Inter"]
+                    },
+                    "fontSize": {
+                        "body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
+                        "label-caps": ["12px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600" }],
+                        "mono-data": ["14px", { "lineHeight": "1.4", "fontWeight": "500" }],
+                        "display": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
+                        "h1": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600" }],
+                        "h2": ["24px", { "lineHeight": "1.3", "fontWeight": "600" }],
+                        "body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .glass-panel {
+            background-color: rgba(15, 23, 42, 0.65);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    </style>
+<style>
+@keyframes mahoraga-click {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(45deg); }
+}
+.animate-mahoraga-click {
+    animation: mahoraga-click 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+.mahoraga-wheel-spoke {
+    transform-origin: center;
+}
+</style></head>
+<body class="bg-background text-on-background font-body-md text-body-md antialiased overflow-x-hidden">
+<!-- TopAppBar -->
+<header class="fixed top-0 w-full z-50 border-b border-slate-700/50 bg-[#0b1120]/80 backdrop-blur-md text-slate-300 shadow-none flex justify-between items-center h-14 px-8 max-w-full">
+<div class="flex items-center gap-4">
+<span class="text-lg font-black tracking-tighter text-slate-100 uppercase">AERO-TACTICAL</span>
+</div>
+<div class="flex items-center gap-6">
+<div class="flex items-center gap-4 font-inter text-xs tracking-widest uppercase font-semibold text-slate-400">
+<button class="hover:bg-slate-800/50 transition-colors p-2 rounded-DEFAULT"><span class="material-symbols-outlined">notifications_active</span></button>
+<button class="hover:bg-slate-800/50 transition-colors p-2 rounded-DEFAULT"><span class="material-symbols-outlined">settings</span></button>
+<button class="hover:bg-slate-800/50 transition-colors p-2 rounded-DEFAULT"><span class="material-symbols-outlined">account_circle</span></button>
+</div>
+<button class="bg-primary text-on-primary font-label-caps text-label-caps px-4 py-2 rounded-DEFAULT hover:opacity-90 transition-opacity">
+                SYSTEM READY
+            </button>
+</div>
+</header>
+<!-- SideNavBar -->
+<nav class="hidden md:flex fixed left-0 top-0 h-screen w-64 border-r border-slate-700/50 bg-[#0b1120]/90 backdrop-blur-xl flex-col py-20 px-4 z-40">
+<div class="mb-8 px-4">
+<h2 class="text-xl font-bold text-slate-100 tracking-tight">STRAT-COM</h2>
+<p class="font-inter text-sm tracking-tight text-slate-400 mt-1">Sector 7G - Active</p>
+</div>
+<button class="bg-surface-tint text-on-primary font-label-caps text-label-caps w-full py-3 rounded-DEFAULT mb-8 hover:opacity-90 transition-opacity">
+            NEW DEPLOYMENT
+        </button>
+<div class="flex-1 flex flex-col gap-2">
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">radar</span> Tactical Map
+            </a>
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">hub</span> Fleet Comms
+            </a>
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">inventory_2</span> Logistics
+            </a>
+<a class="bg-slate-800 text-[#00f6ff] border-l-2 border-[#00f6ff] font-medium px-4 py-3 flex items-center gap-3 transition-all rounded-r-DEFAULT translate-x-1 font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">videocam</span> Surveillance
+            </a>
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">analytics</span> Mission Intel
+            </a>
+</div>
+<div class="mt-auto flex flex-col gap-2 border-t border-slate-700/50 pt-4">
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">help</span> Support
+            </a>
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight" href="#">
+<span class="material-symbols-outlined">keyboard</span> Terminal
+            </a>
+<a class="text-slate-400 px-4 py-3 flex items-center gap-3 hover:bg-slate-800 transition-all rounded-DEFAULT font-inter text-sm tracking-tight mt-4 text-error" href="#">
+<span class="material-symbols-outlined">logout</span> Log Out
+            </a>
+</div>
+</nav>
+<!-- Main Content Canvas -->
+<main class="pt-20 md:pl-72 pr-8 pb-12 min-h-screen">
+<div class="max-w-7xl mx-auto space-y-gutter">
+<!-- Header Section -->
+<div class="flex justify-between items-end mb-margin">
+<div>
+<h1 class="font-h1 text-h1 text-on-surface">Surveillance Feed</h1>
+<p class="font-body-md text-body-md text-on-surface-variant mt-2">Monitoring Subject Alpha engagement parameters.</p>
+</div>
+<div class="text-right">
+<span class="font-label-caps text-label-caps text-on-tertiary-container uppercase block mb-1">Status</span>
+<span class="font-mono-data text-mono-data text-on-surface bg-surface-container px-3 py-1 rounded-DEFAULT border border-outline-variant">ACTIVE ENGAGEMENT</span>
+</div>
+</div>
+<!-- Bento Grid Layout -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
+<!-- Target Status (Span 8) -->
+<div class="lg:col-span-8 glass-panel rounded-xl p-lg flex flex-col">
+<div class="flex justify-between items-center mb-6 border-b border-outline-variant/30 pb-4">
+<h2 class="font-h2 text-h2 text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-outline">target</span> Target Status: Enemy
+                        </h2>
+<span class="font-mono-data text-mono-data text-outline">ID: E-9942</span>
+</div>
+<div class="flex-1 flex flex-col justify-center gap-6">
+<div class="flex items-center justify-between">
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase">Structural Integrity</span>
+<span class="font-mono-data text-mono-data text-on-surface">42.8%</span>
+</div>
+<div class="w-full bg-surface-container-high h-2 rounded-full overflow-hidden">
+<div class="bg-primary h-full rounded-full" style="width: 42.8%;"></div>
+</div>
+<div class="grid grid-cols-3 gap-4 mt-4">
+<div class="bg-surface p-4 rounded-lg border border-outline-variant/20">
+<span class="font-label-caps text-label-caps text-on-surface-variant block mb-2">Distance</span>
+<span class="font-mono-data text-mono-data text-on-surface text-lg">14.2m</span>
+</div>
+<div class="bg-surface p-4 rounded-lg border border-outline-variant/20">
+<span class="font-label-caps text-label-caps text-on-surface-variant block mb-2">Velocity</span>
+<span class="font-mono-data text-mono-data text-on-surface text-lg">340 m/s</span>
+</div>
+<div class="bg-surface p-4 rounded-lg border border-outline-variant/20">
+<span class="font-label-caps text-label-caps text-on-surface-variant block mb-2">Threat Level</span>
+<span class="font-mono-data text-mono-data text-error font-bold text-lg">CRITICAL</span>
+</div>
+</div>
+</div>
+</div>
+<!-- Engine Core (Span 4) -->
+<div class="lg:col-span-4 glass-panel rounded-xl p-lg flex flex-col">
+<div class="flex justify-between items-center mb-6 border-b border-outline-variant/30 pb-4">
+<h2 class="font-body-lg text-body-lg font-semibold text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-outline">memory</span> Core: Mahoraga
+                        </h2>
+</div>
+<div class="flex-1 flex flex-col gap-4">
+<div class="flex justify-between items-center p-3 bg-surface rounded-lg border border-outline-variant/20">
+<span class="font-label-caps text-label-caps text-on-surface-variant">Adaptation Rate</span>
+<span class="font-mono-data text-mono-data text-on-tertiary-container font-bold">+2.4%/s</span>
+</div>
+<div class="flex justify-between items-center p-3 bg-surface rounded-lg border border-outline-variant/20">
+<span class="font-label-caps text-label-caps text-on-surface-variant">Wheel Rotation</span>
+<span class="font-mono-data text-mono-data text-on-surface">3/8</span>
+</div>
+<div class="flex justify-between items-center p-3 bg-surface rounded-lg border border-outline-variant/20">
+<span class="font-label-caps text-label-caps text-on-surface-variant">Energy Output</span>
+<span class="font-mono-data text-mono-data text-on-surface">104.2 GW</span>
+</div>
+<div class="mt-auto pt-4">
+<div class="w-full h-[120px] bg-surface rounded-lg border border-outline-variant/20 relative overflow-hidden" data-alt="Abstract visualization of a spinning gear or wheel mechanism, composed of thin, precise technical lines in slate and subtle orange, on a clean, light frost background">
+<!-- Placeholder for complex technical visualization -->
+<div class="absolute inset-0 flex items-center justify-center"><div class="relative w-24 h-24 animate-mahoraga-click">
+<svg class="w-full h-full text-primary opacity-80" viewbox="0 0 100 100">
+<circle class="opacity-30" cx="50" cy="50" fill="none" r="45" stroke="currentColor" stroke-dasharray="2 2" stroke-width="1"></circle>
+<circle cx="50" cy="50" fill="none" r="8" stroke="currentColor" stroke-width="2"></circle>
+<circle cx="50" cy="50" fill="none" r="35" stroke="currentColor" stroke-width="0.5"></circle>
+<g class="mahoraga-wheel-spoke">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(45deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(90deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(135deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(180deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(225deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(270deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+<g class="mahoraga-wheel-spoke" style="transform: rotate(315deg);">
+<line stroke="currentColor" stroke-width="2" x1="50" x2="50" y1="15" y2="42"></line>
+<circle cx="50" cy="12" fill="currentColor" r="3"></circle>
+</g>
+</svg>
+<div class="absolute inset-0 flex items-center justify-center">
+<div class="w-1 h-1 bg-primary rounded-full animate-ping"></div>
+</div>
+</div></div>
+</div>
+</div>
+</div>
+</div>
+<!-- Big Moments Card (Span 12) -->
+<div class="lg:col-span-12 glass-panel rounded-xl p-xl border-l-4 border-l-tertiary-container relative overflow-hidden flex items-center justify-between bg-gradient-to-r from-surface-container-low to-surface-container-lowest">
+<div class="z-10">
+<span class="font-label-caps text-label-caps text-on-tertiary-container tracking-widest block mb-2"><span class="material-symbols-outlined text-xs align-middle mr-2 text-primary">refresh</span>TACTICAL ANALYSIS UPDATE</span>
+<h2 class="font-display text-display text-on-surface tracking-tight uppercase">JUDGMENT STRIKE - ADAPTED</h2>
+<p class="font-body-md text-body-md text-on-surface-variant mt-4 max-w-2xl">Subject has successfully analyzed and developed countermeasures to the incoming blunt force trauma attack pattern. Defensive parameters updated.</p>
+</div>
+<div class="z-10 hidden md:block">
+<span class="material-symbols-outlined text-[80px] text-tertiary-container opacity-20">shield_lock</span>
+</div>
+</div>
+<!-- Resistances & Counters (Span 6) -->
+<div class="lg:col-span-6 glass-panel rounded-xl p-lg flex flex-col">
+<div class="flex justify-between items-center mb-6 border-b border-outline-variant/30 pb-4">
+<h2 class="font-body-lg text-body-lg font-semibold text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-outline">security</span> Active Resistances
+                        </h2>
+</div>
+<div class="space-y-3">
+<div class="flex items-center justify-between p-3 bg-surface rounded-lg border border-outline-variant/20">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-outline-variant">water_drop</span>
+<span class="font-body-md text-body-md text-on-surface">Hydro-Kinetics</span>
+</div>
+<span class="font-label-caps text-label-caps bg-surface-container-high px-2 py-1 rounded text-on-surface-variant">IMMUNE</span>
+</div>
+<div class="flex items-center justify-between p-3 bg-surface rounded-lg border border-outline-variant/20">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-outline-variant">local_fire_department</span>
+<span class="font-body-md text-body-md text-on-surface">Thermal Output</span>
+</div>
+<span class="font-label-caps text-label-caps bg-surface-container-high px-2 py-1 rounded text-on-surface-variant">94% MITIGATION</span>
+</div>
+<div class="flex items-center justify-between p-3 bg-surface rounded-lg border border-outline-variant/20">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-outline-variant">electric_bolt</span>
+<span class="font-body-md text-body-md text-on-surface">Electromagnetic</span>
+</div>
+<span class="font-label-caps text-label-caps bg-surface-container-high px-2 py-1 rounded text-on-surface-variant">ANALYZING...</span>
+</div>
+</div>
+</div>
+<!-- Event Log (Span 6) -->
+<div class="lg:col-span-6 glass-panel rounded-xl p-lg flex flex-col h-[320px]">
+<div class="flex justify-between items-center mb-4 border-b border-outline-variant/30 pb-4">
+<h2 class="font-body-lg text-body-lg font-semibold text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-outline">list_alt</span> Turn Log
+                        </h2>
+<button class="text-on-surface-variant hover:text-on-surface"><span class="material-symbols-outlined text-sm">filter_list</span></button>
+</div>
+<div class="flex-1 overflow-y-auto space-y-4 pr-2">
+<div class="flex gap-4 items-start">
+<span class="font-mono-data text-mono-data text-outline-variant text-xs mt-1 w-16">14:02:44</span>
+<div class="flex-1 border-l border-outline-variant/30 pl-4 pb-2"><span class="material-symbols-outlined text-[10px] align-middle mr-1 text-primary animate-spin">published_with_changes</span>
+<span class="font-label-caps text-label-caps text-on-tertiary-container block mb-1">ADAPTATION COMPLETE</span>
+<p class="font-body-md text-body-md text-on-surface text-sm">Mahoraga wheel completed rotation. Strike countered.</p>
+</div>
+</div>
+<div class="flex gap-4 items-start">
+<span class="font-mono-data text-mono-data text-outline-variant text-xs mt-1 w-16">14:02:41</span>
+<div class="flex-1 border-l border-outline-variant/30 pl-4 pb-2">
+<span class="font-label-caps text-label-caps text-error block mb-1">INCOMING ATTACK DETECTED</span>
+<p class="font-body-md text-body-md text-on-surface text-sm">Enemy initiated Judgment Strike sequence.</p>
+</div>
+</div>
+<div class="flex gap-4 items-start">
+<span class="font-mono-data text-mono-data text-outline-variant text-xs mt-1 w-16">14:02:35</span>
+<div class="flex-1 border-l border-outline-variant/30 pl-4 pb-2">
+<span class="font-label-caps text-label-caps text-on-surface-variant block mb-1">POSITION UPDATE</span>
+<p class="font-body-md text-body-md text-on-surface text-sm">Target distance decreased by 4.2m.</p>
+</div>
+</div>
+<div class="flex gap-4 items-start">
+<span class="font-mono-data text-mono-data text-outline-variant text-xs mt-1 w-16">14:02:20</span>
+<div class="flex-1 border-l border-outline-variant/30 pl-4 pb-2">
+<span class="font-label-caps text-label-caps text-on-surface-variant block mb-1">SCAN COMPLETE</span>
+<p class="font-body-md text-body-md text-on-surface text-sm">Initial environment parameters mapped.</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+</body></html>