Function bodies 50 total

parseJudgeMetrics function · javascript · L6-L16 (11 LOC)

process-data.js

function parseJudgeMetrics(reason) {
  const metrics = {};
  const match = reason.match(/JUDGE_METRICS\s+(.+)/);
  if (!match) return null;
  const pairs = match[1].split(/\s+/);
  for (const pair of pairs) {
    const [key, val] = pair.split('=');
    if (key && val) metrics[key] = val === 'null' ? null : parseFloat(val);
  }
  return metrics;
}

parseSonnetReasoning function · javascript · L18-L21 (4 LOC)

process-data.js

function parseSonnetReasoning(reason) {
  const match = reason.match(/--- SONNET JUDGE ---\n([\s\S]*?)(?=--- GPT JUDGE ---|$)/);
  return match ? match[1].trim() : '';
}

parseGptReasoning function · javascript · L23-L26 (4 LOC)

process-data.js

function parseGptReasoning(reason) {
  const match = reason.match(/--- GPT JUDGE ---\n([\s\S]*?)$/);
  return match ? match[1].trim() : '';
}

parseLineMetrics function · javascript · L28-L40 (13 LOC)

process-data.js

function parseLineMetrics(reason) {
  const match = reason.match(
    /LINE_METRICS:\s+line_acc=([\d.]+)\s+avg_iou=([\d.]+)\s+exact_match=([\d.]+)\s+within3=([\d.]+)\s+matched=(\S+)/
  );
  if (!match) return null;
  return {
    lineAccuracy: parseFloat(match[1]),
    avgIou: parseFloat(match[2]),
    exactMatch: parseFloat(match[3]),
    within3: parseFloat(match[4]),
    matched: match[5],
  };
}

parseResponseOutput function · javascript · L42-L50 (9 LOC)

process-data.js

function parseResponseOutput(output) {
  try {
    const cleaned = output.replace(/```json\s*/g, '').replace(/```\s*/g, '').trim();
    const parsed = JSON.parse(cleaned);
    return parsed.codeSuggestions || parsed.suggestions || (Array.isArray(parsed) ? parsed : []);
  } catch {
    return [];
  }
}

avg function · javascript · L52-L56 (5 LOC)

process-data.js

function avg(arr) {
  const valid = arr.filter((v) => v != null && !isNaN(v));
  if (valid.length === 0) return 0;
  return valid.reduce((a, b) => a + b, 0) / valid.length;
}

percentile function · javascript · L58-L63 (6 LOC)

process-data.js

function percentile(arr, p) {
  if (arr.length === 0) return 0;
  const sorted = [...arr].sort((a, b) => a - b);
  const index = Math.ceil((p / 100) * sorted.length) - 1;
  return sorted[Math.max(0, index)];
}

Want this analysis on your repo? https://repobility.com/scan/

getLanguage function · javascript · L65-L80 (16 LOC)

process-data.js

function getLanguage(vars, description) {
  const desc = (description || '');
  // Match by file extension in the description (most reliable)
  if (/\.tsx\b/.test(desc)) return 'typescript/react';
  if (/\.rb\b/.test(desc) || /app\//.test(desc) && desc.endsWith('.rb')) return 'ruby';
  if (/\.java\b/.test(desc)) return 'java';
  if (/\.py\b/.test(desc)) return 'python';
  if (/\.ts\b/.test(desc)) return 'typescript/node';
  // Fallback: inspect content
  const file = vars.fileContent || '';
  if (file.includes('import React') || file.includes('useState')) return 'typescript/react';
  if (file.includes('def ') && file.includes('self')) return 'python';
  if (file.includes('public class ') || file.includes('package ')) return 'java';
  if (/class\s+\w+/.test(file) && file.includes('def ') && file.includes('end')) return 'ruby';
  return 'typescript/node';
}

getModelInfo function · javascript · L125-L133 (9 LOC)

process-data.js

function getModelInfo(providerId) {
  if (MODEL_NAMES[providerId]) return MODEL_NAMES[providerId];
  const name = providerId.split(':').pop().split('/').pop();
  return {
    slug: name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''),
    displayName: name,
    provider: providerId.split(':')[0],
  };
}

