From 3b12078e04315ac94ff616387dbd4f97d450912c Mon Sep 17 00:00:00 2001
From: Matt <matt@Matt-Surface.local>
Date: Mon, 27 Apr 2026 13:31:29 +0200
Subject: [PATCH] feat: mount score explainer dialog in admin and observer
 surfaces

Adds the 'How scores are calculated' affordance to:
- the admin ranking dashboard side panel (next to the Avg Score card)
- the observer full project detail page (in the score card)
- the observer reports preview dialog (next to Evaluation Summary)

so all three audiences can open the same explainer dialog.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/admin/round/ranking-dashboard.tsx           | 4 ++++
 src/components/observer/observer-project-detail.tsx        | 4 ++++
 src/components/observer/reports/project-preview-dialog.tsx | 6 +++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/admin/round/ranking-dashboard.tsx b/src/components/admin/round/ranking-dashboard.tsx
index 3f63ec9..8e03d12 100644
--- a/src/components/admin/round/ranking-dashboard.tsx
+++ b/src/components/admin/round/ranking-dashboard.tsx
@@ -38,6 +38,7 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Slider } from '@/components/ui/slider'
 import { Switch } from '@/components/ui/switch'
+import { ScoreExplainerDialog } from '@/components/shared/score-explainer-dialog'
 import {
   Collapsible,
   CollapsibleContent,
@@ -1075,6 +1076,9 @@ export function RankingDashboard({ competitionId: _competitionId, roundId }: Ran
                           {useBalanced && <span className="ml-1 text-[10px] text-muted-foreground">← used for ranking</span>}
                         </div>
                       </div>
+                      <div className="mt-2 flex justify-end">
+                        <ScoreExplainerDialog />
+                      </div>
                     </div>
                     <div className="grid grid-cols-2 gap-3">
                       <div className="rounded-lg border p-3 text-center">
diff --git a/src/components/observer/observer-project-detail.tsx b/src/components/observer/observer-project-detail.tsx
index d50e127..b2d9732 100644
--- a/src/components/observer/observer-project-detail.tsx
+++ b/src/components/observer/observer-project-detail.tsx
@@ -44,6 +44,7 @@ import {
   ArrowLeft,
 } from 'lucide-react'
 import { cn, formatDate, formatDateOnly } from '@/lib/utils'
+import { ScoreExplainerDialog } from '@/components/shared/score-explainer-dialog'
 
 export function ObserverProjectDetail({
   projectId,
@@ -263,6 +264,9 @@ export function ObserverProjectDetail({
                     </select>
                   </div>
                 )}
+                <div className="mt-2 w-full">
+                  <ScoreExplainerDialog />
+                </div>
               </div>
             </CardContent>
           </Card>
diff --git a/src/components/observer/reports/project-preview-dialog.tsx b/src/components/observer/reports/project-preview-dialog.tsx
index 88b4240..2861a46 100644
--- a/src/components/observer/reports/project-preview-dialog.tsx
+++ b/src/components/observer/reports/project-preview-dialog.tsx
@@ -18,6 +18,7 @@ import { ExternalLink, MapPin, Waves, Users } from 'lucide-react'
 import Link from 'next/link'
 import type { Route } from 'next'
 import { scoreGradient } from '@/components/charts/chart-theme'
+import { ScoreExplainerDialog } from '@/components/shared/score-explainer-dialog'
 
 interface ProjectPreviewDialogProps {
   projectId: string | null
@@ -108,7 +109,10 @@ export function ProjectPreviewDialog({ projectId, roundId, open, onOpenChange }:
               {/* Evaluation summary */}
               {data.stats && (
                 <div>
-                  <h3 className="text-sm font-semibold mb-2">Evaluation Summary</h3>
+                  <div className="mb-2 flex items-center justify-between">
+                    <h3 className="text-sm font-semibold">Evaluation Summary</h3>
+                    <ScoreExplainerDialog />
+                  </div>
                   <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                     <div className="rounded-md border p-3 text-center">
                       <p className="text-lg font-bold tabular-nums">