@tyvm/knowhow 0.0.89 → 0.0.91

package/leaderboard/app/details/[model]/[provider]/[language]/page.tsx

@@ -1,501 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { BenchmarkResults, ExerciseResult } from "@/types/benchmark";
-import {
-  formatCurrency,
-  formatTime,
-  formatPercentage,
-} from "@/utils/dataProcessor";
-
-interface HistoricalRun {
-  endTime: string;
-  successRate: number;
-  totalExercises: number;
-  totalCost: number;
-  averageTime: number;
-  averageTurns: number;
-  commitHash: string;
-  averageCost: number;
-}
-
-interface DetailResponse {
-  latest: BenchmarkResults;
-  history: HistoricalRun[];
-  totalRuns: number;
-}
-
-export default function ModelDetailPage() {
-  const params = useParams();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [detailData, setDetailData] = useState<DetailResponse | null>(
-    null
-  );
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const model = decodeURIComponent(params.model as string);
-  const provider = decodeURIComponent(params.provider as string);
-  const language = decodeURIComponent(params.language as string);
-  const timestamp = searchParams.get('timestamp');
-
-  useEffect(() => {
-    async function fetchDetailData() {
-      try {
-        const response = await fetch(
-          `/api/benchmark-detail?model=${encodeURIComponent(
-            model
-          )}&provider=${encodeURIComponent(
-            provider
-          )}&language=${encodeURIComponent(language)}${
-            timestamp ? `&timestamp=${timestamp}` : ''
-          }`
-        );
-        if (!response.ok) {
-          throw new Error("Failed to fetch benchmark details");
-        }
-        const data = await response.json();
-        setDetailData(data);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "An error occurred");
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchDetailData();
-  }, [model, provider, language, timestamp]);
-
-  const loadHistoricalRun = async (timestamp: string) => {
-    // Navigate to the same page but with timestamp parameter
-    router.push(`/details/${encodeURIComponent(model)}/${encodeURIComponent(provider)}/${encodeURIComponent(language)}?timestamp=${timestamp}`);
-  };
-
-  const backToLatestRun = () => {
-    // Navigate to the same page without timestamp parameter
-    router.push(`/details/${encodeURIComponent(model)}/${encodeURIComponent(provider)}/${encodeURIComponent(language)}`);
-  };
-
-  const getStatusBadge = (status: string) => {
-    const baseClasses = "px-2 py-1 text-xs font-medium rounded-full";
-    switch (status) {
-      case "success":
-        return `${baseClasses} bg-green-100 text-green-800`;
-      case "failure":
-        return `${baseClasses} bg-red-100 text-red-800`;
-      case "timeout":
-        return `${baseClasses} bg-yellow-100 text-yellow-800`;
-      case "cost_limit":
-        return `${baseClasses} bg-orange-100 text-orange-800`;
-      case "turn_limit":
-        return `${baseClasses} bg-purple-100 text-purple-800`;
-      default:
-        return `${baseClasses} bg-gray-100 text-gray-800`;
-    }
-  };
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "success":
-        return "✅";
-      case "failure":
-        return "❌";
-      case "timeout":
-        return "⏰";
-      case "cost_limit":
-        return "💰";
-      case "turn_limit":
-        return "🔄";
-      default:
-        return "❓";
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading benchmark details...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error || !detailData) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center">
-          <div className="text-red-500 text-6xl mb-4">⚠️</div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
-            Error Loading Details
-          </h3>
-          <p className="text-gray-500 mb-4">
-            {error || "Benchmark data not found"}
-          </p>
-          <button
-            onClick={() => router.back()}
-            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md"
-          >
-            Go Back
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Extract the latest benchmark data for display
-  const benchmarkData = detailData.latest;
-  const isHistoricalView = timestamp !== null;
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Header */}
-        <div className="mb-8">
-          <button
-            onClick={() => router.push("/")}
-            className="mb-4 text-blue-600 hover:text-blue-800 flex items-center"
-          >
-            ← Back to Leaderboard
-          </button>
-          <h1 className="text-3xl font-bold text-gray-900">
-            Benchmark Details: {model}
-          </h1>
-          <p className="mt-2 text-gray-600">
-            Provider: {provider} • Language: {language}
-          </p>
-          {isHistoricalView && (
-            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
-              <p className="text-blue-800 text-sm">
-                Viewing historical run from {new Date(benchmarkData.endTime).toLocaleString()}
-              </p>
-              <button
-                onClick={backToLatestRun}
-                className="mt-2 text-blue-600 hover:text-blue-800 text-sm underline"
-              >
-                ← Back to latest run
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* Summary Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <div className="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
-                  <span className="text-white font-bold">%</span>
-                </div>
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">
-                  Success Rate
-                </p>
-                <p className="text-2xl font-semibold text-gray-900">
-                  {formatPercentage(benchmarkData.summary.successRate * 100)}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <div className="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
-                  <span className="text-white font-bold">E</span>
-                </div>
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">
-                  Total Exercises
-                </p>
-                <p className="text-2xl font-semibold text-gray-900">
-                  {benchmarkData.summary.totalExercises}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <div className="w-8 h-8 bg-yellow-500 rounded-md flex items-center justify-center">
-                  <span className="text-white font-bold">$</span>
-                </div>
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">Total Cost</p>
-                <p className="text-2xl font-semibold text-gray-900">
-                  {formatCurrency(benchmarkData.summary.totalCost)}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-            <div className="flex items-center">
-              <div className="flex-shrink-0">
-                <div className="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
-                  <span className="text-white font-bold">T</span>
-                </div>
-              </div>
-              <div className="ml-4">
-                <p className="text-sm font-medium text-gray-500">Total Time</p>
-                <p className="text-2xl font-semibold text-gray-900">
-                  {formatTime(benchmarkData.summary.totalTime)}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Exercise Results Table */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h2 className="text-xl font-semibold text-gray-900">
-              Exercise Results
-            </h2>
-            <p className="mt-1 text-sm text-gray-500">
-              Detailed breakdown of each exercise performance
-            </p>
-          </div>
-          <div className="overflow-x-auto">
-            <table className="min-w-full">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Exercise
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Status
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Pass / Total
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Time
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Cost
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Turns
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    Output
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {benchmarkData.exercises.map((exercise, index) => (
-                  <tr key={exercise.exerciseName} className="hover:bg-gray-50">
-                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                      <button
-                        onClick={() => router.push(`/exercise/${encodeURIComponent(model)}/${encodeURIComponent(provider)}/${encodeURIComponent(language)}/${encodeURIComponent(exercise.exerciseName)}`)}
-                        className="text-blue-600 hover:text-blue-800 hover:underline text-left"
-                        title="Click to view detailed exercise results"
-                      >
-                        {exercise.exerciseName}
-                      </button>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="flex items-center">
-                        <span className="mr-2">
-                          {getStatusIcon(
-                            exercise.testResult?.success ? "success" : "failure"
-                          )}
-                        </span>
-                        <span
-                          className={getStatusBadge(
-                            exercise.testResult?.success
-                          )}
-                        >
-                          {exercise.testResult?.success ? "Pass" : "Fail"}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {exercise.testResult?.passed} /{" "}
-                      {exercise.testResult?.total}{" "}
-                      <div>
-                        {exercise.testResult?.skipped
-                          ? `(${exercise.testResult?.skipped} skipped)`
-                          : ""}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {formatTime(exercise.timeElapsed)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {formatCurrency(exercise.cost)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {exercise.turns}
-                    </td>
-                    <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
-                      {exercise.finalOutput?.slice(0, 100) || "-"}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {/* Historical Performance Section */}
-        {detailData.history.length > 0 && (
-          <div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200">
-            <div className="px-6 py-4 border-b border-gray-200">
-              <h2 className="text-xl font-semibold text-gray-900">
-                Historical Performance
-              </h2>
-              <p className="mt-1 text-sm text-gray-500">
-                Previous runs for this model/provider/language combination ({detailData.totalRuns} total runs)
-              </p>
-            </div>
-            <div className="overflow-x-auto">
-              <table className="min-w-full">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Run Date
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Success Rate
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Exercises
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Avg Cost
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Avg Time
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Avg Turns
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Commit
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {detailData.history.map((run, index) => (
-                    <tr
-                      key={`${run.endTime}-${index}`}
-                      className="hover:bg-gray-50 cursor-pointer"
-                      onClick={() => loadHistoricalRun(run.endTime)}
-                      title="Click to view detailed results for this run"
-                    >
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {new Date(run.endTime).toLocaleDateString()}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {formatPercentage(run.successRate)}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {run.totalExercises}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {formatCurrency(run.averageCost)}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {formatTime(run.averageTime)}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {run.averageTurns.toFixed(1)}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">
-                        {run.commitHash.slice(0, 8)}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        )}
-
-        {/* Run Information */}
-        <div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">
-            Run Information
-          </h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <h4 className="text-sm font-medium text-gray-500 mb-2">
-                Configuration
-              </h4>
-              <dl className="space-y-1">
-                <div className="flex">
-                  <dt className="text-sm text-gray-500 w-24">Model:</dt>
-                  <dd className="text-sm text-gray-900">
-                    {benchmarkData.config.model}
-                  </dd>
-                </div>
-                <div className="flex">
-                  <dt className="text-sm text-gray-500 w-24">Provider:</dt>
-                  <dd className="text-sm text-gray-900">
-                    {benchmarkData.config.provider}
-                  </dd>
-                </div>
-                <div className="flex">
-                  <dt className="text-sm text-gray-500 w-24">Language:</dt>
-                  <dd className="text-sm text-gray-900">
-                    {benchmarkData.config.language}
-                  </dd>
-                </div>
-                {benchmarkData.config.agent && (
-                  <div className="flex">
-                    <dt className="text-sm text-gray-500 w-24">Agent:</dt>
-                    <dd className="text-sm text-gray-900">
-                      {benchmarkData.config.agent}
-                    </dd>
-                  </div>
-                )}
-              </dl>
-            </div>
-            <div>
-              <h4 className="text-sm font-medium text-gray-500 mb-2">Limits</h4>
-              <dl className="space-y-1">
-                <div className="flex">
-                  <dt className="text-sm text-gray-500 w-24">Max Turns:</dt>
-                  <dd className="text-sm text-gray-900">
-                    {benchmarkData.config.limits.maxTurns}
-                  </dd>
-                </div>
-                <div className="flex">
-                  <dt className="text-sm text-gray-500 w-24">Max Time:</dt>
-                  <dd className="text-sm text-gray-900">
-                    {formatTime(benchmarkData.config.limits.maxTime)}
-                  </dd>
-                </div>
-                <div className="flex">
-                  <dt className="text-sm text-gray-500 w-24">Max Cost:</dt>
-                  <dd className="text-sm text-gray-900">
-                    {formatCurrency(benchmarkData.config.limits.maxCost)}
-                  </dd>
-                </div>
-              </dl>
-            </div>
-          </div>
-          <div className="mt-4 pt-4 border-t border-gray-200">
-            <div className="flex justify-between text-sm text-gray-500">
-              <span>
-                Started: {new Date(benchmarkData.startTime).toLocaleString()}
-              </span>
-              <span>
-                Completed: {new Date(benchmarkData.endTime).toLocaleString()}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}