improved viewer tab

src/components/viewer-tab.tsx

@@ -15,6 +15,7 @@ import {
   SelectValue 
 } from "@/components/ui/select";
 import { Run as ForceGraphRun } from "@/components/reasoning-trace";
+import { Badge } from "@/components/ui/badge";
 
 const models = {
   "Qwen3-14B": q3Results,
@@ -29,6 +30,18 @@ interface Run {
   result: string;
 }
 
+// Interface for model statistics
+interface ModelStats {
+  winPercentage: number;
+  avgSteps: number;
+  stdDevSteps: number;
+  totalRuns: number;
+  wins: number;
+  medianSteps: number;
+  minSteps: number;
+  maxSteps: number;
+}
+
 export default function ViewerTab({
   handleTryRun,
 }: {
@@ -37,6 +50,7 @@ export default function ViewerTab({
   const [selectedRun, setSelectedRun] = useState<number | null>(null);
   const [runs, setRuns] = useState<Run[]>([]);
   const [selectedModel, setSelectedModel] = useState<string>("Qwen3-14B");
+  const [modelStats, setModelStats] = useState<ModelStats | null>(null);
 
   useEffect(() => {
     // Convert the model data to the format expected by RunsList
@@ -52,6 +66,45 @@ export default function ViewerTab({
       result: run.result
     }));
     setRuns(convertedRuns);
+
+    // Calculate model statistics
+    const winRuns = convertedRuns.filter(run => run.result === "win");
+    const totalRuns = convertedRuns.length;
+    const wins = winRuns.length;
+    const winPercentage = totalRuns > 0 ? (wins / totalRuns) * 100 : 0;
+    
+    // Calculate steps statistics for winning runs
+    const stepCounts = winRuns.map(run => run.steps.length);
+    const avgSteps = stepCounts.length > 0 
+      ? stepCounts.reduce((sum, count) => sum + count, 0) / stepCounts.length 
+      : 0;
+    
+    // Calculate standard deviation
+    const variance = stepCounts.length > 0
+      ? stepCounts.reduce((sum, count) => sum + Math.pow(count - avgSteps, 2), 0) / stepCounts.length
+      : 0;
+    const stdDevSteps = Math.sqrt(variance);
+
+    // Calculate median, min, max steps
+    const sortedSteps = [...stepCounts].sort((a, b) => a - b);
+    const medianSteps = stepCounts.length > 0
+      ? stepCounts.length % 2 === 0
+        ? (sortedSteps[stepCounts.length / 2 - 1] + sortedSteps[stepCounts.length / 2]) / 2
+        : sortedSteps[Math.floor(stepCounts.length / 2)]
+      : 0;
+    const minSteps = stepCounts.length > 0 ? Math.min(...stepCounts) : 0;
+    const maxSteps = stepCounts.length > 0 ? Math.max(...stepCounts) : 0;
+
+    setModelStats({
+      winPercentage,
+      avgSteps,
+      stdDevSteps,
+      totalRuns,
+      wins,
+      medianSteps,
+      minSteps,
+      maxSteps
+    });
   }, [selectedModel]);
 
   const handleRunSelect = (runId: number) => {
@@ -73,24 +126,54 @@ export default function ViewerTab({
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-12 gap-4 h-[calc(100vh-200px)] max-h-[calc(100vh-200px)] overflow-hidden p-2">
-     <Card className="p-2 col-span-12 h-12 row-start-1">
-      <div className="flex items-center justify-between h-full">
-        <h3 className="text-sm font-medium text-muted-foreground flex-shrink-0">
-          Models
-        </h3>
-        <Select value={selectedModel} onValueChange={setSelectedModel}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select model" />
-          </SelectTrigger>
-          <SelectContent>
-            {Object.keys(models).map((modelName) => (
-              <SelectItem key={modelName} value={modelName}>
-                {modelName}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+     <Card className="p-3 col-span-12 row-start-1">
+       <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+         <div className="flex-shrink-0">
+           <Select value={selectedModel} onValueChange={setSelectedModel}>
+             <SelectTrigger className="w-[180px]">
+               <SelectValue placeholder="Select model" />
+             </SelectTrigger>
+             <SelectContent>
+               {Object.keys(models).map((modelName) => (
+                 <SelectItem key={modelName} value={modelName}>
+                   {modelName}
+                 </SelectItem>
+               ))}
+             </SelectContent>
+           </Select>
+         </div>
+         
+         {modelStats && (
+           <div className="flex flex-wrap gap-1.5 items-center">
+             <Badge variant="outline" className="px-2 py-0.5 flex gap-1 items-center">
+               <span className="text-xs font-medium">Success:</span>
+               <span className="text-xs font-semibold">{modelStats.winPercentage.toFixed(1)}%</span>
+               <span className="text-xs text-muted-foreground">({modelStats.wins}/{modelStats.totalRuns})</span>
+             </Badge>
+             
+             <Badge variant="outline" className="px-2 py-0.5 flex gap-1 items-center">
+               <span className="text-xs font-medium">Mean:</span>
+               <span className="text-xs font-semibold">{modelStats.avgSteps.toFixed(1)}</span>
+               <span className="text-xs text-muted-foreground">±{modelStats.stdDevSteps.toFixed(1)}</span>
+             </Badge>
+             
+             <Badge variant="outline" className="px-2 py-0.5 flex gap-1 items-center">
+               <span className="text-xs font-medium">Median:</span>
+               <span className="text-xs font-semibold">{modelStats.medianSteps.toFixed(1)}</span>
+             </Badge>
+             
+             <Badge variant="outline" className="px-2 py-0.5 flex gap-1 items-center">
+               <span className="text-xs font-medium">Min:</span>
+               <span className="text-xs font-semibold">{modelStats.minSteps}</span>
+             </Badge>
+             
+             <Badge variant="outline" className="px-2 py-0.5 flex gap-1 items-center">
+               <span className="text-xs font-medium">Max:</span>
+               <span className="text-xs font-semibold">{modelStats.maxSteps}</span>
+             </Badge>
+           </div>
+         )}
+       </div>
      </Card>
       <div className="md:col-span-3 flex flex-col max-h-full overflow-hidden">
         <div className="bg-card rounded-lg p-3 border flex-grow overflow-hidden flex flex-col">