feat: add Demo button with scripted autoplay showcase

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import { ChatPanel } from './components/ChatPanel'
 import { BenchmarkPanel } from './components/BenchmarkPanel'
 import { ERDiagram } from './components/ERDiagram'
 import { RightSidebar } from './components/RightSidebar'
+import { DemoMode } from './components/DemoMode'
 import { useStore } from './store/useStore'
 import { fetchInit } from './lib/api'
 
@@ -23,6 +24,7 @@ export default function App() {
   const [activeTab, setActiveTab] = useState<Tab>('chat')
   const [leftOpen, setLeftOpen] = useState(false)
   const [rightOpen, setRightOpen] = useState(false)
+  const [demoOpen, setDemoOpen] = useState(false)
 
   const { theme, setDbSeeded, setTables, setSchemaGraph } = useStore()
 
@@ -71,8 +73,13 @@ export default function App() {
       <Header
         onToggleLeft={() => { setLeftOpen((v) => !v); setRightOpen(false) }}
         onToggleRight={() => { setRightOpen((v) => !v); setLeftOpen(false) }}
+        onDemo={() => setDemoOpen(true)}
       />
 
+      <AnimatePresence>
+        {demoOpen && <DemoMode onClose={() => setDemoOpen(false)} />}
+      </AnimatePresence>
+
       <div className="flex flex-1 overflow-hidden relative">
         {/* Overlay backdrop (mobile) */}
         {(leftOpen || rightOpen) && (

frontend/src/components/DemoMode.tsx

@@ -0,0 +1,908 @@
+/**
+ * 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.
+ */
+
+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,
+} from 'lucide-react'
+
+// ─── Scripted data ────────────────────────────────────────────────────────────
+
+const PROMPTS = [
+  // Gen 0 — baseline
+  `You are a SQL expert. Given a question and a SQLite database 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.
+
+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`,
+
+  // Gen 2 — after second GEPA cycle
+  `You are a SQL expert. Given a question and a SQLite database 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`,
+]
+
+const SCORES = [0.42, 0.74, 0.91]
+
+interface Attempt {
+  sql: string
+  error?: string
+  errorClass?: string
+  rlAction?: string
+  reward: number
+  rows?: Record<string, string | number>[]
+}
+
+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',
+    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 },
+        ],
+      },
+    ],
+  },
+  q2r1: {
+    id: 'q2r1', question: 'Top 5 sellers by total revenue',
+    badge: 'Medium', difficulty: 'Medium',
+    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 },
+        ],
+      },
+    ],
+  },
+  q3r1: {
+    id: 'q3r1', question: 'Average order value by country',
+    badge: 'Medium', difficulty: 'Medium',
+    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 },
+        ],
+      },
+    ],
+  },
+  // Round 2 — after GEPA, succeed faster
+  q1r2: {
+    id: 'q1r2', question: 'Show all products',
+    badge: 'Easy', difficulty: 'Easy',
+    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 },
+        ],
+      },
+    ],
+  },
+  q2r2: {
+    id: 'q2r2', question: 'Top 5 sellers by total revenue',
+    badge: 'Medium', difficulty: 'Medium',
+    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 },
+        ],
+      },
+    ],
+  },
+  q3r2: {
+    id: 'q3r2', question: 'Average order value by country',
+    badge: 'Medium', difficulty: 'Medium',
+    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 },
+        ],
+      },
+    ],
+  },
+}
+
+const ROUND_1 = ['q1r1', 'q2r1', 'q3r1']
+const ROUND_2 = ['q1r2', 'q2r2', 'q3r2']
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+let _idCounter = 0
+const uid = () => `bubble-${++_idCounter}`
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((res) => setTimeout(res, ms))
+}
+
+type AppState = 'idle' | 'running' | 'gepa' | 'done'
+
+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[] }
+
+type BubbleData = UserBubble | ThinkingBubble | SqlStreamBubble | SqlErrBubble | SqlOkBubble | GepaBubble | GroupBubble
+
+// ─── SQL keyword 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 parts: React.ReactNode[] = []
+  let last = 0
+  let match: RegExpExecArray | null
+  const re = new RegExp(keywords.source, 'gi')
+  while ((match = re.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>)
+  return <>{parts}</>
+}
+
+// ─── Bubble renderers ─────────────────────────────────────────────────────────
+
+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">
+        <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">
+      <Loader2 size={11} className="animate-spin text-violet-400 shrink-0" />
+      {b.label}
+    </div>
+  )
+
+  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">
+        <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.06)' }}>
+        <HighlightSQL sql={b.sql} />
+        <span className="inline-block w-0.5 h-[1em] bg-violet-400 animate-pulse align-bottom ml-0.5" />
+      </pre>
+    </div>
+  )
+
+  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">
+          <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.06)' }}>
+          <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>
+    </div>
+  )
+
+  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">
+          <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>
+          )}
+        </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)' }}>
+          <HighlightSQL sql={b.sql} />
+        </pre>
+      </div>
+      <div className="flex items-center gap-2 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>
+      </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>
+                ))}
+              </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>
+      </div>
+    </div>
+  )
+
+  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>
+      </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>
+        <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>
+        <div className="ml-auto text-[10px] text-gray-500">
+          System prompt updated with<br />targeted repair rules
+        </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>
+        <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>
+      </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',
+                }}
+              />
+            </div>
+            <span className={`text-[10px] font-bold tabular-nums ${i === gen ? 'text-green-400' : 'text-gray-600'}`}>
+              {(s * 100).toFixed(0)}%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Main DemoMode Component ──────────────────────────────────────────────────
+
+interface DemoModeProps {
+  onClose: () => void
+}
+
+export function DemoMode({ onClose }: DemoModeProps) {
+  const [bubbles, setBubbles] = useState<BubbleData[]>([])
+  const [appState, setAppState] = useState<AppState>('idle')
+  const [gen, setGen] = useState(0)
+  const [score, setScore] = useState(SCORES[0])
+  const cancel = useRef(false)
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  const push = useCallback((b: BubbleData) => {
+    setBubbles((prev) => [...prev, b])
+  }, [])
+
+  const replaceLast = useCallback((b: BubbleData) => {
+    setBubbles((prev) => [...prev.slice(0, -1), b])
+  }, [])
+
+  const scrollDown = useCallback(() => {
+    setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50)
+  }, [])
+
+  // 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)
+    }
+    scrollDown()
+    await sleep(350)
+  }, [push, scrollDown])
+
+  // Stream SQL line by line
+  const streamSQL = useCallback(async (sql: string, attempt: number) => {
+    const id = uid()
+    push({ id, type: 'sql_stream', sql: '', attempt })
+    let built = ''
+    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)
+    }
+    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])
+
+  // 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)
+      if (cancel.current) return children
+      setBubbles((prev) => prev.filter((b) => b.id !== thinkId))
+
+      await streamSQL(att.sql, attemptNum)
+      if (cancel.current) return children
+
+      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)
+      } 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)
+      }
+    }
+
+    return children
+  }, [push, scrollDown, typeUser, streamSQL])
+
+  // 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
+    setBubbles((prev) => {
+      // Find user bubble for this 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,
+      }
+      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) {
+      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 }]
+      })
+      scrollDown()
+      await sleep(1100)
+    }
+    // Remove thinking
+    setBubbles((prev) => prev.filter((b) => b.id !== thinkId))
+
+    // Animate score
+    const from = SCORES[fromGen]
+    const to = SCORES[toGen]
+    for (let i = 0; i <= 40; i++) {
+      if (cancel.current) return
+      setScore(from + (to - from) * (i / 40))
+      await sleep(20)
+    }
+    setGen(toGen)
+
+    // Push GEPA bubble
+    push({ id: uid(), type: 'gepa', fromGen, toGen, scoreFrom: from, scoreTo: to })
+    scrollDown()
+    await sleep(1000)
+    setAppState('running')
+  }, [push, replaceLast, scrollDown])
+
+  const autoPlay = useCallback(async () => {
+    cancel.current = false
+    setBubbles([])
+    setGen(0)
+    setScore(SCORES[0])
+    setAppState('running')
+    await sleep(400)
+
+    // Round 1
+    for (const id of ROUND_1) {
+      if (cancel.current) break
+      const def = QUERIES[id]
+      const children = await playQuery(def)
+      if (cancel.current) break
+      await sleep(400)
+      collapseQuery(def, children)
+      await sleep(700)
+    }
+
+    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)
+      if (cancel.current) break
+      await sleep(400)
+      collapseQuery(def, children)
+      await sleep(700)
+    }
+
+    if (!cancel.current) {
+      await playGepa(1, 2)
+      setAppState('done')
+    }
+  }, [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)
+  }
+
+  useEffect(() => {
+    return () => { cancel.current = true }
+  }, [])
+
+  return (
+    <motion.div
+      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)' }}
+      >
+        <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>
+          </div>
+          <span className="text-xs text-gray-500 hidden sm:block">
+            Watching SQL Agent learn through RL repair loop + GEPA prompt evolution
+          </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>
+      </div>
+
+      {/* Body */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Chat column */}
+        <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>
+                <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.
+                  </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>
+                      {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"
+                  style={{ background: 'linear-gradient(135deg,#7c3aed,#2563eb)', boxShadow: '0 8px 24px rgba(124,58,237,0.4)' }}
+                >
+                  <Play size={14} fill="currentColor" />
+                  Start Demo
+                </button>
+              </div>
+            ) : (
+              <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 }}
+                    >
+                      <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
+                    </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} />
+              </div>
+            )}
+          </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} />
+        </aside>
+      </div>
+    </motion.div>
+  )
+}