trimFileContent function · javascript · L135-L139 (5 LOC)

process-data.js

function trimFileContent(content, maxLines) {
  const lines = content.split('\n');
  if (lines.length <= maxLines) return content;
  return lines.slice(0, maxLines).join('\n') + '\n// ... truncated';
}

buildHistogram function · javascript · L141-L157 (17 LOC)

process-data.js

function buildHistogram(scores, buckets) {
  const hist = [];
  const step = 100 / buckets;
  for (let i = 0; i < buckets; i++) {
    const min = i * step;
    const max = (i + 1) * step;
    hist.push({
      min,
      max,
      count: scores.filter((s) => {
        const pct = s * 100;
        return pct >= min && (i === buckets - 1 ? pct <= max : pct < max);
      }).length,
    });
  }
  return hist;
}

round2 function · javascript · L422-L431 (10 LOC)

process-data.js

function round2(obj) {
  if (typeof obj === 'number') return Math.round(obj * 100) / 100;
  if (Array.isArray(obj)) return obj.map(round2);
  if (obj && typeof obj === 'object') {
    const out = {};
    for (const [k, v] of Object.entries(obj)) out[k] = round2(v);
    return out;
  }
  return obj;
}

RootLayout function · typescript · L23-L48 (26 LOC)

src/app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="dark antialiased">
      <body className={cn(
        dmSans.variable,
        instrumentSerif.variable,
        mono.variable,
        "font-sans bg-[var(--background)] text-[var(--foreground)] min-h-dvh flex flex-col relative"
      )}>
        {/* Grain texture overlay */}
        <div className="fixed inset-0 pointer-events-none z-50 opacity-[0.03]" style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        }} />
        <Navbar />
        <main className="flex-1 flex flex-col relative">
          {children}
        </main>
        <Footer />
      </body>
    </html>

LeaderboardPage function · typescript · L4-L15 (12 LOC)

src/app/leaderboard/page.tsx

export default function LeaderboardPage() {
  return (
    <Suspense fallback={
      <div className="max-w-[1400px] mx-auto w-full px-6 sm:px-12 py-12">
        <div className="h-8 w-48 bg-zinc-900 rounded animate-pulse mb-8" />
        <div className="h-[600px] bg-zinc-900/30 rounded-2xl animate-pulse" />
      </div>
    }>
      <LeaderboardClient />
    </Suspense>
  );
}

ModelDetailClient function · typescript · L30-L280 (251 LOC)

src/app/model/[id]/ModelDetailClient.tsx

