AI-powered assignment generation with enriched data and streaming UI

- Add aiPreview mutation with full project/juror data (bios, descriptions,
  documents, categories, ocean issues, countries, team sizes)
- Increase AI description limit from 300 to 2000 chars for richer context
- Update GPT system prompt to use all available data fields
- Add mode toggle (AI default / Algorithm fallback) in assignment preview
- Lift AI mutation to parent page for background generation persistence
- Show visual indicator on page while AI generates (spinner + progress card)
- Toast notification with "Review" action when AI completes
- Staggered reveal animation for assignment results (streaming feel)
- Fix assignment balance with dynamic penalty (25pts per existing assignment)

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

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

@@ -1,18 +1,19 @@
 'use client'
 
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
 import {
   AlertTriangle,
-  Bot,
   CheckCircle2,
   ChevronDown,
   ChevronRight,
+  Cpu,
   Loader2,
   Plus,
   Sparkles,
   Tag,
   User,
   X,
+  Zap,
 } from 'lucide-react'
 import { toast } from 'sonner'
 import { trpc } from '@/lib/trpc/client'
@@ -49,6 +50,8 @@ import {
 } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 
+type AssignmentMode = 'ai' | 'algorithm'
+
 type EditableAssignment = {
   localId: string
   userId: string
@@ -63,11 +66,27 @@ type EditableAssignment = {
   isManual: boolean
 }
 
+type AIPreviewData = {
+  assignments: any[]
+  warnings: string[]
+  stats: { totalProjects: number; totalJurors: number; assignmentsGenerated: number; unassignedProjects: number }
+  fallbackUsed?: boolean
+  tokensUsed?: number
+}
+
 type AssignmentPreviewSheetProps = {
   roundId: string
   open: boolean
   onOpenChange: (open: boolean) => void
   requiredReviews?: number
+  /** AI preview result from parent (lifted mutation) */
+  aiResult?: AIPreviewData | null
+  /** Whether AI is currently generating */
+  isAIGenerating?: boolean
+  /** Trigger AI generation from parent */
+  onGenerateAI?: () => void
+  /** Reset AI results */
+  onResetAI?: () => void
 }
 
 export function AssignmentPreviewSheet({
@@ -75,25 +94,38 @@ export function AssignmentPreviewSheet({
   open,
   onOpenChange,
   requiredReviews = 3,
+  aiResult,
+  isAIGenerating = false,
+  onGenerateAI,
+  onResetAI,
 }: AssignmentPreviewSheetProps) {
   const utils = trpc.useUtils()
 
+  const [mode, setMode] = useState<AssignmentMode>('ai')
   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>('')
+  // Track staggered reveal for streaming effect
+  const [visibleCount, setVisibleCount] = useState(0)
+  const staggerTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // ── Queries ──────────────────────────────────────────────────────────────
+
+  // Algorithm mode query (only runs when algorithm mode is selected)
   const {
-    data: preview,
-    isLoading,
-    refetch,
+    data: algoPreview,
+    isLoading: isAlgoLoading,
   } = trpc.roundAssignment.preview.useQuery(
     { roundId, honorIntents: true, requiredReviews },
-    { enabled: open },
+    { enabled: open && mode === 'algorithm' },
   )
 
+  // Active preview data based on mode
+  const preview = mode === 'ai' ? aiResult : algoPreview
+  const isLoading = mode === 'ai' ? isAIGenerating : isAlgoLoading
+
   // Fetch round data for jury group members
   const { data: round } = trpc.round.getById.useQuery(
     { id: roundId },
@@ -127,12 +159,12 @@ export function AssignmentPreviewSheet({
       },
     })
 
-  // ── Initialize local state from preview ──────────────────────────────────
+  // ── Initialize local state from preview with staggered reveal ──────────
   useEffect(() => {
     if (preview && !initialized) {
       const mapped: EditableAssignment[] = preview.assignments.map(
         (a: any, idx: number) => ({
-          localId: `ai-${idx}`,
+          localId: `${mode}-${idx}`,
           userId: a.userId,
           userName: a.userName,
           projectId: a.projectId,
@@ -146,14 +178,36 @@ export function AssignmentPreviewSheet({
         }),
       )
       setAssignments(mapped)
+
       // Auto-expand all jurors
       const jurorIds = new Set(mapped.map((a) => a.userId))
       setExpandedJurors(jurorIds)
       setInitialized(true)
-    }
-  }, [preview, initialized])
 
-  // Reset when sheet closes
+      // Staggered reveal: show assignments one by one
+      setVisibleCount(0)
+      const totalGroups = new Set(mapped.map((a) => a.userId)).size
+      let count = 0
+      const reveal = () => {
+        count++
+        setVisibleCount(count)
+        if (count < totalGroups) {
+          staggerTimerRef.current = setTimeout(reveal, 150)
+        }
+      }
+      // Start after a small delay for visual effect
+      staggerTimerRef.current = setTimeout(reveal, 100)
+    }
+  }, [preview, initialized, mode])
+
+  // Cleanup stagger timer
+  useEffect(() => {
+    return () => {
+      if (staggerTimerRef.current) clearTimeout(staggerTimerRef.current)
+    }
+  }, [])
+
+  // Reset when sheet closes (but preserve AI results in parent)
   useEffect(() => {
     if (!open) {
       setInitialized(false)
@@ -161,9 +215,21 @@ export function AssignmentPreviewSheet({
       setExpandedJurors(new Set())
       setAddJurorId('')
       setAddProjectId('')
+      setVisibleCount(0)
+      if (staggerTimerRef.current) clearTimeout(staggerTimerRef.current)
     }
   }, [open])
 
+  // Reset assignments when mode changes
+  const handleModeChange = (newMode: AssignmentMode) => {
+    if (newMode === mode) return
+    setMode(newMode)
+    setInitialized(false)
+    setAssignments([])
+    setExpandedJurors(new Set())
+    setVisibleCount(0)
+  }
+
   // ── Derived data ─────────────────────────────────────────────────────────
   const juryMembers = useMemo(() => {
     if (!round?.juryGroup?.members) return []
@@ -271,8 +337,9 @@ export function AssignmentPreviewSheet({
       },
     ])
 
-    // Expand the juror's section
+    // Expand the juror's section and make visible
     setExpandedJurors((prev) => new Set([...prev, addJurorId]))
+    setVisibleCount((prev) => Math.max(prev, groupedByJuror.length + 1))
     setAddProjectId('')
   }
 
@@ -329,25 +396,139 @@ export function AssignmentPreviewSheet({
       <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 and fine-tune before executing.
+          <SheetDescription className="text-sm">
+            Review and fine-tune assignments before executing.
           </SheetDescription>
+
+          {/* Mode toggle */}
+          <div className="flex items-center gap-1 mt-2 p-1 rounded-lg bg-muted/50 w-fit">
+            <button
+              type="button"
+              onClick={() => handleModeChange('ai')}
+              className={cn(
+                'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all',
+                mode === 'ai'
+                  ? 'bg-background shadow-sm text-foreground'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+            >
+              <Sparkles className="h-3.5 w-3.5" />
+              AI (GPT)
+            </button>
+            <button
+              type="button"
+              onClick={() => handleModeChange('algorithm')}
+              className={cn(
+                'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all',
+                mode === 'algorithm'
+                  ? 'bg-background shadow-sm text-foreground'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+            >
+              <Cpu className="h-3.5 w-3.5" />
+              Algorithm
+            </button>
+          </div>
         </SheetHeader>
 
         <ScrollArea className="flex-1 min-h-0">
           <div className="px-6 py-4 space-y-4">
+            {/* AI mode: show generate button if no results yet */}
+            {mode === 'ai' && !aiResult && !isAIGenerating && (
+              <Card className="border-dashed">
+                <CardContent className="flex flex-col items-center justify-center py-8 gap-3">
+                  <div className="h-12 w-12 rounded-full bg-violet-100 dark:bg-violet-950 flex items-center justify-center">
+                    <Sparkles className="h-6 w-6 text-violet-600" />
+                  </div>
+                  <div className="text-center space-y-1">
+                    <p className="font-medium text-sm">AI-Powered Assignments</p>
+                    <p className="text-xs text-muted-foreground max-w-xs">
+                      Uses GPT to analyze juror expertise, bios, project descriptions,
+                      and documents to generate optimal assignments.
+                    </p>
+                  </div>
+                  <Button
+                    onClick={onGenerateAI}
+                    className="gap-2 bg-violet-600 hover:bg-violet-700"
+                    disabled={!onGenerateAI}
+                  >
+                    <Zap className="h-4 w-4" />
+                    Generate with AI
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Loading state */}
             {isLoading ? (
               <div className="space-y-3">
+                {mode === 'ai' && (
+                  <Card className="border-violet-200 bg-violet-50/50 dark:bg-violet-950/20">
+                    <CardContent className="flex items-center gap-3 py-4">
+                      <div className="relative">
+                        <div className="h-6 w-6 rounded-full border-2 border-violet-300 border-t-violet-600 animate-spin" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium">Generating AI assignments...</p>
+                        <p className="text-xs text-muted-foreground">
+                          Analyzing juror expertise and project data with GPT
+                        </p>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
                 {[1, 2, 3, 4].map((i) => (
                   <Skeleton key={i} className="h-16 w-full" />
                 ))}
               </div>
             ) : preview ? (
               <>
+                {/* AI metadata */}
+                {mode === 'ai' && aiResult && (
+                  <div className="flex flex-wrap items-center gap-2 text-xs">
+                    <Badge variant="outline" className="gap-1 text-violet-600 border-violet-300">
+                      <Sparkles className="h-3 w-3" />
+                      AI Generated
+                    </Badge>
+                    {aiResult.fallbackUsed && (
+                      <Badge variant="outline" className="gap-1 text-amber-600 border-amber-300">
+                        <AlertTriangle className="h-3 w-3" />
+                        Fallback algorithm used
+                      </Badge>
+                    )}
+                    {(aiResult.tokensUsed ?? 0) > 0 && (
+                      <span className="text-muted-foreground">
+                        {aiResult.tokensUsed?.toLocaleString()} tokens used
+                      </span>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 px-2 text-xs"
+                      onClick={() => {
+                        setInitialized(false)
+                        setAssignments([])
+                        setVisibleCount(0)
+                        onGenerateAI?.()
+                      }}
+                    >
+                      Regenerate
+                    </Button>
+                  </div>
+                )}
+
+                {mode === 'algorithm' && (
+                  <div className="flex items-center gap-2 text-xs">
+                    <Badge variant="outline" className="gap-1">
+                      <Cpu className="h-3 w-3" />
+                      Algorithm
+                    </Badge>
+                    <span className="text-muted-foreground">
+                      Tag overlap + bio match + workload balancing
+                    </span>
+                  </div>
+                )}
+
                 {/* ── Summary stats ── */}
                 <div className="grid grid-cols-4 gap-2">
                   {[
@@ -402,7 +583,7 @@ export function AssignmentPreviewSheet({
                   </Card>
                 )}
 
-                {/* ── Juror groups ── */}
+                {/* ── Juror groups with staggered reveal ── */}
                 <div className="space-y-2">
                   <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     Assignments by Juror
@@ -414,19 +595,28 @@ export function AssignmentPreviewSheet({
                       </CardContent>
                     </Card>
                   ) : (
-                    groupedByJuror.map((group) => (
-                      <JurorGroup
+                    groupedByJuror.map((group, index) => (
+                      <div
                         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}
-                      />
+                        className={cn(
+                          'transition-all duration-300',
+                          index < visibleCount
+                            ? 'opacity-100 translate-y-0'
+                            : 'opacity-0 translate-y-2 pointer-events-none h-0 overflow-hidden',
+                        )}
+                      >
+                        <JurorGroup
+                          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>
                     ))
                   )}
                 </div>
@@ -504,11 +694,11 @@ export function AssignmentPreviewSheet({
                   </CardContent>
                 </Card>
               </>
-            ) : (
+            ) : mode === 'algorithm' ? (
               <p className="text-sm text-muted-foreground">
                 No preview data available
               </p>
-            )}
+            ) : null}
           </div>
         </ScrollArea>
 
@@ -561,7 +751,6 @@ function JurorGroup({
   onRemove,
   onAddProject,
   availableProjects,
-  requiredReviews,
 }: JurorGroupProps) {
   const [inlineProjectId, setInlineProjectId] = useState('')
 
@@ -571,8 +760,6 @@ function JurorGroup({
     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(