Merge pull request #1 from NeonGeckoCom/dev-cursor

.cursor/rules/docker-build.mdc

@@ -0,0 +1,87 @@
+---
+description: Docker build cache conventions for CCAI-Vibe-Demo
+globs: Dockerfile,docker-compose*.yml,.dockerignore,backend/requirements.txt,frontend/package*.json
+alwaysApply: false
+---
+
+# Docker build cache conventions
+
+This project uses **BuildKit cache mounts** so `npm ci` and `pip install`
+skip the network when only source files change. Don't replace them
+with plain `RUN` commands - that reintroduces full re-downloads on every
+dependency change.
+
+## Required Dockerfile pattern
+
+The Dockerfile MUST start with the BuildKit syntax directive:
+
+```dockerfile
+# syntax=docker/dockerfile:1.7
+```
+
+### Frontend stage (root user, node:22-alpine)
+
+```dockerfile
+COPY frontend/package.json frontend/package-lock.json ./
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci
+```
+
+### Backend stage (USER user, uid 1000, python:3.12-slim)
+
+```dockerfile
+COPY --chown=user backend/requirements.txt ./
+RUN --mount=type=cache,target=/home/user/.cache/pip,uid=1000,gid=1000 \
+    pip install --user -r requirements.txt
+```
+
+The `uid=1000,gid=1000` flags are mandatory because the cache target
+sits inside the unprivileged user's home dir. Without them the cache
+is created root-owned and pip cannot write to it.
+
+## Don'ts
+
+- **Don't** pass `--no-cache-dir` to `pip install`. It defeats the
+  cache mount. The mount lives outside the image, so wheels never
+  bloat the final layer either way.
+- **Don't** `COPY .` blindly. Layers must be copy-deps-first,
+  copy-source-second so a source edit doesn't bust the deps layer.
+- **Don't** add new files outside `backend/`, `frontend/` or the
+  lockfiles to a `COPY` line without first checking `.dockerignore`.
+
+## Build context (`.dockerignore`)
+
+The ignore list excludes `.git/`, `node_modules/`, `frontend/build/`,
+`agent-transcripts/`, `__pycache__`, secrets (`.env*`),
+`docker-compose.override.yml`, `backend/tests/`, and editor metadata.
+If you need a previously-ignored path inside the image, add a narrow
+`!path/to/keep` exception rather than removing the broad ignore.
+
+## Verifying the cache works
+
+After a Dockerfile or deps-file change, run two builds back to back:
+
+```powershell
+docker compose build
+docker compose build  # second time
+```
+
+The second build's `npm ci` / `pip install` step should print a
+`CACHED` line (when nothing in the deps file changed) or a
+near-instant `=> [internal] load build context` finish (when only
+source files changed). If it re-downloads, the cache mount is
+mis-configured.
+
+If a build ever errors with `the --mount option requires BuildKit`,
+opt in explicitly:
+
+```powershell
+$env:DOCKER_BUILDKIT=1; docker compose build
+```
+
+## HuggingFace Spaces compatibility
+
+HuggingFace's Docker Space builder honors the `# syntax=` directive
+and BuildKit cache mounts. Older builders silently treat the mounts
+as no-ops, so this Dockerfile remains forward-compatible with any
+plain-Docker environment.

.dockerignore

@@ -0,0 +1,61 @@
+# Build context exclusions for `docker build` / `docker compose build`.
+# Trimming the context speeds the daemon transfer and keeps cache hashes
+# stable: changes to ignored paths do NOT invalidate Dockerfile layers.
+
+# ── Git / VCS metadata ───────────────────────────────────────────────
+.git
+.gitignore
+.gitattributes
+.github
+
+# ── Cursor / agent transcripts (local IDE state, never needed in image)
+.cursor
+agent-transcripts
+.commit-msg.txt
+
+# ── Editor / OS junk ─────────────────────────────────────────────────
+.vscode
+.idea
+.DS_Store
+Thumbs.db
+*.swp
+
+# ── Secrets / env (image gets env at runtime via docker-compose)
+.env
+.env.*
+*.env
+!**/.env.example
+
+# ── Python local caches ──────────────────────────────────────────────
+**/__pycache__
+*.pyc
+*.pyo
+*.pyd
+*.egg-info
+.pytest_cache
+.mypy_cache
+.ruff_cache
+.venv
+venv
+
+# ── Node local caches & build outputs ────────────────────────────────
+# Lockfiles ARE included on purpose so `npm ci` is reproducible.
+**/node_modules
+frontend/build
+frontend/.next
+frontend/.cache
+**/.cache
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ── Local-only docker compose overrides ──────────────────────────────
+# The base docker-compose.yml is needed for `docker compose build` from
+# the build dir, but the local override (which references absolute host
+# paths to a secrets file outside this repo) shouldn't end up in the
+# image build context.
+docker-compose.override.yml
+
+# ── Tests aren't shipped in the runtime image ────────────────────────
+# (Re-enable if you want to run pytest inside the deployed container.)
+backend/tests

.env.example

@@ -0,0 +1,11 @@
+# Decidron Network Simulator config.
+#
+# The deterministic simulator requires no API keys. The only settings
+# are CORS (for CRA dev on :3000 talking to the backend on :7860) and an
+# optional host port override for docker compose.
+
+# Comma-separated allowed CORS origins.
+CORS_ORIGINS=http://localhost:3000,http://localhost:7860
+
+# Host port to publish the container on (container always listens on 7860).
+# CCAI_HOST_PORT=7860

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,16 @@
+__pycache__/
+*.pyc
+.env
+node_modules/
+frontend/build/
+backend/static/
+frontend/.env.development
+.DS_Store
+*.egg-info/
+dist/
+.venv/
+venv/
+*.log
+docker-compose.override.yml
+docker-compose.dev-cursor.yml
+.commit-msg.txt

Dockerfile

