gsd-trae 1.0.0 → 1.0.2

package/refs/vbenchmark/packages/leaderboard/eslint.config.js

@@ -1,16 +0,0 @@
-import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    ignores: ['dist/**', 'node_modules/**'],
-  },
-  {
-    rules: {
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-      '@typescript-eslint/no-explicit-any': 'off',
-    },
-  }
-);

package/refs/vbenchmark/packages/leaderboard/fly.toml

@@ -1,29 +0,0 @@
-# fly.toml - Fly.io deployment config
-# Deploy with: fly launch --config fly.toml
-
-app = "codingbench-api"
-primary_region = "sjc"
-
-[build]
-  dockerfile = "Dockerfile"
-
-[env]
-  NODE_ENV = "production"
-  PORT = "3001"
-
-[http_service]
-  internal_port = 3001
-  force_https = true
-  auto_stop_machines = true
-  auto_start_machines = true
-  min_machines_running = 0
-
-  [http_service.concurrency]
-    type = "connections"
-    hard_limit = 500
-    soft_limit = 200
-
-[[vm]]
-  cpu_kind = "shared"
-  cpus = 1
-  memory_mb = 256

package/refs/vbenchmark/packages/leaderboard/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "@vibecodingbench/leaderboard",
-  "version": "0.1.0",
-  "description": "Leaderboard service for VibeCodingBench evaluations",
-  "type": "module",
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsx watch src/index.ts",
-    "start": "node dist/index.js",
-    "test": "vitest run",
-    "lint": "eslint src/",
-    "db:generate": "drizzle-kit generate:pg",
-    "db:migrate": "drizzle-kit push:pg",
-    "db:push": "drizzle-kit push:pg",
-    "db:studio": "drizzle-kit studio"
-  },
-  "dependencies": {
-    "@hono/node-server": "^1.8.0",
-    "@hono/zod-validator": "^0.4.0",
-    "@neondatabase/serverless": "^0.7.0",
-    "drizzle-orm": "^0.29.0",
-    "hono": "^4.11.7",
-    "postgres": "^3.4.0",
-    "vite": "7.3.1",
-    "zod": "^3.22.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.0.0",
-    "drizzle-kit": "^0.31.8",
-    "eslint": "^9.0.0",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.0",
-    "vitest": "^4.0.17"
-  }
-}

package/refs/vbenchmark/packages/leaderboard/src/app.ts

@@ -1,29 +0,0 @@
-import { Hono } from 'hono';
-import { cors } from 'hono/cors';
-import { logger } from 'hono/logger';
-import { submissionsRoutes } from './routes/submissions.js';
-import { leaderboardRoutes } from './routes/leaderboard.js';
-import { liveRoutes } from './routes/live.js';
-import { tasksRoutes } from './routes/tasks.js';
-
-const app = new Hono();
-
-// Middleware
-app.use('*', cors({
-  origin: ['https://vibecoding.llmbench.xyz', 'http://localhost:9011', 'http://localhost:5173'],
-  allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
-  allowHeaders: ['Content-Type', 'Authorization'],
-  credentials: true,
-}));
-app.use('*', logger());
-
-// Health check
-app.get('/health', (c) => c.json({ status: 'healthy' }));
-
-// API routes
-app.route('/api/submissions', submissionsRoutes);
-app.route('/api/leaderboard', leaderboardRoutes);
-app.route('/api/live', liveRoutes);
-app.route('/api/tasks', tasksRoutes);
-
-export { app };

package/refs/vbenchmark/packages/leaderboard/src/components/BrowserPreview.tsx