frontend/src/components/Header.tsx

@@ -1,10 +1,11 @@
-import { Database, Sun, Moon, PanelLeftOpen, PanelRightOpen, Cpu } from 'lucide-react'
+import { Database, Sun, Moon, PanelLeftOpen, PanelRightOpen, Cpu, Play } from 'lucide-react'
 import { useStore } from '../store/useStore'
 import type { Difficulty } from '../lib/types'
 
 interface HeaderProps {
   onToggleLeft: () => void
   onToggleRight: () => void
+  onDemo: () => void
 }
 
 const DIFFICULTIES: { id: Difficulty; label: string; color: string }[] = [
@@ -13,7 +14,7 @@ const DIFFICULTIES: { id: Difficulty; label: string; color: string }[] = [
   { id: 'hard', label: 'Hard', color: 'text-red-400 border-red-500/30 bg-red-500/10' },
 ]
 
-export function Header({ onToggleLeft, onToggleRight }: HeaderProps) {
+export function Header({ onToggleLeft, onToggleRight, onDemo }: HeaderProps) {
   const { theme, toggleTheme, dbSeeded, taskDifficulty, setTaskDifficulty } = useStore()
 
   return (
@@ -87,6 +88,16 @@ export function Header({ onToggleLeft, onToggleRight }: HeaderProps) {
           ))}
         </div>
 
+        {/* Demo button */}
+        <button
+          onClick={onDemo}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold text-white transition-all active:scale-95"
+          style={{ background: 'linear-gradient(135deg,#7c3aed,#2563eb)', boxShadow: '0 4px 12px rgba(124,58,237,0.35)' }}
+        >
+          <Play size={10} fill="currentColor" />
+          <span>Demo</span>
+        </button>
+
         {/* Theme toggle */}
         <button
           onClick={toggleTheme}