feat: demo mode with reward chart, github diff, single-difficulty rounds, no loop

frontend/src/components/DemoMode.tsx

@@ -1,56 +1,60 @@
 /**
  * DemoMode — scripted autoplay showcase for SQL Agent OpenEnv.
  *
- * Demonstrates: SQL generation → RL repair loop → GEPA prompt evolution → improvement.
- * Fully client-side, no real API calls. Mirrors the /showcase pattern from the reference app.
+ * Right panel: live reward chart + GitHub-style prompt diff.
+ * Chat: single-difficulty rounds separated by GEPA evolution.
+ * No looping — scrollable at the end.
  */
 
 import { useState, useRef, useCallback, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
-  Play, X, RotateCcw, Zap, CheckCircle2, XCircle,
-  ChevronDown, ChevronUp, Sparkles, TrendingUp, Loader2,
+  LineChart, Line, XAxis, YAxis, CartesianGrid,
+  Tooltip, ResponsiveContainer, ReferenceLine,
+} from 'recharts'
+import {
+  Play, X, Zap, CheckCircle2, XCircle,
+  ChevronDown, ChevronUp, Sparkles, Loader2, GitCommitHorizontal,
 } from 'lucide-react'
 
-// ─── Scripted data ────────────────────────────────────────────────────────────
+// ─── Prompts (3 generations) ─────────────────────────────────────────────────
 
 const PROMPTS = [
-  // Gen 0 — baseline
-  `You are a SQL expert. Given a question and a SQLite database schema, write correct SQL.
+  `You are a SQL expert. Given a question and a SQLite schema, write correct SQL.
 
 Rules:
 - Output ONLY the SQL query
 - Use SQLite syntax
 - No markdown, no code fences`,
 
-  // Gen 1 — after first GEPA cycle
-  `You are a SQL expert. Given a question and a SQLite database schema, write correct SQL.
+  `You are a SQL expert. Given a question and a SQLite schema, write correct SQL.
 
 Rules:
 - Output ONLY the SQL query
 - Use SQLite syntax
 - No markdown, no code fences
 - Always qualify column names with table aliases in JOINs
-- Use t.column_name format to avoid ambiguous column errors
-- Check schema carefully before referencing any column name`,
+- Use t.column_name to avoid ambiguous column errors
+- Verify every column name against the schema before use`,
 
-  // Gen 2 — after second GEPA cycle
-  `You are a SQL expert. Given a question and a SQLite database schema, write correct SQL.
+  `You are a SQL expert. Given a question and a SQLite schema, write correct SQL.
 
 Rules:
 - Output ONLY the SQL query
 - Use SQLite syntax
 - No markdown, no code fences
 - Always qualify column names with table aliases in JOINs
-- Use t.column_name format to avoid ambiguous column errors
-- Check schema carefully before referencing any column name
-- For aggregations: always include non-aggregated columns in GROUP BY
-- For revenue calculations: use orders.total_price, not price
-- For rankings: use ORDER BY … DESC LIMIT N`,
+- Use t.column_name to avoid ambiguous column errors
+- Verify every column name against the schema before use
+- For aggregations: include all non-aggregated columns in GROUP BY
+- For revenue: use orders.total_price (not price or amount)
+- For top-N: use ORDER BY … DESC LIMIT N`,
 ]
 
 const SCORES = [0.42, 0.74, 0.91]
 
+// ─── Scripted query data ─────────────────────────────────────────────────────
+
 interface Attempt {
   sql: string
   error?: string
@@ -63,222 +67,312 @@ interface Attempt {
 interface QueryDef {
   id: string
   question: string
-  badge: string
-  difficulty: 'Easy' | 'Medium' | 'Hard'
   attempts: Attempt[]
 }
 
 const QUERIES: Record<string, QueryDef> = {
-  q1r1: {
-    id: 'q1r1', question: 'Show all products', badge: 'Easy',
-    difficulty: 'Easy',
+  // Round 1 — simple queries, some fail
+  r1q1: {
+    id: 'r1q1',
+    question: 'Show all products',
     attempts: [
-      {
-        sql: 'SELECT * FROM product',
-        error: 'no such table: product',
-        errorClass: 'NO_SUCH_TABLE',
-        rlAction: 'FIX_TABLE',
-        reward: -0.15,
-      },
-      {
-        sql: 'SELECT * FROM products',
-        reward: 0.90,
-        rows: [
-          { id: 1, name: 'Wireless Headphones', category: 'Electronics', price: 79.99 },
-          { id: 2, name: 'Running Shoes', category: 'Footwear', price: 59.99 },
-          { id: 3, name: 'Coffee Maker', category: 'Kitchen', price: 49.99 },
-        ],
-      },
+      { sql: 'SELECT * FROM product', error: 'no such table: product', errorClass: 'NO_SUCH_TABLE', rlAction: 'FIX_TABLE', reward: -0.15 },
+      { sql: 'SELECT * FROM products LIMIT 10', reward: 0.90,
+        rows: [{ id: 1, name: 'Wireless Headphones', category: 'Electronics', price: 79.99 }, { id: 2, name: 'Running Shoes', category: 'Footwear', price: 59.99 }, { id: 3, name: 'Coffee Maker', category: 'Kitchen', price: 49.99 }] },
     ],
   },
-  q2r1: {
-    id: 'q2r1', question: 'Top 5 sellers by total revenue',
-    badge: 'Medium', difficulty: 'Medium',
+  r1q2: {
+    id: 'r1q2',
+    question: 'List all users from the USA',
     attempts: [
-      {
-        sql: `SELECT seller_id, SUM(price) as revenue
-FROM orders
-GROUP BY seller_id
-ORDER BY revenue DESC
-LIMIT 5`,
-        error: 'no such column: price',
-        errorClass: 'NO_SUCH_COLUMN',
-        rlAction: 'FIX_COLUMN',
-        reward: -0.20,
-      },
-      {
-        sql: `SELECT seller_id, SUM(total_price) as revenue
-FROM orders
-GROUP BY seller_id
-ORDER BY revenue DESC
-LIMIT 5`,
-        error: 'ambiguous column name: seller_id',
-        errorClass: 'AMBIGUOUS_COLUMN',
-        rlAction: 'FIX_TABLE',
-        reward: -0.25,
-      },
-      {
-        sql: `SELECT s.name, SUM(o.total_price) as revenue
-FROM orders o
-JOIN sellers s ON o.user_id = s.id
-GROUP BY s.id, s.name
-ORDER BY revenue DESC
-LIMIT 5`,
-        reward: 0.70,
-        rows: [
-          { name: 'TechStore Pro', revenue: 12840 },
-          { name: 'StyleHub', revenue: 9320 },
-          { name: 'GadgetWorld', revenue: 8750 },
-          { name: 'HomeGoods Co', revenue: 7200 },
-          { name: 'SportZone', revenue: 6100 },
-        ],
-      },
+      { sql: "SELECT * FROM users WHERE country = 'USA'", reward: 1.00,
+        rows: [{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', country: 'USA' }, { id: 2, name: 'Bob Smith', email: 'bob@example.com', country: 'USA' }] },
     ],
   },
-  q3r1: {
-    id: 'q3r1', question: 'Average order value by country',
-    badge: 'Medium', difficulty: 'Medium',
+
+  // Round 2 — join queries, ambiguous columns fixed by GEPA
+  r2q1: {
+    id: 'r2q1',
+    question: 'Top 5 sellers by total revenue',
     attempts: [
-      {
-        sql: `SELECT country, AVG(total_price) as avg_order
-FROM orders
-JOIN users ON user_id = users.id
-GROUP BY country`,
-        error: 'ambiguous column name: country',
-        errorClass: 'AMBIGUOUS_COLUMN',
-        rlAction: 'FIX_COLUMN',
-        reward: -0.15,
-      },
-      {
-        sql: `SELECT u.country, ROUND(AVG(o.total_price), 2) as avg_order
-FROM orders o
-JOIN users u ON o.user_id = u.id
-GROUP BY u.country
-ORDER BY avg_order DESC`,
-        reward: 0.85,
-        rows: [
-          { country: 'USA', avg_order: 142.50 },
-          { country: 'UK', avg_order: 138.20 },
-          { country: 'Germany', avg_order: 121.80 },
-          { country: 'Canada', avg_order: 118.40 },
-        ],
-      },
+      { sql: `SELECT seller_id, SUM(total_price) as revenue\nFROM orders\nGROUP BY seller_id\nORDER BY revenue DESC\nLIMIT 5`, error: 'ambiguous column name: seller_id', errorClass: 'AMBIGUOUS_COLUMN', rlAction: 'FIX_COLUMN', reward: -0.20 },
+      { sql: `SELECT s.name, SUM(o.total_price) as revenue\nFROM orders o\nJOIN sellers s ON o.user_id = s.id\nGROUP BY s.id, s.name\nORDER BY revenue DESC\nLIMIT 5`, reward: 0.80,
+        rows: [{ seller: 'TechStore Pro', revenue: 12840 }, { seller: 'StyleHub', revenue: 9320 }, { seller: 'GadgetWorld', revenue: 8750 }] },
     ],
   },
-  // Round 2 — after GEPA, succeed faster
-  q1r2: {
-    id: 'q1r2', question: 'Show all products',
-    badge: 'Easy', difficulty: 'Easy',
+  r2q2: {
+    id: 'r2q2',
+    question: 'Average order value by country',
     attempts: [
-      {
-        sql: 'SELECT * FROM products',
-        reward: 1.00,
-        rows: [
-          { id: 1, name: 'Wireless Headphones', category: 'Electronics', price: 79.99 },
-          { id: 2, name: 'Running Shoes', category: 'Footwear', price: 59.99 },
-          { id: 3, name: 'Coffee Maker', category: 'Kitchen', price: 49.99 },
-        ],
-      },
+      { sql: `SELECT country, AVG(total_price) as avg_order\nFROM orders\nJOIN users ON user_id = users.id\nGROUP BY country`, error: 'ambiguous column name: country', errorClass: 'AMBIGUOUS_COLUMN', rlAction: 'FIX_COLUMN', reward: -0.15 },
+      { sql: `SELECT u.country, ROUND(AVG(o.total_price), 2) as avg_order\nFROM orders o\nJOIN users u ON o.user_id = u.id\nGROUP BY u.country\nORDER BY avg_order DESC`, reward: 0.85,
+        rows: [{ country: 'USA', avg_order: 142.50 }, { country: 'UK', avg_order: 138.20 }, { country: 'Germany', avg_order: 121.80 }] },
     ],
   },
-  q2r2: {
-    id: 'q2r2', question: 'Top 5 sellers by total revenue',
-    badge: 'Medium', difficulty: 'Medium',
+
+  // Round 3 — after GEPA 2, same joins succeed first try
+  r3q1: {
+    id: 'r3q1',
+    question: 'Top 5 sellers by total revenue',
     attempts: [
-      {
-        sql: `SELECT s.name, SUM(o.total_price) as revenue
-FROM orders o
-JOIN sellers s ON o.user_id = s.id
-GROUP BY s.id, s.name
-ORDER BY revenue DESC
-LIMIT 5`,
-        reward: 0.90,
-        rows: [
-          { name: 'TechStore Pro', revenue: 12840 },
-          { name: 'StyleHub', revenue: 9320 },
-          { name: 'GadgetWorld', revenue: 8750 },
-        ],
-      },
+      { sql: `SELECT s.name, SUM(o.total_price) as revenue\nFROM orders o\nJOIN sellers s ON o.user_id = s.id\nGROUP BY s.id, s.name\nORDER BY revenue DESC\nLIMIT 5`, reward: 1.00,
+        rows: [{ seller: 'TechStore Pro', revenue: 12840 }, { seller: 'StyleHub', revenue: 9320 }, { seller: 'GadgetWorld', revenue: 8750 }] },
     ],
   },
-  q3r2: {
-    id: 'q3r2', question: 'Average order value by country',
-    badge: 'Medium', difficulty: 'Medium',
+  r3q2: {
+    id: 'r3q2',
+    question: 'Monthly revenue for the last 6 months',
     attempts: [
-      {
-        sql: `SELECT u.country, ROUND(AVG(o.total_price), 2) as avg_order
-FROM orders o
-JOIN users u ON o.user_id = u.id
-GROUP BY u.country
-ORDER BY avg_order DESC`,
-        reward: 1.00,
-        rows: [
-          { country: 'USA', avg_order: 142.50 },
-          { country: 'UK', avg_order: 138.20 },
-          { country: 'Germany', avg_order: 121.80 },
-        ],
-      },
+      { sql: `SELECT strftime('%Y-%m', created_at) as month,\n  ROUND(SUM(total_price), 2) as revenue\nFROM orders\nGROUP BY month\nORDER BY month DESC\nLIMIT 6`, reward: 1.00,
+        rows: [{ month: '2024-11', revenue: 24180 }, { month: '2024-10', revenue: 21340 }, { month: '2024-09', revenue: 19800 }] },
     ],
   },
 }
 
-const ROUND_1 = ['q1r1', 'q2r1', 'q3r1']
-const ROUND_2 = ['q1r2', 'q2r2', 'q3r2']
+const ROUND_1 = ['r1q1', 'r1q2']
+const ROUND_2 = ['r2q1', 'r2q2']
+const ROUND_3 = ['r3q1', 'r3q2']
+
+// ─── GitHub-style diff ───────────────────────────────────────────────────────
 
-// ─── Helpers ─────────────────────────────────────────────────────────────────
+interface DiffLine { type: 'add' | 'remove' | 'same'; text: string }
 
-let _idCounter = 0
-const uid = () => `bubble-${++_idCounter}`
+function diffPrompts(fromIdx: number, toIdx: number): DiffLine[] {
+  const oldLines = PROMPTS[fromIdx].split('\n')
+  const newLines = PROMPTS[toIdx].split('\n')
+  const result: DiffLine[] = []
 
-function sleep(ms: number): Promise<void> {
-  return new Promise((res) => setTimeout(res, ms))
+  // Simple patience diff: lines in both = same, only in old = remove, only in new = add
+  const oldSet = new Set(oldLines)
+  const newSet = new Set(newLines)
+
+  // Walk new lines, carrying old-only lines before matching
+  let oi = 0
+  for (let ni = 0; ni < newLines.length; ni++) {
+    const line = newLines[ni]
+    if (oldSet.has(line)) {
+      // Flush any old-only lines before this match
+      while (oi < oldLines.length && oldLines[oi] !== line) {
+        if (!newSet.has(oldLines[oi])) result.push({ type: 'remove', text: oldLines[oi] })
+        oi++
+      }
+      result.push({ type: 'same', text: line })
+      oi++
+    } else {
+      result.push({ type: 'add', text: line })
+    }
+  }
+  // Remaining old-only
+  while (oi < oldLines.length) {
+    if (!newSet.has(oldLines[oi])) result.push({ type: 'remove', text: oldLines[oi] })
+    oi++
+  }
+  return result
 }
 
-type AppState = 'idle' | 'running' | 'gepa' | 'done'
+function GithubDiff({ fromIdx, toIdx }: { fromIdx: number; toIdx: number }) {
+  const lines = diffPrompts(fromIdx, toIdx)
+  const added = lines.filter((l) => l.type === 'add').length
+  const removed = lines.filter((l) => l.type === 'remove').length
 
-interface BaseBubble { id: string }
-interface UserBubble extends BaseBubble { type: 'user'; text: string }
-interface ThinkingBubble extends BaseBubble { type: 'thinking'; label: string }
-interface SqlStreamBubble extends BaseBubble { type: 'sql_stream'; sql: string; attempt: number }
-interface SqlErrBubble extends BaseBubble { type: 'sql_err'; sql: string; error: string; errorClass: string; rlAction: string; reward: number; attempt: number }
-interface SqlOkBubble extends BaseBubble { type: 'sql_ok'; sql: string; rows: Record<string, string | number>[]; reward: number; attempt: number; badge: string; firstTry: boolean }
-interface GepaBubble extends BaseBubble { type: 'gepa'; fromGen: number; toGen: number; scoreFrom: number; scoreTo: number }
-interface GroupBubble extends BaseBubble { type: 'group'; question: string; badge: string; difficulty: string; success: boolean; attempts: number; children: BubbleData[] }
+  return (
+    <div className="rounded-xl border border-white/[0.06] overflow-hidden text-[11px] font-mono">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-white/[0.03] border-b border-white/[0.05]">
+        <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]">
+          <span className="text-green-400 font-bold">+{added}</span>
+          <span className="text-red-400 font-bold">−{removed}</span>
+        </span>
+      </div>
+      {/* Diff lines */}
+      <div className="max-h-52 overflow-y-auto">
+        {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' ? '-' : ' '
+          const color = line.type === 'add' ? 'text-green-300' : line.type === 'remove' ? 'text-red-300' : 'text-gray-500'
+          return (
+            <div key={i} className={`flex items-start gap-2 px-3 py-0.5 leading-relaxed ${bg}`}>
+              <span className={`shrink-0 w-3 ${color} font-bold select-none`}>{prefix}</span>
+              <span className={color}>{line.text || <span className="opacity-0">—</span>}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
 
-type BubbleData = UserBubble | ThinkingBubble | SqlStreamBubble | SqlErrBubble | SqlOkBubble | GepaBubble | GroupBubble
+// ─── Reward chart ────────────────────────────────────────────────────────────
+
+interface RewardPoint { step: number; reward: number }
+
+function RewardChart({ points }: { points: RewardPoint[] }) {
+  if (points.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-28 gap-1.5 text-gray-700">
+        <span className="text-[11px]">Rewards appear as agent runs</span>
+      </div>
+    )
+  }
+  return (
+    <ResponsiveContainer width="100%" height={110}>
+      <LineChart data={points} margin={{ top: 4, right: 8, bottom: 0, left: -20 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#ffffff08" />
+        <XAxis dataKey="step" tick={{ fontSize: 9, fill: '#6b7280' }} />
+        <YAxis domain={[-0.5, 1.1]} tick={{ fontSize: 9, fill: '#6b7280' }} />
+        <Tooltip
+          contentStyle={{ background: '#1a1a2e', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 8, fontSize: 11 }}
+          labelStyle={{ color: '#9ca3af' }}
+          itemStyle={{ color: '#f97316' }}
+          formatter={(v: number) => [v.toFixed(2), 'reward']}
+          labelFormatter={(l) => `Step ${l}`}
+        />
+        <ReferenceLine y={0} stroke="#ffffff18" strokeDasharray="3 3" />
+        <Line
+          type="monotone" dataKey="reward" name="Reward"
+          stroke="#f97316" strokeWidth={2}
+          dot={(props) => {
+            const { cx, cy, payload } = props
+            const color = (payload as RewardPoint).reward >= 0 ? '#22c55e' : '#ef4444'
+            return <circle key={`dot-${(payload as RewardPoint).step}`} cx={cx} cy={cy} r={3} fill={color} stroke="none" />
+          }}
+          activeDot={{ r: 4, fill: '#f97316' }}
+          isAnimationActive={false}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+// ─── Right panel ─────────────────────────────────────────────────────────────
+
+interface RightPanelProps {
+  gen: number
+  score: number
+  rewardPoints: RewardPoint[]
+  latestDiff: { from: number; to: number } | null
+}
+
+function RightPanel({ gen, score, rewardPoints, latestDiff }: RightPanelProps) {
+  return (
+    <div className="flex flex-col gap-4 px-4 py-4 overflow-y-auto h-full">
+      {/* Gen badge + score */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <Sparkles size={12} className="text-violet-400" />
+          <span className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider">GEPA</span>
+        </div>
+        <span className="text-[10px] px-2 py-0.5 rounded-full bg-violet-500/15 border border-violet-500/25 text-violet-400 font-semibold">
+          Gen {gen}
+        </span>
+      </div>
+
+      {/* Score bar */}
+      <div className="bg-white/[0.03] border border-white/[0.06] rounded-xl p-3">
+        <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">
+          <motion.div
+            className="h-full rounded-full"
+            style={{ background: 'linear-gradient(90deg,#8b5cf6,#22c55e)' }}
+            animate={{ width: `${score * 100}%` }}
+            transition={{ duration: 0.9, ease: 'easeOut' }}
+          />
+        </div>
+        {/* Generation history */}
+        <div className="mt-2.5 flex flex-col gap-1">
+          {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="h-full rounded-full transition-all duration-700"
+                  style={{ width: `${s * 100}%`, background: i === gen ? 'linear-gradient(90deg,#8b5cf6,#22c55e)' : '#374151' }} />
+              </div>
+              <span className={`font-bold tabular-nums ${i === gen ? 'text-green-400' : 'text-gray-600'}`}>
+                {(s * 100).toFixed(0)}%
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
 
-// ─── SQL keyword highlighter ──────────────────────────────────────────────────
+      {/* Reward chart */}
+      <div>
+        <div className="text-[10px] text-gray-600 font-semibold uppercase tracking-wider mb-2">
+          RL Reward per Step
+        </div>
+        <RewardChart points={rewardPoints} />
+      </div>
+
+      {/* GitHub diff — appears after each GEPA cycle */}
+      {latestDiff && (
+        <div>
+          <div className="flex items-center gap-1.5 mb-2">
+            <GitCommitHorizontal size={11} className="text-violet-400" />
+            <span className="text-[10px] text-gray-500 font-semibold uppercase tracking-wider">
+              Prompt diff — Gen {latestDiff.from} → {latestDiff.to}
+            </span>
+          </div>
+          <GithubDiff fromIdx={latestDiff.from} toIdx={latestDiff.to} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── SQL highlighter ─────────────────────────────────────────────────────────
 
 function HighlightSQL({ sql }: { sql: string }) {
-  const keywords = /\b(SELECT|FROM|WHERE|JOIN|LEFT|RIGHT|ON|GROUP BY|ORDER BY|HAVING|LIMIT|AS|AND|OR|SUM|AVG|COUNT|ROUND|DISTINCT|DESC|ASC|NULL|NOT|IN|IS)\b/gi
+  const re = /\b(SELECT|FROM|WHERE|JOIN|LEFT|RIGHT|ON|GROUP BY|ORDER BY|HAVING|LIMIT|AS|AND|OR|NOT|IN|IS|NULL|SUM|AVG|COUNT|ROUND|DISTINCT|DESC|ASC|strftime|JULIANDAY)\b/gi
   const parts: React.ReactNode[] = []
-  let last = 0
-  let match: RegExpExecArray | null
-  const re = new RegExp(keywords.source, 'gi')
-  while ((match = re.exec(sql)) !== null) {
+  let last = 0; let match: RegExpExecArray | null
+  const r = new RegExp(re.source, 'gi')
+  while ((match = r.exec(sql)) !== null) {
     if (match.index > last) parts.push(<span key={`t${last}`}>{sql.slice(last, match.index)}</span>)
     parts.push(<span key={`k${match.index}`} className="text-violet-300 font-semibold">{match[0]}</span>)
     last = match.index + match[0].length
   }
-  if (last < sql.length) parts.push(<span key="tend">{sql.slice(last)}</span>)
+  if (last < sql.length) parts.push(<span key="end">{sql.slice(last)}</span>)
   return <>{parts}</>
 }
 
-// ─── Bubble renderers ─────────────────────────────────────────────────────────
+// ─── Bubble types ─────────────────────────────────────────────────────────────
+
+interface BaseBubble { id: string }
+interface UserBubble extends BaseBubble { type: 'user'; text: string }
+interface ThinkingBubble extends BaseBubble { type: 'thinking'; label: string }
+interface SqlStreamBubble extends BaseBubble { type: 'sql_stream'; sql: string; attempt: number }
+interface SqlErrBubble extends BaseBubble { type: 'sql_err'; sql: string; error: string; errorClass: string; rlAction: string; reward: number; attempt: number }
+interface SqlOkBubble extends BaseBubble { type: 'sql_ok'; sql: string; rows: Record<string, string | number>[]; reward: number; attempt: number; firstTry: boolean }
+interface GepaBubble extends BaseBubble { type: 'gepa'; fromGen: number; toGen: number; scoreFrom: number; scoreTo: number }
+interface GroupBubble extends BaseBubble { type: 'group'; question: string; success: boolean; attempts: number; children: BubbleData[] }
+type BubbleData = UserBubble | ThinkingBubble | SqlStreamBubble | SqlErrBubble | SqlOkBubble | GepaBubble | GroupBubble
+
+let _id = 0
+const uid = () => `b${++_id}`
+const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms))
+
+// ─── Bubble renderer ─────────────────────────────────────────────────────────
 
 function Bubble({ b }: { b: BubbleData }) {
   const [open, setOpen] = useState(false)
 
   if (b.type === 'user') return (
     <div className="flex justify-end">
-      <div className="max-w-[75%] bg-violet-600/20 border border-violet-500/25 rounded-2xl rounded-tr-sm px-4 py-2.5">
+      <div className="max-w-[78%] bg-violet-600/20 border border-violet-500/25 rounded-2xl rounded-tr-sm px-4 py-2.5">
         <p className="text-sm text-white">{b.text}</p>
       </div>
     </div>
   )
 
   if (b.type === 'thinking') return (
-    <div className="flex items-center gap-2 text-xs text-gray-500 px-1">
+    <div className="flex items-center gap-2 px-1 text-xs text-gray-500">
       <Loader2 size={11} className="animate-spin text-violet-400 shrink-0" />
       {b.label}
     </div>
@@ -288,10 +382,10 @@ function Bubble({ b }: { b: BubbleData }) {
     <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">
         <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>
+        <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.06)' }}>
+      <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)' }}>
         <HighlightSQL sql={b.sql} />
         <span className="inline-block w-0.5 h-[1em] bg-violet-400 animate-pulse align-bottom ml-0.5" />
       </pre>
@@ -303,26 +397,20 @@ function Bubble({ b }: { b: BubbleData }) {
       <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">
           <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>
+          <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.06)' }}>
+        <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)' }}>
           <HighlightSQL sql={b.sql} />
         </pre>
       </div>
-      <div className="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-xl px-3 py-2 text-xs text-red-300">
-        <XCircle size={11} className="shrink-0 mt-0.5" />
-        <div className="flex-1">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span>{b.error}</span>
-            <span className="text-[10px] px-1.5 py-0.5 bg-red-500/15 rounded-full text-red-400">{b.errorClass}</span>
-          </div>
-        </div>
-        <div className="flex items-center gap-1.5 shrink-0">
-          <span className="inline-flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full border border-orange-500/30 bg-orange-500/10 text-orange-400">
-            <Zap size={8} />{b.rlAction}
-          </span>
-          <span className="text-[11px] font-bold text-red-400">{b.reward.toFixed(2)}</span>
-        </div>
+      <div className="flex items-center gap-2 flex-wrap bg-red-500/8 border border-red-500/20 rounded-xl px-3 py-2">
+        <XCircle size={11} className="text-red-400 shrink-0" />
+        <span className="text-xs text-red-300 flex-1">{b.error}</span>
+        <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-red-500/15 text-red-400 border border-red-500/20">{b.errorClass}</span>
+        <span className="flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full border border-orange-500/30 bg-orange-500/10 text-orange-400">
+          <Zap size={8} />{b.rlAction}
+        </span>
+        <span className="text-[11px] font-bold text-red-400">{b.reward.toFixed(2)}</span>
       </div>
     </div>
   )
@@ -333,41 +421,38 @@ function Bubble({ b }: { b: BubbleData }) {
         <div className="px-3 py-1.5 bg-white/[0.02] flex items-center gap-2">
           <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="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.06)' }}>
+        <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)' }}>
           <HighlightSQL sql={b.sql} />
         </pre>
       </div>
-      <div className="flex items-center gap-2 text-[10px] px-0.5">
+      <div className="flex items-center gap-1.5 text-[10px] px-0.5">
         <CheckCircle2 size={11} className="text-green-400" />
         <span className="text-green-400 font-semibold">Success</span>
-        <span className="text-gray-600">· {b.rows.length} rows</span>
-        <span className="ml-auto text-[11px] font-bold text-green-400">+{b.reward.toFixed(2)}</span>
+        <span className="text-gray-600">· {b.rows.length}+ rows returned</span>
       </div>
-      {/* Results mini-table */}
       <div className="rounded-xl border border-white/[0.06] overflow-hidden text-[10px]">
-        <div className="grid overflow-x-auto">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-white/[0.03]">
-                {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>
+        <table className="w-full">
+          <thead>
+            <tr className="bg-white/[0.03]">
+              {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>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {b.rows.map((row, i) => (
+              <tr key={i} className={i % 2 === 0 ? 'bg-white/[0.01]' : ''}>
+                {Object.values(row).map((v, j) => (
+                  <td key={j} className="px-2 py-1 text-gray-300 whitespace-nowrap">{String(v)}</td>
                 ))}
               </tr>
-            </thead>
-            <tbody>
-              {b.rows.map((row, i) => (
-                <tr key={i} className={i % 2 === 0 ? 'bg-white/[0.01]' : ''}>
-                  {Object.values(row).map((v, j) => (
-                    <td key={j} className="px-2 py-1 text-gray-300 whitespace-nowrap">{String(v)}</td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
   )
@@ -375,201 +460,104 @@ function Bubble({ b }: { b: BubbleData }) {
   if (b.type === 'gepa') return (
     <div className="border border-violet-500/25 rounded-2xl overflow-hidden bg-violet-500/5">
       <div className="px-4 py-3 flex items-center gap-2 border-b border-violet-500/15">
-        <Sparkles size={13} className="text-violet-400" />
-        <span className="text-xs font-semibold text-violet-300">GEPA Prompt Evolution</span>
-        <span className="ml-auto text-[10px] text-violet-400/70">Gen {b.fromGen} → Gen {b.toGen}</span>
+        <Sparkles size={12} className="text-violet-400" />
+        <span className="text-xs font-semibold text-violet-300">GEPA — System Prompt Evolved</span>
+        <span className="ml-auto text-[10px] text-violet-400/60">Gen {b.fromGen} → {b.toGen}</span>
       </div>
-      <div className="px-4 py-3 flex items-center gap-4">
-        <div className="flex flex-col items-center gap-0.5">
-          <div className="text-[10px] text-gray-600">Before</div>
-          <div className="text-lg font-bold text-orange-400">{(b.scoreFrom * 100).toFixed(0)}%</div>
+      <div className="px-4 py-3 flex items-center gap-6">
+        <div className="text-center">
+          <div className="text-[10px] text-gray-600 mb-0.5">Before</div>
+          <div className="text-xl font-bold text-orange-400">{(b.scoreFrom * 100).toFixed(0)}%</div>
         </div>
-        <TrendingUp size={18} className="text-violet-400" />
-        <div className="flex flex-col items-center gap-0.5">
-          <div className="text-[10px] text-gray-600">After</div>
-          <div className="text-lg font-bold text-green-400">{(b.scoreTo * 100).toFixed(0)}%</div>
+        <div className="flex-1 flex flex-col items-center">
+          <div className="text-xs text-violet-400 mb-1">↑ improved</div>
+          <div className="w-full h-0.5 bg-gradient-to-r from-orange-400 to-green-400 rounded-full" />
         </div>
-        <div className="ml-auto text-[10px] text-gray-500">
-          System prompt updated with<br />targeted repair rules
+        <div className="text-center">
+          <div className="text-[10px] text-gray-600 mb-0.5">After</div>
+          <div className="text-xl font-bold text-green-400">{(b.scoreTo * 100).toFixed(0)}%</div>
         </div>
       </div>
-    </div>
-  )
-
-  if (b.type === 'group') {
-    const color = b.difficulty === 'Easy' ? 'text-green-400' : b.difficulty === 'Hard' ? 'text-red-400' : 'text-amber-400'
-    return (
-      <div className="border border-white/[0.06] rounded-2xl overflow-hidden">
-        <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"
-        >
-          {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-[10px] font-semibold px-1.5 py-0.5 rounded-full border ${color} border-current/30 bg-current/10`}>{b.badge}</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]">
-                {b.children.map((child) => <Bubble key={child.id} b={child} />)}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    )
-  }
-
-  return null
-}
-
-// ─── Right panel — prompt + score ─────────────────────────────────────────────
-
-function PromptPanel({ gen, score }: { gen: number; score: number }) {
-  const [open, setOpen] = useState(false)
-  const prompt = PROMPTS[gen] ?? PROMPTS[0]
-  const lines = prompt.split('\n')
-
-  return (
-    <div className="flex flex-col gap-3 px-4 py-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Sparkles size={12} className="text-violet-400" />
-          <span className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider">GEPA Prompt</span>
+      <div className="px-4 pb-3">
+        <div className="text-[10px] text-gray-600 mb-1.5 flex items-center gap-1.5">
+          <GitCommitHorizontal size={10} />
+          Prompt diff (see sidebar for full view)
         </div>
-        <span className="text-[10px] px-2 py-0.5 rounded-full bg-violet-500/15 border border-violet-500/25 text-violet-400 font-semibold">
-          Gen {gen}
-        </span>
-      </div>
-
-      {/* Score */}
-      <div className="bg-white/[0.03] border border-white/[0.06] rounded-xl p-3 flex items-center gap-3">
-        <div>
-          <div className="text-[10px] text-gray-600 mb-0.5">Benchmark score</div>
-          <div className="text-2xl font-bold text-green-400 tabular-nums">{(score * 100).toFixed(0)}%</div>
-        </div>
-        <div className="flex-1 h-1.5 bg-white/[0.05] rounded-full overflow-hidden">
-          <motion.div
-            className="h-full bg-gradient-to-r from-violet-500 to-green-400 rounded-full"
-            animate={{ width: `${score * 100}%` }}
-            transition={{ duration: 0.8, ease: 'easeOut' }}
-          />
+        <div className="rounded-lg border border-white/[0.05] overflow-hidden text-[10px] font-mono max-h-24 overflow-y-auto">
+          {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>
+              <span className={line.type === 'add' ? 'text-green-300' : 'text-red-300'}>{line.text}</span>
+            </div>
+          ))}
         </div>
       </div>