export default function ModelDetailClient({
  model,
  averages,
  allModels,
  samples,
}: ModelDetailClientProps) {
  const providerColor = PROVIDER_COLORS[model.provider] || '#71717a';

  // Radar data: language breakdown
  const radarAxes = Object.keys(model.byLanguage).filter((l) => model.byLanguage[l]);
  const radarData = radarAxes.map((lang) => ({
    axis: LANGUAGE_LABELS[lang] || lang,
    model: model.byLanguage[lang]?.score || 0,
    average: Math.round(
      allModels.reduce((sum, m) => sum + (m.byLanguage[lang]?.score || 0), 0) / allModels.length
    ),
  }));

  // Judge comparison bar data
  const judgeBarData = [
    {
      name: 'Coverage',
      sonnet: model.judges.sonnet.coverage,
      gpt: model.judges.gpt.coverage,
    },
    {
      name: 'Validity',
      sonnet: model.judges.sonnet.validity,
      gpt: model.judges.gpt.validity,
    },
  ];

  // Latency comparison data
  const latencyData = allModels
    .map((m) => ({ name: m.displayName, p50: m.latency.p

Repobility (the analyzer behind this table) · https://repobility.com

generateStaticParams function · typescript · L10-L12 (3 LOC)

src/app/model/[id]/page.tsx

export function generateStaticParams() {
  return lb.models.map((m) => ({ id: m.slug }));
}

generateMetadata function · typescript · L14-L19 (6 LOC)

src/app/model/[id]/page.tsx

export function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  // Can't await in generateMetadata easily, so return a generic one
  return {
    title: `Model Detail | CodeReviewBench`,
  };
}

ModelDetailPage function · typescript · L21-L38 (18 LOC)

src/app/model/[id]/page.tsx

export default async function ModelDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const model = lb.models.find((m) => m.slug === id);
  if (!model) notFound();

  const modelSamples = allSamples
    .filter((s) => s.modelSlug === id)
    .sort((a, b) => b.score - a.score);

  return (
    <ModelDetailClient
      model={model}
      averages={lb.averages}
      allModels={lb.models}
      samples={modelSamples}
    />
  );
}

Home function · typescript · L19-L407 (389 LOC)

src/app/page.tsx

export default function Home() {
  const topModels = lb.models.slice(0, 5);

  return (
    <div className="flex-1 flex flex-col items-center">
      {/* Hero */}
      <header className="w-full max-w-[1400px] mx-auto px-6 sm:px-12 pt-20 sm:pt-32 pb-32 grid-bg relative">
        {/* Accent glow */}
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-[var(--accent)] opacity-[0.03] blur-[120px] rounded-full pointer-events-none" />

        <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_480px] gap-12 lg:gap-16 items-center">
          {/* Left: text */}
          <div>
            {/* Headline */}
            <h1 className="animate-fade-up text-5xl sm:text-7xl lg:text-[5.5rem] font-display tracking-tight text-[var(--foreground)] leading-[1.05] mb-8" style={{ animationDelay: '0ms' }}>
              AI Code Review<br />Benchmark.
            </h1>

            {/* Subheading */}
            <p className="animate-fade-up text-lg sm:text-xl text-[var(--muted)] max-w-2xl

TracePreview function · typescript · L6-L8 (3 LOC)

src/app/TracePreview.tsx

export default function TracePreview({ sample }: { sample: Sample }) {
  return <TraceCard sample={sample} defaultExpanded />;
}

TracesPage function · typescript · L5-L7 (3 LOC)

src/app/traces/page.tsx

export default function TracesPage() {
  return <TracesClient samples={samplesData as Sample[]} />;
}

TracesClient function · typescript · L23-L157 (135 LOC)

src/app/traces/TracesClient.tsx

export default function TracesClient({ samples }: TracesClientProps) {
  const [lang, setLang] = useState('all');
  const [category, setCategory] = useState('all');
  const [model, setModel] = useState('all');
  const [passFilter, setPassFilter] = useState('all');
  const [sortBy, setSortBy] = useState<'score' | 'latency'>('score');
  const [searchText, setSearchText] = useState('');
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    let result = samples;

    if (lang !== 'all') result = result.filter((s) => s.lang === lang);
    if (category !== 'all') result = result.filter((s) => s.category === category);
    if (model !== 'all') result = result.filter((s) => s.modelSlug === model);
    if (passFilter === 'pass') result = result.filter((s) => s.pass);
    if (passFilter === 'fail') result = result.filter((s) => !s.pass);
    if (searchText) {
      const q = searchText.toLowerCase();
      result = result.filter(
        (s) =>
          s.prSummary.toLo

BarTooltipContent function · typescript · L31-L43 (13 LOC)

src/components/charts/BarChart.tsx

function BarTooltipContent({ active, payload, label }: any) {
  if (!active || !payload?.length) return null;
  return (
    <div className="bg-[var(--surface-2)] border border-[var(--border-bright)] p-4 rounded-xl shadow-2xl text-sm">
      <p className="font-bold text-[var(--foreground)] mb-2">{label}</p>
      {payload.map((p: any) => (
        <p key={p.dataKey} className="text-[var(--muted)]">
          {p.name}: <span className="text-[var(--foreground)] font-mono font-bold">{Number(p.value).toFixed(1)}%</span>
        </p>
      ))}
    </div>
  );
}

About: code-quality intelligence by Repobility · https://repobility.com

BarChartComponent function · typescript · L45-L80 (36 LOC)

src/components/charts/BarChart.tsx

export default function BarChartComponent({ data, series, height = 420 }: BarChartProps) {
  return (
    <div className="w-full border border-[var(--border)] rounded-lg bg-[var(--surface)] p-6 sm:p-8" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <RBarChart data={data} margin={{ top: 10, right: 20, bottom: 50, left: 20 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#232630" vertical={false} />
          <XAxis
            dataKey="name"
            stroke="#232630"
            tick={{ fill: '#a1a4ac', fontSize: 13 }}
            angle={-35}
            textAnchor="end"
            interval={0}
            tickLine={false}
            dy={8}
          />
          <YAxis
            stroke="#232630"
            tick={{ fill: '#6b6e76', fontSize: 13 }}
            tickFormatter={(v) => `${v}%`}
            domain={[0, 100]}
            tickLine={false}
            axisLine={false}
          />
          <Tooltip content={<BarTooltipConten

HistTooltip function · typescript · L22-L31 (10 LOC)

src/components/charts/Histogram.tsx

function HistTooltip({ active, payload }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div className="bg-[var(--surface-2)] border border-[var(--border-bright)] p-3 rounded-xl shadow-2xl text-sm">
      <p className="text-[var(--foreground)] font-mono font-bold">{d.min.toFixed(0)}-{d.max.toFixed(0)}%</p>
      <p className="text-[var(--muted)]">{d.count} results</p>
    </div>
  );
}

Histogram function · typescript · L33-L71 (39 LOC)

src/components/charts/Histogram.tsx

export default function Histogram({ buckets, avgScore, color = '#ff6b35', height = 280 }: HistogramProps) {
  const data = buckets.map((b) => ({
    label: `${b.min.toFixed(0)}`,
    ...b,
  }));

  return (
    <div className="w-full border border-[var(--border)] rounded-lg bg-[var(--surface)] p-6" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 10, right: 10, bottom: 25, left: 10 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#232630" vertical={false} />
          <XAxis
            dataKey="label"
            stroke="#232630"
            tick={{ fill: '#a1a4ac', fontSize: 13 }}
            tickFormatter={(v) => `${v}%`}
            tickLine={false}
          />
          <YAxis
            stroke="#232630"
            tick={{ fill: '#6b6e76', fontSize: 13 }}
            tickLine={false}
            axisLine={false}
          />
          <Tooltip content={<HistTooltip />} />
          {avgScore !== u

JudgeTooltip function · typescript · L30-L40 (11 LOC)

src/components/charts/JudgeAgreement.tsx

function JudgeTooltip({ active, payload }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div className="bg-[var(--surface-2)] border border-[var(--border-bright)] p-4 rounded-xl shadow-2xl text-sm">
      <p className="font-bold text-[var(--foreground)] mb-2">{d.name}</p>
      <p className="text-[var(--muted)]">Sonnet: <span className="text-[var(--foreground)] font-mono">{d.sonnet.toFixed(1)}%</span></p>
      <p className="text-[var(--muted)]">GPT: <span className="text-[var(--foreground)] font-mono">{d.gpt.toFixed(1)}%</span></p>
    </div>
  );
}

JudgeAgreement function · typescript · L42-L91 (50 LOC)

src/components/charts/JudgeAgreement.tsx

export default function JudgeAgreement({ data, height = 450 }: JudgeAgreementProps) {
  return (
    <div className="w-full border border-[var(--border)] rounded-lg bg-[var(--surface)] p-6 sm:p-8" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <ScatterChart margin={{ top: 30, right: 40, bottom: 50, left: 50 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#232630" />
          <XAxis
            type="number"
            dataKey="sonnet"
            domain={[40, 100]}
            stroke="#232630"
            tick={{ fill: '#a1a4ac', fontSize: 13 }}
            tickFormatter={(v) => `${v}%`}
            tickLine={false}
            label={{ value: 'Sonnet Judge', position: 'bottom', fill: '#a1a4ac', fontSize: 13, offset: 25 }}
          />
          <YAxis
            type="number"
            dataKey="gpt"
            domain={[40, 100]}
            stroke="#232630"
            tick={{ fill: '#a1a4ac', fontSize: 13 }}
            tickFormatt

RadarChartComponent function · typescript · L32-L68 (37 LOC)

src/components/charts/RadarChart.tsx

export default function RadarChartComponent({ data, series, height = 420 }: RadarChartProps) {
  return (
    <div className="w-full border border-[var(--border)] rounded-lg bg-[var(--surface)] p-6 sm:p-8" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <RRadarChart data={data} cx="50%" cy="50%" outerRadius="70%">
          <PolarGrid stroke="#232630" />
          <PolarAngleAxis dataKey="axis" tick={{ fill: '#a1a4ac', fontSize: 13 }} />
          <PolarRadiusAxis
            angle={90}
            domain={[0, 100]}
            tick={{ fill: '#6b6e76', fontSize: 12 }}
            axisLine={false}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: 'var(--surface-2)',
              border: '1px solid var(--border-bright)',
              borderRadius: 12,
              fontSize: 13,
            }}
          />
          <Legend wrapperStyle={{ fontSize: 13, fontFamily: 'var(--font-mono), monospace', paddingTop: 8 }

ScatterTooltip function · typescript · L37-L47 (11 LOC)

src/components/charts/ScatterPlot.tsx

function ScatterTooltip({ active, payload }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div className="bg-[var(--surface-2)] border border-[var(--border-bright)] p-4 rounded-xl shadow-2xl text-sm">
      <p className="font-bold text-[var(--foreground)] mb-2">{d.name}</p>
      <p className="text-[var(--muted)]">X: <span className="text-[var(--foreground)] font-mono">{d.x.toFixed(1)}%</span></p>
      <p className="text-[var(--muted)]">Y: <span className="text-[var(--foreground)] font-mono">{d.y.toFixed(1)}%</span></p>
    </div>
  );
}

ScatterPlotChart function · typescript · L49-L112 (64 LOC)

src/components/charts/ScatterPlot.tsx

export default function ScatterPlotChart({
  data,
  xLabel,
  yLabel,
  xDomain = [50, 100],
  yDomain = [50, 100],
  avgX,
  avgY,
  height = 500,
}: ScatterPlotProps) {
  return (
    <div className="w-full border border-[var(--border)] rounded-lg bg-[var(--surface)] p-6 sm:p-8" style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <ScatterChart margin={{ top: 30, right: 40, bottom: 50, left: 50 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#232630" />
          <XAxis
            type="number"
            dataKey="x"
            domain={xDomain}
            stroke="#232630"
            tick={{ fill: '#a1a4ac', fontSize: 13 }}
            tickFormatter={(v) => `${v}%`}
            tickLine={false}
            label={{ value: xLabel, position: 'bottom', fill: '#a1a4ac', fontSize: 13, offset: 25 }}
          />
          <YAxis
            type="number"
            dataKey="y"
            domain={yDomain}
            stroke="#232630"

Repobility · open methodology · https://repobility.com/research/

CodeViewer function · typescript · L13-L67 (55 LOC)

src/components/code/CodeViewer.tsx

export default function CodeViewer({
  code,
  filename = 'file',
  highlightLines = [],
  maxHeight = '600px',
}: CodeViewerProps) {
  const lines = code.split('\n');

  return (
    <div className="border border-[var(--border)] rounded-lg bg-[var(--background)] overflow-hidden flex flex-col shadow-2xl ring-1 ring-white/5">
      <div className="px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)] flex items-center justify-between">
        <div className="flex items-center gap-3">
          <FileCode2 className="size-4 text-[var(--muted)]" />
          <span className="text-xs font-mono text-[var(--muted)] tracking-widest font-bold uppercase">
            {filename}
          </span>
        </div>
        <div className="flex gap-1.5">
          <span className="size-2.5 rounded-full bg-[var(--border)]" />
          <span className="size-2.5 rounded-full bg-[var(--border)]" />
          <span className="size-2.5 rounded-full bg-[var(--border)]" />
        </div>
      </div

parseLines function · typescript · L20-L147 (128 LOC)

src/components/code/DiffViewer.tsx

function parseLines(patch: string, bugLines: Set<number>): ParsedLine[] {
  const raw = patch.split('\n');
  const result: ParsedLine[] = [];

  for (const line of raw) {
    if (!line.trim()) continue;

    if (line.startsWith('## file:')) {
      result.push({ type: 'file-header', lineNum: null, content: line.replace(/^## file:\s*/, '').replace(/'/g, ''), isBugLine: false });
      continue;
    }
    if (line.startsWith('@@')) {
      result.push({ type: 'hunk-header', lineNum: null, content: line, isBugLine: false });
      continue;
    }
    if (line.startsWith('__')) {
      result.push({ type: 'hunk-label', lineNum: null, content: line.replace(/_/g, '').trim() || '...', isBugLine: false });
      continue;
    }

    // Parse "63 +    code" or "63 -    code" or "63      code"
    const match = line.match(/^(\d+)\s*([+-])?\s?(.*)/);
    if (match) {
      const num = parseInt(match[1]);
      const sign = match[2];
      const code = match[3] || '';
      const type = sign === '

DiffViewer function · typescript · L55-L147 (93 LOC)

src/components/code/DiffViewer.tsx

export default function DiffViewer({ patch, referenceBugs = [], maxHeight = '500px' }: DiffViewerProps) {
  const bugLines = new Set<number>();
  referenceBugs.forEach((b) => {
    for (let l = b.relevantLinesStart; l <= b.relevantLinesEnd; l++) bugLines.add(l);
  });

  const lines = parseLines(patch, bugLines);

  return (
    <div className="border border-[#30363d] rounded-md bg-[#0d1117] overflow-hidden flex flex-col">
      {lines.map((line, i) => {
        if (line.type === 'file-header') {
          return (
            <div key={i} className="flex items-center gap-2 px-4 py-2 bg-[#161b22] border-b border-[#30363d] sticky top-0 z-10">
              <FileCode2 className="size-4 text-[#8b949e]" />
              <span className="text-xs font-mono text-[#e6edf3] font-semibold">{line.content}</span>
            </div>
          );
        }

        if (line.type === 'hunk-header') {
          return (
            <div key={i} className="px-4 py-1 bg-[#1f2937]/50 text-[#79c0ff] text-

TraceCard function · typescript · L27-L228 (202 LOC)

src/components/code/TraceCard.tsx

export default function TraceCard({ sample, defaultExpanded = false }: TraceCardProps) {
  const [expanded, setExpanded] = useState(defaultExpanded);
  const [judgeTab, setJudgeTab] = useState<'sonnet' | 'gpt'>('sonnet');

  return (
    <div className="border border-[#30363d] rounded-md bg-[#0d1117] overflow-hidden">
      {/* Summary Row — like a GitHub PR title */}
      <button
        onClick={() => setExpanded((v) => !v)}
        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[#161b22] transition-colors text-left"
      >
        {sample.pass ? (
          <GitPullRequest className="size-4 text-[#3fb950] shrink-0" />
        ) : (
          <GitPullRequest className="size-4 text-[#f85149] shrink-0" />
        )}
        <div className="flex-1 min-w-0">
          <span className="text-sm text-[#e6edf3] font-semibold truncate block">
            {sample.testDescription || sample.prSummary}
          </span>
        </div>
        <div className="flex items-center gap-

CodeScanAnimation function · typescript · L33-L213 (181 LOC)

src/components/hero/CodeScanAnimation.tsx

export default function CodeScanAnimation() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // Animate scan line position
    let frame: number;
    let scanY = -20;
    const speed = 0.35;
    const totalHeight = CODE_LINES.length * 22;

    const scanLine = container.querySelector('[data-scan]') as HTMLElement;
    const lines = container.querySelectorAll('[data-line]') as NodeListOf<HTMLElement>;
    const bugMarkers = container.querySelectorAll('[data-bug]') as NodeListOf<HTMLElement>;

    function animate() {
      scanY += speed;
      if (scanY > totalHeight + 40) {
        scanY = -20;
        // Reset all lines
        lines.forEach((l) => {
          l.style.opacity = '0.12';
          l.style.transform = 'scaleX(1)';
        });
        bugMarkers.forEach((b) => {
          b.style.opacity = '0';
          b.style.transform = 'scale(0)';
        });
      }

      if (sc

animate function · typescript · L50-L90 (41 LOC)

src/components/hero/CodeScanAnimation.tsx

    function animate() {
      scanY += speed;
      if (scanY > totalHeight + 40) {
        scanY = -20;
        // Reset all lines
        lines.forEach((l) => {
          l.style.opacity = '0.12';
          l.style.transform = 'scaleX(1)';
        });
        bugMarkers.forEach((b) => {
          b.style.opacity = '0';
          b.style.transform = 'scale(0)';
        });
      }

      if (scanLine) {
        scanLine.style.transform = `translateY(${scanY}px)`;
      }

      // Reveal lines as scan passes
      lines.forEach((l, i) => {
        const lineY = i * 22;
        if (scanY > lineY) {
          const isBug = l.dataset.isbug === 'true';
          l.style.opacity = isBug ? '0.9' : '0.3';
          l.style.transition = 'opacity 0.4s ease, transform 0.3s ease';
        }
      });

      // Show bug markers
      bugMarkers.forEach((b) => {
        const bugY = parseFloat(b.dataset.y || '0');
        if (scanY > bugY + 5) {
          b.style.opacity = '1';
          b.style.

Footer function · typescript · L18-L88 (71 LOC)

src/components/layout/Footer.tsx

export default function Footer() {
  return (
    <footer className="w-full border-t border-[var(--border)] bg-[var(--surface)]">
      <div className="max-w-[1400px] mx-auto px-6 sm:px-12 py-12">
        {/* Top section */}
        <div className="flex flex-col md:flex-row justify-between gap-10 mb-10">
          {/* Kodus brand */}
          <div className="max-w-sm">
            <a href="https://kodus.io" target="_blank" rel="noopener noreferrer" className="inline-block mb-4 opacity-80 hover:opacity-100 transition-opacity">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src="/kodus-logo.webp" alt="Kodus" className="h-8" />
            </a>
            <p className="text-sm text-[var(--muted)] leading-relaxed">
              CodeReviewBench is maintained by Kodus. We build AI code review tools and publish open benchmarks so you can verify the results yourself.
            </p>
          </div>

          {/* Link columns */}
          <div

Navbar function · typescript · L15-L90 (76 LOC)

src/components/layout/Navbar.tsx

export default function Navbar() {
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <nav className="w-full border-b border-[var(--border)] bg-[var(--background)]/90 backdrop-blur-xl sticky top-0 z-40">
      <div className="max-w-[1400px] mx-auto px-6 sm:px-12 flex items-center justify-between h-16">
        <Link href="/" className="flex items-center gap-3 group">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/kodus-logo.webp"
            alt="Kodus"
            className="h-6 opacity-90 group-hover:opacity-100 transition-opacity"
          />
          <div className="w-px h-5 bg-[var(--border)]" />
          <span className="text-[15px] font-semibold tracking-tight text-[var(--foreground)]">
            CodeReviewBench
          </span>
        </Link>

        {/* Desktop Links */}
        <div className="hidden sm:flex items-center gap-1">
          {NAV_LINKS.map((link)

Want this analysis on your repo? https://repobility.com/scan/

Badge function · typescript · L17-L29 (13 LOC)

src/components/shared/Badge.tsx

export default function Badge({ children, variant = 'default', className }: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-mono font-semibold border',
        VARIANTS[variant],
        className
      )}
    >
      {children}
    </span>
  );
}

FilterBar function · typescript · L24-L53 (30 LOC)

src/components/shared/FilterBar.tsx

export default function FilterBar({ groups, className }: FilterBarProps) {
  return (
    <div className={cn('flex flex-wrap items-center gap-6', className)}>
      {groups.map((group) => (
        <div key={group.key} className={cn('flex items-center gap-2', group.disabled && 'opacity-30 pointer-events-none')}>
          <span className="text-xs font-mono text-[var(--muted-dim)] uppercase tracking-widest font-bold shrink-0">
            {group.label}:
          </span>
          <div className="flex flex-wrap gap-0.5">
            {group.options.map((opt) => (
              <button
                key={opt.value}
                onClick={() => group.onChange(opt.value)}
                disabled={group.disabled}
                className={cn(
                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all',
                  group.value === opt.value
                    ? 'bg-[var(--surface-2)] text-[var(--foreground)]'
                    : 'text-[var(--muted)] hover:text

ScoreBar function · typescript · L10-L20 (11 LOC)

src/components/shared/ScoreBar.tsx

export default function ScoreBar({ value, max = 100, className, colorClass }: ScoreBarProps) {
  const pct = Math.min(100, (value / max) * 100);
  return (
    <div className={cn('h-2 bg-[var(--surface-2)] rounded-full overflow-hidden', className)}>
      <div
        className={cn('h-full rounded-full transition-all', colorClass || (pct > 80 ? 'bg-[var(--accent)]' : 'bg-[var(--border-bright)]'))}
        style={{ width: `${pct}%` }}
      />
    </div>
  );
}

StatsCard function · typescript · L13-L35 (23 LOC)

src/components/shared/StatsCard.tsx

export default function StatsCard({ icon: Icon, label, value, delta, className }: StatsCardProps) {
  return (
    <div className={cn('flex flex-col gap-3 p-5 border border-[var(--border)] rounded-lg bg-[var(--surface)]', className)}>
      <div className="flex items-center justify-between">
        <span className="text-xs font-mono text-[var(--muted-dim)] uppercase tracking-widest font-bold">{label}</span>
        {Icon && <Icon className="size-4 text-[var(--muted)]" />}
      </div>
      <div className="flex items-end gap-2">
        <span className="text-2xl font-bold tabular-nums tracking-tight text-[var(--foreground)] font-mono">{value}</span>
        {delta !== undefined && (
          <span
            className={cn(
              'text-xs font-mono font-bold mb-0.5',
              delta >= 0 ? 'text-[var(--accent)]' : 'text-[#f85149]'
            )}
          >
            {formatDelta(delta)} vs avg
          </span>
        )}
      </div>
    </div>
  );
}

ViewSwitcher function · typescript · L18-L41 (24 LOC)

src/components/shared/ViewSwitcher.tsx

export default function ViewSwitcher({ views, active, onChange }: ViewSwitcherProps) {
  return (
    <div className="inline-flex p-1 bg-[var(--surface)] rounded-lg border border-[var(--border)]">
      {views.map((v) => {
        const Icon = v.icon;
        return (
          <button
            key={v.key}
            onClick={() => onChange(v.key)}
            className={cn(
              'flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-md transition-all',
              active === v.key
                ? 'bg-[var(--surface-2)] text-[var(--foreground)] shadow-sm'
                : 'text-[var(--muted)] hover:text-[var(--foreground)]'
            )}
          >
            {Icon && <Icon className="size-4" />}
            {v.label}
          </button>
        );
      })}
    </div>
  );
}

formatScore function · typescript · L1-L3 (3 LOC)

src/lib/format.ts

export function formatScore(score: number): string {
  return `${score.toFixed(1)}%`;
}

formatLatency function · typescript · L5-L8 (4 LOC)

src/lib/format.ts

export function formatLatency(ms: number): string {
  if (ms < 1000) return `${Math.round(ms)}ms`;
  return `${(ms / 1000).toFixed(1)}s`;
}

shortModelName function · typescript · L10-L13 (4 LOC)

src/lib/format.ts

export function shortModelName(id: string): string {
  const last = id.split(':').pop() || id;
  return last.split('/').pop() || last;
}

Repobility (the analyzer behind this table) · https://repobility.com

formatDelta function · typescript · L15-L18 (4 LOC)

src/lib/format.ts

export function formatDelta(value: number): string {
  const sign = value >= 0 ? '+' : '';
  return `${sign}${value.toFixed(1)}`;
}

slugify function · typescript · L20-L25 (6 LOC)

src/lib/format.ts

export function slugify(str: string): string {
  return str
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/(^-|-$)/g, '');
}

cn function · typescript · L4-L6 (3 LOC)

src/lib/utils.ts

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}