feat(dashboard): add SSE live updates and enhanced Gateway Overview UI

- Add /api/dashboard/stream/stats SSE endpoint for real-time streaming
- Create useLiveStats hook with EventSource for instant updates
- Redesign Gateway Overview with dark theme and glassmorphism
- Add live connection status indicator (Connected/Disconnected)
- Display uptime, requests, tokens, error rate in hero section
- Add latency progress bar with P50/P95/P99 percentiles
- Animated gradient backgrounds and hover effects

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

dashboard/src/app/page.tsx

@@ -6,42 +6,184 @@ import { StatsCards } from '@/components/dashboard/StatsCards';
 import { RequestsChart } from '@/components/charts/RequestsChart';
 import { LatencyChart } from '@/components/charts/LatencyChart';
 import { TokenUsageChart } from '@/components/charts/TokenUsageChart';
-import { useStats, useMetrics } from '@/hooks/useMetrics';
-import { ArrowRight, Sparkles } from 'lucide-react';
+import { useLiveStats, useMetrics, useHealth } from '@/hooks/useMetrics';
+import { ArrowRight, Sparkles, Activity, Zap, Shield, Clock, Server, Wifi, WifiOff } from 'lucide-react';
+
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+  
+  if (days > 0) return `${days}d ${hours}h ${mins}m`;
+  if (hours > 0) return `${hours}h ${mins}m ${secs}s`;
+  if (mins > 0) return `${mins}m ${secs}s`;
+  return `${secs}s`;
+}
+
+function formatNumber(num: number): string {
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
 
 export default function DashboardPage() {
-  const { data: stats, isLoading: statsLoading } = useStats();
+  const { data: stats, isLoading: statsLoading } = useLiveStats();
   const { data: metrics } = useMetrics();
+  const { data: health } = useHealth();
+
+  const isConnected = health?.status === 'healthy';
+  const totalTokens = (stats?.total_input_tokens ?? 0) + (stats?.total_output_tokens ?? 0);
 
   return (
     <div className="space-y-8 animate-fade-in">
-      {/* Hero Section */}
-      <div className="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/10 via-chart-5/10 to-chart-2/10 p-8 shadow-xl hover:shadow-2xl transition-all duration-500 glow">
-        {/* Animated background pattern */}
-        <div className="absolute inset-0 bg-grid-white/5" />
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-chart-5/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
-
-        {/* Floating orbs */}
-        <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl animate-pulse" />
-        <div className="absolute bottom-0 left-0 w-48 h-48 bg-chart-5/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
-
-        <div className="relative">
-          <div className="flex items-center gap-2 animate-slide-up">
-            <Sparkles className="h-5 w-5 text-primary animate-pulse" />
-            <Badge variant="outline" className="bg-primary/10 text-primary border-primary/20 font-semibold shadow-lg">
-              <span className="relative flex h-2 w-2 mr-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
-              </span>
-              Live Monitoring
-            </Badge>
+      {/* Hero Section - Enhanced Gateway Overview */}
+      <div className="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-8 shadow-2xl border border-white/10">
+        {/* Animated grid background */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
+        
+        {/* Animated gradient orbs */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute bottom-0 left-0 w-80 h-80 bg-gradient-to-tr from-emerald-500/20 to-cyan-500/20 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-pink-500/10 to-orange-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
+        
+        {/* Content */}
+        <div className="relative z-10">
+          {/* Top row - Status and Live indicator */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-3">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg shadow-blue-500/25">
+                <Server className="h-6 w-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold text-white tracking-tight">Gateway Overview</h1>
+                <p className="text-sm text-slate-400">Real-time monitoring dashboard</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              {/* Connection Status */}
+              <div className={`flex items-center gap-2 px-4 py-2 rounded-full ${isConnected ? 'bg-emerald-500/10 border border-emerald-500/20' : 'bg-red-500/10 border border-red-500/20'}`}>
+                {isConnected ? (
+                  <>
+                    <Wifi className="h-4 w-4 text-emerald-400" />
+                    <span className="text-sm font-medium text-emerald-400">Connected</span>
+                  </>
+                ) : (
+                  <>
+                    <WifiOff className="h-4 w-4 text-red-400" />
+                    <span className="text-sm font-medium text-red-400">Disconnected</span>
+                  </>
+                )}
+              </div>
+              
+              {/* Live indicator */}
+              <Badge className="bg-gradient-to-r from-blue-500 to-purple-500 border-0 text-white font-semibold px-4 py-2 shadow-lg shadow-blue-500/25">
+                <span className="relative flex h-2 w-2 mr-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
+                </span>
+                LIVE
+              </Badge>
+            </div>
+          </div>
+
+          {/* Main Stats Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            {/* Uptime */}
+            <div className="group/card relative overflow-hidden rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10 p-4 hover:bg-white/10 transition-all duration-300">
+              <div className="flex items-center gap-3 mb-2">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/20">
+                  <Clock className="h-5 w-5 text-emerald-400" />
+                </div>
+                <span className="text-xs font-medium text-slate-400 uppercase tracking-wider">Uptime</span>
+              </div>
+              <div className="text-2xl font-bold text-white font-mono">
+                {statsLoading ? (
+                  <div className="h-8 w-24 bg-white/10 rounded animate-pulse" />
+                ) : (
+                  formatUptime(stats?.uptime_seconds ?? 0)
+                )}
+              </div>
+            </div>
+
+            {/* Requests */}
+            <div className="group/card relative overflow-hidden rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10 p-4 hover:bg-white/10 transition-all duration-300">
+              <div className="flex items-center gap-3 mb-2">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/20">
+                  <Activity className="h-5 w-5 text-blue-400" />
+                </div>
+                <span className="text-xs font-medium text-slate-400 uppercase tracking-wider">Requests</span>
+              </div>
+              <div className="text-2xl font-bold text-white font-mono">
+                {statsLoading ? (
+                  <div className="h-8 w-20 bg-white/10 rounded animate-pulse" />
+                ) : (
+                  formatNumber(stats?.total_requests ?? 0)
+                )}
+              </div>
+              {stats?.active_requests ? (
+                <div className="mt-1 text-xs text-blue-400">{stats.active_requests} active</div>
+              ) : null}
+            </div>
+
+            {/* Tokens */}
+            <div className="group/card relative overflow-hidden rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10 p-4 hover:bg-white/10 transition-all duration-300">
+              <div className="flex items-center gap-3 mb-2">
+                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/20">
+                  <Zap className="h-5 w-5 text-amber-400" />
+                </div>
+                <span className="text-xs font-medium text-slate-400 uppercase tracking-wider">Tokens</span>
+              </div>
+              <div className="text-2xl font-bold text-white font-mono">
+                {statsLoading ? (
+                  <div className="h-8 w-20 bg-white/10 rounded animate-pulse" />
+                ) : (
+                  formatNumber(totalTokens)
+                )}
+              </div>
+              <div className="mt-1 text-xs text-slate-500">
+                {formatNumber(stats?.total_input_tokens ?? 0)} in / {formatNumber(stats?.total_output_tokens ?? 0)} out
+              </div>
+            </div>
+
+            {/* Error Rate */}
+            <div className="group/card relative overflow-hidden rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10 p-4 hover:bg-white/10 transition-all duration-300">
+              <div className="flex items-center gap-3 mb-2">
+                <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${(stats?.error_rate ?? 0) > 0.05 ? 'bg-red-500/20' : 'bg-emerald-500/20'}`}>
+                  <Shield className={`h-5 w-5 ${(stats?.error_rate ?? 0) > 0.05 ? 'text-red-400' : 'text-emerald-400'}`} />
+                </div>
+                <span className="text-xs font-medium text-slate-400 uppercase tracking-wider">Error Rate</span>
+              </div>
+              <div className={`text-2xl font-bold font-mono ${(stats?.error_rate ?? 0) > 0.05 ? 'text-red-400' : 'text-emerald-400'}`}>
+                {statsLoading ? (
+                  <div className="h-8 w-16 bg-white/10 rounded animate-pulse" />
+                ) : (
+                  `${((stats?.error_rate ?? 0) * 100).toFixed(2)}%`
+                )}
+              </div>
+              <div className="mt-1 text-xs text-slate-500">{stats?.total_errors ?? 0} errors</div>
+            </div>
+          </div>
+
+          {/* Latency Bar */}
+          <div className="rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10 p-4">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-slate-400">Response Latency</span>
+              <div className="flex items-center gap-4 text-xs">
+                <span className="text-slate-500">AVG: <span className="text-white font-mono">{(stats?.avg_latency_ms ?? 0).toFixed(0)}ms</span></span>
+                <span className="text-slate-500">P50: <span className="text-white font-mono">{(stats?.p50_latency_ms ?? 0).toFixed(0)}ms</span></span>
+                <span className="text-slate-500">P95: <span className="text-amber-400 font-mono">{(stats?.p95_latency_ms ?? 0).toFixed(0)}ms</span></span>
+                <span className="text-slate-500">P99: <span className="text-red-400 font-mono">{(stats?.p99_latency_ms ?? 0).toFixed(0)}ms</span></span>
+              </div>
+            </div>
+            <div className="h-2 w-full rounded-full bg-white/10 overflow-hidden">
+              <div 
+                className="h-full bg-gradient-to-r from-emerald-500 via-amber-500 to-red-500 rounded-full transition-all duration-500"
+                style={{ width: `${Math.min(100, ((stats?.avg_latency_ms ?? 0) / 5000) * 100)}%` }}
+              />
+            </div>
           </div>
-          <h2 className="mt-4 text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent animate-slide-up" style={{ animationDelay: '100ms' }}>
-            Gateway Overview
-          </h2>
-          <p className="mt-2 max-w-2xl text-muted-foreground leading-relaxed animate-slide-up" style={{ animationDelay: '200ms' }}>
-            Real-time insights into your Kiro Gateway performance, token usage, and system health.
-          </p>
         </div>
       </div>
 

dashboard/src/hooks/useMetrics.ts

@@ -1,7 +1,9 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useCallback, useRef } from 'react';
 import api from '@/lib/api';
+import type { DashboardStats } from '@/types/metrics';
 
 const LIVE_QUERY_OPTIONS = {
   refetchOnReconnect: true,
@@ -9,6 +11,11 @@ const LIVE_QUERY_OPTIONS = {
   refetchIntervalInBackground: true,
 } as const;
 
+// Get API key from env
+const API_KEY = typeof window !== 'undefined' 
+  ? (process.env.NEXT_PUBLIC_DASHBOARD_API_KEY || '')
+  : '';
+
 export function useStats() {
   return useQuery({
     queryKey: ['stats'],
@@ -18,6 +25,69 @@ export function useStats() {
   });
 }
 
+export function useLiveStats() {
+  const queryClient = useQueryClient();
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const connect = useCallback(() => {
+    // Clean up existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || '';
+    const url = `${baseUrl}/api/dashboard/stream/stats?key=${encodeURIComponent(API_KEY)}`;
+    
+    const eventSource = new EventSource(url);
+    eventSourceRef.current = eventSource;
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data: DashboardStats = JSON.parse(event.data);
+        // Update the query cache directly for instant updates
+        queryClient.setQueryData(['stats'], data);
+      } catch (e) {
+        console.error('Failed to parse SSE data:', e);
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+      // Reconnect after 3 seconds
+      reconnectTimeoutRef.current = setTimeout(() => {
+        connect();
+      }, 3000);
+    };
+  }, [queryClient]);
+
+  useEffect(() => {
+    // Only connect if we have an API key
+    if (API_KEY) {
+      connect();
+    }
+
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+    };
+  }, [connect]);
+
+  // Return the query with SSE updates
+  return useQuery({
+    queryKey: ['stats'],
+    queryFn: api.getStats,
+    // Disable polling when SSE is active
+    refetchInterval: API_KEY ? false : 5000,
+    staleTime: API_KEY ? Infinity : 0,
+    ...LIVE_QUERY_OPTIONS,
+  });
+}
+
 export function useMetrics(params?: { start_time?: string; end_time?: string; model?: string }) {
   return useQuery({
     queryKey: ['metrics', params],

kiro/dashboard_api/routes.py

@@ -5,10 +5,13 @@ Dashboard API routes.
 Provides REST endpoints for the admin dashboard.
 """
 
+import asyncio
+import json
 from datetime import datetime, timezone
-from typing import List, Optional
+from typing import List, Optional, AsyncGenerator
 
 from fastapi import APIRouter, Depends, HTTPException, Request, Query
+from fastapi.responses import StreamingResponse
 from fastapi.security import APIKeyHeader
 from loguru import logger
 
@@ -414,3 +417,100 @@ async def detailed_health(request: Request) -> HealthResponse:
         metrics_enabled=METRICS_ENABLED and METRICS_AVAILABLE,
         prometheus_ready=METRICS_AVAILABLE,
     )
+
+
+async def _generate_stats_stream(request: Request) -> AsyncGenerator[str, None]:
+    """Generate SSE stream with live stats updates."""
+    while True:
+        try:
+            # Check if client disconnected
+            if await request.is_disconnected():
+                break
+            
+            now = datetime.now(timezone.utc)
+            uptime = (now - _startup_time).total_seconds()
+            
+            # Build stats data
+            stats_data = {
+                "uptime_seconds": uptime,
+                "total_requests": 0,
+                "total_errors": 0,
+                "error_rate": 0.0,
+                "active_requests": 0,
+                "total_input_tokens": 0,
+                "total_output_tokens": 0,
+                "requests_by_model": {},
+                "tokens_by_model": {},
+                "avg_latency_ms": 0.0,
+                "p50_latency_ms": 0.0,
+                "p95_latency_ms": 0.0,
+                "p99_latency_ms": 0.0,
+                "accounts_total": 0,
+                "accounts_healthy": 0,
+                "accounts_unhealthy": 0,
+            }
+            
+            if METRICS_AVAILABLE and get_aggregator:
+                aggregator = get_aggregator()
+                metrics_stats = aggregator.get_stats()
+                stats_data.update({
+                    "uptime_seconds": metrics_stats.get("uptime_seconds", uptime),
+                    "total_requests": metrics_stats.get("total_requests", 0),
+                    "total_errors": metrics_stats.get("total_errors", 0),
+                    "error_rate": metrics_stats.get("error_rate", 0.0),
+                    "active_requests": metrics_stats.get("active_requests", 0),
+                    "total_input_tokens": metrics_stats.get("total_input_tokens", 0),
+                    "total_output_tokens": metrics_stats.get("total_output_tokens", 0),
+                    "requests_by_model": metrics_stats.get("requests_by_model", {}),
+                    "tokens_by_model": metrics_stats.get("tokens_by_model", {}),
+                    "avg_latency_ms": metrics_stats.get("avg_latency_ms", 0.0),
+                    "p50_latency_ms": metrics_stats.get("p50_latency_ms", 0.0),
+                    "p95_latency_ms": metrics_stats.get("p95_latency_ms", 0.0),
+                    "p99_latency_ms": metrics_stats.get("p99_latency_ms", 0.0),
+                })
+            
+            # Get account stats
+            account_pool = getattr(request.app.state, 'account_pool', None)
+            if account_pool:
+                account_stats = account_pool.get_account_stats()
+                stats_data["accounts_total"] = len(account_stats)
+                for acc in account_stats:
+                    if acc.get('health_status') in ('healthy', 'unknown'):
+                        stats_data["accounts_healthy"] += 1
+                    else:
+                        stats_data["accounts_unhealthy"] += 1
+            
+            # Send SSE event
+            yield f"data: {json.dumps(stats_data)}\n\n"
+            
+            # Wait before next update (1 second for real-time feel)
+            await asyncio.sleep(1)
+            
+        except asyncio.CancelledError:
+            break
+        except Exception as e:
+            logger.error(f"SSE stream error: {e}")
+            break
+
+
+@router.get("/stream/stats")
+async def stream_stats(request: Request, api_key: str = Query(None, alias="key")):
+    """
+    Server-Sent Events (SSE) endpoint for real-time stats.
+    
+    Streams live dashboard statistics every second.
+    Connect with EventSource: /api/dashboard/stream/stats?key=YOUR_API_KEY
+    """
+    # Verify API key from query param (SSE doesn't support headers easily)
+    if not api_key or api_key != PROXY_API_KEY:
+        raise HTTPException(status_code=401, detail="Invalid API key")
+    
+    return StreamingResponse(
+        _generate_stats_stream(request),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",  # Disable nginx buffering
+        },
+    )