🎨 Ultra premium UI: 6 separate pages with animations, bento grid, premium design

web/src/app/architecture/page.tsx

@@ -0,0 +1,13 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { ArchitectureContent } from "@/components/architecture/ArchitectureContent";
+
+export default function ArchitecturePage() {
+  return (
+    <main>
+      <Navbar />
+      <ArchitectureContent />
+      <Footer />
+    </main>
+  );
+}

web/src/app/benchmarks/page.tsx

@@ -0,0 +1,27 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { BenchmarkContent } from "@/components/benchmarks/BenchmarkContent";
+
+export default function BenchmarksPage() {
+  return (
+    <main>
+      <Navbar />
+      <div className="page-header">
+        <div className="container">
+          <div className="badge-blue mb-4" style={{ fontSize: "0.75rem" }}>📊 Performance</div>
+          <h1 className="display-xl mb-3">Benchmarks</h1>
+          <p className="body-lg mx-auto" style={{ maxWidth: "560px", color: "var(--color-muted)" }}>
+            Run batch evaluations on HotpotQA questions. Compare F1 score, exact match,
+            token usage, and cost across both pipelines.
+          </p>
+        </div>
+      </div>
+      <section style={{ background: "var(--color-surface-soft)", padding: "0 0 96px" }}>
+        <div className="container">
+          <BenchmarkContent />
+        </div>
+      </section>
+      <Footer />
+    </main>
+  );
+}

web/src/app/docs/page.tsx

@@ -0,0 +1,13 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { DocsContent } from "@/components/docs/DocsContent";
+
+export default function DocsPage() {
+  return (
+    <main>
+      <Navbar />
+      <DocsContent />
+      <Footer />
+    </main>
+  );
+}

web/src/app/explorer/page.tsx

@@ -0,0 +1,27 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { ExplorerContent } from "@/components/explorer/ExplorerContent";
+
+export default function ExplorerPage() {
+  return (
+    <main>
+      <Navbar />
+      <div className="page-header">
+        <div className="container">
+          <div className="badge" style={{ background: "#e8f8f5", color: "#5db8a6", fontSize: "0.75rem" }}>🕸️ Knowledge Graph</div>
+          <h1 className="display-xl mb-3 mt-4">Graph Explorer</h1>
+          <p className="body-lg mx-auto" style={{ maxWidth: "560px", color: "var(--color-muted)" }}>
+            Visualize how GraphRAG traverses the knowledge graph to find answers.
+            Click nodes to inspect entities and trace reasoning paths.
+          </p>
+        </div>
+      </div>
+      <section style={{ background: "var(--color-surface-soft)", padding: "0 0 96px" }}>
+        <div className="container-wide">
+          <ExplorerContent />
+        </div>
+      </section>
+      <Footer />
+    </main>
+  );
+}

web/src/app/playground/page.tsx

@@ -0,0 +1,27 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { PlaygroundContent } from "@/components/playground/PlaygroundContent";
+
+export default function PlaygroundPage() {
+  return (
+    <main>
+      <Navbar />
+      <div className="page-header">
+        <div className="container">
+          <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.
+            Compare answers, tokens, latency, and cost side-by-side.
+          </p>
+        </div>
+      </div>
+      <section style={{ background: "var(--color-surface-soft)", padding: "0 0 96px" }}>
+        <div className="container">
+          <PlaygroundContent />
+        </div>
+      </section>
+      <Footer />
+    </main>
+  );
+}

