Redesign assignment preview with detailed editable juror-project view

Replace bare summary stats with full interactive assignment preview:
- Assignments grouped by juror with collapsible cards
- Per-assignment detail: match score, tags, reasoning, policy warnings
- Remove individual assignments with hover X button
- Inline add projects per juror + global juror/project picker
- No cap enforcement on manual adds (admin override)
- Track manual additions and removals with badge indicators
- Include user details in round.getById jury group members query

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

src/components/admin/assignment/assignment-preview-sheet.tsx

@@ -1,7 +1,19 @@
 'use client'
 
-import { useState, useEffect } from 'react'
-import { AlertTriangle, Bot, CheckCircle2 } from 'lucide-react'
+import { useState, useEffect, useMemo } from 'react'
+import {
+  AlertTriangle,
+  Bot,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Loader2,
+  Plus,
+  Sparkles,
+  Tag,
+  User,
+  X,
+} from 'lucide-react'
 import { toast } from 'sonner'
 import { trpc } from '@/lib/trpc/client'
 import {
@@ -17,8 +29,41 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
-interface AssignmentPreviewSheetProps {
+type EditableAssignment = {
+  localId: string
+  userId: string
+  userName: string
+  projectId: string
+  projectTitle: string
+  score: number
+  reasoning: string[]
+  matchingTags: string[]
+  policyViolations: string[]
+  fromIntent: boolean
+  isManual: boolean
+}
+
+type AssignmentPreviewSheetProps = {
   roundId: string
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -33,153 +78,707 @@ export function AssignmentPreviewSheet({
 }: AssignmentPreviewSheetProps) {
   const utils = trpc.useUtils()
 
+  const [assignments, setAssignments] = useState<EditableAssignment[]>([])
+  const [initialized, setInitialized] = useState(false)
+  const [expandedJurors, setExpandedJurors] = useState<Set<string>>(new Set())
+  const [addJurorId, setAddJurorId] = useState<string>('')
+  const [addProjectId, setAddProjectId] = useState<string>('')
+
+  // ── Queries ──────────────────────────────────────────────────────────────
   const {
     data: preview,
     isLoading,
     refetch,
   } = trpc.roundAssignment.preview.useQuery(
     { roundId, honorIntents: true, requiredReviews },
-    { enabled: open }
+    { enabled: open },
   )
 
-  const { mutate: execute, isPending: isExecuting } = trpc.roundAssignment.execute.useMutation({
-    onSuccess: (result) => {
-      toast.success(`Created ${result.created} assignments`)
-      utils.roundAssignment.coverageReport.invalidate({ roundId })
-      utils.roundAssignment.unassignedQueue.invalidate({ roundId })
-      utils.assignment.listByStage.invalidate({ roundId })
-      utils.roundEngine.getProjectStates.invalidate({ roundId })
-      onOpenChange(false)
-    },
-    onError: (err) => {
-      toast.error(err.message)
-    },
-  })
+  // Fetch round data for jury group members
+  const { data: round } = trpc.round.getById.useQuery(
+    { id: roundId },
+    { enabled: open },
+  )
 
+  // Fetch projects in this round
+  const { data: projectStates } = trpc.roundEngine.getProjectStates.useQuery(
+    { roundId },
+    { enabled: open },
+  )
+
+  // Fetch existing assignments to exclude already-assigned pairs
+  const { data: existingAssignments } = trpc.assignment.listByStage.useQuery(
+    { roundId },
+    { enabled: open },
+  )
+
+  const { mutate: execute, isPending: isExecuting } =
+    trpc.roundAssignment.execute.useMutation({
+      onSuccess: (result) => {
+        toast.success(`Created ${result.created} assignments`)
+        utils.roundAssignment.coverageReport.invalidate({ roundId })
+        utils.roundAssignment.unassignedQueue.invalidate({ roundId })
+        utils.assignment.listByStage.invalidate({ roundId })
+        utils.roundEngine.getProjectStates.invalidate({ roundId })
+        onOpenChange(false)
+      },
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
+
+  // ── Initialize local state from preview ──────────────────────────────────
   useEffect(() => {
-    if (open) {
-      refetch()
+    if (preview && !initialized) {
+      const mapped: EditableAssignment[] = preview.assignments.map(
+        (a: any, idx: number) => ({
+          localId: `ai-${idx}`,
+          userId: a.userId,
+          userName: a.userName,
+          projectId: a.projectId,
+          projectTitle: a.projectTitle,
+          score: a.score,
+          reasoning: a.reasoning ?? [],
+          matchingTags: a.matchingTags ?? [],
+          policyViolations: a.policyViolations ?? [],
+          fromIntent: a.fromIntent ?? false,
+          isManual: false,
+        }),
+      )
+      setAssignments(mapped)
+      // Auto-expand all jurors
+      const jurorIds = new Set(mapped.map((a) => a.userId))
+      setExpandedJurors(jurorIds)
+      setInitialized(true)
     }
-  }, [open, refetch])
+  }, [preview, initialized])
+
+  // Reset when sheet closes
+  useEffect(() => {
+    if (!open) {
+      setInitialized(false)
+      setAssignments([])
+      setExpandedJurors(new Set())
+      setAddJurorId('')
+      setAddProjectId('')
+    }
+  }, [open])
+
+  // ── Derived data ─────────────────────────────────────────────────────────
+  const juryMembers = useMemo(() => {
+    if (!round?.juryGroup?.members) return []
+    return round.juryGroup.members.map((m: any) => ({
+      userId: m.userId,
+      name: m.user?.name ?? m.userId,
+      role: m.role,
+    }))
+  }, [round])
+
+  const projects = useMemo((): Array<{ id: string; title: string; category?: string }> => {
+    if (!projectStates) return []
+    return projectStates.map((ps: any) => ({
+      id: ps.project?.id ?? ps.projectId,
+      title: ps.project?.title ?? ps.projectId,
+      category: ps.project?.competitionCategory,
+    }))
+  }, [projectStates])
+
+  // Build set of existing assignment pairs (already committed)
+  const existingPairs = useMemo(() => {
+    const pairs = new Set<string>()
+    for (const a of existingAssignments ?? []) {
+      pairs.add(`${a.userId}:${a.projectId}`)
+    }
+    return pairs
+  }, [existingAssignments])
+
+  // Build set of current preview assignment pairs
+  const currentPairs = useMemo(() => {
+    const pairs = new Set<string>()
+    for (const a of assignments) {
+      pairs.add(`${a.userId}:${a.projectId}`)
+    }
+    return pairs
+  }, [assignments])
+
+  // Group assignments by juror
+  const groupedByJuror = useMemo(() => {
+    const map = new Map<
+      string,
+      { userId: string; userName: string; assignments: EditableAssignment[] }
+    >()
+    for (const a of assignments) {
+      if (!map.has(a.userId)) {
+        map.set(a.userId, { userId: a.userId, userName: a.userName, assignments: [] })
+      }
+      map.get(a.userId)!.assignments.push(a)
+    }
+    return Array.from(map.values()).sort((a, b) =>
+      b.assignments.length - a.assignments.length,
+    )
+  }, [assignments])
+
+  // Stats
+  const totalAssignments = assignments.length
+  const uniqueProjects = new Set(assignments.map((a) => a.projectId)).size
+  const uniqueJurors = new Set(assignments.map((a) => a.userId)).size
+  const manualCount = assignments.filter((a) => a.isManual).length
+  const removedCount = (preview?.stats.assignmentsGenerated ?? 0) - assignments.filter((a) => !a.isManual).length
+
+  // Projects available for a specific juror (not already assigned in preview or existing)
+  const getAvailableProjectsForJuror = (userId: string) => {
+    return projects.filter((p) => {
+      const pairKey = `${userId}:${p.id}`
+      return !currentPairs.has(pairKey) && !existingPairs.has(pairKey)
+    })
+  }
+
+  // ── Actions ──────────────────────────────────────────────────────────────
+  const removeAssignment = (localId: string) => {
+    setAssignments((prev) => prev.filter((a) => a.localId !== localId))
+  }
+
+  const addAssignment = () => {
+    if (!addJurorId || !addProjectId) {
+      toast.error('Select both a juror and a project')
+      return
+    }
+
+    const juror = juryMembers.find((m) => m.userId === addJurorId)
+    const project = projects.find((p) => p.id === addProjectId)
+    if (!juror || !project) return
+
+    const pairKey = `${addJurorId}:${addProjectId}`
+    if (currentPairs.has(pairKey) || existingPairs.has(pairKey)) {
+      toast.error('This assignment already exists')
+      return
+    }
+
+    setAssignments((prev) => [
+      ...prev,
+      {
+        localId: `manual-${Date.now()}`,
+        userId: addJurorId,
+        userName: juror.name,
+        projectId: addProjectId,
+        projectTitle: project.title,
+        score: 0,
+        reasoning: ['Manually added by admin'],
+        matchingTags: [],
+        policyViolations: [],
+        fromIntent: false,
+        isManual: true,
+      },
+    ])
+
+    // Expand the juror's section
+    setExpandedJurors((prev) => new Set([...prev, addJurorId]))
+    setAddProjectId('')
+  }
+
+  const addProjectToJuror = (userId: string, projectId: string) => {
+    const juror = juryMembers.find((m) => m.userId === userId)
+    const project = projects.find((p) => p.id === projectId)
+    if (!juror || !project) return
+
+    setAssignments((prev) => [
+      ...prev,
+      {
+        localId: `manual-${Date.now()}`,
+        userId,
+        userName: juror.name,
+        projectId,
+        projectTitle: project.title,
+        score: 0,
+        reasoning: ['Manually added by admin'],
+        matchingTags: [],
+        policyViolations: [],
+        fromIntent: false,
+        isManual: true,
+      },
+    ])
+  }
+
+  const toggleJuror = (userId: string) => {
+    setExpandedJurors((prev) => {
+      const next = new Set(prev)
+      if (next.has(userId)) next.delete(userId)
+      else next.add(userId)
+      return next
+    })
+  }
 
   const handleExecute = () => {
-    if (!preview?.assignments || preview.assignments.length === 0) {
+    if (assignments.length === 0) {
       toast.error('No assignments to execute')
       return
     }
 
     execute({
       roundId,
-      assignments: preview.assignments.map((a: any) => ({
+      assignments: assignments.map((a) => ({
         userId: a.userId,
         projectId: a.projectId,
       })),
     })
   }
 
+  // ── Render ───────────────────────────────────────────────────────────────
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full sm:max-w-xl">
-        <SheetHeader>
-          <SheetTitle>Assignment Preview</SheetTitle>
-          <SheetDescription className="flex items-center gap-2">
+      <SheetContent className="w-full sm:max-w-2xl p-0 flex flex-col">
+        <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
+          <SheetTitle className="text-lg">Assignment Preview</SheetTitle>
+          <SheetDescription className="flex flex-wrap items-center gap-2 text-sm">
             <Badge variant="outline" className="text-xs gap-1 shrink-0">
               <Bot className="h-3 w-3" />
               AI Suggested
             </Badge>
-            Review the proposed assignments before executing. All assignments are admin-approved on execute.
+            Review and fine-tune before executing.
           </SheetDescription>
         </SheetHeader>
 
-        <ScrollArea className="h-[calc(100vh-200px)] mt-6">
-          {isLoading ? (
-            <div className="space-y-3">
-              {[1, 2, 3].map((i) => (
-                <Skeleton key={i} className="h-20 w-full" />
-              ))}
-            </div>
-          ) : preview ? (
-            <div className="space-y-4">
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-sm flex items-center gap-2">
-                    <CheckCircle2 className="h-4 w-4 text-green-600" />
-                    {preview.stats.assignmentsGenerated || 0} Assignments Proposed
-                </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground">
-                    {preview.stats.totalJurors || 0} jurors will receive assignments
-                  </p>
-                </CardContent>
-              </Card>
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="px-6 py-4 space-y-4">
+            {isLoading ? (
+              <div className="space-y-3">
+                {[1, 2, 3, 4].map((i) => (
+                  <Skeleton key={i} className="h-16 w-full" />
+                ))}
+              </div>
+            ) : preview ? (
+              <>
+                {/* ── Summary stats ── */}
+                <div className="grid grid-cols-4 gap-2">
+                  {[
+                    { label: 'Assignments', value: totalAssignments },
+                    { label: 'Projects', value: uniqueProjects },
+                    { label: 'Jurors', value: uniqueJurors },
+                    { label: 'Unassigned', value: Math.max(0, (preview.stats.totalProjects ?? 0) - uniqueProjects) },
+                  ].map((stat) => (
+                    <div
+                      key={stat.label}
+                      className="rounded-lg border bg-muted/30 px-3 py-2 text-center"
+                    >
+                      <p className="text-lg font-bold tabular-nums">{stat.value}</p>
+                      <p className="text-[11px] text-muted-foreground">{stat.label}</p>
+                    </div>
+                  ))}
+                </div>
 
-              {preview.warnings && preview.warnings.length > 0 && (
-                <Card className="border-amber-500">
-                  <CardHeader>
-                    <CardTitle className="text-sm flex items-center gap-2">
-                      <AlertTriangle className="h-4 w-4 text-amber-600" />
-                      Warnings ({preview.warnings.length})
+                {/* Modification indicator */}
+                {(manualCount > 0 || removedCount > 0) && (
+                  <div className="flex flex-wrap gap-2 text-xs">
+                    {manualCount > 0 && (
+                      <Badge variant="secondary" className="gap-1">
+                        <Plus className="h-3 w-3" />
+                        {manualCount} added manually
+                      </Badge>
+                    )}
+                    {removedCount > 0 && (
+                      <Badge variant="secondary" className="gap-1 text-red-600">
+                        <X className="h-3 w-3" />
+                        {removedCount} removed
+                      </Badge>
+                    )}
+                  </div>
+                )}
+
+                {/* ── Warnings ── */}
+                {preview.warnings && preview.warnings.length > 0 && (
+                  <Card className="border-amber-300 bg-amber-50/50 dark:bg-amber-950/20">
+                    <CardContent className="p-3">
+                      <div className="flex items-start gap-2">
+                        <AlertTriangle className="h-4 w-4 text-amber-600 mt-0.5 shrink-0" />
+                        <div className="space-y-1">
+                          {preview.warnings.map((w: string, idx: number) => (
+                            <p key={idx} className="text-xs text-amber-800 dark:text-amber-200">
+                              {w}
+                            </p>
+                          ))}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* ── Juror groups ── */}
+                <div className="space-y-2">
+                  <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Assignments by Juror
+                  </h3>
+                  {groupedByJuror.length === 0 ? (
+                    <Card>
+                      <CardContent className="py-8 text-center text-sm text-muted-foreground">
+                        No assignments. Add some manually below.
+                      </CardContent>
+                    </Card>
+                  ) : (
+                    groupedByJuror.map((group) => (
+                      <JurorGroup
+                        key={group.userId}
+                        group={group}
+                        expanded={expandedJurors.has(group.userId)}
+                        onToggle={() => toggleJuror(group.userId)}
+                        onRemove={removeAssignment}
+                        onAddProject={(projectId) =>
+                          addProjectToJuror(group.userId, projectId)
+                        }
+                        availableProjects={getAvailableProjectsForJuror(group.userId)}
+                        requiredReviews={requiredReviews}
+                      />
+                    ))
+                  )}
+                </div>
+
+                {/* ── Add assignment manually ── */}
+                <Card>
+                  <CardHeader className="pb-2 pt-3 px-3">
+                    <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
+                      <Plus className="h-3.5 w-3.5" />
+                      Add Assignment
                     </CardTitle>
                   </CardHeader>
-                  <CardContent>
-                    <ul className="space-y-2 text-sm">
-                      {preview.warnings.map((warning: string, idx: number) => (
-                        <li key={idx} className="flex items-start gap-2">
-                          <span className="text-amber-600">•</span>
-                          <span>{warning}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </CardContent>
-                </Card>
-              )}
-
-              {preview.assignments && preview.assignments.length > 0 && (
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-sm">Assignment Summary</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="space-y-2 text-sm">
-                      <div className="flex justify-between">
-                        <span className="text-muted-foreground">Total assignments:</span>
-                        <span className="font-medium">{preview.assignments.length}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-muted-foreground">Unique projects:</span>
-                        <span className="font-medium">
-                          {new Set(preview.assignments.map((a: any) => a.projectId)).size}
-                        </span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-muted-foreground">Unique jurors:</span>
-                        <span className="font-medium">
-                          {new Set(preview.assignments.map((a: any) => a.userId)).size}
-                        </span>
-                      </div>
+                  <CardContent className="px-3 pb-3">
+                    <div className="flex flex-col sm:flex-row gap-2">
+                      <Select value={addJurorId} onValueChange={setAddJurorId}>
+                        <SelectTrigger className="flex-1 h-9 text-xs">
+                          <SelectValue placeholder="Select juror..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {juryMembers.map((m) => {
+                            const load = assignments.filter(
+                              (a) => a.userId === m.userId,
+                            ).length
+                            return (
+                              <SelectItem key={m.userId} value={m.userId}>
+                                <span className="flex items-center gap-2">
+                                  <span className="truncate">{m.name}</span>
+                                  <span className="text-muted-foreground text-[10px] shrink-0">
+                                    ({load} assigned)
+                                  </span>
+                                </span>
+                              </SelectItem>
+                            )
+                          })}
+                        </SelectContent>
+                      </Select>
+                      <Select
+                        value={addProjectId}
+                        onValueChange={setAddProjectId}
+                        disabled={!addJurorId}
+                      >
+                        <SelectTrigger className="flex-1 h-9 text-xs">
+                          <SelectValue
+                            placeholder={
+                              addJurorId
+                                ? 'Select project...'
+                                : 'Select juror first'
+                            }
+                          />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {addJurorId &&
+                            getAvailableProjectsForJuror(addJurorId).map((p) => (
+                              <SelectItem key={p.id} value={p.id}>
+                                <span className="truncate">{p.title}</span>
+                                {p.category && (
+                                  <span className="text-muted-foreground text-[10px] ml-1">
+                                    ({p.category})
+                                  </span>
+                                )}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                      <Button
+                        size="sm"
+                        className="h-9 shrink-0"
+                        onClick={addAssignment}
+                        disabled={!addJurorId || !addProjectId}
+                      >
+                        <Plus className="h-3.5 w-3.5 mr-1" />
+                        Add
+                      </Button>
                     </div>
                   </CardContent>
                 </Card>
-              )}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">No preview data available</p>
-          )}
+              </>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                No preview data available
+              </p>
+            )}
+          </div>
         </ScrollArea>
 
-        <SheetFooter className="mt-6">
+        <SheetFooter className="px-6 py-4 border-t shrink-0 gap-2 sm:gap-2">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button
             onClick={handleExecute}
-            disabled={isExecuting || !preview?.assignments || preview.assignments.length === 0}
+            disabled={isExecuting || assignments.length === 0}
           >
-            {isExecuting ? 'Executing...' : 'Execute Assignments'}
+            {isExecuting ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
+                Executing...
+              </>
+            ) : (
+              <>
+                <CheckCircle2 className="h-4 w-4 mr-1.5" />
+                Execute {totalAssignments} Assignment{totalAssignments !== 1 ? 's' : ''}
+              </>
+            )}
           </Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
   )
 }
+
+// ─── Juror Group Card ────────────────────────────────────────────────────────
+
+type JurorGroupProps = {
+  group: {
+    userId: string
+    userName: string
+    assignments: EditableAssignment[]
+  }
+  expanded: boolean
+  onToggle: () => void
+  onRemove: (localId: string) => void
+  onAddProject: (projectId: string) => void
+  availableProjects: Array<{ id: string; title: string; category?: string }>
+  requiredReviews: number
+}
+
+function JurorGroup({
+  group,
+  expanded,
+  onToggle,
+  onRemove,
+  onAddProject,
+  availableProjects,
+  requiredReviews,
+}: JurorGroupProps) {
+  const [inlineProjectId, setInlineProjectId] = useState('')
+
+  const handleInlineAdd = () => {
+    if (!inlineProjectId) return
+    onAddProject(inlineProjectId)
+    setInlineProjectId('')
+  }
+
+  const aiCount = group.assignments.filter((a) => !a.isManual).length
+  const manualCount = group.assignments.filter((a) => a.isManual).length
+  const avgScore =
+    group.assignments.length > 0
+      ? Math.round(
+          group.assignments.reduce((sum, a) => sum + a.score, 0) /
+            group.assignments.length,
+        )
+      : 0
+
+  return (
+    <Collapsible open={expanded} onOpenChange={onToggle}>
+      <Card className="overflow-hidden">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-muted/40 transition-colors"
+          >
+            {expanded ? (
+              <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+            )}
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <div className="h-7 w-7 rounded-full bg-brand-blue/10 flex items-center justify-center shrink-0">
+                <User className="h-3.5 w-3.5 text-brand-blue" />
+              </div>
+              <span className="text-sm font-medium truncate">
+                {group.userName}
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5 shrink-0">
+              <Badge
+                variant="secondary"
+                className="text-[10px] tabular-nums h-5 px-1.5"
+              >
+                {group.assignments.length} project
+                {group.assignments.length !== 1 ? 's' : ''}
+              </Badge>
+              {avgScore > 0 && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'text-[10px] tabular-nums h-5 px-1.5',
+                          avgScore >= 50
+                            ? 'border-green-300 text-green-700'
+                            : avgScore >= 25
+                              ? 'border-amber-300 text-amber-700'
+                              : 'border-red-300 text-red-700',
+                        )}
+                      >
+                        {avgScore}
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>Avg. match score</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </div>
+          </button>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="border-t">
+            {group.assignments.map((a) => (
+              <AssignmentRow key={a.localId} assignment={a} onRemove={onRemove} />
+            ))}
+
+            {/* Inline add project */}
+            {availableProjects.length > 0 && (
+              <div className="flex items-center gap-2 px-3 py-2 bg-muted/20 border-t">
+                <Select
+                  value={inlineProjectId}
+                  onValueChange={setInlineProjectId}
+                >
+                  <SelectTrigger className="flex-1 h-8 text-xs">
+                    <SelectValue placeholder="Add project..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableProjects.map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        <span className="truncate">{p.title}</span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-8 px-2 shrink-0"
+                  onClick={handleInlineAdd}
+                  disabled={!inlineProjectId}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Card>
+    </Collapsible>
+  )
+}
+
+// ─── Assignment Row ──────────────────────────────────────────────────────────
+
+function AssignmentRow({
+  assignment,
+  onRemove,
+}: {
+  assignment: EditableAssignment
+  onRemove: (localId: string) => void
+}) {
+  const a = assignment
+
+  return (
+    <div className="flex items-start gap-2 px-3 py-2 group hover:bg-muted/30 transition-colors border-t first:border-t-0">
+      <div className="flex-1 min-w-0 space-y-1">
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm font-medium truncate">{a.projectTitle}</span>
+          {a.isManual ? (
+            <Badge
+              variant="outline"
+              className="text-[10px] h-4 px-1 border-blue-300 text-blue-600 shrink-0"
+            >
+              Manual
+            </Badge>
+          ) : a.fromIntent ? (
+            <Badge
+              variant="outline"
+              className="text-[10px] h-4 px-1 border-violet-300 text-violet-600 shrink-0"
+            >
+              Intent
+            </Badge>
+          ) : null}
+        </div>
+
+        {/* Score + tags + reasoning */}
+        <div className="flex flex-wrap items-center gap-1">
+          {!a.isManual && a.score > 0 && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'text-[10px] h-4 px-1 tabular-nums',
+                      a.score >= 50
+                        ? 'border-green-300 text-green-700'
+                        : a.score >= 25
+                          ? 'border-amber-300 text-amber-700'
+                          : 'border-red-300 text-red-700',
+                    )}
+                  >
+                    <Sparkles className="h-2.5 w-2.5 mr-0.5" />
+                    {Math.round(a.score)}
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-xs">
+                  <p className="font-medium text-xs mb-1">Match Score Breakdown</p>
+                  <ul className="text-xs space-y-0.5">
+                    {a.reasoning.map((r, i) => (
+                      <li key={i}>• {r}</li>
+                    ))}
+                  </ul>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+          {a.matchingTags.slice(0, 3).map((tag) => (
+            <Badge
+              key={tag}
+              variant="secondary"
+              className="text-[10px] h-4 px-1 gap-0.5"
+            >
+              <Tag className="h-2.5 w-2.5" />
+              {tag}
+            </Badge>
+          ))}
+          {a.matchingTags.length > 3 && (
+            <span className="text-[10px] text-muted-foreground">
+              +{a.matchingTags.length - 3} more
+            </span>
+          )}
+        </div>
+
+        {/* Policy violations */}
+        {a.policyViolations.length > 0 && (
+          <div className="flex items-center gap-1">
+            <AlertTriangle className="h-3 w-3 text-amber-500 shrink-0" />
+            <span className="text-[10px] text-amber-600 truncate">
+              {a.policyViolations.join(', ')}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
+        onClick={() => onRemove(a.localId)}
+      >
+        <X className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  )
+}

src/server/routers/round.ts

@@ -99,7 +99,13 @@ export const roundRouter = router({
         where: { id: input.id },
         include: {
           juryGroup: {
-            include: { members: true },
+            include: {
+              members: {
+                include: {
+                  user: { select: { id: true, name: true, email: true } },
+                },
+              },
+            },
           },
           submissionWindow: {
             include: { fileRequirements: true },