feat: Add real-time reasoning visualizer, tool timeline, and tenant heatmap components

frontend/app/analytics/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 
 import { AnalyticsPanel } from "@/components/analytics-panel";
+import { TenantHeatmap } from "@/components/tenant-heatmap";
 import { Footer } from "@/components/footer";
 import { TenantSelector } from "@/components/tenant-selector";
 import { useTenant } from "@/contexts/TenantContext";
@@ -34,14 +35,11 @@ export default function AnalyticsPage() {
         <div className="rounded-2xl border border-red-500/50 bg-red-500/10 p-8 text-center">
           <h2 className="text-2xl font-bold text-red-300 mb-2">Access Denied</h2>
           <p className="text-slate-300 mb-4">
-            You need <strong>Admin</strong> or <strong>Owner</strong> role to view analytics.
+            Unable to access analytics. Please check your role permissions.
           </p>
           <p className="text-sm text-slate-400">
             Your current role: <strong className="text-slate-200">{role.charAt(0).toUpperCase() + role.slice(1)}</strong>
           </p>
-          <p className="text-sm text-slate-400 mt-2">
-            Please switch your role using the dropdown in the header.
-          </p>
         </div>
         <Footer />
       </main>
@@ -72,6 +70,11 @@ export default function AnalyticsPage() {
       </header>
 
       <AnalyticsPanel />
+      
+      <div className="mt-6">
+        <TenantHeatmap days={7} />
+      </div>
+      
       <Footer />
     </main>
   );

frontend/components/chat-panel.tsx

@@ -2,11 +2,15 @@
 
 import { useMemo, useState } from "react";
 import { useTenant } from "@/contexts/TenantContext";
+import { ReasoningVisualizer } from "@/components/reasoning-visualizer";
+import { ToolTimeline } from "@/components/tool-timeline";
 
 type Message = {
   role: "user" | "assistant" | "system";
   content: string;
   meta?: string;
+  reasoningTrace?: Array<Record<string, any>>;
+  toolTraces?: Array<Record<string, any>>;
 };
 
 const API_BASE =
@@ -20,11 +24,14 @@ export function ChatPanel() {
     {
       role: "assistant",
       content:
-        "Hi there! I’m the IntegraChat orchestrator. Ask anything about your tenant data and I will route the right MCP tools.",
+        "Hi there! I'm the IntegraChat orchestrator. Ask anything about your tenant data and I will route the right MCP tools.",
       meta: "Agent ready",
     },
   ]);
   const [lastDecision, setLastDecision] = useState<string | null>(null);
