Add config view and shared-password gate

README.md

@@ -85,8 +85,9 @@ Backend listens on `http://localhost:8000`, Gradio on `http://localhost:7860`.
 ## 4. Use the App
 
 1. Open the UI URL.
-2. Click **Start Conversation**. The UI auto-connects to the backend and refreshes once per second.
-3. Click **Stop Conversation** when finished.
+2. If `APP_PASSWORD` is set, enter it on the login page to unlock the app.
+3. Click **Start Conversation**.
+4. Click **Stop Conversation** when finished.
 
 After the conversation completes, the app runs post-conversation analysis and populates:
 - Bottom-up findings (emergent themes) with evidence

backend/api/main.py

@@ -15,7 +15,7 @@ import logging
 import sys
 from pathlib import Path
 
-from fastapi import FastAPI, WebSocket
+from fastapi import FastAPI, WebSocket, Request
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
 
@@ -30,6 +30,7 @@ from config.settings import get_settings  # noqa: E402
 from .conversation_ws import websocket_endpoint, manager  # noqa: E402
 from .routes import router as conversations_router  # noqa: E402
 from .conversation_service import initialize_conversation_service  # noqa: E402
+from backend.core.auth import COOKIE_NAME, INTERNAL_HEADER, get_app_password, verify_session_token  # noqa: E402
 
 # Load application settings
 settings = get_settings()
