Fix debate elimination display and preserve original debater role numbers

- Add elimination cards (orange themed) in Timeline showing who was convinced and by whom
- Add "N eliminated" badge in round headers
- Preserve original debater numbers after elimination by passing original_indices through debate_round()

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

1 files changed, 19 insertions, 0 deletions

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 474a969..7aed93c 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -3081,6 +3081,13 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => {
                             >
                               <span>Round {round.round} ({round.responses.length} responses)</span>
                               <div className="flex items-center gap-2">
+                                {round.eliminated && round.eliminated.length > 0 && (
+                                  <span className={`px-1.5 py-0.5 rounded text-[10px] ${
+                                    isDark ? 'bg-orange-900/50 text-orange-300' : 'bg-orange-100 text-orange-700'
+                                  }`}>
+                                    {round.eliminated.length} eliminated
+                                  </span>
+                                )}
                                 {round.judgeDecision && (
                                   <span className={`px-1.5 py-0.5 rounded text-[10px] ${
                                     round.judgeDecision.continue
@@ -3118,6 +3125,18 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => {
                                     </div>
                                   </div>
                                 ))}
+                                {round.eliminated && round.eliminated.length > 0 && (
+                                  <div className="space-y-1">
+                                    {round.eliminated.map((elim, ei) => (
+                                      <div key={ei} className={`rounded border p-2 text-xs ${isDark ? 'border-orange-800/50 bg-orange-900/20 text-orange-200' : 'border-orange-200 bg-orange-50 text-orange-800'}`}>
+                                        <div className="font-semibold mb-1">
+                                          {elim.model} was convinced{elim.convincedBy && <> by <span className="text-orange-400">{elim.convincedBy}</span></>}
+                                        </div>
+                                        <div className="whitespace-pre-wrap">{elim.reasoning}</div>
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
                                 {round.judgeDecision && (
                                   <div className={`rounded border p-2 text-xs ${isDark ? 'border-amber-800/50 bg-amber-900/20 text-amber-200' : 'border-amber-200 bg-amber-50 text-amber-800'}`}>
                                     <div className="font-semibold mb-1">Judge Decision</div>