Upload folder using huggingface_hub

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "landscapeforge-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "highlight.js": "^11.11.1",
         "lucide-react": "^0.460.0",
         "plotly.js-basic-dist-min": "^2.35.0",
         "react": "^18.3.1",
@@ -3221,6 +3222,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "highlight.js": "^11.11.1",
     "lucide-react": "^0.460.0",
     "plotly.js-basic-dist-min": "^2.35.0",
     "react": "^18.3.1",

frontend/src/components/CodeBlock.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import hljs from 'highlight.js/lib/core'
+import python from 'highlight.js/lib/languages/python'
+import json from 'highlight.js/lib/languages/json'
+import 'highlight.js/styles/atom-one-dark.css'
+
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('json', json)
+
+/**
+ * CodeBlock — a syntax-highlighted <pre><code> block.
+ *
+ * Dark, compact styling tuned to match the Claude-ish palette. Uses hljs's
+ * atom-one-dark theme then overrides the background with our canvas so it
+ * blends with the card surface.
+ */
+export function CodeBlock({ code, language = 'python', className = '' }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      // Remove the hljs "highlighted" marker so reruns pick up the new code
+      delete ref.current.dataset.highlighted
+      hljs.highlightElement(ref.current)
+    }
+  }, [code, language])
+
+  return (
+    <pre className={`rounded-lg border border-border overflow-x-auto
+                     bg-[#14120f] my-1 ${className}`}>
+      <code ref={ref} className={`language-${language} block p-4 text-[0.82rem]
+                                  leading-relaxed font-mono !bg-transparent`}>
+        {code}
+      </code>
+    </pre>
+  )
+}

frontend/src/components/RewardBreakdown.jsx

@@ -12,17 +12,36 @@ const AXIS = {
   tickfont: { color: '#b5ada0' },
 }
 