+    </div>
+  )
 
-      {/* Prompt preview */}
-      <div className="border border-white/[0.06] rounded-xl overflow-hidden">
-        <button
-          onClick={() => setOpen((v) => !v)}
-          className="w-full flex items-center justify-between px-3 py-2 bg-white/[0.02] hover:bg-white/[0.04] transition-colors"
-        >
-          <span className="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">System Prompt</span>
-          {open ? <ChevronUp size={11} className="text-gray-600" /> : <ChevronDown size={11} className="text-gray-600" />}
-        </button>
-        <AnimatePresence>
-          {open && (
-            <motion.div
-              initial={{ height: 0 }}
-              animate={{ height: 'auto' }}
-              exit={{ height: 0 }}
-              transition={{ duration: 0.15 }}
-              className="overflow-hidden"
-            >
-              <div className="px-3 py-2.5 text-[10px] leading-relaxed font-mono text-gray-400 max-h-48 overflow-y-auto">
-                {lines.map((line, i) => {
-                  const isNew = gen > 0 && i >= PROMPTS[gen - 1].split('\n').length
-                  return (
-                    <div
-                      key={i}
-                      className={isNew ? 'text-green-400 bg-green-500/8 -mx-3 px-3' : ''}
-                    >
-                      {line || <br />}
-                    </div>
-                  )
-                })}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-
-      {/* Score history */}
-      <div className="flex flex-col gap-1">
-        <div className="text-[10px] text-gray-600 font-semibold uppercase tracking-wider mb-0.5">Evolution</div>
-        {SCORES.slice(0, gen + 1).map((s, i) => (
-          <div key={i} className="flex items-center gap-2">
-            <span className="text-[10px] 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="h-full rounded-full"
-                style={{
-                  width: `${s * 100}%`,
-                  background: i === gen ? 'linear-gradient(90deg,#8b5cf6,#22c55e)' : '#374151',
-                }}
-              />
+  if (b.type === 'group') return (
+    <div className="border border-white/[0.06] rounded-2xl overflow-hidden">
+      <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"
+      >
+        {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-[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]">
+              {b.children.map((c) => <Bubble key={c.id} b={c} />)}
             </div>
-            <span className={`text-[10px] font-bold tabular-nums ${i === gen ? 'text-green-400' : 'text-gray-600'}`}>
-              {(s * 100).toFixed(0)}%
-            </span>
-          </div>
-        ))}
-      </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   )
-}
 
-// ─── Main DemoMode Component ──────────────────────────────────────────────────
-
-interface DemoModeProps {
-  onClose: () => void
+  return null
 }
 
-export function DemoMode({ onClose }: DemoModeProps) {
+// ─── DemoMode ────────────────────────────────────────────────────────────────
+
+export function DemoMode({ onClose }: { onClose: () => void }) {
   const [bubbles, setBubbles] = useState<BubbleData[]>([])
-  const [appState, setAppState] = useState<AppState>('idle')
+  const [appState, setAppState] = useState<'idle' | 'running' | 'done'>('idle')
   const [gen, setGen] = useState(0)
   const [score, setScore] = useState(SCORES[0])
+  const [rewardPoints, setRewardPoints] = useState<RewardPoint[]>([])
+  const [latestDiff, setLatestDiff] = useState<{ from: number; to: number } | null>(null)
+  const stepRef = useRef(0)
   const cancel = useRef(false)
   const bottomRef = useRef<HTMLDivElement>(null)
 
-  const push = useCallback((b: BubbleData) => {
-    setBubbles((prev) => [...prev, b])
+  const scroll = useCallback(() => {
+    setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 60)
   }, [])
 
-  const replaceLast = useCallback((b: BubbleData) => {
-    setBubbles((prev) => [...prev.slice(0, -1), b])
-  }, [])
+  const push = useCallback((b: BubbleData) => setBubbles((p) => [...p, b]), [])
 
-  const scrollDown = useCallback(() => {
-    setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50)
+  const addReward = useCallback((reward: number) => {
+    stepRef.current += 1
+    setRewardPoints((p) => [...p, { step: stepRef.current, reward }])
   }, [])
 
-  // Type text character by character
   const typeUser = useCallback(async (text: string) => {
     const id = uid()
     push({ id, type: 'user', text: '' })
     for (let i = 1; i <= text.length; i++) {
       if (cancel.current) return
-      setBubbles((prev) => prev.map((b) => (b.id === id ? { ...b, text: text.slice(0, i) } : b)))
-      await sleep(35 + Math.random() * 25)
+      setBubbles((p) => p.map((b) => b.id === id ? { ...b, text: text.slice(0, i) } : b))
+      await sleep(32 + Math.random() * 22)
     }
-    scrollDown()
-    await sleep(350)
-  }, [push, scrollDown])
+    scroll(); await sleep(300)
+  }, [push, scroll])
 
-  // Stream SQL line by line
   const streamSQL = useCallback(async (sql: string, attempt: number) => {
     const id = uid()
     push({ id, type: 'sql_stream', sql: '', attempt })
@@ -577,281 +565,168 @@ export function DemoMode({ onClose }: DemoModeProps) {
     for (const line of sql.split('\n')) {
       if (cancel.current) return
       built += (built ? '\n' : '') + line
-      setBubbles((prev) => prev.map((b) => (b.id === id ? { ...b, sql: built } : b)))
-      await sleep(90 + Math.random() * 80)
+      setBubbles((p) => p.map((b) => b.id === id ? { ...b, sql: built } : b))
+      await sleep(85 + Math.random() * 70)
     }
-    scrollDown()
-    await sleep(250)
-    // Remove stream bubble (will be replaced by err or ok bubble)
-    setBubbles((prev) => prev.filter((b) => b.id !== id))
-  }, [push, scrollDown])
+    scroll(); await sleep(200)
+    setBubbles((p) => p.filter((b) => b.id !== id))
+  }, [push, scroll])
 
-  // Play one full query (possibly multiple attempts)
   const playQuery = useCallback(async (def: QueryDef): Promise<BubbleData[]> => {
     const children: BubbleData[] = []
-
     await typeUser(def.question)
 
     for (let i = 0; i < def.attempts.length; i++) {
       if (cancel.current) return children
       const att = def.attempts[i]
-      const attemptNum = i + 1
 
-      // Show thinking
-      const thinkId = uid()
-      push({ id: thinkId, type: 'thinking', label: 'Generating SQL…' })
-      scrollDown()
-      await sleep(800)
+      // Thinking
+      const thId = uid()
+      push({ id: thId, type: 'thinking', label: i === 0 ? 'Generating SQL…' : 'Applying repair strategy…' })
+      scroll(); await sleep(750)
       if (cancel.current) return children
-      setBubbles((prev) => prev.filter((b) => b.id !== thinkId))
+      setBubbles((p) => p.filter((b) => b.id !== thId))
 
-      await streamSQL(att.sql, attemptNum)
+      await streamSQL(att.sql, i + 1)
       if (cancel.current) return children
 
+      addReward(att.reward)
+
       if (att.error) {
-        const errBubble: SqlErrBubble = {
-          id: uid(), type: 'sql_err',
-          sql: att.sql, error: att.error,
-          errorClass: att.errorClass ?? 'OTHER',
-          rlAction: att.rlAction ?? 'REWRITE_FULL',
-          reward: att.reward,
-          attempt: attemptNum,
-        }
-        push(errBubble)
-        children.push(errBubble)
-        scrollDown()
-        await sleep(900)
+        const eb: SqlErrBubble = { id: uid(), type: 'sql_err', sql: att.sql, error: att.error, errorClass: att.errorClass ?? 'OTHER', rlAction: att.rlAction ?? 'REWRITE_FULL', reward: att.reward, attempt: i + 1 }
+        push(eb); children.push(eb); scroll(); await sleep(900)
       } else {
-        const okBubble: SqlOkBubble = {
-          id: uid(), type: 'sql_ok',
-          sql: att.sql,
-          rows: att.rows ?? [],
-          reward: att.reward,
-          attempt: attemptNum,
-          badge: def.badge,
-          firstTry: attemptNum === 1,
-        }
-        push(okBubble)
-        children.push(okBubble)
-        scrollDown()
-        await sleep(1200)
+        const ob: SqlOkBubble = { id: uid(), type: 'sql_ok', sql: att.sql, rows: att.rows ?? [], reward: att.reward, attempt: i + 1, firstTry: i === 0 }
+        push(ob); children.push(ob); scroll(); await sleep(1100)
       }
     }
-
     return children
-  }, [push, scrollDown, typeUser, streamSQL])
+  }, [push, scroll, typeUser, streamSQL, addReward])
 
-  // Collapse query into a group bubble
   const collapseQuery = useCallback((def: QueryDef, children: BubbleData[]) => {
-    const lastAttempt = def.attempts[def.attempts.length - 1]
-    const success = !lastAttempt.error
-
-    // Remove user bubble + children, replace with group
+    const lastAtt = def.attempts[def.attempts.length - 1]
     setBubbles((prev) => {
-      // Find user bubble for this question
-      const userIdx = [...prev].reverse().findIndex(
-        (b) => b.type === 'user' && (b as UserBubble).text === def.question
-      )
+      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 userBubble = prev[fromIdx] as UserBubble
-
-      const group: GroupBubble = {
-        id: uid(),
-        type: 'group',
-        question: userBubble.text,
-        badge: def.badge,
-        difficulty: def.difficulty,
-        success,
-        attempts: def.attempts.length,
-        children,
-      }
+      const group: GroupBubble = { id: uid(), type: 'group', question: def.question, success: !lastAtt.error, attempts: def.attempts.length, children }
       return [...prev.slice(0, fromIdx), group]
     })
   }, [])
 
-  // Animate GEPA cycle
   const playGepa = useCallback(async (fromGen: number, toGen: number) => {
-    setAppState('gepa')
-
-    const thinkId = uid()
-    const steps = [
-      'Analyzing failure patterns…',
-      'Identifying missing rules…',
-      'Rewriting system prompt…',
-      'Benchmarking new prompt…',
-    ]
-    for (const step of steps) {
+    const steps = ['Analyzing failure patterns…', 'Identifying missing rules from errors…', 'Rewriting system prompt…', 'Benchmarking candidate prompt…']
+    for (const label of steps) {
       if (cancel.current) return
-      replaceLast({ id: thinkId, type: 'thinking', label: step })
-      push({ id: thinkId, type: 'thinking', label: step })
-      setBubbles((prev) => {
-        const last = prev[prev.length - 1]
-        if (last?.type === 'thinking') return [...prev.slice(0, -1), { id: thinkId, type: 'thinking', label: step }]
-        return [...prev, { id: thinkId, type: 'thinking', label: step }]
+      setBubbles((p) => {
+        const last = p[p.length - 1]
+        if (last?.type === 'thinking') return [...p.slice(0, -1), { id: last.id, type: 'thinking' as const, label }]
+        return [...p, { id: uid(), type: 'thinking' as const, label }]
       })
-      scrollDown()
-      await sleep(1100)
+      scroll(); await sleep(1050)
     }
-    // Remove thinking
-    setBubbles((prev) => prev.filter((b) => b.id !== thinkId))
+    setBubbles((p) => p.filter((b) => b.type !== 'thinking'))
 
     // Animate score
-    const from = SCORES[fromGen]
-    const to = SCORES[toGen]
-    for (let i = 0; i <= 40; i++) {
+    const from = SCORES[fromGen], to = SCORES[toGen]
+    for (let i = 0; i <= 45; i++) {
       if (cancel.current) return
-      setScore(from + (to - from) * (i / 40))
-      await sleep(20)
+      setScore(from + (to - from) * (i / 45))
+      await sleep(18)
     }
     setGen(toGen)
+    setLatestDiff({ from: fromGen, to: toGen })
 
-    // Push GEPA bubble
     push({ id: uid(), type: 'gepa', fromGen, toGen, scoreFrom: from, scoreTo: to })
-    scrollDown()
-    await sleep(1000)
-    setAppState('running')
-  }, [push, replaceLast, scrollDown])
+    scroll(); await sleep(1000)
+  }, [push, scroll])
 
   const autoPlay = useCallback(async () => {
     cancel.current = false
-    setBubbles([])
-    setGen(0)
-    setScore(SCORES[0])
-    setAppState('running')
-    await sleep(400)
+    setBubbles([]); setGen(0); setScore(SCORES[0]); setRewardPoints([]); setLatestDiff(null)
+    stepRef.current = 0; setAppState('running')
+    await sleep(300)
 
-    // Round 1
     for (const id of ROUND_1) {
       if (cancel.current) break
-      const def = QUERIES[id]
-      const children = await playQuery(def)
+      const children = await playQuery(QUERIES[id])
       if (cancel.current) break
-      await sleep(400)
-      collapseQuery(def, children)
-      await sleep(700)
+      await sleep(350); collapseQuery(QUERIES[id], children); await sleep(600)
     }
+    if (!cancel.current) { await playGepa(0, 1); await sleep(500) }
 
-    if (!cancel.current) {
-      await playGepa(0, 1)
-      await sleep(500)
-    }
-
-    // Round 2
     for (const id of ROUND_2) {
       if (cancel.current) break
-      const def = QUERIES[id]
-      const children = await playQuery(def)
+      const children = await playQuery(QUERIES[id])
       if (cancel.current) break
-      await sleep(400)
-      collapseQuery(def, children)
-      await sleep(700)
+      await sleep(350); collapseQuery(QUERIES[id], children); await sleep(600)
     }
+    if (!cancel.current) { await playGepa(1, 2); await sleep(500) }
 
-    if (!cancel.current) {
-      await playGepa(1, 2)
-      setAppState('done')
+    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)
     }
-  }, [playQuery, collapseQuery, playGepa])
 
-  const handleStart = () => void autoPlay()
-
-  const handleReplay = () => {
-    cancel.current = true
-    setTimeout(() => {
-      cancel.current = false
-      setBubbles([])
-      setGen(0)
-      setScore(SCORES[0])
-      setAppState('idle')
-    }, 200)
-  }
+    if (!cancel.current) setAppState('done')
+  }, [playQuery, collapseQuery, playGepa])
 
