Add model response selection UI when no final verdict in debate

When debate ends without a judge verdict (Display Only or Self-convergence
without winner), show last round responses with "Use this" buttons instead
of "No final verdict" placeholder.

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

1 files changed, 54 insertions, 3 deletions

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 7aed93c..672da12 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -3055,9 +3055,60 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => {
                           )}
                         </div>
                       ) : (
-                        <div className={`p-3 rounded border min-h-[100px] flex items-center justify-center text-sm ${isDark ? 'bg-gray-900 border-gray-700 text-gray-500' : 'bg-gray-50 border-gray-200 text-gray-400'}`}>
-                          No final verdict
-                        </div>
+                        (() => {
+                          const rounds = selectedNode.data.debateData!.rounds;
+                          const lastRound = rounds.length > 0 ? rounds[rounds.length - 1] : null;
+                          if (!lastRound || lastRound.responses.length === 0) {
+                            return (
+                              <div className={`p-3 rounded border min-h-[100px] flex items-center justify-center text-sm ${isDark ? 'bg-gray-900 border-gray-700 text-gray-500' : 'bg-gray-50 border-gray-200 text-gray-400'}`}>
+                                No final verdict
+                              </div>
+                            );
+                          }
+                          const currentResponse = selectedNode.data.response || '';
+                          return (
+                            <div className="space-y-2">
+                              <div className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+                                No judge verdict — select a response to use:
+                              </div>
+                              {lastRound.responses.map((resp, ri) => {
+                                const isSelected = currentResponse === resp.response;
+                                return (
+                                  <div key={ri} className={`rounded border p-2 ${
+                                    isSelected
+                                      ? isDark ? 'border-cyan-600 bg-cyan-900/20' : 'border-cyan-400 bg-cyan-50'
+                                      : isDark ? 'border-gray-700' : 'border-gray-200'
+                                  }`}>
+                                    <div className="flex items-center justify-between mb-1">
+                                      <span className={`text-xs font-semibold ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`}>{resp.model}</span>
+                                      <button
+                                        onClick={() => {
+                                          updateNodeData(selectedNode.id, { response: resp.response });
+                                        }}
+                                        className={`px-2 py-0.5 text-[10px] rounded transition-colors ${
+                                          isSelected
+                                            ? isDark ? 'bg-cyan-700 text-white' : 'bg-cyan-500 text-white'
+                                            : isDark ? 'bg-gray-700 text-gray-300 hover:bg-gray-600' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
+                                        }`}
+                                      >
+                                        {isSelected ? 'Selected' : 'Use this'}
+                                      </button>
+                                    </div>
+                                    <div className={`text-xs prose prose-sm max-w-none ${isDark ? 'prose-invert text-gray-300' : 'text-gray-700'}`}>
+                                      {rawTextMode ? (
+                                        <pre className="whitespace-pre-wrap break-words">{resp.response.slice(0, 300)}{resp.response.length > 300 ? '...' : ''}</pre>
+                                      ) : (
+                                        <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
+                                          {preprocessLaTeX(resp.response.slice(0, 300) + (resp.response.length > 300 ? '...' : ''))}
+                                        </ReactMarkdown>
+                                      )}
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          );
+                        })()
                       )}
                     </div>
                   )}