Fix UI: 3-pipeline playground, science examples, correct docs/architecture

- PlaygroundContent: add LLM-Only panel (Pipeline 1) so all 3 pipelines
display side-by-side; update chart to 3 bars (gray/blue/orange);
add token reduction badge; replace HotpotQA examples with science questions;
rename button to 'Run All 3 Pipelines'
- playground/page.tsx: update subtitle from 2-pipeline to 3-pipeline framing
- ArchitectureContent: fix tech stack card HotpotQA → Wikipedia Science
- DocsContent: fix env vars (TG_HOST/TG_TOKEN/HF_TOKEN), update /api/compare
example to show 3-pipeline response, update /api/benchmark to show
correct Wikipedia corpus numbers, fix Dual Pipeline → 3-Pipeline section,
fix Docker env vars

web/src/app/playground/page.tsx

@@ -11,7 +11,7 @@ export default function PlaygroundPage() {
           <div className="badge-glow mb-4" style={{ fontSize: "0.75rem" }}>⚡ Live Demo</div>
           <h1 className="display-xl mb-3">Playground</h1>
           <p className="body-lg mx-auto" style={{ maxWidth: "560px", color: "var(--color-muted)" }}>
-            Ask any question and watch Baseline RAG race against GraphRAG in real-time.
+            Ask any question and watch all 3 pipelines run simultaneously — LLM-Only, Basic RAG, and GraphRAG.
             Compare answers, tokens, latency, and cost side-by-side.
           </p>
         </div>

web/src/components/architecture/ArchitectureContent.tsx

@@ -250,7 +250,7 @@ export function ArchitectureContent() {
               { name: "Recharts", role: "Visualizations", icon: "📊" },
               { name: "Docker", role: "Deployment", icon: "🐳" },
               { name: "RAGAS", role: "Evaluation", icon: "📋" },
-              { name: "HotpotQA", role: "Benchmark Data", icon: "📚" },
+              { name: "Wikipedia Science", role: "Benchmark Data", icon: "📚" },
             ].map((tech, i) => (
               <div key={i} className="card card-hover text-center" style={{ padding: "28px 16px" }}>
                 <div style={{ fontSize: "2rem", marginBottom: "8px" }}>{tech.icon}</div>

web/src/components/docs/DocsContent.tsx

@@ -37,14 +37,23 @@ docker run -p 3000:3000 -p 8000:8000 graphrag`,
       },
       {
         heading: "Environment Variables",
-        code: `# .env file
-TIGERGRAPH_HOST=https://your-instance.i.tgcloud.io
-TIGERGRAPH_GRAPH=GraphRAG
-TIGERGRAPH_SECRET=your_secret
+        code: `# web/.env  (copy from web/.env.example)
 
-# LLM Providers (set at least one)
-ANTHROPIC_API_KEY=sk-ant-...
+# TigerGraph
+TG_HOST=https://your-instance.i.tgcloud.io
+TG_TOKEN=your_bearer_token
+TG_GRAPH=GraphRAG
+
+# LLM — set at least one
 OPENAI_API_KEY=sk-...
+OPENAI_BASE_URL=https://models.botlearn.ai/v1   # optional: botlearn.ai / other proxy
+LLM_MODEL=gemini-2.5-flash                      # optional: override default model
+
+# Embeddings (for live TigerGraph retrieval)
+HF_TOKEN=hf_...
+
+# Optional additional providers
+ANTHROPIC_API_KEY=sk-ant-...
 GEMINI_API_KEY=AI...
 GROQ_API_KEY=gsk_...`,
       },
@@ -61,54 +70,64 @@ GROQ_API_KEY=gsk_...`,
         code: `// Request
 POST /api/compare
 {
-  "query": "Were Scott Derrickson and Ed Wood of the same nationality?",
-  "provider": "anthropic",
-  "model": "claude-sonnet-4-20250514",
-  "adaptiveRouting": true
+  "query": "What theory describes gravity as the curvature of spacetime?",
+  "provider": "openai",
+  "model": "gemini-2.5-flash",
+  "adaptiveRouting": true,
+  "topK": 5
 }
 
-// Response
+// Response — 3 pipelines run in parallel
 {
+  "llmOnly": {
+    "answer": "General relativity.",
+    "tokens": 84,
+    "latencyMs": 820,
+    "costUsd": 0.000013
+  },
   "baseline": {
-    "answer": "Yes, both are American.",
-    "tokens": 950,
-    "latencyMs": 1200,
-    "costUsd": 0.003800,
-    "entities": [],
-    "relations": []
+    "answer": "General relativity, published by Einstein in 1915...",
+    "tokens": 290,
+    "latencyMs": 1100,
+    "costUsd": 0.000044,
+    "retrievedChunks": 5,
+    "contextTokens": 240
   },
   "graphrag": {
-    "answer": "Yes, both directors are American...",
-    "tokens": 2400,
-    "latencyMs": 1800,
-    "costUsd": 0.009600,
-    "entities": ["Scott Derrickson", "Ed Wood", "United States"],
-    "relations": ["BORN_IN", "LOCATED_IN"]
+    "answer": "General relativity (Einstein, 1915).",
+    "tokens": 163,
+    "latencyMs": 950,
+    "costUsd": 0.000025,
+    "entities": ["General Relativity (THEORY, Einstein 1915)"],
+    "relations": [],
+    "retrievedChunks": 5,
+    "contextTokens": 112
   },
-  "complexity": 0.72,
-  "queryType": "bridge",
-  "recommended": "graphrag"
+  "complexity": 0.2,
+  "queryType": "factoid",
+  "recommended": "baseline",
+  "totalTimeMs": 2700
 }`,
       },
       {
         heading: "POST /api/benchmark",
-        body: "Run batch evaluation on HotpotQA samples.",
+        body: "Run batch evaluation on 10 science questions from the ingested Wikipedia corpus. All samples run in parallel.",
         code: `// Request
 POST /api/benchmark
-{ "numSamples": 10 }
+{ "numSamples": 10, "provider": "openai", "model": "gemini-2.5-flash" }
 
 // Response
 {
   "aggregate": {
     "numSamples": 10,
-    "baseline": { "avgF1": 0.6234, "avgEM": 0.4000, ... },
-    "graphrag": { "avgF1": 0.7567, "avgEM": 0.5000, ... },
-    "graphragF1WinRate": 0.70,
-    "byType": {
-      "bridge": { "count": 5, "baselineF1": 0.58, "graphragF1": 0.79 },
-      "comparison": { "count": 5, "baselineF1": 0.67, "graphragF1": 0.72 }
-    }
-  }
+    "llmOnly":  { "avgF1": 0.7000, "avgEM": 0.70, "avgTokens": 84,  "avgLatency": 820 },
+    "baseline": { "avgF1": 0.5800, "avgEM": 0.50, "avgTokens": 290, "avgLatency": 1100 },
+    "graphrag": { "avgF1": 0.7467, "avgEM": 0.60, "avgTokens": 163, "avgLatency": 950 },
+    "tokenReductionVsBaseline": 44,
+    "graphragF1WinRate": 0.90
+  },
+  "demoMode": false,
+  "note": "TigerGraph live retrieval attempted; corpus passages used as fallback."
 }`,
       },
       {
@@ -155,19 +174,21 @@ Universal LLM abstraction supporting Claude, GPT-4, Gemini, Llama, Mistral, Deep
 Automated evaluation with F1, Exact Match, token counting, cost tracking, and latency measurement.`,
       },
       {
-        heading: "Dual Pipeline Design",
-        body: `Every query runs through two pipelines simultaneously:
+        heading: "3-Pipeline Design",
+        body: `Every query runs through all three pipelines concurrently (parallel execution):
+
+**Pipeline 1 — LLM-Only**
+Query → LLM → Answer
+- Fewest tokens (~84/query). Pure parametric knowledge, no retrieval.
 
-**Pipeline A — Baseline RAG**
-Query → Vector similarity search → Retrieved passages → LLM generation
-- Fast and cheap
-- Best for simple factoid queries
+**Pipeline 2 — Basic RAG**
+Query → Embed → TigerGraph vector search → Full chunk text → LLM
+- More tokens (~290/query). Industry-standard retrieval baseline.
 
-**Pipeline B — GraphRAG**
-Query → Entity extraction → Graph traversal → Structured evidence → LLM generation
-- More tokens, but higher accuracy
-- Best for multi-hop bridge and comparison questions
-- Provides traceable reasoning paths`,
+**Pipeline 3 — GraphRAG**
+Query → Embed → TigerGraph vector search → Compact entity descriptions (pre-indexed) → LLM
+- Fewest retrieval tokens (~163/query). −44% vs Basic RAG, +28.7% F1.
+- Entity descriptions extracted once at ingest time — amortized cost.`,
       },
     ],
   },
