feat(web): add interactive web demo with WASM + Vite

Full end-to-end browser demo of the Attention Residuals algorithm:

- Pure Rust WASM crate (web-demo/crate/) faithfully reimplements the core
  AttnRes operation (RMSNorm, depth-wise softmax, weighted combination)
  mirroring src/attn_res_op.rs and src/layer.rs exactly
- TypeScript frontend (Vite + Canvas 2D) with academic-grade design:
  - Section 1: Problem statement (information dilution in standard residuals)
  - Section 2: Algorithm walkthrough (5-step AttnRes with equations)
  - Section 3: Interactive demo (configurable model, live heatmaps)
  - Section 4: Training simulation (loss curve, weight evolution, norm tracking)
  - Section 5: Standard vs AttnRes comparison
- wasm-pack build (--target web), zero external WASM dependencies
- Updated CLAUDE.md, AGENTS.md, README.md with web-demo docs and commands
- Updated .gitignore for web-demo build artifacts

https://claude.ai/code/session_01SEXHievpnMwNq3q2kz2zBB

Author: claude

.gitignore

@@ -36,3 +36,9 @@ Thumbs.db
 
 # Criterion benchmark output
 target/criterion/
+
+# Web demo build artifacts
+web-demo/node_modules/
+web-demo/dist/
+web-demo/crate/target/
+web-demo/crate/pkg/

AGENTS.md

@@ -49,6 +49,19 @@ benches/
 fixtures/                # Reference outputs from PyTorch
 ├── attn_res_forward.json
 └── block_state_tracking.json
+
+web-demo/                # Interactive web demo (WASM + Vite)
+├── crate/               # Rust WASM crate (pure-Rust AttnRes reimplementation)
+│   ├── Cargo.toml
+│   └── src/lib.rs       # wasm-bindgen exports: AttnResEngine
+├── src/                 # TypeScript frontend
+│   ├── main.ts          # App entry point
+│   ├── style.css        # Academic-grade styling
+│   ├── viz.ts           # Canvas 2D heatmaps, charts
+│   └── diagrams.ts      # Static architectural diagrams
+├── index.html           # Single-page app
+├── package.json         # Vite + TypeScript
+└── vite.config.ts       # Build config
 ```
 
 ## Commands
@@ -64,6 +77,11 @@ cargo bench                        # Run Criterion benchmarks
 cargo run --example train_tiny     # Train example
 cargo run --example compare_residuals  # Comparison example
 cargo run --example visualize_weights  # Visualization example
+
+# Web demo
+cd web-demo && npm run build:wasm     # Build WASM crate
+cd web-demo && npm run dev            # Start Vite dev server
+cd web-demo && npm run build          # Production build (WASM + Vite)
 ```
 
 ## Architecture Essentials
@@ -111,6 +129,16 @@ Input IDs → Embedding → [AttnResLayer × N] → RMSNorm → LM Head → Logi
 
 `spec.md` is the authoritative specification. All algorithm implementations must match the pseudocode and equations defined there.
 
+## Web Demo
+
+The `web-demo/` directory contains a fully interactive browser-based demo. The WASM crate (`web-demo/crate/`) is a pure-Rust reimplementation of the core AttnRes algorithm (no burn dependency for WASM portability), faithfully mirroring `src/attn_res_op.rs`. It exposes:
+
+- `AttnResEngine` — model creation, forward pass, training simulation
+- `compute_attn_res()` — interactive core operation with custom pseudo-queries
+- `train_step()` — simulated training showing depth attention pattern emergence
+
+Frontend: Vite + TypeScript with Canvas 2D visualizations (heatmaps, bar charts, loss curves). Academic design with full algorithm explanation.
+
 ## Known Gaps
 
 - No PyTorch checkpoint loading (safetensors format)

CLAUDE.md

@@ -63,8 +63,20 @@ attnres-rs/
 │   ├── train_tiny.rs               # Training example [agent: CREATE/MODIFY]
 │   ├── compare_residuals.rs        # Standard vs AttnRes [agent: CREATE/MODIFY]
 │   └── visualize_weights.rs        # Depth attention visualization [agent: CREATE/MODIFY]
-└── benches/
-    └── attn_res_benchmark.rs       # Criterion benchmarks [agent: CREATE/MODIFY]
+├── benches/
+│   └── attn_res_benchmark.rs       # Criterion benchmarks [agent: CREATE/MODIFY]
+└── web-demo/                        # Interactive browser demo [agent: CREATE/MODIFY]
+    ├── crate/                       # Pure-Rust WASM crate (AttnRes reimplementation)
+    │   ├── Cargo.toml
+    │   └── src/lib.rs               # wasm-bindgen exports
+    ├── src/                         # TypeScript frontend
+    │   ├── main.ts                  # App entry + controls
+    │   ├── style.css                # Academic-grade CSS
+    │   ├── viz.ts                   # Canvas heatmaps/charts
+    │   └── diagrams.ts              # Static diagrams
+    ├── index.html                   # SPA entry point
+    ├── package.json                 # npm scripts (build:wasm, dev, build)
+    └── vite.config.ts               # Vite build config
 ```
 </structure>
 
@@ -81,6 +93,9 @@ attnres-rs/
 | Bench            | `cargo bench`                    | Criterion benchmarks               |
 | Run example      | `cargo run --example train_tiny` | CPU (ndarray) by default           |
 | Publish          | `cargo publish`                  | ⚠ REQUIRES APPROVAL               |
+| Web demo (WASM)  | `cd web-demo && npm run build:wasm` | Requires wasm-pack + wasm32 target |
+| Web demo (dev)   | `cd web-demo && npm run dev`     | Vite dev server at localhost:5173  |
+| Web demo (build) | `cd web-demo && npm run build`   | Production build (WASM + Vite)     |
 </commands>
 
 <conventions>

README.md

@@ -63,6 +63,19 @@ AttnResTransformer
 
 **Note on `num_layers`**: This parameter counts *sublayers* (each transformer layer = 2 sublayers: attention + MLP). So `num_layers=8` means 4 transformer layers.
 
+## Web Demo
+
+An interactive browser-based demo runs the core AttnRes algorithm via Rust compiled to WASM:
+
+```bash
+cd web-demo
+npm install
+npm run build:wasm   # Compile Rust → WASM (requires wasm-pack)
+npm run dev          # Start dev server at localhost:5173
+```
+
+Features: configurable model parameters, live depth attention heatmaps, training simulation with loss curves, standard vs AttnRes comparison. No GPU required — runs entirely in the browser.
+
 ## Examples
 
 ```bash

web-demo/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+crate/target/
+crate/pkg/

web-demo/crate/Cargo.toml

@@ -0,0 +1,24 @@
+[package]
+name = "attnres-wasm"
+version = "0.1.0"
+edition = "2021"
+description = "WASM bindings for the attnres-rs web demo — faithful reimplementation of the core Attention Residuals algorithm"
+publish = false
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+serde-wasm-bindgen = "0.6"
+js-sys = "0.3"
+console_error_panic_hook = "0.1"
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = false
+
+[profile.release]
+opt-level = "s"
+lto = true