Fix observer reports: charts, filtering, project preview, dashboard stats

- Rewrite diversity metrics: horizontal bar charts for ocean issues and
  geographic distribution (replaces unreadable vertical/donut charts)
- Rewrite juror score heatmap: expandable table with score distribution
- Rewrite juror consistency: horizontal bar visual with juror names
- Merge filtering tabs into single screening view with per-project
  AI reasoning and expandable rows
- Add project preview dialog for juror performance table
- Fix status breakdown for evaluation rounds (Fully/Partially/Not Reviewed)
- Show active round name instead of count on observer dashboard
- Move Global tab to last position, default to first round-specific tab
- Add 4-card stats layout for evaluation with reviews/project ratio
- Fix oceanIssue field (singular) and remove non-existent aiSummary

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

src/components/charts/chart-theme.ts

@@ -52,6 +52,10 @@ export const TREMOR_STATUS_COLORS: Record<string, string> = {
   IN_PROGRESS: 'blue',
   PASSED: 'emerald',
   COMPLETED: 'indigo',
+  // Evaluation review states
+  FULLY_REVIEWED: 'emerald',
+  PARTIALLY_REVIEWED: 'amber',
+  NOT_REVIEWED: 'rose',
 }
 
 // Project status colors — mapped to actual ProjectStatus enum values
