ai-research-survey

tensions.ts (10664B)

---

 import { loadTensions, type TensionClaim } from '../data';
 
 const TENSION_META: Record<string, { title: string; desc: string; positive: string; nuanced: string }> = {
   productivity: {
     title: 'Productivity Paradox',
     desc: 'Does AI actually make developers faster? Studies claiming large speedups tend to use weaker methodology than those finding mixed or negative results. The only RCT with experienced developers found a 19% slowdown.',
     positive: 'AI increases productivity',
     nuanced: 'Effects are mixed or negative',
   },
   benchmarks: {
     title: 'Benchmark Validity Crisis',
     desc: 'Papers simultaneously build on benchmarks and distrust them. SOTA claims proliferate, but fewer than half of benchmark papers discuss whether their benchmark actually measures the claimed capability.',
     positive: 'Benchmark success = capability',
     nuanced: 'Benchmarks are flawed or gamed',
   },
   agents: {
     title: 'Agent Capability Gap',
     desc: 'Success claims outnumber limitation findings, but the limitations come from more rigorous papers. Agents succeed in sandboxes; failures are found in deployment. The gap between demo and production is the real story.',
     positive: 'Agents succeed at tasks',
     nuanced: 'Agents fail in deployment',
   },
   security: {
     title: 'Security Arms Race',
     desc: 'Defense papers claim their mitigations work; attack papers show they can be bypassed. Attacks outnumber defenses and the cycle repeats with each new technique. Neither side engages seriously with the other.',
     positive: 'Defenses work',
     nuanced: 'Attacks succeed',
   },
   code_quality: {
     title: 'Code Quality Paradox',
     desc: 'LLMs simultaneously repair bugs and introduce new ones. The same tools that fix code also generate insecure configurations, hallucinate APIs, and increase cognitive complexity. Which effect dominates depends on the task.',
     positive: 'LLMs improve code',
     nuanced: 'LLMs introduce defects',
   },
   scaling: {
     title: 'Scaling Debate',
     desc: 'Smaller efficient models claim to match larger ones at a fraction of the cost. But scaling skeptics find diminishing returns, prohibitive inference costs, and capability gaps that distillation cannot close. The field is split nearly evenly.',
     positive: 'Scaling is efficient',
     nuanced: 'Scaling hits limits',
   },
 };
 
 function meanScore(claims: TensionClaim[]): number {
   if (!claims.length) return 0;
   return Math.round(claims.reduce((s, c) => s + c.score, 0) / claims.length * 10) / 10;
 }
 
 function scoreColor(s: number): string {
   if (s < 30) return 'var(--red)';
   if (s < 50) return 'var(--yellow)';
   if (s < 70) return 'var(--accent)';
   return 'var(--green)';
 }
 
 function scoreHex(s: number): string {
   if (s < 35) return '#d04040';
   if (s < 45) return '#c08030';
   if (s < 55) return '#a0a040';
   return '#40a060';
 }
 
 export async function renderTensions(app: HTMLElement) {
   app.innerHTML = '<div class="spinner"></div>';
   const tensions = await loadTensions();
 
   app.innerHTML = Object.entries(tensions).map(([key, sides]) => {
     const meta = TENSION_META[key];
     const posMean = meanScore(sides.positive);
     const nuaMean = meanScore(sides.nuanced);
 
     return `<div class="tension-group section">
       <h2>${meta.title}</h2>
       <p style="font-size:0.85rem;color:var(--text-dim);margin-bottom:0.75rem">${meta.desc}</p>
       <div class="tension-stat">Positive claims: ${sides.positive.length} (mean score ${posMean}%) \u00b7 Nuanced claims: ${sides.nuanced.length} (mean score ${nuaMean}%)</div>
 
       ${renderButterfly(sides.positive, sides.nuanced, meta)}
 
       <div class="tension-columns">
         <div class="tension-col">
           <h4>${meta.positive}</h4>
           ${renderClaims(sides.positive)}
         </div>
         <div class="tension-col">
           <h4>${meta.nuanced}</h4>
           ${renderClaims(sides.nuanced)}
         </div>
       </div>
     </div>`;
   }).join('');
 }
 
 function renderButterfly(positive: TensionClaim[], nuanced: TensionClaim[], meta: { positive: string; nuanced: string }): string {
   const posByYear = new Map<number, TensionClaim[]>();
   const nuaByYear = new Map<number, TensionClaim[]>();
 
   for (const c of positive) {
     if (!c.year || c.year < 2022) continue;
     if (!posByYear.has(c.year)) posByYear.set(c.year, []);
     posByYear.get(c.year)!.push(c);
   }
   for (const c of nuanced) {
     if (!c.year || c.year < 2022) continue;
     if (!nuaByYear.has(c.year)) nuaByYear.set(c.year, []);
     nuaByYear.get(c.year)!.push(c);
   }
 
   const sortedYears = [...new Set([...posByYear.keys(), ...nuaByYear.keys()])].sort();
   if (sortedYears.length < 2) return '';
 
   let maxCount = 1;
   for (const y of sortedYears) {
     maxCount = Math.max(maxCount, (posByYear.get(y) || []).length, (nuaByYear.get(y) || []).length);
   }
 
   // Layout: bars with border thickness encoding methodology score
   const w = 600, h = 280;
   const pad = { l: 30, r: 15, t: 30, b: 30 };
   const chartW = w - pad.l - pad.r;
   const chartH = h - pad.t - pad.b;
   const midY = pad.t + chartH / 2;
   const barMaxH = chartH / 2 - 15;
   const colW = chartW / sortedYears.length;
 
   // Map score to bar width: 20% → 30% of column, 70% → 85% of column
   function barWidth(score: number): number {
     const t = Math.max(0, Math.min(1, (score - 20) / 50));
     return colW * (0.25 + t * 0.5);
   }
 
   let svg = '';
 
   // Zero line
   svg += `<line x1="${pad.l}" y1="${midY}" x2="${w - pad.r}" y2="${midY}" stroke="var(--border)" stroke-width="1"/>`;
 
   // Count scale ticks
   for (const count of [Math.round(maxCount / 2), maxCount]) {
     const tickH = (count / maxCount) * barMaxH;
     svg += `<text x="${pad.l - 4}" y="${midY - tickH + 3}" text-anchor="end" font-size="9" fill="var(--text-dim)">${count}</text>`;
     svg += `<text x="${pad.l - 4}" y="${midY + tickH + 3}" text-anchor="end" font-size="9" fill="var(--text-dim)">${count}</text>`;
   }
 
   // Side labels
   svg += `<text x="${w - pad.r}" y="${pad.t + 8}" text-anchor="end" font-size="10" fill="var(--text-dim)">\u2191 ${meta.positive}</text>`;
   svg += `<text x="${w - pad.r}" y="${h - pad.b - 2}" text-anchor="end" font-size="10" fill="var(--text-dim)">\u2193 ${meta.nuanced}</text>`;
 
   for (let i = 0; i < sortedYears.length; i++) {
     const y = sortedYears[i];
     const cx = pad.l + i * colW + colW / 2;
     const posC = posByYear.get(y) || [];
     const nuaC = nuaByYear.get(y) || [];
     const posCount = posC.length;
     const nuaCount = nuaC.length;
     const posMean = posC.length ? posC.reduce((s, c) => s + c.score, 0) / posC.length : 0;
     const nuaMean = nuaC.length ? nuaC.reduce((s, c) => s + c.score, 0) / nuaC.length : 0;
 
     // Year label
     svg += `<text x="${cx}" y="${h - 8}" text-anchor="middle" font-size="11" fill="var(--text)">${y}</text>`;
 
     // Positive bar — width = score, height = count
     if (posCount > 0) {
       const barH = (posCount / maxCount) * barMaxH;
       const bw = barWidth(posMean);
       svg += `<rect x="${cx - bw / 2}" y="${midY - barH - 1}" width="${bw}" height="${barH}" rx="2" fill="var(--accent)" opacity="0.7">
         <title>${y} ${meta.positive}: ${posCount} claims, mean score ${Math.round(posMean)}%</title>
       </rect>`;
       svg += `<text x="${cx}" y="${midY - barH - 5}" text-anchor="middle" font-size="9" fill="var(--text)">${posCount} \u00b7 ${Math.round(posMean)}%</text>`;
     }
 
     // Nuanced bar — width = score, height = count
     if (nuaCount > 0) {
       const barH = (nuaCount / maxCount) * barMaxH;
       const bw = barWidth(nuaMean);
       svg += `<rect x="${cx - bw / 2}" y="${midY + 1}" width="${bw}" height="${barH}" rx="2" fill="var(--text-dim)" opacity="0.5">
         <title>${y} ${meta.nuanced}: ${nuaCount} claims, mean score ${Math.round(nuaMean)}%</title>
       </rect>`;
       svg += `<text x="${cx}" y="${midY + barH + 13}" text-anchor="middle" font-size="9" fill="var(--text)">${nuaCount} \u00b7 ${Math.round(nuaMean)}%</text>`;
     }
   }
 
   // Quality-weighted balance line: for each year, compute
   // (positive_count * positive_mean - nuanced_count * nuanced_mean) / total_count
   // Positive values = optimism dominates, negative = skepticism dominates
   // Scale: maps to y position between top and bottom of chart
   const balancePoints: string[] = [];
   for (let i = 0; i < sortedYears.length; i++) {
     const y = sortedYears[i];
     const cx = pad.l + i * colW + colW / 2;
     const posC = posByYear.get(y) || [];
     const nuaC = nuaByYear.get(y) || [];
     if (posC.length + nuaC.length === 0) continue;
 
     const posMean = posC.length ? posC.reduce((s, c) => s + c.score, 0) / posC.length : 0;
     const nuaMean = nuaC.length ? nuaC.reduce((s, c) => s + c.score, 0) / nuaC.length : 0;
     // Weighted balance: positive pushes up, nuanced pushes down, weighted by mean score
     const posWeight = posC.length * posMean;
     const nuaWeight = nuaC.length * nuaMean;
     const totalWeight = posWeight + nuaWeight;
     // Balance from -1 (all nuanced) to +1 (all positive)
     const balance = totalWeight > 0 ? (posWeight - nuaWeight) / totalWeight : 0;
     // Map to y: +1 → top, -1 → bottom, 0 → midY
     const lineY = midY - balance * barMaxH * 0.8;
     balancePoints.push(`${cx},${lineY}`);
   }
 
   if (balancePoints.length >= 2) {
     svg += `<polyline points="${balancePoints.join(' ')}" fill="none" stroke="var(--text)" stroke-width="2" stroke-dasharray="6,3" opacity="0.6"/>`;
     for (const pt of balancePoints) {
       const [px, py] = pt.split(',');
       svg += `<circle cx="${px}" cy="${py}" r="3" fill="var(--text)" opacity="0.6"/>`;
     }
   }
 
   return `<div style="margin:1rem 0">
     <p style="font-size:0.78rem;color:var(--text-dim);margin-bottom:0.5rem"><strong>Height</strong> = claim count. <strong>Width</strong> = methodology score (wider = more rigorous). A tall narrow bar = many claims from weak papers. Dashed line = quality-weighted balance.</p>
     <svg viewBox="0 0 ${w} ${h}" style="width:100%;max-width:${w}px">${svg}</svg>
   </div>`;
 }
 
 function renderClaims(claims: TensionClaim[]): string {
   if (!claims.length) return '<p style="color:var(--text-dim);font-size:0.82rem">No claims in this category.</p>';
   const sorted = [...claims].sort((a, b) => b.score - a.score).slice(0, 20);
   return sorted.map(c => `
     <div class="tension-claim">
       <span class="support-badge ${c.supported}">${c.supported}</span>
       <span style="color:${scoreColor(c.score)};font-family:var(--font);font-size:0.75rem">${c.score}%</span>
       ${c.claim.length > 120 ? c.claim.slice(0, 117) + '...' : c.claim}
       <a href="#/paper/${c.paper_id}">\u2192</a>
     </div>
   `).join('');
 }