web/src/components/architecture/ArchitectureContent.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+const LAYERS = [
+  {
+    number: "01",
+    name: "Graph Layer",
+    tech: "TigerGraph Cloud",
+    color: "#e8a55a",
+    icon: "🔶",
+    description: "Foundation of the system. TigerGraph stores entities, relationships, and their properties as a native graph. GSQL queries enable multi-hop traversal that would be prohibitively expensive with traditional databases.",
+    capabilities: [
+      "Entity storage with typed vertices (PERSON, LOCATION, WORK, etc.)",
+      "Relationship edges with properties (BORN_IN, DIRECTED, etc.)",
+      "GSQL queries for 1-hop, 2-hop, and multi-hop traversal",
+      "Schema-bounded extraction — only valid vertex types accepted",
+      "Real-time graph updates via ingestion pipeline",
+    ],
+    code: `# GSQL Multi-Hop Query
+CREATE QUERY find_connections(VERTEX<Entity> start, INT hops) {
+  Start = {start};
+  FOREACH i IN RANGE[1, hops] DO
+    Start = SELECT t
+            FROM Start:s -(HAS_RELATION:e)-> Entity:t
+            ACCUM @@paths += (s, e.relation, t);
+  END;
+  PRINT @@paths;
+}`,
+  },
+  {
+    number: "02",
+    name: "Orchestration Layer",
+    tech: "Dual Pipeline Router",
+    color: "#0072CE",
+    icon: "🔀",
+    description: "The brain of the system. Analyzes incoming queries, classifies their complexity, and routes them through the appropriate pipeline — Baseline RAG for simple queries, GraphRAG for complex multi-hop questions.",
+    capabilities: [
+      "Adaptive Query Router — complexity scoring (0.0–1.0)",
+      "Query type classification (bridge, comparison, factoid)",
+      "Dual-Level Keyword extraction (high-level concepts + low-level entities)",
+      "Pipeline A: Query → Vector Search → LLM (fast, cheap)",
+      "Pipeline B: Query → Entity Extraction → Graph Traversal → LLM (precise)",
+    ],
+    code: `# Adaptive Query Router
+class AdaptiveRouter:
+  def classify(self, query: str) -> RouteDecision:
+    complexity = self.score_complexity(query)
+    query_type = self.detect_type(query)  # bridge/comparison/factoid
+
+    if complexity > 0.6 or query_type == "bridge":
+      return Route.GRAPHRAG
+    return Route.BASELINE`,
+  },
+  {
+    number: "03",
+    name: "LLM Layer",
+    tech: "12 Providers via Universal API",
+    color: "#cc785c",
+    icon: "🤖",
+    description: "Universal LLM abstraction that supports 12 providers through a single API. Swap between Claude, GPT-4, Gemini, Llama, and more with one parameter change — no code modifications needed.",
+    capabilities: [
+      "Anthropic Claude (Sonnet 4, Haiku 4)",
+      "OpenAI (GPT-4o, GPT-4o-mini)",
+      "Google Gemini (2.0 Flash, Pro)",
+      "Meta Llama via Groq / Together / HuggingFace",
+      "Mistral, DeepSeek, Cohere, xAI Grok, OpenRouter",
+      "Local: Ollama for fully offline inference",
+    ],
+    code: `# Universal LLM — one interface, 12 providers
+llm = UniversalLLM(provider="anthropic", model="claude-sonnet-4")
+response = llm.generate(
+  context=graph_evidence,
+  query=user_question,
+  max_tokens=500
+)
+# Switch provider with one line:
+llm = UniversalLLM(provider="groq", model="llama-3.3-70b")`,
+  },
+  {
+    number: "04",
+    name: "Evaluation Layer",
+    tech: "RAGAS + F1/EM + Cost Tracking",
+    color: "#5db8a6",
+    icon: "📊",
+    description: "Automated evaluation that measures every query. Computes F1 score, Exact Match, RAGAS metrics, token usage, latency, and USD cost for both pipelines. Powers the benchmark dashboard and cost projections.",
+    capabilities: [
+      "F1 Score — token-level overlap with ground truth",
+      "Exact Match — binary correctness metric",
+      "RAGAS integration — faithfulness, relevancy, context metrics",
+      "Token counting — input/output per provider",
+      "Cost tracking — USD per query based on provider pricing",
+      "Latency measurement — end-to-end milliseconds",
+    ],
+    code: `# Evaluation Layer
+evaluator = RAGASEvaluator()
+metrics = evaluator.evaluate(
+  query=question,
+  answer=llm_response,
+  ground_truth=reference_answer,
+  context=retrieved_context
+)
+# Returns: { f1: 0.89, em: 1.0, tokens: 2400,
+#            cost_usd: 0.0096, latency_ms: 1800 }`,
+  },
+];
+
+export function ArchitectureContent() {
+  return (
+    <div>
+      {/* Hero */}
+      <section style={{
+        background: "linear-gradient(135deg, #002B49 0%, #003D6B 50%, #002B49 100%)",
+        padding: "96px 0 80px",
+        position: "relative",
+        overflow: "hidden",
+      }}>
+        <div style={{
+          position: "absolute", top: "-50%", right: "-20%",
+          width: "800px", height: "800px",
+          borderRadius: "50%",
+          background: "radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 70%)",
+        }} />
+        <div className="container" style={{ position: "relative" }}>
+          <div className="badge mb-4" style={{ background: "rgba(255,107,0,0.15)", color: "#FF6B00", fontSize: "0.75rem" }}>
+            🏗️ System Design
+          </div>
+          <h1 style={{
+            fontFamily: "var(--font-serif)",
+            fontSize: "clamp(2.5rem, 5vw, 4rem)",
+            fontWeight: 400,
+            color: "white",
+            letterSpacing: "-1.5px",
+            marginBottom: "16px",
+          }}>
+            Architecture
+          </h1>
+          <p style={{ fontSize: "1.125rem", color: "rgba(255,255,255,0.6)", maxWidth: "560px", lineHeight: 1.6 }}>
+            A 4-layer AI Factory model inspired by the GraphRAG and LightRAG papers,
+            built on TigerGraph for graph storage and traversal.
+          </p>
+
+          {/* Layer Overview Diagram */}
+          <div className="mt-12 grid grid-cols-4 gap-3">
+            {LAYERS.map((layer, i) => (
+              <div key={i} style={{
+                background: "rgba(255,255,255,0.06)",
+                border: `1px solid ${layer.color}30`,
+                borderRadius: "12px",
+                padding: "20px",
+                textAlign: "center",
+              }}>
+                <div style={{ fontSize: "1.5rem", marginBottom: "8px" }}>{layer.icon}</div>
+                <div style={{ fontFamily: "var(--font-mono)", fontSize: "0.6875rem", color: layer.color, marginBottom: "4px" }}>
+                  Layer {layer.number}
+                </div>
+                <div style={{ color: "white", fontWeight: 500, fontSize: "0.875rem" }}>
+                  {layer.name}
+                </div>
+                <div style={{ color: "rgba(255,255,255,0.5)", fontSize: "0.75rem", marginTop: "4px" }}>
+                  {layer.tech}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Flow arrows */}
+          <div className="flex justify-center items-center mt-6 gap-2">
+            <span style={{ color: "rgba(255,255,255,0.3)", fontFamily: "var(--font-mono)", fontSize: "0.75rem" }}>
+              Query → Graph → Orchestration → LLM → Evaluation → Answer
+            </span>
+          </div>
+        </div>
+      </section>
+
+      {/* Layer Details */}
+      <section className="section">
+        <div className="container">
+          {LAYERS.map((layer, i) => (
+            <div key={i} className="mb-16" style={{ paddingBottom: i < LAYERS.length - 1 ? "64px" : "0", borderBottom: i < LAYERS.length - 1 ? "1px solid var(--color-hairline-soft)" : "none" }}>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+                {/* Info */}
+                <div className={i % 2 === 0 ? "" : "lg:order-2"}>
+                  <div className="flex items-center gap-3 mb-4">
+                    <span style={{
+                      fontFamily: "var(--font-mono)", fontSize: "0.8125rem",
+                      color: layer.color, fontWeight: 700,
+                    }}>
+                      Layer {layer.number}
+                    </span>
+                    <div className="divider" style={{ background: layer.color }} />
+                  </div>
+                  <h2 className="display-md mb-2">{layer.name}</h2>
+                  <div className="badge mb-4" style={{
+                    background: `${layer.color}12`, color: layer.color, fontSize: "0.75rem",
+                  }}>
+                    {layer.tech}
+                  </div>
+                  <p className="body-lg mb-6" style={{ color: "var(--color-muted)", lineHeight: 1.7 }}>
+                    {layer.description}
+                  </p>
+
+                  {/* Capabilities */}
+                  <div className="flex flex-col gap-2.5">
+                    {layer.capabilities.map((cap, j) => (
+                      <div key={j} className="flex items-start gap-3">
+                        <div style={{
+                          width: "6px", height: "6px", borderRadius: "50%",
+                          background: layer.color, marginTop: "8px", flexShrink: 0,
+                        }} />
+                        <span className="body-sm" style={{ color: "var(--color-body)" }}>{cap}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Code */}
+                <div className={i % 2 === 0 ? "" : "lg:order-1"}>
+                  <div className="code-window">
+                    <div className="code-window-header">
+                      <div className="code-window-dot code-window-dot-red" />
+                      <div className="code-window-dot code-window-dot-yellow" />
+                      <div className="code-window-dot code-window-dot-green" />
+                      <span className="body-sm" style={{ color: "#a09d96", marginLeft: "12px" }}>
+                        {layer.name.toLowerCase().replace(/\s/g, "_")}.py
+                      </span>
+                    </div>
+                    <pre className="code-window-body" style={{ fontSize: "0.8125rem", lineHeight: 1.8, whiteSpace: "pre-wrap" }}>
+                      {layer.code}
+                    </pre>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Tech Stack */}
+      <section className="section" style={{ background: "var(--color-surface-soft)" }}>
+        <div className="container">
+          <div className="text-center mb-12">
+            <div className="caption-uppercase mb-3" style={{ color: "var(--color-tiger-orange)" }}>Tech Stack</div>
+            <h2 className="display-lg">Built with modern tools</h2>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              { name: "TigerGraph", role: "Graph Database", icon: "🔶" },
+              { name: "Claude", role: "Primary LLM", icon: "🤖" },
+              { name: "Python", role: "Backend", icon: "🐍" },
+              { name: "Next.js", role: "Frontend", icon: "⚡" },
+              { name: "Recharts", role: "Visualizations", icon: "📊" },
+              { name: "Docker", role: "Deployment", icon: "🐳" },
+              { name: "RAGAS", role: "Evaluation", icon: "📋" },
+              { name: "HotpotQA", 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>
+                <div className="title-sm">{tech.name}</div>
+                <div className="caption" style={{ marginTop: "2px" }}>{tech.role}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

web/src/components/benchmarks/BenchmarkContent.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useState } from "react";
+import {
+  RadarChart, Radar, PolarGrid, PolarAngleAxis,
+  ResponsiveContainer, Tooltip, Legend,
+  BarChart, Bar, XAxis, YAxis, CartesianGrid,
+  AreaChart, Area,
+} from "recharts";
+
+interface AggregateData {
+  numSamples: number;
+  baseline: { avgF1: number; avgEM: number; avgTokens: number; avgCost: number; avgLatency: number };
+  graphrag: { avgF1: number; avgEM: number; avgTokens: number; avgCost: number; avgLatency: number };
+  graphragF1WinRate: number;
+  byType: {
+    bridge?: { count: number; baselineF1: number; graphragF1: number } | null;
+    comparison?: { count: number; baselineF1: number; graphragF1: number } | null;
+  };
+}
+
+const INITIAL: AggregateData = {
+  numSamples: 0,
+  baseline: { avgF1: 0, avgEM: 0, avgTokens: 0, avgCost: 0, avgLatency: 0 },
+  graphrag: { avgF1: 0, avgEM: 0, avgTokens: 0, avgCost: 0, avgLatency: 0 },
+  graphragF1WinRate: 0,
+  byType: {},
+};
+
+// Pre-computed demo results for showcase
+const DEMO_DATA: AggregateData = {
+  numSamples: 10,
+  baseline: { avgF1: 0.6234, avgEM: 0.4000, avgTokens: 950, avgCost: 0.003800, avgLatency: 1200 },
+  graphrag: { avgF1: 0.7567, avgEM: 0.5000, avgTokens: 2400, avgCost: 0.009600, avgLatency: 1800 },
+  graphragF1WinRate: 0.70,
+  byType: {
+    bridge: { count: 5, baselineF1: 0.5800, graphragF1: 0.7900 },
+    comparison: { count: 5, baselineF1: 0.6700, graphragF1: 0.7200 },
+  },
+};
+
+export function BenchmarkContent() {
+  const [running, setRunning] = useState(false);
+  const [samples, setSamples] = useState(10);
+  const [data, setData] = useState<AggregateData>(DEMO_DATA);
+  const [report, setReport] = useState("");
+  const [demoMode, setDemoMode] = useState(true);
+  const [hasResults, setHasResults] = useState(true);
+
+  const runBenchmark = async () => {
+    setRunning(true);
+    setReport("Running benchmark...");
+    try {
+      const res = await fetch("/api/benchmark", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ numSamples: samples }),
+      });
+      const result = await res.json();
+      setData(result.aggregate);
+      setDemoMode(result.demoMode ?? false);
+      setHasResults(true);
+
+      const a = result.aggregate;
+      const lines = [
+        `BENCHMARK RESULTS (${a.numSamples} samples, ${result.provider}/${result.model})`,
+        `${result.demoMode ? "⚠️ DEMO MODE" : "✅ LIVE RESULTS"}`,
+        "",
+        `Metric                Baseline     GraphRAG     Winner`,
+        `${"─".repeat(60)}`,
+        `Avg F1                ${a.baseline.avgF1.toFixed(4)}       ${a.graphrag.avgF1.toFixed(4)}       ${a.graphrag.avgF1 > a.baseline.avgF1 ? "GraphRAG" : "Baseline"}`,
+        `Avg EM                ${a.baseline.avgEM.toFixed(4)}       ${a.graphrag.avgEM.toFixed(4)}       ${a.graphrag.avgEM > a.baseline.avgEM ? "GraphRAG" : "Baseline"}`,
+        `Avg Tokens            ${a.baseline.avgTokens}            ${a.graphrag.avgTokens}`,
+        `GraphRAG F1 Win Rate: ${(a.graphragF1WinRate * 100).toFixed(0)}%`,
+      ];
+      setReport(lines.join("\n"));
+    } catch (err) {
+      setReport(`Error: ${err}`);
+    }
+    setRunning(false);
+  };
+
+  const radarData = hasResults ? [
+    { metric: "F1 Score", Baseline: +(data.baseline.avgF1 * 100).toFixed(0), GraphRAG: +(data.graphrag.avgF1 * 100).toFixed(0) },
+    { metric: "Exact Match", Baseline: +(data.baseline.avgEM * 100).toFixed(0), GraphRAG: +(data.graphrag.avgEM * 100).toFixed(0) },
+    { metric: "Speed", Baseline: 85, GraphRAG: Math.max(10, 100 - Math.round(data.graphrag.avgLatency / Math.max(data.baseline.avgLatency, 1) * 30)) },
+    { metric: "Cost Eff.", Baseline: 85, GraphRAG: Math.max(10, 100 - Math.round(data.graphrag.avgCost / Math.max(data.baseline.avgCost, 0.000001) * 20)) },
+    { metric: "Win Rate", Baseline: +((1 - data.graphragF1WinRate) * 100).toFixed(0), GraphRAG: +(data.graphragF1WinRate * 100).toFixed(0) },
+  ] : [];
+
+  const typeData = [];
+  if (data.byType.bridge) typeData.push({ name: "Bridge", Baseline: +(data.byType.bridge.baselineF1 * 100).toFixed(1), GraphRAG: +(data.byType.bridge.graphragF1 * 100).toFixed(1) });
+  if (data.byType.comparison) typeData.push({ name: "Comparison", Baseline: +(data.byType.comparison.baselineF1 * 100).toFixed(1), GraphRAG: +(data.byType.comparison.graphragF1 * 100).toFixed(1) });
+
+  // Token efficiency data
+  const tokenData = [
+    { name: "Input Tokens", Baseline: 800, GraphRAG: 2200 },
+    { name: "Output Tokens", Baseline: 150, GraphRAG: 200 },
+    { name: "Total", Baseline: data.baseline.avgTokens, GraphRAG: data.graphrag.avgTokens },
+  ];
+
+  return (
+    <div>
+      {/* Run Controls */}
+      <div className="card mb-8 animate-fade-in-up">
+        <div className="flex flex-wrap items-end gap-6">
+          <div className="flex-1 min-w-[200px]">
+            <div className="display-sm mb-2">Run Benchmark</div>
+            <p className="body-sm" style={{ color: "var(--color-muted)" }}>
+              Evaluate both pipelines on HotpotQA multi-hop questions
+            </p>
+          </div>
+          <div className="flex items-center gap-6">
+            <div>
+              <label className="caption block mb-1">Samples</label>
+              <div className="flex items-center gap-3">
+                <input type="range" min={5} max={10} step={1} value={samples}
+                  onChange={e => setSamples(+e.target.value)}
+                  className="w-28 accent-[#FF6B00]" />
+                <span className="metric-value-sm" style={{ color: "var(--color-tiger-orange)", width: "2ch" }}>
+                  {samples}
+                </span>
+              </div>
+            </div>
+            <button className="btn btn-primary btn-lg" onClick={runBenchmark} disabled={running}>
+              {running ? (
+                <span className="flex items-center gap-2">
+                  <span className="animate-spin inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full" />
+                  Running…
+                </span>
+              ) : "🏃 Run Benchmark"}
+            </button>
+          </div>
+        </div>
+        {demoMode && hasResults && (
+          <div className="mt-4 pt-4" style={{ borderTop: "1px solid var(--color-hairline-soft)" }}>
+            <div className="flex items-center gap-2">
+              <span className="badge-outline" style={{ fontSize: "0.6875rem" }}>📊 Pre-computed Demo Results</span>
+              <span className="body-sm" style={{ color: "var(--color-muted)" }}>
+                Set an API key for live benchmark data
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {hasResults && (
+        <>
+          {/* Hero Metrics */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8 animate-fade-in-up delay-100">
+            {[
+              {
+                label: "GraphRAG F1",
+                value: (data.graphrag.avgF1 * 100).toFixed(1) + "%",
+                delta: `+${((data.graphrag.avgF1 - data.baseline.avgF1) * 100).toFixed(1)}%`,
+                color: "#FF6B00",
+                bg: "linear-gradient(135deg, #FFF4EB, #faf9f5)",
+              },
+              {
+                label: "Win Rate",
+                value: (data.graphragF1WinRate * 100).toFixed(0) + "%",
+                delta: "of queries",
+                color: "#5db872",
+                bg: "linear-gradient(135deg, #ecf7ef, #faf9f5)",
+              },
+              {
+                label: "Bridge F1 Gain",
+                value: data.byType.bridge ? `+${((data.byType.bridge.graphragF1 - data.byType.bridge.baselineF1) * 100).toFixed(0)}%` : "N/A",
+                delta: "vs baseline",
+                color: "#0072CE",
+                bg: "linear-gradient(135deg, #E6F4FF, #faf9f5)",
+              },
+              {
+                label: "Samples",
+                value: data.numSamples.toString(),
+                delta: "HotpotQA",
+                color: "#002B49",
+                bg: "linear-gradient(135deg, #f5f0e8, #faf9f5)",
+              },
+            ].map((m, i) => (
+              <div key={i} className="card-hover" style={{
+                background: m.bg, borderRadius: "16px", padding: "28px",
+                textAlign: "center",
+              }}>
+                <div className="metric-value" style={{ color: m.color, fontSize: "2.25rem" }}>{m.value}</div>
+                <div className="metric-label mt-1">{m.label}</div>
+                <div className="caption mt-2" style={{ color: m.color }}>{m.delta}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* Charts Grid */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            {/* Radar */}
+            {radarData.length > 0 && (
+              <div className="card animate-fade-in-up delay-200">
+                <div className="title-md mb-6">Multi-Metric Comparison</div>
+                <ResponsiveContainer width="100%" height={360}>
+                  <RadarChart data={radarData}>
+                    <PolarGrid stroke="#002B49" strokeOpacity={0.1} />
+                    <PolarAngleAxis dataKey="metric" tick={{ fill: "#6c6a64", fontSize: 12 }} />
+                    <Radar name="Baseline" dataKey="Baseline" stroke="#0072CE" fill="#0072CE" fillOpacity={0.12} strokeWidth={2.5} />
+                    <Radar name="GraphRAG" dataKey="GraphRAG" stroke="#FF6B00" fill="#FF6B00" fillOpacity={0.12} strokeWidth={2.5} />
+                    <Legend />
+                    <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "10px" }} />
+                  </RadarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+
+            {/* F1 by Type */}
+            {typeData.length > 0 && (
+              <div className="card animate-fade-in-up delay-300">
+                <div className="title-md mb-6">F1 Score by Question Type</div>
+                <ResponsiveContainer width="100%" height={360}>
+                  <BarChart data={typeData} margin={{ top: 20, right: 20, left: 0, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#002B49" strokeOpacity={0.06} />
+                    <XAxis dataKey="name" tick={{ fill: "#6c6a64", fontSize: 13 }} />
+                    <YAxis domain={[0, 100]} tick={{ fill: "#6c6a64", fontSize: 12 }} unit="%" />
+                    <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]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+          </div>
+
+          {/* Token Efficiency */}
+          <div className="card mb-8 animate-fade-in-up delay-400">
+            <div className="title-md mb-6">Token Usage Breakdown</div>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={tokenData} layout="vertical" margin={{ top: 10, right: 30, left: 80, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#002B49" strokeOpacity={0.06} />
+                <XAxis type="number" tick={{ fill: "#6c6a64", fontSize: 12 }} />
+                <YAxis dataKey="name" type="category" tick={{ fill: "#6c6a64", fontSize: 13 }} />
+                <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "10px" }} />
+                <Legend />
+                <Bar dataKey="Baseline" fill="#0072CE" radius={[0, 6, 6, 0]} barSize={28} />
+                <Bar dataKey="GraphRAG" fill="#FF6B00" radius={[0, 6, 6, 0]} barSize={28} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+
+          {/* Detailed Table */}
+          <div className="card mb-8 animate-fade-in-up delay-500">
+            <div className="title-md mb-6">Full Comparison Table</div>
+            <div className="overflow-x-auto">
+              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.9375rem" }}>
+                <thead>
+                  <tr style={{ borderBottom: "2px solid var(--color-hairline)" }}>
+                    {["Metric", "Baseline RAG", "GraphRAG", "Δ", "Winner"].map(h => (
+                      <th key={h} className="caption-uppercase text-left" style={{ padding: "14px 16px" }}>{h}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    {
+                      metric: "Average F1 Score",
+                      b: data.baseline.avgF1.toFixed(4), g: data.graphrag.avgF1.toFixed(4),
+                      delta: `+${((data.graphrag.avgF1 - data.baseline.avgF1) * 100).toFixed(1)}%`,
+                      winner: data.graphrag.avgF1 > data.baseline.avgF1 ? "graphrag" : "baseline",
+                    },
+                    {
+                      metric: "Average Exact Match",
+                      b: data.baseline.avgEM.toFixed(4), g: data.graphrag.avgEM.toFixed(4),
+                      delta: `+${((data.graphrag.avgEM - data.baseline.avgEM) * 100).toFixed(1)}%`,
+                      winner: data.graphrag.avgEM > data.baseline.avgEM ? "graphrag" : "baseline",
+                    },
+                    {
+                      metric: "Avg Tokens/Query",
+                      b: data.baseline.avgTokens.toLocaleString(), g: data.graphrag.avgTokens.toLocaleString(),
+                      delta: `${(data.graphrag.avgTokens / data.baseline.avgTokens).toFixed(1)}×`,
+                      winner: data.baseline.avgTokens < data.graphrag.avgTokens ? "baseline" : "graphrag",
+                    },
+                    {
+                      metric: "Avg Cost/Query",
+                      b: "$" + data.baseline.avgCost.toFixed(6), g: "$" + data.graphrag.avgCost.toFixed(6),
+                      delta: `${(data.graphrag.avgCost / data.baseline.avgCost).toFixed(1)}×`,
+                      winner: data.baseline.avgCost < data.graphrag.avgCost ? "baseline" : "graphrag",
+                    },
+                    {
+                      metric: "Avg Latency",
+                      b: data.baseline.avgLatency + "ms", g: data.graphrag.avgLatency + "ms",
+                      delta: `${(data.graphrag.avgLatency / data.baseline.avgLatency).toFixed(1)}×`,
+                      winner: data.baseline.avgLatency < data.graphrag.avgLatency ? "baseline" : "graphrag",
+                    },
+                    {
+                      metric: "F1 Win Rate",
+                      b: ((1 - data.graphragF1WinRate) * 100).toFixed(0) + "%",
+                      g: (data.graphragF1WinRate * 100).toFixed(0) + "%",
+                      delta: "",
+                      winner: data.graphragF1WinRate > 0.5 ? "graphrag" : "baseline",
+                    },
+                  ].map((row, i) => (
+                    <tr key={i} style={{ borderBottom: "1px solid var(--color-hairline-soft)" }}>
+                      <td className="title-sm" style={{ padding: "14px 16px" }}>{row.metric}</td>
+                      <td style={{ padding: "14px 16px", fontFamily: "var(--font-mono)", color: "#0072CE" }}>{row.b}</td>
+                      <td style={{ padding: "14px 16px", fontFamily: "var(--font-mono)", color: "#FF6B00" }}>{row.g}</td>
+                      <td style={{ padding: "14px 16px", fontFamily: "var(--font-mono)", color: "var(--color-muted)", fontSize: "0.8125rem" }}>{row.delta}</td>
+                      <td style={{ padding: "14px 16px" }}>
+                        <span className={row.winner === "graphrag" ? "badge-orange" : "badge-blue"} style={{ fontSize: "0.6875rem" }}>
+                          {row.winner === "graphrag" ? "GraphRAG ✓" : "Baseline ✓"}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Insight */}
+          <div className="card-coral animate-fade-in-up delay-600">
+            <div className="display-sm" style={{ color: "white" }}>💡 Key Finding</div>
+            <p className="body-lg mt-4" style={{ color: "rgba(255,255,255,0.9)", maxWidth: "640px" }}>
+              GraphRAG achieves <strong>+{((data.graphrag.avgF1 - data.baseline.avgF1) * 100).toFixed(0)}% higher F1</strong> on
+              multi-hop questions, with the biggest gains on <strong>bridge queries</strong> where graph
+              traversal connects entities through shared relationships.
+            </p>
+            <p className="body-md mt-3" style={{ color: "rgba(255,255,255,0.7)" }}>
+              The Adaptive Router can eliminate the token overhead for simple queries by routing them
+              to Baseline RAG — achieving the best of both worlds.
+            </p>
+          </div>
+        </>
+      )}
+
+      {/* Report */}
+      {report && (
+        <div className="code-window mt-8 animate-fade-in-up delay-700">
+          <div className="code-window-header">
+            <div className="code-window-dot code-window-dot-red" />
+            <div className="code-window-dot code-window-dot-yellow" />
+            <div className="code-window-dot code-window-dot-green" />
+            <span className="body-sm" style={{ color: "#a09d96", marginLeft: "12px" }}>benchmark_report.txt</span>
+          </div>
+          <pre className="code-window-body" style={{ whiteSpace: "pre-wrap", fontSize: "0.8125rem" }}>
+            {report}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

web/src/components/docs/DocsContent.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import { useState } from "react";
+
+const SECTIONS = [
+  {
+    id: "quickstart",
+    title: "Quick Start",
+    icon: "🚀",
+    content: [
+      {
+        heading: "Prerequisites",
+        body: `Before running GraphRAG, make sure you have:
+- Python 3.10+
+- Node.js 18+
+- Docker (optional, for containerized deployment)
+- A TigerGraph Cloud account (free tier available)
+- At least one LLM API key (Claude, OpenAI, etc.)`,
+      },
+      {
+        heading: "Installation",
+        code: `# Clone the repository
+git clone https://github.com/MUTHUKUMARAN-K-1/graphrag-inference-hackathon
+cd graphrag-inference-hackathon
+
+# Backend setup
+pip install -r requirements.txt
+
+# Frontend setup
+cd web
+npm install
+npm run dev
+
+# Or use Docker
+docker build -t graphrag .
+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
+
+# LLM Providers (set at least one)
+ANTHROPIC_API_KEY=sk-ant-...
+OPENAI_API_KEY=sk-...
+GEMINI_API_KEY=AI...
+GROQ_API_KEY=gsk_...`,
+      },
+    ],
+  },
+  {
+    id: "api",
+    title: "API Reference",
+    icon: "📡",
+    content: [
+      {
+        heading: "POST /api/compare",
+        body: "Run a side-by-side comparison of Baseline RAG and GraphRAG pipelines.",
+        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
+}
+
+// Response
+{
+  "baseline": {
+    "answer": "Yes, both are American.",
+    "tokens": 950,
+    "latencyMs": 1200,
+    "costUsd": 0.003800,
+    "entities": [],
+    "relations": []
+  },
+  "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"]
+  },
+  "complexity": 0.72,
+  "queryType": "bridge",
+  "recommended": "graphrag"
+}`,
+      },
+      {
+        heading: "POST /api/benchmark",
+        body: "Run batch evaluation on HotpotQA samples.",
+        code: `// Request
+POST /api/benchmark
+{ "numSamples": 10 }
+
+// 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 }
+    }
+  }
+}`,
+      },
+      {
+        heading: "GET /api/providers",
+        body: "List all available LLM providers and their models.",
+        code: `// Response
+{
+  "providers": [
+    {
+      "id": "anthropic",
+      "name": "Anthropic Claude",
+      "isLocal": false,
+      "hasApiKey": true,
+      "defaultModel": "claude-sonnet-4-20250514",
+      "models": [
+        { "id": "claude-sonnet-4-20250514", "name": "Claude Sonnet 4", "speed": "medium", "quality": "high" }
+      ]
+    },
+    ...
+  ]
+}`,
+      },
+    ],
+  },
+  {
+    id: "architecture",
+    title: "Architecture",
+    icon: "🏗️",
+    content: [
+      {
+        heading: "4-Layer AI Factory Model",
+        body: `The system follows an AI Factory architecture with four distinct layers:
+
+**Layer 1 — Graph Layer (TigerGraph Cloud)**
+Stores the knowledge graph with typed vertices and edges. Supports GSQL queries for multi-hop traversal.
+
+**Layer 2 — Orchestration Layer**
+Routes queries through the Adaptive Router, which scores complexity and classifies query types (bridge, comparison, factoid).
+
+**Layer 3 — LLM Layer (12 Providers)**
+Universal LLM abstraction supporting Claude, GPT-4, Gemini, Llama, Mistral, DeepSeek, Grok, Cohere, and more.
+
+**Layer 4 — Evaluation Layer (RAGAS)**
+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:
+
+**Pipeline A — Baseline RAG**
+Query → Vector similarity search → Retrieved passages → LLM generation
+- Fast and cheap
+- Best for simple factoid queries
+
+**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`,
+      },
+    ],
+  },
+  {
+    id: "novelties",
+    title: "Novel Features",
+    icon: "✨",
+    content: [
+      {
+        heading: "1. Adaptive Query Router",
+        body: `Analyzes query complexity (0.0–1.0) using:
+- Entity count — more entities = higher complexity
+- Multi-hop indicators — "both", "same", "compared to"
+- Question word analysis — "which" and "who" patterns
+- Dependency chain length
+
+Routes simple queries to Baseline RAG (fast, cheap) and complex queries to GraphRAG (precise, traceable).`,
+      },
+      {
+        heading: "2. Schema-Bounded Extraction",
+        body: `Traditional NER extracts arbitrary entity types. Our system constrains extraction to TigerGraph's actual schema:
+- Only PERSON, LOCATION, WORK, CONCEPT, etc. (valid vertex types)
+- Eliminates hallucinated node types that would fail on graph lookup
+- Ensures every extracted entity maps to a real vertex in the graph`,
+      },
+      {
+        heading: "3. Dual-Level Keywords",
+        body: `Extracts keywords at two granularity levels:
+- **High-level**: Concepts, themes, categories (e.g., "nationality", "American cinema")
+- **Low-level**: Specific entities, names, dates (e.g., "Scott Derrickson", "1962")
+Enables graph traversal at multiple levels for richer context retrieval.`,
+      },
+      {
+        heading: "4. Graph Reasoning Paths",
+        body: `Traces explicit entity→relation→entity chains:
+- Scott Derrickson → BORN_IN → Denver, CO → LOCATED_IN → United States
+- Ed Wood → BORN_IN → Poughkeepsie, NY → LOCATED_IN → United States
+
+These paths are included in the LLM prompt as structured evidence, making answers verifiable and explainable.`,
+      },
+      {
+        heading: "5. Real-Time Cost Tracking",
+        body: `Measures per-query economics:
+- Input/output tokens counted per provider's tokenization
+- USD cost calculated using current provider pricing
+- Latency measured end-to-end (graph + LLM)
+- Interactive projections: "What would 100K queries/month cost?"`,
+      },
+    ],
+  },
+  {
+    id: "deployment",
+    title: "Deployment",
+    icon: "🐳",
+    content: [
+      {
+        heading: "Docker Deployment",
+        code: `# Build the image
+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-... \\
+  graphrag`,
+      },
+      {
+        heading: "TigerGraph Cloud Setup",
+        body: `1. Create a free account at tgcloud.io
+2. Create a new cluster (free tier: 50MB storage)
+3. Install the GraphRAG schema:
+   - Go to GraphStudio
+   - Import the schema from graphrag/setup_tigergraph.py
+4. Set TIGERGRAPH_HOST, TIGERGRAPH_GRAPH, TIGERGRAPH_SECRET in .env`,
+      },
+      {
+        heading: "Running Locally",
+        code: `# Backend (Python)
+cd graphrag-inference-hackathon
+pip install -r requirements.txt
+python -m graphrag.main
+
+# Frontend (Next.js)
+cd web
+npm install
+npm run dev
+
+# Open http://localhost:3000`,
+      },
+    ],
+  },
+];
+
+export function DocsContent() {
+  const [activeSection, setActiveSection] = useState("quickstart");
+
+  const section = SECTIONS.find(s => s.id === activeSection) || SECTIONS[0];
+
+  return (
+    <div style={{ display: "flex", minHeight: "calc(100vh - 72px)" }}>
+      {/* Sidebar */}
+      <aside style={{
+        width: "260px",
+        flexShrink: 0,
+        borderRight: "1px solid var(--color-hairline-soft)",
+        padding: "32px 0",
+        position: "sticky",
+        top: "72px",
+        height: "calc(100vh - 72px)",
+        overflowY: "auto",
+        display: "none",
+      }} className="lg:!block">
+        <div style={{ padding: "0 24px" }}>
+          <div className="caption-uppercase mb-4" style={{ color: "var(--color-tiger-orange)" }}>Documentation</div>
+          <nav className="flex flex-col gap-1">
+            {SECTIONS.map((s) => (
+              <button
+                key={s.id}
+                onClick={() => setActiveSection(s.id)}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "10px",
+                  padding: "10px 14px",
+                  borderRadius: "8px",
+                  border: "none",
+                  background: activeSection === s.id ? "var(--color-tiger-orange-light)" : "transparent",
+                  color: activeSection === s.id ? "var(--color-tiger-orange)" : "var(--color-muted)",
+                  fontWeight: activeSection === s.id ? 600 : 400,
+                  fontSize: "0.875rem",
+                  cursor: "pointer",
+                  textAlign: "left",
+                  transition: "all 0.15s ease",
+                  width: "100%",
+                }}
+              >
+                <span>{s.icon}</span>
+                {s.title}
+              </button>
+            ))}
+          </nav>
+        </div>
+      </aside>
+
+      {/* Mobile Tabs */}
+      <div className="lg:hidden" style={{
+        position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 40,
+        background: "var(--color-canvas)",
+        borderTop: "1px solid var(--color-hairline)",
+        display: "flex",
+        overflowX: "auto",
+        padding: "8px",
+        gap: "4px",
+      }}>
+        {SECTIONS.map((s) => (
+          <button
+            key={s.id}
+            onClick={() => setActiveSection(s.id)}
+            className={activeSection === s.id ? "badge-orange" : "badge-outline"}
+            style={{ fontSize: "0.6875rem", whiteSpace: "nowrap", cursor: "pointer", border: "none" }}
+          >
+            {s.icon} {s.title}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <main style={{ flex: 1, padding: "48px 40px 96px", maxWidth: "840px" }}>
+        <div className="flex items-center gap-3 mb-2">
+          <span style={{ fontSize: "1.5rem" }}>{section.icon}</span>
+          <h1 className="display-lg">{section.title}</h1>
+        </div>
+        <div className="divider mb-8" />
+
+        <div className="flex flex-col gap-10">
+          {section.content.map((block, i) => (
+            <div key={i}>
+              <h2 className="display-sm mb-4">{block.heading}</h2>
+              {block.body && (
+                <div className="body-lg" style={{ color: "var(--color-body)", lineHeight: 1.75, whiteSpace: "pre-line" }}>
+                  {block.body.split(/(\*\*[^*]+\*\*)/).map((part, j) => {
+                    if (part.startsWith("**") && part.endsWith("**")) {
+                      return <strong key={j} style={{ color: "var(--color-ink)" }}>{part.slice(2, -2)}</strong>;
+                    }
+                    return <span key={j}>{part}</span>;
+                  })}
+                </div>
+              )}
+              {block.code && (
+                <div className="code-window mt-4">
+                  <div className="code-window-header">
+                    <div className="code-window-dot code-window-dot-red" />
+                    <div className="code-window-dot code-window-dot-yellow" />
+                    <div className="code-window-dot code-window-dot-green" />
+                  </div>
+                  <pre className="code-window-body" style={{ fontSize: "0.8125rem", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
+                    {block.code}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}

web/src/components/explorer/ExplorerContent.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import { useState, useMemo } from "react";
+
+interface GraphNode {
+  id: string;
+  label: string;
+  type: string;
+  x: number;
+  y: number;
+  description?: string;
+}
+
+interface GraphEdge {
+  source: string;
+  target: string;
+  label: string;
+}
+
+const TYPE_COLORS: Record<string, string> = {
+  PERSON: "#FF6B6B",
+  ORGANIZATION: "#4ECDC4",
+  LOCATION: "#45B7D1",
+  EVENT: "#FFA07A",
+  DATE: "#98D8C8",
+  CONCEPT: "#AED6F1",
+  WORK: "#F9E79F",
+  QUERY: "#FF6B00",
+};
+
+const SCENARIOS: {
+  name: string;
+  query: string;
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  reasoning: string[];
+}[] = [
+  {
+    name: "Nationality Comparison",
+    query: "Were Scott Derrickson and Ed Wood of the same nationality?",
+    nodes: [
+      { id: "q", label: "Query", type: "QUERY", x: 450, y: 50, description: "Bridge question comparing two entities" },
+      { id: "sd", label: "Scott Derrickson", type: "PERSON", x: 200, y: 190, description: "American filmmaker, director of Sinister (2012)" },
+      { id: "ew", label: "Ed Wood", type: "PERSON", x: 700, y: 190, description: "American filmmaker, director of Plan 9 from Outer Space" },
+      { id: "us", label: "United States", type: "LOCATION", x: 450, y: 340, description: "Country — shared nationality node" },
+      { id: "denver", label: "Denver, CO", type: "LOCATION", x: 120, y: 340, description: "Birthplace of Scott Derrickson" },
+      { id: "pough", label: "Poughkeepsie, NY", type: "LOCATION", x: 780, y: 340, description: "Birthplace of Ed Wood" },
+      { id: "sinister", label: "Sinister (2012)", type: "WORK", x: 100, y: 200, description: "Horror film directed by Derrickson" },
+      { id: "planNine", label: "Plan 9 from Outer Space", type: "WORK", x: 800, y: 200, description: "Cult classic by Ed Wood" },
+      { id: "horror", label: "Horror Genre", type: "CONCEPT", x: 450, y: 460, description: "Shared genre concept" },
+    ],
+    edges: [
+      { source: "q", target: "sd", label: "FOUND_ENTITY" },
+      { source: "q", target: "ew", label: "FOUND_ENTITY" },
+      { source: "sd", target: "denver", label: "BORN_IN" },
+      { source: "ew", target: "pough", label: "BORN_IN" },
+      { source: "denver", target: "us", label: "LOCATED_IN" },
+      { source: "pough", target: "us", label: "LOCATED_IN" },
+      { source: "sd", target: "sinister", label: "DIRECTED" },
+      { source: "ew", target: "planNine", label: "DIRECTED" },
+      { source: "sinister", target: "horror", label: "GENRE" },
+      { source: "planNine", target: "horror", label: "GENRE" },
+    ],
+    reasoning: [
+      "Entry: Query identifies two key entities — Scott Derrickson and Ed Wood",
+      "Hop 1: BORN_IN relationships — Derrickson → Denver, CO; Wood → Poughkeepsie, NY",
+      "Hop 2: LOCATED_IN traversal — Both cities → United States",
+      "Convergence: Both paths meet at 'United States' node — same nationality confirmed",
+    ],
+  },
+  {
+    name: "Magazine Comparison",
+    query: "Which magazine was started first, Arthur's Magazine or First for Women?",
+    nodes: [
+      { id: "q", label: "Query", type: "QUERY", x: 450, y: 50, description: "Comparison question — temporal ordering" },
+      { id: "am", label: "Arthur's Magazine", type: "WORK", x: 220, y: 200, description: "American literary periodical" },
+      { id: "fw", label: "First for Women", type: "WORK", x: 680, y: 200, description: "American women's magazine" },
+      { id: "d1", label: "1844", type: "DATE", x: 220, y: 350, description: "Year Arthur's Magazine was founded" },
+      { id: "d2", label: "1989", type: "DATE", x: 680, y: 350, description: "Year First for Women was founded" },
+      { id: "pub", label: "Publishing", type: "CONCEPT", x: 450, y: 280, description: "Industry category" },
+      { id: "usa", label: "United States", type: "LOCATION", x: 450, y: 420, description: "Country of publication" },
+    ],
+    edges: [
+      { source: "q", target: "am", label: "FOUND_ENTITY" },
+      { source: "q", target: "fw", label: "FOUND_ENTITY" },
+      { source: "am", target: "d1", label: "FOUNDED_IN" },
+      { source: "fw", target: "d2", label: "FOUNDED_IN" },
+      { source: "am", target: "pub", label: "INDUSTRY" },
+      { source: "fw", target: "pub", label: "INDUSTRY" },
+      { source: "am", target: "usa", label: "PUBLISHED_IN" },
+      { source: "fw", target: "usa", label: "PUBLISHED_IN" },
+    ],
+    reasoning: [
+      "Entry: Two entities identified — Arthur's Magazine, First for Women",
+      "Hop 1: FOUNDED_IN dates — Arthur's → 1844; First for Women → 1989",
+      "Comparison: 1844 < 1989 — Arthur's Magazine predates by 145 years",
+      "Answer: Arthur's Magazine was started first",
+    ],
+  },
+];
+
+export function ExplorerContent() {
+  const [scenarioIdx, setScenarioIdx] = useState(0);
+  const [selectedNode, setSelectedNode] = useState<string | null>(null);
+  const [hops, setHops] = useState(2);
+
+  const scenario = SCENARIOS[scenarioIdx];
+  const { nodes, edges, reasoning } = scenario;
+
+  const nodeMap = useMemo(() => {
+    const map: Record<string, GraphNode> = {};
+    nodes.forEach((n) => { map[n.id] = n; });
+    return map;
+  }, [nodes]);
+
+  const selectedInfo = selectedNode ? nodeMap[selectedNode] : null;
+
+  const connectedEdges = selectedNode
+    ? edges.filter(e => e.source === selectedNode || e.target === selectedNode)
+    : [];
+
+  return (
+    <div>
+      {/* Scenario Selector */}
+      <div className="card mb-6 animate-fade-in-up">
+        <div className="flex flex-col md:flex-row gap-6 items-start md:items-end">
+          <div className="flex-1">
+            <div className="caption-uppercase mb-2" style={{ color: "var(--color-tiger-orange)" }}>Scenario</div>
+            <div className="flex gap-3">
+              {SCENARIOS.map((s, i) => (
+                <button
+                  key={i}
+                  className={`btn ${i === scenarioIdx ? "btn-primary" : "btn-secondary"} btn-sm`}
+                  onClick={() => { setScenarioIdx(i); setSelectedNode(null); }}
+                >
+                  {s.name}
+                </button>
+              ))}
+            </div>
+            <div className="body-md mt-3" style={{ fontStyle: "italic", color: "var(--color-muted)" }}>
+              &ldquo;{scenario.query}&rdquo;
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <label className="caption whitespace-nowrap flex items-center gap-2">
+              Hops: <strong style={{ color: "var(--color-tiger-orange)", fontFamily: "var(--font-mono)" }}>{hops}</strong>
+              <input type="range" min={1} max={4} step={1} value={hops}
+                onChange={(e) => setHops(+e.target.value)}
+                className="w-24 accent-[#FF6B00]" />
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
+        {/* Graph Visualization — 3 cols */}
+        <div className="xl:col-span-3">
+          <div className="card animate-scale-in" style={{ padding: "16px" }}>
+            <svg viewBox="0 0 900 520" style={{ width: "100%", height: "100%", minHeight: "480px" }}>
+              <defs>
+                <filter id="glow">
+                  <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+                  <feMerge>
+                    <feMergeNode in="coloredBlur"/>
+                    <feMergeNode in="SourceGraphic"/>
+                  </feMerge>
+                </filter>
+                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+                  <polygon points="0 0, 10 3.5, 0 7" fill="#e6dfd8" />
+                </marker>
+              </defs>
+
+              {/* Edges */}
+              {edges.map((edge, i) => {
+                const s = nodeMap[edge.source];
+                const t = nodeMap[edge.target];
+                if (!s || !t) return null;
+                const isConnected = selectedNode && (edge.source === selectedNode || edge.target === selectedNode);
+                const isHighlighted = !selectedNode || isConnected;
+                const mx = (s.x + t.x) / 2;
+                const my = (s.y + t.y) / 2 - 8;
+                return (
+                  <g key={`edge-${i}`}>
+                    <line
+                      x1={s.x} y1={s.y} x2={t.x} y2={t.y}
+                      stroke={isConnected ? "#FF6B00" : "#e6dfd8"}
+                      strokeWidth={isConnected ? 3 : 1.5}
+                      strokeOpacity={isHighlighted ? 0.85 : 0.2}
+                      markerEnd={isConnected ? undefined : "url(#arrowhead)"}
+                    />
+                    {isHighlighted && (
+                      <text x={mx} y={my} textAnchor="middle" fontSize="9" fill={isConnected ? "#FF6B00" : "#8e8b82"}
+                        fontFamily="var(--font-mono)" fontWeight={isConnected ? 600 : 400}>
+                        {edge.label}
+                      </text>
+                    )}
+                  </g>
+                );
+              })}
+
+              {/* Nodes */}
+              {nodes.map((node) => {
+                const color = TYPE_COLORS[node.type] || "#AED6F1";
+                const isSelected = selectedNode === node.id;
+                const isConnected = connectedEdges.some(e => e.source === node.id || e.target === node.id);
+                const r = isSelected ? 26 : 20;
+                const dimmed = selectedNode && !isSelected && !isConnected;
+                return (
+                  <g
+                    key={node.id}
+                    className="graph-node cursor-pointer"
+                    onClick={() => setSelectedNode(isSelected ? null : node.id)}
+                    opacity={dimmed ? 0.3 : 1}
+                  >
+                    {isSelected && (
+                      <>
+                        <circle cx={node.x} cy={node.y} r={r + 12} fill={color} opacity={0.12} />
+                        <circle cx={node.x} cy={node.y} r={r + 6} fill={color} opacity={0.08}
+                          filter="url(#glow)" />
+                      </>
+                    )}
+                    <circle
+                      cx={node.x} cy={node.y} r={r}
+                      fill={color}
+                      stroke="white" strokeWidth="3"
+                    />
+                    {node.type === "QUERY" && (
+                      <text x={node.x} y={node.y + 4} textAnchor="middle"
+                        fontSize="14" fill="white" fontWeight="bold">?</text>
+                    )}
+                    <text
+                      x={node.x} y={node.y + r + 16}
+                      textAnchor="middle"
+                      fontSize={isSelected ? "12" : "10.5"}
+                      fontWeight={isSelected ? "600" : "400"}
+                      fill="#141413"
+                      fontFamily="var(--font-sans)"
+                    >
+                      {node.label}
+                    </text>
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="flex flex-col gap-4">
+          {/* Node Details */}
+          <div className="card-dark animate-fade-in-up delay-100">
+            <div className="caption-uppercase mb-3" style={{ color: "#a09d96" }}>
+              {selectedInfo ? "Node Details" : "Select a Node"}
+            </div>
+            {selectedInfo ? (
+              <div>
+                <div className="title-lg" style={{ color: "#faf9f5" }}>{selectedInfo.label}</div>
+                <span className="badge mt-3 inline-block" style={{
+                  background: TYPE_COLORS[selectedInfo.type] || "#AED6F1",
+                  color: "white", fontSize: "0.6875rem",
+                }}>
+                  {selectedInfo.type}
+                </span>
+                {selectedInfo.description && (
+                  <p className="body-sm mt-3" style={{ color: "#a09d96", lineHeight: 1.6 }}>
+                    {selectedInfo.description}
+                  </p>
+                )}
+                <div className="mt-4 pt-4" style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
+                  <div className="caption mb-2" style={{ color: "#a09d96" }}>
+                    {connectedEdges.length} Connection{connectedEdges.length !== 1 ? "s" : ""}
+                  </div>
+                  {connectedEdges.map((e, i) => {
+                    const other = e.source === selectedInfo.id ? e.target : e.source;
+                    const otherNode = nodeMap[other];
+                    return (
+                      <div key={i} className="flex items-center gap-2 mb-2 cursor-pointer"
+                        onClick={() => setSelectedNode(other)}
+                        style={{ padding: "6px 10px", borderRadius: "8px", background: "rgba(255,255,255,0.04)" }}>
+                        <div className="w-2.5 h-2.5 rounded-full" style={{
+                          background: TYPE_COLORS[otherNode?.type ?? ""] || "#AED6F1",
+                        }} />
+                        <span style={{ color: "#faf9f5", fontFamily: "var(--font-mono)", fontSize: "0.75rem" }}>
+                          {e.label}
+                        </span>
+                        <span style={{ color: "#a09d96", fontSize: "0.75rem" }}>→</span>
+                        <span style={{ color: "#faf9f5", fontSize: "0.8125rem" }}>
+                          {otherNode?.label}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : (
+              <p className="body-sm" style={{ color: "#a09d96" }}>
+                Click any node on the graph to see its details, connections, and type information.
+              </p>
+            )}
+          </div>
+
+          {/* Graph Stats */}
+          <div className="card-cream animate-fade-in-up delay-200">
+            <div className="caption-uppercase mb-3">Graph Statistics</div>
+            {[
+              { label: "Nodes", value: nodes.length, color: "#FF6B00" },
+              { label: "Edges", value: edges.length, color: "#0072CE" },
+              { label: "Avg Degree", value: (edges.length * 2 / nodes.length).toFixed(1), color: "#5db8a6" },
+              { label: "Entity Types", value: new Set(nodes.map(n => n.type)).size, color: "#cc785c" },
+              { label: "Hops", value: hops, color: "#002B49" },
+            ].map((s, i) => (
+              <div key={i} className="flex justify-between items-center py-2.5"
+                style={{ borderBottom: i < 4 ? "1px solid var(--color-hairline-soft)" : "none" }}>
+                <span className="body-sm">{s.label}</span>
+                <span className="title-sm" style={{ fontFamily: "var(--font-mono)", color: s.color }}>{s.value}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Legend */}
+          <div className="card animate-fade-in-up delay-300" style={{ padding: "20px" }}>
+            <div className="caption-uppercase mb-3">Entity Types</div>
+            <div className="grid grid-cols-2 gap-2">
+              {Object.entries(TYPE_COLORS).map(([type, color]) => (
+                <div key={type} className="flex items-center gap-2">
+                  <div className="w-3 h-3 rounded-full" style={{ background: color }} />
+                  <span className="body-sm">{type}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Reasoning Steps */}
+      <div className="card mt-8 animate-fade-in-up delay-400">
+        <div className="title-lg mb-6">🧠 Graph Reasoning Path</div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {reasoning.map((step, i) => (
+            <div key={i} className="card-cream" style={{ padding: "20px", position: "relative" }}>
+              <div style={{
+                position: "absolute", top: "12px", right: "12px",
+                fontFamily: "var(--font-mono)", fontSize: "0.6875rem",
+                color: "var(--color-tiger-orange)", fontWeight: 600,
+              }}>
+                Step {i + 1}
+              </div>
+              <p className="body-sm" style={{ color: "var(--color-body)", lineHeight: 1.6 }}>
+                {step}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/home/BentoShowcase.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+
+export function BentoShowcase() {
+  return (
+    <section className="section">
+      <div className="container">
+        <div className="text-center mb-16">
+          <div className="caption-uppercase mb-3" style={{ color: "var(--color-tiger-orange)" }}>
+            The Dashboard
+          </div>
+          <h2 className="display-lg mb-4">Everything in one place</h2>
+          <p className="body-lg mx-auto" style={{ maxWidth: "520px", color: "var(--color-muted)" }}>
+            Six dedicated pages for every aspect of GraphRAG — from live comparisons to deep graph exploration.
+          </p>
+        </div>
+
+        <div className="bento-grid bento-grid-3">
+          {/* Large: Playground */}
+          <Link href="/playground" className="no-underline bento-span-2">
+            <div className="card-gradient-orange card-hover" style={{ padding: "40px", minHeight: "240px", cursor: "pointer" }}>
+              <div style={{ fontSize: "2rem", marginBottom: "12px" }}>⚡</div>
+              <h3 style={{ fontSize: "1.5rem", fontFamily: "var(--font-serif)", fontWeight: 400, color: "white", marginBottom: "8px" }}>
+                Live Playground
+              </h3>
+              <p style={{ color: "rgba(255,255,255,0.8)", fontSize: "0.9375rem", maxWidth: "400px" }}>
+                Ask any question and watch both pipelines race side-by-side.
+                Real-time token counting, cost tracking, and quality metrics.
+              </p>
+              <div className="flex gap-2 mt-4">
+                <span className="badge" style={{ background: "rgba(255,255,255,0.2)", color: "white", fontSize: "0.6875rem" }}>12 LLM Providers</span>
+                <span className="badge" style={{ background: "rgba(255,255,255,0.2)", color: "white", fontSize: "0.6875rem" }}>Adaptive Routing</span>
+              </div>
+            </div>
+          </Link>
+
+          {/* Small: Benchmarks */}
+          <Link href="/benchmarks" className="no-underline">
+            <div className="card-dark card-hover" style={{ padding: "32px", minHeight: "240px", cursor: "pointer" }}>
+              <div style={{ fontSize: "2rem", marginBottom: "12px" }}>📊</div>
+              <h3 className="title-lg" style={{ color: "var(--color-on-dark)", marginBottom: "8px" }}>
+                Benchmarks
+              </h3>
+              <p className="body-sm" style={{ color: "var(--color-on-dark-soft)" }}>
+                Run HotpotQA benchmarks with F1, EM, and radar charts.
+              </p>
+            </div>
+          </Link>
+
+          {/* Small: Graph Explorer */}
+          <Link href="/explorer" className="no-underline">
+            <div className="card card-hover" style={{ padding: "32px", minHeight: "220px", cursor: "pointer", borderColor: "#5db8a6" }}>
+              <div style={{ fontSize: "2rem", marginBottom: "12px" }}>🕸️</div>
+              <h3 className="title-lg" style={{ marginBottom: "8px" }}>
+                Graph Explorer
+              </h3>
+              <p className="body-sm" style={{ color: "var(--color-muted)" }}>
+                Interactive knowledge graph visualization with entity inspection.
+              </p>
+            </div>
+          </Link>
+
+          {/* Medium: Architecture */}
+          <Link href="/architecture" className="no-underline bento-span-2">
+            <div className="card-gradient-blue card-hover" style={{ padding: "40px", minHeight: "220px", cursor: "pointer" }}>
+              <div style={{ fontSize: "2rem", marginBottom: "12px" }}>🏗️</div>
+              <h3 style={{ fontSize: "1.375rem", fontFamily: "var(--font-serif)", fontWeight: 400, color: "white", marginBottom: "8px" }}>
+                Architecture Deep-Dive
+              </h3>
+              <p style={{ color: "rgba(255,255,255,0.75)", fontSize: "0.9375rem", maxWidth: "480px" }}>
+                Explore the 4-layer AI Factory model, GSQL queries, and how TigerGraph integrates with the LLM pipeline.
+              </p>
+              <div className="flex gap-2 mt-4">
+                <span className="badge" style={{ background: "rgba(255,255,255,0.15)", color: "white", fontSize: "0.6875rem" }}>4 Layers</span>
+                <span className="badge" style={{ background: "rgba(255,255,255,0.15)", color: "white", fontSize: "0.6875rem" }}>GSQL Queries</span>
+                <span className="badge" style={{ background: "rgba(255,255,255,0.15)", color: "white", fontSize: "0.6875rem" }}>Docker Ready</span>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

web/src/components/home/CTASection.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import Link from "next/link";
+
+export function CTASection() {
+  return (
+    <section style={{
+      background: "linear-gradient(135deg, #002B49 0%, #003D6B 50%, #002B49 100%)",
+      padding: "96px 0",
+      position: "relative",
+      overflow: "hidden",
+    }}>
+      {/* Decorative circles */}
+      <div style={{
+        position: "absolute", top: "-100px", right: "-100px",
+        width: "400px", height: "400px", borderRadius: "50%",
+        border: "1px solid rgba(255,107,0,0.1)",
+      }} />
+      <div style={{
+        position: "absolute", bottom: "-60px", left: "-60px",
+        width: "300px", height: "300px", borderRadius: "50%",
+        border: "1px solid rgba(255,107,0,0.08)",
+      }} />
+
+      <div className="container text-center" style={{ position: "relative" }}>
+        <div className="badge mb-6" style={{ background: "rgba(255,107,0,0.15)", color: "#FF6B00", fontSize: "0.75rem" }}>
+          Ready to explore?
+        </div>
+        <h2 style={{
+          fontFamily: "var(--font-serif)",
+          fontSize: "clamp(2rem, 4vw, 3.5rem)",
+          fontWeight: 400,
+          color: "white",
+          letterSpacing: "-1px",
+          lineHeight: 1.1,
+          marginBottom: "24px",
+        }}>
+          See the difference<br />graphs make
+        </h2>
+        <p style={{
+          fontSize: "1.125rem", color: "rgba(255,255,255,0.6)",
+          maxWidth: "480px", margin: "0 auto 40px",
+          lineHeight: 1.6,
+        }}>
+          Run a live comparison between Baseline RAG and GraphRAG.
+          Measure F1, tokens, cost, and latency — all in your browser.
+        </p>
+        <div className="flex flex-wrap gap-4 justify-center">
+          <Link href="/playground" className="btn btn-primary btn-lg no-underline">
+            Launch Playground →
+          </Link>
+          <a
+            href="https://github.com/MUTHUKUMARAN-K-1/graphrag-inference-hackathon"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-on-dark btn-lg no-underline"
+          >
+            ⭐ Star on GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

web/src/components/home/FeaturesSection.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+const FEATURES = [
+  {
+    icon: "🧠",
+    iconClass: "feature-icon-orange",
+    title: "Adaptive Query Router",
+    description: "Analyzes query complexity in real-time and routes simple questions to fast baseline RAG while directing multi-hop questions through the knowledge graph.",
+    tag: "Novel",
+    tagColor: "#FF6B00",
+  },
+  {
+    icon: "📋",
+    iconClass: "feature-icon-blue",
+    title: "Schema-Bounded Extraction",
+    description: "Constrains entity extraction to TigerGraph's schema, eliminating hallucinated node types and ensuring every extracted entity maps to a valid graph vertex.",
+    tag: "Novel",
+    tagColor: "#FF6B00",
+  },
+  {
+    icon: "🔑",
+    iconClass: "feature-icon-teal",
+    title: "Dual-Level Keywords",
+    description: "Extracts both high-level concepts and low-level entities from queries, enabling graph traversal at multiple granularity levels for richer context.",
+    tag: "Novel",
+    tagColor: "#FF6B00",
+  },
+  {
+    icon: "🔗",
+    iconClass: "feature-icon-amber",
+    title: "Graph Reasoning Paths",
+    description: "Traces explicit entity→relation→entity chains through TigerGraph, providing human-readable evidence paths that make LLM answers verifiable.",
+    tag: "Novel",
+    tagColor: "#FF6B00",
+  },
+  {
+    icon: "📊",
+    iconClass: "feature-icon-coral",
+    title: "Real-Time Cost Tracking",
+    description: "Measures tokens, latency, and USD cost per query for both pipelines simultaneously, with interactive projections at scale.",
+    tag: "Novel",
+    tagColor: "#FF6B00",
+  },
+  {
+    icon: "🌐",
+    iconClass: "feature-icon-blue",
+    title: "12 LLM Providers",
+    description: "Universal LLM layer supporting Claude, GPT-4, Gemini, Llama, Mistral, DeepSeek, Grok, Cohere, and more — swap providers with one parameter.",
+    tag: "Universal",
+    tagColor: "#0072CE",
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <section className="section" style={{ background: "var(--color-canvas)" }}>
+      <div className="container">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="caption-uppercase mb-3" style={{ color: "var(--color-tiger-orange)" }}>
+            What Makes It Different
+          </div>
+          <h2 className="display-lg mb-4">Five novel features,<br />one unified system</h2>
+          <p className="body-lg mx-auto" style={{ maxWidth: "560px", color: "var(--color-muted)" }}>
+            Each feature was designed to solve a specific GraphRAG challenge —
+            from query routing to cost optimization.
+          </p>
+        </div>
+
+        {/* Feature Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {FEATURES.map((feature, i) => (
+            <div
+              key={i}
+              className="card card-hover"
+              style={{ animationDelay: `${i * 0.1}s` }}
+            >
+              <div className={`feature-icon ${feature.iconClass}`}>
+                {feature.icon}
+              </div>
+              <div className="flex items-center gap-2 mb-3">
+                <h3 className="title-md">{feature.title}</h3>
+                <span className="badge" style={{
+                  background: `${feature.tagColor}15`,
+                  color: feature.tagColor,
+                  fontSize: "0.6875rem",
+                  padding: "2px 8px",
+                }}>
+                  {feature.tag}
+                </span>
+              </div>
+              <p className="body-sm" style={{ color: "var(--color-muted)" }}>
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

web/src/components/home/HowItWorks.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+const STEPS = [
+  {
+    number: "01",
+    title: "Query Enters the System",
+    description: "A natural language question arrives. The Adaptive Router analyzes complexity, entity count, and multi-hop indicators to classify the query.",
+    detail: "Complexity score: 0.0–1.0 | Types: bridge, comparison, factoid",
+    color: "#FF6B00",
+  },
+  {
+    number: "02",
+    title: "Dual Pipeline Activation",
+    description: "Both pipelines execute simultaneously: Baseline RAG (vector search → LLM) and GraphRAG (entity extraction → graph traversal → LLM).",
+    detail: "Schema-bounded extraction ensures valid entities | GSQL multi-hop traversal",
+    color: "#0072CE",
+  },
+  {
+    number: "03",
+    title: "Graph Traversal & Evidence",
+    description: "TigerGraph traces entity→relation→entity paths through the knowledge graph, collecting structured evidence that the LLM can follow.",
+    detail: "2-hop traversal | Reasoning paths | Dual-level keywords",
+    color: "#5db8a6",
+  },
+  {
+    number: "04",
+    title: "LLM Generation & Evaluation",
+    description: "Claude (or any of 12 providers) generates answers from the structured context. RAGAS evaluates F1, Exact Match, and quality metrics in real-time.",
+    detail: "Cost tracking | Token counting | Latency measurement",
+    color: "#cc785c",
+  },
+];
+
+export function HowItWorks() {
+  return (
+    <section className="section" style={{ background: "var(--color-surface-soft)" }}>
+      <div className="container">
+        <div className="text-center mb-16">
+          <div className="caption-uppercase mb-3" style={{ color: "var(--color-tiger-orange)" }}>
+            How It Works
+          </div>
+          <h2 className="display-lg mb-4">From query to answer<br />in four steps</h2>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {STEPS.map((step, i) => (
+            <div key={i} className="card card-hover" style={{ position: "relative", overflow: "hidden" }}>
+              {/* Step Number */}
+              <div style={{
+                position: "absolute", top: "-12px", right: "-8px",
+                fontFamily: "var(--font-serif)",
+                fontSize: "6rem",
+                fontWeight: 700,
+                color: step.color,
+                opacity: 0.06,
+                lineHeight: 1,
+              }}>
+                {step.number}
+              </div>
+
+              <div className="flex gap-4">
+                <div style={{
+                  width: "48px", height: "48px", borderRadius: "12px",
+                  background: `${step.color}12`,
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  fontFamily: "var(--font-mono)",
+                  fontWeight: 700, fontSize: "0.875rem",
+                  color: step.color,
+                  flexShrink: 0,
+                }}>
+                  {step.number}
+                </div>
+                <div>
+                  <h3 className="title-md mb-2">{step.title}</h3>
+                  <p className="body-sm mb-3" style={{ color: "var(--color-muted)" }}>
+                    {step.description}
+                  </p>
+                  <div style={{
+                    padding: "8px 12px",
+                    background: "var(--color-surface-soft)",
+                    borderRadius: "8px",
+                    fontFamily: "var(--font-mono)",
+                    fontSize: "0.75rem",
+                    color: "var(--color-muted)",
+                  }}>
+                    {step.detail}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

web/src/components/home/TestimonialsSection.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+const TESTIMONIALS = [
+  {
+    quote: "GraphRAG reduces token usage by routing simple queries to baseline while giving complex multi-hop questions the structured reasoning they need.",
+    label: "Adaptive Intelligence",
+    icon: "🧠",
+    metric: "40% fewer tokens on simple queries",
+    bg: "var(--color-canvas)",
+  },
+  {
+    quote: "Schema-bounded extraction ensures every entity maps to a valid TigerGraph vertex — no hallucinated node types, no broken traversals.",
+    label: "Graph Integrity",
+    icon: "📋",
+    metric: "Zero invalid entity types",
+    bg: "var(--color-surface-card)",
+  },
+  {
+    quote: "The reasoning path visualization shows exactly which graph edges were traversed, making every LLM answer traceable and verifiable.",
+    label: "Explainability",
+    icon: "🔗",
+    metric: "Full evidence chain per answer",
+    bg: "var(--color-canvas)",
+  },
+];
+
+export function TestimonialsSection() {
+  return (
+    <section className="section" style={{ background: "var(--color-surface-soft)" }}>
+      <div className="container">
+        <div className="text-center mb-12">
+          <div className="caption-uppercase mb-3" style={{ color: "var(--color-tiger-orange)" }}>
+            Key Insights
+          </div>
+          <h2 className="display-lg">Why graphs change the game</h2>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {TESTIMONIALS.map((t, i) => (
+            <div
+              key={i}
+              className="card card-hover"
+              style={{ background: t.bg }}
+            >
+              <div style={{ fontSize: "2rem", marginBottom: "16px" }}>{t.icon}</div>
+              <div className="caption-uppercase mb-2" style={{ color: "var(--color-tiger-orange)" }}>
+                {t.label}
+              </div>
+              <p className="body-md mb-4" style={{ color: "var(--color-body)" }}>
+                &ldquo;{t.quote}&rdquo;
+              </p>
+              <div style={{
+                padding: "8px 14px",
+                background: "var(--color-tiger-orange-light)",
+                borderRadius: "8px",
+                fontFamily: "var(--font-mono)",
+                fontSize: "0.8125rem",
+                fontWeight: 500,
+                color: "var(--color-tiger-orange)",
+              }}>
+                {t.metric}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

web/src/components/playground/PlaygroundContent.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
+  ResponsiveContainer, Legend,
+} from "recharts";
+
+interface PipelineResult {
+  answer: string;
+  tokens: number;
+  latencyMs: number;
+  costUsd: number;
+  entities: string[];
+  relations: string[];
+}
+
+interface ProviderInfo {
+  id: string;
+  name: string;
+  isLocal: boolean;
+  hasApiKey: boolean;
+  defaultModel: string;
+  models: { id: string; name: string; speed: string; quality: string }[];
+}
+
+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" },
+];
+
+const FALLBACK_PROVIDERS: ProviderInfo[] = [
+  { 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" }] },
+];
+
+export function PlaygroundContent() {
+  const [providers, setProviders] = useState<ProviderInfo[]>(FALLBACK_PROVIDERS);
+  const [loading, setLoading] = useState(false);
+  const [query, setQuery] = useState("");
+  const [provider, setProvider] = useState("anthropic");
+  const [model, setModel] = useState("");
+  const [adaptiveRouting, setAdaptiveRouting] = useState(true);
+  const [baseline, setBaseline] = useState<PipelineResult | null>(null);
+  const [graphrag, setGraphrag] = useState<PipelineResult | null>(null);
+  const [complexity, setComplexity] = useState(0);
+  const [queryType, setQueryType] = useState("");
+  const [recommended, setRecommended] = useState("");
+  const [demoMode, setDemoMode] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/providers").then(r => r.json()).then(d => {
+      if (d.providers) setProviders(d.providers);
+    }).catch(() => {});
+  }, []);
+
+  const selectedProvider = providers.find(p => p.id === provider) || providers[0];
+  const selectedModel = model || selectedProvider?.defaultModel || "";
+
+  const runComparison = async () => {
+    if (!query.trim()) return;
+    setLoading(true);
+    try {
+      const res = await fetch("/api/compare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query, adaptiveRouting, provider, model: selectedModel }),
+      });
+      const data = await res.json();
+      setBaseline(data.baseline);
+      setGraphrag(data.graphrag);
+      setComplexity(data.complexity ?? 0);
+      setQueryType(data.queryType ?? "");
+      setRecommended(data.recommended ?? "");
+      setDemoMode(data.demoMode ?? false);
+    } catch {
+      // silently fail
+    }
+    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) },
+  ] : [];
+
+  return (
+    <div>
+      {/* Provider Selection */}
+      <div className="card mb-6 animate-fade-in-up">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div>
+            <label className="caption mb-2 block">LLM Provider</label>
+            <select className="input" value={provider} onChange={e => { setProvider(e.target.value); setModel(""); }}>
+              {providers.map(p => (
+                <option key={p.id} value={p.id}>
+                  {p.isLocal ? "🦙 " : "☁️ "}{p.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="caption mb-2 block">Model</label>
+            <select className="input" value={selectedModel} onChange={e => setModel(e.target.value)}>
+              {selectedProvider?.models.map(m => (
+                <option key={m.id} value={m.id}>{m.name} ({m.speed}/{m.quality})</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex flex-col justify-end gap-2">
+            <label className="flex items-center gap-2 caption cursor-pointer">
+              <input type="checkbox" checked={adaptiveRouting}
+                onChange={e => setAdaptiveRouting(e.target.checked)}
+                className="w-4 h-4 accent-[#FF6B00] rounded" />
+              🧠 Adaptive Routing
+            </label>
+            {!selectedProvider?.hasApiKey && !selectedProvider?.isLocal && (
+              <span className="badge-outline" style={{ fontSize: "0.6875rem", alignSelf: "flex-start" }}>
+                Demo Mode — No API Key
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Query Input */}
+      <div className="card mb-6 animate-fade-in-up delay-100">
+        <div className="flex flex-col lg:flex-row gap-4">
+          <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?"
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); runComparison(); } }}
+              rows={3}
+              style={{ fontSize: "1.0625rem" }}
+            />
+          </div>
+          <div className="lg:w-56 flex flex-col gap-3 justify-end">
+            <button className="btn btn-primary btn-lg w-full" onClick={runComparison}
+              disabled={loading || !query.trim()}>
+              {loading ? (
+                <span className="flex items-center gap-2">
+                  <span className="animate-spin inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full" />
+                  Running…
+                </span>
+              ) : (
+                <>▶ Compare Pipelines</>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Example Questions */}
+        <div className="mt-5 pt-5" style={{ borderTop: "1px solid var(--color-hairline-soft)" }}>
+          <span className="caption mr-3">Try these:</span>
+          <div className="flex flex-wrap gap-2 mt-2">
+            {EXAMPLES.map((ex, i) => (
+              <button key={i} className="badge-outline cursor-pointer hover:bg-surface-soft transition-all"
+                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)}…
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Demo Mode Banner */}
+      {demoMode && baseline && (
+        <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.
+          </span>
+        </div>
+      )}
+
+      {/* Adaptive Routing Info */}
+      {recommended && !demoMode && (
+        <div className="card mb-6 animate-fade-in" style={{
+          padding: "14px 24px",
+          borderLeft: `4px solid ${recommended === "graphrag" ? "#FF6B00" : "#0072CE"}`,
+        }}>
+          <div className="flex items-center gap-3 flex-wrap">
+            <span className="badge-glow" style={{ fontSize: "0.6875rem" }}>🧠 Adaptive Router</span>
+            <span className="body-sm">
+              Complexity: <strong style={{ fontFamily: "var(--font-mono)" }}>{complexity.toFixed(2)}</strong>
+              <span style={{ color: "var(--color-muted)", margin: "0 8px" }}>·</span>
+              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"}
+              </strong>
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Results */}
+      {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 style={{
+                position: "absolute", top: "16px", right: "16px",
+                width: "8px", height: "8px", borderRadius: "50%",
+                background: "#0072CE",
+                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="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-label">Tokens</div>
+                </div>
+                <div>
+                  <div className="metric-value-sm" style={{ color: "#0072CE" }}>{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-label">Cost</div>
+                </div>
+              </div>
+            </div>
+
+            {/* GraphRAG Card */}
+            <div className="card pipeline-graphrag" style={{ position: "relative" }}>
+              <div style={{
+                position: "absolute", top: "16px", right: "16px",
+                width: "8px", height: "8px", borderRadius: "50%",
+                background: "#FF6B00",
+                boxShadow: "0 0 8px rgba(255,107,0,0.4)",
+              }} />
+              <div className="caption-uppercase mb-1" style={{ color: "#FF6B00" }}>Pipeline B</div>
+              <div className="title-lg mb-4">GraphRAG</div>
+              <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-label">Tokens</div>
+                </div>
+                <div>
+                  <div className="metric-value-sm" style={{ color: "#FF6B00" }}>{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-label">Cost</div>
+                </div>
+              </div>
+
+              {/* Entities & Relations */}
+              {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="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 && (
+                    <div className="mt-3">
+                      <div className="caption mb-1">Reasoning Path</div>
+                      {graphrag.relations.map((r, i) => (
+                        <div key={i} className="body-sm" style={{
+                          color: "var(--color-muted)", fontFamily: "var(--font-mono)",
+                          fontSize: "0.75rem", padding: "2px 0",
+                        }}>
+                          🔗 {r}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Comparison Chart */}
+          {chartData.length > 0 && (
+            <div className="card">
+              <div className="title-md mb-6">Side-by-Side Metrics</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} />
+                  <XAxis dataKey="name" tick={{ fill: "#6c6a64", fontSize: 13 }} />
+                  <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]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}