simulator jsx from claude

rl_simulator.jsx

@@ -0,0 +1,826 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, AreaChart, Area, BarChart, Bar, Legend } from "recharts";
+
+// ─── DESIGN TOKENS ────────────────────────────────────────────────────────────
+const C = {
+  bg:       "#07090f",
+  panel:    "#0d1117",
+  border:   "#161d2a",
+  border2:  "#1e2d40",
+  text:     "#c9d5e0",
+  muted:    "#3a5060",
+  dim:      "#1a2535",
+  green:    "#34d399",
+  blue:     "#38bdf8",
+  amber:    "#fbbf24",
+  red:      "#f87171",
+  purple:   "#a78bfa",
+  teal:     "#2dd4bf",
+};
+
+// ─── CONFIG (mirrors config.py exactly) ───────────────────────────────────────
+const CFG = {
+  LEAD_TIME:           3,
+  BASE_STOCK:          0,
+  DEFAULT_SL:          0.95,
+  WRITE_OFF_RATE:      0.01,
+  WRITE_OFF_FREQ:      7,
+  HISTO_DAYS:          30,
+  SIM_DAYS:            120,
+};
+
+// ─── MATH HELPERS ─────────────────────────────────────────────────────────────
+function normalRandom() {
+  let u=0,v=0; while(!u)u=Math.random(); while(!v)v=Math.random();
+  return Math.sqrt(-2*Math.log(u))*Math.cos(2*Math.PI*v);
+}
+function gammaRandom(shape,scale){
+  if(shape<1)return gammaRandom(1+shape,scale)*Math.pow(Math.random(),1/shape);
+  const d=shape-1/3,c=1/Math.sqrt(9*d);
+  while(true){let x,v;do{x=normalRandom();v=1+c*x;}while(v<=0);v=v*v*v;const u=Math.random();
+    if(u<1-0.0331*x*x*x*x)return d*v*scale;
+    if(Math.log(u)<0.5*x*x+d*(1-v+Math.log(v)))return d*v*scale;}
+}
+function poissonRandom(lambda){let L=Math.exp(-lambda),k=0,p=1;do{k++;p*=Math.random();}while(p>L);return k-1;}
+function expRandom(rate){return-Math.log(Math.random())/rate;}
+function arr_mean(a){return a.length?a.reduce((s,x)=>s+x,0)/a.length:0;}
+function arr_std(a){if(a.length<2)return 0;const m=arr_mean(a);return Math.sqrt(a.reduce((s,x)=>s+(x-m)**2,0)/(a.length-1));}
+function quantile(sorted,q){return sorted[Math.floor(sorted.length*q)];}
+
+// ─── DEMAND ENVIRONMENTS (mirrors demand_environment.py) ──────────────────────
+const ENVS = {
+  gamma_poisson:{
+    label:"Gamma–Poisson",tag:"MODERATE",color:C.green,
+    desc:"90% Gamma(7,16) + 10% Poisson(80). Stable with rare spikes.",
+    sample:()=>Math.random()<0.9?Math.max(0,Math.round(gammaRandom(7,16))):poissonRandom(80),
+    demMean:112,demStd:38,
+  },
+  bimodal_hv:{
+    label:"Bimodal High-Var",tag:"HARD",color:C.amber,
+    desc:"50% Gamma(low mean) + 50% Gamma(high mean). Extremely unpredictable.",
+    sample:()=>Math.random()<0.5?Math.max(0,Math.round(gammaRandom(7,3))):Math.max(0,Math.round(gammaRandom(7,29))),
+    demMean:112,demStd:95,
+  },
+  spiking:{
+    label:"Sporadic Spiking",tag:"EXTREME",color:C.red,
+    desc:"95% zero demand, 5% large Exponential bursts. Hardest to plan.",
+    sample:()=>Math.random()<0.95?0:Math.max(0,Math.round(expRandom(0.05))),
+    demMean:20,demStd:55,
+  },
+  gamma_stable:{
+    label:"Stable Gamma",tag:"EASY",color:C.blue,
+    desc:"Single Gamma(7,16), low variance. Baseline environment.",
+    sample:()=>Math.max(0,Math.round(gammaRandom(7,16))),
+    demMean:112,demStd:35,
+  },
+};
+
+// ─── BASELINE AGENTS (mirrors agent_environment.py) ───────────────────────────
+const BASELINES = {
+  base:{
+    label:"Base",color:C.muted,
+    compute:(hist)=>arr_mean(hist)*CFG.LEAD_TIME,
+  },
+  safety_stock:{
+    label:"Safety Stock",color:C.blue,
+    compute:(hist)=>{
+      const m=arr_mean(hist),s=arr_std(hist);
+      return m*CFG.LEAD_TIME+1.645*s*Math.sqrt(CFG.LEAD_TIME);
+    },
+  },
+  forecast:{
+    label:"Oracle Forecast",color:C.green,
+    compute:(hist,dMean,dStd)=>dMean*CFG.LEAD_TIME+1.645*dStd*Math.sqrt(CFG.LEAD_TIME),
+  },
+  monte_carlo:{
+    label:"Monte Carlo",color:C.purple,
+    compute:(hist)=>{
+      const s=[];
+      for(let i=0;i<500;i++){
+        let t=0;for(let j=0;j<CFG.LEAD_TIME;j++)t+=hist[Math.floor(Math.random()*hist.length)]*(0.8+Math.random()*0.4);
+        s.push(t);
+      }
+      s.sort((a,b)=>a-b);return quantile(s,0.95);
+    },
+  },
+};
+
+// ─── SIMULATION ENGINE ────────────────────────────────────────────────────────
+function buildDemandSeries(envKey, n){
+  return Array.from({length:n},()=>ENVS[envKey].sample());
+}
+
+function runOneSimulation(computeROP, demandSeries, envKey){
+  const env=ENVS[envKey];
+  const n=demandSeries.length;
+  let inventory=0;
+  const orders=[];
+  let totDemand=0,totFulfilled=0,totWriteOff=0,stockOuts=0,lostSales=0;
+  const timeline=[];
+
+  for(let day=0;day<n;day++){
+    const demand=demandSeries[day];
+    const hist=demandSeries.slice(Math.max(0,day-CFG.HISTO_DAYS),day);
+
+    // Deliver orders
+    const arrivals=orders.filter(o=>o.arr===day);
+    const delivered=arrivals.reduce((s,o)=>s+o.qty,0);
+    inventory+=delivered;
+    orders.splice(0,orders.length,...orders.filter(o=>o.arr>day));
+
+    const preInv=inventory;
+
+    // Fulfill demand
+    const fulfilled=Math.min(demand,inventory);
+    inventory=Math.max(0,inventory-demand);
+    const lost=Math.max(0,demand-fulfilled);
+    if(lost>0)stockOuts++;
+    lostSales+=lost;
+
+    // Reorder
+    let rop=0,ordered=0;
+    if(hist.length>=5&&day<n-CFG.LEAD_TIME){
+      rop=Math.max(0,computeROP(hist,env.demMean,env.demStd));
+      if(inventory<=rop){
+        const qty=Math.ceil(rop-inventory+arr_mean(hist)*CFG.LEAD_TIME);
+        orders.push({arr:day+CFG.LEAD_TIME,qty});
+        ordered=qty;
+      }
+    }
+
+    // Write-off
+    let wo=0;
+    if(day%CFG.WRITE_OFF_FREQ===0){wo=Math.floor(inventory*CFG.WRITE_OFF_RATE);inventory-=wo;totWriteOff+=wo;}
+
+    totDemand+=demand;totFulfilled+=fulfilled;
+    const fillRateCum=totDemand>0?totFulfilled/totDemand:0;
+    timeline.push({day,demand,inventory:preInv,inventoryAfter:inventory,fulfilled,lost,rop:Math.round(rop),ordered,wo,delivered,fillRateCum});
+  }
+  return{timeline,metrics:{fillRate:totDemand>0?totFulfilled/totDemand:0,stockOuts,lostSales,totWriteOff,totDemand,totFulfilled}};
+}
+
+// ─── BUILD ENVIRONMENT SNAPSHOT FOR LLM ───────────────────────────────────────
+function buildEnvSnapshot(demandSeries, timeline, day){
+  const recent=demandSeries.slice(Math.max(0,day-10),day);
+  const hist=demandSeries.slice(Math.max(0,day-CFG.HISTO_DAYS),day);
+  const last5=timeline.slice(Math.max(0,day-5),day);
+  const curInv=timeline[day-1]?.inventoryAfter??0;
+  const pendingOrders=[];
+  // Reconstruct pending from timeline (simplified)
+  const fillSoFar=timeline[day-1]?.fillRateCum??null;
+
+  return {
+    day,
+    current_inventory: curInv,
+    lead_time: CFG.LEAD_TIME,
+    write_off_rate: CFG.WRITE_OFF_RATE,
+    service_level_target: CFG.DEFAULT_SL,
+    sim_days_total: CFG.SIM_DAYS,
+    days_remaining: CFG.SIM_DAYS-day,
+    recent_demand_10d: recent,
+    demand_mean_30d: Math.round(arr_mean(hist)*10)/10,
+    demand_std_30d:  Math.round(arr_std(hist)*10)/10,
+    fill_rate_so_far: fillSoFar ? Math.round(fillSoFar*1000)/10+"%" : "N/A",
+    last_5_days: last5.map(d=>({day:d.day,demand:d.demand,inv:d.inventoryAfter,lost:d.lost,rop:d.rop,ordered:d.ordered})),
+    recent_stockouts: last5.filter(d=>d.lost>0).length,
+    recent_lost_sales: last5.reduce((s,d)=>s+d.lost,0),
+  };
+}
+
+// ─── LLM CALL ─────────────────────────────────────────────────────────────────
+async function callClaude(messages, systemPrompt){
+  const resp=await fetch("https://api.anthropic.com/v1/messages",{
+    method:"POST",
+    headers:{"Content-Type":"application/json"},
+    body:JSON.stringify({
+      model:"claude-sonnet-4-20250514",
+      max_tokens:1000,
+      system:systemPrompt,
+      messages,
+    }),
+  });
+  const data=await resp.json();
+  const text=data.content?.find(b=>b.type==="text")?.text||"";
+  return text;
+}
+
+// ─── SYSTEM PROMPT ────────────────────────────────────────────────────────────
+const SYSTEM_PROMPT = `You are an expert inventory optimization agent embedded in a stochastic simulation environment.
+
+YOUR ROLE:
+You receive a JSON snapshot of the current simulation state and must decide the REORDER POINT (ROP) — the inventory threshold that triggers a new order.
+
+ENVIRONMENT RULES:
+- Orders arrive exactly LEAD_TIME=3 days after placement
+- You place an order whenever inventory <= your ROP
+- Order quantity = ROP - current_inventory + mean_demand * LEAD_TIME (already handled)
+- Every 7 days, 1% of inventory is written off (waste/expiry)
+- Reward = fill_rate at end of simulation (target: >=95%)
+- Reward is SPARSE: fill rate only stabilizes after ~50 days
+
+REASONING REQUIREMENTS - you MUST do all 4:
+1. SUBGOAL DECOMPOSITION: Break the problem into explicit subgoals (e.g., "build buffer", "survive spike risk", "minimize waste")
+2. STATE ANALYSIS: Interpret current inventory, demand trend, stockout risk, fill rate trajectory
+3. DECISION: Output a specific numeric ROP with clear justification
+4. RECOVERY PLAN: If fill rate < 95% or recent stockouts occurred, state your recovery strategy
+
+CRITICAL: You must reason BEYOND the next step. Consider that your ROP today affects inventory 3+ days from now.
+For spiking demand: ROP must account for rare but catastrophic spikes.
+For high-variance: wider safety buffers needed.
+For stable demand: tighter ROP to avoid write-offs.
+
+OUTPUT FORMAT — respond with this exact JSON (no markdown fences):
+{
+  "subgoals": ["subgoal 1", "subgoal 2", "subgoal 3"],
+  "state_analysis": "2-3 sentence analysis of current state and risks",
+  "recovery_plan": "what you're doing to recover or maintain performance",
+  "reorder_point": <number>,
+  "confidence": "high|medium|low",
+  "reasoning_depth": "brief note on what makes this decision non-trivial"
+}`;
+
+// ─── MAIN COMPONENT ───────────────────────────────────────────────────────────
+export default function StockOracleAgent() {
+  const [envKey, setEnvKey]           = useState("gamma_poisson");
+  const [phase, setPhase]             = useState("config"); // config | running | done
+  const [agentLog, setAgentLog]       = useState([]);       // [{day, snapshot, decision, rop}]
+  const [simTimeline, setSimTimeline] = useState([]);
+  const [baselineResults, setBaselineResults] = useState({});
+  const [agentMetrics, setAgentMetrics]       = useState(null);
+  const [runningDay, setRunningDay]   = useState(0);
+  const [statusMsg, setStatusMsg]     = useState("");
+  const [memoryBank, setMemoryBank]   = useState([]);       // persistent cross-turn memory
+  const [conversationHistory, setConversationHistory] = useState([]);
+  const [activeTab, setActiveTab]     = useState("live");   // live | reasoning | compare | memory
+  const abortRef = useRef(false);
+  const logEndRef = useRef(null);
+
+  useEffect(()=>{if(logEndRef.current)logEndRef.current.scrollIntoView({behavior:"smooth"});},[agentLog]);
+
+  // ── Run baselines (instant, no API) ──
+  const runBaselines = useCallback((demandSeries) => {
+    const results = {};
+    Object.entries(BASELINES).forEach(([k,ag])=>{
+      results[k]=runOneSimulation((h,dm,ds)=>ag.compute(h,dm,ds), demandSeries, envKey);
+    });
+    setBaselineResults(results);
+    return results;
+  },[envKey]);
+
+  // ── Build persistent memory summary ──
+  function updateMemory(prevMemory, decision, day, metrics){
+    const entry = {
+      day,
+      rop: decision.reorder_point,
+      confidence: decision.confidence,
+      fill_rate: metrics?.fillRate ? Math.round(metrics.fillRate*1000)/10 : null,
+      stockouts_in_window: metrics?.stockOuts??0,
+      key_insight: decision.state_analysis?.slice(0,80)+"...",
+    };
+    // Keep last 15 memory entries as compressed state
+    const newMem = [...prevMemory.slice(-14), entry];
+    return newMem;
+  }
+
+  // ── Main simulation loop ──
+  const runAgentSimulation = useCallback(async () => {
+    abortRef.current = false;
+    setPhase("running");
+    setAgentLog([]);
+    setSimTimeline([]);
+    setAgentMetrics(null);
+    setMemoryBank([]);
+    setConversationHistory([]);
+    setRunningDay(0);
+
+    const demandSeries = buildDemandSeries(envKey, CFG.SIM_DAYS);
+
+    // Run baselines in background
+    setStatusMsg("Computing baseline agents...");
+    runBaselines(demandSeries);
+
+    // Agent-driven simulation
+    // We step through the sim, calling Claude every DECISION_INTERVAL days
+    const DECISION_INTERVAL = 5; // Claude decides ROP every 5 days
+    let inventory = 0;
+    const orders = [];
+    let totDemand=0, totFulfilled=0, totWriteOff=0, stockOuts=0, lostSales=0;
+    const timeline = [];
+    let currentROP = arr_mean(demandSeries.slice(0,CFG.HISTO_DAYS)) * CFG.LEAD_TIME; // initial ROP
+    let localMemory = [];
+    let localConvo = [];
+    let localLog = [];
+
+    for(let day=0; day<CFG.SIM_DAYS; day++){
+      if(abortRef.current) break;
+
+      const demand = demandSeries[day];
+      const hist   = demandSeries.slice(Math.max(0,day-CFG.HISTO_DAYS), day);
+
+      // Deliver orders
+      const arrivals = orders.filter(o=>o.arr===day);
+      const delivered = arrivals.reduce((s,o)=>s+o.qty,0);
+      inventory += delivered;
+      orders.splice(0,orders.length,...orders.filter(o=>o.arr>day));
+
+      const preInv = inventory;
+
+      // Fulfill demand
+      const fulfilled = Math.min(demand, inventory);
+      inventory = Math.max(0, inventory-demand);
+      const lost = Math.max(0, demand-fulfilled);
+      if(lost>0) stockOuts++;
+      lostSales += lost;
+
+      // Reorder check using current ROP
+      let ordered=0;
+      if(hist.length>=5 && day<CFG.SIM_DAYS-CFG.LEAD_TIME){
+        if(inventory<=currentROP){
+          const qty=Math.ceil(currentROP-inventory+arr_mean(hist)*CFG.LEAD_TIME);
+          orders.push({arr:day+CFG.LEAD_TIME,qty});
+          ordered=qty;
+        }
+      }
+
+      // Write-off
+      let wo=0;
+      if(day%CFG.WRITE_OFF_FREQ===0){wo=Math.floor(inventory*CFG.WRITE_OFF_RATE);inventory-=wo;totWriteOff+=wo;}
+
+      totDemand+=demand; totFulfilled+=fulfilled;
+      const fillRateCum = totDemand>0?totFulfilled/totDemand:0;
+      const tEntry = {day,demand,inventory:preInv,inventoryAfter:inventory,fulfilled,lost,rop:Math.round(currentROP),ordered,wo,delivered,fillRateCum};
+      timeline.push(tEntry);
+
+      setSimTimeline([...timeline]);
+      setRunningDay(day);
+
+      // ── LLM Decision every DECISION_INTERVAL days ──
+      if(day>=CFG.HISTO_DAYS && day%DECISION_INTERVAL===0 && day<CFG.SIM_DAYS-CFG.LEAD_TIME){
+        setStatusMsg(`Day ${day}: Agent reasoning...`);
+
+        const snapshot = buildEnvSnapshot(demandSeries, timeline, day);
+
+        // Build memory context
+        const memoryContext = localMemory.length>0
+          ? `\nYOUR MEMORY FROM PREVIOUS DECISIONS:\n${JSON.stringify(localMemory.slice(-8),null,2)}`
+          : "";
+
+        const userMsg = {
+          role:"user",
+          content: `ENVIRONMENT SNAPSHOT — Day ${day}/${CFG.SIM_DAYS}\n${JSON.stringify(snapshot,null,2)}${memoryContext}\n\nDecide your reorder_point for the next ${DECISION_INTERVAL} days.`
+        };
+
+        // Maintain rolling conversation (last 6 turns to stay in context)
+        const trimmedConvo = localConvo.slice(-6);
+        const fullMessages = [...trimmedConvo, userMsg];
+
+        try {
+          const rawResp = await callClaude(fullMessages, SYSTEM_PROMPT);
+          let decision;
+          try {
+            const cleaned = rawResp.replace(/```json|```/g,"").trim();
+            decision = JSON.parse(cleaned);
+          } catch {
+            // Fallback: extract reorder_point with regex
+            const match = rawResp.match(/"reorder_point"\s*:\s*(\d+\.?\d*)/);
+            decision = {
+              subgoals:["parse error — fallback"],
+              state_analysis: rawResp.slice(0,200),
+              recovery_plan:"N/A",
+              reorder_point: match ? parseFloat(match[1]) : currentROP,
+              confidence:"low",
+              reasoning_depth:"parse failed",
+            };
+          }
+
+          currentROP = Math.max(0, decision.reorder_point||currentROP);
+
+          // Update conversation history
+          const assistantMsg = {role:"assistant", content:rawResp};
+          localConvo = [...localConvo, userMsg, assistantMsg];
+          setConversationHistory([...localConvo]);
+
+          // Update memory bank
+          localMemory = updateMemory(localMemory, decision, day, {fillRate:fillRateCum, stockOuts});
+          setMemoryBank([...localMemory]);
+
+          // Add to agent log
+          const logEntry = {day, snapshot, decision, rop:currentROP, fillRateCum};
+          localLog = [...localLog, logEntry];
+          setAgentLog([...localLog]);
+
+        } catch(e) {
+          setStatusMsg(`Day ${day}: API error — ${e.message}`);
+        }
+
+        // Small pause to not slam API
+        await new Promise(r=>setTimeout(r,200));
+      }
+    }
+
+    // Final metrics
+    const finalMetrics = {
+      fillRate:totDemand>0?totFulfilled/totDemand:0,
+      stockOuts, lostSales, totWriteOff, totDemand, totFulfilled
+    };
+    setAgentMetrics(finalMetrics);
+    setSimTimeline([...timeline]);
+    setPhase("done");
+    setStatusMsg("Simulation complete.");
+    setActiveTab("compare");
+  }, [envKey, runBaselines]);
+
+  const stopSim = () => { abortRef.current=true; setStatusMsg("Stopped by user."); setPhase("done"); };
+
+  // ── Render helpers ──
+  const env = ENVS[envKey];
+  const latestLog = agentLog[agentLog.length-1];
+
+  function FillBadge({rate}){
+    const c=rate>=0.95?C.green:rate>=0.85?C.amber:C.red;
+    return <span style={{color:c,fontWeight:700}}>{rate?(rate*100).toFixed(1)+"%":"—"}</span>;
+  }
+
+  function Panel({title,children,style={}}){
+    return(
+      <div style={{background:C.panel,border:`1px solid ${C.border}`,borderRadius:10,padding:"16px 18px",...style}}>
+        {title&&<div style={{fontSize:9,letterSpacing:4,color:C.muted,marginBottom:12,textTransform:"uppercase"}}>{title}</div>}
+        {children}
+      </div>
+    );
+  }
+
+  function Tab({id,label}){
+    const active=activeTab===id;
+    return(
+      <button onClick={()=>setActiveTab(id)} style={{
+        background:active?C.border2:"transparent",
+        border:`1px solid ${active?C.border2:"transparent"}`,
+        borderRadius:6,padding:"7px 14px",
+        color:active?C.text:C.muted,fontFamily:"inherit",
+        fontSize:11,cursor:"pointer",letterSpacing:1,transition:"all 0.15s",
+      }}>{label}</button>
+    );
+  }
+
+  const agentTimelineFillRates = simTimeline.map(t=>({day:t.day,agent:t.fillRateCum}));
+
+  return(
+    <div style={{minHeight:"100vh",background:C.bg,fontFamily:"'JetBrains Mono',monospace",color:C.text,padding:"24px 16px"}}>
+      <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Clash+Display:wght@600;700&display=swap" rel="stylesheet"/>
+
+      {/* ── HEADER ── */}
+      <div style={{maxWidth:1200,margin:"0 auto"}}>
+        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:28,flexWrap:"wrap",gap:12}}>
+          <div>
+            <div style={{fontSize:9,letterSpacing:5,color:C.muted,marginBottom:6}}>HACKATHON · LONG-HORIZON REASONING ENVIRONMENT</div>
+            <h1 style={{margin:0,fontSize:"clamp(32px,5vw,52px)",fontWeight:700,letterSpacing:-1,
+              background:`linear-gradient(120deg,${C.teal},${C.blue},${C.purple})`,
+              WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",lineHeight:1.1,
+              fontFamily:"'JetBrains Mono',monospace",
+            }}>STOCK ORACLE</h1>
+            <div style={{fontSize:10,color:C.muted,marginTop:5,letterSpacing:2}}>
+              LLM AGENT · INVENTORY OPTIMIZATION · SPARSE REWARD · MULTI-STEP PLANNING
+            </div>
+          </div>
+          {phase==="done"&&agentMetrics&&(
+            <div style={{display:"flex",gap:10,flexWrap:"wrap"}}>
+              {[
+                {label:"AGENT FILL RATE",val:<FillBadge rate={agentMetrics.fillRate}/>,highlight:true},
+                {label:"STOCKOUTS",val:agentMetrics.stockOuts},
+                {label:"LOST SALES",val:agentMetrics.lostSales.toLocaleString()},
+                {label:"LLM DECISIONS",val:agentLog.length},
+              ].map(({label,val,highlight})=>(
+                <div key={label} style={{background:highlight?"#0d1f18":C.panel,border:`1px solid ${highlight?C.green+"30":C.border}`,borderRadius:8,padding:"10px 16px",textAlign:"center"}}>
+                  <div style={{fontSize:9,letterSpacing:3,color:C.muted,marginBottom:3}}>{label}</div>
+                  <div style={{fontSize:22,fontWeight:600,letterSpacing:1}}>{val}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* ── CONFIG ── */}
+        {phase==="config"&&(
+          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,marginBottom:20,maxWidth:800}}>
+            <Panel title="Demand Environment">
+              {Object.entries(ENVS).map(([k,e])=>(
+                <button key={k} onClick={()=>setEnvKey(k)} style={{
+                  display:"block",width:"100%",textAlign:"left",
+                  background:envKey===k?"#0f1e2e":"transparent",
+                  border:`1px solid ${envKey===k?e.color+"50":C.border}`,
+                  borderRadius:6,padding:"10px 12px",marginBottom:6,cursor:"pointer",fontFamily:"inherit",
+                  transition:"all 0.15s",
+                }}>
+                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
+                    <span style={{fontSize:12,color:envKey===k?e.color:C.muted,fontWeight:500}}>{e.label}</span>
+                    <span style={{fontSize:9,color:e.color,border:`1px solid ${e.color}40`,borderRadius:3,padding:"2px 6px"}}>{e.tag}</span>
+                  </div>
+                  <div style={{fontSize:10,color:C.dim,marginTop:4,lineHeight:1.5}}>{e.desc}</div>
+                </button>
+              ))}
+            </Panel>
+            <Panel title="About This Environment">
+              <div style={{fontSize:11,color:C.muted,lineHeight:1.8}}>
+                {[
+                  ["Sparse Reward","Fill rate only converges after 50+ days. No reward signal per individual decision."],
+                  ["Multi-Step Planning","Each ROP decision affects inventory 3 days forward (lead time). Cascading errors are common."],
+                  ["State Tracking","Agent maintains memory across 120 days: inventory levels, order pipeline, demand patterns."],
+                  ["Error Recovery","Post-stockout, agent must over-order to rebuild buffer without triggering write-off waste."],
+                  ["Extended Horizon","120 decisions × 5-day intervals. LLM conversation history managed via rolling window + memory bank."],
+                ].map(([t,d])=>(
+                  <div key={t} style={{marginBottom:10}}>
+                    <span style={{color:C.teal,fontWeight:600}}>{t}: </span>
+                    <span style={{color:C.muted}}>{d}</span>
+                  </div>
+                ))}
+              </div>
+              <button onClick={runAgentSimulation} style={{
+                width:"100%",marginTop:16,
+                background:"#0d1f18",border:`1px solid ${C.green}60`,
+                borderRadius:7,padding:"14px",color:C.green,
+                fontFamily:"inherit",fontSize:13,cursor:"pointer",
+                letterSpacing:2,fontWeight:600,transition:"all 0.2s",
+              }}>
+                ▶ LAUNCH AGENT SIMULATION
+              </button>
+            </Panel>
+          </div>
+        )}
+
+        {/* ── RUNNING / DONE ── */}
+        {(phase==="running"||phase==="done")&&(
+          <>
+            {/* Status bar */}
+            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16,flexWrap:"wrap",gap:8}}>
+              <div style={{display:"flex",gap:8,alignItems:"center",fontSize:11}}>
+                {phase==="running"&&<span style={{color:C.amber,animation:"pulse 1s infinite"}}
+                  >●</span>}
+                <span style={{color:C.muted}}>{statusMsg}</span>
+                {phase==="running"&&(
+                  <div style={{width:200,height:4,background:C.border,borderRadius:2,overflow:"hidden"}}>
+                    <div style={{height:"100%",width:`${(runningDay/CFG.SIM_DAYS)*100}%`,background:C.teal,transition:"width 0.3s",borderRadius:2}}/>
+                  </div>
+                )}
+              </div>
+              <div style={{display:"flex",gap:8}}>
+                {phase==="running"&&<button onClick={stopSim} style={{background:"#2a0f0f",border:`1px solid ${C.red}40`,borderRadius:6,padding:"6px 14px",color:C.red,fontFamily:"inherit",fontSize:11,cursor:"pointer"}}>■ STOP</button>}
+                <button onClick={()=>{setPhase("config");setAgentLog([]);setSimTimeline([]);setBaselineResults({});setAgentMetrics(null);}} style={{background:C.panel,border:`1px solid ${C.border}`,borderRadius:6,padding:"6px 14px",color:C.muted,fontFamily:"inherit",fontSize:11,cursor:"pointer"}}>↺ RESET</button>
+              </div>
+            </div>
+
+            {/* Tabs */}
+            <div style={{display:"flex",gap:6,marginBottom:14,flexWrap:"wrap"}}>
+              <Tab id="live"      label="LIVE SIM"/>
+              <Tab id="reasoning" label={`AGENT REASONING (${agentLog.length})`}/>
+              <Tab id="compare"   label="COMPARE AGENTS"/>
+              <Tab id="memory"    label={`MEMORY BANK (${memoryBank.length})`}/>
+            </div>
+
+            {/* ── TAB: LIVE SIM ── */}
+            {activeTab==="live"&&(
+              <div style={{display:"flex",flexDirection:"column",gap:14}}>
+                <Panel title="Inventory · Demand · Reorder Point">
+                  <ResponsiveContainer width="100%" height={200}>
+                    <AreaChart data={simTimeline} margin={{top:4,right:4,bottom:0,left:0}}>
+                      <defs>
+                        <linearGradient id="ig" x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="5%" stopColor={C.blue} stopOpacity={0.25}/>
+                          <stop offset="95%" stopColor={C.blue} stopOpacity={0}/>
+                        </linearGradient>
+                      </defs>
+                      <XAxis dataKey="day" tick={{fontSize:9,fill:C.muted}}/>
+                      <YAxis tick={{fontSize:9,fill:C.muted}} width={45}/>
+                      <Tooltip contentStyle={{background:"#0a0f18",border:`1px solid ${C.border2}`,fontSize:10,borderRadius:6}} labelFormatter={d=>`Day ${d}`}/>
+                      <Area type="monotone" dataKey="inventory" stroke={C.blue} strokeWidth={1.5} fill="url(#ig)" dot={false} name="Inventory"/>
+                      <Line type="monotone" dataKey="demand" stroke={C.red} strokeWidth={1} dot={false} name="Demand"/>
+                      <Line type="monotone" dataKey="rop" stroke={C.amber} strokeWidth={1} strokeDasharray="5 3" dot={false} name="Agent ROP"/>
+                    </AreaChart>
+                  </ResponsiveContainer>
+                </Panel>
+                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
+                  <Panel title="Cumulative Fill Rate">
+                    <ResponsiveContainer width="100%" height={130}>
+                      <LineChart data={simTimeline} margin={{top:4,right:4,bottom:0,left:0}}>
+                        <XAxis dataKey="day" tick={{fontSize:9,fill:C.muted}}/>
+                        <YAxis domain={[0,1]} tickFormatter={v=>`${(v*100).toFixed(0)}%`} tick={{fontSize:9,fill:C.muted}} width={38}/>
+                        <ReferenceLine y={0.95} stroke={C.amber} strokeDasharray="4 3"/>
+                        <Tooltip contentStyle={{background:"#0a0f18",border:`1px solid ${C.border2}`,fontSize:10}} formatter={v=>`${(v*100).toFixed(1)}%`}/>
+                        <Line type="monotone" dataKey="fillRateCum" stroke={C.teal} strokeWidth={2} dot={false} name="Fill Rate"/>
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </Panel>
+                  <Panel title="Lost Sales Per Day">
+                    <ResponsiveContainer width="100%" height={130}>
+                      <BarChart data={simTimeline} barSize={2} margin={{top:4,right:4,bottom:0,left:0}}>
+                        <XAxis dataKey="day" tick={{fontSize:9,fill:C.muted}}/>
+                        <YAxis tick={{fontSize:9,fill:C.muted}} width={38}/>
+                        <Tooltip contentStyle={{background:"#0a0f18",border:`1px solid ${C.border2}`,fontSize:10}}/>
+                        <Bar dataKey="lost" fill={C.red} opacity={0.8} name="Lost Sales"/>
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </Panel>
+                </div>
+              </div>
+            )}
+
+            {/* ── TAB: AGENT REASONING ── */}
+            {activeTab==="reasoning"&&(
+              <div style={{display:"flex",flexDirection:"column",gap:10,maxHeight:"72vh",overflowY:"auto",paddingRight:4}}>
+                {agentLog.length===0&&<div style={{color:C.muted,fontSize:12,padding:20,textAlign:"center"}}>Waiting for first LLM decision (after day {CFG.HISTO_DAYS})...</div>}
+                {agentLog.map((entry,i)=>{
+                  const d=entry.decision;
+                  const isLatest=i===agentLog.length-1;
+                  return(
+                    <div key={i} style={{
+                      background:isLatest?"#0c1a24":C.panel,
+                      border:`1px solid ${isLatest?C.teal+"40":C.border}`,
+                      borderRadius:10,padding:"14px 16px",
+                      borderLeft:`3px solid ${isLatest?C.teal:C.border2}`,
+                    }}>
+                      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10,flexWrap:"wrap",gap:6}}>
+                        <div style={{fontSize:11,color:C.teal,fontWeight:600}}>Day {entry.day} — Decision #{i+1}</div>
+                        <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
+                          <span style={{fontSize:10,color:C.muted}}>ROP: <span style={{color:C.amber,fontWeight:600}}>{Math.round(entry.rop)}</span></span>
+                          <span style={{fontSize:10,color:C.muted}}>Fill: <FillBadge rate={entry.fillRateCum}/></span>
+                          <span style={{fontSize:9,padding:"2px 7px",borderRadius:3,
+                            background:d.confidence==="high"?"#0d1f18":d.confidence==="medium"?"#1f1a0d":"#1f0d0d",
+                            color:d.confidence==="high"?C.green:d.confidence==="medium"?C.amber:C.red,
+                            border:`1px solid currentColor`,opacity:0.8,
+                          }}>{d.confidence?.toUpperCase()||"?"}</span>
+                        </div>
+                      </div>
+
+                      {/* Subgoals */}
+                      {d.subgoals?.length>0&&(
+                        <div style={{marginBottom:10}}>
+                          <div style={{fontSize:9,letterSpacing:3,color:C.muted,marginBottom:6}}>SUBGOAL DECOMPOSITION</div>
+                          <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
+                            {d.subgoals.map((sg,j)=>(
+                              <div key={j} style={{fontSize:10,background:C.dim,border:`1px solid ${C.border2}`,borderRadius:4,padding:"4px 9px",color:C.blue}}>
+                                {j+1}. {sg}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* State analysis */}
+                      <div style={{marginBottom:8}}>
+                        <div style={{fontSize:9,letterSpacing:3,color:C.muted,marginBottom:5}}>STATE ANALYSIS</div>
+                        <div style={{fontSize:11,color:C.text,lineHeight:1.7,background:C.dim,borderRadius:6,padding:"8px 10px"}}>{d.state_analysis}</div>
+                      </div>
+
+                      {/* Recovery */}
+                      {d.recovery_plan&&d.recovery_plan!=="N/A"&&(
+                        <div style={{marginBottom:8}}>
+                          <div style={{fontSize:9,letterSpacing:3,color:C.muted,marginBottom:5}}>RECOVERY PLAN</div>
+                          <div style={{fontSize:11,color:C.amber,lineHeight:1.6,background:"#1a1400",borderRadius:6,padding:"8px 10px",border:`1px solid ${C.amber}20`}}>{d.recovery_plan}</div>
+                        </div>
+                      )}
+
+                      {/* Reasoning depth */}
+                      {d.reasoning_depth&&(
+                        <div style={{fontSize:10,color:C.muted,marginTop:6}}>
+                          <span style={{color:C.purple}}>Reasoning: </span>{d.reasoning_depth}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+                <div ref={logEndRef}/>
+              </div>
+            )}
+
+            {/* ── TAB: COMPARE ── */}
+            {activeTab==="compare"&&(
+              <div style={{display:"flex",flexDirection:"column",gap:14}}>
+                {/* Scorecard */}
+                <div style={{display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:10}}>
+                  {/* Agent */}
+                  {agentMetrics&&(
+                    <div style={{background:"#0a1e18",border:`2px solid ${C.teal}40`,borderRadius:10,padding:"14px",gridColumn:"1"}}>
+                      <div style={{fontSize:9,color:C.teal,letterSpacing:3,marginBottom:8}}>🤖 LLM AGENT</div>
+                      {[["Fill Rate",<FillBadge rate={agentMetrics.fillRate}/>],["Stockouts",agentMetrics.stockOuts],["Lost Sales",agentMetrics.lostSales.toLocaleString()],["Write-Offs",agentMetrics.totWriteOff.toLocaleString()]].map(([l,v])=>(
+                        <div key={l} style={{display:"flex",justifyContent:"space-between",fontSize:11,marginBottom:5}}>
+                          <span style={{color:C.muted}}>{l}</span><span style={{fontWeight:600}}>{v}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {/* Baselines */}
+                  {Object.entries(baselineResults).map(([bk,br])=>(
+                    <div key={bk} style={{background:C.panel,border:`1px solid ${BASELINES[bk].color}30`,borderRadius:10,padding:"14px"}}>
+                      <div style={{fontSize:9,color:BASELINES[bk].color,letterSpacing:3,marginBottom:8}}>{BASELINES[bk].label.toUpperCase()}</div>
+                      {[["Fill Rate",<FillBadge rate={br.metrics.fillRate}/>],["Stockouts",br.metrics.stockOuts],["Lost Sales",br.metrics.lostSales.toLocaleString()],["Write-Offs",br.metrics.totWriteOff.toLocaleString()]].map(([l,v])=>(
+                        <div key={l} style={{display:"flex",justifyContent:"space-between",fontSize:11,marginBottom:5}}>
+                          <span style={{color:C.muted}}>{l}</span><span style={{fontWeight:600}}>{v}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Fill rate comparison chart */}
+                {Object.keys(baselineResults).length>0&&(
+                  <Panel title="Fill Rate Convergence — Agent vs All Baselines">
+                    <div style={{fontSize:10,color:C.muted,marginBottom:10}}>
+                      Dashed line = 95% target. The LLM agent ({C.teal}) must beat baselines through structured reasoning, not hard-coded rules.
+                    </div>
+                    <ResponsiveContainer width="100%" height={220}>
+                      <LineChart margin={{top:4,right:8,bottom:0,left:0}}>
+                        <XAxis dataKey="day" type="number" domain={[0,CFG.SIM_DAYS]} tick={{fontSize:9,fill:C.muted}}/>
+                        <YAxis domain={[0,1]} tickFormatter={v=>`${(v*100).toFixed(0)}%`} tick={{fontSize:9,fill:C.muted}} width={40}/>
+                        <ReferenceLine y={0.95} stroke={C.amber} strokeDasharray="5 3" label={{value:"95% target",fontSize:9,fill:C.amber}}/>
+                        <Tooltip contentStyle={{background:"#0a0f18",border:`1px solid ${C.border2}`,fontSize:10}} formatter={v=>`${(v*100).toFixed(1)}%`}/>
+                        <Legend wrapperStyle={{fontSize:10}}/>
+                        {/* Agent line */}
+                        <Line data={agentTimelineFillRates} type="monotone" dataKey="agent" stroke={C.teal} strokeWidth={2.5} dot={false} name="LLM Agent"/>
+                        {/* Baselines */}
+                        {Object.entries(baselineResults).map(([bk,br])=>(
+                          <Line key={bk} data={br.timeline.map(t=>({day:t.day,fillRate:t.fillRateCum}))}
+                            type="monotone" dataKey="fillRate" stroke={BASELINES[bk].color} strokeWidth={1}
+                            strokeDasharray="3 2" dot={false} name={BASELINES[bk].label}/>
+                        ))}
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </Panel>
+                )}
+
+                {/* ROP decisions overlay */}
+                {agentLog.length>0&&(
+                  <Panel title="Agent Reorder Point Over Time vs Demand Distribution">
+                    <ResponsiveContainer width="100%" height={160}>
+                      <AreaChart data={simTimeline} margin={{top:4,right:4,bottom:0,left:0}}>
+                        <defs>
+                          <linearGradient id="dg" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="5%" stopColor={C.red} stopOpacity={0.15}/>
+                            <stop offset="95%" stopColor={C.red} stopOpacity={0}/>
+                          </linearGradient>
+                        </defs>
+                        <XAxis dataKey="day" tick={{fontSize:9,fill:C.muted}}/>
+                        <YAxis tick={{fontSize:9,fill:C.muted}} width={45}/>
+                        <Tooltip contentStyle={{background:"#0a0f18",border:`1px solid ${C.border2}`,fontSize:10}}/>
+                        <Area type="monotone" dataKey="demand" stroke={C.red} strokeWidth={1} fill="url(#dg)" dot={false} name="Demand"/>
+                        <Line type="monotone" dataKey="rop" stroke={C.amber} strokeWidth={2} dot={false} name="Agent ROP"/>
+                      </AreaChart>
+                    </ResponsiveContainer>
+                  </Panel>
+                )}
+              </div>
+            )}
+
+            {/* ── TAB: MEMORY BANK ── */}
+            {activeTab==="memory"&&(
+              <div style={{display:"flex",flexDirection:"column",gap:10}}>
+                <Panel>
+                  <div style={{fontSize:11,color:C.muted,lineHeight:1.8,marginBottom:12}}>
+                    The memory bank is a compressed rolling state passed to the LLM on every decision turn. It enables the agent to reason beyond its context window — tracking performance trends, past ROP decisions, and emerging patterns across the full 120-day horizon.
+                  </div>
+                  <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:8}}>
+                    {memoryBank.map((m,i)=>(
+                      <div key={i} style={{background:C.dim,border:`1px solid ${C.border}`,borderRadius:7,padding:"10px 12px"}}>
+                        <div style={{fontSize:10,color:C.teal,fontWeight:600,marginBottom:6}}>Day {m.day}</div>
+                        {[
+                          ["ROP Set",m.rop],
+                          ["Confidence",m.confidence],
+                          ["Fill Rate",m.fill_rate?(m.fill_rate+"%"):"—"],
+                          ["Stockouts",m.stockouts_in_window],
+                        ].map(([l,v])=>(
+                          <div key={l} style={{display:"flex",justifyContent:"space-between",fontSize:10,marginBottom:4}}>
+                            <span style={{color:C.muted}}>{l}</span>
+                            <span style={{color:C.text}}>{v}</span>
+                          </div>
+                        ))}
+                        <div style={{fontSize:9,color:C.muted,marginTop:6,lineHeight:1.5,borderTop:`1px solid ${C.border}`,paddingTop:5}}>
+                          {m.key_insight}
+                        </div>
+                      </div>
+                    ))}
+                    {memoryBank.length===0&&<div style={{color:C.muted,fontSize:11}}>Memory builds as agent makes decisions...</div>}
+                  </div>
+                </Panel>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* ── FOOTER ── */}
+        <div style={{marginTop:28,paddingTop:16,borderTop:`1px solid ${C.border}`,display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,fontSize:10,color:C.dim}}>
+          {[
+            ["Environment","Stochastic inventory simulation with 4 demand regimes (Gamma-Poisson, Bimodal HV, Spiking, Stable Gamma). Mirrors real supply-chain uncertainty."],
+            ["Agent Architecture","Claude Sonnet 4 called every 5 simulation days. Rolling 6-turn conversation + compressed memory bank enables reasoning beyond context window."],
+            ["Reward Structure","Sparse: fill rate signal only meaningful after 50+ days. Agent must plan across 120-day horizon with no per-step guidance."],
+            ["Benchmarking","LLM agent compared against 4 rule-based baselines: Base, Safety Stock, Oracle Forecast, Monte Carlo — all from the original Python codebase."],
+          ].map(([t,d])=>(
+            <div key={t}>
+              <div style={{color:C.muted,fontWeight:600,marginBottom:4,fontSize:9,letterSpacing:2}}>{t.toUpperCase()}</div>
+              <div style={{lineHeight:1.7}}>{d}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <style>{`@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}`}</style>
+    </div>
+  );
+}