fix: light mode contrast, collapse queries on demo completion

frontend/src/components/DemoMode.tsx

@@ -176,9 +176,9 @@ function GithubDiff({ fromIdx, toIdx }: { fromIdx: number; toIdx: number }) {
   const removed = lines.filter((l) => l.type === 'remove').length
 
   return (
-    <div className="rounded-xl border border-white/[0.06] overflow-hidden text-[11px] font-mono">
+    <div className="rounded-xl border overflow-hidden text-[11px] font-mono" style={{ borderColor: 'var(--border-color)' }}>
       {/* Header */}
-      <div className="flex items-center gap-2 px-3 py-2 bg-white/[0.03] border-b border-white/[0.05]">
+      <div className="flex items-center gap-2 px-3 py-2 border-b" style={{ background: 'var(--bg-tertiary)', borderColor: 'var(--border-color)' }}>
         <GitCommitHorizontal size={11} className="text-gray-500" />
         <span className="text-gray-400 font-semibold">system_prompt.txt</span>
         <span className="ml-auto flex items-center gap-2 text-[10px]">
@@ -187,7 +187,7 @@ function GithubDiff({ fromIdx, toIdx }: { fromIdx: number; toIdx: number }) {
         </span>
       </div>
       {/* Diff lines */}
-      <div className="max-h-52 overflow-y-auto">
+      <div className="max-h-52 overflow-y-auto" style={{ background: 'var(--bg-secondary)' }}>
         {lines.map((line, i) => {
           const bg = line.type === 'add' ? 'bg-green-500/10' : line.type === 'remove' ? 'bg-red-500/10' : ''
           const prefix = line.type === 'add' ? '+' : line.type === 'remove' ? '-' : ' '
@@ -270,14 +270,14 @@ function RightPanel({ gen, score, rewardPoints, latestDiff }: RightPanelProps) {
       </div>
 
       {/* Score bar */}
-      <div className="bg-white/[0.03] border border-white/[0.06] rounded-xl p-3">
+      <div className="border rounded-xl p-3" style={{ background: 'var(--bg-tertiary)', borderColor: 'var(--border-color)' }}>
         <div className="flex items-end gap-2 mb-2">
           <span className="text-2xl font-bold text-green-400 tabular-nums leading-none">
             {(score * 100).toFixed(0)}%
           </span>
           <span className="text-[10px] text-gray-600 mb-0.5">benchmark score</span>
         </div>
-        <div className="h-1.5 bg-white/[0.05] rounded-full overflow-hidden">
+        <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--border-color)' }}>
           <motion.div
             className="h-full rounded-full"
             style={{ background: 'linear-gradient(90deg,#8b5cf6,#22c55e)' }}
@@ -290,9 +290,9 @@ function RightPanel({ gen, score, rewardPoints, latestDiff }: RightPanelProps) {
           {SCORES.slice(0, gen + 1).map((s, i) => (
             <div key={i} className="flex items-center gap-2 text-[10px]">
               <span className="text-gray-600 w-10 shrink-0">Gen {i}</span>
-              <div className="flex-1 h-1 bg-white/[0.05] rounded-full overflow-hidden">
+              <div className="flex-1 h-1 rounded-full overflow-hidden" style={{ background: 'var(--border-color)' }}>
                 <div className="h-full rounded-full transition-all duration-700"
-                  style={{ width: `${s * 100}%`, background: i === gen ? 'linear-gradient(90deg,#8b5cf6,#22c55e)' : '#374151' }} />
+                  style={{ width: `${s * 100}%`, background: i === gen ? 'linear-gradient(90deg,#8b5cf6,#22c55e)' : 'var(--text-dim)' }} />
               </div>
               <span className={`font-bold tabular-nums ${i === gen ? 'text-green-400' : 'text-gray-600'}`}>
                 {(s * 100).toFixed(0)}%
@@ -379,13 +379,13 @@ function Bubble({ b }: { b: BubbleData }) {
   )
 
   if (b.type === 'sql_stream') return (
-    <div className="border border-white/[0.06] rounded-xl overflow-hidden">
-      <div className="px-3 py-1.5 bg-white/[0.02] flex items-center gap-2">
+    <div className="border rounded-xl overflow-hidden" style={{ borderColor: 'var(--border-color)' }}>
+      <div className="px-3 py-1.5 flex items-center gap-2" style={{ background: 'var(--bg-tertiary)' }}>
         <span className="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">SQL</span>
         <span className="text-[10px] text-gray-600">attempt {b.attempt}</span>
         <Loader2 size={9} className="animate-spin text-violet-400 ml-auto" />
       </div>
-      <pre className="px-3 py-2 text-xs leading-relaxed whitespace-pre-wrap" style={{ color: 'rgba(221,214,254,0.8)', background: 'rgba(139,92,246,0.05)' }}>
+      <pre className="px-3 py-2 text-xs leading-relaxed whitespace-pre-wrap" style={{ background: 'rgba(139,92,246,0.05)' }}>
         <HighlightSQL sql={b.sql} />
         <span className="inline-block w-0.5 h-[1em] bg-violet-400 animate-pulse align-bottom ml-0.5" />
       </pre>
@@ -394,12 +394,12 @@ function Bubble({ b }: { b: BubbleData }) {
 
   if (b.type === 'sql_err') return (
     <div className="flex flex-col gap-1.5">
-      <div className="border border-white/[0.06] rounded-xl overflow-hidden">
-        <div className="px-3 py-1.5 bg-white/[0.02] flex items-center gap-2">
+      <div className="border rounded-xl overflow-hidden" style={{ borderColor: 'var(--border-color)' }}>
+        <div className="px-3 py-1.5 flex items-center gap-2" style={{ background: 'var(--bg-tertiary)' }}>
           <span className="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">SQL</span>
           <span className="text-[10px] text-gray-600">attempt {b.attempt}</span>
         </div>
-        <pre className="px-3 py-2 text-xs leading-relaxed whitespace-pre-wrap" style={{ color: 'rgba(221,214,254,0.8)', background: 'rgba(139,92,246,0.05)' }}>
+        <pre className="px-3 py-2 text-xs leading-relaxed whitespace-pre-wrap" style={{ background: 'rgba(139,92,246,0.05)' }}>
           <HighlightSQL sql={b.sql} />
         </pre>
       </div>
@@ -417,15 +417,15 @@ function Bubble({ b }: { b: BubbleData }) {
 
   if (b.type === 'sql_ok') return (
     <div className="flex flex-col gap-1.5">
-      <div className="border border-white/[0.06] rounded-xl overflow-hidden">
-        <div className="px-3 py-1.5 bg-white/[0.02] flex items-center gap-2">
+      <div className="border rounded-xl overflow-hidden" style={{ borderColor: 'var(--border-color)' }}>
+        <div className="px-3 py-1.5 flex items-center gap-2" style={{ background: 'var(--bg-tertiary)' }}>
           <span className="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">SQL</span>
           {b.firstTry && (
             <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/15 border border-green-500/25 text-green-400 font-semibold">first try ✓</span>
           )}
           <span className="ml-auto text-[11px] font-bold text-green-400">+{b.reward.toFixed(2)}</span>
         </div>
-        <pre className="px-3 py-2 text-xs leading-relaxed whitespace-pre-wrap" style={{ color: 'rgba(221,214,254,0.8)', background: 'rgba(139,92,246,0.05)' }}>
+        <pre className="px-3 py-2 text-xs leading-relaxed whitespace-pre-wrap" style={{ background: 'rgba(139,92,246,0.05)' }}>
           <HighlightSQL sql={b.sql} />
         </pre>
       </div>
@@ -434,10 +434,10 @@ function Bubble({ b }: { b: BubbleData }) {
         <span className="text-green-400 font-semibold">Success</span>
         <span className="text-gray-600">· {b.rows.length}+ rows returned</span>
       </div>
-      <div className="rounded-xl border border-white/[0.06] overflow-hidden text-[10px]">
+      <div className="rounded-xl border overflow-hidden text-[10px]" style={{ borderColor: 'var(--border-color)' }}>
         <table className="w-full">
           <thead>
-            <tr className="bg-white/[0.03]">
+            <tr style={{ background: 'var(--bg-tertiary)' }}>
               {Object.keys(b.rows[0] ?? {}).map((k) => (
                 <th key={k} className="px-2 py-1.5 text-left font-semibold text-gray-500 whitespace-nowrap">{k}</th>
               ))}
@@ -445,9 +445,9 @@ function Bubble({ b }: { b: BubbleData }) {
           </thead>
           <tbody>
             {b.rows.map((row, i) => (
-              <tr key={i} className={i % 2 === 0 ? 'bg-white/[0.01]' : ''}>
+              <tr key={i} style={i % 2 === 0 ? { background: 'var(--bg-hover)' } : {}}>
                 {Object.values(row).map((v, j) => (
-                  <td key={j} className="px-2 py-1 text-gray-300 whitespace-nowrap">{String(v)}</td>
+                  <td key={j} className="px-2 py-1 theme-text-secondary whitespace-nowrap">{String(v)}</td>
                 ))}
               </tr>
             ))}
@@ -483,7 +483,7 @@ function Bubble({ b }: { b: BubbleData }) {
           <GitCommitHorizontal size={10} />
           Prompt diff (see sidebar for full view)
         </div>
-        <div className="rounded-lg border border-white/[0.05] overflow-hidden text-[10px] font-mono max-h-24 overflow-y-auto">
+        <div className="rounded-lg border overflow-hidden text-[10px] font-mono max-h-24 overflow-y-auto" style={{ borderColor: 'var(--border-color)', background: 'var(--bg-secondary)' }}>
           {diffPrompts(b.fromGen, b.toGen).filter((l) => l.type !== 'same').map((line, i) => (
             <div key={i} className={`flex gap-2 px-2 py-0.5 ${line.type === 'add' ? 'bg-green-500/10' : 'bg-red-500/10'}`}>
               <span className={`shrink-0 ${line.type === 'add' ? 'text-green-400' : 'text-red-400'}`}>{line.type === 'add' ? '+' : '-'}</span>
@@ -496,22 +496,25 @@ function Bubble({ b }: { b: BubbleData }) {
   )
 
   if (b.type === 'group') return (
-    <div className="border border-white/[0.06] rounded-2xl overflow-hidden">
+    <div className="border rounded-2xl overflow-hidden" style={{ borderColor: 'var(--border-color)' }}>
       <button
         onClick={() => setOpen((v) => !v)}
-        className="w-full flex items-center gap-2 px-3 py-2.5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors text-left"
+        className="w-full flex items-center gap-2 px-3 py-2.5 transition-colors text-left"
+        style={{ background: 'var(--bg-tertiary)' }}
+        onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--bg-hover-strong)')}
+        onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--bg-tertiary)')}
       >
         {b.success
           ? <CheckCircle2 size={12} className="text-green-400 shrink-0" />
           : <XCircle size={12} className="text-red-400 shrink-0" />}
-        <span className="text-xs text-gray-300 flex-1 truncate">{b.question}</span>
+        <span className="text-xs theme-text-secondary flex-1 truncate">{b.question}</span>
         <span className="text-[10px] text-gray-600">{b.attempts} attempt{b.attempts !== 1 ? 's' : ''}</span>
         {open ? <ChevronUp size={11} className="text-gray-600 shrink-0" /> : <ChevronDown size={11} className="text-gray-600 shrink-0" />}
       </button>
       <AnimatePresence>
         {open && (
           <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.15 }} className="overflow-hidden">
-            <div className="p-3 flex flex-col gap-2.5 border-t border-white/[0.04]">
+            <div className="p-3 flex flex-col gap-2.5 border-t" style={{ borderColor: 'var(--border-color)' }}>
               {b.children.map((c) => <Bubble key={c.id} b={c} />)}
             </div>
           </motion.div>
@@ -535,6 +538,9 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
   const stepRef = useRef(0)
   const cancel = useRef(false)
   const bottomRef = useRef<HTMLDivElement>(null)
+  // Track all played queries and GEPA bubbles for end-of-demo collapse
+  const allQueriesRef = useRef<Array<{ def: QueryDef; children: BubbleData[] }>>([])
+  const gepaBubblesRef = useRef<BubbleData[]>([])
 
   const scroll = useCallback(() => {
     setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 60)
@@ -603,17 +609,6 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
     return children
   }, [push, scroll, typeUser, streamSQL, addReward])
 
-  const collapseQuery = useCallback((def: QueryDef, children: BubbleData[]) => {
-    const lastAtt = def.attempts[def.attempts.length - 1]
-    setBubbles((prev) => {
-      const userIdx = [...prev].reverse().findIndex((b) => b.type === 'user' && (b as UserBubble).text === def.question)
-      if (userIdx < 0) return prev
-      const fromIdx = prev.length - 1 - userIdx
-      const group: GroupBubble = { id: uid(), type: 'group', question: def.question, success: !lastAtt.error, attempts: def.attempts.length, children }
-      return [...prev.slice(0, fromIdx), group]
-    })
-  }, [])
-
   const playGepa = useCallback(async (fromGen: number, toGen: number) => {
     const steps = ['Analyzing failure patterns…', 'Identifying missing rules from errors…', 'Rewriting system prompt…', 'Benchmarking candidate prompt…']
     for (const label of steps) {
@@ -637,12 +632,16 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
     setGen(toGen)
     setLatestDiff({ from: fromGen, to: toGen })
 
-    push({ id: uid(), type: 'gepa', fromGen, toGen, scoreFrom: from, scoreTo: to })
+    const gepaBubble: GepaBubble = { id: uid(), type: 'gepa', fromGen, toGen, scoreFrom: from, scoreTo: to }
+    gepaBubblesRef.current.push(gepaBubble)
+    push(gepaBubble)
     scroll(); await sleep(1000)
   }, [push, scroll])
 
   const autoPlay = useCallback(async () => {
     cancel.current = false
+    allQueriesRef.current = []
+    gepaBubblesRef.current = []
     setBubbles([]); setGen(0); setScore(SCORES[0]); setRewardPoints([]); setLatestDiff(null)
     stepRef.current = 0; setAppState('running')
     await sleep(300)
@@ -650,28 +649,71 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
     for (const id of ROUND_1) {
       if (cancel.current) break
       const children = await playQuery(QUERIES[id])
-      if (cancel.current) break
-      await sleep(350); collapseQuery(QUERIES[id], children); await sleep(600)
+      if (!cancel.current) {
+        allQueriesRef.current.push({ def: QUERIES[id], children })
+        await sleep(600)
+      }
     }
     if (!cancel.current) { await playGepa(0, 1); await sleep(500) }
 
     for (const id of ROUND_2) {
       if (cancel.current) break
       const children = await playQuery(QUERIES[id])
-      if (cancel.current) break
-      await sleep(350); collapseQuery(QUERIES[id], children); await sleep(600)
+      if (!cancel.current) {
+        allQueriesRef.current.push({ def: QUERIES[id], children })
+        await sleep(600)
+      }
     }
     if (!cancel.current) { await playGepa(1, 2); await sleep(500) }
 
     for (const id of ROUND_3) {
       if (cancel.current) break
       const children = await playQuery(QUERIES[id])
-      if (cancel.current) break
-      await sleep(350); collapseQuery(QUERIES[id], children); await sleep(600)
+      if (!cancel.current) {
+        allQueriesRef.current.push({ def: QUERIES[id], children })
+        await sleep(600)
+      }
     }
 
-    if (!cancel.current) setAppState('done')
-  }, [playQuery, collapseQuery, playGepa])
+    if (!cancel.current) {
+      // Collapse all queries at once, rebuilding the bubble list
+      const queries = allQueriesRef.current
+      const gepas = gepaBubblesRef.current
+      const result: BubbleData[] = []
+
+      // Round 1 groups
+      for (let i = 0; i < ROUND_1.length && i < queries.length; i++) {
+        const { def, children } = queries[i]
+        const lastAtt = def.attempts[def.attempts.length - 1]
+        result.push({ id: uid(), type: 'group', question: def.question, success: !lastAtt.error, attempts: def.attempts.length, children })
+      }
+      // GEPA 0→1
+      if (gepas[0]) result.push(gepas[0])
+      // Round 2 groups
+      for (let i = 0; i < ROUND_2.length; i++) {
+        const qi = ROUND_1.length + i
+        if (qi >= queries.length) break
+        const { def, children } = queries[qi]
+        const lastAtt = def.attempts[def.attempts.length - 1]
+        result.push({ id: uid(), type: 'group', question: def.question, success: !lastAtt.error, attempts: def.attempts.length, children })
+      }
+      // GEPA 1→2
+      if (gepas[1]) result.push(gepas[1])
+      // Round 3 groups
+      for (let i = 0; i < ROUND_3.length; i++) {
+        const qi = ROUND_1.length + ROUND_2.length + i
+        if (qi >= queries.length) break
+        const { def, children } = queries[qi]
+        const lastAtt = def.attempts[def.attempts.length - 1]
+        result.push({ id: uid(), type: 'group', question: def.question, success: !lastAtt.error, attempts: def.attempts.length, children })
+      }
+
+      setBubbles(result)
+      await sleep(300)
+      scroll()
+      setAppState('done')
+    }
+  }, [playQuery, playGepa, scroll])
 
   useEffect(() => () => { cancel.current = true }, [])
 
@@ -682,7 +724,7 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
       style={{ background: 'var(--bg-primary)' }}
     >
       {/* Header */}
-      <div className="shrink-0 flex items-center justify-between px-4 py-3 border-b border-white/[0.06]" style={{ background: 'var(--bg-secondary)' }}>
+      <div className="shrink-0 flex items-center justify-between px-4 py-3 border-b theme-border" style={{ background: 'var(--bg-secondary)' }}>
         <div className="flex items-center gap-3">
           <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-violet-500/15 border border-violet-500/25">
             <Play size={9} className="text-violet-400" fill="currentColor" />
@@ -756,7 +798,7 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
         </div>
 
         {/* Right panel */}
-        <aside className="hidden lg:flex flex-col w-72 border-l border-white/[0.06] overflow-hidden shrink-0" style={{ background: 'var(--bg-secondary)' }}>
+        <aside className="hidden lg:flex flex-col w-72 border-l theme-border overflow-hidden shrink-0" style={{ background: 'var(--bg-secondary)' }}>
           <RightPanel gen={gen} score={score} rewardPoints={rewardPoints} latestDiff={latestDiff} />
         </aside>
       </div>

frontend/src/index.css

@@ -177,7 +177,10 @@ body {
 [data-theme="light"] .text-violet-300 { color: #7c3aed !important; }
 [data-theme="light"] .text-violet-400 { color: #7c3aed !important; }
 [data-theme="light"] .text-green-400 { color: #15803d !important; }
+[data-theme="light"] .text-green-300 { color: #16a34a !important; }
 [data-theme="light"] .text-red-400 { color: #b91c1c !important; }
+[data-theme="light"] .text-red-300 { color: #dc2626 !important; }
+[data-theme="light"] .text-orange-400 { color: #c2410c !important; }
 [data-theme="light"] pre {
   background-color: var(--bg-tertiary) !important;
   color: #374151 !important;
@@ -185,3 +188,15 @@ body {
 [data-theme="light"] .recharts-cartesian-grid line {
   stroke: rgba(0, 0, 0, 0.06) !important;
 }
+/* Make borders using white opacity visible in light mode */
+[data-theme="light"] [class*="border-white/"] {
+  border-color: var(--border-color) !important;
+}
+/* Make subtle white-opacity section headers visible in light mode */
+[data-theme="light"] [class*="bg-white/[0.0"] {
+  background-color: rgba(0, 0, 0, 0.035) !important;
+}
+/* Hover states on white-opacity backgrounds */
+[data-theme="light"] [class*="hover:bg-white/"]:hover {
+  background-color: var(--bg-hover-strong) !important;
+}