Add demo trio personas and polish empty-state panel UX.

Introduce Elena, Marcus, and Dr. Amira as default catalog participants with a build-vs-buy sample preview, dynamic empty-state guidance, readable bubble text, and sidebar prompt display fixes; reassign Marcus to Mistral after Fireworks DeepSeek v3.2 404s locally.

Co-authored-by: Cursor <cursoragent@cursor.com>

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/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."
+        ),
+    ),
 ]
 
 

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);
@@ -1074,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">
@@ -1154,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}

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

@@ -297,38 +297,60 @@ export default function ExpertPersonaModal({
             </div>
           </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-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."
+              >
+                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-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' ? (

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

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

@@ -165,6 +165,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 +207,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 +260,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 */
@@ -405,6 +444,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;
@@ -894,6 +952,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;

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

@@ -117,7 +117,7 @@
   flex: 1;
   min-height: 0;
   padding: 20px 24px;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 0;

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()