feat(participants): add "Select N Automatically" option

When the user picks the new top-of-dropdown "Select N Automatically"
option, the trigger label switches to "Participants Auto Selected" and
manual persona checkboxes are hidden. Clicking either start button
calls a new /api/chat/auto-select-participants endpoint that uses the
orchestrator LLM to rank all available candidates by relevance to the
question, populates the sidebar with the top N, then proceeds with
/chat/start as usual. Manual selection is restored if auto mode is
turned back off.

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

backend/app/api/chat.py

@@ -32,6 +32,7 @@ from app.services.models import (
     Session,
     clamp_conversation_limits,
 )
+from app.services.auto_select import auto_select_participants
 from app.services.orchestrator import (
     create_session,
     get_session,
@@ -97,6 +98,27 @@ class ParticipantSelectionPayload(BaseModel):
     model_id_override: str | None = None
 
 
+class AutoSelectCandidate(BaseModel):
+    """One row of the candidate pool sent to the auto-select endpoint."""
+
+    participant_id: str
+    name: str
+    role_prompt: str = ""
+    kind: str = ""
+    model_id: str = ""
+
+
+class AutoSelectRequest(BaseModel):
+    """Body of POST /api/chat/auto-select-participants."""
+
+    question: str
+    count: int = 5
+    candidates: list[AutoSelectCandidate]
+    # Optional: pin the orchestrator model used for ranking. Defaults
+    # to the configured global orchestrator model.
+    orchestrator_model_id: str | None = None
+
+
 class StartChatRequest(BaseModel):
     question: str | None = None
 
@@ -172,6 +194,39 @@ async def api_generate_role_freeform(req: GenerateRoleFreeformRequest):
     return result
 
 
+# ---------------------------------------------------------------------------
+# Auto-select participants (LLM-based ranking for "Select N Automatically")
+# ---------------------------------------------------------------------------
+
+@router.post("/chat/auto-select-participants")
+async def api_auto_select_participants(req: AutoSelectRequest):
+    """Rank the candidate pool by relevance to the question and return
+    the top `count` participant_ids. The frontend calls this just
+    before /chat/start when the user has the auto-select toggle on.
+
+    Returns: {"selected": [id, ...], "rationale": "short string"}.
+    `selected` is exactly `count` long unless the candidate pool is
+    smaller. Invalid / hallucinated ids are silently dropped and
+    padded with the next unused candidates.
+    """
+    if not req.question or not req.question.strip():
+        raise HTTPException(400, "Question is required")
+    if not req.candidates:
+        raise HTTPException(400, "At least one candidate is required")
+    if req.count < 1:
+        raise HTTPException(400, "count must be >= 1")
+
+    candidates_payload = [c.dict() for c in req.candidates]
+    orchestrator_id = req.orchestrator_model_id or settings.orchestrator_model
+    result = await auto_select_participants(
+        orchestrator_model_id=orchestrator_id,
+        question=req.question,
+        candidates=candidates_payload,
+        count=req.count,
+    )
+    return result
+
+
 # ---------------------------------------------------------------------------
 # Conversation limits (steppers in the settings menu)
 # ---------------------------------------------------------------------------

backend/app/services/auto_select.py

@@ -0,0 +1,142 @@
+"""Auto-select N participants for a question.
+
+Backs the optional "Select N Automatically" toggle in the participants
+dropdown. The orchestrator LLM ranks the full candidate pool for
+relevance to the question and returns the top N. The service:
+
+- formats a compact candidates block (id + name + role role-prompt
+  snippet) so the LLM can pick deliberately;
+- runs the call through `orchestrator_call` (which strips think
+  traces and is JSON-tolerant);
+- validates every returned id against the candidate pool, drops
+  invented ones, and pads with the next-best unused candidates if the
+  LLM under-delivered.
+
+If the orchestrator call fails entirely, we fall back to the first N
+candidates in the order received, so the user still gets a working
+chat instead of a hard error.
+"""
+from __future__ import annotations
+
+import logging
+from typing import Any
+
+from app.services.json_calls import orchestrator_call
+from app.services.prompts import AUTO_SELECT_PARTICIPANTS_PROMPT
+
+LOG = logging.getLogger(__name__)
+
+_ROLE_SNIPPET_CHARS = 320
+
+
+def _candidate_block(candidates: list[dict[str, Any]]) -> str:
+    """Render one line per candidate: id, name, kind, model, role snippet.
+
+    Role prompts are truncated so a roster of ~30 candidates fits in
+    a single orchestrator call without crowding out the question.
+    """
+    lines: list[str] = []
+    for i, c in enumerate(candidates, start=1):
+        role = (c.get("role_prompt") or "").strip()
+        if len(role) > _ROLE_SNIPPET_CHARS:
+            role = role[:_ROLE_SNIPPET_CHARS].rstrip() + "..."
+        lines.append(
+            f"{i}. id={c.get('participant_id')} | name={c.get('name')} "
+            f"| kind={c.get('kind')} | model={c.get('model_id')}\n"
+            f"   role: {role or '(no role description)'}"
+        )
+    return "\n".join(lines)
+
+
+def _validate_and_pad(
+    selected_raw: list[str] | None,
+    candidates: list[dict[str, Any]],
+    count: int,
+) -> list[str]:
+    """Keep only LLM-returned ids that exist in the candidate pool,
+    de-dupe while preserving the LLM's ranking, and pad with the next
+    unused candidates (in input order) up to `count`.
+    """
+    valid_ids = {c.get("participant_id") for c in candidates if c.get("participant_id")}
+    chosen: list[str] = []
+    seen: set[str] = set()
+    for sid in selected_raw or []:
+        if not isinstance(sid, str):
+            continue
+        if sid in valid_ids and sid not in seen:
+            chosen.append(sid)
+            seen.add(sid)
+        if len(chosen) == count:
+            break
+
+    if len(chosen) < count:
+        # Pad with the first unused candidates in the order received.
+        for c in candidates:
+            pid = c.get("participant_id")
+            if not pid or pid in seen:
+                continue
+            chosen.append(pid)
+            seen.add(pid)
+            if len(chosen) == count:
+                break
+
+    return chosen[:count]
+
+
+async def auto_select_participants(
+    *,
+    orchestrator_model_id: str,
+    question: str,
+    candidates: list[dict[str, Any]],
+    count: int,
+    api_log: list[dict[str, Any]] | None = None,
+) -> dict[str, Any]:
+    """Return {"selected": [participant_id, ...], "rationale": str}.
+
+    `selected` is always exactly `count` long (padded from the
+    candidate pool if the LLM under-delivers). Never raises on LLM
+    errors - those degrade to a first-N fallback so the caller can
+    proceed to /chat/start.
+    """
+    n_target = max(1, min(count, len(candidates)))
+
+    if not candidates:
+        return {"selected": [], "rationale": "No candidates provided."}
+
+    # Single-candidate / under-supplied pools have nothing to pick from.
+    if len(candidates) <= n_target:
+        return {
+            "selected": [c["participant_id"] for c in candidates if c.get("participant_id")],
+            "rationale": "Candidate pool was at or below the requested count; using all.",
+        }
+
+    prompt = AUTO_SELECT_PARTICIPANTS_PROMPT.format(
+        question=question.strip(),
+        candidates_block=_candidate_block(candidates),
+        count=n_target,
+    )
+    _raw, parsed = await orchestrator_call(
+        orchestrator_model_id=orchestrator_model_id,
+        user_prompt=prompt,
+        label="auto_select_participants",
+        api_log=api_log,
+        max_tokens=512,
+        temperature=0.2,
+    )
+
+    selected_raw: list[str] | None = None
+    rationale = ""
+    if isinstance(parsed, dict):
+        if isinstance(parsed.get("selected"), list):
+            selected_raw = [str(x) for x in parsed["selected"]]
+        if isinstance(parsed.get("rationale"), str):
+            rationale = parsed["rationale"].strip()
+
+    selected = _validate_and_pad(selected_raw, candidates, n_target)
+
+    if not rationale:
+        rationale = "Selected by relevance to the question."
+    if not selected_raw:
+        rationale = "Auto-select fell back to the first candidates (LLM unavailable)."
+
+    return {"selected": selected, "rationale": rationale}

backend/app/services/prompts/__init__.py

@@ -35,6 +35,7 @@ from app.services.prompts.closure import (
     NO_CONSENSUS_REPORT_PROMPT,
     CONTRIBUTION_SUMMARY_PROMPT,
 )
+from app.services.prompts.auto_select import AUTO_SELECT_PARTICIPANTS_PROMPT
 
 __all__ = [
     "PARTICIPANT_BASE_DIRECTIVE",
@@ -57,4 +58,5 @@ __all__ = [
     "MAJORITY_REPORT_PROMPT",
     "NO_CONSENSUS_REPORT_PROMPT",
     "CONTRIBUTION_SUMMARY_PROMPT",
+    "AUTO_SELECT_PARTICIPANTS_PROMPT",
 ]

backend/app/services/prompts/auto_select.py

@@ -0,0 +1,28 @@
+"""Prompt for the optional "Select N Automatically" mode.
+
+The user can enable an auto-select toggle in the participants dropdown;
+when they start a chat, the orchestrator LLM ranks every available
+candidate persona for relevance to the question and returns the top N.
+"""
+
+AUTO_SELECT_PARTICIPANTS_PROMPT = (
+    "You are helping pick the most relevant participants for a CCAI "
+    "group discussion. The user has asked the following question:\n\n"
+    "<<<\n{question}\n>>>\n\n"
+    "Here are the candidate participants. Each has a `participant_id`, "
+    "a display `name`, and a role description (`role_prompt`).\n\n"
+    "{candidates_block}\n\n"
+    "Pick the {count} participants whose expertise and perspective are "
+    "MOST relevant and complementary for this question. Aim for "
+    "diversity of viewpoint as well as topical fit - a group of five "
+    "experts who all think the same way is less useful than five who "
+    "will productively disagree.\n\n"
+    "Reply with ONLY a JSON object of the exact shape:\n"
+    "{{\n"
+    "  \"selected\": [\"participant_id_1\", \"participant_id_2\", ...],\n"
+    "  \"rationale\": \"one short sentence explaining the mix\"\n"
+    "}}\n\n"
+    "`selected` MUST contain exactly {count} ids drawn ONLY from the "
+    "candidate list above, in order of relevance (most relevant first). "
+    "Do not invent ids."
+)

frontend/src/App.js

@@ -11,8 +11,9 @@ import {
   fetchModels, fetchPersonas, fetchDemoQuestions,
   startChat, continueChat, getOrchestrator, setOrchestrator,
   getSpeedPriority, setSpeedPriority, getAuthStatus,
-  exportChat, exportApiLog, fetchTableView, fetchCredentials,
+  exportChat, exportApiLog, fetchTableView,   fetchCredentials,
   fetchConversationLimitsDefaults,
+  autoSelectParticipants,
   getRateLimitStatus,
 } from './utils/api';
 import * as storage from './utils/storage';
@@ -84,6 +85,14 @@ export default function App() {
     persisted.conversation_limits || {},
   );
   const [limitsOpen, setLimitsOpen] = useState(false);
+  // Auto-select toggle: when on, the participant dropdown defers
+  // selection to the orchestrator LLM at /chat/start time. We also
+  // snapshot the user's manual selection before turning it on so we
+  // can restore it when it's turned back off.
+  const [autoSelectMode, setAutoSelectMode] = useState(
+    !!persisted.auto_select_mode,
+  );
+  const [priorManualSelection, setPriorManualSelection] = useState(null);
 
   const abortRef = useRef(null);
 
@@ -230,6 +239,21 @@ export default function App() {
     });
   }, []);
 