@@ -61,6 +62,26 @@ app.add_middleware(
 # Include API routes
 app.include_router(conversations_router)
 
+@app.middleware("http")
+async def auth_middleware(request: Request, call_next):
+    password = get_app_password()
+    if not password:
+        return await call_next(request)
+
+    path = request.url.path
+    if path in ("/health", "/docs", "/openapi.json"):
+        return await call_next(request)
+
+    if request.headers.get(INTERNAL_HEADER) == password:
+        return await call_next(request)
+
+    token = request.cookies.get(COOKIE_NAME)
+    if token and verify_session_token(token, password):
+        return await call_next(request)
+
+    from fastapi.responses import JSONResponse
+    return JSONResponse({"error": "unauthorized"}, status_code=401)
+
 
 @app.on_event("startup")
 async def startup_event():
@@ -98,6 +119,15 @@ async def websocket_conversation_endpoint(websocket: WebSocket, conversation_id:
         websocket: WebSocket connection
         conversation_id: Unique identifier for the conversation
     """
+    password = get_app_password()
+    if password:
+        if websocket.headers.get(INTERNAL_HEADER) == password:
+            pass
+        else:
+            token = websocket.cookies.get(COOKIE_NAME)
+            if not (token and verify_session_token(token, password)):
+                await websocket.close(code=1008)
+                return
     await websocket_endpoint(websocket, conversation_id)
 
 

backend/core/auth.py

@@ -0,0 +1,70 @@
+import base64
+import hashlib
+import hmac
+import json
+import os
+import time
+from typing import Optional
+
+
+COOKIE_NAME = "converta_session"
+INTERNAL_HEADER = "x-internal-auth"
+
+
+def get_app_password() -> Optional[str]:
+    value = os.environ.get("APP_PASSWORD")
+    if value is None:
+        return None
+    value = value.strip()
+    return value or None
+
+
+def _b64url_encode(data: bytes) -> str:
+    return base64.urlsafe_b64encode(data).decode("ascii").rstrip("=")
+
+
+def _b64url_decode(data: str) -> bytes:
+    padded = data + "=" * (-len(data) % 4)
+    return base64.urlsafe_b64decode(padded.encode("ascii"))
+
+
+def _sign(payload_b64: str, secret: str) -> str:
+    sig = hmac.new(secret.encode("utf-8"), payload_b64.encode("ascii"), hashlib.sha256).digest()
+    return _b64url_encode(sig)
+
+
+def create_session_token(secret: str, ttl_seconds: int = 7 * 24 * 60 * 60) -> str:
+    now = int(time.time())
+    payload = {"iat": now, "exp": now + ttl_seconds}
+    payload_b64 = _b64url_encode(json.dumps(payload, separators=(",", ":")).encode("utf-8"))
+    sig_b64 = _sign(payload_b64, secret)
+    return f"{payload_b64}.{sig_b64}"
+
+
+def verify_session_token(token: str, secret: str) -> bool:
+    try:
+        payload_b64, sig_b64 = token.split(".", 1)
+    except ValueError:
+        return False
+
+    expected = _sign(payload_b64, secret)
+    if not hmac.compare_digest(expected, sig_b64):
+        return False
+
+    try:
+        payload = json.loads(_b64url_decode(payload_b64).decode("utf-8"))
+    except Exception:
+        return False
+
+    exp = payload.get("exp")
+    if not isinstance(exp, int):
+        return False
+    if exp < int(time.time()):
+        return False
+
+    return True
+
+
+def constant_time_equals(a: str, b: str) -> bool:
+    return hmac.compare_digest(a.encode("utf-8"), b.encode("utf-8"))
+

docs/development.md

@@ -18,6 +18,7 @@ Key environment variables (see `.env.example`):
 - `LLM_BACKEND` — `ollama` (local default) or `openrouter`
 - `LLM_HOST` / `LLM_MODEL` — target endpoint & model ID
 - `LLM_API_KEY`, `LLM_SITE_URL`, `LLM_APP_NAME` — required when using OpenRouter
+- `APP_PASSWORD` — optional shared password gate (when set, the UI + API require login)
 - `FRONTEND_BACKEND_BASE_URL` and `FRONTEND_WEBSOCKET_URL` — how the UI talks to FastAPI
 - `LOG_LEVEL` — INFO by default
 
@@ -59,6 +60,8 @@ The primary demo UI is served by `frontend/react_gradio_hybrid.py` and includes
 
 When running outside Docker, you typically run the backend and the web UI separately; when running in Docker/HF, the backend is mounted under `/api` inside the same server.
 
+The UI also includes a **Configuration** view that lets you select personas and add per-role prompt additions. These settings are currently stored in the browser (local-only).
+
 ## Making Changes Safely
 
 - Prefer editing personas via YAML (`data/`) and restart the backend to reload.
@@ -72,6 +75,10 @@ When running outside Docker, you typically run the backend and the web UI separa
 - Manually verify conversations through the Gradio UI.
 - If you need to debug the conversation loop, instrument `backend/core/conversation_manager.py` or launch a shell and run it directly.
 
+## Notes on Persistence (HF)
+
+Hugging Face Spaces provide a persistent volume (typically mounted at `/data` in Docker Spaces). This repo does not yet persist app data there; future work (persona editing + conversation history) should store shared artifacts under `/data` and treat repo YAML under `data/` as defaults.
+
 ## Roadmap & Next Steps
 
 See `docs/roadmap.md` for current priorities, open questions, and suggested next features (persona selector UI, hosted LLM support, etc.).

docs/hf.md

@@ -10,6 +10,7 @@ In Space → Settings → Variables and secrets:
 
 **Secrets**
 - `LLM_API_KEY`: OpenRouter API key
+- `APP_PASSWORD`: shared password to unlock the Space UI (optional but recommended for public Spaces)
 
 **Variables**
 - `LLM_BACKEND`: `openrouter`
@@ -32,6 +33,8 @@ Run the Docker image locally before pushing to HF:
 
 Then open `http://localhost:7860` and click **Start Conversation**.
 
+If `APP_PASSWORD` is set, you will first see a login page; enter the password to unlock the app.
+
 Note: the local Docker runner forces `FRONTEND_WEBSOCKET_URL` to use the mounted backend (`/api/ws/conversation`) so you don’t accidentally point at `localhost:8000`.
 
 If `7860` is already in use locally, run:
@@ -58,6 +61,8 @@ git push --force hf main
 
 - **UI loads but analysis never appears / shows backend connection errors**
   - Ensure `FRONTEND_WEBSOCKET_URL` is set to `ws://127.0.0.1:7860/api/ws/conversation`.
+- **Space is public but you want to prevent casual usage**
+  - Set the `APP_PASSWORD` secret to enable the shared-password login gate.
 - **Space crashes on startup**
   - Check Space → Logs for the Python traceback.
   - Confirm `PORT` is being respected (HF sets it automatically; we bind to `0.0.0.0:$PORT`).

docs/overview.md

@@ -24,7 +24,7 @@ The AI Survey Simulator orchestrates AI-to-AI healthcare survey conversations so
 
 ## Runtime Flow
 
-1. Browser loads the Web UI and opens `ws://.../ws/frontend/{conversation_id}`.
+1. Browser loads the Web UI (may require login if `APP_PASSWORD` is set) and opens `ws://.../ws/frontend/{conversation_id}`.
 2. The Web UI server bridges that connection to the backend conversation socket at `/api/ws/conversation/{conversation_id}`.
 3. Backend spawns a `ConversationManager`, which alternates surveyor/patient turns using the configured LLM.
 4. Generated messages stream back to the browser over the bridged WebSocket connection.
@@ -32,6 +32,24 @@ The AI Survey Simulator orchestrates AI-to-AI healthcare survey conversations so
    - Bottom-up findings (emergent themes) with evidence pointers
    - Top-down coding (care experience rubric + codebook categories) with evidence pointers
 
+## Configuration UI
+
+The UI includes a **Configuration** view (same page, no reload) that lets you:
+
+- Select surveyor + patient personas (loaded from `GET /api/personas`)
+- Add optional prompt additions for each role (sent with `start_conversation`)
+
+These settings are currently stored in the browser (local-only) and apply to the next run.
+
+## Access Control (Prototype)
+
+If `APP_PASSWORD` is set, the Space is gated behind a simple login page:
+
+- The browser receives a signed session cookie after login
+- All `/api/*` endpoints and the backend WebSocket require either:
+  - that cookie, or
+  - an internal header (`x-internal-auth`) used by the UI server when bridging sockets
+
 ## Repository Map (Key Paths)
 
 ```

frontend/pages/__init__.py

@@ -0,0 +1,2 @@
+"""HTML page renderers for the FastAPI-served UI."""
+

frontend/pages/config_view.py

@@ -0,0 +1,106 @@
+def get_config_view_js() -> str:
+    return r"""
+        function ConfigView() {
+            const existing = React.useMemo(() => loadConfig(), []);
+            const [personas, setPersonas] = React.useState({ surveyors: [], patients: [] });
+
+            const [selectedSurveyorId, setSelectedSurveyorId] = React.useState(existing?.surveyor_persona_id || 'friendly_researcher_001');
+            const [selectedPatientId, setSelectedPatientId] = React.useState(existing?.patient_persona_id || 'cooperative_senior_001');
+            const [surveyorPromptAddition, setSurveyorPromptAddition] = React.useState(existing?.surveyor_prompt_addition || '');
+            const [patientPromptAddition, setPatientPromptAddition] = React.useState(existing?.patient_prompt_addition || '');
+            const [savedAt, setSavedAt] = React.useState(existing?.saved_at || null);
+
+            React.useEffect(() => {
+                fetch('/api/personas')
+                    .then(r => r.json())
+                    .then(data => {
+                        setPersonas({
+                            surveyors: data.surveyors || [],
+                            patients: data.patients || []
+                        });
+                    })
+                    .catch(() => {});
+            }, []);
+
+            const onSave = () => {
+                const cfg = {
+                    surveyor_persona_id: selectedSurveyorId,
+                    patient_persona_id: selectedPatientId,
+                    surveyor_prompt_addition: surveyorPromptAddition,
+                    patient_prompt_addition: patientPromptAddition,
+                    saved_at: new Date().toISOString()
+                };
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(cfg));
+                setSavedAt(cfg.saved_at);
+            };
+
+            return (
+                <div className="bg-white rounded-lg shadow-lg p-6">
+                    <div className="flex items-center justify-between gap-6 mb-4">
+                        <div>
+                            <h2 className="text-xl font-bold text-slate-800">Configuration</h2>
+                            <p className="text-slate-600 mt-1 text-sm">
+                                These settings apply to the next conversation run in this browser. Click “Save Configuration” to persist them.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-6">
+                        <div>
+                            <label className="block text-sm font-semibold text-slate-700 mb-2">Surveyor persona</label>
+                            <select
+                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+                                value={selectedSurveyorId}
+                                onChange={(e) => setSelectedSurveyorId(e.target.value)}
+                            >
+                                {(personas.surveyors.length ? personas.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
+                                    <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
+                                ))}
+                            </select>
+
+                            <label className="block text-sm font-semibold text-slate-700 mt-4 mb-2">Surveyor prompt addition (optional)</label>
+                            <textarea
+                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white h-28"
+                                placeholder="E.g., Ask only one short question per turn; avoid advice; acknowledge and probe..."
+                                value={surveyorPromptAddition}
+                                onChange={(e) => setSurveyorPromptAddition(e.target.value)}
+                            />
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-semibold text-slate-700 mb-2">Patient persona</label>
+                            <select
+                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+                                value={selectedPatientId}
+                                onChange={(e) => setSelectedPatientId(e.target.value)}
+                            >
+                                {(personas.patients.length ? personas.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
+                                    <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
+                                ))}
+                            </select>
+
+                            <label className="block text-sm font-semibold text-slate-700 mt-4 mb-2">Patient prompt addition (optional)</label>
+                            <textarea
+                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white h-28"
+                                placeholder="E.g., Be brief; focus on routines; mention barriers; ask clarifying questions..."
+                                value={patientPromptAddition}
+                                onChange={(e) => setPatientPromptAddition(e.target.value)}
+                            />
+                        </div>
+                    </div>
+
+                    <div className="mt-6 flex items-center justify-between gap-4">
+                        <div className="text-xs text-slate-500">
+                            {savedAt ? `Saved: ${new Date(savedAt).toLocaleString()}` : 'Not saved yet.'}
+                        </div>
+                        <button
+                            onClick={onSave}
+                            className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-semibold transition-all shadow"
+                        >
+                            Save Configuration
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+"""

frontend/pages/login_page.py

@@ -0,0 +1,83 @@
+def get_login_page_html(app_name: str = "ConverTA") -> str:
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{app_name} — Login</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 px-6 py-10">
+  <div class="max-w-md mx-auto">
+    <div class="flex items-center gap-3 mb-6 px-1">
+      <span class="text-3xl">🧠</span>
+      <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">{app_name}</h1>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-lg p-6">
+      <h2 class="text-lg font-bold text-slate-900">Access required</h2>
+      <p class="text-sm text-slate-600 mt-1">
+        Enter the shared password to use the app.
+      </p>
+
+      <div class="mt-4">
+        <label class="block text-sm font-semibold text-slate-700 mb-2" for="pw">Password</label>
+        <input id="pw" type="password" class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white" autocomplete="current-password" />
+        <div id="err" class="text-sm text-red-600 mt-2 hidden"></div>
+      </div>
+
+      <div class="mt-6 flex items-center justify-end">
+        <button id="btn" class="bg-slate-900 hover:bg-slate-800 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow">
+          Unlock
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const pw = document.getElementById('pw');
+    const btn = document.getElementById('btn');
+    const err = document.getElementById('err');
+
+    function showError(msg) {{
+      err.textContent = msg;
+      err.classList.remove('hidden');
+    }}
+
+    async function submit() {{
+      err.classList.add('hidden');
+      btn.disabled = true;
+      btn.textContent = 'Checking...';
+      try {{
+        const res = await fetch('/login', {{
+          method: 'POST',
+          headers: {{ 'Content-Type': 'application/json' }},
+          body: JSON.stringify({{ password: pw.value }})
+        }});
+        if (res.ok) {{
+          window.location.reload();
+          return;
+        }}
+        if (res.status === 401) {{
+          showError('Incorrect password.');
+          return;
+        }}
+        showError('Login failed.');
+      }} catch (e) {{
+        showError('Login failed.');
+      }} finally {{
+        btn.disabled = false;
+        btn.textContent = 'Unlock';
+      }}
+    }}
+
+    btn.addEventListener('click', submit);
+    pw.addEventListener('keydown', (e) => {{
+      if (e.key === 'Enter') submit();
+    }});
+    pw.focus();
+  </script>
+</body>
+</html>
+"""
+

frontend/pages/main_page.py

@@ -0,0 +1,524 @@
+from .config_view import get_config_view_js
+
+
+def get_main_page_html() -> str:
+    html = r"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ConverTA</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+</head>
+<body>
+    <div id="root"></div>
+
+    <script type="text/babel">
+        const { useState, useEffect, useRef } = React;
+
+        const STORAGE_KEY = 'converta.config.v1';
+
+        function loadConfig() {
+            try {
+                const raw = localStorage.getItem(STORAGE_KEY);
+                if (!raw) return null;
+                return JSON.parse(raw);
+            } catch {
+                return null;
+            }
+        }
+
+        function PageNav({ active, onChange }) {
+            const base = "px-4 py-2 rounded-lg text-sm font-semibold border transition-colors";
+            const activeCls = "bg-slate-900 text-white border-slate-900";
+            const inactiveCls = "bg-white text-slate-700 border-slate-300 hover:border-slate-400";
+            return (
+                <div className="flex gap-2">
+                    <button type="button" onClick={() => onChange('main')} className={`${base} ${active === 'main' ? activeCls : inactiveCls}`}>Conversation</button>
+                    <button type="button" onClick={() => onChange('config')} className={`${base} ${active === 'config' ? activeCls : inactiveCls}`}>Configuration</button>
+                </div>
+            );
+        }
+
+        /*__CONFIG_VIEW__*/
+
+        function App() {
+            const [activePage, setActivePage] = useState('main');
+            const [conversationActive, setConversationActive] = useState(false);
+            const [messages, setMessages] = useState([]);
+            const [insights, setInsights] = useState([]);
+            const [routing, setRouting] = useState(null);
+            const [resources, setResources] = useState(null);
+            const [resourceAgentStatus, setResourceAgentStatus] = useState('idle'); // idle|running|complete|error
+            const [resourceAgentError, setResourceAgentError] = useState(null);
+            const [connectionStatus, setConnectionStatus] = useState('disconnected');
+            const [stats, setStats] = useState({ sent: 0, received: 0 });
+
+            const wsRef = useRef(null);
+            const conversationIdRef = useRef(null);
+            const transcriptContainerRef = useRef(null);
+            const stickToBottomRef = useRef(true);
+
+            useEffect(() => {
+                return () => {
+                    if (wsRef.current) {
+                        wsRef.current.close();
+                    }
+                };
+            }, []);
+
+            useEffect(() => {
+                if (activePage !== 'main') return;
+                const el = transcriptContainerRef.current;
+                if (!el) return;
+                if (!stickToBottomRef.current) return;
+                el.scrollTop = el.scrollHeight;
+            }, [messages.length, activePage]);
+
+            const connectWebSocket = () => {
+                conversationIdRef.current = `react_conv_${Date.now()}`;
+                const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+                const wsUrl = `${wsScheme}://${window.location.host}/ws/frontend/${conversationIdRef.current}`;
+
+                const websocket = new WebSocket(wsUrl);
+
+                websocket.onopen = () => {
+                    setConnectionStatus('connected');
+                    wsRef.current = websocket;
+                };
+
+                websocket.onmessage = (event) => {
+                    const message = JSON.parse(event.data);
+                    handleMessage(message);
+                };
+
+                websocket.onerror = () => {
+                    setConnectionStatus('error');
+                };
+
+                websocket.onclose = () => {
+                    setConnectionStatus('disconnected');
+                    wsRef.current = null;
+                };
+            };
+
+            const handleMessage = (message) => {
+                if (message.type === 'conversation_message') {
+                    const newMsg = {
+                        role: message.role,
+                        text: message.content,
+                        time: new Date().toLocaleTimeString(),
+                        persona: message.persona || message.role
+                    };
+                    setMessages(prev => [...prev, newMsg]);
+                }
+                else if (message.type === 'conversation_status') {
+                    if (message.status === 'completed') {
+                        setConversationActive(false);
+                    }
+                }
+                else if (message.type === 'conversation_error') {
+                    console.error('Conversation error:', message.error);
+                }
+                else if (message.type === 'stats') {
+                    setStats(message.data);
+                }
+                else if (message.type === 'resource_agent_status') {
+                    const status = message.status || 'unknown';
+                    setResourceAgentStatus(status);
+                    if (status === 'error') {
+                        setResourceAgentError(message.error || 'Resource agent failed');
+                    }
+                }
+                else if (message.type === 'resource_agent_result') {
+                    setResources(message.data || null);
+                    setResourceAgentStatus('complete');
+                    setResourceAgentError(null);
+                }
+            };
+
+            const confidenceToPercent = (confidence) => {
+                if (typeof confidence !== 'number' || !Number.isFinite(confidence)) return null;
+                const normalized = confidence <= 1 ? confidence : (confidence <= 100 ? confidence / 100 : 1);
+                return Math.max(0, Math.min(100, Math.round(normalized * 100)));
+            };
+
+            const getEvidenceSnippet = (evidence) => {
+                const evidenceId = evidence?.evidence_id;
+                if (!evidenceId || !resources?.evidence_catalog) {
+                    return { label: 'Unknown', snippet: '' };
+                }
+                const entry = resources.evidence_catalog[evidenceId];
+                if (!entry) {
+                    return { label: evidenceId, snippet: '' };
+                }
+
+                const idx = entry.message_index;
+                const msg = messages[idx];
+                const label = msg ? `${msg.role === 'surveyor' ? 'Surveyor' : 'Patient'} (${msg.persona})` : `Message #${idx}`;
+                return { label, snippet: entry.text || '' };
+            };
+
+            const startConversation = () => {
+                setMessages([]);
+                setInsights([]);
+                setRouting(null);
+                setResources(null);
+                setResourceAgentStatus('idle');
+                setResourceAgentError(null);
+                setConversationActive(true);
+                stickToBottomRef.current = true;
+
+                connectWebSocket();
+
+                const cfg = loadConfig() || {};
+                const surveyorId = cfg.surveyor_persona_id || 'friendly_researcher_001';
+                const patientId = cfg.patient_persona_id || 'cooperative_senior_001';
+
+                setTimeout(() => {
+                    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+                        wsRef.current.send(JSON.stringify({
+                            type: 'start_conversation',
+                            surveyor_persona_id: surveyorId,
+                            patient_persona_id: patientId,
+                            surveyor_prompt_addition: cfg.surveyor_prompt_addition || undefined,
+                            patient_prompt_addition: cfg.patient_prompt_addition || undefined
+                        }));
+                    }
+                }, 500);
+            };
+
+            const stopConversation = () => {
+                if (wsRef.current) {
+                    wsRef.current.send(JSON.stringify({ type: 'stop_conversation' }));
+                }
+                setConversationActive(false);
+            };
+
+            const onTranscriptScroll = () => {
+                const el = transcriptContainerRef.current;
+                if (!el) return;
+                const thresholdPx = 120;
+                const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+                stickToBottomRef.current = distanceFromBottom < thresholdPx;
+            };
+
+            const renderCareBox = (title, tone, data, defaultText) => {
+                const toneColor = {
+                    positive: 'bg-green-50 border-green-200',
+                    mixed: 'bg-yellow-50 border-yellow-200',
+                    negative: 'bg-red-50 border-red-200',
+                    neutral: 'bg-slate-50 border-slate-200'
+                }[tone] || 'bg-slate-50 border-slate-200';
+
+                const hasAny = (box) => {
+                    if (!box || typeof box !== 'object') return false;
+                    if (typeof box.confidence === 'number' && box.confidence > 0) return true;
+                    if (typeof box.summary === 'string' && box.summary.trim().length > 0) return true;
+                    if (Array.isArray(box.reasons) && box.reasons.length > 0) return true;
+                    if (Array.isArray(box.evidence) && box.evidence.length > 0) return true;
+                    return false;
+                };
+
+                const resolved = hasAny(data) ? data : null;
+
+                return (
+                    <div className={`border rounded-lg p-3 ${toneColor}`}>
+                        <div className="flex items-center justify-between">
+                            <div className="font-semibold text-slate-900">{title}</div>
+                        </div>
+                        {!resolved ? (
+                            <div className="text-sm text-slate-600 mt-2">{defaultText}</div>
+                        ) : (
+                            <>
+                                {typeof resolved.confidence === 'number' && (
+                                    <div className="text-xs text-slate-500 mb-1">
+                                        Confidence: {confidenceToPercent(resolved.confidence)}%
+                                    </div>
+                                )}
+                                {resolved.summary && (
+                                    <div className="text-sm text-slate-700">
+                                        <span className="font-semibold text-slate-700">Summary:</span> {resolved.summary}
+                                    </div>
+                                )}
+                                {(resolved.reasons || []).length > 0 && (
+                                    <div className="mt-2 space-y-1">
+                                        {(resolved.reasons || []).slice(0, 5).map((reason, idx) => (
+                                            <div key={idx} className="text-xs text-slate-600">- {reason}</div>
+                                        ))}
+                                    </div>
+                                )}
+                                {((resolved.evidence || []).length > 0) && (
+                                    <details className="mt-2 bg-white/40 rounded-md px-2 py-1 border border-slate-200">
+                                        <summary className="cursor-pointer select-none text-xs font-semibold text-slate-700">
+                                            Evidence ({(resolved.evidence || []).slice(0, 3).length})
+                                        </summary>
+                                        <div className="mt-2 space-y-1">
+                                            {(resolved.evidence || []).slice(0, 3).map((ev, idx) => {
+                                                const { label, snippet } = getEvidenceSnippet(ev);
+                                                return (
+                                                    <div key={idx} className="text-xs text-slate-600">
+                                                        <span className="font-medium text-slate-700">{label}:</span> {snippet}
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    </details>
+                                )}
+                            </>
+                        )}
+                    </div>
+                );
+            };
+
+            return (
+                <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 px-6 py-4">
+                    <div className="w-full">
+                        <div className="flex items-center gap-3 mb-4 px-1">
+                            <span className="text-3xl">🧠</span>
+                            <h1 className="text-2xl font-extrabold text-slate-900 tracking-tight">ConverTA</h1>
+                        </div>
+
+	                        <div className="bg-white rounded-lg shadow-lg p-4 mb-6">
+	                            <div className="flex items-center justify-between gap-4">
+	                                <PageNav active={activePage} onChange={setActivePage} />
+	                                {activePage === 'main' && (
+	                                    !conversationActive ? (
+	                                        <button onClick={startConversation} className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow">
+	                                            <span>⚡</span>
+	                                            Start
+	                                        </button>
+	                                    ) : (
+	                                        <button onClick={stopConversation} className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow">
+	                                            ⏹️ Stop
+	                                        </button>
+	                                    )
+	                                )}
+	                            </div>
+	                        </div>
+
+	                        {activePage === 'config' ? (
+	                            <ConfigView />
+	                        ) : (
+	                            <div className="grid grid-cols-[2fr_1fr_2fr] gap-6 items-start">
+	                                <div className="bg-white rounded-lg shadow-lg p-6">
+	                                    <div className="flex items-center gap-2 mb-4">
+	                                        <span className="text-2xl">💬</span>
+	                                        <h2 className="text-xl font-bold text-slate-800">Live Conversation</h2>
+	                                        {conversationActive && <span className="ml-auto text-green-600 font-medium animate-pulse">● LIVE</span>}
+	                                    </div>
+	                                    <div ref={transcriptContainerRef} onScroll={onTranscriptScroll} className="space-y-3 h-96 overflow-y-auto bg-slate-50 p-4 rounded-lg">
+	                                        {messages.length === 0 && (
+	                                            <div className="text-center text-slate-400 py-20">
+	                                                {conversationActive
+	                                                    ? '🔄 Waiting for the first messages...'
+	                                                    : '👋 Click "Start" to begin. This panel streams conversation utterances in real time.'}
+	                                            </div>
+	                                        )}
+	                                        {messages.map((msg, idx) => (
+	                                            <div key={idx} className={`p-4 rounded-lg shadow-sm ${msg.role === 'surveyor' ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-l-4 border-green-500'}`}>
+	                                                <div className="flex items-center gap-2 mb-1">
+	                                                    <span className="font-semibold text-sm">
+	                                                        {msg.role === 'surveyor' ? '🔵' : '🟢'} {msg.persona}
+	                                                    </span>
+	                                                    <span className="text-xs text-slate-500">{msg.time}</span>
+	                                                </div>
+	                                                <p className="text-slate-700">{msg.text}</p>
+	                                            </div>
+	                                        ))}
+	                                    </div>
+	                                </div>
+
+	                                <div className="bg-white rounded-lg shadow-lg p-6">
+	                                    <div className="flex items-center gap-2 mb-4">
+	                                        <span className="text-2xl">📊</span>
+	                                        <h2 className="text-xl font-bold text-slate-800">Bottom-Up Findings</h2>
+	                                        {resourceAgentStatus === 'running' && (
+	                                            <span className="ml-auto text-purple-600 font-medium animate-pulse">● RUNNING</span>
+	                                        )}
+	                                        {((resources?.health_situations || []).length > 0) && (
+	                                            <span className="ml-auto bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">
+	                                                {(resources?.health_situations || []).length}
+	                                            </span>
+	                                        )}
+	                                    </div>
+	                                    <div className="space-y-2 max-h-[42rem] overflow-y-auto">
+	                                        {resourceAgentStatus !== 'complete' && (
+	                                            <p className="text-slate-400 text-center py-8 text-sm">
+	                                                {conversationActive
+	                                                    ? 'Runs automatically when the conversation completes...'
+	                                                    : 'Runs automatically when the conversation completes. Evidence-backed emergent themes (open coding).'}
+	                                            </p>
+	                                        )}
+	                                        {resourceAgentStatus === 'complete' && resources && (
+	                                            <>
+	                                                {(resources.health_situations || []).length === 0 ? (
+	                                                    <p className="text-slate-400 text-center py-8 text-sm">No findings detected.</p>
+	                                                ) : (
+	                                                    <div className="space-y-3">
+	                                                        {(resources.health_situations || []).map((item, idx) => (
+	                                                            <div key={idx} className="bg-slate-50 border border-slate-200 rounded-lg p-3">
+	                                                                <div className="flex items-center gap-2">
+	                                                                    <div className="font-semibold text-slate-800">
+	                                                                        {(item.code && String(item.code).trim().length > 0) ? item.code : 'Finding'}
+	                                                                    </div>
+	                                                                    {typeof item.confidence === 'number' && (
+	                                                                        <div className="ml-auto text-xs text-slate-500">
+	                                                                            {confidenceToPercent(item.confidence)}%
+	                                                                        </div>
+	                                                                    )}
+	                                                                </div>
+	                                                                {item.summary && (
+	                                                                    <div className="text-sm text-slate-700 mt-1">
+	                                                                        <span className="font-semibold text-slate-700">Summary:</span> {item.summary}
+	                                                                    </div>
+	                                                                )}
+	                                                                <details className="mt-2 bg-white/40 rounded-md px-2 py-1 border border-slate-200">
+	                                                                    <summary className="cursor-pointer select-none text-xs font-semibold text-slate-700">
+	                                                                        Evidence ({(item.evidence || []).slice(0, 3).length})
+	                                                                    </summary>
+	                                                                    <div className="mt-2 space-y-1">
+	                                                                        {(item.evidence || []).slice(0, 3).map((ev, evIdx) => {
+	                                                                            const { label, snippet } = getEvidenceSnippet(ev);
+	                                                                            return (
+	                                                                                <div key={evIdx} className="text-xs text-slate-600">
+	                                                                                    <span className="font-medium text-slate-700">{label}:</span> {snippet}
+	                                                                                </div>
+	                                                                            );
+	                                                                        })}
+	                                                                    </div>
+	                                                                </details>
+	                                                            </div>
+	                                                        ))}
+	                                                    </div>
+	                                                )}
+	                                            </>
+	                                        )}
+	                                    </div>
+	                                </div>
+
+	                                <div className="bg-white rounded-lg shadow-lg p-6">
+	                                    <div className="flex items-center gap-2 mb-4">
+	                                        <span className="text-2xl">📚</span>
+	                                        <h2 className="text-xl font-bold text-slate-800">Top-Down Coding</h2>
+	                                        {resourceAgentStatus === 'running' && (
+	                                            <span className="ml-auto text-purple-600 font-medium animate-pulse">● RUNNING</span>
+	                                        )}
+	                                    </div>
+
+	                                    {resourceAgentStatus !== 'complete' && (
+	                                        <p className="text-slate-400 text-center py-8 text-sm">
+	                                            {conversationActive
+	                                                ? 'Runs automatically when the conversation completes...'
+	                                                : 'Runs automatically when the conversation completes. Rubric + a priori codebook (top-down coding).'}
+	                                        </p>
+	                                    )}
+
+	                                    {resourceAgentStatus === 'complete' && (
+	                                        <div className="grid grid-cols-2 gap-4">
+	                                            <div className="space-y-3">
+	                                                <div className="text-lg font-extrabold text-slate-900 mb-2">Care experience rubric</div>
+	                                                {(() => {
+	                                                    const care = resources?.care_experience || {};
+	                                                    const positive = care.positive || null;
+	                                                    const mixed = care.mixed || null;
+	                                                    const negative = care.negative || null;
+	                                                    const neutral = care.neutral || null;
+
+	                                                    return (
+	                                                        <>
+	                                                            {renderCareBox('Positive', 'positive', positive, 'No positive insights detected.')}
+	                                                            {renderCareBox('Mixed / Tradeoffs', 'mixed', mixed, 'No mixed/tradeoff insights detected.')}
+	                                                            {renderCareBox('Negative', 'negative', negative, 'No negative insights detected.')}
+	                                                            {renderCareBox('Neutral / Additional', 'neutral', neutral, 'No neutral/additional observations detected.')}
+	                                                        </>
+	                                                    );
+	                                                })()}
+	                                            </div>
+
+	                                            <div className="space-y-3">
+	                                                <div className="text-lg font-extrabold text-slate-900 mb-2">Top-down codebook categories</div>
+	                                                {(() => {
+	                                                    const td = resources?.top_down_codes || {};
+	                                                    const order = [
+	                                                        { key: 'symptoms_concerns', label: 'Symptoms/concerns', empty: 'No symptoms/concerns excerpts detected.' },
+	                                                        { key: 'daily_management', label: 'Daily management', empty: 'No daily management excerpts detected.' },
+	                                                        { key: 'barriers_constraints', label: 'Barriers/constraints', empty: 'No barriers/constraints excerpts detected.' },
+	                                                        { key: 'support_resources', label: 'Support/resources', empty: 'No support/resources excerpts detected.' }
+	                                                    ];
+
+	                                                    return (
+	                                                        <div className="space-y-3">
+	                                                            {order.map(({ key, label, empty }) => {
+	                                                                const arr = td[key] || [];
+	                                                                return (
+	                                                                    <div key={key} className="bg-slate-50 border border-slate-200 rounded-lg p-3">
+	                                                                        <div className="font-extrabold text-slate-900">Code: {label}</div>
+	                                                                        {arr.length === 0 ? (
+	                                                                            <div className="text-sm text-slate-600 mt-2">{empty}</div>
+	                                                                        ) : (
+	                                                                            <div className="mt-2 space-y-3">
+	                                                                                {arr.map((item, idx) => (
+	                                                                                    <div key={idx} className="bg-white border border-slate-200 rounded-lg p-3">
+	                                                                                        <div className="flex items-center gap-2">
+	                                                                                            <div className="font-semibold text-slate-800">
+	                                                                                                {(item.code && String(item.code).trim().length > 0) ? item.code : 'Finding'}
+	                                                                                            </div>
+	                                                                                            {typeof item.confidence === 'number' && (
+	                                                                                                <div className="ml-auto text-xs text-slate-500">
+	                                                                                                    {confidenceToPercent(item.confidence)}%
+	                                                                                                </div>
+	                                                                                            )}
+	                                                                                        </div>
+	                                                                                        {item.summary && (
+	                                                                                            <div className="text-sm text-slate-700 mt-1">
+	                                                                                                <span className="font-semibold text-slate-700">Summary:</span> {item.summary}
+	                                                                                            </div>
+	                                                                                        )}
+	                                                                                        <details className="mt-2 bg-white/40 rounded-md px-2 py-1 border border-slate-200">
+	                                                                                            <summary className="cursor-pointer select-none text-xs font-semibold text-slate-700">
+	                                                                                                Evidence ({(item.evidence || []).slice(0, 3).length})
+	                                                                                            </summary>
+	                                                                                            <div className="mt-2 space-y-1">
+	                                                                                                {(item.evidence || []).slice(0, 3).map((ev, idx2) => {
+	                                                                                                    const { label: evLabel, snippet } = getEvidenceSnippet(ev);
+	                                                                                                    return (
+	                                                                                                        <div key={idx2} className="text-xs text-slate-600">
+	                                                                                                            <span className="font-medium text-slate-700">{evLabel}:</span> {snippet}
+	                                                                                                        </div>
+	                                                                                                    );
+	                                                                                                })}
+	                                                                                            </div>
+	                                                                                        </details>
+	                                                                                    </div>
+	                                                                                ))}
+	                                                                            </div>
+	                                                                        )}
+	                                                                    </div>
+	                                                                );
+	                                                            })}
+	                                                        </div>
+	                                                    );
+	                                                })()}
+	                                            </div>
+	                                        </div>
+	                                    )}
+	                                </div>
+	                            </div>
+	                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
+</html>
+"""
+
+    return html.replace("/*__CONFIG_VIEW__*/", get_config_view_js())

frontend/react_gradio_hybrid.py

@@ -1,15 +1,12 @@
 import sys
-import json
-import time
 import os
 import asyncio
 from pathlib import Path
-from typing import Dict, List
+from typing import Dict, Optional
 import logging
 
-from fastapi import FastAPI, WebSocket, WebSocketDisconnect
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import HTMLResponse, FileResponse
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Request
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
 import uvicorn
 
@@ -19,10 +16,20 @@ sys.path.insert(0, str(project_root))
 sys.path.insert(0, str(project_root / "frontend"))
 
 from config.settings import get_settings
-from websocket_manager import WebSocketManager, ManagerState
+from pages.main_page import get_main_page_html
+from pages.login_page import get_login_page_html
+from websocket_manager import WebSocketManager
 from backend.api.main import app as backend_app
 from backend.api.conversation_ws import manager as backend_ws_manager
 from backend.api.conversation_service import initialize_conversation_service
+from backend.core.auth import (
+    COOKIE_NAME,
+    INTERNAL_HEADER,
+    constant_time_equals,
+    create_session_token,
+    get_app_password,
+    verify_session_token,
+)
 
 # Load settings
 settings = get_settings()
@@ -38,11 +45,12 @@ app = FastAPI(title="AI Survey Simulator - React Frontend")
 # Mount backend API under /api so the Space can run as a single process
 app.mount("/api", backend_app)
 
+
 @app.on_event("startup")
 async def initialize_backend_services():
-    """Initialize backend services when running the mounted backend inside this app."""
     initialize_conversation_service(backend_ws_manager, settings)
 
+
 # Enable CORS for local development
 app.add_middleware(
     CORSMiddleware,
@@ -57,732 +65,136 @@ active_managers: Dict[str, WebSocketManager] = {}
 frontend_connections: Dict[str, WebSocket] = {}
 
 
+def _is_authenticated_cookie(token: Optional[str], password: str) -> bool:
+    if not token:
+        return False
+    return verify_session_token(token, password)
+
+
+def _is_request_authenticated(request: Request, password: str) -> bool:
+    if request.headers.get(INTERNAL_HEADER) == password:
+        return True
+    token = request.cookies.get(COOKIE_NAME)
+    return _is_authenticated_cookie(token, password)
+
+
 @app.get("/", response_class=HTMLResponse)
-async def serve_frontend():
-    """Serve the React frontend."""
-    html_content = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Agentic AI Survey Simulator</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-</head>
-<body>
-    <div id="root"></div>
-    
-    <script type="text/babel">
-        const { useState, useEffect, useRef } = React;
-        
-        function App() {
-            const [conversationActive, setConversationActive] = useState(false);
-            const [messages, setMessages] = useState([]);
-            const [insights, setInsights] = useState([]);
-            const [routing, setRouting] = useState(null);
-            const [resources, setResources] = useState(null);
-            const [resourceAgentStatus, setResourceAgentStatus] = useState('idle'); // idle|running|complete|error
-            const [resourceAgentError, setResourceAgentError] = useState(null);
-            const [connectionStatus, setConnectionStatus] = useState('disconnected');
-            const [stats, setStats] = useState({ sent: 0, received: 0 });
-            const [personas, setPersonas] = useState({ surveyors: [], patients: [] });
-            const [selectedSurveyorId, setSelectedSurveyorId] = useState('friendly_researcher_001');
-            const [selectedPatientId, setSelectedPatientId] = useState('cooperative_senior_001');
-            const [surveyorPromptAddition, setSurveyorPromptAddition] = useState('');
-            const [patientPromptAddition, setPatientPromptAddition] = useState('');
-            
-            const wsRef = useRef(null);
-            const conversationIdRef = useRef(null);
-            
-            useEffect(() => {
-                // Load personas for configuration panel
-                fetch('/api/personas')
-                    .then(r => r.json())
-                    .then(data => {
-                        if (data && (data.surveyors || data.patients)) {
-                            setPersonas({
-                                surveyors: data.surveyors || [],
-                                patients: data.patients || []
-                            });
-                        }
-                    })
-                    .catch(() => {});
-
-                return () => {
-                    if (wsRef.current) {
-                        wsRef.current.close();
-                    }
-                };
-            }, []);
-            
-            const connectWebSocket = () => {
-                conversationIdRef.current = `react_conv_${Date.now()}`;
-                const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
-                const wsUrl = `${wsScheme}://${window.location.host}/ws/frontend/${conversationIdRef.current}`;
-                
-                const websocket = new WebSocket(wsUrl);
-                
-                websocket.onopen = () => {
-                    console.log('WebSocket connected');
-                    setConnectionStatus('connected');
-                    wsRef.current = websocket;
-                };
-                
-                websocket.onmessage = (event) => {
-                    const message = JSON.parse(event.data);
-                    handleMessage(message);
-                };
-                
-                websocket.onerror = (error) => {
-                    console.error('WebSocket error:', error);
-                    setConnectionStatus('error');
-                };
-                
-                websocket.onclose = () => {
-                    console.log('WebSocket closed');
-                    setConnectionStatus('disconnected');
-                    wsRef.current = null;
-                };
-            };
-            
-            const handleMessage = (message) => {
-                console.log('Received:', message.type);
-                
-                if (message.type === 'conversation_message') {
-                    const newMsg = {
-                        role: message.role,
-                        text: message.content,
-                        time: new Date().toLocaleTimeString(),
-                        persona: message.persona || message.role
-                    };
-                    setMessages(prev => [...prev, newMsg]);
-                    
-                    // Auto-extract insights
-                    extractInsightsFromMessage(message.content, message.role);
-                }
-                else if (message.type === 'conversation_status') {
-                    console.log('Status:', message.status);
-                    if (message.status === 'completed') {
-                        setConversationActive(false);
-                    }
-                }
-                else if (message.type === 'conversation_error') {
-                    const err = message.error || 'Unknown conversation error';
-                    console.error('Conversation error:', err);
-                }
-                else if (message.type === 'stats') {
-                    setStats(message.data);
-                }
-                else if (message.type === 'error') {
-                    console.error('Error:', message.error);
-                }
-                else if (message.type === 'resource_agent_status') {
-                    const status = message.status || 'unknown';
-                    setResourceAgentStatus(status);
-                    if (status === 'error') {
-                        const err = message.error || 'Resource agent failed';
-                        setResourceAgentError(err);
-                    }
-                }
-                else if (message.type === 'resource_agent_result') {
-                    setResources(message.data || null);
-                    setResourceAgentStatus('complete');
-                    setResourceAgentError(null);
-                }
-            };
-
-            const getEvidenceSnippet = (evidence) => {
-                const evidenceId = evidence?.evidence_id;
-                if (!evidenceId || !resources?.evidence_catalog) {
-                    return { label: 'Unknown', snippet: '' };
-                }
-                const entry = resources.evidence_catalog[evidenceId];
-                if (!entry) {
-                    return { label: evidenceId, snippet: '' };
-                }
-
-                const idx = entry.message_index;
-                const msg = messages[idx];
-                const label = msg ? `${msg.role === 'surveyor' ? 'Surveyor' : 'Patient'} (${msg.persona})` : `Message #${idx}`;
-                return { label, snippet: entry.text || '' };
-            };
-
-            const confidenceToPercent = (confidence) => {
-                if (typeof confidence !== 'number' || !Number.isFinite(confidence)) return null;
-                const normalized = confidence <= 1 ? confidence : (confidence <= 100 ? confidence / 100 : 1);
-                return Math.max(0, Math.min(100, Math.round(normalized * 100)));
-            };
-            
-            const extractInsightsFromMessage = (content, role) => {
-                const lowerContent = content.toLowerCase();
-                
-                // Health conditions
-                const conditions = [
-                    { keyword: 'diabetes', icon: '🏥', label: 'Type 2 Diabetes' },
-                    { keyword: 'pressure', icon: '🏥', label: 'Blood Pressure' },
-                    { keyword: 'arthritis', icon: '🏥', label: 'Arthritis' },
-                    { keyword: 'pain', icon: '🏥', label: 'Chronic Pain' }
-                ];
-                
-                // Activities
-                const activities = [
-                    { keyword: 'walk', icon: '🚶', label: 'Walking' },
-                    { keyword: 'exercise', icon: '💪', label: 'Exercise' },
-                    { keyword: 'yoga', icon: '🧘', label: 'Yoga' },
-                    { keyword: 'swim', icon: '🏊', label: 'Swimming' }
-                ];
-                
-                // Barriers
-                const barriers = [
-                    { keyword: 'difficult', icon: '⚠️', label: 'Difficulty' },
-                    { keyword: 'hard', icon: '⚠️', label: 'Challenge' },
-                    { keyword: 'mobility', icon: '⚠️', label: 'Mobility Issues' }
-                ];
-                
-                // Emotions
-                const emotions = [
-                    { keyword: 'discouraged', icon: '😔', label: 'Feeling Discouraged' },
-                    { keyword: 'frustrated', icon: '😞', label: 'Frustrated' },
-                    { keyword: 'worried', icon: '😰', label: 'Worried' },
-                    { keyword: 'happy', icon: '😊', label: 'Happy' }
-                ];
-                
-                const allKeywords = [
-                    ...conditions.map(c => ({...c, category: 'Condition'})),
-                    ...activities.map(a => ({...a, category: 'Activity'})),
-                    ...barriers.map(b => ({...b, category: 'Barrier'})),
-                    ...emotions.map(e => ({...e, category: 'Emotional'}))
-                ];
-                
-                allKeywords.forEach(item => {
-                    if (lowerContent.includes(item.keyword)) {
-                        setInsights(prev => {
-                            // Avoid duplicates
-                            if (prev.find(i => i.value === item.label)) return prev;
-                            
-                            return [...prev, {
-                                category: item.category,
-                                value: item.label,
-                                confidence: 0.85 + Math.random() * 0.13,
-                                icon: item.icon
-                            }];
-                        });
-                    }
-                });
-            };
-            
-            const startConversation = () => {
-                setMessages([]);
-                setInsights([]);
-                setRouting(null);
-                setResources(null);
-                setResourceAgentStatus('idle');
-                setResourceAgentError(null);
-                setConversationActive(true);
-                
-                connectWebSocket();
-                
-                // Wait for connection then send start message
-                setTimeout(() => {
-                    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-                        wsRef.current.send(JSON.stringify({
-                            type: 'start_conversation',
-                            surveyor_persona_id: selectedSurveyorId,
-                            patient_persona_id: selectedPatientId,
-                            surveyor_prompt_addition: surveyorPromptAddition || undefined,
-                            patient_prompt_addition: patientPromptAddition || undefined
-                        }));
-                    }
-                }, 500);
-            };
-            
-            const stopConversation = () => {
-                if (wsRef.current) {
-                    wsRef.current.send(JSON.stringify({
-                        type: 'stop_conversation'
-                    }));
-                }
-                setConversationActive(false);
-            };
-            
-            return (
-                <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6">
-                    <div className="max-w-7xl mx-auto">
-                        {/* Header */}
-                        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
-                            <div className="flex items-center justify-between">
-                                <div>
-                                    <h1 className="text-3xl font-bold text-slate-800 flex items-center gap-3">
-                                        <span className="text-4xl">🧠</span>
-                                        Agentic AI Survey Simulator
-                                    </h1>
-                                    <p className="text-slate-600 mt-2">Multi-agent health conversation analysis system</p>
-                                </div>
-                                <div className="flex gap-3">
-                                    {!conversationActive ? (
-                                        <button
-                                            onClick={startConversation}
-                                            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center gap-2 transition-all shadow-lg hover:shadow-xl"
-                                        >
-                                            <span>⚡</span>
-                                            Start Conversation
-                                        </button>
-                                    ) : (
-                                        <button
-                                            onClick={stopConversation}
-                                            className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-lg"
-                                        >
-                                            ⏹️ Stop Conversation
-                                        </button>
-                                    )}
-                                </div>
-                            </div>
-
-                            {/* Configuration Panel */}
-                            {!conversationActive && (
-                                <div className="mt-6 border-t border-slate-200 pt-6">
-                                    <div className="flex items-center gap-2 mb-4">
-                                        <span className="text-xl">⚙️</span>
-                                        <h2 className="text-lg font-bold text-slate-800">Configuration</h2>
-                                        <span className="text-xs text-slate-500">(applies to the next run)</span>
-                                    </div>
-
-                                    <div className="grid grid-cols-2 gap-6">
-                                        <div>
-                                            <label className="block text-sm font-semibold text-slate-700 mb-2">Surveyor persona</label>
-                                            <select
-                                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
-                                                value={selectedSurveyorId}
-                                                onChange={(e) => setSelectedSurveyorId(e.target.value)}
-                                            >
-                                                {(personas.surveyors.length ? personas.surveyors : [{id: 'friendly_researcher_001', name: 'Alex Thompson'}]).map(p => (
-                                                    <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
-                                                ))}
-                                            </select>
-                                            <label className="block text-sm font-semibold text-slate-700 mt-4 mb-2">Surveyor prompt addition (optional)</label>
-                                            <textarea
-                                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white h-24"
-                                                placeholder="E.g., Ask shorter questions, focus on follow-ups, avoid advice..."
-                                                value={surveyorPromptAddition}
-                                                onChange={(e) => setSurveyorPromptAddition(e.target.value)}
-                                            />
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-semibold text-slate-700 mb-2">Patient persona</label>
-                                            <select
-                                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
-                                                value={selectedPatientId}
-                                                onChange={(e) => setSelectedPatientId(e.target.value)}
-                                            >
-                                                {(personas.patients.length ? personas.patients : [{id: 'cooperative_senior_001', name: 'Margaret Thompson'}]).map(p => (
-                                                    <option key={p.id} value={p.id}>{p.name} ({p.id})</option>
-                                                ))}
-                                            </select>
-                                            <label className="block text-sm font-semibold text-slate-700 mt-4 mb-2">Patient prompt addition (optional)</label>
-                                            <textarea
-                                                className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white h-24"
-                                                placeholder="E.g., Be brief, focus on daily routines, mention barriers..."
-                                                value={patientPromptAddition}
-                                                onChange={(e) => setPatientPromptAddition(e.target.value)}
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* System Status Bar */}
-                        <div className="bg-white rounded-lg shadow-lg p-4 mb-6">
-                            <div className="grid grid-cols-5 gap-4 text-sm">
-                                <div className="flex items-center gap-2">
-                                    <div className={`w-3 h-3 rounded-full ${connectionStatus === 'connected' ? 'bg-green-500 animate-pulse' : 'bg-gray-300'}`}></div>
-                                    <span className="font-medium">Connection: {connectionStatus}</span>
-                                </div>
-                                <div className="text-slate-600">Messages: {messages.length}</div>
-                                <div className="text-slate-600">Findings: {(resources?.health_situations || []).length}</div>
-                                <div className="text-slate-600">Sent: {stats.sent} | Received: {stats.received}</div>
-                                <div className="text-slate-600">Conv ID: {conversationIdRef.current ? `#${conversationIdRef.current.slice(-6)}` : 'N/A'}</div>
-                            </div>
-                        </div>
-
-                        {/* Main Content Grid */}
-                        <div className="grid grid-cols-3 gap-6">
-                            {/* Left Column - Conversation */}
-                            <div className="col-span-2 space-y-6">
-                                <div className="bg-white rounded-lg shadow-lg p-6">
-                                    <div className="flex items-center gap-2 mb-4">
-                                        <span className="text-2xl">💬</span>
-                                        <h2 className="text-xl font-bold text-slate-800">Live Conversation</h2>
-                                        {conversationActive && <span className="ml-auto text-green-600 font-medium animate-pulse">● LIVE</span>}
-                                    </div>
-                                    <div className="space-y-3 h-96 overflow-y-auto bg-slate-50 p-4 rounded-lg">
-                                        {messages.length === 0 && (
-                                            <div className="text-center text-slate-400 py-20">
-                                                {conversationActive
-                                                    ? '🔄 Waiting for the first messages...'
-                                                    : '👋 Click "Start Conversation" to begin. This panel streams the conversation utterances in real time.'}
-                                            </div>
-                                        )}
-                                        {messages.map((msg, idx) => (
-                                            <div key={idx} className={`p-4 rounded-lg shadow-sm ${msg.role === 'surveyor' ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-l-4 border-green-500'}`}>
-                                                <div className="flex items-center gap-2 mb-1">
-                                                    <span className="font-semibold text-sm">
-                                                        {msg.role === 'surveyor' ? '🔵' : '🟢'} {msg.persona}
-                                                    </span>
-                                                    <span className="text-xs text-slate-500">{msg.time}</span>
-                                                </div>
-                                                <p className="text-slate-700">{msg.text}</p>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* Right Column - Agents */}
-                            <div className="space-y-6">
-                                {/* Insights */}
-                                <div className="bg-white rounded-lg shadow-lg p-6">
-                                    <div className="flex items-center gap-2 mb-4">
-                                        <span className="text-2xl">📊</span>
-                                        <h2 className="text-xl font-bold text-slate-800">Bottom-Up Findings (Emergent Themes)</h2>
-                                        {resourceAgentStatus === 'running' && (
-                                            <span className="ml-auto text-purple-600 font-medium animate-pulse">● RUNNING</span>
-                                        )}
-                                        {((resources?.health_situations || []).length > 0) && (
-                                            <span className="ml-auto bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">
-                                                {(resources?.health_situations || []).length}
-                                            </span>
-                                        )}
-                                    </div>
-                                    <div className="space-y-2 max-h-96 overflow-y-auto">
-                                        {resourceAgentStatus !== 'complete' && (
-                                            <p className="text-slate-400 text-center py-8 text-sm">
-                                                {conversationActive
-                                                    ? 'Runs automatically when the conversation completes. Waiting to generate bottom-up themes...'
-                                                    : 'Runs automatically when the conversation completes. This panel will show bottom-up, evidence-backed emergent themes derived from the transcript (open coding).'}
-                                            </p>
-                                        )}
-                                        {resourceAgentStatus === 'complete' && resources && (
-                                            <>
-                                                {(resources.health_situations || []).length === 0 ? (
-                                                    <p className="text-slate-400 text-center py-8 text-sm">No findings detected.</p>
-                                                ) : (
-                                                    <div className="space-y-3">
-                                                        {(resources.health_situations || []).map((item, idx) => (
-                                                            <div key={idx} className="bg-slate-50 border border-slate-200 rounded-lg p-3">
-                                                                <div className="flex items-center gap-2">
-                                                                    <div className="font-semibold text-slate-800">
-                                                                        {(item.code && String(item.code).trim().length > 0) ? item.code : 'Finding'}
-                                                                    </div>
-                                                                    {typeof item.confidence === 'number' && (
-                                                                        <div className="ml-auto text-xs text-slate-500">
-                                                                            {confidenceToPercent(item.confidence)}%
-                                                                        </div>
-                                                                    )}
-                                                                </div>
-                                                                {item.summary && (
-                                                                    <div className="text-sm text-slate-700 mt-1">
-                                                                        <span className="font-semibold text-slate-700">Summary:</span> {item.summary}
-                                                                    </div>
-                                                                )}
-                                                                <div className="mt-2">
-                                                                    <div className="text-xs font-semibold text-slate-600 mb-1">Evidence:</div>
-                                                                    <div className="space-y-1">
-                                                                    {(item.evidence || []).slice(0, 3).map((ev, evIdx) => {
-                                                                        const { label, snippet } = getEvidenceSnippet(ev);
-                                                                        return (
-                                                                            <div key={evIdx} className="text-xs text-slate-600">
-                                                                                <span className="font-medium text-slate-700">{label}:</span> {snippet}
-                                                                            </div>
-                                                                        );
-                                                                    })}
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        ))}
-                                                    </div>
-                                                )}
-                                            </>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Resource Agent (full-width) */}
-                        <div className="mt-6 bg-white rounded-lg shadow-lg p-6">
-                            <div className="flex items-center gap-2 mb-4">
-                                <span className="text-2xl">📚</span>
-                                <h2 className="text-xl font-bold text-slate-800">Top-Down Coding — Rubric + Codebook</h2>
-                                {resourceAgentStatus === 'running' && (
-                                    <span className="ml-auto text-purple-600 font-medium animate-pulse">● RUNNING</span>
-                                )}
-                            </div>
-                            {resourceAgentStatus === 'idle' && (
-                                <div className="text-slate-400 text-center py-8 text-sm">
-                                    Runs automatically when the conversation completes.
-                                    <div className="mt-3 text-slate-500 text-xs">
-                                        Applies a top-down care experience rubric and additional a priori codebook categories to the transcript, returning evidence-backed findings.
-                                    </div>
-                                </div>
-                            )}
-                            {resourceAgentStatus === 'error' && (
-                                <div className="text-red-600 text-center py-6 text-sm">
-                                    {resourceAgentError || 'Resource agent failed.'}
-                                </div>
-                            )}
-                            {resourceAgentStatus === 'complete' && resources && (
-                                <div className="grid grid-cols-2 gap-6">
-                                    <div className="border border-slate-200 rounded-lg p-4 bg-slate-50">
-                                        {(() => {
-                                            const tdc = resources.top_down_codes || {};
-                                            const sections = [
-                                                { key: 'symptoms_concerns', title: 'Symptoms / concerns' },
-                                                { key: 'daily_management', title: 'Daily management' },
-                                                { key: 'barriers_constraints', title: 'Barriers / constraints' },
-                                                { key: 'support_resources', title: 'Support / resources' },
-                                            ];
-
-                                            const renderItem = (item, idx) => (
-                                                <div key={idx} className="bg-white border border-slate-200 rounded-lg p-3">
-                                                    <div className="flex items-center gap-2">
-                                                        <div className="font-extrabold text-slate-900 text-lg leading-snug">
-                                                            {(item.code && String(item.code).trim().length > 0) ? item.code : 'Code'}
-                                                        </div>
-                                                        {typeof item.confidence === 'number' && (
-                                                            <div className="ml-auto text-xs text-slate-500">
-                                                                {confidenceToPercent(item.confidence)}%
-                                                            </div>
-                                                        )}
-                                                    </div>
-                                                    {item.summary && (
-                                                        <div className="text-sm text-slate-700 mt-1">
-                                                            <span className="font-semibold text-slate-700">Summary:</span> {item.summary}
-                                                        </div>
-                                                    )}
-                                                    <div className="mt-2">
-                                                        <div className="text-xs font-semibold text-slate-600 mb-1">Evidence:</div>
-                                                        <div className="space-y-1">
-                                                            {(item.evidence || []).slice(0, 2).map((ev, evIdx) => {
-                                                                const { label, snippet } = getEvidenceSnippet(ev);
-                                                                return (
-                                                                    <div key={evIdx} className="text-xs text-slate-600">
-                                                                        <span className="font-medium text-slate-700">{label}:</span> {snippet}
-                                                                    </div>
-                                                                );
-                                                            })}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            );
-
-                                            return (
-                                                <div className="space-y-4">
-                                                    {sections.map(section => {
-                                                        const items = (tdc[section.key] || []).slice(0, 3);
-                                                        return (
-                                                            <div key={section.key}>
-                                                                <div className="text-lg font-extrabold text-slate-900 mb-2">
-                                                                    Code: {section.title}
-                                                                </div>
-                                                                {items.length === 0 ? (
-                                                                    <div className="text-slate-400 text-sm">No codes found.</div>
-                                                                ) : (
-                                                                    <div className="space-y-2">
-                                                                        {items.map(renderItem)}
-                                                                    </div>
-                                                                )}
-                                                            </div>
-                                                        );
-                                                    })}
-                                                </div>
-                                            );
-                                        })()}
-                                    </div>
-
-                                    <div className="border border-slate-200 rounded-lg p-4 bg-slate-50">
-                                        <div className="text-lg font-extrabold text-slate-900 mb-2">Care experience rubric</div>
-                                        <div className="space-y-4">
-                                            {(() => {
-                                                const ce = resources.care_experience || {};
-                                                const positive = ce.positive || (ce.sentiment === 'positive' ? ce : null) || null;
-                                                const negative = ce.negative || (ce.sentiment === 'negative' ? ce : null) || null;
-                                                const mixed = ce.mixed || (ce.sentiment === 'mixed' ? ce : null) || null;
-                                                const neutral = ce.neutral || (['neutral', 'mixed', 'unknown'].includes(ce.sentiment) ? ce : null) || null;
-
-                                                const renderCareBox = (title, kind, data, emptyText) => (
-                                                    (() => {
-                                                        const stylesByKind = {
-                                                            positive: { border: 'border-green-200', title: 'text-green-700' },
-                                                            negative: { border: 'border-red-200', title: 'text-red-700' },
-                                                            mixed: { border: 'border-amber-200', title: 'text-amber-700' },
-                                                            neutral: { border: 'border-slate-200', title: 'text-slate-800' },
-                                                        };
-                                                        const styles = stylesByKind[kind] || stylesByKind.neutral;
-                                                        const hasContent = !!(data && (
-                                                            (data.summary && String(data.summary).trim().length > 0) ||
-                                                            (Array.isArray(data.reasons) && data.reasons.length > 0) ||
-                                                            (Array.isArray(data.evidence) && data.evidence.length > 0)
-                                                        ));
-
-                                                        return (
-                                                            <div className={`bg-white border rounded-lg p-3 ${styles.border}`}>
-                                                                <div className={`text-sm font-semibold mb-2 ${styles.title}`}>{title}</div>
-                                                                {!hasContent ? (
-                                                                    <div className="text-slate-500 text-sm">{emptyText}</div>
-                                                                ) : (
-                                                            <>
-                                                                {typeof data.confidence === 'number' && (
-                                                                    <div className="text-xs text-slate-500 mb-1">
-                                                                        Confidence: {confidenceToPercent(data.confidence)}%
-                                                                    </div>
-                                                                )}
-                                                                {data.summary && (
-                                                                    <div className="text-sm text-slate-700">
-                                                                        <span className="font-semibold text-slate-700">Summary:</span> {data.summary}
-                                                                    </div>
-                                                                )}
-                                                                {(data.reasons || []).length > 0 && (
-                                                                    <div className="mt-2 space-y-1">
-                                                                        {(data.reasons || []).slice(0, 5).map((reason, idx) => (
-                                                                            <div key={idx} className="text-xs text-slate-600">- {reason}</div>
-                                                                        ))}
-                                                                    </div>
-                                                                )}
-                                                                <div className="mt-2">
-                                                                    <div className="text-xs font-semibold text-slate-600 mb-1">Evidence:</div>
-                                                                    <div className="space-y-1">
-                                                                        {(data.evidence || []).slice(0, 3).map((ev, idx) => {
-                                                                            const { label, snippet } = getEvidenceSnippet(ev);
-                                                                            return (
-                                                                                <div key={idx} className="text-xs text-slate-600">
-                                                                                    <span className="font-medium text-slate-700">{label}:</span> {snippet}
-                                                                                </div>
-                                                                            );
-                                                                        })}
-                                                                    </div>
-                                                                </div>
-                                                            </>
-                                                        )}
-                                                            </div>
-                                                        );
-                                                    })()
-                                                );
-
-                                                return (
-                                                    <>
-                                                        {renderCareBox('Positive', 'positive', positive, 'No insights found for positive care experience.')}
-                                                        {renderCareBox('Mixed / Tradeoffs', 'mixed', mixed, 'No insights found for mixed/tradeoff care experience.')}
-                                                        {renderCareBox('Negative', 'negative', negative, 'No insights found for negative care experience.')}
-                                                        {renderCareBox('Neutral / Additional', 'neutral', neutral, 'No insights found for neutral/additional care observations.')}
-                                                    </>
-                                                );
-                                            })()}
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Footer */}
-                        {conversationActive && (
-                            <div className="mt-6 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow-lg p-4">
-                                <div className="flex items-center justify-between text-white">
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-xl">📡</span>
-                                        <span className="font-semibold">All Agents Active</span>
-                                    </div>
-                                    <div className="flex gap-6 text-sm">
-                                        <div>Extraction: ✓</div>
-                                        <div>Routing: Standby</div>
-                                        <div>Resources: {resourceAgentStatus}</div>
-                                        <div>QA: ✓</div>
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            );
-        }
-        
-        const root = ReactDOM.createRoot(document.getElementById('root'));
-        root.render(<App />);
-    </script>
-</body>
-</html>
-"""
-    return HTMLResponse(content=html_content)
+async def serve_frontend(request: Request):
+    """Serve login page (if locked) or the single-page React UI."""
+    password = get_app_password()
+    if not password:
+        return HTMLResponse(content=get_main_page_html())
+
+    if not _is_request_authenticated(request, password):
+        return HTMLResponse(content=get_login_page_html(app_name="ConverTA"))
+
+    return HTMLResponse(content=get_main_page_html())
+
+
+@app.post("/login")
+async def login(request: Request, payload: dict):
+    password = get_app_password()
+    if not password:
+        return JSONResponse({"error": "APP_PASSWORD not configured"}, status_code=500)
+
+    supplied = (payload or {}).get("password")
+    if not isinstance(supplied, str):
+        return JSONResponse({"error": "invalid"}, status_code=400)
+    if not constant_time_equals(supplied, password):
+        return JSONResponse({"error": "unauthorized"}, status_code=401)
+
+    token = create_session_token(password)
+    resp = JSONResponse({"ok": True})
+    forwarded = request.headers.get("x-forwarded-proto")
+    secure = (forwarded == "https") or (request.url.scheme == "https")
+    resp.set_cookie(
+        COOKIE_NAME,
+        token,
+        httponly=True,
+        samesite="lax",
+        secure=secure,
+        max_age=7 * 24 * 60 * 60,
+        path="/",
+    )
+    return resp
+
+
+@app.post("/logout")
+async def logout():
+    resp = JSONResponse({"ok": True})
+    resp.delete_cookie(COOKIE_NAME, path="/")
+    return resp
 
 
 @app.websocket("/ws/frontend/{conversation_id}")
 async def frontend_websocket(websocket: WebSocket, conversation_id: str):
     """WebSocket endpoint for frontend connections."""
+    password = get_app_password()
+    if password:
+        token = websocket.cookies.get(COOKIE_NAME)
+        if not _is_authenticated_cookie(token, password):
+            await websocket.close(code=1008)
+            return
+
     await websocket.accept()
     logger.info(f"Frontend WebSocket connected: {conversation_id}")
-    
+
     frontend_connections[conversation_id] = websocket
-    
-    # Create backend WebSocket manager
+
     backend_url = f"{settings.frontend.websocket_url}/{conversation_id}"
-    manager = WebSocketManager(backend_url, conversation_id)
+    internal_headers = None
+    if password:
+        internal_headers = {INTERNAL_HEADER: password}
+    manager = WebSocketManager(backend_url, conversation_id, extra_headers=internal_headers)
     active_managers[conversation_id] = manager
-    
+
     try:
         while True:
-            # Receive message from frontend
             data = await websocket.receive_json()
             message_type = data.get("type")
-            
+
             logger.info(f"Frontend message: {message_type}")
-            
+
             if message_type == "start_conversation":
-                # Start the backend WebSocket manager
                 success = await asyncio.to_thread(manager.start)
-                
+
                 if success:
-                    # Send start message to backend
                     manager.send_message({
                         "type": "start_conversation",
                         "content": "start",
                         "surveyor_persona_id": data.get("surveyor_persona_id", "friendly_researcher_001"),
                         "patient_persona_id": data.get("patient_persona_id", "cooperative_senior_001"),
+                        "surveyor_prompt_addition": data.get("surveyor_prompt_addition"),
+                        "patient_prompt_addition": data.get("patient_prompt_addition"),
                         "host": settings.llm.host,
-                        "model": settings.llm.model
+                        "model": settings.llm.model,
                     })
-                    
-                    # Start forwarding messages from backend to frontend
+
                     asyncio.create_task(forward_backend_messages(conversation_id))
                 else:
                     await websocket.send_json({
                         "type": "error",
-                        "error": f"Failed to connect to backend: {manager.last_error}"
+                        "error": f"Failed to connect to backend: {manager.last_error}",
                     })
-            
+
             elif message_type == "stop_conversation":
-                # Stop conversation
                 manager.send_message({
                     "type": "conversation_control",
                     "content": "stop",
-                    "action": "stop"
+                    "action": "stop",
                 })
                 await asyncio.to_thread(manager.stop)
-                
+
                 await websocket.send_json({
                     "type": "conversation_status",
-                    "status": "stopped"
+                    "status": "stopped",
                 })
-    
+
     except WebSocketDisconnect:
         logger.info(f"Frontend disconnected: {conversation_id}")
     except Exception as e:
         logger.error(f"Error in frontend WebSocket: {e}")
     finally:
-        # Cleanup
         if conversation_id in frontend_connections:
             del frontend_connections[conversation_id]
         if conversation_id in active_managers:
@@ -794,41 +206,37 @@ async def forward_backend_messages(conversation_id: str):
     """Forward messages from backend WebSocket manager to frontend."""
     manager = active_managers.get(conversation_id)
     frontend_ws = frontend_connections.get(conversation_id)
-    
+
     if not manager or not frontend_ws:
         return
-    
+
     logger.info(f"Starting message forwarding for {conversation_id}")
-    
+
     try:
         while conversation_id in active_managers:
-            # Get messages from backend
             messages = manager.get_messages()
-            
-            # Forward to frontend
+
             for message in messages:
                 try:
                     await frontend_ws.send_json(message)
                 except Exception as e:
                     logger.error(f"Error sending to frontend: {e}")
                     return
-            
-            # Send stats
+
             status = manager.get_status()
             try:
                 await frontend_ws.send_json({
                     "type": "stats",
                     "data": {
                         "sent": status["messages_sent"],
-                        "received": status["messages_received"]
-                    }
+                        "received": status["messages_received"],
+                    },
                 })
-            except:
+            except Exception:
                 pass
-            
-            # Wait before checking again
+
             await asyncio.sleep(0.5)
-    
+
     except Exception as e:
         logger.error(f"Error in message forwarding: {e}")
 
@@ -838,12 +246,11 @@ if __name__ == "__main__":
     print("🚀 Starting AI Survey Simulator - React + WebSocket Manager")
     print(f"📡 Backend URL: {settings.frontend.backend_base_url}")
     print(f"🌐 Frontend URL: http://127.0.0.1:{port}")
-    print(f"🔧 Using WebSocketManager for backend connection")
-    print("=" * 60)
-    
+    print("============================================================")
+
     uvicorn.run(
         app,
         host="0.0.0.0",
         port=port,
-        log_level=settings.log_level.lower()
+        log_level=settings.log_level.lower(),
     )

frontend/websocket_manager.py

@@ -47,15 +47,17 @@ class ManagerState(Enum):
 class WebSocketManager:
     """Thread-safe WebSocket manager for Gradio frontend."""
 
-    def __init__(self, url: str, conversation_id: str):
+    def __init__(self, url: str, conversation_id: str, extra_headers: Optional[Dict[str, str]] = None):
         """Initialize WebSocket manager.
 
         Args:
             url: WebSocket server URL
             conversation_id: Unique conversation identifier
+            extra_headers: Optional headers to send during the WebSocket handshake
         """
         self.url = url
         self.conversation_id = conversation_id
+        self.extra_headers = extra_headers
 
         # State management
         self.state = ManagerState.STOPPED
@@ -240,6 +242,7 @@ class WebSocketManager:
 
                 async with websockets.connect(
                     self.url,
+                    extra_headers=self.extra_headers,
                     ping_interval=20,
                     ping_timeout=10
                 ) as websocket:
@@ -351,4 +354,4 @@ class WebSocketManager:
         try:
             self.stop()
         except:
-            pass
+            pass