@@ -1,190 +0,0 @@
-// React component for browser preview using noVNC
-// Shows live browser sessions for visual/frontend tasks
-
-import { useEffect, useRef, useState } from 'react';
-
-export interface BrowserPreviewProps {
-  runId: string;
-  vncUrl?: string;
-  screenshotUrl?: string;
-  width?: number;
-  height?: number;
-  onScreenshot?: () => void;
-}
-
-export function BrowserPreview({
-  runId,
-  vncUrl,
-  screenshotUrl,
-  width = 800,
-  height = 600,
-  onScreenshot,
-}: BrowserPreviewProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [mode, setMode] = useState<'vnc' | 'screenshot'>('screenshot');
-
-  useEffect(() => {
-    if (vncUrl && mode === 'vnc') {
-      // In production, this would connect to a noVNC WebSocket
-      setIsConnected(true);
-    }
-  }, [vncUrl, mode]);
-
-  const handleRefresh = () => {
-    if (iframeRef.current && screenshotUrl) {
-      iframeRef.current.src = `${screenshotUrl}?t=${Date.now()}`;
-    }
-    onScreenshot?.();
-  };
-
-  return (
-    <div className="bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-      {/* Browser Chrome */}
-      <div className="bg-gray-800 px-4 py-2 flex items-center justify-between">
-        <div className="flex items-center space-x-3">
-          {/* Window Controls */}
-          <div className="flex space-x-1.5">
-            <div className="w-3 h-3 rounded-full bg-red-500" />
-            <div className="w-3 h-3 rounded-full bg-yellow-500" />
-            <div className="w-3 h-3 rounded-full bg-green-500" />
-          </div>
-
-          {/* URL Bar */}
-          <div className="flex-1 ml-4">
-            <div className="bg-gray-700 rounded px-3 py-1 text-sm text-gray-300 font-mono">
-              localhost:3000
-            </div>
-          </div>
-        </div>
-
-        {/* Controls */}
-        <div className="flex items-center space-x-2">
-          <button
-            onClick={handleRefresh}
-            className="p-1 text-gray-400 hover:text-white"
-            title="Refresh"
-          >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-              />
-            </svg>
-          </button>
-
-          <div className="flex rounded overflow-hidden">
-            <button
-              onClick={() => setMode('screenshot')}
-              className={`px-2 py-1 text-xs ${
-                mode === 'screenshot'
-                  ? 'bg-indigo-600 text-white'
-                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
-              }`}
-            >
-              Screenshot
-            </button>
-            <button
-              onClick={() => setMode('vnc')}
-              className={`px-2 py-1 text-xs ${
-                mode === 'vnc'
-                  ? 'bg-indigo-600 text-white'
-                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
-              }`}
-              disabled={!vncUrl}
-            >
-              Live
-            </button>
-          </div>
-
-          {/* Connection Status */}
-          <div className="flex items-center space-x-1">
-            <span
-              className={`w-2 h-2 rounded-full ${
-                isConnected ? 'bg-green-500' : 'bg-gray-500'
-              }`}
-            />
-            <span className="text-gray-400 text-xs">
-              {isConnected ? 'Connected' : 'Disconnected'}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Browser Content */}
-      <div
-        className="relative bg-white"
-        style={{ width, height }}
-      >
-        {error ? (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
-            <div className="text-center">
-              <svg
-                className="w-12 h-12 mx-auto text-gray-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-              <p className="mt-2 text-gray-500">{error}</p>
-              <button
-                onClick={() => setError(null)}
-                className="mt-2 text-indigo-600 hover:text-indigo-700"
-              >
-                Retry
-              </button>
-            </div>
-          </div>
-        ) : mode === 'vnc' && vncUrl ? (
-          <iframe
-            ref={iframeRef}
-            src={vncUrl}
-            className="w-full h-full border-0"
-            title="Browser Preview"
-          />
-        ) : screenshotUrl ? (
-          <img
-            src={`${screenshotUrl}?t=${Date.now()}`}
-            alt="Browser Screenshot"
-            className="w-full h-full object-contain"
-            onError={() => setError('Failed to load screenshot')}
-          />
-        ) : (
-          <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
-            <div className="text-center text-gray-500">
-              <svg
-                className="w-16 h-16 mx-auto text-gray-300"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                />
-              </svg>
-              <p className="mt-2">Waiting for browser session...</p>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Footer */}
-      <div className="bg-gray-800 px-4 py-2 flex items-center justify-between text-xs text-gray-400">
-        <span>Run ID: {runId}</span>
-        <span>{width}x{height}</span>
-      </div>
-    </div>
-  );
-}

package/refs/vbenchmark/packages/leaderboard/src/components/ComparisonView.tsx