@@ -0,0 +1,48 @@
+# syntax=docker/dockerfile:1.7
+#
+# BuildKit cache mounts speed up rebuilds by persisting npm and pip
+# package caches across builds (outside the image - they don't bloat
+# the final layer). The first `docker compose build` is unchanged;
+# subsequent rebuilds skip the network for any unchanged dependency.
+#
+# The `# syntax=` directive auto-opts into BuildKit on Docker Desktop
+# 20.10+; HuggingFace Spaces also supports this directive. Older
+# builders silently treat the cache mounts as no-ops, so this file
+# remains forward-compatible.
+
+FROM node:22-alpine AS frontend-build
+WORKDIR /app/frontend
+
+# Copy lockfile + manifest first so the layer hash only changes when
+# deps actually change, not on every source edit.
+COPY frontend/package.json frontend/package-lock.json ./
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci
+
+COPY frontend/ ./
+ENV REACT_APP_API_URL=
+RUN npm run build
+
+
+FROM python:3.12-slim
+
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONUNBUFFERED=1
+
+WORKDIR $HOME/app
+
+# Lockfile-equivalent first; cache mount targets the unprivileged
+# user's pip cache (uid/gid 1000 matches the `user` account).
+COPY --chown=user backend/requirements.txt ./
+RUN --mount=type=cache,target=/home/user/.cache/pip,uid=1000,gid=1000 \
+    pip install --user -r requirements.txt
+
+COPY --chown=user backend/ ./
+COPY --chown=user --from=frontend-build /app/frontend/build ./static
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1 +1,274 @@
-# decidron-simulator
+---
+title: Decidron Network Simulator
+emoji: 🔗
+colorFrom: blue
+colorTo: purple
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Decidron Network Simulator
+
+A deterministic, browser-based simulator for **Decidron networks** — the
+coupled machine-learning decision units described in US Patent
+[US11989636B1](https://patents.google.com/patent/US11989636B1/en)
+("System and method for persuadable collaborative conversational AI",
+Gasper & Leeds).
+
+You define simulated **sensor inputs** and **processing commands**
+(IF a sensor matches THEN emit an output / drive an actuator / modify the
+network), run the simulation, and watch the **network diagram**,
+**performance statistics**, and **topology-change history** update live.
+
+> This project started from Neon.ai's private `CCAI-Vibe-Demo` app and
+> reuses its FastAPI + React scaffold, Docker setup, and visual branding.
+> The CCAI multi-LLM orchestration was intentionally removed — v1 of the
+> simulator is purely rule-based and needs no API keys or LLM. See
+> [Relationship to CCAI](#relationship-to-ccai-and-the-patent).
+
+## Patent context (brief)
+
+A **Decidron** is a machine-learning unit (MLU) with collaborative
+protocols that can be **coupled/networked** with other Decidrons. The
+patent highlights that "a MLU network coupled with real-time sensors and
+actuators can operate industrial controls ... and increased reliability
+through parallel pathways." A Decidron records its **experience**, fires
+**actions**, scores **results**, and can **modify its own topology**.
+
+This simulator models those concepts deterministically:
+
+| Patent concept | Simulator |
+| --- | --- |
+| Coupled MLU node / coupling | `decidron` node / directed edge |
+| Sensors and actuators | `sensor` / `actuator` nodes |
+| Experience Chains (ECDS) | per-node experience log (sensor received → rule fired → actuator acted) |
+| Select & perform action, results scored | command output (+ optional actuator) + performance stats |
+| Dynamic/extensible topology | `network_ops` applied when a command fires |
+| Parallel pathways / reliability | redundant couplings in the seed network |
+
+## Prerequisites
+
+- **Docker** (recommended), or
+- **Python 3.12+** and **Node 22+** for local dev.
+
+## Start the application
+
+### Docker (recommended)
+
+```bash
+cp .env.example .env        # no secrets needed; defaults are fine
+docker compose up --build
+# open http://localhost:7860
+```
+
+The container builds the React frontend, serves it as static files from
+FastAPI, and listens on port 7860. Override the host port with
+`CCAI_HOST_PORT` in `.env` if 7860 is taken.
+
+### Local development
+
+Backend (FastAPI on :7860):
+
+```bash
+cd backend
+python -m venv .venv
+.venv/Scripts/activate      # Windows; use source .venv/bin/activate on macOS/Linux
+pip install -r requirements.txt
+uvicorn app.main:app --port 7860
+```
+
+#### Hot reload (development)
+
+Do **not** rely on `uvicorn --reload` on Windows: it detects file changes
+but frequently fails to actually restart the worker, so it silently keeps
+serving stale code. Instead use the bundled dev scripts, which wrap
+uvicorn in `watchfiles` for a clean full restart on every change:
+
+```powershell
+cd backend
+.\dev.ps1            # Windows
+```
+
+```bash
+cd backend
+./dev.sh             # macOS/Linux/Git Bash
+```
+
+Both default to `app.main:app` on `127.0.0.1:7860`, watching `./app`.
+`watchfiles` ships with `uvicorn[standard]`. (On non-Windows hosts plain
+`uvicorn --reload` works too, but the scripts behave identically.)
+
+Frontend (CRA dev server on :3000, proxying to the backend):
+
+```bash
+cd frontend
+npm install
+# point the dev server at the backend:
+echo "REACT_APP_API_URL=http://localhost:7860" > .env.development
+npm start
+```
+
+## Web UI workflow
+
+1. **View the initial network diagram** — sensors (blue boxes) feed
+   coupled Decidrons (purple hexagons) that drive actuators (green
+   triangles).
+2. **Enter a simulated sensor input** — pick a channel (e.g.
+   `Temperature Sensor`), enter a value (e.g. `97`), and click **Queue**.
+3. **Create processing commands** — define IF (sensor + match) THEN
+   (output, optional actuator). The match is an `operator:value` rule.
+4. **Run the simulation** — click **Run Simulation**; queued inputs are
+   evaluated against all commands.
+5. **Read the results and statistics** — matched commands, emitted
+   outputs, and per-sensor/command/output metrics appear on the right.
+6. **Review the network-change diagram** — if a command applied
+   `network_ops`, a new version is snapshotted; select any version in the
+   **Network Modification History** to view that topology in the diagram.
+
+## Processing command format
+
+A command is JSON:
+
+```json
+{
+  "name": "HighTempAlert",
+  "sensor": "temperature",
+  "match": "gte:85",
+  "output": "Trigger failsafe review",
+  "actuator": "actuator-1",
+  "network_ops": [
+    { "op": "add_node", "node": { "id": "D3", "label": "Decidron D3", "type": "decidron" } },
+    { "op": "add_edge", "from": "temperature", "to": "D3" },
+    { "op": "remove_edge", "from": "D1", "to": "D2" }
+  ]
+}
+```
+
+- `sensor` — the sensor channel/node id this command listens to.
+- `match` — `operator:value`, where operator is one of `contains`,
+  `equals`, `startswith`, `endswith`, `regex`, `gt`, `gte`, `lt`, `lte`.
+  A bare value (no operator) is treated as `contains`.
+- `output` — text emitted when the rule fires.
+- `actuator` *(optional)* — id of an actuator node to drive.
+- `network_ops` *(optional)* — topology changes: `add_node`, `add_edge`,
+  `remove_edge` (edges use `from`/`to`).
+
+## API reference
+
+All endpoints are under `/api/decidron`.
+
+| Method | Path | Purpose |
+| --- | --- | --- |
+| GET | `/api/decidron/network` | Current network + vis-network diagram JSON |
+| POST | `/api/decidron/sensors/input` | Queue a simulated sensor input |
+| GET | `/api/decidron/commands` | List processing commands |
+| POST | `/api/decidron/commands` | Create a processing command |
+| POST | `/api/decidron/run` | Process queued (or supplied) inputs |
+| GET | `/api/decidron/stats` | Performance statistics |
+| GET | `/api/decidron/history` | Topology-change snapshots |
+| POST | `/api/decidron/reset` | Reset to the seed network |
+
+### curl examples
+
+```bash
+# View the initial network
+curl http://localhost:7860/api/decidron/network
+
+# Queue a sensor reading and run
+curl -X POST http://localhost:7860/api/decidron/sensors/input \
+  -H 'Content-Type: application/json' \
+  -d '{"channel":"temperature","value":"97"}'
+
+curl -X POST http://localhost:7860/api/decidron/run \
+  -H 'Content-Type: application/json' -d '{}'
+
+# Create a command
+curl -X POST http://localhost:7860/api/decidron/commands \
+  -H 'Content-Type: application/json' \
+  -d '{"name":"LowTemp","sensor":"temperature","match":"lt:0","output":"Freeze warning"}'
+
+# Run with inline inputs (bypasses the queue)
+curl -X POST http://localhost:7860/api/decidron/run \
+  -H 'Content-Type: application/json' \
+  -d '{"inputs":[{"channel":"temperature","value":"-5"}]}'
+
+# Stats and history
+curl http://localhost:7860/api/decidron/stats
+curl http://localhost:7860/api/decidron/history
+```
+
+## Config & seed files
+
+- [`backend/app/config.py`](backend/app/config.py) — minimal settings
+  (`CORS_ORIGINS`).
+- [`backend/app/data/decidron/default_network.json`](backend/app/data/decidron/default_network.json)
+  — the starter network (sensor → coupled Decidrons → actuator, with a
+  redundant coupling).
+- [`backend/app/data/decidron/sample_commands.json`](backend/app/data/decidron/sample_commands.json)
+  — example commands (one drives an actuator, one reconfigures the
+  topology). Edit these to change the simulation's starting state.
+
+## Adding files in Cursor
+
+- **Open the repo as a workspace**: File → Open Folder → `decidron-simulator`.
+- **New file**: right-click a folder in the Explorer → New File.
+- **Drag & drop** files from your file manager into the Explorer.
+- **Ask Cursor in chat**: e.g. "Add `backend/app/decidron/alerts.py`".
+- **Terminal**: `New-Item backend/app/decidron/alerts.py` (PowerShell) or
+  `touch backend/app/decidron/alerts.py` (bash).
+
+## Relationship to CCAI and the patent
+
+v1 deliberately omits the patent's full pipeline: ECDS context/memory
+augmentation, the embedded CCAI per Decidron, Theory-of-Mind,
+persuadability, and action-reinforcement learning. A future version
+could make Decidrons LLM-driven by porting the orchestration and LLM
+clients from the `CCAI-Vibe-Demo` reference app. The simulator's logic is
+isolated under `backend/app/decidron/` and
+`frontend/src/components/decidron/` to keep that door open.
+
+## Project layout
+
+```
+backend/
+  app/
+    main.py                 # FastAPI app: CORS, /api/health, SPA serving
+    config.py               # minimal settings
+    api/decidron.py         # REST router
+    decidron/               # simulation engine (models, network, engine, stats, diagrams)
+    data/decidron/          # seed network + sample commands
+frontend/
+  src/
+    App.js                  # shell
+    components/Header.js     # branded header
+    components/decidron/     # simulator UI (diagram, forms, tables, history)
+    utils/api.js             # API client
+    styles/                  # branding + simulator CSS
+Dockerfile, docker-compose.yml
+```
+
+## Hugging Face Space (BrainForge)
+
+Hosted as a Docker Space on [BrainForge/decidron-simulator](https://huggingface.co/spaces/BrainForge/decidron-simulator) (`app_port: 7860`, `cpu-basic`). No API keys or secrets are required.
+
+Deploy from the **`master`** branch (merge `dev-cursor` into `master` on GitHub first):
+
+```bash
+git remote add hf https://huggingface.co/spaces/BrainForge/decidron-simulator
+git checkout master && git pull origin master
+git push hf master:main
+```
+
+The Space builds from the root `Dockerfile` (React frontend → `backend/static`, FastAPI on port 7860).
+
+## Troubleshooting
+
+- **Port 7860 in use** — set `CCAI_HOST_PORT` in `.env`, or run uvicorn
+  on another port.
+- **Frontend can't reach the API in dev** — ensure
+  `REACT_APP_API_URL=http://localhost:7860` is set in
+  `frontend/.env.development` and the backend is running.
+- **CORS errors** — add your origin to `CORS_ORIGINS` in `.env`.
+- **Diagram doesn't render** — vis-network needs the bundled assets from
+  `npm install`; re-run it if you cloned without building.

backend/app/api/decidron.py

@@ -0,0 +1,95 @@
+"""REST API for the Decidron network simulator."""
+
+from __future__ import annotations
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel
+
+from app.decidron.engine import engine
+from app.decidron.diagrams import to_vis_network
+from app.decidron.models import ProcessingCommand, RunResult, SensorInput
+
+router = APIRouter(prefix="/decidron", tags=["decidron"])
+
+
+def _network_payload() -> dict:
+    nodes = engine.network.nodes_list()
+    return {
+        "version": engine.network.version,
+        "nodes": [n.model_dump() for n in nodes],
+        "edges": [e.model_dump(by_alias=True) for e in engine.network.edges],
+        "diagram": to_vis_network(nodes, engine.network.edges),
+    }
+
+
+@router.get("/network")
+async def get_network() -> dict:
+    return _network_payload()
+
+
+@router.post("/sensors/input")
+async def submit_sensor_input(sensor_input: SensorInput) -> dict:
+    engine.add_sensor_input(sensor_input)
+    return {
+        "queued": sensor_input.model_dump(),
+        "pending_count": len(engine.pending_inputs),
+    }
+
+
+@router.get("/commands")
+async def list_commands() -> list[ProcessingCommand]:
+    return engine.list_commands()
+
+
+@router.post("/commands")
+async def create_command(command: ProcessingCommand) -> ProcessingCommand:
+    return engine.add_command(command)
+
+
+@router.delete("/commands/{name}")
+async def delete_command(name: str) -> dict:
+    if not engine.remove_command(name):
+        raise HTTPException(status_code=404, detail=f"No command named '{name}'")
+    return {"deleted": name}
+
+
+class RunRequest(BaseModel):
+    inputs: list[SensorInput] | None = None
+
+
+@router.post("/run")
+async def run_simulation(req: RunRequest | None = None) -> dict:
+    inputs = req.inputs if req else None
+    results: list[RunResult] = engine.run(inputs)
+    return {
+        "results": [r.model_dump() for r in results],
+        "matches": sum(1 for r in results if r.matched),
+        "network": _network_payload(),
+    }
+
+
+@router.get("/stats")
+async def get_stats() -> dict:
+    return engine.stats.as_dict()
+
+
+@router.get("/history")
+async def get_history() -> dict:
+    return {
+        "version": engine.network.version,
+        "snapshots": [
+            {
+                "version": s.version,
+                "reason": s.reason,
+                "timestamp": s.timestamp,
+                "diagram": to_vis_network(s.nodes, s.edges),
+            }
+            for s in engine.network.history
+        ],
+    }
+
+
+@router.post("/reset")
+async def reset_simulation() -> dict:
+    engine.reset()
+    return _network_payload()

backend/app/config.py

@@ -0,0 +1,28 @@
+from __future__ import annotations
+
+from pathlib import Path
+
+from pydantic_settings import BaseSettings
+
+_PROJECT_ROOT = Path(__file__).resolve().parent.parent.parent
+_ENV_FILE = _PROJECT_ROOT / ".env"
+
+
+class Settings(BaseSettings):
+    """Minimal app settings for the Decidron simulator.
+
+    The deterministic simulator needs no LLM provider credentials; the
+    only configurable surface today is CORS for local dev where the CRA
+    dev server (:3000) talks to the FastAPI backend (:7860).
+    """
+
+    cors_origins: str = "http://localhost:3000,http://localhost:7860"
+
+    model_config = {"env_file": str(_ENV_FILE), "env_file_encoding": "utf-8"}
+
+    @property
+    def cors_origin_list(self) -> list[str]:
+        return [o.strip() for o in self.cors_origins.split(",") if o.strip()]
+
+
+settings = Settings()

backend/app/data/decidron/default_network.json

@@ -0,0 +1,16 @@
+{
+  "nodes": [
+    { "id": "temperature", "label": "Temperature Sensor", "type": "sensor" },
+    { "id": "D1", "label": "Decidron D1", "type": "decidron" },
+    { "id": "D2", "label": "Decidron D2", "type": "decidron" },
+    { "id": "actuator-1", "label": "Failsafe Actuator", "type": "actuator" }
+  ],
+  "edges": [
+    { "from": "temperature", "to": "D1", "label": "senses" },
+    { "from": "temperature", "to": "D2", "label": "senses (redundant)" },
+    { "from": "D1", "to": "D2", "label": "coupling" },
+    { "from": "D2", "to": "D1", "label": "coupling" },
+    { "from": "D1", "to": "actuator-1", "label": "drives" },
+    { "from": "D2", "to": "actuator-1", "label": "drives (redundant)" }
+  ]
+}

backend/app/data/decidron/sample_commands.json

@@ -0,0 +1,20 @@
+[
+  {
+    "name": "HighTempAlert",
+    "sensor": "temperature",
+    "match": "gte:85",
+    "output": "Trigger failsafe review",
+    "actuator": "actuator-1"
+  },
+  {
+    "name": "CriticalTempReconfigure",
+    "sensor": "temperature",
+    "match": "gte:95",
+    "output": "Spin up redundant Decidron D3 and couple it to the failsafe actuator",
+    "network_ops": [
+      { "op": "add_node", "node": { "id": "D3", "label": "Decidron D3", "type": "decidron" } },
+      { "op": "add_edge", "from": "temperature", "to": "D3" },
+      { "op": "add_edge", "from": "D3", "to": "actuator-1" }
+    ]
+  }
+]

backend/app/decidron/__init__.py

@@ -0,0 +1,7 @@
+"""Decidron network simulator package.
+
+A deterministic, LLM-free simulation of the patent's (US11989636B1)
+Decidron network: machine-learning decision units (Decidrons) coupled
+with sensors and actuators, that record experience, fire rule-based
+actions, and can modify their own topology.
+"""

backend/app/decidron/diagrams.py

@@ -0,0 +1,48 @@
+"""Convert Decidron network state into vis-network diagram JSON.
+
+Uses ``networkx`` as the server-side graph representation and emits
+``{nodes, edges}`` shaped for the vis-network frontend, styled by node
+type (sensor / decidron / actuator).
+"""
+
+from __future__ import annotations
+
+import networkx as nx
+
+from .models import DecidronNode, Edge
+
+_GROUP_STYLE = {
+    "sensor": {"shape": "box", "color": "#3b82f6"},
+    "decidron": {"shape": "hexagon", "color": "#8b5cf6"},
+    "actuator": {"shape": "triangle", "color": "#10b981"},
+}
+
+
+def build_graph(nodes: list[DecidronNode], edges: list[Edge]) -> nx.DiGraph:
+    g = nx.DiGraph()
+    for n in nodes:
+        g.add_node(n.id, label=n.label, type=n.type, experience=len(n.experience))
+    for e in edges:
+        g.add_edge(e.source, e.target, label=e.label or "")
+    return g
+
+
+def to_vis_network(nodes: list[DecidronNode], edges: list[Edge]) -> dict:
+    """Return a vis-network ``{nodes, edges}`` payload."""
+    g = build_graph(nodes, edges)
+    vis_nodes = []
+    for node_id, data in g.nodes(data=True):
+        ntype = data.get("type", "decidron")
+        style = _GROUP_STYLE.get(ntype, {})
+        vis_nodes.append({
+            "id": node_id,
+            "label": data.get("label", node_id),
+            "group": ntype,
+            "title": f"{ntype} - {data.get('experience', 0)} experience events",
+            **style,
+        })
+    vis_edges = [
+        {"from": s, "to": t, "label": d.get("label", ""), "arrows": "to"}
+        for s, t, d in g.edges(data=True)
+    ]
+    return {"nodes": vis_nodes, "edges": vis_edges}

backend/app/decidron/engine.py

@@ -0,0 +1,210 @@
+"""Deterministic Decidron processing engine.
+
+Ties the network topology, statistics, user commands, and queued sensor
+inputs together. On each run it matches commands against sensor inputs
+and, for every match:
+
+1. records ECDS-like experience events on the involved nodes
+   (sensor received -> decidron fired -> actuator acted),
+2. emits the command output and drives the target actuator (if any),
+3. applies topology ``network_ops`` (snapshotting history),
+4. updates performance statistics.
+
+No LLM is involved -- v1 is purely rule-based.
+"""
+
+from __future__ import annotations
+
+import json
+import re
+import time
+from pathlib import Path
+
+from .models import (
+    ExperienceEvent,
+    ProcessingCommand,
+    RunResult,
+    SensorInput,
+)
+from .network import NetworkStore
+from .stats import StatsCollector
+
+_DATA_DIR = Path(__file__).resolve().parent.parent / "data" / "decidron"
+_SAMPLE_COMMANDS = _DATA_DIR / "sample_commands.json"
+
+
+def _matches(rule: str, value: str) -> bool:
+    """Evaluate an ``operator:value`` match rule against a sensor value."""
+    if ":" in rule:
+        op, _, target = rule.partition(":")
+        op = op.strip().lower()
+        target = target.strip()
+    else:
+        op, target = "contains", rule.strip()
+
+    v = value.strip()
+
+    def _nums():
+        try:
+            return float(v), float(target)
+        except (TypeError, ValueError):
+            return None, None
+
+    if op == "contains":
+        return target.lower() in v.lower()
+    if op == "equals":
+        return v.lower() == target.lower()
+    if op == "startswith":
+        return v.lower().startswith(target.lower())
+    if op == "endswith":
+        return v.lower().endswith(target.lower())
+    if op == "regex":
+        try:
+            return re.search(target, v) is not None
+        except re.error:
+            return False
+    if op in {"gt", "lt", "gte", "lte"}:
+        a, b = _nums()
+        if a is None:
+            return False
+        return {
+            "gt": a > b,
+            "lt": a < b,
+            "gte": a >= b,
+            "lte": a <= b,
+        }[op]
+    # Unknown operator -> no match.
+    return False
+
+
+class DecidronEngine:
+    def __init__(self) -> None:
+        self.network = NetworkStore()
+        self.stats = StatsCollector()
+        self.commands: dict[str, ProcessingCommand] = {}
+        self.pending_inputs: list[SensorInput] = []
+        self.input_log: list[SensorInput] = []
+        self.run_results: list[RunResult] = []
+        self._load_sample_commands()
+
+    def _load_sample_commands(self) -> None:
+        if _SAMPLE_COMMANDS.is_file():
+            for c in json.loads(_SAMPLE_COMMANDS.read_text(encoding="utf-8")):
+                cmd = ProcessingCommand(**c)
+                self.commands[cmd.name] = cmd
+
+    # -- commands --------------------------------------------------------
+
+    def list_commands(self) -> list[ProcessingCommand]:
+        return list(self.commands.values())
+
+    def add_command(self, command: ProcessingCommand) -> ProcessingCommand:
+        self.commands[command.name] = command
+        return command
+
+    def remove_command(self, name: str) -> bool:
+        return self.commands.pop(name, None) is not None
+
+    # -- sensor inputs ---------------------------------------------------
+
+    def add_sensor_input(self, sensor_input: SensorInput) -> SensorInput:
+        self.pending_inputs.append(sensor_input)
+        return sensor_input
+
+    # -- experience (ECDS-like) -----------------------------------------
+
+    def _record(self, node_id: str, event: ExperienceEvent) -> None:
+        node = self.network.nodes.get(node_id)
+        if node is not None:
+            node.experience.append(event)
+
+    def _decidrons_for_sensor(self, sensor_node_id: str | None) -> list[str]:
+        """Decidron nodes coupled downstream of a sensor (fallback: all)."""
+        if sensor_node_id is not None:
+            coupled = [
+                nid for nid in self.network.neighbors_out(sensor_node_id)
+                if self.network.nodes.get(nid) and self.network.nodes[nid].type == "decidron"
+            ]
+            if coupled:
+                return coupled
+        return [n.id for n in self.network.nodes_list() if n.type == "decidron"]
+
+    # -- run -------------------------------------------------------------
+
+    def run(self, inputs: list[SensorInput] | None = None) -> list[RunResult]:
+        batch = inputs if inputs is not None else list(self.pending_inputs)
+        results: list[RunResult] = []
+
+        for si in batch:
+            sensor_node = self.network.find_sensor_node(si.channel)
+            if sensor_node is not None:
+                self._record(sensor_node.id, ExperienceEvent(
+                    kind="sensor_received",
+                    detail=f"received '{si.value}' on channel '{si.channel}'",
+                    sensor=si.channel,
+                    value=si.value,
+                ))
+
+            for cmd in self.commands.values():
+                if cmd.sensor.lower() != si.channel.lower():
+                    continue
+                start = time.perf_counter()
+                matched = _matches(cmd.match, si.value)
+                ops_applied = 0
+                output = None
+                actuator = None
+
+                if matched:
+                    output = cmd.output
+                    for nid in self._decidrons_for_sensor(
+                        sensor_node.id if sensor_node else None
+                    ):
+                        self._record(nid, ExperienceEvent(
+                            kind="rule_fired",
+                            detail=f"command '{cmd.name}' fired -> {cmd.output}",
+                            command=cmd.name,
+                            sensor=si.channel,
+                            value=si.value,
+                        ))
+                    if cmd.actuator and cmd.actuator in self.network.nodes:
+                        actuator = cmd.actuator
+                        self._record(cmd.actuator, ExperienceEvent(
+                            kind="actuator_acted",
+                            detail=f"actuated by '{cmd.name}': {cmd.output}",
+                            command=cmd.name,
+                        ))
+                    if cmd.network_ops:
+                        ops_applied = self.network.apply_ops(
+                            cmd.network_ops, reason=f"command '{cmd.name}' fired"
+                        )
+
+                latency_ms = (time.perf_counter() - start) * 1000.0
+                self.stats.record(si.channel, cmd.name, output, matched, latency_ms)
+                result = RunResult(
+                    command=cmd.name,
+                    sensor=si.channel,
+                    value=si.value,
+                    matched=matched,
+                    output=output,
+                    actuator=actuator,
+                    network_ops_applied=ops_applied,
+                    latency_ms=round(latency_ms, 4),
+                )
+                results.append(result)
+
+            self.input_log.append(si)
+
+        if inputs is None:
+            self.pending_inputs.clear()
+        self.run_results.extend(results)
+        return results
+
+    def reset(self) -> None:
+        self.network.reset()
+        self.stats.reset()
+        self.pending_inputs.clear()
+        self.input_log.clear()
+        self.run_results.clear()
+
+
+engine = DecidronEngine()

backend/app/decidron/models.py

@@ -0,0 +1,106 @@
+"""Pydantic schemas for the Decidron simulator.
+
+These model the patent's core objects in a deliberately simplified,
+deterministic form:
+
+- ``DecidronNode``  -> a coupled MLU node (decidron) or a sensor/actuator.
+- ``Edge``          -> a coupling between nodes.
+- ``ExperienceEvent`` -> a simplified ECDS entry recorded on a node.
+- ``ProcessingCommand`` -> a user-defined IF (sensor matches) THEN
+  (emit output / drive actuator / modify network) rule.
+"""
+
+from __future__ import annotations
+
+import time
+from typing import Literal, Optional
+
+from pydantic import BaseModel, ConfigDict, Field
+
+NodeType = Literal["decidron", "sensor", "actuator"]
+NetworkOpType = Literal["add_edge", "remove_edge", "add_node"]
+ExperienceKind = Literal["sensor_received", "rule_fired", "actuator_acted"]
+
+
+class ExperienceEvent(BaseModel):
+    """A simplified ECDS (Experience Chain Data Structure) entry.
+
+    The patent's signature behavior is that each unit records its
+    experience; in v1 we capture the salient facts of each run.
+    """
+
+    kind: ExperienceKind
+    detail: str
+    command: Optional[str] = None
+    sensor: Optional[str] = None
+    value: Optional[str] = None
+    timestamp: float = Field(default_factory=time.time)
+
+
+class DecidronNode(BaseModel):
+    id: str
+    label: str
+    type: NodeType = "decidron"
+    experience: list[ExperienceEvent] = Field(default_factory=list)
+
+
+class Edge(BaseModel):
+    """A directed coupling between two nodes (``from`` -> ``to``)."""
+
+    model_config = ConfigDict(populate_by_name=True)
+
+    source: str = Field(alias="from")
+    target: str = Field(alias="to")
+    label: Optional[str] = None
+
+
+class NetworkOp(BaseModel):
+    """A topology modification applied when a command fires."""
+
+    model_config = ConfigDict(populate_by_name=True)
+
+    op: NetworkOpType
+    source: Optional[str] = Field(default=None, alias="from")
+    target: Optional[str] = Field(default=None, alias="to")
+    node: Optional[DecidronNode] = None
+
+
+class SensorInput(BaseModel):
+    channel: str
+    value: str
+    timestamp: float = Field(default_factory=time.time)
+
+
+class ProcessingCommand(BaseModel):
+    """A user-defined processing rule.
+
+    ``match`` is an ``operator:value`` string, e.g. ``contains:85``,
+    ``equals:on``, ``gt:80``. A bare value is treated as ``contains``.
+    """
+
+    name: str
+    sensor: str
+    match: str
+    output: str
+    actuator: Optional[str] = None
+    network_ops: list[NetworkOp] = Field(default_factory=list)
+
+
+class NetworkSnapshot(BaseModel):
+    version: int
+    reason: str
+    nodes: list[DecidronNode]
+    edges: list[Edge]
+    timestamp: float = Field(default_factory=time.time)
+
+
+class RunResult(BaseModel):
+    command: str
+    sensor: str
+    value: str
+    matched: bool
+    output: Optional[str] = None
+    actuator: Optional[str] = None
+    network_ops_applied: int = 0
+    latency_ms: float = 0.0
+    timestamp: float = Field(default_factory=time.time)

backend/app/decidron/network.py

@@ -0,0 +1,101 @@
+"""In-memory Decidron network state with version history.
+
+Holds the live topology (nodes + directed couplings), applies topology
+modifications, and snapshots the network whenever it changes so the UI
+can show before/after diagrams.
+"""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+from .models import DecidronNode, Edge, NetworkOp, NetworkSnapshot
+
+_DATA_DIR = Path(__file__).resolve().parent.parent / "data" / "decidron"
+_DEFAULT_NETWORK = _DATA_DIR / "default_network.json"
+
+
+class NetworkStore:
+    def __init__(self) -> None:
+        self.nodes: dict[str, DecidronNode] = {}
+        self.edges: list[Edge] = []
+        self.version: int = 0
+        self.history: list[NetworkSnapshot] = []
+        self.load_default()
+
+    def load_default(self) -> None:
+        raw = json.loads(_DEFAULT_NETWORK.read_text(encoding="utf-8"))
+        self.nodes = {n["id"]: DecidronNode(**n) for n in raw.get("nodes", [])}
+        self.edges = [Edge(**e) for e in raw.get("edges", [])]
+        self.version = 0
+        self.history = []
+        self._snapshot("initial network")
+
+    def reset(self) -> None:
+        self.load_default()
+
+    # -- queries ---------------------------------------------------------
+
+    def neighbors_out(self, node_id: str) -> list[str]:
+        """Nodes reachable from ``node_id`` via an outgoing coupling."""
+        return [e.target for e in self.edges if e.source == node_id]
+
+    def nodes_list(self) -> list[DecidronNode]:
+        return list(self.nodes.values())
+
+    def find_sensor_node(self, channel: str) -> DecidronNode | None:
+        """Match a sensor channel to a sensor node by id or label."""
+        for node in self.nodes.values():
+            if node.type != "sensor":
+                continue
+            if node.id == channel or node.label.lower() == channel.lower():
+                return node
+        return None
+
+    # -- mutations -------------------------------------------------------
+
+    def _snapshot(self, reason: str) -> None:
+        self.history.append(
+            NetworkSnapshot(
+                version=self.version,
+                reason=reason,
+                nodes=[n.model_copy(deep=True) for n in self.nodes.values()],
+                edges=[e.model_copy(deep=True) for e in self.edges],
+            )
+        )
+
+    def _edge_exists(self, source: str, target: str) -> bool:
+        return any(e.source == source and e.target == target for e in self.edges)
+
+    def apply_op(self, op: NetworkOp) -> bool:
+        """Apply a single topology op. Returns True if the graph changed."""
+        if op.op == "add_node" and op.node is not None:
+            if op.node.id not in self.nodes:
+                self.nodes[op.node.id] = op.node
+                return True
+            return False
+        if op.op == "add_edge" and op.source and op.target:
+            if not self._edge_exists(op.source, op.target):
+                self.edges.append(Edge(source=op.source, target=op.target))
+                return True
+            return False
+        if op.op == "remove_edge" and op.source and op.target:
+            before = len(self.edges)
+            self.edges = [
+                e for e in self.edges
+                if not (e.source == op.source and e.target == op.target)
+            ]
+            return len(self.edges) != before
+        return False
+
+    def apply_ops(self, ops: list[NetworkOp], reason: str) -> int:
+        """Apply ops, snapshotting once if anything changed. Returns count."""
+        changed = 0
+        for op in ops:
+            if self.apply_op(op):
+                changed += 1
+        if changed:
+            self.version += 1
+            self._snapshot(reason)
+        return changed

backend/app/decidron/stats.py

@@ -0,0 +1,62 @@
+"""Performance statistics for the Decidron simulator.
+
+Aggregates per-sensor, per-command, and per-output counts plus latency
+and last-run timestamps -- a deterministic stand-in for the patent's
+"results determined and scored" step.
+"""
+
+from __future__ import annotations
+
+import time
+from collections import defaultdict
+
+
+class StatsCollector:
+    def __init__(self) -> None:
+        self.sensors: dict[str, dict] = defaultdict(self._blank)
+        self.commands: dict[str, dict] = defaultdict(self._blank)
+        self.outputs: dict[str, dict] = defaultdict(self._blank)
+        self.total_runs: int = 0
+        self.total_matches: int = 0
+
+    @staticmethod
+    def _blank() -> dict:
+        return {"count": 0, "matches": 0, "last_run": None, "avg_latency_ms": 0.0}
+
+    @staticmethod
+    def _update(bucket: dict, matched: bool, latency_ms: float) -> None:
+        n = bucket["count"]
+        bucket["count"] = n + 1
+        if matched:
+            bucket["matches"] += 1
+        # incremental average latency
+        bucket["avg_latency_ms"] = (bucket["avg_latency_ms"] * n + latency_ms) / (n + 1)
+        bucket["last_run"] = time.time()
+
+    def record(
+        self,
+        sensor: str,
+        command: str,
+        output: str | None,
+        matched: bool,
+        latency_ms: float,
+    ) -> None:
+        self.total_runs += 1
+        if matched:
+            self.total_matches += 1
+        self._update(self.sensors[sensor], matched, latency_ms)
+        self._update(self.commands[command], matched, latency_ms)
+        if matched and output:
+            self._update(self.outputs[output], True, latency_ms)
+
+    def reset(self) -> None:
+        self.__init__()
+
+    def as_dict(self) -> dict:
+        return {
+            "total_runs": self.total_runs,
+            "total_matches": self.total_matches,
+            "per_sensor": dict(self.sensors),
+            "per_command": dict(self.commands),
+            "per_output": dict(self.outputs),
+        }

backend/app/main.py

@@ -0,0 +1,51 @@
+from __future__ import annotations
+
+import logging
+from pathlib import Path
+
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+
+from app.config import settings
+from app.api import decidron
+
+logging.basicConfig(level=logging.INFO)
+LOG = logging.getLogger(__name__)
+
+STATIC_DIR = Path(__file__).resolve().parent.parent / "static"
+
+app = FastAPI(
+    title="Decidron Network Simulator",
+    version="1.0.0",
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=settings.cors_origin_list or ["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(decidron.router, prefix="/api")
+
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok"}
+
+
+if STATIC_DIR.is_dir():
+    from starlette.staticfiles import StaticFiles  # noqa: F401
+    from starlette.responses import FileResponse
+
+    @app.get("/{full_path:path}")
+    async def serve_spa(request: Request, full_path: str):
+        file_path = STATIC_DIR / full_path
+        if file_path.is_file():
+            return FileResponse(file_path)
+        return FileResponse(STATIC_DIR / "index.html")
+
+    LOG.info("Serving frontend from %s", STATIC_DIR)
+else:
+    LOG.info("No static directory found at %s — frontend not served.", STATIC_DIR)

backend/dev.ps1

@@ -0,0 +1,28 @@
+# Backend dev server with WORKING hot reload on Windows.
+#
+# uvicorn's built-in `--reload` is unreliable on Windows: it detects file
+# changes ("Reloading...") but often fails to actually restart the worker,
+# so it silently keeps serving stale code. This wraps uvicorn in
+# `watchfiles`, which does a clean full process restart on every change.
+#
+# Usage (from the backend/ folder):
+#   .\dev.ps1                       # app.main:app on 127.0.0.1:7860, watching .\app
+#   .\dev.ps1 -Port 8000            # different port
+#   .\dev.ps1 -App pkg.main:app -Watch pkg
+#
+# Requires `watchfiles` (bundled with uvicorn[standard], or `pip install watchfiles`).
+
+param(
+    [string]$App = "app.main:app",
+    [int]$Port = 7860,
+    [string]$Watch = "app",
+    [string]$BindHost = "127.0.0.1"
+)
+
+$ErrorActionPreference = "Stop"
+
+# Prefer the project venv's interpreter if present.
+$py = if (Test-Path ".venv\Scripts\python.exe") { ".venv\Scripts\python.exe" } else { "python" }
+
+Write-Host "watchfiles -> uvicorn $App on http://$BindHost`:$Port (watching .\$Watch)" -ForegroundColor Cyan
+& $py -m watchfiles "$py -m uvicorn $App --host $BindHost --port $Port" $Watch

backend/dev.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+# Backend dev server with hot reload via watchfiles (cross-platform).
+#
+# Equivalent to dev.ps1. uvicorn's built-in --reload is unreliable on
+# Windows; watchfiles does a clean full process restart on every change
+# and works the same everywhere.
+#
+# Usage (from the backend/ folder):
+#   ./dev.sh                      # app.main:app on 127.0.0.1:7860, watching ./app
+#   ./dev.sh app.main:app 8000 app
+#
+# Requires watchfiles (bundled with uvicorn[standard], or pip install watchfiles).
+set -euo pipefail
+
+APP="${1:-app.main:app}"
+PORT="${2:-7860}"
+WATCH="${3:-app}"
+BIND_HOST="${4:-127.0.0.1}"
+
+PY=".venv/bin/python"
+[ -x "$PY" ] || PY="python"
+
+echo "watchfiles -> uvicorn $APP on http://$BIND_HOST:$PORT (watching ./$WATCH)"
+exec "$PY" -m watchfiles "$PY -m uvicorn $APP --host $BIND_HOST --port $PORT" "$WATCH"

backend/requirements.txt

@@ -0,0 +1,6 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.32.0
+pydantic-settings>=2.6.0
+python-dotenv>=1.0.0
+networkx>=3.3
+pytest>=8.0.0

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  app:
+    build: .
+    ports:
+      # Container always listens on 7860 (matches HuggingFace Space
+      # app_port). Host port is overridable via CCAI_HOST_PORT in .env
+      # or the environment so local devs can sidestep port conflicts.
+      - "${CCAI_HOST_PORT:-7860}:7860"
+    env_file:
+      - .env
+    environment:
+      CORS_ORIGINS: "http://localhost:7860,http://localhost:3000"
+    restart: unless-stopped

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-scripts": "5.0.1",
+    "vis-data": "^7.1.9",
+    "vis-network": "^9.1.9"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/png" href="/neon-logo.png" />
+  <meta name="theme-color" content="#6366F1" />
+  <meta name="description" content="CCAI Demo" />
+  <title>CCAI Demo</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

frontend/src/App.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import Header from './components/Header';
+import DecidronSimulator from './components/decidron/DecidronSimulator';
+import { loadSettings, saveSettings } from './utils/settings';
+import './styles/variables.css';
+import './styles/layout.css';
+import './styles/components.css';
+import './styles/ccai.css';
+
+const THEME_KEY = 'decidron-theme';
+
+export default function App() {
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem(THEME_KEY)
+      || (window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  );
+  const [settings, setSettings] = useState(() => loadSettings());
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  useEffect(() => {
+    saveSettings(settings);
+  }, [settings]);
+
+  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+
+  return (
+    <div className="app">
+      <Header
+        theme={theme}
+        onToggleTheme={toggleTheme}
+        settings={settings}
+        onSettingsChange={setSettings}
+      />
+      <main className="app-main">
+        <DecidronSimulator settings={settings} />
+      </main>
+    </div>
+  );
+}

frontend/src/components/Header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+import SettingsMenu from './SettingsMenu';
+
+/**
+ * Slim branded header for the Decidron simulator.
+ */
+export default function Header({ theme, onToggleTheme, settings, onSettingsChange }) {
+  return (
+    <header className="app-header">
+      <div className="header-left">
+        <a href="https://www.neon.ai/" target="_blank" rel="noopener noreferrer" className="header-brand-link">
+          <img src="/neon-logo.png" alt="Neon.ai" className="app-logo" />
+        </a>
+        <h1 className="app-title">
+          <a href="https://www.neon.ai/" target="_blank" rel="noopener noreferrer" className="app-title-link">
+            Neon.ai
+          </a> - Decidron Network Simulator
+        </h1>
+      </div>
+      <div className="header-right">
+        <SettingsMenu settings={settings} onChange={onSettingsChange} />
+        <button
+          type="button"
+          className="btn-sm btn-outline icon-btn"
+          onClick={onToggleTheme}
+          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
+        </button>
+      </div>
+    </header>
+  );
+}

frontend/src/components/SettingsMenu.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Settings } from 'lucide-react';
+import { LAYOUT_MODES, PANEL_KEYS, PANEL_LABELS } from '../utils/settings';
+
+const LAYOUT_OPTIONS = [
+  { id: LAYOUT_MODES.RANDOM, label: 'Random seed (default)', hint: 'Layout may shift on each run' },
+  { id: LAYOUT_MODES.FIXED_SEED, label: 'Fixed seed', hint: 'Same layout every run unless topology changes' },
+  { id: LAYOUT_MODES.EXPLICIT, label: 'Explicit coordinates', hint: 'Fixed positions; physics off' },
+];
+
+export default function SettingsMenu({ settings, onChange }) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDocClick = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [open]);
+
+  const setLayoutMode = (layoutMode) => {
+    onChange({ ...settings, layoutMode });
+  };
+
+  const togglePanel = (key) => {
+    onChange({
+      ...settings,
+      panels: { ...settings.panels, [key]: !settings.panels[key] },
+    });
+  };
+
+  return (
+    <div className="ccai-dropdown-wrap decidron-settings-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className="btn-sm btn-outline icon-btn decidron-settings-trigger"
+        onClick={() => setOpen((v) => !v)}
+        title="Settings"
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <Settings size={16} />
+      </button>
+      {open && (
+        <div className="ccai-dropdown-panel decidron-settings-panel" role="menu">
+          <div className="ccai-dropdown-section">
+            <div className="ccai-dropdown-section-title">Diagram node placement</div>
+            {LAYOUT_OPTIONS.map((opt) => (
+              <label key={opt.id} className="decidron-settings-radio">
+                <input
+                  type="radio"
+                  name="layoutMode"
+                  checked={settings.layoutMode === opt.id}
+                  onChange={() => setLayoutMode(opt.id)}
+                />
+                <span>
+                  <strong>{opt.label}</strong>
+                  <span className="decidron-settings-hint">{opt.hint}</span>
+                </span>
+              </label>
+            ))}
+          </div>
+          <div className="ccai-dropdown-divider" />
+          <div className="ccai-dropdown-section">
+            <div className="ccai-dropdown-section-title">Right-side panels</div>
+            {PANEL_KEYS.map((key) => (
+              <label key={key} className="ccai-dropdown-item decidron-settings-check">
+                <input
+                  type="checkbox"
+                  checked={!!settings.panels[key]}
+                  onChange={() => togglePanel(key)}
+                />
+                <span className="ccai-dropdown-item-text">
+                  <span className="ccai-dropdown-item-name">{PANEL_LABELS[key]}</span>
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/decidron/CommandBuilder.js

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { Plus, Pencil, Trash2, X } from 'lucide-react';
+
+const MATCH_OPS = ['contains', 'equals', 'gt', 'gte', 'lt', 'lte', 'startswith', 'endswith', 'regex'];
+
+function parseMatch(match) {
+  if (typeof match === 'string' && match.includes(':')) {
+    const [op, ...rest] = match.split(':');
+    return { op: MATCH_OPS.includes(op) ? op : 'contains', value: rest.join(':') };
+  }
+  return { op: 'contains', value: match || '' };
+}
+
+const BLANK = { name: '', sensor: '', op: 'gte', matchValue: '', output: '', actuator: '' };
+
+export default function CommandBuilder({ commands, sensors, nodes, onCreate, onDelete }) {
+  const [form, setForm] = useState(BLANK);
+  const [editing, setEditing] = useState(null); // original name being edited
+  const [preservedOps, setPreservedOps] = useState([]); // keep network_ops we don't edit in the UI
+  const [error, setError] = useState(null);
+
+  const actuators = nodes.filter((n) => n.type === 'actuator');
+  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
+
+  const resetForm = () => {
+    setForm(BLANK);
+    setEditing(null);
+    setPreservedOps([]);
+  };
+
+  const startEdit = (c) => {
+    const { op, value } = parseMatch(c.match);
+    setForm({
+      name: c.name,
+      sensor: c.sensor,
+      op,
+      matchValue: value,
+      output: c.output,
+      actuator: c.actuator || '',
+    });
+    setPreservedOps(c.network_ops || []);
+    setEditing(c.name);
+    setError(null);
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!form.name || !form.sensor || form.matchValue === '' || !form.output) {
+      setError('Name, sensor, match value, and output are required.');
+      return;
+    }
+    try {
+      await onCreate({
+        name: form.name,
+        sensor: form.sensor,
+        match: `${form.op}:${form.matchValue}`,
+        output: form.output,
+        actuator: form.actuator || null,
+        network_ops: preservedOps,
+      }, editing);
+      resetForm();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <div className="decidron-panel">
+      <h2>Processing Commands</h2>
+      <p className="panel-hint">
+        Sample commands are loaded below — edit or delete them, or add your
+        own. A command is IF (sensor matches) THEN (emit output, optionally
+        drive an actuator). Commands fire when you run the simulation.
+      </p>
+
+      {error && <div className="decidron-error">{error}</div>}
+
+      <form onSubmit={submit}>
+        <div className="decidron-row">
+          <div className="decidron-field" style={{ flex: 1 }}>
+            <label>Name</label>
+            <input value={form.name} onChange={set('name')} placeholder="HighTempAlert" />
+          </div>
+          <div className="decidron-field" style={{ flex: 1 }}>
+            <label>Sensor</label>
+            <select value={form.sensor} onChange={set('sensor')}>
+              <option value="">Select…</option>
+              {sensors.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}
+            </select>
+          </div>
+        </div>
+        <div className="decidron-row">
+          <div className="decidron-field" style={{ width: 120 }}>
+            <label>Match</label>
+            <select value={form.op} onChange={set('op')}>
+              {MATCH_OPS.map((o) => <option key={o} value={o}>{o}</option>)}
+            </select>
+          </div>
+          <div className="decidron-field" style={{ flex: 1 }}>
+            <label>Value</label>
+            <input value={form.matchValue} onChange={set('matchValue')} placeholder="85" />
+          </div>
+          <div className="decidron-field" style={{ flex: 1 }}>
+            <label>Actuator (optional)</label>
+            <select value={form.actuator} onChange={set('actuator')}>
+              <option value="">None</option>
+              {actuators.map((a) => <option key={a.id} value={a.id}>{a.label}</option>)}
+            </select>
+          </div>
+        </div>
+        <div className="decidron-field">
+          <label>Output</label>
+          <input value={form.output} onChange={set('output')} placeholder="Trigger failsafe review" />
+        </div>
+        {editing && preservedOps.length > 0 && (
+          <p className="panel-hint">
+            This command has {preservedOps.length} network op(s); they are
+            preserved when you save.
+          </p>
+        )}
+        <div className="decidron-row">
+          <button type="submit" className="decidron-btn">
+            {editing
+              ? <><Pencil size={14} style={{ marginRight: 4, verticalAlign: 'middle' }} />Update Command</>
+              : <><Plus size={14} style={{ marginRight: 4, verticalAlign: 'middle' }} />Add Command</>}
+          </button>
+          {editing && (
+            <button type="button" className="decidron-btn secondary" onClick={resetForm}>
+              <X size={14} style={{ marginRight: 4, verticalAlign: 'middle' }} />
+              Cancel
+            </button>
+          )}
+        </div>
+      </form>
+
+      <div style={{ marginTop: '0.75rem' }}>
+        {commands.map((c) => (
+          <div className="decidron-cmd" key={c.name}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.5rem' }}>
+              <span>
+                <strong>{c.name}</strong>: IF <code>{c.sensor}</code> <code>{c.match}</code> THEN {c.output}
+                {c.actuator && <> → drives <code>{c.actuator}</code></>}
+                {c.network_ops && c.network_ops.length > 0 && <> <span className="decidron-chip">{c.network_ops.length} network op(s)</span></>}
+              </span>
+              <span style={{ whiteSpace: 'nowrap' }}>
+                <button type="button" className="decidron-btn secondary" title="Edit" onClick={() => startEdit(c)} style={{ padding: '0.2rem 0.4rem', marginLeft: 4 }}>
+                  <Pencil size={13} />
+                </button>
+                <button type="button" className="decidron-btn secondary" title="Delete" onClick={() => onDelete(c.name)} style={{ padding: '0.2rem 0.4rem', marginLeft: 4 }}>
+                  <Trash2 size={13} />
+                </button>
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/decidron/DecidronSimulator.js

@@ -0,0 +1,191 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { RotateCcw } from 'lucide-react';
+import NetworkDiagram from './NetworkDiagram';
+import SensorInputForm from './SensorInputForm';
+import CommandBuilder from './CommandBuilder';
+import ResultsPanel from './ResultsPanel';
+import StatsTable from './StatsTable';
+import HistoryTimeline from './HistoryTimeline';
+import {
+  getNetwork, getCommands, getStats, getHistory,
+  submitSensorInput, runSimulation, createCommand, deleteCommand, resetSimulation,
+} from '../../utils/api';
+import '../../styles/decidron.css';
+
+const DEFAULT_VALUE = '97';
+
+export default function DecidronSimulator({ settings }) {
+  const [network, setNetwork] = useState(null);
+  const [commands, setCommands] = useState([]);
+  const [stats, setStats] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [results, setResults] = useState([]);
+  const [pending, setPending] = useState([]);
+  const [selected, setSelected] = useState(null); // null = live network
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState(null);
+  // Live sensor-input form values, pre-populated so the user can press
+  // "Run Simulation" immediately and see the network react.
+  const [channel, setChannel] = useState('');
+  const [value, setValue] = useState(DEFAULT_VALUE);
+
+  const refreshAll = useCallback(async () => {
+    try {
+      const [net, cmds, st, hist] = await Promise.all([
+        getNetwork(), getCommands(), getStats(), getHistory(),
+      ]);
+      setNetwork(net);
+      setCommands(cmds);
+      setStats(st);
+      setHistory(hist.snapshots);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+
+  useEffect(() => { refreshAll(); }, [refreshAll]);
+
+  // Default the channel to the first sensor once the network loads.
+  useEffect(() => {
+    if (network && !channel) {
+      const firstSensor = network.nodes.find((n) => n.type === 'sensor');
+      if (firstSensor) setChannel(firstSensor.id);
+    }
+  }, [network, channel]);
+
+  const handleQueue = async () => {
+    if (!channel || value === '') return;
+    setError(null);
+    try {
+      await submitSensorInput(channel, value);
+      setPending((prev) => [...prev, { channel, value }]);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const handleRun = async () => {
+    // Run queued inputs if any; otherwise run the current form value
+    // inline so a single click works on first load.
+    const inputs = pending.length > 0 ? null : [{ channel, value }];
+    if (pending.length === 0 && (!channel || value === '')) return;
+    setRunning(true);
+    setError(null);
+    try {
+      const resp = await runSimulation(inputs);
+      setResults(resp.results);
+      setNetwork(resp.network);
+      setSelected(null);
+      setPending([]);
+      const [st, hist] = await Promise.all([getStats(), getHistory()]);
+      setStats(st);
+      setHistory(hist.snapshots);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const handleCreate = async (cmd, replaceName = null) => {
+    await createCommand(cmd);
+    if (replaceName && replaceName !== cmd.name) {
+      await deleteCommand(replaceName);
+    }
+    setCommands(await getCommands());
+  };
+
+  const handleDelete = async (name) => {
+    setError(null);
+    try {
+      await deleteCommand(name);
+      setCommands(await getCommands());
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const handleReset = async () => {
+    setError(null);
+    try {
+      await resetSimulation();
+      setResults([]);
+      setPending([]);
+      setSelected(null);
+      await refreshAll();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  if (!network) {
+    return (
+      <div className="decidron-app">
+        {error ? <div className="decidron-error">{error}</div> : <p>Loading…</p>}
+      </div>
+    );
+  }
+
+  const sensors = network.nodes.filter((n) => n.type === 'sensor');
+  const shownDiagram = selected ? selected.diagram : network.diagram;
+  const shownVersion = selected ? selected.version : network.version;
+  const { panels, layoutMode } = settings;
+
+  return (
+    <div className="decidron-app">
+      {error && <div className="decidron-error">{error}</div>}
+      <div className="decidron-grid">
+        <div>
+          <div className="decidron-panel">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <h2>Decidron Network (v{shownVersion}{selected ? ' — historical' : ' — live'})</h2>
+              <button type="button" className="decidron-btn secondary" onClick={handleReset}>
+                <RotateCcw size={13} style={{ marginRight: 4, verticalAlign: 'middle' }} />
+                Reset
+              </button>
+            </div>
+            <p className="panel-hint">
+              Sensors (blue) feed coupled Decidrons (purple) that drive
+              actuators (green). Commands can modify this topology.
+            </p>
+            <NetworkDiagram data={shownDiagram} layoutMode={layoutMode} />
+          </div>
+          <HistoryTimeline
+            snapshots={history}
+            selectedVersion={selected ? selected.version : null}
+            onSelect={(s) => setSelected(
+              s.version === network.version ? null : s
+            )}
+          />
+        </div>
+
+        <div>
+          {panels.sensorInput && (
+            <SensorInputForm
+              sensors={sensors}
+              channel={channel}
+              value={value}
+              onChannelChange={setChannel}
+              onValueChange={setValue}
+              pending={pending}
+              onQueue={handleQueue}
+              onRun={handleRun}
+              running={running}
+            />
+          )}
+          {panels.commands && (
+            <CommandBuilder
+              commands={commands}
+              sensors={sensors}
+              nodes={network.nodes}
+              onCreate={handleCreate}
+              onDelete={handleDelete}
+            />
+          )}
+          {panels.results && <ResultsPanel results={results} />}
+          {panels.stats && <StatsTable stats={stats} />}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/decidron/HistoryTimeline.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default function HistoryTimeline({ snapshots, selectedVersion, onSelect }) {
+  return (
+    <div className="decidron-panel">
+      <h2>Network Modification History</h2>
+      <p className="panel-hint">
+        Each topology change is snapshotted. Select a version to view that
+        network state in the diagram above.
+      </p>
+      {(!snapshots || snapshots.length === 0) ? (
+        <p className="panel-hint">No snapshots yet.</p>
+      ) : (
+        snapshots.map((s) => (
+          <div
+            key={s.version}
+            className={`decidron-history-item ${s.version === selectedVersion ? 'active' : ''}`}
+            onClick={() => onSelect(s)}
+          >
+            <strong>v{s.version}</strong> — {s.reason}
+            <span style={{ float: 'right', opacity: 0.6 }}>
+              {new Date(s.timestamp * 1000).toLocaleTimeString()}
+            </span>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

frontend/src/components/decidron/NetworkDiagram.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { Network } from 'vis-network/standalone';
+import { LAYOUT_MODES } from '../../utils/settings';
+
+/** Known node positions for explicit-coordinate mode (vis-network canvas coords). */
+const EXPLICIT_POSITIONS = {
+  temperature: { x: 0, y: -140 },
+  D1: { x: -120, y: 20 },
+  D2: { x: 120, y: 20 },
+  'actuator-1': { x: 0, y: 140 },
+  D3: { x: 220, y: 20 },
+};
+
+function fallbackPosition(nodeId, index) {
+  const angle = (index * 2 * Math.PI) / 8;
+  return { x: Math.cos(angle) * 180, y: Math.sin(angle) * 120 };
+}
+
+function applyLayout(data, layoutMode) {
+  const base = data || { nodes: [], edges: [] };
+  const nodes = (base.nodes || []).map((node, index) => {
+    if (layoutMode !== LAYOUT_MODES.EXPLICIT) return { ...node };
+    const pos = EXPLICIT_POSITIONS[node.id] ?? fallbackPosition(node.id, index);
+    return { ...node, x: pos.x, y: pos.y, fixed: true };
+  });
+  return { nodes, edges: base.edges || [] };
+}
+
+function buildOptions(layoutMode) {
+  const options = {
+    autoResize: true,
+    nodes: {
+      borderWidth: 2,
+      font: { color: '#ffffff', size: 14 },
+    },
+    edges: {
+      arrows: 'to',
+      color: { color: '#9aa3b2', highlight: '#6366F1' },
+      font: { size: 10, color: '#9aa3b2', strokeWidth: 0, align: 'middle' },
+      smooth: { type: 'cubicBezier', roundness: 0.4 },
+    },
+    groups: {
+      sensor: { shape: 'box', color: { background: '#3b82f6', border: '#1d4ed8' } },
+      decidron: { shape: 'hexagon', color: { background: '#8b5cf6', border: '#6d28d9' } },
+      actuator: { shape: 'triangle', color: { background: '#10b981', border: '#047857' } },
+    },
+    interaction: { hover: true, tooltipDelay: 120 },
+  };
+
+  if (layoutMode === LAYOUT_MODES.EXPLICIT) {
+    options.physics = { enabled: false };
+  } else {
+    options.physics = {
+      stabilization: { iterations: 150 },
+      barnesHut: { springLength: 150, gravitationalConstant: -6000 },
+    };
+    if (layoutMode === LAYOUT_MODES.FIXED_SEED) {
+      options.layout = { randomSeed: 42 };
+    }
+    // RANDOM: no randomSeed — vis-network picks a new seed each build (default).
+  }
+
+  return options;
+}
+
+export default function NetworkDiagram({ data, layoutMode = LAYOUT_MODES.RANDOM, height = 380 }) {
+  const containerRef = useRef(null);
+  const networkRef = useRef(null);
+
+  const graphData = useMemo(
+    () => applyLayout(data, layoutMode),
+    [data, layoutMode],
+  );
+
+  useEffect(() => {
+    if (!containerRef.current) return undefined;
+    networkRef.current = new Network(
+      containerRef.current,
+      graphData,
+      buildOptions(layoutMode),
+    );
+    return () => {
+      if (networkRef.current) {
+        networkRef.current.destroy();
+        networkRef.current = null;
+      }
+    };
+  }, [graphData, layoutMode]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="decidron-diagram"
+      style={{ height, width: '100%' }}
+    />
+  );
+}

frontend/src/components/decidron/ResultsPanel.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default function ResultsPanel({ results }) {
+  return (
+    <div className="decidron-panel">
+      <h2>Latest Run Results</h2>
+      {(!results || results.length === 0) ? (
+        <p className="panel-hint">No runs yet. Queue a sensor input and run the simulation.</p>
+      ) : (
+        <table className="decidron-table">
+          <thead>
+            <tr>
+              <th>Command</th>
+              <th>Sensor</th>
+              <th>Value</th>
+              <th>Result</th>
+              <th>Output</th>
+              <th>Net ops</th>
+            </tr>
+          </thead>
+          <tbody>
+            {results.map((r, i) => (
+              <tr key={i}>
+                <td>{r.command}</td>
+                <td>{r.sensor}</td>
+                <td>{r.value}</td>
+                <td>
+                  <span className={`decidron-chip ${r.matched ? 'match' : 'nomatch'}`}>
+                    {r.matched ? 'matched' : 'no match'}
+                  </span>
+                </td>
+                <td>{r.output || '—'}{r.actuator ? ` → ${r.actuator}` : ''}</td>
+                <td>{r.network_ops_applied}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

frontend/src/components/decidron/SensorInputForm.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Activity, Play } from 'lucide-react';
+
+export default function SensorInputForm({
+  sensors, channel, value, onChannelChange, onValueChange,
+  pending, onQueue, onRun, running,
+}) {
+  const handleQueue = (e) => {
+    e.preventDefault();
+    if (!channel || value === '') return;
+    onQueue();
+  };
+
+  const canRun = !running && (pending.length > 0 || (channel && value !== ''));
+  const runLabel = pending.length > 0
+    ? `Run Simulation (${pending.length} queued)`
+    : 'Run Simulation';
+
+  return (
+    <div className="decidron-panel">
+      <h2>Sensor Input</h2>
+      <p className="panel-hint">
+        A reading is pre-filled — just press <strong>Run Simulation</strong>
+        to see the network react. Use <strong>Queue</strong> to stack
+        several inputs before running.
+      </p>
+      <form onSubmit={handleQueue}>
+        <div className="decidron-row">
+          <div className="decidron-field" style={{ flex: 1 }}>
+            <label>Channel</label>
+            <select value={channel} onChange={(e) => onChannelChange(e.target.value)}>
+              {sensors.map((s) => (
+                <option key={s.id} value={s.id}>{s.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="decidron-field" style={{ flex: 1 }}>
+            <label>Value</label>
+            <input
+              type="text"
+              value={value}
+              placeholder="e.g. 97"
+              onChange={(e) => onValueChange(e.target.value)}
+            />
+          </div>
+          <button type="submit" className="decidron-btn secondary">
+            <Activity size={14} style={{ marginRight: 4, verticalAlign: 'middle' }} />
+            Queue
+          </button>
+        </div>
+      </form>
+
+      {pending.length > 0 && (
+        <ul className="decidron-pending">
+          {pending.map((p, i) => (
+            <li key={i}>{p.channel}: {p.value}</li>
+          ))}
+        </ul>
+      )}
+
+      <div className="decidron-row" style={{ marginTop: '0.5rem' }}>
+        <button
+          type="button"
+          className="decidron-btn"
+          onClick={onRun}
+          disabled={!canRun}
+        >
+          <Play size={14} style={{ marginRight: 4, verticalAlign: 'middle' }} />
+          {running ? 'Running…' : runLabel}
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/decidron/StatsTable.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+function Section({ title, data }) {
+  const rows = Object.entries(data || {});
+  if (rows.length === 0) return null;
+  return (
+    <>
+      <tr><th colSpan={4} style={{ paddingTop: '0.6rem' }}>{title}</th></tr>
+      {rows.map(([key, s]) => (
+        <tr key={title + key}>
+          <td>{key}</td>
+          <td>{s.count}</td>
+          <td>{s.matches}</td>
+          <td>{s.avg_latency_ms != null ? s.avg_latency_ms.toFixed(3) : '—'}</td>
+        </tr>
+      ))}
+    </>
+  );
+}
+
+export default function StatsTable({ stats }) {
+  const empty = !stats || stats.total_runs === 0;
+  return (
+    <div className="decidron-panel">
+      <h2>Performance Statistics</h2>
+      {empty ? (
+        <p className="panel-hint">Run the simulation to collect statistics.</p>
+      ) : (
+        <>
+          <p className="panel-hint">
+            {stats.total_runs} command evaluation(s), {stats.total_matches} match(es).
+          </p>
+          <table className="decidron-table">
+            <thead>
+              <tr><th>Key</th><th>Runs</th><th>Matches</th><th>Avg ms</th></tr>
+            </thead>
+            <tbody>
+              <Section title="Per Sensor" data={stats.per_sensor} />
+              <Section title="Per Command" data={stats.per_command} />
+              <Section title="Per Output" data={stats.per_output} />
+            </tbody>
+          </table>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/styles/ccai.css

@@ -0,0 +1,1884 @@
+/* ════════════════════════════════════════════════════════════════
+   Collaborative Conversational AI (CCAI) Demo - additive styles on
+   top of LLMChats3 baseline.
+   Anything new (multi-participant sidebar, dropdown, expert modal,
+   table view, orchestrator banners, failsafe banner) lives here.
+   ════════════════════════════════════════════════════════════════ */
+
+
+/* ── Header dropdown (Participants) ────────────────────────────── */
+
+.ccai-dropdown-wrap { position: relative; }
+
+.ccai-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ccai-dropdown-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  width: 320px;
+  max-height: 70vh;
+  overflow-y: auto;
+  background: var(--card-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  box-shadow: var(--shadow-md);
+  padding: 10px;
+  z-index: 60;
+}
+
+.ccai-dropdown-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.ccai-dropdown-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  padding: 4px 6px;
+}
+
+.ccai-dropdown-divider {
+  height: 1px;
+  background: var(--border-muted);
+  margin: 4px -10px;
+}
+
+.ccai-dropdown-empty {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-style: italic;
+  padding: 4px 8px;
+}
+
+.ccai-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.ccai-dropdown-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.ccai-dropdown-item input[type="checkbox"] {
+  margin: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.ccai-dropdown-item-checked {
+  background: var(--accent-light);
+}
+
+.ccai-dropdown-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ccai-dropdown-item-disabled input[type="checkbox"] {
+  cursor: not-allowed;
+}
+
+.ccai-dropdown-item-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ccai-dropdown-item-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-transform: capitalize;
+}
+
+.ccai-dropdown-item-sub {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.ccai-dropdown-create-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  margin-top: 4px;
+  border: 1px dashed var(--accent-primary);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--accent-primary);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.ccai-dropdown-create-btn:hover {
+  background: var(--accent-light);
+}
+
+
+/* ── Sidebar: participants ─────────────────────────────────────── */
+
+.ccai-sidebar {
+  gap: 12px;
+}
+
+.ccai-sidebar-header { gap: 4px; display: flex; flex-direction: column; }
+.ccai-sidebar-help {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.ccai-participant-card {
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  background: var(--card-bg);
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.ccai-participant-card-off {
+  opacity: 0.55;
+  background: var(--bg-secondary);
+}
+
+.ccai-participant-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ccai-participant-row-secondary {
+  justify-content: flex-end;
+}
+
+.ccai-accordion-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.ccai-accordion-chevron:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.ccai-participant-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: capitalize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ccai-participant-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ccai-participant-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px 0 2px;
+  border-top: 1px solid var(--border-muted);
+}
+
+.ccai-participant-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ccai-participant-field-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-tertiary);
+}
+
+.ccai-participant-field-value {
+  font-size: 12px;
+  color: var(--text-secondary);
+  word-break: break-word;
+}
+
+.ccai-participant-prompt {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-muted);
+  border-radius: 6px;
+  padding: 8px 10px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+/* On/off slider switch */
+.ccai-toggle {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+}
+
+.ccai-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.ccai-toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background: var(--accent-primary);
+  border-radius: 10px;
+  transition: background 0.2s;
+}
+
+.ccai-toggle-slider::before {
+  content: '';
+  position: absolute;
+  height: 14px;
+  width: 14px;
+  left: 19px;
+  top: 3px;
+  background: #fff;
+  border-radius: 50%;
+  transition: left 0.2s;
+}
+
+.ccai-toggle input:not(:checked) + .ccai-toggle-slider {
+  background: var(--text-muted);
+}
+
+.ccai-toggle input:not(:checked) + .ccai-toggle-slider::before {
+  left: 3px;
+}
+
+.ccai-remove-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid #DC2626;
+  border-radius: 6px;
+  background: transparent;
+  color: #DC2626;
+  font-size: 11px;
+}
+
+.ccai-remove-btn:hover { background: #FEE2E2; }
+:root[data-theme="dark"] .ccai-remove-btn:hover { background: rgba(220, 38, 38, 0.15); }
+
+.ccai-reenable-btn { font-size: 11px; padding: 4px 8px; }
+
+
+/* ── Expert Persona modal ──────────────────────────────────────── */
+
+.ccai-expert-modal {
+  width: min(760px, 92vw);
+  max-height: 88vh;
+}
+
+.ccai-expert-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.ccai-expert-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ccai-expert-field label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ccai-expert-field input,
+.ccai-expert-field select,
+.ccai-expert-field textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.ccai-tab-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-bottom: 1px solid var(--border-primary);
+  padding-bottom: 6px;
+}
+
+.ccai-tab-btn {
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ccai-tab-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.ccai-tab-btn-active {
+  background: var(--accent-light);
+  color: var(--accent-primary);
+  border-color: var(--accent-primary);
+}
+
+.ccai-tab-spacer { flex: 1; }
+
+.ccai-role-style {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.ccai-expert-freeform,
+.ccai-expert-structured {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ccai-expert-freeform .freeform-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.ccai-expert-structured textarea {
+  resize: vertical;
+}
+
+.ccai-expert-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ccai-expert-prompt {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ccai-expert-prompt label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ccai-expert-prompt textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.ccai-expert-error {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  color: var(--error-text);
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.ccai-expert-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid var(--border-primary);
+  padding-top: 12px;
+}
+
+
+/* ── Table view ────────────────────────────────────────────────── */
+
+.ccai-table-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.ccai-table-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  width: min(1100px, 95vw);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.ccai-table-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ccai-table-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ccai-table-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+}
+
+.ccai-table-question,
+.ccai-table-final {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.ccai-table-question strong,
+.ccai-table-final strong {
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+
+.ccai-table-scroll {
+  overflow: auto;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+}
+
+.ccai-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  color: var(--text-primary);
+  table-layout: fixed;
+}
+
+.ccai-table th,
+.ccai-table td {
+  border: 1px solid var(--border-primary);
+  padding: 8px 10px;
+  vertical-align: top;
+  text-align: left;
+}
+
+.ccai-table th {
+  background: var(--bg-secondary);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--text-tertiary);
+  position: sticky;
+  top: 0;
+}
+
+.ccai-table th:first-child,
+.ccai-table td:first-child {
+  width: 15%;
+}
+
+.ccai-table th:nth-child(n + 2),
+.ccai-table td:nth-child(n + 2) {
+  width: 21.25%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.ccai-table-name {
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.ccai-table-name small {
+  display: block;
+  font-weight: 400;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+
+/* ── Credential Summary modal ──────────────────────────────────────
+   Surfaces the orchestrator's per-participant assessment built after
+   Phase 1 (concurrent per participant). Reuses the table
+   modal's overlay/card chrome for visual consistency.
+   ──────────────────────────────────────────────────────────────── */
+
+.ccai-credentials-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.ccai-credentials-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  width: min(880px, 95vw);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.ccai-credentials-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ccai-credentials-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ccai-credentials-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+  max-width: 560px;
+}
+
+.ccai-rate-limit-card {
+  width: min(480px, 92vw);
+}
+
+.ccai-rate-limit-body {
+  padding: 16px 20px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.ccai-rate-limit-body a {
+  color: var(--accent-primary);
+  text-decoration: none;
+}
+
+.ccai-rate-limit-body a:hover {
+  text-decoration: underline;
+}
+
+.ccai-rate-limit-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 20px 16px;
+  border-top: 1px solid var(--border-primary);
+}
+
+.ccai-credentials-question {
+  margin: 0 20px;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.ccai-credentials-question strong {
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+
+.ccai-credentials-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.ccai-credentials-empty {
+  padding: 24px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  border: 1px dashed var(--border-primary);
+  border-radius: 8px;
+}
+
+.ccai-credential-card {
+  padding: 12px 14px;
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  background: var(--bg-secondary);
+}
+
+.ccai-credential-card-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.ccai-credential-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ccai-credibility-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.ccai-credibility-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-tertiary);
+}
+
+.ccai-credibility-bar {
+  width: 120px;
+  height: 6px;
+  background: var(--border-primary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.ccai-credibility-fill {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--accent-primary, #6366F1),
+    var(--accent-primary, #6366F1)
+  );
+  transition: width 0.3s ease;
+}
+
+.ccai-credibility-num {
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+  min-width: 32px;
+  text-align: right;
+}
+
+.ccai-credential-row {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.ccai-credential-row-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-tertiary);
+  font-weight: 600;
+  padding-top: 2px;
+}
+
+.ccai-credential-row-value {
+  color: var(--text-primary);
+}
+
+@media (max-width: 600px) {
+  .ccai-credentials-card {
+    max-height: 100vh;
+    border-radius: 0;
+    width: 100vw;
+  }
+  .ccai-credential-row {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+  .ccai-credibility-bar {
+    width: 80px;
+  }
+}
+
+
+/* ── Orchestrator messages ─────────────────────────────────────── */
+
+.ccai-orchestrator-msg {
+  text-align: center;
+  font-style: italic;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-primary);
+  border-radius: 12px;
+  padding: 10px 16px;
+  margin: 6px auto;
+  max-width: 720px;
+  font-size: 13px;
+}
+
+.ccai-orchestrator-msg-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 700;
+  color: var(--text-tertiary);
+  margin-bottom: 4px;
+  font-style: normal;
+}
+
+.ccai-orchestrator-msg-body p:last-child { margin-bottom: 0; }
+
+.ccai-orchestrator-msg-report {
+  background: var(--accent-light);
+  border-style: solid;
+  border-color: var(--accent-primary);
+  font-style: normal;
+  text-align: left;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.ccai-orchestrator-msg-report .ccai-orchestrator-msg-label {
+  color: var(--accent-primary);
+}
+
+
+/* ── Failsafe pause banner ─────────────────────────────────────── */
+
+.ccai-failsafe-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #FEF3C7;
+  border: 1px solid #FCD34D;
+  border-radius: 12px;
+  padding: 12px 14px;
+  color: #92400E;
+  margin: 8px 0;
+}
+
+:root[data-theme="dark"] .ccai-failsafe-banner {
+  background: rgba(217, 119, 6, 0.15);
+  border-color: rgba(252, 211, 77, 0.5);
+  color: #FBBF24;
+}
+
+.ccai-failsafe-banner > div:first-child {
+  flex: 1;
+}
+
+.ccai-failsafe-title {
+  font-weight: 700;
+  font-size: 13px;
+  margin-bottom: 2px;
+}
+
+.ccai-failsafe-text {
+  font-size: 12px;
+  opacity: 0.85;
+}
+
+
+/* ── Active-question chip (next to Stop Chat) ─────────────────── */
+
+/* The chip caps at roughly two lines tall and scrolls vertically for
+   longer prompts. The full prompt is also exposed via the title
+   attribute for hover tooltips. */
+.ccai-active-question {
+  flex: 1;
+  min-width: 0;
+  max-height: 60px;
+  padding: 8px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.4;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.ccai-active-question-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-tertiary);
+  margin-right: 6px;
+}
+
+.ccai-active-question-text {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+
+/* ── Conversation threading & addressing cues ─────────────────────
+   Lightweight visual aids that help a human reader follow who is
+   speaking to whom. Backed by the message's `addressed_to` field
+   (one participant id) and `replying_to` field (list of asker ids
+   the speaker had open threads with at turn start).
+   ────────────────────────────────────────────────────────────────── */
+
+/* Indent + thread line when a participant message is a direct reply
+   to the immediately previous participant message. We don't fully
+   nest replies because N-participant chats turn into trees fast;
+   this is a single-level visual hint, not full threading. */
+.ccai-message-row.ccai-message-row-reply {
+  margin-left: 28px;
+  padding-left: 12px;
+  position: relative;
+}
+
+.ccai-message-row.ccai-message-row-reply::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--border-primary);
+  opacity: 0.6;
+}
+
+/* "Replying to: X, Y" pill above the bubble, colored with the
+   speaker's tone. Mirrors the pending-thread list the orchestrator
+   showed the speaker at turn-start. Stays small and unobtrusive. */
+.ccai-replying-to-pill {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid;
+  background: var(--card-bg);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* "→ Addressee" chip in the speaker line. The addressee name is a
+   clickable button that scrolls the chat to that participant's most
+   recent message before this one. */
+.ccai-addressee-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+.ccai-addressee-arrow {
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0.7;
+}
+
+.ccai-addressee-link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+  transition: text-decoration-style 0.1s ease, opacity 0.1s ease;
+}
+
+.ccai-addressee-link:hover {
+  text-decoration-style: solid;
+  opacity: 1;
+}
+
+.ccai-addressee-link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Flash highlight applied to the scroll-target when the user clicks an
+   addressee chip. Makes the destination obvious for a beat. */
+.ccai-flash-highlight .message-bubble {
+  animation: ccai-flash 1.4s ease-out;
+}
+
+@keyframes ccai-flash {
+  0% {
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.55);
+  }
+  60% {
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+  }
+}
+
+
+/* ── Stepper ───────────────────────────────────────────────────── */
+
+.ccai-stepper-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* 22px left padding matches .dev-panel-row indentation so the
+     stepper hangs under the "Max participants" category label
+     consistently with every other category's items. */
+  padding: 4px 10px 8px 22px;
+}
+
+.ccai-stepper-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ccai-stepper-val {
+  font-weight: 600;
+  min-width: 20px;
+  text-align: center;
+}
+
+
+/* ── Responsive tweaks ─────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .ccai-expert-row {
+    grid-template-columns: 1fr;
+  }
+  .ccai-dropdown-panel {
+    width: min(320px, calc(100vw - 24px));
+  }
+}
+
+@media (max-width: 600px) {
+  .ccai-table-card {
+    max-height: 100vh;
+    border-radius: 0;
+    width: 100vw;
+  }
+}
+
+
+/* ── Conversation limits modal ────────────────────────────────────
+   Re-uses .ccai-credentials-overlay/.ccai-credentials-card/.ccai-
+   credentials-header/.ccai-credentials-body for the shell so the
+   look matches the credential summary modal. The classes below
+   style the per-section list and per-field stepper row. */
+
+.ccai-limits-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+}
+
+.ccai-limits-group + .ccai-limits-group {
+  margin-top: 4px;
+}
+
+.ccai-limits-group-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border-primary);
+  padding-bottom: 6px;
+  margin-bottom: 2px;
+}
+
+.ccai-limit-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.ccai-limit-row + .ccai-limit-row {
+  border-top: 1px dashed var(--border-primary);
+  padding-top: 10px;
+}
+
+.ccai-limit-row-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.ccai-limit-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ccai-limit-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ccai-limit-input {
+  width: 64px;
+  padding: 4px 6px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 14px;
+  text-align: right;
+}
+
+.ccai-limit-range {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.ccai-limit-reset {
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+  padding: 2px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.ccai-limit-reset:hover {
+  background: var(--card-bg);
+  color: var(--text-primary);
+}
+
+.ccai-limit-help {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+
+/* ── Auto-select participants (dropdown + sidebar placeholder) ──── */
+
+.ccai-dropdown-autoselect {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.ccai-dropdown-autoselect:hover {
+  border-color: var(--accent-primary, var(--text-primary));
+}
+
+.ccai-dropdown-autoselect-on {
+  background: var(--accent-primary, var(--bg-primary));
+  color: var(--bg-primary, var(--text-primary));
+  border-color: transparent;
+}
+
+.ccai-dropdown-autoselect-help {
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  padding: 6px 4px 0;
+  line-height: 1.4;
+}
+
+.ccai-dropdown-section-muted {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.ccai-sidebar-autoselect-empty {
+  margin: 12px;
+  padding: 12px;
+  border: 1px dashed var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  line-height: 1.45;
+}
+
+.ccai-sidebar-autoselect-empty strong {
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+
+/* ── Prompt catalog modal ─────────────────────────────────────────
+   Re-uses .ccai-credentials-overlay/.ccai-credentials-card shell.
+   The classes below style the per-group sections and per-item
+   purpose / variables / template blocks. */
+
+.ccai-prompt-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+}
+
+.ccai-prompt-group + .ccai-prompt-group {
+  margin-top: 4px;
+}
+
+.ccai-prompt-group-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border-primary);
+  padding-bottom: 6px;
+}
+
+.ccai-prompt-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 0;
+}
+
+.ccai-prompt-item + .ccai-prompt-item {
+  border-top: 1px dashed var(--border-primary);
+  padding-top: 12px;
+}
+
+.ccai-prompt-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ccai-prompt-item-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ccai-prompt-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  padding: 3px 8px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.ccai-prompt-copy-btn:hover {
+  background: var(--card-bg);
+  color: var(--text-primary);
+}
+
+.ccai-prompt-purpose {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.ccai-prompt-vars {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.ccai-prompt-vars code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-size: 11.5px;
+}
+
+.ccai-prompt-template {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  overflow-x: auto;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+
+/* ════════════════════════════════════════════════════════════════
+   Human Participant
+   Styles for the in-the-loop human: add/edit modal, sidebar entry,
+   in-chat input slot, lower-screen attention cue, green-accent bubble,
+   and the inline edit affordance on the human's credential row.
+   ════════════════════════════════════════════════════════════════ */
+
+/* ── Add a Human Participant button (header) ───────────────────── */
+
+.ccai-human-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+/* Header "Table View" button — links to the same Summary Table modal
+   the Settings menu opens, so users don't have to dig through a menu
+   to view it during/after a chat. */
+.ccai-table-view-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.ccai-human-add-btn-active {
+  border-color: #16A34A;
+  color: #16A34A;
+}
+
+[data-theme="dark"] .ccai-human-add-btn-active {
+  border-color: #4ADE80;
+  color: #4ADE80;
+}
+
+/* ── Human Participant modal (Add / Edit) ──────────────────────── */
+
+.ccai-human-modal-card {
+  width: min(640px, 92vw);
+}
+
+.ccai-human-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 20px;
+}
+
+.ccai-human-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ccai-human-field-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ccai-human-input {
+  padding: 8px 10px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.ccai-human-input:focus {
+  outline: none;
+  border-color: #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
+}
+
+.ccai-human-summary-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ccai-human-summary {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 160px;
+  box-sizing: border-box;
+}
+
+.ccai-human-summary:focus {
+  outline: none;
+  border-color: #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
+}
+
+.ccai-human-summary-help {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.ccai-human-ai-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.ccai-human-ai-panel {
+  border: 1px solid #16A34A;
+  background: rgba(22, 163, 74, 0.04);
+  border-radius: 8px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+[data-theme="dark"] .ccai-human-ai-panel {
+  background: rgba(74, 222, 128, 0.06);
+  border-color: #4ADE80;
+}
+
+.ccai-human-ai-counter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: 600;
+  color: #16A34A;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+[data-theme="dark"] .ccai-human-ai-counter {
+  color: #4ADE80;
+}
+
+.ccai-human-ai-stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.ccai-human-ai-stop:hover {
+  border-color: var(--text-secondary);
+  color: var(--text-primary);
+}
+
+.ccai-human-ai-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12.5px;
+  padding-bottom: 6px;
+  border-bottom: 1px dashed var(--border-primary);
+}
+
+.ccai-human-ai-q {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.ccai-human-ai-a {
+  color: var(--text-primary);
+}
+
+.ccai-human-ai-current-q {
+  font-size: 13px;
+  color: var(--text-primary);
+  background: var(--card-bg);
+  border-left: 3px solid #16A34A;
+  padding: 6px 10px;
+  border-radius: 4px;
+}
+
+.ccai-human-ai-answer {
+  width: 100%;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 13px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+.ccai-human-ai-answer:focus {
+  outline: none;
+  border-color: #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
+}
+
+.ccai-human-ai-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ccai-human-error {
+  font-size: 12.5px;
+  color: #DC2626;
+  background: rgba(220, 38, 38, 0.08);
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+
+.ccai-human-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 20px 16px 20px;
+  border-top: 1px solid var(--border-primary);
+}
+
+.ccai-human-modal-footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ccai-human-remove {
+  color: #DC2626;
+  border-color: rgba(220, 38, 38, 0.4);
+}
+
+.ccai-human-remove:hover {
+  background: rgba(220, 38, 38, 0.06);
+  border-color: #DC2626;
+}
+
+/* ── Sidebar: Human participant card ──────────────────────────── */
+
+.ccai-participant-card-human {
+  border-left: 4px solid #16A34A;
+}
+
+[data-theme="dark"] .ccai-participant-card-human {
+  border-left-color: #4ADE80;
+}
+
+.ccai-participant-human-tag {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #16A34A;
+  background: rgba(22, 163, 74, 0.1);
+  border-radius: 4px;
+}
+
+[data-theme="dark"] .ccai-participant-human-tag {
+  color: #4ADE80;
+  background: rgba(74, 222, 128, 0.12);
+}
+
+/* ── In-chat human input slot ─────────────────────────────────── */
+
+.ccai-human-slot {
+  display: flex;
+  align-items: stretch;
+  margin: 16px 0;
+  border-radius: 10px;
+  background: var(--card-bg);
+  border: 2px solid #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
+  overflow: hidden;
+  animation: ccai-human-slot-pop 0.25s ease-out;
+}
+
+@keyframes ccai-human-slot-pop {
+  from { transform: scale(0.985); opacity: 0; }
+  to   { transform: scale(1);     opacity: 1; }
+}
+
+.ccai-human-slot-accent {
+  width: 6px;
+  background: #16A34A;
+  flex-shrink: 0;
+  animation: ccai-human-pulse-accent 1.6s ease-in-out infinite;
+}
+
+@keyframes ccai-human-pulse-accent {
+  0%   { background: #16A34A; }
+  50%  { background: #4ADE80; }
+  100% { background: #16A34A; }
+}
+
+.ccai-human-slot-body {
+  flex: 1;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ccai-human-slot-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.ccai-human-slot-name {
+  font-weight: 700;
+  color: #16A34A;
+}
+
+[data-theme="dark"] .ccai-human-slot-name {
+  color: #4ADE80;
+}
+
+.ccai-human-slot-pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #16A34A;
+  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
+  animation: ccai-human-pulse-dot 1.4s ease-in-out infinite;
+}
+
+@keyframes ccai-human-pulse-dot {
+  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
+  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
+}
+
+.ccai-human-slot-prompt {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.ccai-human-slot-context {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  background: rgba(22, 163, 74, 0.06);
+  border-left: 3px solid rgba(22, 163, 74, 0.6);
+  padding: 6px 10px;
+  border-radius: 4px;
+}
+
+.ccai-human-slot-textarea {
+  width: 100%;
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.45;
+  padding: 10px 12px;
+  resize: vertical;
+  min-height: 80px;
+  box-sizing: border-box;
+}
+
+.ccai-human-slot-textarea:focus {
+  outline: none;
+  border-color: #16A34A;
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
+}
+
+.ccai-human-slot-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ccai-human-slot-hint {
+  font-size: 11.5px;
+  color: var(--text-tertiary);
+}
+
+.ccai-human-slot-actions-right {
+  display: flex;
+  gap: 8px;
+}
+
+/* ── Bubble accent for the human's posted messages ────────────── */
+
+.ccai-message-row-human .ccai-bubble {
+  border-left: 4px solid #16A34A !important;
+  padding-left: 12px;
+}
+
+[data-theme="dark"] .ccai-message-row-human .ccai-bubble {
+  border-left-color: #4ADE80 !important;
+}
+
+/* ── Fixed-position lower-screen "waiting for your input" cue ──── */
+
+.ccai-human-indicator {
+  position: fixed;
+  bottom: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  background: #16A34A;
+  color: #ffffff;
+  border: none;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  box-shadow:
+    0 8px 22px rgba(22, 163, 74, 0.35),
+    0 0 0 0 rgba(22, 163, 74, 0.5);
+  cursor: pointer;
+  z-index: 80;
+  animation: ccai-human-indicator-pulse 1.8s ease-in-out infinite;
+}
+
+[data-theme="dark"] .ccai-human-indicator {
+  background: #22C55E;
+}
+
+@keyframes ccai-human-indicator-pulse {
+  0%   { box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35), 0 0 0 0   rgba(22, 163, 74, 0.5); }
+  60%  { box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35), 0 0 0 14px rgba(22, 163, 74, 0); }
+  100% { box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35), 0 0 0 0   rgba(22, 163, 74, 0); }
+}
+
+.ccai-human-indicator:hover {
+  background: #15803D;
+}
+
+[data-theme="dark"] .ccai-human-indicator:hover {
+  background: #16A34A;
+}
+
+.ccai-human-indicator-arrow {
+  animation: ccai-human-indicator-arrow-bob 1.4s ease-in-out infinite;
+}
+
+@keyframes ccai-human-indicator-arrow-bob {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(3px); }
+}
+
+/* ── CredentialSummaryModal: human row + inline edit ──────────── */
+
+.ccai-credential-card-human {
+  border-left: 4px solid #16A34A;
+}
+
+[data-theme="dark"] .ccai-credential-card-human {
+  border-left-color: #4ADE80;
+}
+
+.ccai-credential-human-tag {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #16A34A;
+  background: rgba(22, 163, 74, 0.1);
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+[data-theme="dark"] .ccai-credential-human-tag {
+  color: #4ADE80;
+  background: rgba(74, 222, 128, 0.12);
+}
+
+.ccai-credential-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.ccai-credential-card-editing {
+  background: rgba(22, 163, 74, 0.04);
+}
+
+[data-theme="dark"] .ccai-credential-card-editing {
+  background: rgba(74, 222, 128, 0.06);
+}
+
+.ccai-credential-edit-name {
+  padding: 4px 8px;
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  margin-left: 0;
+}
+
+.ccai-credential-row-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ccai-credential-row-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  background: var(--card-bg);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 13px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.ccai-credential-row-input-num {
+  width: 90px;
+}
+
+.ccai-credential-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+

frontend/src/styles/components.css

@@ -0,0 +1,1455 @@
+/* ── Sidebar: LLM Selector ─────────────────────────────────────── */
+
+.sidebar-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-align: center;
+  padding-bottom: 8px;
+  border-bottom: 2px solid var(--accent-primary);
+  margin: 0;
+}
+
+.sidebar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.selector-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--border-primary);
+  margin: 0;
+}
+
+.selector-title-icon {
+  height: 16px;
+  width: auto;
+}
+
+.provider-group {
+  margin-bottom: 0;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.provider-group.comp-group {
+  background: var(--comp-bg);
+}
+
+/* ── Neon model cards (matching LLMComparisons) ──────────────────── */
+
+.neon-model-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.neon-model-card {
+  border: 1px solid var(--neon-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--neon-bg);
+}
+
+.neon-model-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.neon-model-header:hover {
+  background: var(--card-hover);
+}
+
+.neon-model-info {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.neon-model-name {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.neon-model-version {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.neon-model-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-tertiary);
+}
+
+.badge.badge-neon {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--neon-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--neon-border);
+}
+
+.neon-persona-list {
+  border-top: 1px solid var(--border-muted);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.neon-persona-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  border-radius: 6px;
+  border: none;
+  background: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+}
+
+.neon-persona-item:hover {
+  background: var(--card-hover);
+}
+
+.persona-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.persona-name-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-transform: capitalize;
+}
+
+.persona-prompt-preview {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.4;
+  margin-top: 2px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.provider-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  padding: 10px 12px;
+  border: none;
+  background: none;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  transition: background 0.15s;
+}
+
+.provider-accordion-header:hover {
+  background: var(--card-hover);
+}
+
+.provider-accordion-title {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.provider-accordion-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-tertiary);
+}
+
+.provider-model-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background: var(--accent-light);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.provider-group .model-list {
+  padding: 4px;
+  border-top: 1px solid var(--border-muted);
+}
+
+.model-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.model-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 6px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-primary);
+  font-size: 13px;
+  transition: all 0.15s;
+  text-align: left;
+}
+
+.model-btn:hover {
+  background: var(--card-hover);
+}
+
+.model-btn .model-name {
+  flex: 1;
+  min-width: 0;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-btn .model-params {
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Selection indicator: circle */
+.select-indicator {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--text-secondary);
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.select-indicator.selected-a {
+  border-color: var(--speaker-a-color);
+  background: var(--speaker-a-color);
+}
+
+.select-indicator.selected-b {
+  border-color: var(--speaker-b-color);
+  background: var(--speaker-b-color);
+}
+
+/* Double-select ring for "same LLM both sides" */
+.select-indicator.double-selected {
+  box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--speaker-a-color);
+  border-color: var(--speaker-b-color);
+  background: linear-gradient(135deg, var(--speaker-a-color), var(--speaker-b-color));
+}
+
+.selection-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: #fff;
+}
+
+
+/* ── Accordion ─────────────────────────────────────────────────── */
+
+.accordion {
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  background: var(--card-bg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  background: var(--bg-secondary);
+  border: none;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: background 0.15s;
+}
+
+.accordion-header:hover {
+  background: var(--bg-tertiary);
+}
+
+.accordion-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.35s ease, padding 0.35s ease;
+  padding: 0 20px;
+}
+
+.accordion-body.open {
+  max-height: calc(100vh - 260px);
+  overflow-y: auto;
+  padding: 16px 20px 20px;
+}
+
+.persona-panels {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.persona-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.persona-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  padding-bottom: 8px;
+  border-bottom: 2px solid var(--border-primary);
+}
+
+.persona-panel:first-child .persona-panel-header {
+  border-color: var(--speaker-a-color);
+}
+
+.persona-panel:last-child .persona-panel-header {
+  border-color: var(--speaker-b-color);
+}
+
+.persona-field label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.persona-field input,
+.persona-field textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+  transition: border-color 0.15s;
+  resize: vertical;
+}
+
+.persona-field input:focus,
+.persona-field textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.persona-field textarea {
+  min-height: 80px;
+}
+
+.persona-field textarea.tall {
+  min-height: 120px;
+}
+
+.persona-field input::placeholder,
+.persona-field textarea::placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.freeform-label-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.freeform-label-row label {
+  flex: 1;
+}
+
+.upload-btn {
+  flex-shrink: 0;
+}
+
+.freeform-textarea {
+  min-height: 260px;
+  resize: vertical;
+}
+
+/* responsive rules consolidated below */
+
+/* ── Chat Area ─────────────────────────────────────────────────── */
+
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 0;
+  overflow-y: auto;
+}
+
+.chat-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 15px;
+  font-style: italic;
+}
+
+/* ── Message Bubbles ───────────────────────────────────────────── */
+
+.message-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 8px;
+  animation: fadeSlideIn 0.3s ease;
+}
+
+.message-row.speaker-a {
+  flex-direction: row;
+}
+
+.message-row.speaker-b {
+  flex-direction: row-reverse;
+}
+
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Geometric shape avatars */
+.avatar {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: #fff;
+}
+
+.avatar-a {
+  background: var(--speaker-a-color);
+  border-radius: 50%;
+}
+
+.avatar-b {
+  background: var(--speaker-b-color);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.message-bubble {
+  max-width: min(520px, 85%);
+  padding: 12px 16px;
+  border-radius: 16px;
+  font-size: 14px;
+  line-height: 1.6;
+  box-shadow: var(--shadow-sm);
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.message-bubble.bubble-a {
+  background: var(--speaker-a-bg);
+  color: var(--text-primary);
+  border: 1px solid color-mix(in srgb, var(--speaker-a-color) 20%, transparent);
+  border-bottom-left-radius: 4px;
+}
+
+.message-bubble.bubble-b {
+  background: var(--speaker-b-bg);
+  color: var(--text-primary);
+  border: 1px solid color-mix(in srgb, var(--speaker-b-color) 20%, transparent);
+  border-bottom-right-radius: 4px;
+}
+
+.message-speaker {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.speaker-a .message-speaker {
+  color: var(--speaker-a-color);
+}
+
+.speaker-b .message-speaker {
+  color: var(--speaker-b-color);
+}
+
+.message-bubble p {
+  margin: 0 0 8px;
+}
+
+.message-bubble p:last-child {
+  margin-bottom: 0;
+}
+
+.message-elapsed {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: right;
+  opacity: 0.7;
+}
+
+/* System messages */
+.system-message {
+  text-align: center;
+  padding: 12px;
+  color: var(--text-muted);
+  font-style: italic;
+  font-size: 14px;
+}
+
+.system-message.end-of-chat {
+  font-weight: 700;
+  font-style: normal;
+  color: var(--text-secondary);
+  font-size: 16px;
+  padding: 20px;
+  border-top: 1px solid var(--border-primary);
+  margin-top: 8px;
+}
+
+.chat-stats {
+  text-align: center;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  margin: 4px auto 8px;
+  max-width: 400px;
+}
+
+/* Download strip rendered below the "End of Chat" marker. Mirrors the
+   items in the header DownloadMenu so the user doesn't have to scroll
+   back up to the top of a finished conversation to export it. */
+.chat-end-downloads {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 0 4px;
+}
+
+.chat-end-download-btn {
+  white-space: nowrap;
+}
+
+/* ── Chat Controls ─────────────────────────────────────────────── */
+
+.chat-controls {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+  padding: 12px 0;
+}
+
+.chat-controls input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.chat-controls input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.btn-primary {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent-gradient);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-primary:active {
+  transform: scale(0.97);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 10px 20px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.btn-secondary:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--accent-primary);
+  color: var(--text-primary);
+}
+
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-stop {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background: #DC2626;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: opacity 0.15s, transform 0.1s;
+}
+
+.btn-stop:hover {
+  opacity: 0.9;
+}
+
+.btn-stop:active {
+  transform: scale(0.97);
+}
+
+/* ── Header Dev Menu ───────────────────────────────────────────── */
+
+.dev-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dev-download-btns {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-sm {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-outline {
+  border: 1px solid var(--border-primary);
+  background: var(--card-bg);
+  color: var(--text-secondary);
+  transition: border-color 0.15s;
+}
+
+.btn-outline:hover:not(:disabled) {
+  border-color: var(--accent-primary);
+  color: var(--text-primary);
+}
+
+.btn-outline:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-ghost {
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-secondary);
+  transition: background 0.15s;
+}
+
+.btn-ghost:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+
+.dev-dropdown-header {
+  position: relative;
+}
+
+.dev-panel {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 4px;
+  min-width: 220px;
+  /* Cap the panel at a bit less than the viewport so it never extends
+     past the bottom of the window; long content scrolls within. The
+     16px subtraction leaves a comfortable gap for shadow + breathing
+     room beneath the header. */
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--card-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  padding: 6px;
+  z-index: 50;
+  box-shadow: var(--shadow-md);
+}
+
+.dev-panel button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  /* Higher-contrast text: was --text-secondary (#4B5563) which read as
+     low-contrast against the white panel. --text-primary (#111827) is
+     near-black and matches the contrast of the rest of the chat UI. */
+  color: var(--text-primary);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.1s;
+}
+
+.dev-panel button:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.dev-panel button:disabled {
+  /* Slightly less aggressive than 0.4 because the base text is now darker;
+     0.55 keeps disabled items legible-but-distinguishable. */
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.dev-panel-hint {
+  font-size: 10px;
+  /* Bumped from --text-muted (#9CA3AF) to --text-secondary (#4B5563)
+     so inline metadata is actually readable. */
+  color: var(--text-secondary);
+  margin-left: 6px;
+  font-style: italic;
+}
+
+.dev-panel-divider {
+  height: 1px;
+  background: var(--border-muted);
+  margin: 4px 0;
+}
+
+.dev-panel-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  /* Bumped from --text-muted to --text-secondary for the same reason. */
+  color: var(--text-secondary);
+  padding: 4px 10px 2px;
+}
+
+/* Clickable section header used for multi-item accordion categories
+   inside the settings panel. Matches the .dev-panel-label visual style
+   (same uppercase / size / color) so collapsed sections read as plain
+   labels at rest; the chevron makes the click affordance discoverable
+   and the hover background tells the user it's interactive. */
+.dev-panel-section-header {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 4px 10px 2px !important;
+  border: none;
+  background: transparent;
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary) !important;
+  text-align: left;
+  cursor: pointer;
+}
+
+.dev-panel-section-header:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary) !important;
+}
+
+.dev-panel-section-chevron {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+/* Indented row used for every actionable item inside a category, so
+   labels (left-aligned at 10px) read as clear group headers and the
+   items below them sit at a 22px hang. Matches the look of the
+   original .dev-panel-choice rows. */
+.dev-panel-row {
+  padding-left: 22px !important;
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Two-line variant: name on top, subtitle (model name) on bottom,
+   chevron right-aligned. The middle text column is flex:1, min-width:0
+   so the subtitle can ellipsis-truncate when it overflows. */
+.dev-panel-row-stack {
+  align-items: stretch;
+}
+
+.dev-panel-row-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.dev-panel-row-name {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.25;
+}
+
+.dev-panel-row-sub {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  line-height: 1.2;
+}
+
+.dev-panel-choice {
+  padding-left: 22px !important;
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+}
+
+.dev-panel-choice-active {
+  color: var(--text-primary) !important;
+  opacity: 1 !important;
+}
+
+.dev-check-icon {
+  flex-shrink: 0;
+}
+
+.dev-panel-choice-active .dev-check-icon {
+  color: var(--neon-accent, #22c55e);
+}
+
+.dev-panel-download-item {
+  display: none !important;
+}
+
+
+/* ── Orchestrator sub-menu ─────────────────────────────────────── */
+
+.dev-sub-panel {
+  position: absolute;
+  right: 100%;
+  top: 0;
+  margin-right: 4px;
+  width: 280px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--card-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  padding: 8px;
+  z-index: 51;
+  box-shadow: var(--shadow-md);
+}
+
+.dev-sub-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 6px 8px;
+  border-bottom: 1px solid var(--border-primary);
+  margin-bottom: 6px;
+}
+
+.dev-sub-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.dev-sub-current {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.dev-sub-search {
+  position: relative;
+  margin-bottom: 6px;
+}
+
+.dev-sub-search-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.dev-sub-search input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px 8px 7px 30px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 12px;
+}
+
+.dev-sub-search input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.dev-sub-search input::placeholder {
+  color: var(--text-muted);
+}
+
+.dev-sub-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.dev-sub-list li {
+  margin-bottom: 2px;
+}
+
+.dev-sub-item {
+  width: 100%;
+  text-align: left;
+  padding: 6px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  font-size: 12px;
+  transition: background 0.1s;
+}
+
+.dev-sub-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.dev-sub-item-active {
+  border-color: var(--accent-primary);
+  background: var(--accent-light);
+}
+
+.dev-sub-item-active:hover {
+  background: var(--accent-light);
+}
+
+.dev-sub-item strong {
+  font-weight: 500;
+  font-size: 12px;
+}
+
+.dev-sub-provider {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+/* responsive rules consolidated below */
+
+/* ── Status / Loading ──────────────────────────────────────────── */
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-primary);
+  border-top-color: var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Auth Badge ───────────────────────────────────────────────── */
+
+.auth-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+}
+
+.auth-username {
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.auth-org-tag {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--accent-primary);
+  color: #fff;
+  letter-spacing: 0.5px;
+}
+
+.auth-remaining {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.auth-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.auth-link:hover {
+  color: var(--text-primary);
+}
+
+.auth-login {
+  color: var(--accent-primary);
+  font-weight: 500;
+}
+
+.auth-login:hover {
+  color: var(--text-primary);
+}
+
+.auth-badge-end {
+  margin-left: 4px;
+}
+
+/* ── Footer ─────────────────────────────────────────────────────── */
+
+.app-footer {
+  padding: 8px 24px;
+  text-align: center;
+  font-size: 10px;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.app-footer a {
+  color: var(--text-muted);
+  text-decoration: underline;
+  transition: color 0.15s;
+}
+
+.app-footer a:hover {
+  color: var(--text-secondary);
+}
+
+/* ── Scrollbar ──────────────────────────────────────────────────── */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--text-muted);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   RESPONSIVE BREAKPOINTS
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ── Tablet (<900px) ──────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .persona-panels {
+    grid-template-columns: 1fr;
+  }
+  .persona-field textarea {
+    min-height: 60px;
+  }
+  .persona-field textarea.tall {
+    min-height: 80px;
+  }
+  .freeform-textarea {
+    min-height: 160px;
+  }
+  .accordion-header {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  .accordion-body.open {
+    padding: 12px 16px 16px;
+  }
+  .chat-controls {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .chat-controls input {
+    flex-basis: 100%;
+    font-size: 13px;
+  }
+  .message-row {
+    gap: 8px;
+  }
+  .avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
+}
+
+/* ── Small tablet / large phone (<600px) ──────────────────────── */
+@media (max-width: 600px) {
+  /* The standalone .dev-download-btns header strip and the
+     .dev-panel-download-item mobile fallback inside the settings menu
+     have been replaced by a dedicated <DownloadMenu> dropdown that
+     works on all viewports, so the responsive fallback logic that used
+     to live here is no longer needed. */
+  .dev-sub-panel {
+    right: 0;
+    top: 100%;
+    margin-right: 0;
+    margin-top: 4px;
+    width: min(280px, calc(100vw - 24px));
+  }
+  .dev-panel {
+    min-width: 200px;
+  }
+  .auth-badge {
+    font-size: 11px;
+    padding: 3px 6px;
+    gap: 4px;
+  }
+  .auth-remaining {
+    display: none;
+  }
+}
+
+/* ── Phone (<480px) ───────────────────────────────────────────── */
+@media (max-width: 480px) {
+  .persona-panels {
+    gap: 12px;
+  }
+  .persona-panel {
+    gap: 8px;
+  }
+  .persona-panel-header {
+    font-size: 13px;
+    padding-bottom: 6px;
+  }
+  .persona-field label {
+    font-size: 11px;
+  }
+  .persona-field input,
+  .persona-field textarea {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+  .persona-field textarea {
+    min-height: 50px;
+  }
+  .persona-field textarea.tall {
+    min-height: 60px;
+  }
+  .freeform-textarea {
+    min-height: 120px;
+  }
+  .accordion {
+    border-radius: 8px;
+    margin-bottom: 10px;
+  }
+  .accordion-header {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+  .accordion-body.open {
+    padding: 10px 12px 14px;
+  }
+  .chat-controls {
+    gap: 6px;
+    padding: 8px 0;
+  }
+  .btn-primary,
+  .btn-secondary,
+  .btn-stop {
+    padding: 8px 14px;
+    font-size: 13px;
+  }
+  .message-bubble {
+    padding: 10px 12px;
+    font-size: 13px;
+    border-radius: 12px;
+  }
+  .message-row {
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+  .avatar {
+    width: 28px;
+    height: 28px;
+    font-size: 11px;
+  }
+  .system-message {
+    font-size: 13px;
+    padding: 8px;
+  }
+  .system-message.end-of-chat {
+    font-size: 14px;
+    padding: 14px;
+  }
+  /* On phones the download strip stacks so each label is fully
+     readable; on wider viewports it stays inline-wrap. */
+  .chat-end-downloads {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+  .chat-end-download-btn {
+    justify-content: center;
+  }
+  .btn-sm {
+    padding: 5px 8px;
+    font-size: 11px;
+  }
+  .btn-ghost {
+    font-size: 12px;
+  }
+  .auth-badge {
+    display: none;
+  }
+  .app-footer {
+    padding: 6px 12px;
+  }
+}
+
+/* ── Role Prompt Modal ─────────────────────────────────────────── */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.15s ease;
+}
+
+.modal-content {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  width: min(680px, 90vw);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 22px;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 0 4px;
+  line-height: 1;
+  border-radius: 4px;
+  transition: color 0.15s, background 0.15s;
+}
+
+.modal-close:hover {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.role-prompt-section h3 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.role-prompt-model {
+  font-weight: 400;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.role-prompt-text {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

frontend/src/styles/decidron.css

@@ -0,0 +1,236 @@
+.decidron-app {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1rem 1.25rem 3rem;
+  /* The app shell locks .app/.app-main to 100vh with overflow:hidden, so
+     this container must fill the main area and scroll internally - keeps
+     the whole simulator (Results, Commands, Stats) reachable at any zoom. */
+  height: 100%;
+  overflow-y: auto;
+}
+
+.decidron-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 980px) {
+  .decidron-grid { grid-template-columns: 1fr; }
+}
+
+.decidron-panel {
+  background: var(--card-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.decidron-panel h2 {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+}
+
+.decidron-panel .panel-hint {
+  font-size: 0.78rem;
+  color: var(--text-tertiary);
+  margin-bottom: 0.75rem;
+}
+
+.decidron-diagram {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+}
+
+.decidron-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.6rem;
+}
+
+.decidron-field label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.decidron-field input,
+.decidron-field select {
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 0.85rem;
+}
+
+.decidron-row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.decidron-btn {
+  padding: 0.5rem 0.9rem;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent-gradient);
+  color: #fff;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.decidron-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.decidron-btn.secondary {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-primary);
+}
+
+.decidron-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.decidron-table th,
+.decidron-table td {
+  text-align: left;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid var(--border-muted);
+  color: var(--text-secondary);
+}
+
+.decidron-table th { color: var(--text-tertiary); font-weight: 600; }
+
+.decidron-chip {
+  display: inline-block;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  background: var(--accent-light);
+  color: var(--accent-primary);
+}
+
+.decidron-chip.match { background: var(--speaker-b-bg); color: var(--speaker-b-color); }
+.decidron-chip.nomatch { background: var(--bg-tertiary); color: var(--text-tertiary); }
+
+.decidron-pending {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin: 0.4rem 0;
+}
+
+.decidron-pending li {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 6px;
+  background: var(--comp-bg);
+  border: 1px solid var(--comp-border);
+  color: var(--text-secondary);
+}
+
+.decidron-history-item {
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  margin-bottom: 0.4rem;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.decidron-history-item.active {
+  border-color: var(--accent-primary);
+  background: var(--accent-light);
+}
+
+.decidron-error {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  color: var(--error-text);
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-size: 0.82rem;
+  margin-bottom: 0.75rem;
+}
+
+.decidron-cmd {
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  padding: 0.5rem 0.6rem;
+  margin-bottom: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.decidron-cmd code {
+  background: var(--bg-tertiary);
+  padding: 0.05rem 0.3rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+}
+
+/* Header settings menu */
+.decidron-settings-wrap .decidron-settings-trigger {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.decidron-settings-panel {
+  width: 300px;
+}
+
+.decidron-settings-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.45rem 0.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+
+.decidron-settings-radio:hover {
+  background: var(--bg-tertiary);
+}
+
+.decidron-settings-radio input {
+  margin-top: 0.2rem;
+  flex-shrink: 0;
+}
+
+.decidron-settings-radio strong {
+  display: block;
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 0.82rem;
+}
+
+.decidron-settings-hint {
+  display: block;
+  font-size: 0.72rem;
+  color: var(--text-tertiary);
+  margin-top: 0.1rem;
+}
+
+.decidron-settings-check {
+  cursor: pointer;
+}

frontend/src/styles/layout.css

@@ -0,0 +1,176 @@
+.app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-sm);
+  flex-shrink: 0;
+  z-index: 100;
+  backdrop-filter: blur(12px);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.header-brand-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.header-brand-link:hover {
+  opacity: 0.8;
+}
+
+.app-logo {
+  height: 32px;
+  width: auto;
+}
+
+.app-title {
+  font-size: 20px;
+  font-weight: 700;
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  margin: 0;
+}
+
+.app-title-link {
+  all: unset;
+  cursor: pointer;
+}
+
+.app-title-link:hover {
+  opacity: 0.8;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+
+.icon-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--accent-primary);
+}
+
+.app-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 300px;
+  min-width: 300px;
+  flex-shrink: 0;
+  padding: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: calc(100vh - 57px);
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  padding: 20px 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ── Tablet: stack sidebar above content ──────────────────────── */
+@media (max-width: 900px) {
+  .app-header {
+    padding: 10px 16px;
+  }
+  .app-main {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+    min-width: auto;
+    max-height: 200px;
+    flex-shrink: 0;
+    border-right: none;
+    border-bottom: 1px solid var(--border-primary);
+  }
+  .content {
+    padding: 16px;
+  }
+}
+
+/* ── Phone ────────────────────────────────────────────────────── */
+@media (max-width: 480px) {
+  .app-header {
+    padding: 8px 12px;
+    gap: 4px;
+  }
+  .app-logo {
+    height: 24px;
+  }
+  .app-title {
+    font-size: 14px;
+  }
+  .header-left {
+    gap: 6px;
+  }
+  .header-right {
+    gap: 4px;
+  }
+  .icon-btn {
+    width: 32px;
+    height: 32px;
+  }
+  .sidebar {
+    max-height: 160px;
+    padding: 8px;
+  }
+  .content {
+    padding: 12px;
+  }
+}

frontend/src/styles/variables.css

@@ -0,0 +1,108 @@
+:root[data-theme="light"] {
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F9FAFB;
+  --bg-tertiary: #F3F4F6;
+  --bg-gradient: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 50%, #F3E8FF 100%);
+
+  --text-primary: #111827;
+  --text-secondary: #4B5563;
+  --text-tertiary: #6B7280;
+  --text-muted: #9CA3AF;
+
+  --accent-primary: #6366F1;
+  --accent-secondary: #8B5CF6;
+  --accent-gradient: linear-gradient(135deg, #5558E3, #7C4FE8);
+  --accent-light: #EEF2FF;
+
+  --border-primary: #E5E7EB;
+  --border-muted: #F3F4F6;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+
+  --card-bg: #FFFFFF;
+  --card-hover: #F9FAFB;
+
+  --neon-accent: #7C4FE8;
+  --neon-bg: #EAE0FD;
+  --neon-border: #C4B5F0;
+
+  --comp-bg: #E0EAFD;
+  --comp-border: #B8CFF0;
+
+  --speaker-a-color: #6366F1;
+  --speaker-a-bg: #EEF2FF;
+  --speaker-b-color: #059669;
+  --speaker-b-bg: #ECFDF5;
+
+  --error-bg: #FEE2E2;
+  --error-border: #FECACA;
+  --error-text: #991B1B;
+}
+
+:root[data-theme="dark"] {
+  --bg-primary: #1F2937;
+  --bg-secondary: #111827;
+  --bg-tertiary: #374151;
+  --bg-gradient: linear-gradient(135deg, #1F2937 0%, #111827 50%, #374151 100%);
+
+  --text-primary: #F9FAFB;
+  --text-secondary: #D1D5DB;
+  --text-tertiary: #9CA3AF;
+  --text-muted: #6B7280;
+
+  --accent-primary: #818CF8;
+  --accent-secondary: #A78BFA;
+  --accent-gradient: linear-gradient(135deg, #818CF8, #A78BFA);
+  --accent-light: #312E81;
+
+  --border-primary: #374151;
+  --border-muted: #1F2937;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+
+  --card-bg: #1F2937;
+  --card-hover: #374151;
+
+  --neon-accent: #A78BFA;
+  --neon-bg: #2D2640;
+  --neon-border: #8B77C0;
+
+  --comp-bg: #1E2A40;
+  --comp-border: #3D5A80;
+
+  --speaker-a-color: #818CF8;
+  --speaker-a-bg: #312E81;
+  --speaker-b-color: #34D399;
+  --speaker-b-bg: #064E3B;
+
+  --error-bg: #450A0A;
+  --error-border: #7F1D1D;
+  --error-text: #FCA5A5;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-gradient);
+  color: var(--text-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+textarea, input {
+  font-family: inherit;
+}