Observer platform: mobile fixes, data/UX overhaul, animated nav

- Fix dashboard default round selection to target active round instead of R1
- Move edition selector from dashboard header to hamburger menu via shared context
- Add observer-friendly status labels (Not Reviewed / Under Review / Reviewed)
- Fix pipeline completion: closed rounds show 100%, cap all rates at 100%
- Round badge on projects list shows furthest round reached
- Hide scores/evals for projects with zero evaluations
- Enhance project detail round history with pass/reject indicators from ProjectRoundState
- Remove irrelevant fields (Org Type, Budget, Duration) from project detail
- Clickable juror workload with expandable project assignments
- Humanize activity feed with icons and readable messages
- Fix jurors table: responsive card layout on mobile
- Fix criteria chart: horizontal bars for readable labels on mobile
- Animate hamburger menu open/close with CSS grid transition

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

src/components/charts/criteria-scores.tsx

@@ -25,14 +25,14 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
 
   const chartData = data.map((d) => ({
     criterion:
-      d.name.length > 25 ? d.name.substring(0, 25) + '...' : d.name,
+      d.name.length > 40 ? d.name.substring(0, 40) + '...' : d.name,
     'Avg Score': parseFloat(d.averageScore.toFixed(2)),
   }))
 
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center justify-between">
+        <CardTitle className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
           <span>Score by Evaluation Criteria</span>
           <span className="text-sm font-normal text-muted-foreground">
             Overall Avg: {overallAverage.toFixed(2)}
@@ -46,10 +46,10 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
           categories={['Avg Score']}
           colors={[BRAND_TEAL] as string[]}
           maxValue={10}
-          yAxisWidth={40}
+          layout="vertical"
+          yAxisWidth={160}
           showLegend={false}
           className="h-[300px]"
-          rotateLabelX={{ angle: -45, xAxisHeight: 60 }}
         />
       </CardContent>
     </Card>

src/components/layouts/observer-nav.tsx

@@ -2,11 +2,40 @@
 
 import { BarChart3, Home, FolderKanban } from 'lucide-react'
 import { RoleNav, type NavItem, type RoleNavUser } from '@/components/layouts/role-nav'
+import { useEditionContext } from '@/components/observer/observer-edition-context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 
 interface ObserverNavProps {
   user: RoleNavUser
 }
 
