feat: add Raw Prompt dropdown to arena transcript view

Each turn bubble now has a collapsible "Raw Prompt" section showing
the reconstructed messages array (system + prior user/assistant turns)
that would have been sent to the API at that point in the conversation.

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

frontend/src/arena/components/TranscriptPanel.tsx

@@ -102,7 +102,14 @@ export default function TranscriptPanel({ datasetName, repoName, data, dragHandl
           <SystemPromptBubble text={data.system_prompt} />
         )}
         {data.transcript.map((turn, i) => (
-          <TurnBubble key={i} turn={turn} hasMultiplePlayers={data.opponent_model !== null} />
+          <TurnBubble
+            key={i}
+            turn={turn}
+            turnIndex={i}
+            allTurns={data.transcript}
+            systemPrompt={data.system_prompt}
+            hasMultiplePlayers={data.opponent_model !== null}
+          />
         ))}
       </div>
     </div>
@@ -134,8 +141,34 @@ function SystemPromptBubble({ text }: { text: string }) {
 }
 
 
-function TurnBubble({ turn, hasMultiplePlayers }: { turn: TranscriptTurn; hasMultiplePlayers: boolean }) {
+interface TurnBubbleProps {
+  turn: TranscriptTurn;
+  turnIndex: number;
+  allTurns: TranscriptTurn[];
+  systemPrompt: string | null;
+  hasMultiplePlayers: boolean;
+}
+
+function buildRawPrompt(
+  turnIndex: number,
+  allTurns: TranscriptTurn[],
+  systemPrompt: string | null,
+): object[] {
+  const messages: object[] = [];
+  if (systemPrompt) {
+    messages.push({ role: "system", content: systemPrompt });
+  }
+  for (let i = 0; i < turnIndex; i++) {
+    messages.push({ role: "user", content: allTurns[i].observation });
+    messages.push({ role: "assistant", content: allTurns[i].action });
+  }
+  messages.push({ role: "user", content: allTurns[turnIndex].observation });
+  return messages;
+}
+
+function TurnBubble({ turn, turnIndex, allTurns, systemPrompt, hasMultiplePlayers }: TurnBubbleProps) {
   const [thinkExpanded, setThinkExpanded] = useState(false);
+  const [rawPromptExpanded, setRawPromptExpanded] = useState(false);
   const playerColor = getPlayerColor(turn.player_id);
   const thinkSegments = highlightTrace(turn.think_text);
 
@@ -193,6 +226,22 @@ function TurnBubble({ turn, hasMultiplePlayers }: { turn: TranscriptTurn; hasMul
           </div>
         </div>
       </div>
+
+      {/* Raw Prompt — collapsible, shows full messages sent to API */}
+      <div className="mt-1">
+        <button
+          onClick={() => setRawPromptExpanded(!rawPromptExpanded)}
+          className="flex items-center gap-1 text-[10px] text-gray-600 hover:text-gray-400 transition-colors"
+        >
+          <span>{rawPromptExpanded ? "\u25BC" : "\u25B6"}</span>
+          <span>Raw Prompt ({turnIndex * 2 + 1 + (systemPrompt ? 1 : 0)} messages)</span>
+        </button>
+        {rawPromptExpanded && (
+          <pre className="mt-1 text-[10px] leading-relaxed whitespace-pre-wrap font-mono bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-gray-400 max-h-80 overflow-y-auto">
+            {JSON.stringify(buildRawPrompt(turnIndex, allTurns, systemPrompt), null, 2)}
+          </pre>
+        )}
+      </div>
     </div>
   );
 }