+// Per-component weights from rewards.py. Breakdown bars show weighted
+// contributions (sum → total reward) rather than raw component values, so
+// the chart is directly readable as "which components are hurting / helping".
+const WEIGHTS = {
+  r_regret:      1.0,
+  r_convergence: 0.3,
+  r_robustness:  0.3,
+  r_novelty:     0.1,
+  r_budget:     -0.05,   // subtractive
+  r_eval_failures: -0.5, // subtractive
+}
+
+const DISPLAY_NAMES = {
+  r_regret:        'regret (×1.0)',
+  r_convergence:   'convergence (×0.3)',
+  r_robustness:    'robustness (×0.3)',
+  r_novelty:       'novelty (×0.1)',
+  r_budget:        'budget (−0.05×)',
+  r_eval_failures: 'eval crashes (−0.5×)',
+}
+
 export function RewardBreakdown({ breakdown, total }) {
-  const components = {
-    r_regret:      breakdown.r_regret,
-    r_convergence: breakdown.r_convergence,
-    r_robustness:  breakdown.r_robustness,
-    r_novelty:     breakdown.r_novelty,
-    '-r_budget':   -breakdown.r_budget,
-    '-r_eval_fail': -breakdown.r_eval_failures,
-  }
-  const names = Object.keys(components)
-  const vs = names.map(n => components[n])
+  // Weighted contributions — sum to the terminal reward.
+  const entries = Object.entries(WEIGHTS).map(([k, w]) => ({
+    key: k,
+    label: DISPLAY_NAMES[k],
+    value: (breakdown[k] ?? 0) * w,
+  }))
+  const names = entries.map(e => e.label)
+  const vs    = entries.map(e => e.value)
   const colors = vs.map(v => v >= 0 ? '#3d6b4c' : '#a0483a')
   const labels = vs.map(v => (v >= 0 ? '+' : '') + v.toFixed(3))
 
@@ -43,9 +62,9 @@ export function RewardBreakdown({ breakdown, total }) {
           x: 0.02, xanchor: 'left',
           font: { size: 14, color: '#f3f0e8' },
         },
-        height: 260, margin: { l: 110, r: 50, t: 50, b: 30 },
+        height: 260, margin: { l: 160, r: 50, t: 50, b: 30 },
         xaxis: {
-          title: 'weighted contribution',
+          title: 'contribution to total reward',
           range: [Math.min(...vs, 0) - 0.15, Math.max(...vs, 0) + 0.15],
           ...AXIS,
         },

frontend/src/components/TurnCard.jsx

@@ -1,3 +1,5 @@
+import { CodeBlock } from './CodeBlock.jsx'
+
 const KIND_STYLES = {
   draft:        'text-accent border-accent',
   run_baseline: 'text-[#7ecfc5] border-[#5a9c94]',
@@ -30,10 +32,9 @@ export function TurnCard({ turn, kind, action_str, output, duration_s,
       </Row>
 
       {code && (
-        <pre className="mt-3 rounded-lg border border-border bg-[#14120f]
-                        px-4 py-3 overflow-x-auto text-[0.82rem] leading-relaxed">
-          <code className="font-mono text-[#e8e3d6]">{code.trim()}</code>
-        </pre>
+        <div className="mt-3">
+          <CodeBlock code={code.trim()} language="python" />
+        </div>
       )}
     </div>
   )

frontend/src/pages/ApiPlayground.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { envReset, envStep } from '../lib/api.js'
+import { CodeBlock } from '../components/CodeBlock.jsx'
 
 const SAMPLE_CODE = `class Optimizer:
     def __init__(self, dim):
@@ -130,11 +131,11 @@ export function ApiPlayground() {
 
       <div className="space-y-3">
         <div className="text-sm text-muted font-mono">{status}</div>
-        <pre className="card overflow-x-auto max-h-[640px] overflow-y-auto">
-          <code className="font-mono text-xs text-ink leading-relaxed whitespace-pre-wrap">
-            {obs ? JSON.stringify(obs, null, 2) : '// hit Reset to begin'}
-          </code>
-        </pre>
+        <CodeBlock
+          code={obs ? JSON.stringify(obs, null, 2) : '// hit Reset to begin'}
+          language="json"
+          className="max-h-[640px] overflow-y-auto"
+        />
       </div>
     </div>
   )

frontend/src/pages/RunWithLlm.jsx

@@ -212,6 +212,9 @@ function RangeRow({ label, min, max, step, value, onChange }) {
 function EpisodeDone({ done }) {
   const reward = done.reward
   const speedup = done.speedup_vs_adam
+  const myProg = done.my_progress
+  const adamProg = done.adam_progress
+
   const rewardTone =
     reward >= 0.5 ? 'good' : reward >= 0 ? 'warn' : 'bad'
   const speedupTone = speedup >= 1.0 ? 'good' : 'warn'
@@ -219,6 +222,13 @@ function EpisodeDone({ done }) {
     ? `${speedup.toFixed(2)}×`
     : `${Math.round(speedup)}×`
 
+  // Verdict: how does this compare to Adam?
+  let verdict = 'Matches Adam'
+  let verdictTone = 'warn'
+  if (speedup >= 1.5)      { verdict = 'Beats Adam'; verdictTone = 'good' }
+  else if (speedup >= 1.1) { verdict = 'Edges Adam'; verdictTone = 'good' }
+  else if (speedup < 0.9)  { verdict = 'Behind Adam'; verdictTone = 'bad' }
+
   return (
     <div className="card"
          style={{ background: 'linear-gradient(180deg, rgba(226,135,99,0.07) 0%, rgba(42,40,36,0) 60%)' }}>
@@ -232,13 +242,26 @@ function EpisodeDone({ done }) {
       </div>
 
       <div className="grid grid-cols-3 gap-3 mb-5">
-        <KpiCard label="Terminal reward" value={reward.toFixed(3)}
-                 sub="GRPO training scalar" tone={rewardTone} sign={reward >= 0 ? '+' : ''}/>
-        <KpiCard label="Speedup vs tuned Adam" value={speedupDisplay}
-                 sub={`my ${done.my_progress.toFixed(3)} · adam ${done.adam_progress.toFixed(3)}`}
-                 tone={speedupTone} />
-        <KpiCard label="Adam shortfall" value={done.final_regret.toFixed(3)}
-                 sub="0 = matched/beat Adam" />
+        <KpiCard
+          label="Reward"
+          value={reward.toFixed(3)}
+          sub="GRPO scalar · range [−1.5, +1.8]"
+          tone={rewardTone}
+          sign={reward >= 0 ? '+' : ''} />
+        <KpiCard
+          label="Speedup vs Adam"
+          value={speedupDisplay}
+          sub={`descent ${myProg.toFixed(2)} vs Adam ${adamProg.toFixed(2)}`}
+          tone={speedupTone} />
+        <KpiCard
+          label="Verdict"
+          value={verdict}
+          sub={verdict === 'Behind Adam'
+               ? `lost ${(100 * (1 - speedup)).toFixed(0)}% of Adam's ground`
+               : verdict === 'Beats Adam'
+                 ? `${((speedup - 1) * 100).toFixed(0)}% further than Adam`
+                 : 'within ±10% of Adam'}
+          tone={verdictTone} />
       </div>
 
       <RewardBreakdown breakdown={done.breakdown} total={reward} />