add refactoring

Author: atharvas

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "svelte-starter",
+	"name": "formulacode-www",
 	"version": "5.15.1",
 	"scripts": {
 		"deleteImgs": "node tasks/deleteNonAnimalImgs.js",

src/actions/keepWithinBox.js

@@ -5,7 +5,9 @@ function getXY(node) {
 		.map((d) => +d.replace(/[^0-9.]/g, ""));
 }
 
-// TODO top and bottom
+// TODO: Top and bottom bounds not implemented - currently only handles left/right edges
+// This is sufficient for current use case (horizontal scroll positioning)
+// If vertical bounds are needed, add similar logic for top/bottom edges
 export default function keepWithinBox(node, params = {}) {
 	function check({ width }) {
 		const { top, left, right, bottom } = node.getBoundingClientRect();

src/components/AgentAdvantageTable.svelte

@@ -2,6 +2,7 @@
     import { onMount } from "svelte";
     import { browser } from "$app/environment";
     import { bigScatterData } from "$stores/misc.js";
+    import { LEVEL_DISPLAY_LABELS, LEVEL_ORDER, CELL_NEUTRAL_RANGE } from "$utils/constants.js";
 
     // Lazy-load grid only in browser to avoid SSR 'document' errors
     let GridComponent = null;
@@ -12,15 +13,9 @@
         }
     });
 
-    // Map of level names for display
-    const levelLabels = {
-        "param-level": "Level 0: Params",
-        "func-level": "Level 1: Functions",
-        "class-level": "Level 2: Classes",
-        "module-level": "Level 3: Modules"
-    };
-
-    const levelOrder = ["param-level", "func-level", "class-level", "module-level"];
+    // Use centralized level labels and order
+    const levelLabels = LEVEL_DISPLAY_LABELS;
+    const levelOrder = LEVEL_ORDER;
 
     // Helper to calculate median
     function calculateMedian(values) {
@@ -45,7 +40,7 @@
             return 'cell-neutral';
         }
         const numValue = parseFloat(value);
