Merge pull request #6 from Neon-Jordan/master

Demo trio personas, Expert Persona hardening, and mobile UX polish

.env.example

@@ -1,24 +1,30 @@
-# HANA API (Neon BrainForge)
+# Project-local overrides. API keys and shared Neon credentials can live in
+# a cross-project shared.env instead (see README). Values here override shared.env.
+
+# Optional: explicit path to shared secrets (otherwise auto-detected at
+# ~/.secrets/shared.env or ~/Downloads/shared.env)
+# SHARED_ENV_PATH=/Users/you/Downloads/shared.env
+
+# HANA API (Neon BrainForge) — usually provided by shared.env
 HANA_BASE_URL=https://hana.neonaialpha.com
 HANA_USERNAME=guest
 HANA_PASSWORD=password
-# BrainForge/Security (4090-x1-3): OpenAI-compatible API key for direct vLLM (same as HF Space API_KEY in brainforge-webapp).
-# NOT used for HANA /auth/login — see NeonGeckoCom/brainforge-webapp docker_overlay/config/config.yaml
+# BrainForge/Security (4090-x1-3): OpenAI-compatible API key for direct vLLM
 HANA_KLATCHAT_PASSWORD=sk_klatchat2024
-# Direct vLLM host (default matches demo 4090-x1-3)
+# Direct vLLM host (default matches demo 4090-x1-3; shared.env may use VLLM_BASE_URL)
 # NEON_SECURITY_VLLM_BASE_URL=https://4090-x1-3.neonaiservices2.com/vllm0
 
-# Neon vLLM direct access
+# Neon vLLM direct access — usually provided by shared.env
 VLLM_API_KEY=sk_n30nn30n
 
-# Comparison providers
+# Comparison providers — usually provided by shared.env
 FIREWORKS_API_KEY=your-fireworks-api-key-here
 TOGETHER_API_KEY=your-together-api-key-here
 OPENAI_API_KEY=your-openai-api-key-here
 GEMINI_API_KEY=your-gemini-api-key-here
+MISTRAL_API_KEY=your-mistral-api-key-here
 
 # Orchestrator LLM (used to monitor conversation endings)
-# Defaults to gpt-4o-mini via OpenAI if OPENAI_API_KEY is set
 ORCHESTRATOR_MODEL=gpt-4o-mini
 
 # App

.gitignore

@@ -1,6 +1,8 @@
 __pycache__/
 *.pyc
 .env
+shared.env
+**/.secrets/
 node_modules/
 frontend/build/
 .DS_Store

README.md

@@ -67,10 +67,29 @@ displayed, or fed back to the orchestrator/summarizer/Credential builder.
 
 ## Quick Start (local development)
 
+### Shared secrets (`shared.env`)
+
+This project supports a cross-project secrets file (same pattern as other Neon
+Cursor repos). Place API keys in `shared.env` **outside the repo** — never
+commit it. The backend loads it automatically before the project `.env`:
+
+1. `SHARED_ENV_PATH` or `SHARED_ENV_FILE` if set in the shell
+2. `~/.secrets/shared.env`
+3. `~/Downloads/shared.env`
+
+Project `.env` overrides any duplicate keys from `shared.env`.
+
 ```bash
+# Optional: only project-specific overrides (orchestrator model, CORS, etc.)
 cp .env.example .env
-# Edit .env with your API keys
 
+# Or use the dev script (auto-detects shared.env + starts both servers)
+./scripts/dev-local.sh
+```
+
+Manual start:
+
+```bash
 # Backend
 cd backend
 pip install -r requirements.txt
@@ -86,7 +105,8 @@ npm start
 
 ```bash
 cp .env.example .env
