@tyvm/knowhow 0.0.90 → 0.0.92

package/leaderboard/components/LeaderboardTable.tsx

@@ -1,168 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { LeaderboardEntry } from '@/types/benchmark';
-import { formatCurrency, formatTime, formatPercentage } from '@/utils/dataProcessor';
-
-interface LeaderboardTableProps {
-  entries: LeaderboardEntry[];
-  showLanguageColumn?: boolean;
-}
-
-type SortField = keyof LeaderboardEntry;
-type SortDirection = 'asc' | 'desc';
-
-export default function LeaderboardTable({ entries, showLanguageColumn = true }: LeaderboardTableProps) {
-  const router = useRouter();
-  const [sortField, setSortField] = useState<SortField>('successRate');
-  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-
-  const handleSort = (field: SortField) => {
-    if (sortField === field) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortField(field);
-      setSortDirection('desc');
-    }
-  };
-
-  const sortedEntries = [...entries].sort((a, b) => {
-    const aValue = a[sortField];
-    const bValue = b[sortField];
-    
-    let comparison = 0;
-    if (typeof aValue === 'string' && typeof bValue === 'string') {
-      comparison = aValue.localeCompare(bValue);
-    } else if (typeof aValue === 'number' && typeof bValue === 'number') {
-      comparison = aValue - bValue;
-    }
-    
-    return sortDirection === 'asc' ? comparison : -comparison;
-  });
-
-  const getSortIcon = (field: SortField) => {
-    if (sortField !== field) return '↕️';
-    return sortDirection === 'asc' ? '↑' : '↓';
-  };
-
-  const getStatusColor = (successRate: number) => {
-    if (successRate >= 90) return 'text-green-600';
-    if (successRate >= 70) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
-  const handleRowClick = (entry: LeaderboardEntry) => {
-    const model = encodeURIComponent(entry.model);
-    const provider = encodeURIComponent(entry.provider);
-    const language = encodeURIComponent(entry.language);
-    router.push(`/details/${model}/${provider}/${language}`);
-  };
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="min-w-full bg-white border border-gray-200 rounded-lg shadow-sm">
-        <thead className="bg-gray-50">
-          <tr>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('model')}
-            >
-              Model {getSortIcon('model')}
-            </th>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('provider')}
-            >
-              Provider {getSortIcon('provider')}
-            </th>
-            {showLanguageColumn && (
-              <th 
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-                onClick={() => handleSort('language')}
-              >
-                Language {getSortIcon('language')}
-              </th>
-            )}
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('successRate')}
-            >
-              Success Rate {getSortIcon('successRate')}
-            </th>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('totalExercises')}
-            >
-              Exercises {getSortIcon('totalExercises')}
-            </th>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('averageCost')}
-            >
-              Avg Cost {getSortIcon('averageCost')}
-            </th>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('averageTime')}
-            >
-              Avg Time {getSortIcon('averageTime')}
-            </th>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('averageTurns')}
-            >
-              Avg Turns {getSortIcon('averageTurns')}
-            </th>
-            <th 
-              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
-              onClick={() => handleSort('totalRuns')}
-            >
-              Runs {getSortIcon('totalRuns')}
-            </th>
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {sortedEntries.map((entry) => (
-            <tr 
-              key={`${entry.model}-${entry.provider}-${entry.language}`} 
-              className="hover:bg-gray-50 cursor-pointer transition-colors duration-150"
-              onClick={() => handleRowClick(entry)}
-              title="Click to view detailed results"
-            >
-              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                {entry.model}
-              </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {entry.provider}
-              </td>
-              {showLanguageColumn && (
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {entry.language}
-                </td>
-              )}
-              <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getStatusColor(entry.successRate)}`}>
-                {formatPercentage(entry.successRate)}
-              </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {entry.totalExercises}
-              </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {formatCurrency(entry.averageCost)}
-              </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {formatTime(entry.averageTime)}
-              </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {entry.averageTurns.toFixed(1)}
-              </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {entry.totalRuns}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/leaderboard/components/PerformanceChart.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ScatterChart, Scatter } from 'recharts';
-import { LeaderboardEntry } from '@/types/benchmark';
-import { formatCurrency, formatPercentage } from '@/utils/dataProcessor';
-
-interface PerformanceChartProps {
-  entries: LeaderboardEntry[];
-  selectedLanguage?: string;
-  chartType?: 'success-rate' | 'cost-vs-performance';
-}
-
-export default function PerformanceChart({ entries, selectedLanguage = 'all', chartType = 'success-rate' }: PerformanceChartProps) {
-  if (chartType === 'success-rate') {
-    const chartData = entries
-      .sort((a, b) => b.successRate - a.successRate)
-      .slice(0, 10) // Show top 10
-      .map(entry => ({
-        name: selectedLanguage === 'all' ? `${entry.model} (${entry.language})` : entry.model,
-        successRate: entry.successRate,
-        exercises: entry.totalExercises,
-      }));
-
-    return (
-      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Success Rate Comparison</h3>
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis 
-              dataKey="name" 
-              angle={-45}
-              textAnchor="end"
-              height={100}
-              fontSize={12}
-            />
-            <YAxis 
-              domain={[0, 100]}
-              tickFormatter={(value) => `${value}%`}
-            />
-            <Tooltip 
-              formatter={(value: number, name: string) => [
-                name === 'successRate' ? formatPercentage(value) : value,
-                name === 'successRate' ? 'Success Rate' : 'Exercises'
-              ]}
-            />
-            <Legend />
-            <Bar dataKey="successRate" fill="#3B82F6" name="Success Rate (%)" />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    );
-  }
-
-  // Cost vs Performance scatter plot
-  const scatterData = entries.map(entry => ({
-    name: selectedLanguage === 'all' ? `${entry.model} (${entry.language})` : entry.model,
-    cost: entry.averageCost,
-    successRate: entry.successRate,
-    exercises: entry.totalExercises,
-  }));
-
-  return (
-    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">Cost vs Performance</h3>
-      <ResponsiveContainer width="100%" height={400}>
-        <ScatterChart data={scatterData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis 
-            dataKey="cost" 
-            type="number"
-            tickFormatter={(value) => formatCurrency(value)}
-            name="Average Cost"
-          />
-          <YAxis 
-            dataKey="successRate" 
-            type="number"
-            domain={[0, 100]}
-            tickFormatter={(value) => `${value}%`}
-            name="Success Rate"
-          />
-          <Tooltip 
-            formatter={(value: number, name: string) => {
-              if (name === 'cost') return [formatCurrency(value), 'Average Cost'];
-              if (name === 'successRate') return [formatPercentage(value), 'Success Rate'];
-              return [value, name];
-            }}
-            labelFormatter={() => ''}
-            content={({ active, payload }) => {
-              if (active && payload && payload.length) {
-                const data = payload[0].payload;
-                return (
-                  <div className="bg-white p-3 border border-gray-200 rounded shadow-lg">
-                    <p className="font-medium">{data.name}</p>
-                    <p className="text-blue-600">Success Rate: {formatPercentage(data.successRate)}</p>
-                    <p className="text-green-600">Average Cost: {formatCurrency(data.cost)}</p>
-                    <p className="text-gray-600">Exercises: {data.exercises}</p>
-                  </div>
-                );
-              }
-              return null;
-            }}
-          />
-          <Scatter dataKey="successRate" fill="#3B82F6" />
-        </ScatterChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}

package/leaderboard/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package/leaderboard/next.config.js

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig