Add DashboardTabs controller + 4 tab panels

web/src/components/DashboardTabs.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { LiveCompare } from "./tabs/LiveCompare";
+import { Benchmark } from "./tabs/Benchmark";
+import { CostAnalysis } from "./tabs/CostAnalysis";
+import { GraphExplorer } from "./tabs/GraphExplorer";
+
+const TABS = [
+  { id: "live", label: "Live Compare", icon: "🔴", color: "#FF6B00" },
+  { id: "benchmark", label: "Benchmark", icon: "📊", color: "#0072CE" },
+  { id: "cost", label: "Cost Analysis", icon: "💰", color: "#cc785c" },
+  { id: "graph", label: "Graph Explorer", icon: "🕸️", color: "#5db8a6" },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export function DashboardTabs() {
+  const [active, setActive] = useState<TabId>("live");
+
+  return (
+    <section className="section-sm" style={{ background: "var(--color-surface-soft)" }}>
+      <div className="container">
+        {/* Tab bar */}
+        <div className="tab-bar mb-8">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              id={tab.id}
+              className={`tab-item ${active === tab.id ? "tab-item-active" : ""}`}
+              onClick={() => setActive(tab.id)}
+              style={
+                active === tab.id
+                  ? { borderBottom: `2px solid ${tab.color}` }
+                  : undefined
+              }
+            >
+              <span className="mr-2">{tab.icon}</span>
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Tab content */}
+        <div>
+          {active === "live" && <LiveCompare />}
+          {active === "benchmark" && <Benchmark />}
+          {active === "cost" && <CostAnalysis />}
+          {active === "graph" && <GraphExplorer />}
+        </div>
+      </div>
+    </section>
+  );
+}