Update anupa: iframe mini-app widgets

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.12-slim
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./anupa/requirements.txt /app/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /app/requirements.txt
+
+COPY --chown=user ./anupa /app
+
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,14 @@
----
-title: AdaptiveUI UX
-emoji: 🦀
+---
+title: AdaptiveUI (anupa)
+emoji: "🧠"
 colorFrom: indigo
-colorTo: red
+colorTo: blue
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AdaptiveUI (anupa)
+
+Claude-style single-call response + widget HTML rendered in an iframe.
+
+This Space runs the `anupa` server on port 7860.

anupa/.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

anupa/.gitignore

@@ -0,0 +1,29 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+
+# Distribution / packaging
+build/
+dist/
+*.egg-info/
+.eggs/
+
+# Environments
+.env
+.venv
+env/
+venv/
+
+# Testing
+htmlcov/
+.tox/
+.pytest_cache/
+.coverage
+
+# IDEs
+.vscode/
+.idea/
+
+# OS Specific
+.DS_Store
+Thumbs.db

anupa/Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Hugging Face Spaces expects port 7860 by default
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["python", "app.py"]

anupa/README.md

@@ -0,0 +1,68 @@
+---
+sdk: docker
+app_port: 7860
+---
+# Adaptive Presentation Engine — Demo
+
+A web demo of the Contextual Hierarchical Bayesian Architecture pipeline.
+
+## What it shows
+- **Live strategy selection** via Thompson Sampling over the Bayesian posterior
+- **Posterior updating in real-time** as you rate responses (👍 / 👎)
+- **Feature vector** used for each inference
+- **Per-strategy expected reward** estimates that evolve with each interaction
+
+---
+
+## Setup (5 minutes)
+
+### 1. Install Python dependencies
+```bash
+pip install numpy
+# (flask is not needed — the server is built-in)
+```
+
+### 2. Configure model (optional)
+This app supports:
+- OpenAI-compatible providers (via `OPENAI_BASE_URL`, `OPENAI_API_KEY`, `OPENAI_MODEL`)
+- Anthropic Claude (via `ANTHROPIC_API_KEY`, `ANTHROPIC_MODEL`)
+
+### 3. Run the demo server
+```bash
+python app.py
+```
+
+### 4. Open in browser
+```
+http://localhost:5000
+```
+
+---
+
+## How to demo it
+
+1. **Send a few messages** — watch the strategy get selected in the sidebar
+2. **Rate the responses** with 👍 or 👎 — watch the posterior bars update live
+3. **Send different message types** (short vs long, questions vs statements) — the feature vector changes
+4. **After 5-10 interactions**, the engine starts preferring strategies that got positive rewards
+5. **Reset session** to show the system starting fresh from the global prior
+
+---
+
+## Pipeline stages shown
+| Stage | What the demo shows |
+|---|---|
+| Feature extraction | Feature vector panel (x ∈ ℝ⁸) |
+| Thompson Sampling | Expected reward % per strategy |
+| LLM rendering | Live response with strategy label |
+| Reward observation | 👍/👎 buttons |
+| Posterior update | Bar charts animate in real-time |
+
+---
+
+## Architecture notes (for Q&A)
+- **No JSON files** — posterior stored in-memory (Redis in production)
+- **Hierarchical prior** — new users inherit global posterior
+- **Exponential decay** — old observations lose weight over time (γ=0.99)
+- **Global update** — each interaction slightly updates the shared prior (α=0.05)
+- **Circuit breaker** — LLM timeouts fail fast gracefully

anupa/UpdatedReadme.md