-        if (numValue >= 0.95 && numValue <= 1.05) {
+        if (numValue >= CELL_NEUTRAL_RANGE.MIN && numValue <= CELL_NEUTRAL_RANGE.MAX) {
             return 'cell-neutral';
         }
         if (numValue < 1.00) {
@@ -151,16 +146,16 @@
 
     /* wx-svelte-grid custom theme */
     .advantage-table-wrapper :global(.wx-grid) {
-        --wx-background: #181a1f;
-        --wx-color: #CFCABF;
+        --wx-background: var(--wine-black);
+        --wx-color: var(--wine-tan);
         --wx-border: #3a3d45;
         --wx-font-family: var(--sans);
         font-size: 16px;
     }
 
     .advantage-table-wrapper :global(.wx-header) {
         background: #2a2d35;
-        color: #CFCABF;
+        color: var(--wine-tan);
         font-weight: 700;
     }
 
@@ -174,16 +169,16 @@
 
     /* Cell styling based on value */
     .advantage-table-wrapper :global(.cell-neutral) {
-        background-color: rgba(207, 202, 191, 0.05);
-        color: #CFCABF;
+        background-color: var(--wine-tan-transparent);
+        color: var(--wine-tan);
         padding: 0.25rem 0.5rem;
         border-radius: 3px;
         display: inline-block;
     }
 
     .advantage-table-wrapper :global(.cell-negative) {
         background-color: rgba(232, 69, 69, 0.15);
-        color: #e84545;
+        color: var(--score-bad);
         font-weight: 600;
         padding: 0.25rem 0.5rem;
         border-radius: 3px;
@@ -192,7 +187,7 @@
 
     .advantage-table-wrapper :global(.cell-positive) {
         background-color: rgba(15, 157, 88, 0.15);
-        color: #0f9d58;
+        color: var(--score-good);
         font-weight: 600;
         padding: 0.25rem 0.5rem;
         border-radius: 3px;
@@ -205,7 +200,7 @@
     }
 
     .grid-fallback {
-        color: #CFCABF;
+        color: var(--wine-tan);
         opacity: 0.7;
         padding: 0.5rem 0;
     }

src/components/GPTExamples.svelte

@@ -2,6 +2,7 @@
    import { fade } from 'svelte/transition';
    import Icon from "$components/helpers/Icon.svelte";
    import { useLazyImage as lazyImage } from 'svelte-lazy-image';
+   import { SCROLL_STEPS } from "$utils/agents.js";
 
    export let exampleType;
    export let scrollIndex;
@@ -48,7 +49,7 @@
 {#if exampleType == "correct"}
     <div class="example-wrapper">
         {#each correctData as example, i}
-            {#if scrollIndex == 3}
+            {#if scrollIndex == SCROLL_STEPS.GPT_EXAMPLE_1}
             <div class="example" in:fade={{ duration: 250, delay: i * 250 }} out:fade={{duration: 250}}>
                 <img src={`./assets/images/vivinoLabels/img_${example.img}.png`} alt="Wine label" use:lazyImage />
                 <div class="correct-icon">
@@ -64,7 +65,7 @@
 {:else}
     <div class="example-wrapper">
         {#each wrongData as example, i}
-            {#if scrollIndex == 4}
+            {#if scrollIndex == SCROLL_STEPS.GPT_EXAMPLE_2}
             <div class="example" in:fade={{ duration: 250, delay: i * 250 }} out:fade={{duration: 250}}>
                 <img src={`./assets/images/vivinoLabels/img_${example.img}.png`} alt="Wine label" use:lazyImage />
                 <div class="wrong-icon">

src/components/Intro.Agents.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher, onMount } from "svelte";
   import { agentSelected, uniqueAgents, agentStats } from "$stores/misc.js";
+  import { AGENT_NAMES, SCROLL_STEPS } from "$utils/agents.js";
   import claudeSVG from "$svg/claude.svg";
   import openaiSVG from "$svg/openai.svg";
   import humanSVG from "$svg/human.svg";
@@ -14,8 +15,8 @@
     if (!str) return "";
     const lower = str.toLowerCase();
     if (lower === "gpt-5") return "GPT‑5";
-    if (lower === "claude") return "Claude Sonnet 4.0";
-    if (lower === "oracle") return "Oracle (Human)";
+    if (lower === "claude") return AGENT_NAMES["terminus-2,claude"] || "Claude Sonnet 4.0";
+    if (lower === "oracle") return AGENT_NAMES["terminus-2,oracle"] || "Oracle";
     return str.charAt(0).toUpperCase() + str.slice(1);
   };
 
@@ -55,7 +56,7 @@
     })
     .filter(Boolean);
 
-  $: visible = scrollIndex === undefined || scrollIndex <= 1;
+  $: visible = scrollIndex === undefined || scrollIndex <= SCROLL_STEPS.AGENTS_VISIBLE_UNTIL;
   $: selectedId = $agentSelected;
 
   function handleSelect(agent) {

src/components/Intro.CDF.svelte

@@ -2,7 +2,7 @@
 	import { LayerCake, Svg } from "layercake";
 	import { scaleLinear } from "d3-scale";
 	import { agentSelected, bigScatterData } from "$stores/misc.js";
-	import { AGENT_IDS } from "$utils/agents.js";
+	import { AGENT_IDS, AGENT_COLORS, AGENT_NAMES_SHORT, SCROLL_STEPS } from "$utils/agents.js";
 	import AxisX from "$components/layercake/AxisX.svg.svelte";
 	import AxisY from "$components/layercake/AxisY.svg.svelte";
 	import CDFLines from "$components/layercake/CDF.svg.svelte";
@@ -15,18 +15,8 @@
 	// Use the bigScatterData store which contains the full website_data.csv
 	$: data = $bigScatterData && Array.isArray($bigScatterData) ? $bigScatterData : [];
 
-	// Agent colors
-	const AGENT_COLORS = {
-		[AGENT_IDS.CLAUDE]: "#F7B956", // wine-gold
-		[AGENT_IDS.GPT5]: "#4477AA",   // category-blue
-		[AGENT_IDS.HUMAN]: "#66CCEE"   // category-cyan
-	};
-
-	const AGENT_NAMES = {
-		[AGENT_IDS.CLAUDE]: "Claude",
-		[AGENT_IDS.GPT5]: "GPT-5",
-		[AGENT_IDS.HUMAN]: "Oracle"
-	};
+	// Use centralized agent names (short version for compact display)
+	const AGENT_NAMES = AGENT_NAMES_SHORT;
 
 	// Calculate CDF data for each agent
 	function calculateCDF(agentId, dataset) {
@@ -82,8 +72,7 @@
 	$: selectedAgent = $agentSelected;
 
 	// Visibility based on scroll position
-	// Show CDF starting from step 4 (after methodology explanation) through step 5
-	$: visible = scrollIndex >= 4 && scrollIndex <= 6;
+	$: visible = scrollIndex >= SCROLL_STEPS.CDF_START && scrollIndex <= SCROLL_STEPS.CDF_END;
 	$: transform = visible ? 'translate(-50%, -50%) scale(1)' : 'translate(-50%, -50%) scale(0.85)';
 	$: opacity = visible ? 1 : 0;
 	$: paddingStyle = `

src/components/PaperHeader.svelte

@@ -2,6 +2,8 @@
 	import { getContext } from "svelte";
 	import Icon from "$components/helpers/Icon.svelte";
 	import leaderboardData from "$data/leaderboard.json";
+	import { LEVEL_DISPLAY_LABELS, LEVEL_ORDER } from "$utils/constants.js";
+	import { formatAdvantage, getCellClass } from "$utils/formatting.js";
 
 	const copy = getContext("copy") || {};
 	const headerCopy = copy.paperHeader || {};
@@ -55,21 +57,12 @@
 			? abstractConfig.paragraphs
 			: defaultAbstractParagraphs;
 
-	// Hardcoded leaderboard data matching main Leaderboard.svelte structure
+	// Leaderboard data
 	const leaderboardTitle = headerCopy.leaderboard.title;
 	const leaderboardDescription = headerCopy.leaderboard.description;
 
-	// Level display labels - matching main Leaderboard
-	const LEVEL_DISPLAY_LABELS = {
-		"no-aggregation": "L0: No Aggregation",
-		"param-level": "L1: Parameter",
-		"func-level": "L2: Function",
-		"class-level": "L3: Class",
-		"module-level": "L4: Module",
-	};
-
-	// Hardcoded levels in order
-	const levels = ["param-level", "func-level", "class-level", "module-level"];
+	// Use centralized level order
+	const levels = LEVEL_ORDER;
 
 	// Hardcoded table data - example data, replace with actual values
 	const tableData = Array.isArray(leaderboardData?.tableData) ? leaderboardData.tableData : [];
@@ -83,19 +76,6 @@
 		hero?.body ||
 		(hero?.cta && hero.cta.label)
 	);
-
-	// Helper functions matching main Leaderboard.svelte
-	function formatAdvantage(value) {
-		if (value === null || value === undefined) return "—";
-		return value.toFixed(4);
-	}
-
-	function getCellClass(value) {
-		if (value === null || value === undefined) return "";
-		if (value >= 0.1) return "high";
-		if (value >= 0) return "medium";
-		return "low";
-	}
 </script>
 
 <section class="paper-header">
@@ -431,7 +411,7 @@
 	}
 
 	.header-leaderboard tbody tr:hover {
-		background: rgba(207, 202, 191, 0.05);
+		background: var(--wine-tan-transparent);
 	}
 
 	.header-leaderboard td {
@@ -455,20 +435,20 @@
 	.header-leaderboard .overall-cell {
 		font-weight: 700;
 		font-size: var(--16px);
-		background: rgba(207, 202, 191, 0.05);
+		background: var(--wine-tan-transparent);
 	}
 
-	/* Color coding for scores - matching main Leaderboard.svelte */
+	/* Color coding for scores */
 	.header-leaderboard .score-cell.high {
-		color: #0f9d58;
+		color: var(--score-good);
 	}
 
 	.header-leaderboard .score-cell.medium {
 		color: #d8d8d8;
 	}
 
 	.header-leaderboard .score-cell.low {
-		color: #e84545;
+		color: var(--score-bad);
 	}
 
 	.paper-hero {

src/components/SpinningBottle.svelte

@@ -2,7 +2,8 @@
     import { createEventDispatcher } from "svelte";
     import { bottleSelected, animalSelected } from "$stores/misc.js";
     import viewport from "$stores/viewport.js";
-    
+    import { SCROLL_STEPS } from "$utils/agents.js";
+
     export let bottleIndex;
     export let wineData;
     export let bottlePosLeft;
@@ -110,11 +111,11 @@
     }
 
     $: transitionDelay = $bottleSelected == false 
-        ? (3 - 1 - bottleIndex) * 50 
-        : bottleIndex == 4 
-        ? 0  
+        ? (3 - 1 - bottleIndex) * 50
+        : bottleIndex == 4
+        ? 0
         : bottleIndex * 50;
-    $: if (scrollIndex >= 2) { shouldSpin = [true,true,true,true]; } 
+    $: if (scrollIndex >= SCROLL_STEPS.SPINNING_BOTTLE_START) { shouldSpin = [true,true,true,true]; } 
     $: if (outroVisible == false || outroVisible == undefined) { spin4 = true };
 </script>
 

src/data/results.json

@@ -0,0 +1,44 @@
+{
+  "leaderboard": [
+    {
+      "id": "1",
+      "agent": "terminus-2,gpt-5",
+      "displayName": "GPT-5",
+      "levels": {
+        "param-level": 0.1500,
+        "func-level": 0.1200,
+        "class-level": 0.0800,
+        "module-level": 0.0500
+      },
+      "overall": 0.1000
+    },
+    {
+      "id": "2",
+      "agent": "terminus-2,claude",
+      "displayName": "Claude Sonnet 4.0",
+      "levels": {
+        "param-level": 0.1300,
+        "func-level": 0.1000,
+        "class-level": 0.0600,
+        "module-level": 0.0300
+      },
+      "overall": 0.0800
+    },
+    {
+      "id": "3",
+      "agent": "terminus-2,oracle",
+      "displayName": "Oracle (Human)",
+      "levels": {
+        "param-level": 0.2500,
+        "func-level": 0.2200,
+        "class-level": 0.1800,
+        "module-level": 0.1500
+      },
+      "overall": 0.2000
+    }
+  ],
+  "colorThresholds": {
+    "high": 0.1,
+    "medium": 0
+  }
+}

src/styles/variables.css

@@ -10,11 +10,14 @@
   --wine-blue: #38425D;
   --wine--light-blue: #475171;
   --wine-tan: #CFCABF;
+  --wine-tan-transparent: rgba(207, 202, 191, 0.05);
   --wine-dark-tan: #9A968E;
   --wine-red: #7b0439;
   --wine-gold: #F7B956;
   --wine-dark-gold: #e7a53b;
   --wine-green: #3E5C4B;
+  --score-good: #0f9d58;
+  --score-bad: #e84545;
   --category-blue: #4477AA;
   --category-red: #EE6677;
   --category-green: #228833;