-  useEffect(() => {
-    return () => { cancel.current = true }
-  }, [])
+  useEffect(() => () => { cancel.current = true }, [])
 
   return (
     <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
+      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
       className="fixed inset-0 z-[100] flex flex-col"
       style={{ background: 'var(--bg-primary)' }}
     >
-      {/* Header bar */}
-      <div
-        className="shrink-0 flex items-center justify-between px-4 py-3 border-b border-white/[0.06]"
-        style={{ background: 'var(--bg-secondary)' }}
-      >
+      {/* 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="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={10} className="text-violet-400" fill="currentColor" />
-            <span className="text-[11px] font-semibold text-violet-300">Demo Mode</span>
+            <Play size={9} className="text-violet-400" fill="currentColor" />
+            <span className="text-[11px] font-semibold text-violet-300">Demo</span>
           </div>
-          <span className="text-xs text-gray-500 hidden sm:block">
-            Watching SQL Agent learn through RL repair loop + GEPA prompt evolution
+          <span className="text-xs text-gray-600 hidden sm:block">
+            RL repair loop · GEPA prompt evolution · 42% → 91%
           </span>
         </div>
-        <div className="flex items-center gap-2">
-          {appState !== 'idle' && (
-            <button
-              onClick={handleReplay}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-white/[0.06] text-[11px] text-gray-400 hover:text-white hover:bg-white/5 transition-all"
-            >
-              <RotateCcw size={11} />
-              Replay
-            </button>
-          )}
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-lg hover:bg-white/5 transition-colors text-gray-500 hover:text-white"
-          >
-            <X size={16} />
-          </button>
-        </div>
+        <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-white/5 text-gray-500 hover:text-white transition-colors">
+          <X size={16} />
+        </button>
       </div>
 
       {/* Body */}
       <div className="flex flex-1 overflow-hidden">
-        {/* Chat column */}
+        {/* Chat */}
         <div className="flex-1 flex flex-col overflow-hidden">
           <div className="flex-1 overflow-y-auto px-4 py-4">
             {appState === 'idle' ? (
-              /* Start screen */
-              <div className="flex flex-col items-center justify-center h-full gap-6 text-center px-6">
-                <div
-                  className="w-16 h-16 rounded-2xl flex items-center justify-center"
-                  style={{ background: 'linear-gradient(135deg,#3b0764,#1e3a5f)', boxShadow: '0 12px 40px rgba(139,92,246,0.3)' }}
-                >
-                  <Play size={26} className="text-white ml-0.5" fill="currentColor" />
+              <div className="flex flex-col items-center justify-center h-full gap-5 text-center px-6">
+                <div className="w-14 h-14 rounded-2xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg,#3b0764,#1e3a5f)', boxShadow: '0 12px 32px rgba(139,92,246,0.3)' }}>
+                  <Play size={24} className="text-white ml-0.5" fill="currentColor" />
                 </div>
                 <div>
-                  <h2 className="text-lg font-bold text-white mb-2">SQL Agent in Action</h2>
-                  <p className="text-sm text-gray-500 max-w-sm">
-                    Watch the agent fail on ambiguous queries, use LinUCB to pick repair strategies,
-                    and improve via GEPA prompt evolution — from 42% → 91% accuracy.
+                  <h2 className="text-base font-bold text-white mb-1.5">SQL Agent OpenEnv — Live Demo</h2>
+                  <p className="text-sm text-gray-500 max-w-sm leading-relaxed">
+                    Watch the agent fail, self-repair using LinUCB, then improve through two GEPA prompt evolution cycles.
                   </p>
                 </div>
-                <div className="flex flex-col gap-2 text-xs text-gray-600 max-w-xs">
-                  {[
-                    'Round 1 — 3 queries with RL repair loop',
-                    'GEPA cycle — prompt evolves Gen 0 → Gen 1',
-                    'Round 2 — same queries succeed faster',
-                    'GEPA cycle — Gen 1 → Gen 2 (91% accuracy)',
-                  ].map((s, i) => (
-                    <div key={i} className="flex items-center gap-2">
-                      <div className="w-4 h-4 rounded-full bg-violet-500/20 border border-violet-500/30 flex items-center justify-center text-[9px] text-violet-400 font-bold shrink-0">{i + 1}</div>
+                <div className="flex flex-col gap-1.5 text-xs text-gray-600 max-w-xs text-left">
+                  {['Round 1 — simple queries, RL repairs table/column errors', 'GEPA cycle 1 — prompt learns alias rules (42%→74%)', 'Round 2 — join queries, ambiguous column errors repaired', 'GEPA cycle 2 — prompt learns aggregation rules (74%→91%)', 'Round 3 — same queries, first-try success'].map((s, i) => (
+                    <div key={i} className="flex items-start gap-2">
+                      <div className="w-4 h-4 rounded-full bg-violet-500/20 border border-violet-500/30 flex items-center justify-center text-[9px] text-violet-400 font-bold shrink-0 mt-0.5">{i + 1}</div>
                       {s}
                     </div>
                   ))}
                 </div>
                 <button
-                  onClick={handleStart}
-                  className="flex items-center gap-2 px-6 py-3 rounded-2xl font-semibold text-sm text-white transition-all active:scale-95"
+                  onClick={() => void autoPlay()}
+                  className="flex items-center gap-2 px-6 py-3 rounded-2xl font-semibold text-sm text-white active:scale-95 transition-transform"
                   style={{ background: 'linear-gradient(135deg,#7c3aed,#2563eb)', boxShadow: '0 8px 24px rgba(124,58,237,0.4)' }}
                 >
-                  <Play size={14} fill="currentColor" />
+                  <Play size={13} fill="currentColor" />
                   Start Demo
                 </button>
               </div>
@@ -859,34 +734,19 @@ export function DemoMode({ onClose }: DemoModeProps) {
               <div className="flex flex-col gap-4 max-w-2xl mx-auto">
                 <AnimatePresence initial={false}>
                   {bubbles.map((b) => (
-                    <motion.div
-                      key={b.id}
-                      initial={{ opacity: 0, y: 8 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.2 }}
-                    >
+                    <motion.div key={b.id} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.18 }}>
                       <Bubble b={b} />
                     </motion.div>
                   ))}
                 </AnimatePresence>
+
                 {appState === 'done' && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 12 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    className="border border-green-500/25 rounded-2xl p-4 bg-green-500/5 text-center"
-                  >
-                    <div className="text-2xl font-bold text-green-400 mb-1">91%</div>
-                    <div className="text-sm text-white font-semibold mb-1">Demo complete</div>
-                    <div className="text-xs text-gray-500">
-                      Agent improved from 42% → 91% through RL repair + GEPA evolution
+                  <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="border border-green-500/25 rounded-2xl p-5 bg-green-500/5 text-center mt-2">
+                    <div className="text-3xl font-bold text-green-400 mb-1 tabular-nums">91%</div>
+                    <div className="text-sm font-semibold text-white mb-1">Demo complete</div>
+                    <div className="text-xs text-gray-500 max-w-xs mx-auto leading-relaxed">
+                      Agent improved from 42% → 91% accuracy through RL-driven repair strategies and two GEPA prompt evolution cycles.
                     </div>
-                    <button
-                      onClick={handleReplay}
-                      className="mt-3 flex items-center gap-1.5 px-4 py-2 rounded-xl border border-white/[0.06] text-xs text-gray-400 hover:text-white hover:bg-white/5 transition-all mx-auto"
-                    >
-                      <RotateCcw size={11} />
-                      Watch again
-                    </button>
                   </motion.div>
                 )}
                 <div ref={bottomRef} />
@@ -895,12 +755,9 @@ export function DemoMode({ onClose }: DemoModeProps) {
           </div>
         </div>
 
-        {/* Right panel — prompt evolution */}
-        <aside
-          className="hidden lg:flex flex-col w-72 border-l border-white/[0.06] overflow-y-auto shrink-0"
-          style={{ background: 'var(--bg-secondary)' }}
-        >
-          <PromptPanel gen={gen} score={score} />
+        {/* 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)' }}>
+          <RightPanel gen={gen} score={score} rewardPoints={rewardPoints} latestDiff={latestDiff} />
         </aside>
       </div>
     </motion.div>