update

Author: atharvas

src/components/AgentCard.svelte

@@ -1,7 +1,7 @@
 <script>
     import ScrollHisto from "$components/ScrollHisto.svelte";
     import Scatter from "$components/Scatter.svelte";
-    import { navAgent, agentStats, agentAdvantageByAgent, thresholdAgentNum, thresholdOracleNum } from "$stores/misc.js";
+    import { navAgent, agentStats, overallAgentAdvantage, thresholdAgentNum, thresholdOracleNum } from "$stores/misc.js";
     import inView from "$actions/inView.js";
     import { format } from "d3-format";
     import { formatAgentDisplayName } from "$utils/benchmarkData.js";
@@ -18,7 +18,7 @@
 
     // Calculate agent statistics
     $: stats = $agentStats[agent];
-    $: agentAdvantageValue = $agentAdvantageByAgent[agent] || 0;
+    $: agentAdvantageValue = $overallAgentAdvantage?.[agent] ?? 0;
     $: summaryBullets = stats ? [
         `Median agent speedup: ${(stats.medianAgentNop || 0).toFixed(2)}× (target ${$thresholdAgentNum.toFixed(2)}×)`,
         `Median oracle speedup: ${(stats.medianOracleNop || 0).toFixed(2)}× (target ${$thresholdOracleNum.toFixed(2)}×)`,

src/components/Filters.svelte

@@ -226,7 +226,7 @@
                         bind:selected={selectedLevel}
                         options={levelOptions}
                         valType = "level"
-                        placeholder="All levels"
+                        placeholder="None"
                         maxSelect={1}
                         ariaLabel="select aggregation level"
                     >

src/components/Footer.svelte

@@ -17,6 +17,12 @@
 	const relatedWorkText = relatedWorkConfig.text ?? "";
 	const showRelatedWork = relatedWorkConfig.show !== false && Boolean(relatedWorkText);
 
+	// Funding configuration
+	const fundingConfig = paperFooter.funding || {};
+	const fundingTitle = fundingConfig.title ?? "Funding";
+	const fundingDescription = fundingConfig.description ?? "";
+	const showFunding = fundingConfig.show !== false && Boolean(fundingDescription);
+
 	// Acknowledgements configuration
 	const acknowledgementsConfig = paperFooter.acknowledgements || {};
 	const acknowledgementsTitle = acknowledgementsConfig.title ?? "Acknowledgements";
@@ -43,6 +49,13 @@
 					</div>
 				</section>
 			{/if}
+
+			{#if showFunding && fundingDescription}
+				<section class="paper-section funding-section">
+					<h3 class="paper-section-title">{fundingTitle}</h3>
+					<p class="paper-section-text">{@html fundingDescription}</p>
+				</section>
+			{/if}
 		</div>
 
 		<!-- Acknowledgements as footer -->
@@ -155,6 +168,18 @@
     text-align: justify;
   }
 
+  .paper-section-text :global(a) {
+    color: var(--wine-gold);
+    text-decoration: none;
+    font-weight: 600;
+  }
+
+  .paper-section-text :global(a:hover),
+  .paper-section-text :global(a:focus-visible) {
+    color: var(--wine-dark-gold);
+    text-decoration: underline;
+  }
+
   /* Footer-style Acknowledgements */
   .footer-acknowledgements {
     margin-top: 3rem;

src/components/PaperHeader.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from "svelte";
 	import Icon from "$components/helpers/Icon.svelte";
+	import leaderboardData from "$data/leaderboard.json";
 
 	const copy = getContext("copy") || {};
 	const headerCopy = copy.paperHeader || {};
@@ -55,8 +56,8 @@
 			: defaultAbstractParagraphs;
 
 	// Hardcoded leaderboard data matching main Leaderboard.svelte structure
-	const leaderboardTitle = "Leaderboard Snapshot";
-	const leaderboardDescription = "This leaderboard displays the agent advantage scores by aggregation level. Higher scores indicate better performance relative to the oracle.";
+	const leaderboardTitle = headerCopy.leaderboard.title;
+	const leaderboardDescription = headerCopy.leaderboard.description;
 
 	// Level display labels - matching main Leaderboard
 	const LEVEL_DISPLAY_LABELS = {
@@ -71,40 +72,17 @@
 	const levels = ["param-level", "func-level", "class-level", "module-level"];
 
 	// Hardcoded table data - example data, replace with actual values
-	const tableData = [
-		{
-			displayName: "GPT-5",
-			levels: {
-				"param-level": 0.15,
-				"func-level": 0.12,
-				"class-level": 0.08,
-				"module-level": 0.05,
-			},
-			overall: 0.10
-		},
-		{
-			displayName: "Claude Sonnet 4.0",
-			levels: {
-				"param-level": 0.13,
-				"func-level": 0.10,
-				"class-level": 0.06,
-				"module-level": 0.03,
-			},
-			overall: 0.08
-		},
-		{
-			displayName: "Oracle (Human)",
-			levels: {
-				"param-level": 0.25,
-				"func-level": 0.22,
-				"class-level": 0.18,
-				"module-level": 0.15,
-			},
-			overall: 0.20
-		}
-	];
+	const tableData = Array.isArray(leaderboardData?.tableData) ? leaderboardData.tableData : [];
 
 	const hero = headerCopy.hero || {};
+	const heroCommand = typeof hero.command === "string" ? hero.command.trim() : "";
+	const hasHeroContent = Boolean(
+		hero?.eyebrow ||
+		hero?.instructions ||
+		heroCommand ||
+		hero?.body ||
+		(hero?.cta && hero.cta.label)
+	);
 
 	// Helper functions matching main Leaderboard.svelte
 	function formatAdvantage(value) {
@@ -222,13 +200,20 @@
 			</div>
 		{/if}
 
-		{#if hero?.title}
+		{#if hasHeroContent}
 			<div class="paper-hero">
 				{#if hero.eyebrow}<p class="hero-eyebrow">{hero.eyebrow}</p>{/if}
-				<h3>{hero.title}</h3>
-				{#if hero.body}<p class="hero-body">{hero.body}</p>{/if}
-				{#if hero.cta?.label}
-					<a class="hero-cta" href={hero.cta.href ?? "#"}>{hero.cta.label}</a>
+					{#if hero.instructions}
+						<p class="hero-instructions">{@html hero.instructions}</p>
+					{/if}
+					{#if heroCommand}
+						<div class="hero-command">
+							<pre class="hero-command__code" tabindex="0"><code>{heroCommand}</code></pre>
+						</div>
+					{/if}
+					{#if hero.body}<p class="hero-body">{hero.body}</p>{/if}
+					{#if hero.cta?.label}
+						<a class="hero-cta" href={hero.cta.href ?? "#"}>{hero.cta.label}</a>
 				{/if}
 			</div>
 		{/if}
@@ -492,6 +477,9 @@
 		border-radius: 8px;
 		background: rgba(24, 26, 31, 0.5);
 		border: 1px solid var(--wine-dark-gray);
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
 		text-align: center;
 	}
 
@@ -500,24 +488,53 @@
 		font-size: var(--12px);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		margin: 0 0 0.75rem;
+		margin: 0 auto;
 		color: var(--wine-dark-tan);
 	}
 
-	.paper-hero h3 {
-		margin: 0 0 1rem;
-		font-size: var(--28px);
+	.hero-instructions {
+		margin: 0 auto;
 		color: var(--wine-tan);
+		font-size: var(--16px);
+		line-height: 1.6;
+		max-width: 620px;
 	}
 
 	.hero-body {
-		margin: 0 auto 1.5rem;
+		margin: 0 auto;
 		max-width: 640px;
 		color: var(--wine-tan);
 		font-size: var(--18px);
 		line-height: 1.65;
 	}
 
+	.hero-instructions :global(a) {
+		color: var(--wine-gold);
+		text-decoration: none;
+		font-weight: 600;
+	}
+
+	.hero-instructions :global(a:hover),
+	.hero-instructions :global(a:focus-visible) {
+		color: var(--wine-dark-gold);
+		text-decoration: underline;
+	}
+	/* hero instructions > a href color should be gold */
+	.hero-instructions a {
+		color: var(--wine-gold);
+		text-decoration: none;
+		transition: color 0.2s ease;
+	}
+
+	.hero-command {
+		background: rgba(5, 5, 5, 0.45);
+		border: 1px solid rgba(207, 202, 191, 0.2);
+		border-radius: 10px;
+		padding: 1.25rem 1.5rem;
+		font-family: var(--mono);
+	}
+
+
 	.hero-cta {
 		display: inline-flex;
 		align-items: center;
@@ -602,6 +619,11 @@
 		.paper-hero {
 			padding: 2rem 1.25rem;
 		}
+
+		.hero-command {
+			padding: 1.5rem 1rem;
+		}
+
 	}
 
 	@media (max-width: 480px) {
@@ -645,10 +667,6 @@
 			font-size: var(--12px);
 		}
 
-		.paper-hero h3 {
-			font-size: var(--22px);
-		}
-
 		.hero-body {
 			font-size: var(--16px);
 		}

src/components/layercake/Scatter.svg.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { getContext, onMount } from "svelte";
-	import { line } from 'd3-shape';
+	import { line, area } from 'd3-shape';
 	import { thresholdAgentNum, thresholdOracleNum } from "$stores/misc.js";
 
 	const { data, xGet, yGet, xScale, yScale, width, height, padding, xDomain, yDomain } = getContext("LayerCake");
@@ -57,25 +57,69 @@
     return [uniq[0], uniq[uniq.length - 1]];
   })();
 
+	const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
   // UPDATED: build the path from the extended endpoints
   $: equalLinePath = extendedGuideLine
     ? line()
         .x(d => $xScale(d[0]))
         .y(d => $yScale(d[1]))
         (extendedGuideLine)
     : null;
+
+	$: shadedAreaPath = (() => {
+		if (!$xDomain || !$yDomain) return null;
+
+		const [xMin, xMax] = $xDomain;
+		const [yMin, yMax] = $yDomain;
+		if (!Number.isFinite(xMin) || !Number.isFinite(xMax) || xMax <= xMin) return null;
+		if (!Number.isFinite(yMin) || !Number.isFinite(yMax) || yMax <= yMin) return null;
+
+		const agentThreshold = Number($thresholdAgentNum);
+		const oracleThreshold = Number($thresholdOracleNum);
+		if (!Number.isFinite(agentThreshold) || !Number.isFinite(oracleThreshold)) return null;
+
+		const xStart = clamp(agentThreshold, xMin, xMax);
+		if (xStart >= xMax) return null;
+
+		if (Math.abs(agentThreshold) < 1e-6) return null; // vertical red line => undefined "under" region
+
+		const slope = oracleThreshold / agentThreshold;
+		if (!Number.isFinite(slope) || slope < 0) return null;
+
+		const steps = 40;
+		const dx = (xMax - xStart) / steps;
+		const points = [];
+		let hasArea = false;
+
+		for (let i = 0; i <= steps; i++) {
+			const xVal = xStart + dx * i;
+			const rawY = slope * xVal;
+			const clampedY = clamp(rawY, yMin, yMax);
+			if (clampedY > yMin + 1e-6) {
+				hasArea = true;
+			}
+			points.push({ x: xVal, y: clampedY });
+		}
+
+		if (!hasArea) return null;
+
+		const shadedArea = area()
+			.x(d => $xScale(d.x))
+			.y0(() => $yScale(yMin))
+			.y1(d => $yScale(d.y));
+
+		return shadedArea(points);
+	})();
 </script>
 
 <g class="median-markings">
-	<rect
-		class="highlight-quadrant"
-		x={$xScale($thresholdAgentNum)}
-		y={$yScale($thresholdOracleNum)}
-		width={$width - $xScale($thresholdAgentNum)}
-		height={$height - $yScale($thresholdOracleNum)}
-		fill="#363B45"
-		opacity=0.3
-	/>
+	{#if shadedAreaPath}
+		<path
+			class="highlight-region"
+			d={shadedAreaPath}
+		/>
+	{/if}
 </g>
 <g class="card-benchmark-circle">
 	{#each $data[0] as d, i}
@@ -104,12 +148,19 @@
 	}
 	.equal-advantage-line {
 		stroke-width: 2;
-		stroke: var(--wine-red);
+		stroke: var(--wine-tan);
 		fill: none;
 	}
 
-	.oracleAVG, .agentAVG {
-		stroke-width: 2;
+	.oracleAVG,
+	.agentAVG {
+		stroke-width: 1;
 		stroke: var(--wine-tan);
+		stroke-dasharray: 4 4;
+	}
+
+	.highlight-region {
+		fill: #363B45;
+		opacity: 0.3;
 	}
 </style>