feat(demo): Security Theater + unified shell + a11y/motion polish

[konjoinfinity]

Delivers all three remaining next-steps in one pass, on top of the Pipeline (#7) and Agent (#8) theaters.

1. Security & cache-write theater — new surface /security

Visualizes kyro's real konjoai.cache.poisoning.PoisoningGuard as a live "write firewall".

• demo/security.py — SecurityEngine runs the guard unmodified: per-tenant WriteRateLimiter, cosine Q-A coherence (the identical _cosine_similarity), and the Welford AnomalyDetector. The authoritative accept/reject is guard.validate(); the per-layer diagnostics the UI shows are read from the guard's own components, so the explanation always matches the decision. The only substitution is the demo encoder — exactly the embed_fn seam the guard already exposes. A curated, fully deterministic scenario (FNV-hash encoder, not Python's salted hash()) exercises every layer: coherent baselines → poisoned/off-topic (blocked at coherence) → padded answer (flagged for length anomaly) → bot flood (trips the rate limiter).
• demo/security.html — cinematic firewall: three gate counters (pass/block/flag), an animated verdict timeline with per-layer signal bars, an OWASP-safe threat ledger (SHA-256 hashes only), and an interactive "test your own write" panel.
• demo/server.py — GET /security, GET /api/security/{scenario,stats}, POST /api/security/{check,reset} (bounded inputs).
• tests/unit/test_demo_security.py — 11 contract tests: each layer fires, OWASP no-raw-text (only 16-hex hashes), interactive check/reset.

2. Unified shell

Cross-document View Transitions (@view-transition { navigation: auto }) on all five surfaces for smooth page-to-page morphs, and a consistent nav with Security linked everywhere: Playground · Observatory · Pipeline · Agent · Security.

3. Polish across pages

• prefers-reduced-motion honoured (animations + view-transitions disabled) on every surface.
• :focus-visible rings for keyboard navigation.
• aria-current / aria-live on the new surfaces; responsive grids that stack on narrow viewports.

Honesty notes

• Demo thresholds are tuned tighter than production defaults (coherence 0.12, 6 writes/min, 2.5σ) purely so every layer is observable in a short scenario — labelled in the payload's config.
• The embedder is the demo's deterministic char-trigram encoder (same float32/L2-unit contract), wired through the guard's real embed_fn.

Verification

• 36 demo tests pass, stable across multiple PYTHONHASHSEED values; ruff check . clean repo-wide.
• All five surfaces serve 200; the security scenario returns its 14-row timeline; the off-topic interactive check returns blocked / coherence.
• Rendered & screenshotted headless against the live server.
• Only demo/* and a new test changed — no production konjoai/ code touched.

Run it:

python3 demo/server.py        # http://localhost:8766/security

https://claude.ai/code/session_01WWWgV1NwxaaNdPfy4PHN1K

---

Generated by Claude Code