feat(ui): replace anomaly alert badge with usage insights card

ui/src/components/analytics/anomaly-alert-badge.tsx

@@ -1,128 +0,0 @@
-/**
- * Anomaly Alert Badge Component
- *
- * Displays detected usage anomalies with visual indicators.
- * Shows high input, I/O ratio, cost spikes, and cache read alerts.
- */
-
-import { useState } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { AlertTriangle, ChevronDown, Zap, Gauge, DollarSign, Database } from 'lucide-react';
-import type { Anomaly, AnomalySummary, AnomalyType } from '@/hooks/use-usage';
-import { cn } from '@/lib/utils';
-
-interface AnomalyAlertBadgeProps {
-  anomalies: Anomaly[];
-  summary: AnomalySummary;
-  className?: string;
-}
-
-const ANOMALY_CONFIG: Record<
-  AnomalyType,
-  { icon: React.ComponentType<{ className?: string }>; color: string; label: string }
-> = {
-  high_input: { icon: Zap, color: 'text-yellow-600', label: 'High Input' },
-  high_io_ratio: { icon: Gauge, color: 'text-orange-600', label: 'High I/O Ratio' },
-  cost_spike: { icon: DollarSign, color: 'text-red-600', label: 'Cost Spike' },
-  high_cache_read: { icon: Database, color: 'text-cyan-600', label: 'Heavy Caching' },
-};
-
-export function AnomalyAlertBadge({ anomalies, summary, className }: AnomalyAlertBadgeProps) {
-  const [open, setOpen] = useState(false);
-
-  if (summary.totalAnomalies === 0) {
-    return (
-      <Badge variant="outline" className={cn('gap-1', className)}>
-        <span className="text-green-600">No anomalies</span>
-      </Badge>
-    );
-  }
-
-  // Get unique anomaly types for badges
-  const anomalyTypes = new Set(anomalies.map((a) => a.type));
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className={cn('gap-2 h-8', className)}>
-          <AlertTriangle className="h-4 w-4 text-amber-500" />
-          <span className="font-medium">{summary.totalAnomalies} anomalies</span>
-          <ChevronDown className={cn('h-4 w-4 transition-transform', open && 'rotate-180')} />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-96 p-0" align="end">
-        <div className="p-4 border-b">
-          <h4 className="font-semibold flex items-center gap-2">
-            <AlertTriangle className="h-4 w-4 text-amber-500" />
-            Detected Anomalies
-          </h4>
-          <p className="text-xs text-muted-foreground mt-1">
-            Unusual usage patterns detected in the selected period
-          </p>
-        </div>
-
-        {/* Summary badges */}
-        <div className="p-3 border-b flex flex-wrap gap-2">
-          {Array.from(anomalyTypes).map((type) => {
-            const config = ANOMALY_CONFIG[type];
-            const Icon = config.icon;
-            const count = anomalies.filter((a) => a.type === type).length;
-            return (
-              <Badge key={type} variant="secondary" className="gap-1">
-                <Icon className={cn('h-3 w-3', config.color)} />
-                {count} {config.label}
-              </Badge>
-            );
-          })}
-        </div>
-
-        {/* Anomaly list */}
-        <div className="max-h-[300px] overflow-y-auto">
-          {anomalies.slice(0, 10).map((anomaly, index) => {
-            const config = ANOMALY_CONFIG[anomaly.type];
-            const Icon = config.icon;
-
-            return (
-              <div
-                key={index}
-                className="p-3 border-b last:border-b-0 hover:bg-muted/50 transition-colors"
-              >
-                <div className="flex items-start gap-3">
-                  <Icon className={cn('h-4 w-4 mt-0.5', config.color)} />
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium">{anomaly.date}</span>
-                      {anomaly.model && (
-                        <Badge variant="outline" className="text-[10px] px-1 py-0">
-                          {truncateModel(anomaly.model)}
-                        </Badge>
-                      )}
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-0.5">{anomaly.message}</p>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-          {anomalies.length > 10 && (
-            <div className="p-3 text-center text-xs text-muted-foreground">
-              +{anomalies.length - 10} more anomalies
-            </div>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function truncateModel(model: string): string {
-  if (model.length <= 20) return model;
-  // Try to extract the meaningful part
-  const parts = model.split('-');
-  if (parts.length >= 3) {
-    return parts.slice(0, 3).join('-') + '...';
-  }
-  return model.slice(0, 17) + '...';
-}

ui/src/components/analytics/usage-insights-card.tsx

@@ -0,0 +1,168 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { CheckCircle2, Zap, Gauge, DollarSign, Database, Lightbulb } from 'lucide-react';
+import type { Anomaly, AnomalySummary, AnomalyType } from '@/hooks/use-usage';
+import { cn } from '@/lib/utils';
+
+interface UsageInsightsCardProps {
+  anomalies?: Anomaly[];
+  summary?: AnomalySummary;
+  isLoading?: boolean;
+  className?: string;
+}
+
+const ANOMALY_CONFIG: Record<
+  AnomalyType,
+  {
+    icon: React.ComponentType<{ className?: string }>;
+    color: string;
+    label: string;
+    description: string;
+  }
+> = {
+  high_input: {
+    icon: Zap,
+    color: 'text-yellow-600 dark:text-yellow-400',
+    label: 'High Input',
+    description: 'Unusually high input token usage detected.',
+  },
+  high_io_ratio: {
+    icon: Gauge,
+    color: 'text-orange-600 dark:text-orange-400',
+    label: 'High I/O Ratio',
+    description: 'Output tokens are significantly higher than input tokens.',
+  },
+  cost_spike: {
+    icon: DollarSign,
+    color: 'text-red-600 dark:text-red-400',
+    label: 'Cost Spike',
+    description: 'Daily cost is significantly higher than average.',
+  },
+  high_cache_read: {
+    icon: Database,
+    color: 'text-cyan-600 dark:text-cyan-400',
+    label: 'Heavy Caching',
+    description: 'High volume of cache read operations.',
+  },
+};
+
+export function UsageInsightsCard({
+  anomalies = [],
+  summary,
+  isLoading,
+  className,
+}: UsageInsightsCardProps) {
+  if (isLoading) {
+    return (
+      <Card className={cn('flex flex-col h-full', className)}>
+        <CardHeader className="px-4 py-3 border-b">
+          <CardTitle className="text-base font-semibold flex items-center gap-2">
+            <Lightbulb className="w-4 h-4 text-muted-foreground" />
+            Usage Insights
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-4 flex-1 flex items-center justify-center">
+          <div className="animate-pulse flex flex-col items-center gap-2 opacity-50">
+            <div className="h-8 w-8 bg-muted rounded-full" />
+            <div className="h-4 w-32 bg-muted rounded" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const hasAnomalies = summary && summary.totalAnomalies > 0;
+
+  return (
+    <Card className={cn('flex flex-col h-full overflow-hidden', className)}>
+      <CardHeader className="px-4 py-3 border-b bg-muted/5">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base font-semibold flex items-center gap-2">
+            <Lightbulb
+              className={cn('w-4 h-4', hasAnomalies ? 'text-amber-500' : 'text-green-500')}
+            />
+            Usage Insights
+          </CardTitle>
+          {hasAnomalies ? (
+            <Badge
+              variant="destructive"
+              className="h-5 px-1.5 text-[10px] uppercase font-bold tracking-wider"
+            >
+              Attention Needed
+            </Badge>
+          ) : (
+            <Badge
+              variant="outline"
+              className="h-5 px-1.5 text-[10px] uppercase font-bold tracking-wider text-green-600 border-green-200 bg-green-50 dark:bg-green-900/10 dark:border-green-800"
+            >
+              Healthy
+            </Badge>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-0 flex-1 min-h-0 flex flex-col">
+        {hasAnomalies ? (
+          <ScrollArea className="flex-1">
+            <div className="divide-y">
+              {anomalies.map((anomaly, index) => {
+                const config = ANOMALY_CONFIG[anomaly.type];
+                const Icon = config.icon;
+
+                return (
+                  <div key={index} className="p-4 hover:bg-muted/50 transition-colors">
+                    <div className="flex items-start gap-3">
+                      <div
+                        className={cn(
+                          'p-2 rounded-lg shrink-0 bg-muted/30',
+                          config.color
+                            .replace('text-', 'bg-')
+                            .replace('600', '100')
+                            .replace('400', '900/20')
+                        )}
+                      >
+                        <Icon className={cn('h-4 w-4', config.color)} />
+                      </div>
+                      <div className="flex-1 min-w-0 space-y-1">
+                        <div className="flex items-center justify-between gap-2">
+                          <p className="font-medium text-sm">{config.label}</p>
+                          <span className="text-xs text-muted-foreground whitespace-nowrap">
+                            {anomaly.date}
+                          </span>
+                        </div>
+                        <p className="text-xs text-muted-foreground line-clamp-2">
+                          {anomaly.message}
+                        </p>
+                        {anomaly.model && (
+                          <div className="pt-1">
+                            <Badge
+                              variant="secondary"
+                              className="text-[10px] px-1 py-0 h-5 font-mono"
+                            >
+                              {anomaly.model}
+                            </Badge>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center p-6 text-center text-muted-foreground">
+            <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center mb-3">
+              <CheckCircle2 className="w-6 h-6 text-green-600 dark:text-green-400" />
+            </div>
+            <p className="font-medium text-foreground">No anomalies detected</p>
+            <p className="text-xs mt-1 max-w-[200px]">
+              Your usage patterns look normal for the selected period.
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

ui/src/pages/analytics.tsx

@@ -18,7 +18,7 @@ import { UsageTrendChart } from '@/components/analytics/usage-trend-chart';
 import { ModelBreakdownChart } from '@/components/analytics/model-breakdown-chart';
 import { ModelDetailsContent } from '@/components/analytics/model-details-content';
 import { SessionStatsCard } from '@/components/analytics/session-stats-card';
-import { AnomalyAlertBadge } from '@/components/analytics/anomaly-alert-badge';
+import { UsageInsightsCard } from '@/components/analytics/usage-insights-card';
 import { TrendingUp, PieChart, RefreshCw, DollarSign, ChevronRight } from 'lucide-react';
 import {
   useUsageSummary,
@@ -105,10 +105,6 @@ export function AnalyticsPage() {
             <p className="text-sm text-muted-foreground">Track usage & insights</p>
           </div>
           <div className="flex items-center gap-2">
-            {/* Anomaly Alert Badge */}
-            {!isInsightsLoading && insights && (
-              <AnomalyAlertBadge anomalies={insights.anomalies} summary={insights.summary} />
-            )}
             <DateRangeFilter
               value={dateRange}
               onChange={setDateRange}
@@ -289,11 +285,19 @@ export function AnalyticsPage() {
               </CardContent>
             </Card>
 
-            {/* Session Stats - 4/10 width */}
+            {/* Session Stats - 2/10 width */}
             <SessionStatsCard
               data={sessions}
               isLoading={isSessionsLoading}
-              className="lg:col-span-4"
+              className="lg:col-span-2"
+            />
+
+            {/* Usage Insights - 2/10 width */}
+            <UsageInsightsCard
+              anomalies={insights?.anomalies}
+              summary={insights?.summary}
+              isLoading={isInsightsLoading}
+              className="lg:col-span-2"
             />
           </div>