feat(ui): header cleanup + Table View shortcut + post-chat downloads strip

- Header: drop the redundant 'Human: ' prefix on the human-participant
button; the sidebar already labels the entry as Human, so the prefix
was just visual noise.
- Header: add a dedicated 'Table View' button that opens the same
Summary Table modal as the Settings menu item, so users don't have
to dig through a dropdown to view it.
- ChatArea: after 'End of Chat', render a row mirroring every item in
the header DownloadMenu (Summary table view, .txt, .md, summary
.csv, full API history). The row stacks vertically on phones for
full-label readability.
- ParticipantSidebar: remove the 'Drag to reorder is not supported
yet...' note; reordering isn't on the roadmap and the message just
cluttered the sidebar header.

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

frontend/src/App.js

@@ -872,6 +872,12 @@ export default function App() {
             humanSubmitting={humanSubmitting}
             onHumanSubmit={handleHumanSubmit}
             onHumanSkip={handleHumanSkip}
+            onShowTableView={handleShowTableView}
+            onDownloadChatTxt={handleDownloadTxt}
+            onDownloadChatMd={handleDownloadMd}
+            onDownloadCsvTable={handleDownloadCsvTable}
+            onDownloadApiLog={handleDownloadApiLog}
+            hasApiLog={!!sessionId}
           />
         </div>
       </main>

frontend/src/components/ChatArea.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Table2, FileText, FileCode, FileSpreadsheet, History } from 'lucide-react';
 import MessageBubble from './MessageBubble';
 import OrchestratorMessage from './OrchestratorMessage';
 import FailsafePauseBanner from './FailsafePauseBanner';
@@ -10,6 +11,11 @@ import HumanTurnIndicator from './HumanTurnIndicator';
  * status banners, and the failsafe-pause continue control. Participant
  * coloring is derived from each participant's index in the active
  * roster, so colors are stable per-participant for the whole chat.
+ *
+ * After "End of Chat" arrives we also render a download strip below the
+ * stats line that mirrors the header DownloadMenu items 1:1 (Summary
+ * table view, .txt, .md, .csv, full API log). Per UX request these
+ * stack vertically on narrow viewports.
  */
 export default function ChatArea({
   messages,
@@ -25,6 +31,12 @@ export default function ChatArea({
   humanSubmitting,
   onHumanSubmit,
   onHumanSkip,
+  onShowTableView,
+  onDownloadChatTxt,
+  onDownloadChatMd,
+  onDownloadCsvTable,
+  onDownloadApiLog,
+  hasApiLog,
 }) {
   const speakerIdxFor = useMemo(() => {
     const map = {};
@@ -103,6 +115,54 @@ export default function ChatArea({
           {stats.count} participant messages · {stats.totalTime}s total generation time
         </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>
+      )}
       <FailsafePauseBanner pause={pause} onContinue={onContinuePause} />
       {isRunning && statusText && !awaitingHuman && (
         <div className="status-bar">

frontend/src/components/Header.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UserPlus, UserCheck } from 'lucide-react';
+import { UserPlus, UserCheck, Table2 } from 'lucide-react';
 import AuthBadge from './AuthBadge';
 import ParticipantDropdown from './ParticipantDropdown';
 import DownloadMenu from './DownloadMenu';
@@ -106,7 +106,7 @@ export default function Header({
           {humanParticipant ? (
             <>
               <UserCheck size={14} style={{ marginRight: 4 }} />
-              Human: {humanParticipant.name}
+              {humanParticipant.name}
             </>
           ) : (
             <>
@@ -115,6 +115,18 @@ export default function Header({
             </>
           )}
         </button>
+        <button
+          type="button"
+          className="btn-sm btn-outline ccai-table-view-btn"
+          onClick={onShowTableView}
+          disabled={!hasChat}
+          title={hasChat
+            ? 'Open the conversation summary table'
+            : 'Start a chat to view the summary table'}
+        >
+          <Table2 size={14} style={{ marginRight: 4 }} />
+          Table View
+        </button>
         <DownloadMenu
           hasChat={hasChat}
           hasApiLog={hasApiLog}

frontend/src/components/ParticipantSidebar.js

@@ -27,15 +27,15 @@ export default function ParticipantSidebar({
     <aside className="sidebar ccai-sidebar">
       <div className="ccai-sidebar-header">
         <h2 className="sidebar-title">Participants</h2>
-        <div className="ccai-sidebar-help">
-          {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>
+        {(showAutoPlaceholder || participants.length === 0) && (
+          <div className="ccai-sidebar-help">
+            {showAutoPlaceholder ? (
+              <em>Auto-select is on.</em>
+            ) : (
+              <em>Use the Participants dropdown in the header to add some.</em>
+            )}
+          </div>
+        )}
       </div>
       {showAutoPlaceholder && (
         <div className="ccai-sidebar-autoselect-empty">

frontend/src/styles/ccai.css

@@ -1306,6 +1306,16 @@
   white-space: nowrap;
 }
 
+/* Header "Table View" button — links to the same Summary Table modal
+   the Settings menu opens, so users don't have to dig through a menu
+   to view it during/after a chat. */
+.ccai-table-view-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
 .ccai-human-add-btn-active {
   border-color: #16A34A;
   color: #16A34A;

frontend/src/styles/components.css

@@ -590,6 +590,21 @@
   max-width: 400px;
 }
 
+/* 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-downloads {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 0 4px;
+}
+
+.chat-end-download-btn {
+  white-space: nowrap;
+}
+
 /* ── Chat Controls ─────────────────────────────────────────────── */
 
 .chat-controls {
@@ -1281,6 +1296,16 @@
     font-size: 14px;
     padding: 14px;
   }
+  /* On phones the download strip stacks so each label is fully
+     readable; on wider viewports it stays inline-wrap. */
+  .chat-end-downloads {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+  .chat-end-download-btn {
+    justify-content: center;
+  }
   .btn-sm {
     padding: 5px 8px;
     font-size: 11px;