feat(playground): add judging indicator via SSE progress event

Backend sends a 'judging' SSE event after streaming completes and before
running the LLM judge. Frontend detects this and shows an "Evaluating
output quality..." spinner with Loader2 icon below the response. The
indicator disappears when scores arrive in the done event.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

Author: pinkroosterai

src/backend/Clarive.Api/Endpoints/PlaygroundEndpoints.cs

@@ -104,6 +104,7 @@ await sse.WriteErrorAsync(
             else
             {
                 var testResult = result.Value;
+                await sse.WriteChunkAsync(new TestStreamChunk(-1, "", "judging"), ct);
                 var judgeResult = await playground.JudgePlaygroundRunAsync(
                     tenantId, userId, entryId, testResult.RunId, ct);
                 var finalResult = testResult with

src/frontend/src/components/playground/PlaygroundResultsArea.tsx

@@ -103,6 +103,7 @@ interface PlaygroundResultsAreaProps {
   // Judge
   pinnedJudgeScores: Evaluation | null;
   currentJudgeScores: Evaluation | null;
+  isJudging: boolean;
 }
 
 export default function PlaygroundResultsArea({
@@ -134,6 +135,7 @@ export default function PlaygroundResultsArea({
   handleCopy,
   pinnedJudgeScores,
   currentJudgeScores,
+  isJudging,
 }: PlaygroundResultsAreaProps) {
   const judgeScores = pinnedJudgeScores ?? currentJudgeScores;
   return (
@@ -501,6 +503,14 @@ export default function PlaygroundResultsArea({
         </div>
       )}
 
+      {/* Judging indicator */}
+      {isJudging && !judgeScores && (
+        <div className="flex items-center gap-2 text-xs text-foreground-muted mt-4 pt-3 border-t border-border-subtle">
+          <Loader2 className="size-3.5 animate-spin text-primary" />
+          <span>Evaluating output quality...</span>
+        </div>
+      )}
+
       {/* Judge output quality (non-comparison mode) */}
       {!pinnedRun && !isStreaming && hasResponses && judgeScores && (
         <JudgeScorePanel scores={judgeScores} />

src/frontend/src/hooks/usePlaygroundStreaming.ts

@@ -75,6 +75,7 @@ export function usePlaygroundStreaming({
   } | null>(null);
   const [lastRunId, setLastRunId] = useState<string | null>(null);
   const [lastJudgeScores, setLastJudgeScores] = useState<Evaluation | null>(null);
+  const [isJudging, setIsJudging] = useState(false);
 
   // ── Scroll refs ──
   const responseAreaRef = useRef<HTMLDivElement>(null);
@@ -149,6 +150,7 @@ export function usePlaygroundStreaming({
     setLastTokens(null);
     setLastRunId(null);
     setLastJudgeScores(null);
+    setIsJudging(false);
     setElapsedSeconds(0);
     setApproxOutputTokens(0);
     streamedTextLengthRef.current = 0;
@@ -179,6 +181,10 @@ export function usePlaygroundStreaming({
             firstTokenRef.current = true;
             setFirstTokenReceived(true);
           }
+          if (chunk.type === 'judging') {
+            setIsJudging(true);
+            return;
+          }
           if (!chunk.text) return;
           if (chunk.type === 'reasoning') {
             setStreamedReasoning((prev) => ({
@@ -201,6 +207,7 @@ export function usePlaygroundStreaming({
       }
       setLastRunId(result.runId);
       setLastJudgeScores(result.judgeScores ?? null);
+      setIsJudging(false);
 
       queryClient.invalidateQueries({ queryKey: ['playground', 'runs', entryId] });
     } catch (err) {
@@ -264,6 +271,7 @@ export function usePlaygroundStreaming({
     lastTokens,
     lastRunId,
     lastJudgeScores,
+    isJudging,
     hasResponses,
     currentPromptIndex,
     responseCount,

src/frontend/src/pages/PlaygroundPage.tsx

@@ -102,6 +102,7 @@ const PlaygroundPage = () => {
     approxOutputTokens,
     lastTokens,
     lastJudgeScores,
+    isJudging,
     hasResponses,
     currentPromptIndex,
     responseCount,
@@ -316,6 +317,7 @@ const PlaygroundPage = () => {
           handleCopy={handleCopy}
           pinnedJudgeScores={pinnedRun?.judgeScores ?? null}
           currentJudgeScores={lastJudgeScores}
+          isJudging={isJudging}
         />
 
         {/* ── History sidebar ── */}