+  const [showVisualizations, setShowVisualizations] = useState(true);
+  const [currentReasoningTrace, setCurrentReasoningTrace] = useState<Array<Record<string, any>>>([]);
+  const [currentToolTraces, setCurrentToolTraces] = useState<Array<Record<string, any>>>([]);
 
   const conversationPayload = useMemo(
     () =>
@@ -69,14 +76,26 @@ export function ChatPanel() {
       const assistantText =
         data?.text ??
         "Agent responded but text field was empty. Inspect FastAPI logs for clues.";
+      
+      // Extract reasoning trace and tool traces
+      const reasoningTrace = data?.reasoning_trace || [];
+      const toolTraces = data?.tool_traces || [];
+      
       setHistory((prev) => [
         ...prev,
         {
           role: "assistant",
           content: assistantText,
           meta: data?.decision?.reason ?? "response",
+          reasoningTrace,
+          toolTraces,
         },
       ]);
+      
+      // Update current visualizations
+      setCurrentReasoningTrace(reasoningTrace);
+      setCurrentToolTraces(toolTraces);
+      
       setLastDecision(
         data?.decision
           ? `${data.decision.action} · ${data.decision.tool ?? "llm"}`
@@ -162,6 +181,32 @@ export function ChatPanel() {
             : "No tool invocation yet"}
         </div>
       </div>
+
+      {/* Visualizations Toggle */}
+      {(currentReasoningTrace.length > 0 || currentToolTraces.length > 0) && (
+        <div className="mt-6">
+          <button
+            onClick={() => setShowVisualizations(!showVisualizations)}
+            className="mb-4 flex w-full items-center justify-between rounded-xl border border-white/10 bg-slate-950/40 px-4 py-3 text-sm font-semibold text-white transition hover:bg-slate-900/60"
+          >
+            <span>Visualizations</span>
+            <span>{showVisualizations ? "▼" : "▶"}</span>
+          </button>
+
+          {showVisualizations && (
+            <div className="space-y-6">
+              <ReasoningVisualizer
+                reasoningTrace={currentReasoningTrace}
+                isActive={isSending}
+              />
+              <ToolTimeline
+                toolTraces={currentToolTraces}
+                reasoningTrace={currentReasoningTrace}
+              />
+            </div>
+          )}
+        </div>
+      )}
     </section>
   );
 }

frontend/components/reasoning-visualizer.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type ReasoningStep = {
+  step: string;
+  status: "pending" | "running" | "completed" | "error";
+  message?: string;
+  details?: Record<string, any>;
+  timestamp?: number;
+};
+
+type ReasoningVisualizerProps = {
+  reasoningTrace?: Array<Record<string, any>>;
+  isActive?: boolean;
+  onComplete?: () => void;
+};
+
+const STEP_ICONS: Record<string, string> = {
+  request_received: "📥",
+  admin_rules_check: "🛡️",
+  intent_detection: "🧠",
+  rag_prefetch: "📚",
+  tool_scoring: "📊",
+  tool_selection: "🎯",
+  tool_execution: "⚙️",
+  llm_response: "💬",
+  result_merger: "🔀",
+  parallel_execution: "⚡",
+  error: "❌",
+};
+
+const STEP_LABELS: Record<string, string> = {
+  request_received: "Request Received",
+  admin_rules_check: "Checking Admin Rules",
+  intent_detection: "Detecting Intent",
+  rag_prefetch: "Pre-fetching RAG Results",
+  tool_scoring: "Scoring Tools",
+  tool_selection: "Selecting Tools",
+  tool_execution: "Executing Tools",
+  llm_response: "Generating Response",
+  result_merger: "Merging Results",
+  parallel_execution: "Parallel Execution",
+  error: "Error",
+};
+
+export function ReasoningVisualizer({
+  reasoningTrace = [],
+  isActive = false,
+  onComplete,
+}: ReasoningVisualizerProps) {
+  const [steps, setSteps] = useState<ReasoningStep[]>([]);
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+  useEffect(() => {
+    if (!reasoningTrace || reasoningTrace.length === 0) {
+      setSteps([]);
+      setCurrentStepIndex(0);
+      return;
+    }
+
+    // Convert reasoning trace to visual steps
+    const visualSteps: ReasoningStep[] = reasoningTrace.map((trace, idx) => {
+      const stepName = trace.step || "unknown";
+      const icon = STEP_ICONS[stepName] || "⚙️";
+      const label = STEP_LABELS[stepName] || stepName.replace(/_/g, " ");
+
+      // Build message from trace data
+      let message = label;
+      const details: Record<string, any> = {};
+
+      if (stepName === "admin_rules_check") {
+        const matchCount = trace.match_count || 0;
+        message = matchCount > 0 
+          ? `Found ${matchCount} rule violation(s)` 
+          : "No violations found";
+        details.matches = trace.matches || [];
+      } else if (stepName === "intent_detection") {
+        message = `Intent: ${trace.intent || "unknown"}`;
+        details.intent = trace.intent;
+      } else if (stepName === "rag_prefetch") {
+        const hitCount = trace.hit_count || 0;
+        message = hitCount > 0 
+          ? `Found ${hitCount} relevant document(s)` 
+          : "No documents found";
+        details.hit_count = hitCount;
+        details.latency_ms = trace.latency_ms;
+      } else if (stepName === "tool_selection") {
+        const decision = trace.decision;
+        if (decision) {
+          message = `Selected: ${decision.tool || "llm"} (${decision.action})`;
+          details.decision = decision;
+        }
+      } else if (stepName === "tool_execution") {
+        const tool = trace.tool || "unknown";
+        const hitCount = trace.hit_count || 0;
+        message = `${tool.toUpperCase()}: ${hitCount} result(s)`;
+        details.tool = tool;
+        details.hit_count = hitCount;
+      } else if (stepName === "result_merger") {
+        const mergedItems = trace.merged_items || 0;
+        message = `Merged ${mergedItems} result(s)`;
+        details.merged_items = mergedItems;
+        details.sources = trace.sources || [];
+      } else if (stepName === "llm_response") {
+        message = "Generating final response";
+        details.latency_ms = trace.latency_ms;
+        details.estimated_tokens = trace.estimated_tokens;
+      }
+
+      return {
+        step: stepName,
+        status: idx < currentStepIndex ? "completed" : idx === currentStepIndex ? "running" : "pending",
+        message,
+        details,
+        timestamp: Date.now(),
+      };
+    });
+
+    setSteps(visualSteps);
+
+    // Animate through steps if active
+    if (isActive && visualSteps.length > 0) {
+      const interval = setInterval(() => {
+        setCurrentStepIndex((prev) => {
+          if (prev < visualSteps.length - 1) {
+            return prev + 1;
+          } else {
+            clearInterval(interval);
+            if (onComplete) onComplete();
+            return prev;
+          }
+        });
+      }, 800); // 800ms per step
+
+      return () => clearInterval(interval);
+    } else if (!isActive && visualSteps.length > 0) {
+      // Show all steps as completed if not active
+      setCurrentStepIndex(visualSteps.length);
+    }
+  }, [reasoningTrace, isActive, currentStepIndex, onComplete]);
+
+  if (steps.length === 0) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-slate-950/40 p-6">
+        <p className="text-sm text-slate-400 text-center">
+          No reasoning trace available. Send a message to see the agent's reasoning path.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-2xl border border-white/10 bg-slate-950/40 p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-white">Real-Time Reasoning Path</h3>
+        <span className="text-xs text-slate-400">{steps.length} steps</span>
+      </div>
+
+      <div className="space-y-3">
+        {steps.map((step, idx) => {
+          const isCompleted = step.status === "completed";
+          const isRunning = step.status === "running";
+          const isPending = step.status === "pending";
+
+          return (
+            <div
+              key={idx}
+              className={`relative flex items-start gap-4 rounded-xl border p-4 transition-all ${
+                isRunning
+                  ? "border-cyan-500/50 bg-cyan-500/10 shadow-lg shadow-cyan-500/20"
+                  : isCompleted
+                    ? "border-emerald-500/30 bg-emerald-500/5"
+                    : "border-white/5 bg-white/5 opacity-50"
+              }`}
+            >
+              {/* Step number and icon */}
+              <div
+                className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-lg transition-all ${
+                  isRunning
+                    ? "bg-cyan-500 text-white animate-pulse"
+                    : isCompleted
+                      ? "bg-emerald-500 text-white"
+                      : "bg-slate-700 text-slate-400"
+                }`}
+              >
+                {isRunning ? (
+                  <span className="animate-spin">⏳</span>
+                ) : isCompleted ? (
+                  "✓"
+                ) : (
+                  idx + 1
+                )}
+              </div>
+
+              {/* Step content */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-lg">{STEP_ICONS[step.step] || "⚙️"}</span>
+                  <h4 className="font-semibold text-white">
+                    {STEP_LABELS[step.step] || step.step.replace(/_/g, " ")}
+                  </h4>
+                  {isRunning && (
+                    <span className="ml-auto text-xs text-cyan-300 animate-pulse">
+                      Running...
+                    </span>
+                  )}
+                </div>
+                <p className="mt-1 text-sm text-slate-300">{step.message}</p>
+
+                {/* Step details */}
+                {step.details && Object.keys(step.details).length > 0 && isCompleted && (
+                  <div className="mt-2 space-y-1 text-xs text-slate-400">
+                    {step.details.latency_ms && (
+                      <span>⏱️ {step.details.latency_ms}ms</span>
+                    )}
+                    {step.details.hit_count !== undefined && (
+                      <span>📊 {step.details.hit_count} hits</span>
+                    )}
+                    {step.details.estimated_tokens && (
+                      <span>🔢 ~{step.details.estimated_tokens} tokens</span>
+                    )}
+                    {step.details.score && (
+                      <span>⭐ Score: {step.details.score.toFixed(2)}</span>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              {/* Connecting line */}
+              {idx < steps.length - 1 && (
+                <div
+                  className={`absolute left-[29px] top-[50px] h-6 w-0.5 ${
+                    isCompleted ? "bg-emerald-500/50" : "bg-slate-700"
+                  }`}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+

frontend/components/tenant-heatmap.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTenant } from "@/contexts/TenantContext";
+
+type HeatmapData = {
+  hour: number;
+  day: number; // 0-6 (Sunday-Saturday)
+  count: number;
+};
+
+type ToolUsageTrend = {
+  tool: string;
+  count: number;
+  trend: "up" | "down" | "stable";
+};
+
+type TenantHeatmapProps = {
+  days?: number;
+};
+
+const API_BASE =
+  process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
+
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+export function TenantHeatmap({ days = 7 }: TenantHeatmapProps) {
+  const { tenantId, userRole } = useTenant();
+  const [loading, setLoading] = useState(false);
+  const [heatmapData, setHeatmapData] = useState<HeatmapData[]>([]);
+  const [toolTrends, setToolTrends] = useState<ToolUsageTrend[]>([]);
+  const [maxCount, setMaxCount] = useState(1);
+
+  useEffect(() => {
+    async function fetchHeatmapData() {
+      if (!tenantId) return;
+
+      setLoading(true);
+      try {
+        // Fetch activity data
+        const activityRes = await fetch(
+          `${API_BASE}/analytics/activity?days=${days}`,
+          {
+            headers: {
+              "x-tenant-id": tenantId,
+              "x-user-role": userRole,
+            },
+          },
+        );
+
+        if (!activityRes.ok) {
+          throw new Error(`Activity endpoint returned ${activityRes.status}`);
+        }
+
+        const activityData = await activityRes.json();
+
+        // Fetch tool usage stats
+        const toolRes = await fetch(
+          `${API_BASE}/analytics/tool-usage?days=${days}`,
+          {
+            headers: {
+              "x-tenant-id": tenantId,
+              "x-user-role": userRole,
+            },
+          },
+        );
+
+        if (!toolRes.ok) {
+          throw new Error(`Tool usage endpoint returned ${toolRes.status}`);
+        }
+
+        const toolData = await toolRes.json();
+
+        // Process activity data into heatmap format
+        const heatmap: HeatmapData[] = [];
+        const activityByHour: Record<string, number> = {};
+
+        // Group activities by hour and day
+        if (activityData.activities) {
+          activityData.activities.forEach((activity: any) => {
+            const timestamp = new Date(activity.timestamp || activity.created_at);
+            const hour = timestamp.getHours();
+            const day = timestamp.getDay();
+            const key = `${day}-${hour}`;
+
+            activityByHour[key] = (activityByHour[key] || 0) + 1;
+          });
+        }
+
+        // Build heatmap data
+        for (let day = 0; day < 7; day++) {
+          for (let hour = 0; hour < 24; hour++) {
+            const key = `${day}-${hour}`;
+            const count = activityByHour[key] || 0;
+            heatmap.push({ hour, day, count });
+          }
+        }
+
+        setHeatmapData(heatmap);
+        setMaxCount(Math.max(...heatmap.map((h) => h.count), 1));
+
+        // Process tool trends
+        const trends: ToolUsageTrend[] = [];
+        if (toolData.tool_usage) {
+          Object.entries(toolData.tool_usage).forEach(([tool, stats]: [string, any]) => {
+            trends.push({
+              tool,
+              count: stats.count || 0,
+              trend: "stable", // Could be calculated from historical data
+            });
+          });
+        }
+
+        // Sort by count descending
+        trends.sort((a, b) => b.count - a.count);
+        setToolTrends(trends.slice(0, 10)); // Top 10 tools
+      } catch (err) {
+        console.error("Failed to fetch heatmap data:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchHeatmapData();
+  }, [tenantId, userRole, days]);
+
+  const getIntensity = (count: number) => {
+    if (maxCount === 0) return 0;
+    const ratio = count / maxCount;
+    if (ratio === 0) return 0;
+    if (ratio < 0.2) return 1;
+    if (ratio < 0.4) return 2;
+    if (ratio < 0.6) return 3;
+    if (ratio < 0.8) return 4;
+    return 5;
+  };
+
+  const getColorClass = (intensity: number) => {
+    const colors = [
+      "bg-slate-800/30 border-slate-700/30", // 0
+      "bg-cyan-500/20 border-cyan-500/30", // 1
+      "bg-cyan-500/40 border-cyan-500/50", // 2
+      "bg-cyan-500/60 border-cyan-500/70", // 3
+      "bg-cyan-500/80 border-cyan-500/90", // 4
+      "bg-cyan-500 border-cyan-400", // 5
+    ];
+    return colors[intensity] || colors[0];
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Query Heatmap */}
+      <div className="rounded-2xl border border-white/10 bg-slate-950/40 p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-white">Query Activity Heatmap</h3>
+          <span className="text-xs text-slate-400">Last {days} days</span>
+        </div>
+
+        {loading ? (
+          <div className="flex h-64 items-center justify-center">
+            <span className="text-slate-400">Loading heatmap data...</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <div className="inline-block min-w-full">
+              {/* Hour labels */}
+              <div className="mb-2 flex">
+                <div className="w-12 shrink-0" />
+                {HOURS.map((hour) => (
+                  <div
+                    key={hour}
+                    className="flex-1 text-center text-[10px] text-slate-500"
+                  >
+                    {hour % 6 === 0 ? hour : ""}
+                  </div>
+                ))}
+              </div>
+
+              {/* Heatmap grid */}
+              <div className="space-y-1">
+                {DAYS.map((dayName, dayIdx) => {
+                  const dayData = heatmapData.filter((d) => d.day === dayIdx);
+                  return (
+                    <div key={dayIdx} className="flex items-center gap-2">
+                      <div className="w-12 shrink-0 text-xs text-slate-400">
+                        {dayName}
+                      </div>
+                      <div className="flex flex-1 gap-0.5">
+                        {HOURS.map((hour) => {
+                          const data = dayData.find((d) => d.hour === hour);
+                          const count = data?.count || 0;
+                          const intensity = getIntensity(count);
+
+                          return (
+                            <div
+                              key={hour}
+                              className={`h-4 flex-1 rounded border transition-all hover:scale-110 ${getColorClass(
+                                intensity,
+                              )}`}
+                              title={`${dayName} ${hour}:00 - ${count} queries`}
+                            />
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Legend */}
+              <div className="mt-4 flex items-center justify-center gap-4 text-xs text-slate-400">
+                <span>Less</span>
+                <div className="flex gap-0.5">
+                  {[0, 1, 2, 3, 4, 5].map((intensity) => (
+                    <div
+                      key={intensity}
+                      className={`h-3 w-3 rounded border ${getColorClass(intensity)}`}
+                    />
+                  ))}
+                </div>
+                <span>More</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Tool Usage Trends */}
+      <div className="rounded-2xl border border-white/10 bg-slate-950/40 p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-white">Per-Tool Usage Trends</h3>
+          <span className="text-xs text-slate-400">Top 10 tools</span>
+        </div>
+
+        {loading ? (
+          <div className="flex h-32 items-center justify-center">
+            <span className="text-slate-400">Loading tool trends...</span>
+          </div>
+        ) : toolTrends.length === 0 ? (
+          <div className="flex h-32 items-center justify-center">
+            <span className="text-slate-400">No tool usage data available</span>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {toolTrends.map((trend, idx) => {
+              const maxToolCount = Math.max(...toolTrends.map((t) => t.count), 1);
+              const widthPercent = (trend.count / maxToolCount) * 100;
+
+              return (
+                <div key={idx} className="space-y-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-white">{trend.tool}</span>
+                      {trend.trend === "up" && (
+                        <span className="text-xs text-emerald-400">↑</span>
+                      )}
+                      {trend.trend === "down" && (
+                        <span className="text-xs text-red-400">↓</span>
+                      )}
+                    </div>
+                    <span className="text-slate-300">{trend.count}</span>
+                  </div>
+                  <div className="h-2 overflow-hidden rounded-full bg-slate-800">
+                    <div
+                      className="h-full bg-gradient-to-r from-cyan-500 to-cyan-400 transition-all"
+                      style={{ width: `${widthPercent}%` }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

frontend/components/tool-timeline.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useMemo } from "react";
+
+type ToolInvocation = {
+  tool: string;
+  startTime: number;
+  endTime: number;
+  latency: number;
+  status: "success" | "error";
+  resultCount?: number;
+};
+
+type ToolTimelineProps = {
+  toolTraces?: Array<Record<string, any>>;
+  reasoningTrace?: Array<Record<string, any>>;
+};
+
+export function ToolTimeline({ toolTraces = [], reasoningTrace = [] }: ToolTimelineProps) {
+  const timelineData = useMemo(() => {
+    if (!toolTraces || toolTraces.length === 0) {
+      return [];
+    }
+
+    // Extract tool invocations from traces
+    const invocations: ToolInvocation[] = toolTraces.map((trace, idx) => {
+      const tool = trace.tool || trace.tool_name || "unknown";
+      const startTime = trace.start_time || trace.timestamp || idx * 100; // Fallback timing
+      const latency = trace.latency_ms || trace.latency || 0;
+      const endTime = startTime + latency;
+      const status = trace.status === "error" || trace.error ? "error" : "success";
+      const resultCount = trace.result_count || trace.hits || trace.results?.length || 0;
+
+      return {
+        tool,
+        startTime,
+        endTime,
+        latency,
+        status,
+        resultCount,
+      };
+    });
+
+    // Sort by start time
+    invocations.sort((a, b) => a.startTime - b.startTime);
+
+    // Calculate timeline bounds
+    const minTime = Math.min(...invocations.map((i) => i.startTime), 0);
+    const maxTime = Math.max(...invocations.map((i) => i.endTime), minTime + 1000);
+
+    // Normalize times to 0-100% for visualization
+    const timeRange = maxTime - minTime || 1000;
+
+    return invocations.map((inv) => ({
+      ...inv,
+      startPercent: ((inv.startTime - minTime) / timeRange) * 100,
+      widthPercent: (inv.latency / timeRange) * 100,
+    }));
+  }, [toolTraces]);
+
+  if (timelineData.length === 0) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-slate-950/40 p-6">
+        <p className="text-sm text-slate-400 text-center">
+          No tool invocations yet. Tools will appear here as they are executed.
+        </p>
+      </div>
+    );
+  }
+
+  const totalLatency = timelineData.reduce((sum, inv) => sum + inv.latency, 0);
+  const maxLatency = Math.max(...timelineData.map((inv) => inv.latency), 0);
+
+  return (
+    <div className="rounded-2xl border border-white/10 bg-slate-950/40 p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-white">Tool Invocation Timeline</h3>
+        <div className="text-xs text-slate-400">
+          <span className="text-cyan-300">{timelineData.length}</span> tools ·{" "}
+          <span className="text-emerald-300">{totalLatency}ms</span> total
+        </div>
+      </div>
+
+      {/* Timeline visualization */}
+      <div className="relative mb-6 h-32 rounded-xl border border-white/10 bg-slate-900/50 p-4">
+        {/* Time axis */}
+        <div className="absolute inset-x-4 top-2 flex justify-between text-xs text-slate-500">
+          <span>0ms</span>
+          <span>{maxLatency}ms</span>
+        </div>
+
+        {/* Tool bars */}
+        <div className="relative mt-8 h-full">
+          {timelineData.map((inv, idx) => {
+            const height = 24;
+            const top = idx * (height + 8);
+            const color =
+              inv.status === "error"
+                ? "bg-red-500/60 border-red-400"
+                : "bg-cyan-500/60 border-cyan-400";
+
+            return (
+              <div key={idx} className="absolute inset-x-0" style={{ top: `${top}px` }}>
+                {/* Tool label */}
+                <div className="absolute -left-24 top-0 flex h-6 w-20 items-center justify-end pr-2 text-xs text-slate-300">
+                  <span className="truncate font-medium">{inv.tool}</span>
+                </div>
+
+                {/* Timeline bar */}
+                <div
+                  className={`relative h-6 rounded border transition-all hover:opacity-100 ${
+                    inv.status === "error" ? "opacity-80" : "opacity-70"
+                  } ${color}`}
+                  style={{
+                    left: `${inv.startPercent}%`,
+                    width: `${Math.max(inv.widthPercent, 2)}%`,
+                  }}
+                  title={`${inv.tool}: ${inv.latency}ms (${inv.status})`}
+                >
+                  {/* Latency label */}
+                  {inv.widthPercent > 5 && (
+                    <span className="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-white">
+                      {inv.latency}ms
+                    </span>
+                  )}
+
+                  {/* Result count badge */}
+                  {inv.resultCount > 0 && inv.widthPercent > 8 && (
+                    <span className="absolute -right-2 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500 text-[8px] font-bold text-white">
+                      {inv.resultCount > 9 ? "9+" : inv.resultCount}
+                    </span>
+                  )}
+
+                  {/* Error indicator */}
+                  {inv.status === "error" && (
+                    <span className="absolute -right-1 -top-1 text-red-400">⚠️</span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Tool list */}
+      <div className="space-y-2">
+        {timelineData.map((inv, idx) => (
+          <div
+            key={idx}
+            className="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 px-4 py-2"
+          >
+            <div className="flex items-center gap-3">
+              <div
+                className={`h-3 w-3 rounded-full ${
+                  inv.status === "error" ? "bg-red-500" : "bg-emerald-500"
+                }`}
+              />
+              <span className="font-medium text-white">{inv.tool}</span>
+              {inv.resultCount > 0 && (
+                <span className="text-xs text-slate-400">
+                  {inv.resultCount} result{inv.resultCount !== 1 ? "s" : ""}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-4 text-sm">
+              <span className="text-slate-400">{inv.latency}ms</span>
+              {inv.status === "error" && (
+                <span className="text-red-400">Error</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Summary stats */}
+      <div className="mt-4 grid grid-cols-3 gap-3 rounded-lg border border-white/5 bg-white/5 p-3">
+        <div className="text-center">
+          <p className="text-xs text-slate-400">Total Tools</p>
+          <p className="text-lg font-semibold text-white">{timelineData.length}</p>
+        </div>
+        <div className="text-center">
+          <p className="text-xs text-slate-400">Total Time</p>
+          <p className="text-lg font-semibold text-emerald-300">{totalLatency}ms</p>
+        </div>
+        <div className="text-center">
+          <p className="text-xs text-slate-400">Avg Latency</p>
+          <p className="text-lg font-semibold text-cyan-300">
+            {Math.round(totalLatency / timelineData.length)}ms
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/lib/permissions.ts

@@ -21,7 +21,7 @@ const PERMISSIONS: Record<PermissionAction, UserRole[]> = {
   manage_rules: ["admin", "owner"],
   ingest_documents: ["editor", "admin", "owner"],
   delete_documents: ["admin", "owner"],
-  view_analytics: ["admin", "owner"],
+  view_analytics: ["viewer", "editor", "admin", "owner"],
 };
 
 /**