feat: analytics tab with timeline waterfall, cost breakdown, token gauge

apps/web/src/components/trace-detail.tsx

@@ -21,9 +21,10 @@ import {
 } from "lucide-react";
 import { cn, formatDuration, formatRelativeTime } from "@/lib/utils";
 import { DecisionTree } from "./decision-tree";
+import { TraceAnalytics } from "./trace-analytics";
 
 type TraceStatus = "RUNNING" | "COMPLETED" | "ERROR";
-type TabType = "tree" | "decisions" | "spans" | "events";
+type TabType = "tree" | "analytics" | "decisions" | "spans" | "events";
 
 interface DecisionPoint {
   id: string;
@@ -253,6 +254,12 @@ export function TraceDetail({
             icon={GitBranch}
             label="Tree"
           />
+          <TabButton
+            active={activeTab === "analytics"}
+            onClick={() => setActiveTab("analytics")}
+            icon={Activity}
+            label="Analytics"
+          />
           <TabButton
             active={activeTab === "decisions"}
             onClick={() => setActiveTab("decisions")}
@@ -284,6 +291,14 @@ export function TraceDetail({
             events={events}
           />
         )}
+        {activeTab === "analytics" && (
+          <TraceAnalytics
+            trace={trace}
+            spans={spans}
+            decisionPoints={decisionPoints}
+            events={events}
+          />
+        )}
         {activeTab === "decisions" && (
           <DecisionsTab decisionPoints={decisionPoints} />
         )}