@@ -0,0 +1,586 @@
+# Anupa: Adaptive Presentation Engine — Complete Reference
+
+A professional, modular backend demonstrating Bayesian strategy selection and real-time posterior updating. This app learns user preferences and adapts its response format (bullet points, prose, questions, etc.) based on observed rewards.
+
+---
+
+## Table of Contents
+- [Project Structure](#project-structure)
+- [File Manifest](#file-manifest)
+- [System Architecture](#system-architecture)
+- [How the App Works](#how-the-app-works)
+- [Setup & Running](#setup--running)
+- [Configuration](#configuration)
+- [API Reference](#api-reference)
+
+---
+
+## Project Structure
+
+```
+backend/
+├── __init__.py           # Package entrypoint
+├── config.py             # Environment + constants
+├── utils.py              # Math, heuristics, post-processing
+├── llm.py                # LLM backends (Anthropic, OpenAI-compatible)
+├── engine.py             # Bayesian learner
+└── server.py             # HTTP handlers + runner
+
+Root folder
+├── app.py                # Launcher (imports backend.server.run_server)
+├── index.html            # Frontend demo UI
+├── Dockerfile            # Container image
+├── requirements.txt      # Python dependencies
+├── README.md             # Original readme (kept for reference)
+└── UpdatedReadme.md      # This file
+```
+
+---
+
+## File Manifest
+
+### `backend/__init__.py`
+**Purpose:** Package initialization and public API.
+
+Exposes `run_server()` so callers only need:
+```python
+from backend import run_server
+run_server()
+```
+
+---
+
+### `backend/config.py`
+**Purpose:** Centralized configuration and constants.
+
+**Key variables:**
+- `LLM_MODE` — selects backend: `"openai_compat"` or `"anthropic"`
+- `OPENAI_BASE_URL`, `OPENAI_API_KEY`, `OPENAI_MODEL` — remote OpenAI-compatible API (Groq)
+- `ANTHROPIC_API_KEY`, `ANTHROPIC_MODEL` — Anthropic Claude API configuration
+- `D=10` — feature vector dimensionality
+- `LAMBDA`, `GAMMA`, `ALPHA_G`, `TS_TEMPERATURE` — Bayesian hyperparameters
+- `STRATEGIES` — dict of 5 response primitives (bulleted, narrative, concise, Socratic, step-by-step)
+- `HERE`, `INDEX_HTML` — paths for serving the frontend
+
+**Usage:** Other modules import from this single source of truth.
+
+---
+
+### `backend/utils.py`
+**Purpose:** Small, reusable utilities.
+
+**Functions:**
+- `sigmoid(x)` — numerically stable logistic function
+- `mean_uncertainty(sigma_inv)` — summarize posterior variance from precision matrix
+- `fast_valence(message, prev_response)` — lightweight regex-based sentiment heuristic; returns `{"pos", "neg", "reason"}`
+- `enforce_response(strategy, text)` — post-process LLM output to match the chosen format (strips questions, forces bullets/numbers, caps sentence counts)
+
+**Helpers (module-level):**
+- `_POS`, `_NEG`, `_REPHRASE` — regex patterns for auto-reward detection
+
+**Usage:** Called by server during chat turns and posterior updates.
+
+---
+
+### `backend/llm.py`
+**Purpose:** LLM API wrappers for Anthropic and OpenAI-compatible endpoints.
+
+**Public functions:**
+- `call_openai_compat(prompt, system, timeout=120)` — POST to OpenAI-compatible endpoint; returns `(text, elapsed_sec, mode)`
+- `call_anthropic(prompt, system, timeout=120)` — call Anthropic Messages API; returns `(text, elapsed_sec, mode)`
+- `openai_health(timeout=10)` — check OpenAI-compatible endpoint and available models
+ - `anthropic_health()` — lightweight Anthropic config health summary
+
+**Internal helpers:**
+- `_post_json_url()`, `_get_json_url()` — raw HTTP wrappers
+
+**Usage:** Server calls these during `/api/chat` to fetch responses from the LLM.
+
+---
+
+### `backend/engine.py`
+**Purpose:** The core Bayesian learner for strategy selection and posterior updating.
+
+**Class: `BayesianEngine`**
+- `__init__()` — initialize global and per-user posterior means (`mu`) and precision matrices (`sigma_inv`)
+- `get_user(uid)` — fetch or create user state
+- `featurize(message, user)` — convert message + history into a fixed-length feature vector (10-dim)
+- `select(uid, message)` — use Thompson Sampling to pick a strategy; return `(strategy, scores, x)`
+- `update(uid, strategy, x, reward)` — Bayesian update for user and global posterior
+- `apply_preferences(uid, strategy_names)` — apply soft bias or hard-lock if user selects one strategy
+- `posterior_summary()`, `user_posterior()`, `global_posterior()` — compute compact summaries of expected reward + uncertainty
+
+**Singletons:**
+- `engine` — global instance used by the server
+- `USERB_ID` — reserved user ID for a secondary reference posterior (demo artifact)
+
+**Bayesian model:** Online logistic regression with exponential decay (γ=0.99) and per-strategy Gaussian posteriors.
+
+**Usage:** Server calls during `/api/chat`, `/api/reward`, `/api/preference` endpoints.
+
+---
+
+### `backend/server.py`
+**Purpose:** HTTP server and request handlers.
+
+**Class: `Handler(BaseHTTPRequestHandler)`**
+Handles:
+- `GET /` — serve `index.html` frontend
+- `GET /api/health` — return LLM backend status
+- `GET /api/state` — return user's current posterior and global stats
+- `POST /api/chat` — accept user message, auto-reward previous turn, select strategy, call LLM, enforce format, persist state
+- `POST /api/reward` — accept explicit user reward
+- `POST /api/preference` — set user strategy preferences
+- `POST /api/reset` — reset user state
+- `OPTIONS *` — handle CORS preflight
+
+**Private helpers:**
+- `_json()` — JSON response with CORS headers
+- `_html()` — serve frontend file
+- `_body()` — parse JSON request body
+- `_cors()` — set CORS headers
+- `log_message()` — suppress access logs for cleanliness
+
+**Function: `run_server()`**
+- Prints startup banner
+- Performs lightweight health checks on Anthropic/OpenAI endpoint
+- Starts `ThreadedServer` on port 5051 (configurable via `PORT` env var)
+
+**Class: `ThreadedServer(ThreadingMixIn, HTTPServer)`**
+- Allows concurrent request handling
+
+**Usage:** Imported and called by `app.py`.
+
+---
+
+### `app.py` (Root)
+**Purpose:** Lightweight launcher script.
+
+Simply imports and calls:
+```python
+from backend.server import run_server
+
+if __name__ == "__main__":
+    run_server()
+```
+
+This keeps a familiar entrypoint (`python app.py`) while the implementation lives in the package.
+
+---
+
+### `index.html`
+**Purpose:** Frontend React/Preact demo.
+
+Communicates with backend via:
+- `GET /api/health` — check LLM status on load
+- `GET /api/state` — fetch user posteriors
+- `POST /api/chat` — send message, receive response + Bayesian state
+- `POST /api/reward` — send user feedback
+- `POST /api/preference` — set strategy lock
+- `POST /api/reset` — reset session
+
+Displays:
+- Strategy label and instruction
+- Expected reward scores per strategy
+- Feature vector (x ∈ ℝ¹⁰)
+- Posterior bar charts (mean + uncertainty)
+- Auto-detected valence reason
+
+---
+
+### `Dockerfile`
+**Purpose:** Container build for deployment.
+
+Installs Python, dependencies, and runs `python app.py`.
+
+---
+
+### `requirements.txt`
+**Purpose:** Python package dependencies.
+
+Currently:
+- `numpy` — linear algebra for Bayesian updates
+- `python-dotenv` — load `.env` for API keys
+
+---
+
+## System Architecture
+
+### High-Level Component Diagram
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                         Frontend (index.html)                       │
+│         Browser UI → POST /api/chat, GET /api/state, etc.          │
+└────────────────────────┬────────────────────────────────────────────┘
+                         │
+                         ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│                  app.py (Launcher)                                  │
+│              from backend.server import run_server()                  │
+└────────────────────────┬────────────────────────────────────────────┘
+                         │
+                         ▼
+┌─────────────────────────────────────────────────────────────────────┐
+│          HTTP Server + Handler (backend/server.py)                    │
+│  ├─ GET /api/health     → check LLM backend                        │
+│  ├─ GET /api/state      → fetch posteriors                         │
+│  ├─ POST /api/chat      → process user message                     │
+│  ├─ POST /api/reward    → apply explicit reward                    │
+│  ├─ POST /api/preference→ lock strategy                            │
+│  └─ POST /api/reset     → clear user data                          │
+└────────────────────────┬─────────┬──────────────┬──────────────────┘
+                         │         │              │
+         ┌───────────────┘         │              └──────────────┐
+         │                         │                             │
+         ▼                         ▼                             ▼
+   ┌──────────────┐          ┌───────────���─┐            ┌────────────────┐
+  │ Bayesian     │          │ LLM Backends│            │ Utils (Heuristics
+  │ Engine       │          │ (backend/llm) │            │ & Post-process)
+  │ (backend/      │          │  ┌─ Anthropic │          │  ├─ sigmoid()
+  │  engine.py)  │          │  └─ OpenAI   │            │  ├─ fast_valence()
+  │              │          │             │            │  └─ enforce_response()
+   │ • select()   │◄─────────┤ • call_*()  │            └────────────────┘
+   │ • update()   │          │ • health()  │
+   │ • featurize()│          │ • format_*()│
+   │ • apply_pref│          │             │
+   └──────────────┘          └─────────────┘
+         ▲
+         │ (reads hyperparams + strategy list)
+         │
+         ▼
+   ┌──────────────────────────────────────────┐
+  │ Config (backend/config.py)                 │
+  │ ├─ LLM_MODE, OPENAI_*, ANTHROPIC_*      │
+   │ ├─ D, LAMBDA, GAMMA, ALPHA_G, TS_TEMP   │
+   │ ├─ STRATEGIES dict + STRATEGY_NAMES      │
+   │ └─ HERE, INDEX_HTML paths               │
+   └──────────────────────────────────────────┘
+```
+
+---
+
+## How the App Works
+
+### 1. **Initialization**
+- User loads `http://localhost:5051` → frontend fetches `/api/health` and `/api/state`
+- Server initializes or fetches user state (in-memory dict keyed by `uid`)
+- User inherits global posterior (hierarchical Bayesian prior)
+
+### 2. **User Sends a Message**
+```
+User message
+    ↓
+POST /api/chat {uid, message}
+    ↓
+[Server] fast_valence(message, prev_response)
+    ├─ Auto-reward previous turn (if exists)
+    └─ Call engine.update(uid, strategy, x, reward)
+    ↓
+[Server] engine.select(uid, message)
+    ├─ featurize(message, user) → x ∈ ℝ¹⁰
+    ├─ Thompson Sampling per strategy
+    └─ Return best strategy + scores
+    ↓
+[Server] Build system prompt with FORMAT RULE
+    ├─ Include selected strategy instruction
+    ├─ Add recent conversation history
+    └─ Send to LLM
+    ↓
+[LLM] Generate response (single-call)
+    └─ Return text + optional widget HTML
+    ↓
+[Server] enforce_response(strategy, text)
+    ├─ Strip unwanted questions
+    ├─ Force format (bullets, numbers, etc.)
+    └─ Return polished response
+    ↓
+[Server] Persist conversation + state
+    └─ Update user["history"], ["last_response"], ["last_x"]
+    ↓
+[Server] Return JSON response
+    ├─ response text + strategy label
+    ├─ instruction (what the system told the LLM)
+    ├─ scores (expected reward per strategy)
+    ├─ x_vec (feature vector used)
+    ├─ posteriors (updated beliefs)
+    ├─ auto_detected + auto_r (heuristic reward)
+    └─ auto_reason (why the heuristic fired)
+    ↓
+[Frontend] Display response
+    ├─ Show strategy + instruction
+    ├─ Show bar charts for expected reward
+    ├─ Show feature vector
+    └─ Display 👍/👎 buttons
+```
+
+### 3. **User Rates Response**
+```
+User clicks 👍 or 👎
+    ↓
+POST /api/reward {uid, strategy, x_vec, reward}
+    ↓
+[Server] engine.update(uid, strategy, x, reward)
+    ├─ Update user["mu"][strategy] via logistic regression
+    ├─ Update user["sigma_inv"][strategy] (precision matrix)
+    ├─ Also update global posterior (with weight α=0.05)
+    └─ Append to user["reward_log"]
+    ↓
+[Server] Recompute posteriors
+    └─ Return new bar chart data
+    ↓
+[Frontend] Animate bar chart updates
+    └─ Show how beliefs changed
+```
+
+### 4. **Posterior Update (Bayesian Mechanics)**
+The engine maintains per-user **Gaussian posteriors** β ~ N(μ, Σ) for each strategy.
+
+**Model:** Logistic regression where reward r̂ = sigmoid(x^T β)
+
+**Update rule:**
+- r̂_old = sigmoid(x^T μ_old)
+- Σ_new = Σ_old^{-1} + x x^T · w + λ I  (w = r̂(1 - r̂))
+- μ_new = μ_old + Σ_new^{-1} x (r - r̂_old)
+
+**Global posterior** gets a small, weighted update (α=0.05) so all users benefit from collective learning.
+
+**Exponential decay** (γ=0.99) biases the engine toward recent history.
+
+---
+
+## Setup & Running
+
+### 1. Install Python 3.8+
+```bash
+python3 --version
+```
+
+### 2. Clone/download the repo
+```bash
+cd backend
+```
+
+### 3. Create a virtual environment (recommended)
+```bash
+python3 -m venv venv
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+```
+
+### 4. Install dependencies
+```bash
+pip install -r requirements.txt
+```
+
+### 5. LLM backend
+This repository supports OpenAI-compatible providers and Anthropic Claude.
+
+### 6. Run the app
+```bash
+python app.py
+```
+
+You should see a startup banner and then the server will be live at `http://localhost:5051`.
+
+### 7. Open browser
+```
+http://localhost:5051
+```
+
+---
+
+## Configuration
+
+### Environment Variables
+
+Create a `.env` file in the root folder:
+
+```env
+# Backend selection
+LLM_MODE=openai_compat  # or "anthropic"
+
+# OpenAI-compatible (Groq, etc.)
+OPENAI_BASE_URL=https://api.groq.com/openai/v1
+OPENAI_API_KEY=your_groq_api_key_here
+OPENAI_MODEL=llama-3.1-8b-instant
+
+# Anthropic (Claude)
+ANTHROPIC_API_KEY=your_anthropic_key_here
+ANTHROPIC_MODEL=claude-opus-4-6
+
+# Port
+PORT=5051
+```
+
+### Bayesian Hyperparameters
+
+Edit `backend/config.py`:
+
+```python
+D = 10              # Feature vector dimension
+LAMBDA = 0.01       # L2 regularization on posteriors
+GAMMA = 0.99        # Exponential decay (prefer recent history)
+ALPHA_G = 0.05      # Global posterior update weight
+TS_TEMPERATURE = 2.0  # Thompson Sampling variance scale (exploration)
+```
+
+---
+
+## API Reference
+
+### `GET /api/health`
+**Returns:** LLM backend status.
+
+**Response:**
+```json
+{
+  "server": "ok",
+  "mode": "openai_compat",
+  "openai_base_url": "https://api.groq.com/openai/v1",
+  "model": "llama-3.1-8b-instant",
+  "ok": true,
+  "reachable": true,
+  "models": ["llama-3.1-8b-instant", "mixtral-8x7b-32768"]
+}
+```
+
+---
+
+### `GET /api/state?uid=demo`
+**Returns:** Current user state and posteriors.
+
+**Response:**
+```json
+{
+  "posterior": {
+    "structured_bullets": {"r": 0.52, "u": 0.34},
+    "narrative_prose": {"r": 0.48, "u": 0.35},
+    ...
+  },
+  "global": {...},
+  "userb": {...},
+  "global_n": 42,
+  "n_users": 3,
+  "msg_count": 5
+}
+```
+
+---
+
+### `POST /api/chat`
+**Body:**
+```json
+{
+  "uid": "demo",
+  "message": "How do I make pasta?"
+}
+```
+
+**Response:**
+```json
+{
+  "response": "- Cook 1 liter of water\n- Add salt\n- ...",
+  "strategy": "step_by_step",
+  "instruction": "Numbered list of 3-6 steps only.",
+  "elapsed": 2.3,
+  "llm_mode": "anthropic",
+  "scores": {
+    "structured_bullets": 0.54,
+    "narrative_prose": 0.48,
+    ...
+  },
+  "x_vec": [0.12, 0.34, ...],
+  "posterior": {...},
+  "global": {...},
+  "auto_detected": true,
+  "auto_r": 0.75,
+  "auto_reason": "positive signal(s)"
+}
+```
+
+---
+
+### `POST /api/reward`
+**Body:**
+```json
+{
+  "uid": "demo",
+  "strategy": "step_by_step",
+  "x_vec": [0.12, 0.34, ...],
+  "reward": 0.9
+}
+```
+
+**Response:**
+```json
+{
+  "posterior": {...},
+  "global": {...},
+  "global_n": 43
+}
+```
+
+---
+
+### `POST /api/preference`
+**Body:**
+```json
+{
+  "uid": "demo",
+  "strategies": ["structured_bullets"]
+}
+```
+
+**Response:**
+```json
+{
+  "posterior": {...}
+}
+```
+
+---
+
+### `POST /api/reset`
+**Body:**
+```json
+{
+  "uid": "demo"
+}
+```
+
+**Response:**
+```json
+{
+  "ok": true
+}
+```
+
+---
+
+## Troubleshooting
+
+### Server won't start
+- Ensure port 5051 is available: `lsof -i :5051`
+- Check Python version: `python --version` (need 3.8+)
+- Verify dependencies: `pip install -r requirements.txt`
+
+### LLM returns empty responses
+- If using OpenAI-compatible: verify API key in `.env`
+- If using Anthropic: verify `ANTHROPIC_API_KEY` and `ANTHROPIC_MODEL`
+- Check model name matches `OPENAI_MODEL` / `ANTHROPIC_MODEL`
+
+### Feature vector or posterior looks weird
+- This is expected! Bayesian posteriors start with high uncertainty.
+- Send a few more messages and rate them — posteriors will stabilize.
+
+### Valence heuristic seems wrong
+- The regex patterns in `utils.py` are intentionally simple.
+- For production, replace with a small classifier model.
+
+---
+
+## License & Attribution
+
+Built as a demonstration of hierarchical Bayesian architecture. Feel free to adapt for your use case.
+
+For questions or contributions, reach out to the team.

anupa/app.py

@@ -0,0 +1,13 @@
+"""Entry point.
+
+Run:
+  pip install -r requirements.txt
+  python app.py
+  open http://localhost:5051
+"""
+
+from backend.server import run_server
+
+
+if __name__ == "__main__":
+    run_server()

anupa/backend/__init__.py

@@ -0,0 +1,10 @@
+"""Backend package for the Adaptive Presentation Engine.
+
+This package contains core modules: configuration, LLM helpers, Bayesian
+engine, utilities, and the HTTP server runner. All internal logic is
+organized here for clean separation from the launcher (app.py).
+"""
+
+from .server import run_server
+
+__all__ = ["run_server"]

anupa/backend/combined_prompt.py

@@ -0,0 +1,458 @@
+"""Single-call combined response + widget generation — Claude-style architecture.
+
+Instead of two sequential LLM calls (response then widget), this module
+lets GPT-4 generate BOTH in one pass:
+
+  Output format:
+    <RESPONSE>
+    [answer text here — follows primitive format rule]
+    </RESPONSE>
+    <WIDGET>
+    [either complete self-contained HTML OR JSON UI schema (depending on WIDGET_MODE)]
+    </WIDGET>
+
+The parser splits these apart. Text goes to chat; widget payload goes to renderer.
+This matches Claude's architecture: one model, one generation, no sequential delay.
+"""
+
+from __future__ import annotations
+
+import re
+from typing import Tuple
+
+from . import config
+from .widget_prompt import inject_design_system
+
+_JSON_WIDGET_RULE = """
+WIDGET JSON SCHEMA MODE (WIDGET_MODE=json):
+- The content inside <WIDGET> MUST be valid JSON (no markdown fences, no comments).
+- Root object: { "version": "1.0", "layout": [ ... ] }
+- layout is an ordered array of blocks (top-to-bottom).
+- Supported block types ONLY (do not invent new ones):
+  - text:
+    { "type": "text", "id": "...", "content": "..." }
+  - kpi_row:
+    { "type": "kpi_row", "id": "...", "items": [ { "label": "...", "value": "...", "tone": "positive|neutral|negative" }, ... ] }
+  - chart:
+    { "type": "chart", "id": "...", "title": "...", "chart": { "kind": "line|bar", "x_label": "...", "y_label": "...", "series": [ { "name": "...", "color": "blue|orange|green|red|purple", "values": [ [x, y], ... ] }, ... ] } }
+  - table:
+    { "type": "table", "id": "...", "title": "...", "columns": [ ... ], "rows": [ [ ... ], ... ] }
+  - action_row:
+    { "type": "action_row", "id": "...", "buttons": [ { "id": "...", "label": "...", "intent": "..." }, ... ] }
+
+Data grounding:
+- Every entity/name/number used in the schema must come from the user message OR the numbers you include in <RESPONSE>.
+- Do not fabricate time series. If you cannot produce real points, use KPIs + a table.
+
+Interactivity:
+- Use action_row buttons to request follow-ups via intent strings (e.g., "explain_methodology", "show_risks").
+"""
+
+
+# ── Design system injected into combined output ────────────────────────────
+
+_DESIGN_SYSTEM_REMINDER = """
+A CSS design system is pre-injected into every widget iframe. Use ONLY these variables:
+--bg, --bg2, --bg3 (backgrounds)  --text, --text2, --text3 (text)
+--border, --border2 (borders)     --accent, --accent-bg, --accent-b (blue)
+--success, --success-bg (green)   --warn, --warn-bg (amber)
+--danger, --danger-bg (red)       --radius, --radius-sm, --radius-pill
+
+Pre-built CSS classes (use them directly, no need to redefine):
+.card .raised .card-title .tabs .tab .panel .search .pills .pill
+.ctrl-row .ctrl-lbl .ctrl-val .btn-group .btn .ask-btn
+.badge .b-blue .b-green .b-amber .b-red .b-gray
+.metric-grid .metric .metric-lbl .metric-val
+.progress-wrap .progress-bar .result-box .result-lbl .result-val .result-sub
+.step-row .step-num .step-title .step-desc .count-lbl .empty
+"""
+
+_SENDPROMPT_RULE = """
+Always define and use this exact bridge function inside <WIDGET>:
+  function sendPrompt(t){window.parent.postMessage({type:"streamlit:setComponentValue",value:t},"*");}
+Every clickable card, row, chip, and button must call sendPrompt with a specific, contextual message.
+"""
+
+_REACTIVE_RUNTIME_RULE = """
+Universal reactive mini-app contract (follow for every widget):
+- Your widget MUST follow this exact execution model:
+  1) Define:
+     - const data = ...      // embedded data derived ONLY from user/context and your <RESPONSE>
+     - const state = {...}   // ALL user inputs (sliders/filters/selections). Initial values must match exact numbers you used in <RESPONSE>.
+  2) Implement:
+     - function compute(state, data) { return {...} }  // pure transforms: filter/aggregate/calc/sort. No network.
+     - function render() { const c = compute(state, data); ... update DOM + chart + table from c ... }
+  3) On load: always call render() once so the widget is never empty.
+  4) On interaction: update state -> call render() immediately (instant UX; never call the LLM on slider drag).
+  5) sendPrompt: ONLY when new knowledge/data is required. Include current state in the prompt.
+
+Charts:
+- MUST use ECharts as the primary visualization library.
+- Allowed CDN (preferred): https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
+- ECharts background must be transparent.
+
+Forbidden (never include):
+- fetch / XMLHttpRequest / WebSocket
+- eval / new Function
+"""
+
+_OUTPUT_CONTRACT_STRICT = """
+OUTPUT CONTRACT (STRICT — MUST FOLLOW)
+You MUST return EXACTLY two sections, in this exact order:
+
+<RESPONSE>
+...text...
+</RESPONSE>
+<WIDGET>
+...widget...
+</WIDGET>
+
+Rules:
+- NEVER omit <WIDGET>.
+- NEVER return only text.
+- If you are uncertain or missing data, STILL return a valid widget that:
+  - clearly labels any values as approximate, and
+  - includes controls + an ECharts chart driven by embedded (approximate) data, and
+  - includes one or more sendPrompt() buttons asking the user for the missing data (e.g., date range / source).
+If you fail to follow this contract, the system will break.
+"""
+
+_LIBRARIES_RULE = """
+Allowed public libraries (CDN) for <WIDGET>:
+- ECharts (BI-grade charts): https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js
+- Plotly.js (high-interactivity charts): https://cdn.plot.ly/plotly-2.30.0.min.js
+- D3.js (bespoke/custom visuals): https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js
+- Tabulator JS (tables): https://cdn.jsdelivr.net/npm/tabulator-tables@6.2.5/dist/js/tabulator.min.js
+- Tabulator CSS: https://cdn.jsdelivr.net/npm/tabulator-tables@6.2.5/dist/css/tabulator.min.css
+- Chart.js (only if truly needed): https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js
+
+Rules:
+- Do NOT use any other external libraries.
+- Choose exactly ONE chart engine for the main visualization: ECharts OR Plotly OR D3.
+- You may use Tabulator concurrently for detail tables.
+- Never mix multiple chart engines for the same chart area.
+
+Color + theming baseline (applies to every engine):
+- Always define a JS palette (array of hex colors) and apply it explicitly to series/marks.
+- Detect dark mode with: const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+- Explicitly set: axis label color, grid line color, legend text color, and tooltip styling.
+
+Library choice guidance (use the best fit; do not force the same layout every time):
+- Time-series trends (date/time x-axis, >=5 points): ECharts line/area + tooltip + subtle dataZoom.
+- Categorical rankings (categories with numeric values): ECharts horizontal bar + click-to-filter + cross-filter table.
+- Composition/share: stacked bars (or 100% stacked) with tooltip value + %; pie/donut only when 3–5 short categories.
+- Distributions:
+  - if you have raw samples: histogram-like bins
+  - if you only have summary stats: do not invent bins; use KPI tiles + short explanation.
+- Correlation/relationship (x-y pairs): ECharts scatter; highlight outliers.
+- Hierarchies: treemap only when parent/child is explicit; otherwise use grouped table.
+- Many series: avoid clutter; use small multiples or series toggles (do not plot >6 lines by default).
+- Tables: Tabulator always for scan/sort/filter when it helps (rows > 8 or user asked for a breakdown).
+- Prose/conceptual answers with no extractable dataset: return <WIDGET></WIDGET> or a compact visual card (no chart/table shells).
+
+Engine-specific rendering requirements:
+- ECharts: option.backgroundColor must be 'transparent'; set textStyle/axis/grid colors from theme.
+- Plotly: set paper_bgcolor/plot_bgcolor to 'rgba(0,0,0,0)'; set layout.font.color and layout.colorway=palette.
+- D3: create SVG with responsive sizing; set tooltip styles; apply palette for strokes/fills.
+"""
+
+_ANALYTICS_DEFAULTS_RULE = """
+Dashboard decision policy (data-driven; do this internally—do not output the reasoning):
+1) DATASET EXTRACTION:
+   - Extract ONE canonical dataset in JS: `const data = [...]` derived from extractable numeric anchors from this conversation:
+     (a) numeric values explicitly present in the user request/context you were given, and
+     (b) any numeric values you include inside <RESPONSE>.
+   - Every KPI/table/chart label and every numeric value used in the widget must be present somewhere in this conversation context (either in the user request/context or in <RESPONSE>).
+2) DATA-SHAPE DETECTION:
+   - Determine shape: time-series, categorical ranking, composition, distribution, correlation, hierarchy, steps/process, or other.
+3) WIDGET WARRANT:
+   - If no extractable dataset (or too few points): return <WIDGET></WIDGET> or a compact single-card visual (no chart/table).
+4) BI LAYOUT (only when warranted):
+   - KPI row (3–6 tiles) → optional Controls row → Primary visualization → optional detail table → Insights (2–4).
+5) CROSS-VIEW INTERACTION:
+   - Any filter/control must update KPIs + chart + table from the SAME filtered dataset.
+6) DRILLDOWN LOOP:
+   - Click chart mark / legend / table row → sendPrompt('...') with clicked entity + metric + relevant time window (if present) + current filter summary.
+7) INSIGHT RULE:
+   - Insights must be computed from the dataset in JS (or computed from extracted values). Do not write obvious generic commentary.
+"""
+
+_COLOR_THEMING_RULE = """
+Color & theming (best-in-class readability + polish):
+- You may choose ANY colors, but they MUST remain readable and “enterprise clean”.
+- Detect dark mode with: const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+- Create theme tokens in JS:
+  - text = dark ? '#e8eaf4' : '#111318'
+  - text2 = dark ? '#8d93aa' : '#5a5f72'
+  - grid = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'
+  - border = dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)'
+- Define palette in JS (hex array) and use it explicitly.
+- Deterministic category coloring:
+  - Build `colorMap` from category keys to palette entries (stable ordering).
+  - Reuse the same `colorMap` for KPIs and chart series/marks.
+- Selection/interaction states:
+  - Hover: subtle opacity/brightness change
+  - Selected: stronger accent (thicker stroke/line), not neon
+- Grid/labels must always be visible: explicitly set label/text/grid colors for the chart engine.
+"""
+
+
+def build_combined_system_prompt(
+    strategy_id: str,
+    format_rule: str,
+    primitive_extra_context: str,
+    user_message: str,
+    forbidden_components: list[str] | None = None,
+    required_components: list[str] | None = None,
+) -> str:
+    """
+    Build the combined system prompt for a single LLM call that outputs
+    both the response text and the widget HTML together.
+
+    Args:
+        strategy_id:              selected strategy name (e.g. 'comparison_table')
+        format_rule:              primitive format instruction for response text
+        primitive_extra_context:  widget layout instructions from primitives.json
+        forbidden_components:     component names the widget MUST NOT use
+        required_components:      component names the widget MUST use
+    """
+    widget_block = ""
+    if primitive_extra_context:
+        widget_block = f"""
+## Widget layout instructions (follow these exactly)
+{primitive_extra_context}
+"""
+
+    constraint_block = ""
+    if forbidden_components:
+        names = ", ".join(forbidden_components)
+        constraint_block += (
+            "\n## FORBIDDEN — do NOT use these components inside <WIDGET>\n"
+            f"{names}\n"
+            "If your HTML contains any of these, the widget will be rejected and replaced.\n"
+        )
+    if required_components:
+        names = ", ".join(required_components)
+        constraint_block += (
+            "\n## REQUIRED — your <WIDGET> MUST contain these components\n"
+            f"{names}\n"
+            "If your HTML is missing any of these, the widget will be rejected and replaced.\n"
+        )
+
+    response_rule_line = (
+        "Follow this exactly for the text inside <RESPONSE>."
+        if getattr(config, "STRICT_PRIMITIVES", False)
+        else "Treat this as a style hint for <RESPONSE> (do not be rigid)."
+    )
+
+    um = (user_message or "").lower()
+    explicit_visual = any(
+        k in um
+        for k in (
+            "plot",
+            "chart",
+            "graph",
+            "visualize",
+            "visualisation",
+            "visualization",
+            "dashboard",
+            "scatter",
+            "line chart",
+            "bar chart",
+            "histogram",
+            "heatmap",
+            "candlestick",
+        )
+    )
+    visual_override_block = ""
+    if explicit_visual:
+        visual_override_block = """
+═══════════════════════════════════════════════════════
+EXPLICIT VISUAL OVERRIDE (from user message)
+═══════════════════════════════════════════════════════
+The user explicitly asked for a visualization. Prioritize a chart/graph in <WIDGET>.
+If the Strategy/Rule suggests a table-only response, you may still answer in a chart-friendly structure and should include an interactive chart in <WIDGET>.
+Do not refuse a chart just because a "comparison_table" style was selected.
+"""
+
+    widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
+    widget_format_line = (
+        "Complete self-contained HTML document for the interactive widget"
+        if widget_mode != "json"
+        else "JSON UI schema ONLY (no HTML) for the widget"
+    )
+
+    widget_rules_header = (
+        "WIDGET RULES — for the HTML inside <WIDGET>"
+        if widget_mode != "json"
+        else "WIDGET RULES — for the JSON schema inside <WIDGET>"
+    )
+
+    widget_rules_body = (
+        f"""- Hard output contract (never violate):
+  - You MUST output BOTH tags exactly once: <RESPONSE>...</RESPONSE> and <WIDGET>...</WIDGET>.
+  - Never omit <WIDGET> tags. If you choose “no widget”, output literally `<WIDGET></WIDGET>` (empty but present).
+- Widget CONTENT is OPTIONAL (based on data), but the <WIDGET> tags are REQUIRED.
+- Choose the UI based on the content in <RESPONSE> (data-driven). Do not follow any fixed template.
+- IMPORTANT: In HTML mode, the content inside <WIDGET> MUST be HTML (not JSON). It must contain opening <html> and closing </html>.
+- Return a COMPLETE, self-contained HTML document (opening <html> to closing </html>).
+- Inline ALL CSS in <style> and ALL JS in <script>. The only external files allowed are the CDNs below (and Tabulator CSS via <link>).
+- {_LIBRARIES_RULE.strip()}
+- {_ANALYTICS_DEFAULTS_RULE.strip()}
+- {_COLOR_THEMING_RULE.strip()}
+- No frameworks (React/Vue/jQuery). Plain HTML + CSS + JS only.
+- body background must be transparent (background:transparent!important).
+- No position:fixed anywhere.
+- Wrap content in <div class="widget-root">.
+- No markdown fences/backticks inside <WIDGET>. Use ONLY raw HTML/CSS/JS.
+- Always call your main render/calc function once on page load so output is never empty (e.g., call `init()` or `render()` at the end of <script>).
+- Charts/tables must be drawn from the embedded dataset immediately after the first render call.
+- Slider/input changes → local calc() only (never sendPrompt on drag).
+- Slider initial values MUST match the exact numbers in your <RESPONSE>. Never invent defaults.
+- Use 0.5px solid borders — never 1px solid.
+- UI (HTML/CSS): use CSS variables only (no hardcoded hex/rgb). Charts (ECharts/Plotly/Chart.js): you MAY use hex colors in JS configs for palettes/series.
+{_REACTIVE_RUNTIME_RULE}
+{_DESIGN_SYSTEM_REMINDER}
+{_SENDPROMPT_RULE}"""
+        if widget_mode != "json"
+        else _JSON_WIDGET_RULE.strip()
+    )
+
+    return f"""You are an expert AI assistant with rich interactive output capabilities.
+
+{_OUTPUT_CONTRACT_STRICT}
+
+For every response you produce TWO sections — response text and an interactive widget — in one generation.
+Default behavior: generate a NON-EMPTY <WIDGET> that turns your own <RESPONSE> into something interactive/visual.
+Only return an EMPTY widget block (<WIDGET></WIDGET>) when the turn is truly not “widget-worthy”:
+- greetings / acknowledgements / chit-chat
+- or ultra-short answers with no structure and no numbers (≈ 1–2 sentences, no steps, no table, no formula)
+
+Important: users should NOT have to ask for “a widget” every time. If your <RESPONSE> contains structure or numbers,
+you are expected to automatically provide the best-fit widget.
+
+Exception (must generate non-empty widget):
+- If the user explicitly requests any of the following: visualization/dashboard/chart/graph/plot, **interactive** output, **widget**, **calculator**, **sliders**, or **interactive table**,
+  OR provides explicit numeric arrays/series/time points in the conversation context,
+  you MUST generate a NON-EMPTY <WIDGET> (not just empty tags).
+  - For calculators/sliders: a compact interactive calculator widget is acceptable even without a “dataset”.
+  - For plots/charts: include at least one interactive chart (ECharts/Plotly/D3) and optionally a sortable table (Tabulator).
+
+Auto-widget triggers (based on what YOU wrote in <RESPONSE>):
+- If <RESPONSE> includes any numeric values, percentages, currency, or formulas → generate an interactive calculator and/or visualization.
+- If <RESPONSE> includes a list of steps or a comparison → generate an interactive checklist, decision table, or sortable table (Tabulator).
+- If <RESPONSE> includes 5+ numeric points or a time series → generate an interactive chart (ECharts/Plotly/D3).
+- If <RESPONSE> includes only 1–4 numeric points → generate KPI tiles + a small chart if it adds value (no fake data).
+{visual_override_block}
+
+═══════════════════════════════════════════════════════
+OUTPUT FORMAT — always use exactly this structure
+═══════════════════════════════════════════════════════
+<RESPONSE>
+[Your answer here — follow the FORMAT RULE below]
+</RESPONSE>
+<WIDGET>
+[{widget_format_line}]
+</WIDGET>
+
+═══════════════════════════════════════════════════════
+RESPONSE FORMAT RULE — {response_rule_line}
+═══════════════════════════════════════════════════════
+Strategy: {strategy_id}
+Rule: {format_rule}
+Do not mention this rule. Do not add <WIDGET> inside <RESPONSE>.
+Important: The chosen Rule applies ONLY inside <RESPONSE>. The <WIDGET> section must follow the WIDGET RULES (not the RESPONSE rule).
+
+═══════════════════════════════════════════════════════
+{widget_rules_header}
+═══════════════════════════════════════════════════════
+{widget_rules_body}
+{widget_block}
+{constraint_block}
+═══════════════════════════════════════════════════════
+DATA GROUNDING — most critical quality rule
+═══════════════════════════════════════════════════════
+Every entity, name, number, ticker, percentage shown in the widget MUST come from either:
+  - the numeric values you extracted from the user request/context, OR
+  - the numeric values present in your <RESPONSE>.
+- Never invent data. Never use placeholder names (Item A, Value 1, Example Fund).
+- If data is missing for a control, omit that control.
+- Verify every chart/table label and every numeric literal used in JS appears in either your <RESPONSE> or the user-provided/context values.
+- Do not create placeholder dates, tickers, or values to make the widget “look full”.
+
+═══════════════════════════════════════════════════════
+sendPrompt specificity — always specific, never generic
+═══════════════════════════════════════════════════════
+GOOD: sendPrompt('What are the risks of VTI at 0.03% expense ratio?')
+BAD:  sendPrompt('Tell me more')
+BAD:  sendPrompt('Click for details')
+"""
+
+
+def build_combined_user_prompt(
+    user_message: str,
+    history: list[dict],
+    max_history: int = 4,
+) -> str:
+    """Build the user-turn prompt including conversation history."""
+    ctx: list[str] = []
+    for turn in history[-max_history:]:
+        u = turn.get("user", "")
+        a = turn.get("assistant", "")
+        if u:
+            ctx.append(f"User: {u}")
+        if a:
+            # Strip any <WIDGET>...</WIDGET> from stored history to keep it concise.
+            a_clean = re.sub(r"<WIDGET>.*?</WIDGET>", "", a, flags=re.DOTALL).strip()
+            ctx.append(f"Assistant: {a_clean}")
+    ctx.append(f"User: {user_message}")
+    return "\n".join(ctx)
+
+
+def parse_combined_output(raw: str) -> Tuple[str, str]:
+    """
+    Parse model combined output into (response_text, widget_payload).
+
+    Returns:
+        (response_text, widget_payload)
+        Either can be empty string if the tag is missing or parsing fails.
+    """
+    response_text = ""
+    widget_payload = ""
+
+    # Extract <RESPONSE>...</RESPONSE>
+    resp_match = re.search(r"<RESPONSE>(.*?)</RESPONSE>", raw, re.DOTALL | re.IGNORECASE)
+    if resp_match:
+        response_text = resp_match.group(1).strip()
+    else:
+        # Fallback: everything before <WIDGET> is the response
+        widget_start = raw.find("<WIDGET>")
+        if widget_start == -1:
+            widget_start_upper = raw.upper().find("<WIDGET>")
+            if widget_start_upper != -1:
+                widget_start = widget_start_upper
+        if widget_start > 0:
+            response_text = raw[:widget_start].strip()
+        else:
+            response_text = raw.strip()
+
+    # Extract <WIDGET>...</WIDGET>
+    widget_match = re.search(r"<WIDGET>(.*?)</WIDGET>", raw, re.DOTALL | re.IGNORECASE)
+    if widget_match:
+        raw_widget = widget_match.group(1).strip()
+        # Strip markdown fences if model wrapped in ```...```
+        if "```" in raw_widget:
+            fence = re.search(r"```(?:json|html)?\s*(.*?)```", raw_widget, re.DOTALL | re.IGNORECASE)
+            raw_widget = fence.group(1).strip() if fence else re.sub(r"```\w*", "", raw_widget).strip()
+
+        widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
+        if widget_mode == "json":
+            widget_payload = raw_widget
+        else:
+            if "<" in raw_widget and ">" in raw_widget:
+                if "<html" not in raw_widget.lower():
+                    raw_widget = f"<html><head></head><body>{raw_widget}</body></html>"
+                raw_widget = re.sub(r"<!DOCTYPE[^>]*>", "", raw_widget, flags=re.IGNORECASE).strip()
+                widget_payload = inject_design_system(raw_widget)
+
+    return response_text, widget_payload

anupa/backend/config.py

@@ -0,0 +1,86 @@
+"""Configuration and constants for the Adaptive Presentation Engine backend."""
+
+from pathlib import Path
+from dotenv import load_dotenv
+import os
+
+load_dotenv(override=True)
+# Runtime mode: 'openai_compat' uses an OpenAI-compatible remote API,
+# otherwise the code will prefer Anthropic (Claude) endpoints.
+LLM_MODE = os.getenv("LLM_MODE", "openai_compat").lower()
+
+# If false (default), strategy “primitives” are treated as soft style hints
+# and the backend will not aggressively post-process text to enforce them.
+STRICT_PRIMITIVES = os.getenv("STRICT_PRIMITIVES", "0").strip().lower() in {"1", "true", "yes", "on"}
+
+# Provider routing:
+# - /api/chat_plain uses BASELINE_LLM_MODE
+# - /api/chat uses ADAPTIVE_LLM_MODE
+BASELINE_LLM_MODE = os.getenv("BASELINE_LLM_MODE", LLM_MODE).lower()
+ADAPTIVE_LLM_MODE = os.getenv("ADAPTIVE_LLM_MODE", LLM_MODE).lower()
+
+# Widget rendering mode:
+# - "html": model outputs full HTML in <WIDGET> (rendered in iframe)
+# - "json": model outputs JSON UI schema in <WIDGET> (rendered by frontend renderer)
+WIDGET_MODE = os.getenv("WIDGET_MODE", "json").strip().lower()
+
+# Combined (Claude-style) generation limits
+COMBINED_TIMEOUT_SECONDS = int(os.getenv("COMBINED_TIMEOUT_SECONDS", "30"))
+COMBINED_MAX_TOKENS = int(os.getenv("COMBINED_MAX_TOKENS", "2800"))
+
+# OpenAI-compatible endpoint (Groq / other providers that offer OpenAI API)
+OPENAI_BASE_URL = os.getenv("OPENAI_BASE_URL", "https://api.groq.com/openai/v1")
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY", "")
+OPENAI_MODEL = os.getenv("OPENAI_MODEL", "llama-3.1-8b-instant")
+
+# Anthropic (Claude) API
+ANTHROPIC_API_KEY = os.getenv("ANTHROPIC_API_KEY", "")
+ANTHROPIC_MODEL = os.getenv("ANTHROPIC_MODEL", "claude-opus-4-6")
+
+# Anthropic Fast Mode (optional; safe to enable because we retry on failure)
+# Implementation uses the Anthropic beta header + request body speed field via SDK-supported
+# `extra_headers` / `extra_body`.
+ANTHROPIC_FAST_MODE_ENABLED = os.getenv("ANTHROPIC_FAST_MODE_ENABLED", "1").strip().lower() in {
+    "1", "true", "yes", "on"
+}
+ANTHROPIC_FAST_MODE_SPEED = os.getenv("ANTHROPIC_FAST_MODE_SPEED", "fast")  # "fast" or "standard"
+ANTHROPIC_FAST_MODE_BETA = os.getenv("ANTHROPIC_FAST_MODE_BETA", "fast-mode-2026-02-01")
+
+# Model / engine hyperparameters
+D = 10
+LAMBDA = 0.01
+GAMMA = 0.99
+ALPHA_G = 0.05
+
+# Base Thompson temperature (used when not forcing exploration)
+TS_TEMPERATURE = float(os.getenv("TS_TEMPERATURE", "2.0"))
+
+# ---- Exploration / correction knobs (Option B) ----
+# When we detect strong negative feedback, we:
+#  - boost temperature (more exploration)
+#  - penalize repeating the last strategy (strongly)
+#  - damp the posterior for the last strategy (reduce confidence)
+NEG_EXPLORE_THRESHOLD = float(os.getenv("NEG_EXPLORE_THRESHOLD", "0.40"))  # ev["neg"] >= this => explore
+EXPLORE_TEMP_BOOST = float(os.getenv("EXPLORE_TEMP_BOOST", "2.0"))
+EXPLORE_SCORE_PENALTY = float(os.getenv("EXPLORE_SCORE_PENALTY", "1.75"))
+
+# Posterior damping strength (scaled by neg_strength in [0,1])
+NEG_MU_SHRINK = float(os.getenv("NEG_MU_SHRINK", "0.25"))          # shrink mean magnitude
+NEG_SINV_SHRINK = float(os.getenv("NEG_SINV_SHRINK", "0.35"))      # shrink precision -> bigger covariance
+
+# Strategy primitives and descriptions used to constrain generation style
+STRATEGIES = {
+    "structured_bullets": "Use 3-5 bullet points only (start each line with '- '). No intro sentence. Do NOT ask questions. Do NOT use numbered lists.",
+    "narrative_prose":    "Write 2-3 short paragraphs. No bullet points.",
+    "concise_direct":     "Reply in at most 3 sentences. Be direct.",
+    "socratic_questions": "Brief acknowledgement, then ask 1-2 clarifying questions.",
+    "step_by_step":       "Numbered list of 3-6 steps only.",
+    # NEW
+    "comparison_table":   "Return a single MARKDOWN TABLE only. Use columns that help compare options (e.g., Option | Pros | Cons | Best for). No bullets outside the table.",
+    "visualization":      "Return a simple TEXT visualization only (ASCII bar chart or small table-of-values). Put it in a fenced code block. No extra prose outside the code block.",
+}
+STRATEGY_NAMES = list(STRATEGIES.keys())
+K = len(STRATEGY_NAMES)
+
+HERE = Path(__file__).resolve().parent
+INDEX_HTML = HERE.parent / "index.html"

anupa/backend/engine.py

@@ -0,0 +1,211 @@
+"""Bayesian engine for selecting and updating response strategies.
+
+Implements a lightweight contextual bandit (Thompson sampling style) over
+presentation strategies. Supports:
+- soft preferences (bias, not lock)
+- optional hard lock (user can disable exploration)
+- Option B corrective exploration after negative feedback:
+    * temperature boost
+    * strong repeat penalty
+    * posterior damping (reduce confidence in last chosen arm)
+"""
+
+import numpy as np
+import random
+
+from . import config
+from .utils import sigmoid, mean_uncertainty
+
+
+class BayesianEngine:
+    def __init__(self):
+        self.global_mu   = {k: np.zeros(config.D)      for k in config.STRATEGY_NAMES}
+        self.global_sinv = {k: np.eye(config.D) * 0.1  for k in config.STRATEGY_NAMES}
+        self.users = {}
+        self.global_n = 0
+
+    def _new_user(self):
+        return {
+            "mu":            {k: self.global_mu[k].copy()   for k in config.STRATEGY_NAMES},
+            "sigma_inv":     {k: self.global_sinv[k].copy() for k in config.STRATEGY_NAMES},
+            "history":       [],
+            "reward_log":    [],
+            "last_message":  "",
+            "last_response": "",
+            "last_strategy": None,
+            "last_x":        None,
+            "msg_count":     0,
+            "prefs":         set(),
+            "locked_strategy": None,
+            "pending_strategy": None,
+        }
+
+    def get_user(self, uid: str):
+        if uid not in self.users:
+            self.users[uid] = self._new_user()
+        return self.users[uid]
+
+    def featurize(self, message: str, user: dict) -> np.ndarray:
+        words   = message.split()
+        msg_len = min(len(message) / 500, 1.0)
+        word_ct = min(len(words) / 100, 1.0)
+        has_q   = 1.0 if "?" in message else 0.0
+        is_long = 1.0 if len(words) > 40 else 0.0
+        informal = {"lol","gonna","wanna","yo","omg","idk","wtf","lmao"}
+        formal  = 0.0 if any(w in message.lower() for w in informal) else 1.0
+        rl      = user["reward_log"]
+        avg_r   = sum(r for _, r in rl[-5:]) / max(len(rl[-5:]), 1) if rl else 0.5
+        msg_num = min(user["msg_count"] / 20.0, 1.0)
+        si      = config.STRATEGY_NAMES.index(user["last_strategy"]) / (config.K-1) if user["last_strategy"] else 0.5
+        trend   = 0.0
+        if len(rl) >= 3:
+            ys = [r for _, r in rl[-5:]]
+            xs = list(range(len(ys)))
+            mx, my = sum(xs)/len(xs), sum(ys)/len(ys)
+            num = sum((xi-mx)*(yi-my) for xi, yi in zip(xs, ys))
+            den = sum((xi-mx)**2 for xi in xs) or 1e-8
+            trend = float(np.clip(num/den, -1, 1))
+        # last dim is just a small noise to break ties
+        return np.array([msg_len, word_ct, has_q, is_long,
+                         formal, avg_r, msg_num, si, trend, random.random()])
+
+    def _damp_posterior(self, user: dict, strategy: str, strength: float):
+        """Option B: reduce confidence in the last chosen strategy."""
+        if strategy not in config.STRATEGY_NAMES:
+            return
+        s = float(np.clip(strength, 0.0, 1.0))
+        if s <= 0:
+            return
+        # shrink mean magnitude
+        mu = user["mu"][strategy]
+        user["mu"][strategy] = mu * (1.0 - config.NEG_MU_SHRINK * s)
+
+        # shrink precision -> increases covariance (more uncertainty)
+        fac = max(0.15, 1.0 - config.NEG_SINV_SHRINK * s)
+        user["sigma_inv"][strategy] = user["sigma_inv"][strategy] * fac
+
+    def select(self, uid: str, message: str, *,
+               force_explore: bool = False,
+               neg_strength: float = 0.0,
+               explicit_strategy: str | None = None):
+        """Return (chosen, scores, x, prev_strategy)."""
+        user = self.get_user(uid)
+        prev = user.get("last_strategy")
+        x = self.featurize(message, user)
+
+        # One-time override: honor the upfront user-selected format once,
+        # then return to adaptive Thompson Sampling on later turns.
+        pending = user.get("pending_strategy")
+        if pending in config.STRATEGY_NAMES:
+            user["pending_strategy"] = None
+            return pending, {k: 0.0 for k in config.STRATEGY_NAMES}, x, prev
+
+        # If user explicitly asked for a format, obey immediately.
+        # Hard-lock disables exploration, but should NOT block an explicit request like
+        # "compare X vs Y" or "put it in a table".
+        locked = user.get("locked_strategy")
+        if locked in config.STRATEGY_NAMES:
+            force_explore = False
+            if explicit_strategy is None:
+                explicit_strategy = locked
+
+        # Corrective exploration: damp posterior on prev to avoid getting stuck.
+        if force_explore and prev:
+            self._damp_posterior(user, prev, neg_strength)
+
+        # Build TS scores
+        temp = config.TS_TEMPERATURE * (config.EXPLORE_TEMP_BOOST if force_explore else 1.0)
+        scores = {}
+        for k in config.STRATEGY_NAMES:
+            sigma = np.linalg.inv(user["sigma_inv"][k])
+            beta = np.random.multivariate_normal(user["mu"][k], sigma * temp)
+            scores[k] = float(sigmoid(x @ beta))
+
+        # Soft preference nudges (does NOT lock)
+        pref_boost = 0.06
+        for s in user.get("prefs", set()):
+            if s in scores:
+                scores[s] = float(min(0.999, scores[s] + pref_boost))
+
+        # Strong anti-repeat penalty when exploring (unless explicit override)
+        if force_explore and prev and prev in scores and explicit_strategy is None and len(config.STRATEGY_NAMES) > 1:
+            scores[prev] = float(scores[prev] - config.EXPLORE_SCORE_PENALTY)
+
+        # Choose
+        # Explicit user request (e.g., "compare", "table", "graph") should win even if the user
+        # previously hard-locked a default style. The lock only disables exploration.
+        if explicit_strategy in config.STRATEGY_NAMES:
+            chosen = explicit_strategy
+        elif locked in config.STRATEGY_NAMES:
+            chosen = locked
+        else:
+            chosen = max(scores, key=scores.get)
+
+        return chosen, scores, x, prev
+
+    def update(self, uid: str, strategy: str, x: np.ndarray, reward: float):
+        user   = self.get_user(uid)
+        mu_old = user["mu"][strategy]
+        si_old = user["sigma_inv"][strategy]
+        r_hat  = sigmoid(float(x @ mu_old))
+        w      = r_hat * (1 - r_hat)
+
+        si_new = config.GAMMA * si_old + np.outer(x, x) * w + config.LAMBDA * np.eye(config.D)
+        s_new  = np.linalg.inv(si_new)
+        user["mu"][strategy]        = mu_old + s_new @ x * (reward - r_hat)
+        user["sigma_inv"][strategy] = si_new
+        user["reward_log"].append((strategy, reward))
+
+        # Global update
+        gmu    = self.global_mu[strategy]
+        gsi    = self.global_sinv[strategy]
+        gr_hat = sigmoid(float(x @ gmu))
+        gsi_n  = config.GAMMA*gsi + np.outer(x,x)*gr_hat*(1-gr_hat)*config.ALPHA_G + config.LAMBDA*np.eye(config.D)
+        gs_n   = np.linalg.inv(gsi_n)
+        self.global_mu[strategy]   = gmu + gs_n @ x * (reward - gr_hat) * config.ALPHA_G
+        self.global_sinv[strategy] = gsi_n
+        self.global_n += 1
+
+    def apply_preferences(self, uid: str, strategy_names, *, lock: bool = False):
+        """Apply soft preferences and optional hard lock.
+
+        Behavior:
+        - if lock=True and exactly one strategy is chosen: always use that strategy
+        - if lock=False and exactly one strategy is chosen: force it ONCE on the next turn,
+          then return to adaptive TS with preference bias
+        """
+        user = self.get_user(uid)
+        chosen = [s for s in (strategy_names or []) if s in config.STRATEGY_NAMES]
+        user["prefs"] = set(chosen)
+
+        # hard lock only if explicitly requested
+        user["locked_strategy"] = chosen[0] if (lock and len(chosen) == 1) else None
+
+        # one-turn override for the very next assistant response
+        user["pending_strategy"] = chosen[0] if (not lock and len(chosen) == 1) else None
+
+        # warm-start: nudge mean for preferred arms
+        for s in user["prefs"]:
+            user["mu"][s] = user["mu"][s] + 0.5
+
+    def posterior_summary(self, mu_dict, sinv_dict, x=None):
+        if x is None:
+            x = np.ones(config.D) * 0.5
+        return {k: {"r": round(float(sigmoid(x @ mu_dict[k])), 4),
+                    "u": round(mean_uncertainty(sinv_dict[k]), 4)}
+                for k in config.STRATEGY_NAMES}
+
+    def user_posterior(self, uid: str, x=None):
+        u = self.get_user(uid)
+        return self.posterior_summary(u["mu"], u["sigma_inv"], x)
+
+    def global_posterior(self, x=None):
+        return self.posterior_summary(self.global_mu, self.global_sinv, x)
+
+    def reset_user(self, uid: str):
+        self.users.pop(uid, None)
+
+
+engine = BayesianEngine()
+USERB_ID = "__user_b__"
+engine.get_user(USERB_ID)

anupa/backend/llm.py

@@ -0,0 +1,247 @@
+"""LLM helpers for Anthropic and OpenAI-compatible endpoints.
+
+This module centralizes HTTP calls and provides small helpers used by the
+server to call either Anthropic (Claude) or an OpenAI-compatible API.
+"""
+
+import json
+import urllib.request
+import urllib.error
+import socket
+import time
+import concurrent.futures
+from typing import Tuple
+
+from . import config
+
+try:
+    import anthropic  # type: ignore
+except Exception:  # pragma: no cover
+    anthropic = None
+    _anthropic_import_error = "import_failed"
+else:
+    _anthropic_import_error = ""
+
+
+def _post_json_url(url: str, payload: dict, headers: dict | None = None, timeout: int = 120) -> dict:
+    """POST JSON and return decoded response.
+
+    Raises the underlying urllib errors to the caller for handling.
+    """
+    data = json.dumps(payload).encode("utf-8")
+    req  = urllib.request.Request(url, data=data, method="POST")
+    req.add_header("Content-Type", "application/json")
+    req.add_header("User-Agent", "Mozilla/5.0")
+    if headers:
+        for k, v in headers.items():
+            req.add_header(k, v)
+    with urllib.request.urlopen(req, timeout=timeout) as resp:
+        return json.loads(resp.read().decode("utf-8"))
+
+
+def _get_json_url(url: str, headers: dict | None = None, timeout: int = 15) -> dict:
+    """GET from a URL and return the decoded JSON response.
+
+    Args:
+        url: Target URL.
+        headers: Optional dict of additional HTTP headers.
+        timeout: Request timeout in seconds.
+
+    Returns:
+        Decoded JSON response as a dict.
+    """
+    req = urllib.request.Request(url, method="GET")
+    req.add_header("User-Agent", "Mozilla/5.0")
+    if headers:
+        for k, v in headers.items():
+            req.add_header(k, v)
+    with urllib.request.urlopen(req, timeout=timeout) as r:
+        return json.loads(r.read().decode("utf-8"))
+
+
+def call_openai_compat(
+    prompt: str,
+    system: str,
+    timeout: int = 120,
+    max_tokens: int = 400,
+    temperature: float = 0.2,
+) -> Tuple[str, float, str]:
+    """Call an OpenAI-compatible chat/completions endpoint.
+
+    Returns (text, elapsed_seconds, mode).
+    """
+    if not config.OPENAI_API_KEY:
+        raise RuntimeError("Missing OPENAI_API_KEY env var")
+    t0 = time.time()
+    payload = {
+        "model": config.OPENAI_MODEL,
+        "messages": [
+            {"role": "system", "content": system},
+            {"role": "user", "content": prompt},
+        ],
+        "temperature": temperature,
+        "max_tokens": max_tokens,
+    }
+    headers = {"Authorization": f"Bearer {config.OPENAI_API_KEY}"}
+    data = _post_json_url(f"{config.OPENAI_BASE_URL}/chat/completions", payload, headers=headers, timeout=timeout)
+    text = (((data.get("choices") or [{}])[0].get("message") or {}).get("content") or "").strip()
+    return (text or str(data)), round(time.time() - t0, 1), "openai_compat"
+
+
+def call_anthropic(
+    prompt: str,
+    system: str,
+    timeout: int = 120,
+    max_tokens: int = 400,
+    temperature: float = 0.2,
+) -> Tuple[str, float, str]:
+    """Call Anthropic Messages API (Claude) and return (text, elapsed_seconds, mode)."""
+    if not config.ANTHROPIC_API_KEY:
+        raise RuntimeError("Missing ANTHROPIC_API_KEY env var")
+    if anthropic is None:
+        raise RuntimeError(f"Missing `anthropic` package. Import error: {_anthropic_import_error}")
+
+    fast_kwargs = {}
+    if getattr(config, "ANTHROPIC_FAST_MODE_ENABLED", False):
+        fast_kwargs = {
+            # Fast Mode is controlled by the `anthropic-beta` header.
+            "extra_headers": {"anthropic-beta": getattr(config, "ANTHROPIC_FAST_MODE_BETA", "fast-mode-2026-02-01")},
+            # SDK may not expose `speed` directly in our version, but it can be set via extra_body.
+            "extra_body": {"speed": getattr(config, "ANTHROPIC_FAST_MODE_SPEED", "fast")},
+        }
+
+    t0 = time.time()
+    client = anthropic.Anthropic(api_key=config.ANTHROPIC_API_KEY)
+
+    # Anthropic SDK handles timeouts internally; we keep our signature for parity.
+    # Some SDK/provider combinations may ignore the SDK-level timeout and hang
+    # for a long time. Enforce a wall-clock timeout so the server can respond
+    # with an error instead of freezing the UI.
+    def _create(with_fast: dict) -> object:
+        return client.messages.create(
+            model=config.ANTHROPIC_MODEL,
+            max_tokens=max_tokens,
+            temperature=temperature,
+            system=system,
+            messages=[{"role": "user", "content": prompt}],
+            timeout=timeout,
+            **with_fast,
+        )
+
+    msg = None
+    try:
+        ex = concurrent.futures.ThreadPoolExecutor(max_workers=1)
+        try:
+            fut = ex.submit(_create, fast_kwargs)
+            msg = fut.result(timeout=timeout)
+        finally:
+            # Do not block waiting for a stuck SDK call to finish.
+            ex.shutdown(wait=False, cancel_futures=True)
+    except concurrent.futures.TimeoutError as e:
+        raise RuntimeError(f"Anthropic request timed out after {timeout}s") from e
+    except Exception:
+        # If Fast Mode beta isn't accepted for this request/model/SDK version, retry normally.
+        ex = concurrent.futures.ThreadPoolExecutor(max_workers=1)
+        try:
+            fut = ex.submit(_create, {})
+            msg = fut.result(timeout=timeout)
+        finally:
+            ex.shutdown(wait=False, cancel_futures=True)
+
+    # `content` is typically a list of blocks; concatenate everything we can.
+    # This avoids missing parts of the model output if some blocks don't expose
+    # `.text` (e.g., non-text block representations).
+    texts: list[str] = []
+    for block in getattr(msg, "content", []) or []:
+        t = getattr(block, "text", None)
+        if t is not None:
+            texts.append(str(t))
+        else:
+            texts.append(str(block))
+    text = "\n".join([t for t in texts if t]).strip()
+    if not text:
+        # Fallback: stringify response object.
+        text = str(msg).strip()
+
+    return text, round(time.time() - t0, 1), "anthropic"
+
+
+def stream_anthropic(
+    prompt: str,
+    system: str,
+    timeout: int = 120,
+    max_tokens: int = 400,
+    temperature: float = 0.2,
+):
+    """Yield Anthropic content deltas (token-by-token).
+
+    Yields:
+        str chunks of text from `content_block_delta`.
+    """
+    if not config.ANTHROPIC_API_KEY:
+        raise RuntimeError("Missing ANTHROPIC_API_KEY env var")
+    if anthropic is None:
+        raise RuntimeError(f"Missing `anthropic` package. Import error: {_anthropic_import_error}")
+
+    client = anthropic.Anthropic(api_key=config.ANTHROPIC_API_KEY)
+
+    fast_kwargs = {}
+    if getattr(config, "ANTHROPIC_FAST_MODE_ENABLED", False):
+        fast_kwargs = {
+            "extra_headers": {"anthropic-beta": getattr(config, "ANTHROPIC_FAST_MODE_BETA", "fast-mode-2026-02-01")},
+            "extra_body": {"speed": getattr(config, "ANTHROPIC_FAST_MODE_SPEED", "fast")},
+        }
+
+    try:
+        with client.messages.stream(
+            model=config.ANTHROPIC_MODEL,
+            max_tokens=max_tokens,
+            temperature=temperature,
+            system=system,
+            messages=[{"role": "user", "content": prompt}],
+            timeout=timeout,
+            **fast_kwargs,
+        ) as stream:
+            for event in stream:
+                if getattr(event, "type", None) == "content_block_delta":
+                    delta = getattr(event, "delta", None)
+                    chunk = getattr(delta, "text", None) if delta is not None else None
+                    if chunk:
+                        yield str(chunk)
+    except Exception:
+        # Retry without fast-mode params.
+        with client.messages.stream(
+            model=config.ANTHROPIC_MODEL,
+            max_tokens=max_tokens,
+            temperature=temperature,
+            system=system,
+            messages=[{"role": "user", "content": prompt}],
+            timeout=timeout,
+        ) as stream:
+            for event in stream:
+                if getattr(event, "type", None) == "content_block_delta":
+                    delta = getattr(event, "delta", None)
+                    chunk = getattr(delta, "text", None) if delta is not None else None
+                    if chunk:
+                        yield str(chunk)
+
+
+def openai_health(timeout: int = 10) -> dict:
+    """Return basic health info for an OpenAI-compatible endpoint."""
+    try:
+        headers = {"Authorization": f"Bearer {config.OPENAI_API_KEY}"} if config.OPENAI_API_KEY else {}
+        data = _get_json_url(f"{config.OPENAI_BASE_URL}/models", headers=headers, timeout=timeout)
+        ids = [m.get("id") for m in (data.get("data") or []) if isinstance(m, dict)]
+        return {"ok": True, "reachable": True, "models": ids[:25]}
+    except Exception as e:
+        return {"ok": False, "reachable": False, "models": [], "error": str(e)}
+
+
+def anthropic_health() -> dict:
+    """Return basic health info for Anthropic configuration.
+
+    Anthropic does not expose a simple unauthenticated models endpoint like OpenAI.
+    We keep this as a lightweight config check.
+    """
+    ok = bool(getattr(config, "ANTHROPIC_API_KEY", "") and getattr(config, "ANTHROPIC_MODEL", ""))
+    return {"ok": ok, "reachable": ok, "model": getattr(config, "ANTHROPIC_MODEL", "")}

anupa/backend/primitive_widget_map.py

@@ -0,0 +1,476 @@
+"""Primitive-driven widget contracts, validator, and Claude-quality fallback templates.
+
+Each primitive in primitives.json defines:
+  - required_components: HTML signals that must appear in generated widget.
+  - forbidden_components: signals that must NOT appear.
+  - extra_context: injected into build_widget_prompt() to steer the model.
+  - fallback_type: which deterministic template to render if model violates contract.
+"""
+
+from __future__ import annotations
+
+import html as _html_mod
+import json
+import re
+from pathlib import Path
+from typing import Any
+
+from .widget_prompt import inject_design_system
+
+# ── Load primitives from JSON ──────────────────────────────────────────────
+
+_PRIMITIVES_PATH = Path(__file__).resolve().parent / "primitives.json"
+
+def _load_primitives() -> dict[str, Any]:
+    try:
+        return json.loads(_PRIMITIVES_PATH.read_text(encoding="utf-8"))
+    except Exception:
+        return {}
+
+PRIMITIVES: dict[str, Any] = _load_primitives()
+
+_DEFAULT_SPEC: dict[str, Any] = {
+    "required_components": [],
+    "forbidden_components": [],
+    "extra_context": "",
+    "fallback_type": "generic",
+}
+
+
+def get_primitive_spec(strategy_id: str) -> dict[str, Any]:
+    return PRIMITIVES.get(strategy_id, _DEFAULT_SPEC)
+
+
+# ── Component signal registry ──────────────────────────────────────────────
+
+_COMPONENT_SIGNALS: dict[str, list[str]] = {
+    "range_slider":       ['type="range"', "type='range'"],
+    "calculator":         ["function calc(", "oninput=\"calc(", "oninput='calc("],
+    "comparison_cards":   ["class=\"raised", "class='raised", "comparison", "highlight"],
+    "tabs":               ["class=\"tab", "class='tab", ".panel"],
+    "step_navigator":     ["step-row", "step-num", "step_row"],
+    "chart":              ["<canvas", "Chart(", "new Chart"],
+    "insight_cards":      ["class=\"card", "class='card", "card-title"],
+    "result_box":         ["result-box", "result-val"],
+    "prompt_chips":       ["pill", "sendPrompt"],
+    "insight_card":       ["class=\"card", "class='card"],
+    "search":             ['type="text"', 'oninput="filter', 'oninput=\'filter'],
+    "progress_bars":      ["progress-bar", "progress-wrap"],
+}
+
+def _html_has(html: str, signals: list[str]) -> bool:
+    return any(s.lower() in html.lower() for s in signals)
+
+
+def validate_widget_html(html: str, spec: dict[str, Any]) -> tuple[bool, str]:
+    """Return (valid, reason). Invalid means model violated primitive contract."""
+    if not html:
+        return False, "empty_html"
+    for comp in spec.get("required_components", []):
+        sigs = _COMPONENT_SIGNALS.get(comp, [comp])
+        if not _html_has(html, sigs):
+            return False, f"missing_required:{comp}"
+    for comp in spec.get("forbidden_components", []):
+        sigs = _COMPONENT_SIGNALS.get(comp, [comp])
+        if _html_has(html, sigs):
+            return False, f"forbidden_component:{comp}"
+    return True, ""
+
+
+# ── Escape helper ──────────────────────────────────────────────────────────
+
+def _e(s: str) -> str:
+    return _html_mod.escape(str(s or ""), quote=True)
+
+
+# ── Fallback template helpers ──────────────────────────────────────────────
+
+def _parse_bullets(response: str) -> list[dict[str, str]]:
+    """Extract bullet points as {title, body} dicts."""
+    lines = response.split("\n")
+    items: list[dict[str, str]] = []
+    for line in lines:
+        stripped = line.strip()
+        for prefix in ("-", "•", "*", "→"):
+            if stripped.startswith(prefix):
+                text = stripped[len(prefix):].strip()
+                if ":" in text:
+                    parts = text.split(":", 1)
+                    items.append({"title": parts[0].strip(), "body": parts[1].strip()})
+                else:
+                    items.append({"title": text[:50], "body": text})
+                break
+        if len(items) >= 6:
+            break
+    return items or [{"title": "Key Point", "body": response[:200]}]
+
+
+def _parse_steps(response: str) -> list[dict[str, str]]:
+    """Extract numbered steps as {title, body} dicts."""
+    lines = response.split("\n")
+    items: list[dict[str, str]] = []
+    for line in lines:
+        stripped = line.strip()
+        m = re.match(r"^(\d+)[.)]\s+(.+)$", stripped)
+        if m:
+            text = m.group(2).strip()
+            if ":" in text:
+                parts = text.split(":", 1)
+                items.append({"title": parts[0].strip(), "body": parts[1].strip()})
+            else:
+                items.append({"title": f"Step {m.group(1)}", "body": text})
+        if len(items) >= 8:
+            break
+    return items or [{"title": "Step 1", "body": response[:200]}]
+
+
+def _parse_questions(response: str) -> list[str]:
+    """Extract clarifying questions from response text."""
+    lines = response.split("\n")
+    qs: list[str] = []
+    for line in lines:
+        stripped = line.strip()
+        stripped = re.sub(r"^[-•*\d.)]+\s*", "", stripped)
+        if "?" in stripped and len(stripped) > 10:
+            qs.append(stripped)
+        if len(qs) >= 4:
+            break
+    return qs or ["Can you tell me more about what you're looking for?"]
+
+
+def _parse_sections(response: str) -> list[dict[str, str]]:
+    """Split response into 2-3 labelled sections for tabs."""
+    paragraphs = [p.strip() for p in re.split(r"\n{2,}", response) if p.strip()]
+    if len(paragraphs) >= 3:
+        return [
+            {"label": "Summary", "body": paragraphs[0]},
+            {"label": "Details", "body": " ".join(paragraphs[1:-1])},
+            {"label": "Takeaways", "body": paragraphs[-1]},
+        ]
+    if len(paragraphs) == 2:
+        return [
+            {"label": "Overview", "body": paragraphs[0]},
+            {"label": "Details", "body": paragraphs[1]},
+        ]
+    return [{"label": "Response", "body": response[:600]}]
+
+
+def _parse_markdown_table(response: str) -> tuple[list[str], list[list[str]]] | None:
+    lines = [ln.strip() for ln in response.splitlines() if ln.strip()]
+    if len(lines) < 2:
+        return None
+
+    def split_row(line: str) -> list[str]:
+        txt = line.strip()
+        if txt.startswith("|"):
+            txt = txt[1:]
+        if txt.endswith("|"):
+            txt = txt[:-1]
+        return [c.strip() for c in txt.split("|")]
+
+    def is_sep(line: str) -> bool:
+        cells = split_row(line)
+        if not cells:
+            return False
+        return all(bool(re.match(r"^:?-{3,}:?$", c)) for c in cells)
+
+    for i in range(len(lines) - 1):
+        head_ln = lines[i]
+        sep_ln = lines[i + 1]
+        if "|" not in head_ln or not is_sep(sep_ln):
+            continue
+        cols = split_row(head_ln)
+        if not cols:
+            continue
+
+        rows: list[list[str]] = []
+        for ln in lines[i + 2:]:
+            if "|" not in ln:
+                break
+            row = split_row(ln)
+            if not row:
+                break
+            while len(row) < len(cols):
+                row.append("")
+            rows.append(row[: len(cols)])
+        if rows:
+            return cols, rows
+    return None
+
+
+# ── Fallback template builders ─────────────────────────────────────────────
+
+def _fallback_comparison(user_message: str, response: str) -> str:
+    parsed_table = _parse_markdown_table(response)
+    if parsed_table:
+        cols, rows = parsed_table
+        table_head = "".join(f"<th>{_e(c)}</th>" for c in cols)
+        body_rows = []
+        option_idx = 0
+        if cols:
+            c0 = cols[0].strip().lower()
+            if c0 in {"option", "plan", "item", "choice", "name"}:
+                option_idx = 0
+        for row in rows[:8]:
+            item_name = row[option_idx] if option_idx < len(row) else row[0]
+            cells = "".join(f"<td>{_e(v)}</td>" for v in row)
+            body_rows.append(
+                f"""<tr class="clickable"
+ onclick="sendPrompt('Tell me more about {_e(item_name)} from this comparison table')">{cells}</tr>"""
+            )
+        table_html = f"""
+<table>
+  <thead><tr>{table_head}</tr></thead>
+  <tbody>{''.join(body_rows)}</tbody>
+</table>
+"""
+        return f"""<html><head></head><body><div class="widget-root">
+<div class="tabs">
+  <button class="tab active" onclick="showTab(this,'t-compare')">Compare</button>
+  <button class="tab" onclick="showTab(this,'t-verdict')">Verdict</button>
+</div>
+<div id="t-compare" class="panel active">
+  <div class="card">
+    <div class="card-title">Comparison</div>
+    {table_html}
+  </div>
+</div>
+<div id="t-verdict" class="panel">
+  <div class="card">
+    <div class="card-title">Verdict</div>
+    <div style="font-size:13px;line-height:1.7;color:var(--text)">{_e(response[:360])}</div>
+  </div>
+  <button class="ask-btn" onclick="sendPrompt('Based on this table, which option fits my goal best: {_e(user_message[:80])}?')">Ask about this ↗</button>
+</div>
+<script>
+function showTab(btn,id){{
+  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
+  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById(id).classList.add('active');
+}}
+</script>
+</div></body></html>"""
+
+    lines = [l.strip() for l in response.split("\n") if l.strip()]
+    nouns: list[str] = []
+    for line in lines:
+        m = re.search(r"\*\*(.+?)\*\*", line)
+        if m:
+            nouns.append(m.group(1))
+        if len(nouns) >= 2:
+            break
+    if len(nouns) < 2:
+        nouns = ["Option A", "Option B"]
+
+    bullets = _parse_bullets(response)
+    rows_a = bullets[:3]
+    rows_b = bullets[3:6] or bullets[:3]
+
+    card_a = "\n".join(
+        f'<div class="raised" style="margin-bottom:8px" onclick="sendPrompt(\'Tell me more about {_e(nouns[0])} — {_e(r["title"])}\')"><div style="font-size:12px;font-weight:500">{_e(r["title"])}</div><div style="font-size:11px;color:var(--text2);margin-top:3px">{_e(r["body"][:80])}</div></div>'
+        for r in rows_a
+    )
+    card_b = "\n".join(
+        f'<div class="raised" style="margin-bottom:8px" onclick="sendPrompt(\'Tell me more about {_e(nouns[1])} — {_e(r["title"])}\')"><div style="font-size:12px;font-weight:500">{_e(r["title"])}</div><div style="font-size:11px;color:var(--text2);margin-top:3px">{_e(r["body"][:80])}</div></div>'
+        for r in rows_b
+    )
+
+    return f"""<html><head></head><body><div class="widget-root">
+<div class="tabs">
+  <button class="tab active" onclick="showTab(this,'t-compare')">Compare</button>
+  <button class="tab" onclick="showTab(this,'t-verdict')">Verdict</button>
+</div>
+<div id="t-compare" class="panel active">
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
+    <div>
+      <div class="card-title">{_e(nouns[0])}</div>
+      {card_a}
+    </div>
+    <div>
+      <div class="card-title">{_e(nouns[1])}</div>
+      {card_b}
+    </div>
+  </div>
+</div>
+<div id="t-verdict" class="panel">
+  <div class="card">
+    <div class="card-title">Verdict</div>
+    <div style="font-size:13px;line-height:1.7;color:var(--text)">{_e(response[:300])}</div>
+  </div>
+  <button class="ask-btn" onclick="sendPrompt('Which is better for me — {_e(nouns[0])} or {_e(nouns[1])}? My goal is...')">Ask about this ↗</button>
+</div>
+<script>
+function showTab(btn,id){{
+  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
+  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById(id).classList.add('active');
+}}
+</script>
+</div></body></html>"""
+
+
+def _fallback_chart(user_message: str, response: str) -> str:
+    nums = re.findall(r"\b(\d+\.?\d*)\b", response)
+    labels_raw = re.findall(r"\b([A-Z][a-z]{2,}(?:\s[A-Z][a-z]+)?)\b", response)
+    values = [float(n) for n in nums[:8] if float(n) > 0][:8]
+    labels = list(dict.fromkeys(labels_raw))[:len(values)]
+    while len(labels) < len(values):
+        labels.append(f"Item {len(labels)+1}")
+    if not values:
+        values = [10, 20, 15, 30, 25]
+        labels = ["A", "B", "C", "D", "E"]
+
+    js_labels = json.dumps(labels)
+    js_values = json.dumps(values)
+
+    return f"""<html><head><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script></head>
+<body><div class="widget-root">
+<div class="metric-grid" style="margin-bottom:12px">
+  <div class="metric"><div class="metric-lbl">Data points</div><div class="metric-val">{len(values)}</div></div>
+  <div class="metric"><div class="metric-lbl">Max value</div><div class="metric-val">{max(values):.1f}</div></div>
+  <div class="metric"><div class="metric-lbl">Average</div><div class="metric-val">{sum(values)/len(values):.1f}</div></div>
+</div>
+<div style="position:relative;height:220px">
+  <canvas id="ch"></canvas>
+</div>
+<button class="ask-btn" style="margin-top:12px" onclick="sendPrompt('Explain the trend shown in this chart for {_e(user_message[:60])}')">Ask about this ↗</button>
+<script>
+const dark=matchMedia('(prefers-color-scheme:dark)').matches;
+const tc=dark?'#8d93aa':'#5a5f72';
+const gc=dark?'rgba(255,255,255,0.06)':'rgba(0,0,0,0.06)';
+new Chart(document.getElementById('ch'),{{
+  type:'bar',
+  data:{{labels:{js_labels},datasets:[{{data:{js_values},backgroundColor:'rgba(55,138,221,0.7)',borderRadius:6,borderSkipped:false}}]}},
+  options:{{responsive:true,maintainAspectRatio:false,plugins:{{legend:{{display:false}}}},scales:{{x:{{ticks:{{color:tc}},grid:{{color:gc}}}},y:{{ticks:{{color:tc}},grid:{{color:gc}}}}}}}}
+}});
+</script>
+</div></body></html>"""
+
+
+def _fallback_steps(user_message: str, response: str) -> str:
+    steps = _parse_steps(response)
+    rows = "\n".join(
+        f"""<div class="step-row" onclick="sendPrompt('Tell me more about step {i+1}: {_e(s['title'])}')">
+  <div class="step-num">{i+1}</div>
+  <div><div class="step-title">{_e(s['title'])}</div>
+  <div class="step-desc">{_e(s['body'][:100])}</div></div>
+</div>"""
+        for i, s in enumerate(steps)
+    )
+    return f"""<html><head></head><body><div class="widget-root">
+<div class="card">
+  <div class="card-title">{len(steps)} Steps</div>
+  {rows}
+</div>
+<button class="ask-btn" onclick="sendPrompt('I completed the steps for {_e(user_message[:60])}. What should I do next?')">What next ↗</button>
+</div></body></html>"""
+
+
+def _fallback_bullets(user_message: str, response: str) -> str:
+    items = _parse_bullets(response)
+    cards = "\n".join(
+        f"""<div class="raised" onclick="sendPrompt('Tell me more about: {_e(b['title'])}')">
+  <div style="font-size:11px;font-weight:600;color:var(--accent);margin-bottom:4px">#{i+1}</div>
+  <div style="font-size:13px;font-weight:500">{_e(b['title'])}</div>
+  <div style="font-size:12px;color:var(--text2);margin-top:4px">{_e(b['body'][:100])}</div>
+</div>"""
+        for i, b in enumerate(items)
+    )
+    return f"""<html><head></head><body><div class="widget-root">
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
+{cards}
+</div>
+<button class="ask-btn" onclick="sendPrompt('Which of these points matters most for {_e(user_message[:60])}?')">Explore further ↗</button>
+</div></body></html>"""
+
+
+def _fallback_narrative(user_message: str, response: str) -> str:
+    sections = _parse_sections(response)
+    tabs_html = "\n".join(
+        f'<button class="tab{" active" if i==0 else ""}" onclick="showTab(this,\'s{i}\')">{_e(s["label"])}</button>'
+        for i, s in enumerate(sections)
+    )
+    panels_html = "\n".join(
+        f'<div id="s{i}" class="panel{" active" if i==0 else ""}"><div class="card"><div style="font-size:13px;line-height:1.75;color:var(--text)">{_e(s["body"])}</div></div></div>'
+        for i, s in enumerate(sections)
+    )
+    return f"""<html><head></head><body><div class="widget-root">
+<div class="tabs">{tabs_html}</div>
+{panels_html}
+<button class="ask-btn" onclick="sendPrompt('I want to explore {_e(user_message[:60])} in more detail')">Go deeper ↗</button>
+<script>
+function showTab(btn,id){{
+  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
+  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById(id).classList.add('active');
+}}
+</script>
+</div></body></html>"""
+
+
+def _fallback_concise(user_message: str, response: str) -> str:
+    short = response.strip()[:280]
+    return f"""<html><head></head><body><div class="widget-root">
+<div class="result-box">
+  <div class="result-lbl">Answer</div>
+  <div style="font-size:15px;font-weight:500;line-height:1.6;color:var(--text)">{_e(short)}</div>
+</div>
+<button class="ask-btn" onclick="sendPrompt('Can you explain this in more detail: {_e(user_message[:60])}')">Explain more ↗</button>
+</div></body></html>"""
+
+
+def _fallback_socratic(user_message: str, response: str) -> str:
+    questions = _parse_questions(response)
+    icons = ["🧮", "📈", "🎯", "💡", "🔍", "📊"]
+
+    options = "\n".join(
+        f"""
+<div class="step-row" style="cursor:pointer" onclick="sendPrompt({json.dumps(q)})">
+  <div class="step-num">{icons[i % len(icons)]}</div>
+  <div>
+    <div class="step-title">{_e(q[:80])}</div>
+    <div class="step-desc" style="margin-top:3px">
+      {_e("Click to answer this and I will adapt the next explanation or calculator to that choice.")}
+    </div>
+  </div>
+</div>"""
+        for i, q in enumerate(questions)
+    )
+
+    return f"""<html><head></head><body><div class="widget-root">
+<div class="card">
+  <div class="card-title">Help me understand</div>
+  <div style="font-size:13px;color:var(--text2);margin-bottom:12px">
+    Click the option that best matches your situation. I will use your choice to decide whether to show a calculator, comparison table, or step-by-step guide next.
+  </div>
+  {options}
+</div>
+</div></body></html>"""
+
+
+def _fallback_generic(user_message: str, response: str) -> str:
+    return _fallback_concise(user_message, response)
+
+
+_FALLBACK_BUILDERS = {
+    "comparison": _fallback_comparison,
+    "chart":      _fallback_chart,
+    "steps":      _fallback_steps,
+    "bullets":    _fallback_bullets,
+    "narrative":  _fallback_narrative,
+    "concise":    _fallback_concise,
+    "socratic":   _fallback_socratic,
+    "generic":    _fallback_generic,
+}
+
+
+def build_primitive_fallback(strategy_id: str, user_message: str, response: str) -> str:
+    """Build a deterministic Claude-quality fallback widget for the given primitive."""
+    spec = get_primitive_spec(strategy_id)
+    fallback_type = spec.get("fallback_type", "generic")
+    builder = _FALLBACK_BUILDERS.get(fallback_type, _fallback_generic)
+    raw_html = builder(user_message, response)
+    return inject_design_system(raw_html)

anupa/backend/primitives.json

@@ -0,0 +1,51 @@
+{
+  "comparison_table": {
+    "description": "Side-by-side comparison of 2 or more options with pros, cons, and recommendation.",
+    "required_components": ["comparison_cards", "tabs"],
+    "forbidden_components": ["range_slider", "calculator", "step_navigator"],
+    "extra_context": "Build: tabs at top (Compare / Details / Verdict) + 2-column comparison cards side by side. Highlight recommended option with accent border and 'Recommended' badge. Every card must call sendPrompt with that option's name and key metric. Add a Verdict tab with a clear winner summary and ask button.",
+    "fallback_type": "comparison"
+  },
+  "visualization": {
+    "description": "Chart or visual representation of data — bar, line, or distribution.",
+    "required_components": ["chart"],
+    "forbidden_components": ["range_slider", "step_navigator", "comparison_cards"],
+    "extra_context": "Build an enterprise mini-dashboard: (1) a metric cards row at top with key numbers, (2) a primary chart area, (3) a short insights section below. Prefer D3.js for charts (SVG) with a hover tooltip; use a line chart for time-series trends and a bar chart for comparisons. Add period toggle buttons (1Y/3Y/5Y/All) that filter the plotted data locally (no extra API calls). Include a brief explanatory paragraph above the chart and 2-4 insight bullets below it so the widget is a self-contained answer. Use only real numbers/entities from assistant_response — no placeholder data.",
+    "fallback_type": "chart"
+  },
+  "step_by_step": {
+    "description": "Numbered sequential steps — how-to guide or process walkthrough.",
+    "required_components": ["step_navigator"],
+    "forbidden_components": ["range_slider", "calculator", "comparison_cards", "chart"],
+    "extra_context": "Build: a step navigator showing all steps as clickable rows with step number circle, title, and brief description. Each step row calls sendPrompt('Tell me more about step N: [title]'). Show step count badge. Add a final ask button summarizing the process.",
+    "fallback_type": "steps"
+  },
+  "structured_bullets": {
+    "description": "3-5 key bullet points — structured summary with clear takeaways.",
+    "required_components": ["insight_cards"],
+    "forbidden_components": ["range_slider", "chart", "step_navigator"],
+    "extra_context": "Build: a grid of insight cards (2 per row) where each card shows one bullet point with an icon area, title extracted from the bullet, and body text. Each card is clickable and calls sendPrompt with that insight's title. Add a summary metric card at top if numbers are present.",
+    "fallback_type": "bullets"
+  },
+  "narrative_prose": {
+    "description": "Flowing paragraphs — explanatory or contextual narrative response.",
+    "required_components": ["tabs", "insight_card"],
+    "forbidden_components": ["range_slider", "step_navigator"],
+    "extra_context": "Build: tabs splitting the narrative into 2-3 logical sections (Summary / Details / Key Takeaways). Each tab shows a clean card with formatted text. Add key metric highlights as small badges if numbers appear. Final tab has an ask button for follow-up.",
+    "fallback_type": "narrative"
+  },
+  "concise_direct": {
+    "description": "Short direct answer — 1-3 sentences, no fluff.",
+    "required_components": ["result_box"],
+    "forbidden_components": ["range_slider", "chart", "step_navigator", "tabs"],
+    "extra_context": "Build: a single clean result card with a prominent headline answer and 1-2 supporting lines of context. Keep compact. Include one ask button below for follow-up exploration.",
+    "fallback_type": "concise"
+  },
+  "socratic_questions": {
+    "description": "Clarifying questions to understand user intent before answering.",
+    "required_components": ["prompt_chips"],
+    "forbidden_components": ["range_slider", "calculator", "chart", "step_navigator"],
+    "extra_context": "Build: a card with a brief acknowledgement line, then 2-4 clickable question chips styled as pills. Each chip calls sendPrompt with that exact clarifying answer as a full natural language sentence. No extra controls needed.",
+    "fallback_type": "socratic"
+  }
+}

anupa/backend/server.py

@@ -0,0 +1,650 @@
+"""HTTP server and request handlers for the Adaptive Presentation Engine backend."""
+
+import json
+import os
+import re
+import time
+from http.server import HTTPServer, BaseHTTPRequestHandler
+from socketserver import ThreadingMixIn
+
+import numpy as np
+
+from . import config, llm
+from .engine import engine, USERB_ID
+from .widget_prompt import (
+    estimate_widget_height,
+    inject_design_system,
+)
+from .combined_prompt import (
+    build_combined_system_prompt,
+    build_combined_user_prompt,
+    parse_combined_output,
+)
+from .utils import (
+    fast_valence,
+    enforce_response,
+    detect_format_override,
+    detect_explore_trigger,
+    negative_strength,
+)
+
+def _looks_truncated_widget_html(html: str) -> bool:
+    """Heuristic check for obviously cut-off widget HTML."""
+    if not html:
+        return True
+    lower = html.lower()
+    # Missing critical closures often indicates token truncation.
+    if lower.count("<style") > lower.count("</style>"):
+        return True
+    if lower.count("<script") > lower.count("</script>"):
+        return True
+    if lower.count("<body") > lower.count("</body>"):
+        return True
+    if lower.count("<html") > lower.count("</html>"):
+        return True
+    # Rarely, response ends mid-token; catch abrupt ending.
+    if re.search(r"[<{(]$", html.strip()):
+        return True
+    return False
+
+
+def _bool_env(name: str, default: bool) -> bool:
+    raw = os.getenv(name)
+    if raw is None:
+        return default
+    return raw.strip().lower() in {"1", "true", "yes", "on"}
+
+
+class Handler(BaseHTTPRequestHandler):
+    def log_message(self, *a):
+        pass
+
+    def _cors(self):
+        self.send_header("Access-Control-Allow-Origin",  "*")
+        self.send_header("Access-Control-Allow-Headers", "Content-Type")
+        self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
+
+    def _json(self, data, status=200):
+        body = json.dumps(data).encode()
+        self.send_response(status)
+        self.send_header("Content-Type", "application/json")
+        self.send_header("Content-Length", len(body))
+        self._cors()
+        self.end_headers()
+        self.wfile.write(body)
+
+    def _html(self):
+        try:
+            html = config.INDEX_HTML.read_bytes()
+        except FileNotFoundError:
+            self.send_response(404); self.end_headers(); return
+        self.send_response(200)
+        self.send_header("Content-Type", "text/html; charset=utf-8")
+        self.send_header("Content-Length", len(html))
+        self.end_headers()
+        self.wfile.write(html)
+
+    def _body(self):
+        n = int(self.headers.get("Content-Length", 0))
+        if not n:
+            return {}
+        raw = self.rfile.read(n)
+        if not raw:
+            return {}
+        try:
+            return json.loads(raw)
+        except json.JSONDecodeError:
+            # Don't crash the handler thread; return a sentinel the caller can handle.
+            try:
+                preview = raw[:500].decode("utf-8", errors="replace")
+            except Exception:
+                preview = repr(raw[:200])
+            return {"__invalid_json__": True, "__raw_preview__": preview}
+
+    def do_OPTIONS(self):
+        self.send_response(204)
+        self._cors()
+        self.end_headers()
+
+    def do_GET(self):
+        p = self.path.split("?")[0]
+        if p == "/":
+            self._html(); return
+
+        if p == "/api/health":
+            if config.LLM_MODE == "openai_compat":
+                h = llm.openai_health()
+                self._json({"server": "ok", "mode": config.LLM_MODE, "openai_base_url": config.OPENAI_BASE_URL, "model": config.OPENAI_MODEL, **h})
+            elif config.LLM_MODE == "anthropic":
+                h = llm.anthropic_health()
+                self._json({"server": "ok", "mode": config.LLM_MODE, **h})
+            else:
+                self._json({"server": "ok", "mode": config.LLM_MODE, "ok": False, "reachable": False, "error": "Unsupported LLM_MODE (expected openai_compat or anthropic)"})
+            return
+
+        if p == "/api/state":
+            uid  = self.path.split("uid=")[-1] if "uid=" in self.path else "demo"
+            user = engine.get_user(uid)
+            x    = np.ones(config.D) * 0.5
+            ub   = engine.get_user(USERB_ID)
+            self._json({
+                "posterior": engine.user_posterior(uid, x),
+                "global":    engine.global_posterior(x),
+                "userb":     engine.posterior_summary(ub["mu"], ub["sigma_inv"], x),
+                "global_n":  engine.global_n,
+                "n_users":   len(engine.users),
+                "msg_count": user["msg_count"],
+            }); return
+
+        self.send_response(404); self.end_headers()
+
+    def do_POST(self):
+        p    = self.path.split("?")[0]
+        body = self._body()
+        if isinstance(body, dict) and body.get("__invalid_json__"):
+            self._json({"error": "invalid_json", "preview": body.get("__raw_preview__", "")}, 400)
+            return
+
+        if p == "/api/chat_plain":
+            uid = body.get("uid", "demo") + "_plain"
+            msg = body.get("message", "").strip()
+            if not msg:
+                self._json({"error": "empty message"}, 400); return
+
+            user = engine.get_user(uid)
+
+            # Build a simple conversation prompt (no bandit, no enforced format).
+            ctx = []
+            for t in user["history"][-6:]:
+                ctx += [f"User: {t['user']}", f"Assistant: {t['assistant']}"]
+            ctx.append(f"User: {msg}")
+            prompt = "\n".join(ctx)
+
+            system = "You are a helpful AI assistant."
+
+            try:
+                base_mode = (config.BASELINE_LLM_MODE or config.LLM_MODE).lower()
+                if base_mode == "openai_compat":
+                    response, elapsed, mode = llm.call_openai_compat(prompt, system, timeout=120)
+                elif base_mode == "anthropic":
+                    response, elapsed, mode = llm.call_anthropic(prompt, system, timeout=120)
+                else:
+                    raise RuntimeError("Unsupported BASELINE_LLM_MODE (expected openai_compat or anthropic)")
+            except Exception as e:
+                self._json({"error": f"LLM error: {str(e)}"}, 500)
+                return
+
+            if not response:
+                self._json({"error": "LLM returned empty response. Check model/service."}, 500)
+                return
+
+            user["history"].append({"user": msg, "assistant": response})
+            user["history"] = user["history"][-20:]
+
+            self._json({
+                "response": response,
+                "elapsed":  elapsed,
+                "llm_mode": mode,
+            }); return
+
+        if p == "/api/chat":
+            uid = body.get("uid", "demo")
+            msg = body.get("message", "").strip()
+            if not msg:
+                self._json({"error": "empty message"}, 400); return
+
+            user = engine.get_user(uid)
+
+            # Auto-reward previous turn using valence heuristic.
+            ev            = fast_valence(msg, user["last_response"])
+            auto_detected = False
+            auto_r        = None
+
+            if user["last_response"] and user["last_x"] is not None and user["last_strategy"]:
+                reward = float(np.clip(0.5 + 0.45*ev["pos"] - 0.45*ev["neg"], 0.05, 0.95))
+                engine.update(uid, user["last_strategy"], np.array(user["last_x"]), reward)
+                auto_detected = True
+                auto_r        = reward
+
+            # --- NEW: explicit overrides + corrective exploration ---
+            explicit = detect_format_override(msg, config.STRATEGY_NAMES)
+            force_explore = bool(detect_explore_trigger(msg) or (ev.get("neg", 0.0) >= config.NEG_EXPLORE_THRESHOLD))
+            neg_s = negative_strength(ev)
+
+            strat, scores, x, prev = engine.select(
+                uid, msg,
+                force_explore=force_explore,
+                neg_strength=neg_s,
+                explicit_strategy=explicit,
+            )
+
+            format_rule = config.STRATEGIES.get(strat, "Be helpful and clear.")
+
+            # ── Single-call combined prompt (Claude-style) ─────────────────
+            combined_max_tokens = getattr(config, "COMBINED_MAX_TOKENS", 2800)
+            # Keep the UI responsive by failing fast by default.
+            combined_timeout = getattr(config, "COMBINED_TIMEOUT_SECONDS", 30)
+
+            combined_system = build_combined_system_prompt(
+                strategy_id=strat,
+                format_rule=format_rule,
+                primitive_extra_context="",
+                user_message=msg,
+                forbidden_components=None,
+                required_components=None,
+            )
+            combined_prompt = build_combined_user_prompt(
+                user_message=msg,
+                history=user["history"],
+            )
+
+            try:
+                adapt_mode = (config.ADAPTIVE_LLM_MODE or config.LLM_MODE).lower()
+                if adapt_mode == "openai_compat":
+                    raw_combined, elapsed, mode = llm.call_openai_compat(
+                        combined_prompt,
+                        combined_system,
+                        timeout=combined_timeout,
+                        max_tokens=combined_max_tokens,
+                        temperature=0.2,
+                    )
+                elif adapt_mode == "anthropic":
+                    raw_combined, elapsed, mode = llm.call_anthropic(
+                        combined_prompt,
+                        combined_system,
+                        timeout=combined_timeout,
+                        max_tokens=combined_max_tokens,
+                        temperature=0.2,
+                    )
+                else:
+                    raise RuntimeError("Unsupported ADAPTIVE_LLM_MODE (expected openai_compat or anthropic)")
+            except Exception as e:
+                self._json({"error": f"LLM error: {str(e)}"}, 500)
+                return
+
+            if not raw_combined:
+                self._json({"error": "LLM returned empty response. Check model/service."}, 500)
+                return
+
+            # Parse combined output into text response + widget payload (HTML or JSON schema).
+            response, widget_payload_raw = parse_combined_output(raw_combined)
+
+            if not response:
+                response = raw_combined.strip()
+
+            if config.STRICT_PRIMITIVES:
+                response = enforce_response(strat, response)
+
+            # ── Validate widget from single call ───────────────────────────
+            widget_html = ""
+            widget_schema = ""
+            widget_height = 0
+            widget_debug = ""
+            widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
+
+            if widget_payload_raw:
+                if widget_mode == "json":
+                    widget_schema = widget_payload_raw
+                    widget_debug = widget_debug or "combined_schema_ok"
+                else:
+                    if _looks_truncated_widget_html(widget_payload_raw):
+                        widget_debug = "combined_widget_truncated"
+                    else:
+                        widget_html = widget_payload_raw
+                        widget_height = estimate_widget_height(widget_payload_raw)
+                        widget_debug = widget_debug or "combined_widget_ok"
+            else:
+                widget_debug = widget_debug or ("combined_no_schema" if widget_mode == "json" else "combined_no_widget_tag")
+                raw_preview = (raw_combined or "")[:800]
+                if widget_mode != "json":
+                    # Never return a blank iframe: serve a safe interactive placeholder mini-app.
+                    placeholder = f"""
+<html><head></head><body>
+  <div class="widget-root card">
+    <div class="card-title">Interactive widget</div>
+    <div style="color:var(--text2);font-size:13px;line-height:1.6">
+      I couldn't generate a full widget for this turn. This placeholder stays interactive and can request the missing data.
+    </div>
+    <div class="ctrl-row" style="margin-top:12px">
+      <div class="ctrl-lbl">Assumption</div>
+      <input id="assump" type="range" min="0" max="100" step="1" value="50" style="flex:1" />
+      <div class="ctrl-val" id="assumpv">50</div>
+    </div>
+    <div id="chart" class="raised" style="height:260px;margin-top:10px"></div>
+    <div class="btn-group" style="margin-top:10px">
+      <button class="btn" id="ask_range">Ask for date range</button>
+      <button class="btn" id="ask_source">Ask for data source</button>
+    </div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+  <script>
+  const data = [
+    {{name:'Series A', base: 100}},
+    {{name:'Series B', base: 100}}
+  ];
+  const state = {{assumption: 50}};
+  function compute(state, data) {{
+    const k = (state.assumption/50);
+    return {{
+      labels: data.map(d=>d.name),
+      values: data.map((d,i)=>Math.round(d.base*(i? (1.15*k):(1.05*k))))
+    }};
+  }}
+  let chart;
+  function render() {{
+    const c = compute(state, data);
+    document.getElementById('assumpv').textContent = String(state.assumption);
+    if (!chart) chart = echarts.init(document.getElementById('chart'));
+    chart.setOption({{
+      backgroundColor:'transparent',
+      tooltip:{{trigger:'axis'}},
+      xAxis:{{type:'category',data:c.labels,axisLabel:{{color:'#5a5f72'}}}},
+      yAxis:{{type:'value',axisLabel:{{color:'#5a5f72'}}}},
+      series:[{{type:'bar',data:c.values}}]
+    }});
+  }}
+  document.getElementById('assump').addEventListener('input', (e)=>{{ state.assumption = +e.target.value; render(); }});
+  document.getElementById('ask_range').onclick = ()=> sendPrompt('Provide a date range to plot (e.g., 2020-01-01 to 2024-12-31).');
+  document.getElementById('ask_source').onclick = ()=> sendPrompt('Which data source should we use for SPY and QQQ prices (yfinance, stooq, other)?');
+  render();
+  </script>
+</body></html>
+""".strip()
+                    widget_html = inject_design_system(placeholder)
+                    widget_height = estimate_widget_height(widget_html)
+                    widget_debug = "fallback_widget_generated"
+
+            # No primitive fallback. If widget is missing/invalid, return text-only.
+
+            user["history"].append({"user": msg, "assistant": response})
+            user["history"]       = user["history"][-20:]
+            user["last_message"]  = msg
+            user["last_response"] = response
+            user["last_strategy"] = strat
+            user["last_x"]        = x.tolist()
+            user["msg_count"]    += 1
+
+            ub = engine.get_user(USERB_ID)
+            self._json({
+                "response":      response,
+                "strategy":      strat,
+                "prev_strategy": prev,
+                "explicit":      explicit,
+                "force_explore": force_explore and (explicit is None),
+                "instruction":   config.STRATEGIES[strat],
+                "elapsed":       elapsed,
+                "llm_mode":      mode,
+                "scores":        {k: round(v, 4) for k, v in scores.items()},
+                "x_vec":         x.tolist(),
+                "posterior":     engine.user_posterior(uid, x),
+                "global":        engine.global_posterior(x),
+                "userb":         engine.posterior_summary(ub["mu"], ub["sigma_inv"], x),
+                "global_n":      engine.global_n,
+                "auto_detected": auto_detected,
+                "auto_r":        auto_r,
+                "auto_reason":   ev["reason"],
+                "widget_html":   widget_html,
+                "widget_schema": widget_schema,
+                "widget_height": widget_height,
+                "widget_debug":  widget_debug,
+                "widget_raw_preview": raw_preview if not (widget_html or widget_schema) else "",
+            }); return
+
+        if p == "/api/reward":
+            uid      = body.get("uid", "demo")
+            strategy = body.get("strategy")
+            x_vec    = body.get("x_vec")
+            reward   = float(body.get("reward", 0.5))
+            if strategy not in config.STRATEGY_NAMES or x_vec is None:
+                self._json({"error": "bad request"}, 400); return
+            x = np.array(x_vec, dtype=float)
+            engine.update(uid, strategy, x, reward)
+            ub = engine.get_user(USERB_ID)
+            self._json({
+                "posterior": engine.user_posterior(uid, x),
+                "global":    engine.global_posterior(x),
+                "userb":     engine.posterior_summary(ub["mu"], ub["sigma_inv"], x),
+                "global_n":  engine.global_n,
+            }); return
+
+        if p == "/api/preference":
+            uid = body.get("uid", "demo")
+            strategies = body.get("strategies", [])
+            lock = bool(body.get("lock", False))
+            engine.apply_preferences(uid, strategies, lock=lock)
+            self._json({"posterior": engine.user_posterior(uid)}); return
+
+        if p == "/api/reset":
+            engine.reset_user(body.get("uid", "demo"))
+            self._json({"ok": True}); return
+
+        # ── NEW: adaptive streaming endpoint (Claude-like) ────────────────
+        if p == "/api/chat_stream":
+            uid = body.get("uid", "demo")
+            msg = body.get("message", "").strip()
+            if not msg:
+                self._json({"error": "empty message"}, 400); return
+
+            user = engine.get_user(uid)
+
+            # Auto-reward previous turn using valence heuristic.
+            ev            = fast_valence(msg, user["last_response"])
+            auto_detected = False
+            auto_r        = None
+
+            if user["last_response"] and user["last_x"] is not None and user["last_strategy"]:
+                reward = float(np.clip(0.5 + 0.45*ev["pos"] - 0.45*ev["neg"], 0.05, 0.95))
+                engine.update(uid, user["last_strategy"], np.array(user["last_x"]), reward)
+                auto_detected = True
+                auto_r        = reward
+
+            explicit = detect_format_override(msg, config.STRATEGY_NAMES)
+            force_explore = bool(detect_explore_trigger(msg) or (ev.get("neg", 0.0) >= config.NEG_EXPLORE_THRESHOLD))
+            neg_s = negative_strength(ev)
+
+            strat, scores, x, prev = engine.select(
+                uid, msg,
+                force_explore=force_explore,
+                neg_strength=neg_s,
+                explicit_strategy=explicit,
+            )
+
+            format_rule = config.STRATEGIES.get(strat, "Be helpful and clear.")
+
+            combined_max_tokens = getattr(config, "COMBINED_MAX_TOKENS", 2800)
+            combined_timeout = getattr(config, "COMBINED_TIMEOUT_SECONDS", 30)
+
+            combined_system = build_combined_system_prompt(
+                strategy_id=strat,
+                format_rule=format_rule,
+                primitive_extra_context="",
+                user_message=msg,
+                forbidden_components=None,
+                required_components=None,
+            )
+            combined_prompt = build_combined_user_prompt(
+                user_message=msg,
+                history=user["history"],
+            )
+
+            adapt_mode = (config.ADAPTIVE_LLM_MODE or config.LLM_MODE).lower()
+
+            # Start NDJSON stream.
+            self.send_response(200)
+            self.send_header("Content-Type", "application/x-ndjson; charset=utf-8")
+            self._cors()
+            self.end_headers()
+
+            ub = engine.get_user(USERB_ID)
+
+            def send_nd(evt: dict):
+                try:
+                    line = json.dumps(evt, ensure_ascii=False)
+                    self.wfile.write(line.encode("utf-8") + b"\n")
+                    self.wfile.flush()
+                except Exception:
+                    pass
+
+            def send_done_error(err: str):
+                send_nd({
+                    "type": "done",
+                    "strategy": strat,
+                    "elapsed": None,
+                    "llm_mode": adapt_mode,
+                    "response": "",
+                    "widget_html": "",
+                    "widget_schema": "",
+                    "widget_height": 0,
+                    "widget_debug": f"stream_error:{err}",
+                    "error": err,
+                    "force_explore": force_explore,
+                    "scores": {k: round(v, 4) for k, v in scores.items()},
+                    "x_vec": x.tolist(),
+                    "posterior": engine.user_posterior(uid, x),
+                    "global": engine.global_posterior(x),
+                    "userb": engine.posterior_summary(ub["mu"], ub["sigma_inv"], x),
+                    "global_n": engine.global_n,
+                    "prev_strategy": prev,
+                    "explicit": explicit,
+                    "auto_detected": auto_detected,
+                    "auto_r": auto_r,
+                    "auto_reason": ev["reason"],
+                })
+
+            # Initial strategy event so UI updates immediately.
+            send_nd({
+                "type": "strategy",
+                "strategy": strat,
+                "instruction": config.STRATEGIES[strat],
+                "elapsed": None,
+                "force_explore": force_explore,
+                "scores": {k: round(v, 4) for k, v in scores.items()},
+                "x_vec": x.tolist(),
+                "posterior": engine.user_posterior(uid, x),
+                "global": engine.global_posterior(x),
+                "userb": engine.posterior_summary(ub["mu"], ub["sigma_inv"], x),
+                "global_n": engine.global_n,
+                "prev_strategy": prev,
+                "explicit": explicit,
+                "auto_detected": auto_detected,
+                "auto_r": auto_r,
+                "auto_reason": ev["reason"],
+            })
+
+            try:
+                if adapt_mode == "openai_compat":
+                    raw_combined, elapsed, mode = llm.call_openai_compat(
+                        combined_prompt,
+                        combined_system,
+                        timeout=combined_timeout,
+                        max_tokens=combined_max_tokens,
+                        temperature=0.2,
+                    )
+                elif adapt_mode == "anthropic":
+                    # Use non-streaming call with wall-clock timeout (more robust than the SDK stream
+                    # when the provider stalls), then optionally "replay" deltas to the UI.
+                    raw_combined, elapsed, mode = llm.call_anthropic(
+                        combined_prompt,
+                        combined_system,
+                        timeout=combined_timeout,
+                        max_tokens=combined_max_tokens,
+                        temperature=0.2,
+                    )
+                else:
+                    raise RuntimeError("Unsupported ADAPTIVE_LLM_MODE (expected openai_compat or anthropic)")
+            except Exception as e:
+                msg = str(e).strip()
+                if not msg:
+                    msg = repr(e)
+                send_done_error(f"LLM error ({type(e).__name__}): {msg}")
+                return
+
+            response, widget_payload_raw = parse_combined_output(raw_combined)
+            if not response:
+                response = raw_combined.strip()
+            if config.STRICT_PRIMITIVES:
+                response = enforce_response(strat, response)
+
+            widget_debug = "nonstream"
+
+            widget_html = ""
+            widget_schema = ""
+            widget_height = 0
+            widget_mode = getattr(config, "WIDGET_MODE", "json").strip().lower()
+            if widget_payload_raw:
+                if widget_mode == "json":
+                    widget_schema = widget_payload_raw
+                else:
+                    if _looks_truncated_widget_html(widget_payload_raw):
+                        widget_debug = "stream_widget_truncated"
+                    else:
+                        widget_html = widget_payload_raw
+                        widget_height = estimate_widget_height(widget_payload_raw)
+            else:
+                if widget_mode != "json":
+                    placeholder = "<html><head></head><body><div class='widget-root card'><div class='card-title'>Interactive widget</div><div class='empty'>No widget returned; click to request missing data.</div><div class='btn-group'><button class='btn' onclick=\"sendPrompt('Provide a date range for the requested plot.')\">Ask for date range</button></div></div></body></html>"
+                    widget_html = inject_design_system(placeholder)
+                    widget_height = estimate_widget_height(widget_html)
+                    widget_debug = "fallback_widget_generated"
+
+            # Replay deltas so the UI doesn't look frozen (best-effort).
+            # The final "done" still contains the full response/widget.
+            try:
+                if response:
+                    for i in range(0, len(response), 180):
+                        send_nd({"type": "response_delta", "delta": response[i : i + 180]})
+                payload = widget_schema if widget_mode == "json" else widget_html
+                if payload:
+                    for i in range(0, len(payload), 900):
+                        send_nd({"type": "widget_delta", "delta": payload[i : i + 900]})
+            except Exception:
+                pass
+
+            # Update history as in /api/chat.
+            user["history"].append({"user": msg, "assistant": response})
+            user["history"] = user["history"][-20:]
+            user["last_message"]  = msg
+            user["last_response"] = response
+            user["last_strategy"] = strat
+            user["last_x"]        = x.tolist()
+            user["msg_count"]    += 1
+
+            send_nd({
+                "type": "done",
+                "strategy": strat,
+                "elapsed": elapsed,
+                "llm_mode": mode,
+                "response": response,
+                "widget_html": widget_html or "",
+                "widget_schema": widget_schema or "",
+                "widget_height": widget_height,
+                "widget_debug": widget_debug,
+                "force_explore": force_explore,
+                "scores": {k: round(v, 4) for k, v in scores.items()},
+                "x_vec": x.tolist(),
+                "posterior": engine.user_posterior(uid, x),
+                "global": engine.global_posterior(x),
+                "userb": engine.posterior_summary(ub["mu"], ub["sigma_inv"], x),
+                "global_n": engine.global_n,
+                "prev_strategy": prev,
+                "explicit": explicit,
+                "auto_detected": auto_detected,
+                "auto_r": auto_r,
+                "auto_reason": ev["reason"],
+            })
+            return
+
+        self.send_response(404); self.end_headers()
+
+
+class ThreadedServer(ThreadingMixIn, HTTPServer):
+    daemon_threads = True
+
+
+def run_server():
+    print("=" * 60)
+    print(f"  http://localhost:5051   mode: {config.LLM_MODE}")
+    print("=" * 60)
+
+    PORT = int(os.getenv("PORT", "5051"))
+    ThreadedServer(("0.0.0.0", PORT), Handler).serve_forever()

anupa/backend/utils.py

@@ -0,0 +1,195 @@
+"""Utility helpers: math, response enforcement, and valence heuristics.
+
+This module provides:
+- sigmoid + uncertainty helpers
+- lightweight valence detection (heuristic)
+- format override + explore trigger detection
+- response post-processing to enforce selected format
+"""
+
+import json
+import re
+import math
+import numpy as np
+
+
+def sigmoid(x: float) -> float:
+    x = float(np.clip(x, -500, 500))
+    return 1.0 / (1.0 + math.exp(-x))
+
+
+def mean_uncertainty(sigma_inv: np.ndarray) -> float:
+    prec = np.diag(sigma_inv)
+    return float(np.mean(1.0 / np.clip(prec, 1e-8, None)))
+
+
+# --- Valence signals ---
+_POS = re.compile(
+    r"\b(thank|thanks|great|perfect|awesome|love|helpful|useful|exactly|makes sense|clear|brilliant|nice|good|yes|correct|right)\b",
+    re.I,
+)
+_NEG = re.compile(
+    r"\b(wrong|incorrect|confused|confusing|not what|still don.t|don't understand|that.s not|try again|again\b|useless|unhelpful|bad|nope\b|nah\b|wtf\b|huh\??|noooo+)\b",
+    re.I,
+)
+_REPHRASE = re.compile(r"\b(what I mean|let me rephrase|I said|as I mentioned|again|once more)\b", re.I)
+
+
+def fast_valence(message: str, prev_response: str) -> dict:
+    """Return heuristic valence and a human-readable reason string."""
+    if not prev_response:
+        return {"pos": 0.5, "neg": 0.1, "reason": "first message"}
+    pos_hits = len(_POS.findall(message))
+    neg_hits = len(_NEG.findall(message))
+    rephr = 1 if _REPHRASE.search(message) else 0
+    len_ratio = len(message) / max(len(prev_response), 1)
+    brevity_neg = 0.3 if (len_ratio < 0.08 and len(message) < 15) else 0.0
+
+    pos = float(np.clip(0.3 + 0.3 * pos_hits - 0.1 * neg_hits, 0.0, 1.0))
+    neg = float(np.clip(0.1 + 0.3 * neg_hits + 0.2 * rephr + brevity_neg, 0.0, 1.0))
+
+    reasons = []
+    if pos_hits:
+        reasons.append(f"{pos_hits} positive signal(s)")
+    if neg_hits:
+        reasons.append(f"{neg_hits} negative signal(s)")
+    if rephr:
+        reasons.append("rephrase")
+    if brevity_neg:
+        reasons.append("very short reply")
+    return {"pos": pos, "neg": neg, "reason": ", ".join(reasons) or "neutral"}
+
+
+# --- Explicit format override detection (user mentions what they want) ---
+_OVERRIDE_PATTERNS = [
+    ("structured_bullets", re.compile(r"\b(bullets?|bullet points?|list it|in bullets)\b", re.I)),
+    ("step_by_step", re.compile(r"\b(step by step|steps?|walk me through|procedure)\b", re.I)),
+    ("concise_direct", re.compile(r"\b(concise|short|tl;dr|tldr|in 1-3 sentences)\b", re.I)),
+    ("narrative_prose", re.compile(r"\b(paragraph|narrative|in prose|explain like a story)\b", re.I)),
+    ("socratic_questions", re.compile(r"\b(ask me|ask questions|clarifying questions?)\b", re.I)),
+    ("comparison_table", re.compile(r"\b(table|comparison table|pros and cons|compare|vs\.?|versus)\b", re.I)),
+    ("visualization", re.compile(r"\b(chart|plot|graph|visuali[sz]e|visualization|bar chart|pie chart)\b", re.I)),
+]
+
+
+def detect_format_override(message: str, available: list[str]) -> str | None:
+    m = (message or "").strip().lower()
+    for strat, pat in _OVERRIDE_PATTERNS:
+        if strat in available and pat.search(m):
+            return strat
+    return None
+
+
+# --- Explore triggers (force trying a different format) ---
+_EXPLORE_TRIG = re.compile(r"\b(try again|different|another way|not this|still the same|nope\b|nah\b|noooo+)\b", re.I)
+
+
+def detect_explore_trigger(message: str) -> bool:
+    return bool(_EXPLORE_TRIG.search((message or "").strip()))
+
+
+def negative_strength(ev: dict) -> float:
+    """Map heuristic valence to a [0,1] strength scalar."""
+    if not ev:
+        return 0.0
+    return float(np.clip(ev.get("neg", 0.0), 0.0, 1.0))
+
+
+# --- Response enforcement ---
+def enforce_response(strategy: str, text: str) -> str:
+    """Post-process model output to strongly encourage the chosen format."""
+    t = (text or "").strip()
+
+    if strategy == "structured_bullets":
+        parts = re.split(r"[\n]+", t)
+        if len(parts) <= 2 and len(t) > 160:
+            parts = re.split(r"(?<=[.!])\s+", t)
+        cleaned = []
+        for p in parts:
+            p = p.strip().lstrip("-•* ").strip()
+            if not p:
+                continue
+            if "?" in p:
+                continue
+            cleaned.append(p)
+        cleaned = cleaned[:5]
+        if len(cleaned) < 3:
+            cleaned = cleaned or [t.replace("?", "").strip()]
+        return "\n".join(["- " + c for c in cleaned[:5]])
+
+    if strategy == "step_by_step":
+        lines = [ln.strip() for ln in re.split(r"[\n]+", t) if ln.strip()]
+        items = []
+        for ln in lines:
+            ln = re.sub(r"^([\-*•]|\d+[.)])\s*", "", ln).strip()
+            if ln:
+                items.append(ln)
+        items = items[:6] or [t]
+        return "\n".join([f"{i+1}. {it}" for i, it in enumerate(items[:6])])
+
+    if strategy == "concise_direct":
+        sents = re.split(r"(?<=[.!?])\s+", t)
+        return " ".join(sents[:3]).strip()
+
+    if strategy == "socratic_questions":
+        qs = re.findall(r"[^\n?]*\?", t)
+        if qs:
+            qs = [q.strip() for q in qs if q.strip()][:2]
+            return "Got it.\n" + "\n".join(["- " + q for q in qs])
+        return "Got it.\n- What outcome do you want?\n- Any constraints or example input/output?"
+
+    if strategy == "comparison_table":
+        try:
+            obj = json.loads(t)
+            if isinstance(obj, dict) and isinstance(obj.get("columns"), list) and isinstance(obj.get("rows"), list):
+                return json.dumps(obj)
+        except Exception:
+            pass
+
+        lines = [ln.rstrip() for ln in t.splitlines() if ln.strip()]
+        table_lines = [ln for ln in lines if "|" in ln]
+        if len(table_lines) >= 2:
+            if not any(re.match(r"^\|?\s*[:-]{2,}", ln) for ln in table_lines):
+                header = table_lines[0]
+                cols = [c.strip() for c in header.strip("|").split("|")]
+                sep = "|" + "|".join(["---"] * len(cols)) + "|"
+                return "\n".join([header, sep] + table_lines[1:6])
+            return "\n".join(table_lines[:8])
+
+        fallback = {
+            "columns": ["Option", "Pros", "Cons", "Best for"],
+            "rows": [
+                ["A", "", "", ""],
+                ["B", "", "", ""],
+            ],
+        }
+        return json.dumps(fallback)
+
+    if strategy == "visualization":
+        try:
+            obj = json.loads(t)
+            if (
+                isinstance(obj, dict)
+                and isinstance(obj.get("type"), str)
+                and isinstance(obj.get("labels"), list)
+                and isinstance(obj.get("values"), list)
+            ):
+                return json.dumps(obj)
+        except Exception:
+            pass
+
+        m = re.search(r"```[\s\S]*?```", t)
+        if m:
+            return m.group(0)
+
+        fallback = {
+            "type": "bar",
+            "title": "Visualization",
+            "labels": ["A", "B"],
+            "values": [1, 1],
+            "x_label": "Category",
+            "y_label": "Value",
+        }
+        return json.dumps(fallback)
+
+    return t

anupa/backend/widget_prompt.py

@@ -0,0 +1,685 @@
+"""
+widget_prompt_gpt4.py — GPT-4 optimized widget generation prompt.
+
+GPT-4 is large enough to infer most patterns from training.
+This prompt is shorter and higher-level than the earlier local-model version —
+it sets intent and constraints, not step-by-step instructions.
+
+Usage:
+    from src.widget_prompt_gpt4 import build_widget_prompt, extract_widget_html, estimate_widget_height
+    from openai import OpenAI
+
+    client = OpenAI(api_key="your-key")
+
+    prompt = build_widget_prompt(
+        strategy_id=strategy_id,
+        user_message=user_message,
+        assistant_response=response,
+        event=event,
+    )
+
+    completion = client.chat.completions.create(
+        model="gpt-4o",
+        messages=[
+            {"role": "system", "content": SYSTEM_PROMPT},
+            {"role": "user",   "content": prompt},
+        ],
+        temperature=0.3,
+        max_tokens=4096,
+    )
+
+    html = extract_widget_html(completion.choices[0].message.content)
+"""
+
+from __future__ import annotations
+import re
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# Design system — injected into every widget at post-processing time
+# GPT-4 uses CSS variable names in its output; this supplies the values
+# ══════════════════════════════════════════════════════════════════════════════
+
+_DESIGN_SYSTEM_CSS = """<style id="__ds__">
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#ffffff;--bg2:#f7f8fa;--bg3:#eef0f4;
+  --text:#111318;--text2:#5a5f72;--text3:#9098b0;
+  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.15);
+  --accent:#378ADD;--accent-bg:rgba(55,138,221,0.09);--accent-b:rgba(55,138,221,0.35);
+  --success:#1D9E75;--success-bg:rgba(29,158,117,0.09);
+  --warn:#BA7517;--warn-bg:rgba(186,117,23,0.09);
+  --danger:#E24B4A;--danger-bg:rgba(226,75,74,0.09);
+  --radius:10px;--radius-sm:6px;--radius-pill:99px;
+}
+@media(prefers-color-scheme:dark){:root{
+  --bg:#13151c;--bg2:#1a1d27;--bg3:#20232f;
+  --text:#e8eaf4;--text2:#8d93aa;--text3:#555b72;
+  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.14);
+  --accent:#5ba4f5;--accent-bg:rgba(91,164,245,0.10);--accent-b:rgba(91,164,245,0.35);
+}}
+html,body{margin:0!important;padding:12px 14px!important;
+  background:transparent!important;color:var(--text);
+  font-family:"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6}
+@keyframes __fu{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
+.widget-root{animation:__fu .22s ease-out}
+.card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;transition:border-color .15s}
+.card:hover{border-color:var(--border2)}
+.card-title{font-size:11px;font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
+.raised{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px;transition:border-color .15s,transform .1s;cursor:pointer}
+.raised:hover{border-color:var(--accent-b);transform:translateY(-1px)}
+.raised:active{transform:translateY(0) scale(.992)}
+.raised.highlight{border:1.5px solid var(--accent-b)}
+.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
+.tab{padding:5px 13px;border-radius:var(--radius-sm);border:0.5px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-size:12px;transition:all .15s}
+.tab:hover{background:var(--bg3);color:var(--text)}
+.tab:active{transform:scale(.985)}
+.tab.active{background:var(--bg3);color:var(--text);border-color:var(--accent)}
+.panel{display:none}.panel.active{display:block}
+table{width:100%;border-collapse:collapse;font-size:13px}
+th{background:var(--bg3);color:var(--text2);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 11px;text-align:left;border-bottom:0.5px solid var(--border2)}
+td{padding:8px 11px;border-bottom:0.5px solid var(--border);color:var(--text);vertical-align:middle}
+tr:last-child td{border-bottom:none}
+tr.clickable:hover td{background:var(--accent-bg);cursor:pointer}
+.search{width:100%;padding:8px 12px;border-radius:var(--radius-sm);border:0.5px solid var(--border2);background:var(--bg);color:var(--text);font-size:13px;outline:none;box-sizing:border-box;margin-bottom:10px;transition:border-color .15s}
+.search:focus{border-color:var(--accent)}
+.pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
+.pill{padding:4px 12px;border-radius:var(--radius-pill);border:0.5px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-size:12px;transition:all .15s}
+.pill:hover{background:var(--bg3)}.pill.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-b)}
+.pill:active{transform:scale(.985)}
+.ctrl-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
+.ctrl-lbl{font-size:12px;color:var(--text2);width:115px;flex-shrink:0}
+.ctrl-val{font-size:12px;font-weight:500;color:var(--text);min-width:54px;text-align:right}
+.btn-group{display:flex;gap:6px;flex-wrap:wrap}
+.btn{padding:6px 13px;border-radius:var(--radius-sm);border:0.5px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-size:12px;transition:all .15s}
+.btn:hover{background:var(--bg3);color:var(--text)}.btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-b)}
+.btn:active{transform:scale(.985)}
+.ask-btn{display:inline-flex;align-items:center;gap:5px;margin-top:12px;padding:7px 14px;border-radius:var(--radius-sm);border:0.5px solid var(--border2);background:transparent;color:var(--text2);font-size:12px;cursor:pointer;transition:all .15s}
+.ask-btn:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-b)}
+.ask-btn:active{transform:scale(.985)}
+.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500}
+.b-blue{background:var(--accent-bg);color:var(--accent)}.b-green{background:var(--success-bg);color:var(--success)}
+.b-amber{background:var(--warn-bg);color:var(--warn)}.b-red{background:var(--danger-bg);color:var(--danger)}.b-gray{background:var(--bg3);color:var(--text2)}
+.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:14px}
+.metric{background:var(--bg3);border-radius:var(--radius-sm);padding:12px}
+.metric-lbl{font-size:11px;color:var(--text2);margin-bottom:4px}.metric-val{font-size:22px;font-weight:500}
+.progress-wrap{background:var(--bg3);border-radius:var(--radius-pill);height:8px;overflow:hidden;margin-top:4px}
+.progress-bar{height:100%;border-radius:var(--radius-pill);background:var(--accent);transition:width .4s ease-out}
+.result-box{background:var(--bg2);border-radius:var(--radius-sm);padding:14px;margin-top:12px}
+.result-lbl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
+.result-val{font-size:26px;font-weight:500}.result-sub{font-size:12px;color:var(--text2);margin-top:3px}
+.step-row{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;border-radius:var(--radius-sm);border-bottom:0.5px solid var(--border);cursor:pointer;transition:background .1s}
+.step-row:last-child{border-bottom:none}.step-row:hover{background:var(--accent-bg)}
+.step-num{width:28px;height:28px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
+.step-title{font-size:14px;font-weight:500}.step-desc{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.5}
+.count-lbl{font-size:12px;color:var(--text2);margin-bottom:8px}
+.empty{font-size:13px;color:var(--text2);padding:12px 0;text-align:center}
+</style>"""
+
+_SEND_PROMPT_BRIDGE = """<script>
+if(!window.sendPrompt)window.sendPrompt=function(t){
+  window.parent.postMessage({type:"streamlit:setComponentValue",value:t},"*");
+};
+function __postWidgetHeight(){
+  try{
+    const b=document.body, d=document.documentElement;
+    const h=Math.max(
+      b ? b.scrollHeight : 0,
+      d ? d.scrollHeight : 0,
+      b ? b.offsetHeight : 0,
+      d ? d.offsetHeight : 0
+    );
+    window.parent.postMessage({type:"widget:height",value:(h+20)},"*");
+  }catch(_e){}
+}
+if(!window.__widgetHeightBound){
+  window.__widgetHeightBound=true;
+  window.addEventListener("load",function(){
+    __postWidgetHeight();
+    setTimeout(__postWidgetHeight,120);
+    setTimeout(__postWidgetHeight,420);
+  });
+  if(typeof ResizeObserver!=="undefined"){
+    try{
+      const ro=new ResizeObserver(function(){__postWidgetHeight();});
+      ro.observe(document.body || document.documentElement);
+    }catch(_e){}
+  }
+}
+</script>"""
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# System prompt — short and high-level for GPT-4
+# GPT-4 already knows HTML/JS/CSS deeply — this sets intent + constraints only
+# ══════════════════════════════════════════════════════════════════════════════
+
+SYSTEM_PROMPT = """You are a Visualizer embedded in a chat assistant.
+
+When given a user question and assistant response, you generate a single
+self-contained interactive HTML widget — like the widgets in Claude.ai.
+
+## Output rules
+- Return ONLY raw HTML. No markdown fences. No explanation.
+- Inline all CSS in <style> and JS in <script>.
+- No frameworks. Plain HTML + CSS + JS only.
+- Chart.js allowed: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js
+- Wrap everything in <div class="widget-root">
+- No position:fixed. No hardcoded hex colors — CSS variables only.
+- Always define: function sendPrompt(t){window.parent.postMessage({type:"streamlit:setComponentValue",value:t},"*");}
+- Always call your main render/calc function on page load.
+
+## Design system
+A CSS design system with these variables is already injected:
+--bg --bg2 --bg3 (backgrounds)
+--text --text2 --text3 (text)
+--border --border2 (borders)
+--accent --accent-bg --accent-b (blue)
+--success --success-bg (green)
+--warn --warn-bg (amber)
+--danger --danger-bg (red)
+--radius --radius-sm --radius-pill
+
+Pre-built classes available: .card .raised .card-title .tabs .tab .panel
+table th td tr.clickable .search .pills .pill .ctrl-row .ctrl-lbl .ctrl-val
+.btn-group .btn .ask-btn .badge .b-blue .b-green .b-amber .b-red .b-gray
+.metric-grid .metric .metric-lbl .metric-val .progress-wrap .progress-bar
+.result-box .result-lbl .result-val .result-sub .step-row .step-num
+.step-title .step-desc .count-lbl .empty
+
+For Chart.js colors (canvas can't use CSS vars):
+const dark=matchMedia('(prefers-color-scheme:dark)').matches;
+const tc=dark?'#8d93aa':'#5a5f72';
+const gc=dark?'rgba(255,255,255,0.06)':'rgba(0,0,0,0.06)';
+
+## Visual quality bar
+- Aim for an enterprise dashboard look-and-feel: clean, minimal, high information density.
+- Prefer clear structure: summary row → controls → main visualization → details / next steps.
+- Use spacing and typography hierarchy instead of heavy borders.
+- Group related controls and metrics in cards so the widget feels like a cohesive mini app.
+
+## What to build — pick controls that fit the content
+
+| Content type | Controls to use |
+|---|---|
+| 2+ options to compare | Comparison cards (.raised grid) or table, highlight best |
+| 5+ list items | Search input + count label + clickable rows |
+| Items with categories | Filter pills |
+| Adjustable numbers | Range sliders (.ctrl-row) + live calc() + .ask-btn |
+| Percentages/allocations | Progress bars (.progress-wrap) |
+| Time series / trends | Chart.js line chart + period buttons |
+| Rankings / comparisons | Chart.js bar chart |
+| Step-by-step process | .step-row list with Prev/Next or all visible |
+| Key stats / numbers | .metric-grid cards |
+| 2+ sections / topics | Tabs (.tabs .tab .panel) |
+| Calculator output | .result-box + .ask-btn with values baked in |
+
+## Interaction rules
+- Sliders → local calc() only. Never sendPrompt on drag.
+- Slider initial values MUST match assistant_response exactly.
+- If response says P=1000, r=5%, years=10, use those exact defaults (no generic defaults).
+- Cards, rows, results → sendPrompt('specific question about [exact item]')
+- Always add .ask-btn below calculator output
+- Every clickable element needs a hover state
+- sendPrompt text must be specific — never generic "tell me more"
+
+## What not to do
+- No hardcoded colors
+- No sendPrompt on slider drag
+- No empty output on first render — always call calc() on load
+- No placeholder or lorem ipsum data — use real content only
+- No position:fixed
+- No external fonts or icon libraries"""
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# Content signal detector
+# ══════════════════════════════════════════════════════════════════════════════
+
+def _detect_signals(event: str, user_message: str, response: str) -> str:
+    """Detect visual signals in the response and return hints for GPT-4."""
+    hints: list[str] = []
+    text  = response.lower()
+    lines = response.split('\n')
+
+    list_items  = sum(1 for l in lines if l.strip().startswith(('-','•','*','→'))
+                      or (len(l.strip())>2 and l.strip()[0].isdigit() and l.strip()[1] in '.):'))
+    num_count   = len(re.findall(r'\b\d+\.?\d*\b', response))
+    pct_count   = len(re.findall(r'\d+\.?\d*\s*%', response))
+    word_count  = len(response.split())
+    section_cnt = len(re.findall(r'\n#{1,3}\s', response))
+
+    if event == 'decision' or any(w in text for w in ['vs','versus','compare','pros','cons','difference']):
+        hints.append("COMPARISON: comparison cards or table — highlight recommended option")
+
+    if list_items > 5:
+        hints.append(f"SEARCH: {list_items} items — add search input and count label")
+    elif list_items > 1:
+        hints.append(f"LIST: {list_items} items — interactive clickable list")
+
+    if num_count >= 4:
+        calc_kw = ['invest','compound','interest','return','growth','project',
+                   'forecast','calculate','savings','mortgage','loan','retire']
+        if any(w in text for w in calc_kw):
+            hints.append("CALCULATOR: range sliders + live calc() + Chart.js line chart + ask button")
+        else:
+            hints.append(f"METRICS: {num_count} numbers — metric cards")
+
+    if pct_count >= 2:
+        hints.append(f"PROGRESS: {pct_count} percentages — animated progress bars")
+
+    if sum(1 for w in ['step','first','second','then','next','finally','how to'] if w in text) >= 2:
+        hints.append("STEPS: step list with click-to-ask on each step")
+
+    time_kw = ['year','month','quarter','trend','growth','over time','history','forecast','annual']
+    if sum(1 for w in time_kw if w in text) >= 2 and num_count >= 3:
+        hints.append("CHART: time/trend data — Chart.js line chart with period buttons")
+
+    if section_cnt >= 2 or word_count > 200:
+        hints.append("TABS: 2+ sections detected — organize with tabs")
+
+    if list_items > 3 and any(w in text for w in ['type','category','kind','group']):
+        hints.append("FILTERS: categorical items — filter pills")
+
+    # FAQ-like content => accordion for progressive disclosure.
+    faq_markers = ['faq', 'frequently asked', 'q:', 'a:', 'question', 'answer']
+    if any(w in text for w in faq_markers):
+        hints.append("FAQ: accordion sections with concise expandable answers")
+
+    # Elimination flow / shortlist decisions => elimination matrix.
+    elim_markers = ['eliminate', 'shortlist', 'screen', 'must-have', 'nice to have', 'criteria']
+    if any(w in text for w in elim_markers):
+        hints.append("ELIMINATION_MATRIX: criteria-based keep/drop table with rationale")
+
+    # Correlation/distribution style numeric pairs => bubble/scatter.
+    scatter_markers = ['correlation', 'relationship', 'risk vs return', 'x-axis', 'y-axis', 'distribution']
+    if any(w in text for w in scatter_markers):
+        hints.append("SCATTER: bubble/scatter chart for pairwise numeric relationship")
+
+    return '\n'.join(f"• {h}" for h in hints) if hints else "• SIMPLE: clean card with clickable content"
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# Public API
+# ══════════════════════════════════════════════════════════════════════════════
+
+
+def requires_local_interaction(user_message: str, assistant_response: str, event: str = "") -> bool:
+    """Detect when widget should support local value tweaking (sliders/inputs + calc)."""
+    text = f"{user_message}\n{assistant_response}".lower()
+    strong_intent_words = [
+        "slider",
+        "sliders",
+        "tweak",
+        "adjust",
+        "change values",
+        "interactive calculator",
+        "calculator",
+        "projection",
+        "project",
+        "what if",
+    ]
+    finance_tweak_words = [
+        "slider",
+        "adjust",
+        "tweak",
+        "change",
+        "what if",
+        "calculate",
+        "calculator",
+        "projection",
+        "project",
+        "forecast",
+        "invest",
+        "interest",
+        "returns",
+        "years",
+        "rate",
+        "monthly",
+        "sip",
+        "emi",
+        "loan",
+        "mortgage",
+    ]
+    number_count = len(re.findall(r"\b\d+\.?\d*\b", text))
+    if event.lower() in {"calculation", "planner"}:
+        return True
+    if any(w in text for w in strong_intent_words):
+        return True
+    if any(w in text for w in finance_tweak_words) and number_count >= 1:
+        return True
+    return False
+
+
+def has_local_interaction_controls(html: str) -> bool:
+    """Check that generated widget has true local interaction controls."""
+    if not html:
+        return False
+    h = html.lower()
+    has_input = (
+        'type="range"' in h
+        or "type='range'" in h
+        or 'type="number"' in h
+        or "type='number'" in h
+    )
+    has_calc = "function calc" in h or "oninput=\"calc(" in h or "oninput='calc(" in h
+    return has_input and has_calc
+
+
+INTENT_WIDGET_MAP = {
+    # Event-style labels
+    "decision": "comparison_cards + horizontal_bar + tabs",
+    "information": "data_table + search + metric_cards",
+    "confusion": "step_navigator + info_card",
+    "summary": "metric_cards + bullet_list + tabs",
+    "follow_up": "honor_previous_widget_type",
+    # Strategy-style labels (used by this app currently)
+    "comparison_table": "comparison_cards + data_table + filter_pills",
+    "visualization": "line_or_bar_chart + metric_cards",
+    "step_by_step": "step_navigator + insight_card",
+    "structured_bullets": "insight_card + drill_down_cards",
+    "narrative_prose": "tabs + insight_card + metric_cards",
+    "concise_direct": "result_box + ask_button",
+    "socratic_questions": "accordion_faq + ask_button",
+}
+
+
+def _intent_widget_hint(event: str, user_message: str) -> str:
+    """Return an intent-first widget hint before content signal hints."""
+    e = (event or "").strip().lower()
+    if e in INTENT_WIDGET_MAP:
+        return INTENT_WIDGET_MAP[e]
+
+    q = (user_message or "").lower()
+    if any(w in q for w in ["compare", "vs", "versus", "pros", "cons"]):
+        return "comparison_cards + horizontal_bar + tabs"
+    if any(w in q for w in ["calculate", "projection", "what if", "compound", "interest"]):
+        return "range_slider + metric_cards + line_chart + ask_button"
+    if any(w in q for w in ["list", "top", "show all", "find"]):
+        return "search + filter_pills + data_table + ask_button"
+    if any(w in q for w in ["how to", "steps", "guide"]):
+        return "step_navigator + info_card"
+    return "info_card + metric_cards"
+
+
+def _extract_calc_defaults(text: str) -> dict:
+    """Extract calculator defaults from assistant response text."""
+    src = text or ""
+    out = {
+        "principal": None,
+        "rate": None,
+        "years": None,
+        "n": None,
+        "final": None,
+    }
+
+    p = re.search(r"(?:principal|p)\s*[:=]\s*\$?\s*([0-9][0-9,]*(?:\.\d+)?)", src, re.IGNORECASE)
+    if p:
+        out["principal"] = float(p.group(1).replace(",", ""))
+
+    r = re.search(r"(?:rate|r)\s*[:=]\s*([0-9]+(?:\.\d+)?)\s*%?", src, re.IGNORECASE)
+    if r:
+        out["rate"] = float(r.group(1))
+
+    y = re.search(r"(?:years?|t)\s*[:=]\s*([0-9]{1,3})\b", src, re.IGNORECASE)
+    if y:
+        out["years"] = int(y.group(1))
+
+    n = re.search(r"\bn\s*[:=]\s*([0-9]{1,3})\b", src, re.IGNORECASE)
+    if n:
+        out["n"] = int(n.group(1))
+
+    a = re.search(r"(?:final|amount|a|fv)\s*[≈~=:\s]+\$?\s*([0-9][0-9,]*(?:\.\d+)?)", src, re.IGNORECASE)
+    if a:
+        out["final"] = float(a.group(1).replace(",", ""))
+
+    # Fallbacks from generic values in text if explicit labels are missing.
+    if out["principal"] is None:
+        m = re.search(r"\$([0-9][0-9,]*(?:\.\d+)?)", src)
+        if m:
+            out["principal"] = float(m.group(1).replace(",", ""))
+    if out["rate"] is None:
+        m = re.search(r"([0-9]+(?:\.\d+)?)\s*%", src)
+        if m:
+            out["rate"] = float(m.group(1))
+    if out["years"] is None:
+        m = re.search(r"([0-9]{1,2})\s*(?:years?|yrs?)", src, re.IGNORECASE)
+        if m:
+            out["years"] = int(m.group(1))
+
+    return out
+
+def build_widget_prompt(
+    strategy_id: str,
+    user_message: str,
+    assistant_response: str,
+    event: str = "",
+    extra_context: str = "",
+) -> str:
+    """
+    Build the user-turn prompt for GPT-4 widget generation.
+    Pass SYSTEM_PROMPT as the system message separately.
+
+    This version deliberately does NOT use keyword- or regex-based
+    heuristics to choose controls. The model is responsible for
+    reading the full assistant_response and user_message and deciding
+    which interactive UI (tabs, charts, sliders, filters, tables,
+    etc.) best serves the content.
+
+    Args:
+        strategy_id:        primitive id (e.g. 'comparison_table')
+        user_message:       original user question
+        assistant_response: text response from engine
+        event:              classified event type
+        extra_context:      optional hints from primitive_widget_map.py
+    """
+    defaults = _extract_calc_defaults(assistant_response)
+
+    extra = f"\nPrimitive instructions:\n{extra_context}\n" if extra_context else ""
+    grounding = ""
+    if any(v is not None for v in defaults.values()):
+        parts = []
+        if defaults["principal"] is not None:
+            parts.append(f"Principal = ${int(defaults['principal']):,}")
+        if defaults["rate"] is not None:
+            parts.append(f"Rate = {defaults['rate']}%")
+        if defaults["years"] is not None:
+            parts.append(f"Years = {defaults['years']}")
+        if defaults["n"] is not None:
+            parts.append(f"n = {defaults['n']}")
+        if defaults["final"] is not None:
+            parts.append(f"Final answer = ${defaults['final']:,.2f}")
+        grounding = (
+            "PRE-FILL THESE EXACT VALUES into slider defaults and initial state:\n"
+            + "\n".join(f"- {p}" for p in parts)
+            + "\nDo not invent alternative defaults."
+        )
+
+    guidance = (
+        "Decide the widget layout and controls by understanding the meaning of the "
+        "assistant_response and user_message. Do NOT rely on fixed keyword triggers. "
+        "If the explanation compares options, use comparison-style UI; if it describes "
+        "time or trends, use charts; if it walks through a process, use step-style UI; "
+        "if it exposes tweakable numeric parameters, use sliders/inputs with live calc(). "
+        "Always favor interactive controls that let the user explore the specific numbers, "
+        "entities, and scenarios mentioned in the assistant_response.\n"
+    )
+
+    return (
+        f"Event: {event or 'unknown'} | Strategy: {strategy_id}\n"
+        f"{extra}\n"
+        f"{grounding}\n\n"
+        f"{guidance}\n"
+        f"User asked:\n{user_message}\n\n"
+        f"Assistant response to visualize:\n{assistant_response}\n\n"
+        f"Generate the widget HTML now."
+    )
+
+
+def inject_design_system(html: str) -> str:
+    """Post-process: inject design system CSS + sendPrompt bridge."""
+    if not html:
+        return html
+
+    if '__ds__' not in html:
+        if re.search(r'<head[^>]*>', html, re.IGNORECASE):
+            html = re.sub(r'(<head[^>]*>)', r'\1\n' + _DESIGN_SYSTEM_CSS,
+                          html, count=1, flags=re.IGNORECASE)
+        else:
+            html = _DESIGN_SYSTEM_CSS + html
+
+    if 'streamlit:setComponentValue' not in html:
+        if re.search(r'</body>', html, re.IGNORECASE):
+            html = re.sub(r'(</body>)', _SEND_PROMPT_BRIDGE + r'\n\1',
+                          html, count=1, flags=re.IGNORECASE)
+        else:
+            html += _SEND_PROMPT_BRIDGE
+
+    # Force transparent body
+    html = re.sub(
+        r'(body\s*\{[^}]*?)background(?:-color)?\s*:\s*(?!transparent)[^;]+;',
+        r'\1background:transparent!important;',
+        html, flags=re.IGNORECASE
+    )
+
+    # Remove position:fixed
+    html = re.sub(r'position\s*:\s*fixed', 'position:absolute', html, flags=re.IGNORECASE)
+
+    # Enforce .widget-root wrapper so mount animation always fires.
+    if 'class="widget-root"' not in html and "class='widget-root'" not in html:
+        if re.search(r'<body[^>]*>', html, re.IGNORECASE):
+            html = re.sub(r'(<body[^>]*>)', r'\1<div class="widget-root">', html, count=1, flags=re.IGNORECASE)
+            if re.search(r'</body>', html, re.IGNORECASE):
+                html = re.sub(r'(</body>)', r'</div>\n\1', html, count=1, flags=re.IGNORECASE)
+            else:
+                html += "</div>"
+        else:
+            html = f'<div class="widget-root">{html}</div>'
+
+    # Refine generated UI borders to feel lighter in chat surfaces.
+    html = re.sub(r'border\s*:\s*1px\s*solid', 'border: 0.5px solid', html, flags=re.IGNORECASE)
+    html = re.sub(r'border-width\s*:\s*1px\b', 'border-width: 0.5px', html, flags=re.IGNORECASE)
+
+    return html
+
+
+def extract_widget_html(raw: str) -> str | None:
+    """Extract and clean HTML from GPT-4 output."""
+    if not raw:
+        return None
+
+    html = raw.strip()
+
+    # Strip markdown fences (GPT-4 sometimes wraps in ```html)
+    if '```' in html:
+        fence = re.search(r'```html\s*(.*?)```', html, re.DOTALL | re.IGNORECASE)
+        html  = fence.group(1).strip() if fence else re.sub(r'```\w*', '', html).strip()
+
+    if '<' not in html or '>' not in html:
+        return None
+
+    if '<html' not in html.lower():
+        html = f"<html><head></head><body>{html}</body></html>"
+
+    html = re.sub(r'<!DOCTYPE[^>]*>', '', html, flags=re.IGNORECASE).strip()
+    html = inject_design_system(html)
+
+    return html
+
+
+def estimate_widget_height(html: str) -> int:
+    """Estimate iframe height from widget content."""
+    if not html:
+        return 300
+
+    h = html.lower()
+    height = 120
+    height += h.count('<canvas')                                           * 240
+    height += h.count('<table')                                            * 160
+    height += min(h.count('<tr'), 15)                                      * 36
+    height += (h.count('class="card')  + h.count("class='card"))          * 80
+    height += (h.count('class="raised') + h.count("class='raised"))       * 100
+    height += min(h.count('<li'), 12)                                      * 30
+    height += (h.count('type="range')  + h.count("type='range"))          * 54
+    height += h.count('<select')                                           * 50
+    height += h.count('step-row')                                          * 56
+    height += h.count('metric-grid')                                       * 100
+    height += h.count('result-box')                                        * 90
+    height += (h.count('class="tab')   + h.count("class='tab"))           * 10
+
+    return max(280, min(height, 920))
+
+
+def build_local_calc_fallback(user_message: str, assistant_response: str) -> str:
+    """Deterministic local calculator widget used when LLM output is static."""
+    defaults = _extract_calc_defaults(assistant_response)
+    nums = [float(x) for x in re.findall(r"\b\d+\.?\d*\b", f"{user_message} {assistant_response}")[:3]]
+    principal = int(defaults["principal"]) if defaults["principal"] is not None else (int(nums[0]) if len(nums) > 0 else 10000)
+    rate = float(defaults["rate"]) if defaults["rate"] is not None else (float(nums[1]) if len(nums) > 1 else 8.0)
+    years = int(defaults["years"]) if defaults["years"] is not None else (int(nums[2]) if len(nums) > 2 else 10)
+    n = int(defaults["n"]) if defaults["n"] is not None else 1
+    target = float(defaults["final"]) if defaults["final"] is not None else None
+
+    principal = max(1000, min(principal, 2000000))
+    rate = max(1.0, min(rate, 25.0))
+    years = max(1, min(years, 40))
+    n = max(1, min(n, 365))
+
+    html = f"""
+<html><head></head><body>
+<div class="widget-root card">
+  <div class="card-title">Interactive Projection</div>
+  <div class="ctrl-row">
+    <div class="ctrl-lbl">Principal</div>
+    <input id="p" type="range" min="1000" max="2000000" step="1000" value="{principal}" oninput="calc()" style="flex:1" />
+    <div class="ctrl-val" id="pv"></div>
+  </div>
+  <div class="ctrl-row">
+    <div class="ctrl-lbl">Rate (%)</div>
+    <input id="r" type="range" min="1" max="25" step="0.1" value="{rate}" oninput="calc()" style="flex:1" />
+    <div class="ctrl-val" id="rv"></div>
+  </div>
+  <div class="ctrl-row">
+    <div class="ctrl-lbl">Years</div>
+    <input id="y" type="range" min="1" max="40" step="1" value="{years}" oninput="calc()" style="flex:1" />
+    <div class="ctrl-val" id="yv"></div>
+  </div>
+  <div class="result-box">
+    <div class="result-lbl">Projected Value</div>
+    <div class="result-val" id="out">$0</div>
+    <div class="result-sub" id="gain"></div>
+    <div class="result-sub">Compounding frequency n = {n}</div>
+    {"<div class='result-sub'>Response target: $" + f"{target:,.2f}" + "</div>" if target is not None else ""}
+  </div>
+  <button class="ask-btn" onclick="askAbout()">Ask about this ↗</button>
+</div>
+<script>
+function sendPrompt(t) {{
+  window.parent.postMessage({{type:"streamlit:setComponentValue",value:t}},"*");
+}}
+function fmt(n) {{
+  return '$' + Math.round(n).toLocaleString();
+}}
+function calc() {{
+  const P = +document.getElementById('p').value;
+  const R = +document.getElementById('r').value / 100;
+  const Y = +document.getElementById('y').value;
+  const n = {n};
+  const FV = P * Math.pow(1 + (R / n), n * Y);
+  document.getElementById('pv').textContent = fmt(P);
+  document.getElementById('rv').textContent = (R*100).toFixed(1) + '%';
+  document.getElementById('yv').textContent = Y + 'y';
+  document.getElementById('out').textContent = fmt(FV);
+  document.getElementById('gain').textContent = 'Estimated gain: ' + fmt(FV - P);
+}}
+function askAbout() {{
+  const P = document.getElementById('p').value;
+  const R = document.getElementById('r').value;
+  const Y = document.getElementById('y').value;
+  sendPrompt('Explain this projection for principal $' + P + ', rate ' + R + '%, years ' + Y);
+}}
+calc();
+</script>
+</body></html>
+""".strip()
+    return inject_design_system(html)

anupa/index.html

@@ -0,0 +1,2175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Adaptive Presentation Engine</title>
+<style>
+/* ── PAGE SWITCHER ── */
+.page { display: none; }
+.page.active { display: contents; }
+#fw-page { display: none; }
+#fw-page.active { display: block; position: fixed; inset: 52px 0 0 0; overflow-y: auto; z-index: 50; }
+
+.nav-tabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 18px;
+}
+.nav-tab {
+  font-family: 'Syne', sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  padding: 5px 14px;
+  border-radius: 7px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  background: transparent;
+  color: var(--dm);
+  transition: all .18s;
+}
+.nav-tab:hover { border-color: var(--bd); color: var(--tx); }
+.nav-tab.active { background: var(--ac); color: #fff; border-color: var(--ac); }
+.nav-tab.fw-tab.active { background: #1a3a5c; color: #5bc8ff; border-color: #1e4a6e; }
+
+/* ── FUTURE WORK PAGE ── */
+#fw-page {
+  background: #080d14;
+  color: #e2e8f0;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+.fw-inner {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 52px 28px 80px;
+}
+
+.fw-eyebrow {
+  font-family: 'DM Mono', monospace;
+  font-size: 12px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  color: #4a9eff;
+  margin-bottom: 14px;
+}
+
+.fw-title {
+  font-family: 'Syne', sans-serif;
+  font-size: 44px;
+  font-weight: 800;
+  color: #f0f6ff;
+  line-height: 1.1;
+  margin-bottom: 14px;
+}
+
+.fw-subtitle {
+  font-size: 16px;
+  color: #7a8fa6;
+  line-height: 1.7;
+  max-width: 580px;
+  margin-bottom: 36px;
+}
+
+/* Profile card */
+.fw-profile {
+  background: #0d1724;
+  border: 1px solid #1a2d42;
+  border-radius: 16px;
+  padding: 22px 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.fw-profile-left { display: flex; flex-direction: column; gap: 4px; }
+.fw-profile-name {
+  font-family: 'Syne', sans-serif;
+  font-size: 22px;
+  font-weight: 800;
+  color: #f0f6ff;
+}
+.fw-profile-sub { font-size: 13px; color: #4a5f72; font-family: 'DM Mono', monospace; }
+.fw-profile-stats { display: flex; gap: 32px; }
+.fw-stat { text-align: center; }
+.fw-stat-val {
+  font-family: 'Syne', sans-serif;
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1;
+}
+.fw-stat-val.blue { color: #4a9eff; }
+.fw-stat-val.green { color: #2ecc8c; }
+.fw-stat-val.orange { color: #f5a623; }
+.fw-stat-lbl { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #4a5f72; margin-top: 4px; }
+
+/* Portrait summary */
+.fw-summary {
+  background: #0d1724;
+  border: 1px solid #1a2d42;
+  border-radius: 16px;
+  padding: 22px 26px;
+  margin-bottom: 28px;
+}
+.fw-summary-hdr {
+  font-family: 'DM Mono', monospace;
+  font-size: 10px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: #3a6a9a;
+  margin-bottom: 12px;
+}
+.fw-summary-text {
+  font-size: 15px;
+  line-height: 1.85;
+  color: #8fa8c0;
+}
+.fw-summary-text .hi-blue { color: #4a9eff; font-weight: 600; }
+.fw-summary-text .hi-green { color: #2ecc8c; font-weight: 600; }
+.fw-summary-text .hi-orange { color: #f5a623; font-weight: 600; }
+
+/* Facets section */
+.fw-facets-hdr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.fw-facets-title {
+  font-family: 'DM Mono', monospace;
+  font-size: 9px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: #3a6a9a;
+}
+.fw-facets-sort { font-size: 10px; color: #3a6a9a; }
+
+/* Facet card */
+.fw-facet {
+  background: #0d1724;
+  border: 1px solid #1a2d42;
+  border-radius: 16px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color .2s;
+}
+.fw-facet:hover { border-color: #254060; }
+.fw-facet.expanded { border-color: currentColor; }
+.fw-facet.blue-border { border-color: #1e4d80; }
+.fw-facet.blue-border.expanded { border-color: #2a6bb5; }
+.fw-facet.green-border { border-color: #1a4a30; }
+.fw-facet.green-border.expanded { border-color: #2a8c5a; }
+.fw-facet.orange-border { border-color: #4a3010; }
+.fw-facet.orange-border.expanded { border-color: #c47d20; }
+.fw-facet.red-border { border-color: #4a1a1a; }
+.fw-facet.red-border.expanded { border-color: #b54040; }
+.fw-facet.purple-border { border-color: #2a1a4a; }
+.fw-facet.purple-border.expanded { border-color: #7040c0; }
+
+.fw-facet-top {
+  display: flex;
+  align-items: center;
+  padding: 18px 20px;
+  gap: 16px;
+}
+.fw-ring-wrap { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
+.fw-ring-wrap svg { position: absolute; inset: 0; transform: rotate(-90deg); }
+.fw-ring-score {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Syne', sans-serif;
+  font-size: 14px;
+  font-weight: 800;
+  color: #f0f6ff;
+}
+.fw-facet-info { flex: 1; }
+.fw-facet-name {
+  font-family: 'Syne', sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  color: #e2e8f0;
+  margin-bottom: 4px;
+}
+.fw-facet-sub { font-size: 12px; color: #4a5f72; display: flex; align-items: center; gap: 8px; }
+.fw-fidelity {
+  font-size: 9px;
+  padding: 2px 8px;
+  border-radius: 100px;
+  font-weight: 600;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.fw-fidelity.high { background: rgba(74,158,255,.15); color: #4a9eff; border: 1px solid rgba(74,158,255,.3); }
+.fw-fidelity.moderate { background: rgba(46,204,140,.12); color: #2ecc8c; border: 1px solid rgba(46,204,140,.3); }
+.fw-fidelity.emerging { background: rgba(245,166,35,.12); color: #f5a623; border: 1px solid rgba(245,166,35,.3); }
+.fw-fidelity.exploring { background: rgba(148,90,220,.12); color: #9a5adc; border: 1px solid rgba(148,90,220,.3); }
+
+.fw-facet-right { text-align: right; }
+.fw-strategy-name {
+  font-family: 'Syne', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  color: #c8dff0;
+  margin-bottom: 3px;
+}
+.fw-strategy-mu {
+  font-family: 'DM Mono', monospace;
+  font-size: 11px;
+  color: #3a6a9a;
+}
+.fw-chevron {
+  color: #3a6a9a;
+  font-size: 12px;
+  margin-left: 10px;
+  transition: transform .25s;
+}
+.fw-facet.open .fw-chevron { transform: rotate(180deg); }
+
+/* Expanded content */
+.fw-facet-body {
+  display: none;
+  padding: 0 20px 20px;
+  border-top: 1px solid #111d2a;
+}
+.fw-facet.open .fw-facet-body { display: block; }
+
+.fw-beta-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 18px 0 16px;
+}
+.fw-beta-cell { }
+.fw-beta-label {
+  font-family: 'DM Mono', monospace;
+  font-size: 9px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+.fw-beta-label .param { font-weight: 600; }
+.fw-beta-svg { width: 100%; height: 80px; }
+
+.fw-insight {
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+.fw-insight-hdr {
+  font-family: 'DM Mono', monospace;
+  font-size: 9px;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.fw-insight-text { font-size: 13.5px; line-height: 1.75; color: #8fa8c0; }
+
+.fw-evidence {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  color: #4a6a82;
+}
+.fw-evidence::before { content: '●'; font-size: 8px; margin-top: 3px; flex-shrink: 0; }
+
+/* Footer note */
+.fw-footer-note {
+  margin-top: 32px;
+  padding: 18px 20px;
+  background: #080d14;
+  border: 1px solid #111d2a;
+  border-radius: 12px;
+  font-size: 13px;
+  color: #3a5a72;
+  line-height: 1.7;
+}
+</style>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
+<style>
+:root {
+  --bg:    #f5f7fb;
+  --s:     #ffffff;
+  --s2:    #fafbfe;
+  --s3:    #eef2f8;
+  --bd:    #dde4ef;
+  --ac:    #615cf6;
+  --g:     #178a59;
+  --r:     #c94545;
+  --y:     #a97700;
+  --c:     #2f9fb2;
+  --tx:    #1f2430;
+  --dm:    #5f6b7c;
+  --dmr:   #94a0b2;
+  --shadow: 0 10px 30px rgba(30, 41, 59, .08);
+
+  --c0:#615cf6; --c0a:rgba(97,92,246,.10);
+  --c1:#e46b6b; --c1a:rgba(228,107,107,.10);
+  --c2:#24b06f; --c2a:rgba(36,176,111,.10);
+  --c3:#d7a325; --c3a:rgba(215,163,37,.10);
+  --c4:#3aa7b8; --c4a:rgba(58,167,184,.10);
+  --c5:#9a72ff; --c5a:rgba(154,114,255,.10);
+  --c6:#ff9f1c; --c6a:rgba(255,159,28,.10);
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{
+  background:var(--bg);color:var(--tx);
+  font-family:'Inter',system-ui,sans-serif;
+  height:100vh;overflow:hidden;
+  display:grid;
+  grid-template-rows:52px 1fr;
+  grid-template-columns:1fr 296px 272px;
+}
+
+/* Demo mode: collapse sidebars to make the split chat obvious */
+body.hideSidebars{ grid-template-columns:1fr 0 0; }
+body.hideSidebars .sa, body.hideSidebars .sb{ display:none; }
+
+/* HEADER */
+header{
+  grid-column:1/-1;
+  background:rgba(255,255,255,.86);border-bottom:1px solid var(--bd);backdrop-filter:blur(10px);
+  display:flex;align-items:center;padding:0 20px;gap:10px;
+}
+.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;letter-spacing:.06em}
+.logo em{color:var(--ac);font-style:normal}
+.pill{font-size:9px;font-weight:600;padding:3px 8px;border-radius:100px;
+  letter-spacing:.1em;text-transform:uppercase}
+.pa{background:var(--c0a);border:1px solid rgba(108,99,255,.3);color:var(--c0)}
+.pg{background:var(--c2a);border:1px solid rgba(61,255,160,.3);color:var(--c2)}
+.hr{margin-left:auto;display:flex;align-items:center;gap:10px}
+.dot{width:7px;height:7px;border-radius:50%;background:var(--dmr);transition:background .3s}
+.dot.live{background:var(--g);box-shadow:0 0 8px var(--g)}
+.dot.err{background:var(--r)}
+.olbl{font-size:10px;color:var(--dm);font-weight:600}
+.bsm{font-family:'Inter',system-ui,sans-serif;font-size:10px;padding:4px 11px;
+  background:transparent;border:1px solid var(--bd);color:var(--dm);
+  border-radius:6px;cursor:pointer;transition:all .18s}
+.bsm:hover{border-color:var(--r);color:var(--r)}
+
+/* CHAT */
+.panehdr{padding:14px 18px;border-bottom:1px solid var(--bd);background:rgba(255,255,255,.8);display:flex;align-items:center;gap:8px}
+.panehdr .ttl{font-family:'Syne',sans-serif;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dm)}
+.pane{display:flex;flex-direction:column;overflow:hidden;min-height:0}
+.pane .msgs{padding:16px 18px;flex:1;overflow-y:auto}
+.pane + .pane{border-left:1px solid var(--bd)}
+
+/* Make the baseline/adaptive panes visually distinct */
+.pane.baseline{background:linear-gradient(180deg, rgba(97,92,246,.03), transparent 26%)}
+.pane.adaptive{background:linear-gradient(180deg, rgba(36,176,111,.04), transparent 26%)}
+.pane.baseline .panehdr{border-bottom:1px solid rgba(255,255,255,.06)}
+.pane.adaptive .panehdr{border-bottom:1px solid rgba(61,255,160,.12)}
+.pane + .pane{border-left:1px solid rgba(97,92,246,.12)}
+
+.chat{display:grid;grid-template-rows:1fr auto;grid-template-columns:1fr 1fr;overflow:hidden;border-right:1px solid var(--bd)}
+body.hideBaseline .chat{grid-template-columns:1fr}
+body.hideBaseline .pane.baseline{display:none}
+.msgs{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth}
+.msgs::-webkit-scrollbar{width:3px}
+.msgs::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
+
+.msg{display:flex;flex-direction:column;gap:5px;animation:fu .26s ease}
+@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.msg.u{align-items:flex-end}
+.msg.a{align-items:flex-start}
+.who{font-size:10px;color:var(--dm);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
+.bub{max-width:82%;padding:14px 17px;border-radius:16px;font-size:15px;line-height:1.75;box-shadow:var(--shadow)}
+.msg.u .bub{background:linear-gradient(135deg,#736eff,#615cf6);color:#fff;border-bottom-right-radius:6px}
+.msg.a .bub{background:#fff;border:1px solid var(--bd);border-bottom-left-radius:6px}
+
+.bub table{
+  width:100%;
+  border-collapse:collapse;
+  margin-top:8px;
+  font-size:13px;
+  background:#fff;
+}
+.bub th,.bub td{
+  border:1px solid var(--bd);
+  padding:9px 10px;
+  text-align:left;
+  vertical-align:top;
+}
+.bub th{
+  background:#f3f6fb;
+  color:var(--tx);
+}
+.bub pre{
+  margin:8px 0 0;
+  padding:12px 14px;
+  border-radius:12px;
+  background:#f8faff;
+  border:1px solid var(--bd);
+  overflow-x:auto;
+  white-space:pre-wrap;
+  font-size:13px;
+  line-height:1.6;
+}
+.bub code{
+  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+.viz-wrap{margin-top:4px}
+.widget-mount{margin-top:10px}
+.widget-frame{
+  width:100%;
+  border:0;
+  border-radius:12px;
+  background:transparent;
+  opacity:0;
+  transition:opacity .18s ease;
+}
+.widget-frame.ready{
+  opacity:1;
+}
+.widget-skeleton{
+  border:1px solid var(--bd);
+  border-radius:12px;
+  background:linear-gradient(180deg,#fbfcff,#f7f9fd);
+  padding:14px;
+  margin-bottom:4px;
+}
+.widget-skeleton .line{
+  height:10px;
+  border-radius:999px;
+  background:linear-gradient(90deg,#eef2f8 0%,#e3e9f3 50%,#eef2f8 100%);
+  background-size:200% 100%;
+  animation:sk 1.1s ease-in-out infinite;
+  margin-bottom:9px;
+}
+.widget-skeleton .line:last-child{margin-bottom:0}
+.widget-skeleton .w60{width:60%}
+.widget-skeleton .w80{width:80%}
+.widget-skeleton .w95{width:95%}
+
+.ws-root{display:flex;flex-direction:column;gap:12px;margin-top:10px}
+.ws-text{font-size:13px;color:var(--dm);line-height:1.6}
+.ws-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
+.ws-kpi{padding:12px}
+.ws-kpi-lbl{font-size:11px;color:var(--dm);margin-bottom:6px}
+.ws-kpi-val{font-size:20px;font-weight:700;color:var(--ink)}
+.ws-kpi-val.positive{color:var(--g)}
+.ws-kpi-val.negative{color:var(--r)}
+.ws-kpi-val.neutral{color:var(--ink)}
+.ws-table-el{width:100%;border-collapse:collapse}
+.ws-table-el th,.ws-table-el td{border-bottom:1px solid rgba(15,23,42,.08);padding:8px 10px;text-align:left;font-size:12.5px}
+.ws-table-el th{font-size:11px;color:var(--dm);text-transform:uppercase;letter-spacing:.04em}
+.ws-actions{display:flex;gap:8px;flex-wrap:wrap}
+.ws-schema-preview{margin-top:10px;padding:10px 12px;border-radius:10px;border:0.5px solid rgba(0,0,0,0.08);background:rgba(0,0,0,0.03);white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:rgba(0,0,0,0.65)}
+@keyframes sk{
+  0%{background-position:180% 0}
+  100%{background-position:-20% 0}
+}
+
+
+.meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.stag{font-size:10px;padding:4px 9px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
+.el{font-size:10px;color:var(--dm)}
+.notice{font-size:9px;padding:2px 9px;border-radius:100px;letter-spacing:.04em}
+.notice.explore{background:var(--c3a);border:1px solid rgba(255,217,61,.3);color:var(--y)}
+.notice.override{background:var(--c5a);border:1px solid rgba(166,107,255,.3);color:var(--c5)}
+
+.autob{font-size:9px;padding:2px 9px;border-radius:100px;letter-spacing:.04em;animation:fu .3s ease}
+.autob.pos{background:var(--c2a);border:1px solid rgba(61,255,160,.3);color:var(--g)}
+.autob.neg{background:var(--c1a);border:1px solid rgba(255,94,94,.3);color:var(--r)}
+
+.rbs{display:flex;gap:4px}
+.rb{font-family:'Inter',system-ui,sans-serif;font-size:10px;padding:2px 9px;border-radius:100px;
+  cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--dm);transition:all .15s}
+.rb:hover{border-color:var(--g);color:var(--g)}
+.rb.neg:hover{border-color:var(--r);color:var(--r)}
+.rb.used{opacity:.3;cursor:default;pointer-events:none}
+
+.typ{display:flex;gap:5px;padding:12px 15px;background:var(--s2);border:1px solid var(--bd);
+  border-radius:13px;border-bottom-left-radius:3px;width:fit-content}
+.typ span{width:5px;height:5px;border-radius:50%;background:var(--dmr);animation:bop 1.1s infinite}
+.typ span:nth-child(2){animation-delay:.18s}
+.typ span:nth-child(3){animation-delay:.36s}
+@keyframes bop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px);background:var(--ac)}}
+
+.errbub{background:rgba(255,94,94,.08);border:1px solid rgba(255,94,94,.3);
+  border-radius:10px;padding:10px 14px;font-size:12px;color:var(--r)}
+
+.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
+  gap:12px;color:var(--dm);text-align:center;padding:40px}
+.ei{font-size:34px;opacity:.35}
+.et{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--tx)}
+.eb{font-size:13px;line-height:1.7;max-width:34ch}
+
+.inrow{padding:16px 18px;border-top:1px solid var(--bd);display:flex;gap:10px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
+textarea#inp{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:9px;
+  padding:9px 13px;color:var(--tx);font-family:'Inter',system-ui,sans-serif;font-size:12.5px;
+  resize:none;outline:none;line-height:1.5;min-height:42px;max-height:110px;transition:border-color .18s}
+textarea#inp:focus{border-color:var(--ac)}
+textarea#inp::placeholder{color:#98a2b3}
+#send{font-family:'Syne',sans-serif;font-weight:700;font-size:12px;padding:0 20px;
+  background:var(--ac);color:#fff;border:none;border-radius:14px;cursor:pointer;
+  letter-spacing:.04em;transition:background .18s, transform .18s;white-space:nowrap;box-shadow:0 8px 20px rgba(97,92,246,.22)}
+#send:hover{background:#5a52e8}
+#send:disabled{opacity:.4;cursor:not-allowed}
+
+/* SIDEBARS */
+.sa,.sb{display:flex;flex-direction:column;overflow:hidden;background:#fff;border-left:1px solid var(--bd)}
+.pnl{padding:14px 14px 12px;border-bottom:1px solid var(--bd)}
+.pt{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;
+  text-transform:uppercase;color:var(--dm);margin-bottom:10px}
+
+.abox{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:12px;transition:all .35s;box-shadow:0 2px 10px rgba(15,23,42,.03)}
+.an{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-bottom:4px}
+.ad{font-size:12px;color:var(--dm);line-height:1.65}
+
+/* Bars */
+.bl{display:flex;flex-direction:column;gap:7px}
+.br{display:flex;flex-direction:column;gap:3px}
+.bh{display:flex;justify-content:space-between;align-items:center}
+.bn{font-size:10px;color:var(--dm);letter-spacing:.02em}
+.bv{font-size:10px;font-weight:700}
+.bt{height:6px;background:var(--s3);border-radius:999px;overflow:hidden}
+.bf{height:100%;border-radius:2px;transition:width .5s cubic-bezier(.16,1,.3,1)}
+.bu{display:flex;justify-content:space-between;align-items:center}
+.ul{font-size:9px;color:var(--dmr)}
+.ut{width:56px;height:4px;background:var(--s3);border-radius:999px;overflow:hidden}
+.uf{height:100%;background:rgba(255,255,255,.1);transition:width .5s ease}
+
+/* Inference table */
+.ir{display:flex;justify-content:space-between;align-items:flex-start;font-size:11px;
+  padding:8px 10px;border-radius:10px;background:var(--s2);margin-bottom:6px;gap:10px}
+.ir.sel{background:var(--c0a);border:1px solid rgba(108,99,255,.25)}
+.in_{color:var(--dm)}
+.iv{font-weight:600}
+
+/* Feature grid */
+.fg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.fi{background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:8px 10px}
+.fk{font-size:9px;color:var(--dm);margin-bottom:3px}
+.fv{font-size:12px;font-weight:600}
+
+/* Global counters */
+.gc{display:flex;justify-content:space-between;margin-bottom:8px}
+.gi{text-align:center}
+.gv{font-family:'Syne',sans-serif;font-weight:700;font-size:22px}
+.gk{font-size:9px;color:var(--dmr);letter-spacing:.05em;text-transform:uppercase}
+
+/* User B */
+.ubh{display:flex;align-items:center;gap:7px;margin-bottom:9px}
+.uba{width:24px;height:24px;border-radius:50%;
+  background:linear-gradient(135deg,var(--y),var(--c));
+  display:flex;align-items:center;justify-content:center;
+  font-size:11px;font-weight:700;color:#000;flex-shrink:0}
+.ubd{font-size:11px;color:var(--dm);line-height:1.6}
+
+/* Log */
+.lg{flex:1;overflow-y:auto;padding:10px 14px 14px;display:flex;flex-direction:column;gap:6px}
+.lg::-webkit-scrollbar{width:2px}
+.lg::-webkit-scrollbar-thumb{background:var(--bd)}
+.le{font-size:10px;padding:8px 10px;border-radius:10px;background:var(--s2);
+  border-left:3px solid transparent;animation:fl .2s ease;line-height:1.5}
+@keyframes fl{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
+.lr{float:right;font-weight:600}
+.ls{font-size:9px;color:var(--dm);margin-top:4px}
+
+/* Color tokens */
+.v0{color:var(--c0)}.v1{color:var(--c1)}.v2{color:var(--c2)}.v3{color:var(--c3)}.v4{color:var(--c4)}.v5{color:var(--c5)}.v6{color:var(--c6)}
+.f0{background:var(--c0)}.f1{background:var(--c1)}.f2{background:var(--c2)}.f3{background:var(--c3)}.f4{background:var(--c4)}.f5{background:var(--c5)}.f6{background:var(--c6)}
+.stag.v0{background:var(--c0a);border:1px solid rgba(108,99,255,.3)}
+.stag.v1{background:var(--c1a);border:1px solid rgba(255,107,107,.3)}
+.stag.v2{background:var(--c2a);border:1px solid rgba(61,255,160,.3)}
+.stag.v3{background:var(--c3a);border:1px solid rgba(255,217,61,.3)}
+.stag.v4{background:var(--c4a);border:1px solid rgba(78,205,196,.3)}
+.stag.v5{background:var(--c5a);border:1px solid rgba(166,107,255,.3)}
+.stag.v6{background:var(--c6a);border:1px solid rgba(255,159,28,.3)}
+
+.sec{border-bottom:1px solid var(--bd);background:#fff}
+.sec summary{list-style:none;cursor:pointer;padding:14px 14px 12px;display:flex;align-items:center;justify-content:space-between;
+  font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dm)}
+.sec summary::-webkit-details-marker{display:none}
+.sec summary::after{content:'▾';font-size:12px;color:var(--dmr);transition:transform .18s ease}
+.sec:not([open]) summary::after{transform:rotate(-90deg)}
+.sec .sec-body{padding:0 14px 14px}
+.sec .sec-body .pt{display:none}
+.sec.compact .sec-body{padding-top:2px}
+.sec .lg{padding:0}
+
+/* Preference modal */
+.modal-bg{position:fixed;inset:0;background:rgba(241,245,249,.76);backdrop-filter:blur(8px);
+  display:flex;align-items:center;justify-content:center;z-index:100}
+.modal{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:30px 32px;
+  max-width:560px;width:92%;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 60px rgba(15,23,42,.12)}
+.modal h2{font-family:'Syne',sans-serif;font-weight:800;font-size:17px}
+.modal p{font-size:13px;color:var(--dm);line-height:1.7}
+.pref-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.pc{border:1px solid var(--bd);border-radius:12px;padding:12px 13px;cursor:pointer;
+  background:transparent;color:var(--tx);text-align:left;transition:all .18s;font-family:'Inter',system-ui,sans-serif}
+.pc:hover{border-color:var(--ac);background:var(--c0a)}
+.pc.sel{border-color:var(--ac);background:var(--c0a)}
+.pc .pn{font-family:'Syne',sans-serif;font-weight:700;font-size:11px;margin-bottom:3px}
+.pc .pd{font-size:11px;color:var(--dm);line-height:1.55}
+.modal-footer{display:flex;gap:8px;justify-content:flex-end}
+.btn-skip{font-family:'Inter',system-ui,sans-serif;font-size:10px;padding:7px 16px;
+  background:transparent;border:1px solid var(--bd);color:var(--dm);border-radius:7px;cursor:pointer}
+.btn-skip:hover{border-color:var(--dm)}
+.btn-go{font-family:'Syne',sans-serif;font-weight:700;font-size:12px;padding:10px 20px;
+  background:var(--ac);color:#fff;border:none;border-radius:7px;cursor:pointer;letter-spacing:.04em}
+.btn-go:hover{background:#5a52e8}
+.btn-go:disabled{opacity:.4;cursor:not-allowed}
+</style>
+</head>
+<body>
+
+<!-- PREFERENCE MODAL (shown on first visit or after reset) -->
+<div class="modal-bg" id="prefModal" style="display:none">
+  <div class="modal">
+    <h2>How do you like responses? <span style="opacity:.4">✦</span></h2>
+    <p>Pick one or more styles — the engine will warm-start your posterior from these before your first message. You can skip and let it learn from scratch instead.</p>
+    <div class="pref-grid">
+      <button class="pc" data-s="structured_bullets" onclick="togglePref(this)">
+        <div class="pn v0">Structured Bullets</div>
+        <div class="pd">Clear lists, scannable, organized</div>
+      </button>
+      <button class="pc" data-s="narrative_prose" onclick="togglePref(this)">
+        <div class="pn v1">Narrative Prose</div>
+        <div class="pd">Flowing paragraphs, warm tone</div>
+      </button>
+      <button class="pc" data-s="concise_direct" onclick="togglePref(this)">
+        <div class="pn v2">Concise & Direct</div>
+        <div class="pd">1–3 punchy sentences, no fluff</div>
+      </button>
+      <button class="pc" data-s="socratic_questions" onclick="togglePref(this)">
+        <div class="pn v3">Socratic Questions</div>
+        <div class="pd">Asks clarifying questions first</div>
+      </button>
+      <button class="pc" data-s="step_by_step" onclick="togglePref(this)" style="grid-column:1/-1">
+        <div class="pn v4">Step-by-Step</div>
+        <div class="pd">Numbered, procedural, methodical</div>
+      </button>
+      <button class="pc" data-s="comparison_table" onclick="togglePref(this)">
+        <div class="pn v5">Comparison Table</div>
+        <div class="pd">Pros/cons or side-by-side comparison</div>
+      </button>
+      <button class="pc" data-s="visualization" onclick="togglePref(this)">
+        <div class="pn v6">Visualization</div>
+        <div class="pd">Quick ASCII chart / simple visualization</div>
+      </button>
+    </div>
+    <div style="display:flex;align-items:center;gap:8px;margin-top:-6px">
+      <input type="checkbox" id="prefLock" style="accent-color:var(--ac)">
+      <label for="prefLock" style="font-size:10px;color:var(--dm)">Lock to ONE style (turns off exploration)</label>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-skip" onclick="skipPref()">Skip — learn from scratch</button>
+      <button class="btn-go" id="prefGo" onclick="submitPref()" disabled>Apply Preferences →</button>
+    </div>
+  </div>
+</div>
+
+<header>
+  <div class="logo">Adaptive<em>.</em>Engine</div>
+  <div class="pill pa">Hierarchical Bayesian</div>
+  <div class="pill pg">Rich Signals · v3</div>
+  <div class="nav-tabs">
+    <button class="nav-tab active" id="tab-main" onclick="switchTab('main')">Chat</button>
+    <button class="nav-tab fw-tab" id="tab-fw" onclick="switchTab('fw')">Future Work</button>
+  </div>
+  <div class="hr">
+    <button class="bsm" id="toggle-sidebars-btn" onclick="toggleSidebars()">Toggle tech panels</button>
+    <button class="bsm" id="toggle-baseline-btn" onclick="toggleBaseline()">Hide baseline</button>
+    <div class="dot" id="dot"></div>
+    <span class="olbl" id="olbl">checking…</span>
+    <button class="bsm" onclick="reset()">↺ Reset</button>
+  </div>
+</header>
+
+
+<!-- CHAT -->
+<div class="chat">
+  <!-- Baseline pane -->
+  <div class="pane baseline">
+    <div class="panehdr">
+      <div class="ttl">Baseline · No Bandit</div>
+      <span class="pill pa" style="margin-left:auto;border-color:rgba(108,99,255,.25);color:var(--dm);background:transparent">normal LLM</span>
+    </div>
+    <div class="msgs" id="msgs_plain">
+      <div class="empty" id="emp_plain">
+        <div class="ei">◻</div>
+        <div class="et">Baseline chat</div>
+        <div class="eb">Same message, but without strategy selection or adaptive formatting.</div>
+      </div>
+    </div>
+    <div style="padding:6px 18px 0;display:none" id="tw_plain">
+      <div class="typ"><span></span><span></span><span></span></div>
+    </div>
+  </div>
+
+  <!-- Adaptive pane -->
+  <div class="pane adaptive">
+    <div class="panehdr">
+      <div class="ttl">Adaptive · Bandit Layer</div>
+      <span class="pill pg" style="margin-left:auto;border-color:rgba(61,255,160,.25);color:var(--dm);background:transparent">thompson sampling</span>
+    </div>
+    <div class="msgs" id="msgs_adapt">
+      <div class="empty" id="emp_adapt">
+        <div class="ei">⬡</div>
+        <div class="et">Adaptive chat</div>
+        <div class="eb">Chooses a presentation strategy per turn using contextual Thompson Sampling + rich feedback signals.</div>
+      </div>
+    </div>
+    <div style="padding:6px 18px 0;display:none" id="tw_adapt">
+      <div class="typ"><span></span><span></span><span></span></div>
+    </div>
+  </div>
+
+  <!-- Shared input row spans both panes -->
+  <div class="inrow" style="grid-column:1/-1">
+    <textarea id="inp" placeholder="Type a message… (sent to both panes)" rows="1"
+      onkeydown="onK(event)" oninput="rsz(this)"></textarea>
+    <button id="send" onclick="send()">SEND →</button>
+  </div>
+</div>
+
+<!-- SIDEBAR A — User posterior -->
+<div class="sa">
+  <details class="sec compact" open>
+    <summary>Active Strategy</summary>
+    <div class="sec-body">
+      <div class="abox">
+        <div class="an v0" id="an">—</div>
+        <div class="ad" id="ad">Waiting for first message…</div>
+      </div>
+    </div>
+  </details>
+
+  <details class="sec" open>
+    <summary>Your Posterior — P(r=1 | x, a=k)</summary>
+    <div class="sec-body">
+      <div class="bl" id="ub"></div>
+    </div>
+  </details>
+
+  <details class="sec" id="ip" style="display:none">
+    <summary>Thompson Sampling — This Turn</summary>
+    <div class="sec-body">
+      <div id="it"></div>
+    </div>
+  </details>
+
+  <details class="sec" id="fp" style="display:none">
+    <summary>Feature Vector x ∈ ℝ¹⁰</summary>
+    <div class="sec-body">
+      <div class="fg" id="fg"></div>
+    </div>
+  </details>
+
+  <details class="sec" open>
+    <summary>Reward Log</summary>
+    <div class="sec-body">
+      <div class="lg" id="lg"><p style="font-size:10px;color:var(--dmr);text-align:center;padding:16px">No interactions yet</p></div>
+    </div>
+  </details>
+</div>
+
+<!-- SIDEBAR B — Global + User B -->
+<div class="sb">
+  <details class="sec">
+    <summary>Global Prior — All Users</summary>
+    <div class="sec-body">
+      <p style="font-size:11px;color:var(--dm);margin-bottom:10px;line-height:1.6">
+        Shared knowledge. Every reward feeds back here at α=0.05.
+      </p>
+      <div class="gc">
+        <div class="gi"><div class="gv" id="gn">0</div><div class="gk">updates</div></div>
+        <div class="gi"><div class="gv" id="nu">1</div><div class="gk">users</div></div>
+      </div>
+      <div class="bl" id="gb"></div>
+    </div>
+  </details>
+
+  <details class="sec">
+    <summary>User B — New User Inheriting Prior</summary>
+    <div class="sec-body">
+      <div class="ubh">
+        <div class="uba">B</div>
+        <div class="ubd">Fresh session. Starts from the current global posterior. Bars only move when the global prior changes — after a real reward update.</div>
+      </div>
+      <div class="bl" id="bb"></div>
+    </div>
+  </details>
+</div>
+
+<script>
+// ── Persistent UID — survives page refreshes, resets only on explicit Reset
+let UID = localStorage.getItem('ape_uid');
+if (!UID) { UID = 'u_' + Math.random().toString(36).slice(2,8); localStorage.setItem('ape_uid', UID); }
+const SN  = ['structured_bullets','narrative_prose','concise_direct','socratic_questions','step_by_step','comparison_table','visualization'];
+const SL  = {
+  structured_bullets:'Structured Bullets',
+  narrative_prose:'Narrative Prose',
+  concise_direct:'Concise Direct',
+  socratic_questions:'Socratic Questions',
+  step_by_step:'Step-by-Step',
+  comparison_table:'Comparison Table',
+  visualization:'Visualization',
+};
+const FN = ['msg_len','word_ct','has_?','is_long','formal','avg_rwd','msg_num','last_s','trend','noise'];
+
+// ── Build bar lists once
+function mkBars(id) {
+  document.getElementById(id).innerHTML = SN.map((s,i) => `
+    <div class="br" id="${id}_r_${s}" style="opacity:.5">
+      <div class="bh">
+        <span class="bn v${i}">${SL[s]}</span>
+        <span class="bv v${i}" id="${id}_v_${s}">—</span>
+      </div>
+      <div class="bt"><div class="bf f${i}" id="${id}_f_${s}" style="width:0%"></div></div>
+      <div class="bu">
+        <span class="ul">uncertainty</span>
+        <div class="ut"><div class="uf" id="${id}_u_${s}" style="width:50%"></div></div>
+      </div>
+    </div>`).join('');
+}
+mkBars('ub'); mkBars('gb'); mkBars('bb');
+
+// ── Update bars — only called when we have fresh data from a real event
+function updBars(id, data, sel) {
+  SN.forEach(s => {
+    const d = data[s]; if (!d) return;
+    const pct = Math.round(d.r * 100);
+    const unc = Math.min(d.u / 8, 1);
+    const f = document.getElementById(`${id}_f_${s}`);
+    const v = document.getElementById(`${id}_v_${s}`);
+    const u = document.getElementById(`${id}_u_${s}`);
+    const r = document.getElementById(`${id}_r_${s}`);
+    if(f) f.style.width  = pct + '%';
+    if(v) v.textContent  = pct + '%';
+    if(u) u.style.width  = Math.round(unc*100) + '%';
+    if(r) r.style.opacity = (!sel || s===sel) ? '1' : '0.45';
+  });
+}
+
+// ── Preference modal
+let _prefSels = new Set();
+
+function togglePref(btn) {
+  const s = btn.dataset.s;
+  const lock = document.getElementById('prefLock')?.checked;
+
+  if (lock) {
+    // Lock mode: single select
+    document.querySelectorAll('.pc.sel').forEach(x => x.classList.remove('sel'));
+    _prefSels.clear();
+    _prefSels.add(s);
+    btn.classList.add('sel');
+  } else {
+    // Soft mode: multi-select allowed
+    if (_prefSels.has(s)) {
+      _prefSels.delete(s);
+      btn.classList.remove('sel');
+    } else {
+      _prefSels.add(s);
+      btn.classList.add('sel');
+    }
+  }
+  document.getElementById('prefGo').disabled = (_prefSels.size === 0);
+}
+
+function skipPref() {
+  document.getElementById('prefModal').style.display = 'none';
+}
+
+async function submitPref() {
+  const chosen = [..._prefSels];
+  document.getElementById('prefModal').style.display = 'none';
+  try {
+    const res = await fetch('/api/preference', {
+      method: 'POST', headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({uid: UID, strategies: chosen, lock: document.getElementById('prefLock')?.checked || false})
+    });
+    const d = await res.json();
+    if (d.posterior) {
+      updBars('ub', d.posterior, null);
+      addLog(chosen[0], 0.9, `cold-start pref: ${chosen.join(', ')}`, 'preference');
+    }
+  } catch(e) { /* silently continue */ }
+}
+
+function showPrefModal() {
+  _prefSels = new Set();
+  document.querySelectorAll('.pc').forEach(b => b.classList.remove('sel'));
+  document.getElementById('prefGo').disabled = true;
+  document.getElementById('prefModal').style.display = 'flex';
+}
+
+function toggleSidebars() {
+  document.body.classList.toggle('hideSidebars');
+}
+
+function isBaselineHidden() {
+  return document.body.classList.contains('hideBaseline');
+}
+
+function syncBaselineToggleUI() {
+  const btn = document.getElementById('toggle-baseline-btn');
+  if (!btn) return;
+  btn.textContent = isBaselineHidden() ? 'Show baseline' : 'Hide baseline';
+}
+
+function toggleBaseline() {
+  document.body.classList.toggle('hideBaseline');
+  try { localStorage.setItem('hideBaseline', isBaselineHidden() ? '1' : '0'); } catch(e) {}
+  syncBaselineToggleUI();
+}
+
+
+
+function mkWidgetStreamPreviewSrcdoc(){
+  // Token-by-token preview of the incoming widget HTML.
+  // When the final widget is ready, the parent will replace `iframe.srcdoc` with the real HTML (with scripts).
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    body{
+      margin:0;
+      padding:12px 14px;
+      font-family:"Segoe UI",system-ui,sans-serif;
+      font-size:13px;
+      line-height:1.6;
+      background:transparent;
+      color:#111;
+    }
+    #pv{min-height:18px}
+    #pre{
+      margin-top:10px;
+      padding:10px 12px;
+      border-radius:10px;
+      border:0.5px solid rgba(0,0,0,0.08);
+      background:rgba(0,0,0,0.03);
+      white-space:pre-wrap;
+      word-break:break-word;
+      font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+      font-size:12.5px;
+    }
+  </style>
+</head>
+<body>
+  <div id="pv"></div>
+  <pre id="pre"></pre>
+  <script>
+    function stripScripts(s){
+      return String(s || '').replace(/<script[\\s\\S]*?>[\\s\\S]*?<\\/script>/gi,'');
+    }
+    const pv = document.getElementById('pv');
+    const pre = document.getElementById('pre');
+    let buf = '';
+
+    function postH(){
+      try{
+        parent.postMessage({ type: 'widget:height', value: document.body.scrollHeight }, '*');
+      }catch(e){}
+    }
+
+    const ro = new ResizeObserver(() => postH());
+    ro.observe(document.body);
+
+    window.addEventListener('message', (ev) => {
+      const d = ev.data || {};
+      if (d.type === 'widget:chunk') {
+        const chunk = String(d.html || '');
+        buf += chunk;
+        // Show raw HTML tokens progressively (always safe).
+        pre.textContent = buf;
+        // Best-effort HTML preview (scripts stripped) for a nicer look.
+        try { pv.innerHTML = stripScripts(buf); } catch(e) {}
+        postH();
+      }
+    });
+
+    postH();
+  <\/script>
+</body>
+</html>`;
+}
+
+// ── JSON-first widget renderer (schema v1) ────────────────────────────────
+function safeParseWidgetSchema(jsonStr) {
+  try {
+    const obj = JSON.parse(String(jsonStr || ''));
+    if (!obj || !Array.isArray(obj.layout)) return null;
+    return obj;
+  } catch (_e) {
+    return null;
+  }
+}
+
+function renderWidgetSchemaInto(rootEl, schema) {
+  if (!rootEl) return;
+  rootEl.innerHTML = '';
+  if (!schema || !Array.isArray(schema.layout)) return;
+
+  const wrap = document.createElement('div');
+  wrap.className = 'ws-root';
+
+  for (const block of schema.layout) {
+    try {
+      const el = renderWidgetBlock(block);
+      if (el) wrap.appendChild(el);
+    } catch (_e) {}
+  }
+  rootEl.appendChild(wrap);
+}
+
+function renderWidgetBlock(block) {
+  if (!block || typeof block !== 'object') return null;
+  switch (block.type) {
+    case 'text': return renderTextBlock(block);
+    case 'kpi_row': return renderKpiRow(block);
+    case 'chart': return renderChartBlock(block);
+    case 'table': return renderTableBlock(block);
+    case 'action_row': return renderActionRow(block);
+    default: return null;
+  }
+}
+
+function renderTextBlock(block) {
+  const div = document.createElement('div');
+  div.className = 'ws-text';
+  div.textContent = String(block.content || '');
+  return div;
+}
+
+function renderKpiRow(block) {
+  const row = document.createElement('div');
+  row.className = 'ws-kpi-row';
+  const items = Array.isArray(block.items) ? block.items : [];
+  for (const it of items) {
+    const card = document.createElement('div');
+    card.className = 'ws-kpi card';
+    const lbl = document.createElement('div');
+    lbl.className = 'ws-kpi-lbl';
+    lbl.textContent = String(it?.label || '');
+    const val = document.createElement('div');
+    const tone = (it?.tone === 'positive' || it?.tone === 'negative' || it?.tone === 'neutral') ? it.tone : 'neutral';
+    val.className = 'ws-kpi-val ' + tone;
+    val.textContent = String(it?.value ?? '');
+    card.appendChild(lbl);
+    card.appendChild(val);
+    row.appendChild(card);
+  }
+  return row;
+}
+
+function renderChartBlock(block) {
+  const container = document.createElement('div');
+  container.className = 'ws-chart card';
+  if (block.title) {
+    const h = document.createElement('div');
+    h.className = 'card-title';
+    h.textContent = String(block.title);
+    container.appendChild(h);
+  }
+  const pre = document.createElement('pre');
+  pre.className = 'ws-chart-pre';
+  pre.textContent = 'Chart schema received. (Hook up Chart.js/ECharts here.)';
+  container.appendChild(pre);
+  return container;
+}
+
+function renderTableBlock(block) {
+  const container = document.createElement('div');
+  container.className = 'ws-table card';
+  if (block.title) {
+    const h = document.createElement('div');
+    h.className = 'card-title';
+    h.textContent = String(block.title);
+    container.appendChild(h);
+  }
+  const table = document.createElement('table');
+  table.className = 'ws-table-el';
+
+  const cols = Array.isArray(block.columns) ? block.columns : [];
+  const rows = Array.isArray(block.rows) ? block.rows : [];
+
+  if (cols.length) {
+    const thead = document.createElement('thead');
+    const tr = document.createElement('tr');
+    for (const c of cols) {
+      const th = document.createElement('th');
+      th.textContent = String(c);
+      tr.appendChild(th);
+    }
+    thead.appendChild(tr);
+    table.appendChild(thead);
+  }
+
+  const tbody = document.createElement('tbody');
+  for (const r of rows) {
+    const tr = document.createElement('tr');
+    const cells = Array.isArray(r) ? r : [];
+    for (const cell of cells) {
+      const td = document.createElement('td');
+      td.textContent = String(cell);
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  container.appendChild(table);
+  return container;
+}
+
+function renderActionRow(block) {
+  const container = document.createElement('div');
+  container.className = 'ws-actions';
+  const buttons = Array.isArray(block.buttons) ? block.buttons : [];
+  for (const b of buttons) {
+    const btn = document.createElement('button');
+    btn.className = 'btn';
+    btn.type = 'button';
+    btn.textContent = String(b?.label || 'Action');
+    const intent = String(b?.intent || '').trim();
+    btn.onclick = () => {
+      if (!intent) return;
+      // reuse existing bridge: it will feed the input and send()
+      window.postMessage({ type: 'streamlit:setComponentValue', value: intent }, '*');
+    };
+    container.appendChild(btn);
+  }
+  return container;
+}
+
+async function send() {
+  const inp = document.getElementById('inp');
+  const msg = inp.value.trim();
+  if (!msg) return;
+
+  document.getElementById('emp_plain').style.display = 'none';
+  document.getElementById('emp_adapt').style.display = 'none';
+  inp.value = '';
+  inp.style.height = 'auto';
+  document.getElementById('send').disabled = true;
+
+  addUserBub(msg);
+
+  if (!isBaselineHidden()) document.getElementById('tw_plain').style.display = 'block';
+  document.getElementById('tw_adapt').style.display = 'block';
+  scrl();
+
+  const mid = 'M' + Date.now();
+
+  // Streaming placeholder for the adaptive (Claude-like) output.
+  const adaptiveEl = mk('div', 'msg a');
+  adaptiveEl.innerHTML = `
+    <div class="who">engine</div>
+    <div class="bub">
+      <div class="stream-resp" id="${mid}_resp"></div>
+      <div class="widget-mount" id="${mid}_wm"></div>
+    </div>
+    <div class="meta">
+      <span class="stag" id="${mid}_stag">—</span>
+      <span class="el" id="${mid}_elapsed">…</span>
+      <div class="rbs" id="${mid}_rbs" style="display:none">
+        <button class="rb" id="${mid}p">👍</button>
+        <button class="rb neg" id="${mid}n">👎</button>
+      </div>
+    </div>`;
+  document.getElementById('msgs_adapt').appendChild(adaptiveEl);
+
+  const respEl = document.getElementById(`${mid}_resp`);
+
+  // Iframe preview shell (gets widget HTML chunks token-by-token).
+  const mount = document.getElementById(`${mid}_wm`);
+  const frame = document.createElement('iframe');
+  frame.className = 'widget-frame';
+  frame.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+  frame.style.height = '260px';
+  frame.srcdoc = mkWidgetStreamPreviewSrcdoc();
+  mount.appendChild(frame);
+
+  let frameReady = false;
+  const widgetQueue = [];
+  frame.addEventListener('load', () => {
+    frameReady = true;
+    while (widgetQueue.length) {
+      const chunk = widgetQueue.shift();
+      try { frame.contentWindow.postMessage({ type: 'widget:chunk', html: chunk }, '*'); } catch(e) {}
+    }
+  }, { once: true });
+
+  const postWidgetChunk = (chunk) => {
+    const s = String(chunk ?? '');
+    if (!s) return;
+    if (!frameReady) widgetQueue.push(s);
+    else {
+      try { frame.contentWindow.postMessage({ type: 'widget:chunk', html: s }, '*'); } catch(e) {}
+    }
+  };
+
+  try {
+    const plainJob = (!isBaselineHidden())
+      ? fetch('/api/chat_plain', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ uid: UID, message: msg })
+        }).then(r => r.json()).catch(() => null)
+      : Promise.resolve(null);
+
+    const adaptRes = await fetch('/api/chat_stream', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ uid: UID, message: msg })
+    });
+
+    if (!adaptRes.ok || !adaptRes.body) {
+      throw new Error('chat_stream failed');
+    }
+
+    const reader = adaptRes.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = '';
+    let didFinalize = false;
+
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+
+      buf += decoder.decode(value, { stream: true });
+      const lines = buf.split('\n');
+      buf = lines.pop() || '';
+
+      for (const line of lines) {
+        const t = line.trim();
+        if (!t) continue;
+
+        let evt = null;
+        try { evt = JSON.parse(t); } catch(e) { continue; }
+        if (!evt || !evt.type) continue;
+
+        if (evt.type === 'strategy') {
+          setActive(evt.strategy, evt.instruction);
+          setInference(evt.scores, evt.posterior, evt.strategy, evt);
+          setFeatures(evt.x_vec);
+          updBars('ub', evt.posterior, evt.strategy);
+          updBars('gb', evt.global, null);
+          updBars('bb', evt.userb, null);
+          document.getElementById('gn').textContent = evt.global_n;
+
+          const stag = document.getElementById(`${mid}_stag`);
+          if (stag && SL[evt.strategy]) {
+            const idx = SN.indexOf(evt.strategy);
+            stag.textContent = SL[evt.strategy];
+            stag.className = `stag v${idx}`;
+          }
+        }
+
+        if (evt.type === 'response_delta') {
+          if (respEl) respEl.textContent += String(evt.delta ?? '');
+        }
+
+        if (evt.type === 'widget_delta') {
+          postWidgetChunk(evt.delta);
+        }
+
+        if (evt.type === 'done') {
+          didFinalize = true;
+
+          if (evt.error && respEl) {
+            respEl.innerHTML = `<div class="errbub">⚠ ${esc(String(evt.error))}</div>`;
+          }
+
+          if (evt.response && respEl) respEl.innerHTML = fmt(evt.response, evt.strategy);
+
+          if (document.getElementById('tw_adapt')) document.getElementById('tw_adapt').style.display = 'none';
+
+          // Enable reward buttons.
+          const rbs = document.getElementById(`${mid}_rbs`);
+          if (rbs) {
+            rbs.style.display = 'flex';
+            const pBtn = document.getElementById(`${mid}p`);
+            const nBtn = document.getElementById(`${mid}n`);
+            if (pBtn) pBtn.onclick = () => exReward(evt.strategy, evt.x_vec, 1, mid);
+            if (nBtn) nBtn.onclick = () => exReward(evt.strategy, evt.x_vec, 0, mid);
+          }
+
+          // Update elapsed + final widget.
+          const elapsedEl = document.getElementById(`${mid}_elapsed`);
+          if (elapsedEl) elapsedEl.textContent = (evt.elapsed !== null && evt.elapsed !== undefined) ? `${evt.elapsed}s` : '—';
+
+          if (evt.widget_html && String(evt.widget_html).trim()) {
+            frame.classList.remove('ready');
+            frame.style.height = `${Number(evt.widget_height || 420)}px`;
+            frame.srcdoc = evt.widget_html;
+            frame.addEventListener('load', () => frame.classList.add('ready'), { once: true });
+          }
+
+          if (evt.auto_detected && evt.auto_r !== null) {
+            addLog(evt.strategy, evt.auto_r, evt.auto_reason, 'auto');
+          }
+        }
+      }
+    }
+
+    // Baseline after adaptive stream.
+    const dPlain = await plainJob;
+    if (!isBaselineHidden() && dPlain) {
+      if (dPlain.error) addErr('Baseline: ' + dPlain.error);
+      else addAsstBubPlain(dPlain);
+    }
+
+    if (!didFinalize) addErr('Adaptive: stream ended without final output.');
+  } catch(e) {
+    // Fallback to existing non-streaming endpoint.
+    try { adaptiveEl.remove(); } catch(e2) {}
+
+    try {
+      const d = await (await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ uid: UID, message: msg })
+      })).json();
+
+      if (d.error) addErr('Adaptive: ' + d.error);
+      else {
+        if (!isBaselineHidden()) document.getElementById('tw_plain').style.display = 'none';
+        document.getElementById('tw_adapt').style.display = 'none';
+        addAsstBubAdaptive(d);
+        setActive(d.strategy, d.instruction);
+        setInference(d.scores, d.posterior, d.strategy, d);
+        setFeatures(d.x_vec);
+        updBars('ub', d.posterior, d.strategy);
+        updBars('gb', d.global, null);
+        updBars('bb', d.userb, null);
+        document.getElementById('gn').textContent = d.global_n;
+        if (d.auto_detected && d.auto_r !== null) addLog(d.strategy, d.auto_r, d.auto_reason, 'auto');
+      }
+    } catch(e2) {
+      addErr('Connection error — is python app.py running?');
+    }
+  }
+
+  document.getElementById('send').disabled = false;
+  document.getElementById('tw_plain').style.display = 'none';
+  document.getElementById('tw_adapt').style.display = 'none';
+  scrl();
+}
+
+
+function addUserBub(txt) {
+  const d1 = mk('div','msg u');
+  d1.innerHTML = `<div class="who">you</div><div class="bub">${esc(txt)}</div>`;
+  document.getElementById('msgs_plain').appendChild(d1);
+
+  const d2 = mk('div','msg u');
+  d2.innerHTML = `<div class="who">you</div><div class="bub">${esc(txt)}</div>`;
+  document.getElementById('msgs_adapt').appendChild(d2);
+}
+
+
+function addAsstBubPlain(d) {
+  const el  = mk('div','msg a');
+  el.innerHTML = `
+    <div class="who">baseline</div>
+    <div class="bub">${fmt(d.response, 'normal')}</div>
+    <div class="meta">
+      <span class="stag" style="background:rgba(255,255,255,.04);border:1px solid var(--bd);color:var(--dm)">Normal</span>
+      <span class="el">${d.elapsed}s</span>
+    </div>`;
+  document.getElementById('msgs_plain').appendChild(el);
+}
+
+function addAsstBubAdaptive(d) {
+  const idx = SN.indexOf(d.strategy);
+  const mid = 'M'+Date.now();
+  const el  = mk('div','msg a');
+
+  let ab = '';
+  if (d.auto_detected && d.auto_r !== null) {
+    const neg = d.auto_r < 0.5;
+    ab = `<span class="autob ${neg?'neg':'pos'}">${neg?'⚡':'✦'} auto · ${d.auto_reason} → r=${d.auto_r.toFixed(2)}</span>`;
+  }
+
+  let nb = '';
+  if (d.force_explore) {
+    const from = d.prev_strategy && SL[d.prev_strategy] ? SL[d.prev_strategy] : 'previous';
+    const to = SL[d.strategy] || d.strategy;
+    nb = `<span class="notice explore">Negative signal → exploring (${from} → ${to})</span>`;
+  } else if (d.explicit) {
+    const to = SL[d.strategy] || d.strategy;
+    nb = `<span class="notice override">Explicit request → switching to ${to}</span>`;
+  }
+
+  el.innerHTML = `
+    <div class="who">engine</div>
+    <div class="bub">
+      ${fmt(d.response, d.strategy)}
+      <div class="widget-mount" id="${mid}_wm"></div>
+    </div>
+    <div class="meta">
+      <span class="stag v${idx}">${SL[d.strategy]}</span>
+      <span class="el">${d.elapsed}s</span>
+      ${nb}
+      ${ab}
+      <div class="rbs">
+        <button class="rb"     id="${mid}p" onclick="exReward('${d.strategy}',${JSON.stringify(d.x_vec)},1,'${mid}')">👍</button>
+        <button class="rb neg" id="${mid}n" onclick="exReward('${d.strategy}',${JSON.stringify(d.x_vec)},0,'${mid}')">👎</button>
+      </div>
+    </div>`;
+  document.getElementById('msgs_adapt').appendChild(el);
+
+  // Claude-like widget iframe: isolate generated UI + JS.
+  if (d.widget_html && typeof d.widget_html === 'string' && d.widget_html.trim()) {
+    const mount = document.getElementById(`${mid}_wm`);
+    if (mount) {
+      const skeleton = document.createElement('div');
+      skeleton.className = 'widget-skeleton';
+      skeleton.innerHTML = `
+        <div class="line w60"></div>
+        <div class="line w95"></div>
+        <div class="line w80"></div>
+        <div class="line w95"></div>
+      `;
+      mount.appendChild(skeleton);
+
+      const frame = document.createElement('iframe');
+      frame.className = 'widget-frame';
+      frame.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+      frame.style.height = `${Number(d.widget_height || 420)}px`;
+      frame.srcdoc = d.widget_html;
+      frame.addEventListener('load', () => {
+        frame.classList.add('ready');
+        skeleton.remove();
+      }, { once: true });
+      setTimeout(() => {
+        frame.classList.add('ready');
+        skeleton.remove();
+      }, 1200);
+      mount.appendChild(frame);
+    }
+  }
+}
+
+
+function addErr(msg) {
+  const d1 = mk('div','msg a');
+  d1.innerHTML = `<div class="errbub">⚠ ${esc(msg)}</div>`;
+  document.getElementById('msgs_plain').appendChild(d1);
+
+  const d2 = mk('div','msg a');
+  d2.innerHTML = `<div class="errbub">⚠ ${esc(msg)}</div>`;
+  document.getElementById('msgs_adapt').appendChild(d2);
+}
+
+
+async function exReward(strat, xv, reward, mid) {
+  ['p','n'].forEach(s => document.getElementById(mid+s)?.classList.add('used'));
+  const res = await fetch('/api/reward', {
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({uid:UID, strategy:strat, x_vec:xv, reward})
+  });
+  const d = await res.json();
+  // Only now update the bars — explicit button press
+  updBars('ub', d.posterior, strat);
+  updBars('gb', d.global,    null);
+  updBars('bb', d.userb,     null);   // User B only moves here because global_n just incremented
+  document.getElementById('gn').textContent = d.global_n;
+  addLog(strat, reward, 'explicit button', 'manual');
+}
+
+function setActive(s, desc) {
+  const i = SN.indexOf(s);
+  const n = document.getElementById('an');
+  n.textContent = SL[s]; n.className = `an v${i}`;
+  document.getElementById('ad').textContent = desc;
+}
+
+function setInference(scores, posterior, sel, raw) {
+  document.getElementById('ip').style.display = 'block';
+  const sorted = Object.entries(scores).sort((a,b)=>b[1]-a[1]);
+  const why = (()=>{
+    if (raw?.locked)   return `Locked to ${SL[raw.locked] || raw.locked}`;
+    if (raw?.explicit) return `Explicit override → ${SL[sel] || sel}`;
+    if (raw?.force_explore) return `Negative signal → exploring`;
+    return `Thompson Sampling (sampled)`;
+  })();
+
+  document.getElementById('it').innerHTML = `
+    <div class="ir" style="margin-bottom:8px">
+      <span class="in_">Decision</span>
+      <span class="iv">${esc(why)}</span>
+    </div>
+  ` + sorted.map(([s,v])=>{
+    const i = SN.indexOf(s);
+    const p = posterior?.[s] || null;
+    const mean = p ? (p.r*100) : null;
+    const unc  = p ? p.u : null;
+    return `<div class="ir${s===sel?' sel':''}">
+      <span class="in_ v${i}">${s===sel?'▶ ':''}${SL[s]}</span>
+      <span class="iv v${i}">${(v*100).toFixed(1)}% <span class="in_" style="font-weight:400">(μ=${mean===null?'—':mean.toFixed(1)}%, u=${unc===null?'—':unc.toFixed(3)})</span></span>
+    </div>`;
+  }).join('');
+}
+
+function setFeatures(xv) {
+  document.getElementById('fp').style.display = 'block';
+  document.getElementById('fg').innerHTML = xv.map((v,i)=>`
+    <div class="fi"><div class="fk">${FN[i]||'x'+i}</div><div class="fv">${v.toFixed(3)}</div></div>`).join('');
+}
+
+function addLog(strat, reward, reason, src) {
+  const lg = document.getElementById('lg');
+  lg.querySelector('p')?.remove();
+  const i = SN.indexOf(strat);
+  const neg = reward < 0.5;
+  const d = mk('div','le');
+  d.style.borderLeftColor = `var(--c${i})`;
+  d.innerHTML = `
+    <span class="v${i}">${SL[strat]}</span>
+    <span class="lr" style="color:${neg?'var(--r)':'var(--g)'}">${neg?'👎':'👍'} ${reward.toFixed(2)}</span>
+    <div class="ls">${reason} · ${src}</div>`;
+  lg.prepend(d);
+}
+
+
+async function reset() {
+  await fetch('/api/reset',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({uid:UID})});
+  UID = 'u_' + Math.random().toString(36).slice(2,8);
+  localStorage.setItem('ape_uid', UID);
+
+  document.getElementById('msgs_plain').innerHTML = `
+    <div class="empty" id="emp_plain">
+      <div class="ei">◻</div>
+      <div class="et">Session reset</div>
+      <div class="eb">Baseline history cleared. Adaptive posterior cleared. User B re-inherits the current global prior.</div>
+    </div>`;
+
+  document.getElementById('msgs_adapt').innerHTML = `
+    <div class="empty" id="emp_adapt">
+      <div class="ei">⬡</div>
+      <div class="et">Session reset</div>
+      <div class="eb">Adaptive history cleared. Preferences prompt will show again.</div>
+    </div>`;
+
+  document.getElementById('tw_plain').style.display = 'none';
+  document.getElementById('tw_adapt').style.display = 'none';
+  document.getElementById('an').textContent = '—';
+  document.getElementById('an').className = 'an v0';
+  document.getElementById('ad').textContent = 'Waiting for first message…';
+  document.getElementById('ip').style.display = 'none';
+  document.getElementById('fp').style.display = 'none';
+  document.getElementById('lg').innerHTML = '<p style="font-size:10px;color:var(--dmr);text-align:center;padding:16px">No interactions yet</p>';
+  // reset bars visually (optional)
+  updBars('ub', {}, null); updBars('gb', {}, null); updBars('bb', {}, null);
+
+  showPrefModal();
+}
+
+// ── One-time boot check
+async function boot() {
+  // Restore UI layout toggles
+  try {
+    if (localStorage.getItem('hideBaseline') === '1') {
+      document.body.classList.add('hideBaseline');
+    }
+  } catch(e) {}
+  syncBaselineToggleUI();
+
+  try {
+    const r = await fetch('/api/state?uid='+UID);
+    if (r.ok) {
+      document.getElementById('dot').className = 'dot live';
+      document.getElementById('olbl').textContent = 'server live';
+      const d = await r.json();
+      updBars('ub', d.posterior, null);
+      updBars('gb', d.global,    null);
+      updBars('bb', d.userb,     null);
+      document.getElementById('gn').textContent = d.global_n || 0;
+      document.getElementById('nu').textContent = d.n_users  || 1;
+
+      // Show preference modal if this user has no history yet
+      if (d.msg_count === 0) {
+        showPrefModal();
+      }
+    }
+  } catch {
+    document.getElementById('dot').className = 'dot err';
+    document.getElementById('olbl').textContent = 'offline';
+  }
+}
+
+// helpers
+function mk(t,c){const d=document.createElement(t);d.className=c;return d}
+
+function safe(s){
+  return String(s ?? '')
+    .replace(/&/g,'&amp;')
+    .replace(/</g,'&lt;')
+    .replace(/>/g,'&gt;');
+}
+function esc(s){ return safe(s); }
+
+function tryParseTableJSON(raw){
+  try{
+    const obj = JSON.parse(String(raw).trim());
+    if (Array.isArray(obj.columns) && Array.isArray(obj.rows)) return obj;
+  }catch(e){}
+  return null;
+}
+
+function splitMdRow(line){
+  let txt = String(line || '').trim();
+  if (!txt) return [];
+  if (txt.startsWith('|')) txt = txt.slice(1);
+  if (txt.endsWith('|')) txt = txt.slice(0, -1);
+  return txt.split('|').map(c => c.trim());
+}
+
+function isMdSepLine(line){
+  const cells = splitMdRow(line);
+  if (!cells.length) return false;
+  return cells.every(c => /^:?-{3,}:?$/.test(c));
+}
+
+function tryParseMarkdownTable(raw){
+  const lines = String(raw || '')
+    .split(/\r?\n/)
+    .map(s => s.trim())
+    .filter(Boolean);
+  if (lines.length < 2) return null;
+
+  for (let i = 0; i < lines.length - 1; i++) {
+    const headerLine = lines[i];
+    const sepLine = lines[i + 1];
+    if (!headerLine.includes('|') || !isMdSepLine(sepLine)) continue;
+
+    const columns = splitMdRow(headerLine);
+    if (!columns.length) continue;
+
+    const rows = [];
+    for (let j = i + 2; j < lines.length; j++) {
+      const ln = lines[j];
+      if (!ln.includes('|')) break;
+      const row = splitMdRow(ln);
+      if (!row.length) break;
+      while (row.length < columns.length) row.push('');
+      rows.push(row.slice(0, columns.length));
+    }
+    if (rows.length) return { columns, rows };
+  }
+  return null;
+}
+
+function tableToHtml(obj){
+  const cols = obj.columns || [];
+  const rows = obj.rows || [];
+  const thead = `<thead><tr>${cols.map(c => `<th>${safe(c)}</th>`).join('')}</tr></thead>`;
+  const tbody = `<tbody>${rows.map(r => `<tr>${r.map(v => `<td>${safe(v)}</td>`).join('')}</tr>`).join('')}</tbody>`;
+  return `<table>${thead}${tbody}</table>`;
+}
+
+function tryParseVizJSON(raw){
+  try{
+    const obj = JSON.parse(String(raw).trim());
+    if (obj && typeof obj === 'object' && Array.isArray(obj.labels) && Array.isArray(obj.values)) return obj;
+  }catch(e){}
+  return null;
+}
+
+function renderBarChart(obj, horizontal=false){
+  const labels = obj.labels || [];
+  const values = (obj.values || []).map(v => Number(v ?? 0));
+  const maxVal = Math.max(...values, 1);
+
+  if (horizontal) {
+    return `
+      <div class="viz-wrap">
+        ${obj.title ? `<div style="font-weight:700;margin-bottom:10px;">${safe(obj.title)}</div>` : ''}
+        ${labels.map((label, i) => {
+          const v = Number(values[i] ?? 0);
+          const pct = Math.max(4, (v / maxVal) * 100);
+          return `
+            <div style="margin:10px 0;">
+              <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;">
+                <span>${safe(label)}</span>
+                <span>${safe(v)}</span>
+              </div>
+              <div style="height:10px;background:rgba(15,23,42,.08);border-radius:999px;overflow:hidden;">
+                <div style="height:100%;width:${pct}%;background:linear-gradient(90deg,#7c6cff,#40d9ff);border-radius:999px;"></div>
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    `;
+  }
+
+  const bars = labels.map((label, i) => {
+    const v = Number(values[i] ?? 0);
+    const h = Math.max(12, (v / maxVal) * 140);
+    return `
+      <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;">
+        <div style="font-size:11px;">${safe(v)}</div>
+        <div style="width:32px;height:${h}px;background:linear-gradient(180deg,#7c6cff,#40d9ff);border-radius:10px 10px 0 0;"></div>
+        <div style="font-size:11px;text-align:center;">${safe(label)}</div>
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="viz-wrap">
+      ${obj.title ? `<div style="font-weight:700;margin-bottom:10px;">${safe(obj.title)}</div>` : ''}
+      <div style="display:flex;align-items:flex-end;gap:12px;min-height:180px;padding-top:10px;">
+        ${bars}
+      </div>
+    </div>
+  `;
+}
+
+function renderPieChart(obj, donut=false){
+  const labels = obj.labels || [];
+  const values = (obj.values || []).map(v => Number(v || 0));
+  const total = values.reduce((a,b) => a+b, 0) || 1;
+
+  let angle = 0;
+  const colors = ['#7c6cff','#40d9ff','#00c896','#ffb84d','#ff6b81','#9b8cff'];
+
+  const segments = values.map((v, i) => {
+    const pct = v / total;
+    const nextAngle = angle + pct * 360;
+    const color = colors[i % colors.length];
+    const seg = `${color} ${angle}deg ${nextAngle}deg`;
+    angle = nextAngle;
+    return seg;
+  }).join(', ');
+
+  return `
+    <div class="viz-wrap">
+      ${obj.title ? `<div style="font-weight:700;margin-bottom:12px;">${safe(obj.title)}</div>` : ''}
+      <div style="display:flex;gap:18px;align-items:center;flex-wrap:wrap;">
+        <div style="
+          width:180px;
+          height:180px;
+          border-radius:50%;
+          background:conic-gradient(${segments});
+          position:relative;
+          flex:0 0 auto;
+        ">
+          ${donut ? `
+            <div style="
+              position:absolute;
+              inset:38px;
+              border-radius:50%;
+              background:#ffffff;
+              border:1px solid rgba(15,23,42,.08);
+            "></div>
+          ` : ''}
+        </div>
+        <div style="flex:1;min-width:180px;">
+          ${labels.map((label, i) => {
+            const v = values[i] || 0;
+            const pct = ((v / total) * 100).toFixed(1);
+            const color = colors[i % colors.length];
+            return `
+              <div style="display:flex;align-items:center;justify-content:space-between;margin:8px 0;font-size:12px;">
+                <div style="display:flex;align-items:center;gap:8px;">
+                  <span style="width:10px;height:10px;border-radius:50%;background:${color};display:inline-block;"></span>
+                  <span>${safe(label)}</span>
+                </div>
+                <span>${safe(v)} (${pct}%)</span>
+              </div>
+            `;
+          }).join('')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderLineChart(obj){
+  const labels = obj.labels || [];
+  const values = (obj.values || []).map(v => Number(v || 0));
+  const maxVal = Math.max(...values, 1);
+  const minVal = Math.min(...values, 0);
+
+  const points = values.map((v, i) => {
+    const x = (i / Math.max(values.length - 1, 1)) * 280;
+    const y = 140 - ((v - minVal) / Math.max(maxVal - minVal, 1)) * 120;
+    return `${x},${y}`;
+  }).join(' ');
+
+  return `
+    <div class="viz-wrap">
+      ${obj.title ? `<div style="font-weight:700;margin-bottom:10px;">${safe(obj.title)}</div>` : ''}
+      <svg width="100%" viewBox="0 0 300 170" style="max-width:420px;">
+        <polyline fill="none" stroke="#7c6cff" stroke-width="3" points="${points}" />
+        ${values.map((v, i) => {
+          const x = (i / Math.max(values.length - 1, 1)) * 280;
+          const y = 140 - ((v - minVal) / Math.max(maxVal - minVal, 1)) * 120;
+          return `<circle cx="${x}" cy="${y}" r="4" fill="#40d9ff"></circle>`;
+        }).join('')}
+      </svg>
+      <div style="display:flex;justify-content:space-between;gap:8px;font-size:11px;flex-wrap:wrap;margin-top:8px;">
+        ${labels.map(l => `<span>${safe(l)}</span>`).join('')}
+      </div>
+    </div>
+  `;
+}
+
+function vizToHtml(obj){
+  const type = String(obj.type || 'bar').toLowerCase();
+  if (type === 'pie') return renderPieChart(obj, false);
+  if (type === 'donut') return renderPieChart(obj, true);
+  if (type === 'line') return renderLineChart(obj);
+  if (type === 'horizontal_bar') return renderBarChart(obj, true);
+  return renderBarChart(obj, false);
+}
+
+function renderCodeBlock(raw){
+  const m = String(raw).match(/```[a-zA-Z0-9_-]*\n?([\s\S]*?)```/);
+  if (m) return `<pre><code>${safe(m[1].trim())}</code></pre>`;
+  return `<pre><code>${safe(raw)}</code></pre>`;
+}
+
+function fmt(s, strategy=''){
+  const raw = String(s ?? '').trim();
+
+  if (strategy === 'comparison_table') {
+    const parsed = tryParseTableJSON(raw) || tryParseMarkdownTable(raw);
+    if (parsed) return tableToHtml(parsed);
+  }
+
+  if (strategy === 'visualization') {
+    const parsed = tryParseVizJSON(raw);
+    if (parsed) return vizToHtml(parsed);
+    return renderCodeBlock(raw);
+  }
+
+  return safe(raw)
+    .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
+    .replace(/\n\n/g,'<br><br>')
+    .replace(/\n/g,'<br>');
+}
+
+function scrl(){
+  const a = document.getElementById('msgs_plain');
+  const b = document.getElementById('msgs_adapt');
+  if (a) a.scrollTop = a.scrollHeight;
+  if (b) b.scrollTop = b.scrollHeight;
+}
+
+function onK(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();send()}}
+function rsz(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,110)+'px'}
+
+// Bridge: widget iframe -> parent chat input.
+window.addEventListener('message', (ev) => {
+  const data = ev.data || {};
+  if (data && data.type === "widget:height") {
+    const nextH = Number(data.value || 0);
+    if (Number.isFinite(nextH) && nextH > 0) {
+      const frames = document.querySelectorAll('iframe.widget-frame');
+      for (const frame of frames) {
+        if (frame.contentWindow === ev.source) {
+          const clamped = Math.max(260, Math.min(Math.round(nextH) + 12, 1400));
+          frame.style.height = `${clamped}px`;
+          break;
+        }
+      }
+    }
+    return;
+  }
+
+  let text = "";
+  // Only accept explicit widget/sendPrompt messages; ignore raw strings
+  // such as iFrameSizer noise from hosting environments like HF Spaces.
+  if (data.type === "widget:sendPrompt" && typeof data.text === "string") text = data.text;
+  else if (data.type === "streamlit:setComponentValue" && typeof data.value === "string") text = data.value;
+  text = String(text || "").trim();
+  if (!text) return;
+
+  const inp = document.getElementById('inp');
+  if (!inp) return;
+  inp.value = text;
+  rsz(inp);
+  send();
+});
+
+boot();
+
+// ── Tab switching
+function switchTab(tab) {
+  const fw = document.getElementById('fw-page');
+  const mainEls = [document.querySelector('.chat'), document.querySelector('.sa'), document.querySelector('.sb')];
+  const sidebarBtn = document.getElementById('toggle-sidebars-btn');
+  const dotArea = document.getElementById('dot');
+
+  document.getElementById('tab-main').classList.toggle('active', tab === 'main');
+  document.getElementById('tab-fw').classList.toggle('active', tab === 'fw');
+
+  if (tab === 'fw') {
+    fw.classList.add('active');
+    mainEls.forEach(el => { if (el) el.style.display = 'none'; });
+    if (sidebarBtn) sidebarBtn.style.display = 'none';
+  } else {
+    fw.classList.remove('active');
+    mainEls.forEach(el => { if (el) el.style.removeProperty('display'); });
+    if (sidebarBtn) sidebarBtn.style.display = '';
+    // restore hideSidebars state
+    if (document.body.classList.contains('hideSidebars')) {
+      mainEls.forEach(el => {
+        if (el && (el.classList.contains('sa') || el.classList.contains('sb'))) el.style.display = 'none';
+      });
+    }
+  }
+}
+
+</script>
+
+<!-- FUTURE WORK PAGE -->
+<div id="fw-page">
+  <div class="fw-inner">
+    <div class="fw-eyebrow">Adaptive Presentation Engine</div>
+    <div class="fw-title">Cognitive Mental Model</div>
+    <div class="fw-subtitle">A living portrait — not a static persona — constructed through revealed preferences and continuously refined by Bayesian inference.</div>
+
+    <!-- Profile card -->
+    <div class="fw-profile">
+      <div class="fw-profile-left">
+        <div class="fw-profile-name">Margaret Chen</div>
+        <div class="fw-profile-sub">VG-0847291 · 4 months · 47 interactions</div>
+      </div>
+      <div class="fw-profile-stats">
+        <div class="fw-stat">
+          <div class="fw-stat-val blue">75%</div>
+          <div class="fw-stat-lbl">Model Confidence</div>
+        </div>
+        <div class="fw-stat">
+          <div class="fw-stat-val green">5</div>
+          <div class="fw-stat-lbl">Active Facets</div>
+        </div>
+        <div class="fw-stat">
+          <div class="fw-stat-val orange">3</div>
+          <div class="fw-stat-lbl">High Fidelity</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Portrait summary -->
+    <div class="fw-summary">
+      <div class="fw-summary-hdr">Portrait Summary — Earned Through 47 Interactions</div>
+      <div class="fw-summary-text">
+        Margaret processes financial decisions through <span class="hi-blue">causal narratives</span> when stakes involve action
+        (rebalancing, volatility response) but switches to <span class="hi-green">structured elimination tools</span> when exploring options.
+        She seeks <span class="hi-orange">historical anchoring</span> during market stress rather than forward projections. Tax-related and
+        retirement planning facets are still developing — the system is actively exploring presentation strategies
+        in these contexts. Her cognitive profile suggests a mind that wants to understand consequences before
+        acting, but prefers systematic reduction when choosing.
+      </div>
+    </div>
+
+    <!-- Cognitive facets -->
+    <div class="fw-facets-hdr">
+      <div class="fw-facets-title">Cognitive Facets</div>
+      <div class="fw-facets-sort">sorted by confidence</div>
+    </div>
+
+    <!-- Facet 1: Rebalancing Decisions -->
+    <div class="fw-facet blue-border" onclick="toggleFacet(this)">
+      <div class="fw-facet-top">
+        <div class="fw-ring-wrap">
+          <svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="22" fill="none" stroke="#1a2d42" stroke-width="4"/><circle cx="26" cy="26" r="22" fill="none" stroke="#4a9eff" stroke-width="4" stroke-dasharray="138.2 138.2" stroke-dashoffset="16.6" stroke-linecap="round"/></svg>
+          <div class="fw-ring-score">88</div>
+        </div>
+        <div class="fw-facet-info">
+          <div class="fw-facet-name">Rebalancing Decisions</div>
+          <div class="fw-facet-sub">14 interactions <span class="fw-fidelity high">High</span></div>
+        </div>
+        <div class="fw-facet-right">
+          <div class="fw-strategy-name">Scenario Narrative</div>
+          <div class="fw-strategy-mu">μ = 0.85</div>
+        </div>
+        <span class="fw-chevron">▾</span>
+      </div>
+      <div class="fw-facet-body">
+        <div class="fw-beta-row">
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#4a9eff">Leading: Scenario Narrative <span class="param">BETA(11, 2)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><defs><linearGradient id="g1" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#4a9eff" stop-opacity=".4"/><stop offset="100%" stop-color="#4a9eff" stop-opacity="0"/></linearGradient></defs><path d="M0,75 C20,75 30,72 50,60 C70,48 80,20 100,8 C110,3 120,3 130,8 C150,18 170,60 190,72 C205,78 215,76 220,75" fill="url(#g1)" stroke="#4a9eff" stroke-width="2"/></svg>
+          </div>
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#3a5a72">Runner-up: Risk-First Table <span class="param" style="color:#2a4a60">BETA(3, 8)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><path d="M0,75 C20,75 40,73 70,65 C90,58 100,45 110,40 C120,35 130,38 150,52 C170,65 190,73 220,75" fill="none" stroke="#2a4a60" stroke-width="2"/></svg>
+          </div>
+        </div>
+        <div class="fw-insight" style="background:rgba(74,158,255,.06);border:1px solid rgba(74,158,255,.12)">
+          <div class="fw-insight-hdr" style="color:#4a9eff">Cognitive Insight</div>
+          <div class="fw-insight-text">Responds best to scenario-based framing that shows consequences. Engagement drops 40% when presented with abstract risk tables. Prefers "what happens if" over "here are the numbers."</div>
+        </div>
+        <div class="fw-evidence">Completed portfolio rebalance after scenario walkthrough on 3 separate occasions (Feb 10, Feb 18, Mar 2)</div>
+      </div>
+    </div>
+
+    <!-- Facet 2: Fund Exploration -->
+    <div class="fw-facet green-border open" onclick="toggleFacet(this)">
+      <div class="fw-facet-top">
+        <div class="fw-ring-wrap">
+          <svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="22" fill="none" stroke="#1a3a2a" stroke-width="4"/><circle cx="26" cy="26" r="22" fill="none" stroke="#2ecc8c" stroke-width="4" stroke-dasharray="138.2 138.2" stroke-dashoffset="28.5" stroke-linecap="round"/></svg>
+          <div class="fw-ring-score">79</div>
+        </div>
+        <div class="fw-facet-info">
+          <div class="fw-facet-name">Fund Exploration</div>
+          <div class="fw-facet-sub">11 interactions <span class="fw-fidelity moderate">Moderate</span></div>
+        </div>
+        <div class="fw-facet-right">
+          <div class="fw-strategy-name">Elimination Matrix</div>
+          <div class="fw-strategy-mu">μ = 0.80</div>
+        </div>
+        <span class="fw-chevron">▾</span>
+      </div>
+      <div class="fw-facet-body">
+        <div class="fw-beta-row">
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#2ecc8c">Leading: Elimination Matrix <span class="param">BETA(8, 2)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><defs><linearGradient id="g2" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#2ecc8c" stop-opacity=".35"/><stop offset="100%" stop-color="#2ecc8c" stop-opacity="0"/></linearGradient></defs><path d="M0,75 C20,75 35,70 55,55 C75,40 85,14 105,7 C115,3 125,5 140,14 C160,28 180,62 200,72 C210,77 216,76 220,75" fill="url(#g2)" stroke="#2ecc8c" stroke-width="2"/></svg>
+          </div>
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#3a5a72">Runner-up: Comparison Table <span class="param" style="color:#2a4a60">BETA(4, 5)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><path d="M0,75 C20,75 40,72 65,62 C80,56 95,44 110,38 C125,32 140,38 158,50 C175,62 195,72 220,75" fill="none" stroke="#2a4a60" stroke-width="2"/></svg>
+          </div>
+        </div>
+        <div class="fw-insight" style="background:rgba(46,204,140,.06);border:1px solid rgba(46,204,140,.12)">
+          <div class="fw-insight-hdr" style="color:#2ecc8c">Cognitive Insight</div>
+          <div class="fw-insight-text">Engages deeply with structured narrowing tools. Spends 3x longer on elimination workflows than open-ended comparisons. Prefers to reduce options before evaluating.</div>
+        </div>
+        <div class="fw-evidence">Completed full elimination flow for bond fund selection (Feb 28)</div>
+      </div>
+    </div>
+
+    <!-- Facet 3: Market Volatility Response -->
+    <div class="fw-facet orange-border" onclick="toggleFacet(this)">
+      <div class="fw-facet-top">
+        <div class="fw-ring-wrap">
+          <svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="22" fill="none" stroke="#3a2a10" stroke-width="4"/><circle cx="26" cy="26" r="22" fill="none" stroke="#f5a623" stroke-width="4" stroke-dasharray="138.2 138.2" stroke-dashoffset="41.5" stroke-linecap="round"/></svg>
+          <div class="fw-ring-score">72</div>
+        </div>
+        <div class="fw-facet-info">
+          <div class="fw-facet-name">Market Volatility Response</div>
+          <div class="fw-facet-sub">8 interactions <span class="fw-fidelity moderate">Moderate</span></div>
+        </div>
+        <div class="fw-facet-right">
+          <div class="fw-strategy-name">Historical Precedent</div>
+          <div class="fw-strategy-mu">μ = 0.75</div>
+        </div>
+        <span class="fw-chevron">▾</span>
+      </div>
+      <div class="fw-facet-body">
+        <div class="fw-beta-row">
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#f5a623">Leading: Historical Precedent <span class="param">BETA(6, 2)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><defs><linearGradient id="g3" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#f5a623" stop-opacity=".35"/><stop offset="100%" stop-color="#f5a623" stop-opacity="0"/></linearGradient></defs><path d="M0,75 C15,75 30,72 55,58 C75,46 88,22 108,12 C118,7 128,9 142,18 C162,32 182,64 205,73 C213,77 218,76 220,75" fill="url(#g3)" stroke="#f5a623" stroke-width="2"/></svg>
+          </div>
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#3a5a72">Runner-up: Scenario Narrative <span class="param" style="color:#2a4a60">BETA(3, 3)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><path d="M0,75 C15,75 30,72 55,60 C75,50 95,38 110,35 C125,32 140,38 160,52 C178,64 200,73 220,75" fill="none" stroke="#2a4a60" stroke-width="2"/></svg>
+          </div>
+        </div>
+        <div class="fw-insight" style="background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.12)">
+          <div class="fw-insight-hdr" style="color:#f5a623">Cognitive Insight</div>
+          <div class="fw-insight-text">During volatility, seeks anchoring in past outcomes rather than forward projections. Responds to 'markets recovered in X months after similar events' framing. Narrative works here too but historical data is more calming.</div>
+        </div>
+        <div class="fw-evidence">Engaged 4.5 min with 2022 drawdown comparison during Feb correction (Feb 22)</div>
+      </div>
+    </div>
+
+    <!-- Facet 4: Tax-Related Decisions -->
+    <div class="fw-facet red-border" onclick="toggleFacet(this)">
+      <div class="fw-facet-top">
+        <div class="fw-ring-wrap">
+          <svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="22" fill="none" stroke="#3a1a1a" stroke-width="4"/><circle cx="26" cy="26" r="22" fill="none" stroke="#e05555" stroke-width="4" stroke-dasharray="138.2 138.2" stroke-dashoffset="82.9" stroke-linecap="round"/></svg>
+          <div class="fw-ring-score">54</div>
+        </div>
+        <div class="fw-facet-info">
+          <div class="fw-facet-name">Tax-Related Decisions</div>
+          <div class="fw-facet-sub">5 interactions <span class="fw-fidelity emerging">Emerging</span></div>
+        </div>
+        <div class="fw-facet-right">
+          <div class="fw-strategy-name">Step-by-Step Simplification</div>
+          <div class="fw-strategy-mu">μ = 0.75</div>
+        </div>
+        <span class="fw-chevron">▾</span>
+      </div>
+      <div class="fw-facet-body">
+        <div class="fw-beta-row">
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#e05555">Leading: Step-by-Step <span class="param">BETA(3, 1)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><defs><linearGradient id="g4" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#e05555" stop-opacity=".3"/><stop offset="100%" stop-color="#e05555" stop-opacity="0"/></linearGradient></defs><path d="M0,75 C20,75 40,74 65,70 C85,66 100,56 120,42 C140,28 165,18 190,14 C205,12 215,12 220,12" fill="url(#g4)" stroke="#e05555" stroke-width="2"/></svg>
+          </div>
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#3a5a72">Runner-up: Binary Decision Tree <span class="param" style="color:#2a4a60">BETA(2, 2)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><path d="M0,75 C15,74 30,72 55,64 C80,55 100,38 110,32 C120,26 140,32 160,48 C180,62 200,73 220,75" fill="none" stroke="#2a4a60" stroke-width="2"/></svg>
+          </div>
+        </div>
+        <div class="fw-insight" style="background:rgba(224,85,85,.06);border:1px solid rgba(224,85,85,.12)">
+          <div class="fw-insight-hdr" style="color:#e05555">Cognitive Insight</div>
+          <div class="fw-insight-text">Early signal suggests preference for sequential, simplified explanations over decision trees. Asks clarifying follow-ups when presented with branching logic. Confidence still developing — 5 more interactions needed for reliable convergence.</div>
+        </div>
+        <div class="fw-evidence">Asked 3 follow-up questions after tax-loss harvesting explanation (Feb 15)</div>
+      </div>
+    </div>
+
+    <!-- Facet 5: Retirement Planning -->
+    <div class="fw-facet purple-border" onclick="toggleFacet(this)">
+      <div class="fw-facet-top">
+        <div class="fw-ring-wrap">
+          <svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="22" fill="none" stroke="#231840" stroke-width="4"/><circle cx="26" cy="26" r="22" fill="none" stroke="#9a5adc" stroke-width="4" stroke-dasharray="138.2 138.2" stroke-dashoffset="96.7" stroke-linecap="round"/></svg>
+          <div class="fw-ring-score" style="font-size:13px">38</div>
+        </div>
+        <div class="fw-facet-info">
+          <div class="fw-facet-name">Retirement Planning</div>
+          <div class="fw-facet-sub">3 interactions <span class="fw-fidelity exploring">Exploring</span></div>
+        </div>
+        <div class="fw-facet-right">
+          <div class="fw-strategy-name">Uncertain</div>
+          <div class="fw-strategy-mu">μ = 0.67</div>
+        </div>
+        <span class="fw-chevron">▾</span>
+      </div>
+      <div class="fw-facet-body">
+        <div class="fw-beta-row">
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#9a5adc">Leading: Goal Visualizer <span class="param">BETA(2, 1)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><defs><linearGradient id="g5" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#9a5adc" stop-opacity=".28"/><stop offset="100%" stop-color="#9a5adc" stop-opacity="0"/></linearGradient></defs><path d="M0,75 C30,75 55,74 85,68 C110,62 130,48 150,36 C165,26 182,18 200,14 C210,11 216,11 220,11" fill="url(#g5)" stroke="#9a5adc" stroke-width="2"/></svg>
+          </div>
+          <div class="fw-beta-cell">
+            <div class="fw-beta-label" style="color:#3a5a72">Runner-up: Projection Table <span class="param" style="color:#2a4a60">BETA(2, 2)</span></div>
+            <svg class="fw-beta-svg" viewBox="0 0 220 80"><path d="M0,75 C15,75 30,73 55,65 C75,57 95,42 110,37 C125,32 140,38 160,52 C178,64 200,73 220,75" fill="none" stroke="#2a4a60" stroke-width="2"/></svg>
+          </div>
+        </div>
+        <div class="fw-insight" style="background:rgba(154,90,220,.06);border:1px solid rgba(154,90,220,.12)">
+          <div class="fw-insight-hdr" style="color:#9a5adc">Cognitive Insight</div>
+          <div class="fw-insight-text">Insufficient data to form a confident facet. Three early interactions suggest possible preference for visual goal framing, but high uncertainty remains. Engine is in active exploration mode for this context.</div>
+        </div>
+        <div class="fw-evidence">This model is a posterior, not a profile. High-fidelity facets reflect strong convergence across multiple interactions.</div>
+      </div>
+    </div>
+
+    <div class="fw-footer-note">
+      This model is a posterior, not a profile. High-fidelity facets (rebalancing, fund exploration, volatility) reflect strong convergence — the engine has seen enough signal to make reliable predictions. Emerging facets are still being shaped. Every interaction updates the weights; the portrait is never frozen.
+    </div>
+  </div>
+</div>
+
+<script>
+function toggleFacet(el) {
+  el.classList.toggle('open');
+}
+</script>
+
+</body>
+</html>

anupa/requirements.txt

@@ -0,0 +1,3 @@
+numpy
+python-dotenv
+anthropic