fixed some bugs

app/about/page.tsx

@@ -176,31 +176,6 @@ export default function AboutPage() {
             </Link>
           </CardContent>
         </Card>
-
-        {/* <Card>
-          <CardHeader>
-            <CardTitle>Technical Implementation</CardTitle>
-            <CardDescription>
-              Built with modern web technologies for performance and accessibility
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid gap-3 md:grid-cols-3">
-              <div className="text-center p-3 border rounded-lg">
-                <h4 className="font-semibold">Next.js 14</h4>
-                <p className="text-xs text-muted-foreground">React framework with SSR</p>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <h4 className="font-semibold">TypeScript</h4>
-                <p className="text-xs text-muted-foreground">Type-safe development</p>
-              </div>
-              <div className="text-center p-3 border rounded-lg">
-                <h4 className="font-semibold">Tailwind CSS</h4>
-                <p className="text-xs text-muted-foreground">Utility-first styling</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card> */}
       </div>
 
       <Separator className="my-8" />

app/evaluation/[id]/page.client.tsx

@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { ArrowLeft, Download, Eye, EyeOff, Info, Database, Globe, Calendar, User, Building, Cpu, MonitorSpeaker, Hash, Tags, Clock, Activity, Settings, Sun, Moon,
   // Section icons
-  Target, BarChart3, Shield, AlertTriangle, 
+  Target, BarChart3, Shield, AlertTriangle, ShieldAlert,
   // Capability icons
   MessageCircle, Heart, Brain, Lightbulb, BookOpen, Camera, Hand, Search, Bot,
   // Risk icons
@@ -102,6 +102,39 @@ export default function EvaluationDetailsPage() {
   const [expandedNegatives, setExpandedNegatives] = useState<Record<string, boolean>>({})
   const toggleNegatives = (key: string) => setExpandedNegatives((p) => ({ ...p, [key]: !p[key] }))
   const [visibleCategories, setVisibleCategories] = useState<Record<string, boolean>>({})
+  const [capabilitiesStatsExpanded, setCapabilitiesStatsExpanded] = useState(false)
+  const [risksStatsExpanded, setRisksStatsExpanded] = useState(false)
+
+  const exportReport = () => {
+    const reportData = {
+      systemName: evaluation.systemName,
+      provider: evaluation.provider,
+      version: evaluation.version,
+      evaluationDate: evaluation.evaluationDate,
+      exportDate: new Date().toISOString(),
+      url: evaluation.url,
+      inputModalities: evaluation.inputModalities,
+      outputModalities: evaluation.outputModalities,
+      deploymentContexts: evaluation.deploymentContexts,
+      knowledgeCutoff: evaluation.knowledgeCutoff,
+      modelType: evaluation.modelType,
+      completenessScore: Math.round((Object.keys(evaluation.categoryEvaluations || {}).length / getAllCategories().length) * 100),
+      overallStats: evaluation.overallStats,
+      categoryEvaluations: evaluation.categoryEvaluations,
+      processResponses: evaluation.processResponses,
+      evaluator: evaluation.evaluator
+    }
+
+    const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: "application/json" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `evaluation-report-${evaluation.systemName.replace(/[^a-zA-Z0-9]/g, '-')}-${new Date().toISOString().split("T")[0]}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+  const toggleCapabilitiesStats = () => setCapabilitiesStatsExpanded(prev => !prev)
+  const toggleRisksStats = () => setRisksStatsExpanded(prev => !prev)
   const toggleCategoryVisibility = (id: string) => setVisibleCategories((p) => ({ ...p, [id]: !p[id] }))
   const selectAll = () => {
   const map: Record<string, boolean> = {}
@@ -285,7 +318,7 @@ export default function EvaluationDetailsPage() {
               <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
               <span className="sr-only">Toggle theme</span>
             </Button>
-            <Button variant="outline" size="sm">
+            <Button variant="outline" size="sm" onClick={exportReport}>
               <Download className="h-4 w-4 mr-2" />
               Export Report
             </Button>
@@ -472,7 +505,39 @@ export default function EvaluationDetailsPage() {
               </div>
               <div className="flex-1">
                 <p className="text-sm font-medium text-muted-foreground">Completeness Score</p>
-                <p className="text-lg font-semibold text-foreground mt-1">{evaluation.overallStats?.completenessScore ? `${evaluation.overallStats.completenessScore}%` : "N/A"}</p>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <p className="text-lg font-semibold text-foreground mt-1 cursor-help">
+                      {evaluation.overallStats?.completenessScore ? `${evaluation.overallStats.completenessScore}%` : "N/A"}
+                    </p>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-sm">
+                    <div className="space-y-2 text-xs">
+                      <div className="font-semibold text-foreground">Weighted Average Formula:</div>
+                      <div className="bg-muted p-2 rounded border text-foreground">
+                        (Strong×4 + Adequate×3 + Weak×2 + Insufficient×1) ÷ (Total×4) × 100
+                      </div>
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
+                          <span className="text-foreground"><strong>Strong (4 pts):</strong> Most evals reported</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                          <span className="text-foreground"><strong>Adequate (3 pts):</strong> Many evals reported</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                          <span className="text-foreground"><strong>Weak (2 pts):</strong> Some evals reported</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+                          <span className="text-foreground"><strong>Insufficient (1 pt):</strong> Few evals reported</span>
+                        </div>
+                      </div>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
               </div>
             </div>
           </div>
@@ -658,74 +723,300 @@ export default function EvaluationDetailsPage() {
             Overall Statistics
           </CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="text-center p-4 bg-green-50 dark:bg-green-950 rounded-lg">
-              <div className="text-2xl font-bold text-green-700 dark:text-green-300">
-                {computedStats.strongCategories.length}
-              </div>
-              <div className="text-sm text-green-600 dark:text-green-400">Strong</div>
+        <CardContent className="space-y-8">
+          {/* Capabilities Section */}
+          <div>
+            <div 
+              className="cursor-pointer hover:bg-muted/50 transition-colors p-3 -m-3 rounded-lg mb-4"
+              onClick={toggleCapabilitiesStats}
+            >
+              <h3 className="flex items-center justify-between text-lg font-semibold">
+                <div className="flex items-center gap-2">
+                  <Brain className="h-4 w-4 text-blue-600" />
+                  Capabilities
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-normal text-muted-foreground">
+                    {capabilitiesStatsExpanded ? 'Hide details' : 'Show details'}
+                  </span>
+                  {capabilitiesStatsExpanded ? (
+                    <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </div>
+              </h3>
             </div>
-            <div className="text-center p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
-              <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">
-                {computedStats.adequateCategories.length}
+            
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center p-4 bg-green-50 dark:bg-green-950 rounded-lg">
+                <div className="text-2xl font-bold text-green-700 dark:text-green-300">
+                  {computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length}
+                </div>
+                <div className="text-sm text-green-600 dark:text-green-400">Strong</div>
+              </div>
+              <div className="text-center p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
+                <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">
+                  {computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length}
+                </div>
+                <div className="text-sm text-blue-600 dark:text-blue-400">Adequate</div>
+              </div>
+              <div className="text-center p-4 bg-yellow-50 dark:bg-yellow-950 rounded-lg">
+                <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">
+                  {computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length}
+                </div>
+                <div className="text-sm text-yellow-600 dark:text-yellow-400">Weak</div>
+              </div>
+              <div className="text-center p-4 bg-red-50 dark:bg-red-950 rounded-lg">
+                <div className="text-2xl font-bold text-red-700 dark:text-red-300">
+                  {computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length}
+                </div>
+                <div className="text-sm text-red-600 dark:text-red-400">Insufficient</div>
               </div>
-              <div className="text-sm text-blue-600 dark:text-blue-400">Adequate</div>
             </div>
-            <div className="text-center p-4 bg-yellow-50 dark:bg-yellow-950 rounded-lg">
-              <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">
-                {computedStats.weakCategories.length}
+            
+            {capabilitiesStatsExpanded && (
+              <div className="mt-6 space-y-6">
+                {/* Strong Capabilities */}
+                {computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-green-700 dark:text-green-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                      Strong ({computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-green-50 dark:bg-green-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-green-600 dark:text-green-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Adequate Capabilities */}
+                {computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-blue-700 dark:text-blue-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                      Adequate ({computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-blue-50 dark:bg-blue-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Weak Capabilities */}
+                {computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-yellow-700 dark:text-yellow-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+                      Weak ({computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-yellow-50 dark:bg-yellow-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Insufficient Capabilities */}
+                {computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-red-700 dark:text-red-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+                      Insufficient ({computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'capability').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-red-50 dark:bg-red-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-red-600 dark:text-red-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
               </div>
-              <div className="text-sm text-yellow-600 dark:text-yellow-400">Weak</div>
+            )}
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-muted"></div>
+
+          {/* Risks Section */}
+          <div>
+            <div 
+              className="cursor-pointer hover:bg-muted/50 transition-colors p-3 -m-3 rounded-lg mb-4"
+              onClick={toggleRisksStats}
+            >
+              <h3 className="flex items-center justify-between text-lg font-semibold">
+                <div className="flex items-center gap-2">
+                  <ShieldAlert className="h-4 w-4 text-red-600" />
+                  Risks
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-normal text-muted-foreground">
+                    {risksStatsExpanded ? 'Hide details' : 'Show details'}
+                  </span>
+                  {risksStatsExpanded ? (
+                    <ChevronUp className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </div>
+              </h3>
             </div>
-            <div className="text-center p-4 bg-red-50 dark:bg-red-950 rounded-lg">
-              <div className="text-2xl font-bold text-red-700 dark:text-red-300">
-                {computedStats.insufficientCategories.length}
+            
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center p-4 bg-green-50 dark:bg-green-950 rounded-lg">
+                <div className="text-2xl font-bold text-green-700 dark:text-green-300">
+                  {computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length}
+                </div>
+                <div className="text-sm text-green-600 dark:text-green-400">Strong</div>
+              </div>
+              <div className="text-center p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
+                <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">
+                  {computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length}
+                </div>
+                <div className="text-sm text-blue-600 dark:text-blue-400">Adequate</div>
+              </div>
+              <div className="text-center p-4 bg-yellow-50 dark:bg-yellow-950 rounded-lg">
+                <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">
+                  {computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length}
+                </div>
+                <div className="text-sm text-yellow-600 dark:text-yellow-400">Weak</div>
+              </div>
+              <div className="text-center p-4 bg-red-50 dark:bg-red-950 rounded-lg">
+                <div className="text-2xl font-bold text-red-700 dark:text-red-300">
+                  {computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length}
+                </div>
+                <div className="text-sm text-red-600 dark:text-red-400">Insufficient</div>
               </div>
-              <div className="text-sm text-red-600 dark:text-red-400">Insufficient</div>
             </div>
+            
+            {risksStatsExpanded && (
+              <div className="mt-6 space-y-6">
+                {/* Strong Risks */}
+                {computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-green-700 dark:text-green-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                      Strong ({computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.strongCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-green-50 dark:bg-green-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-green-600 dark:text-green-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Adequate Risks */}
+                {computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-blue-700 dark:text-blue-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                      Adequate ({computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.adequateCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-blue-50 dark:bg-blue-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Weak Risks */}
+                {computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-yellow-700 dark:text-yellow-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+                      Weak ({computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.weakCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-yellow-50 dark:bg-yellow-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* Insufficient Risks */}
+                {computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length > 0 && (
+                  <div>
+                    <h4 className="font-semibold text-red-700 dark:text-red-300 mb-3 flex items-center gap-2">
+                      <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+                      Insufficient ({computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {computedStats.insufficientCategories.filter((cat: string) => getCategoryById(cat)?.type === 'risk').map((catId: string) => {
+                        const category = getCategoryById(catId)
+                        const IconComponent = getCategoryIcon(catId)
+                        return (
+                          <div key={catId} className="flex items-center gap-3 p-2 bg-red-50 dark:bg-red-950/50 rounded">
+                            <IconComponent className="h-4 w-4 text-red-600 dark:text-red-400" />
+                            <span className="text-sm">{category?.name || catId}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </CardContent>
       </Card>
 
-      {/* Priority Areas (show only weak/insufficient like results) */}
-      {((evaluation.overallStats?.weakCategories || []).length > 0 || (evaluation.overallStats?.insufficientCategories || []).length > 0) && (
-        <Card className="mb-6">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-xl font-bold">
-              <AlertTriangle className="h-5 w-5 text-amber-600" />
-              Priority Areas
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {[...(evaluation.overallStats?.insufficientCategories || []), ...(evaluation.overallStats?.weakCategories || [])]
-                .filter(Boolean)
-                .map((catId: string) => {
-                  const category = getCategoryById(catId)
-                  return (
-                    <div key={catId} className="p-3 border rounded-md flex items-center justify-between">
-                      <div>
-                        <div className="font-medium flex items-center gap-2">
-                          {(() => {
-                            const IconComponent = getCategoryIcon(catId)
-                            return <IconComponent className="h-4 w-4 text-muted-foreground" />
-                          })()}
-                          {category?.name || catId}
-                        </div>
-                        <div className="text-xs text-muted-foreground ml-6">{category?.description}</div>
-                      </div>
-                      <Badge variant={evaluation.overallStats?.insufficientCategories?.includes(catId) ? "destructive" : "outline"}>
-                        {evaluation.overallStats?.insufficientCategories?.includes(catId) ? "insufficient" : "weak"}
-                      </Badge>
-                    </div>
-                  )
-                })}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
       {/* Evaluation Details */}
       {evaluation.categoryEvaluations &&
         Object.entries(evaluation.categoryEvaluations)

app/page.tsx

@@ -380,7 +380,7 @@ export default function HomePage() {
     loadData()
   }, [])
 
-  const [sortBy, setSortBy] = useState<"date-newest" | "date-oldest">("date-newest")
+  const [sortBy, setSortBy] = useState<"date-newest" | "date-oldest" | "completeness-highest" | "completeness-lowest">("date-newest")
   const [filterByProvider, setFilterByProvider] = useState<string>("all")
   const [filterByModality, setFilterByModality] = useState<string>("all")
 
@@ -390,12 +390,21 @@ export default function HomePage() {
   }, [evaluationsData])
 
   const uniqueModalities = useMemo(() => {
-    const modalities = new Set<string>()
+    // Define all possible modalities to ensure complete filter options
+    const allModalities = ["Text", "Image", "Audio", "Video", "Tabular", "Robotics/Action", "Other"]
+    
+    // Get modalities that actually exist in the data
+    const existingModalities = new Set<string>()
     evaluationsData.forEach((item) => {
-      item.inputModalities.forEach((mod) => modalities.add(mod))
-      item.outputModalities.forEach((mod) => modalities.add(mod))
+      item.inputModalities.forEach((mod) => existingModalities.add(mod))
+      item.outputModalities.forEach((mod) => existingModalities.add(mod))
     })
-    return [...modalities].sort()
+    
+    // Return all predefined modalities, with existing ones first, then missing ones
+    const existing = allModalities.filter(mod => existingModalities.has(mod)).sort()
+    const missing = allModalities.filter(mod => !existingModalities.has(mod)).sort()
+    
+    return [...existing, ...missing]
   }, [evaluationsData])
 
   const filteredAndSortedEvaluations = useMemo(() => {
@@ -413,13 +422,38 @@ export default function HomePage() {
     }
 
     filtered = [...filtered].sort((a, b) => {
-      const dateA = new Date(a.completedDate)
-      const dateB = new Date(b.completedDate)
-
-      if (sortBy === "date-newest") {
-        return dateB.getTime() - dateA.getTime()
+      if (sortBy === "completeness-highest" || sortBy === "completeness-lowest") {
+        // Calculate completeness scores for both items
+        const calculateCompletenessScore = (evaluation: EvaluationCardData) => {
+          const capTotal = evaluation.capabilityEval.strong + evaluation.capabilityEval.adequate + evaluation.capabilityEval.weak + evaluation.capabilityEval.insufficient
+          const riskTotal = evaluation.riskEval.strong + evaluation.riskEval.adequate + evaluation.riskEval.weak + evaluation.riskEval.insufficient
+          const totalItems = capTotal + riskTotal
+          
+          if (totalItems === 0) return 0
+          
+          const capScore = evaluation.capabilityEval.strong * 4 + evaluation.capabilityEval.adequate * 3 + evaluation.capabilityEval.weak * 2 + evaluation.capabilityEval.insufficient * 1
+          const riskScore = evaluation.riskEval.strong * 4 + evaluation.riskEval.adequate * 3 + evaluation.riskEval.weak * 2 + evaluation.riskEval.insufficient * 1
+          
+          return Math.round(((capScore + riskScore) / (totalItems * 4)) * 100)
+        }
+        
+        const scoreA = calculateCompletenessScore(a)
+        const scoreB = calculateCompletenessScore(b)
+        
+        if (sortBy === "completeness-highest") {
+          return scoreB - scoreA
+        } else {
+          return scoreA - scoreB
+        }
       } else {
-        return dateA.getTime() - dateB.getTime()
+        const dateA = new Date(a.completedDate)
+        const dateB = new Date(b.completedDate)
+
+        if (sortBy === "date-newest") {
+          return dateB.getTime() - dateA.getTime()
+        } else {
+          return dateA.getTime() - dateB.getTime()
+        }
       }
     })
 
@@ -497,13 +531,15 @@ export default function HomePage() {
             <div className="flex items-center gap-2">
               <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
               <span className="text-sm font-medium">Sort by:</span>
-              <Select value={sortBy} onValueChange={(value: "date-newest" | "date-oldest") => setSortBy(value)}>
-                <SelectTrigger className="w-40">
+              <Select value={sortBy} onValueChange={(value: "date-newest" | "date-oldest" | "completeness-highest" | "completeness-lowest") => setSortBy(value)}>
+                <SelectTrigger className="w-48">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="date-newest">Date (Newest)</SelectItem>
                   <SelectItem value="date-oldest">Date (Oldest)</SelectItem>
+                  <SelectItem value="completeness-highest">Completeness (Highest)</SelectItem>
+                  <SelectItem value="completeness-lowest">Completeness (Lowest)</SelectItem>
                 </SelectContent>
               </Select>
             </div>

components/evaluation-card.tsx

@@ -8,6 +8,7 @@ import { MoreHorizontal, Eye, Download, Trash2 } from "lucide-react"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useRouter } from "next/navigation"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { getAllCategories } from "@/lib/schema"
 
 export type EvaluationCardData = {
   id: string
@@ -68,6 +69,43 @@ export function EvaluationCard({ evaluation, onView, onDelete }: EvaluationCardP
   const [expandedAreas, setExpandedAreas] = useState<Record<string, boolean>>({})
   const toggleArea = (area: string) => setExpandedAreas((p) => ({ ...p, [area]: !p[area] }))
   const router = useRouter()
+  
+  const handleCardClick = () => {
+    router.push(`/evaluation/${evaluation.id}`)
+  }
+
+  const handleMenuClick = (e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent card click when clicking menu
+  }
+
+  const handleExport = (e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent card click when clicking export
+    
+    const reportData = {
+      id: evaluation.id,
+      systemName: evaluation.systemName,
+      provider: evaluation.provider,
+      completedDate: evaluation.completedDate,
+      exportDate: new Date().toISOString(),
+      inputModalities: evaluation.inputModalities,
+      outputModalities: evaluation.outputModalities,
+      completenessScore: Math.round((evaluation.completedCategories / evaluation.applicableCategories) * 100),
+      status: evaluation.status,
+      capabilityEvaluation: evaluation.capabilityEval,
+      riskEvaluation: evaluation.riskEval,
+      priorityAreas: evaluation.priorityAreas,
+      priorityDetails: evaluation.priorityDetails
+    }
+
+    const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: "application/json" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `evaluation-summary-${evaluation.systemName.replace(/[^a-zA-Z0-9]/g, '-')}-${new Date().toISOString().split("T")[0]}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
   const modalityMap: Record<string, { label: string; emoji?: string; variant?: string }> = {
     "Text": { label: "Text", emoji: "📝" },
     "Image": { label: "Image", emoji: "🖼️" },
@@ -171,12 +209,15 @@ export function EvaluationCard({ evaluation, onView, onDelete }: EvaluationCardP
 
   return (
     <TooltipProvider>
-      <Card className="hover:shadow-lg transition-shadow duration-200">
+      <Card 
+        className="hover:shadow-lg transition-all duration-200 cursor-pointer hover:border-primary/20 hover:shadow-primary/5"
+        onClick={handleCardClick}
+      >
         <CardHeader className="pb-3">
           <div className="flex items-start justify-between">
             <div className="space-y-1 flex-1 min-w-0">
-              <CardTitle className="text-lg font-heading truncate">{evaluation.systemName}</CardTitle>
-              <p className="text-sm text-muted-foreground truncate">{evaluation.provider}</p>
+              <CardTitle className="text-xl font-bold truncate">{evaluation.systemName}</CardTitle>
+              <p className="text-sm text-muted-foreground truncate font-medium">{evaluation.provider}</p>
               {/* Enhanced modality badge with emoji and hover detail */}
               {(() => {
                 const info = getModalityDisplay(evaluation.inputModalities, evaluation.outputModalities)
@@ -199,18 +240,19 @@ export function EvaluationCard({ evaluation, onView, onDelete }: EvaluationCardP
               })()}
             </div>
             <div className="flex items-center gap-2 flex-shrink-0">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                    <MoreHorizontal className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
+              <div onClick={handleMenuClick}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-muted">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem onClick={handleViewDetails}>
                     <Eye className="h-4 w-4 mr-2" />
                     View Details
                   </DropdownMenuItem>
-                  <DropdownMenuItem>
+                  <DropdownMenuItem onClick={handleExport}>
                     <Download className="h-4 w-4 mr-2" />
                     Export Report
                   </DropdownMenuItem>
@@ -220,265 +262,165 @@ export function EvaluationCard({ evaluation, onView, onDelete }: EvaluationCardP
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
+              </div>
             </div>
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
+          {/* Top row: Key metrics */}
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-1">
               <span className="text-sm text-muted-foreground font-medium">Completeness</span>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div
-                    className={`px-2 py-1 rounded text-sm font-semibold cursor-help ${getCompletenessColor(completenessScore)}`}
-                  >
-                    {completenessScore}%
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent className="max-w-xs">
-                  <p className="text-xs">
-                    Weighted average: (Strong×4 + Adequate×3 + Weak×2 + Insufficient×1) ÷ (Total×4) × 100
-                    <br />
-                    Capability: {evaluation.capabilityEval.totalApplicable} categories
-                    <br />
-                    Risk: {evaluation.riskEval.totalApplicable} categories
-                  </p>
-                </TooltipContent>
-              </Tooltip>
+              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all duration-300 flex items-center justify-center text-xs font-bold text-white ${getCompletenessColor(completenessScore)}`}
+                  style={{ width: `${Math.max(completenessScore, 8)}%` }}
+                >
+                  {completenessScore}%
+                </div>
+              </div>
             </div>
             <div className="space-y-1">
-              <span className="text-sm text-muted-foreground font-medium">Date</span>
+              <span className="text-sm text-muted-foreground font-medium">Submitted</span>
               <p className="text-sm font-semibold">{evaluation.completedDate}</p>
             </div>
           </div>
 
+          {/* Quick summary stats */}
           <div className="space-y-3">
-            <div className="space-y-2">
-              <p className="text-sm text-muted-foreground">
-                Capability Eval ({evaluation.capabilityEval.totalApplicable} applicable)
-              </p>
-              <div className="grid grid-cols-4 gap-4 text-xs items-end">
-                {/* Vertical histogram bars for Capability */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-emerald-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.capabilityEval.strong / Math.max(1, capTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground font-medium">Capability Eval</span>
+                  <span className="text-xs text-muted-foreground">({evaluation.capabilityEval.totalApplicable} applicable)</span>
+                </div>
+                <div className="flex gap-1">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-emerald-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.capabilityEval.strong > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.capabilityEval.strong
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-emerald-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Strong:</strong> {evaluation.capabilityEval.strong} categories - Most evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Strong</div>
-                      <p className="font-medium">{evaluation.capabilityEval.strong}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.capabilityEval.strongCategories.length > 0
-                        ? evaluation.capabilityEval.strongCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-blue-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.capabilityEval.adequate / Math.max(1, capTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-blue-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.capabilityEval.adequate > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.capabilityEval.adequate
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Adequate:</strong> {evaluation.capabilityEval.adequate} categories - Many evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Adequate</div>
-                      <p className="font-medium">{evaluation.capabilityEval.adequate}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.capabilityEval.adequateCategories.length > 0
-                        ? evaluation.capabilityEval.adequateCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-amber-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.capabilityEval.weak / Math.max(1, capTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-yellow-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.capabilityEval.weak > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.capabilityEval.weak
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Weak:</strong> {evaluation.capabilityEval.weak} categories - Some evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Weak</div>
-                      <p className="font-medium">{evaluation.capabilityEval.weak}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.capabilityEval.weakCategories.length > 0
-                        ? evaluation.capabilityEval.weakCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-red-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.capabilityEval.insufficient / Math.max(1, capTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-red-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.capabilityEval.insufficient > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.capabilityEval.insufficient
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Insufficient:</strong> {evaluation.capabilityEval.insufficient} categories - Few evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Insufficient</div>
-                      <p className="font-medium">{evaluation.capabilityEval.insufficient}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.capabilityEval.insufficientCategories.length > 0
-                        ? evaluation.capabilityEval.insufficientCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
               </div>
-            </div>
 
-            <div className="space-y-2">
-              <p className="text-sm text-muted-foreground">
-                Risk Eval ({evaluation.riskEval.totalApplicable} applicable)
-              </p>
-              <div className="grid grid-cols-4 gap-4 text-xs items-end">
-                {/* Vertical histogram bars for Risk */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-emerald-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.riskEval.strong / Math.max(1, riskTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground font-medium">Risk Eval</span>
+                  <span className="text-xs text-muted-foreground">({evaluation.riskEval.totalApplicable} applicable)</span>
+                </div>
+                <div className="flex gap-1">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-emerald-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.riskEval.strong > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.riskEval.strong
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-emerald-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Strong:</strong> {evaluation.riskEval.strong} categories - Most evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Strong</div>
-                      <p className="font-medium">{evaluation.riskEval.strong}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.riskEval.strongCategories.length > 0
-                        ? evaluation.riskEval.strongCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-blue-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.riskEval.adequate / Math.max(1, riskTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-blue-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.riskEval.adequate > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.riskEval.adequate
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Adequate:</strong> {evaluation.riskEval.adequate} categories - Many evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Adequate</div>
-                      <p className="font-medium">{evaluation.riskEval.adequate}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.riskEval.adequateCategories.length > 0
-                        ? evaluation.riskEval.adequateCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-amber-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.riskEval.weak / Math.max(1, riskTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-yellow-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.riskEval.weak > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.riskEval.weak
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Weak:</strong> {evaluation.riskEval.weak} categories - Some evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Weak</div>
-                      <p className="font-medium">{evaluation.riskEval.weak}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.riskEval.weakCategories.length > 0
-                        ? evaluation.riskEval.weakCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="text-center cursor-help">
-                      <div className="w-full h-20 flex items-end justify-center mb-2">
-                        <div
-                          className="w-full rounded-t-md bg-red-500"
-                          style={{
-                            height: `${Math.round(
-                              (evaluation.riskEval.insufficient / Math.max(1, riskTotalComputed)) * 100
-                            )}%`,
-                          }}
-                        />
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex-1 h-2 bg-red-500 rounded-full cursor-help" style={{
+                        opacity: evaluation.riskEval.insufficient > 0 ? 1 : 0.2,
+                        flexGrow: evaluation.riskEval.insufficient
+                      }} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+                        <span className="text-xs"><strong>Insufficient:</strong> {evaluation.riskEval.insufficient} categories - Few evals reported</span>
                       </div>
-                      <div className="text-[10px] text-muted-foreground uppercase tracking-wide mb-1">Insufficient</div>
-                      <p className="font-medium">{evaluation.riskEval.insufficient}</p>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-xs">
-                      {evaluation.riskEval.insufficientCategories.length > 0
-                        ? evaluation.riskEval.insufficientCategories.join(", ")
-                        : "No categories"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
               </div>
             </div>
           </div>
         </CardContent>
-  {/* priorityAreas/details intentionally removed from summary card — shown on details page */}
       </Card>
     </TooltipProvider>
   )