+function EditionSelector() {
+  const { programs, selectedProgramId, setSelectedProgramId } = useEditionContext()
+
+  if (programs.length <= 1) return null
+
+  return (
+    <Select value={selectedProgramId} onValueChange={setSelectedProgramId}>
+      <SelectTrigger className="w-full md:w-[180px]">
+        <SelectValue placeholder="Select edition" />
+      </SelectTrigger>
+      <SelectContent>
+        {programs.map((p) => (
+          <SelectItem key={p.id} value={p.id}>
+            {p.year ? `${p.year} Edition` : p.name ?? p.id}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
 export function ObserverNav({ user }: ObserverNavProps) {
   const navigation: NavItem[] = [
     {
@@ -32,6 +61,7 @@ export function ObserverNav({ user }: ObserverNavProps) {
       roleName="Observer"
       user={user}
       basePath="/observer"
+      editionSelector={<EditionSelector />}
     />
   )
 }

src/components/layouts/role-nav.tsx

@@ -41,13 +41,15 @@ type RoleNavProps = {
   basePath: string
   /** Optional status badge displayed next to the logo (e.g., remaining evaluations count) */
   statusBadge?: React.ReactNode
+  /** Optional slot rendered in the mobile hamburger menu (between nav links and sign out) and desktop header */
+  editionSelector?: React.ReactNode
 }
 
 function isNavItemActive(pathname: string, href: string, basePath: string): boolean {
   return pathname === href || (href !== basePath && pathname.startsWith(href))
 }
 
-export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: RoleNavProps) {
+export function RoleNav({ navigation, roleName, user, basePath, statusBadge, editionSelector }: RoleNavProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
   const { status: sessionStatus } = useSession()
@@ -93,6 +95,7 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: R
 
           {/* User menu & mobile toggle */}
           <div className="flex items-center gap-2">
+            {editionSelector && <div className="hidden md:block">{editionSelector}</div>}
             {mounted && (
               <Button
                 variant="ghost"
@@ -161,42 +164,54 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: R
         </div>
       </div>
 
-      {/* Mobile menu */}
-      {isMobileMenuOpen && (
-        <div className="border-t md:hidden">
-          <nav className="container-app py-4 space-y-1">
-            {navigation.map((item) => {
-              const isActive = isNavItemActive(pathname, item.href, basePath)
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href as Route}
-                  onClick={() => setIsMobileMenuOpen(false)}
-                  className={cn(
-                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                    isActive
-                      ? 'bg-primary/10 text-primary'
-                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-                  )}
+      {/* Mobile menu — animated with CSS grid */}
+      <div
+        className={cn(
+          'grid md:hidden transition-[grid-template-rows] duration-200 ease-out',
+          isMobileMenuOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className={cn('border-t', !isMobileMenuOpen && 'border-transparent')}>
+            <nav className="container-app py-4 space-y-1">
+              {navigation.map((item) => {
+                const isActive = isNavItemActive(pathname, item.href, basePath)
+                return (
+                  <Link
+                    key={item.name}
+                    href={item.href as Route}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={cn(
+                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                      isActive
+                        ? 'bg-primary/10 text-primary'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                    )}
+                  >
+                    <item.icon className="h-4 w-4" />
+                    {item.name}
+                  </Link>
+                )
+              })}
+              {editionSelector && (
+                <div className="border-t pt-4 mt-4 px-3">
+                  {editionSelector}
+                </div>
+              )}
+              <div className="border-t pt-4 mt-4">
+                <Button
+                  variant="ghost"
+                  className="w-full justify-start text-destructive hover:text-destructive"
+                  onClick={() => signOut({ callbackUrl: '/login' })}
                 >
-                  <item.icon className="h-4 w-4" />
-                  {item.name}
-                </Link>
-              )
-            })}
-            <div className="border-t pt-4 mt-4">
-              <Button
-                variant="ghost"
-                className="w-full justify-start text-destructive hover:text-destructive"
-                onClick={() => signOut({ callbackUrl: '/login' })}
-              >
-                <LogOut className="mr-2 h-4 w-4" />
-                Sign Out
-              </Button>
-            </div>
-          </nav>
+                  <LogOut className="mr-2 h-4 w-4" />
+                  Sign Out
+                </Button>
+              </div>
+            </nav>
+          </div>
         </div>
-      )}
+      </div>
     </header>
   )
 }

src/components/observer/observer-dashboard-content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, Fragment } from 'react'
 import Link from 'next/link'
 import type { Route } from 'next'
 import { trpc } from '@/lib/trpc/client'
@@ -14,13 +14,6 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
 import { Skeleton } from '@/components/ui/skeleton'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import {
   Table,
   TableBody,
@@ -32,6 +25,7 @@ import {
 import { StatusBadge } from '@/components/shared/status-badge'
 import { AnimatedCard } from '@/components/shared/animated-container'
 import { GeographicSummaryCard } from '@/components/charts/geographic-summary-card'
+import { useEditionContext } from '@/components/observer/observer-edition-context'
 import {
   ClipboardList,
   BarChart3,
@@ -41,7 +35,13 @@ import {
   Globe,
   ChevronRight,
   Activity,
-  RefreshCw,
+  ChevronDown,
+  ChevronUp,
+  ArrowRight,
+  Lock,
+  Clock,
+  CheckCircle,
+  XCircle,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -76,14 +76,50 @@ function computeAvgScore(scoreDistribution: { label: string; count: number }[]):
   return (weightedSum / total).toFixed(1)
 }
 
-const ACTIVITY_DOT_COLORS: Record<string, string> = {
-  ROUND_ACTIVATED: 'bg-emerald-500',
-  ROUND_CLOSED: 'bg-slate-500',
-  EVALUATION_SUBMITTED: 'bg-blue-500',
-  ASSIGNMENT_CREATED: 'bg-violet-500',
-  PROJECT_ADVANCED: 'bg-teal-500',
-  PROJECT_REJECTED: 'bg-rose-500',
-  RESULT_LOCKED: 'bg-amber-500',
+const ACTIVITY_ICONS: Record<string, { icon: typeof CheckCircle; color: string }> = {
+  ROUND_ACTIVATED: { icon: Clock, color: 'text-emerald-500' },
+  ROUND_CLOSED: { icon: Lock, color: 'text-slate-500' },
+  'round.reopened': { icon: Clock, color: 'text-emerald-500' },
+  'round.closed': { icon: Lock, color: 'text-slate-500' },
+  EVALUATION_SUBMITTED: { icon: CheckCircle, color: 'text-blue-500' },
+  ASSIGNMENT_CREATED: { icon: ArrowRight, color: 'text-violet-500' },
+  PROJECT_ADVANCED: { icon: ArrowRight, color: 'text-teal-500' },
+  PROJECT_REJECTED: { icon: XCircle, color: 'text-rose-500' },
+  RESULT_LOCKED: { icon: Lock, color: 'text-amber-500' },
+}
+
+function humanizeActivity(item: { eventType: string; actorName?: string | null; details?: Record<string, unknown> | null }): string {
+  const actor = item.actorName ?? 'System'
+  const details = item.details ?? {}
+  const projectName = (details.projectTitle ?? details.projectName ?? '') as string
+  const roundName = (details.roundName ?? '') as string
+
+  switch (item.eventType) {
+    case 'EVALUATION_SUBMITTED':
+      return projectName
+        ? `${actor} submitted a review for ${projectName}`
+        : `${actor} submitted a review`
+    case 'ROUND_ACTIVATED':
+    case 'round.reopened':
+      return roundName ? `${roundName} was opened` : 'A round was opened'
+    case 'ROUND_CLOSED':
+    case 'round.closed':
+      return roundName ? `${roundName} was closed` : 'A round was closed'
+    case 'ASSIGNMENT_CREATED':
+      return projectName
+        ? `${projectName} was assigned to a juror`
+        : 'A project was assigned'
+    case 'PROJECT_ADVANCED':
+      return projectName
+        ? `${projectName} advanced${roundName ? ` to ${roundName}` : ''}`
+        : 'A project advanced'
+    case 'PROJECT_REJECTED':
+      return projectName ? `${projectName} was rejected` : 'A project was rejected'
+    case 'RESULT_LOCKED':
+      return roundName ? `Results locked for ${roundName}` : 'Results were locked'
+    default:
+      return `${actor}: ${item.eventType.replace(/_/g, ' ').toLowerCase()}`
+  }
 }
 
 const STATUS_BADGE_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
@@ -94,31 +130,17 @@ const STATUS_BADGE_VARIANT: Record<string, 'default' | 'secondary' | 'outline'>
 }
 
 export function ObserverDashboardContent({ userName }: { userName?: string }) {
-  const [selectedProgramId, setSelectedProgramId] = useState<string>('')
-  const [selectedRoundId, setSelectedRoundId] = useState<string>('')
+  const { programs, selectedProgramId, activeRoundId } = useEditionContext()
+  const [expandedJurorId, setExpandedJurorId] = useState<string | null>(null)
 
-  const { data: programs } = trpc.program.list.useQuery(
-    { includeStages: true },
-    { refetchInterval: 30_000 },
-  )
-
-  useEffect(() => {
-    if (programs && programs.length > 0 && !selectedProgramId) {
-      const firstProgram = programs[0]
-      setSelectedProgramId(firstProgram.id)
-      const firstRound = (firstProgram.rounds ?? [])[0]
-      if (firstRound) setSelectedRoundId(firstRound.id)
-    }
-  }, [programs, selectedProgramId])
-
-  const roundIdParam = selectedRoundId || undefined
+  const roundIdParam = activeRoundId || undefined
 
   const { data: stats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery(
     { roundId: roundIdParam },
     { refetchInterval: 30_000 },
   )
 
-  const selectedProgram = programs?.find((p) => p.id === selectedProgramId)
+  const selectedProgram = programs.find((p) => p.id === selectedProgramId)
   const competitionId = (selectedProgram?.rounds ?? [])[0]?.competitionId as string | undefined
 
   const { data: roundOverview, isLoading: overviewLoading } = trpc.analytics.getRoundCompletionOverview.useQuery(
@@ -167,37 +189,9 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
-          <p className="text-muted-foreground">Welcome, {userName || 'Observer'}</p>
-        </div>
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-          <div className="flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700">
-            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
-            Auto-refresh
-          </div>
-          <Select
-            value={selectedProgramId}
-            onValueChange={(val) => {
-              setSelectedProgramId(val)
-              const prog = programs?.find((p) => p.id === val)
-              const firstRound = (prog?.rounds ?? [])[0]
-              setSelectedRoundId(firstRound?.id ?? '')
-            }}
-          >
-            <SelectTrigger className="w-full sm:w-[220px]">
-              <SelectValue placeholder="Select edition" />
-            </SelectTrigger>
-            <SelectContent>
-              {(programs ?? []).map((p) => (
-                <SelectItem key={p.id} value={p.id}>
-                  {(p as { year?: number }).year ? `${(p as { year?: number }).year} Edition` : p.name ?? p.id}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">Welcome, {userName || 'Observer'}</p>
       </div>
 
       {/* Six Stat Tiles */}
@@ -411,23 +405,53 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
             </CardHeader>
             <CardContent>
               {topJurors.length > 0 ? (
-                <div className="space-y-4">
-                  {topJurors.map((juror) => (
-                    <div key={juror.id} className="space-y-1">
-                      <div className="flex items-center justify-between text-sm">
-                        <span className="truncate font-medium" title={juror.name ?? ''}>
-                          {juror.name ?? 'Unknown'}
-                        </span>
-                        <span className="ml-2 shrink-0 text-xs tabular-nums text-muted-foreground">
-                          {juror.completionRate}%
-                        </span>
+                <div className="space-y-3">
+                  {topJurors.map((juror) => {
+                    const isExpanded = expandedJurorId === juror.id
+                    return (
+                      <div key={juror.id}>
+                        <button
+                          type="button"
+                          className="w-full text-left space-y-1 rounded-md px-1 -mx-1 py-1 hover:bg-muted/50 transition-colors"
+                          onClick={() => setExpandedJurorId(isExpanded ? null : juror.id)}
+                        >
+                          <div className="flex items-center justify-between text-sm">
+                            <span className="truncate font-medium" title={juror.name ?? ''}>
+                              {juror.name ?? 'Unknown'}
+                            </span>
+                            <div className="ml-2 flex shrink-0 items-center gap-1.5">
+                              <span className="text-xs tabular-nums text-muted-foreground">
+                                {juror.completionRate}%
+                              </span>
+                              {isExpanded ? (
+                                <ChevronUp className="h-3 w-3 text-muted-foreground" />
+                              ) : (
+                                <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                              )}
+                            </div>
+                          </div>
+                          <Progress value={juror.completionRate} className="h-1.5" />
+                          <p className="text-[11px] text-muted-foreground">
+                            {juror.completed} / {juror.assigned} evaluations
+                          </p>
+                        </button>
+                        {isExpanded && juror.projects && (
+                          <div className="ml-1 mt-1 space-y-1 border-l-2 border-muted pl-3">
+                            {juror.projects.map((proj: { id: string; title: string; evalStatus: string }) => (
+                              <Link
+                                key={proj.id}
+                                href={`/observer/projects/${proj.id}` as Route}
+                                className="flex items-center justify-between gap-2 rounded py-1 text-xs hover:underline"
+                              >
+                                <span className="truncate">{proj.title}</span>
+                                <StatusBadge status={proj.evalStatus} size="sm" />
+                              </Link>
+                            ))}
+                          </div>
+                        )}
                       </div>
-                      <Progress value={juror.completionRate} className="h-1.5" />
-                      <p className="text-[11px] text-muted-foreground">
-                        {juror.completed} / {juror.assigned} evaluations
-                      </p>
-                    </div>
-                  ))}
+                    )
+                  })}
                 </div>
               ) : (
                 <div className="space-y-4">
@@ -474,9 +498,9 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                 <div className="rounded-lg bg-emerald-500/10 p-1.5">
                   <ClipboardList className="h-4 w-4 text-emerald-500" />
                 </div>
-                Recent Projects
+                Recently Reviewed
               </CardTitle>
-              <CardDescription>Latest project activity</CardDescription>
+              <CardDescription>Latest project reviews</CardDescription>
             </CardHeader>
             <CardContent className="p-0">
               {projectsData && projectsData.projects.length > 0 ? (
@@ -486,7 +510,7 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                       <TableRow>
                         <TableHead>Project</TableHead>
                         <TableHead>Status</TableHead>
-                        <TableHead className="text-right">Score</TableHead>
+                        <TableHead className="text-right whitespace-nowrap">Score</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
@@ -505,10 +529,12 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
                             )}
                           </TableCell>
                           <TableCell>
-                            <StatusBadge status={project.status} />
+                            <StatusBadge status={project.observerStatus ?? project.status} />
                           </TableCell>
-                          <TableCell className="text-right tabular-nums text-sm">
-                            {project.averageScore !== null ? project.averageScore.toFixed(1) : '—'}
+                          <TableCell className="text-right tabular-nums text-sm whitespace-nowrap">
+                            {project.evaluationCount > 0 && project.averageScore !== null
+                              ? project.averageScore.toFixed(1)
+                              : '—'}
                           </TableCell>
                         </TableRow>
                       ))}
@@ -549,32 +575,22 @@ export function ObserverDashboardContent({ userName }: { userName?: string }) {
             <CardContent>
               {activityFeed && activityFeed.length > 0 ? (
                 <div className="space-y-3">
-                  {activityFeed.map((item) => (
-                    <div key={item.id} className="flex items-start gap-3">
-                      <span
-                        className={cn(
-                          'mt-1.5 h-2 w-2 shrink-0 rounded-full',
-                          ACTIVITY_DOT_COLORS[item.eventType] ?? 'bg-slate-400',
-                        )}
-                      />
-                      <div className="min-w-0 flex-1">
-                        <p className="text-sm leading-snug">
-                          <span className="font-medium">
-                            {item.eventType.replace(/_/g, ' ').toLowerCase().replace(/^\w/, (c) => c.toUpperCase())}
-                          </span>
-                          {item.entityType && (
-                            <span className="text-muted-foreground"> — {item.entityType.replace(/_/g, ' ').toLowerCase()}</span>
-                          )}
+                  {activityFeed.slice(0, 5).map((item) => {
+                    const iconDef = ACTIVITY_ICONS[item.eventType]
+                    const IconComponent = iconDef?.icon ?? Activity
+                    const iconColor = iconDef?.color ?? 'text-slate-400'
+                    return (
+                      <div key={item.id} className="flex items-start gap-3">
+                        <IconComponent className={cn('mt-0.5 h-4 w-4 shrink-0', iconColor)} />
+                        <p className="min-w-0 flex-1 text-sm leading-snug">
+                          {humanizeActivity(item)}
                         </p>
-                        {item.actorName && (
-                          <p className="text-[11px] text-muted-foreground">by {item.actorName}</p>
-                        )}
+                        <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
+                          {relativeTime(item.createdAt)}
+                        </span>
                       </div>
-                      <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
-                        {relativeTime(item.createdAt)}
-                      </span>
-                    </div>
-                  ))}
+                    )
+                  })}
                 </div>
               ) : (
                 <div className="space-y-3">

src/components/observer/observer-edition-context.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
+import { trpc } from '@/lib/trpc/client'
+
+type Program = {
+  id: string
+  name: string | null
+  year?: number
+  rounds?: Array<{ id: string; name: string; status: string; competitionId?: string }>
+}
+
+type EditionContextValue = {
+  programs: Program[]
+  selectedProgramId: string
+  setSelectedProgramId: (id: string) => void
+  activeRoundId: string
+}
+
+const EditionContext = createContext<EditionContextValue | null>(null)
+
+export function useEditionContext() {
+  const ctx = useContext(EditionContext)
+  if (!ctx) throw new Error('useEditionContext must be used within EditionProvider')
+  return ctx
+}
+
+function findBestRound(rounds: Array<{ id: string; status: string }>): string {
+  const active = rounds.find(r => r.status === 'ROUND_ACTIVE')
+  if (active) return active.id
+  const closed = [...rounds].filter(r => r.status === 'ROUND_CLOSED').pop()
+  if (closed) return closed.id
+  return rounds[0]?.id ?? ''
+}
+
+export function EditionProvider({ children }: { children: ReactNode }) {
+  const [selectedProgramId, setSelectedProgramId] = useState<string>('')
+
+  const { data: programs } = trpc.program.list.useQuery(
+    { includeStages: true },
+    { refetchInterval: 30_000 },
+  )
+
+  useEffect(() => {
+    if (programs && programs.length > 0 && !selectedProgramId) {
+      setSelectedProgramId(programs[0].id)
+    }
+  }, [programs, selectedProgramId])
+
+  const typedPrograms = (programs ?? []) as Program[]
+  const selectedProgram = typedPrograms.find(p => p.id === selectedProgramId)
+  const rounds = (selectedProgram?.rounds ?? []) as Array<{ id: string; status: string }>
+  const activeRoundId = findBestRound(rounds)
+
+  return (
+    <EditionContext.Provider
+      value={{
+        programs: typedPrograms,
+        selectedProgramId,
+        setSelectedProgramId,
+        activeRoundId,
+      }}
+    >
+      {children}
+    </EditionContext.Provider>
+  )
+}

src/components/observer/observer-project-detail.tsx

@@ -39,7 +39,7 @@ import {
   Sparkles,
   MessageSquare,
 } from 'lucide-react'
-import { formatDate, formatDateOnly } from '@/lib/utils'
+import { cn, formatDate, formatDateOnly } from '@/lib/utils'
 
 export function ObserverProjectDetail({ projectId }: { projectId: string }) {
   const { data, isLoading } = trpc.analytics.getProjectDetail.useQuery(
@@ -85,9 +85,13 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
     )
   }
 
-  const { project, assignments, stats, competitionRounds, allRequirements } =
+  const { project, assignments, stats, competitionRounds, projectRoundStates, allRequirements } =
     data
 
+  const roundStateMap = new Map(
+    (projectRoundStates ?? []).map((s) => [s.roundId, s]),
+  )
+
   const criteriaMap = new Map<
     string,
     { label: string; type: string; trueLabel?: string; falseLabel?: string }
@@ -338,26 +342,12 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
                         : '-'}
                     </p>
                   </div>
-                  <div>
-                    <p className="text-xs text-muted-foreground">Org Type</p>
-                    <p className="text-sm font-medium">
-                      {project.institution || '-'}
-                    </p>
-                  </div>
                   <div>
                     <p className="text-xs text-muted-foreground">Country</p>
                     <p className="text-sm font-medium">
                       {project.country || project.geographicZone || '-'}
                     </p>
                   </div>
-                  <div>
-                    <p className="text-xs text-muted-foreground">Budget</p>
-                    <p className="text-sm font-medium">-</p>
-                  </div>
-                  <div>
-                    <p className="text-xs text-muted-foreground">Duration</p>
-                    <p className="text-sm font-medium">-</p>
-                  </div>
                   <div>
                     <p className="text-xs text-muted-foreground">AI Score</p>
                     <p className="text-sm font-medium">-</p>
@@ -421,72 +411,102 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
           </AnimatedCard>
 
           {/* Round History */}
-          {competitionRounds.length > 0 && (
-            <AnimatedCard index={3}>
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2.5 text-lg">
-                    <div className="rounded-lg bg-violet-500/10 p-1.5">
-                      <Calendar className="h-4 w-4 text-violet-500" />
-                    </div>
-                    Round History
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <ol className="space-y-4">
-                    {competitionRounds.map((round, idx) => {
-                      // Determine round status from assignments
-                      const roundAssignments = assignments.filter(
-                        (a) => a.roundId === round.id,
-                      )
-                      const hasInProgressAssignments = roundAssignments.some(
-                        (a) => a.evaluation?.status === 'DRAFT',
-                      )
-                      const allSubmitted =
-                        roundAssignments.length > 0 &&
-                        roundAssignments.every(
-                          (a) => a.evaluation?.status === 'SUBMITTED',
+          {competitionRounds.length > 0 && (() => {
+            const passedCount = competitionRounds.filter((r) => {
+              const s = roundStateMap.get(r.id)
+              return s && (s.state === 'PASSED' || s.state === 'COMPLETED')
+            }).length
+            const rejectedRound = competitionRounds.find((r) => {
+              const s = roundStateMap.get(r.id)
+              return s?.state === 'REJECTED'
+            })
+            return (
+              <AnimatedCard index={3}>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2.5 text-lg">
+                      <div className="rounded-lg bg-violet-500/10 p-1.5">
+                        <Calendar className="h-4 w-4 text-violet-500" />
+                      </div>
+                      Round History
+                    </CardTitle>
+                    <CardDescription>
+                      {rejectedRound
+                        ? `Rejected at ${rejectedRound.name}`
+                        : `Passed ${passedCount} of ${competitionRounds.length} rounds`}
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <ol className="space-y-4">
+                      {competitionRounds.map((round) => {
+                        const roundState = roundStateMap.get(round.id)
+                        const state = roundState?.state
+
+                        const roundAssignments = assignments.filter(
+                          (a) => a.roundId === round.id,
                         )
-                      const isPast = idx < competitionRounds.length - 1 && allSubmitted
-                      const isActive = hasInProgressAssignments || (!isPast && roundAssignments.length > 0 && !allSubmitted)
-                      return (
-                        <li key={round.id} className="flex items-start gap-3">
-                          {isPast || allSubmitted ? (
-                            <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
-                          ) : isActive ? (
+
+                        let icon: React.ReactNode
+                        let statusLabel: string | null = null
+                        if (state === 'PASSED' || state === 'COMPLETED') {
+                          icon = <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
+                          statusLabel = 'Passed'
+                        } else if (state === 'REJECTED') {
+                          icon = <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
+                          statusLabel = 'Rejected at this round'
+                        } else if (state === 'IN_PROGRESS') {
+                          icon = (
                             <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center">
                               <span className="relative flex h-3 w-3">
                                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75" />
                                 <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500" />
                               </span>
                             </span>
-                          ) : (
-                            <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/40" />
-                          )}
-                          <div className="min-w-0">
-                            <p className="text-sm font-medium">{round.name}</p>
-                            {roundAssignments.length > 0 && (
-                              <p className="text-xs text-muted-foreground">
-                                {roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length}/{roundAssignments.length} evaluations
-                              </p>
+                          )
+                          statusLabel = 'Active'
+                        } else if (state === 'PENDING') {
+                          icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/40" />
+                          statusLabel = 'Pending'
+                        } else {
+                          icon = <Circle className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground/20" />
+                        }
+
+                        return (
+                          <li key={round.id} className="flex items-start gap-3">
+                            {icon}
+                            <div className="min-w-0 flex-1">
+                              <p className="text-sm font-medium">{round.name}</p>
+                              {statusLabel && (
+                                <p className={cn(
+                                  'text-xs',
+                                  state === 'REJECTED' ? 'text-destructive' : 'text-muted-foreground',
+                                )}>
+                                  {statusLabel}
+                                </p>
+                              )}
+                              {roundAssignments.length > 0 && (
+                                <p className="text-xs text-muted-foreground">
+                                  {roundAssignments.filter((a) => a.evaluation?.status === 'SUBMITTED').length}/{roundAssignments.length} evaluations
+                                </p>
+                              )}
+                            </div>
+                            {state === 'IN_PROGRESS' && (
+                              <Badge
+                                variant="outline"
+                                className="ml-auto shrink-0 border-blue-200 bg-blue-50 text-blue-600 text-xs"
+                              >
+                                Active
+                              </Badge>
                             )}
-                          </div>
-                          {isActive && (
-                            <Badge
-                              variant="outline"
-                              className="ml-auto shrink-0 border-blue-200 bg-blue-50 text-blue-600 text-xs"
-                            >
-                              Active
-                            </Badge>
-                          )}
-                        </li>
-                      )
-                    })}
-                  </ol>
-                </CardContent>
-              </Card>
-            </AnimatedCard>
-          )}
+                          </li>
+                        )
+                      })}
+                    </ol>
+                  </CardContent>
+                </Card>
+              </AnimatedCard>
+            )
+          })()}
         </TabsContent>
 
         {/* ── Evaluations Tab ── */}
@@ -496,7 +516,9 @@ export function ObserverProjectDetail({ projectId }: { projectId: string }) {
               <CardContent className="flex flex-col items-center justify-center py-12 text-center">
                 <Users className="h-10 w-10 text-muted-foreground/40" />
                 <p className="mt-2 text-sm text-muted-foreground">
-                  No jury assignments yet
+                  {project.status === 'ASSIGNED'
+                    ? 'Awaiting jury evaluation — assigned and pending review'
+                    : 'No jury assignments yet'}
                 </p>
               </CardContent>
             </Card>

src/components/observer/observer-projects-content.tsx

@@ -251,8 +251,9 @@ export function ObserverProjectsContent() {
               <SelectContent>
                 <SelectItem value="all">All Statuses</SelectItem>
                 <SelectItem value="SUBMITTED">Submitted</SelectItem>
-                <SelectItem value="ELIGIBLE">Eligible</SelectItem>
-                <SelectItem value="ASSIGNED">Assigned</SelectItem>
+                <SelectItem value="NOT_REVIEWED">Not Reviewed</SelectItem>
+                <SelectItem value="UNDER_REVIEW">Under Review</SelectItem>
+                <SelectItem value="REVIEWED">Reviewed</SelectItem>
                 <SelectItem value="SEMIFINALIST">Semi-finalist</SelectItem>
                 <SelectItem value="FINALIST">Finalist</SelectItem>
                 <SelectItem value="REJECTED">Rejected</SelectItem>
@@ -344,10 +345,10 @@ export function ObserverProjectsContent() {
                           </Badge>
                         </TableCell>
                         <TableCell>
-                          <StatusBadge status={project.status} />
+                          <StatusBadge status={project.observerStatus ?? project.status} />
                         </TableCell>
                         <TableCell>
-                          {project.averageScore !== null ? (
+                          {project.evaluationCount > 0 && project.averageScore !== null ? (
                             <div className="flex items-center gap-2">
                               <span className="tabular-nums w-8 text-sm">
                                 {project.averageScore.toFixed(1)}
@@ -404,24 +405,26 @@ export function ObserverProjectsContent() {
                           </p>
                         )}
                       </div>
-                      <StatusBadge status={project.status} />
+                      <StatusBadge status={project.observerStatus ?? project.status} />
                     </div>
                     <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
                       <Badge variant="outline" className="text-xs">
                         {project.roundName}
                       </Badge>
-                      <div className="flex gap-3">
-                        <span>
-                          Score:{' '}
-                          {project.averageScore !== null
-                            ? project.averageScore.toFixed(1)
-                            : '-'}
-                        </span>
-                        <span>
-                          {project.evaluationCount} eval
-                          {project.evaluationCount !== 1 ? 's' : ''}
-                        </span>
-                      </div>
+                      {project.evaluationCount > 0 && (
+                        <div className="flex gap-3">
+                          <span>
+                            Score:{' '}
+                            {project.averageScore !== null
+                              ? project.averageScore.toFixed(1)
+                              : '-'}
+                          </span>
+                          <span>
+                            {project.evaluationCount} eval
+                            {project.evaluationCount !== 1 ? 's' : ''}
+                          </span>
+                        </div>
+                      )}
                     </div>
                   </CardContent>
                 </Card>

src/components/shared/status-badge.tsx

@@ -24,6 +24,10 @@ const STATUS_STYLES: Record<string, { variant: BadgeProps['variant']; className?
   REJECTED: { variant: 'destructive' },
   WITHDRAWN: { variant: 'secondary' },
 
+  // Observer-derived statuses
+  NOT_REVIEWED: { variant: 'secondary', className: 'bg-slate-500/10 text-slate-600 border-slate-200 dark:text-slate-400' },
+  REVIEWED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
+
   // Evaluation statuses
   IN_PROGRESS: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
   COMPLETED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
@@ -43,7 +47,14 @@ type StatusBadgeProps = {
 
 export function StatusBadge({ status, className, size = 'default' }: StatusBadgeProps) {
   const style = STATUS_STYLES[status] || { variant: 'secondary' as const }
-  const label = status === 'NONE' ? 'NOT INVITED' : status.replace(/_/g, ' ')
+  const LABEL_OVERRIDES: Record<string, string> = {
+    NONE: 'NOT INVITED',
+    NOT_REVIEWED: 'Not Reviewed',
+    UNDER_REVIEW: 'Under Review',
+    REVIEWED: 'Reviewed',
+    SEMIFINALIST: 'Semi-finalist',
+  }
+  const label = LABEL_OVERRIDES[status] ?? status.replace(/_/g, ' ')
 
   return (
     <Badge