feat(ui): consolidate downloads, move theme into settings, restructure & darken settings menu, fix max-participants prop wiring

Header

* Replace the standalone Sun/Moon button + the four-button download strip with a single Download dropdown (DownloadMenu.js). Members: View summary table, Chat .txt, Chat .md, Summary table .csv, and Full API history (the only download that lives only here).

* Header now passes every prop to DevMenu explicitly. The previous '...devProps' rest spread silently dropped 'maxParticipants' because Header was destructuring it for ParticipantDropdown's use, leaving DevMenu's stepper to compute Math.max(3, undefined - 1) = NaN on every click. With explicit wiring the stepper receives a real number; the +/- buttons update state again.

Settings menu (DevMenu.js)

* New top item: Theme toggle (Sun/Moon flips Switch to dark/light mode label).

* Every category's items are now indented to match the old Display Options pattern, so the small uppercase category labels read as headers.

* Models / Per-participant rows render two-line: name on top, currently-selected model on a second line, ellipsis-truncated when it overflows. Same treatment for Orchestrator and Summarizer.

* Transparency rows (View Credential Summary, View current chat prompts) lose their right-side > chevron - they trigger modals, not sub-panels, so the chevron was misleading and was wrapping noisily.

* Full API history removed from this menu (lives in the new header DownloadMenu). The other three download items (chat .txt / .md / summary .csv) intentionally remain here too.

Contrast

* .dev-panel button text: --text-secondary -> --text-primary (#4B5563 -> #111827).

* .dev-panel-label and .dev-panel-hint: --text-muted -> --text-secondary.

* Disabled-button opacity raised 0.4 -> 0.55 since the base text is darker now.

* Stepper row indented (padding-left 22px) to align with .dev-panel-row.

Debug instrumentation

* DevMenu.js (panel-render snapshot + +/- click) and App.js handleMaxParticipantsChange include temporary fetch() calls posting to the local debug server so the upcoming reproduction also serves as the verification run for the prop-wiring fix. A follow-up commit will remove these once the logs confirm the bug is resolved.

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

frontend/src/App.js

@@ -191,11 +191,34 @@ export default function App() {
   }, []);
   const handleMaxParticipantsChange = useCallback((n) => {
     const clamped = Math.max(3, Math.min(9, n));
+    // #region agent log
+    fetch('http://127.0.0.1:7660/ingest/b27d4bb5-c1ab-4767-aa98-1cdf1e8fb0ae', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '896623' },
+      body: JSON.stringify({
+        sessionId: '896623',
+        runId: 'maxparticipants-repro',
+        hypothesisId: 'H2',
+        location: 'App.js:handleMaxParticipantsChange',
+        message: 'Parent handler invoked',
+        data: {
+          n,
+          nType: typeof n,
+          nIsNaN: Number.isNaN(n),
+          clamped,
+          clampedIsNaN: Number.isNaN(clamped),
+          prevMaxParticipants: maxParticipants,
+          prevMaxParticipantsType: typeof maxParticipants,
+        },
+        timestamp: Date.now(),
+      }),
+    }).catch(() => {});
+    // #endregion
     setMaxParticipants(clamped);
     if (selectedIds.length > clamped) {
       setSelectedIds(prev => prev.slice(0, clamped));
     }