@@ -231,9 +252,10 @@ docker build -t graphrag .
 # Run with environment variables
 docker run -d \\
   -p 3000:3000 \\
-  -p 8000:8000 \\
-  -e TIGERGRAPH_HOST=https://your-instance.i.tgcloud.io \\
-  -e ANTHROPIC_API_KEY=sk-ant-... \\
+  -e TG_HOST=https://your-instance.i.tgcloud.io \\
+  -e TG_TOKEN=your_bearer_token \\
+  -e OPENAI_API_KEY=sk-... \\
+  -e HF_TOKEN=hf_... \\
   graphrag`,
       },
       {

web/src/components/playground/PlaygroundContent.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
-  ResponsiveContainer, Legend,
+  ResponsiveContainer, Legend, Cell,
 } from "recharts";
 
 interface PipelineResult {
@@ -11,8 +11,8 @@ interface PipelineResult {
   tokens: number;
   latencyMs: number;
   costUsd: number;
-  entities: string[];
-  relations: string[];
+  entities?: string[];
+  relations?: string[];
 }
 
 interface ProviderInfo {
@@ -25,22 +25,28 @@ interface ProviderInfo {
 }
 
 const EXAMPLES = [
-  { q: "Were Scott Derrickson and Ed Wood of the same nationality?", type: "Bridge" },
-  { q: "What government position was held by the woman who portrayed Nora Batty?", type: "Multi-hop" },
-  { q: "Which magazine was started first, Arthur's Magazine or First for Women?", type: "Comparison" },
-  { q: "Who was born first, Arthur Conan Doyle or Agatha Christie?", type: "Comparison" },
-  { q: "What is the capital of the country where the Eiffel Tower is located?", type: "Bridge" },
+  { q: "What theory describes gravity as the curvature of spacetime caused by mass and energy?", type: "Factoid" },
+  { q: "What biological process converts sunlight and CO₂ into glucose in plants?", type: "Factoid" },
+  { q: "What molecule stores and transmits genetic information in all living cells?", type: "Factoid" },
+  { q: "What field of physics describes matter behavior at the subatomic scale using wave functions?", type: "Factoid" },
+  { q: "Which chemical element with atomic number 6 forms the backbone of all organic molecules?", type: "Factoid" },
 ];
 
 const FALLBACK_PROVIDERS: ProviderInfo[] = [
+  { id: "openai", name: "OpenAI / BotLearn", isLocal: false, hasApiKey: false, defaultModel: "gpt-4o-mini", models: [{ id: "gpt-4o-mini", name: "GPT-4o Mini", speed: "fast", quality: "medium" }] },
   { id: "anthropic", name: "Anthropic Claude", isLocal: false, hasApiKey: false, defaultModel: "claude-sonnet-4-20250514", models: [{ id: "claude-sonnet-4-20250514", name: "Claude Sonnet 4", speed: "medium", quality: "high" }] },
-  { id: "openai", name: "OpenAI", isLocal: false, hasApiKey: false, defaultModel: "gpt-4o-mini", models: [{ id: "gpt-4o-mini", name: "GPT-4o Mini", speed: "fast", quality: "medium" }] },
   { id: "gemini", name: "Google Gemini", isLocal: false, hasApiKey: false, defaultModel: "gemini-2.0-flash", models: [{ id: "gemini-2.0-flash", name: "Gemini 2.0 Flash", speed: "fast", quality: "medium" }] },
   { id: "groq", name: "Groq", isLocal: false, hasApiKey: false, defaultModel: "llama-3.3-70b-versatile", models: [{ id: "llama-3.3-70b-versatile", name: "Llama 3.3 70B", speed: "fast", quality: "high" }] },
   { id: "mistral", name: "Mistral AI", isLocal: false, hasApiKey: false, defaultModel: "mistral-large-latest", models: [{ id: "mistral-large-latest", name: "Mistral Large", speed: "medium", quality: "high" }] },
   { id: "deepseek", name: "DeepSeek", isLocal: false, hasApiKey: false, defaultModel: "deepseek-chat", models: [{ id: "deepseek-chat", name: "DeepSeek V3", speed: "fast", quality: "high" }] },
 ];
 
+const PIPE_COLORS = {
+  llmOnly:  "#6c6a64",
+  baseline: "#0072CE",
+  graphrag: "#FF6B00",
+};
+
 export function PlaygroundContent() {
   const [providers, setProviders] = useState<ProviderInfo[]>(FALLBACK_PROVIDERS);
   const [loading, setLoading] = useState(false);
@@ -48,6 +54,7 @@ export function PlaygroundContent() {
   const [provider, setProvider] = useState("openai");
   const [model, setModel] = useState("");
   const [adaptiveRouting, setAdaptiveRouting] = useState(true);
+  const [llmOnly, setLlmOnly] = useState<PipelineResult | null>(null);
   const [baseline, setBaseline] = useState<PipelineResult | null>(null);
   const [graphrag, setGraphrag] = useState<PipelineResult | null>(null);
   const [complexity, setComplexity] = useState(0);
@@ -74,8 +81,9 @@ export function PlaygroundContent() {
         body: JSON.stringify({ query, adaptiveRouting, provider, model: selectedModel }),
       });
       const data = await res.json();
-      setBaseline(data.baseline);
-      setGraphrag(data.graphrag);
+      setLlmOnly(data.llmOnly ?? null);
+      setBaseline(data.baseline ?? null);
+      setGraphrag(data.graphrag ?? null);
       setComplexity(data.complexity ?? 0);
       setQueryType(data.queryType ?? "");
       setRecommended(data.recommended ?? "");
@@ -86,11 +94,25 @@ export function PlaygroundContent() {
     setLoading(false);
   };
 
-  const chartData = baseline && graphrag ? [
-    { name: "Tokens", Baseline: baseline.tokens, GraphRAG: graphrag.tokens },
-    { name: "Latency (ms)", Baseline: Math.round(baseline.latencyMs), GraphRAG: Math.round(graphrag.latencyMs) },
+  const chartData = llmOnly && baseline && graphrag ? [
+    {
+      name: "Tokens",
+      "LLM-Only": llmOnly.tokens,
+      "Basic RAG": baseline.tokens,
+      "GraphRAG": graphrag.tokens,
+    },
+    {
+      name: "Latency (ms)",
+      "LLM-Only": Math.round(llmOnly.latencyMs),
+      "Basic RAG": Math.round(baseline.latencyMs),
+      "GraphRAG": Math.round(graphrag.latencyMs),
+    },
   ] : [];
 
+  const tokenReduction = baseline && graphrag && baseline.tokens > 0
+    ? Math.round((1 - graphrag.tokens / baseline.tokens) * 100)
+    : null;
+
   return (
     <div>
       {/* Provider Selection */}
@@ -136,7 +158,7 @@ export function PlaygroundContent() {
           <div className="flex-1">
             <textarea
               className="input textarea"
-              placeholder="Ask a multi-hop question… e.g., Were Scott Derrickson and Ed Wood of the same nationality?"
+              placeholder="Ask a science question… e.g., What theory describes gravity as the curvature of spacetime?"
               value={query}
               onChange={e => setQuery(e.target.value)}
               onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); runComparison(); } }}
@@ -153,7 +175,7 @@ export function PlaygroundContent() {
                   Running…
                 </span>
               ) : (
-                <>▶ Compare Pipelines</>
+                <>▶ Run All 3 Pipelines</>
               )}
             </button>
           </div>
@@ -168,7 +190,7 @@ export function PlaygroundContent() {
                 style={{ fontSize: "0.75rem", padding: "6px 12px" }}
                 onClick={() => setQuery(ex.q)}>
                 <span style={{ color: "var(--color-tiger-orange)", marginRight: "4px" }}>{ex.type}</span>
-                {ex.q.slice(0, 45)}…
+                {ex.q.slice(0, 48)}…
               </button>
             ))}
           </div>
@@ -180,7 +202,7 @@ export function PlaygroundContent() {
         <div className="card-cream mb-6 flex items-center gap-3 animate-fade-in" style={{ padding: "14px 20px" }}>
           <span style={{ fontSize: "1.25rem" }}>ℹ️</span>
           <span className="body-sm">
-            <strong>Demo Mode</strong> — Showing sample data. Set your API key for live results.
+            <strong>Demo Mode</strong> — Showing sample data. Set your API key in <code>web/.env</code> for live results.
           </span>
         </div>
       )}
@@ -199,84 +221,131 @@ export function PlaygroundContent() {
               Type: <strong>{queryType}</strong>
               <span style={{ color: "var(--color-muted)", margin: "0 8px" }}>·</span>
               Recommended: <strong style={{ color: recommended === "graphrag" ? "#FF6B00" : "#0072CE" }}>
-                {recommended === "graphrag" ? "GraphRAG" : "Baseline RAG"}
+                {recommended === "graphrag" ? "GraphRAG" : "Basic RAG"}
               </strong>
             </span>
           </div>
         </div>
       )}
 
-      {/* Results */}
-      {baseline && graphrag && (
+      {/* Token Reduction Badge */}
+      {tokenReduction !== null && tokenReduction > 0 && (
+        <div className="mb-6 flex items-center justify-center animate-fade-in">
+          <div className="badge-glow" style={{ fontSize: "0.875rem", padding: "8px 20px" }}>
+            🏆 GraphRAG used <strong>−{tokenReduction}% tokens</strong> vs Basic RAG
+          </div>
+        </div>
+      )}
+
+      {/* 3-Pipeline Results */}
+      {llmOnly && baseline && graphrag && (
         <div className="animate-fade-in-up">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-            {/* Baseline Card */}
-            <div className="card pipeline-baseline" style={{ position: "relative" }}>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-6">
+
+            {/* Pipeline 1: LLM-Only */}
+            <div className="card" style={{ position: "relative", borderTop: `3px solid ${PIPE_COLORS.llmOnly}` }}>
+              <div style={{
+                position: "absolute", top: "16px", right: "16px",
+                width: "8px", height: "8px", borderRadius: "50%",
+                background: PIPE_COLORS.llmOnly,
+              }} />
+              <div className="caption-uppercase mb-1" style={{ color: PIPE_COLORS.llmOnly }}>Pipeline 1</div>
+              <div className="title-lg mb-4">LLM-Only</div>
+              <p className="body-sm mb-4" style={{ color: "var(--color-muted)", fontStyle: "italic" }}>
+                No retrieval — pure parametric knowledge
+              </p>
+              <div className="body-md mb-6" style={{ minHeight: "80px", lineHeight: 1.65 }}>
+                {llmOnly.answer}
+              </div>
+              <div className="grid grid-cols-3 gap-4 pt-4" style={{ borderTop: "1px solid var(--color-hairline)" }}>
+                <div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.llmOnly }}>{llmOnly.tokens.toLocaleString()}</div>
+                  <div className="metric-label">Tokens</div>
+                </div>
+                <div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.llmOnly }}>{llmOnly.latencyMs.toFixed(0)}ms</div>
+                  <div className="metric-label">Latency</div>
+                </div>
+                <div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.llmOnly }}>${llmOnly.costUsd.toFixed(6)}</div>
+                  <div className="metric-label">Cost</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Pipeline 2: Basic RAG */}
+            <div className="card" style={{ position: "relative", borderTop: `3px solid ${PIPE_COLORS.baseline}` }}>
               <div style={{
                 position: "absolute", top: "16px", right: "16px",
                 width: "8px", height: "8px", borderRadius: "50%",
-                background: "#0072CE",
+                background: PIPE_COLORS.baseline,
                 boxShadow: "0 0 8px rgba(0,114,206,0.4)",
               }} />
-              <div className="caption-uppercase mb-1" style={{ color: "#0072CE" }}>Pipeline A</div>
-              <div className="title-lg mb-4">Baseline RAG</div>
+              <div className="caption-uppercase mb-1" style={{ color: PIPE_COLORS.baseline }}>Pipeline 2</div>
+              <div className="title-lg mb-4">Basic RAG</div>
+              <p className="body-sm mb-4" style={{ color: "var(--color-muted)", fontStyle: "italic" }}>
+                Vector search → full chunk text → LLM
+              </p>
               <div className="body-md mb-6" style={{ minHeight: "80px", lineHeight: 1.65 }}>
                 {baseline.answer}
               </div>
               <div className="grid grid-cols-3 gap-4 pt-4" style={{ borderTop: "1px solid var(--color-hairline)" }}>
                 <div>
-                  <div className="metric-value-sm" style={{ color: "#0072CE" }}>{baseline.tokens.toLocaleString()}</div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.baseline }}>{baseline.tokens.toLocaleString()}</div>
                   <div className="metric-label">Tokens</div>
                 </div>
                 <div>
-                  <div className="metric-value-sm" style={{ color: "#0072CE" }}>{baseline.latencyMs.toFixed(0)}ms</div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.baseline }}>{baseline.latencyMs.toFixed(0)}ms</div>
                   <div className="metric-label">Latency</div>
                 </div>
                 <div>
-                  <div className="metric-value-sm" style={{ color: "#0072CE" }}>${baseline.costUsd.toFixed(6)}</div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.baseline }}>${baseline.costUsd.toFixed(6)}</div>
                   <div className="metric-label">Cost</div>
                 </div>
               </div>
             </div>
 
-            {/* GraphRAG Card */}
-            <div className="card pipeline-graphrag" style={{ position: "relative" }}>
+            {/* Pipeline 3: GraphRAG */}
+            <div className="card" style={{ position: "relative", borderTop: `3px solid ${PIPE_COLORS.graphrag}` }}>
               <div style={{
                 position: "absolute", top: "16px", right: "16px",
                 width: "8px", height: "8px", borderRadius: "50%",
-                background: "#FF6B00",
+                background: PIPE_COLORS.graphrag,
                 boxShadow: "0 0 8px rgba(255,107,0,0.4)",
               }} />
-              <div className="caption-uppercase mb-1" style={{ color: "#FF6B00" }}>Pipeline B</div>
+              <div className="caption-uppercase mb-1" style={{ color: PIPE_COLORS.graphrag }}>Pipeline 3</div>
               <div className="title-lg mb-4">GraphRAG</div>
+              <p className="body-sm mb-4" style={{ color: "var(--color-muted)", fontStyle: "italic" }}>
+                TigerGraph → compact entity context → LLM
+              </p>
               <div className="body-md mb-6" style={{ minHeight: "80px", lineHeight: 1.65 }}>
                 {graphrag.answer}
               </div>
               <div className="grid grid-cols-3 gap-4 pt-4" style={{ borderTop: "1px solid var(--color-hairline)" }}>
                 <div>
-                  <div className="metric-value-sm" style={{ color: "#FF6B00" }}>{graphrag.tokens.toLocaleString()}</div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.graphrag }}>{graphrag.tokens.toLocaleString()}</div>
                   <div className="metric-label">Tokens</div>
                 </div>
                 <div>
-                  <div className="metric-value-sm" style={{ color: "#FF6B00" }}>{graphrag.latencyMs.toFixed(0)}ms</div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.graphrag }}>{graphrag.latencyMs.toFixed(0)}ms</div>
                   <div className="metric-label">Latency</div>
                 </div>
                 <div>
-                  <div className="metric-value-sm" style={{ color: "#FF6B00" }}>${graphrag.costUsd.toFixed(6)}</div>
+                  <div className="metric-value-sm" style={{ color: PIPE_COLORS.graphrag }}>${graphrag.costUsd.toFixed(6)}</div>
                   <div className="metric-label">Cost</div>
                 </div>
               </div>
 
-              {/* Entities & Relations */}
-              {graphrag.entities.length > 0 && (
+              {/* Entities */}
+              {graphrag.entities && graphrag.entities.length > 0 && (
                 <div className="mt-4 pt-4" style={{ borderTop: "1px solid var(--color-hairline)" }}>
-                  <div className="caption mb-2">Extracted Entities</div>
+                  <div className="caption mb-2">Graph Entities Retrieved</div>
                   <div className="flex flex-wrap gap-1.5">
                     {graphrag.entities.map((e, i) => (
                       <span key={i} className="badge-outline" style={{ fontSize: "0.6875rem" }}>{e}</span>
                     ))}
                   </div>
-                  {graphrag.relations.length > 0 && (
+                  {graphrag.relations && graphrag.relations.length > 0 && (
                     <div className="mt-3">
                       <div className="caption mb-1">Reasoning Path</div>
                       {graphrag.relations.map((r, i) => (
@@ -294,10 +363,10 @@ export function PlaygroundContent() {
             </div>
           </div>
 
-          {/* Comparison Chart */}
+          {/* 3-Pipeline Comparison Chart */}
           {chartData.length > 0 && (
             <div className="card">
-              <div className="title-md mb-6">Side-by-Side Metrics</div>
+              <div className="title-md mb-6">Side-by-Side Metrics — All 3 Pipelines</div>
               <ResponsiveContainer width="100%" height={300}>
                 <BarChart data={chartData} margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
                   <CartesianGrid strokeDasharray="3 3" stroke="#002B49" strokeOpacity={0.06} />
@@ -305,8 +374,15 @@ export function PlaygroundContent() {
                   <YAxis tick={{ fill: "#6c6a64", fontSize: 12 }} />
                   <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "10px" }} />
                   <Legend />
-                  <Bar dataKey="Baseline" fill="#0072CE" radius={[6, 6, 0, 0]} />
-                  <Bar dataKey="GraphRAG" fill="#FF6B00" radius={[6, 6, 0, 0]} />
+                  <Bar dataKey="LLM-Only" radius={[6, 6, 0, 0]}>
+                    {chartData.map((_, i) => <Cell key={i} fill={PIPE_COLORS.llmOnly} />)}
+                  </Bar>
+                  <Bar dataKey="Basic RAG" radius={[6, 6, 0, 0]}>
+                    {chartData.map((_, i) => <Cell key={i} fill={PIPE_COLORS.baseline} />)}
+                  </Bar>
+                  <Bar dataKey="GraphRAG" radius={[6, 6, 0, 0]}>
+                    {chartData.map((_, i) => <Cell key={i} fill={PIPE_COLORS.graphrag} />)}
+                  </Bar>
                 </BarChart>
               </ResponsiveContainer>
             </div>