Optimize AI system with batching, token tracking, and GDPR compliance

- Add AIUsageLog model for persistent token/cost tracking
- Implement batched processing for all AI services:
  - Assignment: 15 projects/batch
  - Filtering: 20 projects/batch
  - Award eligibility: 20 projects/batch
  - Mentor matching: 15 projects/batch
- Create unified error classification (ai-errors.ts)
- Enhance anonymization with comprehensive project data
- Add AI usage dashboard to Settings page
- Add usage stats endpoints to settings router
- Create AI system documentation (5 files)
- Create GDPR compliance documentation (2 files)

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

src/components/settings/ai-usage-card.tsx

@@ -0,0 +1,294 @@
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Badge } from '@/components/ui/badge'
+import {
+  Coins,
+  Zap,
+  TrendingUp,
+  Activity,
+  Brain,
+  Filter,
+  Users,
+  Award,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const ACTION_ICONS: Record<string, typeof Zap> = {
+  ASSIGNMENT: Users,
+  FILTERING: Filter,
+  AWARD_ELIGIBILITY: Award,
+  MENTOR_MATCHING: Brain,
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  ASSIGNMENT: 'Jury Assignment',
+  FILTERING: 'Project Filtering',
+  AWARD_ELIGIBILITY: 'Award Eligibility',
+  MENTOR_MATCHING: 'Mentor Matching',
+}
+
+function StatCard({
+  label,
+  value,
+  subValue,
+  icon: Icon,
+  trend,
+}: {
+  label: string
+  value: string
+  subValue?: string
+  icon: typeof Zap
+  trend?: 'up' | 'down' | 'neutral'
+}) {
+  return (
+    <div className="flex items-start gap-3 rounded-lg border bg-card p-4">
+      <div className="rounded-md bg-muted p-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </div>
+      <div className="flex-1 space-y-1">
+        <p className="text-sm font-medium text-muted-foreground">{label}</p>
+        <div className="flex items-baseline gap-2">
+          <p className="text-2xl font-bold">{value}</p>
+          {trend && trend !== 'neutral' && (
+            <TrendingUp
+              className={cn(
+                'h-4 w-4',
+                trend === 'up' ? 'text-green-500' : 'rotate-180 text-red-500'
+              )}
+            />
+          )}
+        </div>
+        {subValue && (
+          <p className="text-xs text-muted-foreground">{subValue}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function UsageBar({
+  label,
+  value,
+  maxValue,
+  color,
+}: {
+  label: string
+  value: number
+  maxValue: number
+  color: string
+}) {
+  const percentage = maxValue > 0 ? (value / maxValue) * 100 : 0
+
+  return (
+    <div className="space-y-1">
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="font-medium">{value.toLocaleString()}</span>
+      </div>
+      <div className="h-2 overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn('h-full transition-all duration-500', color)}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function AIUsageCard() {
+  const {
+    data: monthCost,
+    isLoading: monthLoading,
+  } = trpc.settings.getAICurrentMonthCost.useQuery(undefined, {
+    staleTime: 60 * 1000, // 1 minute
+  })
+
+  const {
+    data: stats,
+    isLoading: statsLoading,
+  } = trpc.settings.getAIUsageStats.useQuery({}, {
+    staleTime: 60 * 1000,
+  })
+
+  const {
+    data: history,
+    isLoading: historyLoading,
+  } = trpc.settings.getAIUsageHistory.useQuery({ days: 30 }, {
+    staleTime: 60 * 1000,
+  })
+
+  const isLoading = monthLoading || statsLoading
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Activity className="h-5 w-5" />
+            AI Usage & Costs
+          </CardTitle>
+          <CardDescription>Loading usage data...</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Skeleton className="h-24" />
+            <Skeleton className="h-24" />
+          </div>
+          <Skeleton className="h-32" />
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const hasUsage = monthCost && monthCost.requestCount > 0
+  const maxTokensByAction = stats?.byAction
+    ? Math.max(...Object.values(stats.byAction).map((a) => a.tokens))
+    : 0
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Activity className="h-5 w-5" />
+          AI Usage & Costs
+        </CardTitle>
+        <CardDescription>
+          Token usage and estimated costs for AI features
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Current month summary */}
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <StatCard
+            label="This Month Cost"
+            value={monthCost?.costFormatted || '$0.00'}
+            subValue={`${monthCost?.requestCount || 0} requests`}
+            icon={Coins}
+          />
+          <StatCard
+            label="Tokens Used"
+            value={monthCost?.tokens?.toLocaleString() || '0'}
+            subValue="This month"
+            icon={Zap}
+          />
+          {stats && (
+            <StatCard
+              label="All-Time Cost"
+              value={stats.totalCostFormatted || '$0.00'}
+              subValue={`${stats.totalTokens?.toLocaleString() || 0} tokens`}
+              icon={TrendingUp}
+            />
+          )}
+        </div>
+
+        {/* Usage by action */}
+        {hasUsage && stats?.byAction && Object.keys(stats.byAction).length > 0 && (
+          <div className="space-y-4">
+            <h4 className="text-sm font-semibold">Usage by Feature</h4>
+            <div className="space-y-3">
+              {Object.entries(stats.byAction)
+                .sort(([, a], [, b]) => b.tokens - a.tokens)
+                .map(([action, data]) => {
+                  const Icon = ACTION_ICONS[action] || Zap
+                  return (
+                    <div key={action} className="flex items-center gap-3">
+                      <div className="rounded-md bg-muted p-1.5">
+                        <Icon className="h-3.5 w-3.5 text-muted-foreground" />
+                      </div>
+                      <div className="flex-1">
+                        <UsageBar
+                          label={ACTION_LABELS[action] || action}
+                          value={data.tokens}
+                          maxValue={maxTokensByAction}
+                          color="bg-primary"
+                        />
+                      </div>
+                      <Badge variant="secondary" className="ml-2 text-xs">
+                        {(data as { costFormatted?: string }).costFormatted}
+                      </Badge>
+                    </div>
+                  )
+                })}
+            </div>
+          </div>
+        )}
+
+        {/* Usage by model */}
+        {hasUsage && stats?.byModel && Object.keys(stats.byModel).length > 0 && (
+          <div className="space-y-4">
+            <h4 className="text-sm font-semibold">Usage by Model</h4>
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(stats.byModel)
+                .sort(([, a], [, b]) => b.cost - a.cost)
+                .map(([model, data]) => (
+                  <Badge
+                    key={model}
+                    variant="outline"
+                    className="flex items-center gap-2"
+                  >
+                    <Brain className="h-3 w-3" />
+                    <span>{model}</span>
+                    <span className="text-muted-foreground">
+                      {(data as { costFormatted?: string }).costFormatted}
+                    </span>
+                  </Badge>
+                ))}
+            </div>
+          </div>
+        )}
+
+        {/* Usage history mini chart */}
+        {hasUsage && history && history.length > 0 && (
+          <div className="space-y-4">
+            <h4 className="text-sm font-semibold">Last 30 Days</h4>
+            <div className="flex h-16 items-end gap-0.5">
+              {(() => {
+                const maxCost = Math.max(...history.map((d) => d.cost), 0.001)
+                return history.slice(-30).map((day, i) => {
+                  const height = (day.cost / maxCost) * 100
+                  return (
+                    <div
+                      key={day.date}
+                      className="group relative flex-1 cursor-pointer"
+                      title={`${day.date}: ${day.costFormatted}`}
+                    >
+                      <div
+                        className="w-full rounded-t bg-primary/60 transition-colors hover:bg-primary"
+                        style={{ height: `${Math.max(height, 4)}%` }}
+                      />
+                    </div>
+                  )
+                })
+              })()}
+            </div>
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>{history[0]?.date}</span>
+              <span>{history[history.length - 1]?.date}</span>
+            </div>
+          </div>
+        )}
+
+        {/* No usage message */}
+        {!hasUsage && (
+          <div className="rounded-lg border border-dashed p-8 text-center">
+            <Activity className="mx-auto h-8 w-8 text-muted-foreground" />
+            <h4 className="mt-2 text-sm font-semibold">No AI usage yet</h4>
+            <p className="mt-1 text-sm text-muted-foreground">
+              AI usage will be tracked when you use filtering, assignments, or
+              other AI-powered features.
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/settings/settings-content.tsx

@@ -19,6 +19,7 @@ import {
   Settings as SettingsIcon,
 } from 'lucide-react'
 import { AISettingsForm } from './ai-settings-form'
+import { AIUsageCard } from './ai-usage-card'
 import { BrandingSettingsForm } from './branding-settings-form'
 import { EmailSettingsForm } from './email-settings-form'
 import { StorageSettingsForm } from './storage-settings-form'
@@ -134,7 +135,7 @@ export function SettingsContent({ initialSettings }: SettingsContentProps) {
         </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="ai">
+      <TabsContent value="ai" className="space-y-6">
         <Card>
           <CardHeader>
             <CardTitle>AI Configuration</CardTitle>
@@ -146,6 +147,7 @@ export function SettingsContent({ initialSettings }: SettingsContentProps) {
             <AISettingsForm settings={aiSettings} />
           </CardContent>
         </Card>
+        <AIUsageCard />
       </TabsContent>
 
       <TabsContent value="branding">