-  }, [selectedIds]);
+  }, [selectedIds, maxParticipants]);
   const handleModelAssignmentChange = useCallback((participantId, modelId) => {
     setModelAssignments(prev => {
       const next = { ...prev };

frontend/src/components/DevMenu.js

@@ -1,21 +1,39 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import {
-  ChevronRight, Download, Settings2, Search,
-  Square, CheckSquare, UserPlus, Table2, ScrollText, SlidersHorizontal,
+  ChevronRight, Download, Settings2, Search, Sun, Moon,
+  Square, CheckSquare, UserPlus, ScrollText, SlidersHorizontal,
   BookOpen,
 } from 'lucide-react';
 
 /**
- * Settings menu, structurally identical to LLMChats3 but populated with
- * CCAI controls:
- *   - Orchestrator model (searchable)
- *   - Summarizer model (searchable, with "Same as Orchestrator" default)
- *   - Max participants (3-9, default 5)
- *   - Per-participant model assignments
- *   - "Create Expert Persona..." shortcut
- *   - Display options + downloads (txt / md / csv-table / api-log)
+ * Settings menu (gear-icon dropdown in the header).
+ *
+ * Layout, top-to-bottom, all category items indented under the small
+ * uppercase label that introduces them:
+ *   - Theme               (Sun / Moon toggle)
+ *   - Models              (Orchestrator / Summarizer — stacked rows
+ *                          with the currently-chosen model name on a
+ *                          second line, ellipsis-truncated)
+ *   - Max participants    (- / value / + stepper, 3-9)
+ *   - Participants        (Create Expert Persona…, then per-participant
+ *                          rows in the same stacked-row style)
+ *   - Display options     (toggles)
+ *   - Transparency        (Credential Summary, Prompt Catalog — no
+ *                          right-side chevrons; just the labelled
+ *                          buttons)
+ *   - Advanced            (Conversation limits…)
+ *   - Downloads           (chat .txt / .md / summary .csv — same items
+ *                          are also reachable from the header
+ *                          DownloadMenu; the "Full API history" item
+ *                          is *only* in DownloadMenu)
+ *
+ * The header download strip that used to live in this component has
+ * moved into a sibling DownloadMenu component, so this file no longer
+ * renders any header-bar buttons; just the gear and its panel.
  */
 export default function DevMenu({
+  theme,
+  onToggleTheme,
   allModels,
   orchestratorModel,
   onOrchestratorChange,
@@ -31,7 +49,6 @@ export default function DevMenu({
   modelAssignments,
   onModelAssignmentChange,
   onOpenExpertModal,
-  onShowTableView,
   onShowCredentials,
   hasCredentials,
   onShowPromptCatalog,
@@ -40,8 +57,6 @@ export default function DevMenu({
   onDownloadChatTxt,
   onDownloadChatMd,
   onDownloadCsvTable,
-  onDownloadApiLog,
-  hasApiLog,
   hasChat,
 }) {
   const [open, setOpen] = useState(false);
@@ -75,6 +90,31 @@ export default function DevMenu({
     });
   }, [allModels, q]);
 
+  // #region agent log
+  useEffect(() => {
+    if (!open) return;
+    fetch('http://127.0.0.1:7660/ingest/b27d4bb5-c1ab-4767-aa98-1cdf1e8fb0ae', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '896623' },
+      body: JSON.stringify({
+        sessionId: '896623',
+        runId: 'maxparticipants-repro',
+        hypothesisId: 'H1',
+        location: 'DevMenu.js:render',
+        message: 'DevMenu render snapshot (panel open)',
+        data: {
+          maxParticipants,
+          maxParticipantsType: typeof maxParticipants,
+          onMaxParticipantsChangeType: typeof onMaxParticipantsChange,
+          ge9: maxParticipants >= 9,
+          le3: maxParticipants <= 3,
+        },
+        timestamp: Date.now(),
+      }),
+    }).catch(() => {});
+  }, [open, maxParticipants, onMaxParticipantsChange]);
+  // #endregion
+
   const nameForModel = (id) => {
     if (!id) return null;
     const m = allModels.find(x => x.id === id);
@@ -93,31 +133,6 @@ export default function DevMenu({
 
   return (
     <div className="dev-wrap" ref={wrapRef}>
-      <div className="dev-download-btns">
-        <button className="btn-sm btn-outline" disabled={!hasChat} onClick={onDownloadChatTxt}>
-          <Download size={14} /> .txt
-        </button>
-        <button className="btn-sm btn-outline" disabled={!hasChat} onClick={onDownloadChatMd}>
-          <Download size={14} /> .md
-        </button>
-        <button
-          className="btn-sm btn-outline"
-          disabled={!hasChat}
-          onClick={onShowTableView}
-          title="Open the conversation summary table"
-        >
-          <Table2 size={14} /> Table
-        </button>
-        <button
-          className="btn-sm btn-outline"
-          disabled={!hasChat}
-          onClick={onDownloadCsvTable}
-          title="Download the table view as CSV"
-        >
-          <Download size={14} /> .csv
-        </button>
-      </div>
-
       <div className="dev-dropdown-header">
         <button
           className="icon-btn"
@@ -128,41 +143,125 @@ export default function DevMenu({
         </button>
         {open && (
           <div className="dev-panel">
-            <button onClick={() => { setActiveSub(s => s === 'orch' ? null : 'orch'); setQ(''); }}>
-              Orchestrator model… <span className="dev-panel-hint">{orchName}</span>
-              <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
+
+            {/* ── Theme ─────────────────────────────────────────── */}
+            <div className="dev-panel-label">Theme</div>
+            <button
+              className="dev-panel-row"
+              onClick={onToggleTheme}
+              title="Toggle light/dark mode"
+            >
+              {theme === 'light'
+                ? <Moon size={14} className="dev-check-icon" />
+                : <Sun size={14} className="dev-check-icon" />}
+              {theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+            </button>
+
+            <div className="dev-panel-divider" />
+
+            {/* ── Models ────────────────────────────────────────── */}
+            <div className="dev-panel-label">Models</div>
+            <button
+              className="dev-panel-row dev-panel-row-stack"
+              onClick={() => { setActiveSub(s => s === 'orch' ? null : 'orch'); setQ(''); }}
+            >
+              <div className="dev-panel-row-text">
+                <div className="dev-panel-row-name">Orchestrator model…</div>
+                <div className="dev-panel-row-sub">{orchName}</div>
+              </div>
+              <ChevronRight size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
             </button>
-            <button onClick={() => { setActiveSub(s => s === 'sum' ? null : 'sum'); setQ(''); }}>
-              Summarizer model… <span className="dev-panel-hint">{sumName}</span>
-              <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
+            <button
+              className="dev-panel-row dev-panel-row-stack"
+              onClick={() => { setActiveSub(s => s === 'sum' ? null : 'sum'); setQ(''); }}
+            >
+              <div className="dev-panel-row-text">
+                <div className="dev-panel-row-name">Summarizer model…</div>
+                <div className="dev-panel-row-sub">{sumName}</div>
+              </div>
+              <ChevronRight size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
             </button>
 
             <div className="dev-panel-divider" />
+
+            {/* ── Max participants ──────────────────────────────── */}
             <div className="dev-panel-label">Max participants ({maxParticipants})</div>
             <div className="ccai-stepper-row">
               <button
                 className="btn-sm btn-outline ccai-stepper-btn"
                 disabled={maxParticipants <= 3}
-                onClick={() => onMaxParticipantsChange(Math.max(3, maxParticipants - 1))}
+                onClick={() => {
+                  const next = Math.max(3, maxParticipants - 1);
+                  // #region agent log
+                  fetch('http://127.0.0.1:7660/ingest/b27d4bb5-c1ab-4767-aa98-1cdf1e8fb0ae', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '896623' },
+                    body: JSON.stringify({
+                      sessionId: '896623',
+                      runId: 'maxparticipants-repro',
+                      hypothesisId: 'H1',
+                      location: 'DevMenu.js:onMinusClick',
+                      message: 'Minus button clicked',
+                      data: {
+                        maxParticipants,
+                        maxParticipantsType: typeof maxParticipants,
+                        next,
+                        nextType: typeof next,
+                        nextIsNaN: Number.isNaN(next),
+                        onMaxParticipantsChangeType: typeof onMaxParticipantsChange,
+                      },
+                      timestamp: Date.now(),
+                    }),
+                  }).catch(() => {});
+                  // #endregion
+                  onMaxParticipantsChange(next);
+                }}
               >−</button>
               <div className="ccai-stepper-val">{maxParticipants}</div>
               <button
                 className="btn-sm btn-outline ccai-stepper-btn"
                 disabled={maxParticipants >= 9}
-                onClick={() => onMaxParticipantsChange(Math.min(9, maxParticipants + 1))}
+                onClick={() => {
+                  const next = Math.min(9, maxParticipants + 1);
+                  // #region agent log
+                  fetch('http://127.0.0.1:7660/ingest/b27d4bb5-c1ab-4767-aa98-1cdf1e8fb0ae', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '896623' },
+                    body: JSON.stringify({
+                      sessionId: '896623',
+                      runId: 'maxparticipants-repro',
+                      hypothesisId: 'H1',
+                      location: 'DevMenu.js:onPlusClick',
+                      message: 'Plus button clicked',
+                      data: {
+                        maxParticipants,
+                        maxParticipantsType: typeof maxParticipants,
+                        next,
+                        nextType: typeof next,
+                        nextIsNaN: Number.isNaN(next),
+                        onMaxParticipantsChangeType: typeof onMaxParticipantsChange,
+                      },
+                      timestamp: Date.now(),
+                    }),
+                  }).catch(() => {});
+                  // #endregion
+                  onMaxParticipantsChange(next);
+                }}
               >+</button>
               <span className="dev-panel-hint">3-9</span>
             </div>
 
             <div className="dev-panel-divider" />
+
+            {/* ── Participants ──────────────────────────────────── */}
             <div className="dev-panel-label">Participants</div>
-            <button onClick={() => { onOpenExpertModal(null); setOpen(false); }}>
+            <button
+              className="dev-panel-row"
+              onClick={() => { onOpenExpertModal(null); setOpen(false); }}
+            >
               <UserPlus size={14} className="dev-check-icon" />
               Create Expert Persona…
             </button>
-            {(participants || []).length > 0 && (
-              <div className="dev-panel-label">Per-participant model</div>
-            )}
             {(participants || []).map(p => {
               const assigned = modelAssignments[p.participant_id];
               const labelName = assigned ? nameForModel(assigned)
@@ -170,15 +269,21 @@ export default function DevMenu({
               return (
                 <button
                   key={p.participant_id}
+                  className="dev-panel-row dev-panel-row-stack"
                   onClick={() => { setActiveSub(s => s === p.participant_id ? null : p.participant_id); setQ(''); }}
                 >
-                  {p.name}<span className="dev-panel-hint"> {labelName}</span>
-                  <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
+                  <div className="dev-panel-row-text">
+                    <div className="dev-panel-row-name">{p.name}</div>
+                    <div className="dev-panel-row-sub">{labelName}</div>
+                  </div>
+                  <ChevronRight size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
                 </button>
               );
             })}
 
             <div className="dev-panel-divider" />
+
+            {/* ── Display options ───────────────────────────────── */}
             <div className="dev-panel-label">Display options</div>
             <button
               className={`dev-panel-choice ${showResponseTime ? 'dev-panel-choice-active' : ''}`}
@@ -196,8 +301,15 @@ export default function DevMenu({
             </button>
 
             <div className="dev-panel-divider" />
+
+            {/* ── Transparency ──────────────────────────────────── */}
+            {/* No right-side chevrons here: these buttons trigger a
+                modal and don't expand a sub-panel, so the chevron the
+                old layout had was misleading and (per user feedback)
+                wrapped onto a noisy second line. */}
             <div className="dev-panel-label">Transparency</div>
             <button
+              className="dev-panel-row"
               disabled={!hasCredentials}
               onClick={() => { onShowCredentials?.(); setOpen(false); }}
               title={
@@ -208,20 +320,22 @@ export default function DevMenu({
             >
               <ScrollText size={14} className="dev-check-icon" />
               View Credential Summary…
-              <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
             </button>
             <button
+              className="dev-panel-row"
               onClick={() => { onShowPromptCatalog?.(); setOpen(false); }}
               title="View every prompt template the orchestrator and participants use, grouped by phase."
             >
               <BookOpen size={14} className="dev-check-icon" />
               View current chat prompts…
-              <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
             </button>
 
             <div className="dev-panel-divider" />
+
+            {/* ── Advanced ──────────────────────────────────────── */}
             <div className="dev-panel-label">Advanced</div>
             <button
+              className="dev-panel-row"
               onClick={() => { onShowConversationLimits?.(); setOpen(false); }}
               title="View and adjust the per-phase repetition limits and failsafe pause points."
             >
@@ -239,21 +353,40 @@ export default function DevMenu({
                   (custom)
                 </span>
               )}
-              <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5 }} />
+              <ChevronRight size={12} style={{ marginLeft: 'auto', opacity: 0.5, flexShrink: 0 }} />
             </button>
 
             <div className="dev-panel-divider" />
-            <button disabled={!hasChat} className="dev-panel-download-item" onClick={() => { onDownloadChatTxt(); setOpen(false); }}>
-              Download chat as .txt
-            </button>
-            <button disabled={!hasChat} className="dev-panel-download-item" onClick={() => { onDownloadChatMd(); setOpen(false); }}>
-              Download chat as .md
+
+            {/* ── Downloads ─────────────────────────────────────── */}
+            {/* These three are intentional duplicates of items in the
+                header DownloadMenu. The "Full API history" item lives
+                only in DownloadMenu (per UX request) and is therefore
+                not listed here. */}
+            <div className="dev-panel-label">Downloads</div>
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={() => { onDownloadChatTxt(); setOpen(false); }}
+            >
+              <Download size={14} className="dev-check-icon" />
+              Chat as .txt
             </button>
-            <button disabled={!hasChat} className="dev-panel-download-item" onClick={() => { onDownloadCsvTable(); setOpen(false); }}>
-              Download summary table as .csv
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={() => { onDownloadChatMd(); setOpen(false); }}
+            >
+              <Download size={14} className="dev-check-icon" />
+              Chat as .md
             </button>
-            <button disabled={!hasApiLog} onClick={() => { onDownloadApiLog(); setOpen(false); }}>
-              Download full API history
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={() => { onDownloadCsvTable(); setOpen(false); }}
+            >
+              <Download size={14} className="dev-check-icon" />
+              Summary table as .csv
             </button>
           </div>
         )}

frontend/src/components/DownloadMenu.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Download, Table2, FileText, FileCode, FileSpreadsheet, History } from 'lucide-react';
+
+/**
+ * Header dropdown that consolidates every "view this conversation as…"
+ * and "download this conversation as…" action behind a single Download
+ * icon. The same chat-as-.txt / .md / .csv items are *also* listed in
+ * the Settings menu's Downloads section (intentional duplication, per
+ * UX request); the only item that lives *exclusively* here is
+ * "Download full API history".
+ *
+ * Mirrors the open/close + outside-mousedown pattern used by DevMenu so
+ * both dropdowns feel and behave identically.
+ */
+export default function DownloadMenu({
+  hasChat,
+  hasApiLog,
+  onShowTableView,
+  onDownloadChatTxt,
+  onDownloadChatMd,
+  onDownloadCsvTable,
+  onDownloadApiLog,
+}) {
+  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" ref={wrapRef}>
+      <div className="dev-dropdown-header">
+        <button
+          className="icon-btn"
+          onClick={() => setOpen(o => !o)}
+          title="Downloads & exports"
+          aria-label="Downloads"
+        >
+          <Download size={16} />
+        </button>
+        {open && (
+          <div className="dev-panel">
+            <div className="dev-panel-label">View</div>
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={fire(onShowTableView)}
+              title="Open the conversation summary table"
+            >
+              <Table2 size={14} className="dev-check-icon" />
+              Summary table…
+            </button>
+
+            <div className="dev-panel-divider" />
+            <div className="dev-panel-label">Downloads</div>
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={fire(onDownloadChatTxt)}
+            >
+              <FileText size={14} className="dev-check-icon" />
+              Chat as .txt
+            </button>
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={fire(onDownloadChatMd)}
+            >
+              <FileCode size={14} className="dev-check-icon" />
+              Chat as .md
+            </button>
+            <button
+              className="dev-panel-row"
+              disabled={!hasChat}
+              onClick={fire(onDownloadCsvTable)}
+              title="Download the summary table as CSV"
+            >
+              <FileSpreadsheet size={14} className="dev-check-icon" />
+              Summary table as .csv
+            </button>
+            <button
+              className="dev-panel-row"
+              disabled={!hasApiLog}
+              onClick={fire(onDownloadApiLog)}
+              title="Download the full backend API call history for this session"
+            >
+              <History size={14} className="dev-check-icon" />
+              Full API history
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/Header.js

@@ -1,13 +1,22 @@
 import React from 'react';
-import { Sun, Moon } from 'lucide-react';
 import AuthBadge from './AuthBadge';
 import ParticipantDropdown from './ParticipantDropdown';
+import DownloadMenu from './DownloadMenu';
 import DevMenu from './DevMenu';
 
 /**
- * Header bar: brand on the left; on the right, participant dropdown,
- * settings, exports, table-view toggle, and the rate-limit-aware auth
- * badge.
+ * Header bar: brand on the left; on the right, auth badge, participant
+ * dropdown, downloads dropdown, settings (gear) dropdown.
+ *
+ * The standalone Sun/Moon theme toggle that used to live here has moved
+ * inside the DevMenu (Theme is the top item in the settings panel).
+ *
+ * NOTE: every prop that goes to DevMenu is forwarded *explicitly* below
+ * (no `...devProps` rest spread). The previous spread pattern hid the
+ * `maxParticipants` value because Header destructured it for its own
+ * use, which silently stripped it from the spread that fed DevMenu;
+ * the Max Participants stepper then received `undefined` and produced
+ * NaN on every click, which manifested as "the +/- buttons do nothing".
  */
 export default function Header({
   theme,
@@ -24,8 +33,37 @@ export default function Header({
   autoSelectMode,
   onToggleAutoSelectMode,
 
-  // dev menu props passed straight through
-  ...devProps
+  // Models / display
+  allModels,
+  orchestratorModel,
+  onOrchestratorChange,
+  summarizerModel,
+  onSummarizerChange,
+  showResponseTime,
+  onShowResponseTimeChange,
+  showChatStats,
+  onShowChatStatsChange,
+  onMaxParticipantsChange,
+
+  participants,
+  modelAssignments,
+  onModelAssignmentChange,
+
+  // Modals / transparency
+  onShowTableView,
+  onShowCredentials,
+  hasCredentials,
+  onShowPromptCatalog,
+  onShowConversationLimits,
+  conversationLimitsOverridden,
+
+  // Downloads
+  onDownloadChatTxt,
+  onDownloadChatMd,
+  onDownloadCsvTable,
+  onDownloadApiLog,
+  hasApiLog,
+  hasChat,
 }) {
   return (
     <header className="app-header">
@@ -51,16 +89,42 @@ export default function Header({
           autoSelectMode={autoSelectMode}
           onToggleAutoSelectMode={onToggleAutoSelectMode}
         />
-        <button
-          className="icon-btn"
-          onClick={onToggleTheme}
-          title="Toggle theme"
-        >
-          {theme === 'light' ? <Moon size={16} /> : <Sun size={16} />}
-        </button>
+        <DownloadMenu
+          hasChat={hasChat}
+          hasApiLog={hasApiLog}
+          onShowTableView={onShowTableView}
+          onDownloadChatTxt={onDownloadChatTxt}
+          onDownloadChatMd={onDownloadChatMd}
+          onDownloadCsvTable={onDownloadCsvTable}
+          onDownloadApiLog={onDownloadApiLog}
+        />
         <DevMenu
-          {...devProps}
+          theme={theme}
+          onToggleTheme={onToggleTheme}
+          allModels={allModels}
+          orchestratorModel={orchestratorModel}
+          onOrchestratorChange={onOrchestratorChange}
+          summarizerModel={summarizerModel}
+          onSummarizerChange={onSummarizerChange}
+          showResponseTime={showResponseTime}
+          onShowResponseTimeChange={onShowResponseTimeChange}
+          showChatStats={showChatStats}
+          onShowChatStatsChange={onShowChatStatsChange}
+          maxParticipants={maxParticipants}
+          onMaxParticipantsChange={onMaxParticipantsChange}
+          participants={participants}
+          modelAssignments={modelAssignments}
+          onModelAssignmentChange={onModelAssignmentChange}
           onOpenExpertModal={onOpenExpertModal}
+          onShowCredentials={onShowCredentials}
+          hasCredentials={hasCredentials}
+          onShowPromptCatalog={onShowPromptCatalog}
+          onShowConversationLimits={onShowConversationLimits}
+          conversationLimitsOverridden={conversationLimitsOverridden}
+          onDownloadChatTxt={onDownloadChatTxt}
+          onDownloadChatMd={onDownloadChatMd}
+          onDownloadCsvTable={onDownloadCsvTable}
+          hasChat={hasChat}
         />
       </div>
     </header>

frontend/src/styles/ccai.css

@@ -982,7 +982,10 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 10px 8px;
+  /* 22px left padding matches .dev-panel-row indentation so the
+     stepper hangs under the "Max participants" category label
+     consistently with every other category's items. */
+  padding: 4px 10px 8px 22px;
 }
 
 .ccai-stepper-btn {

frontend/src/styles/components.css

@@ -769,7 +769,10 @@
   padding: 8px 10px;
   border: none;
   background: transparent;
-  color: var(--text-secondary);
+  /* Higher-contrast text: was --text-secondary (#4B5563) which read as
+     low-contrast against the white panel. --text-primary (#111827) is
+     near-black and matches the contrast of the rest of the chat UI. */
+  color: var(--text-primary);
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
@@ -782,13 +785,17 @@
 }
 
 .dev-panel button:disabled {
-  opacity: 0.4;
+  /* Slightly less aggressive than 0.4 because the base text is now darker;
+     0.55 keeps disabled items legible-but-distinguishable. */
+  opacity: 0.55;
   cursor: not-allowed;
 }
 
 .dev-panel-hint {
   font-size: 10px;
-  color: var(--text-muted);
+  /* Bumped from --text-muted (#9CA3AF) to --text-secondary (#4B5563)
+     so inline metadata is actually readable. */
+  color: var(--text-secondary);
   margin-left: 6px;
   font-style: italic;
 }
@@ -804,10 +811,55 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--text-muted);
+  /* Bumped from --text-muted to --text-secondary for the same reason. */
+  color: var(--text-secondary);
   padding: 4px 10px 2px;
 }
 
+/* Indented row used for every actionable item inside a category, so
+   labels (left-aligned at 10px) read as clear group headers and the
+   items below them sit at a 22px hang. Matches the look of the
+   original .dev-panel-choice rows. */
+.dev-panel-row {
+  padding-left: 22px !important;
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Two-line variant: name on top, subtitle (model name) on bottom,
+   chevron right-aligned. The middle text column is flex:1, min-width:0
+   so the subtitle can ellipsis-truncate when it overflows. */
+.dev-panel-row-stack {
+  align-items: stretch;
+}
+
+.dev-panel-row-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.dev-panel-row-name {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.25;
+}
+
+.dev-panel-row-sub {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  line-height: 1.2;
+}
+
 .dev-panel-choice {
   padding-left: 22px !important;
   display: flex !important;
@@ -1132,12 +1184,11 @@
 
 /* ── Small tablet / large phone (<600px) ──────────────────────── */
 @media (max-width: 600px) {
-  .dev-download-btns {
-    display: none;
-  }
-  .dev-panel-download-item {
-    display: block !important;
-  }
+  /* The standalone .dev-download-btns header strip and the
+     .dev-panel-download-item mobile fallback inside the settings menu
+     have been replaced by a dedicated <DownloadMenu> dropdown that
+     works on all viewports, so the responsive fallback logic that used
+     to live here is no longer needed. */
   .dev-sub-panel {
     right: 0;
     top: 100%;