@@ -64,12 +68,16 @@ export const STATUS_COLORS: Record<string, string> = {
   REJECTED: '#de0f1e',     // Red
   DRAFT: '#9ca3af',        // Gray
   WITHDRAWN: '#6b7280',    // Dark Gray
+  // Evaluation review states
+  FULLY_REVIEWED: '#2d8659',   // Sea Green
+  PARTIALLY_REVIEWED: '#d97706', // Amber
+  NOT_REVIEWED: '#de0f1e',       // Red
 }
 
 // Human-readable status labels
 export const STATUS_LABELS: Record<string, string> = {
   SUBMITTED: 'Submitted',
-  ELIGIBLE: 'Eligible',
+  ELIGIBLE: 'In-Competition',
   ASSIGNED: 'Special Award',
   SEMIFINALIST: 'Semi-finalist',
   FINALIST: 'Finalist',
@@ -81,6 +89,10 @@ export const STATUS_LABELS: Record<string, string> = {
   IN_PROGRESS: 'In Progress',
   PASSED: 'Passed',
   COMPLETED: 'Completed',
+  // Evaluation review states
+  FULLY_REVIEWED: 'Fully Reviewed',
+  PARTIALLY_REVIEWED: 'Partially Reviewed',
+  NOT_REVIEWED: 'Not Reviewed',
 }
 
 /**

src/components/charts/diversity-metrics.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import { DonutChart, BarChart } from '@tremor/react'
+import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { TREMOR_CHART_COLORS } from './chart-theme'
 
 interface DiversityData {
   total: number
@@ -48,76 +47,69 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
     )
   }
 
-  // Top countries for donut chart (max 10, others grouped)
-  const topCountries = (data.byCountry || []).slice(0, 10)
-  const otherCountries = (data.byCountry || []).slice(10)
-  const countryData = otherCountries.length > 0
-    ? [...topCountries, {
-        country: 'Others',
-        count: otherCountries.reduce((sum, c) => sum + c.count, 0),
-        percentage: otherCountries.reduce((sum, c) => sum + c.percentage, 0),
-      }]
-    : topCountries
-
-  const donutData = countryData.map((c) => ({
-    name: getCountryName(c.country),
-    value: c.count,
+  // Top countries — horizontal bar chart for readability
+  const countryBarData = (data.byCountry || []).slice(0, 15).map((c) => ({
+    country: getCountryName(c.country),
+    Projects: c.count,
   }))
 
   const categoryData = (data.byCategory || []).slice(0, 10).map((c) => ({
     category: formatLabel(c.category),
-    Count: c.count,
+    Projects: c.count,
   }))
 
   const oceanIssueData = (data.byOceanIssue || []).slice(0, 15).map((o) => ({
     issue: formatLabel(o.issue),
-    Count: o.count,
+    Projects: o.count,
   }))
 
   return (
     <div className="space-y-6">
-      {/* Summary */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {/* Summary stats row */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
         <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">{data.total}</div>
-            <p className="text-sm text-muted-foreground">Total Projects</p>
+          <CardContent className="p-4">
+            <p className="text-2xl font-bold tabular-nums">{data.total}</p>
+            <p className="text-xs text-muted-foreground">Total Projects</p>
           </CardContent>
         </Card>
         <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">{(data.byCountry || []).length}</div>
-            <p className="text-sm text-muted-foreground">Countries Represented</p>
+          <CardContent className="p-4">
+            <p className="text-2xl font-bold tabular-nums">{(data.byCountry || []).length}</p>
+            <p className="text-xs text-muted-foreground">Countries</p>
           </CardContent>
         </Card>
         <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">{(data.byCategory || []).length}</div>
-            <p className="text-sm text-muted-foreground">Categories</p>
+          <CardContent className="p-4">
+            <p className="text-2xl font-bold tabular-nums">{(data.byCategory || []).length}</p>
+            <p className="text-xs text-muted-foreground">Categories</p>
           </CardContent>
         </Card>
         <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">{(data.byTag || []).length}</div>
-            <p className="text-sm text-muted-foreground">Unique Tags</p>
+          <CardContent className="p-4">
+            <p className="text-2xl font-bold tabular-nums">{(data.byOceanIssue || []).length}</p>
+            <p className="text-xs text-muted-foreground">Ocean Issues</p>
           </CardContent>
         </Card>
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2">
-        {/* Country Distribution */}
+        {/* Country Distribution — horizontal bars */}
         <Card>
-          <CardHeader>
-            <CardTitle>Geographic Distribution</CardTitle>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Geographic Distribution</CardTitle>
           </CardHeader>
           <CardContent>
-            {donutData.length > 0 ? (
-              <DonutChart
-                data={donutData}
-                category="value"
-                index="name"
-                colors={[...TREMOR_CHART_COLORS]}
-                className="h-[400px]"
+            {countryBarData.length > 0 ? (
+              <BarChart
+                data={countryBarData}
+                index="country"
+                categories={['Projects']}
+                colors={['cyan']}
+                showLegend={false}
+                layout="horizontal"
+                yAxisWidth={120}
+                className="h-[360px]"
               />
             ) : (
               <p className="text-muted-foreground text-center py-8">No geographic data</p>
@@ -125,23 +117,47 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
           </CardContent>
         </Card>
 
-        {/* Category Distribution */}
+        {/* Competition Categories — horizontal bars */}
         <Card>
-          <CardHeader>
-            <CardTitle>Competition Categories</CardTitle>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Competition Categories</CardTitle>
           </CardHeader>
           <CardContent>
             {categoryData.length > 0 ? (
-              <BarChart
-                data={categoryData}
-                index="category"
-                categories={['Count']}
-                colors={['indigo']}
-                layout="horizontal"
-                yAxisWidth={120}
-                showLegend={false}
-                className="h-[400px]"
-              />
+              categoryData.length <= 4 ? (
+                /* Clean stacked bars for few categories */
+                <div className="space-y-4 pt-2">
+                  {categoryData.map((c) => {
+                    const maxCount = Math.max(...categoryData.map((d) => d.Projects))
+                    const pct = maxCount > 0 ? (c.Projects / maxCount) * 100 : 0
+                    return (
+                      <div key={c.category} className="space-y-1.5">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="font-medium">{c.category}</span>
+                          <span className="tabular-nums text-muted-foreground">{c.Projects}</span>
+                        </div>
+                        <div className="h-3 w-full rounded-full bg-muted overflow-hidden">
+                          <div
+                            className="h-full rounded-full bg-[#053d57] transition-all duration-500"
+                            style={{ width: `${pct}%` }}
+                          />
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              ) : (
+                <BarChart
+                  data={categoryData}
+                  index="category"
+                  categories={['Projects']}
+                  colors={['indigo']}
+                  layout="horizontal"
+                  yAxisWidth={140}
+                  showLegend={false}
+                  className="h-[280px]"
+                />
+              )
             ) : (
               <p className="text-muted-foreground text-center py-8">No category data</p>
             )}
@@ -149,45 +165,43 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
         </Card>
       </div>
 
-      {/* Ocean Issues */}
+      {/* Ocean Issues — horizontal bars for readability */}
       {oceanIssueData.length > 0 && (
         <Card>
-          <CardHeader>
-            <CardTitle>Ocean Issues Addressed</CardTitle>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Ocean Issues Addressed</CardTitle>
           </CardHeader>
           <CardContent>
             <BarChart
               data={oceanIssueData}
               index="issue"
-              categories={['Count']}
+              categories={['Projects']}
               colors={['blue']}
               showLegend={false}
-              yAxisWidth={40}
+              layout="horizontal"
+              yAxisWidth={200}
               className="h-[400px]"
-              rotateLabelX={{ angle: -35, xAxisHeight: 80 }}
             />
           </CardContent>
         </Card>
       )}
 
-      {/* Tags Cloud */}
+      {/* Tags — clean pill cloud */}
       {(data.byTag || []).length > 0 && (
         <Card>
-          <CardHeader>
-            <CardTitle>Project Tags</CardTitle>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Project Tags</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="flex flex-wrap gap-2">
               {(data.byTag || []).slice(0, 30).map((tag) => (
                 <Badge
                   key={tag.tag}
-                  variant="secondary"
-                  className="text-sm"
-                  style={{
-                    fontSize: `${Math.max(0.75, Math.min(1.4, 0.75 + tag.percentage / 20))}rem`,
-                  }}
+                  variant="outline"
+                  className="px-3 py-1 text-sm font-normal"
                 >
-                  {tag.tag} ({tag.count})
+                  {tag.tag}
+                  <span className="ml-1.5 text-muted-foreground tabular-nums">({tag.count})</span>
                 </Badge>
               ))}
             </div>

src/components/charts/juror-consistency.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { ScatterChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -12,6 +11,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { AlertTriangle } from 'lucide-react'
+import { scoreGradient } from './chart-theme'
 
 interface JurorMetric {
   userId: string
@@ -30,6 +30,24 @@ interface JurorConsistencyProps {
   }
 }
 
+function ScoreDot({ score, maxScore = 10 }: { score: number; maxScore?: number }) {
+  const pct = ((score / maxScore) * 100).toFixed(1)
+  return (
+    <div className="flex items-center gap-2 w-full min-w-[120px]">
+      <div className="flex-1 h-2.5 rounded-full bg-muted overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-300"
+          style={{
+            width: `${pct}%`,
+            backgroundColor: scoreGradient(score),
+          }}
+        />
+      </div>
+      <span className="text-xs tabular-nums font-medium w-8 text-right">{score.toFixed(1)}</span>
+    </div>
+  )
+}
+
 export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
   if (!data?.jurors?.length) {
     return (
@@ -42,27 +60,19 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
   }
 
   const outlierCount = data.jurors.filter((j) => j.isOutlier).length
-
-  const scatterData = data.jurors.map((j) => ({
-    'Average Score': parseFloat(j.averageScore.toFixed(2)),
-    'Std Deviation': parseFloat(j.stddev.toFixed(2)),
-    category: j.isOutlier ? 'Outlier' : 'Normal',
-    name: j.name,
-    evaluations: j.evaluationCount,
-    size: Math.max(8, Math.min(20, j.evaluationCount * 2)),
-  }))
+  const sorted = [...data.jurors].sort((a, b) => b.averageScore - a.averageScore)
 
   return (
     <div className="space-y-6">
-      {/* Scatter: Average Score vs Standard Deviation */}
+      {/* Juror Scoring Patterns — bar-based visual instead of scatter */}
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            <span>Juror Scoring Patterns</span>
-            <span className="text-sm font-normal text-muted-foreground">
+          <CardTitle className="flex items-center justify-between flex-wrap gap-2">
+            <span className="text-base">Juror Scoring Patterns</span>
+            <span className="text-sm font-normal text-muted-foreground flex items-center gap-2">
               Overall Avg: {data.overallAverage.toFixed(2)}
               {outlierCount > 0 && (
-                <Badge variant="destructive" className="ml-2">
+                <Badge variant="destructive">
                   {outlierCount} outlier{outlierCount > 1 ? 's' : ''}
                 </Badge>
               )}
@@ -70,18 +80,31 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <ScatterChart
-            data={scatterData}
-            x="Average Score"
-            y="Std Deviation"
-            category="category"
-            size="size"
-            colors={['blue', 'rose']}
-            className="h-[400px]"
-          />
-          <p className="text-xs text-muted-foreground mt-2 text-center">
-            Dot size represents number of evaluations. Red dots indicate outlier
-            jurors (2+ points from mean).
+          <div className="space-y-2">
+            {sorted.map((juror) => (
+              <div
+                key={juror.userId}
+                className={`flex items-center gap-3 rounded-md px-3 py-2 ${juror.isOutlier ? 'bg-destructive/5 border border-destructive/20' : 'hover:bg-muted/50'}`}
+              >
+                <div className="w-36 shrink-0 truncate">
+                  <span className="text-sm font-medium">{juror.name}</span>
+                </div>
+                <div className="flex-1">
+                  <ScoreDot score={juror.averageScore} />
+                </div>
+                <div className="hidden sm:flex items-center gap-3 text-xs text-muted-foreground shrink-0">
+                  <span className="tabular-nums">&sigma; {juror.stddev.toFixed(1)}</span>
+                  <span className="tabular-nums">{juror.evaluationCount} eval{juror.evaluationCount !== 1 ? 's' : ''}</span>
+                </div>
+                {juror.isOutlier && (
+                  <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
+                )}
+              </div>
+            ))}
+          </div>
+          {/* Overall average line */}
+          <p className="text-xs text-muted-foreground mt-4 text-center">
+            Bars show average score per juror. &sigma; = standard deviation. Outliers deviate 2+ points from the overall mean.
           </p>
         </CardContent>
       </Card>
@@ -89,57 +112,92 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
       {/* Juror details table */}
       <Card>
         <CardHeader>
-          <CardTitle>Juror Consistency Details</CardTitle>
+          <CardTitle className="text-base">Juror Consistency Details</CardTitle>
         </CardHeader>
         <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Juror</TableHead>
-                <TableHead className="text-right">Evaluations</TableHead>
-                <TableHead className="text-right">Avg Score</TableHead>
-                <TableHead className="text-right">Std Dev</TableHead>
-                <TableHead className="text-right">
-                  Deviation from Mean
-                </TableHead>
-                <TableHead className="text-center">Status</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data.jurors.map((juror) => (
-                <TableRow
-                  key={juror.userId}
-                  className={juror.isOutlier ? 'bg-destructive/5' : ''}
-                >
-                  <TableCell>
-                    <p className="font-medium">{juror.name}</p>
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums">
-                    {juror.evaluationCount}
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums">
-                    {juror.averageScore.toFixed(2)}
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums">
-                    {juror.stddev.toFixed(2)}
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums">
-                    {juror.deviationFromOverall.toFixed(2)}
-                  </TableCell>
-                  <TableCell className="text-center">
-                    {juror.isOutlier ? (
-                      <Badge variant="destructive" className="gap-1">
-                        <AlertTriangle className="h-3 w-3" />
-                        Outlier
-                      </Badge>
-                    ) : (
-                      <Badge variant="secondary">Normal</Badge>
-                    )}
-                  </TableCell>
+          {/* Desktop table */}
+          <div className="hidden md:block">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Juror</TableHead>
+                  <TableHead className="text-right">Evaluations</TableHead>
+                  <TableHead className="text-right">Avg Score</TableHead>
+                  <TableHead className="text-right">Std Dev</TableHead>
+                  <TableHead className="text-right">Deviation</TableHead>
+                  <TableHead className="text-center">Status</TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+              </TableHeader>
+              <TableBody>
+                {sorted.map((juror) => (
+                  <TableRow
+                    key={juror.userId}
+                    className={juror.isOutlier ? 'bg-destructive/5' : ''}
+                  >
+                    <TableCell className="font-medium">{juror.name}</TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {juror.evaluationCount}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {juror.averageScore.toFixed(2)}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {juror.stddev.toFixed(2)}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {juror.deviationFromOverall >= 0 ? '+' : ''}{juror.deviationFromOverall.toFixed(2)}
+                    </TableCell>
+                    <TableCell className="text-center">
+                      {juror.isOutlier ? (
+                        <Badge variant="destructive" className="gap-1">
+                          <AlertTriangle className="h-3 w-3" />
+                          Outlier
+                        </Badge>
+                      ) : (
+                        <Badge variant="secondary">Normal</Badge>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* Mobile card stack */}
+          <div className="space-y-2 md:hidden">
+            {sorted.map((juror) => (
+              <div
+                key={juror.userId}
+                className={`rounded-md border p-3 space-y-1 ${juror.isOutlier ? 'bg-destructive/5 border-destructive/20' : ''}`}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">{juror.name}</span>
+                  {juror.isOutlier ? (
+                    <Badge variant="destructive" className="gap-1 text-[10px]">
+                      <AlertTriangle className="h-3 w-3" />
+                      Outlier
+                    </Badge>
+                  ) : (
+                    <Badge variant="secondary" className="text-[10px]">Normal</Badge>
+                  )}
+                </div>
+                <div className="grid grid-cols-3 gap-2 text-xs">
+                  <div>
+                    <p className="text-muted-foreground">Avg Score</p>
+                    <p className="font-medium tabular-nums">{juror.averageScore.toFixed(2)}</p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground">Std Dev</p>
+                    <p className="font-medium tabular-nums">{juror.stddev.toFixed(2)}</p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground">Evals</p>
+                    <p className="font-medium tabular-nums">{juror.evaluationCount}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
         </CardContent>
       </Card>
     </div>

src/components/charts/juror-score-heatmap.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { Fragment } from 'react'
+import { Fragment, useState } from 'react'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import { scoreGradient } from './chart-theme'
 
 interface JurorScoreHeatmapProps {
@@ -22,6 +23,121 @@ function getTextColor(score: number | null): string {
   return score >= 6 ? '#ffffff' : '#1a1a1a'
 }
 
+function ScoreBadge({ score }: { score: number }) {
+  return (
+    <span
+      className="inline-flex items-center justify-center rounded-md px-2 py-0.5 text-xs font-semibold tabular-nums min-w-[36px]"
+      style={{
+        backgroundColor: getScoreColor(score),
+        color: getTextColor(score),
+      }}
+    >
+      {score.toFixed(1)}
+    </span>
+  )
+}
+
+function JurorSummaryRow({
+  juror,
+  scores,
+  averageScore,
+  projectCount,
+  isExpanded,
+  onToggle,
+  projects,
+}: {
+  juror: { id: string; name: string }
+  scores: { projectId: string; score: number | null }[]
+  averageScore: number | null
+  projectCount: number
+  isExpanded: boolean
+  onToggle: () => void
+  projects: { id: string; title: string }[]
+}) {
+  const scored = scores.filter((s) => s.score !== null)
+  const unscored = projectCount - scored.length
+
+  return (
+    <>
+      <tr
+        className="border-b cursor-pointer transition-colors hover:bg-muted/50"
+        onClick={onToggle}
+      >
+        <td className="py-3 px-4 font-medium text-sm whitespace-nowrap">
+          <div className="flex items-center gap-2">
+            <span className={`inline-flex h-5 w-5 items-center justify-center rounded text-[10px] font-bold transition-transform ${isExpanded ? 'rotate-90' : ''}`}>
+              ›
+            </span>
+            {juror.name}
+          </div>
+        </td>
+        <td className="py-3 px-4 text-center tabular-nums text-sm">
+          {scored.length}
+          <span className="text-muted-foreground">/{projectCount}</span>
+        </td>
+        <td className="py-3 px-4 text-center">
+          {averageScore !== null ? (
+            <ScoreBadge score={averageScore} />
+          ) : (
+            <span className="text-xs text-muted-foreground">—</span>
+          )}
+        </td>
+        <td className="py-3 px-4">
+          {/* Mini score bar */}
+          <div className="flex items-center gap-0.5">
+            {scored
+              .sort((a, b) => (a.score ?? 0) - (b.score ?? 0))
+              .map((s, i) => (
+                <div
+                  key={i}
+                  className="h-4 w-1.5 rounded-full"
+                  style={{ backgroundColor: getScoreColor(s.score) }}
+                  title={`${s.score?.toFixed(1)}`}
+                />
+              ))}
+            {unscored > 0 &&
+              Array.from({ length: Math.min(unscored, 10) }).map((_, i) => (
+                <div
+                  key={`empty-${i}`}
+                  className="h-4 w-1.5 rounded-full bg-muted"
+                />
+              ))}
+          </div>
+        </td>
+      </tr>
+      {isExpanded && (
+        <tr className="border-b bg-muted/30">
+          <td colSpan={4} className="p-4">
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
+              {projects.map((p) => {
+                const cell = scores.find((s) => s.projectId === p.id)
+                const score = cell?.score ?? null
+                return (
+                  <div
+                    key={p.id}
+                    className="flex items-center gap-2 rounded-md border bg-background px-2.5 py-1.5"
+                  >
+                    {score !== null ? (
+                      <ScoreBadge score={score} />
+                    ) : (
+                      <span className="inline-flex items-center justify-center rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground min-w-[36px]">
+                        —
+                      </span>
+                    )}
+                    <span className="text-xs truncate" title={p.title}>
+                      {p.title}
+                    </span>
+                  </div>
+                )
+              })}
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  )
+}
+
 export function JurorScoreHeatmap({
   jurors,
   projects,
@@ -29,6 +145,8 @@ export function JurorScoreHeatmap({
   truncated,
   totalProjects,
 }: JurorScoreHeatmapProps) {
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+
   const cellMap = new Map<string, number | null>()
   for (const c of cells) {
     cellMap.set(`${c.jurorId}:${c.projectId}`, c.score)
@@ -44,71 +162,77 @@ export function JurorScoreHeatmap({
     )
   }
 
+  // Compute per-juror data
+  const jurorData = jurors.map((j) => {
+    const scores = projects.map((p) => ({
+      projectId: p.id,
+      score: cellMap.get(`${j.id}:${p.id}`) ?? null,
+    }))
+    const scored = scores.filter((s) => s.score !== null)
+    const avg = scored.length > 0
+      ? scored.reduce((sum, s) => sum + (s.score ?? 0), 0) / scored.length
+      : null
+    return { juror: j, scores, averageScore: avg ? parseFloat(avg.toFixed(1)) : null, scoredCount: scored.length }
+  })
+
+  // Sort: jurors with most evaluations first
+  jurorData.sort((a, b) => b.scoredCount - a.scoredCount)
+
+  // Color legend
+  const legendScores = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Score Heatmap</CardTitle>
-        <CardDescription>
-          {jurors.length} jurors × {projects.length} projects
-          {truncated && totalProjects ? ` (showing top 30 of ${totalProjects})` : ''}
-        </CardDescription>
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <CardTitle className="text-base">Score Heatmap</CardTitle>
+            <CardDescription>
+              {jurors.length} juror{jurors.length !== 1 ? 's' : ''} &middot; {projects.length} project{projects.length !== 1 ? 's' : ''}
+              {truncated && totalProjects ? ` (top ${projects.length} of ${totalProjects})` : ''}
+            </CardDescription>
+          </div>
+          {/* Color legend */}
+          <div className="hidden sm:flex items-center gap-1 shrink-0">
+            <span className="text-[10px] text-muted-foreground mr-1">Low</span>
+            {legendScores.map((s) => (
+              <div
+                key={s}
+                className="h-4 w-4 rounded-sm"
+                style={{ backgroundColor: getScoreColor(s) }}
+                title={s.toString()}
+              />
+            ))}
+            <span className="text-[10px] text-muted-foreground ml-1">High</span>
+          </div>
+        </div>
       </CardHeader>
       <CardContent>
-        {/* Mobile fallback */}
-        <div className="md:hidden text-center py-8">
-          <p className="text-sm text-muted-foreground">
-            View on a larger screen for the score heatmap
-          </p>
-        </div>
-
-        {/* Desktop heatmap */}
-        <div className="hidden md:block overflow-auto max-h-[600px]">
-          <div
-            className="grid gap-px"
-            style={{
-              gridTemplateColumns: `180px repeat(${projects.length}, minmax(60px, 1fr))`,
-            }}
-          >
-            {/* Header row */}
-            <div className="sticky left-0 z-10 bg-background" />
-            {projects.map((p) => (
-              <div
-                key={p.id}
-                className="text-xs font-medium text-muted-foreground truncate px-1 pb-2 text-center"
-                title={p.title}
-              >
-                {p.title.length > 12 ? p.title.slice(0, 10) + '…' : p.title}
-              </div>
-            ))}
-
-            {/* Data rows */}
-            {jurors.map((j) => (
-              <Fragment key={j.id}>
-                <div
-                  className="sticky left-0 z-10 bg-background text-sm font-medium truncate pr-3 flex items-center"
-                  title={j.name}
-                >
-                  {j.name}
-                </div>
-                {projects.map((p) => {
-                  const score = cellMap.get(`${j.id}:${p.id}`) ?? null
-                  return (
-                    <div
-                      key={`${j.id}-${p.id}`}
-                      className="flex items-center justify-center rounded-sm text-xs font-medium tabular-nums h-8"
-                      style={{
-                        backgroundColor: getScoreColor(score),
-                        color: getTextColor(score),
-                      }}
-                      title={`${j.name} → ${p.title}: ${score !== null ? score.toFixed(1) : 'N/A'}`}
-                    >
-                      {score !== null ? score.toFixed(1) : '—'}
-                    </div>
-                  )
-                })}
-              </Fragment>
-            ))}
-          </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b text-xs text-muted-foreground">
+                <th className="text-left py-2 px-4 font-medium">Juror</th>
+                <th className="text-center py-2 px-4 font-medium whitespace-nowrap">Reviewed</th>
+                <th className="text-center py-2 px-4 font-medium">Avg</th>
+                <th className="text-left py-2 px-4 font-medium">Score Distribution</th>
+              </tr>
+            </thead>
+            <tbody>
+              {jurorData.map(({ juror, scores, averageScore }) => (
+                <JurorSummaryRow
+                  key={juror.id}
+                  juror={juror}
+                  scores={scores}
+                  averageScore={averageScore}
+                  projectCount={projects.length}
+                  isExpanded={expandedId === juror.id}
+                  onToggle={() => setExpandedId(expandedId === juror.id ? null : juror.id)}
+                  projects={projects}
+                />
+              ))}
+            </tbody>
+          </table>
         </div>
       </CardContent>
     </Card>