+  // ─── Auto-select toggle ─────────────────────────────────────────
+  // When turning ON, snapshot the current manual selection so we can
+  // restore it on OFF. The actual LLM ranking happens in handleStart
+  // (so the user's question is available); this just flips the mode.
+  const handleToggleAutoSelectMode = useCallback((on) => {
+    if (on && !autoSelectMode) {
+      setPriorManualSelection([...selectedIds]);
+    } else if (!on && autoSelectMode && priorManualSelection !== null) {
+      setSelectedIds(priorManualSelection);
+      setPriorManualSelection(null);
+    }
+    setAutoSelectMode(!!on);
+    storage.setAutoSelectMode(!!on);
+  }, [autoSelectMode, selectedIds, priorManualSelection]);
+
   // ─── Expert persona ops ─────────────────────────────────────────
   const handleOpenExpertModal = useCallback((personaOrNull) => {
     setExpertEditing(personaOrNull);
@@ -353,11 +377,13 @@ export default function App() {
   }, []);
 
   // ─── Build start payload ────────────────────────────────────────
-  const buildStartPayload = useCallback((theQuestion) => {
-    const enabledParticipants = selectedParticipants.filter(
-      p => enabledMap[p.participant_id] !== false,
-    );
-    const participants = enabledParticipants.map(p => ({
+  // `participantsOverride`, if provided, replaces the
+  // selectedParticipants-derived list (used by the auto-select flow
+  // because the freshly-chosen list isn't in state yet when we need it).
+  const buildStartPayload = useCallback((theQuestion, participantsOverride) => {
+    const baseList = participantsOverride
+      ?? selectedParticipants.filter(p => enabledMap[p.participant_id] !== false);
+    const participants = baseList.map(p => ({
       participant_id: p.participant_id,
       kind: p.kind || (p.participant_id.startsWith('neon:') ? 'neon'
         : (p.participant_id.startsWith('extra_') ? 'extra' : 'expert')),
@@ -365,7 +391,7 @@ export default function App() {
       role_prompt: p.role_prompt || null,
       model_id_override: modelAssignments[p.participant_id] || null,
     }));
-    const expert_payload = enabledParticipants
+    const expert_payload = baseList
       .filter(p => (p.kind || '').startsWith('expert'))
       .map(p => ({
         participant_id: p.participant_id,
@@ -405,23 +431,94 @@ export default function App() {
   // ─── Start chat ─────────────────────────────────────────────────
   const handleStart = useCallback(async (theQuestion) => {
     if (!theQuestion || !theQuestion.trim()) return;
-    if (enabledSelectedCount < 2) return;
+    // In auto-select mode the dropdown has no manual picks - skip the
+    // pre-flight count check and validate the chosen pool below instead.
+    if (!autoSelectMode && enabledSelectedCount < 2) return;
 
     const controller = new AbortController();
     abortRef.current = controller;
     setIsRunning(true);
     setMessages([]);
     setSystemMessages([]);
-    setStatusText('Starting conversation...');
+    setStatusText(
+      autoSelectMode ? 'Picking participants...' : 'Starting conversation...',
+    );
     setSessionId(null);
     setSessionParticipants([]);
     setPause(null);
     setActiveQuestion(theQuestion.trim());
     setCredentialsData(null);
 
+    // Resolve the final participant list. When auto-select is on, ask
+    // the orchestrator to rank every available candidate; otherwise
+    // fall through to the user's manual selection.
+    let resolvedParticipants = null;
+    if (autoSelectMode) {
+      const candidatePool = Object.values(allCatalogParticipants);
+      if (candidatePool.length < 2) {
+        setIsRunning(false);
+        setStatusText('');
+        setSystemMessages(prev => [...prev, {
+          text: 'Auto-select needs at least 2 candidate participants available.',
+        }]);
+        return;
+      }
+      const candidatesPayload = candidatePool.map(p => ({
+        participant_id: p.participant_id,
+        name: p.name,
+        role_prompt: p.role_prompt || '',
+        kind: p.kind || (p.participant_id.startsWith('neon:') ? 'neon'
+          : (p.participant_id.startsWith('extra_') ? 'extra' : 'expert')),
+        model_id: modelAssignments[p.participant_id]
+          || p.model_id || p.default_model_id || '',
+      }));
+      try {
+        const result = await autoSelectParticipants({
+          question: theQuestion.trim(),
+          count: maxParticipants,
+          candidates: candidatesPayload,
+          orchestrator_model_id: orchestratorModel,
+        });
+        const chosenIds = result.selected || [];
+        resolvedParticipants = chosenIds
+          .map(id => allCatalogParticipants[id])
+          .filter(Boolean);
+        if (resolvedParticipants.length < 2) {
+          setIsRunning(false);
+          setStatusText('');
+          setSystemMessages(prev => [...prev, {
+            text: 'Auto-select returned too few participants. '
+              + 'Turn auto-select off and pick manually.',
+          }]);
+          return;
+        }
+        // Reflect the pick in the sidebar.
+        setSelectedIds(chosenIds);
+        setEnabledMap(prev => {
+          const next = { ...prev };
+          for (const id of chosenIds) next[id] = true;
+          return next;
+        });
+        if (result.rationale) {
+          setSystemMessages(prev => [...prev, {
+            text: `Auto-select rationale: ${result.rationale}`,
+          }]);
+        }
+        setStatusText('Starting conversation...');
+      } catch (err) {
+        console.error('Auto-select failed:', err);
+        setIsRunning(false);
+        setStatusText('');
+        setSystemMessages(prev => [...prev, {
+          text: `Auto-select failed: ${err.message}`,
+        }]);
+        return;
+      }
+    }
+
     try {
       await startChat(
-        buildStartPayload(theQuestion),
+        buildStartPayload(theQuestion, resolvedParticipants),
         {
           onSession: (data) => {
             setSessionId(data.session_id);
@@ -495,7 +592,11 @@ export default function App() {
       abortRef.current = null;
       getAuthStatus().then(setAuth).catch(() => {});
     }
-  }, [buildStartPayload, enabledSelectedCount, dailyLimit]);
+  }, [
+    buildStartPayload, enabledSelectedCount, dailyLimit,
+    autoSelectMode, allCatalogParticipants, modelAssignments,
+    maxParticipants, orchestratorModel,
+  ]);
 
   const handleStartRandom = useCallback(() => {
     if (demoQuestions.length === 0) {
@@ -506,8 +607,17 @@ export default function App() {
     handleStart(q.text);
   }, [demoQuestions, handleStart]);
 
-  const startDisabled = isRunning || enabledSelectedCount < 2;
-  const startDisabledReason = enabledSelectedCount < 2
+  // In auto-select mode we don't require manual picks - the orchestrator
+  // will choose them at /chat/start time, so just need 2+ candidates
+  // available in the catalog.
+  const autoSelectReady = autoSelectMode
+    && Object.keys(allCatalogParticipants).length >= 2;
+  const startDisabled = isRunning
+    || (!autoSelectMode && enabledSelectedCount < 2)
+    || (autoSelectMode && !autoSelectReady);
+  const startDisabledReason = autoSelectMode
+    ? (!autoSelectReady ? 'No candidate participants available for auto-select.' : '')
+    : enabledSelectedCount < 2
     ? 'Add at least 2 active participants to start.'
     : '';
 
@@ -524,6 +634,8 @@ export default function App() {
         maxParticipants={maxParticipants}
         onToggleParticipant={handleToggleParticipant}
         onOpenExpertModal={handleOpenExpertModal}
+        autoSelectMode={autoSelectMode}
+        onToggleAutoSelectMode={handleToggleAutoSelectMode}
 
         allModels={allModelsFlat}
         orchestratorModel={orchestratorModel}
@@ -560,6 +672,8 @@ export default function App() {
           modelAssignments={modelAssignments}
           onToggleEnabled={handleSidebarToggleEnabled}
           onRemove={handleSidebarRemove}
+          autoSelectMode={autoSelectMode}
+          maxParticipants={maxParticipants}
         />
         <div className="content">
           <ChatControls

frontend/src/components/Header.js

@@ -21,6 +21,8 @@ export default function Header({
   maxParticipants,
   onToggleParticipant,
   onOpenExpertModal,
+  autoSelectMode,
+  onToggleAutoSelectMode,
 
   // dev menu props passed straight through
   ...devProps
@@ -46,6 +48,8 @@ export default function Header({
           maxParticipants={maxParticipants}
           onToggleParticipant={onToggleParticipant}
           onOpenExpertModal={onOpenExpertModal}
+          autoSelectMode={autoSelectMode}
+          onToggleAutoSelectMode={onToggleAutoSelectMode}
         />
         <button
           className="icon-btn"

frontend/src/components/ParticipantDropdown.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Users, Plus, ChevronDown } from 'lucide-react';
+import { Users, Plus, ChevronDown, Wand2, Check } from 'lucide-react';
 
 /**
  * Header dropdown that lists every available participant the user can
@@ -8,6 +8,11 @@ import { Users, Plus, ChevronDown } from 'lucide-react';
  *   - Extra (the four bundled non-Neon-LLM personas)
  *   - Expert (user-created, stored in localStorage)
  *
+ * A top-of-list "Select N Automatically" toggle defers the choice to
+ * the orchestrator LLM: when enabled, manual checkboxes are visually
+ * disabled and the actual picks happen at /chat/start time via the
+ * /api/chat/auto-select-participants endpoint.
+ *
  * Selecting a participant adds them to the active conversation list. The
  * "Create Expert Persona..." entry opens the modal.
  */
@@ -18,6 +23,8 @@ export default function ParticipantDropdown({
   maxParticipants,
   onToggleParticipant,
   onOpenExpertModal,
+  autoSelectMode,
+  onToggleAutoSelectMode,
 }) {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
@@ -34,21 +41,61 @@ export default function ParticipantDropdown({
 
   const isSelected = (id) => selectedIds.includes(id);
   const atCap = selectedIds.length >= maxParticipants;
+  // When auto-select is on, checkboxes are deferred entirely - the
+  // orchestrator picks at start time, so user picks are ignored.
+  const checkboxDisabledForAuto = !!autoSelectMode;
 
   return (
     <div className="ccai-dropdown-wrap" ref={ref}>
       <button
         className="btn-sm btn-outline ccai-dropdown-trigger"
         onClick={() => setOpen(o => !o)}
-        title="Add or remove participants"
+        title={
+          autoSelectMode
+            ? 'Auto-select mode: participants picked at chat start by the orchestrator'
+            : 'Add or remove participants'
+        }
       >
         <Users size={14} />
-        <span>Participants ({selectedIds.length}/{maxParticipants})</span>
+        <span>
+          {autoSelectMode
+            ? 'Participants Auto Selected'
+            : `Participants (${selectedIds.length}/${maxParticipants})`}
+        </span>
         <ChevronDown size={12} />
       </button>
       {open && (
         <div className="ccai-dropdown-panel">
           <div className="ccai-dropdown-section">
+            <button
+              type="button"
+              className={
+                'ccai-dropdown-autoselect' +
+                (autoSelectMode ? ' ccai-dropdown-autoselect-on' : '')
+              }
+              onClick={() => onToggleAutoSelectMode?.(!autoSelectMode)}
+              title={
+                autoSelectMode
+                  ? 'Turn off auto-select and resume manual picking'
+                  : 'Defer participant selection until chat start; the orchestrator will pick the most relevant.'
+              }
+            >
+              {autoSelectMode ? <Check size={14} /> : <Wand2 size={14} />}
+              <span>Select {maxParticipants} Automatically</span>
+            </button>
+            <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.'}
+            </div>
+          </div>
+          <div className="ccai-dropdown-divider" />
+          <div
+            className={
+              'ccai-dropdown-section' +
+              (checkboxDisabledForAuto ? ' ccai-dropdown-section-muted' : '')
+            }
+          >
             <div className="ccai-dropdown-section-title">Neon.ai Personas</div>
             {(catalog?.neon || []).length === 0 && (
               <div className="ccai-dropdown-empty">
@@ -60,26 +107,44 @@ export default function ParticipantDropdown({
                 key={p.participant_id}
                 participant={p}
                 checked={isSelected(p.participant_id)}
-                disabledForAdd={atCap && !isSelected(p.participant_id)}
+                disabledForAdd={
+                  checkboxDisabledForAuto
+                  || (atCap && !isSelected(p.participant_id))
+                }
+                autoSelectActive={checkboxDisabledForAuto}
                 onToggle={() => onToggleParticipant(p, 'neon')}
               />
             ))}
           </div>
           <div className="ccai-dropdown-divider" />
-          <div className="ccai-dropdown-section">
+          <div
+            className={
+              'ccai-dropdown-section' +
+              (checkboxDisabledForAuto ? ' ccai-dropdown-section-muted' : '')
+            }
+          >
             <div className="ccai-dropdown-section-title">Extra Personas</div>
             {(catalog?.extra || []).map((p) => (
               <DropdownItem
                 key={p.participant_id}
                 participant={p}
                 checked={isSelected(p.participant_id)}
-                disabledForAdd={atCap && !isSelected(p.participant_id)}
+                disabledForAdd={
+                  checkboxDisabledForAuto
+                  || (atCap && !isSelected(p.participant_id))
+                }
+                autoSelectActive={checkboxDisabledForAuto}
                 onToggle={() => onToggleParticipant(p, 'extra')}
               />
             ))}
           </div>
           <div className="ccai-dropdown-divider" />
-          <div className="ccai-dropdown-section">
+          <div
+            className={
+              'ccai-dropdown-section' +
+              (checkboxDisabledForAuto ? ' ccai-dropdown-section-muted' : '')
+            }
+          >
             <div className="ccai-dropdown-section-title">Expert Personas</div>
             {(expertPersonas || []).length === 0 && (
               <div className="ccai-dropdown-empty">
@@ -91,7 +156,11 @@ export default function ParticipantDropdown({
                 key={p.participant_id}
                 participant={p}
                 checked={isSelected(p.participant_id)}
-                disabledForAdd={atCap && !isSelected(p.participant_id)}
+                disabledForAdd={
+                  checkboxDisabledForAuto
+                  || (atCap && !isSelected(p.participant_id))
+                }
+                autoSelectActive={checkboxDisabledForAuto}
                 onToggle={() => onToggleParticipant(p, 'expert')}
               />
             ))}
@@ -109,7 +178,7 @@ export default function ParticipantDropdown({
   );
 }
 
-function DropdownItem({ participant, checked, disabledForAdd, onToggle }) {
+function DropdownItem({ participant, checked, disabledForAdd, autoSelectActive, onToggle }) {
   return (
     <label
       className={
@@ -117,7 +186,11 @@ function DropdownItem({ participant, checked, disabledForAdd, onToggle }) {
         (checked ? ' ccai-dropdown-item-checked' : '') +
         (disabledForAdd ? ' ccai-dropdown-item-disabled' : '')
       }
-      title={disabledForAdd ? 'Participant cap reached' : ''}
+      title={
+        autoSelectActive
+          ? 'Disabled while auto-select is on'
+          : (disabledForAdd ? 'Participant cap reached' : '')
+      }
     >
       <input
         type="checkbox"

frontend/src/components/ParticipantSidebar.js

@@ -14,19 +14,39 @@ export default function ParticipantSidebar({
   modelAssignments,
   onToggleEnabled,
   onRemove,
+  autoSelectMode,
+  maxParticipants,
 }) {
+  // In auto-select mode with no chat in progress, the sidebar shows a
+  // placeholder explaining the deferred selection. Once the chat
+  // starts, App.js populates `participants` with the LLM-chosen set
+  // and the regular cards render normally.
+  const showAutoPlaceholder = autoSelectMode && participants.length === 0;
+
   return (
     <aside className="sidebar ccai-sidebar">
       <div className="ccai-sidebar-header">
         <h2 className="sidebar-title">Participants</h2>
         <div className="ccai-sidebar-help">
-          {participants.length === 0 ? (
+          {showAutoPlaceholder ? (
+            <em>Auto-select is on.</em>
+          ) : participants.length === 0 ? (
             <em>Use the Participants dropdown in the header to add some.</em>
           ) : (
             <em>Drag to reorder is not supported yet — order is by selection.</em>
           )}
         </div>
       </div>
+      {showAutoPlaceholder && (
+        <div className="ccai-sidebar-autoselect-empty">
+          <strong>Auto-select: {maxParticipants} participants</strong>
+          <div style={{ marginTop: 4 }}>
+            When you start the chat, the orchestrator will pick the
+            {' '}<strong>{maxParticipants}</strong> participants whose
+            expertise best fits your question.
+          </div>
+        </div>
+      )}
       {participants.map((p) => {
         const enabled = enabledMap[p.participant_id] !== false;
         const modelOverride = modelAssignments[p.participant_id];

frontend/src/styles/ccai.css

@@ -1119,3 +1119,59 @@
   color: var(--text-secondary);
   line-height: 1.45;
 }
+
+
+/* ── Auto-select participants (dropdown + sidebar placeholder) ──── */
+
+.ccai-dropdown-autoselect {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+}
+
+.ccai-dropdown-autoselect:hover {
+  border-color: var(--accent-primary, var(--text-primary));
+}
+
+.ccai-dropdown-autoselect-on {
+  background: var(--accent-primary, var(--bg-primary));
+  color: var(--bg-primary, var(--text-primary));
+  border-color: transparent;
+}
+
+.ccai-dropdown-autoselect-help {
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  padding: 6px 4px 0;
+  line-height: 1.4;
+}
+
+.ccai-dropdown-section-muted {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.ccai-sidebar-autoselect-empty {
+  margin: 12px;
+  padding: 12px;
+  border: 1px dashed var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  line-height: 1.45;
+}
+
+.ccai-sidebar-autoselect-empty strong {
+  color: var(--text-primary);
+  font-size: 13px;
+}

frontend/src/utils/api.js

@@ -179,6 +179,26 @@ export async function fetchTableView(sessionId) {
   return resp.json();
 }
 
+/**
+ * Ask the backend to pick the top `count` participants from the
+ * candidate pool by relevance to the question. Used by the
+ * "Select N Automatically" toggle in the participants dropdown.
+ *
+ * Returns: { selected: [participant_id, ...], rationale: "..." }
+ */
+export async function autoSelectParticipants({ question, count, candidates, orchestrator_model_id }) {
+  const resp = await fetch(`${API_BASE}/api/chat/auto-select-participants`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ question, count, candidates, orchestrator_model_id }),
+  });
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({ detail: resp.statusText }));
+    throw new Error(err.detail || 'Auto-select failed');
+  }
+  return resp.json();
+}
+
 /**
  * Fetch the user-tunable conversation-limit defaults, bounds, and
  * descriptions. The frontend uses this to render the "Conversation

frontend/src/utils/storage.js

@@ -24,6 +24,10 @@ const DEFAULTS = {
   // so storing whatever the user typed (including stale values from
   // an earlier session) is safe.
   conversation_limits: {},
+  // When true, the participants dropdown shows "Select N Automatically"
+  // as the active mode and the per-persona checkboxes are hidden.
+  // The auto-select happens just before /chat/start.
+  auto_select_mode: false,
 };
 
 function readAll() {
@@ -96,3 +100,7 @@ export function setTheme(theme) {
 export function setConversationLimits(limitsMap) {
   return patchState({ conversation_limits: limitsMap || {} });
 }
+
+export function setAutoSelectMode(on) {
+  return patchState({ auto_select_mode: !!on });
+}