@@ -1,205 +0,0 @@
-// React component for side-by-side agent comparison
-// Shows multiple agents running the same task simultaneously
-
-import { LiveRunCard, type LiveRun } from './LiveRunCard';
-
-export interface ComparisonViewProps {
-  runs: LiveRun[];
-  taskId: string;
-  taskName: string;
-  onSelectRun?: (runId: string) => void;
-}
-
-export function ComparisonView({
-  runs,
-  taskId,
-  taskName,
-  onSelectRun,
-}: ComparisonViewProps) {
-  const getWinner = () => {
-    const completedRuns = runs.filter((r) => r.status === 'completed');
-    if (completedRuns.length === 0) return null;
-
-    // Winner has the best combination of speed and quality
-    return completedRuns.reduce((best, run) => {
-      const score = run.metrics.testsPass / (run.metrics.testsFail + run.metrics.testsPass || 1);
-      const bestScore = best.metrics.testsPass / (best.metrics.testsFail + best.metrics.testsPass || 1);
-
-      if (score > bestScore) return run;
-      if (score === bestScore && run.metrics.elapsedMs < best.metrics.elapsedMs) return run;
-      return best;
-    });
-  };
-
-  const winner = getWinner();
-  const allCompleted = runs.every(
-    (r) => r.status === 'completed' || r.status === 'failed'
-  );
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-xl font-bold text-gray-900">Agent Comparison</h2>
-            <p className="text-gray-500">{taskName}</p>
-            <p className="text-sm text-gray-400 font-mono">{taskId}</p>
-          </div>
-
-          {allCompleted && winner && (
-            <div className="text-center">
-              <div className="text-4xl">🏆</div>
-              <p className="text-sm font-medium text-gray-900">{winner.agentName}</p>
-              <p className="text-xs text-gray-500">Winner</p>
-            </div>
-          )}
-
-          <div className="text-right">
-            <div className="text-sm text-gray-500">
-              {runs.filter((r) => r.status === 'completed').length} / {runs.length} completed
-            </div>
-            <div className="text-sm text-gray-400">
-              {runs.filter((r) => r.status === 'running').length} running
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Progress Summary */}
-      <div className="bg-white rounded-lg shadow p-4">
-        <div className="flex items-center space-x-4">
-          {runs.map((run) => (
-            <div
-              key={run.id}
-              className="flex-1"
-              onClick={() => onSelectRun?.(run.id)}
-            >
-              <div className="flex items-center justify-between mb-1">
-                <span className="text-sm font-medium text-gray-700">
-                  {run.agentName}
-                </span>
-                <span className="text-xs text-gray-500">{run.progress}%</span>
-              </div>
-              <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
-                <div
-                  className={`h-full transition-all duration-500 ${
-                    run.status === 'completed'
-                      ? 'bg-green-500'
-                      : run.status === 'failed'
-                        ? 'bg-red-500'
-                        : 'bg-indigo-500'
-                  }`}
-                  style={{ width: `${run.progress}%` }}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Side-by-side Cards */}
-      <div
-        className={`grid gap-4 ${
-          runs.length === 2
-            ? 'grid-cols-2'
-            : runs.length === 3
-              ? 'grid-cols-3'
-              : 'grid-cols-2 lg:grid-cols-4'
-        }`}
-      >
-        {runs.map((run) => (
-          <div
-            key={run.id}
-            className={`relative ${
-              winner?.id === run.id ? 'ring-2 ring-yellow-400 rounded-lg' : ''
-            }`}
-          >
-            {winner?.id === run.id && (
-              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 z-10">
-                <span className="bg-yellow-400 text-yellow-900 text-xs font-bold px-2 py-1 rounded-full">
-                  🏆 Winner
-                </span>
-              </div>
-            )}
-            <LiveRunCard
-              run={run}
-              onViewDetails={() => onSelectRun?.(run.id)}
-            />
-          </div>
-        ))}
-      </div>
-
-      {/* Metrics Comparison Table */}
-      {allCompleted && (
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-                  Metric
-                </th>
-                {runs.map((run) => (
-                  <th
-                    key={run.id}
-                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"
-                  >
-                    {run.agentName}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
-              <tr>
-                <td className="px-6 py-4 text-sm text-gray-500">Tokens Used</td>
-                {runs.map((run) => (
-                  <td key={run.id} className="px-6 py-4 text-sm text-gray-900">
-                    {run.metrics.tokensUsed.toLocaleString()}
-                  </td>
-                ))}
-              </tr>
-              <tr>
-                <td className="px-6 py-4 text-sm text-gray-500">Execution Time</td>
-                {runs.map((run) => (
-                  <td key={run.id} className="px-6 py-4 text-sm text-gray-900">
-                    {(run.metrics.elapsedMs / 1000).toFixed(1)}s
-                  </td>
-                ))}
-              </tr>
-              <tr>
-                <td className="px-6 py-4 text-sm text-gray-500">Files Read</td>
-                {runs.map((run) => (
-                  <td key={run.id} className="px-6 py-4 text-sm text-gray-900">
-                    {run.metrics.filesRead}
-                  </td>
-                ))}
-              </tr>
-              <tr>
-                <td className="px-6 py-4 text-sm text-gray-500">Files Written</td>
-                {runs.map((run) => (
-                  <td key={run.id} className="px-6 py-4 text-sm text-gray-900">
-                    {run.metrics.filesWritten}
-                  </td>
-                ))}
-              </tr>
-              <tr>
-                <td className="px-6 py-4 text-sm text-gray-500">Tests Passed</td>
-                {runs.map((run) => (
-                  <td key={run.id} className="px-6 py-4">
-                    <span className="text-green-600 font-medium">
-                      {run.metrics.testsPass}
-                    </span>
-                    <span className="text-gray-400"> / </span>
-                    <span className="text-red-600">
-                      {run.metrics.testsFail}
-                    </span>
-                  </td>
-                ))}
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
-}

package/refs/vbenchmark/packages/leaderboard/src/components/LeaderboardTable.tsx

@@ -1,150 +0,0 @@
-// React component for leaderboard table
-// This would be used in a Next.js or React frontend
-
-export interface LeaderboardEntry {
-  rank: number;
-  agentName: string;
-  agentVersion: string;
-  tasksCompleted: number;
-  avgScore: number;
-  avgFunctional: number;
-  avgVisual: number;
-  avgQuality: number;
-  avgSecurity: number;
-  avgCost: number;
-  avgSpeed: number;
-  totalTokens: number;
-  lastUpdated: string;
-}
-
-export interface LeaderboardTableProps {
-  entries: LeaderboardEntry[];
-  sortBy?: keyof LeaderboardEntry;
-  sortOrder?: 'asc' | 'desc';
-  onSort?: (column: keyof LeaderboardEntry) => void;
-  onAgentClick?: (agentName: string) => void;
-}
-
-export function LeaderboardTable({
-  entries,
-  sortBy = 'avgScore',
-  sortOrder = 'desc',
-  onSort,
-  onAgentClick,
-}: LeaderboardTableProps) {
-  const formatNumber = (n: number) => {
-    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
-    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
-    return n.toFixed(1);
-  };
-
-  const formatTokens = (n: number) => {
-    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
-    if (n >= 1000) return `${(n / 1000).toFixed(0)}K`;
-    return n.toString();
-  };
-
-  const getScoreColor = (score: number) => {
-    if (score >= 90) return 'text-green-600';
-    if (score >= 80) return 'text-blue-600';
-    if (score >= 70) return 'text-yellow-600';
-    return 'text-red-600';
-  };
-
-  const getRankBadge = (rank: number) => {
-    if (rank === 1) return '🥇';
-    if (rank === 2) return '🥈';
-    if (rank === 3) return '🥉';
-    return rank;
-  };
-
-  const SortHeader = ({
-    column,
-    children,
-  }: {
-    column: keyof LeaderboardEntry;
-    children: React.ReactNode;
-  }) => (
-    <th
-      className={`px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 ${sortBy === column ? 'bg-gray-50' : ''}`}
-      onClick={() => onSort?.(column)}
-    >
-      <div className="flex items-center space-x-1">
-        <span>{children}</span>
-        {sortBy === column && (
-          <span className="text-indigo-600">{sortOrder === 'desc' ? '↓' : '↑'}</span>
-        )}
-      </div>
-    </th>
-  );
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
-          <tr>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Rank
-            </th>
-            <SortHeader column="agentName">Agent</SortHeader>
-            <SortHeader column="tasksCompleted">Tasks</SortHeader>
-            <SortHeader column="avgScore">Overall</SortHeader>
-            <SortHeader column="avgFunctional">Functional</SortHeader>
-            <SortHeader column="avgVisual">Visual</SortHeader>
-            <SortHeader column="avgQuality">Quality</SortHeader>
-            <SortHeader column="avgSecurity">Security</SortHeader>
-            <SortHeader column="avgCost">Cost</SortHeader>
-            <SortHeader column="avgSpeed">Speed</SortHeader>
-            <SortHeader column="totalTokens">Tokens</SortHeader>
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {entries.map((entry) => (
-            <tr
-              key={entry.agentName}
-              className="hover:bg-gray-50 cursor-pointer"
-              onClick={() => onAgentClick?.(entry.agentName)}
-            >
-              <td className="px-4 py-4 whitespace-nowrap text-lg font-medium">
-                {getRankBadge(entry.rank)}
-              </td>
-              <td className="px-4 py-4 whitespace-nowrap">
-                <div>
-                  <div className="text-sm font-medium text-gray-900">{entry.agentName}</div>
-                  <div className="text-xs text-gray-500">v{entry.agentVersion}</div>
-                </div>
-              </td>
-              <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                {entry.tasksCompleted}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm font-bold ${getScoreColor(entry.avgScore)}`}>
-                {formatNumber(entry.avgScore)}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm ${getScoreColor(entry.avgFunctional)}`}>
-                {formatNumber(entry.avgFunctional)}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm ${getScoreColor(entry.avgVisual)}`}>
-                {formatNumber(entry.avgVisual)}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm ${getScoreColor(entry.avgQuality)}`}>
-                {formatNumber(entry.avgQuality)}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm ${getScoreColor(entry.avgSecurity)}`}>
-                {formatNumber(entry.avgSecurity)}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm ${getScoreColor(entry.avgCost)}`}>
-                {formatNumber(entry.avgCost)}
-              </td>
-              <td className={`px-4 py-4 whitespace-nowrap text-sm ${getScoreColor(entry.avgSpeed)}`}>
-                {formatNumber(entry.avgSpeed)}
-              </td>
-              <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                {formatTokens(entry.totalTokens)}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}