-# Edit .env with your API keys
+# Optional: point Docker at your shared secrets file
+export SHARED_ENV_FILE="$HOME/Downloads/shared.env"
 docker compose up --build
 # Open http://localhost:7860
 ```

backend/app/api/chat.py

@@ -47,6 +47,7 @@ from app.services.models import (
     clamp_conversation_limits,
 )
 from app.services.auto_select import auto_select_participants
+from app.services.model_recommend import suggest_model_for_persona
 from app.services.prompts.catalog import build_prompt_catalog
 from app.services.orchestrator import (
     create_session,
@@ -67,19 +68,53 @@ LOG = logging.getLogger(__name__)
 # ---------------------------------------------------------------------------
 
 class GenerateRoleRequest(BaseModel):
-    model_id: str
+    """Structured persona fields → role prompt. `model_id` is ignored (legacy)."""
+
+    model_id: str = ""
     name: str = ""
     profile: str = ""
     identity: str = ""
     samples: str = ""
     role_style: str = "exact"
+    orchestrator_model_id: str | None = None
 
 
 class GenerateRoleFreeformRequest(BaseModel):
-    model_id: str
+    """Freeform persona text → role prompt. `model_id` is ignored (legacy)."""
+
+    model_id: str = ""
     name: str = ""
     text: str = ""
     role_style: str = "ai_completed"
+    orchestrator_model_id: str | None = None
+
+
+class AvailableModelPayload(BaseModel):
+    """One row of the builder's live model list (from allModelsFlat)."""
+
+    id: str
+    name: str = ""
+    provider: str = ""
+    kind: str = "provider"
+
+
+class PanelMemberPayload(BaseModel):
+    """Another participant already in the panel (for diversity hints)."""
+
+    name: str = ""
+    model_id: str = ""
+    provider: str = ""
+
+
+class SuggestModelRequest(BaseModel):
+    """Body of POST /api/chat/suggest-model."""
+
+    persona_name: str = ""
+    source_text: str = ""
+    role_prompt: str = ""
+    available_models: list[AvailableModelPayload]
+    panel_context: list[PanelMemberPayload] = Field(default_factory=list)
+    orchestrator_model_id: str | None = None
 
 
 class SetOrchestratorRequest(BaseModel):
@@ -231,15 +266,35 @@ async def api_set_speed_priority(req: SetSpeedPriorityRequest):
 # Role-prompt generation (used by the Expert Persona modal)
 # ---------------------------------------------------------------------------
 
+async def _builder_neon_model_ids() -> list[str]:
+    """Flat neon:model@ver:persona ids for neutral writer fallback."""
+    ids: list[str] = []
+    try:
+        for nm in await hana_client.get_models():
+            base = nm.get("model_id") or ""
+            for p in nm.get("personas") or []:
+                if p.get("enabled") is False:
+                    continue
+                pname = p.get("persona_name") or ""
+                if base and pname:
+                    ids.append(f"neon:{base}:{pname}")
+    except Exception as exc:
+        LOG.warning("Could not list Neon models for role writer pick: %s", exc)
+    return ids
+
+
 @router.post("/chat/generate-role")
 async def api_generate_role(req: GenerateRoleRequest):
+    neon_ids = await _builder_neon_model_ids()
+    orchestrator_id = req.orchestrator_model_id or settings.orchestrator_model
     result = await generate_role_prompt(
-        model_id=req.model_id,
         name=req.name,
         profile=req.profile,
         identity=req.identity,
         samples=req.samples,
         role_style=req.role_style,
+        orchestrator_model_id=orchestrator_id,
+        extra_model_ids=neon_ids,
     )
     if result.get("error"):
         raise HTTPException(status_code=400, detail=result["error"])
@@ -248,11 +303,40 @@ async def api_generate_role(req: GenerateRoleRequest):
 
 @router.post("/chat/generate-role-freeform")
 async def api_generate_role_freeform(req: GenerateRoleFreeformRequest):
+    neon_ids = await _builder_neon_model_ids()
+    orchestrator_id = req.orchestrator_model_id or settings.orchestrator_model
     result = await generate_role_prompt_freeform(
-        model_id=req.model_id,
         name=req.name,
         text=req.text,
         role_style=req.role_style,
+        orchestrator_model_id=orchestrator_id,
+        extra_model_ids=neon_ids,
+    )
+    if result.get("error"):
+        raise HTTPException(status_code=400, detail=result["error"])
+    return result
+
+
+@router.post("/chat/suggest-model")
+async def api_suggest_model(req: SuggestModelRequest):
+    """Recommend an LLM for an Expert Persona from the builder's model list.
+
+    Returns: {"recommended_model_id": "...", "rationale": "..."} on success,
+    or {"error": "..."} when the description is empty, the model list is
+    empty, or the orchestrator call fails / returns an invalid id.
+    """
+    if not req.available_models:
+        raise HTTPException(400, "At least one available model is required")
+
+    orchestrator_id = req.orchestrator_model_id or settings.orchestrator_model
+    neon_ids = await _builder_neon_model_ids()
+    result = await suggest_model_for_persona(
+        orchestrator_model_id=orchestrator_id,
+        persona_name=req.persona_name,
+        source_text=req.source_text,
+        role_prompt=req.role_prompt,
+        available_models=[m.model_dump() for m in req.available_models],
+        panel_context=[p.model_dump() for p in req.panel_context],
     )
     if result.get("error"):
         raise HTTPException(status_code=400, detail=result["error"])

backend/app/api/personas.py

@@ -2,7 +2,7 @@
 
 `GET /api/personas` returns three sections - Neon HANA personas (with
 vanilla/RAG personas filtered out and display names reformatted via an
-LLM), the four bundled extra personas, and the user-supplied expert
+LLM), the bundled extra personas, and the user-supplied expert
 personas (which are local-only on the frontend but echoed here for
 completeness so the API can act as the source of truth for participant
 choices when needed).

backend/app/config.py

@@ -1,14 +1,44 @@
 from __future__ import annotations
 
+import os
 from pathlib import Path
 
-from pydantic import AliasChoices, Field
-from pydantic_settings import BaseSettings
+from pydantic import AliasChoices, Field, field_validator
+from pydantic_settings import BaseSettings, SettingsConfigDict
 
 _PROJECT_ROOT = Path(__file__).resolve().parent.parent.parent
 _ENV_FILE = _PROJECT_ROOT / ".env"
 
 
+def _shared_env_candidates() -> list[Path]:
+    """Locations for the cross-project shared.env (never committed)."""
+    explicit = (os.getenv("SHARED_ENV_PATH") or os.getenv("SHARED_ENV_FILE") or "").strip()
+    if explicit:
+        return [Path(explicit).expanduser()]
+    return [
+        Path.home() / ".secrets" / "shared.env",
+        Path.home() / "Downloads" / "shared.env",
+    ]
+
+
+def _resolve_shared_env() -> Path | None:
+    for candidate in _shared_env_candidates():
+        if candidate.is_file():
+            return candidate
+    return None
+
+
+def _settings_env_files() -> tuple[str, ...]:
+    """Shared secrets first; project .env overrides."""
+    files: list[str] = []
+    shared = _resolve_shared_env()
+    if shared:
+        files.append(str(shared))
+    if _ENV_FILE.is_file():
+        files.append(str(_ENV_FILE))
+    return tuple(files)
+
+
 class Settings(BaseSettings):
     hana_base_url: str = "https://hana.neonaialpha.com"
     hana_username: str = "guest"
@@ -21,7 +51,10 @@ class Settings(BaseSettings):
         validation_alias=AliasChoices("HANA_KLATCHAT_PASSWORD", "HANA_PASSWORD_KLATCHAT"),
     )
     # Direct vLLM base (no /v1); matches brainforge-webapp docker config 4090-x1-3 host.
-    neon_security_vllm_base_url: str = "https://4090-x1-3.neonaiservices2.com/vllm0"
+    neon_security_vllm_base_url: str = Field(
+        default="https://4090-x1-3.neonaiservices2.com/vllm0",
+        validation_alias=AliasChoices("NEON_SECURITY_VLLM_BASE_URL", "VLLM_BASE_URL"),
+    )
     # Comma-separated model_id values to merge via get_personas when get_models omits them (needs HANA access)
     hana_neon_model_supplement_ids: str = "BrainForge/Security@2026.03.18"
 
@@ -44,7 +77,17 @@ class Settings(BaseSettings):
 
     cors_origins: str = "http://localhost:3000,http://localhost:3001,http://localhost:3002"
 
-    model_config = {"env_file": str(_ENV_FILE), "env_file_encoding": "utf-8"}
+    model_config = SettingsConfigDict(
+        env_file=_settings_env_files(),
+        env_file_encoding="utf-8",
+    )
+
+    @field_validator("neon_security_vllm_base_url", mode="before")
+    @classmethod
+    def _strip_vllm_v1_suffix(cls, value: object) -> object:
+        if isinstance(value, str):
+            return value.rstrip("/").removesuffix("/v1")
+        return value
 
     @property
     def cors_origin_list(self) -> list[str]:
@@ -218,40 +261,3 @@ class Settings(BaseSettings):
 
 
 settings = Settings()
-
-# region agent log
-def _agent_log_settings_env() -> None:
-    import json
-    import time
-
-    _path = r"c:\Users\dream\CCAI-Demo-FEAT_Config\debug-c86901.log"
-    try:
-        raw = _ENV_FILE.read_text(encoding="utf-8") if _ENV_FILE.is_file() else ""
-        data = {
-            "app": "LLMChats3",
-            "env_file": str(_ENV_FILE),
-            "env_file_exists": _ENV_FILE.is_file(),
-            "dotenv_line_HANA_KLATCHAT_PASSWORD": "HANA_KLATCHAT_PASSWORD" in raw,
-            "dotenv_line_HANA_PASSWORD_KLATCHAT": "HANA_PASSWORD_KLATCHAT" in raw,
-            "settings_hana_password_klatchat_nonempty": bool((settings.hana_password_klatchat or "").strip()),
-        }
-        with open(_path, "a", encoding="utf-8") as f:
-            f.write(
-                json.dumps(
-                    {
-                        "sessionId": "c86901",
-                        "hypothesisId": "H1",
-                        "location": "LLMChats3/config.py:settings",
-                        "message": "env_binding",
-                        "data": data,
-                        "timestamp": int(time.time() * 1000),
-                    }
-                )
-                + "\n"
-            )
-    except Exception:
-        pass
-
-
-_agent_log_settings_env()
-# endregion

backend/app/data/demo_questions.json

@@ -2,22 +2,10 @@
   "version": 1,
   "questions": [
     {
-      "id": "best_pet",
-      "category": "lifestyle",
-      "title": "Which is the best pet, cats or dogs?",
-      "text": "Which is the best pet, cats or dogs?"
-    },
-    {
-      "id": "undergrad_majors",
-      "category": "education",
-      "title": "Best undergraduate majors for career prospects",
-      "text": "What are the three best majors for my undergraduate degree? I live in Washington State, USA, and I am starting college in the fall. My biggest priority is to make sure I have good job prospects when I graduate in 2031. I love using AI and exploring new technology, math is one of my strongest subjects, I don't want to travel for my job, and I don't want to have to publish papers as part of my job. I like to talk to people, and to travel. I know a lot about finance because my parents are both accountants. I also love animals."
-    },
-    {
-      "id": "small_business_ai",
-      "category": "small business",
-      "title": "Should a small bakery introduce AI?",
-      "text": "Should I introduce AI tools into my small bakery, and if so, where should I start? I run a single-storefront bakery in a tourist town in Vermont with three full-time employees and four part-timers. We do counter sales, weekend wholesale to two coffee shops, and a small custom-cake business. I'm 54, comfortable with tech but not a developer. My priorities, in order: keep the staff feeling valued, hold the food quality steady, save myself maybe 5-10 hours a week of paperwork, and slowly grow custom-cake revenue. I have about $3,000 a year I could redirect into software or services without straining the books."
+      "id": "build_vs_buy_ai",
+      "category": "tech / business strategy",
+      "title": "Should a company build its own AI system or rely on a third-party provider?",
+      "text": "Should a company build its own AI system or rely on a third-party provider?"
     },
     {
       "id": "rural_water",
@@ -25,6 +13,12 @@
       "title": "Best fix for a small town's failing water system",
       "text": "Our rural town in central Pennsylvania has roughly 1,800 residents and a 1960s-era municipal water system that has had three boil-water advisories in the last two years. We have a small budget and an aging volunteer water board. The state has offered a 50% matching grant but only if we commit to a project plan within nine months. The three options on the table are: (a) replace the existing main lines incrementally over twelve years, (b) consolidate with a neighboring town's larger system, losing local control but gaining redundancy, or (c) install a smaller modern treatment plant of our own with recurring maintenance contracts. Residents are split, and the median household income is around $52,000."
     },
+    {
+      "id": "undergrad_majors",
+      "category": "education",
+      "title": "Best undergraduate majors for career prospects",
+      "text": "What are the three best majors for my undergraduate degree? I live in Washington State, USA, and I am starting college in the fall. My biggest priority is to make sure I have good job prospects when I graduate in 2031. I love using AI and exploring new technology, math is one of my strongest subjects, I don't want to travel for my job, and I don't want to have to publish papers as part of my job. I like to talk to people, and to travel. I know a lot about finance because my parents are both accountants. I also love animals."
+    },
     {
       "id": "acquisition_decision",
       "category": "business / M&A",
@@ -37,6 +31,12 @@
       "title": "AI policy for a public middle school",
       "text": "I'm a principal at a public middle school in Texas, grades 6-8, 480 students. Many of my teachers are quietly using ChatGPT and similar tools to plan lessons and draft feedback. About a third of students are using AI for homework, sometimes well, sometimes to skip thinking entirely. The school board wants me to publish a formal AI policy by the end of the semester. I have to balance student learning, equity (not all students have the same access at home), staff workload, parental concerns about screen time and privacy, and our district's tight budget. Should I lean toward restricting AI, embracing it, or some structured middle path - and what would the most important rules be?"
     },
+    {
+      "id": "small_business_ai",
+      "category": "small business",
+      "title": "Should a small bakery introduce AI?",
+      "text": "Should I introduce AI tools into my small bakery, and if so, where should I start? I run a single-storefront bakery in a tourist town in Vermont with three full-time employees and four part-timers. We do counter sales, weekend wholesale to two coffee shops, and a small custom-cake business. I'm 54, comfortable with tech but not a developer. My priorities, in order: keep the staff feeling valued, hold the food quality steady, save myself maybe 5-10 hours a week of paperwork, and slowly grow custom-cake revenue. I have about $3,000 a year I could redirect into software or services without straining the books."
+    },
     {
       "id": "career_pivot_30s",
       "category": "career",
@@ -49,6 +49,12 @@
       "title": "Buying property knowing the climate is shifting",
       "text": "My partner and I are looking to buy a 5-15 acre property within a four-hour drive of Denver. We want a small homestead - some chickens, a vegetable garden, room for two large dogs - and a place we can live in long term. Our budget is around $550,000 including a modest house. We're worried about climate exposure: wildfire smoke, water-rights pressure on small wells, longer droughts, and how much insurance is going to cost ten years from now. We're also worried about being too far from a hospital. Neither of us has farming experience but we're hands-on. How do we think about which properties to look at, what to actually optimize for, and what we should be willing to compromise on?"
     },
+    {
+      "id": "best_pet",
+      "category": "lifestyle",
+      "title": "Which is the best pet, cats or dogs?",
+      "text": "Which is the best pet, cats or dogs?"
+    },
     {
       "id": "open_source_strategy",
       "category": "tech / business strategy",

backend/app/services/extra_personas.py

@@ -1,4 +1,4 @@
-"""Four bundled "extra" personas powered by non-Neon LLMs.
+"""Bundled "extra" personas powered by provider and Neon LLMs.
 
 Each pairs a discussion lens with a complementary area of expertise so
 they generalize to any question. The user can replace any of them by
@@ -105,6 +105,67 @@ EXTRA_PERSONAS: list[ExtraPersonaSpec] = [
             "it."
         ),
     ),
+    ExtraPersonaSpec(
+        participant_id="extra_elena_financial_strategist",
+        name="Elena — Financial Strategist",
+        default_model_id="gpt-4.1",
+        role_prompt=(
+            "You are Elena, a financial strategist. You evaluate every question "
+            "through cost, return on investment, total cost of ownership, budget "
+            "tradeoffs, and financial risk. You think in three-to-five-year "
+            "horizons and default to back-of-envelope math rather than "
+            "hand-waving. Your tone is pragmatic and numbers-grounded: you "
+            "compare options on unit economics, break-even timing, and what has "
+            "to be true for the numbers to work. You are general-purpose enough "
+            "to join any panel discussion, but you always bring a finance lens — "
+            "opportunity cost, capital allocation, and whether proposed benefits "
+            "justify the spend. You speak in short, clear paragraphs with "
+            "concrete figures when you can estimate them, and you flag when "
+            "someone's case depends on assumptions they have not priced in. You "
+            "update your view when shown credible financial evidence, but you "
+            "ask what the downside looks like on the balance sheet before "
+            "agreeing."
+        ),
+    ),
+    ExtraPersonaSpec(
+        participant_id="extra_marcus_technology_strategist",
+        name="Marcus — Technology Strategist",
+        default_model_id="mistral-small-2603",
+        role_prompt=(
+            "You are Marcus, a technology strategist. You evaluate technical "
+            "feasibility, architecture, build-versus-buy tradeoffs, integration "
+            "complexity, and long-term maintainability. Your tone is direct and "
+            "practical: you focus on what is actually buildable, operable, and "
+            "worth owning. On any topic you ask what the system has to do, what "
+            "already exists to reuse, and where the hard integration or scaling "
+            "risks live. You favor options that ship reliably over clever ones "
+            "that require heroic engineering. You speak in concise, structured "
+            "points, call out hidden dependencies and operational burden, and "
+            "distinguish 'possible in a demo' from 'sustainable in production.' "
+            "You advocate building when the product is the technology itself, "
+            "and buying when the problem is well-served commodity capability. "
+            "You change your mind when someone shows a simpler architecture or "
+            "a realistic delivery path you had not considered."
+        ),
+    ),
+    ExtraPersonaSpec(
+        participant_id="extra_amira_security_advisor",
+        name="Dr. Amira — Security & Privacy Advisor",
+        default_model_id="neon:BrainForge/Security@2026.05.13:CybersecurityExpert",
+        role_prompt=(
+            "You are Dr. Amira, a security and privacy advisor. You evaluate every question "
+            "through the lens of data security, privacy, regulatory and compliance risk, and "
+            "where data actually lives — including retention, subprocessors, data residency, "
+            "and whether sensitive information ever leaves an organization's boundary. Your "
+            "tone is careful, precise, and risk-aware. You weigh the real-world tradeoffs "
+            "between security and practicality rather than defaulting to 'lock everything "
+            "down,' and you flag when a decision depends on the specific regulatory "
+            "environment (healthcare, finance, government, etc.). You give clear, substantive "
+            "replies and engage directly with other participants' points, especially when a "
+            "technical or cost argument has security or privacy implications they haven't "
+            "accounted for."
+        ),
+    ),
 ]
 
 

backend/app/services/model_picker.py

@@ -0,0 +1,62 @@
+"""Pick a neutral, general-purpose model for meta-LLM tasks.
+
+Used by role-prompt generation and model suggestion so those calls do
+not run through a Neon character persona (which injects its own identity).
+"""
+from __future__ import annotations
+
+from app.config import settings
+
+
+def is_neon_character_model_id(model_id: str | None) -> bool:
+    return bool(model_id and model_id.startswith("neon:"))
+
+
+def is_vanilla_neon_model_id(model_id: str | None) -> bool:
+    return is_neon_character_model_id(model_id) and model_id.rsplit(":", 1)[-1] == "vanilla"
+
+
+def pick_general_purpose_model(
+    preferred: str | None = None,
+    *,
+    extra_model_ids: list[str] | None = None,
+) -> str | None:
+    """Return a model id suitable for neutral writing / analysis tasks.
+
+    Resolution order:
+    1. preferred if resolvable and NOT a Neon character
+    2. settings.orchestrator_model if resolvable and NOT Neon
+    3. first resolvable model from settings.providers
+    4. extra_model_ids Neon entries ending in ':vanilla'
+    5. any other resolvable Neon id from extra_model_ids (last resort)
+    """
+    seen: set[str] = set()
+    non_neon: list[str] = []
+    vanilla_neon: list[str] = []
+    other_neon: list[str] = []
+
+    def _bucket(mid: str) -> None:
+        if not mid or mid in seen or not settings.resolve_model(mid):
+            return
+        seen.add(mid)
+        if is_neon_character_model_id(mid):
+            if is_vanilla_neon_model_id(mid):
+                vanilla_neon.append(mid)
+            else:
+                other_neon.append(mid)
+        else:
+            non_neon.append(mid)
+
+    for mid in [preferred, settings.orchestrator_model]:
+        if mid and not is_neon_character_model_id(mid):
+            _bucket(mid)
+
+    for prov in settings.providers:
+        for m in prov.get("models") or []:
+            _bucket((m.get("id") or "").strip())
+
+    for mid in extra_model_ids or []:
+        _bucket((mid or "").strip())
+
+    ordered = non_neon + vanilla_neon + other_neon
+    return ordered[0] if ordered else None

backend/app/services/model_recommend.py

@@ -0,0 +1,351 @@
+"""Suggest an LLM for an Expert Persona based on its prompt text."""
+from __future__ import annotations
+
+import logging
+import re
+from typing import Any
+
+from app.config import settings
+from app.clients.llm_router import chat_completion
+from app.services.json_calls import parse_json_response
+from app.services.model_picker import (
+    is_neon_character_model_id,
+    is_vanilla_neon_model_id,
+    pick_general_purpose_model,
+)
+from app.services.prompts.model_recommend import SUGGEST_MODEL_PROMPT
+from app.utils.sanitize import strip_thinking
+
+LOG = logging.getLogger(__name__)
+
+_SOURCE_TEXT_MAX_CHARS = 4000
+_ROLE_PROMPT_MAX_CHARS = 4000
+
+_SUGGEST_SYSTEM_DIRECTIVE = (
+    "You help users pick an LLM model for a persona. "
+    "Follow the output format in the user message exactly. "
+    "Return ONLY the two requested lines — no preamble, analysis, or markdown."
+)
+
+
+def _truncate(text: str, max_chars: int) -> str:
+    text = (text or "").strip()
+    if len(text) <= max_chars:
+        return text
+    return text[:max_chars].rstrip() + "..."
+
+
+def _models_block(models: list[dict[str, Any]]) -> str:
+    """One line per model: id, display name, provider/family, kind."""
+    lines: list[str] = []
+    for i, m in enumerate(models, start=1):
+        mid = (m.get("id") or "").strip()
+        if not mid:
+            continue
+        name = (m.get("name") or mid).strip()
+        provider = (m.get("provider") or "").strip()
+        family = provider or "Unknown"
+        kind = (m.get("kind") or "provider").strip()
+        lines.append(
+            f"{i}. id={mid} | name={name} | family={family} | kind={kind}"
+        )
+    return "\n".join(lines) if lines else "(no models provided)"
+
+
+def _panel_block(panel: list[dict[str, Any]]) -> str:
+    """Describe other participants already in the panel."""
+    if not panel:
+        return ""
+    lines: list[str] = [
+        "Other participants already in this panel (avoid recommending "
+        "the same model family for every persona when alternatives "
+        "fit equally well):\n",
+    ]
+    for i, p in enumerate(panel, start=1):
+        name = (p.get("name") or "Unnamed").strip()
+        mid = (p.get("model_id") or "").strip()
+        provider = (p.get("provider") or "").strip()
+        lines.append(
+            f"{i}. name={name} | model_id={mid or '(default)'} "
+            f"| family={provider or 'Unknown'}"
+        )
+    lines.append("")
+    return "\n".join(lines)
+
+
+def _validate_model_id(model_id: str | None, models: list[dict[str, Any]]) -> str | None:
+    """Return model_id if it exists in the submitted list, else None."""
+    if not model_id or not isinstance(model_id, str):
+        return None
+    valid = {(m.get("id") or "").strip() for m in models}
+    mid = model_id.strip()
+    return mid if mid in valid else None
+
+
+def _parse_suggest_response(
+    raw: str,
+    models: list[dict[str, Any]],
+) -> tuple[str | None, str]:
+    """Extract recommended_model_id + rationale from LLM output."""
+    parsed = parse_json_response(raw)
+    if isinstance(parsed, dict):
+        rid = parsed.get("recommended_model_id")
+        rat = parsed.get("rationale", "")
+        if isinstance(rid, str) and rid.strip():
+            return rid.strip(), rat.strip() if isinstance(rat, str) else ""
+
+    id_match = re.search(
+        r"recommended_model_id\s*[:=]\s*[\"']?([^\s\"'\n]+)",
+        raw,
+        re.IGNORECASE,
+    )
+    if id_match:
+        rid = id_match.group(1).strip().strip('"').strip("'")
+        rat_match = re.search(
+            r"rationale\s*[:=]\s*(.+)",
+            raw,
+            re.IGNORECASE | re.DOTALL,
+        )
+        rationale = rat_match.group(1).strip() if rat_match else ""
+        validated = _validate_model_id(rid, models)
+        if validated:
+            return validated, rationale
+
+    for model in sorted(models, key=lambda m: len(m.get("id") or ""), reverse=True):
+        mid = (model.get("id") or "").strip()
+        if mid and mid in raw:
+            return mid, "Inferred from model analysis."
+
+    raw_lower = raw.lower()
+    for model in models:
+        name = (model.get("name") or "").strip()
+        if name and len(name) >= 4 and name.lower() in raw_lower:
+            mid = (model.get("id") or "").strip()
+            if mid:
+                return mid, "Inferred from model name in response."
+        provider = (model.get("provider") or "").strip()
+        for part in provider.replace(",", "/").split("/"):
+            token = part.strip()
+            if len(token) >= 6 and token.lower() in raw_lower:
+                mid = (model.get("id") or "").strip()
+                if mid:
+                    return mid, f"Inferred from '{token}' in response."
+
+    return None, ""
+
+
+def _meta_model_candidates(
+    preferred: str,
+    available_models: list[dict[str, Any]],
+) -> list[str]:
+    """Ordered model ids for the meta-LLM call (neutral writer first)."""
+    extra = [(m.get("id") or "").strip() for m in available_models]
+    seen: set[str] = set()
+    out: list[str] = []
+
+    primary = pick_general_purpose_model(preferred, extra_model_ids=extra)
+    for mid in [primary]:
+        if mid and mid not in seen:
+            seen.add(mid)
+            out.append(mid)
+
+    for prov in settings.providers:
+        for m in prov.get("models") or []:
+            mid = (m.get("id") or "").strip()
+            if (
+                mid
+                and mid not in seen
+                and not is_neon_character_model_id(mid)
+                and settings.resolve_model(mid)
+            ):
+                seen.add(mid)
+                out.append(mid)
+
+    for m in available_models:
+        mid = (m.get("id") or "").strip()
+        if (
+            mid
+            and mid not in seen
+            and is_vanilla_neon_model_id(mid)
+            and settings.resolve_model(mid)
+        ):
+            seen.add(mid)
+            out.append(mid)
+
+    return out
+
+
+def _source_mentions_neon_character(source_text: str, model: dict[str, Any]) -> bool:
+    """True when source text plausibly references this named Neon character."""
+    source_lower = (source_text or "").lower()
+    if not source_lower:
+        return False
+
+    tokens: set[str] = set()
+    name = (model.get("name") or "").strip().lower()
+    if name and name != "vanilla" and len(name) >= 4:
+        tokens.add(name)
+
+    provider = (model.get("provider") or "")
+    for part in provider.replace("/", " ").replace(",", " ").split():
+        token = part.strip().lower()
+        if len(token) >= 5 and token not in ("neon", "vanilla", "brainforge"):
+            tokens.add(token)
+
+    mid = (model.get("id") or "")
+    if is_neon_character_model_id(mid):
+        base = mid.split(":", 2)[1] if mid.count(":") >= 2 else ""
+        for segment in base.replace("@", "/").split("/"):
+            token = segment.strip().lower()
+            if len(token) >= 5:
+                tokens.add(token)
+
+    return any(token in source_lower for token in tokens)
+
+
+def _deprioritize_neon_mismatch(
+    recommended_id: str,
+    source_text: str,
+    models: list[dict[str, Any]],
+) -> str:
+    """Swap named Neon picks that don't match source for a general model."""
+    if len(models) <= 1:
+        return recommended_id
+
+    model_by_id = {m["id"]: m for m in models if (m.get("id") or "").strip()}
+    rec = model_by_id.get(recommended_id)
+    if not rec:
+        return recommended_id
+
+    kind = (rec.get("kind") or "provider").strip()
+    if kind != "neon_character" or is_vanilla_neon_model_id(recommended_id):
+        return recommended_id
+
+    if _source_mentions_neon_character(source_text, rec):
+        return recommended_id
+
+    LOG.warning(
+        "Neon character %s does not match source description; preferring general model",
+        recommended_id,
+    )
+
+    for m in models:
+        if (m.get("kind") or "provider") == "provider":
+            return m["id"]
+    for m in models:
+        if is_vanilla_neon_model_id(m.get("id")):
+            return m["id"]
+    return recommended_id
+
+
+async def _meta_suggest_call(model_id: str, user_prompt: str) -> str:
+    """Run the suggestion meta-LLM via chat_completion (Neon + external)."""
+    resolved = settings.resolve_model(model_id)
+    if not resolved:
+        return ""
+
+    messages = [
+        {"role": "system", "content": _SUGGEST_SYSTEM_DIRECTIVE},
+        {"role": "user", "content": user_prompt},
+    ]
+    try:
+        result = await chat_completion(
+            resolved=resolved,
+            messages=messages,
+            temperature=0.2,
+            max_tokens=256,
+            timeout=45,
+        )
+    except Exception as exc:
+        LOG.exception("suggest_model meta-LLM call failed: %s", exc)
+        return ""
+
+    if result.get("error"):
+        LOG.warning("suggest_model meta-LLM error: %s", result.get("response"))
+        return ""
+
+    return strip_thinking(result.get("response", ""))
+
+
+async def suggest_model_for_persona(
+    *,
+    orchestrator_model_id: str,
+    persona_name: str,
+    source_text: str = "",
+    role_prompt: str = "",
+    available_models: list[dict[str, Any]],
+    panel_context: list[dict[str, Any]] | None = None,
+) -> dict[str, Any]:
+    """Return {recommended_model_id, rationale} or {error: str}."""
+    source = _truncate(source_text, _SOURCE_TEXT_MAX_CHARS)
+    prompt_text = _truncate(role_prompt, _ROLE_PROMPT_MAX_CHARS)
+
+    if not source and not prompt_text:
+        return {
+            "error": (
+                "Enter a description or role prompt for a model to be suggested."
+            ),
+        }
+
+    models = [m for m in available_models if (m.get("id") or "").strip()]
+    if not models:
+        return {"error": "No models available to recommend from."}
+
+    if len(models) == 1:
+        only = models[0]
+        return {
+            "recommended_model_id": only["id"],
+            "rationale": "Only one model is available in the builder.",
+        }
+
+    panel = panel_context or []
+    user_prompt = SUGGEST_MODEL_PROMPT.format(
+        persona_name=(persona_name or "Unnamed").strip(),
+        source_text=source or "(not provided — rely on role prompt below)",
+        role_prompt=prompt_text or "(not provided — rely on description above)",
+        models_block=_models_block(models),
+        panel_block=_panel_block(panel),
+    )
+
+    meta_candidates = _meta_model_candidates(orchestrator_model_id, models)
+    if not meta_candidates:
+        return {
+            "error": "Model suggestion unavailable — no LLM configured to run the analysis.",
+        }
+
+    recommended: str | None = None
+    rationale = ""
+    for meta_model_id in meta_candidates:
+        raw = await _meta_suggest_call(meta_model_id, user_prompt)
+        recommended, rationale = _parse_suggest_response(raw, models)
+        if recommended and _validate_model_id(recommended, models):
+            break
+        recommended = None
+        rationale = ""
+
+    validated = _validate_model_id(recommended, models)
+    if not validated:
+        LOG.warning(
+            "suggest_model returned invalid id %r; valid=%s",
+            recommended,
+            [m.get("id") for m in models[:5]],
+        )
+        return {
+            "error": "Model suggestion unavailable — please pick manually.",
+        }
+
+    validated = _deprioritize_neon_mismatch(validated, source, models)
+
+    if not settings.resolve_model(validated):
+        LOG.warning("suggest_model picked unresolvable id %s", validated)
+        return {
+            "error": "Suggested model is no longer available — please pick manually.",
+        }
+
+    if not rationale:
+        rationale = "Recommended based on persona fit."
+
+    return {
+        "recommended_model_id": validated,
+        "rationale": rationale,
+    }

backend/app/services/persona.py

@@ -4,9 +4,33 @@ import logging
 
 from app.clients.llm_router import chat_completion
 from app.config import settings
+from app.services.model_picker import pick_general_purpose_model
 
 LOG = logging.getLogger(__name__)
 
+_ROLE_WRITER_SYSTEM = (
+    "You are a helpful assistant that creates role prompts for LLM participants. "
+    "Respond ONLY with the finished role prompt text — no reasoning, analysis, "
+    "draft notes, questions to the user, or meta-commentary.\n\n"
+    "STRICT RULES:\n"
+    "- Do NOT invent a personal name unless one is explicitly provided in the name field.\n"
+    "- Do NOT invent hobbies, side interests, employers, blogs, websites, or domains "
+    "not stated in the user's input.\n"
+    "- Do NOT add conversational filler or questions (e.g. 'What do you think?').\n"
+    "- Write in second person ('You are…') so another LLM can embody the persona."
+)
+
+_ANTI_INVENTION_AI = (
+    "\n\nIMPORTANT: You may elaborate on tone, speech patterns, and professional style "
+    "implied by the stated identity, but stay strictly within the user's described domain. "
+    "Do NOT add unrelated interests, fictional backstory, or new subject areas."
+)
+
+_ANTI_INVENTION_EXACT = (
+    "\n\nIMPORTANT: Use ONLY the information explicitly provided. Do not invent names "
+    "(unless given in the name field), hobbies, employers, blogs, or other facts."
+)
+
 # ---------------------------------------------------------------------------
 # Structured input prompts
 # ---------------------------------------------------------------------------
@@ -16,15 +40,17 @@ STRUCTURED_AI_COMPLETED_PROMPT = (
     "statement, a profile, and optionally writing/speech samples. Some fields may be sparse or "
     "missing. Write a complete, vivid 3-5 sentence role prompt that an LLM can use to "
     "convincingly embody this persona in a conversation.\n\n"
-    "If any fields are sparse, infer plausible personality traits, speech patterns, interests, "
-    "and conversational style from whatever clues are available. Fill in realistic detail so "
-    "the role prompt is rich and actionable — never produce a vague or skeletal prompt.\n\n"
-    "Cover: personality, tone and speech patterns, background/expertise, interests and "
-    "motivations, and how they would naturally interact in a casual conversation.\n\n"
+    "If any fields are sparse, infer plausible personality traits, speech patterns, and "
+    "conversational style from whatever clues are available — but only within the professional "
+    "or personal domain the user described. Fill in realistic detail so the role prompt is "
+    "rich and actionable — never produce a vague or skeletal prompt.\n\n"
+    "Cover: personality, tone and speech patterns, background/expertise, and how they would "
+    "naturally interact in a group discussion.\n\n"
     "The name is: {name}\n"
     "The identity statement is: {identity}\n"
     "The profile is: {profile}\n"
     "Here are the writing and/or speech samples: {samples}"
+    + _ANTI_INVENTION_AI
 )
 
 STRUCTURED_EXACT_PROMPT = (
@@ -41,6 +67,7 @@ STRUCTURED_EXACT_PROMPT = (
     "The identity statement is: {identity}\n"
     "The profile is: {profile}\n"
     "Here are the writing and/or speech samples: {samples}"
+    + _ANTI_INVENTION_EXACT
 )
 
 # ---------------------------------------------------------------------------
@@ -52,15 +79,17 @@ FREEFORM_AI_COMPLETED_PROMPT = (
     "detailed (with writing samples, background, etc.) or very brief (just a name or a short "
     "description). Regardless of how much is provided, write a complete, vivid 3-5 sentence "
     "role prompt that an LLM can use to convincingly embody this persona in a conversation.\n\n"
-    "If the input is sparse, infer plausible personality traits, speech patterns, interests, "
-    "and conversational style from whatever clues are available (the name, any title or "
-    "occupation, context, etc.). Fill in realistic detail so the role prompt is rich and "
-    "actionable — never produce a vague or skeletal prompt.\n\n"
-    "Cover: personality, tone and speech patterns, background/expertise, interests and "
-    "motivations, and how they would naturally interact in a casual conversation.\n\n"
+    "If the input is sparse, infer plausible personality traits, speech patterns, and "
+    "conversational style from whatever clues are available (the name, any title or "
+    "occupation, context, etc.) — but only within the domain the user described. Fill in "
+    "realistic detail so the role prompt is rich and actionable — never produce a vague or "
+    "skeletal prompt.\n\n"
+    "Cover: personality, tone and speech patterns, background/expertise, and how they would "
+    "naturally interact in a group discussion.\n\n"
     "The persona's name is: {name}\n\n"
     "Here is everything provided about this persona:\n"
     "---\n{text}\n---"
+    + _ANTI_INVENTION_AI
 )
 
 FREEFORM_EXACT_PROMPT = (
@@ -75,20 +104,20 @@ FREEFORM_EXACT_PROMPT = (
     "The persona's name is: {name}\n\n"
     "Here is everything provided about this persona:\n"
     "---\n{text}\n---"
+    + _ANTI_INVENTION_EXACT
 )
 
 
 async def _call_llm(model_id: str, prompt_text: str) -> dict:
     resolved = settings.resolve_model(model_id)
     if not resolved:
-        return {"role_prompt": "", "error": f"Unknown model: {model_id}"}
+        return {
+            "role_prompt": "",
+            "error": f"No neutral model available to generate the role prompt.",
+        }
 
     messages = [
-        {"role": "system", "content": (
-            "You are a helpful assistant that creates character prompts. "
-            "Respond ONLY with the finished role prompt text. Do NOT include your reasoning, "
-            "thought process, analysis, draft notes, or any meta-commentary."
-        )},
+        {"role": "system", "content": _ROLE_WRITER_SYSTEM},
         {"role": "user", "content": prompt_text},
     ]
 
@@ -106,18 +135,34 @@ async def _call_llm(model_id: str, prompt_text: str) -> dict:
     return {
         "role_prompt": result["response"],
         "elapsed_seconds": result["elapsed_seconds"],
+        "writer_model_id": model_id,
     }
 
 
+async def _resolve_writer_model(
+    orchestrator_model_id: str | None,
+    extra_model_ids: list[str] | None,
+) -> str | None:
+    return pick_general_purpose_model(
+        orchestrator_model_id,
+        extra_model_ids=extra_model_ids,
+    )
+
+
 async def generate_role_prompt(
-    model_id: str,
     name: str,
     profile: str,
     identity: str,
     samples: str,
     role_style: str = "exact",
+    orchestrator_model_id: str | None = None,
+    extra_model_ids: list[str] | None = None,
 ) -> dict:
-    """Use the selected LLM to distill structured persona inputs into a role prompt."""
+    """Distill structured persona inputs into a role prompt via a neutral writer model."""
+    writer_id = await _resolve_writer_model(orchestrator_model_id, extra_model_ids)
+    if not writer_id:
+        return {"role_prompt": "", "error": "No model available to generate the role prompt."}
+
     template = STRUCTURED_AI_COMPLETED_PROMPT if role_style == "ai_completed" else STRUCTURED_EXACT_PROMPT
     prompt_text = template.format(
         name=name or "(not provided)",
@@ -125,19 +170,24 @@ async def generate_role_prompt(
         profile=profile or "(not provided)",
         samples=samples or "(not provided)",
     )
-    return await _call_llm(model_id, prompt_text)
+    return await _call_llm(writer_id, prompt_text)
 
 
 async def generate_role_prompt_freeform(
-    model_id: str,
     name: str,
     text: str,
     role_style: str = "ai_completed",
+    orchestrator_model_id: str | None = None,
+    extra_model_ids: list[str] | None = None,
 ) -> dict:
-    """Use the selected LLM to distill a single freeform text block into a role prompt."""
+    """Distill a freeform text block into a role prompt via a neutral writer model."""
+    writer_id = await _resolve_writer_model(orchestrator_model_id, extra_model_ids)
+    if not writer_id:
+        return {"role_prompt": "", "error": "No model available to generate the role prompt."}
+
     template = FREEFORM_AI_COMPLETED_PROMPT if role_style == "ai_completed" else FREEFORM_EXACT_PROMPT
     prompt_text = template.format(
         name=name or "(not provided)",
         text=text or "(not provided)",
     )
-    return await _call_llm(model_id, prompt_text)
+    return await _call_llm(writer_id, prompt_text)

backend/app/services/prompts/__init__.py

@@ -38,6 +38,7 @@ from app.services.prompts.closure import (
     CONTRIBUTION_SUMMARY_PROMPT,
 )
 from app.services.prompts.auto_select import AUTO_SELECT_PARTICIPANTS_PROMPT
+from app.services.prompts.model_recommend import SUGGEST_MODEL_PROMPT
 from app.services.prompts.credential_intake import (
     CREDENTIAL_INTAKE_EMPTY_TRANSCRIPT,
     CREDENTIAL_INTAKE_TURN_PROMPT,
@@ -67,6 +68,7 @@ __all__ = [
     "NO_CONSENSUS_REPORT_PROMPT",
     "CONTRIBUTION_SUMMARY_PROMPT",
     "AUTO_SELECT_PARTICIPANTS_PROMPT",
+    "SUGGEST_MODEL_PROMPT",
     "CREDENTIAL_INTAKE_TURN_PROMPT",
     "CREDENTIAL_INTAKE_EMPTY_TRANSCRIPT",
 ]

backend/app/services/prompts/model_recommend.py

@@ -0,0 +1,42 @@
+"""Prompt for the Expert Persona "Suggest a model" feature.
+
+The meta-LLM reads the user's original description (primary) and an
+optional generated role prompt (secondary) to pick the best-fit model
+from the builder's live model list.
+"""
+
+SUGGEST_MODEL_PROMPT = (
+    "You are helping a user pick an LLM to power one participant in a "
+    "Collaborative Conversational AI (CCAI) group discussion.\n\n"
+    "CCAI design principle: model diversity across the panel matters. "
+    "When several models are similarly good fits, prefer one that "
+    "diversifies the panel (different model families / kinds).\n\n"
+    "Persona name: {persona_name}\n\n"
+    "User's original description (authoritative — weight this most heavily):\n"
+    "<<<\n{source_text}\n>>>\n\n"
+    "Generated role prompt (secondary — may contain LLM additions; treat "
+    "details NOT present in the user's description as low-trust):\n"
+    "<<<\n{role_prompt}\n>>>\n\n"
+    "Available models (pick ONLY from this list — use the exact `id` "
+    "values):\n"
+    "{models_block}\n\n"
+    "{panel_block}"
+    "Recommend the single most suitable model for embodying this persona.\n\n"
+    "Selection rules:\n"
+    "- Weight the user's core professional identity and task over incidental "
+    "phrases or hobbies. Do NOT match on a single off-topic keyword.\n"
+    "- Choose by capability and reasoning fit, NOT by keyword overlap with "
+    "model names or provider labels.\n"
+    "- For general professional personas, prefer kind=provider general "
+    "instruct models.\n"
+    "- Use kind=neon_character only when the user's description clearly "
+    "calls for that specific domain, voice, or character type.\n"
+    "- When panel context is provided, spread recommendations across model "
+    "families when alternatives fit equally well.\n\n"
+    "IMPORTANT: Your entire reply must be EXACTLY two lines and nothing else "
+    "(no preamble, no analysis, no markdown):\n"
+    "recommended_model_id: <exact id from the list above>\n"
+    "rationale: <one or two plain sentences>\n\n"
+    "The recommended_model_id MUST be copied exactly from the id= field "
+    "in the list above. Do not invent ids."
+)

backend/tests/test_model_picker.py

@@ -0,0 +1,54 @@
+"""Tests for neutral general-purpose model selection."""
+from unittest.mock import patch
+
+from app.services.model_picker import (
+    is_neon_character_model_id,
+    is_vanilla_neon_model_id,
+    pick_general_purpose_model,
+)
+
+
+def test_is_neon_character_model_id():
+    assert is_neon_character_model_id("neon:BrainForge/X@1:vanilla")
+    assert not is_neon_character_model_id("gpt-4o-mini")
+
+
+def test_is_vanilla_neon_model_id():
+    assert is_vanilla_neon_model_id("neon:BrainForge/X@1:vanilla")
+    assert not is_vanilla_neon_model_id("neon:BrainForge/X@1:NucleotidingsAI")
+
+
+def test_pick_prefers_non_neon_orchestrator():
+    with patch("app.services.model_picker.settings") as mock_settings:
+        mock_settings.orchestrator_model = "gpt-4o-mini"
+        mock_settings.providers = []
+        mock_settings.resolve_model.side_effect = lambda mid: (
+            {"model_id": mid} if mid == "gpt-4o-mini" else None
+        )
+        assert pick_general_purpose_model() == "gpt-4o-mini"
+
+
+def test_pick_provider_when_orchestrator_unresolvable():
+    with patch("app.services.model_picker.settings") as mock_settings:
+        mock_settings.orchestrator_model = "gpt-4o-mini"
+        mock_settings.providers = [{
+            "models": [{"id": "gemini-2.0-flash", "name": "Gemini 2.0 Flash"}],
+        }]
+        mock_settings.resolve_model.side_effect = lambda mid: (
+            {"model_id": mid} if mid == "gemini-2.0-flash" else None
+        )
+        assert pick_general_purpose_model() == "gemini-2.0-flash"
+
+
+def test_pick_vanilla_before_named_neon_character():
+    vanilla = "neon:BrainForge/NucleotidingsLLM@2026.05.23:vanilla"
+    named = "neon:BrainForge/NucleotidingsLLM@2026.05.23:NucleotidingsAI"
+    with patch("app.services.model_picker.settings") as mock_settings:
+        mock_settings.orchestrator_model = "gpt-4o-mini"
+        mock_settings.providers = []
+        mock_settings.resolve_model.side_effect = lambda mid: (
+            {"model_id": mid, "is_neon": mid.startswith("neon:")}
+            if mid in {vanilla, named}
+            else None
+        )
+        assert pick_general_purpose_model(extra_model_ids=[named, vanilla]) == vanilla

backend/tests/test_model_recommend.py

@@ -0,0 +1,129 @@
+"""Tests for model recommendation validation helpers."""
+
+from app.services.model_recommend import (
+    _deprioritize_neon_mismatch,
+    _models_block,
+    _parse_suggest_response,
+    _validate_model_id,
+)
+from app.services.prompts.model_recommend import SUGGEST_MODEL_PROMPT
+
+MODELS = [
+    {
+        "id": "neon:BrainForge/NucleotidingsLLM@2026.05.23:vanilla",
+        "name": "vanilla",
+        "provider": "Neon / NucleotidingsLLM",
+        "kind": "neon_character",
+    },
+    {
+        "id": "neon:BrainForge/NucleotidingsLLM@2026.05.23:NucleotidingsAI",
+        "name": "NucleotidingsAI",
+        "provider": "Neon / NucleotidingsLLM",
+        "kind": "neon_character",
+    },
+    {
+        "id": "neon:BrainForge/LogisticsLLM@2026.01.20:vanilla",
+        "name": "vanilla",
+        "provider": "Neon / LogisticsLLM",
+        "kind": "neon_character",
+    },
+]
+
+
+def test_validate_model_id_accepts_known_id():
+    models = [
+        {"id": "gpt-4o", "name": "GPT-4o", "provider": "OpenAI"},
+        {"id": "gemini-2.5-flash", "name": "Gemini 2.5 Flash", "provider": "Google Gemini"},
+    ]
+    assert _validate_model_id("gpt-4o", models) == "gpt-4o"
+
+
+def test_validate_model_id_rejects_unknown():
+    models = [{"id": "gpt-4o", "name": "GPT-4o", "provider": "OpenAI"}]
+    assert _validate_model_id("made-up", models) is None
+    assert _validate_model_id(None, models) is None
+
+
+def test_validate_model_id_strips_whitespace():
+    models = [{"id": "gpt-4o", "name": "GPT-4o", "provider": "OpenAI"}]
+    assert _validate_model_id("  gpt-4o  ", models) == "gpt-4o"
+
+
+def test_models_block_includes_kind():
+    block = _models_block(MODELS[:1])
+    assert "kind=neon_character" in block
+    assert "id=neon:BrainForge/NucleotidingsLLM@2026.05.23:vanilla" in block
+
+
+def test_suggest_prompt_includes_source_and_role():
+    formatted = SUGGEST_MODEL_PROMPT.format(
+        persona_name="Marketer",
+        source_text="B2B demand generation specialist",
+        role_prompt="You are a lifecycle marketer...",
+        models_block="1. id=gpt-4o | name=GPT-4o | family=OpenAI | kind=provider",
+        panel_block="",
+    )
+    assert "User's original description (authoritative" in formatted
+    assert "B2B demand generation specialist" in formatted
+    assert "Generated role prompt (secondary" in formatted
+    assert "kind=provider" in formatted
+
+
+def test_parse_line_format():
+    raw = (
+        "recommended_model_id: neon:BrainForge/LogisticsLLM@2026.01.20:vanilla\n"
+        "rationale: Good fit for structured reasoning."
+    )
+    rid, rat = _parse_suggest_response(raw, MODELS)
+    assert rid == "neon:BrainForge/LogisticsLLM@2026.01.20:vanilla"
+    assert "reasoning" in rat
+
+
+def test_parse_prose_mentions_provider_token():
+    raw = (
+        "The Neon NucleotidingsLLM is designed for handling nuclear and "
+        "complex scientific information, which suits this persona well."
+    )
+    rid, _rat = _parse_suggest_response(raw, MODELS)
+    assert rid == "neon:BrainForge/NucleotidingsLLM@2026.05.23:vanilla"
+
+
+def test_deprioritize_neon_mismatch_swaps_named_character():
+    b2b_source = (
+        "Senior B2B demand generation marketer focused on lifecycle campaigns "
+        "and pipeline analytics."
+    )
+    bad_pick = "neon:BrainForge/NucleotidingsLLM@2026.05.23:NucleotidingsAI"
+    adjusted = _deprioritize_neon_mismatch(bad_pick, b2b_source, MODELS)
+    assert adjusted != bad_pick
+    assert adjusted.endswith(":vanilla")
+
+
+def test_deprioritize_neon_keeps_vanilla():
+    b2b_source = "B2B marketer"
+    vanilla = "neon:BrainForge/NucleotidingsLLM@2026.05.23:vanilla"
+    assert _deprioritize_neon_mismatch(vanilla, b2b_source, MODELS) == vanilla
+
+
+def test_deprioritize_neon_keeps_when_source_matches_domain():
+    nuclear_source = "Nuclear energy policy analyst using NucleotidingsLLM data."
+    named = "neon:BrainForge/NucleotidingsLLM@2026.05.23:NucleotidingsAI"
+    assert _deprioritize_neon_mismatch(named, nuclear_source, MODELS) == named
+
+
+def test_suggest_requires_source_or_role():
+    import asyncio
+
+    from app.services.model_recommend import suggest_model_for_persona
+
+    result = asyncio.run(
+        suggest_model_for_persona(
+            orchestrator_model_id="gpt-4o",
+            persona_name="Test",
+            source_text="",
+            role_prompt="",
+            available_models=MODELS,
+        )
+    )
+    assert "error" in result
+    assert "description or role prompt" in result["error"]

docker-compose.yml

@@ -7,6 +7,9 @@ services:
       # or the environment so local devs can sidestep port conflicts.
       - "${CCAI_HOST_PORT:-7860}:7860"
     env_file:
+      # Optional cross-project secrets file (set SHARED_ENV_FILE in shell).
+      - path: ${SHARED_ENV_FILE}
+        required: false
       - .env
     environment:
       CORS_ORIGINS: "http://localhost:7860,http://localhost:3000"

frontend/package-lock.json

@@ -16771,22 +16771,6 @@
         }
       }
     },
-    "node_modules/tailwindcss/node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "extraneous": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",

frontend/src/App.js

@@ -48,12 +48,16 @@ function appendInlineChatNote(setMessages, text, extra = {}) {
 export default function App() {
   // Persistent state
   const persisted = useMemo(() => storage.loadState(), []);
+  const initialParticipants = useMemo(
+    () => storage.resolveInitialParticipants(persisted),
+    [persisted],
+  );
   const [theme, setTheme] = useState(() => persisted.theme
     || (window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
   );
   const [expertPersonas, setExpertPersonas] = useState(persisted.expert_personas || []);
-  const [selectedIds, setSelectedIds] = useState(persisted.participants_selected || []);
-  const [enabledMap, setEnabledMap] = useState(persisted.participants_enabled || {});
+  const [selectedIds, setSelectedIds] = useState(initialParticipants.selectedIds);
+  const [enabledMap, setEnabledMap] = useState(initialParticipants.enabledMap);
   const [modelAssignments, setModelAssignments] = useState(persisted.model_assignments || {});
   const [orchestratorModel, setOrchestratorModelState] = useState(persisted.orchestrator_model_id);
   const [summarizerModel, setSummarizerModelState] = useState(persisted.summarizer_model_id);
@@ -216,7 +220,7 @@ export default function App() {
     const list = [];
     for (const p of providers) {
       for (const m of p.models) {
-        list.push({ id: m.id, name: m.name, provider: p.name });
+        list.push({ id: m.id, name: m.name, provider: p.name, kind: 'provider' });
       }
     }
     for (const nm of neonModels) {
@@ -226,12 +230,22 @@ export default function App() {
           id: `neon:${nm.model_id}:${p.persona_name}`,
           name: p.persona_name,
           provider: `Neon / ${nm.name.split('/').pop()}`,
+          kind: 'neon_character',
         });
       }
     }
     return list;
   }, [providers, neonModels]);
 
+  // Default for new Expert Personas: orchestrator if it's in the builder
+  // list, otherwise the first model the user can actually pick.
+  const expertDefaultModelId = useMemo(() => {
+    if (orchestratorModel && allModelsFlat.some(m => m.id === orchestratorModel)) {
+      return orchestratorModel;
+    }
+    return allModelsFlat[0]?.id || '';
+  }, [orchestratorModel, allModelsFlat]);
+
   // Map neon:model@ver:persona ids -> HANA system_prompt (from /api/models).
   const neonPromptByModelId = useMemo(() => {
     const map = {};
@@ -280,6 +294,23 @@ export default function App() {
     return humanCatalogEntry ? [humanCatalogEntry, ...fromCatalog] : fromCatalog;
   }, [selectedIds, allCatalogParticipants, humanCatalogEntry]);
 
+  // Other panel members sent to the Expert Persona "Suggest a model"
+  // action so recommendations can favor model-family diversity.
+  const expertPanelContext = useMemo(() => {
+    const editingId = expertEditing?.participant_id;
+    return selectedParticipants
+      .filter(p => p.kind !== 'human' && p.participant_id !== editingId)
+      .map(p => {
+        const mid = modelAssignments[p.participant_id] || p.model_id || '';
+        const m = allModelsFlat.find(x => x.id === mid);
+        return {
+          name: p.name,
+          model_id: mid,
+          provider: m?.provider || '',
+        };
+      });
+  }, [selectedParticipants, modelAssignments, expertEditing, allModelsFlat]);
+
   const enabledSelectedCount = useMemo(() => {
     return selectedParticipants.filter(p => enabledMap[p.participant_id] !== false).length;
   }, [selectedParticipants, enabledMap]);
@@ -1047,14 +1078,20 @@ export default function App() {
   // available in the catalog.
   const autoSelectReady = autoSelectMode
     && Object.keys(allCatalogParticipants).length >= 2;
-  const startDisabled = isRunning
-    || (!autoSelectMode && enabledSelectedCount < 2)
-    || (autoSelectMode && !autoSelectReady);
+  const hasEnoughParticipantsToStart = autoSelectMode
+    ? autoSelectReady
+    : enabledSelectedCount >= 2;
+  const startDisabled = isRunning || !hasEnoughParticipantsToStart;
   const startDisabledReason = autoSelectMode
     ? (!autoSelectReady ? 'No candidate participants available for auto-select.' : '')
     : enabledSelectedCount < 2
     ? 'Add at least 2 active participants to start.'
     : '';
+  const startDisabledTooltip = autoSelectMode
+    ? (!autoSelectReady ? 'No candidate participants available for auto-select.' : '')
+    : enabledSelectedCount < 2
+    ? 'Select at least 2 participants.'
+    : '';
 
   return (
     <div className="app">
@@ -1127,12 +1164,14 @@ export default function App() {
             disabled={startDisabled}
             isRunning={isRunning}
             disabledReason={startDisabledReason}
+            disabledTooltip={startDisabledTooltip}
             activeQuestion={activeQuestion}
           />
           <ChatArea
             messages={messages}
             systemMessages={systemMessages}
             isRunning={isRunning}
+            hasEnoughParticipantsToStart={hasEnoughParticipantsToStart}
             statusText={statusText}
             pause={pause}
             onContinuePause={handleContinuePause}
@@ -1164,7 +1203,9 @@ export default function App() {
         onSave={handleSaveExpert}
         onDelete={handleDeleteExpert}
         allModels={allModelsFlat}
-        defaultModelId={orchestratorModel || ''}
+        defaultModelId={expertDefaultModelId}
+        panelContext={expertPanelContext}
+        orchestratorModelId={orchestratorModel || undefined}
       />
       {tableOpen && (
         <ChatTableView

frontend/src/components/ChatArea.js

@@ -5,6 +5,70 @@ import OrchestratorMessage from './OrchestratorMessage';
 import FailsafePauseBanner from './FailsafePauseBanner';
 import HumanInputSlot from './HumanInputSlot';
 import HumanTurnIndicator from './HumanTurnIndicator';
+import { DEFAULT_DEMO_PERSONAS, DEFAULT_PARTICIPANT_IDS } from '../utils/storage';
+
+/** Update when the Neon contact destination changes on the redesigned site. */
+const NEON_CONTACT_URL = 'https://www.neon.ai/contact';
+
+const [ELENA_ID, MARCUS_ID, AMIRA_ID] = DEFAULT_PARTICIPANT_IDS;
+
+/** Dialogue-only turns for the empty-state sample; speaker ids come from the demo trio. */
+const SAMPLE_PREVIEW_TURNS = [
+  {
+    kind: 'orchestrator',
+    text:
+      'Question: Should a company build its own AI system or rely on a third-party provider? '
+      + 'Each participant: share your initial view.',
+  },
+  {
+    kind: 'participant',
+    speakerId: ELENA_ID,
+    text:
+      'Third-party APIs keep upfront cost low, but per-seat and per-token fees compound fast at scale — '
+      + 'above a few million in annual AI spend, owning the stack often wins on total cost over three to five years.',
+  },
+  {
+    kind: 'participant',
+    speakerId: MARCUS_ID,
+    text:
+      'Build gives you control over models, prompts, and integrations; buy gets you to production in weeks. '
+      + "I'd only build if the product is the AI itself, not if AI is supporting something else.",
+  },
+  {
+    kind: 'participant',
+    speakerId: AMIRA_ID,
+    addressedTo: MARCUS_ID,
+    replyingTo: [MARCUS_ID],
+    text:
+      'Where data lives matters more than who hosts the model. A vendor with strong certifications can beat a sloppy '
+      + 'in-house deployment — but regulated workloads need clarity on retention, subprocessors, and whether prompts leave your boundary.',
+  },
+  {
+    kind: 'orchestrator',
+    text:
+      'No single answer fits every company — the panel leans toward buy for speed and lower early risk, build when AI is '
+      + 'core IP or scale makes vendor fees dominate, with privacy and compliance as the tiebreaker.',
+  },
+];
+
+function buildSamplePreviewMessages(nameById) {
+  return SAMPLE_PREVIEW_TURNS.map((turn) => {
+    if (turn.kind === 'orchestrator') {
+      return { kind: 'orchestrator', text: turn.text };
+    }
+    const speaker_id = turn.speakerId;
+    return {
+      kind: 'participant',
+      role: 'participant',
+      speaker_id,
+      speaker_name: nameById[speaker_id] || '',
+      text: turn.text,
+      ...(turn.addressedTo
+        ? { addressed_to: turn.addressedTo, replying_to: turn.replyingTo }
+        : {}),
+    };
+  });
+}
 
 /**
  * Renders the conversation: a mix of participant bubbles, orchestrator
@@ -21,6 +85,7 @@ export default function ChatArea({
   messages,
   systemMessages,
   isRunning,
+  hasEnoughParticipantsToStart,
   statusText,
   pause,
   onContinuePause,
@@ -54,6 +119,37 @@ export default function ChatArea({
     return m;
   }, [participants]);
 
+  const defaultDemoNameById = useMemo(() => {
+    const m = {};
+    DEFAULT_DEMO_PERSONAS.forEach((p) => {
+      m[p.participant_id] = p.name;
+    });
+    return m;
+  }, []);
+
+  /** Names for sample bubbles: live roster when present, else catalog mirror in storage. */
+  const previewNameById = useMemo(() => {
+    const m = { ...defaultDemoNameById };
+    DEFAULT_PARTICIPANT_IDS.forEach((id) => {
+      if (participantNameById[id]) m[id] = participantNameById[id];
+    });
+    return m;
+  }, [defaultDemoNameById, participantNameById]);
+
+  /** Palette index: match sidebar roster order, fall back to default trio order. */
+  const previewSpeakerIdxFor = useMemo(() => {
+    const map = {};
+    DEFAULT_PARTICIPANT_IDS.forEach((id, defaultIdx) => {
+      map[id] = speakerIdxFor[id] ?? defaultIdx;
+    });
+    return map;
+  }, [speakerIdxFor]);
+
+  const samplePreviewMessages = useMemo(
+    () => buildSamplePreviewMessages(previewNameById),
+    [previewNameById],
+  );
+
   const hasContent = (messages?.length || 0) + (systemMessages?.length || 0) > 0;
   const chatEnded = (systemMessages || []).some(s => s.text === 'End of Chat');
 
@@ -70,7 +166,46 @@ export default function ChatArea({
     <div className="chat-area">
       {!hasContent && !isRunning && (
         <div className="chat-empty">
-          Add at least 2 participants from the header dropdown, then start a conversation.
+          <div className="chat-empty-copy">
+            <p className="chat-empty-lead">
+              Watch a panel of AI experts debate a question, challenge each other, and reason toward a more considered answer.
+            </p>
+            <p className="chat-empty-instruction">
+              {hasEnoughParticipantsToStart
+                ? 'Three expert personas are ready to go — press Start Chat, or add, remove, or edit them to fit your question.'
+                : 'Add at least 2 participants from the header dropdown, then start a conversation.'}
+            </p>
+          </div>
+          <div className="chat-empty-sample" aria-hidden="true">
+            <p className="chat-empty-sample-label">Sample preview — not a live result</p>
+            <div className="chat-empty-sample-panel">
+              {samplePreviewMessages.map((msg, i) => {
+                if (msg.kind === 'orchestrator') {
+                  return (
+                    <OrchestratorMessage
+                      key={`preview-orch-${i}`}
+                      message={{ text: msg.text }}
+                      messageIdx={i}
+                    />
+                  );
+                }
+                const prev = i > 0 ? samplePreviewMessages[i - 1] : null;
+                const prevParticipant =
+                  prev?.kind === 'participant' ? prev : null;
+                return (
+                  <MessageBubble
+                    key={`preview-${msg.speaker_id}-${i}`}
+                    message={msg}
+                    idx={previewSpeakerIdxFor[msg.speaker_id] ?? 0}
+                    messageIdx={i}
+                    prevMessage={prevParticipant}
+                    participantNameById={previewNameById}
+                    showResponseTime={false}
+                  />
+                );
+              })}
+            </div>
+          </div>
         </div>
       )}
       {(messages || []).map((msg, i) => {
@@ -123,51 +258,63 @@ export default function ChatArea({
         </div>
       )}
       {chatEnded && (
-        <div className="chat-end-downloads" role="group" aria-label="Conversation downloads">
-          <button
-            type="button"
-            className="btn-sm btn-outline chat-end-download-btn"
-            onClick={onShowTableView}
-            title="Open the conversation summary table"
-          >
-            <Table2 size={14} />
-            Summary table…
-          </button>
-          <button
-            type="button"
-            className="btn-sm btn-outline chat-end-download-btn"
-            onClick={onDownloadChatTxt}
-          >
-            <FileText size={14} />
-            Chat as .txt
-          </button>
-          <button
-            type="button"
-            className="btn-sm btn-outline chat-end-download-btn"
-            onClick={onDownloadChatMd}
-          >
-            <FileCode size={14} />
-            Chat as .md
-          </button>
-          <button
-            type="button"
-            className="btn-sm btn-outline chat-end-download-btn"
-            onClick={onDownloadCsvTable}
-            title="Download the summary table as CSV"
-          >
-            <FileSpreadsheet size={14} />
-            Summary table as .csv
-          </button>
-          <button
-            type="button"
-            className="btn-sm btn-outline chat-end-download-btn"
-            onClick={onDownloadApiLog}
-            disabled={!hasApiLog}
-            title="Download the full backend API call history for this session"
-          >
-            <History size={14} />
-            Full API history
-          </button>
+        <div className="chat-end-bar">
+          <div className="chat-end-downloads" role="group" aria-label="Conversation downloads">
+            <button
+              type="button"
+              className="btn-sm btn-outline chat-end-download-btn"
+              onClick={onShowTableView}
+              title="Open the conversation summary table"
+            >
+              <Table2 size={14} />
+              Summary table…
+            </button>
+            <button
+              type="button"
+              className="btn-sm btn-outline chat-end-download-btn"
+              onClick={onDownloadChatTxt}
+            >
+              <FileText size={14} />
+              Chat as .txt
+            </button>
+            <button
+              type="button"
+              className="btn-sm btn-outline chat-end-download-btn"
+              onClick={onDownloadChatMd}
+            >
+              <FileCode size={14} />
+              Chat as .md
+            </button>
+            <button
+              type="button"
+              className="btn-sm btn-outline chat-end-download-btn"
+              onClick={onDownloadCsvTable}
+              title="Download the summary table as CSV"
+            >
+              <FileSpreadsheet size={14} />
+              Summary table as .csv
+            </button>
+            <button
+              type="button"
+              className="btn-sm btn-outline chat-end-download-btn"
+              onClick={onDownloadApiLog}
+              disabled={!hasApiLog}
+              title="Download the full backend API call history for this session"
+            >
+              <History size={14} />
+              Full API history
+            </button>
+          </div>
+          <p className="chat-end-cta">
+            Want a panel like this running on your own infrastructure?{' '}
+            <a
+              href={NEON_CONTACT_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Talk to Neon
+            </a>
+          </p>
         </div>
       )}
       <FailsafePauseBanner pause={pause} onContinue={onContinuePause} />

frontend/src/components/ChatControls.js

@@ -20,6 +20,7 @@ const ChatControls = forwardRef(function ChatControls({
   disabled,
   isRunning,
   disabledReason,
+  disabledTooltip,
   activeQuestion,
 }, ref) {
   const demoIndexRef = useRef(0);
@@ -68,7 +69,7 @@ const ChatControls = forwardRef(function ChatControls({
   };
 
   const handleKeyDown = (e) => {
-    if (disabled || mode !== 'demo') return;
+    if (mode !== 'demo') return;
     if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       setMode('custom');
       setUserText(e.key);
@@ -90,6 +91,7 @@ const ChatControls = forwardRef(function ChatControls({
   };
 
   const canStart = !disabled && !!resolveQuestion();
+  const startButtonTitle = !canStart && disabledTooltip ? disabledTooltip : undefined;
 
   return (
     <div className="chat-controls">
@@ -110,31 +112,51 @@ const ChatControls = forwardRef(function ChatControls({
         </>
       ) : (
         <>
-          <input
-            type="text"
-            value={inputValue}
-            placeholder={
-              disabled
-                ? (disabledReason || 'Add participants to start a conversation')
-                : (demoQuestions.length === 0 ? 'Loading demo questions…' : '')
-            }
-            disabled={disabled}
-            onChange={handleChange}
-            onKeyDown={(e) => {
-              handleKeyDown(e);
-              if (e.key === 'Enter' && canStart) {
-                handleStart();
+          <div className="chat-controls-row">
+            <input
+              type="text"
+              className="chat-controls-question"
+              value={inputValue}
+              placeholder={
+                disabled && disabledReason
+                  ? disabledReason
+                  : demoQuestions.length === 0
+                    ? 'Loading demo questions…'
+                    : ''
               }
-            }}
-          />
-          <button
-            className="btn-primary"
-            disabled={!canStart}
-            onClick={handleStart}
-          >
-            <Play size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
-            Start Chat
-          </button>
+              onChange={handleChange}
+              onKeyDown={(e) => {
+                handleKeyDown(e);
+                if (e.key === 'Enter' && canStart) {
+                  e.preventDefault();
+                  handleStart();
+                }
+              }}
+            />
+            <span
+              className={
+                'chat-start-btn-wrap'
+                + (startButtonTitle ? ' chat-start-btn-wrap-disabled' : '')
+              }
+              title={startButtonTitle}
+            >
+              <button
+                type="button"
+                className="btn-primary chat-controls-start"
+                disabled={!canStart}
+                onClick={handleStart}
+                aria-disabled={!canStart}
+              >
+                <Play size={14} style={{ marginRight: 4, verticalAlign: 'middle' }} />
+                Start Chat
+              </button>
+            </span>
+          </div>
+          {startButtonTitle && (
+            <span className="chat-start-hint" role="status">
+              {startButtonTitle}
+            </span>
+          )}
         </>
       )}
     </div>

frontend/src/components/ExpertPersonaModal.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Upload, Save, Trash2 } from 'lucide-react';
-import { generateRole, generateRoleFreeform } from '../utils/api';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Upload, Save, Trash2, Wand2 } from 'lucide-react';
+import { generateRole, generateRoleFreeform, suggestModel } from '../utils/api';
 
 /**
  * Single source of truth for creating Expert Personas. Replaces the
@@ -19,6 +19,8 @@ export default function ExpertPersonaModal({
   onDelete,
   allModels,                 // [{ id, name, provider }]
   defaultModelId,
+  panelContext,              // [{ name, model_id, provider }] — other panel members
+  orchestratorModelId,       // optional override for the meta-LLM call
 }) {
   const [activeTab, setActiveTab] = useState('freeform');
   const [name, setName] = useState('');
@@ -31,8 +33,51 @@ export default function ExpertPersonaModal({
   const [generatedPrompt, setGeneratedPrompt] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
+  const [suggestBusy, setSuggestBusy] = useState(false);
+  const [suggestion, setSuggestion] = useState(null);
+  const [suggestMessage, setSuggestMessage] = useState('');
   const fileInputRef = useRef(null);
 
+  const rolePromptText = useMemo(
+    () => (generatedPrompt || '').trim(),
+    [generatedPrompt],
+  );
+
+  const composeSourceText = useCallback(() => {
+    if (activeTab === 'freeform') {
+      return freeText.trim();
+    }
+    return [identity, profile, samples]
+      .map(s => (s || '').trim())
+      .filter(Boolean)
+      .join('\n\n');
+  }, [activeTab, freeText, identity, profile, samples]);
+
+  const hasDescriptionContent = useMemo(() => {
+    if (activeTab === 'freeform') {
+      return Boolean(freeText.trim());
+    }
+    return Boolean(identity.trim() || profile.trim() || samples.trim());
+  }, [activeTab, freeText, identity, profile, samples]);
+
+  const modelNameForId = useCallback((id) => {
+    const m = (allModels || []).find(x => x.id === id);
+    return m ? m.name : id;
+  }, [allModels]);
+
+  const modelProviderForId = useCallback((id) => {
+    const m = (allModels || []).find(x => x.id === id);
+    return m?.provider || '';
+  }, [allModels]);
+
+  const resolveModelId = useCallback((preferred) => {
+    const models = allModels || [];
+    if (preferred && models.some(m => m.id === preferred)) {
+      return preferred;
+    }
+    return models[0]?.id || '';
+  }, [allModels]);
+
   useEffect(() => {
     if (!isOpen) return;
     if (initial) {
@@ -43,7 +88,7 @@ export default function ExpertPersonaModal({
       setSamples(initial.samples || '');
       setFreeText(initial.freeform || '');
       setRoleStyle(initial.role_style || 'ai_completed');
-      setModelId(initial.model_id || defaultModelId || '');
+      setModelId(resolveModelId(initial.model_id || defaultModelId));
       setGeneratedPrompt(initial.role_prompt || '');
     } else {
       setActiveTab('freeform');
@@ -53,11 +98,14 @@ export default function ExpertPersonaModal({
       setSamples('');
       setFreeText('');
       setRoleStyle('ai_completed');
-      setModelId(defaultModelId || '');
+      setModelId(resolveModelId(defaultModelId));
       setGeneratedPrompt('');
     }
     setError('');
-  }, [isOpen, initial, defaultModelId]);
+    setSuggestion(null);
+    setSuggestMessage('');
+    setSuggestBusy(false);
+  }, [isOpen, initial, defaultModelId, resolveModelId]);
 
   if (!isOpen) return null;
 
@@ -75,30 +123,30 @@ export default function ExpertPersonaModal({
 
   const handleGenerate = async () => {
     setError('');
-    if (!modelId) {
-      setError('Pick a model to power this persona first.');
-      return;
-    }
     if (!name.trim()) {
       setError('Persona needs a name.');
       return;
     }
+    if (!hasDescriptionContent) {
+      setError('Add a description before generating a role prompt.');
+      return;
+    }
     setBusy(true);
     try {
       const result = activeTab === 'freeform'
         ? await generateRoleFreeform({
-          model_id: modelId,
           name: name.trim(),
           text: freeText,
           role_style: roleStyle,
+          orchestrator_model_id: orchestratorModelId || undefined,
         })
         : await generateRole({
-          model_id: modelId,
           name: name.trim(),
           profile,
           identity,
           samples,
           role_style: roleStyle,
+          orchestrator_model_id: orchestratorModelId || undefined,
         });
       setGeneratedPrompt(result.role_prompt || '');
     } catch (err) {
@@ -108,6 +156,48 @@ export default function ExpertPersonaModal({
     }
   };
 
+  const handleSuggestModel = async () => {
+    setError('');
+    setSuggestion(null);
+    setSuggestMessage('');
+    const sourceText = composeSourceText();
+    if (!sourceText && !rolePromptText) {
+      setSuggestMessage(
+        'Enter a description or role prompt for a model to be suggested.',
+      );
+      return;
+    }
+    if (!(allModels || []).length) {
+      setSuggestMessage('No models available to suggest from.');
+      return;
+    }
+    setSuggestBusy(true);
+    try {
+      const result = await suggestModel({
+        persona_name: name.trim() || 'Unnamed',
+        source_text: sourceText,
+        role_prompt: rolePromptText,
+        available_models: allModels,
+        panel_context: panelContext || [],
+        orchestrator_model_id: orchestratorModelId || undefined,
+      });
+      setSuggestion({
+        modelId: result.recommended_model_id,
+        rationale: result.rationale || '',
+      });
+    } catch (err) {
+      setSuggestMessage(err.message || String(err));
+    } finally {
+      setSuggestBusy(false);
+    }
+  };
+
+  const handleAcceptSuggestion = () => {
+    if (!suggestion?.modelId) return;
+    setModelId(suggestion.modelId);
+    setSuggestion(null);
+  };
+
   const canSave = name.trim() && modelId && generatedPrompt.trim();
   const handleSave = () => {
     if (!canSave) return;
@@ -147,54 +237,120 @@ export default function ExpertPersonaModal({
                 onChange={e => setName(e.target.value)}
               />
             </div>
-            <div className="ccai-expert-field">
+            <div className="ccai-expert-field ccai-expert-model-field">
               <label>Powered by LLM</label>
-              <select
-                value={modelId}
-                onChange={e => setModelId(e.target.value)}
+              <div className="ccai-expert-model-row">
+                <select
+                  value={modelId}
+                  onChange={e => setModelId(e.target.value)}
+                >
+                  <option value="">Pick a model...</option>
+                  {(allModels || []).map(m => (
+                    <option key={m.id} value={m.id}>
+                      {m.name} {m.provider ? `(${m.provider})` : ''}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  className="btn-sm btn-outline ccai-suggest-model-btn"
+                  onClick={handleSuggestModel}
+                  disabled={suggestBusy || !(allModels || []).length}
+                  title="Analyze the role prompt and recommend a model"
+                >
+                  <Wand2 size={12} />
+                  {suggestBusy ? 'Suggesting...' : 'Suggest a model'}
+                </button>
+              </div>
+              {suggestMessage && (
+                <div className="ccai-expert-suggest-message">{suggestMessage}</div>
+              )}
+              {suggestion && (
+                <div className="ccai-model-suggestion">
+                  <div className="ccai-model-suggestion-title">
+                    Suggested: {modelNameForId(suggestion.modelId)}
+                    {modelProviderForId(suggestion.modelId)
+                      ? ` (${modelProviderForId(suggestion.modelId)})`
+                      : ''}
+                  </div>
+                  {suggestion.rationale && (
+                    <p className="ccai-model-suggestion-rationale">{suggestion.rationale}</p>
+                  )}
+                  <div className="ccai-model-suggestion-actions">
+                    <button
+                      type="button"
+                      className="btn-sm btn-primary"
+                      onClick={handleAcceptSuggestion}
+                    >
+                      Use this model
+                    </button>
+                    <button
+                      type="button"
+                      className="btn-sm btn-secondary"
+                      onClick={() => setSuggestion(null)}
+                    >
+                      Dismiss
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="ccai-expert-input-mode">
+            <div className="ccai-tab-row">
+              <button
+                type="button"
+                className={'ccai-tab-btn' + (activeTab === 'freeform' ? ' ccai-tab-btn-active' : '')}
+                onClick={() => setActiveTab('freeform')}
+                title="One text area for background, bio, and writing samples."
+              >
+                Freeform
+              </button>
+              <button
+                type="button"
+                className={'ccai-tab-btn' + (activeTab === 'structured' ? ' ccai-tab-btn-active' : '')}
+                onClick={() => setActiveTab('structured')}
+                title="Separate fields for identity, profile, and writing samples."
               >
-                <option value="">Pick a model...</option>
-                {(allModels || []).map(m => (
-                  <option key={m.id} value={m.id}>
-                    {m.name} {m.provider ? `(${m.provider})` : ''}
-                  </option>
-                ))}
-              </select>
+                Structured
+              </button>
             </div>
+            <p className="ccai-expert-field-hint">
+              Freeform = one box for everything; Structured = separate fields for identity, profile, and samples.
+            </p>
           </div>
 
-          <div className="ccai-tab-row">
-            <button
-              className={'ccai-tab-btn' + (activeTab === 'freeform' ? ' ccai-tab-btn-active' : '')}
-              onClick={() => setActiveTab('freeform')}
-            >
-              Freeform
-            </button>
-            <button
-              className={'ccai-tab-btn' + (activeTab === 'structured' ? ' ccai-tab-btn-active' : '')}
-              onClick={() => setActiveTab('structured')}
-            >
-              Structured
-            </button>
-            <div className="ccai-tab-spacer" />
-            <label className="ccai-role-style">
-              <input
-                type="radio"
-                name="role-style"
-                checked={roleStyle === 'ai_completed'}
-                onChange={() => setRoleStyle('ai_completed')}
-              />
-              AI-completed
-            </label>
-            <label className="ccai-role-style">
-              <input
-                type="radio"
-                name="role-style"
-                checked={roleStyle === 'exact'}
-                onChange={() => setRoleStyle('exact')}
-              />
-              Exact (no inferring)
-            </label>
+          <div className="ccai-expert-role-style">
+            <div className="ccai-tab-row ccai-tab-row-compact">
+              <label
+                className="ccai-role-style"
+                title="Fills in tone and style from your notes; stays within what you described."
+              >
+                <input
+                  type="radio"
+                  name="role-style"
+                  checked={roleStyle === 'ai_completed'}
+                  onChange={() => setRoleStyle('ai_completed')}
+                />
+                AI-completed
+              </label>
+              <label
+                className="ccai-role-style"
+                title="Reorganizes your text only; won't add traits or facts you didn't provide."
+              >
+                <input
+                  type="radio"
+                  name="role-style"
+                  checked={roleStyle === 'exact'}
+                  onChange={() => setRoleStyle('exact')}
+                />
+                Exact (no inferring)
+              </label>
+            </div>
+            <p className="ccai-expert-field-hint">
+              AI-completed fills in tone and style from your notes (no new facts); Exact uses only what you typed.
+            </p>
           </div>
 
           {activeTab === 'freeform' ? (
@@ -256,22 +412,25 @@ export default function ExpertPersonaModal({
             <button
               className="btn-secondary"
               onClick={handleGenerate}
-              disabled={busy || !modelId || !name.trim()}
+              disabled={busy || !name.trim() || !hasDescriptionContent}
             >
               {busy ? 'Generating role prompt...' : 'Generate role prompt'}
             </button>
           </div>
 
-          {generatedPrompt && (
-            <div className="ccai-expert-prompt">
-              <label>Generated role prompt (editable)</label>
-              <textarea
-                value={generatedPrompt}
-                onChange={e => setGeneratedPrompt(e.target.value)}
-                rows={6}
-              />
-            </div>
-          )}
+          <div className="ccai-expert-prompt">
+            <label>Role prompt</label>
+            <textarea
+              value={generatedPrompt}
+              onChange={e => {
+                setGeneratedPrompt(e.target.value);
+                if (suggestMessage) setSuggestMessage('');
+                if (suggestion) setSuggestion(null);
+              }}
+              rows={6}
+              placeholder="Generate a role prompt above, or write one here. Suggest a model analyzes this text."
+            />
+          </div>
 
           {error && <div className="ccai-expert-error">{error}</div>}
 

frontend/src/components/Header.js

@@ -4,6 +4,56 @@ import AuthBadge from './AuthBadge';
 import ParticipantDropdown from './ParticipantDropdown';
 import DownloadMenu from './DownloadMenu';
 import DevMenu from './DevMenu';
+import HeaderMoreMenu from './HeaderMoreMenu';
+
+function HumanParticipantButton({ humanParticipant, onOpenHumanModal, className }) {
+  return (
+    <button
+      type="button"
+      className={
+        'btn-sm btn-outline ccai-human-add-btn header-actions-desktop'
+        + (className ? ` ${className}` : '')
+        + (humanParticipant ? ' ccai-human-add-btn-active' : '')
+      }
+      onClick={onOpenHumanModal}
+      title={humanParticipant
+        ? `Edit ${humanParticipant.name}'s credential summary`
+        : 'Add a human participant to the conversation'}
+    >
+      {humanParticipant ? (
+        <>
+          <UserCheck size={14} style={{ marginRight: 4 }} />
+          {humanParticipant.name}
+        </>
+      ) : (
+        <>
+          <UserPlus size={14} style={{ marginRight: 4 }} />
+          Add a Human Participant
+        </>
+      )}
+    </button>
+  );
+}
+
+function TableViewButton({ hasChat, onShowTableView, className }) {
+  return (
+    <button
+      type="button"
+      className={
+        'btn-sm btn-outline ccai-table-view-btn header-actions-desktop'
+        + (className ? ` ${className}` : '')
+      }
+      onClick={onShowTableView}
+      disabled={!hasChat}
+      title={hasChat
+        ? 'Open the conversation summary table'
+        : 'Start a chat to view the summary table'}
+    >
+      <Table2 size={14} style={{ marginRight: 4 }} />
+      Table View
+    </button>
+  );
+}
 
 /**
  * Header bar: brand on the left; on the right, auth badge, participant
@@ -97,41 +147,20 @@ export default function Header({
           autoSelectMode={autoSelectMode}
           onToggleAutoSelectMode={onToggleAutoSelectMode}
         />
-        <button
-          type="button"
-          className={
-            'btn-sm btn-outline ccai-human-add-btn'
-            + (humanParticipant ? ' ccai-human-add-btn-active' : '')
-          }
-          onClick={onOpenHumanModal}
-          title={humanParticipant
-            ? `Edit ${humanParticipant.name}'s credential summary`
-            : 'Add a human participant to the conversation'}
-        >
-          {humanParticipant ? (
-            <>
-              <UserCheck size={14} style={{ marginRight: 4 }} />
-              {humanParticipant.name}
-            </>
-          ) : (
-            <>
-              <UserPlus size={14} style={{ marginRight: 4 }} />
-              Add a Human Participant
-            </>
-          )}
-        </button>
-        <button
-          type="button"
-          className="btn-sm btn-outline ccai-table-view-btn"
-          onClick={onShowTableView}
-          disabled={!hasChat}
-          title={hasChat
-            ? 'Open the conversation summary table'
-            : 'Start a chat to view the summary table'}
-        >
-          <Table2 size={14} style={{ marginRight: 4 }} />
-          Table View
-        </button>
+        <HumanParticipantButton
+          humanParticipant={humanParticipant}
+          onOpenHumanModal={onOpenHumanModal}
+        />
+        <TableViewButton
+          hasChat={hasChat}
+          onShowTableView={onShowTableView}
+        />
+        <HeaderMoreMenu
+          humanParticipant={humanParticipant}
+          onOpenHumanModal={onOpenHumanModal}
+          hasChat={hasChat}
+          onShowTableView={onShowTableView}
+        />
         <DownloadMenu
           hasChat={hasChat}
           hasApiLog={hasApiLog}

frontend/src/components/HeaderMoreMenu.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { MoreHorizontal, UserPlus, UserCheck, Table2 } from 'lucide-react';
+
+/**
+ * Mobile header overflow for wide labeled actions (human participant,
+ * table view). Mirrors DownloadMenu's open/close pattern.
+ */
+export default function HeaderMoreMenu({
+  humanParticipant,
+  onOpenHumanModal,
+  hasChat,
+  onShowTableView,
+}) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const fire = (fn) => () => { fn?.(); setOpen(false); };
+
+  return (
+    <div className="dev-wrap header-actions-mobile" ref={wrapRef}>
+      <div className="dev-dropdown-header">
+        <button
+          type="button"
+          className="icon-btn"
+          onClick={() => setOpen(o => !o)}
+          title="More actions"
+          aria-label="More actions"
+          aria-expanded={open}
+        >
+          <MoreHorizontal size={16} />
+        </button>
+        {open && (
+          <div className="dev-panel">
+            <button
+              type="button"
+              className={
+                'dev-panel-row'
+                + (humanParticipant ? ' ccai-human-add-btn-active' : '')
+              }
+              onClick={fire(onOpenHumanModal)}
+              title={humanParticipant
+                ? `Edit ${humanParticipant.name}'s credential summary`
+                : 'Add a human participant to the conversation'}
+            >
+              {humanParticipant ? (
+                <>
+                  <UserCheck size={14} className="dev-check-icon" />
+                  {humanParticipant.name}
+                </>
+              ) : (
+                <>
+                  <UserPlus size={14} className="dev-check-icon" />
+                  Add a Human Participant
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={fire(onShowTableView)}
+              title={hasChat
+                ? 'Open the conversation summary table'
+                : 'Start a chat to view the summary table'}
+            >
+              <Table2 size={14} className="dev-check-icon" />
+              Table View
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/ParticipantDropdown.js

@@ -5,7 +5,7 @@ import { Users, Plus, ChevronDown, Wand2, Check } from 'lucide-react';
  * Header dropdown that lists every available participant the user can
  * pull into the conversation. Three sections:
  *   - Neon (HANA personas, vanilla/RAG already filtered server-side)
- *   - Extra (the four bundled non-Neon-LLM personas)
+ *   - Extra (bundled catalog personas, provider + Neon LLMs)
  *   - Expert (user-created, stored in localStorage)
  *
  * A top-of-list "Select N Automatically" toggle defers the choice to
@@ -45,6 +45,11 @@ export default function ParticipantDropdown({
   // orchestrator picks at start time, so user picks are ignored.
   const checkboxDisabledForAuto = !!autoSelectMode;
 
+  const openCreateExpertModal = () => {
+    setOpen(false);
+    onOpenExpertModal(null);
+  };
+
   return (
     <div className="ccai-dropdown-wrap" ref={ref}>
       <button
@@ -65,7 +70,14 @@ export default function ParticipantDropdown({
         <ChevronDown size={12} />
       </button>
       {open && (
-        <div className="ccai-dropdown-panel">
+        <>
+          <button
+            type="button"
+            className="ccai-dropdown-backdrop"
+            aria-label="Close participants menu"
+            onClick={() => setOpen(false)}
+          />
+          <div className="ccai-dropdown-panel">
           <div className="ccai-dropdown-section">
             <button
               type="button"
@@ -86,8 +98,9 @@ export default function ParticipantDropdown({
             <div className="ccai-dropdown-autoselect-help">
               {autoSelectMode
                 ? 'The orchestrator will pick the most relevant participants for your question when you start the chat.'
-                : 'Or pick manually from the lists below.'}
+                : 'Create or pick manually from the lists below.'}
             </div>
+            <CreateExpertPersonaButton onClick={openCreateExpertModal} />
           </div>
           <div className="ccai-dropdown-divider" />
           <div
@@ -164,20 +177,31 @@ export default function ParticipantDropdown({
                 onToggle={() => onToggleParticipant(p, 'expert')}
               />
             ))}
-            <button
-              className="ccai-dropdown-create-btn"
-              onClick={() => { setOpen(false); onOpenExpertModal(null); }}
-            >
-              <Plus size={12} />
-              Create Expert Persona...
-            </button>
+            <CreateExpertPersonaButton onClick={openCreateExpertModal} />
           </div>
-        </div>
+          </div>
+        </>
       )}
     </div>
   );
 }
 
+function CreateExpertPersonaButton({ onClick, className }) {
+  return (
+    <button
+      type="button"
+      className={
+        'ccai-dropdown-create-btn'
+        + (className ? ` ${className}` : '')
+      }
+      onClick={onClick}
+    >
+      <Plus size={12} />
+      Create Expert Persona...
+    </button>
+  );
+}
+
 function DropdownItem({ participant, checked, disabledForAdd, autoSelectActive, onToggle }) {
   return (
     <label

frontend/src/components/ParticipantSidebar.js

@@ -69,6 +69,7 @@ export default function ParticipantSidebar({
 
 function ParticipantCard({ participant, enabled, modelOverride, neonPromptByModelId, onToggleEnabled, onRemove }) {
   const [open, setOpen] = useState(false);
+  const [promptExpanded, setPromptExpanded] = useState(false);
   const isHuman = participant.kind === 'human';
 
   const effectiveModelId = modelOverride
@@ -79,6 +80,16 @@ function ParticipantCard({ participant, enabled, modelOverride, neonPromptByMode
     || participant.role_prompt
     || '';
 
+  const PROMPT_PREVIEW_CHARS = 280;
+  const promptIsLong = personaPrompt.length > PROMPT_PREVIEW_CHARS;
+
+  const handleToggleOpen = () => {
+    setOpen((wasOpen) => {
+      if (wasOpen) setPromptExpanded(false);
+      return !wasOpen;
+    });
+  };
+
   return (
     <div
       className={
@@ -87,15 +98,27 @@ function ParticipantCard({ participant, enabled, modelOverride, neonPromptByMode
         + (isHuman ? ' ccai-participant-card-human' : '')
       }
     >
-      <div className="ccai-participant-row">
+      <div
+        className={
+          'ccai-participant-row'
+          + (open ? ' ccai-participant-row--expanded' : '')
+        }
+      >
         <button
           className="ccai-accordion-chevron"
-          onClick={() => setOpen(o => !o)}
+          onClick={handleToggleOpen}
           aria-label="Toggle participant details"
+          aria-expanded={open}
         >
           {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
         </button>
-        <div className="ccai-participant-name">
+        <div
+          className={
+            'ccai-participant-name'
+            + (open ? ' ccai-participant-name--expanded' : '')
+          }
+          title={!open ? participant.name : undefined}
+        >
           {isHuman && (
             <User
               size={12}
@@ -161,9 +184,25 @@ function ParticipantCard({ participant, enabled, modelOverride, neonPromptByMode
               </div>
               <div className="ccai-participant-field">
                 <div className="ccai-participant-field-label">Persona prompt</div>
-                <pre className="ccai-participant-prompt">
+                <pre
+                  className={
+                    'ccai-participant-prompt'
+                    + (promptIsLong && !promptExpanded
+                      ? ' ccai-participant-prompt--preview'
+                      : '')
+                  }
+                >
                   {personaPrompt || '(no prompt set)'}
                 </pre>
+                {promptIsLong && (
+                  <button
+                    type="button"
+                    className="ccai-participant-prompt-toggle"
+                    onClick={() => setPromptExpanded(v => !v)}
+                  >
+                    {promptExpanded ? 'Show less' : 'Show full prompt'}
+                  </button>
+                )}
               </div>
             </>
           )}

frontend/src/styles/ccai.css

@@ -10,6 +10,10 @@
 
 .ccai-dropdown-wrap { position: relative; }
 
+.ccai-dropdown-backdrop {
+  display: none;
+}
+
 .ccai-dropdown-trigger {
   display: inline-flex;
   align-items: center;
@@ -165,6 +169,14 @@
   gap: 6px;
 }
 
+.ccai-participant-row--expanded {
+  align-items: flex-start;
+}
+
+.ccai-participant-row--expanded .ccai-accordion-chevron {
+  margin-top: 1px;
+}
+
 .ccai-participant-row-secondary {
   justify-content: flex-end;
 }
@@ -199,6 +211,14 @@
   min-width: 0;
 }
 
+.ccai-participant-name--expanded {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: unset;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
 .ccai-participant-controls {
   display: flex;
   align-items: center;
@@ -244,8 +264,31 @@
   padding: 8px 10px;
   white-space: pre-wrap;
   word-break: break-word;
-  max-height: 160px;
-  overflow-y: auto;
+}
+
+.ccai-participant-prompt--preview {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+}
+
+.ccai-participant-prompt-toggle {
+  align-self: flex-start;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary, #6366f1);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ccai-participant-prompt-toggle:hover {
+  color: var(--text-primary);
 }
 
 /* On/off slider switch */
@@ -348,6 +391,55 @@
   font-size: 13px;
 }
 
+.ccai-expert-model-field {
+  min-width: 0;
+}
+
+.ccai-expert-model-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ccai-expert-model-row select {
+  width: 100%;
+}
+
+.ccai-suggest-model-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  white-space: nowrap;
+}
+
+.ccai-model-suggestion {
+  margin-top: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--accent-primary);
+  border-radius: 8px;
+  background: var(--accent-light);
+}
+
+.ccai-model-suggestion-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ccai-model-suggestion-rationale {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+
+.ccai-model-suggestion-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
 .ccai-tab-row {
   display: flex;
   align-items: center;
@@ -356,6 +448,25 @@
   padding-bottom: 6px;
 }
 
+.ccai-tab-row-compact {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.ccai-expert-input-mode,
+.ccai-expert-role-style {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ccai-expert-field-hint {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-tertiary);
+}
+
 .ccai-tab-btn {
   padding: 6px 12px;
   border: 1px solid transparent;
@@ -420,6 +531,32 @@
   gap: 4px;
 }
 
+.ccai-expert-prompt-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ccai-expert-prompt-header label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ccai-expert-suggest-message {
+  margin-top: 4px;
+  padding: 8px 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
 .ccai-expert-prompt label {
   font-size: 11px;
   font-weight: 600;
@@ -819,6 +956,10 @@
 
 .ccai-orchestrator-msg-body p:last-child { margin-bottom: 0; }
 
+.ccai-orchestrator-msg-body :where(p, li, ol, ul, blockquote, td, th) {
+  color: inherit;
+}
+
 .ccai-orchestrator-msg-report {
   background: var(--accent-light);
   border-style: solid;
@@ -1056,6 +1197,33 @@
 }
 
 @media (max-width: 600px) {
+  .ccai-dropdown-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    border: none;
+    padding: 0;
+    margin: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 59;
+    cursor: default;
+  }
+
+  .ccai-dropdown-panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: 100%;
+    max-width: none;
+    max-height: min(85vh, calc(100dvh - 64px));
+    border-radius: 16px 16px 0 0;
+    border-bottom: none;
+    padding-bottom: max(10px, env(safe-area-inset-bottom));
+    box-shadow: var(--shadow-lg);
+  }
+
   .ccai-table-card {
     max-height: 100vh;
     border-radius: 0;

frontend/src/styles/components.css

@@ -445,16 +445,75 @@
   gap: 16px;
   padding: 16px 0;
   overflow-y: auto;
+  min-height: 0;
 }
 
 .chat-empty {
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: min-content;
+  gap: 1.5rem;
+  padding: 0.25rem 0 1.5rem;
   color: var(--text-muted);
   font-size: 15px;
   font-style: italic;
+  pointer-events: none;
+}
+
+.chat-empty-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 1.25rem;
+  flex-shrink: 0;
+}
+
+.chat-empty-lead,
+.chat-empty-instruction {
+  margin: 0;
+  white-space: nowrap;
+}
+
+.chat-empty-lead {
+  font-weight: 700;
+}
+
+.chat-empty-sample {
+  width: min(100%, 42rem);
+  flex-shrink: 0;
+  opacity: 0.72;
+  border: 1px dashed var(--border-primary);
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  padding: 12px 14px 10px;
+  font-style: normal;
+}
+
+.chat-empty-sample-label {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  font-style: normal;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+
+.chat-empty-sample-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-empty-sample-panel .message-row,
+.chat-empty-sample-panel .ccai-orchestrator-msg {
+  animation: none;
 }
 
 /* ── Message Bubbles ───────────────────────────────────────────── */
@@ -514,6 +573,27 @@
   word-break: break-word;
 }
 
+/* Live participant bubbles use light pastel backgrounds (set inline in
+   MessageBubble.js). Keep body text dark so it stays readable in both
+   light and dark app themes — do not inherit --text-primary, which is
+   light-colored in dark mode. */
+.ccai-bubble {
+  color: #111827;
+  font-style: normal;
+}
+
+.ccai-bubble :where(p, li, ol, ul, blockquote, td, th, h1, h2, h3, h4, h5, h6) {
+  color: inherit;
+}
+
+.ccai-bubble a {
+  color: #4338CA;
+}
+
+.ccai-bubble .message-elapsed {
+  color: #6B7280;
+}
+
 .message-bubble.bubble-a {
   background: var(--speaker-a-bg);
   color: var(--text-primary);
@@ -593,38 +673,109 @@
 /* Download strip rendered below the "End of Chat" marker. Mirrors the
    items in the header DownloadMenu so the user doesn't have to scroll
    back up to the top of a finished conversation to export it. */
+.chat-end-bar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 12px 20px;
+  padding: 12px 0 4px;
+}
+
 .chat-end-downloads {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
-  padding: 12px 0 4px;
 }
 
 .chat-end-download-btn {
   white-space: nowrap;
 }
 
+.chat-end-cta {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+  text-align: center;
+  max-width: 20rem;
+}
+
+.chat-end-cta a {
+  color: var(--accent-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.chat-end-cta a:hover {
+  text-decoration: underline;
+}
+
 /* ── Chat Controls ─────────────────────────────────────────────── */
 
 .chat-controls {
   display: flex;
-  gap: 12px;
+  flex-direction: column;
   align-items: stretch;
+  gap: 6px;
+  width: 100%;
   padding: 12px 0;
+  flex-shrink: 0;
 }
 
-.chat-controls input {
-  flex: 1;
-  padding: 10px 14px;
+.chat-controls-row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.chat-start-btn-wrap {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-self: stretch;
+}
+
+.chat-start-btn-wrap-disabled {
+  cursor: not-allowed;
+}
+
+.chat-start-btn-wrap button:disabled {
+  pointer-events: none;
+}
+
+.chat-start-hint {
+  font-size: 11px;
+  line-height: 1.3;
+  color: var(--text-secondary);
+  text-align: right;
+}
+
+.chat-controls-question {
+  flex: 1 1 0;
+  min-width: 0;
+  width: 0;
+  padding: 9px 12px;
   border: 1px solid var(--border-primary);
   border-radius: 8px;
   background: var(--bg-primary);
   color: var(--text-primary);
-  font-size: 14px;
+  font-size: clamp(12px, calc(0.62vw + 5px), 14px);
+  line-height: 1.25;
+  font-family: inherit;
+  letter-spacing: -0.01em;
 }
 
-.chat-controls input:focus {
+.chat-controls-start {
+  height: 100%;
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+.chat-controls-question:focus {
   outline: none;
   border-color: var(--accent-primary);
   box-shadow: 0 0 0 3px var(--accent-light);
@@ -1216,11 +1367,9 @@
     padding: 12px 16px 16px;
   }
   .chat-controls {
-    flex-wrap: wrap;
     gap: 8px;
   }
-  .chat-controls input {
-    flex-basis: 100%;
+  .chat-controls-question {
     font-size: 13px;
   }
   .message-row {
@@ -1334,11 +1483,19 @@
   }
   /* On phones the download strip stacks so each label is fully
      readable; on wider viewports it stays inline-wrap. */
+  .chat-end-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
   .chat-end-downloads {
     flex-direction: column;
     align-items: stretch;
     gap: 6px;
   }
+  .chat-end-cta {
+    max-width: none;
+  }
   .chat-end-download-btn {
     justify-content: center;
   }

frontend/src/styles/layout.css

@@ -72,6 +72,14 @@
   flex-shrink: 0;
 }
 
+.header-actions-mobile {
+  display: none;
+}
+
+.header-actions-desktop {
+  display: inline-flex;
+}
+
 .icon-btn {
   display: flex;
   align-items: center;
@@ -117,7 +125,7 @@
   flex: 1;
   min-height: 0;
   padding: 20px 24px;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -144,6 +152,32 @@
   }
 }
 
+/* ── Small tablet / large phone (<600px) ──────────────────────── */
+@media (max-width: 600px) {
+  .app-header {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .header-left {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .header-right {
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    row-gap: 6px;
+    max-width: 100%;
+    min-width: 0;
+  }
+  .header-actions-desktop {
+    display: none !important;
+  }
+  .header-actions-mobile {
+    display: block;
+  }
+}
+
 /* ── Phone ────────────────────────────────────────────────────── */
 @media (max-width: 480px) {
   .app-header {

frontend/src/utils/api.js

@@ -30,11 +30,25 @@ export async function fetchDemoQuestions() {
   return resp.json();
 }
 
-export async function generateRole({ model_id, name, profile, identity, samples, role_style }) {
+export async function generateRole({
+  name,
+  profile,
+  identity,
+  samples,
+  role_style,
+  orchestrator_model_id,
+}) {
   const resp = await fetch(`${API_BASE}/api/chat/generate-role`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ model_id, name, profile, identity, samples, role_style }),
+    body: JSON.stringify({
+      name,
+      profile,
+      identity,
+      samples,
+      role_style,
+      orchestrator_model_id,
+    }),
   });
   if (!resp.ok) {
     const err = await resp.json().catch(() => ({ detail: resp.statusText }));
@@ -43,11 +57,21 @@ export async function generateRole({ model_id, name, profile, identity, samples,
   return resp.json();
 }
 
-export async function generateRoleFreeform({ model_id, name, text, role_style }) {
+export async function generateRoleFreeform({
+  name,
+  text,
+  role_style,
+  orchestrator_model_id,
+}) {
   const resp = await fetch(`${API_BASE}/api/chat/generate-role-freeform`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ model_id, name, text, role_style }),
+    body: JSON.stringify({
+      name,
+      text,
+      role_style,
+      orchestrator_model_id,
+    }),
   });
   if (!resp.ok) {
     const err = await resp.json().catch(() => ({ detail: resp.statusText }));
@@ -56,6 +80,47 @@ export async function generateRoleFreeform({ model_id, name, text, role_style })
   return resp.json();
 }
 
+/**
+ * Suggest an LLM for an Expert Persona from the builder's live model list.
+ *
+ * Body: { persona_name, source_text, role_prompt, available_models,
+ *         panel_context, orchestrator_model_id }
+ *
+ * Returns: { recommended_model_id, rationale }
+ */
+export async function suggestModel({
+  persona_name,
+  source_text,
+  role_prompt,
+  available_models,
+  panel_context,
+  orchestrator_model_id,
+}) {
+  const resp = await fetch(`${API_BASE}/api/chat/suggest-model`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      persona_name,
+      source_text,
+      role_prompt,
+      available_models,
+      panel_context,
+      orchestrator_model_id,
+    }),
+  });
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+    const detail = err.detail;
+    const message = typeof detail === 'string'
+      ? detail
+      : Array.isArray(detail)
+        ? detail.map(d => d.msg || JSON.stringify(d)).join('; ')
+        : 'Model suggestion failed';
+    throw new Error(message);
+  }
+  return resp.json();
+}
+
 /**
  * Start a CCAI conversation and consume the SSE stream.
  *

frontend/src/utils/storage.js

@@ -9,11 +9,51 @@
 const NS = 'ccai-vibe-demo';
 const SCHEMA_VERSION = 1;
 
+/** Demo trio — ids/names mirror backend/app/services/extra_personas.py */
+export const DEFAULT_DEMO_PERSONAS = [
+  {
+    participant_id: 'extra_elena_financial_strategist',
+    name: 'Elena — Financial Strategist',
+  },
+  {
+    participant_id: 'extra_marcus_technology_strategist',
+    name: 'Marcus — Technology Strategist',
+  },
+  {
+    participant_id: 'extra_amira_security_advisor',
+    name: 'Dr. Amira — Security & Privacy Advisor',
+  },
+];
+
+/** Default panel for first load / empty saved selection (demo trio). */
+export const DEFAULT_PARTICIPANT_IDS = DEFAULT_DEMO_PERSONAS.map(
+  (p) => p.participant_id,
+);
+
+export const DEFAULT_PARTICIPANTS_ENABLED = Object.fromEntries(
+  DEFAULT_PARTICIPANT_IDS.map((id) => [id, true]),
+);
+
+/** Use saved selection when non-empty; otherwise the demo default trio. */
+export function resolveInitialParticipants(persisted) {
+  const saved = persisted?.participants_selected;
+  if (Array.isArray(saved) && saved.length > 0) {
+    return {
+      selectedIds: saved,
+      enabledMap: persisted.participants_enabled || {},
+    };
+  }
+  return {
+    selectedIds: [...DEFAULT_PARTICIPANT_IDS],
+    enabledMap: { ...DEFAULT_PARTICIPANTS_ENABLED },
+  };
+}
+
 const DEFAULTS = {
   schema_version: SCHEMA_VERSION,
   expert_personas: [],
-  participants_selected: [],
-  participants_enabled: {},
+  participants_selected: [...DEFAULT_PARTICIPANT_IDS],
+  participants_enabled: { ...DEFAULT_PARTICIPANTS_ENABLED },
   model_assignments: {},
   orchestrator_model_id: null,
   summarizer_model_id: null,

mock_backend.py

@@ -0,0 +1,191 @@
+"""Mock CCAI backend for UI rendering/screenshots ONLY.
+
+Serves the exact JSON shapes the frontend expects (derived from the real
+backend's api/personas.py, api/models.py, extra_personas.py, demo_questions.json)
+plus a canned SSE panel for /api/chat/start so the multi-persona discussion UI
+can be screenshotted without any real LLM/HANA access. Not used in production.
+"""
+import json, time
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+
+PROVIDERS = [
+    {"id": "openai", "name": "OpenAI", "models": [
+        {"id": "gpt-5.4", "name": "GPT-5.4", "params": "Undisclosed"},
+        {"id": "gpt-4.1", "name": "GPT-4.1", "params": "Undisclosed"},
+        {"id": "gpt-4o", "name": "GPT-4o", "params": "~200B"},
+        {"id": "gpt-4o-mini", "name": "GPT-4o Mini", "params": "~8B"},
+        {"id": "o4-mini", "name": "o4-Mini", "params": "Undisclosed"},
+    ]},
+    {"id": "gemini", "name": "Google Gemini", "models": [
+        {"id": "gemini-2.5-flash", "name": "Gemini 2.5 Flash", "params": "Undisclosed"},
+        {"id": "gemini-2.5-pro", "name": "Gemini 2.5 Pro", "params": "Undisclosed"},
+    ]},
+    {"id": "mistral", "name": "Mistral", "models": [
+        {"id": "devstral-2512", "name": "Devstral2", "params": "123B"},
+        {"id": "mistral-small-2603", "name": "Mistral Small 4", "params": "119B"},
+    ]},
+    {"id": "meta", "name": "Meta Llama", "models": [
+        {"id": "meta-llama/Llama-3.3-70B-Instruct-Turbo", "name": "Llama 3.3 70B Turbo", "params": "70B"},
+    ]},
+    {"id": "deepseek", "name": "DeepSeek", "models": [
+        {"id": "accounts/fireworks/models/deepseek-v3p1", "name": "DeepSeek V3.1", "params": "671B"},
+    ]},
+]
+
+NEON_MODELS = [
+    {"model_id": "BrainForge/Security@2026.03.18", "name": "BrainForge/Security",
+     "personas": [
+        {"persona_name": "Athena", "enabled": True, "system_prompt": "You are Athena, a strategic advisor."},
+        {"persona_name": "Vanilla", "enabled": True, "system_prompt": "Plain assistant."},
+     ]},
+]
+
+NEON_PERSONAS = [
+    {"participant_id": "neon:BrainForge/Security@2026.03.18:Athena", "kind": "neon",
+     "name": "Athena (Strategic Advisor)", "model_display": "Security",
+     "default_model_id": "neon:BrainForge/Security@2026.03.18:Athena",
+     "description": "Strategic advisor persona", "role_prompt": "You are Athena."},
+]
+
+EXTRA = [
+    {"participant_id": "extra_pragmatic_generalist", "name": "Pragmatic Finance Expert",
+     "default_model_id": "gpt-5.4", "model_display": "gpt-5.4", "kind": "extra", "role_prompt": "..."},
+    {"participant_id": "extra_skeptical_critic", "name": "Skeptical Philosopher",
+     "default_model_id": "gemini-2.5-flash", "model_display": "gemini-2.5-flash", "kind": "extra", "role_prompt": "..."},
+    {"participant_id": "extra_empathetic_humanist", "name": "Empathetic Historian",
+     "default_model_id": "devstral-2512", "model_display": "devstral-2512", "kind": "extra", "role_prompt": "..."},
+    {"participant_id": "extra_data_driven_analyst", "name": "Data-Driven Geologist",
+     "default_model_id": "meta-llama/Llama-3.3-70B-Instruct-Turbo",
+     "model_display": "Llama-3.3-70B-Instruct-Turbo", "kind": "extra", "role_prompt": "..."},
+    {"participant_id": "extra_elena_financial_strategist", "name": "Elena — Financial Strategist",
+     "default_model_id": "gpt-4.1", "model_display": "gpt-4.1", "kind": "extra", "role_prompt": "..."},
+    {"participant_id": "extra_marcus_technology_strategist", "name": "Marcus — Technology Strategist",
+     "default_model_id": "mistral-small-2603",
+     "model_display": "mistral-small-2603", "kind": "extra", "role_prompt": "..."},
+    {"participant_id": "extra_amira_security_advisor", "name": "Dr. Amira — Security & Privacy Advisor",
+     "default_model_id": "neon:BrainForge/Security@2026.05.13:CybersecurityExpert",
+     "model_display": "CybersecurityExpert", "kind": "extra", "role_prompt": "..."},
+]
+
+DEMO_QUESTIONS = json.load(open("backend/app/data/demo_questions.json"))["questions"]
+
+FORMATS = {
+    "structures": [
+        {"id": "collaborative", "name": "Collaborative Discussion", "description": "Structured group reasoning toward consensus."},
+        {"id": "roberts_rules", "name": "Robert's Rules", "description": "Formal motion/second/vote procedure."},
+    ],
+    "decisions": [
+        {"id": "consensus", "name": "Consensus", "description": "Seek agreement; majority report with dissent."},
+        {"id": "majority", "name": "Majority Vote", "description": "Simple majority."},
+        {"id": "ranked_choice", "name": "Ranked Choice", "description": "Ranked-choice tally."},
+    ],
+    "default_structure_id": "collaborative",
+    "default_decision_id": "consensus",
+}
+
+def sse(event, data):
+    return f"event: {event}\ndata: {json.dumps(data)}\n\n".encode()
+
+class H(BaseHTTPRequestHandler):
+    def log_message(self, *a): pass
+    def _json(self, obj, code=200):
+        body = json.dumps(obj).encode()
+        self.send_response(code)
+        self.send_header("Content-Type", "application/json")
+        self.send_header("Access-Control-Allow-Origin", "*")
+        self.send_header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE,OPTIONS")
+        self.send_header("Access-Control-Allow-Headers", "Content-Type")
+        self.send_header("Cache-Control", "no-store")
+        self.end_headers()
+        self.wfile.write(body)
+    def do_OPTIONS(self):
+        self.send_response(204)
+        self.send_header("Access-Control-Allow-Origin", "*")
+        self.send_header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE,OPTIONS")
+        self.send_header("Access-Control-Allow-Headers", "Content-Type")
+        self.end_headers()
+    def do_GET(self):
+        p = self.path.split("?")[0]
+        if p == "/api/models": return self._json({"neon_models": NEON_MODELS, "providers": PROVIDERS})
+        if p == "/api/personas": return self._json({"neon": NEON_PERSONAS, "extra": EXTRA})
+        if p == "/api/demo-questions": return self._json({"questions": DEMO_QUESTIONS})
+        if p == "/api/chat/orchestrator": return self._json({"model_id": "gpt-4o-mini"})
+        if p == "/api/chat/speed-priority": return self._json({"enabled": False})
+        if p == "/api/chat/conversation-formats": return self._json(FORMATS)
+        if p == "/api/auth/status": return self._json({"logged_in": False, "is_org_member": False, "remaining_conversations": 30})
+        if p == "/api/rate-limit/status": return self._json({"remaining": 30, "daily_limit": 30})
+        return self._json({}, 404)
+    def do_PUT(self):
+        self._read()
+        if self.path.startswith("/api/chat/orchestrator"): return self._json({"model_id": "gpt-4o-mini"})
+        if self.path.startswith("/api/chat/speed-priority"): return self._json({"enabled": False})
+        return self._json({})
+    def do_PATCH(self):
+        self._read(); return self._json({})
+    def _read(self):
+        n = int(self.headers.get("Content-Length", 0) or 0)
+        return self.rfile.read(n) if n else b""
+    def do_POST(self):
+        raw = self._read()
+        try: body = json.loads(raw or b"{}")
+        except Exception: body = {}
+        if self.path.startswith("/api/chat/suggest-model"):
+            return self._json({"recommended_model_id": "gemini-2.5-flash",
+                "rationale": "A philosophy-leaning critic benefits from a model with strong reasoning and concise argumentation; Gemini 2.5 Flash also diversifies the panel away from the GPT family already present."})
+        if self.path.startswith("/api/chat/generate-role-freeform") or self.path.startswith("/api/chat/generate-role"):
+            return self._json({"role_prompt": "You are " + (body.get("name") or "an expert") + ". (mock-generated role prompt for UI rendering)"})
+        if self.path.startswith("/api/chat/auto-select-participants"):
+            cands = body.get("candidates", [])
+            return self._json({"selected": [c["participant_id"] for c in cands[:body.get("count",3)]],
+                               "rationale": "Picked the most topically relevant participants (mock)."})
+        if self.path.startswith("/api/chat/start"):
+            return self._sse_panel(body)
+        return self._json({})
+    def _sse_panel(self, body):
+        self.send_response(200)
+        self.send_header("Content-Type", "text/event-stream")
+        self.send_header("Access-Control-Allow-Origin", "*")
+        self.send_header("Cache-Control", "no-cache")
+        self.end_headers()
+        parts = body.get("participants", [])
+        if len(parts) < 2:
+            parts = [{"participant_id": "extra_pragmatic_generalist", "name": "Pragmatic Finance Expert"},
+                     {"participant_id": "extra_skeptical_critic", "name": "Skeptical Philosopher"},
+                     {"participant_id": "extra_empathetic_humanist", "name": "Empathetic Historian"}]
+        q = body.get("question", "the question")
+        sid = "mock-" + str(int(time.time()))
+        roster = [{"participant_id": p["participant_id"], "name": p["name"],
+                   "model_display": p.get("name")} for p in parts]
+        self.wfile.write(sse("session", {"session_id": sid, "participants": roster})); self.wfile.flush()
+        self.wfile.write(sse("status", {"message": "Phase 1: Initial Opinions"})); self.wfile.flush()
+        op = {
+            parts[0]["name"]: f"On '{q[:50]}...', my first take is to weigh cost against benefit. The numbers have to clear a return-on-investment bar before anything else.",
+            parts[1]["name"]: "I'd challenge the framing. Before we optimize, what assumption are we all making that nobody has examined? Let's pressure-test the premise.",
+        }
+        if len(parts) > 2:
+            op[parts[2]["name"]] = "I want to center the human stakes. Whoever is on the receiving end of this decision matters as much as the spreadsheet."
+        for i, p in enumerate(parts):
+            mid = f"m{i}"
+            txt = op.get(p["name"], "Here is my initial opinion, grounded in my area of expertise.")
+            self.wfile.write(sse("message", {"message_id": mid, "role": "participant",
+                "speaker_id": p["participant_id"], "speaker_name": p["name"],
+                "text": txt, "phase": "initial_opinions", "elapsed_seconds": 2.1 + i,
+                "timestamp": time.time()})); self.wfile.flush()
+        self.wfile.write(sse("orchestrator", {"message_id": "o1", "role": "orchestrator",
+            "kind": "status", "text": "All participants have given initial opinions. Moving to the critique phase, where each will respond to the others.",
+            "timestamp": time.time()})); self.wfile.flush()
+        self.wfile.write(sse("message", {"message_id": "m10", "role": "participant",
+            "speaker_id": parts[1]["participant_id"], "speaker_name": parts[1]["name"],
+            "text": "Responding directly to the finance framing: ROI is necessary but not sufficient. A positive ROI on paper can still be the wrong call if it erodes trust.",
+            "addressed_to": parts[0]["participant_id"], "replying_to": [parts[0]["participant_id"]],
+            "phase": "critique", "elapsed_seconds": 3.4, "timestamp": time.time()})); self.wfile.flush()
+        self.wfile.write(sse("orchestrator", {"message_id": "o2", "role": "orchestrator",
+            "kind": "majority_report",
+            "text": "**Majority Report.** The panel converges on a staged approach: validate ROI on a small pilot first, while explicitly protecting the human/trust factors the Historian raised. One participant dissents, preferring a faster full commitment.",
+            "timestamp": time.time()})); self.wfile.flush()
+        self.wfile.write(sse("system", {"text": "End of Chat"})); self.wfile.flush()
+        self.wfile.write(sse("done", {})); self.wfile.flush()
+
+if __name__ == "__main__":
+    print("Mock backend on :8000")
+    ThreadingHTTPServer(("127.0.0.1", 8000), H).serve_forever()

scripts/dev-local.sh

@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+export PATH="/opt/homebrew/bin:/opt/homebrew/opt/python@3.12/libexec/bin:$PATH"
+
+echo "Starting CCAI-Vibe-Demo local dev (hot reload enabled)"
+echo "Project root: $ROOT"
+echo ""
+
+# Cross-project secrets (shared.env) — loaded by backend/app/config.py before .env
+if [[ -n "${SHARED_ENV_PATH:-}" && -f "${SHARED_ENV_PATH}" ]]; then
+  echo "Using shared secrets: $SHARED_ENV_PATH"
+elif [[ -f "$HOME/.secrets/shared.env" ]]; then
+  export SHARED_ENV_PATH="$HOME/.secrets/shared.env"
+  echo "Using shared secrets: $SHARED_ENV_PATH"
+elif [[ -f "$HOME/Downloads/shared.env" ]]; then
+  export SHARED_ENV_PATH="$HOME/Downloads/shared.env"
+  echo "Using shared secrets: $SHARED_ENV_PATH"
+fi
+
+if [[ ! -f "$ROOT/.env" ]]; then
+  cp "$ROOT/.env.example" "$ROOT/.env"
+  echo "Created .env from .env.example — project overrides only; API keys can live in shared.env."
+fi
+
+if [[ ! -f "$ROOT/frontend/.env.development" ]]; then
+  echo "REACT_APP_API_URL=http://localhost:8000" > "$ROOT/frontend/.env.development"
+fi
+
+cleanup() {
+  echo ""
+  echo "Stopping dev servers..."
+  jobs -p | xargs kill 2>/dev/null || true
+}
+trap cleanup EXIT INT TERM
+
+cd "$ROOT/backend"
+PYTHON="${PYTHON:-/opt/homebrew/bin/python3.12}"
+if [[ ! -d venv ]]; then
+  "$PYTHON" -m venv venv
+  source venv/bin/activate
+  pip install -r requirements.txt
+else
+  source venv/bin/activate
+fi
+
+echo "→ Backend: http://localhost:8000 (uvicorn --reload)"
+uvicorn app.main:app --reload --host 0.0.0.0 --port 8000 &
+BACKEND_PID=$!
+
+cd "$ROOT/frontend"
+if [[ ! -d node_modules ]]; then
+  npm install
+fi
+
+echo "→ Frontend: http://localhost:3000 (react-scripts start)"
+BROWSER=none npm start &
+FRONTEND_PID=$!
+
+wait $BACKEND_PID $FRONTEND_PID